/*
 * SUISSE MOI 2026
 *
 * Le site est sombre par parti pris, pas par oubli : c'est le fond qui fait
 * exister une vignette vidéo. Les couleurs sont donc déclarées une seule fois,
 * sans media query de thème clair.
 *
 * Sommaire
 *   1. Jetons
 *   2. Socle
 *   3. Polices
 *   4. En-tête et pied
 *   5. Lecteur vidéo en façade
 *   6. Carte du monde
 *   7. Murs de vignettes
 *   8. Aventure
 *   9. Récit
 *  10. L'histoire
 *  11. Formulaires
 *  12. Utilitaires
 */

/* ---------- 1. Jetons ---------- */
:root {
	--sm-fond:        #0B0E0F;
	--sm-surface:     #14191A;
	--sm-surface-2:   #1D2325;
	--sm-ligne:       #2C3436;
	--sm-encre:       #EDEBE6;
	--sm-attenue:     #8E9A9C;
	--sm-accent:      #E2604F;

	--sm-ere1:        #E2604F;
	--sm-ere2:        #9DB884;
	--sm-ere3:        #E0B457;
	/* Avant SUISSE MOI : Areriroru et le sac à dos. Un bleu froid, pour que la
	   période antérieure se distingue des trois âges du projet lui-même. */
	--sm-ere0:        #6E93A8;

	--sm-titre:       'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
	--sm-texte:       'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
	--sm-donnee:      'DM Mono', ui-monospace, Menlo, monospace;

	--sm-marge:       clamp(20px, 4vw, 44px);
	--sm-lecture:     68ch;
	--sm-rayon:       3px;
	--sm-transition:  180ms ease;
}

/* ---------- 2. Socle ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--sm-fond);
	color: var(--sm-encre);
	font-family: var(--sm-texte);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--sm-titre);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0;
}

p { margin: 0; }

img,
video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--sm-accent);
	outline-offset: 3px;
}

/* Un lien d'évitement est le premier élément focalisable de chaque page. */
.sm-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--sm-encre);
	color: var(--sm-fond);
	padding: 12px 18px;
	z-index: 100;
}
.sm-evitement:focus { left: 8px; top: 8px; }

.sm-conteneur {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--sm-marge);
}

.sm-donnee,
.sm-etiquette {
	font-family: var(--sm-donnee);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sm-attenue);
	font-variant-numeric: tabular-nums;
}

/* ---------- 3. Polices ---------- */
/* Servies depuis le thème : charger Google Fonts transmettrait l'adresse IP
   des visiteurs à Google, ce qui pose un problème de conformité en Suisse. */
