/* =========================================
   PROPERTY DETAILS PAGE
   file: /assets/css/property-details.css
   Compatible avec property-details.js actuel
   Scoped uniquement à .details-page
========================================= */

/* =========================
   RESET LOCAL
========================= */
.details-page,
.details-page *,
.details-page *::before,
.details-page *::after {
    box-sizing: border-box;
}

.details-page img,
.details-page svg {
    max-width: 100%;
    display: block;
}

/* =========================
   TOKENS
========================= */
html,
body {
    /* clip coupe le débordement SANS créer de conteneur de scroll →
       position:sticky (colonne photos) fonctionne. hidden = repli anciens navigateurs. */
    overflow-x: hidden;
    overflow-x: clip;
}

.details-page {
    --details-bg:
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.96), transparent 28%),
        radial-gradient(circle at 86% 16%, rgba(153, 246, 228, 0.42), transparent 26%),
        radial-gradient(circle at 50% 82%, rgba(20, 184, 166, 0.16), transparent 24%),
        linear-gradient(135deg, #f0fdfa 0%, #e6f7f4 36%, #edf6f4 68%, #dff4f0 100%);

    --details-text: #0f172a;
    --details-title: #091b57;
    --details-muted: #64748b;
    --details-line: rgba(15, 23, 42, 0.10);

    --details-surface: rgba(255, 255, 255, 0.78);
    --details-surface-strong: rgba(255, 255, 255, 0.90);

    --details-primary: #0f766e;
    --details-primary-2: #14b8a6;

    --details-shadow-soft: 0 16px 40px rgba(15, 23, 42, 0.08);
    --details-shadow-card: 0 24px 60px rgba(15, 23, 42, 0.10);
    --details-shadow-btn: 0 14px 34px rgba(15, 118, 110, 0.22);

    min-height: 100vh;
    color: var(--details-text);
    background: var(--details-bg);
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
}

.details-page main,
.details-page .page,
.details-page .container {
    overflow: visible;
}

/* =========================
   PAGE LAYOUT
========================= */
.details-page .page {
    position: relative;
    width: 100%;
    padding-top: 106px;
    padding-bottom: 84px;
    isolation: isolate;
}

.details-page .page::before,
.details-page .page::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(18px);
    opacity: 0.72;
    z-index: -1;
}

.details-page .page::before {
    width: 360px;
    height: 360px;
    top: 120px;
    right: -80px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), transparent 68%);
}

.details-page .page::after {
    width: 420px;
    height: 420px;
    left: -90px;
    bottom: 80px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.12), transparent 68%);
}

/* =========================
   GENERIC
========================= */
.details-page .muted {
    color: var(--details-muted);
    font-size: 15px;
    line-height: 1.8;
}

.details-page .small {
    font-size: 13px;
}

/* =========================
   TOP SHELL
========================= */
.details-page .details-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

/* Lien retour : pilule discrète « ‹ Retour » (phrase complète gardée pour les
   lecteurs d'écran dans .back-link__sr). En arabe la flèche pointe à DROITE. */
.details-page .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 7px;
    padding-inline: 11px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 118, 110, 0.2);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    color: #0f766e;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    transition: background-color .18s ease, border-color .18s ease;
}

.details-page .back-link svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    transition: transform .18s ease;
}

.details-page .back-link:hover,
.details-page .back-link:focus-visible {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(15, 118, 110, 0.35);
}

.details-page .back-link:hover svg {
    transform: translateX(-3px);
}

html[dir="rtl"] .details-page .back-link svg { transform: scaleX(-1); }
html[dir="rtl"] .details-page .back-link:hover svg { transform: scaleX(-1) translateX(-3px); }

.details-page .back-link__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.details-page .notice {
    width: auto;
    margin: 0;
    padding: 7px 18px 7px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.10), rgba(20, 184, 166, 0.16));
    border: 1px solid rgba(13, 148, 136, 0.22);
    box-shadow: 0 8px 20px rgba(13, 148, 136, 0.10);
    color: #0f766e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.details-page .notice-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.32);
}

.details-page .notice-icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.details-page .notice b {
    color: #0f766e;
    font-weight: 900;
}

/* =========================
   ROOT DETAILS
========================= */
.details-page .details {
    width: min(1380px, 100%);
    margin: 0 auto;
}

/* =========================
   MAIN CARD GENERATED BY JS
========================= */
.details-page .details-card {
    padding: 18px;
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(248, 250, 252, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.84);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

/* =========================
   HERO LAYOUT
========================= */
.details-page .details-top {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
    gap: 22px;
    align-items: start;
}

/* Colonne image (référence centrée + galerie) */
.details-page .details-hero-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Référence du bien — pastille centrée au-dessus de l'image */
.details-page .details-ref {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
    border: 1px solid rgba(15, 118, 110, 0.18);
}
.details-page .details-ref__label {
    font-size: 12px;
    font-weight: 700;
    color: #0f766e;
    letter-spacing: 0.02em;
}
.details-page .details-ref__code {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.04em;
}

/* image */
.details-page .details-top-img {
    position: relative;
    width: 100%;          /* remplit toujours sa colonne (évite la bande blanche tablette) */
    min-width: 0;
    aspect-ratio: 4 / 3;
    max-height: 480px;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.84);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.details-page .details-top-img img,
.details-page .heroimg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform .35s ease;
}

.details-page .details-top-img:hover img {
    transform: scale(1.015);
}

/* ── Galerie hero swipeable (compteur + dots) ── */
.details-page .details-hero-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    direction: ltr;                 /* scroll cohérent (compteur stable) même en RTL */
    scrollbar-width: none;
}
.details-page .details-hero-track::-webkit-scrollbar { display: none; }

.details-page .details-hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
    cursor: zoom-in;
}

.details-page .details-hero-counter {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 3;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(10, 18, 40, 0.62);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    direction: ltr;
}

/* Cœur « favori » du bien principal — haut-gauche du hero (compteur à droite). */
.details-page .details-top-img .fav-heart { top: 14px; left: 14px; width: 40px; height: 40px; }
.details-page .details-top-img .fav-heart svg { width: 18px; height: 18px; }

.details-page .details-hero-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}
.details-page .details-hero-dots .hdot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: width .25s ease, background .25s ease;
}
.details-page .details-hero-dots .hdot.is-active {
    width: 18px;
    background: #fff;
}

