/* ==========================================================================
   SNITPECT v3 — refonte 2026
   --------------------------------------------------------------------------
   Chargée après snitpect-front-b.css pour pouvoir la surcharger.
   Les composants neufs sont préfixés « snit- » afin de ne rien hériter des
   styles historiques. Le méga-menu (.cwmm) et le badge adhérents (.badge-adh)
   reprennent les classes du plugin CW Méga-menu, dont seule la partie
   fonctionnelle est fournie côté plugin : l'habillage est ici.
   ========================================================================== */

:root {
	--snit-rouge: #E8453C;
	--snit-rouge-fonce: #C0322B;
	--snit-rouge-pale: #FDECEB;

	--snit-encre: #2B2B2D;
	--snit-encre-clair: #4C4C50;
	--snit-gris: #75757A;
	--snit-gris-clair: #9C9CA1;
	--snit-ligne: #E3E3E5;
	--snit-fond: #FFFFFF;
	--snit-fond-2: #F7F7F8;
	--snit-fond-3: #EDEDEF;
	--snit-gris-pale: #F0F0F2;
	--snit-gris-fond: #6B6B6C;
	--snit-fond-nav: #FDF5F4;

	--snit-rayon: 14px;
	--snit-rayon-s: 9px;
	--snit-pill: 999px;
	--snit-largeur: 1240px;
	--snit-transition: 180ms cubic-bezier(.2, .6, .3, 1);

	/* Marge laissee au-dessus d'une section visee par une ancre. La hauteur
	   reelle de l'en-tete collant est mesuree en JS ; cette valeur sert avant
	   que le script ne tourne, et s'il ne tourne pas. */
	--snit-ancre: 140px;
	--snit-ombre-m: 0 4px 12px rgba(0, 0, 0, .07), 0 12px 32px rgba(0, 0, 0, .07);
	--snit-ombre-l: 0 18px 50px rgba(0, 0, 0, .16);
	--snit-police: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Largeur commune à l'en-tête, aux sections d'accueil et au pied de page. */
.snit-wrap {
	width: 100%;
	max-width: var(--snit-largeur);
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}

.snit-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   BOUTONS
   ====================================================================== */
.snit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--snit-police);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1;
	border-radius: var(--snit-pill);
	padding: 12px 20px;
	border: 1.5px solid transparent;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--snit-transition);
}
.snit-btn:hover,
.snit-btn:focus { text-decoration: none; }
.snit-btn svg {
	width: 17px;
	height: 17px;
	flex: none;
}
.snit-btn--rouge {
	background: var(--snit-rouge);
	color: #fff;
	box-shadow: 0 4px 14px rgba(232, 69, 60, .32);
}
.snit-btn--rouge:hover {
	background: var(--snit-rouge-fonce);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(232, 69, 60, .4);
}
.snit-btn--fantome {
	border-color: var(--snit-ligne);
	color: var(--snit-encre);
	background: #fff;
}
.snit-btn--fantome:hover {
	border-color: var(--snit-encre);
	background: var(--snit-fond-2);
	color: var(--snit-encre);
}
.snit-btn--sombre {
	background: var(--snit-encre);
	color: #fff;
}
.snit-btn--sombre:hover {
	background: #000;
	color: #fff;
}
.snit-btn--blanc {
	background: #fff;
	color: var(--snit-encre);
}
.snit-btn--blanc:hover {
	background: var(--snit-fond-3);
	color: var(--snit-encre);
}
.snit-btn--large {
	padding: 15px 28px;
	font-size: 15.5px;
}

/* =========================================================================
   EN-TÊTE
   ====================================================================== */
.snit-entete {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	box-shadow: 0 1px 0 var(--snit-ligne);
	font-family: var(--snit-police);
}
.snit-entete.est-fige { box-shadow: var(--snit-ombre-m); }

/*
 * Connecte, la barre d'administration de WordPress occupe le haut de la
 * fenetre : l'en-tete collant doit s'arreter dessous, pas dessous elle.
 * Ses hauteurs sont celles de WordPress : 32 px, 46 px sous 783 px de large,
 * et plus rien sous 601 px ou la barre cesse d'etre fixe et defile avec la
 * page. Le script lit ce decalage pour en tenir compte dans les ancres.
 */
body.admin-bar .snit-entete { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .snit-entete { top: 46px; }
}

@media screen and (max-width: 600px) {
	body.admin-bar .snit-entete { top: 0; }
}