@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2-variations');
	font-weight: 400 800;
	font-stretch: 75% 100%;
	font-display: swap;
}
@font-face {
	font-family: 'Instrument Sans';
	src: url('../fonts/InstrumentSans-Variable.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-display: swap;
}
@font-face {
	font-family: 'DM Mono';
	src: url('../fonts/DMMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

/* ---------- 4. En-tête et pied ---------- */
.sm-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 74px;
	border-bottom: 1px solid var(--sm-ligne);
	position: relative;
	z-index: 20;
}

.sm-marque {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex: none;
}
.sm-marque svg { width: 40px; height: 40px; color: var(--sm-encre); flex: none; }
.sm-marque__mot {
	font-family: var(--sm-titre);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.08em;
	font-stretch: 92%;
}

.sm-nav ul {
	display: flex;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 15px;
}
.sm-nav a { text-decoration: none; color: #B9C2C4; transition: color var(--sm-transition); }
.sm-nav a:hover,
.sm-nav .current-menu-item a { color: var(--sm-encre); }
/* Le repli sort le même <ul> que wp_nav_menu : il hérite donc de tout le style
   ci-dessus, cette règle n'est là que pour le rendre identifiable. */
.sm-menu-repli { }

.sm-bascule {
	display: none;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
	color: var(--sm-encre);
}
.sm-bascule span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	margin: 5px 0;
}

@media (max-width: 860px) {
	.sm-bascule { display: block; }
	.sm-nav {
		position: absolute;
		inset: 74px 0 auto;
		background: var(--sm-surface);
		border-bottom: 1px solid var(--sm-ligne);
		display: none;
		padding: 12px var(--sm-marge) 24px;
	}
	.sm-nav[data-ouvert='true'] { display: block; }
	.sm-nav ul { flex-direction: column; gap: 4px; }
	.sm-nav a { display: block; padding: 12px 0; font-size: 18px; }
}

.sm-pied {
	border-top: 1px solid var(--sm-ligne);
	margin-top: 72px;
	padding-block: 48px 64px;
	color: var(--sm-attenue);
	font-size: 14px;
}
.sm-pied__haut {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
	align-items: flex-start;
}
.sm-pied svg { width: 96px; height: 96px; color: var(--sm-encre); }
.sm-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sm-pied a { text-decoration: none; }
.sm-pied a:hover { color: var(--sm-encre); }
.sm-pied__bas {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	justify-content: space-between;
	align-items: center;
}
.sm-pied__bas p { margin: 0; }
/* La bannière Infomaniak paie l'hébergement : elle reste visible, jamais display:none. */
.sm-pied__hebergeur { display: flex; align-items: center; gap: 10px; }
.sm-pied__hebergeur img { display: block; width: 132px; height: auto; }

/* ---------- 5. Lecteur vidéo en façade ---------- */
/* On n'appelle YouTube qu'au clic : la page reste légère et aucun traceur
   n'est déposé avant une action du visiteur. */
.sm-lecteur {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--sm-surface);
	border-radius: var(--sm-rayon);
	overflow: hidden;
}

.sm-lecteur__declencheur {
	all: unset;
	display: block;
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.sm-lecteur__vignette {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease, opacity var(--sm-transition);
}
.sm-lecteur__declencheur:hover .sm-lecteur__vignette { transform: scale(1.03); }

.sm-lecteur__play {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 76px;
	height: 76px;
	border: 2px solid rgba(237, 235, 230, 0.9);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(11, 14, 15, 0.35);
	backdrop-filter: blur(2px);
	transition: background var(--sm-transition), scale var(--sm-transition);
}
.sm-lecteur__play::after {
	content: '';
	border-left: 20px solid var(--sm-encre);
	border-block: 12px solid transparent;
	margin-left: 5px;
}
.sm-lecteur__declencheur:hover .sm-lecteur__play { background: var(--sm-accent); scale: 1.06; }
.sm-lecteur__declencheur:hover .sm-lecteur__play::after { border-left-color: var(--sm-fond); }

.sm-lecteur__duree {
	position: absolute;
	right: 10px;
	bottom: 10px;
	background: rgba(11, 14, 15, 0.85);
	font-family: var(--sm-donnee);
	font-size: 12px;
	padding: 3px 7px;
	border-radius: 2px;
	font-variant-numeric: tabular-nums;
}

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

@media (max-width: 640px) {
	.sm-lecteur__play { width: 54px; height: 54px; }
	.sm-lecteur__play::after { border-left-width: 14px; border-block-width: 9px; }
}

/* ---------- 6. Carte du monde ---------- */
.sm-carte { padding-block: 38px 44px; }

.sm-carte__tete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.sm-carte__tete h2 { font-size: clamp(22px, 3vw, 28px); }
.sm-carte__tete p { color: var(--sm-attenue); font-size: 14px; margin-top: 6px; }

.sm-curseur { display: flex; gap: 6px; flex-wrap: wrap; }
.sm-puce {
	font-family: var(--sm-donnee);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 9px 14px;
	border: 1px solid var(--sm-ligne);
	border-radius: 2px;
	background: none;
	color: var(--sm-attenue);
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--sm-transition), background var(--sm-transition), border-color var(--sm-transition);
}
.sm-puce:hover { color: var(--sm-encre); border-color: var(--sm-attenue); }
.sm-puce[aria-pressed='true'] {
	background: var(--sm-encre);
	border-color: var(--sm-encre);
	color: var(--sm-fond);
}

.sm-carte__cadre {
	position: relative;
	background: #0F1517;
	border: 1px solid #212A2C;
	border-radius: var(--sm-rayon);
	overflow: hidden;
}
.sm-carte__cadre svg { display: block; width: 100%; height: auto; }

.sm-carte .terre { fill: #1B2426; stroke: #283336; stroke-width: 0.6; }
.sm-carte .graticule { stroke: #161E20; stroke-width: 0.4; fill: none; }

/* Cercle de clic : invisible, mais assez large pour se viser au doigt quand la
   pastille maigrit au zoom. `pointer-events: all` le rend cliquable bien qu'il
   ne peigne rien. */
.sm-carte .point {
	fill: transparent;
	stroke: none;
	pointer-events: all;
	cursor: pointer;
}
/* La pastille visible ne reçoit aucun événement, sinon elle volerait le survol
   au cercle de clic qui est en dessous. */
.sm-carte .pastille {
	stroke: #0F1517;
	pointer-events: none;
	transition: opacity var(--sm-transition);
}
.sm-carte .pastille--ere0 { fill: var(--sm-ere0); }
.sm-carte .pastille--ere1 { fill: var(--sm-ere1); }
.sm-carte .pastille--ere2 { fill: var(--sm-ere2); }
.sm-carte .pastille--histoire { fill: var(--sm-ere3); }
/* Pas d'agrandissement au survol : `r` s'exprime en degrés de carte, une valeur
   fixe couvrait tout le cadre en vue Suisse. On éclaircit plutôt. */
.sm-carte .point:hover + .pastille,
.sm-carte .point:focus-visible + .pastille { fill: var(--sm-encre); }

.sm-carte__bulle {
	position: absolute;
	background: var(--sm-encre);
	color: var(--sm-fond);
	border-radius: var(--sm-rayon);
	padding: 12px 14px;
	width: 210px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--sm-transition);
	z-index: 4;
}
.sm-carte__bulle[data-visible='true'] { opacity: 1; }
.sm-carte__bulle strong { font-family: var(--sm-titre); font-size: 16px; display: block; }
.sm-carte__bulle span {
	font-family: var(--sm-donnee);
	font-size: 11px;
	color: #5B6669;
	display: block;
	margin-top: 3px;
}

/* Sur téléphone la carte devient une liste : une carte du monde au pouce ne se
   manipule pas, on rate les points et on abandonne. */
.sm-carte__liste { display: none; }
@media (max-width: 760px) {
	.sm-carte__cadre { display: none; }
	.sm-carte__liste { display: grid; gap: 8px; }
}
.sm-destination {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px;
	background: var(--sm-surface);
	border: 1px solid #1F2729;
	border-radius: var(--sm-rayon);
	text-decoration: none;
}
.sm-destination__pastille { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sm-destination__nom { font-family: var(--sm-titre); font-weight: 700; font-size: 16px; flex: 1; }
.sm-destination__compte { font-family: var(--sm-donnee); font-size: 11px; color: var(--sm-attenue); }

/* ---------- 7. Murs de vignettes ---------- */
.sm-mur { padding-block: 8px 48px; }
.sm-mur__tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.sm-mur__tete h2 { font-size: clamp(20px, 2.6vw, 24px); }

.sm-grille {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Quatre colonnes plutôt que six : au-delà, les titres passent sur trois lignes
   et se coupent, or ce sont des phrases entières. */
@media (min-width: 1200px) {
	.sm-grille { grid-template-columns: repeat(4, 1fr); }
}

.sm-carte-video a { text-decoration: none; display: block; }
.sm-carte-video h3 {
	font-family: var(--sm-texte);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: 0;
	margin: 12px 0 4px;
}
.sm-carte-video__meta { font-family: var(--sm-donnee); font-size: 11px; color: var(--sm-attenue); }
.sm-carte-video__vignette {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--sm-rayon);
	overflow: hidden;
	background: var(--sm-surface);
}
.sm-carte-video__vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}
.sm-carte-video a:hover .sm-carte-video__vignette img { transform: scale(1.04); }

/* ---------- 8. Aventure ---------- */
.sm-heros {
	position: relative;
	min-height: 520px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.sm-heros--court { min-height: 340px; }
.sm-heros__fond { position: absolute; inset: 0; }
.sm-heros__fond img { width: 100%; height: 100%; object-fit: cover; }
.sm-heros__voile {
	position: absolute;
	inset: 0;
	/* Le voile assombrit surtout le bas, là où se pose le texte. La valeur de
	   départ était trop douce : sur une vignette claire (sable, neige, ciel),
	   la ligne de survol en accent et les chiffres devenaient illisibles.
	   Le dégradé mord donc plus tôt et plus fort dans le tiers bas. */
	background: linear-gradient(
		180deg,
		rgba(11, 14, 15, 0.25) 0%,
		rgba(11, 14, 15, 0.10) 35%,
		rgba(11, 14, 15, 0.62) 68%,
		rgba(11, 14, 15, 0.96) 100%
	);
}
.sm-heros__texte { position: relative; z-index: 2; padding-block: 40px; width: 100%; }
.sm-heros h1 { font-size: clamp(38px, 6vw, 66px); font-stretch: 92%; }
.sm-heros__sur {
	font-family: var(--sm-donnee);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sm-accent);
	margin-bottom: 12px;
	/* Filet de sécurité : même avec le voile, une vignette très claire peut
	   remonter sous cette ligne de 12 px. */
	text-shadow: 0 1px 3px rgba(11, 14, 15, 0.85);
}
.sm-heros__chiffres {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 14px;
	font-family: var(--sm-donnee);
	font-size: 13px;
	color: #C6CFD1;
	text-shadow: 0 1px 3px rgba(11, 14, 15, 0.85);
}
.sm-heros__chiffres b { color: var(--sm-encre); font-weight: 500; }

/* Playlist en colonne à côté du lecteur : le Mexique a quatorze vidéos, empilées
   on n'en voit jamais plus de deux. */
.sm-playlist { display: grid; grid-template-columns: 1fr 320px; gap: 24px; margin-top: 34px; }
@media (max-width: 1000px) { .sm-playlist { grid-template-columns: 1fr; } }

.sm-playlist__pistes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 520px;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sm-piste a {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 9px;
	border-radius: 2px;
	text-decoration: none;
	transition: background var(--sm-transition);
}
.sm-piste a:hover,
.sm-piste[aria-current='true'] a { background: var(--sm-surface-2); }
.sm-piste img { width: 84px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; flex: none; }
.sm-piste p { font-size: 13px; font-weight: 600; line-height: 1.3; }
.sm-piste span { font-family: var(--sm-donnee); font-size: 10.5px; color: var(--sm-attenue); }

/* ---------- 9. Récit ---------- */
.sm-recit__lecteur { aspect-ratio: 16 / 9; }
@media (min-width: 1000px) { .sm-recit__lecteur { max-height: 76vh; } }

.sm-recit__corps { max-width: var(--sm-lecture); margin-inline: auto; padding-top: 40px; }
.sm-recit__sur {
	font-family: var(--sm-donnee);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sm-accent);
}
.sm-recit__corps h1 { font-size: clamp(30px, 4.4vw, 44px); margin-top: 12px; }
.sm-recit__signature {
	font-family: var(--sm-donnee);
	font-size: 12px;
	color: var(--sm-attenue);
	margin-top: 16px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--sm-ligne);
}

