/*
Theme Name: Garrigue Clair
Theme URI: https://example.fr/theme-garrigue
Author: Commune
Description: Variante claire du thème Garrigue, avec une palette entièrement recalculée à partir des couleurs du blason communal (bleu du ciel, rouge et vert de l'écu, or du soleil) plutôt que du vert sombre d'origine. Même structure, mêmes gabarits, mêmes contrastes vérifiés RGAA — seule l'identité visuelle change. Compatible avec l'extension « Rapports de Conseil Municipal ».
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
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
   ========================================================= */

:root {
	/* Palette tirée du blason communal : bleu du ciel, rouge et vert de
	   l'écu, or du soleil — une déclinaison plus claire et plus vive que
	   le vert sombre d'origine, mais chaque couple texte/fond continue de
	   dépasser le seuil AA du RGAA (vérifié, pas seulement visé). */
	--g-encre: #2c3b30;
	--g-garrigue: #3e7a34;
	--g-calcaire: #f7f6f0;
	--g-blanc: #ffffff;
	--g-vigne: #d1382e;
	--g-attenue: #6b7568;
	--g-trait: #e3e6de;

	/* Bleu du ciel du blason : un second accent, réservé à la barre de
	   coordonnées, pour que la palette raconte vraiment le blason (bleu +
	   rouge + vert + or) plutôt qu'un simple vert éclairci. */
	--g-ciel: #3763cc;

	/* Le soleil du blason communal : une touche chaleureuse, réservée aux
	   petits accents (étiquettes, liens de section) pour ne pas alourdir
	   le reste, très sobre, de l'interface. */
	--g-soleil: #e8b93a;
	--g-soleil-encre: #4a2f00;

	/* Une seule famille, déclinée en graisses et en tailles fortement
	   contrastées : c'est le registre des portails publics récents.
	   Aucune police n'est appelée à l'extérieur du serveur. */
	--g-police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--g-largeur: 84rem;
	--g-lecture: 80ch;
	--g-rayon: 4px;
}

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

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--g-blanc);
	color: var(--g-encre);
	font-family: var(--g-police);
	font-size: 1.0625rem;
	line-height: 1.6;
}

h1, h2, h3, h4 {
	margin: 0 0 0.5em;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p, ul, ol, table, blockquote, figure, pre {
	margin: 0 0 1.25rem;
}

a {
	color: var(--g-garrigue);
	text-decoration: none;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--g-vigne);
}

:focus-visible {
	outline: 3px solid var(--g-vigne);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

/* Une icône ne se comprime jamais : dans une rangée serrée, c'est le
   libellé qui cède, pas le pictogramme, qui deviendrait méconnaissable. */
.g-icone {
	flex-shrink: 0;
}

/* L'attribut hidden ne vaut, dans la feuille du navigateur, qu'un
   sélecteur de type : la moindre règle de classe posant un display le
   contredit. On lui rend la priorité, sans quoi le bouton de recherche
   masqué en l'absence de JavaScript s'afficherait quand même. */
[hidden] {
	display: none !important;
}

.g-contenu {
	width: min(100% - 2.5rem, var(--g-largeur));
	margin-inline: auto;
}

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

.g-evitement {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--g-encre);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.g-evitement:focus {
	left: 0.5rem;
	top: 0.5rem;
	color: #fff;
}

/* =========================================================
   3. Barre de coordonnées
   ========================================================= */

/* Bandeau fin au-dessus de l'en-tête : les coordonnées de la mairie et les
   liens légaux, toujours visibles, sans empiéter sur la navigation. */
.g-barre-info {
	position: relative;
	z-index: 21;
	background: var(--g-ciel);
	color: #fff;
}

.g-barre-info-corps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem 1.5rem;
	padding: 0.5rem 0;
	font-size: 0.82rem;
}

.g-barre-info-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g-barre-info-contact li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.g-barre-info-contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #fff;
	text-decoration: none;
}

