/**
 * Styles du thème Espoir Hérault.
 *
 * Chargé APRÈS Bootstrap (cf. functions.php) : ce qui est écrit ici gagne, à
 * spécificité égale. Privilégier la personnalisation par variables CSS de
 * Bootstrap plutôt que par surcharge de sélecteurs — c'est ce qui survivra à
 * une montée de version.
 */

/* ---------------------------------------------------------------------------
 * Typographie — reprise de la v1
 *
 * Constat, après relevé du thème v1 : il n'y a aucune police à intégrer.
 * Pas de @font-face, pas d'appel à Google Fonts, aucun fichier .woff/.woff2/
 * .ttf dans le thème. Les seules mentions de « Roboto » et « Helvetica » sont
 * des styles en ligne dans includes/newsletter/form_unsuscribe.php, qui ne
 * concernent que le formulaire de désinscription à la lettre d'information.
 *
 * La typographie visible de la v1 vient donc entièrement de Bulma :
 *
 *   html { font-size: 14px; -webkit-font-smoothing: antialiased;
 *          -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
 *   body, button, input, select, textarea { font-family: <pile système>; }
 *   code, pre { font-family: "Inconsolata", "Consolas", "Monaco", monospace; }
 *
 * Autrement dit : polices système, aucun téléchargement. C'est reproduit ici à
 * l'identique, en passant par les variables Bootstrap plutôt que par des
 * surcharges de sélecteurs.
 * ------------------------------------------------------------------------ */

:root {
	/* Pile exacte de Bulma, telle que la v1 la rend. */
	--bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	--bs-font-monospace: "Inconsolata", "Consolas", "Monaco", monospace;
}

/* Rendu du texte, repris de la règle `html` de Bulma. */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/*
 * La v1 pose `html { font-size: 14px }`, là où Bootstrap travaille sur une base
 * de 16px. Comme tout Bootstrap est dimensionné en rem, décommenter la règle
 * ci-dessous réduit d'un coup TOUTE l'interface — texte, marges, hauteurs de
 * boutons, gouttières — et rapproche la densité de celle de la v1.
 *
 * Laissé inactif : c'est un choix de maquette, pas une évidence technique.
 *
 * html { font-size: 14px; }
 */

/* Le contenu pousse le pied de page en bas, même sur une page courte. */
body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.eh-main {
	flex: 1 0 auto;
}

/* Accessibilité : lien d'évitement, visible uniquement au focus clavier. */
.eh-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 1080;
	padding: 0.75rem 1rem;
	background: var(--bs-body-bg);
}

.eh-skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}


/* ===========================================================================
 * Barre de navigation — reprise de la v1
 *
 * Les valeurs viennent du style.css de la v1 ; les sélecteurs sont traduits
 * vers le balisage Bootstrap :
 *
 *   v1                     ->  v2
 *   .nav.sticky            ->  .navbar.sticky-top   (position:sticky natif)
 *   .nav-menu a            ->  .navbar .nav-link
 *   .nav-item.active       ->  .navbar .nav-link.active
 *   .dropdown-content      ->  .navbar .dropdown-menu
 *   .dropdown-content a    ->  .navbar .dropdown-item
 *   .nav-soutenir          ->  .eh-nav-soutenir
 *   .nav-left a i          ->  .navbar-brand .fa
 *   .logo-nav-icon         ->  .eh-brand-logo
 *
 * Ce qui n'est PAS repris, et pourquoi :
 *   - `.nav-toggle` et `#nav-toggle-state` : la v1 ouvrait son menu mobile
 *     avec une case à cocher et le sélecteur `~`. Bootstrap fait la même
 *     chose en JavaScript, avec la gestion du clavier et du focus en prime.
 *   - `.dropdown:hover .dropdown-content` : l'ouverture au survol est
 *     inaccessible au clavier et au tactile. Bootstrap ouvre au clic.
 *   - `z-index: 20` : `.sticky-top` de Bootstrap vaut 1020, au-dessus des
 *     autres composants. Garder 20 ferait passer les modales dessous.
 * ======================================================================== */

:root {
	--eh-orange: #ec6848;
	--eh-orange-dark: #d9573a; /* orange enfoncé : survol et état actif */
	--eh-turquoise: #24aec3; /* filets et grands titres de section */
	--eh-turquoise-dark: #1e93a5;
	--eh-dark: #323232;
	--eh-dropdown-border: #e3e3e3;
	--eh-dropdown-hover: #f1f1f1;
}

/* ---------------------------------------------------------------------------
 * Palette Bootstrap du site (décision du 2026-09-10)
 *
 *   primaire   = orange  #ec6848, enfoncé #d9573a
 *   secondaire = turquoise #24aec3, enfoncé #1e93a5
 *
 * Bootstrap est vendorisé en CSS compilé, pas en Sass : on redéfinit donc ses
 * variables plutôt que ses sélecteurs. Tout ce qui lit --bs-primary /
 * --bs-secondary suit — .btn-*, .text-*, .bg-*, .border-*, .link-*,
 * .alert-*, .form-control:focus… Les états des boutons (survol, actif,
 * focus, désactivé) sont ceux de Bootstrap, avec nos teintes.
 * ------------------------------------------------------------------------ */

:root,
[data-bs-theme="light"] {
	--bs-primary: var(--eh-orange);
	--bs-primary-rgb: 236, 104, 72;
	--bs-primary-text-emphasis: #8a3520;
	--bs-primary-bg-subtle: #fdece7;
	--bs-primary-border-subtle: #f7c3b6;

	--bs-secondary: var(--eh-turquoise);
	--bs-secondary-rgb: 36, 174, 195;
	--bs-secondary-text-emphasis: #12586f;
	--bs-secondary-bg-subtle: #e4f5f8;
	--bs-secondary-border-subtle: #a7dfe7;

	--bs-link-color: var(--eh-orange);
	--bs-link-color-rgb: 236, 104, 72;
	--bs-link-hover-color: var(--eh-orange-dark);
	--bs-link-hover-color-rgb: 217, 87, 58;
	--bs-focus-ring-color: rgba(236, 104, 72, 0.25);
}

.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--eh-orange);
	--bs-btn-border-color: var(--eh-orange);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--eh-orange-dark);
	--bs-btn-hover-border-color: var(--eh-orange-dark);
	--bs-btn-focus-shadow-rgb: 240, 127, 99;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--eh-orange-dark);
	--bs-btn-active-border-color: #c84f34;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--eh-orange);
	--bs-btn-disabled-border-color: var(--eh-orange);
}

.btn-outline-primary {
	--bs-btn-color: var(--eh-orange);
	--bs-btn-border-color: var(--eh-orange);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--eh-orange);
	--bs-btn-hover-border-color: var(--eh-orange);
	--bs-btn-focus-shadow-rgb: 236, 104, 72;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--eh-orange);
	--bs-btn-active-border-color: var(--eh-orange);
	--bs-btn-disabled-color: var(--eh-orange);
	--bs-btn-disabled-border-color: var(--eh-orange);
}

.btn-secondary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--eh-turquoise);
	--bs-btn-border-color: var(--eh-turquoise);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--eh-turquoise-dark);
	--bs-btn-hover-border-color: var(--eh-turquoise-dark);
	--bs-btn-focus-shadow-rgb: 69, 186, 204;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--eh-turquoise-dark);
	--bs-btn-active-border-color: #1b8595;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--eh-turquoise);
	--bs-btn-disabled-border-color: var(--eh-turquoise);
}

.btn-outline-secondary {
	--bs-btn-color: var(--eh-turquoise);
	--bs-btn-border-color: var(--eh-turquoise);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--eh-turquoise);
	--bs-btn-hover-border-color: var(--eh-turquoise);
	--bs-btn-focus-shadow-rgb: 36, 174, 195;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--eh-turquoise);
	--bs-btn-active-border-color: var(--eh-turquoise);
	--bs-btn-disabled-color: var(--eh-turquoise);
	--bs-btn-disabled-border-color: var(--eh-turquoise);
}

/*
 * L'ombre portée de la v1, marquée.
 *
 * C'est la seule séparation d'avec le contenu : pas de `border-bottom`, la v1
 * n'en a pas non plus. Une bordure ici coûterait 1px pris SUR les 54px, la
 * barre étant en `box-sizing: border-box` comme tout Bootstrap — le contenu
 * n'aurait que 53px et se retrouverait décalé d'un pixel vers le haut.
 */
.navbar.sticky-top {
	box-shadow: 0 1px 10px var(--eh-dark);
}

