/* ─────────────────────────────────────────────────────────────
   ALGERIAN THEME — darjadida.com
   Palette drapeau algérien officiel
   #006233 vert | #C8102E rouge | #1A1F2E dark
   Doré retiré (2026-08-25) : les accents sur fond sombre de ce
   fichier pointent maintenant directement sur --dj-vert-clair
   (darjadida-tokens.css) — tous confirmés en contexte sombre
   (property-titlebar, filter-bar, mortgage-result-box…).
──────────────────────────────────────────────────────────────── */

:root {
    --vert:   #006233;
    --vert-f: #004d27;
    --rouge:  #C8102E;
    --dark:   #1A1F2E;
    --blanc:  #FFFFFF;
}

/* ── Navbar publique ──────────────────────────────────────── */
.navbar-public {
    background: var(--vert) !important;
}
.navbar-public .navbar-brand {
    color: var(--blanc) !important;
}
.navbar-public .navbar-brand small {
    color: rgba(255,255,255,.45) !important;
}
.navbar-public .nav-link {
    color: rgba(255,255,255,.9) !important;
}
.navbar-public .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
}
.navbar-public .btn-poster {
    background: var(--dj-vert-clair, #66A185) !important;
    color: var(--dark) !important;
}
.navbar-public .btn-poster:hover {
    opacity: .85 !important;
    color: var(--dark) !important;
}

/* ── Boutons primaires (btn-dark → vert) ─────────────────── */
.btn-dark,
.btn-vert {
    background: var(--vert) !important;
    border-color: var(--vert) !important;
    color: var(--blanc) !important;
    font-weight: 700;
    transition: background .15s, border-color .15s;
}
.btn-dark:hover,
.btn-vert:hover {
    background: var(--vert-f) !important;
    border-color: var(--vert-f) !important;
    color: var(--blanc) !important;
}
.btn-outline-dark {
    color: var(--vert) !important;
    border-color: var(--vert) !important;
}
.btn-outline-dark:hover {
    background: var(--vert) !important;
    color: var(--blanc) !important;
}

/* ── Badges opération ─────────────────────────────────────── */
.badge-op-vente    { background: #C8102E !important; color: #fff !important; }
.badge-op-location { background: #006233 !important; color: #fff !important; }
.badge-op-vacances { background: #0077B6 !important; color: #fff !important; }
.badge-op-echange  { background: #6C757D !important; color: #fff !important; }
.badge-op-default  { background: #6C757D !important; color: #fff !important; }

/* ── Hero page d'accueil ──────────────────────────────────── */
.hero {
    background:
        linear-gradient(160deg, rgba(0,77,39,.97) 0%, rgba(0,98,51,.93) 60%, rgba(0,77,39,.98) 100%),
        radial-gradient(ellipse at 70% 50%, rgba(102,161,133,.15) 0%, transparent 60%) !important;
}

/* ── Barre de filtres ─────────────────────────────────────── */
.filter-bar {
    background: var(--vert-f) !important;
    border-bottom-color: var(--dj-vert-clair, #66A185) !important;
}
.filter-bar .filter-select {
    background: rgba(0,0,0,.25) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    color: #fff !important;
}
.filter-bar .filter-select:focus {
    border-color: var(--dj-vert-clair, #66A185) !important;
    box-shadow: 0 0 0 2px rgba(102,161,133,.2) !important;
    background: rgba(0,0,0,.3) !important;
    color: #fff !important;
}
.filter-bar .filter-select option { background: var(--vert-f); color: #fff; }
.filter-bar .filter-select::placeholder { color: rgba(255,255,255,.5) !important; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination .page-item.active .page-link {
    background-color: var(--vert) !important;
    border-color: var(--vert) !important;
    color: #fff !important;
}
.pagination .page-link {
    color: var(--dark);
}
.pagination .page-link:hover {
    background-color: var(--vert-f) !important;
    border-color: var(--vert-f) !important;
    color: #fff !important;
}

/* ── Formulaire multi-étapes ──────────────────────────────── */
.wiz-step.active .circle {
    background: var(--vert) !important;
    border-color: var(--vert) !important;
    color: #fff !important;
}
.wiz-step.active .lbl {
    color: var(--vert) !important;
}
.wiz-step.done .circle {
    background: var(--dj-vert-clair, #66A185) !important;
    border-color: var(--dj-vert-clair, #66A185) !important;
    color: var(--dark) !important;
}
.type-card-btn.selected {
    border-color: var(--vert) !important;
    background: var(--vert) !important;
    color: #fff !important;
}

/* ── Titlebar page détail (CI3 style) ─────────────────────── */
.property-titlebar {
    background: var(--dark);
    color: #fff;
    padding: 20px 0 24px;
    margin-bottom: 0;
}
.property-titlebar .breadcrumb-item,
.property-titlebar .breadcrumb-item a,
.property-titlebar .breadcrumb-item.active {
    color: rgba(255,255,255,.65);
    font-size: 13px;
}
.property-titlebar .breadcrumb-item a:hover { color: var(--dj-vert-clair, #66A185); }
.property-titlebar .breadcrumb-separator { color: rgba(255,255,255,.4); }
.back-to-listings {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.7);
    font-size: 13px;
    text-decoration: none;
    margin-bottom: 10px;
}
.back-to-listings:hover { color: var(--dj-vert-clair, #66A185); }
.property-title h1 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
}
.property-badge {
    display: inline-block;
    background: var(--dj-vert-clair, #66A185);
    color: var(--dark);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 8px;
}
.listing-address {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-size: 14px;
}
.listing-address:hover { color: var(--dj-vert-clair, #66A185); }
.listing-address i { color: var(--dj-vert-clair, #66A185); margin-right: 4px; }
.property-pricing {
    margin-top: 14px;
}
.property-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--dj-vert-clair, #66A185);
    line-height: 1.1;
}
.sub-price {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
}

/* ── Section contact annonceur (col-8) ─────────────────────── */
.agent-page {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 24px;
    background: #fff;
}
.agent-avatar img {
    width: 100px; height: 100px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #eee;
}
.agent-avatar-placeholder {
    width: 100px; height: 100px;
    background: #f0f0f0;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.agent-name h4 { font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.agent-contact-details { list-style: none; padding: 0; margin: 12px 0 0; }
.agent-contact-details li {
    padding: 5px 0;
    font-size: 14px;
    border-bottom: 1px dashed #f0f0f0;
}
.agent-contact-details li:last-child { border-bottom: none; }
.agent-contact-details i { color: var(--vert); width: 20px; }
.agent-contact-details a { color: var(--dark); text-decoration: none; }
.agent-contact-details a:hover { color: var(--vert); }

/* ── Sidebar widget formulaire ────────────────────────────── */
.agent-widget { padding: 0; }
.agent-widget .agent-title {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.agent-widget .agent-title h4 {
    font-size: 15px; font-weight: 700;
    color: var(--dark); margin: 0;
}
.agent-widget .agent-photo img {
    width: 52px; height: 52px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid #eee;
}
.agent-widget input,
.agent-widget textarea,
.agent-widget select {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 10px;
    background: #fafafa;
}
.agent-widget input:focus,
.agent-widget textarea:focus {
    border-color: var(--vert);
    outline: none;
    background: #fff;
}

/* ── Calculateur hypothèque ────────────────────────────────── */
.mortgage-widget input[type=range] { accent-color: var(--vert); }
.mortgage-result-box {
    background: var(--dark);
    color: #fff;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.mortgage-result-box .monthly { font-size: 24px; font-weight: 800; color: var(--dj-vert-clair, #66A185); }
.mortgage-result-box .monthly-lbl { font-size: 12px; color: rgba(255,255,255,.6); }