/*
Theme Name: Vote for Esther
Theme URI: https://voteforesther.com
Description: Thème enfant de Twenty Twenty-Five pour la campagne Esther Wells, County Executive de Montgomery County. Palette marine et or imposée, typographie Inter, mobile d'abord.
Author: Campagne Esther Wells
Template: twentytwentyfive
Version: 1.7.6
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: voteforesther
*/

/* =========================================================================
   1. COMPATIBILITÉ AVEC L'ANCIEN CONTENU
   -------------------------------------------------------------------------
   Les pages importées de la production utilisent des slugs de couleur qui
   ne font plus partie de la palette (accent, accent-1..6, contrast-3,
   base-2, background). On les redirige vers les valeurs validées pour que
   l'ancien contenu adopte la nouvelle charte au lieu de perdre ses couleurs.

   Ces règles sont temporaires : elles disparaîtront une fois toutes les
   pages réécrites. Voir DEPLOIEMENT.md.
   ========================================================================= */

:root {
	--wp--preset--color--background: var(--wp--preset--color--base);
	--wp--preset--color--base-2: var(--wp--preset--color--surface);
	--wp--preset--color--accent: var(--wp--preset--color--surface);
	--wp--preset--color--accent-1: var(--wp--preset--color--surface);
	--wp--preset--color--accent-2: var(--wp--preset--color--dark);
	--wp--preset--color--accent-3: var(--wp--preset--color--dark);
	--wp--preset--color--accent-4: var(--wp--preset--color--muted);
	--wp--preset--color--accent-5: var(--wp--preset--color--surface);
	--wp--preset--color--accent-6: var(--wp--preset--color--line);

	/* Ces trois-là ne servent pas l'ancien contenu : elles sont lues par la
	   feuille du constructeur de GoDaddy, qui n'existe que sur l'hébergement
	   et pas en local. `contrast-2` et `contrast-3` y désignent toujours le
	   texte posé sur une surface sombre — voile de bloc de couverture, section
	   « on-dark », groupe habillé d'un fond — et `base-3` la surface sombre
	   elle-même. Mappées au marine, elles peignaient du marine sur du marine :
	   les quatre cartes de la page Donate et la section « Press & Events » de
	   la page Contact étaient illisibles sur le staging, alors qu'elles
	   sortaient correctement en local. */
	--wp--preset--color--contrast-2: var(--wp--preset--color--base);
	--wp--preset--color--contrast-3: var(--wp--preset--color--base);
	--wp--preset--color--base-3: var(--wp--preset--color--dark);
}

.has-background-color:not(.wp-element-button):not(.wp-block-button__link)        { color: var(--wp--preset--color--base) !important; }
.has-background-background-color:not(.wp-element-button):not(.wp-block-button__link) { background-color: var(--wp--preset--color--base) !important; }
.has-base-2-color:not(.wp-element-button):not(.wp-block-button__link)            { color: var(--wp--preset--color--surface) !important; }
.has-base-2-background-color:not(.wp-element-button):not(.wp-block-button__link) { background-color: var(--wp--preset--color--surface) !important; }
.has-accent-color:not(.wp-element-button):not(.wp-block-button__link)            { color: var(--wp--preset--color--surface) !important; }
.has-accent-background-color:not(.wp-element-button):not(.wp-block-button__link) { background-color: var(--wp--preset--color--surface) !important; }
.has-accent-1-color:not(.wp-element-button):not(.wp-block-button__link)            { color: var(--wp--preset--color--surface) !important; }
.has-accent-1-background-color:not(.wp-element-button):not(.wp-block-button__link) { background-color: var(--wp--preset--color--surface) !important; }
.has-accent-2-color:not(.wp-element-button):not(.wp-block-button__link)            { color: var(--wp--preset--color--contrast) !important; }
.has-accent-2-background-color:not(.wp-element-button):not(.wp-block-button__link) { background-color: var(--wp--preset--color--dark) !important; }
.has-accent-3-color:not(.wp-element-button):not(.wp-block-button__link)            { color: var(--wp--preset--color--contrast) !important; }
.has-accent-3-background-color:not(.wp-element-button):not(.wp-block-button__link) { background-color: var(--wp--preset--color--dark) !important; }
.has-accent-4-color:not(.wp-element-button):not(.wp-block-button__link)            { color: var(--wp--preset--color--muted) !important; }
.has-accent-4-background-color:not(.wp-element-button):not(.wp-block-button__link) { background-color: var(--wp--preset--color--muted) !important; }
.has-accent-5-color:not(.wp-element-button):not(.wp-block-button__link)            { color: var(--wp--preset--color--surface) !important; }
.has-accent-5-background-color:not(.wp-element-button):not(.wp-block-button__link) { background-color: var(--wp--preset--color--surface) !important; }
.has-accent-6-color:not(.wp-element-button):not(.wp-block-button__link)            { color: var(--wp--preset--color--line) !important; }
.has-accent-6-background-color:not(.wp-element-button):not(.wp-block-button__link) { background-color: var(--wp--preset--color--line) !important; }
.has-contrast-3-color:not(.wp-element-button):not(.wp-block-button__link)            { color: var(--wp--preset--color--base) !important; }
.has-contrast-3-background-color:not(.wp-element-button):not(.wp-block-button__link) { background-color: var(--wp--preset--color--dark) !important; }

/* =========================================================================
   2. GARDE-FOUS DE LA CHARTE
   -------------------------------------------------------------------------
   Contraintes non négociables appliquées structurellement, pour qu'une
   erreur d'édition ne puisse pas les enfreindre.
   ========================================================================= */

/* 2a. L'or sur fond sombre est désormais la règle, non l'exception.
   Le garde-fou d'origine interdisait l'or sur les fonds sombres : il datait de
   la palette grise, où l'or sur #454545 évoquait un panneau de danger. Sur le
   marine #021B4B, l'or donne 9,27:1 avec un libellé marine — le meilleur
   contraste de toute la charte. Les boutons gardent donc partout leur style
   normal, y compris dans l'en-tête, le pied et les bandes sombres.

   La variante « outline » est ramenée au même traitement sur fond sombre :
   son bord et son libellé marine y seraient invisibles. */
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-accent-2-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-accent-3-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-contrast-3-background-color .wp-block-button.is-style-outline .wp-block-button__link,
header.wp-block-template-part .wp-block-button.is-style-outline .wp-block-button__link,
footer.wp-block-template-part .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
}

.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-accent-2-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-accent-3-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-contrast-3-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
header.wp-block-template-part .wp-block-button.is-style-outline .wp-block-button__link:hover,
footer.wp-block-template-part .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--gold-hover);
	border-color: var(--wp--preset--color--gold-hover);
	color: var(--wp--preset--color--contrast);
}

/* 2b. Le lien or #8A6A1F n'est pas lisible sur fond sombre : il passe en
   blanc souligné. */
.has-contrast-background-color a:where(:not(.wp-element-button)),
.has-dark-background-color a:where(:not(.wp-element-button)),
.has-accent-2-background-color a:where(:not(.wp-element-button)),
.has-accent-3-background-color a:where(:not(.wp-element-button)),
.has-contrast-3-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* 2c. Le gris secondaire #4A5568 ne tient que 4,31:1 sur #F2F5FA, sous le
   seuil de 4,5. Sur les cartes et sections grises il repasse en #021B4B. */
.has-surface-background-color .has-muted-color,
.has-accent-background-color .has-muted-color,
.has-accent-1-background-color .has-muted-color,
.has-accent-5-background-color .has-muted-color,
.has-base-2-background-color .has-muted-color,
.has-surface-background-color .has-accent-4-color,
.has-accent-background-color .has-accent-4-color,
.has-accent-5-background-color .has-accent-4-color {
	color: var(--wp--preset--color--contrast) !important;
}

/* 2d. Aucun dégradé, aucune ombre colorée, aucun duotone. */
.wp-block-cover .wp-block-cover__gradient-background,
[class*="wp-block-"][style*="gradient"] {
	background-image: none !important;
}

:where(.wp-block-group, .wp-block-column, .wp-block-columns, .wp-block-cover,
	.wp-block-image, .wp-block-button__link, .wp-element-button, .wp-block-quote,
	.wp-block-media-text, .wp-block-table, .wp-block-post-template li) {
	box-shadow: none;
}

/* =========================================================================
   3. EN-TÊTE ET PIED DE PAGE
   ========================================================================= */

.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
}

.wp-site-blocks > header.wp-block-template-part a:where(:not(.wp-element-button)),
.wp-site-blocks > footer.wp-block-template-part a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.wp-site-blocks > header.wp-block-template-part a:where(:not(.wp-element-button)):hover,
.wp-site-blocks > footer.wp-block-template-part a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.wp-site-blocks > header.wp-block-template-part .wp-block-social-link,
.wp-site-blocks > footer.wp-block-template-part .wp-block-social-link {
	color: var(--wp--preset--color--base);
}

/* Répartition de l'en-tête.
   Sept entrées de menu plus un bouton ne tiennent pas sur une seule ligne.
   Sur grand écran le menu prend sa propre rangée sous l'identité ; sur mobile
   il se réduit au bouton hamburger, qui remonte à côté du titre, et c'est le
   bouton Contact qui passe en pleine largeur dessous. */
.vfe-header-bar {
	row-gap: 14px;
}

