:root {
  --green-900: #064e3b;
  --green-800: #065f46;
  --green-700: #047857;
  --green-600: #059669;
  --green-500: #10b981;
  --green-100: #d1fae5;
  --green-50: #ecfdf5;
  --ink: #1e293b;
  --gray-600: #64748b;
  --gray-400: #94a3b8;
  --gray-200: #e2e8f0;
  --gray-100: #f1f5f9;
  --bg: #f4f7f6;
  --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-600: #2563eb;
  --purple-50: #f5f3ff; --purple-100: #ede9fe; --purple-600: #7c3aed;
  --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-600: #d97706;
  --red-50: #fef2f2; --red-100: #fee2e2; --red-600: #dc2626;
  --card-radius: 16px;
  --card-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --card-shadow-hover: 0 8px 20px rgba(15,23,42,.07);
}

* { box-sizing: border-box; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(90deg, var(--green-900), var(--green-800));
  padding: 14px 28px;
  color: white;
  box-shadow: 0 2px 8px rgba(6, 78, 59, 0.25);
}
.logo {
  color: white;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  font-size: 21px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.logo-img {
  height: 30px;
  display: block;
  background: white;
  padding: 5px 12px;
  border-radius: 8px;
}
.search-form { flex: 1; display: flex; max-width: 520px; }
.search-form input {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 6px 0 0 6px;
  font-size: 14px;
  outline: none;
}
.search-form button {
  padding: 10px 18px;
  border: none;
  background: var(--green-500);
  color: white;
  font-weight: 600;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: background 0.15s;
}
.search-form button:hover { background: #0da271; }
.badge {
  font-size: 12px;
  background: rgba(255,255,255,0.12);
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.account-nav { color: white; font-size: 13px; white-space: nowrap; display: flex; align-items: center; gap: 20px; }
.account-nav a { color: var(--green-100); text-decoration: none; font-weight: 500; }
.account-nav a:hover { text-decoration: underline; }
.cart-icon-link {
  position: relative; display: flex; align-items: center; color: white !important;
  margin-left: 12px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.25);
}
.cart-icon-link:hover { text-decoration: none !important; opacity: 0.85; }
.cart-icon-badge {
  position: absolute; top: -8px; right: -10px;
  background: var(--green-500); color: white;
  font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}

.client-notif-bell { position: relative; margin-left: 12px; }
.client-notif-bell summary { list-style: none; cursor: pointer; }
.client-notif-bell summary::-webkit-details-marker { display: none; }
.client-notif-dropdown {
  position: absolute; right: 0; top: calc(100% + 12px); width: 300px; max-height: 380px; overflow-y: auto;
  background: white; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  z-index: 50; padding: 6px; color: #1e293b;
}
.client-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 6px; font-size: 12px; font-weight: 700; }
.client-notif-head button { background: none; border: none; color: #16a34a; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; }
.client-notif-item { width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 8px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 2px; }
.client-notif-item:hover { background: #f1f5f9; }
.client-notif-item.unread { background: #f0fdf4; font-weight: 600; }
.client-notif-item small { color: #94a3b8; font-size: 10.5px; font-weight: 400; }
.client-notif-empty { font-size: 12px; color: #94a3b8; padding: 14px 8px; text-align: center; }

/* ---------- Header client unifié (blanc) — voir project_client_portal_v1 ---------- */
.client-topbar {
  display: flex; align-items: center; gap: 24px; background: white;
  border-bottom: 1px solid var(--gray-200); padding: 12px 28px;
}
.client-topbar .logo-img { background: transparent; padding: 0; height: 30px; }
.topbar .logo-img { background: transparent; padding: 0; height: 28px; }
.client-logo-block { display: flex; flex-direction: column; gap: 2px; text-decoration: none; flex-shrink: 0; }
.client-logo-block small { color: var(--gray-600); font-size: 10px; font-weight: 600; white-space: nowrap; }
.client-avatar-chevron { display: flex; width: 12px; height: 12px; color: var(--gray-400); transform: rotate(90deg); }
.client-search-form {
  flex: 1; max-width: 760px; margin: 0 -6px 0 auto; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--gray-200); border-radius: 999px; padding: 15px 18px; background: var(--bg);
}
.client-search-form svg { width: 16px; height: 16px; color: var(--gray-400); flex-shrink: 0; }
.client-search-form input { flex: 1; border: none; background: none; outline: none; font-size: 15.5px; color: var(--ink); }
.client-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.client-cart-link { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--ink); position: relative; }
.client-cart-link .cart-icon-wrap { position: relative; color: var(--gray-600); display: flex; }
.client-cart-link .cart-icon-wrap svg { width: 21px; height: 21px; }
.client-cart-meta { display: flex; flex-direction: column; line-height: 1.25; }
.client-cart-meta small { color: var(--gray-600); font-size: 11px; font-weight: 600; }
.client-cart-meta strong { font-size: 13px; font-weight: 700; }
.client-account-menu { position: relative; }
.client-account-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; }
.client-account-menu summary::-webkit-details-marker { display: none; }
.client-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--green-700); color: white;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.client-avatar-meta { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.client-avatar-meta strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.client-avatar-meta small { font-size: 11px; color: var(--gray-600); font-weight: 600; }
.client-account-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 160px; background: white;
  border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); z-index: 50; padding: 6px;
}
.client-account-dropdown a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; }
.client-account-dropdown a:hover { background: var(--gray-100); }

.client-bell-trigger { position: relative; display: flex; align-items: center; color: var(--gray-600) !important; cursor: pointer; }
.client-bell-trigger svg { width: 21px; height: 21px; }
.client-bell-trigger:hover { color: var(--ink) !important; }

main { padding: 18px 32px 28px; max-width: clamp(1400px, 94vw, 2000px); margin: 0 auto; }

h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 16px; }
/* Portail client uniquement (jamais l'admin) — titres de page + sous-titre agrandis avec plus
   d'interligne, demandé par Théo 2026-09-15 sur Cotations/Marques/Commandes/Factures.
   ATTENTION : .admin-content est partagé par portal_base.html ET admin_base.html (même classe pour
   les deux layouts) — un simple ".admin-content h1" touchait donc aussi l'admin en théorie, mais était
   invisible là où l'admin utilise .dash-header-row (règle plus spécifique, 20px, qui gagnait). Sur
   commandes/factures (qui utilisent aussi .dash-header-row côté CLIENT) le même écrasement empêchait le
   changement de s'appliquer. Fix propre : nouvelle classe .portal-content (uniquement sur portal_base.html)
   qui prime sur .dash-header-row h1 dans tous les cas. */
.portal-content h1 { font-size: 28px; margin: 0 0 10px; }
/* .dash-header-row est en display:flex : la margin-bottom du h1 ne collapse pas avec le
   .portal-subtitle qui suit (contrairement au h1 "nu" de cotations/marques), elle s'additionne
   pour de vrai à la margin-top du sous-titre -> gap trop grand. On met le h1 wrappé à margin:0
   pour que le gap soit piloté uniquement par .portal-subtitle, identique au cas non-wrappé. */
.portal-content .dash-header-row h1 { font-size: 28px; margin: 0; }
.portal-content .dash-header-row { margin-bottom: 0; }
/* Pages sans .portal-subtitle après le header (ex: détail commande) : le gap ci-dessus tombait à 0px
   (pensé pour être piloté par .portal-subtitle, absent ici) — remis à 16px pour matcher le rythme
   interne de la page elle-même (.kpi-grid margin-bottom:16px, .dash-row-2 margin-top:16px juste en
   dessous) plutôt que le 22px de .portal-subtitle (jugé trop grand par Théo 2026-09-24). */
.portal-content .dash-header-row + .kpi-grid { margin-top: 16px; }
.portal-subtitle { color: var(--gray-600); margin-bottom: 22px; font-size: 15px; line-height: 1.6; }

