/*
 * La Meute Caennaise — site vitrine (V10).
 * Identité visuelle de la Meutothèque : mêmes couleurs, mêmes polices (Newsreader pour les titres,
 * Karla pour le texte), mêmes boutons, cartes et pied de page. Aucune fonction n'est partagée.
 *
 * Mouvement (règles d'Emil Kowalski, skill fourni) :
 * - seulement transform et opacity, jamais « transition: all » ;
 * - sous 300 ms pour l'interface, sortie plus rapide que l'entrée ;
 * - courbes fortes : --ease-out pour ce qui entre, --ease-drawer pour les panneaux ;
 * - survol réservé aux souris (hover: hover) and (pointer: fine), appui visible partout (:active) ;
 * - mouvement réduit : on garde les fondus, on retire les déplacements.
 */

@font-face { font-family: "Newsreader"; src: url(../fonts/newsreader.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Karla"; src: url(../fonts/karla.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
	/* Palette officielle (identique à la Meutothèque) */
	--sapin: #2d423f;
	--sapin-fonce: #22332f;
	--vert: #2d6642;
	--sauge: #d7dac7;
	--orange: #e38126;
	--creme: #f9f1e3;
	/* Dérivées */
	--papier: #fcfbf7;
	--blanc: #ffffff;
	--voile: #f2f3ec;
	--chaud: #fbf6ec;
	--ligne: #dedcd0;
	--ligne-forte: #cfcec2;
	--ligne-creme: #eadfc8;
	--encre: #2a3532;
	--gris: #636f6a;
	--orange-texte: #a9560f;
	--titre: "Newsreader", Georgia, serif;
	--texte: "Karla", system-ui, -apple-system, sans-serif;
	--r: 8px;
	--r-petit: 6px;
	--ombre: 0 1px 2px rgba(45, 66, 63, .06), 0 6px 16px -12px rgba(45, 66, 63, .3);
	--ombre-forte: 0 2px 4px rgba(45, 66, 63, .08), 0 12px 24px -14px rgba(45, 66, 63, .45);
	/* Largeurs */
	--l-texte: 760px;
	--l-large: 1140px;
	--marge: 20px;
	/* Mouvement */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 17px/1.6 var(--texte); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--vert); text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: max(16px, 1rem); } /* iPhone : pas de zoom sur les champs */
a, button, summary, [role="button"] { touch-action: manipulation; }
button, .btn, .wp-block-button__link, summary { -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--titre); color: var(--sapin); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
p { margin: 0; }
strong, b { font-weight: 700; }
.ico { flex: none; width: 20px; height: 20px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--sapin); color: var(--creme); border-radius: var(--r-petit); text-decoration: none; }
.evitement:focus { top: 12px; }
@media (hover: hover) and (pointer: fine) {
	a:hover { color: var(--sapin); }
}

/* ---------- Boutons ---------- */
.btn, .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 10px 20px; border-radius: var(--r-petit);
	border: 1px solid var(--sapin); background: var(--sapin); color: var(--creme);
	font: 600 1rem/1.2 var(--texte); text-decoration: none; text-align: center; cursor: pointer;
	transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.btn:active, .wp-block-button__link:active { transform: scale(0.97); }
.btn--contour, .is-style-outline > .wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--blanc); color: var(--sapin); border-color: var(--ligne-forte); font-weight: 500;
}
.btn--clair { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.lien-fleche .ico { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.btn:hover, .wp-block-button__link:hover { background: var(--sapin-fonce); border-color: var(--sapin-fonce); color: #fff; }
	.btn--contour:hover, .is-style-outline > .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--blanc); border-color: var(--sapin); color: var(--sapin); }
	.btn--clair:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .7); color: #fff; }
	.lien-fleche:hover .ico { transform: translateX(3px); }
}