.vfe-header-identity {
	flex: 1 1 auto;
	min-width: 0;
}

.vfe-header-cta {
	order: 2;
}

.vfe-header-nav {
	order: 3;
	flex: 1 1 100%;
	border-top: 1px solid var(--wp--preset--color--navy-soft);
	padding-top: 14px;
}

.vfe-header-nav .wp-block-navigation__container {
	row-gap: 8px;
}

@media (max-width: 599px) {
	.vfe-header-nav {
		order: 2;
		flex: 0 0 auto;
		margin-left: auto;
		border-top: 0;
		padding-top: 0;
	}

	.vfe-header-cta {
		order: 3;
		flex: 1 1 100%;
	}

	/* Sur grand écran le retrait bas de l'en-tête est à zéro, pour souder la
	   rangée de liens au contenu. Sur mobile c'est le bouton Donate qui ferme
	   l'en-tête : sans respiration il colle au bord. Le retrait est posé en
	   style inline dans le balisage, d'où le !important. */
	.wp-site-blocks > header.wp-block-template-part > .wp-block-group {
		padding-bottom: 14px !important;
	}

	.vfe-header-cta .wp-block-button,
	.vfe-header-cta .wp-block-button__link {
		width: 100%;
	}
}

/* =========================================================================
   4. NEUTRALISATION DES BLEUS D'EXTENSIONS
   -------------------------------------------------------------------------
   WPForms, CoBlocks, Donorbox et The Events Calendar posent leurs propres
   bleus. Aucun bleu n'est autorisé sur ce site.
   ========================================================================= */

/* --- WPForms --- */
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field input[type="number"],
.wpforms-container .wpforms-field textarea,
.wpforms-container .wpforms-field select {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	font-family: Inter, sans-serif;
	font-size: 1rem;
	padding: 0.75rem;
}

.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field textarea:focus,
.wpforms-container .wpforms-field select:focus {
	border-color: var(--wp--preset--color--gold-link);
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 1px;
	box-shadow: none;
}

.wpforms-container .wpforms-submit,
.wpforms-container button[type="submit"] {
	background-color: var(--wp--preset--color--gold) !important;
	border: 1px solid var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: 6px !important;
	font-family: Inter, sans-serif !important;
	font-size: 1.125rem !important;
	font-weight: 600 !important;
	padding: 0.875rem 1.75rem !important;
	box-shadow: none !important;
}

.wpforms-container .wpforms-submit:hover,
.wpforms-container button[type="submit"]:hover {
	background-color: var(--wp--preset--color--gold-hover) !important;
	border-color: var(--wp--preset--color--gold-hover) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* Les cases à cocher et boutons radio natifs s'affichent en BLEU une fois
   cochés dans la plupart des navigateurs. `accent-color` les repasse en or,
   et `color` supprime le noir pur hérité par défaut. */
.wpforms-container input[type="checkbox"],
.wpforms-container input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
	width: 20px;
	height: 20px;
}

.wpforms-container .wpforms-required-label,
.wpforms-container label.wpforms-error {
	color: var(--wp--preset--color--contrast) !important;
}

/* Les libellés et descriptions de champs sortaient en noir pur #000000, que la
   charte interdit : WPForms ne les rattache à aucune variable de thème. */
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-label-inline,
.wpforms-container legend.wpforms-field-label,
.wpforms-container .wpforms-field-sublabel {
	color: var(--wp--preset--color--contrast) !important;
	font-family: Inter, sans-serif;
}

.wpforms-container .wpforms-field-description,
.wpforms-container .wpforms-field-sublabel.after {
	color: var(--wp--preset--color--muted) !important;
}

/* --- The Events Calendar ---
   L'extension pilote toute son interface par ses propres variables CSS, dont
   `--tec-color-accent-primary: #334aff` — un bleu vif sans rapport avec le
   marine de la charte, qui ressortait sur le bouton « Find Events ». On
   redéfinit les variables plutôt que de courir après chaque sélecteur. */
:root {
	--tec-color-accent-primary: var(--wp--preset--color--gold-link) !important;
	--tec-color-accent-primary-hover: var(--wp--preset--color--contrast) !important;
	--tec-color-accent-primary-active: var(--wp--preset--color--contrast) !important;
	--tec-color-button-primary: var(--wp--preset--color--gold) !important;
	--tec-color-button-primary-hover: var(--wp--preset--color--gold-hover) !important;
	--tec-color-button-primary-active: var(--wp--preset--color--gold-hover) !important;
	--tec-color-link-accent: var(--wp--preset--color--gold-link) !important;
	--tec-color-link-accent-hover: var(--wp--preset--color--contrast) !important;
	--tec-color-link-primary: var(--wp--preset--color--contrast) !important;
	--tec-color-text-primary: var(--wp--preset--color--contrast) !important;
	--tec-color-text-primary-strong: var(--wp--preset--color--contrast) !important;
	--tec-color-text-secondary: var(--wp--preset--color--muted) !important;
	--tec-color-text-events-title: var(--wp--preset--color--contrast) !important;
	--tec-color-background-secondary: var(--wp--preset--color--surface) !important;
	--tec-color-border-default: var(--wp--preset--color--line) !important;
	--tec-color-border-secondary: var(--wp--preset--color--line) !important;
	--tec-color-text-primary-light: var(--wp--preset--color--muted) !important;
	--tec-color-text-disabled: var(--wp--preset--color--line) !important;
	--tec-color-icon-primary: var(--wp--preset--color--muted) !important;
	--tec-color-icon-active: var(--wp--preset--color--contrast) !important;
	--tec-color-icon-disabled: var(--wp--preset--color--line) !important;
	--tec-color-icon-focus: var(--wp--preset--color--gold-link) !important;
	--tec-color-event-icon: var(--wp--preset--color--contrast) !important;
	--tec-color-event-icon-hover: var(--wp--preset--color--gold-link) !important;
	--tec-color-accent-secondary: var(--wp--preset--color--contrast) !important;
	--tec-color-border-hover: var(--wp--preset--color--muted) !important;
	--tec-color-border-active: var(--wp--preset--color--contrast) !important;
}

/* Le libellé des boutons doit rester marine : l'or ne tient que 1,80:1 avec du
   blanc. Le `<button>` de recherche échappait aux sélecteurs de lien. */
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn,
.tribe-common button.tribe-common-c-btn,
.tribe-events-c-search__button,
button.tribe-events-c-search__button {
	background-color: var(--wp--preset--color--gold) !important;
	border-color: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: 6px;
}