/* Flèches de navigation du hero — visibles sur mobile/tactile, au survol sur desktop */
.details-page .details-hero-arrow {
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    /* Cercle sombre translucide + flèche blanche → visible sur les photos
       BLANCHES (plans, documents) comme sur les photos foncées. L'ancien fond
       blanc disparaissait sur les annonces claires. */
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(10, 18, 40, 0.35);
    opacity: 1;
    transition: opacity .2s ease, background .2s ease, transform .15s ease;
}
.details-page .details-hero-arrow--prev { left: 12px; }
.details-page .details-hero-arrow--next { right: 12px; }
.details-page .details-hero-arrow svg { width: 22px; height: 22px; }

/* Flèches toujours visibles partout (mobile, tablette, tactile, desktop).
   Sur desktop souris, simple effet de survol — sans jamais les masquer. */
@media (hover: hover) and (pointer: fine) {
    .details-page .details-hero-arrow:hover { background: rgba(15, 23, 42, 0.78); }
    .details-page .details-hero-arrow:active { transform: translateY(-50%) scale(0.92); }
}

/* Mobile : flèches un peu plus compactes */
@media (max-width: 560px) {
    .details-page .details-hero-arrow { width: 36px; height: 36px; }
    .details-page .details-hero-arrow svg { width: 18px; height: 18px; }
}

/* ── Specs rapides sous le titre ── */
.details-page .details-quickspecs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 6px;
}
.details-page .qspec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.07);
    border: 1px solid rgba(15, 118, 110, 0.16);
    color: #0f766e;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
.details-page .qspec svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Barre de contact collante (mobile uniquement) ── */
.pd-sticky { display: none; }

/* ── Carte de localisation (Leaflet) ── */
.details-page .details-map-block {
    margin-top: 22px;
    padding: 18px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.details-page .details-map-block .section-title {
    font-size: clamp(16px, 1.6vw, 22px);
}

.details-page .pd-map {
    margin-top: 14px;
    height: 320px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.10);
    z-index: 0;                 /* garde la carte sous les overlays (lightbox, etc.) */
}

/* Leaflet : neutralise le centrage de texte hérité (sinon attribution/zoom décalés) */
.details-page .pd-map .leaflet-container { direction: ltr; text-align: left; font: inherit; }

/* Attribution OSM (obligatoire) rendue discrète mais lisible */
.details-page .pd-map .leaflet-control-attribution {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.6);
    color: #64748b;
    padding: 1px 6px;
}
.details-page .pd-map .leaflet-control-attribution a { color: #475569; }

@media (max-width: 560px) {
    .details-page .details-map-block { padding: 14px; border-radius: 20px; }
    .details-page .pd-map { height: 240px; border-radius: 16px; }
}

/* info side */
.details-page .details-top-info {
    padding: 22px 18px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.50);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
}

.details-page .row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.details-page .section-title {
    margin: 0;
    color: var(--details-title);
    letter-spacing: -0.02em;
    font-weight: 900;
}

.details-page .details-top-info .section-title {
    font-size: clamp(18px, 1.8vw, 26px);
    line-height: 1.3;
}

/* city badge */
.details-page .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    color: #334155;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

/* meta pills */
.details-page .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 14px;
}

.details-page .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
    color: #334155;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

/* description */
.details-page .details-desc {
    margin: 10px 0 16px;
    padding: 12px 14px;
    color: #475569;
    font-size: 14px;
    line-height: 1.8;
    background: rgba(100, 116, 139, 0.05);
    border-right: 3px solid rgba(15, 118, 110, 0.30);
    border-radius: 0 10px 10px 0;
}

/* action buttons */
.details-page .details-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
}

.details-page .details-actions-row .btn {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 28px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 900;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.details-page .details-actions-row .btn:hover {
    transform: translateY(-2px);
}

.details-page .details-actions-row .btn.primary {
    background: linear-gradient(135deg, var(--details-primary), var(--details-primary-2));
    color: #fff;
    box-shadow: var(--details-shadow-btn);
}

.details-page .details-actions-row .btn.ghost {
    background: rgba(255, 255, 255, 0.90);
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

/* =========================
   EXTRA PHOTOS SECTION
========================= */
.details-page .details-extra {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.details-page .details-extra .section-title {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-color: #0f766e;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

.details-page .details-extra-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.details-page .thumb-btn {
    width: 176px;
    height: 112px;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.details-page .thumb-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.10);
    border-color: rgba(20, 184, 166, 0.18);
}

.details-page .thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vignette correspondant à la photo affichée dans le grand visuel */
.details-page .thumb-btn.is-active {
    border-color: #0f766e;
    box-shadow: 0 0 0 2px #0f766e, 0 10px 24px rgba(13, 148, 136, 0.20);
}

/* =========================
   SKELETON LOADED STATES
========================= */
.details-page .details-top-img,
.details-page .thumb-btn {
    position: relative;
}

.details-page .details-top-img::before,
.details-page .thumb-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.40) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-120%);
    animation: detailsShimmer 1.45s infinite;
    pointer-events: none;
    z-index: 2;
}

.details-page .details-top-img.is-loaded::before,
.details-page .thumb-btn.is-loaded::before {
    display: none;
}

@keyframes detailsShimmer {
    100% {
        transform: translateX(120%);
    }
}

