/* =====================================================================
   EUROPIÈCES AUTO — Thème sombre automobile (par-dessus Bootstrap 5.3)
   ===================================================================== */
:root {
    --ep-bg: #080B10;
    --ep-surface: #0F141D;
    --ep-surface-2: #111620;
    --ep-border: #1E2633;
    --ep-accent: #FFC400;
    --ep-blue: #087CC1;
    --ep-text: #C7CDD4;
    --ep-muted: #8B98A8;
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--ep-bg);
    --bs-body-color: var(--ep-text);
    --bs-body-font-family: 'Plus Jakarta Sans', 'Cairo', system-ui, sans-serif;
    --bs-border-color: var(--ep-border);
    --bs-secondary-color: var(--ep-muted);
    --bs-tertiary-bg: var(--ep-surface);
    --bs-card-bg: var(--ep-surface);
    --bs-link-color-rgb: 255, 196, 0;
    --bs-link-hover-color-rgb: 255, 214, 77;
    --bs-primary: var(--ep-blue);
    --bs-primary-rgb: 8, 124, 193;
}

body { background: var(--ep-bg); }
body.is-ar { font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif; }
::selection { background: var(--ep-accent); color: #000; }
h1, h2, h3, h4, h5, h6 { color: #fff; font-weight: 800; }

.text-accent { color: var(--ep-accent) !important; }
.text-blue   { color: var(--ep-blue) !important; }
.bg-surface  { background: var(--ep-surface) !important; }
.border-ep   { border-color: var(--ep-border) !important; }

/* Boutons */
.btn-accent {
    --bs-btn-color: #000; --bs-btn-bg: var(--ep-accent); --bs-btn-border-color: var(--ep-accent);
    --bs-btn-hover-color: #000; --bs-btn-hover-bg: #ffd94d; --bs-btn-hover-border-color: #ffd94d;
    --bs-btn-active-color: #000; --bs-btn-active-bg: #e6b000; --bs-btn-active-border-color: #e6b000;
    font-weight: 700;
}
.btn-outline-accent {
    --bs-btn-color: var(--ep-accent); --bs-btn-border-color: var(--ep-accent);
    --bs-btn-hover-color: #000; --bs-btn-hover-bg: var(--ep-accent); --bs-btn-hover-border-color: var(--ep-accent);
    font-weight: 700;
}

/* Barre d'annonce */
.announcement-bar { background: linear-gradient(90deg, #1a1400, #2a2000, #1a1400); border-bottom: 1px solid #3a2e00; color: var(--ep-accent); font-weight: 600; }
.announcement-bar a { color: var(--ep-accent); text-decoration: none; }
.pulse-dot { display: inline-block; width: 8px; height: 8px; background: #ff3b30; border-radius: 50%; animation: pulse 1.4s infinite; vertical-align: middle; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,.6);} 70% { box-shadow: 0 0 0 8px rgba(255,59,48,0);} 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0);} }

/* Navbar */
.site-nav { background: rgba(8, 11, 16, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ep-border); }
.site-nav .nav-link { color: var(--ep-text); font-weight: 600; font-size: .92rem; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--ep-accent); }
.brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--ep-accent); color: #000; font-weight: 900; letter-spacing: -1px; }
.brand-title { color: #fff; font-weight: 900; letter-spacing: .5px; }
.brand-sub { color: var(--ep-muted); font-size: .65rem; letter-spacing: 1.5px; text-transform: uppercase; }

/* Sections */
.section { padding: 4rem 0; }
.section-alt { background: var(--ep-surface-2); border-block: 1px solid var(--ep-border); }
.eyebrow { color: var(--ep-accent); font-size: .75rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.page-hero { padding: 3rem 0 2rem; background: linear-gradient(180deg, #0D1219, var(--ep-bg)); border-bottom: 1px solid var(--ep-border); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 3rem 0 4rem; background: radial-gradient(ellipse at top, rgba(8,124,193,.18), transparent 60%), var(--ep-bg); }
.hero-img { border-radius: 1.25rem; border: 1px solid #263345; box-shadow: 0 25px 60px rgba(0,0,0,.6); }
.trust-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid var(--ep-border); border-radius: 50rem; background: var(--ep-surface); font-size: .8rem; }

/* Cartes */
.card { border-color: var(--ep-border); }
.feature-card, .brand-tile { background: var(--ep-surface); border: 1px solid var(--ep-border); border-radius: 1rem; transition: transform .2s, border-color .2s; }
.feature-card:hover, .brand-tile:hover { transform: translateY(-4px); border-color: var(--ep-accent); }
.icon-box { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: #171D26; border: 1px solid #2A374A; border-radius: .75rem; color: var(--ep-accent); font-size: 1.3rem; }
.brand-tile { display: block; text-decoration: none; padding: 1.2rem; text-align: center; color: inherit; }
.brand-tile img { height: 52px; width: auto; max-width: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; }
.brand-tile .brand-name { color: #fff; font-weight: 800; margin-top: .6rem; }
.brand-tile small { color: var(--ep-muted); }

.product-card { transition: transform .2s, border-color .2s; }
.product-card:hover { transform: translateY(-4px); border-color: #3a4a63; }
.product-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #0b0f16; }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.product-card:hover .product-img-wrap img { transform: scale(1.06); }

/* Packs */
.pack-card .pack-img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.pack-card.featured { border-color: var(--ep-accent); box-shadow: 0 0 0 1px var(--ep-accent), 0 10px 40px rgba(255,196,0,.08); }
.old-price { text-decoration: line-through; color: var(--ep-muted); }

/* Offres / coupon */
.offer-card { border-radius: 1rem; border: 1px solid var(--ep-border); background: linear-gradient(160deg, #141b27, var(--ep-surface)); }
.coupon { border: 2px dashed var(--ep-accent); border-radius: 1rem; background: rgba(255,196,0,.05); }
.coupon-code { font-family: ui-monospace, Menlo, monospace; letter-spacing: .15em; font-size: 1.6rem; font-weight: 800; color: var(--ep-accent); }

/* Formulaires */
.form-control, .form-select { background-color: #0b1018; border-color: #263345; }
.form-control:focus, .form-select:focus { background-color: #0b1018; border-color: var(--ep-accent); box-shadow: 0 0 0 .2rem rgba(255,196,0,.15); }
.form-label { font-weight: 600; font-size: .85rem; }

/* Tableau panier */
.cart-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: .5rem; }
.qty-input { width: 70px; }

/* Footer */
.site-footer { background: #05080c; border-top: 1px solid var(--ep-border); }
.footer-links li { margin-bottom: .5rem; color: var(--ep-muted); }
.footer-links a { color: var(--ep-muted); text-decoration: none; }
.footer-links a:hover { color: var(--ep-accent); }

/* WhatsApp flottant */
.wa-float { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 1040; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; box-shadow: 0 6px 20px rgba(37,211,102,.45); text-decoration: none; transition: transform .2s; }
.wa-float:hover { transform: scale(1.1); color: #fff; }

/* Pagination */
.pagination { --bs-pagination-bg: var(--ep-surface); --bs-pagination-border-color: var(--ep-border); --bs-pagination-active-bg: var(--ep-accent); --bs-pagination-active-border-color: var(--ep-accent); --bs-pagination-active-color: #000; --bs-pagination-color: var(--ep-text); }

/* ---------------------- ADMIN ---------------------- */
.admin-sidebar { background: #05080c; border-inline-end: 1px solid var(--ep-border); min-height: 100vh; }
.admin-sidebar .nav-link { color: var(--ep-text); border-radius: .5rem; padding: .6rem .9rem; font-weight: 600; font-size: .92rem; }
.admin-sidebar .nav-link:hover { background: var(--ep-surface); }
.admin-sidebar .nav-link.active { background: var(--ep-accent); color: #000; }
.kpi { border-radius: 1rem; background: var(--ep-surface); border: 1px solid var(--ep-border); padding: 1.1rem; }
.kpi .kpi-value { font-size: 1.8rem; font-weight: 800; color: #fff; }
.table > :not(caption) > * > * { background-color: transparent; }
.thumb-sm { width: 44px; height: 44px; object-fit: cover; border-radius: .4rem; }

@media (max-width: 767.98px) {
    .section { padding: 2.5rem 0; }
}