/*
Theme Name: Vigie Afrique
Theme URI: https://salysenegal.net/
Author: Vigie Afrique
Description: Thème code-pur écrit de zéro pour Vigie Afrique — la fiche-pays institutionnelle traitée par un média indépendant. Ivoire papier, un seul accent ocre brûlé, Spectral + Public Sans self-hostées.
Version: 1.1.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: vigieafrique
*/

/* ================================================================
   1. FONTS SELF-HOSTED (P-086 — aucune requête vers Google)
   ================================================================ */
@font-face {
	font-family: "Public Sans";
	src: url("assets/fonts/public-sans-v21-latin-regular.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Public Sans";
	src: url("assets/fonts/public-sans-v21-latin-italic.woff2") format("woff2");
	font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
	font-family: "Public Sans";
	src: url("assets/fonts/public-sans-v21-latin-600.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Spectral";
	src: url("assets/fonts/spectral-v15-latin-600.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Spectral";
	src: url("assets/fonts/spectral-v15-latin-700.woff2") format("woff2");
	font-weight: 700; font-style: normal; font-display: swap;
}

/* ================================================================
   2. TOKENS — mode clair (défaut) puis mode sombre (P-110 : les
   deux jeux définis en custom properties, contrastes AA vérifiés)
   ================================================================ */
:root {
	/* palette clair — cf. BRIEF-MARQUE.md §3 */
	--vga-fond: #F7F2E7;
	--vga-carte: #FDFBF4;
	--vga-bordure: #E4DCCB;
	--vga-encre: #262019;        /* 14.43:1 sur fond */
	--vga-encre-douce: #5C5344;  /* 6.78:1 sur fond */
	--vga-ocre: #9C4A0E;         /* 5.53:1 sur fond, 5.97:1 sur carte */
	--vga-ocre-fonce: #7A3A0B;
	--vga-ocre-voile: #F0E3D2;
	--vga-sur-ocre: #FFFDF6;     /* 6.07:1 sur ocre */
	/* typo */
	--vga-display: "Spectral", Georgia, "Times New Roman", serif;
	--vga-corps: "Public Sans", -apple-system, "Segoe UI", Arial, sans-serif;
	--vga-t-xs: .8125rem; --vga-t-s: .9375rem; --vga-t-base: 1.0625rem;
	--vga-t-m: 1.25rem; --vga-t-l: clamp(1.5rem, 2.5vw, 1.875rem);
	--vga-t-xl: clamp(1.9rem, 4vw, 2.6rem); --vga-t-xxl: clamp(2.3rem, 5vw, 3.4rem);
	/* géométrie */
	--vga-rayon: 4px; --vga-rayon-pilule: 999px;
	--vga-ombre: 0 1px 3px rgba(38, 32, 25, .08), 0 6px 18px rgba(38, 32, 25, .06);
	--vga-e1: .25rem; --vga-e2: .5rem; --vga-e3: 1rem;
	--vga-e4: 1.5rem; --vga-e5: 2.5rem; --vga-e6: 4rem;
	--vga-mesure: 68ch;
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	:root {
		--vga-fond: #211B13;
		--vga-carte: #2A231A;
		--vga-bordure: #3A3226;
		--vga-encre: #EDE5D6;        /* 13.63:1 sur fond */
		--vga-encre-douce: #B8AD99;  /* 7.70:1 sur fond */
		--vga-ocre: #E89A55;         /* 7.46:1 sur fond, 6.78:1 sur carte */
		--vga-ocre-fonce: #F2B27C;
		--vga-ocre-voile: #332A1E;
		--vga-sur-ocre: #211B13;     /* 7.46:1 sur ocre */
		--vga-ombre: 0 1px 3px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .25);
	}
}

/* ================================================================
   3. SOCLE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
	margin: 0;
	background: var(--vga-fond);
	color: var(--vga-encre);
	font-family: var(--vga-corps);
	font-size: var(--vga-t-base);
	line-height: 1.65;
}
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--vga-display); font-weight: 600; line-height: 1.15; color: var(--vga-encre); }
a { color: var(--vga-ocre); text-underline-offset: .15em; }
a:hover { color: var(--vga-ocre-fonce); }
:focus-visible { outline: 3px solid var(--vga-ocre); outline-offset: 2px; border-radius: 2px; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

.acces-rapide {
	position: absolute; left: -999px; top: 0; z-index: 100;
	background: var(--vga-encre); color: var(--vga-fond);
	padding: var(--vga-e2) var(--vga-e3); border-radius: 0 0 var(--vga-rayon) 0;
}
.acces-rapide:focus { left: 0; color: var(--vga-fond); }

.contenu-principal { max-width: 72rem; margin: 0 auto; padding: var(--vga-e4) var(--vga-e3) var(--vga-e6); }
.home .contenu-principal { padding-top: 0; }

/* ================================================================
   4. ENTÊTE — barre fine + sélecteur de destination
   ================================================================ */
.entete-vigie { background: var(--vga-carte); border-bottom: 3px solid var(--vga-ocre); }
.entete-vigie__interieur {
	max-width: 72rem; margin: 0 auto; padding: var(--vga-e2) var(--vga-e3);
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--vga-e2) var(--vga-e4);
}
.entete-vigie__marque { display: flex; align-items: center; gap: var(--vga-e2); text-decoration: none; min-height: 44px; }
.entete-vigie__ecusson { width: 34px; height: 40px; flex: none; }
.entete-vigie__nom { font-family: var(--vga-display); font-weight: 700; font-size: var(--vga-t-m); color: var(--vga-encre); white-space: nowrap; }
.entete-vigie__nom em { font-style: normal; color: var(--vga-ocre); }
.entete-vigie__selecteur { flex: 1 1 16rem; min-width: 14rem; }

.selecteur-destination__etiquette {
	display: block; font-size: var(--vga-t-xs); font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase; color: var(--vga-encre-douce);
	margin-bottom: var(--vga-e1);
}
.selecteur-destination__groupe { display: flex; }
.selecteur-destination__champ {
	flex: 1; min-width: 0; min-height: 44px;
	padding: var(--vga-e2) var(--vga-e3);
	border: 1px solid var(--vga-bordure); border-right: 0;
	border-radius: var(--vga-rayon) 0 0 var(--vga-rayon);
	background: var(--vga-fond); color: var(--vga-encre);
}
.selecteur-destination__champ::placeholder { color: var(--vga-encre-douce); opacity: 1; }
.selecteur-destination__bouton {
	min-height: 44px; padding: var(--vga-e2) var(--vga-e3);
	border: 1px solid var(--vga-ocre); border-radius: 0 var(--vga-rayon) var(--vga-rayon) 0;
	background: var(--vga-ocre); color: var(--vga-sur-ocre); font-weight: 600; white-space: nowrap;
}
.selecteur-destination__bouton:hover { background: var(--vga-ocre-fonce); border-color: var(--vga-ocre-fonce); color: var(--vga-sur-ocre); }
@media (prefers-color-scheme: dark) {
	.selecteur-destination__bouton:hover { color: #211B13; }
}

/* Nav flex, aucune puce (P-004) */
.barre-destinations { flex: 1 1 100%; }
.barre-destinations__liste {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0 var(--vga-e3);
}
.barre-destinations__item { margin: 0; }
.barre-destinations__liste a, .barre-destinations__lien {
	display: inline-flex; align-items: center; min-height: 44px;
	color: var(--vga-encre-douce); text-decoration: none;
	font-size: var(--vga-t-s); font-weight: 600;
	border-bottom: 2px solid transparent;
}
.barre-destinations__liste a:hover, .barre-destinations__lien:hover { color: var(--vga-ocre); border-bottom-color: var(--vga-ocre); }

/* ================================================================
   5. FIL D'ARIANE
   ================================================================ */
.fil-ariane__liste { list-style: none; margin: 0 0 var(--vga-e4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--vga-e1); font-size: var(--vga-t-xs); color: var(--vga-encre-douce); }
.fil-ariane__maillon + .fil-ariane__maillon::before { content: "›"; margin-right: var(--vga-e1); color: var(--vga-encre-douce); }
.fil-ariane__maillon a { color: var(--vga-encre-douce); }
.fil-ariane__maillon a:hover { color: var(--vga-ocre); }

/* ================================================================
   6. ACCUEIL — refonte 2026-08-20 : héros photographique sombre,
   veille en direct, chiffres réels, grille de fiches illustrées,
   bandes contrastées. Pleine largeur via margin-inline négatif.
   ================================================================ */
.accueil-vigie { display: block; }
.accueil-vigie > * + * { margin-top: var(--vga-e6); }

.pleine-largeur, .poste-de-vigie, .compte-a-rebours, .bande-methode {
	margin-inline: calc(50% - 50vw);
}

/* En-têtes de rubrique : sur-titre petites capitales ocre + titre fort */
.rubrique-vigie {
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: var(--vga-e1) var(--vga-e4); margin-bottom: var(--vga-e4);
}
.rubrique-vigie__surtitre {
	flex: 1 1 100%; margin: 0;
	font-size: var(--vga-t-xs); font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--vga-ocre);
}
.rubrique-vigie__titre { font-size: var(--vga-t-xl); margin: 0; }
.rubrique-vigie__tout { margin-left: auto; font-weight: 600; font-size: var(--vga-t-s); white-space: nowrap; }

/* ── Poste de vigie : photo traitée sombre + sélecteur + veille ── */
.poste-de-vigie {
	/* Jeu sombre local : la photo est la même en clair et en sombre (P-110 :
	   chaque couleur de texte est posée sur le fond qu'elle recouvre). */
	--vigie-nuit: #1E1710;
	--vigie-ivoire: #F7F2E7;
	--vigie-ivoire-douce: #E4DAC8;
	--vigie-braise: #F2B27C;
	position: relative; overflow: hidden;
	background: var(--vigie-nuit);
}
.poste-de-vigie__photo {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: 0;
}
.poste-de-vigie::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(100deg, rgba(30, 23, 16, .93) 0%, rgba(30, 23, 16, .78) 46%, rgba(30, 23, 16, .5) 100%);
}
.poste-de-vigie__interieur {
	position: relative; z-index: 2;
	max-width: 72rem; margin: 0 auto;
	padding: var(--vga-e6) var(--vga-e3);
	display: grid; gap: var(--vga-e5); align-items: start;
}
@media (min-width: 900px) {
	.poste-de-vigie__interieur { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); }
}
.poste-de-vigie__marqueur {
	margin: 0 0 var(--vga-e3); font-size: var(--vga-t-xs); font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--vigie-braise);
}
.poste-de-vigie__titre {
	margin: 0 0 var(--vga-e3); font-size: var(--vga-t-xxl);
	color: var(--vigie-ivoire); max-width: 22ch;
}
.poste-de-vigie__chapo {
	margin: 0 0 var(--vga-e4); max-width: 52ch;
	color: var(--vigie-ivoire-douce); font-size: var(--vga-t-m); line-height: 1.55;
}
.poste-de-vigie__selecteur { max-width: 34rem; }
.poste-de-vigie .selecteur-destination__etiquette { color: var(--vigie-ivoire-douce); }
.poste-de-vigie .selecteur-destination__champ {
	background: var(--vigie-ivoire); color: #262019;
	border-color: var(--vigie-ivoire);
}
.poste-de-vigie .selecteur-destination__champ::placeholder { color: #5C5344; }
.poste-de-vigie .selecteur-destination__bouton {
	background: #9C4A0E; border-color: #9C4A0E; color: #FFFDF6;
}
.poste-de-vigie .selecteur-destination__bouton:hover { background: #7A3A0B; border-color: #7A3A0B; color: #FFFDF6; }
.poste-de-vigie__fiche-du-jour {
	margin: var(--vga-e4) 0 0; display: flex; flex-wrap: wrap;
	gap: var(--vga-e1) var(--vga-e2); align-items: baseline;
	font-size: var(--vga-t-s);
}
.poste-de-vigie__fiche-marqueur {
	font-size: var(--vga-t-xs); font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--vigie-braise);
	border: 1px solid rgba(242, 178, 124, .45);
	border-radius: var(--vga-rayon-pilule); padding: 2px var(--vga-e2);
}
.poste-de-vigie__fiche-du-jour a { color: var(--vigie-ivoire); font-weight: 600; }
.poste-de-vigie__fiche-du-jour a:hover { color: var(--vigie-braise); }

/* Colonne veille en direct */
.veille-directe {
	background: rgba(30, 23, 16, .62);
	border: 1px solid rgba(247, 242, 231, .16);
	border-top: 3px solid #E89A55;
	border-radius: var(--vga-rayon);
	padding: var(--vga-e4);
	backdrop-filter: blur(4px);
}
.veille-directe__titre {
	margin: 0 0 var(--vga-e3); font-family: var(--vga-corps);
	font-size: var(--vga-t-xs); font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--vigie-braise);
}
.veille-directe__titre::before {
	content: ""; display: inline-block; width: .55em; height: .55em;
	border-radius: 50%; background: #E89A55; margin-right: var(--vga-e2);
}
.veille-directe__liste { list-style: none; margin: 0 0 var(--vga-e3); padding: 0; }
.veille-directe__item { padding: var(--vga-e2) 0; }
.veille-directe__item + .veille-directe__item { border-top: 1px solid rgba(247, 242, 231, .14); }
.veille-directe__contexte { margin: 0 0 var(--vga-e1); display: flex; align-items: baseline; gap: var(--vga-e2); }
.veille-directe__pastille {
	font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
	color: var(--vigie-braise); background: rgba(232, 154, 85, .14);
	border-radius: var(--vga-rayon-pilule); padding: 1px var(--vga-e2);
}
.veille-directe__date { font-size: var(--vga-t-xs); color: var(--vigie-ivoire-douce); font-variant-numeric: tabular-nums; }
.veille-directe__lien {
	color: var(--vigie-ivoire); text-decoration: none; font-weight: 600;
	font-size: var(--vga-t-s); line-height: 1.4; display: inline-block;
}
.veille-directe__lien:hover { color: var(--vigie-braise); text-decoration: underline; }
.veille-directe__toutes { color: var(--vigie-braise); font-weight: 600; font-size: var(--vga-t-s); text-decoration: none; }
.veille-directe__toutes:hover { color: var(--vigie-ivoire); text-decoration: underline; }