/* ---------- En-tête du site ---------- */
.top {
	position: sticky; top: 0; z-index: 30;
	padding-top: env(safe-area-inset-top, 0px);
	background: color-mix(in oklab, var(--papier) 94%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid #d9d7ca;
}
.admin-bar .top { top: 32px; }
@media (max-width: 782px) { .admin-bar .top { top: 0; } }
.top__in { max-width: var(--l-large); margin: 0 auto; padding: 12px var(--marge); display: flex; align-items: center; gap: 14px 26px; }
.top__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--sapin); flex: none; }
.top__img { height: 46px; width: auto; }
.top__nom { font: 600 1.3rem/1 var(--titre); letter-spacing: -.01em; white-space: nowrap; }
.top__nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.top__liens { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.top__liens a { display: block; padding: 6px 0; color: var(--gris); text-decoration: none; border-bottom: 2px solid transparent; transition: color 200ms ease, border-color 200ms ease; white-space: nowrap; }
.top__liens a[aria-current="page"] { color: var(--sapin); font-weight: 600; border-bottom-color: var(--orange); }
.top__burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--ligne-forte); border-radius: var(--r-petit); background: var(--blanc); color: var(--sapin); cursor: pointer; align-items: center; justify-content: center; transition: transform 160ms var(--ease-out); }
.top__burger:active { transform: scale(0.95); }
.top__burger-fermer { display: none; }
.top__burger[aria-expanded="true"] .top__burger-ouvrir { display: none; }
.top__burger[aria-expanded="true"] .top__burger-fermer { display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
	.top__liens a:hover { color: var(--sapin); }
}
@media (max-width: 1240px) { .top__nom { display: none; } }
@media (max-width: 1060px) {
	.top__in { flex-wrap: wrap; }
	.top__burger { display: inline-flex; }
	.top__img { height: 40px; }
	.top__nom { display: inline; font-size: 1.15rem; }
	/* Menu en panneau : il glisse sous la barre (300 ms, courbe « tiroir »), se ferme plus vite (200 ms). */
	.top__nav {
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 14px; margin: 0;
		padding: 8px var(--marge) calc(20px + env(safe-area-inset-bottom, 0px));
		background: var(--papier); border-bottom: 1px solid #d9d7ca; box-shadow: 0 18px 30px -24px rgba(20, 30, 28, .5);
		max-height: calc(100svh - 70px); overflow-y: auto; overscroll-behavior: contain;
		opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
		transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
	}
	.top.is-ouvert .top__nav {
		opacity: 1; transform: none; visibility: visible; pointer-events: auto;
		transition: opacity 300ms var(--ease-drawer), transform 300ms var(--ease-drawer), visibility 0s;
	}
	.top__liens { flex-direction: column; gap: 0; }
	.top__liens a { padding: 13px 2px; border-bottom: 1px solid var(--ligne); font-size: 1.1rem; color: var(--sapin); }
	.top__liens a[aria-current="page"] { border-bottom-color: var(--ligne); color: var(--vert); }
	.top__liens a[aria-current="page"]::before { content: ""; display: inline-block; width: 5px; height: 1em; margin-right: 10px; vertical-align: -2px; border-radius: 3px; background: var(--orange); }
	.top__adh { width: 100%; }
}
@media (max-width: 420px) { .top__nom { font-size: 1.05rem; } .top__img { height: 36px; } }

/* ---------- Annonce ---------- */
.annonce { background: var(--voile); color: var(--sapin); border-bottom: 1px solid var(--ligne); }
.annonce p { max-width: var(--l-large); margin: 0 auto; padding: 10px var(--marge); font-size: .97rem; line-height: 1.45; }
.annonce a { font-weight: 600; margin-left: 6px; }

