/*
Theme Name: Garrigue Hôtel de Ville
Theme URI: https://example.fr/theme-garrigue
Author: Commune
Description: Thème enfant de Garrigue Clair : portail municipal à bandeau plein écran, tuiles d'accès, cartes photo et agenda, pour la commune de Nébian. Menus, réglages et extensions restent ceux du site. Contrastes calculés selon le RGAA, défilement contrôlable, aucune ressource appelée à l'extérieur du serveur par le thème.
Template: garrigue-clair
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: garrigue
Tags: accessibility-ready, custom-menu, custom-logo, custom-header, translation-ready, full-width-template
*/

/* =========================================================
   1. Jetons

   Contrastes (RGAA 3.2 : 4,5:1 pour le texte, 3:1 pour le grand
   texte et les composants). Chaque couple ci-dessous est calculé :
     blanc sur --nb-orange            5,18:1  (l'orange d'origine, #F1551D, s'arrêtait à 3,47:1)
     --nb-encre sur --nb-creme       11,13:1
     --nb-sarcelle sur --nb-creme     9,35:1
     blanc sur --nb-sarcelle          9,99:1
     --nb-jaune sur --nb-sarcelle     7,04:1
     --nb-encre sur --nb-jaune        8,37:1
     --nb-orange-texte sur --nb-creme 5,39:1
   Texte sur photo : calculé sur le pire cas, un pixel blanc sous le voile.
     voile 0,75 : blanc 5,59:1 ; jaune 3,94:1 (réservé au grand texte)
     voile 0,80 : blanc 6,53:1 ; jaune 4,60:1
   ========================================================= */