/* ---------- Mon compte (fiche client éditable, voir project_client_portal_v1) ---------- */
.profile-alert { padding: 10px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; }
.profile-alert.ok { background: var(--green-100); color: var(--green-800); }
.profile-alert.danger { background: #fee2e2; color: #991b1b; }
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.profile-field { display: flex; flex-direction: column; gap: 5px; }
.profile-field label { font-size: 12px; font-weight: 600; color: var(--gray-600); }
.profile-field input {
  padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: 13.5px;
  font-family: inherit; color: var(--ink); background: white;
}
.profile-field input:focus { outline: none; border-color: var(--green-600); }
.profile-field input:disabled { background: var(--gray-100); color: var(--gray-500); }
@media (max-width: 640px) { .profile-grid { grid-template-columns: 1fr; } }

/* ---------- Hero (accueil) ---------- */
.hero {
  background: linear-gradient(135deg, var(--green-900), var(--green-700));
  border-radius: 16px;
  padding: 56px 32px;
  text-align: center;
  margin-bottom: 32px;
  color: white;
}
.hero-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.hero-subtitle {
  color: var(--green-100);
  font-size: 15px;
  margin: 0 0 28px;
}
.hero-search {
  display: flex;
  align-items: center;
  max-width: 640px;
  margin: 0;
  background: white;
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.hero-search-icon { color: var(--gray-600); margin-left: 12px; flex-shrink: 0; }
.hero-search input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 10px;
  font-size: 15px;
  color: var(--ink);
}
.hero-search button {
  padding: 12px 22px;
  border: none;
  background: var(--green-500);
  color: white;
  font-weight: 700;
  border-radius: 7px;
  cursor: pointer;
}
.hero-search button:hover { background: #0da271; }
.section-title { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: var(--ink); }

/* ---------- Hero v2 (accueil, refonte 2026-09-14) ---------- */
.hero-v2 {
  background: linear-gradient(135deg, var(--green-900), var(--green-700));
  border-radius: 16px; padding: 40px 36px; margin-bottom: 28px; color: white;
  display: flex; gap: 40px; align-items: center; position: relative;
}
.hero-v2-logo { position: absolute; top: 20px; right: 28px; height: 24px; opacity: 0.9; }
.hero-v2-left { flex: 1.3; min-width: 0; }
.hero-v2-right { flex: 1; display: flex; flex-direction: column; gap: 20px; border-left: 1px solid rgba(255,255,255,0.18); padding-left: 32px; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 700; color: var(--green-100); }
.hero-title-v2 { font-size: 30px; font-weight: 800; line-height: 1.2; margin: 10px 0 12px; letter-spacing: -0.01em; }
.hero-title-v2 .accent { color: #6ee7b7; }
.hero-subtitle-v2 { color: var(--green-100); font-size: 14px; margin: 0 0 22px; max-width: 440px; }
.hero-example { color: var(--green-100); font-size: 12px; margin: 10px 0 0; opacity: 0.85; }
.hero-v2-feature { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; font-weight: 700; }
.hero-v2-feature-icon { display: flex; width: 20px; height: 20px; flex-shrink: 0; color: #6ee7b7; margin-top: 1px; }
.hero-v2-feature small { font-weight: 500; color: var(--green-100); }
@media (max-width: 900px) {
  .hero-v2 { flex-direction: column; }
  .hero-v2-right { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 20px; }
}

/* ---------- Ligne fournisseurs compacte (accueil) ---------- */
.brands-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.brand-tile {
  flex: 1; min-width: 130px; background: white; border: 1px solid var(--gray-200); border-radius: 12px;
  height: 72px; display: flex; align-items: center; justify-content: center; padding: 10px;
  box-shadow: var(--card-shadow); transition: transform 0.15s, box-shadow 0.15s;
}
.brand-tile:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.brand-tile-more {
  flex-direction: column; gap: 2px; color: var(--green-700); font-size: 12.5px; font-weight: 700;
  text-align: center; text-decoration: none; line-height: 1.3;
}

/* ---------- Compte client : onglets ---------- */
.account-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--gray-200); margin-bottom: 20px; }
.account-tab {
  padding: 10px 2px; color: var(--gray-600); text-decoration: none; font-size: 14px; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.account-tab.active { color: var(--green-700); border-bottom-color: var(--green-600); }

/* ---------- Portail client : barre d'onglets horizontale (voir project_client_portal_v1) ---------- */
.portal-tabs {
  display: flex; justify-content: flex-start; align-items: center; gap: 32px; background: white;
  border-bottom: 1px solid var(--gray-200); padding: 0 24px; overflow-x: auto; box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.portal-tabs-group { display: flex; gap: 28px; flex-shrink: 0; }
.portal-tab-help { margin-left: auto; }
.icon-action-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; font-family: inherit;
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; justify-content: center; transition: transform 0.1s, opacity 0.15s;
}
.icon-action-btn svg { width: 19px; height: 19px; }
.ref-edit-btn svg { width: 13px; height: 13px; }
.icon-action-btn:hover { transform: scale(1.08); opacity: 0.85; }
.icon-action-btn.approve { background: var(--green-100); color: var(--green-700); }
.icon-action-btn.reject { background: var(--red-100); color: var(--red-600); }
.portal-tab {
  display: flex; align-items: center; gap: 7px; padding: 14px 16px; color: var(--ink);
  text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; opacity: 0.62;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s, opacity 0.15s;
}
.portal-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
/* "Besoin d'aide ?" est un <button> (pas un <a>, depuis le popup 2026-09-24) — sans ce reset, le style
   natif du navigateur ajoute un cadre/fond visible que les autres onglets (des <a>) n'ont pas. */
button.portal-tab { background: none; border: none; border-bottom: 2.5px solid transparent; font-family: inherit; cursor: pointer; }
.portal-tab:hover { opacity: 1; }
.portal-tab.active { color: var(--green-700); border-bottom-color: var(--green-600); opacity: 1; }
.invoice-box { background: white; padding: 36px 48px; border-radius: 12px; max-width: 880px; break-inside: avoid; page-break-inside: avoid; }
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 24px; }
.invoice-company-block { font-size: 12.5px; color: var(--gray-700, #374151); line-height: 1.6; margin: 0; }
.invoice-client-box {
  background: #eefcf3; border: 1px solid #b8ecc9; border-radius: 8px; padding: 12px 16px; margin-top: 31px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink); min-width: 240px; max-width: 420px; white-space: nowrap;
}
.invoice-title { font-size: 24px; font-weight: 800; margin: 10px 0 16px; }
.invoice-meta-table, .invoice-table, .invoice-tva-table { width: 100%; border-collapse: collapse; }
.invoice-meta-table th, .invoice-tva-table th {
  background: var(--green-600); color: white; text-align: left; padding: 8px 10px; font-size: 11.5px; font-weight: 700;
}
.invoice-meta-table td, .invoice-tva-table td { padding: 8px 10px; font-size: 13px; border: 1px solid var(--gray-200); border-top: none; }
.invoice-table { margin: 0 0 20px; }
.invoice-table th {
  background: var(--green-600); color: white; text-align: left; padding: 8px 10px; font-size: 11.5px; font-weight: 700;
}
.invoice-table th.num, .invoice-table td.num { text-align: right; }
.invoice-table td { padding: 8px 10px; border-bottom: 1px solid var(--gray-200); font-size: 13px; }
.invoice-totals-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin: 8px 0 24px; flex-wrap: wrap; }
.invoice-tva-table { max-width: 320px; }
.invoice-net-table { border-collapse: collapse; min-width: 260px; }
.invoice-net-table td { padding: 6px 12px; font-size: 13.5px; border: 1px solid var(--gray-200); }
.invoice-net-table td:first-child { background: var(--green-600); color: white; font-weight: 700; }
.invoice-net-table td:last-child { text-align: right; }
.invoice-net-table tr.net-a-payer td { font-weight: 800; font-size: 14.5px; }
.invoice-footer { display: flex; justify-content: space-between; gap: 24px; padding-top: 16px; border-top: 1px solid var(--gray-200); font-size: 12.5px; color: var(--ink); flex-wrap: wrap; break-inside: avoid; page-break-inside: avoid; }
.invoice-rib { text-align: right; margin-left: auto; }
@media (max-width: 640px) {
  .invoice-header, .invoice-totals-row, .invoice-footer { flex-direction: column; }
  .invoice-rib { text-align: left; }
}
@media print {
  .topbar, .client-topbar, .portal-tabs, .no-print { display: none !important; }
  /* PDF facture/BL : marges latérales trop larges signalées par Antoine 2026-09-16 — le document
     paraissait "flottant" au milieu de la page. Élargit le contenu utile sans toucher au rendu écran. */
  .invoice-box { max-width: 100% !important; padding: 20px 14px !important; }
  /* Le footer (Mode de règlement / RIB) passait à la ligne en PDF (largeur de page plus étroite qu'à
     l'écran) — RIB atterrissait plus bas au lieu d'être à la même hauteur. Empêche le retour à la ligne. */
  .invoice-footer { flex-wrap: nowrap !important; }
  .invoice-footer > div { min-width: 0; }
}

/* ---------- Tuiles fournisseurs ---------- */
.supplier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.supplier-tile {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 100px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.supplier-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(6, 95, 70, 0.12);
  border-color: var(--green-500);
}
.supplier-name { font-weight: 700; }
.supplier-count {
  color: var(--green-700);
  background: var(--green-50);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.supplier-logo-box { height: 44px; width: 140px; max-width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.supplier-logo { height: 78%; width: 78%; object-fit: contain; }

/* ---------- Table catalogue ---------- */
.result-count { color: var(--gray-600); margin-bottom: 12px; font-size: 14px; }
.b2b-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.b2b-table th {
  background: var(--green-900);
  color: white;
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.b2b-table th.num, .b2b-table td.num { text-align: center; font-variant-numeric: tabular-nums; }
/* Désignation produit tronquée avec "..." + info-bulle native (title=) au survol pour le texte complet —
   sans ça une désignation longue pousse toute la largeur du tableau et casse la mise en page mobile
   (repéré par Théo 2026-09-15). */
.desig-cell { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .desig-cell { max-width: 160px; } }
/* Panier : colonnes resserrées pour que le bouton supprimer tienne sans scroll horizontal
   (voir project_client_portal_v1, 2026-09-16 — sticky seul ne suffisait pas). */
.cart-items .b2b-table td, .cart-items .b2b-table th { padding: 10px 8px; }
.cart-items .desig-cell { max-width: 150px; }
.b2b-table td { padding: 12px 14px; border-bottom: 1px solid var(--gray-200); font-size: 14px; }
.b2b-table tbody tr:hover { background: var(--green-50); }
.b2b-table tbody tr:last-child td { border-bottom: none; }

.badge-delai {
  background: var(--green-100);
  color: var(--green-800);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.code-cell { text-transform: uppercase; font-family: "SF Mono", Menlo, monospace; font-weight: 700; font-size: 13px; }
.wd-line-unanswered { opacity: 0.5; }
.wd-badge-unanswered { display: inline-block; padding: 3px 8px; border-radius: 5px; background: var(--gray-100); color: var(--gray-500); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }

.btn-modal, .btn-order, .btn-order-active {
  padding: 7px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: inherit; /* les <button> n'héritent pas de la police du body par défaut (contrairement aux
  <a>) — sans ça un <button class="btn-modal"> et un <a class="btn-modal"> côte à côte n'ont pas la même
  police (repéré par Théo 2026-09-15, "Voir réponse" vs "Voir ma commande"). */
  appearance: none; -webkit-appearance: none; /* un <button> garde le rendu natif du navigateur
  (appearance:auto) même avec le bon font-family/weight/size déclarés — ça change quand même légèrement
  le rendu du texte (anti-aliasing/moteur de rendu du widget natif) vs un <a>, d'où l'impression de
  police différente qui persistait malgré des styles identiques. */
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.btn-modal { background: var(--green-600); color: white; }
.btn-modal:hover { background: var(--green-700); }
/* "Voir réponse" = action à faire (variante ambre, même langage que les badges "en attente" ailleurs
   dans l'app) — distinct de "Voir ma commande" (vert = déjà réglé). Demandé par Théo 2026-09-15. */
.btn-modal.btn-modal-amber { background: var(--amber-600); }
.btn-modal.btn-modal-amber:hover { background: #b45309; }
.btn-order { background: var(--gray-200); color: #94a3b8; cursor: not-allowed; }
.btn-order-active { background: var(--green-600); color: white; text-decoration: none; display: inline-block; }
.btn-order-active:hover { background: var(--green-700); }
.wd-confirm-danger.btn-order-active { background: var(--red-600); }
.wd-confirm-danger.btn-order-active:hover { background: #b91c1c; }

/* ---------- Formulaires (login / register) ---------- */
.auth-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
}
.auth-card {
  width: 100%;
  max-width: 420px;
}
.auth-card h1 {
  text-align: center;
  margin-bottom: 4px;
}
.auth-subtitle {
  text-align: center;
  color: var(--gray-600);
  font-size: 14px;
  margin-bottom: 24px;
}
.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: var(--gray-600);
}
.auth-switch a { color: var(--green-700); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.form-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  background: white;
  padding: 32px;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(6, 78, 59, 0.08);
  border: 1px solid var(--gray-200);
}
.form-box label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--gray-600); }
.form-box input, .form-box select, .form-box textarea {
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: white;
  width: 100%;
  box-sizing: border-box;
}
.form-box input:focus, .form-box select:focus, .form-box textarea:focus { outline: 2px solid var(--green-500); border-color: transparent; }
.form-box button {
  padding: 11px;
  background: var(--green-600);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.form-box button:hover { background: var(--green-700); }
.error { color: #dc2626; font-size: 14px; }

.bank-box {
  background: white;
  padding: 24px;
  border-radius: 12px;
  max-width: 500px;
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--green-500);
}
/* Page de confirmation de commande (panier) — refonte visuelle 2026-09-25, voir
   project_client_portal_v1. */
.order-confirm-wrap { max-width: 640px; margin: 40px auto; }
.order-confirm-icon {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--green-100); color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
}
.order-confirm-icon svg { width: 34px; height: 34px; }

/* ---------- Modal ---------- */
.wd-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(6, 78, 59, 0.35);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
/* Côté admin, la sidebar fixe (248px) décale visuellement le centre de l'écran : on centre la modale
   sur la zone de contenu réellement visible plutôt que sur la fenêtre entière (demandé par Antoine
   2026-09-16). Sous 900px la sidebar repasse en barre horizontale (voir .admin-sidebar), donc on
   annule le décalage à ce breakpoint pour rester bien centré sur mobile/tablette aussi. */
body:has(.admin-shell) .wd-modal-overlay { left: 248px; }
@media (max-width: 900px) {
  body:has(.admin-shell) .wd-modal-overlay { left: 0; }
}
.wd-modal-box {
  background: white;
  padding: 24px;
  border-radius: 14px;
  min-width: 520px;
  /* Sur mobile, une table large en white-space:nowrap peut forcer la boîte au-delà de la largeur de
     l'écran (bug d'affichage constaté par Théo 2026-09-15, WebKit + backdrop-filter + overflow) — on
     borne la largeur/hauteur au viewport et on laisse le tableau scroller horizontalement à l'intérieur. */
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.wd-help-box { min-width: 0; width: 360px; text-align: center; }
.wd-help-contact {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px;
  border: 1px solid var(--gray-200); border-radius: 8px; margin-bottom: 10px; color: var(--ink);
  text-decoration: none; font-weight: 600;
}
.wd-help-contact:last-of-type { margin-bottom: 0; }
.wd-help-icon { display: flex; flex-shrink: 0; }
.wd-help-icon svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .wd-modal-box { min-width: 0; width: calc(100vw - 32px); }
  .wd-modal-box table { display: block; overflow-x: auto; white-space: nowrap; }
  #wd-quote-modal-footer { flex-wrap: wrap; }
}
.wd-modal-box h3 { margin-top: 0; color: var(--green-900); }
.wd-modal-box table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.wd-modal-box th {
  padding: 12px 16px; text-align: left; font-size: 12px; white-space: nowrap;
  text-transform: uppercase; color: var(--gray-600); border-bottom: 2px solid var(--gray-200);
}
/* Le tableau "Détail" (#wd-quote-modal-table) utilise .b2b-table qui met un fond vert foncé sur les <th> —
   sans ça le texte restait gris clair (gray-600) sur fond vert foncé, quasi illisible (repéré par
   Théo 2026-09-15). */
.wd-modal-box .b2b-table th { color: white; border-bottom: none; }
.wd-modal-box td { padding: 12px 16px; border-bottom: 1px solid var(--gray-200); font-size: 13px; white-space: nowrap; }
.wd-modal-box button:not(.btn-order-active):not(.wd-qty-btn) {
  padding: 9px 16px; border: 1px solid var(--gray-200); background: white;
  border-radius: 6px; cursor: pointer; font-weight: 600;
}
.wd-modal-box button:not(.btn-order-active):not(.wd-qty-btn):hover { background: var(--bg); }
.wd-modal-box .btn-order-active { padding: 9px 18px; font-size: 13px; white-space: nowrap; }
.wd-modal-box a { color: var(--green-700); font-weight: 600; text-decoration: none; }
.wd-modal-box a:hover { text-decoration: underline; }

/* ---------- Stepper quantité + bouton panier (modal) ---------- */
.wd-qty-form { display: flex; align-items: center; gap: 10px; }
.wd-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}
.cart-remove-btn {
  background: none; border: none; color: #dc2626; cursor: pointer; padding: 4px; display: flex;
  align-items: center; justify-content: center; border-radius: 6px;
}
.cart-remove-btn svg { width: 17px; height: 17px; }
.cart-remove-btn:hover { background: #fee2e2; }
/* Colonne suppression toujours visible même si le tableau déborde et qu'il faut scroller
   horizontalement (voir project_client_portal_v1, 2026-09-16) — sinon le bouton existe mais personne
   ne le voit/le trouve. */
.cart-table-remove-col {
  position: sticky; right: 0; background: white; box-shadow: -6px 0 6px -6px rgba(0,0,0,.12);
}
.cart-table-remove-head { position: sticky; right: 0; background: var(--green-900); }
.wd-qty-btn {
  width: 30px;
  height: 34px;
  border: none;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.wd-qty-btn:hover { background: var(--green-100); color: var(--green-800); }
.wd-qty-input {
  width: 42px;
  height: 34px;
  border: none;
  border-left: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  -moz-appearance: textfield;
}
.wd-qty-input::-webkit-outer-spin-button,
.wd-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Panier : layout e-commerce (items + récapitulatif) ---------- */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
}
.cart-items { min-width: 0; }
.cart-quickadd {
  margin-top: 16px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 12px 16px;
}
.cart-quickadd summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--green-700);
  font-size: 14px;
  list-style: none;
}
.cart-quickadd summary::-webkit-details-marker { display: none; }
.cart-quickadd-form { display: flex; gap: 8px; margin-top: 12px; }
.cart-quickadd-form input {
  padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 6px; font-size: 13px;
}

.cart-summary {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 24px;
  position: sticky;
  top: 20px;
}
/* Rythme vertical homogène demandé par Théo 2026-09-24 : un seul gap de 16px entre chaque bloc du
   récapitulatif (titre / franco / rows / total / champs / checkbox / bouton / mention sécurisée / CGV),
   au lieu des valeurs disparates d'avant (24/20/16/4/14/8px). */
.cart-summary h3 { margin: 0 0 16px; font-size: 16px; color: var(--green-900); }
.cart-summary-row {
  display: flex; justify-content: space-between; font-size: 14px; color: var(--gray-600);
  padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1px solid var(--gray-200);
}
.cart-summary-total {
  display: flex; justify-content: space-between; font-size: 18px; font-weight: 700;
  color: var(--ink); margin-bottom: 16px;
}
.cart-summary-label {
  display: block; font-size: 13px; color: var(--gray-600); font-weight: 500; margin-bottom: 16px;
}
.cart-summary-label input, .cart-summary-label textarea {
  width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid var(--gray-200);
  border-radius: 6px; font-size: 13px; box-sizing: border-box; font-family: inherit; resize: vertical;
}
.cart-checkout-btn {
  width: 100%; padding: 14px; background: var(--green-600); color: white; border: none;
  border-radius: 8px; font-weight: 700; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.15s, transform 0.1s;
}
.cart-checkout-btn:hover { background: var(--green-700); }
.cart-checkout-btn:active { transform: scale(0.98); }
.cart-summary-secure {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--gray-600); margin-top: 16px; line-height: 1.5;
}
.cart-summary-secure svg { flex-shrink: 0; margin-top: 1px; color: var(--green-600); }

/* ---------- Cotations : grille "mode Excel" ---------- */
.quote-form-box { max-width: 1150px !important; }
.quote-grid {
  width: 100%; border-collapse: collapse; background: white;
  border: 1px solid var(--gray-200); border-radius: 8px; overflow: visible; margin-bottom: 4px;
  table-layout: fixed;
}
.quote-grid th {
  background: var(--green-900); text-align: left; padding: 10px 24px; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.03em; color: white; font-weight: 500; white-space: nowrap;
}
.quote-grid thead tr th:first-child { border-top-left-radius: 7px; }
.quote-grid thead tr th:last-child { border-top-right-radius: 7px; }
.quote-grid td { padding: 10px; border: 1px solid var(--gray-200); }
.quote-grid input, .quote-grid select {
  width: 100%; border: none; padding: 7px 14px; font-size: 14px; box-sizing: border-box; background: transparent;
  font-family: inherit; color: var(--ink);
}
.quote-grid input:focus, .quote-grid select:focus { outline: 2px solid var(--green-500); background: white; }
.quote-grid input.field-invalid { box-shadow: inset 0 0 0 2px #dc2626; background: #fef2f2; }
.field-invalid-bubble {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  background: white; color: var(--ink); font-size: 13px; font-weight: 400; white-space: nowrap;
  padding: 7px 12px; border-radius: 4px; z-index: 20; box-shadow: 0 1px 6px rgba(0,0,0,0.3); border: 1px solid var(--gray-200);
  opacity: 1; transition: opacity 0.5s ease;
}
.field-invalid-bubble.field-invalid-bubble-fadeout { opacity: 0; }
.field-invalid-bubble::before {
  content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: white;
  filter: drop-shadow(0 -1px 0 var(--gray-200));
}
/* La flèche reste toujours centrée sous le champ ; seul le texte (la boîte) se décale pour
   éviter le chevauchement quand 2 bulles voisines s'affichent en même temps (ex: Quantité + Prix cible). */
.field-invalid-bubble-left { transform: translateX(calc(-50% - 45px)); }
.field-invalid-bubble-left::before { transform: translateX(calc(-50% + 45px)); }
.field-invalid-bubble-right { transform: translateX(calc(-50% + 70px)); }
.field-invalid-bubble-right::before { transform: translateX(calc(-50% - 70px)); }
.field-invalid-bubble-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 15px; height: 15px; border-radius: 50%; background: #f0ad4e; color: white;
  font-size: 11px; font-weight: 700; font-style: normal;
}
.quote-grid input[type=number]::-webkit-inner-spin-button,
.quote-grid input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quote-grid input[type=number] { -moz-appearance: textfield; }
.quote-grid .quote-ref-title { color: var(--gray-600); font-style: italic; }
.quote-grid .quote-current-price-display { color: var(--green-800); font-weight: 600; background: var(--green-50); }
.quote-grid .quote-remove-row { padding: 8px 10px; font-size: 13px; }
.quote-ref-suggestions {
  display: none; position: absolute; top: 100%; left: 4px; right: 4px; z-index: 20;
  background: white; border: 1px solid var(--gray-200); border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12); max-height: 220px; overflow-y: auto;
}
.quote-suggestion-item { padding: 8px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--gray-200); }
.quote-suggestion-item:last-child { border-bottom: none; }
.quote-suggestion-item:hover { background: var(--green-50); }

/* ---------- Franco de port (panier) ---------- */
.cart-franco {
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--green-800);
}
.cart-franco p { margin: 8px 0 0; }
.cart-franco-bar { height: 6px; background: var(--green-100); border-radius: 3px; overflow: hidden; }
.cart-franco-fill { height: 100%; background: var(--green-500); border-radius: 3px; transition: width 0.3s; }
.cart-franco-done {
  background: var(--green-600); color: white; text-align: center; font-weight: 600;
  border: none;
}
.cart-franco-learn-more { margin: 0 0 16px; text-align: right; }
.cart-franco-learn-more a { font-size: 12px; color: var(--gray-600); text-decoration: underline; }
.cart-franco-learn-more a:hover { color: var(--green-700); }

/* ---------- Export Excel (panier) ---------- */
.btn-cart-export {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  background: white; border: 1px solid var(--gray-200); border-radius: 8px;
  color: var(--gray-700); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.btn-cart-export:hover { background: var(--green-50); border-color: var(--green-200); }

/* ---------- Délai modifiable (panier) ---------- */
.badge-delai-clickable { cursor: pointer; user-select: none; }
.badge-delai-clickable:hover { background: var(--green-100); }
.badge-delai-clickable small { opacity: 0.6; margin-left: 2px; }
.delai-options-box {
  position: fixed; z-index: 1000;
  background: white; border: 1px solid var(--gray-200); border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.14); min-width: 180px; overflow: hidden;
}
.delai-option-row { display: block; }
.delai-option-row button {
  width: 100%; display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: none; background: white; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--gray-200); text-align: left;
}
.delai-option-row:last-child button { border-bottom: none; }
.delai-option-row button:hover:not(:disabled) { background: var(--green-50); }
.delai-option-row button:disabled { background: var(--green-50); cursor: default; color: var(--green-800); }
.delai-option-current button strong { color: var(--green-700); }

