/* ===================================================================
   Rol Immo — Frontend CSS
   ===================================================================
   Layout & structure agnostiques. Couleurs et fontes via CSS variables
   `--rol-immo-*` overridables par le theme (cf. CLAUDE.md : pas de
   couleur ou de fonte de marque en dur ici).

   Sections :
   1. Variables (root + fallbacks)
   2. Search form (shortcode/bloc)
   3. Archive / grille de cards
   4. Card individuelle
   5. Single annonce (galerie magazine + sidebar)
   6. Facts (caracteristiques)
   7. Etiquette DPE / GES
   8. Mentions Loi Hoguet
   9. Pagination
  10. Helpers (sr-only)
   =================================================================== */

/* 0. Resets defensifs ----------------------------------------------
   Les page builders (Divi en particulier) appliquent souvent des
   list-style / padding / gap sur ol/ul/li dans le content area. Ces
   regles forcent un reset propre sur les listes du plugin pour eviter
   numerotation parasite, bullets sur les facts, et gap ecrase a 0.
   Le `!important` est volontaire — defensif uniquement, ces proprietes
   correspondent a notre design baseline qu'aucun consommateur ne
   devrait avoir besoin de surcharger. */

.rol-immo-archive__list,
.rol-immo-recent__list,
.rol-immo-similar__list,
.rol-immo-card__facts,
.rol-immo-keyfacts,
.rol-immo-features,
.rol-immo-energy__scale,
.rol-immo-active-filters,
.rol-immo-villes-grid__list,
.rol-immo-gallery__thumbs {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.rol-immo-archive__list > li,
.rol-immo-recent__list > li,
.rol-immo-similar__list > li,
.rol-immo-card__facts > li,
.rol-immo-keyfacts > li,
.rol-immo-features > li,
.rol-immo-energy__scale > li,
.rol-immo-active-filters > li,
.rol-immo-villes-grid__list > li,
.rol-immo-gallery__thumbs > li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    background: none !important;
}

.rol-immo-archive__list > li::before,
.rol-immo-recent__list > li::before,
.rol-immo-similar__list > li::before,
.rol-immo-keyfacts > li::before,
.rol-immo-villes-grid__list > li::before,
.rol-immo-energy__scale > li::before,
.rol-immo-card__facts > li::before {
    content: none !important;
}

/* Force le display: grid + gap sur les listes en grille (sinon Divi
   peut imposer display: block ou gap: 0). Les valeurs reprennent
   exactement ce qui est defini plus bas section par section, c'est
   juste pour battre les overrides du theme builder. */

.rol-immo-archive__list,
.rol-immo-recent__list,
.rol-immo-similar__list {
    display: grid !important;
    column-gap: var(--ri-grid-gap-h, 40px) !important;
    row-gap: var(--ri-grid-gap-v, 56px) !important;
}

/* 1. Variables ------------------------------------------------------ */

/*
 * Definition des variables `--ri-*` scopees sur tous les wrappers
 * racine du plugin. Pas dans `:root` pour eviter une fuite globale
 * (le client peut redefinir librement les `--rol-immo-*` dans son
 * theme sans craindre que le plugin ne pollue les autres styles).
 *
 * Convention : tous les wrappers racine commencent par `.rol-immo-*`
 * (sans `__` ni `--`, ce sont les classes "Block" en BEM). Les
 * elements internes (`__title`, `__price`...) heritent par cascade.
 *
 * IMPORTANT : tout nouveau wrapper racine doit etre ajoute a cette
 * liste, sinon ses variables `--ri-*` ne seront pas resolues et les
 * styles tomberont sur les defaults (`currentColor`, `inherit`...).
 *
 * Liste construite via `grep -rhoE 'class="rol-immo-[a-z-]+"'
 * templates/ src/ assets/`.
 */
.rol-immo-search-form,
.rol-immo-archive,
.rol-immo-single,
.rol-immo-card,
.rol-immo-facts,
.rol-immo-energy-block,
.rol-immo-energy,
.rol-immo-mentions,
.rol-immo-pagination,
.rol-immo-recent,
.rol-immo-villes-grid,
.rol-immo-count,
.rol-immo-empty,
.rol-immo-features,
.rol-immo-keyfacts,
.rol-immo-map,
.rol-immo-similar,
.rol-immo-active-filters,
.rol-immo-archive-toolbar,
.rol-immo-vendeur-card,
.rol-immo-contact-modal,
.rol-immo-contact-form,
.rol-immo-agent,
.rol-immo-agent-card {
    /* Couleurs — heritent du theme via les variables --rol-immo-* */
    --ri-color-primary: var(--rol-immo-color-primary, currentColor);
    --ri-color-accent: var(--rol-immo-color-accent, currentColor);
    --ri-color-accent-soft: var(--rol-immo-color-accent-soft, var(--ri-color-accent));
    --ri-color-text: var(--rol-immo-color-text, currentColor);
    --ri-color-text-soft: var(--rol-immo-color-text-soft, color-mix(in srgb, currentColor 65%, transparent));
    --ri-color-text-muted: var(--rol-immo-color-text-muted, color-mix(in srgb, currentColor 45%, transparent));
    --ri-color-surface: var(--rol-immo-color-surface, var(--wp--preset--color--background, #fff));
    --ri-color-surface-soft: var(--rol-immo-color-surface-soft, color-mix(in srgb, currentColor 3%, transparent));
    --ri-color-surface-warm: var(--rol-immo-color-surface-warm, color-mix(in srgb, currentColor 5%, transparent));
    --ri-color-line: var(--rol-immo-color-line, color-mix(in srgb, currentColor 15%, transparent));

    /* Fontes — fallback sur la fonte courante (heritee du theme) */
    --ri-font-display: var(--rol-immo-font-display, inherit);
    --ri-font-serif: var(--rol-immo-font-serif, inherit);
    --ri-font-body: var(--rol-immo-font-body, inherit);

    /* Espacements & rythme */
    --ri-radius: 4px;
    --ri-grid-gap-h: clamp(20px, 3vw, 40px);
    --ri-grid-gap-v: clamp(32px, 4vw, 56px);
    --ri-card-image-ratio: 4 / 5;
    --ri-eyebrow-tracking: 0.32em;
    --ri-transition: 0.25s ease;
}

/* 2. Search form --------------------------------------------------- */

/* Layout : le form est un conteneur vertical (display: block / flex)
   qui contient 4 blocs successifs :
   1) fieldset main : grille 4 colonnes (Transaction + Type + Ville + Prix max)
   2) bouton toggle : full-width
   3) fieldset advanced : caché par défaut, affiché en grille quand `--expanded`
   4) bouton submit : full-width

   Sur mobile (≤ 768px), tous les éléments deviennent 1 colonne. */

.rol-immo-search-form {
    display: block;
    padding: 0;
    margin: 0;
    background: var(--ri-color-surface);
    border: 1px solid var(--ri-color-line);
    box-sizing: border-box;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ri-color-text);
    line-height: 1.4;
}

.rol-immo-search-form *,
.rol-immo-search-form *::before,
.rol-immo-search-form *::after {
    box-sizing: border-box;
}

.rol-immo-search-form__fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.rol-immo-search-form__fieldset--advanced {
    /* Masqué par défaut : visible uniquement quand le form a la classe
       `--expanded` (toggle JS ou pré-ouverture serveur/URL). */
    display: none;
    border-top: 1px solid var(--ri-color-line);
    background: var(--ri-color-surface-soft);
}

.rol-immo-search-form--expanded .rol-immo-search-form__fieldset--advanced {
    display: grid;
}

.rol-immo-search-form__field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 28px;
    border-right: 1px solid var(--ri-color-line);
    min-width: 0;
}

.rol-immo-search-form__field:last-of-type {
    border-right: 0;
}

.rol-immo-search-form__fieldset--advanced .rol-immo-search-form__field {
    padding: 18px 28px;
}

