/* ==========================================================
   LeMultiservice Corporate — charte graphique (design A, maquette d'origine)
   ========================================================== */
:root {
  --sidebar: #04344A;
  --sidebar-2: #0B4A63;
  --sidebar-active: #23848A;
  --primary: #23848A;
  --primary-600: #1C6F74;
  --primary-700: #0E4F5C;
  --primary-50: #F0F8F7;
  --primary-100: #DDF0EC;
  --primary-200: #BFE2DC;
  --bg: #F2F7F7;
  --surface: #FFFFFF;
  --surface-2: #FAFBFB;
  --border: #E0EAEA;
  --border-2: #D6E4E1;
  --text: #0C2430;
  --text-2: #2E4652;
  --muted: #5F7781;
  --muted-2: #8FA3AB;
  --warn: #9A5B00;
  --warn-bg: #FFF3DC;
  --danger: #B42318;
  --danger-bg: #FDE6E4;
  --info: #2552C4;
  --info-bg: #E4EDFF;
  --orange: #F2A33A;
  --purple: #8E5CF0;
  --blue: #2F80ED;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(8, 36, 48, .05), 0 4px 16px rgba(8, 36, 48, .05);
  --shadow-lg: 0 12px 40px rgba(4, 52, 74, .18);
  --sidebar-w: 248px;
  --topbar-h: 68px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
.icn { font-size: 19px; line-height: 1; flex-shrink: 0; display: inline-block; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 16px; font-weight: 700; }
h4 { font-size: 14px; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.green { color: var(--primary); }
.hidden, [hidden] { display: none !important; }

/* ---------------- Layout ---------------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--sidebar) 0%, #053044 100%);
  color: #DCE7EB;
  position: fixed; inset: 0 auto 0 0;
  display: flex; flex-direction: column;
  z-index: 40;
  transition: transform .25s ease;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 22px 20px 26px; }
.brand-logo { width: 38px; height: 38px; flex-shrink: 0; }
.brand-name { font-weight: 800; color: #fff; font-size: 16px; line-height: 1.1; letter-spacing: -.01em; }
.brand-sub { color: #5BC0C2; font-weight: 600; font-size: 14px; }
.nav { padding: 0 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 9px;
  color: #CFDCE0; font-weight: 500; font-size: 13.5px;
  transition: background .15s, color .15s;
}
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.active { background: var(--sidebar-active); color: #fff; font-weight: 700; box-shadow: 0 4px 14px rgba(35,132,138,.35); }
.nav a .badge-count { margin-left: auto; background: var(--orange); color: #3a2300; font-size: 11px; font-weight: 800; border-radius: 99px; padding: 0 7px; line-height: 18px; }
.nav a.active .badge-count { background: #fff; color: var(--primary-700); }
.sidebar-foot { padding: 16px; margin: 12px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 12px; color: #B9CBD1; }
.sidebar-foot strong { color: #fff; display: block; font-size: 13px; margin-bottom: 2px; }
.sidebar-foot .btn { margin-top: 10px; width: 100%; }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; padding: 0 28px;
  position: sticky; top: 0; z-index: 30;
}
.topbar .search { max-width: 420px; flex: 1; }
.topbar-spacer { flex: 1; }
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 10px;
  display: inline-grid; place-items: center; border: 0; background: transparent; cursor: pointer; color: var(--text-2);
}
.icon-btn:hover { background: var(--bg); }
.icon-btn .dot {
  position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--primary); color: #fff; border-radius: 99px; font-size: 10px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid #fff;
}
.icon-btn .dot.red { background: #E5484D; }
.user-chip { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 12px; border: 0; background: transparent; text-align: left; }
.user-chip:hover { background: var(--bg); }
.user-chip .name { font-weight: 700; font-size: 13px; line-height: 1.2; }
.user-chip .role { font-size: 11.5px; color: var(--muted); }
.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--primary-100); color: var(--primary-700); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.menu-toggle { display: none; }

.content { padding: 28px; flex: 1; width: 100%; max-width: 1400px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head p { color: var(--muted); margin-top: 4px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; font-size: 13px; margin-bottom: 14px; cursor: pointer; }
.back-link:hover { color: var(--primary); }

/* dropdown */
.dropdown { position: relative; }
.dropdown-panel {
  position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 240px; z-index: 50; padding: 6px; display: none;
  animation: pop .15s ease;
}
.dropdown.open .dropdown-panel { display: block; }
.dropdown-panel a, .dropdown-panel button.item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px;
  border: 0; background: none; cursor: pointer; font-size: 13px; text-align: left;
}
.dropdown-panel a:hover, .dropdown-panel button.item:hover { background: var(--bg); }
.dropdown-panel .sep { height: 1px; background: var(--border); margin: 6px 0; }
.notif-panel { width: 360px; max-height: 440px; overflow-y: auto; }
.notif { display: flex; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer; }
.notif:hover { background: var(--bg); }
.notif.unread { background: var(--primary-50); }
.notif .ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-100); color: var(--primary); flex-shrink: 0; }
.notif .t { font-size: 13px; font-weight: 600; }
.notif .d { font-size: 11.5px; color: var(--muted); }