:root {
	--nb-encre: #0d3c4c;
	--nb-sarcelle: #154859;
	--nb-sarcelle-clair: #1b4f60;
	--nb-creme: #fef7e7;
	--nb-jaune: #f6d677;
	--nb-orange: #c2410c;
	--nb-orange-fonce: #9a300c;
	--nb-orange-texte: #b83a10;
	--nb-brun: #6a4636;
	--nb-trait: #e5dcc6;

	/* Filet décoratif (non porteur d'information : il n'a pas de seuil de contraste). */
	--nb-filet: linear-gradient(90deg, #f1551d, #f6d677 55%, #154859);

	--nb-titres: Urbanist, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--nb-focus: #0d3c4c;
	--nb-largeur-barre: min(100% - 2rem, 80rem);
	--nb-marge-barre: 1.75rem;

	/* Valeur de secours si le script ne s'exécute pas ; il la remplace par la hauteur mesurée. */
	--nb-entete-h: 11rem;

	/* Jetons du thème parent : toutes les pages intérieures héritent ainsi de la palette. */
	--g-encre: var(--nb-encre);
	--g-garrigue: var(--nb-sarcelle);
	--g-calcaire: var(--nb-creme);
	--g-vigne: var(--nb-orange-texte);
	--g-attenue: #4a6672;
	--g-trait: var(--nb-trait);
	--g-ciel: var(--nb-sarcelle);
	--g-soleil: var(--nb-jaune);
	--g-soleil-encre: var(--nb-encre);
	--g-police: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--g-rayon: 2px;
}

/* =========================================================
   2. Base
   ========================================================= */

/* Un élément qui reçoit le focus ou une ancre ne passe jamais sous l'en-tête collant. */
html {
	scroll-padding-top: calc(var(--fbet-h, 6rem) + 1rem);
}

body {
	background: var(--nb-creme);
	color: var(--nb-encre);
}

h1,
h2,
h3,
h4 {
	font-family: var(--nb-titres);
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* Dans le texte courant, un lien se repère sans se fier à la couleur (RGAA 10.6). */
.g-texte a:not([class]),
.nb-partage-texte p a,
.nb-infos a,
.nb-coordonnees a,
.nb-pied-contacts a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

:focus-visible {
	outline: 3px solid var(--nb-focus);
	outline-offset: 3px;
}

main:focus {
	outline: none;
}

/* Le lien d'évitement doit passer devant l'en-tête flottant, dès la première tabulation (RGAA 12.7). */
.g-evitement {
	z-index: 1000;
	--nb-focus: var(--nb-jaune);
}

/* Sur fond sombre ou sur photo, le contour de focus passe au jaune. */
.nb-sombre {
	--nb-focus: var(--nb-jaune);
}

.nb-conteneur {
	width: min(100% - 2.5rem, 80rem);
	margin-inline: auto;
}

.nb-centre {
	margin: clamp(2rem, 4vw, 3.25rem) 0 0;
	text-align: center;
}

.nb-marge-haute {
	margin-top: 1.5rem;
}

.nb-section {
	padding-block: clamp(3.5rem, 7vw, 7rem);
}

.nb-section-entete {
	max-width: 48rem;
	margin: 0 auto clamp(2rem, 4vw, 3.5rem);
	text-align: center;
}

.nb-section-entete p {
	margin: 0;
}

.nb-titre-xl {
	margin: 0 0 1.25rem;
	font-size: clamp(2.1rem, 1.35rem + 2.5vw, 3.5rem);
	line-height: 1.15;
}

.nb-surligne {
	color: var(--nb-jaune);
}

/* Le dégradé ne s'applique que si le navigateur sait le découper dans le texte.
   Ses deux extrémités dépassent 4,5:1 sur le fond crème. */
.nb-degrade-texte {
	color: var(--nb-sarcelle);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.nb-degrade-texte {
		background-image: linear-gradient(95deg, var(--nb-orange-texte) 0%, var(--nb-sarcelle) 62%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.nb-surtitre {
	display: inline-block;
	margin: 0 0 1.5rem;
	padding-bottom: 0.5rem;
	background: var(--nb-filet) left bottom / 100% 2px no-repeat;
	color: inherit;
	font-family: var(--nb-titres);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Photo décorative placée sous un bloc, et voile qui garantit le contraste du texte. */
.nb-fond {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================
   3. Boutons
   ========================================================= */

.nb-bouton,
a.nb-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	padding: 0.8rem 1.6rem;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font-family: var(--nb-titres);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.nb-bouton .g-icone {
	width: 1.1rem;
	height: 1.1rem;
}

a.nb-bouton--contour:hover {
	border-color: var(--nb-encre);
	background: var(--nb-encre);
	color: #fff;
}

.nb-sombre a.nb-bouton--contour:hover {
	border-color: #fff;
	background: #fff;
	color: var(--nb-encre);
}

a.nb-bouton--orange {
	border-color: var(--nb-orange);
	background: var(--nb-orange);
	color: #fff;
}

a.nb-bouton--orange:hover {
	border-color: var(--nb-orange-fonce);
	background: var(--nb-orange-fonce);
	color: #fff;
}

a.nb-bouton--jaune {
	border-color: var(--nb-jaune);
	background: var(--nb-jaune);
	color: var(--nb-encre);
}

a.nb-bouton--jaune:hover {
	border-color: #fff;
	background: #fff;
	color: var(--nb-encre);
}

.nb-bouton--plein {
	align-self: flex-start;
	border-color: var(--nb-encre);
	background: var(--nb-encre);
	color: #fff;
}

.nb-boutons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* =========================================================
   4. Bandeau du haut et barre d'en-tête
   ========================================================= */

.nb-barre {
	position: relative;
	z-index: 901;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 2rem;
	width: var(--nb-largeur-barre);
	margin: 1.25rem auto 0;
	padding: 0.6rem var(--nb-marge-barre);
	background: var(--nb-encre);
	color: #fff;
	font-size: 0.9375rem;
}

.nb-barre p {
	margin: 0;
}

.nb-barre a {
	color: #fff;
}

.nb-barre a:hover {
	color: var(--nb-jaune);
	text-decoration: underline;
}

.nb-barre-libelle {
	color: var(--nb-jaune);
}

/* --- Barre principale : elle contient l'en-tête produit par FB En-tête. --- */

.nb-entete-barre {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 900;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1rem;
	width: var(--nb-largeur-barre);
	margin-inline: auto;
	padding-inline: var(--nb-marge-barre);
	background: var(--nb-sarcelle);
	color: #fff;
}

/* L'extension écrit ses couleurs dans un attribut style : seul !important permet de
   les remplacer sans modifier ses réglages, et revenir au thème précédent reste sans effet de bord. */
#fbet-header {
	--fbet-primary: var(--nb-jaune) !important;
	--fbet-text: #fff !important;
	--fbet-bg: var(--nb-sarcelle) !important;
	--fbet-logo-h: 58px !important;
}

#fbet-a11y {
	--fbet-primary: var(--nb-sarcelle) !important;
	--fbet-text: var(--nb-encre) !important;
	--fbet-bg: #fff !important;
}

/* La barre, et non l'en-tête, est collante : c'est elle qui sert de repère au panneau
   de recherche et aux sous-menus, sur toute sa largeur. */
.nb-entete-barre .fbet {
	position: static;
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	background: transparent;
	font-size: 1rem;
}

.nb-entete-barre .fbet :focus-visible {
	outline-color: var(--nb-focus);
}

.nb-entete-barre .fbet-anchor {
	position: absolute;
}

.nb-entete-barre .fbet-logo-text,
.nb-entete-barre .fbet-logo-img + .fbet-logo-text {
	color: #fff;
	font-family: var(--nb-titres);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
}

.nb-entete-barre .fbet.is-scrolled .fbet-logo-text {
	font-size: 1.5rem;
}

/* Sans l'extension : logo et menu simples. */
.nb-entete-repli {
	flex: 1 1 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	padding-block: 1rem;
}

.nb-entete-repli a {
	color: #fff;
}

.nb-entete-repli ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Recherche et signalement --- */

.nb-actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.5rem;
}

button.nb-recherche-bascule {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
}

button.nb-recherche-bascule[hidden] {
	display: none;
}

button.nb-recherche-bascule:hover,
button.nb-recherche-bascule[aria-expanded="true"] {
	background: transparent;
	color: var(--nb-jaune);
}

a.nb-cta {
	padding-inline: 1.1rem;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

/* Si la barre prend trop de hauteur (zoom du texte, petit écran en paysage), elle reste
   en haut de page au lieu de suivre le défilement : elle masquerait sinon le contenu. */
.nb-entete-barre.nb-non-collante {
	position: relative;
	top: 0;
}

.nb-entete-barre .g-recherche-panneau {
	flex-basis: 100%;
	background: var(--nb-encre);
}

.nb-recherche-corps {
	padding: 2rem var(--nb-marge-barre) 2.25rem;
}

.nb-recherche-corps .g-recherche-fermer {
	top: 1.1rem;
	right: 1rem;
}

/* Sans JavaScript, le panneau reste ouvert dans le flux, sur toute la largeur de la barre. */
html:not(.js-actif) .nb-entete-barre .g-recherche-panneau {
	flex-basis: calc(100% + 2 * var(--nb-marge-barre));
	margin-inline: calc(-1 * var(--nb-marge-barre));
}

/* --- Ordinateur : l'en-tête de l'extension s'étale sur une seule rangée. --- */

@media (min-width: 1024px) {
	/* Conteneurs de mise en page uniquement : les retirer du flux ne change rien
	   à la structure lue par les lecteurs d'écran, ni à l'ordre de tabulation. */
	.nb-entete-barre .fbet {
		display: flex;
		align-items: center;
		gap: 0 1.25rem;
	}

	.nb-entete-barre .fbet-top,
	.nb-entete-barre .fbet-drawer {
		display: contents;
	}

	/* Masqués ici car leur double se trouve après le menu : ainsi, l'ordre visuel de la
	   rangée (logo, menu, outils, recherche, signalement) est aussi celui de la tabulation. */
	.nb-entete-barre .fbet-left,
	.nb-entete-barre .fbet-right,
	.nb-entete-barre .fbet-drawer-extras .fbet-social {
		display: none;
	}

	.nb-entete-barre .fbet-brand {
		flex: none;
		position: relative;
		align-self: stretch;
		display: flex;
		align-items: center;
		padding-block: 1rem;
	}

	/* Filet décoratif sous le logo, repris de la maquette. */
	.nb-entete-barre .fbet-brand::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 3px;
		background: var(--nb-filet);
	}

	.nb-entete-barre .fbet.is-scrolled .fbet-brand {
		padding-block: 0.5rem;
	}

	.nb-entete-barre .fbet-nav {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.nb-entete-barre .fbet-menu {
		justify-content: center;
		gap: 0 clamp(0.6rem, 1.1vw, 1.5rem);
	}

	.nb-entete-barre .fbet-link {
		gap: 0.3rem;
		padding: 1.1rem 0;
		font-family: var(--nb-titres);
		font-size: clamp(0.9375rem, 0.8rem + 0.2vw, 1rem);
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
		white-space: nowrap;
	}

	.nb-entete-barre .fbet.is-scrolled .fbet-link {
		padding: 0.85rem 0;
	}

	.nb-entete-barre .fbet-link:hover,
	.nb-entete-barre .fbet-item.is-open > .fbet-link,
	.nb-entete-barre .fbet-item.is-current > .fbet-link {
		color: var(--nb-jaune);
	}

	.nb-entete-barre .fbet-toggle .fbet-icon {
		width: 0.9rem;
		height: 0.9rem;
	}

	.nb-entete-barre .fbet-drawer-extras {
		display: flex;
		flex: none;
		align-items: center;
		gap: 0.25rem;
		padding: 0;
	}

	/* Icône seule, libellé conservé pour les lecteurs d'écran (et rendu en infobulle par le script). */
	.nb-entete-barre .fbet-drawer-extras .fbet-tool {
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
		padding: 0;
		text-transform: none;
	}

	.nb-entete-barre .fbet-drawer-extras .fbet-tool:hover {
		color: var(--nb-jaune);
	}

	.nb-entete-barre .fbet-drawer-extras .fbet-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Les sous-menus occupent la largeur de la barre. */
	.nb-entete-barre .fbet-sub {
		background: var(--nb-encre);
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}

	.nb-entete-barre .fbet-sub-inner {
		grid-template-columns: 18rem 1fr;
		max-width: none;
		padding: 2rem var(--nb-marge-barre) 2.25rem;
	}

	.nb-entete-barre .fbet-sub-title {
		color: var(--nb-jaune);
		font-family: var(--nb-titres);
		font-size: 1.75rem;
		font-weight: 600;
		text-transform: none;
	}

	.nb-entete-barre .fbet-sub-list a {
		color: #fff;
	}

	.nb-entete-barre .fbet-sub-list a:hover,
	.nb-entete-barre .fbet-sub-list a[aria-current] {
		color: var(--nb-jaune);
	}
}

/* Sur un très grand écran, les libellés retrouvent leur place. */
@media (min-width: 1760px) {
	.nb-entete-barre .fbet-drawer-extras {
		gap: 1rem;
	}

	.nb-entete-barre .fbet-drawer-extras .fbet-label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}
}

/* Écrans moyens : le bouton de signalement se réduit à son icône pour garder le menu sur une ligne. */
@media (min-width: 1024px) and (max-width: 1319.98px) {
	:root {
		--nb-marge-barre: 1rem;
	}

	#fbet-header {
		--fbet-logo-h: 48px !important;
	}

	.nb-entete-barre .fbet {
		gap: 0 0.75rem;
	}

	.nb-actions {
		gap: 0.25rem;
	}

	a.nb-cta {
		padding-inline: 0.75rem;
	}

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

	.nb-entete-barre .fbet-logo-text,
	.nb-entete-barre .fbet-logo-img + .fbet-logo-text {
		font-size: 1.4rem;
	}
}

/* Téléphone, tablette et zoom à 200 % : barre pleine largeur, dans le flux, non collante.
   Un en-tête collant priverait alors le visiteur d'une part trop grande de l'écran. */
@media (max-width: 1023.98px) {
	:root {
		--nb-marge-barre: 0.75rem;
	}

	.nb-barre {
		display: none;
	}

	.nb-entete-barre {
		position: relative;
		top: 0;
		width: 100%;
		gap: 0;
	}

	.nb-entete-barre .fbet-top {
		grid-template-columns: 1fr auto;
		padding: 0.5rem 0;
	}

	.nb-entete-barre .fbet-burger {
		min-width: 2.75rem;
		min-height: 2.75rem;
		justify-content: center;
	}

	.nb-entete-barre .fbet-drawer {
		background: var(--nb-encre);
	}

	.nb-entete-barre .fbet-link {
		font-family: var(--nb-titres);
		text-transform: none;
	}

	.nb-entete-barre .fbet-sub-all,
	.nb-entete-barre .fbet-sub-list a:hover,
	.nb-entete-barre .fbet-item.is-current > .fbet-link {
		color: var(--nb-jaune);
	}

	.nb-entete-barre .fbet-sub-list a {
		display: block;
		padding-block: 0.6rem;
		color: #fff;
	}

	/* Le lien reste accessible : il figure dans le menu, sous Démarches. */
	a.nb-cta {
		display: none;
	}

	.nb-recherche-corps {
		padding: 4rem 1rem 1.5rem;
	}

	.nb-recherche-corps .g-recherche-fermer {
		top: 0.75rem;
		width: 2.75rem;
		height: 2.75rem;
	}
}

/* =========================================================
   5. Bandeau d'accueil
   ========================================================= */

.nb-heros {
	position: relative;
	isolation: isolate;
	margin-top: calc(-1 * var(--nb-entete-h));
	padding-top: calc(var(--nb-entete-h) + clamp(3rem, 7vw, 6.5rem));
	padding-bottom: 1.5rem;
	background: var(--nb-encre);
	color: #fff;
}

.nb-heros::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(13, 60, 76, 0.75);
}

.nb-heros-corps {
	text-align: center;
}

.nb-heros h1 {
	max-width: 15em;
	margin: 0 auto 2.25rem;
	font-size: clamp(2.3rem, 1.3rem + 3.7vw, 4.25rem);
	line-height: 1.2;
}

.nb-heros-texte {
	max-width: 42rem;
	margin: -1rem auto 2.25rem;
	font-size: 1.125rem;
}

.nb-infos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(3rem, 7vw, 6rem);
	background: var(--nb-sarcelle);
}

.nb-infos > section {
	padding: clamp(1.5rem, 3vw, 2.75rem);
}

.nb-infos > section + section {
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.nb-infos h2 {
	margin: 0 0 0.75rem;
	color: var(--nb-jaune);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0;
}

.nb-infos p,
.nb-infos address {
	margin: 0 0 0.35rem;
	font-style: normal;
}

.nb-infos a {
	color: #fff;
}

.nb-infos a:hover {
	color: var(--nb-jaune);
}

/* =========================================================
   6. Présentation
   ========================================================= */

.nb-enonce {
	max-width: 56rem;
	margin: 0 0 clamp(2rem, 4vw, 3.5rem);
	font-family: var(--nb-titres);
	font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.75rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.nb-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.nb-duo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.nb-intro-suite {
	max-width: 30rem;
}

/* =========================================================
   7. Accès par situation et par démarche (section sombre)
   ========================================================= */

.nb-degrade {
	/* Sur la teinte la plus claire du dégradé, le texte blanc atteint encore 8,6:1. */
	background: linear-gradient(115deg, var(--nb-encre) 55%, var(--nb-brun) 100%);
	color: #fff;
}

.nb-usage-titre {
	margin: 2.5rem 0 1rem;
	color: var(--nb-jaune);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0;
}

.nb-tuiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nb-tuiles a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	height: 100%;
	padding: clamp(1.75rem, 3vw, 2.75rem) 1rem;
	background: var(--nb-sarcelle);
	color: #fff;
	font-family: var(--nb-titres);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.nb-tuiles .g-icone {
	width: 3.5rem;
	height: 3.5rem;
	color: var(--nb-jaune);
	stroke-width: 1.1;
}

.nb-tuiles a:hover {
	background: var(--nb-jaune);
	color: var(--nb-encre);
}

.nb-tuiles a:hover .g-icone {
	color: var(--nb-encre);
}

.nb-tuiles--compactes {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
	gap: 0.75rem;
}

.nb-tuiles--compactes a {
	flex-direction: row;
	justify-content: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	font-size: 1.125rem;
	text-align: left;
}

.nb-tuiles--compactes .g-icone {
	width: 1.75rem;
	height: 1.75rem;
	stroke-width: 1.5;
}

/* =========================================================
   8. Découvrir : colonne fixe et cartes photo
   ========================================================= */

.nb-decouvrir {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 6vw, 6.5rem);
	align-items: start;
}

.nb-colle {
	position: sticky;
	top: calc(var(--fbet-h, 6rem) + 2rem);
}

.nb-colle > p:not(.nb-surtitre) {
	margin-bottom: 2rem;
}

.nb-cartes-photo {
	display: grid;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nb-cartes-photo a {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	min-height: clamp(17rem, 28vw, 24.5rem);
	overflow: hidden;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--nb-encre);
	color: #fff;
	text-decoration: none;
}

.nb-cartes-photo img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.nb-cartes-photo a:hover img {
	transform: scale(1.04);
}

/* Voile dense derrière le titre (0,75 et plus), plus léger au centre où il n'y a pas de texte.
   Le bouton a son propre fond : son contraste ne dépend pas de la photo. */
.nb-cartes-photo a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(13, 60, 76, 0.85) 0%, rgba(13, 60, 76, 0.75) 45%, rgba(13, 60, 76, 0.25) 70%, rgba(13, 60, 76, 0.5) 100%);
}

