/* ==========================================================================
   SOS COMMERCE — Design tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bleu-marine: #1D3B5F;
  --bleu-marine-dark: #12283F;
  --terracotta-brique: #B5553A;
  --or-ble: #C99A3E;
  --encre: #1A2733;
  --sable: #EAF1F6;
  --creme-carte: #F7FAFC;
  --blanc-craie: #FFFFFF;
  --ligne: #D3E1EB;

  --font-display: 'Fraunces', serif;
  --font-body: 'Public Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius-tag: 6px;
  --shadow-carte: 0 2px 0 rgba(33,29,23,0.06), 0 10px 24px -14px rgba(33,29,23,0.35);
}

*{ box-sizing: border-box; }
body{ margin:0; background: var(--sable); color: var(--encre); font-family: var(--font-body); line-height:1.5; -webkit-font-smoothing: antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
input,select,textarea{ font-family: inherit; font-size: 1rem; }
.container{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0 0 .5em; color: var(--bleu-marine-dark); }
h1{ font-size: clamp(2rem, 4vw, 3.1rem); font-weight:700; line-height:1.05; letter-spacing:-.01em; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); }
p{ margin:0 0 1em; }
.eyebrow{ font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta-brique); font-weight:600; }
:focus-visible{ outline: 3px solid var(--or-ble); outline-offset: 2px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding: .78em 1.5em; border-radius: var(--radius-tag); border: 1.5px solid transparent; font-weight:600; font-size:.95rem; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--terracotta-brique); color: var(--blanc-craie); }
.btn-primary:hover{ background:#9d4630; box-shadow: var(--shadow-carte); }
.btn-secondary{ background: transparent; color: var(--bleu-marine-dark); border-color: var(--bleu-marine-dark); }
.btn-secondary:hover{ background: var(--bleu-marine-dark); color: var(--blanc-craie); }
.btn-ghost{ background: transparent; color: var(--bleu-marine-dark); padding: .6em .9em; }
.btn-ghost:hover{ background: rgba(36,70,59,.08); }
.btn-block{ width:100%; }
.btn-lg{ padding: 1em 2em; font-size: 1.05rem; }
.btn-xs{ padding: .4em .8em; font-size: .78rem; border-radius: 5px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.site-header{ background: var(--bleu-marine); color: var(--blanc-craie); position: sticky; top:0; z-index: 100; border-bottom: 3px solid var(--or-ble); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding-top: 14px; padding-bottom: 14px; gap: 20px; flex-wrap:wrap; }
.logo{ display:flex; align-items:center; gap:.6em; font-family: var(--font-display); font-weight:700; font-size:1.35rem; color: var(--blanc-craie); }
.badge-sos{ background: var(--terracotta-brique); color:#fff; font-family: var(--font-mono); font-size:.62rem; letter-spacing:.08em; padding: .3em .5em; border-radius: 4px; transform: rotate(-3deg); }
.main-nav{ display:flex; align-items:center; gap: 4px; flex-wrap:wrap; }
.main-nav a{ padding:.6em .9em; border-radius: var(--radius-tag); font-weight:600; font-size:.92rem; color: rgba(255,253,248,.88); }
.main-nav a:hover, .main-nav a.active{ background: rgba(255,255,255,.1); color:#fff; }
.main-nav .nav-cta{ background: var(--or-ble); color: var(--bleu-marine-dark); margin-left:6px; }
.main-nav .nav-cta:hover{ background:#dcae4c; }

.hero{ background: radial-gradient(circle at 85% -10%, rgba(201,154,62,.25), transparent 45%), var(--bleu-marine-dark); color: var(--blanc-craie); padding: 64px 0 88px; }
.hero h1{ color:#fff; max-width: 720px; }
.hero .lede{ color: rgba(255,253,248,.82); max-width: 560px; font-size: 1.08rem; }
.hero-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:32px; }
.hero-text{ flex:1; min-width:0; }
.hero-map{ flex-shrink:0; width:300px; }
.hero-map .france-map-wrap{ max-width:none; padding:10px; background:#A8CBE0; }
.search-card{ background: var(--creme-carte); border-radius: 14px; box-shadow: var(--shadow-carte); padding: 22px; margin-top: 32px; display:grid; gap: 14px; }
.search-row{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.field label{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color: var(--bleu-marine-dark); margin-bottom:.4em; font-family: var(--font-mono); }
.field input, .field select{ width:100%; padding: .75em .85em; border:1.5px solid var(--ligne); border-radius: var(--radius-tag); background: var(--blanc-craie); color: var(--encre); }
.field input:focus, .field select:focus{ border-color: var(--terracotta-brique); }

/* Suggestions ville (autocomplétion code postal) */
.cp-suggestions{ position:absolute; top:100%; left:0; right:0; z-index:50; background:#fff; border:1.5px solid var(--ligne); border-radius: var(--radius-tag); margin-top:4px; box-shadow: var(--shadow-carte); max-height:220px; overflow-y:auto; }
.cp-suggestions button{ display:block; width:100%; text-align:left; padding:.6em .8em; border:none; background:none; font-size:.88rem; border-bottom:1px solid var(--ligne); }
.cp-suggestions button:last-child{ border-bottom:none; }
.cp-suggestions button:hover{ background: var(--sable); }
.cp-suggestions button span{ color:#6a6455; font-size:.8em; }
.segmented{ display:inline-flex; background: var(--sable); border-radius: var(--radius-tag); padding:4px; border:1.5px solid var(--ligne); }
.segmented button{ border:none; background:transparent; padding:.6em 1.1em; border-radius: 4px; font-weight:700; font-size:.85rem; color: var(--bleu-marine-dark); }
.segmented button.active{ background: var(--bleu-marine); color:#fff; }
.search-actions{ display:flex; justify-content:flex-end; }

/* Carte de France (vrai fond de carte des départements + étiquettes cliquables en %) */
.france-map-wrap{ position:relative; max-width: 520px; background: #D6E6F0; border:1.5px solid var(--ligne); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-carte); }
.france-real-map{ width:100%; height:auto; display:block; }
.region-shape polygon{ transition: fill .15s, stroke .15s, stroke-width .15s; cursor:pointer; }
.region-shape:hover polygon, .region-shape:focus-visible polygon{
  fill: var(--terracotta-brique) !important;
  stroke: var(--bleu-marine-dark) !important;
  stroke-width: 2 !important;
}


section{ padding: 64px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; margin-bottom: 30px; flex-wrap:wrap; }
.trust-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.trust-card{ background: var(--creme-carte); border:1.5px solid var(--ligne); border-radius: 12px; padding: 24px; }
.trust-card .icon{ font-size:1.6rem; margin-bottom:.5em; display:block; }
.trust-card h3{ font-size:1.05rem; margin-bottom:.35em; }
.trust-card p{ font-size:.92rem; color:#4a463b; margin:0; }
.bg-vert{ background: var(--bleu-marine); color:#fff; }
.bg-vert h2{ color:#fff; }
.bg-vert .lede{ color: rgba(255,253,248,.82); }

.listing-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.listing-card{ background: var(--creme-carte); border: 1.5px solid var(--ligne); border-radius: 12px; overflow: hidden; display:flex; flex-direction:column; transition: box-shadow .15s, transform .15s; }
.listing-card:hover{ box-shadow: var(--shadow-carte); transform: translateY(-3px); }
.listing-img{ aspect-ratio: 4/3; background: var(--ligne); position:relative; overflow:hidden; }
.listing-img img, .listing-img svg{ width:100%; height:100%; object-fit:cover; }
.listing-tag{ position:absolute; top:10px; left:10px; background: var(--bleu-marine); color:#fff; font-family: var(--font-mono); font-size:.65rem; font-weight:600; letter-spacing:.04em; padding: .35em .6em; border-radius: 4px; }
.listing-tag.achat{ background: var(--terracotta-brique); }
.listing-boost-badge{ position:absolute; bottom:10px; left:10px; background: var(--or-ble); color: var(--bleu-marine-dark); font-family: var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:.04em; padding: .35em .6em; border-radius: 4px; }
.listing-card-boosted{ border-color: var(--or-ble); box-shadow: 0 0 0 1.5px var(--or-ble); }

/* Favoris */
.listing-card-wrap{ position:relative; }
.listing-fav-btn{ position:absolute; top:10px; right:10px; margin:0; }
.listing-fav-btn button{ width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.92); color:var(--terracotta-brique); font-size:1.15rem; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.25); transition: transform .15s; }
.listing-fav-btn button:hover{ transform: scale(1.1); }
.listing-fav-btn button.is-favori{ color:#fff; background:var(--terracotta-brique); }
.btn-xs.is-favori{ background: var(--terracotta-brique); color:#fff; border-color: var(--terracotta-brique); }
.listing-body{ padding: 16px; display:flex; flex-direction:column; gap:.4em; flex:1; }
.listing-body h3{ font-size:1.02rem; margin:0; }
.listing-loc{ font-size:.85rem; color:#5b5647; }
.listing-price{ margin-top: auto; font-family: var(--font-mono); font-weight:700; color: var(--bleu-marine-dark); padding-top: .5em; border-top: 1px dashed var(--ligne); }
.listing-cat{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--terracotta-brique); font-weight:700; font-family: var(--font-mono); }

.annonces-layout{ display:grid; grid-template-columns: 280px 1fr; gap: 32px; align-items:start; }
.filters-panel{ background: var(--creme-carte); border:1.5px solid var(--ligne); border-radius: 12px; padding: 22px; position: sticky; top: 96px; }
.group-label{ display:block; font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color: var(--bleu-marine-dark); font-weight:700; margin-bottom:.5em; }
.range-row{ display:flex; align-items:center; gap:10px; }
.range-row input[type="range"]{ flex:1; accent-color: var(--terracotta-brique); }
.range-value{ font-family: var(--font-mono); font-size:.82rem; font-weight:700; color: var(--terracotta-brique); min-width: 64px; text-align:right; }
.filters-panel input[type=text], .filters-panel select{ width:100%; padding:.7em .85em; border:1.5px solid var(--ligne); border-radius: var(--radius-tag); background:#fff; }

.results-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; flex-wrap:wrap; gap:10px; }
.results-count{ font-size:.9rem; color:#4a463b; }
.sort-select{ display:flex; align-items:center; gap:.5em; font-size:.85rem; }
.sort-select select{ padding:.5em .7em; border-radius: var(--radius-tag); border:1.5px solid var(--ligne); background:#fff; }
.results-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.empty-state{ text-align:center; padding: 60px 20px; color:#6a6455; grid-column: 1 / -1; }

/* Fil d'Ariane */
.breadcrumb{ padding: 14px 0; }
.breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; font-size:.82rem; }
.breadcrumb li{ display:flex; align-items:center; gap:6px; }
.breadcrumb a{ color:#6a6455; font-weight:600; }
.breadcrumb a:hover{ color: var(--bleu-marine); text-decoration:underline; }
.breadcrumb span[aria-current]{ color: var(--bleu-marine-dark); font-weight:700; }
.breadcrumb li.sep{ color: var(--ligne); }

.form-shell{ max-width: 640px; margin: 0 auto; }
.form-card{ background: var(--creme-carte); border:1.5px solid var(--ligne); border-radius: 14px; padding: 34px; box-shadow: var(--shadow-carte); }
a.form-card{ transition: transform .15s, box-shadow .15s; }
a.form-card:hover{ transform: translateY(-2px); border-color: var(--terracotta-brique); }
.form-grid{ display:grid; gap: 16px; }
.form-grid.cols-2{ grid-template-columns: 1fr 1fr; }
.form-field label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:.4em; }
.form-field .hint{ font-size:.78rem; color:#6a6455; margin-top:.35em; }
.form-field input, .form-field select, .form-field textarea{ width:100%; padding:.8em .9em; border:1.5px solid var(--ligne); border-radius: var(--radius-tag); background:#fff; }
.form-field textarea{ resize: vertical; min-height: 120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--terracotta-brique); }

.gate-banner{ background: var(--bleu-marine); color:#fff; border-radius: 12px; padding: 22px 26px; display:flex; align-items:center; justify-content:space-between; gap: 18px; flex-wrap:wrap; margin-bottom: 28px; }
.gate-banner p{ margin:0; }
.gate-banner strong{ display:block; font-family: var(--font-display); font-size:1.15rem; margin-bottom:.15em; }

.photo-uploader{ border: 2px dashed var(--ligne); border-radius: var(--radius-tag); padding: 22px; text-align:center; background:#fff; }
.photo-uploader.limit-reached{ border-color: var(--terracotta-brique); background:#FBEFE9; }
.photo-preview-row{ display:flex; gap:10px; margin-top: 12px; flex-wrap:wrap; }
.photo-thumb{ width:76px; height:76px; border-radius:8px; overflow:hidden; border:1.5px solid var(--ligne); }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; }
.photo-thumb-clickable{ padding:0; cursor: zoom-in; transition: transform .15s, box-shadow .15s; background:none; font: inherit; }
.photo-thumb-clickable:hover{ transform: translateY(-2px); box-shadow: var(--shadow-carte); }

.lightbox{ position:fixed; inset:0; background: rgba(23,48,42,.92); display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; pointer-events:none; transition: opacity .2s; padding:40px; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius:10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{ position:absolute; top:20px; right:24px; background: rgba(255,255,255,.12); color:#fff; border:none; width:44px; height:44px; border-radius:50%; font-size:1.3rem; }
.lightbox-close:hover{ background: rgba(255,255,255,.24); }
.upgrade-note{ font-size:.82rem; color: var(--terracotta-brique); font-weight:600; margin-top:.6em; }

.account-header{ display:flex; align-items:center; gap:18px; margin-bottom: 30px; }
.avatar-stamp{ width:64px; height:64px; border-radius:50%; background: var(--or-ble); color: var(--bleu-marine-dark); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:1.4rem; border: 3px solid var(--bleu-marine-dark); }
.plan-badge{ display:inline-block; font-family: var(--font-mono); font-size:.7rem; font-weight:700; padding:.3em .6em; border-radius:4px; background: var(--sable); color: var(--bleu-marine-dark); }
.plan-badge.regular{ background: var(--or-ble); }
.plan-badge.zen{ background: #4F9C8F; color:#fff; }

.pricing-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; max-width:820px; margin-left:auto; margin-right:auto; }
.pricing-grid-3{ grid-template-columns: 1fr 1fr 1fr; max-width: 1080px; }
.price-card{ background:#fff; border:1.5px solid var(--ligne); border-radius: 14px; padding: 30px; position:relative; }
.price-card.highlight{ border-color: var(--terracotta-brique); box-shadow: var(--shadow-carte); }
.price-card.highlight::before{ content: "Recommandé"; position:absolute; top:-13px; left: 26px; background: var(--terracotta-brique); color:#fff; font-family: var(--font-mono); font-size:.65rem; font-weight:700; padding:.3em .7em; border-radius: 4px; letter-spacing:.05em; }
.price-card .amount{ font-family: var(--font-display); font-size: 2.1rem; font-weight:700; color: var(--bleu-marine-dark); margin: .2em 0; }
.price-card .amount span{ font-family: var(--font-body); font-size:.9rem; font-weight:600; color:#6a6455; }
.price-card ul{ list-style:none; padding:0; margin: 18px 0; display:flex; flex-direction:column; gap:.6em; font-size:.9rem; }
.price-card ul li::before{ content: "✓ "; color: var(--bleu-marine); font-weight:700; }

.site-footer{ background: var(--bleu-marine-dark); color: rgba(255,253,248,.8); padding: 52px 0 26px; margin-top: 40px; }
.footer-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.footer-grid h4{ color:#fff; font-family: var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom: 14px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55em; font-size:.86rem; }
.footer-grid a:hover{ color:#fff; text-decoration:underline; }
.footer-bottom{ margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size:.78rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color: rgba(255,253,248,.8); }
.footer-bottom a:hover{ color:#fff; text-decoration:underline; }

/* Bannière cookies */
.cookie-banner{ position:fixed; left:16px; right:16px; bottom:-200px; z-index:200; transition: bottom .3s ease; }
.cookie-banner.visible{ bottom:16px; }
.cookie-banner-inner{
  max-width: 720px; margin:0 auto; background: var(--bleu-marine-dark); color:#fff;
  border-radius: 12px; padding: 18px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.cookie-banner-inner p{ margin:0; font-size:.86rem; color: rgba(255,253,248,.88); flex:1; min-width:220px; }
.cookie-banner-inner a{ color: var(--or-ble); font-weight:700; }
.cookie-banner-actions{ display:flex; gap:8px; flex-shrink:0; }

@media (max-width: 960px){
  .search-row{ grid-template-columns: 1fr; }
  .trust-grid{ grid-template-columns: 1fr; }
  .listing-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero-top{ flex-direction:column; }
  .hero-map{ width:100%; max-width:340px; align-self:center; }
  .annonces-layout{ grid-template-columns: 1fr; }
  .filters-panel{ position:static; }
  .results-grid{ grid-template-columns: repeat(2, 1fr); }
  .form-grid.cols-2{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .pricing-grid-3{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .main-nav{ font-size:.8rem; }
  .listing-grid, .results-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}