/* Bouton et panneau « Nos résidences » (mobile) */
.menu_side_area a.nr-btn { display: none; } /* jamais sur ordinateur (le modèle force les .btn-line) */
.nr-panel { display: none; }

@media (max-width: 992px) {
    /* le menu burger garde ses rubriques, les résidences passent par le bouton */
    header.header-mobile #mainmenu > li.nr-item { display: none; }

    .menu_side_area { display: flex; align-items: center; gap: 8px; }
    .menu_side_area .btn-main.btn-line { margin: 0; white-space: nowrap; }
    /* visible uniquement quand le menu burger est ouvert */
    header.menu-open .menu_side_area a.nr-btn { display: inline-flex; align-items: center; gap: 8px; }
    a.nr-btn::after {
        content: ""; width: 6px; height: 6px; margin-top: -3px;
        border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
        transform: rotate(45deg); transition: transform .3s ease;
    }
    a.nr-btn[aria-expanded="true"] { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
    a.nr-btn[aria-expanded="true"]::after { transform: translateY(3px) rotate(225deg); }

    .nr-panel {
        display: grid; gap: 12px;
        position: fixed; left: 0; right: 0; top: var(--nr-top, 70px); z-index: 1002;
        max-height: calc(100vh - var(--nr-top, 70px)); overflow-y: auto;
        padding: 24px 20px 28px;
        background: #fff; color: var(--title-font-color);
        box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .45);
        visibility: hidden; opacity: 0; transform: translateY(-8px);
        transition: opacity .3s ease, transform .3s ease, visibility .3s;
    }
    .nr-panel.is-open { visibility: visible; opacity: 1; transform: none; }
    .nr-eyebrow {
        margin: 0 0 4px; font-family: var(--body-font); font-size: 12px; font-weight: 500;
        letter-spacing: .2em; text-transform: uppercase; color: var(--primary-color);
    }
    .nr-card {
        display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center;
        padding: 10px; border: 1px solid rgba(0, 0, 0, .1); background: #f8f7f4;
        text-decoration: none; color: var(--title-font-color);
    }
    .nr-card:hover { color: var(--title-font-color); border-color: var(--primary-color); }
    .nr-card.is-current { border-color: var(--primary-color); }
    .nr-card img { width: 96px; height: 72px; object-fit: cover; }
    .nr-card strong { display: block; font-family: var(--title-font); font-size: 20px; font-weight: 400; line-height: 1.15; }
    .nr-card small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary-color); }
    .nr-all {
        justify-self: center; margin-top: 4px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
        color: var(--primary-color); text-decoration: underline; text-underline-offset: 4px;
    }
}

@media (max-width: 480px) {
    .menu_side_area { gap: 5px; margin-left: 8px; }
    .de-flex > .de-flex-col:first-child { flex-shrink: 0; }
    header.header-mobile #logo img { width: 100px; max-width: none; height: auto; }
    /* le modèle masquait « Reservation » sur téléphone : les deux boutons restent visibles, en plus compact */
    .menu_side_area .btn-main:not(.nr-btn) { display: inline-flex; }
    .menu_side_area #menu-btn { margin-left: 4px; flex-shrink: 0; }
    .menu_side_area .btn-main.btn-line { padding: 6px 8px; font-size: 11px; letter-spacing: .03em; line-height: 1.4; }
}
@media (max-width: 400px) {
    .nr-btn-short { display: none; }
    a.nr-btn::after { display: none; }
}
@media (max-width: 360px) {
    header.header-mobile #logo img { width: 84px; }
    .menu_side_area .btn-main.btn-line { padding: 5px 6px; font-size: 10px; letter-spacing: 0; }
}