/* =========================
   LIGHTBOX PREMIUM
========================= */
.details-page .gallery-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(10, 11, 15, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.details-page .gallery-overlay.open,
.details-page .gallery-overlay[aria-hidden="false"] {
    display: flex;
}

.details-page .gallery-overlay__content {
    position: relative;
    width: min(1320px, 100%);
    max-height: 88vh;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, #16181e 0%, #0c0d12 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.40);
}

.details-page .gallery-stage {
    width: 100%;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #181a20;
}

.details-page .gallery-main-img {
    width: 100%;
    max-height: 68vh;
    object-fit: contain;
    background: #181a20;
}

.details-page .gallery-main-img.card-img-fallback {
    width: auto;
    max-width: 60%;
    max-height: 50vh;
    object-fit: contain;
    opacity: .85;
}

.details-page .gallery-close,
.details-page .gallery-arrow {
    position: absolute;
    z-index: 2;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 18px;
    /* Cercle sombre translucide → reste visible même quand l'image affichée est
       blanche (plan, document) et déborde jusque sous les flèches. */
    background: rgba(15, 23, 42, 0.50);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.details-page .gallery-arrow svg { width: 24px; height: 24px; }

.details-page .gallery-close:hover,
.details-page .gallery-arrow:hover {
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.details-page .gallery-close {
    top: 14px;
    right: 14px;
}

.details-page .gallery-arrow {
    top: 50%;
    transform: translateY(-50%);
}

.details-page .gallery-arrow--prev {
    left: 14px;
    right: auto;
}

.details-page .gallery-arrow--next {
    right: 14px;
    left: auto;
}

.details-page .gallery-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #0a0b0f;
}

.details-page .gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.details-page .gallery-thumb {
    width: 108px;
    height: 74px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    padding: 0;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.details-page .gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.details-page .gallery-thumb:hover,
.details-page .gallery-thumb.is-active {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.20);
}

.details-page .gallery-counter {
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
    direction: ltr;   /* lit « 1 / 5 » et non « 5 / 1 » même en page RTL */
}

/* Flèche désactivée en bout de galerie */
.details-page .gallery-arrow:disabled {
    opacity: 0.32;
    cursor: default;
    pointer-events: none;
}

/* =========================
   FOOTER PREMIUM
========================= */
.details-page .footer {
    margin-top: 34px;
    padding: 0 0 18px;
    background: transparent;
}

.details-page .footer .foot {
    width: min(1380px, 100%);
    margin: 0 auto;
    padding: 22px 28px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.90));
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow:
        0 16px 40px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.details-page .details-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

.details-page .details-footer-brand {
    min-width: 0;
    flex: 1 1 auto;
}

.details-page .details-footer-brand b {
    display: block;
    margin-bottom: 6px;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
}

.details-page .details-footer-brand .muted {
    margin: 0;
}

.details-page .details-footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 0 1 auto;
}

.details-page .details-copy {
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
    white-space: nowrap;
}

.details-page .footer-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.details-page .footer-socials a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    color: #0f172a;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.details-page .footer-socials a:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.14);
}

.details-page .footer-socials a[aria-label="تيك توك"] {
    color: #111111;
    background: #ffffff;
}

.details-page .footer-socials a[aria-label="تيك توك"]:hover {
    background: #111111;
    color: #ffffff;
}

.details-page .footer-socials a[aria-label="إنستغرام"] {
    color: #E4405F;
    background: #ffffff;
}

.details-page .footer-socials a[aria-label="إنستغرام"]:hover {
    color: #ffffff;
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
}

.details-page .footer-socials a[aria-label="فيسبوك"] {
    color: #1877F2;
    background: #ffffff;
}

.details-page .footer-socials a[aria-label="فيسبوك"]:hover {
    background: #1877F2;
    color: #ffffff;
}

/* =========================
   WHATSAPP
========================= */
.details-page .whatsapp-float {
    position: fixed;
    left: max(18px, env(safe-area-inset-left));
    right: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 9999;
    width: 74px;
    height: 74px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, #25d366 0 58%, rgba(255, 255, 255, 0.30) 59% 100%);
    color: #ffffff;
    text-decoration: none;
    box-shadow:
        0 18px 40px rgba(37, 211, 102, 0.28),
        0 0 0 10px rgba(37, 211, 102, 0.14);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.details-page .whatsapp-float:hover {
    transform: translateY(-3px) scale(1.03);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1200px) {
    .details-page .details-top {
        grid-template-columns: 1fr;
    }

    .details-page .details-top-img {
        max-height: 420px;
    }
}

@media (max-width: 1024px) {
    .details-page .page {
        padding-top: 94px;
        padding-bottom: 26px;
        padding-inline: 16px;
    }

    .details-page .details-card {
        padding: 14px;
        border-radius: 24px;
    }

    .details-page .details-top-info {
        padding: 16px 14px;
        border-radius: 20px;
    }

    .details-page .details-top-info .section-title {
        font-size: clamp(17px, 5vw, 22px);
    }

    .details-page .details-desc {
        font-size: 14px;
        line-height: 1.7;
    }

    .details-page .details-top-img {
        max-height: 340px;
        border-radius: 22px;
    }

    .details-page .details-extra .row-between {
        flex-direction: column;
        align-items: flex-start;
    }

    .details-page .thumb-btn {
        width: 148px;
        height: 96px;
    }

    .details-page .gallery-overlay {
        padding: 14px;
    }

    .details-page .gallery-overlay__content {
        border-radius: 22px;
    }

    .details-page .gallery-stage {
        min-height: 40vh;
    }

    .details-page .gallery-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .details-page .footer .foot {
        padding: 20px 18px;
        border-radius: 22px;
    }

    .details-page .details-foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .details-page .details-footer-meta {
        width: 100%;
        align-items: flex-start;
    }

    .details-page .whatsapp-float {
        left: max(14px, env(safe-area-inset-left));
        bottom: max(14px, env(safe-area-inset-bottom));
        width: 68px;
        height: 68px;
    }
}

@media (max-width: 560px) {
    .details-page .page {
        padding-top: 88px;
        padding-bottom: 22px;
        padding-inline: 14px;
    }

    .details-page .back-link {
        font-size: 13px;
    }

    .details-page .notice {
        font-size: 13px;
    }

    .details-page .details-card {
        padding: 12px;
        border-radius: 20px;
    }

    .details-page .details-top-info {
        padding: 14px 12px;
        border-radius: 18px;
    }

    .details-page .details-top-info .section-title {
        font-size: 17px;
        line-height: 1.3;
    }

    .details-page .pill,
    .details-page .badge {
        min-height: 38px;
        padding: 7px 14px;
        font-size: 13px;
    }

    .details-page .details-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .details-page .details-actions-row .btn {
        width: 100%;
        min-height: 50px;
    }

    .details-page .details-top-img {
        max-height: 280px;
        border-radius: 18px;
    }

    .details-page .details-extra .section-title {
        font-size: 18px;
    }

    .details-page .thumb-btn {
        width: calc(50% - 6px);
        height: 92px;
    }

    .details-page .gallery-close,
    .details-page .gallery-arrow {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 28px;
    }

    .details-page .gallery-close {
        top: 10px;
        right: 10px;
    }

    .details-page .gallery-arrow--prev {
        left: 10px;
        right: auto;
    }

    .details-page .gallery-arrow--next {
        right: 10px;
        left: auto;
    }

    .details-page .gallery-thumb {
        width: 84px;
        height: 60px;
    }

    .details-page .footer {
        margin-top: 24px;
        padding-bottom: 14px;
    }

    .details-page .footer .foot {
        padding: 16px 14px;
        border-radius: 18px;
    }

    .details-page .details-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .details-page .details-footer-brand {
        width: 100%;
    }

    .details-page .details-footer-brand b {
        font-size: 16px;
    }

    .details-page .details-footer-meta {
        width: 100%;
        align-items: center;
        gap: 8px;
    }

    .details-page .details-copy {
        width: 100%;
        text-align: center;
        white-space: normal;
        font-size: 13px;
    }

    .details-page .footer-socials {
        width: 100%;
        justify-content: center;
    }

    .details-page .footer-socials a {
        width: 36px;
        height: 36px;
    }

    .details-page .whatsapp-float {
        left: max(12px, env(safe-area-inset-left));
        bottom: max(12px, env(safe-area-inset-bottom));
        width: 64px;
        height: 64px;
    }
}

/* =========================
   REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce) {

    .details-page .back-link,
    .details-page .thumb-btn,
    .details-page .gallery-close,
    .details-page .gallery-arrow,
    .details-page .gallery-thumb,
    .details-page .details-actions-row .btn,
    .details-page .footer-socials a,
    .details-page .whatsapp-float,
    .details-page .details-top-img img {
        transition: none !important;
    }
}


.pill {
    direction: ltr;
    unicode-bidi: isolate;
}


.meta-badge {
    min-height: 42px;
    padding: 7px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   SPECS GRID
========================= */

/* Ligne 1 : Prix + Ville uniquement */
.details-page .details-specs-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 14px 0 10px;
}