/* Le contenu des archives : 13'000 signes d'un bloc sans intertitre. La reprise
   se fait article par article, mais la mise en forme les rend déjà lisibles. */
.sm-contenu { font-size: 17px; line-height: 1.72; color: #C3CBCD; }
.sm-contenu > * + * { margin-top: 1.1em; }
.sm-contenu h2 {
	font-size: clamp(21px, 2.6vw, 26px);
	color: var(--sm-encre);
	margin-top: 2em;
}
.sm-contenu h3 { font-size: 19px; color: var(--sm-encre); margin-top: 1.7em; }
.sm-contenu a { color: var(--sm-accent); }
.sm-contenu img { border-radius: var(--sm-rayon); margin-block: 1.6em; }
.sm-contenu figure { margin: 1.6em 0; }
.sm-contenu figcaption {
	font-family: var(--sm-donnee);
	font-size: 12px;
	color: var(--sm-attenue);
	margin-top: 8px;
}
.sm-contenu blockquote {
	border-left: 2px solid var(--sm-accent);
	padding-left: 18px;
	margin-left: 0;
	color: var(--sm-encre);
	font-size: 19px;
}
.sm-contenu ul,
.sm-contenu ol { padding-left: 1.3em; }
.sm-contenu li + li { margin-top: 0.4em; }
/* Un tableau large défile dans son propre cadre, jamais la page. */
.sm-contenu table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sm-contenu td,
.sm-contenu th { border-bottom: 1px solid var(--sm-ligne); padding: 10px 12px; text-align: left; }
.sm-contenu .wp-block-table { overflow-x: auto; }

/* Maillage interne : les articles d'un même voyage ne se liaient pas entre eux. */
.sm-suite {
	max-width: var(--sm-lecture);
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--sm-ligne);
	display: flex;
	gap: 20px;
	justify-content: space-between;
	flex-wrap: wrap;
}
.sm-suite a { text-decoration: none; display: block; max-width: 46%; }
.sm-suite a:only-child { max-width: 100%; }
@media (max-width: 640px) { .sm-suite a { max-width: 100%; } }
.sm-suite__label {
	font-family: var(--sm-donnee);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sm-attenue);
}
.sm-suite__titre { font-family: var(--sm-titre); font-weight: 700; font-size: 18px; margin-top: 5px; }
.sm-suite a:hover .sm-suite__titre { color: var(--sm-accent); }