/*
 * C'est le <header> qui colle en haut de la fenêtre, pas la barre seule : un
 * élément `sticky` ne sort jamais de son parent, et le <header> n'a que la
 * hauteur de la barre — collée à lui, elle ne collait à rien. Constaté sur
 * mobile le 2026-09-11 : en bas de page, le tiroir du menu s'ouvrait sous une
 * barre restée tout en haut, hors de vue. Le z-index est celui du
 * `.sticky-top` de Bootstrap.
 */
.eh-header {
	position: sticky;
	top: 0;
	z-index: 1020;
}

/* Entrées de premier niveau : majuscules, 14px, gras, noir. */
.navbar .nav-link {
	color: #000;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap; /* le .no-wrap de la v1 */
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
	color: var(--eh-orange);
}

.navbar .nav-link.active,
.navbar .nav-item.active > .nav-link {
	color: var(--eh-orange);
}

/*
 * Resserrement progressif entre 768 et 1200px, repris tel quel de la v1 : le
 * menu compte huit entrées et déborde sinon. Les trois paliers sont ceux du
 * style.css d'origine. La barre se déploie dès md (768px, `navbar-expand-md`,
 * décision du 2026-09-10) : c'est ce resserrement qui permet de tenir sans
 * menu mobile entre 768 et 991px. Le bouton « Nous soutenir » et la marque
 * suivent le même mouvement.
 */
@media (min-width: 992px) and (max-width: 1200px) {
	.navbar .nav-link,
	.eh-nav-soutenir {
		font-size: 13px;
		padding-left: 0.45rem;
		padding-right: 0.45rem;
	}
}

/*
 * De lg à 1399px : même règle qu'en md — les libellés peuvent se couper sur
 * deux lignes (« NOUS / CONNAÎTRE ») au lieu de faire passer la rangée
 * d'entrées sur plusieurs lignes quand la police du poste est plus large
 * que prévu (constaté entre 1191 et 1399px le 2026-09-12). Deux lignes de
 * 13px à l'interligne 1.1 tiennent dans les 54px de la barre.
 */
@media (min-width: 992px) and (max-width: 1399.98px) {
	.navbar .nav-link,
	.eh-nav-soutenir {
		font-size: 13px;
		line-height: 1.1;
		white-space: normal;
		text-align: center;
	}

	.navbar .nav-item {
		display: flex;
		align-items: center;
	}

	/* Toute la largeur de l'écran pour la barre et le bandeau de titre, et un
	   titre de page plus petit : le conteneur Bootstrap (960 à 1140px) et le
	   32px du titre faisaient passer les longs titres sur trois lignes. */
	.navbar.sticky-top > .container,
	.eh-page-header > .container {
		max-width: 100%;
	}

	.eh-page-title {
		font-size: 1.625rem; /* 26px */
	}
}

/*
 * md (768-991px) : la v1 repliait la barre sous 769px et n'avait pas à tenir
 * à 768px déployée. Plutôt que de rapetisser le texte jusqu'à l'illisible,
 * on garde 13px et on autorise les libellés à se couper sur deux lignes
 * (« NOUS / SOUTENIR », « NOUS / CONNAÎTRE ») — demande du 2026-09-10. Les
 * entrées sont des éléments flex : elles ne se resserrent, et le texte ne se
 * coupe, que lorsque la ligne manque de place. Deux lignes de 13px à
 * l'interligne 1.1 font 29px, dans les 54px de la barre.
 */
@media (min-width: 768px) and (max-width: 991.98px) {
	.navbar .nav-link,
	.eh-nav-soutenir {
		font-size: 13px;
		line-height: 1.1;
		padding-left: 0.35rem;
		padding-right: 0.35rem;
		white-space: normal;
		text-align: center;
	}
}

/*
 * En md, tout est resserré pour que les huit entrées tiennent sans repli :
 * le conteneur de la barre passe en pleine largeur (le .container de
 * Bootstrap ne fait que 720px à 768px, la barre y débordait), la marque
 * (icône maison ou logo) est masquée — demande du 2026-09-10, la place va
 * au menu — et l'arobase rapetisse.
 * Le lien vers l'accueil reste disponible par le logo du bandeau.
 */
@media (min-width: 768px) and (max-width: 991.98px) {
	.navbar.sticky-top > .container {
		max-width: 100%;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	/* Spécificité renforcée : la règle de gabarit `.navbar .navbar-brand`
	   (display: flex) vient plus bas dans le fichier et l'emporterait. */
	.navbar.sticky-top .navbar-brand {
		display: none;
	}

	.navbar .fa-at {
		font-size: 1.25rem;
	}

	/* Le caret des sous-menus prend de la place pour rien à cette taille. */
	.navbar .dropdown-toggle::after {
		margin-left: 0.15em;
		vertical-align: 0.15em;
	}

}

/* Sous-menus : blanc, anguleux, ombre franche. */
.navbar .dropdown-menu {
	margin-top: 0;
	min-width: 160px;
	background-color: #fff;
	border: 1px solid var(--eh-dropdown-border);
	border-radius: 0;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	text-align: left;
}

.navbar .dropdown-item {
	color: #000;
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	white-space: normal;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
	background-color: var(--eh-dropdown-hover);
	color: #000;
}

/* Entrée en cours de consultation : fond primaire et texte blanc, au lieu
   du bleu Bootstrap (demande du 2026-09-11) ; au survol, l'orange enfoncé. */
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
	background-color: var(--eh-orange);
	color: #fff;
}

.navbar .dropdown-item.active:hover,
.navbar .dropdown-item.active:focus {
	background-color: var(--eh-orange-dark);
	color: #fff;
}

/* Au-delà de 869px la v1 laisse le sous-menu prendre la largeur de son contenu. */
@media (min-width: 869px) {
	.navbar .dropdown-menu {
		width: max-content;
	}
}

/* « Nous soutenir » sur sa propre page : libellé jaune et gras (2026-09-12). */
.navbar .eh-nav-soutenir.active {
	color: yellow !important;
	font-weight: 600 !important;
}

/* « Nous soutenir » : bloc orange plein, texte blanc, à angles vifs comme en
   v1. Les variables du .btn de Bootstrap sont fixées pour chaque état, afin
   qu'aucune règle du framework ne puisse rendre le fond transparent ou le
   texte sombre (2026-09-12). */
.navbar .eh-nav-soutenir,
.eh-nav-soutenir {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--eh-orange);
	--bs-btn-border-color: var(--eh-orange);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--eh-orange-dark);
	--bs-btn-hover-border-color: var(--eh-orange-dark);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--eh-orange-dark);
	--bs-btn-active-border-color: var(--eh-orange-dark);
	--bs-btn-focus-shadow-rgb: 236, 104, 72;
	background-color: var(--eh-orange);
	border-color: var(--eh-orange);
	border-radius: 0;
	color: #fff;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 14px;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 0.75rem;
}

.eh-nav-soutenir:hover,
.eh-nav-soutenir:focus {
	background-color: var(--eh-orange-dark);
	border-color: var(--eh-orange-dark);
	color: #fff;
}

/*
 * Contact : à partir de la largeur où la navbar se déploie, la v1 masque le
 * libellé et ne garde que l'icône.
 *
 * `visually-hidden` plutôt que `display: none` : l'icône porte aria-hidden,
 * donc masquer réellement le libellé priverait le lien de tout nom accessible.
 * Ici il disparaît de l'écran mais reste annoncé par les lecteurs d'écran.
 */
/*
 * Arobase du contact : plus gros que le texte du menu.
 *
 * La règle porte sur le <i>, pas sur le <a> : les paliers responsives de
 * `.navbar .nav-link` réduisent le texte entre 768 et 1200px, l'icône garde
 * sa taille propre et n'est pas entraînée.
 */
.navbar .fa-at {
	font-size: 1.5rem;
	line-height: 1;
}