/* ---------- En-tête de page ---------- */
.entete { padding: clamp(30px, 5vw, 56px) var(--marge) 10px; text-align: center; }
.entete__in { max-width: 820px; margin: 0 auto; }
.entete h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.015em; }
.entete__chapo { max-width: 58ch; margin: 14px auto 0; color: var(--gris); font-size: 1.1rem; text-wrap: pretty; }
.surtitre, .is-style-surtitre { margin: 0 0 8px; font: 700 .85rem/1.3 var(--texte); letter-spacing: .03em; text-transform: uppercase; color: var(--orange-texte); }
.ariane ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; list-style: none; margin: 0 0 18px; padding: 0; font-size: .9rem; color: var(--gris); }
.ariane li + li::before { content: "/"; margin-right: 8px; color: var(--ligne-forte); }
.ariane a { color: var(--gris); text-decoration: none; }
.ariane li[aria-current] { color: var(--sapin); }
@media (hover: hover) and (pointer: fine) { .ariane a:hover { color: var(--vert); text-decoration: underline; } }

/* ---------- Contenu des pages (blocs) ---------- */
.contenu { padding: clamp(24px, 4vw, 40px) 0 clamp(40px, 6vw, 72px); }
.contenu--accueil { padding-top: 0; }
.contenu > *, .is-style-bande > *, .is-style-bande-sauge > * {
	width: min(var(--l-texte), 100% - 2 * var(--marge)); margin-inline: auto;
}
.contenu > .alignwide, .is-style-bande > .alignwide, .is-style-bande-sauge > .alignwide { width: min(var(--l-large), 100% - 2 * var(--marge)); max-width: none; }
.contenu > .alignfull { width: 100%; max-width: none; }
.contenu > * + * { margin-top: 1.1rem; }
.contenu > h2, .contenu > .wp-block-heading:is(h2) { margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.contenu > .alignfull, .contenu > .alignfull + *, .contenu > .alignwide + h2 { margin-top: clamp(3rem, 6vw, 4.5rem); }
.contenu > :first-child { margin-top: 0; }
.contenu--libre > * { width: auto; }
/* Pages avec grilles ou bandes : le texte s'aligne à gauche sur la grande colonne (1140 px), en gardant une ligne lisible (760 px). */
.contenu--large > :not(.alignwide):not(.alignfull),
.contenu--large .is-style-bande > :not(.alignwide):not(.alignfull),
.contenu--large .is-style-bande-sauge > :not(.alignwide):not(.alignfull) {
	margin-left: max(var(--marge), (100% - var(--l-large)) / 2); margin-right: auto;
}
.contenu--large > .has-text-align-center, .contenu--large > .wp-block-buttons.is-content-justification-center { width: min(var(--l-large), 100% - 2 * var(--marge)); margin-inline: auto; }
.contenu--accueil > .is-style-accroche + .alignfull { margin-top: 0; }
.contenu .is-style-grand + p, .contenu .wp-block-column > .is-style-grand + p { margin-top: .35rem; }

.contenu h2, .lieu h2, .lieu__autres h2 {
	display: flex; align-items: center; gap: 10px;
	font-size: clamp(1.6rem, 1.3rem + 1vw, 1.95rem); color: var(--vert);
}
.contenu h2::before, .lieu h2::before, .lieu__autres h2::before { content: ""; flex: none; width: 5px; height: 1.05em; border-radius: 3px; background: var(--orange); }
.contenu h2.has-text-align-center { justify-content: center; }
.contenu h3 { font-size: 1.3rem; color: var(--sapin); }
.contenu h2 + p, .contenu h2 + * { margin-top: .6rem; }
.contenu p, .contenu li { text-wrap: pretty; }
.contenu ul, .contenu ol { padding-left: 1.3em; }
.contenu li + li { margin-top: .3em; }
.contenu .has-text-align-center { text-align: center; }
.contenu figure { margin: 0; }
.contenu .wp-block-image img { border-radius: var(--r); }
.contenu .wp-block-image figcaption, .contenu figcaption { margin-top: 8px; font-size: .9rem; color: var(--gris); text-align: center; }
.is-style-arrondi img { border-radius: var(--r); box-shadow: var(--ombre); }
.contenu hr, .wp-block-separator { border: 0; border-top: 1px solid var(--ligne); margin-block: 2.4rem; }
.is-style-grand { font: 600 clamp(2.8rem, 2rem + 3vw, 4rem)/1 var(--titre); color: var(--vert); letter-spacing: -.02em; }
.contenu .wp-block-embed iframe { width: 100%; border-radius: var(--r); }

/* Bandes pleine largeur */
.is-style-bande, .is-style-bande-sauge { padding: clamp(36px, 6vw, 56px) 0; }
.is-style-bande { background: var(--creme); border-block: 1px solid var(--ligne-creme); }
.is-style-bande-sauge { background: var(--voile); border-block: 1px solid var(--ligne); }
.is-style-bande > * + *, .is-style-bande-sauge > * + * { margin-top: 1.1rem; }
.is-style-bande > :first-child, .is-style-bande-sauge > :first-child { margin-top: 0; }

/* Grille de cartes */
.contenu .is-style-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 14px; }
.contenu .is-style-grille > * { margin: 0; }
.is-style-carte { padding: 18px 20px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); box-shadow: var(--ombre); }
.is-style-carte > * { margin: 0; }
.is-style-carte > * + * { margin-top: .45rem; }
.is-style-carte h3 { font-size: 1.25rem; }
.is-style-carte p { color: var(--gris); font-size: 1rem; line-height: 1.55; }
.is-style-carte .wp-block-image { margin: -18px -20px 14px; }
.is-style-carte .wp-block-image img { border-radius: var(--r) var(--r) 0 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.is-style-carte a { font-weight: 600; }

/* Encart « bon à savoir » (comme dans le guide de la Meutothèque) */
.is-style-encart { padding: 12px 16px; border-radius: var(--r-petit); background: var(--chaud); border-left: 3px solid var(--orange); font-size: 1rem; }
.is-style-encart > * { margin: 0; }
.is-style-encart > * + * { margin-top: .4rem; }
.is-style-encart strong:first-child { color: var(--orange-texte); }

/* Chiffres clés */
.contenu .is-style-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); gap: 22px 32px; }
.is-style-chiffres > * { margin: 0; }
.is-style-chiffres > * > :first-child { font: 600 2.5rem/1 var(--titre); color: var(--vert); font-variant-numeric: tabular-nums; }
.is-style-chiffres > * > :last-child { margin-top: 4px; color: var(--gris); font-size: 1rem; }

