/*
Theme Name: SM Immobilier
Theme URI: https://venteimmobiliergatinais.fr
Author: Stéphane Mocret
Description: Thème sur-mesure pour SM — Stéphane Mocret Immobilier (Gâtinais). Autonome, sans dépendance à Elementor. Nécessite le plugin gratuit Advanced Custom Fields (ACF).
Version: 1.0.0
Requires PHP: 7.4
Text Domain: sm-immobilier
*/

/* ===== Variables ===== */
:root{
  --bg: oklch(97% 0.014 85);
  --bg-alt: oklch(94.5% 0.018 82);
  --ink: oklch(24% 0.025 265);
  --navy: oklch(27% 0.045 265);
  --navy-hov: oklch(22% 0.045 265);
  --muted: oklch(50% 0.02 70);
  --gold: oklch(74% 0.12 78);
  --gold-hov: oklch(68% 0.13 76);
  --line: oklch(88% 0.014 80);
  --card: oklch(99% 0.006 85);
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); font-family:'Jost',system-ui,sans-serif; color:var(--ink); }
h1,h2,h3,.sm-serif{ font-family:'EB Garamond',Georgia,serif; font-weight:500; margin:0; }
a{ color:var(--navy); text-decoration:none; }
a:hover{ color:var(--gold-hov); }
img{ max-width:100%; display:block; }
.sm-wrap{ max-width:1440px; margin:0 auto; padding:0 72px; }
@media (max-width:900px){ .sm-wrap{ padding:0 24px; } }
@media (max-width:480px){ .sm-wrap{ padding:0 18px; } }

.sm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:1px; font-weight:500; font-size:14px; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; white-space:nowrap; border:none; }
.sm-btn-navy{ background:var(--navy); color:var(--card); }
.sm-btn-navy:hover{ background:var(--navy-hov); color:var(--card); }
.sm-btn-gold{ background:var(--gold); color:var(--navy); }
.sm-btn-gold:hover{ background:var(--gold-hov); color:var(--navy); }
.sm-btn-outline{ background:transparent; color:var(--navy); border:1px solid var(--line); }

/* ===== Header ===== */
.sm-header{ display:flex; align-items:center; justify-content:space-between; padding:0 72px; height:104px; background:var(--card); border-bottom:1px solid var(--line); gap:16px; }
.sm-logo{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; flex-shrink:0; }
.sm-logo .sm-mark{ font-family:'EB Garamond',serif; font-size:30px; letter-spacing:0.01em; color:var(--navy); }
.sm-logo .sm-sub{ font-size:10px; letter-spacing:0.28em; color:var(--muted); margin-top:2px; }

/* Le menu WordPress (wp_nav_menu) est un <ul> dans <nav class="sm-nav"> :
   on met le flex sur les deux niveaux pour que ça marche avec ou sans <ul>. */
.sm-nav, .sm-nav > ul{ display:flex; align-items:center; gap:22px; font-size:12.5px; font-weight:500; list-style:none; margin:0; padding:0; }
.sm-nav li{ list-style:none; }
.sm-nav a{ color:var(--ink); }
.sm-nav a.current{ color:var(--navy); font-weight:600; border-bottom:2px solid var(--gold); padding-bottom:4px; }

.sm-nav-toggle{ display:none; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--line); background:var(--card); cursor:pointer; flex-shrink:0; }
.sm-nav-toggle svg{ pointer-events:none; }

@media (max-width:1100px){
  .sm-header{ padding:0 32px; }
  .sm-nav-toggle{ display:flex; }
  .sm-nav, .sm-nav > ul{
    display:none; flex-direction:column; align-items:flex-start; gap:0;
    position:fixed; top:104px; left:0; right:0; bottom:0;
    background:var(--card); padding:8px 32px 32px; overflow-y:auto; font-size:16px; z-index:50;
  }
  .sm-nav.is-open, .sm-nav.is-open > ul{ display:flex; }
  .sm-nav li{ width:100%; }
  .sm-nav a{ display:block; padding:16px 0; border-bottom:1px solid var(--line); width:100%; }
}
@media (max-width:480px){
  .sm-header{ padding:0 18px; height:76px; }
  .sm-logo .sm-mark{ font-size:24px; }
  .sm-nav, .sm-nav > ul{ top:76px; padding:8px 18px 24px; }
  .sm-header .sm-btn{ padding:10px 16px; font-size:12px; }
}

/* ===== Hero + blocs frostés (accueil) ===== */
.sm-hero{ position:relative; height:980px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.sm-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.sm-hero .sm-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, oklch(15% 0.03 260 / 0.5) 0%, oklch(15% 0.03 260 / 0.22) 38%, oklch(15% 0.03 260 / 0.4) 100%); }
.sm-hero-content{ position:relative; padding:100px 72px 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; max-width:760px; }
.sm-hero-content h1{ font-size:52px; line-height:1.1; color:oklch(99% 0.004 85); }
.sm-hero-content p{ font-size:17px; line-height:1.6; color:oklch(96% 0.006 85 / 0.92); max-width:520px; margin:0; }
.sm-hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:6px; }

