/*
Theme Name:   GeneratePress Nesle — Le ciel de Nesle
Theme URI:    https://www.ville-nesle.fr/
Description:  Thème enfant GeneratePress du site officiel de la Ville de Nesle (Somme). Panorama illustré de la ville dont le ciel suit l’heure, les saisons et les fêtes (Noël, Nouvel An, 14 Juillet, Halloween, Fête de la musique, 11 Novembre, Foire Occuli, Foire aux Poulains, Saint-Pierre). Méga-menu, pied de page « Nesle la nuit », statut d’ouverture de la mairie, habillage tarteaucitron (TAC).
Author:       Maxime Lobbé
Author URI:   https://maxime.lobbe.fr/
Template:     generatepress
Version:      2.1.1
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:  generatepress-nesle
*/

/* ==========================================================================
   1. Polices (auto-hébergées, aucun appel à Google Fonts : RGPD)
   ========================================================================== */

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"),
	     url("assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Figtree";
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/figtree-latin-wght-italic.woff2") format("woff2-variations"),
	     url("assets/fonts/figtree-latin-wght-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}

/* ==========================================================================
   2. Variables
   ========================================================================== */

:root {
	--petrole: #10343C;
	--petrole-fonce: #0A2228;
	--petrole-clair: #1D4A55;
	--nuit: #0B1533;
	--abricot: #E8894A;
	--abricot-clair: #F2B07A;
	--abricot-texte: #A84E1E;
	--creme: #FFFCF7;
	--sable: #F4ECDF;
	--sable-clair: #FAF5EC;
	--sable-bord: #E7DED0;
	--texte: #10343C;
	--texte-doux: #4E6469;
	--texte-nuit: #CFE0E3;
	--vert: #1E7A44;
	--vert-clair: #4FD08A;
	--largeur: 1240px;
	--gouttiere: 24px;
	--rayon: 24px;
	--rayon-petit: 14px;
	--serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Ciel par défaut (journée de printemps) — remplacé par le moteur d'ambiance */
	--c-ciel1: #8FC4EA;
	--c-ciel2: #CFE8F6;
	--c-ciel3: #EEF7F7;
	--c-astre: #FFE9A8;
	--astre-x: 1120px;
	--astre-y: 160px;
	--astre-s: 0.93;
	--o-etoiles: 0;
	--o-nuages: 1;
	--c-nuage: #FFFFFF;
	--c-oiseaux: #2F4F5A;
	--o-oiseaux: 1;
	--c-ville: #557C76;
	--c-fenetre: #3F6560;
	--c-reflet: #FFFFFF;
	--c-texte-ciel: #10343C;
	--c-colline1: #C5DDB2;
	--c-colline2: #9CC58E;
	--c-sol: #B5D88E;
	--c-sillons: #95BE6E;
	--c-herbe: #7DB36E;
	--c-riviere: #A6D4E6;
	--c-feuille1: #F4B9CC;
	--c-feuille2: #8CC47A;
	--c-tronc: #6B4E3A;
	--o-feuillage: 1;
	--o-branches: 0;
	--o-fleurs: 1;
	--o-neige: 0;
	--c-neige-toit: #FFFFFF;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

body,
button,
input,
select,
textarea {
	font-family: var(--sans);
}

body {
	background: var(--creme);
	color: var(--texte);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--petrole);
	text-underline-offset: 3px;
}

a:hover,
a:focus {
	color: var(--abricot-texte);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--petrole);
	font-weight: 700;
	line-height: 1.2;
}

h1,
h2 {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.01em;
}

h1 { font-size: 52px; line-height: 1; }
h2 { font-size: 40px; line-height: 1.05; }
h3 { font-size: 23px; }
h4 { font-size: 19px; }

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

::selection {
	background: var(--abricot);
	color: var(--petrole);
}

.screen-reader-text:focus {
	background: var(--petrole);
	color: var(--creme);
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background) {
	background: var(--petrole);
	color: var(--creme);
	border: 0;
	border-radius: var(--rayon-petit);
	font-weight: 700;
	padding: 14px 24px;
	line-height: 1.2;
}

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
a.wp-block-button__link:not(.has-background):hover,
button:focus,
input[type="submit"]:focus,
a.button:focus {
	background: var(--petrole-clair);
	color: var(--creme);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
	border: 1px solid var(--sable-bord);
	border-radius: var(--rayon-petit);
	background: #ffffff;
	color: var(--texte);
	padding: 12px 16px;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--petrole);
	background: #ffffff;
	color: var(--texte);
}

.nesle-wrap {
	max-width: var(--largeur);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gouttiere);
	padding-right: var(--gouttiere);
	box-sizing: border-box;
}

.nesle-icone {
	display: inline-block;
	flex: none;
	width: 1.1em;
	height: 1.1em;
	vertical-align: -0.18em;
}

/* Boutons pilules */
.nesle-pilule {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 22px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nesle-pilule:hover,
.nesle-pilule:focus {
	transform: translateY(-1px);
}

.nesle-pilule--abricot {
	background: var(--abricot);
	color: var(--petrole);
	font-weight: 800;
}

.nesle-pilule--abricot:hover,
.nesle-pilule--abricot:focus {
	background: var(--abricot-clair);
	color: var(--petrole);
}

.nesle-pilule--verre {
	border: 1px solid rgba(255, 252, 247, 0.3);
	color: var(--creme);
}

.nesle-pilule--verre:hover,
.nesle-pilule--verre:focus {
	background: rgba(255, 252, 247, 0.12);
	color: #ffffff;
}

.nesle-pilule--large {
	width: 100%;
	box-sizing: border-box;
	font-size: 18px;
	border-radius: var(--rayon-petit);
}

.nesle-bouton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border-radius: var(--rayon-petit);
	background: var(--petrole);
	color: var(--creme);
	text-decoration: none;
	font-weight: 700;
}

.nesle-bouton:hover,
.nesle-bouton:focus {
	background: var(--petrole-clair);
	color: var(--creme);
}

.nesle-lien-fort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	text-decoration: none;
}

.nesle-lien-fort .nesle-icone {
	transition: transform 0.2s ease;
}

.nesle-lien-fort:hover .nesle-icone,
.nesle-lien-fort:focus .nesle-icone {
	transform: translateX(3px);
}

/* Statut d'ouverture */
.nesle-statut {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--vert);
}

.nesle-statut__point {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 4px rgba(30, 122, 68, 0.14);
}

.nesle-statut.is-ferme {
	color: var(--abricot-texte);
}

.nesle-statut.is-ferme .nesle-statut__point {
	box-shadow: 0 0 0 4px rgba(168, 78, 30, 0.14);
}

