/* ==========================================================================
   Charte Benet Immobilier
   ==========================================================================

   Couleurs relevees sur www.benet-immobilier.com (css_0_fr.css) :
     #1a3e77  titres h2 et adresses
     #17559b  fond de l'element de menu actif
     #ffe600  fond du bouton de recherche - l'action principale du site
     #1ab2cb  liens du pied de page

   Le jaune ne tient que 1,27:1 sur blanc : il ne sert jamais de couleur de
   texte, uniquement de fond avec du bleu marine dessus (11,7:1). Le bleu
   #17559b tient 7,5:1 sur blanc et porte donc les liens et le prix.
   ========================================================================== */

.annonce-detail-6 {
    --a6-accent: #17559b;          /* 7,5:1 sur blanc */
    --a6-accent-hover: #12406f;
    --a6-accent-ink: #ffffff;      /* 7,5:1 sur l'accent */
    --a6-accent-soft: #e8eff7;
    --a6-accent-line: #b9cde4;

    --a6-ink: #16233c;             /* 15,7:1 sur blanc */
    --a6-ink-2: #44546f;           /*  7,7:1 sur blanc */
    --a6-ink-3: #5f6f8a;           /*  5,1:1 sur blanc */

    --a6-surface: #ffffff;
    --a6-surface-2: #f3f6fa;
    --a6-surface-3: #e7edf5;
    --a6-line: #d3ddea;

    --a6-focus: #11274b;

    /* Secondaire de la marque, reserve aux fonds */
    --a6-jaune: #ffe600;
    --a6-jaune-ink: #11274b;       /* 11,7:1 sur le jaune */
}

/* L'action principale reprend le bouton de recherche du site : fond jaune,
   texte bleu marine. Les boutons secondaires restent en contour. */
.annonce-detail-6 .a6-btn--block {
    background: var(--a6-jaune);
    color: var(--a6-jaune-ink);
    border-color: #e6cf00;
}

.annonce-detail-6 .a6-btn--block:hover,
.annonce-detail-6 .a6-btn--block:focus-visible {
    background: #f2d900;
    color: var(--a6-jaune-ink);
}

/* Titres de section a la couleur des h2 du site. */
.annonce-detail-6 .a6-section-title,
.annonce-detail-6 .a6-panel-title {
    color: #1a3e77;
}

/* ==========================================================================
   Complement de annonce-detail-6.css pour les visuels autonomes
   (VisuelVenteHektor-cli.php et VisuelLocationHektor-cli.php).

   La feuille de base suppose Bootstrap 5.3 charge a cote pour la modale de la
   phototheque, et le noyau websee4 pour l'echelle DPE/GES (images
   /images/annonce/dpe/*.webp). Un visuel genere n'a ni l'un ni l'autre : ce
   fichier fournit uniquement ce qui manque, avec les memes variables --a6-*.

   Rien ici ne redefinit une regle de la feuille de base.

   Accessibilite, dans la continuite du gabarit 6 :
   - la classe energetique n'est jamais portee par la seule couleur : la lettre
     et la valeur chiffrée sont ecrites en toutes lettres a cote de la barre ;
   - cibles tactiles >= 44x44 px dans la modale ;
   - rendu conserve en contraste force et en impression.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page autonome
   -------------------------------------------------------------------------- */

body {
    margin: 0;
    padding: 2rem 0 4rem;
    background: #f5f7fa;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Modale phototheque : coquille normalement fournie par Bootstrap
   -------------------------------------------------------------------------- */

.annonce-detail-6-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 15, 20, .8);
}

.annonce-detail-6-modal[hidden] {
    display: none;
}

.annonce-detail-6-modal .modal-content {
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    max-height: 92vh;
    overflow: hidden;
}

.annonce-detail-6-modal .modal-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
}

.annonce-detail-6-modal .btn-close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    filter: none;
}

.annonce-detail-6-modal .a6-modal-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* --------------------------------------------------------------------------
   2 bis. Vignettes : ancres fancyBox
   La visionneuse est celle du site (fancyBox 2.1.5, charge par index.inc.php).
   La tuile n'est plus un <button> mais un <a> : on neutralise le soulignement
   et la couleur de lien, que .a6-tile ne prevoyait pas.
   -------------------------------------------------------------------------- */

.annonce-detail-6 a.a6-tile {
    text-decoration: none;
    color: inherit;
}

/* Ancres des photos au-dela de la mosaique : presentes pour que fancyBox les
   inclue dans la galerie, jamais affichees ni atteignables au clavier. */