.sm-trust-row{ position:relative; width:100%; padding:0 72px 72px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; box-sizing:border-box; }
.sm-trust-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; background:oklch(99% 0.006 85 / 0.5); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border:1px solid oklch(100% 0 0 / 0.45); box-shadow:0 12px 32px oklch(10% 0.02 260 / 0.22); padding:30px 24px; }
.sm-trust-card .sm-icon-badge{ width:48px; height:48px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; }
.sm-trust-card h3{ font-size:18px; color:var(--navy); }
.sm-trust-card p{ font-size:13.5px; line-height:1.55; color:var(--ink); margin:0; }
@media (max-width:900px){
  .sm-hero{ height:auto; padding-bottom:40px; }
  .sm-trust-row{ grid-template-columns:1fr; position:static; padding:32px 24px; }
  .sm-hero-content{ padding:60px 24px 32px; }
  .sm-hero-content h1{ font-size:36px; }
  .sm-hero-content p{ font-size:15px; }
}
@media (max-width:480px){
  .sm-hero-content{ padding:44px 18px 28px; gap:16px; }
  .sm-hero-content h1{ font-size:28px; }
  .sm-hero-actions{ width:100%; }
  .sm-hero-actions .sm-btn{ flex:1 1 auto; }
  .sm-trust-row{ padding:24px 18px; }
  .sm-trust-card{ padding:24px 18px; }
}

/* ===== Sections génériques ===== */
.sm-section{ padding:80px 72px; }
.sm-section-title{ text-align:center; display:flex; flex-direction:column; gap:10px; margin-bottom:40px; }
.sm-eyebrow{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-hov); font-weight:600; }

/* ===== Grille de biens (cartes) ===== */
.sm-biens-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; }
@media (max-width:900px){ .sm-biens-grid{ grid-template-columns:1fr; } }
.sm-bien-card{ border:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; }
.sm-bien-card .sm-bien-photo{ height:200px; background-size:cover; background-position:center; position:relative; }
.sm-bien-card .sm-bien-body{ padding:22px; display:flex; flex-direction:column; gap:8px; }
.sm-bien-card .sm-bien-prix{ font-family:'EB Garamond',serif; font-size:22px; color:var(--navy); }
.sm-bien-card h3{ font-size:16px; font-weight:600; font-family:'Jost',sans-serif; }
.sm-bien-card .sm-bien-meta{ font-size:13px; color:var(--muted); margin:0; }