/* Ligne 2+ : reste des specs */
.details-page .details-specs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.details-page .spec-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
    min-width: 0;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s ease, border-color .22s ease;
}

/* ✦ Signature VECTRA : barre d'accent teal qui se déploie au survol (bas de carte). */
.details-page .spec-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #0f766e, #14b8a6);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.details-page .spec-item:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 118, 110, 0.28);
    box-shadow: 0 14px 26px rgba(15, 118, 110, 0.13);
}

.details-page .spec-item:hover::after {
    transform: scaleX(1);
}

/* La bannière prix garde son style propre (pas de barre signature). */
.details-page .spec-price::after { content: none; }

/* Tuile à libellé long (ex. configuration des niveaux) : occupe toute la
   largeur de la grille pour tenir sur une seule ligne au lieu de s'empiler. */
.details-page .spec-item--wide {
    grid-column: 1 / -1;
}

/* Tuile à contenu long (Capacité « 300 personnes », Surface « 400 hectares »,
   Type de terrain « Terrain touristique »…) : 2 colonnes pour tenir sur une seule ligne
   au lieu de couper le texte en plein milieu d'un mot. */
.details-page .spec-item--w2 {
    grid-column: span 2;
}

.details-page .spec-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.details-page .spec-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Icon color variants */
.details-page .si-blue   { background: rgba(59,  130, 246, 0.12); color: #3b82f6; }
.details-page .si-green  { background: rgba(34,  197, 94,  0.12); color: #16a34a; }
.details-page .si-teal   { background: rgba(20,  184, 166, 0.12); color: #0d9488; }
.details-page .si-purple { background: rgba(139, 92,  246, 0.12); color: #7c3aed; }
.details-page .si-amber  { background: rgba(245, 158, 11,  0.12); color: #d97706; }
.details-page .si-cyan   { background: rgba(6,   182, 212, 0.12); color: #0891b2; }

.details-page .spec-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.details-page .spec-label {
    font-size: 12px;
    color: var(--details-muted);
    font-weight: 600;
    line-height: 1.3;
}

.details-page .spec-val {
    font-size: 15px;
    font-weight: 900;
    color: var(--details-title);
    line-height: 1.4;
    overflow-wrap: break-word; /* ne casse plus en plein mot (ex. « salle / de bain ») */
}

/* Prix « hero » — bannière pleine largeur, accent vert, valeur mise en avant */
.details-page .spec-price {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.10), rgba(20, 184, 166, 0.15));
    border-color: rgba(15, 118, 110, 0.22);
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.10);
    padding: 16px 18px;
    gap: 14px;
}

.details-page .spec-price .spec-icon {
    width: 48px;
    height: 48px;
}

.details-page .spec-price .spec-icon svg {
    width: 22px;
    height: 22px;
}

.details-page .spec-price .spec-val {
    font-size: 26px;
    color: #0f766e;
    letter-spacing: -0.01em;
}


/* =========================
   ÉQUIPEMENTS (chips groupés, sans « Disponible »)
========================= */
.details-page .details-equip {
    margin: 0 0 16px;
}

.details-page .details-equip__title {
    position: relative;
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: var(--details-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 9px;
    padding-inline-start: 12px;
}

/* ✦ Signature VECTRA : petit accent teal en tête de section. */
.details-page .details-equip__title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 13px;
    border-radius: 2px;
    background: linear-gradient(180deg, #0f766e, #14b8a6);
}

.details-page .details-equip__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.details-page .equip-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    /* ✦ Signature VECTRA : puces aux couleurs teal de la marque (au lieu du vert générique). */
    background: rgba(20, 184, 166, 0.10);
    border: 1px solid rgba(15, 118, 110, 0.22);
    color: #0f766e;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.details-page .equip-chip:hover {
    background: rgba(20, 184, 166, 0.18);
    border-color: rgba(15, 118, 110, 0.42);
    transform: translateY(-1px);
}

.details-page .equip-chip svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.85;
}

/* =========================
   BUTTON ICON
========================= */
.details-page .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.details-page .btn-icon svg {
    width: 18px;
    height: 18px;
}

.details-page .details-btn-wa {
    gap: 10px;
}

/* =========================
   CONTACT STRIP
========================= */
.details-page .details-contact-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.details-page .dcs-btn {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.details-page .dcs-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.details-page .dcs-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.12);
}

.details-page .dcs-wa {
    background: #25d366;
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.28);
}

.details-page .dcs-phone {
    background: linear-gradient(135deg, #14b8a6, #0f766e);
    color: #fff;
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.26);
}

.details-page .dcs-mail {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.24);
}

.details-page .dcs-label {
    font-size: 13px;
    color: var(--details-muted);
    font-weight: 700;
    margin-inline-start: 4px;
}

/* =========================
   EXTRA PHOTOS SECTION HEAD
========================= */
.details-page .details-extra-head {
    margin-bottom: 14px;
}

.details-page .details-photo-kicker {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.12);
    color: #0d9488;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* =========================
   SCROLL REVEAL
