/* ====== Palette Benny’s adaptée au logo ====== */
:root {
  --bg: #0b0d10;          /* anthracite profond */
  --card: #151a21;        /* gris bleuté foncé */
  --muted: #aab4c3;       /* gris clair */
  --text: #e8ecf2;        /* blanc doux */
  --accent: #e5472a;      /* rouge logo pour CTA/actif */
  --brand: #1f5e9e;       /* bleu logo pour éléments secondaires */
  --warning: #f5a623;
  --space: clamp(12px, 2.5vw, 20px);
}

@media (max-width: 900px){
  footer-left .logo { width: 2.5em; }
}

/* ====== v4 stability: enforce multi-columns on desktop ====== */
@media (min-width: 1100px){
  .grid{ grid-template-columns: repeat(3, minmax(260px, 1fr)); }
}
@media (min-width: 1400px){
  .grid{ grid-template-columns: repeat(4, minmax(260px, 1fr)); }
}
@media (hover:hover){.card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.32)}}
.thumb{
  width:100%;display:block;object-fit:cover;aspect-ratio:16/9;background:#0b0d12;
  image-rendering:auto;
  -webkit-transform:translateZ(0);transform:translateZ(0);
  filter:contrast(1.05) saturate(1.08);
}
@media (min-width: 640px){.controls{grid-template-columns:1fr 1fr}}
@media (min-width: 900px){.controls{grid-template-columns:1fr 220px 180px}}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:clamp(14px, 1.6vw, 16px)/1.5 system-ui,Segoe UI,Roboto,Arial}
.container{max-width:min(1200px,100%);padding-left:clamp(12px,4vw,24px);padding-right:clamp(12px,4vw,24px);margin:0 auto}

/* ====== Header + Nav ====== */
.site-header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,rgba(20,24,30,.96),rgba(20,24,30,.86));backdrop-filter:blur(6px);border-bottom:1px solid #202630}
.nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;height:3em}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:900;letter-spacing:.5px;font-size:clamp(18px,2.6vw,22px)}
.brand .logo{width:32px;height:32px;display:block}
.brand .logo.small{width:26px;height:26px}
nav{display:flex;gap:8px;flex-wrap:wrap}
nav a{color:#cfd6e4;text-decoration:none;padding:8px 10px;border-radius:8px;border:1px solid transparent;line-height:1}
nav a.active, nav a:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 10px rgba(229,71,42,.35)}

/* ====== Sections ====== */
.section{background:var(--card);border:1px solid #202630;border-radius:14px;padding:var(--space);margin:var(--space) 0;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.section h2{margin:0 0 8px;font-size:clamp(18px,2.4vw,22px);color:#eaf1ff}
.section p{margin:8px 0;color:#cbd3e1}

/* ====== Filtres ====== */
.controls{display:grid;gap:10px;align-items:center;grid-template-columns:1fr}
input[type="search"],select{width:100%;padding:12px 14px;border:1px solid #1f5e9e;;background:#0d0f14;color:var(--text);border-radius:10px;outline:none;min-height:44px}

/* ====== Grille ====== */
.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:clamp(12px,2vw,16px)}

/* ====== Cartes ====== */
.card{position:relative;background:var(--card);border:1px solid #202630;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .2s ease, box-shadow .2s ease}

.content{padding:clamp(12px,2vw,14px)}
.title{font-weight:800;font-size:clamp(16px,2.2vw,18px);margin:0 0 4px}
.model{color:var(--muted);font-size:clamp(12px,1.8vw,13px);margin-bottom:8px}
.price{font-weight:700;margin:8px 0 12px;color:#e8f0ff}
.desc{font-size:clamp(13px,1.9vw,14px);color:#cbd3e1}
.badge{z-index: 2;position: absolute;top: 5px;left: 5px;background: #FF9800;color: #fff;padding: 6px 10px;border-radius: 8px;font-weight: 800;font-size: 12px;box-shadow: 0 4px 12px rgba(0, 0, 0, .3);}
.badge.sold{z-index: 999; background:var(--accent);color:#fff;box-shadow:0 0 10px rgba(229,71,42,.35)}
.pill{display:inline-block;background:#0e1320;border:1px solid #e5472a;color:#b6c2d0;padding:4px 8px;border-radius:999px;font-size:12px}
.toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between}
.hidden{display:none}

/* ====== Footer ====== */
.site-footer{border-top:1px solid #202630;margin-top:24px;padding:20px 0;color:#aab2bf}
.footer-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-left{display:flex;align-items:center;gap:10px}

/* ====== Divers ====== */
.bullets{padding-left:18px}
.steps{counter-reset:step;margin-left: -1em!important;}
.steps li{list-style:none;position:relative;padding-left:2.8em;margin:10px 0}
.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;background:#0e1320;border:1px solid #263146;color:#cfe0ff;width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.cta{display:inline-block;margin-top:10px;padding:12px 18px;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 4px 14px rgba(229,71,42,.35)}


.footer-left .logo {width: 4em;height: auto;max-width: 100%;}
/* Catégorie affichée au-dessus du titre */
.pill.category-top {
  display: inline-block;
  margin-bottom: 6px;
  border-radius: 14px!important;
}
s
/* Meilleure gestion des titres longs */
.title{
  font-weight:800;
  font-size:clamp(16px,2.2vw,18px);
  margin:0 0 6px;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ====== v3 fixes: catégorie au-dessus + anti-overflow ====== */
.pill.category-top{
  display:inline-block;
  max-width:100%;
  margin-bottom:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:top;
}

.content>*{ /* spacing harmonisé */margin-top: 6px;}
.content>*:first-child{
  margin-top: 0;
}

/* Titre sur 2 lignes max */
.title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Retire tout reliquat éventuel d’une ancienne toolbar */
.toolbar{ display:none !important; }


/* Prevent any image/cards from overflowing */
.card{ min-width: 0; }
.thumb{ width:100%; height:auto; }
.content{ min-width: 0; }
.pill.category-top{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }

/* Avoid duplicate spacing artifacts */
.toolbar{ display:none !important; }



#empty{
  text-align: center;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid #1f5e9e;
  font-color: #e5472a;
}