@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.content > * { animation: fadeUp .3s ease both; }

/* ---------------- Components ---------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.card-body { padding: 22px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.mt { margin-top: 18px; } .mt-sm { margin-top: 10px; } .mt-lg { margin-top: 28px; }
.mb { margin-bottom: 18px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 9px; border: 1px solid transparent;
  font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .05s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn .icn { font-size: 17px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-600); box-shadow: 0 6px 16px rgba(35,132,138,.28); }
.btn-outline { background: #fff; border-color: var(--border-2); color: var(--text-2); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-outline-green { background: #fff; border-color: var(--primary); color: var(--primary); }
.btn-outline-green:hover { background: var(--primary-50); }
.btn-soft { background: var(--primary-100); color: var(--primary-700); }
.btn-soft:hover { background: var(--primary-200); }
.btn-danger-outline { background: #fff; border-color: #F0A8A2; color: var(--danger); }
.btn-danger-outline:hover { background: var(--danger-bg); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn-xs { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.input, .select, .textarea {
  width: 100%; height: 42px; border: 1px solid var(--border-2); border-radius: 9px; background: #fff;
  padding: 0 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; padding: 10px 14px; min-height: 90px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(35,132,138,.15); }
/* Champ verrouillé (ex. NINEA vérifié par LeMultiservice) : visible mais non modifiable */
.input:disabled, .select:disabled, .textarea:disabled { background-color: var(--surface-2); color: var(--muted); cursor: not-allowed; }
/* Vérification anti-robot et double authentification */
.cf-ts:empty { display: none; }
.cf-ts { min-height: 65px; }
.mfa-qr { display: flex; justify-content: center; margin: 4px 0 10px; }
.mfa-qr img { background: #fff; padding: 10px; border-radius: 12px; border: 1px solid var(--border); }
.mfa-key { display: inline-block; margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: var(--surface-2); font-size: 12px; letter-spacing: .08em; word-break: break-all; }
.mfa-in { font-size: 22px; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.field .hint { font-size: 11.5px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }

.search { position: relative; display: flex; }
.search .input { padding-left: 40px; background: var(--surface-2); }
.search > .icn { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }
.search-big { display: flex; max-width: 660px; }
.search-big .input { height: 46px; border-radius: 10px 0 0 10px; padding-left: 42px; background: #fff; }
.search-big .btn { height: 46px; border-radius: 0 10px 10px 0; width: 56px; padding: 0; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge .icn { font-size: 14px; }
.b-green { background: var(--primary-100); color: var(--primary-700); }
.b-warn { background: var(--warn-bg); color: var(--warn); }
.b-info { background: var(--info-bg); color: var(--info); }
.b-danger { background: var(--danger-bg); color: var(--danger); }
.b-grey { background: #EEF0F1; color: var(--muted); }
.b-purple { background: #F0E9FF; color: #6B3FD1; }
.badge.pill { border-radius: 99px; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { height: 34px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--border-2); background: #fff; font-weight: 600; font-size: 12.5px; cursor: pointer; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { border-color: var(--primary); color: var(--primary); }
.tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tab .n { font-size: 11px; opacity: .8; }
.utabs { display: flex; gap: 26px; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.utab { padding: 12px 2px; font-weight: 600; color: var(--muted); cursor: pointer; border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.utab:hover { color: var(--text); }
.utab.active { color: var(--text); border-color: var(--primary); font-weight: 700; }

/* tables */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--text-2); padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--primary-50); }
.table tr.clickable { cursor: pointer; }
.thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--bg); flex-shrink: 0; }
.table .thumb { width: 42px; height: 42px; border-radius: 8px; }
.img-fallback.thumb .icn { font-size: 22px; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty .ic { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; background: var(--primary-100); color: var(--primary); display: grid; place-items: center; }
.empty .ic .icn { font-size: 30px; }

/* stat cards */
.stat { padding: 18px 20px; }
.stat .label { font-size: 12.5px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.stat .value { font-size: 24px; font-weight: 800; margin-top: 6px; letter-spacing: -.02em; }
.stat .value small { font-size: 13px; font-weight: 700; }
.stat .delta { font-size: 12px; font-weight: 700; color: var(--primary); margin-top: 2px; }
.stat .delta.down { color: var(--danger); }
.stat .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-100); color: var(--primary); }
.stat.hl { background: var(--primary-50); border-color: var(--primary-200); }

/* ---------------- Accueil ---------------- */
.hero {
  position: relative; border-radius: 16px; overflow: hidden; min-height: 230px; color: #fff;
  background: #04344A center/cover no-repeat; display: flex; align-items: center; padding: 36px;
  box-shadow: var(--shadow);
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,24,32,.92) 0%, rgba(4,38,52,.65) 45%, rgba(4,38,52,.05) 80%); }
.hero > * { position: relative; }
.hero h2 { font-size: 30px; line-height: 1.15; max-width: 360px; font-weight: 800; }
.hero p { color: #CFE0E5; margin: 10px 0 18px; max-width: 380px; }
.hero-dots { position: absolute; bottom: 14px; left: 36px; display: flex; gap: 6px; }
.hero-dots span { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.4); cursor: pointer; transition: width .2s; }
.hero-dots span.on { width: 22px; background: #5BC0C2; }
.cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.cat-tile {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 10px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  transition: transform .15s, box-shadow .15s, border-color .15s; min-height: 108px; justify-content: center;
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(4,52,74,.1); border-color: var(--primary-200); }
.cat-tile .ci { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.cat-tile .ci .icn { font-size: 28px; }

/* ---------------- Catalogue ---------------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.p-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.p-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(4,52,74,.12); }
.p-img { height: 140px; background: var(--bg); position: relative; overflow: hidden; cursor: pointer; }
.p-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.p-card:hover .p-img img { transform: scale(1.05); }
.p-img .tag { position: absolute; top: 10px; left: 10px; }
.p-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.p-title { font-weight: 700; font-size: 13.5px; cursor: pointer; }
.p-title:hover { color: var(--primary); }
.p-sub { font-size: 12px; color: var(--muted); }
.p-from { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.p-price { font-weight: 800; color: var(--primary); font-size: 15.5px; margin-top: 2px; }
.p-merchant { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.p-actions { margin-top: auto; padding-top: 12px; }
.img-fallback { width: 100%; height: 100%; display: grid; place-items: center; }
.img-fallback .icn { font-size: 48px; opacity: .85; }
.filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: 18px; }

/* produit */
.pd { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 32px; }
.pd-img { border-radius: 14px; overflow: hidden; background: var(--bg); aspect-ratio: 4/3; border: 1px solid var(--border); }
.pd-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.pd-thumbs div { width: 64px; height: 52px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; opacity: .7; }
.pd-thumbs div.on { border-color: var(--primary); opacity: 1; }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd h1 { font-size: 24px; }
.pd .price { font-size: 28px; font-weight: 800; color: var(--primary); margin: 10px 0 6px; }
.checks { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.checks li { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.checks .icn { color: var(--primary); font-size: 18px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border-2); border-radius: 9px; overflow: hidden; height: 42px; background: #fff; }
.qty button { width: 40px; height: 100%; border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--text-2); display: grid; place-items: center; }
.qty button:hover { background: var(--bg); }
.qty input { width: 54px; height: 100%; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; outline: none; font-weight: 700; }
.qty.sm { height: 32px; }
.qty.sm button { width: 30px; }
.qty.sm input { width: 40px; }
.opt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { border: 1.5px solid var(--border-2); border-radius: 10px; padding: 10px 14px; cursor: pointer; background: #fff; text-align: left; min-width: 150px; }
.opt:hover { border-color: var(--primary-200); }
.opt.on { border-color: var(--primary); background: var(--primary-50); }
.opt .ol { font-weight: 700; font-size: 13px; }
.opt .op { font-size: 12px; color: var(--primary); font-weight: 700; }
.merchant-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.m-logo { width: 46px; height: 46px; border-radius: 50%; background: var(--sidebar); color: #fff; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.stars { color: #F5B301; letter-spacing: 1px; font-size: 13px; }
.review { padding: 14px 0; border-bottom: 1px solid var(--border); }
.review:last-child { border-bottom: 0; }

/* stepper */
.stepper { display: flex; align-items: center; gap: 10px; margin: 6px 0 24px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; font-size: 13px; }
.step .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #E8ECED; color: var(--muted); font-weight: 800; font-size: 13px; }
.step.on { color: var(--text); font-weight: 700; }
.step.on .n { background: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-100); }
.step.done .n { background: var(--primary-100); color: var(--primary); }
.step-line { flex: 1; min-width: 30px; height: 2px; background: var(--border-2); border-radius: 2px; }
.step-line.done { background: var(--primary); }

.line-item { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.line-item:last-child { border-bottom: 0; }
.line-item img, .line-item .li-img { width: 76px; height: 60px; border-radius: 8px; object-fit: cover; background: var(--bg); flex-shrink: 0; }
.line-item .li-main { flex: 1; min-width: 0; }
.line-item .li-total { font-weight: 800; white-space: nowrap; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--text-2); }
.summary-row.total { font-size: 17px; font-weight: 800; color: var(--text); border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px; }
.pay-option { display: flex; gap: 14px; border: 1.5px solid var(--border-2); border-radius: 12px; padding: 16px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.pay-option:hover { border-color: var(--primary-200); }
.pay-option.on { border-color: var(--primary); background: var(--primary-50); }
.pay-option .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-2); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.pay-option.on .radio { border-color: var(--primary); background: var(--primary); color: #fff; }
.pay-option .radio .icn { font-size: 13px; opacity: 0; }
.pay-option.on .radio .icn { opacity: 1; }
.pay-option ul { margin: 6px 0 0 18px; color: var(--text-2); font-size: 12.5px; }
.pay-option.disabled { opacity: .55; cursor: not-allowed; }
.method-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.method { border: 1.5px solid var(--border-2); border-radius: 10px; padding: 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; background: #fff; }
.method.on { border-color: var(--primary); background: var(--primary-50); }
.method .mlogo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 11px; flex-shrink: 0; }

.alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: 10px; font-size: 13px; align-items: flex-start; }
.alert .icn { font-size: 20px; margin-top: -1px; }
.alert-warn { background: var(--warn-bg); color: #6E4100; }
.alert-info { background: var(--info-bg); color: #1B3E95; }
.alert-green { background: var(--primary-50); color: var(--primary-700); border: 1px solid var(--primary-200); }
.alert-danger { background: var(--danger-bg); color: var(--danger); }

.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); }
.tl-item .t { font-weight: 700; font-size: 13px; }
.tl-item .d { font-size: 12px; color: var(--muted); }

.progress { height: 8px; background: #E8ECED; border-radius: 99px; overflow: hidden; }
.progress > div { height: 100%; background: var(--primary); border-radius: 99px; transition: width .4s; }

.kv { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { font-weight: 600; }

.faq details { border-bottom: 1px solid var(--border); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icn { transition: transform .25s; }
.faq details[open] summary .icn { transform: rotate(180deg); }
.faq p { color: var(--text-2); margin-top: 8px; }

.switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #CBD2D5; border-radius: 99px; cursor: pointer; transition: background .2s; }
.switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::before { transform: translateX(18px); }

.chart-box { position: relative; height: 260px; }
.legend { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.legend div { display: flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend b { margin-left: auto; }

/* modal & toast */
.modal-back { position: fixed; inset: 0; background: rgba(8, 23, 30, .5); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 100; padding: 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: pop .2s ease; }
.modal.lg { max-width: 820px; }
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.toasts { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--sidebar); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; animation: pop .2s; min-width: 260px; max-width: 400px; }
.toast.error { background: var(--danger); }
.toast .icn { color: #5BC0C2; font-size: 20px; }
.toast.error .icn { color: #fff; }

/* ---------------- Login ---------------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art { background: linear-gradient(160deg, #04344A, #0B364A 60%, #23848A); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-art .bg { position: absolute; inset: 0; background: center/cover; opacity: .18; }
.login-art > * { position: relative; }
.login-art h1 { font-size: 40px; line-height: 1.1; max-width: 520px; }
.login-art p { color: #CFE0E5; max-width: 460px; margin-top: 14px; font-size: 15px; }
.login-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.login-feats div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px; font-size: 12.5px; }
.login-feats .icn { color: #5BC0C2; font-size: 26px; margin-bottom: 6px; }
.login-form { display: grid; place-items: center; padding: 40px 24px; background: #fff; }
.login-box { width: 100%; max-width: 440px; }
.acc-list { display: flex; flex-direction: column; gap: 10px; }
.acc { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; background: #fff; text-align: left; transition: border-color .15s, background .15s; }
.acc:hover { border-color: var(--primary); background: var(--primary-50); }
.acc .r { margin-left: auto; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 12px; margin: 22px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.overlay-mobile { display: none; }


/* ==========================================================
   Icônes Phosphor duotone : relief, couleur et micro-animations
   ========================================================== */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); }
/* Couche de fond du duotone : plus présente que l'original (20 %) */
i.icn.ph-duotone::before { opacity: .26; transition: opacity .25s, color .25s; }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, .pay-option):hover i.icn.ph-duotone::before { opacity: .5; }
.icn { transition: transform .35s var(--spring), color .2s; }

/* Déclencheurs : survol ou focus clavier d'un élément interactif */
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="lift"] { transform: translateY(-2px) scale(1.14); }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="zoom"] { transform: scale(1.22) rotate(-8deg); }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="turn"] { transform: rotate(90deg) scale(1.1); }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="spin-q"] { transform: rotate(45deg) scale(1.1); }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="rise"] { transform: translateY(-3px) scale(1.1); }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="nudge"] { transform: translateX(4px); }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="nudge-l"] { transform: translateX(-4px); }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="ring"] { animation: ic-ring .8s ease; }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="bump"] { animation: ic-bump .6s var(--spring); }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="fly"] { animation: ic-fly .7s ease-in-out; }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="spin"] { animation: ic-spin .8s var(--spring); }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="spin-rev"] { animation: ic-spin .8s var(--spring) reverse; }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="swap"] { animation: ic-swap .6s ease; }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="drive"] { animation: ic-drive .7s ease; }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="drop"] { animation: ic-drop .55s var(--spring); }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="wiggle"] { animation: ic-wiggle .55s ease; }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="pop"] { animation: ic-pop .5s var(--spring); }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="twinkle"] { animation: ic-twinkle .7s ease; }
:is(a, button, summary, .acc, .notif, .method, .cat-tile, label, .pay-option):is(:hover, :focus-visible) .icn[data-a="flip"] { animation: ic-flip .6s ease; }
:is(button, a):active .icn { transform: scale(.88); transition-duration: .08s; }