/* ---------- 10. L'histoire ---------- */
.sm-epoque {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 36px;
	padding-block: 40px;
	border-top: 1px solid var(--sm-ligne);
}
@media (max-width: 860px) { .sm-epoque { grid-template-columns: 1fr; gap: 16px; } }

/* Les années restent en vue pendant la lecture de l'époque : on sait toujours
   dans quel temps on se trouve, sans frise décorative en travers de l'écran. */
.sm-epoque__reperes { position: sticky; top: 24px; align-self: start; }
@media (max-width: 860px) { .sm-epoque__reperes { position: static; } }
.sm-epoque__annees { font-family: var(--sm-titre); font-weight: 800; font-size: 32px; line-height: 1; }
.sm-epoque__nom {
	font-family: var(--sm-donnee);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 8px;
}
.sm-epoque__barre { height: 3px; width: 46px; margin-top: 12px; border-radius: 2px; }
.sm-epoque h2 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 12px; }
.sm-epoque p { color: #B6BFC1; max-width: 62ch; }
.sm-epoque--ere0 { --teinte: var(--sm-ere0); }
.sm-epoque--ere1 { --teinte: var(--sm-ere1); }
.sm-epoque--ere2 { --teinte: var(--sm-ere2); }
.sm-epoque--ere3 { --teinte: var(--sm-ere3); }
.sm-epoque__annees,
.sm-epoque__nom { color: var(--teinte); }
.sm-epoque__barre { background: var(--teinte); }

/* ---------- 11. Formulaires ---------- */
.sm-champ { margin-bottom: 18px; }
.sm-champ label {
	font-family: var(--sm-donnee);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sm-attenue);
	display: block;
	margin-bottom: 8px;
}
.sm-champ input,
.sm-champ textarea {
	width: 100%;
	background: #111718;
	border: 1px solid var(--sm-ligne);
	border-radius: 2px;
	color: var(--sm-encre);
	font-family: var(--sm-texte);
	font-size: 16px;
	padding: 12px 14px;
}
.sm-champ textarea { min-height: 150px; resize: vertical; }

