/**
 * Chantilo — homepage only (enqueued on the front page by inc/10-setup.php). Markup: inc/40-home.php.
 * Base components (cards, plan, projects, steps, tools) are in site.css; this file adds the home craft layer.
 */

/* ── Hero ─────────────────────────────────────────── */
.ch-hero--home { background:
	radial-gradient(circle at 88% 18%, rgba(228, 238, 231, .9) 0 220px, transparent 221px),
	radial-gradient(circle at 70% 96%, rgba(232, 169, 58, .45) 0 160px, transparent 161px),
	var(--ch-a5); }
.ch-hero__dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(28, 43, 37, .09) 1.2px, transparent 1.3px); background-size: 22px 22px; -webkit-mask: linear-gradient(90deg, transparent 0, #000 55%, #000 100%); mask: linear-gradient(90deg, transparent 0, #000 55%, #000 100%); }
.ch-hero--home .ch-wrap { position: relative; }
.ch-hero__badge {
	display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 18px; padding: .35rem .95rem .35rem .45rem; border-radius: var(--ch-radius);
	background: var(--ch-base); box-shadow: inset 0 0 0 1.5px var(--ch-a6); font-family: var(--ch-font-h); font-weight: 700; font-size: .92rem;
}
.ch-hero__badge .ch-icon--logo { width: 30px; }
.ch-hero__visual { display: grid; gap: 28px; justify-items: center; }
.ch-hero--home .ch-chip .ch-icon { width: 20px; height: 20px; color: var(--ch-a3); }

/* Devis box in the hero: white ticket with a pistachio header. */
.ch-devisbox {
	position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: 460px; padding: 0 20px 18px; background: var(--ch-base);
	border-radius: 24px; box-shadow: var(--ch-shadow-lg); border: 1px solid var(--ch-a6); overflow: hidden;
}
.ch-devisbox > * { margin: 0; }
.ch-devisbox__title {
	display: flex; align-items: center; gap: .6rem; margin: 0 -20px 14px; padding: 14px 20px; background: var(--ch-a1);
	font-family: var(--ch-font-h); font-weight: 800; font-size: 1.12rem;
}
.ch-devisbox__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ch-base); color: var(--ch-a3); }
.ch-devisbox__icon .ch-icon { width: 20px; height: 20px; }
.ch-devisbox__label { display: block; margin-bottom: 6px; font-family: var(--ch-font-h); font-weight: 700; font-size: .95rem; }
.ch-devisbox__row { display: grid; gap: 10px; }
.ch-devisbox__row .ch-btn { width: 100%; }
.ch-devisbox__note { display: flex; align-items: center; gap: .4rem; margin-top: 10px; font-size: .88rem; color: var(--ch-a4); }
.ch-devisbox__note .ch-icon { width: 18px; height: 18px; color: var(--ch-moutarde-text); }

/* ── Chantiers par projet ─────────────────────────────────────── */
.ch-section--plan { padding-top: clamp(40px, 5vw, 72px); }
.ch-plan { background:
	radial-gradient(circle at 0 0, var(--ch-a2) 0 70px, transparent 71px),
	radial-gradient(circle at 100% 100%, var(--ch-sauge-light) 0 90px, transparent 91px),
	var(--ch-base); }
.ch-plan__kicker { margin: 0 0 4px; font-family: var(--ch-font-h); font-weight: 700; color: var(--ch-sapin-text); }
.ch-plan__legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 18px 0 0; padding: 0; }
.ch-plan__rayon { display: flex; align-items: center; gap: 10px; }
.ch-plan__rayon a { color: var(--ch-sapin-text); text-decoration: none; }
.ch-plan__rayon a:hover { text-decoration: underline; }
.ch-topics--plan { gap: 6px; }
.ch-topics--plan .ch-topic { padding: 6px 0 4px; border-bottom: 1px solid var(--ch-a5); }
.ch-topics--plan .ch-topic:last-child { border-bottom: 0; }
.ch-topics--plan .ch-topic__icon { width: 40px; height: 40px; }
.ch-topics--plan .ch-topic__icon .ch-icon { width: 22px; height: 22px; }
.ch-topics--plan .ch-topic__line { padding-left: 50px; }

