/* Maison & Déclic — page d'accueil. */

/* -------------------------------------------------------------------- Hero */
.md-hero { position: relative; isolation: isolate; color: var(--md-on-dark); background: var(--md-brown-900); }
.md-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.md-hero__media .md-photo { object-position: 58% 50%; }
.md-hero__media picture { display: block; width: 100%; height: 100%; }
/* Petits écrans : recadrage vertical dédié, déjà centré sur le sujet. */
@media (max-width: 37.5em) { .md-hero__media .md-photo, .md-v2 .md-hero__media .md-photo { object-position: 50% 50%; } }
.md-hero__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgb(28 21 15 / 0.9) 0%, rgb(28 21 15 / 0.74) 34%, rgb(28 21 15 / 0.3) 60%, rgb(28 21 15 / 0.06) 80%),
		linear-gradient(0deg, rgb(28 21 15 / 0.6) 0%, rgb(28 21 15 / 0) 32%);
}
.md-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding: 2.75rem var(--md-pad) 2.5rem; }
.md-hero__inner > * { min-width: 0; }
.md-hero .md-eyebrow { color: var(--md-on-dark); letter-spacing: 0.2em; }
.md-hero__title { margin-top: 1rem; font-size: var(--md-fs-display); line-height: 1.05; letter-spacing: -0.01em; color: #fff; }
.md-hero__title span { display: block; }
.md-hero__title .md-accent { color: var(--md-copper-on-dark); }
.md-hero__lead { max-width: 33rem; margin-top: 1.5rem; font-size: var(--md-fs-lead); line-height: 1.7; color: #F3EDE6; }
.md-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2.1rem; }
.md-proofs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 2.75rem 0 0; padding: 0; list-style: none; }
.md-proofs li { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 0.9rem; border-radius: var(--md-radius-card); background: rgb(28 21 15 / 0.6); font-size: 0.8125rem; line-height: 1.45; color: #fff; }
.md-proofs .md-icon { width: 1.9rem; height: 1.9rem; stroke-width: 1.2; }
@media (max-width: 29.99rem) {
	/* Mobile : preuves en 2 × 2 compact, pour que le formulaire arrive plus tôt. */
	.md-proofs { gap: 0.4rem; margin-top: 2rem; }
	.md-proofs li { padding: 0.6rem 0.75rem; font-size: 0.75rem; line-height: 1.35; }
	.md-proofs .md-icon { display: none; }
	.md-hero__actions .md-btn { flex: 1 1 100%; }
}
@media (min-width: 75rem) { .md-proofs .md-icon { width: 2.4rem; height: 2.4rem; stroke-width: 1.15; } }

/* Carte « Vous avez un projet ? » */
.md-project-card { position: relative; overflow: hidden; padding: 1.5rem 1.25rem 1.1rem; border-radius: var(--md-radius-card); background: #fff; color: var(--md-ink); box-shadow: var(--md-shadow-form); }
.md-project-card::before, .md-project-card::after { content: ""; position: absolute; border: 1px solid rgb(199 155 120 / 0.45); border-radius: 50%; pointer-events: none; }
.md-project-card::before { top: -11rem; right: -9rem; width: 17rem; height: 26rem; }
.md-project-card::after { top: -9rem; right: -10rem; width: 15rem; height: 24rem; }
.md-project-card h2 { font-size: 1.6rem; }
.md-project-card__intro { max-width: 34ch; margin-top: 0.7rem; font-size: 0.875rem; line-height: 1.55; color: var(--md-ink-muted); }
.md-steps { display: flex; align-items: center; gap: 0.5rem; margin: 1.1rem 0 1.2rem; padding: 0; list-style: none; font-size: 0.75rem; color: var(--md-ink-muted); white-space: nowrap; }
.md-steps li { display: flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.75rem 0.2rem 0.2rem; border-radius: 999px; background: var(--md-ivory); }
.md-steps__num { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--md-line); border-radius: 50%; background: #fff; font-weight: 600; color: var(--md-ink); }
.md-steps [aria-current] { font-weight: 600; color: var(--md-ink); background: var(--md-sand); }
.md-steps [aria-current] .md-steps__num { border-color: var(--md-copper-btn); background: var(--md-copper-btn); color: #fff; }
@media (max-width: 29.99rem) {
	.md-steps li:not([aria-current]) .md-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.md-form-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem 1rem; }
.md-field--wide { grid-column: 1 / -1; }
@media (min-width: 30rem) { .md-form-grid { grid-template-columns: 1.25fr 1fr; } }
.md-property-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 0.4rem; }
@media (min-width: 30rem) { .md-property-types { grid-template-columns: repeat(4, 1fr); } }
.md-ptype { position: relative; }
.md-ptype input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.md-ptype label { display: grid; justify-items: center; align-content: center; gap: 0.35rem; min-height: 4rem; padding: 0.45rem 0.2rem; border: 1px solid var(--md-line-strong); border-radius: var(--md-radius); background: #fff; font-size: 0.6875rem; text-align: center; cursor: pointer; }
.md-ptype .md-icon { width: 1.55rem; height: 1.55rem; stroke-width: 1.2; color: var(--md-brown); }
.md-ptype input:hover + label { border-color: var(--md-brown); }
.md-ptype input:checked + label { border-color: var(--md-copper-btn); box-shadow: inset 0 0 0 1px var(--md-copper-btn); background: var(--md-copper-50); }
.md-ptype input:focus-visible + label { outline: 2px solid var(--md-copper); outline-offset: 2px; }
.md-upload { display: flex; align-items: center; gap: 1.1rem; padding: 0.75rem 1rem; border: 1px dashed var(--md-line-strong); border-radius: var(--md-radius); background: #fff; font-size: 0.8125rem; cursor: pointer; }
.md-upload:hover { border-color: var(--md-brown); }
.md-upload:focus-within { outline: 2px solid var(--md-copper); outline-offset: 2px; }
.md-upload small { display: block; font-size: 0.6875rem; color: var(--md-ink-muted); }
.md-upload .md-icon { width: 1.5rem; height: 1.5rem; color: var(--md-brown); }
.md-project-card__submit { margin-top: 1.1rem; }
.md-project-card__status { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--md-brown); }
.md-project-card__status:empty { display: none; }
.md-secure-note { display: flex; justify-content: center; align-items: center; gap: 0.45rem; margin-top: 0.75rem; font-size: 0.6875rem; color: var(--md-ink-muted); text-align: center; }
.md-secure-note .md-icon { width: 0.95rem; height: 0.95rem; color: var(--md-copper); }

@media (min-width: 75rem) {
	.md-hero__inner { grid-template-columns: minmax(0, 1fr) 26.6rem; gap: 3rem; align-items: start; max-width: var(--md-container); margin-inline: auto; padding: 1.9rem 1.5rem 0 5rem; }
	.md-hero__text { padding-top: 3.5rem; }
	.md-hero__actions .md-btn--copper { min-width: 17.5rem; }
	.md-hero__actions .md-btn--ghost-light { min-width: 14rem; }
	.md-proofs { grid-template-columns: repeat(4, minmax(0, 13.6rem)); margin: 3.1rem 0 0 -1.8rem; padding-bottom: 2.25rem; white-space: nowrap; }
	.md-project-card { margin-bottom: -2.45rem; padding: 1.5rem 1.4rem 1.1rem; }
}

/* ------------------------------------------------ Comment ça marche */
@media (min-width: 75rem) {
	.md-how { padding-top: 4.6rem; } /* laisse passer le bas de la carte formulaire (−2,45rem) */
	.md-how__list { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
}

/* -------------------------------------------------------- Types de projets */
.md-projects { padding-block: 3rem var(--md-section); background: var(--md-offwhite); }
.md-projects__grid { display: grid; gap: 2rem; }
.md-projects__intro h2 { margin-top: 0.8rem; font-size: var(--md-fs-h2); line-height: 1.18; color: var(--md-ink); }
.md-projects__intro p { max-width: 38ch; margin-top: 1.1rem; font-size: 0.9375rem; line-height: 1.7; }
.md-projects__intro .md-btn { margin-top: 1.75rem; }
.md-projects__trades { display: flex; width: fit-content; min-height: var(--md-target); margin-top: 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--md-brown); }
.md-projects__trades:hover { color: var(--md-copper-btn-hover); }
.md-project-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .md-project-types { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
@media (min-width: 75rem) {
	.md-projects__grid { grid-template-columns: 22rem 1fr; gap: 2.5rem; align-items: start; }
	.md-projects__intro { padding-top: 0.5rem; }
	.md-ptile__img { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------ Réseau pros */
.md-pros { position: relative; isolation: isolate; overflow: hidden; padding-block: 3.75rem; background: var(--md-brown); color: var(--md-on-dark); }
.md-pros__media { position: absolute; inset: 0; z-index: -1; }
.md-pros__media .md-photo { object-position: 45% 40%; }
.md-pros__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(46 36 27 / 0.95) 0%, rgb(46 36 27 / 0.88) 45%, rgb(46 36 27 / 0.6) 75%, rgb(46 36 27 / 0.25) 100%); }
.md-pros__grid { display: grid; gap: 2.5rem; }
.md-pros .md-eyebrow { color: var(--md-copper-on-dark); }
.md-pros h2 { margin-top: 0.9rem; font-size: var(--md-fs-h2); line-height: 1.18; color: #fff; }
.md-pros__text p { max-width: 44ch; margin-top: 1.1rem; font-size: 0.9375rem; line-height: 1.7; color: #F1EBE4; }
.md-pros__text .md-btn { margin-top: 1.6rem; }
.md-benefits { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.md-benefits li { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; line-height: 1.5; }
.md-benefits__icon { display: inline-grid; place-items: center; flex: none; width: 3.2rem; height: 3.2rem; border: 1px solid rgb(248 246 241 / 0.55); border-radius: 50%; }
.md-benefits__icon .md-icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.3; }
.md-member-card { padding: 1.9rem 1.6rem; border: 1px solid rgb(248 246 241 / 0.25); border-radius: var(--md-radius-card); background: rgb(46 36 27 / 0.72); backdrop-filter: blur(6px); }
.md-member-card h3 { font: 500 1.35rem/1.25 var(--md-font-serif); color: #fff; }
.md-member-card p { max-width: 32ch; margin-top: 0.8rem; font-size: 0.875rem; line-height: 1.6; color: #EDE5DC; }
.md-member-card .md-btn { margin-top: 1.4rem; white-space: nowrap; }
@media (min-width: 48rem) { .md-benefits { grid-template-columns: 1fr 1fr; } }
@media (min-width: 75rem) {
	.md-pros { min-height: 21rem; padding-block: 3.9rem 3.4rem; }
	.md-pros__media .md-photo { left: auto; right: 0; width: 50%; }
	.md-pros__grid { grid-template-columns: 26rem minmax(0, 1fr) 19.5rem; gap: 2.75rem; align-items: center; }
}

/* ------------------------------------------------------------- Réalisations */
.md-works { overflow: hidden; padding-block: 3rem 1.5rem; background: var(--md-ivory); }
.md-works__grid { display: grid; gap: 2rem; padding-left: var(--md-pad); }
.md-works__intro { padding-right: var(--md-pad); }
.md-works__intro h2 { font-size: var(--md-fs-h2); line-height: 1.2; color: var(--md-ink); }
.md-works__intro h2 .md-accent { display: block; margin-top: 0.2rem; font-size: 0.85em; color: var(--md-copper-btn); }
.md-works__intro p { max-width: 44ch; margin-top: 1.1rem; font-size: 0.9375rem; line-height: 1.7; }
.md-works__notice { margin-top: 0.9rem; font-size: 0.8125rem; color: var(--md-ink-muted); }
.md-works__intro .md-btn { margin-top: 1.5rem; }
.md-works__stage { position: relative; }
.md-works__strip { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 0.7rem; margin: 0; padding: 0 var(--md-pad) 0 0; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.md-works__strip::-webkit-scrollbar { display: none; }
.md-works__item { position: relative; overflow: hidden; aspect-ratio: 305 / 287; border-radius: var(--md-radius); background: var(--md-sand); scroll-snap-align: start; }
.md-works__caption { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.25rem 0.55rem; border-radius: 3px; background: rgb(28 21 15 / 0.7); color: #fff; font-size: 0.6875rem; }
.md-works__nav { position: absolute; right: calc(var(--md-pad) + 0.75rem); bottom: 0.75rem; display: flex; gap: 0.55rem; }
.md-works__nav button { display: inline-grid; place-items: center; width: var(--md-target); height: var(--md-target); border: 0; border-radius: 50%; background: #fff; color: var(--md-ink); box-shadow: 0 4px 12px rgb(0 0 0 / 0.18); cursor: pointer; }
.md-works__nav button:last-child { background: rgb(46 36 27 / 0.9); color: #fff; }
.md-works__nav .md-icon { width: 1.05rem; height: 1.05rem; }
@media (min-width: 75rem) {
	.md-works { padding-block: 1.5rem; }
	.md-works__grid { grid-template-columns: 27rem 1fr; gap: 2rem; align-items: center; max-width: none; }
	.md-works__strip { grid-auto-flow: row; grid-template-columns: 305fr 313fr 343fr; padding-right: 0; overflow: visible; }
	.md-works__item { height: 17.9rem; aspect-ratio: auto; }
	.md-works__nav { right: 1rem; bottom: 1rem; }
}

/* ------------------------------------------------- Confiance + boutique */
.md-trust { padding-block: 1.75rem 2rem; background: var(--md-ivory); }
.md-trust__grid { display: grid; gap: 2.25rem; align-items: center; }
.md-trust__block .md-demo-flag { margin-bottom: 0.6rem; }
.md-trust h2 { font-size: 1.6rem; color: var(--md-ink); }
.md-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.55rem; font-size: 0.8125rem; color: var(--md-ink-muted); }
.md-stars { display: inline-flex; gap: 0.15rem; color: var(--md-copper); }
.md-stars .md-icon { width: 1.3rem; height: 1.3rem; fill: currentColor; stroke: none; }
.md-rating strong { font-size: 1.3rem; font-weight: 500; color: var(--md-ink); }
.md-rating strong small { font-size: 0.8rem; color: var(--md-ink-muted); }
.md-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1.6rem 0 0; padding: 0; list-style: none; text-align: center; }
.md-stats li { padding: 0 0.5rem; }
.md-stats li + li { border-left: 1px solid var(--md-line); }
.md-stats .md-icon { display: block; width: 2rem; height: 2rem; margin: 0 auto 0.6rem; stroke-width: 1.2; color: var(--md-copper-btn); }
.md-stats strong { display: block; font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.md-stats span { font-size: 0.75rem; color: var(--md-ink-muted); }
.md-quote { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; }
.md-quote__mark { font: 500 3.2rem/0.8 var(--md-font-serif); color: var(--md-copper); }
.md-quote blockquote { font-size: 0.875rem; line-height: 1.8; color: var(--md-ink-muted); }
.md-quote figcaption { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.2rem; font-size: 0.8125rem; font-weight: 500; }
.md-avatar { display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--md-sand); font-weight: 600; color: var(--md-brown); }
.md-quote .md-stars .md-icon { width: 0.95rem; height: 0.95rem; }

.md-shop { position: relative; isolation: isolate; overflow: hidden; min-height: 15rem; padding: 1.75rem 1.6rem 1.8rem; border-radius: var(--md-radius-card); background: var(--md-brown); color: var(--md-on-dark); }
.md-shop .md-eyebrow { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--md-copper-on-dark); }
.md-shop h2 { max-width: 14ch; margin-top: 0.4rem; font-size: 1.5rem; line-height: 1.2; color: #fff; }
.md-shop p { max-width: 30ch; margin-top: 0.8rem; font-size: 0.875rem; line-height: 1.6; color: #EDE5DC; }
.md-shop .md-btn { margin-top: 1.2rem; }
.md-shop__bag { position: absolute; right: 2.25rem; bottom: 2.25rem; display: inline-grid; place-items: center; width: 3.3rem; height: 3.3rem; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 50%; background: rgb(255 255 255 / 0.08); }
.md-shop__bag .md-icon { width: 1.5rem; height: 1.5rem; }
@media (min-width: 48rem) { .md-trust__grid { grid-template-columns: 1fr 1fr; } .md-shop { grid-column: 1 / -1; } }
@media (min-width: 75rem) {
	.md-trust__grid { grid-template-columns: 30rem 1fr 25.4rem; gap: 0; }
	.md-trust__block { padding-right: 2rem; }
	.md-quote { padding: 0.5rem 2.5rem 0.5rem 1.75rem; border-left: 1px solid var(--md-line); }
	.md-shop { grid-column: auto; }
}

/* Production sans données réelles : la boutique occupe seule la rangée. */
.md-trust__grid > .md-shop:only-child { grid-column: 1 / -1; }