/* ==========================================================================
   Matari'i.pf — Main Stylesheet
   Utilise les custom properties de design-tokens.css
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text-light);
	background: linear-gradient(180deg, var(--color-gradient-start), var(--color-gradient-end));
	background-attachment: fixed;
	min-height: 100vh;
	transition: var(--transition-slow);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: var(--font-features);
}

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

/* Custom scrollbar — discret, teinté accent saison */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
	transition: background var(--dur-base) var(--ease-out-quad);
}

*::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.22);
	background-clip: padding-box;
}

/* ---------- Utilitaires ---------- */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-px);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
	font-family: var(--font-brand);
	font-weight: normal;
	line-height: 1.2;
	font-feature-settings: "kern", "liga", "calt";
	letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-h1); line-height: var(--lh-display); }
h2 { font-size: var(--text-h2); line-height: var(--lh-display); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--text-h4); letter-spacing: var(--tracking-snug); }

p, li, dd {
	letter-spacing: 0.005em;
}

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out-quad);
}

a:hover,
a:focus-visible {
	color: var(--color-accent-warm);
}

/* Focus visible — ring accent saison, offset généreux */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Selection teintée saison */
::selection {
	background: var(--color-accent);
	color: var(--color-gradient-start);
}
.section--light ::selection {
	background: var(--color-accent-on-light);
	color: #FFFFFF;
}

/* ---------- Boutons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-small);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: var(--transition);
	border: 2px solid transparent;
	text-decoration: none;
}

.btn--primary {
	background: var(--color-accent);
	color: var(--color-gradient-start);
	border-color: var(--color-accent);
	box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
	background: var(--color-accent-warm);
	border-color: var(--color-accent-warm);
	color: var(--color-text-light);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.btn--primary:active {
	transform: translateY(0);
	box-shadow: var(--shadow-xs);
	transition-duration: var(--dur-instant);
}

.btn--outline {
	background: transparent;
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.btn--outline:hover {
	background: var(--color-accent);
	color: var(--color-gradient-start);
	transform: translateY(-1px);
}

.btn--outline:active {
	transform: translateY(0);
	transition-duration: var(--dur-instant);
}

.btn--small {
	padding: 0.5rem 1rem;
	font-size: var(--text-caption);
}

/* ---------- Header ---------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	background: var(--color-overlay-dark);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-header__container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
}

.site-header__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.site-header__logo-img {
	height: 45px;
	width: auto;
}

@media (max-width: 767px) {
	.site-header__logo-img {
		height: 36px;
	}
}

.site-header__title {
	font-family: var(--font-brand);
	font-size: 1.75rem;
	color: var(--color-logo-text);
}

/* Menu toggle mobile */
.site-header__menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	position: relative;
	z-index: 10001;
}

.hamburger,
.hamburger::before,
.hamburger::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-text-light);
	transition: var(--transition);
}

.hamburger {
	position: relative;
}

.hamburger::before,
.hamburger::after {
	content: '';
	position: absolute;
	left: 0;
}

.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }

/* Navigation */
.site-nav {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.site-nav__list {
	display: flex;
	list-style: none;
	gap: 1.5rem;
}

.site-nav__list a {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.5rem 0;
	position: relative;
}

.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur-base) var(--ease-out-cubic);
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item a {
	color: var(--color-accent);
}

.site-nav__list a:hover::after,
.site-nav__list .current-menu-item a::after {
	transform: scaleX(1);
}

/* Language switcher — uppercase FR / EN avec separator */
.lang-switcher {
	display: flex;
	list-style: none;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	align-items: center;
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.lang-switcher li {
	position: relative;
}

.lang-switcher li + li::before {
	content: "";
	position: absolute;
	left: -0.5rem;
	top: 50%;
	width: 1px;
	height: 10px;
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-50%);
}

.lang-switcher a {
	color: var(--color-text-muted);
	font-weight: 600;
	padding: 0.25rem 0.15rem;
	transition: color var(--dur-fast) var(--ease-out-quad);
	text-decoration: none;
}

.lang-switcher a:hover {
	color: var(--color-accent);
}

.lang-switcher .current-lang a,
.lang-switcher li[class*="current"] a {
	color: var(--color-accent);
}

/* Season toggle */
.season-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-pill);
	padding: 0.35rem 0.75rem;
	cursor: pointer;
	font-size: var(--text-caption);
	color: var(--color-text-muted);
	transition: border-color var(--dur-base) var(--ease-out-quad),
	            background var(--dur-base) var(--ease-out-quad);
}

.season-toggle:hover {
	border-color: var(--color-accent);
	background: rgba(255, 255, 255, 0.12);
}

.season-toggle__switch {
	width: 32px;
	height: 16px;
	background: var(--color-surface);
	border-radius: var(--radius-pill);
	position: relative;
	transition: background var(--dur-slow) var(--ease-out-cubic);
}

.season-toggle__switch::after {
	content: '';
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-accent);
	position: absolute;
	top: 2px;
	left: 2px;
	transition: transform var(--dur-slow) var(--ease-out-expo),
	            background var(--dur-slow) var(--ease-out-cubic);
}

.season-toggle[data-season="raro"] .season-toggle__switch::after {
	transform: translateX(16px);
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	height: 100vh;
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.hero__background {
	position: absolute;
	inset: 0;
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: opacity 1.2s ease;
	background: var(--color-bg-deep);
}

/* Mobile Ni'a : ambient CSS animation sur poster statique
   (alternative a la video Kling qui ne respecte pas "fish frozen") */
.hero__video--static-ambient {
	animation: hero-ken-burns 24s var(--ease-in-out-quad) infinite alternate;
}

.hero__ambient-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background:
		radial-gradient(circle at 30% 20%, rgba(135, 255, 255, 0.12) 0%, transparent 45%),
		radial-gradient(circle at 70% 60%, rgba(200, 255, 0, 0.06) 0%, transparent 55%),
		radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
	animation: hero-shimmer 8s ease-in-out infinite alternate;
	mix-blend-mode: screen;
}

@keyframes hero-ken-burns {
	0%   { transform: scale(1.00) translateY(0); }
	100% { transform: scale(1.04) translateY(-1%); }
}

@keyframes hero-shimmer {
	0%   { opacity: 0.5; transform: translate(0, 0); }
	50%  { opacity: 0.9; transform: translate(2%, -1.5%); }
	100% { opacity: 0.6; transform: translate(-2%, 1.5%); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__video--static-ambient { animation: none; }
	.hero__ambient-overlay { animation: none; }
}

.hero__content {
	position: absolute;
	bottom: 10%;
	left: 0;
	right: 0;
	z-index: 2;
	text-align: center;
	padding: var(--container-px);
}

.hero__title {
	font-size: clamp(3rem, 10vw, 7rem);
	color: var(--color-logo-text);
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
	margin-bottom: 0.5rem;
}

.hero__subtitle {
	font-family: var(--font-signature);
	font-size: clamp(1.2rem, 3vw, 2rem);
	color: var(--color-accent);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ---------- Sections ---------- */
.section {
	padding: var(--section-py) 0;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--dur-slower) var(--ease-out-expo),
	            transform var(--dur-slower) var(--ease-out-expo);
	position: relative;
}

.section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   BLOCS ALTERNÉS CLAIR / SOMBRE — retour Romeo 13/04
   .section par défaut = sombre (couleur saison, hérite du body)
   .section--light   = bloc clair blanc cassé, texte sombre
   ========================================================================== */

.section--light {
	background: var(--color-bg-light);
	color: var(--color-text-on-light);
}

/* Titres sur fond clair : accent assombri (teal profond Ni'a / terracotta Raro) */
.section--light .section__title,
.section--light h1,
.section--light h2,
.section--light h3,
.section--light h4 {
	color: var(--color-accent-on-light);
}

.section--light p,
.section--light li {
	color: var(--color-text-on-light);
}

.section--light .section__subtitle,
.section--light .presentation__text,
.section--light [class*="__intro"],
.section--light [class*="__meta"] {
	color: var(--color-text-muted-on-light);
}

/* Breadcrumb et autres liens secondaires sur fond clair */
.section--light .breadcrumb,
.section--light .breadcrumb a,
.section--light .breadcrumb span {
	color: var(--color-text-muted-on-light);
}

.section--light .breadcrumb a:hover {
	color: var(--color-accent-on-light);
}

/* Séparation nette entre blocs sombres et clairs */
.section--light + .section:not(.section--light),
.section:not(.section--light):not(.hero) + .section--light {
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04);
}

/* Cards : adapter les bordures/fonds sur blocs clairs
   IMPORTANT : cibler uniquement les cards top-level, pas les sous-éléments */
.section--light > .container .card-evenement,
.section--light > .container .card-ressource,
.section--light > .container .card-article,
.section--light > .container .tau-archipel-card,
.section--light > .container .dualite__card,
.section--light > .container .communaute__newsletter,
.section--light > .container .communaute__social,
.section--light > .container .communaute__participer {
	background: #FFFFFF;
	border: 1px solid transparent;
	color: var(--color-text-on-light);
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur-base) var(--ease-out-cubic),
	            box-shadow var(--dur-base) var(--ease-out-cubic),
	            border-color var(--dur-fast) var(--ease-out-quad);
}