.tribe-common .tribe-common-c-btn:hover,
.tribe-common a.tribe-common-c-btn:hover,
.tribe-common button.tribe-common-c-btn:hover,
.tribe-events-c-search__button:hover {
	background-color: var(--wp--preset--color--gold-hover) !important;
	border-color: var(--wp--preset--color--gold-hover) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.tribe-common a:where(:not(.tribe-common-c-btn)) {
	color: var(--wp--preset--color--gold-link);
}

/* --- CoBlocks --- */
.coblocks-form .coblocks-field,
.coblocks-form select {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	color: var(--wp--preset--color--contrast);
	padding: 0.75rem;
}

.coblocks-form__submit .wp-block-button__link {
	background-color: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
}

/* --- GTranslate ---
   Le sélecteur de langue est posé en `position: fixed; top: 0` avec un
   z-index de 999999 : il recouvrait le titre du site sur mobile et le bouton
   Contact sur grand écran. On le renvoie en bas à droite et on l'aligne sur
   la charte. */
.gtranslate_wrapper .gt_switcher_wrapper {
	top: auto !important;
	bottom: 16px !important;
	right: 16px !important;
	left: auto !important;
}

.gtranslate_wrapper .gt_switcher,
.gtranslate_wrapper .gt_switcher .gt_selected a,
.gtranslate_wrapper .gt_switcher a {
	border-color: var(--wp--preset--color--line) !important;
	color: var(--wp--preset--color--contrast) !important;
	box-shadow: none !important;
	font-family: Inter, sans-serif !important;
}

.gtranslate_wrapper .gt_switcher a:hover {
	background-color: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* =========================================================================
   5. ACCESSIBILITÉ ET MOBILE
   ========================================================================= */

/* Cible tactile minimum et focus toujours visible, jamais en bleu système. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-link);
	outline-offset: 2px;
}

/* Centrage des libellés de boutons, tous types confondus.
   L'ancienne règle ne visait que les boutons Gutenberg : les boutons WPForms
   restaient en `inline-block`, alignés sur la ligne de base, ce qui laissait
   13px au-dessus du texte et 7px en dessous. Le `!important` est nécessaire
   pour passer devant les styles inline du balisage de bloc et ceux des
   extensions. */
.wp-element-button,
.wp-block-button__link,
.wpforms-container .wpforms-submit,
.wpforms-container button[type="submit"],
.coblocks-form__submit .wp-block-button__link,
button.wp-element-button,
input[type="submit"],
button[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	line-height: 1.2 !important;
	min-height: 44px;
}

/* Un retrait vertical symétrique : c'est lui qui garantit le centrage, le
   `align-items` ne pouvant rien contre des valeurs haut et bas différentes. */
.wp-element-button,
.wp-block-button__link,
.wpforms-container .wpforms-submit,
.wpforms-container button[type="submit"] {
	padding-top: 0.875rem !important;
	padding-bottom: 0.875rem !important;
}

/* Aucun texte sous 16px sur mobile. */
@media (max-width: 781px) {
	body,
	.has-small-font-size,
	.wp-block-post-content {
		font-size: 1rem;
	}
}

/* Les images restent dans leur conteneur. */
img,
figure img {
	max-width: 100%;
	height: auto;
}

/* =========================================================================
   6. SECTIONS DE LA PAGE D'ACCUEIL
   ========================================================================= */

/* --- Hero --- */
.vfe-hero > .wp-block-image {
	margin-bottom: 0;
}

.vfe-hero img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
}

/* --- Tuiles de priorités --- */
.vfe-tile {
	margin: 0;
}

.vfe-tile a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 72px;
	height: 100%;
	padding: 16px 20px;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.vfe-tile a:hover,
.vfe-tile a:focus-visible {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* --- Prochain événement --- */
.vfe-next-event {
	max-width: 720px;
	margin: 0 auto;
	padding: 28px;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}

.vfe-next-event__eyebrow {
	margin: 0 0 8px;
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vfe-next-event__date {
	margin: 0 0 8px;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.vfe-next-event__time::before {
	content: " · ";
}

.vfe-next-event__title {
	margin: 0 0 20px;
	font-size: 1.5rem;
	line-height: 1.25;
}

.vfe-next-event__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.vfe-next-event__title a:hover {
	text-decoration: underline;
}

.vfe-next-event__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 0;
}

.vfe-next-event__all {
	color: var(--wp--preset--color--gold-link);
	text-decoration: underline;
}

/* --- Why Esther --- */
.vfe-why-list {
	max-width: 640px;
	padding-left: 0;
	list-style: none;
}

body.home .vfe-why-list {
	margin-left: auto;
	margin-right: auto;
}

.vfe-why-list li {
	position: relative;
	margin-bottom: 16px;
	padding-left: 34px;
	line-height: 1.5;
}

.vfe-why-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 14px;
	height: 3px;
	background-color: var(--wp--preset--color--gold);
}

/* --- Citation ---
   Pas de max-width ici. WordPress force `margin-left: auto !important` sur
   tout bloc plus étroit que la colonne de contenu
   (`.is-layout-constrained > :where(...)`), ce qui recentrait la citation et
   la décalait vers la droite sur une page alignée à gauche. Sans largeur
   maximale, elle suit la colonne et son filet s'aligne sur le texte. */
.vfe-quote {
	margin: 40px 0 32px;
}

.vfe-quote cite {
	display: block;
	margin-top: 12px;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
}

/* --- Supporter Spotlights --- */
.vfe-spotlight {
	padding: 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}

.vfe-stars {
	margin: 0 0 12px;
	color: var(--wp--preset--color--gold-link);
	font-size: 1.125rem;
	letter-spacing: 2px;
}

.vfe-spotlight__name {
	margin-bottom: 0;
	color: var(--wp--preset--color--muted);
}

.vfe-spotlight__name strong {
	color: var(--wp--preset--color--contrast);
}

/* --- Inscription --- */
.vfe-signup .wpforms-container {
	max-width: 560px;
	margin: 32px auto 0;
}

.vfe-sms {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	padding: 28px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}

.vfe-sms__number {
	margin-bottom: 0;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* --- Register to vote --- */
.vfe-vote-card {
	padding: 20px;
	border: 1px solid var(--wp--preset--color--navy-soft);
	border-radius: 8px;
}

.vfe-vote-card h3 {
	margin-top: 0;
	margin-bottom: 8px;
}

.vfe-vote-card p {
	margin-bottom: 6px;
}

.vfe-vote-card p:last-child {
	margin-bottom: 0;
}

/* --- Rangée de boutons de bas de page --- */
.vfe-nav-row .wp-block-buttons {
	gap: 12px;
}

/* =========================================================================
   7. PAGES DE PRIORITÉ
   ========================================================================= */

/* Bandeau d'avertissement des pages encore remplies de faux texte.
   Pas de rouge, la charte l'interdit : la visibilité vient du trait épais et
   des majuscules. */
.vfe-placeholder-warning {
	margin-bottom: 40px;
	padding: 20px 24px;
	background-color: var(--wp--preset--color--surface);
	border: 3px solid var(--wp--preset--color--contrast);
	border-radius: 8px;
}

.vfe-placeholder-warning__fr {
	margin: 0 0 8px;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vfe-placeholder-warning__en {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Marqueurs de contenu manquant : visibles sans être criards. */
.vfe-marker {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}


/* Les deux colonnes des pages de priorité gardent un filet de séparation sur
   grand écran, et s'empilent proprement sous 782px, seuil auquel WordPress
   passe déjà les colonnes en pile. */
@media (min-width: 782px) {
	.vfe-priority-columns > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--line);
		padding-left: var(--wp--preset--spacing--50);
	}
}

.vfe-priority-columns h2:first-child,
.wp-block-column > h2:first-child {
	margin-top: 0;
}

/* =========================================================================
   8. RYTHME VERTICAL DES TITRES
   -------------------------------------------------------------------------
   Un titre doit être plus près du texte qu'il introduit que du bloc qui le
   précède : c'est l'écart qui crée la hiérarchie, pas un décalage horizontal.
   Auparavant les deux valeurs étaient identiques (24px de chaque côté), donc
   un h2 flottait entre deux paragraphes sans se rattacher à l'un ni à l'autre.
   ========================================================================= */

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-bottom: 0.5rem;
}

.entry-content h2 {
	margin-top: 2.75rem;
}

.entry-content h3 {
	margin-top: 2rem;
}

.entry-content h4 {
	margin-top: 1.5rem;
}

/* Un titre en tête de colonne ou de bloc n'a rien au-dessus de quoi se
   détacher : il ne doit pas creuser un vide. */
.entry-content > *:first-child,
.wp-block-column > h2:first-child,
.wp-block-column > h3:first-child,
.wp-block-group > h2:first-child,
.wp-block-group > h3:first-child,
.vfe-priority-columns h2:first-child {
	margin-top: 0;
}


/* --- Visual Link Preview ---
   L'extension pose ses conteneurs en `box-sizing: content-box`. Leur largeur
   de 900px s'additionnait donc au retrait et à la bordure pour faire 911px,
   et WordPress les recentrait 11px plus à gauche que le reste du texte. */
.vlp-link-container,
.vlp-link-container * {
	box-sizing: border-box;
}

/* =========================================================================
   9. BARRE DE NAVIGATION COLLANTE
   -------------------------------------------------------------------------
   Seule la rangée des liens reste en haut au défilement. L'identité du site
   et le bouton Donate défilent normalement et reviennent quand on remonte.
   La classe `is-stuck` est posée par assets/js/sticky-nav.js.
   ========================================================================= */

/* Les liens glissent de la gauche vers le centre quand la barre se colle, et
   reviennent quand on remonte. `justify-content` ne s'anime pas — il saute —
   donc le déplacement passe par un `translateX` dont la valeur est calculée
   au chargement par sticky-nav.js : la moitié de l'espace libre entre la
   largeur de la colonne et celle de la liste de liens. */
/* Le glissement n'existe qu'à partir de 600px : en dessous, la rangée se
   réduit au hamburger et il n'y a rien à recentrer.

   Le cantonner dans cette requête média n'est pas cosmétique. `transform` et
   `will-change: transform` créent un bloc conteneur pour les descendants en
   `position: fixed` : l'overlay du menu mobile, qui attend le viewport, se
   retrouvait enfermé dans la boîte étroite du `<nav>` et s'affichait collé au
   bord droit. `will-change` est retiré — l'indice n'apporte rien sur une
   transition de 340ms — et la transformation ne s'applique plus sur mobile. */
@media (min-width: 600px) {
	.vfe-header-nav > .wp-block-navigation {
		transition: transform 340ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.vfe-header-nav.is-stuck > .wp-block-navigation {
		transform: translateX(var(--vfe-nav-decalage, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.vfe-header-nav > .wp-block-navigation {
		transition: none;
	}
}

.vfe-header-nav.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	margin: 0;
	padding: 10px max(var(--wp--preset--spacing--40), calc((100% - var(--wp--style--global--wide-size)) / 2));
	background-color: var(--wp--preset--color--dark);
	border-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--navy-soft);
}

/* Le bouton Donate occupe la droite de la rangée collée. Sa largeur, relevée
   par sticky-nav.js, est réservée en retrait à droite : les liens ne peuvent
   plus glisser dessous, et s'ils ne tiennent plus dans ce qui reste, ils
   passent à la ligne au lieu de se superposer.

   Le retrait ne déplace pas le bouton : il est en position absolue, et les
   décalages d'un élément absolu se règlent sur la boîte de padding du parent,
   que `padding-right` ne bouge pas. */
@media (min-width: 600px) {
	.vfe-header-nav.is-stuck {
		padding-right: calc(
			max(
				var(--wp--preset--spacing--40),
				(100% - var(--wp--style--global--wide-size)) / 2
			) + var(--vfe-nav-cta-reserve, 0px)
		);
	}
}

/* Entre 600 et 1200px, la rangée collée doit loger les huit liens *et* le
   bouton : 739px de libellés, 210px d'écarts, 138px réservés au bouton et les
   marges de la rangée dépassent la fenêtre, et les liens passaient sur deux
   lignes alors que l'en-tête déroulé les tient sur une seule. L'écart entre
   liens est resserré dans ce seul état, ce qui repousse le passage à la ligne
   jusqu'à la largeur où l'en-tête déroulé se dédouble lui aussi.

   Seul l'écart horizontal est touché : l'écart vertical de 8px sert quand les
   liens passent quand même à la ligne. Deux classes portantes suffisent à
   passer devant la règle de mise en page que WordPress écrit pour le bloc de
   navigation, dont la feuille est chargée après la nôtre. */
@media (min-width: 600px) and (max-width: 1200px) {
	.vfe-header-nav.is-stuck .wp-block-navigation__container {
		column-gap: 20px;
	}
}

/* Le temps de la mesure, la rangée est collée puis décollée dans la même
   frame. Sans cette neutralisation, ce va-et-vient déclencherait l'animation
   de glissement, visible au chargement et à chaque redimensionnement. */
.vfe-header-nav.vfe-nav-mesure > .wp-block-navigation {
	transition: none !important;
}

/* Le bouton Donate du bandeau supérieur défile avec l'identité du site. Un
   second exemplaire, invisible tant que la rangée reste dans le flux, prend
   le relais dès qu'elle se colle : l'appel au don ne quitte plus l'écran,
   comme la campagne l'a demandé. Sorti du flux en position absolue, il ne
   fausse pas la mesure du recentrage des liens, qui se fait sur la largeur
   de la rangée. */
.vfe-header-nav .vfe-nav-cta {
	display: none;
}

.vfe-header-nav.is-stuck .vfe-nav-cta {
	display: flex;
	position: absolute;
	top: 50%;
	right: max(var(--wp--preset--spacing--40), calc((100% - var(--wp--style--global--wide-size)) / 2));
	transform: translateY(-50%);
	margin: 0;
}

/* Le bouton pleine taille dépasserait la rangée collée, plus basse que
   l'en-tête déroulé : on le resserre juste assez pour qu'il y tienne. */
.vfe-header-nav.is-stuck .vfe-nav-cta .wp-block-button__link {
	min-height: 40px;
	/* Le retrait symétrique des boutons est posé en !important plus haut
	   (section 5) : il faut la même force pour le resserrer ici. */
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

/* Retirée du flux, la rangée laissait l'en-tête se rétracter d'un coup :
   on compense par la hauteur exacte relevée avant le basculement. */
body.vfe-nav-collee {
	padding-top: var(--vfe-nav-hauteur, 0px);
}

@media (max-width: 599px) {
	.vfe-header-nav.is-stuck {
		padding: 8px var(--wp--preset--spacing--40);
	}

	/* Sur mobile la rangée se réduit au bouton hamburger : on le garde à
	   droite, comme dans l'en-tête déroulé. */
	.vfe-header-nav.is-stuck .wp-block-navigation__responsive-container-open {
		margin-left: var(--wp--preset--spacing--30);
	}

	/* Sur mobile la rangée collée ne contient que le hamburger : le bouton
	   Donate y reprend sa place dans le flux, juste avant lui. */
	.vfe-header-nav.is-stuck .vfe-nav-cta {
		position: static;
		transform: none;
		margin-left: auto;
	}
}

/* =========================================================================
   10. IMAGES DES PAGES
   ========================================================================= */

/* Chaque page s'ouvre sur une grille : deux tiers pour le texte qui la
   présente, un tiers pour l'image. Les colonnes de WordPress s'empilent
   d'elles-mêmes sous 782px, l'image passant alors sous le texte. */
.vfe-page-head {
	align-items: center;
}

.vfe-page-head .wp-block-column > *:first-child {
	margin-top: 0;
}

.vfe-page-head .wp-block-column > *:last-child {
	margin-bottom: 0;
}

.vfe-page-image {
	margin: 0;
}

.vfe-page-image img {
	display: block;
	width: 100%;
	height: auto;
	/* Les photos vont du portrait très allongé au paysage : sans plafond, un
	   portrait 0,56 montait à 632px dans une colonne de 356. On uniformise, en
	   remontant le cadrage pour ne pas couper les visages. */
	max-height: 420px;
	object-fit: cover;
	object-position: 50% 22%;
	border-radius: 8px;
}

@media (max-width: 781px) {
	/* Sur mobile l'image ne doit pas manger tout l'écran avant le texte. */
	.vfe-page-image img {
		max-height: 300px;
	}
}

/* =========================================================================
   11. JONCTION ENTRE LA NAVIGATION ET LE CONTENU
   -------------------------------------------------------------------------
   Il restait 44px de blanc sous la rangée de liens : 20px de retrait bas de
   l'en-tête et 24px de marge automatique du `main`. Le contenu démarre
   désormais au ras de la navigation.
   ========================================================================= */

.vfe-header-nav {
	padding-bottom: 12px;
}

.wp-site-blocks > main,
.wp-site-blocks > main.wp-block-group {
	margin-top: 0;
}

/* Sur mobile la rangée se réduit au hamburger, qui reste calé à droite. */
@media (max-width: 599px) {
	.vfe-header-nav {
		justify-content: flex-end;
	}
}

/* =========================================================================
   13. OR DANS L'INTERFACE
   ========================================================================= */

/* --- Bouton Donate de l'en-tête ---
   Il échappe au garde-fou « pas d'or sur fond sombre », qui datait de la
   palette grise. Sur le marine #021B4B, l'or donne 9,27:1 avec un texte
   marine : le contraste est excellent et l'appel au don doit ressortir. */
header.wp-block-template-part .vfe-header-cta .wp-element-button,
header.wp-block-template-part .vfe-header-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
}

header.wp-block-template-part .vfe-header-cta .wp-element-button:hover,
header.wp-block-template-part .vfe-header-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--gold-hover);
	border-color: var(--wp--preset--color--gold-hover);
	color: var(--wp--preset--color--contrast);
}

/* --- Lien de la page courante ---
   La classe est posée côté serveur par voteforesther_marque_lien_courant().
   Les sélecteurs reprennent l'en-tête et le pied de page pour passer devant la
   règle qui y met tous les liens en blanc, de spécificité 0-2-2.

   Le trait sous le lien double le repère : l'or seul ne doit pas porter
   l'information, pour qui distingue mal les couleurs. */
.wp-site-blocks header.wp-block-template-part .vfe-lien-actuel > .wp-block-navigation-item__content,
.wp-site-blocks header.wp-block-template-part .vfe-lien-actuel > .wp-block-navigation-item__content:hover,
.wp-site-blocks footer.wp-block-template-part .vfe-lien-actuel > .wp-block-navigation-item__content,
.wp-site-blocks footer.wp-block-template-part .vfe-lien-actuel > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* =========================================================================
   14. OR SUR LES SECTIONS CLAIRES
   -------------------------------------------------------------------------
   En texte, l'or ne donne que 1,80:1 sur blanc : illisible. Mais la règle de
   contraste ne porte que sur le texte et les commandes. L'or peut donc être
   employé en pleine saturation comme élément graphique — filets, marqueurs,
   accents — là où il ne véhicule aucune information à lire.
   Pour les mots eux-mêmes, c'est le bronze #8A6A1F, à 5,05:1.
   ========================================================================= */

/* Le filet or qui coiffait chaque titre de section a été retiré : la
   campagne trouvait ces traits jaunes déroutants (retour du 24 septembre
   2026). Isolés au-dessus d'un titre, ils se lisaient comme des éléments
   orphelins plutôt que comme une marque. */

/* Cartes de témoignages et encart du prochain événement. La bordure
   supérieure or a été retirée à la demande de Henri (24 septembre 2026) :
   c'est une ombre douce, teintée du marine de la charte, qui détache
   désormais ces blocs du fond. */
.vfe-spotlight,
.vfe-next-event {
	box-shadow:
		0 1px 2px rgba(2, 27, 75, 0.06),
		0 10px 28px rgba(2, 27, 75, 0.10);
}

/* Les étoiles restent en bronze : à 1,80:1 l'or pur serait délavé sur une
   carte blanche, et elles portent une information de notation. */
.vfe-stars {
	color: var(--wp--preset--color--gold-link);
}

/* Les intitulés en petites majuscules, hors fond sombre, passent au bronze :
   la teinte reste dans la famille de l'or et tient 5,05:1. */
.entry-content h6 {
	color: var(--wp--preset--color--gold-link);
}

/* --- Voiles des blocs cover hérités ---
   Les gabarits GoDaddy de Contact et Donate posent leur voile en `#000000` et
   `#121212`, en style inline dans le contenu. Ces valeurs sont en base, que
   nous ne modifions plus. On les rattrape ici : le voile prend le marine de la
   charte, l'opacité restant pilotée par les classes `has-background-dim-*`. */
.wp-block-cover__background.has-background-dim,
.wp-block-cover .wp-block-cover__background {
	background-color: var(--wp--preset--color--dark) !important;
}

/* =========================================================================
   15. LES QUATRE NOMBRES DE LA PAGE D'ACCUEIL
   -------------------------------------------------------------------------
   La campagne a demandé quatre chiffres clés sous le titre « Uniquely
   Qualified to be County Executive ». Le nombre porte la lecture, le libellé
   l'explique. Les chiffres vivent désormais dans l'ouverture marine de
   l'accueil (section 20), en cartes, sans filet or.
   ========================================================================= */

.vfe-stats {
	/* La grille de WordPress crée autant de colonnes qu'il en tient dans la
	   largeur : à 1140px, cinq colonnes pour quatre blocs, et la cinquième,
	   vide, poussait la rangée vers la gauche. `auto-fit` escamote les
	   colonnes vides, le plafond de 220px empêche les quatre restantes de
	   s'étirer pour combler le trou, et le groupe se centre comme le titre et
	   la liste de la même section. */
	grid-template-columns: repeat(auto-fit, minmax(200px, 220px));
	justify-content: center;
	margin-inline: auto;
}

/* En dessous de 1020px de fenêtre, la grille ne loge plus que trois colonnes
   et le quatrième bloc se retrouve seul sur une deuxième ligne. Deux colonnes
   valent mieux qu'un 3 + 1 bancal. Le seuil est relevé à la mesure, sur le
   rendu réel : le calcul théorique tombait cent pixels trop bas. */
@media (max-width: 1019px) {
	.vfe-stats {
		grid-template-columns: repeat(2, minmax(160px, 220px));
	}
}

/* Deux colonnes demandent 344px plus les marges : sous cette largeur les
   blocs s'empilent. */
@media (max-width: 420px) {
	.vfe-stats {
		grid-template-columns: minmax(0, 220px);
	}
}

.vfe-stat {
	/* WordPress pose `has-global-padding` sur tout groupe contraint : sans
	   cette remise à zéro, les nombres seraient en retrait dans leur case. */
	padding-inline: 0;
	padding-top: 14px;
}

.vfe-stat-nombre {
	margin: 0;
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--dark);
}

.vfe-stat-libelle {
	margin: 6px 0 0;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* La phrase de clôture de la page Volunteer, fournie par la campagne : elle
   ferme la page sur l'idée que la campagne repose sur les voisins d'Esther.
   Elle se détache en encadré sur le bleu très clair des sections, plutôt que
   par un filet or au-dessus, retiré avec les autres. */
.vfe-cloture {
	margin-top: var(--wp--preset--spacing--60);
	padding: 20px 24px;
	background-color: var(--wp--preset--color--surface);
	border-radius: 8px;
	font-weight: 600;
}

/* Un marqueur n'est pas un chiffre. À la taille des nombres il s'étale sur
   trois lignes et écrase le seul chiffre réel de la rangée ; il tient sa
   visibilité des crochets et de la casse, pas du corps. */
.vfe-stat-nombre.vfe-attente {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
}

/* La règle du cœur qui blanchit le texte d'un bloc de couverture passe par
   `:where()`, de spécificité nulle : la moindre feuille d'extension la
   renverse. On la réaffirme ici, à portée réelle. Les cinq blocs de
   couverture du site ont tous un voile sombre ; si l'un d'eux passait un jour
   à un voile clair, il lui faudrait une couleur de texte explicite. */
.wp-block-cover:not(.has-text-color),
.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container,
.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container :is(h1, h2, h3, h4, h5, h6, p, li, cite) {
	color: var(--wp--preset--color--base);
}

/* Mention de source sous une définition reprise d'un site officiel du comté.
   Elle doit se lire comme une note de bas de page : présente pour qui la
   cherche, jamais au même plan que le texte qu'elle accompagne. */
.vfe-source {
	margin-top: 8px;
	color: var(--wp--preset--color--muted);
	font-style: italic;
}

/* La variation de style « section 2 » des gabarits GoDaddy pose son fond avec
   `accent-2` et son texte avec `contrast`. Notre couche de compatibilité, en
   section 1, mappe les deux sur le marine : fond marine, texte marine, rapport
   de contraste de 1,00 — le texte disparaît purement et simplement. C'est le
   cas de « Press & Events » sur la page Contact, en local comme sur le staging.

   Le fond sombre est voulu : c'est le texte qui doit passer en clair. Les
   variations « section 1 » n'ont pas ce défaut, elles posent un fond clair et
   gardent leur texte marine.

   Le suffixe de la variation change d'un site à l'autre — `--4` ici — d'où la
   correspondance par sous-chaîne.

   La force du sélecteur n'est pas de l'excès de prudence. Deux règles
   concurrentes visent le même texte : celle que WordPress imprime pour la
   variation, en `:root :where(…)`, et surtout celle du constructeur de
   GoDaddy — absente en local, présente sur l'hébergement — dont le sélecteur
   `body .wp-site-blocks :is(.wp-block-group, .wp-block-column).is-style-section-2:not(…)`
   pèse quatre classes. Une version plus courte de cette règle a été déployée
   en 1.4.8 et n'a rien changé sur le staging, faute de poids. */
body .wp-site-blocks :is(.wp-block-group, .wp-block-column)[class*="is-style-section-2"],
body .wp-site-blocks :is(.wp-block-group, .wp-block-column)[class*="is-style-section-2"] :is(h1, h2, h3, h4, h5, h6, p, li, cite, blockquote, strong, em):not(.has-text-color) {
	color: var(--wp--preset--color--base) !important;
}

/* Le bronze des liens est réservé aux fonds clairs : sur ce marine il tombe à
   3,30:1. L'or y donne 9,27:1. */
body .wp-site-blocks :is(.wp-block-group, .wp-block-column)[class*="is-style-section-2"] a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--wp--preset--color--gold) !important;
}