.g-barre-info-contact a:hover {
	color: rgba(255, 255, 255, 0.9);
}

.g-barre-info-adresse {
	color: rgba(255, 255, 255, 0.9);
}

.g-barre-info .g-icone {
	width: 1em;
	height: 1em;
	opacity: 0.9;
}

.g-barre-info-legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g-barre-info-legal a {
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
	font-size: 0.8rem;
}

.g-barre-info-legal a:hover {
	color: #fff;
	text-decoration: underline;
}

/* En dessous de 640px, la barre garde le contact, mais les liens légaux
   cèdent la place : ils sont déjà repris en pied de page. */
@media (max-width: 640px) {
	.g-barre-info-legal {
		display: none;
	}
}

/* =========================================================
   3bis. En-tête
   ========================================================= */

.g-entete {
	position: relative;
	z-index: 20;
	background: var(--g-blanc);
	border-bottom: 1px solid var(--g-trait);
}

/* Bandeau du menu en biais : sur l'accueil, un pan blanc coupé en
   diagonale prolonge le fond du menu sur la photo qui commence en
   dessous. La navigation elle-même reste sur un rectangle bien droit —
   seule cette bande décorative, ajoutée après elle, porte l'inclinaison —
   pour que les liens du menu et le panneau de recherche restent
   entièrement cliquables, sans coin découpé sur eux. */
.g-entete--biais {
	border-bottom: none;
}

.g-entete--biais::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(-1 * clamp(3rem, 9vw, 7rem));
	height: clamp(3rem, 9vw, 7rem);
	background: var(--g-blanc);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 35%);
	pointer-events: none;
}

/* Une seule rangée : blason et nom ouvrent la barre, les actions la ferment. */
.g-entete-corps {
	display: flex;
	align-items: center;
	gap: 1rem 1.5rem;
	padding: 0.6rem 0;
}

.g-identite {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	flex-shrink: 0;
	min-width: 0;
	padding: 0.35rem 0;
	text-decoration: none;
	color: var(--g-encre);
}

.g-identite img {
	max-height: 52px;
	width: auto;
}

.g-identite-texte {
	min-width: 0;
}

.g-nom {
	display: block;
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.g-departement {
	display: block;
	margin-top: 0.05rem;
	color: var(--g-attenue);
	font-size: 0.775rem;
	font-weight: 400;
	letter-spacing: 0.02em;
}

.g-entete-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	flex-shrink: 0;
}

/* Bascule de recherche : révélée par le script. Sans JavaScript elle reste
   masquée et c'est le formulaire du panneau qui s'affiche en clair. */
.g-recherche-bascule,
.g-nav-bouton {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1rem;
	border: 1px solid var(--g-trait);
	border-radius: var(--g-rayon);
	background: var(--g-blanc);
	color: var(--g-encre);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

/* Le fond est redéclaré ici volontairement : la règle générique
   « button:hover » pose sinon l'encre foncée, et le vert du texte
   posé dessus deviendrait illisible. */
.g-recherche-bascule:hover,
.g-nav-bouton:hover {
	background: var(--g-calcaire);
	border-color: var(--g-garrigue);
	color: var(--g-garrigue);
}

.g-nav-bouton[aria-expanded="true"] {
	background: var(--g-garrigue);
	border-color: var(--g-garrigue);
	color: #fff;
}

.g-recherche-bascule[aria-expanded="true"] {
	background: var(--g-garrigue);
	border-color: var(--g-garrigue);
	color: #fff;
}

.g-nav-bouton {
	display: none;
}

/* ---- Panneau de recherche ---- */

.g-recherche-panneau {
	display: none;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 40;
	background: var(--g-garrigue);
	color: #fff;
	box-shadow: 0 14px 34px rgba(28, 38, 32, 0.22);
}

.g-recherche-panneau.est-ouvert {
	display: block;
}

/* Sans JavaScript, le panneau est simplement une bande toujours visible. */
html:not(.js-actif) .g-recherche-panneau {
	display: block;
	position: static;
	box-shadow: none;
}

html:not(.js-actif) .g-recherche-fermer {
	display: none;
}

.g-recherche-corps {
	position: relative;
	padding: 2rem 0 2.25rem;
}

.g-recherche {
	display: flex;
	gap: 0.5rem;
	max-width: 46rem;
}

.g-recherche input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.95rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--g-rayon);
	background: var(--g-blanc);
	font-family: inherit;
	font-size: 1.05rem;
	color: var(--g-encre);
}