/* ==================== Admin design system (2026-08-31) ====================
   Référence : maquette envoyée par Antoine. Ce bloc sert de base pour toutes
   les futures pages admin (Clients/Fournisseurs/Marques/Utilisateurs/...). */

body:has(.admin-shell) { background: var(--bg); }

/* ---------- Sidebar ---------- */
.admin-shell { display: flex; align-items: stretch; min-height: 100vh; }
.admin-sidebar {
  width: 248px; flex-shrink: 0; background: white; border-right: 1px solid var(--gray-200);
  display: flex; flex-direction: column; padding: 16px 14px 20px;
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
}
.admin-sidebar-logo {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--green-800), var(--green-600)); border-radius: 12px;
}
.admin-sidebar-logo img { height: 24px; filter: brightness(0) invert(1); }
.admin-sidebar-badge {
  margin: 0 4px 16px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--green-700); background: var(--green-50); padding: 5px 10px; border-radius: 20px; display: inline-block;
}
.admin-nav-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400);
  padding: 16px 10px 6px; font-weight: 800;
}
.admin-nav-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; color: var(--gray-600); text-decoration: none;
  font-size: 13.5px; font-weight: 600; border-radius: 9px; margin-bottom: 1px;
  transition: background .12s, color .12s;
}
.admin-nav-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .7; transition: opacity .12s; }
.admin-nav-link:hover { background: var(--gray-100); color: var(--ink); }
.admin-nav-link:hover svg { opacity: 1; }
.admin-nav-link.active { background: var(--green-50); color: var(--green-700); font-weight: 700; }
.admin-nav-link.active svg { opacity: 1; color: var(--green-600); }