/* Mot-clé : pleine largeur sur sa propre ligne dans la grille advanced. */
.rol-immo-search-form__field--full {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--ri-color-line);
}

.rol-immo-search-form__label {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--ri-eyebrow-tracking);
    color: var(--ri-color-text-soft);
    margin-bottom: 10px;
}

.rol-immo-search-form__input,
.rol-immo-search-form__select {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--ri-color-primary);
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    transition: color var(--ri-transition);
}

.rol-immo-search-form__input::placeholder {
    color: var(--ri-color-text-muted);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 300;
}

.rol-immo-search-form__select {
    padding-right: 16px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ri-color-text-soft) 50%),
        linear-gradient(135deg, var(--ri-color-text-soft) 50%, transparent 50%);
    background-position: calc(100% - 8px) 60%, calc(100% - 4px) 60%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
}

.rol-immo-search-form__input:focus,
.rol-immo-search-form__select:focus {
    outline: 0;
    color: var(--ri-color-accent);
}

/* Bouton toggle « Plus / Moins de filtres » -------------------------- */

.rol-immo-search-form__toggle {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--ri-color-line);
    background: transparent;
    color: var(--ri-color-text-soft);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--ri-transition), background var(--ri-transition);
}

.rol-immo-search-form__toggle:hover,
.rol-immo-search-form__toggle:focus-visible {
    color: var(--ri-color-accent);
    background: var(--ri-color-surface-soft);
    outline: 0;
}

.rol-immo-search-form__toggle-chevron {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    transition: transform var(--ri-transition);
}

.rol-immo-search-form--expanded .rol-immo-search-form__toggle-chevron {
    transform: rotate(180deg);
}

/* Submit -------------------------------------------------- */

.rol-immo-search-form__submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 56px;
    border: 0;
    border-top: 1px solid var(--ri-color-line);
    cursor: pointer;
    background: var(--ri-color-primary);
    color: var(--ri-color-surface);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    transition: background var(--ri-transition);
    min-height: 64px;
}

.rol-immo-search-form__submit:hover {
    background: var(--ri-color-accent);
}

.rol-immo-search-form__submit:focus-visible {
    outline: 2px solid var(--ri-color-accent);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .rol-immo-search-form__fieldset,
    .rol-immo-search-form--expanded .rol-immo-search-form__fieldset--advanced {
        grid-template-columns: 1fr;
    }
    .rol-immo-search-form__field {
        border-right: 0;
        border-bottom: 1px solid var(--ri-color-line);
        padding: 16px 20px;
    }
    .rol-immo-search-form__fieldset--advanced .rol-immo-search-form__field {
        padding: 14px 20px;
    }
    .rol-immo-search-form__toggle {
        padding: 14px 20px;
    }
    .rol-immo-search-form__submit {
        min-height: 56px;
    }
}

/* Active filters (chips) ------------------------------------------ */

.rol-immo-active-filters {
    list-style: none;
    margin: 0 0 clamp(20px, 2vw, 32px);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.rol-immo-active-filters__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    border: 1px solid var(--ri-color-line);
    background: var(--ri-color-surface);
    font-size: 12px;
    color: var(--ri-color-primary);
}

.rol-immo-active-filters__label {
    line-height: 1.4;
}

.rol-immo-active-filters__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--ri-color-text-soft);
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    transition: background var(--ri-transition), color var(--ri-transition);
}

.rol-immo-active-filters__remove:hover {
    background: var(--ri-color-primary);
    color: var(--ri-color-surface);
}

.rol-immo-active-filters__clear {
    margin-left: 8px;
}

.rol-immo-active-filters__clear a {
    font-size: 11px;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--ri-color-line);
    padding-bottom: 2px;
    transition: color var(--ri-transition), border-color var(--ri-transition);
}

.rol-immo-active-filters__clear a:hover {
    color: var(--ri-color-accent);
    border-bottom-color: var(--ri-color-accent);
}

/* Archive toolbar (count + sort) ---------------------------------- */

.rol-immo-archive-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 clamp(28px, 3vw, 48px);
    padding: 16px 0;
    border-top: 1px solid var(--ri-color-line);
    border-bottom: 1px solid var(--ri-color-line);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.rol-immo-archive-toolbar__count {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
}

.rol-immo-archive-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rol-immo-archive-toolbar__sort-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
}

.rol-immo-archive-toolbar__sort-select {
    padding: 8px 28px 8px 12px;
    border: 1px solid var(--ri-color-line);
    background: var(--ri-color-surface);
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: 14px;
    color: var(--ri-color-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ri-color-text-soft) 50%),
        linear-gradient(135deg, var(--ri-color-text-soft) 50%, transparent 50%);
    background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
}

.rol-immo-archive-toolbar__sort-submit {
    margin-left: 8px;
    padding: 6px 14px;
    border: 1px solid var(--ri-color-line);
    background: var(--ri-color-surface);
    font-size: 11px;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    cursor: pointer;
}

/* 3. Archive / grille --------------------------------------------- */

.rol-immo-archive {
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 100px) clamp(20px, 4vw, 60px);
    color: var(--ri-color-text);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.rol-immo-archive__header {
    margin-bottom: clamp(28px, 3.5vw, 48px);
    text-align: left;
}

.rol-immo-archive__eyebrow {
    margin: 0 0 14px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.rol-immo-archive__eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--ri-color-accent);
    flex-shrink: 0;
}

.rol-immo-archive__title {
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 300;
    line-height: 1.05;
    color: var(--ri-color-primary);
    margin: 0;
}

.rol-immo-archive__intro {
    margin: clamp(16px, 2vw, 24px) 0 0;
    max-width: 800px;
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: clamp(15px, 1.2vw, 17px);
    font-weight: 300;
    line-height: 1.7;
    color: var(--ri-color-text-soft);
}

.rol-immo-archive__intro p {
    margin: 0 0 0.8em;
}

.rol-immo-archive__intro p:last-child {
    margin-bottom: 0;
}

.rol-immo-archive__search {
    margin: 0 0 clamp(20px, 2.5vw, 32px);
}

.rol-immo-archive__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--ri-grid-gap-h);
    row-gap: var(--ri-grid-gap-v);
}

.rol-immo-archive__item {
    margin: 0;
}

.rol-immo-archive__empty {
    grid-column: 1 / -1;
    padding: 60px 0;
    text-align: center;
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 18px;
    color: var(--ri-color-text-soft);
}

@media (max-width: 1024px) {
    .rol-immo-archive__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .rol-immo-archive__list {
        grid-template-columns: 1fr;
    }
}

/* 4. Card --------------------------------------------------------- */

.rol-immo-card {
    position: relative;
    background: transparent;
    color: var(--ri-color-text);
}

.rol-immo-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--ri-transition);
}

.rol-immo-card__link:hover {
    opacity: 0.92;
}

.rol-immo-card__link:focus-visible {
    outline: 2px solid var(--ri-color-accent);
    outline-offset: 4px;
}

/* Wrapper media (slider galerie OU featured image) ----------------- */

.rol-immo-card__media {
    position: relative;
    overflow: hidden;
    background-color: color-mix(in srgb, currentColor 4%, transparent);
    aspect-ratio: var(--ri-card-image-ratio, 4 / 5);
}

/* Slider de la galerie : scroll-snap horizontal (swipe mobile natif) - */

.rol-immo-card__slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.rol-immo-card__slides {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Masque la scrollbar native (visible sur certains OS). */
    scrollbar-width: none;
}
.rol-immo-card__slides::-webkit-scrollbar { display: none; }

.rol-immo-card__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: block;
    position: relative;
    text-decoration: none;
}

.rol-immo-card__slide-img,
.rol-immo-card__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--ri-transition, 0.25s ease);
}