/* ---------- Barre utilitaire grise ---------- */
.snit-utile {
	background: var(--snit-gris-fond);
	color: #EDEDEE;
	font-size: 13px;
}
.snit-utile .snit-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 38px;
	flex-wrap: wrap;
}
.snit-utile a {
	color: inherit;
	text-decoration: none;
}
.snit-utile a:hover {
	color: #fff;
	text-decoration: none;
}
.snit-utile__liens {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.snit-utile__droite {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.snit-utile__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.snit-utile__item svg {
	width: 15px;
	height: 15px;
	flex: none;
}
.snit-utile__li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
}
.snit-utile__li svg {
	width: 16px;
	height: 16px;
}
.snit-entete.est-fige .snit-utile { display: none; }

/* ---------- Rangée principale ---------- */
.snit-entete__principal .snit-wrap {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-block: 15px;
	transition: padding var(--snit-transition);
}
.snit-entete.est-fige .snit-entete__principal .snit-wrap { padding-block: 9px; }

.snit-logo {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 0 1 auto;
	min-width: 0;
	text-decoration: none;
}
.snit-logo:hover { text-decoration: none; }
.snit-logo__marque {
	width: 60px;
	height: auto;
	flex: none;
	transition: width var(--snit-transition);
}
.snit-entete.est-fige .snit-logo__marque { width: 47px; }
.snit-logo__nom {
	display: block;
	font-weight: 800;
	font-size: 27px;
	letter-spacing: -.025em;
	line-height: 1.05;
	color: var(--snit-encre);
	white-space: nowrap;
	transition: font-size var(--snit-transition);
}
.snit-logo__nom span { color: var(--snit-rouge); }

/* Le nom développé du syndicat.
   Large assez pour tenir sur deux lignes : à 240px il s'en fallait de peu
   et le mot « Territoriales » tombait seul sur une troisième. */
.snit-logo__baseline {
	display: block;
	font-size: 11px;
	line-height: 1.32;
	color: var(--snit-gris);
	max-width: 340px;
	margin-top: 4px;
	text-wrap: balance;
	transition: font-size var(--snit-transition);
}

/* Au défilement, c'est le sigle qui cède la place, pas le nom développé :
   SNITPECT-FO reste lisible même réduit, le nom en entier beaucoup moins. */
.snit-entete.est-fige .snit-logo__nom { font-size: 21px; }
.snit-entete.est-fige .snit-logo__baseline { font-size: 10.5px; }

/* ---------- Bandeau d'accueil ---------- */

/* Avant « À la une ». Sobre à dessein : il porte le nom développé du
   syndicat, et ne doit pas rivaliser avec le bloc qui le suit. */
.snit-bandeau {
	background: var(--snit-fond-2);
	border-bottom: 1px solid var(--snit-ligne);
}
.snit-bandeau .snit-wrap {
	padding-block: 26px;
	text-align: center;
}
.snit-bandeau__titre {
	margin: 0;
	font-size: clamp(17px, 2.1vw, 22px);
	font-weight: 700;
	line-height: 1.35;
	color: var(--snit-rouge);
	text-wrap: balance;
}
.snit-bandeau__texte {
	margin: 7px 0 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--snit-gris);
	text-wrap: balance;
}

/* ---------- Recherche ---------- */
.snit-recherche {
	flex: 1 1 320px;
	min-width: 180px;
	max-width: 520px;
}
.snit-recherche__champ {
	display: flex;
	align-items: center;
	background: var(--snit-fond-2);
	border: 1.5px solid var(--snit-ligne);
	border-radius: var(--snit-pill);
	transition: border-color var(--snit-transition), background var(--snit-transition), box-shadow var(--snit-transition);
	margin: 0;
}
.snit-recherche__champ:focus-within {
	background: #fff;
	border-color: var(--snit-encre);
	box-shadow: var(--snit-ombre-m);
}
.snit-recherche input[type="search"],
.snit-recherche input[type="text"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: var(--snit-police);
	font-size: 14.5px;
	padding: 11px 8px 11px 20px;
	color: var(--snit-encre);
	height: auto;
}
.snit-recherche input:focus { outline: none; }
.snit-recherche input::placeholder { color: var(--snit-gris-clair); }
.snit-recherche input::-webkit-search-cancel-button { display: none; }
.snit-recherche__go {
	width: 36px;
	height: 36px;
	margin: 3px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--snit-rouge);
	color: #fff;
	display: grid;
	place-items: center;
	flex: none;
	cursor: pointer;
	transition: background var(--snit-transition);
}
.snit-recherche__go:hover { background: var(--snit-rouge-fonce); }
.snit-recherche__go svg {
	width: 17px;
	height: 17px;
}

/* ---------- Actions ---------- */
.snit-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	margin-left: auto;
}

/* =========================================================================
   MÉGA-MENU — habillage (le fonctionnement vient du plugin)
   ====================================================================== */
.cwmm {
	--cwmm-largeur: var(--snit-largeur);
	background: var(--snit-fond-nav);
	border-top: 1px solid var(--snit-ligne);
	box-shadow: inset 0 -1px 0 #F3E2E0;
	color: var(--snit-encre);
	font-family: var(--snit-police);
}
.cwmm__liste {
	gap: 4px;
	max-width: var(--cwmm-largeur);
	margin-inline: auto;
	padding-inline: 20px;
}
.cwmm__lien,
.cwmm__declencheur {
	gap: 7px;
	height: 58px;
	padding: 0 18px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1;
}
.cwmm__item:not(.cwmm__item--mega) .cwmm__lien {
	font-weight: 600;
	color: var(--snit-encre-clair);
}
.cwmm__item:not(.cwmm__item--mega) .cwmm__lien:hover { color: var(--snit-rouge-fonce); }
.cwmm__lien--mega { padding-right: 6px; }
.cwmm__declencheur--seul { padding-left: 4px; }

.cwmm__lien--mega::after,
.cwmm__declencheur:not(.cwmm__declencheur--seul)::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 0;
	height: 3px;
	background: var(--snit-rouge);
	border-radius: 3px 3px 0 0;
	transform: scaleX(0);
}
.cwmm__item--mega.is-open .cwmm__lien--mega::after,
.cwmm__item--mega.is-open .cwmm__declencheur::after { transform: scaleX(1); }
.cwmm__item--mega.is-open .cwmm__lien--mega,
.cwmm__item--mega.is-open .cwmm__declencheur { color: var(--snit-rouge-fonce); }

.cwmm__chevron {
	width: 11px;
	height: 11px;
	opacity: .55;
}
.cwmm__item--mega.is-open .cwmm__chevron { opacity: 1; }
.cwmm__lien:focus-visible,
.cwmm__declencheur:focus-visible {
	outline: 3px solid var(--snit-rouge);
	outline-offset: -3px;
}

.cwmm__mega {
	background: #fff;
	border-top: 1px solid var(--snit-ligne);
	box-shadow: var(--snit-ombre-l);
	transform: translateY(-8px);
}
.cwmm__item--mega.is-open .cwmm__mega { transform: translateY(0); }
.cwmm__inner {
	max-width: var(--cwmm-largeur);
	padding-inline: 20px;
}
.cwmm__grille { padding-block: 30px 34px; }
.cwmm__col {
	padding-inline: 26px;
	border-right: 1px solid var(--snit-ligne);
}
.cwmm__col:first-child { padding-left: 0; }
.cwmm__col:last-child {
	border-right: 0;
	padding-right: 0;
}
.cwmm__intitule {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--snit-gris-clair);
	margin: 0 0 14px;
}