.nb-cartes-photo h3 {
	margin: 0;
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
	font-weight: 500;
}

/* =========================================================
   9. Recherches fréquentes : bandeau défilant
   ========================================================= */

.nb-defile {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1rem;
	background: var(--nb-jaune);
	color: var(--nb-encre);
}

button.nb-defile-pause {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--nb-encre);
	border-radius: 0;
	background: transparent;
	color: var(--nb-encre);
}

button.nb-defile-pause[hidden] {
	display: none;
}

button.nb-defile-pause:hover {
	border-color: var(--nb-encre);
	background: var(--nb-encre);
	color: #fff;
}

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

.nb-defile-pause-icone {
	display: inline-flex;
}

.nb-defile-pause-icone--lecture,
.est-arrete .nb-defile-pause-icone--pause {
	display: none;
}

.est-arrete .nb-defile-pause-icone--lecture {
	display: inline-flex;
}

.nb-defile-fenetre {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}

.nb-defile-liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	font-family: var(--nb-titres);
	font-size: clamp(1.35rem, 1.05rem + 1vw, 2.1rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
	list-style: none;
}

.nb-defile-liste li {
	display: flex;
	align-items: center;
}

.nb-defile-liste li::after {
	content: "✳";
	content: "✳" / "";
	margin-inline: clamp(1rem, 2vw, 2rem);
	color: var(--nb-orange-fonce);
	font-size: 0.8em;
}