/* ── Tuiles de chiffres réels ── */
.chiffres-vigie__grille {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--vga-e3);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .chiffres-vigie__grille { grid-template-columns: repeat(4, 1fr); } }
.chiffres-vigie__tuile {
	background: var(--vga-carte); border: 1px solid var(--vga-bordure);
	border-radius: var(--vga-rayon); box-shadow: var(--vga-ombre);
	padding: var(--vga-e4) var(--vga-e3); text-align: center;
	display: grid; gap: var(--vga-e1); align-content: start;
}
.chiffres-vigie__nombre {
	font-family: var(--vga-display); font-weight: 700;
	font-size: clamp(1.9rem, 3.5vw, 2.6rem); line-height: 1.05;
	color: var(--vga-ocre); font-variant-numeric: tabular-nums;
}
.chiffres-vigie__nombre--date { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.2; }
.chiffres-vigie__libelle {
	font-size: var(--vga-t-xs); font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; color: var(--vga-encre-douce);
}

/* ── Grille des fiches sécurité, illustrées ── */
.grille-fiches__cartes { display: grid; gap: var(--vga-e4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grille-fiches__cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grille-fiches__cartes { grid-template-columns: repeat(3, 1fr); } }
.grille-fiches__carte {
	background: var(--vga-carte); border: 1px solid var(--vga-bordure);
	border-radius: 6px; overflow: hidden;
	box-shadow: 0 1px 3px rgba(38, 32, 25, .1), 0 10px 28px rgba(38, 32, 25, .12);
	display: flex; flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
}
.grille-fiches__carte:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 5px rgba(38, 32, 25, .12), 0 16px 38px rgba(38, 32, 25, .16);
}
.grille-fiches__visuel { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.grille-fiches__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grille-fiches__texte { padding: var(--vga-e3) var(--vga-e4) var(--vga-e4); display: grid; gap: var(--vga-e2); align-content: start; }
.grille-fiches__contexte { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vga-e2); }
.grille-fiches__pastille {
	font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
	color: var(--vga-ocre); background: var(--vga-ocre-voile);
	border-radius: var(--vga-rayon-pilule); padding: 2px var(--vga-e2);
}
.grille-fiches__verifie { font-size: var(--vga-t-xs); color: var(--vga-encre-douce); }
.grille-fiches__nom { font-size: var(--vga-t-m); margin: 0; line-height: 1.25; }
.grille-fiches__nom a { color: var(--vga-encre); text-decoration: none; }
.grille-fiches__nom a:hover { color: var(--vga-ocre); text-decoration: underline; }
.grille-fiches__extrait { margin: 0; font-size: var(--vga-t-s); color: var(--vga-encre-douce); }