.sm-bouton {
	font-family: var(--sm-donnee);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--sm-accent);
	color: var(--sm-fond);
	border: 0;
	border-radius: 2px;
	padding: 14px 24px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: filter var(--sm-transition);
}
.sm-bouton:hover { filter: brightness(1.1); }

.sm-presse { list-style: none; margin: 0; padding: 0; }
.sm-presse li {
	display: flex;
	gap: 18px;
	align-items: baseline;
	padding-block: 16px;
	border-bottom: 1px solid var(--sm-ligne);
}
.sm-presse__qui { font-family: var(--sm-titre); font-weight: 700; font-size: 17px; width: 110px; flex: none; }
.sm-presse__quoi { flex: 1; font-size: 15px; color: #B6BFC1; }
.sm-presse__an { font-family: var(--sm-donnee); font-size: 12px; color: var(--sm-attenue); }
@media (max-width: 560px) {
	.sm-presse li { flex-wrap: wrap; gap: 6px 14px; }
	.sm-presse__qui { width: auto; }
}

/* ---------- 12. Utilitaires ---------- */
.sm-lede { color: var(--sm-attenue); font-size: 18px; max-width: 64ch; margin-top: 16px; }
.sm-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 860px) { .sm-deux { grid-template-columns: 1fr; gap: 40px; } }