/* Le commentaire de la règle des surtitres disait « hors fond sombre », mais
   rien ne l'y empêchait : sur la page Donate, le surtitre « Support Esther
   Wells » posé sur un bloc de couverture voilé de marine sortait en bronze,
   à 3,30:1. Sur fond sombre, c'est l'or plein qui prend le relais — 9,27:1 —
   et il garde au surtitre son rôle d'accent, que le blanc lui ferait perdre. */
.entry-content .wp-block-cover h6,
body .wp-site-blocks :is(.wp-block-group, .wp-block-column)[class*="is-style-section-2"] h6 {
	color: var(--wp--preset--color--gold) !important;
}

/* =========================================================================
   16. SOUS-MENUS DU MENU MOBILE
   -------------------------------------------------------------------------
   Dans l'overlay, WordPress déroule les sous-menus en permanence : les cinq
   priorités s'empilaient sous « Priorities » et repoussaient la moitié du menu
   hors de l'écran. Ils se replient, et s'ouvrent à la tape — la bascule est
   posée par assets/js/nav-mobile.js.
   ========================================================================= */

@media (max-width: 599px) {
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		display: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child.vfe-sous-ouvert > .wp-block-navigation__submenu-container {
		display: block;
	}

	/* Le chevron est la seule chose qui distingue un parent d'un lien simple :
	   sans lui, rien n'indique qu'il y a quelque chose à déplier. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		display: inline-flex;
		align-items: center;
		margin-left: 6px;
		transition: transform 200ms ease;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.vfe-sous-ouvert .wp-block-navigation__submenu-icon {
		transform: rotate(180deg);
	}

	/* La zone de tape couvre toute la ligne, chevron compris. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
	}
}

/* Quatre slugs hérités désignent un fond sombre dans notre couche de
   compatibilité : accent-2, accent-3, accent-4 et contrast-3. La feuille du
   constructeur de GoDaddy ne les connaît pas — sa liste d'exceptions est bâtie
   sur la palette actuelle — alors elle peint le texte de ces blocs avec
   `contrast`, le marine, sur un fond que nous avons rendu marine. C'est ce qui
   rendait invisible le paragraphe « Email us at… » de la section Get in touch
   sur la page Contact.

   Partout où notre couche pose un fond sombre, le texte passe donc en clair et
   les liens à l'or, qui donne 9,27:1 là où le bronze tombe à 3,30:1. */
:is(.has-accent-2-background-color, .has-accent-3-background-color,
	.has-accent-4-background-color, .has-contrast-3-background-color),
:is(.has-accent-2-background-color, .has-accent-3-background-color,
	.has-accent-4-background-color, .has-contrast-3-background-color)
	:is(h1, h2, h3, h4, h5, h6, p, li, cite, blockquote, .wp-element-caption):not(.has-text-color) {
	color: var(--wp--preset--color--base) !important;
}

:is(.has-accent-2-background-color, .has-accent-3-background-color,
	.has-accent-4-background-color, .has-contrast-3-background-color)
	a:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-social-link-anchor) {
	color: var(--wp--preset--color--gold) !important;
}

