/* Pages d'annonces (lot B) : accueil, cartes, fiche, galerie et visionneuse, filtres, recherche, plan, quartiers.
   Charte (DECISIONS §3) : bleu nuit #0b1c2d, fond #f4f6f8, sections #f0f0f0, cartes blanches ; titres Playfair
   Display, texte Montserrat, boutons et étiquettes Open Sans Condensed 700 en majuscules.
   Les couleurs viennent des variables du lot G (base.css) quand elles existent, sinon des valeurs de repli.
   Section « Repli » : styles génériques à spécificité nulle (:where) pour que la page reste lisible avant
   l'intégration de base.css ; toute règle de base.css l'emporte sur eux. Aucun style en ligne (CSP). */

:root {
  --l-brand: var(--brand, #0b1c2d);
  --l-bg: var(--bg, #f4f6f8);
  --l-section: var(--section, #f0f0f0);
  --l-card: var(--card, #ffffff);
  --l-ink: var(--ink, #0b1c2d);
  --l-muted: var(--muted, #4a5866);
  --l-line: var(--line, #d8dee4);
  --l-accent: var(--accent, #a8875a);          /* filets et détails décoratifs seulement (contraste < 4,5:1) */
  --l-wa: #075e54;                              /* vert WhatsApp foncé : texte blanc à 7,6:1 */
  --l-wa-hover: #054c44;
  --l-offer: #8a5a00;
  --l-closed: #8d1c1c;
  --l-radius: 4px;
  --l-shadow: 0 1px 2px rgba(11, 28, 45, .08), 0 4px 16px rgba(11, 28, 45, .06);
  --l-title-font: "Playfair Display", Georgia, "Times New Roman", serif;
  --l-text-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --l-label-font: "Open Sans Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
}

/* ------------------------------------------------------------------------------------------------
   Repli (spécificité nulle) : remplacé par base.css du lot G
   ------------------------------------------------------------------------------------------------ */
:where(body) { margin: 0; background: var(--l-bg); color: var(--l-ink); font: 400 16px/1.6 var(--l-text-font); }
:where(img) { max-width: 100%; height: auto; }
:where(h1, h2, h3) { font-family: var(--l-title-font); font-weight: 700; line-height: 1.2; color: var(--l-brand); }
:where(a) { color: var(--l-brand); }
:where(.container) { box-sizing: border-box; width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
:where(.btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; box-sizing: border-box;
  min-height: 44px; padding: .55em 1.3em; border: 2px solid var(--l-brand); border-radius: var(--l-radius);
  font: 700 1rem/1.2 var(--l-label-font); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; background: transparent; color: var(--l-brand);
}
:where(.btn-primary) { background: var(--l-brand); color: #fff; }
:where(.btn-primary:hover, .btn-primary:focus-visible) { background: #1b3550; border-color: #1b3550; }
:where(.btn-outline:hover, .btn-outline:focus-visible) { background: var(--l-brand); color: #fff; }
:where(.btn-small) { min-height: 36px; padding: .3em .9em; font-size: .9rem; }
:where(.skip-link) { position: absolute; left: -9999px; }
:where(.skip-link:focus) { left: 16px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; }
:where(.breadcrumbs ol) { display: flex; flex-wrap: wrap; gap: .3em .6em; margin: 0; padding: 12px 0 0; list-style: none; font-size: .85rem; color: var(--l-muted); }
:where(.breadcrumbs li + li)::before { content: "›"; margin-right: .6em; }

/* ------------------------------------------------------------------------------------------------
   Éléments communs du lot
   ------------------------------------------------------------------------------------------------ */
.licon { flex: none; vertical-align: -.2em; }
[data-autosubmit-button][hidden], .l-field__hint[hidden] { display: none; }   /* l'attribut hidden l'emporte sur .btn */
.l-hero__title, .l-page-head h1, .listing__title, .l-section__head h2, .l-sell-block h2 { text-wrap: balance; }
.btn-wa { background: var(--l-wa); border-color: var(--l-wa); color: #fff; }
.btn-wa:hover, .btn-wa:focus-visible { background: var(--l-wa-hover); border-color: var(--l-wa-hover); color: #fff; }
.l-section { padding: 48px 0; }
.l-section--alt { background: var(--l-section); }
.l-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.l-section__head h2 { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2rem); }
.l-section__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; font-weight: 600; font-size: .95rem; }
.l-section__links a { text-underline-offset: .2em; }
.l-page-head { padding: 24px 0 8px; }
.l-page-head h1 { margin: 0 0 12px; font-size: clamp(1.75rem, 4.5vw, 2.6rem); }
.l-page-head__intro { max-width: 70ch; color: var(--l-muted); font-size: 1.05rem; }
.l-page-head__intro p { margin: 0 0 .6em; }
.l-page-head__links { margin: 8px 0 0; font-weight: 600; font-size: .95rem; }
.l-prose { max-width: 75ch; }
.l-prose h2 { font-size: 1.4rem; margin-top: 1.6em; }
.l-prose h3 { font-size: 1.15rem; }
/* Tableaux des textes éditoriaux (comparaison des quartiers, location à l'année ou vacances) : défilement horizontal
   dans le tableau lui-même, jamais de la page sur téléphone. Ombre au bord qui cache encore des colonnes (« scroll
   shadows », CSS seul) : les deux voiles blancs défilent avec le contenu (local) et recouvrent l'ombre fixe (scroll)
   quand le tableau est au bout ; l'en-tête est translucide pour laisser voir l'ombre. */
.l-prose { overflow-wrap: break-word; }
.l-prose table {
  display: block; width: fit-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.2em 0;
  font-size: .95rem;
  background:
    linear-gradient(to right, var(--l-card) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--l-card) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    linear-gradient(to right, rgba(11, 28, 45, .3), rgba(11, 28, 45, 0)) left center / 20px 100% no-repeat scroll,
    linear-gradient(to left, rgba(11, 28, 45, .3), rgba(11, 28, 45, 0)) right center / 20px 100% no-repeat scroll,
    var(--l-card);
}
.l-prose th, .l-prose td { padding: .5em .7em; border: 1px solid var(--l-line); text-align: left; vertical-align: top; }
.l-prose thead th { background: rgba(11, 28, 45, .06); }
@media (max-width: 599px) { .l-prose th, .l-prose td { padding: .45em .5em; } }
.l-block { padding: 28px 0; border-top: 1px solid var(--l-line); }
.l-block h2 { margin: 0 0 16px; font-size: 1.45rem; }
.l-block__note { margin: 12px 0 0; font-size: .85rem; color: var(--l-muted); }
.l-hint, .l-understood {
  margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--l-accent); background: var(--l-card);
  font-size: .92rem;
}
.l-empty { margin: 16px 0; padding: 24px; background: var(--l-card); border: 1px dashed var(--l-line); border-radius: var(--l-radius); }
.l-empty__title { margin-top: 0; font-weight: 600; }
.l-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 0; }
.l-table-wrap { max-width: 100%; overflow-x: auto; }
.l-badge {
  display: inline-block; padding: 3px 9px; border-radius: 2px; background: var(--l-brand); color: #fff;
  font: 700 .78rem/1.3 var(--l-label-font); letter-spacing: .05em; text-transform: uppercase;
}
.l-badge--offer { background: var(--l-offer); }
.l-badge--closed { background: var(--l-closed); }
.l-badge--construction { background: #fff; color: var(--l-brand); box-shadow: inset 0 0 0 1px var(--l-brand); }
.l-notice { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--l-radius); background: #fff6e5; border-left: 4px solid var(--l-offer); }
.l-notice--closed { background: #fdeeee; border-left-color: var(--l-closed); }

/* ------------------------------------------------------------------------------------------------
   Accueil : grande image voilée de blanc (comme le site actuel), puis sections
   ------------------------------------------------------------------------------------------------ */
.l-hero { position: relative; display: grid; place-items: center; min-height: clamp(380px, 62vh, 620px); overflow: hidden; background: var(--l-section); text-align: center; }
.l-hero__media { position: absolute; inset: 0; }
.l-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.l-hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .62); }
.l-hero__inner { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 900px; padding: 48px 16px; }
.l-hero__kicker { display: block; margin: 0 0 14px; font: 500 clamp(.8rem, 2.2vw, 1rem)/1.5 var(--l-text-font); letter-spacing: .08em; text-transform: uppercase; color: var(--l-brand); }
.l-hero__title { margin: 0 0 28px; font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 700; color: var(--l-brand); }
.l-hero__actions { margin: 0; }
.l-hero__actions .btn { background: rgba(255, 255, 255, .55); }
.l-hero__actions .btn:hover, .l-hero__actions .btn:focus-visible { background: var(--l-brand); color: #fff; }
.l-hero__credit { position: absolute; z-index: 1; right: 8px; bottom: 4px; margin: 0; font-size: .7rem; color: var(--l-ink); background: rgba(255, 255, 255, .75); padding: 1px 6px; }
.l-hero__credit a { color: inherit; }
.l-home-intro { padding-top: 28px; }
.l-home-intro p { max-width: 75ch; margin: 0 auto; text-align: center; color: var(--l-muted); }

.l-tiles { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.l-tiles--types, .l-tiles--areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) {
  .l-tiles--types { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
  .l-tiles--areas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
}
.l-tiles.l-tiles--large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-bottom: 24px; }
.l-tile {
  display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 18px;
  background: var(--l-card); border: 1px solid var(--l-line); border-radius: var(--l-radius); color: var(--l-ink);
  text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.l-tile:hover, .l-tile:focus-visible { border-color: var(--l-brand); box-shadow: var(--l-shadow); }
.l-tile__group { font: 700 .78rem/1.3 var(--l-label-font); letter-spacing: .06em; text-transform: uppercase; color: var(--l-muted); }
.l-tile__name { font: 700 1.2rem/1.25 var(--l-title-font); color: var(--l-brand); }
.l-tile__text { font-size: .9rem; color: var(--l-muted); }
.l-tile__count { margin-top: auto; padding-top: 6px; font-size: .88rem; font-weight: 600; }
.l-tile--area { padding: 0 0 16px; overflow: hidden; }
.l-tile--area > :not(.l-tile__media) { padding-inline: 16px; }
.l-tile__media { display: block; aspect-ratio: 3 / 2; margin-bottom: 10px; overflow: hidden; background: var(--l-section); }
.l-tile__media img { width: 100%; height: 100%; object-fit: cover; }
/* Quartier sans photo libre (apps/listings/photos.py) : bloc de même format aux couleurs du plan des quartiers (mer,
   trait de côte, terre), repère posé sur la côte (pointe à 21/24 de l'icône) ; jamais la photo d'un autre lieu. */
.l-tile__media--none {
  position: relative; color: var(--l-brand);
  background: linear-gradient(to bottom, #d9e8f1 0 56%, #b9a77f 56% calc(56% + 2px), #f3efe4 calc(56% + 2px));
}
.l-tile__media--none .licon { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -87.5%); }

.l-sell-block {
  display: grid; gap: 16px 32px; align-items: center; padding: 28px; background: var(--l-card);
  border: 1px solid var(--l-line); border-top: 3px solid var(--l-accent); border-radius: var(--l-radius);
}
.l-sell-block h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 1.8rem); }
.l-sell-block p { margin: 0; }
.l-sell-block__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) { .l-sell-block { grid-template-columns: 1fr auto; } }

.l-guide-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; list-style: none; }
.l-guide-item { padding: 18px; background: var(--l-card); border-radius: var(--l-radius); border: 1px solid var(--l-line); }
.l-guide-item h3 { margin: 0 0 8px; font-size: 1.15rem; }
.l-guide-item p { margin: 0 0 6px; font-size: .92rem; }
.l-guide-item .l-guide-item__date { color: var(--l-muted); font-size: .82rem; }

/* ------------------------------------------------------------------------------------------------
   Formulaires de recherche (accueil) et filtres (pages catalogue)
   ------------------------------------------------------------------------------------------------ */
.l-search-form, .l-filters { background: var(--l-card); border: 1px solid var(--l-line); border-radius: var(--l-radius); }
.l-search-form { padding: 20px; box-shadow: var(--l-shadow); }
.l-search-form__grid { display: grid; gap: 14px 16px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 600px) { .l-search-form__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .l-search-form__grid { grid-template-columns: repeat(5, 1fr); } .l-field--wide { grid-column: 1 / 5; } }
@media (min-width: 600px) and (max-width: 999px) { .l-field--wide { grid-column: 1 / -1; } }
.l-search-form__submit { width: 100%; }
.l-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.l-field label, .l-field-pair legend, .l-chips legend {
  font: 700 .82rem/1.3 var(--l-label-font); letter-spacing: .05em; text-transform: uppercase; color: var(--l-brand);
}
.l-field__unit { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--l-muted); }
.l-field input, .l-field select {
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #9aa6b2;
  border-radius: var(--l-radius); background: #fff; color: var(--l-ink); font: 400 1rem/1.3 var(--l-text-font);
}
.l-field input:focus-visible, .l-field select:focus-visible, .l-chip input:focus-visible + span { outline: 3px solid rgba(11, 28, 45, .35); outline-offset: 1px; }
.l-field__hint { margin: 0; font-size: .82rem; color: var(--l-muted); grid-column: 1 / -1; }
.l-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.l-field-pair legend { padding: 0; margin-bottom: 4px; }

.l-filters__summary {
  display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; list-style: none;
  font: 700 1rem/1.2 var(--l-label-font); letter-spacing: .05em; text-transform: uppercase; color: var(--l-brand);
}
.l-filters__summary::-webkit-details-marker { display: none; }
.l-filters__active { font: 400 .85rem/1 var(--l-text-font); text-transform: none; letter-spacing: 0; color: var(--l-muted); }
.l-filters__summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; }
.l-filters[open] > .l-filters__summary::after { content: "–"; }
.l-filters__form { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 16px; }
.l-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.l-chips legend { margin-bottom: 6px; }
.l-chip { position: relative; display: inline-flex; }
.l-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.l-chip span { padding: 6px 12px; border: 1px solid #9aa6b2; border-radius: 999px; font-size: .88rem; cursor: pointer; background: #fff; }
.l-chip input:checked + span { background: var(--l-brand); border-color: var(--l-brand); color: #fff; }
.l-check { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.l-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.l-filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.l-filters__reset { font-size: .9rem; }

/* ------------------------------------------------------------------------------------------------
   Pages catalogue et résultats
   ------------------------------------------------------------------------------------------------ */
.catalog__layout { display: grid; gap: 24px; align-items: start; padding-bottom: 32px; }
@media (min-width: 960px) { .catalog__layout { grid-template-columns: 300px minmax(0, 1fr); } }
.l-results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 16px; }
.l-results-bar__count { margin: 0; font-weight: 700; font-size: 1.05rem; }
.l-results-bar__sort { display: flex; align-items: center; gap: 8px; }
.l-results-bar__sort label { font: 700 .82rem/1 var(--l-label-font); letter-spacing: .05em; text-transform: uppercase; }
.l-results-bar__sort select { min-height: 40px; padding: 6px 8px; border: 1px solid #9aa6b2; border-radius: var(--l-radius); background: #fff; font: inherit; font-size: .92rem; max-width: 60vw; }
.l-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin: 28px 0 8px; }
.l-pager__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--l-brand); border-radius: var(--l-radius); text-decoration: none; font-weight: 600; }
.l-pager__current { color: var(--l-muted); font-size: .92rem; }
.l-map-toggle { margin-top: 24px; }
.l-map-toggle > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.l-link-list { padding: 20px 0; border-top: 1px solid var(--l-line); }
.l-link-list h2 { margin: 0 0 12px; font-size: 1.25rem; }
.l-link-list ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.l-link-list__count { color: var(--l-muted); font-size: .88rem; }
.catalog__text { padding: 24px 0; border-top: 1px solid var(--l-line); }

/* ------------------------------------------------------------------------------------------------
   Cartes de biens
   ------------------------------------------------------------------------------------------------ */
.l-cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.lcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--l-card);
  border: 1px solid var(--l-line); border-radius: var(--l-radius); box-shadow: var(--l-shadow); transition: box-shadow .15s, transform .15s;
}
.lcard:hover, .lcard:focus-within { box-shadow: 0 6px 24px rgba(11, 28, 45, .16); }
@media (prefers-reduced-motion: no-preference) { .lcard:hover { transform: translateY(-2px); } }
.lcard__media { position: relative; aspect-ratio: 4 / 3; background: var(--l-section); }
.lcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lcard__noimg { display: grid; place-items: center; height: 100%; color: #8995a1; }
.lcard__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lcard__photos { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 2px; background: rgba(11, 28, 45, .78); color: #fff; font-size: .8rem; }
.lcard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1; }
.lcard__price { margin: 0; font: 700 1.2rem/1.2 var(--l-text-font); color: var(--l-brand); }
.lcard__price-alt { margin: 0; font-size: .85rem; color: var(--l-muted); }
.lcard__title { margin: 2px 0 0; font: 600 1rem/1.35 var(--l-text-font); }
.lcard__title a { color: var(--l-ink); text-decoration: none; }
.lcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* toute la carte est cliquable */
.lcard__title a:focus-visible { outline: none; }
.lcard:focus-within { outline: 3px solid rgba(11, 28, 45, .45); outline-offset: 2px; }
.lcard__place { margin: 0; font-size: .88rem; color: var(--l-muted); }
.lcard__facts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 0; padding: 0; list-style: none; font-size: .88rem; }
.lcard__ref { margin: auto 0 0; padding-top: 8px; font: 700 .78rem/1 var(--l-label-font); letter-spacing: .06em; text-transform: uppercase; color: var(--l-muted); }
.lcard--closed .lcard__media img { filter: grayscale(.7); }

/* ------------------------------------------------------------------------------------------------
   Fiche d'un bien
   ------------------------------------------------------------------------------------------------ */
.listing { padding-bottom: 24px; }
.listing__head { padding: 20px 0 16px; }
.listing__kicker { margin: 0 0 6px; font: 700 .85rem/1.3 var(--l-label-font); letter-spacing: .06em; text-transform: uppercase; color: var(--l-muted); }
.listing__title { margin: 0 0 12px; font-size: clamp(1.6rem, 4.2vw, 2.4rem); }
.listing__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.listing__price { margin: 0; font: 700 clamp(1.35rem, 3.4vw, 1.7rem)/1.2 var(--l-text-font); color: var(--l-brand); }
.listing__badges { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.listing__ref { margin: 0; font-size: .88rem; color: var(--l-muted); }
.listing__quick { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.listing__quick .btn { flex: 1 1 200px; }
.listing__layout { display: grid; gap: 8px 40px; align-items: start; }
.listing__main > .l-gallery { margin-bottom: 20px; }
@media (min-width: 1000px) {
  .listing__layout { grid-template-columns: minmax(0, 1fr) 360px; }
  .listing__aside { position: sticky; top: 16px; }
  .listing__quick { display: none; }          /* l'encadré de contact est visible à droite des photos */
}
.l-facts { display: grid; grid-template-columns: 1fr; gap: 0 32px; margin: 0; }
@media (min-width: 640px) { .l-facts { grid-template-columns: 1fr 1fr; } }
.l-facts__row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--l-line); }
.l-facts dt { color: var(--l-muted); font-size: .92rem; }
.l-facts dd { margin: 0; text-align: right; font-weight: 600; }
.facts__row--reference dd { font-family: var(--l-label-font); letter-spacing: .05em; }
.l-amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.l-amenities__item { display: flex; gap: 8px; align-items: center; }
.l-amenities__item .licon { color: var(--l-wa); }
.l-amenities__absent { margin: 14px 0 0; font-size: .92rem; color: var(--l-muted); }
.l-rates { width: 100%; border-collapse: collapse; font-size: .95rem; }
.l-rates caption { text-align: left; font-weight: 600; padding-bottom: 8px; }
.l-rates th, .l-rates td { padding: 8px 10px; border-bottom: 1px solid var(--l-line); text-align: left; vertical-align: top; }
.l-rates thead th { font: 700 .82rem/1.2 var(--l-label-font); letter-spacing: .05em; text-transform: uppercase; }
.l-rates__season { font-weight: 400; color: var(--l-muted); font-size: .88rem; }
.l-media-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

.l-contact-box {
  padding: 22px; background: var(--l-card); border: 1px solid var(--l-line); border-top: 4px solid var(--l-brand);
  border-radius: var(--l-radius); box-shadow: var(--l-shadow);
}
.l-contact-box__title { margin: 0 0 8px; font-size: 1.35rem; }
.l-contact-box__price { margin: 0; font: 700 1.3rem/1.3 var(--l-text-font); color: var(--l-brand); }
.l-contact-box__ref { margin: 2px 0 12px; font: 700 .8rem/1 var(--l-label-font); letter-spacing: .06em; text-transform: uppercase; color: var(--l-muted); }
.l-contact-box__lead { margin: 0 0 14px; font-size: .92rem; }
.l-contact-box__actions { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.l-contact-box__actions .btn { width: 100%; }
.l-nowrap { white-space: nowrap; }
.l-contact-box .quick-inquiry { margin-top: 8px; }
.l-contact-box .quick-inquiry .btn { width: 100%; }

/* Galerie : grande photo + vignettes défilantes */
.l-gallery { margin: 0 0 8px; }
.l-gallery__main { position: relative; display: block; overflow: hidden; border-radius: var(--l-radius); background: var(--l-section); aspect-ratio: 16 / 10; }
.l-gallery__main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.l-gallery__count {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--l-radius); background: rgba(11, 28, 45, .82); color: #fff; font: 700 .85rem/1 var(--l-label-font);
  letter-spacing: .05em; text-transform: uppercase;
}
.l-gallery__thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(110px, 22%); gap: 8px; margin: 8px 0 0; padding: 0 0 6px;
  list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
@media (min-width: 900px) { .l-gallery__thumbs { grid-auto-columns: minmax(130px, 16%); } }
.l-gallery__thumbs li { scroll-snap-align: start; }
.l-gallery__thumbs a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--l-section); }
.l-gallery__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
.l-gallery__thumbs a:hover img, .l-gallery__thumbs a:focus-visible img { opacity: .82; }
.l-gallery--empty { display: grid; place-items: center; min-height: 180px; background: var(--l-section); border-radius: var(--l-radius); color: var(--l-muted); }

/* Visionneuse plein écran (<dialog>, static/js/listings.js) */
.l-viewer { box-sizing: border-box; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6, 15, 25, .97); color: #fff; }
.l-viewer::backdrop { background: rgba(6, 15, 25, .9); }
.l-viewer[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.l-viewer__stage { display: grid; place-items: center; min-height: 0; padding: 64px 12px 8px; touch-action: pan-y; }
.l-viewer__img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; user-select: none; }
.l-viewer__caption { margin: 0; padding: 8px 64px 16px; text-align: center; font-size: .9rem; }
.l-viewer__count { font-weight: 700; margin-right: 8px; }
.l-viewer__btn {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
}
.l-viewer__btn:hover, .l-viewer__btn:focus-visible { background: rgba(255, 255, 255, .3); }
.l-viewer__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.l-viewer__btn--prev { left: 10px; top: 50%; transform: translateY(-50%); }
.l-viewer__btn--next { right: 10px; top: 50%; transform: translateY(-50%); }
.l-viewer__btn--close { right: 10px; top: 10px; }
.l-viewer[data-single] .l-viewer__btn--prev, .l-viewer[data-single] .l-viewer__btn--next { display: none; }
html.viewer-open { overflow: hidden; }

/* Plan approximatif (SVG du serveur). Pas de hauteur maximale : le cadre garde toujours les proportions du dessin
   (plafonnée, la hauteur laissait sur ordinateur une bande de mer de chaque côté, terre coupée droit). Les noms
   trop proches sont décalés d'une ligne par apps/listings/maps.py (tailles ci-dessous recopiées là-bas). */
.lmap { margin: 0; }
.lmap__svg { display: block; box-sizing: border-box; width: 100%; height: auto; background: #d9e8f1; border: 1px solid var(--l-line); border-radius: var(--l-radius); }
.lmap__land { fill: #f3efe4; }
.lmap__coast { fill: none; stroke: #b9a77f; stroke-width: 2; }
.lmap__sea { fill: #4f6f86; font: italic 600 16px var(--l-text-font); }
.lmap__area { fill: rgba(11, 28, 45, .22); stroke: var(--l-brand); stroke-width: 1.5; }
.lmap__area.is-active { fill: rgba(168, 135, 90, .45); stroke: #6d5431; stroke-width: 2.5; }
a:hover > .lmap__area, a:focus > .lmap__area { fill: rgba(11, 28, 45, .4); }
.lmap__label { fill: var(--l-brand); font: 600 15px var(--l-text-font); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.lmap__label.is-current { font-weight: 800; text-decoration: underline; }
.lmap__scale { stroke: var(--l-brand); stroke-width: 2; fill: none; }
.lmap__scale-text { fill: var(--l-brand); font: 600 13px var(--l-text-font); }
.lmap--focused .lmap__label { font-size: 6px; stroke-width: 1.5px; }
.lmap--focused .lmap__sea { font-size: 6px; }
.lmap--focused .lmap__scale-text { font-size: 5px; }
/* Le texte du SVG suit l'échelle du dessin : tailles relevées sur les écrans étroits */
@media (max-width: 999px) {
  .lmap__label { font-size: 22px; stroke-width: 4px; }
  .lmap__sea { font-size: 22px; }
  .lmap__scale-text { font-size: 20px; }
}
@media (max-width: 599px) {
  .lmap__label { font-size: 34px; stroke-width: 5px; }
  .lmap__sea { font-size: 32px; }
  .lmap__scale-text { font-size: 30px; }
  .lmap--focused .lmap__label { font-size: 11px; stroke-width: 2.5px; }
  .lmap--focused .lmap__sea { font-size: 11px; }
  .lmap--focused .lmap__scale-text { font-size: 10px; }
}
.lmap--focused .lmap__scale, .lmap--focused .lmap__area { stroke-width: 1; }
.lmap--focused .lmap__coast { stroke-width: 1.2; }
.lmap__note { margin-top: 8px; font-size: .82rem; color: var(--l-muted); }

/* Quartiers */
.neighborhood__layout { display: grid; gap: 24px 40px; align-items: start; }
@media (min-width: 1000px) { .neighborhood__layout { grid-template-columns: minmax(0, 1fr) 380px; } }
.l-area-photo { margin: 0 0 20px; }
.l-area-photo img { display: block; width: 100%; border-radius: var(--l-radius); }
.l-area-photo figcaption { margin-top: 6px; font-size: .8rem; color: var(--l-muted); }
.neighborhood__aside .l-link-list { border-top: 0; }

/* Crédits photos */
.l-credits { width: 100%; border-collapse: collapse; background: var(--l-card); font-size: .92rem; }
.l-credits th, .l-credits td { padding: 10px; border-bottom: 1px solid var(--l-line); text-align: left; vertical-align: middle; }
.l-credits thead th { font: 700 .82rem/1.2 var(--l-label-font); letter-spacing: .05em; text-transform: uppercase; }
.l-credits tbody th { font-weight: 600; }
.l-credits tbody th img { display: block; margin-bottom: 6px; border-radius: 2px; }
.l-credits__changes { color: var(--l-muted); font-size: .82rem; }

/* Page 410 */
.gone .l-page-head { padding-bottom: 24px; }