.rol-immo-card:hover .rol-immo-card__slide-img,
.rol-immo-card:hover .rol-immo-card__slide img {
    transform: scale(1.02);
}

/* Slide CTA final : pas d'image (~0 cout reseau), juste un appel a
   ouvrir la fiche. Affiche uniquement si la galerie d'origine depasse
   le cap rol_immo_card_max_slides (defaut 8). */
.rol-immo-card__slide--cta {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 20px;
    background: linear-gradient(135deg,
        var(--ri-color-primary) 0%,
        color-mix(in srgb, var(--ri-color-primary) 85%, var(--ri-color-accent)) 100%);
    color: #fff;
    text-decoration: none;
    transition: opacity var(--ri-transition);
}
.rol-immo-card__slide--cta:hover,
.rol-immo-card__slide--cta:focus-visible {
    opacity: 0.92;
}
.rol-immo-card__slide-cta-arrow {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 4px;
    transition: transform var(--ri-transition);
}
.rol-immo-card__slide--cta:hover .rol-immo-card__slide-cta-arrow,
.rol-immo-card:hover .rol-immo-card__slide--cta .rol-immo-card__slide-cta-arrow {
    transform: translateX(6px);
}
.rol-immo-card__slide-cta-label {
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.25;
}
.rol-immo-card__slide-cta-sub {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 85%, transparent);
}

/* Fallback : pas de galerie ni featured image (clic = lien) -------- */
.rol-immo-card__media-fallback {
    display: block;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, currentColor 6%, transparent);
}

/* Boutons prev/next : visibles uniquement quand multi (rol-immo-card__slider--multi) */

.rol-immo-card__slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ri-color-primary);
    font-size: 22px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--ri-transition, 0.25s ease), background var(--ri-transition, 0.25s ease);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 2px;
}

.rol-immo-card__slider-btn:hover,
.rol-immo-card__slider-btn:focus-visible {
    background: var(--ri-color-primary);
    color: var(--ri-color-surface);
    outline: none;
}

.rol-immo-card__slider-btn--prev { left: 12px; }
.rol-immo-card__slider-btn--next { right: 12px; }

/* Boutons visibles au hover de la card (desktop) + toujours visible touch. */
.rol-immo-card:hover .rol-immo-card__slider-btn,
.rol-immo-card__slider-btn:focus-visible {
    opacity: 1;
}
@media (hover: none) {
    .rol-immo-card__slider-btn { opacity: 0.85; }
}

/* Dots indicateurs (en bas du slider) ------------------------------ */

.rol-immo-card__slider-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}

.rol-immo-card__slider-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background var(--ri-transition, 0.25s ease), width var(--ri-transition, 0.25s ease);
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.rol-immo-card__slider-dot[aria-current="true"] {
    background: #fff;
    width: 16px;
    border-radius: 3px;
}

/* L'ancien selecteur .rol-immo-card__thumbnail reste pour compat si
   des themes legacy l'utilisent dans leur override de card.php. */
.rol-immo-card__thumbnail {
    aspect-ratio: var(--ri-card-image-ratio);
    overflow: hidden;
    margin: 0 0 22px;
    background: var(--ri-color-surface-soft);
}

.rol-immo-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.rol-immo-card__link:hover .rol-immo-card__thumbnail img {
    transform: scale(1.03);
}

.rol-immo-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rol-immo-card__eyebrow {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rol-immo-card__eyebrow::before {
    content: '—';
    color: var(--ri-color-accent-soft);
    flex-shrink: 0;
}

.rol-immo-card__title {
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 1.6vw, 26px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ri-color-primary);
    margin: 2px 0 2px;
}

.rol-immo-card__location {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    color: var(--ri-color-text-soft);
    margin: 0;
}

.rol-immo-card__excerpt {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ri-color-text);
    margin: 0 0 2px;
    /* Coupe assuree cote PHP par nombre de caracteres (cf. card.php
       et filter `rol_immo_card_excerpt_length`). Pas de `line-clamp`
       CSS : trop instable selon navigateur/font-metrics, laissait
       passer un bout de la 3eme ligne en pratique. */
}

/* Conteneur flex pour aligner les facts (gauche) et le prix (droite) sur
   la meme ligne en bas de card. Cf. PR fix/card-single-polish : avant,
   les facts et le prix etaient empiles verticalement avec leur propre
   margin-top, ce qui creait beaucoup d'espace vide entre les deux. */
.rol-immo-card__bottom {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 4px;
}

.rol-immo-card__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ri-color-text);
}

.rol-immo-card__facts li + li::before {
    content: '·';
    margin-right: 14px;
    color: var(--ri-color-accent);
}

.rol-immo-card__price {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--ri-color-primary);
    margin: 0;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* 5. Single annonce ----------------------------------------------- */

.rol-immo-single {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px) clamp(40px, 6vw, 100px);
    color: var(--ri-color-text);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.rol-immo-single__header {
    margin: clamp(16px, 2vw, 24px) 0 clamp(20px, 2.5vw, 32px);
}

/* Fil d'ariane (Annonces > transaction > type > ville) */
.rol-immo-single__breadcrumb {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
}

.rol-immo-single__breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rol-immo-single__breadcrumb-item {
    display: flex;
    align-items: center;
    margin: 0;
}

.rol-immo-single__breadcrumb-item:not(:last-child)::after {
    content: '·';
    margin: 0 10px;
    color: var(--ri-color-accent);
    font-size: 12px;
    line-height: 1;
}

.rol-immo-single__breadcrumb-link {
    color: var(--ri-color-text-soft);
    text-decoration: none;
    transition: color var(--ri-transition);
}

.rol-immo-single__breadcrumb-link:hover,
.rol-immo-single__breadcrumb-link:focus {
    color: var(--ri-color-accent);
}

.rol-immo-single__breadcrumb-item:last-child .rol-immo-single__breadcrumb-link {
    color: var(--ri-color-primary);
    font-weight: 500;
}

/* Titre : maintenant dans la colonne main, entre la galerie et les keyfacts */
.rol-immo-single__title {
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-size: clamp(32px, 4.2vw, 56px);
    font-weight: 300;
    line-height: 1.05;
    color: var(--ri-color-primary);
    margin: 0 0 clamp(28px, 3vw, 44px);
    letter-spacing: 0.005em;
}

.rol-immo-single__gallery {
    margin: 0 0 clamp(40px, 5vw, 80px);
    display: grid;
    gap: 8px;
}

.rol-immo-single__gallery-main {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ri-color-surface-soft);
}

.rol-immo-single__gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Galerie photos (partial gallery.php) ----------------------------- */

.rol-immo-gallery {
    margin: 0 0 clamp(40px, 5vw, 80px);
    display: grid;
    gap: 8px;
}

/* __viewport : conteneur interne, transparent par defaut (display: contents)
   pour que la grille de .rol-immo-gallery voit directement main + thumbs.
   En mobile, ce wrapper devient le scroll container (cf. media query). */
.rol-immo-gallery__viewport {
    display: contents;
}

.rol-immo-gallery__main-link {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ri-color-surface-soft);
    transition: opacity var(--ri-transition);
}

.rol-immo-gallery__main-link:hover { opacity: 0.95; }

.rol-immo-gallery__main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rol-immo-gallery__thumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.rol-immo-gallery__thumb {
    margin: 0;
    position: relative;
}

/* Thumbs "hidden" : non affichees sur desktop (la lightbox les decouvre
   quand meme via les liens dans le DOM). Sur mobile, elles re-apparaissent
   dans le carrousel swipe — cf. la media query plus bas. */
@media (min-width: 769px) {
    .rol-immo-gallery__thumb--hidden {
        display: none !important;
    }
    /* Nav prev/next + dots + bouton diaporama : strictement mobile. Sur
       desktop, la grille statique main + thumbs et la lightbox au clic
       ne necessitent ni navigation horizontale ni slideshow autoplay. */
    .rol-immo-gallery__nav,
    .rol-immo-gallery__dots,
    .rol-immo-gallery__fullscreen {
        display: none !important;
    }
}