/* La règle de la section 2 ramène toute variante « outline » posée sur fond
   sombre à un bouton or plein, faute de quoi son bord marine serait invisible.
   Le bouton d'inscription à la lettre d'information doit pourtant rester
   second : la campagne a demandé que le don garde la première place. Il
   retrouve donc son contour — bord et libellé or sur le marine de l'en-tête,
   9,27:1 — face au Donate en or plein.

   Le sélecteur reprend le `header.wp-block-template-part` de la règle qu'il
   doit battre : à nombre de classes égal, c'est lui qui fait la différence. */
header.wp-block-template-part .vfe-header-cta .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}

header.wp-block-template-part .vfe-header-cta .wp-block-button.is-style-outline .wp-block-button__link:hover,
header.wp-block-template-part .vfe-header-cta .wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
}

/* =========================================================================
   17. TÉMOIGNAGES REPLIÉS
   -------------------------------------------------------------------------
   Les témoignages fournis vont de vingt mots à deux cents. Bornés à six
   lignes, les cartes retrouvent une hauteur comparable ; seul le témoignage
   qui dépasse reçoit un bouton, posé par assets/js/temoignages.js.
   ========================================================================= */

.vfe-temoignage--replie {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Le bouton se lit comme un lien, pas comme un bouton d'action : il ne rivalise
   ni avec Donate ni avec Volunteer. Le bronze tient 5,05:1 sur le blanc des
   cartes, là où l'or plein serait illisible. */
.vfe-temoignage__bascule {
	margin-top: 8px;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--gold-link);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.vfe-temoignage__bascule:hover,
.vfe-temoignage__bascule:focus-visible {
	color: var(--wp--preset--color--contrast);
}

/* La signature reste collée au bas de la carte quelle que soit la longueur du
   témoignage : c'est ce qui aligne les noms d'une carte à l'autre. */
.vfe-spotlight {
	display: flex;
	flex-direction: column;
}

.vfe-spotlight .vfe-spotlight__name {
	margin-top: auto;
	padding-top: 12px;
}

/* =========================================================================
   18. CLIPS VERTICAUX
   -------------------------------------------------------------------------
   Les films de campagne sont tournés au format des réseaux sociaux, neuf
   seizièmes. Laissé libre, un tel bloc occupe deux mille pixels de haut sur
   la largeur du contenu : il faut le borner et le centrer.
   ========================================================================= */

.vfe-video-verticale {
	max-width: 360px;
	margin-inline: auto;
}

/* Dans une grille de vidéos, chaque clip reste dans sa colonne plutôt que de
   se recentrer sur la page. */
.wp-block-group.is-layout-grid .vfe-video-verticale {
	margin-inline: 0;
}

/* Une grille aligne ses cases sur la plus haute : mêlés à des clips verticaux,
   les clips horizontaux se retrouvaient étirés à la hauteur d'un neuf
   seizièmes. Chacun garde désormais sa propre hauteur. */
.wp-block-group.is-layout-grid > .wp-block-embed {
	align-self: start;
}

/* Le portrait studio de la section « Uniquely Qualified ». Contrairement aux
   images d'en-tête de page, il n'est pas plafonné : c'est un plan en pied, le
   recadrer lui couperait les jambes. Il ne reprend des autres que l'arrondi,
   pour rester de la même famille. */
.vfe-portrait {
	margin: 0;
}

.vfe-portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Les cartes de la revue de presse tirent leur vignette du site de l'article.
   Deux d'entre elles pointaient vers des fichiers que le magazine a retirés :
   remplacées par des photographies de la campagne, en portrait, là où les
   autres sont en paysage. Une boîte fixe et un recadrage par le centre haut
   rendent les quatre cartes comparables, quel que soit le format d'origine.

   L'extension impose `width: 100%` depuis `.vlp-layout-basic .vlp-block-2 img`,
   à spécificité égale de la nôtre et imprimée après : d'où le sélecteur qui
   reprend sa propre chaîne de classes pour passer devant. */
.entry-content .vlp-layout-basic .vlp-block-2 img,
.entry-content .wp-block-visual-link-preview-link img {
	width: 150px;
	height: 100px;
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: 6px;
}

/* =========================================================================
   19. RELECTURE DE LA CAMPAGNE — SEPTEMBRE 2026
   ========================================================================= */

/* La nouvelle accroche de campagne, posée sous le bandeau. Elle doit se lire
   comme une signature, pas comme un titre : c'est le bandeau qui porte le nom
   et la fonction, elle ne fait que les prolonger. */
.vfe-accroche {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: 0;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Le détail sous chaque chiffre : il explique le nombre sans lui disputer
   l'attention. */
.vfe-stat-detail {
	margin: 8px 0 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.45;
}

/* Le formulaire de Constant Contact arrive avec ses propres styles ; on se
   contente de le borner pour qu'il ne s'étale pas sur toute la largeur du
   contenu, et de le centrer comme les formulaires qu'il remplace. */
.ctct-inline-form {
	max-width: 640px;
	margin-inline: auto;
}

/* La même accroche ferme chaque page, en pied. Sur le marine elle passe en or :
   9,27:1, et elle se distingue des mentions légales qui l'entourent. */
.vfe-accroche-pied {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* Une en-tête de page dont la colonne de texte tient en une ligne : sur About
   Esther, trente-deux pixels de texte à gauche pour quatre cent quatre pixels
   d'image à droite, plus soixante-douze de marge basse. Le bloc était presque
   entièrement vide, ce que la relecture de la campagne a relevé.

   L'image y est ramenée à 220px et la marge basse à la moitié. La règle est
   posée sur une classe, pas sur la page : toute en-tête aussi courte pourra la
   porter. */
.vfe-page-head--compacte {
	margin-bottom: var(--wp--preset--spacing--40) !important;
}

.vfe-page-head--compacte .vfe-page-image img {
	max-height: 220px;
}

@media (max-width: 781px) {
	.vfe-page-head--compacte .vfe-page-image img {
		max-height: 220px;
	}
}

/* La rangée de photographies au-dessus du calendrier. Quatre images de la même
   hauteur, recadrées par le centre haut pour garder les visages, et une bande
   qui se réduit à deux colonnes puis à une sur mobile.

   Le sélecteur reprend `.tribe-common` parce que The Events Calendar impose
   `height: auto` à toutes les images de ses pages, à spécificité égale de la
   nôtre et depuis une feuille chargée après. */
.tribe-common .vfe-bandeau-evenements,
.vfe-bandeau-evenements {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--30);
	/* The Events Calendar remet à zéro les marges de tout ce qui vit dans ses
	   pages : sans le sélecteur renforcé, la rangée collait à la barre de
	   recherche du calendrier. */
	margin-bottom: var(--wp--preset--spacing--60);
}

.tribe-common .vfe-bandeau-evenements img,
.vfe-bandeau-evenements img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
	object-position: 50% 28%;
	border-radius: 8px;
}

@media (max-width: 781px) {
	.tribe-common .vfe-bandeau-evenements,
	.vfe-bandeau-evenements {
		grid-template-columns: repeat(2, 1fr);
	}

	.tribe-common .vfe-bandeau-evenements img,
	.vfe-bandeau-evenements img {
		height: 140px;
	}

	.tribe-common .vfe-bandeau-evenements,
	.vfe-bandeau-evenements {
		margin-bottom: var(--wp--preset--spacing--50);
	}
}

@media (max-width: 420px) {
	.tribe-common .vfe-bandeau-evenements,
	.vfe-bandeau-evenements {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   20. RETOURS DE LA CAMPAGNE — 24 SEPTEMBRE 2026
   ========================================================================= */

/* L'accroche de campagne en bandeau, tout en haut de chaque page. La
   campagne la voulait plus grande et « dans la partie du site qui ne change
   pas » : l'en-tête est la seule zone commune à toutes les pages.

   L'or en fond avec un texte marine reprend le bandeau « FOR COUNTY
   EXECUTIVE » de l'image d'accueil et le bouton Donate : 9,27:1. */
.vfe-accroche-tete {
	margin: 0;
	padding: 5px var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
	font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
}

.wp-site-blocks > header.wp-block-template-part > .vfe-accroche-tete + .wp-block-group {
	margin-top: 0;
}

/* --- L'ouverture de la page d'accueil ---
   L'image et les quatre chiffres dans un même écran : qui découvre Esther
   voit d'un coup son visage, ses priorités (écrites dans l'image), son
   expérience et, juste au-dessus, l'accroche. D'où deux colonnes plutôt que
   l'image en pleine largeur, qui occupait à elle seule toute la hauteur
   d'un écran d'ordinateur portable. */
.vfe-une {
	margin-bottom: 0;
}

.vfe-une-image {
	margin: 0;
}

.vfe-une-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.vfe-une-titre {
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

/* Deux colonnes de chiffres dans la colonne de droite, à toutes les
   largeurs : les règles générales de la grille (section 15) visent une
   rangée de quatre en pleine largeur.

   Les paragraphes d'explication sous chaque chiffre ont été retirés de
   l'accueil : ils triplaient la hauteur de la colonne et repoussaient les
   chiffres hors de l'écran. La page About détaille le parcours. */
.vfe-une .vfe-stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: stretch;
	column-gap: 24px;
	row-gap: 22px;
}

.vfe-une .vfe-stat {
	padding-top: 10px;
}

.vfe-une .vfe-stat-nombre {
	font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
}

/* Sur téléphone l'en-tête prend déjà un tiers de l'écran : on resserre
   l'écart entre l'image et les chiffres pour en garder le plus possible. */
@media (max-width: 781px) {
	.wp-block-columns.vfe-une {
		gap: 20px;
	}

	.vfe-une-titre {
		margin-bottom: 14px;
		font-size: var(--wp--preset--font-size--large);
	}
}

/* --- Mise en valeur de l'ouverture ---
   Sur fond blanc nu, l'image et les chiffres flottaient sans cadre : la
   section paraissait trop simple. Un fond marine a été essayé puis écarté ;
   la mise en valeur passe par le relief. L'image devient une affiche posée
   sur la page, les chiffres des cartes blanches. Les ombres sont teintées du
   marine de la charte, pour rester dans sa famille de couleurs. */
.vfe-une-section .vfe-une-image img {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	box-shadow:
		0 2px 4px rgba(2, 27, 75, 0.06),
		0 18px 40px rgba(2, 27, 75, 0.16);
}

.vfe-une-section .vfe-stat {
	padding: 16px 18px 18px;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	box-shadow:
		0 1px 2px rgba(2, 27, 75, 0.06),
		0 10px 24px rgba(2, 27, 75, 0.09);
}

.vfe-une-section .vfe-stat-nombre {
	color: var(--wp--preset--color--dark);
}

@media (max-width: 781px) {
	.vfe-une-section .vfe-stat {
		padding: 12px 14px 14px;
	}
}

/* --- Image et chiffres à la même hauteur ---
   Henri voulait l'image plus large et aussi haute que la colonne des
   chiffres, qui restent en cartes 2 × 2 (une liste horizontale a été essayée
   et écartée). L'image passe à 60 % de la largeur et les deux colonnes sont
   étirées à la même hauteur. Le lien vers About qui suivait les cartes a
   été retiré : il doublait le menu et le bouton « Read her full story »,
   et sa hauteur obligeait à trop rogner l'image.

   L'écart restant est comblé par l'image en `object-fit: cover`. Le cadrage
   est calé à gauche du centre, car l'affiche a plus de blanc à droite (après
   « NOVEMBER 3, 2026 ») qu'à gauche : c'est ce blanc qui est rogné. */
.vfe-une-titre {
	font-size: 1.25rem;
	line-height: 1.25;
	margin-bottom: 12px;
}

.vfe-une .vfe-stats {
	column-gap: 14px;
	row-gap: 14px;
}

.vfe-une .vfe-stat {
	padding: 14px 16px 16px;
}

.vfe-une .vfe-stat-nombre {
	font-size: clamp(1.625rem, 1.1rem + 1.1vw, 2.125rem);
	white-space: nowrap;
}

.vfe-une .vfe-stat-libelle {
	font-size: 0.875rem;
	line-height: 1.4;
}

@media (min-width: 782px) {
	.vfe-une > .wp-block-column {
		display: flex;
		flex-direction: column;
	}

	.vfe-une .vfe-une-image {
		flex: 1 1 auto;
		display: flex;
	}

	.vfe-une .vfe-une-image img {
		height: 100%;
		object-fit: cover;
		object-position: 35% 50%;
	}

	/* Les marges automatiques de la section 15, qui centrent la grille en
	   pleine largeur, la réduiraient ici à sa largeur minimale : dans une
	   colonne flexible, une marge automatique absorbe l'espace au lieu de
	   l'étirer. */
	.vfe-une .vfe-stats {
		flex: 1 1 auto;
		margin-inline: 0;
		width: 100%;
	}
}

/* --- En-tête compact sur téléphone ---
   Sur un téléphone, l'en-tête occupait 254px, un tiers de l'écran, avant le
   moindre contenu : les deux boutons s'empilaient en pleine largeur. Ils
   passent côte à côte, et les marges se resserrent. Aucun bouton n'est
   retiré ni raccourci : la campagne tient à les garder tous. */
@media (max-width: 599px) {
	.vfe-accroche-tete {
		padding-top: 4px;
		padding-bottom: 4px;
		font-size: 0.9375rem;
		line-height: 1.2;
	}

	.wp-site-blocks > header.wp-block-template-part > .wp-block-group {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}

	.vfe-header-bar {
		row-gap: 10px;
	}

	.vfe-header-cta {
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 10px;
	}

	.vfe-header-cta .wp-block-button {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
	}

	/* Le libellé de la newsletter peut passer sur deux lignes : les deux
	   boutons gardent la même hauteur et leur texte reste centré. */
	.vfe-header-cta .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		min-height: 44px;
		padding: 6px 10px !important;
		line-height: 1.2;
		text-align: center;
	}
}

/* --- « Meet Esther in Person » : la section du prochain événement ---
   L'encart seul, centré sur fond blanc, paraissait vide. La section reçoit
   un titre, une photo de campagne à gauche (un bloc image ordinaire, que
   l'équipe peut changer dans l'éditeur) et un encart enrichi : pastille de
   calendrier et liste des trois événements suivants, tirés du calendrier. */
.vfe-evenements-grille {
	margin-top: var(--wp--preset--spacing--50);
}

.vfe-evenements-photo {
	margin: 0;
	height: 100%;
}

.vfe-evenements-photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
	object-position: 50% 40%;
	border-radius: 12px;
	box-shadow:
		0 2px 4px rgba(2, 27, 75, 0.06),
		0 18px 40px rgba(2, 27, 75, 0.16);
}

/* Dans la grille, l'encart prend toute la hauteur de sa colonne et passe au
   blanc : sa colonne voisine est une photo, le bleu très clair le fondait
   dans la page. */
.vfe-evenements-grille .vfe-next-event {
	max-width: none;
	height: 100%;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--base);
	border-radius: 12px;
}