/* ---------- Zone principale + topbar ---------- */
.admin-main { flex: 1; min-width: 0; }
.admin-topbar {
  display: flex; align-items: center; gap: 16px; padding: 13px 28px; background: white;
  border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 5;
}
.admin-topbar-search { position: relative; flex: 1; max-width: 640px; }
.admin-topbar-search .admin-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--gray-400); pointer-events: none; display: flex;
}
.admin-topbar-search input {
  width: 100%; padding: 10px 46px 10px 38px; border: 1px solid var(--gray-200); border-radius: 10px;
  font-size: 13.5px; background: var(--gray-100); font-family: inherit; transition: border-color .15s, background .15s;
}
.admin-topbar-search input:focus { outline: none; border-color: var(--green-500); background: white; box-shadow: 0 0 0 3px var(--green-50); }
.admin-topbar-search .kbd-hint {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 700; color: var(--gray-400); background: white;
  border: 1px solid var(--gray-200); border-radius: 5px; padding: 2px 6px; pointer-events: none;
}
.admin-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.admin-bell { position: relative; color: var(--gray-600); display: flex; cursor: pointer; list-style: none; }
.admin-bell::-webkit-details-marker { display: none; }
.admin-bell svg { width: 19px; height: 19px; }
.admin-bell-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; border: 1.5px solid white; }
.notif-bell { position: relative; }
.notif-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); width: 320px; max-height: 420px; overflow-y: auto;
  background: white; border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: var(--card-shadow);
  z-index: 50; padding: 6px;
}
.notif-dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px; font-size: 12px; font-weight: 700; color: var(--ink); }
.notif-mark-all { background: none; border: none; color: var(--green-700); font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; }
.notif-item {
  width: 100%; text-align: left; background: none; border: none; border-radius: 9px; padding: 9px 10px;
  cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 2px;
}
.notif-item:hover { background: var(--gray-100); }
.notif-item.unread { background: var(--green-50); }
.notif-item.unread .notif-item-msg { font-weight: 700; }
.notif-item-msg { font-size: 12.5px; color: var(--ink); line-height: 1.4; }
.notif-item-date { font-size: 10.5px; color: var(--gray-400); }
.notif-empty { font-size: 12px; color: var(--gray-400); padding: 14px 10px; text-align: center; }
.admin-topbar-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.admin-topbar-user-meta { line-height: 1.25; }
.admin-topbar-user-name { font-weight: 700; color: var(--ink); display: block; }
.admin-topbar-user-role { font-size: 11.5px; color: var(--gray-600); }
.admin-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--green-600), var(--green-800)); color: white;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0;
}
/* Largeur fluide (pas de paliers) : grandit en continu avec l'écran, jamais en dessous de 1360px
   (petits/moyens écrans inchangés), plafonne à 1960px sur très grand écran pour garder des lignes
   lisibles. Remplace l'ancien système par paliers (1500/1800/2100px) qui laissait encore trop de vide
   sur les résolutions intermédiaires (ex 1920px) — voir project_client_portal_v1 2026-09-24. */