/* Accroche de l'accueil : texte + photo */
.contenu .is-style-accroche { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; padding-block: clamp(32px, 6vw, 64px) clamp(28px, 5vw, 56px); }
.is-style-accroche > * { margin: 0; flex: 1 1 400px; min-width: 0; }
.is-style-accroche h1 { font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.6rem); line-height: 1.05; letter-spacing: -.015em; }
.is-style-accroche .wp-block-group > * + * { margin-top: 16px; }
.is-style-accroche .wp-block-group > .wp-block-buttons { margin-top: 26px; }
.is-style-accroche .wp-block-group > p:not(.is-style-surtitre) { font-size: 1.15rem; color: var(--gris); max-width: 52ch; }
.is-style-accroche .wp-block-group > p.has-petit-font-size { font-size: .95rem; }
.is-style-accroche .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: var(--ombre); }

/* Colonnes */
.contenu .wp-block-columns { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start; }
.contenu .wp-block-columns.are-vertically-aligned-center { align-items: center; }
.contenu .wp-block-column { flex: 1 1 320px; min-width: 0; }
.contenu .wp-block-column > * + * { margin-top: 1rem; }
.contenu .wp-block-column > :first-child { margin-top: 0; }

/* Listes */
.contenu .is-style-etapes { list-style: none; padding: 0; counter-reset: etape; display: grid; gap: 12px; }
.contenu .is-style-etapes > li { counter-increment: etape; position: relative; margin: 0; padding: 14px 16px 14px 58px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); box-shadow: var(--ombre); line-height: 1.55; color: var(--gris); }
.contenu .is-style-etapes > li::before { content: counter(etape); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; font: 600 1rem/1 var(--titre); }
.contenu .is-style-etapes > li strong:first-child { display: block; font: 600 1.2rem/1.3 var(--titre); color: var(--sapin); margin-bottom: 2px; }
.contenu .is-style-etapes a { font-weight: 600; }
.contenu .is-style-puces, .lieu .is-style-puces { list-style: none; padding: 0; }
.is-style-puces > li { position: relative; padding: 3px 0 3px 18px; line-height: 1.55; }
.is-style-puces > li::before { content: ""; position: absolute; left: 0; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }
.contenu .is-style-pastilles { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.contenu .is-style-pastilles > li { margin: 0; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--ligne-forte); background: var(--blanc); color: var(--sapin); font-size: .97rem; }