@keyframes ic-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
@keyframes ic-bump { 0% { transform: scale(1); } 35% { transform: scale(1.32) translateY(-2px); } 60% { transform: scale(.9); } 80% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes ic-fly { 0% { transform: translate(0, 0); opacity: 1; } 45% { transform: translate(9px, -9px) rotate(8deg); opacity: 0; } 46% { transform: translate(-9px, 9px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes ic-spin { to { transform: rotate(360deg); } }
@keyframes ic-swap { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 65% { transform: translateX(4px); } }
@keyframes ic-drive { 0% { transform: translateX(0); } 40% { transform: translateX(5px) rotate(-3deg); } 70% { transform: translateX(-2px); } 100% { transform: translateX(0); } }
@keyframes ic-drop { 0% { transform: translateY(0); } 40% { transform: translateY(4px); } 70% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
@keyframes ic-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(12deg); } 70% { transform: rotate(-6deg); } }
@keyframes ic-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes ic-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.3) rotate(72deg); } }
@keyframes ic-flip { 0% { transform: perspective(200px) rotateY(0); } 100% { transform: perspective(200px) rotateY(360deg); } }
@keyframes ic-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ic-in { from { opacity: 0; transform: translateY(10px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ic-pulse { 0% { box-shadow: 0 0 0 0 rgba(242,163,58,.55); } 70% { box-shadow: 0 0 0 7px rgba(242,163,58,0); } 100% { box-shadow: 0 0 0 0 rgba(242,163,58,0); } }
@keyframes ic-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(91,192,194,0)); } 50% { filter: drop-shadow(0 0 6px rgba(91,192,194,.75)); } }

