@charset "utf-8";

/*
===================================================================
    ANNONCE - VUE DÉTAIL
    X-Small devices (portrait phones, less than 576px)   // 320px
===================================================================
*/

/* ===============================
 *  SCOPE PRINCIPAL
=============================== */
.annonce-view .container > section.row {
    margin-bottom: 5vmax;
}

/* ===============================
 *  TITRE + RÉFÉRENCE
=============================== */
.annonce-view h1 {
    margin-right: .5vmin;
}

/* ===============================
 *  RÉSUMÉ INDICATEURS
=============================== */
.annonce-view .resume [class*=col-] {
    margin-top: 3vmax;
    line-height: 1;
    text-align: center;
}

.annonce-view .resume [class*=col-] img {
    width: 21px;
    margin-bottom: 1vmax;
}

.annonce-view .resume .prix {
    color: var(--primary-dark);
    font-size: 2.5rem;
    margin: 4vmax auto 3vmax;
}

/* ===============================
 *  GALERIE PHOTOS
=============================== */
.galerie .photo {
    display: flex;
    overflow: hidden;
    border-radius: var(--radius-md);
    position: relative;
    height: 33vmin;
}

.galerie .photo.main {
    height: 66vmin;
    position: relative;
}

/* 1 seule photo : ratio naturel, centrée, max 420px */
.galerie-1 .photo.main {
    height: auto;
    max-height: 420px;
    overflow: visible;
    justify-content: center;
    margin: 0 auto;
    width: fit-content;
}

.galerie-1 .photo.main img {
    object-fit: contain;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 420px;
    border-radius: var(--radius-md);
}

.galerie .photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Colonne latérale (3 et 4 photos) */
.galerie-side {
    display: flex;
    gap: .5rem;
}

.galerie-side .photo {
    flex: 1;
    min-width: 0;
}

.galerie .overlay-photo-plus {
    display: flex;
    background-color: rgba(0,0,0,.6);
    color: #FFF;
    font-size: 2rem;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.galerie .labels-mandat {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
}

.galerie .label-mandat {
    background-color: var(--focus-main);
    color: var(--primary-2x-dark);
    font-size: .813rem;
    padding: 4px 10px 3px;
    border-radius: var(--radius-xs);
}

/* Bouton VR sur la photo principale */
.galerie .photo.main .btn {
    z-index: 10;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* ===============================
 *  DESCRIPTION + INFOS
=============================== */
.annonce-view .block-description {
    font-size: .813rem;
}

.annonce-view .block-description .h6 {
    text-transform: none;
}

/* ===============================
 *  DISPLAY INFO (reveal téléphone)
=============================== */
.displayInfo {
    cursor: pointer;
}

.displayBTN,
.hiddenInfo.ON {
    display: inline-block;
}

.displayBTN.OFF,
.hiddenInfo {
    display: none;
}

/* ===============================
 *  CARTE GÉOLOCALISATION
=============================== */
.annonce-view #vectorMap {
    height: 600px;
    border-radius: var(--radius-md);
}

/* ===============================
 *  CARACTÉRISTIQUES - LISTES
=============================== */
.detail-listing {
    padding-left: 0;
    margin-bottom: 1rem;
}

.detail-listing li {
    position: relative;
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: .813rem;
}

.detail-listing li:nth-child(even) {
    background-color: var(--neutral-light);
}

.detail-listing li strong {
    text-align: right;
}

/* Infos location supplémentaires */
.detail-listing li.infos {
    align-items: flex-start;
    gap: 4px;
}

/* ===============================
 *  TABLEAU PIÈCES
=============================== */
.annonce-view .table-pieces {
    font-size: .813rem;
    --bs-table-striped-bg: var(--neutral-light);
    --bs-table-bg: var(--bg-body);
    border-collapse: separate;
    border-spacing: 0;
}

.annonce-view .table-pieces td,
.annonce-view .table-pieces th {
    border: none;
}

.annonce-view .table-pieces th {
    line-height: 1.1;
    background-color: var(--bg-body);
}

.annonce-view .table-pieces td:nth-child(3) {
    text-wrap-mode: nowrap;
}

.annonce-view .table-pieces tbody tr td:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.annonce-view .table-pieces tbody tr td:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.annonce-view .table-pieces .badge {
    width: 40px;
    line-height: 1.4;
}

/* Colonne de gauche, reste en fixe */
table.table th:first-child,
table.table td:first-child {
    position: sticky;
    left: -1px;
    width: 160px;
    z-index: 1;
}

table.table th:nth-child(2),
table.table td:nth-child(2) {
    position: sticky;
}

/* ===============================
 *  ASPECTS FINANCIERS + COPROPRIÉTÉ
=============================== */
.annonce-view .block-financier,
.annonce-view .block-copropriete {
    display: flex;
    flex-wrap: wrap;
}

.annonce-view .block-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--radius-md);
    padding: 2rem 1rem;
    margin-bottom: .5rem;
}