/* Par defaut (desktop), nav, dots et bouton diaporama restent caches. La
   media query mobile plus bas les revele. */
.rol-immo-gallery__nav,
.rol-immo-gallery__dots,
.rol-immo-gallery__fullscreen {
    display: none;
}

.rol-immo-gallery__thumb-link {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ri-color-surface-soft);
    transition: opacity var(--ri-transition);
    position: relative;
}

.rol-immo-gallery__thumb-link:hover { opacity: 0.92; }

.rol-immo-gallery__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.rol-immo-gallery__thumb-link:hover .rol-immo-gallery__thumb-img {
    transform: scale(1.04);
}

/* Overlay "+ N photos" sur la derniere thumb visible */
.rol-immo-gallery__more {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    background: color-mix(in srgb, var(--ri-color-primary) 78%, transparent);
    transition: background var(--ri-transition);
    pointer-events: none;
    text-align: center;
    padding: 8px;
}

.rol-immo-gallery__thumb--more .rol-immo-gallery__thumb-link:hover .rol-immo-gallery__more {
    background: color-mix(in srgb, var(--ri-color-primary) 90%, transparent);
}

.rol-immo-gallery__thumb--more .rol-immo-gallery__thumb-link:hover .rol-immo-gallery__thumb-img {
    transform: none;
}

.rol-immo-gallery__more-num {
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 3.2vw, 38px);
    font-weight: 400;
    line-height: 1;
}

.rol-immo-gallery__more-label {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    opacity: 0.85;
}

.rol-immo-gallery__more-cta {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    opacity: 0;
    transition: opacity var(--ri-transition);
}

.rol-immo-gallery__thumb--more .rol-immo-gallery__thumb-link:hover .rol-immo-gallery__more-cta {
    opacity: 1;
}

/* Mobile : grille statique → carrousel swipe horizontal natif.
   - On bascule .rol-immo-gallery en flex horizontal scroll-snap.
   - `display: contents` sur .__thumbs fait remonter les <li> au niveau
     du flex parent (le <ul> disparait visuellement, ses enfants prennent
     la main dans le flow flex).
   - Toutes les images (main + thumbs + hidden) deviennent des slides
     plein largeur avec scroll-snap qui colle au plus proche.
   - L'overlay "+ N photos" est masque sur mobile : toutes les images
     sont swippables directement, l'overlay perd son sens. */
@media (max-width: 768px) {
    /* .rol-immo-gallery : conteneur d'ancrage non-scrollant pour les
       boutons prev/next/dots/diaporama. Position relative pour permettre
       leur absolute positioning. PAS de scroll ici. */
    .rol-immo-gallery {
        position: relative;
        display: block; /* sortir de la grid desktop, le viewport gere le flex */
        gap: 0;
    }

    /* __viewport : LE vrai scroll container en mobile. Les boutons en
       absolute sur .rol-immo-gallery ne suivent pas le scroll horizontal
       de cet element. */
    .rol-immo-gallery__viewport {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        scrollbar-width: none;
    }

    .rol-immo-gallery__viewport::-webkit-scrollbar {
        display: none;
    }

    .rol-immo-gallery__main-link,
    .rol-immo-gallery__thumb {
        flex: 0 0 100%;
        scroll-snap-align: start;
        aspect-ratio: 4 / 3;
        /* Clic neutralise sur mobile : pas de lightbox, pas de navigation
           vers l'image full. Le JS (gallery-mobile-nav.js) intercepte les
           clics et fait preventDefault, mais on retire deja le curseur
           pointer pour la coherence visuelle. */
        cursor: default;
    }

    .rol-immo-gallery__thumbs {
        display: contents;
    }

    .rol-immo-gallery__thumb-link {
        aspect-ratio: 4 / 3;
        height: 100%;
        cursor: default;
    }

    /* Pas de hover effect (zoom) sur mobile, ca interfere avec le swipe. */
    .rol-immo-gallery__main-link:hover .rol-immo-gallery__main,
    .rol-immo-gallery__thumb-link:hover .rol-immo-gallery__thumb-img {
        transform: none;
    }

    /* Toutes les photos sont swippables, l'overlay "+ N" perd son sens. */
    .rol-immo-gallery__thumb--more .rol-immo-gallery__more {
        display: none;
    }

    /* Les thumbs "hidden" (cf. gallery.php) re-apparaissent comme slides. */
    .rol-immo-gallery__thumb--hidden {
        display: block;
    }

    /* ===== Nav prev/next (boutons cercles) ===== */
    .rol-immo-gallery__nav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: calc(50% - 12px); /* -12px pour compenser le padding-bottom dots */
        transform: translateY(-50%);
        z-index: 2;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: color-mix(in srgb, var(--ri-color-primary) 75%, transparent);
        color: #fff;
        font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        transition: background var(--ri-transition);
        -webkit-tap-highlight-color: transparent;
    }
    .rol-immo-gallery__nav:active {
        background: color-mix(in srgb, var(--ri-color-primary) 92%, transparent);
    }
    .rol-immo-gallery__nav--prev { left: 12px; }
    .rol-immo-gallery__nav--next { right: 12px; }

    /* ===== Dots indicateurs ===== */
    .rol-immo-gallery__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .rol-immo-gallery__dot {
        margin: 0;
        padding: 0;
        list-style: none;
        display: block;
        line-height: 0;
    }
    .rol-immo-gallery__dot-btn {
        display: block;
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: color-mix(in srgb, var(--ri-color-primary) 30%, transparent);
        cursor: pointer;
        transition: background var(--ri-transition), transform var(--ri-transition);
        -webkit-tap-highlight-color: transparent;
    }
    .rol-immo-gallery__dot-btn[aria-current="true"] {
        background: var(--ri-color-accent);
        transform: scale(1.25);
    }

    /* ===== Bouton "Diaporama" (lance le slideshow plein ecran) ===== */
    .rol-immo-gallery__fullscreen {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
        padding: 6px 10px;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--ri-color-primary) 75%, transparent);
        color: #fff;
        font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background var(--ri-transition);
        -webkit-tap-highlight-color: transparent;
    }
    .rol-immo-gallery__fullscreen:active {
        background: var(--ri-color-accent);
    }
    .rol-immo-gallery__fullscreen-icon {
        font-size: 14px;
        line-height: 1;
    }
}

/* ===== Slideshow plein ecran (overlay global, hors media query) =====
   Construit dynamiquement par gallery-slideshow.js, masque par defaut
   (`hidden` HTML attribut). Quand visible, prend le viewport entier et
   bloque le scroll body. Pleine largeur portrait / pleine hauteur paysage
   gere automatiquement par `object-fit: contain` sur l'image. */
.rol-immo-gallery-slideshow {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Bouclier contre la couleur de fond du body si le theme l'a custom. */
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: pan-y;
}

.rol-immo-gallery-slideshow[hidden] {
    display: none !important;
}

.rol-immo-gallery-slideshow__image {
    /* `width: 100vw` ET `height: 100vh` avec `object-fit: contain` =
       l'image remplit l'axe le plus contraint et garde son ratio.
       Resultat : pleine largeur en portrait, pleine hauteur en paysage. */
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    display: block;
    transition: opacity 0.25s ease;
}

.rol-immo-gallery-slideshow__image.is-loading {
    opacity: 0.4;
}

/* Boutons prev/next (style coherent avec la nav mobile de la galerie) */
.rol-immo-gallery-slideshow__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background var(--ri-transition);
}
.rol-immo-gallery-slideshow__nav:hover,
.rol-immo-gallery-slideshow__nav:active {
    background: rgba(255, 255, 255, 0.3);
}
.rol-immo-gallery-slideshow__nav--prev { left: 16px; }
.rol-immo-gallery-slideshow__nav--next { right: 16px; }

