/* ==========================================================================
   GestionBoutique — Design System
   Palette violette premium · Plus Jakarta Sans / Inter
   ========================================================================== */

:root {
  /* Brand TOPTEN — orange (accents/boutons) + charbon (barres/titres) */
  --brand-50:  #fff3ea;
  --brand-100: #ffe1cb;
  --brand-200: #ffc097;
  --brand-300: #ff9d5e;
  --brand-400: #fb8232;
  --brand-500: #f26910;   /* orange logo */
  --brand-600: #e65c04;   /* primary */
  --brand-700: #c54e05;   /* orange foncé (survol) */
  --brand-800: #c2510a;   /* orange profond (début des barres = dominant) */
  --brand-900: #241a12;   /* noir chaud du logo (titres / fin de barre) */
  /* Charbon conservé pour une touche de contraste */
  --ink-800:  #232b35;
  --ink-900:  #161f27;
  /* Barres / en-têtes : orange dominant -> noir chaud */
  --nav:      #c2510a;
  --nav-2:    #241a12;

  /* Accent (magasins) */
  --accent-400: #fbbf24;
  --accent-500: #f59e0b;
  --accent-600: #ea8305;

  /* Semantic */
  --success:  #10b981;
  --success-bg: #d9f7ec;
  --danger:   #ef4444;
  --danger-bg: #fdeaea;
  --warning:  #f59e0b;
  --warning-bg: #fef3e2;
  --info:     #3b82f6;
  --info-bg:  #e6f0fe;

  /* Neutrals */
  --ink-900: #14121f;
  --ink-800: #24212f;
  --ink-700: #3b3752;
  --ink-600: #56526e;
  --ink-500: #74708c;
  --ink-400: #9995ac;
  --ink-300: #c3c0d1;
  --ink-200: #e4e2ec;
  --ink-100: #f0eef6;

  /* Surfaces */
  --bg:        #f6f5fb;
  --surface:   #ffffff;
  --surface-2: #faf9fe;
  --sidebar:   #ffffff;
  --line:      #ecebf3;

  /* Effects */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --shadow-xs: 0 1px 2px rgba(24,20,40,.05);
  --shadow-sm: 0 2px 8px rgba(41,32,73,.06);
  --shadow:    0 10px 30px -12px rgba(41,32,73,.14);
  --shadow-lg: 0 24px 60px -20px rgba(41,32,73,.28);
  --ring: 0 0 0 4px rgba(109,40,217,.14);

  --sidebar-w: 268px;
  --topbar-h: 74px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head: 'Plus Jakarta Sans', var(--font-body);
}

/* ---------- Dark theme ---------- */
html[data-theme="dark"] {
  --bg:        #0f0d18;
  --surface:   #1a1726;
  --surface-2: #211d31;
  --sidebar:   #16131f;
  --line:      #2a2640;

  --ink-900: #f4f2fb;
  --ink-800: #e8e5f3;
  --ink-700: #d3cfe4;
  --ink-600: #b3aecb;
  --ink-500: #928db0;
  --ink-400: #726d92;
  --ink-300: #4f4a6b;
  --ink-200: #322e49;
  --ink-100: #26223a;

  --success-bg: #10352a;
  --danger-bg:  #3a2027;
  --warning-bg: #3a2e1a;
  --info-bg:    #1a2a44;
  --brand-50:   #16233f;
  --brand-100:  #1c2d50;
  --shadow:    0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.7);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink-800);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}

h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); color: var(--ink-900); font-weight: 700; letter-spacing: -.02em; }
a { color: inherit; text-decoration: none; }
.text-muted-2 { color: var(--ink-500) !important; }
.text-ink { color: var(--ink-800) !important; }
.fw-800 { font-weight: 800 !important; }
.mono { font-variant-numeric: tabular-nums; }

::selection { background: var(--brand-200); color: var(--brand-900); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); background-clip: padding-box; }

/* ==========================================================================
   App shell
   ========================================================================== */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.sidebar__brand {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 22px 14px;
}
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 8px 18px -6px rgba(109,40,217,.6);
}
.brand-mark i { width: 22px; height: 22px; }
.brand-name { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--ink-900); line-height: 1; display:flex; align-items:center; }
.brand-box { border:1.5px solid currentColor; border-radius:4px; padding:1px 5px; margin-left:5px; font-size:11px; letter-spacing:.10em; font-weight:800; }
.brand-sub  { font-size: 11.5px; color: var(--ink-400); font-weight: 500; }

/* Location switcher */
.loc-switch {
  margin: 6px 16px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 11px;
  cursor: pointer;
  background: var(--surface-2);
  transition: .18s;
}
.loc-switch:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.loc-switch__ic {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
}
.loc-switch__ic.is-magasin { background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); }
.loc-switch__ic i { width: 19px; height: 19px; }
.loc-switch__name { font-weight: 700; font-size: 13.5px; color: var(--ink-900); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.loc-switch__type { font-size: 11.5px; color: var(--ink-400); }
.loc-switch .chev { margin-left: auto; color: var(--ink-400); width: 17px; height: 17px; }

/* Nav */
.nav-section { padding: 6px 16px; flex: 1; overflow-y: auto; }
.nav-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400);
  font-weight: 700; padding: 14px 12px 6px; }
.nav-link {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px; border-radius: 12px; color: var(--ink-600);
  font-weight: 600; font-size: 14.5px; margin-bottom: 3px;
  position: relative; transition: .16s; cursor: pointer;
}
.nav-link i { width: 20px; height: 20px; color: var(--ink-400); transition: .16s; flex: none; }
.nav-link:hover { background: var(--brand-50); color: var(--brand-700); }
.nav-link:hover i { color: var(--brand-600); }
.nav-link.active { background: linear-gradient(100deg, var(--brand-600), var(--brand-500)); color: #fff; box-shadow: 0 10px 22px -10px rgba(109,40,217,.7); }
.nav-link.active i { color: #fff; }
.nav-link .badge-count {
  margin-left: auto; background: var(--danger); color: #fff; font-size: 11px;
  min-width: 21px; height: 21px; border-radius: 20px; display: grid; place-items: center;
  font-weight: 700; padding: 0 6px;
}
.nav-link.active .badge-count { background: rgba(255,255,255,.25); }

.sidebar__foot { padding: 12px 16px 18px; border-top: 1px solid var(--line); }
.nav-link.danger:hover { background: var(--danger-bg); color: var(--danger); }
.nav-link.danger:hover i { color: var(--danger); }

/* Main */
.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; }

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 30px;
  position: sticky; top: 0; z-index: 1030;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__welcome { font-size: 12px; color: var(--ink-400); font-weight: 600; line-height: 1; }
.topbar__title { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--ink-900); }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-600); display: grid; place-items: center;
  cursor: pointer; position: relative; transition: .16s;
}
.icon-btn:hover { color: var(--brand-600); border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.icon-btn i { width: 19px; height: 19px; }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--surface); }
.icon-btn .num { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 20px;
  background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
  border: 2px solid var(--surface); padding: 0 4px; }

.user-chip { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border-radius: 12px; cursor: pointer; transition:.16s; }
.user-chip:hover { background: var(--brand-50); }
.avatar { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); font-size: 14px; flex: none; }
.avatar.sm { width: 34px; height: 34px; border-radius: 9px; font-size: 12.5px; }
.avatar.xs { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.user-chip__name { font-weight: 700; font-size: 13.5px; color: var(--ink-900); line-height: 1.1; }
.user-chip__role { font-size: 11.5px; color: var(--ink-400); }

.page { padding: 28px 30px 60px; }
.page-head { margin-bottom: 22px; display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.page-title { font-size: 27px; font-weight: 800; margin: 0; }
.page-sub { color: var(--ink-500); font-size: 14px; margin: 4px 0 0; }
.page-head__actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn { border-radius: 12px; font-weight: 600; font-size: 14px; padding: 10px 18px; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 8px; transition: .16s; cursor: pointer; line-height: 1.2; }
.btn i { width: 18px; height: 18px; }
.btn-primary { background: linear-gradient(120deg, var(--brand-500) 0%, var(--brand-600) 48%, var(--brand-900) 100%); color: #fff;
  box-shadow: 0 12px 24px -12px rgba(230,92,4,.55); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); color:#fff; }
.btn-success { background: var(--success); color: #fff; box-shadow: 0 12px 24px -12px rgba(16,185,129,.7); }
.btn-success:hover { filter: brightness(1.05); transform: translateY(-1px); color:#fff; }
.btn-ghost { background: var(--surface); color: var(--ink-700); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand-200); color: var(--brand-600); box-shadow: var(--shadow-sm); }
.btn-soft { background: var(--brand-50); color: var(--brand-700); }
.btn-soft:hover { background: var(--brand-100); color: var(--brand-800); }
.btn-danger-soft { background: var(--danger-bg); color: var(--danger); }
.btn-danger-soft:hover { background: var(--danger); color:#fff; }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
.btn-lg { padding: 13px 24px; font-size: 15px; }
.btn-icon { padding: 9px; width: 40px; justify-content: center; }

/* ==========================================================================
   Cards & surfaces
   ========================================================================== */
.card2 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card2-pad { padding: 22px; }
.card2-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.card2-head h3 { font-size: 16px; margin: 0; }
.card2-title { font-size: 16px; font-weight: 700; margin: 0; }

/* Stat / KPI cards */
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: .2s;
}
.stat:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--brand-100); }
.stat__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.stat__label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); font-weight: 700; }
.stat__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.stat__ic i { width: 21px; height: 21px; }
.stat__val { font-family: var(--font-head); font-size: 27px; font-weight: 800; color: var(--ink-900); line-height: 1;
  letter-spacing: -.02em; }