.nesle-statut--nuit.is-ouvert,
.nesle-mairie .nesle-statut.is-ouvert {
	color: #9FE0B8;
}

.nesle-statut--nuit.is-ferme,
.nesle-mairie .nesle-statut.is-ferme {
	color: var(--abricot-clair);
}

/* Horaires */
.nesle-horaires {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 18px;
	margin: 0;
	font-size: 15px;
}

.nesle-horaires dt {
	font-weight: 700;
}

.nesle-horaires dd {
	margin: 0;
}

.nesle-horaires--nuit {
	padding-top: 12px;
	border-top: 1px solid rgba(255, 252, 247, 0.16);
}

.nesle-horaires--nuit dt {
	color: var(--creme);
}

/* ==========================================================================
   4. En-tête GeneratePress
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 50;
	background: var(--creme);
	border-bottom: 1px solid var(--sable-bord);
}

.inside-header {
	padding-top: 18px;
	padding-bottom: 18px;
}

.site-branding-container {
	gap: 14px;
}

.site-logo img,
.site-header .header-image {
	max-height: 58px;
	width: auto;
}

.nesle-titre {
	margin: 0;
	line-height: 1;
}

.nesle-titre a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--petrole);
}

.nesle-titre__pre {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	opacity: 0.8;
}

.nesle-titre__nom {
	font-family: var(--serif);
	font-size: 38px;
	line-height: 1;
}

.site-description {
	display: none;
}

/* Accueil : en-tête posé sur le ciel */
.nesle-front .site-header {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	background: transparent;
	border-bottom: 0;
}

.nesle-front .nesle-titre a {
	color: var(--c-texte-ciel);
	transition: color 2s ease;
}

/* ==========================================================================
   5. Navigation principale (pilule)
   ========================================================================== */

.main-navigation,
.main-navigation ul ul {
	background: transparent;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: var(--petrole);
	font-weight: 600;
	font-size: 16px;
}

@media (min-width: 769px) {
	.main-navigation .inside-navigation {
		align-items: center;
		gap: 8px;
	}

	.main-navigation .main-nav > ul {
		background: rgba(255, 252, 247, 0.9);
		border-radius: 999px;
		padding: 6px;
		box-shadow: 0 10px 30px rgba(16, 52, 60, 0.12);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	.nesle-has-banner .main-navigation .main-nav > ul,
	body:not(.nesle-front) .main-navigation .main-nav > ul {
		box-shadow: none;
		border: 1px solid var(--sable-bord);
		background: #ffffff;
	}

	.main-navigation .main-nav > ul > li > a {
		padding-left: 15px;
		padding-right: 15px;
		line-height: 44px;
		border-radius: 999px;
	}

	.main-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
		padding-right: 0;
		padding-left: 6px;
	}

	.main-navigation .main-nav > ul > li:not([class*="current-menu-"]):hover > a,
	.main-navigation .main-nav > ul > li:not([class*="current-menu-"]):focus-within > a,
	.main-navigation .main-nav > ul > li.sfHover:not([class*="current-menu-"]) > a {
		background: var(--sable);
		color: var(--petrole);
	}

	.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
		background: var(--petrole);
		color: var(--creme);
	}

	.main-navigation .main-nav > ul > li.menu-cta > a {
		color: var(--abricot-texte);
		font-weight: 800;
		background: transparent;
	}

	.main-navigation .main-nav > ul > li.menu-cta > a:hover {
		background: var(--sable);
		color: var(--abricot-texte);
	}

	/* Bouton de recherche de GeneratePress */
	.main-navigation .menu-bar-items {
		background: rgba(255, 252, 247, 0.9);
		border-radius: 999px;
		box-shadow: 0 10px 30px rgba(16, 52, 60, 0.12);
	}

	body:not(.nesle-front) .main-navigation .menu-bar-items {
		box-shadow: none;
		border: 1px solid var(--sable-bord);
		background: #ffffff;
	}

	.main-navigation .menu-bar-items .menu-bar-item > a {
		line-height: 56px;
		padding: 0 18px;
		color: var(--petrole);
	}

	/* Sous-menus simples */
	.main-navigation ul ul {
		background: #ffffff;
		border-radius: var(--rayon-petit);
		box-shadow: 0 20px 44px rgba(16, 52, 60, 0.16);
		padding: 8px;
		width: 260px;
		margin-top: 10px;
	}

	.main-navigation .main-nav ul ul li a {
		font-size: 15px;
		padding: 10px 14px;
		line-height: 1.4;
		border-radius: 10px;
	}

	.main-navigation .main-nav ul ul li:hover > a,
	.main-navigation .main-nav ul ul li:focus-within > a {
		background: var(--sable);
		color: var(--petrole);
	}

	.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
		color: var(--abricot-texte);
	}
}

.navigation-search input[type="search"] {
	background: var(--creme);
	color: var(--texte);
	border-radius: 999px;
}

/* ==========================================================================
   6. Méga-menu (bureau)
   Classes sur l'élément de 1er niveau :
   - mega-menu, mega-menu-col-2 / -3 / -4, mega-menu-flat
   Sur un titre de colonne sans lien (URL « # ») : mega-title
   Sur une carte mise en avant (2e niveau) : mega-carte, mega-carte-abricot
   ========================================================================== */