.annonce-view .block-heading h2 {
    margin-bottom: 0;
    color: #FFF;
    font-size: clamp(18px, 1.5vw, 24px);
}

.annonce-view .block-copropriete .block-heading h2 {
    color: var(--primary-dark);
}

/* ===============================
 *  ECO DATA : DPE + GES (barres colorées)
=============================== */
.ecoData [class*=level],
.gazData [class*=level] {
    width: 25px;
    height: 25px;
}

.ecoData [class*=level]:first-child,
.gazData [class*=level]:first-child {
    border-bottom-left-radius: var(--radius-sm);
    border-top-left-radius: var(--radius-sm);
}

.ecoData [class*=level]:last-child,
.gazData [class*=level]:last-child {
    border-bottom-right-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}

/* DPE Colors */
.ecoData .levelA {background-color: #00953d;}
.ecoData .levelB {background-color: #39aa35;}
.ecoData .levelC {background-color: #c3d200;}
.ecoData .levelD {background-color: #fae800;}
.ecoData .levelE {background-color: #fbb800;}
.ecoData .levelF {background-color: #eb6209;}
.ecoData .levelG {background-color: #e3051b;}

/* GES Colors */
.gazData .levelA {background: #f6ecf6;}
.gazData .levelB {background: #d2b9d8;}
.gazData .levelC {background: #c5a8d2;}
.gazData .levelD {background: #b696c5;}
.gazData .levelE {background: #9674b1;}
.gazData .levelF {background: #7b56a2;}
.gazData .levelG {background: #634293;}

/* Active level (scale + circle) */
.ecoData.A .levelA,
.ecoData.B .levelB,
.ecoData.C .levelC,
.ecoData.D .levelD,
.ecoData.E .levelE,
.ecoData.F .levelF,
.ecoData.G .levelG,
.gazData.A .levelA,
.gazData.B .levelB,
.gazData.C .levelC,
.gazData.D .levelD,
.gazData.E .levelE,
.gazData.F .levelF,
.gazData.G .levelG {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.4);
    border: 2px solid #FFF;
    box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
    border-radius: 50%;
}

/* Letter labels via ::after */
.ecoData [class*=level]:after,
.gazData [class*=level]:after {
    color: #FFF;
    font-weight: var(--fw-bold);
}

.ecoData.A .levelA:after, .gazData.A .levelA:after {content: "A";}
.gazData.A .levelA:after {color: #7b56a2;}
.ecoData.B .levelB:after, .gazData.B .levelB:after {content: "B";}
.ecoData.C .levelC:after, .gazData.C .levelC:after {content: "C";}
.ecoData.D .levelD:after, .gazData.D .levelD:after {content: "D";}
.ecoData.E .levelE:after, .gazData.E .levelE:after {content: "E";}
.ecoData.F .levelF:after, .gazData.F .levelF:after {content: "F";}
.ecoData.G .levelG:after, .gazData.G .levelG:after {content: "G";}

/* Value label below bars */
.ecoData + span,
.gazData + span {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size: .813rem;
}

/* ===============================
 *  LIGHTBOX MODAL
=============================== */
#lightboxModal .modal-content {
    background-color: #fff;
    border: 0;
    max-width: calc(620px + 2rem);
    margin: 0 auto;
    padding: 1rem;
}

#lightboxModal .modal-body {
    padding: 0;
}

/* Toolbar sticky dans le conteneur */
.lightbox-toolbar {
    position: sticky;
    top: 1rem;
    z-index: 1060;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: .5rem;
    padding-right: 1rem;
}

.lightbox-count,
#lightboxModal .lightbox-close {
    background: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    padding: .5rem;
    font-size: .813rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightboxModal .lightbox-close {
    cursor: pointer;
}

/* Galerie verticale scrollable */
.lightbox-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lightbox-gallery-item {
    margin: 0;
}

.lightbox-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
}

/* Footer galerie */
.lightbox-footer {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 0;
}


/* ===============================
 *  MODAL DIAGNOSTICS (DPE/GES progressif)
=============================== */
#diagModal .diagImmo .label {
    font-size: .688rem;
}

#diagModal .diagImmo .one {
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding: 6px;
    margin-bottom: 6px;
    font-size: .688rem;
    cursor: pointer;
}

#diagModal .diagImmo .one > span {
    float: left;
    font-weight: var(--fw-bold);
}

#diagModal .diagImmo .one > strong {
    margin-right: 0;
    margin-left: auto;
}

/* DPE progressive bars */
#diagModal .diagImmo.DPE .one.A {background: #00953d; color: #FFF; width: calc(1*(100% / 7));}
#diagModal .diagImmo.DPE .one.B {background: #39aa35; color: #FFF; width: calc(2*(100% / 7));}
#diagModal .diagImmo.DPE .one.C {background: #c3d200; width: calc(3*(100% / 7));}
#diagModal .diagImmo.DPE .one.D {background: #fae800; width: calc(4*(100% / 7));}
#diagModal .diagImmo.DPE .one.E {background: #fbb800; width: calc(5*(100% / 7));}
#diagModal .diagImmo.DPE .one.F {background: #eb6209; color: #FFF; width: calc(6*(100% / 7));}
#diagModal .diagImmo.DPE .one.G {background: #e3051b; color: #FFF; width: 100%; margin-bottom: 0;}

/* GES progressive bars */
#diagModal .diagImmo.GES .one.A {background: #f6ecf6; width: calc(1*(100% / 7));}
#diagModal .diagImmo.GES .one.B {background: #d2b9d8; width: calc(2*(100% / 7));}
#diagModal .diagImmo.GES .one.C {background: #c5a8d2; width: calc(3*(100% / 7));}
#diagModal .diagImmo.GES .one.D {background: #b696c5; width: calc(4*(100% / 7));}
#diagModal .diagImmo.GES .one.E {background: #9674b1; width: calc(5*(100% / 7));}
#diagModal .diagImmo.GES .one.F {background: #7b56a2; color: #FFF; width: calc(6*(100% / 7));}
#diagModal .diagImmo.GES .one.G {background: #634293; color: #FFF; width: 100%; margin-bottom: 0;}

#diagModal .diagImmo .one.NC {background: var(--neutral-black); color: var(--neutral-light);}

/* Active level */
#diagModal .diagImmo .one.active {
    width: 100% !important;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    border-top-right-radius: 10rem;
    border-bottom-right-radius: 10rem;
}

#diagModal .diagImmo .one .info {
    display: none;
}

#diagModal .diagImmo .one.active .info {
    display: flex;
    flex-direction: column;
    width: 60%;
    line-height: 1.3;
    text-align: right;
    margin-right: 10px;
    flex: auto;
}

#diagModal .diagImmo .one.active > strong {
    font-size: 2rem;
    width: 48px;
    height: 48px;
    background-color: #FFF;
    border-radius: 10rem;
    text-align: center;
    line-height: 48px;
}

/* Active level letter colors (DPE) */
#diagModal .diagImmo.DPE .one.A.active > strong {color: #00953d;}
#diagModal .diagImmo.DPE .one.B.active > strong {color: #39aa35;}
#diagModal .diagImmo.DPE .one.C.active > strong {color: #c3d200;}
#diagModal .diagImmo.DPE .one.D.active > strong {color: #fae800;}
#diagModal .diagImmo.DPE .one.E.active > strong {color: #fbb800;}
#diagModal .diagImmo.DPE .one.F.active > strong {color: #eb6209;}
#diagModal .diagImmo.DPE .one.G.active > strong {color: #e3051b;}

/* Active level letter colors (GES) */
#diagModal .diagImmo.GES .one.A.active > strong {color: #7b56a2;}
#diagModal .diagImmo.GES .one.B.active > strong {color: #d2b9d8;}
#diagModal .diagImmo.GES .one.C.active > strong {color: #c5a8d2;}
#diagModal .diagImmo.GES .one.D.active > strong {color: #b696c5;}
#diagModal .diagImmo.GES .one.E.active > strong {color: #9674b1;}
#diagModal .diagImmo.GES .one.F.active > strong {color: #7b56a2;}
#diagModal .diagImmo.GES .one.G.active > strong {color: #634293;}

/* Tooltip icon */
#diagModal .one {
    position: relative;
}

#diagModal .one:not(.active):first-of-type:before,
#diagModal .one.active:first-of-type + .one:before {
    content: "";
    background: url(/assets/img/ic_alert_info.svg) center center no-repeat;
    width: 21px;
    height: 21px;
    background-size: cover;
    position: absolute;
    right: -2rem;
    filter: invert(82%) sepia(8%) saturate(8%) hue-rotate(349deg) brightness(88%) contrast(84%);
}

#diagModal .source,
#diagModal .source * {
    font-size: .688rem;
    color: var(--neutral-main);
}