/* Hover multi-layer premium sur fond ivoire */
.section--light > .container .card-evenement:hover,
.section--light > .container .card-ressource:hover,
.section--light > .container .card-article:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	border-color: rgba(15, 43, 61, 0.12);
}

/* Texte des cards sur fond clair : bien foncer pour la lisibilité */
.section--light .card-evenement p,
.section--light .card-ressource p,
.section--light .card-article p,
.section--light .dualite__card-content p,
.section--light .dualite__card-meaning,
.section--light .tau-archipel-card p {
	color: var(--color-text-muted-on-light);
}

.section--light .card-evenement__title a,
.section--light .card-ressource__title a,
.section--light .card-article__title a {
	color: var(--color-text-on-light);
}

.section--light .card-evenement__title a:hover,
.section--light .card-ressource__title a:hover,
.section--light .card-article__title a:hover {
	color: var(--color-accent);
}

/* Dualité — titres de cards : versions assombries pour fond clair */
.section--light .dualite__card--nia .dualite__card-content h3 {
	color: #0B5566;
}
.section--light .dualite__card--raro .dualite__card-content h3 {
	color: #8A3124;
}

/* Palette de couleurs : pas de background hérité, on laisse les pastilles respirer */
.section--light .dualite__card-palette {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Period label (NOVEMBRE — MAI) bien visible sur clair */
.section--light .dualite__card-period {
	color: var(--color-accent-on-light);
}

/* Indicator dot et cta */
.section--light .dualite__indicator p {
	color: var(--color-text-muted-on-light);
}

.section--light .btn--outline {
	border-color: var(--color-text-on-light);
	color: var(--color-text-on-light);
}

.section--light .btn--outline:hover {
	background: var(--color-text-on-light);
	color: #FFFFFF;
}

.section--light .btn--primary {
	background: var(--color-accent-on-light);
	border-color: var(--color-accent-on-light);
	color: #FFFFFF;
}

.section--light .btn--primary:hover {
	background: var(--color-text-on-light);
	border-color: var(--color-text-on-light);
	color: #FFFFFF;
}

/* Frise tramée — version sombre sur blocs clairs, version claire sur blocs sombres */
.section:not(.hero)::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.3;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M0 32 L32 0 M-8 8 L8 -8 M24 40 L40 24' stroke='rgba(255,255,255,0.04)' stroke-width='1' fill='none'/></svg>");
	background-size: 32px 32px;
	mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

[data-season="raro"] .section:not(.hero)::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M0 32 L32 0 M-8 8 L8 -8 M24 40 L40 24' stroke='rgba(255,220,180,0.05)' stroke-width='1' fill='none'/></svg>");
}

/* Frise sombre sur blocs clairs */
.section.section--light::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M0 32 L32 0 M-8 8 L8 -8 M24 40 L40 24' stroke='rgba(15,43,61,0.06)' stroke-width='1' fill='none'/></svg>");
	opacity: 0.45;
}

[data-season="raro"] .section.section--light::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M0 32 L32 0 M-8 8 L8 -8 M24 40 L40 24' stroke='rgba(78,35,24,0.07)' stroke-width='1' fill='none'/></svg>");
}

.section > .container {
	position: relative;
	z-index: 1;
}

.section__title {
	text-align: center;
	margin-bottom: 3rem;
	color: var(--color-accent);
}

/* Présentation */
.presentation__content {
	display: grid;
	gap: var(--grid-gap);
}

.presentation__text {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
	color: var(--color-text-muted);
	font-size: 1.1rem;
}

.presentation__seasons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--grid-gap);
	margin-top: 2rem;
}

.presentation__season {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-lg);
	padding: 2rem;
}

.presentation__season h3 {
	margin-bottom: 1rem;
	color: var(--color-accent);
}

.presentation__season p {
	color: var(--color-text-muted);
}

.presentation__season--raro h3 {
	color: var(--raro-orange);
}

/* Événements */
.evenements__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--grid-gap);
}

.evenements__cta {
	text-align: center;
	margin-top: 3rem;
}

.evenements__empty {
	text-align: center;
	color: var(--color-text-muted);
}

/* Card événement */
.card-evenement {
	--enter-delay: 0ms;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-lg);
	overflow: hidden;
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--dur-slower) var(--ease-out-expo) var(--enter-delay),
		transform var(--dur-slower) var(--ease-out-expo) var(--enter-delay),
		border-color var(--dur-base) var(--ease-out-quad),
		box-shadow var(--dur-base) var(--ease-out-quad);
}

/* Stagger cards : cascade d'entrée 80ms par card */
.card-evenement:nth-child(2) { --enter-delay: 80ms; }
.card-evenement:nth-child(3) { --enter-delay: 160ms; }
.card-evenement:nth-child(4) { --enter-delay: 240ms; }
.card-evenement:nth-child(5) { --enter-delay: 320ms; }
.card-evenement:nth-child(6) { --enter-delay: 400ms; }

.card-evenement.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.card-evenement:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-card);
	transform: translateY(-4px);
}

.card-evenement__image {
	overflow: hidden;
}

.card-evenement__image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform var(--dur-slower) var(--ease-out-expo);
	will-change: transform;
}

.card-evenement:hover .card-evenement__image img {
	transform: scale(1.06);
}

.card-evenement__body {
	padding: 1.5rem;
}

.card-evenement__date {
	font-size: var(--text-caption);
	color: var(--color-accent-warm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.card-evenement__title {
	margin: 0.5rem 0;
}

.card-evenement__title a {
	color: var(--color-text-light);
}

.card-evenement__title a:hover {
	color: var(--color-accent);
}

.card-evenement__lieu {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	margin-bottom: 0.5rem;
}

.card-evenement__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0;
}

.card-evenement__badge {
	font-size: var(--text-caption);
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-text-muted);
}

.card-evenement__badge--scolaire {
	background: var(--color-accent);
	color: var(--color-gradient-start);
}

/* Actualités */
.actualites__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--grid-gap);
}

.actualites__cta {
	text-align: center;
	margin-top: 3rem;
}

.actualites__empty {
	text-align: center;
	color: var(--color-text-muted);
}

/* Card article */
.card-article {
	background: var(--color-card-bg, rgba(255, 255, 255, 0.05));
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: var(--transition);
}

.card-article:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

.card-article__image {
	overflow: hidden;
}

.card-article__image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform var(--dur-slower) var(--ease-out-expo);
	will-change: transform;
}

.card-article:hover .card-article__image img {
	transform: scale(1.06);
}

.card-article__body {
	padding: 1.5rem;
}

.card-article__date {
	font-size: var(--text-caption);
	color: var(--color-accent-warm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.card-article__title {
	margin: 0.5rem 0;
}

.card-article__title a {
	color: var(--color-text-light);
	text-decoration: none;
}

.card-article__title a:hover {
	color: var(--color-accent);
}

.card-article p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.6;
}

/* Communauté */
.communaute__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--grid-gap);
	align-items: stretch;
}

.communaute__newsletter,
.communaute__social,
.communaute__participer {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-lg);
	padding: 2rem;
}

.communaute__newsletter h3,
.communaute__social h3,
.communaute__participer h3 {
	color: var(--color-accent);
	margin-bottom: 1rem;
}

.communaute__newsletter p,
.communaute__participer p {
	color: var(--color-text-muted);
	margin-bottom: 1.5rem;
}

/* Pousse l'action (form, liens, bouton) en bas pour aligner les cards */
.communaute__newsletter .newsletter-form,
.communaute__social .communaute__social-links,
.communaute__participer .btn {
	margin-top: auto;
}

/* Newsletter form */
.newsletter-form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
	flex: 1 1 200px;
	min-width: 0;
	width: 100%;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-text-light);
	font-family: var(--font-body);
	font-size: var(--text-small);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.newsletter-form input[type="email"]::placeholder {
	color: var(--color-text-muted);
}

.newsletter-form input[type="email"]:focus {
	outline: none;
	border-color: var(--color-accent);
}

.newsletter-form .btn {
	flex: 0 0 auto;
}

/* Mobile (<480px) : stack vertical avec input + bouton full-width */
@media (max-width: 480px) {
	.newsletter-form {
		flex-direction: column;
		align-items: stretch;
	}

	.newsletter-form input[type="email"] {
		flex: 1 1 auto;
		width: 100%;
	}

	.newsletter-form .btn {
		width: 100%;
		justify-content: center;
	}
}