/* ── Rayons with photo ────────────────────────────── */
.ch-rayon { padding: 0; gap: 0; box-shadow: var(--ch-shadow); }
.ch-rayon__media { position: relative; width: 100%; aspect-ratio: 16 / 8; overflow: hidden; background: rgba(255, 255, 255, .5); }
.ch-rayon__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-rayon__media.is-empty { display: grid; place-items: center; }
.ch-rayon__media.is-empty .ch-icon--logo { width: 110px; transform: rotate(-8deg); opacity: .9; }
.ch-rayon__media::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 16px; background: var(--ch-a2);
	background: linear-gradient(var(--ch-a1), var(--ch-a1)) left bottom / 100% 2px no-repeat, var(--ch-ticks) left bottom / 100% 6px no-repeat, var(--ch-ticks-big) left bottom / 100% 10px no-repeat;
}
.ch-rayon--2 .ch-rayon__media::after { background: var(--ch-a1); }
.ch-rayon__media .ch-disc { position: absolute; left: clamp(24px, 4vw, 40px); bottom: -10px; z-index: 1; box-shadow: 0 0 0 5px var(--ch-a2); }
.ch-rayon--2 .ch-rayon__media .ch-disc { box-shadow: 0 0 0 5px var(--ch-a1); }
.ch-rayon__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; box-sizing: border-box; width: 100%; padding: 28px clamp(24px, 4vw, 40px) clamp(24px, 4vw, 36px); }
.ch-rayon__list a, .ch-rayon__list .is-soon { gap: .45rem; }
.ch-rayon__list .ch-icon { width: 18px; height: 18px; color: var(--ch-a3); }
.ch-rayon__list .is-soon { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem 1rem; box-sizing: border-box; border-radius: var(--ch-radius); border: 1.5px dashed rgba(28, 43, 37, .25); font-family: var(--ch-font-h); font-weight: 600; font-size: .95rem; color: var(--ch-contrast); }

/* ── Steps with icons ─────────────────────────────── */
.ch-steps__icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 10px; border-radius: 14px; background: var(--ch-a2); color: var(--ch-sapin-text); }
.ch-steps__icon .ch-icon { width: 24px; height: 24px; }
.ch-steps--row > li { box-sizing: border-box; }

/* ── Les outils de calcul: filters, featured tool, tool cards (assets/js/tools-filter.js) ── */
.ch-tools-sec__filters { display: none; margin: 0 0 22px; }
.ch-tools-sec.is-filterable .ch-tools-sec__filters { display: block; }
.ch-filters { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0 0 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ch-filters::-webkit-scrollbar { display: none; }
.ch-filter {
	display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem .6rem .35rem 1rem; white-space: nowrap; cursor: pointer;
	border: 1.5px solid rgba(28, 43, 37, .14); border-radius: var(--ch-radius); background: var(--ch-base); color: var(--ch-contrast);
	font-family: var(--ch-font-h); font-weight: 600; font-size: .95rem;
}
.ch-filter .ch-icon { width: 18px; height: 18px; color: var(--ch-a3); }
.ch-filter__n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box; border-radius: 8px; background: var(--ch-a5); font-size: .82rem; }
.ch-filter:hover { border-color: var(--ch-a3); }
.ch-filter.is-active { background: var(--ch-a3); border-color: var(--ch-a3); color: var(--ch-base); }
.ch-filter.is-active .ch-icon { color: var(--ch-a1); }
.ch-filter.is-active .ch-filter__n { background: var(--ch-a1); color: var(--ch-contrast); }