@media (min-width: 769px) {

	.site-header .inside-header,
	.site-header .main-navigation,
	.site-header .inside-navigation,
	.site-header .main-nav,
	.site-header .main-nav > ul,
	.site-header .main-nav > ul > li.mega-menu {
		position: static;
	}

	.main-navigation .main-nav > ul > li.mega-menu > ul {
		--mega-cols: 3;
		display: grid;
		grid-template-columns: repeat(var(--mega-cols), minmax(0, 1fr));
		gap: 8px 40px;
		left: max(var(--gouttiere), calc((100% - var(--largeur)) / 2 + var(--gouttiere))) !important;
		right: max(var(--gouttiere), calc((100% - var(--largeur)) / 2 + var(--gouttiere)));
		top: calc(100% - 6px);
		width: auto;
		margin-top: 0;
		padding: 32px 36px;
		box-sizing: border-box;
		visibility: hidden;
		background: var(--creme);
		border: 1px solid var(--sable-bord);
		border-radius: var(--rayon);
		box-shadow: 0 30px 70px rgba(16, 52, 60, 0.2);
	}

	.main-navigation .main-nav > ul > li.mega-menu.mega-menu-col-2 > ul { --mega-cols: 2; }
	.main-navigation .main-nav > ul > li.mega-menu.mega-menu-col-3 > ul { --mega-cols: 3; }
	.main-navigation .main-nav > ul > li.mega-menu.mega-menu-col-4 > ul { --mega-cols: 4; }
	.main-navigation .main-nav > ul > li.mega-menu.mega-menu-flat > ul { --mega-cols: 4; gap: 0 32px; }

	.main-navigation:not(.toggled) .main-nav > ul > li.mega-menu:hover > ul,
	.main-navigation:not(.toggled) .main-nav > ul > li.mega-menu.sfHover > ul,
	.main-navigation:not(.toggled) .main-nav > ul > li.mega-menu:focus-within > ul,
	.main-navigation .main-nav > ul > li.mega-menu > ul.toggled-on {
		visibility: visible;
		opacity: 1;
		height: auto;
		overflow: visible;
		pointer-events: auto;
	}

	.main-navigation .main-nav > ul > li.mega-menu.nesle-ferme > ul {
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	.main-navigation .main-nav > ul > li.mega-menu > ul > li {
		width: auto;
	}

	/* Titres de colonnes */
	.main-navigation .main-nav > ul > li.mega-menu:not(.mega-menu-flat) > ul > li > a {
		padding: 4px 0 10px;
		font-family: var(--serif);
		font-style: italic;
		font-size: 26px;
		font-weight: 400;
		color: var(--abricot-texte);
		background: transparent;
		border-radius: 0;
	}

	.main-navigation .main-nav li.mega-menu .mega-title > a {
		pointer-events: none;
		cursor: default;
	}

	/* Liens des colonnes */
	.main-navigation .main-nav li.mega-menu ul ul {
		position: static;
		display: block;
		left: auto !important;
		width: auto;
		height: auto;
		opacity: 1;
		visibility: inherit;
		overflow: visible;
		pointer-events: inherit;
		box-shadow: none;
		border: 0;
		background: transparent;
		padding: 0;
		margin: 0;
		float: none;
	}

	.main-navigation .main-nav li.mega-menu ul ul li a,
	.main-navigation .main-nav li.mega-menu.mega-menu-flat > ul > li > a {
		padding: 7px 0;
		font-size: 16px;
		font-weight: 600;
		color: var(--texte);
		background: transparent;
		border-radius: 0;
	}

	.main-navigation .main-nav li.mega-menu.mega-menu-flat > ul > li > a {
		font-weight: 500;
		font-size: 15px;
		border-bottom: 1px solid var(--sable-bord);
	}

	.main-navigation .main-nav li.mega-menu ul ul li a:hover,
	.main-navigation .main-nav li.mega-menu ul ul li a:focus,
	.main-navigation .main-nav li.mega-menu.mega-menu-flat > ul > li > a:hover {
		color: var(--abricot-texte);
		background: transparent;
		text-decoration: underline;
	}

	.main-navigation .main-nav li.mega-menu ul .dropdown-menu-toggle {
		display: none;
	}

	/* Carte mise en avant */
	.main-navigation .main-nav > ul > li.mega-menu > ul > li.mega-carte > a {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 150px;
		padding: 24px;
		border-radius: 20px;
		background: var(--petrole);
		color: var(--creme);
		font-family: var(--sans);
		font-style: normal;
		font-size: 20px;
		font-weight: 700;
	}

	.main-navigation .main-nav > ul > li.mega-menu > ul > li.mega-carte > a::before {
		content: "";
		display: block;
		width: 36px;
		height: 3px;
		margin-bottom: auto;
		background: var(--abricot);
		border-radius: 2px;
	}

	.main-navigation .main-nav > ul > li.mega-menu > ul > li.mega-carte > a:hover {
		background: var(--petrole-clair);
		color: var(--creme);
	}

	.main-navigation .main-nav > ul > li.mega-menu > ul > li.mega-carte.mega-carte-abricot > a,
	.main-navigation .main-nav > ul > li.mega-menu > ul > li.mega-carte.mega-carte-rouge > a {
		background: var(--abricot);
		color: var(--petrole);
	}

	.main-navigation .main-nav > ul > li.mega-menu > ul > li.mega-carte.mega-carte-abricot > a::before,
	.main-navigation .main-nav > ul > li.mega-menu > ul > li.mega-carte.mega-carte-rouge > a::before {
		background: var(--petrole);
	}

	.main-navigation .main-nav > ul > li.mega-menu > ul > li.mega-carte.mega-carte-abricot > a:hover,
	.main-navigation .main-nav > ul > li.mega-menu > ul > li.mega-carte.mega-carte-rouge > a:hover {
		background: var(--abricot-clair);
		color: var(--petrole);
	}
}

/* ==========================================================================
   7. Navigation mobile
   ========================================================================== */

@media (max-width: 768px) {
	.inside-header {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.nesle-titre__nom {
		font-size: 32px;
	}

	.site-logo img {
		max-height: 46px;
	}

	.main-navigation .menu-toggle {
		background: var(--petrole);
		color: var(--creme);
		border-radius: 999px;
		padding: 0 20px;
		line-height: 46px;
	}

	.main-navigation .menu-toggle:hover,
	.main-navigation .menu-toggle:focus {
		background: var(--petrole-clair);
		color: var(--creme);
	}

	.main-navigation.toggled .main-nav > ul {
		margin-top: 12px;
		background: var(--creme);
		border-radius: 20px;
		padding: 8px 14px;
		box-shadow: 0 20px 44px rgba(16, 52, 60, 0.2);
	}

	.main-navigation.toggled .main-nav ul li a {
		line-height: 1.4;
		padding-top: 13px;
		padding-bottom: 13px;
		border-bottom: 1px solid var(--sable-bord);
	}

	.main-navigation.toggled .main-nav ul ul {
		box-shadow: none;
		background: var(--sable-clair);
		border-radius: 12px;
		width: 100%;
	}

	.main-navigation.toggled li.mega-menu:not(.mega-menu-flat) > ul > li > a {
		font-family: var(--serif);
		font-style: italic;
		font-size: 21px;
		color: var(--abricot-texte);
	}

	.main-navigation.toggled .main-nav > ul > li.menu-cta > a {
		color: var(--abricot-texte);
		font-weight: 800;
	}
}

/* ==========================================================================
   8. Le ciel de Nesle (panorama)
   ========================================================================== */

.nesle-front .site.grid-container {
	max-width: none;
	padding: 0;
}

.nesle-front .site-content {
	display: block;
	padding: 0 !important;
}

.nesle-ciel {
	position: relative;
	height: clamp(620px, 92vh, 820px);
	overflow: hidden;
	background: var(--c-ciel2);
	transition: background-color 2s ease;
}

.nesle-ciel .ciel-base,
.nesle-ciel .ciel-fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.ciel-fx {
	display: none !important;
	pointer-events: none;
}

.fx-neige .ciel-fx-neige,
.fx-feuilles .ciel-fx-feuilles,
.fx-noel .ciel-fx-noel,
.fx-pere-noel .ciel-fx-pere-noel,
.fx-feux-nouvel-an .ciel-fx-feux-nouvel-an,
.fx-confettis .ciel-fx-confettis,
.fx-fanions-tricolores .ciel-fx-fanions-tricolores,
.fx-feux-14 .ciel-fx-feux-14,
.fx-halloween .ciel-fx-halloween,
.fx-musique .ciel-fx-musique,
.fx-armistice .ciel-fx-armistice,
.fx-fanions-fete .ciel-fx-fanions-fete,
.fx-saint-pierre .ciel-fx-saint-pierre,
.fx-poulains .ciel-fx-poulains,
.fx-occuli .ciel-fx-occuli {
	display: block !important;
}

/* Couleurs du décor (variables posées par le moteur) */
.k-s1 { stop-color: var(--c-ciel1); }
.k-s2 { stop-color: var(--c-ciel2); }
.k-s3 { stop-color: var(--c-ciel3); }
.k-halo { stop-color: var(--c-astre); }
.k-astre-disque { fill: var(--c-astre); }
.k-astre { transform: translate(var(--astre-x), var(--astre-y)) scale(var(--astre-s)); }
.k-etoiles { fill: #FFF6DD; opacity: var(--o-etoiles); }
.k-nuages { fill: var(--c-nuage); opacity: var(--o-nuages); }
.k-oiseaux { fill: none; stroke: var(--c-oiseaux); stroke-width: 2; stroke-linecap: round; opacity: var(--o-oiseaux); }
.k-colline1 { fill: var(--c-colline1); }
.k-colline2 { fill: var(--c-colline2); }
.k-ville { fill: var(--c-ville); }
.k-fenetres { fill: var(--c-fenetre); }
.k-neige-toits { fill: var(--c-neige-toit); opacity: var(--o-neige); }
.k-sol { fill: var(--c-sol); }
.k-sillons { fill: none; stroke: var(--c-sillons); stroke-width: 2; opacity: 0.6; }
.k-tronc { fill: var(--c-tronc); }
.k-feuille1 { fill: var(--c-feuille1); }
.k-feuille2 { fill: var(--c-feuille2); }
.k-feuillage { opacity: var(--o-feuillage); }
.k-branches { fill: none; stroke: var(--c-tronc); stroke-width: 2; stroke-linecap: round; opacity: var(--o-branches); }
.k-riviere { fill: var(--c-riviere); }
.k-reflet { fill: none; stroke: var(--c-reflet); stroke-width: 3; stroke-linecap: round; }
.k-herbe { fill: var(--c-herbe); }
.k-fleurs { opacity: var(--o-fleurs); }

.k-s1, .k-s2, .k-s3, .k-halo { transition: stop-color 2.5s ease; }
.k-astre-disque, .k-colline1, .k-colline2, .k-ville, .k-fenetres, .k-sol, .k-tronc, .k-feuille1, .k-feuille2, .k-riviere, .k-herbe, .k-nuages { transition: fill 2.5s ease, opacity 2.5s ease; }
.k-astre { transition: transform 2.5s ease; }

/* Contenu posé sur le ciel */
.nesle-ciel__contenu {
	position: relative;
	z-index: 2;
	text-shadow: 0 1px 16px var(--c-ciel2), 0 0 2px var(--c-ciel2);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding-top: clamp(120px, 15vh, 150px);
	color: var(--c-texte-ciel);
	transition: color 2s ease;
}

.nesle-ciel__badge {
	text-shadow: none;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--petrole);
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
}

.nesle-ciel__badge[hidden],
.nesle-ciel__lien[hidden] {
	display: none;
}

.nesle-ciel__badge[data-fete="noel"] { background: #C8312E; }
.nesle-ciel__badge[data-fete="nouvelan"] { background: #E8B43A; color: var(--petrole); }
.nesle-ciel__badge[data-fete="quatorze"] { background: #2F5BD6; }
.nesle-ciel__badge[data-fete="halloween"] { background: #E8761E; color: #1A1424; }
.nesle-ciel__badge[data-fete="musique"] { background: #7A3BD6; }
.nesle-ciel__badge[data-fete="armistice"] { background: #1C2B66; }
.nesle-ciel__badge[data-fete="saint-pierre"],
.nesle-ciel__badge[data-fete="poulains"],
.nesle-ciel__badge[data-fete="occuli"] { background: var(--abricot); color: var(--petrole); }

.nesle-ciel__salut {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.88;
}

.nesle-ciel__titre {
	text-shadow: none;
	margin: 0;
	color: inherit;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(96px, 13vw, 176px);
	line-height: 0.82;
	letter-spacing: -0.02em;
}

.nesle-ciel__titre em {
	font-style: normal;
	color: var(--abricot);
}

.nesle-ciel__phrase {
	margin: 0;
	max-width: 420px;
	font-size: 21px;
	line-height: 1.55;
	opacity: 0.94;
}

.nesle-ciel__lien {
	text-shadow: none;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--creme);
	color: var(--petrole);
	text-decoration: none;
	font-weight: 800;
	box-shadow: 0 8px 22px rgba(16, 52, 60, 0.2);
}

.nesle-ciel__lien::after {
	content: "→";
	margin-left: 8px;
}

.nesle-ciel__lien:hover,
.nesle-ciel__lien:focus {
	background: #ffffff;
	color: var(--abricot-texte);
}

/* Animations du décor */
@keyframes nesleNuage { from { transform: translateX(-260px); } to { transform: translateX(1700px); } }
@keyframes nesleReflet { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.75; } }
@keyframes nesleOiseaux { 0% { transform: translate(0, 0); } 50% { transform: translate(60px, -14px); } 100% { transform: translate(120px, 0); } }
@keyframes nesleChute { 0% { transform: translate(0, 0); } 50% { transform: translate(18px, 390px); } 100% { transform: translate(-6px, 790px); } }
@keyframes nesleFeuille { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(40px, 190px) rotate(120deg); } 50% { transform: translate(-20px, 390px) rotate(220deg); } 75% { transform: translate(50px, 590px) rotate(320deg); } 100% { transform: translate(0, 790px) rotate(420deg); } }
@keyframes nesleFeu { 0% { transform: scale(0.1); opacity: 0; } 12% { opacity: 1; } 60% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes nesleScintille { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes nesleVol { 0% { transform: translate(0, 0) scale(1, 1); } 25% { transform: translate(40px, -16px) scale(1, 0.6); } 50% { transform: translate(90px, 6px) scale(1, 1); } 75% { transform: translate(140px, -10px) scale(1, 0.6); } 100% { transform: translate(190px, 0) scale(1, 1); } }
@keyframes nesleNote { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-420px); opacity: 0; } }
@keyframes nesleTraineau { 0% { transform: translate(-340px, 300px); } 45% { transform: translate(700px, 150px); } 100% { transform: translate(1800px, 230px); } }
@keyframes nesleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes nesleRoue { to { transform: rotate(360deg); } }
@keyframes nesleNacelle { to { transform: rotate(-360deg); } }
@keyframes nesleLuciole { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate(30px, -26px); opacity: 0.4; } 80% { opacity: 1; } 100% { transform: translate(-20px, -50px); opacity: 0; } }
@keyframes nesleEtoile { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.ciel-nuage-1 { animation: nesleNuage 90s linear infinite; }
.ciel-nuage-2 { animation: nesleNuage 130s linear infinite; animation-delay: -60s; }
.ciel-nuage-3 { animation: nesleNuage 110s linear infinite; animation-delay: -30s; }
.ciel-reflet { animation: nesleReflet 4s ease-in-out infinite; }
.ciel-oiseaux { animation: nesleOiseaux 14s ease-in-out infinite alternate; }
.ciel-chute { animation-name: nesleChute; animation-timing-function: linear; animation-iteration-count: infinite; }
.ciel-feuille { animation-name: nesleFeuille; animation-timing-function: linear; animation-iteration-count: infinite; transform-box: fill-box; }
.ciel-feu { transform-box: fill-box; transform-origin: center; animation-name: nesleFeu; animation-timing-function: ease-out; animation-iteration-count: infinite; opacity: 0; }
.ciel-scintille { animation: nesleScintille 1.8s ease-in-out infinite; }
.ciel-chauvesouris { animation-name: nesleVol; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.ciel-note { animation-name: nesleNote; animation-timing-function: ease-out; animation-iteration-count: infinite; opacity: 0; }
.ciel-traineau { animation: nesleTraineau 26s linear infinite; }
.ciel-bob { animation: nesleBob 1.7s ease-in-out infinite; }
.ciel-roue { animation: nesleRoue 40s linear infinite; }
.ciel-nacelle { animation: nesleNacelle 40s linear infinite; transform-box: fill-box; transform-origin: 50% 0; }
.ciel-luciole { fill: #FFE98A; animation-name: nesleLuciole; animation-timing-function: ease-in-out; animation-iteration-count: infinite; opacity: 0; filter: drop-shadow(0 0 4px #FFE98A); }
.ciel-etoile { animation: nesleEtoile 3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
	.ciel-nuage, .ciel-reflet, .ciel-oiseaux, .ciel-chute, .ciel-feuille, .ciel-scintille, .ciel-chauvesouris, .ciel-note, .ciel-traineau, .ciel-bob, .ciel-roue, .ciel-nacelle, .ciel-luciole, .ciel-etoile, .ciel-feu {
		animation: none !important;
	}
	.ciel-feu, .ciel-note, .ciel-luciole { opacity: 1; }
	.ciel-chute, .ciel-feuille { display: none; }
	.ciel-traineau { transform: translate(760px, 170px); }
}

.ciel-sans-animation .ciel-nuage, .ciel-sans-animation .ciel-reflet, .ciel-sans-animation .ciel-oiseaux, .ciel-sans-animation .ciel-chute, .ciel-sans-animation .ciel-feuille, .ciel-sans-animation .ciel-scintille, .ciel-sans-animation .ciel-chauvesouris, .ciel-sans-animation .ciel-note, .ciel-sans-animation .ciel-traineau, .ciel-sans-animation .ciel-bob, .ciel-sans-animation .ciel-roue, .ciel-sans-animation .ciel-nacelle, .ciel-sans-animation .ciel-luciole, .ciel-sans-animation .ciel-etoile, .ciel-sans-animation .ciel-feu {
	animation: none !important;
}

.ciel-sans-animation .ciel-feu,
.ciel-sans-animation .ciel-note,
.ciel-sans-animation .ciel-luciole { opacity: 1; }
.ciel-sans-animation .ciel-chute,
.ciel-sans-animation .ciel-feuille { display: none; }
.ciel-sans-animation .ciel-traineau { transform: translate(760px, 170px); }

/* ==========================================================================
   9. Page d'accueil — sections
   ========================================================================== */

.nesle-recherche-bloc {
	position: relative;
	z-index: 4;
	margin-top: -54px;
}

.nesle-recherche-carte {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	padding: 22px;
	background: var(--creme);
	border-radius: 26px;
	box-shadow: 0 30px 70px rgba(16, 52, 60, 0.18);
}

.nesle-recherche {
	flex: 1 1 440px;
	display: flex;
	gap: 8px;
}

.nesle-recherche input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 58px;
	padding: 0 20px;
	font-size: 17px;
	border-radius: 16px;
}

.nesle-recherche button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 58px;
	padding: 0 26px;
	border-radius: 16px;
	font-size: 17px;
}

.nesle-recherche button svg {
	width: 20px;
	height: 20px;
}

.nesle-raccourcis {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nesle-raccourcis a {
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--sable);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}

.nesle-raccourcis a:hover,
.nesle-raccourcis a:focus {
	background: var(--petrole);
	color: var(--creme);
}

.nesle-entete {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 32px;
}

.nesle-grand-titre {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(44px, 5vw, 66px);
	line-height: 0.95;
	color: var(--petrole);
}

.nesle-grand-titre em {
	color: var(--abricot-texte);
}

/* Services */
.nesle-services {
	padding-top: 96px;
	padding-bottom: 48px;
}

.nesle-services__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}

.nesle-service {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 46px;
	padding: 26px;
	border-radius: var(--rayon);
	background: var(--sable);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.nesle-service:hover,
.nesle-service:focus {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(16, 52, 60, 0.14);
	color: var(--petrole);
}

.nesle-service__etiquette {
	font-family: var(--serif);
	font-style: italic;
	font-size: 32px;
	line-height: 1;
	color: var(--abricot-texte);
}

.nesle-service__corps {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nesle-service__corps strong {
	font-size: 19px;
	line-height: 1.3;
}

.nesle-service__corps > span {
	font-size: 15px;
	color: var(--texte-doux);
}

.nesle-service--fonce {
	background: var(--petrole);
	color: var(--creme);
}

.nesle-service--fonce:hover,
.nesle-service--fonce:focus {
	color: var(--creme);
	background: var(--petrole-clair);
}

.nesle-service--fonce .nesle-service__etiquette {
	color: var(--abricot-clair);
}

.nesle-service--fonce .nesle-service__corps > span {
	color: #BFD3D6;
}

/* Actualités + colonne pratique */
.nesle-vie {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding-top: 56px;
	padding-bottom: 110px;
}

.nesle-vie__actus {
	flex: 999 1 600px;
	min-width: 0;
}

.nesle-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 24px;
}

.nesle-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nesle-carte__image {
	aspect-ratio: 3 / 2;
	border-radius: var(--rayon);
	overflow: hidden;
	background: var(--sable);
}

.nesle-carte__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.nesle-carte:hover .nesle-carte__image img {
	transform: scale(1.04);
}

.nesle-carte__image--vide {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--texte-doux);
}

.nesle-carte__image--vide svg {
	width: 40px;
	height: 40px;
	opacity: 0.5;
}

.nesle-carte__cat {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--abricot-texte);
}

.nesle-carte__titre {
	margin: 0;
	font-family: var(--sans);
	font-size: 21px;
	line-height: 1.3;
	font-weight: 700;
}

.nesle-carte__titre a {
	text-decoration: none;
	color: var(--petrole);
}

.nesle-carte__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.nesle-carte:hover .nesle-carte__titre a,
.nesle-carte__titre a:focus {
	color: var(--abricot-texte);
}

.nesle-vie__cote {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nesle-mairie {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 30px;
	border-radius: 28px;
	background: var(--petrole);
	color: #BFD3D6;
}

.nesle-mairie__titre {
	margin: 0;
	font-size: 40px;
	line-height: 1;
	color: var(--creme);
}

.nesle-mairie__adresse,
.nesle-mairie__permanence {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

.nesle-mairie__permanence {
	padding-top: 12px;
	border-top: 1px solid rgba(255, 252, 247, 0.16);
}

.nesle-encart-lien {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 22px 26px;
	border-radius: 22px;
	background: var(--sable);
	text-decoration: none;
}

.nesle-encart-lien > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nesle-encart-lien strong {
	font-size: 18px;
}

.nesle-encart-lien > span > span {
	font-size: 15px;
	color: var(--texte-doux);
}

.nesle-encart-lien .nesle-icone {
	color: var(--abricot-texte);
	width: 22px;
	height: 22px;
	transition: transform 0.2s ease;
}

.nesle-encart-lien:hover .nesle-icone,
.nesle-encart-lien:focus .nesle-icone {
	transform: translateX(4px);
}

.nesle-agenda-bloc {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px;
	border-radius: 22px;
	border: 1px solid var(--sable-bord);
}

.nesle-agenda-bloc__titre {
	margin: 0;
	font-size: 30px;
}

.nesle-agenda {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nesle-agenda li {
	display: flex;
	gap: 14px;
	align-items: center;
}

.nesle-agenda__date {
	flex: none;
	width: 58px;
	padding: 8px 0;
	border-radius: 14px;
	background: var(--abricot);
	color: var(--petrole);
	text-align: center;
	font-weight: 800;
	line-height: 1.1;
}

.nesle-agenda__jour {
	display: block;
	font-size: 22px;
}

.nesle-agenda__mois {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
}

.nesle-agenda a {
	font-weight: 700;
	text-decoration: none;
	line-height: 1.35;
}

.nesle-agenda__vide {
	margin: 0;
	color: var(--texte-doux);
	font-size: 15px;
}

.nesle-accueil-contenu {
	padding-bottom: 56px;
}

@media (max-width: 768px) {
	.nesle-ciel {
		height: clamp(560px, 88vh, 700px);
	}

	.nesle-ciel__contenu {
		padding-top: 108px;
	}

	.nesle-ciel__phrase {
		font-size: 18px;
	}

	.nesle-recherche {
		flex-basis: 100%;
	}

	.nesle-recherche button span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.nesle-recherche button {
		padding: 0 18px;
	}

	.nesle-services {
		padding-top: 64px;
	}

	.nesle-services__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.nesle-service {
		padding: 20px;
		gap: 28px;
	}

	.nesle-service__etiquette {
		font-size: 26px;
	}

	.nesle-service__corps strong {
		font-size: 17px;
	}
}

/* ==========================================================================
   10. Bandeau des pages intérieures (ciel + ville)
   ========================================================================== */

.nesle-bandeau {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--c-ciel1) 0%, var(--c-ciel2) 70%, var(--c-ciel3) 100%);
	color: var(--c-texte-ciel);
}

.nesle-bandeau__contenu {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 48px;
	padding-bottom: 130px;
}

.nesle-bandeau__surtitre {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.85;
}

.nesle-bandeau__titre {
	margin: 0;
	max-width: 900px;
	color: inherit;
	font-size: clamp(42px, 6vw, 76px);
	line-height: 0.98;
}

.nesle-bandeau__meta {
	margin: 0;
	max-width: 720px;
	font-size: 17px;
	opacity: 0.9;
}

.nesle-fil {
	font-size: 14px;
	opacity: 0.9;
}

.nesle-fil a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.nesle-fil a:hover {
	text-decoration: underline;
	color: inherit;
}

.nesle-bandeau__ville {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 110px;
	display: block;
}

.nesle-bandeau__silhouette {
	fill: var(--creme);
}

.nesle-bandeau__fenetres {
	fill: #FFCF73;
	opacity: var(--o-etoiles);
	transition: opacity 2s ease;
}

.nesle-has-banner .site-main > .page-header {
	display: none;
}

@media (max-width: 768px) {
	.nesle-bandeau__contenu {
		padding-top: 32px;
		padding-bottom: 96px;
	}

	.nesle-bandeau__ville {
		height: 76px;
	}
}

/* ==========================================================================
   11. Contenu (pages, articles)
   ========================================================================== */

.one-container .site-content {
	padding-top: 40px;
	padding-bottom: 80px;
}

.entry-content {
	font-size: 18px;
}

.entry-content > * + h2,
.entry-content > * + h3 {
	margin-top: 1.5em;
}

.entry-content h2 {
	font-size: 40px;
}

.entry-content h3 {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 23px;
}

.entry-content a:not(.wp-block-button__link):not(.button):not(.nesle-carte-lien):not(.nesle-bouton) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--abricot);
}

.entry-content blockquote {
	border-left: 4px solid var(--abricot);
	background: var(--sable-clair);
	padding: 20px 24px;
	font-style: normal;
	border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}

.entry-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: 16px;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--sable-bord);
	padding: 10px 14px;
	text-align: left;
}