.communaute__social-links {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

/* ---------- Communauté — variante blocs clairs ---------- */
.section--light .communaute__newsletter h3,
.section--light .communaute__social h3,
.section--light .communaute__participer h3 {
	color: var(--color-accent-on-light);
}

.section--light .communaute__newsletter p,
.section--light .communaute__participer p {
	color: var(--color-text-muted-on-light, var(--color-text-on-light));
}

.section--light .newsletter-form input[type="email"] {
	background: #FFFFFF;
	border-color: rgba(15, 43, 61, 0.15);
	color: var(--color-text-on-light);
}

.section--light .newsletter-form input[type="email"]::placeholder {
	color: rgba(15, 43, 61, 0.5);
}

.section--light .newsletter-form input[type="email"]:focus {
	border-color: var(--color-accent-on-light);
	box-shadow: 0 0 0 3px rgba(11, 85, 102, 0.1);
}

/* ---------- Footer ---------- */
.site-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: 2rem 0 1.25rem;
	margin-top: 2.5rem;
}

.site-footer__container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-px);
	display: grid;
	gap: 1.25rem;
	text-align: center;
}

.site-footer__logo-text {
	font-family: var(--font-brand);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-logo-text);
}

.site-footer__tagline {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	margin-top: 0.25rem;
}

.site-footer__list {
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.site-footer__list a {
	color: var(--color-text-muted);
	font-size: var(--text-small);
}

.site-footer__list a:hover {
	color: var(--color-accent);
}

.site-footer__social {
	display: flex;
	justify-content: center;
	gap: 0.875rem;
}

.site-footer__social-link {
	color: var(--color-text-muted);
	transition: color var(--dur-fast) var(--ease-out-quad);
	display: inline-flex;
}

.site-footer__social-link svg {
	width: 20px;
	height: 20px;
}

.site-footer__social-link:hover {
	color: var(--color-accent);
}

.site-footer__partners {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer__partners-label {
	font-size: var(--text-caption);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.site-footer__partners-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	padding: 0;
	margin: 0;
}

.site-footer__partners-list img {
	max-height: 44px;
	width: auto;
	opacity: 0.85;
	transition: opacity var(--dur-base) var(--ease-out-quad);
	filter: brightness(1.05);
}

.site-footer__partners-list img:hover {
	opacity: 1;
}

.site-footer__legal ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 1.5rem;
	margin: 0.75rem 0 0.5rem;
	padding: 1rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer__legal a {
	color: var(--color-text-muted);
	font-size: var(--text-caption);
	transition: color var(--dur-fast) var(--ease-out-quad);
}

.site-footer__legal a:hover {
	color: var(--color-accent);
}

.site-footer__copy {
	font-size: var(--text-caption);
	color: var(--color-text-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.site-header__menu-toggle {
		display: block;
	}

	.site-nav {
		display: none !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100vh !important;
		background: #001520 !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 2rem !important;
		z-index: 9999 !important;
		overflow: hidden !important;
	}

	.site-nav.is-open {
		display: flex !important;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}

	.site-nav__list a {
		font-size: 1.25rem;
		color: var(--color-text-light);
	}

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

	/* Hero mobile — ratio natif 9:16 de la vidéo mobile Kling */
	.hero {
		height: auto;
		min-height: auto;
		aspect-ratio: 9 / 16;
		max-height: 90vh;
	}

	.hero__title {
		font-size: clamp(1.8rem, 8vw, 2.5rem);
		text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
	}

	.hero__subtitle {
		font-size: clamp(0.9rem, 3.5vw, 1.2rem);
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
	}

	.hero__content {
		padding: 0 1.5rem;
	}
}

/* ==========================================================================
   PAGE — Tau Matari'i
   ========================================================================== */

.tau-intro {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 3rem;
	color: var(--color-text-muted);
	font-size: 1.1rem;
}

.tau-switch {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 3rem;
}

.tau-switch__btn {
	padding: 0.75rem 2rem;
	border-radius: var(--radius-pill);
	border: 2px solid rgba(255, 255, 255, 0.12);
	background: transparent;
	color: var(--color-text-muted);
	font-family: var(--font-brand);
	font-size: var(--text-h4);
	cursor: pointer;
	transition: var(--transition);
}

.tau-switch__btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.tau-switch__btn.is-active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-gradient-start);
}

.tau-content {
	display: none;
}

.tau-content.is-active {
	display: block;
}

.tau-content__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--grid-gap);
	align-items: center;
	margin-bottom: 4rem;
}

.tau-content__text h2 {
	color: var(--color-accent);
	margin-bottom: 1rem;
}

.tau-content__text h3 {
	color: var(--color-accent-warm);
	margin: 1.5rem 0 0.75rem;
}

.tau-content__text p {
	color: var(--color-text-muted);
}

.tau-content__text ul {
	list-style: none;
	padding: 0;
}

.tau-content__text ul li {
	color: var(--color-text-muted);
	padding: 0.4rem 0;
	padding-left: 1.5rem;
	position: relative;
}

.tau-content__text ul li::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	position: absolute;
	left: 0;
	top: 0.75rem;
}

.tau-content__visual img {
	width: 100%;
	border-radius: var(--radius-lg);
}

/* Archipels */
.tau-archipels {
	margin-top: 4rem;
}

.tau-archipels__intro {
	text-align: center;
	color: var(--color-text-muted);
	max-width: 700px;
	margin: -1.5rem auto 3rem;
}

.tau-archipels__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--grid-gap);
}

.tau-archipel-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
}

.tau-archipel-card h3 {
	color: var(--color-accent);
	margin-bottom: 0.75rem;
	font-size: var(--text-h4);
}

.tau-archipel-card p {
	color: var(--color-text-muted);
	font-size: var(--text-small);
}

@media (max-width: 768px) {
	.tau-content__grid {
		grid-template-columns: 1fr;
	}

	.tau-switch {
		flex-direction: column;
		align-items: center;
	}
}

/* ==========================================================================
   PAGE — Calendrier
   ========================================================================== */

.calendrier-filtres {
	margin-bottom: 3rem;
}

.calendrier-filtres__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
}

.calendrier-filtres__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.calendrier-filtres__field label {
	font-size: var(--text-caption);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.calendrier-filtres__field input,
.calendrier-filtres__field select {
	padding: 0.6rem 1rem;
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-text-light);
	font-family: var(--font-body);
	font-size: var(--text-small);
	transition: border-color var(--dur-base) var(--ease-out-quad),
	            background var(--dur-base) var(--ease-out-quad),
	            box-shadow var(--dur-base) var(--ease-out-quad);
	caret-color: var(--color-accent);
}

/* Custom select arrow (remove native browser chrome) */
.calendrier-filtres__field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23B8C6CF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 12px;
	cursor: pointer;
}

.calendrier-filtres__field input:hover,
.calendrier-filtres__field select:hover {
	border-color: rgba(255, 255, 255, 0.22);
	background-color: rgba(255, 255, 255, 0.07);
}

.calendrier-filtres__field input:focus,
.calendrier-filtres__field select:focus {
	outline: none;
	border-color: var(--color-accent);
	background-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 4px rgba(135, 255, 255, 0.08);
}

[data-season="raro"] .calendrier-filtres__field input:focus,
[data-season="raro"] .calendrier-filtres__field select:focus {
	box-shadow: 0 0 0 4px rgba(199, 86, 73, 0.12);
}

.calendrier-filtres__field--checkbox {
	flex-direction: row;
	align-items: center;
}

.calendrier-filtres__field--checkbox label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-transform: none;
	font-size: var(--text-small);
	cursor: pointer;
}

.calendrier-pagination {
	text-align: center;
	margin-top: 3rem;
}

.calendrier-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	transition: var(--transition);
}

.calendrier-pagination .page-numbers.current,
.calendrier-pagination .page-numbers:hover {
	background: var(--color-accent);
	color: var(--color-gradient-start);
}

.calendrier-carte {
	margin-top: 0;
}

/* ==========================================================================
   PAGE — Médiathèque
   ========================================================================== */

.mediatheque__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--grid-gap);
}

.card-ressource {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: var(--transition);
}

.card-ressource:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-card);
}

.card-ressource__image {
	position: relative;
	overflow: hidden;
}

.card-ressource__image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform var(--dur-slower) var(--ease-out-expo);
	will-change: transform;
}

.card-ressource:hover .card-ressource__image img {
	transform: scale(1.06);
}

.card-ressource__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: transform var(--transition), opacity var(--transition);
}

.card-ressource__image--video a:hover .card-ressource__play {
	transform: scale(1.08);
}

/* ---------- Single ressource — galerie ---------- */
.single-ressource__header {
	margin-bottom: 2rem;
	text-align: center;
}

.single-ressource__header h1 {
	margin-bottom: 1rem;
}

.single-ressource__meta {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	font-size: var(--text-small);
	color: var(--color-text-muted-on-light);
}

.single-ressource__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.single-ressource__body {
	max-width: 720px;
	margin: 0 auto 3rem;
	text-align: center;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
	margin: 2rem 0;
}

.gallery-grid__item {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: rgba(0, 0, 0, 0.05);
}

.gallery-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.gallery-grid__item:hover img {
	transform: scale(1.06);
}

.single-ressource__source {
	text-align: center;
	margin-top: 2rem;
}

