/* ============================================================
   Home4Seniors — Custom CSS
   Couleurs du logo: #e8724a (orange), #6b2d8c (violet), #3d3554 (dark)
   ============================================================ */

:root {
    --primary:   #e8724a;
    --secondary: #6b2d8c;
    --dark:      #3d3554;
    --muted:     #7a748a;
    --light:     #f9f7fc;
    --gradient:  linear-gradient(135deg, #e8724a, #6b2d8c);
    --radius:    12px;
    --shadow:    0 4px 24px rgba(61, 53, 84, 0.10);
    --shadow-lg: 0 8px 40px rgba(61, 53, 84, 0.16);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--dark); background: var(--light); }
a { color: inherit; text-decoration: none; }

/* ---- Gradient text ---- */
.gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Gradient bg ---- */
.gradient-bg {
    background: var(--gradient);
}

/* ---- Hero ---- */
.hero {
    background: linear-gradient(160deg, #fff 0%, #f3eef9 60%, #fde8df 100%);
    padding: 4rem 0 3rem;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(232,114,74,.12), transparent 70%);
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(107,45,140,.10), transparent 70%);
    pointer-events: none;
}

/* ---- Search box ---- */
.search-box {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 2rem;
}
.search-tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.search-tab {
    padding: .5rem 1.25rem;
    border-radius: 999px;
    border: 2px solid #e5e3ef;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--muted);
    background: transparent;
    transition: all .2s;
}
.search-tab.active, .search-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(232,114,74,.06);
}
.search-tab.active { font-weight: 600; }

.search-input-wrap { position: relative; }
.search-input-wrap input,
.search-input-wrap select {
    width: 100%;
    padding: .875rem 1.25rem .875rem 3rem;
    border: 2px solid #e5e3ef;
    border-radius: var(--radius);
    font-size: 1rem;
    color: var(--dark);
    background: #fff;
    outline: none;
    transition: border-color .2s;
    appearance: none;
}
.search-input-wrap input:focus,
.search-input-wrap select:focus { border-color: var(--primary); }
.search-input-wrap .icon {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none;
}
.search-btn {
    width: 100%;
    padding: .875rem;
    background: var(--gradient);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: .75rem;
    transition: opacity .2s, transform .1s;
}
.search-btn:hover { opacity: .92; transform: translateY(-1px); }
.search-btn:active { transform: translateY(0); }

/* Autocomplete dropdown */
.autocomplete-list {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff;
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
}
.autocomplete-item {
    padding: .75rem 1.25rem;
    cursor: pointer;
    font-size: .9rem;
    border-bottom: 1px solid #f0eef5;
    display: flex; align-items: center; gap: .75rem;
    transition: background .15s;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.focused { background: var(--light); }
.autocomplete-item .label { font-weight: 500; }
.autocomplete-item .sub { font-size: .8rem; color: var(--muted); }

/* ---- Province cards ---- */
.province-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.province-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: var(--shadow);
    border: 2px solid transparent;
    transition: all .2s;
    cursor: pointer;
}
.province-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.province-card .count {
    display: inline-block;
    background: rgba(232,114,74,.1);
    color: var(--primary);
    font-weight: 700;
    font-size: .875rem;
    padding: .2rem .75rem;
    border-radius: 999px;
    margin-bottom: .5rem;
}
.province-card .name { font-weight: 600; font-size: 1rem; color: var(--dark); }

/* ---- Maison card ---- */
.maison-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: all .25s;
    border: 1px solid #f0eef5;
    display: flex;
    flex-direction: column;
}
.maison-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.maison-card__img {
    width: 100%; height: 160px;
    object-fit: cover;
    background: #f0eef5;
}
.maison-card__img-placeholder {
    width: 100%; height: 160px;
    background: linear-gradient(135deg, #f0eef5, #ede8f5);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
}
.maison-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.maison-card__name { font-weight: 700; font-size: 1rem; margin-bottom: .25rem; color: var(--dark); }
.maison-card__location { font-size: .85rem; color: var(--muted); margin-bottom: .75rem; display: flex; align-items: center; gap: .35rem; }
.maison-card__desc { font-size: .85rem; color: var(--muted); line-height: 1.5; flex: 1; margin-bottom: 1rem; }
.maison-card__footer { display: flex; justify-content: space-between; align-items: center; }
.btn-detail {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--gradient);
    color: #fff; font-size: .85rem; font-weight: 600;
    padding: .5rem 1.25rem; border-radius: 999px;
    transition: opacity .2s;
}
.btn-detail:hover { opacity: .9; }

/* ---- Type badges ---- */
.badge { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; padding: .2rem .65rem; border-radius: 999px; }
.badge-mr  { background: rgba(232,114,74,.12); color: var(--primary); }
.badge-mrs { background: rgba(107,45,140,.12); color: var(--secondary); }
.badge-rs  { background: rgba(61,53,84,.10);  color: var(--dark); }