.nb-defile-liste a {
	color: var(--nb-encre);
	white-space: nowrap;
}

.nb-defile-liste a:hover {
	color: var(--nb-encre);
	text-decoration: underline;
}

/* Par défaut, une liste immobile. La copie ne sert qu'à l'animation. */
.nb-defile-liste[aria-hidden] {
	display: none;
}

/* Le défilement n'existe que si le script peut l'arrêter et que le visiteur n'a pas
   demandé moins d'animations. Le focus clavier dans la liste l'interrompt aussi :
   on ne poursuit pas un lien qui bouge. */
@media (prefers-reduced-motion: no-preference) {
	.js-actif .nb-defile:not(.est-arrete) .nb-defile-fenetre:not(:focus-within) .nb-defile-piste {
		display: flex;
		width: max-content;
		animation: nb-defile 42s linear infinite;
	}

	.js-actif .nb-defile:not(.est-arrete) .nb-defile-fenetre:not(:focus-within) .nb-defile-liste {
		flex-wrap: nowrap;
	}

	.js-actif .nb-defile:not(.est-arrete) .nb-defile-fenetre:not(:focus-within) .nb-defile-liste[aria-hidden] {
		display: flex;
	}

	.nb-defile-fenetre:hover .nb-defile-piste {
		animation-play-state: paused !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	button.nb-defile-pause {
		display: none;
	}
}

@keyframes nb-defile {
	to {
		transform: translateX(-50%);
	}
}

/* =========================================================
   10. Participer
   ========================================================= */

.nb-participer {
	position: relative;
	isolation: isolate;
	padding-block: clamp(4rem, 9vw, 8rem);
	background: var(--nb-encre);
	color: #fff;
}

.nb-participer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(13, 60, 76, 0.75);
}