.sm-invisible {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sm-defile { overflow-x: auto; }

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

/* ---------- 13. Revue de presse ---------- */
.sm-presse__tete { padding-block: 56px 8px; }
.sm-presse__tete h1 { font-size: clamp(36px, 6vw, 60px); font-stretch: 92%; }
.sm-presse__vers-integrale { margin-top: 24px; }

.sm-compteurs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--sm-ligne);
	border: 1px solid var(--sm-ligne);
	border-radius: var(--sm-rayon);
	margin-top: 40px;
	overflow: hidden;
}
.sm-compteur { background: var(--sm-fond); padding: 24px 20px; }
.sm-compteur--majeur { background: var(--sm-surface); }
.sm-compteur__nombre {
	display: block;
	font-family: var(--sm-titre);
	font-weight: 800;
	font-size: clamp(30px, 4vw, 42px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.sm-compteur--majeur .sm-compteur__nombre { color: var(--sm-accent); }
.sm-compteur__libelle {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	color: var(--sm-attenue);
	line-height: 1.35;
}
.sm-compteurs__note {
	margin-top: 14px;
	font-family: var(--sm-donnee);
	font-size: 12px;
	color: var(--sm-attenue);
}

.sm-selection { margin-top: 64px; }

.sm-passage {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 32px;
	padding-block: 36px;
	border-top: 1px solid var(--sm-ligne);
}
@media (max-width: 860px) { .sm-passage { grid-template-columns: 1fr; gap: 14px; } }

.sm-passage__reperes { display: grid; gap: 7px; align-content: start; }
.sm-passage__media {
	font-family: var(--sm-titre);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.15;
}
.sm-passage__corps h3 {
	font-family: var(--sm-texte);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.35;
	letter-spacing: 0;
}
.sm-passage__contexte { color: #B6BFC1; margin-top: 10px; max-width: 62ch; font-size: 16px; }
.sm-passage__corps > *:nth-child(3) { margin-top: 20px; }

.sm-lecteur--presse { max-width: 620px; }

.sm-audio { width: 100%; max-width: 620px; }

.sm-passage__lien {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sm-donnee);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sm-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}
.sm-passage__lien:hover { color: var(--sm-encre); }

/* Reprise internationale : les titres valent mieux qu'un chiffre seul. */
.sm-titres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sm-titres li {
	font-family: var(--sm-donnee);
	font-size: 11px;
	letter-spacing: 0.06em;
	border: 1px solid var(--sm-ligne);
	border-radius: 2px;
	padding: 6px 10px;
	color: var(--sm-attenue);
}
.sm-passage__astuce { margin-top: 14px; font-size: 14px; color: var(--sm-attenue); }
.sm-passage__astuce code {
	font-family: var(--sm-donnee);
	font-size: 13px;
	background: var(--sm-surface-2);
	padding: 3px 7px;
	border-radius: 2px;
	color: var(--sm-encre);
}

.sm-integrale { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--sm-ligne); }
.sm-integrale h2 { font-size: clamp(24px, 3vw, 32px); }
/*
 * La liste d'origine fait 219 entrées. Elle était bornée à 60vh dans un cadre à
 * défilement : sur téléphone c'est un piège de scroll, et le contenu paraissait
 * inaccessible. Elle coule maintenant en entier, c'est le lien d'ancrage du haut
 * de page qui évite d'avoir à la traverser.
 */
.sm-integrale__liste {
	margin-top: 28px;
	font-size: 15px;
	border-left: 1px solid var(--sm-ligne);
	padding-left: 20px;
}

/* ---------- 14. Compléments récit ---------- */
.sm-recit__image { width: 100%; max-height: 76vh; object-fit: cover; }
.sm-recit__sur a { color: inherit; text-decoration: none; }
.sm-recit__sur a:hover { text-decoration: underline; }
.sm-recit__autres { margin-top: 48px; display: grid; gap: 20px; }
.sm-recit__autres h2 { font-size: 22px; margin-bottom: 4px; }

/* ---------- 15. Compléments accueil ---------- */
/* Le lecteur de la une occupe tout le héros : la vidéo est le plus grand
   élément de l'écran, c'est la règle qui a décidé de la mise en page. */
.sm-heros--une { min-height: min(78vh, 720px); }
.sm-heros__fond .sm-lecteur--plein {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border-radius: 0;
}
.sm-heros__fond .sm-lecteur--plein .sm-lecteur__vignette { height: 100%; }
.sm-heros__voile { pointer-events: none; }
.sm-heros__texte { pointer-events: none; }
.sm-heros__texte a { pointer-events: auto; }
.sm-heros h1 a:hover { color: var(--sm-accent); }

/* ---------- 16. Logo ---------- */
/* Le fichier est vectorisé : le bandeau typographique devient dense sous 60 px.
   Dans la barre de navigation, le badge sert de signe et c'est le mot « SUISSE
   MOI » posé à côté qui porte la lecture. */
.sm-marque__signe { width: 46px; height: 46px; flex: none; }
.sm-pied__signe { width: 104px; height: 104px; }

/* ---------- 17. Page L'histoire ---------- */
.sm-histoire { display: grid; grid-template-columns: 200px 1fr; gap: 48px; margin-top: 48px; }
@media (max-width: 860px) { .sm-histoire { grid-template-columns: 1fr; gap: 24px; } }

.sm-histoire__reperes { position: sticky; top: 24px; align-self: start; }
@media (max-width: 860px) { .sm-histoire__reperes { position: static; } }
.sm-histoire__reperes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
@media (max-width: 860px) {
	.sm-histoire__reperes ul { grid-auto-flow: column; gap: 16px; overflow-x: auto; }
}
.sm-histoire__reperes a { text-decoration: none; display: grid; gap: 6px; }
.sm-histoire__reperes .sm-epoque__barre { margin: 0 0 4px; }
.sm-histoire__reperes .sm-epoque__annees { font-size: 26px; }
.sm-histoire__texte { max-width: var(--sm-lecture); }

/* Liste déroulante des aventures, dans la barre de filtres de la page vidéos.
   Elle reprend l'habillage des pastilles pour rester dans la même ligne. */
.sm-puce--choix { padding: 0; display: inline-flex; }
.sm-puce--choix select {
	appearance: none;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	padding: 8px 30px 8px 14px;
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 15px top 55%, right 10px top 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
.sm-puce--choix select option { color: #16191A; background: #EDEBE6; }

/* Gabarit de page. Même colonne de lecture que l'article : au-delà d'environ
   70 caractères par ligne, un texte long devient pénible à suivre. */
.sm-page__corps { max-width: 720px; margin-top: 32px; }
.sm-page__image { margin: 32px 0 0; }
.sm-page__image img { width: 100%; height: auto; border-radius: 18px; }

/* Illustration dans le corps d'une page. Les photos d'archive sont de petite
   définition : on les laisse à leur taille plutôt que de les étirer. */
.sm-illustration { margin: 32px 0; }
.sm-illustration img { max-width: 100%; height: auto; border-radius: 14px; display: block; }
.sm-illustration figcaption {
	margin-top: 10px;
	font-family: var(--sm-donnee);
	font-size: 12px;
	color: var(--sm-attenue);
}

/* Étiquettes des points de la carte : cachées en vue monde, où vingt-sept noms
   se recouvrent, visibles dès qu'on resserre sur l'Europe ou la Suisse. */
.sm-carte__svg .point__nom {
	fill: var(--sm-encre);
	font-family: var(--sm-donnee);
	paint-order: stroke;
	stroke: rgba(11, 14, 15, 0.85);
	/* stroke-width est posée par carte.js : elle doit suivre le zoom, comme le
	   corps du texte. Une valeur fixe ici produit une tache noire en vue Suisse. */
	stroke-linejoin: round;
	opacity: 1;
	transition: opacity 260ms ease;
	pointer-events: none;
}
.sm-carte__svg .pastille { transition: fill var(--sm-transition); }

/* Fond de carte : les contours sont désormais de vrais tracés de pays, donc on
   trace aussi la frontière, sans quoi la Suisse se fond dans ses voisins. */
.sm-carte__svg .terre path {
	fill: #2E383D;
	stroke: #0B0E0F;
	stroke-width: 0.12;
	vector-effect: non-scaling-stroke;
}

/* Couche de détail alpine, visible seulement en vue Europe et Suisse : à
   l'échelle du monde elle se superpose au fond simplifié et brouille le trait. */
.sm-carte__svg .detail-frontieres,
.sm-carte__svg .detail-lacs,
.sm-carte__svg .detail-rivieres { opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.sm-carte__svg[data-vue='europe'] .detail-frontieres,
.sm-carte__svg[data-vue='europe'] .detail-lacs,
.sm-carte__svg[data-vue='europe'] .detail-rivieres,
.sm-carte__svg[data-vue='suisse'] .detail-frontieres,
.sm-carte__svg[data-vue='suisse'] .detail-lacs,
.sm-carte__svg[data-vue='suisse'] .detail-rivieres { opacity: 1; }
.sm-carte__svg .detail-frontieres path { fill: #2E383D; stroke: #141B1E; }
/* Les lacs et les rivières doivent trancher franchement sur la terre, sinon on
   ne distingue rien : ce sont eux qui rendent la Suisse reconnaissable. */
.sm-carte__svg .detail-lacs path { fill: #14313F; stroke: #1D4557; stroke-width: 0.02; }
.sm-carte__svg .detail-rivieres path { fill: none; stroke: #1D4557; stroke-linecap: round; }

/* Nombre de vidéos, au centre de la pastille. Blanc, gras, sans événement de
   souris : c'est le cercle de clic en dessous qui reçoit tout. */
.sm-carte .pastille__chiffre {
	fill: #FFFFFF;
	font-family: var(--sm-donnee);
	font-weight: 600;
	pointer-events: none;
	transition: opacity 200ms ease;
}