/* Compostage Maroc : page d'accueil « terre vivante » (sol, papier kraft déchiré) */
:root {
	--cmh-soil: #241912;
	--cmh-kraft: #e0d6c0;
	--cmh-kraft-ink: #3a2a1d;
	--cmh-kraft-soft: #6a5643;
	--cmh-root: #efe5d0;
	--cmh-root-soft: #cdbfa6;
	--cmh-leaf: var(--cm-leaf, #8dbf57);
	--cmh-green: var(--cm-green, #527f3a);
	--cmh-forest: var(--cm-forest, #244c2c);
	--cmh-tex: url(/wp-content/uploads/cm-3d/soil-compost-maroc.webp);
	--cmh-paper: url(/wp-content/uploads/cm-3d/paper-kraft.webp);
	--cmh-edge: url(/wp-content/uploads/cm-3d/torn-edge.svg);
}
@media (max-width: 700px) { :root { --cmh-tex: url(/wp-content/uploads/cm-3d/soil-compost-maroc-m.webp); } }
.elementor-element.cmh-main { position: relative; z-index: 2; }
.cmh-hero, .cmh-paper, .cmh-soil { position: relative; font-family: var(--cm-font-body, "Alegreya Sans", system-ui, sans-serif); }
.cmh-hero *, .cmh-paper *, .cmh-soil * { box-sizing: border-box; }
.cmh-wrap { width: min(1200px, 100% - 2 * var(--cm-gutter, 1rem)); margin: 0 auto; }
.cmh-hero h1, .cmh-paper h2, .cmh-soil h2, .cmh-paper h3, .cmh-soil h3 { font-family: var(--cm-font-heading, "Alegreya", Georgia, serif); }

/* --- En-tête transparent au-dessus de la terre (accueil, avant défilement) --- */
body.home .site-header:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.home .site-header:not(.is-scrolled) .site-brand__name a,
body.home .site-header:not(.is-scrolled) .site-header__icon { color: var(--cmh-root); }
body.home .site-header:not(.is-scrolled) .site-header__icon:hover { background: rgb(255 255 255 / .1); }
@media (min-width: 1024px) {
	body.home .site-header:not(.is-scrolled) .cm-menu > li > a { color: var(--cmh-root); }
	body.home .site-header:not(.is-scrolled) .cm-menu > li > a:hover { color: #fff; }
}
body.home .site-header:not(.is-scrolled):has(.site-nav.is-open) { background: var(--cm-ivory, #f7f6ef); }
body.home .site-header:not(.is-scrolled):has(.site-nav.is-open) .site-brand__name a,
body.home .site-header:not(.is-scrolled):has(.site-nav.is-open) .site-header__icon { color: var(--cm-ink, #30251e); }

/* --- Héros ------------------------------------------------------------------ */
.cmh-hero {
	margin-top: calc(-1 * var(--cm-header-h, 76px));
	padding: calc(var(--cm-header-h, 76px) + clamp(3rem, 2rem + 5vw, 7rem)) 0 clamp(6rem, 4rem + 8vw, 11rem);
	min-height: min(100svh, 980px);
	display: grid; align-items: center; overflow: hidden; isolation: isolate;
	background: var(--cmh-soil) var(--cmh-tex) center / cover;
	color: var(--cmh-root); text-align: center;
}
.cmh-hero::before { /* lisibilité du texte au centre, terre plus sombre en haut */
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(ellipse 60% 55% at 50% 48%, rgb(18 12 8 / .72), rgb(18 12 8 / .25) 70%, transparent), linear-gradient(rgb(18 12 8 / .55), transparent 30%);
}
.cmh-hero__inner { position: relative; z-index: 2; width: min(960px, 100% - 2 * var(--cm-gutter, 1rem)); margin: 0 auto; }
.cmh-hero__mark { display: block; width: 64px; height: auto; margin: 0 auto .6rem; }
.cmh-hero .cmh-hero__title {
	margin: 0; color: #fff; font-weight: 800; letter-spacing: -.025em; line-height: .92;
	font-size: min(7rem, calc((100vw - 2.5rem) / 7.9)); white-space: nowrap; text-shadow: 0 2px 30px rgb(0 0 0 / .45);
}
.cmh-hero__sub { margin: .9rem 0 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 500; color: var(--cmh-root); }
.cmh-hero__tag { margin: .35rem 0 0; font-family: var(--cm-font-heading, Georgia, serif); font-style: italic; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); color: var(--cmh-root-soft); }
.cmh-hero__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.8rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.cmh-hero__links a {
	display: inline-flex; align-items: center; min-height: 44px; color: var(--cmh-root) !important; text-decoration: none; font-weight: 600; font-size: 1.05rem;
	background: linear-gradient(var(--cmh-leaf), var(--cmh-leaf)) no-repeat 0 85% / 0 2px; transition: background-size .25s ease, color .2s;
}
.cmh-hero__links a:hover, .cmh-hero__links a:focus-visible { color: #fff !important; background-size: 100% 2px; }
.cmh-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 2rem 0 0; }
.cmh-hero__plant {
	position: absolute; z-index: 1; pointer-events: none; height: auto;
	right: max(-40px, calc(50% - 700px)); top: calc(var(--cm-header-h, 76px) + 40px); width: clamp(240px, 25vw, 380px);
	filter: drop-shadow(0 18px 18px rgb(0 0 0 / .45));
}
@media (max-width: 900px) {
	.cmh-hero__plant { right: -70px; width: 230px; opacity: .55; }
}

/* boutons */
.cmh-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .7rem 1.6rem; border-radius: 6px;
	background: var(--cmh-green); color: #fff !important; font-weight: 700; font-size: 1.05rem; text-decoration: none; border: 2px solid var(--cmh-green);
	box-shadow: 0 10px 24px -14px rgb(0 0 0 / .8); transition: background-color .2s, border-color .2s;
}
.cmh-btn:hover { background: var(--cmh-forest); border-color: var(--cmh-forest); }
.cmh-btn--line { background: rgb(20 13 9 / .35); border-color: var(--cmh-root-soft); color: var(--cmh-root) !important; box-shadow: none; }
.cmh-btn--line:hover { background: rgb(255 255 255 / .08); border-color: var(--cmh-root); }
.cmh-btn:focus-visible, .cmh-hero__links a:focus-visible, .cmh-link:focus-visible, .cmh-item a:focus-visible, .cmh-step a:focus-visible, .cmh-know__guides a:focus-visible { outline: 3px solid #f2b632; outline-offset: 3px; }

/* --- Papier kraft déchiré --------------------------------------------------- */
.cmh-paper {
	z-index: 2; background: var(--cmh-kraft) var(--cmh-paper); color: var(--cmh-kraft-ink);
	padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0;
	margin: -1px 0;
}
.cmh-paper::before, .cmh-paper::after {
	content: ""; position: absolute; left: 0; right: 0; height: clamp(26px, 3vw, 46px); pointer-events: none;
	background: var(--cmh-edge) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 -3px 4px rgb(0 0 0 / .3));
}
.cmh-paper::before { bottom: calc(100% - 1px); }
.cmh-paper::after { top: calc(100% - 1px); transform: scale(-1, -1); }
.cmh-paper h2 { margin: 0 0 .8rem; color: var(--cmh-forest); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); line-height: 1.05; letter-spacing: -.015em; }
.cmh-paper p { color: var(--cmh-kraft-soft); }
.cmh-wrap .cmh-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--cmh-forest) !important; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.cmh-wrap .cmh-link:hover { color: var(--cmh-green) !important; }

/* produits */
.cmh-products__grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .cmh-products__grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 4rem; align-items: start; } }
.cmh-products__intro h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); }
.cmh-products__intro p { margin: 0 0 .6rem; font-size: 1.15rem; line-height: 1.55; max-width: 32rem; }
.cmh-sprout { display: none; }
@media (min-width: 1000px) { .cmh-sprout { display: block; width: 220px; height: auto; margin: 2.5rem 0 0 -.5rem; filter: drop-shadow(0 14px 14px rgb(58 42 29 / .25)); } }
.cmh-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cmh-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmh-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1.25rem; align-items: center; }
@media (min-width: 1000px) { .cmh-item { grid-template-columns: 132px minmax(0, 1fr); } }
.cmh-items .cmh-item__img, .cmh-steps .cmh-step__img {
	display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #f6efe0;
	box-shadow: 0 0 0 5px #f7f1e3, 0 14px 26px -12px rgb(58 42 29 / .55);
}
.cmh-items .cmh-item__img img, .cmh-steps .cmh-step__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .4s ease; }
.cmh-items .cmh-item__img--bag img { object-fit: contain; padding: 10%; background: radial-gradient(circle at 50% 70%, #d9ccb0, #f6efe0 70%); }
.cmh-items .cmh-item__img--light img, .cmh-steps .cmh-step__img--light img { object-fit: contain; padding: 8%; background: #fff; }
.cmh-item:hover .cmh-item__img img, .cmh-step:hover .cmh-step__img img { scale: 1.06; }
.cmh-item h3 { margin: 0 0 .3rem; font-size: 1.45rem; line-height: 1.1; }
.cmh-item h3 a { color: var(--cmh-kraft-ink) !important; text-decoration: none; }
.cmh-item h3 a:hover { color: var(--cmh-forest) !important; text-decoration: underline; text-underline-offset: .2em; }
.cmh-item p { margin: 0; font-size: 1rem; line-height: 1.5; }

/* --- Bandes de terre -------------------------------------------------------- */
.cmh-soil {
	z-index: 1; color: var(--cmh-root);
	background: linear-gradient(rgb(20 13 9 / .78), rgb(20 13 9 / .86)), var(--cmh-soil) var(--cmh-tex) center / 1400px auto;
	padding: clamp(5rem, 3.5rem + 5vw, 8rem) 0;
}
.cmh-soil h2 { margin: 0 0 .8rem; color: #fff; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); line-height: 1.05; letter-spacing: -.015em; }
.cmh-services__head { max-width: 44rem; margin: 0 auto 3.5rem; text-align: center; }
.cmh-services__head p { margin: 0; font-size: 1.15rem; line-height: 1.6; color: var(--cmh-root-soft); }

/* services : six étapes reliées comme des racines */
.cmh-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4rem; grid-template-columns: minmax(0, 1fr); counter-reset: st; }
.cmh-step { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 1.2rem; align-items: start; counter-increment: st; }
.cmh-steps .cmh-step__img { position: relative; grid-row: span 2; box-shadow: 0 0 0 4px rgb(239 229 208 / .9), 0 16px 30px -12px rgb(0 0 0 / .9); }
.cmh-step::before { /* numéro de l'étape */
	content: counter(st); position: absolute; z-index: 2; left: -6px; top: -6px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
	background: var(--cmh-leaf); color: #1b2a12; font-weight: 800; font-size: 1rem; box-shadow: 0 0 0 3px var(--cmh-soil);
}
.cmh-step::after { /* racine qui relie à l'étape suivante */
	content: ""; position: absolute; left: 47px; top: 104px; bottom: -2.2rem; width: 2px;
	background: repeating-linear-gradient(var(--cmh-root-soft) 0 8px, transparent 8px 14px); opacity: .6;
}
.cmh-step:last-child::after { display: none; }
.cmh-step h3 { margin: .3rem 0 .35rem; font-size: 1.4rem; line-height: 1.15; }
.cmh-step h3 a { color: #fff !important; text-decoration: none; }
.cmh-step h3 a:hover { text-decoration: underline; text-underline-offset: .2em; }
.cmh-step p { margin: 0; color: var(--cmh-root-soft); line-height: 1.5; font-size: 1rem; }
@media (min-width: 900px) {
	.cmh-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 2.5rem; }
	.cmh-step { display: block; text-align: center; }
	.cmh-steps .cmh-step__img { width: 150px; margin: 0 auto 1.2rem; }
	.cmh-step::before { left: calc(50% - 80px); top: -4px; }
	.cmh-step::after { left: calc(50% + 86px); right: calc(-50% - 1.25rem + 86px); top: 75px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--cmh-root-soft) 0 8px, transparent 8px 14px); }
	.cmh-step:nth-child(3n)::after { display: none; }
	.cmh-step p { max-width: 20rem; margin: 0 auto; }
}
.cmh-services__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 3.5rem 0 0; }