/* Toolbar haut : compteur + play/pause + close */
.rol-immo-gallery-slideshow__toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
    pointer-events: none; /* les enfants reactiveront */
}
.rol-immo-gallery-slideshow__toolbar > * {
    pointer-events: auto;
}
.rol-immo-gallery-slideshow__counter {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #fff;
    margin: 0;
}
.rol-immo-gallery-slideshow__actions {
    display: flex;
    gap: 8px;
}
.rol-immo-gallery-slideshow__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--ri-transition);
}
.rol-immo-gallery-slideshow__btn:hover,
.rol-immo-gallery-slideshow__btn:active {
    background: rgba(255, 255, 255, 0.3);
}

.rol-immo-single__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
}

.rol-immo-single__main {
    min-width: 0;
}

.rol-immo-single__content {
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ri-color-text);
}

.rol-immo-single__content p {
    margin: 0 0 1.2em;
}

.rol-immo-single__section {
    margin: 0 0 clamp(40px, 5vw, 80px);
}

.rol-immo-single__section-eyebrow {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rol-immo-single__section-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--ri-color-accent);
    flex-shrink: 0;
}

.rol-immo-single__section-title {
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 400;
    color: var(--ri-color-primary);
    margin: 0 0 clamp(20px, 2.5vw, 32px);
    line-height: 1.15;
}

.rol-immo-single__sidebar {
    position: sticky;
    /* 130px = compense le header Divi sticky transparent du theme parent
       (cf. docs/divi-templates/IMPORT.md section "header sticky"). Si un
       projet a un header de hauteur differente, override cette valeur
       dans le child theme. */
    top: 130px;
}

@media (max-width: 1024px) {
    .rol-immo-single__layout {
        grid-template-columns: 1fr;
    }
    .rol-immo-single__sidebar {
        /* Annule le position:sticky desktop sur mobile (la sidebar prend
           toute la largeur, plus de sticky possible). */
        position: static;
        /* Pas de `order` : la sidebar conserve sa position naturelle dans
           le DOM (= sous le main content). Decision UX : laisser le
           visiteur lire la description + galerie + features avant de lui
           proposer le contact. La barre fixe `.rol-immo-mobile-cta` (cf.
           plus bas) gere le CTA permanent (tel + Contacter) en bas
           d'ecran. */
    }
}

/* ===== Barre d'actions fixe mobile (tel + Contacter) =====
   Sur mobile, la sidebar tombe en bas du DOM (cf. .rol-immo-single__sidebar
   media query plus haut). Cette barre fixe garantit un acces permanent au
   tel direct et au formulaire de contact, peu importe la position de scroll
   dans la fiche. Cachee sur desktop. */
.rol-immo-mobile-cta {
    display: none;
}

@media (max-width: 1024px) {
    .rol-immo-mobile-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        gap: 8px;
        padding: 10px 12px;
        /* iOS safe area : evite que les boutons soient coupes par la barre
           de gestes du home indicator sur iPhone X+. */
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid var(--ri-color-line);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    }

    /* Offset du body pour eviter que le footer (et la fin de la fiche) ne
       soit cache derriere la barre fixe. ~70px = hauteur barre + safe area
       sur la majorite des devices. */
    body:has(.rol-immo-mobile-cta) {
        padding-bottom: 70px;
    }
}

.rol-immo-mobile-cta__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px; /* taille tactile recommandee Apple HIG */
    padding: 10px 14px;
    border: 1px solid var(--ri-color-primary);
    border-radius: 4px;
    background: transparent;
    color: var(--ri-color-primary);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ri-transition), color var(--ri-transition);
    -webkit-tap-highlight-color: transparent;
}

.rol-immo-mobile-cta__btn--contact {
    background: var(--ri-color-primary);
    color: #fff;
}

.rol-immo-mobile-cta__btn:active {
    opacity: 0.85;
}

.rol-immo-mobile-cta__icon {
    font-size: 16px;
    line-height: 1;
}

.rol-immo-mobile-cta__label {
    line-height: 1;
}

/* Keyfacts (4 caracteristiques principales) ----------------------- */

.rol-immo-keyfacts {
    list-style: none;
    margin: 0 0 clamp(40px, 5vw, 80px);
    padding: 24px 0;
    border-top: 1px solid var(--ri-color-line);
    border-bottom: 1px solid var(--ri-color-line);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
}

.rol-immo-keyfacts__item {
    margin: 0;
    text-align: left;
}

.rol-immo-keyfacts__num {
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 400;
    line-height: 1;
    color: var(--ri-color-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.rol-immo-keyfacts__num small {
    font-size: 0.5em;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ri-color-text-soft);
    font-weight: 400;
    letter-spacing: 0.04em;
}

.rol-immo-keyfacts__lbl {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
    line-height: 1.3;
}

.rol-immo-keyfacts__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    border-radius: 4px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.5em;
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
    line-height: 1;
}

