/* Compostage Maroc : page Guides et catégories d'articles (body.cmguides) */
body.cmguides {
	--g-soil: #241912;
	--g-kraft: #e0d6c0;
	--g-card: #fbf8f1;
	--g-ink: #3a2a1d;
	--g-soft: #6a5643;
	--g-root: #efe5d0;
	--g-root-soft: #cdbfa6;
	--g-leaf: #8dbf57;
	--g-green: #527f3a;
	--g-forest: #244c2c;
	--g-ease: cubic-bezier(.2, .8, .2, 1);
}
body.cmguides .site-main { background: var(--g-kraft) url(/wp-content/uploads/cm-3d/paper-kraft.webp); padding-bottom: clamp(4rem, 3rem + 3vw, 6rem); }

/* --- En-tête sur la terre ------------------------------------------------------ */
body.cmguides .cm-page-header {
	position: relative; isolation: isolate; overflow: hidden; margin: 0 0 clamp(2.5rem, 1.5rem + 3vw, 4rem); border: 0;
	padding: clamp(2.2rem, 1.5rem + 3vw, 4rem) 0 clamp(4.5rem, 3rem + 4vw, 6.5rem);
	background: linear-gradient(90deg, rgb(18 12 8 / .84), rgb(18 12 8 / .5) 70%, rgb(18 12 8 / .3)), var(--g-soil) url(/wp-content/uploads/cm-3d/soil-compost-maroc.webp) center / cover;
	color: var(--g-root);
}
body.cmguides .cm-page-header::before { /* jeune pousse sortant d'une graine */
	content: ""; position: absolute; z-index: -1; right: max(2%, calc(50% - 600px)); bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
	width: clamp(150px, 15vw, 230px); aspect-ratio: 300 / 420;
	background: url(/wp-content/uploads/cm-3d/home-sprout.svg) center bottom / contain no-repeat;
	filter: drop-shadow(0 14px 14px rgb(0 0 0 / .45)); transform-origin: 50% 100%; animation: cmguides-sprout 1.1s var(--g-ease) both .2s;
}
@keyframes cmguides-sprout { from { opacity: 0; transform: scale(.6) translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { body.cmguides .cm-page-header::before { display: none; } }
body.cmguides .cm-page-header::after { /* bord de papier déchiré */
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(26px, 3vw, 46px);
	background: url(/wp-content/uploads/cm-3d/torn-edge.svg) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 -3px 4px rgb(0 0 0 / .3));
}
body.cmguides .cm-page-header .cm-container { max-width: 1240px; }
body.cmguides .cm-page-header .cm-breadcrumbs { color: var(--g-root-soft); margin-bottom: 1.3rem; }
body.cmguides .cm-page-header .cm-breadcrumbs a { color: var(--g-root) !important; }
body.cmguides .cm-page-header .cm-breadcrumbs li, body.cmguides .cm-page-header .cm-breadcrumbs [aria-current] { color: var(--g-root-soft) !important; }
body.cmguides .cm-page-header__title {
	margin: 0; max-width: 18ch; color: #fff; font-size: clamp(2.8rem, 1.6rem + 5vw, 5.6rem); line-height: .95; letter-spacing: -.025em; font-weight: 800;
	text-shadow: 0 2px 24px rgb(0 0 0 / .4); animation: cmguides-rise .7s var(--g-ease) both;
}
body.cmguides .cm-page-header__intro { max-width: 42rem; margin-top: 1rem; color: var(--g-root); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.55; animation: cmguides-rise .7s var(--g-ease) both .12s; }
body.cmguides .cm-page-header__intro p { color: inherit; }
@keyframes cmguides-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.cmguides-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; max-width: 52rem; }
.cmguides-chip {
	display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px;
	border: 1.5px solid rgb(239 229 208 / .45); background: rgb(20 13 9 / .35); color: var(--g-root) !important;
	font-weight: 700; font-size: 1rem; text-decoration: none !important; transition: background-color .2s, border-color .2s, transform .2s var(--g-ease);
}
.cmguides-chip:hover { border-color: var(--g-root); transform: translateY(-1px); }
.cmguides-chip.is-active { background: var(--g-leaf); border-color: var(--g-leaf); color: #1b2a12 !important; }
.cmguides-chip__n { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border-radius: 999px; background: rgb(239 229 208 / .18); font-size: .85rem; }
.cmguides-chip.is-active .cmguides-chip__n { background: rgb(27 42 18 / .15); }
.cmguides-chip:focus-visible, .cmguides-btn:focus-visible, body.cmguides .cm-card a:focus-visible { outline: 3px solid #f2b632; outline-offset: 3px; }

/* --- Grille sans barre latérale ---------------------------------------------- */
body.cmguides .cm-layout { display: block !important; max-width: 1240px; }
body.cmguides .cm-grid {
	display: grid !important; gap: clamp(1.1rem, .6rem + 1.6vw, 2rem); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { body.cmguides .cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { body.cmguides .cm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Cartes -------------------------------------------------------------------- */
body.cmguides .cm-card {
	position: relative; display: flex; flex-direction: column; margin: 0; overflow: hidden; border: 0; border-radius: 18px; background: var(--g-card);
	box-shadow: 0 1px 0 rgb(58 42 29 / .08), 0 18px 34px -24px rgb(36 25 18 / .55);
	transition: transform .35s var(--g-ease), box-shadow .35s var(--g-ease);
}
body.cmguides .cm-card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgb(58 42 29 / .08), 0 30px 46px -26px rgb(36 25 18 / .7); }
body.cmguides .cm-card__media { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #e3eddb; }
body.cmguides .cm-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: scale .6s var(--g-ease); }
body.cmguides .cm-card:hover .cm-card__media img { scale: 1.06; }
body.cmguides .cm-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.3rem 1.4rem; }
body.cmguides .cm-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: 0 0 .45rem; font-size: .9rem; color: var(--g-soft); }
body.cmguides .cm-card__cat { color: var(--g-green); font-weight: 800; }
body.cmguides .cm-card__title { margin: 0 0 .5rem; font-size: clamp(1.25rem, 1.1rem + .4vw, 1.45rem); line-height: 1.15; }
body.cmguides .cm-card__title a { color: var(--g-ink) !important; text-decoration: none; }
body.cmguides .cm-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toute la carte est cliquable */
body.cmguides .cm-card:hover .cm-card__title a { color: var(--g-forest) !important; }
body.cmguides .cm-card__excerpt { color: var(--g-soft); font-size: .98rem; line-height: 1.55; }
body.cmguides .cm-card__excerpt p { margin: 0; }
body.cmguides .cm-card__body::after { /* invitation à lire, révélée au survol */
	content: "Lire le guide"; margin-top: auto; padding-top: 1rem; color: var(--g-forest); font-weight: 800; font-size: .98rem;
	text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em;
}

/* guide le plus récent : en grand, sur toute la largeur (1re page) */
@media (min-width: 900px) {
	body.cmguides:not(.paged):not(.single) .cm-grid > .cm-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
	body.cmguides:not(.paged):not(.single) .cm-grid > .cm-card:first-child .cm-card__media { aspect-ratio: auto; min-height: 100%; }
	body.cmguides:not(.paged):not(.single) .cm-grid > .cm-card:first-child .cm-card__body { justify-content: center; padding: clamp(1.6rem, 1rem + 2vw, 3rem); }
	body.cmguides:not(.paged):not(.single) .cm-grid > .cm-card:first-child .cm-card__title { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.05; margin-bottom: .8rem; }
	body.cmguides:not(.paged):not(.single) .cm-grid > .cm-card:first-child .cm-card__excerpt { font-size: 1.1rem; }
	body.cmguides:not(.paged):not(.single) .cm-grid > .cm-card:first-child .cm-card__body::before {
		content: "À la une"; align-self: flex-start; margin-bottom: .9rem; padding: .3rem .85rem; border-radius: 999px;
		background: var(--g-leaf); color: #1b2a12; font-weight: 800; font-size: .88rem;
	}
	body.cmguides:not(.paged):not(.single) .cm-grid > .cm-card:first-child .cm-card__body::after { margin-top: 1.2rem; }
}

/* apparition en cascade (si le script est actif) */
body.cmguides.cmguides-js .cm-grid > .cm-card { opacity: 0; transform: translateY(26px); }
body.cmguides.cmguides-js .cm-grid > .cm-card.is-in {
	opacity: 1; transform: none;
	transition: opacity .6s var(--g-ease) var(--d, 0s), transform .6s var(--g-ease) var(--d, 0s), box-shadow .35s var(--g-ease);
}
body.cmguides.cmguides-js .cm-grid > .cm-card.is-in:hover { transform: translateY(-6px); transition-delay: 0s; }

/* --- Pagination ---------------------------------------------------------------- */
body.cmguides .cm-pagination { margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; }
body.cmguides .cm-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
body.cmguides .cm-pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 46px; min-height: 46px; padding: 0 1rem; border-radius: 999px;
	border: 1.5px solid rgb(58 42 29 / .25); background: var(--g-card); color: var(--g-ink) !important; font-weight: 700; text-decoration: none;
}
body.cmguides .cm-pagination .page-numbers:hover { border-color: var(--g-forest); }
body.cmguides .cm-pagination .page-numbers.current { background: var(--g-forest); border-color: var(--g-forest); color: #fff !important; }

/* --- Bandeau de fin ------------------------------------------------------------- */
.cmguides-band {
	position: relative; margin-top: 0;
	padding: clamp(4rem, 3rem + 4vw, 6.5rem) 0 clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
	background: linear-gradient(rgb(20 13 9 / .78), rgb(36 25 18 / .95) 85%, var(--cm-soil, #30251e)), var(--g-soil) url(/wp-content/uploads/cm-3d/soil-compost-maroc.webp) center / 1400px auto;
	color: var(--g-root); text-align: center;
}
.cmguides-band::before {
	content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(26px, 3vw, 46px);
	background: url(/wp-content/uploads/cm-3d/torn-edge.svg) 0 0 / 100% 100% no-repeat; transform: scale(-1, -1); filter: drop-shadow(0 -3px 4px rgb(0 0 0 / .3));
}
.cmguides-band__inner { width: min(760px, 100% - 2 * var(--cm-gutter, 1rem)); margin: 0 auto; }
.cmguides-band h2 { margin: 0 0 .8rem; color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); line-height: 1.08; }
.cmguides-band p { margin: 0; color: var(--g-root-soft); font-size: 1.1rem; line-height: 1.6; }
.cmguides-band .cmguides-band__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.8rem; }
.cmguides-btn {
	display: inline-flex; align-items: center; min-height: 50px; padding: .7rem 1.6rem; border-radius: 6px; border: 2px solid var(--g-green);
	background: var(--g-green); color: #fff !important; font-weight: 700; text-decoration: none; transition: background-color .2s, border-color .2s;
}
.cmguides-btn:hover { background: var(--g-forest); border-color: var(--g-forest); }
.cmguides-btn--line { background: rgb(20 13 9 / .35); border-color: var(--g-root-soft); color: var(--g-root) !important; }
.cmguides-btn--line:hover { background: rgb(255 255 255 / .08); border-color: var(--g-root); }

@media (prefers-reduced-motion: reduce) {
	body.cmguides .cm-page-header::before, body.cmguides .cm-page-header__title, body.cmguides .cm-page-header__intro { animation: none; }
	body.cmguides.cmguides-js .cm-grid > .cm-card { opacity: 1; transform: none; }
	body.cmguides .cm-card, body.cmguides .cm-card__media img, .cmguides-chip { transition: none; }
	body.cmguides .cm-card:hover { transform: none; }
	body.cmguides .cm-card:hover .cm-card__media img { scale: 1; }
}