========================= */
.details-page .details-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s ease, transform .55s ease;
}

.details-page .details-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* =========================
   RESPONSIVE — NEW ELEMENTS
========================= */
@media (max-width: 1024px) {
    .details-page .details-specs-hero {
        gap: 8px;
    }

    .details-page .details-specs {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
    }

    .details-page .details-contact-strip {
        margin-top: 14px;
        padding-top: 14px;
    }

    .details-page .dcs-btn {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }
}

@media (max-width: 560px) {
    /* السعر et المدينة : chacun sur sa propre ligne (pleine largeur) sur mobile */
    .details-page .details-specs-hero {
        grid-template-columns: 1fr;
    }

    .details-page .details-specs {
        grid-template-columns: 1fr 1fr;
    }

    /* Évite les mots coupés (« Disponibl/e ») dans les colonnes étroites :
       on récupère de la place (icône + marges réduites), on réduit un peu la
       police, et on ne casse les mots qu'en tout dernier recours. */
    .details-page .spec-item {
        gap: 8px;
        padding: 10px 11px;
    }
    .details-page .spec-icon {
        width: 34px;
        height: 34px;
    }
    .details-page .spec-label {
        font-size: 11px;
    }
    .details-page .spec-val {
        font-size: 13.5px;
        word-break: normal;
        overflow-wrap: break-word;
    }
    .details-page .spec-price .spec-val {
        font-size: 22px;
    }
    .details-page .spec-price .spec-icon {
        width: 42px;
        height: 42px;
    }

    .details-page .notice {
        align-items: center;
        gap: 10px;
    }

    .details-page .notice-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

    .details-page .notice-icon svg {
        width: 15px;
        height: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .details-page .details-reveal {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .details-page .dcs-btn {
        transition: none !important;
    }
}
/* =========================
   SIMILAR PROPERTIES
========================= */
.similar-section {
    padding-top: 36px;
    padding-bottom: 52px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    margin-top: -8px;
}

/* LARGEUR — ne pas retirer. La section porte AUSSI les classes .container et
   .page ; or « .details-page .page » (2 classes, l.74) écrase « .container »
   (1 classe, main.css) avec width:100%. Résultat : le carrousel s'étalait sur
   toute la largeur de l'écran, ses cartes devenaient ~40 % plus grandes que
   celles des listes (618px vs 445px en 1920px) et ne s'alignaient pas sur la
   fiche. On rétablit ici le MÊME plafond que le contenu de la fiche
   (.details-page .details) et que les listes : min(1380px, 100%).
   Le sélecteur est préfixé .details-page pour gagner la cascade (spécificité
   égale à .details-page .page, mais déclaré plus bas dans le fichier). */
.details-page .similar-section {
    width: min(1380px, 100%);
    margin-inline: auto;
}

.similar-section[hidden] { display: none !important; }

.similar-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;   /* row-gap 10 (si repli) / column-gap 12 */
    margin-bottom: 26px;
}

.similar-head__kicker {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: #0f766e;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(20, 184, 166, 0.14));
    border: 1px solid rgba(15, 118, 110, 0.12);
}

.similar-head__title {
    font-size: 22px;
    font-weight: 900;
    color: #0b1b48;
    margin: 0;
    text-decoration: underline;
    text-decoration-color: #0f766e;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

/* Carrousel horizontal — desktop : 3 visibles, tablette : 2, mobile : 1 (swipe) */
.similar-carousel { position: relative; }

.similar-grid {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    direction: ltr;                 /* scrollLeft cohérent quelle que soit la langue */
    /* Peu de cartes (rangée non pleine) → centrées au lieu de collées à gauche ;
       « safe » redonne l'alignement de départ dès que la rangée déborde (scroll). */
    justify-content: safe center;
}
.similar-grid::-webkit-scrollbar { display: none; }

/* 3 cartes visibles (gap 22px → 2 gaps = 44px) */
.similar-grid .sim-card {
    flex: 0 0 calc((100% - 44px) / 3);
    scroll-snap-align: start;
}
html[dir="rtl"] .sim-card { direction: rtl; }   /* restaure l'alignement du contenu en arabe */

/* ── Flèches de RANGÉE — dans l'EN-TÊTE, plus sur les bords ────────────────
   Déplacées le 2026-09-18 : depuis l'ajout de la mini-galerie, les bords des
   cartes portent DÉJÀ des chevrons (photo précédente / suivante). Deux
   systèmes au même endroit = ambiguïté (« est-ce que je change de photo ou
   d'annonce ? »), et le rond blanc, posé à 8px du bord INTÉRIEUR, chevauchait
   la 3e carte. Règle désormais lisible : en-tête = changer d'ANNONCE,
   sur la photo = changer de PHOTO.
   ⚠️ direction:ltr sur le groupe — la piste défile en LTR quelle que soit la
   langue (cf. .similar-grid) : « précédent » doit donc rester physiquement à
   GAUCHE même en arabe, sinon le chevron pointerait à l'inverse du défilement. */
.similar-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    direction: ltr;
    flex-shrink: 0;
}

/* ⚠️ direction:ltr fait résoudre margin-inline-start en margin-LEFT même en
   arabe → le groupe restait collé au titre au lieu d'aller au bout gauche.
   En RTL on pousse donc par la droite (côté titre). */
html[dir="rtl"] .similar-nav {
    margin-left: 0;
    margin-right: auto;
}

.similar-arrow {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #0f766e;                                  /* teal de l'en-tête (pastille + soulignement) */
    border: 1px solid rgba(15, 118, 110, 0.18);
    box-shadow: 0 2px 8px rgba(10, 18, 40, 0.06);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .15s ease, opacity .2s ease;
}

.similar-arrow svg { width: 18px; height: 18px; }
.similar-arrow:hover { background: #f0fdfa; border-color: rgba(15, 118, 110, 0.45); }
.similar-arrow:active { transform: scale(0.94); }
.similar-arrow:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }

/* Bout de course : estompée mais TOUJOURS visible. Un bouton d'en-tête qui
   disparaît ferait sauter la mise en page et ferait perdre le repère. */
.similar-arrow:disabled {
    opacity: 0.32;
    pointer-events: none;
    box-shadow: none;
}

/* ── CTA « Voir plus de biens » ── */
.similar-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    margin: 26px auto 0;
    padding: 13px 26px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.07);
    border: 1px solid rgba(15, 118, 110, 0.26);
    color: #0f766e;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .18s ease, box-shadow .2s ease;
}

