:root{
  --bg: #0c0c0c;
  --surface: #161615;
  --line: #2a2a27;
  --text: #f3f2ee;
  --muted: #9a968d;
  --accent: #f15a11;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Work Sans', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand,.navlink,.pill,.count{font-family:'Archivo', Arial, sans-serif;}

/* ---------- Hero band ---------- */
.hero{
  position:relative; padding:90px 60px 60px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(115deg, transparent 0 120px, rgba(241,90,17,.05) 120px 121px);
  pointer-events:none;
}
.hero .eyebrow{color:var(--accent); font-size:12px; letter-spacing:3px; font-weight:700; margin-bottom:14px;}
.hero h1{font-size:56px; font-weight:900; letter-spacing:-1px; max-width:640px;}
.hero p{color:var(--muted); max-width:520px; margin-top:16px; font-size:15px; line-height:1.6;}

/* ---------- Category tabs (niveau 1) ---------- */
.filters-wrap{padding:0 60px; margin-top:-1px;}
.cat-tabs{
  display:flex; gap:10px; padding-top:26px;
}
.cat-tab{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:11px 22px; font-size:12px; font-weight:800; letter-spacing:1px;
  cursor:pointer; transition:all .18s ease;
}
.cat-tab:hover{border-color:var(--accent); color:var(--text);}
.cat-tab.active{
  background:var(--accent); border-color:var(--accent); color:#0c0c0c;
}

/* ---------- Filter strip (niveau 2 : services) ---------- */
.filters{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.pill{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:10px 18px; border-radius:2px; font-size:12px; font-weight:700;
  letter-spacing:1px; cursor:pointer; transition:all .18s ease;
}
.pill:hover{border-color:var(--accent); color:var(--text);}
.pill.active{background:var(--accent); border-color:var(--accent); color:#0c0c0c;}
.count{margin-left:auto; color:var(--muted); font-size:12px; letter-spacing:1px; font-weight:600;}
.count b{color:var(--text); font-weight:800;}

/* ---------- Grid ---------- */
.grid{
  padding:40px 60px 100px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:26px;
}
.card{
  position:relative; background:var(--surface);
  border:1px solid var(--line); overflow:hidden;
  aspect-ratio:4/5;
  cursor:pointer;
  transition:opacity .25s ease, transform .25s ease;
}
.card.hidden{display:none;}
.card img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(15%) brightness(.85);
  transition:transform .5s ease, filter .3s ease;
}
.card:hover img{transform:scale(1.06); filter:grayscale(0%) brightness(.95);}

.card .corner{
  position:absolute; width:22px; height:22px; opacity:0; transition:opacity .25s ease;
  border:2px solid var(--accent);
}
.card:hover .corner{opacity:1;}
.corner.tl{top:14px; left:14px; border-right:none; border-bottom:none;}
.corner.tr{top:14px; right:14px; border-left:none; border-bottom:none;}
.corner.bl{bottom:14px; left:14px; border-right:none; border-top:none;}
.corner.br{bottom:14px; right:14px; border-left:none; border-top:none;}

.card .rec{
  position:absolute; top:14px; left:14px; display:flex; align-items:center; gap:6px;
  font-size:10px; letter-spacing:1px; font-weight:700; color:#fff;
  opacity:0; transition:opacity .25s ease;
}
.card:hover .rec{opacity:1;}
.card .rec .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);}

.card .overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 18px 16px;
  background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 100%);
}
.card .tag{
  display:inline-block; font-size:10px; letter-spacing:1.5px; font-weight:700;
  color:var(--accent); margin-bottom:6px; text-transform:uppercase;
}
.card .title{font-size:16px; font-weight:800;}
.card .meta{color:var(--muted); font-size:11px; margin-top:2px;}

@media (max-width:720px){
  .hero, .filters-wrap, .grid{padding-left:24px; padding-right:24px;}
  .hero h1{font-size:34px;}
}