.g-recherche input[type="search"]::placeholder {
	color: var(--g-attenue);
}

/* Le bouton d'envoi reprend par défaut le vert du thème : posé sur le
   panneau, qui est de ce même vert, il disparaîtrait. On l'inverse. */
.g-recherche-panneau .g-recherche button {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.95rem 1.4rem;
	background: var(--g-blanc);
	border-color: var(--g-blanc);
	color: var(--g-garrigue);
}

.g-recherche-panneau .g-recherche button:hover {
	background: var(--g-calcaire);
	border-color: var(--g-calcaire);
	color: var(--g-encre);
}

.g-recherche-frequentes {
	margin-top: 1.5rem;
}

.g-recherche-frequentes-titre {
	margin: 0 0 0.7rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.78);
}

.g-recherche-frequentes ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g-recherche-frequentes a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.95rem;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 999px;
	color: #fff;
	font-size: 0.925rem;
	text-decoration: none;
}

.g-recherche-frequentes a:hover,
.g-recherche-frequentes a:focus {
	background: #fff;
	color: var(--g-garrigue);
	border-color: #fff;
}

.g-recherche-frequentes .g-icone {
	width: 1em;
	height: 1em;
}

.g-recherche-fermer {
	position: absolute;
	top: 1.1rem;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--g-rayon);
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.g-recherche-fermer:hover {
	background: rgba(255, 255, 255, 0.14);
}

.g-recherche-panneau :focus-visible,
.g-recherche-fermer:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Navigation par rubriques */

.g-nav {
	min-width: 0;
}

.g-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g-nav a {
	display: inline-block;
	padding: 1.15rem 0;
	color: var(--g-encre);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}

.g-nav a:hover {
	color: var(--g-garrigue);
	border-bottom-color: var(--g-trait);
}

.g-nav .current-menu-item > a,
.g-nav .current_page_item > a,
.g-nav .current-menu-ancestor > a {
	border-bottom-color: var(--g-vigne);
}

/* Sous-menus.
   Le déroulé répond au survol et à :focus-within, ce qui le rend
   accessible à la tabulation sans script : on ouvre en arrivant sur
   la rubrique, on referme en quittant le dernier lien. */

.g-nav li {
	position: relative;
}

.g-nav .menu-item-has-children > a {
	padding-right: 1.1rem;
}

.g-nav .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 0.42em;
	height: 0.42em;
	margin-top: -0.32em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.6;
}

.g-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -1rem;
	z-index: 30;
	min-width: 16rem;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--g-blanc);
	border: 1px solid var(--g-trait);
	border-top: 3px solid var(--g-garrigue);
	border-radius: 0 0 var(--g-rayon) var(--g-rayon);
	box-shadow: 0 10px 28px rgba(28, 38, 32, 0.14);
}

.g-nav li:hover > .sub-menu,
.g-nav li:focus-within > .sub-menu {
	display: block;
}

.g-nav .sub-menu li {
	border: none;
}

.g-nav .sub-menu a {
	display: block;
	padding: 0.55rem 1.1rem;
	font-weight: 500;
	font-size: 0.975rem;
	border-bottom: none;
	border-left: 3px solid transparent;
	margin-bottom: 0;
}

.g-nav .sub-menu a:hover,
.g-nav .sub-menu a:focus {
	background: var(--g-calcaire);
	border-left-color: var(--g-vigne);
	color: var(--g-garrigue);
}