.nb-participer-grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.nb-participer-grille p:last-child {
	margin-bottom: 0;
}

.nb-participer-carte {
	--nb-focus: var(--nb-encre);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: #fff;
	color: var(--nb-encre);
}

.nb-participer-carte ul {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.nb-participer-carte li + li {
	border-top: 1px solid var(--nb-trait);
}

.nb-participer-carte li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.9rem;
	color: var(--nb-encre);
	font-family: var(--nb-titres);
	font-size: 1.25rem;
	font-weight: 500;
	text-decoration: none;
}

.nb-participer-carte li a:hover {
	color: var(--nb-orange-texte);
	text-decoration: underline;
}

.nb-participer-carte .nb-bouton {
	width: 100%;
}

/* =========================================================
   11. Cartes d'actualité
   ========================================================= */

.g-cartes {
	gap: 2rem 1.75rem;
}

.g-carte {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.g-carte-lien {
	position: relative;
	display: block;
	height: 100%;
}

.g-carte-lien,
.g-carte-lien:hover {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	transform: none;
}

/* Bloc « à la une » de la liste des actualités : le parent pose le texte directement
   sur la photo, avec un dégradé qui ne garantit pas 4,5:1 selon l'image.
   La légende reçoit ici son propre fond, le contraste ne dépend donc plus de la photo. */
.g-actu-une .g-carte-lien {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 20rem;
}

.g-actu-une .g-carte--petite .g-carte-lien {
	min-height: 15rem;
}

.g-actu-une .g-carte-image::after {
	display: none;
}

.g-actu-une .g-carte-image {
	border-radius: 0;
}

.g-actu-une .g-carte-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.g-actu-une .g-carte-corps,
.g-actu-une .g-carte--grande .g-carte-corps {
	flex: none;
	min-height: 0;
	padding: 1.1rem 1.5rem;
	background: var(--nb-encre);
}

.g-actu-une .g-carte-titre {
	margin-bottom: 0.25rem;
}

.g-actu-une .g-carte-lien:hover .g-carte-titre {
	text-decoration: underline;
}

.g-actu-une .g-carte-date {
	margin: 0;
}

.g-carte--grille .g-carte-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 0;
}