.stat__val small { font-size: 15px; color: var(--ink-400); font-weight: 600; }
.stat__foot { margin-top: 12px; font-size: 12.5px; color: var(--ink-400); display: flex; align-items: center; gap: 6px; }
.trend { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12.5px; }
.trend i { width: 15px; height: 15px; }
.trend.up { color: var(--success); }
.trend.down { color: var(--danger); }

.ic-violet  { background: var(--brand-50); color: var(--brand-600); }
.ic-green   { background: var(--success-bg); color: var(--success); }
.ic-blue    { background: var(--info-bg); color: var(--info); }
.ic-orange  { background: var(--warning-bg); color: var(--warning); }
.ic-red     { background: var(--danger-bg); color: var(--danger); }
.ic-solid-violet { background: linear-gradient(135deg,var(--brand-500),var(--brand-700)); color:#fff; }
.ic-solid-blue   { background: linear-gradient(135deg,#4f8cf7,#2563eb); color:#fff; }
.ic-solid-green  { background: linear-gradient(135deg,#34d399,#059669); color:#fff; }

/* ==========================================================================
   Badges & pills
   ========================================================================== */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px;
  font-size: 12px; font-weight: 700; line-height: 1.4; }
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-green  { background: var(--success-bg); color: var(--success); }
.pill-red    { background: var(--danger-bg);  color: var(--danger); }
.pill-orange { background: var(--warning-bg); color: var(--warning); }
.pill-blue   { background: var(--info-bg);    color: var(--info); }
.pill-violet { background: var(--brand-50);   color: var(--brand-600); }
.pill-gray   { background: var(--ink-100);    color: var(--ink-500); }

.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:9px; font-size:12px; font-weight:600; }
.chip-violet { background: var(--brand-50); color: var(--brand-700); }
.chip-orange { background: var(--warning-bg); color: var(--accent-600); }

.tag-sku { font-family: var(--font-body); font-size: 12px; color: var(--ink-400); font-weight: 600; }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
table.tbl thead th {
  text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-400); font-weight: 700; padding: 14px 16px; border-bottom: 1px solid var(--line);
  white-space: nowrap; background: var(--surface);
}
table.tbl tbody td { padding: 15px 16px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-700); vertical-align: middle; }
table.tbl tbody tr { transition: background .14s; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
.td-strong { color: var(--ink-900); font-weight: 700; }
.cell-prod { display: flex; align-items: center; gap: 12px; }
.prod-thumb { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; background: var(--ink-100); flex: none;
  display:grid; place-items:center; color: var(--ink-300); }
.prod-thumb i { width: 20px; height: 20px; }
.row-actions { display: flex; gap: 6px; }
.row-actions .icon-mini { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; color: var(--ink-400); cursor: pointer; transition: .15s; }
.row-actions .icon-mini:hover { color: var(--brand-600); border-color: var(--brand-200); }
.row-actions .icon-mini.danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }

/* Progress bar */
.progress2 { height: 7px; border-radius: 20px; background: var(--ink-100); overflow: hidden; min-width: 90px; }
.progress2 > span { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg,var(--brand-500),var(--brand-400)); }
.progress2.is-done > span { background: linear-gradient(90deg,#34d399,#10b981); }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-700); margin-bottom: 7px; }
.field label .req { color: var(--danger); }
.field .hint { font-size: 12px; color: var(--ink-400); margin-top: 6px; }
.input, .select, textarea.input {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-900); font-size: 14px; font-family: var(--font-body);
  transition: .16s; outline: none;
}
.input::placeholder { color: var(--ink-400); }
.input:focus, .select:focus, textarea.input:focus { border-color: var(--brand-400); box-shadow: var(--ring); background: var(--surface); }
.input:disabled { background: var(--ink-100); color: var(--ink-400); cursor: not-allowed; }
.input-group { position: relative; }
.input-group .input { padding-left: 42px; }
.input-group > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-400); }

.search { position: relative; }
.search input { width: 100%; padding: 11px 14px 11px 42px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); font-size: 14px; color: var(--ink-900); outline: none; transition:.16s; }
.search input:focus { border-color: var(--brand-400); box-shadow: var(--ring); background: var(--surface); }
.search i, .search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-400); pointer-events: none; }

/* Alignement uniforme des champs (recherche / select / input) dans les barres d'outils */
.input, .select, .search input { min-height: 42px; box-sizing: border-box; }
.search { position: relative; display: block; }
.search input { width: 100%; }
/* L'icône loupe (remplacée par un <svg> par Lucide) reste dans le champ */
.input-group > i, .input-group > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-400); pointer-events: none; }
/* Les barres d'outils d'en-tête centrent verticalement leurs champs */
.card2-head > .d-flex, .card2-head .ms-auto.d-flex { align-items: center; }

/* Segmented control / tabs */
.tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; }
.tabs button { border: 0; background: transparent; color: var(--ink-500); font-weight: 600; font-size: 13.5px;
  padding: 8px 16px; border-radius: 9px; cursor: pointer; transition: .15s; display:inline-flex; align-items:center; gap:7px; }
.tabs button i { width: 16px; height: 16px; }
.tabs button:hover { color: var(--brand-600); }
.tabs button.active { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-sm); }
.tabs.tabs-solid button.active { background: linear-gradient(100deg,var(--brand-600),var(--brand-500)); color:#fff; }

.seg { display:inline-flex; background: var(--surface-2); border:1px solid var(--line); border-radius: 11px; padding: 4px; }
.seg button { border:0; background:transparent; padding:7px 14px; border-radius:8px; font-weight:600; font-size:13px; color:var(--ink-500); cursor:pointer; transition:.15s;}
.seg button.active { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-sm); }

/* ==========================================================================
   Vertical tabs (paramètres)
   ========================================================================== */
.vtabs { display: flex; flex-direction: column; gap: 4px; }
.vtab { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 12px; color: var(--ink-600);
  font-weight: 600; font-size: 14px; cursor: pointer; transition: .15s; position: relative; }
.vtab i { width: 19px; height: 19px; color: var(--ink-400); }
.vtab:hover { background: var(--brand-50); color: var(--brand-700); }
.vtab.active { background: var(--brand-50); color: var(--brand-700); }
.vtab.active i { color: var(--brand-600); }
.vtab.active::before { content:""; position:absolute; left:-1px; top:20%; bottom:20%; width:3px; border-radius:3px; background:var(--brand-600); }

/* ==========================================================================
   Location grid (select-location)
   ========================================================================== */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.loc-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow: hidden; transition: .2s; cursor: pointer;
}
.loc-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--brand-100); }
.loc-card__body { padding: 20px; }
.loc-card__row { display: flex; align-items: center; gap: 13px; }
.loc-card__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); }
.loc-card__ic.is-magasin { background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); }
.loc-card__ic i { width: 22px; height: 22px; }
.loc-card__name { font-family: var(--font-head); font-weight: 800; font-size: 15.5px; color: var(--ink-900); line-height: 1.15; }
.loc-card__meta { font-size: 12.5px; color: var(--ink-400); }
.loc-card__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 18px; text-align: center; }
.loc-card__stat b { display: block; font-family: var(--font-head); font-size: 17px; color: var(--ink-900); font-weight: 800; }
.loc-card__stat span { font-size: 11px; color: var(--ink-400); text-transform: uppercase; letter-spacing:.03em; font-weight:600; }
.loc-card__foot { border-top: 1px solid var(--line); padding: 13px; text-align: center; }
.loc-card__foot a { font-weight: 700; color: var(--brand-600); font-size: 14px; }
.loc-card.is-magasin .loc-card__foot a { color: var(--accent-600); }