@media (min-width: 768px) {
	.eh-nav-contact-label {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
}

/*
 * Icône maison de la marque, sur l'accueil.
 *
 * SVG inline : la hauteur remplace le font-size de la v1 (26px), la largeur
 * suit le rapport du viewBox (576x512). `currentColor` sur le tracé fait le
 * reste — la couleur et le survol viennent d'ici.
 */
.eh-brand-home {
	height: 26px;
	width: auto;
	color: var(--eh-dark);
	display: block;
}

.navbar-brand:hover .eh-brand-home,
.navbar-brand:focus .eh-brand-home {
	color: var(--eh-orange);
}

/* Logo de la marque, sur les autres pages. */
.eh-brand-logo {
	width: 60px;
	height: auto;
	margin: 0.25rem;
}

/* ---------------------------------------------------------------------------
 * Gabarit de la barre : 54px de haut, à toutes les largeurs
 *
 * Hauteur fixe, aucun rembourrage vertical, tout centré sur l'axe vertical.
 *
 * Conséquence à connaître : en dessous de 768px la navbar se replie, et le
 * menu déplié ferait normalement grandir la barre. Pour que les 54px tiennent
 * « tous formats », le panneau replié est sorti du flux et posé sous la barre,
 * comme un tiroir. C'est le seul moyen de concilier les deux.
 * ------------------------------------------------------------------------ */

.navbar.sticky-top {
	height: 54px;
	min-height: 54px;
	padding-top: 0;
	padding-bottom: 0;
	--bs-navbar-padding-y: 0;
}

.navbar.sticky-top > .container {
	height: 100%;
	padding-top: 0;
	padding-bottom: 0;
}

.navbar .navbar-brand {
	height: 100%;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center;
}

.navbar .navbar-toggler {
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * Le conteneur repliable prend toute la hauteur de la barre.
 *
 * Sans ça, `.navbar-collapse` se dimensionne sur son contenu : la chaîne
 * hauteur pleine s'interrompt entre la barre et la liste, et le
 * `align-items: center` des entrées n'a plus de hauteur de référence.
 */
#eh-navbar {
	height: 100%;
}

/* Barre déployée : les entrées occupent toute la hauteur et sont centrées. */
@media (min-width: 768px) {
	.navbar .navbar-nav {
		height: 100%;
		align-items: center;
	}

	.navbar .nav-item {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.navbar .nav-link {
		height: 100%;
		display: flex;
		align-items: center;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Le sous-menu s'ouvre au ras du bas de la barre. */
	.navbar .dropdown-menu {
		top: 100%;
	}
}

/* Barre repliée : le panneau devient un tiroir, la barre garde ses 54px. */
@media (max-width: 767.98px) {
	/*
	 * Le tiroir doit retrouver une hauteur libre : héritée de la barre, elle
	 * vaudrait 54px et le menu serait tronqué.
	 */
	#eh-navbar {
		height: auto;
	}

	.navbar .navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 54px);
		overflow-y: auto;
		padding: 0.5rem 1rem;
		background-color: var(--bs-tertiary-bg, #fff);
		border-bottom: 1px solid var(--eh-dropdown-border);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	}

	.navbar .nav-link {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	.eh-nav-soutenir {
		height: auto;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 0.75rem;
	}

	/* Icône cœur devant « Nous soutenir », tiroir mobile seulement (2026-09-11) ;
	   la règle générale plus bas la masque partout ailleurs, d'où le sélecteur
	   renforcé ici, qui l'emporte quel que soit l'ordre. */
	.navbar .eh-nav-soutenir .eh-nav-soutenir-icon {
		display: inline-block;
	}
}

/* Hors du tiroir mobile, pas d'icône sur le bouton. */
.eh-nav-soutenir-icon {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Sous le point de repli : la barre n'est plus que le logo, centré
 *
 * Comportement de la v1 : `.nav-item-home-desktop` masqué, `.nav-item-logo-mobile`
 * en pleine largeur avec `margin: 5px auto` et `max-width: 300px`, et le bouton
 * d'ouverture sorti de la barre, en pastille orange flottante en bas à droite.
 *
 * Le seuil est celui du repli de la navbar, 768px depuis le 2026-09-10
 * (`navbar-expand-md`), soit les 769px de la v1 : en md le menu reste
 * déployé, en plus petit, et le menu mobile n'apparaît qu'en dessous.
 * Un seul seuil, un seul état.
 * ------------------------------------------------------------------------ */

/* Au-delà du repli, le logo mobile n'existe pas. */
.eh-logo-mobile {
	display: none;
}

@media (max-width: 767.98px) {
	/* La marque de bureau — icône maison ou icone.png — s'efface. */
	.navbar .navbar-brand {
		display: none;
	}

	/* Le logo prend toute la barre et se centre. */
	.eh-logo-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 0 2rem;
	}

	.eh-logo-mobile .logo {
		width: 80%;
		max-width: 300px;
		height: auto;
		max-height: 44px;
		object-fit: contain;
		margin: 5px auto;
	}

	/*
	 * Bouton d'ouverture : sorti du flux, en pastille flottante.
	 *
	 * Valeurs de la v1. `position: fixed` le détache de la barre, ce qui est
	 * précisément ce qui permet à celle-ci de n'afficher que le logo.
	 */
	.navbar .navbar-toggler {
		position: fixed;
		right: 12px;
		bottom: 12px;
		z-index: 1030;
		width: 44px;
		height: 44px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--eh-orange);
		border: 1px solid #fff;
		border-radius: 30px;
		box-shadow: 1px 1px 5px grey;
	}

	.navbar .navbar-toggler:focus {
		box-shadow: 1px 1px 5px grey;
	}

	/* Barres du hamburger en blanc : l'icône Bootstrap par défaut est sombre. */
	.navbar .navbar-toggler .navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
		width: 22px;
		height: 22px;
	}
}

/* ---------------------------------------------------------------------------
 * Menu replié : mise à plat des sous-menus
 *
 * Dans le tiroir mobile, les sous-menus ne sont plus des cartons flottants
 * au-dessus de la page : ils sont dans le flux, sous leur entrée parente. Tout
 * ce qui les détachait visuellement — fond, bordure, ombre, rembourrage —
 * n'a donc plus lieu d'être.
 * ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
	/*
	 * L'arobase disparaît : le libellé « Contacts », masqué sur la barre
	 * déployée, est visible ici. Garder les deux ferait redondance.
	 *
	 * `display: none` est sans risque pour l'accessibilité dans ce sens précis
	 * — l'icône porte aria-hidden, elle n'apportait aucun texte, et c'est le
	 * libellé qui donne son nom au lien.
	 */
	.navbar .fa-at {
		display: none;
	}

	.navbar .dropdown-menu {
		box-shadow: none;
		border: 0;
		background: transparent;
		line-height: 0.25rem;
		padding: 0;
	}
}

/* ===========================================================================
 * Bandeau d'accueil — repris du #masthead de la v1
 *
 * Valeurs relevées dans le style.css de la v1, traduites vers la grille
 * Bootstrap : `columns` -> `row`, `column is-5` -> `col-md-5`,
 * `column is-2` -> `col-md-2`.
 *
 * Le point de rupture est `md` (768px), au plus près des 769px de Bulma que
 * la v1 utilisait — et non les 992px de la barre de navigation : les deux
 * comportements sont indépendants.
 * ======================================================================== */

.eh-hero {
	background-image: url("../../images/cover.jpg");
	background-position: center;
	background-size: cover;

	/*
	 * Effet de parallaxe de la v1 : le fond ne défile pas avec la page.
	 * iOS l'ignore depuis toujours — le fond y défile normalement, sans
	 * casse. C'est une dégradation acceptable, pas un bogue à corriger.
	 */
	background-attachment: fixed;
}

/*
 * Hauteur du bandeau.
 *
 * Au-dessus de `md`, c'est le logo qui la donne, comme en v1 : aucun
 * rembourrage vertical. La v1 y arrivait en écrasant le `padding: 3rem 1.5rem`
 * de Bulma par un `padding: 0rem` sur `.home .hero .hero-body`.
 *
 * En dessous, le logo disparaît et la hauteur se réduit **progressivement**
 * avec la largeur d'écran, plutôt que de s'effondrer d'un coup sur la seule
 * hauteur du texte. `clamp()` fait ça sans palier : la valeur intermédiaire
 * suit la largeur de la fenêtre, bornée en haut et en bas.
 */
.eh-hero-body {
	padding: 0;
}

.eh-hero-logo {
	width: 80%;
	height: auto;
}

/*
 * Slogan centré dans sa colonne, à toutes les largeurs.
 *
 * Les tailles sont celles de la v1, converties : Bulma pose
 * `html { font-size: 14px }` là où Bootstrap travaille sur 16px. Reprendre les
 * rem tels quels aurait donné un texte 14 % trop gros — 2.2rem valaient 30.8px
 * en v1, ils en feraient 35.2px ici. Les valeurs ci-dessous rendent les mêmes
 * pixels qu'en v1.
 */
.eh-hero-text {
	justify-content: center;
	text-align: center;
}

.eh-headtext {
	color: #fff;
	font-size: 1.925rem; /* 30.8px, soit les 2.2rem de la v1 en base 14 */
	font-weight: 700;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

	/*
	 * Répartit le texte en lignes de longueur voisine, au lieu de remplir la
	 * première et de laisser un reste court à la fin. Le guillemet fermant est
	 * déjà retenu par une espace insécable dans le slogan lui-même
	 * (Réglages > Général) ; ceci évite les autres fins de ligne bancales.
	 *
	 * Les navigateurs qui ne connaissent pas la propriété l'ignorent : rien à
	 * prévoir en repli.
	 */
	text-wrap: balance;
}