.rol-immo-keyfacts__letter--a { background: #00a651; }
.rol-immo-keyfacts__letter--b { background: #50b948; }
.rol-immo-keyfacts__letter--c { background: #aed136; color: #000; }
.rol-immo-keyfacts__letter--d { background: #fff200; color: #000; }
.rol-immo-keyfacts__letter--e { background: #fdb913; color: #000; }
.rol-immo-keyfacts__letter--f { background: #f47b20; }
.rol-immo-keyfacts__letter--g { background: #ed1c24; }

@media (max-width: 600px) {
    .rol-immo-keyfacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Features (ACF UI auto-decouvert) -------------------------------- */

.rol-immo-features {
    list-style: none;
    margin: clamp(28px, 3vw, 40px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    column-gap: clamp(20px, 2.5vw, 32px);
    row-gap: 14px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.rol-immo-features__item {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ri-color-text);
}

.rol-immo-features__item::before {
    content: '◆';
    color: var(--ri-color-accent);
    font-size: 0.7em;
    flex-shrink: 0;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 6. Facts -------------------------------------------------------- */

.rol-immo-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0;
    margin: 0 0 clamp(32px, 4vw, 60px);
    padding: 0;
    border-top: 1px solid var(--ri-color-line);
    border-left: 1px solid var(--ri-color-line);
    background: transparent;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.rol-immo-facts__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 22px 22px;
    border-right: 1px solid var(--ri-color-line);
    border-bottom: 1px solid var(--ri-color-line);
    margin: 0;
    min-width: 0;
}

.rol-immo-facts__label {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
    margin: 0;
}

.rol-immo-facts__value {
    margin: 0;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.3;
    color: var(--ri-color-primary);
    word-break: break-word;
}

.rol-immo-facts__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.6rem;
    padding: 0 0.5rem;
    border-radius: 3px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

/* Couleurs DPE/GES (compat — usage compact dans card/sidebar) */
.rol-immo-facts__badge--a { background: #00a651; color: #fff; }
.rol-immo-facts__badge--b { background: #50b948; color: #fff; }
.rol-immo-facts__badge--c { background: #aed136; color: #000; }
.rol-immo-facts__badge--d { background: #fff200; color: #000; }
.rol-immo-facts__badge--e { background: #fdb913; color: #000; }
.rol-immo-facts__badge--f { background: #f47b20; color: #fff; }
.rol-immo-facts__badge--g { background: #ed1c24; color: #fff; }

@media (max-width: 600px) {
    .rol-immo-facts {
        grid-template-columns: 1fr 1fr;
    }
}

/* 6b. Bloc "Infos legales et charges" (coproprite, charges, taxe) ---- */

.rol-immo-legal-info {
    margin: clamp(32px, 4vw, 56px) 0 0;
    padding: clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 32px);
    border-top: 1px solid var(--ri-color-line);
}

.rol-immo-legal-info__title {
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 1.6vw, 26px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ri-color-primary);
    margin: 0 0 clamp(16px, 2vw, 24px);
}

.rol-immo-legal-info__list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 28px;
}

.rol-immo-legal-info__row {
    margin: 0;
    padding: 0;
}

.rol-immo-legal-info__label {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
    margin: 0 0 4px;
}

.rol-immo-legal-info__value {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ri-color-primary);
    margin: 0;
}

/* 7. Etiquette DPE / GES ------------------------------------------ */

.rol-immo-energy-block {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(20px, 3vw, 32px);
    margin: clamp(32px, 4vw, 60px) 0;
}

.rol-immo-energy {
    margin: 0;
    padding: clamp(20px, 2.5vw, 28px);
    border: 1px solid var(--ri-color-line);
    background: var(--ri-color-surface);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.rol-immo-energy__title {
    margin: 0 0 18px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--ri-eyebrow-tracking);
    color: var(--ri-color-text-soft);
}

.rol-immo-energy__exempt {
    margin: 0.5rem 0 0;
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 16px;
    color: var(--ri-color-text-soft);
}

.rol-immo-energy__scale {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rol-immo-energy__step {
    display: flex;
    align-items: center;
    padding: 4px 0;
    border-radius: 2px;
    box-sizing: border-box;
    opacity: 0.7;
    transition: opacity 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}

.rol-immo-energy__step.is-active {
    opacity: 1;
    padding: 12px 0;
    box-shadow: 0 0 0 2px var(--ri-color-accent);
    font-weight: 500;
    z-index: 2;
}

.rol-immo-energy__letter {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    height: 1.8rem;
    margin: 0 10px;
    padding: 0 12px;
    border-radius: 2px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Effet escalier ADEME : la barre coloree (la lettre) suit la progression
   de largeur. A en haut courte, G en bas longue. `!important` defensif
   contre les themes qui forceraient width sur les span. */
.rol-immo-energy__step--a .rol-immo-energy__letter { width: 28% !important; background: #00a651; color: #fff; }
.rol-immo-energy__step--b .rol-immo-energy__letter { width: 38% !important; background: #50b948; color: #fff; }
.rol-immo-energy__step--c .rol-immo-energy__letter { width: 48% !important; background: #aed136; color: #000; }
.rol-immo-energy__step--d .rol-immo-energy__letter { width: 58% !important; background: #fff200; color: #000; }
.rol-immo-energy__step--e .rol-immo-energy__letter { width: 68% !important; background: #fdb913; color: #000; }
.rol-immo-energy__step--f .rol-immo-energy__letter { width: 78% !important; background: #f47b20; color: #fff; }
.rol-immo-energy__step--g .rol-immo-energy__letter { width: 88% !important; background: #ed1c24; color: #fff; }

.rol-immo-energy__value {
    margin-left: 4px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.2;
    color: var(--ri-color-text);
}

/* La valeur (ex "243 kWh/m²/an") debordait du cadre du <section> sur
   mobile ET en desktop dans la grid auto-fit du `rol-immo-energy-block`
   (2 colonnes etroites quand DPE + GES sont cote a cote). Cause : la
   barre coloree (.__letter) garde sa width !important fixe (28-88%)
   et ne se retrecit pas, donc la value est poussee hors-cadre.
   Solution : on wrap la step active en 2 lignes — barre coloree au-
   dessus, value en dessous alignee a droite, le tout dans le cadre.
   Applique a tous les ecrans (cf. screenshot client showing le bug
   en desktop aussi). */
.rol-immo-energy__step.is-active {
    flex-wrap: wrap;
}
.rol-immo-energy__step.is-active .rol-immo-energy__value {
    width: 100%;
    margin: 4px 10px 0 0;
    font-size: 12px;
    text-align: right;
}

/* 8. Mentions Loi Hoguet ------------------------------------------ */

.rol-immo-mentions {
    margin: clamp(32px, 4vw, 60px) 0 0;
    padding: clamp(24px, 3vw, 32px) 0 0;
    border-top: 1px solid var(--ri-color-line);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ri-color-text-soft);
}

.rol-immo-mentions p {
    margin: 0.4rem 0;
}

.rol-immo-mentions__honoraires {
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    color: var(--ri-color-text);
}

.rol-immo-mentions__sociales,
.rol-immo-mentions__complement,
.rol-immo-mentions__georisques {
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* Mention Georisques (Loi Climat & Resilience, art. 236). Note legere
   pour distinguer cette mention obligatoire des mentions sociales sans
   alourdir le visuel. */
.rol-immo-mentions__georisques {
    color: var(--ri-color-text-soft);
}
.rol-immo-mentions__georisques-link {
    color: var(--ri-color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.rol-immo-mentions__georisques-link:hover,
.rol-immo-mentions__georisques-link:focus {
    color: var(--ri-color-primary);
}

/* Lien vers le bareme d'honoraires (s'affiche apres le texte d'honoraires
   ou seul si l'agence n'a pas de mention textuelle). Souligne sobre,
   ouvre dans un nouvel onglet (cf. mentions-legales.php target="_blank"). */
.rol-immo-mentions__bareme-link {
    margin-left: 0.4em;
    color: var(--ri-color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-style: normal; /* sortir de l'italic du parent honoraires */
}
.rol-immo-mentions__bareme-link:hover,
.rol-immo-mentions__bareme-link:focus {
    color: var(--ri-color-primary);
}

/* 9. Pagination --------------------------------------------------- */

.rol-immo-pagination {
    margin: clamp(40px, 5vw, 80px) 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
}

.rol-immo-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    color: var(--ri-color-text-soft);
    border: 1px solid transparent;
    text-decoration: none;
    transition: color var(--ri-transition), border-color var(--ri-transition);
}

.rol-immo-pagination .page-numbers:hover {
    color: var(--ri-color-accent);
}

.rol-immo-pagination .page-numbers.current {
    color: var(--ri-color-primary);
    border-color: var(--ri-color-line);
    font-weight: 500;
}

/* 10. Helpers ----------------------------------------------------- */

.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

/* Sidebar vendeur card -------------------------------------------- */

.rol-immo-vendeur-card {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 28px);
    padding: clamp(28px, 3vw, 40px);
    background: var(--ri-color-surface-warm);
    border: 1px solid var(--ri-color-line);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.rol-immo-vendeur-card__price-block {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ri-color-line);
}

.rol-immo-vendeur-card__price-eyebrow {
    margin: 0 0 6px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-accent);
}

.rol-immo-vendeur-card__price {
    margin: 0 0 6px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--ri-color-primary);
    letter-spacing: 0.02em;
}

.rol-immo-vendeur-card__price-note {
    margin: 0;
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-style: italic;
    color: var(--ri-color-text-soft);
}

.rol-immo-vendeur-card__agent {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rol-immo-vendeur-card__photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--ri-color-surface-soft);
    flex-shrink: 0;
}

.rol-immo-vendeur-card__agent-text {
    min-width: 0;
}

.rol-immo-vendeur-card__agent-name {
    margin: 0;
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--ri-color-primary);
    line-height: 1.2;
}

.rol-immo-vendeur-card__agent-role {
    margin: 4px 0 0;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    color: var(--ri-color-text-soft);
}

.rol-immo-vendeur-card__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rol-immo-vendeur-card__cta {
    width: 100%;
    padding: 16px 24px;
    border: 0;
    background: var(--ri-color-primary);
    color: var(--ri-color-surface);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--ri-transition);
}

.rol-immo-vendeur-card__cta:hover {
    background: var(--ri-color-accent);
}

.rol-immo-vendeur-card__cta:focus-visible {
    outline: 2px solid var(--ri-color-accent);
    outline-offset: 3px;
}

.rol-immo-vendeur-card__phone {
    width: 100%;
    padding: 14px 24px;
    border: 1px solid var(--ri-color-line);
    background: var(--ri-color-surface);
    color: var(--ri-color-primary);
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: 17px;
    text-decoration: none;
    text-align: center;
    transition: border-color var(--ri-transition), color var(--ri-transition);
}

.rol-immo-vendeur-card__phone:hover {
    border-color: var(--ri-color-primary);
    color: var(--ri-color-accent);
}

/* Modal de contact ------------------------------------------------ */

.rol-immo-contact-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    --ri-color-text-soft: var(--rol-immo-color-text-soft, #6b6b6b);
}

.rol-immo-contact-modal[hidden] {
    display: none;
}

.rol-immo-contact-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    cursor: pointer;
}

.rol-immo-contact-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--ri-color-surface);
    padding: clamp(28px, 4vw, 48px);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.25);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ri-color-text);
}

.rol-immo-contact-modal__close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--ri-color-text-soft);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--ri-transition);
}

.rol-immo-contact-modal__close:hover {
    color: var(--ri-color-primary);
}

.rol-immo-contact-modal__header {
    margin-bottom: 24px;
}

.rol-immo-contact-modal__eyebrow {
    margin: 0 0 8px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-accent);
}

.rol-immo-contact-modal__title {
    margin: 0;
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ri-color-primary);
}

.rol-immo-contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rol-immo-contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.rol-immo-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rol-immo-contact-form__label {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
}

.rol-immo-contact-form input[type="text"],
.rol-immo-contact-form input[type="email"],
.rol-immo-contact-form input[type="tel"],
.rol-immo-contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ri-color-line);
    border-radius: 0;
    background: var(--ri-color-surface);
    color: var(--ri-color-text);
    font: inherit;
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color var(--ri-transition);
}

.rol-immo-contact-form input:focus,
.rol-immo-contact-form textarea:focus {
    outline: 0;
    border-color: var(--ri-color-primary);
}

.rol-immo-contact-form__field--error input,
.rol-immo-contact-form__field--error textarea {
    border-color: #c0392b;
}

.rol-immo-contact-form__error {
    margin: 4px 0 0;
    font-size: 12px;
    color: #c0392b;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.rol-immo-contact-form__consent {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    color: var(--ri-color-text-soft);
    line-height: 1.5;
}

.rol-immo-contact-form__consent input[type="checkbox"] {
    margin-top: 2px;
}

.rol-immo-contact-form__actions {
    margin-top: 6px;
}

.rol-immo-contact-form__submit {
    width: 100%;
    padding: 16px 24px;
    border: 0;
    background: var(--ri-color-primary);
    color: var(--ri-color-surface);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--ri-transition);
}

.rol-immo-contact-form__submit:hover {
    background: var(--ri-color-accent);
}

.rol-immo-contact-form__submit[disabled] {
    opacity: 0.55;
    cursor: progress;
}

.rol-immo-contact-form__feedback {
    margin: 8px 0 0;
    min-height: 1.5em;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
}

.rol-immo-contact-form__feedback.is-error { color: #c0392b; }
.rol-immo-contact-form__feedback.is-success { color: #2e7d32; }

@media (max-width: 480px) {
    .rol-immo-contact-form__row {
        grid-template-columns: 1fr;
    }
}

/* Lightbox galerie ------------------------------------------------- */

.rol-immo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(10, 10, 10, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    cursor: zoom-out;
}

.rol-immo-lightbox[hidden] { display: none; }

.rol-immo-lightbox__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4);
    cursor: default;
}

.rol-immo-lightbox__close,
.rol-immo-lightbox__nav {
    position: absolute;
    width: 48px;
    height: 48px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--ri-transition);
}

.rol-immo-lightbox__close { top: 20px; right: 20px; }
.rol-immo-lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.rol-immo-lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }

.rol-immo-lightbox__close:hover,
.rol-immo-lightbox__nav:hover { color: #fff; }

.rol-immo-lightbox__counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

/* Carte Google Maps ------------------------------------------------ */

.rol-immo-map {
    border: 1px solid var(--ri-color-line);
    overflow: hidden;
    line-height: 0;
}

.rol-immo-map__iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* Recent annonces (shortcode) ------------------------------------- */

.rol-immo-recent {
    margin: 0;
    padding: 0;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ri-color-text);
}

.rol-immo-recent__header {
    margin: 0 0 clamp(32px, 4vw, 56px);
}

.rol-immo-recent__eyebrow {
    margin: 0 0 14px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.rol-immo-recent__eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--ri-color-accent);
    flex-shrink: 0;
}

.rol-immo-recent__title {
    margin: 0;
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--ri-color-primary);
    letter-spacing: 0.005em;
}