/* ===============================
 *  NÉGOCIATEUR
=============================== */
.sale:not(.modal) .photo {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--neutral-md);
    border-bottom: 0;
}

.sale:not(.modal) .photo img {
    min-height: 100%;
    min-width: 100%;
}

.sale:not(.modal) .btn {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ===============================
 *  NÉGOCIATEUR — CARTE DESKTOP
=============================== */
.sale-card {
    display: flex;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--neutral-main);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s;
    width: 100%;
    height: 100%;
}

.sale-card:hover {
    border-color: var(--focus-main);
}

.sale-card-photo {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--neutral-main);
}

.sale-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sale-card-info {
    margin-left: 1rem;
}

.sale-card-info strong {
    display: block;
    font-size: 1.1rem;
}

.sale-card-fonction {
    display: block;
    color: var(--neutral-dark);
    font-size: .875rem;
}

.sale-card-cta {
    display: block;
    margin-top: .5rem;
    color: var(--focus-main);
    font-weight: var(--fw-bold);
}

.sale-card:hover .sale-card-cta {
    color: var(--focus-dark);
}

/* ===============================
 *  MODAL NÉGOCIATEUR
=============================== */
.modal.sale .modal-content {
    padding: 3vmax 3vmax 6vmax;
    border: 0;
}

.modal.sale .modal-body {
    padding: 0;
}