.admin-content { padding: 18px 24px; max-width: clamp(1360px, 92vw, 1960px); margin: 0 auto; }

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-card {
  background: white; border: 1px solid var(--gray-200); border-radius: 14px; padding: 13px 14px;
  box-shadow: var(--card-shadow); transition: box-shadow .15s, transform .15s;
}
.kpi-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-1px); }
/* Aligne les liens "Voir →" en bas de chaque case, quel que soit le nombre de lignes au-dessus (ex:
   "Factures à payer" a une ligne "dont X en retard" en plus qui décalait son "Voir →" plus bas que les
   autres cases) — scopé au dashboard client uniquement (.kpi-grid-dash), demandé par Théo 2026-09-24. */
.kpi-grid-dash .kpi-card { display: flex; flex-direction: column; }
.kpi-grid-dash .kpi-card .kpi-sub.danger:last-child { margin-top: auto; padding-top: 5px; }
.kpi-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 9px; }
.kpi-icon-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon-circle svg { width: 15px; height: 15px; }
.kpi-icon-circle.c-blue { background: var(--blue-100); color: var(--blue-600); }
.kpi-icon-circle.c-green { background: var(--green-100); color: var(--green-700); }
.kpi-icon-circle.c-purple { background: var(--purple-100); color: var(--purple-600); }
.kpi-icon-circle.c-amber { background: var(--amber-100); color: var(--amber-600); }
.kpi-icon-circle.c-red { background: var(--red-100); color: var(--red-600); }
.kpi-icon-circle.c-gray { background: var(--gray-100); color: var(--gray-600); }
.kpi-icon-circle.c-yellow { background: #fef9c3; color: #854d0e; }
.kpi-icon-circle.c-orange { background: #fed7aa; color: #c2410c; }
.kpi-sparkline-wrap { width: 52px; height: 26px; flex-shrink: 0; overflow: hidden; position: relative; }
.kpi-sparkline { width: 52px !important; height: 26px !important; display: block; }
.kpi-label { font-size: 13px; color: var(--gray-600); font-weight: 600; margin-bottom: 4px; line-height: 1.25; }
.kpi-value { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.1; letter-spacing: -.01em; }
.kpi-sub { font-size: 11.5px; color: var(--gray-600); font-weight: 600; margin-top: 5px; }
.kpi-sub.danger { color: var(--red-600); }
.kpi-trend { font-weight: 700; }
.kpi-trend.up { color: var(--green-600); }
.kpi-trend.down { color: var(--red-600); }
.kpi-card.alert .kpi-icon-circle { background: var(--red-100); color: var(--red-600); }
.kpi-card.overdue { border-color: #fca5a5; background: #fff5f5; box-shadow: 0 0 0 1px #fca5a5 inset; }

/* ---------- Bannière "facture en retard" (tableau de bord client, voir project_client_portal_v1) ---------- */
.overdue-banner {
  display: flex; align-items: center; gap: 14px; background: #fef2f2; border: 1px solid #fca5a5;
  border-radius: 12px; padding: 14px 18px; margin-bottom: 20px;
}
.overdue-banner-icon {
  width: 38px; height: 38px; border-radius: 50%; background: #fee2e2; color: #991b1b;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.overdue-banner-icon svg { width: 18px; height: 18px; }
.overdue-banner-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.overdue-banner-text strong { color: #991b1b; font-size: 15px; }
.overdue-banner-text span { color: #7f1d1d; font-size: 13px; }
.overdue-banner-btn {
  background: #991b1b; color: white; border-radius: 8px; padding: 8px 16px; font-size: 13px;
  font-weight: 700; text-decoration: none; flex-shrink: 0; white-space: nowrap;
}
.overdue-banner-btn:hover { background: #7f1d1d; }
@media (max-width: 640px) {
  .overdue-banner { flex-wrap: wrap; }
  .overdue-banner-btn { margin-left: 52px; }
}

/* ---------- Panneaux ---------- */
.dash-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; }
.dash-grid-even { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; }
/* Dashboard client, panneaux Cotations/Commandes (2026-09-24) : 40/60 au lieu de 50/50 (Commandes a plus
   de colonnes). Scopé en min-width pour ne jamais entrer en conflit avec le stack mobile 1-colonne plus
   bas (@media max-width:900px) — un style inline aurait gagné à toutes les tailles d'écran et cassé
   l'empilement mobile existant (bug trouvé par Théo, "sur mobile non"). */
@media (min-width: 901px) { .dash-grid-cotcmd { grid-template-columns: 2fr 3fr; } }
/* Sur mobile, même en 1 colonne pleine largeur, la table "Mes dernières commandes" (6 colonnes) déborde
   encore — masque les 2 colonnes les moins critiques (réf. client, Montant HT) pour que Montant TTC/
   Statut/Date restent visibles sans swipe horizontal. */
@media (max-width: 640px) { .dash-hide-narrow { display: none; } }
.dash-grid-3 { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr; gap: 14px; margin-bottom: 14px; align-items: stretch; }
.dash-grid-wide3 { display: grid; grid-template-columns: 1.5fr 1.1fr 1.3fr; gap: 14px; margin-bottom: 14px; align-items: stretch; }
.dash-grid-3-equal { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; }
.page-subtitle { color: var(--gray-600); font-size: 13px; margin: -8px 0 0; }
.filter-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--gray-200);
  border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--ink); background: white; cursor: pointer;
  box-shadow: var(--card-shadow);
}
.filter-btn svg { width: 14px; height: 14px; }
@media (max-width: 1100px) {
  .dash-grid-wide3, .dash-grid-3-equal { grid-template-columns: 1fr; }
}
.dash-panel {
  background: white; border: 1px solid var(--gray-200); border-radius: 14px; padding: 15px 16px;
  box-shadow: var(--card-shadow); min-width: 0; overflow-x: auto;
}
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.dash-panel-head h3 { margin: 0; font-size: 13px; color: var(--ink); font-weight: 700; line-height: 1; }
.dash-panel h3 { margin: 0 0 10px; font-size: 13px; color: var(--ink); font-weight: 700; }
.dash-panel-link { font-size: 11.5px; color: var(--green-700); text-decoration: none; font-weight: 600; white-space: nowrap; line-height: 1; }
.dash-panel-link:hover { text-decoration: underline; }
.chip-select {
  font-size: 11px; font-weight: 600; color: var(--gray-600); background: var(--gray-100);
  border: none; border-radius: 7px; padding: 4px 9px; font-family: inherit; cursor: pointer;
}
.chart-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dash-chart-box { height: 190px; position: relative; }
/* Pas de width/height forcé en CSS ici : Chart.js gère lui-même la taille du canvas via
   responsive:true + maintainAspectRatio:false (voir admin_dashboard.html). Forcer la taille en CSS
   désynchronise le buffer interne du canvas de sa taille affichée et casse la détection de survol
   (bug trouvé le 2026-08-31 : le tooltip ne suivait pas la souris correctement). */

/* ---------- Alertes (liste verticale compacte, colonne étroite à droite des graphiques) ---------- */
.alerts-compact-grid { display: flex; flex-direction: column; gap: 6px; }
.alert-compact-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border: 1px solid var(--gray-200);
  border-radius: 10px; text-decoration: none; color: var(--ink); transition: border-color .15s, background .15s;
}
.alert-compact-item:hover { border-color: var(--gray-400); background: var(--gray-100); }
.alert-compact-item.is-zero { border-color: transparent; opacity: .65; }
.alert-compact-item.is-zero:hover { opacity: 1; border-color: var(--gray-200); }
.alert-compact-item.is-zero .alert-compact-value { color: var(--gray-400); font-weight: 700; }
.alert-compact-item.is-zero .alert-compact-text { color: var(--gray-600); font-weight: 500; }
.alert-compact-icon {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.alert-compact-icon svg { width: 13px; height: 13px; }
.alert-compact-icon.sev-ok { background: var(--green-100); color: var(--green-700); }
.alert-compact-icon.sev-warn { background: var(--amber-100); color: var(--amber-600); }
.alert-compact-icon.sev-danger { background: var(--red-100); color: var(--red-600); }
.alert-compact-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.alert-compact-value { font-size: 14px; font-weight: 800; flex-shrink: 0; }
.alert-compact-text { font-size: 11.5px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-compact-text small { font-weight: 400; color: var(--gray-600); font-size: 10.5px; margin-left: 4px; }
.alert-compact-chevron { color: var(--gray-400); flex-shrink: 0; }
.alert-compact-chevron svg { width: 13px; height: 13px; }

/* ---------- Tableaux ---------- */
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th { text-align: left; padding: 6px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-400); font-weight: 700; border-bottom: 1px solid var(--gray-200); }
.dash-table td { padding: 7px 8px; border-bottom: 1px solid var(--gray-100); font-size: 12.5px; vertical-align: middle; white-space: nowrap; height: 47px; box-sizing: border-box; }
.dash-table tr:last-child td { border-bottom: none; }
.dash-table tr:hover td { background: var(--gray-100); }
.dash-table a { color: var(--ink); text-decoration: none; font-weight: 700; }
.dash-table a:hover { color: var(--green-700); }
.dash-table .num { text-align: center; font-variant-numeric: tabular-nums; }
.dash-table th.num { text-align: center; }
.text-positive { color: var(--green-600); font-weight: 700; }
.text-negative { color: var(--red-600); font-weight: 700; }
.badge-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.badge-status.ok { background: var(--green-100); color: var(--green-800); }
.badge-status.pending { background: #fef9c3; color: #854d0e; }
.badge-status.processing { background: #e5e7eb; color: #4b5563; }
.badge-status.none { background: var(--gray-100); color: var(--gray-600); }
.badge-status.danger { background: #fee2e2; color: #991b1b; }
.badge-status.info { background: var(--blue-100); color: var(--blue-600); }
.badge-status.orange { background: #fed7aa; color: #c2410c; }
.badge-status.action { background: #ffedd5; color: #9a3412; }
.badge-status.quoted-wait { background: #ffedd5; color: #9a3412; }
.badge-status.expired { background: var(--blue-100); color: var(--blue-600); }

/* ---------- Segments CRM clients ---------- */
.badge-status.vip { background: #ede9fe; color: #6d28d9; }
.badge-status.dev { background: var(--blue-100); color: var(--blue-600); }
.badge-status.warn { background: var(--amber-100); color: var(--amber-600); }
.badge-status.new { background: var(--amber-100); color: var(--amber-600); }

/* ---------- Onglets (Clients: Base clients / Demandes d'ouverture) ---------- */
.page-tabs { display: flex; align-items: flex-end; min-height: 38.5px; gap: 4px; margin: 14px 0 18px; border-bottom: 1px solid var(--gray-200); }
.page-tab {
  padding: 9px 4px; margin-right: 22px; font-size: 13.5px; font-weight: 700; color: var(--gray-600);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; min-height: 38.5px; box-sizing: border-box;
  /* min-height fixe + centrage vertical : sans ça, un tab avec un badge .tab-count (18px, plus haut
     qu'une ligne de texte) devient plus HAUT que ses voisins, et align-items:flex-end sur .page-tabs
     n'aligne que le BAS des tabs — le texte du tab avec badge se retrouve alors 2-3px plus HAUT que les
     autres (bug trouvé par Antoine 2026-09-17, persistant depuis le "fix" précédent qui n'égalisait que
     la ligne globale, pas chaque tab individuellement). */
}
.page-tab.active { color: var(--green-700); border-bottom-color: var(--green-600); }
.page-tab .tab-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 6px; border-radius: 20px; background: var(--red-100); color: var(--red-600);
  font-size: 10.5px; font-weight: 800;
}

/* ---------- Barre de filtres ---------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filter-bar input[type="text"], .filter-bar select {
  padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 9px; font-size: 13px;
  background: white; font-family: inherit; color: var(--ink);
}
.filter-bar input[type="text"] { flex: 1; min-width: 200px; }
.filter-bar button { flex-shrink: 0; }

/* ---------- Petite liste "demandes récentes" (sidebar) ---------- */
.pending-side-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 0; border-bottom: 1px solid var(--gray-100);
}
.pending-side-item:last-child { border-bottom: none; }
.pending-side-info { min-width: 0; }
.pending-side-name { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pending-side-meta { font-size: 11px; color: var(--gray-600); }

/* ---------- Panneau détail demande d'ouverture de compte ---------- */
.detail-kv { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.detail-kv td { padding: 5px 0; vertical-align: top; border-bottom: 1px solid var(--gray-100); }
.detail-kv td:first-child { color: var(--gray-600); font-weight: 600; width: 38%; white-space: nowrap; }
.detail-kv tr:last-child td { border-bottom: none; }
.verif-list { display: flex; flex-direction: column; gap: 6px; }
.verif-item { font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.verif-item.ok { background: var(--green-50); color: var(--green-800); }
.verif-item.no { background: var(--gray-100); color: var(--gray-600); }
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--gray-100); color: var(--gray-600); font-size: 11px; font-weight: 800; margin-right: 8px;
}
.mini-bar-track { height: 5px; background: var(--gray-100); border-radius: 3px; margin-top: 5px; width: 100px; overflow: hidden; }
.mini-bar-fill { height: 100%; border-radius: 3px; }

/* ---------- Tableau "Principaux fabricants" (logo + nom | CA | % | barre) ---------- */
.brand-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.brand-table th { text-align: center; padding: 6px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-400); font-weight: 700; border-bottom: 1px solid var(--gray-200); }
.brand-table th:first-child { text-align: left; }
.brand-table td { padding: 7px 8px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; white-space: nowrap; }
.brand-table tr:last-child td { border-bottom: none; }
.brand-table .brand-name { font-weight: 500; color: var(--ink); white-space: nowrap; }
.brand-table .num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.brand-table td.num { color: var(--gray-600); font-weight: 600; }
.brand-table .brand-amount { color: var(--ink); font-weight: 600; }
.brand-dot {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 6px; margin-right: 8px; vertical-align: middle; color: white; font-size: 10px; font-weight: 800;
}
.brand-logo { width: 20px; height: 20px; object-fit: contain; margin-right: 8px; vertical-align: middle; border-radius: 4px; background: white; }

/* ---------- Validation d'ouverture de compte ---------- */
.pending-account-list { display: flex; flex-direction: column; gap: 8px; }
.pending-account-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border: 1px solid var(--gray-200); border-radius: 10px;
}
.pending-account-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pending-account-name { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pending-account-meta { font-size: 11px; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pending-account-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pill-btn {
  border: none; border-radius: 20px; padding: 6px 12px; font-size: 11.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.pill-btn-approve { background: var(--green-100); color: var(--green-800); }
.pill-btn-approve:hover { background: var(--green-600); color: white; }
.pill-btn-reject { background: var(--red-100); color: var(--red-600); }
.pill-btn-reject:hover { background: var(--red-600); color: white; }
.pill-btn-icon svg { width: 14px; height: 14px; }
.pill-btn-icon:hover { background: var(--gray-200); }

/* ---------- Documents client (fiche demande) ---------- */
.doc-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border: 1px solid var(--gray-200); border-radius: 9px; text-decoration: none;
  color: var(--ink); transition: border-color .12s, background .12s;
}
.doc-row:hover { border-color: var(--green-600); background: var(--green-50); }
.doc-row-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--gray-600); }
.doc-row-icon svg { width: 15px; height: 15px; }
.doc-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.doc-row-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.doc-row-file { font-size: 11px; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-row-dl { flex-shrink: 0; color: var(--gray-400); }
.doc-row-dl svg { width: 14px; height: 14px; }
.doc-row:hover .doc-row-dl { color: var(--green-600); }

/* ---------- Base clients : sidebar empilée, cartes d'aide, filtres avancés, pagination, menu ligne ---------- */
.dash-sidebar-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-sidebar-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .dash-sidebar-row { grid-template-columns: 1fr 1fr; } }
.info-card { display: flex; flex-direction: column; gap: 6px; }
.info-card-icon {
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.info-card-icon svg { width: 16px; height: 16px; }
.icon-inline-sm, .icon-inline-sm svg { width: 13px; height: 13px; flex-shrink: 0; }
.icon-inline-md, .icon-inline-md svg { width: 16px; height: 16px; flex-shrink: 0; }
.chip { display: inline-block; padding: 2px 9px; background: var(--gray-100); color: var(--gray-700); border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.supplier-score { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 3px 8px; border-radius: 999px; font-weight: 800; font-size: 12.5px; }
.supplier-score.s-good { background: var(--green-100); color: var(--green-700); }
.supplier-score.s-mid { background: var(--amber-100); color: var(--amber-600); }
.supplier-score.s-bad { background: var(--red-100); color: var(--red-600); }
.score-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--gray-100); font-size: 12.5px; }
.score-breakdown-row:last-child { border-bottom: none; }
.brand-letter-badge { width: 34px; height: 34px; border-radius: 50%; background: var(--green-100); color: var(--green-700); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.brand-card { display: flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid var(--gray-200); border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 13px; background: white; transition: box-shadow .15s, border-color .15s, transform .15s; }
.brand-card:hover { border-color: var(--green-500); box-shadow: 0 3px 10px rgba(6, 78, 59, .08); transform: translateY(-1px); }
.brand-card .chip { background: var(--green-50); color: var(--green-700); }
.info-card-icon.c-green { background: var(--green-100); color: var(--green-700); }
.info-card-icon.c-blue { background: var(--blue-100); color: var(--blue-600); }
.info-card-icon.c-red { background: var(--red-100); color: var(--red-600); }
.info-card h4 { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.info-card p { margin: 0; font-size: 11.5px; color: var(--gray-600); line-height: 1.45; }
.info-card-more summary { cursor: pointer; font-size: 11.5px; color: var(--green-700); font-weight: 600; list-style: none; }
.info-card-more summary::-webkit-details-marker { display: none; }
.info-card-rules { margin: 8px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--gray-600); line-height: 1.6; }

.adv-filters { display: none; border-top: 1px solid var(--gray-100); margin-top: 4px; }
.adv-filters.open { display: block; }

.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gray-100); flex-wrap: wrap; }
.pagination-pages { display: flex; align-items: center; gap: 4px; }
.pagination-pages a, .pagination-pages span { font-size: 12px; color: var(--gray-600); text-decoration: none; padding: 4px 9px; border-radius: 7px; }
.pagination-pages a:hover { background: var(--gray-100); }
.pagination-pages a.active { background: var(--green-700); color: white; font-weight: 700; }
.pagination-perpage select { font-size: 12px; padding: 6px 8px; border: 1px solid var(--gray-200); border-radius: 7px; font-family: inherit; }

.row-menu { position: relative; }
.row-menu summary { list-style: none; cursor: pointer; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu-panel {
  position: absolute; right: 0; top: calc(100% + 4px); background: white; border: 1px solid var(--gray-200);
  border-radius: 10px; box-shadow: var(--card-shadow); padding: 6px; z-index: 5; min-width: 190px;
  display: flex; flex-direction: column; gap: 4px; white-space: normal;
  /* reset : hérite sinon "white-space: nowrap" du <td class="dash-table"> ancêtre, ce qui empêchait
     tout texte long (ex: .action-hint) de retourner à la ligne dans le panneau — trouvé 2026-09-23 */
}
.row-menu-item {
  width: 100%; text-align: left; background: none; border: none; padding: 7px 9px 7px 11px; border-radius: 7px;
  font-size: 12px; font-family: inherit; color: var(--ink); cursor: pointer;
}
.row-menu-item:hover { background: var(--gray-100); }
.row-menu-select { width: 100%; font-size: 12px; color: var(--ink); padding: 6px 7px; border: 1px solid var(--gray-200); border-radius: 7px; font-family: inherit; }
.row-actions { display: flex; gap: 18px; flex-wrap: nowrap; align-items: center; }
.row-actions .pill-btn-icon { background: var(--gray-100); color: var(--ink); padding: 4px 5px; display: inline-flex; align-items: center; }
.row-menu-panel .action-block { display: flex; flex-direction: column; gap: 7px; }
.row-menu-panel .action-block + .action-block { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gray-100); }
.action-block-title { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.action-block-title svg { width: 14px; height: 14px; }
.action-hint { margin: 0; font-size: 11px; color: var(--gray-600); line-height: 1.4; }
.action-form { display: flex; flex-direction: column; gap: 7px; }
.action-form textarea { font-size: 12px; padding: 6px; border: 1px solid var(--gray-200); border-radius: 7px; font-family: inherit; resize: vertical; width: 100%; }
.action-field { font-size: 11px; font-weight: 600; color: var(--gray-600); display: flex; flex-direction: column; gap: 3px; }
.action-field input[type="number"] { font-size: 12.5px; padding: 7px 8px; border: 1px solid var(--gray-200); border-radius: 7px; font-family: inherit; width: 100%; }
.amount-input-wrap { position: relative; display: block; }
.amount-input-wrap input[type="number"] { padding-right: 52px; }
.amount-total-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: var(--gray-100);
  color: var(--gray-600); border: none; border-radius: 5px; font-size: 10.5px; font-weight: 700;
  padding: 4px 7px; cursor: pointer; font-family: inherit;
}
.amount-total-btn:hover { background: var(--green-100); color: var(--green-700); }
.date-input-wrap { position: relative; display: block; }
.date-input-wrap input[type="date"] {
  font-size: 12.5px; padding: 7px 32px 7px 8px; border: 1px solid var(--gray-200); border-radius: 7px;
  font-family: inherit; width: 100%; color: var(--ink);
}
.date-input-wrap .date-input-icon {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none;
  color: var(--gray-400); display: flex;
}
.date-input-wrap .date-input-icon svg { width: 15px; height: 15px; }
.date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 32px; height: 100%; cursor: pointer; }
.payment-history { display: flex; flex-direction: column; gap: 3px; background: var(--gray-100); border-radius: 7px; padding: 6px 8px; max-height: 90px; overflow-y: auto; }
.payment-history-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11.5px; color: var(--gray-600); }
.payment-history-row form { display: flex; margin: 0; }
.payment-history-delete {
  background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 12px; padding: 2px 4px;
  border-radius: 5px; line-height: 1;
}
.payment-history-delete svg { width:14px; height:14px; display:block; }
.payment-history-delete:hover { background: var(--red-100); color: var(--red-600); }
.clients-table td, .clients-table th { padding: 6px 5px; }
.clients-table td:last-child, .clients-table th:last-child { padding-right: 0; }
.clients-table td.num { font-size: 12px; }
/* Facture : même densité que .clients-table (Commandes) — demandé par Antoine 2026-09-27, "met les mêmes
   espaces que sur commande" (remplace la version plus aérée demandée par Théo le 2026-09-22). */
.invoices-table td, .invoices-table th { padding: 6px 14px 6px 5px; }
.invoices-table th { white-space: nowrap; }
.invoices-table td:last-child, .invoices-table th:last-child { padding-right: 8px; }
.invoices-table details summary::-webkit-details-marker { display: none; }
/* Livraisons : même espacement horizontal que Factures — demandé par Antoine 2026-09-27. */
.shipments-table td, .shipments-table th { padding: 6px 14px 6px 5px; }
.shipments-table td:last-child, .shipments-table th:last-child { padding-right: 8px; }

/* ---------- Cotations : pipeline Kanban ---------- */
.kanban-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 4px; position: relative; scroll-snap-type: x proximity; }
.kanban-board::-webkit-scrollbar { height: 7px; }
.kanban-board::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 20px; }
.kanban-board-wrap { position: relative; }
.kanban-board-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 4px; width: 28px; pointer-events: none; background: linear-gradient(to right, transparent, rgba(0,0,0,.06)); border-radius: 0 12px 12px 0; }
.kanban-col { scroll-snap-align: start; }
.kanban-col { background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; min-width: 0; }
.kanban-col-head { padding: 2px 4px 10px; border-bottom: 1px solid var(--gray-200); margin-bottom: 8px; }
.kanban-col-title { font-size: 11.5px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; line-height: 1.3; min-height: 28px; display: flex; align-items: flex-start; }
.kanban-col-meta { font-size: 11px; color: var(--gray-600); margin-top: 3px; }
.kanban-col-body { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; padding-right: 2px; }
.kanban-col-body::-webkit-scrollbar { width: 6px; }
.kanban-col-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 20px; }
.kanban-card {
  display: block; background: white; border: 1px solid var(--gray-200); border-radius: 10px; padding: 9px 10px;
  text-decoration: none; color: var(--ink); transition: border-color .12s, box-shadow .12s;
}
.kanban-card:hover { border-color: var(--green-600); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.kanban-card.active { border-color: var(--green-700); border-width: 2px; background: var(--green-50); }
.kanban-card.late { border-left: 3px solid var(--red-600); background: var(--red-50); }
.kanban-card-client { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card-meta { font-size: 10.5px; color: var(--gray-400); margin-top: 2px; }
.kanban-card-amount { font-size: 13px; font-weight: 700; color: var(--green-700); margin-top: 4px; }
.kanban-card-sub { font-size: 10.5px; color: var(--red-600); margin-top: 3px; }
.kanban-more { display: block; text-align: center; font-size: 11px; color: var(--gray-400); padding: 6px 0; }

/* ---------- Cotations : panneau détail ---------- */
.cotation-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 8px; }
@media (max-width: 900px) { .cotation-detail-grid { grid-template-columns: 1fr; } }
.detail-subhead { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-400); font-weight: 700; margin: 16px 0 6px; }
.detail-subhead:first-child { margin-top: 0; }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; }
.compare-label { display: block; font-size: 10.5px; color: var(--gray-400); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
.cotation-detail-grid a { color: var(--ink); text-decoration: none; font-weight: 700; }
.cotation-detail-grid a:hover { color: var(--green-700); text-decoration: underline; }
.compare-delta { font-size: 11px; font-weight: 700; margin-top: 2px; }
.compare-delta.up { color: var(--red-600); }
.compare-delta.down { color: var(--green-700); }
.cotation-outcome { border-radius: 10px; padding: 10px 12px; margin: 14px 0; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.cotation-outcome.ok { background: var(--green-50); color: var(--green-800); }
.cotation-outcome.ko { background: var(--red-50); color: var(--red-600); }
.respond-line { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.respond-line-info { flex: 1; min-width: 0; }
.respond-line-info strong { font-size: 12.5px; }
.respond-line-info small { display: block; color: var(--gray-600); font-size: 11px; margin-top: 2px; }
.respond-line input { padding: 7px; border: 1px solid var(--gray-200); border-radius: 7px; font-size: 12.5px; font-family: inherit; }
.qd-card { background: white; border: 1px solid var(--gray-200); border-radius: 12px; padding: 16px 18px; }
.qd-card.tint-green { background: var(--green-50); border-color: var(--green-100); }
.qd-card.tint-amber { background: #fffbeb; border-color: var(--amber-100); }
.qd-card-head { display: flex; align-items: center; gap: 10px; }
.qd-card-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.qd-card-sub { font-size: 12.5px; line-height: 1.5; color: var(--gray-500); margin: 4px 0 14px; }
.qd-icon-circle { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--green-100); color: var(--green-700); }
.qd-icon-circle svg { width: 15px; height: 15px; }
.qd-card.tint-green .qd-icon-circle { background: white; }
.qd-card.tint-amber .qd-icon-circle { background: white; color: var(--amber-600); }
.qd-icon-sm svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--gray-400); }
.qd-stat { display: flex; align-items: flex-start; gap: 9px; }
.qd-stat svg { width: 16px; height: 16px; color: var(--gray-400); margin-top: 2px; flex-shrink: 0; }
.qd-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .qd-row-2 { grid-template-columns: 1fr; } }
.loss-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.loss-legend-item { font-size: 12px; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.loss-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ---------- Colonne Actions figée (tableau demandes) ---------- */
.dash-table td.actions-cell, .dash-table th.actions-cell {
  position: sticky; right: 0; background: white; z-index: 2;
  box-shadow: -6px 0 8px -6px rgba(0,0,0,.08);
}
.dash-table tr:hover td.actions-cell { background: var(--gray-100); }
.truncate-cell { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.truncate-cell strong, .truncate-cell span, .truncate-cell small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.55;
}

/* ---------- Sélecteur de période ---------- */
.period-select-form { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.period-select-form select {
  padding: 9px 14px; border: 1px solid var(--gray-200); border-radius: 9px; font-size: 13px;
  background: white; font-family: inherit; font-weight: 700; color: var(--ink); cursor: pointer; box-shadow: var(--card-shadow);
}
.period-select-form input[type="date"] {
  padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: 13px; font-family: inherit;
}
.dash-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 12px; }
.dash-header-row h1 { margin: 0; font-size: 20px; }
.dash-empty { color: var(--gray-600); font-size: 12px; padding: 6px 0; }

/* ---------- Actions rapides ---------- */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.quick-action-btn {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--green-50);
  border: 1px solid transparent; border-radius: 10px; text-decoration: none; color: var(--green-900);
  font-size: 12.5px; font-weight: 700; transition: background .15s, border-color .15s;
}
.quick-action-btn:hover { background: var(--green-100); border-color: var(--green-500); }
.quick-action-btn svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--green-700); }
.quick-action-chevron { margin-left: auto; color: var(--green-600); opacity: .7; }
.quick-action-chevron svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: static; flex-direction: row; overflow-x: auto; padding: 10px 6px; white-space: nowrap; }
  .admin-sidebar-logo, .admin-sidebar-badge, .admin-nav-label { display: none; }
  .admin-nav-link { padding: 8px 12px; }
  .dash-grid-2, .dash-grid-even, .dash-grid-3 { grid-template-columns: 1fr; }
  .admin-content { padding: 18px; }
  .admin-topbar { flex-wrap: wrap; gap: 10px; }
  .admin-topbar-search { order: 3; max-width: 100%; flex-basis: 100%; }
}