.rol-immo-recent__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--ri-grid-gap-h);
    row-gap: var(--ri-grid-gap-v);
}

.rol-immo-recent__item {
    margin: 0;
}

@media (max-width: 1024px) {
    .rol-immo-recent__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .rol-immo-recent__list {
        grid-template-columns: 1fr;
    }
}

/* Villes grid (shortcode, style tabulaire) ------------------------ */

.rol-immo-villes-grid {
    margin: 0;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ri-color-text);
}

.rol-immo-villes-grid__header {
    margin: 0 0 clamp(28px, 3vw, 44px);
}

.rol-immo-villes-grid__eyebrow {
    margin: 0 0 14px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.rol-immo-villes-grid__eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--ri-color-accent);
    flex-shrink: 0;
}

.rol-immo-villes-grid__title {
    margin: 0;
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--ri-color-primary);
    letter-spacing: 0.005em;
}

.rol-immo-villes-grid__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ri-color-line);
}

.rol-immo-villes-grid__item {
    margin: 0;
    border-bottom: 1px solid var(--ri-color-line);
}

.rol-immo-villes-grid__link {
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    align-items: baseline;
    gap: clamp(16px, 2vw, 32px);
    padding: clamp(20px, 2.4vw, 28px) 0;
    text-decoration: none;
    color: inherit;
    transition: padding-left var(--ri-transition), color var(--ri-transition);
}

.rol-immo-villes-grid__link:hover {
    padding-left: 16px;
    color: var(--ri-color-accent);
}

.rol-immo-villes-grid__num {
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 300;
    color: var(--ri-color-accent);
    letter-spacing: 0.04em;
}

.rol-immo-villes-grid__name {
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 400;
    color: var(--ri-color-primary);
    line-height: 1.2;
}

.rol-immo-villes-grid__link:hover .rol-immo-villes-grid__name {
    color: var(--ri-color-accent);
}

.rol-immo-villes-grid__count {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
}

.rol-immo-villes-grid__arrow {
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    color: var(--ri-color-accent);
    transition: transform var(--ri-transition);
}

.rol-immo-villes-grid__link:hover .rol-immo-villes-grid__arrow {
    transform: translateX(4px);
}

@media (max-width: 600px) {
    .rol-immo-villes-grid__link {
        grid-template-columns: 40px 1fr auto;
    }
    .rol-immo-villes-grid__count {
        grid-column: 1 / -1;
        margin-top: 4px;
    }
    .rol-immo-villes-grid__arrow {
        display: none;
    }
}

/* Compteur (shortcode) -------------------------------------------- */

.rol-immo-count {
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-weight: 400;
    color: var(--ri-color-primary);
}

/* Section "Biens similaires" (full-width sous le single) ---------- */

.rol-immo-similar {
    margin: clamp(60px, 8vw, 120px) 0 0;
    padding: clamp(60px, 8vw, 120px) 0 0;
    border-top: 1px solid var(--ri-color-line);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ri-color-text);
}

.rol-immo-similar__eyebrow {
    margin: 0 0 14px;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--ri-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ri-color-text-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.rol-immo-similar__eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--ri-color-accent);
    flex-shrink: 0;
}

.rol-immo-similar__title {
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--ri-color-primary);
    margin: 0 0 clamp(40px, 5vw, 64px);
    letter-spacing: 0.005em;
}