/* Palier intermédiaire de la v1 : le slogan se resserre avant le passage en
   pleine largeur. */
@media (max-width: 1399.98px) {
	/* Jusqu'à xxl : la colonne du slogan (5/12 d'un conteneur de 1140px) ne
	   tient pas 30px de gras sur deux lignes, le texte passait sur trois
	   entre 1192 et 1399px (constaté le 2026-09-12). La taille md/lg est
	   gardée jusqu'à 1400px, où le conteneur passe à 1320px. */
	.eh-headtext {
		font-size: 1.53125rem; /* 24.5px, les 1.75rem de la v1 */
	}
}

/* Sous lg, la colonne d'écart entre logo et slogan est retirée : en md sa
   place revient au slogan (col-md-7, cf. home-page.php), en dessous le logo
   disparaît aussi (règle suivante). */
@media (max-width: 991.98px) {
	.eh-hero-offset {
		display: none;
	}
}

/*
 * Sous le point de rupture, la v1 escamote le logo et la colonne d'écart, et
 * ne garde que le slogan sur la photographie.
 */
@media (max-width: 767.98px) {
	.eh-hero-logo-col {
		display: none;
	}

	/* Pas de hauteur minimale sous md (décision du 2026-09-10) : le bandeau
	   ne fait que son rembourrage de 1rem autour du slogan. */
	.eh-hero-body {
		display: flex;
		align-items: center;
		padding: 1rem;
	}

	.eh-headtext {
		font-size: 1.09375rem; /* 17.5px, les 1.25rem de la v1 */
		font-weight: 400;
	}
}

/* ===========================================================================
 * Cartes d'actualités (.eh-news-card) — reprises de .card-news-block de la v1
 *
 * Servent à l'accueil (trois dernières) et, à terme, à la liste /actualites/.
 * Valeurs converties de la base 14px de Bulma vers les 16px de Bootstrap.
 *
 * Deux formats, bascule à 992px (lg) — la v1 basculait à 768px, mais les
 * cartes sont empilées jusqu'en md (cf. home-page.php), et une carte empilée
 * de 700px de large avec une image 4:3 serait démesurée :
 *   - lg et au-delà : carte blanche à coins arrondis (5px), image 4:3 en
 *     tête, titre orange léger, date, extrait, bouton « Lire la suite » ;
 *   - jusqu'à md : carte à plat (fond gris clair, filet, sans arrondi), image
 *     ramenée à 150px de haut, extrait limité à deux lignes, titre plus
 *     petit mais toujours orange (la v1 le passait en noir : abandonné le
 *     2026-09-10, même couleur sur tous les formats) ;
 *   - en md précisément : la carte à plat se couche — image à gauche sur la
 *     moitié de la largeur, titre, date, extrait et bouton à droite.
 *
 * Les couleurs sont provisoires : la palette (primaire, secondaire, grille
 * d'UI) est à redéfinir globalement — chantier suivant.
 * ======================================================================== */

.eh-news-card {
	--bs-card-border-radius: 5px;
	--bs-card-inner-border-radius: 5px;
}

/* L'image garde le ratio 4:3 de la taille eh-card, même si l'original est
   plus étroit ou plus large : pas de carte plus haute que ses voisines.
   `height: auto` est indispensable : WordPress écrit l'attribut height sur
   la balise, et une hauteur imposée fait ignorer `aspect-ratio`. */
.eh-news-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Titre : le `.card .title` de la v1 — graisse 300, orange, 2rem Bulma. */
.eh-news-title {
	margin: 0 0 0.25rem;
	font-size: 1.75rem; /* 28px, les 2rem de la v1 */
	font-weight: 300;
	line-height: 1.125;
	color: var(--eh-orange);
}

.eh-news-title a {
	color: inherit;
	text-decoration: none;
}

.eh-news-title a:hover,
.eh-news-title a:focus-visible {
	text-decoration: underline;
}

/* Date : le `.subtitle.is-6` de la v1 — 1rem Bulma, gris moyen. */
.eh-news-date {
	margin-bottom: 1rem;
	font-size: 0.875rem; /* 14px, le 1rem de la v1 */
	color: #4a4a4a;
}

.eh-news-text {
	text-align: justify;
}

/*
 * Bouton « Lire la suite » : libellé puis flèche à sa droite. Le déplacement
 * de la flèche au survol est dans animate.css.
 *
 * Le repos vient de .btn-primary (orange, palette du site). Ce qui est
 * propre à ces boutons — « Lire la suite », « Toutes nos actualités » —, c'est
 * le survol : au lieu de foncer, le bouton s'inverse en contour, fond blanc,
 * texte et filet orange (demande du 2026-09-10 ; la v1 avait ce bouton en
 * turquoise). Réglé par les variables de .btn, les états restent ceux de
 * Bootstrap.
 */
.eh-news-more {
	--bs-btn-hover-color: var(--eh-orange);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: var(--eh-orange);
	--bs-btn-active-color: var(--eh-orange);
	--bs-btn-active-bg: #fff;
	--bs-btn-active-border-color: var(--eh-orange);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

.eh-news-more-wrap {
	text-align: center;
}

/* Palier intermédiaire de la v1 : le titre se resserre avant le mobile. */
@media (max-width: 1191px) {
	.eh-news-title {
		font-size: 1.1375rem; /* 18.2px, les 1.3rem de la v1 */
	}
}

@media (max-width: 991.98px) {
	.eh-news-card {
		--bs-card-border-radius: 0;
		--bs-card-inner-border-radius: 0;
		--bs-card-bg: #f9f9f9;
		--bs-card-border-color: #dbdbdb;
	}

	.eh-news-image img {
		aspect-ratio: auto;
		height: 150px;
	}

	.eh-news-title {
		margin-bottom: 0.5rem;
		font-size: 0.9625rem; /* 15.4px, les 1.1rem de la v1 */
		font-weight: 700; /* gras sous lg, demande du 2026-09-10 (400 en v1) */
		line-height: inherit;
	}

	.eh-news-date {
		font-size: 0.7875rem; /* 12.6px, les 0.9rem de la v1 */
		font-style: italic;
	}

	/*
	 * La v1 masquait l'extrait sur mobile. Ici on en garde deux lignes,
	 * coupées par des points de suspension (demande du 2026-09-10) :
	 * `line-clamp` est la propriété standard, le préfixe -webkit- reste
	 * nécessaire à tous les navigateurs pour l'instant, avec le mode
	 * -webkit-box qui va avec. Le texte est aligné à gauche : justifié, la
	 * dernière ligne tronquée s'étirerait.
	 */
	.eh-news-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		text-align: left;
	}

	.eh-news-more-wrap {
		text-align: left;
	}
}

/*
 * md (768-991px) : carte couchée, moitié image, moitié texte.
 *
 * L'image est sortie du flux et étirée sur toute la hauteur de la carte,
 * quelle que soit la longueur du texte à droite ; `object-fit: cover` la
 * recadre sans la déformer. Le plancher de 12rem évite une bande trop plate
 * quand le texte est court. Cette règle vient après celle du mobile pour en
 * reprendre la hauteur de 150px.
 */
@media (min-width: 768px) and (max-width: 991.98px) {
	.eh-news-card {
		flex-direction: row;
	}

	.eh-news-image {
		position: relative;
		flex: 0 0 50%;
		max-width: 50%;
		min-height: 12rem;
	}

	.eh-news-image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}

	.eh-news-card .card-body {
		flex: 0 0 50%;
		max-width: 50%;
	}

	/* Plus de hauteur disponible à côté de l'image : trois lignes d'extrait. */
	.eh-news-text {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
}

/* ===========================================================================
 * Bandeau de titre des pages intérieures — template-parts/page-header.php
 *
 * Le `#masthead.hero.is-medium.is-bold` de la v1 sur toutes les pages sauf
 * l'accueil : photographie du bandeau en fond, titre blanc en majuscules,
 * filet turquoise sous le texte seul (inline-block). Valeurs de la v1
 * converties en base 16 : bloc à 2rem de rembourrage (1.75rem), titre à
 * 2.3rem (2.0125rem) puis 1.25rem sur mobile (1.09375rem, graisse 400, sans
 * filet). L'attache fixe du fond est réservée aux grands écrans, comme pour
 * le triptyque.
 * ======================================================================== */

