/*
 * SUFFAYA MARKETPLACE — Feuille de styles principale
 * Phase 1.2
 */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --primary:#6366f1;--primary-d:#4f46e5;
    --ok:#22c55e;--err:#ef4444;
    --text:#e2e8f0;--muted:#64748b;
    --bg:#0b0f1a;--surface:#111827;--card:#1a2235;--border:#1f2d42;
    --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --radius:10px;--transition:all .2s ease;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--surface);min-height:100vh;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--primary-d)}
.container{max-width:1560px;margin:0 auto;padding:0 24px}

/* ── Header ── */
.site-header{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;max-width:1560px;margin:0 auto}
.logo-link{text-decoration:none}
.logo-text{font-size:1.5rem;font-weight:900;color:var(--primary);letter-spacing:-1px}
.logo-text em{color:var(--text);font-style:normal}
.main-nav{display:flex;gap:24px}
.main-nav a{color:var(--muted);font-size:.9rem}
.main-nav a:hover{color:var(--text)}

/* ── Boutons ── */
.btn{display:inline-block;padding:12px 28px;border-radius:var(--radius);font-weight:600;font-size:.95rem;text-decoration:none;transition:var(--transition);cursor:pointer;border:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d);color:#fff}
.btn-outline{border:2px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}

/* ── Hero ── */
.hero{background:linear-gradient(135deg,var(--bg) 0%,#1e1b4b 100%);padding:80px 16px;text-align:center}
.hero-badge{display:inline-block;background:#312e81;color:#a5b4fc;padding:6px 16px;border-radius:100px;font-size:.78rem;font-weight:600;margin-bottom:24px}
.hero-title{font-size:clamp(2.2rem,7vw,4rem);font-weight:900;line-height:1.1;margin-bottom:20px}
.hero-accent{color:var(--primary)}
.hero-subtitle{font-size:1.05rem;color:var(--muted);max-width:500px;margin:0 auto 32px;line-height:1.7}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── Features ── */
.features{padding:64px 16px;background:var(--surface)}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:1100px;margin:0 auto}
.feature-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;text-align:center}
.feature-icon{font-size:2.5rem;margin-bottom:14px}
.feature-card h3{font-size:1rem;margin-bottom:8px}
.feature-card p{font-size:.875rem;color:var(--muted)}

/* ── Pages intérieures ── */
.page-hero{background:var(--bg);padding:60px 16px;text-align:center;border-bottom:1px solid var(--border)}
.page-hero h1{font-size:2.2rem;font-weight:800;margin-bottom:12px}
.page-hero p{color:var(--muted)}
.page-content{padding:48px 16px;max-width:960px;margin:0 auto}
.site-main{min-height:60vh}

/* ── Footer ── */
.site-footer{background:var(--bg);border-top:1px solid var(--border);padding:24px 16px;text-align:center;color:#475569;font-size:.85rem}

/* ── Responsive ── */
@media(max-width:640px){
    .main-nav{gap:14px}
    .hero{padding:56px 16px}
}

/* ── Icônes SVG — Styles globaux ── */
.ico {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    flex-shrink: 0;
}
.nav-icon {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    filter: brightness(0) invert(1);
    opacity: .8;
    flex-shrink: 0;
}
.stat-icon {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    filter: brightness(0) invert(1);
    opacity: .9;
}
.btn-icon {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
}
.alert-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
}
/* Étoiles de notation (HTML entities) */
.star-full  { color: #f59e0b; }
.star-empty { color: #334155; }