.rol-immo-similar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--ri-grid-gap-h);
    row-gap: var(--ri-grid-gap-v);
}

.rol-immo-similar__item {
    margin: 0;
}

/* Note : les overrides specifiques de couleur et font-weight pour les
   cards de la section "Biens similaires" ont ete propages aux regles
   globales `.rol-immo-card__excerpt`, `.rol-immo-card__facts` et
   `.rol-immo-card__price` (cf. plus haut dans le fichier). Resultat :
   toutes les grilles (archive, shortcodes, similaires) partagent le
   meme rendu editorial. */

@media (max-width: 1024px) {
    .rol-immo-similar__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .rol-immo-similar__list {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Etat vide (no results) — partagé archive + shortcodes
   ============================================================ */

.rol-immo-empty {
    text-align: center;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 40px);
    margin: clamp(24px, 3vw, 40px) auto;
    max-width: 60ch;
    border: 1px solid var(--ri-color-line);
    background-color: var(--ri-color-surface-soft);
}

.rol-immo-empty__message {
    margin: 0 0 12px;
    font-family: var(--ri-font-serif), Georgia, "Times New Roman", serif;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    line-height: 1.3;
    color: var(--ri-color-text);
}

.rol-immo-empty__hint {
    margin: 0 0 clamp(20px, 2.5vw, 32px);
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ri-color-text-soft);
    max-width: 48ch;
    margin-inline: auto;
}

.rol-immo-empty__cta {
    display: inline-block;
    padding: 14px 32px;
    background: var(--ri-color-primary);
    color: var(--ri-color-surface);
    text-decoration: none;
    font-family: var(--ri-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background var(--ri-transition);
    margin-top: 8px;
}

.rol-immo-empty__cta:hover,
.rol-immo-empty__cta:focus {
    background: var(--ri-color-accent);
    color: var(--ri-color-surface);
}

/* Variante "recent" : pas de bordure (s'integre dans une section Divi). */
.rol-immo-empty--recent {
    border: 0;
    background-color: transparent;
    padding-block: clamp(24px, 4vw, 56px);
}

/* ============================================================
   Negociateurs (CPT Agent) — archive + single
   ============================================================ */

/* Archive "L'equipe" — grille de cards agent ---------------- */

.rol-immo-archive--agents {
    /* Reutilise la base .rol-immo-archive ; ajustements specifiques. */
}

.rol-immo-archive__grid--agents {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
}

@media (max-width: 1024px) {
    .rol-immo-archive__grid--agents {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .rol-immo-archive__grid--agents {
        grid-template-columns: 1fr;
    }
}

/* Card agent (utilisee dans archive + shortcode futur) ------ */

.rol-immo-agent-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rol-immo-agent-card__media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--rol-immo-color-surface-alt, #f0eee9);
}

.rol-immo-agent-card__photo {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s ease;
}

.rol-immo-agent-card__media:hover .rol-immo-agent-card__photo {
    transform: scale(1.03);
}

.rol-immo-agent-card__photo--placeholder {
    background-color: var(--rol-immo-color-surface-alt, #e5e1d8);
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.08) 100%);
}

.rol-immo-agent-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rol-immo-agent-card__role {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rol-immo-color-muted, #7a7a7a);
}

.rol-immo-agent-card__name {
    margin: 0;
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-size: clamp(1.4rem, 1.8vw, 1.6rem);
    font-weight: 500;
    line-height: 1.2;
}

.rol-immo-agent-card__name a {
    color: inherit;
    text-decoration: none;
}

.rol-immo-agent-card__name a:hover {
    color: var(--rol-immo-color-accent, #b49362);
}

.rol-immo-agent-card__contact {
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
}

.rol-immo-agent-card__phone,
.rol-immo-agent-card__email {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.rol-immo-agent-card__phone:hover,
.rol-immo-agent-card__email:hover {
    color: var(--rol-immo-color-accent, #b49362);
}

/* Single agent — layout 2 col ------------------------------ */

.rol-immo-agent {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px) clamp(40px, 6vw, 100px);
}

.rol-immo-agent__header {
    padding: clamp(16px, 2vw, 24px) 0;
}

.rol-immo-agent__breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rol-immo-color-muted, #7a7a7a);
}

.rol-immo-agent__breadcrumb-item:not(:last-child)::after {
    content: "›";
    margin-left: 12px;
    color: var(--rol-immo-color-muted, #7a7a7a);
    opacity: 0.6;
}

.rol-immo-agent__breadcrumb-link {
    color: inherit;
    text-decoration: none;
}

.rol-immo-agent__breadcrumb-link:hover {
    color: var(--rol-immo-color-accent, #b49362);
}

.rol-immo-agent__breadcrumb-item--current {
    color: var(--rol-immo-color-primary, currentColor);
    font-weight: 500;
}

.rol-immo-agent__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(32px, 4vw, 64px);
    margin-top: clamp(20px, 3vw, 40px);
}

@media (max-width: 1024px) {
    .rol-immo-agent__layout {
        grid-template-columns: 1fr;
    }
}

.rol-immo-agent__hero {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    padding-bottom: clamp(24px, 3vw, 40px);
    border-bottom: 1px solid var(--rol-immo-color-divider, rgba(0, 0, 0, 0.1));
}

@media (max-width: 600px) {
    .rol-immo-agent__hero {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
}

.rol-immo-agent__photo {
    display: block;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--rol-immo-color-surface-alt, #f0eee9);
}

.rol-immo-agent__identity {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rol-immo-agent__role {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rol-immo-color-muted, #7a7a7a);
}

.rol-immo-agent__name {
    margin: 0;
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 500;
    line-height: 1.1;
}

.rol-immo-agent__section {
    margin-top: clamp(28px, 3.5vw, 48px);
}

.rol-immo-agent__section-eyebrow {
    margin: 0 0 12px;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rol-immo-color-muted, #7a7a7a);
}

.rol-immo-agent__section-title {
    margin: 0 0 clamp(16px, 2vw, 24px);
    font-family: var(--ri-font-display), Georgia, "Times New Roman", serif;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 500;
    line-height: 1.2;
}

.rol-immo-agent__content {
    max-width: 70ch;
    line-height: 1.7;
}

.rol-immo-agent__content p {
    margin: 0 0 1em;
}

/* Sidebar contact direct */

.rol-immo-agent__sidebar {
    position: sticky;
    top: clamp(16px, 2vw, 32px);
    align-self: start;
}

@media (max-width: 1024px) {
    .rol-immo-agent__sidebar {
        position: static;
    }
}

.rol-immo-agent__contact-card {
    padding: clamp(20px, 2.5vw, 32px);
    background-color: var(--rol-immo-color-surface-alt, #f7f5f1);
    border: 1px solid var(--rol-immo-color-divider, rgba(0, 0, 0, 0.08));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rol-immo-agent__contact-eyebrow {
    margin: 0 0 8px;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rol-immo-color-muted, #7a7a7a);
}

.rol-immo-agent__contact-link {
    display: block;
    padding: 12px 16px;
    background-color: var(--rol-immo-color-primary, #212649);
    color: var(--rol-immo-color-on-primary, #fff);
    text-decoration: none;
    text-align: center;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.rol-immo-agent__contact-link:hover {
    background-color: var(--rol-immo-color-accent, #b49362);
    color: var(--rol-immo-color-on-accent, #fff);
}

.rol-immo-agent__contact-link--email {
    background-color: transparent;
    color: var(--rol-immo-color-primary, #212649);
    border: 1px solid var(--rol-immo-color-primary, #212649);
}

.rol-immo-agent__contact-link--email:hover {
    background-color: var(--rol-immo-color-primary, #212649);
    color: var(--rol-immo-color-on-primary, #fff);
    border-color: var(--rol-immo-color-primary, #212649);
}