/* Compostage Maroc : intro Services, « Trouvez votre solution » et onglets des services */
.cmsv {
	--g: var(--wp--preset--color--primary, #0a6430);
	--g-dark: var(--wp--preset--color--quaternary, #042110);
	--g-soft: var(--wp--preset--color--secondary, #dae5df);
	--sun: #f2b632;
	--ink: #1e2a22;
	--muted: #56645b;
	--line: #d5ddd6;
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", system-ui, sans-serif);
	color: var(--ink);
	background: #fff;
	padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) 0 clamp(3rem, 2rem + 4vw, 6rem);
}
.cmsv *, .cmsv *::before, .cmsv *::after { box-sizing: border-box; }
.cmsv__inner { width: min(1240px, 100% - 2rem); margin: 0 auto; }

/* Intro + questionnaire */
.cmsv__hero { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: center; margin-bottom: clamp(3.5rem, 2rem + 5vw, 6rem); }
@media (min-width: 960px) { .cmsv__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3.5rem; } }
.cmsv__lead h1 { margin: 0 0 1rem; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.3rem); line-height: 1.08; font-weight: 800; letter-spacing: -.01em; color: var(--g-dark); }
.cmsv__lead p { margin: 0 0 1.4rem; max-width: 36rem; font-size: 1.1rem; line-height: 1.65; color: var(--muted); }
.cmsv__jump { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.cmsv__jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--g) !important; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.cmsv__jump a:hover { color: var(--g-dark) !important; }