.single-ressource__source a {
	color: var(--color-accent-on-light);
	font-weight: 500;
}

@media (max-width: 640px) {
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}
}

.card-ressource__type-badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: var(--color-accent);
	color: var(--color-gradient-start);
	font-size: var(--text-caption);
	font-weight: 600;
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-pill);
}

.card-ressource__body {
	padding: 1.5rem;
}

.card-ressource__title {
	margin-bottom: 0.5rem;
}

.card-ressource__title a {
	color: var(--color-text-light);
}

.card-ressource__title a:hover {
	color: var(--color-accent);
}

.card-ressource__actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* ==========================================================================
   PAGE — Communauté
   ========================================================================== */

.communaute-participer {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-lg);
	padding: 3rem;
	text-align: center;
	margin-bottom: 4rem;
}

.communaute-participer h2 {
	color: var(--color-accent);
	margin-bottom: 1rem;
}

.communaute-participer p {
	color: var(--color-text-muted);
	max-width: 700px;
	margin: 0 auto 2rem;
}

.communaute-temoignages__intro {
	text-align: center;
	color: var(--color-text-muted);
	margin: -1.5rem auto 3rem;
}

.communaute-newsletter {
	text-align: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-lg);
	padding: 3rem;
	margin-top: 4rem;
}

.communaute-newsletter h2 {
	color: var(--color-accent);
	margin-bottom: 1rem;
}

.communaute-newsletter p {
	color: var(--color-text-muted);
	margin-bottom: 2rem;
}

.newsletter-form--large {
	max-width: 500px;
	margin: 0 auto;
}

/* ==========================================================================
   PAGE — Contact
   ========================================================================== */

.contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 4rem;
}

.contact__info h2 {
	color: var(--color-accent);
	margin-bottom: 0.5rem;
}

.contact__info > p {
	color: var(--color-text-muted);
	margin-bottom: 2rem;
}

.contact__details {
	list-style: none;
}

.contact__details li {
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.contact__details strong {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
}

.contact__social {
	margin-top: 2rem;
}

.contact__social h3 {
	color: var(--color-accent);
	margin-bottom: 1rem;
}

.contact__social-links {
	display: flex;
	gap: 1rem;
}

.contact__forms {
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

.contact__form-block h2 {
	color: var(--color-accent);
	margin-bottom: 0.5rem;
}

.contact__form-block > p {
	color: var(--color-text-muted);
	margin-bottom: 2rem;
}

@media (max-width: 768px) {
	.contact__grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
}

/* ==========================================================================
   Forms — composant unifié .matarii-form (inscription + contact + soumission)
   ========================================================================== */

.matarii-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.matarii-form__honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.matarii-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

@media (max-width: 600px) {
	.matarii-form__grid {
		grid-template-columns: 1fr;
	}
}

.matarii-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.matarii-form__field label {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	font-weight: 500;
}

.matarii-form__field label span[aria-hidden="true"] {
	color: var(--color-accent);
}

.matarii-form__field input,
.matarii-form__field textarea,
.matarii-form__field select {
	padding: 0.75rem 1rem;
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-text-light);
	font-family: var(--font-body);
	font-size: var(--text-body);
	resize: vertical;
	transition: border-color var(--dur-base) var(--ease-out-quad),
	            background var(--dur-base) var(--ease-out-quad),
	            box-shadow var(--dur-base) var(--ease-out-quad),
	            transform var(--dur-fast) var(--ease-out-quad);
	caret-color: var(--color-accent);
}

.matarii-form__field input:hover,
.matarii-form__field textarea:hover,
.matarii-form__field select:hover {
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.07);
}

.matarii-form__field input:focus,
.matarii-form__field textarea:focus,
.matarii-form__field select:focus {
	outline: none;
	border-color: var(--color-accent);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 4px rgba(135, 255, 255, 0.08),
	            0 0 0 1px var(--color-accent);
}

[data-season="raro"] .matarii-form__field input:focus,
[data-season="raro"] .matarii-form__field textarea:focus,
[data-season="raro"] .matarii-form__field select:focus {
	box-shadow: 0 0 0 4px rgba(199, 86, 73, 0.12),
	            0 0 0 1px var(--color-accent);
}

.matarii-form__field input:invalid:not(:placeholder-shown),
.matarii-form__field textarea:invalid:not(:placeholder-shown) {
	border-color: rgba(199, 86, 73, 0.6);
}

.matarii-form__note {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	margin-top: 0.5rem;
	font-style: italic;
}

/* Variante sur fond clair */
.section--light .matarii-form__field label {
	color: var(--color-text-muted-on-light, var(--color-text-on-light));
}
.section--light .matarii-form__field input,
.section--light .matarii-form__field textarea,
.section--light .matarii-form__field select {
	background: rgba(255, 255, 255, 0.7);
	border-color: rgba(0, 0, 0, 0.15);
	color: var(--color-text-on-light);
}
.section--light .matarii-form__field input:focus,
.section--light .matarii-form__field textarea:focus,
.section--light .matarii-form__field select:focus {
	border-color: var(--color-accent-on-light);
	background: #fff;
}

/* ==========================================================================
   Form messages (success / error)
   ========================================================================== */

.form-message {
	padding: 1rem 1.25rem;
	border-radius: var(--radius-md);
	margin-bottom: 1.5rem;
	border-left: 3px solid;
	font-size: var(--text-body);
}

.form-message ul {
	margin: 0;
	padding-left: 1.25rem;
}

.form-message--success {
	background: rgba(59, 142, 59, 0.12);
	border-color: #3b8e3b;
	color: #c8f2c8;
}

.form-message--error {
	background: rgba(199, 86, 73, 0.12);
	border-color: #c75649;
	color: #fbd5cf;
}

.section--light .form-message--success {
	background: rgba(59, 142, 59, 0.1);
	color: #1f5f1f;
}

.section--light .form-message--error {
	background: rgba(199, 86, 73, 0.1);
	color: #6e2a20;
}

/* ==========================================================================
   Bloc inscription sur single-evenement
   ========================================================================== */

.inscription-bloc {
	margin-top: 4rem;
	padding: 2.5rem;
	border-radius: var(--radius-lg, 12px);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	scroll-margin-top: 100px;
}

.inscription-bloc h2 {
	color: var(--color-accent);
	margin-bottom: 1.5rem;
}

.inscription-bloc__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-size: var(--text-small);
	color: var(--color-text-muted);
}

.inscription-bloc__places strong {
	color: var(--color-accent);
	font-size: var(--text-body);
}

.inscription-bloc__notice {
	padding: 1.25rem;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.04);
	color: var(--color-text-muted);
	font-style: italic;
}

.inscription-bloc__notice--closed {
	background: rgba(199, 86, 73, 0.08);
	color: #fbd5cf;
	font-style: normal;
}

/* ==========================================================================
   SINGLE — Événement & Ressource
   ========================================================================== */

.breadcrumb {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	margin-bottom: 2rem;
}

.breadcrumb a {
	color: var(--color-accent);
}

.single-evenement__grid,
.single-ressource__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

.single-evenement__media img,
.single-ressource__media img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
}

.single-evenement__content h1,
.single-ressource__content h1 {
	margin-bottom: 1.5rem;
}

.single-evenement__meta {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 2rem;
	padding: 1.5rem;
	background: rgba(255, 255, 255, 0.03);
	border-radius: var(--radius-md);
}

.single-evenement__meta-item {
	display: flex;
	gap: 1rem;
	align-items: baseline;
}

.single-evenement__meta-item strong {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	min-width: 80px;
}

.single-evenement__body,
.single-ressource__body {
	color: var(--color-text-muted);
	line-height: var(--lh-body);
}

.single-evenement__body p,
.single-ressource__body p {
	margin-bottom: 1rem;
}

/* ==========================================================================
   Bloc carte sur single-evenement — entre description et inscription
   ========================================================================== */

.single-evenement__carte {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(15, 43, 61, 0.08);
}

.single-evenement__carte-title {
	font-family: var(--font-brand);
	font-size: 1.75rem;
	line-height: var(--lh-display);
	letter-spacing: var(--tracking-tight);
	color: var(--color-accent-on-light);
	margin: 0 0 0.5rem;
}

.single-evenement__carte-lieu {
	color: var(--color-text-muted-on-light);
	font-size: var(--text-small);
	margin: 0 0 1.5rem;
}

.single-evenement__carte-map {
	height: 360px;
	background: #FFFFFF;
	border: 1px solid rgba(15, 43, 61, 0.08);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.single-evenement__carte-map p {
	color: var(--color-text-muted-on-light);
	margin: 0;
	font-size: var(--text-small);
}

.single-evenement__carte-directions {
	display: inline-block;
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-accent-on-light);
	font-weight: 600;
	text-decoration: none;
	padding: 0.5rem 0;
	transition: transform var(--dur-fast) var(--ease-out-quad);
}

.single-evenement__carte-directions:hover {
	transform: translateX(4px);
}