.entry-content th {
	background: var(--sable);
}

.entry-content .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border: 1px solid var(--sable-bord);
	border-radius: var(--rayon-petit);
	background: var(--sable-clair);
}

.entry-content .wp-block-file .wp-block-file__button {
	background: var(--abricot);
	color: var(--petrole);
	border-radius: 999px;
	padding: 10px 18px;
	font-weight: 800;
	text-decoration: none;
}

.featured-image img,
.post-image img {
	border-radius: var(--rayon);
}

.entry-meta,
.entry-meta a {
	color: var(--texte-doux);
	font-size: 15px;
}

/* Cartes-liens (relais de l'ancien bloc [vc_banner], ex. procès-verbaux) */
.nesle-carte-lien {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 12px;
	padding: 18px 22px;
	border-radius: 18px;
	background: var(--sable);
	color: var(--petrole);
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.nesle-carte-lien:hover,
.nesle-carte-lien:focus {
	background: var(--petrole);
	color: var(--creme);
	transform: translateX(4px);
}

.nesle-carte-lien__texte {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nesle-carte-lien__texte strong {
	font-size: 18px;
}

.nesle-carte-lien__texte span {
	font-size: 14px;
	opacity: 0.75;
}

.nesle-carte-lien__icone {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--abricot-texte);
}

.nesle-carte-lien:hover .nesle-carte-lien__icone,
.nesle-carte-lien:focus .nesle-carte-lien__icone {
	color: var(--abricot);
}

.nesle-separateur {
	height: 0;
	margin: 32px 0;
	border: 0;
	border-top: 1px dashed var(--sable-bord);
}

/* Vidéos YouTube (lecteur tarteaucitron, bloqué jusqu'au consentement) */
.nesle-video {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 0 24px;
	padding-top: var(--nesle-video-ratio, 56.25%);
	border-radius: var(--rayon-petit);
	overflow: hidden;
	background: var(--sable);
}

.nesle-video .youtube_player,
.nesle-video .youtube_player iframe,
.nesle-video .tac_activate {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border-radius: var(--rayon-petit);
}

/* Relais WPBakery (si WPBakery est désactivé) */
.nesle-vc-ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 24px;
}

