/* =========================================================
   AF Mobilier — home.css
   Propre à la page d'accueil (index.php) : hero, intro,
   en-tête du catalogue et filtres.
   ========================================================= */

/* ---- Hero ---- */
.hero{position:relative;height:88vh;min-height:540px;overflow:hidden;background:var(--bg-deep);}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.6) saturate(0.95);}
.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 32px 64px;max-width:1280px;margin:0 auto;}
.hero-eyebrow{color:#E7DFCE;font-size:12px;margin-bottom:18px;display:block;}
.hero h1{color:#FBF8F1;font-size:clamp(36px,6vw,80px);line-height:0.98;max-width:900px;}
.hero h1 em{font-style:italic;color:#D8C8A3;font-weight:400;}
.hero p{color:#E7DFCE;font-size:16px;max-width:420px;margin-top:22px;line-height:1.6;font-weight:300;}

/* ---- Intro ---- */
.intro{max-width:1280px;margin:0 auto;padding:90px 32px;display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:start;border-bottom:1px solid var(--line);}
.intro .tag{color:var(--accent);font-size:12px;margin-bottom:20px;display:block;}
.intro h2{font-size:clamp(26px,3vw,38px);line-height:1.25;}
.intro-right p{color:var(--ink-soft);font-size:16px;line-height:1.8;font-weight:300;max-width:520px;}
.intro-right p + p{margin-top:16px;}

/* ---- Catalogue ---- */
.catalogue{max-width:1280px;margin:0 auto;padding:80px 32px 20px;scroll-margin-top:15px;}
.cat-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;flex-wrap:wrap;gap:16px;border-bottom:1px solid var(--line);padding-bottom:28px;}
.cat-head h2{font-size:clamp(28px,4vw,44px);}
.cat-count{color:var(--ink-soft);font-size:13px;font-family:'IBM Plex Mono',monospace;}

.filter-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:36px;}
.chips{display:flex;gap:10px;flex-wrap:wrap;}
.chip{
  font-size:12px;font-family:'IBM Plex Mono',monospace;letter-spacing:0.05em;text-transform:uppercase;
  padding:9px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);transition:all .2s ease;
}
.chip:hover{border-color:var(--ink);color:var(--ink);}
.chip.active{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.chip.new.active{background:var(--sage);border-color:var(--sage);}

.sort-select{
  font-size:12px;font-family:'IBM Plex Mono',monospace;letter-spacing:0.04em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:9px 34px 9px 16px;color:var(--ink-soft);
  background:var(--paper) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="6"%3E%3Cpath d="M1 1l4 4 4-4" stroke="%236E655A" stroke-width="1.4" fill="none"/%3E%3C/svg%3E') no-repeat right 14px center;
  appearance:none;-webkit-appearance:none;cursor:pointer;
}
.sort-select:hover{border-color:var(--ink);color:var(--ink);}

/* ---- Band (showroom) ---- */
.band{background:var(--bg-deep);color:#EFE9DD;padding:110px 32px;margin-top:20px;}
.band-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:center;}
.band-inner img{border-radius:2px;aspect-ratio:5/4;object-fit:cover;width:100%;}
.band .tag{color:#C9A661;font-size:12px;margin-bottom:22px;display:block;}
.band h2{font-size:clamp(28px,3.4vw,42px);line-height:1.2;color:#FBF8F1;margin-bottom:24px;}
.band p{color:#B8AF9F;font-size:15.5px;line-height:1.85;font-weight:300;max-width:460px;}
.band .stats{display:flex;gap:48px;margin-top:44px;}
.band .stat b{font-family:'Fraunces',serif;font-size:32px;color:#FBF8F1;display:block;}
.band .stat span{font-size:11px;color:#8A8072;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.06em;}

@media (max-width:900px){
  .intro{grid-template-columns:1fr;}
  .band-inner{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .hero-content{padding:56px 20px;}
  .catalogue{padding:56px 20px 10px;}
  .intro{padding:56px 20px;}
  .band{padding:60px 20px;}
}