/* ---------- Responsive header/nav client (mobile) — voir project_client_portal_v1 ---------- */
@media (max-width: 760px) {
  .client-topbar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .client-search-form { order: 3; flex-basis: 100%; max-width: 100%; }
  .client-cart-meta { display: none; }
  .client-avatar-meta { display: none; }
  .portal-tabs { padding: 0 14px; }
  .portal-tab { padding: 12px 10px; font-size: 12.5px; }
}

/* ---------- Footer site public/client + page CGV (voir project_shipment_tracking_v1, 2026-09-16) ---------- */
.site-footer {
  max-width: 1400px; margin: 40px auto 0; padding: 18px 32px 28px; border-top: 1px solid var(--gray-200);
  font-size: 12.5px; color: var(--gray-500); display: flex; align-items: center; gap: 8px;
}
.site-footer a { color: var(--gray-500); text-decoration: underline; }
.site-footer a:hover { color: var(--ink); }
.site-footer-sep { color: var(--gray-300); }
.legal-page {
  max-width: 760px; margin: 24px auto 40px; background: white; padding: 56px 64px;
  border: 1px solid var(--gray-200); border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.08);
}
.legal-page h2 { font-size: 16px; font-weight: 700; margin: 28px 0 8px; }
.legal-page h2:first-of-type { margin-top: 20px; }
.legal-page p { font-size: 13.5px; line-height: 1.6; color: var(--gray-700); margin: 0 0 10px; }
.legal-page ul { margin: 0 0 10px; padding-left: 22px; }
.legal-page li { font-size: 13.5px; line-height: 1.6; color: var(--gray-700); margin-bottom: 4px; }
.cart-cgv-mention { font-size: 11.5px; color: var(--gray-500); text-align: center; margin: 16px 0 0; }
.cart-cgv-mention a { color: var(--gray-600); }
.cart-grouped-check {
  display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--gray-600);
  line-height: 1.4; margin: 0 0 16px; cursor: pointer;
}
.cart-grouped-check input { margin-top: 2px; flex-shrink: 0; }