.nesle-vc-colonne {
	flex: 1 1 280px;
	min-width: 0;
}

.nesle-vc-texte > *:last-child {
	margin-bottom: 0;
}

.nesle-vc-figure {
	margin: 0 0 20px;
}

.nesle-vc-figure img {
	border-radius: var(--rayon-petit);
}

.nesle-vc-galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
	margin-bottom: 24px;
}

.nesle-vc-galerie img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.nesle-vc-details {
	margin-bottom: 10px;
	border: 1px solid var(--sable-bord);
	border-radius: var(--rayon-petit);
	background: #ffffff;
}

.nesle-vc-details summary {
	padding: 16px 20px;
	font-weight: 700;
	cursor: pointer;
}

.nesle-vc-details > div {
	padding: 0 20px 16px;
}

/* Actualités : liste en cartes */
.blog .site-main,
.archive .site-main,
.search-results .site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 28px;
}

.blog .site-main > *:not(article),
.archive .site-main > *:not(article),
.search-results .site-main > *:not(article) {
	grid-column: 1 / -1;
}

.blog .site-main > article,
.archive .site-main > article,
.search-results .site-main > article {
	margin: 0;
	border-radius: var(--rayon);
	overflow: hidden;
	background: var(--sable-clair);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.blog .site-main > article:hover,
.archive .site-main > article:hover,
.search-results .site-main > article:hover {
	box-shadow: 0 18px 40px rgba(16, 52, 60, 0.12);
	transform: translateY(-3px);
}

.blog .site-main > article .inside-article,
.archive .site-main > article .inside-article,
.search-results .site-main > article .inside-article {
	display: flex;
	flex-direction: column;
	padding: 0 0 22px;
	height: 100%;
	background: transparent;
}

.blog .site-main > article .post-image,
.archive .site-main > article .post-image,
.search-results .site-main > article .post-image {
	order: -1;
	margin: 0 0 18px;
}

.blog .site-main > article .post-image img,
.archive .site-main > article .post-image img,
.search-results .site-main > article .post-image img {
	border-radius: 0;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.blog .site-main > article .entry-header,
.blog .site-main > article .entry-summary,
.blog .site-main > article footer,
.archive .site-main > article .entry-header,
.archive .site-main > article .entry-summary,
.archive .site-main > article footer,
.search-results .site-main > article .entry-header,
.search-results .site-main > article .entry-summary,
.search-results .site-main > article footer {
	padding: 0 22px;
}

.blog .site-main > article .entry-title,
.archive .site-main > article .entry-title,
.search-results .site-main > article .entry-title {
	font-family: var(--sans);
	font-size: 21px;
	line-height: 1.3;
	font-weight: 700;
}

.blog .site-main > article .entry-title a,
.archive .site-main > article .entry-title a,
.search-results .site-main > article .entry-title a {
	color: var(--petrole);
	text-decoration: none;
}

.blog .site-main > article .entry-title a:hover,
.archive .site-main > article .entry-title a:hover,
.search-results .site-main > article .entry-title a:hover {
	color: var(--abricot-texte);
}

.blog .site-main > article .entry-summary,
.archive .site-main > article .entry-summary,
.search-results .site-main > article .entry-summary {
	font-size: 16px;
	color: var(--texte-doux);
}

.paging-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.paging-navigation .nav-links > * {
	display: inline-flex;
	min-width: 46px;
	min-height: 46px;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--sable);
	text-decoration: none;
	font-weight: 700;
}

.paging-navigation .nav-links .current {
	background: var(--petrole);
	color: var(--creme);
}

/* Barre latérale éventuelle */
.sidebar .widget {
	background: var(--sable-clair);
	border-radius: var(--rayon);
}

.sidebar .widget-title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 28px;
}