.similar-cta svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.similar-cta:hover {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(13, 148, 136, 0.30);
}

/* En RTL, la flèche pointe vers la gauche (sens de lecture) */
html[dir="rtl"] .similar-cta svg { transform: scaleX(-1); }

/* ── Card shell ── */
.sim-card {
    position: relative;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(244,247,252,0.96));
    border: 1px solid rgba(255, 255, 255, 0.80);
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.sim-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 18px 44px rgba(15, 23, 42, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: rgba(20, 184, 166, 0.22);
}

/* ── Image ── */
.sim-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.04);
}

.sim-card__img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 18, 40, 0.30) 0%,
        rgba(10, 18, 40, 0.02) 38%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
}

.sim-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.sim-card:hover .sim-card__img-wrap img {
    transform: scale(1.05);
}

/* ══ Mini-galerie in-carte (cartes « Biens similaires ») ══════════════════
   ⚠️ Les styles équivalents existent dans properties.css mais sont scopés
   « .properties-page » : ils sont donc INVISIBLES ici, le body de la fiche
   portant .details-page. D'où cette copie, aux mêmes valeurs visuelles pour
   que les deux galeries soient identiques d'une page à l'autre.
   Position logique (inset-inline) → RTL automatique, chevron retourné en AR.
   z-index 3 : au-dessus du dégradé (1) et des badges (2). */
.details-page .card-gnav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(15, 23, 42, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.18s ease;
}

/* Côtés PHYSIQUES et chevrons jamais retournés : « › » à droite = photo suivante
   en AR comme en FR (même convention que la fiche annonce et la page projet). */
.details-page .card-gnav--prev { left: 10px; }
.details-page .card-gnav--next { right: 10px; }
.details-page .card-gnav svg { width: 18px; height: 18px; }
.details-page .card-gnav:hover { background: rgba(15, 23, 42, 0.74); }

@media (hover: hover) {
    .details-page .sim-card:hover .card-gnav { opacity: 1; }
}

@media (hover: none) {
    .details-page .card-gnav { opacity: 0.92; }
}

/* Indicateur de position — haut-centre : le cœur favori occupe la gauche et les
   badges la droite. Points si ≤5 photos, compteur « n/N » au-delà. */
.details-page .card-gdots,
.details-page .card-gcount {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.44);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
}

.details-page .card-gdots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transition: background 0.18s ease, transform 0.18s ease;
}

.details-page .card-gdots i.is-on {
    background: #fff;
    transform: scale(1.25);
}

/* display:block : en flex, le gap s'ajoutait entre « 1 » et « / 14 » (« 1   /14 »). */
.details-page .card-gcount {
    display: block;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

/* ── Badges overlay (empilés : Nouveau + action + type) ── */
.sim-card__badges {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.sim-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(135deg, rgba(28, 72, 176, 0.93), rgba(45, 112, 230, 0.89));
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    white-space: nowrap;
}

.sim-card__badge::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    flex-shrink: 0;
}

.sim-card__badge--rent {
    background: linear-gradient(135deg, rgba(10, 94, 86, 0.93), rgba(14, 152, 130, 0.89));
}

/* Type de bien — pastille sombre translucide (comme les cartes properties) */
.sim-card__type {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
}

/* Badge « Nouveau » — annonces < 7 jours, pulse doux */
.sim-card__new {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.96), rgba(234, 88, 12, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.38);
    white-space: nowrap;
    animation: simNewPulse 2s ease-in-out infinite;
}

.sim-card__new::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

@keyframes simNewPulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(234, 88, 12, 0.38); }
    50%      { box-shadow: 0 4px 22px rgba(234, 88, 12, 0.62); }
}

@media (prefers-reduced-motion: reduce) {
    .sim-card__new { animation: none; }
}

/* ── Body ── */
.sim-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── Tags ── */
.sim-card__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
    margin-top: 2px;
}

.sim-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.sim-card__tag svg { flex-shrink: 0; opacity: 0.80; }

.sim-card__tag--type {
    background: rgba(13, 107, 99, 0.09);
    color: #0d6b63;
    border: 1px solid rgba(13, 107, 99, 0.16);
}

.sim-card__tag--city {
    background: rgba(100, 116, 139, 0.07);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.14);
}

/* ── Title ── */
.sim-card__title {
    font-size: 14px;
    font-weight: 800;
    color: #0b1b48;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Footer ── */
.sim-card__footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.sim-card__price {
    font-size: 17px;
    font-weight: 900;
    color: #0f766e;
    letter-spacing: -0.01em;
    align-self: flex-start;
}

.sim-card__meta-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sim-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #51617a;
    white-space: nowrap;
}

.sim-card__meta-item svg { flex-shrink: 0; color: #0f766e; opacity: 0.62; }

.sim-card__meta-sep { display: none; }

@media (max-width: 860px) {
    .similar-grid { gap: 16px; }
    .similar-grid .sim-card { flex: 0 0 calc((100% - 16px) / 2); }   /* 2 visibles */
}

@media (max-width: 480px) {
    .sim-card { border-radius: 20px; }
    .sim-card__price { font-size: 15px; }
}

/* ── Carrousel horizontal swipeable (mobile) ── */
.similar-dots { display: none; }

@media (max-width: 560px) {
    .similar-grid {
        gap: 12px;
        padding-bottom: 2px;
    }

    .similar-grid .sim-card {
        flex: 0 0 86%;
        scroll-snap-align: center;
    }

    /* Sur mobile : swipe + dots (pas de flèches) */
    .similar-nav { display: none; }   /* mobile : les points (.similar-dots) prennent le relais */

    .similar-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 16px;
    }
    .similar-dots .sdot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.18);
        transition: width .25s ease, background .25s ease;
    }
    .similar-dots .sdot.is-active {
        width: 18px;
        background: #0f766e;
    }
}

/* =========================
   CURRENCY CONVERTER
========================= */
.currency-converter {
    background: linear-gradient(135deg, rgba(22,163,74,.07) 0%, rgba(37,99,235,.05) 100%);
    border: 1px solid rgba(22,163,74,.2);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(22,163,74,.07);
    transition: box-shadow .2s;
}

.currency-converter:hover {
    box-shadow: 0 4px 18px rgba(22,163,74,.12);
}

.cc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #16a34a;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(22,163,74,.12);
}

.cc-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.cc-body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
}