/* ==========================================================================
   Alerts feed / activity
   ========================================================================== */
.feed-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.feed-item:last-child { border-bottom: 0; }
.feed-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.feed-ic i { width: 18px; height: 18px; }
.feed-body { min-width: 0; flex: 1; }
.feed-body .t { font-weight: 700; font-size: 13.5px; color: var(--ink-900); }
.feed-body .s { font-size: 12.5px; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-amt { font-weight: 800; font-size: 14px; white-space: nowrap; }

/* Timeline */
.timeline { position: relative; }
.tl-item { display:flex; gap:14px; padding-bottom: 22px; position: relative; }
.tl-item:not(:last-child)::before { content:""; position:absolute; left:19px; top:40px; bottom:0; width:2px; background: var(--line); }
.tl-ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; z-index:1; }
.tl-ic i { width:19px; height:19px; }

/* ==========================================================================
   Misc
   ========================================================================== */
.divider { height: 1px; background: var(--line); border: 0; margin: 20px 0; }
.empty { text-align: center; padding: 40px 20px; color: var(--ink-400); }
.empty i { width: 40px; height: 40px; color: var(--ink-300); margin-bottom: 10px; }

.mini-bars { display:flex; align-items:flex-end; gap:4px; height:38px; }
.mini-bars span { flex:1; background: var(--brand-200); border-radius:3px; min-height:4px; transition:.2s; }
.mini-bars span.hi { background: var(--brand-500); }

.dropdown-menu { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 7px; background: var(--surface); }
.dropdown-menu .dropdown-item { border-radius: 9px; padding: 9px 12px; font-size: 14px; font-weight: 500; color: var(--ink-700); display:flex; align-items:center; gap:10px; }
.dropdown-menu .dropdown-item i { width:17px; height:17px; color: var(--ink-400); }
.dropdown-menu .dropdown-item:hover { background: var(--brand-50); color: var(--brand-700); }
.dropdown-menu .dropdown-item:hover i { color: var(--brand-600); }
.dropdown-menu .dropdown-item.text-danger:hover { background: var(--danger-bg); color: var(--danger)!important; }

/* Toast */
.toast-host { position: fixed; right: 22px; bottom: 22px; z-index: 3000; display: flex; flex-direction: column; gap: 10px; }
.toast2 { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand-600);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 13px 16px; min-width: 260px; display: flex; gap: 11px; align-items: center;
  animation: toastIn .3s cubic-bezier(.2,.8,.2,1); }
.toast2.ok { border-left-color: var(--success); }
.toast2.warn { border-left-color: var(--warning); }
.toast2 i { width: 20px; height: 20px; color: var(--brand-600); flex:none; }
.toast2.ok i { color: var(--success); }
.toast2.warn i { color: var(--warning); }
.toast2 .tt { font-weight: 700; font-size: 13.5px; color: var(--ink-900); }
.toast2 .ts { font-size: 12.5px; color: var(--ink-500); }
@keyframes toastIn { from { opacity:0; transform: translateY(12px) scale(.96);} to {opacity:1; transform:none;} }

/* Mobile toggle */
.menu-toggle { display: none; }
.sidebar-backdrop { display:none; }

