/* Maison & Déclic — gabarit commun : header, menu mobile, footer. */

/* ------------------------------------------------------------------ Header */
.md-header { position: sticky; top: 0; z-index: 40; background: var(--md-brown); color: var(--md-on-dark); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06); }
.md-header__bar { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; }
.md-brand { flex: none; display: block; }
.md-brand img { height: 2.6rem; width: auto; }

.md-nav { display: none; margin-left: 2.5rem; }
.md-nav ul li { flex: none; }
.md-nav ul { display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.md-nav a { position: relative; display: inline-flex; align-items: center; min-height: var(--md-target); font-size: 0.875rem; text-decoration: none; white-space: nowrap; color: var(--md-on-dark-muted); }
.md-nav a:hover { color: #fff; }
.md-nav a[aria-current="page"] { color: var(--md-copper-on-dark); }
.md-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 2px; background: var(--md-copper-on-dark); }

.md-header__tools { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.md-tool { display: inline-grid; place-items: center; width: var(--md-target); height: var(--md-target); border: 0; border-radius: var(--md-radius); background: none; color: var(--md-on-dark); cursor: pointer; text-decoration: none; }
.md-tool:hover { background: rgb(255 255 255 / 0.08); }
.md-tool .md-icon { width: 1.45rem; height: 1.45rem; }
.md-tool--desktop { display: none; }

/* Accès aux espaces (client, professionnel ; extensible) */
.md-spaces { display: none; align-items: center; gap: 1.1rem; margin-left: 0.5rem; white-space: nowrap; }
.md-spaces__link { display: inline-flex; align-items: center; min-height: var(--md-target); padding: 0 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--md-on-dark); text-decoration: none; }
.md-spaces__link:hover { color: var(--md-copper-on-dark); text-decoration: underline; text-underline-offset: 0.3em; }
.md-spaces .md-btn { min-height: 3.1rem; padding: 0 1.9rem; }

/* Menu mobile */
.md-mobile-menu { padding: 0.5rem var(--md-pad) 1.75rem; border-top: 1px solid rgb(255 255 255 / 0.08); background: var(--md-brown); }
.md-mobile-menu[hidden] { display: none; }
.md-mobile-menu ul { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.md-mobile-menu li a { display: block; padding: 0.6rem 0; font-family: var(--md-font-serif); font-size: 1.3rem; color: var(--md-on-dark); text-decoration: none; }
.md-mobile-menu li a[aria-current="page"] { color: var(--md-copper-on-dark); }
.md-mobile-menu__spaces { display: grid; gap: 0.75rem; }
.md-mobile-menu__spaces .md-btn { width: 100%; }

@media (min-width: 80rem) {
	.md-header__bar { min-height: 5.125rem; }
	.md-tool--account { display: none; }
	.md-brand img { height: 3.4rem; }
	.md-nav { display: block; }
	.md-tool--desktop { display: inline-grid; }
	.md-spaces { display: flex; }
	.md-menu-toggle, .md-mobile-menu { display: none; }
}
@media (min-width: 80rem) and (max-width: 95rem) {
	.md-nav { margin-left: 1.5rem; }
	.md-nav ul { gap: 1.5rem; }
	.md-spaces .md-btn { padding: 0 1.4rem; }
}
/* Écrans de 80 à 85rem (ex. 1280 px avec barre de défilement) : l'en-tête dépassait de quelques pixels. */
@media (min-width: 80rem) and (max-width: 84.99rem) {
	.md-nav ul { gap: 1.25rem; }
}

/* ------------------------------------------------------------------ Footer */
.md-footer { padding-top: 2.25rem; background: var(--md-brown); color: var(--md-on-dark-muted); }
.md-footer__grid { display: grid; gap: 2rem; }
.md-footer .md-brand img { height: 3.1rem; }
.md-footer__col h2 { margin-bottom: 0.5rem; font: 600 0.8125rem/1.3 var(--md-font-sans); color: var(--md-copper-on-dark); }
.md-footer__col ul { margin: 0; padding: 0; list-style: none; }
.md-footer__col a { display: inline-flex; align-items: center; min-height: 1.75rem; font-size: 0.8125rem; color: var(--md-on-dark-muted); text-decoration: none; }
.md-footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.md-newsletter p { font-size: 0.8125rem; }
.md-newsletter__form { display: flex; max-width: 22rem; margin-top: 1rem; }
.md-newsletter__form input { flex: 1; min-width: 0; min-height: 2.9rem; padding: 0 0.9rem; border: 1px solid rgb(255 255 255 / 0.3); border-right: 0; border-radius: var(--md-radius) 0 0 var(--md-radius); background: rgb(255 255 255 / 0.05); color: #fff; font-size: 0.8125rem; }
.md-newsletter__form input::placeholder { color: #CFC3B7; }
.md-newsletter__form button { display: inline-grid; place-items: center; width: 3rem; border: 0; border-radius: 0 var(--md-radius) var(--md-radius) 0; background: var(--md-copper-btn); color: #fff; cursor: pointer; }
.md-newsletter__form button:hover { background: var(--md-copper-btn-hover); }
.md-newsletter__form .md-icon { width: 1.05rem; height: 1.05rem; }
.md-newsletter__status { min-height: 1.2em; margin-top: 0.5rem; font-size: 0.75rem; color: var(--md-on-dark-muted); }
.md-socials { display: flex; gap: 0.25rem; margin: 0.75rem 0 0 -0.6rem; padding: 0; list-style: none; }
.md-socials a { display: inline-grid; place-items: center; width: var(--md-target); height: var(--md-target); color: var(--md-on-dark); }
.md-socials a:hover { color: var(--md-copper-on-dark); }
.md-socials .md-icon { width: 1.25rem; height: 1.25rem; }
.md-footer__bottom { margin-top: 1.75rem; padding-block: 1rem 1.2rem; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 0.75rem; }

@media (min-width: 48rem) {
	.md-footer__grid { grid-template-columns: repeat(3, 1fr); }
	.md-footer__brand, .md-newsletter { grid-column: 1 / -1; }
}
@media (min-width: 75rem) {
	/* Colonne marque compressible et newsletter à largeur minimale : pas de débordement horizontal vers 1280 px. */
	.md-footer__grid { grid-template-columns: minmax(0, 20rem) 11rem 11rem 13rem minmax(14rem, 1fr); gap: 1.5rem; }
	.md-footer__brand, .md-newsletter { grid-column: auto; }
	.md-newsletter { justify-self: end; width: 100%; max-width: 22rem; }
}