:root {--blue:#0f766e;--blue2:#115e59;--dark:#101827;--text:#374151;--muted:#6b7280;--bg:#f5f7fb;--line:#e5e7eb;--white:#fff}
* {box-sizing:border-box;margin:0;padding:0}
body {font-family:Inter,Arial,sans-serif;color:var(--text);line-height:1.5;background:#fff}
a {text-decoration:none;color:inherit}
button,input {font:inherit}
.container {width:min(1180px,calc(100% - 40px));margin:auto}
header {height:72px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}
.nav {height:72px;display:flex;align-items:center;justify-content:space-between}
.logo {display:flex;align-items:center;gap:9px;font-size:22px;font-weight:800;color:var(--dark)}
.logo-icon {width:36px;height:36px;border-radius:10px;background:var(--blue);color:#fff;display:grid;place-items:center}
.navlinks {display:flex;gap:28px;font-size:14px;font-weight:700}
.navlinks a:hover {color:var(--blue)}
.actions {display:flex;gap:10px}
.btn {border:0;border-radius:10px;padding:11px 18px;font-weight:800;cursor:pointer}
.outline {background:#fff;border:1px solid var(--line)}
.primary {background:var(--blue);color:#fff}
.primary:hover {background:var(--blue2)}
.menu{display:none;align-items:center;justify-content:center;width:40px;height:40px;
  margin:-8px;border:0;background:none;color:var(--dark);cursor:pointer;border-radius:8px}
.menu:hover{background:var(--bg)}
.mobile-nav{display:none}
.hero {min-height:590px;color:#fff;display:flex;align-items:center;position:relative;overflow:hidden;background:#051025}
.hero::before {content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(5,16,37,.94),rgba(5,16,37,.70),rgba(5,16,37,.18))}
.hero-photos {position:absolute;inset:0;z-index:0}
/* Photo de bandeau : posée, sans animation. Un fondu enchaîné bougeait
   derrière le titre et le formulaire de recherche, qui sont ce que la page a
   à faire lire. */
.hero-photos img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .container {position:relative;z-index:2}
.hero-content {width:680px;padding:75px 0}
.badge {display:inline-block;padding:7px 12px;border:1px solid #ffffff33;background:#ffffff18;border-radius:30px;font-size:13px;margin-bottom:18px}
h1 span {color:#5eead4}
.lead {font-size:18px;color:#ffffffd9;max-width:600px;margin-bottom:30px}
.search {background:#fff;color:var(--text);padding:18px;border-radius:18px;box-shadow:0 20px 50px #0004}
.tabs {display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:15px}
.tab {padding-bottom:10px;font-size:14px;font-weight:800;color:var(--muted);cursor:pointer}
.tab.active {color:var(--blue);border-bottom:2px solid var(--blue)}
.searchgrid {display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:10px}
.field {border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.field label {display:block;font-size:10px;text-transform:uppercase;font-weight:800;color:var(--muted)}
.field input {width:100%;border:0;outline:0;background:transparent;color:var(--dark);font-size:14px}
.searchbtn {border:0;border-radius:10px;background:var(--blue);color:#fff;padding:0 22px;font-weight:800;cursor:pointer}
.trust {border-bottom:1px solid var(--line)}
.trustgrid {min-height:82px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px;align-items:center}
.trustitem {display:flex;gap:12px;align-items:center}
.icon {width:40px;height:40px;border-radius:11px;background:#f0fdfa;color:var(--blue);display:grid;place-items:center}
.trustitem strong {display:block;color:var(--dark);font-size:14px}
.trustitem span {font-size:12px;color:var(--muted)}
section {padding:75px 0}
.gray {background:var(--bg)}
.heading {display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}
.heading p {font-size:14px;color:var(--muted);margin-top:5px}
.view {color:var(--blue);font-weight:800;font-size:14px}
.cards {display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card {background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.2s}
.card:hover {transform:translateY(-4px);box-shadow:0 12px 30px #0f172a12}
.propimg {height:200px;background:#edf1f6;position:relative}
.propimg img {width:100%;height:100%;object-fit:cover}
.badge-tag {position:absolute;top:12px;left:12px;background:rgba(0,0,0,0.6);color:#fff;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700}
.cardbody {padding:20px}
.category {font-size:10px;color:var(--blue);font-weight:900;text-transform:uppercase}
.propname {font-size:18px;font-weight:900;color:var(--dark);margin:2px 0 6px}
.proploc {font-size:13px;color:var(--muted);margin-bottom:12px}
.specs {display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:18px}
.cardbottom {border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;align-items:center}
.price small {display:block;font-size:10px;color:var(--muted)}
.price strong {font-size:20px;color:var(--dark)}
.locations {display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:190px 190px;gap:15px}
.loc {position:relative;border-radius:16px;overflow:hidden;color:#fff}
.loc.large {grid-row:span 2}
.loc img {width:100%;height:100%;object-fit:cover;transition:.4s}
.loc:hover img {transform:scale(1.05)}
.loc:after {content:"";position:absolute;inset:0;background:linear-gradient(transparent,#000b)}
.loctxt {position:absolute;z-index:2;left:20px;bottom:18px}
.loctxt h3 {font-size:20px}
.loctxt span {font-size:12px;color:#ffffffd9}
.steps {display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.step {text-align:center;padding:20px}
.num {width:58px;height:58px;border-radius:50%;background:#f0fdfa;color:var(--blue);display:grid;place-items:center;margin:0 auto 15px;font-size:20px;font-weight:900}
.step h3 {color:var(--dark);margin-bottom:7px}
.step p {font-size:14px;color:var(--muted)}
.localgrid {display:grid;grid-template-columns:1.15fr .85fr;gap:45px;align-items:center}
.local p {font-size:15px;color:var(--muted);margin-bottom:13px}
.localinks {display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}
.loclink {background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:13px;font-weight:750}
.localphoto {height:350px;border-radius:20px;overflow:hidden}
.localphoto img {width:100%;height:100%;object-fit:cover}
.cta {padding:70px 0}
.ctabox {background:var(--dark);color:#fff;border-radius:22px;padding:50px;display:flex;justify-content:space-between;align-items:center;gap:25px}
.ctabox p {color:#aeb7c6;margin-top:5px}
.faq {max-width:850px;margin:auto}
.faqitem {border-bottom:1px solid var(--line);padding:19px 0}
.question {display:flex;justify-content:space-between;color:var(--dark);font-weight:800;cursor:pointer}
.answer {display:none;color:var(--muted);font-size:14px;margin-top:9px}
.faqitem.active .answer {display:block}
footer {background:#0c1220;color:#fff;padding:55px 0 22px}
.footergrid {display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px;padding-bottom:40px}
.footergrid p,.footergrid a {color:#929aaa;font-size:13px}
.footergrid p {max-width:290px;margin-top:10px}
.footercol h4 {font-size:14px;margin-bottom:14px}
.footercol a {display:block;margin-bottom:8px}
.bottom {border-top:1px solid #252c3a;padding-top:20px;color:#707989;font-size:12px;display:flex;justify-content:space-between}
button,input,select {font:inherit}
.breadcrumb {padding:20px 0;font-size:13px;color:var(--muted)}
.breadcrumb a:hover {color:var(--blue)}
.property-header {margin-bottom:25px}
.prop-title-row {display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.badge {display:inline-block;padding:5px 10px;background:#f0fdfa;color:var(--blue);border-radius:20px;font-size:11px;font-weight:800;text-transform:uppercase;margin-bottom:8px}
.location-text {font-size:14px;color:var(--muted)}
.header-price {text-align:right}
.header-price small {display:block;font-size:12px;color:var(--muted)}
.header-price strong {font-size:28px;color:var(--dark)}
.gallery {display:grid;grid-template-columns:2fr 1fr;grid-template-rows:220px 220px;gap:15px;margin-bottom:45px}
.gallery-main {grid-row:span 2;border-radius:16px;overflow:hidden}
.gallery-main img,.gallery-sub img {width:100%;height:100%;object-fit:cover;transition:.3s}
.gallery-main:hover img,.gallery-sub:hover img {transform:scale(1.02)}
.gallery-sub {border-radius:16px;overflow:hidden}
.content-grid {display:grid;grid-template-columns:1.6fr 1fr;gap:45px;align-items:start;margin-bottom:60px}
.section-block {margin-bottom:35px}
.section-block h3 {font-size:20px;color:var(--dark);margin-bottom:15px}
.specs-boxes {display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:25px}
.spec-box {background:var(--bg);padding:18px;border-radius:14px;border:1px solid var(--line);text-align:center}
.spec-box small {display:block;font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:700}
.spec-box strong {font-size:16px;color:var(--dark);margin-top:3px;display:block}
.description p {color:var(--muted);font-size:15px;margin-bottom:12px}
.amenities-list {display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:15px}
.amenity-item {display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text)}
.check-icon {width:24px;height:24px;border-radius:50%;background:#f0fdfa;color:var(--blue);display:grid;place-items:center;font-size:12px;font-weight:900}
.sidebar-card {background:#fff;border:1px solid var(--line);border-radius:20px;padding:25px;box-shadow:0 10px 30px #0f172a0a;position:sticky;top:95px}
.sidebar-price {margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.sidebar-price small {font-size:12px;color:var(--muted);display:block}
.sidebar-price strong {font-size:26px;color:var(--dark)}
.sidebar-price span {font-size:14px;color:var(--muted)}
.form-group {margin-bottom:14px}
.form-group label {display:block;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;margin-bottom:5px}
.form-group input,.form-group select {width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:0;font-size:14px;color:var(--dark);background:#fff}
.form-group input:focus,.form-group select:focus {border-color:var(--blue)}
.submit-btn {width:100%;margin-top:5px;padding:13px;font-size:15px}
.results-layout {display:grid;grid-template-columns:280px 1fr;gap:35px;align-items:start;margin-bottom:60px}
.filters-sidebar {background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:22px;position:sticky;top:95px}
.filters-sidebar h3 {margin-bottom:18px;display:flex;justify-content:space-between;align-items:center}
.filter-group {margin-bottom:20px}
.filter-group label {display:block;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.filter-group select, .filter-group input {width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:0;font-size:14px;color:var(--dark);background:#fff}
.filter-group select:focus, .filter-group input:focus {border-color:var(--blue)}
.reset-filters {font-size:12px;color:var(--blue);cursor:pointer;font-weight:700}
.results-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.results-count {font-size:14px;color:var(--muted)}
.cards-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.propimg {height:190px;background:#edf1f6;position:relative}
.cardbody {padding:18px}
.propname {font-size:17px;font-weight:900;color:var(--dark);margin:2px 0 4px}
.specs {display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:16px}
.cardbottom {border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;align-items:center}
.price strong {font-size:19px;color:var(--dark)}
.no-results {grid-column:span 2;text-align:center;padding:50px;color:var(--muted);font-size:15px;display:none}
.neighborhood-hero {position:relative;height:380px;border-radius:20px;overflow:hidden;display:flex;align-items:flex-end;padding:40px;margin-bottom:40px}
.neighborhood-hero img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
.neighborhood-hero::after {content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(16,24,39,0.85) 100%);z-index:2}
.hero-content {position:relative;z-index:3;color:#fff;max-width:700px}
.badge {display:inline-block;padding:5px 12px;background:rgba(15,118,110,0.85);color:#fff;border-radius:20px;font-size:11px;font-weight:800;text-transform:uppercase;margin-bottom:10px}
.neighborhood-hero p {font-size:15px;color:#d1d5db}
.stats-row {display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:50px}
.stat-card {background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
.stat-card small {display:block;font-size:12px;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:4px}
.stat-card strong {font-size:22px;color:var(--dark);letter-spacing:-.5px}
.section-block p {color:var(--muted);font-size:15px;margin-bottom:14px}
.vibe-list {display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:15px}
.vibe-item {display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text);font-weight:600}
.vibe-icon {width:24px;height:24px;border-radius:50%;background:#f0fdfa;color:var(--blue);display:grid;place-items:center;font-size:12px}
.sidebar-card h3 {font-size:18px;color:var(--dark);margin-bottom:8px}
.sidebar-card p {font-size:13px;color:var(--muted);margin-bottom:20px}
.form-group input,.form-group select,.form-group textarea {width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:0;font-size:14px;color:var(--dark);background:#fff}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {border-color:var(--blue)}
.neighborhood-properties {margin-top:60px;margin-bottom:70px}
.cards-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.propimg {height:180px;background:#edf1f6;position:relative}
.propname {font-size:16px;font-weight:900;color:var(--dark);margin:2px 0 4px}
.price strong {font-size:18px;color:var(--dark)}
body {font-family:Inter,Arial,sans-serif;color:var(--text);line-height:1.6;background:#fff}
.breadcrumb {padding:25px 0 10px;font-size:13px;color:var(--muted)}
.article-header {max-width:800px;margin:0 auto 40px;text-align:center}
.badge {display:inline-block;padding:5px 12px;background:#f0fdfa;color:var(--blue);border-radius:20px;font-size:12px;font-weight:800;text-transform:uppercase;margin-bottom:15px}
.article-meta {display:flex;justify-content:center;align-items:center;gap:15px;font-size:13px;color:var(--muted)}
.author-avatar {width:32px;height:32px;border-radius:50%;background:#edf1f6;overflow:hidden}
.author-avatar img {width:100%;height:100%;object-fit:cover}
.featured-image {max-width:1000px;margin:0 auto 50px;height:450px;border-radius:20px;overflow:hidden}
.featured-image img {width:100%;height:100%;object-fit:cover}
.article-layout {max-width:1100px;margin:0 auto 70px;display:grid;grid-template-columns:1fr 320px;gap:50px;align-items:start}
.article-content h3 {font-size:20px;color:var(--dark);margin:25px 0 10px}
.article-content p {font-size:16px;color:var(--text);margin-bottom:20px}
.article-content ul {margin:0 0 20px 20px;color:var(--text)}
.article-content li {margin-bottom:8px;font-size:16px}
.highlight-box {background:var(--bg);border-left:4px solid var(--blue);padding:22px;border-radius:0 12px 12px 0;margin:30px 0}
.highlight-box h4 {color:var(--dark);margin-bottom:8px;font-size:16px}
.highlight-box p {margin-bottom:0;font-size:14px;color:var(--muted)}
.toc-card {background:#fff;border:1px solid var(--line);border-radius:16px;padding:25px;position:sticky;top:95px;box-shadow:0 10px 30px #0f172a0a}
.toc-list {list-style:none}
.toc-list li {margin-bottom:10px}
.toc-list a {font-size:14px;color:var(--muted);font-weight:600}
.toc-list a:hover {color:var(--blue)}
.author-bio-box {background:var(--bg);border-radius:16px;padding:25px;margin-top:50px;display:flex;gap:20px;align-items:center}
.bio-avatar {width:70px;height:70px;border-radius:50%;overflow:hidden;flex-shrink:0}
.bio-avatar img {width:100%;height:100%;object-fit:cover}
.bio-info h4 {font-size:16px;color:var(--dark);margin-bottom:4px}
.bio-info p {font-size:13px;color:var(--muted);margin-bottom:0}
:root{
  --blue:#0f766e;--blue2:#115e59;--dark:#101827;--text:#374151;--muted:#6b7280;
  --bg:#f5f7fb;--line:#e5e7eb;--white:#fff;--error:#dc2626;--success:#15803d;

  /* Échelle typographique. Une seule suite de valeurs, pour que deux titres de
     même niveau aient la même taille d'une page à l'autre — h1 en avait cinq. */
  --text-2xs:11px; --text-xs:12px;  --text-sm:14px;  --text-base:16px;
  --text-lg:18px;  --text-xl:22px;  --text-2xl:26px;
  --text-h2:clamp(20px,1.9vw,25px);
  --text-h1:clamp(24px,2.5vw,31px);
  --text-hero:clamp(29px,3.4vw,42px);
  --lh-tight:1.08; --lh-title:1.2; --lh-body:1.6;
  --track-tight:-.025em; --track-title:-.015em;
}
.btn {border:0;border-radius:10px;padding:11px 18px;font-weight:800;cursor:pointer;transition:.2s}
.page-header {margin-bottom:40px;max-width:800px}
.badge {display:inline-block;padding:5px 12px;background:#f0fdfa;color:var(--blue);border-radius:20px;font-size:11px;font-weight:800;text-transform:uppercase;margin-bottom:10px}
.page-header p {font-size:16px;color:var(--muted)}
.states-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-bottom:60px}
.state-card {background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:25px}
.state-card h3 {font-size:18px;color:var(--dark);margin-bottom:5px;display:flex;align-items:center;gap:8px}
.state-desc {font-size:13px;color:var(--muted);margin-bottom:20px}
.form-group input {width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:0;font-size:14px;color:var(--dark);background:#fff}
.input-default {border-color:var(--line)}
.input-focus {border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,118,110,0.15)}
.input-error {border-color:var(--error)}
.input-success {border-color:var(--success)}
.input-disabled {background:#e5e7eb;color:#9ca3af;cursor:not-allowed}
.error-message {font-size:12px;color:var(--error);margin-top:5px;font-weight:600}
.success-message {font-size:12px;color:var(--success);margin-top:5px;font-weight:600}
.playground-section {background:#fff;border:1px solid var(--line);border-radius:20px;padding:35px;margin-bottom:70px}
.playground-section h2 {color:var(--dark);margin-bottom:8px}
.playground-section > p {font-size:14px;color:var(--muted);margin-bottom:25px}
.playground-grid {display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.live-form {background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:25px}
.live-form .form-group input:focus {border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,118,110,0.15)}
.submit-btn {width:100%;margin-top:10px;padding:13px;font-size:15px}
.alert-box {padding:15px;border-radius:12px;font-size:14px;margin-bottom:20px;display:none}
.alert-success {background:#f0fdfa;color:var(--blue);border:1px solid #ccfbf1}
.alert-error {background:#fef2f2;color:var(--error);border:1px solid #fee2e2}

@media(max-width:1000px) {
.cards {grid-template-columns:repeat(2,1fr)}
.searchgrid {grid-template-columns:1fr 1fr}
.searchbtn {min-height:48px}
.localgrid {grid-template-columns:1fr}
}

@media(max-width:760px) {
.container {width:calc(100% - 28px)}
.navlinks,.actions {display:none}
.menu {display:inline-flex}
/* Panneau du menu mobile : ancré sous l'en-tête, qui est déjà sticky et sert
   donc de bloc de positionnement. Fermé par défaut, ouvert par la classe que
   pose le script du header. */
.mobile-nav{position:absolute;top:100%;left:0;right:0;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 16px 32px -16px #0f172a33}
.mobile-nav .container{display:flex;flex-direction:column;gap:2px;padding:14px 0 20px}
.mobile-nav .navlink{display:block;padding:12px 4px;font-weight:700;color:var(--dark);border-radius:8px}
.mobile-nav .navlink:hover{background:var(--bg);color:var(--blue)}
.mobile-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px;padding-top:14px;
  border-top:1px solid var(--line)}
.mobile-actions .btn{width:100%}
header.is-open .mobile-nav{display:block}
.hero {min-height:auto}
.hero-content {padding:60px 0}
.lead {font-size:16px}
.searchgrid {grid-template-columns:1fr}
.searchbtn {min-height:50px}
.trustgrid {grid-template-columns:1fr;padding:18px 0;gap:13px}
section {padding:55px 0}
.heading {display:block}
.view {display:inline-block;margin-top:8px}
.cards {grid-template-columns:1fr}
.locations {grid-template-columns:1fr;grid-template-rows:repeat(3,220px)}
.loc.large {grid-row:auto}
.steps {grid-template-columns:1fr;gap:8px}
.localinks {grid-template-columns:1fr}
.localphoto {height:270px}
.ctabox {display:block;padding:35px 25px}
.ctabox .btn {width:100%;margin-top:20px}
.footergrid {grid-template-columns:1fr 1fr}
.brand {grid-column:span 2}
.bottom {display:block}
}

@media(max-width:450px) {
.search {padding:13px}
.footergrid {grid-template-columns:1fr}
.brand {grid-column:auto}
}

@media(max-width:900px) {
.content-grid {grid-template-columns:1fr}
.gallery {grid-template-columns:1fr;grid-template-rows:auto}
.gallery-main {grid-row:auto;height:300px}
.gallery-sub {height:180px}
.article-layout {grid-template-columns:1fr}
.toc-card {display:none}
.featured-image {height:300px}
.states-grid {grid-template-columns:1fr}
.playground-grid {grid-template-columns:1fr}
}

@media(max-width:600px) {
.specs-boxes {grid-template-columns:1fr}
.amenities-list {grid-template-columns:1fr}
.prop-title-row {display:block}
.header-price {text-align:left;margin-top:15px}
.stats-row {grid-template-columns:1fr}
.cards-grid {grid-template-columns:1fr}
.vibe-list {grid-template-columns:1fr}
}

@media(max-width:950px) {
.results-layout {grid-template-columns:1fr}
.filters-sidebar {position:static;margin-bottom:25px}
.cards-grid {grid-template-columns:repeat(2,1fr)}
.content-grid {grid-template-columns:1fr}
.stats-row {grid-template-columns:repeat(2,1fr)}
}

@media(max-width:650px) {
.cards-grid {grid-template-columns:1fr}
.no-results {grid-column:span 1}
}

/* =========================================================================
   Compléments — absents des maquettes, ajoutés à l'intégration.
   Voir DESIGN-BRIEF.md §10.
   ========================================================================= */

/* --- Contenu éditorial : tableaux, listes ordonnées, citations, figures ---
   La page /cost-of-living/ repose entièrement sur des tableaux de données.    */

.article-content .table-wrap{overflow-x:auto;margin:26px 0;border:1px solid var(--line);border-radius:12px}
.article-content table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.article-content thead th{background:var(--bg);color:var(--dark);font-weight:800;text-align:left;
  font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:12px 14px;white-space:nowrap}
.article-content tbody td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.article-content tbody tr:nth-child(even){background:#fbfcfe}
.article-content td.numeric,.article-content th.numeric{text-align:right;font-variant-numeric:tabular-nums}
.article-content tfoot td{padding:12px 14px;border-top:2px solid var(--line);font-weight:800;color:var(--dark)}
.article-content table caption{caption-side:bottom;padding-top:10px;font-size:12px;color:var(--muted);text-align:left}

.article-content ol{margin:0 0 18px 20px}
.article-content ol li{margin-bottom:8px}
.article-content blockquote{margin:24px 0;padding:14px 20px;border-left:4px solid var(--blue);
  background:var(--bg);border-radius:0 12px 12px 0;color:var(--dark);font-size:15px}
.article-content figure{margin:26px 0}
.article-content figure img{border-radius:14px}
.article-content figcaption{margin-top:8px;font-size:12px;color:var(--muted)}

/* Encadré d'avertissement, pendant de .highlight-box */
.warning-box{background:#fffbeb;border:1px solid #fcd34d;border-left:4px solid #d97706;
  border-radius:0 12px 12px 0;padding:16px 20px;margin:24px 0;font-size:14px}
.warning-box strong{display:block;color:#92400e;margin-bottom:4px}

/* --- Emplacements publicitaires : hauteur réservée, sinon le CLS explose --- */
.adslot{display:block;margin:24px auto;background:var(--bg);border:1px dashed var(--line);
  border-radius:12px;overflow:hidden}
.adslot-300x250{width:300px;height:250px}
.adslot-leaderboard{width:100%;max-width:728px;height:90px}
.adslot-inarticle{width:100%;height:280px}
@media(max-width:760px){.adslot-leaderboard{height:100px}}

/* --- Barre de contact collante en mobile (fiche annonce) ---
   Sous 900px l'encadré latéral passe après toute la page : sans ça le
   formulaire est inatteignable sans dérouler l'annonce entière.             */
.mobile-cta{display:none}
@media(max-width:900px){
  .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:12px;
    align-items:center;justify-content:space-between;background:#fff;border-top:1px solid var(--line);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px #0f172a14}
  .mobile-cta .price strong{font-size:18px}
  .mobile-cta .btn{white-space:nowrap}
  body.has-mobile-cta{padding-bottom:84px}
}

/* --- États manquants du design system (§10.4) --- */
.alert-duplicate{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
.btn[aria-busy="true"]{opacity:.65;pointer-events:none}
.btn[aria-busy="true"]::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  vertical-align:-2px;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* --- Prix en deux devises --- */
.price .secondary{display:block;font-size:12px;color:var(--muted);font-weight:600}

/* --- Divulgation d'affiliation (exigence FTC) --- */
.disclosure-note{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;font-size:12px;color:var(--muted);margin-bottom:22px}

/* --- Accessibilité : le focus clavier était invisible partout --- */
/* L'anneau de focus imposait border-radius:4px à l'élément focalisé : chaque
   bouton et chaque champ (rayon 10px) changeait de forme sous le doigt de
   l'utilisateur clavier. Et la règle oubliait textarea et les commandes
   personnalisées — questions de la FAQ, menu — qui sont précisément les
   seules à ne pas être focalisables nativement. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:100;background:#fff;padding:10px 16px;border-radius:8px;
  box-shadow:0 6px 20px #0f172a22}

/* Le hero des maquettes hotlinkait une photo Unsplash : dépendance externe,
   bloquée par la CSP en production et non maîtrisée juridiquement.
   Dégradé neutre en attendant une photo auto-hébergée de la ville.          */
.hero{background:linear-gradient(120deg,#062e2b 0%,#0f766e 55%,#115e59 100%)}
.hero.has-photo{background-image:linear-gradient(90deg,rgba(5,16,37,.94),rgba(5,16,37,.55)),var(--hero-photo)}

/* =========================================================================
   Corrections d'intégration.
   Les six maquettes apportaient sept points de rupture différents et deux
   définitions contradictoires de .cards-grid (2 colonnes dans la page de
   résultats, 3 dans la page quartier). On reprend la main ici : ces règles
   sont en fin de fichier, elles l'emportent donc sur les media queries des
   maquettes, à spécificité égale.
   ========================================================================= */

/* --- Champs de recherche : les maquettes ne stylaient que les <input>,
       les <select> et <textarea> restaient bruts. --------------------------- */
.field{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:58px}
.field select,
.field textarea{width:100%;border:0;outline:0;background:transparent;color:var(--dark);
  font-size:14px;appearance:none;-webkit-appearance:none;padding-right:20px;cursor:pointer}
.field:has(select)::after{content:"";position:absolute;right:14px;bottom:20px;width:7px;height:7px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);pointer-events:none}
.field:focus-within{border-color:var(--blue)}
.searchgrid{align-items:stretch}
.searchbtn{min-height:58px;white-space:nowrap}

/* --- Grilles de cartes : une seule définition, qui s'adapte à la largeur
       réellement disponible. La même classe sert en pleine largeur sur
       l'accueil et à côté de la colonne de filtres sur /rentals/, sans qu'on
       ait à décider d'un nombre de colonnes par contexte. ------------------- */
.cards,
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}

/* --- Colonne de filtres : elle n'a pas besoin de 280 px fixes. ------------ */
.results-layout{grid-template-columns:minmax(220px,250px) 1fr;gap:28px}
@media(max-width:900px){.results-layout{grid-template-columns:1fr}}

/* --- Le bouton de réinitialisation était un lien nu collé au bouton. ------ */
.reset-filters{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--muted)}
.reset-filters:hover{color:var(--blue)}
.filters-sidebar .submit-btn{width:100%}

/* --- État vide : centré et respirant, il n'avait aucune mise en forme. ---- */
.no-results{grid-column:1/-1;text-align:center;padding:50px 24px;background:var(--bg);
  border:1px solid var(--line);border-radius:16px}
.no-results h3{color:var(--dark);margin-bottom:8px}
.no-results p{color:var(--muted);margin-bottom:18px}

/* --- Cartes de contenu (guides) : sans photo, elles étaient écrasées. ----- */
.card .cardbody p.proploc{margin-bottom:14px;line-height:1.5}
.card .cardbottom{margin-top:auto}
.card{display:flex;flex-direction:column}
.card .cardbody{display:flex;flex-direction:column;flex:1}

/* --- Vérification : pas de nouvelle couleur, on réutilise le vocabulaire des
       maquettes. Sur la carte, .badge-tag (la pastille posée sur la photo),
       décalée à droite. Sur la fiche, .badge, celui du type de bien.
       .badge était défini cinq fois dans les six maquettes avec des valeurs
       différentes : on fixe ici la version qui fait foi.                     */
.badge{display:inline-block;padding:5px 12px;background:#f0fdfa;color:var(--blue);
  border-radius:20px;font-size:11px;font-weight:800;text-transform:uppercase;margin-bottom:10px}
.badge + .badge{margin-left:8px}
.badge-tag.is-verified{left:auto;right:12px}

/* =========================================================================
   Corrections issues du rendu réel (captures headless).
   ========================================================================= */

/* h1 est défini trois fois dans les six maquettes ; la dernière impose un texte
   sombre, ce qui rendait le titre du hero illisible sur son dégradé foncé.    */
.hero h1{color:#fff}
.hero h1 span{color:#5eead4}
.hero .lead{color:#ffffffd9}

/* .logo porte la couleur sombre du header : illisible sur le pied de page noir. */
footer .logo{color:#fff}

/* Tuiles de quartier sans photo : elles s'affichaient en rectangles gris vides,
   le dégradé d'assombrissement s'appliquant sur du blanc. En attendant de
   vraies photos, elles deviennent des tuiles pleines, volontairement variées. */
.loc:not(:has(img)){background:linear-gradient(150deg,#0f766e,#083344)}
.loc:not(:has(img)):nth-child(2){background:linear-gradient(150deg,#155e75,#0c2d3b)}
.loc:not(:has(img)):nth-child(3){background:linear-gradient(150deg,#0e7490,#134e4a)}
.loc:not(:has(img)):nth-child(4){background:linear-gradient(150deg,#115e59,#042f2e)}
.loc:not(:has(img)):nth-child(5){background:linear-gradient(150deg,#1e6f6a,#0b3b45)}
.loc:not(:has(img)):after{background:linear-gradient(transparent 40%,#0007)}

/* Le prix secondaire restait sur la même ligne dans l'en-tête de la fiche. */
.header-price .secondary{display:block;margin-top:4px;font-size:12px;color:var(--muted);font-weight:600}

/* Les libellés du formulaire du hero passaient sur deux lignes et décalaient
   leur champ par rapport aux autres. */
.field label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field select{text-overflow:ellipsis}
.searchgrid{grid-template-columns:1.6fr 1fr 1fr auto}

/* L'emplacement publicitaire vide ressemblait à un bug : on l'annonce. */
.adslot:empty::before{content:"Advertisement";display:grid;place-items:center;height:100%;
  font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}

/* .lead n'était défini qu'une fois, pour le hero, donc en blanc — mais la classe
   s'applique partout : le chapô des articles et de « List your property » était
   blanc sur blanc, donc invisible. Même famille de bug que h1 et .logo.        */
.lead{color:var(--muted)}
.hero .lead,
.neighborhood-hero .lead{color:#ffffffd9}
.article-header .lead{margin:0 auto 22px;max-width:640px;font-size:19px}

/* Les icônes de réassurance étaient des caractères ; en SVG elles doivent être
   centrées et à la bonne taille dans leur pastille. */
.trustitem .icon svg{width:18px;height:18px}
.trustitem strong{font-size:15px}

/* Les maquettes déclaraient font:inherit pour button, input et select, mais pas
   pour textarea : la description du formulaire de dépôt s'affichait en chasse fixe. */
textarea{font:inherit}

/* La liste numérotée de l'encadré latéral perdait ses numéros (.toc-list est
   list-style:none, pensée pour un sommaire). */
.filters-sidebar ol.toc-list{list-style:decimal;margin-left:18px}
.filters-sidebar ol.toc-list li{margin-bottom:10px;font-size:14px;color:var(--text)}

/* --- Fil d'Ariane ---------------------------------------------------------
   Les maquettes l'écrivaient avec des « &gt; » nus, sans liste ni séparateur
   stylé. Chevrons dessinés en CSS, dernier élément non cliquable et tronqué
   en mobile plutôt que de passer sur trois lignes.                          */
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:9px;min-width:0}
.breadcrumb li + li::before{content:"";flex:none;width:5px;height:5px;
  border-right:1.5px solid #cbd5e1;border-top:1.5px solid #cbd5e1;transform:rotate(45deg)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.breadcrumb [aria-current]{color:var(--dark);font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){
  .breadcrumb{font-size:12px}
  .breadcrumb [aria-current]{max-width:180px}
}

/* =========================================================================
   Bugs bloquants confirmés dans la feuille fusionnée.
   Ces règles venaient des maquettes, où les états étaient masqués et
   révélés en JavaScript. Le site les rend côté serveur : masqués par
   défaut, ils ne s'affichaient donc JAMAIS.
   ========================================================================= */

/* .alert-box était en display:none — les erreurs de validation du dépôt
   d'annonce et l'erreur de connexion étaient invisibles. Sur le chemin
   critique du projet : un propriétaire dont le formulaire échoue ne voyait
   rien du tout. */
.alert-box{display:block}
.alert-box ul{margin:8px 0 0 18px}
.alert-box li{margin-bottom:4px}
.alert-box strong{display:block;margin-bottom:4px}

/* .no-results était en display:none, et ma règle plus bas ne redéfinissait
   pas display : l'état vide n'apparaissait sur aucune page. */
.no-results{display:block}

/* .error-message et .success-message servent sous les champs : ils ne sont
   plus portés par du JS, on les affiche. */
.error-message,.success-message{display:block}

/* Le hero de quartier attend une <img> de fond que le gabarit ne rend pas
   encore : il restait blanc, avec un sous-titre gris clair puis blanc sur
   blanc — contraste mesuré à 2,28:1. Fond de repli tant qu'il n'y a pas de
   photo, et couleurs remises dans le bon sens. */
.neighborhood-hero:not(:has(img)){background:linear-gradient(140deg,#0f766e,#083344)}
.neighborhood-hero h1{color:#fff}
.neighborhood-hero p,.neighborhood-hero .lead{color:#e2e8f0}
.neighborhood-hero .breadcrumb a{color:#ffffffbf}
.neighborhood-hero .breadcrumb [aria-current]{color:#fff}
.neighborhood-hero .breadcrumb li + li::before{border-color:#ffffff80}

/* .locations ne déclarait que deux rangées de 190px pour une mosaïque qui en
   reçoit six : la sixième tuile tombait dans une rangée implicite de hauteur
   automatique, donc à zéro. La page /neighborhoods/ perdait un quartier. */
.locations{grid-auto-rows:190px}

/* Les liens dans le corps d'un article héritaient de a{color:inherit;
   text-decoration:none} : ils étaient rigoureusement invisibles. */
.article-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;font-weight:600}
.article-content a:hover{color:var(--blue2);text-decoration-thickness:2px}

/* .hero-content vient du hero d'accueil : width:680px + margin:auto. Réutilisé
   dans le hero de quartier, il recentrait le texte à 250px du bord, alors que
   les statistiques juste en dessous s'alignent sur la colonne de la page. */
.neighborhood-hero{padding:40px 0}
.neighborhood-hero .hero-content{width:min(1180px,calc(100% - 40px));max-width:none;
  margin-inline:auto;padding:0}

/* Chaque .toc-card était collée individuellement à top:95px. Dès qu'une colonne
   latérale en contient plusieurs — sommaire, annonces proches, emplacement
   publicitaire — elles se collent toutes au même endroit et se recouvrent.
   C'est la colonne entière qui doit coller, une seule fois. */
.article-layout > aside{position:sticky;top:95px;align-self:start;
  max-height:calc(100vh - 115px);overflow-y:auto;overscroll-behavior:contain}
.article-layout > aside::-webkit-scrollbar{width:0}
.article-layout .toc-card{position:static;top:auto}
.article-layout .toc-card + .toc-card{margin-top:20px}
.article-layout .adslot{margin-left:0;margin-right:0}

/* .submit-btn impose width:100% : juste dans une carte étroite (connexion,
   filtres, formulaire de contact), absurde dans une colonne de 860px, où le
   bouton de dépôt s'étirait sur toute la largeur. Un bouton d'action de page
   garde sa largeur naturelle, et la phrase de réassurance passe à côté. */
.btn-lg{padding:15px 32px;font-size:15px}
.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px;
  padding-top:22px;border-top:1px solid var(--line)}
.form-actions .state-desc{flex:1;min-width:220px;margin:0}
@media(max-width:600px){
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions .btn-lg{width:100%}
}

/* États de validation : ils existaient dans le design system (gabarit E) mais
   n'étaient câblés nulle part. Le contrôle fautif se signale lui-même, plutôt
   qu'un pavé en haut de page qui oblige à chercher quel champ a échoué. */
/* Spécificité : .form-group input et .section-block p valent (0,1,1) et
   écrasaient .input-error et .error-message, qui ne valent que (0,1,0).
   La bordure ne passait donc jamais au rouge et le message sortait en gris.
   On remonte au-dessus de ces deux règles, sans !important. */
.form-group input.input-error,
.form-group select.input-error,
.form-group textarea.input-error{border-color:var(--error);border-width:1.5px;background:#fffbfb}
.form-group input.input-error:focus,
.form-group select.input-error:focus,
.form-group textarea.input-error:focus{border-color:var(--error);
  box-shadow:0 0 0 3px rgba(220,38,38,.14);outline:none}
.form-group .error-message,
.section-block .error-message{color:var(--error);font-size:13px;font-weight:600;
  margin:7px 0 0;display:flex;align-items:flex-start;gap:6px}
.form-group .error-message::before{content:"!";flex:none;width:15px;height:15px;margin-top:1px;
  border-radius:50%;background:var(--error);color:#fff;font-size:10px;font-weight:900;
  display:grid;place-items:center}
.form-group:has(.input-error) > label{color:var(--error)}

/* Confirmation d'envoi : elle doit se voir sans avoir à la chercher. */
.flash{margin:22px 0 0;font-weight:600;scroll-margin-top:100px}
.flash:focus{outline:3px solid var(--blue);outline-offset:3px}
.anchor-offset{display:block;height:0;scroll-margin-top:110px}
.privacy-note{margin-top:12px;margin-bottom:0}
.privacy-note a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.privacy-note a:hover{color:var(--blue)}

/* En-tête : « Sign in » est un lien discret, « List your property » est le
   chemin d'acquisition des propriétaires — il doit se lire comme une commande.
   .btn.outline rendait un texte gris sans bordure perceptible, indistinct des
   liens de navigation. */
.actions{align-items:center}
.btn.ghost{background:transparent;color:var(--dark);padding:11px 12px}
.btn.ghost:hover{color:var(--blue)}
.actions .btn.outline{border:1px solid var(--blue);color:var(--blue2);background:#fff}
.actions .btn.outline:hover{background:#f0fdfa}

/* =========================================================================
   Espace propriétaire.
   Les maquettes n'en avaient pas : ces pages empruntaient les classes des
   autres, d'où une carte de 850 px pour deux champs et un tableau nu.
   ========================================================================= */

/* --- Pages d'authentification : colonne étroite, centrée, avec du relief --- */
.auth{min-height:calc(100svh - 72px - 200px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:56px 20px}
.auth-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:34px 32px;box-shadow:0 18px 40px -18px #0f172a2e}
.auth-brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--dark);
  font-size:16px;margin-bottom:22px}
.auth-brand .logo-icon{width:30px;height:30px;border-radius:9px;background:var(--blue);color:#fff;
  display:grid;place-items:center}
.auth-intro{font-size:14px;color:var(--muted);margin-bottom:22px}
.auth-card .form-group{margin-bottom:16px}
.auth-card .submit-btn{margin-top:6px}
.auth-aside{max-width:420px;text-align:center;font-size:13px;color:var(--muted)}
.auth-aside a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* La case à cocher était étirée sur toute la largeur par .form-group input. */
.checkbox-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);
  margin:4px 0 6px;cursor:pointer}
.checkbox-row input[type="checkbox"]{width:16px;height:16px;flex:none;accent-color:var(--blue)}

/* --- Tableau de bord --- */
.owner{padding-bottom:70px}
.owner-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin:26px 0 22px}
.owner-id{font-size:13px;color:var(--muted);margin-top:5px}
.owner .stats-row{margin-bottom:12px}
.owner-section{padding:0;margin-top:40px}
.owner-section .heading{margin-bottom:18px}
.owner-signout{margin-top:40px;font-size:13px}
.owner-signout a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.owner-signout a:hover{color:var(--blue)}

/* Demandes reçues : c'est la valeur de la page, pas les annonces. */
.lead-list,.owner-list{list-style:none;display:grid;gap:14px;margin:0;padding:0}
.lead-card{display:grid;grid-template-columns:1fr 240px;gap:26px;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:0 1px 2px #0f172a0f}
.lead-top{display:flex;align-items:baseline;gap:12px;margin-bottom:2px}
.lead-top strong{font-size:16px;color:var(--dark)}
.lead-date{font-size:12px;color:var(--muted)}
.lead-about{font-size:13px;color:var(--muted);margin-bottom:10px}
.lead-about a{color:var(--blue);font-weight:600}
.lead-message{font-size:14px;color:var(--text);line-height:1.6;margin:0}
.lead-contact{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  border-left:1px solid var(--line);padding-left:22px}
.lead-mail{font-size:12px;color:var(--muted);word-break:break-all}

/* Annonces du propriétaire */
.owner-item{display:grid;grid-template-columns:120px 1fr 160px;gap:20px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;
  box-shadow:0 1px 2px #0f172a0f}
.owner-thumb{width:120px;height:90px;border-radius:10px;overflow:hidden;background:var(--bg)}
.owner-thumb img{width:100%;height:100%;object-fit:cover}
.owner-thumb.is-empty{display:grid;place-items:center;border:1px dashed var(--line)}
.owner-thumb.is-empty span{font-size:11px;color:var(--muted)}
.owner-body h3{font-size:17px;color:var(--dark);margin:6px 0 4px}
.owner-meta{font-size:12px;color:var(--muted);margin:0}
.owner-todo{font-size:12px;color:var(--error);margin-top:6px;font-weight:600}
/* État de vérification : la date que le locataire voit sur l'annonce, montrée
   au propriétaire au même endroit que le reste. Passe en ambre à trente jours,
   quand la relance part — un rappel, pas une alerte : rien n'est cassé. */
.owner-verified{font-size:12px;color:var(--muted);margin-top:6px}
.owner-verified.is-due{color:#92400e;font-weight:600}
.owner-confirm{margin-top:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.owner-confirm .btn{padding:6px 12px;font-size:12px}
.owner-status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:10px;
  font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.owner-status.is-published{background:#f0fdfa;color:var(--blue2)}
.owner-status.is-pending{background:#fffbeb;color:#92400e}
.owner-status.is-draft{background:var(--bg);color:var(--muted)}
.owner-status.is-archived{background:var(--bg);color:var(--muted)}
.owner-price{text-align:right}
.owner-price strong{display:block;font-size:19px;color:var(--dark);font-variant-numeric:tabular-nums}
.owner-price small{display:block;font-size:11px;color:var(--muted)}
.owner-count{display:block;margin-top:8px;font-size:12px;color:var(--blue2);font-weight:600}

@media(max-width:820px){
  .lead-card{grid-template-columns:1fr}
  .lead-contact{border-left:0;border-top:1px solid var(--line);padding:16px 0 0;
    flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px}
  .owner-item{grid-template-columns:90px 1fr}
  .owner-thumb{width:90px;height:70px}
  .owner-price{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:12px;
    border-top:1px solid var(--line);padding-top:12px}
  .owner-count{margin:0}
}

/* Un sablier tournait en boucle infinie sans garde-fou de préférence système. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .btn[aria-busy="true"]::after{animation:none;opacity:.6}
}

/* 3 — Pages courtes : /guides/, /owner/login/, un quartier sans annonce
   s'arrêtaient à quelques pixels du pied de page noir. Le corps devient une
   colonne flexible pour que le pied soit poussé en bas, et le contenu garde
   une respiration basse quelle que soit sa longueur. */
body{min-height:100svh;display:flex;flex-direction:column}
main{flex:1 0 auto;display:block;padding-bottom:var(--page-bottom,72px)}
footer{flex:none}
@media(max-width:760px){main{padding-bottom:48px}}

/* 4 — Page « How it works » : .page-header était prévu par le système et
   n'était utilisé par aucun gabarit. */
.page-header{max-width:720px;margin:10px 0 40px}
.page-header h1{margin-bottom:12px}
.page-header p{font-size:17px;color:var(--muted);line-height:1.6}
.how-steps{padding:0 0 10px}
.how-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;padding:34px 0 0}
.how-block{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.how-block h2{font-size:var(--text-lg);margin-bottom:10px}
.how-block p{font-size:15px;color:var(--text);line-height:1.65;margin-bottom:10px}
.how-block p:last-child{margin-bottom:0}
.how-block a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.how-grid + .cta{padding:46px 0 0}
@media(max-width:820px){.how-grid{grid-template-columns:1fr}}

/* 2 — Page des quartiers : un sommaire, pas un teaser d'accueil. Chaque
   quartier annonce ce qu'on y trouve et à partir de quel prix ; sans ces deux
   nombres, six tuiles identiques ne disent rien. */
.hood-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;margin:0;padding:0}
.hood-link{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;box-shadow:0 1px 2px #0f172a0f;transition:transform .2s,box-shadow .2s}
.hood-link:hover{transform:translateY(-3px);box-shadow:0 14px 32px -14px #0f172a33}
.hood-visual{display:block;height:130px;background:linear-gradient(140deg,#0f766e,#083344)}
.hood-visual img{width:100%;height:100%;object-fit:cover}
.hood:nth-child(2) .hood-visual.is-plain{background:linear-gradient(140deg,#155e75,#0c2d3b)}
.hood:nth-child(3) .hood-visual.is-plain{background:linear-gradient(140deg,#0e7490,#134e4a)}
.hood:nth-child(4) .hood-visual.is-plain{background:linear-gradient(140deg,#115e59,#042f2e)}
.hood:nth-child(5) .hood-visual.is-plain{background:linear-gradient(140deg,#1e6f6a,#0b3b45)}
.hood:nth-child(6) .hood-visual.is-plain{background:linear-gradient(140deg,#134e4a,#052e2b)}
.hood-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.hood-name{font-size:19px;font-weight:700;color:var(--dark);letter-spacing:-.3px}
.hood-desc{font-size:14px;color:var(--muted);line-height:1.55;margin-top:7px}
.hood-stats{margin-top:auto;padding-top:16px;font-size:14px;color:var(--text);
  border-top:1px solid var(--line);margin-top:16px}
.hood-stats strong{color:var(--dark);font-variant-numeric:tabular-nums}
.hood-sep{color:var(--line);margin:0 4px}
.hood-none{color:var(--muted);font-size:13px}

/* 6, 7, 9 — Édition, suppression, profil. */
.edit-layout{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;margin-top:24px}
.edit-aside{position:sticky;top:95px;display:grid;gap:18px}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.owner-head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.owner-edit{margin-top:10px;display:inline-flex;padding:7px 14px;font-size:13px}
.photo-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;margin:0 0 18px;padding:0}
.photo{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-main{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.62);color:#fff;
  padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700}
.photo-remove{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.photo-remove img{width:60px;height:45px;object-fit:cover;border-radius:6px;flex:none}
.photo-remove .btn{margin-left:auto;padding:5px 10px;font-size:12px}
.btn.danger{color:var(--error)}
.btn.danger:hover{background:#fef2f2}
.btn.danger-solid{background:var(--error);color:#fff;width:100%;margin-top:10px}
.btn.danger-solid:hover{background:#b91c1c}
.danger-card summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--error);margin-top:10px}
.danger-card summary:hover{text-decoration:underline}
@media(max-width:900px){
  .edit-layout{grid-template-columns:1fr}
  .edit-aside{position:static}
}

/* =========================================================================
   Hiérarchie des titres — une seule échelle pour tout le site.
   Avant : h1 était déclaré quatre fois à spécificité égale (la dernière
   écrite gagnait, pas la plus juste) puis surchargé page par page, ce qui
   donnait cinq tailles différentes — 24px sur la page de résultats, soit
   moins qu'un h2 de section, et 32px sur le hero mais 42px sous 1000px,
   donc plus gros sur téléphone que sur écran.
   ========================================================================= */

h1{font-size:var(--text-h1);line-height:var(--lh-title);letter-spacing:var(--track-title);
  color:var(--dark);margin:0 0 14px}
h2{font-size:var(--text-h2);line-height:var(--lh-title);letter-spacing:var(--track-title);
  color:var(--dark);margin:0 0 12px}
h3{font-size:var(--text-lg);line-height:1.35;color:var(--dark);margin:0 0 8px}

/* Une seule exception, assumée : le titre du hero d'accueil. C'est la seule
   page où le titre EST l'image, il monte donc d'un cran — et il décroît
   régulièrement jusqu'au téléphone au lieu d'y grandir. */
.hero h1{font-size:var(--text-hero);line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);color:#fff;margin-bottom:16px}
.hero h1 span{color:#5eead4}

/* Les titres de page posés dans un bandeau sombre gardent l'échelle, pas la
   couleur. */
.neighborhood-hero h1{color:#fff;margin-bottom:6px}

/* Tout titre posé sur un fond sombre reprend la couleur de son conteneur.
   Les règles h1/h2/h3 ci-dessus posent une couleur sur l'ÉLÉMENT, et une
   déclaration sur l'élément bat toujours une couleur héritée, quelle que soit
   la spécificité du sélecteur. Sans ce rattrapage, le titre du panneau CTA
   était peint #101827 sur #101827 — invisible, contraste 1:1 — sur l'accueil
   comme sur /how-it-works/, et les six noms de quartiers de la mosaïque, qui
   sont des liens, tombaient à 1,2:1.
   color:inherit plutôt que #fff : la couleur reste pilotée depuis la carte,
   un changement de fond n'aura pas à être répercuté sur les titres. */
.hero h2,.hero h3,
.ctabox h2,.ctabox h3,
.loctxt h3,
.neighborhood-hero h2,.neighborhood-hero h3,
footer h2,footer h3,
.lead-card h3{color:inherit}

/* Titres de section : même niveau visuel partout — accueil, quartier, guide. */
.heading h2,
.local h2,
.ctabox h2,
.neighborhood-properties h2,
.article-content h2{font-size:var(--text-h2)}
.article-content h2{margin:34px 0 14px}
.section-block h2{font-size:var(--text-xl);margin-bottom:14px}

/* Sous-titres de bloc : un seul cran, quelle que soit la carte. */
.section-block h3,
.loctxt h3,
.sidebar-card h3,
.state-card h3,
.playground-section h2{font-size:var(--text-lg)}
.filters-sidebar h3,
.toc-card h3{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.06em;
  color:var(--dark);margin-bottom:14px}

/* Pages qui portaient leur propre taille de h1 : elles reprennent l'échelle. */
.auth-card h1{margin-bottom:6px}
.owner-head h1{margin:0}
.results-header h1{margin:0}
.page-header h1{margin-bottom:12px}
.article-header h1{margin-bottom:14px}

/* Les titres longs se coupaient n'importe où — « by the / month ». balance
   répartit les lignes, sans JavaScript et sans casser les navigateurs qui ne
   le connaissent pas (ils ignorent la déclaration). */
h1,h2,.hood-name,.propname{text-wrap:balance}
.hero-content{width:min(760px,100%)}

/* =========================================================================
   Titre de page : un seul comportement.
   Quatre conteneurs coexistaient — .article-header (centré, 800px, auto),
   .page-header (à gauche, 800px), .results-header (flex, à gauche) et
   .owner-head (flex) — d'où un titre qui changeait de place d'une page à
   l'autre : centré sur les guides, About et le dépôt, aligné à gauche
   partout ailleurs, et avec des marges hautes de 0, 10, 26 ou 40px.
   ========================================================================= */
.article-header,
.page-header,
.results-header,
.owner-head{margin:4px 0 26px;text-align:left}

/* Les deux conteneurs qui portent un chapô gardent une colonne de lecture. */
.article-header,
.page-header{max-width:760px}

.article-header .lead,
.page-header p{margin:0;max-width:660px;font-size:17px;line-height:1.55;
  color:var(--muted);text-align:left}

/* Les deux conteneurs qui portent une information à droite — le compteur
   d'annonces, les boutons du propriétaire — restent en flex. */
.results-header,
.owner-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;max-width:none}

/* La ligne d'auteur et de date était centrée avec le titre. */
.article-meta{justify-content:flex-start;margin-top:10px}

/* =========================================================================
   Page quartier — 1900px de page pour 400px de contenu.
   Neuf constats de l'audit, appliqués ensemble parce qu'ils se tiennent :
   un bandeau figé à 380px dont la moitié basse est vide, deux jetons de
   statistiques flottant à gauche d'un écran vide, et trois blocs
   d'espacement qui se cumulent jusqu'à 220px entre deux sections.
   ========================================================================= */

/* Le bandeau s'ajuste à son contenu au lieu d'immobiliser 380px pour deux
   lignes, et perd ses angles arrondis : en pleine largeur, ils se lisaient
   comme un défaut d'intégration, pas comme une intention. */

/* Deux cartes dans une grille de quatre laissaient 730px de vide. */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;max-width:660px;margin:26px 0 0}
.stat-card{padding:16px 20px;text-align:left}
.stat-card small{display:block;letter-spacing:.4px;margin-bottom:4px}
.stat-card strong{display:block;font-size:26px;font-variant-numeric:tabular-nums;line-height:1.1}

/* .neighborhood-properties et la section guides sont des <section> : elles
   héritaient de section{padding:75px 0}, qui s'ajoutait à leurs marges. */
.neighborhood-intro{max-width:68ch;margin:32px 0 0}
.neighborhood-intro p:last-child{margin-bottom:0}
.neighborhood-properties{padding:0;margin:44px 0 0}
.neighborhood-guides{padding:0;margin:48px 0 0}
.neighborhood-cta{padding:52px 0 0}

/* « See all → » s'alignait 25px sous la ligne de base du titre : .heading est
   un flex en align-items:end, et le margin-bottom du h2 gonflait sa boîte. */
.heading h2{margin-bottom:0}
.heading > div > p{margin-top:6px}

/* .btn ne déclarait aucun display : dans l'état vide, qui est un bloc
   ordinaire, l'ancre restait inline et son padding ne réservait aucune
   hauteur — le bouton chevauchait le paragraphe au-dessus. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2}
.card .cardbody > .btn{align-self:start;margin-top:auto}

/* Quatre colonnes de 265px serraient le prix, qui est l'information
   principale de la carte. Trois colonnes de 377px à 1180px. */
.cards-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}

/* Les trois arguments s'alignaient sur leur centre : dès qu'un sous-titre
   passait sur deux lignes, son titre montait et la rangée se désalignait. */
.trustitem{align-items:flex-start}
.trustitem .icon{margin-top:2px}
.trustitem > div:last-child{min-width:0}

/* =========================================================================
   Rythme vertical de l'accueil et des pages à bandes.
   section{padding:75px 0} s'appliquait des deux côtés de chaque bande : deux
   sections voisines produisaient 150 px de vide, et jusqu'à 180 px avec leurs
   marges propres — 648 px de blanc mesurés sur une page de 3400.
   Une seule valeur, et le hero cesse d'additionner ses propres paddings.
   ========================================================================= */
section{padding:44px 0}
.heading{margin-bottom:22px}
.trustgrid{min-height:0;padding:20px 0}
.hero .hero-content{padding:56px 0 52px}
.cta{padding:40px 0}
.faq{margin-top:4px}
.locations{gap:14px}
.steps{gap:24px}
.step{padding:12px}

@media(max-width:760px){
  section{padding:32px 0}
  .hero .hero-content{padding:38px 0 34px}
}

/* .cards (accueil) et .cards-grid (résultats, quartier) avaient deux largeurs
   minimales différentes — 250 et 290 px — donc l'accueil affichait 4 cartes
   puis 2, en laissant une rangée bancale. Une seule valeur : six annonces
   font deux rangées de trois. */
.cards,
.cards-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}

/* Le bloc de questions était centré dans le conteneur (max-width:850px avec
   margin:auto) alors que son titre est aligné à gauche : les questions
   démarraient 160 px plus à droite que « Frequently asked questions ». */
.faq{max-width:860px;margin:0}

/* L'enchaînement guides → panneau CTA → FAQ cumulait 84 px entre chaque bloc,
   plus 50 px de padding interne au panneau. Le bas de page respirait plus que
   son contenu. */
.cta{padding:26px 0}
.ctabox{padding:32px 36px}
.faqitem{padding:15px 0}
#faq{padding-top:34px}
@media(max-width:760px){.ctabox{padding:26px 22px}}

/* Le panneau CTA ajoutait son propre padding haut à celui de la section qui le
   précède : 72 px entre la dernière carte et le panneau, qui flottait au lieu
   de se rattacher au bloc dont il découle. */
.cta{padding-top:0}
section + .cta{margin-top:-14px}

/* .neighborhood-cta valait (0,1,0) comme .cta et était écrite plus haut : la
   règle ci-dessus l'écrasait et le panneau se collait au contenu. On remonte
   la spécificité plutôt que de jouer sur l'ordre, qui se reperdra. */
.cta.neighborhood-cta{padding-top:38px;margin-top:0}

/* Le SVG fermé du bouton de menu restait visible malgré l'attribut hidden :
   le comportement par défaut du navigateur pour [hidden] ne s'applique pas
   de façon fiable aux éléments SVG. Règle explicite, qui règle le cas une
   fois pour toutes plutôt que de dépendre d'un comportement implicite. */
[hidden]{display:none}

/* Badge « New » : le tableau de bord ne distinguait jamais une demande
   fraîche d'une demande déjà vue. Sans lui, « l'annonceur reçoit un message »
   n'était vrai que si le mailer l'était aussi — or il ne l'est pas encore. */
.lead-card.is-new{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.lead-new-badge{display:inline-block;background:var(--blue);color:#fff;font-size:11px;
  font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;
  border-radius:999px;margin-right:2px}

/* ---- Back-office ------------------------------------------------------- */
/* Réutilise les composants du site public (.btn, .form-group, .stat-card,
   .lead-card, .alert-box) : l'admin n'a pas sa propre bibliothèque, il a une
   barre, des tableaux et une grille à deux colonnes. */
.admin-body{background:var(--bg)}
.admin-bar{background:var(--dark);color:#fff;position:sticky;top:0;z-index:30}
.admin-bar-inner{width:min(1180px,calc(100% - 40px));margin:auto;height:60px;
  display:flex;align-items:center;gap:26px}
.admin-brand{font-weight:900;font-size:17px;color:#fff}
.admin-nav{display:flex;gap:20px;font-size:14px;font-weight:700;flex:1;flex-wrap:wrap}
.admin-nav a{color:#c7cdd8}
.admin-nav a:hover,.admin-nav a.is-current{color:#fff}
.admin-tools{display:flex;align-items:center;gap:14px}
.admin-site-form select{background:#1b2436;color:#fff;border:1px solid #2b3648;
  border-radius:8px;padding:7px 10px;font-size:13px}
.admin-signout{color:#c7cdd8;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.admin-signout:hover{color:#fff}
.admin-main{padding:28px 0 70px}
.admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin:6px 0 26px}
.admin-head h1{margin:0}
.admin-head-actions{display:flex;gap:10px;flex-wrap:wrap}
.admin-scope{font-size:13px;color:var(--muted);margin-top:5px}
.admin-section{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:24px;margin-bottom:22px}
.admin-section h2{font-size:18px;margin-bottom:6px}
.admin-desc{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:18px}

.admin-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.admin-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);background:var(--bg);padding:11px 14px;border-bottom:1px solid var(--line)}
.admin-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.admin-table tr:last-child td{border-bottom:0}
.admin-table a{color:var(--blue);font-weight:700}
.admin-table td.is-warn{color:var(--error);font-weight:700}
.admin-ref{display:block;font-size:11px;color:var(--muted);margin-top:3px}

.admin-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.admin-filter{padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-size:13px;font-weight:700;color:var(--muted)}
.admin-filter.is-current{background:var(--blue);border-color:var(--blue);color:#fff}
.admin-count{opacity:.7;font-weight:600}

.admin-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:10px;
  font-weight:800;text-transform:uppercase;letter-spacing:.3px;background:var(--bg);color:var(--muted)}
.admin-pill.is-published{background:#f0fdfa;color:var(--blue2)}
.admin-pill.is-pending,.admin-pill.is-new{background:#fffbeb;color:#92400e}
.admin-pill.is-forwarded{background:#eff6ff;color:#1d4ed8}
.admin-pill.is-spam{background:#fef2f2;color:var(--error)}

.admin-cols{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.admin-photos{display:flex;gap:10px;flex-wrap:wrap}
.admin-photos img{width:160px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.admin-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.admin-sendback{border-top:1px solid var(--line);padding-top:18px}
.admin-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin-top:10px}
.admin-dl dt{color:var(--muted)}
.admin-dl dd{color:var(--dark);font-weight:600;margin:0}
.admin-status-form select{border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12px}
.admin-pagination{display:flex;gap:18px;align-items:center;justify-content:center;
  margin-top:22px;font-size:14px}
.admin-pagination a{color:var(--blue);font-weight:700}
.btn-sm{padding:6px 12px;font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:900px){
.admin-cols{grid-template-columns:1fr}
.admin-bar-inner{height:auto;flex-wrap:wrap;gap:12px;padding:12px 0}
.admin-table{display:block;overflow-x:auto}
}

/* ---- Fiche transparence (coûts + détails) ------------------------------ */
.costs-box{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:24px;margin-bottom:22px}
.costs-head{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-end;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.costs-rent strong{display:block;font-size:30px;color:var(--dark);letter-spacing:-.6px;
  font-variant-numeric:tabular-nums}
.costs-rent small,.costs-figure small{display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted);font-weight:700}
.costs-figure strong{display:block;font-size:20px;color:var(--dark);margin-top:3px;
  font-variant-numeric:tabular-nums}
.costs-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px}
.costs-cols h3{font-size:13px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);margin-bottom:10px}
.costs-list{list-style:none;margin:0;padding:0;font-size:14px}
.costs-list li{display:flex;justify-content:space-between;gap:14px;padding:5px 0;
  border-bottom:1px solid var(--line)}
.costs-list li:last-child{border-bottom:0}
.costs-list span:last-child{font-weight:700;color:var(--dark);font-variant-numeric:tabular-nums}
.costs-included .is-yes{color:var(--blue)}
.costs-included .is-no{color:var(--muted)}
.costs-gap{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);line-height:1.6}

.detail-facts{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:24px;margin-bottom:22px}
.detail-facts h2{font-size:19px;margin-bottom:18px}
.detail-group{padding-top:16px;margin-top:16px;border-top:1px solid var(--line)}
.detail-group:first-of-type{padding-top:0;margin-top:0;border-top:0}
.detail-group h3{font-size:13px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);margin-bottom:10px}
.detail-group dl{display:grid;grid-template-columns:1fr auto;gap:6px 18px;font-size:14px}
.detail-group dt{color:var(--muted)}
.detail-group dd{margin:0;font-weight:700;color:var(--dark);text-align:right}
.detail-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);line-height:1.6}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}

/* Pages d'erreur. Deux mises en page : la complète, dans le gabarit du site
   (404 sur un domaine connu), et la nue, sans en-tête ni pied, quand aucun
   site n'est résolu — domaine inconnu, hôte d'administration, panne. */
.error-page{max-width:760px;margin:0 auto;padding:56px 0 72px;text-align:center}
.error-code{font-size:72px;font-weight:800;line-height:1;letter-spacing:-2px;
  color:var(--line);margin:0 0 4px}
.error-page h1{font-size:30px;color:var(--dark);margin-bottom:14px}
.error-page .lead{margin:0 auto 30px;max-width:620px;text-align:left}
/* .search est une carte blanche à forte ombre portée, dessinée pour flotter
   au-dessus du bandeau sombre de l'accueil. Sur une page claire, l'ombre
   devient un halo : bordure discrète à la place. */
.error-search{margin-bottom:26px;text-align:left;box-shadow:none;
  border:1px solid var(--line)}
.error-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.error-neighborhoods{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.error-neighborhoods h2{font-size:13px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);margin-bottom:12px}
.error-neighborhoods ul{list-style:none;margin:0;padding:0;display:flex;
  flex-wrap:wrap;gap:8px 10px;justify-content:center}
.error-neighborhoods a{display:inline-block;padding:7px 13px;border:1px solid var(--line);
  border-radius:999px;font-size:13px;font-weight:700;color:var(--blue2);background:var(--white)}
.error-neighborhoods a:hover{border-color:var(--blue);background:var(--bg)}

.error-bare{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:32px 20px;background:var(--bg)}
.error-bare-card{max-width:440px;text-align:center;background:var(--white);
  border:1px solid var(--line);border-radius:14px;padding:40px 32px}
.error-bare-card h1{font-size:22px;color:var(--dark);margin-bottom:10px}
.error-bare-card p{color:var(--muted);font-size:14px;line-height:1.7;margin:0}
.error-bare-card .error-code{font-size:52px;margin-bottom:2px}

@media (max-width:640px){
  .error-page{padding:36px 0 52px}
  .error-code{font-size:56px}
  .error-page h1{font-size:24px}
  .error-links .btn{flex:1 1 100%}
}

/* Ce qui manque à une annonce, montré au propriétaire. Sobre volontairement :
   c'est une liste de travail, pas un jeu. Pas de rouge — rien n'est cassé,
   l'annonce est simplement incomplète. */
.owner-quality{grid-column:1/-1;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.quality-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.quality-bar{flex:0 0 120px;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.quality-bar span{display:block;height:100%;background:var(--blue);border-radius:999px;
  transition:width .3s ease}
.owner-quality.is-complete .quality-bar span{background:#16a34a}
.quality-summary{font-size:13px;font-weight:700;color:var(--dark)}
.quality-list{list-style:none;margin:12px 0 12px;padding:0;display:grid;gap:9px}
.quality-list li{font-size:13px;line-height:1.55;padding-left:16px;position:relative;color:var(--muted)}
.quality-list li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--line)}
.quality-list strong{color:var(--dark);font-weight:700}
.quality-list span{display:block}
.owner-quality .btn{padding:6px 12px;font-size:12px}
.owner-signal{display:block;margin-top:6px;font-size:11px;line-height:1.5;color:#92400e;font-weight:600}
/* Le même bloc en tête du formulaire d'édition : hors grille, il lui faut
   son propre cadre. */
.edit-quality{grid-column:auto;margin:0 0 22px;padding:16px 18px;border:1px solid var(--line);
  border-radius:12px;background:var(--white)}

/* Annonces importées. Volontairement plus sobres que celles du site : elles
   ne portent aucune de ses promesses, et le visiteur doit voir la différence
   sans avoir à lire l'étiquette. */
.badge-tag.is-elsewhere{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.imported-note{font-size:13px;line-height:1.65;color:var(--muted);margin:14px 0 16px}
.imported-cta{display:block;text-align:center;margin-bottom:14px}
.elsewhere-block{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.elsewhere-block .heading p{max-width:640px}
.elsewhere-block .card{opacity:.92}
/* Meublé ou non, dans la liste : la distinction que le lecteur fait en
   premier depuis que le site prend les deux. Discret — c'est une
   caractéristique parmi d'autres, pas une étiquette commerciale. */
.spec-furnished{font-weight:700;color:var(--blue2)}