.ch-tools-sec__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.ch-toolcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ch-toolcard { display: flex; }
.ch-toolcard[hidden], .ch-toolfeat[hidden] { display: none; }
.ch-toolcard__in {
	position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 14px; row-gap: 2px;
	width: 100%; box-sizing: border-box; padding: 16px 18px; border-radius: 20px; background: var(--ch-base); border: 1px solid rgba(28, 43, 37, .08);
	box-shadow: var(--ch-shadow); color: var(--ch-contrast); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease;
}
a.ch-toolcard__in:hover { transform: translateY(-3px); box-shadow: var(--ch-shadow-lg); }
a.ch-toolcard__in:hover .ch-toolcard__name { color: var(--ch-sapin-text); }
.ch-toolcard__icon { grid-row: 1 / span 4; align-self: start; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 28%; background: var(--ch-moutarde-claire); color: var(--ch-contrast); box-shadow: inset 0 -3px 0 rgba(28, 43, 37, .1); }
.ch-toolcard__icon .ch-icon { width: 24px; height: 24px; }
.ch-toolcard__icon--big { width: 60px; height: 60px; grid-row: auto; }
.ch-toolcard__icon--big .ch-icon { width: 32px; height: 32px; }
.ch-toolcard__cat { font-size: .78rem; font-weight: 600; color: var(--ch-a4); }
.ch-toolcard__name { font-family: var(--ch-font-h); font-weight: 700; font-size: 1.08rem; line-height: 1.25; transition: color .15s ease; }
.ch-toolcard__line { font-size: .9rem; line-height: 1.45; color: var(--ch-a4); }
.ch-toolcard__go { display: inline-flex; align-items: center; gap: .3rem; margin-top: 10px; font-family: var(--ch-font-h); font-weight: 700; font-size: .92rem; color: var(--ch-sapin-text); }
.ch-toolcard__go .ch-icon { width: 16px; height: 16px; transition: transform .18s ease; }
a.ch-toolcard__in:hover .ch-toolcard__go .ch-icon { transform: translateX(3px); }
.ch-toolcard.is-soon .ch-toolcard__in { background: rgba(255, 255, 255, .7); box-shadow: none; border-style: dashed; }

/* Featured tool: inputs → result preview, static and without figures. */
.ch-toolfeat { display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; padding: 22px; border-radius: 26px; background: var(--ch-contrast); color: var(--ch-a5); box-shadow: var(--ch-shadow-lg); }
.ch-toolfeat__top { display: flex; align-items: flex-start; gap: 14px; }
.ch-toolfeat__top > div > * { margin: 0; }
.ch-toolfeat .ch-toolcard__icon { background: var(--ch-a1); }
.ch-toolfeat__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--ch-font-h); font-weight: 700; font-size: .9rem; color: var(--ch-a1); }
.ch-toolfeat__kicker .ch-toolcard__cat { padding: .05rem .55rem; border-radius: var(--ch-radius); background: rgba(255, 255, 255, .1); color: var(--ch-footer-muted); }
.ch-toolfeat__name { margin: 4px 0 2px !important; color: var(--ch-base); font-size: 1.5rem; font-weight: 800; }
.ch-toolfeat__name::after { content: none !important; }
.ch-toolfeat__line { color: var(--ch-footer-muted); }
.ch-toolfeat__preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: center; }
.ch-toolfeat__box { padding: 14px; border-radius: 16px; background: var(--ch-base); color: var(--ch-contrast); }
.ch-toolfeat__box--result { background: var(--ch-a2); }
.ch-toolfeat__h { margin: 0 0 8px; font-family: var(--ch-font-h); font-weight: 700; font-size: .9rem; }
.ch-toolfeat__box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ch-toolfeat__box li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; color: var(--ch-a4); }
.ch-toolfeat__inputs i { flex: none; width: 34%; height: 24px; border-radius: 7px; border: 1.5px solid var(--ch-a6); background: var(--ch-a5); }
.ch-toolfeat__results b { flex: none; width: 22%; height: 10px; border-radius: 5px; background: var(--ch-a3); opacity: .55; }
.ch-toolfeat__arrow { display: grid; place-items: center; justify-self: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ch-a1); color: var(--ch-contrast); transform: rotate(90deg); }
.ch-toolfeat__arrow .ch-icon { width: 18px; height: 18px; }
.ch-toolfeat__cta { margin: auto 0 0; }
.ch-toolfeat__cta .ch-btn { background: var(--ch-a1); color: var(--ch-contrast); }
.ch-toolfeat__cta .ch-btn:hover { background: var(--ch-a5); color: var(--ch-contrast); }
.ch-tools-sec__more { display: flex; justify-content: center; margin: 24px 0 0; }
@media (min-width: 600px) and (max-width: 767px) { .ch-tools-sec:not(.is-filtered) .ch-toolcard.is-ninth { display: none; } }
.ch-tools-sec__note { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 30px 0 0; font-size: .9rem; color: var(--ch-a4); text-align: center; }
.ch-tools-sec__note .ch-brick-sep { max-width: 132px; }
.ch-tools-sec__note .ch-brick-sep i { box-shadow: 0 0 0 5px var(--ch-a2); }
@media (prefers-reduced-motion: reduce) {
	.ch-toolcard__in, .ch-toolcard__go .ch-icon { transition: none; }
	a.ch-toolcard__in:hover { transform: none; }
}
@media (min-width: 600px) {
	.ch-toolcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ch-toolfeat__preview { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
	.ch-toolfeat__arrow { transform: none; }
}
@media (min-width: 1024px) {
	.ch-filters { flex-wrap: wrap; overflow: visible; }
	.ch-tools-sec__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; }
	.ch-tools-sec__grid.no-featured { grid-template-columns: minmax(0, 1fr); }
	.ch-toolcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.ch-toolfeat__preview { grid-template-columns: minmax(0, 1fr); }
	.ch-toolfeat__arrow { transform: rotate(90deg); }
}
@media (min-width: 1440px) {
	.ch-toolfeat__name { font-size: 1.65rem; }
}

