Bootstrap
Bootstrap4
Dashboard
Admin
Design
Html
Version 4 du dashboard Bootstrap 4 avec design refined, navigation fluide et composants modernes.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Boitify — Dashboard E-Commerce</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
<style>
/* ════════════════════════════════════════════
VARIABLES
════════════════════════════════════════════ */
:root {
--sw: 252px; /* sidebar width */
--tb: 62px; /* topbar height */
--primary: #6366f1;
--primary-10:#eef2ff;
--success: #22c55e;
--success-10:#dcfce7;
--warning: #f59e0b;
--warning-10:#fef3c7;
--danger: #ef4444;
--danger-10: #fee2e2;
--info: #06b6d4;
--info-10: #cffafe;
--violet-10: #ede9fe;
--violet: #8b5cf6;
--sidebar-bg:#0f172a;
--body-bg: #f1f5f9;
--card: #ffffff;
--border: #e2e8f0;
--muted: #64748b;
--dark: #0f172a;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', sans-serif;
background: var(--body-bg);
color: var(--dark);
min-height: 100vh;
}
/* ════════════════════════════════════════════
SIDEBAR
════════════════════════════════════════════ */
.sidebar {
position: fixed;
inset: 0 auto 0 0;
width: var(--sw);
background: var(--sidebar-bg);
display: flex;
flex-direction: column;
z-index: 100;
overflow: hidden;
}
/* Brand */
.sb-brand {
display: flex;
align-items: center;
gap: 11px;
padding: 0 18px;
height: var(--tb);
border-bottom: 1px solid rgba(255,255,255,.06);
text-decoration: none;
flex-shrink: 0;
}
.sb-brand-icon {
width: 34px; height: 34px;
background: var(--primary);
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 17px;
flex-shrink: 0;
}
.sb-brand-name {
font-size: 17px; font-weight: 800;
color: #fff; letter-spacing: -.3px;
}
.sb-brand-badge {
font-size: 10px; font-weight: 700;
background: var(--primary);
color: #fff;
padding: 2px 7px; border-radius: 20px;
margin-left: 2px;
}
/* Scroll area */
.sb-scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 10px 0 16px;
}
.sb-scroll::-webkit-scrollbar { width: 3px; }
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 99px; }
/* Section label */
.sb-label {
font-size: 10px; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase;
color: #475569;
padding: 16px 20px 5px;
}
/* Nav link */
.sb-link {
display: flex; align-items: center; gap: 11px;
padding: 9px 20px;
color: #94a3b8;
text-decoration: none;
font-size: 13.5px; font-weight: 500;
white-space: nowrap;
position: relative;
transition: background .12s, color .12s;
}
.sb-link:hover { background: rgba(255,255,255,.04); color: #cbd5e1; }
.sb-link.active {
background: rgba(99,102,241,.14);
color: #818cf8;
}
.sb-link.active::before {
content: '';
position: absolute; left: 0; top: 7px; bottom: 7px;
width: 3px; background: var(--primary);
border-radius: 0 3px 3px 0;
}
.sb-link i { font-size: 17px; width: 22px; flex-shrink: 0; }
.sb-badge {
margin-left: auto;
font-size: 10px; font-weight: 700;
background: var(--primary); color: #fff;
padding: 2px 7px; border-radius: 20px;
}
.sb-badge.orange { background: #f59e0b; }
/* Footer / user */
.sb-footer {
padding: 12px 12px;
border-top: 1px solid rgba(255,255,255,.06);
flex-shrink: 0;
}
.sb-user {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 10px;
text-decoration: none;
transition: background .12s;
}
.sb-user:hover { background: rgba(255,255,255,.05); }
.sb-user-avatar {
width: 34px; height: 34px;
border-radius: 50%;
overflow: hidden; flex-shrink: 0;
border: 2px solid rgba(255,255,255,.15);
}
.sb-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sb-user-name { font-size: 13px; font-weight: 600; color: #e2e8f0; }
.sb-user-role { font-size: 11px; color: #475569; }
.sb-user-dot {
margin-left: auto;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--success);
flex-shrink: 0;
}
/* ════════════════════════════════════════════
TOPBAR
════════════════════════════════════════════ */
.topbar {
position: fixed;
top: 0; left: var(--sw); right: 0;
height: var(--tb);
background: var(--card);
border-bottom: 1px solid var(--border);
display: flex; align-items: center;
padding: 0 24px; gap: 10px;
z-index: 90;
}
.topbar-search {
flex: 1; max-width: 320px;
position: relative;
}
.topbar-search input {
width: 100%;
background: var(--body-bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 14px 8px 36px;
font-size: 13px; font-family: 'Inter', sans-serif;
color: var(--dark);
outline: none;
}
.topbar-search input::placeholder { color: var(--muted); }
.topbar-search .s-icon {
position: absolute; left: 11px; top: 50%;
transform: translateY(-50%);
color: var(--muted); font-size: 15px;
pointer-events: none;
}
.tb-spacer { flex: 1; }
.tb-btn {
width: 37px; height: 37px;
border-radius: 10px;
background: var(--body-bg);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
color: var(--muted);
text-decoration: none;
font-size: 17px;
position: relative;
cursor: pointer;
transition: background .12s;
}
.tb-btn:hover { background: #e2e8f0; color: var(--dark); }
.tb-btn .dot {
position: absolute; top: 7px; right: 7px;
width: 7px; height: 7px; border-radius: 50%;
background: var(--danger);
border: 2px solid var(--card);
}
.tb-avatar {
width: 37px; height: 37px;
border-radius: 10px;
overflow: hidden;
border: 2px solid var(--border);
cursor: pointer;
flex-shrink: 0;
}
.tb-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Breadcrumb */
.tb-page-info { margin-right: auto; }
.tb-page-title { font-size: 15px; font-weight: 700; line-height: 1.1; }
.tb-breadcrumb { font-size: 11.5px; color: var(--muted); }
.tb-breadcrumb a { color: var(--primary); text-decoration: none; }
/* ════════════════════════════════════════════
MAIN
════════════════════════════════════════════ */
.main {
margin-left: var(--sw);
padding-top: var(--tb);
}
.page { padding: 26px 26px; }
/* ════════════════════════════════════════════
CARDS BASE
════════════════════════════════════════════ */
.card-box {
background: var(--card);
border-radius: 16px;
border: 1px solid var(--border);
overflow: hidden;
}
.card-head {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 18px 20px 0;
}
.card-title { font-size: 14.5px; font-weight: 700; }
.card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.card-body { padding: 18px 20px; }
/* ════════════════════════════════════════════
STAT CARDS
════════════════════════════════════════════ */
.stat-card {
background: var(--card);
border-radius: 16px;
border: 1px solid var(--border);
padding: 20px;
position: relative;
overflow: hidden;
}
.stat-icon {
width: 46px; height: 46px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 21px;
margin-bottom: 14px;
}
.stat-val {
font-size: 26px; font-weight: 800;
letter-spacing: -.5px; line-height: 1;
}
.stat-lbl {
font-size: 13px; color: var(--muted); margin-top: 4px;
}
.stat-trend {
display: inline-flex; align-items: center; gap: 2px;
font-size: 12px; font-weight: 700;
padding: 3px 9px; border-radius: 20px;
margin-top: 10px;
}
.trend-up { background: var(--success-10); color: #16a34a; }
.trend-down { background: var(--danger-10); color: #dc2626; }
/* Decorative bg shape */
.stat-deco {
position: absolute;
right: -14px; top: -14px;
width: 80px; height: 80px;
border-radius: 50%;
opacity: .06;
}
/* Mini bar chart (CSS only) */
.mini-bars {
display: flex; align-items: flex-end; gap: 3px;
height: 36px; margin-top: 12px;
}
.mini-bar {
flex: 1; border-radius: 3px 3px 0 0;
min-height: 4px;
}
/* ════════════════════════════════════════════
HIGHLIGHT ROW (KPI strip)
════════════════════════════════════════════ */
.kpi-strip {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
border-radius: 16px;
padding: 22px 24px;
color: #fff;
position: relative;
overflow: hidden;
}
.kpi-strip::before {
content: '';
position: absolute;
right: -30px; top: -30px;
width: 160px; height: 160px;
background: rgba(255,255,255,.08);
border-radius: 50%;
}
.kpi-strip::after {
content: '';
position: absolute;
right: 40px; bottom: -40px;
width: 110px; height: 110px;
background: rgba(255,255,255,.06);
border-radius: 50%;
}
.kpi-strip .kpi-val { font-size: 32px; font-weight: 800; letter-spacing: -.5px; }
.kpi-strip .kpi-lbl { font-size: 13px; opacity: .8; margin-top: 2px; }
.kpi-strip .kpi-note { font-size: 12px; opacity: .7; margin-top: 10px; }
/* ════════════════════════════════════════════
ORDERS TABLE
════════════════════════════════════════════ */
.orders-tbl { font-size: 13px; }
.orders-tbl thead th {
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em;
color: var(--muted);
background: var(--body-bg);
padding: 11px 16px;
border-bottom: 1px solid var(--border);
}
.orders-tbl tbody td {
padding: 12px 16px;
vertical-align: middle;
border-bottom: 1px solid var(--border);
}
.orders-tbl tbody tr:last-child td { border-bottom: none; }
.orders-tbl tbody tr:hover { background: #f8fafc; }
.prod-thumb {
width: 38px; height: 38px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 17px;
}
.prod-name { font-weight: 600; font-size: 13px; }
.prod-cat { font-size: 11px; color: var(--muted); }
.status-pill {
display: inline-block;
font-size: 11px; font-weight: 700;
padding: 4px 11px; border-radius: 20px;
}
.s-delivered { background: var(--success-10); color: #15803d; }
.s-pending { background: var(--warning-10); color: #a16207; }
.s-processing{ background: #dbeafe; color: #1d4ed8; }
.s-cancelled { background: var(--danger-10); color: #b91c1c; }
/* ════════════════════════════════════════════
BAR CHART — CSS only
════════════════════════════════════════════ */
.css-chart {
display: flex;
align-items: flex-end;
gap: 6px;
height: 160px;
padding-bottom: 28px;
position: relative;
}
.css-chart::before {
/* horizontal guide lines */
content: '';
position: absolute;
left: 0; right: 0; top: 0; bottom: 28px;
background: repeating-linear-gradient(
to bottom,
var(--border) 0px, var(--border) 1px,
transparent 1px, transparent 25%
);
pointer-events: none;
}
.css-bar-wrap {
flex: 1;
display: flex; flex-direction: column; align-items: center;
height: 100%; justify-content: flex-end; gap: 4px;
}
.css-bar {
width: 100%; border-radius: 5px 5px 0 0;
transition: opacity .15s;
}
.css-bar:hover { opacity: .75; }
.css-bar-lbl { font-size: 10px; color: var(--muted); }
/* ════════════════════════════════════════════
PROGRESS PRODUCTS
════════════════════════════════════════════ */
.prog-row { margin-bottom: 16px; }
.prog-row:last-child { margin-bottom: 0; }
.prog-info {
display: flex; justify-content: space-between;
font-size: 13px; margin-bottom: 5px;
}
.prog-info span:last-child { font-weight: 600; }
.prog-track {
height: 7px; background: #e2e8f0;
border-radius: 99px; overflow: hidden;
}
.prog-fill { height: 100%; border-radius: 99px; }
/* ════════════════════════════════════════════
ACTIVITY FEED
════════════════════════════════════════════ */
.act-item {
display: flex; gap: 12px;
padding: 11px 0;
border-bottom: 1px solid var(--border);
}
.act-item:last-child { border-bottom: none; padding-bottom: 0; }
.act-icon {
width: 36px; height: 36px; border-radius: 10px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
}
.act-text { font-size: 13px; line-height: 1.5; }
.act-time { font-size: 11px; color: var(--muted); margin-top: 1px; }
/* ════════════════════════════════════════════
TRAFFIC SOURCES
════════════════════════════════════════════ */
.src-item {
display: flex; align-items: center; gap: 10px;
margin-bottom: 13px;
}
.src-item:last-child { margin-bottom: 0; }
.src-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.src-name { font-size: 13px; flex: 1; }
.src-val { font-size: 13px; font-weight: 700; width: 52px; text-align: right; }
.src-pct { font-size: 11.5px; color: var(--muted); width: 34px; text-align: right; }
.src-bar-track { flex: 1; height: 5px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.src-bar-fill { height: 100%; border-radius: 99px; }
/* ════════════════════════════════════════════
DONUT — CSS only
════════════════════════════════════════════ */
.css-donut {
width: 130px; height: 130px;
border-radius: 50%;
background: conic-gradient(
#6366f1 0% 42%,
#06b6d4 42% 68%,
#f59e0b 68% 88%,
#22c55e 88% 100%
);
position: relative;
flex-shrink: 0;
}
.css-donut::after {
content: '';
position: absolute;
inset: 30px;
background: var(--card);
border-radius: 50%;
}
/* ════════════════════════════════════════════
RATINGS
════════════════════════════════════════════ */
.rating-row {
display: flex; align-items: center; gap: 8px;
margin-bottom: 9px; font-size: 13px;
}
.rating-row:last-child { margin-bottom: 0; }
.rating-stars { color: #f59e0b; font-size: 11px; letter-spacing: 1px; }
.rating-track { flex: 1; height: 7px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.rating-fill { height: 100%; background: #f59e0b; border-radius: 99px; }
.rating-pct { font-size: 12px; color: var(--muted); width: 30px; text-align: right; }
/* ════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════ */
@media (max-width: 991.98px) {
.sidebar { display: none; }
.topbar { left: 0; }
.main { margin-left: 0; }
}
</style>
</head>
<body>
<!-- ════════════════════════════════════════════
SIDEBAR
════════════════════════════════════════════ -->
<aside class="sidebar">
<a href="#" class="sb-brand">
<div class="sb-brand-icon"><i class="bi bi-box-seam-fill"></i></div>
<span class="sb-brand-name">Boitify</span>
<span class="sb-brand-badge">PRO</span>
</a>
<div class="sb-scroll">
<div class="sb-label">Principal</div>
<a href="#" class="sb-link active">
<i class="bi bi-grid-fill"></i> Tableau de bord
</a>
<a href="#" class="sb-link">
<i class="bi bi-bar-chart-line-fill"></i> Analytiques
</a>
<a href="#" class="sb-link">
<i class="bi bi-wallet2"></i> Revenus
</a>
<div class="sb-label">Boutique</div>
<a href="#" class="sb-link">
<i class="bi bi-bag-fill"></i> Produits
</a>
<a href="#" class="sb-link">
<i class="bi bi-receipt-cutoff"></i> Commandes
<span class="sb-badge">12</span>
</a>
<a href="#" class="sb-link">
<i class="bi bi-people-fill"></i> Clients
</a>
<a href="#" class="sb-link">
<i class="bi bi-truck"></i> Livraisons
</a>
<a href="#" class="sb-link">
<i class="bi bi-percent"></i> Promotions
<span class="sb-badge orange">3</span>
</a>
<a href="#" class="sb-link">
<i class="bi bi-star-fill"></i> Avis clients
</a>
<a href="#" class="sb-link">
<i class="bi bi-box-seam"></i> Inventaire
</a>
<div class="sb-label">Configuration</div>
<a href="#" class="sb-link">
<i class="bi bi-gear-fill"></i> Paramètres
</a>
<a href="#" class="sb-link">
<i class="bi bi-shield-fill-check"></i> Sécurité
</a>
<a href="#" class="sb-link">
<i class="bi bi-question-circle-fill"></i> Aide
</a>
</div>
<div class="sb-footer">
<a href="#" class="sb-user">
<div class="sb-user-avatar">
<img src="https://i.pravatar.cc/80?img=11" alt="avatar" />
</div>
<div>
<div class="sb-user-name">Mezga Admin</div>
<div class="sb-user-role">Super Admin</div>
</div>
<div class="sb-user-dot"></div>
</a>
</div>
</aside>
<!-- ════════════════════════════════════════════
TOPBAR
════════════════════════════════════════════ -->
<header class="topbar">
<div class="tb-page-info">
<div class="tb-page-title">Tableau de bord</div>
<div class="tb-breadcrumb">
<a href="#">Accueil</a> / Aperçu
</div>
</div>
<div class="topbar-search d-none d-lg-block">
<i class="bi bi-search s-icon"></i>
<input type="search" placeholder="Rechercher produits, commandes…" />
</div>
<div class="tb-spacer"></div>
<a href="#" class="tb-btn" title="Notifications">
<i class="bi bi-bell-fill"></i>
<span class="dot"></span>
</a>
<a href="#" class="tb-btn" title="Messages">
<i class="bi bi-chat-dots-fill"></i>
</a>
<a href="#" class="tb-btn" title="Paramètres">
<i class="bi bi-gear-fill"></i>
</a>
<div class="tb-avatar">
<img src="https://i.pravatar.cc/80?img=11" alt="avatar" />
</div>
</header>
<!-- ════════════════════════════════════════════
MAIN CONTENT
════════════════════════════════════════════ -->
<main class="main">
<div class="page">
<!-- ── PAGE HEADER ── -->
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
<div>
<h1 style="font-size:21px;font-weight:800;letter-spacing:-.3px;">Tableau de bord</h1>
<p style="font-size:13px;color:var(--muted);margin-top:3px;">
Bonjour, Mezga ! Voici l'aperçu de votre boutique — Avril 2026.
</p>
</div>
<div class="d-flex gap-2">
<button class="btn btn-sm d-flex align-items-center gap-2"
style="border-radius:10px;font-size:13px;border:1px solid var(--border);background:var(--card);color:var(--dark);">
<i class="bi bi-calendar3"></i> Avr 2026
</button>
<button class="btn btn-sm d-flex align-items-center gap-2"
style="border-radius:10px;font-size:13px;background:var(--primary);color:#fff;border:none;">
<i class="bi bi-download"></i> Exporter
</button>
</div>
</div>
<!-- ── KPI STRIP (hero) ── -->
<div class="kpi-strip mb-4">
<div class="row gy-3">
<div class="col-12 col-sm-6 col-md-3">
<div class="kpi-val">€142 K</div>
<div class="kpi-lbl">Chiffre d'affaires</div>
<div class="kpi-note"><i class="bi bi-arrow-up-short"></i> +8.1% ce mois</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="kpi-val">8 942</div>
<div class="kpi-lbl">Commandes totales</div>
<div class="kpi-note"><i class="bi bi-arrow-up-short"></i> +12.4% ce mois</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="kpi-val">24 610</div>
<div class="kpi-lbl">Clients actifs</div>
<div class="kpi-note"><i class="bi bi-arrow-up-short"></i> +5.3% ce mois</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="kpi-val">1.8%</div>
<div class="kpi-lbl">Taux de retour</div>
<div class="kpi-note"><i class="bi bi-arrow-down-short"></i> -0.4% ce mois</div>
</div>
</div>
</div>
<!-- ── 4 STAT CARDS ── -->
<div class="row g-3 mb-4">
<div class="col-6 col-xl-3">
<div class="stat-card">
<div class="stat-deco" style="background:var(--primary);"></div>
<div class="stat-icon" style="background:var(--primary-10);color:var(--primary);">
<i class="bi bi-bag-check-fill"></i>
</div>
<div class="stat-val">8 942</div>
<div class="stat-lbl">Commandes</div>
<div class="stat-trend trend-up"><i class="bi bi-arrow-up-short"></i>+12.4%</div>
<div class="mini-bars mt-2">
<div class="mini-bar" style="height:40%;background:#c7d2fe;"></div>
<div class="mini-bar" style="height:60%;background:#a5b4fc;"></div>
<div class="mini-bar" style="height:45%;background:#a5b4fc;"></div>
<div class="mini-bar" style="height:75%;background:#818cf8;"></div>
<div class="mini-bar" style="height:55%;background:#818cf8;"></div>
<div class="mini-bar" style="height:85%;background:#6366f1;"></div>
<div class="mini-bar" style="height:70%;background:#6366f1;"></div>
<div class="mini-bar" style="height:95%;background:#4f46e5;"></div>
</div>
</div>
</div>
<div class="col-6 col-xl-3">
<div class="stat-card">
<div class="stat-deco" style="background:var(--success);"></div>
<div class="stat-icon" style="background:var(--success-10);color:var(--success);">
<i class="bi bi-currency-euro"></i>
</div>
<div class="stat-val">€142 K</div>
<div class="stat-lbl">Revenus</div>
<div class="stat-trend trend-up"><i class="bi bi-arrow-up-short"></i>+8.1%</div>
<div class="mini-bars mt-2">
<div class="mini-bar" style="height:30%;background:#bbf7d0;"></div>
<div class="mini-bar" style="height:50%;background:#86efac;"></div>
<div class="mini-bar" style="height:42%;background:#86efac;"></div>
<div class="mini-bar" style="height:68%;background:#4ade80;"></div>
<div class="mini-bar" style="height:55%;background:#4ade80;"></div>
<div class="mini-bar" style="height:80%;background:#22c55e;"></div>
<div class="mini-bar" style="height:72%;background:#22c55e;"></div>
<div class="mini-bar" style="height:92%;background:#16a34a;"></div>
</div>
</div>
</div>
<div class="col-6 col-xl-3">
<div class="stat-card">
<div class="stat-deco" style="background:var(--warning);"></div>
<div class="stat-icon" style="background:var(--warning-10);color:var(--warning);">
<i class="bi bi-people-fill"></i>
</div>
<div class="stat-val">24 610</div>
<div class="stat-lbl">Clients actifs</div>
<div class="stat-trend trend-up"><i class="bi bi-arrow-up-short"></i>+5.3%</div>
<div class="mini-bars mt-2">
<div class="mini-bar" style="height:35%;background:#fde68a;"></div>
<div class="mini-bar" style="height:52%;background:#fcd34d;"></div>
<div class="mini-bar" style="height:44%;background:#fcd34d;"></div>
<div class="mini-bar" style="height:65%;background:#fbbf24;"></div>
<div class="mini-bar" style="height:58%;background:#fbbf24;"></div>
<div class="mini-bar" style="height:78%;background:#f59e0b;"></div>
<div class="mini-bar" style="height:68%;background:#f59e0b;"></div>
<div class="mini-bar" style="height:88%;background:#d97706;"></div>
</div>
</div>
</div>
<div class="col-6 col-xl-3">
<div class="stat-card">
<div class="stat-deco" style="background:var(--info);"></div>
<div class="stat-icon" style="background:var(--info-10);color:var(--info);">
<i class="bi bi-graph-up-arrow"></i>
</div>
<div class="stat-val">€15.90</div>
<div class="stat-lbl">Panier moyen</div>
<div class="stat-trend trend-up"><i class="bi bi-arrow-up-short"></i>+3.2%</div>
<div class="mini-bars mt-2">
<div class="mini-bar" style="height:38%;background:#a5f3fc;"></div>
<div class="mini-bar" style="height:55%;background:#67e8f9;"></div>
<div class="mini-bar" style="height:48%;background:#67e8f9;"></div>
<div class="mini-bar" style="height:70%;background:#22d3ee;"></div>
<div class="mini-bar" style="height:60%;background:#22d3ee;"></div>
<div class="mini-bar" style="height:82%;background:#06b6d4;"></div>
<div class="mini-bar" style="height:74%;background:#06b6d4;"></div>
<div class="mini-bar" style="height:93%;background:#0891b2;"></div>
</div>
</div>
</div>
</div><!-- /stat cards -->
<!-- ── ROW: CHART + TRAFFIC ── -->
<div class="row g-3 mb-3">
<!-- Revenue bar chart CSS -->
<div class="col-12 col-xl-8">
<div class="card-box h-100">
<div class="card-head">
<div>
<div class="card-title">Évolution des revenus</div>
<div class="card-sub">Chiffre d'affaires mensuel — 2026</div>
</div>
<div class="d-flex gap-2 align-items-center" style="font-size:12px;">
<span style="display:flex;align-items:center;gap:5px;">
<span style="width:10px;height:10px;border-radius:50%;background:var(--primary);display:inline-block;"></span>
Revenus
</span>
<span style="display:flex;align-items:center;gap:5px;">
<span style="width:10px;height:10px;border-radius:50%;background:var(--info);display:inline-block;"></span>
Dépenses
</span>
</div>
</div>
<div class="card-body">
<!-- Grouped bar chart CSS -->
<div style="display:flex;align-items:flex-end;gap:2px;height:180px;padding-bottom:24px;position:relative;">
<!-- grid lines -->
<div style="position:absolute;left:0;right:0;top:0;bottom:24px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;">
<div style="border-top:1px dashed var(--border);width:100%;"></div>
<div style="border-top:1px dashed var(--border);width:100%;"></div>
<div style="border-top:1px dashed var(--border);width:100%;"></div>
<div style="border-top:1px dashed var(--border);width:100%;"></div>
</div>
<!-- Jan -->
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;">
<div style="width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;">
<div style="flex:1;height:52px;background:var(--primary);border-radius:4px 4px 0 0;opacity:.85;"></div>
<div style="flex:1;height:34px;background:var(--info);border-radius:4px 4px 0 0;opacity:.7;"></div>
</div>
<div style="font-size:10px;color:var(--muted);">Jan</div>
</div>
<!-- Fév -->
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;">
<div style="width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;">
<div style="flex:1;height:76px;background:var(--primary);border-radius:4px 4px 0 0;"></div>
<div style="flex:1;height:48px;background:var(--info);border-radius:4px 4px 0 0;opacity:.7;"></div>
</div>
<div style="font-size:10px;color:var(--muted);">Fév</div>
</div>
<!-- Mar -->
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;">
<div style="width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;">
<div style="flex:1;height:66px;background:var(--primary);border-radius:4px 4px 0 0;"></div>
<div style="flex:1;height:41px;background:var(--info);border-radius:4px 4px 0 0;opacity:.7;"></div>
</div>
<div style="font-size:10px;color:var(--muted);">Mar</div>
</div>
<!-- Avr -->
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;">
<div style="width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;">
<div style="flex:1;height:92px;background:var(--primary);border-radius:4px 4px 0 0;"></div>
<div style="flex:1;height:56px;background:var(--info);border-radius:4px 4px 0 0;opacity:.7;"></div>
</div>
<div style="font-size:10px;color:var(--muted);">Avr</div>
</div>
<!-- Mai -->
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;">
<div style="width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;">
<div style="flex:1;height:82px;background:var(--primary);border-radius:4px 4px 0 0;"></div>
<div style="flex:1;height:47px;background:var(--info);border-radius:4px 4px 0 0;opacity:.7;"></div>
</div>
<div style="font-size:10px;color:var(--muted);">Mai</div>
</div>
<!-- Jun -->
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;">
<div style="width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;">
<div style="flex:1;height:118px;background:var(--primary);border-radius:4px 4px 0 0;"></div>
<div style="flex:1;height:70px;background:var(--info);border-radius:4px 4px 0 0;opacity:.7;"></div>
</div>
<div style="font-size:10px;color:var(--muted);">Jun</div>
</div>
<!-- Jul -->
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;">
<div style="width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;">
<div style="flex:1;height:101px;background:var(--primary);border-radius:4px 4px 0 0;"></div>
<div style="flex:1;height:61px;background:var(--info);border-radius:4px 4px 0 0;opacity:.7;"></div>
</div>
<div style="font-size:10px;color:var(--muted);">Jul</div>
</div>
<!-- Aoû -->
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;">
<div style="width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;">
<div style="flex:1;height:130px;background:var(--primary);border-radius:4px 4px 0 0;"></div>
<div style="flex:1;height:76px;background:var(--info);border-radius:4px 4px 0 0;opacity:.7;"></div>
</div>
<div style="font-size:10px;color:var(--muted);">Aoû</div>
</div>
<!-- Sep -->
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;">
<div style="width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;">
<div style="flex:1;height:111px;background:var(--primary);border-radius:4px 4px 0 0;"></div>
<div style="flex:1;height:64px;background:var(--info);border-radius:4px 4px 0 0;opacity:.7;"></div>
</div>
<div style="font-size:10px;color:var(--muted);">Sep</div>
</div>
<!-- Oct -->
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;">
<div style="width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;">
<div style="flex:1;height:145px;background:var(--primary);border-radius:4px 4px 0 0;"></div>
<div style="flex:1;height:84px;background:var(--info);border-radius:4px 4px 0 0;opacity:.7;"></div>
</div>
<div style="font-size:10px;color:var(--muted);">Oct</div>
</div>
<!-- Nov -->
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;">
<div style="width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;">
<div style="flex:1;height:125px;background:var(--primary);border-radius:4px 4px 0 0;"></div>
<div style="flex:1;height:72px;background:var(--info);border-radius:4px 4px 0 0;opacity:.7;"></div>
</div>
<div style="font-size:10px;color:var(--muted);">Nov</div>
</div>
<!-- Déc -->
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;">
<div style="width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;">
<div style="flex:1;height:156px;background:var(--primary);border-radius:4px 4px 0 0;"></div>
<div style="flex:1;height:91px;background:var(--info);border-radius:4px 4px 0 0;opacity:.7;"></div>
</div>
<div style="font-size:10px;color:var(--muted);">Déc</div>
</div>
</div>
</div>
</div>
</div>
<!-- Traffic sources + CSS donut -->
<div class="col-12 col-xl-4">
<div class="card-box h-100">
<div class="card-head">
<div>
<div class="card-title">Sources de trafic</div>
<div class="card-sub">Répartition des visiteurs</div>
</div>
</div>
<div class="card-body">
<!-- CSS donut -->
<div class="d-flex align-items-center justify-content-center mb-4">
<div class="css-donut"></div>
</div>
<div class="src-item">
<div class="src-dot" style="background:var(--primary);"></div>
<div class="src-name">Organique (SEO)</div>
<div class="src-bar-track"><div class="src-bar-fill" style="width:42%;background:var(--primary);"></div></div>
<div class="src-val">38 240</div>
<div class="src-pct">42%</div>
</div>
<div class="src-item">
<div class="src-dot" style="background:var(--info);"></div>
<div class="src-name">Réseaux sociaux</div>
<div class="src-bar-track"><div class="src-bar-fill" style="width:26%;background:var(--info);"></div></div>
<div class="src-val">24 100</div>
<div class="src-pct">26%</div>
</div>
<div class="src-item">
<div class="src-dot" style="background:var(--warning);"></div>
<div class="src-name">Publicités payantes</div>
<div class="src-bar-track"><div class="src-bar-fill" style="width:20%;background:var(--warning);"></div></div>
<div class="src-val">18 500</div>
<div class="src-pct">20%</div>
</div>
<div class="src-item">
<div class="src-dot" style="background:var(--success);"></div>
<div class="src-name">Accès direct</div>
<div class="src-bar-track"><div class="src-bar-fill" style="width:12%;background:var(--success);"></div></div>
<div class="src-val">10 900</div>
<div class="src-pct">12%</div>
</div>
</div>
</div>
</div>
</div><!-- /row chart+traffic -->
<!-- ── ROW: ORDERS TABLE + ACTIVITY ── -->
<div class="row g-3 mb-3">
<!-- Orders -->
<div class="col-12 col-xl-8">
<div class="card-box">
<div class="card-head pb-3">
<div>
<div class="card-title">Commandes récentes</div>
<div class="card-sub">12 nouvelles aujourd'hui</div>
</div>
<a href="#" class="btn btn-sm"
style="border-radius:9px;font-size:12.5px;border:1px solid var(--border);background:var(--card);color:var(--dark);">
Voir tout <i class="bi bi-arrow-right ms-1"></i>
</a>
</div>
<div class="table-responsive">
<table class="table orders-tbl mb-0">
<thead>
<tr>
<th>Produit</th>
<th>Commande</th>
<th>Client</th>
<th>Date</th>
<th>Montant</th>
<th>Statut</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center gap-2">
<div class="prod-thumb" style="background:var(--primary-10);color:var(--primary);">
<i class="bi bi-phone-fill"></i>
</div>
<div>
<div class="prod-name">iPhone 16 Pro</div>
<div class="prod-cat">Smartphones</div>
</div>
</div>
</td>
<td style="color:var(--muted);">#8821</td>
<td>Sarah K.</td>
<td style="color:var(--muted);font-size:12px;">05 Avr 2026</td>
<td style="font-weight:700;">€1 299</td>
<td><span class="status-pill s-delivered">Livré</span></td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center gap-2">
<div class="prod-thumb" style="background:var(--warning-10);color:var(--warning);">
<i class="bi bi-laptop-fill"></i>
</div>
<div>
<div class="prod-name">MacBook Air M3</div>
<div class="prod-cat">Ordinateurs</div>
</div>
</div>
</td>
<td style="color:var(--muted);">#8820</td>
<td>Ahmed B.</td>
<td style="color:var(--muted);font-size:12px;">05 Avr 2026</td>
<td style="font-weight:700;">€1 499</td>
<td><span class="status-pill s-processing">En cours</span></td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center gap-2">
<div class="prod-thumb" style="background:var(--success-10);color:var(--success);">
<i class="bi bi-headphones"></i>
</div>
<div>
<div class="prod-name">AirPods Pro 3</div>
<div class="prod-cat">Audio</div>
</div>
</div>
</td>
<td style="color:var(--muted);">#8819</td>
<td>Marie L.</td>
<td style="color:var(--muted);font-size:12px;">04 Avr 2026</td>
<td style="font-weight:700;">€279</td>
<td><span class="status-pill s-pending">En attente</span></td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center gap-2">
<div class="prod-thumb" style="background:var(--violet-10);color:var(--violet);">
<i class="bi bi-watch"></i>
</div>
<div>
<div class="prod-name">Apple Watch S10</div>
<div class="prod-cat">Montres</div>
</div>
</div>
</td>
<td style="color:var(--muted);">#8818</td>
<td>Lucas M.</td>
<td style="color:var(--muted);font-size:12px;">04 Avr 2026</td>
<td style="font-weight:700;">€449</td>
<td><span class="status-pill s-delivered">Livré</span></td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center gap-2">
<div class="prod-thumb" style="background:var(--danger-10);color:var(--danger);">
<i class="bi bi-camera-fill"></i>
</div>
<div>
<div class="prod-name">Sony A7C II</div>
<div class="prod-cat">Photo</div>
</div>
</div>
</td>
<td style="color:var(--muted);">#8817</td>
<td>Nina T.</td>
<td style="color:var(--muted);font-size:12px;">03 Avr 2026</td>
<td style="font-weight:700;">€2 199</td>
<td><span class="status-pill s-cancelled">Annulé</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Activity -->
<div class="col-12 col-xl-4">
<div class="card-box h-100">
<div class="card-head">
<div>
<div class="card-title">Activité récente</div>
<div class="card-sub">Dernières actions en temps réel</div>
</div>
</div>
<div class="card-body">
<div class="act-item">
<div class="act-icon" style="background:var(--primary-10);color:var(--primary);">
<i class="bi bi-cart-plus-fill"></i>
</div>
<div>
<div class="act-text">Commande <strong>#8821</strong> passée par Sarah K.</div>
<div class="act-time"><i class="bi bi-clock me-1"></i>il y a 5 min</div>
</div>
</div>
<div class="act-item">
<div class="act-icon" style="background:var(--success-10);color:var(--success);">
<i class="bi bi-person-check-fill"></i>
</div>
<div>
<div class="act-text">Nouveau client <strong>Emma D.</strong> inscrit</div>
<div class="act-time"><i class="bi bi-clock me-1"></i>il y a 22 min</div>
</div>
</div>
<div class="act-item">
<div class="act-icon" style="background:var(--warning-10);color:var(--warning);">
<i class="bi bi-star-fill"></i>
</div>
<div>
<div class="act-text">Avis <strong>5 étoiles</strong> pour iPhone 16 Pro</div>
<div class="act-time"><i class="bi bi-clock me-1"></i>il y a 47 min</div>
</div>
</div>
<div class="act-item">
<div class="act-icon" style="background:var(--danger-10);color:var(--danger);">
<i class="bi bi-exclamation-triangle-fill"></i>
</div>
<div>
<div class="act-text">Stock bas : <strong>T-shirt Premium</strong> (3 restants)</div>
<div class="act-time"><i class="bi bi-clock me-1"></i>il y a 1 h</div>
</div>
</div>
<div class="act-item">
<div class="act-icon" style="background:var(--info-10);color:var(--info);">
<i class="bi bi-truck"></i>
</div>
<div>
<div class="act-text">Livraison expédiée — <strong>#ORD-8812</strong></div>
<div class="act-time"><i class="bi bi-clock me-1"></i>il y a 2 h</div>
</div>
</div>
<div class="act-item">
<div class="act-icon" style="background:#f0fdf4;color:#15803d;">
<i class="bi bi-tag-fill"></i>
</div>
<div>
<div class="act-text">Promo <strong>SUMMER20</strong> activée (120 usages)</div>
<div class="act-time"><i class="bi bi-clock me-1"></i>il y a 3 h</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /row orders+activity -->
<!-- ── ROW: TOP PRODUCTS + SATISFACTION ── -->
<div class="row g-3 mb-3">
<!-- Top products -->
<div class="col-12 col-md-6 col-xl-4">
<div class="card-box h-100">
<div class="card-head">
<div>
<div class="card-title">Top produits</div>
<div class="card-sub">Par volume de ventes ce mois</div>
</div>
</div>
<div class="card-body">
<div class="prog-row">
<div class="prog-info">
<span><i class="bi bi-phone-fill me-2" style="color:var(--primary);"></i>iPhone 16 Pro</span>
<span>842 ventes</span>
</div>
<div class="prog-track">
<div class="prog-fill" style="width:84%;background:var(--primary);"></div>
</div>
</div>
<div class="prog-row">
<div class="prog-info">
<span><i class="bi bi-laptop-fill me-2" style="color:var(--info);"></i>MacBook Air M3</span>
<span>614 ventes</span>
</div>
<div class="prog-track">
<div class="prog-fill" style="width:61%;background:var(--info);"></div>
</div>
</div>
<div class="prog-row">
<div class="prog-info">
<span><i class="bi bi-headphones me-2" style="color:var(--success);"></i>AirPods Pro 3</span>
<span>529 ventes</span>
</div>
<div class="prog-track">
<div class="prog-fill" style="width:53%;background:var(--success);"></div>
</div>
</div>
<div class="prog-row">
<div class="prog-info">
<span><i class="bi bi-watch me-2" style="color:var(--violet);"></i>Apple Watch S10</span>
<span>411 ventes</span>
</div>
<div class="prog-track">
<div class="prog-fill" style="width:41%;background:var(--violet);"></div>
</div>
</div>
<div class="prog-row">
<div class="prog-info">
<span><i class="bi bi-camera-fill me-2" style="color:var(--danger);"></i>Sony A7C II</span>
<span>298 ventes</span>
</div>
<div class="prog-track">
<div class="prog-fill" style="width:30%;background:var(--danger);"></div>
</div>
</div>
<div class="prog-row">
<div class="prog-info">
<span><i class="bi bi-tablet me-2" style="color:var(--warning);"></i>iPad Pro M4</span>
<span>210 ventes</span>
</div>
<div class="prog-track">
<div class="prog-fill" style="width:21%;background:var(--warning);"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Conversion funnel -->
<div class="col-12 col-md-6 col-xl-4">
<div class="card-box h-100">
<div class="card-head">
<div>
<div class="card-title">Entonnoir de conversion</div>
<div class="card-sub">Parcours visiteur → achat</div>
</div>
</div>
<div class="card-body d-flex flex-column gap-3">
<div>
<div class="d-flex justify-content-between mb-1" style="font-size:13px;">
<span><i class="bi bi-eye-fill me-2" style="color:#6366f1;"></i>Visites</span>
<span class="fw-bold">91 740</span>
</div>
<div style="height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;">
<div style="width:100%;height:100%;background:#6366f1;border-radius:99px;"></div>
</div>
</div>
<div>
<div class="d-flex justify-content-between mb-1" style="font-size:13px;">
<span><i class="bi bi-bag me-2" style="color:#818cf8;"></i>Vues produit</span>
<span class="fw-bold">62 400</span>
</div>
<div style="height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;">
<div style="width:68%;height:100%;background:#818cf8;border-radius:99px;"></div>
</div>
</div>
<div>
<div class="d-flex justify-content-between mb-1" style="font-size:13px;">
<span><i class="bi bi-cart3 me-2" style="color:#a5b4fc;"></i>Ajout panier</span>
<span class="fw-bold">28 300</span>
</div>
<div style="height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;">
<div style="width:31%;height:100%;background:#a5b4fc;border-radius:99px;"></div>
</div>
</div>
<div>
<div class="d-flex justify-content-between mb-1" style="font-size:13px;">
<span><i class="bi bi-credit-card me-2" style="color:#c7d2fe;"></i>Paiement initié</span>
<span class="fw-bold">11 800</span>
</div>
<div style="height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;">
<div style="width:13%;height:100%;background:#c7d2fe;border-radius:99px;"></div>
</div>
</div>
<div>
<div class="d-flex justify-content-between mb-1" style="font-size:13px;">
<span><i class="bi bi-check-circle-fill me-2" style="color:#22c55e;"></i>Commande finalisée</span>
<span class="fw-bold">8 942</span>
</div>
<div style="height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;">
<div style="width:9.7%;height:100%;background:#22c55e;border-radius:99px;"></div>
</div>
</div>
<div class="mt-2 p-3 rounded-3" style="background:var(--primary-10);font-size:13px;">
<i class="bi bi-info-circle me-1" style="color:var(--primary);"></i>
Taux de conversion global : <strong style="color:var(--primary);">9.7%</strong>
</div>
</div>
</div>
</div>
<!-- Satisfaction -->
<div class="col-12 col-xl-4">
<div class="card-box h-100">
<div class="card-head">
<div>
<div class="card-title">Satisfaction client</div>
<div class="card-sub">Basé sur 1 284 avis</div>
</div>
</div>
<div class="card-body">
<div class="text-center mb-4">
<div style="font-size:54px;font-weight:800;color:var(--primary);line-height:1;letter-spacing:-2px;">4.7</div>
<div style="color:#f59e0b;font-size:22px;margin-top:4px;">★★★★★</div>
<div style="font-size:12px;color:var(--muted);margin-top:6px;">Excellente note</div>
</div>
<div class="rating-row">
<span style="font-size:12px;width:14px;">5</span>
<span class="rating-stars">★</span>
<div class="rating-track"><div class="rating-fill" style="width:72%;"></div></div>
<span class="rating-pct">72%</span>
</div>
<div class="rating-row">
<span style="font-size:12px;width:14px;">4</span>
<span class="rating-stars">★</span>
<div class="rating-track"><div class="rating-fill" style="width:18%;"></div></div>
<span class="rating-pct">18%</span>
</div>
<div class="rating-row">
<span style="font-size:12px;width:14px;">3</span>
<span class="rating-stars">★</span>
<div class="rating-track"><div class="rating-fill" style="width:6%;"></div></div>
<span class="rating-pct">6%</span>
</div>
<div class="rating-row">
<span style="font-size:12px;width:14px;">2</span>
<span class="rating-stars">★</span>
<div class="rating-track"><div class="rating-fill" style="width:3%;"></div></div>
<span class="rating-pct">3%</span>
</div>
<div class="rating-row">
<span style="font-size:12px;width:14px;">1</span>
<span class="rating-stars">★</span>
<div class="rating-track"><div class="rating-fill" style="width:1%;"></div></div>
<span class="rating-pct">1%</span>
</div>
<div class="row g-2 mt-3">
<div class="col-6">
<div class="p-2 rounded-3 text-center" style="background:var(--success-10);">
<div style="font-size:16px;font-weight:800;color:var(--success);">96%</div>
<div style="font-size:11px;color:var(--muted);">Recommandent</div>
</div>
</div>
<div class="col-6">
<div class="p-2 rounded-3 text-center" style="background:var(--primary-10);">
<div style="font-size:16px;font-weight:800;color:var(--primary);">74</div>
<div style="font-size:11px;color:var(--muted);">Score NPS</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /row products+satisfaction -->
<!-- ── FOOTER ── -->
<div class="mt-4 pt-3 text-center"
style="border-top:1px solid var(--border);font-size:12px;color:var(--muted);">
© 2026 <strong>Boitify</strong> · Dashboard E-Commerce · Tous droits réservés
·
<a href="#" style="color:var(--primary);text-decoration:none;">Aide</a>
·
<a href="#" style="color:var(--primary);text-decoration:none;">Politique de confidentialité</a>
</div>
</div><!-- /page -->
</main>
<!-- Bootstrap JS (pour dropdowns & tooltips si besoin plus tard) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>