.g-nav .sub-menu .current-menu-item > a {
	border-left-color: var(--g-vigne);
	font-weight: 700;
}

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

.g-heros {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(24rem, 60vw, 36rem);
	padding: clamp(3rem, 2rem + 6vw, 6rem) 0 3rem;
	background: var(--g-garrigue);
	color: #fff;
	background-size: cover;
	background-position: center;
}

/* Voile assombrissant, dégradé du haut (à peine teinté, pour laisser la
   photo respirer) vers le bas (plus soutenu, pour que le titre blanc
   reste lisible quel que soit le sujet de l'image). */
.g-heros-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 38, 32, 0.05) 0%, rgba(28, 38, 32, 0.12) 45%, rgba(28, 38, 32, 0.5) 100%);
}

.g-heros > * {
	position: relative;
	z-index: 1;
}

.g-heros-titre {
	max-width: 18ch;
	margin: 0 0 0.75rem;
	color: #fff;
}

.g-heros-texte {
	max-width: 52ch;
	margin: 0 0 2.5rem;
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.92);
}

/* Recherches fréquentes : ce que les habitants demandent le plus,
   offert directement plutôt qu'à chercher dans l'arborescence. */
.g-frequentes {
	padding: 1.5rem 0 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.g-frequentes-titre {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.75);
}

.g-frequentes ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g-frequentes a {
	display: inline-block;
	padding: 0.4rem 0.95rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	color: #fff;
	font-size: 0.925rem;
	text-decoration: none;
}

.g-frequentes a:hover {
	background: #fff;
	color: var(--g-garrigue);
	border-color: #fff;
}

/* =========================================================
   5. Je suis… / Je veux…
   ========================================================= */

.g-usages {
	padding: clamp(2.5rem, 2rem + 3vw, 4rem) 0;
	background: var(--g-calcaire);
}

.g-usages-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 2.5rem;
}

.g-usage-titre {
	margin: 0 0 1.1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--g-garrigue);
	font-size: 1.35rem;
}

.g-usage-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g-usage-liste a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	height: 100%;
	padding: 0.85rem 1rem;
	background: var(--g-blanc);
	border: 1px solid var(--g-trait);
	border-left: 3px solid var(--g-garrigue);
	border-radius: var(--g-rayon);
	color: var(--g-encre);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}

.g-usage-liste a:hover {
	border-left-color: var(--g-vigne);
	color: var(--g-vigne);
}

.g-usage-liste .g-icone {
	width: 1.5em;
	height: 1.5em;
	color: var(--g-garrigue);
}

.g-usage-liste a:hover .g-icone {
	color: var(--g-vigne);
}

/* Pastilles de recherches fréquentes */
.g-frequentes a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.g-frequentes .g-icone {
	width: 1em;
	height: 1em;
	opacity: 0.9;
}

/* Rubriques du menu principal */
.g-nav > ul > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.g-nav .sub-menu a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* ---- Découvrir Nébian (accueil) ---- */

.g-decouvrir-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
}

.g-decouvrir-carte {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--g-rayon);
	color: #fff;
}

.g-decouvrir-carte img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.g-decouvrir-carte:hover img {
	transform: scale(1.05);
}

.g-decouvrir-carte::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 38, 32, 0) 45%, rgba(28, 38, 32, 0.8) 100%);
}

.g-decouvrir-carte-titre {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 1.25rem 1.4rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
}

/* =========================================================
   6. Actualités
   ========================================================= */

.g-section {
	padding: clamp(2.5rem, 2rem + 3vw, 4rem) 0;
}

.g-section-entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
}

.g-section-entete h2 {
	margin: 0;
}

.g-lien-section {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.1rem;
	background: var(--g-soleil);
	border-radius: 999px;
	color: var(--g-soleil-encre);
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	white-space: nowrap;
}