/* --- Pourquoi le compost / guides -------------------------------------------- */
.cmh-know__grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .cmh-know__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 5rem; } }
.cmh-know__lead { margin: 0 0 2rem; font-size: 1.2rem; line-height: 1.6; max-width: 40rem; }
.cmh-know__points { display: grid; gap: 1.6rem; }
@media (min-width: 640px) { .cmh-know__points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cmh-know__points > div { border-top: 3px solid var(--cmh-green); padding-top: .9rem; }
.cmh-know__points h3 { margin: 0 0 .35rem; font-size: 1.35rem; color: var(--cmh-forest); }
.cmh-know__points p { margin: 0; font-size: 1rem; line-height: 1.55; }
.cmh-know__guides h3 { margin: 0 0 1rem; font-size: 1.5rem; color: var(--cmh-kraft-ink); }
.cmh-know__guides ul { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .3rem; }
.cmh-know__guides li a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; align-items: center; padding: .55rem 0; color: var(--cmh-kraft-ink) !important; text-decoration: none; font-weight: 600; line-height: 1.35; border-bottom: 1px solid rgb(58 42 29 / .15); }
.cmh-know__guides li a:hover span { color: var(--cmh-forest); text-decoration: underline; text-underline-offset: .2em; }
.cmh-know__guides li img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #f7f1e3; }