/* ── Compte à rebours vaccins : bande sombre pleine largeur ──
   Jeu de couleurs local explicite, identique en mode clair et sombre :
   chaque texte est posé sur son propre fond (P-110). */
.compte-a-rebours {
	--vga-fond: #211B13;
	--vga-carte: #2A231A;
	--vga-bordure: #3A3226;
	--vga-encre: #EDE5D6;
	--vga-encre-douce: #B8AD99;
	--vga-ocre: #E89A55;
	--vga-ocre-fonce: #F2B27C;
	--vga-ocre-voile: #332A1E;
	--vga-sur-ocre: #211B13;
	background: #211B13; color: #EDE5D6;
	border-radius: 0; padding: var(--vga-e6) var(--vga-e3);
}
.compte-a-rebours__interieur { max-width: 72rem; margin: 0 auto; }
.compte-a-rebours__surtitre {
	margin: 0 0 var(--vga-e2); font-size: var(--vga-t-xs); font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: #E89A55;
}
.compte-a-rebours__titre { font-size: var(--vga-t-xl); margin: 0 0 var(--vga-e2); color: #EDE5D6; }
.compte-a-rebours__explication { max-width: var(--vga-mesure); color: #B8AD99; margin: 0 0 var(--vga-e4); }
.compte-a-rebours__commande { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--vga-e3); }
.compte-a-rebours__champ { margin: 0; }
.compte-a-rebours__champ label { display: block; font-size: var(--vga-t-s); font-weight: 600; margin-bottom: var(--vga-e1); color: #EDE5D6; }
.compte-a-rebours__champ input {
	min-height: 44px; padding: var(--vga-e2) var(--vga-e3);
	border: 1px solid #3A3226; border-radius: var(--vga-rayon);
	background: #2A231A; color: #EDE5D6; color-scheme: dark;
}
.compte-a-rebours__calculer {
	min-height: 44px; padding: 0 var(--vga-e4);
	background: #E89A55; color: #211B13;
	border: 0; border-radius: var(--vga-rayon); font-weight: 600;
}
.compte-a-rebours__calculer:hover { background: #F2B27C; color: #211B13; }
.compte-a-rebours__resultat { margin-top: var(--vga-e4); }
.compte-a-rebours__delai { font-family: var(--vga-display); font-size: var(--vga-t-m); font-weight: 600; margin: 0 0 var(--vga-e2); color: #EDE5D6; }
.compte-a-rebours__jalons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vga-e2); }
.compte-a-rebours__jalon { background: #2A231A; color: #EDE5D6; border-left: 3px solid #E89A55; border-radius: var(--vga-rayon); padding: var(--vga-e2) var(--vga-e3); }
.compte-a-rebours__jalon--depasse { border-left-color: #3A3226; color: #B8AD99; }
.compte-a-rebours__source { font-size: var(--vga-t-xs); color: #B8AD99; margin: var(--vga-e2) 0 0; max-width: var(--vga-mesure); }

/* ── Les cinq dossiers, pictogrammes dessinés ── */
.dossiers-vigie__grille {
	display: grid; gap: var(--vga-e3);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .dossiers-vigie__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .dossiers-vigie__grille { grid-template-columns: repeat(5, 1fr); } }
.dossiers-vigie__carte {
	background: var(--vga-carte); border: 1px solid var(--vga-bordure);
	border-radius: 6px; box-shadow: var(--vga-ombre);
	padding: var(--vga-e4) var(--vga-e3);
	display: grid; gap: var(--vga-e2); align-content: start;
	transition: transform .18s ease, box-shadow .18s ease;
}
.dossiers-vigie__carte:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 5px rgba(38, 32, 25, .12), 0 14px 32px rgba(38, 32, 25, .14);
}
.dossiers-vigie__picto {
	width: 44px; height: 44px; color: var(--vga-ocre);
	background: var(--vga-ocre-voile); border-radius: 50%;
	padding: 9px; box-sizing: content-box;
}
.dossiers-vigie__nom { font-size: var(--vga-t-m); margin: 0; line-height: 1.25; }
.dossiers-vigie__nom a { color: var(--vga-encre); text-decoration: none; }
.dossiers-vigie__nom a:hover { color: var(--vga-ocre); text-decoration: underline; }
.dossiers-vigie__description { color: var(--vga-encre-douce); font-size: var(--vga-t-s); margin: 0; }
.dossiers-vigie__compte {
	margin: auto 0 0; justify-self: start;
	font-size: var(--vga-t-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
	color: var(--vga-ocre); background: var(--vga-ocre-voile);
	border-radius: var(--vga-rayon-pilule); padding: 2px var(--vga-e2);
}

/* ── La méthode : bande ocre profonde ──
   Couleurs explicites, identiques dans les deux modes (P-110). */
.bande-methode { background: #7A3A0B; color: #F7F2E7; padding: var(--vga-e6) var(--vga-e3); }
.bande-methode__interieur { max-width: 72rem; margin: 0 auto; }
.bande-methode__surtitre {
	margin: 0 0 var(--vga-e2); font-size: var(--vga-t-xs); font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: #F2B27C;
}
.bande-methode__titre { font-size: var(--vga-t-xl); margin: 0 0 var(--vga-e2); color: #F7F2E7; }
.bande-methode__texte { max-width: var(--vga-mesure); color: #F0E3D2; margin: 0 0 var(--vga-e3); }
.bande-methode__points { list-style: none; margin: 0 0 var(--vga-e4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--vga-e2) var(--vga-e4); }
.bande-methode__point { display: flex; align-items: baseline; gap: var(--vga-e2); font-weight: 600; font-size: var(--vga-t-s); color: #F7F2E7; }
.bande-methode__point::before { content: "✓"; color: #F2B27C; font-weight: 700; }
.bande-methode__lien {
	display: inline-flex; align-items: center; min-height: 44px;
	background: #F7F2E7; color: #7A3A0B;
	padding: 0 var(--vga-e4); border-radius: var(--vga-rayon);
	text-decoration: none; font-weight: 600;
}
.bande-methode__lien:hover { background: #FFFDF6; color: #262019; }

/* Marqueurs de gabarits (fiche, pilier, comparatif, alerte) — inchangés */
.fiche-securite__marqueur, .pilier-silo__marqueur,
.comparatif-veille__marqueur, .alerte-veille__marqueur {
	display: inline-block; font-size: var(--vga-t-xs); font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--vga-ocre); background: var(--vga-ocre-voile);
	padding: var(--vga-e1) var(--vga-e2); border-radius: var(--vga-rayon-pilule);
	margin: 0 0 var(--vga-e2);
}

/* ================================================================
   7. POINT AVANT DÉPART (formulaire 2 étapes)
   ================================================================ */
.point-avant-depart {
	background: var(--vga-carte); border: 1px solid var(--vga-bordure);
	border-radius: var(--vga-rayon); box-shadow: var(--vga-ombre);
	padding: var(--vga-e4); margin-top: var(--vga-e5);
}
.point-avant-depart__titre { font-size: var(--vga-t-l); margin: 0 0 var(--vga-e2); }
.point-avant-depart__promesse { max-width: var(--vga-mesure); color: var(--vga-encre-douce); margin: 0 0 var(--vga-e3); }
.point-avant-depart__confirmation { background: var(--vga-ocre-voile); color: var(--vga-encre); border-left: 3px solid var(--vga-ocre); border-radius: var(--vga-rayon); padding: var(--vga-e2) var(--vga-e3); font-weight: 600; }
.point-avant-depart__erreur { background: var(--vga-ocre-voile); color: var(--vga-ocre-fonce); border-left: 3px solid var(--vga-ocre-fonce); border-radius: var(--vga-rayon); padding: var(--vga-e2) var(--vga-e3); font-weight: 600; }
@media (prefers-color-scheme: dark) {
	.point-avant-depart__erreur { color: var(--vga-ocre); }
}
.point-avant-depart__piege { position: absolute; left: -9999px; height: 1px; overflow: hidden; }
.point-avant-depart__etape { border: 0; margin: 0; padding: 0; }
.point-avant-depart__legende { font-family: var(--vga-display); font-size: var(--vga-t-m); font-weight: 600; padding: 0; margin-bottom: var(--vga-e3); }
.point-avant-depart__champ { max-width: 26rem; margin: 0 0 var(--vga-e3); }
.point-avant-depart__champ label { display: block; font-weight: 600; font-size: var(--vga-t-s); margin-bottom: var(--vga-e1); }
.point-avant-depart__champ input {
	width: 100%; min-height: 44px; padding: var(--vga-e2) var(--vga-e3);
	border: 1px solid var(--vga-bordure); border-radius: var(--vga-rayon);
	background: var(--vga-fond); color: var(--vga-encre);
}
.point-avant-depart__consentement { font-size: var(--vga-t-xs); color: var(--vga-encre-douce); max-width: var(--vga-mesure); }
.point-avant-depart__actions { display: flex; flex-wrap: wrap; gap: var(--vga-e2); margin: 0; }
.point-avant-depart__suivant, .point-avant-depart__envoyer {
	min-height: 44px; padding: 0 var(--vga-e4);
	background: var(--vga-ocre); color: var(--vga-sur-ocre);
	border: 0; border-radius: var(--vga-rayon); font-weight: 600;
}
.point-avant-depart__suivant:hover, .point-avant-depart__envoyer:hover { background: var(--vga-ocre-fonce); }
.point-avant-depart__retour {
	min-height: 44px; padding: 0 var(--vga-e3);
	background: transparent; color: var(--vga-encre-douce);
	border: 1px solid var(--vga-bordure); border-radius: var(--vga-rayon); font-weight: 600;
}
.point-avant-depart__retour:hover { color: var(--vga-encre); border-color: var(--vga-encre-douce); }

/* ================================================================
   8. FICHE SÉCURITÉ · PILIER · COMPARATIF · ALERTE
   ================================================================ */
.fiche-securite__entete, .pilier-silo__entete, .comparatif-veille__entete, .alerte-veille__entete {
	border-bottom: 3px solid var(--vga-ocre); padding-bottom: var(--vga-e3); margin-bottom: var(--vga-e4);
}
.fiche-securite__titre, .pilier-silo__titre, .comparatif-veille__titre, .alerte-veille__titre { font-size: var(--vga-t-xl); margin: 0 0 var(--vga-e2); }
.fiche-securite__verification {
	display: inline-block; font-size: var(--vga-t-s); font-weight: 600;
	color: var(--vga-ocre-fonce); background: var(--vga-ocre-voile);
	padding: var(--vga-e1) var(--vga-e2); border-radius: var(--vga-rayon); margin: 0 0 var(--vga-e2);
}
@media (prefers-color-scheme: dark) {
	.fiche-securite__verification { color: var(--vga-ocre); }
}
.fiche-securite__verdict { font-family: var(--vga-display); font-size: var(--vga-t-m); max-width: var(--vga-mesure); margin: var(--vga-e2) 0 0; }
.pilier-silo__lecture { font-size: var(--vga-t-xs); color: var(--vga-encre-douce); margin: var(--vga-e1) 0 0; }

.fiche-securite__sommaire, .pilier-silo__sommaire {
	background: var(--vga-carte); border: 1px solid var(--vga-bordure);
	border-radius: var(--vga-rayon); padding: var(--vga-e3) var(--vga-e4); margin-bottom: var(--vga-e4);
}
.fiche-securite__sommaire-titre, .pilier-silo__sommaire-titre { font-size: var(--vga-t-s); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--vga-e2); font-family: var(--vga-corps); font-weight: 600; color: var(--vga-encre-douce); }
.fiche-securite__sommaire-liste, .pilier-silo__sommaire-liste { margin: 0; padding-left: 1.2em; display: grid; gap: var(--vga-e1); }
.fiche-securite__sommaire-liste a, .pilier-silo__sommaire-liste a { text-decoration: none; }
.fiche-securite__sommaire-liste a:hover, .pilier-silo__sommaire-liste a:hover { text-decoration: underline; }

.fiche-securite__corps, .pilier-silo__corps, .comparatif-veille__corps, .alerte-veille__corps,
.article-vigie__corps, .page-vigie__corps { max-width: var(--vga-mesure); }
.fiche-securite__corps h2, .pilier-silo__corps h2, .comparatif-veille__corps h2,
.article-vigie__corps h2, .page-vigie__corps h2 { font-size: var(--vga-t-l); margin: var(--vga-e5) 0 var(--vga-e3); }
.fiche-securite__corps table, .comparatif-veille__corps table { border-collapse: collapse; width: 100%; font-size: var(--vga-t-s); }
.fiche-securite__corps th, .comparatif-veille__corps th {
	text-align: left; background: var(--vga-ocre-voile); color: var(--vga-encre);
	border: 1px solid var(--vga-bordure); padding: var(--vga-e2) var(--vga-e3);
}
.fiche-securite__corps td, .comparatif-veille__corps td { border: 1px solid var(--vga-bordure); padding: var(--vga-e2) var(--vga-e3); }
.fiche-securite__corps blockquote, .alerte-veille__corps blockquote {
	margin: var(--vga-e4) 0; padding: var(--vga-e2) var(--vga-e4);
	border-left: 3px solid var(--vga-ocre); color: var(--vga-encre-douce); font-style: italic;
}
.fiche-securite__pied, .comparatif-veille__pied { margin-top: var(--vga-e5); border-top: 1px solid var(--vga-bordure); padding-top: var(--vga-e3); }
.fiche-securite__rappel-sources, .comparatif-veille__methode { font-size: var(--vga-t-s); color: var(--vga-encre-douce); max-width: var(--vga-mesure); }

.comparatif-veille__criteres { background: var(--vga-ocre-voile); border-radius: var(--vga-rayon); padding: var(--vga-e3) var(--vga-e4); margin-bottom: var(--vga-e4); }
.comparatif-veille__criteres-titre { font-size: var(--vga-t-m); margin: 0 0 var(--vga-e2); }
.comparatif-veille__criteres-texte { margin: 0; color: var(--vga-encre); max-width: var(--vga-mesure); }

.pilier-silo__destinations { margin-top: var(--vga-e5); }
.pilier-silo__destinations-titre { font-size: var(--vga-t-l); margin: 0 0 var(--vga-e3); }
.pilier-silo__destinations-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vga-e2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pilier-silo__destinations-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pilier-silo__destinations-liste { grid-template-columns: repeat(3, 1fr); } }
.pilier-silo__destinations-item a {
	display: block; background: var(--vga-carte); border: 1px solid var(--vga-bordure);
	border-radius: var(--vga-rayon); padding: var(--vga-e2) var(--vga-e3);
	text-decoration: none; color: var(--vga-encre); font-weight: 600; min-height: 44px;
}
.pilier-silo__destinations-item a:hover { border-color: var(--vga-ocre); color: var(--vga-ocre); }

.alerte-veille__horodatage { font-size: var(--vga-t-s); color: var(--vga-encre-douce); margin: 0; }
.alerte-veille__rappel { margin-top: var(--vga-e5); background: var(--vga-ocre-voile); border-radius: var(--vga-rayon); padding: var(--vga-e3) var(--vga-e4); font-size: var(--vga-t-s); color: var(--vga-encre); max-width: var(--vga-mesure); }

/* ================================================================
   9. FIL DES ALERTES · LISTES · ARTICLES · 404
   ================================================================ */
.fil-alertes__entete { margin-bottom: var(--vga-e4); }
.fil-alertes__titre { font-size: var(--vga-t-xl); margin: 0 0 var(--vga-e2); }
.fil-alertes__chapeau { max-width: var(--vga-mesure); color: var(--vga-encre-douce); margin: 0; }
.fil-alertes__liste { list-style: none; margin: 0; padding: 0; }
.fil-alertes__item { border-bottom: 1px solid var(--vga-bordure); padding: var(--vga-e4) 0; }
.fil-alertes__date { font-size: var(--vga-t-xs); font-weight: 600; color: var(--vga-encre-douce); font-variant-numeric: tabular-nums; }
.fil-alertes__titre-alerte { font-size: var(--vga-t-m); margin: var(--vga-e1) 0; }
.fil-alertes__titre-alerte a { color: var(--vga-encre); text-decoration: none; }
.fil-alertes__titre-alerte a:hover { color: var(--vga-ocre); text-decoration: underline; }
.fil-alertes__resume { color: var(--vga-encre-douce); font-size: var(--vga-t-s); margin: 0; max-width: var(--vga-mesure); }

.liste-fiches__grand-titre { font-size: var(--vga-t-xl); margin: 0 0 var(--vga-e2); }
.liste-fiches__chapeau { max-width: var(--vga-mesure); color: var(--vga-encre-douce); margin-bottom: var(--vga-e4); }
.liste-fiches__carte { border-bottom: 1px solid var(--vga-bordure); padding: var(--vga-e4) 0; }
.liste-fiches__titre { font-size: var(--vga-t-m); margin: 0 0 var(--vga-e1); }
.liste-fiches__titre a { color: var(--vga-encre); text-decoration: none; }
.liste-fiches__titre a:hover { color: var(--vga-ocre); text-decoration: underline; }
.liste-fiches__date { font-size: var(--vga-t-xs); color: var(--vga-encre-douce); margin: 0 0 var(--vga-e1); }
.liste-fiches__extrait { color: var(--vga-encre-douce); font-size: var(--vga-t-s); margin: 0; max-width: var(--vga-mesure); }
.liste-fiches__pagination .nav-links, .fil-alertes__pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--vga-e2); margin-top: var(--vga-e4); }
.liste-fiches__pagination .page-numbers, .fil-alertes__pagination .page-numbers {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--vga-e3);
	border: 1px solid var(--vga-bordure); border-radius: var(--vga-rayon);
	text-decoration: none; color: var(--vga-encre);
}
.liste-fiches__pagination .page-numbers.current, .fil-alertes__pagination .page-numbers.current { background: var(--vga-ocre); border-color: var(--vga-ocre); color: var(--vga-sur-ocre); }

.article-vigie__entete, .page-vigie__entete { border-bottom: 3px solid var(--vga-ocre); padding-bottom: var(--vga-e3); margin-bottom: var(--vga-e4); }
.article-vigie__titre, .page-vigie__titre { font-size: var(--vga-t-xl); margin: 0 0 var(--vga-e2); }
.article-vigie__illustration { margin: 0 0 var(--vga-e4); }
.article-vigie__illustration img { border-radius: var(--vga-rayon); }

.page-introuvable { max-width: 40rem; margin: var(--vga-e6) auto; text-align: left; }
.page-introuvable__titre { font-size: var(--vga-t-xl); margin: 0 0 var(--vga-e3); }
.page-introuvable__texte { color: var(--vga-encre-douce); margin: 0 0 var(--vga-e3); }

/* ================================================================
   10. PIED DE PAGE — dense : marque + 5 silos + le site + mentions
   ================================================================ */
.pied-vigie { background: var(--vga-carte); border-top: 3px solid var(--vga-ocre); margin-top: var(--vga-e6); }
.pied-vigie__interieur { max-width: 72rem; margin: 0 auto; padding: var(--vga-e5) var(--vga-e3) var(--vga-e4); }
.pied-vigie__haut { display: grid; gap: var(--vga-e4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pied-vigie__haut { grid-template-columns: repeat(3, 1fr); } .pied-vigie__marque { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
	.pied-vigie__haut { grid-template-columns: 1.6fr repeat(6, 1fr); }
	.pied-vigie__marque { grid-column: auto; }
}
.pied-vigie__nom { font-family: var(--vga-display); font-weight: 700; font-size: var(--vga-t-m); margin: 0; }
.pied-vigie__devise { color: var(--vga-encre-douce); margin: var(--vga-e1) 0 0; font-size: var(--vga-t-s); }
.pied-vigie__avertissement { font-size: var(--vga-t-xs); color: var(--vga-encre-douce); max-width: 34ch; margin: var(--vga-e2) 0 0; }
.pied-vigie__silo-titre {
	margin: 0 0 var(--vga-e2); font-size: var(--vga-t-xs); font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase; color: var(--vga-encre);
}
.pied-vigie__silo-titre a { color: var(--vga-encre); text-decoration: none; }
.pied-vigie__silo-titre a:hover { color: var(--vga-ocre); text-decoration: underline; }
.pied-vigie__silo-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vga-e1); }
.pied-vigie__silo-item a {
	display: inline-block; padding: 2px 0;
	color: var(--vga-encre-douce); text-decoration: none; font-size: var(--vga-t-xs); line-height: 1.45;
}
.pied-vigie__silo-item a:hover { color: var(--vga-ocre); text-decoration: underline; }
.pied-vigie__silo-item--tout a { color: var(--vga-ocre); font-weight: 600; }
.pied-vigie__bas {
	margin-top: var(--vga-e4); padding-top: var(--vga-e3);
	border-top: 1px solid var(--vga-bordure);
	display: flex; flex-wrap: wrap; gap: var(--vga-e2) var(--vga-e4); justify-content: space-between;
}
.pied-vigie__mentions { font-size: var(--vga-t-xs); color: var(--vga-encre-douce); margin: 0; }
.pied-vigie__mentions a { color: var(--vga-encre-douce); }
.pied-vigie__mentions a:hover { color: var(--vga-ocre); }
.pied-vigie__credits { font-size: var(--vga-t-xs); color: var(--vga-encre-douce); margin: 0; }

/* ================================================================
   11. PRÉFÉRENCES UTILISATEUR
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ─── Bloc citable (P-100) ───────────────────────────────────────────────────
   Encadré autonome, factuel et daté, conçu pour être cité tel quel par un
   moteur de recherche ou un modèle de langage.
   Ajouté le 2026-08-20 : les gabarits de la phase 1 ne prévoyaient aucune
   classe pour ce bloc. Chaque rédacteur avait donc inventé la sienne
   (sb-citable, bloc-citable, sb-citable-src…) et aucun de ces encadrés
   n'était stylé. Classe canonique retenue : .bloc-citable */
.bloc-citable {
	background: var(--vga-ocre-voile);
	border-left: 3px solid var(--vga-ocre);
	border-radius: var(--vga-rayon);
	padding: var(--vga-e4);
	margin: var(--vga-e5) 0;
	max-width: var(--vga-mesure);
}
.bloc-citable__titre {
	font-family: var(--vga-display);
	font-size: var(--vga-t-m);
	line-height: 1.3;
	margin: 0 0 var(--vga-e3);
	color: var(--vga-encre);
}
.bloc-citable p,
.bloc-citable ul,
.bloc-citable ol { color: var(--vga-encre); margin: 0 0 var(--vga-e2); }
.bloc-citable ul,
.bloc-citable ol { padding-left: 1.25em; }
.bloc-citable li { margin-bottom: var(--vga-e1); }
.bloc-citable__source {
	font-size: var(--vga-t-xs);
	color: var(--vga-encre-douce);
	margin: var(--vga-e3) 0 0;
}
.bloc-citable > :last-child { margin-bottom: 0; }

/* ─── Passe 2 du design — 2026-08-20 ─────────────────────────────────────────
   Retour Mathias : « c'est mieux, mais tu peux faire encore mieux ».
   Référence du réseau : fighter-360.com (cf. briefs/design-site.md).
   Trois corrections : la photo du héros doit se VOIR, les chiffres doivent
   frapper, les titres de section doivent porter. */

/* 1. Le voile du héros était à .93 / .78 / .50 : la photo ne pouvait pas
   apparaître. On l'allège franchement en gardant la zone du titre dense
   (le texte ivoire reste très au-dessus du seuil AA sur .88). */
.poste-de-vigie::before {
	background: linear-gradient(100deg,
		rgba(30, 23, 16, .90) 0%,
		rgba(30, 23, 16, .74) 30%,
		rgba(30, 23, 16, .40) 58%,
		rgba(30, 23, 16, .30) 100%);
}
/* Un second voile vertical très léger : il assoit le bas de la bande sans
   reboucher la photo. */
.poste-de-vigie::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to bottom, rgba(30, 23, 16, .30) 0%, rgba(30, 23, 16, 0) 28%, rgba(30, 23, 16, .45) 100%);
}
/* Le panneau de veille se détache de la photo sans l'écraser. */
.veille-directe {
	backdrop-filter: blur(3px);
	box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
}

/* 2. Les tuiles de chiffres : elles doivent frapper, pas se faire oublier. */
.chiffres-vigie__nombre {
	font-size: clamp(2.6rem, 5.4vw, 4rem);
	letter-spacing: -.02em;
}
.chiffres-vigie__nombre--date { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.chiffres-vigie__tuile {
	padding: var(--vga-e5) var(--vga-e3) var(--vga-e4);
	border-top: 3px solid var(--vga-ocre);
	position: relative;
	transition: transform .18s ease, box-shadow .18s ease;
}
.chiffres-vigie__tuile:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(38, 32, 25, .12); }
.chiffres-vigie__libelle {
	font-size: var(--vga-t-xs); text-transform: uppercase;
	letter-spacing: .09em; color: var(--vga-encre-douce); font-weight: 600;
}

/* 3. Les titres de section : plus grands, plus serrés — c'est ce qui donne
   son autorité à une page. */
.rubrique-vigie__titre {
	font-size: clamp(2.1rem, 4.4vw, 3.1rem);
	line-height: 1.06;
	letter-spacing: -.015em;
	max-width: 22ch;
}
.rubrique-vigie__surtitre {
	font-size: var(--vga-t-xs); text-transform: uppercase;
	letter-spacing: .14em; font-weight: 700; color: var(--vga-ocre);
	margin: 0 0 var(--vga-e2);
}

/* 4. Les cartes de fiches : l'image doit dominer, pas se faire grignoter. */
.carte-fiche__media,
.carte-fiche a > img,
.carte-fiche img {
	aspect-ratio: 16 / 10;
	width: 100%; height: auto;
	object-fit: cover;
	display: block;
}
.carte-fiche {
	transition: transform .18s ease, box-shadow .18s ease;
	overflow: hidden;
}
.carte-fiche:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(38, 32, 25, .16); }

/* ─── Correctif : les règles précédentes visaient .carte-fiche, qui n'existe
   pas dans ce thème. Les vraies classes sont .grille-fiches__carte et
   .grille-fiches__visuel. Erreur de ma part, corrigée le 2026-08-20. */
.grille-fiches__visuel {
	display: block; overflow: hidden;
	border-radius: var(--vga-rayon) var(--vga-rayon) 0 0;
}
.grille-fiches__visuel img {
	aspect-ratio: 16 / 10;
	width: 100%; height: auto;
	object-fit: cover; display: block;
	transition: transform .35s ease;
}
.grille-fiches__carte {
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.grille-fiches__carte:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(38, 32, 25, .16); }
.grille-fiches__carte:hover .grille-fiches__visuel img { transform: scale(1.04); }

/* La pastille de silo et la date passent EN SURIMPRESSION sur l'image :
   c'est le motif qui donne sa densité à la référence. */
.grille-fiches__carte { position: relative; }
.grille-fiches__contexte {
	position: absolute; top: var(--vga-e3); left: var(--vga-e3); right: var(--vga-e3);
	z-index: 2; margin: 0;
	display: flex; align-items: center; gap: var(--vga-e2);
}
.grille-fiches__pastille {
	background: var(--vga-ocre); color: #FFFDF6;
	border-radius: var(--vga-rayon-pilule);
	padding: .22em .7em; font-size: var(--vga-t-xs);
	text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.grille-fiches__verifie {
	background: rgba(30, 23, 16, .78); color: #F7F2E7;
	border-radius: var(--vga-rayon-pilule);
	padding: .22em .7em; font-size: var(--vga-t-xs); font-weight: 600;
	backdrop-filter: blur(2px);
}
/* Un léger dégradé en haut de l'image pour que les pastilles restent lisibles
   quelle que soit la photo. */
.grille-fiches__visuel::after {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 42%;
	background: linear-gradient(to bottom, rgba(30, 23, 16, .45), rgba(30, 23, 16, 0));
	pointer-events: none;
}
.grille-fiches__visuel { position: relative; }

/* Titre de fiche plus présent. */
.grille-fiches__nom { font-size: var(--vga-t-m); line-height: 1.22; }

/* ─── Tableaux de données — correctif du 2026-08-21 ───────────────────────────
   Constat (P-204, 2e occurrence en 2 jours) : les règles de tableau ne visaient
   que .fiche-securite__corps et .comparatif-veille__corps. /vaccins/ utilise le
   gabarit pilier → .pilier-silo__corps, donc son tableau s'affichait en défaut
   navigateur : ni bordure, ni padding, ni en-tête, écrasé dans les 68ch de
   --vga-mesure. Et .tableau-scroll existait dans le markup SANS aucune règle :
   le conteneur ne défilait pas. Les deux sont corrigés ici. */
.pilier-silo__corps table, .article-vigie__corps table,
.page-vigie__corps table, .alerte-veille__corps table {
	border-collapse: collapse; width: 100%; font-size: var(--vga-t-s);
}
.pilier-silo__corps th, .article-vigie__corps th,
.page-vigie__corps th, .alerte-veille__corps th {
	text-align: left; background: var(--vga-ocre-voile); color: var(--vga-encre);
	border: 1px solid var(--vga-bordure); padding: var(--vga-e2) var(--vga-e3);
}
.pilier-silo__corps td, .article-vigie__corps td,
.page-vigie__corps td, .alerte-veille__corps td {
	border: 1px solid var(--vga-bordure); padding: var(--vga-e2) var(--vga-e3);
}

/* le conteneur défilant : le tableau garde de l'air et se lit au doigt */
.tableau-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: var(--vga-e5) 0;
	border: 1px solid var(--vga-bordure);
	border-radius: var(--vga-rayon);
	background: var(--vga-carte);
	box-shadow: var(--vga-ombre);
}
.tableau-scroll table { min-width: 52rem; margin: 0; }
.tableau-scroll th {
	font-family: var(--vga-corps); font-size: var(--vga-t-xs);
	letter-spacing: .05em; text-transform: uppercase;
	border-top: 0; white-space: nowrap;
}
.tableau-scroll tbody tr { background: var(--vga-carte); }
.tableau-scroll tbody tr:nth-child(even) { background: #F5EFE2; }
/* 1re colonne figée : on garde le libellé sous les yeux en défilant */
.tableau-scroll th:first-child, .tableau-scroll td:first-child {
	position: sticky; left: 0; z-index: 2; background: inherit;
	box-shadow: 1px 0 0 var(--vga-bordure);
}
.tableau-scroll thead th:first-child { background: var(--vga-ocre-voile); }
.tableau-scroll td:first-child { font-weight: 600; color: var(--vga-encre); }
/* dernière colonne = la source : présente mais discrète */
.tableau-scroll td:last-child {
	color: var(--vga-encre-douce); font-size: var(--vga-t-xs); line-height: 1.45;
}
.tableau-scroll th:first-child, .tableau-scroll td:first-child { border-left: 0; }
.tableau-scroll th:last-child,  .tableau-scroll td:last-child  { border-right: 0; }
.tableau-scroll tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 48rem) {
	.tableau-scroll table { min-width: 44rem; font-size: var(--vga-t-xs); }
	.tableau-scroll th, .tableau-scroll td { padding: var(--vga-e2); }
}

/* correctif 2 du 2026-08-21 : les colonnes courtes ("Doses") s'étranglaient en
   ruban vertical parce que la répartition auto donnait tout aux colonnes de
   prose. Un plancher par cellule règle ça sans figer la mise en page (le thème
   a des tableaux à 3, 4 et 6 colonnes : table-layout:fixed les casserait). */
.tableau-scroll th, .tableau-scroll td { min-width: 8.5rem; }
.tableau-scroll th:first-child, .tableau-scroll td:first-child { min-width: 9.5rem; }
.tableau-scroll table { min-width: 100%; }
@media (max-width: 48rem) {
	.tableau-scroll th, .tableau-scroll td { min-width: 7.5rem; }
	.tableau-scroll th:first-child, .tableau-scroll td:first-child { min-width: 8.5rem; }
}

/* correctif 3 du 2026-08-21 : mesuré au rendu (P-204) — le corps de lecture est
   calé à GAUCHE dans .contenu-principal et laisse ~429px inutilisés à droite sur
   un écran de 1440. Le tableau réclamait 1165px pour 707px disponibles, d'où un
   défilement de 460px sur un écran large et vide. On lui rend cette largeur : un
   tableau est de la donnée, il n'a pas à tenir dans la mesure de lecture (68ch).
   Le défilement reste le filet pour les petits écrans. */
@media (min-width: 62rem) {
	.tableau-scroll { width: min(71rem, calc(100vw - 3rem)); max-width: none; }
}

/* correctif 4 : il restait 31px de débordement (dernière colonne rognée).
   6 colonnes x 2 côtés x 4px de padding en moins = 48px récupérés. Mesuré. */
.tableau-scroll th, .tableau-scroll td { padding: var(--vga-e2) .75rem; }

/* ─── Illustration d'une alerte (couche actu, §29) ────────────────────────────
   Ajoutee le 2026-08-21 : le moteur d'actualite genere bien une image et la pose
   en une, mais partials/alerte.php ne la rendait pas — Discover exige une image
   large. Legende explicite : une illustration generee ne doit jamais se faire
   passer pour une photo documentaire sur un sujet de sante. */
.alerte-veille__illustration {
	margin: var(--vga-e5) 0;
	max-width: min(52rem, 100%);
}
.alerte-veille__illustration img,
.article-vigie__illustration img {
	width: 100%; height: auto; display: block;
	aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: var(--vga-rayon);
	box-shadow: var(--vga-ombre);
}
.alerte-veille__illustration figcaption {
	margin-top: var(--vga-e2);
	font-size: var(--vga-t-xs);
	color: var(--vga-encre-douce);
	font-style: italic;
}

/* ─── Illustration in-content (correctif du 2026-08-21) ───────────────────────
   Le gate QA exigeait ≥1 image par article : 66 articles n'en avaient aucune. */
.illustration-vigie { margin: var(--vga-e5) 0; max-width: 100%; }
.illustration-vigie img {
	width: 100%; height: auto; display: block;
	aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: var(--vga-rayon); box-shadow: var(--vga-ombre);
}
.illustration-vigie figcaption {
	margin-top: var(--vga-e2); font-size: var(--vga-t-xs);
	color: var(--vga-encre-douce); font-style: italic;
}

/* ─── Confort de lecture — 2026-08-21 ─────────────────────────────────────────
   Retour Mathias : « ça reste beaucoup de pavés de texte ». Le découpage des
   paragraphes a été fait côté contenu (396 coupes) ; ici on donne le rythme. */
.article-vigie__corps, .pilier-silo__corps, .alerte-veille__corps,
.fiche-securite__corps, .comparatif-veille__corps, .page-vigie__corps {
	font-size: var(--vga-t-base);
	line-height: 1.72;
}
.article-vigie__corps p, .pilier-silo__corps p, .alerte-veille__corps p,
.fiche-securite__corps p, .comparatif-veille__corps p, .page-vigie__corps p {
	margin: 0 0 var(--vga-e4);
}
/* l'entrée en matière porte le regard */
.article-vigie__corps > p:first-of-type, .pilier-silo__corps > p:first-of-type,
.alerte-veille__corps > p:first-of-type, .fiche-securite__corps > p:first-of-type {
	font-size: var(--vga-t-m);
	line-height: 1.6;
	color: var(--vga-encre);
}
/* de l'air AVANT chaque section, un filet discret pour la marquer */
.article-vigie__corps h2, .pilier-silo__corps h2, .alerte-veille__corps h2,
.fiche-securite__corps h2, .comparatif-veille__corps h2, .page-vigie__corps h2 {
	margin: var(--vga-e6) 0 var(--vga-e3);
	padding-top: var(--vga-e3);
	border-top: 1px solid var(--vga-bordure);
	line-height: 1.15;
}
.article-vigie__corps > h2:first-child, .pilier-silo__corps > h2:first-child {
	margin-top: 0; padding-top: 0; border-top: 0;
}
.article-vigie__corps h3, .pilier-silo__corps h3, .alerte-veille__corps h3,
.fiche-securite__corps h3, .page-vigie__corps h3 {
	margin: var(--vga-e5) 0 var(--vga-e2);
	font-family: var(--vga-corps);
	font-size: var(--vga-t-m);
	letter-spacing: -.01em;
	color: var(--vga-ocre-fonce);
}
/* les listes respirent et portent une puce ocre */
.article-vigie__corps ul, .pilier-silo__corps ul, .alerte-veille__corps ul,
.fiche-securite__corps ul, .page-vigie__corps ul { margin: 0 0 var(--vga-e4); padding-left: 0; list-style: none; }
.article-vigie__corps ul > li, .pilier-silo__corps ul > li, .alerte-veille__corps ul > li,
.fiche-securite__corps ul > li, .page-vigie__corps ul > li {
	position: relative; padding-left: 1.5em; margin-bottom: var(--vga-e2);
}
.article-vigie__corps ul > li::before, .pilier-silo__corps ul > li::before,
.alerte-veille__corps ul > li::before, .fiche-securite__corps ul > li::before,
.page-vigie__corps ul > li::before {
	content: ""; position: absolute; left: .35em; top: .62em;
	width: .42em; height: .42em; border-radius: 50%; background: var(--vga-ocre);
}
.article-vigie__corps ol, .pilier-silo__corps ol, .page-vigie__corps ol { margin: 0 0 var(--vga-e4); padding-left: 1.3em; }
.article-vigie__corps ol > li, .pilier-silo__corps ol > li { margin-bottom: var(--vga-e2); }

/* ─── Sommaire des pages longues ───────────────────────────────────────────── */
.sommaire-vigie {
	margin: var(--vga-e5) 0;
	padding: var(--vga-e4);
	background: var(--vga-carte);
	border: 1px solid var(--vga-bordure);
	border-left: 3px solid var(--vga-ocre);
	border-radius: var(--vga-rayon);
}
.sommaire-vigie__titre {
	margin: 0 0 var(--vga-e2);
	font-family: var(--vga-corps);
	font-size: var(--vga-t-xs);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--vga-encre-douce);
}
.sommaire-vigie__liste { margin: 0; padding-left: 1.2em; display: grid; gap: var(--vga-e1); }
.sommaire-vigie__liste li { margin: 0; }
.sommaire-vigie__liste a { color: var(--vga-encre); text-decoration: none; }
.sommaire-vigie__liste a:hover { color: var(--vga-ocre); text-decoration: underline; }
:target { scroll-margin-top: var(--vga-e4); }
@media (min-width: 48rem) {
	.sommaire-vigie__liste { grid-template-columns: 1fr 1fr; column-gap: var(--vga-e4); }
}

/* ─── Signature d'auteur (§3, P-029, P-188) — 2026-08-21 ──────────────────────
   Le site n'affichait AUCUN auteur : entorse au playbook introduite au montage,
   par confusion entre « pas de faux médecin » (YMYL) et « pas d'auteur ». */
.signature-vigie {
	display: flex; align-items: center; gap: var(--vga-e3);
	margin: 0 0 var(--vga-e5); padding-bottom: var(--vga-e3);
	border-bottom: 1px solid var(--vga-bordure);
}
.signature-vigie__portrait {
	width: 48px; height: 48px; border-radius: 50%; flex: 0 0 48px;
	object-fit: cover; background: var(--vga-ocre-voile);
}
.signature-vigie__texte { min-width: 0; }
.signature-vigie__nom {
	margin: 0; font-family: var(--vga-corps); font-size: var(--vga-t-s); font-weight: 600;
	color: var(--vga-encre);
}
.signature-vigie__nom a { color: var(--vga-ocre); text-decoration: none; }
.signature-vigie__nom a:hover { text-decoration: underline; }
.signature-vigie__meta {
	margin: .15rem 0 0; font-size: var(--vga-t-xs); color: var(--vga-encre-douce);
}

.encart-auteur {
	display: flex; gap: var(--vga-e4); align-items: flex-start;
	margin: var(--vga-e6) 0 0; padding: var(--vga-e4);
	background: var(--vga-carte); border: 1px solid var(--vga-bordure);
	border-left: 3px solid var(--vga-ocre); border-radius: var(--vga-rayon);
}
.encart-auteur .signature-vigie__portrait { width: 72px; height: 72px; flex-basis: 72px; }
.encart-auteur__nom { margin: 0 0 var(--vga-e2); font-family: var(--vga-corps); font-weight: 600; }
.encart-auteur__nom a { color: var(--vga-encre); text-decoration: none; }
.encart-auteur__nom span { font-weight: 400; color: var(--vga-encre-douce); }
.encart-auteur__bio { margin: 0; font-size: var(--vga-t-s); line-height: 1.6; color: var(--vga-encre-douce); }
.encart-auteur__note {
	margin: var(--vga-e3) 0 0; padding-top: var(--vga-e2);
	border-top: 1px dashed var(--vga-bordure);
	font-size: var(--vga-t-xs); line-height: 1.55; color: var(--vga-encre-douce);
}

.page-auteur { margin: 0 0 var(--vga-e5); padding-bottom: var(--vga-e4); border-bottom: 2px solid var(--vga-ocre); }
.page-auteur__interieur { display: flex; gap: var(--vga-e4); align-items: center; flex-wrap: wrap; }
.page-auteur .signature-vigie__portrait { width: 110px; height: 110px; flex-basis: 110px; }
.page-auteur__role {
	margin: 0 0 var(--vga-e1); font-family: var(--vga-corps); font-size: var(--vga-t-xs);
	text-transform: uppercase; letter-spacing: .06em; color: var(--vga-ocre);
}
.page-auteur__nom { margin: 0 0 var(--vga-e2); font-size: var(--vga-t-xl); line-height: 1.1; }
.page-auteur__bio { margin: 0; max-width: var(--vga-mesure); color: var(--vga-encre-douce); line-height: 1.65; }
@media (max-width: 34rem) {
	.encart-auteur { flex-direction: column; }
}

/* ─── Barre de navigation mobile (P-254) — 2026-08-22 ─────────────────────────
   Le pouce atteint le bas de l'écran, pas le haut. Procédé transposé de
   fighter-360.com (P-203 : on transpose le procédé, jamais la palette). */
.nav-mobile { display: none; }
@media (max-width: 48rem) {
	.nav-mobile {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
		background: var(--vga-carte);
		border-top: 1px solid var(--vga-bordure);
		box-shadow: 0 -2px 12px rgba(38, 32, 25, .10);
		/* sinon la barre passe sous l'indicateur d'accueil de l'iPhone */
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.nav-mobile__lien {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: .18rem;
		min-height: 56px;            /* cible tactile > 44 px */
		padding: .4rem .2rem;
		text-decoration: none;
		color: var(--vga-encre-douce);
		position: relative;
	}
	.nav-mobile__icone { width: 22px; height: 22px; fill: currentColor; }
	.nav-mobile__lib {
		font-family: var(--vga-corps); font-size: .68rem; line-height: 1;
		letter-spacing: .01em; white-space: nowrap;
	}
	/* état actif : couleur d'accent ET un second signal (le trait) */
	.nav-mobile__lien--actif { color: var(--vga-ocre); font-weight: 600; }
	.nav-mobile__lien--actif::before {
		content: ""; position: absolute; top: 0; left: 22%; right: 22%;
		height: 3px; border-radius: 0 0 3px 3px; background: var(--vga-ocre);
	}
	.nav-mobile__lien:active { background: var(--vga-ocre-voile); }
	/* le contenu réserve la hauteur de la barre, sinon le dernier bloc est masqué */
	body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ─── Sur mobile, le bandeau du haut ne répète pas la barre du bas (P-252/P-254) ──
   Le bandeau est le premier élément d'identité, pas un sommaire. La barre basse
   couvre Accueil, Sécurité, Santé, Alertes, Formalités : en haut, on ne garde que
   ce qu'elle ne couvre PAS, sinon deux rubriques deviennent inatteignables. */
@media (max-width: 48rem) {
	.entete-vigie__menu a[href*="/danger/"],
	.entete-vigie__menu a[href*="/vaccins/"],
	.entete-vigie__menu a[href*="/formalites/"],
	.entete-vigie__menu a[href*="/alertes/"],
	.menu-vigie a[href*="/danger/"],
	.menu-vigie a[href*="/vaccins/"],
	.menu-vigie a[href*="/formalites/"],
	.menu-vigie a[href*="/alertes/"] { display: none; }
}

/* Correctif du sélecteur : le conteneur réel est .barre-destinations__liste,
   pas .entete-vigie__menu ni .menu-vigie — deux classes que j'avais inventées (P-204). */
@media (max-width: 48rem) {
	.barre-destinations__liste li:has(a[href$="/danger/"]),
	.barre-destinations__liste li:has(a[href$="/vaccins/"]),
	.barre-destinations__liste li:has(a[href$="/formalites/"]),
	.barre-destinations__liste li:has(a[href$="/alertes/"]) { display: none; }
	.barre-destinations__liste { gap: var(--vga-e3); }
}

/* ─── Couche V1 : capture et relance a la sortie ──────────────────────────── */
.point-avant-depart--v1 { border-top: 3px solid var(--vga-ocre); }
.rappel-depart {
	position: fixed; inset: 0; z-index: 300; display: flex;
	align-items: center; justify-content: center; padding: var(--vga-e4);
	background: rgba(38, 32, 25, .55);
}
.rappel-depart[hidden] { display: none; }
.rappel-depart__boite {
	position: relative; max-width: 26rem; width: 100%;
	background: var(--vga-carte); border-radius: var(--vga-rayon);
	border-top: 4px solid var(--vga-ocre);
	padding: var(--vga-e5) var(--vga-e4) var(--vga-e4);
	box-shadow: 0 12px 40px rgba(38, 32, 25, .28);
}
.rappel-depart__fermer {
	position: absolute; top: .4rem; right: .55rem;
	background: none; border: 0; font-size: 1.6rem; line-height: 1;
	color: var(--vga-encre-douce); cursor: pointer;
	min-width: 44px; min-height: 44px;
}
.rappel-depart__titre {
	margin: 0 0 var(--vga-e2); font-family: var(--vga-display);
	font-size: var(--vga-t-m); color: var(--vga-encre);
}
.rappel-depart__texte { margin: 0 0 var(--vga-e3); font-size: var(--vga-t-s); color: var(--vga-encre-douce); }
.rappel-depart__lien {
	display: inline-block; background: var(--vga-ocre); color: var(--vga-sur-ocre);
	padding: .7rem 1.1rem; border-radius: var(--vga-rayon);
	text-decoration: none; font-family: var(--vga-corps); font-weight: 600;
}
.rappel-depart__lien:hover { background: var(--vga-ocre-fonce); }
@media (max-width: 48rem) { .rappel-depart { align-items: flex-end; padding-bottom: 5rem; } }