/* ---- Sticky lead form ---- */
.lead-form-wrap {
    position: sticky;
    top: 80px;
}
.lead-form {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border-top: 4px solid var(--primary);
    padding: 1.5rem;
}
.lead-form h3 {
    font-size: 1.1rem; font-weight: 700; margin-bottom: .25rem;
    color: var(--dark);
}
.lead-form p.sub { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.lead-form .form-field {
    margin-bottom: .75rem;
}
.lead-form input {
    width: 100%;
    padding: .75rem 1rem;
    border: 2px solid #e5e3ef;
    border-radius: 8px;
    font-size: .9rem;
    color: var(--dark);
    outline: none;
    transition: border-color .2s;
}
.lead-form input:focus { border-color: var(--primary); }
.lead-form input.error { border-color: #ef4444; }
.lead-form .submit-btn {
    width: 100%;
    padding: .875rem;
    background: var(--gradient);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem; font-weight: 700;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
    margin-top: .25rem;
}
.lead-form .submit-btn:hover { opacity: .92; transform: translateY(-1px); }
.lead-form .submit-btn:disabled { opacity: .6; cursor: default; transform: none; }
.lead-form .gdpr { font-size: .72rem; color: var(--muted); margin-top: .75rem; text-align: center; }
.lead-form .gdpr a { color: var(--secondary); text-decoration: underline; }
.lead-form .success-msg { display: none; text-align: center; padding: 1rem 0; }
.lead-form .success-msg .icon { font-size: 2.5rem; }
.lead-form .success-msg p { font-weight: 600; color: #16a34a; margin-top: .5rem; }

/* ---- Sidebar ville list ---- */
.ville-list { list-style: none; padding: 0; margin: 0; }
.ville-list li { border-bottom: 1px solid #f0eef5; }
.ville-list a {
    display: flex; justify-content: space-between; align-items: center;
    padding: .6rem .5rem;
    font-size: .9rem; color: var(--dark);
    transition: color .15s;
}
.ville-list a:hover { color: var(--primary); }
.ville-list .nbr {
    background: var(--light);
    color: var(--muted);
    font-size: .8rem; font-weight: 600;
    padding: .1rem .5rem; border-radius: 999px;
}
.ville-list a:hover .nbr { background: rgba(232,114,74,.1); color: var(--primary); }

/* ---- Pagination ---- */
.pagination-nav { display: flex; justify-content: center; margin-top: 2rem; }
.pagination-list { display: flex; gap: .4rem; list-style: none; padding: 0; flex-wrap: wrap; justify-content: center; }
.page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px; font-size: .875rem; font-weight: 500;
    color: var(--dark); background: #fff; border: 2px solid #e5e3ef;
    transition: all .15s;
}
.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--gradient); border-color: transparent; color: #fff; font-weight: 700; }

/* ---- SVG Belgium map ---- */
.belgium-map-wrap { position: relative; }
#belgium-svg-map svg { width: 100%; height: auto; display: block; }
#belgium-svg-map path[data-region] {
    fill: #ede0f7;
    cursor: pointer;
    transition: fill .2s, stroke-width .2s;
    stroke: #fff;
    stroke-width: .5;
}
#belgium-svg-map path[data-region]:hover {
    fill: var(--primary);
    stroke-width: 1.5;
}
.map-tooltip {
    position: absolute;
    padding: 5px 12px;
    background: rgba(61, 53, 84, 0.88);
    color: #fff;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 20;
}

/* ---- Photo gallery ---- */
.photo-gallery { display: grid; gap: .5rem; }
.photo-gallery.has-multiple { grid-template-columns: 1fr 1fr; }
.photo-gallery img {
    width: 100%; height: 220px; object-fit: cover;
    border-radius: var(--radius); cursor: pointer;
    transition: transform .2s;
}
.photo-gallery img:hover { transform: scale(1.02); }
.photo-gallery .main-photo { grid-column: 1 / -1; height: 280px; }

/* ---- Services grid ---- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.service-item {
    display: flex; align-items: center; gap: .5rem;
    background: var(--light); border-radius: 8px; padding: .5rem .75rem;
    font-size: .82rem; font-weight: 500; color: var(--dark);
}
.service-item svg { flex-shrink: 0; color: var(--primary); }

/* ---- Breadcrumb ---- */
.breadcrumb { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--secondary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: #d1cfe6; }

/* ---- Section titles ---- */
.section-title { font-size: 1.75rem; font-weight: 800; color: var(--dark); }
.section-sub { font-size: 1rem; color: var(--muted); margin-top: .25rem; }

/* ---- Trust bar ---- */
.trust-bar {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    justify-content: center; align-items: center;
    padding: 1rem 0; font-size: .9rem; color: var(--muted);
}
.trust-item { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.trust-item svg { color: var(--primary); flex-shrink: 0; }

/* ---- Google map container ---- */
#gmap { width: 100%; height: 360px; border-radius: var(--radius); overflow: hidden; }

/* ---- Lightbox ---- */
.lightbox-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.9); z-index: 1000;
    align-items: center; justify-content: center;
}
.lightbox-overlay.open { display: flex; }
.lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; }
.lightbox-close {
    position: absolute; top: 1rem; right: 1.5rem;
    font-size: 2rem; color: #fff; cursor: pointer; line-height: 1;
    background: none; border: none;
}

/* ---- Callback modal ---- */
.callback-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(61,53,84,.65); z-index: 2000;
    align-items: center; justify-content: center;
    padding: 1rem;
}
.callback-modal-overlay.open { display: flex; }
.callback-modal-box {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%; max-width: 420px;
    position: relative;
    animation: modal-in .2s ease;
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(-16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.callback-modal-close {
    position: absolute; top: .75rem; right: 1rem;
    font-size: 1.75rem; color: var(--muted); line-height: 1;
    background: none; border: none; cursor: pointer;
    transition: color .15s;
}
.callback-modal-close:hover { color: var(--dark); }
.callback-modal-box .lead-form { box-shadow: none; border-radius: var(--radius); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .hero { padding: 2.5rem 0 2rem; }
    .search-box { padding: 1.25rem; }
    .province-grid { grid-template-columns: repeat(2, 1fr); }
    .lead-form-wrap { position: static; margin-bottom: 1.5rem; }
    .photo-gallery img { height: 160px; }
    .photo-gallery .main-photo { height: 200px; }
    #gmap { height: 260px; }
}

@media (max-width: 480px) {
    .province-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}