.eh-page-header {
	padding: 1.75rem 0;
	background-image: url("../../images/cover.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
}

@media (min-width: 992px) {
	.eh-page-header {
		background-attachment: fixed;
	}
}

.eh-page-title {
	display: inline-block;
	margin: 0;
	padding: 0 0 0.875rem;
	border-bottom: 1px solid var(--eh-turquoise);
	color: #fff;
	font-size: 2.0125rem; /* 32.2px, les 2.3rem de la v1 */
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* Sous md (xs et sm) : titre plus petit, sans filet, et en gras — demande du
   2026-09-10, la v1 mobile le mettait en graisse 400. md et au-delà gardent
   la graisse 600 de la v1. */
@media (max-width: 767.98px) {
	.eh-page-header {
		padding: 1rem 0.25rem;
	}

	.eh-page-title {
		padding-bottom: 0;
		border-bottom: 0;
		font-size: 1.09375rem; /* 17.5px, les 1.25rem de la v1 */
		font-weight: 700;
	}
}

/* Cartes des pages enfants sur une page de section (demande du 2026-09-11) :
   bordure bleue #2061c6, ombre portée qui s'atténue au survol pendant que la
   carte s'enfonce (mouvement dans animate.css), titre en gras centré. */
.eh-section-card {
	--bs-card-border-color: #2061c6;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.18);
}

.eh-section-card:hover,
.eh-section-card:focus-within {
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.12);
	transform: translateY(3px);
}

.eh-section-card .card-title {
	font-weight: 700;
	text-align: center;
}

/* Résumé justifié à partir de md ; ferré à gauche en xs et sm, où les lignes
   courtes creuseraient des trous (demande du 2026-09-11). */
@media (min-width: 768px) {
	.eh-section-card .card-text {
		text-align: justify;
	}
}

/* Boutons « Précédent » / « Suivant » en bas des pages : secondaires, flèche
   du côté du sens (mouvement dans animate.css), précédent à gauche et
   suivant à droite ; seul, le suivant reste à droite. */
.eh-page-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.eh-page-next {
	margin-left: auto;
}

.eh-page-prev,
.eh-page-next {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	border: 1px dashed #fff !important; /* demande du 2026-09-11 */
}

/* Icône de la page (métadonnée _eh_icon, cf. inc-icons.php), au-dessus du titre. */
.eh-section-card-icon-wrap {
	margin: 0 0 0.5rem;
	text-align: center;
	line-height: 1;
}

.eh-section-card-icon {
	font-size: 2.5rem;
	color: var(--eh-orange);
}

/*
 * Lien vers la page parente, sous le bandeau d'une page enfant — le fil
 * d'Ariane. Souligné en permanence (demande du 2026-09-11), pas seulement au
 * survol ; même règle pour le retour à la liste des articles (.eh-single-back).
 */
.eh-page-parent {
	margin-bottom: 1.5rem; /* l'ancien mb-4 du gabarit */
}

/* En sm et md, le fil se resserre : 0.25rem au-dessus et en dessous (2026-09-11). */
@media (min-width: 576px) and (max-width: 991.98px) {
	.eh-page-parent {
		margin-top: 0.25rem;
		margin-bottom: 0.25rem;
	}
}

.eh-page-parent a {
	color: var(--eh-orange);
	text-decoration: underline;
}

/*
 * Corps de texte des pages et des articles : 1.1rem à partir de xl
 * (demande du 2026-09-11), 1rem en dessous. Porté par .entry-content, donc
 * aussi par l'introduction des pages de section.
 */
@media (min-width: 1200px) {
	.entry-content {
		font-size: 1.1rem;
	}
}

/* ===========================================================================
 * Liste des actualités par année (home.php) et article (single.php)
 * ======================================================================== */

/*
 * Cartes « en revers » de la liste (.eh-news-list, demande du 2026-09-10) :
 * pleine largeur, sans bordure ni fond, image à gauche et texte à droite à
 * **tous** les formats, xs compris. L'image tient un rapport largeur/hauteur
 * de 1,4 (7:5), et occupe 40 % de la rangée jusqu'à lg, 28 % à partir de xl
 * (1200px), où 40 % faisait une image trop large — demande du 2026-09-10,
 * « 30 % moins large ». Les règles sont plus spécifiques que celles de
 * .eh-news-card (accueil) et les remplacent, palier md « couché » compris.
 */
.eh-news-list .eh-news-card {
	--bs-card-bg: transparent;
	--bs-card-border-color: transparent;
	--bs-card-border-radius: 0;
	--bs-card-inner-border-radius: 0;
	border: 0;
	flex-direction: row;
	align-items: flex-start;
}

/* Sans bordure, l'espacement des rangées fait la séparation. */
.eh-news-list.row {
	--bs-gutter-y: 2rem;
}

.eh-news-list .eh-news-image {
	position: static;
	flex: 0 0 40%;
	max-width: 40%;
	min-height: 0;
}

.eh-news-list .eh-news-image img {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1.4;
	object-fit: cover;
	border-radius: 5px;
}

.eh-news-list .eh-news-card .card-body {
	flex: 1 1 auto;
	max-width: none;
	padding-top: 0;
	padding-bottom: 0;
}

.eh-news-list .eh-news-more-wrap {
	text-align: left;
}

.eh-news-list .eh-news-text {
	text-align: left;
}

@media (min-width: 768px) {
	/* Toute la largeur pour le texte : l'extrait n'est plus tronqué. */
	.eh-news-list .eh-news-text {
		display: block;
		-webkit-line-clamp: none;
		line-clamp: none;
		overflow: visible;
	}

	/* Le titre garde la taille bureau dès md, il a la place. */
	.eh-news-list .eh-news-title {
		font-size: 1.5rem;
		font-weight: 300;
	}

	.eh-news-list .eh-news-date {
		font-style: normal;
		font-size: 0.875rem;
	}
}

@media (min-width: 1200px) {
	.eh-news-list .eh-news-image {
		flex-basis: 28%;
		max-width: 28%;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {
	/* sm : colonne de texte étroite, rembourrage réduit, extrait sur deux
	   lignes (règle mobile de .eh-news-text), bouton sous le texte. */
	.eh-news-list .eh-news-card .card-body {
		padding: 0 0 0 0.75rem;
	}
}

/*
 * xs : la carte s'empile comme sur l'accueil — image pleine largeur ramenée à
 * 150px de haut, puis titre, date, extrait sur deux lignes et bouton —, mais
 * sans bordure ni fond (demande du 2026-09-10).
 */
@media (max-width: 575.98px) {
	/* `align-items: stretch` : en colonne, le `flex-start` de la règle
	   générale ramènerait l'image à sa largeur naturelle. */
	.eh-news-list .eh-news-card {
		flex-direction: column;
		align-items: stretch;
	}

	.eh-news-list .eh-news-image {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}

	.eh-news-list .eh-news-image img {
		aspect-ratio: auto;
		height: 150px;
	}

	.eh-news-list .eh-news-card .card-body {
		padding: 0.75rem 0 0;
	}

	/*
	 * Un filet gris de 1px entre deux actualités (demande du 2026-09-10) :
	 * posé sous chaque colonne sauf la dernière de l'année, avec le même
	 * espace au-dessus et au-dessous. La gouttière verticale de la rangée
	 * (2rem) est ramenée à zéro pour que l'écart soit entièrement porté par
	 * le rembourrage, et donc partagé par le filet.
	 */
	.eh-news-list.row {
		--bs-gutter-y: 0;
	}

	.eh-news-list > .col-12 {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.eh-news-list > .col-12:not(:last-child) {
		border-bottom: 1px solid var(--eh-dropdown-border); /* #e3e3e3 */
	}
}

/*
 * Barre des années : boutons à contour orange, pleins au survol — l'inverse
 * des boutons « Lire la suite », pour ne pas se confondre avec eux.
 *
 * Collante (demande du 2026-09-10) : `top: 0` — elle se cale en haut de la
 * fenêtre pendant le défilement. Fond opaque et ombre légère pour que les
 * cartes qui passent dessous ne se mélangent pas aux boutons. z-index sous
 * celui de la navbar (1020) et de ses sous-menus. Le bouton de l'année en
 * cours de lecture est marqué par theme.js (.is-current), qui met aussi le
 * hash de l'URL à jour.
 */
.eh-years {
	position: sticky;
	top: 0;
	z-index: 1010;
	margin: 1rem 0 0.5rem;
	padding: 0.5rem 0;
	background-color: var(--bs-body-bg);
	box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.2);
}

/* Année en cours de lecture : bouton plein. Par les variables de .btn, pour
   ne pas dépendre de l'ordre ni de la spécificité des règles de Bootstrap. */
.eh-year-btn.is-current {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--eh-orange);
}

.eh-years-list {
	gap: 0.5rem 0.8rem; /* les marges de .all-news-year-button de la v1 */
}

.eh-year-btn {
	--bs-btn-color: var(--eh-orange);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--eh-orange);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--eh-orange);
	--bs-btn-hover-border-color: var(--eh-orange);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--eh-orange);
	--bs-btn-active-border-color: var(--eh-orange);
	--bs-btn-focus-shadow-rgb: 236, 104, 72;
	--bs-btn-font-weight: 600;
	min-width: 5rem;
}