.g-lien-section:hover {
	background: var(--g-soleil-encre);
	color: #fff;
}

.g-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g-carte {
	min-width: 0;
}

/* La carte entière est cliquable : la cible tactile est bien plus
   généreuse qu'un lien limité au seul titre. */
.g-carte-lien {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--g-blanc);
	border: 1px solid var(--g-trait);
	border-radius: var(--g-rayon);
	overflow: hidden;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.g-carte-lien:hover {
	border-color: var(--g-garrigue);
	box-shadow: 0 10px 26px rgba(28, 38, 32, 0.14);
	transform: translateY(-2px);
}

.g-carte-image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--g-calcaire);
}

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

.g-carte-corps {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	padding: 1.15rem 1.25rem 1.35rem;
}

.g-etiquette {
	display: inline-block;
	margin-bottom: 0.6rem;
	padding: 0.25rem 0.65rem;
	background: var(--g-soleil);
	border-radius: 999px;
	color: var(--g-soleil-encre);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

a.g-etiquette:hover {
	background: var(--g-vigne);
	color: #fff;
}

.g-etiquette--discrete {
	background: transparent;
	border: 1px solid var(--g-soleil-encre);
	color: var(--g-soleil-encre);
}

a.g-etiquette--discrete:hover {
	background: var(--g-soleil);
	border-color: var(--g-soleil);
	color: var(--g-soleil-encre);
}

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

.g-carte-lien:hover .g-carte-titre {
	color: var(--g-garrigue);
}

.g-carte-extrait {
	margin: 0 0 0.6rem;
	color: var(--g-attenue);
	font-size: 0.925rem;
}

.g-carte-date {
	margin: auto 0 0;
	padding-top: 0.5rem;
	color: var(--g-attenue);
	font-size: 0.825rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

/* ---- Bloc « à la une » ---- */

.g-actu-une {
	display: grid;
	gap: 1.25rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.g-actu-une .g-carte-lien {
	position: relative;
}

.g-actu-une .g-carte-image {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.g-actu-une .g-carte-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 38, 32, 0) 35%, rgba(28, 38, 32, 0.55) 65%, rgba(28, 38, 32, 0.92) 100%);
}

.g-actu-une .g-carte--grande .g-carte-image::after,
.g-actu-une .g-carte--petite .g-carte-image::after {
	background: linear-gradient(180deg, rgba(28, 38, 32, 0) 30%, rgba(28, 38, 32, 0.6) 65%, rgba(28, 38, 32, 0.92) 100%);
}

.g-actu-une .g-carte:not(:has(.g-carte-image)) .g-carte-lien {
	background: linear-gradient(135deg, var(--g-garrigue) 0%, var(--g-encre) 100%);
}

.g-actu-une .g-carte-corps {
	position: relative;
	z-index: 1;
	justify-content: flex-end;
	min-height: 220px;
	padding: 1.35rem 1.5rem;
	color: #fff;
}

.g-actu-une .g-carte--grande .g-carte-corps {
	min-height: 340px;
	padding: 1.75rem;
}

.g-actu-une .g-carte-titre,
.g-actu-une .g-carte-lien:hover .g-carte-titre {
	color: #fff;
}

.g-actu-une .g-carte--grande .g-carte-titre {
	font-size: clamp(1.4rem, 3vw, 2.1rem);
}

.g-actu-une .g-carte--grande .g-carte-extrait {
	max-width: 60ch;
	color: rgba(255, 255, 255, 0.88);
}

.g-actu-une .g-carte-date {
	margin-top: 0;
	padding-top: 0;
	color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 900px) {
	.g-actu-une {
		grid-template-columns: 2fr 1fr;
		grid-template-rows: 1fr 1fr;
		min-height: 460px;
	}

	.g-actu-une .g-carte--grande {
		grid-row: 1 / span 2;
	}

	.g-actu-une .g-carte-corps {
		min-height: 100%;
	}
}

/* ---- Suite d'un article : « à lire aussi » ---- */

.g-article-pied {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--g-trait);
	color: var(--g-attenue);
	font-size: 0.9rem;
}