.annonce-detail-6 .a6-gallery-reste {
    display: none;
}

/* --------------------------------------------------------------------------
   3. Echelle DPE / GES
   -------------------------------------------------------------------------- */

.annonce-detail-6 .a6-scale {
    flex: 1 1 18rem;
    min-width: 0;
    margin: 0;
}

.annonce-detail-6 .a6-scale-title {
    margin: 0 0 .6rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--a6-ink);
}

.annonce-detail-6 .a6-scale-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.annonce-detail-6 .a6-scale-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .12rem 0;
    color: var(--a6-ink-2);
}

.annonce-detail-6 .a6-scale-letter {
    flex: none;
    width: 1.4rem;
    font-weight: 700;
    text-align: center;
    color: var(--a6-ink-2);
}

.annonce-detail-6 .a6-scale-bar {
    display: block;
    flex: none;
    height: 1.1rem;
    border-radius: 0 3px 3px 0;
    background: var(--a6-surface-3);
}

.annonce-detail-6 .a6-scale-value {
    min-width: 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--a6-ink);
}

/* Ligne active : lettre en gras, valeur ecrite, pastille de reperage. */
.annonce-detail-6 .a6-scale-row[aria-current="true"] .a6-scale-letter {
    color: var(--a6-ink);
    font-size: 1.05rem;
}

.annonce-detail-6 .a6-scale-row[aria-current="true"] .a6-scale-bar {
    outline: 2px solid var(--a6-ink);
    outline-offset: 1px;
}

/* Largeurs croissantes A -> G, plafonnees a ~62 % pour laisser la place a la
   valeur ecrite en clair sur la ligne active. */
.annonce-detail-6 .a6-scale-row:nth-child(1) .a6-scale-bar { width: 26%; }
.annonce-detail-6 .a6-scale-row:nth-child(2) .a6-scale-bar { width: 32%; }
.annonce-detail-6 .a6-scale-row:nth-child(3) .a6-scale-bar { width: 38%; }
.annonce-detail-6 .a6-scale-row:nth-child(4) .a6-scale-bar { width: 44%; }
.annonce-detail-6 .a6-scale-row:nth-child(5) .a6-scale-bar { width: 50%; }
.annonce-detail-6 .a6-scale-row:nth-child(6) .a6-scale-bar { width: 56%; }
.annonce-detail-6 .a6-scale-row:nth-child(7) .a6-scale-bar { width: 62%; }