.modal.sale .photo {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--neutral-md);
    width: 40%;
    max-width: 320px;
    margin: calc(-20% - 3vmax) auto 3vmax;
}



/*
===================================================================
    Medium devices (tablets, 768px and up)             // 768px
===================================================================
*/
@media screen and (min-width: 768px) {

/* RESUME */
.annonce-view .resume [class*=col-] {
    font-size: .65rem;
    margin: 1vmax auto !important;
    align-self: baseline;
}

.annonce-view .resume [class*=col-] i {
    display: block;
    margin-bottom: 1vmin;
}

.annonce-view .resume .prix {
    text-align: right;
    font-size: 2rem;
}

/* GALERIE */
.galerie .photo,
.galerie .photo.main {
    height: 100%;
}

.galerie-3 .photo.main,
.galerie-4 .photo.main {
    height: auto;
}

.galerie-3 .photo.main img,
.galerie-4 .photo.main img {
    height: auto;
}

.galerie-3 > [class*="col-md-4"],
.galerie-4 > [class*="col-md-4"] {
    position: relative;
}

.galerie-side {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--bs-gutter-x) * .5);
    right: calc(var(--bs-gutter-x) * .5);
    flex-direction: column;
    gap: 1rem;
}

.galerie-side .photo {
    flex: 1;
    height: auto;
    min-height: 0;
}

.galerie .overlay-photo-plus {
    font-size: 3rem;
}

/* ASPECTS FINANCIERS + COPRO */
.annonce-view .block-heading {
    margin-bottom: 0;
}

/* LIGHTBOX */

/* TABLEAU PIÈCES */
table.table th:first-child,
table.table td:first-child {
    position: relative;
    left: auto;
    width: auto;
}

table.table th:nth-child(2),
table.table td:nth-child(2) {
    position: relative;
}

}/*/mediaquery*/


/*
===================================================================
    Large devices (desktops, 992px and up)             // 992px
===================================================================
*/
@media screen and (min-width: 992px) {

/* RESUME */
.annonce-view .resume [class*=col-] {
    font-size: .9rem;
}

.annonce-view .resume [class*=col-] img {
    margin-bottom: 1vmin;
}

.annonce-view .resume .prix {
    font-size: 2.5rem;
}

/* GALERIE */
.galerie .photo {
    max-height: calc(210px - .5rem);
}

.galerie .photo.main {
    max-height: 420px;
}

.galerie-side .photo {
    max-height: none;
}

.galerie-2 .photo {
    max-height: 420px;
}

/* BLOCK CONTACT FORM */
.block-contact-form .sticky-lg-top {
    top: 20vmin;
}

/* NÉGOCIATEUR */
.row:has(> .sale) {
    padding-top: 2vmax;
}

.sale:not(.modal):hover .btn {
    background-color: var(--primary-dark);
}

/* MODAL NÉGOCIATEUR */
.modal.sale .modal-body {
    max-width: 500px;
}

}/*/mediaquery*/


/*
===================================================================
    X-Large devices (large desktops, 1200px and up)    // 1200px+
===================================================================
*/
@media screen and (min-width: 1200px) {

/* GALERIE */
.galerie {
    cursor: pointer;
}

/* MODAL NÉGOCIATEUR */
.modal.sale .modal-content {
    margin-top: 10vmin;
}

/* LIGHTBOX */

}/*/mediaquery*/