/* ==========================================================================
   GR Appartements — search.css  (mobile first)
   ========================================================================== */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
    --gr-transition: 0.25s ease;
}

label {
    display: block;
}

/* ── Layout principal ───────────────────────────────────────────────────── */
.gr-appts {
    width: 100%;
}

/* ── Barre du haut ──────────────────────────────────────────────────────── */
.gr-appts__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    margin-block: 1rem 4rem;
    border-top: 1px solid #EDEDEA;
    border-bottom: 1px solid #EDEDEA;
}

.gr-appts__barre button {
    border: 1px solid #EDEDEA;
    background-color: transparent;
    padding-block: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.gr-appts__vue-btn.is-active,
.gr-appts__vue-btn.is-active {
    background-color: black;
    color: white;
}

/* Toggle Liste / Carte */
/*.gr-appts__vues {
    display: flex;
    gap: 0;
    border: 1px solid currentColor;
}

.gr-appts__vue-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

.gr-appts__vue-btn.is-active svg,
.gr-appts__vue-btn.is-active {
    color: inherit;
}

.gr-appts__vue-btn.is-active {
    
}*/

/* ── Vues ───────────────────────────────────────────────────────────────── */
.gr-appts__vue {
    display: none;
}

.gr-appts__vue.is-active {
    display: block;
}


.gr-appts__liste {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem 1.5rem;
}

/* 4 colonnes desktop */
@media (min-width: 1024px) {
    .gr-appts__liste {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 1 colonne xs */
@media (max-width: 480px) {
    .gr-appts__liste {
        grid-template-columns: 1fr;
    }
}

/* ── Carte immeuble ─────────────────────────────────────────────────────── */
.gr-carte {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Image */
.gr-carte__image-lien {
    display: block;
    text-decoration: none;
}

.gr-carte__image {
    position: relative;
    width: 100%;
    padding-top: 66%; /* ratio 3:2 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Badge promotion — coin inférieur gauche de l'image */
.gr-carte__badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    z-index: 2;
}

/* Favori — coin inférieur droit de l'image */
.gr-carte__favori {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
}

.gr-carte__favori button,
.js-gr-favori {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background var(--gr-transition);
}

.gr-carte__favori button:hover,
.js-gr-favori:hover {
    background: #fff;
}

/* Contenu */
.gr-carte__contenu {
    padding: 12px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gr-carte__lien-titre {
    text-decoration: none;
    color: inherit;
}

.gr-carte__titre {
    margin: 0;
    font-size: 1rem;
}

.gr-carte__localisation {
    margin: 0;
    font-size: 1rem;
}

.gr-carte__prix {
    margin: 4px 0 0;
    font-size: 0.938rem;
}

.gr-carte__unites-label {
    margin: 8px 0 4px;
    font-size: 0.875rem;
}

/* Pills grandeurs */
.gr-carte__grandeurs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gr-carte__grandeur-pill {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    background: #111;
    color: #fff;
    font-size: 0.875rem;
}

/* ── Off-canvas filtres ─────────────────────────────────────────────────── */
.gr-offcanvas {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    visibility: hidden;
}

.gr-offcanvas.is-open {
    pointer-events: auto;
    visibility: visible;
}

.gr-offcanvas__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity var(--gr-transition);
    cursor: pointer;
}

.gr-offcanvas.is-open .gr-offcanvas__overlay {
    opacity: 1;
}

.gr-offcanvas__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--gr-transition);
    overflow: hidden;
}

.gr-offcanvas.is-open .gr-offcanvas__panel {
    transform: translateX(0);
}

.gr-offcanvas__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid currentColor;
    flex-shrink: 0;
}

.gr-offcanvas__titre {
    margin: 0;
}

.gr-offcanvas__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
}

.gr-offcanvas__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px;
}

.gr-offcanvas__footer {
    padding: 16px 24px;
    border-top: 1px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.gr-offcanvas__reset {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 0 !important;
    font: inherit;
    font-size: 0.875rem;
    background-color: transparent !important;
}

.gr-offcanvas__submit {
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    font: inherit;
    border: none;
}

/* Scroll lock */
body.gr-offcanvas-open {
    overflow: hidden;
}

/* ── Filtres (intérieur off-canvas) ─────────────────────────────────────── */
.gr-filtre__groupe {
    padding: 20px 0;
    border-bottom: 1px solid currentColor;
}

.gr-filtre__groupe:last-child {
    border-bottom: none;
}

.gr-filtre__titre {
    margin: 0 0 1rem;
}

.gr-filtre__contenu {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.gr-filtre__checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.gr-filtre__checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Label = wrapper cliquable */
.gr-filtre__checkbox {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    position: relative;
    padding-left: 35px;
    user-select: none;
}

/* La boîte custom */
.gr-filtre__checkbox::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background: #fff;
    border: 1.5px solid #ccc;
    box-sizing: border-box;
    transition: background .15s, border-color .15s;
}

/* Coché — via :has() */
.gr-filtre__checkbox:has(input:checked)::before {
    content: "\2713";
    background: #000;
    border-color: #000;
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Hover */
.gr-filtre__checkbox:hover::before {
    border-color: #888;
}

/* Focus clavier */
.gr-filtre__checkbox:has(input:focus-visible)::before {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.gr-filtre__select {
    width: 100%;
    padding: 0.625rem;
    font: inherit;
    font-size: 1.125rem;
}

.gr-filtre__contenu--prix {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.gr-filtre__input {
    width: 100px;
    padding: 0.625rem;
    font-size: 1.125rem;
    border-width: 1px !important;
}

/* ── Carte Google Maps ──────────────────────────────────────────────────── */

/* Légende */
.gr-map__legende {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 0 1rem;
    font-size: .875rem;
    justify-content: flex-end;
}

.gr-map__legende-label {
    font-weight: 600;
    margin-right: .25rem;
}

.gr-map__legende-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .875rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
}

.gr-map__legende-item--now  { background: #2ecc71; }
.gr-map__legende-item--soon { background: #3498db; }

#gr-map {
    width: 100%;
    height: 600px;
    background: #eee;
}

@media (max-width: 768px) {
    #gr-map { height: 400px; }
}

/* Popup marqueur */
.gr-map__popup {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: #fff;
    padding: 3rem;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
    max-height: 60vh;
    overflow-y: auto;
    transition: transform var(--gr-transition);
}

.gr-map__popup.is-open {
    display: block;
}

.gr-map__popup-inner {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.gr-map__popup-image-lien {
    flex-shrink: 0;
    width: 400px;
    display: block;
    text-decoration: none;
}

.gr-map__popup-image-lien .gr-carte__image {
    padding-top: 66%;
}

.gr-map__popup-inner .gr-carte__contenu {
    padding: 0;
    flex: 1;
    min-width: 0;
}

@media (max-width: 480px) {
    .gr-map__popup-inner {
        flex-direction: column;
    }
    .gr-map__popup-image-lien {
        width: 100%;
    }
}

.gr-map__popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: transparent !important;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.gr-map__popup-loading {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Overlay chargement ─────────────────────────────────────────────────── */
#gr-appts-loading {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#gr-appts-loading.is-loading {
    display: flex;
}

/* ── Messages ───────────────────────────────────────────────────────────── */
.gr-appts-vide,
.gr-appts-erreur {
    grid-column: 1 / -1;
    padding: 40px;
    text-align: center;
    opacity: 0.6;
}