:root {
    --hero-h: 360px;
    --menu-h: 56px;
    --ring: #e5e7eb;
    --anchor-offset: 150px;
}

#about h3 {
    margin-top: 0px;
}

.content h3
{
    margin-top:10px;
}

#content {
    position: relative;
    background: #fff;
}

.btn {
    display: inline-flex;
/*    background: linear-gradient(180deg,#fff,#f8fafc);*/
}

/* ===== TOP BAR (pas sticky) ===== */
.head {
    position: relative;
    /* z-index:50;*/
    background: #fff;
    border-bottom: 1px solid var(--ring);
    padding: 10px 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: .25rem .6rem;
    border: 1px solid #ffffff40;
    backdrop-filter: blur(3px)
}

/* ===== CONTENEUR principal au-dessus du hero ===== */
.property-details-wrap {
    position: relative;
    z-index: 10; /* TOUT le contenu passe au-dessus du hero */
}

/* ===== HERO STICKY (reste visible mais en dessous) ===== */
.hero {
    position: sticky; /* clé de l’effet “le contenu recouvre le hero” */
    top: 0;
    height: var(--hero-h);
    background-size: cover;
    background-position: center;
    border-radius: 16px; /* ok même en sticky */
    z-index: 0; /* en dessous du reste */
    overflow: hidden;
}

    /* HERO : gradient plus marqué pour la lisibilité */
    .hero:after {
        content: "";
        position: absolute;
        inset: 0;
        /* dégradé plus contrasté en bas, mais léger en haut */
        /*background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.55) 100%);*/
    }

/* Contenu du hero : espace et calage */
.hero-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 24px;
    color: #fff;
}

/* Légère lueur pour les textes sur photo */
.text-glow {
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Bloc de gauche (titre + adresse + agent) */
.hero-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(780px, 70vw);
}

/* ===== PRICE CARD : carte verre flouté, très lisible ===== */
.price-card {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.45));
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 16px;
    padding: 14px 18px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    color: #fff;
}

.price-value {
    font-weight: 800;
    line-height: 1;
    /* adapte la taille selon la largeur : min 28px, max ~44px */
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: .2px;
}

.price-sub {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    font-size: 12px;
    opacity: .85;
    margin-left: 2px
}

/* Petite puce “À vendre / Mention” */
.hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

/* Avatar + agent */
.hero-agent {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: .95
}

/* Responsive : sur mobile, on passe la carte prix en bas à gauche */
@media (max-width: 720px) {
    .hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        top:55%;
    }

    .price-card {
        margin-left: 0
    }
}

/* ===== MENU STICKY (juste sous le hero au départ, puis top:0) ===== */
.fixed_nav {
    position: sticky;
    top: 65px; /* colle en haut dès qu’il atteint le bord */
    z-index: 20; /* au-dessus du hero */
    background: #fff;
    border-bottom: 1px solid var(--ring)
}

    .fixed_nav .tabs {
        display: flex; /* au lieu de "block" */
        flex-wrap: wrap; /* retour à la ligne propre */
        align-items: center;
        justify-content: center;
        gap: 10px; /* espace horizontal/vertical entre pills */
        padding: 12px 16px; /* un peu moins haut que 20px */
        overflow: visible; /* plus d’overlay qui coupe les retours */
        text-align: center;
    }
        .fixed_nav .tabs a {
            display: inline-flex; /* évite le chevauchement vertical des inline */
            align-items: center;
            line-height: 1; /* pas de hauteur “auto” fantaisiste */
            white-space: nowrap; /* la pill reste sur une seule ligne */
            padding: 8px 12px;
            border: 1px solid var(--ring);
            border-radius: 999px;
            font-weight: 600;
        }
            .fixed_nav .tabs a.is-active {
                background: #1d4ed8;
                color: #fff;
                border-color: #1d4ed8
            }

@media (max-width: 480px) {
    .fixed_nav .tabs {
        gap: 8px;
        padding: 10px 12px;
    }

        .fixed_nav .tabs a {
            font-size: 14px;
            padding: 7px 10px;
        }
}

/* Décalage des ancres pour ne pas passer sous le menu */
.list-details-section {
    scroll-margin-top: calc(var(--menu-h) + 12px + var(--anchor-offset));
}

/* ===== CAROUSEL PHOTOS (5 visibles, flèches, auto-scroll) ===== */
.photos-carousel {
    position: relative;
}

.scroller {
    --gap: 10px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 4*var(--gap)) / 5);
    gap: var(--gap);
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}
    .scroller::-webkit-scrollbar {
        height: 8px
    }

    .scroller a {
        scroll-snap-align: start
    }

    .scroller img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 12px
    }



/* Flèches overlay */
.scroller-nav {
    pointer-events: none; /* laisse le scroll/hover au contenu */
}

.scroller-btn {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: #000a;
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
}

    .scroller-btn[disabled] {
        opacity: .35;
        cursor: default
    }

.scroller-prev {
    left: -6px
}

.scroller-next {
    right: -6px
}