/* ── Devis band ───────────────────────────────────── */
.ch-devis__chips { margin-top: 16px !important; }
.ch-devis__chips .ch-chip { min-height: 40px; font-size: .9rem; }

/* ── Bientôt en ligne: fiche tickets ────────── */
.ch-tickets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ch-ticket {
	position: relative; display: flex; align-items: center; gap: 14px; box-sizing: border-box; padding: 16px 18px; background: var(--ch-base);
	border-radius: 18px; border: 1px solid var(--ch-a6); border-left: 6px solid var(--ch-moutarde-claire);
}
.ch-ticket__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ch-a2); color: var(--ch-sapin-text); }
.ch-ticket__icon .ch-icon { width: 22px; height: 22px; }
.ch-ticket__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ch-ticket__cat { font-size: .82rem; color: var(--ch-a4); }
.ch-ticket__title { font-family: var(--ch-font-h); font-weight: 700; line-height: 1.3; }

/* ── FAQ ──────────────────────────────────────────── */
.ch-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ch-faq__list { margin-top: 20px; }
.ch-faq__item p { margin: 0; padding: 0 22px 18px; }
.ch-faq__aside { position: relative; align-self: start; box-sizing: border-box; padding: 28px; border-radius: 28px; background: var(--ch-contrast); color: var(--ch-a5); overflow: hidden; }
.ch-faq__aside p { margin: 0 0 12px; position: relative; }
.ch-faq__aside-title { font-family: var(--ch-font-h); font-weight: 800; font-size: 1.5rem; color: var(--ch-a1); }
.ch-faq__logo { position: absolute; right: -24px; top: -18px; width: 130px; transform: rotate(16deg); opacity: .35; }
.ch-faq__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0 !important; }
.ch-faq__actions .ch-icon { width: 20px; height: 20px; }

@media (min-width: 600px) {
	.ch-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
	.ch-hero__visual { grid-template-columns: minmax(0, 1fr); }
	.ch-devisbox__row { grid-template-columns: minmax(0, 1fr) auto; }
	.ch-devisbox__row .ch-btn { width: auto; }
}
@media (min-width: 1024px) {
	.ch-hero__visual { justify-items: end; }
	.ch-devisbox { margin-right: 12px; margin-top: -8px; }
	.ch-devisbox__row { grid-template-columns: minmax(0, 1fr); }
	.ch-devisbox__row .ch-btn { width: 100%; }
	.ch-faq__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 48px; }
	.ch-faq__aside { position: sticky; top: 24px; margin-top: 64px; }
	.ch-tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.ch-devisbox__row { grid-template-columns: minmax(0, 1fr) auto; }
	.ch-devisbox__row .ch-btn { width: auto; }
}