.vfe-next-event__entete {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 20px;
}

.vfe-next-event__corps {
	min-width: 0;
}

.vfe-next-event__corps .vfe-next-event__title {
	margin: 0 0 8px;
}

.vfe-next-event__corps .vfe-next-event__date {
	margin: 0;
	font-weight: 400;
	font-size: 1rem;
	color: var(--wp--preset--color--muted);
}

/* La pastille : le mois en or sur marine (9,27:1), le jour en grand. */
.vfe-next-event__pastille {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 84px;
	margin: 0;
	background-color: var(--wp--preset--color--dark);
	border-radius: 12px;
	line-height: 1;
}

.vfe-next-event__mois {
	color: var(--wp--preset--color--gold);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vfe-next-event__jour {
	margin-top: 6px;
	color: var(--wp--preset--color--base);
	font-size: 2rem;
	font-weight: 700;
}

.vfe-next-event__suite {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.vfe-next-event__suite-titre {
	margin: 0 0 10px;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vfe-next-event__suite ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vfe-next-event__suite li {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: 12px;
	padding: 8px 0;
	font-size: 0.95rem;
	line-height: 1.4;
}

.vfe-next-event__suite li + li {
	border-top: 1px solid var(--wp--preset--color--surface);
}

.vfe-next-event__suite time {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	white-space: nowrap;
}

.vfe-next-event__suite a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.vfe-next-event__suite a:hover,
.vfe-next-event__suite a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.vfe-evenements-photo img {
		min-height: 0;
		height: 220px;
	}

	/* Sur téléphone, la colonne est étroite : pastille et marges se
	   resserrent pour laisser au titre la place de respirer. */
	.vfe-evenements-grille .vfe-next-event {
		padding: 20px;
	}

	.vfe-next-event__entete {
		gap: 14px;
	}

	.vfe-next-event__pastille {
		width: 54px;
		height: 60px;
		border-radius: 10px;
	}

	.vfe-next-event__mois {
		font-size: 0.75rem;
	}

	.vfe-next-event__jour {
		margin-top: 4px;
		font-size: 1.375rem;
	}

	.vfe-next-event__corps .vfe-next-event__title {
		font-size: 1.25rem;
	}

	.vfe-next-event__suite li {
		grid-template-columns: 3.25rem minmax(0, 1fr);
		gap: 10px;
		font-size: 0.9rem;
	}
}

/* =========================================================================
   21. VIDÉOTHÈQUE — PAGE VIDEOS/NEWS
   -------------------------------------------------------------------------
   Rachel demandait une page plus pratique (29 septembre 2026). Un menu de
   thèmes en tête, une vidéo à la une, les vidéos regroupées par thème et
   datées, les Shorts verticaux dans leur propre rangée, la presse en liste.
   Les vignettes viennent de voteforesther_video_legere() : le lecteur n'est
   chargé qu'au clic.
   ========================================================================= */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Menu de thèmes --- */
.vfe-sommaire {
	gap: 8px;
	margin-top: var(--wp--preset--spacing--30);
}

.vfe-sommaire .wp-block-button__link {
	padding: 6px 14px !important;
	min-height: 0;
}

/* Sur téléphone, le menu défile à l'horizontale au lieu d'occuper quatre
   lignes avant la première vidéo. */
@media (max-width: 781px) {
	.vfe-sommaire {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
	}

	.vfe-sommaire .wp-block-button {
		flex: 0 0 auto;
	}
}

/* Les ancres ne doivent pas finir sous la barre de navigation collante. */
.vfe-videotheque-section {
	scroll-margin-top: 80px;
}

.vfe-videotheque-section > h2 {
	margin-top: 0;
}

/* --- Vignettes --- */
.vfe-video {
	margin: 0;
}

.vfe-video__lancer {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--wp--preset--color--dark);
	border-radius: 10px;
	box-shadow: 0 8px 22px rgba(2, 27, 75, 0.12);
}

.vfe-video__lancer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

.vfe-video__lancer:hover img,
.vfe-video__lancer:focus-visible img {
	transform: scale(1.04);
}

.vfe-video__lancer:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* Le bouton de lecture : un disque or, triangle marine. */
.vfe-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	transform: translate(-50%, -50%);
	background-color: var(--wp--preset--color--gold);
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	transition: transform 200ms ease;
}

