/* ============================================================
   VILLES — Template de page ville (Bromont + 4 autres villes)
   Design olive / lime — scopé sous .ville-template
   ============================================================ */

.ville-template,
.ville-template *,
.ville-template *::before,
.ville-template *::after { box-sizing: border-box; }

.ville-template {
	--vt-olive:        #598129;
	--vt-olive-dark:   #4a6d22;
	--vt-lime:         #a0c458;
	--vt-lime-bright:  #bddd7a;
	--vt-ink:          #1a1a1a;
	--vt-ink-2:        #333333;
	--vt-line:         #d8d8d8;
	--vt-container:        1280px;
	--vt-container-narrow: 1080px;

	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: var(--vt-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	padding-top: 160px;
}

.ville-template img { max-width: 100%; height: auto; display: block; }
.ville-template a    { color: inherit; }

.ville-template h1,
.ville-template h2,
.ville-template h3,
.ville-template h4 {
	font-family: "Raleway", system-ui, sans-serif;
	color: var(--vt-ink);
	line-height: 1.2;
	margin: 0;
	font-weight: 400;
	text-wrap: balance;
}
.ville-template p { margin: 0 0 1em; text-wrap: pretty; }
.ville-template p:last-child { margin-bottom: 0; }

.ville-template .vt-container        { max-width: var(--vt-container);        margin: 0 auto; padding: 0 32px; }
.ville-template .vt-container-narrow { max-width: var(--vt-container-narrow); margin: 0 auto; padding: 0 32px; }

/* ─── HERO ──────────────────────────────────────────────── */
.ville-template .vt-hero {
	background: var(--vt-olive);
	color: #fff;
	padding: 90px 0 60px;
}
.ville-template .vt-hero-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 32px;
	text-align: center;
}
.ville-template .vt-hero h1 {
	color: var(--vt-lime);
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	font-weight: 600;
	letter-spacing: -0.005em;
	margin-bottom: 18px;
	line-height: 1.15;
}
.ville-template .vt-hero .vt-tagline {
	color: #fff;
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 36px;
}
.ville-template .vt-hero p.vt-lead {
	color: #fff;
	font-size: 14px;
	line-height: 19px;
	max-width: 62rem;
	margin: 0 auto;
}

/* ─── Service photo cards ──────────────────────────────── */
.ville-template .vt-service-row {
	max-width: 1480px;
	margin: 60px auto 0;
	padding: 0 32px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 20px;
}
.ville-template .vt-service-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	max-width: 260px;
	height: 420px;
	background: #000;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: transform .35s ease, box-shadow .35s ease;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.ville-template .vt-service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}
.ville-template .vt-service-card .vt-label {
	background: #000;
	color: #fff;
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	padding: 22px 14px;
	line-height: 1.25;
	min-height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ville-template .vt-service-card .vt-photo {
	flex: 1;
	background-size: cover;
	background-position: center;
	transition: transform .6s ease;
}
.ville-template .vt-service-card:hover .vt-photo { transform: scale(1.06); }

/* Image backgrounds — partagés entre les villes */
.ville-template .vt-photo-traitement      { background-image: url("/images/villes/traitement-pelouse-engrais.webp"); }
.ville-template .vt-photo-fertilisation   { background-image: url("/images/villes/fertilisation-pelouse-abbostford.webp"); }
.ville-template .vt-photo-mauvaises       { background-image: url("/images/villes/controle-mauvaises-herbes.webp"); }
.ville-template .vt-photo-vers-blancs     { background-image: url("/images/villes/controle-vers-blancs.webp"); }
.ville-template .vt-photo-programme       { background-image: url("/images/villes/programme-entretien-pelouse.webp"); }
.ville-template .vt-photo-spreader        { background-image: url("/images/villes/traitement-pelouse-engrais.webp"); }
.ville-template .vt-photo-house           { background-image: url("/images/villes/traitement-pelouse-abbostford.webp"); }
.ville-template .vt-photo-fert-big        { background-image: url("/images/villes/fertilisation-pelouse-abbostford.webp"); }
.ville-template .vt-photo-mauvaises-big   { background-image: url("/images/villes/controle-mauvaises-herbes.webp"); }
.ville-template .vt-photo-pissenlit       { background-image: url("/images/villes/traitement-gazon-manuel.webp"); }
.ville-template .vt-photo-vers-blancs-big { background-image: url("/images/villes/controle-vers-blancs.webp"); }
.ville-template .vt-photo-scarab          { background-image: url("/images/villes/coleopteres-verts-blancs.webp"); }
.ville-template .vt-photo-prog-big        { background-image: url("/images/villes/programme-entretien-pelouse.webp"); }
.ville-template .vt-photo-tablet          { background-image: url("/images/villes/analyse-pelouse-sol.webp"); }

/* ─── LIME BAND ────────────────────────────────────────── */
.ville-template .vt-lime-band {
	background: var(--vt-lime);
	text-align: center;
	padding: 70px 32px;
}
.ville-template .vt-lime-band h2 {
	color: var(--vt-ink);
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 4vw, 3.25rem);
	margin-bottom: 14px;
	letter-spacing: -0.01em;
}
.ville-template .vt-lime-band .vt-sub {
	color: #fff;
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ─── SPLIT sections ──────────────────────────────────── */
.ville-template .vt-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: #fff;
}
.ville-template .vt-split-text {
	padding: 90px 32px;
	max-width: 680px;
	justify-self: center;
	width: 100%;
}
.ville-template .vt-split-text--right {
	padding: 90px 32px;
	justify-self: center;
}
.ville-template .vt-split-image {
	min-height: 560px;
	background-size: cover;
	background-position: center;
}

