/*
Theme Name: Ambition Épône
Theme URI: https://example.com/ambition-epone
Author: Ambition Épône
Author URI: https://example.com
Description: Thème WordPress classique moderne pour une campagne municipale, avec header sticky, hero split, bandeau de statistiques flottant et grille de piliers. Entièrement personnalisable depuis le Customizer.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ambition-epone
Tags: custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, accessibility-ready

Ambition Épône WordPress Theme, (C) 2024-2026 Ambition Épône.
Ambition Épône is distributed under the terms of the GNU General Public License v2 (or later).
*/

/* ==========================================================================
   1. CSS variables (overridden inline by inc/customizer.php)
   ========================================================================== */
:root {
	--color-primary: #1B5F6F;
	--color-primary-dark: #123f4a;
	--color-secondary: #B86A4C;
	--color-text: #1F2937;
	--color-bg-soft: #F8FAFB;
	--color-white: #ffffff;
	--color-border: #E5EAEC;
	--hero-overlay-opacity: 0.55;

	--font-heading: 'Playfair Display', Georgia, serif;
	--font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--container-width: 1200px;
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--shadow-sm: 0 2px 8px rgba(17, 34, 40, 0.06);
	--shadow-md: 0 12px 32px rgba(17, 34, 40, 0.12);
	--shadow-lg: 0 24px 60px rgba(17, 34, 40, 0.18);
	--transition: 0.25s ease;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-white);
}

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

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition);
}

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

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	line-height: 1.2;
	margin: 0 0 0.5em;
	color: var(--color-text);
}

p {
	margin: 0 0 1em;
}

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

button {
	font-family: inherit;
}

/* Focus visibility for keyboard users (WCAG). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--color-secondary);
	outline-offset: 2px;
}

/* Skip link. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
	left: 0;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 24px;
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-2px);
}

.btn-primary {
	background-color: var(--color-secondary);
	color: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: var(--color-primary);
	color: var(--color-white);
	box-shadow: var(--shadow-md);
}

.btn-secondary {
	background-color: var(--color-primary);
	color: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}

.btn-outline {
	background-color: transparent;
	color: currentColor;
	border-color: currentColor;
}

.btn-outline:hover,
.btn-outline:focus-visible {
	background-color: var(--color-white);
	color: var(--color-primary);
}

/* ==========================================================================
   4. Topbar
   ========================================================================== */
.topbar {
	background-color: var(--color-primary-dark);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.85rem;
}

.topbar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 8px;
	flex-wrap: wrap;
}

.topbar-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.topbar-badge {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-secondary);
	color: var(--color-white);
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.topbar-right a {
	color: rgba(255, 255, 255, 0.9);
}

.topbar-right a:hover,
.topbar-right a:focus {
	color: var(--color-white);
	text-decoration: underline;
}

.topbar-socials {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.topbar-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	transition: background-color var(--transition), color var(--transition);
}

.topbar-social:hover,
.topbar-social:focus-visible {
	background-color: var(--color-secondary);
	color: var(--color-white);
	text-decoration: none;
}

/* ==========================================================================
   5. Header / navigation
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	transition: box-shadow var(--transition);
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 14px;
}

.site-branding {
	display: flex;
	align-items: center;
}

.site-branding a {
	display: flex;
	align-items: center;
	color: inherit;
}

.custom-logo-link img {
	max-height: 48px;
	width: auto;
}

.site-title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
	color: var(--color-primary);
}

.site-title .accent {
	color: var(--color-secondary);
	font-style: italic;
}

.main-navigation {
	display: flex;
	align-items: center;
	gap: 28px;
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: 28px;
}

.primary-menu a {
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.95rem;
}

.primary-menu a:hover,
.primary-menu a:focus {
	color: var(--color-primary);
}

.primary-menu .current-menu-item > a {
	color: var(--color-primary);
}

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.menu-toggle .bar {
	position: relative;
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--color-text);
}

.menu-toggle .bar::before,
.menu-toggle .bar::after {
	content: '';
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background-color: var(--color-text);
}

.menu-toggle .bar::before {
	top: -6px;
}

.menu-toggle .bar::after {
	top: 6px;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(480px, 65vh, 720px);
}

.hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--color-primary);
	background-size: cover;
	background-position: center;
}

.hero-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	opacity: var(--hero-overlay-opacity);
}

.hero-inner {
	position: relative;
	z-index: 1;
	padding-block: 96px;
}

.hero-content {
	max-width: 760px;
	margin-inline: auto;
	color: var(--color-white);
	text-align: center;
}

.hero-tagline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--color-white);
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 20px;
}

.hero-title {
	font-size: clamp(2.4rem, 5vw, 4rem);
	color: var(--color-white);
	margin-bottom: 20px;
}

.hero-title .accent {
	font-style: italic;
	color: var(--color-white);
	font-weight: 400;
}

.hero-subtitle {
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.9);
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: 32px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.hero-actions .btn-outline {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.6);
}

.hero-actions .btn-outline:hover,
.hero-actions .btn-outline:focus-visible {
	background-color: var(--color-white);
	color: var(--color-primary);
	border-color: var(--color-white);
}

.hero-message {
	margin-top: 28px;
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.92);
	max-width: 60ch;
	margin-inline: auto;
}

/* ==========================================================================
   6bis. Carte témoignage — réservée pour une future section "Edito"
   ========================================================================== */