.g-carte--grille .g-carte-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.g-carte--grille .g-carte-lien:hover .g-carte-image img {
	transform: scale(1.04);
}

.g-carte--grille .g-etiquette {
	position: absolute;
	top: 1rem;
	left: 1rem;
	border-radius: 0;
	background: var(--nb-jaune);
	color: var(--nb-encre);
}

.g-carte--grille .g-carte-corps {
	position: relative;
	align-items: center;
	margin: -5rem 1.5rem 0;
	padding: 1.5rem 1.25rem 1.25rem;
	background: #fff;
	text-align: center;
}

/* Filet décoratif au bas de la légende, repris de la maquette. */
.g-carte--grille .g-carte-corps::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: var(--nb-filet);
}

.g-carte--grille .g-carte-titre {
	margin: 0 0 0.5rem;
	color: var(--nb-encre);
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.3;
}

.g-carte--grille .g-carte-lien:hover .g-carte-titre {
	color: var(--nb-orange-texte);
	text-decoration: underline;
}

.g-carte--grille .g-carte-date {
	margin: 0 0 0.75rem;
	padding-top: 0;
	border-top: 0;
	color: var(--g-attenue);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
}

.nb-carte-lire {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--nb-encre);
	font-family: var(--nb-titres);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nb-carte-lire .g-icone {
	width: 1rem;
	height: 1rem;
}

/* =========================================================
   12. Blocs partagés : conseil municipal, contact
   ========================================================= */

.nb-partage {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: #fff;
}

.nb-partage-image {
	min-height: 22rem;
}

.nb-partage-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nb-partage-texte {
	padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.25rem, 5vw, 5rem);
}

.nb-partage-intertitre {
	margin: 2rem 0 0.75rem;
	font-size: 1.35rem;
	font-weight: 500;
}

.nb-documents {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.nb-documents li {
	display: flex;
	gap: 0.75rem;
	padding-block: 0.75rem;
	border-top: 1px solid var(--nb-trait);
}

.nb-documents .g-icone {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--nb-orange-texte);
}

.nb-documents a {
	color: var(--nb-encre);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.nb-documents a:hover {
	color: var(--nb-orange-texte);
}

.nb-documents-detail {
	display: block;
	color: var(--g-attenue);
	font-size: 0.875rem;
	font-weight: 400;
}

.nb-partage--inverse .nb-partage-texte {
	background: var(--nb-sarcelle);
	color: #fff;
}

.nb-coordonnees {
	margin: 1.75rem 0 2rem;
	padding: 0;
	list-style: none;
}

.nb-coordonnees li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.3rem;
}

.nb-coordonnees .g-icone {
	color: var(--nb-jaune);
}

.nb-coordonnees a {
	color: #fff;
}

.nb-coordonnees a:hover {
	color: var(--nb-jaune);
}

/* =========================================================
   13. Prochains événements
   ========================================================= */

.nb-evenements {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nb-evenements > li {
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem 9.5rem minmax(0, 1fr) auto;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	align-items: center;
	padding: 1.75rem clamp(1.25rem, 3vw, 2.5rem);
	background: var(--nb-sarcelle);
}

/* Filet décoratif au bas de chaque ligne. */
.nb-evenements > li::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--nb-filet);
}