.ville-template .vt-split-text p {
	color: var(--vt-ink);
	font-size: 14px;
	line-height: 19px;
	margin-bottom: 18px;
}
.ville-template .vt-split-text h2 {
	font-family: "Raleway", sans-serif;
	font-weight: 400;
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
	color: var(--vt-ink);
	line-height: 1.25;
	margin: 32px 0 24px;
}
.ville-template .vt-split-text h2 .vt-accent { color: var(--vt-lime); font-weight: 700; }
.ville-template .vt-split-text ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ville-template .vt-split-text ul li {
	position: relative;
	padding: 8px 0 8px 26px;
	color: var(--vt-ink);
	font-size: 14px;
	line-height: 19px;
}
.ville-template .vt-split-text ul li::before {
	content: "•";
	position: absolute;
	left: 6px;
	top: 8px;
	color: var(--vt-ink);
	font-size: 1rem;
	line-height: 1.55;
}

/* ─── FAQ ─────────────────────────────────────────────── */
.ville-template .vt-faq {
	background: #fff;
	padding: 110px 32px 80px;
}
.ville-template .vt-faq-title {
	text-align: center;
	font-family: "Raleway", sans-serif;
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--vt-ink);
	line-height: 1.3;
	max-width: 900px;
	margin: 0 auto 60px;
}
.ville-template .vt-faq-title .vt-accent { color: var(--vt-lime); font-weight: 700; }

.ville-template .vt-faq-list { max-width: 880px; margin: 0 auto; }
.ville-template .vt-faq-item {
	border-bottom: 1px dashed #b9b9b9;
	padding: 22px 0;
}
.ville-template .vt-faq-item:first-child { border-top: 1px dashed #b9b9b9; }
.ville-template .vt-faq-item details > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--vt-ink);
	padding: 0;
}
.ville-template .vt-faq-item details > summary::-webkit-details-marker { display: none; }
.ville-template .vt-faq-item details .vt-chev {
	flex: 0 0 auto;
	color: var(--vt-lime);
	font-size: 1.4rem;
	line-height: 1;
	transition: transform .25s ease;
	margin-top: -2px;
	font-weight: 700;
}
.ville-template .vt-faq-item details[open] .vt-chev { transform: rotate(90deg); }
.ville-template .vt-faq-item details .vt-answer {
	margin: 14px 0 0 36px;
	color: var(--vt-ink);
	font-size: 14px;
	line-height: 19px;
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

/* ─── CTA stacked box ─────────────────────────────────── */
.ville-template .vt-cta-wrap {
	background: #fff;
	padding: 0 32px 100px;
}
.ville-template .vt-cta-box {
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}
.ville-template .vt-cta-box .vt-cta-top {
	background: var(--vt-olive);
	color: #fff;
	padding: 38px 32px;
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	line-height: 1.4;
}
.ville-template .vt-cta-box .vt-cta-top h2 {
	font: inherit;
	color: inherit;
	margin: 0;
}
.ville-template .vt-cta-box .vt-cta-bottom {
	background: var(--vt-lime-bright);
	color: var(--vt-ink);
	padding: 42px 32px 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.ville-template .vt-cta-box .vt-cta-bottom p {
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: clamp(.95rem, 1.2vw, 1.05rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vt-ink);
	margin: 0;
}

.ville-template .vt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #000;
	color: #fff;
	padding: 14px 34px;
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background .25s ease, transform .25s ease, letter-spacing .25s ease;
}
.ville-template .vt-btn:hover {
	background: var(--vt-olive);
	transform: translateY(-2px);
	letter-spacing: 0.14em;
}
.ville-template .vt-btn:focus-visible {
	outline: 3px solid var(--vt-olive);
	outline-offset: 3px;
}

/* ─── Fertilization subsection styling ────────────────── */
.ville-template .vt-sub-block { margin-top: 24px; }
.ville-template .vt-sub-block h3 {
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vt-ink);
	margin: 0 0 10px;
}
.ville-template .vt-sub-block p {
	font-size: 14px;
	line-height: 19px;
	margin: 0 0 22px;
}

