/* ============================================================
   NOUVEAU DESIGN SYSTEM — Chez l'habitant (refresh 2026)
   Charge sur tout le site en complement de l'existant :
   header + footer + composants. Les classes sont prefixees ou
   distinctes de Bootstrap (pas de .btn/.nav/.container) pour
   cohabiter avec les pages non encore migrees.
   ============================================================ */

:root {
	--teal: #1aa59a;
	--teal-dark: #12756d;
	--teal-light: #e4f4f2;
	--ink: #1e2a29;
	--gris: #5f6f6d;
	--gris-clair: #eef2f2;
	--fond: #f7fafa;
	--blanc: #ffffff;
	--accent: #e8890c;
	--radius: 14px;
	--ombre: 0 2px 12px rgba(30, 42, 41, .08);
	--ombre-hover: 0 8px 28px rgba(30, 42, 41, .14);
}

/* Typographie globale (refresh) */
body {
	font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.conteneur { max-width: 1380px; margin: 0 auto; padding: 0 28px; }

/* Compensation : l'ancien header etait fixe, le nouveau est sticky (dans le flux) */
.page-content { padding-top: 24px !important; }

/* ---------- Boutons ---------- */
.bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
	border: none; cursor: pointer; transition: all .15s ease;
	text-decoration: none !important; font-family: inherit; line-height: 1.4;
}
.bouton-primaire { background: var(--teal); color: #fff !important; }
.bouton-primaire:hover { background: var(--teal-dark); color: #fff !important; }
.bouton-accent { background: var(--accent); color: #fff !important; }
.bouton-accent:hover { filter: brightness(.92); color: #fff !important; }
.bouton-contour { background: transparent; color: var(--ink) !important; border: 1.5px solid #d5dede; }
.bouton-contour:hover { border-color: var(--teal); color: var(--teal-dark) !important; }

/* ---------- Header ---------- */
.topbar {
	background: var(--blanc);
	border-bottom: 1px solid var(--gris-clair);
	position: sticky; top: 0; z-index: 1050;
}
.topbar-inner {
	display: flex; align-items: center; height: 82px; gap: 24px;
	padding: 0 32px;
	transition: height .2s ease;
}
.topbar .logo { flex: none; width: auto; display: block; }
.topbar .logo svg { height: 60px; width: auto; display: block; transition: height .2s ease; }
.topbar.reduit .topbar-inner { height: 64px; }
.topbar.reduit .logo svg { height: 40px; }

.nav-principal { flex: 1; display: flex; align-items: center; justify-content: center; gap: 36px; }
.nav-principal a { color: var(--ink); font-weight: 500; font-size: 15px; text-decoration: none; }
.nav-principal a:hover { color: var(--teal-dark); text-decoration: none; }

.topbar-actions { flex: none; display: flex; align-items: center; gap: 14px; }
.picto-user {
	width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #d5dede;
	display: flex; align-items: center; justify-content: center; transition: border-color .15s;
}
.picto-user:hover { border-color: var(--teal); text-decoration: none; }

.burger {
	display: none; flex-direction: column; gap: 5px; background: none; border: none;
	cursor: pointer; padding: 8px;
}
.burger span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; display: block; }

.menu-mobile {
	display: none; background: var(--blanc); border-bottom: 1px solid var(--gris-clair);
	padding: 12px 32px 26px;
}
.menu-mobile.ouvert { display: block; }
.menu-mobile a {
	display: block; padding: 12px 0; font-weight: 600; color: var(--ink);
	font-size: 17px; border-bottom: 1px solid var(--gris-clair); text-decoration: none;
}
.menu-mobile a.bouton { margin-top: 18px; border-bottom: none; color: #fff; text-align: center; display: flex; }

/* ---------- Autocompletion de recherche (home, listings) ---------- */
.autocomplete {
	position: relative;
}
.autocomplete .suggestions {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	background: #fff;
	border-radius: var(--radius);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
	overflow: hidden auto;
	max-height: 420px;
	color: var(--ink);
	z-index: 1060;
	text-align: left;
}
.suggestions .groupe {
	padding: 10px 0 4px;
}
.suggestions .groupe + .groupe {
	border-top: 1px solid var(--gris-clair);
}
.suggestions .groupe-titre {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--gris);
	font-weight: 700;
	padding: 4px 20px;
}
.suggestions .item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
	cursor: pointer;
	font-size: 15px;
	gap: 12px;
}
.suggestions .item:hover,
.suggestions .item.actif {
	background: var(--teal-light);
}
.suggestions .item .detail {
	color: var(--gris);
	font-size: 13px;
}
.suggestions .item .badge-nb {
	font-size: 13px;
	color: var(--gris);
	white-space: nowrap;
	flex: none;
}
.suggestions mark {
	background: none;
	color: var(--teal-dark);
	font-weight: 700;
	padding: 0;
}

/* ---------- Cartes d'annonces (listings, home) ---------- */
.grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 24px;
	margin: 0;
}

.carte {
	background: var(--blanc);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--ombre);
	transition: box-shadow .2s, transform .2s;
	position: relative;
	display: flex;
	flex-direction: column;
}
.carte:hover {
	box-shadow: var(--ombre-hover);
	transform: translateY(-3px);
}
.carte > a {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.carte-photo {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
	background: var(--gris-clair);
}
.carte-promo {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	z-index: 2;
}
.carte-localiser {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(255, 255, 255, .92);
	color: var(--ink);
	font-size: 12px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 999px;
	z-index: 2;
	text-decoration: none;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}
.carte-localiser:hover {
	background: #fff;
	color: var(--teal-dark);
	text-decoration: none;
}
.carte-localiser svg {
	margin-right: 4px;
	color: var(--teal-dark);
	vertical-align: -2px;
}
.carte-corps {
	padding: 16px 18px 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.carte-lieu {
	font-size: 12px;
	color: var(--gris);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
}
h3.carte-nom {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.2px;
	color: var(--ink);
	margin: 0;
	line-height: 1.35;
}
.carte-infos {
	font-size: 14px;
	color: var(--gris);
}
/* Distance par rapport a la ville recherchee (listings ville) */
.carte-distance {
	font-size: 13px;
	font-weight: 700;
	color: var(--teal-dark);
}
.carte-promo-texte {
	color: var(--accent);
	font-size: 13px;
	font-weight: 600;
	margin: 6px 0 0;
}
.carte-pied {
	margin-top: auto;
	padding-top: 10px;
}
.carte-prix {
	font-weight: 800;
	font-size: 17px;
	color: var(--ink);
}
.carte-prix .a-partir {
	display: block;
	font-weight: 500;
	color: var(--gris);
	font-size: 12px;
}
.carte-prix small {
	font-weight: 500;
	color: var(--gris);
	font-size: 12px;
}
@media (max-width: 560px) {
	.grille { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
footer.pied {
	background: var(--ink); color: #b9c9c7; margin-top: 72px;
	padding: 56px 0 24px; font-size: 14px;
}
.pied a { color: #d9e5e3; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-bottom: 40px; }
.pied h4 {
	color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .1em;
	margin: 0 0 14px 0; font-weight: 700;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied ul li { list-style: none; margin: 0 0 8px 0; padding: 0; }
.pied .lien-fb { display: inline-block; margin-top: 8px; font-size: 22px; }
.pied-bas {
	border-top: 1px solid #34504d; padding-top: 20px;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.pied-bas p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.nav-principal { display: none; }
	.topbar-actions .bouton { display: none; }
	.burger { display: flex; }
	.topbar-inner { padding: 0 20px; height: 68px; }
	.topbar .logo svg { height: 44px; }
	.conteneur { padding: 0 20px; }
}