/* ============================================================
   Youness Mohssine Immobilier — home page (immobilier redesign)
   Scoped with .ym- prefixes to avoid clashing with template CSS.
   ============================================================ */
:root{
  --ym-orange:#F07E2A;
  --ym-orange-dark:#e06c15;
  --ym-ink:#1f2630;
  --ym-muted:#6b7580;
  --ym-line:#e9ecef;
  --ym-radius:14px;
  --ym-shadow:0 10px 30px rgba(20,30,45,.08);
}

/* ---------- Header / nav ---------- */
.ym-site-header{
  position:absolute; top:0; left:0; right:0; z-index:999;
  padding:10px 0; transition:all .25s ease; background:transparent;
}
.ym-site-header.ym-scrolled{
  position:fixed; padding:6px 0; background:#fff;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.ym-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.ym-logo img{ height:38px; width:auto; display:block; }
.ym-logo .ym-logo-dark{ display:none; }
.ym-site-header.ym-scrolled .ym-logo .ym-logo-light{ display:none; }
.ym-site-header.ym-scrolled .ym-logo .ym-logo-dark{ display:block; }

.ym-nav{ display:flex; align-items:center; gap:30px; }
.ym-nav a{
  color:#fff; font-size:15px; font-weight:700; text-decoration:none;
  padding:6px 0; position:relative; opacity:.92; transition:all .2s;
}
.ym-nav a:hover{ opacity:1; color:#fff; }
.ym-nav a.active::after,
.ym-nav a:hover::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px;
  border-radius:3px; background:var(--ym-orange);
}
.ym-site-header.ym-scrolled .ym-nav a{ color:var(--ym-ink); opacity:1; }

.ym-header-right{ display:flex; align-items:center; gap:22px; }
.ym-phone{
  color:#fff; font-weight:600; font-size:15px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.ym-phone svg{ width:17px; height:17px; }
.ym-site-header.ym-scrolled .ym-phone{ color:var(--ym-ink); }
.ym-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; border-radius:10px; text-decoration:none; cursor:pointer;
  border:0; transition:all .2s; white-space:nowrap;
}
.ym-btn-contact{ background:var(--ym-orange); color:#fff; padding:11px 22px; font-size:14px; }
.ym-btn-contact:hover{ background:var(--ym-orange-dark); color:#fff; }
.ym-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px; }
.ym-burger span{ width:24px; height:2px; background:#fff; border-radius:2px; }
.ym-site-header.ym-scrolled .ym-burger span{ background:var(--ym-ink); }

/* ---------- Hero ---------- */
.ym-hero{
  position:relative; min-height:560px; display:flex; align-items:center;
  background-size:cover; background-position:center; color:#fff; text-align:center;
}
.ym-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,22,32,.35) 0%, rgba(15,22,32,.55) 55%, rgba(15,22,32,.35) 100%);
}
.ym-hero-inner{ position:relative; width:100%; padding:120px 0 70px; }
.ym-hero h1{ font-size:52px; font-weight:700; line-height:1.1; margin:0 0 16px; color:#fff; }
.ym-hero p{ font-size:20px; font-weight:400; opacity:.95; margin:0 0 34px; }

/* search box */
.ym-search{
  max-width:820px; margin:0 auto; background:#fff; border-radius:16px;
  padding:12px; display:flex; align-items:stretch; gap:10px; box-shadow:0 18px 50px rgba(0,0,0,.25);
  text-align:left;
}
.ym-search-field{ flex:1; display:flex; align-items:center; gap:10px; padding:0 16px; position:relative; }
.ym-search-field svg{ width:20px; height:20px; color:var(--ym-orange); flex:0 0 auto; }
.ym-search-field select,
.ym-search-field input{
  border:0; outline:0; width:100%; height:54px; font-size:16px; color:var(--ym-ink);
  background:transparent; appearance:none; -webkit-appearance:none;
}
.ym-search-field.has-caret::after{
  content:""; position:absolute; right:14px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--ym-muted); border-bottom:2px solid var(--ym-muted);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.ym-search .ym-btn-search{
  background:var(--ym-orange); color:#fff; padding:0 30px; border-radius:12px;
  font-size:16px; font-weight:600; gap:10px; min-height:54px;
}
.ym-search .ym-btn-search:hover{ background:var(--ym-orange-dark); }
.ym-search .ym-btn-search svg{ width:18px; height:18px; }

/* ---------- Appartements récents section ---------- */
.ym-section{ padding:70px 0 80px; background:#fff; }
.ym-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }
.ym-section-head h2{ font-size:34px; font-weight:700; color:var(--ym-ink); margin:0 0 8px; }
.ym-section-head p{ color:var(--ym-muted); font-size:16px; margin:0; }
.ym-seeall{
  color:var(--ym-ink); font-weight:600; text-decoration:none; white-space:nowrap;
  border:1px solid var(--ym-line); padding:11px 18px; border-radius:10px; transition:all .2s;
  display:inline-flex; align-items:center; gap:8px;
}
.ym-seeall:hover{ border-color:var(--ym-orange); color:var(--ym-orange); }

/* filter chips */
.ym-chips-row{ display:flex; align-items:flex-start; gap:10px; margin-bottom:30px; min-width:0; }
.ym-chips{ display:flex; flex-wrap:wrap; gap:10px; overflow:hidden; max-height:44px; flex:1 1 auto; min-width:0; transition:max-height .3s ease; }
.ym-chips.ym-chips-expanded{ max-height:600px; }
.ym-chips-more{ flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; align-self:flex-start; }
.ym-chips-more-ic{ font-size:16px; line-height:1; font-weight:700; }
.ym-chip{
  border:1px solid var(--ym-line); background:#fff; color:var(--ym-ink);
  padding:9px 18px; border-radius:40px; font-size:14px; font-weight:500; cursor:pointer;
  transition:all .18s; white-space:nowrap;
}
.ym-chip:hover{ border-color:var(--ym-orange); color:var(--ym-orange); }
.ym-chip.active{ background:var(--ym-orange); border-color:var(--ym-orange); color:#fff; }

/* cards grid */
.ym-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.ym-card{
  background:#fff; border:1px solid var(--ym-line); border-radius:var(--ym-radius);
  overflow:hidden; box-shadow:var(--ym-shadow); transition:transform .2s, box-shadow .2s;
  display:flex; flex-direction:column;
}
.ym-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(20,30,45,.14); }
.ym-card-media{ position:relative; aspect-ratio:16/11; overflow:hidden; background:#eef1f4; }
.ym-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ym-card-badges{ position:absolute; top:14px; left:14px; display:flex; gap:8px; }
.ym-badge{
  background:rgba(20,26,34,.82); color:#fff; font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:30px; backdrop-filter:blur(2px);
}
.ym-badge.light{ background:#fff; color:var(--ym-ink); }
.ym-card-body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.ym-card-loc{ color:var(--ym-muted); font-size:13px; margin-bottom:6px; }
.ym-card-title{ font-size:18px; font-weight:700; color:var(--ym-ink); margin:0 0 16px; line-height:1.3; }
.ym-card-meta{ display:flex; gap:24px; margin-bottom:16px; }
.ym-card-meta .lbl{ display:block; color:var(--ym-muted); font-size:12px; margin-bottom:3px; }
.ym-card-meta .val{ display:block; color:var(--ym-ink); font-size:18px; font-weight:700; }
.ym-card-progress{ margin-top:auto; }
.ym-card-progress .pr-top{ display:flex; justify-content:space-between; font-size:12px; color:var(--ym-muted); margin-bottom:6px; }
.ym-bar{ height:5px; background:var(--ym-line); border-radius:4px; overflow:hidden; }
.ym-bar > span{ display:block; height:100%; background:var(--ym-ink); border-radius:4px; }

/* ---------- Searchable quartier combobox ---------- */
.ym-combo{ flex:1; position:relative; }
.ym-combo .ym-combo-control{ width:100%; min-height:54px; cursor:pointer; user-select:none; }
.ym-combo-text{ flex:1; font-size:16px; color:var(--ym-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ym-combo-text.ym-placeholder{ color:#9aa3ad; }
.ym-combo-caret{ width:9px; height:9px; border-right:2px solid var(--ym-muted); border-bottom:2px solid var(--ym-muted); transform:rotate(45deg) translateY(-2px); transition:transform .2s; flex:0 0 auto; margin-right:6px; }
.ym-combo.open .ym-combo-caret{ transform:rotate(-135deg) translateY(-2px); }

.ym-combo-panel{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:60;
  background:#fff; border-radius:14px; box-shadow:0 20px 50px rgba(15,22,32,.22);
  border:1px solid var(--ym-line); padding:8px; opacity:0; visibility:hidden;
  transform:translateY(-6px); transition:all .18s ease; max-height:340px; display:flex; flex-direction:column;
  text-align:left;
}
.ym-combo.open .ym-combo-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.ym-combo-search{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--ym-line); border-radius:10px; margin-bottom:8px; }
.ym-combo-search svg{ width:18px; height:18px; color:var(--ym-muted); flex:0 0 auto; }
.ym-combo-search input{ border:0; outline:0; width:100%; font-size:15px; color:var(--ym-ink); background:transparent; height:24px; }
.ym-combo-list{ list-style:none; margin:0; padding:0; overflow-y:auto; }
.ym-combo-list li{ padding:11px 14px; border-radius:9px; font-size:15px; color:var(--ym-ink); cursor:pointer; transition:background .12s; }
.ym-combo-list li:hover{ background:#f6f8fa; }
.ym-combo-list li.selected{ background:rgba(240,126,42,.12); color:var(--ym-orange-dark); font-weight:600; }
.ym-combo-list li.is-all{ font-weight:600; }
.ym-combo-list li.ym-combo-empty{ color:var(--ym-muted); cursor:default; text-align:center; }
.ym-combo-list li.ym-combo-empty:hover{ background:transparent; }

/* ---------- Location badge (colored) ---------- */
.ym-loc-badge{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:30px; margin-bottom:12px;
}
.ym-loc-badge svg{ flex:0 0 auto; }
.ym-loc-badge--blue{   background:#e8f0fe; color:#1a73e8; }
.ym-loc-badge--green{  background:#e6f4ea; color:#1e8e3e; }
.ym-loc-badge--purple{ background:#f3e8fd; color:#8430ce; }
.ym-loc-badge--orange{ background:#fef0e6; color:#e06c15; }
.ym-loc-badge--teal{   background:#e0f5f3; color:#0e9384; }

/* ---------- Interested (replaces Remplissage) ---------- */
.ym-card-interested{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--ym-line);
  display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ym-muted);
}
.ym-card-interested svg{ color:var(--ym-orange); flex:0 0 auto; }
.ym-card-interested strong{ color:var(--ym-ink); font-weight:700; }

/* ---------- Biens (listing) page ---------- */
.ym-biens{ padding-top:104px; padding-bottom:70px; background:#fff; min-height:70vh; }
.ym-biens .container{ max-width:1200px; }
.ym-biens-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.ym-biens-head h1{ font-size:32px; font-weight:700; color:var(--ym-ink); margin:0 0 6px; }
.ym-biens-head p{ color:var(--ym-muted); font-size:15px; margin:0; }
.ym-biens-search{ display:flex; gap:8px; background:#fff; border:1px solid var(--ym-line); border-radius:12px; padding:6px; }
.ym-biens-search select, .ym-biens-search input{ border:0; outline:0; height:42px; padding:0 12px; font-size:14px; color:var(--ym-ink); background:transparent; }
.ym-biens-search .ym-btn-search{ min-height:42px; padding:0 20px; font-size:14px; }
a.ym-chip{ text-decoration:none; display:inline-flex; align-items:center; }
.ym-empty{ text-align:center; padding:60px 20px; color:var(--ym-muted); }
.ym-empty h3{ color:var(--ym-ink); font-size:20px; margin:18px 0 6px; }
.ym-empty a{ color:var(--ym-orange); font-weight:600; }

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .ym-burger{ display:flex; }
  .ym-header-inner{ flex-wrap:wrap; row-gap:0; }

  /* mobile menu: nav + actions drop below, revealed by the burger */
  .ym-nav, .ym-header-right{
    flex-basis:100%; width:100%; order:3;
    flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; opacity:0; transition:all .25s ease;
  }
  .ym-site-header.ym-menu-open{ background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.1); }
  .ym-site-header.ym-menu-open .ym-logo .ym-logo-light{ display:none; }
  .ym-site-header.ym-menu-open .ym-logo .ym-logo-dark{ display:block; }
  .ym-site-header.ym-menu-open .ym-burger span{ background:var(--ym-ink); }
  .ym-site-header.ym-menu-open .ym-nav{ max-height:400px; opacity:1; padding-top:12px; margin-top:12px; border-top:1px solid var(--ym-line); }
  .ym-site-header.ym-menu-open .ym-header-right{ max-height:200px; opacity:1; padding-bottom:12px; }

  .ym-nav a{ color:var(--ym-ink); opacity:1; padding:13px 4px; border-bottom:1px solid var(--ym-line); }
  .ym-nav a:last-child{ border-bottom:0; }
  .ym-nav a.active{ color:var(--ym-orange); }
  .ym-nav a.active::after, .ym-nav a:hover::after{ display:none; }
  .ym-header-right{ gap:12px; margin-top:6px; }
  .ym-phone{ color:var(--ym-ink); justify-content:center; }
  .ym-btn-contact{ justify-content:center; }

  .ym-hero h1{ font-size:38px; }
  .ym-grid{ grid-template-columns:repeat(2,1fr); }
  .ym-search{ flex-direction:column; }
  .ym-search .ym-btn-search{ min-height:54px; }
}
@media (max-width:640px){
  .ym-hero h1{ font-size:30px; }
  .ym-hero p{ font-size:16px; }
  .ym-section-head{ flex-direction:column; align-items:flex-start; }
  .ym-grid{ grid-template-columns:1fr; }
}

/* center the main nav horizontally on desktop */
@media (min-width:992px){
  .ym-header-inner{ position:relative; }
  .ym-nav{ position:absolute; left:50%; transform:translateX(-50%); }
}

/* hero CTA button (replaces the removed quartier search) */
.ym-hero-cta-wrap{ display:flex; justify-content:center; margin-top:6px; }
.ym-hero-cta{
  display:inline-flex; align-items:center; gap:10px; background:var(--ym-orange); color:#fff;
  padding:16px 40px; border-radius:40px; font-size:16px; font-weight:700; text-decoration:none;
  box-shadow:0 14px 40px rgba(0,0,0,.28); transition:background .18s, transform .05s;
}
.ym-hero-cta:hover{ background:var(--ym-orange-dark); color:#fff; }
.ym-hero-cta:active{ transform:translateY(1px); }
.ym-hero-cta svg{ width:18px; height:18px; }