/* ── Hero shelf: the eight projects as icon tabs ──── */
.ch-shelf { position: relative; z-index: 1; margin-top: clamp(32px, 4vw, 52px); padding: 14px; background: var(--ch-base); border-radius: 26px; box-shadow: var(--ch-shadow); border: 1px solid var(--ch-a6); }
.ch-shelf__label { margin: 0 0 10px 6px; font-family: var(--ch-font-h); font-weight: 700; font-size: .95rem; color: var(--ch-sapin-text); }
.ch-shelf__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ch-shelf__list a { display: flex; align-items: center; gap: 10px; min-height: 52px; box-sizing: border-box; padding: 6px 10px; border-radius: 16px; color: var(--ch-contrast); text-decoration: none; font-family: var(--ch-font-h); font-weight: 700; font-size: .95rem; line-height: 1.2; transition: background-color .15s ease; }
.ch-shelf__list a:hover { background: var(--ch-a2); }
.ch-shelf__list a:hover .ch-disc { background: var(--ch-contrast); }

/* ── Plan: one group per category ─────────────────────────── */
.ch-plangroup { break-inside: avoid; padding-bottom: 8px; }
.ch-plangroup .ch-plan__rayon { flex-wrap: wrap; }
.ch-plangroup__count { margin-left: auto; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: .85rem; color: var(--ch-a4); }
.ch-plangroup__soon { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 10px 0; color: var(--ch-a4); font-size: .95rem; font-style: italic; }

/* ── Le mur des projets ───────────────────────────── */
.ch-projects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ch-project { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--ch-base); border-radius: var(--ch-r-card); border: 1px solid var(--ch-a6); box-shadow: var(--ch-shadow); }
.ch-project__media { position: relative; aspect-ratio: 16 / 7; background: var(--ch-a2); overflow: hidden; }
.ch-project--2 .ch-project__media { background: var(--ch-a1); }
.ch-project--3 .ch-project__media { background: var(--ch-a1-light); }
.ch-project--4 .ch-project__media { background: var(--ch-sauge-light); }
.ch-project__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-project__media::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px; background: var(--ch-base);
	background: linear-gradient(var(--ch-a1), var(--ch-a1)) left bottom / 100% 2px no-repeat, var(--ch-ticks) left bottom / 100% 6px no-repeat, var(--ch-ticks-big) left bottom / 100% 10px no-repeat;
}
.ch-project__icon { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ch-base); color: var(--ch-a3); box-shadow: var(--ch-shadow); }
.ch-project__icon .ch-icon { width: 32px; height: 32px; }
.ch-project__media.has-img .ch-project__icon { left: 18px; top: auto; bottom: 4px; transform: none; width: 52px; height: 52px; z-index: 1; }
.ch-project__media.has-img .ch-project__icon .ch-icon { width: 26px; height: 26px; }
.ch-project__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 18px 18px; }
.ch-project__body > * { margin: 0; }
.ch-project__title { font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.ch-project__title a { color: var(--ch-contrast); text-decoration: none; }
.ch-project__title a::after { content: ""; position: absolute; inset: 0; }
.ch-project:hover .ch-project__title a { text-decoration: underline; text-decoration-color: var(--ch-a3); }
.ch-project:focus-within { outline: 3px solid var(--ch-focus); outline-offset: 2px; }
.ch-project__title a:focus-visible { outline: none; }
.ch-project__desc { color: var(--ch-a4); font-size: .9rem; line-height: 1.5; }
.ch-project__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto !important; padding-top: 6px; font-size: .85rem; }
.ch-project__count { font-family: var(--ch-font-h); font-weight: 700; }
.ch-project__topics { color: var(--ch-a4); }