.cc-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(22,163,74,.25);
    background: #fff;
    font-size: 14px;
    color: #1e293b;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.cc-select:hover { border-color: rgba(22,163,74,.5); }
.cc-select:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22,163,74,.1);
}

/* Dropdown custom VECTRA (hero-select) : le wrapper est l'hôte du combo — cale
   le bouton injecté sur le look exact du select natif du convertisseur. */
.cc-select-wrap {
    min-width: 0;
    --hs-btn-h: 44px;
    --hs-btn-radius: 10px;
    --hs-btn-border: rgba(22,163,74,.25);
    --hs-btn-color: #1e293b;
    --hs-btn-shadow: 0 1px 3px rgba(0,0,0,.05);
    --hs-accent: #16a34a;
}
.cc-select-wrap .hs-combo__btn { font-size: 14px; }

/* Simulateur : mêmes dropdowns custom — accent teal (cohérent avec l'encart). */
.details-page .pd-calc__row label {
    --hs-btn-h: 42px;
    --hs-btn-radius: 11px;
    --hs-btn-border: #e2e8f0;
    --hs-btn-color: #0f172a;
    --hs-btn-shadow: none;
    --hs-accent: #0f766e;
}
.details-page .pd-calc__row .hs-combo__btn { font-size: 13.5px; font-weight: 700; }

.cc-result {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding-inline-start: 16px;
    border-inline-start: 2px solid rgba(22,163,74,.18);
    min-width: 130px;
}

.cc-result__value {
    font-size: 22px;
    font-weight: 800;
    color: #15803d;
    direction: ltr;
    letter-spacing: -.02em;
}

.cc-result__note {
    font-size: 11.5px;
    color: #64748b;
    direction: ltr;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .currency-converter {
        padding: 12px 14px;
        border-radius: 12px;
    }

    .cc-header {
        font-size: 11.5px;
        margin-bottom: 12px;
    }

    .cc-body {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .cc-select {
        width: 100%;
        padding: 10px 14px;
        font-size: 14px;
        border-radius: 10px;
        border-color: rgba(22,163,74,.3);
    }

    .cc-result {
        background: rgba(22,163,74,.07);
        border: 1px solid rgba(22,163,74,.15);
        border-radius: 10px;
        padding: 12px 14px;
        align-items: center;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    .cc-result__value {
        font-size: 22px;
        letter-spacing: -.01em;
    }

    .cc-result__note {
        font-size: 12px;
        margin-top: 2px;
    }
}

/* =========================
   ERROR STATE (réseau / annonce introuvable)
========================= */
.details-page .pd-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: 560px;
    margin: 24px auto;
}

.details-page .pd-error__icon {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.details-page .pd-error__icon svg {
    width: 36px;
    height: 36px;
}

.details-page .pd-error__icon--network {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.10), rgba(248, 113, 113, 0.18));
    color: #dc2626;
}

.details-page .pd-error__icon--missing {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.10), rgba(20, 184, 166, 0.18));
    color: #0f766e;
}

.details-page .pd-error__title {
    font-size: 22px;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 10px;
}

.details-page .pd-error__msg {
    color: #64748b;
    font-size: 15px;
    line-height: 1.75;
    max-width: 440px;
    margin: 0 0 28px;
}

.details-page .pd-error__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    border: none;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.24);
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.details-page .pd-error__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(15, 118, 110, 0.30);
}

.details-page .pd-error__btn svg {
    width: 16px;
    height: 16px;
}

/* Trio d'orientations du bien indisponible (شراء / إيجار / مشاريع جديدة) —
   même grammaire que les raccourcis de la 404 : boutons fantômes à bord teal,
   côte à côte, repli en colonne serrée sur mobile. */
.details-page .pd-error__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.details-page .pd-error__btn--ghost {
    background: #fff;
    color: #0f766e;
    border: 2px solid #0f766e;
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.10);
    min-height: 44px;
    padding: 0 16px;
    font-size: 13.5px;
    white-space: nowrap;
}

.details-page .pd-error__btn--ghost:hover {
    background: rgba(15, 118, 110, 0.06);
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.18);
}

@media (max-width: 560px) {
    .details-page .pd-error {
        padding: 48px 20px;
        border-radius: 22px;
        margin: 16px auto;
    }

    .details-page .pd-error__icon {
        width: 60px;
        height: 60px;
        border-radius: 20px;
    }

    .details-page .pd-error__icon svg {
        width: 28px;
        height: 28px;
    }

    .details-page .pd-error__title {
        font-size: 19px;
    }

    .details-page .pd-error__msg {
        font-size: 14px;
    }
}