/* Questions / réponses (bloc « Détails ») */
.contenu .wp-block-details { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); box-shadow: var(--ombre); }
.contenu .wp-block-details + .wp-block-details { margin-top: 10px; }
.wp-block-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 14px 18px; cursor: pointer; list-style: none; font: 600 1.12rem/1.35 var(--titre); color: var(--sapin); }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--voile); color: var(--orange-texte); font: 400 1.4rem/1 var(--texte); transition: transform 200ms var(--ease-out); }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin: 0 18px; color: var(--gris); }
.wp-block-details > :not(summary) + :not(summary) { margin-top: .6rem; }
.wp-block-details > :last-child { padding-bottom: 16px; }
/* Ouverture en douceur là où le navigateur sait animer la hauteur (220 ms) ; ailleurs, ouverture directe. */
@supports (interpolate-size: allow-keywords) {
	.wp-block-details { interpolate-size: allow-keywords; }
	.wp-block-details::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size 220ms var(--ease-out), opacity 220ms var(--ease-out), content-visibility 220ms allow-discrete; }
	.wp-block-details[open]::details-content { block-size: auto; opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
	.wp-block-details summary:hover { color: var(--vert); }
}

/* Avis */
.wp-block-quote.is-style-avis { margin: 0; padding: 18px 20px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); box-shadow: var(--ombre); }
.wp-block-quote.is-style-avis p { font-size: 1rem; line-height: 1.6; color: var(--encre); }
.wp-block-quote.is-style-avis p + p { margin-top: .5rem; }
.wp-block-quote.is-style-avis::before { content: "★★★★★"; display: block; margin-bottom: 8px; color: var(--orange); letter-spacing: 2px; font-size: .95rem; }
.wp-block-quote.is-style-avis cite { display: block; margin-top: 10px; font-style: normal; font-weight: 700; color: var(--sapin); font-size: .95rem; }

/* Galerie */
.contenu .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.contenu .wp-block-gallery > figure { margin: 0; width: auto !important; }
.contenu .wp-block-gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-petit); }