/* --- Formulaire de devis posé sur la terre ------------------------------------ */
.elementor-element.cmh-formband {
	position: relative; z-index: 1;
	background: linear-gradient(rgb(20 13 9 / .74), rgb(36 25 18 / .96) 85%, var(--cm-soil, #30251e)), var(--cmh-soil) var(--cmh-tex) center / 1400px auto;
	padding: clamp(5rem, 3.5rem + 5vw, 8rem) var(--cm-gutter, 1rem) clamp(3rem, 2rem + 3vw, 5rem) !important;
}
.cmh-formband .cmw-contact { background: var(--cmh-kraft) var(--cmh-paper) !important; border-radius: 4px; width: min(1200px, 100%); margin: 0 auto; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .9); }

@media (prefers-reduced-motion: reduce) {
	.cmh-item__img img, .cmh-step__img img, .cmh-hero__links a { transition: none; }
}

/* Titre long « Technique de Compostage au Maroc » : une ligne sur grand écran, deux lignes équilibrées sur mobile. */
.cmh-hero .cmh-hero__title { font-size: min(4.6rem, calc((100vw - 2.5rem) / 21)); }
@media (max-width: 760px) {
	.cmh-hero .cmh-hero__title { white-space: normal; text-wrap: balance; font-size: clamp(2.3rem, 10.4vw, 3.6rem); line-height: 1; }
}