/* Compostage Maroc : habillage « terre vivante » de la page Services.
   Chargé après services-finder.css et plateforme-3d.css ; ne change pas le contenu. */
.cmsv, .cm3d, .cmwork {
	--k-soil: #241912;
	--k-kraft: #e0d6c0;
	--k-card: #fbf8f1;
	--k-ink: #3a2a1d;
	--k-soft: #6a5643;
	--k-root: #efe5d0;
	--k-root-soft: #cdbfa6;
	--k-leaf: #8dbf57;
	--k-green: #527f3a;
	--k-forest: #244c2c;
	--k-ease: cubic-bezier(.2, .8, .2, 1);
	--k-edge: url(/wp-content/uploads/cm-3d/torn-edge.svg);
	--k-tex: url(/wp-content/uploads/cm-3d/soil-compost-maroc.webp);
	--k-paper: url(/wp-content/uploads/cm-3d/paper-kraft.webp);
	font-family: var(--cm-font-body, "Alegreya Sans", system-ui, sans-serif);
}
.cmsv h1, .cmsv h2, .cmsv h3, .cm3d h2, .cm3d h3, .cmwork h2, .cmwork h3, .cmfind__title, .cmfind__ask, .cmfind__sol { font-family: var(--cm-font-heading, "Alegreya", Georgia, serif); }
.page-id-1027 .site-main { padding-bottom: 0; }
/* les sections « papier » passent au-dessus de leurs voisines pour que les bords déchirés débordent */
.page-id-1027 .elementor-element-c866fc3, .page-id-1027 .elementor-element-b3d0a21 { position: relative; z-index: 2; }

/* bords de papier déchiré (réutilisables) */
.cmsv__hero::after, .cmsv::after, .cmwork::before, .cmwork::after {
	content: ""; position: absolute; left: 0; right: 0; height: clamp(26px, 3vw, 46px); pointer-events: none;
	background: var(--k-edge) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 -3px 4px rgb(0 0 0 / .3));
}