/* Dernières actualités (bloc « Derniers articles ») */
.contenu .wp-block-latest-posts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 14px; }
.contenu .wp-block-latest-posts > li { margin: 0; padding: 16px 18px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); box-shadow: var(--ombre); }
.wp-block-latest-posts__post-title { font: 600 1.15rem/1.3 var(--titre); color: var(--sapin); text-decoration: none; }
.wp-block-latest-posts__post-date { display: block; margin-top: 4px; font-size: .88rem; color: var(--gris); }
.wp-block-latest-posts__featured-image img { border-radius: var(--r-petit); margin-bottom: 10px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ---------- Listes du thème : lieux, actualités ---------- */
.liste { max-width: var(--l-large); margin: 0 auto; padding: clamp(20px, 3vw, 32px) var(--marge) clamp(40px, 6vw, 72px); }
.liste__note { margin-top: 22px; color: var(--gris); font-size: .95rem; text-align: center; }
.vide { text-align: center; color: var(--gris); padding: 24px 0; }
.filtres ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; }
.filtres a { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--ligne-forte); background: var(--blanc); color: var(--sapin); font-size: .95rem; text-decoration: none; transition: border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); }
.filtres a:active { transform: scale(0.97); }
.filtres a[aria-current="page"] { background: var(--sapin); border-color: var(--sapin); color: var(--creme); font-weight: 600; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.carte-lieu, .carte-art { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); box-shadow: var(--ombre); overflow: hidden; transition: box-shadow 200ms ease, transform 200ms var(--ease-out); }
.carte-lieu:active, .carte-art:active { transform: scale(0.98); }
.carte-lieu__lien, .carte-art__lien { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.carte-lieu__img, .carte-art__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--voile); }
.carte-lieu__img--vide, .carte-art__img--vide { display: grid; place-items: center; color: var(--vert); }
.carte-lieu__txt, .carte-art__txt { display: grid; gap: 4px; padding: 14px 16px 16px; align-content: start; }
.carte-lieu__txt strong, .carte-art__txt strong { font: 600 1.25rem/1.25 var(--titre); color: var(--sapin); }
.carte-lieu__meta, .carte-art__meta { color: var(--gris); font-size: .93rem; }
.carte-art__txt > span:last-child { color: var(--gris); font-size: .97rem; line-height: 1.5; }
.pastille-laisse { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 4px; padding: 4px 10px; border-radius: 99px; background: #f1e9d8; color: #5f4b27; font-size: .85rem; font-weight: 600; }
.pastille-laisse .ico { width: 16px; height: 16px; }
.pastille-laisse--grande { font-size: .95rem; padding: 6px 12px; margin: 0 0 16px; }
@media (hover: hover) and (pointer: fine) {
	.carte-lieu:hover, .carte-art:hover { box-shadow: var(--ombre-forte); transform: translateY(-2px); }
	.carte-lieu:hover strong, .carte-art:hover strong { color: var(--vert); }
	.filtres a:hover { border-color: var(--vert); color: var(--vert); }
	.filtres a[aria-current="page"]:hover { color: #fff; }
}

/* ---------- Fiche d'un lieu ---------- */
.lieu { max-width: var(--l-large); margin: 0 auto; padding: 22px var(--marge) clamp(40px, 6vw, 64px); }
.lieu__photo { margin: 0 0 clamp(24px, 4vw, 40px); }
.lieu__photo img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--r); box-shadow: var(--ombre); }
.lieu__cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px 48px; align-items: start; }
.lieu__texte { padding: 0; }
.lieu__texte > * + * { margin-top: 1rem; }
.lieu__texte > h2 { margin-top: 2.4rem; }
.lieu__fiche { position: sticky; top: 96px; padding: 20px 22px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); box-shadow: var(--ombre); }
.lieu__fiche h2 { font-size: 1.35rem; margin-bottom: 12px; }
.lieu__fiche dl { margin: 0; display: grid; gap: 0; }
.lieu__fiche dl > div { padding: 9px 0; border-top: 1px solid var(--ligne); }
.lieu__fiche dt { font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--orange-texte); }
.lieu__fiche dd { margin: 2px 0 0; line-height: 1.45; }
.lieu__iti { width: 100%; margin-top: 14px; }
.lieu__note { margin-top: 12px; font-size: .85rem; color: var(--gris); line-height: 1.45; }
.lieu__autres { margin-top: clamp(40px, 6vw, 64px); }
.lieu__autres h2 { margin-bottom: 18px; }
.lieu__autres > p { margin-top: 18px; }
@media (max-width: 860px) {
	.lieu__cols { grid-template-columns: 1fr; }
	.lieu__fiche { position: static; }
}

/* ---------- Article ---------- */
.article__date { margin-top: 14px; color: var(--gris); font-size: .95rem; }
.article__une { max-width: var(--l-large); margin: 18px auto 0; padding: 0 var(--marge); }
.article__une img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r); }
.article__nav { max-width: var(--l-texte); margin: 0 auto 40px; padding: 0 var(--marge); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.article__nav a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--ligne); border-radius: var(--r); background: var(--blanc); text-decoration: none; color: var(--sapin); font: 600 1.05rem/1.3 var(--titre); }
.article__nav small { font: 400 .85rem var(--texte); color: var(--gris); }
.article__suiv { grid-column: 2; text-align: right; }