/* Hériter des overrides Leaflet déjà définis sur .section--carte */
.single-evenement__carte .leaflet-container {
	font-family: var(--font-body);
	border-radius: var(--radius-lg);
	background: #F5F1E8;
}

.single-evenement__carte .leaflet-tile-pane {
	filter: sepia(8%) saturate(0.92) brightness(1.02);
}

.single-evenement__carte .leaflet-control-zoom {
	border: 0;
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin: 1rem !important;
}

.single-evenement__carte .leaflet-control-zoom a {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--color-text-on-light);
	border: 0;
	border-bottom: 1px solid rgba(15, 43, 61, 0.06);
	width: 34px;
	height: 34px;
	line-height: 34px;
	font-size: 18px;
	font-weight: 300;
	transition: background var(--dur-fast) var(--ease-out-quad),
	            color var(--dur-fast) var(--ease-out-quad);
}

.single-evenement__carte .leaflet-control-zoom a:last-child {
	border-bottom: 0;
}

.single-evenement__carte .leaflet-control-zoom a:hover {
	background: var(--color-bg-light);
	color: var(--color-accent-on-light);
}

.single-evenement__carte .leaflet-control-attribution {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-size: 10px;
	color: rgba(15, 43, 61, 0.55);
	padding: 2px 8px;
	border-radius: 4px 0 0 0;
	font-family: var(--font-body);
}

.single-evenement__carte .leaflet-control-attribution a {
	color: rgba(15, 43, 61, 0.75);
	text-decoration: none;
}

.single-ressource__embed {
	margin-top: 1.5rem;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.single-ressource__embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* Page content (éditeur WP) */
.page__content {
	max-width: 800px;
	margin: 0 auto;
	color: var(--color-text-muted);
}

.page__content p {
	margin-bottom: 1rem;
}

.page__content h2,
.page__content h3 {
	color: var(--color-accent);
	margin: 2rem 0 1rem;
}

@media (max-width: 768px) {
	.single-evenement__grid,
	.single-ressource__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   SINGLE — Article de blog
   ========================================================================== */

.container--narrow {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 var(--container-px);
}

.single-article__hero {
	margin-bottom: 2.5rem;
}

.single-article__hero img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
}

.single-article__header {
	margin-bottom: 3rem;
}

.single-article__date {
	font-size: var(--text-caption);
	color: var(--color-accent-warm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.single-article__header h1 {
	margin: 0.75rem 0 1rem;
}

.single-article__lead {
	font-size: 1.15rem;
	color: var(--color-text-muted);
	line-height: 1.7;
	border-left: 3px solid var(--color-accent);
	padding-left: 1.25rem;
}

.single-article__body {
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--color-text-light);
}

.single-article__body h2 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	color: var(--color-accent);
}

.single-article__body p {
	margin-bottom: 1.25rem;
}

.single-article__body em {
	color: var(--color-accent-warm);
	font-style: italic;
}

.single-article__nav {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.single-article__nav-link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-decoration: none;
	max-width: 45%;
	transition: var(--transition);
}

.single-article__nav-link:hover {
	transform: translateY(-2px);
}

.single-article__nav-link--next {
	margin-left: auto;
	text-align: right;
}

.single-article__nav-label {
	font-size: var(--text-caption);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.single-article__nav-title {
	color: var(--color-accent);
	font-weight: 600;
}

@media (max-width: 768px) {
	.single-article__nav {
		flex-direction: column;
	}

	.single-article__nav-link {
		max-width: 100%;
	}

	.single-article__nav-link--next {
		text-align: left;
	}
}

/* ==========================================================================
   HOMEPAGE — Section Dualité des saisons
   ========================================================================== */

.section__subtitle {
	text-align: center;
	max-width: 750px;
	margin: -1.5rem auto 3rem;
	color: var(--color-text-muted);
	font-size: 1.05rem;
}

.dualite__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--grid-gap);
}

.dualite__card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	cursor: pointer;
	transition: var(--transition);
	border: 2px solid rgba(255, 255, 255, 0.06);
}

.dualite__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

.dualite__card.is-active {
	border-color: var(--color-accent);
}

.dualite__card--raro.is-active {
	border-color: var(--raro-rouge-feu);
}

.dualite__card-visual {
	position: relative;
	height: 280px;
	overflow: hidden;
}

.dualite__card-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.dualite__card:hover .dualite__card-visual img {
	transform: scale(1.05);
}

.dualite__card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
}

.dualite__card-content {
	padding: 2rem;
}

.dualite__card-period {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	font-weight: 600;
}

.dualite__card-content h3 {
	font-size: var(--text-h2);
	margin: 0.5rem 0;
}

.dualite__card--nia .dualite__card-content h3 {
	color: var(--nia-turquoise);
}

.dualite__card--raro .dualite__card-content h3 {
	color: var(--raro-orange);
}

.dualite__card-meaning {
	font-family: var(--font-signature);
	font-size: 1.1rem;
	color: var(--color-text-muted);
	margin-bottom: 0.75rem;
}

.dualite__card-content p {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	line-height: 1.6;
}

.dualite__card-palette {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.dualite__card-palette span {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.1);
}

.dualite__indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
	padding: 1rem 1.5rem;
	background: rgba(255, 255, 255, 0.03);
	border-radius: var(--radius-pill);
}

.dualite__indicator-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-accent);
	animation: pulse 2s ease infinite;
	flex-shrink: 0;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.dualite__indicator p {
	font-size: var(--text-small);
	color: var(--color-text-muted);
}

.dualite__cta {
	text-align: center;
	margin-top: 2rem;
}

@media (max-width: 768px) {
	.dualite__cards {
		grid-template-columns: 1fr;
	}

	.dualite__card-visual {
		height: 200px;
	}
}

/* ==========================================================================
   HOMEPAGE — Section Symbolique culturelle
   ========================================================================== */

.symbolique__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--grid-gap);
}

.symbolique__card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-lg);
	padding: 2rem;
	transition: var(--transition);
	position: relative;
}

.symbolique__card:hover {
	border-color: rgba(255, 255, 255, 0.12);
	transform: translateY(-2px);
}

.symbolique__card-number {
	font-family: var(--font-brand);
	font-size: 3rem;
	color: var(--color-accent);
	opacity: 0.15;
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	line-height: 1;
}

.symbolique__card h3 {
	color: var(--color-accent);
	margin-bottom: 0.75rem;
	font-size: var(--text-h3);
}

.symbolique__card p {
	color: var(--color-text-muted);
	font-size: var(--text-small);
	line-height: 1.7;
}

.symbolique__frise {
	text-align: center;
	margin: 3rem 0;
	opacity: 0.15;
	letter-spacing: 0.5em;
	color: var(--color-accent);
	font-size: 1.2rem;
}

.symbolique__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--grid-gap);
	text-align: center;
}

.symbolique__stat {
	padding: 1.5rem;
}

.symbolique__stat-number {
	display: block;
	font-family: var(--font-brand);
	font-size: 3.5rem;
	color: var(--color-accent);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.symbolique__stat-label {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

@media (max-width: 768px) {
	.symbolique__grid {
		grid-template-columns: 1fr;
	}

	.symbolique__stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Hero — CTA Button
   ========================================================================== */

.hero__cta {
	margin-top: 2rem;
	font-size: var(--text-body);
}

/* ==========================================================================
   PAGE — Communauté — Témoignages
   ========================================================================== */

.temoignages__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--grid-gap);
}

.temoignage-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-lg);
	padding: 2rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: var(--transition);
	position: relative;
}

.temoignage-card::before {
	content: '"';
	font-family: var(--font-brand);
	font-size: 5rem;
	color: var(--color-accent);
	opacity: 0.1;
	position: absolute;
	top: 0.5rem;
	left: 1.5rem;
	line-height: 1;
}

.temoignage-card:hover {
	border-color: rgba(255, 255, 255, 0.12);
	transform: translateY(-2px);
}

.temoignage-card__content {
	color: var(--color-text-muted);
	font-size: var(--text-body);
	line-height: 1.7;
	font-style: italic;
	margin-bottom: 1.5rem;
}

.temoignage-card__content p {
	margin: 0;
}

.temoignage-card__footer {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding-top: 1.25rem;
}