.hero-quote-card {
	position: relative;
	z-index: 2;
	margin-top: -80px;
	margin-inline: 24px;
	background-color: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: 24px;
}

.hero-quote-title {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-secondary);
	margin-bottom: 10px;
}

.hero-quote-text {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--color-text);
	margin-bottom: 16px;
}

.hero-quote-author-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hero-quote-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-white);
	font-weight: 700;
	font-size: 0.9rem;
}

.hero-quote-author {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--color-text);
}

.hero-quote-role {
	font-size: 0.8rem;
	color: #6B7280;
}

/* ==========================================================================
   7. Highlights band (floats over the bottom of the hero)
   ========================================================================== */
.highlights {
	position: relative;
	z-index: 3;
}

.highlights-inner {
	margin-top: -45px;
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	text-align: center;
}

.highlight-item {
	padding: 32px 20px;
	border-right: 1px solid var(--color-border);
}

.highlight-item:last-child {
	border-right: none;
}

.highlight-number {
	display: block;
	font-family: var(--font-heading);
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1;
	margin-bottom: 8px;
}

.highlight-label {
	font-size: 0.9rem;
	color: #4B5563;
	font-weight: 600;
}

/* ==========================================================================
   8. Pillars / priorities
   ========================================================================== */
.pillars {
	padding-block: 120px 96px;
	background-color: var(--color-bg-soft);
}

.pillars-intro {
	max-width: 640px;
	margin: 0 auto 56px;
	text-align: center;
}

.pillars-intro h2 {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	color: var(--color-primary);
}

.pillars-intro p {
	font-size: 1.05rem;
	color: #4B5563;
}

.pillars-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 28px;
}

.pillar-card-image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--radius-sm);
	margin-bottom: 20px;
}

.pillar-desc {
	color: #4B5563;
	margin-bottom: 18px;
}

.pillar-desc p:last-child {
	margin-bottom: 0;
}

.pillar-card {
	background-color: var(--color-white);
	border-radius: var(--radius-md);
	padding: 36px 28px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.pillar-card:hover,
.pillar-card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-secondary);
}

.pillar-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: rgba(27, 95, 111, 0.1);
	font-size: 1.8rem;
	margin-bottom: 20px;
}

.pillar-card h3 {
	font-size: 1.3rem;
	color: var(--color-text);
}

.pillar-card p {
	color: #4B5563;
	margin-bottom: 18px;
}

.pillar-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--color-secondary);
}

.pillar-link::after {
	content: '\2192';
	transition: transform var(--transition);
}

.pillar-link:hover::after,
.pillar-link:focus::after {
	transform: translateX(4px);
}

/* ==========================================================================
   9. Generic content (index/page/404 fallback templates)
   ========================================================================== */
.site-main {
	padding-block: 64px;
}

.entry {
	max-width: 760px;
	margin-inline: auto;
}

.entry-title {
	color: var(--color-primary);
}

.entry-meta {
	color: #6B7280;
	font-size: 0.9rem;
	margin-bottom: 24px;
}

/* ==========================================================================
   9bis. Équipe (grille de photos insérée dans le contenu d'une page)
   ========================================================================== */
.team-lead {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-bottom: 40px;
	padding: 24px;
	background-color: var(--color-bg-soft);
	border-radius: var(--radius-md);
}

.team-lead img {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--shadow-sm);
}

.team-lead-copy h3 {
	color: var(--color-primary);
	margin-bottom: 4px;
}

.team-lead-copy p {
	color: var(--color-secondary);
	font-weight: 700;
	margin-bottom: 0;
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.team-grid figure {
	margin: 0;
	text-align: center;
}

.team-grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	margin-bottom: 10px;
}

.team-grid figcaption {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--color-text);
}

@media (max-width: 782px) {
	.team-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.team-lead {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   9ter. Pages éditoriales — Projet / Équipe (élus & bureau) / Vie citoyenne /
   Association / Boîte à idées
   ========================================================================== */
.section-subheading {
	font-size: 1.2rem;
	color: var(--color-primary);
	margin: 40px 0 16px;
}

.pillars-grid-5 {
	grid-template-columns: repeat(3, 1fr);
}

.dot-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}

.dot-list li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 10px;
	color: #4B5563;
}