/* Grid helpers */
.grid-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.dash-main { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(14px); animation: reveal .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes reveal { to { opacity:1; transform:none; } }

/* ==========================================================================
   Auth (login)
   ========================================================================== */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.auth__aside {
  position: relative; overflow: hidden; color: #fff; padding: 54px;
  background: radial-gradient(120% 120% at 0% 0%, var(--brand-500) 0%, var(--brand-700) 45%, var(--brand-900) 100%);
  display: flex; flex-direction: column;
}
.auth__aside::after { content:""; position:absolute; inset:0;
  background: radial-gradient(50% 40% at 85% 15%, rgba(255,255,255,.16), transparent 60%),
              radial-gradient(40% 40% at 15% 90%, rgba(255,255,255,.10), transparent 60%); }
.auth__brand { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.auth__brand .brand-mark { background: rgba(255,255,255,.16); box-shadow:none; }
.auth__hero { margin-top: auto; position: relative; z-index: 1; }
.auth__hero h1 { color:#fff; font-size: 40px; line-height: 1.08; letter-spacing: -.03em; }
.auth__hero p { color: rgba(255,255,255,.8); font-size: 16px; max-width: 440px; }
.auth__stats { display:flex; gap: 30px; margin-top: 30px; position:relative; z-index:1; }
.auth__stats b { font-family: var(--font-head); font-size: 26px; display:block; }
.auth__stats span { color: rgba(255,255,255,.75); font-size: 13px; }
.auth__form-wrap { display: grid; place-items: center; padding: 40px; background: var(--surface); }
.auth__form { width: 100%; max-width: 400px; }
.auth-badges { position:absolute; z-index:1; }

@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth__aside { display:none; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .dash-main { grid-template-columns: 1fr; }
  .loc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
  :root { --sidebar-w: 264px; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .menu-toggle { display: grid; }
  .sidebar-backdrop.show { display:block; position: fixed; inset:0; background: rgba(20,18,31,.5); z-index: 1035; backdrop-filter: blur(2px); }
  .grid-kpi { grid-template-columns: repeat(2, 1fr); }
  .page { padding: 22px 18px 50px; }
  .topbar { padding: 0 18px; }
}
@media (max-width: 640px) {
  .grid-kpi, .loc-grid, .grid-2 { grid-template-columns: 1fr; }
  .page-title { font-size: 23px; }
  .topbar__welcome { display:none; }
  .user-chip__name, .user-chip__role { display:none; }
}

/* ==========================================================================
   Mini-indicateurs (dashboard)
   ========================================================================== */
.mini-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }
.mini-kpi { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px 15px; transition:.18s; }
.mini-kpi:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.mini-kpi__ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; }
.mini-kpi__ic svg { width:20px; height:20px; }
.mini-kpi__val { font-family:var(--font-head); font-weight:800; font-size:18px; color:var(--ink-900); line-height:1.12; }
.mini-kpi__label { font-size:12px; color:var(--ink-400); font-weight:600; }

.mini-stat { background:var(--surface-2); border-radius:14px; padding:12px 14px; }
.mini-stat__label { font-size:11px; font-weight:700; color:var(--ink-400); text-transform:uppercase; letter-spacing:.03em; }
.mini-stat__val { font-family:var(--font-head); font-weight:800; font-size:20px; color:var(--ink-900); margin-top:4px; line-height:1; }

/* ==========================================================================
   Sélection de localité — hero + cartes premium
   ========================================================================== */
.select-hero { position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:30px 34px; color:#fff; margin-bottom:26px;
  background: radial-gradient(120% 160% at 100% 0%, var(--brand-500), var(--brand-700) 55%, var(--brand-900)); }
.select-hero::after { content:""; position:absolute; inset:0;
  background: radial-gradient(40% 60% at 88% 10%, rgba(255,255,255,.18), transparent 60%),
              radial-gradient(30% 50% at 8% 100%, rgba(255,255,255,.10), transparent 60%); }
.select-hero > * { position:relative; z-index:1; }
.select-hero h1 { color:#fff; font-size:28px; margin:0 0 6px; letter-spacing:-.02em; }
.select-hero p { color:rgba(255,255,255,.82); margin:0; font-size:14.5px; max-width:560px; }
.select-hero__stats { display:flex; flex-wrap:wrap; gap:26px; margin-top:22px; }
.select-hero__stats .b { font-family:var(--font-head); font-weight:800; font-size:24px; display:block; line-height:1; }
.select-hero__stats .s { color:rgba(255,255,255,.72); font-size:12.5px; }
.select-hero__stats > div { position:relative; padding-right:26px; }
.select-hero__stats > div:not(:last-child)::after { content:""; position:absolute; right:0; top:2px; bottom:2px; width:1px; background:rgba(255,255,255,.2); }

.store-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:22px; }

.store-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; margin-bottom:8px; }
.storecard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  cursor:pointer; transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s; display:flex; flex-direction:column; }
.storecard:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.storecard__cover { position:relative; height:118px; }
.storecard__cover svg { width:100%; height:100%; display:block; }
.storecard__badge { position:absolute; left:16px; bottom:-20px; width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:var(--surface); box-shadow:var(--shadow); border:1px solid var(--line); }
.storecard__badge svg { width:24px; height:24px; color:var(--brand-600); }
.storecard.is-magasin .storecard__badge svg { color:var(--accent-500); }
.storecard__type { position:absolute; right:14px; top:14px; }
.storecard__body { padding:28px 18px 4px; flex:1; }
.storecard__name { font-family:var(--font-head); font-weight:800; font-size:15.5px; color:var(--ink-900); line-height:1.2; }
.storecard__meta { font-size:12.5px; color:var(--ink-400); margin-top:4px; display:flex; align-items:center; gap:6px; }
.storecard__stats { display:flex; gap:8px; margin-top:14px; }
.storecard__stat { flex:1; background:var(--surface-2); border-radius:12px; padding:9px 8px; text-align:center; }
.storecard__stat b { font-family:var(--font-head); font-size:14px; color:var(--ink-900); display:block; line-height:1.2; }
.storecard__stat span { font-size:10px; color:var(--ink-400); font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.storecard__foot { padding:14px 18px 18px; }
.storecard__foot .btn { width:100%; justify-content:center; }

.section-count { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px;
  border-radius:99px; background:var(--brand-50); color:var(--brand-600); font-size:12px; font-weight:800; margin-left:8px; }
.is-magasin-count { background:var(--warning-bg); color:var(--accent-600); }

@media (max-width: 992px) { .mini-kpis { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px) { .store-grid { grid-template-columns:1fr; } .select-hero { padding:24px; } .select-hero__stats { gap:18px; } }

/* ==========================================================================
   Palettes de marque premium  (html[data-brand="…"])
   Défaut appliqué : « saphir » (bleu profond) — voir layout.js / init inline
   ========================================================================== */
html[data-brand="saphir"]   { --brand-50:#eef4ff; --brand-100:#dce7fe; --brand-200:#b9cefd; --brand-300:#8fb0fb; --brand-400:#5f8bf6; --brand-500:#3b6fe6; --brand-600:#2456d6; --brand-700:#1c46b4; --brand-800:#1a3c92; --brand-900:#172f6f; }
html[data-brand="emeraude"] { --brand-50:#ecfdf5; --brand-100:#d1fae5; --brand-200:#a7f3d0; --brand-300:#6ee7b7; --brand-400:#34d399; --brand-500:#0fb488; --brand-600:#059669; --brand-700:#047857; --brand-800:#065f46; --brand-900:#064e3b; }
html[data-brand="ardoise"]  { --brand-50:#eef1f6; --brand-100:#e0e5ee; --brand-200:#c4ccdc; --brand-300:#9aa6bf; --brand-400:#647290; --brand-500:#3f4d6b; --brand-600:#2b3752; --brand-700:#222c44; --brand-800:#1b2438; --brand-900:#141b2c; }
html[data-brand="amethyste"]{ --brand-50:#f2effe; --brand-100:#e6ddfd; --brand-200:#ccbcfb; --brand-300:#ac93f6; --brand-400:#8f6bef; --brand-500:#7a4fe6; --brand-600:#6d28d9; --brand-700:#5b1fb8; --brand-800:#4a1c95; --brand-900:#3c1a78; }
html[data-brand="marine"]   { --brand-50:#fff3ea; --brand-100:#ffe1cb; --brand-200:#ffc097; --brand-300:#ff9d5e; --brand-400:#fb8232; --brand-500:#f26910; --brand-600:#e65c04; --brand-700:#c54e05; --brand-800:#c2510a; --brand-900:#241a12; --nav:#c2510a; --nav-2:#241a12; }
html[data-brand="ambre"]    { --brand-50:#fff8eb; --brand-100:#fdedc8; --brand-200:#fbd88c; --brand-300:#f9c04f; --brand-400:#f5a623; --brand-500:#f59e0b; --brand-600:#d97706; --brand-700:#b45309; --brand-800:#92400e; --brand-900:#78350f; }

/* Sélecteur de palette */
.palette-menu { padding:12px !important; min-width:220px; }
.palette-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.palette-opt { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:11px; cursor:pointer; border:1px solid var(--line); background:var(--surface); transition:.15s; }
.palette-opt:hover { background:var(--surface-2); }
.palette-opt.active { border-color:var(--brand-400); box-shadow:0 0 0 2px var(--brand-100) inset; }
.palette-dot { width:22px; height:22px; border-radius:7px; flex:none; }
.palette-opt span { font-size:12.5px; font-weight:700; color:var(--ink-800); }
.swatch-saphir   { background:linear-gradient(135deg,#3b6fe6,#172f6f); }
.swatch-emeraude { background:linear-gradient(135deg,#10b981,#064e3b); }
.swatch-ardoise  { background:linear-gradient(135deg,#3f4d6b,#141b2c); }
.swatch-amethyste{ background:linear-gradient(135deg,#7a4fe6,#3c1a78); }
.swatch-marine   { background:linear-gradient(135deg,#3a5fbf,#0d1f49); }

/* ==========================================================================
   Gérer une localité (gerer.html)
   ========================================================================== */
.manage-banner { position:relative; border-radius:var(--radius-xl); overflow:hidden; margin-bottom:22px; border:1px solid var(--line); }
.manage-cover { height:210px; position:relative; background:radial-gradient(120% 160% at 100% 0%, var(--brand-500), var(--brand-700) 55%, var(--brand-900)); }
.manage-cover img.cover-img { width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
.manage-cover.is-magasin { background:radial-gradient(120% 160% at 100% 0%, var(--accent-400), var(--accent-600) 60%, #7a3d02); }
.manage-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,22,0) 30%, rgba(10,12,22,.30) 62%, rgba(10,12,22,.72) 100%); }
.manage-cover__edit { position:absolute; right:14px; top:14px; z-index:3; }
.manage-cover .status-wrap { position:absolute; left:14px; top:14px; z-index:3; display:flex; align-items:center; gap:8px; }

.manage-identity { position:absolute; left:24px; right:24px; bottom:18px; z-index:3; display:flex; align-items:flex-end; gap:16px; }
.manage-logo { width:88px; height:88px; border-radius:20px; background:var(--surface); border:2px solid rgba(255,255,255,.85); box-shadow:var(--shadow-lg); display:grid; place-items:center; overflow:hidden; position:relative; flex:none; }
.manage-logo img.logo-img { width:100%; height:100%; object-fit:cover; }
.manage-logo > i { width:36px; height:36px; color:var(--brand-600); }
.manage-logo__edit { position:absolute; right:-6px; bottom:-6px; width:30px; height:30px; border-radius:50%; background:var(--brand-600); color:#fff; border:2px solid #fff; display:grid; place-items:center; cursor:pointer; }
.manage-logo__edit i { width:15px; height:15px; }
.manage-title { flex:1; min-width:180px; padding-bottom:6px; }
.manage-title h1 { font-size:25px; margin:0 0 6px; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.35); line-height:1.1; }
.manage-title .meta { font-size:13.5px; color:rgba(255,255,255,.92); display:flex; align-items:center; gap:8px; flex-wrap:wrap; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.manage-title .meta .pill { text-shadow:none; }

.module-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.module-card { display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; transition:.18s cubic-bezier(.2,.7,.3,1); }
.module-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.module-card__ic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:12px; }
.module-card__ic i { width:22px; height:22px; }
.module-card h4 { font-size:15px; margin:0 0 3px; color:var(--ink-900); }
.module-card p { font-size:12.5px; color:var(--ink-400); margin:0; line-height:1.4; }

.upload-zone { border:1.5px dashed var(--line); border-radius:14px; padding:16px; text-align:center; cursor:pointer; transition:.15s; background:var(--surface-2); }
.upload-zone:hover { border-color:var(--brand-400); background:var(--brand-50); }
.upload-zone i { width:22px; height:22px; color:var(--ink-400); }
.upload-zone .u-t { font-weight:700; font-size:13px; color:var(--ink-700); margin-top:6px; }
.upload-zone .u-s { font-size:11.5px; color:var(--ink-400); }
.upload-preview { width:100%; height:120px; object-fit:cover; border-radius:12px; margin-bottom:8px; display:none; }

/* mini upload (photo produit) */
.photo-pick { display:flex; align-items:center; gap:14px; }
.photo-pick__thumb { width:74px; height:74px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; flex:none; }
.photo-pick__thumb img { width:100%; height:100%; object-fit:cover; }
.photo-pick__thumb i { width:26px; height:26px; color:var(--ink-400); }

/* éditeur de catégories */
.cat-row { display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--line); }
.cat-row__ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--brand-50); color:var(--brand-600); }
.cat-row__ic i { width:17px; height:17px; }
.cat-row__name { flex:1; font-weight:600; color:var(--ink-800); font-size:14px; }
.cat-row .input { padding:7px 11px; }

/* ==========================================================================
   Facture (facture.html)
   ========================================================================== */
.facture-page { background:var(--surface-2); padding:24px 16px 60px; }
.fac-toolbar { max-width:820px; margin:0 auto 18px; display:flex; align-items:center; gap:10px; }
.facture { max-width:820px; margin:0 auto; background:#fff; color:#1a2233; border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); padding:44px 46px; }
.fac-top { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding-bottom:26px; border-bottom:2px solid #eef0f5; }
.fac-emit { display:flex; gap:15px; align-items:center; }
.fac-logo { width:68px; height:68px; border-radius:16px; overflow:hidden; flex:none; display:grid; place-items:center;
  background:#fff; border:1px solid #eef0f5; color:var(--brand-700); font-family:var(--font-head); font-weight:800; font-size:22px; padding:6px; }
.fac-logo img { width:100%; height:100%; object-fit:contain; }
.fac-emit__name { font-family:var(--font-head); font-weight:800; font-size:19px; color:#141b2c; letter-spacing:-.01em; }
.fac-emit__meta { font-size:12.5px; color:#6b7280; margin-top:4px; line-height:1.5; }
.fac-title { font-family:var(--font-head); font-weight:800; font-size:30px; letter-spacing:.04em; color:var(--brand-600); text-align:right; }
.fac-headinfo { margin-top:8px; margin-left:auto; font-size:12.5px; border-collapse:collapse; }
.fac-headinfo td { padding:2px 0; }
.fac-headinfo td:first-child { color:#9aa2b1; padding-right:16px; text-transform:uppercase; font-size:11px; letter-spacing:.03em; font-weight:700; }
.fac-headinfo td:last-child { text-align:right; font-weight:700; color:#141b2c; }
.fac-parties { display:flex; justify-content:space-between; gap:24px; padding:24px 0; }
.fac-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:800; color:#9aa2b1; margin-bottom:6px; }
.fac-client { font-weight:800; font-size:15px; color:#141b2c; font-family:var(--font-head); }
.fac-clientsub { font-size:12.5px; color:#6b7280; margin-top:2px; }
.fac-items { width:100%; border-collapse:collapse; margin-top:6px; }
.fac-items thead th { background:#f6f7fb; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; font-weight:800; padding:11px 14px; text-align:left; }
.fac-items thead th:first-child { border-radius:9px 0 0 9px; }
.fac-items thead th:last-child { border-radius:0 9px 9px 0; }
.fac-items th.num, .fac-items td.num { text-align:right; }
.fac-items tbody td { padding:13px 14px; border-bottom:1px solid #eef0f5; font-size:13.5px; color:#1a2233; }
.fac-items tbody td:first-child { font-weight:600; }
.fac-items tbody td.num { font-variant-numeric:tabular-nums; }
.fac-bottom { display:flex; justify-content:space-between; gap:30px; margin-top:26px; }
.fac-note { max-width:320px; }
.fac-pay { margin-top:2px; }
.fac-paypill { display:inline-block; background:var(--success-bg); color:var(--success); font-weight:800; font-size:12.5px; padding:6px 13px; border-radius:9px; }
.fac-paypill.is-credit { background:var(--danger-bg); color:var(--danger); }
.fac-thanks { font-size:12px; color:#8b93a3; margin-top:16px; line-height:1.6; }
.fac-totals { min-width:280px; }
.fac-row { display:flex; justify-content:space-between; padding:9px 0; font-size:13.5px; color:#4b5563; border-bottom:1px solid #eef0f5; }
.fac-row b { color:#141b2c; font-variant-numeric:tabular-nums; }
.fac-row--grand { border-bottom:0; margin-top:4px; padding:14px; background:var(--brand-50); border-radius:12px; font-size:16px; }
.fac-row--grand span { font-weight:700; color:var(--brand-700); }
.fac-row--grand b { font-family:var(--font-head); font-weight:800; font-size:18px; color:var(--brand-700); }
.fac-row--paid { border-bottom:0; }
.fac-footer { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:36px; padding-top:22px; border-top:2px solid #eef0f5; }
.fac-sign { font-size:12.5px; color:#9aa2b1; border-top:1px dashed #c7ccd6; padding-top:8px; width:180px; text-align:center; margin-top:34px; }
.fac-legal { font-size:11px; color:#9aa2b1; text-align:right; line-height:1.6; }
.fac-hint { max-width:820px; margin:-8px auto 18px; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-500);
  background:var(--brand-50); border:1px solid var(--brand-100); border-radius:12px; padding:10px 14px; }
.fac-hint i { width:16px; height:16px; color:var(--brand-600); flex:none; }
.fac-verify { display:flex; align-items:center; gap:12px; }
.fac-qr { width:78px; height:78px; flex:none; }
.fac-qr svg { width:78px; height:78px; display:block; }
.fac-verify__t { font-size:12.5px; font-weight:800; color:#141b2c; font-family:var(--font-head); }
.fac-verify__s { font-size:11px; color:#9aa2b1; }

@media print {
  @page { margin: 0; }
  html, body { background:#fff !important; }
  .no-print { display:none !important; }
  .facture-page { background:#fff; padding:0; }
  .facture { box-shadow:none; border:0; border-radius:0; max-width:none; padding:16mm 14mm; }
}

/* Badge de rôle (sidebar) */
.role-badge { display:flex; align-items:center; gap:8px; margin:-4px 14px 14px; padding:8px 12px; border-radius:12px; font-size:12.5px; font-weight:800; letter-spacing:.01em; }
.role-badge i { width:15px; height:15px; flex:none; }

/* Sélecteur de profil (login) */
.role-pick { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
.role-pick button { border:1px solid var(--line); background:var(--surface); border-radius:13px; padding:11px 8px; cursor:pointer; text-align:center; transition:.15s; }
.role-pick button:hover { border-color:var(--brand-300); }
.role-pick button.active { border-color:var(--brand-500); background:var(--brand-50); box-shadow:0 0 0 2px var(--brand-100) inset; }
.role-pick button i { width:20px; height:20px; color:var(--brand-600); }
.role-pick button .rp-t { font-size:12.5px; font-weight:800; color:var(--ink-800); margin-top:5px; }
.role-pick button .rp-s { font-size:10.5px; color:var(--ink-400); line-height:1.2; margin-top:2px; display:block; }

/* ==========================================================================
   Bandeau exécutif (accueil admin — vue consolidée réseau)
   ========================================================================== */
.exec-hero { position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:28px 32px; margin-bottom:22px; color:#fff;
  background:radial-gradient(130% 180% at 100% 0%, var(--brand-500), var(--brand-700) 52%, var(--brand-900));
  display:grid; grid-template-columns:1.3fr 1fr; gap:26px; align-items:center; }
.exec-hero::after { content:""; position:absolute; inset:0;
  background:radial-gradient(40% 70% at 88% 0%, rgba(255,255,255,.16), transparent 60%),
             radial-gradient(30% 60% at 6% 100%, rgba(255,255,255,.10), transparent 60%); pointer-events:none; }
.exec-hero > * { position:relative; z-index:1; }
.exec-hero__tag { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.15); color:#fff;
  padding:6px 12px; border-radius:99px; font-size:12px; font-weight:700; margin-bottom:16px; }
.exec-hero__tag i { width:14px; height:14px; }
.exec-hero__ca { font-family:var(--font-head); font-weight:800; font-size:42px; line-height:1; letter-spacing:-.02em; }
.exec-hero__label { color:rgba(255,255,255,.78); font-size:13px; margin-top:8px; }
.exec-hero__row { display:flex; gap:28px; margin-top:22px; flex-wrap:wrap; }
.exec-hero__row > div { position:relative; padding-right:28px; }
.exec-hero__row > div:not(:last-child)::after { content:""; position:absolute; right:0; top:3px; bottom:3px; width:1px; background:rgba(255,255,255,.2); }
.exec-hero__row b { font-family:var(--font-head); font-weight:800; font-size:20px; display:block; line-height:1.1; }
.exec-hero__row small { color:rgba(255,255,255,.72); font-size:12px; }
.exec-hero__side { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.exec-stat { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:14px 16px; backdrop-filter:blur(4px); }
.exec-stat b { font-family:var(--font-head); font-weight:800; font-size:22px; display:block; line-height:1; }
.exec-stat span { color:rgba(255,255,255,.78); font-size:12px; display:flex; align-items:center; gap:6px; margin-top:6px; }
.exec-stat span i { width:14px; height:14px; }
@media (max-width: 900px){ .exec-hero { grid-template-columns:1fr; padding:24px; } .exec-hero__ca { font-size:34px; } }

/* ==========================================================================
   SKINS « PRO » & « CLAIR » — interfaces entreprise (épurées, denses)
   Pro = barre latérale sombre · Clair = barre latérale claire
   ========================================================================== */
html[data-skin="pro"], html[data-skin="clair"] {
  --radius-sm: 7px; --radius: 9px; --radius-lg: 12px; --radius-xl: 16px;
  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow:    0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg: 0 14px 34px -14px rgba(15,23,42,.24);
  --ring: 0 0 0 3px rgba(37,99,214,.18);
  --topbar-h: 64px; --sidebar-w: 258px;
}
html[data-skin="pro"]:not([data-theme="dark"]), html[data-skin="clair"]:not([data-theme="dark"]) {
  --bg: #f5f7fb; --surface: #ffffff; --surface-2: #f1f4f9; --line: #e5e8ef;
  --ink-900:#0f172a; --ink-800:#1e293b; --ink-700:#334155; --ink-600:#475569;
  --ink-500:#64748b; --ink-400:#94a3b8; --ink-300:#cbd5e1; --ink-200:#e2e8f0; --ink-100:#f1f5f9;
}

/* ---- Barre latérale COLORÉE par le rôle (Pro) ---- */
html[data-skin="pro"] .sidebar { background:linear-gradient(180deg, var(--brand-700), var(--brand-900)); border-right:1px solid rgba(255,255,255,.08); }
html[data-skin="pro"] .brand-name { color:#fff; }
html[data-skin="pro"] .brand-sub { color:rgba(255,255,255,.62); }
html[data-skin="pro"] .brand-mark { background:rgba(255,255,255,.18); box-shadow:none; }
html[data-skin="pro"] .brand-mark i { color:#fff; }
html[data-skin="pro"] .loc-switch { background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); }
html[data-skin="pro"] .loc-switch:hover { border-color:rgba(255,255,255,.32); box-shadow:none; }
html[data-skin="pro"] .loc-switch__ic { background:rgba(255,255,255,.20); }
html[data-skin="pro"] .loc-switch__ic i { color:#fff; }
html[data-skin="pro"] .loc-switch__name { color:#fff; }
html[data-skin="pro"] .loc-switch__type { color:rgba(255,255,255,.68); }
html[data-skin="pro"] .loc-switch .chev { color:rgba(255,255,255,.6); }
html[data-skin="pro"] .nav-label { color:rgba(255,255,255,.5); }
html[data-skin="pro"] .nav-link { color:rgba(255,255,255,.82); }
html[data-skin="pro"] .nav-link i { color:rgba(255,255,255,.72); }
html[data-skin="pro"] .nav-link:hover { background:rgba(255,255,255,.12); color:#fff; }
html[data-skin="pro"] .nav-link:hover i { color:#fff; }
html[data-skin="pro"] .sidebar .nav-link.active { background:rgba(255,255,255,.20); color:#fff; box-shadow:none; }
html[data-skin="pro"] .sidebar .nav-link.active i { color:#fff; }
html[data-skin="pro"] .nav-link .badge-count { background:rgba(255,255,255,.24); color:#fff; }
html[data-skin="pro"] .nav-link.danger:hover { background:rgba(0,0,0,.22); color:#fff; }
html[data-skin="pro"] .nav-link.danger:hover i { color:#fff; }
html[data-skin="pro"] .sidebar__foot { border-top:1px solid rgba(255,255,255,.12); }
html[data-skin="pro"] .role-badge { background:rgba(255,255,255,.15) !important; color:#fff !important; border:1px solid rgba(255,255,255,.18); }
html[data-skin="pro"] .role-badge i { color:rgba(255,255,255,.85) !important; }

/* ---- Barre latérale CLAIRE (Clair) ---- */
html[data-skin="clair"] .sidebar { background:var(--surface); border-right:1px solid var(--line); }
html[data-skin="clair"] .loc-switch { background:var(--surface-2); }

/* ---- Éléments communs aux deux skins ---- */
html[data-skin="pro"] .nav-link, html[data-skin="clair"] .nav-link { border-radius:8px; font-weight:600; }
html[data-skin="clair"] .nav-link.active { background:linear-gradient(100deg,var(--brand-600),var(--brand-500)); color:#fff; box-shadow:none; }

/* Barre supérieure fine */
html[data-skin="pro"] .topbar, html[data-skin="clair"] .topbar { background:var(--surface); border-bottom:1px solid var(--line); box-shadow:none; }
html[data-skin="pro"] .topbar__welcome, html[data-skin="clair"] .topbar__welcome { display:none; }
html[data-skin="pro"] .topbar__title, html[data-skin="clair"] .topbar__title { font-size:15.5px; font-weight:700; }
html[data-skin="pro"] .icon-btn, html[data-skin="clair"] .icon-btn { border-radius:8px; }

/* Cartes plates à bordure */
html[data-skin="pro"] .card2, html[data-skin="clair"] .card2 { border:1px solid var(--line); box-shadow:var(--shadow-sm); border-radius:12px; }
html[data-skin="pro"] .card2:hover, html[data-skin="clair"] .card2:hover { box-shadow:var(--shadow); }
html[data-skin="pro"] .card2-head, html[data-skin="clair"] .card2-head { padding:15px 18px; }
html[data-skin="pro"] .card2-pad, html[data-skin="clair"] .card2-pad { padding:18px; }

/* KPI / stats : plats, chiffres tabulaires */
html[data-skin="pro"] .stat, html[data-skin="clair"] .stat { border:1px solid var(--line); box-shadow:var(--shadow-sm); border-radius:12px; }
html[data-skin="pro"] .stat:hover, html[data-skin="clair"] .stat:hover { transform:none; box-shadow:var(--shadow); border-color:var(--line); }
html[data-skin="pro"] .stat__val, html[data-skin="clair"] .stat__val,
html[data-skin="pro"] .mini-kpi__val, html[data-skin="clair"] .mini-kpi__val,
html[data-skin="pro"] .tbl .mono, html[data-skin="clair"] .tbl .mono,
html[data-skin="pro"] .exec-hero__ca, html[data-skin="clair"] .exec-hero__ca,
html[data-skin="pro"] .exec-stat b, html[data-skin="clair"] .exec-stat b,
html[data-skin="pro"] .mini-stat__val, html[data-skin="clair"] .mini-stat__val { font-variant-numeric: tabular-nums; }
html[data-skin="pro"] .mini-kpi, html[data-skin="clair"] .mini-kpi { border-radius:10px; }
html[data-skin="pro"] .mini-kpi:hover, html[data-skin="clair"] .mini-kpi:hover { transform:none; box-shadow:var(--shadow-sm); }

/* Boutons plats */
html[data-skin="pro"] .btn, html[data-skin="clair"] .btn { border-radius:8px; font-size:13.5px; padding:9px 16px; }
html[data-skin="pro"] .btn-primary, html[data-skin="clair"] .btn-primary { background:var(--brand-600); box-shadow:none; }
html[data-skin="pro"] .btn-primary:hover, html[data-skin="clair"] .btn-primary:hover { background:var(--brand-700); filter:none; transform:none; }
html[data-skin="pro"] .btn-success, html[data-skin="clair"] .btn-success { box-shadow:none; }
html[data-skin="pro"] .btn-success:hover, html[data-skin="clair"] .btn-success:hover { transform:none; filter:brightness(1.04); }
html[data-skin="pro"] .btn-ghost:hover, html[data-skin="clair"] .btn-ghost:hover { transform:none; box-shadow:none; background:var(--surface-2); border-color:var(--line); color:var(--ink-800); }
html[data-skin="pro"] .btn-sm, html[data-skin="clair"] .btn-sm { border-radius:7px; }

/* Tables denses */
html[data-skin="pro"] .tbl thead th, html[data-skin="clair"] .tbl thead th { background:var(--surface-2); text-transform:uppercase; font-size:11px; letter-spacing:.04em; color:var(--ink-500); }
html[data-skin="pro"] .tbl td, html[data-skin="clair"] .tbl td, html[data-skin="pro"] .tbl th, html[data-skin="clair"] .tbl th { padding:11px 16px; }
html[data-skin="pro"] .tbl tbody tr:hover, html[data-skin="clair"] .tbl tbody tr:hover { background:var(--surface-2); }

/* Champs */
html[data-skin="pro"] .input, html[data-skin="clair"] .input,
html[data-skin="pro"] .select, html[data-skin="clair"] .select,
html[data-skin="pro"] .search, html[data-skin="clair"] .search { border-radius:8px; }

/* Héros / cartes : coins plus nets */
html[data-skin="pro"] .exec-hero, html[data-skin="clair"] .exec-hero,
html[data-skin="pro"] .select-hero, html[data-skin="clair"] .select-hero { border-radius:14px; }
html[data-skin="pro"] .storecard, html[data-skin="clair"] .storecard,
html[data-skin="pro"] .module-card, html[data-skin="clair"] .module-card { border-radius:12px; }
html[data-skin="pro"] .storecard:hover, html[data-skin="clair"] .storecard:hover,
html[data-skin="pro"] .module-card:hover, html[data-skin="clair"] .module-card:hover { transform:translateY(-3px); }

/* Sélecteur de skin (menu palette) */
.skin-opt { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; cursor:pointer; border:1px solid var(--line); background:var(--surface); font-size:12.5px; font-weight:700; color:var(--ink-800); }
.skin-opt:hover { background:var(--surface-2); }
.skin-opt.active { border-color:var(--brand-400); box-shadow:0 0 0 2px var(--brand-100) inset; }
.skin-opt i { width:16px; height:16px; color:var(--brand-600); }

/* Pagination des tableaux */
.pager { display:flex; align-items:center; gap:12px; padding:11px 18px; border-top:1px solid var(--line); flex-wrap:wrap; }
.pager__info { font-size:12.5px; color:var(--ink-500); }
.pager__ctrl { margin-left:auto; display:flex; align-items:center; gap:8px; }
.pager__pages { font-size:13px; font-weight:700; color:var(--ink-700); min-width:92px; text-align:center; }

/* ==========================================================================
   CHARTE « ADMINISTRATION » — unifiée sur tout le système (tous les rôles)
   Reprend le modèle marine du portail admin : fonds clairs, cartes nettes,
   tableaux à en-tête marine. Limitée au thème clair (le mode sombre reste).
   ========================================================================== */
html:not([data-theme="dark"]) {
  --bg:#eef1f6; --surface:#ffffff; --surface-2:#f3f6fa; --line:#e2e7ee;
}

/* Titres de page et de carte en marine */
html:not([data-theme="dark"]) .page-title { color: var(--brand-900); }
html:not([data-theme="dark"]) .card2-title,
html:not([data-theme="dark"]) .card2-head h3 { color: var(--brand-900); }

/* Cartes : coins doux + ombre marine légère */
html:not([data-theme="dark"]) .card2 {
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 8px 24px -20px rgba(23,42,79,.30);
}

/* ---- Tableaux façon administration ---- */
html:not([data-theme="dark"]) .tbl thead th,
html[data-skin="pro"]:not([data-theme="dark"]) .tbl thead th,
html[data-skin="clair"]:not([data-theme="dark"]) .tbl thead th {
  background:#e9edf3; color:#44546a; text-transform:none; letter-spacing:0;
  font-size:12.5px; font-weight:700; border-bottom:1px solid var(--line); white-space:nowrap;
}
html:not([data-theme="dark"]) .tbl tbody tr:hover,
html[data-skin="pro"]:not([data-theme="dark"]) .tbl tbody tr:hover { background:#f4f7fb; }

/* En-tête MARINE pour toute carte contenant un tableau (comme les panneaux admin) */
html:not([data-theme="dark"]) .card2:has(.table-wrap) > .card2-head {
  background:linear-gradient(90deg, var(--brand-800) 0%, var(--brand-800) 62%, var(--brand-900) 100%);
  border-bottom:0; border-radius:14px 14px 0 0;
}
html:not([data-theme="dark"]) .card2:has(.table-wrap) > .card2-head h3,
html:not([data-theme="dark"]) .card2:has(.table-wrap) > .card2-head .card2-title { color:#fff; }
html:not([data-theme="dark"]) .card2:has(.table-wrap) > .card2-head .text-muted-2,
html:not([data-theme="dark"]) .card2:has(.table-wrap) > .card2-head .card2-sub { color:rgba(255,255,255,.72) !important; }
html:not([data-theme="dark"]) .card2:has(.table-wrap) > .card2-head .btn-primary {
  background:#fff; color:var(--brand-800); box-shadow:none;
}
html:not([data-theme="dark"]) .card2:has(.table-wrap) > .card2-head .btn-primary:hover { background:#eaf0f8; }
html:not([data-theme="dark"]) .card2:has(.table-wrap) > .card2-head .btn-ghost,
html:not([data-theme="dark"]) .card2:has(.table-wrap) > .card2-head .btn-soft {
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3);
}
html:not([data-theme="dark"]) .card2:has(.table-wrap) > .card2-head .icon-mini {
  background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28);
}

/* KPI / stats : chiffre en marine, coins doux */
html:not([data-theme="dark"]) .stat { border-radius:14px; }
html:not([data-theme="dark"]) .stat__val { color:var(--brand-900); }

/* Boutons primaires : dégradé orange -> noir (charte TOPTEN) */
html:not([data-theme="dark"]) .btn-primary { background:linear-gradient(120deg, var(--brand-500) 0%, var(--brand-600) 48%, var(--brand-900) 100%); box-shadow:0 12px 24px -14px rgba(230,92,4,.55); }
html:not([data-theme="dark"]) .btn-primary:hover { background:linear-gradient(120deg, var(--brand-600) 0%, var(--brand-700) 45%, var(--brand-900) 100%); filter:none; }

/* Onglets segmentés : actif en marine */
html:not([data-theme="dark"]) .seg button.active { color:var(--brand-800); }

/* ==========================================================================
   MENU HORIZONTAL (PORTAIL) — unique sur toutes les pages, tous les rôles
   Remplace le menu latéral. Le #sidebar est masqué, le #topbar devient
   l'en-tête portail (barre blanche + barre marine), pleine largeur.
   ========================================================================== */
.app { display:block; }
.sidebar, .sidebar-backdrop { display:none !important; }
.main { margin-left:0 !important; }
.topbar {
  height:auto !important; padding:0 !important; display:block !important;
  position:sticky; top:0; z-index:1030; background:transparent !important;
  border-bottom:0 !important; backdrop-filter:none !important;
}
.main .page { max-width:1460px; margin-left:auto; margin-right:auto; }

/* --- Conteneur centré (premium, largeur maîtrisée) --- */
.pf-in { max-width:1500px; width:100%; margin:0 auto; display:flex; align-items:center; gap:13px; padding:8px 26px; }
.pf-in--nav { align-items:stretch; gap:8px; padding:0 26px; }

/* --- Barre blanche supérieure --- */
.pf-top { background:var(--surface); border-bottom:1px solid var(--line); }
.pf-logo { display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; color:var(--brand-900); text-decoration:none; }
.pf-logoimg { height:38px; width:auto; display:block; }
.pf-mark { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--brand-600), var(--brand-800)); }
.pf-mark i { width:17px; height:17px; }
.pf-name { display:flex; align-items:center; color:var(--brand-900); }
.pf-box { border:2px solid currentColor; border-radius:5px; padding:0 6px; margin-left:5px; font-size:12px; letter-spacing:.11em; font-weight:800; }
.pf-sp { flex:1; }
.pf-link { display:inline-flex; align-items:center; gap:6px; color:var(--ink-600); font-size:13.5px; font-weight:600; cursor:pointer; background:transparent; border:0; white-space:nowrap; text-decoration:none; }
.pf-link:hover { color:var(--brand-700); }
.pf-link i { width:16px; height:16px; }
.pf-logout { color:#c0392b; } .pf-logout:hover { color:#9c2114; }
.pf-ic { position:relative; width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--ink-500); display:grid; place-items:center; cursor:pointer; }
.pf-ic:hover { color:var(--brand-700); border-color:var(--brand-200); }
.pf-ic i { width:18px; height:18px; }
.pf-ic .num { position:absolute; top:-5px; right:-5px; background:var(--danger); color:#fff; font-size:10px; font-weight:800; min-width:17px; height:17px; border-radius:9px; display:grid; place-items:center; padding:0 4px; border:2px solid var(--surface); }
.pf-sep { width:1px; height:22px; background:var(--line); }
.pf-user { display:flex; align-items:center; gap:9px; cursor:pointer; }
.pf-user .avatar { width:34px; height:34px; border-radius:9px; background:var(--brand-700); color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; }
.pf-user__n { font-size:13px; font-weight:700; color:var(--ink-900); line-height:1.1; }
.pf-user__r { font-size:11px; color:var(--ink-400); }

/* --- Barre de navigation marine --- */
.pf-nav { background:linear-gradient(90deg, var(--brand-800) 0%, var(--brand-800) 68%, var(--brand-900) 100%); }
.pf-loc { display:flex; align-items:center; gap:8px; align-self:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:9px; padding:6px 10px; color:#fff; font-size:12.5px; font-weight:700; margin:6px 10px 6px 0; max-width:230px; text-decoration:none; flex:none; }
.pf-loc--empty { background:#fff; color:var(--brand-900); border-color:#fff; }
.pf-loc--empty:hover { background:#eef1f6; }
.pf-loc i { width:15px; height:15px; flex:none; }
.pf-loc__n { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-loc__c { opacity:.7; margin-left:auto; }
.pf-loc:not(.pf-loc--lock):hover { background:rgba(255,255,255,.2); }
.pf-locdd .pf-loc { font-family:inherit; cursor:pointer; }
.pf-locmenu { padding:8px; min-width:300px; max-width:340px; border-radius:12px; }
.pf-locsearch { position:relative; margin-bottom:6px; }
.pf-locsearch i { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-400); }
.pf-locsearch input { width:100%; height:38px; border:1px solid var(--line); border-radius:9px; padding:0 12px 0 34px; font-size:13px; font-family:inherit; color:var(--ink-900); outline:none; background:var(--surface); }
.pf-locsearch input:focus { border-color:var(--brand-400); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-500) 15%, transparent); }
.pf-locscroll { max-height:360px; overflow-y:auto; }
.pf-locmenu .nav-label { padding:9px 8px 4px; }
.pf-locitem { display:flex; align-items:center; gap:10px; border-radius:9px; padding:9px 10px; font-size:13px; font-weight:600; color:var(--ink-800); text-decoration:none; }
.pf-locitem i { width:16px; height:16px; color:var(--brand-600); flex:none; }
.pf-locitem__n { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-locitem__p { font-size:11px; color:var(--ink-400); font-weight:500; white-space:nowrap; }
.pf-locitem:hover { background:var(--surface-2); color:var(--brand-800); }
.pf-locitem.active { background:var(--brand-50); color:var(--brand-800); }
.pf-locitem__c { width:15px !important; color:var(--brand-700) !important; margin-left:4px; }
.pf-tabs { display:flex; align-items:stretch; flex:1; min-width:0; }
.pf-tabscroll { display:flex; align-items:stretch; flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
.pf-tabscroll::-webkit-scrollbar { display:none; }
.pf-plusdd { flex:none; align-self:stretch; display:flex; align-items:stretch; }
.pf-tab { display:inline-flex; align-items:center; gap:7px; padding:0 13px; color:#dfe7f2; font-weight:600; font-size:13px; border-right:1px solid rgba(255,255,255,.08); min-height:48px; text-decoration:none; white-space:nowrap; transition:.14s; background:transparent; border-top:0; border-bottom:0; border-left:0; cursor:pointer; }
.pf-tab:first-child { border-left:1px solid rgba(255,255,255,.08); }
.pf-tab i { width:16px; height:16px; }
.pf-tab:hover { background:rgba(255,255,255,.1); color:#fff; }
.pf-tab.active { background:#eef1f6; color:var(--brand-900); font-weight:800; }
.pf-tab--more { color:#cfe0f5; }
.pf-badge { background:var(--danger); color:#fff; font-size:10px; font-weight:800; min-width:17px; height:17px; border-radius:9px; display:grid; place-items:center; padding:0 5px; }
.pf-tab.active .pf-badge { background:var(--brand-700); }
.pf-role { align-self:center; display:flex; align-items:center; gap:7px; color:rgba(255,255,255,.82); font-size:12px; font-weight:700; padding:0 4px 0 14px; margin-left:4px; border-left:1px solid rgba(255,255,255,.14); flex:none; white-space:nowrap; }
.pf-role i { width:15px; height:15px; }
.pf-plusdd .dropdown-menu .dropdown-item.active { background:var(--brand-50); color:var(--brand-800); font-weight:700; }
.pf-plusdd .dropdown-menu .dropdown-item { display:flex; align-items:center; gap:9px; }

@media (max-width: 1000px){
  .pf-in { flex-wrap:wrap; gap:10px; padding:9px 16px; }
  .pf-in--nav { padding:0 10px; }
  .pf-link span, .pf-user__b { display:none; }
  .pf-role { display:none; }
  .pf-tab span { font-size:12.5px; }
  .pf-tabs { flex-wrap:wrap; }
}

/* --- Menu déroulant des notifications --- */
.pf-notifmenu { padding:0; min-width:340px; max-width:380px; border-radius:12px; overflow:hidden; }
.pf-notifhead { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-900); }
.pf-notiflink { border:0; background:transparent; color:var(--brand-600); font-size:12px; font-weight:700; cursor:pointer; }
.pf-notiflink:hover { color:var(--brand-800); }
.pf-notifscroll { max-height:380px; overflow-y:auto; }
.pf-notifitem { display:flex; align-items:flex-start; gap:11px; padding:11px 14px; border-bottom:1px solid var(--line); text-decoration:none; position:relative; }
.pf-notifitem:last-child { border-bottom:0; }
.pf-notifitem:hover { background:var(--surface-2); }
.pf-notifitem.unread { background:var(--brand-50); }
.pf-notific { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--brand-50); color:var(--brand-600); }
.pf-notific i { width:17px; height:17px; }
.pf-notific.tone-red { background:var(--danger-bg); color:var(--danger); }
.pf-notific.tone-orange { background:var(--warning-bg); color:var(--accent-600); }
.pf-notific.tone-green { background:var(--success-bg); color:var(--success); }
.pf-notiftxt { min-width:0; display:flex; flex-direction:column; gap:2px; }
.pf-notiftxt b { font-size:13px; color:var(--ink-900); }
.pf-notiftxt small { font-size:12px; color:var(--ink-600); line-height:1.35; }
.pf-notiftxt em { font-size:11px; color:var(--ink-400); font-style:normal; }
.pf-notifdot { position:absolute; right:12px; top:14px; width:8px; height:8px; border-radius:50%; background:var(--brand-600); }
.pf-notifempty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 16px; color:var(--ink-400); font-size:13px; }
.pf-notifempty i { width:26px; height:26px; opacity:.5; }

/* ==========================================================================
   Pied de page global (TOPTEN) — orange dominant + noir chaud
   ========================================================================== */
.pf-footer { margin-top:38px; border-top:3px solid var(--brand-600); background:var(--surface); }
.pf-foot__in { max-width:1500px; margin:0 auto; padding:32px 26px 24px;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr; gap:30px; }
.pf-foot__logo { height:40px; width:auto; display:block; margin-bottom:12px; }
.pf-foot__tag { font-size:13px; color:var(--ink-600); margin:0 0 14px; max-width:260px; line-height:1.55; }
.pf-foot__chips { display:flex; flex-wrap:wrap; gap:8px; }
.pf-foot__chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  color:var(--brand-700); background:var(--brand-50); border:1px solid var(--brand-100);
  border-radius:99px; padding:5px 11px; }
.pf-foot__chip i { width:14px; height:14px; }
.pf-foot__col h4 { font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-900); margin:2px 0 13px; font-weight:800; }
.pf-foot__col a { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-600);
  text-decoration:none; padding:5px 0; transition:color .15s, transform .15s; }
.pf-foot__col a:hover { color:var(--brand-600); transform:translateX(2px); }
.pf-foot__col a i { width:15px; height:15px; opacity:.7; }
.pf-foot__locname { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  color:var(--ink-900); margin-bottom:14px; }
.pf-foot__locname i { width:16px; height:16px; color:var(--brand-600); flex:none; }
.pf-foot__top { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  color:#fff; background:linear-gradient(100deg, var(--brand-600), var(--brand-500));
  padding:8px 14px; border-radius:10px; text-decoration:none; box-shadow:0 10px 22px -12px rgba(230,92,4,.6); }
.pf-foot__top:hover { filter:brightness(1.06); }
.pf-foot__top i { width:15px; height:15px; }
.pf-foot__bar { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:11px;
  background:var(--brand-900); color:#e6d8cd; font-size:12.5px; padding:14px 26px; }
.pf-foot__sep { color:var(--brand-400); }
@media (max-width:980px) { .pf-foot__in { grid-template-columns:1fr 1fr; } .pf-foot__brand { grid-column:1 / -1; } }
@media (max-width:560px) { .pf-foot__in { grid-template-columns:1fr; gap:22px; } }