/* Les ancres d'année s'arrêtent sous la navbar (54px) et la barre des années
   collante (environ 60px), et non derrière. */
.eh-year-title {
	scroll-margin-top: 8rem;
	margin-top: 2rem;
}

.eh-year-row {
	margin-bottom: 1rem;
}

.eh-single-back a,
.eh-single-nav-link {
	color: var(--eh-orange);
	text-decoration: none;
}

/* Le retour à la liste est le fil d'Ariane de l'article : souligné en permanence. */
.eh-single-back a {
	text-decoration: underline;
}

.eh-single-nav-link:hover .eh-single-nav-title,
.eh-single-nav-link:focus-visible .eh-single-nav-title {
	text-decoration: underline;
}

.eh-single-nav-link {
	display: inline-block;
}

.eh-single-nav-label {
	display: block;
	font-size: 0.875rem;
	color: #4a4a4a;
}

.eh-single-nav-title {
	display: block;
	font-weight: 600;
}

.eh-single .entry-content {
	text-align: justify;
}

/* « À lire aussi » (single.php) : cartes sans bordure (demande du 2026-09-11),
   titre comme un chapitre de la charte. */
.eh-related .eh-news-card {
	--bs-card-border-radius: 0;
	--bs-card-inner-border-radius: 0;
	border: none;
	border-radius: 0;
}

/* Bouton « Lire la suite » des suggestions : en contour orange. */
.eh-related .eh-news-more {
	--bs-btn-color: var(--eh-orange);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--eh-orange);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--eh-orange);
	--bs-btn-hover-border-color: var(--eh-orange);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--eh-orange-dark);
	--bs-btn-active-border-color: var(--eh-orange-dark);
}

.eh-related-title {
	margin-bottom: 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--eh-turquoise);
	color: var(--eh-turquoise);
	font-size: 1.5rem;
	font-weight: 600;
	text-transform: uppercase;
}

/* Date de l'article : à droite, icône calendrier devant (demande du 2026-09-11). */
.eh-single-date {
	text-align: right;
	color: #000;
}

.eh-news-date-icon {
	margin-right: 0.35em;
}

/*
 * Images des actualités : contenu de l'éditeur classique (balises <img> et
 * codes courts [caption]). `.aligncenter` centre l'image ou la figure ; la
 * figure [caption] porte une largeur en ligne, bornée à 100 %. Sa légende
 * (figcaption.wp-caption-text) suit la règle commune des légendes.
 */
/* Seulement le contenu classique : <img> nues et figures [caption]. Pas le
   `.aligncenter` générique — les blocs Image de Gutenberg le portent aussi
   et se centrent en `display: table`, qu'un `display: block` casserait
   (image à gauche, légende sur toute la largeur — constaté le 2026-09-11). */
.entry-content img.aligncenter,
.entry-content .wp-caption.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.entry-content .wp-caption {
	max-width: 100%;
}

.entry-content .wp-caption img {
	max-width: 100%;
	height: auto;
}

.eh-single .entry-content img {
	max-width: 100%;
	height: auto;
}

/*
 * Légendes d'images (bloc Image de l'éditeur, <figcaption
 * class="wp-element-caption">), pages et articles : grises, 1rem, centrées
 * (demande du 2026-09-11). Les contenus importés de la v1 les enveloppent
 * souvent d'un <em>, qui garde l'italique.
 */
.entry-content figcaption,
.entry-content .wp-element-caption,
.entry-content .eh-caption,
.eh-block-caption {
	color: grey;
	font-size: 1rem;
	font-style: italic; /* par la feuille, pas par un <em> dans le contenu (2026-09-11) */
	text-align: center;
}

/* ===========================================================================
 * Pied de page (footer.php) — le `footer.footer` de la v1
 *
 * Collé en bas de la fenêtre par la colonne flex du body (voir plus haut).
 * Valeurs v1 converties (× 14/16). Le rembourrage bas est plus grand sous
 * 768px : la pastille orange du menu mobile flotte dans ce coin.
 * ======================================================================== */

/* Trois blocs superposés : boutons (fond gris clair), plan du site (#fdfdfd,
   filets), adresse et gouvernance (fond blanc, demande du 2026-09-11). */
.eh-footer {
	margin-top: 3rem;
	border-top: 1px solid var(--bs-border-color);
}

/* Sur les pages de section, un quart de cette marge (demande du 2026-09-11). */
.page-template-page-section .eh-footer {
	margin-top: 0.75rem;
}

.eh-footer-top {
	padding: 1.75rem 0 0.25rem; /* le 2rem du haut de la v1 ; les boutons ont leur marge basse */
	background: var(--bs-tertiary-bg);
}

.eh-footer-bottom {
	padding: 1.5rem 0 3rem; /* 6rem en bas en v1, réduit sur bureau */
	background: #fff;
}

/* Les deux boutons : le .btn-footer de la v1 — orange, coins 12px, 1.4rem,
   même largeur (287px, que la v1 égalisait en JS), icône devant. */
.eh-footer-actions {
	gap: 1rem 2rem; /* les marges 1rem de part et d'autre en v1 */
	margin-bottom: 1.5rem;
}

.eh-footer-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	width: 100%;
	max-width: 400px;
	padding: 0.5rem 1rem; /* 8px */
	border-radius: 12px;
	font-size: 1.225rem; /* 1.4rem */
}

@media (min-width: 576px) {
	.eh-footer-btn {
		width: 18rem; /* les 286.85px calculés par la v1 */
	}
}

.eh-footer-address {
	margin-bottom: 1.5rem;
}

.eh-footer-address p:last-child {
	margin-bottom: 0;
}

/* Liens du bloc d'adresse en couleur secondaire (demande du 2026-09-11). */
.eh-footer-address a {
	color: var(--eh-turquoise);
}

.eh-footer-address a:hover,
.eh-footer-address a:focus-visible {
	color: var(--eh-turquoise-dark);
}

/* Plan du site : titre gras souligné propre au pied de page, colonnes de
   liens sans nom de section, liens en couleur secondaire. Tout le bloc est
   ferré à gauche (demande du 2026-09-11), à l'inverse du reste du pied de
   page, centré. */
.eh-footer-sitemap,
.eh-footer-sitemap ul,
.eh-footer-sitemap li {
	text-align: left;
}

/* Un filet sur toute la largeur du conteneur avant et après le plan. */
.eh-footer-sitemap {
	margin: 0;
	padding: 1.5rem 0;
	border-top: 1px solid var(--bs-border-color);
	border-bottom: 1px solid var(--bs-border-color);
	background: #fdfdfd; /* demande du 2026-09-11 */
}

.eh-footer-sitemap-title {
	margin-bottom: 1rem;
	text-align: left;
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.eh-footer-sitemap li {
	margin-bottom: 0.25rem;
	font-size: 0.9375rem;
}

/* Liens du plan en couleur de texte (#212529), pas en turquoise (demande du
   2026-09-11) ; turquoise souligné au survol. */
.eh-footer-sitemap a {
	color: var(--bs-body-color);
	text-decoration: none;
}

.eh-footer-sitemap a:hover,
.eh-footer-sitemap a:focus-visible {
	color: var(--eh-turquoise);
	text-decoration: underline;
}

/* Espace gouvernance : petit bouton gris en contour, icône de clé (demande du
   2026-09-11). Gris neutre plutôt que le turquoise de --bs-secondary. */
.eh-footer-gouvernance {
	--bs-btn-color: var(--bs-secondary-color);
	--bs-btn-border-color: var(--bs-secondary-color);
	--bs-btn-hover-bg: var(--bs-secondary-color);
	--bs-btn-hover-border-color: var(--bs-secondary-color);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--bs-secondary-color);
	--bs-btn-active-border-color: var(--bs-secondary-color);
	--bs-btn-active-color: #fff;
	--bs-btn-focus-shadow-rgb: 108, 117, 125;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.eh-footer-nav {
	margin-top: 1.5rem;
}

@media (max-width: 767.98px) {
	.eh-footer-bottom {
		padding-bottom: 5.25rem; /* place pour la pastille du menu mobile */
	}
}

/* ===========================================================================
 * Pages « document » (groupe .eh-doc dans le contenu) : les statuts (page 17)
 * et l'équipe (page 16), même habillage (demande du 2026-09-11). Texte
 * justifié, sommaire à ancres, chapitres turquoise, sous-titres orange.
 * (Le style « chapeau » a été supprimé le 2026-09-12 : sans utilité.)
 * ======================================================================== */

.eh-doc {
	text-align: justify;
}

/* Sommaire des chapitres : liste sans puce, encadrée, liens turquoise. */
.eh-doc-sommaire {
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	list-style: none;
	border-left: 3px solid var(--eh-turquoise);
	background: var(--bs-tertiary-bg);
}

.eh-doc-sommaire li + li {
	margin-top: 0.35rem;
}

.eh-doc-sommaire a {
	color: var(--eh-turquoise);
	text-decoration: none;
}

.eh-doc-sommaire a:hover,
.eh-doc-sommaire a:focus-visible {
	text-decoration: underline;
}

/* Chapitres et articles : ancres dégagées de la barre de navigation collante. */
.eh-doc h2,
.eh-doc h3 {
	scroll-margin-top: 5rem;
	text-align: left;
}

.eh-doc h2 {
	margin-top: 2.2rem; /* 1.5rem sous md, cf. plus bas (demande du 2026-09-11) */
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--eh-turquoise);
	color: var(--eh-turquoise);
	font-size: 1.5rem;
	font-weight: 600;
	text-transform: uppercase;
}