.dot-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--color-secondary);
}

.team-section {
	padding-block: 96px;
}

.team-section-alt {
	background-color: var(--color-bg-soft);
}

.team-section .container,
.association-section .container {
	max-width: 900px;
}

.team-intro {
	max-width: 70ch;
	color: #4B5563;
	margin-bottom: 32px;
}

.team-columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.team-contact {
	margin-top: 40px;
}

.association-section {
	padding-block: 96px;
}

.association-docs {
	list-style: none;
	padding: 0;
	margin: 16px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.association-docs li a {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	color: var(--color-primary);
	font-weight: 700;
}

.association-docs li a:hover,
.association-docs li a:focus-visible {
	background-color: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

.idea-box {
	background-color: var(--color-bg-soft);
	padding-block: 80px;
}

.idea-box-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.idea-box-copy {
	max-width: 420px;
}

.idea-box-copy h2 {
	color: var(--color-primary);
	margin-bottom: 8px;
}

.idea-box-copy p {
	color: #4B5563;
}

.idea-box-form-wrap {
	flex: 1 1 380px;
	max-width: 480px;
}

.idea-box-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.idea-box-form label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-text);
}

.idea-box-input,
.idea-box-textarea {
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	font-family: inherit;
	font-size: 0.95rem;
	background-color: var(--color-white);
}

.idea-box-textarea {
	resize: vertical;
}

.idea-box-input:focus-visible,
.idea-box-textarea:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 2px;
}

@media (max-width: 782px) {
	.pillars-grid-5 {
		grid-template-columns: repeat(2, 1fr);
	}

	.team-columns {
		grid-template-columns: 1fr;
	}
}

.error-404 {
	text-align: center;
	padding-block: 96px;
}

.error-404 h1 {
	font-size: 6rem;
	color: var(--color-primary);
	margin-bottom: 0;
}

/* ==========================================================================
   10. Actualités / news
   ========================================================================== */
.news {
	padding-block: 96px;
}

.news-intro {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.news-intro h2 {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	color: var(--color-primary);
}

.news-intro p {
	color: #4B5563;
	max-width: 60ch;
	margin-bottom: 0;
}

.news-link {
	font-weight: 700;
	color: var(--color-secondary);
	white-space: nowrap;
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.news-card {
	background-color: var(--color-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: transform var(--transition), box-shadow var(--transition);
}

.news-card:hover,
.news-card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
}

.news-card-link {
	color: inherit;
	display: block;
}

.news-card-media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.news-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card-body {
	padding: 24px;
}

.news-card-date {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-secondary);
	margin-bottom: 8px;
}

.news-card-title {
	font-size: 1.15rem;
	color: var(--color-text);
	margin-bottom: 10px;
}

.news-card-excerpt {
	color: #4B5563;
	font-size: 0.95rem;
	margin-bottom: 0;
}

/* ==========================================================================
   11. Appel à l'action final
   ========================================================================== */
.cta-final {
	background-color: var(--color-primary);
	padding-block: 72px;
}

.cta-final-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.cta-final-copy h2 {
	color: var(--color-white);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: 8px;
}

.cta-final-copy p {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 0;
	max-width: 60ch;
}

/* ==========================================================================
   12. Newsletter
   ========================================================================== */
.newsletter {
	background-color: #10262c;
	padding-block: 64px;
}

.newsletter-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.newsletter-copy {
	max-width: 460px;
}

.newsletter-copy h2 {
	color: var(--color-white);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin-bottom: 8px;
}

.newsletter-copy p {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 0;
}

.newsletter-form-wrap {
	flex: 1 1 360px;
	max-width: 460px;
}

.newsletter-form {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.newsletter-input {
	flex: 1 1 220px;
	padding: 14px 18px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--color-white);
	font-family: inherit;
	font-size: 0.95rem;
}

.newsletter-input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.newsletter-input:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 2px;
}

.newsletter-submit {
	border: none;
}

/* Honeypot field: visually hidden but still reachable by simple bots that ignore CSS. */
.newsletter-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.newsletter-message {
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 16px;
}

.newsletter-message.is-success {
	background-color: rgba(76, 175, 80, 0.15);
	color: #a5d6a7;
}

.newsletter-message.is-error {
	background-color: rgba(244, 67, 54, 0.15);
	color: #ef9a9a;
}

