/**
 * main.css — Styles de tous les composants
 * Motmot Treks — Design System V1, section 12.4.
 *
 * Feuille unique regroupant les styles de l'ensemble des
 * composants et patterns du thème, organisée en sections
 * commentées. Chargée en dernier dans le pipeline CSS
 * (fonts → tokens → themes → base → typography → main).
 *
 * Ne contient AUCun token : toutes les valeurs proviennent
 * de tokens.css. BEM pour le nommage (DS §12.6).
 */

/* ============================================================
   BUTTON — composant bouton
   Design System §6.2. Trois variantes (primary, secondary,
   ghost), deux tailles (md, lg). Le terracotta plein est
   EXCLUSIF à btn--primary. min-height 48px : cible tactile.
   ============================================================ */

.btn {
	/* Structure : inline-flex pour aligner un libellé + une icône. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);

	/* Cible tactile (DS §6.2 & §11.2) : jamais de hauteur fixe,
	   min-height pour laisser le libellé passer sur 2 lignes. */
	min-height: 48px;

	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font-family: var(--font-text);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	text-align: center;
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--ease-soft),
		border-color var(--duration-fast) var(--ease-soft),
		color var(--duration-fast) var(--ease-soft);
}

/* --- Tailles ----------------------------------------------- */
/* Pas de taille sm (DS §6.2). Padding généreux. */

.btn--md {
	padding: var(--space-3) var(--space-6);
	font-size: var(--text-base);
}

.btn--lg {
	padding: var(--space-4) var(--space-8);
	font-size: var(--text-lg);
}

/* --- Variante : primary ------------------------------------ */
/* Action principale, conversion. Seul élément du site en
   terracotta plein. */

.btn--primary {
	background-color: var(--action-primary);
	color: var(--text-on-accent);
}

.btn--primary:hover {
	background-color: var(--action-primary-hover);
}

/* --- Variante : secondary ---------------------------------- */
/* Action alternative : transparent, bordure subtile. */

.btn--secondary {
	background-color: transparent;
	border-color: var(--border-subtle);
	color: var(--text-primary);
}

.btn--secondary:hover {
	background-color: var(--surface-raised);
}

/* --- Variante : ghost -------------------------------------- */
/* Action discrète, tertiaire : ni fond ni bordure. */

.btn--ghost {
	background-color: transparent;
	color: var(--text-primary);
}

.btn--ghost:hover {
	background-color: var(--surface-raised);
}

/* --- États transversaux ------------------------------------ */

/* Focus visible — jamais supprimé (DS §6.2 & §11.1). */
.btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Désactivé : opacité réduite, curseur explicite. */
.btn:disabled,
.btn[aria-disabled="true"],
.btn--disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Chargement : style préparé (DS §6.2). Le libellé reste
   visible ; l'icône de progression sera ajoutée avec le JS. */
.btn--loading {
	cursor: progress;
	pointer-events: none;
}
/* ============================================================
   TOUR CARD — carte de tour
   Design System §7.1. Composant de contenu, indépendant du
   pattern hôte. Ne consomme que des tokens sémantiques :
   fonctionne sur section claire comme sombre.
   ============================================================ */

.tour-card {
	position: relative;
	height: 100%; /* égalise les cartes d'une même rangée de grille. */
}

/* Toute la carte est cliquable : le lien enveloppe média + corps. */
.tour-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--surface-raised);
	box-shadow: var(--shadow-card);
}

/* --- Média ------------------------------------------------- */

.tour-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden; /* borne le zoom de l'image au survol. */
}

.tour-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-medium) var(--ease-soft);
}

/* Repli sans image mise en avant : aplat neutre. */
.tour-card__image--placeholder {
	display: block;
	background-color: var(--surface-primary);
}

/* Overlay bas de carte — assure la lisibilité, jamais décoratif. */
.tour-card__overlay {
	position: absolute;
	inset: 0;
	background: var(--overlay-card);
	pointer-events: none;
}

/* --- Corps ------------------------------------------------- */

.tour-card__body {
	display: flex;
	flex-direction: column;
	flex: 1; /* remplit la hauteur restante pour aligner le prix en bas */
	gap: var(--space-3);
	padding: var(--space-4);
}

.tour-card__title {
	color: var(--text-primary);
}

.tour-card__teaser {
	color: var(--text-muted);
}

/* --- Infos pratiques --------------------------------------- */

.tour-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin-top: auto; /* ancre le bloc prix en bas de toutes les cartes */
	padding-top: var(--space-3);
	color: var(--text-muted);
}

.tour-card__meta-item {
	display: inline-flex;
	align-items: center;
}

/* Séparateur discret entre infos, sauf devant la première — et jamais
   devant le prix, qui a toujours sa propre ligne. */
.tour-card__meta-item + .tour-card__meta-item:not(.tour-card__meta-item--price)::before {
	content: "·";
	margin-right: var(--space-3);
	color: var(--border-subtle);
}

/* Lieu : fonte serif en italique — distinction premium du nom de lieu. */
.tour-card__meta-item--place {
	font-family: var(--font-text);
	font-style: italic;
	font-weight: var(--weight-medium);
}

/* Le prix : seule info accentuée, sans recourir au terracotta
   (réservé aux CTA, DS §6.5). Accent par la graisse. Toujours sur sa
   propre ligne — jamais de séparateur orphelin devant lui. */
.tour-card__meta-item--price {
	flex-basis: 100%;
	color: var(--text-primary);
	font-weight: var(--weight-semibold);
}

/* --- Interactions ------------------------------------------ */

/* Mouvement signature : léger zoom de l'image dans son cadre. */
.tour-card__link:hover .tour-card__image {
	transform: scale(1.04);
}

/* Focus visible porté par toute la carte (DS §11.1). */
.tour-card__link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* --- Variante : featured ----------------------------------- */
/* Carte de mise en avant : média plus haut, corps plus généreux. */

.tour-card--featured .tour-card__media {
	aspect-ratio: var(--ratio-hero);
}

.tour-card--featured .tour-card__body {
	padding: var(--space-6);
	gap: var(--space-3);
}

/* --- Variante : compact ------------------------------------ */
/* Carte dense pour listes secondaires : média portrait court,
   pas d'accroche (gérée côté template). */

.tour-card--compact .tour-card__media {
	aspect-ratio: var(--ratio-square);
}

.tour-card--compact .tour-card__body {
	padding: var(--space-3);
	gap: var(--space-1);
}
/* ============================================================
   POST CARD — une entrée du journal
   N'est plus un miroir de .tour-card (2026-08-27) : une photo montée
   sur un mat de papier (même famille que .dest-polaroid, sans la
   rotation — une liste répétée doit rester scannable, clientèle
   ornithologue 50+, CLAUDE.md), date + temps de lecture, titre en
   manuscrit (fragment court, invariant 4), invitation de lecture
   sobre en écho à .post-article__back. Voir patterns/post-grid.php
   pour le raisonnement complet. Ne consomme que des tokens
   sémantiques.
   ============================================================ */

.post-card:not(:last-child) {
	padding-bottom: var(--space-8);
	margin-bottom: var(--space-8);
	border-bottom: 1px solid var(--border-subtle);
}

.post-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	color: inherit;
	text-decoration: none;
}

.post-card__media {
	flex: none;
	padding: 8px 8px 10px;
	background-color: var(--sand-50);
	box-shadow:
		0 10px 22px -14px rgba(20, 40, 30, 0.28),
		0 3px 8px rgba(20, 40, 30, 0.10);
	transition: transform var(--duration-medium) var(--ease-soft);
}

.post-card__image {
	display: block;
	width: 100%;
	aspect-ratio: var(--ratio-landscape);
	object-fit: cover;
}

/* Repli sans image mise en avant : aplat neutre, jamais une photo
   de banque (invariant 5). */
.post-card__image--placeholder {
	display: block;
	aspect-ratio: var(--ratio-landscape);
	background-color: var(--surface-primary);
}

.post-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
}

.post-card__meta {
	color: var(--text-muted);
}

.post-card__title {
	font-family: var(--font-display); /* Shantell Sans — écho à .post-article__title */
	font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.65rem);
	font-weight: 500;
	line-height: var(--leading-snug);
	color: var(--text-primary);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--duration-medium) var(--ease-soft);
}

.post-card__excerpt {
	max-width: 52ch;
	color: var(--text-muted);
}

.post-card__read {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-1);
	font-family: var(--font-text);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--green-600);
}

/* Icône : même tracé que .post-article__back-icon (arrow-left),
   retournée pour pointer vers l'avant plutôt que d'ajouter un tracé. */
.post-card__read-icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
	flex-shrink: 0;
	transform: scaleX(-1);
	transition: transform var(--duration-medium) var(--ease-soft);
}

/* Survol/focus : le titre gagne un soulignement (même geste que la
   carte du temps 3, CONCEPT.md — « au survol : simple soulignement,
   rien qui s'écrit »), le lien de lecture passe à l'encre terracotta
   (même convention que .bird-group__link:hover), et le mat de papier
   (photo + bord blanc, un seul objet) grossit légèrement — pas la
   photo seule à l'intérieur d'un cadre fixe (2026-08-27, revu deux
   fois : d'abord un zoom sur la photo seule jugé trop « effet de
   carte », puis rien du tout jugé trop plat — l'entre-deux retenu est
   de soulever l'objet entier, comme si on le rapprochait). */
.post-card__link:hover .post-card__media,
.post-card__link:focus-visible .post-card__media {
	transform: scale(1.035);
}

.post-card__link:hover .post-card__title,
.post-card__link:focus-visible .post-card__title {
	text-decoration-color: currentColor;
}

.post-card__link:hover .post-card__read,
.post-card__link:focus-visible .post-card__read {
	color: var(--accent-500);
}

.post-card__link:hover .post-card__read-icon,
.post-card__link:focus-visible .post-card__read-icon {
	transform: scaleX(-1) translateX(3px);
}

.post-card__link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Livre statique : pas de glissement au survol, l'encre seule répond
   (même garde-fou que .split__link, CONCEPT.md §4). */
@media (prefers-reduced-motion: reduce) {
	.post-card__media,
	.post-card__title,
	.post-card__read-icon {
		transition: none;
	}
	.post-card__link:hover .post-card__media {
		transform: none;
	}
	.post-card__link:hover .post-card__read-icon {
		transform: scaleX(-1);
	}
}

/* --- Tablette+ : la photo passe à gauche, le texte à droite (même
   logique voir → lire que .split, DS §4.6) ------------------------ */

@media (min-width: 48rem) {

	.post-card__link {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-8);
	}

	.post-card__media {
		width: 38%;
		max-width: 300px;
	}

	.post-card__body {
		flex: 1;
		padding-top: var(--space-1);
	}
}
/* ============================================================
   JOURNAL-INTRO — en-tête de /journal/
   Remplace l'ancien header text-offset (texte seul sur fond sombre) :
   un post-it qui introduit la page et un croquis crayon décoratif à
   côté, pas une photo précise (voir template-journal.php pour le
   raisonnement, et [[journal-listing-redesign]] en mémoire pour
   l'historique des 3 revus du 2026-08-27). Fond vert par défaut (pas
   .section--light) ; le post-it est un simple encadré crème
   transparent (le vert se voit à travers), pas une carte de papier
   opaque. Le croquis suit en crème via un masque CSS. Ne consomme que
   des tokens sémantiques.
   ============================================================ */

.journal-intro {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-compact);
}

.journal-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-12);
}

/* Encadré, pas une carte de papier opaque : un simple contour sur le
   vert, comme la ligne du logo dans le header juste au-dessus.
   Transparent — le vert de la section se voit à travers.
   Couleur --sand-150, pas --sand-50 (2026-08-27, « utilise la couleur
   du fond texturé pour les éléments ») : c'est le jeton déjà utilisé
   ailleurs dans ce fichier comme teinte moyenne de
   fond-texture-creme.webp — le papier de .post-grid juste en dessous
   — pas le blanc cassé le plus clair de l'échelle sand. Une seule
   encre pour tout l'encadré (contour, ruban, titre, texte, croquis). */
.journal-intro__note {
	position: relative;
	width: 100%;
	max-width: 480px;
	padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 28px);
	background-color: transparent;
	border: 2px solid var(--sand-150);
	border-radius: 2px;
	transform: rotate(-1deg);
}

/* Ruban adhésif — même technique que .google-reviews__card-tape
   (masque CSS sur assets/svg/deco/tape.svg). */
.journal-intro__note-tape {
	position: absolute;
	top: -26px;
	left: 50%;
	width: 72px;
	height: 50px;
	background-color: var(--sand-150);
	filter: drop-shadow(0 2px 3px rgba(33, 36, 15, 0.4));
	-webkit-mask: url('../svg/deco/tape.svg') center / contain no-repeat;
	        mask: url('../svg/deco/tape.svg') center / contain no-repeat;
	transform: translateX(-50%) rotate(15deg);
	pointer-events: none;
}

.journal-intro__eyebrow {
	margin: 0;
	color: var(--sand-150);
}

/* Titre en manuscrit : fragment court, invariant 4 — le reste du
   post-it (surtitre, texte) reste en --font-text, jamais de texte
   long en manuscrit. */
.journal-intro__title {
	margin: var(--space-1) 0 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
	font-weight: 500;
	line-height: var(--leading-tight);
	color: var(--sand-150);
}

.journal-intro__text {
	margin: var(--space-3) 0 0;
	font-family: var(--font-text);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--sand-150);
}

/* Croquis crayon : le PNG généré par l'auteur du site (attachment 394,
   voir template-journal.php), recoloré en crème via un masque CSS —
   même technique que .dest-reco__card-tape. --sand-150 comme le reste
   de l'encadré (« utilise la couleur du fond texturé »). Statique :
   une animation à l'ouverture a été essayée le 2026-08-27 (le crayon
   glissant de gauche à droite pendant que le trait se révèle, deux
   calques de la même image) puis abandonnée à la demande de l'auteur
   du site — voir [[journal-listing-redesign]] en mémoire. Ne pas la
   réintroduire sans redemander. */
.journal-intro__sketch {
	width: 100%;
	max-width: 300px;
}

.journal-intro__sketch-img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2; /* dimensions de la taille « medium_large » (768×512) servie depuis template-journal.php */
	background-color: var(--sand-150);
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
}

@media (min-width: 64rem) {

	.journal-intro__inner {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: var(--space-16);
	}

	.journal-intro__note {
		flex: 0 1 460px;
	}

	.journal-intro__sketch {
		flex: 0 1 380px;
		max-width: 380px;
	}
}

/* ============================================================
   GUIDES — section équipe (accueil) — layout Z "magazine".
   Mobile : cartes empilées en colonne.
   Desktop : chaque carte en rangée photo/texte, alternée en Z.
   Ne consomme que des tokens sémantiques.
   ============================================================ */

/* ============================================================
   GUIDES SECTION — section équipe (accueil)
   ============================================================ */

.guides {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

.guides__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.guides__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.guides__eyebrow {
	color: var(--text-muted);
}

.guides__title {
	color: var(--text-primary);
}

.guides__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/* Page About us : fond texturé clair pour la section (alternance avec
   les sections voisines), mais les GuideCard restent volontairement
   sombres — un repère de marque (vert), pas juste « le thème local du
   fond ». Ré-affecte les tokens sémantiques localement, comme le fait
   déjà .section--light au niveau section (2026-08-27). */
.page-template-template-about-php .guides.section--light .guide-card {
	--surface-raised: var(--green-600);
	--text-primary:   var(--sand-50);
	--text-muted:     var(--sand-300);
	--border-subtle:  var(--green-500);
	background-color: var(--surface-raised);
}

/* ============================================================
   GUIDE CARD — présentation éditoriale pleine largeur
   Mobile : portrait 4/5 + corps empilé.
   Desktop : portrait pleine hauteur (42 %) + corps centré (58 %).
   Hiérarchie : rôle → nom → bio → citation.
   ============================================================ */

.guide-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--surface-raised);
	box-shadow: var(--shadow-card);
}

/* --- Portrait ---------------------------------------------- */

.guide-card__media {
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.guide-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform var(--duration-slow) var(--ease-soft);
}

.guide-card:hover .guide-card__image {
	transform: scale(1.03);
}

.guides__list .guide-card:first-child .guide-card__image {
	object-position: center 50%;
	transform: scale(1.1);
}

.guides__list .guide-card:first-child:hover .guide-card__image {
	object-position: center 50%;
	transform: scale(1.13);
}

.guide-card__image--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--surface-primary);
}

/* --- Corps ------------------------------------------------- */

.guide-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
}

/* Taille réduite (2026-08-27) : depuis que le rôle porte la phrase
   complète « co-founder » (plus un titre court, template-about.php),
   la taille t-eyebrow standard pesait trop lourd en majuscules. */
.guide-card__role {
	font-size: 0.6875rem;
	color: var(--text-muted);
}

.guide-card__name {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	line-height: var(--leading-tight);
	color: var(--text-primary);
}

.guide-card__bio {
	color: var(--text-primary);
	line-height: var(--leading-relaxed);
	padding-top: var(--space-2);
	border-top: 1px solid var(--border-subtle);
}

/* --- Citation signature : touche éditoriale -------------- */

.guide-card__quote {
	margin: 0;
	padding-top: var(--space-2);
	border-top: 1px solid var(--border-subtle);
}

.guide-card__quote-text {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-style: italic;
	line-height: var(--leading-snug);
	color: var(--text-muted);
}

.guide-card__quote-text::before {
	content: '\201C';
	font-size: 1.3em;
	line-height: 0.8;
	vertical-align: -0.25em;
	margin-right: 0.05em;
}

.guide-card__quote-text::after {
	content: '\201D';
	font-size: 1.3em;
	line-height: 0.8;
	vertical-align: -0.25em;
	margin-left: 0.05em;
}

/* Ligne factuelle sous la citation (2026-08-27, reprise de la home,
   même rôle que .split__signature-fact). --text-primary, pas
   --text-muted : ligne de crédibilité, pas un détail à estomper. */
.guide-card__fact {
	margin: calc(var(--space-2) * -1) 0 0;
	font-size: var(--text-xs);
	color: var(--text-primary);
}

/* --- Desktop : portrait pleine hauteur, texte centré ------- */

@media (min-width: 64rem) {

	.guides__list .guide-card {
		flex-direction: row;
		align-items: stretch;
	}

	.guides__list .guide-card:nth-child(even) {
		flex-direction: row-reverse;
	}

	/* Photo : 35 % de la largeur, format carré 1:1.
	   La photo impose la hauteur de la carte ; le corps s'y adapte. */
	.guides__list .guide-card__media {
		width: 35%;
		flex-shrink: 0;
		aspect-ratio: 1 / 1;
	}

	/* Corps : largeur flexible, centré verticalement. */
	.guides__list .guide-card__body {
		flex: 1;
		padding: clamp(var(--space-4), 2vw, var(--space-6));
		justify-content: center;
	}
}

/* ============================================================
   TESTIMONIALS — section preuve sociale (accueil)
   Enveloppe plusieurs composants Testimonial en grille.
   Ne consomme que des tokens sémantiques.
   ============================================================ */

.testimonials {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

.testimonials__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-12);
}

.testimonials__eyebrow {
	color: var(--text-muted);
}

.testimonials__title {
	color: var(--text-primary);
}

/* --- Liste : mobile-first, carrousel horizontal ------------- */
/* Sur mobile, les témoignages défilent latéralement avec
   aimantation centrée. En desktop, retour à une grille 3
   colonnes : tous les avis visibles d'un coup. */
.testimonials__list {
	display: flex;
	gap: var(--space-4);
	padding-inline: 11%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.testimonials__list::-webkit-scrollbar {
	display: none;
}

.testimonials__list > * {
	flex: 0 0 78%;
	scroll-snap-align: center;
}

@media (min-width: 64rem) {

	.testimonials__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-8);
		align-items: start;
		/* Annule le scroll et le padding du mode carrousel. */
		padding-inline: 0;
		overflow-x: visible;
	}

	.testimonials__list > * {
		flex: initial;
	}
}

/* ============================================================
   TESTIMONIAL — bloc témoignage
   Design System §7.3. Citation, nom, contexte, photo preuve
   optionnelle. Pas de notation par étoiles.
   ============================================================ */

.testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background-color: var(--surface-raised);
	border-radius: var(--radius-md);
}

/* --- Photo preuve (optionnelle) ---------------------------- */

.testimonial__media {
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.testimonial__image {
	width: 100%;
	height: 100%;
	aspect-ratio: var(--ratio-landscape);
	object-fit: cover;
}

/* --- Citation ---------------------------------------------- */

.testimonial__quote {
	color: var(--text-primary);
	font-style: italic;
}

/* --- Attribution ------------------------------------------- */

.testimonial__attribution {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-top: auto; /* ancre l'attribution en bas si la carte s'étire. */
}

.testimonial__name {
	color: var(--text-primary);
	font-weight: var(--weight-semibold);
}

.testimonial__context {
	color: var(--text-muted);
}
/* ============================================================
   FEATURE-STACK — pattern cinématographique
   Design System §4.6 (pattern 5). Image plein écran en fond,
   contenu superposé ancré, overlay hero obligatoire.
   ============================================================ */

.feature-stack {
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
}

/* Hauteur calée sur le viewport — jamais une hauteur fixe en px
   (DS §4.6) : le contenu traduit peut grandir sans déborder. */
.feature-stack--viewport {
	min-height: 100svh;
}

.feature-stack--tall {
	min-height: 80svh;
}

/* --- Média de fond ----------------------------------------- */

.feature-stack__media {
	position: absolute;
	inset: 0;
	z-index: var(--z-content);
}

/* Present seulement quand `mobile_image_id` est fourni
   (feature-stack.php) : <picture> est un élément inline sans
   dimensions propres — sans ce bloc, il s'intercale entre .__media
   et .__image et casse le height:100% de cette dernière (la photo
   ne couvrait alors plus toute la hauteur de l'écran). */
.feature-stack__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.feature-stack__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Hero plein écran : oiseau collé au bord droit, Y intact pour révéler la queue. */
.feature-stack--viewport .feature-stack__image {
	object-position: 100% 75% !important;
}

/* Mobile portrait : décale le cadrage vers la gauche de l'image source pour
   pousser le motmot vers la droite du viewport sans le faire sortir. */
@media (max-width: 47.99rem) {
	.feature-stack--viewport .feature-stack__image {
		object-position: 70% 60% !important;
	}
}

/* Hero Birdwatching (photo 355, mobile_image_id depuis le 2026-08-27,
   après un essai avec la 362) : la règle générique ci-dessus (70%
   60%) était calée pour l'ancien comportement — un recadrage mobile
   de LA MÊME photo que le desktop (262, l'oiseau collé au bord
   droit). Depuis que mobile sert une photo différente (composition
   inconnue de cette règle), ce réglage n'a plus de raison de
   convenir — reréglé au centre en attendant un retour visuel de
   l'auteur du site (direction à corriger si l'oiseau sort encore du
   cadre). */
@media (max-width: 47.99rem) {
	.page-template-template-birdwatching-php .feature-stack--viewport .feature-stack__image {
		object-position: 50% center !important;
	}
}

/* Hero About us (photo 393, Andrid et Baptiste sur la place d'Antigua) :
   le format du hero (très large) est plus large que la photo (~3/2), donc
   cover cale par défaut sur la largeur — object-position en X n'a alors
   strictement aucun effet, quel que soit le viewport (le couple reste
   centré). Un premier essai en gonflant `height` (2026-08-27, retiré le
   même jour) créait bien une marge horizontale, mais son ampleur dépendait
   du ratio largeur/hauteur du viewport — fiable sur un fond d'écran,
   invisible sur un autre (fenêtre plus basse : le couple disparaissait).
   `transform: scale + translateX` déplace le rendu déjà calé (cover) tel
   quel, indépendamment du ratio de la fenêtre : robuste sur toutes les
   hauteurs. object-position ne garde plus qu'un rôle vertical (Y). */
.page-template-template-about-php .feature-stack--viewport .feature-stack__image {
	object-position: 50% 45% !important;
	transform: scale(1.35) translateX(8%);
	transform-origin: center;
}

/* Mobile portrait : le rapport largeur/hauteur s'inverse (box plus
   étroite que la photo), cover cale alors sur la hauteur — de la marge
   horizontale existe déjà nativement, la bidouille scale/translateX du
   desktop ne sert plus à rien (et déforme). object-position seul suffit. */
@media (max-width: 47.99rem) {
	.page-template-template-about-php .feature-stack--viewport .feature-stack__image {
		object-position: 55% 15% !important;
		transform: none;
	}

	.page-template-template-about-php .feature-stack--tall .feature-stack__image {
		object-position: 65% 45% !important;
		transform: none;
	}
}

/* Hero Tailor-Made (photo 308, vue d'Antigua depuis le Cerro de la Cruz) :
   le réglage Y 75% ci-dessus vient d'un autre hero (le motmot, sujet en
   bas-droite) et masquait trop le volcán de Agua sous les toits sur ce
   cadre plus large. Cadrage abaissé pour cette page précise seulement —
   ne touche pas aux autres pages qui partagent .feature-stack--viewport
   (2026-08-11). */
.page-template-template-tailormade-php .feature-stack--viewport .feature-stack__image {
	object-position: 100% 55% !important;
}

/* Mobile : photo différente du desktop (282, mobile_image_id) depuis le
   2026-08-29 — le réglage ci-dessus (100% 55%) était calé pour la 308
   et n'a plus de raison de convenir à cette composition. Recadrage
   propre au mobile, décalé encore vers la droite (demande explicite de
   l'auteur du site). */
@media (max-width: 47.99rem) {
	.page-template-template-tailormade-php .feature-stack--viewport .feature-stack__image {
		object-position: 40% 55% !important;
	}
}

/* CTA final de l'accueil (photo 54) : cadrage par défaut (center)
   tombe trop à gauche du sujet — décalé légèrement vers la droite.
   Un pourcentage objet-position plus BAS montre davantage la partie
   gauche de la source, ce qui pousse visuellement le cadrage vers la
   droite (35%, pas 65% — l'inverse a été essayé puis corrigé le
   2026-08-27). Scopé à .home : ne touche pas aux autres pages qui
   partagent `.feature-stack--tall` (ex. template-about.php, réglage
   propre plus bas). */
.home .feature-stack--tall .feature-stack__image {
	object-position: 35% center;
}

/* Repli sans image : aplat sombre, le texte reste lisible. */
.feature-stack__image--placeholder {
	display: block;
	background-color: var(--green-900);
}

/* Overlay hero — gradient qui assombrit le bas où se pose le
   texte. Obligatoire sur feature-stack (DS §5.6 / §5.8). */
.feature-stack__overlay {
	position: absolute;
	inset: 0;
	background: var(--overlay-hero);
	pointer-events: none;
}

/* Overlay renforcé sur le hero plein écran (--viewport) uniquement.
   Double gradient : un diagonal depuis le bas-gauche (zone du texte)
   + un vertical plus dense. Le CTA final (--tall) garde l'overlay
   standard, plus léger. */
.feature-stack--viewport .feature-stack__overlay {
	background:
		linear-gradient(105deg, rgba(33, 36, 15, 0.55) 0%, rgba(33, 36, 15, 0) 55%),
		linear-gradient(180deg, rgba(33, 36, 15, 0) 20%, rgba(33, 36, 15, 0.92) 100%);
}

/* Hero About us (photo 393) : l'overlay standard ci-dessus écrasait la
   photo (Andrid et Baptiste, déjà cadrés à droite loin du texte) —
   allégé pour cette page seulement, même logique que Tailor-Made
   ci-dessous. Le texte reste à gauche, zone la plus assombrie par le
   gradient diagonal ; le text-shadow global (.feature-stack__title/
   __text) fait le reste (2026-08-27). */
.page-template-template-about-php .feature-stack--viewport .feature-stack__overlay {
	background:
		linear-gradient(105deg, rgba(33, 36, 15, 0.35) 0%, rgba(33, 36, 15, 0) 50%),
		linear-gradient(180deg, rgba(33, 36, 15, 0) 30%, rgba(33, 36, 15, 0.55) 100%);
}

/* CTA final About us (photo 397, couple en piste forestière) : même
   situation que le hero (box plus large que la photo, cover cale sur
   la largeur, object-position en X sans effet) — même remède
   scale + translateX (voir le hero ci-dessus pour le détail). Valeurs
   plus modestes : le fond (talus de terre à droite) limite la marge
   disponible avant de manger l'arrière-plan (2026-08-27). */
.page-template-template-about-php .feature-stack--tall .feature-stack__image {
	object-position: 50% 45% !important;
	transform: scale(1.4) translateX(11%);
	transform-origin: center;
}

/* Hero Tailor-Made (photo 308) : l'overlay standard ci-dessus assombrissait
   trop cette photo claire (ciel, volcán) — allégé pour cette page
   seulement, le texte reste lisible grâce au text-shadow déjà appliqué
   sur .feature-stack__title/__text (2026-08-11). */
.page-template-template-tailormade-php .feature-stack--viewport .feature-stack__overlay {
	background:
		linear-gradient(105deg, rgba(33, 36, 15, 0.3) 0%, rgba(33, 36, 15, 0) 55%),
		linear-gradient(180deg, rgba(33, 36, 15, 0) 20%, rgba(33, 36, 15, 0.55) 100%);
}

/* CTA final (feature-stack--tall, contenu centré) : overlay uniforme
   à ~45% d'opacité pour garantir la lisibilité du texte blanc sur
   toute la hauteur de la section, quelle que soit l'image. */
.feature-stack--tall .feature-stack__overlay {
	background: rgba(33, 36, 15, 0.45);
}

/* --- Slot de contenu superposé ----------------------------- */
/* Réservé à un contenu additionnel greffé plus tard (carte
   animée du Guatemala). Vide par défaut, n'occupe pas l'espace. */

.feature-stack__slot {
	position: absolute;
	inset: 0;
	z-index: calc(var(--z-content) + 1);
	pointer-events: none;
}

/* --- Contenu superposé ------------------------------------- */

.feature-stack__inner {
	position: relative;
	z-index: calc(var(--z-content) + 2);
	display: flex;
	width: 100%;
	padding-block: var(--section-pad-immersive);
}

.feature-stack__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 38rem; /* borne la largeur du texte sur grand écran. */
}

.feature-stack__eyebrow {
	color: var(--text-primary);
}

.feature-stack__title,
.feature-stack__text {
	color: var(--text-primary);
}

.feature-stack__title-line {
	display: block;
	white-space: nowrap;
}

/* Mobile : libère le nowrap pour éviter le débordement horizontal,
   et réduit la taille du titre pour garder « Explore Guatemala »
   et « with Motmot Treks » chacun sur une ligne. */
@media (max-width: 47.99rem) {
	.feature-stack__title-line {
		white-space: normal;
	}
	.feature-stack__title {
		font-size: 2rem;
		line-height: 1.1;
	}
	.feature-stack__text {
		font-size: var(--text-base);
	}
}

/* Très petit écran (≤ 24rem ≈ 384px) : on resserre encore le titre
   et le sous-titre pour que chaque phrase tienne sur une ligne. */
@media (max-width: 24rem) {
	.feature-stack__title {
		font-size: 1.75rem;
	}
	.feature-stack__text {
		font-size: 0.9375rem;
		line-height: var(--leading-snug);
	}
}

/* Ombre de lecture sur les textes hero — garantit la lisibilité
   quelle que soit la luminosité du sujet photographique. */
.feature-stack__eyebrow,
.feature-stack__title,
.feature-stack__text {
	text-shadow: 0 1px 12px rgba(33, 36, 15, 0.5);
}

/* --- Actions (CTA) ----------------------------------------- */

.feature-stack__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-2);
}

/* Le secondaire générique (bordure fine, fond transparent) se lit mal
   sur une photo — fond vert plein (comme .tour-back) plutôt qu'une
   variante de plus dans le composant .btn. --green-500 est le vert le
   plus clair de l'échelle qui garde un texte crème lisible (DS §3.1). */
.feature-stack__actions .btn--secondary {
	background-color: var(--green-500);
	border-color: var(--glass-edge-light);
	color: var(--sand-50);
}

.feature-stack__actions .btn--secondary:hover {
	background-color: var(--green-600);
	border-color: var(--glass-edge-light);
}

/* --- Ancrage du contenu ------------------------------------ */
/* Le contenu se place dans la section ; .__inner est un flex
   plein écran, on positionne le bloc via align/justify. */

.feature-stack--anchor-bottom-left .feature-stack__inner {
	align-items: flex-end;
	justify-content: flex-start;
}

/* Même alignement gauche que bottom-left, mais casé en haut d'écran
   (hero Birdwatching, demande explicite de l'auteur du site). */
.feature-stack--anchor-top-left .feature-stack__inner {
	align-items: flex-start;
	justify-content: flex-start;
}

.feature-stack--anchor-center .feature-stack__inner {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.feature-stack--anchor-center .feature-stack__content {
	align-items: center;
}

.feature-stack--anchor-center .feature-stack__actions {
	justify-content: center;
}

/* Même centrage horizontal que center, mais casé en haut d'écran
   (essai hero Birdwatching, 2026-08-27, abandonné le jour même au
   profit de center-left ci-dessous — conservé si un futur hero en a
   besoin). */
.feature-stack--anchor-top-center .feature-stack__inner {
	align-items: flex-start;
	justify-content: center;
	text-align: center;
}

.feature-stack--anchor-top-center .feature-stack__content {
	align-items: center;
}

.feature-stack--anchor-top-center .feature-stack__actions {
	justify-content: center;
}

/* Centré verticalement, aligné à gauche horizontalement (hero
   Birdwatching, 2026-08-27) : reprend le milieu de l'écran de
   `center`, sans le centrage horizontal du texte. */
.feature-stack--anchor-center-left .feature-stack__inner {
	align-items: center;
	justify-content: flex-start;
}

/* Boutons plus bas, davantage détachés du texte (demande explicite,
   même hero) — l'écart par défaut (--space-2) sert les autres
   anchors, pas touché ici. */
.feature-stack--anchor-center-left .feature-stack__actions {
	margin-top: var(--space-6);
}

/* Mobile : bloc de texte descendu en bas d'écran, comme
   .anchor-bottom-left (hero Tailor-Made) — center-left n'est utilisé
   que par le hero Birdwatching, demande explicite de l'auteur du site
   (2026-08-29). Desktop garde le centrage vertical. */
@media (max-width: 47.99rem) {
	.feature-stack--anchor-center-left .feature-stack__inner {
		align-items: flex-end;
	}
}
/* ============================================================
   SPLIT — pattern de dialogue (split-asym / split-reverse)
   Design System §4.6 (patterns 1 & 2). Image narrative 7 col +
   texte 5 col. L'orientation inverse l'ordre en desktop ; mobile
   garde toujours image puis texte (voir → lire).
   ============================================================ */

.split {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

/* --- Mobile-first : empilement, image toujours en premier ---- */

.split__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* --- Média -------------------------------------------------- */

.split__media {
	overflow: hidden;
	border-radius: var(--radius-md);
}

.split__image {
	width: 100%;
	height: 100%;
	aspect-ratio: var(--ratio-landscape);
	object-fit: cover;
}

/* Variante `tall` (arg split.php) : portrait forcé dans le pattern,
   un peu plus de hauteur pour ne pas serrer la tête contre le bord. */
.split--tall .split__image {
	aspect-ratio: var(--ratio-landscape-tall);
}

/* Repli sans image : aplat neutre. */
.split__image--placeholder {
	display: block;
	background-color: var(--surface-raised);
}

/* --- Contenu ------------------------------------------------ */

.split__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.split__eyebrow {
	color: var(--text-muted);
}

.split__title {
	color: var(--text-primary);
}

.split__text {
	color: var(--text-primary);
}

/* Espacement entre paragraphes du corps de texte (wpautop). */
.split__text > p + p {
	margin-top: var(--space-3);
}

.split__actions {
	margin-top: var(--space-3);
}

/* --- Signature du guide (étape 3) : le visage + une phrase, jamais
   la bio complète — reste sur la page pilier du guide. --- */
.split__signature {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-3);
	border-top: 1px solid var(--border-subtle);
	border-bottom: 1px solid var(--border-subtle);
}

.split__signature-avatar {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--surface-raised);
}

.split__signature-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.split__signature-quote {
	margin: 0 0 var(--space-1);
}

.split__signature-quote p {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-base);
	line-height: 1.3;
	color: var(--text-primary);
}

.split__signature-name {
	margin: 0;
	font-family: var(--font-text);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
}

.split__signature-fact {
	display: block;
	font-weight: 400;
	font-size: var(--text-xs);
	/* --text-primary, pas --text-muted : sur le thème clair (Tailor-Made),
	   --text-muted tombe à ~4.6:1 avec du texte xs — trop proche du
	   plancher WCAG AA (4.5:1). C'est aussi une ligne de crédibilité
	   (PREMORTEM, risque Crédibilité), pas un détail à estomper. */
	color: var(--text-primary);
}

/* --- Lien sobre (« marque-page ») devenu carte post-it (2026-08-01) :
   même matière que les cartes-liens du carnet (.explore-page__more /
   .explore-story__btn, main.css) — papier, ombre, flèche à la main.
   Jamais un bouton de la pièce (CONCEPT.md invariant #3) : la home
   reste le carnet, seule la matière change. Fond crème par défaut
   (section sombre, fond vert) ; .section--light l'inverse ci-dessous
   pour la section claire. */
.split__link {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 0.4em;
	margin-top: var(--space-2);
	padding: 0.5em 0.8em;
	background-color: var(--sand-50);
	border-radius: 3px;
	box-shadow:
		0 10px 20px -10px rgba(51, 56, 25, 0.45),
		0 3px 8px rgba(51, 56, 25, 0.2);
	transform: translateX(var(--nudge, 0em)) rotate(-1.6deg);
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--green-700);
	text-decoration: none;
	transition:
		transform var(--duration-medium) var(--ease-soft),
		box-shadow var(--duration-medium) var(--ease-soft);
}

/* Fond clair (Tailor-Made) : carte inversée, même paire de tons que le
   carnet (--link-card-bg/--link-card-ink, tokens.css). */
.section--light .split__link {
	background-color: var(--link-card-bg);
	color: var(--link-card-ink);
}

/* Flèche à la main — jumelle de .explore-page__more-arrow /
   .explore-story__btn-arrow, en currentColor pour suivre l'encre selon
   le fond. */
.split__link-arrow {
	width: 1.15em;
	aspect-ratio: 26 / 20;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url('../svg/ui/arrow.svg') center / contain no-repeat;
	        mask: url('../svg/ui/arrow.svg') center / contain no-repeat;
}

.split__link:hover,
.split__link:focus-visible {
	--nudge: 0.3em;
	box-shadow:
		0 16px 30px -12px rgba(51, 56, 25, 0.5),
		0 5px 12px rgba(51, 56, 25, 0.24);
}

.split__link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Livre statique : le papier ne se déplace plus, l'ombre seule répond
   au survol (CONCEPT.md §4). */
@media (prefers-reduced-motion: reduce) {
	.split__link {
		transition: none;
	}
	.split__link:hover,
	.split__link:focus-visible {
		--nudge: 0em;
	}
}

/* Home, « Deux chemins » (birdwatching + tailor-made) : en mobile le
   texte s'empile sous une image pleine largeur — on le centre (avec
   le lien post-it) plutôt que de le laisser aligné à gauche contre
   un bord qui n'existe plus visuellement. Desktop non concerné : la
   grille 7/5 recrée un alignement à gauche cohérent (ci-dessous). */
.home .split__content {
	align-items: center;
	text-align: center;
}

.home .split__link {
	align-self: center;
}

/* --- Desktop : grille 12 colonnes, asymétrie 7 / 5 ---------- */

@media (min-width: 64rem) {

	.split__inner {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: var(--space-12);
		align-items: start; /* alignement haut : déséquilibre voulu (DS §4.6). */
	}

	/* Orientation image-left (split-asym) : image 1-7, texte 8-12. */
	.split--image-left .split__media {
		grid-column: 1 / span 7;
	}

	.split--image-left .split__content {
		grid-column: 8 / span 5;
	}

	/* Orientation image-right (split-reverse) : texte 1-5, image 6-12.
	   L'ordre HTML reste image puis texte ; order CSS inverse le
	   rendu desktop uniquement. */
	.split--image-right .split__media {
		grid-column: 6 / span 7;
		order: 2;
	}

	.split--image-right .split__content {
		grid-column: 1 / span 5;
		order: 1;
	}

	/* Variante `tall` : cadre plus haut, le texte n'a plus assez de
	   matière pour équilibrer visuellement l'alignement haut — on
	   centre le texte sur la hauteur de la photo. */
	.split--tall .split__inner {
		align-items: center;
	}

	/* Home, section « Deux chemins » : même raisonnement que `tall`
	   ci-dessus, mais sans passer par cette variante (le ratio photo
	   reste le standard 3/2). Depuis le retrait de la signature
	   (portrait + citation + fait, 2026-08-27), le texte restant
	   (eyebrow/titre/texte/lien) est bien plus court que la photo —
	   l'alignement haut par défaut laissait un grand vide en dessous. */
	.home .split__inner {
		align-items: center;
	}

	/* Retour à l'alignement à gauche : le centrage n'est qu'un repli
	   mobile (ci-dessus), la grille asymétrique fait le travail ici. */
	.home .split__content {
		align-items: flex-start;
		text-align: left;
	}

	.home .split__link {
		align-self: flex-start;
	}
}

/* ============================================================
   GOOGLE REVIEWS — avis Google
   Bande factuelle de la pièce, posée entre les deux chemins et la
   photo du CTA final — jamais dans le carnet (CONCEPT.md §3). Nom et
   note restent exactement ceux fournis par Google (jamais reformulés
   — voir inc/google-reviews.php) ; le texte de l'avis est en Shantell
   depuis le 2026-08-12, exception assumée à l'invariant #3 — voir le
   commentaire détaillé sur .google-reviews__card-text plus bas.

   2026-08-12, 4e passe : le panneau était en papier crème
   (--surface-raised) avec des post-its vert clair dessus — inversé
   à la demande de l'auteur du site. Le panneau porte maintenant le
   vert clair (--green-300) et chaque avis devient un post-it crème
   (--sand-50), plus proche d'un vrai bloc de post-it. Toujours pas
   d'accent terracotta ici (invariant #9, réservé au motmot) : tout
   le vert vient de la famille --green du site.
   ============================================================ */

.google-reviews {
	padding-block: var(--space-8);
}

.google-reviews__inner {
	display: flex;
	justify-content: center;
}

/* Panneau : même carrure que les cartes du site (tour-card,
   post-card) — --radius-lg + --shadow-card — c'est lui qui coupe
   visuellement avec la section claire précédente, pas un changement
   de thème de section.

   2026-08-12, 5e passe : le texte du panneau (eyebrow, score, lien)
   demandé en crème plutôt qu'en encre foncée. Crème sur --green-300
   ne tenait que 2.6:1 — sous le seuil AA (4.5:1, PREMORTEM
   accessibilité, clientèle 50+, CLAUDE.md), quelle que soit la nuance
   de crème choisie : les deux teintes sont trop proches en luminance
   pour cohabiter. Le panneau descend donc à --green-500 (encore
   clairement « vert », pas la profondeur du carnet) : crème dessus
   tient 6:1+. --text-primary/--text-muted recalés localement en
   conséquence. Les post-its eux-mêmes ne changent pas : leur encre
   est fixe (--green-800 sur --sand-50, voir plus bas), indépendante
   de ces tokens. */
.google-reviews__panel {
	--text-primary: var(--sand-50);
	--text-muted: var(--sand-100);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
	width: 100%;
	max-width: 1100px;
	padding: var(--space-8) var(--space-6);
	background-color: var(--green-500);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	text-align: center;
}

.google-reviews__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
}

.google-reviews__score {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.google-reviews__stars {
	display: inline-flex;
	gap: 2px;
}

/* Étoiles décoratives : vides par défaut, remplies (is-filled) selon
   la note — le fill CSS l'emporte sur le fill="none" de motmot_icon()
   (les attributs de présentation cèdent toujours devant une règle de
   feuille de style). Réservées à la note globale du header : la note
   individuelle de chaque avis n'est plus reprise carte par carte
   (2026-08-12, registre citation éditoriale — voir plus bas). */
.google-reviews__stars .icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
	color: var(--sand-300);
}

/* --accent-500 (terracotta), à la demande explicite de l'auteur du
   site — malgré un contraste qui plafonne à ~3:1 sur toute la
   famille --green (signalé, décision assumée quand même). */
.google-reviews__stars .icon.is-filled {
	color: var(--accent-500);
	fill: var(--accent-500);
}

.google-reviews__score-text {
	color: var(--text-muted);
}

/* --- Liste : mobile-first, carrousel horizontal (même motif que
   .testimonials__list) ; retour à la grille auto-fit en desktop,
   ci-dessous, où les avis tiennent d'un coup. Évite qu'un
   empilement vertical s'allonge sans fin si le nombre d'avis
   affichés venait à grandir (inc/google-reviews.php plafonne à 4
   aujourd'hui, mais rien ne garantit que ça reste ainsi). */
.google-reviews__list {
	display: flex;
	gap: var(--space-6);
	width: 100%;
	max-width: 1040px;
	list-style: none;
	margin: 0;
	/* padding-inline 11% : fait déborder légèrement la carte voisine
	   des deux côtés, signal visuel qu'il y a plus à faire défiler
	   (même valeur que .testimonials__list). padding-top space-4 :
	   laisse la place au ruban adhésif de chaque carte, qui déborde
	   au-dessus du papier — jusqu'à ~16px une fois la rotation prise
	   en compte (boîte englobante d'un rectangle penché plus haute que
	   le rectangle droit). */
	padding: var(--space-4) 11% 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.google-reviews__list::-webkit-scrollbar {
	display: none;
}

.google-reviews__list > .google-reviews__card {
	flex: 0 0 78%;
	scroll-snap-align: center;
}

@media (min-width: 64rem) {

	.google-reviews__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: var(--space-8) var(--space-6);
		padding-inline: 0;
		overflow-x: visible;
	}

	.google-reviews__list > .google-reviews__card {
		flex: initial;
	}
}

/* Post-it crème scotché sur le panneau vert — même matériau que
   .dest-polaroid / .dest-postcard (single-destination.php) : papier
   fixe, ombre portée, légère rotation statique. Objet physique du
   carnet, jamais son écriture (voir plus bas .google-reviews__card-text)
   — c'est ce qui permet au contenant d'emprunter au carnet sans que
   Google finisse par avoir l'air d'écrire dans le carnet.

   Grain de papier (2026-08-12) : même fichier que le fond des
   sections claires (fond-texture-creme.webp, themes.css), mais en
   `cover` plutôt qu'en `repeat-y` — cette texture est calée pour un
   fond de section pleine largeur, pas pour un petit post-it ; cover
   en prend un fragment plutôt que de la répéter à une échelle qui ne
   correspondrait plus au grain. --sand-50 reste en background-color,
   sous l'image : filet de sécurité tant qu'elle charge, et si jamais
   un coin de la carte laisse voir en dessous. */
.google-reviews__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-4) var(--space-3);
	background-color: var(--sand-50);
	background-image: url('../img/fond-texture-creme.webp?v=3');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 2px;
	box-shadow:
		0 14px 28px -12px rgba(33, 36, 15, 0.35),
		0 4px 10px rgba(33, 36, 15, 0.16);
	text-align: left;
}

/* Rotation alternée, sous le plafond de 3° (même règle que
   .dest-itin-table / .dest-break, PREMORTEM accessibilité) — et le
   ruban de chaque carte penche d'un angle qui lui est propre plutôt
   que deux angles miroirs répétés, moins mécanique. */
.google-reviews__card:nth-child(4n+1) { transform: rotate(-1.3deg); }
.google-reviews__card:nth-child(4n+2) { transform: rotate(1deg); }
.google-reviews__card:nth-child(4n+3) { transform: rotate(-0.9deg); }
.google-reviews__card:nth-child(4n)   { transform: rotate(1.4deg); }

.google-reviews__card:nth-child(4n+1) .google-reviews__card-tape { transform: translateX(-50%) rotate(18deg); }
.google-reviews__card:nth-child(4n+2) .google-reviews__card-tape { transform: translateX(-50%) rotate(24deg); }
.google-reviews__card:nth-child(4n+3) .google-reviews__card-tape { transform: translateX(-50%) rotate(19deg); }
.google-reviews__card:nth-child(4n)   .google-reviews__card-tape { transform: translateX(-50%) rotate(25deg); }

/* Ruban adhésif (assets/svg/deco/tape.svg) : masque CSS teinté, comme
   .split__link-arrow / pin.svg ailleurs dans ce fichier.

   2026-08-13 : retour au vert après les essais blanc et terracotta —
   mais --green-900 (pas --green-600) et opacité pleine : --green-600
   ne tenait que 1.46:1 de contraste contre le panneau --green-500,
   quasi fondu dedans ; --green-900 monte à 2.46:1 (toujours modeste —
   même famille de vert que le fond, ce plafond est structurel — mais
   near-double). L'opacité à 0.85 laissait le vert du panneau se
   mélanger dans le ruban et grignotait encore ce peu d'écart ; à 1,
   plus de dilution. Le filter: drop-shadow (et non box-shadow, qui
   suivrait le rectangle du masque, pas sa forme) ajoute une ombre
   portée fine — le ruban se détache comme un objet posé sur le
   papier plutôt qu'un aplat de couleur. */
.google-reviews__card-tape {
	position: absolute;
	z-index: 1;
	top: -16px;
	left: 50%;
	width: 46px;
	height: 32px;
	transform: translateX(-50%) rotate(8deg);
	background-color: var(--green-900);
	filter: drop-shadow(0 2px 3px rgba(33, 36, 15, 0.45));
	-webkit-mask: url('../svg/deco/tape.svg') center / contain no-repeat;
	        mask: url('../svg/deco/tape.svg') center / contain no-repeat;
	pointer-events: none;
}

/* Trois lignes maximum : la carte reste courte quel que soit le
   nombre d'avis affichés, jamais un mur de texte. Encre fixe
   (--green-800), pas --text-primary : le papier ne change pas de
   teinte avec la section qui l'entoure (même logique que
   .split__link).

   2026-08-12 : en Shantell (--font-display), à la demande explicite
   de l'auteur du site — exception assumée à l'invariant #3
   (« le manuscrit n'est jamais l'interface »), qui visait surtout à
   empêcher qu'un avis passe pour un mot du carnet lui-même. Ici la
   lecture est différente : un post-it est un objet qu'on écrit à la
   main par nature — c'est l'équipe qui transcrit l'avis sur la
   note, pas Google qui « parle carnet ». Nom et note restent quand
   même ceux fournis tels quels par Google (voir plus bas) ; seule la
   graphie change. Interligne généreux (--leading-relaxed) : un
   manuscrit se lit moins bien dense qu'un texte serif — mais corps
   réduit à --text-xs (2026-08-12, 2e retour : --text-base prenait
   trop de place sur le post-it). */
.google-reviews__card-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--text-xs);
	line-height: var(--leading-relaxed);
	color: var(--green-800);
}

/* Sobre, pas un .btn de la pièce (invariant #3, ce n'est pas une
   action de conversion) — un simple déclencheur texte, comme
   .google-reviews__link plus bas. N'apparaît que si le texte dépasse
   3 lignes (le template ne le rend pas sinon). Ouvre la modale
   #google-reviews-modal (assets/js/main.js, initGoogleReviews()) —
   voir plus bas « MODALE avis complet ». */
.google-reviews__card-more {
	align-self: flex-start;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--font-text);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	color: var(--green-700);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.google-reviews__card-more:hover,
.google-reviews__card-more:focus-visible {
	color: var(--green-900);
}

.google-reviews__card-more:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

/* Encre fixe (pas --text-muted) : cohérente quel que soit le fond du
   panneau qui entoure ce post-it crème (PREMORTEM accessibilité,
   clientèle 50+, CLAUDE.md). La hiérarchie auteur/délai vient du
   poids de fonte, pas de la couleur. */
.google-reviews__card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2);
	margin: 0;
	padding-top: var(--space-2);
	border-top: 1px solid rgba(43, 47, 20, 0.18);
	color: var(--green-800);
}

/* Même main que .google-reviews__card-text (Shantell) — le nom est
   transcrit sur le post-it au même titre que l'avis, pas une donnée
   d'interface séparée. La date reste en --font-text (héritée de
   .google-reviews__card-meta, non touchée ici). */
.google-reviews__card-author {
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	color: var(--green-900);
}

/* Séparateur discret entre l'auteur et la date (même pattern que
   .tour-card__meta-item, plus haut dans ce fichier). */
.google-reviews__card-time::before {
	content: "·";
	margin-right: var(--space-2);
	color: rgba(43, 47, 20, 0.4);
}

.google-reviews__link {
	font-family: var(--font-text);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Pas --action-primary (terracotta) au survol : sur le panneau
   vert clair, le contraste tombe à 1.5:1 — invisible. Le vert de
   l'encre suffit, le survol change juste l'épaisseur du soulignement. */
.google-reviews__link:hover,
.google-reviews__link:focus-visible {
	text-decoration-thickness: 2px;
}

.google-reviews__link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------
   MODALE avis complet — réutilise .tm-calc-modal (backdrop qui
   assombrit, centrage, [hidden], fermeture Échap/backdrop/croix :
   même mécanique que la modale de contact, voir plus haut dans ce
   fichier et initGoogleReviews() dans main.js). Seule la boîte
   change : pas le panneau blanc standard, mais le même post-it que
   sur le tableau — en plus grand, posé bien droit (on l'a « décroché »
   pour le lire, pas laissé penché). Le sélecteur à deux classes gagne
   en spécificité sur .tm-calc-modal__box générique, peu importe
   l'ordre dans le fichier. ------------------------------------ */
/* overflow:visible (annule le overflow-y:auto + max-height de la
   modale générique, main.css plus haut) : c'est ce qui coupait le
   ruban dès qu'il débordait du bord de la boîte. Le scroll de
   sécurité pour un avis exceptionnellement long est déplacé sur
   .google-reviews__modal-scroll ci-dessous, qui n'entoure que le
   texte — ni le ruban ni la croix de fermeture n'en font partie, donc
   rien à eux ne peut plus être rogné. */
.tm-calc-modal--review .tm-calc-modal__box {
	max-width: 440px;
	padding: var(--space-8) var(--space-6) var(--space-6);
	gap: 0;
	background-color: var(--sand-50);
	background-image: url('../img/fond-texture-creme.webp?v=3');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 0;
	border-radius: 2px;
	box-shadow:
		0 24px 48px -16px rgba(33, 36, 15, 0.4),
		0 8px 20px rgba(33, 36, 15, 0.2);
	overflow: visible;
	max-height: none;
}

.google-reviews__modal-scroll {
	max-height: 70vh;
	overflow-y: auto;
}

/* Débord à cheval sur le bord, comme sur la carte du panneau — le
   post-it agrandi doit rester le même objet physique, pas un ruban
   « rentré » à l'intérieur. Sûr maintenant que .tm-calc-modal__box
   est en overflow:visible (ci-dessus) : rien ne le rogne plus.

   2026-08-13 : reste en vert (--green-600) ici — les essais blanc
   puis terracotta ne concernent que les post-its du panneau
   (.google-reviews__card-tape, plus haut), pas celui de la modale. */
.tm-calc-modal--review .google-reviews__card-tape {
	top: -23px;
	width: 60px;
	height: 42px;
	transform: translateX(-50%) rotate(16deg);
	background-color: var(--green-600);
}

.tm-calc-modal--review .tm-calc-modal__close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
}

.google-reviews__modal-text {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--green-800);
}

/* ============================================================
   TEXT-OFFSET — moment de lecture
   Design System §4.6 (pattern 3). Bloc de texte narratif
   décalé sur la grille, beaucoup de vide autour. Pas d'image par
   défaut — `.text-offset__media` (2026-08-27) est un accent optionnel
   monté sur un mat de papier (même recette que .post-card__media),
   jamais un hero plein écran. Ne consomme que des tokens sémantiques.
   ============================================================ */

.text-offset {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

/* Mobile : photo pleine largeur avant le texte (voir → lire, même
   logique que .split), puis le décalage disparaît, texte pleine
   largeur. */
.text-offset__media {
	margin-bottom: var(--space-6);
	background-color: var(--sand-50);
	padding: 10px 10px 14px;
	box-shadow:
		0 14px 28px -16px rgba(20, 40, 30, 0.35),
		0 4px 10px rgba(20, 40, 30, 0.12);
}

.text-offset__image {
	display: block;
	width: 100%;
	aspect-ratio: var(--ratio-landscape);
	object-fit: cover;
}

.text-offset__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* Petite marque de marque (2026-08-27) : repère de marque discret pour
   un paragraphe-manifeste, pas une photo. Mobile : sous le texte, en
   flux normal, taille modeste. Desktop (voir plus bas) : posée dans le
   vide à droite, comme `image_id` — jamais un vrai logo de header. */
.text-offset__mark {
	display: block;
	width: 4rem;
	margin-top: var(--space-6);
}

.text-offset__mark-img {
	display: block;
	width: 100%;
	height: auto;
}

.text-offset__eyebrow {
	color: var(--text-muted);
}

.text-offset__title {
	color: var(--text-primary);
}

.text-offset__text {
	color: var(--text-primary);
	/* Largeur de lecture confortable. */
	max-width: var(--container-text);
}

/* Espacement entre paragraphes du corps de texte (wpautop). */
.text-offset__text > p + p {
	margin-top: var(--space-4);
}

/* --- Desktop : le bloc se décale sur la grille -------------- */
/* Le texte n'occupe pas toute la largeur ni le centre : il est
   décalé vers la gauche, le vide à droite fait partie de la
   composition (DS §4.6). */

@media (min-width: 64rem) {

	.text-offset__inner {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
	}

	.text-offset__content {
		/* Colonnes 2 à 8 : décalé, jamais centré. */
		grid-column: 2 / span 7;
		grid-row: 1;
	}

	/* Photo posée dans le vide à droite du texte plutôt qu'un hero
	   plein écran — colonnes 9 à 12, centrée sur la hauteur du texte
	   (généralement plus haut que la photo). */
	.text-offset--with-media .text-offset__media {
		grid-column: 9 / span 4;
		grid-row: 1;
		align-self: center;
		margin-bottom: 0;
	}

	/* Marque de marque : même colonne que la photo d'accent, mais plus
	   modeste — elle remplit le vide sans jouer les hero. */
	.text-offset--with-mark .text-offset__mark {
		grid-column: 9 / span 4;
		grid-row: 1;
		align-self: center;
		justify-self: center;
		width: 10rem;
		margin-top: 0;
	}
}
/* ============================================================
   FEATURE-GRID — grille d'arguments courts
   Bloc de réassurance (architecture §5.A). Icône Lucide + titre
   + phrase, en grille. Ne consomme que des tokens sémantiques :
   fonctionne sur section claire comme sombre.
   ============================================================ */

.feature-grid {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

/* --- En-tête de section ------------------------------------ */

.feature-grid__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-12);
}

.feature-grid__eyebrow {
	color: var(--text-muted);
}

.feature-grid__title {
	color: var(--text-primary);
}

/* --- Liste : mobile-first, une colonne --------------------- */

.feature-grid__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

/* --- Item -------------------------------------------------- */

.feature-grid__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Icône : trait fin, hérite de la couleur du texte voisin
   (currentColor) — jamais l'accent terracotta (DS §5.11). */
.feature-grid__icon {
	color: var(--text-primary);
}

.feature-grid__icon svg {
	width: var(--icon-xl);
	height: var(--icon-xl);
}

.feature-grid__item-title {
	color: var(--text-primary);
}

.feature-grid__item-text {
	color: var(--text-muted);
}

/* Paire (Mission/Vision, etc.) : contrairement au cas général (icône
   nue, DS §5.A), la paire porte une vraie carte — plus de poids visuel
   pour un duo qui doit lire comme un repère, pas comme un point de
   liste (2026-08-27, refonte suite retour « pas fou »). */
.feature-grid__list--pair {
	gap: var(--space-8);
}

.feature-grid__list--pair .feature-grid__item {
	background-color: var(--surface-raised);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: var(--space-8);
	gap: var(--space-4);
}

/* --- Tablette : grille 2 colonnes -------------------------- */

@media (min-width: 48rem) {

	.feature-grid__list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-12) var(--space-8);
	}
}

/* --- Desktop : grille 3 colonnes --------------------------- */

@media (min-width: 64rem) {

	.feature-grid__list {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Paire (Mission/Vision, etc.) : reste à 2 colonnes, resserrée au
	   centre — la 3e colonne du cas général laisserait un vide bancal. */
	.feature-grid__list--pair {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-12);
		max-width: 50rem;
		margin-inline: auto;
	}
}
/* ============================================================
   TOUR-GRID — grille de cartes de tours
   Section « tours vedettes » de l'accueil et archive
   Birdwatching. Boucle de TourCard. Ne consomme que des tokens
   sémantiques : fonctionne sur section claire comme sombre.
   ============================================================ */

/* Compense la hauteur du header fixe sur les ancres hero. var(--header-h)
   suit automatiquement les paliers mobiles (voir .site-header__inner,
   assets/css/main.css), un seul nombre à tenir à jour. */
.tour-grid,
.how-it-works {
	scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.tour-grid {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

/* --- En-tête de section ------------------------------------ */

.tour-grid__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-bottom: var(--space-12);
}

.tour-grid__eyebrow {
	color: var(--text-muted);
}

.tour-grid__title {
	color: var(--text-primary);
}

.tour-grid__title-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* À partir de la tablette, le rail de filtre rejoint le titre sur
   la même ligne. align-items: baseline (pas flex-end/center) :
   les deux éléments s'alignent sur leur ligne de base de texte
   réelle, pas sur le bord de leur boîte — flex-end tombait à côté
   car la boîte du h2 (gros display, line-height généreux) déborde
   largement sous le texte visible. baseline est le seul mode qui
   pose vraiment le rail sur l'axe de « Choose your expedition ». */
@media (min-width: 48rem) {

	.tour-grid__title-row {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	/* Correction fine à l'œil : la ligne de base calculée reste un
	   poil basse par rapport au texte du titre (métriques du display
	   vs du texte). Remonte le rail sans toucher au calcul d'align. */
	.tour-grid__filters {
		transform: translateY(-10px);
	}

}

/* --- Filtres (optionnel, cf. arg filter_by) ----------------- */
/* Navigation textuelle éditoriale : aucun contour, aucun fond,
   aucune forme de pastille — un rail de mots séparés par un point
   médian, comme une légende de carnet. L'onglet actif reprend
   --text-primary (vert encre du thème light) et gagne un petit
   soulignement court (annotation), les inactifs restent en
   --text-muted (beige/gris chaud du thème light). Sur mobile
   (title-row en column), centré sous le titre via align-self ; à
   partir de la tablette (title-row en row), pas d'align-self
   propre : il hérite du align-items: baseline du parent. */

.tour-grid__filters {
	display: flex;
	/* baseline (pas le stretch implicite) : sans ça, les boutons
	   s'étirent sur toute la hauteur du rail et c'est le bord de la
	   boîte (pas leur texte) qui sert de ligne de base au rail dans
	   le calcul du parent — la faille exacte qui décalait encore
	   le rail de 2-3px sous le titre malgré align-items: baseline
	   posé sur .tour-grid__title-row. */
	align-items: baseline;
	max-width: 100%;
	gap: 0;
	/* Mobile : rail à une seule ligne, défilement horizontal plutôt
	   qu'un retour à la ligne (même logique que .tour-grid__list,
	   scrollbar masquée). */
	overflow-x: auto;
	scrollbar-width: none;
}

.tour-grid__filters::-webkit-scrollbar {
	display: none;
}

/* Mobile uniquement (title-row en column, cf. plus haut) : centré
   sous le titre. À partir de la tablette, aucun align-self propre
   ici — la règle serait plus tardive dans la feuille que le
   align-items: baseline du parent et l'écraserait à spécificité
   égale (piège déjà rencontré : ne pas remettre align-self hors
   media query). */
@media (max-width: 47.9375rem) {

	.tour-grid__filters {
		align-self: center;
	}

	/* Eyebrow + titre centrés sur mobile (demande explicite de
	   l'auteur du site). Scopé ici : à partir de la tablette,
	   .tour-grid__title-row passe en ligne avec justify-content:
	   space-between (titre à gauche, filtres à droite) — centrer le
	   header y romprait la largeur pleine nécessaire à ce calcul. */
	.tour-grid__header {
		align-items: center;
		text-align: center;
	}

	/* « Choose your expedition » passait sur 2 lignes sur mobile —
	   un cran en dessous de .t-display-section (--text-2xl) suffit à
	   le tenir sur une seule. */
	.tour-grid__title {
		font-size: var(--text-xl);
	}
}

.tour-grid__filter {
	position: relative;
	flex: 0 0 auto;
	font-family: var(--font-text);
	font-size: 0.7rem;
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-muted);
	background: transparent;
	border: none;
	padding: 0.4em 0.6em;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--duration-fast) var(--ease-soft);
}

/* Point médian entre deux libellés, jamais avant le premier. */
.tour-grid__filter + .tour-grid__filter::before {
	content: "\00B7";
	position: absolute;
	left: -0.15em;
	color: var(--text-muted);
}

.tour-grid__filter:hover {
	color: var(--text-primary);
}

.tour-grid__filter[aria-pressed="true"] {
	color: var(--text-primary);
}

/* Soulignement façon annotation sous l'onglet actif : calé sur la
   largeur du mot lui-même — les offsets reprennent le padding
   horizontal du bouton (0.6em) pour retomber sur le bord du texte,
   pas sur le bord (plus large) du bouton. */
.tour-grid__filter[aria-pressed="true"]::after {
	content: "";
	position: absolute;
	left: 0.6em;
	right: 0.6em;
	bottom: 0.05em;
	height: 1px;
	background-color: var(--text-primary);
}

.tour-grid__filter:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* --- Liste : mobile-first, carrousel horizontal ------------- */
/* Sur mobile, les cartes défilent latéralement au doigt plutôt
   que de s'empiler. Pas d'autoplay ni de flèches : défilement
   manuel maîtrisé (le DS interdit les sliders auto, pas le
   scroll manuel). Aimantation scroll-snap CENTRÉE : au relâché,
   la carte la plus proche se cale au milieu de l'écran. */

.tour-grid__list {
	display: flex;
	gap: var(--space-4);
	/* Padding latéral = (100% - largeur carte) / 2 environ :
	   permet à la première et à la dernière carte d'atteindre
	   le centre malgré le snap centré. */
	padding-inline: 11%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Masque la barre de scroll sans bloquer le défilement. */
	scrollbar-width: none;
}

.tour-grid__list::-webkit-scrollbar {
	display: none;
}

/* Chaque carte : ~78% de l'écran — un bout des voisines
   dépasse de chaque côté, la carte centrée est mise en avant. */
.tour-grid__list > * {
	flex: 0 0 78%;
	scroll-snap-align: center;
}

/* --- Repli : aucun tour ------------------------------------ */

.tour-grid__empty {
	color: var(--text-muted);
}

/* --- Tablette : grille 2 colonnes -------------------------- */
/* Au-delà du mobile, retour à une grille classique : le
   carrousel n'a de sens que sur petit écran. */

@media (min-width: 48rem) {

	.tour-grid__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-8);
		/* Annule le scroll et le padding du mode carrousel. */
		padding-inline: 0;
		overflow-x: visible;
	}

	.tour-grid__list > * {
		flex: initial;
	}
}

/* --- Desktop : grille 4 colonnes --------------------------- */

@media (min-width: 64rem) {

	.tour-grid__list {
		grid-template-columns: repeat(4, 1fr);
	}
}
/* ============================================================
   POST-GRID — liste des entrées du journal (page Journal)
   N'est plus une grille de cartes (2026-08-27) : une colonne
   d'entrées qu'on descend comme on feuillette un carnet — voir
   patterns/post-grid.php pour le raisonnement complet (rythme
   éditorial épars, journal ≠ grille produit). Ne consomme que des
   tokens sémantiques.
   ============================================================ */

.post-grid {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

.post-grid__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-12);
}

.post-grid__eyebrow {
	color: var(--text-muted);
}

.post-grid__title {
	color: var(--text-primary);
}

/* --- Liste : une colonne à tous les formats, plafonnée à une
   mesure de lecture confortable — jamais de grille à colonnes
   multiples qui se creuse d'un vide dès qu'il y a peu d'entrées
   (rythme d'une par mois ou par saison, CONCEPT.md §8). --------- */

/* Centrée, pas décalée sur une grille (2026-08-27, revu depuis que
   l'en-tête au-dessus est .journal-intro — un post-it centré, pas un
   texte offset sur 12 colonnes) : même axe vertical que le post-it et
   le croquis juste au-dessus. */
.post-grid__list {
	max-width: 52rem;
	margin-inline: auto;
}

.post-grid__header {
	max-width: 52rem;
	margin-inline: auto;
}

/* --- Repli : aucun article ----------------------------------- */

.post-grid__empty {
	color: var(--text-muted);
}
/* ============================================================
   POST-SINGLE — article de blog (gabarit de repli index.php)
   Seul contexte qui atteint réellement index.php aujourd'hui
   (toutes les pages piliers ont leur Template Name dédié).
   ============================================================ */

.post-single {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

.post-single__meta {
	margin-bottom: var(--space-2);
}

.post-single__title {
	margin-bottom: var(--space-8);
}

.post-single__back {
	margin-top: var(--space-12);
}

.post-single__back a {
	color: var(--text-muted);
}

/* --- Contenu : largeur de lecture (miroir .tour-content) --- */

.post-content {
	max-width: var(--measure-ideal);
}

.post-content > * + * {
	margin-top: var(--space-4);
}

/* Sous-titres internes à l'article : plus d'air avant qu'après
   (spécificité > la règle générique ci-dessus, pas de !important). */
.post-content h2 {
	font-family: var(--font-text);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	color: var(--text-primary);
	margin-top: var(--space-8);
}

.post-content ul {
	padding-left: var(--space-6);
	list-style: disc;
}

.post-content li + li {
	margin-top: var(--space-2);
}

.post-content a {
	color: var(--text-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.post-content a:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
/* ============================================================
   HOW-IT-WORKS — parcours en étapes numérotées
   Design System §7.8. Présente un service comme une séquence.
   Vertical en mobile (empilement), horizontal en desktop.
   Ne consomme que des tokens sémantiques.
   ============================================================ */

.how-it-works {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

/* --- En-tête de section ------------------------------------ */

.how-it-works__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-12);
}

.how-it-works__eyebrow {
	color: var(--text-muted);
}

.how-it-works__title {
	color: var(--text-primary);
}

/* --- Liste d'étapes : mobile-first, empilement vertical ----- */

.how-it-works__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
}

/* --- Étape -------------------------------------------------- */

.how-it-works__step {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Numéro : grand, en police display — marque la séquence.
   Discret en couleur (texte atténué) pour ne pas voler la
   vedette au titre de l'étape. */
.how-it-works__number {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	line-height: var(--leading-tight);
	color: var(--text-muted);
}

.how-it-works__step-title {
	color: var(--text-primary);
}

.how-it-works__step-text {
	color: var(--text-muted);
}

/* --- Action (CTA) ------------------------------------------ */

.how-it-works__actions {
	margin-top: var(--space-12);
}

/* --- Desktop : étapes horizontales -------------------------- */
/* La séquence se lit de gauche à droite. Le nombre de colonnes
   suit le nombre d'étapes via auto-fit, borné par minmax. */

@media (min-width: 64rem) {

	.how-it-works__list {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: var(--space-8);
	}
}
/* ============================================================
   GALLERY-STAGGERED — galerie en décalage
   Design System §4.6 (pattern 4). Images en décalage de hauteur,
   évoque un carnet de terrain. Ne consomme que des tokens.
   ============================================================ */

.gallery-staggered {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

.gallery-staggered__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-12);
}

.gallery-staggered__eyebrow {
	color: var(--text-muted);
}

.gallery-staggered__title {
	color: var(--text-primary);
}

/* Mobile : empilement simple, légère variation de largeur. */
.gallery-staggered__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.gallery-staggered__item {
	overflow: hidden;
	border-radius: var(--radius-md);
}

.gallery-staggered__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Desktop : grille décalée ------------------------------ */
/* Gabarit figé : 4 positions cycliques, décalage vertical
   volontaire pour l'effet carnet de terrain. */

@media (min-width: 64rem) {

	.gallery-staggered__grid {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: var(--space-8);
		align-items: start;
	}

	.gallery-staggered__item--1 {
		grid-column: 1 / span 7;
	}

	.gallery-staggered__item--2 {
		grid-column: 8 / span 5;
		margin-top: var(--space-16);
	}

	.gallery-staggered__item--3 {
		grid-column: 1 / span 5;
	}

	.gallery-staggered__item--4 {
		grid-column: 6 / span 7;
		margin-top: var(--space-12);
	}
}

/* ============================================================
   PRICE AVAILABILITY — bloc prix / réservation
   Design System §7.6. Prix « à partir de » et CTA réserver.
   ============================================================ */

.price-availability {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	background-color: var(--surface-raised);
	border-radius: var(--radius-lg);
	text-align: center;
}

.price-availability__from {
	color: var(--text-muted);
}

.price-availability__amount {
	color: var(--text-primary);
}

.price-availability__unit {
	color: var(--text-muted);
}

.price-availability__note {
	color: var(--text-muted);
	margin-top: var(--space-2);
}

.price-availability__cta {
	margin-top: var(--space-2);
	width: 100%;
}

/* ---- Extras à cocher (transport, petit-déjeuner) ----
   N'apparaît que si le tour a un prix V2 configuré ET qu'au moins un
   extra est facultatif — cf. price-availability.php. Ce qui est
   identique sur tous les tours (guide, jumelles, entrée…) vit dans
   la liste statique .tour-includes__list (single-tour.php) ; ici, ne
   restent que les lignes qui changent le prix, avec leur supplément
   et une case à cocher. Le total en dessous se recalcule en direct
   (assets/js/main.js, initTourPriceCalculator()). */

.pa-checklist {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	text-align: left;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pa-checklist__label {
	margin: 0 0 var(--space-1);
	color: var(--text-muted);
}

.pa-check {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.pa-check__input {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--action-primary);
	cursor: pointer;
}

/* Pastille d'icône : disque vert profond, picto crème — reprend
   .tour-includes__icon (single-tour.php) pour une charte cohérente
   entre la liste statique (fond clair) et celle-ci (fond sombre). */
.pa-check__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-8);
	height: var(--space-8);
	flex-shrink: 0;
	border-radius: var(--radius-full);
	background-color: var(--surface-primary);
	color: var(--text-primary);
}

.pa-check__icon .icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
}

/* Regroupe libellé + prix : leur permet de passer à la ligne
   ensemble sous l'icône quand la carte est trop étroite pour les
   deux côte à côte (mobile) — sans ça, le prix en nowrap chevauchait
   le libellé (§ ci-dessus mange sa propre largeur avant lui). */
.pa-check__body {
	flex: 1 1 160px;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-3);
	row-gap: 2px;
}

.pa-check__label {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--text-primary);
	cursor: pointer;
}

.pa-check__price {
	flex: none;
	margin-left: auto;
	font-size: var(--text-sm);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Adultes + enfants sur une seule ligne, à parts égales — gagne une
   ligne entière face à l'ancien empilement (demande explicite). */
.price-availability__pax-row {
	display: flex;
	gap: var(--space-4);
	margin-top: var(--space-2);
	padding-top: var(--space-2);
	border-top: 1px solid var(--border-subtle);
}

/* Tecpán et consorts (transport toujours inclus) : pas d'extras
   au-dessus des steppers pax, donc rien à séparer d'un trait. */
.price-availability__pax-row.price-availability__pax-row--first {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.price-availability__pax {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	text-align: left;
}

.price-availability__pax-label {
	color: var(--text-primary);
	font-size: var(--text-sm);
}

.price-availability__pax-label small {
	display: block;
	color: var(--text-muted);
}

/* Boutons ronds à contour, sans piste/pilule autour — reprend le
   même langage que les pastilles d'icônes de la page plutôt qu'un
   champ de formulaire générique. Cible tactile 32px, correcte pour
   une clientèle 50+ (cf. lisibilité non négociable, CLAUDE.md). */
.pa-stepper {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.pa-stepper__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	flex: none;
	border-radius: var(--radius-full);
	border: 1px solid var(--border-subtle);
	background: transparent;
	color: var(--text-primary);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.pa-stepper__btn:hover:not(:disabled) {
	border-color: var(--action-primary);
	color: var(--action-primary);
}

.pa-stepper__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.pa-stepper__value {
	min-width: 1.4em;
	text-align: center;
	font-weight: var(--weight-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}

.price-availability__pax-hint {
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	color: var(--text-muted);
}

.price-availability__total {
	text-align: left;
}

/* Prix + CTA côte à côte plutôt qu'empilés — gagne une ligne entière
   (demande explicite). Le total garde la priorité sur la largeur ;
   le bouton reste à sa taille naturelle, jamais compressé. */
.price-availability__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-2);
	padding-top: var(--space-2);
	border-top: 1px solid var(--border-subtle);
}

.price-availability__footer .price-availability__total {
	flex: 1;
	min-width: 0;
}

.price-availability__footer .price-availability__cta {
	flex: none;
	width: auto;
	min-width: 11rem;
	margin-top: 0;
}

.price-availability__total-amount {
	font: inherit;
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}

.price-availability__total-note {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

/* ============================================================
   SINGLE TOUR — fiche de tour en grande carte
   Addendum §5. Page immersive autonome : ni header ni footer de
   site. Le contenu tient dans UNE grande carte claire centrée
   sur un fond sombre continu — fiche produit premium.

   Hiérarchie des actions :
   - terracotta (--action-primary) = action forte unique (CTA
     « Book this tour ») ;
   - vert profond = actions secondaires (retour, carrousel).
   ============================================================ */

/* --- Icônes : réglages communs ----------------------------- */

.icon {
	display: block;
	width: var(--icon-md);
	height: var(--icon-md);
	flex-shrink: 0;
}

/* --- Décor de page ----------------------------------------- */

.tour-app {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	/* Bas aligné sur la marge visible en haut de la carte (~12px,
	   issue du collapse de la marge négative de .tour-app__eyebrow
	   contre ce padding-top à 0) : un filet, pas un vide. */
	padding-block: 0 var(--space-3);
	padding-inline: var(--space-4);
}

/* Surtitre fixé en haut, à la même hauteur que le bouton
   « Back », centré sur la largeur de la fenêtre. */
.tour-app__eyebrow {
	max-width: var(--container-base);
	margin: -2rem auto var(--space-6);
	color: var(--text-muted);
	text-align: center;
}

/* --- Action flottante : bouton « Retour » ------------------ */

.tour-back {
	position: fixed;
	top: var(--space-4);
	left: var(--space-6);
	z-index: var(--z-header);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
	border-radius: var(--radius-full);
	background-color: var(--green-800);
	border: 1px solid var(--green-600);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--glass-shadow);
	color: var(--sand-50);
	font-family: var(--font-text);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	transition:
		transform var(--duration-fast) var(--ease-soft),
		background-color var(--duration-fast) var(--ease-soft);
}

.tour-back:hover {
	transform: translateY(-2px);
	background-color: var(--green-700);
}

.tour-back:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.tour-back__icon {
	width: var(--icon-lg);
	height: var(--icon-lg);
	color: var(--sand-50);
	transition: transform var(--duration-fast) var(--ease-soft);
}

.tour-back:hover .tour-back__icon {
	transform: translateX(-2px);
}

/* Libellé « Back » en police display (Shantell) — tout le site. */
.tour-back__label {
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
}

/* --- La carte ---------------------------------------------- */
/* Scopé à .tour-app : ces règles concernent la fiche tour
   (single-tour.php) et ne doivent pas affecter les cartes grille. */

.tour-app .tour-card {
	max-width: 1080px;
	margin-inline: auto;
	background-color: var(--surface-primary);
	color: var(--text-primary);
	border-radius: calc(var(--radius-lg) * 2);
	box-shadow: var(--shadow-modal);
	padding: clamp(var(--space-4), 2.5vw, var(--space-8));
}

/* --- Haut de carte : deux colonnes ------------------------- */
/* Mobile : empilé. Desktop (plus bas) : grille deux colonnes
   où le surtitre coiffe la colonne gauche et le titre démarre,
   à droite, au niveau du HAUT DE L'IMAGE. */

.tour-app .tour-card__top {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* --- Mobile uniquement : la photo et le texte s'empilent en UNE
   colonne (aside + main n'existent plus comme boîtes — display:
   contents les efface, leurs enfants deviennent des flex-items
   directs de .tour-card__top). Sert à réordonner : le titre doit
   suivre la photo immédiatement, pas les facts (Duration/Difficulty/
   Start time) — sinon un visiteur mobile lit des statistiques avant
   même de savoir quel tour il regarde. Desktop restaure aside/main
   comme deux vraies colonnes plus bas (rien n'y change). */
.tour-app .tour-card__aside,
.tour-app .tour-card__main {
	display: contents;
}

.tour-app .tour-card__top .tour-carousel  { order: 1; }
.tour-app .tour-card__top .tour-head      { order: 2; }
.tour-app .tour-card__top .tour-content   { order: 3; }
.tour-app .tour-card__top .tour-facts     { order: 4; }
.tour-app .tour-card__top .tour-includes  { order: 5; }
.tour-app .tour-card__top .tour-card__price { order: 6; }

/* --- Carrousel d'images ------------------------------------ */

.tour-carousel {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--surface-raised);
}

.tour-carousel__viewport {
	overflow: hidden;
}

.tour-carousel__track {
	display: flex;
	transition: transform var(--duration-medium) var(--ease-soft);
}

.tour-carousel__slide {
	margin: 0;
	flex: 0 0 100%;
	/* Mobile/tablette : ratio fixe (4/3, pas de jeton dédié). Desktop
	   (cf. .tour-app .tour-card__aside .tour-carousel plus bas) :
	   repasse au carré (--ratio-square) — plus court que le 4/3,
	   remonte les facts en dessous. */
	aspect-ratio: 4 / 3;
}

/* Carousel à sa taille naturelle (héritée — square ou ratio par défaut).
 * L'équilibre des colonnes vient de l'augmentation des marges droite
 * + de la réduction des marges Good to know. Voir tour-facts + tour-card__main. */

.tour-carousel__image {
	width: 100%;
	height: 100%;
	/* contain, pas cover : la photo entière reste visible, quitte à
	   laisser un peu de fond (.tour-carousel a déjà un background)
	   sur les côtés si son ratio ne correspond pas exactement à la
	   boîte — pas de recadrage/zoom qui coupe une partie de l'image.
	   Reste la règle de base (hero destination notamment) ; la fiche
	   tour la remplace ci-dessous par cover. */
	object-fit: contain;
	display: block;
}

/* Fiche tour (single-tour.php) : cover plutôt que contain, mobile ET
   desktop — chaque photo remplit sa boîte (4/3 mobile, carré desktop)
   par son côté le plus court, le recadrage variant selon le cadrage
   propre à chaque image. Scopé à .tour-app pour ne pas affecter le
   hero destination (single-destination.php), qui garde contain
   (photo jamais coupée) via la règle de base ci-dessus. */
.tour-app .tour-carousel__image {
	object-fit: cover;
}

/* Flèches : pastilles vert profond. */
.tour-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-12);
	height: var(--space-12);
	padding: 0;
	border: 1px solid var(--green-600);
	border-radius: var(--radius-full);
	background-color: var(--green-800);
	color: var(--sand-50);
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--ease-soft),
		transform var(--duration-fast) var(--ease-soft);
}

.tour-carousel__arrow:hover {
	background-color: var(--green-700);
	transform: translateY(-50%) scale(1.05);
}

.tour-carousel__arrow:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.tour-carousel__arrow--prev {
	left: var(--space-3);
}

.tour-carousel__arrow--next {
	right: var(--space-3);
}

.tour-carousel__arrow .icon {
	width: var(--icon-lg);
	height: var(--icon-lg);
	color: var(--sand-50);
}

/* --- Bouton zoom (ouvre la lightbox plein écran) ---------- */
.tour-carousel__zoom {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--green-600);
	border-radius: var(--radius-full);
	background-color: var(--green-800);
	color: var(--sand-50);
	cursor: pointer;
	z-index: 2;
	transition:
		background-color var(--duration-fast) var(--ease-soft),
		transform var(--duration-fast) var(--ease-soft);
}
.tour-carousel__zoom:hover {
	background-color: var(--green-700);
	transform: scale(1.05);
}
.tour-carousel__zoom:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Points de pagination. */
.tour-carousel__dots {
	position: absolute;
	left: 50%;
	bottom: var(--space-4);
	transform: translateX(-50%);
	display: flex;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-full);
	background-color: var(--green-800);
}

.tour-carousel__dot {
	width: var(--space-2);
	height: var(--space-2);
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background-color: var(--sand-50);
	opacity: 0.4;
	cursor: pointer;
	transition: opacity var(--duration-fast) var(--ease-soft);
}

.tour-carousel__dot.is-active {
	opacity: 1;
}

/* ============================================================
   LIGHTBOX — visualisation plein écran des photos du tour
   Overlay sombre + image centrée + nav prev/next + close + counter.
   Sobre, sans dépendance, fade-in 200ms.
   ============================================================ */

.tour-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 200ms ease-out;
	padding: clamp(40px, 6vw, 60px);
}

.tour-lightbox[hidden] {
	display: none;
}

.tour-lightbox.is-open {
	opacity: 1;
}

.tour-lightbox__overlay {
	position: absolute;
	inset: 0;
	background: rgba(33, 36, 15, 0.93);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	cursor: zoom-out;
}

.tour-lightbox__figure {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tour-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
	transform: scale(0.96);
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-lightbox.is-open .tour-lightbox__img {
	transform: scale(1);
}

/* Bouton close — coin supérieur droit, rond, élégant */
.tour-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease;
}

.tour-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: rotate(90deg);
}

.tour-lightbox__close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Boutons prev/next — verticalement centrés, sur les bords */
.tour-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease;
}

.tour-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-50%) scale(1.07);
}

.tour-lightbox__nav:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.tour-lightbox__nav--prev {
	left: 20px;
}

.tour-lightbox__nav--next {
	right: 20px;
}

.tour-lightbox__nav[hidden] {
	display: none;
}

/* Compteur "2 / 5" — bas centré, discret */
.tour-lightbox__counter {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 2;
	padding: 6px 14px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-text);
	font-size: 12px;
	font-weight: var(--weight-medium);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

.tour-lightbox__counter[hidden] {
	display: none;
}

@media (max-width: 640px) {
	.tour-lightbox__nav { width: 40px; height: 40px; }
	.tour-lightbox__nav--prev { left: 10px; }
	.tour-lightbox__nav--next { right: 10px; }
	.tour-lightbox__close { top: 12px; right: 12px; }
}

/* --- Encart « Bon à savoir » : faits clés à icône ---------- */
/* Sur desktop, ce bloc s'étire pour que son bas s'aligne sur le
   bas de la case prix (voir la requête desktop). Les trois
   lignes se répartissent alors dans la hauteur disponible. */

.tour-facts {
	display: flex;
	flex-direction: column;
}

.tour-facts__title {
	color: var(--text-muted);
	margin-bottom: var(--space-2);
}

.tour-facts__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.tour-facts__row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-1);
	border-top: 1px solid var(--border-subtle);
}

/* Contour fin, pas de pastille pleine — distingue ces facts (info
   passive) de What's included / Add to your trip (pastilles pleines
   vertes/crème). Couleur sourde (text-muted), pas d'accent. */
/* Icône seule, sans pastille — juste le picto, couleur sourde. */
.tour-facts__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-left: 2px;
	color: var(--text-muted);
}

.tour-facts__icon .icon {
	width: var(--icon-md);
	height: var(--icon-md);
}

.tour-facts__row:first-child {
	border-top: 0;
	padding-top: 0;
}

.tour-facts__row:last-child {
	padding-bottom: 0;
}

/* Une ligne : « Duration: Half-day » — plus de pastille, ces trois
   faits sont des caractéristiques du tour, pas des éléments obtenus
   ou choisis (cf. What's included / Add to your trip pour ça). */
.tour-facts__pair {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
}

.tour-facts__term {
	color: var(--text-muted);
}

.tour-facts__desc {
	color: var(--text-primary);
	font-weight: var(--weight-semibold);
}

/* --- Colonne droite : titre + présentation + prix ----------
 * Gap généreux (space-8) pour étoffer la colonne et laisser
 * de la place à la map en bas de la colonne gauche.        */


/* Petit bonus de respiration sous le titre pour densifier
 * encore la colonne droite — sans déformer la hiérarchie. */
.tour-card__main .tour-head {
	padding-bottom: 0;
}

.tour-head__title {
	color: var(--text-primary);
	font-size: var(--text-2xl);
}

/* Texte de présentation : the_content, largeur de lecture. */
.tour-content {
	max-width: var(--measure-ideal);
}

.tour-content > * + * {
	margin-top: var(--space-4);
}

/* --- Ce qui est inclus ------------------------------------- */
/* Liste à icônes, sans encadré : elle vit directement dans le
   flux de la colonne, sous la description. */

.tour-includes__title {
	color: var(--text-muted);
	margin-bottom: var(--space-3);
}

.tour-includes__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2);
}

.tour-includes__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

/* Pastille d'icône : disque vert profond, picto crème — en
   contrepoint du terracotta de « Good to know ». */
.tour-includes__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-8);
	height: var(--space-8);
	flex-shrink: 0;
	border-radius: var(--radius-full);
	background-color: var(--green-700);
	color: var(--sand-50);
}

.tour-includes__icon .icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
}

.tour-includes__label {
	color: var(--text-primary);
}

/* Un peu plus d'air avant la carte prix que le rythme uniforme de
   .tour-card__main (gap) ne lui en donne — demande explicite, sans
   toucher aux autres écarts de la colonne (titre, texte, inclusions). */
.tour-card__price {
	margin-top: var(--space-2);
}


@media (min-width: 30rem) {

	.tour-includes__list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-2) var(--space-6);
	}
}

/* --- FAQ : conteneur ------------------------------ */
.tour-faq {
	margin-top: var(--space-8);
	padding-top: var(--space-8);
	border-top: 1px solid var(--border-subtle);
}

/* --- Titres de section communs (oiseaux, FAQ) -------------- */

.tour-birds__header,
.tour-faq__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
}

/* En-tête FAQ centré, en accord avec sa liste. */
.tour-faq__header {
	align-items: center;
	text-align: center;
}

.tour-birds__eyebrow,
.tour-faq__eyebrow {
	color: var(--text-muted);
}

.tour-birds__title,
.tour-faq__title {
	color: var(--text-primary);
}

/* --- Oiseaux observables : bande pleine largeur ------------ */

.tour-birds {
	margin-top: var(--space-8);
	padding-top: var(--space-16);
	border-top: 1px solid var(--border-subtle);
}

.tour-birds__groups {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: start;
}

.bird-group {
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
	background-color: var(--surface-raised);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
}

.bird-group__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-3);
	border-bottom: 1px solid var(--border-subtle);
}

.bird-group__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-8);
	height: var(--space-8);
	flex-shrink: 0;
	border-radius: var(--radius-full);
	background-color: var(--action-primary);
	color: var(--sand-50);
}

.bird-group__icon .icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
}

.bird-group__title {
	color: var(--text-primary);
	margin: 0;
}

/* Compteur : simple nombre en vert, police display (Shantell). */
.bird-group__count {
	margin-left: auto;
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: 1;
	color: var(--green-600);
}

.bird-group__scroll {
	position: relative;
}

.bird-group__scroll.is-scrollable {
	max-height: 9.5rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.bird-group__scroll.is-scrollable::-webkit-scrollbar {
	width: 6px;
}

.bird-group__scroll.is-scrollable::-webkit-scrollbar-thumb {
	border-radius: var(--radius-full);
	background-color: var(--sand-300);
}

.bird-group__list {
	display: flex;
	flex-direction: column;
}

.bird-group__item {
	padding-block: var(--space-2);
	border-top: 1px solid var(--border-subtle);
}

.bird-group__item:first-child {
	border-top: 0;
}

.bird-group__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-primary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-soft);
}

.bird-group__name {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bird-group__link-icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
	color: var(--text-muted);
	transition: color var(--duration-fast) var(--ease-soft);
}

.bird-group__link:hover {
	color: var(--action-primary);
}

.bird-group__link:hover .bird-group__link-icon {
	color: var(--action-primary);
}

.bird-group__link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

/* --- FAQ : accordéon pleine largeur ------------------------ */
/* Plus de cartes : une liste de questions, chacune séparée de
   la suivante par un filet. Chaque question est un <details>
   natif ; un chevron pivote à l'ouverture. */

.tour-faq__list {
	/* Pleine largeur de la carte : pas de bornage. */
	border-top: 1px solid var(--border-subtle);
}

.tour-faq__list details {
	border-bottom: 1px solid var(--border-subtle);
}

/* La question : ligne cliquable. Le marqueur natif du <summary>
   est retiré au profit d'un chevron maison. */
.tour-faq__list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-6);
	cursor: pointer;
	list-style: none;
	font-family: var(--font-text);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
}

/* Retire le triangle natif (Safari/Chrome). */
.tour-faq__list summary::-webkit-details-marker {
	display: none;
}

.tour-faq__list summary:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

/* Survol : le retour visuel passe par le chevron, jamais par le
   texte de la question — un assombrissement (--text-muted, hérité
   de .faq-item__question:hover) nuirait à la lisibilité pour le
   public 50+. La question reste au contraste plein en toutes
   circonstances. */
.tour-faq__list .faq-item__question:hover {
	color: var(--text-primary);
}

/* Chevron : pastille verte à droite du summary, via
   pseudo-élément — les <details> viennent de l'éditeur de blocs,
   leur markup interne n'est pas modifiable depuis le template.
   Le chevron est une flèche dessinée en CSS (bordures), qui
   pivote à l'ouverture. */
.tour-faq__list summary::after {
	content: "";
	flex-shrink: 0;
	width: var(--space-8);
	height: var(--space-8);
	border-radius: var(--radius-full);
	background-color: var(--green-700);
	/* Flèche : un chevron SVG crème centré, encodé en data-URI. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff9f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: var(--icon-sm) var(--icon-sm);
	transition: transform var(--duration-fast) var(--ease-soft),
	            background-color var(--duration-fast) var(--ease-soft);
}

.tour-faq__list summary:hover::after {
	background-color: var(--action-primary);
}

.tour-faq__list details[open] summary::after {
	transform: rotate(180deg);
}

/* La réponse : tout ce qui suit le <summary> dans le <details>.
   Le contenu vient de l'éditeur (paragraphes bruts), on le cale
   en largeur de lecture avec une marge basse jusqu'au filet. */
.tour-faq__list summary ~ * {
	margin-top: var(--space-3);
	color: var(--text-primary);
}

.tour-faq__list details > :last-child {
	margin-bottom: var(--space-4);
}

/* Surcharge de .faq-item__answer (règle générique partagée avec
   le FAQ statique de la page Birdwatching, qui l'assombrit et la
   borne à 72ch pour son propre agencement). Ici la réponse doit
   occuper toute la largeur de la carte et rester aussi lisible
   que la question — public 50+, aucun texte en gris passe-partout. */
.tour-faq__list .faq-item__answer {
	padding-right: 0;
}

.tour-faq__list .faq-item__answer p {
	max-width: none;
	color: var(--text-primary);
}

.tour-faq__list .faq-item__answer p + p {
	margin-top: var(--space-3);
}

/* --- Desktop ----------------------------------------------- */

@media (min-width: 64rem) {

	/* Padding latéral élargi : crée la marge visuelle entre la
	   carte et le bouton « Back » fixé à gauche du viewport. La fiche
	   destination reprend le même cadrage depuis le 2026-08-11 (voir
	   .dest-app plus bas dans ce fichier) — après un aller-retour en
	   pleine largeur, retour à la carte étroite sur fond vert. */
	.tour-app {
		padding-inline: var(--space-16);
	}

	/* Flex 2 colonnes : align-items: stretch (défaut flex) garantit
	 * que les 2 colonnes ont EXACTEMENT la même hauteur.
	 * Les ratios 4/7 sont conservés via flex-basis 0 + flex-grow.
	 * min-height : plancher calé sur un tour « complet » (extras à
	 * cocher dans la boîte prix). Un tour plus court (ex. Tecpán,
	 * sans case « Add to your trip ») ne réduit plus la hauteur de la
	 * rangée d'autant — le vide qui en résulte est alors réparti par
	 * .tour-card__aside (justify-content: center) et .tour-card__main
	 * (justify-content: space-between) ci-dessous, au lieu de laisser
	 * le contenu collé en haut avec un blanc en bas avant « Birdlife »
	 * (qui, lui, garde sa marge fixe — sa position ne bouge pas). */
	.tour-app .tour-card__top {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: var(--space-16);
		min-height: 600px;
	}

	/* Restaure aside/main comme deux vraies boîtes (le mobile les
	   efface en display: contents pour réordonner titre/facts, cf.
	   plus haut) — gap explicite ici, la base ne le fournit plus. */
	/* Centré sur la hauteur : si la colonne de droite est plus haute
	   que la photo carrée + les facts, le vide restant se répartit à
	   parts égales en haut et en bas de la colonne, plutôt que de
	   s'accumuler d'un seul côté. */
	.tour-app .tour-card__aside {
		flex: 4 1 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-4);
		min-width: 0;
	}

	/* space-between plutôt qu'un gap fixe : space-4 reste le minimum
	   garanti entre les blocs, mais l'espace qui reste (colonne plus
	   courte — ex. Tecpán, sans cases à cocher facultatives) se
	   répartit entre eux au lieu de s'accumuler en vide sous le prix.
	   Le contenu dense (tour avec extras) ne bouge quasi pas puisqu'il
	   laisse peu de reste ; le contenu court respire davantage. */
	.tour-app .tour-card__main {
		flex: 7 1 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--space-4);
		min-width: 0;
	}

	/* Prix + CTA toujours à l'écran pendant que la colonne défile
	   (inclusions, oiseaux, FAQ) — remonté juste sous le texte de
	   présentation côté PHP (single-tour.php) pour rester visible
	   sans défiler dès l'ouverture ; sticky ici pour le rester
	   ensuite. La colonne carrousel (souvent plus haute) donne, via
	   align-items: stretch sur .tour-card__top, l'espace nécessaire
	   pour que l'ancrage tienne jusqu'en bas de la carte. */
	.tour-app .tour-card__price {
		position: sticky;
		top: var(--space-8);
	}

	/* « Good to know » à sa hauteur naturelle */
	.tour-app .tour-card__aside .tour-facts {
		flex: 0 0 auto;
	}

	/* Boîte photo carrée (choix assumé, pas negociable) : la hauteur
	   de la photo ne dépend donc que de sa largeur, jamais de la
	   hauteur réellement disponible dans la colonne. Le vide que ça
	   peut laisser sous « Bon à savoir » (tour avec peu de contenu à
	   droite, ex. Tecpán) est géré par justify-content: center
	   ci-dessus : réparti en haut et en bas de la colonne plutôt que
	   de s'accumuler sous les facts, sans jamais toucher au carré. */
	.tour-app .tour-card__aside .tour-carousel {
		flex: 0 0 auto;
	}
	.tour-app .tour-card__aside .tour-carousel__slide {
		aspect-ratio: 1 / 1;
	}

	/* Oiseaux : trois catégories côte à côte. */
	.tour-birds__groups {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tablette : deux colonnes d'oiseaux. */
@media (min-width: 48rem) and (max-width: 63.99rem) {

	.tour-birds__groups {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   FICHE DESTINATION (CPT « destination »)
   single-destination.php — expérience éditoriale immersive.
   Les composants communs (carousel, facts, tour-back, faq)
   réutilisent les classes du single-tour sans duplication CSS.
   ============================================================ */

/* Pleine largeur (2026-08-12, à la demande de l'auteur du site) : la
   carte n'est plus une île plus étroite posée sur un fond vert — le
   papier texturé (.dest-card) et le hero couvrent tout l'écran, du
   bord gauche au bord droit ET jusqu'en haut du viewport. Le fond vert
   de .dest-app reste en repli (visible une fraction de seconde avant
   que .dest-card ne charge) mais n'a plus de marge à montrer. Chaque
   .dest-section garde son propre max-width (--container-base, cf. plus
   bas) : le texte reste confortable à lire même si le papier, lui, va
   d'un bord à l'autre — c'est cette contrainte-là, pas celle de la
   carte, qui protège la lisibilité (CLAUDE.md, clientèle 50+). Snapshot
   (prix) et recommandations gardent volontairement l'ancienne largeur
   (1040px, cf. leurs règles dédiées) — élargis le 2026-08-13, demande
   explicite de l'auteur du site de ne pas y toucher. */
.dest-app {
	background-color: var(--surface-primary);
	color: var(--text-primary);
}

/* Le papier va d'un bord à l'autre — plus de carte flottante, donc
   plus de coins arrondis ni d'ombre (ils n'auraient plus rien à
   détacher du fond). overflow:hidden reste utile pour le hero. */
.dest-card {
	background-color: var(--sand-50);
	color: var(--green-800);
	overflow: hidden;
}

/* .dest-card ne couvre que la hauteur du contenu : au-delà (rebond
   élastique iOS/macOS quand on force le scroll tout en haut ou tout en
   bas), c'est le fond de body qui apparaît — vert nu par défaut
   (base.css), jamais vu ailleurs sur le site mais ici en clash direct
   avec le papier texturé de .dest-card juste au-dessus. Même traitement
   que .section--light (mêmes longhand, cf. themes.css) posé sur le
   <body> lui-même.
   background-color en --sand-150 (teinte moyenne de fond-texture-creme.webp,
   calculée directement sur le fichier — cf. commentaire --sand-150 dans
   tokens.css) et non --sand-50 (le blanc cassé du papier lui-même) : dans
   la zone de rebond, Safari iOS/macOS n'étend que la background-color, pas
   la background-image (limitation WebKit connue, pas un bug de ce fichier).
   Avec --sand-50 la zone de rebond reste donc franchement blanche au lieu
   de crème — --sand-150 la rapproche assez du grain réel pour que l'œil ne
   voie pas la jointure, même sans texture réelle affichée à cet endroit. */
body.single-destination {
	background-color: var(--sand-150);
	background-image: url('../img/fond-texture-creme.webp?v=3');
	background-position: top;
	background-size: 100% auto;
	background-repeat: repeat-y;
}

/* ============================================================
   HERO : photo plein cadre 21:9 (desktop) avec tags overlay
   ============================================================ */

.dest-hero {
	position: relative;
	width: 100%;
}

.dest-hero .tour-carousel {
	border-radius: 0;
	width: 100%;
	background-color: var(--green-800);
}

/* Hero immersif : photo plein cadre en hauteur d'écran (≈78vh desktop).
 * On override l'aspect-ratio square du carousel au profit d'une height. */
.dest-hero .tour-carousel__slide {
	aspect-ratio: auto;
	height: clamp(530px, 83vh, 940px);
}

@media (max-width: 47.999rem) {
	.dest-hero .tour-carousel__slide {
		height: clamp(440px, 78vh, 720px);
	}
}

/* La photo remplit tout le cadre (recadrée par son côté le plus court) —
   la règle de base du carousel est `contain` (photo jamais coupée,
   cf. main.css ~2229) ; le hero destination veut au contraire un plein
   cadre immersif, comme la fiche tour (.tour-app) juste en dessous. */
.dest-hero .tour-carousel__image {
	object-fit: cover;
}

/* Voile vert olive (DS), resserré au strict nécessaire derrière le
   titre — la photo doit se lire sur le reste du cadre, sans lavis
   general. Lisibilité assurée par ce voile court + le text-shadow du
   titre (cf. dest-hero__title). */
.dest-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42%;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(33, 36, 15, 0.75) 0%,
		rgba(43, 47, 20, 0.4) 45%,
		rgba(51, 56, 25, 0.12) 78%,
		rgba(51, 56, 25, 0) 100%
	);
	z-index: 1;
}

/* --- Navigation au geste : ni flèches ni loupe (option B, 2026-08-11) —
   swipe, tap gauche/droite et flèches clavier sur le viewport lui-même,
   cf. tour.js initCarousel(). Le curseur signale l'affordance en souris. --- */
.dest-hero .tour-carousel__viewport {
	cursor: pointer;
	outline: none;
}
.dest-hero .tour-carousel__viewport:focus-visible {
	box-shadow: var(--focus-ring);
}

/* Repère de position « n / total », discret, coin haut-droit. Remplace
   les points de pagination (masqués partout ailleurs sur ce hero). */
.dest-hero__counter {
	position: absolute;
	top: clamp(16px, 2.6vw, 30px);
	right: clamp(16px, 2.6vw, 30px);
	z-index: 2;
	margin: 0;
	font-family: var(--font-text);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.04em;
	color: var(--sand-50);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

/* ============================================================
   SECTIONS : chaque bloc de contenu prend une « section » centrée
   max 880px, et a son propre padding latéral confortable.
   Les photo-breaks et l'invitation peuvent dépasser cette largeur.
   ============================================================ */

.dest-section {
	padding-inline: clamp(24px, 5vw, 64px);
	max-width: var(--container-base);
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
}

/* Snapshot (prix) et recommandations : gardent l'ancienne largeur de
   section (1040px) même après l'élargissement général ci-dessus —
   demande explicite de l'auteur du site (2026-08-13). Contrainte posée
   ici, sur la section elle-même (pas sur .dest-snapshot__card /
   .dest-reco__grid) : ces deux éléments n'ont pas de padding propre,
   leur largeur affichée dépend donc du padding-inline de .dest-section
   ci-dessus — un max-width posé directement dessus les aurait ignoré
   et donc élargis (bug du 2026-08-13, corrigé le jour même). */
.dest-section.dest-snapshot,
.dest-section.dest-reco {
	max-width: 1040px;
}

.dest-section:last-child {
	padding-bottom: clamp(40px, 6vw, 72px);
}

.dest-section + .dest-section {
	margin-top: clamp(28px, 3.5vw, 44px);
}

/* Identity (titre+stats) : gap interne plus serré. */
.dest-section--identity {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.5vw, 28px);
}

.dest-body__head {
	gap: var(--space-3);
}

/* Compat ascendant : si encore présent dans des templates anciens. */
.dest-body {
	padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 64px) clamp(40px, 5vw, 72px);
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 40px);
	max-width: 880px;
	margin-inline: auto;
}

.dest-body__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.dest-body__title {
	font-family: var(--font-display); /* Shantell Sans */
	font-size: clamp(2.25rem, 4.5vw + 0.5rem, 3.75rem);
	color: var(--green-800);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 500;
	margin: 0;
}

/* Sous-titre — paragraphe d'intro élégant, serif italique, vert calme */
.dest-body__subtitle {
	font-family: var(--font-text);
	font-size: clamp(1rem, 0.4vw + 0.9rem, 1.15rem);
	font-style: italic;
	color: var(--green-700);
	line-height: 1.55;
	margin: 0;
	max-width: 62ch;
	letter-spacing: 0;
}

.dest-body__lead {
	font-family: var(--font-text); /* Source Serif 4 */
	font-size: clamp(1.05rem, 0.8vw + 0.85rem, 1.3rem);
	font-style: italic;
	color: var(--green-700, var(--green-800));
	line-height: 1.5;
	margin: 0;
	max-width: 56ch;
}

/* --- Stats bar horizontale (Stay + Region) ----------------- */

.dest-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-6);
	padding: var(--space-4) var(--space-5, var(--space-4));
	background-color: var(--sand-100);
	border-radius: var(--radius-md);
	border: 1px solid var(--sand-200);
}

.dest-stats__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
}

.dest-stats__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: var(--radius-full);
	background-color: var(--accent-500);
	color: var(--sand-50);
}

.dest-stats__icon .icon {
	width: 18px;
	height: 18px;
}

.dest-stats__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.dest-stats__label {
	font-family: var(--font-text);
	font-size: 10px;
	font-weight: var(--weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sand-500);
	line-height: 1.2;
}

.dest-stats__value {
	font-family: var(--font-text);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--green-800);
	line-height: 1.3;
}

.dest-stats__unit {
	font-weight: var(--weight-regular);
	color: var(--sand-500);
	font-size: 11px;
}

/* --- Corps éditorial (long form) --------------------------- */

.dest-content {
	font-family: var(--font-text);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--green-800);
	max-width: 62ch;
}

.dest-content > * + * {
	margin-top: var(--space-4);
}

/* ============================================================
   THINGS TO DO : grille de cartes activités
   ============================================================ */

.dest-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}

.dest-section-head__eyebrow {
	color: var(--sand-500);
	margin: 0;
}

.dest-section-head__title {
	color: var(--green-800);
	margin: 0;
}

.dest-section-head__note {
	font-family: var(--font-text);
	font-size: var(--text-sm);
	color: var(--sand-500);
	margin: 0;
}

.dest-activities {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.dest-activities__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media (min-width: 36rem) {
	.dest-activities__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.dest-activities__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.dest-activity {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5, var(--space-4));
	background-color: #fff;
	border: 1px solid var(--sand-200);
	border-radius: var(--radius-md);
	transition: border-color 200ms var(--ease-soft, ease),
	            transform 200ms var(--ease-soft, ease),
	            box-shadow 200ms var(--ease-soft, ease);
}

.dest-activity:hover {
	border-color: var(--accent-500);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -4px rgba(196, 97, 47, 0.16);
}

/* Petit marqueur terracotta : prefix visuel signature */
.dest-activity__mark {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--accent-500);
	margin-bottom: 4px;
	transition: transform 200ms ease;
}
.dest-activity:hover .dest-activity__mark {
	transform: scale(1.4);
}

.dest-activity__name {
	font-family: var(--font-text);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--green-800);
	line-height: 1.3;
	margin: 0;
}

.dest-activity__meta {
	font-family: var(--font-text);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	color: var(--sand-500);
	margin: 0;
	letter-spacing: 0.02em;
}

/* ============================================================
   TRIP SNAPSHOT — fin de fiche. Posée dans une carte sobre — fond,
   filet fin, sans coupon ni médaillon.
   Hiérarchie (2026-08-11, corrigé) : prix + CTA d'abord — c'est ce que
   le visiteur doit voir en premier. La durée rejoint l'eyebrow du prix
   (« 4 days · 3 nights from ») plutôt que d'être répétée plus bas.
   Inclus / à organiser suivent sous un filet, en registre nettement
   plus petit : une réassurance qu'on peut vérifier, pas une deuxième
   vedette qui fait concurrence au prix — côte à côte pour utiliser la
   largeur plutôt que l'abandonner sous une seule colonne.
   ============================================================ */
.dest-snapshot__card {
	padding: clamp(20px, 3vw, 36px);
	background-color: var(--sand-50);
	border: 1px solid var(--sand-200);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.dest-snapshot__grid {
	display: flex;
	flex-direction: column;
}

/* Pied de faits : inclus/à organiser, sous un filet — registre petit
   et assourdi, à distance respectueuse du prix au-dessus. Les deux
   groupes côte à côte dès que la largeur le permet. */
.dest-snapshot__facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px clamp(20px, 3vw, 32px);
	min-width: 0;
	margin-top: clamp(16px, 2.2vw, 22px);
	padding-top: clamp(14px, 1.8vw, 18px);
	border-top: 1px solid var(--sand-200);
}
@media (min-width: 34rem) {
	.dest-snapshot__facts {
		/* 1fr/1fr (pas fit-content) DANS un conteneur plafonné à 752px
		   (= 2 × 360px + le gap max de 32px, mêmes chiffres que le
		   plafond de « Your trip includes » tuné plus tôt pour son
		   rééquilibrage 4/3) : les deux colonnes ont ainsi TOUJOURS la
		   même largeur, quel que soit le nombre d'éléments de chaque
		   côté. L'essai précédent (fit-content sur chaque colonne)
		   laissait « You arrange » se réduire à la largeur de son seul
		   élément (souvent un vol international) — géométriquement
		   centré sur la carte, mais visuellement décalé à droite : plus
		   de la moitié de « Your trip includes » se retrouvait à gauche
		   du centre réel de la carte (2026-08-13, signalé par l'auteur
		   du site après un rechargement forcé, donc pas un souci de
		   cache). Des colonnes réellement symétriques réglent ça à la
		   racine plutôt que de rapprocher deux blocs de poids différents. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		max-width: 752px;
		margin-inline: auto;
	}
}

.dest-snapshot__group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
	text-align: center;
}
.dest-snapshot__group-title {
	margin: 0;
	font-family: var(--font-text);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--sand-500);
}
.dest-snapshot__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 6px;
	column-gap: 16px;
}
/* Au-delà de 7 éléments (ex. Petén + son vol national), resserre
   l'écart horizontal pour garder 2 lignes plutôt que d'en laisser
   déborder une 3e, isolée sous les deux premières. */
.dest-snapshot__list--tight {
	column-gap: 10px;
}
.dest-snapshot__item {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--font-text);
	font-size: var(--text-xs);
	line-height: 1.4;
	color: var(--green-800);
}
/* Coche/croix typographiques (pas d'icône SVG) — le signe le plus
   sobre possible, dans les deux couleurs de marque déjà en place. */
.dest-snapshot__mark {
	font-weight: var(--weight-semibold);
}
.dest-snapshot__item--yes .dest-snapshot__mark { color: var(--green-700); }
.dest-snapshot__item--no { color: var(--sand-500); }
.dest-snapshot__item--no .dest-snapshot__mark { color: var(--accent-600); }

/* Prix à gauche, CTA à droite — l'un et l'autre ne sont jamais séparés
   par un vide. Empile proprement dès que la largeur manque (mobile,
   ou les deux boutons ensemble). */
.dest-snapshot__conversion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}
/* Deux CTA : le tailor-made (primary, terracotta plein) reste le
   principal ; la réservation rapide (secondary) l'accompagne sans lui
   faire concurrence — cf. règle DS « terracotta plein exclusif à
   btn--primary ». */
.dest-snapshot__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.dest-snapshot__price {
	display: flex;
	flex-direction: column;
}
.dest-snapshot__price-eyebrow {
	margin: 0;
	font-family: var(--font-text);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--sand-500);
}
/* Prix + note sur une même ligne de base — « per adult » à côté du
   chiffre plutôt qu'empilé dessous. */
.dest-snapshot__price-row {
	margin: 2px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
}
.dest-snapshot__price-amount {
	font-family: var(--font-text);
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	color: var(--green-800);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
.dest-snapshot__price-note {
	font-size: var(--text-sm);
	color: var(--sand-500);
}

/* ============================================================
   ITINERARY — TABLES jour-par-jour (inspiré du PDF de référence)
   2 cols desktop (Day 1 + Day 2 côte à côte), 1 col mobile.
   ============================================================ */

.dest-section-head--decorated {
	position: relative;
}

.dest-section-head__deco {
	display: inline-block;
	color: var(--accent-500);
	margin-right: 6px;
	font-size: 1em;
}

/* Un peu plus de respiration avant le Day 1 / la première photo. */
.dest-itinerary .dest-section-head {
	margin-bottom: clamp(20px, 3vw, 32px);
}

.dest-itin-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 3vw, 36px);
}

@media (min-width: 48rem) {
	.dest-itin-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.dest-itin-day {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.dest-itin-day__title {
	font-family: var(--font-display); /* Shantell — colle au scrapbook PDF */
	font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem);
	font-weight: 500;
	color: var(--green-800);
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1.2;
}

.dest-itin-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
	font-family: var(--font-text);
	/* Très légère inclinaison, alternée d'un jour à l'autre (comme les
	   polaroids) — même esprit scrapbook, rotation sous le plafond de
	   3° (PREMORTEM, accessibilité). */
	transform: rotate(-0.8deg);
}
.dest-itin-day:nth-of-type(even) .dest-itin-table {
	transform: rotate(0.8deg);
}

.dest-itin-table__th {
	text-align: left;
	font-size: 11px;
	font-weight: var(--weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sand-500);
	padding: 10px 14px;
	/* Vert clair bien visible (2026-08-11, 2e passe : le lavis à 10% était
	   trop discret) — green-300 à 35%, bordure assortie en vert plutôt
	   que sand. */
	background: rgba(154, 163, 106, 0.35);
	border: 1px solid var(--green-300);
}

.dest-itin-table__th:first-child {
	border-top-left-radius: var(--radius-sm);
	border-right: 0;
}

.dest-itin-table__th:last-child {
	border-top-right-radius: var(--radius-sm);
}

.dest-itin-table__row td {
	padding: 12px 14px;
	/* Transparent : laisse voir le papier de .dest-card en dessous
	   plutôt qu'un aplat blanc opaque. Bordure verte, assortie à l'en-tête. */
	background: transparent;
	border: 1px solid var(--green-300);
	border-top: 0;
}

.dest-itin-table__row:last-child td:first-child {
	border-bottom-left-radius: var(--radius-sm);
}
.dest-itin-table__row:last-child td:last-child {
	border-bottom-right-radius: var(--radius-sm);
}

.dest-itin-table__time {
	width: 90px;
	font-weight: var(--weight-semibold);
	color: var(--accent-600);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-size: var(--text-sm);
	border-right: 0 !important;
}

.dest-itin-table__activity {
	color: var(--green-800);
	font-size: var(--text-sm);
	line-height: 1.4;
}

.dest-itin-table__name {
	display: block;
	font-weight: var(--weight-medium);
}

.dest-itin-table__note {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-style: italic;
	color: var(--sand-500);
	line-height: 1.4;
}

/* ============================================================
   PHOTO BREAK — polaroid (style scrapbook PDF)
   Cadre blanc + ombre douce + rotation alternée
   ============================================================ */

.dest-break {
	margin: 0;
	padding: 0 clamp(16px, 4vw, 48px);
	max-width: 760px;
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
}

.dest-break__inner {
	background: #ffffff;
	padding: 12px 12px 14px;
	box-shadow:
		0 18px 38px -10px rgba(20, 40, 30, 0.28),
		0 4px 10px rgba(20, 40, 30, 0.08);
	border-radius: 2px;
	transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dest-break--tilt-left .dest-break__inner {
	transform: rotate(-1.4deg);
}

.dest-break--tilt-right .dest-break__inner {
	transform: rotate(1.6deg);
}

.dest-break__inner:hover {
	transform: rotate(0deg) scale(1.01);
}

.dest-break__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1px;
}

.dest-break__caption {
	margin-top: 14px;
	padding: 0 4px 4px;
	font-family: var(--font-display); /* Shantell — manuscrit comme dans le PDF */
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--green-800);
	text-align: center;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

/* ============================================================
   POSTCARDS — grille 2×2 polaroid (style scrapbook PDF)
   Photos avec rotations variées + placeholders verts si vide.
   Grille en pleine largeur (déborde du gabarit reading) pour
   plus d'impact visuel.
   ============================================================ */

.dest-postcards {
	max-width: 960px;
}

.dest-postcards__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 4vw, 48px);
	padding-top: var(--space-4);
}

@media (min-width: 36rem) {
	.dest-postcards__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.dest-postcard {
	margin: 0;
	display: flex;
	justify-content: center;
}

.dest-postcard__inner {
	background: #ffffff;
	padding: 14px 14px 18px;
	box-shadow:
		0 18px 38px -10px rgba(20, 40, 30, 0.28),
		0 4px 10px rgba(20, 40, 30, 0.08);
	border-radius: 2px;
	transform: rotate(var(--postcard-tilt, 0deg));
	transition:
		transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 350ms ease;
	width: 100%;
	max-width: 360px;
	box-sizing: border-box;
}

.dest-postcard__inner:hover {
	transform: rotate(0deg) scale(1.02);
	box-shadow:
		0 24px 50px -10px rgba(20, 40, 30, 0.35),
		0 8px 18px rgba(20, 40, 30, 0.12);
}

.dest-postcard__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1px;
}

.dest-postcard__caption {
	margin-top: 14px;
	padding: 0 4px 2px;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--green-800);
	text-align: center;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

/* --- Placeholder vert pour les slots polaroid encore vides --- */

.dest-postcard__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	aspect-ratio: 4 / 3;
	background-color: var(--green-700, #3a5a40);
	background-image:
		linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 7px),
		linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 7px);
	background-size: 8px 8px;
	color: var(--sand-50);
	border: 2px dashed rgba(255, 249, 246, 0.35);
	border-radius: 1px;
}

.dest-postcard__placeholder-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 249, 246, 0.15);
}

.dest-postcard__placeholder-icon .icon {
	width: 22px;
	height: 22px;
	color: var(--sand-50);
}

.dest-postcard__placeholder-text {
	font-family: var(--font-text);
	font-size: 12px;
	font-weight: var(--weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.dest-postcard__caption--placeholder {
	color: var(--sand-500);
	font-style: italic;
}

/* ============================================================
   SITE HEADER — en-tête de site
   Design System §8.1 + addendum. Position fixe. Matériau « verre »
   (aqua) : surface translucide teintée, flou d'arrière-plan et fin
   bord lumineux — un rendu premium, moderne, sans changement de
   teinte. Deux densités de verre : léger par-dessus un hero, plus
   dense au scroll (classe --solid pilotée par JS).
   Header en verre dense par défaut : fonctionne sans JavaScript.
   ============================================================ */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header);
	transition:
		background-color var(--duration-medium) var(--ease-soft),
		box-shadow var(--duration-medium) var(--ease-soft);

	/* Matériau verre : flou de ce qui passe dessous. Le préfixe
	   -webkit- couvre Safari. Voir le repli @supports plus bas. */
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));

	/* Fin liseré lumineux en bas : la « tranche » du verre. */
	border-bottom: 1px solid var(--glass-border);
}

/* État dense (par défaut, et au scroll par-dessus un hero) :
   voile plus opaque, halo de profondeur. */
.site-header--solid,
.site-header {
	background-color: var(--glass-surface);
	box-shadow: var(--glass-shadow);
}

/* État léger : posé par le JS uniquement par-dessus un hero.
   Le verre s'allège (voile discret) mais garde flou et bord —
   le header reste lisible dès le chargement, sans « saut ». */
.site-header:not(.site-header--solid) {
	background-color: var(--glass-surface-light);
	box-shadow: none;
}

/* Repli sans backdrop-filter (navigateurs anciens) : le flou
   n'existe pas, on densifie le voile pour garder la lisibilité.
   Le header reste alors un bandeau teinté semi-opaque — propre,
   juste sans l'effet verre. */
@supports not (backdrop-filter: blur(1px)) {

	.site-header--solid,
	.site-header {
		background-color: var(--glass-surface-raised);
	}

	.site-header:not(.site-header--solid) {
		background-color: var(--glass-surface);
	}
}

/* --- Disposition interne ----------------------------------- */

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	/* -1px : le bord du header (.site-header, border-bottom 1px) s'ajoute
	   par-dessus pour former la hauteur TOTALE que lit --header-h. */
	min-height: calc(var(--header-h) - 1px);
	padding-block: var(--space-3);
}

/* Mobile : le padding latéral hérité de .container-base (24px, pensé
   pour une nav desktop large) laisse trop de marge inutile de chaque
   côté du logo et du burger — resserré pour mieux occuper la largeur de
   l'écran, au même rythme que le rang de feuillets en dessous
   (var(--space-4), assets/css/main.css .explore__feuillets). Bandeau
   aussi légèrement plus haut qu'au départ : un peu de respiration en
   plus autour du logo sur ce format. Redéfinir --header-h ici suffit à
   ajuster .site-header__inner ci-dessus ET tout ce qui compense le
   header ailleurs (.site-main, les ancres de scroll, le hero-carnet) —
   un seul nombre à tenir à jour, pas quatre. */
@media (max-width: 63.999rem) {

	:root {
		--header-h: 97px;
	}

	.site-header__inner {
		padding-inline: var(--space-4);
	}
}

/* Petit écran (≤ 24rem ≈ 384px, iPhone mini/SE) : la marge de respiration
   ajoutée ci-dessus coûte proportionnellement plus cher sur un écran
   déjà court en hauteur — revenue un cran en dessous du reste du mobile. */
@media (max-width: 24rem) {

	:root {
		--header-h: 89px;
	}
}

/* --- Logo -------------------------------------------------- */

.site-header__brand {
	flex-shrink: 0;
}

.site-header__logo {
	color: var(--text-primary);
	font-family: var(--font-display);
}

/* Logo image (custom-logo WordPress) : hauteur bornée. */
.site-header__brand .custom-logo {
	display: block;
	height: auto;
	max-height: 48px;
	width: auto;
}

/* Logo image (wp_get_attachment_image) : icône circulaire + nom de marque. */
.site-header__logo-link {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Icône ronde : 56px — remplit le header (80px - 2×12px padding = 56px). */
.site-header__logo-img {
	display: block;
	height: auto;
	max-height: 56px;
	width: auto;
	flex-shrink: 0;
}

/* Wordmark image (ID 41) — même hauteur que l'icône pour l'équilibre. */
.site-header__brand-name-img {
	display: block !important;
	height: 56px !important;
	width: auto !important;
	max-height: none !important;
	flex-shrink: 0;
}

/* Repli texte si le wordmark image est absent. */
.site-header__brand-name {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--text-primary);
	white-space: nowrap;
	line-height: 1;
}

/* --- Navigation principale --------------------------------- */

.site-header__menu {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.site-header__menu a {
	color: var(--text-primary);
	transition: color var(--duration-fast) var(--ease-soft);
}

.site-header__menu a:hover {
	color: var(--text-muted);
}

.site-header__menu a:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* --- Actions ----------------------------------------------- */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-shrink: 0;
}

/* --- Burger (déclencheur du menu mobile) ------------------- */

.site-header__burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 48px;
	height: 48px;
	padding: var(--space-3);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.site-header__burger-bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--text-primary);
}

.site-header__burger:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* --- Compensation du header fixe --------------------------- */
/* Le header est en position fixe : par défaut le contenu est
   décalé pour ne pas passer dessous. Sur une page à hero, le JS
   pose .has-hero sur le body et le décalage est annulé (le hero
   passe volontairement sous le header transparent). Sans JS, le
   décalage reste — au pire un léger espace en trop, jamais du
   contenu masqué. */
.site-main {
	/* var(--header-h) : suit automatiquement les paliers mobiles
	   (voir .site-header__inner plus haut), un seul nombre à tenir à
	   jour au lieu d'une redite par palier ici. */
	padding-top: var(--header-h);
}

.has-hero .site-main {
	padding-top: 0;
}

/* Page « bare » (fiche destination/tour) : pas de header de site fixe,
   donc pas de décalage — le hero part du haut du viewport. */
.site-main--bare {
	padding-top: 0;
}

/* --- Bascule mobile / desktop ------------------------------ */
/* Mobile : nav principale et CTA masqués, burger visible.
   La navigation passe par le menu mobile (bloc suivant). */

.site-header__nav,
.site-header__cta {
	display: none;
}

@media (min-width: 64rem) {

	.site-header__nav,
	.site-header__cta {
		display: flex;
	}

	.site-header__burger {
		display: none;
	}
}
/* ============================================================
   MOBILE MENU — panneau de navigation plein écran
   Design System §8.2. Ouvert par le burger, fermé par croix /
   Échap / tap hors panneau. Visible sous le breakpoint desktop.
   ============================================================ */

/* Conteneur plein écran. hidden (attribut HTML) le retire du
   flux ; .is-open déclenche l'apparition. */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-mobile-menu);
	background-color: rgba(33, 36, 15, 0.4); /* voile : tap pour fermer. */
	opacity: 0;
	transition: opacity var(--duration-medium) var(--ease-soft);
}

.mobile-menu.is-open {
	opacity: 1;
}

/* --- Panneau ----------------------------------------------- */

.mobile-menu__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--surface-primary);
	padding-block: var(--space-6) var(--space-12);
	/* Glisse depuis la droite à l'ouverture. */
	transform: translateX(100%);
	transition: transform var(--duration-slow) var(--ease-soft);
	overflow-y: auto;
}

.mobile-menu.is-open .mobile-menu__panel {
	transform: translateX(0);
}

/* --- Barre supérieure : bouton fermer ---------------------- */

.mobile-menu__top {
	display: flex;
	justify-content: flex-end;
}

.mobile-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: transparent;
	border: 0;
	cursor: pointer;
	position: relative;
}

/* Croix : deux barres croisées. */
.mobile-menu__close-bar {
	position: absolute;
	width: 24px;
	height: 2px;
	background-color: var(--text-primary);
}

.mobile-menu__close-bar:first-child {
	transform: rotate(45deg);
}

.mobile-menu__close-bar:last-child {
	transform: rotate(-45deg);
}

.mobile-menu__close:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* --- Navigation : entrées verticales en grand -------------- */

.mobile-menu__nav {
	flex: 1;
	display: flex;
	align-items: center;
}

.mobile-menu__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	width: 100%;
}

.mobile-menu__list a {
	font-family: var(--font-text);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
	transition: color var(--duration-fast) var(--ease-soft);
}

.mobile-menu__list a:hover {
	color: var(--text-muted);
}

.mobile-menu__list a:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* --- Pied du panneau : CTA --------------------------------- */

.mobile-menu__footer {
	margin-top: var(--space-8);
}

.mobile-menu__cta {
	width: 100%;
}

/* --- Scroll de page bloqué quand le menu est ouvert -------- */

body.is-menu-open {
	overflow: hidden;
}

/* --- Masqué sur desktop : la nav passe par le header ------- */

@media (min-width: 64rem) {

	.mobile-menu {
		display: none;
	}
}
/* ============================================================
   SITE FOOTER — pied de page
   Design System §8.3. Fond sombre, sobre et aéré. Sur mobile,
   Explore et Contact en 2 colonnes, Réseaux sociaux et Branding
   pleine largeur en dessous (détail plus bas). Ne consomme que
   des tokens sémantiques.
   ============================================================ */

.site-footer {
	background-color: var(--green-900);
	color: var(--text-primary);
	padding-block: var(--space-8);
}

/* --- Colonnes ---------------------------------------------- */

.site-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.site-footer__heading {
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--border-subtle);
}

/* --- Menu de navigation footer ----------------------------- */

.site-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.site-footer__link,
.site-footer__menu a {
	color: var(--text-primary);
	transition: color var(--duration-fast) var(--ease-soft);
}

.site-footer__link:hover,
.site-footer__menu a:hover {
	color: var(--text-muted);
}

.site-footer__link:focus-visible,
.site-footer__menu a:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* --- Contact ----------------------------------------------- */

.site-footer__contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* --- Branding ---------------------------------------------- */

/* Repli texte (absence d'asset). */
.site-footer__logo {
	color: var(--text-primary);
	font-family: var(--font-display);
}

/* Logo image : présence visuelle renforcée dans le footer. */
.site-footer__logo-link {
	display: inline-flex;
	align-items: center;
	margin-bottom: var(--space-2);
}

.site-footer__brand {
	align-items: center;
	text-align: center;
}

.site-footer__logo-img {
	display: block;
	height: auto;
	max-height: 90px;
	width: auto;
	max-width: 100%;
}

.site-footer__lang {
	margin-top: var(--space-3);
}

/* --- Réseaux sociaux --------------------------------------- */

.site-footer__social {
	display: flex;
	gap: var(--space-4);
}

.site-footer__social-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-primary);
	transition: color var(--duration-fast) var(--ease-soft);
}

.site-footer__social-link:hover {
	color: var(--text-muted);
}

.site-footer__social-link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.site-footer__social-label {
	font-size: var(--text-xs);
	color: var(--text-muted);
}

/* --- Bas de footer : mention légale ------------------------ */

.site-footer__base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-subtle);
	color: var(--text-muted);
}

.site-footer__legal {
	display: flex;
	gap: var(--space-6);
}

.site-footer__legal-link {
	color: var(--text-muted);
	font-size: var(--text-xs);
	transition: color var(--duration-fast) var(--ease-soft);
}

.site-footer__legal-link:hover {
	color: var(--text-primary);
}

/* --- Mobile : Explore / Contact en 2 colonnes, bas de page
   centré ------------------------------------------------------ */
/* Un seul empilement des 4 colonnes s'étirait sur toute la hauteur
   de l'écran — Explore (colonne de gauche, sur 2 rangées) reste seul
   avec sa hauteur propre, plus grande (5 liens) ; Contact et Réseaux
   sociaux s'empilent dans la colonne de droite, directement l'un sous
   l'autre — des zones nommées plutôt qu'un simple placement
   ligne/colonne : avec l'auto-placement, la hauteur de la rangée de
   Contact aurait été calée sur celle d'Explore (rangée partagée),
   créant un vide entre Contact et Réseaux sociaux au lieu de les
   coller. Branding reste pleine largeur tout en bas. Le bas de page
   (copyright + liens légaux) empile et centre plutôt que
   `space-between`, qui casse en deux lignes mal alignées sous ~400px
   (clientèle 50+, lisibilité non négociable — CLAUDE.md). */
@media (max-width: 47.99rem) {

	.site-footer__cols {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"nav contact"
			"nav social"
			"brand brand";
		gap: var(--space-8) var(--space-4);
	}

	.site-footer__nav {
		grid-area: nav;
	}

	.site-footer__contact {
		grid-area: contact;
	}

	.site-footer__social-col {
		grid-area: social;
	}

	.site-footer__brand {
		grid-area: brand;
	}

	/* Logo déjà présent dans le header (visité juste avant) — sur
	   mobile, la colonne Branding ne garde que le sélecteur de
	   langue. */
	.site-footer__logo-link,
	.site-footer__logo {
		display: none;
	}

	.site-footer__base {
		flex-direction: column;
		text-align: center;
		gap: var(--space-3);
	}

	.site-footer__legal {
		justify-content: center;
	}
}

/* --- Tablette et desktop : 3 colonnes ---------------------- */

@media (min-width: 48rem) {

	.site-footer__cols {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
		gap: var(--space-8);
		align-items: start;
	}
}

/* ============================================================
   PAGE BIRDWATCHING — sections spécifiques
   Restructuré le 2026-08-02 : bandeau de confiance (pilliers,
   fusionné avec les anciennes stats « why Guatemala ») · FAQ.
   Passe 3 (2026-08-09) : ajout de bird-bridge, la passerelle vers
   Tailor-Made, après la section « oiseaux du Guatemala ». Un essai
   du même jour d'échanger les thèmes bandeau/tours a été abandonné
   (passe 4) : l'ordre et les thèmes du 2026-08-02 font à nouveau foi.
   Révélation au scroll (.reveal / .is-visible).
   ============================================================ */

/* --- Bandeau de confiance (4 chiffres-clés) --------------- */

.bird-pillars {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-compact);
}

.bird-pillars__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-8);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bird-pillars__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
}

.bird-pillars__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-full);
	background-color: var(--surface-raised);
	color: var(--text-primary);
	flex-shrink: 0;
}

.bird-pillars__value {
	display: block;
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
	line-height: var(--leading-tight);
}

.bird-pillars__label {
	font-size: var(--text-sm);
	color: var(--text-muted);
}

/* Cascade de révélation dans la liste des pilliers */
.bird-pillars__list .reveal:nth-child(2) { transition-delay: 80ms; }
.bird-pillars__list .reveal:nth-child(3) { transition-delay: 160ms; }
.bird-pillars__list .reveal:nth-child(4) { transition-delay: 240ms; }

@media (min-width: 48rem) {

	.bird-pillars__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --- Passerelle vers Tailor-Made ---------------------------- */
/* Ligne simple, pas un bouton : pour qui veut aller plus loin ou
   plus longtemps que les demi-journées vendues sur cette page.
   Corrigé le 2026-08-10 (4e passe) : un cadre à 4 côtés, même fin
   et sans fond, reste un réflexe « composant UI » (info box de
   template) — pas le vocabulaire de ce thème. Repris sur l'idiome
   déjà établi par .guide-card__quote (DS) : un trait court au-dessus
   du texte, rien d'autre. Teinté vert via color-mix (discret, se
   fond dans le grain crème plutôt que de trancher net) — clin d'œil
   à la demande d'un cadre vert sans en avoir le poids visuel.
   Padding du haut quasi nul : le feature-grid au-dessus fournit déjà
   tout l'air nécessaire. */

.bird-bridge {
	background-color: var(--surface-primary);
	/* Le gros de l'écart vient du padding-bottom du feature-grid
	   au-dessus (pattern partagé, non touché) : on remonte la
	   note dedans plutôt que d'ajouter notre propre padding-top. */
	margin-top: calc(-1 * var(--space-12));
	padding-block-end: var(--space-12);
	text-align: center;
}

.bird-bridge__inner {
	max-width: 34rem;
	margin-inline: auto;
}

.bird-bridge__rule {
	display: block;
	width: 2.5rem;
	height: 1px;
	margin: 0 auto var(--space-6);
	background-color: color-mix(in srgb, var(--green-400) 55%, transparent);
}

.bird-bridge__text {
	font-size: var(--text-sm);
	font-style: italic;
	line-height: var(--leading-relaxed);
	color: var(--text-muted);
	/* Répartit la coupure entre les deux lignes plutôt que de
	   laisser la première se remplir au maximum (dégradation
	   silencieuse en retour à la ligne normal si non supporté). */
	text-wrap: balance;
}

.bird-bridge__text a {
	color: var(--text-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--duration-fast) var(--ease-soft);
}

.bird-bridge__text a:hover {
	color: var(--text-muted);
}

.bird-bridge__text a:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	color: var(--text-primary);
}

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

.bird-faq {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

.bird-faq__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.bird-faq__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 42rem;
}

.faq-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--border-subtle);
}

.faq-item {
	border-bottom: 1px solid var(--border-subtle);
}

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-6);
	cursor: pointer;
	list-style: none;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
	transition: color var(--duration-fast) var(--ease-soft);
}

.faq-item__question::-webkit-details-marker {
	display: none;
}

.faq-item__question::marker {
	display: none;
}

.faq-item__question:hover {
	color: var(--text-muted);
}

.faq-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: var(--radius-full);
	border: 1px solid var(--border-subtle);
	font-size: var(--text-lg);
	line-height: 1;
	color: var(--text-muted);
	transition: transform var(--duration-medium) var(--ease-soft),
	            color var(--duration-fast) var(--ease-soft);
	user-select: none;
}

/* Rotation + → × à l'ouverture */
.faq-item[open] .faq-item__icon {
	transform: rotate(45deg);
	color: var(--text-primary);
}

.faq-item__answer {
	padding-bottom: var(--space-6);
	padding-right: clamp(0px, 8vw, var(--space-24));
}

.faq-item__answer p {
	color: var(--text-muted);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	max-width: 72ch;
}

/* --- Révélation au scroll ---------------------------------- */
/*
 * Amélioration progressive : sans JS, les éléments restent
 * visibles (opacity: 1 en fallback si IntersectionObserver
 * est absent). Avec JS, .is-visible est ajouté au scroll.
 */

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--duration-slow) var(--ease-soft),
		transform var(--duration-slow) var(--ease-soft);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   PAGE TAILOR-MADE — sections spécifiques
   Sec 3 Destinations · Sec 4 Réassurance · Sec 5 Langues
   Sec 6 Expériences · Sec 7 Calculateur · Sec 8 CTA
   ============================================================ */

/* --- Section 7 : Calculateur d'estimation ---------------- */

.tm-calculator {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

.tm-calculator__inner {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tm-calculator__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 44rem;
}

.tm-calculator__intro {
	color: var(--text-muted);
	margin-top: var(--space-2);
}

/* Formulaire — groupes de paramètres */

.tm-calc-params {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.tm-calc-group {
	border: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.tm-calc-group__label {
	font-size: 0.6875rem;
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
}

.tm-calc-group__hint {
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin-top: calc(-1 * var(--space-2));
	line-height: var(--leading-relaxed);
}

.tm-calc-group__max {
	font-size: var(--text-xs);
	font-weight: var(--weight-regular);
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-muted);
	margin-left: var(--space-1);
}

/* Voyageurs — 3 colonnes adultes / enfants (2 tranches d'âge, 6-12 et 0-5) */

.tm-calc-travellers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 var(--space-4);
	padding: var(--space-2) 0 var(--space-4);
}

.tm-calc-traveller-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* flex-start (pas center) : le nom puis le stepper démarrent à la même
	   hauteur sur les 3 colonnes, que la colonne ait ou non un sous-libellé
	   (Adultes n'en a pas) — centrer aurait décalé son stepper de ~13px par
	   rapport à Enfants/Jeunes enfants (repéré 2026-08-20). */
	justify-content: flex-start;
	gap: var(--space-2);
	text-align: center;
}

.tm-calc-traveller-col__name {
	font-size: 0.6875rem;
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.tm-calc-traveller-col__sub {
	font-size: 0.6875rem;
	color: var(--text-muted);
}

/* Invite à contacter Motmot Treks au plafond de 4 voyageurs (2026-08-11) —
   [hidden] doit rester prioritaire sur le display:flex (sinon le message
   reste visible en permanence : un sélecteur #id a plus de spécificité
   que [hidden] et gagne sur le display:none par défaut du navigateur). */
#tm-calc-pax-max-hint {
	/* Enfant du grid 3 colonnes .tm-calc-travellers : sans grid-column,
	   l'auto-placement le limite à la largeur d'une seule colonne (repéré
	   2026-08-20, cf. capture Baptiste — bouton coincé sous "Adults"). */
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

#tm-calc-pax-max-hint[hidden] {
	display: none;
}

/* Chips destinations (multiple) */

.tm-calc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.tm-calc-chip {
	cursor: pointer;
}

.tm-calc-chip__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.tm-calc-chip__label {
	display: block;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	border: 1px solid var(--border-subtle);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-muted);
	transition:
		background-color var(--duration-fast) var(--ease-soft),
		border-color var(--duration-fast) var(--ease-soft),
		color var(--duration-fast) var(--ease-soft);
}

.tm-calc-chip:hover .tm-calc-chip__label {
	border-color: var(--text-primary);
	color: var(--text-primary);
}

.tm-calc-chip__input:checked + .tm-calc-chip__label {
	background-color: var(--action-primary);
	border-color: var(--action-primary);
	color: var(--text-on-accent);
}

.tm-calc-chip__input:focus-visible + .tm-calc-chip__label {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Pills groupe / durée (single select) */

.tm-calc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.tm-calc-pill {
	cursor: pointer;
}

.tm-calc-pill__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.tm-calc-pill__label {
	display: block;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-subtle);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-muted);
	transition:
		background-color var(--duration-fast) var(--ease-soft),
		border-color var(--duration-fast) var(--ease-soft),
		color var(--duration-fast) var(--ease-soft);
}

.tm-calc-pill:hover .tm-calc-pill__label {
	border-color: var(--text-primary);
	color: var(--text-primary);
}

.tm-calc-pill__input:checked + .tm-calc-pill__label {
	background-color: var(--surface-raised);
	border-color: var(--text-primary);
	color: var(--text-primary);
}

.tm-calc-pill__input:focus-visible + .tm-calc-pill__label {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Layout 2 colonnes : paramètres + panneau résultat */

.tm-calc-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: start;
}

.tm-calc-left {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

@media (min-width: 64rem) {

	.tm-calc-layout {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-16);
	}
}

/* Panneau résultat — colonne droite */

.tm-calc-panel {
	background-color: var(--surface-raised);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
}

@media (min-width: 64rem) {

	.tm-calc-panel {
		position: sticky;
		top: 100px;
		padding: var(--space-8);
	}
}

/* État vide du panneau */

.tm-calc-panel__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 20rem;
	gap: var(--space-3);
}

@media (min-width: 64rem) {

	.tm-calc-panel__empty {
		height: 24rem;
	}
}

.tm-calc-panel__empty[hidden] {
	display: none;
}

.tm-calc-panel__empty-icon {
	width: 40px;
	height: 40px;
	color: var(--text-muted);
	opacity: 0.4;
}

.tm-calc-panel__empty-text {
	font-size: var(--text-sm);
	color: var(--text-muted);
	max-width: 26ch;
	line-height: var(--leading-relaxed);
}

/* État résultat */

.tm-calc-result {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.tm-calc-result[hidden] {
	display: none;
}

.tm-calc-panel__cta .btn {
	width: 100%;
	justify-content: center;
	text-align: center;
}

.tm-calc-panel__disclaimer {
	font-size: var(--text-xs);
	color: var(--text-muted);
	line-height: var(--leading-relaxed);
	border-top: 1px solid var(--border-subtle);
	padding-top: var(--space-4);
}

/* Steppers adultes / enfants */

.tm-calc-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-full);
	overflow: hidden;
	transition:
		background-color var(--duration-fast) var(--ease-soft),
		border-color var(--duration-fast) var(--ease-soft),
		color var(--duration-fast) var(--ease-soft);
}

/* Repère terracotta dès qu'un voyageur est choisi sur cette case — les 3
   steppers Adults/Children/Young children démarrent à 0 (2026-08-20). Même
   traitement que .tm-calc-dest-chip[aria-pressed="true"] plus bas (mêmes
   jetons --action-primary/--text-on-accent) pour une sélection cohérente
   sur toute la page. */
.tm-calc-stepper--active {
	background-color: var(--action-primary);
	border-color: var(--action-primary);
}

.tm-calc-stepper--active .tm-calc-stepper__btn,
.tm-calc-stepper--active .tm-calc-stepper__input {
	color: var(--text-on-accent);
}

.tm-calc-stepper--active .tm-calc-stepper__input {
	border-left-color: var(--action-primary);
	border-right-color: var(--action-primary);
}

.tm-calc-stepper__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	border: none;
	background: transparent;
	color: var(--text-primary);
	cursor: pointer;
	font-size: 1.125rem;
	line-height: 1;
	transition: background 0.15s;
}

.tm-calc-stepper__btn:hover:not(:disabled) {
	background: var(--surface-raised);
}

.tm-calc-stepper__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.tm-calc-stepper__input {
	width: 2.5rem;
	text-align: center;
	border: none;
	border-left: 1px solid var(--border-subtle);
	border-right: 1px solid var(--border-subtle);
	background: transparent;
	color: var(--text-primary);
	font-family: var(--font-text);
	font-size: 0.9375rem;
	padding: 0.375rem 0;
	-moz-appearance: textfield;
}

.tm-calc-stepper__input::-webkit-outer-spin-button,
.tm-calc-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

/* Stepper petite taille (dans les cartes destination) */

.tm-calc-stepper--sm .tm-calc-stepper__btn {
	width: 1.875rem;
}

.tm-calc-stepper--sm .tm-calc-stepper__input {
	width: 2rem;
}

/* Input durée — légèrement plus large pour 2 chiffres */

.tm-calc-stepper__input--wide {
	width: 3rem;
}

/* Sous-label dans la légende (ex. "under 12") */

.tm-calc-step__sub {
	font-size: 0.8em;
	font-weight: var(--weight-regular, 400);
	color: var(--text-muted);
	margin-left: 0.4em;
}

/* Durée — stepper + libellé "days" */

.tm-calc-duration {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.tm-calc-duration__unit {
	font-size: var(--text-sm);
	color: var(--text-muted);
}

/* Destinations — liste de chips boutons + cartes extensibles */

.tm-calc-dest-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.tm-calc-dest-item {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tm-calc-dest-chip {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	border: 1px solid var(--border-subtle);
	background: transparent;
	font-family: var(--font-text);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-muted);
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--ease-soft),
		border-color var(--duration-fast) var(--ease-soft),
		color var(--duration-fast) var(--ease-soft);
}

.tm-calc-dest-chip:hover {
	border-color: var(--text-primary);
	color: var(--text-primary);
}

.tm-calc-dest-chip[aria-pressed="true"] {
	background-color: var(--action-primary);
	border-color: var(--action-primary);
	color: var(--text-on-accent);
}

.tm-calc-dest-chip[aria-pressed="true"]:hover {
	background-color: var(--action-primary-hover);
	border-color: var(--action-primary-hover);
}

.tm-calc-dest-chip:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.tm-calc-dest-details {
	margin-top: var(--space-3);
	padding: var(--space-4);
	background-color: var(--surface-raised);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.tm-calc-dest-details[hidden] {
	display: none;
}

.tm-calc-dest-details__days {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.tm-calc-dest-details__label {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
	min-width: 3rem;
}

/* Activités dans la carte destination */

.tm-calc-dest-activities {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.tm-calc-dest-activities__label {
	font-size: 0.6875rem;
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.tm-calc-dest-activities__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.tm-calc-dest-act {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
}

.tm-calc-dest-act__input {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	accent-color: var(--action-primary);
	cursor: pointer;
}

.tm-calc-dest-act__name {
	font-size: var(--text-sm);
	color: var(--text-primary);
	line-height: var(--leading-snug);
}

.tm-calc-dest-act__dur {
	font-size: var(--text-xs);
	color: var(--text-muted);
	margin-left: 2px;
}

/* Note libre par destination */

.tm-calc-dest-note__input {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--text-primary);
	font-family: var(--font-text);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	resize: vertical;
	transition: border-color var(--duration-fast) var(--ease-soft);
}

.tm-calc-dest-note__input::placeholder {
	color: var(--text-muted);
}

.tm-calc-dest-note__input:focus {
	outline: none;
	border-color: var(--text-primary);
}

/* Bloc prix — résultat global */

.tm-calc-price-block {
	text-align: center;
	padding: var(--space-6) var(--space-4);
	background-color: var(--surface-primary);
	border-radius: var(--radius-md);
}

/* En-tête du bloc prix : libellé à gauche, devise à droite — regroupe ce
   qui était deux rangées séparées (donc un espacement de plus) en une
   seule ligne compacte. */
.tm-calc-price-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}

.tm-calc-price-block__label {
	font-size: 0.6875rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.tm-calc-price-block__price {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--text-primary);
	line-height: 1.05;
	margin-bottom: var(--space-2);
}

/* Taxe + pax/durée réunies sur une seule ligne (au lieu de deux) — même
   information, une ligne de moins. */
.tm-calc-price-block__meta {
	font-size: var(--text-xs);
	color: var(--text-muted);
}

.tm-calc-price-block__meta-sep {
	margin: 0 var(--space-1);
}

/* Itinéraire sélectionné — chips en lecture seule */

.tm-calc-result__itinerary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.tm-calc-itinerary__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background-color: var(--surface-primary);
	font-size: var(--text-xs);
	color: var(--text-muted);
	white-space: nowrap;
}

.tm-calc-itinerary__days {
	color: var(--text-primary);
	font-weight: var(--weight-medium);
}

/* ============================================================
   CALCULATEUR V3 — packages en lignes avec +/- + panneau enrichi
   ============================================================ */

/* Liste verticale des packages (chaque item = une ligne) */
.tm-calc-dest-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.tm-calc-dest-item {
	width: 100%;
}

/* Carte package : layout horizontal "infos | bouton +/−" */
.tm-calc-dest-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	width: 100%;
	padding: var(--space-3) var(--space-4);
	background-color: #fff;
	border: 1px solid var(--surface-primary);
	border-radius: var(--radius-md);
	cursor: pointer;
	text-align: left;
	transition: background-color .15s, border-color .15s, transform .1s;
	font-family: inherit;
}

.tm-calc-dest-chip:hover {
	border-color: var(--text-muted);
}

.tm-calc-dest-chip:active {
	transform: scale(0.995);
}

.tm-calc-dest-chip[aria-pressed="true"] {
	background-color: var(--accent-500);
	border-color: var(--accent-600);
}

/* À l'intérieur d'un package sélectionné : tout passe en crème. */
.tm-calc-dest-chip[aria-pressed="true"] .tm-calc-dest-chip__label,
.tm-calc-dest-chip[aria-pressed="true"] .tm-calc-dest-chip__meta,
.tm-calc-dest-chip[aria-pressed="true"] .tm-calc-dest-chip__days,
.tm-calc-dest-chip[aria-pressed="true"] .tm-calc-dest-chip__price,
.tm-calc-dest-chip[aria-pressed="true"] .tm-calc-dest-chip__sep {
	color: var(--sand-50);
}

/* Bloc infos */
.tm-calc-dest-chip__main {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.tm-calc-dest-chip__label {
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
	line-height: 1.3;
}

.tm-calc-dest-chip__meta {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	color: var(--text-muted);
	font-weight: var(--weight-regular);
}

.tm-calc-dest-chip__sep {
	opacity: 0.5;
}

.tm-calc-dest-chip__price {
	font-variant-numeric: tabular-nums;
}

/* Bouton +/− à droite (toggle visuel via aria-pressed) */
.tm-calc-dest-chip__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--surface-primary);
	color: var(--text-primary);
	font-size: 22px;
	font-weight: var(--weight-medium);
	line-height: 1;
	flex-shrink: 0;
	transition: background-color .15s, color .15s;
}

.tm-calc-dest-chip[aria-pressed="true"] .tm-calc-dest-chip__action {
	background-color: var(--sand-50);
	color: var(--accent-500);
}

/* Bascule +/− via aria-pressed (un seul icône visible à la fois) */
.tm-calc-dest-chip__icon {
	display: inline-block;
}

.tm-calc-dest-chip__icon--remove {
	display: none;
}

.tm-calc-dest-chip[aria-pressed="true"] .tm-calc-dest-chip__icon--add {
	display: none;
}

.tm-calc-dest-chip[aria-pressed="true"] .tm-calc-dest-chip__icon--remove {
	display: inline-block;
}

/* Bouton "Book this trip" — état désactivé */
.tm-calc-panel__cta .btn[disabled],
.tm-calc-panel__cta .btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Avertissement pax sous le CTA */
.tm-calc-panel__pax-warning {
	margin: var(--space-2) 0 0;
	font-size: var(--text-xs);
	color: var(--accent-500);
	text-align: center;
}

/* Modale : ligne à 2 colonnes pour les dates */
.tm-calc-modal__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}

@media (max-width: 480px) {
	.tm-calc-modal__field-row {
		grid-template-columns: 1fr;
	}
}

/* Hint sous les dates (durée des packages) */
.tm-calc-modal__hint {
	margin: calc(-1 * var(--space-2)) 0 var(--space-3);
	font-size: var(--text-xs);
	color: var(--text-muted);
	font-style: italic;
}

/* Bloc succès enrichi (titre + texte + statut sync) */
.tm-calc-modal__success-title {
	margin: 0 0 var(--space-1);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
}

.tm-calc-modal__success-text {
	margin: 0 0 var(--space-2);
	color: var(--text-muted);
}

.tm-calc-modal__sync {
	margin: var(--space-2) 0 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
}

.tm-calc-modal__sync--ok {
	background-color: rgba(120, 180, 120, 0.12);
	color: #2e6b2e;
}

.tm-calc-modal__sync--warn {
	background-color: rgba(196, 97, 47, 0.12);
	color: var(--accent-600);
}

/* ============================================================
   FLATPICKR — thème Motmot (terracotta + crème)
   Override des styles par défaut pour coller à la charte.
   Sélecteurs alignés sur la structure flatpickr 4.6.x.
   ============================================================ */

.flatpickr-calendar {
	background: var(--sand-50);
	border: 1px solid var(--sand-200);
	border-radius: var(--radius-md);
	box-shadow: 0 8px 32px rgba(20, 40, 30, 0.12);
	font-family: inherit;
	font-size: var(--text-sm);
	padding: 4px;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
	border-bottom-color: var(--sand-200);
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
	border-top-color: var(--sand-200);
}

.flatpickr-months {
	padding: 6px 4px 4px;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month {
	color: var(--text-primary);
	font-weight: var(--weight-medium);
	height: auto;
	line-height: 1.4;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	color: var(--text-primary);
	fill: var(--text-primary);
	padding: 6px;
	transition: color .15s;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	color: var(--accent-500);
	fill: var(--accent-500);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--accent-500);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	color: var(--text-primary);
	font-weight: var(--weight-medium);
	font-family: inherit;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
	background: var(--sand-100);
}

.flatpickr-weekdays {
	background: transparent;
}

.flatpickr-weekday {
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.flatpickr-day {
	color: var(--text-primary);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	max-width: 38px;
	height: 38px;
	line-height: 36px;
	font-weight: 400;
	transition: background-color .12s, color .12s;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
	background: var(--sand-100);
	border-color: transparent;
	color: var(--text-primary);
}

.flatpickr-day.today {
	border-color: var(--accent-500);
	color: var(--accent-500);
	font-weight: var(--weight-medium);
}

.flatpickr-day.today:hover {
	background: var(--accent-500);
	color: var(--sand-50);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange {
	background: var(--accent-500);
	border-color: var(--accent-500);
	color: var(--sand-50);
	font-weight: var(--weight-medium);
}

.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
	background: rgba(196, 97, 47, 0.12);
	border-color: transparent;
	box-shadow: none;
	color: var(--text-primary);
}

/* Dates désactivées par défaut (passé + agenda) :
 * gris doux + opacité réduite, AUCUNE décoration.
 * Les dates "agenda" sont sur-marquées par .motmot-is-booked (voir + bas). */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
	color: var(--sand-400);
	background: transparent;
	cursor: not-allowed;
	text-decoration: none;
	opacity: 0.4;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: var(--sand-400);
	opacity: 0.6;
}

/* L'input modale garde son apparence avec Flatpickr — petit ajustement
 * pour matérialiser visuellement qu'il est cliquable.                 */
.tm-calc-modal__input.flatpickr-input,
.tm-calc-modal__input.flatpickr-input + .flatpickr-mobile {
	cursor: pointer;
	background-image: linear-gradient(135deg, transparent 50%, var(--accent-500) 50%, var(--accent-500) 56%, transparent 56%);
	background-position: right 12px center;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	padding-right: 32px;
}

/* Mention "$X per person" sous le total (birdwatching) */
.tm-calc-modal__perpax {
	margin: -8px 0 var(--space-3);
	font-size: var(--text-sm);
	color: var(--text-muted);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Bandeau "ce que vous réservez" (mode birdwatching) */
.tm-calc-modal__context {
	margin: 0 0 var(--space-2);
	padding: var(--space-2) var(--space-3);
	background-color: var(--surface-primary);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	text-align: center;
	color: var(--text-primary);
}

/* Bloc pax steppers dans la modale (mode birdwatching) */
.tm-calc-modal__pax {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3);
	margin-bottom: var(--space-3);
	background-color: var(--surface-primary);
	border-radius: var(--radius-md);
}

.tm-calc-modal__pax-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.tm-calc-modal__pax-info {
	display: flex;
	flex-direction: column;
}

.tm-calc-modal__pax-name {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
}

.tm-calc-modal__pax-sub {
	font-size: var(--text-xs);
	color: var(--text-muted);
}

/* Mention airport → airport */
.tm-calc-airport-note {
	margin: var(--space-3) 0 var(--space-4);
	padding: var(--space-2) var(--space-3);
	background-color: var(--surface-primary);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	color: var(--text-muted);
	text-align: center;
}

/* Sections du panneau résultat (packages / transport) */
.tm-calc-result__section {
	margin-top: var(--space-4);
}

.tm-calc-result__section-title {
	margin: 0 0 var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

.tm-calc-result__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.tm-calc-result__item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--surface-primary);
	font-size: var(--text-sm);
}

.tm-calc-result__item:last-child {
	border-bottom: 0;
}

.tm-calc-result__name {
	flex: 1;
	color: var(--text-primary);
}

.tm-calc-result__meta {
	flex-shrink: 0;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tm-calc-result__via {
	display: block;
	margin-top: 2px;
	font-size: var(--text-xs);
	color: var(--text-muted);
	font-style: italic;
}

/* ============================================================
   MODALE — sollicitude de voyage (calculateur V2)
   ============================================================ */

.tm-calc-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
}

.tm-calc-modal[hidden] {
	display: none;
}

.tm-calc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.tm-calc-modal__box {
	position: relative;
	z-index: 1;
	background: var(--surface-inverse);
	color: var(--green-800);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.tm-calc-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
}

.tm-calc-modal__title {
	font-family: var(--font-text);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	color: var(--green-800);
}

.tm-calc-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: none;
	background: transparent;
	color: var(--sand-500);
	cursor: pointer;
	border-radius: var(--radius-md);
	flex-shrink: 0;
	transition: color var(--duration-fast) var(--ease-soft);
}

.tm-calc-modal__close:hover {
	color: var(--green-800);
}

.tm-calc-modal__estimate {
	font-size: var(--text-sm);
	color: var(--sand-500);
	background: var(--sand-100);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	text-align: center;
}

.tm-calc-modal__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.tm-calc-modal__form[hidden] {
	display: none;
}

.tm-calc-modal__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.tm-calc-modal__label {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--green-800);
}

.tm-calc-modal__opt {
	font-weight: var(--weight-regular);
	color: var(--sand-500);
}

.tm-calc-modal__input,
.tm-calc-modal__textarea {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--sand-200);
	border-radius: var(--radius-md);
	background: var(--sand-50);
	color: var(--green-800);
	font-family: var(--font-text);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	transition: border-color var(--duration-fast) var(--ease-soft);
}

.tm-calc-modal__input::placeholder,
.tm-calc-modal__textarea::placeholder {
	color: var(--sand-400);
}

.tm-calc-modal__input:focus,
.tm-calc-modal__textarea:focus {
	outline: none;
	border-color: var(--green-800);
}

.tm-calc-modal__textarea {
	resize: vertical;
}

.tm-calc-modal__error {
	font-size: var(--text-sm);
	color: #c0392b;
	line-height: var(--leading-snug);
}

.tm-calc-modal__error[hidden] {
	display: none;
}

.tm-calc-modal__success {
	font-size: var(--text-base);
	color: var(--green-800);
	text-align: center;
	padding: var(--space-6) 0;
}

.tm-calc-modal__success[hidden] {
	display: none;
}

.tm-calc-modal__box .btn--primary {
	background-color: var(--accent-500);
	color: var(--sand-50);
	border-color: var(--accent-500);
}

.tm-calc-modal__box .btn--primary:hover {
	background-color: var(--accent-600);
	border-color: var(--accent-600);
}

/* ============================================================
   MINIMAL REFINEMENT — pass épurée sur la modale + Flatpickr
   ------------------------------------------------------------
   Override appliqué après les styles de base pour gagner la
   priorité CSS. Charte : agence de voyage haut de gamme,
   scandinave, plat, minimal. Pas de dégradés, pas de blur,
   pas d'ombres lourdes, pas d'effets gadgets.
   ============================================================ */

/* ---- Backdrop ---- */
.tm-calc-modal {
	padding: clamp(var(--space-3), 4vw, var(--space-6));
}

.tm-calc-modal__backdrop {
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* ---- Box : padding 0 pour que le header sticky touche les bords ----
 * La hauteur est limitée pour forcer le scroll interne (sticky utile). */
.tm-calc-modal__box {
	max-width: 520px;
	width: 100%;
	padding: 0;
	gap: 0;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	animation: tm-modal-fade 200ms ease-out;
	display: flex;
	flex-direction: column;
	max-height: 92vh;
	overflow-y: auto;
}

/* CRITIQUE : [hidden] doit forcer display:none même sur des éléments
 * en flex/grid (sinon le wrap end_date reste visible en birdwatching). */
.tm-calc-modal [hidden],
.tm-calc-modal__field[hidden],
.tm-calc-modal__pax[hidden],
.tm-calc-modal__form[hidden],
.tm-calc-modal__success[hidden],
.tm-calc-modal__sync[hidden],
.tm-calc-modal__error[hidden],
.tm-calc-modal__hint[hidden],
.tm-calc-modal__context[hidden],
.tm-calc-modal__perpax[hidden] {
	display: none !important;
}

@keyframes tm-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---- Header sticky : toujours visible pendant le scroll ---- */
.tm-calc-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	border-bottom: 1px solid #ececec;
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: #ffffff;
	margin: 0;
}

.tm-calc-modal__title {
	font-family: var(--font-display); /* Shantell Sans — cohérent avec le reste du site */
	font-size: 20px;
	font-weight: 500;
	color: var(--green-800);
	letter-spacing: -0.005em;
	margin: 0;
	line-height: 1.2;
}

.tm-calc-modal__close {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	background: transparent;
	color: var(--sand-500);
	transition: color 150ms ease;
}
.tm-calc-modal__close:hover {
	background: transparent;
	color: var(--green-800);
	transform: none;
}

/* ---- Carte "summary" : copie EXACTE du style .price-availability ----
 * Fond crème (sand-100), bordure aucune, radius-lg (16px),
 * padding généreux, contenu centré.                                  */

/* ---- Summary compacte horizontale : tour à gauche, prix à droite ----
 * Grid 2 colonnes ; le nom du tour span les 2 lignes ; estimate row 1
 * à droite ; perpax row 2 à droite. Tout aligné, hauteur réduite.    */
.tm-calc-modal__summary {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 16px;
	row-gap: 2px;
	margin: 16px 24px 0;
	padding: 14px 16px;
	background-color: var(--sand-100);
	border: none;
	border-radius: var(--radius-md);
	text-align: left;
	width: auto;
	align-self: stretch;
	box-sizing: border-box;
}

/* ---- Nom du tour : Shantell, plus compact (text-xl), à gauche, span 2 rows ---- */
.tm-calc-modal__context {
	margin: 0;
	padding: 0;
	background: none;
	color: var(--green-800);
	border: none;
	border-radius: 0;
	font-family: var(--font-display);       /* Shantell Sans */
	font-size: var(--text-xl);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	font-weight: 500;
	text-align: left;
	text-transform: none;
	box-shadow: none;
	width: auto;
	box-sizing: border-box;
	grid-column: 1;
	grid-row: 1 / span 2;
	min-width: 0;
	overflow-wrap: break-word;
}

/* ---- Estimate : à droite, ligne 1, aligné à droite, compact ---- */
.tm-calc-modal__estimate {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	width: auto;
	box-sizing: border-box;
	text-align: right;
	grid-column: 2;
	grid-row: 1;
}

/* Quand context [hidden] (mode tailormade), estimate prend toute la ligne et se centre */
.tm-calc-modal__context[hidden] ~ .tm-calc-modal__estimate {
	grid-column: 1 / -1;
	align-items: center;
	text-align: center;
}
.tm-calc-modal__context[hidden] ~ .tm-calc-modal__perpax {
	grid-column: 1 / -1;
	text-align: center;
}

/* "INCL. 5% TAX" — eyebrow tout petit au-dessus du prix */
.tm-calc-modal__estimate-tax {
	font-family: var(--font-text);
	font-size: 10px;
	font-weight: var(--weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sand-500);
	order: -1;
	margin: 0;
	line-height: 1.2;
}

/* Le gros prix — text-xl (plus compact en horizontal) */
.tm-calc-modal__estimate-amount {
	font-family: var(--font-display);       /* Shantell Sans */
	font-size: var(--text-xl);
	line-height: 1.1;
	letter-spacing: var(--tracking-tight);
	color: var(--green-800);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* La ligne pax/durée — petite ligne sous le prix */
.tm-calc-modal__estimate-pax {
	font-family: var(--font-text);
	font-size: 12px;
	font-weight: var(--weight-medium);
	line-height: 1.2;
	color: var(--sand-500);
	font-variant-numeric: tabular-nums;
}

/* Mention "$X per person" — sous le prix, à droite */
.tm-calc-modal__perpax {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font-family: var(--font-text);
	font-size: 12px;
	font-weight: var(--weight-medium);
	line-height: 1.2;
	color: var(--sand-500);
	font-style: italic;
	font-variant-numeric: tabular-nums;
	text-align: right;
	width: auto;
	box-sizing: border-box;
	grid-column: 2;
	grid-row: 2;
}

/* ---- Options de prix (gammes) — fiche destination uniquement ----
 * Remplies en JS à l'ouverture (openTailormade(), assets/js/main.js) :
 * 3 mini-cartes Warbler/Tanager/Quetzal sous la carte summary. Couleurs
 * en dur (--green-800/--sand-*), comme le reste de la modale : la boîte
 * blanche accueille aussi bien le calculateur (thème sombre) que la
 * fiche destination (thème clair), les tokens sémantiques --text-primary
 * hériteraient de l'un ou l'autre selon la page — pas ici. Choisir une
 * gamme met à jour le prix ci-dessus (renderTailormadeEstimate()) et la
 * valeur envoyée à la réservation, jamais l'inverse. Vide → [hidden]. */
.tm-calc-modal__tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin: 10px 24px 0;
}

.tm-calc-modal__tier {
	display: block;
	cursor: pointer;
}

.tm-calc-modal__tier-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.tm-calc-modal__tier-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 6px;
	border-radius: var(--radius-md);
	background-color: var(--sand-100);
	box-shadow: inset 0 0 0 1px var(--sand-200);
	text-align: center;
	transition: box-shadow .15s var(--ease-soft), background-color .15s var(--ease-soft);
}

.tm-calc-modal__tier:hover .tm-calc-modal__tier-inner {
	box-shadow: inset 0 0 0 1px var(--sand-300);
}

.tm-calc-modal__tier-input:checked + .tm-calc-modal__tier-inner {
	background-color: var(--green-800);
	box-shadow: none;
}

.tm-calc-modal__tier-input:checked + .tm-calc-modal__tier-inner .tm-calc-modal__tier-name,
.tm-calc-modal__tier-input:checked + .tm-calc-modal__tier-inner .tm-calc-modal__tier-price {
	color: var(--sand-50);
}

.tm-calc-modal__tier-input:focus-visible + .tm-calc-modal__tier-inner {
	box-shadow: var(--focus-ring);
}

.tm-calc-modal__tier-name {
	font-family: var(--font-text);
	font-size: 10px;
	font-weight: var(--weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--green-800);
}

.tm-calc-modal__tier-price {
	font-family: var(--font-display);
	font-size: var(--text-base);
	color: var(--green-800);
	font-variant-numeric: tabular-nums;
}

/* ---- Form layout : compact, gap réduit, padding latéral aligné ---- */
.tm-calc-modal__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: auto;
	align-self: stretch;
	margin: 16px 24px 24px;
}

.tm-calc-modal__form > * {
	width: 100%;
	box-sizing: border-box;
}

/* Le bloc success doit lui aussi avoir le même padding horizontal. */
.tm-calc-modal__success {
	margin: 16px 24px 24px;
	padding: 0;
	text-align: center;
}

/* ---- Pax block : 2 colonnes Adultes / Enfants côte à côte ---- */
.tm-calc-modal__pax {
	background: transparent;
	border: none;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	width: 100%;
}

.tm-calc-modal__pax-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	gap: 8px;
	width: 100%;
	background: var(--sand-100);
	border-radius: var(--radius-md);
}

/* Plus de séparateur entre rows (elles sont côte à côte maintenant). */
.tm-calc-modal__pax-row + .tm-calc-modal__pax-row {
	border-top: none;
}

.tm-calc-modal__pax-info {
	min-width: 0;
}

.tm-calc-modal__pax-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tm-calc-modal__pax-name {
	font-size: 14px;
	font-weight: var(--weight-medium);
	color: var(--green-800);
}

.tm-calc-modal__pax-sub {
	font-size: 12px;
	color: var(--sand-500);
}

/* ---- Steppers : plats, sobres, alignés à droite ---- */
.tm-calc-modal__pax .tm-calc-stepper {
	background: transparent;
	border: 1px solid #ececec;
	border-radius: 4px;
	padding: 0;
	gap: 0;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
}

.tm-calc-modal__pax .tm-calc-stepper__btn {
	width: 32px;
	height: 32px;
	border-radius: 0;
	background: transparent;
	color: var(--green-800);
	border: none;
	font-size: 15px;
	font-weight: var(--weight-medium);
	transition: color 150ms ease;
}
.tm-calc-modal__pax .tm-calc-stepper__btn:not([disabled]):hover {
	background: transparent;
	color: var(--accent-500);
}
.tm-calc-modal__pax .tm-calc-stepper__btn[disabled] {
	opacity: 0.25;
	cursor: not-allowed;
}
.tm-calc-modal__pax .tm-calc-stepper__input {
	border: none;
	border-left: 1px solid #ececec;
	border-right: 1px solid #ececec;
	background: transparent;
	font-weight: var(--weight-medium);
	color: var(--green-800);
	width: 36px;
	height: 32px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-size: 14px;
}

/* ---- Labels & fields ---- */
.tm-calc-modal__label {
	font-size: 12px;
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sand-500);
}

.tm-calc-modal__opt {
	text-transform: none;
	letter-spacing: 0;
	font-weight: var(--weight-regular);
	color: var(--sand-400);
	font-size: 11px;
	margin-left: 4px;
}

.tm-calc-modal__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Field row (dates) : grid 2 colonnes en tailor-made, 1 colonne en birdwatching.
 * En birdwatching, le wrap end-date est masqué via [hidden] → on bascule
 * le parent en 1 colonne pour que start-date prenne 100%.              */
.tm-calc-modal__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	width: 100%;
}
.tm-calc-modal--birdwatching .tm-calc-modal__field-row {
	grid-template-columns: 1fr;
}
@media (max-width: 480px) {
	.tm-calc-modal__field-row {
		grid-template-columns: 1fr;
	}
}

/* Chaque field prend bien toute la cellule de la grille. */
.tm-calc-modal__field {
	min-width: 0;
	width: 100%;
}

/* ---- Inputs ---- */
.tm-calc-modal__input,
.tm-calc-modal__textarea,
.tm-calc-modal select.tm-calc-modal__input {
	background: #ffffff;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	padding: 11px 14px;
	font-size: 14px;
	color: var(--green-800);
	font-family: var(--font-text);
	line-height: 1.4;
	transition: border-color 150ms ease;
	box-shadow: none;
	width: 100%;
}

.tm-calc-modal__input:hover,
.tm-calc-modal__textarea:hover {
	border-color: #bdbdbd;
}

.tm-calc-modal__input:focus,
.tm-calc-modal__textarea:focus,
.tm-calc-modal select.tm-calc-modal__input:focus {
	outline: none;
	border-color: var(--accent-500);
	background: #ffffff;
	box-shadow: none;
}

.tm-calc-modal__input::placeholder,
.tm-calc-modal__textarea::placeholder {
	color: #b8b8b8;
}

/* Select chevron : SVG plat gris (focus → terracotta via CSS) */
.tm-calc-modal select.tm-calc-modal__input {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%237d7064' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	padding-right: 36px;
	cursor: pointer;
}
.tm-calc-modal select.tm-calc-modal__input option:disabled {
	color: #c8c8c8;
}

/* ---- Bouton submit : on laisse vivre les classes natives .btn--primary
 * .btn--lg. Aucun override ici, simplement width 100% pour qu'il prenne
 * toute la largeur du form (cohérent avec .price-availability__cta).    */
.tm-calc-modal__box .btn--primary {
	width: 100%;
	margin-top: var(--space-2);
}
.tm-calc-modal__box .btn--primary[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Hint sous les dates */
.tm-calc-modal__hint {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--sand-500);
	font-style: normal;
	line-height: 1.5;
}

/* Erreur : sobre, fond clair */
.tm-calc-modal__error {
	background: #fdf2f0;
	border: 1px solid #f5d5cf;
	border-radius: 4px;
	padding: 10px 12px;
	font-size: 13px;
	color: #a02e1f;
	margin: 0;
}

/* Success : centré, sobre */
.tm-calc-modal__success {
	padding: 8px 0;
	text-align: center;
}

.tm-calc-modal__success-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: var(--weight-semibold);
	color: var(--green-800);
	letter-spacing: -0.01em;
}
.tm-calc-modal__success-title::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #2e6b2e;
	color: #ffffff;
	font-size: 13px;
	margin-right: 8px;
	vertical-align: -3px;
}

.tm-calc-modal__success-text {
	font-size: 14px;
	color: var(--sand-500);
	line-height: 1.55;
	margin: 0 0 16px;
}

.tm-calc-modal__sync {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: var(--weight-medium);
	letter-spacing: 0;
}
.tm-calc-modal__sync--ok {
	background: #effaef;
	color: #2e6b2e;
	border: 1px solid #d2ecd2;
}
.tm-calc-modal__sync--warn {
	background: #fdf3ed;
	color: var(--accent-600);
	border: 1px solid #f1d8c5;
}

/* Scrollbar interne discrète */
.tm-calc-modal__box {
	scrollbar-width: thin;
	scrollbar-color: #d8d8d8 transparent;
}
.tm-calc-modal__box::-webkit-scrollbar {
	width: 6px;
}
.tm-calc-modal__box::-webkit-scrollbar-thumb {
	background: #d8d8d8;
	border-radius: 3px;
}

/* ============================================================
   MODALE DE CONTACT — séparateur « or » entre email et WhatsApp
   Seul élément propre à la modale de contact : tout le reste
   hérite de .tm-calc-modal__* (cf. contact-modal.php).
   ============================================================ */

/* .btn--secondary hérite normalement de --text-primary, qui vaut
 * le crème quasi blanc du thème sombre par défaut (hors section
 * claire) : illisible sur la boîte blanche de la modale. Même
 * correctif que .tm-calc-modal__box .btn--primary un peu plus haut,
 * jamais nécessaire jusqu'ici (aucun bouton secondary dans la
 * modale de réservation). */
.tm-calc-modal__box .btn--secondary {
	color: var(--green-800);
	border-color: var(--sand-200);
}

.tm-calc-modal__box .btn--secondary:hover {
	background-color: var(--sand-100);
}

.tm-contact-modal__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--sand-400);
	font-size: 13px;
	line-height: 1;
}

.tm-contact-modal__divider::before,
.tm-contact-modal__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #ececec;
}

/* ============================================================
   FLATPICKR — version minimaliste épurée
   Fond blanc uni, aucune hachure, dates indispos en gris clair
   non cliquables, date sélectionnée en aplat terracotta.
   ============================================================ */

.flatpickr-calendar {
	/* Pas de largeur forcée → Flatpickr calcule à partir de son layout
	 * interne (7 colonnes × cell + paddings). Évite tout débordement.
	 * Box-sizing border-box pour que le padding soit inclus.            */
	width: auto;
	box-sizing: border-box;
	padding: 14px;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	font-size: 14px;
	overflow: hidden;
	/* Au-dessus de la modale (z-index 1000) — calendrier rendu sur body
	 * via appendTo, donc plus de clipping par overflow:auto de la box. */
	z-index: 1100;
}

.flatpickr-calendar.animate.open {
	animation: tm-fp-open 180ms ease-out;
}
@keyframes tm-fp-open {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.flatpickr-months {
	padding: 0 0 12px;
	margin-bottom: 8px;
	border-bottom: 1px solid #f0f0f0;
}

.flatpickr-current-month {
	font-size: 14px;
	font-weight: var(--weight-semibold);
	color: var(--green-800);
	padding: 4px 0;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	font-weight: var(--weight-semibold);
	color: var(--green-800);
	font-family: inherit;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	width: 28px;
	height: 28px;
	padding: 6px;
	border-radius: 4px;
	background: transparent;
	color: var(--green-800);
	transition: background-color 150ms ease, color 150ms ease;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
	fill: var(--green-800);
	transition: fill 150ms ease;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	background: #f5f5f5;
	color: var(--accent-500);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--accent-500);
}

.flatpickr-weekdays {
	margin-bottom: 4px;
}

.flatpickr-weekday {
	color: var(--sand-500);
	font-size: 11px;
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 8px 0;
}

.dayContainer {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	padding: 0;
}

.flatpickr-day {
	justify-self: center;
	width: 38px;
	max-width: 38px;
	height: 38px;
	line-height: 36px;
	border-radius: 4px;
	border: 1px solid transparent;
	font-size: 13px;
	font-weight: var(--weight-regular);
	color: var(--green-800);
	transition: background-color 120ms ease, color 120ms ease;
}

.flatpickr-day:hover {
	background: #f5f5f5;
	color: var(--green-800);
}

.flatpickr-day.today {
	border: none;
	color: var(--accent-500);
	font-weight: var(--weight-semibold);
	background: transparent;
}
.flatpickr-day.today:not(.selected):hover {
	background: #f5f5f5;
	color: var(--accent-500);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange {
	background: var(--accent-500);
	border-color: var(--accent-500);
	color: #ffffff;
	font-weight: var(--weight-medium);
	box-shadow: none;
	transform: none;
}

.flatpickr-day.inRange {
	background: #fdf3ed;
	border-color: transparent;
	color: var(--green-800);
	box-shadow: none;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: #d8d8d8;
	opacity: 1;
}

/* Dates indisponibles : chiffre lisible, barré d'un trait fin terracotta.
 * Fond transparent, pas de hachures.                                     */
/* Dates désactivées (passé + agenda) : grey doux, sans décoration.
 * La barre diagonale terracotta est portée par .motmot-is-booked. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
	color: var(--sand-400, #b9aa9a);
	background: transparent;
	border-color: transparent;
	cursor: not-allowed;
	text-decoration: none;
	opacity: 0.4;
	transform: none;
	box-shadow: none;
}

/* ---- Dates réservées dans Google Calendar ----
 * Lisibles (opacité 1), avec une fine barre diagonale terracotta
 * du coin inférieur gauche au coin supérieur droit.                 */
.flatpickr-day.motmot-is-booked,
.flatpickr-day.motmot-is-booked:hover {
	position: relative;
	color: var(--sand-500);
	opacity: 1;                /* on annule l'opacité de .flatpickr-disabled */
	background: transparent;
	cursor: not-allowed;
}

.flatpickr-day.motmot-is-booked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 55%;                  /* trait court, centré sur le chiffre */
	height: 1.5px;
	transform: translate(-50%, -50%) rotate(-45deg);
	background: var(--accent-500);
	border-radius: 1px;
	pointer-events: none;
}

/* Plus de légende sous le calendrier — on reste épuré */
.flatpickr-calendar::after {
	content: none;
}

/* Icône calendrier discrète sur l'input */
.tm-calc-modal__input.flatpickr-input,
.tm-calc-modal__input.flatpickr-input + .flatpickr-mobile {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237d7064' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
	background-position: right 14px center;
	background-size: 15px 15px;
	background-repeat: no-repeat;
	padding-right: 38px;
}

/* --- Section 2 : Destinations showcase -------------------- */

.tm-destinations {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

.tm-destinations__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.tm-destinations__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 44rem;
}

.tm-destinations__title {
	margin-top: var(--space-2);
}

/* Grille de cartes — 1→2→3 colonnes */

.tm-dest-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

/* Les cartes masquées ne prennent AUCUNE place dans la grille.
   display:flex sur .tm-dest-card bat [hidden] (même spécificité, auteur > UA) :
   on force ici avec !important pour que l'attribut hidden reste fiable. */

.tm-dest-card[hidden] {
	display: none !important;
}

/* Carte destination — structure commune */

.tm-dest-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background-color: var(--surface-raised);
	transition:
		border-color var(--duration-fast) var(--ease-soft),
		transform var(--duration-fast) var(--ease-soft),
		box-shadow var(--duration-fast) var(--ease-soft);
}

.tm-dest-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card);
}

/* Image de fond (présente uniquement si thumbnail CPT) */

.tm-dest-card__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

.tm-dest-card:hover .tm-dest-card__bg {
	transform: scale(1.05);
}

/* Gradient d'assombrissement — version image */

.tm-dest-card--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(12, 15, 5, 0.90) 0%,
		rgba(12, 15, 5, 0.55) 40%,
		rgba(12, 15, 5, 0.18) 72%,
		transparent 100%
	);
	pointer-events: none;
}

/* Taille minimale pour les cartes avec image */

.tm-dest-card--has-image {
	min-height: clamp(300px, 36vw, 440px);
	border-color: transparent;
	--text-primary: var(--sand-50);
	--text-muted:   rgba(255, 255, 255, 0.70);
}

.tm-dest-card--has-image:hover {
	border-color: transparent;
}

/* Contenu de la carte */

.tm-dest-card__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	flex: 1;
}

/* Sur les cartes image : contenu ancré en bas */

.tm-dest-card--has-image .tm-dest-card__content {
	justify-content: flex-end;
}

/* Cartes sans image : style identique à l'original */

.tm-dest-card:not(.tm-dest-card--has-image):hover {
	border-color: var(--text-primary);
}

/* Titre */

.tm-dest-card__name {
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
	line-height: var(--leading-snug);
}

.tm-dest-card__link {
	color: inherit;
	text-decoration: none;
}

.tm-dest-card__link:hover {
	text-decoration: none;
}

/* Stretched link : étend la zone cliquable à toute la carte.
   z-index 3 = au-dessus du gradient (1) et du contenu (2). */
.tm-dest-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

.tm-dest-card__link:focus-visible {
	outline: none;
}

.tm-dest-card__link:focus-visible::after {
	box-shadow: inset 0 0 0 3px var(--action-primary);
}

/* Extrait */

.tm-dest-card__excerpt {
	font-size: var(--text-sm);
	color: var(--text-muted);
	line-height: var(--leading-relaxed);
}

.tm-dest-card:not(.tm-dest-card--has-image) .tm-dest-card__excerpt {
	flex: 1;
}

/* Pied de carte */

.tm-dest-card__footer {
	padding-top: var(--space-3);
	border-top: 1px solid var(--border-subtle);
	margin-top: auto;
}

.tm-dest-card--has-image .tm-dest-card__footer {
	border-top-color: rgba(255, 255, 255, 0.12);
	margin-top: var(--space-1);
}

.tm-dest-card__duration {
	font-size: var(--text-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	font-weight: var(--weight-medium);
}

/* Bouton "See more" */

.tm-destinations__more-wrap {
	display: flex;
	justify-content: center;
	padding-block: var(--space-4);
}

/* --border-subtle (sand-200) se fond dans le fond crème : ce bouton est
   le seul accès aux destinations masquées, sa bordure doit se voir
   sans devenir un second primaire (analyse pré-lancement, 2026-08-10).
   Au survol : plein vert (--green-700, couleur officielle — token brut,
   pas --surface-primary qui vaut crème ici dans .section--light) et
   texte crème, plutôt que le fond --surface-raised par défaut de
   .btn--secondary, trop proche du fond pour se voir. */
.tm-destinations__more-wrap .btn--secondary {
	border-color: var(--text-muted);
}

.tm-destinations__more-wrap .btn--secondary:hover {
	background-color: var(--green-700);
	border-color: var(--green-700);
	color: var(--sand-50);
}

/* Lien « Tell us which destinations… » */

.tm-destinations__cta-hint {
	text-align: center;
}

.tm-destinations__cta-link {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-soft);
}

.tm-destinations__cta-link:hover {
	color: var(--text-primary);
}

/* Cascade de révélation */
.tm-dest-grid .reveal:nth-child(2) { transition-delay: 60ms; }
.tm-dest-grid .reveal:nth-child(3) { transition-delay: 120ms; }
.tm-dest-grid .reveal:nth-child(4) { transition-delay: 60ms; }
.tm-dest-grid .reveal:nth-child(5) { transition-delay: 120ms; }
.tm-dest-grid .reveal:nth-child(6) { transition-delay: 180ms; }

/* Mobile : 2 cases par ligne au lieu d'empiler les 6 cartes en 1
   colonne (défilement interminable) — cartes réduites en conséquence,
   extrait masqué (pas la place à cette taille). Demande explicite de
   l'auteur du site, 2026-08-29. */
@media (max-width: 47.99rem) {

	.tm-dest-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
	}

	.tm-dest-card--has-image {
		min-height: clamp(180px, 62vw, 280px);
	}

	.tm-dest-card__content {
		padding: var(--space-3);
		gap: var(--space-1);
	}

	.tm-dest-card__name {
		font-size: var(--text-sm);
	}

	.tm-dest-card__excerpt {
		display: none;
	}

	.tm-dest-card__footer {
		padding-top: var(--space-2);
	}

	.tm-dest-card__duration {
		font-size: 0.6875rem;
	}
}

@media (min-width: 48rem) {

	.tm-dest-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 64rem) {

	.tm-dest-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Section 4 : Réassurance — layout éditorial ----------- */

.tm-reassurance {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

/* Layout 2 colonnes — texte gauche, visuel droit */

.tm-reas-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16);
	/* align-items: stretch (défaut) — la colonne visuelle prend la hauteur
	   de la colonne éditoriale. Le détail des points a son espace réservé,
	   donc la colonne gauche ne change jamais de hauteur. */
}

/* Colonne éditoriale */

.tm-reas-editorial {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.tm-reas-header {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.tm-reas-title {
	margin-top: var(--space-2);
}

.tm-reas-lead {
	font-size: var(--text-base);
	color: var(--text-muted);
	line-height: var(--leading-relaxed);
	max-width: 44ch;
}

/* Points de preuve */

.tm-reas-points {
	display: flex;
	flex-direction: column;
}

/* Simplifié le 2026-08-02 (2e passe, retour utilisateur : section
   trop chargée, trop animée, illisible) — plus d'interaction hover,
   plus de texte caché : 2 lignes fixes par point, toujours visibles. */

.tm-reas-point {
	display: grid;
	grid-template-columns: 20px 1fr;
	column-gap: var(--space-4);
	align-items: start;
	padding-block: var(--space-6);
	border-top: 1px solid var(--border-subtle);
}

.tm-reas-point:last-child {
	border-bottom: 1px solid var(--border-subtle);
}

.tm-reas-point__icon {
	display: flex;
	align-items: flex-start;
	color: var(--text-muted);
	margin-top: 2px;
	flex-shrink: 0;
}

.tm-reas-point__content {
	display: flex;
	flex-direction: column;
}

.tm-reas-point__title {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
	line-height: var(--leading-tight);
}

.tm-reas-point__line {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	color: var(--text-muted);
	line-height: var(--leading-relaxed);
}

/* Colonne visuelle — 2 images empilées qui partagent toute la hauteur */

.tm-reas-visual {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	height: 100%;                            /* prend la hauteur du grid item */
}

.tm-reas-visual__img {
	position: relative;
	width: 100%;
	background-size: cover;
	background-position: center;
	border-radius: var(--radius-lg);
	overflow: hidden;
	flex: 1;                                 /* partage équitable de la hauteur */
	min-height: 0;                           /* permet à flex de comprimer si besoin */
}

/* Image principale — un poil plus haute que la secondaire */
.tm-reas-visual__img--primary   { flex: 1.4; }
.tm-reas-visual__img--secondary { flex: 1; }

.tm-reas-visual__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(12, 15, 5, 0.92) 0%,
		rgba(12, 15, 5, 0.30) 55%,
		rgba(12, 15, 5, 0.05) 100%
	);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-8);
	gap: var(--space-6);
}

/* Panneau éditorial fallback (pas d'image) */

.tm-reas-visual__panel {
	width: 100%;
	aspect-ratio: 4 / 5;
	background-color: var(--green-800);
	border: 1px solid var(--green-600);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-12);
	gap: var(--space-8);
}

.tm-reas-visual__mark {
	font-size: var(--text-3xl);
	color: var(--action-primary);
	line-height: 1;
	letter-spacing: 0;
}

.tm-reas-visual__quote {
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--action-primary);
	padding-left: var(--space-6);
}

.tm-reas-visual__quote p {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	color: var(--sand-200);
	line-height: var(--leading-snug);
	max-width: 26ch;
}

/* Cascade de révélation */

.tm-reas-points .reveal:nth-child(2) { transition-delay:  80ms; }
.tm-reas-points .reveal:nth-child(3) { transition-delay: 160ms; }
.tm-reas-points .reveal:nth-child(4) { transition-delay: 240ms; }

/* Mobile : images en aspect-ratio fixe */

@media (max-width: 47.999rem) {

	.tm-reas-visual {
		height: auto;                        /* plus de stretch, suit le contenu */
	}

	.tm-reas-visual__img--primary,
	.tm-reas-visual__img--secondary {
		flex: 0 0 auto;
		aspect-ratio: 3 / 2;
	}
}

/* Desktop : 2 colonnes */

@media (min-width: 64rem) {

	.tm-reas-layout {
		grid-template-columns: 3fr 2fr;
	}
}

/* Ancienne section Expériences, supprimée le 2026-08-02 (analyse
   tunnel de réservation, cf. template-tailormade.php) : doublon avec
   le champ `type` des cartes Destinations. */

/* Bandeau Langues (page Tailor-Made) supprimé le 2026-08-02 après
   7 passes de réglages sans jamais convaincre (emoji, drapeaux SVG,
   médaillons façon bird-pillars, phrase éditoriale…). L'info FR/EN/ES
   vit maintenant comme 4e ligne de .tm-est-teaser__points, sans CSS
   dédié. */

/* ============================================================
   CARNET DE VOYAGE — éléments décoratifs (single-destination)
   Moteur générique : un <span> masqué par un SVG. La couleur vient
   de `currentColor`, donc chaque déco s'adapte à sa section (crème
   sur le vert, terracotta sous un titre, etc.). Taille via variantes.
   ============================================================ */

.dest-deco {
	display: inline-block;
	flex: none;
	pointer-events: none;
	background-color: currentColor;
	-webkit-mask: var(--deco) center / contain no-repeat;
	        mask: var(--deco) center / contain no-repeat;
}

/* Étincelle dans un surtitre (eyebrow) */
.dest-deco--eyebrow {
	width: 13px;
	height: 13px;
	opacity: 0.85;
}

/* Les surtitres accueillent une déco inline */
.dest-section-head__eyebrow,
.tour-faq__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* Soulignement irrégulier sous le titre de destination */
.dest-intro .dest-body__title {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
}
.dest-body__title-text { display: inline; }
.dest-deco--title-underline {
	display: block;
	width: 100%;
	height: 13px;
	margin-top: 4px;
	color: var(--accent-500);
	opacity: 0.9;
}

/* Description immersive : grand texte serif posé, pas italique */
.dest-section--identity .dest-body__lead {
	font-style: normal;
	font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.28rem);
	line-height: 1.7;
	color: var(--green-800);
	max-width: 62ch;
}
.dest-body__lead p { margin: 0; }
.dest-body__lead p + p { margin-top: 0.85em; }

/* ============================================================
   INTRO — titre + sous-titre + stats  |  locator (région allumée)
   ============================================================ */
.dest-intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 36px);
	align-items: start;
	/* Respiration sous le hero. */
	padding-top: clamp(24px, 3vw, 40px);
}
@media (min-width: 48rem) {
	.dest-intro {
		grid-template-columns: minmax(0, 1fr) clamp(240px, 28%, 340px);
		gap: clamp(28px, 4vw, 56px);
		align-items: center;
	}
}
.dest-intro__main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 2.2vw, 24px);
	min-width: 0;
}
/* Accroche éditoriale (sous-titre) — en section 1, sous le hero. */
.dest-intro__lead {
	font-size: clamp(1.12rem, 0.6vw + 1rem, 1.4rem);
	line-height: 1.62;
	max-width: 60ch;
	text-align: center;
	color: var(--green-800);
}

/* Locator présenté comme un « tampon de voyage » : médaillon sable,
   bord pointillé, léger pivot. */
.dest-intro__map {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	justify-self: center;
	padding: clamp(14px, 1.8vw, 22px) clamp(12px, 1.6vw, 20px) clamp(10px, 1.4vw, 16px);
	background:
		repeating-linear-gradient(45deg, rgba(196, 97, 47, 0.045) 0 9px, transparent 9px 18px),
		var(--sand-100);
	border: 2px dashed var(--sand-300);
	border-radius: var(--radius-lg);
	box-shadow: 0 14px 34px -18px rgba(33, 36, 15, 0.42);
	transform: rotate(-2deg);
}
@media (min-width: 48rem) {
	.dest-intro__map { justify-self: center; }
}
.dest-locator-map {
	width: clamp(160px, 18vw, 220px);
}
.dest-locator-map svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	filter: drop-shadow(0 6px 14px rgba(33, 36, 15, 0.12));
}
/* Carte « tampon » : Guatemala en vert, département actif allumé en crème clair
   (fort contraste light-on-dark, façon timbre / lieu à collectionner). */
.dest-intro__map .gt-dept {
	fill: var(--green-500);
	stroke: var(--sand-50);
	stroke-width: 1px;
	stroke-opacity: 0.55;
}
.dest-intro__map [data-active] {
	fill: var(--sand-50);
	stroke: var(--green-800);
	stroke-width: 1.4px;
}
.dest-intro__map-caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
}
.dest-intro__map-dept {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--font-display);
	font-size: 1.15rem;
	color: var(--green-800);
	letter-spacing: -0.01em;
}
.dest-intro__map-country {
	font-family: var(--font-text);
	font-size: 10px;
	font-weight: var(--weight-semibold);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sand-400);
}
.dest-intro__map-pin {
	width: 13px;
	height: 16px;
	color: var(--accent-500);
}

/* ============================================================
   Headers centrés (itinéraire, reco, faq)
   ============================================================ */
.dest-section-head--center {
	align-items: center;
	text-align: center;
}
.dest-section-head--center .dest-section-head__eyebrow,
.dest-section-head--center .tour-faq__eyebrow {
	justify-content: center;
}

/* ============================================================
   POLAROID générique (photos de l'itinéraire)
   ============================================================ */
.dest-itin-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(6px, 1.5vw, 16px);
}
/* Rapproché du bord extérieur de la grille (2026-08-13) : la photo
   alterne de colonne selon la parité du jour (cf. $reverse dans
   single-destination.php — motif fixe, pas dépendant du contenu), donc
   toujours aux mêmes positions dans la grille : 2e/6e/10e… enfant =
   colonne de droite (repoussée vers la droite), 3e/7e/11e… = colonne
   de gauche (repoussée vers la gauche). */
.dest-itin-photo:nth-child(4n+2) { justify-content: flex-end; }
.dest-itin-photo:nth-child(4n+3) { justify-content: flex-start; }
.dest-polaroid {
	margin: 0;
	width: 100%;
	max-width: 420px;
}
.dest-polaroid__inner {
	background: #fff;
	padding: 12px 12px 14px;
	border-radius: 2px;
	box-shadow:
		0 16px 34px -12px rgba(20, 40, 30, 0.30),
		0 4px 10px rgba(20, 40, 30, 0.10);
	transform: rotate(var(--card-tilt, 0deg));
}
.dest-polaroid__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1px;
}
.dest-polaroid__caption {
	margin-top: 10px;
	padding: 0 4px 2px;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: var(--green-800);
}
/* Crédits photo (ex. Wikimedia Commons) : mention légale regroupée en
   bas de fiche, pas sous chaque photo — discrète, jamais en manuscrit. */
.dest-photo-credits {
	max-width: 420px;
	margin: 32px auto 0;
	padding-top: 14px;
	border-top: 1px solid var(--border-subtle);
	font-family: var(--font-text);
	font-size: 0.65rem;
	line-height: 1.6;
	letter-spacing: 0.01em;
	text-align: center;
	color: var(--sand-500);
}
.dest-photo-credits__label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.dest-photo-credits__label::after {
	content: ":";
}
.dest-photo-credits a {
	color: inherit;
}

/* ============================================================
   RECOMMANDATIONS — post-it contour vert (2026-08-13, 3e passe) :
   fond transparent (le papier de .dest-card se voit à travers, comme
   .dest-itin-table__row td). Contour, ruban et texte tous en
   --green-500 (pas --green-300, le vert le plus clair du nuancier :
   sur le papier clair de la carte, il ne tiendrait qu'environ 2.6:1 —
   sous le seuil AA. --green-500 tient 6:1+, même arbitrage déjà fait
   pour le panneau d'avis Google, cf. plus haut dans ce fichier —
   PREMORTEM accessibilité, clientèle 50+, CLAUDE.md).
   ============================================================ */
.dest-reco__grid {
	--dest-reco-gap: clamp(16px, 2.5vw, 24px);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dest-reco-gap);
	/* Marge du haut généreuse : laisse la place au ruban qui déborde
	   au-dessus de chaque post-it (même logique que .google-reviews__list). */
	margin-top: clamp(26px, 3.5vw, 40px);
}
@media (min-width: 48rem) {
	.dest-reco__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	/* Seulement 2 cartes (une catégorie sans contenu dans la brochure) :
	   on les centre côte à côte à leur largeur habituelle plutôt que de
	   les laisser calées à gauche avec une colonne vide à droite. */
	.dest-reco__grid--pair {
		display: flex;
		justify-content: center;
	}
	.dest-reco__grid--pair .dest-reco__card {
		flex: 0 1 calc((100% - 2 * var(--dest-reco-gap)) / 3);
	}
}
.dest-reco__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(20px, 2.4vw, 28px);
	background-color: transparent;
	border: 2px solid var(--green-500);
	border-radius: 2px;
}
/* Rotation légère alternée, sous le plafond de 3° (même règle que
   .google-reviews__card / .dest-itin-table, PREMORTEM accessibilité). */
.dest-reco__card:nth-child(3n+1) { transform: rotate(-1.2deg); }
.dest-reco__card:nth-child(3n+2) { transform: rotate(1deg); }
.dest-reco__card:nth-child(3n)   { transform: rotate(-0.8deg); }

/* Ruban adhésif — même technique que .google-reviews__card-tape
   (masque CSS sur assets/svg/deco/tape.svg). Angle visé (sens horaire) :
   13° pour le 1er et le 3e ruban, 22° pour le 2e.
   Rotation LOCALE compensée par le tilt de la carte parente (elle
   aussi un transform: rotate(), qui s'additionne à celui du ruban —
   .dest-reco__card:nth-child(3n+1) est à -1.2°, nth-child(3n+2) à +1°,
   nth-child(3n) à -0.8°, cf. ci-dessus) pour que l'angle RENDU à
   l'écran soit bien 13°/22°, pas juste la valeur locale (cf. bug du
   2026-08-13 sur l'essai à 1°/4°). */
.dest-reco__card:nth-child(3n+1) .dest-reco__card-tape { transform: translateX(-50%) rotate(14.2deg); }
.dest-reco__card:nth-child(3n+2) .dest-reco__card-tape { transform: translateX(-50%) rotate(21deg); }
.dest-reco__card:nth-child(3n)   .dest-reco__card-tape { transform: translateX(-50%) rotate(13.8deg); }
.dest-reco__card-tape {
	position: absolute;
	z-index: 1;
	top: -26px;
	left: 50%;
	width: 74px;
	height: 52px;
	background-color: var(--green-500);
	filter: drop-shadow(0 2px 3px rgba(33, 36, 15, 0.4));
	-webkit-mask: url('../svg/deco/tape.svg') center / contain no-repeat;
	        mask: url('../svg/deco/tape.svg') center / contain no-repeat;
	pointer-events: none;
}
.dest-reco__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-full);
	background: var(--green-500);
	color: var(--sand-50);
	box-shadow: 0 6px 14px -6px rgba(33, 36, 15, 0.5);
}
.dest-reco__icon .icon {
	width: 22px;
	height: 22px;
}
.dest-reco__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--green-500);
	margin: 2px 0 0;
	line-height: 1.15;
}
.dest-reco__body {
	font-family: var(--font-text);
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--green-500);
}
.dest-reco__body p { margin: 0; }
.dest-reco__body p + p { margin-top: 0.6em; }
.dest-reco__body ul {
	margin: 0;
	padding-left: 1.1em;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dest-reco__body li { padding-left: 2px; }

/* ============================================================
   INTRO — pastille « séjour idéal »
   ============================================================ */
/* Pastille « séjour idéal » (fond clair). */
.dest-intro__meta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 8px 16px 8px 12px;
	width: fit-content;
	border-radius: var(--radius-full);
	background: var(--sand-100);
	border: 1px solid var(--sand-200);
	font-family: var(--font-text);
	font-size: var(--text-sm);
	color: var(--green-800);
}
.dest-intro__meta-icon {
	display: inline-flex;
	color: var(--accent-500);
}
.dest-intro__meta-icon .icon {
	width: 17px;
	height: 17px;
}
.dest-intro__meta-label {
	font-weight: var(--weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 11px;
	color: var(--sand-500);
}
.dest-intro__meta-value {
	font-weight: var(--weight-semibold);
}

/* ============================================================
   FICHE DESTINATION PLEINE LARGEUR — titre du hero + Back
   ============================================================ */

/* Bouton « Back » fixe : pastille en verre, flèche + libellé visibles */
.dest-app .tour-back {
	top: clamp(18px, 2.6vw, 30px);
	left: clamp(18px, 2.6vw, 30px);
	padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
	gap: var(--space-2);
	font-size: var(--text-sm);
	background-color: rgba(33, 36, 15, 0.5);
	border: 1px solid rgba(255, 249, 246, 0.22);
	box-shadow: 0 6px 18px rgba(33, 36, 15, 0.32);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
}
.dest-app .tour-back:hover {
	transform: translateY(-1px);
	background-color: rgba(33, 36, 15, 0.64);
}
.dest-app .tour-back__icon {
	width: var(--icon-md);
	height: var(--icon-md);
}

/* ============================================================
   BLOC ÉDITORIAL SUR LE HERO
   Kicker + titre : posés en bas à gauche.
   Catégories : une seule ligne de pastilles texte, centrée sous le hero.
   ============================================================ */
.dest-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: clamp(18px, 3.5vh, 36px);
	padding: clamp(24px, 5vw, 52px) clamp(20px, 5vw, 64px) clamp(20px, 3vw, 38px);
	pointer-events: none;
}
.dest-hero__lockup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(8px, 1.2vw, 14px);
	max-width: 60rem;
	padding-left: clamp(0px, 2vw, 28px);
}

.dest-hero__title {
	position: relative;
	display: inline-block;
	width: fit-content;
	max-width: min(100%, 18ch);
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 6.5vw, 5.2rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--sand-50);
	text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.dest-hero__title-text { display: inline; }
.dest-hero__title-underline {
	display: block;
	width: 100%;
	height: 14px;
	margin-top: 6px;
	color: var(--accent-500);
	opacity: 0.95;
}

@media (max-width: 47.999rem) {
	.dest-hero__title { max-width: 100%; }
}

/* ============================================================
   PAGE « DESIGN YOUR TRIP » — hero + calculateur « builder »
   Le calculateur réutilise les .tm-calc-* ; .tm-dyt redessine.
   ============================================================ */

/* --- En-tête épuré : juste le titre, puis directement l'outil --- */
.tm-dyt-head {
	max-width: 52rem;
	margin-bottom: var(--space-8);
}

.tm-dyt-head__title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.4rem);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
}

/* --- Calculateur « builder » (scopé .tm-dyt) --- */

/* Étapes numérotées dans le formulaire */
.tm-dyt-block {
	padding-top: var(--space-8);
	border-top: 1px solid var(--border-subtle);
}

.tm-dyt-block:first-child,
.tm-dyt-head + .tm-dyt-block {
	padding-top: 0;
	border-top: none;
}

.tm-dyt-block__legend {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 0;
	margin-bottom: var(--space-2);
}

.tm-dyt-block__num {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--radius-full);
	background-color: var(--accent-500);
	color: var(--sand-50);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: var(--text-sm);
}

.tm-dyt-block__title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--text-primary);
}

/* Packages en grille 2 colonnes */
@media (min-width: 40rem) {

	.tm-dyt .tm-calc-dest-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2);
	}
}

.tm-dyt .tm-calc-dest-chip {
	height: 100%;
}

/* Thème vert : puces non sélectionnées en surface verte (l'état
   sélectionné garde le terracotta — ciblage [aria-pressed="false"]
   pour ne pas l'écraser par la cascade). */
.tm-dyt .tm-calc-dest-chip[aria-pressed="false"] {
	background-color: var(--green-800);
	border-color: var(--green-600);
}

.tm-dyt .tm-calc-dest-chip[aria-pressed="false"]:hover {
	border-color: var(--green-400);
}

.tm-dyt .tm-calc-dest-chip[aria-pressed="false"] .tm-calc-dest-chip__action {
	background-color: var(--green-600);
}

/* --- Panneau « ticket » sticky --- */
.tm-dyt-panel {
	border: 1px solid var(--border-subtle);
	box-shadow: var(--shadow-card);
}

.tm-dyt .tm-calc-panel__empty {
	border: 1px dashed var(--border-subtle);
	border-radius: var(--radius-md);
}

/* Pas de cadre : le prix lui-même, en crème, est le point focal. */
.tm-dyt .tm-calc-price-block {
	background-color: transparent;
	border: none;
	box-shadow: none;
	padding-block: var(--space-2);
}

.tm-dyt .tm-calc-price-block__label,
.tm-dyt .tm-calc-price-block__meta {
	color: var(--text-muted);
}

.tm-dyt .tm-calc-price-block__price {
	color: var(--sand-50);
	font-size: clamp(2.75rem, 6vw, 3.75rem);
}

/* ============================================================
   SÉLECTEUR DE NIVEAU — les 3 cartes, toujours dépliées
   Nom, prix, badge, caractère et différenciateur clé d'un coup d'œil
   pour les 3 gammes ; la carte choisie en surbrillance, sa liste
   complète d'inclusions affichée dessous.
   ============================================================ */
.tm-lvl-select {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.tm-lvl-select__label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	margin: 0;
}

.tm-lvl__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* Grille des 3 cartes */
.tm-lvl-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-2);
}

.tm-lvl-card {
	display: block;
	position: relative;
	cursor: pointer;
}

/* justify-content: flex-start (pas center) — Warbler n'a pas de badge,
   les 3 cartes doivent quand même aligner nom/prix sur la même ligne
   plutôt que se recentrer différemment selon leur contenu. */
.tm-lvl-card__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-2);
	height: 100%;
	padding: var(--space-3) var(--space-2);
	border-radius: var(--radius-md);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	text-align: center;
	transition: box-shadow .15s var(--ease-soft);
}

.tm-lvl-card:hover .tm-lvl-card__inner {
	box-shadow: inset 0 0 0 1px var(--green-300);
}

/* Combinateur ~ (pas +) : le badge, optionnel, peut s'intercaler entre
   l'input et .tm-lvl-card__inner dans le DOM (Warbler n'en a pas). */
.tm-lvl__input:checked ~ .tm-lvl-card__inner {
	box-shadow: inset 0 0 0 2px var(--accent-500);
}

.tm-lvl__input:focus-visible ~ .tm-lvl-card__inner {
	box-shadow: var(--focus-ring);
}

.tm-lvl-card__name {
	font-size: var(--text-sm);
	color: var(--text-primary);
	line-height: 1.2;
}

.tm-lvl-card__price {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.tm-lvl__input:checked ~ .tm-lvl-card__inner .tm-lvl-card__price {
	color: var(--accent-500);
}

.tm-lvl-card__price:empty {
	display: none;
}

/* Ruban badge, au-dessus de la carte (pas dans son flux) — chevauche le
   bord haut, pour ne jamais décaler l'alignement nom/prix des 3 cartes
   selon qu'elles ont un badge ou non. */
.tm-lvl-card__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 3px 10px;
	border-radius: var(--radius-full);
	background-color: var(--accent-500);
	color: var(--sand-50);
	font-size: 0.5625rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(33, 36, 15, 0.25);
}

/* Caractère de la gamme — toujours visible, sur les 3 cartes. */
.tm-lvl-card__tagline {
	font-size: var(--text-xs);
	color: var(--text-muted);
	line-height: var(--leading-snug);
}

/* Inclusions du niveau choisi (une seule visible, pilotée par le JS) */
.tm-lvl-inc[hidden] {
	display: none;
}

.tm-lvl-inc {
	padding-top: var(--space-3);
	border-top: 1px solid var(--border-subtle);
}

.tm-lvl__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.tm-lvl__inc {
	position: relative;
	padding-left: var(--space-5, var(--space-4));
	font-size: var(--text-sm);
	color: var(--text-primary);
	line-height: var(--leading-snug);
}

.tm-lvl__inc::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--accent-500);
}

/* ============================================================
   SÉLECTEUR DE DEVISE — taux en direct ($ par défaut · € £ Q)
   Discret (2026-08-13) : plus de pastille pleine ni de fond — un simple
   groupe de lettres à côté du libellé « Estimated total », la devise
   active se distingue par un soulignement, pas par un bloc de couleur.
   ============================================================ */
.tm-cur {
	display: inline-flex;
	flex-shrink: 0;
	gap: 2px;
}

.tm-cur__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 var(--space-1);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--sand-300);
	opacity: 0.55;
	font-family: var(--font-text);
	font-size: var(--text-xs);
	line-height: 1;
	cursor: pointer;
	transition: opacity .18s var(--ease-soft), color .18s var(--ease-soft);
}

.tm-cur__btn:hover {
	opacity: 0.85;
	color: var(--sand-50);
}

.tm-cur__btn.is-active {
	opacity: 1;
	color: var(--sand-50);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	text-decoration-color: var(--accent-500);
}

.tm-cur__btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* ============================================================
   LANGUE DU GUIDE — 3 options (English / Español / Français)
   ============================================================ */
.tm-lang {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.tm-lang__opts {
	display: flex;
	gap: var(--space-2);
}

.tm-lang__opt {
	flex: 1;
	cursor: pointer;
}

.tm-lang__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.tm-lang__label {
	display: block;
	text-align: center;
	padding: var(--space-2);
	border-radius: var(--radius-md);
	box-shadow: inset 0 0 0 1px var(--border-subtle);
	color: var(--text-muted);
	font-size: var(--text-sm);
	transition: box-shadow .15s, color .15s, background-color .15s;
}

.tm-lang__opt:hover .tm-lang__label {
	color: var(--text-primary);
	box-shadow: inset 0 0 0 1px var(--green-300);
}

.tm-lang__input:checked + .tm-lang__label {
	color: var(--sand-50);
	background-color: var(--accent-500);
	box-shadow: inset 0 0 0 1px var(--accent-500);
}

.tm-lang__input:focus-visible + .tm-lang__label {
	box-shadow: var(--focus-ring);
}

/* Réassurance en légende serrée sous le CTA (2026-08-13) — marge courte,
   pas le gap-6 du flex parent : elle doit lire comme une réponse à la
   question du bouton juste au-dessus, pas comme une section à part. */
.tm-dyt-panel__trust {
	margin: var(--space-3) 0 0;
	font-size: var(--text-xs);
	color: var(--text-muted);
	text-align: center;
	line-height: var(--leading-relaxed);
}

/* --- Teaser estimateur (page Tailor-Made). Fond vert par défaut
   depuis le 2026-08-02 (section--light retiré du template) : la
   section a été remontée juste après les Destinations claires, elle
   repasse au vert pour garder l'alternance. --- */
.tm-est-teaser {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
}

.tm-est-teaser__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: center;
}

@media (min-width: 64rem) {

	.tm-est-teaser__inner {
		grid-template-columns: 1.4fr 1fr;
		gap: var(--space-16);
	}
}

.tm-est-teaser__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
}

.tm-est-teaser__text {
	color: var(--text-muted);
	max-width: 40rem;
}

.tm-est-teaser__actions {
	margin-top: var(--space-2);
}

.tm-est-teaser__points {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tm-est-teaser__point {
	padding: var(--space-3) 0;
	border-top: 1px solid var(--border-subtle);
	font-size: var(--text-base);
	color: var(--text-primary);
	line-height: var(--leading-snug);
}

.tm-est-teaser__point:last-child {
	border-bottom: 1px solid var(--border-subtle);
}

/* Top resserré : l'outil (page Design your trip) arrive vite sous le titre. */
.tm-calculator.tm-dyt {
	padding-top: var(--space-12);
}

/* ============================================================
   BARRE D'ESTIMATION COLLANTE (mobile) — page Design your trip
   Prix live + CTA toujours accessibles quand on a quitté le
   panneau. Masquée sur desktop (le panneau sticky suffit).
   ============================================================ */
.tm-dyt-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-header);
	padding: var(--space-3) 0;
	background-color: var(--green-700);
	border-top: 1px solid var(--green-500);
	box-shadow: 0 -6px 24px rgba(33, 36, 15, 0.28);
	visibility: hidden;
	transform: translateY(110%);
	transition: transform var(--duration-medium) var(--ease-soft), visibility var(--duration-medium);
}

.tm-dyt-bar.is-visible {
	visibility: visible;
	transform: translateY(0);
}

@media (min-width: 64rem) {

	.tm-dyt-bar {
		display: none;
	}
}

.tm-dyt-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.tm-dyt-bar__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tm-dyt-bar__label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sand-300);
}

.tm-dyt-bar__price {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--sand-50);
	line-height: 1.1;
	white-space: nowrap;
}

.tm-dyt-bar__cta {
	flex: none;
}

/* ============================================================
   EXPLORE GUATEMALA — carte + carnet (accueil, signature)
   Design System — section Explore. Carte interactive à gauche,
   carnet de voyage à droite. Un clic sur une région tourne la
   page du carnet (flip CSS 3D) ; le contenu vient d'un <template>
   déjà présent dans le DOM (assets/js/explore.js).
   ============================================================ */

.explore {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	padding-block: var(--section-pad-default);
	/* Taille du motmot. Bornée par l'angle libre de la carte où il se
	   pose : au-delà de 80px sur une carte de 398px, il déborde sur le
	   Petén — il doit rester sur le papier. */
	--motmot-size: 80px;
}

/* Hero-carnet (étape 2) : remplace l'ancien hero photo feature-stack —
   même logique de hauteur que .feature-stack--viewport (le header
   fixe flotte par-dessus, transparent-sur-hero réutilisé via
   assets/js/main.js), padding immersif pour respirer sous le header. */
.explore--hero {
	min-height: 100svh;

	/* Le support sur lequel le carnet est posé : un papier texturé, avec
	   les ombres portées d'un feuillage dans deux angles. Il remplace
	   l'aplat --sand-50 du hero — le carnet (#fffded) s'en détache
	   maintenant au lieu de s'y fondre. La couleur sous l'image est la
	   teinte moyenne de celle-ci : si elle tarde, rien ne saute.
	   `cover`, pas `repeat` : les ombres sont uniques et placées, une
	   mosaïque les trahirait. Et jamais `fixed` — un fond qui glisse au
	   défilement serait une cinquième animation (CONCEPT.md invariant 2).

	   Les ombres se tiennent AUX BORDS — une liane qui descend le long du
	   bord droit, une palme dans l'angle bas-gauche — et ne mordent jamais
	   sur le centre. Dans la toute première version le feuillage occupait
	   l'angle haut-droit en plein : il passait derrière la navigation ET
	   derrière l'angle du carnet, où il se disputait la place avec l'ombre
	   portée du livre. Ici la scène — titre, carte, carnet — est posée sur
	   du papier nu.
	   Nom de fichier incrémenté, pas remplacé : le CDN ne versionne pas
	   les images appelées depuis le CSS, un même nom aurait servi
	   l'ancienne texture jusqu'à purge manuelle. */
	background: var(--sand-150) url('../img/fond-carnet-8.webp') center / cover no-repeat;
	/* Hauteur du header fixe transparent qui flotte par-dessus le hero.
	   Le livre ne se mesure pas au haut de l'écran mais au bord bas du
	   header : c'est là que commence la scène pour l'œil. var(--header-h)
	   (assets/css/tokens.css) suit les paliers mobiles automatiquement —
	   avant, cette valeur restait figée à la hauteur desktop même sur
	   petit écran, le carnet se recentrait donc sur un repère faux dès
	   que le header mobile changeait de taille. */
	--explore-header-h: var(--header-h);

	/* Le livre est posé au milieu de ce qui reste sous le header : même
	   air au-dessus de son angle haut-gauche qu'en dessous de son angle
	   bas-droit. D'où la dissymétrie des deux paddings — leur écart vaut
	   exactement la hauteur du header, ce qui recentre la scène sur la
	   zone visible sans qu'aucune valeur ne soit mesurée en JavaScript.
	   Leur somme reste sous les 9rem retirés plus bas : le carnet ne perd
	   pas un pixel au change. */
	padding-top: calc(var(--explore-header-h) + var(--space-4));
	padding-bottom: var(--space-4);
	display: flex;
	align-items: center;

	/* Hauteur qui reste pour la scène, une fois retirés les deux
	   paddings. Le titre n'est plus compté : il a rejoint la colonne de
	   la carte, donc il ne prend plus de hauteur au carnet. C'est ce qui
	   fait tenir le hero dans un écran sans le mesurer en JavaScript
	   (PREMORTEM, Étape 2). */
	--explore-stage-max: calc(100svh - 9rem);
}

.explore--hero .explore__inner {
	width: 100%;
}

/* Le titre est dans la colonne de la carte : il en prend la largeur, et
   sa hauteur ne coûte plus rien au carnet. Pas de marge propre — c est
   l ecart de la colonne qui espace, sinon les deux s additionnent. */
.explore__header {
	margin-bottom: 0;
}

/* Calibré pour tenir sur UNE ligne dans sa colonne : « With experts on nature
   & culture » mesure 437px à 27.2px, la colonne en fait 448 (462px à
   29.6px : il se cassait en deux, et la carte perdait 33px). Deux lignes
   ne coûteraient plus rien au carnet, mais un titre qui se casse à côté
   d'un livre posé bien droit, ça se voit. */
.explore__title {
	margin-top: var(--space-2);
	font-size: clamp(1.4rem, 2.1vw, 1.7rem);
	text-wrap: balance;
}

.explore__stage {
	position: relative; /* ancre pour .explore__motmot */
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
	align-items: start;
}

@media (min-width: 64rem) {
	/* Deux objets posés côte à côte, dimensionnés par leur contenu et
	   groupés au centre. Les colonnes fixes d'avant laissaient une bande
	   crème inutile entre la carte et le carnet : ici l'écart est un
	   écart choisi, pas un reste de grille. */
	.explore__stage {
		grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
		align-items: center;
		gap: clamp(var(--space-8), 3vw, var(--space-16));
	}

	/* Carte et carnet se règlent sur la même hauteur disponible : ils ne
	   dépassent jamais l'écran, et gardent chacun leurs proportions —
	   0.9097 pour la viewBox de la carte, 1.6256 pour la double page.
	   Bornés aussi en largeur : au-delà, la carte devient un aplat et le
	   carnet écrase tout le reste. */
	/* `width` et pas `max-width` : dans une colonne dimensionnée par son
	   contenu, un SVG sans attributs width/height retombe sur les 300px
	   par défaut des éléments remplacés — la carte restait une vignette
	   quelle que soit la borne. La carte partage sa colonne avec le
	   titre : elle se règle sur la hauteur restante, pas sur la scène. */
	/* La carte prend tout ce que la colonne lui laisse une fois le titre
	   et la note posés (environ 10rem à eux deux, écarts compris — la
	   note occupe désormais une vraie ligne du flux) — pas un pouce de
	   moins. Centrée : le titre et la note se lisent à gauche, le pays se
	   tient au milieu. */
	.explore--hero .explore__side {
		--explore-map-w: min(100%, calc((var(--explore-stage-max) - 10rem) * 0.9097));
	}

	.explore--hero .explore__map {
		width: var(--explore-map-w);
	}

	/* Le carnet prend toute la hauteur de la scène, et toute la largeur
	   que lui laisse la colonne de gauche. C'est lui le sujet. */
	.explore--hero .explore__notebook {
		width: min(100%, calc(var(--explore-stage-max) * 1.6256));
	}
}

/* Le carnet est posé, pas aligné : une inclinaison d'un degré et demi,
   assez pour qu'il ait été déposé là par quelqu'un, trop peu pour se
   remarquer. Ce n'est pas de l'usure simulée (CONCEPT.md invariant 6),
   c'est la pose de l'objet. Appliquée ici, hors du contexte 3D de
   .explore__notebook-frame : le tourné de page continue de pivoter
   droit, à l'intérieur du livre incliné. */
.explore__notebook {
	position: relative; /* repère de .explore__book-shadow */
	transform: rotate(1.5deg);
}

/* --- L'ombre du livre ---
   Aux bornes exactes du livre, mesurées dans carnet-spread.webp
   (26,24 → 2511,1533 sur 2536 × 1560). Deux ombres : l'une courte et
   serrée, le contact ; l'autre longue et diffuse, le volume. C'est ce
   couple qui donne l'épaisseur — une seule ombre moyenne ne fait qu'un
   autocollant décollé.

   Aucun fond : `box-shadow` ne dessine qu'à l'extérieur de la boîte,
   l'intérieur reste transparent et le papier du livre se voit par-dessus.

   Elle est ancrée à DROITE : c'est le bord qui ne bouge jamais. Le carnet
   fermé n'occupe que la moitié droite du cadre (49.803 % sur les 98.03 %
   du livre entier, soit 0.508), et l'ombre s'élargit vers la gauche à
   mesure que la couverture découvre la page. */
.explore__book-shadow {
	position: absolute;
	top: 1.538%;
	bottom: 1.667%;
	left: 1.025%;
	right: 0.946%;
	border-radius: 5px;
	transform-origin: right center;
	box-shadow:
		0 4px 5px rgba(74, 61, 30, 0.30),
		0 28px 44px rgba(74, 61, 30, 0.34);
	pointer-events: none;
}

/* Carnet fermé : l'ombre a la silhouette du carnet posé, pas celle du
   livre ouvert. */
.explore--closed .explore__book-shadow {
	transform: scaleX(0.508);
}


/* --- Côté carte : titre, pays, note — dans cet ordre --- */
.explore__side {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);

	/* La largeur du pays, tenue en un seul endroit : la carte s'y règle, et
	   la note dessous s'y règle aussi. C'est ce qui les rend solidaires —
	   la note est écrite SOUS LA CARTE, pas sous la colonne, et son bord
	   droit tombe sur celui du pays quelle que soit la largeur d'écran. */
	--explore-map-w: 420px;
}

/* --- La note sous la carte et sa flèche ---
   Une main a écrit sous la carte ce qu'elle a de particulier. Ce n'est
   pas une consigne : c'est ce qu'on note dans un carnet. Manuscrit parce
   que c'est une annotation, jamais une interface.

   Une seule ligne, tout dans le flux : la flèche puis le mot, deux boîtes
   voisines que rien ne peut faire se recouvrir. Plus de position absolue,
   plus de décalages en pixels à rattraper — la version d'avant sortait la
   flèche du flux et le trait finissait par barrer le texte.

   Le bloc a la largeur du pays et se centre comme lui : la note reste
   sous la carte, et pas quelque part dans la colonne — sinon elle part
   flotter dans le vide dès que la colonne est plus large que la carte
   (le cas de tout l'affichage à une colonne).

   Les 80px vers la droite décalent la note ET sa flèche d'un seul bloc :
   elle n'est pas posée au milieu au cordeau, et la flèche continue de
   viser les départements curés — les deux ne peuvent pas se désolidariser
   puisque c'est le groupe entier qui bouge. */
.explore__hint {
	width: var(--explore-map-w);
	max-width: 100%;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	transform: translateX(80px);
	color: var(--green-700);
	font-family: var(--font-display);
	font-size: var(--text-base);
	line-height: 1.3;
}

/* La flèche du thème pointe vers la droite : on la retourne dans un
   miroir, puis on la relève — elle part du mot et remonte vers les
   départements curés. `rotate() scaleX()` se lit dans l'ordre du geste :
   le miroir d'abord, l'inclinaison ensuite.

   Sa hauteur se déduit de sa largeur par le rapport de la viewBox : elle
   ne se déforme à aucune taille. Tournée, elle déborde de sa boîte vers
   le haut — dans l'écart qui la sépare de la carte, où il n'y a rien.

   Les 13px de remontée sont EN TÊTE de la liste, donc appliqués en
   dernier : ils se lisent dans le repère de la ligne, pas dans celui de
   la flèche inclinée. Elle monte donc bien à la verticale de l'écran, et
   non de biais le long de son propre axe. Purement visuel : la ligne
   garde sa hauteur, et le texte à côté ne bouge pas. */
.explore__hint-arrow {
	flex: none;
	width: clamp(52px, 15%, 72px);
	aspect-ratio: 52.389 / 17.836;
	background-color: currentColor;
	opacity: 0.85;
	-webkit-mask: var(--deco) center / contain no-repeat;
	        mask: var(--deco) center / contain no-repeat;
	transform: translateY(-13px) rotate(28deg) scaleX(-1);
}

/* Posée à la main, pas alignée à la règle : assez inclinée pour qu'on
   l'ait écrite, trop peu pour gêner la lecture — la clientèle a 50 ans
   et plus, le mot doit rester net.

   Remonté de 7px pour venir se poser au bout de la flèche : comme pour
   elle, la translation est en tête de liste, donc lue dans le repère de
   la ligne et non dans celui du mot penché. */
.explore__hint-text {
	transform: translateY(-7px) rotate(-2.5deg);
}

/* Assez grande pour qu'on distingue les régions et qu'on ait envie d'y
   toucher. Elle reste l'outil — le carnet, à côté, reste le sujet. */
.explore__map {
	position: relative; /* repère commun au SVG, aux épingles et au motmot */
	max-width: var(--explore-map-w);
	margin-inline: auto;
}

/* Le pays est découpé et posé sur la table, comme le carnet à côté : même
   couple d'ombres, même lumière. C'est ce qui le détache du fond texturé,
   sans rien ajouter autour — ni cadre, ni panneau. Un support rectangulaire
   aurait donné plus de contraste encore, mais il aurait introduit la seule
   boîte de la page, face à un carnet qui n'a que des bords libres.

   `drop-shadow` et non `box-shadow` : l'ombre épouse la silhouette du
   pays. Elle ne se dessine qu'autour du contour extérieur — l'intérieur
   du tracé est opaque, donc aucune frontière interne ne projette. */
.explore__map-svg {
	display: block;
	filter:
		drop-shadow(0 2px 2px rgba(74, 61, 30, 0.22))
		drop-shadow(0 12px 20px rgba(74, 61, 30, 0.26));
}

/* Couche des épingles : elle recouvre exactement le SVG (mêmes bornes,
   donc les pourcentages calculés sur la viewBox tombent juste), mais
   laisse passer les clics partout sauf sur les épingles. */
.explore__pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* --- Carte : SVG du thème inliné, départements curatés interactifs --- */
.explore__map svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Le papier de la carte, et ses frontières. Le trait est assez soutenu
   pour que les départements se lisent un par un : c'est un document, pas
   une silhouette pleine. Il était auparavant crème sur sable — un creux
   plutôt qu'un trait, et le découpage du pays disparaissait avec lui. */
.explore__map .gt-dept {
	fill: var(--sand-125);
	stroke: var(--sand-400);
	stroke-width: 1.1px;
	stroke-opacity: 0.55;
	transition: fill var(--duration-medium) var(--ease-soft);
}

/* Régions curatées uniquement (data-department posé côté PHP) :
   les autres départements restent au fill neutre ci-dessus, sans
   tabindex — inertes, jamais dans l'ordre de tabulation. Au repos, un
   vert discret cerné d'un trait plus marqué (esprit encre, CONCEPT.md
   §3) plutôt qu'un aplat saturé ; la région active seule prend le vert
   plein — « vous êtes ici ». */
/* Plus rien n'est écrit sur les régions : la contrainte de contraste du
   texte tombe, et la carte peut redevenir claire. C'est l'écart de
   teinte qui porte tout le sens — les régions qu'on peut ouvrir sont en
   vert clair, celle qui est ouverte dans le carnet est seule en vert
   sombre. Une carte à l'encre où une page est marquée. */
.explore__map [data-department] {
	fill: var(--green-300);
	stroke: var(--green-600);
	stroke-width: 1.4px;
	stroke-opacity: 0.9;
	cursor: pointer;
	transition: fill var(--duration-medium) var(--ease-soft);
}

/* `.is-hover` est posée par explore.js sur TOUS les tracés d'une même
   région : Las Verapaces s'allume d'un bloc, Alta et Baja ensemble, au
   lieu que chaque moitié réagisse pour elle seule. Le `:hover` du CSS
   reste comme repli sans JavaScript. */
.explore__map [data-department]:hover,
.explore__map [data-department]:focus-visible,
.explore__map [data-department].is-hover {
	fill: var(--green-400);
}

.explore__map [data-department].is-visited {
	fill: var(--green-400);
}

.explore__map [data-department].is-current {
	fill: var(--green-700);
	stroke: var(--green-700);
}

/* Focus sur un <path> : le navigateur dessine son anneau autour de la
   BOÎTE ENGLOBANTE, pas autour du tracé — un rectangle noir en travers
   de la carte, y compris au simple clic à la souris. Il est neutralisé
   ici, et remplacé par un marquage qui suit la forme du département.
   Le focus n'est jamais supprimé : il change seulement de matière. */
.explore__map [data-department]:focus {
	outline: none;
}

.explore__map [data-department]:focus-visible {
	outline: none;
	stroke: var(--accent-500);
	stroke-width: 3px;
	stroke-opacity: 1;
}

/* Cible tactile élargie sur pointeur grossier (doigt) : un trait large
   et transparent agrandit la zone de détection des petits départements
   (ex. Sacatepéquez) sans changer le rendu visuel (PREMORTEM risque D).
   Amélioration, pas une garantie ≥44px sur les tracés les plus petits —
   la légende (garantie ≥44px) reste la cible fiable sur mobile. */
@media (pointer: coarse) {
	.explore__map [data-department] {
		stroke: transparent;
		stroke-width: 14px;
		stroke-linejoin: round;
	}
}

/* --- Motmot : la planche de 4 poses ---
   Un seul fichier (assets/img/motmot-sprite.webp) : posé, élan, ailes
   hautes, ailes basses — dessinées d'après le logo et recalées sur la
   pointe du bec, le seul point stable des quatre (le corps, lui, passe
   de la verticale à l'horizontale : c'est le décollage). Le cadrage se
   fait au `background-position`, jamais au découpage d'image.
   Il ne suit pas la souris, ne respire pas, ne bouge plus une fois posé :
   l'invariant 1 (« rien ne bouge sans un geste du visiteur ») ne souffre
   qu'une exception, l'arrivée elle-même. --- */
.explore__motmot {
	position: absolute;
	z-index: 3;
	/* Sa place définitive : perché sur la marche du Petén, à l'endroit où
	   la frontière fait un ressaut horizontal — le seul rebord de la
	   carte qui ressemble à une branche. Relevé sur le tracé lui-même :
	   le bord supérieur du Petén tient à y = 194 entre x = 218 et x = 315
	   (viewBox 982.1 × 1079.6), puis remonte d'un coup à y = 60.

	   Le point de pose est à 24.2 % / 17.97 % : le tiers gauche de la
	   marche, et non son milieu. Son bec avance de 22px au-delà de ses
	   pattes ; posé au milieu, il venait frôler le bloc du Petén à 2px
	   près. Décalé, il dégage de 12px et l'oiseau reste bien sur la
	   marche (large de 39px).

	   On retire du point de pose l'écart entre le coin du dessin et les
	   pattes de l'oiseau — mesuré dans la planche : 71.6 % de sa largeur,
	   60.8 % de sa hauteur. Le point d'appui suit ainsi la carte quand
	   elle change de taille, et l'oiseau suit sa propre taille : ses
	   pattes restent sur la marche dans tous les cas.

	   Immobile une fois posé — il n'a d'animation que pendant l'arrivée,
	   jamais autrement (CONCEPT.md invariant 1). */
	left: calc(24.2% - var(--motmot-size) * 0.716);
	top: calc(17.97% - var(--motmot-size) * 0.608 * 323 / 256);
	width: var(--motmot-size);
	aspect-ratio: 256 / 323;
	background-image: url('../img/motmot-sprite.webp');
	background-repeat: no-repeat;
	background-size: 400% 100%; /* 4 poses sur une rangée */
	background-position: 0 0;   /* pose 1 : posé, ailes repliées */
	pointer-events: none;
}

/* prefers-reduced-motion : le kill-switch global (base.css) écrase les
   DURÉES mais pas les DÉLAIS, et l'oiseau resterait invisible pendant
   ceux-ci (fill-mode: both). Ici tout est neutralisé : il est à sa place
   dès le premier rendu (CONCEPT.md §4 — livre statique dès le début). */
@media (prefers-reduced-motion: reduce) {
	.explore__motmot {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* Pas de règle --motmot-size ici : .explore__side (qui porte la carte
   et le motmot) est masqué en dessous de 64rem, voir plus bas dans ce
   fichier — un réglage de taille pour un élément jamais peint serait
   mort à la lecture. */

/* --- Carnet : le livre physique + mécanique de tourné de page (3D CSS) ---
   La double page réelle (assets/img/carnet/carnet-spread.webp — vraie
   transparence, ombre portée intégrée) donne sa taille au cadre ; le
   contenu des régions est du HTML posé par-dessus. Le support d'accueil
   est le papier : la composition vient de la meta « Page du carnet »
   (_motmot_carnet_spread) quand elle existe, sinon du collage sombre
   rabattu vers l'encre (PREMORTEM §1.C révisé — étape 1 du carnet). */
.explore__notebook-frame {
	position: relative;
	z-index: 1; /* au-dessus de .explore__book-shadow */
	isolation: isolate;
	/* Perspective longue, et son point de fuite posé sur la RELIURE —
	   pas au centre du cadre. À 2400px vue du centre, la feuille qui
	   tourne était à 350px hors de l'axe : son bord libre fonçait vers
	   l'œil et la page grossissait de 10% en pleine rotation. Ramenée sur
	   la charnière et allongée, la même rotation ne l'enfle plus que de
	   4% — un feuillet qui se soulève, pas une page qui zoome. */
	perspective: 5200px;
	perspective-origin: 49.251% 50%;
}


/* La texture porte le livre : elle dimensionne le cadre, tout le reste
   est calé dessus en absolu. Jamais de clip : dans un vrai carnet, un
   coin de photo peut dépasser de la page (cf. la couverture fermée).

   Sans ombre propre : elle est portée par .explore__book-shadow, hors du
   cadre. Un `drop-shadow` posé ici épouserait mieux la silhouette, mais il
   vit hors de la boîte de l'image — donc à la merci du découpage, qui
   s'applique après lui et le coupe net à la reliure. */
.explore__book-paper {
	display: block;
	width: 100%;
	height: auto;
}

.explore__leaf--current {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* --- Le tourné de page ---
   C'est UNE FEUILLE qui tourne, pas le livre. La feuille est la moitié
   droite de la double page et pivote sur la reliure. Les bornes viennent
   des mêmes mesures que la couverture (carnet-spread.webp, 2536 × 1560 :
   reliure à x=1249, livre de (26, 24) à (2511, 1533)).

   Auparavant `inset: 0` + `transform-origin: left center` faisait pivoter
   la double page entière autour du dos du livre — tout le carnet
   s'envolait à chaque changement de région. */
.explore__leaf--flipping {
	position: absolute;
	/* On tourne une FEUILLE, pas le livre : la reliure, le chant vert et
	   la tranche des pages restent en place. Les bornes ci-dessous sont
	   donc celles du PAPIER, relevées dans carnet-spread.webp — vert
	   jusqu'à x=62 et à partir de x=2472, tranche des pages de 2410 à
	   2470, papier de y=46 à y=1494. Avant, la feuille emportait le chant
	   vert avec elle. */
	left: 49.251%;   /* la reliure : 1249 / 2536 */
	top: 2.949%;     /* haut du papier : 46 / 1560 */
	width: 45.62%;   /* jusqu'au bord du papier : (2406 - 1249) / 2536 */
	height: 92.821%; /* (1494 - 46) / 1560 */
	z-index: 2;
	transform-style: preserve-3d;
	transform-origin: left center; /* la charnière EST la reliure */
	/* Soulevée de 2px : en début et en fin de course elle est coplanaire
	   avec les pages en dessous, et sans cet air elles se disputent la
	   profondeur — c'est ce qui faisait vaciller le tourné. */
	transform: translateZ(2px) rotateY(0deg);
	/* Promue sur sa couche avant de tourner : sinon le navigateur la crée
	   au premier frame et le départ accroche. */
	will-change: transform;
	transition: transform var(--duration-page-turn) var(--ease-page-turn);
	pointer-events: none;
}

.explore__leaf--flipping.is-flipping {
	transform: translateZ(2px) rotateY(-180deg);
}

/* La page de gauche d'où l'on vient : elle reste en place tant que la
   feuille n'est pas retombée dessus. Sans elle, la nouvelle page de
   gauche apparaîtrait avant même que la feuille ait tourné. */
.explore__leaf--outgoing {
	position: absolute;
	left: 2.603%;    /* début du papier de gauche : 66 / 2536 */
	top: 2.949%;
	width: 46.647%;  /* jusqu'à la reliure : (1249 - 66) / 2536 */
	height: 92.821%;
	z-index: 1;      /* au-dessus de .explore__leaf--current (même plan) */
	overflow: hidden;
	pointer-events: none;
}

/* Chaque demi-page rétablit à l'intérieur d'elle-même le repère de la
   double page complète : le contenu d'une région est composé pour le
   livre entier. Les pourcentages sont l'inverse exact des bornes
   ci-dessus — la moitié est un hublot, pas un nouveau format.

   Et puisque ce calque a exactement la taille du cadre, il porte LA
   DOUBLE PAGE elle-même en fond, à l'échelle 1. C'est ce qui rend le
   papier de la feuille qui tourne identique à celui du livre : le
   `carnet-page.webp` d'avant, en `cover`, était une autre photographie
   étirée de 22 % dans un cadre au ratio différent — d'où une page
   visiblement plus grande que le livre. Ça rend aussi la page quittée
   opaque : sans fond, elle laissait voir l'ancien contenu ET le nouveau
   en même temps pendant toute la rotation. */
.explore__leaf-page {
	position: absolute;
	width: 219.2%;   /* 100 / 45.62 */
	height: 107.73%; /* 100 / 92.821 */
	left: -107.96%;  /* -49.251 / 45.62 */
	top: -3.18%;     /* -2.949 / 92.821 */
	background: url('../img/carnet/carnet-spread.webp') 0 0 / 100% 100% no-repeat;
}


/* Réinitialisation instantanée après le flip : jamais de transition
   visible sur le retour à plat (assets/js/explore.js). */
.explore__leaf--flipping.is-resetting {
	transition: none;
}

.explore__leaf-face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* Le papier vient du calque de page (la double page à l'échelle 1) ;
	   cette teinte n'est là que le temps qu'il se peigne. */
	background-color: #f7f0dd;
	backface-visibility: hidden;
	/* Un cheveu d'écart entre les deux faces : rigoureusement coplanaires,
	   elles clignotent au passage de la tranche. */
	transform: translateZ(0.2px);
}

/* Le dos de la feuille retombe sur le papier de GAUCHE, qui n'a ni la
   même largeur ni la même origine que celui de droite. */
.explore__leaf-face--back {
	/* Le papier de gauche est ici plus LARGE que celui de droite
	   (46.647 % contre 45.62 %) : la face déborde donc un peu du volet,
	   au lieu de rentrer. La photographie du livre ouvert n'est pas
	   symétrique, et c'est elle qui commande. */
	right: -2.258%; /* 1 - 46.647 / 45.62 */
	transform: rotateY(180deg) translateZ(0.2px);
}

/* Et son calque de page se cale donc sur le papier de GAUCHE, pas celui
   de droite : les bornes sont l'inverse de celles de la page quittée. */
.explore__leaf-face--back .explore__leaf-page,
.explore__leaf--outgoing .explore__leaf-page {
	width: 214.36%;  /* 100 / 46.647 */
	left: -5.58%;    /* -2.603 / 46.647 */
}

/* Balayage d'ombre pendant le flip : suggère l'épaisseur du papier. Il
   part de la reliure, côté charnière. */
.explore__leaf-face::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(33, 36, 15, 0.32), transparent 45%);
	opacity: 0;
	pointer-events: none;
}

.explore__leaf--flipping.is-flipping .explore__leaf-face::after {
	animation: explore-page-shade var(--duration-page-turn) var(--ease-page-turn);
}

@keyframes explore-page-shade {
	0%, 100% { opacity: 0; }
	50%      { opacity: 1; }
}

/* --- L'arrivée (étape 2) : le carnet fermé qui s'ouvre ---
   États pilotés par explore.js sur la section [data-explore] :
   .explore--closed (posé avant le premier rendu par la porte d'entrée
   inline de front-page.php) → .is-opening (les transitions jouent) →
   .is-open (état final, la carte s'allume). Sans la classe, tout ce
   bloc est inerte : livre ouvert, statique — la version reduced-motion
   et sans-JS est le défaut, pas un repli. */
.explore__cover {
	display: none;
}

/* Le carnet fermé occupe exactement la place de sa page de droite : en
   s'ouvrant, il ne se déplace pas, il se déplie vers la gauche. Le livre
   ne bouge jamais — c'est la couverture qui tourne.

   Les quatre valeurs ci-dessous sont MESURÉES dans carnet-spread.webp
   (2536 × 1560), pas estimées : la reliure tombe à x = 1249 (la colonne
   la plus sombre du milieu) et le livre occupe (26, 24)-(2511, 1533).
   Un simple `left: 50% / width: 50% / height: 100%` posait la couverture
   fermée à côté du bord vert de la page de droite — d'où le décalage. */
.explore--closed .explore__cover {
	display: block;
	position: absolute;
	left: 49.251%;   /* 1249 / 2536 — la reliure */
	top: 1.538%;     /*   24 / 1560 */
	width: 49.803%;  /* (2511 - 1249 + 1) / 2536 */
	height: 96.795%; /* (1533 -   24 + 1) / 1560 */
	z-index: 4;
	pointer-events: none;
	/* Deux millimètres d'air au-dessus de la double page. En fin de
	   rotation le volet devient coplanaire avec elle : sans cet écart,
	   le moteur ne sait plus laquelle est devant et les fait vaciller —
	   c'est le petit flash de l'ouverture. Avec une perspective à 5200px,
	   2px grossissent de 0,04 % : invisible. */
	transform: translateZ(2px);
	/* Pas d'ombre propre : celle du livre est déjà sous lui, réduite à la
	   moitié droite — exactement sa silhouette. Une seconde ombre ici
	   devrait s'éteindre à l'ouverture, et c'est ce relais d'un porteur à
	   l'autre qui se lisait comme un saut de densité. */
}

/* --- L'ombre du volet qui s'ouvre ---------------------------------
   Deux couches, parce qu'une couverture qui se lève projette deux choses
   différentes.

   LA GÉOMÉTRIE. Le carnet est vu de dessus : le plan de l'écran est la
   table, et le volet pivote autour de l'axe vertical de la reliure. Un
   point à la distance d de la charnière se trouve donc à -d·cos θ
   horizontalement, et à la HAUTEUR d·sin θ au-dessus de la table. D'où
   les deux termes qui pilotent tout, dans les étapes plus bas :

     |cos θ|  la largeur de l'ombre au sol — nulle quand le volet est
              debout, entière une fois qu'il est posé ;
      sin θ   sa hauteur, qui ne change pas cette largeur mais DÉCALE
              l'ombre, la lumière étant oblique.

   Ce second terme est ce qui donne l'altitude à l'œil, et c'est lui qui
   manquait : sans décalage, l'ombre reste collée au volet du début à la
   fin, et le volet paraît glisser à plat au lieu de basculer.

   LA LUMIÈRE est déjà fixée par le reste de la scène — l'ombre du livre
   est décalée de 28px vers le bas, donc la source est en haut. Celle du
   volet part dans le même sens, d'autant plus loin qu'il est haut, et le
   rejoint exactement quand il se pose : un objet et son ombre se
   retrouvent au contact.

   COUCHE 1 — la pénombre projetée, qui balaye la table vers la gauche.
   Calée sur la PAGE et non sur le volet : les deux n'ont pas la même
   largeur (49.803 % du cadre contre 48.226 %, soit 96.8 % de lui), et
   c'est la page que l'ombre fixe du livre couvrira ensuite. Elle ne
   franchit donc jamais 0.968.

   Un aplat flouté, et non un dégradé linéaire. C'est ce qui fait la
   différence entre une ombre et une tache : un `linear-gradient` ne
   s'adoucit que dans UNE direction, ses bords haut et bas restent nets, et
   la chose se lit comme un rectangle gris posé sur le papier. Le `blur()`
   diffuse les quatre côtés à la fois, et déborde de 18px au-delà de la
   boîte — ce débordement est une part de ce qu'on voit dépasser du volet.

   Le filtre est sur un frère du volet, jamais sur le volet lui-même : ce
   qui ferait vaciller les deux faces devenues coplanaires en fin de
   rotation. */
.explore--closed .explore__cover::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: 100%;
	transform-origin: right center;
	transform: scaleX(0);
	opacity: 0;
	background: rgba(74, 61, 30, 0.34);
	filter: blur(18px);
	border-radius: 8px;
	pointer-events: none;
}

.explore--closed .explore__cover-flap {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform-origin: left center;
	transform: rotateY(0deg);
	/* Le volet est promu sur sa propre couche avant de tourner : sans ça,
	   le navigateur la crée au premier frame de la rotation et le départ
	   accroche. */
	will-change: transform;
	transition:
		transform 1.25s cubic-bezier(0.5, 0.05, 0.22, 1),
		opacity 0.55s var(--ease-soft);
}

/* Chaque face est un hublot. Les deux photographies portent leur propre
   bord vert de reliure ; posées sur la double page — qui a déjà le
   sien — elles le doublaient. On ne cadre donc plus sur le carnet
   entier mais sur la ZONE UTILE mesurée dans chaque fichier : le plat
   de la couverture pour l'une, le papier pour l'autre. Ce qui dépasse
   est rogné ici, pas dans les fichiers, qui restent intacts. */
.explore__cover-face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	backface-visibility: hidden;
	/* Les deux faces sont rigoureusement dans le même plan : au passage
	   des 90°, le moteur ne sait plus laquelle est devant et les fait
	   clignoter. Un cheveu d'épaisseur suffit à trancher — chacune est
	   poussée vers l'avant DANS SON PROPRE repère, donc l'écart n'est
	   jamais visible. */
	transform: translateZ(0.2px);
}

/* `> img` et non `img` : la face contient aussi la page imprimée dessus,
   avec ses propres photos. Sans l'enfant direct, elles héritaient du
   calcul de rognage de la couverture et sortaient de leur cadre. */
.explore__cover-face > img {
	position: absolute;
	width: calc(100% * var(--face-file-w) / var(--face-book-w));
	height: calc(100% * var(--face-file-h) / var(--face-book-h));
	left: calc(-100% * var(--face-book-x) / var(--face-book-w));
	top: calc(-100% * var(--face-book-y) / var(--face-book-h));
	max-width: none;
}

/* La marque, imprimée sur le plat. Un peu au-dessus du centre optique,
   comme sur un vrai carnet — au milieu exact, elle paraît basse. Crème
   légèrement retenue : une marque pressée dans la toile, pas un
   autocollant posé dessus. */
.explore__cover-logo {
	position: absolute;
	left: 50%;
	top: 44%;
	width: 46%;
	aspect-ratio: 489 / 448;
	transform: translate(-50%, -50%);
	background: var(--logo) center / contain no-repeat;
	opacity: 0.9;
}

/* carnet-ferme.webp : 1005 × 1292. Le plat va de x=18 à x=910 — au-delà
   commence la tranche vert sombre (mesurée : rgb 68,69,51 vers x=920),
   suivie du signet. C'est cette tranche que le visiteur voyait en trop. */
.explore__cover-face--front {
	--face-file-w: 1005;
	--face-file-h: 1292;
	--face-book-x: 18;
	--face-book-y: 19;
	--face-book-w: 892;
	--face-book-h: 1247;
}

/* Le dos du volet est la MOITIÉ GAUCHE de carnet-spread.webp elle-même :
   du bord du livre (x=26) à la reliure (x=1249), sur toute sa hauteur
   (y=24 à 1533). Exactement le morceau qu'il vient recouvrir. Aucune
   autre photographie ne peut coïncider aussi bien — et celle-ci est déjà
   chargée pour le livre ouvert, donc elle ne coûte rien.

   ATTENTION au sens. Le volet tourne de -180° et cette face en porte
   +180° : les deux rotations s'annulent, et la face arrive DANS LE BON
   SENS — la gauche du fichier est bien la gauche de l'écran. (Vérifié en
   composant les matrices, après m'être trompé dessus.) */
.explore__cover-face--back {
	--face-file-w: 2536;
	--face-file-h: 1560;
	--face-book-x: 26;
	--face-book-y: 24;
	--face-book-w: 1223; /* 26 → 1249 : le bord du livre jusqu'à la reliure */
	--face-book-h: 1509;
	transform: rotateY(180deg) translateZ(0.2px);

	/* Le volet a la largeur de la page de DROITE (49.803 % du cadre),
	   mais il retombe sur la page de GAUCHE, qui n'en fait que 48.226 % —
	   la photographie du livre ouvert n'est pas parfaitement symétrique.
	   Sans correction il retombait 1.577 % trop loin, dépassant de la
	   silhouette du livre.

	   Comme le volet pivote sur son bord gauche, un point à la distance d
	   de la charnière retombe à la même distance d de l'autre côté. Il
	   suffit donc de rétrécir cette face de l'écart : 48.226 / 49.803 =
	   96.834 % du volet. Elle retombe alors pile de la reliure au bord
	   gauche du livre. */
	right: 3.166%;
}

/* La page imprimée sur le volet.

   Ce calque rétablit, à l'intérieur de la face, le repère de la double
   page entière — exactement comme .explore__leaf-page le fait pour le
   tourné de page. La face retombe sur le rectangle 1.025 % → 49.251 %
   du cadre ; les valeurs ci-dessous en sont l'inverse, si bien que le
   contenu de la région s'y compose comme s'il était posé sur le livre.

   L'ordre s'y conserve, malgré les deux rotations : celle du volet
   (-180° autour de son bord gauche) et celle de la face (+180° autour de
   son centre) se composent en une simple translation. Un point à la
   distance u du bord gauche de la face retombe à la distance u du bord
   gauche du livre — pas de miroir.

   C'est ce qui supprime l'apparition du contenu : quand le volet
   s'efface, ce qu'il portait est déjà en dessous, au même endroit. */
.explore__cover-page {
	position: absolute;
	width: 207.36%;  /* 100 / 48.226 */
	height: 103.31%; /* 100 / 96.795 */
	left: -2.125%;   /* -1.025 / 48.226 */
	top: -1.589%;    /* -1.538 / 96.795 */
}

/* Tant que le carnet n'est pas ouvert, sa MOITIÉ GAUCHE N'EXISTE PAS.
   C'est le point qui rendait l'ouverture fausse : la double page
   apparaissait en fondu dès le début de la rotation, si bien qu'on
   voyait le livre déjà ouvert pendant que la couverture tournait encore.
   Un livre fermé n'a pas de page de gauche — il n'y a que la table.

   On découpe donc la double page à la reliure : seule la page de droite
   est là, cachée sous la couverture, et elle se découvre naturellement à
   mesure que le volet la quitte. Un découpage, pas un fondu : rien ne
   traverse, rien ne se superpose en transparence. */

/* Le découpage ne rogne QUE la reliure ; les autres bords sont ceux du
   livre. L'ombre n'est plus concernée : elle vit sur son propre élément,
   hors de portée du clip. */

.explore--closed .explore__book-paper {
	clip-path: inset(0 0.946% 0 49.251%);
}

/* Le collage suit la même reliure : une photo posée en bord de page
   dépasserait sinon du carnet fermé. */
.explore--closed .explore__leaf--current {
	clip-path: inset(0 0.946% 0 49.251%);
}


/* La couche du collage est préparée à l'avance : son découpage saute à
   l'instant de l'ouverture, et sans cela le repaint se voyait — le
   collage de la page de droite disparaissait une image. */
.explore--closed .explore__leaf--current {
	will-change: clip-path;
}

.explore--closed.is-open .explore__leaf--current {
	will-change: auto;
}

/* Ouverture : le volet pivote autour de la reliure. Le livre, lui, ne
   bouge pas d'un pixel.

   Ce qu'il ne faut PAS animer ici : une propriété héritée qui pilote le
   `clip-path` des éléments de la scène. Le recalcul à chaque image laisse
   la double page sur une couche périmée — elle disparaît du rendu et ne
   revient qu'au prochain repaint forcé. Vérifié sur le cadre comme sur le
   conteneur. Animer un objet qui ne commande rien d'autre que lui-même
   (l'ombre du volet, plus bas) ne pose en revanche aucun problème. */
.explore--closed.is-opening .explore__cover-flap,
.explore--closed.is-open .explore__cover-flap {
	transform: rotateY(-180deg);
}

/* L'ombre part avec le volet et dure autant que lui. En `linear` : la
   courbe du volet est déjà dans le placement des étapes ci-dessous, la
   réappliquer entre chaque étape décalerait l'ombre de sa couverture. */
.explore--closed.is-opening .explore__cover::before,
.explore--closed.is-open .explore__cover::before {
	animation: explore-cover-penombre 1.25s linear forwards;
}

/* L'ombre du livre s'élargit au même rythme. La page de gauche est
   « posée » là où la couverture la recouvre : l'ombre gagne donc
   48.226 % du cadre × |cos θ| sur les 49.803 % qu'elle occupait déjà,
   le tout rapporté aux 98.03 % du livre entier. Elle accompagne la page
   au lieu de rester à droite et de surgir d'un coup à l'arrivée. */
/* L'animation ne vit QUE pendant la rotation. Portée aussi par `.is-open`,
   elle redémarrerait à zéro au changement de classe — l'ombre se
   rétractait à la moitié droite avant de regrandir une seconde fois.
   `forwards` tient la valeur jusqu'à l'image où `.is-open` tombe, et
   celui-ci pose alors la même en clair : le relais ne se voit pas. */
.explore--closed.is-opening .explore__book-shadow {
	animation: explore-book-shadow 1.25s linear forwards;
}

.explore--closed.is-open .explore__book-shadow {
	transform: scaleX(1);
}

@keyframes explore-book-shadow {
	0%,
	39%  { transform: scaleX(0.508); }
	46%  { transform: scaleX(0.748); }
	54%  { transform: scaleX(0.899); }
	65%  { transform: scaleX(0.976); }
	82%  { transform: scaleX(0.998); }
	100% { transform: scaleX(1); }
}

/* Les instants viennent de la courbe du volet, résolue angle par angle —
   le premier quart de tour prend 39 % du temps, le reste va deux fois
   plus vite. À chaque palier, θ et ses deux termes :

     t=39 %   θ=90°    cos 0      sin 1.000
     t=46 %   θ=119°   cos 0.487  sin 0.873
     t=54 %   θ=143°   cos 0.795  sin 0.606
     t=65 %   θ=162°   cos 0.952  sin 0.306
     t=82 %   θ=175°   cos 0.996  sin 0.085
     t=100 %  θ=180°   cos 1      sin 0

   La largeur est |cos θ| × 0.968 (la page), majorée d'un excès qui se
   résorbe : 1.45 à 119°, 1.20 à 143°, plus rien au-delà. Cet excès est
   ce qui rend l'ombre visible — sans lui elle resterait exactement sous
   le volet, qui la couvre — et le résorber est aussi ce qu'une vraie
   ombre fait en se resserrant à mesure que l'objet approche.

   Le décalage est 44px × sin θ : maximal quand le volet est debout, nul
   quand il touche. C'est le terme qui se lit comme de la hauteur.

   Les opacités se lisent multipliées par le dégradé (0.30 au plus dense) :
   0.95 ne fait que 28 % d'encre sur le papier.

   Elle ne s'éteint pas avant de disparaître : à la dernière image, la
   couverture quitte le DOM et l'emporte, tandis que le livre découvre la
   sienne au même endroit. Mieux vaut un porteur qui change qu'un trou
   entre les deux. */
@keyframes explore-cover-penombre {
	0%,
	39%  { opacity: 0;    transform: translateY(44px) scaleX(0); }
	46%  { opacity: 0.75; transform: translateY(38px) scaleX(0.633); }
	54%  { opacity: 0.90; transform: translateY(27px) scaleX(0.898); }
	65%  { opacity: 0.85; transform: translateY(13px) scaleX(0.968); }
	82%  { opacity: 0.65; transform: translateY(4px)  scaleX(0.968); }
	100% { opacity: 0.40; transform: translateY(0)    scaleX(0.968); }
}

/* Le volet est retombé à plat sur la gauche : la page de gauche prend son
   existence à cet instant précis, d'un coup et sans transition — elle est
   de toute façon masquée par le volet posé dessus. Le livre découvre son
   ombre du même geste, et la couverture emporte la sienne en quittant le
   DOM.

   `none` et non `inset(0)` : un clip qui ne coupe rien coupe quand même
   l'ombre, qui vit hors de la boîte de l'image. */
.explore--closed.is-open .explore__book-paper,
.explore--closed.is-open .explore__leaf--current {
	clip-path: none;
}


/* Le volet ne s'efface plus en fondu : explore.js le RETIRE du DOM à
   l'instant où il se pose. C'est possible depuis qu'il porte le morceau
   exact du livre — même fichier, même contenu, même place à 0,01 % près.
   Il n'y a donc rien à fondre, et le fondu coûtait cher : pendant une
   demi-seconde, deux calques quasi identiques se superposaient, dont un
   en 3D — le texte y est lissé autrement, et la bascule se voyait. */

/* --- L'arrivée du motmot (animation n° 2, CONCEPT.md §4) ---
   Il entre en volant par la gauche, hors du cadre, et vient se poser à
   sa place au bord de la carte. Rien d'autre : pas de perchoir sur la
   couverture, pas de traversée de l'écran, pas de retournement. Le
   dessin regarde à droite, il vole donc vers la droite — aucun miroir.
   Deux animations sur le même élément : l'une feuillette les poses,
   l'autre porte la trajectoire. */
.explore--closed .explore__motmot {
	opacity: 0; /* il n'entre qu'une fois le carnet ouvert */
}

.explore--closed.is-opening .explore__motmot,
.explore--closed.is-open .explore__motmot {
	animation:
		explore-motmot-battement 1.4s steps(1, end) 0.55s both,
		explore-motmot-arrivee 1.4s linear 0.55s both;
}

/* Les ailes. Le battement est le cœur de l'illusion : une alternance
   toutes les 56 ms, soit environ neuf battements complets par seconde —
   le rythme d'un oiseau de cette taille. Plus lent, on voit deux dessins
   qui s'échangent ; à cette vitesse, on voit voler. Puis il relève les
   ailes pour freiner, sort les pattes, et se pose.
   `steps(1)` fait claquer d'une pose à l'autre : un dessin ne se déforme
   pas, il se remplace. */
@keyframes explore-motmot-battement {
	0%   { background-position-x: 66.667%; } /* ailes hautes, déjà en vol */
	4%   { background-position-x: 100%; }
	8%   { background-position-x: 66.667%; }
	12%  { background-position-x: 100%; }
	16%  { background-position-x: 66.667%; }
	20%  { background-position-x: 100%; }
	24%  { background-position-x: 66.667%; }
	28%  { background-position-x: 100%; }
	32%  { background-position-x: 66.667%; }
	36%  { background-position-x: 100%; }
	40%  { background-position-x: 66.667%; }
	44%  { background-position-x: 100%; }
	48%  { background-position-x: 66.667%; }
	52%  { background-position-x: 100%; }
	56%  { background-position-x: 66.667%; }
	60%  { background-position-x: 100%; }
	64%  { background-position-x: 66.667%; }
	68%  { background-position-x: 100%; }
	72%  { background-position-x: 66.667%; } /* il freine, ailes hautes */
	87%  { background-position-x: 33.333%; } /* pattes en avant */
	100% { background-position-x: 0%; }      /* posé */
}

/* La trajectoire : il entre par le bas à gauche, hors cadre, et monte en
   diagonale jusqu'à sa marche. Un vol qui grimpe — le nez relevé au
   départ, redressé à l'arrivée.

   Jouée en `linear` et échantillonnée tous les 10 % : c'est l'ESPACEMENT
   des repères qui porte le ralentissement, pas une courbe
   d'accélération. Une courbe appliquée à des repères espacés freine à
   chacun d'eux — c'est ce qui donnait ce vol saccadé. Les petites
   variations de hauteur suivent le rythme des ailes. */
@keyframes explore-motmot-arrivee {
	0%   { opacity: 0; transform: translate(-320px, 138px) rotate(-7deg); }
	10%  { opacity: 1; transform: translate(-270px, 120px) rotate(-7deg); }
	20%  { opacity: 1; transform: translate(-224px, 106px) rotate(-6deg); }
	30%  { opacity: 1; transform: translate(-182px, 86px) rotate(-6deg); }
	40%  { opacity: 1; transform: translate(-145px, 72px) rotate(-5deg); }
	50%  { opacity: 1; transform: translate(-106px, 54px) rotate(-4deg); }
	60%  { opacity: 1; transform: translate(-74px, 42px) rotate(-4deg); }
	70%  { opacity: 1; transform: translate(-47px, 26px) rotate(-3deg); }
	80%  { opacity: 1; transform: translate(-24px, 16px) rotate(-2deg); }
	90%  { opacity: 1; transform: translate(-8px, 5px) rotate(-1deg); }
	100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}

/* Ceintures et bretelles : si .explore--closed fuyait jusqu'ici malgré
   la porte d'entrée (reduced-motion activé après le chargement,
   redimensionnement vers mobile…), le livre reste ouvert et visible, et
   l'oiseau se tient déjà à sa place — jamais suspendu en plein vol. */
@media (prefers-reduced-motion: reduce), (max-width: 63.999rem) {
	.explore--closed .explore__cover {
		display: none;
	}
	.explore--closed .explore__book-paper,
	.explore--closed .explore__leaf--current,
	.explore--closed .explore__motmot {
		opacity: 1;
	}
	/* « Ouvert et visible » veut dire entier : sans cette règle, le livre
	   restait découpé à la reliure — et son ombre, rognée avec lui,
	   invisible. */
	.explore--closed .explore__book-paper,
	.explore--closed .explore__leaf--current {
		clip-path: none;
	}
	.explore--closed .explore__motmot,
	.explore--closed.is-opening .explore__motmot,
	.explore--closed.is-open .explore__motmot {
		animation: none;
		transform: none;
	}
}

/* --- Page du carnet (explore-page.php) — posée sur le papier de la
   double page : la page remplit le cadre du livre, l'en-tête est épinglé
   en haut de la page de gauche, le lien de sortie au bas de la page de
   droite. Icône pin : pont visuel avec le nom de la région active sur
   la carte (.explore__pin.is-current), même repère. --- */
.explore-page {
	position: absolute;
	inset: 0;
	/* Conteneur de requête pour le mobilier de la page (titre, lien de
	   sortie) : la scène de collage a le sien, mais le titre et le lien
	   vivent en dehors — ils se mesurent donc sur le livre lui-même,
	   pour garder leur échelle quelle que soit la largeur d'écran. */
	container-type: inline-size;
}

/* Titre de région : manuscrit (fragment court, jamais un texte long ni
   un contrôle — invariant 4). Le plancher en rem garantit la lisibilité
   quand le livre est étroit. */
.explore-page__heading {
	position: absolute;
	top: 8.2%;
	left: 9%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.35em;
	margin: 0;
	font-family: var(--font-display);
	/* 2.8 cqw : la maquette Antigua donnait 3,3, trop haut une fois posé
	   sur le vrai livre — le nom de la région est une mention épinglée en
	   haut de page, pas un titre de rubrique.

	   Sans plancher, comme les légendes : `max(var(--text-xl), …)` valait
	   32 px sur grand écran, or le livre se dimensionne sur la HAUTEUR de
	   la fenêtre — sur un portable, 2,8 cqw tombait sous 32 px et le
	   plancher gagnait, si bien qu'une baisse de taille ne se voyait tout
	   simplement pas. Un objet proportionnel ne supporte aucune mesure
	   absolue à l'intérieur. */
	font-size: 2.8cqw;
	/* Même graisse que le reste de l'écriture du carnet (légendes,
	   annotations) : un nom de région écrit à la main n'est pas un titre
	   de rubrique, il ne se distingue pas par le gras. */
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: normal;
	text-transform: none;
	color: var(--green-700);
}

.explore-page__heading::before {
	content: '';
	display: block;
	width: 0.62em;
	aspect-ratio: 33.81 / 41.48;
	flex: none;
	background-color: var(--green-700);
	-webkit-mask: url('../svg/deco/pin.svg') center / contain no-repeat;
	        mask: url('../svg/deco/pin.svg') center / contain no-repeat;
}

/* Scène du repli « À explorer » (16/10, l'historique de l'éditeur) :
   centrée sur le papier, bornée par la hauteur — les compositions
   existantes restent lisibles en attendant leur recomposition dans
   l'éditeur « Page du carnet ». Jamais de clip (cf. .explore__book-paper). */
.explore-page__canvas {
	position: absolute;
	inset: 13% 8%;
	display: flex;
	justify-content: center;
	padding: 0;
	overflow: visible;
}

.explore-page__scene {
	position: relative;
	height: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 10;
	container-type: inline-size;
}

/* Scène « Page du carnet » : composée dans l'éditeur directement sur la
   texture de la double page — elle couvre donc le livre entier, au ratio
   exact de la texture (WYSIWYG total avec l'admin). */
.explore-page--spread .explore-page__canvas {
	inset: 0;
}

.explore-page--spread .explore-page__scene {
	height: auto;
	width: 100%;
	aspect-ratio: 2536 / 1560;
}

.explore-page__node {
	position: absolute;
	left: calc(var(--x, 50) * 1%);
	top: calc(var(--y, 50) * 1%);
	transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg));
}

.explore-page__node--photo,
.explore-page__node--deco {
	width: calc(var(--w, 24) * 1%);
}

/* Masquage desktop, saisi dans l'éditeur de collage (dOff) — même logique
   que .dest-collage__node.is-doff. mOff n'a pas d'objet ici : ce gabarit
   est desktop uniquement, voir template-parts/patterns/explore-story.php
   pour son équivalent mobile. */
.explore-page__node.is-doff {
	display: none;
}

/* Nœud texte libre : « w » est une taille de police (cqw), pas une
   largeur — la couleur vient de l'item (inline), le fond sombre est
   son support par défaut (voir .explore__notebook-frame). */
.explore-page__node--text {
	font-family: var(--font-display);
	font-size: calc(var(--w, 5) * 1cqw);
	/* Même graisse que les légendes : toute l'écriture du carnet est au
	   même poids d'encre — et c'est ce que montre l'éditeur de collage. */
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	white-space: pre;
}

.explore-page__node--deco {
	/* Encre verte sur papier (le support sombre a disparu avec le livre). */
	background-color: var(--green-600);
	-webkit-mask: var(--deco) center / contain no-repeat;
	        mask: var(--deco) center / contain no-repeat;
	pointer-events: none;
	opacity: 0.85;
}

/* --- Nœud « lien » : la carte manuscrite, posée où l'auteur l'a mise
   (2026-07-31). Jumelle exacte de .explore-story__btn (la story mobile) —
   si l'une bouge, l'autre bouge : même carte blanche de travers, même
   flèche dessinée à la main, même lettrage. Seule différence, et elle est
   nécessaire : la taille suit le livre (cqw, comme tout le carnet) au
   lieu d'un corps fixe, et l'inclinaison vient de la rotation du nœud
   (--r, réglable dans l'éditeur) plutôt que d'un angle figé. --- */
.explore-page__node--link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	z-index: 2;
	padding: 0.6em 0.9em;
	background-color: var(--link-card-bg);
	border-radius: 0.2em;
	box-shadow:
		0 10px 20px -10px rgba(51, 56, 25, 0.45),
		0 3px 8px rgba(51, 56, 25, 0.2);
	/* --lift : la levée au survol, injectée par le bloc commun aux deux
	   cartes plus bas. Elle s'intercale entre le centrage et la rotation
	   pour que le papier monte tout droit, sans partir de travers. */
	transform:
		translate(-50%, -50%)
		translateY(var(--lift, 0em))
		rotate(calc(var(--r, 0) * 1deg));
	font-family: var(--font-display);
	/* Même corps que le lien de sortie (.explore-page__more), en dur et
	   non plus piloté par --w (2026-07-31) : les deux cartes sont le même
	   objet, seule leur PLACE se compose. L'éditeur n'expose donc plus de
	   réglage de taille sur un lien — position et rotation seulement. */
	font-size: 1.45cqw;
	font-weight: 500;
	line-height: 1.2;
	color: var(--link-card-ink);
	text-decoration: none;
	white-space: pre;
}
/* Icône des deux cartes-liens : une flèche à la main, plus appuyée que
   fleche3-droite (2026-07-31). Le curseur de souris essayé le même jour
   est écarté — il dessinait la souris que le visiteur tient déjà. Asset
   fixe, donc masque et proportions posés ici : le gabarit n'a plus qu'à
   écrire le <span>, sans style en ligne ni recherche de déco. Jumeau de
   .cge-link-arrow / .cge-stage__exit-arrow (inc/meta-boxes.php). */
.explore-page__link-arrow,
.explore-page__more-arrow {
	width: 1.15em;
	aspect-ratio: 26 / 20;
	flex: none;
	background-color: var(--link-card-ink);
	-webkit-mask: url('../svg/ui/arrow.svg') center / contain no-repeat;
	        mask: url('../svg/ui/arrow.svg') center / contain no-repeat;
}

/* Le cadre blanc du tirage est proportionnel à la LARGEUR de la photo
   (--pw = w en %), exactement comme .dest-free-photo et comme l'aperçu
   de l'éditeur (.cge-node--photo) : un cadre fixe donnait une marge
   énorme aux petits tirages et une marge maigre aux grands, et surtout
   ne correspondait à ce qui est composé en admin qu'à une seule taille
   de photo — le WYSIWYG de l'éditeur « Page du carnet » en dépend. */
/* Épaisseur du cadre : trois multiples de la largeur du tirage, choisis
   par le style de tirage dans l'éditeur (--fpt/--fps/--fpb — polaroïd,
   liseré fin, bord perdu). Les défauts sont ceux du polaroïd : un collage
   composé avant ce réglage ne bouge pas. */
.explore-page__photo {
	background: #ffffff;
	padding:
		calc(var(--pw, 20) * var(--fpt, 0.05) * 1cqw)
		calc(var(--pw, 20) * var(--fps, 0.05) * 1cqw)
		calc(var(--pw, 20) * var(--fpb, 0.09) * 1cqw);
	/* Ombre d'objet posé sur du papier clair : plus courte et plus douce
	   que sur l'ancien panneau sombre. */
	box-shadow:
		0 10px 22px -10px rgba(74, 61, 30, 0.35),
		0 3px 7px rgba(74, 61, 30, 0.16);
}

/* Format du tirage, choisi photo par photo dans l'éditeur (item.ar) :
   un carnet colle des verticales et des horizontales, forcer tout le
   monde en 4/3 recadrait les sujets debout au ras de la tête.
   Le cadre porte le format et coupe le zoom à son bord (overflow
   hidden) — l'image, elle, se contente de le remplir puis de grossir
   par-dessus (--fz). Sans ce cadre séparé, un zoom peindrait par-dessus
   le cadre blanc du tirage au lieu de rester coupé à l'intérieur. */
.explore-page__photo-frame {
	display: block;
	width: 100%;
	aspect-ratio: var(--ar, 4 / 3);
	overflow: hidden;
}
.explore-page__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Point de cadrage réglé au glissé dans l'éditeur (item.fx/fy) : le
	   format ci-dessus recadre la photo, ceci choisit ce qu'il en garde. */
	object-position: calc(var(--fx, 50) * 1%) calc(var(--fy, 50) * 1%);
	/* Zoom (item.fz, éditeur) : ancré sur ce même point, pour grossir
	   sans décentrer ce qui a déjà été choisi au glissé. */
	transform: scale(var(--fz, 1));
	transform-origin: calc(var(--fx, 50) * 1%) calc(var(--fy, 50) * 1%);
}

/* Tirage pas encore collé (CONCEPT.md §9 : jamais de photo de banque en
   attendant). Ce n'est pas une image cassée mais un emplacement réservé :
   un rectangle de papier légèrement plus sourd que la page, quatre coins
   de photo à l'encre — la légende manuscrite dessous dit déjà ce qui
   viendra là. Le carnet est inachevé, ça se voit sans qu'il le dise. */
.explore-page__photo-placeholder {
	position: relative;
	aspect-ratio: var(--ar, 4 / 3);
	background-color: #efe9dc;
	box-shadow: inset 0 0 0 1px rgba(51, 56, 25, 0.14);
}

.explore-page__photo-placeholder::before,
.explore-page__photo-placeholder::after {
	content: '';
	position: absolute;
	width: 9%;
	aspect-ratio: 1;
	border: 1px solid rgba(51, 56, 25, 0.3);
}

.explore-page__photo-placeholder::before {
	top: 5%;
	left: 4%;
	border-width: 1px 0 0 1px;
}

.explore-page__photo-placeholder::after {
	right: 4%;
	bottom: 5%;
	border-width: 0 1px 1px 0;
}

.explore-page__caption {
	margin-top: calc(var(--pw, 20) * 0.05cqw);
	padding: 0;
	font-family: var(--font-display);
	/* Taille purement proportionnelle au livre — plus de plancher en
	   pixels (2026-07-28). Le plancher `max(16px, …)` protégeait la
	   lisibilité (PREMORTEM : « Légendes ≥ 16 px »), mais un seuil
	   absolu dans un objet entièrement proportionnel se déclenchait à
	   des largeurs différentes dans l'éditeur et sur le site : la même
	   légende y tenait sur une ligne et passait à deux ici. C'était la
	   dernière source d'écart entre ce qui est composé et ce qui est
	   publié. La lisibilité est désormais tenue ailleurs : sur mobile
	   la légende repasse en --text-base (≥ 16 px, voir plus bas), et
	   sur desktop c'est le réglage `cs` qui en répond — en dessous de
	   ~1,5 une légende devient trop petite sur un écran peu haut. */
	font-size: calc(var(--cs, 2.2) * 1cqw);
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	/* Même coupure que l'éditeur : un mot trop long y passait à la ligne
	   et débordait ici. */
	word-break: break-word;
	/* La légende est DANS la carte blanche (.explore-page__photo), pas sur
	   le panneau vert : défaut sombre, identique à .dest-free-photo__cap
	   (#333819). capColor (item) le surcharge en inline si renseigné. */
	color: #333819;
	/* Décalage libre depuis cette place, réglé au glissé dans l'éditeur
	   (--cdx/--cdy, en cqw comme le reste de la scène) : une légende peut
	   partir dans la marge, à côté du tirage, en travers du pli. */
	transform: translate(calc(var(--cdx, 0) * 1cqw), calc(var(--cdy, 0) * 1cqw));
}

/* Liseré fin et bord perdu : la légende sort de la carte blanche. Dans le
   flux, elle rallongerait le blanc sous l'image — un tirage n'a pas de
   marge basse quand il n'a pas de marge. Elle se pose donc sur le papier,
   juste sous le tirage, et son décalage libre part de là. */
.explore-page__node--capout .explore-page__caption {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
}

/* --- Lien de sortie « la suite de cette page → » : chaque extrait mène
   à un endroit concret (invariant CONCEPT.md #12). Jamais un bouton (le
   carnet n'en a aucun), posé au bas de la page de droite, là où une page
   se tourne. --- */
/* Lien de sortie — révisé le 2026-07-31 : il prend la carte manuscrite de
   la story mobile (.explore-story__btn), à la demande de l'auteur du site.
   Il gardait jusqu'ici la phrase nue décidée le 2026-07-28 (« chaque
   ornement ajouté la rapprochait d'un bouton »), et l'invariant 10 disait
   encore la veille que le carnet desktop restait sans aucun bouton :
   décision renversée, voir CONCEPT.md §12.8 et l'invariant 10 pour la
   portée exacte. Sa place ne change pas (bas de la page de droite, là où
   une page se tourne) ; un lien qu'on veut poser ailleurs se compose
   désormais dans l'éditeur (.explore-page__node--link ci-dessus). */
.explore-page__more {
	position: absolute;
	/* Centré sur la page de DROITE (2026-07-31), plus calé sur son bord.
	   72.06 % n'est pas un réglage à l'œil : la géométrie du demi-feuillet
	   est déjà encodée par .explore__leaf-page (le tourné de page), qui
	   place la page de droite de 49.251 % à 94.871 % de la double page —
	   son milieu tombe donc à (49.251 + 94.871) / 2. Si ces nombres
	   bougent là-bas (nouvelle texture de carnet), celui-ci bouge aussi. */
	left: 72.06%;
	/* Remonté de 6 à 9 % le 2026-07-31 : à 6 % la carte frôlait le bord
	   du papier (qui s'arrête à 95.77 % de la hauteur, cf. la même
	   géométrie de feuillet), elle avait l'air posée à cheval sur la
	   tranche plutôt que dans la page. Puis rabaissée d'un cheveu — voir
	   le décalage constant dans le transform, plus bas. */
	bottom: 9%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.6em 0.9em;
	background-color: var(--link-card-bg);
	border-radius: 0.2em;
	box-shadow:
		0 10px 20px -10px rgba(51, 56, 25, 0.45),
		0 3px 8px rgba(51, 56, 25, 0.2);
	/* Posée droite (2026-07-31) : elle est seule au centre du bas de page,
	   sans rien autour pour justifier l'inclinaison. Les deux autres
	   cartes la gardent — celle de la story parce qu'elle est posée sur
	   une composition, celle du collage parce que son angle se règle nœud
	   par nœud (--r). Ne pas confondre avec §10 : ce qui est interdit,
	   c'est de se REDRESSER au survol, pas d'être droit au repos.

	   Le décalage constant descend la carte de quelques pixels, dans
	   l'unité du carnet plutôt qu'en px : le livre fait min(100%,
	   (100svh - 9rem) × 1.6256), soit ≈ 1200 px de large sur un écran
	   courant, où 1 px vaut 0.083cqw — donc ≈ 0.057em pour une carte
	   composée à 1.45cqw. 0.28em ≈ 5 px (0.12em ≈ 2 px au premier réglage
	   du 2026-07-31, abaissé encore le même jour). Écrire « 5px » ici
	   aurait violé §12.8 (« aucune mesure absolue dans le carnet ») et
	   surtout refait mentir l'éditeur, dont la scène fait ~320 px quand le
	   livre en fait ~1200 : les mêmes pixels y auraient été trois fois
	   trop grands.
	   --lift : voir le bloc de survol commun aux deux cartes, plus bas.
	   Il s'ajoute à ce décalage, donc la levée au survol garde sa course. */
	transform: translateX(-50%) translateY(calc(var(--lift, 0em) + 0.28em));
	font-family: var(--font-display);
	/* Proportionnelle au livre, sans plancher en px — même raison que le
	   titre et les légendes (CONCEPT.md §12.8, « aucune mesure absolue
	   dans le carnet »). Réduite de 1.7 à 1.45cqw le 2026-07-31 : une fois
	   la carte posée droite et centrée, elle pesait plus lourd que le
	   titre de région qu'elle ne doit pas concurrencer (§12.8, « plus
	   petit que le titre de région »). */
	font-size: 1.45cqw;
	font-weight: 500;
	line-height: 1.2;
	color: var(--link-card-ink);
	text-decoration: none;
}


/* --- Survol et focus des DEUX cartes-liens de la double page (2026-07-31) :
   celle de sortie, posée en bas de la page de droite, et celle composée
   librement dans l'éditeur. Un seul bloc pour les deux — c'est ce qui
   garantit qu'elles ne divergeront pas.

   Le geste : le papier se soulève de quelques millimètres et son ombre
   s'approfondit. Rien d'autre. Ce qu'il ne fait pas, volontairement — la
   carte ne se redresse jamais (§10 : « la photo qui se redresse au
   survol » est définitivement supprimée), aucune encre ne bouge
   (invariant 2), et rien ne part sans le geste du visiteur (invariant 1).
   La levée est en `em` : elle suit le corps de la carte comme tout le
   reste du carnet, sans mesure absolue (§12.8). --- */
.explore-page__more,
.explore-page__node--link {
	transition:
		transform var(--duration-medium) var(--ease-soft),
		box-shadow var(--duration-medium) var(--ease-soft);
}

.explore-page__more:hover,
.explore-page__node--link:hover,
.explore-page__more:focus-visible,
.explore-page__node--link:focus-visible {
	--lift: -0.22em;
	box-shadow:
		0 16px 30px -12px rgba(51, 56, 25, 0.5),
		0 5px 12px rgba(51, 56, 25, 0.24);
}

/* L'anneau de focus reste celui du site et prime sur l'ombre de survol
   (CONCEPT.md §12.8 : « son état de focus reste celui du reste du
   site ») — déclaré après, donc gagnant à spécificité égale. */
.explore-page__more:focus-visible,
.explore-page__node--link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Livre statique : le papier ne se soulève plus, l'ombre seule répond au
   survol — l'affordance reste, le mouvement disparaît (CONCEPT.md §4). */
@media (prefers-reduced-motion: reduce) {
	.explore-page__more,
	.explore-page__node--link {
		transition: none;
	}
	.explore-page__more:hover,
	.explore-page__node--link:hover,
	.explore-page__more:focus-visible,
	.explore-page__node--link:focus-visible {
		--lift: 0em;
	}
}

/* --- Mobile : feuillets, carte, story plein écran ------------------------
   Format entièrement distinct du desktop, pas une déclinaison (décidé le
   2026-07-30, en remplacement de la bande verticale du 2026-07-29 — celle-ci
   n'a jamais été livrée). Le livre à double page appartient au desktop ; sur
   téléphone, chaque région est un feuillet de papier coloré qu'on fait
   défiler du pouce, la carte du pays vit en permanence dessous (pas en
   tiroir), et le feuillet centré se déplie en plein écran façon story —
   3 pages courtes plutôt qu'un collage réduit. CONCEPT.md §12.10.

   .explore__side et .explore__notebook (le couple carte+carnet desktop)
   sont donc masqués sous ce seuil, et .explore__mobile ne s'affiche qu'ici —
   deux objets, jamais mélangés, jamais visibles ensemble. --- */
.explore__mobile {
	display: none;
}

/* Scroll de page bloqué quand la story est ouverte. `overflow: hidden`
   seul ne suffit pas — connu pour ne pas tenir sur Safari iOS en
   particulier (rebond élastique qui l'ignore), vérifié aussi peu fiable
   ici contre un scroll simulé. La technique robuste (déjà éprouvée par
   les bibliothèques de modales) : sortir `body` du flux du document en
   `position: fixed` au décalage exact où l'utilisateur en était
   (`top`, posé par explore.js), puis le rendre au chargement au moment
   de fermer — le document lui-même n'a alors plus RIEN à faire défiler,
   ce n'est plus une question de CSS qui l'en empêche. */
body.is-story-open {
	position: fixed;
	left: 0;
	right: 0;
	overflow: hidden;
}

@media (max-width: 63.999rem) {

	.explore__side,
	.explore__notebook {
		display: none;
	}

	.explore__mobile {
		display: flex;
		flex-direction: column;
		/* Remonte la carte et la note d'usage (24px → 7px, ajusté à
		   l'usage) : même écart entre les trois blocs (feuillets, carte,
		   note), donc les deux derniers suivent ensemble en se
		   rapprochant du rang de feuillets. 7px : dernier ajustement de
		   5px sous la valeur du token le plus proche (--space-3, 12px),
		   d'où le nombre en dur plutôt qu'un token. */
		gap: 7px;
		/* .explore__stage est une grille (desktop) — un enfant de grille
		   hérite `min-width: auto` par défaut, qui se résout à la largeur
		   MAX-CONTENT de son contenu plutôt qu'à l'espace réellement
		   disponible. Avec un rang de feuillets scrollable dedans (plusieurs
		   cartes bout à bout, potentiellement triplées pour la boucle
		   infinie), ce max-content peut dépasser largement l'écran — la
		   piste de grille grandissait alors pour l'accueillir, poussant
		   tout .explore__mobile hors du viewport au lieu de le contenir
		   avec un défilement interne. `min-width: 0` rend la contrainte du
		   conteneur (496px de large, pas 1500) prioritaire sur le contenu. */
		min-width: 0;
	}

	/* --- Le rang de feuillets ---
	   Défilement natif (scroll-snap) : l'inertie et le rebond viennent du
	   navigateur, pas d'une physique réécrite en JS — la moitié du travail
	   de fluidité est déjà là gratuitement. Padding latéral réduit à une
	   valeur fixe (pas un pourcentage) : le principal, c'est que trois
	   feuillets ENTIERS tiennent toujours à l'écran, une percentage large
	   comme avant aurait mangé la place des trois. */
	.explore__feuillets {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-2) var(--space-4) var(--space-3);
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* Même précaution que .explore__mobile ci-dessus, à l'étage du
		   dessous : sans elle, le rang scrollable reste libre de dicter sa
		   propre largeur au lieu de se laisser contenir. */
		min-width: 0;
	}
	.explore__feuillets::-webkit-scrollbar {
		display: none;
	}

	/* Chaque feuillet est un vrai <button> (invariant 3 : un contrôle qui
	   opère quelque chose n'est jamais purement manuscrit), sa photo
	   dominante en plein cadre (motmot_get_region_sorted_photos()) — la
	   couleur de région (motmot_get_region_color(), jamais le terracotta
	   du motmot, invariant 9) devient un liséré qui l'encadre, comme un
	   passe-partout, plutôt qu'un aplat qui cacherait la photo. Le nom de
	   la région est écrit dessus — seul endroit où il apparaît sur ce
	   format, la carte en dessous ne fait plus qu'allumer la forme du
	   département, sans redite. Tous les feuillets ont la même taille en
	   toute circonstance — seuls le soulèvement et l'opacité (explore.js,
	   au fil du scroll) marquent celui du centre, jamais leur largeur/
	   hauteur.

	   Taille portée par un pourcentage FIXE de la largeur du rang (34 %,
	   pas la hauteur de fenêtre) : un calcul en vh (essayé, puis retiré)
	   grandissait sans tenir compte de la largeur et n'en laissait plus
	   qu'un. Un peu plus hauts qu'avant via l'aspect-ratio (2/3 plutôt que
	   3/4), à largeur égale.

	   34 % est calibré pour un mobile « grand » (iPhone 14 et plus large,
	   ~390px et au-delà), agrandi à l'usage — le garde-fou des trois
	   feuillets entiers n'est plus strictement garanti à cette taille,
	   la taille de carte prime. Même arbitrage pour le palier petit écran
	   (iPhone mini/SE, ≤ 24rem) juste en dessous, à 34 % lui aussi. */
	.explore__feuillet {
		flex: 0 0 34%;
		/* Mobile « grand » : un peu plus hautes (3/5, contre 2/3 ailleurs)
		   sans toucher à la largeur (flex-basis inchangé) — palier petit
		   écran (≤ 24rem) revenu à 2/3 juste en dessous, non concerné par
		   cette demande. */
		aspect-ratio: 3 / 5;
		scroll-snap-align: center;
		position: relative;
		border: none;
		border-radius: 14px;
		padding: 0;
		overflow: hidden;
		box-shadow:
			0 10px 20px -14px rgba(33, 36, 15, 0.4),
			inset 0 0 0 3px var(--feuillet-color, var(--green-300));
		cursor: pointer;
		/* pan-y explicite : plus de glissé vertical propre au feuillet
		   (l'ouverture de la story se fait au tap, jamais au glissé), le
		   défilement de la page doit donc rester possible doigt posé sur
		   une carte. */
		touch-action: pan-x pan-y;
		font: inherit;
	}

	/* Petit écran (≤ 24rem ≈ 384px, iPhone mini/SE) : feuillets agrandis
	   (34 %, ajusté à l'usage sur un vrai iPhone mini) — à cette taille
	   deux feuillets entiers tiennent à l'écran plus un aperçu généreux
	   du troisième, jamais trois entiers (calcul dépassé sciemment,
	   priorité donnée à la taille de carte plutôt qu'au nombre visible).
	   Le rang est aussi descendu d'un cran (padding-top, sur
	   .explore__feuillets plus haut) : vu sur un vrai iPhone mini,
	   l'écart sous le header était nettement plus court que celui qui
	   sépare le rang de la carte en dessous — descendre le rang
	   rapproche les deux écarts. */
	@media (max-width: 24rem) {

		.explore__feuillet {
			flex: 0 0 34%;
			aspect-ratio: 2 / 3;
		}

		.explore__feuillets {
			padding-top: var(--space-8);
		}
	}

	.explore__feuillet:focus-visible {
		outline: none;
		box-shadow:
			0 10px 20px -14px rgba(33, 36, 15, 0.4),
			inset 0 0 0 3px var(--feuillet-color, var(--green-300)),
			var(--focus-ring);
	}

	.explore__feuillet-photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Aucune photo collée : le même repli sobre que partout ailleurs
	   (CONCEPT.md §9, .explore-story__photo-placeholder) — jamais une
	   image de banque en attendant. */
	.explore__feuillet-photo-placeholder {
		position: absolute;
		inset: 0;
		background-color: var(--feuillet-color, var(--green-300));
	}

	.explore__feuillet-grip {
		position: absolute;
		top: var(--space-2);
		left: 50%;
		transform: translateX(-50%);
		width: 22px;
		height: 3px;
		border-radius: 2px;
		background-color: rgba(255, 249, 246, 0.75);
		z-index: 2;
	}

	.explore__feuillet-foot {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		padding: var(--space-3) var(--space-2) var(--space-2);
		background: linear-gradient(to top, rgba(20, 18, 10, 0.62), rgba(20, 18, 10, 0));
	}

	/* Deux lignes au plus, jamais coupée à l'aveugle par le débordement
	   du feuillet : un nom long (« Las Verapaces ») se termine par des
	   points de suspension plutôt que d'être tronché en plein mot. */
	.explore__feuillet-name {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-family: var(--font-display);
		font-weight: 500;
		font-size: 0.8rem;
		line-height: 1.15;
		color: #fff;
	}

	.explore__feuillet-season {
		display: block;
		font-family: var(--font-display);
		font-size: var(--text-xs);
		color: rgba(255, 255, 255, 0.82);
		margin-top: 2px;
	}

	/* --- La carte, sous les feuillets, en permanence ---
	   Pas un tiroir : elle est toujours là, elle change seulement de région
	   allumée — le seul pont entre les deux objets (la navigation réelle
	   reste dans les feuillets). Décorative de part en part (aria-hidden
	   côté PHP) : le pays n'est jamais retouché au doigt sur ce format.

	   Sur ce format, la carte n'a plus qu'un seul rôle — montrer où l'on
	   est — jamais celui de distinguer « région curatée » de « région
	   inerte » (ce rôle-là appartient aux feuillets). Le vert des régions
	   curatées du desktop (.explore__map [data-department], plus haut
	   dans ce fichier) est donc neutralisé ici : tout redevient crème, et
	   seule la région active s'allume, en vert CLAIR — jamais le vert
	   sombre du desktop, réservé à « la page ouverte dans le livre »,
	   une idée qui n'existe pas sur ce format.

	   Pas de plateau/carte derrière : seule l'ombre déjà portée par
	   .explore__map-svg (assets/css/main.css, filtre drop-shadow partagé
	   avec le desktop) détache le pays du fond — un cadre blanc en plus
	   aurait ajouté une boîte que le desktop n'a pas non plus.
	   --explore-map-w porte la taille, déjà lue par la règle desktop plus
	   haut, jamais redéfinie avant ce bloc.

	   Pas de nom écrit ici : il est déjà sur le feuillet lui-même
	   (.explore__feuillet-name) — l'écrire une seconde fois sous la carte
	   n'identifiait rien de plus, deux redites l'une sous l'autre. */
	.explore__mapband {
		position: relative;
		display: flex;
		justify-content: center;
		/* .explore__inner porte .container-wide (assets/css/base.css),
		   24px de padding latéral fixe — la carte s'y calculait déjà à
		   100 % de --explore-map-w sans que ça se voie, monter le
		   pourcentage ne pouvait plus rien y faire. Sortie du padding
		   (marges négatives égales) pour lui rendre ces 48px, sur mobile
		   uniquement : c'est le seul bloc du carnet mobile en plein
		   bord, les feuillets et la note gardent leur respiration. */
		margin-inline: calc(-1 * var(--space-6));
	}

	/* Mobile « grand » (iPhone 14 et plus large, ~390px et au-delà) :
	   carte agrandie — palier petit écran (≤ 24rem) resté sur la taille
	   validée plus bas, la respiration y est plus rare qu'ici.

	   `width`, pas seulement `max-width` : .explore__mapband est en
	   flex (justify-content: center), et sans largeur explicite
	   .explore__map (règle générale plus haut, `max-width` seul) se
	   dimensionne comme un item flex sur son CONTENU — le SVG — au lieu
	   de remplir l'espace dispo. Résultat vérifié : la carte ne
	   remplissait qu'environ 56 % de --explore-map-w, quelle que soit sa
	   valeur, d'où les augmentations de pourcentage sans effet visible.
	   Le desktop n'a jamais ce problème : .explore--hero .explore__map
	   pose déjà `width` (pas `max-width`), plus haut dans ce fichier. */
	.explore__mapband .explore__map {
		--explore-map-w: min(85%, 480px);
		width: var(--explore-map-w);
	}

	.explore__mapband .explore__map [data-department] {
		fill: var(--sand-125);
		stroke: var(--sand-400);
		stroke-width: 1.1px;
		stroke-opacity: 0.55;
		cursor: default;
	}

	.explore__mapband .explore__map [data-department].is-current {
		fill: var(--green-300);
		stroke: var(--green-600);
		stroke-width: 1.4px;
		stroke-opacity: 0.9;
	}

	/* --- La note d'usage ---
	   Même arbitrage que sur desktop (« Click a green region ») : le
	   risque de ne jamais découvrir le geste pèse plus lourd que la règle
	   contre les consignes (docs/PREMORTEM.md). Doublée d'une poignée
	   permanente sur le feuillet centré (.explore__feuillet-grip) et d'un
	   petit mouvement joué une fois par session (explore.js) — trois
	   indices redondants pour un geste qui n'a pas d'équivalent ailleurs
	   sur le site. */
	.explore__mobile-hint {
		text-align: center;
		font-family: var(--font-display);
		/* Mobile « grand » : agrandi d'un cran (--text-lg) — palier petit
		   écran (≤ 24rem) resté sur --text-base, voir plus bas. */
		font-size: var(--text-lg);
		color: var(--green-700);
		opacity: 0.85;
		margin: 0;
	}

	/* Petit écran (≤ 24rem, iPhone mini/SE) : disposition validée à cette
	   taille (carte et note) — le mobile « grand » ci-dessus les agrandit,
	   ce palier revient explicitement aux valeurs d'origine plutôt que de
	   les laisser dériver avec le mobile large. Le débord hors du padding
	   (.explore__mapband, plus haut) est lui aussi annulé : la disposition
	   validée ici comptait sur le padding d'origine. */
	@media (max-width: 24rem) {

		.explore__mapband {
			margin-inline: 0;
		}

		.explore__mapband .explore__map {
			--explore-map-w: min(86%, 340px);
		}

		.explore__mobile-hint {
			font-size: var(--text-base);
		}
	}

	/* --- Le dépli plein écran ---
	   `position: fixed` : un vrai plein écran, qui ne dépend pas du
	   défilement de la page au moment de l'ouverture. explore.js pilote
	   l'ouverture/fermeture en FLIP (transform depuis/vers le rectangle du
	   feuillet d'origine) — .is-anim n'arme la transition qu'au bon
	   moment, jamais pendant le calcul initial du transform, sinon le
	   premier état se voit s'animer. */
	.explore__story {
		position: fixed;
		inset: 0;
		z-index: 100;
		opacity: 0;
		pointer-events: none;
		transform-origin: center center;
		overflow: hidden;
		/* Le fond du changement de région (le cube, assets/js/explore.js
		   setCubeProgress()) : les deux faces se creusent le temps du
		   geste, ce fond sombre se voit derrière elles — jamais visible
		   au repos (la carte couvre tout à pleine taille), ni pendant
		   le FLIP d'ouverture/fermeture (la carte reste à sa taille
		   pleine, c'est le conteneur entier qui zoome). */
		background-color: var(--green-900);
		/* La profondeur du cube. C'est ce conteneur qui la porte, pas les
		   faces : `perspective-origin` vaut alors le CENTRE DE L'ÉCRAN,
		   qui est aussi celui du cube (son axe vertical passe une
		   demi-largeur derrière l'écran, voir setCubeProgress()) — les
		   deux faces fuient donc symétriquement de part et d'autre de
		   leur arête commune, exactement ce qu'on voit sur Instagram. Une
		   valeur plus grande aplatirait la rotation jusqu'à la faire
		   ressembler à un simple glissé. */
		perspective: 900px;
		perspective-origin: 50% 50%;
		/* Le geste (page suivante/précédente, fermeture) est entièrement
		   piloté par explore.js (pointerdown/move/up) — le panoramique/zoom
		   tactile par défaut du navigateur n'a rien à faire ici, et
		   rivaliserait avec le transform posé à la main. */
		touch-action: none;
	}
	.explore__story.is-open {
		opacity: 1;
		pointer-events: auto;
	}
	.explore__story.is-anim {
		transition:
			transform var(--duration-medium) var(--ease-soft),
			opacity 0.28s ease,
			border-radius var(--duration-medium) var(--ease-soft);
	}
	/* Fermeture plus rapide que l'ouverture (2026-07-31, comme les stories
	   Instagram) : plus spécifique qu'.is-anim seule, donc gagne la
	   cascade — posée par closeStory() (assets/js/explore.js) en plus
	   d'.is-anim, jamais à l'ouverture. */
	.explore__story.is-anim.is-closing {
		transition:
			transform 180ms var(--ease-soft),
			opacity 180ms ease,
			border-radius 180ms var(--ease-soft);
	}

	.explore-story {
		position: absolute;
		inset: 0;
		background-color: var(--sand-50);
		--deep: color-mix(in srgb, var(--story-ink, var(--green-700)) 80%, black);
		/* `overflow: hidden` ne change rien au repos (le cadre plein écran
		   du dessus, `.explore__story`, coupe déjà exactement aux mêmes
		   bords) : il ne sert qu'au changement de région (switchStoryTo(),
		   assets/js/explore.js), quand cette carte rétrécit et prend des
		   coins arrondis — sans lui, les photos d'angle (carrées)
		   dépasseraient du coin arrondi de la carte pendant le geste. */
		overflow: hidden;
	}

	/* --- Les deux faces du cube ---
	   Rien au repos : tout est posé en ligne par explore.js
	   (setCubeProgress()) le temps de la rotation seulement. Ces deux
	   déclarations préparent le terrain : `backface-visibility` pour
	   qu'une face frôlant les 90° ne laisse jamais entrevoir son envers,
	   et `will-change` pour que le compositeur garde les deux faces sur
	   leur propre calque pendant qu'elles tournent au doigt. */
	.explore__story.is-cube .explore-story {
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		will-change: transform;
	}

	.explore-story__progress {
		position: absolute;
		top: max(var(--space-3), env(safe-area-inset-top));
		left: var(--space-4);
		right: calc(var(--space-4) + 40px);
		z-index: 4;
		display: flex;
		gap: 5px;
	}
	.explore-story__seg {
		flex: 1;
		height: 3px;
		border-radius: 2px;
		background-color: rgba(255, 255, 255, 0.35);
		overflow: hidden;
	}
	/* Le remplissage du segment : `--p` (0 → 1) est posé image par image
	   par la minuterie (assets/js/explore.js, paintProgress()) — un
	   `scaleX` sur un bloc déjà à pleine largeur plutôt qu'une `width`
	   animée : c'est la seule des deux qui se compose sans repasser par
	   la mise en page à chaque frame. Segments passés : `--p` à 1 ;
	   à venir : 0. En reduced-motion, la minuterie ne tourne pas et le
	   segment courant reste simplement plein. */
	.explore-story__seg::after {
		content: '';
		display: block;
		height: 100%;
		width: 100%;
		transform: scaleX(var(--p, 0));
		transform-origin: left center;
		background-color: #fff;
	}
	/* Barre sombre sur une page composée en collage (fond clair, texturé
	   — voir .explore-story__page--collage) : la barre blanche par défaut
	   y disparaissait presque. Classe posée par explore.js, setStoryPage()
	   — lue sur la page active elle-même, pas sur son numéro. */
	.explore-story__progress.is-on-light .explore-story__seg {
		background-color: rgba(51, 56, 25, 0.2);
	}
	.explore-story__progress.is-on-light .explore-story__seg::after {
		background-color: #333819;
	}

	.explore-story__close {
		position: absolute;
		top: max(var(--space-2), env(safe-area-inset-top));
		right: var(--space-3);
		z-index: 4;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: none;
		background-color: rgba(20, 18, 10, 0.32);
		color: #fff;
		font-size: 20px;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	.explore-story__close:focus-visible {
		outline: none;
		box-shadow: var(--focus-ring);
	}

	/* Les pages sont EMPILÉES, plus posées côte à côte sur un rail qui
	   glisse (révisé le 2026-08-28) : Instagram coupe franchement d'un
	   média au suivant à l'intérieur d'une même story, seul le
	   changement de story est un mouvement. Deux gains au passage :
	   `.explore-story__track` ne porte plus de `transform`, donc n'est
	   plus sa propre racine d'empilement — les pieds de page peuvent
	   enfin passer AU-DESSUS des zones de tap (z-index 3 contre 2), qui
	   n'ont plus besoin de s'arrêter 130 px avant le bas de l'écran. */
	.explore-story__track {
		position: absolute;
		inset: 0;
	}

	.explore-story__page {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		/* `visibility` et non `display` : les photos des pages non
		   affichées restent chargées et mesurées, la coupe est donc
		   instantanée. `pointer-events` coupé avec — sans lui, le lien du
		   pied de page d'une page cachée resterait cliquable par-dessus
		   celle qu'on regarde. */
		visibility: hidden;
		pointer-events: none;
	}
	/* Le `pointer-events: auto` est porté par `.is-open` (2026-08-29) :
	   réactiver la souris sur un DESCENDANT d'un élément en
	   `pointer-events: none` la réactive vraiment — c'est ainsi qu'on
	   perce un trou dans un calque. Une page restée dans le conteneur
	   après la fermeture captait donc tous les clics de la page d'accueil,
	   invisible (`opacity: 0`) mais bien là, plein écran et en z-index
	   100 : on ne pouvait plus rouvrir aucun feuillet. explore.js vide
	   désormais le conteneur en fin de fermeture ; cette portée-ci est la
	   seconde ceinture. */
	.explore__story.is-open .explore-story__page.is-current {
		visibility: visible;
		pointer-events: auto;
	}

	/* Plein écran (révisé le 2026-07-31) : en flex:1 1 auto, la photo ne
	   couvrait que l'espace restant AU-DESSUS du pied de page — quand une
	   légende était saisie, une bande de fond uni apparaissait sous la
	   photo au lieu qu'elle continue derrière. position:absolute + inset:0
	   la fait couvrir la page entière ; .explore-story__title et
	   .explore-story__foot flottent par-dessus (eux aussi en position
	   absolue), comme un vrai plein écran plutôt qu'un empilement. */
	.explore-story__photo {
		position: absolute;
		inset: 0;
		background-color: var(--deep);
	}
	.explore-story__photo-img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Même motif que le placeholder desktop
	   (.explore-page__photo-placeholder) : un papier plus sourd et deux
	   coins à l'encre, jamais une icône d'image cassée ni une photo de
	   banque (CONCEPT.md §9). */
	.explore-story__photo-placeholder {
		position: absolute;
		inset: 0;
		background-color: var(--deep);
	}
	.explore-story__photo-placeholder::before,
	.explore-story__photo-placeholder::after {
		content: '';
		position: absolute;
		width: 32px;
		aspect-ratio: 1;
		border-color: rgba(255, 249, 246, 0.4);
	}
	.explore-story__photo-placeholder::before {
		top: 8%;
		left: 8%;
		border-style: solid none none solid;
		border-width: 1px;
	}
	.explore-story__photo-placeholder::after {
		right: 8%;
		bottom: 8%;
		border-style: none solid solid none;
		border-width: 1px;
	}

	/* Épinglé en bas plutôt qu'en flux (révisé le 2026-07-31, même
	   raison que .explore-story__photo ci-dessus) : flex:none le
	   plaçait après la photo dans le flux, lui laissant sa propre bande
	   de hauteur au lieu de se poser par-dessus elle. */
	.explore-story__foot {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		/* Au-dessus des zones de tap (z-index 2) : le lien qu'il porte se
		   touche vraiment, sans que la pagination ait à laisser une bande
		   morte en bas d'écran (voir .explore-story__zone plus bas). */
		z-index: 3;
		/* Bas un peu remonté (2026-07-31) : collé à l'arête de l'écran,
		   la légende de la page 1 se lisait comme un sous-titrage plutôt
		   qu'une note posée dans la marge. */
		padding: var(--space-4) var(--space-6) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(to top, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0));
		color: #fff;
		display: flex;
		flex-direction: column;
		gap: 3px;
	}

	.explore-story__foot--btn {
		gap: var(--space-1);
	}

	/* Scrim du haut, jumeau du dégradé du pied de page : sans lui, le
	   grand titre (ci-dessous) ne tenait que sur son drop-shadow — pas
	   assez contre un ciel clair. Absent des pages composées (papier
	   crème, rien à protéger) et, pour l'instant, des pages 2/3 déduites
	   (titre petit, dans l'angle, moins exposé) : seule la page 1 le
	   porte. */
	.explore-story__page:not(.explore-story__page--collage) .explore-story__title {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
	}

	/* Titre de région, PAGE 1 SEULEMENT : un repère épinglé en haut,
	   manuscrit et grand (jumeau visuel de .explore-page__heading
	   desktop, même pin) — assez visible pour se lire sur une photo
	   quelconque, d'où le drop-shadow ET le scrim ci-dessus. Les pages
	   2/3 ne le répètent plus à cette taille (.explore-story__title--
	   corner ci-dessous, révisé le 2026-07-31) : la page 1 donne le
	   lieu, les autres ne font que le rappeler discrètement. */
	.explore-story__title {
		/* Simple repère, jamais un contrôle : le clic doit traverser
		   jusqu'aux zones de tap dessous, même sur sa bande pleine
		   largeur (nécessaire au scrim, ci-dessus). */
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 3;
		display: flex;
		align-items: center;
		gap: 0.35em;
		margin: 0;
		padding: calc(env(safe-area-inset-top, 0px) + 3.25rem) var(--space-4) var(--space-8);
		font-family: var(--font-display);
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.1;
		color: #fff;
		filter:
			drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
			drop-shadow(0 3px 10px rgba(0, 0, 0, 0.35));
	}
	.explore-story__title::before {
		content: '';
		display: block;
		width: 0.62em;
		aspect-ratio: 33.81 / 41.48;
		flex: none;
		background-color: #fff;
		-webkit-mask: url('../svg/deco/pin.svg') center / contain no-repeat;
		        mask: url('../svg/deco/pin.svg') center / contain no-repeat;
	}

	/* Titre des pages 2/3 : coin haut-GAUCHE (révisé le 2026-07-31 — la
	   droite entrait en conflit avec la croix de fermeture), plus petit,
	   sans pin — pour qu'on ne le confonde jamais avec le titre de la
	   page 1. Couleur par défaut pensée pour une photo (page déduite,
	   .explore-story__page sans modificateur) : blanc + ombre, comme le
	   grand titre. Sur une page composée (.explore-story__page--collage,
	   fond texturé clair), l'ombre n'a plus d'objet et le blanc
	   disparaîtrait — la règle suivante repasse à l'encre. */
	.explore-story__title--corner {
		pointer-events: none;
		position: absolute;
		/* Remonté (2026-07-31), mais pas jusqu'à la hauteur de la croix
		   de fermeture (1.05rem essayé, trop serré contre la barre de
		   progression) — un entre-deux. */
		top: calc(env(safe-area-inset-top, 0px) + 2rem);
		left: var(--space-4);
		right: auto;
		z-index: 3;
		margin: 0;
		max-width: 55%;
		text-align: left;
		font-family: var(--font-display);
		font-size: 0.95rem;
		font-weight: 500;
		line-height: 1.2;
		color: #fff;
		filter:
			drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
			drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
	}
	.explore-story__page--collage .explore-story__title--corner {
		color: #333819;
		opacity: 0.8;
		filter: none;
	}

	.explore-story__line {
		font-family: var(--font-display);
		font-size: 1.15rem;
		line-height: 1.3;
		margin: 0;
		/* Même besoin que le titre : lisible sur une photo quelconque,
		   en plus du dégradé déjà posé par .explore-story__foot. */
		text-shadow:
			0 1px 3px rgba(0, 0, 0, 0.5),
			0 1px 10px rgba(0, 0, 0, 0.35);
	}
	/* Légende centrée, page 1 seulement (toujours le premier enfant du
	   track — les pages 2/3 gardent leur légende alignée à gauche, elles
	   n'ont pas été touchées par cette demande). */
	.explore-story__track > .explore-story__page:first-child .explore-story__line {
		text-align: center;
	}
	.explore-story__annotation {
		font-family: var(--font-display);
		font-style: italic;
		font-size: var(--text-sm);
		opacity: 0.9;
		margin: var(--space-1) 0 0;
	}

	/* --- Pied de page des pages composées (papier crème, pas une photo) :
	   pas de dégradé sombre, la saison reste simplement à l'encre.
	   Épinglé en bas et hors du flux (2026-07-31, second passage) —
	   jumeau d'.explore-story__foot, et condition pour que
	   .story-collage__scene ci-dessous puisse couvrir la page entière :
	   tant qu'il était dans le flux, il rognait la boîte des coordonnées
	   du collage. */
	.story-collage__foot {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 3; /* même raison qu'.explore-story__foot ci-dessus. */
		padding: var(--space-2) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}
	.story-collage__season {
		margin: 0;
		font-family: var(--font-display);
		font-size: 1.05rem;
		color: #333819;
	}

	/* --- Lien d'action de la story (« Go birding », « la suite de cette
	   page ») — révisé le 2026-07-31 après un premier essai (cercle
	   scribble) qui ne se lisait pas comme actionnable. Ni un bouton de
	   la pièce (.btn, trop « chrome UI »), ni un texte seul (rien ne dit
	   qu'il se touche, sans survol) : une petite carte blanche posée de
	   travers — même traitement que .story-collage__photo (fond blanc,
	   ombre, un tirage de plus sur la page) — avec une flèche dessinée à
	   la main plutôt que le caractère « → ». La FORME bornée + l'ICÔNE
	   sont ce qui fait reconnaître un objet qu'on touche ; le lettrage
	   manuscrit et le tracé à la main le gardent dans le carnet plutôt
	   que dans la pièce. */
	.explore-story__btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		align-self: flex-start;
		margin-top: var(--space-1);
		padding: 0.6em 0.9em;
		/* Même matière que les cartes-liens de la double page desktop
		   (harmonisation du 2026-07-31, après quelques heures de blanc à
		   l'encre le même jour). La story reste « un objet à part, pas une
		   déclinaison » (CONCEPT.md §12.10) — elle partage ce composant,
		   pas sa mise en page. */
		background-color: var(--link-card-bg);
		border-radius: 3px;
		box-shadow:
			0 10px 20px -10px rgba(51, 56, 25, 0.45),
			0 3px 8px rgba(51, 56, 25, 0.2);
		transform: rotate(-1.6deg);
		font-family: var(--font-display);
		font-size: var(--text-base);
		font-weight: 500;
		color: var(--link-card-ink);
		text-decoration: none;
	}
	/* Même flèche que les cartes desktop (assets/svg/ui/arrow.svg) : plus
	   appuyée que fleche3-droite, qui s'évanouissait à cette taille.
	   Masque et proportions posés ici, plus en ligne par
	   motmot_render_explore_story_btn(). */
	.explore-story__btn-arrow {
		width: 1.15em;
		aspect-ratio: 26 / 20;
		flex: none;
		background-color: var(--link-card-ink);
		-webkit-mask: url('../svg/ui/arrow.svg') center / contain no-repeat;
		        mask: url('../svg/ui/arrow.svg') center / contain no-repeat;
	}
	.explore-story__btn:focus-visible {
		outline: none;
		box-shadow: var(--focus-ring);
	}

	/* --- Pages 2/3 composées en collage libre (_motmot_story_p2/_p3,
	   template-parts/patterns/explore-story-collage.php) : même moteur que
	   .explore-page__node--* (explore-page.php desktop), namespace
	   distinct pour ne pas coupler les deux gabarits. Fond papier crème
	   (--sand-50, révisé le 2026-07-31) — une page du carnet, comme le
	   desktop, pas un panneau de couleur : les pages 1 et 3 dérivées
	   restent sur la photo, ce fond ne s'y voit presque jamais. */
	.explore-story__page--collage {
		/* Couleur de repli le temps du chargement de l'image (posée en
		   inline par explore-story-collage.php, motmot_get_explore_
		   story_bg_url()) — jamais visible seule en usage normal. */
		background-color: var(--sand-50);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	/* Plein écran (révisé le 2026-07-31, second passage) : la scène EST la
	   page, exactement comme la scène de l'éditeur est l'écran entier
	   (.cge-canvas--story .cge-stage, inc/meta-boxes.php). La version
	   précédente la laissait dans le flux (flex:1 1 auto) pour pousser le
	   pied de page vers le bas — la boîte des coordonnées valait alors
	   « écran moins le pied », et tout ce qui était composé remontait
	   d'autant : jusqu'à ~12 % de la hauteur d'écran pour un nœud placé
	   bas, et pas du même montant page 2 (sans saison) que page 3 (avec),
	   ni d'un téléphone à l'autre (le pied est en rem + safe-area, pas en
	   %). Le pied passe donc en absolu, comme .explore-story__foot le
	   fait déjà pour les pages déduites : il se pose PAR-DESSUS la
	   composition au lieu de la comprimer, et ce qui est composé dans
	   l'éditeur retombe au bon endroit. */
	.story-collage__scene {
		position: absolute;
		inset: 0;
		container-type: inline-size;
	}
	.story-collage__node {
		position: absolute;
		left: calc(var(--x, 50) * 1%);
		top: calc(var(--y, 50) * 1%);
		transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg));
	}
	.story-collage__node--photo,
	.story-collage__node--deco {
		width: calc(var(--w, 24) * 1%);
	}
	.story-collage__node--text {
		font-family: var(--font-display);
		font-size: calc(var(--w, 5) * 1cqw);
		font-weight: 500;
		line-height: 1.25;
		text-align: center;
		white-space: pre;
		/* Encre sur papier, comme .explore-page__node--text desktop —
		   le fond est crème (ci-dessus), plus le panneau sombre pour
		   lequel #fff9f6 avait été pensé. */
		color: #333819;
	}
	/* Masquage par format, saisi dans l'éditeur (case « Visible en
	   grand/petit format ») — même inversion que .dest-collage__node,
	   dOff valant ici « absent du grand format ». Oublié au premier
	   passage (2026-07-31) : la case ne faisait rien en ligne, le nœud
	   s'affichait dans les deux formats. */
	.story-collage__node.is-doff { display: none; }
	/* Écran plus large et court qu'un iPhone mini/Pro Max (≈9/19.5) —
	   iPhone SE et proches (≈9/16) : bascule vers le second jeu de
	   coordonnées (mx/my/mw/mr/mcs), composé séparément dans l'éditeur
	   admin (inc/meta-boxes.php motmot_render_collage_editor(), variante
	   « story », second cadre). Seuil de départ, à ajuster sur vrai
	   téléphone comme le reste de cette section (CONCEPT.md §12.10) — pas
	   de container query : c'est l'écran réel du visiteur qui doit
	   trancher, pas la taille d'un conteneur interne. */
	@media (min-aspect-ratio: 9/17.5) {
		.story-collage__node {
			left: calc(var(--mx, var(--x, 50)) * 1%);
			top: calc(var(--my, var(--y, 50)) * 1%);
			transform: translate(-50%, -50%) rotate(calc(var(--mr, var(--r, 0)) * 1deg));
		}
		.story-collage__node--photo,
		.story-collage__node--deco {
			width: calc(var(--mw, var(--w, 24)) * 1%);
		}
		.story-collage__node--text {
			font-size: calc(var(--mw, var(--w, 5)) * 1cqw);
		}
		/* Petit format : on inverse le masquage (même ordre que
		   .dest-collage__node — is-moff passe après, donc un nœud coché
		   dans les deux cases reste caché ici). */
		.story-collage__node.is-doff { display: block; }
		.story-collage__node.is-moff { display: none; }
	}
	.story-collage__node--deco {
		/* Encre verte sur papier, comme .explore-page__node--deco desktop. */
		background-color: var(--green-600);
		-webkit-mask: var(--deco) center / contain no-repeat;
		        mask: var(--deco) center / contain no-repeat;
		pointer-events: none;
		opacity: 0.85;
	}
	/* Cadre blanc du tirage, proportionnel à sa largeur — mêmes multiples
	   que .explore-page__photo (--fpt/--fps/--fpb, réglés par le style de
	   tirage dans l'éditeur). */
	.story-collage__photo {
		background: #ffffff;
		padding:
			calc(var(--pw, 20) * var(--fpt, 0.05) * 1cqw)
			calc(var(--pw, 20) * var(--fps, 0.05) * 1cqw)
			calc(var(--pw, 20) * var(--fpb, 0.09) * 1cqw);
		box-shadow:
			0 18px 40px -14px rgba(0, 0, 0, 0.5),
			0 6px 14px rgba(0, 0, 0, 0.22);
	}
	/* Cadre de recadrage, jumeau de .explore-page__photo-frame (desktop) :
	   porte le format et coupe le zoom à son bord. */
	.story-collage__photo-frame {
		display: block;
		width: 100%;
		aspect-ratio: var(--ar, 4 / 3);
		overflow: hidden;
	}
	.story-collage__photo-img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: calc(var(--fx, 50) * 1%) calc(var(--fy, 50) * 1%);
		transform: scale(var(--fz, 1));
		transform-origin: calc(var(--fx, 50) * 1%) calc(var(--fy, 50) * 1%);
	}
	.story-collage__photo-placeholder {
		position: relative;
		aspect-ratio: var(--ar, 4 / 3);
		background-color: #efe9dc;
		box-shadow: inset 0 0 0 1px rgba(51, 56, 25, 0.14);
	}
	.story-collage__caption {
		margin-top: calc(var(--pw, 20) * 0.05cqw);
		font-family: var(--font-display);
		font-size: calc(var(--cs, 2.2) * 1cqw);
		font-weight: 500;
		line-height: 1.25;
		text-align: center;
		word-break: break-word;
		color: #333819;
		/* Décalage libre réglé au glissé dans l'éditeur, en cqw comme le
		   reste de la scène — jumeau de .explore-page__caption et de
		   .dest-free-photo__cap. Oublié au premier passage (2026-07-31) :
		   la légende se glissait en admin et ne bougeait pas en ligne.
		   Commun aux deux formats, comme fx/fy — pas de clé mobile
		   dédiée (motmot_sanitize_collage_items() n'en stocke qu'un jeu). */
		transform: translate(calc(var(--cdx, 0) * 1cqw), calc(var(--cdy, 0) * 1cqw));
	}
	/* Même seuil que .story-collage__node ci-dessus : le cadre du tirage
	   (--pw) et la légende (--cs) suivent aussi le second jeu de
	   coordonnées sur petit écran. --fpt/--fps/--fpb (style de tirage) et
	   --ar/--fx/--fy (cadrage) restent communs aux deux formats, comme
	   dans l'éditeur — rien à basculer pour eux. */
	@media (min-aspect-ratio: 9/17.5) {
		.story-collage__photo {
			padding:
				calc(var(--mpw, var(--pw, 20)) * var(--fpt, 0.05) * 1cqw)
				calc(var(--mpw, var(--pw, 20)) * var(--fps, 0.05) * 1cqw)
				calc(var(--mpw, var(--pw, 20)) * var(--fpb, 0.09) * 1cqw);
		}
		.story-collage__caption {
			margin-top: calc(var(--mpw, var(--pw, 20)) * 0.05cqw);
			font-size: calc(var(--mcs, var(--cs, 2.2)) * 1cqw);
		}
	}
	.story-collage__node--capout .story-collage__caption {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		/* Pas de changement de couleur ici (contrairement à une première
		   version pensée pour un fond sombre) : .story-collage__caption
		   est déjà en encre, juste ce qu'il faut sur du papier crème —
		   même choix que .explore-page__node--capout desktop, qui ne
		   change pas non plus la couleur de la légende. */
	}

	.explore-story__photo--stamp {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.explore-story__stamp {
		width: 34%;
		-webkit-mask: var(--deco) center / contain no-repeat;
		        mask: var(--deco) center / contain no-repeat;
		background-color: rgba(255, 249, 246, 0.85);
	}

	/* Zones de tap gauche/droite, aux proportions d'Instagram (30 % /
	   70 %) : explore.js y écoute aussi le glissé — horizontal pour
	   changer de région, vers le bas pour fermer, l'axe du geste
	   verrouillé au premier mouvement pour ne jamais confondre les deux.

	   Elles couvrent désormais TOUTE la hauteur (révisé le 2026-08-28).
	   La bande morte de 130 px qu'elles laissaient en bas venait du
	   `transform` que portait alors .explore-story__track (le rail des
	   pages qui glissait) : il en faisait sa propre racine d'empilement,
	   et tout ce qu'il contenait — pied de page compris — restait capté
	   sous ces zones quel que soit son z-index. Depuis que la page change
	   par une coupe, le rail n'a plus de transform : les pieds de page
	   passent simplement au-dessus (z-index 3), et un tap n'importe où
	   ailleurs pagine, comme chez Instagram. */
	.explore-story__zone {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
	}
	.explore-story__zone--back {
		left: 0;
		width: 30%;
		right: auto;
	}
	.explore-story__zone--fwd {
		left: 30%;
		right: 0;
		width: auto;
	}

	/* --- L'appui maintenu : la photo seule ---
	   Doigt posé plus de 200 ms (assets/js/explore.js, HOLD_MS) : la
	   minuterie se fige et tout le mobilier s'efface — barres, croix,
	   titre, pied de page — pour laisser voir l'image sans rien dessus,
	   exactement comme Instagram. Relâcher rend tout et reprend la
	   minuterie là où elle en était. Le mobilier seulement : ce qui est
	   composé sur une page de collage (.story-collage__node) fait partie
	   de l'image, il reste. */
	.explore-story__progress,
	.explore-story__close,
	.explore-story__title,
	.explore-story__title--corner,
	.explore-story__foot,
	.story-collage__foot {
		transition: opacity 0.18s ease;
	}
	.explore__story.is-held .explore-story__progress,
	.explore__story.is-held .explore-story__close,
	.explore__story.is-held .explore-story__title,
	.explore__story.is-held .explore-story__title--corner,
	.explore__story.is-held .explore-story__foot,
	.explore__story.is-held .story-collage__foot {
		opacity: 0;
		pointer-events: none;
	}
}

@media (max-width: 63.999rem) and (prefers-reduced-motion: reduce) {
	.explore__story.is-anim {
		transition: opacity 0.15s linear;
	}
	/* Reprise nécessaire : .is-anim.is-closing (plus haut) est plus
	   spécifique qu'.is-anim seule et gagnerait sinon la cascade même
	   ici, réintroduisant un transform animé — invariant 1, rien ne
	   bouge sans un geste, et un livre statique n'anime jamais un
	   déplacement/redimensionnement, seule l'opacité est tolérée. */
	.explore__story.is-anim.is-closing {
		transition: opacity 0.15s linear;
	}
}

/* ============================================================
   POST-ARTICLE — fiche d'un article de blog (single.php)
   Le journal est « les nouvelles entrées du carnet » (CONCEPT.md §8) :
   structure de la pièce (header/footer standard), habillage à l'encre
   du carnet — papier crème (.section--light), titre manuscrit, photos
   façon polaroid posées dans le texte, post-it pour une note tirée du
   texte. Les classes .post-photo / .post-photos / .post-note ne sont
   pas pilotées par le gabarit : elles se posent à la main dans le
   contenu de l'article, comme le ferait l'autrice depuis l'éditeur.
   ============================================================ */

/* Fond de rebond élastique iOS/macOS (Safari n'étend que la couleur,
   pas l'image de fond, cf. .single-destination un peu plus haut dans
   ce fichier) : --sand-150, pas --sand-50, pour rester proche du grain
   réel du papier plutôt qu'un blanc franc dans la zone de rebond. */
body.single-post {
	background-color: var(--sand-150);
}

.post-article {
	padding-block: clamp(28px, 5vw, 56px) clamp(48px, 6vw, 88px);
}

/* Colonne de lecture à 760px (2026-08-26). Plusieurs largeurs essayées
   (880, 960, 1200 avec texte replié, plein cadre en width:100vw pour le
   hero) — toutes rejetées par l'auteur du site ou soupçonnées de créer
   un décalage selon le navigateur. Revenu à une colonne unique, sobre,
   hero inclus dedans (pas de sortie de conteneur). Ne pas réintroduire
   de technique 100vw ici sans redemander : voir [[blog-article-template]]
   mémoire pour l'historique complet de ces allers-retours. */
.post-article__inner {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 3vw, 32px);
}

/* --- Ligne de tête : retour à gauche, méta à droite ----------------
   Les deux repères tiennent la largeur pleine de la colonne, comme la
   photo et le corps de texte. Se replie proprement (flex-wrap) si la
   place manque ; vérifié sur un rang de 360 à 1054 px. */
.post-article__topline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
}

/* --- Bouton retour ------------------------------------------------
   Simple lien en ligne, posé à gauche de .post-article__topline.
   Une version flottante fixe (position:fixed, glued au bord gauche du
   viewport) a été essayée le 2026-08-26 puis retirée : bien que le
   centrage de .post-article__inner soit resté mathématiquement correct
   pendant tout cet essai (vérifié par diagnostics répétés), un élément
   seul, ancré au bord gauche, sans rien pour l'équilibrer à droite,
   donnait l'impression que toute la page « penchait » à gauche — un
   effet de composition, pas un bug de mise en page. Ne pas réintroduire
   d'élément flottant asymétrique sur cette page sans redemander. */
.post-article__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--green-600);
	font-family: var(--font-text);
	font-weight: var(--weight-semibold);
	font-size: var(--text-sm);
	transition: color var(--duration-fast) var(--ease-soft);
}
.post-article__back:hover,
.post-article__back:focus-visible {
	color: var(--accent-500);
}
.post-article__back-icon {
	width: var(--icon-md);
	height: var(--icon-md);
	flex-shrink: 0;
}

/* --- En-tête : date, temps de lecture, titre, auteur·rice --- */

.post-article__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.post-article__title {
	font-family: var(--font-display); /* Shantell Sans */
	/* Réduit le 2026-08-27 (était clamp(2.1rem, 3.2vw + 1rem, 3.4rem)).
	   La colonne se fige à 712 px de contenu dès 768 px de viewport,
	   alors que l'ancien plafond de 3.4rem = 54,4 px continuait de
	   pousser : sur tout écran ≥ 1220 px le titre basculait sur 3 lignes.
	   Mesuré sur le titre de l'article 183, la bascule 2→3 lignes se
	   situe entre 54 et 55 px — l'ancienne valeur passait 0,4 px
	   au-dessus du seuil. Le nouveau plafond (2.9rem = 46,4 px) garde
	   8,6 px de marge sous ce seuil. Vérifié 2 lignes de 768 à 2400 px ;
	   sous 768 px la colonne rétrécit et 3 lignes sont normales. */
	font-size: clamp(1.9rem, 2.4vw + 0.9rem, 2.9rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--green-800);
	margin: 0;
	/* Titre justifié (2026-08-27) : les lignes pleines tombent sur le
	   même bord droit que la photo et les paragraphes en dessous. La
	   dernière ligne reste ferrée à gauche — PAS de text-align-last:
	   justify. Mesuré sur ce titre : l'étirer jusqu'au bord porterait
	   ses deux espaces de 17 px à 107 px (×6,3), et le gabarit sert
	   tous les articles du journal — un titre dont la dernière ligne
	   fait deux mots donnerait des trous de 300 px. Un titre tenant sur
	   une seule ligne n'est pas affecté (une ligne unique est la
	   dernière ligne, elle reste donc au naturel). */
	text-align: justify;
}

.post-article__byline {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-1);
}

.post-article__byline-avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	object-fit: cover;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(33, 36, 15, 0.25);
}

.post-article__byline-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.post-article__byline-name {
	font-family: var(--font-text);
	font-weight: var(--weight-semibold);
	color: var(--green-800);
	font-size: var(--text-sm);
}

.post-article__byline-role {
	font-family: var(--font-text);
	color: var(--sand-500);
	font-size: var(--text-xs);
}

/* --- Image mise en avant : plein cadre (2026-08-26) -----------------
   Sort du conteneur .post-article__inner (760px) pour aller jusqu'aux
   bords du viewport — technique classique de la marge négative
   (width:100vw + margin recalée), pas de coin arrondi ni d'ombre
   puisqu'il n'y a plus de bord à détacher. Le contraste avec la colonne
   de texte, plus étroite juste en dessous, est le geste : un vrai plein
   cadre, pas une boîte élargie à mi-chemin (cf. commentaire sur
   .post-article__inner plus haut). */
.post-article__hero {
	margin: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.post-article__hero-img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--ratio-landscape);
	object-fit: cover;
}

/* --- Corps de l'article : prose ------------------------------------
   PAS de classe .t-body sur ce div (retirée le 2026-08-27) : c'est elle
   qui causait le décalage « fantôme » traqué pendant trois sessions. Le
   texte se lisait calé à gauche, avec une poche de blanc à droite qui
   apparaissait après le premier rendu — et toutes les mesures de
   centrage revenaient bonnes, y compris sur le poste concerné
   (.post-article__inner à 147 px de marge de chaque côté, sans zoom ni
   barre de défilement).
   Cause réelle : .t-body pose `max-width: var(--measure-ideal)` (66ch =
   583 px). Dans une colonne dont le contenu fait 712 px, le corps de
   texte était donc plafonné 128,7 px plus court que la photo et le
   titre, et ferré à gauche faute de marge auto. La photo, elle, allait
   bien jusqu'au bord — d'où un bord droit qui n'existait que pour elle.
   Les trois autres déclarations de .t-body (font-family, font-size,
   line-height) sont déjà celles du `body` dans base.css : la classe
   n'apportait rien d'autre que ce plafond.
   Ne pas la remettre, et ne pas poser de max-width ici : sur cette page
   .post-article__inner (760 px) EST la mesure de lecture. Piège de
   diagnostic à retenir : mesurer l'extrême droite de l'encre de
   l'article entier ne révèle rien, c'est la photo qui donne ce maximum
   — il faut mesurer la largeur des paragraphes eux-mêmes. */
.post-article__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	color: var(--green-800);
}

.post-article__body > p {
	margin: 0;
	text-align: justify;
	text-align-last: left; /* la dernière ligne d'un paragraphe ne s'étire pas */
	hyphens: auto;
}

.post-article__body h2 {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 1vw + 1.2rem, 1.8rem);
	font-weight: 500;
	color: var(--green-800);
	line-height: 1.2;
	letter-spacing: -0.005em;
	margin-top: var(--space-4);
}

.post-article__body ul,
.post-article__body ol {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-left: 1.3em;
}
.post-article__body ul { list-style: disc; }
.post-article__body ol { list-style: decimal; }
.post-article__body li { padding-left: 4px; }
.post-article__body li::marker { color: var(--accent-500); }

.post-article__body a {
	color: var(--accent-600);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--sand-300);
}
.post-article__body a:hover,
.post-article__body a:focus-visible {
	text-decoration-color: currentColor;
}

.post-article__body strong {
	font-weight: var(--weight-semibold);
	color: var(--green-800);
}

/* Repli sobre pour une image posée sans les classes .post-photo —
   ex. un futur article illustré directement depuis l'éditeur de blocs. */
.post-article__body img:not(.post-photo__img) {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	margin-inline: auto;
}

/* Bloc « Références » : même contenu, registre typographique en retrait
   (citations, pas de la lecture courante). */
.post-references {
	color: var(--sand-500);
}
.post-references a {
	color: inherit;
	text-decoration-color: var(--sand-300);
}

/* --- Photo unique, façon polaroid, posée au fil du texte --- */

.post-photo {
	margin: var(--space-2) auto;
	width: 100%;
	max-width: 400px;
}

.post-photo__inner {
	background: #fff;
	padding: 12px 12px 14px;
	border-radius: 2px;
	box-shadow:
		0 16px 34px -12px rgba(20, 40, 30, 0.30),
		0 4px 10px rgba(20, 40, 30, 0.10);
	transform: rotate(var(--tilt, -1.5deg));
}

.post-photo__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--ratio-landscape-tall);
	object-fit: cover;
	border-radius: 1px;
}

.post-photo__caption {
	margin-top: 10px;
	padding: 0 4px 2px;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: var(--green-800);
}

/* --- Duo de photos, côte à côte à partir du format tablette --- */

.post-photos {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 5vw, 36px);
	width: 100%;
	padding-block: var(--space-2);
}
@media (min-width: 36rem) {
	.post-photos {
		grid-template-columns: repeat(2, 1fr);
	}
}
.post-photos .post-photo {
	max-width: none;
	margin: 0;
}

/* Variante trio (2026-08-25) : une photo pour chacune des espèces citées
   dans une liste, posées « au même niveau » — aucune ne prend le pas sur
   les autres. Deux classes (.post-photos.post-photos--trio) pour battre
   .post-photos en spécificité, peu importe l'ordre des règles. Reste à 1
   colonne jusqu'à 48rem (pas d'état 2+1 orphelin) puis passe à 3. */
.post-photos.post-photos--trio {
	grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
	.post-photos.post-photos--trio {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Post-it : une note tirée du texte (même matériau que
   .dest-reco__card / .google-reviews__card — ruban en masque CSS sur
   assets/svg/deco/tape.svg, contour et texte en --green-500, seul cran
   qui tient l'AA 4.5:1 sur le papier clair, cf. tokens.css). --- */

.post-note {
	position: relative;
	max-width: 440px;
	margin: var(--space-4) auto;
	padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 26px);
	background-color: transparent;
	border: 2px solid var(--green-500);
	border-radius: 2px;
	transform: rotate(-1deg);
}

.post-note__tape {
	position: absolute;
	top: -24px;
	left: 50%;
	width: 66px;
	height: 48px;
	background-color: var(--green-500);
	filter: drop-shadow(0 2px 3px rgba(33, 36, 15, 0.4));
	-webkit-mask: url('../svg/deco/tape.svg') center / contain no-repeat;
	        mask: url('../svg/deco/tape.svg') center / contain no-repeat;
	transform: translateX(-50%) rotate(16deg);
	pointer-events: none;
}

.post-note__text {
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 1vw + 0.9rem, 1.25rem);
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	color: var(--green-500);
	margin: 0;
}