.nb-ev-jour {
	margin: 0;
	font-family: var(--nb-titres);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
}

.nb-ev-numero {
	display: block;
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.2;
}

.nb-ev-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}

.nb-ev-corps h3 {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	font-weight: 500;
}

.nb-ev-corps p {
	margin: 0 0 0.75rem;
}

.nb-ev-infos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	font-size: 0.9375rem;
}

.nb-ev-corps .nb-ev-infos {
	margin-bottom: 0;
}

.nb-ev-date {
	padding: 0.3rem 0.7rem;
	background: var(--nb-encre);
	font-family: var(--nb-titres);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* =========================================================
   14. Pied de page
   ========================================================= */

.nb-pied {
	padding-block: clamp(3rem, 6vw, 5rem) 1.75rem;
	background: var(--nb-encre);
	color: #fff;
}

.nb-pied a {
	color: #fff;
}

.nb-pied a:hover {
	color: var(--nb-jaune);
}

.nb-pied-recherche {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.5rem 3rem;
	align-items: center;
	padding-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.nb-pied-titre {
	margin: 0 0 0.75rem;
	font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

.nb-pied-recherche p {
	margin: 0;
}

.nb-pied .g-recherche {
	max-width: none;
}

.nb-pied .g-recherche input[type="search"] {
	border: 1px solid #fff;
	border-radius: 0;
	background: var(--nb-creme);
}

.nb-pied .g-recherche button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--nb-orange);
	border-radius: 0;
	background: var(--nb-orange);
	color: #fff;
	font-family: var(--nb-titres);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nb-pied .g-recherche button:hover {
	border-color: var(--nb-orange-fonce);
	background: var(--nb-orange-fonce);
}

.nb-pied-colonnes {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

.nb-pied-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--nb-titres);
	font-size: 1.75rem;
	font-weight: 700;
	text-decoration: none;
}

.nb-pied-logo img {
	width: auto;
	height: 3.25rem;
}

.nb-pied-identite p {
	max-width: 20rem;
	margin: 1rem 0 0;
}

.nb-pied-intertitre {
	margin: 0 0 1rem;
	font-family: var(--nb-titres);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.nb-pied-colonnes ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nb-pied-colonnes nav li {
	padding-block: 0.1rem;
}

.nb-pied-colonnes nav a {
	display: inline-block;
	padding-block: 0.2rem;
}

/* Les icônes des entrées de menu n'apportent rien dans une colonne de liens simples. */
.nb-pied nav .g-icone {
	display: none;
}

.nb-pied address,
.nb-pied-horaires {
	margin: 0 0 1rem;
	font-style: normal;
}

.nb-pied-contacts li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-block: 0.25rem;
	overflow-wrap: anywhere;
}

.nb-pied-contacts .g-icone {
	width: 1.15rem;
	height: 1.15rem;
	color: var(--nb-jaune);
}

.nb-pied-colonnes .nb-pied-reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0.75rem 0 0 -0.6rem;
}

.nb-pied-reseaux a {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--nb-jaune);
}

.nb-pied-reseaux svg {
	width: 1.25rem;
	height: 1.25rem;
}

.nb-pied-bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.9375rem;
}

.nb-pied-bas p {
	margin: 0;
}

.nb-pied-bas ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nb-pied-bas a {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	gap: 0.4rem;
}

.nb-haut .g-icone {
	width: 1.1rem;
	height: 1.1rem;
}

/* =========================================================
   15. Pages intérieures
   ========================================================= */

.g-principal {
	padding: 0;
}

.nb-corps {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* Le parent laisse les listes d'actualités occuper tout l'écran : ici, elles
   s'alignent sur la largeur de l'accueil. */
.nb-corps.g-contenu--pleine {
	width: min(100% - 2.5rem, 80rem);
}

/* Longueur de ligne confortable pour lire un article (RGAA 10.5 et 10.11). */
.single .g-article {
	max-width: 56rem;
	margin-inline: auto;
}

.g-article > figure {
	margin: 0 0 2rem;
}

.g-article-suite {
	margin-top: 3rem;
}

.nb-banniere {
	position: relative;
	isolation: isolate;
	margin-top: calc(-1 * var(--nb-entete-h));
	padding-top: calc(var(--nb-entete-h) + clamp(2.5rem, 5vw, 4.5rem));
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
	background: var(--nb-encre);
	color: #fff;
	text-align: center;
}

.nb-banniere::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(13, 60, 76, 0.8);
}

.nb-banniere h1 {
	max-width: 22em;
	margin: 0 auto 1rem;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem);
	line-height: 1.2;
}

.nb-banniere-meta {
	margin: 0 0 1rem;
}

.nb-fil ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 0.6rem;
	margin: 0;
	padding: 0;
	font-family: var(--nb-titres);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	list-style: none;
}

.nb-fil li {
	display: flex;
	gap: 0.6rem;
}