/* ===========================================
   Barre de contact collante — MOBILE
=========================================== */
@media (max-width: 1024px) {
    /* La réf est affichée dans la barre collante du bas → on masque la pastille
       du haut (au-dessus de la photo) pour éviter le doublon sur mobile/tablette. */
    .details-page .details-ref { display: none; }

    .pd-sticky {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1200;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #ffffff;
        border-top: 1px solid rgba(15, 23, 42, 0.10);
        box-shadow: 0 -6px 24px rgba(10, 18, 40, 0.12);
    }

    /* Menu ouvert (burger non connecté = pd-menu-open ; menu avatar connecté =
       user-menu-open) → on masque la barre collante, sinon elle reste par-dessus
       le menu plein écran (la barre est en z-index 1200, le menu en 960). */
    body.pd-menu-open .pd-sticky,
    body.user-menu-open .pd-sticky { display: none !important; }

    .pd-sticky__price {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
        margin-inline-end: auto;
        min-width: 0;
    }
    .pd-sticky__ref {
        font-size: 10px;
        font-weight: 700;
        color: #0f766e;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 1px;
    }
    .pd-sticky__ref b { font-weight: 900; letter-spacing: 0.03em; }
    .pd-sticky__label { font-size: 10px; font-weight: 700; color: #64748b; }
    .pd-sticky__val {
        font-size: 15px;
        font-weight: 900;
        color: #0f766e;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pd-sticky__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        height: 46px;
        border-radius: 14px;
        text-decoration: none;
        font-weight: 800;
        font-size: 14px;
        flex-shrink: 0;
    }
    .pd-sticky__btn svg { width: 20px; height: 20px; }

    .pd-sticky__btn--call {
        width: 46px;
        background: rgba(15, 118, 110, 0.10);
        color: #0f766e;
        border: 1px solid rgba(15, 118, 110, 0.22);
    }
    .pd-sticky__btn--wa {
        padding: 0 18px;
        background: linear-gradient(135deg, #1eb25a, #13934a);
        color: #fff;
        box-shadow: 0 8px 20px rgba(18, 147, 74, 0.34);
    }

    /* Dégagement de la barre : on l'ajoute DANS le footer (zone sombre) plutôt
       qu'en padding du body → pas de vide blanc sous la page */
    .details-page .site-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    /* Rangée d'actions du bas masquée sur mobile : WhatsApp est dans la barre
       collante, et « Retour » fait doublon avec la pastille du haut. */
    .details-page .details-actions-row { display: none; }

    /* Vignettes « Photos supplémentaires » masquées sur mobile : le carrousel
       hero (swipe + plein écran) suffit → pas de doublon. */
    .details-page .details-extra { display: none; }
}

/* ══ Simulateur de mensualité (ventes) — même module que la fiche programme ══ */
.details-page .pd-calc {
    margin-top: 14px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}
.details-page .pd-calc__head { font-weight: 900; font-size: 14.5px; color: #0f172a; margin-bottom: 12px; }
.details-page .pd-calc__row { display: flex; gap: 10px; }
.details-page .pd-calc__row label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: #64748b; }
.details-page .pd-calc__row select {
    height: 42px; padding: 0 10px;
    border: 1.5px solid #e2e8f0; border-radius: 11px;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: #0f172a;
    background: #fff; cursor: pointer;
}
.details-page .pd-calc__row select:focus { outline: none; border-color: #0f766e; }
.details-page .pd-calc__result {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 12px; padding: 11px 13px; border-radius: 12px;
    background: rgba(15, 118, 110, 0.07);
}
.details-page .pd-calc__result span { font-size: 12.5px; font-weight: 700; color: #64748b; }
.details-page .pd-calc__result b { font-size: 16.5px; font-weight: 900; color: #0f766e; white-space: nowrap; }
/* Ligne « revenu conseillé » : version discrète de l'encart mensualité — c'est
   une indication de qualification, pas le résultat principal. */
.details-page .pd-calc__result--income { margin-top: 6px; background: rgba(15, 118, 110, 0.04); }
.details-page .pd-calc__result--income span { font-size: 11.5px; }
.details-page .pd-calc__result--income b { font-size: 13.5px; color: #134e4a; }
.details-page .pd-calc__note { margin-top: 10px; font-size: 11.5px; line-height: 1.6; color: #64748b; }
.details-page .pd-calc__note a { color: #0f766e; font-weight: 800; text-decoration: none; }
.details-page .pd-calc__note a:hover { text-decoration: underline; }

/* ══ Réorganisation : photos supplémentaires DANS la colonne photo ══ */
.details-page .details-extra--incol {
    margin-top: 16px;
    padding-top: 16px;
}
.details-page .details-extra--incol .section-title {
    font-size: 17px;
}
.details-page .details-extra--incol .thumb-btn {
    /* 3 vignettes par rangée dans la colonne (adaptatif) */
    width: calc((100% - 24px) / 3);
    height: 96px;
}

/* CTA « Je veux acheter/louer » dupliqué sous le prix (desktop).
   Les styles .btn sont scopés à .details-actions-row → on redonne ici le look
   bouton complet (même dégradé/forme que le CTA du bas). */
.details-page .details-btn-wa--top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin: 14px 0 16px;
    padding: 0 28px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 15.5px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--details-primary), var(--details-primary-2));
    color: #fff;
    box-shadow: var(--details-shadow-btn);
    transition: transform .18s ease, box-shadow .18s ease;
}
.details-page .details-btn-wa--top:hover { transform: translateY(-2px); }
@media (max-width: 900px) {
    /* Mobile : la barre sticky assure déjà le contact → pas de doublon */
    .details-page .details-btn-wa--top { display: none; }
}

/* ══ Colonne photos COLLANTE (desktop) : en défilant, la galerie reste visible
   à côté des specs → plus de grand vide à gauche quand la colonne droite est
   plus longue (pattern Airbnb). Uniquement en mise en page 2 colonnes. ══ */
@media (min-width: 1201px) {
    .details-page .details-hero-col {
        position: sticky;
        top: 96px;   /* navbar fixe (~86px) + respiration */
    }
}

/* =========================
   PARTAGE DU BIEN (fiche annonce)
   WhatsApp / Facebook / Copier le lien / feuille native (mobile)
========================= */
.pd-share {
    margin-top: 14px;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 14px;
    padding: 14px;
    background: #fff;
}
.pd-share__head {
    font-weight: 800;
    font-size: .92rem;
    color: #334155;
    margin-bottom: 10px;
}
.pd-share__row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pd-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1 1 auto;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: #fff;
    color: #0f172a;
    font-weight: 700;
    font-size: .86rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.pd-share__btn:hover {
    transform: translateY(-1px);
    border-color: #0f766e;
    background: #f0fdfa;
}
.pd-share__btn svg { flex-shrink: 0; width: 16px; height: 16px; }
.pd-share__btn--wa { border-color: rgba(37, 211, 102, .5); color: #128c4b; }
.pd-share__btn--wa:hover { background: #f0fdf4; border-color: #25d366; }
.pd-share__btn--fb { border-color: rgba(24, 119, 242, .45); color: #1877f2; }
.pd-share__btn--fb:hover { background: #eff6ff; border-color: #1877f2; }

/* =========================
   LIEN RETOUR ANNONCE → PROGRAMME NEUF
   Encart teal au-dessus du prix quand l'annonce est rattachée à un projet.
========================= */
.pd-projet-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(15, 118, 110, .35);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(15, 118, 110, .07), rgba(20, 184, 166, .10));
    text-decoration: none;
    color: #0f172a;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pd-projet-link:hover {
    transform: translateY(-1px);
    border-color: #0f766e;
    box-shadow: 0 8px 22px rgba(15, 118, 110, .16);
}
.pd-projet-link__icon { font-size: 1.5rem; flex-shrink: 0; }
.pd-projet-link__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-projet-link__label { font-size: .78rem; font-weight: 700; color: #0f766e; text-transform: uppercase; letter-spacing: .02em; }
.pd-projet-link__name { font-size: .95rem; font-weight: 800; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-projet-link__cta { flex-shrink: 0; font-size: .85rem; font-weight: 800; color: #0f766e; white-space: nowrap; }
@media (max-width: 480px) {
    .pd-projet-link { flex-wrap: wrap; }
    .pd-projet-link__cta { width: 100%; text-align: end; }
}