.vfe-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--wp--preset--color--dark);
}

.vfe-video__lancer:hover .vfe-video__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.vfe-video__cadre {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 10px;
	background-color: #000;
}

.vfe-video--verticale .vfe-video__lancer,
.vfe-video--verticale .vfe-video__cadre {
	aspect-ratio: 9 / 16;
}

.vfe-video--verticale .vfe-video__play {
	width: 52px;
	height: 52px;
}

.vfe-video__legende {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 10px;
	line-height: 1.35;
}

.vfe-video__titre {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.vfe-video__date {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

/* --- Grilles --- */
.vfe-grille-videos,
.vfe-grille-shorts {
	gap: 28px 24px;
	margin-top: var(--wp--preset--spacing--40);
}

.vfe-shorts-titre {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Deux Shorts de front sur téléphone plutôt qu'un seul, immense. */
@media (max-width: 599px) {
	.vfe-grille-shorts {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 20px 14px;
	}

	.vfe-video--verticale .vfe-video__titre {
		font-size: 0.9rem;
	}
}

/* --- À la une --- */
.vfe-video-une {
	max-width: 900px;
	margin: var(--wp--preset--spacing--50) auto var(--wp--preset--spacing--40);
}

.vfe-video-une__surtitre {
	margin: 0 0 10px;
	color: var(--wp--preset--color--gold-link);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vfe-video-une .vfe-video__play {
	width: 84px;
	height: 84px;
}

.vfe-video-une .vfe-video__play::after {
	border-width: 14px 0 14px 23px;
}

.vfe-video-une .vfe-video__titre {
	font-size: 1.25rem;
}

/* --- Presse --- */
.vfe-presse {
	margin-top: var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
}

.vfe-presse li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vfe-presse li:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}

.vfe-presse__source {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.vfe-presse a {
	color: var(--wp--preset--color--contrast);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
}

.vfe-presse a:hover,
.vfe-presse a:focus-visible {
	text-decoration: underline;
}

/* =========================================================================
   22. COMPARATIF ESTHER WELLS / WILL JAWANDO — PAGE PRIORITIES
   -------------------------------------------------------------------------
   Une affiche en hauteur au texte dense : en pleine largeur elle ferait près
   de 1 500px. Elle est bornée à 760px, cliquable pour l'ouvrir en grand, et
   doublée d'une version texte repliable, lisible par les lecteurs d'écran et
   les moteurs de recherche.
   ========================================================================= */

.vfe-comparatif {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--60);
}

.vfe-comparatif-image {
	max-width: 760px;
	margin-inline: auto;
}

.vfe-comparatif-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow:
		0 2px 4px rgba(2, 27, 75, 0.06),
		0 18px 40px rgba(2, 27, 75, 0.16);
	cursor: zoom-in;
}

.vfe-comparatif-image figcaption {
	margin-top: 10px;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	text-align: center;
}

/* --- Version texte --- */
.vfe-comparatif-texte {
	max-width: 760px;
	margin: var(--wp--preset--spacing--30) auto 0;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
}

.vfe-comparatif-texte summary {
	padding: 14px 18px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	cursor: pointer;
}

.vfe-comparatif-texte[open] summary {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vfe-comparatif-tableau {
	margin: 0;
	overflow-x: auto;
}

.vfe-comparatif-tableau table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.vfe-comparatif-tableau th,
.vfe-comparatif-tableau td {
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}

.vfe-comparatif-tableau thead th {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

.vfe-comparatif-tableau tbody tr:nth-child(even) td {
	background-color: var(--wp--preset--color--surface);
}

.vfe-comparatif-tableau td:first-child {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.vfe-tiles-titre {
	margin-bottom: var(--wp--preset--spacing--40);
}

@media (max-width: 599px) {
	.vfe-comparatif-tableau table {
		font-size: 0.875rem;
	}

	.vfe-comparatif-tableau th,
	.vfe-comparatif-tableau td {
		padding: 8px 10px;
	}
}

/* =========================================================================
   23. SIX PRIORITÉS MAJEURES — 30 SEPTEMBRE 2026
   -------------------------------------------------------------------------
   Hate & Inclusion rejoint les priorités majeures : six tuiles, en grille
   3 × 2 sur grand écran, 2 × 3 sur tablette, en colonne sur petit téléphone.
   La grille automatique de WordPress en logeait quatre par ligne, ce qui
   aurait laissé deux tuiles seules sur la seconde.
   ========================================================================= */
.vfe-tiles {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 781px) {
	.vfe-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 420px) {
	.vfe-tiles {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* --- Photo de la page About : plus grande, au format 16:9 --- */
.vfe-page-head--16-9 .vfe-page-image img {
	aspect-ratio: 16 / 9;
	height: auto;
	max-height: none;
	object-position: 50% 30%;
}

/* =========================================================================
   24. APRÈS LA RÉUNION DU 30 SEPTEMBRE 2026
   ========================================================================= */

/* Accroche propre à chaque priorité, en fin de page : la campagne la voulait
   visible sans encombrer le haut. Un encadré bleu ciel, texte marine. */
.vfe-accroche-priorite {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--50);
	padding: 24px 28px;
	background-color: var(--wp--preset--color--sky);
	border-radius: 12px;
	color: var(--wp--preset--color--contrast);
	font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
	font-weight: 700;
	line-height: 1.35;
}

/* Vidéo de la supportrice hispanophone, sous la grille des témoignages : un
   format vertical de téléphone, borné et centré pour ne pas écraser la grille. */
.vfe-video-soutien {
	max-width: 360px;
	margin: var(--wp--preset--spacing--50) auto 0;
}

.vfe-video-soutien video {
	display: block;
	width: 100%;
	border-radius: 12px;
	background-color: var(--wp--preset--color--dark);
	box-shadow:
		0 2px 4px rgba(2, 27, 75, 0.06),
		0 18px 40px rgba(2, 27, 75, 0.16);
}

.vfe-video-soutien figcaption {
	margin-top: 10px;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	text-align: center;
}

/* --- Page Donate --- */
.vfe-dons-intro,
.vfe-dons-impact {
	font-size: var(--wp--preset--font-size--medium);
}

.vfe-dons-appel {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
}

.vfe-dons-cartes {
	gap: 20px;
	margin-top: var(--wp--preset--spacing--40);
}

.vfe-dons-cartes .vfe-card {
	padding: 22px 24px;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	box-shadow: 0 10px 24px rgba(2, 27, 75, 0.08);
}

.vfe-dons-cartes .vfe-card h3 {
	margin-top: 0;
}

.vfe-dons-tableau {
	margin-top: var(--wp--preset--spacing--40);
	overflow-x: auto;
}

.vfe-dons-tableau table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}

.vfe-dons-tableau th,
.vfe-dons-tableau td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vfe-dons-tableau thead th {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.875rem;
}

.vfe-dons-tableau tbody tr:nth-child(even) td {
	background-color: var(--wp--preset--color--surface);
}

.vfe-dons-tableau td:first-child {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	font-size: 1.125rem;
}

@media (max-width: 599px) {
	.vfe-dons-tableau th,
	.vfe-dons-tableau td {
		padding: 9px 8px;
		font-size: 0.875rem;
	}
}

.vfe-accroche-priorite {
	box-sizing: border-box;
}

/* Trois postes de dépense : trois colonnes égales sur grand écran. */
.vfe-dons-cartes {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 781px) {
	.vfe-dons-cartes {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* --- Supporter Spotlights : vidéo et témoignage côte à côte ---
   Seuls les témoignages dont l'origine est prouvée restent (1er octobre
   2026). La vidéo, tournée en vertical, occupe le tiers gauche et s'affiche
   entière, sans bandes noires ni recadrage ; le témoignage prend les deux
   tiers restants, en grande citation. */
.vfe-soutiens {
	margin-top: var(--wp--preset--spacing--50);
}

.vfe-soutiens .vfe-video-soutien {
	max-width: 300px;
	margin: 0 auto;
}

.vfe-temoignage-une {
	padding: 40px 44px;
	background-color: var(--wp--preset--color--sky);
	border-radius: 16px;
}

.vfe-temoignage-une .vfe-stars {
	margin: 0;
}

.vfe-temoignage-une__citation {
	margin: 14px 0 18px;
	color: var(--wp--preset--color--contrast);
	font-size: clamp(1.375rem, 1rem + 1.3vw, 2rem);
	font-weight: 600;
	line-height: 1.35;
}

.vfe-temoignage-une__nom {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 1.0625rem;
	font-weight: 700;
}

@media (max-width: 781px) {
	.vfe-soutiens .vfe-video-soutien {
		max-width: 260px;
	}

	.vfe-temoignage-une {
		padding: 28px 24px;
	}
}

/* Steve et Rachel sous la citation d'Antonio, en deux cartes côte à côte ;
   leurs longs textes se replient (assets/js/temoignages.js). */
.vfe-soutiens-cartes {
	gap: 20px;
	margin-top: 20px;
}

.vfe-soutiens-cartes .vfe-spotlight {
	padding: 20px 22px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
}

/* =========================================================================
   25. CONTRÔLE AVANT MISE EN LIGNE — 1er OCTOBRE 2026
   ========================================================================= */

/* Les notes de bas de page des déclarations citent de longues adresses sans
   espace : sur téléphone, elles élargissaient la page à 739px pour un écran
   de 360. Elles peuvent désormais se couper n'importe où. Le reste du texte
   ne coupe que les mots trop longs pour leur ligne. */
.vfe-note {
	overflow-wrap: anywhere;
}

.entry-content :is(p, li, h2, h3, figcaption) {
	overflow-wrap: break-word;
}

/* La liste du calendrier dépassait de 2px sur téléphone : les marges
   négatives de ses rangées. On rogne ce dépassement plutôt que de laisser la
   page défiler à l'horizontale. */
.tribe-common.tribe-events {
	overflow-x: clip;
}