/* 4 cartes ≤1200px */
@media (max-width:1200px) {
    .scroller {
        grid-auto-columns: calc((100% - 3*var(--gap)) / 4);
    }
}

/* 3 cartes ≤900px */
@media (max-width:900px) {
    .scroller {
        grid-auto-columns: calc((100% - 2*var(--gap)) / 3);
    }
}

/* 2 cartes ≤640px (mobile) */
@media (max-width:640px) {
    .scroller {
        grid-auto-columns: calc((100% - 1*var(--gap)) / 2);
    }
}

/* ===== LIGHTBOX ===== */
.lb-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.lb-frame {
    position: relative;
    max-width: 92vw;
    max-height: 88vh
}

    .lb-frame img {
        max-width: 92vw;
        max-height: 88vh;
        border-radius: 12px;
        display: block
    }

.lb-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    line-height: 1;
    border: 0;
    background: #000a;
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    cursor: pointer;
}

.lb-prev {
    left: 8px;
}
/* au lieu de -62px */
.lb-next {
    right: 8px;
}
/* au lieu de -62px */

.lb-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #000a;
    color: #fff;
    border: 0;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    font-size: 22px;
    cursor: pointer;
}

/* ===== VIDÉOS ===== */

.vid-card .vid-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Iframe : occupe 100% de la carte */
.vid-card iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

    /* (si tu gardes quand même un bouton générique) masque-le quand c’est un iframe */
    .vid-card iframe + .vid-play {
        display: none;
    }

.vid-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 42px;
    color: #fff;
    background: linear-gradient(transparent,rgba(0,0,0,.35));
    border: 0
}

/* ===== VIDÉOS EN CARRÉ ===== */
/* Grille responsive qui aligne les cartes côte à côte */
.vid-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-items: stretch;
}

@media (min-width:1200px) {
    .vid-grid {
        grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    }
}
/* 3 si large */
}

@media (max-width:720px) {
    .vid-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* 2 sur mobile */
}

/* Carte vidéo carrée */
.vid-card {
    position: relative;
    border: 1px solid var(--ring);
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* <= carré natif */
    background: #f8fafc; /* fond si thumb tarde */
}

/* bouton lecture */
.vid-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 42px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.35));
    border: 0;
}

.dialog {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.75);
    z-index: 70
}

.dialog-box {
    background: #000;
    max-width: 1000px;
    width: 92vw;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    position: relative
}

    .dialog-box iframe {
        width: 100%;
        height: 100%
    }

.dialog-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #000c;
    color: #fff;
    border: 0;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    font-size: 22px;
    cursor: pointer
}

/* ===== DOCS ===== */
.doc-list {
    columns: 2;
    gap: 14px
}

    .doc-list a {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px
    }

/* ===== DÉTAILS ===== */
.preline {
    white-space: pre-line
}

/* ===== POPIN INTÉRÊT ===== */
.interest-pop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    background: #fff;
    border: 1px solid var(--ring);
    border-radius: 16px;
    width: 380px;
    max-width: 92vw;
    box-shadow: 0 10px 30px rgba(0,0,0,.15)
}

.interest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ring)
}

.interest-body {
    padding: 14px 16px
}

@media (max-width:1200px) {
    .interest-pop {
        position: static;
        width: auto;
        box-shadow: none;
        margin-top: 16px
    }
}

@media (max-width: 768px) {
    .interest-pop {
        display: none !important;
    }
}

#content
{
    top:-25px;
}


.locked-panel {
    margin-top: 8px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px dashed rgba(37, 99, 235, 0.5);
    background: linear-gradient(135deg, #eff6ff 0%, #fdf2f8 100%);
    display: flex;
    align-items: center;
    gap: 16px;
}

.locked-panel-inline {
    margin-top: 12px;
}

.locked-panel-left {
    flex: 1;
    min-width: 0;
}

.locked-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d4ed8;
    margin-bottom: 2px;
}

.locked-text {
    font-size: 0.9rem;
    color: #4b5563;
    margin: 0;
}

.locked-panel-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

    .btn-solid:hover {
        background: #1d4ed8;
    }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: #1d4ed8;
    background: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    white-space: nowrap;
}

    .btn-ghost:hover {
        background: #eff6ff;
    }

.locked-photos-hint {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #6b7280;
}

@media (max-width: 640px) {
    .locked-panel {
        flex-direction: column;
        align-items: flex-start;
    }

    .locked-panel-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}


/* Agrandir les images de Vue aérienne & Cadastre */
#vueaerienne .scroller,
#cadastre .scroller {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

    #vueaerienne .scroller a,
    #cadastre .scroller a {
        flex: 1 1 100%;
        max-width: 100%;
    }

@media (min-width: 768px) {
    #vueaerienne .scroller a,
    #cadastre .scroller a {
        flex: 1 1 48%;
    }
}

#vueaerienne .scroller img,
#cadastre .scroller img {
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 8px;
    object-fit: contain; /* ou cover si tu veux recadrer */
}