@media (min-width: 600px) {
	.ch-shelf__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ch-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.ch-projects { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
	.ch-shelf__list { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.ch-shelf__list a { flex-direction: column; text-align: center; gap: 8px; padding: 10px 6px; font-size: .9rem; }
	.ch-shelf__list .ch-disc--small { width: 44px; height: 44px; }
}

/* ── Hero carousel of fiches chantier (assets/js/fiches.js) ──
 * Each fiche has an accent pair (palette tints only) for the two sheets stacked behind the card; step numbers stay
 * mustard so they always read on the sauge card. The stack takes the tone of the current fiche. */
.ch-carousel { --ch-tone-a: var(--ch-a1); --ch-tone-b: var(--ch-a6); --ch-tone-n: var(--ch-moutarde-claire); }
.ch-carousel[data-tone="2"] { --ch-tone-a: var(--ch-a3); --ch-tone-b: var(--ch-moutarde-claire); --ch-tone-n: var(--ch-a1); }
.ch-carousel[data-tone="3"] { --ch-tone-a: var(--ch-moutarde-text); --ch-tone-b: var(--ch-a1-light); --ch-tone-n: var(--ch-moutarde-claire); }
.ch-carousel[data-tone="4"] { --ch-tone-a: var(--ch-contrast); --ch-tone-b: var(--ch-a3); --ch-tone-n: var(--ch-a1); }
.ch-carousel[data-tone="5"] { --ch-tone-a: var(--ch-a3); --ch-tone-b: var(--ch-a1); --ch-tone-n: var(--ch-moutarde-claire); }
.ch-carousel .ch-stack__sheet { inset: 0; transition: background-color .45s ease; }
.ch-carousel .ch-stack__sheet--1 { background: var(--ch-tone-a); }
.ch-carousel .ch-stack__sheet--2 { background: var(--ch-tone-b); border-color: transparent; }
.ch-carousel__track { position: relative; display: grid; }
.ch-carousel__track > .ch-slide { grid-area: 1 / 1; transition: opacity .35s ease, transform .35s ease, visibility .35s; }
.ch-carousel__track > .ch-slide:not(.is-active) { opacity: 0; visibility: hidden; transform: translateX(12px); }

/* Compact fiche: one layout for every slide (3 + 3 items, 4 steps, one delay line); the card hugs its content. */
.ch-carousel .ch-fiche--hero { padding: 20px 22px 18px; box-shadow: 0 1px 0 rgba(28, 43, 37, .04), 0 18px 36px -24px rgba(28, 43, 37, .4); }
.ch-carousel .ch-fiche__name { margin: .25rem 0 .35rem !important; padding-right: 60px; font-size: 1.28rem; }
.ch-carousel .ch-fiche__name a { color: var(--ch-contrast); text-decoration: none; }
.ch-carousel .ch-fiche__name a:hover { color: var(--ch-sapin-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: var(--ch-a1); }
.ch-fiche__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 .75rem !important; }
.ch-fiche__cat { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .65rem .15rem .45rem; border-radius: var(--ch-radius); background: var(--ch-base); color: var(--ch-contrast); font-family: var(--ch-font-h); font-weight: 600; font-size: .8rem; line-height: 1.3; }
.ch-fiche__cat .ch-icon { width: 15px; height: 15px; color: var(--ch-a3); }
.ch-carousel .ch-fiche__cols { margin: 0 !important; gap: 8px !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-carousel .ch-fiche__cols > div { padding: 10px 12px; }
.ch-carousel .ch-fiche__cols .ch-fiche__h { display: flex; align-items: center; gap: .4rem; }
.ch-carousel .ch-fiche__cols .ch-fiche__h .ch-icon { width: 17px; height: 17px; color: var(--ch-a3); }
.ch-carousel .ch-fiche__cols ul { padding-left: 1rem; font-size: .88rem; line-height: 1.4; }
.ch-carousel .ch-fiche__cols li::marker { color: var(--ch-a3); }
.ch-carousel .ch-fiche--hero > .ch-fiche__h { margin-top: .75rem; }
/* Steps on a rail: mustard rounded squares with encre numbers. */
.ch-carousel .ch-ministeps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; margin-top: .35rem; }
.ch-carousel .ch-ministeps li { display: flex; align-items: center; gap: 9px; min-height: 26px; font-size: .88rem; line-height: 1.3; }
.ch-carousel .ch-ministeps li::before { content: counter(ch-mini); flex: none; display: grid; place-items: center; width: 26px; height: 22px; border-radius: 6px; background: var(--ch-tone-n); color: var(--ch-contrast); font-family: var(--ch-font-h); font-weight: 800; font-size: .8rem; box-shadow: inset 0 -2px 0 rgba(28, 43, 37, .12); transition: background-color .45s ease; }
.ch-carousel .ch-ministeps li + li::after { content: none; }
.ch-carousel .ch-fiche__rest { display: flex; align-items: flex-start; gap: .45rem; margin-top: .7rem !important; padding-top: .6rem; border-top: 1px solid rgba(28, 43, 37, .14); font-size: .86rem; line-height: 1.4; }
.ch-carousel .ch-fiche__rest .ch-icon { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--ch-a3); }
.ch-carousel .ch-fiche__rest strong { display: inline; margin-right: .3rem; }
/* The brick badge overlaps the same corner on every slide. */
.ch-carousel .ch-sticker { z-index: 2; width: 60px; height: 60px; top: -18px; right: -8px; }
@media (min-width: 600px) { .ch-carousel .ch-sticker { width: 66px; height: 66px; right: -12px; } }

/* Controls just under the card (18 px), centred. */
.ch-carousel__nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; }
.ch-carousel__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--ch-a6); border-radius: 50%; background: var(--ch-base); color: var(--ch-contrast); cursor: pointer; box-shadow: var(--ch-shadow); }
.ch-carousel__btn:hover { background: var(--ch-a3); border-color: var(--ch-a3); color: var(--ch-base); }
.ch-carousel__btn .ch-icon { width: 20px; height: 20px; }
.ch-carousel__dots { display: flex; align-items: center; }
.ch-carousel__dot { position: relative; width: 26px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ch-carousel__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; box-sizing: border-box; border-radius: 6px; background: var(--ch-a5); border: 1.5px solid var(--ch-a4); transform: translate(-50%, -50%); transition: width .2s ease, background-color .2s ease; }
.ch-carousel__dot.is-active { width: 38px; }
.ch-carousel__dot.is-active::before { width: 28px; background: var(--ch-a1); border-color: var(--ch-a1); }
.ch-carousel__dot:hover::before { border-color: var(--ch-contrast); }
html:not(.ch-js) .ch-carousel__nav { display: none; }
@media (prefers-reduced-motion: reduce) {
	.ch-carousel__track > .ch-slide, .ch-carousel .ch-stack__sheet, .ch-carousel__dot::before { transition: none; }
	.ch-carousel__track > .ch-slide:not(.is-active) { transform: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.ch-hero--home .ch-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}

/* Separator between the fiches and the devis box: a short mustard measuring line with a tilted brick. */
.ch-hero__visual { gap: 30px; }
.ch-brick-sep { position: relative; display: block; width: 100%; max-width: 460px; height: 14px; margin: 0 auto;
	background: linear-gradient(var(--ch-a1), var(--ch-a1)) center / 132px 2px no-repeat, repeating-linear-gradient(90deg, var(--ch-a1) 0 2px, transparent 2px 10px) center / 132px 6px no-repeat; }
.ch-brick-sep i { position: absolute; left: 50%; top: 50%; width: 26px; height: 13px; margin: -6.5px 0 0 -13px; border-radius: 3px; background: var(--ch-a1); box-shadow: 0 0 0 5px var(--ch-a5); transform: rotate(-12deg); }
@media (min-width: 1024px) {
	.ch-hero__visual { gap: 48px; }
	.ch-hero__visual > .ch-brick-sep { margin: 0 12px 0 auto; }
}

/* Phones: compact tool rows, the chevron on the right. */
@media (max-width: 599px) {
	.ch-toolcards { gap: 10px; }
	.ch-toolcard__in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto; padding: 12px 14px; }
	.ch-toolcard__icon { grid-row: 1 / span 3; width: 42px; height: 42px; }
	.ch-toolcard__go { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin: 0; font-size: 0; }
	.ch-toolcard__go .ch-icon { width: 20px; height: 20px; }
	.ch-toolcard__go .ch-soon { font-size: .78rem; }
}
@media (min-width: 768px) {
	.ch-toolcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ch-filters { flex-wrap: wrap; overflow: visible; }
}