.g-article-suite {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--g-trait);
}

/* =========================================================
   7. Conseil municipal (bandeau sombre)
   ========================================================= */

.g-conseil {
	padding: clamp(2.5rem, 2rem + 3vw, 4rem) 0;
	background: var(--g-encre);
	color: #fff;
}

.g-conseil h2 {
	color: #fff;
}

.g-conseil a {
	color: #fff;
}

.g-conseil-intro {
	max-width: 56ch;
	color: rgba(255, 255, 255, 0.82);
}

.g-conseil-liste {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.g-conseil-liste li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.g-conseil-date {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9rem;
	white-space: nowrap;
}

.g-bouton-clair {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 0.7rem 1.4rem;
	border: 1px solid #fff;
	border-radius: var(--g-rayon);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.g-bouton-clair:hover {
	background: #fff;
	color: var(--g-encre);
}

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

.g-principal {
	padding: 2.5rem 0 3.5rem;
}

/* Plafonnée plus étroitement que --g-largeur : sur un grand écran, une
   colonne de texte bridée à --g-lecture mais logée dans un conteneur de
   84rem laisse un vide entre la fin des lignes et la colonne latérale.
   En resserrant le conteneur, l'espace en trop repart en marge extérieure
   — qui se lit comme une mise en page centrée voulue — plutôt qu'en trou
   au milieu du contenu. */
.g-colonnes {
	max-width: 74rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 17rem;
	gap: 3.5rem;
	align-items: start;
}

/* L'article occupe toute la colonne : c'est le texte courant, plus bas,
   qui garde une longueur de ligne raisonnable. Le titre, l'image de une
   et les tableaux, eux, profitent de la largeur disponible. */
.g-article {
	max-width: none;
}

.g-article-entete {
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--g-garrigue);
}

.g-meta {
	margin: 0;
	color: var(--g-attenue);
	font-size: 0.9rem;
}

.g-fil {
	margin: 0 0 1.5rem;
	font-size: 0.875rem;
	color: var(--g-attenue);
}

.g-fil a {
	color: var(--g-attenue);
}

.g-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.g-entree {
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--g-trait);
}

.g-entree:first-child {
	padding-top: 0;
}

.g-entree h2,
.g-entree h3 {
	margin: 0 0 0.3rem;
	font-size: 1.15rem;
}

.g-entree h2 a,
.g-entree h3 a {
	color: var(--g-encre);
	text-decoration: none;
}

.g-entree h2 a:hover,
.g-entree h3 a:hover {
	color: var(--g-garrigue);
}

.g-extrait {
	margin: 0.3rem 0 0;
	color: var(--g-attenue);
}

.g-lateral {
	font-size: 0.95rem;
}

.g-bloc {
	margin-bottom: 1.5rem;
	padding: 1.3rem;
	background: var(--g-calcaire);
	border-radius: var(--g-rayon);
}

.g-bloc h2,
.g-bloc .widget-title {
	margin: 0 0 0.85rem;
	font-size: 1.05rem;
}

.g-bloc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.g-bloc li + li {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--g-trait);
}

.g-bloc .g-actus-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.g-bloc .g-actus-liste li {
	margin: 0;
	padding: 0.9rem 0;
	border-top: 0;
	border-bottom: 1px solid var(--g-trait);
}

.g-bloc .g-actus-liste li:first-child {
	padding-top: 0;
}

.g-bloc .g-actus-liste li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.g-bloc .g-actus-liste a {
	display: block;
	color: var(--g-encre);
	font-weight: 600;
	text-decoration: none;
}

.g-bloc .g-actus-liste a:hover {
	color: var(--g-garrigue);
}