.temoignage-card__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.temoignage-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.temoignage-card__avatar--placeholder {
	background: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.temoignage-card__avatar--placeholder span {
	font-family: var(--font-brand);
	font-size: 1.25rem;
	color: var(--color-gradient-start);
	font-weight: bold;
}

.temoignage-card__info {
	display: flex;
	flex-direction: column;
}

.temoignage-card__name {
	font-style: normal;
	font-weight: 600;
	color: var(--color-text-light);
	font-size: var(--text-small);
}

.temoignage-card__role {
	font-size: var(--text-caption);
	color: var(--color-text-muted);
}

@media (max-width: 768px) {
	.temoignages__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   PAGE HERO — bloc sombre court en haut des pages intérieures
   ========================================================================== */

.section--page-hero {
	padding-bottom: var(--section-py-hero);
	text-align: center;
	position: relative;
}

.section--page-hero .page-hero__title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: 1rem;
}

.section--page-hero .page-hero__lead {
	max-width: 640px;
	margin: 0 auto;
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.6;
}

/* Page body — padding équilibré au-dessous du hero */
.section--page-body,
.section--light.section--calendrier,
.section--light.section--mediatheque,
.section--light.section--communaute-page,
.section--light.section--contact,
.section--light.section--single-evenement-body,
.section--light.section--single-article {
	padding-top: var(--section-py);
	padding-bottom: var(--section-py);
}

/* Cas spécial : quand section--calendrier précède section--carte,
   réduit le padding-bottom pour que les 2 blocs ivoire se soudent */
.section--light.section--calendrier:has(+ .section--carte) {
	padding-bottom: 2rem;
}

/* ==========================================================================
   Overrides sur .section--light pour composants existants
   ========================================================================== */

/* Filtres calendrier / médiathèque sur fond clair */
.section--light .calendrier-filtres__field label {
	color: var(--color-text-muted-on-light);
}

.section--light .calendrier-filtres__field input,
.section--light .calendrier-filtres__field select {
	background: #FFFFFF;
	border-color: rgba(15, 43, 61, 0.15);
	color: var(--color-text-on-light);
	box-shadow: 0 1px 3px rgba(15, 43, 61, 0.04);
}

.section--light .calendrier-filtres__field input:focus,
.section--light .calendrier-filtres__field select:focus {
	border-color: var(--color-accent-on-light);
	box-shadow: 0 0 0 3px rgba(11, 85, 102, 0.12);
}

.section--light .calendrier-filtres__field--checkbox label {
	color: var(--color-text-on-light);
}

/* Pagination sur fond clair */
.section--light .calendrier-pagination .page-numbers {
	color: var(--color-text-muted-on-light);
	background: rgba(15, 43, 61, 0.04);
}

.section--light .calendrier-pagination .page-numbers.current,
.section--light .calendrier-pagination .page-numbers:hover {
	background: var(--color-accent-on-light);
	color: #FFFFFF;
}

/* Témoignages sur fond clair */
.section--light .temoignage-card {
	background: #FFFFFF;
	border: 1px solid rgba(15, 43, 61, 0.08);
	box-shadow: 0 2px 12px rgba(15, 43, 61, 0.04);
}

.section--light .temoignage-card::before {
	color: var(--color-accent-on-light);
}

.section--light .temoignage-card__content p,
.section--light .temoignage-card__content {
	color: var(--color-text-on-light);
}

.section--light .temoignage-card__name {
	color: var(--color-text-on-light);
}

.section--light .temoignage-card__role {
	color: var(--color-text-muted-on-light);
}

.section--light .temoignage-card__avatar--placeholder {
	background: var(--color-accent-on-light);
}

.section--light .temoignage-card__avatar--placeholder span {
	color: #FFFFFF;
}

/* Bloc inscription sur fond clair (single-evenement body light) */
.section--light .inscription-bloc {
	background: #FFFFFF;
	border: 1px solid rgba(15, 43, 61, 0.08);
	box-shadow: 0 2px 12px rgba(15, 43, 61, 0.04);
}

.section--light .inscription-bloc h2 {
	color: var(--color-accent-on-light);
}

.section--light .inscription-bloc__meta {
	color: var(--color-text-muted-on-light);
	border-bottom-color: rgba(15, 43, 61, 0.08);
}

.section--light .inscription-bloc__places strong {
	color: var(--color-accent-on-light);
}

.section--light .inscription-bloc__notice {
	background: rgba(15, 43, 61, 0.04);
	color: var(--color-text-muted-on-light);
}

.section--light .inscription-bloc__notice--closed {
	background: rgba(199, 86, 73, 0.08);
	color: #6e2a20;
}

/* Single article body sur fond clair */
.section--light .single-article__date {
	color: var(--color-text-muted-on-light);
}

.section--light .single-article__header h1 {
	color: var(--color-text-on-light);
}

.section--light .single-article__lead {
	color: var(--color-text-muted-on-light);
}

.section--light .single-article__body p,
.section--light .single-article__body {
	color: var(--color-text-on-light);
}

.section--light .single-article__body h2 {
	color: var(--color-accent-on-light);
}

.section--light .single-article__nav-link {
	background: #FFFFFF;
	border: 1px solid rgba(15, 43, 61, 0.08);
	color: var(--color-text-on-light);
}

.section--light .single-article__nav-label {
	color: var(--color-text-muted-on-light);
}

/* Single-evenement body clair */
.section--light .single-evenement__body,
.section--light .single-evenement__body p {
	color: var(--color-text-on-light);
}

.section--light .single-evenement__body h2,
.section--light .single-evenement__body h3 {
	color: var(--color-accent-on-light);
}

.section--light .single-evenement__body strong {
	color: var(--color-text-on-light);
}

/* Page générique sur light */
.section--light .page__content,
.section--light .page__content p {
	color: var(--color-text-on-light);
}

.section--light .page__content h2,
.section--light .page__content h3 {
	color: var(--color-accent-on-light);
}

.section--light .page__content a {
	color: var(--color-accent-on-light);
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0% 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size var(--dur-base) var(--ease-out-cubic);
	padding-bottom: 2px;
}

.section--light .page__content a:hover,
.section--light .page__content a:focus-visible {
	background-size: 100% 1px;
}

/* ==========================================================================
   Section Carte (calendrier) — bloc sombre dédié
   ========================================================================== */

/* Section carte : prolonge la section ivoire précédente (.section--calendrier),
   padding réduit en haut pour ne pas créer un trou visuel */
.section--carte {
	padding-top: 0;
	padding-bottom: calc(var(--section-py) * 0.75);
}

.section--carte .section__title {
	text-align: center;
	margin-bottom: 2rem;
	color: var(--color-accent-on-light);
}

.section--carte .calendrier-carte__map {
	height: 500px;
	background: #FFFFFF;
	border: 1px solid rgba(15, 43, 61, 0.08);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.section--carte .calendrier-carte__map p {
	color: var(--color-text-muted-on-light);
	margin: 0;
}

/* ==========================================================================
   Leaflet map — design custom intégré au système Matari'i
   Tile layer : CartoDB Positron (minimal clair)
   ========================================================================== */

.section--carte .leaflet-container {
	font-family: var(--font-body);
	border-radius: var(--radius-lg);
	background: #F5F1E8;
}

/* Warm tint léger sur les tiles pour matcher le fond ivoire */
.section--carte .leaflet-tile-pane {
	filter: sepia(8%) saturate(0.92) brightness(1.02);
}

/* Contrôles zoom : minimalistes, glassmorphism subtil */
.section--carte .leaflet-control-zoom {
	border: 0;
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin: 1rem !important;
}

.section--carte .leaflet-control-zoom a {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--color-text-on-light);
	border: 0;
	border-bottom: 1px solid rgba(15, 43, 61, 0.06);
	width: 34px;
	height: 34px;
	line-height: 34px;
	font-size: 18px;
	font-weight: 300;
	transition: background var(--dur-fast) var(--ease-out-quad),
	            color var(--dur-fast) var(--ease-out-quad);
}

.section--carte .leaflet-control-zoom a:last-child {
	border-bottom: 0;
}

.section--carte .leaflet-control-zoom a:hover {
	background: var(--color-bg-light);
	color: var(--color-accent-on-light);
}

/* Attribution : ultra-discrète, en bas à droite */
.section--carte .leaflet-control-attribution {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-size: 10px;
	color: rgba(15, 43, 61, 0.55);
	padding: 2px 8px;
	border-radius: 4px 0 0 0;
	font-family: var(--font-body);
}

.section--carte .leaflet-control-attribution a {
	color: rgba(15, 43, 61, 0.75);
	text-decoration: none;
}

.section--carte .leaflet-control-attribution a:hover {
	color: var(--color-accent-on-light);
}

/* ==========================================================================
   Matari'i custom markers — cercle avec pulse subtil
   ========================================================================== */

.matarii-marker {
	background: transparent;
	border: 0;
}

.matarii-marker__dot {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #FFFFFF;
	box-shadow: 0 2px 6px rgba(15, 43, 61, 0.3);
	z-index: 2;
}

.matarii-marker__pulse {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	opacity: 0.35;
	animation: matarii-pulse 2.4s var(--ease-out-expo) infinite;
	z-index: 1;
}

@keyframes matarii-pulse {
	0%   { transform: scale(0.5); opacity: 0.5; }
	70%  { transform: scale(2.2); opacity: 0; }
	100% { transform: scale(2.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.matarii-marker__pulse {
		animation: none;
		opacity: 0;
	}
}

/* Hover marker : dot scale up */
.leaflet-marker-icon.matarii-marker:hover .matarii-marker__dot {
	transform: scale(1.3);
}

.matarii-marker__dot {
	transition: transform var(--dur-base) var(--ease-out-expo);
}

.section--carte .leaflet-popup-content-wrapper {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: 0;
}

.section--carte .leaflet-popup-content {
	margin: 1rem 1.25rem;
	line-height: 1.5;
}

.section--carte .matarii-popup__date {
	font-size: var(--text-caption);
	color: var(--color-accent-on-light);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0 0 0.25rem;
	font-weight: 600;
}

.section--carte .matarii-popup__title {
	font-family: var(--font-brand);
	font-size: 1.25rem;
	line-height: 1.2;
	margin: 0 0 0.5rem;
	letter-spacing: var(--tracking-tight);
}

.section--carte .matarii-popup__title a {
	color: var(--color-text-on-light);
	text-decoration: none;
}

.section--carte .matarii-popup__title a:hover {
	color: var(--color-accent-on-light);
}

.section--carte .matarii-popup__lieu {
	font-size: var(--text-small);
	color: var(--color-text-muted-on-light);
	margin: 0 0 0.75rem;
}

.section--carte .matarii-popup__cta {
	display: inline-block;
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-accent-on-light);
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-out-quad);
}

.section--carte .matarii-popup__cta:hover {
	transform: translateX(3px);
}

/* ==========================================================================
   Single-evenement HERO (sombre)
   ========================================================================== */

.section--single-evenement-hero {
	padding-bottom: var(--section-py);
}

/* Single-evenement body : container narrow + espacement */
.section--single-evenement-body .container {
	max-width: 820px;
}

.section--single-evenement-body .inscription-bloc {
	margin-top: 3rem;
}

/* ==========================================================================
   Overrides section--light tardifs — composants qui définissent leur couleur
   après le bloc générique .section--light h2 (cascade CSS)
   ========================================================================== */

/* Page Communauté — Participer */
.section--light .communaute-participer {
	background: #FFFFFF;
	border: 1px solid rgba(15, 43, 61, 0.08);
	box-shadow: 0 2px 12px rgba(15, 43, 61, 0.04);
}

.section--light .communaute-participer h2 {
	color: var(--color-accent-on-light);
}

.section--light .communaute-participer p {
	color: var(--color-text-muted-on-light);
}

/* Page Communauté — Newsletter */
.section--light .communaute-newsletter {
	background: #FFFFFF;
	border: 1px solid rgba(15, 43, 61, 0.08);
	box-shadow: 0 2px 12px rgba(15, 43, 61, 0.04);
}

.section--light .communaute-newsletter h2 {
	color: var(--color-accent-on-light);
}

.section--light .communaute-newsletter p {
	color: var(--color-text-muted-on-light);
}

.section--light .communaute-temoignages__intro {
	color: var(--color-text-muted-on-light);
}

/* Page Contact — wrap info + formulaires en cards blanches */
.section--light .contact__info,
.section--light .contact__form-block {
	background: #FFFFFF;
	border: 1px solid rgba(15, 43, 61, 0.08);
	border-radius: var(--radius-lg);
	padding: 2.5rem;
	box-shadow: 0 2px 12px rgba(15, 43, 61, 0.04);
}

.section--light .contact__info h2,
.section--light .contact__info h3 {
	color: var(--color-accent-on-light);
}

.section--light .contact__info > p {
	color: var(--color-text-muted-on-light);
}

.section--light .contact__details li {
	border-bottom-color: rgba(15, 43, 61, 0.08);
}

.section--light .contact__details strong {
	color: var(--color-text-muted-on-light);
}

.section--light .contact__details span,
.section--light .contact__info li {
	color: var(--color-text-on-light);
}

.section--light .contact__details a {
	color: var(--color-accent-on-light);
	font-weight: 500;
}

.section--light .contact__form-block h2 {
	color: var(--color-accent-on-light);
}

.section--light .contact__form-block > p {
	color: var(--color-text-muted-on-light);
}

/* Cards ressource sur blocs clairs — titre lisible */
.section--light .card-ressource__title a {
	color: var(--color-text-on-light);
}

.section--light .card-ressource__title a:hover {
	color: var(--color-accent-on-light);
}

.section--light .card-ressource__type-badge {
	background: var(--color-accent-on-light);
	color: #FFFFFF;
}

/* ==========================================================================
   Page Tau Matari'i — overrides pour bloc ivoire
   ========================================================================== */

.section--tau-hero {
	padding-bottom: var(--section-py-hero);
}

.section--tau-hero .tau-switch {
	margin-top: 2.5rem;
	justify-content: center;
}

.section--light.section--tau-saisons {
	padding-top: var(--section-py);
	padding-bottom: calc(var(--section-py) * 0.6);
	position: relative;
	overflow: hidden;
}

/* Décoratifs flottants en arrière-plan */
.section--light.section--tau-saisons::before,
.section--light.section--tau-saisons::after {
	content: "";
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0.35;
	z-index: 0;
}

.section--light.section--tau-saisons::before {
	width: 480px;
	height: 480px;
	top: -120px;
	right: -140px;
	background: radial-gradient(circle at 30% 30%, var(--color-accent-on-light), transparent 65%);
	filter: blur(40px);
}

.section--light.section--tau-saisons::after {
	width: 360px;
	height: 360px;
	bottom: -80px;
	left: -100px;
	background: radial-gradient(circle at 60% 40%, var(--color-accent-warm), transparent 70%);
	filter: blur(50px);
	opacity: 0.18;
}

.section--light.section--tau-saisons > .container {
	position: relative;
	z-index: 1;
}

.section--light .tau-content__text h2 {
	color: var(--color-accent-on-light);
	font-size: calc(var(--text-h2) * 1.1);
	letter-spacing: var(--tracking-tight);
	line-height: var(--lh-display);
	margin-bottom: 1.25rem;
}

.section--light .tau-content__text h3 {
	color: var(--color-accent-on-light);
	opacity: 0.85;
	font-family: var(--font-body);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	font-weight: 600;
	margin: 2rem 0 0.75rem;
}

.section--light .tau-content__text p,
.section--light .tau-content__text ul li {
	color: var(--color-text-on-light);
}

.section--light .tau-content__text ul li::before {
	background: var(--color-accent-on-light);
}

/* ==========================================================================
   Blob organique painterly sur les visuels saison
   ========================================================================== */

.section--light .tau-content__visual {
	position: relative;
}

.section--light .tau-content__visual img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow:
		rgba(15, 43, 61, 0.15) 0px 40px 80px -20px,
		rgba(15, 43, 61, 0.10) 0px 20px 40px -12px,
		rgba(15, 43, 61, 0.06) 0px 0px 0px 1px;
	transform: rotate(-1deg);
	transition: transform var(--dur-slower) var(--ease-out-expo),
	            border-radius var(--dur-slower) var(--ease-out-expo);
}