/* Formulaires (Contact Form 7, DHVC) */
.wpcf7 input[type="submit"],
.dhvc-form-submit,
.dhvc-form-container button[type="submit"] {
	background: var(--abricot) !important;
	color: var(--petrole) !important;
	border-radius: 999px !important;
	font-weight: 800 !important;
	border: 0 !important;
}

/* Annuaire des professionnels (Business Directory Plugin) */
.wpbdp-listing {
	border-radius: var(--rayon);
	padding: 22px;
	margin-bottom: 16px;
	background: var(--sable-clair);
	border: 0;
}

.wpbdp-listing .listing-title a,
.wpbdp-listing .listing-title h3 a {
	color: var(--petrole);
	font-weight: 800;
	text-decoration: none;
}

.wpbdp-main-box,
#wpbdp-categories {
	background: var(--sable-clair);
	border-radius: var(--rayon);
	padding: 22px;
}

.wpbdp-button,
.wpbdp-submit,
.wpbdp-main-links .button {
	background: var(--petrole) !important;
	color: var(--creme) !important;
	border-radius: 999px !important;
	border: 0 !important;
}

/* The Events Calendar */
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn {
	background-color: var(--petrole) !important;
	border-radius: 999px !important;
}

.tribe-events .tribe-events-calendar-list__event-date-tag-datetime {
	color: var(--abricot-texte);
}