.cwmm__cartes { gap: 10px 22px; }
.cwmm__carte {
	gap: 13px;
	padding: 12px;
	border-radius: var(--snit-rayon-s);
}
a.cwmm__carte:hover {
	background: var(--snit-fond-2);
	text-decoration: none;
}
.cwmm__ico {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--snit-rouge-pale);
	color: var(--snit-rouge-fonce);
}
.cwmm__ico svg {
	width: 19px;
	height: 19px;
}
a.cwmm__carte:hover .cwmm__ico {
	background: var(--snit-rouge);
	color: #fff;
}
.cwmm__carte-titre {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	margin-bottom: 3px;
}
.cwmm__carte-desc {
	font-size: 12.5px;
	color: var(--snit-gris);
	line-height: 1.4;
}

.cwmm__liens li + li { margin-top: 2px; }
.cwmm__lien-rapide {
	gap: 8px;
	padding: 7px 10px;
	margin-left: -10px;
	border-radius: 7px;
	font-size: 14.5px;
	color: var(--snit-encre-clair);
}
.cwmm__lien-rapide::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	flex: none;
	background: var(--snit-ligne);
}
a.cwmm__lien-rapide:hover {
	background: var(--snit-fond-2);
	color: var(--snit-rouge-fonce);
	text-decoration: none;
}
a.cwmm__lien-rapide:hover::before { background: var(--snit-rouge); }

.cwmm__zoom {
	border: 1px solid var(--snit-ligne);
	border-radius: var(--snit-rayon);
	background: var(--snit-fond-2);
}
.cwmm__zoom + .cwmm__zoom { margin-top: 14px; }
a.cwmm__zoom:hover {
	border-color: #d3d3d6;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .07);
	text-decoration: none;
}
.cwmm__zoom-media {
	height: 132px;
	background: var(--snit-fond-3);
}
a.cwmm__zoom:hover .cwmm__zoom-img { transform: scale(1.05); }
.cwmm__zoom-corps { padding: 14px 16px 16px; }
.cwmm__zoom-sur {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--snit-rouge-fonce);
	margin-bottom: 5px;
}
.cwmm__zoom-titre {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 9px;
}
.cwmm__zoom-cta {
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--snit-rouge-fonce);
}
.cwmm__zoom-cta svg {
	width: 13px;
	height: 13px;
}
a.cwmm__zoom:hover .cwmm__zoom-cta svg { transform: translateX(3px); }

.cwmm__burger {
	width: 46px;
	height: 46px;
	margin: 6px 0 6px 20px;
	border: 1.5px solid var(--snit-ligne);
	border-radius: var(--snit-rayon-s);
}
.cwmm__burger-barres,
.cwmm__burger-barres::before,
.cwmm__burger-barres::after { border-radius: 2px; }

/* =========================================================================
   BADGE « RÉSERVÉ AUX ADHÉRENTS »
   ====================================================================== */
.badge-adh {
	display: inline-flex;
	align-items: center;
	flex: none;
	margin-left: auto;
	height: 30px;
	padding-inline: 8px;
	border-radius: var(--snit-pill);
	background: var(--snit-rouge-fonce);
	color: #fff;
	overflow: hidden;
	transition: padding-right 320ms cubic-bezier(.2, .6, .3, 1);
}
.badge-adh svg {
	width: 14px;
	height: 14px;
	flex: none;
}
.badge-adh__txt {
	display: block;
	max-width: 0;
	opacity: 0;
	margin-left: 0;
	white-space: nowrap;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	transition: max-width 340ms cubic-bezier(.2, .6, .3, 1), opacity 200ms ease, margin-left 340ms cubic-bezier(.2, .6, .3, 1);
}
/* Le dépliage ne se déclenche qu'au survol du cadenas, pas de la carte. */
.badge-adh:hover .badge-adh__txt,
.badge-adh:focus .badge-adh__txt,
.badge-adh:focus-visible .badge-adh__txt {
	max-width: 200px;
	opacity: 1;
	margin-left: 7px;
}
.badge-adh:hover,
.badge-adh:focus,
.badge-adh:focus-visible { padding-right: 13px; }

/* =========================================================================
   SECTIONS — ossature commune
   ====================================================================== */
.snit-section {
	padding-block: 64px;
	font-family: var(--snit-police);
	color: var(--snit-encre);
}
.snit-section--gris { background: var(--snit-fond-2); }

.snit-section__entete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 30px;
	flex-wrap: wrap;
}
.snit-sur {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--snit-rouge);
	margin: 0 0 9px;
}
.snit-sur::before {
	content: "";
	width: 26px;
	height: 3px;
	background: var(--snit-rouge);
	border-radius: 2px;
}
.snit-titre {
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.12;
	margin: 0;
	color: inherit;
}
.snit-lien-plus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
	color: var(--snit-rouge-fonce);
	white-space: nowrap;
	text-decoration: none;
}
.snit-lien-plus svg {
	width: 15px;
	height: 15px;
	transition: transform var(--snit-transition);
}
.snit-lien-plus:hover {
	color: var(--snit-rouge-fonce);
	text-decoration: none;
}
.snit-lien-plus:hover svg { transform: translateX(4px); }

/* ---------- Étiquettes et méta ---------- */
.snit-etiq {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: var(--snit-pill);
	background: var(--snit-rouge);
	color: #fff;
}
.snit-etiq--clair {
	background: var(--snit-rouge-pale);
	color: var(--snit-rouge-fonce);
}
.snit-etiquettes {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.snit-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--snit-gris);
	margin: 0;
}