/* ---------- Formulaire ---------- */
.formulaire { padding: clamp(18px, 3vw, 26px); background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); box-shadow: var(--ombre); }
.formulaire__aide { color: var(--gris); font-size: .93rem; margin-bottom: 12px; }
.formulaire__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.formulaire__champ { display: grid; gap: 6px; margin: 0; }
.formulaire__champ--large { grid-column: 1 / -1; }
.formulaire label { font-weight: 600; color: var(--sapin); font-size: .97rem; }
.formulaire input, .formulaire select, .formulaire textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--ligne-forte); border-radius: var(--r-petit); background: var(--papier); transition: border-color 200ms ease, box-shadow 200ms ease; }
.formulaire textarea { resize: vertical; min-height: 140px; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px rgba(45, 102, 66, .15); }
.formulaire__rgpd { margin: 14px 0; font-size: .88rem; color: var(--gris); line-height: 1.5; }
.formulaire__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__msg { display: grid; gap: 2px; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--r-petit); border-left: 3px solid; }
.formulaire__msg--ok { background: #e7f0e3; border-color: var(--vert); color: var(--sapin); }
.formulaire__msg--err { background: var(--chaud); border-color: var(--orange); color: #6e4a1c; }
.formulaire__msg { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
@starting-style { .formulaire__msg { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 600px) { .formulaire__grille { grid-template-columns: 1fr; } }

/* ---------- Recherche, 404, pagination ---------- */
.recherche { display: flex; gap: 8px; max-width: 560px; margin: 0 auto 24px; }
.recherche input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid var(--ligne-forte); border-radius: var(--r-petit); background: var(--blanc); }
.resultats { list-style: none; padding: 0; margin: 0 auto; max-width: var(--l-texte); display: grid; gap: 10px; }
.resultats a { display: grid; gap: 4px; padding: 14px 16px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); text-decoration: none; color: var(--gris); }
.resultats strong { font: 600 1.15rem var(--titre); color: var(--sapin); }
.introuvable { max-width: 640px; margin: 0 auto; padding: clamp(40px, 7vw, 80px) var(--marge); text-align: center; }
.introuvable img { width: 200px; margin: 0 auto 18px; }
.introuvable h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); margin-bottom: 10px; }
.introuvable > p:not(.surtitre) { color: var(--gris); margin-bottom: 22px; }
.introuvable__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; list-style: none; padding: 0; margin: 0; font-weight: 600; }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 28px 0 0; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ligne-forte); border-radius: var(--r-petit); background: var(--blanc); color: var(--sapin); text-decoration: none; }
.pagination .current { background: var(--sapin); border-color: var(--sapin); color: var(--creme); }

