/* ==========================================================================
   IDYLHOM — Module annonces (biens & locations)
   Design issu de la maquette Magic Patterns. Marque : #02012e.
   ========================================================================== */

.idylhom-grid,
.idylhom-archive,
.idylhom-single { --brand:#02012e; --brand-light:#1a1957; --ink:#1c1917; --muted:#78716c; --warm:#f5f1eb; --border:#e7e5e4; --radius:1.5rem; }

/* --- Grille de cards ---------------------------------------------------- */
.idylhom-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 1.5rem;
}

/* --- Card -------------------------------------------------------------- */
.idylhom-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	transition: box-shadow .3s ease, transform .3s ease;
}
.idylhom-card:hover { box-shadow: 0 20px 40px -12px rgba(2,1,46,.15); transform: translateY(-3px); }

.idylhom-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.idylhom-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.idylhom-card:hover .idylhom-card__media img { transform: scale(1.05); }

.idylhom-card__badges { position: absolute; top: 1rem; left: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.idylhom-tag {
	padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
	background: rgba(255,255,255,.92); color: var(--ink); backdrop-filter: blur(6px);
}
.idylhom-tag--dark { background: rgba(2,1,46,.92); color: #fff; }
.idylhom-tag--brand { background: var(--brand); color: #fff; }

.idylhom-card__price {
	position: absolute; bottom: 1rem; right: 1rem;
	padding: .5rem .9rem; border-radius: .85rem;
	background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
	font-weight: 700; color: var(--brand);
}

.idylhom-card__body { padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.idylhom-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.idylhom-card__title { font-size: 1.15rem; font-weight: 600; margin: 0; line-height: 1.25; }
.idylhom-card:hover .idylhom-card__title { color: var(--brand); }
.idylhom-card__type { flex-shrink: 0; font-size: .78rem; font-weight: 500; color: var(--muted); background: #f5f5f4; padding: .2rem .6rem; border-radius: .5rem; }
.idylhom-card__loc { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .85rem; margin: 0; }
.idylhom-card__stats { margin-top: auto; padding-top: 1rem; border-top: 1px solid #f0eeec; display: grid; grid-template-columns: repeat(3, 1fr); color: #57534e; font-size: .85rem; }
.idylhom-stat { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: 0 .4rem; }
.idylhom-stat + .idylhom-stat { border-left: 1px solid #f0eeec; }
.idylhom-stat strong { color: var(--ink); font-weight: 600; font-size: .95rem; }
.idylhom-stat small { color: var(--muted); font-size: .8rem; }
.idylhom-stat__t { font-size: .9rem; }
.idylhom-ic { flex-shrink: 0; color: #a8a29e; vertical-align: middle; }
.idylhom-card__loc .idylhom-ic { color: var(--muted); }

/* --- Archive : hero ---------------------------------------------------- */
.idylhom-archive-hero { padding: 3.5rem 0; color: #fff; }
.idylhom-archive-hero h1 { margin: .4rem 0 .5rem; font-size: clamp(1.8rem, 4vw, 2.6rem); color: #fff !important; }
.idylhom-archive-hero .idylhom-eyebrow,
.idylhom-archive-hero small { color: #c9a96a; }
.idylhom-archive-hero p { color: #c7c6e6; margin: 0; max-width: 40rem; }

/* --- Archive : layout -------------------------------------------------- */
.idylhom-archive { padding-block: 2.5rem; }
.idylhom-archive__grid { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .idylhom-archive__grid { grid-template-columns: 1fr; } }

.idylhom-filters { position: sticky; top: 90px; }
.idylhom-filters__form { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.idylhom-filters__title { font-weight: 700; color: var(--brand); }
.idylhom-field { display: flex; flex-direction: column; gap: .4rem; }
.idylhom-field label { font-size: .8rem; font-weight: 600; color: #44403c; }
.idylhom-field select,
.idylhom-field input[type="range"] { width: 100%; }
.idylhom-field select { border: 1px solid var(--border); border-radius: .75rem; padding: .6rem .7rem; font: inherit; background: #fff; }
.idylhom-budget { accent-color: var(--brand); }
.idylhom-reset { text-align: center; font-size: .8rem; color: var(--brand); text-decoration: none; }

/* --- Résultats --------------------------------------------------------- */
.idylhom-results__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.idylhom-results__bar p { margin: 0; color: var(--muted); }
.idylhom-sort { display: flex; align-items: center; gap: .5rem; }
.idylhom-sort label { font-size: .85rem; color: var(--muted); }
.idylhom-sort select { border: 1px solid var(--border); border-radius: .75rem; padding: .45rem .7rem; font: inherit; background: #fff; }

.idylhom-empty { background: #fff; border: 1px dashed var(--border); border-radius: var(--radius); padding: 3rem; text-align: center; color: var(--muted); }

.idylhom-pagination { margin-top: 2rem; display: flex; justify-content: center; gap: .4rem; }
.idylhom-pagination .page-numbers { padding: .5rem .85rem; border-radius: .6rem; border: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.idylhom-pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --- Single ------------------------------------------------------------ */
.idylhom-single { padding-block: 1.5rem 3rem; }
.idylhom-back { display: inline-block; margin: .5rem 0 1.2rem; color: var(--muted); text-decoration: none; font-weight: 600; }
.idylhom-single__media { position: relative; border-radius: var(--radius); overflow: hidden; }
.idylhom-single__media img { width: 100%; height: 440px; object-fit: cover; display: block; }

.idylhom-single__grid { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; margin-top: 2rem; align-items: start; }
@media (max-width: 900px) { .idylhom-single__grid { grid-template-columns: 1fr; } }

.idylhom-single__loc { color: var(--muted); margin: 0 0 .3rem; }
.idylhom-single__main h1 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.idylhom-single__price { font-size: 2rem; font-weight: 700; color: var(--brand); }

.idylhom-single__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 1.8rem 0; }
.idylhom-single__stats div { background: #fff; border: 1px solid var(--border); border-radius: .9rem; padding: .9rem; text-align: center; }
.idylhom-single__stats .idylhom-ic { width: 20px; height: 20px; color: var(--brand); margin: 0 auto .35rem; display: block; }
.idylhom-single__stats span { display: block; font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.idylhom-single__stats small { color: var(--muted); }

.idylhom-single__desc, .idylhom-single__caracs { margin-top: 2rem; }
.idylhom-single__desc h2, .idylhom-single__caracs h2, .idylhom-similar h2 { font-size: 1.25rem; margin: 0 0 .8rem; }
.idylhom-caracs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (max-width: 560px) { .idylhom-caracs__grid, .idylhom-single__stats { grid-template-columns: repeat(2, 1fr); } }
.idylhom-carac { display: flex; justify-content: space-between; background: #fff; border: 1px solid var(--border); border-radius: .8rem; padding: .7rem .9rem; }
.idylhom-carac span { color: var(--muted); }
.idylhom-features { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.idylhom-contact-card { position: sticky; top: 90px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.idylhom-contact-card__agent { display: flex; align-items: center; gap: .8rem; }
.idylhom-avatar { width: 48px; height: 48px; border-radius: 999px; background: rgba(2,1,46,.1); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.idylhom-contact-card__agent small { color: var(--muted); display: block; }

.idylhom-similar { margin-top: 3.5rem; }

/* ===== Performance énergétique (échelle DPE / GES) ===== */
.idylhom-single__energy { margin: 2.5rem 0; }
.idylhom-single__energy h2 { margin-bottom: 1rem; }
.idylhom-energy { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.idylhom-energy__label { width: 48px; font-weight: 700; color: #02012e; font-size: .9rem; }
.idylhom-energy__scale { display: flex; gap: 4px; flex-wrap: wrap; }
.idylhom-energy__g {
	width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px; font-weight: 700; color: #fff; font-size: .85rem; opacity: .35;
	transition: transform .15s ease;
}
.idylhom-energy__g.is-active { opacity: 1; transform: scale(1.18); box-shadow: 0 4px 12px rgba(0,0,0,.18); outline: 2px solid #02012e; }
.idylhom-energy__g--a { background: #319834; }
.idylhom-energy__g--b { background: #33cc31; }
.idylhom-energy__g--c { background: #cbef43; color: #1c1917; }
.idylhom-energy__g--d { background: #fff833; color: #1c1917; }
.idylhom-energy__g--e { background: #fdc70c; color: #1c1917; }
.idylhom-energy__g--f { background: #fc7d24; }
.idylhom-energy__g--g { background: #ff0000; }