/* Ni'a : blob souple type vague océanique */
.section--light .tau-content--nia .tau-content__visual img {
	border-radius: 63% 37% 52% 48% / 43% 47% 53% 57%;
}

/* Raro : blob plus anguleux type feuille/flamme */
.section--light .tau-content--raro .tau-content__visual img {
	border-radius: 42% 58% 38% 62% / 55% 45% 55% 45%;
	transform: rotate(1deg);
}

.section--light .tau-content__visual:hover img {
	transform: rotate(0deg) scale(1.02);
}

/* Cadre décoratif derrière l'image */
.section--light .tau-content__visual::before {
	content: "";
	position: absolute;
	inset: -12px;
	border: 1px dashed rgba(15, 43, 61, 0.15);
	opacity: 0.6;
	pointer-events: none;
	transition: transform var(--dur-slower) var(--ease-out-expo);
}

.section--light .tau-content--nia .tau-content__visual::before {
	border-radius: 68% 32% 57% 43% / 48% 42% 58% 52%;
	transform: rotate(1deg);
}

.section--light .tau-content--raro .tau-content__visual::before {
	border-radius: 37% 63% 33% 67% / 50% 50% 50% 50%;
	transform: rotate(-2deg);
}

.section--light .tau-content__visual:hover::before {
	transform: rotate(0deg);
}

/* ==========================================================================
   Diptyque illustré Ni'a / Raro — bloc décoratif painterly entre saisons et archipels
   ========================================================================== */

.section--tau-diptyque {
	--diptyque-bg: #0A1C28;              /* Ni'a : bleu-nuit monochrome */
	padding-top: calc(var(--section-py) * 0.75);
	padding-bottom: calc(var(--section-py) * 0.9);
	background: var(--diptyque-bg);
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: background var(--dur-slower) var(--ease-out-expo);
}

/* Switch de teinte selon la saison active */
[data-season="raro"] .section--tau-diptyque,
.season-raro .section--tau-diptyque {
	--diptyque-bg: #1E100C;              /* Raro : brun-rouge profond monochrome */
}

/* Vignette monochrome radiale très discrète pour la profondeur */
.section--tau-diptyque::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.025) 0%, transparent 60%);
	pointer-events: none;
}

.section--tau-diptyque > .container {
	position: relative;
	z-index: 1;
}

.tau-diptyque__label {
	display: inline-block;
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--color-text-muted);
	font-weight: 600;
	margin-bottom: 0.75rem;
	opacity: 0.8;
}