/* ==========================================================================
   12. Pied de page « Nesle, la nuit tombe… »
   ========================================================================== */

.site-footer {
	background: transparent;
}

.nesle-pied {
	position: relative;
	overflow: hidden;
	color: var(--texte-nuit);
	background: linear-gradient(180deg, #0E2A3A 0%, #0D2136 45%, #0A1530 100%);
	font-size: 16px;
	padding-bottom: 0;
}

.nesle-pied__ville {
	display: block;
	width: 100%;
	height: 150px;
	background: var(--creme);
}

.nesle-pied__silhouette {
	fill: #0E2A3A;
}

.nesle-pied__fenetres {
	fill: #FFCF73;
}

.nesle-pied__ciel {
	position: absolute;
	left: 0;
	top: 150px;
	width: 100%;
	height: calc(100% - 150px);
	pointer-events: none;
}

.nesle-pied__etoiles {
	fill: #FFF6DD;
}

.ciel-fx-pied {
	display: none;
}

.fx-lucioles .ciel-fx-lucioles,
.fx-neige-pied .ciel-fx-neige-pied {
	display: inline;
}

.nesle-pied__lune {
	position: absolute;
	right: 22px;
	top: 176px;
	width: 64px;
	height: 64px;
	fill: #F4EBD0;
	filter: drop-shadow(0 0 18px rgba(244, 235, 208, 0.55));
}

.nesle-pied__haut {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
	padding-top: 40px;
}

.nesle-pied__marque {
	flex: 1 1 420px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.nesle-pied__accroche {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--abricot-clair);
}

.nesle-pied__nom {
	font-family: var(--serif);
	font-size: clamp(96px, 11vw, 148px);
	line-height: 0.8;
	letter-spacing: -0.02em;
	color: var(--creme);
}

.nesle-pied__nom em {
	font-style: normal;
	color: var(--abricot);
}

.nesle-pied__texte {
	margin: 0;
	max-width: 420px;
	font-size: 19px;
	line-height: 1.6;
	color: #BFD3D6;
}

.nesle-pied__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.nesle-pied__carte {
	flex: 1 1 340px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border-radius: 28px;
	background: rgba(255, 252, 247, 0.08);
	border: 1px solid rgba(255, 252, 247, 0.16);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	line-height: 1.6;
}

.nesle-pied__carte-titre {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 36px;
	line-height: 1;
	color: var(--creme);
}

.nesle-pied__liens {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	padding-top: 56px;
}

.nesle-pied__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nesle-pied__titre {
	margin: 0 0 4px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 28px;
	color: var(--creme);
}

.nesle-pied__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nesle-pied a {
	color: var(--texte-nuit);
	text-decoration: none;
}

.nesle-pied a:hover,
.nesle-pied a:focus {
	color: #ffffff;
	text-decoration: underline;
}

.nesle-pied a.nesle-pilule--abricot,
.nesle-pied a.nesle-pilule--abricot:hover {
	color: var(--petrole);
	text-decoration: none;
}

.nesle-pied a.nesle-pilule--verre {
	color: var(--creme);
	text-decoration: none;
}

.nesle-pied .nesle-pied__site {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-radius: var(--rayon-petit);
	background: rgba(255, 252, 247, 0.07);
	color: var(--creme);
	font-weight: 600;
}

.nesle-pied .nesle-pied__site:hover,
.nesle-pied .nesle-pied__site:focus {
	background: rgba(255, 252, 247, 0.14);
	text-decoration: none;
}

.nesle-pied__site .nesle-icone {
	color: var(--abricot-clair);
}

.nesle-pied__partenaires {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	padding-top: 48px;
}

.nesle-pied__petit-titre {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8FB0B6;
}

.nesle-pied__partenaires a {
	font-weight: 600;
}

.nesle-pied__sep {
	color: #4E6A78;
}

.nesle-pied__bas {
	position: relative;
	margin-top: 64px;
	padding: 20px 0 26px;
	background: rgba(5, 10, 28, 0.55);
	font-size: 14px;
	color: #8FB0B6;
}

.nesle-pied__bas .nesle-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
}