/* --- 1. En-tête sur la terre ---------------------------------------------------- */
.cmsv { position: relative; padding: 0 0 clamp(4rem, 3rem + 4vw, 6.5rem); background: var(--k-kraft) var(--k-paper); color: var(--k-ink); }
.cmsv::after { top: calc(100% - 1px); transform: scale(-1, -1); }
.cmsv .cmsv__hero {
	position: relative; isolation: isolate; align-items: center;
	margin: 0 calc(50% - 50vw) clamp(3rem, 2rem + 3vw, 5rem); padding: clamp(2.6rem, 1.8rem + 3vw, 4.5rem) calc(50vw - 50%) clamp(5rem, 3.5rem + 4vw, 7rem);
	background: linear-gradient(90deg, rgb(18 12 8 / .86), rgb(18 12 8 / .55) 60%, rgb(18 12 8 / .4)), var(--k-soil) var(--k-tex) center / cover;
}
.cmsv__hero::after { bottom: -1px; }
.cmsv .cmsv__lead h1 { color: #fff; font-size: clamp(2.6rem, 1.5rem + 4vw, 4.8rem); line-height: .98; letter-spacing: -.025em; text-shadow: 0 2px 24px rgb(0 0 0 / .4); animation: k-rise .7s var(--k-ease) both; }
.cmsv .cmsv__lead p { color: var(--k-root); font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); animation: k-rise .7s var(--k-ease) both .1s; }
.cmsv .cmsv__jump { animation: k-rise .7s var(--k-ease) both .2s; gap: .7rem; }
.cmsv .cmsv__jump a {
	min-height: 48px; padding: .6rem 1.3rem; border-radius: 6px; text-decoration: none; font-weight: 700;
	background: var(--k-green); border: 2px solid var(--k-green); color: #fff !important;
}
.cmsv .cmsv__jump a + a { background: rgb(20 13 9 / .35); border-color: var(--k-root-soft); color: var(--k-root) !important; }
.cmsv .cmsv__jump a:hover { background: var(--k-forest); border-color: var(--k-forest); color: #fff !important; }
@keyframes k-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* questionnaire : une fiche de papier posée sur la terre */
.cmsv .cmfind {
	background: var(--k-card) var(--k-paper); color: var(--k-ink); border-radius: 20px; min-height: 0;
	box-shadow: 0 30px 60px -30px rgb(0 0 0 / .85); animation: k-rise .8s var(--k-ease) both .25s;
}
.cmsv .cmfind__title { color: var(--k-forest); font-size: 1.35rem; }
.cmsv .cmfind__progress { color: var(--k-soft); font-weight: 600; }
.cmsv .cmfind__bar { background: rgb(58 42 29 / .12); }
.cmsv .cmfind__bar span { background: linear-gradient(90deg, var(--k-leaf), var(--k-green)); }
.cmsv .cmfind__ask { color: var(--k-ink); }
.cmsv .cmfind__opt {
	background: #fff; border: 1.5px solid rgb(58 42 29 / .18); color: var(--k-ink); font-weight: 600;
	box-shadow: 0 6px 14px -12px rgb(36 25 18 / .5); transition: border-color .2s, background-color .2s, transform .2s var(--k-ease);
}
.cmsv .cmfind__opt:hover { border-color: var(--k-green); background: #fff; transform: translateY(-2px); }
.cmsv .cmfind__opt.is-picked { border-color: var(--k-green); background: rgb(141 191 87 / .18); }
.cmsv .cmfind__result .cmfind__ask { color: var(--k-soft); }
.cmsv .cmfind__sol { color: var(--k-forest); }
.cmsv .cmfind__list li { color: var(--k-ink); }
.cmsv .cmfind__list li::before { border-color: var(--k-green); }
.cmsv .cmfind__steps { color: var(--k-soft); }
.cmsv .cmfind__step { background: rgb(36 76 44 / .1); color: var(--k-forest) !important; }
.cmsv .cmfind__step:hover { background: rgb(36 76 44 / .18); }
.cmsv .cmfind__btn { background: var(--k-forest); color: #fff !important; border-radius: 999px; }
.cmsv .cmfind__btn:hover { background: var(--k-green); }
.cmsv .cmfind__more { color: var(--k-forest) !important; }
.cmsv .cmfind__back { color: var(--k-soft); }
.cmsv .cmfind__back:hover { color: var(--k-ink); }

/* --- 2. Onglets des services, sur le papier ---------------------------------------- */
.cmsv .cmtabs h2 { color: var(--k-forest); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -.015em; }
.cmsv .cmtabs__tab { background: var(--k-card); border-color: rgb(58 42 29 / .18); color: var(--k-ink); font-family: var(--cm-font-body, system-ui, sans-serif); font-weight: 700; border-radius: 14px; }
.cmsv .cmtabs__tab::before { background: rgb(141 191 87 / .25); color: var(--k-forest); }
.cmsv .cmtabs__tab:hover { border-color: var(--k-green); }
.cmsv .cmtabs__tab.is-active { background: var(--k-forest); border-color: var(--k-forest); color: #fff; box-shadow: 0 14px 26px -18px rgb(36 76 44 / .9); }
.cmsv .cmtabs__tab.is-active::before { background: var(--k-leaf); color: #1b2a12; }
.cmsv .cmtabs__panel { background: var(--k-card); border-radius: 22px; box-shadow: 0 1px 0 rgb(58 42 29 / .08), 0 30px 50px -36px rgb(36 25 18 / .8); }
.cmsv .cmtabs__panel img { background: #efe6d3; transition: scale .8s var(--k-ease); }
.cmsv .cmtabs__panel:hover img { scale: 1.04; }
.cmsv .cmtabs__body h3 { color: var(--k-forest); }
.cmsv .cmtabs__body > p { color: var(--k-soft); }
.cmsv .cmtabs__body li { color: var(--k-ink); }
.cmsv .cmtabs__body li::before { border-color: var(--k-green); }
.cmsv .cmtabs__btn { background: var(--k-forest); border-radius: 999px; }
.cmsv .cmtabs__btn:hover { background: var(--k-green); }
.cmsv .cmtabs__3d { color: var(--k-forest) !important; }

/* --- 3. La plateforme en 3D, sur la terre ------------------------------------------- */
.cm3d { position: relative; background: linear-gradient(rgb(20 13 9 / .8), rgb(20 13 9 / .88)), var(--k-soil) var(--k-tex) center / 1400px auto; padding: clamp(5.5rem, 4rem + 5vw, 8rem) 0 clamp(5.5rem, 4rem + 5vw, 8rem); color: var(--k-root); }
.cm3d .cm3d__head h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -.015em; }
.cm3d .cm3d__head p { color: var(--k-root-soft); }
.cm3d .cm3d__stage { border-radius: 22px; box-shadow: 0 0 0 6px rgb(239 229 208 / .12), 0 40px 70px -40px rgb(0 0 0 / .95); }
.cm3d .cm3d__step { background: var(--k-card); border: 0; border-radius: 16px; box-shadow: 0 14px 24px -20px rgb(0 0 0 / .9); transition: transform .25s var(--k-ease), box-shadow .25s; }
.cm3d .cm3d__step:hover { transform: translateX(4px); }
.cm3d .cm3d__step.is-active { box-shadow: 0 0 0 3px var(--k-leaf), 0 18px 30px -20px rgb(0 0 0 / .9); }
.cm3d .cm3d__step button { color: var(--k-ink); font-family: var(--cm-font-heading, Georgia, serif); }
.cm3d .cm3d__num { background: rgb(141 191 87 / .25); color: var(--k-forest); }
.cm3d .cm3d__step.is-active .cm3d__num { background: var(--k-forest); color: #fff; }
.cm3d .cm3d__step p { color: var(--k-soft); }
.cm3d .cm3d__ctrl { font-family: var(--cm-font-body, system-ui, sans-serif); font-weight: 700; }
.cm3d .cm3d__ctrl[aria-pressed="true"] { background: var(--k-forest); }
.cm3d .cm3d__marker:hover, .cm3d .cm3d__marker.is-active { background: var(--k-leaf); color: #1b2a12; }

/* --- 4. Comment travailler avec nous, sur le papier ----------------------------------- */
.cmwork { position: relative; background: var(--k-kraft) var(--k-paper); color: var(--k-ink); padding: clamp(4.5rem, 3.5rem + 4vw, 7rem) 0 clamp(5rem, 4rem + 4vw, 7.5rem); }
.cmwork::before { bottom: calc(100% - 1px); }
.cmwork::after { top: calc(100% - 1px); transform: scale(-1, -1); }
.cmwork h2 { color: var(--k-forest); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -.015em; }
.cmwork .cmwork__intro { color: var(--k-soft); }
.cmwork .cmwork__steps { position: relative; }
.cmwork .cmwork__steps li { background: var(--k-card); border-top: 0; border-radius: 18px; box-shadow: 0 18px 30px -26px rgb(36 25 18 / .7); padding-top: 1.4rem; }
.cmwork .cmwork__steps li::before {
	display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; margin-bottom: .8rem;
	background: var(--k-forest); color: #fff; font-family: var(--cm-font-heading, Georgia, serif); font-size: 1.3rem;
}
.cmwork .cmwork__steps h3 { color: var(--k-ink); font-size: 1.2rem; }
.cmwork .cmwork__steps p { color: var(--k-soft); }
.cmwork .cmwork__path {
	background: var(--k-card); border: 0; border-radius: 20px; box-shadow: 0 1px 0 rgb(58 42 29 / .08), 0 24px 40px -30px rgb(36 25 18 / .75);
	border-top: 4px solid var(--k-leaf); transition: transform .3s var(--k-ease), box-shadow .3s var(--k-ease);
}
.cmwork .cmwork__path:hover { transform: translateY(-5px); box-shadow: 0 1px 0 rgb(58 42 29 / .08), 0 34px 50px -30px rgb(36 25 18 / .8); }
.cmwork .cmwork__path h3 { color: var(--k-forest); font-size: 1.4rem; }
.cmwork .cmwork__path p { color: var(--k-soft); }
.cmwork .cmwork__btn { background: var(--k-forest); border-radius: 999px; }
.cmwork .cmwork__btn:hover { background: var(--k-green); }
.cmwork .cmwork__btn--ghost { background: transparent !important; border-color: var(--k-forest) !important; color: var(--k-forest) !important; }
.cmwork .cmwork__btn--ghost:hover { background: var(--k-forest) !important; color: #fff !important; }

/* --- 5. Formulaire de devis : une fiche de papier sur la terre ------------------------- */
.page-id-1027 .elementor-element-d867231 {
	background: linear-gradient(rgb(20 13 9 / .74), rgb(36 25 18 / .96) 85%, var(--cm-soil, #30251e)), #241912 url(/wp-content/uploads/cm-3d/soil-compost-maroc.webp) center / 1400px auto;
	padding: clamp(5.5rem, 4rem + 5vw, 8rem) var(--cm-gutter, 1rem) clamp(3rem, 2rem + 3vw, 5rem) !important;
}
.page-id-1027 .elementor-element-d867231 .cmw-contact {
	width: min(1200px, 100%); margin: 0 auto; border-radius: 22px; box-shadow: 0 40px 70px -36px rgb(0 0 0 / .95);
	background: #e0d6c0 url(/wp-content/uploads/cm-3d/paper-kraft.webp) !important;
}

/* --- Apparition au défilement (activée par le script) -------------------------------- */
.k-reveal-on .k-reveal { opacity: 0; transform: translateY(24px); }
.k-reveal-on .k-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--k-ease, ease) var(--d, 0s), transform .6s var(--k-ease, ease) var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
	.cmsv .cmsv__lead h1, .cmsv .cmsv__lead p, .cmsv .cmsv__jump, .cmsv .cmfind { animation: none; }
	.k-reveal-on .k-reveal { opacity: 1; transform: none; }
	.cmsv .cmtabs__panel img, .cmwork .cmwork__path, .cm3d .cm3d__step, .cmsv .cmfind__opt { transition: none; }
}