/* Palette officielle du DPE */
.annonce-detail-6 .a6-scale--dpe .a6-scale-row:nth-child(1) .a6-scale-bar { background: #319834; }
.annonce-detail-6 .a6-scale--dpe .a6-scale-row:nth-child(2) .a6-scale-bar { background: #33cc31; }
.annonce-detail-6 .a6-scale--dpe .a6-scale-row:nth-child(3) .a6-scale-bar { background: #cbfc34; }
.annonce-detail-6 .a6-scale--dpe .a6-scale-row:nth-child(4) .a6-scale-bar { background: #fbfe06; }
.annonce-detail-6 .a6-scale--dpe .a6-scale-row:nth-child(5) .a6-scale-bar { background: #fbcc05; }
.annonce-detail-6 .a6-scale--dpe .a6-scale-row:nth-child(6) .a6-scale-bar { background: #fc9935; }
.annonce-detail-6 .a6-scale--dpe .a6-scale-row:nth-child(7) .a6-scale-bar { background: #fc0205; }

/* Palette officielle des emissions de GES */
.annonce-detail-6 .a6-scale--ges .a6-scale-row:nth-child(1) .a6-scale-bar { background: #f2eef6; }
.annonce-detail-6 .a6-scale--ges .a6-scale-row:nth-child(2) .a6-scale-bar { background: #e3d9ec; }
.annonce-detail-6 .a6-scale--ges .a6-scale-row:nth-child(3) .a6-scale-bar { background: #cdbcdd; }
.annonce-detail-6 .a6-scale--ges .a6-scale-row:nth-child(4) .a6-scale-bar { background: #b79ecd; }
.annonce-detail-6 .a6-scale--ges .a6-scale-row:nth-child(5) .a6-scale-bar { background: #9f80bd; }
.annonce-detail-6 .a6-scale--ges .a6-scale-row:nth-child(6) .a6-scale-bar { background: #8763ad; }
.annonce-detail-6 .a6-scale--ges .a6-scale-row:nth-child(7) .a6-scale-bar { background: #6f469d; }

/* --------------------------------------------------------------------------
   4. Simulateur de mensualites
   -------------------------------------------------------------------------- */

.annonce-detail-6 .a6-sim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

.annonce-detail-6 .a6-sim-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.annonce-detail-6 .a6-sim-field span {
    font-size: .85rem;
    font-weight: 600;
    color: var(--a6-ink-2);
}

.annonce-detail-6 .a6-sim-field input {
    min-height: 44px;
    padding: .6rem .85rem;
    border: 1px solid var(--a6-line);
    border-radius: var(--a6-radius-sm);
    background: var(--a6-surface);
    color: var(--a6-ink);
    font: inherit;
}

.annonce-detail-6 .a6-sim-result {
    margin: 1rem 0 0;
    padding: .9rem 1.1rem;
    border-radius: var(--a6-radius-sm);
    background: var(--a6-accent-soft);
    border: 1px solid var(--a6-accent-line);
    color: #0b4438;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Carte
   -------------------------------------------------------------------------- */

.annonce-detail-6 .a6-map iframe {
    display: block;
    width: 100%;
    height: 340px;
    border: 0;
}

/* --------------------------------------------------------------------------
   6. Modes d'affichage
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
    .annonce-detail-6 .a6-scale-bar {
        border: 1px solid CanvasText;
    }

    .annonce-detail-6 .a6-scale-row[aria-current="true"] .a6-scale-bar {
        outline: 2px solid Highlight;
    }
}

@media print {
    body {
        padding: 0;
        background: #fff;
    }

    .annonce-detail-6-modal,
    .annonce-detail-6 .a6-sim-grid {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   Caracteristiques : sous-rubriques en cartes, valeurs en grille
   -------------------------------------------------------------------------- */

.annonce-detail-6 .a6-groups {
    display: grid;
    gap: .85rem;
}

.annonce-detail-6 .a6-group {
    padding: 1rem 1.1rem 1.1rem;
    background: var(--a6-surface-2);
    border: 1px solid var(--a6-line);
    border-radius: var(--a6-radius-sm);
}

/* Le titre de rubrique porte un repere colore : il reste identifiable par sa
   graisse et sa position si la couleur ne passe pas (RGAA 3.1). */
.annonce-detail-6 .a6-group-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .85rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--a6-ink-2);
}

.annonce-detail-6 .a6-group-title::before {
    content: "";
    flex: 0 0 auto;
    width: .2rem;
    height: .95rem;
    border-radius: 2px;
    background: var(--a6-accent);
}

/* a6-cells, et non a6-grid : ce dernier nomme deja le conteneur deux colonnes
   de la page (contenu + colonne laterale) dans annonce-detail-6.css. */
.annonce-detail-6 .a6-cells {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: .8rem 1.4rem;
    margin: 0;
}

.annonce-detail-6 .a6-cell {
    min-width: 0;
}

.annonce-detail-6 .a6-cell-label {
    margin: 0;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--a6-ink-3);
}

.annonce-detail-6 .a6-cell-value {
    margin: .1rem 0 0;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--a6-ink);
    overflow-wrap: break-word;
}

.annonce-detail-6 .a6-cell-value a {
    color: var(--a6-accent);
}

@media (min-width: 40rem) {
    .annonce-detail-6 .a6-group {
        padding: 1.15rem 1.3rem 1.25rem;
    }
}

/* Le mode contraste force supprime les fonds : la carte doit rester delimitee. */
@media (forced-colors: active) {
    .annonce-detail-6 .a6-group {
        border: 1px solid CanvasText;
    }
    .annonce-detail-6 .a6-group-title::before {
        background: CanvasText;
    }
}

@media print {
    .annonce-detail-6 .a6-group {
        background: transparent;
        border: 1px solid #999;
        break-inside: avoid;
    }
}

/* --------------------------------------------------------------------------
   Mentions reglementaires du DPE
   -------------------------------------------------------------------------- */

/* Article R126-24 : police au moins egale a celle du texte de l'annonce.
   Elle est ici legerement superieure, jamais inferieure. */
.annonce-detail-6 .a6-energy-excessive {
    margin: 0 0 1.1rem;
    padding: .7rem .95rem;
    font-size: 1.02em;
    font-weight: 700;
    color: #7a1414;
    background: #fdeceb;
    border: 1px solid #e5a9a4;
    border-left: 4px solid #c0362c;
    border-radius: var(--a6-radius-sm);
}

.annonce-detail-6 .a6-energy-cost {
    margin: 1.1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--a6-line);
    font-size: .95rem;
    color: var(--a6-ink-2);
}

/* Information des acquereurs et locataires sur les risques (art. R125-25 du
   code de l'environnement) : presente sur toutes les annonces. */
.annonce-detail-6 .a6-legal {
    margin: 1.75rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--a6-line);
    font-size: .875rem;
    line-height: 1.6;
    color: var(--a6-ink-2);
}

.annonce-detail-6 .a6-legal a {
    color: var(--a6-accent);
}

@media print {
    .annonce-detail-6 .a6-energy-excessive {
        border: 1px solid #000;
        background: transparent;
        color: #000;
    }
}


/* --------------------------------------------------------------------------
   Performance energetique : echelle sur une ligne
   -------------------------------------------------------------------------- */

.annonce-detail-6 .a6-bands {
    display: grid;
    gap: 1.1rem;
}

@media (min-width: 48rem) {
    .annonce-detail-6 .a6-bands {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem;
    }
}

.annonce-detail-6 .a6-band-title {
    margin: 0 0 .5rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--a6-ink);
}

.annonce-detail-6 .a6-band-scale {
    display: flex;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.annonce-detail-6 .a6-band-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.35rem;
    border-radius: 3px;
    font-weight: 700;
    font-size: .95rem;
    color: #16202c;
}

/* La classe retenue est signalee par trois moyens cumules, jamais par la seule
   couleur (RGAA 3.1) : un cadre epais, un repere triangulaire et le texte
   « Classe X » sous l'echelle. */
.annonce-detail-6 .a6-band-step.is-current {
    outline: 3px solid var(--a6-ink);
    outline-offset: 1px;
    z-index: 1;
}

.annonce-detail-6 .a6-band-step.is-current::after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--a6-ink);
}

.annonce-detail-6 .a6-band-value {
    margin: 1rem 0 0;
    font-size: .95rem;
    color: var(--a6-ink-2);
}

.annonce-detail-6 .a6-band-value strong {
    color: var(--a6-ink);
}

/* Couleurs reglementaires, identiques a celles des etiquettes officielles. */
.annonce-detail-6 .a6-band--dpe .a6-band-step:nth-child(1) { background: #319834; }
.annonce-detail-6 .a6-band--dpe .a6-band-step:nth-child(2) { background: #33cc31; }
.annonce-detail-6 .a6-band--dpe .a6-band-step:nth-child(3) { background: #cbfc34; }
.annonce-detail-6 .a6-band--dpe .a6-band-step:nth-child(4) { background: #fbfe06; }
.annonce-detail-6 .a6-band--dpe .a6-band-step:nth-child(5) { background: #fbcc05; }
.annonce-detail-6 .a6-band--dpe .a6-band-step:nth-child(6) { background: #fc9935; }
.annonce-detail-6 .a6-band--dpe .a6-band-step:nth-child(7) { background: #fc0205; }

.annonce-detail-6 .a6-band--ges .a6-band-step:nth-child(1) { background: #f2eef6; }
.annonce-detail-6 .a6-band--ges .a6-band-step:nth-child(2) { background: #e3d9ec; }
.annonce-detail-6 .a6-band--ges .a6-band-step:nth-child(3) { background: #cdbcdd; }
.annonce-detail-6 .a6-band--ges .a6-band-step:nth-child(4) { background: #b79ecd; }
.annonce-detail-6 .a6-band--ges .a6-band-step:nth-child(5) { background: #9f80bd; }
.annonce-detail-6 .a6-band--ges .a6-band-step:nth-child(6) { background: #8763ad; }
/* Blanc sur les deux teintes les plus sombres : le noir n'y tient pas 4,5:1. */
.annonce-detail-6 .a6-band--ges .a6-band-step:nth-child(7) { background: #6f469d; color: #fff; }
.annonce-detail-6 .a6-band--ges .a6-band-step:nth-child(6) { color: #fff; }

.annonce-detail-6 .a6-band-more {
    margin: 1.2rem 0 0;
}

/* --------------------------------------------------------------------------
   Modale des etiquettes officielles
   -------------------------------------------------------------------------- */

.annonce-detail-6-modal.a6-dpe-modal[hidden] { display: none; }

.annonce-detail-6-modal.a6-dpe-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 16, 22, .72);
}

.annonce-detail-6-modal.a6-dpe-modal .modal-content {
    max-width: 60rem;
    max-height: 92vh;
    overflow-y: auto;
    background: #fff;
    border-radius: var(--a6-radius-sm);
    padding: 1.2rem 1.4rem 1.6rem;
}

.annonce-detail-6-modal.a6-dpe-modal .a6-dpe-body {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.annonce-detail-6 .a6-dpe-figure,
.a6-dpe-modal .a6-dpe-figure {
    margin: 0;
    max-width: 100%;
}

.a6-dpe-modal .a6-dpe-figure figcaption {
    margin-top: .6rem;
    font-size: .85rem;
    color: #4a5b6e;
    max-width: 22rem;
}

/* Les images officielles portent leur propre mise en page ; on evite seulement
   qu'elles debordent sur petit ecran. */
.a6-dpe-modal .annonce_dpe img,
.a6-dpe-modal .annonce_ges img { max-width: 100%; height: auto; }

body.a6-modal-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Formulaire « Je suis interesse(e) »
   -------------------------------------------------------------------------- */

.annonce-detail-6 .a6-field {
    margin: 0 0 .8rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.annonce-detail-6 .a6-field label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--a6-ink);
}

.annonce-detail-6 .a6-field input,
.annonce-detail-6 .a6-field textarea {
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    font-size: .95rem;
    color: var(--a6-ink);
    background: var(--a6-surface);
    border: 1px solid var(--a6-line);
    border-radius: var(--a6-radius-sm);
}

.annonce-detail-6 .a6-field input:focus-visible,
.annonce-detail-6 .a6-field textarea:focus-visible {
    outline: 2px solid var(--a6-focus);
    outline-offset: 1px;
}

.annonce-detail-6 .a6-form-obligatoire,
.annonce-detail-6 .a6-form-retour {
    margin: .4rem 0 0;
    font-size: .82rem;
    color: var(--a6-ink-3);
}

.annonce-detail-6 .a6-form-retour:empty { margin: 0; }

.annonce-detail-6 .a6-panel-lien {
    margin: .9rem 0 0;
    font-size: .9rem;
}

@media (forced-colors: active) {
    .annonce-detail-6 .a6-band-step.is-current { outline: 3px solid CanvasText; }
    .annonce-detail-6 .a6-band-step.is-current::after { border-top-color: CanvasText; }
}

@media print {
    .annonce-detail-6 .a6-band-more,
    .annonce-detail-6 .a6-form,
    .annonce-detail-6-modal.a6-dpe-modal { display: none; }
}

/* --------------------------------------------------------------------------
   Modale DPE : fermeture
   La regle generale des modales met le « x » en blanc, pour la phototheque qui
   a un fond sombre. La modale des etiquettes a un fond clair : il y serait
   invisible.
   -------------------------------------------------------------------------- */

.annonce-detail-6-modal.a6-dpe-modal .modal-header {
    border-bottom: 1px solid var(--a6-line);
    justify-content: space-between;
}

.annonce-detail-6-modal.a6-dpe-modal .a6-modal-title {
    color: #1a3e77;
}

.annonce-detail-6-modal.a6-dpe-modal .btn-close {
    color: #16233c;
    filter: none;
    border-radius: 50%;
}

.annonce-detail-6-modal.a6-dpe-modal .btn-close:hover,
.annonce-detail-6-modal.a6-dpe-modal .btn-close:focus-visible {
    background: var(--a6-surface-3);
}

.annonce-detail-6-modal.a6-dpe-modal .a6-dpe-pied {
    margin: 1.4rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--a6-line);
    text-align: right;
}

/* --------------------------------------------------------------------------
   Carte : controle du defilement
   L'iframe OpenStreetMap capte la molette et zoome au lieu de laisser la page
   defiler. Un voile la recouvre tant qu'elle n'a pas ete activee d'un clic.
   -------------------------------------------------------------------------- */

.annonce-detail-6 .a6-map {
    position: relative;
}

.annonce-detail-6 .a6-map-voile {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 1rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.annonce-detail-6 .a6-map-voile-texte {
    padding: .5rem 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--a6-radius-pill);
    background: var(--a6-ink);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: var(--a6-shadow-sm);
}

.annonce-detail-6 .a6-map-voile:focus-visible {
    outline: 3px solid var(--a6-focus);
    outline-offset: -3px;
}

/* Carte activee : le voile disparait et l'iframe reprend la main. */
.annonce-detail-6 .a6-map.is-active .a6-map-voile {
    display: none;
}

@media print {
    .annonce-detail-6 .a6-map-voile { display: none; }
}