.g-actus-date {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	background: var(--g-vigne);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

/* =========================================================
   9. Formulaires, boutons, pagination
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--g-trait);
	border-radius: var(--g-rayon);
	background: #fff;
	font-family: inherit;
	font-size: 1rem;
	color: inherit;
}

.g-bouton,
button,
input[type="submit"] {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--g-garrigue);
	border-radius: var(--g-rayon);
	background: var(--g-garrigue);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.g-bouton:hover,
button:hover,
input[type="submit"]:hover {
	background: var(--g-encre);
	border-color: var(--g-encre);
	color: #fff;
}

.g-pagination {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--g-trait);
}

.g-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g-pagination li {
	list-style: none;
}

.g-pagination .page-numbers {
	display: inline-block;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--g-trait);
	border-radius: var(--g-rayon);
	text-decoration: none;
}

.g-pagination .current {
	background: var(--g-garrigue);
	border-color: var(--g-garrigue);
	color: #fff;
	font-weight: 600;
}

/* =========================================================
   10. Pied de page
   ========================================================= */

.g-pied {
	padding: 3rem 0 1.5rem;
	background: var(--g-garrigue);
	color: #fff;
	text-align: center;
}

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

.g-pied-colonnes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2rem;
}

.g-pied h2 {
	font-size: 1rem;
	margin-bottom: 0.75rem;
	color: #fff;
}

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

.g-pied li {
	padding: 0.2rem 0;
}

/* Icône + libellé : en ligne, un SVG s'aligne sur sa propre base, pas sur
   celle du texte, et flotte visiblement trop haut. On les centre l'un sur
   l'autre plutôt que de rattraper l'écart au pif avec un vertical-align. */
.g-pied li a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.g-pied-bas {
	margin-top: 2.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 0.875rem;
}

.g-pied-bas ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

/* =========================================================
   11. Contenu éditorial
   ========================================================= */

/* Longueur de ligne.
   Le texte courant occupe toute la colonne, au même niveau que le trait
   sous le titre. */
.g-texte > * {
	max-width: none;
}

.g-texte > figure,
.g-texte > img,
.g-texte > table,
.g-texte > .clm-wrapper,
.g-texte > .wp-block-image,
.g-texte > .wp-block-gallery,
.g-texte > .wp-block-table,
.g-texte > .wp-block-embed,
.g-texte > .wp-block-video,
.g-texte > .wp-block-media-text,
.g-texte > .wp-block-columns,
.g-texte > .wp-block-cover,
.g-texte > .wp-block-separator,
.g-texte > .alignwide,
.g-texte > .alignfull {
	max-width: none;
}

.g-texte blockquote {
	margin-left: 0;
	padding-left: 1.25rem;
	border-left: 4px solid var(--g-garrigue);
	color: var(--g-attenue);
}

/* Un tableau de délibérations à quatre colonnes ne rentre pas dans un
   téléphone. Plutôt que d'écraser les colonnes jusqu'à l'illisible, on
   le rend défilable horizontalement : le reste de la page garde sa
   largeur. Le display:block ne casse pas la mise en page tabulaire, les
   lignes conservant leur propre display. */
.g-texte table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.g-texte th,
.g-texte td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--g-trait);
	text-align: left;
}

.g-texte th {
	background: var(--g-calcaire);
}

/* =========================================================
   12. Adaptations
   ========================================================= */

/* Seuil de repli du menu.
   Il n'est pas choisi au hasard : cinq rubriques aux libellés de la
   commune, le blason et le bouton de recherche tiennent sur une rangée
   jusqu'aux environs de 1 150 px. En dessous, le menu passerait sur deux
   lignes et l'en-tête doublerait de hauteur — mieux vaut alors le replier
   franchement derrière un bouton. Une mairie qui ajoute des rubriques
   peut relever ce seuil. */