.nesle-pied__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
}

.nesle-pied__bas a,
.nesle-pied__bas button {
	color: var(--texte-nuit);
	text-decoration: underline;
}

.nesle-pied__bas button {
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

.nesle-pied__bas button:hover,
.nesle-pied__bas button:focus {
	background: transparent;
	color: #ffffff;
}

.nesle-pied .nesle-pied__credit a {
	color: var(--abricot-clair);
	font-weight: 700;
	text-decoration: none;
}

.nesle-pied .nesle-pied__credit a:hover,
.nesle-pied .nesle-pied__credit a:focus {
	color: #ffffff;
	text-decoration: underline;
}

.nesle-pied .nesle-pied__haut-lien {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--abricot-clair);
	font-weight: 700;
}

/* Barre d'actions mobile */
.nesle-barre-mobile {
	display: none;
}

@media (max-width: 768px) {
	.nesle-pied__ville {
		height: 90px;
	}

	.nesle-pied__ciel {
		top: 90px;
		height: calc(100% - 90px);
	}

	.nesle-pied__lune {
		top: 110px;
		width: 44px;
		height: 44px;
	}

	.nesle-barre-mobile {
		display: flex;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: var(--petrole);
		box-shadow: 0 -6px 20px rgba(16, 52, 60, 0.25);
	}

	.nesle-barre-mobile a {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		border-radius: 999px;
		background: var(--creme);
		color: var(--petrole);
		text-decoration: none;
		font-weight: 800;
		font-size: 15px;
	}

	.nesle-barre-mobile a.nesle-barre-mobile__cni {
		background: var(--abricot);
		color: var(--petrole);
	}

	body.nesle-has-barre-mobile {
		padding-bottom: 72px;
	}
}

/* ==========================================================================
   13. Bandeau vigilance (emplacement)
   ========================================================================== */

.nesle-vigilance-slot:empty {
	display: none;
}

.nesle-front .nesle-vigilance-slot {
	position: relative;
	z-index: 60;
}

/* ==========================================================================
   14. Impression
   ========================================================================== */

@media print {
	.main-navigation,
	.nesle-barre-mobile,
	.nesle-pied,
	.ciel-fx,
	#tarteaucitronRoot {
		display: none !important;
	}

	.nesle-bandeau,
	.nesle-ciel {
		background: none !important;
		color: #000 !important;
		height: auto;
	}

	.nesle-bandeau__ville,
	.ciel-base {
		display: none !important;
	}
}

/* Mouvement réduit (interface) */
@media (prefers-reduced-motion: reduce) {
	.nesle-service,
	.nesle-carte__image img,
	.nesle-pilule,
	.nesle-carte-lien {
		transition: none !important;
	}
}