/*
Theme Name: Val des Arbres
Description: Thème du syndicat de copropriété Le Val des Arbres. Tons de forêt, de bois et de papier crème. Toutes les pages, l'en-tête et le pied de page se modifient visuellement dans l'éditeur de blocs. Conçu pour l'extension « Val des Arbres – Outils du syndicat ».
Version: 2.0.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
Author: Syndicat Le Val des Arbres
License: GPL-2.0-or-later
Text Domain: val-des-arbres
*/

/* Couleurs partagées avec l'extension. */
:root {
	--vda-forest: var(--wp--preset--color--forest, #2c4a37);
	--vda-moss: var(--wp--preset--color--moss, #5f7d4f);
	--vda-wood: var(--wp--preset--color--wood, #8b5e3c);
	--vda-paper: var(--wp--preset--color--paper, #fffdf8);
	--vda-line: var(--wp--preset--color--line, #e3dccd);
	--vda-ink: var(--wp--preset--color--ink, #26302a);
	--vda-muted: var(--wp--preset--color--muted, #66705f);
	--vda-radius: 14px;
	--vda-shadow: 0 10px 28px rgba(31, 54, 40, 0.08);
	--vda-shadow-hover: 0 16px 36px rgba(31, 54, 40, 0.14);
}

body { -webkit-font-smoothing: antialiased; }

/* Pas d'espace entre l'en-tête, le contenu et le pied de page. */
.wp-site-blocks > * { margin-block-start: 0; }
img { height: auto; }
:focus-visible { outline: 3px solid var(--vda-moss); outline-offset: 2px; }

/* ---------- En-tête ---------- */

.vda-header {
	border-bottom: 1px solid var(--vda-line);
	position: relative;
	z-index: 20;
}
.vda-header .wp-block-site-logo img { max-height: 48px; width: auto; }
.vda-header .wp-block-navigation-item__content {
	padding: 0.45rem 0.8rem !important;
	border-radius: 999px;
	text-decoration: none !important;
	color: var(--vda-ink);
}
.vda-header .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--cream); color: var(--vda-forest); }
.vda-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { background: #edf2e6; color: var(--vda-forest); }
.vda-header .wp-block-button__link { padding: 0.55rem 1.1rem; font-size: 0.95rem; }
.vda-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.15rem; }

@media (max-width: 600px) {
	.vda-header .wp-block-site-tagline { display: none; }
	.vda-header .vda-header__cta { display: none; }
}

/* ---------- Arbres décoratifs ---------- */

.vda-hero,
.vda-band { position: relative; overflow: hidden; }
.vda-hero::after,
.vda-band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(110px, 15vw, 220px);
	background: url("assets/trees.svg") bottom center / 100% 100% no-repeat;
	pointer-events: none;
	z-index: 1;
}
.vda-band::after { height: clamp(70px, 8vw, 120px); }
.vda-hero .wp-block-cover__inner-container,
.vda-band > * { position: relative; z-index: 2; }

/* ---------- Bandeau d'accueil ---------- */

.vda-eyebrow,
.vda-kicker {
	font-size: 0.8rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 0.3rem !important;
}
.vda-eyebrow { color: var(--wp--preset--color--sage); }
.vda-kicker { color: var(--vda-wood); }
.vda-hero h1 { max-width: 15ch; }
.vda-hero h1 em { font-style: italic; font-weight: 500; color: var(--wp--preset--color--sand); }
.vda-hero p:not(.vda-eyebrow) { max-width: 46ch; }
.vda-hero .is-style-outline .wp-block-button__link { border: 1.5px solid rgba(255, 255, 255, 0.75); }
.vda-hero .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- Accès rapides ---------- */

.vda-quick {
	position: relative;
	z-index: 3;
	margin-top: -4.5rem !important;
}
.vda-quick > .wp-block-column {
	box-sizing: border-box;
	position: relative;
	background: var(--vda-paper);
	border: 1px solid var(--vda-line);
	border-radius: var(--vda-radius);
	padding: 1.3rem;
	box-shadow: var(--vda-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vda-quick > .wp-block-column:hover { transform: translateY(-3px); box-shadow: var(--vda-shadow-hover); }
.vda-quick > .wp-block-column > * { margin-top: 0; margin-bottom: 0.35rem; }
.vda-quick h3 { font-size: 1.15rem; }
.vda-quick h3 a { text-decoration: none; color: inherit; }
.vda-quick h3 a::after { content: ""; position: absolute; inset: 0; }
.vda-quick p { font-size: 0.93rem; color: var(--vda-muted); line-height: 1.45; }

.vda-icon img {
	width: 44px !important;
	height: 44px !important;
	padding: 10px;
	border-radius: 12px;
	background: #edf2e6;
}
.vda-icon--wood img { background: #f4eadc; }

@media (max-width: 781px) {
	.wp-block-columns.vda-quick.vda-quick { flex-wrap: wrap !important; gap: 0.9rem !important; }
	.wp-block-columns.vda-quick:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: calc(50% - 0.45rem) !important; flex-grow: 0 !important; }
}
@media (max-width: 480px) {
	.vda-quick > .wp-block-column { padding: 1rem; }
	.vda-quick p { display: none; }
}

/* ---------- En-têtes de section ---------- */

.vda-section-head { margin-bottom: 1.6rem !important; }
.vda-section-head h2 { margin: 0; }
.vda-more a { font-weight: 700; text-decoration: none; white-space: nowrap; }

/* ---------- Cartes ---------- */

.is-style-vda-card {
	background: var(--vda-paper);
	border: 1px solid var(--vda-line);
	border-radius: var(--vda-radius);
	padding: clamp(1.25rem, 3.5vw, 2.5rem);
}
.wp-block-post-template > li { display: flex; }
.wp-block-post-template .is-style-vda-card {
	width: 100%;
	overflow: hidden;
	position: relative;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-post-template .is-style-vda-card:hover { transform: translateY(-3px); box-shadow: var(--vda-shadow-hover); }
.wp-block-post-template .is-style-vda-card .wp-block-post-featured-image { margin: 0; }
.wp-block-post-template .is-style-vda-card .wp-block-post-featured-image img { display: block; }
.wp-block-post-template .wp-block-post-title { margin: 0; }
.wp-block-post-template .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.wp-block-post-template .wp-block-post-excerpt__excerpt { margin: 0; }

.wp-block-query-no-results p,
.vda-empty {
	background: var(--vda-paper);
	border: 1px dashed var(--vda-line);
	border-radius: var(--vda-radius);
	padding: 1.4rem;
	color: var(--vda-muted);
	text-align: center;
}

/* Contenu des pages dans une carte. */
.vda-page-card > .wp-block-post-content > *:first-child { margin-top: 0; }
.vda-page-card > .wp-block-post-content > *:last-child { margin-bottom: 0; }
.vda-page-card .wp-block-gallery img { border-radius: 8px; }
.vda-page-card .wp-block-file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--wp--preset--color--cream);
	border-radius: 10px;
	padding: 0.8rem 1rem;
}
.vda-page-card .wp-block-file__button { background: var(--vda-forest); border-radius: 999px; padding: 0.4rem 1rem; }
.vda-page-card .vda-card { background: #fff; }

/* ---------- Liste à crochets ---------- */

.is-style-vda-check { list-style: none; padding-left: 0; }
.is-style-vda-check li {
	position: relative;
	padding-left: 1.8rem;
	margin-bottom: 0.7rem;
}
.is-style-vda-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25rem;
	width: 1.1rem;
	height: 1.1rem;
	background: url("assets/icons/check.svg") center / contain no-repeat;
}

/* ---------- Pied de page ---------- */

.vda-footer ul { list-style: none; padding-left: 0; }
.vda-footer ul li { margin-bottom: 0.35rem; }
.vda-footer ul a { text-decoration: none; }
.vda-footer ul a:hover { text-decoration: underline; }
.vda-footer h4 { letter-spacing: 0.14em; text-transform: uppercase; }
.vda-footer .wp-block-site-title a { color: #fff; }

/* ---------- Divers ---------- */

.wp-block-query-pagination { justify-content: center; gap: 0.4rem; }
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	border-radius: 999px;
	border: 1px solid var(--vda-line);
	background: var(--vda-paper);
	text-decoration: none;
	font-weight: 600;
}
.wp-block-query-pagination-numbers .page-numbers.current { background: var(--vda-forest); color: #fff; border-color: var(--vda-forest); }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}