.tau-diptyque__title {
	font-family: var(--font-brand);
	font-size: var(--text-h2);
	line-height: var(--lh-display);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-light);
	margin: 0 auto 1.25rem;
	max-width: 780px;
}

.tau-diptyque__lead {
	color: var(--color-text-muted);
	max-width: 680px;
	margin: 0 auto 3.5rem;
	font-size: 1.05rem;
	line-height: 1.7;
}

.tau-diptyque__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
	max-width: 980px;
	margin: 0 auto;
}

.tau-diptyque__piece {
	margin: 0;
	text-align: center;
	transition: transform var(--dur-slower) var(--ease-out-expo);
}

.tau-diptyque__piece img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform var(--dur-slower) var(--ease-out-expo),
	            border-radius var(--dur-slower) var(--ease-out-expo),
	            filter var(--dur-base) var(--ease-out-quad);
	box-shadow:
		rgba(0, 0, 0, 0.5) 0px 40px 80px -16px,
		rgba(0, 0, 0, 0.35) 0px 20px 40px -10px,
		rgba(255, 255, 255, 0.04) 0px 0px 0px 1px inset;
	filter: saturate(1.08);
}

/* Formes symboliques miroir :
   Ni'a = arche vers le haut (Pléiades en haut, jaillissement, fenêtre céleste)
   Raro = arche vers le bas (Pléiades en bas, reflet, introspection)
   Les 2 ensemble = lentille cosmique (vesica piscis — dualité des cycles) */
.tau-diptyque__piece--nia img {
	border-radius: 50% 50% 8px 8px / 100% 100% 8px 8px;
}

.tau-diptyque__piece--raro img {
	border-radius: 8px 8px 50% 50% / 8px 8px 100% 100%;
}

.tau-diptyque__piece:hover img {
	transform: scale(1.03);
	filter: saturate(1.15);
}

.tau-diptyque__piece figcaption {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.tau-diptyque__piece-season {
	font-family: var(--font-brand);
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: var(--tracking-tight);
}

.tau-diptyque__piece-caption {
	font-size: var(--text-small);
	color: var(--color-text-muted);
	font-style: italic;
	letter-spacing: 0.01em;
}

/* Couleurs distinctes par saison sur fond monochrome dark */
.tau-diptyque__piece--nia .tau-diptyque__piece-season {
	color: var(--nia-turquoise);
}
.tau-diptyque__piece--raro .tau-diptyque__piece-season {
	color: var(--raro-rouge-feu);
}

@media (max-width: 768px) {
	.tau-diptyque__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* ==========================================================================
   Archipels — section ivoire (contraste avec le footer)
   ========================================================================== */

.section--light.section--tau-archipels {
	padding-top: calc(var(--section-py) * 0.5);
	padding-bottom: calc(var(--section-py) * 1.2);
	position: relative;
	overflow: hidden;
}

/* Séparateur décoratif entre saisons (ivoire) et archipels (ivoire) */
.section--light.section--tau-archipels::before {
	content: "";
	display: block;
	width: 80px;
	height: 1px;
	background: var(--color-accent-on-light);
	opacity: 0.4;
	margin: 0 auto 3rem;
}

/* Leaf decorative en background */
.section--light.section--tau-archipels::after {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	bottom: -180px;
	right: -150px;
	background: radial-gradient(circle at 40% 40%, var(--color-accent-on-light), transparent 70%);
	filter: blur(60px);
	opacity: 0.12;
	pointer-events: none;
}

.section--light.section--tau-archipels > .container {
	position: relative;
	z-index: 1;
}

.section--light.section--tau-archipels .section__title {
	color: var(--color-accent-on-light);
	text-align: center;
	letter-spacing: var(--tracking-tight);
	line-height: var(--lh-display);
	margin-bottom: 1rem;
}

.section--light.section--tau-archipels .tau-archipels__intro {
	color: var(--color-text-muted-on-light);
	max-width: 600px;
	margin: 0 auto 3.5rem;
	text-align: center;
	font-size: 1.05rem;
}

.section--light.section--tau-archipels .tau-archipels {
	margin-top: 0;
}

.section--light.section--tau-archipels .tau-archipels__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--grid-gap);
}

.section--light.section--tau-archipels .tau-archipel-card {
	flex: 1 1 240px;
	max-width: 320px;
}

/* Cards archipel refinées : numéro + hover premium */
.section--light.section--tau-archipels .tau-archipel-card {
	position: relative;
	padding: 2.25rem 1.75rem 1.75rem;
	border-radius: var(--radius-lg);
	background: #FFFFFF;
	border: 1px solid rgba(15, 43, 61, 0.08);
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur-base) var(--ease-out-cubic),
	            box-shadow var(--dur-base) var(--ease-out-cubic),
	            border-color var(--dur-fast) var(--ease-out-quad);
	overflow: hidden;
}

.section--light.section--tau-archipels .tau-archipel-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-accent-on-light);
}

.tau-archipel-card__num {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	font-family: var(--font-brand);
	font-size: 3.5rem;
	line-height: 1;
	color: var(--color-accent-on-light);
	opacity: 0.1;
	font-weight: 400;
	pointer-events: none;
	user-select: none;
}

.section--light.section--tau-archipels .tau-archipel-card h3 {
	font-family: var(--font-brand);
	font-size: 1.4rem;
	line-height: var(--lh-display);
	letter-spacing: var(--tracking-tight);
	color: var(--color-accent-on-light);
	margin-bottom: 0.75rem;
	position: relative;
}

.section--light.section--tau-archipels .tau-archipel-card p {
	color: var(--color-text-muted-on-light);
	font-size: var(--text-small);
	line-height: 1.6;
	margin: 0;
}

/* Barre décorative courte sous le titre, teintée accent */
.section--light.section--tau-archipels .tau-archipel-card h3::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	background: var(--color-accent-on-light);
	opacity: 0.4;
	margin-top: 0.5rem;
	transition: width var(--dur-base) var(--ease-out-cubic),
	            opacity var(--dur-base) var(--ease-out-cubic);
}

.section--light.section--tau-archipels .tau-archipel-card:hover h3::after {
	width: 52px;
	opacity: 0.8;
}

/* ==========================================================================
   Section Vidéo à la une — homepage (cinema immersive)
   ========================================================================== */

.section--video-highlight {
	padding: var(--section-py) 0;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(135, 255, 255, 0.08) 0%, transparent 60%),
		linear-gradient(180deg, #001520 0%, #000B10 100%);
	position: relative;
	overflow: hidden;
}

.section--video-highlight::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M-10 30 L30 -10 M0 40 L40 0 M10 50 L50 10' stroke='rgba(135,255,255,0.18)' stroke-width='0.6' fill='none'/></svg>");
	background-size: 40px 40px;
	opacity: 0.5;
	pointer-events: none;
	mask-image: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 100%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 100%);
}

.section--video-highlight .container {
	position: relative;
	z-index: 1;
}

.video-highlight__layout {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 3rem;
	align-items: center;
}

.video-highlight__eyebrow {
	display: inline-block;
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-accent);
	margin-bottom: 1rem;
	font-weight: 600;
}

.video-highlight__title {
	font-family: var(--font-brand);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.2;
	color: var(--color-text-light);
	margin-bottom: 1.25rem;
}

.video-highlight__excerpt {
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.video-highlight__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	font-size: var(--text-small);
}

.video-highlight__date {
	color: var(--color-text-muted);
	text-transform: capitalize;
}

.video-highlight__more {
	color: var(--color-accent);
	font-weight: 500;
	position: relative;
	transition: color 0.2s;
}

.video-highlight__more::after {
	content: " →";
	transition: transform 0.2s;
	display: inline-block;
}

.video-highlight__more:hover {
	color: var(--color-accent-warm);
}

.video-highlight__more:hover::after {
	transform: translateX(3px);
}

/* Player facade */
.video-highlight__player {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.06);
}

.video-highlight__facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: #000;
	overflow: hidden;
}

.video-highlight__thumbnail {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s;
	filter: brightness(0.85);
}

.video-highlight__facade:hover .video-highlight__thumbnail {
	transform: scale(1.04);
	filter: brightness(1);
}

.video-highlight__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 88px;
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5));
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.video-highlight__facade:hover .video-highlight__play {
	transform: translate(-50%, -50%) scale(1.1);
}

.video-highlight__play svg {
	width: 100%;
	height: 100%;
}

.video-highlight__play-bg {
	fill: #212121;
	fill-opacity: 0.85;
	transition: fill 0.2s, fill-opacity 0.2s;
}

.video-highlight__facade:hover .video-highlight__play-bg {
	fill: #C75649;
	fill-opacity: 1;
}

/* Iframe swap-in */
.video-highlight__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 860px) {
	.video-highlight__layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.video-highlight__intro {
		text-align: center;
	}

	.video-highlight__meta {
		justify-content: center;
	}

	.video-highlight__play {
		width: 68px;
		height: 48px;
	}
}