:root{
  /* Palette claire ivoire */
  --mt-gold-1:#a1773d;
  --mt-gold-2:#a3793f;
  --mt-gold-3:#9f753b;
  --mt-brown-1:#5b3f27;
  --mt-brown-2:#5c4028;
  --mt-brown-3:#3e2c1e;

  --text:var(--mt-brown-3);
  --muted:var(--mt-brown-1);
  --accent:var(--mt-gold-1);
  --bordeaux:var(--mt-gold-2);
  --gold:#ffd700;
  --bg:#fffdf6;

  --glass:rgba(255,255,255,.55);
  --glass-solid:rgba(255,255,255,.92);
  --ring:rgba(161,119,61,.28);

  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --header-h:72px;
  --success:#19c37d;
  --danger:#ff6b6b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:"Chakra Petch",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",Arial;
  background:
    radial-gradient(1200px 700px at 8% -12%, rgba(161,119,61,.12), transparent 55%) no-repeat,
    var(--bg);
}
a{color:inherit;text-decoration:none}
.container{ width:min(1200px,92vw); margin-inline:auto; position:relative; }

/* ===== HEADER ===== */
.header{
  position:sticky; top:0; left:0; right:0; z-index:50;
  background:var(--glass-solid);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  border-bottom:1px solid rgba(92,64,40,.16);
}
.header .container{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:16px; }
.logo img{ height:36px; display:block; border-radius:12px; }

.navbar-list{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.navbar-link{ padding:10px 6px; font-weight:600; color:var(--mt-brown-2); opacity:.9; }
.navbar-link:hover{ opacity:1; color:var(--accent); }
.header-actions{ display:flex; align-items:center; gap:18px; }
.contact-time{ font-size:12px; color:var(--muted); display:block; }

/* Boutons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border:0; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg, var(--mt-gold-1), var(--mt-gold-3));
  color:#fff; font-weight:800; letter-spacing:.2px; box-shadow:0 8px 24px rgba(161,119,61,.25);
  justify-content:center; text-align:center; transition:transform .06s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(161,119,61,.35);
  background:transparent; color:var(--mt-brown-3);
}
.btn-ghost:hover{ border-color: var(--accent); box-shadow:0 0 0 4px var(--ring) inset; }

/* ===== HERO ===== */
.page-hero{
  padding: clamp(28px, 7vw, 60px) 0 18px;
  border-bottom:1px solid rgba(92,64,40,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,253,246,.8)), url("assets/images/garage-hero.jpg") center/cover no-repeat;
}
.page-hero .title{ margin:0 0 8px; font-size: clamp(28px, 5vw, 44px); text-shadow:0 8px 32px rgba(0,0,0,.1); color:var(--accent); }
.breadcrumbs{ display:flex; gap:10px; align-items:center; color:var(--muted); font-size:14px; }
.breadcrumbs a{ color:var(--mt-gold-2); text-decoration:underline dotted; }

/* ===== BARRE OUTILS ===== */
.tools{
  position:sticky; top:calc(var(--header-h) + 0px); z-index:20;
  background:var(--glass-solid);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  margin:14px 0; border-radius:16px;
  border:1px solid rgba(92,64,40,.16);
  padding:10px;
}
.tools form{
  display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1fr 1fr auto;
  gap:10px; align-items:end;
}
@media (max-width:1200px){ .tools form{ grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media (max-width:640px){ .tools form{ grid-template-columns: 1fr; } }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; color:var(--muted); }
.control{
  width:100%; padding:10px 12px; border-radius:10px; outline:none;
  background:#fff; color: var(--text);
  border:1px solid rgba(92,64,40,.18);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.control:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); background:#fffdfc; }
.select.control{
  appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:42px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23a1773d' d='M7 10l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-size:18px 18px; background-position:right 12px center; cursor:pointer;
}

/* Chips & Badges */
.chips{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px;
  background:rgba(161,119,61,.06); border:1px solid rgba(92,64,40,.14); color:var(--mt-brown-2);
}
.chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px var(--ring); }
.counter{ margin-left:auto; color:var(--muted); font-size:14px; }

/* ===== LISTE ===== */
.grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; margin:16px 0; }
@media (max-width:1000px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .grid{ grid-template-columns: 1fr; } }

.card{
  display:flex; flex-direction:column;
  background:#fffdfc;
  border:1px solid rgba(92,64,40,.14);
  border-radius:16px; overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .15s ease;
}
.card:hover{ transform: translateY(-2px); }
.card-media{ aspect-ratio:16/10; background:#fdfdf9; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-body{ padding:14px 14px 8px; }
.card-title{ margin:0 0 6px; font-size:18px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rating{ display:inline-flex; gap:2px; }
.rating ion-icon{ font-size:16px; color:var(--gold); }
.meta{ display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:13px; margin-bottom:8px; }
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px;
  background:rgba(161,119,61,.06); border:1px solid rgba(92,64,40,.14); color:var(--mt-brown-2);
}
.badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); }
.badge.off .dot{ background:#f0a500; }
.badge.no .dot{ background:#c84d4d; }
.specs{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; list-style:none; margin:0; padding:0; color:var(--mt-brown-2); }
.specs li{ display:flex; align-items:center; gap:8px; font-size:13px; }
.specs ion-icon{ font-size:16px; color: var(--accent); }
.card-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 14px; }

footer{ margin:40px 0; color:var(--muted); text-align:center; font-size:13px; }

.price{ display:flex; align-items:baseline; gap:6px; }
.price strong{ font-size:20px; color:var(--accent); }
.price span{ color:var(--muted); font-size:12px; }

.load-more{ display:flex; align-items:center; justify-content:center; margin:10px 0 30px; gap:10px; flex-wrap:wrap; }
.hint{ color:var(--muted); font-size:13px; }

.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px;
  border:1px dashed rgba(92,64,40,.18); border-radius:16px; padding:34px; color:var(--muted); background:#fffdfc;
  margin:16px 0;
}
.empty h3{ margin:0; color:var(--mt-brown-3); }

.navbar .navbar-link[aria-current="page"]{ color: var(--accent); opacity: 1; }