/* ---------- Système d'images : gris vers couleur au survol ---------- */
.snit-media {
	position: relative;
	overflow: hidden;
	background: var(--snit-fond-3);
	display: block;
}
.snit-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(1) contrast(1.03);
	transform: scale(1);
	transition: filter 420ms ease, transform 620ms cubic-bezier(.2, .6, .3, 1);
}
.snit-media--contain { background: #fff; }
.snit-media--contain img {
	object-fit: contain;
	padding: 12px;
}
a:hover .snit-media img,
a:focus-visible .snit-media img {
	filter: grayscale(0) contrast(1);
	transform: scale(1.06);
}
/* Visuels qui restent en couleur : À la une et Décryptages. */
.snit-media--couleur img,
a:hover .snit-media--couleur img { filter: none; }

/* =========================================================================
   À LA UNE
   ====================================================================== */
.snit-une { padding-block: 40px 60px; }
.snit-une__grille {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 22px;
}
/* La selection editoriale peut compter moins de 3 breves : des rangees
   automatiques evitent que la colonne se deforme. */
.snit-une__cote {
	display: grid;
	grid-auto-rows: 1fr;
	align-content: stretch;
	gap: 16px;
}

.snit-carte-une {
	position: relative;
	border-radius: var(--snit-rayon);
	overflow: hidden;
	color: #fff;
	min-height: 452px;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	text-decoration: none;
}
.snit-carte-une:hover { color: #fff; }
.snit-carte-une .snit-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--snit-encre);
}
.snit-carte-une::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(12, 12, 14, .95) 0%, rgba(12, 12, 14, .74) 34%, rgba(12, 12, 14, .14) 72%, rgba(12, 12, 14, 0) 100%);
}
.snit-carte-une__corps {
	display: block;
	padding: 34px;
}
.snit-carte-une__titre {
	font-size: clamp(24px, 2.7vw, 32px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.16;
	margin: 12px 0;
	color: #fff;
}
.snit-carte-une:hover .snit-carte-une__titre {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}
.snit-carte-une__extrait {
	font-size: 15.5px;
	color: #DCDCDE;
	max-width: 52ch;
	margin: 0;
}
.snit-carte-une .snit-meta {
	color: #BFBFC3;
	margin-top: 14px;
}

.snit-carte-mini {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--snit-ligne);
	border-radius: var(--snit-rayon);
	padding: 14px;
	text-decoration: none;
	transition: all var(--snit-transition);
}
.snit-carte-mini:hover {
	border-color: #D3D3D6;
	box-shadow: var(--snit-ombre-m);
	transform: translateY(-2px);
	text-decoration: none;
}
.snit-carte-mini .snit-media {
	width: 120px;
	height: 100%;
	min-height: 94px;
	border-radius: 10px;
}
.snit-carte-mini__titre {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
	margin: 8px 0;
	letter-spacing: -.01em;
	color: var(--snit-encre);
}
.snit-carte-mini:hover .snit-carte-mini__titre { color: var(--snit-rouge-fonce); }

/* =========================================================================
   ACTUALITÉS — 9 articles, sans illustration
   ====================================================================== */
.snit-grille-actus {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.snit-carte-actu {
	position: relative;
	background: #fff;
	border: 1px solid var(--snit-ligne);
	border-radius: var(--snit-rayon);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 22px 24px 20px;
	text-decoration: none;
	color: var(--snit-encre);
	transition: all var(--snit-transition);
}
.snit-carte-actu::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--snit-rouge);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 320ms cubic-bezier(.2, .6, .3, 1);
}
.snit-carte-actu:hover {
	border-color: #D3D3D6;
	box-shadow: var(--snit-ombre-m);
	transform: translateY(-3px);
	text-decoration: none;
	color: var(--snit-encre);
}
.snit-carte-actu:hover::before { transform: scaleY(1); }
.snit-carte-actu__titre {
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.01em;
	margin: 0;
	color: inherit;
}
.snit-carte-actu:hover .snit-carte-actu__titre { color: var(--snit-rouge-fonce); }
.snit-carte-actu__extrait {
	font-size: 14.5px;
	color: var(--snit-gris);
	line-height: 1.5;
	flex: 1;
	margin: 0;
}
.snit-carte-actu .snit-meta {
	margin-top: auto;
	padding-top: 4px;
}
.snit-lien-info {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--snit-rouge-fonce);
}
.snit-lien-info svg {
	width: 13px;
	height: 13px;
	transition: transform var(--snit-transition);
}
.snit-carte-actu:hover .snit-lien-info {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.snit-carte-actu:hover .snit-lien-info svg { transform: translateX(4px); }
.snit-actus__pied {
	display: flex;
	justify-content: center;
	margin-top: 38px;
}

/* =========================================================================
   DISPOSITIFS ADHÉRENT·ES
   ====================================================================== */
.snit-outils { background: linear-gradient(180deg, var(--snit-gris-pale) 0%, var(--snit-fond-2) 60%, var(--snit-fond-2) 100%); }
.snit-grille-outils {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.snit-outil {
	position: relative;
	background: #fff;
	border: 1px solid var(--snit-ligne);
	border-radius: var(--snit-rayon);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	color: var(--snit-encre);
	transition: all var(--snit-transition);
}
.snit-outil::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--snit-rouge);
	z-index: 2;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 320ms cubic-bezier(.2, .6, .3, 1);
}
.snit-outil:hover {
	border-color: #D3D3D6;
	box-shadow: var(--snit-ombre-m);
	transform: translateY(-3px);
	text-decoration: none;
	color: var(--snit-encre);
}
.snit-outil:hover::before { transform: scaleY(1); }
.snit-outil .snit-media {
	height: 190px;
	border-bottom: 1px solid var(--snit-ligne);
}
/* Pas de zoom sur la boîte à outils : seul le passage en couleur est gardé. */
.snit-outil:hover .snit-media img { transform: none; }
.snit-outil__corps {
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
	padding: 20px 22px 22px;
}
.snit-outil__haut {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.snit-outil__titre {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 0;
	color: inherit;
}
.snit-outil:hover .snit-outil__titre { color: var(--snit-rouge-fonce); }
.snit-outil__desc {
	font-size: 14.5px;
	color: var(--snit-gris);
	line-height: 1.5;
	flex: 1;
	margin: 0;
}
.snit-outil__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--snit-rouge-fonce);
}
.snit-outil__cta svg {
	width: 14px;
	height: 14px;
	transition: transform var(--snit-transition);
}
.snit-outil:hover .snit-outil__cta svg { transform: translateX(4px); }