/* ─── Final olive full-width CTA ──────────────────────── */
.ville-template .vt-final-cta {
	background: var(--vt-olive);
	color: #fff;
	padding: 90px 32px;
}
.ville-template .vt-final-cta h2 {
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--vt-lime);
	line-height: 1.2;
	margin: 0 0 24px;
}
.ville-template .vt-final-cta .vt-final-cta-lead {
	color: #fff;
	font-size: 14px;
	line-height: 19px;
	max-width: 780px;
	margin: 0 auto 28px;
}
.ville-template .vt-final-cta .vt-final-cta-sub {
	color: #fff;
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 28px;
}
.ville-template .vt-final-cta-buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
}

/* ─── Responsive (tablets) ────────────────────────────── */
@media (max-width: 1100px) {
	.ville-template { padding-top: 0; }

	.ville-template .vt-service-row {
		flex-wrap: wrap;
		gap: 16px;
	}
	.ville-template .vt-service-card {
		flex: 0 0 220px;
		width: 220px;
		max-width: 220px;
		height: 420px;
	}
	.ville-template .vt-split { grid-template-columns: 1fr; }
	.ville-template .vt-split-text,
	.ville-template .vt-split-text--right {
		padding: 64px 32px;
		max-width: none;
		justify-self: stretch;
	}
	.ville-template .vt-split-image { min-height: 340px; order: -1; }
	.ville-template .vt-split--reverse .vt-split-image { order: 0; }
	.ville-template .vt-split--reverse .vt-split-text   { order: -1; }
}

/* ─── Responsive (mobile) ─────────────────────────────── */
@media (max-width: 640px) {
	.ville-template .vt-hero { padding: 64px 0 50px; }
	.ville-template .vt-hero-inner { padding: 0 24px; }
	.ville-template .vt-service-row {
		gap: 14px;
		padding: 0 16px;
		margin-top: 40px;
	}
	.ville-template .vt-service-card {
		flex: 0 0 calc(50% - 7px);
		width: calc(50% - 7px);
		max-width: none;
		height: auto;
		min-height: 320px;
	}
	.ville-template .vt-service-card .vt-label {
		font-size: 0.78rem;
		padding: 16px 10px;
		min-height: 72px;
	}
	.ville-template .vt-service-card .vt-photo { aspect-ratio: 3/4; flex: none; }
	.ville-template .vt-lime-band { padding: 54px 24px; }
	.ville-template .vt-split-text,
	.ville-template .vt-split-text--right { padding: 48px 24px; }
	.ville-template .vt-split-image { min-height: 260px; }
	.ville-template .vt-faq { padding: 72px 24px 56px; }
	.ville-template .vt-faq-item details > summary { font-size: 0.82rem; gap: 14px; }
	.ville-template .vt-faq-item details .vt-answer { margin-left: 30px; font-size: 0.92rem; }
	.ville-template .vt-cta-box .vt-cta-top,
	.ville-template .vt-cta-box .vt-cta-bottom { padding: 30px 24px; }
	.ville-template .vt-cta-wrap { padding: 0 16px 64px; }
}

/* ─── Reduce motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ville-template *,
	.ville-template *::before,
	.ville-template *::after {
		animation-duration: 0s !important;
		transition-duration: 0s !important;
	}
}