.nb-fil li + li::before {
	content: "/";
	content: "/" / "";
}

.nb-fil a {
	display: inline-block;
	padding-block: 0.15rem;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.nb-fil a:hover {
	color: var(--nb-jaune);
}

.nb-fil [aria-current] {
	color: var(--nb-jaune);
}

.g-texte h2 {
	margin-top: 2rem;
}

.g-bloc {
	border-radius: 0;
}

.g-bouton,
.g-pagination .current {
	border-radius: 0;
}

/* Boutons de lecture des documents et des extensions : même registre que le reste du site. */
.g-recherche button {
	border-radius: 0;
}

/* =========================================================
   16. Adaptations
   ========================================================= */

@media (max-width: 1023.98px) {
	.nb-heros,
	.nb-banniere {
		margin-top: 0;
		padding-top: clamp(3rem, 8vw, 4.5rem);
	}

	.nb-evenements > li {
		grid-template-columns: 4.5rem 7rem minmax(0, 1fr);
	}

	.nb-evenements .nb-bouton {
		grid-column: 3;
		justify-self: start;
	}
}

@media (max-width: 900px) {
	.nb-decouvrir,
	.nb-participer-grille,
	.nb-pied-recherche,
	.nb-partage {
		grid-template-columns: minmax(0, 1fr);
	}

	.nb-tuiles:not(.nb-tuiles--compactes) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nb-colle {
		position: static;
	}

	.nb-partage--inverse .nb-partage-image {
		order: 2;
	}

	.nb-pied-colonnes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nb-infos {
		grid-template-columns: minmax(0, 1fr);
	}

	.nb-infos > section + section {
		border-top: 1px solid rgba(255, 255, 255, 0.18);
		border-left: 0;
	}
}

@media (max-width: 640px) {
	.nb-evenements > li {
		grid-template-columns: 4rem minmax(0, 1fr);
		padding: 1.5rem 1.25rem;
	}

	.nb-ev-image {
		display: none;
	}

	.nb-evenements .nb-bouton {
		grid-column: 1 / -1;
		justify-self: stretch;
	}

	.nb-duo,
	.nb-tuiles:not(.nb-tuiles--compactes),
	.nb-pied-colonnes {
		grid-template-columns: minmax(0, 1fr);
	}

	.nb-pied .g-recherche,
	.g-recherche {
		flex-wrap: wrap;
	}

	.nb-pied .g-recherche input[type="search"],
	.g-recherche input[type="search"] {
		flex-basis: 100%;
	}

	.nb-pied-bas {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Agenda (FB Carte événements) : la date en #a8660c s'arrête à 4,08:1 sur son fond clair. */
.agenda-date-pill {
	color: #7c4a06;
}

/* =========================================================
   17. Réglages d'accessibilité de FB En-tête
   ========================================================= */

/* Contrastes renforcés : les photos et voiles décoratifs disparaissent, le texte reste noir sur blanc. */
html.fbet-c-high .nb-fond,
html.fbet-c-high .nb-heros::before,
html.fbet-c-high .nb-participer::before,
html.fbet-c-high .nb-banniere::before,
html.fbet-c-high .nb-cartes-photo a::before,
html.fbet-c-high .nb-cartes-photo img,
html.fbet-c-high .g-carte-corps::after,
html.fbet-c-high .nb-evenements > li::after,
html.fbet-c-high .fbet-brand::after {
	display: none;
}

html.fbet-c-high .nb-bouton,
html.fbet-c-high .nb-tuiles a,
html.fbet-c-high .nb-evenements > li,
html.fbet-c-high .nb-participer-carte {
	border: 2px solid #000 !important;
}

html.fbet-c-high .g-carte--grille .g-carte-corps {
	margin-top: 0;
}

/* Windows à contrastes élevés : le texte découpé dans un dégradé deviendrait invisible. */
@media (forced-colors: active) {
	.nb-degrade-texte {
		background: none;
		color: CanvasText;
	}

	.nb-bouton,
	.nb-tuiles a {
		border: 1px solid ButtonText;
	}
}

/* =========================================================
   18. Animations réduites et impression
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.nb-bouton,
	.nb-tuiles a,
	.nb-cartes-photo img,
	.g-carte--grille .g-carte-image img {
		transition: none;
	}

	.nb-cartes-photo a:hover img,
	.g-carte--grille .g-carte-lien:hover .g-carte-image img {
		transform: none;
	}
}

@media print {
	.nb-barre,
	.nb-actions,
	.nb-defile,
	.nb-fond,
	.nb-pied-recherche,
	.nb-haut {
		display: none !important;
	}

	.nb-entete-barre {
		position: static;
	}

	.nb-heros,
	.nb-banniere,
	.nb-participer,
	.nb-degrade,
	.nb-sombre,
	.nb-pied {
		margin-top: 0;
		padding-top: 1rem;
		background: none !important;
		color: #000 !important;
	}

	.nb-heros::before,
	.nb-banniere::before,
	.nb-participer::before {
		display: none;
	}

	.nb-sombre a {
		color: #000 !important;
	}
}