:root{--bg:#0c0a1f;--card:#17153a;--line:#3a2f6b;--text:#f2f0ff;--muted:#a9a4d6;--pink:#ff5fa2;--gold:#f0c05a;--blue:#3b9cff}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;background:radial-gradient(circle at top,#2a1650,var(--bg) 60%) fixed;color:var(--text);min-height:100vh}
header{text-align:center;padding:40px 16px 10px}
.logo{width:64px;height:64px;margin:0 auto 8px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);font:700 34px Georgia,serif;display:grid;place-items:center}
h1{margin:0;letter-spacing:.35em;font-weight:600}
header p{color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-size:.8rem}
main{max-width:1100px;margin:auto;padding:16px}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-bottom:10px}
.tabs button,select,input{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:.95rem}
.tabs button{cursor:pointer}
.tabs button.active{background:var(--pink);border-color:var(--pink);color:#fff}
input{min-width:200px}
#count{text-align:center;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{background:linear-gradient(160deg,var(--card),#110f2b);border:1px solid var(--line);border-radius:14px;padding:18px;transition:.2s}
.card:hover{transform:translateY(-4px);border-color:var(--pink)}
.card .icon{font-size:2rem}
.card h3{margin:6px 0;color:var(--gold)}
.tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue)}
.stats{display:flex;gap:14px;color:var(--muted);font-size:.9rem;margin:10px 0}
.prix{font-size:1.5rem;font-weight:700;color:var(--pink)}
.permis{margin:32px 0;text-align:center;border:1px solid #7a4cff;border-radius:16px;padding:24px;background:#120f2e}
.permis .prix{font-size:2.4rem;color:#fff}
.permis h2{margin:0 0 6px;color:var(--gold)}
footer{text-align:center;color:var(--muted);padding:24px;font-size:.85rem}