/* Animation rejouée par le code (panier après ajout) */
.icn.play[data-a="bump"] { animation: ic-bump .6s var(--spring); }
/* Cloche : sonne seule à l'arrivée sur la page quand il y a des notifications non lues */
.icn.loop { animation: ic-ring 1s ease 1s, ic-ring 1s ease 6s, ic-ring 1s ease 11s; color: var(--primary); }

/* Menu : icône active illuminée, pastille qui pulse */
.nav a .icn { font-size: 21px; }
.nav a.active .icn { color: #fff; animation: ic-pop .5s var(--spring), ic-glow 2.4s ease-in-out .5s infinite; }
.nav a.active i.icn.ph-duotone::before { color: #5BC0C2; opacity: 1; }
.nav a:not(.active):hover .icn { color: #5BC0C2; }
.nav a .badge-count { animation: ic-pulse 2s infinite; }

/* Tuiles de catégories : couleur pleine et halo au survol, entrée en cascade */
.cat-tile .ci { width: 52px; height: 52px; border-radius: 16px; position: relative; color: var(--c); background: linear-gradient(140deg, var(--b), #fff 140%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); transition: background .3s, color .3s, box-shadow .3s, transform .35s var(--spring); }
.cat-tile .ci .icn { animation: ic-in .5s var(--spring) both; animation-delay: calc(var(--i, 0) * 45ms + .1s); }
.cat-tile:hover .ci { background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 70%, #fff)); color: #fff; transform: translateY(-2px) rotate(-4deg); box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--c) 60%, transparent); }
.cat-tile:hover i.icn.ph-duotone::before { color: #fff; opacity: .45; }
.cat-tile:hover { border-color: color-mix(in srgb, var(--c) 35%, transparent); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--c) 45%, transparent); }

/* Tuiles d'indicateurs : dégradés vifs, icône blanche */
.stat .ic { width: 38px; height: 38px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #23848A, #5BC0C2); box-shadow: 0 6px 14px -5px rgba(35,132,138,.55); }
.stat .ic.ic-warm { background: linear-gradient(135deg, #E08A00, #F7C25E); box-shadow: 0 6px 14px -5px rgba(224,138,0,.55); }
.stat .ic.ic-blue { background: linear-gradient(135deg, #2552C4, #5B8DEF); box-shadow: 0 6px 14px -5px rgba(37,82,196,.5); }
.stat .ic i.icn.ph-duotone::before { color: #fff; opacity: .4; }
.stat .ic .icn { font-size: 20px; }
.card.stat:hover .ic .icn { transform: scale(1.15) rotate(-8deg); }
.stat.hl .ic { background: linear-gradient(135deg, #B42318, #F0776B); }

/* États vides, notifications, toasts, connexion */
.empty .ic { width: 68px; height: 68px; border-radius: 20px; background: linear-gradient(140deg, var(--primary-100), #fff); box-shadow: inset 0 0 0 1px var(--primary-200); }
.empty .ic .icn { animation: ic-float 3s ease-in-out infinite; }
.notif .ic { background: linear-gradient(135deg, #23848A, #5BC0C2); color: #fff; }
.notif .ic i.icn.ph-duotone::before { color: #fff; opacity: .4; }
.toast .icn { animation: ic-pop .5s var(--spring); }
.login-feats .icn { animation: ic-float 3.5s ease-in-out infinite; }
.login-feats div:nth-child(2) .icn { animation-delay: .4s; }
.login-feats div:nth-child(3) .icn { animation-delay: .8s; }
.checks .icn { animation: ic-in .45s var(--spring) both; }
.checks li:nth-child(2) .icn { animation-delay: .08s; }
.checks li:nth-child(3) .icn { animation-delay: .16s; }
.checks li:nth-child(4) .icn { animation-delay: .24s; }
.icon-btn .icn { font-size: 21px; }
.icon-btn:hover { color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .icn, .nav a .badge-count, .cat-tile .ci { animation: none !important; transition: none !important; }
}


/* ==========================================================
   Statuts animés : chaque statut a son icône et son mouvement
   wait (attente) · ok (validé) · move (en cours) · prep (à préparer)
   done (livré/soldé) · late (en retard) · soon (à venir)
   cancel (annulé) · live (actif) · off (hors ligne)
   ========================================================== */
.badge { position: relative; border-radius: 99px; padding: 4px 11px 4px 8px; gap: 6px; line-height: 18px; isolation: isolate;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.badge .icn { font-size: 15px; }
.badge i.icn.ph-duotone::before { opacity: .35; }
.b-green { background: linear-gradient(135deg, #E3F5F6, #D3EFF0); }
.b-warn { background: linear-gradient(135deg, #FFF5E1, #FFEACB); }
.b-info { background: linear-gradient(135deg, #E8EFFF, #DCE6FF); }
.b-danger { background: linear-gradient(135deg, #FEEBE9, #FCDCD8); }
.b-grey { background: linear-gradient(135deg, #F1F2F3, #E8EBEC); }

/* Entrée : le badge apparaît avec un petit rebond */
.badge.st { animation: st-in .45s var(--spring) both; }
tr:nth-child(2) .badge.st { animation-delay: .04s; } tr:nth-child(3) .badge.st { animation-delay: .08s; }
tr:nth-child(4) .badge.st { animation-delay: .12s; } tr:nth-child(5) .badge.st { animation-delay: .16s; }
tr:nth-child(n+6) .badge.st { animation-delay: .2s; }

/* Pastille ronde pour les badges sans icône */
.badge.st:not(:has(.icn))::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Halo qui pulse autour des statuts « vivants » */
.badge.st:is([data-st="wait"], [data-st="late"], [data-st="move"])::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; animation: st-ring 2.2s ease-out infinite; }
.badge.st[data-st="late"]::after { animation-duration: 1.4s; }

/* En attente : le sablier se retourne */
.badge.st[data-st="wait"] .icn { animation: st-hourglass 2.6s ease-in-out infinite; }
/* Validé : le sceau claque, puis un reflet traverse le badge */
.badge.st[data-st="ok"] .icn { animation: ic-pop .6s var(--spring) .25s both; }
.badge.st[data-st="ok"] { overflow: hidden; }
.badge.st[data-st="ok"]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%); transform: translateX(-120%); animation: st-shine 1.1s ease .5s 1 forwards; }
/* En cours : le camion roule en continu */
.badge.st[data-st="move"] .icn { animation: st-drive 1.6s ease-in-out infinite; }
/* À préparer / en préparation : le colis rebondit */
.badge.st[data-st="prep"] .icn { animation: st-bounce 1.8s var(--spring) infinite; }
/* Livré, soldé, reçu : double coche qui se pose */
.badge.st[data-st="done"] .icn { animation: st-check .55s var(--spring) .2s both; }
/* En retard : l'alerte tremble */
.badge.st[data-st="late"] { font-weight: 800; }
.badge.st[data-st="late"] .icn { animation: st-shake 2.4s ease infinite; }
/* À venir : l'horloge oscille */
.badge.st[data-st="soon"] .icn { animation: st-tick 2s ease-in-out infinite; }
/* Annulé, refusé, suspendu : sobre, sans mouvement */
.badge.st[data-st="cancel"] { opacity: .88; }
/* Actif / en ligne : pastille verte qui « respire » */
.badge.st[data-st="live"]::before { animation: st-live 1.8s ease-in-out infinite; }
.badge.st[data-st="off"]::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }

/* Au survol d'une ligne, le statut réagit */
tr:hover .badge.st .icn, .card:hover > .badge.st .icn { animation-duration: .8s; }
tr:hover .badge.st[data-st="cancel"] .icn { animation: ic-wiggle .5s ease; }

@keyframes st-in { from { opacity: 0; transform: scale(.7) translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes st-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent); } 80%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 0%, transparent); } }
@keyframes st-hourglass { 0%, 40% { transform: rotate(0); } 55%, 90% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } }
@keyframes st-shine { to { transform: translateX(120%); } }
@keyframes st-drive { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(3px) rotate(-2deg); } }
@keyframes st-bounce { 0%, 60%, 100% { transform: translateY(0); } 20% { transform: translateY(-4px) scale(1.08); } 40% { transform: translateY(0) scale(.96, 1.04); } }
@keyframes st-check { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes st-shake { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(-14deg); } 70% { transform: rotate(12deg); } 76% { transform: rotate(-8deg); } 82% { transform: rotate(5deg); } }
@keyframes st-tick { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes st-live { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent); } }

@media (prefers-reduced-motion: reduce) {
  .badge.st, .badge.st .icn, .badge.st::before, .badge.st::after { animation: none !important; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .pd { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .grid-main { grid-template-columns: 1fr; }
  .sidebar { transform: translateX(-100%); }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .overlay-mobile { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 35; }
  .main { margin-left: 0; }
  .menu-toggle { display: inline-grid; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .login { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .topbar .user-chip .meta { display: none; }
}
@media (max-width: 640px) {
  .content { padding: 18px 16px; }
  .topbar { padding: 0 12px; gap: 6px; }
  .topbar .search { display: none; }
  .grid-2, .grid-3, .grid-4, .grid-5, .form-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding: 24px; }
  .hero h2 { font-size: 24px; }
  .notif-panel { width: 300px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .line-item { flex-wrap: wrap; }
}

/* ---------- Logos officiels ---------- */
img.brand-logo { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.login-box .logo-top { height: 64px; width: auto; margin-bottom: 20px; }
.method .mlogo.has-img, .mlogo.has-img { background: #fff; padding: 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(8,36,48,.08); }
.mlogo.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mlogo .icn { font-size: 17px; color: #fff; }
.method-tag { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; }
.method-tag .mlogo { width: 24px; height: 24px; border-radius: 7px; display: inline-grid; place-items: center; flex-shrink: 0; }
.method-tag .mlogo .icn { font-size: 14px; }
.pay-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: #9FB9C2; }
.pay-strip span { margin-right: 4px; }
.pay-strip img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; background: #fff; box-shadow: 0 4px 12px -4px rgba(0,0,0,.4); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.pay-strip img:hover { transform: translateY(-3px) scale(1.08); }
/* Garantie du produit : bloc du formulaire marchand et encadré de la fiche produit */
.pf-warranty { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px 16px; margin: 0; min-width: 0; }
.pf-warranty legend { font-weight: 700; padding: 0 6px; display: inline-flex; align-items: center; gap: 6px; }
.pf-warranty [hidden] { display: none; }
.pd-warranty { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin: 12px 0 16px; }
.pd-warranty > i { font-size: 20px; color: var(--primary); flex: none; margin-top: 1px; }
/* Réclamations : articles concernés, choix de la décision */
.cl-items { display: flex; flex-direction: column; gap: 8px; }
.cl-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
label.cl-item { cursor: pointer; }
.cl-item:has(input[type=checkbox]:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.cl-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-name small { color: var(--muted); }
.cl-qty { display: flex; align-items: center; gap: 6px; flex: none; }
.cl-qty .input { width: 72px; }
.cd-opts { display: flex; flex-direction: column; gap: 8px; }
.cd-opt { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.cd-opt input { margin-top: 4px; flex: none; }
.cd-opt span { display: flex; flex-direction: column; gap: 2px; }
.cd-opt b { display: inline-flex; align-items: center; gap: 6px; }
.cd-opt small { color: var(--muted); }
.cd-opt:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.claim-box { margin-bottom: 12px; }
/* Espace livreur : une carte par course, lisible au téléphone */
.dv-list { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.dv-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.dv-card.dv-now { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.dv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dv-legs { display: flex; flex-direction: column; gap: 10px; }
.dv-leg { display: flex; gap: 12px; align-items: flex-start; }
.dv-leg.done { opacity: .6; }
.dv-dot { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 18px; }
.dv-k { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dv-items { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-items span { border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.dv-acts { display: flex; flex-direction: column; gap: 6px; }
.dv-code { font: 700 28px 'JetBrains Mono', monospace; letter-spacing: .5em; text-align: center; }
.dv-key { display: inline-block; font: 700 22px 'JetBrains Mono', monospace; letter-spacing: .3em; padding: 4px 12px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
/* Colonne « Accès » : état du compte de connexion et invitation */
.acc-cell{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* Connexion par téléphone : onglets E-mail / Téléphone, indicatif devant le numéro */
.login-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.login-modes .tab { justify-content: center; height: 40px; }
.tel-wrap { display: flex; align-items: stretch; width: 100%; }
.tel-wrap .tel-cc { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--border-2); border-right: 0; border-radius: 10px 0 0 10px; background: var(--surface-2); font-weight: 600; color: var(--text-2); }
.tel-wrap .input, .tel-wrap > :not(.tel-cc) { border-radius: 0 10px 10px 0; flex: 1; min-width: 0; width: 100%; }
#login-phone [hidden], #login-phone[hidden], #login-form[hidden] { display: none !important; }