/* ---------- Panier vide (voir project_client_portal_v1, 2026-09-16) ---------- */
.cart-empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 64px 24px; background: white; border-radius: 14px; border: 1px solid var(--gray-200);
  margin-top: 8px;
}
.cart-empty-state svg { color: var(--gray-300); margin-bottom: 16px; }
.cart-empty-state h2 { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.cart-empty-state p { font-size: 13.5px; color: var(--gray-600); margin: 0 0 20px; max-width: 360px; }
.cart-empty-state .btn-order-active { padding: 10px 22px; }

/* "Sur demande" cliquable (prix absent) -> renvoie vers la demande de cotation, demandé par Théo 2026-09-26 */
.price-on-request { color: var(--green-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.price-on-request:hover { color: var(--green-800); }
/* Poubelle rouge du tableau de cotation (remplace l'ancien ✕ vert) — taille identique aux poubelles de "Mes demandes" */
.quote-grid .icon-action-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--red-100); color: var(--red-600); }
.quote-grid .icon-action-btn svg { width: 19px; height: 19px; }

/* Pages légales (2026-09-29) */
.legal-page ul { margin: 8px 0 8px 20px; }
.legal-page li { margin: 4px 0; line-height: 1.55; }
.legal-page p { line-height: 1.6; }
.legal-todo { background: #fef08a; color: #713f12; padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.legal-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.legal-table th, .legal-table td { border: 1px solid var(--gray-200); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-table th { background: var(--gray-50, #f9fafb); }

/* Bouton « Voir la référence » (Références populaires, accueil client) — 2026-09-29 : vert conservé,
   sans soulignement (le <a> héritait du soulignement natif), forme plus nette avec flèche. */
.btn-ref {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px; border: none;
  background: var(--green-600); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none !important; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: background .15s, box-shadow .15s, transform .1s;
}
.btn-ref::after { content: "→"; font-weight: 700; transition: transform .15s; }
.btn-ref:hover { background: var(--green-700); color: #fff; text-decoration: none !important; box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.btn-ref:hover::after { transform: translateX(3px); }
.btn-ref:active { transform: translateY(1px); }

/* Lien discret : noir, vert au survol (n° de commande dans « Mes factures », 2026-09-29) */
a.link-ink { color: var(--ink); text-decoration: none; font-weight: inherit; transition: color .15s; }
a.link-ink:hover { color: var(--green-600); text-decoration: none; }

/* Liste admin « Commandes » : mêmes espacements que la liste des factures (.invoices-table) — 2026-09-29 :
   titres sur une ligne, 14 px à droite / 5 px à gauche de chaque cellule, débordement horizontal autorisé. */
.orders-table th { padding: 6px 14px 6px 5px; white-space: nowrap; }
/* Lignes aussi hautes que celles de Factures (écart en-tête -> valeur : 30 px, mesuré) : 19 px de marge verticale */
.orders-table td { padding: 12px 14px 12px 5px; }
.orders-table td:last-child, .orders-table th:last-child { padding-right: 8px; }
.dash-table.clients-table td { padding-top: 5px; padding-bottom: 5px; }  /* lignes à 47 px comme les autres tableaux (Théo, 2026-10-01) */
/* Références TOUJOURS en majuscules, affichage et saisie (Théo, 2026-10-01) */
.code-cell, #st-ref, .ns-ref, .quote-grid input.wd-ref, input[name=reference] { text-transform: uppercase; }