/* =========================================================================
   PUBLICATIONS / DÉCRYPTAGES
   ====================================================================== */
.snit-decrypt-section {
	background: var(--snit-gris-fond);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.snit-decrypt-section::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -120px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 69, 60, .3), transparent 68%);
	pointer-events: none;
}
.snit-decrypt-section .snit-sur { color: #FFD9D6; }
.snit-decrypt-section .snit-sur::before { background: #FFD9D6; }
.snit-decrypt-section .snit-titre { color: #fff; }

.snit-grille-decrypt {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	position: relative;
}
.snit-decrypt {
	display: flex;
	flex-direction: column;
	border-radius: var(--snit-rayon);
	overflow: hidden;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	text-decoration: none;
	color: #fff;
	transition: all var(--snit-transition);
}
.snit-decrypt:hover {
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .4);
	transform: translateY(-4px);
	text-decoration: none;
	color: #fff;
}
.snit-decrypt .snit-media {
	aspect-ratio: 4 / 5;
	background: #fff;
}
.snit-decrypt__corps {
	padding: 16px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1;
}
.snit-decrypt__titre {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.2;
	margin: 0;
	color: #fff;
}
.snit-decrypt__desc {
	font-size: 13.5px;
	color: #EFEFF0;
	line-height: 1.45;
	flex: 1;
	margin: 0;
}
.snit-decrypt__nb {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: #FFD9D6;
}
.snit-decrypt__nb svg {
	width: 13px;
	height: 13px;
	transition: transform var(--snit-transition);
}
.snit-decrypt:hover .snit-decrypt__nb svg { transform: translateX(3px); }

/* =========================================================================
   ADHÉSION
   ====================================================================== */
.snit-adhesion {
	background: linear-gradient(115deg, var(--snit-rouge) 0%, #D0392F 52%, #A82A22 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
	font-family: var(--snit-police);
}
.snit-adhesion::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .16;
	pointer-events: none;
	background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(circle at 78% 44%, #000, transparent 68%);
	-webkit-mask-image: radial-gradient(circle at 78% 44%, #000, transparent 68%);
}
.snit-adhesion .snit-wrap {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 44px;
	align-items: center;
	padding-block: 56px;
	position: relative;
}
.snit-adhesion .snit-sur { color: #FFD9D6; }
.snit-adhesion .snit-sur::before { background: #FFD9D6; }
.snit-adhesion__titre {
	font-size: clamp(28px, 3.4vw, 38px);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.14;
	margin: 0 0 14px;
	color: #fff;
}
.snit-adhesion__txt {
	font-size: 16.5px;
	color: #FFE2E0;
	max-width: 52ch;
	margin: 0 0 26px;
}
.snit-adhesion__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.snit-adhesion .snit-btn--contour {
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
	background: none;
}
.snit-adhesion .snit-btn--contour:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}
.snit-chiffres {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.snit-chiffre {
	background: rgba(255, 255, 255, .13);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--snit-rayon);
	padding: 20px;
}
.snit-chiffre__val {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	margin: 0;
}
.snit-chiffre__val sup { font-size: .5em; }
.snit-chiffre__lib {
	font-size: 13px;
	color: #FFD9D6;
	margin: 6px 0 0;
	line-height: 1.35;
}

/* =========================================================================
   PIED DE PAGE
   ====================================================================== */
.snit-pied {
	background: var(--snit-encre);
	color: #B4B4B9;
	font-size: 14.5px;
	font-family: var(--snit-police);
}
.snit-pied a {
	color: inherit;
	text-decoration: none;
	transition: color var(--snit-transition);
}
.snit-pied a:hover {
	color: #fff;
	text-decoration: none;
}
.snit-pied__haut { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.snit-pied__haut .snit-wrap {
	display: grid;
	/* La troisième colonne est élargie pour que la phrase sous le formulaire
	   tienne sur une ligne : à 1.3fr, le mot « clic. » tombait seul. */
	grid-template-columns: 1.5fr .95fr 1.55fr;
	gap: 48px;
	padding-block: 52px;
}
.snit-pied__marque {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 16px;
}
.snit-pied__marque img {
	width: 52px;
	height: auto;
}
.snit-pied__nom {
	font-size: 19px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -.02em;
	line-height: 1.1;
}
.snit-pied__nom span { color: #FF8078; }
.snit-pied__desc {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* La phrase sous le formulaire d'inscription : une seule ligne.
   nowrap est réservé aux largeurs où elle tient — plus bas, la colonne
   se rétrécit et forcer la ligne unique déborderait de l'écran. */
.snit-pied__desc--lettre {
	font-size: 12.5px;
	margin-bottom: 20px;
}
@media (min-width: 1281px) {
	.snit-pied__desc--lettre { white-space: nowrap; }
}
.snit-pied__titre {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 16px;
}
.snit-pied__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}
.snit-pied__liste li + li { margin-top: 9px; }
.snit-pied__ext {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.snit-pied__ext svg {
	width: 11px;
	height: 11px;
	opacity: .5;
}

.snit-newsletter {
	display: flex;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--snit-pill);
	padding: 5px;
	margin-bottom: 18px;
}
.snit-newsletter input[type="email"] {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	box-shadow: none;
	font-family: var(--snit-police);
	font-size: 14px;
	color: #fff;
	padding: 9px 6px 9px 16px;
	height: auto;
}
.snit-newsletter input:focus { outline: none; }
.snit-newsletter input::placeholder { color: #87878C; }
.snit-newsletter button {
	background: #fff;
	color: var(--snit-encre);
	border: 0;
	font-family: var(--snit-police);
	font-size: 13.5px;
	font-weight: 700;
	border-radius: var(--snit-pill);
	padding: 9px 18px;
	cursor: pointer;
	transition: background var(--snit-transition);
}
.snit-newsletter button:hover { background: #FFD9D6; }

/* Retour après une inscription. Le message tient sur plusieurs lignes :
   c'est la seule chose du pied qui ait le droit de le faire. */
.snit-newsletter__retour {
	font-size: 12.5px;
	line-height: 1.5;
	margin: -8px 0 14px;
	padding: 9px 13px;
	border-radius: 9px;
}
.snit-newsletter__retour.est-ok {
	background: rgba(120, 200, 120, .14);
	color: #A8E0A8;
}
.snit-newsletter__retour.est-erreur {
	background: rgba(232, 69, 60, .16);
	color: #FFB4AE;
}

.snit-rs {
	display: flex;
	gap: 10px;
}
.snit-rs a {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	display: grid;
	place-items: center;
	color: #C9C9CD;
	transition: all var(--snit-transition);
}
.snit-rs a:hover {
	background: #fff;
	color: var(--snit-encre);
	transform: translateY(-2px);
}
.snit-rs a.snit-rs--li:hover {
	background: #0A66C2;
	color: #fff;
	border-color: #0A66C2;
}
.snit-rs svg {
	width: 18px;
	height: 18px;
}

.snit-pied__bas .snit-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block: 22px;
	flex-wrap: wrap;
	font-size: 13.5px;
}
.snit-pied__legal {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.snit-pied__copy {
	color: #87878C;
	margin: 0;
}

/* =========================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 1280px) {
	.snit-logo__baseline { display: none; }
}
@media (max-width: 1180px) {
	.snit-entete__principal .snit-wrap { gap: 18px; }
	.cwmm__lien,
	.cwmm__declencheur {
		padding-inline: 13px;
		font-size: 14.5px;
	}
	.snit-grille-decrypt { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
	.snit-utile { display: none; }
	.snit-recherche {
		max-width: none;
		flex: 1 1 200px;
	}
	.snit-actions .snit-btn--fantome { display: none; }
	.snit-actions .snit-btn--rouge .snit-btn__lib { display: none; }
	.snit-actions .snit-btn--rouge { padding-inline: 14px; }

	.snit-une__grille { grid-template-columns: 1fr; }
	.snit-une__cote { grid-auto-rows: auto; }
	.snit-carte-une { min-height: 380px; }
	.snit-grille-actus,
	.snit-grille-outils { grid-template-columns: repeat(2, 1fr); }
	.snit-adhesion .snit-wrap {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	.snit-pied__haut .snit-wrap {
		grid-template-columns: repeat(2, 1fr);
		gap: 34px;
	}
}
@media (max-width: 860px) {
	.snit-grille-decrypt { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.snit-section { padding-block: 48px; }
	.snit-une { padding-block: 28px 44px; }

	/* La recherche passe sur sa propre ligne : le logo garde sa taille. */
	.snit-entete__principal .snit-wrap {
		flex-wrap: wrap;
		gap: 12px 16px;
	}
	.snit-logo { order: 1; }
	.snit-actions { order: 2; }
	.snit-recherche {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
		min-width: 0;
	}

	.snit-carte-mini {
		grid-template-columns: 96px 1fr;
		gap: 13px;
	}
	.snit-carte-mini .snit-media {
		width: 96px;
		min-height: 80px;
	}
	.snit-carte-une__corps { padding: 22px; }
	.snit-section__entete {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
	}
	.snit-adhesion__actions .snit-btn { flex: 1; }

	/* Actualités, dispositifs et décryptages restent sur 2 colonnes. */
	.snit-grille-actus,
	.snit-grille-outils,
	.snit-grille-decrypt {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	.snit-carte-actu {
		padding: 16px 17px 15px;
		gap: 9px;
	}
	.snit-outil .snit-media { height: 132px; }
	.snit-outil__corps {
		padding: 14px 15px 16px;
		gap: 8px;
	}
	.snit-carte-actu__titre { font-size: 15.5px; }
	.snit-carte-actu__extrait,
	.snit-outil__desc {
		font-size: 13px;
		line-height: 1.45;
	}
	.snit-outil__titre { font-size: 16px; }
	.snit-outil__haut {
		align-items: flex-start;
		gap: 8px;
	}
	.snit-decrypt__corps { padding: 13px 14px 16px; }
	.snit-decrypt__titre { font-size: 15px; }
	.snit-decrypt__desc { font-size: 12.5px; }
	.snit-etiq {
		font-size: 10px;
		padding: 5px 9px;
	}
	.snit-meta,
	.snit-lien-info { font-size: 12.5px; }
	.badge-adh {
		height: 26px;
		padding-inline: 6px;
	}
	.badge-adh svg {
		width: 13px;
		height: 13px;
	}
}
@media (max-width: 560px) {
	.snit-pied__haut .snit-wrap {
		grid-template-columns: 1fr;
		gap: 30px;
		padding-block: 40px;
	}
	.snit-grille-actus,
	.snit-grille-outils,
	.snit-grille-decrypt { gap: 11px; }
	.snit-outil .snit-media { height: 110px; }
	.snit-carte-actu { padding: 14px 15px 13px; }
	.snit-outil__corps,
	.snit-decrypt__corps { padding: 12px 13px 14px; }
	.snit-carte-actu__titre,
	.snit-outil__titre { font-size: 14.5px; }
	.snit-decrypt__titre { font-size: 14px; }
	.snit-carte-actu__extrait,
	.snit-outil__desc,
	.snit-decrypt__desc { font-size: 12.5px; }
	.snit-logo__nom { font-size: 22px; }
	.snit-logo__marque { width: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.snit-media img,
	.snit-carte-actu::before,
	.snit-outil::before { transition-duration: .01ms !important; }
}


/* =========================================================================
   ANCRES DE SECTION
   ====================================================================== */
/*
 * L'en-tete est collant : sans cette marge, le titre d'une section visee
 * passerait dessous. scroll-margin-top est respecte aussi bien au clic sur
 * un lien interne qu'a l'arrivee sur la page avec une ancre dans l'adresse.
 */
[id].snit-section,
[id].snit-adhesion,
.snit-ancre {
	scroll-margin-top: var(--snit-ancre);
}

/* Le defilement anime, sauf si le systeme demande le contraire. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Une section rejointe par une ancre recoit le focus : on evite le contour
   par defaut, qui cerclerait toute la largeur de la page. */
[id].snit-section:focus,
[id].snit-adhesion:focus,
.snit-ancre:focus {
	outline: none;
}


/* =========================================================================
   FIL D'ARIANE ET EN-TETE D'ARCHIVE
   ====================================================================== */

.snit-ariane {
	margin: 22px 0 18px;
	font-size: 13.5px;
	line-height: 1.5;
}

.snit-ariane__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.snit-ariane__item {
	display: flex;
	align-items: baseline;
	margin: 0;
}

/* Le chevron est decoratif : il est dessine par le CSS, jamais lu a voix
   haute, et n'apparait pas devant le premier maillon. */
.snit-ariane__item + .snit-ariane__item::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	margin: 0 10px;
	border-top: 1.5px solid var(--snit-gris-clair);
	border-right: 1.5px solid var(--snit-gris-clair);
	transform: rotate(45deg);
	transform-origin: center;
	position: relative;
	top: -1px;
}

.snit-ariane__lien {
	color: var(--snit-gris);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--snit-transition), border-color var(--snit-transition);
}

.snit-ariane__lien:hover,
.snit-ariane__lien:focus-visible {
	color: var(--snit-rouge-fonce);
	border-bottom-color: currentColor;
}

.snit-ariane__courant {
	color: var(--snit-encre);
	font-weight: 600;
}

/* En-tete d'une archive de categorie. */
.snit-archive__entete {
	margin: 0 0 30px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--snit-ligne);
}

.snit-archive__titre {
	margin: 0;
	font-size: clamp(26px, 4vw, 34px);
	line-height: 1.12;
	letter-spacing: -.015em;
	color: var(--snit-encre);
	text-wrap: balance;
}

/* Le descriptif saisi sur la categorie : un chapo, pas un paragraphe de plus. */
.snit-archive__chapo {
	max-width: 68ch;
	margin-top: 12px;
	color: var(--snit-encre-clair);
	font-size: 16.5px;
	line-height: 1.62;
}

.snit-archive__chapo p { margin: 0 0 10px; }
.snit-archive__chapo p:last-child { margin-bottom: 0; }
.snit-archive__chapo a { color: var(--snit-rouge-fonce); }

/* =========================================================================
   PAGE STATIQUE
   ====================================================================== */

.snit-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: 56px;
	align-items: start;
	margin: 0 0 72px;
}

.snit-page--pleine { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1040px) {
	.snit-page { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* ---------- En-tête ---------- */

.snit-page__entete {
	padding-bottom: 26px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--snit-ligne);
}

.snit-page__entete .snit-sur { margin: 0 0 10px; }
.snit-page__entete .snit-sur a { color: inherit; text-decoration: none; }
.snit-page__entete .snit-sur a:hover { text-decoration: underline; }

.snit-page__titre {
	margin: 0;
	font-size: clamp(29px, 4.4vw, 42px);
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--snit-encre);
	text-wrap: balance;
}

.snit-page__chapo {
	max-width: 68ch;
	margin-top: 16px;
	color: var(--snit-encre-clair);
	font-size: 18px;
	line-height: 1.6;
}
.snit-page__chapo p { margin: 0; }

.snit-page__visuel { margin: 26px 0 0; }
.snit-page__visuel img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--snit-rayon);
}

/* ---------- Corps de texte ---------- */

.snit-page__contenu {
	max-width: 72ch;
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--snit-encre-clair);
}

.snit-page__contenu > * + * { margin-top: 1.1em; }

.snit-page__contenu h2,
.snit-page__contenu h3,
.snit-page__contenu h4 {
	color: var(--snit-encre);
	line-height: 1.2;
	letter-spacing: -.012em;
	text-wrap: balance;
}

.snit-page__contenu h2 { font-size: 25px; margin-top: 2em; }
.snit-page__contenu h3 { font-size: 19.5px; margin-top: 1.7em; }
.snit-page__contenu h4 { font-size: 17px; margin-top: 1.5em; }

.snit-page__contenu a {
	color: var(--snit-rouge-fonce);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.snit-page__contenu ul,
.snit-page__contenu ol { padding-left: 1.3em; }
.snit-page__contenu li + li { margin-top: .4em; }

.snit-page__contenu blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--snit-rouge);
	color: var(--snit-encre);
	font-size: 17.5px;
}

.snit-page__contenu img { max-width: 100%; height: auto; border-radius: var(--snit-rayon-s); }

/* Tableaux et blocs de code : ils défilent dans leur cadre, la page non. */
.snit-page__contenu table { width: 100%; border-collapse: collapse; font-size: 15px; }
.snit-page__contenu th,
.snit-page__contenu td { padding: 9px 12px; border-bottom: 1px solid var(--snit-ligne); text-align: left; }
.snit-page__contenu th { color: var(--snit-encre); font-weight: 600; }
.snit-page__contenu pre { overflow-x: auto; }

/* Un titre visé par le sommaire garde sa place sous l'en-tête collant. */
.snit-titre-ancre { scroll-margin-top: var(--snit-ancre); }

/* ---------- Colonne de droite ---------- */

.snit-page__cote {
	display: flex;
	flex-direction: column;
	gap: 30px;
	font-size: 14.5px;
}

@media (min-width: 1041px) {
	/* La colonne suit la lecture tant qu'elle tient dans l'écran.
	   Elle n'a plus de hauteur bornée ni de défilement propre : une colonne
	   qui défile à l'intérieur d'une page qui défile est illisible, et sa
	   partie basse passait inaperçue. Elle s'étire donc autant qu'il faut,
	   et le sommaire reste en vue par ses propres moyens. */
	.snit-page__cote {
		align-self: start;
	}

	.snit-page__cote .snit-somm {
		position: sticky;
		top: calc(var(--snit-ancre) + 8px);
	}
}

/* Les gabarits historiques donnent neuf colonnes sur douze au contenu et
   trois à la colonne latérale. Celle-ci n'étant plus affichée, le contenu
   reprend toute la largeur : sans cela, un quart de page resterait vide.
   La règle ne s'applique que si la colonne est réellement absente, pour que
   le filtre qui la rétablit retrouve la mise en page d'origine. */
.row:not(:has(#secondary)) > #primary.col-lg-9 {
	flex: 0 0 100%;
	max-width: 100%;
}

.snit-cote__titre {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--snit-gris);
}

/* Sommaire */
.snit-somm__liste {
	margin: 0;
	padding: 0 0 0 14px;
	list-style: none;
	border-left: 2px solid var(--snit-ligne);
}

.snit-somm__item + .snit-somm__item { margin-top: 9px; }
.snit-somm__item--n3 { padding-left: 14px; }

.snit-somm__liste a {
	color: var(--snit-encre-clair);
	text-decoration: none;
	line-height: 1.45;
	display: block;
	transition: color var(--snit-transition);
}
.snit-somm__liste a:hover,
.snit-somm__liste a:focus-visible { color: var(--snit-rouge-fonce); }

/* Pages sœurs */
.snit-soeurs__liste { margin: 0; padding: 0; list-style: none; }

.snit-soeurs__item { border-top: 1px solid var(--snit-ligne); }
.snit-soeurs__item:last-child { border-bottom: 1px solid var(--snit-ligne); }

.snit-soeurs__item a,
.snit-soeurs__item span {
	display: block;
	padding: 10px 0 10px 12px;
	border-left: 2px solid transparent;
	color: var(--snit-encre-clair);
	text-decoration: none;
	line-height: 1.4;
	transition: color var(--snit-transition), border-color var(--snit-transition);
}
.snit-soeurs__item a:hover,
.snit-soeurs__item a:focus-visible {
	color: var(--snit-rouge-fonce);
	border-left-color: var(--snit-rouge);
}
.snit-soeurs__item.est-ici span {
	color: var(--snit-encre);
	font-weight: 600;
	border-left-color: var(--snit-rouge);
}

.snit-cote__widgets { font-size: 14px; }

/* ---------- Dans cette rubrique ---------- */

.snit-rubrique {
	margin-top: 54px;
	padding-top: 34px;
	border-top: 1px solid var(--snit-ligne);
}

.snit-rubrique__titre {
	margin: 0 0 20px;
	font-size: 21px;
	letter-spacing: -.01em;
	color: var(--snit-encre);
}

.snit-rubrique__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.snit-rubrique__carte {
	display: flex;
	flex-direction: column;
	gap: 7px;
	height: 100%;
	padding: 18px 20px;
	border: 1px solid var(--snit-ligne);
	border-radius: var(--snit-rayon-s);
	background: var(--snit-fond);
	text-decoration: none;
	transition: border-color var(--snit-transition), box-shadow var(--snit-transition);
}
.snit-rubrique__carte:hover,
.snit-rubrique__carte:focus-visible {
	border-color: var(--snit-rouge);
	box-shadow: var(--snit-ombre-m);
}

.snit-rubrique__nom {
	color: var(--snit-encre);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.3;
}

.snit-rubrique__extrait {
	flex: 1;
	color: var(--snit-gris);
	font-size: 14px;
	line-height: 1.5;
}

.snit-rubrique__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	color: var(--snit-rouge-fonce);
	font-size: 13.5px;
	font-weight: 600;
}
.snit-rubrique__cta svg { width: 13px; height: 13px; transition: transform var(--snit-transition); }
.snit-rubrique__carte:hover .snit-rubrique__cta svg { transform: translateX(3px); }

/* ---------- Pied et voisines ---------- */

.snit-page__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 44px;
	padding-top: 20px;
	border-top: 1px solid var(--snit-ligne);
}

.snit-page__edit { font-size: 13px; }
.snit-page__edit a { color: var(--snit-gris); }

.snit-voisines {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 22px;
}

@media (max-width: 640px) {
	.snit-voisines { grid-template-columns: minmax(0, 1fr); }
}

.snit-voisine {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 15px 18px;
	border: 1px solid var(--snit-ligne);
	border-radius: var(--snit-rayon-s);
	text-decoration: none;
	transition: border-color var(--snit-transition), background var(--snit-transition);
}
.snit-voisine:hover,
.snit-voisine:focus-visible {
	border-color: var(--snit-rouge);
	background: var(--snit-fond-nav);
}

/* La page suivante est poussée à droite quand elle est seule. */
.snit-voisine--apres { text-align: right; grid-column: 2; }
@media (max-width: 640px) { .snit-voisine--apres { text-align: left; grid-column: auto; } }

.snit-voisine__sens {
	color: var(--snit-gris);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.snit-voisine__nom {
	color: var(--snit-encre);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
}