/* ===== Page Biens à vendre : filtres, tri, carte ===== */
.sm-filters{ margin:0 0 32px; padding:24px 28px; background:var(--card); border:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:flex-end; gap:24px; }
.sm-field{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:160px; }
.sm-field label{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.sm-field select, .sm-field input{ font-family:'Jost'; font-size:13.5px; color:var(--ink); background:var(--card); border:1px solid var(--line); padding:11px 12px; }

.sm-map-panel{ margin:0 0 40px; border:1px solid var(--line); overflow:hidden; }
.sm-map-panel #sm-map{ width:100%; height:360px; }

@media (max-width:640px){
  .sm-filters{ padding:18px 16px; gap:16px; }
  .sm-field{ min-width:130px; }
  .sm-map-panel #sm-map{ height:260px; }
}

.sm-results-bar{ margin:0 0 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.sm-results-bar .sm-sort{ display:flex; align-items:center; gap:10px; font-size:13px; }
.sm-view-toggle{ display:flex; border:1px solid var(--line); }
.sm-view-toggle a{ padding:9px 18px; font-size:12.5px; font-weight:600; color:var(--muted); }
.sm-view-toggle a.is-active{ background:var(--navy); color:var(--card); }

/* ===== Fiche bien : carrousel ===== */
.sm-carousel{ position:relative; height:460px; overflow:hidden; background:oklch(85% 0.02 80); }
.sm-carousel .sm-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .4s ease; }
.sm-carousel .sm-slide.is-active{ opacity:1; }
.sm-carousel-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:oklch(15% 0.02 260 / 0.45); display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; z-index:2; }
.sm-carousel-arrow.prev{ left:18px; } .sm-carousel-arrow.next{ right:18px; }
.sm-carousel-zoom{ position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; background:oklch(15% 0.02 260 / 0.45); display:flex; align-items:center; justify-content:center; z-index:2; cursor:pointer; border:none; }
.sm-carousel-counter{ position:absolute; top:18px; left:18px; padding:6px 14px; background:oklch(15% 0.02 260 / 0.45); color:#fff; font-size:12.5px; z-index:2; }
.sm-carousel-badges{ position:absolute; bottom:18px; left:18px; right:18px; display:flex; flex-wrap:wrap; gap:10px; z-index:2; }
.sm-badge{ display:flex; align-items:center; gap:7px; padding:9px 16px; background:oklch(99% 0.006 85 / 0.92); color:var(--navy); font-size:12.5px; font-weight:600; }
.sm-thumbs{ display:flex; gap:8px; margin-top:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sm-thumbs button{ flex:0 0 90px; height:64px; background-size:cover; background-position:center; border:none; padding:0; cursor:pointer; outline-offset:-2px; }
.sm-thumbs button.is-active{ outline:2px solid var(--navy); }
.sm-lightbox{ position:fixed; inset:0; background:oklch(10% 0.02 260 / 0.92); display:none; align-items:center; justify-content:center; z-index:1000; }
.sm-lightbox.is-open{ display:flex; }
.sm-lightbox img{ max-width:92vw; max-height:85vh; }
.sm-lightbox-close{ position:absolute; top:16px; right:20px; color:#fff; font-size:32px; background:none; border:none; cursor:pointer; padding:8px; line-height:1; }

@media (max-width:640px){
  .sm-carousel{ height:280px; }
  .sm-carousel-arrow{ width:38px; height:38px; }
  .sm-carousel-counter{ font-size:11px; padding:5px 10px; }
  .sm-badge{ font-size:11.5px; padding:8px 12px; }
  .sm-thumbs button{ flex-basis:72px; height:52px; }
}

/* ===== Fiche bien : contenu + sidebar fixe ===== */
.sm-bien-layout{ padding:36px 72px 64px; display:grid; grid-template-columns:1fr 360px; gap:56px; }
@media (max-width:1000px){
  .sm-bien-layout{ grid-template-columns:1fr; padding:32px 24px 96px; }
  /* Sur mobile, la colonne fixe (visite/caractéristiques/DPE-GES) passe avant
     la description : l'essentiel et l'appel à l'action sont visibles tout de suite. */
  .sm-sidebar{ order:-1; position:static; }
}
@media (max-width:480px){ .sm-bien-layout{ padding:24px 18px 96px; gap:32px; } }
.sm-bien-header{ display:flex; flex-direction:column; gap:14px; padding-bottom:32px; border-bottom:1px solid var(--line); }
.sm-stat{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); }
.sm-stats-row{ display:flex; flex-wrap:wrap; gap:28px; margin-top:12px; }

.sm-sidebar{ display:flex; flex-direction:column; gap:20px; height:fit-content; position:sticky; top:24px; }

/* Barre d'appel à l'action fixe en bas d'écran, mobile uniquement. */
.sm-mobile-cta{ display:none; }
@media (max-width:1000px){
  .sm-mobile-cta{
    display:flex; align-items:center; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--card); border-top:1px solid var(--line); padding:12px 18px; box-shadow:0 -4px 16px oklch(20% 0.02 260 / 0.12);
  }
  .sm-mobile-cta a.sm-btn{ flex:1; padding:14px 10px; }
  .sm-mobile-cta .sm-mobile-cta-phone{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid var(--line); flex-shrink:0; }
}
.sm-sidebar-card{ border:1px solid var(--line); background:var(--card); padding:24px; display:flex; flex-direction:column; gap:14px; }
.sm-sidebar-card h2{ font-size:16px; font-family:'Jost',sans-serif; font-weight:600; }
.sm-carac-row{ padding:11px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; font-size:13px; }
.sm-carac-row:last-child{ border-bottom:none; }
.sm-carac-row span:first-child{ color:var(--muted); }

/* ===== DPE / GES ===== */
.sm-energy-scale{ display:flex; flex-direction:column; gap:2px; }
.sm-energy-row{ display:flex; align-items:center; height:20px; }
.sm-energy-row.is-current{ height:24px; }
.sm-energy-bar{ height:100%; display:flex; align-items:center; padding-left:7px; font-weight:700; font-size:11px; }
.sm-energy-row.is-current .sm-energy-bar{ font-size:12px; outline:2px solid var(--navy); outline-offset:-2px; }
.sm-energy-range{ margin-left:6px; font-size:10px; color:var(--muted); }
.sm-energy-row.is-current .sm-energy-range{ font-size:11px; font-weight:600; color:var(--navy); }

/* ===== Footer ===== */
.sm-footer{ background:var(--navy); color:oklch(90% 0.01 260); padding:56px 72px 32px; display:flex; flex-direction:column; gap:36px; }
.sm-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
.sm-footer a{ color:oklch(90% 0.01 260); }
.sm-footer-bottom{ border-top:1px solid oklch(40% 0.02 260); padding-top:20px; font-size:12px; color:oklch(65% 0.01 260); }
@media (max-width:900px){ .sm-footer-grid{ grid-template-columns:1fr; } }

/* ===== Formulaire de contact (natif, sans plugin payant) ===== */
.sm-form{ display:flex; flex-direction:column; gap:16px; max-width:560px; }
.sm-form label{ font-size:12px; font-weight:600; color:var(--muted); }
.sm-form input, .sm-form textarea{ font-family:'Jost'; font-size:13.5px; padding:12px; border:1px solid var(--line); background:var(--card); }