/* ---------- Bande « Envie de marcher avec nous ? » ---------- */
.bande-adh { background: var(--creme); border-block: 1px solid var(--ligne-creme); }
.bande-adh__in { max-width: var(--l-large); margin: 0 auto; padding: 40px var(--marge); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.bande-adh__t { font: 600 1.75rem/1.2 var(--titre); color: var(--sapin); margin-bottom: 6px; }
.bande-adh p:not(.bande-adh__t) { max-width: 60ch; }

/* ---------- Pied de page (comme la Meutothèque) ---------- */
.foot { margin-top: 30px; color: #dfe4dc; font-size: .95rem; }
.bande-adh + .foot { margin-top: 30px; }
.foot__illu { width: 140px; margin: 0 auto -4px; position: relative; z-index: 1; }
.foot__band { background: var(--sapin); padding: clamp(36px, 6vw, 56px) max(var(--marge), (100vw - 1100px) / 2) calc(26px + env(safe-area-inset-bottom, 0px)); }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 28px 32px; }
.foot__brand img { width: 160px; height: auto; margin-bottom: 12px; }
.foot__brand p { max-width: 38ch; line-height: 1.6; color: #c9d1c8; margin-bottom: 16px; }
.foot h2 { margin: 0 0 10px; font: 600 1.05rem var(--titre); color: #fff; }
.foot__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: #dfe4dc; text-decoration: none; }
.foot__social { display: inline-flex; align-items: center; gap: 8px; word-break: break-word; }
.foot__social .ico { width: 18px; height: 18px; opacity: .8; }
.foot__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .85rem; color: #b9c3bb; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot__cookies { padding: 0; border: 0; background: none; color: #dfe4dc; font-size: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
	.foot a:hover, .foot__cookies:hover { color: #fff; text-decoration: underline; }
}
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .foot__grid { grid-template-columns: 1fr; } }

/* ---------- Barre « Adhérer » en bas de l'écran sur téléphone ---------- */
.barre-adh { display: none; }
@media (max-width: 760px) {
	.barre-adh {
		position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: color-mix(in oklab, var(--papier) 96%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
		border-top: 1px solid #d9d7ca; font-weight: 600; color: var(--sapin);
		transform: translateY(100%); visibility: hidden;
		transition: transform 200ms var(--ease-out), visibility 0s linear 200ms;
	}
	.barre-adh.is-visible { transform: none; visibility: visible; transition: transform 260ms var(--ease-out), visibility 0s; }
	body:has(.barre-adh.is-visible) .foot__band { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Bandeau cookies ---------- */
.cookies {
	position: fixed; z-index: 60; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: min(480px, calc(100% - 32px));
	padding: 16px 18px; border-radius: var(--r); background: var(--blanc); border: 1px solid var(--ligne);
	box-shadow: 0 14px 34px -18px rgba(20, 30, 28, .5); font-size: .95rem; line-height: 1.5;
	opacity: 1; transform: none;
	transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
@starting-style { .cookies { opacity: 0; transform: translateY(16px); } }
.cookies.is-sortie { opacity: 0; transform: translateY(16px); transition-duration: 150ms; }
.cookies__t { font: 600 1.2rem/1.2 var(--titre); color: var(--sapin); margin-bottom: 4px; }
.cookies__btns { display: flex; gap: 8px; margin-top: 12px; }
.cookies__btns .btn { flex: 1; }
@media (max-width: 640px) { .cookies { left: 12px; right: 12px; max-width: none; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Apparition des grilles en cascade ----------
 * Une seule fois, quand la grille arrive à l'écran : 300 ms, 8 px, 50 ms entre deux cartes (6 au plus).
 * Le script n'ajoute « is-pret » que si le navigateur sait le faire et si le visiteur n'a pas demandé moins de mouvement :
 * sans script, tout est visible tout de suite. Le texte des pages, lui, ne bouge jamais. */
[data-cascade].is-pret > * { opacity: 0; transform: translateY(8px); }
[data-cascade].is-vu > * { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); transition-delay: calc(min(var(--i, 0), 6) * 50ms); }

/* ---------- Moins de mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn:active, .wp-block-button__link:active, .carte-lieu:active, .carte-art:active, .filtres a:active, .top__burger:active { transform: none; }
	.top__nav, .top.is-ouvert .top__nav { transform: none !important; }
	.barre-adh, .barre-adh.is-visible { transition: opacity 200ms ease, visibility 0s; transform: none; opacity: 0; }
	.barre-adh.is-visible { opacity: 1; }
	.cookies, .cookies.is-sortie { transform: none; }
	@starting-style { .cookies { transform: none; } }
	[data-cascade].is-pret > *, [data-cascade].is-vu > * { transform: none; transition-delay: 0ms; }
	.lien-fleche:hover .ico { transform: none; }
	@media (hover: hover) and (pointer: fine) { .carte-lieu:hover, .carte-art:hover { transform: none; } }
}

/* ---------- Impression ---------- */
@media print {
	.top, .annonce, .foot, .barre-adh, .cookies, .bande-adh, .formulaire { display: none !important; }
	body { background: #fff; }
}