.cmfind {
	position: relative; padding: clamp(1.25rem, .8rem + 2vw, 2.2rem); border-radius: 18px;
	background: var(--g-dark); color: #fff; min-height: 25rem; display: flex; flex-direction: column;
	box-shadow: 0 30px 60px -40px rgba(4, 33, 16, .9);
}
.cmfind__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.cmfind__title { margin: 0; font-size: 1.2rem; font-weight: 800; color: #fff; }
.cmfind__progress { margin: 0; font-size: .9rem; color: #b9cdbf; }
.cmfind__bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; margin-bottom: 1.6rem; }
.cmfind__bar span { display: block; height: 100%; width: 0; background: var(--sun); border-radius: 3px; transition: width .4s ease; }

.cmfind__q, .cmfind__result { display: none; }
.cmfind__q.is-active, .cmfind__result.is-active { display: block; animation: cmfind-in .35s ease both; }
@keyframes cmfind-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.cmfind__ask { margin: 0 0 1rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); line-height: 1.25; font-weight: 700; color: #fff; }
.cmfind__opts { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .cmfind__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmfind__opt {
	all: unset; box-sizing: border-box; display: flex; align-items: center; min-height: 3.3rem; padding: .75rem 1rem;
	border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05);
	color: #fff; font: 600 .98rem/1.35 inherit; cursor: pointer; transition: background .15s, border-color .15s;
}
.cmfind__opt:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.cmfind__opt.is-picked { border-color: var(--sun); background: rgba(242, 182, 50, .16); }
.cmfind__opt:focus-visible, .cmfind__back:focus-visible, .cmfind__btn:focus-visible, .cmfind__more:focus-visible, .cmfind__step:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.cmfind__result .cmfind__ask { margin-bottom: .3rem; font-size: 1rem; font-weight: 600; color: #b9cdbf; }
.cmfind__sol { margin: 0 0 .9rem; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); line-height: 1.2; font-weight: 800; color: var(--sun); outline: none; }
.cmfind__list { margin: 0 0 1.1rem; padding: 0; list-style: none; display: grid; gap: .45rem; }
.cmfind__list li { position: relative; padding-left: 1.6rem; line-height: 1.5; color: #e6efe8; }
.cmfind__list li::before { content: ""; position: absolute; left: .2rem; top: .45em; width: .7rem; height: .4rem; border-left: 2.5px solid var(--sun); border-bottom: 2.5px solid var(--sun); transform: rotate(-45deg); }
.cmfind__steps { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: 1.4rem; font-size: .92rem; color: #b9cdbf; }
.cmfind__steps span { margin-right: .2rem; }
.cmfind__step { display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff !important; text-decoration: none; font-weight: 600; }
.cmfind__step:hover { background: rgba(255, 255, 255, .2); }
.cmfind__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.cmfind__btn {
	display: inline-flex; align-items: center; min-height: 48px; padding: .7rem 1.4rem; border-radius: 10px;
	background: var(--sun); color: var(--g-dark) !important; font-weight: 800; text-decoration: none;
}
.cmfind__btn:hover { background: #ffc94f; }
.cmfind__more { color: #fff !important; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
.cmfind__back {
	all: unset; margin-top: auto; padding-top: 1.2rem; align-self: flex-start; min-height: 40px; display: none; align-items: center;
	color: #b9cdbf; font: 600 .92rem/1 inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .25em;
}
.cmfind__back.is-visible { display: inline-flex; }
.cmfind__back:hover { color: #fff; }

/* Onglets des services */
.cmtabs h2 { margin: 0 0 1.5rem; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.15; font-weight: 700; color: var(--g-dark); }
.cmtabs__wrap { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .cmtabs__wrap { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2rem; align-items: start; } }
.cmtabs__list { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; margin: 0 -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; scrollbar-width: thin; }
@media (min-width: 960px) { .cmtabs__list { flex-direction: column; overflow: visible; margin: 0; padding: 0; } }
.cmtabs__tab {
	all: unset; box-sizing: border-box; flex: 0 0 auto; max-width: 16rem; scroll-snap-align: start; display: flex; align-items: center; gap: .7rem;
	min-height: 3.2rem; padding: .7rem 1rem; border-radius: 10px; border: 1.5px solid var(--line); background: #fff;
	color: var(--g-dark); font: 600 .95rem/1.3 inherit; cursor: pointer; counter-increment: tab; transition: border-color .15s, background .15s;
}
.cmtabs__list { counter-reset: tab; }
.cmtabs__tab::before { content: counter(tab); flex: 0 0 auto; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--g-soft); color: var(--g); font-weight: 700; font-size: .9rem; }
@media (min-width: 960px) { .cmtabs__tab { max-width: none; width: 100%; } }
.cmtabs__tab:hover { border-color: var(--g); }
.cmtabs__tab.is-active { background: var(--g); border-color: var(--g); color: #fff; }
.cmtabs__tab.is-active::before { background: #fff; color: var(--g); }
.cmtabs__tab:focus-visible, .cmtabs__btn:focus-visible, .cmtabs__3d:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* Sans JS : tous les panneaux visibles ; avec JS : un seul. */
.cmtabs__panels { display: grid; gap: 1.25rem; }
.cmtabs.is-ready .cmtabs__panel { display: none; }
.cmtabs.is-ready .cmtabs__panel.is-active { display: grid; animation: cmtab-in .3s ease both; }
@keyframes cmtab-in { from { opacity: 0; } to { opacity: 1; } }
.cmtabs__panel { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 16px; overflow: hidden; background: #f4f7f2; }
@media (min-width: 700px) { .cmtabs__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.cmtabs__panel img { display: block; width: 100%; height: 100%; min-height: 14rem; max-height: 26rem; object-fit: cover; background: #e3eddb; }
.cmtabs__body { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.cmtabs__body h3 { margin: 0 0 .7rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); line-height: 1.2; color: var(--g-dark); }
.cmtabs__body > p { margin: 0 0 1rem; line-height: 1.65; color: var(--muted); }
.cmtabs__body ul { margin: 0 0 1.4rem; padding: 0; list-style: none; display: grid; gap: .4rem; }
.cmtabs__body li { position: relative; padding-left: 1.5rem; line-height: 1.5; }
.cmtabs__body li::before { content: ""; position: absolute; left: .15rem; top: .45em; width: .65rem; height: .38rem; border-left: 2.5px solid var(--g); border-bottom: 2.5px solid var(--g); transform: rotate(-45deg); }
.cmtabs__body .cmtabs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; margin: 0; }
.cmtabs__btn { display: inline-flex; align-items: center; min-height: 46px; padding: .65rem 1.3rem; border-radius: 10px; background: var(--g); color: #fff !important; font-weight: 700; text-decoration: none; }
.cmtabs__btn:hover { background: var(--g-dark); }
.cmtabs__3d { display: inline-flex; align-items: center; min-height: 44px; color: var(--g) !important; font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }

@media (prefers-reduced-motion: reduce) {
	.cmfind__q.is-active, .cmfind__result.is-active, .cmtabs.is-ready .cmtabs__panel.is-active { animation: none; }
	.cmfind__bar span, .cmfind__opt, .cmtabs__tab { transition: none; }
}