.newsletter-disclaimer {
	margin-top: 12px;
	margin-bottom: 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.site-footer {
	background-color: #10262c;
	color: rgba(255, 255, 255, 0.75);
}

.footer-columns {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 40px;
	padding-block: 64px;
}

.footer-columns h3 {
	color: var(--color-white);
	font-size: 1.1rem;
	margin-bottom: 18px;
}

.footer-col1 p {
	color: rgba(255, 255, 255, 0.7);
}

.footer-menu li {
	margin-bottom: 10px;
}

.footer-menu a {
	color: rgba(255, 255, 255, 0.75);
}

.footer-menu a:hover,
.footer-menu a:focus {
	color: var(--color-white);
}

.footer-col3 p {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 20px;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 20px;
	flex-wrap: wrap;
	font-size: 0.85rem;
}

.footer-legal-menu {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.footer-legal-menu a {
	color: rgba(255, 255, 255, 0.6);
}

.footer-legal-menu a:hover,
.footer-legal-menu a:focus {
	color: var(--color-white);
}

/* ==========================================================================
   14bis. Blocs Gutenberg / Kadence — patterns éditoriaux (pages 100% blocs)
   ========================================================================== */
.ae-hero {
	padding-block: 64px;
	min-height: unset !important;
}

.ae-hero-tagline {
	display: inline-flex;
	color: var(--color-white);
	background-color: rgba(255, 255, 255, 0.12);
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-inline: auto;
}

.ae-card-grid {
	gap: 28px;
}

.ae-card {
	background-color: var(--color-white);
	border-radius: var(--radius-md);
	padding: 32px 24px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
}

.ae-cta {
	padding: 64px 32px;
	border-radius: var(--radius-md);
	margin-block: 40px;
}

.ae-doc-links .wp-block-button__link {
	border-radius: 999px;
}

.front-page-content {
	max-width: 800px;
	margin-inline: auto;
	padding-block: 24px;
}

.front-page-content .alignwide {
	max-width: 1100px;
	margin-inline: auto;
}

.front-page-content .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   14ter. Classes utilitaires de couleur — filet de sécurité pour la palette
   éditeur (editor-color-palette) sur un thème classique sans theme.json : le
   CSS global généré par WordPress n'étant pas fiable ici, on fixe les vraies
   valeurs directement.
   ========================================================================== */
.has-primary-color {
	color: #1B5F6F !important;
}
.has-secondary-color {
	color: #B86A4C !important;
}
.has-text-color {
	color: #1F2937 !important;
}
.has-white-color {
	color: #FFFFFF !important;
}
.has-primary-background-color {
	background-color: #1B5F6F !important;
}
.has-secondary-background-color {
	background-color: #B86A4C !important;
}
.has-text-background-color {
	background-color: #1F2937 !important;
}
.has-background-background-color {
	background-color: #F8FAFB !important;
}
.has-white-background-color {
	background-color: #FFFFFF !important;
}

/* ==========================================================================
   14quater. Harmonisation images / vignettes / carrousels (blocs natifs +
   Kadence Blocks) — s'applique automatiquement à tout ce que les rédacteurs
   insèrent, sans réglage manuel.
   ========================================================================== */
.ae-photo img,
.ae-vignette-img img,
.wp-block-image img,
.wp-block-kadence-image img,
.wp-block-kadence-advancedgallery img,
.wp-block-kadence-infobox img {
	border-radius: var(--radius-md);
}

.ae-photo figcaption {
	color: #6B7280;
	font-size: 0.9rem;
	margin-top: 8px;
}

.ae-vignette {
	text-align: center;
}

.ae-vignette-img {
	margin: 0 0 16px;
}

.ae-vignette-img img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* Kadence Advanced Gallery in "Carousel" mode: align arrows/dots with the
   theme's brand color instead of Kadence's own default blue. */
.wp-block-kadence-advancedgallery .slick-dots li.slick-active button:before,
.wp-block-kadence-advancedgallery .slick-prev,
.wp-block-kadence-advancedgallery .slick-next {
	color: var(--color-primary) !important;
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.hero-inner {
		padding-block: 64px;
	}

	.highlights-inner,
	.pillars-grid,
	.news-grid {
		grid-template-columns: 1fr;
	}

	.highlight-item {
		border-right: none;
		border-bottom: 1px solid var(--color-border);
	}

	.highlight-item:last-child {
		border-bottom: none;
	}

	.footer-columns {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.cta-final-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.newsletter-inner {
		flex-direction: column;
	}

	.newsletter-form-wrap {
		max-width: none;
		width: 100%;
	}
}

@media (max-width: 782px) {
	.topbar-right .topbar-phone {
		display: none;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--color-white);
		border-bottom: 1px solid var(--color-border);
		box-shadow: var(--shadow-md);
		flex-direction: column;
		align-items: stretch;
		display: none;
	}

	.main-navigation.is-open {
		display: flex;
	}

	.primary-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 8px 24px 20px;
	}

	.primary-menu li {
		width: 100%;
		border-bottom: 1px solid var(--color-border);
	}

	.primary-menu li:last-child {
		border-bottom: none;
	}

	.primary-menu a {
		display: block;
		padding: 14px 0;
	}

	.hero-quote-card {
		margin-inline: 0;
	}
}