@media (max-width: 1100px) {
	/* La barre reste sur une rangée — identité à gauche, boutons à
	   droite — et le menu se déplie en dessous, sur toute la largeur.
	   L'identité doit pouvoir se comprimer : figée, une mention de
	   département un peu longue renverrait les deux boutons à la ligne
	   et doublerait la hauteur de l'en-tête. */
	.g-entete-corps {
		flex-wrap: wrap;
		gap: 0 1rem;
	}

	.g-identite {
		flex-shrink: 1;
	}

	.g-nav-bouton {
		display: inline-flex;
	}

	/* Pas d'écart vertical par défaut : le menu replié occupe déjà sa
	   propre ligne de flex, et un gap y laisserait une bande vide sous
	   l'en-tête. L'écart n'apparaît qu'une fois le menu déplié. */
	.g-nav.est-ouvert {
		margin-top: 0.5rem;
	}

	.g-nav {
		order: 3;
		flex-basis: 100%;
	}

	.g-nav ul {
		display: none;
		flex-direction: column;
		gap: 0;
	}

	.g-nav.est-ouvert ul {
		display: flex;
	}

	.g-nav li + li {
		border-top: 1px solid var(--g-trait);
	}

	.g-nav a {
		display: block;
		padding: 0.75rem 0;
		border-bottom: none;
		margin-bottom: 0;
	}

	.g-nav .current-menu-item > a,
	.g-nav .current_page_item > a,
	.g-nav .current-menu-ancestor > a {
		border-left: 3px solid var(--g-vigne);
		padding-left: 0.7rem;
	}

	/* Sur petit écran, le sous-menu se déplie sous sa rubrique plutôt
	   que de flotter au-dessus du contenu. */
	.g-nav .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		margin: 0 0 0.5rem 0.9rem;
		padding: 0;
		border: none;
		border-left: 2px solid var(--g-trait);
		border-radius: 0;
		box-shadow: none;
	}

	.g-nav .sub-menu a {
		padding: 0.5rem 0 0.5rem 0.9rem;
	}

	.g-nav .menu-item-has-children > a::after {
		display: none;
	}
}

@media (max-width: 960px) {
	/* minmax(0, 1fr) et non 1fr : une piste de grille en « 1fr » garde un
	   minimum automatique, si bien qu'un tableau trop large repousse la
	   colonne au-delà de l'écran et fait défiler la page entière. */
	.g-colonnes {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}
}

/* Téléphones et petites tablettes : on compacte l'identité et on réduit
   les deux boutons à leur seul pictogramme, leur libellé restant lu par
   les lecteurs d'écran. */
@media (max-width: 782px) {
	.g-identite img {
		max-height: 40px;
	}

	.g-nom {
		font-size: 1.05rem;
	}

	.g-departement {
		font-size: 0.72rem;
	}

	.g-recherche-bascule span,
	.g-nav-bouton span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.g-recherche-bascule,
	.g-nav-bouton {
		padding: 0.5rem 0.6rem;
	}

	/* On dégage une rangée pour la croix de fermeture, sans quoi elle
	   viendrait se poser sur le bouton « Rechercher ». */
	.g-recherche-corps {
		padding-top: 4.25rem;
	}

	.g-recherche {
		flex-wrap: wrap;
	}

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

	.g-recherche-panneau .g-recherche button {
		flex: 1;
		justify-content: center;
	}
}

/* Petits téléphones. La mention de département est la première chose
   qu'on sacrifie : sans elle, le blason, le nom et les deux boutons
   tiennent sur une seule rangée, ce qui rend à la page une soixantaine
   de pixels de hauteur utile. Le nom de la commune, lui, reste. */
@media (max-width: 480px) {
	.g-entete-corps {
		column-gap: 0.5rem;
	}

	.g-departement {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.g-nav,
	.g-recherche,
	.g-frequentes,
	.g-lateral,
	.g-pied-colonnes {
		display: none;
	}

	body {
		font-size: 11pt;
	}

	.g-heros,
	.g-conseil {
		background: none;
		color: #000;
	}
}