:root {
	--green: #85bc68;
	--green-dark: #74a958;
	--ink: #1a1b1e;
	--text: #333333;
	--footer-link: #9ee8ff;
	--shadow-card: 0 0 11px 0 rgba(0, 0, 0, 0.5);
	--shadow-menu: 8px 8px 30px 0 rgba(42, 67, 113, 0.15);
	--maxw: 1200px;
}

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

body {
	margin: 0;
	font-family: "Red Hat Text", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text);
	background: #fff;
}

h1, h2, h3, h4, h5 { font-family: "Red Hat Display", Arial, sans-serif; }
img { max-width: 100%; height: auto; }
a { color: var(--green); }

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 1200;
	background: #fff;
}

.site-header__top {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 14px 50px;
}

.site-logo { display: inline-flex; }
.site-logo__desktop { height: 88px; width: auto; }
.site-logo__mobile { display: none; height: 46px; width: auto; }

.nav-toggle {
	display: none;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f0f6ff;
	color: var(--ink);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ==========================================================================
   Navigation principale
   ========================================================================== */

.main-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 4px 50px 14px;
}

.main-nav__close { display: none; }

.menu {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu__item { position: relative; }

.menu__item > a {
	display: block;
	padding: 12px 20px;
	color: var(--ink);
	font-family: "Red Hat Display", Arial, sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
}
.menu__item > a:hover { color: var(--green); }

.menu__item--has-children > a::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	margin: 0;
	padding: 20px 25px;
	list-style: none;
	background: #fff;
	border-radius: 15px;
	box-shadow: var(--shadow-menu);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 100;
}
.menu__item--has-children:hover > .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.submenu a {
	display: block;
	padding: 5px 0;
	color: var(--ink);
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
}
.submenu a:hover { color: var(--green); }

.menu__item--active::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 3px;
	height: 4px;
	background: #fb4c1d;
	border-radius: 4px;
}
.submenu__item--active > a { color: var(--green); }

.btn-contact {
	grid-column: 3;
	justify-self: end;
	padding: 16px 28px;
	background: var(--green);
	color: #fff;
	font-family: "Red Hat Display", Arial, sans-serif;
	font-weight: 700;
	font-size: 16px;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 25px;
	transition: background .2s;
}
.btn-contact:hover { background: var(--green-dark); }

.nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 1100;
}
.nav-overlay.is-visible { display: block; }

/* ==========================================================================
   En-tête — version mobile (≤ 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
	.site-header__top {
		justify-content: space-between;
		padding: 10px 15px;
	}
	.site-logo__desktop { display: none; }
	.site-logo__mobile { display: block; }
	.nav-toggle { display: flex; }

	.main-nav {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		width: 310px;
		max-width: 85vw;
		height: 100%;
		padding: 55px 35px 35px;
		background: #fff;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .3s ease;
		z-index: 1200;
	}
	.main-nav.is-open { transform: translateX(0); }

	.main-nav__close {
		display: block;
		position: absolute;
		top: 14px;
		right: 18px;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 0;
		background: none;
		color: #78869b;
		cursor: pointer;
	}
	.main-nav__close svg { width: 100%; height: 100%; }

	.menu { display: block; }
	.menu__item > a {
		padding: 9px 0;
		font-size: 15px;
		font-weight: 500;
	}
	.menu__item--has-children > a::after { float: right; }
	.menu__item--has-children.is-expanded > a::after {
		transform: translateY(2px) rotate(-135deg);
	}

	.submenu {
		position: static;
		display: none;
		min-width: 0;
		padding: 0 0 6px 15px;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.menu__item--has-children.is-expanded > .submenu { display: block; }
	.submenu a { font-size: 15px; }

	.btn-contact {
		display: inline-block;
		margin-top: 20px;
	}
}

/* ==========================================================================
   Section « 3 atouts » (cartes qui chevauchent le slider)
   ========================================================================== */

.features {
	position: relative;
	z-index: 2;
	margin-top: -40px;
	padding: 0 20px 110px;
}
.features__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.feature-card {
	padding: 18px;
	text-align: center;
	background: #fff;
	border-radius: 20px;
	box-shadow: var(--shadow-card);
}
.feature-card__icon { width: 112px; height: auto; }
.feature-card__title {
	margin: 0;
	color: var(--green);
	font-family: "Roboto", Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
}