.eh-doc h3 {
	margin-top: 1.75rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--eh-orange);
}

.eh-doc-approbation {
	margin-top: 2.5rem;
	font-style: italic;
}

@media (max-width: 767.98px) {
	.eh-doc h2 {
		margin-top: 1.5rem;
	}
}

/* Encadré : texte centré dans un cadre en pointillés, noir par défaut. */
.eh-doc-encadre {
	margin: 2rem auto 0;
	padding: 1rem 1.5rem;
	border: 1px dashed #000;
	background: #fff; /* demande du 2026-09-12 */
	text-align: center;
}

/* ===========================================================================
 * Onglets (groupe au style « Onglets », rendu par inc-block-styles.php)
 * ======================================================================== */

.eh-tabs {
	margin-bottom: 2rem;
}

.eh-tabs-nav {
	--bs-nav-tabs-link-active-color: var(--eh-orange);
	--bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) #fff;
	--bs-nav-tabs-link-hover-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-border-color);
	margin-bottom: 1.5rem;
}

.eh-tabs-nav .nav-link {
	color: var(--bs-body-color);
	font-weight: 700;
}

.eh-tabs-nav .nav-link:hover,
.eh-tabs-nav .nav-link:focus-visible {
	color: var(--eh-orange);
}

.eh-tabs-nav .nav-link.active {
	border-top: 3px solid var(--eh-orange);
}

/* Volet ouvert : encadré gris clair à coins arrondis (demande du 2026-09-12). */
.eh-tabs .tab-pane {
	padding: 1rem;
	border: 1px solid #e9e9e9;
	border-radius: 1rem;
	background: #f8f9fa;
	box-shadow: 1px 1px 3px gray;
}

.eh-tabs .tab-pane > :last-child {
	margin-bottom: 0;
}

/* Le volet est focalisable (tabindex) pour le clavier ; le navigateur le
   focalise aussi quand l'adresse porte son ancre, ce qui dessinait un
   contour autour du volet à l'arrivée. Pas de contour sur le volet (2026-09-12). */
.eh-tabs .tab-pane:focus,
.eh-tabs .tab-pane:focus-visible {
	outline: 0;
	box-shadow: 1px 1px 3px gray;
}

/* Sous md, les onglets s'empilent en pleine largeur (la v1 faisait pareil). */
@media (max-width: 767.98px) {
	.eh-tabs-nav {
		flex-direction: column;
		border-bottom: 0;
	}

	.eh-tabs-nav .nav-link {
		width: 100%;
		text-align: left;
		border: 1px solid var(--bs-border-color);
		border-radius: 0;
		margin-bottom: -1px;
	}

	.eh-tabs-nav .nav-link.active {
		border-top: 1px solid var(--bs-border-color);
		border-left: 3px solid var(--eh-orange);
	}
}

/* ===========================================================================
 * Retour en haut de page (.eh-back-to-top, footer.php + theme.js)
 *
 * Même gabarit que la pastille du menu mobile (44px, ronde, filet blanc,
 * ombre) pour que les deux forment une colonne cohérente sous 768px : la
 * pastille orange reste en bas, le retour en haut se pose juste au-dessus.
 * Au-delà, la pastille n'existe pas et le bouton prend sa place en bas.
 * L'apparition et le survol sont dans animate.css.
 * ======================================================================== */

.eh-back-to-top {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 1030;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 30px;
	background: var(--bs-secondary-color, #6c757d);
	color: #fff;
	font-size: 1.125rem;
	box-shadow: 1px 1px 5px grey;
	cursor: pointer;
}

.eh-back-to-top:hover,
.eh-back-to-top:focus-visible {
	background: #565e64;
	color: #fff;
}

.eh-back-to-top:focus-visible {
	outline: 2px solid var(--eh-orange);
	outline-offset: 2px;
}

/* Sous 768px : au-dessus de la pastille du menu (44px + 8px d'écart). */
@media (max-width: 767.98px) {
	.eh-back-to-top {
		bottom: 64px;
	}
}

/* ===========================================================================
 * Partenaires (gabarit page-partenaires.php, type de contenu inc-partners.php)
 *
 * Grille de logos : chaque logo est un bouton qui ouvre une modale Bootstrap.
 * Logos en couleur, dans une carte blanche à filet, qui se soulève au survol
 * (animate.css). Le zoom se fait sur l'image, le cadre ne bouge pas.
 * ======================================================================== */

.eh-partner-card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 8.5rem;
	padding: 1rem;
	border: 1px solid var(--bs-border-color);
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
}

.eh-partner-card:hover,
.eh-partner-card:focus-visible {
	border-color: var(--eh-turquoise);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}

.eh-partner-card:focus-visible {
	outline: 2px solid var(--eh-orange);
	outline-offset: 2px;
}