@media (max-width: 767px) {
	.features {
		margin-top: 0;
		padding-bottom: 70px;
	}
	.features__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.site-footer {
	background: var(--green);
	color: #fff;
}
.site-footer a { color: var(--footer-link); }

.site-footer__main {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 60px 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.footer-logo {
	display: inline-block;
	padding: 10px 14px;
	background: #fff;
	border-radius: 9px;
}
.footer-logo img { display: block; }

.footer-heading {
	margin: 0 0 30px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.footer-cities {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	column-count: 2;
}
.footer-cities li { padding: 3px 0; }

.footer-contact p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
}
.footer-contact img { width: 35px; height: 35px; flex: 0 0 auto; }

.footer-links {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}
.footer-links li { padding: 3px 0; }
.footer-links a, .footer-links li { color: var(--footer-link); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

.footer-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-bottom: 25px;
	background: #fff;
	border-radius: 50%;
	color: var(--green);
}
.footer-social svg { width: 22px; height: 22px; fill: currentColor; }

.site-footer__copyright {
	padding: 25px 20px;
	text-align: center;
	font-size: 15px;
}
.site-footer__copyright p { margin: 0; }

@media (max-width: 991px) {
	.site-footer__main { grid-template-columns: 1fr; gap: 40px; }
}

/* ==========================================================================
   Contenu de démonstration
   ========================================================================== */

.page-content {
	max-width: 960px;
	margin: 0 auto;
	padding: 60px 20px;
}

/* ==========================================================================
   Section intro (image + texte de présentation)
   ========================================================================== */

.intro { padding: 50px 20px 60px; }
.intro__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}
.intro__media img { display: block; width: 100%; }

.eyebrow {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #a5b7d2;
}
.intro__title {
	margin: 0 0 18px;
	font-size: 28px;
	font-weight: 900;
	color: var(--ink);
}
.intro__text { color: var(--ink); }
.intro__text p { margin: 0 0 16px; }
.intro__text p.lead { font-size: 21px; line-height: 1.6; }
.intro__text ul { margin: 0 0 16px; padding-left: 20px; }

@media (max-width: 860px) {
	.intro__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   Sections « prestations » (cartes de services)
   ========================================================================== */

.prestations {
	padding: 60px 20px 70px;
	background: var(--green);
	color: #fff;
}
.prestations--pro { background: #6ca04d; }

.prestations__head {
	max-width: 800px;
	margin: 0 auto 40px;
	text-align: center;
}
.prestations__title {
	margin: 0;
	font-size: 36px;
	font-weight: 900;
	color: #fff;
}
.prestations__subtitle {
	margin: 0 0 16px;
	font-size: 30px;
	font-weight: 900;
	color: #fe4c1c;
}
.prestations__intro { margin: 0; font-size: 17px; }

.prestations__grid {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.prestation-card {
	display: flex;
	flex-direction: column;
	padding: 16px;
	background: #fff;
	border-radius: 18px;
}
.prestation-card__title {
	margin: 0 0 12px;
	font-size: 25px;
	font-weight: 700;
	text-align: center;
	color: var(--green);
}
.prestation-card__img { display: block; width: 100%; height: auto; }
.prestation-card__text {
	margin: 14px 0 18px;
	font-size: 14px;
	color: #000;
}

.btn-more {
	align-self: center;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: #fff;
	color: var(--green);
	border: 2px solid var(--green);
	border-radius: 19px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.btn-more:hover { background: var(--green); color: #fff; }
.btn-more svg { width: 18px; height: 18px; flex: 0 0 auto; }

@media (max-width: 991px) {
	.prestations__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.prestations__grid { grid-template-columns: 1fr; }
	.prestations__title { font-size: 28px; }
	.prestations__subtitle { font-size: 24px; }
}

/* ==========================================================================
   Bannière d'en-tête de page (titre + fil d'Ariane sur image)
   ========================================================================== */

.page-banner {
	padding: 100px 20px;
	background: #2c2c2c center / cover no-repeat;
	text-align: center;
	color: #fff;
}
.page-banner__inner { max-width: var(--maxw); margin: 0 auto; }
.page-banner__title {
	margin: 0;
	font-size: 50px;
	font-weight: 700;
	color: #fff;
}

.breadcrumb { margin-top: 30px; }
.breadcrumb ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
.breadcrumb li {
	display: inline;
	text-transform: capitalize;
}
.breadcrumb li + li::before {
	content: "\203A";
	margin: 0 10px;
	color: #fff;
}
.breadcrumb a { color: #fff; }
.breadcrumb a:hover { color: #fe4c1c; }
.breadcrumb li[aria-current] { color: #fff; }

@media (max-width: 600px) {
	.page-banner { padding: 50px 20px; }
	.page-banner__title { font-size: 30px; }
}

/* ==========================================================================
   Page « Calendrier d'entretien »
   ========================================================================== */

.calendrier-intro { padding: 70px 20px; }
.calendrier-intro__inner  { text-align: left; max-width: 1200px; margin: auto;}

.section-title {
	margin: 0 0 18px;
	font-size: 36px;
	font-weight: 900;
	color: var(--green);
}
.calendrier-intro__text p { margin: 0 0 16px; }

.calendrier-main { padding: 50px 20px; background: #fcfaf7; }
.calendrier-main__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}
.calendrier-main h2 {
	margin: 0 0 14px;
	font-size: 28px;
	font-weight: 900;
	color: var(--ink);
}
.calendrier-download p { margin: 0 0 20px; }
.calendrier-download__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.months { margin-top: 4px; }
.month { border: 1px solid #d4d4d4; }
.month + .month { border-top: none; }
.month > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 20px;
	cursor: pointer;
	list-style: none;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 24px;
	font-weight: 800;
	color: #20732c;
}
.month > summary::-webkit-details-marker { display: none; }
.month > summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	color: #606060;
}
.month[open] > summary::after { content: "\2212"; }
.month__body { padding: 4px 20px 16px; }
.month__body ul { margin: 0; padding-left: 20px; }
.month__body li { margin-bottom: 8px; }
.month__body p { margin: 0 0 12px; }

@media (max-width: 860px) {
	.calendrier-main__inner { grid-template-columns: 1fr; gap: 30px; }
	.section-title { font-size: 28px; }
	.month > summary { font-size: 20px; }
}

/* ==========================================================================
   Page « Service à la Personne »
   ========================================================================== */

.btn-sap {
	display: inline-block;
	padding: 12px 28px;
	background: #ae1163;
	color: #fff;
	font-family: "Roboto", Arial, sans-serif;
	font-weight: 500;
	border-radius: 14px;
	text-decoration: none;
}
.btn-sap:hover { background: #8c0d4f; }

.sap-intro { padding: 70px 20px; text-align: center; }
.sap-intro__inner  { text-align: left; max-width: 1200px; margin: auto;}
.sap-intro p { margin: 0 0 16px; }

.sap-avance { padding: 30px 20px; }
.sap-avance__box {
	max-width: var(--maxw);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 30px;
	background: #244179;
	border: 7px solid #ae0061;
	color: #fff;
}
.sap-avance__media { flex: 0 0 230px; text-align: center; }
.sap-avance__media img { max-width: 100%; height: auto; }
.sap-avance__body h3 {
	margin: 0 0 14px;
	font-size: 26px;
	font-weight: 900;
	color: #fff;
}
.sap-avance__body p { margin: 0 0 14px; }
.sap-avance__body .btn-sap { margin-top: 6px; }

.sap-services { padding: 60px 20px; background: #fcfaf7; }
.sap-services__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 400px 1fr;
	gap: 50px;
	align-items: center;
}
.sap-services__media { text-align: center; }
.sap-services__media img { max-width: 100%; height: auto; }
.sap-services__body h3 {
	margin: 0 0 16px;
	font-size: 30px;
	font-weight: 900;
	color: var(--green);
}
.sap-services__body p { margin: 0 0 14px; }
.sap-services__list {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 30px;
}
.sap-services__list li {
	margin-bottom: 8px;
	padding-left: 24px;
	position: relative;
	break-inside: avoid;
}
.sap-services__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 10px;
	height: 10px;
	background: var(--green);
	border-radius: 50%;
}

.sap-demarche { padding: 60px 20px; }
.sap-demarche__inner { max-width: var(--maxw); margin: 0 auto; }
.sap-demarche__inner h3 {
	margin: 0 0 16px;
	font-size: 30px;
	font-weight: 900;
	color: var(--green);
}
.sap-demarche__inner > p { margin: 0 0 14px; }
.sap-steps {
	margin-top: 30px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.sap-steps img {
	display: block;
	width: 100%;
	height: auto;
}
.sap-cta { margin-top: 36px; text-align: center; }

@media (max-width: 860px) {
	.sap-avance__box { flex-direction: column; text-align: center; }
	.sap-avance__media { flex-basis: auto; }
	.sap-services__inner { grid-template-columns: 1fr; gap: 30px; }
	.sap-services__list { columns: 1; }
	.sap-steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Page « Plateforme Valorisation du Bois »
   ========================================================================== */

.bois-intro { padding: 70px 20px; text-align: center; }
.bois-intro__inner  { text-align: left; max-width: 1200px; margin: auto;}
.bois-intro p { margin: 0; }

.bois-economie { padding: 60px 20px; background: #fcfaf7; }
.bois-economie__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}
.bois-economie__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}
.bois-economie__body p { margin: 0 0 14px; }

@media (max-width: 860px) {
	.bois-economie__inner { grid-template-columns: 1fr; gap: 30px; }
}

/* ==========================================================================
   Page « Nous Contacter »
   ========================================================================== */

.contact-main { padding: 60px 20px; }
.contact-main__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 380px 1fr;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.contact-infos {
	padding: 40px;
	background: linear-gradient(140deg, #479c53 0%, #61ce70 100%);
	color: #fff;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.85); }
.contact-infos__title {
	margin: 0 0 26px;
	font-size: 28px;
	font-weight: 900;
	color: #fff;
}
.contact-info { margin-bottom: 22px; }
.contact-info h3 {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.contact-info p { margin: 0; }
.contact-info a { color: #fff; }

.contact-form { padding: 40px; background: #fff; }
.contact-form__lead {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
}
.cform { display: flex; flex-direction: column; gap: 14px; }
.cform input,
.cform textarea {
	padding: 12px 16px;
	border: 1px solid #d4d4d4;
	border-radius: 6px;
	font: inherit;
	color: var(--ink);
}
.cform input:focus,
.cform textarea:focus {
	outline: 2px solid var(--green);
	border-color: var(--green);
}
.cform textarea { resize: vertical; }
.cform .btn-contact {
	align-self: flex-start;
	border: 0;
	cursor: pointer;
}

.cform__legal {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #8a8f98;
}
.cform__legal a { color: #8a8f98; }

.form-message {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 6px;
}
.form-message--ok { background: #e8f5e2; color: #2c6b2f; }
.form-message--error { background: #fdecea; color: #b3261e; }
ul.form-message--error { padding-left: 36px; }
ul.form-message--error li { margin: 2px 0; }

.contact-map { line-height: 0; }
.contact-map iframe {
	display: block;
	width: 100%;
	border: 0;
}

@media (max-width: 760px) {
	.contact-main__inner { grid-template-columns: 1fr; }
}


.svc-intro { padding: 70px 20px; }
.svc-intro__inner { text-align: left; max-width: 1200px; margin: auto;}
.svc-intro p { margin: 0 0 16px; }
.svc-intro h3 {
	margin: 28px 0 12px;
	font-size: 24px;
	font-weight: 900;
	color: var(--ink);
}
.svc-intro ul {
	display: inline-block;
	margin: 4px 0 16px;
	padding-left: 22px;
	text-align: left;
}
.svc-intro li { margin-bottom: 8px; }
.svc-intro__sap { display: inline-block; margin: 6px 0 4px; }

.svc-row { padding: 60px 20px; }
.svc-row--cream { background: #fcfaf7; }
.svc-row__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}
.svc-row--reverse .svc-row__media { order: 2; }
.svc-row__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}
.svc-row__media img + img { margin-top: 18px; }
.svc-row__body > :first-child { margin-top: 0; }
.svc-row__body h2,
.svc-row__body h3,
.svc-row__body h4 {
	margin: 0 0 16px;
	font-weight: 900;
	color: var(--green);
}
.svc-row__body h2 { font-size: 30px; }
.svc-row__body h3,
.svc-row__body h4 { font-size: 25px; }
.svc-row__body h2 + h2,
.svc-row__body h3 + h3 { margin-top: -10px; }
.svc-row__body .svc-sub {
	margin: 20px 0 6px;
	font-size: 18px;
	font-weight: 800;
	color: var(--ink);
}
.svc-row__body p { margin: 0 0 14px; }
.svc-row__body ul { margin: 0 0 14px; padding-left: 22px; }
.svc-row__body li { margin-bottom: 10px; }
.svc-row__body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.svc-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	align-content: start;
}
.svc-gallery figure { margin: 0; }
.svc-gallery img { border-radius: 8px; margin: 0; }
.svc-gallery img + img { margin-top: 0; }
.svc-gallery figcaption {
	margin-top: 6px;
	font-size: 13px;
	color: #606060;
	text-align: center;
}

.svc-cta { padding: 30px 20px 30px; text-align: center; }
/* Le bouton réutilise .btn-contact (conçu pour la grille de l'en-tête) :
   on neutralise le display inline hérité pour que le padding et le centrage soient corrects. */
.svc-cta .btn-contact { display: inline-block; }

.svc-text { padding: 30px 20px 30px; }
.svc-text__inner { max-width: var(--maxw); margin: 0 auto; }
.svc-text p { margin: 0 0 14px; }

.svc-promo { padding: 16px 20px 55px; text-align: center; }
.svc-promo img { max-width: 100%; height: auto; }

@media (max-width: 860px) {
	.svc-row__inner { grid-template-columns: 1fr; gap: 30px; }
	.svc-row--reverse .svc-row__media { order: 0; }
}