.eh-partner-grid-logo {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.eh-partner-card-name {
	font-weight: 700;
	text-align: center;
}

@media (max-width: 575.98px) {
	.eh-partner-card {
		height: 6.5rem;
		padding: 0.75rem;
	}
}

/* Modale : logo centré au-dessus de la présentation, titre orange. Même
   habillage pour la modale de confirmation du formulaire de contact. */
.eh-partner-modal .modal-title,
.eh-contact-modal .modal-title {
	color: var(--eh-orange);
	font-weight: 700;
}

.eh-contact-modal .modal-body {
	text-align: justify;
}

.eh-partner-modal-logo {
	margin: 0 0 1rem;
	text-align: center;
}

.eh-partner-modal-logo img {
	max-width: 14rem;
	max-height: 6rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

.eh-partner-modal-text {
	text-align: justify;
}

.eh-partner-modal-text > :last-child {
	margin-bottom: 0;
}

/* ===========================================================================
 * Boutons de l'éditeur (bloc Bouton) : mêmes proportions et mêmes états
 * qu'un bouton Bootstrap du thème — .btn.btn-primary pour « Plein »,
 * .btn.btn-outline-primary pour « Contour » (demande du 2026-09-12). Les
 * valeurs sont celles du .btn de Bootstrap 5.3 (rembourrage .375/.75rem,
 * 1rem, graisse 400, interligne 1.5, coins .375rem, transition).
 * ======================================================================== */

.wp-block-button__link {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--eh-orange);
	border-radius: 0.375rem;
	background-color: var(--eh-orange);
	color: #fff;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.wp-block-button__link:hover {
	background-color: var(--eh-orange-dark);
	border-color: var(--eh-orange-dark);
	color: #fff;
}

.wp-block-button__link:focus-visible {
	background-color: var(--eh-orange-dark);
	border-color: var(--eh-orange-dark);
	color: #fff;
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(236, 104, 72, 0.5);
}

.wp-block-button__link:active {
	background-color: #c84f34;
	border-color: #c84f34;
	color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	padding: 0.375rem 0.75rem; /* WordPress met un rembourrage propre au contour : même hauteur que « Plein » */
	border-width: 1px;
	background-color: transparent;
	color: var(--eh-orange);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.wp-block-button.is-style-outline .wp-block-button__link:active {
	background-color: var(--eh-orange);
	border-color: var(--eh-orange);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Onglets en boutons (groupe au style « Onglets en boutons ») — les boutons
 * de la page « Nous soutenir » de la v1 : blancs, texte et filet orange,
 * coins 1rem, ombre portée, majuscules ; pleins orange au survol et quand
 * l'onglet est ouvert. Le premier est en turquoise comme en v1
 * (« Devenir bénévole »). Quatre par rangée, empilés sous 768px.
 * ------------------------------------------------------------------------ */

.eh-tabs-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.eh-tabs-buttons .nav-item {
	flex: 1 1 calc(25% - 1rem);
	display: flex;
}

.eh-tabs-buttons .nav-link {
	flex: 1;
	padding: 1.3125rem 1rem; /* 1.5rem v1 */
	border: 1px solid var(--eh-orange);
	border-radius: 1rem;
	background: #fff;
	color: var(--eh-orange);
	font-size: 1.3125rem; /* 1.5rem v1 */
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	box-shadow: 3px 3px 4px #bfbfbf;
	cursor: pointer;
}

.eh-tabs-buttons .nav-link:hover,
.eh-tabs-buttons .nav-link:focus-visible,
.eh-tabs-buttons .nav-link.active {
	background: var(--eh-orange);
	color: #fff;
}

.eh-tabs-buttons .nav-item:first-child .nav-link {
	border-color: var(--eh-turquoise);
	color: var(--eh-turquoise);
}

.eh-tabs-buttons .nav-item:first-child .nav-link:hover,
.eh-tabs-buttons .nav-item:first-child .nav-link:focus-visible,
.eh-tabs-buttons .nav-item:first-child .nav-link.active {
	background: var(--eh-turquoise);
	color: #fff;
}

/* Icône devant le libellé d'un onglet (classe fa-* sur le titre du groupe). */
.eh-tabs-icon {
	margin-right: 0.5em;
}

.eh-tabs-buttons .nav-link .eh-tabs-icon {
	display: block;
	width: 100%;
	margin: 0 auto 0.5rem;
	font-size: 1.75rem;
	text-align: center;
}

@media (max-width: 767.98px) {
	.eh-tabs-buttons .nav-item {
		flex-basis: 100%;
	}

	.eh-tabs-buttons .nav-link {
		padding: 1rem;
		font-size: 1.125rem;
	}

	.eh-tabs-buttons .nav-link .eh-tabs-icon {
		display: inline-block;
		width: auto;
		margin: 0 0.5em 0 0;
		font-size: 1.25rem;
	}
}

/* Plusieurs boutons côte à côte dans un bloc Boutons : même largeur pour
   tous (demande du 2026-09-12), bornée pour ne pas s'étirer sur toute la
   page ; en dessous de 576px ils s'empilent en pleine largeur. */
.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button {
	flex: 1 1 0;
	max-width: 20rem;
}

.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button .wp-block-button__link {
	width: 100%;
}

@media (max-width: 575.98px) {
	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button {
		flex-basis: 100%;
		max-width: none;
	}
}

/* Bouton « Nous contacter » du bas de « Nous soutenir » (bloc Bouton portant
   la classe eh-btn-contact) : enveloppe Font Awesome devant le libellé, par
   la feuille, le bloc reste un bouton ordinaire dans l'éditeur. */
.wp-block-button.eh-btn-contact {
	margin-top: 1rem;
}

.eh-btn-contact .wp-block-button__link::before {
	content: "\f0e0";
	margin-right: 0.5em;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
}

/* ===========================================================================
 * Formulaire de contact (inc-contact.php, [eh_formulaire_contact])
 * ======================================================================== */

.eh-contact {
	max-width: 40rem;
	margin: 2rem auto 0;
}

/* Champ piège : hors écran, pas masqué (les robots ignorent display:none). */
.eh-contact .eh-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.eh-contact-reponse {
	max-width: 8rem;
}

/* ===========================================================================
 * Tableaux de la vente solidaire (inc-tableaux.php, [eh_tableaux])
 *
 * Galerie en défilement horizontal, une carte par tableau, accroche au
 * défilement (scroll-snap). La barre de défilement reste visible : c'est le
 * signal qu'il y a la suite. Clavier : la zone est focalisable, flèches.
 * ======================================================================== */

.eh-tableaux-scroller {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 0.25rem 0 1rem;
	scrollbar-color: var(--eh-orange) #eee;
}

/* Glisser à la souris (theme.js) : curseur main, accroche désactivée le temps du geste. */
.eh-tableaux-scroller {
	cursor: grab;
}

.eh-tableaux-scroller.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.eh-tableaux-scroller:focus-visible {
	outline: 2px solid var(--eh-orange);
	outline-offset: 4px;
}

/* Pas de `width: max-content` sur la piste : Chrome la calculerait avec la
   largeur naturelle des photos (768px) alors que les cartes font 16rem, et
   laissait un grand vide après le dernier tableau (constaté le 2026-09-12).
   En `nowrap`, les cartes débordent d'elles-mêmes et le défilement s'arrête
   exactement sur la dernière. */
.eh-tableaux-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.25rem;
	margin: 0;
}

.eh-tableau {
	flex: 0 0 16rem;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bs-border-color);
	border-radius: 5px;
	background: #fff;
	overflow: hidden;
}

.eh-tableau-zoom {
	position: relative;
	display: block;
	width: 100%;
	height: 13rem;
	padding: 0;
	border: 0;
	background: #f2f2f2;
	cursor: zoom-in;
}

.eh-tableau-photo {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
}

.eh-tableau-sans-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 1rem;
	color: var(--bs-secondary-color);
}

.eh-tableau-badge {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--bs-secondary-color);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
}

.eh-tableau-vendu .eh-tableau-photo {
	filter: grayscale(1);
	opacity: 0.6;
}

.eh-tableau-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.75rem 1rem 1rem;
	text-align: center;
}

.eh-tableau-titre {
	margin: 0;
	color: var(--eh-orange);
	font-size: 1.05rem;
	font-weight: 700;
}

.eh-tableau-meta {
	margin: 0;
	color: var(--bs-secondary-color);
	font-size: 0.9rem;
}

.eh-tableau-meta span + span::before {
	content: " · ";
}

.eh-tableau-prix {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	font-weight: 700;
}

.eh-tableau-body .btn {
	margin-top: auto;
	align-self: center;
}

.eh-tableau-grand {
	max-width: 100%;
	max-height: 70vh;
	width: auto;
	height: auto;
}

@media (max-width: 575.98px) {
	.eh-tableau {
		flex-basis: 80vw;
	}
}

/* Groupe « Replié » : contenu déplié par le bouton Voir plus / Voir moins. */
.eh-replie-action {
	margin: 0.5rem 0 1.5rem;
	text-align: right;
}

.eh-replie .eh-replie-moins,
.eh-replie [aria-expanded="true"] .eh-replie-plus {
	display: none;
}

.eh-replie [aria-expanded="true"] .eh-replie-moins {
	display: inline;
}

.eh-replie-contenu > :first-child {
	margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Événements (inc-evenements.php) — accueil, popin et page Nos évènements — le
 * .home_event_list-block de la v1 : carte grise à filet, titre en gros,
 * date et lieu, texte, bouton. Affiche à gauche dès md quand il y en a une.
 * ------------------------------------------------------------------------ */

.eh-event {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0 0 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid #c3c3c3;
	border-radius: 5px;
	background: #f9f9f9;
	box-shadow: 1px 1px 1px #e7e7e7;
}

.eh-event-image {
	flex: 0 0 auto;
	text-align: center;
}

.eh-event-image img {
	max-height: 18rem;
	width: auto;
}

.eh-event-body {
	flex: 1;
	min-width: 0;
}

.eh-event-titre {
	margin: 0 0 0.5rem;
	color: var(--eh-orange);
	font-size: 1.75rem; /* 2rem v1 */
	font-weight: 700;
}

.eh-event-quand,
.eh-event-lieu {
	margin: 0 0 0.25rem;
	color: var(--bs-secondary-color);
}

.eh-event-texte {
	margin: 0.75rem 0;
	font-style: italic;
	font-size: 1.1rem; /* 1.35rem v1 (base 14px) */
}

.eh-event-texte > :last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.eh-event {
		flex-direction: row;
		align-items: flex-start;
	}

	.eh-event-image {
		flex-basis: 16rem;
		max-width: 16rem;
	}
}

/* Popin des événements (accueil) : cartes compactes dans la modale. */
.eh-evenements-modal .eh-event {
	flex-direction: column;
	margin-bottom: 1rem;
}

.eh-evenements-modal .eh-event:last-child {
	margin-bottom: 0;
}

.eh-evenements-modal .eh-event-image {
	max-width: none;
	flex-basis: auto;
}

.eh-evenements-modal .eh-event-image img {
	max-height: 14rem;
}