:root {
  --primary-color: #0f9dff;
  --primary-hover: #0b7ed1;
  --bg-color: #0a1120;
  --text-color: #f5f7fa;
  --surface-color: rgba(16, 24, 40, 0.92);
  --border-color: rgba(148, 163, 184, 0.18);
  --hover-color: rgba(148, 163, 184, 0.16);
  --accent-bg: rgba(16, 30, 54, 0.82);
  --accent-dark: rgba(11, 20, 38, 0.92);
  --table-strip: rgba(148, 163, 184, 0.14);
  --table-bg: rgba(15, 23, 42, 0.88);
  --input-border: rgba(148, 163, 184, 0.35);
  --loader-border: rgba(148, 163, 184, 0.28);
  --loader-top: #38bdf8;
  --success-bg: #2ecc71;
  --error-bg: #e74c3c;
  --danger-bg: #d91e36;
  --danger-hover: #f04455;
  --muted-text: rgba(226, 232, 240, 0.82);
  --light-border: rgba(148, 163, 184, 0.3);
  --light-text: rgba(226, 232, 240, 0.7);
  --dark-222: rgba(15, 23, 42, 0.95);
  --card-hover: rgba(22, 32, 52, 0.94);
  --topbar-height: 62px;
  --mt4-height: 1.5rem;
  --topbar-bg: rgba(13, 23, 41, 0.92);
  --topbar-button-bg: linear-gradient(135deg, rgba(0, 153, 255, 0.92), rgba(59, 130, 246, 0.95));
  --topbar-button-hover: linear-gradient(135deg, rgba(14, 116, 206, 0.95), rgba(14, 165, 233, 0.92));
  --sidebar-bg: rgba(10, 18, 32, 0.96);
  --sidebar-border: rgba(148, 163, 184, 0.18);
  --sidebar-link-color: rgba(226, 232, 240, 0.82);
  --sidebar-link-active-bg: rgba(59, 130, 246, 0.2);
  --sidebar-link-hover-bg: rgba(59, 130, 246, 0.12);
  --badge-bg: #0ea5e9;
  --quick-add-btn-bg: rgba(59, 130, 246, 0.24);
  --quick-add-btn-bg-hover: rgba(59, 130, 246, 0.38);
  --quick-add-btn-border: rgba(59, 130, 246, 0.55);
  --quick-add-btn-text: #f8fafc;
  --quick-add-btn-shadow: rgba(56, 189, 248, 0.22);
  --accent-color: #38bdf8;
  --quick-add-feedback-shadow: rgba(59, 130, 246, 0.35);
  --hero-overlay: rgba(4, 9, 20, 0.55);
  --hero-overlay-soft: rgba(14, 23, 42, 0.38);
  --hero-card-bg: rgba(14, 23, 42, 0.65);
  --hero-card-border: rgba(148, 163, 184, 0.35);
  --hero-card-shadow: 0 30px 60px rgba(4, 9, 20, 0.65);
  --hero-text-color: #f8fafc;
  --hero-badge-bg: rgba(14, 165, 233, 0.3);
  --hero-badge-text: #e0f2fe;
  --hero-cta-shadow: 0 20px 45px rgba(14, 165, 233, 0.35);
  --bs-body-bg: #0a1120;
  --bs-body-bg-rgb: 10, 17, 32;
  --bs-body-color: #f5f7fa;
  --bs-body-color-rgb: 245, 247, 250;
  --bs-border-color: rgba(148, 163, 184, 0.18);
  --bs-secondary-color: rgba(226, 232, 240, 0.72);
  --bs-secondary-rgb: 148, 163, 184;
  --bs-secondary-text: rgba(226, 232, 240, 0.8);
  --bs-primary: #0f9dff;
  --bs-primary-rgb: 15, 157, 255;
  --bs-success: #2ecc71;
  --bs-success-rgb: 46, 204, 113;
  --bs-success-text: #bbf7d0;
  --bs-danger: #d91e36;
  --bs-danger-rgb: 217, 30, 54;
  --bs-danger-text: #fecdd3;
  --bs-warning-rgb: 234, 179, 8;
  --bs-warning-text: #fde68a;
  --session-chip-bg: rgba(59, 130, 246, 0.18);
  --session-chip-border: rgba(148, 163, 184, 0.35);
  --session-chip-text: #f8fafc;
  --session-chip-icon: #38bdf8;
  --session-logout-bg: rgba(248, 113, 113, 0.2);
  --session-logout-border: rgba(248, 113, 113, 0.35);
  --session-logout-hover-bg: rgba(248, 113, 113, 0.32);
  --session-logout-icon: #fecaca;
}

body.light-theme {
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --bg-color: #eef2f8;
  --text-color: #0f172a;
  --surface-color: #f7f9fc;
  --border-color: rgba(15, 23, 42, 0.12);
  --hover-color: rgba(59, 130, 246, 0.1);
  --accent-bg: #f8fbff;
  --accent-dark: #dde6f3;
  --table-strip: #eef2f8;
  --table-bg: #f8fbff;
  --input-border: rgba(15, 23, 42, 0.14);
  --loader-border: rgba(100, 116, 139, 0.2);
  --loader-top: #0d6efd;
  --success-bg: #198754;
  --error-bg: #dc3545;
  --danger-bg: #d92d3a;
  --danger-hover: #b91c1c;
  --muted-text: #64748b;
  --light-border: #c5d3e6;
  --light-text: #475569;
  --dark-222: #dce4f2;
  --card-hover: #e6efff;
  --topbar-bg: #f8fbff;
  --topbar-button-bg: linear-gradient(135deg, #0ea5e9, #2563eb);
  --topbar-button-hover: linear-gradient(135deg, #1d4ed8, #38bdf8);
  --sidebar-bg: #f8fbff;
  --sidebar-border: rgba(15, 23, 42, 0.1);
  --sidebar-link-color: #1f2937;
  --sidebar-link-active-bg: rgba(37, 99, 235, 0.18);
  --sidebar-link-hover-bg: rgba(37, 99, 235, 0.1);
  --badge-bg: #2563eb;
  --quick-add-btn-bg: rgba(37, 99, 235, 0.12);
  --quick-add-btn-bg-hover: rgba(37, 99, 235, 0.22);
  --quick-add-btn-border: rgba(37, 99, 235, 0.35);
  --quick-add-btn-text: #0f172a;
  --quick-add-btn-shadow: rgba(37, 99, 235, 0.18);
  --accent-color: #2563eb;
  --quick-add-feedback-shadow: rgba(37, 99, 235, 0.22);
  --hero-overlay: rgba(15, 23, 42, 0.48);
  --hero-overlay-soft: rgba(255, 255, 255, 0.18);
  --hero-card-bg: rgba(255, 255, 255, 0.82);
  --hero-card-border: rgba(148, 163, 184, 0.28);
  --hero-card-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
  --hero-text-color: #0f172a;
  --hero-badge-bg: rgba(37, 99, 235, 0.12);
  --hero-badge-text: #1d4ed8;
  --hero-cta-shadow: 0 18px 42px rgba(37, 99, 235, 0.28);
  --bs-body-bg: #eef2f8;
  --bs-body-bg-rgb: 238, 242, 248;
  --bs-body-color: #0f172a;
  --bs-body-color-rgb: 15, 23, 42;
  --bs-border-color: rgba(15, 23, 42, 0.12);
  --bs-secondary-color: #64748b;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-secondary-text: #475569;
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-success: #198754;
  --bs-success-rgb: 25, 135, 84;
  --bs-success-text: #14532d;
  --bs-danger: #dc3545;
  --bs-danger-rgb: 220, 53, 69;
  --bs-danger-text: #991b1b;
  --bs-warning-rgb: 234, 179, 8;
  --bs-warning-text: #b45309;
  --session-chip-bg: rgba(37, 99, 235, 0.12);
  --session-chip-border: rgba(37, 99, 235, 0.28);
  --session-chip-text: #0f172a;
  --session-chip-icon: #1d4ed8;
  --session-logout-bg: rgba(239, 68, 68, 0.1);
  --session-logout-border: rgba(239, 68, 68, 0.25);
  --session-logout-hover-bg: rgba(239, 68, 68, 0.2);
  --session-logout-icon: #b91c1c;
}

body.dashboard {
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

#app {
  position: relative;
  min-height: 100vh;
}

/* Classe utilitaire pour cacher des éléments de la mise en page */
.hidden {
  display: none;
}

.topbar {
  background: var(--topbar-bg);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--sidebar-border);
  box-shadow: 0 18px 45px rgba(9, 14, 25, 0.35);
  position: relative;
  z-index: 1040;
  backdrop-filter: blur(12px);
  color: var(--text-color);
}

/* Header fixe sur mobile, normal sur desktop */
@media (max-width: 991px) {
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
  }
}

@media (min-width: 992px) {
  .topbar {
    position: relative;
    z-index: 1040;
  }
}

#menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--sidebar-border);
  color: var(--text-color);
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#menu-toggle i {
  color: inherit;
}

#menu-toggle:hover,
#menu-toggle:focus-visible {
  background: var(--sidebar-link-hover-bg);
  border-color: rgba(59, 130, 246, 0.45);
  outline: none;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.logo-img {
  height: 40px;
  display: block;
  width: auto;
  object-fit: contain;
}

@media (min-width: 992px) {
  header.topbar .logo-img {
    height: 48px;
  }
}

.topbar-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

#zone-session {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.session-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.session-user {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--session-chip-border);
  background: var(--session-chip-bg);
  color: var(--session-chip-text);
  font-weight: 600;
  line-height: 1.2;
}

.session-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
}

.session-user-chip i {
  font-size: 1.1rem;
  color: var(--session-chip-icon);
}

.session-user-chip span {
  max-width: 14ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-logout {
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  #zone-session {
    gap: 0.75rem;
  }
}

@media (min-width: 1200px) {
  .topbar-right {
    gap: 18px;
  }

  #zone-session {
    gap: 1rem;
  }
}

.session-actions > button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid transparent;
  background: var(--topbar-button-bg);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 16px 32px rgba(14, 165, 233, 0.25);
}

.panier-btn {
  position: relative;
}

.session-actions > button:hover,
.session-actions > button:focus {
  background: var(--topbar-button-hover);
  transform: translateY(-1px);
  box-shadow: 0 20px 44px rgba(14, 165, 233, 0.32);
}

.session-actions > button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.4);
}

.session-actions > button.actif {
  background: var(--topbar-button-hover);
  font-weight: 700;
  box-shadow: 0 18px 38px rgba(14, 165, 233, 0.36);
}

.session-logout button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--session-logout-border);
  background: var(--session-logout-bg);
  color: var(--session-logout-icon);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  box-shadow: none;
}

.session-logout button:hover,
.session-logout button:focus {
  background: var(--session-logout-hover-bg);
  color: #fff;
  transform: translateY(-1px);
}

.session-logout button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.35);
}

.payment-summary {
  width: 100%;
}

.payment-summary-card {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.payment-summary-card .card-body {
  color: var(--text-color);
}

.payment-summary-title {
  font-weight: 600;
}

.payment-summary-text {
  font-size: 0.95rem;
}

.payment-summary-help {
  font-size: 0.85rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.filters .form-control {
  flex: 1 1 200px;
  min-width: 180px;
}

.filters button {
  flex: 0 1 auto;
}

.emoji {
  line-height: 1;
}

/* ===== Loader global ===== */
.global-loader {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 4px solid var(--loader-border);
  border-top-color: var(--loader-top);
  animation: tourner 1s linear infinite;
  z-index: 1000;
}

@keyframes tourner {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.sidebar {
  width: 220px;
  background: var(--sidebar-bg);
  padding: 24px 20px;
  position: absolute;
  top: var(--topbar-height);
  bottom: 0;
  left: 0;
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 18px 0 38px rgba(5, 10, 24, 0.45);
  overflow-y: auto;
  color: var(--sidebar-link-color);
  backdrop-filter: blur(14px);
}

/*
.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin: 15px 0;
  cursor: pointer;
  font-size: 16px;
}
*/

.sidebar ul li {
  margin: 14px 0;
  list-style: none;
  font-size: 16px;
}

.sidebar ul li .nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 0.85rem;
  color: var(--sidebar-link-color);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-align: left;
  text-decoration: none;
  border: 1px solid transparent;
  font-weight: 500;
}

.sidebar ul li.actif .nav-link {
  background: var(--sidebar-link-active-bg);
  color: #ffffff;
  font-weight: 600;
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.45);
}


.sidebar ul li .nav-link:hover,
.sidebar ul li .nav-link:focus {
  background: var(--sidebar-link-hover-bg);
  color: #ffffff;
  text-decoration: none;
}

.sidebar ul li .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.45);
}

body.light-theme .sidebar ul li .nav-link {
  color: var(--sidebar-link-color);
}

body.light-theme .sidebar ul li.actif .nav-link {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(14, 165, 233, 0.88));
  color: #ffffff;
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 18px 32px rgba(37, 99, 235, 0.28);
}

body.light-theme .sidebar ul li .nav-link:hover,
body.light-theme .sidebar ul li .nav-link:focus {
  background: rgba(59, 130, 246, 0.18);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 12px 26px rgba(59, 130, 246, 0.18);
}

.sidebar .admin-nav-group > .nav-link {
  position: relative;
  justify-content: flex-start;
}

.sidebar .admin-nav-group > .nav-link .admin-nav-label {
  flex: 1 1 auto;
}

.sidebar .admin-nav-group > .nav-link .admin-nav-caret {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.sidebar .admin-nav-group.admin-expanded > .nav-link .admin-nav-caret {
  transform: rotate(90deg);
  opacity: 1;
}

.sidebar .admin-subnav {
  margin: 0.6rem 0 0 2.2rem;
  padding: 0.4rem 0 0.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-left: 1px solid rgba(148, 163, 184, 0.24);
}

.sidebar .admin-subnav .nav-item {
  margin: 0;
}

.sidebar .admin-subnav .nav-link {
  gap: 0.7rem;
  padding: 0.55rem 1.1rem;
  border-radius: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--sidebar-link-color);
  opacity: 0.82;
  border: 1px solid transparent;
  background: transparent;
  position: relative;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease,
    opacity 0.2s ease, box-shadow 0.2s ease;
}

.sidebar .admin-subnav .nav-link:hover,
.sidebar .admin-subnav .nav-link:focus {
  opacity: 1;
  border-color: rgba(59, 130, 246, 0.3);
  background: var(--sidebar-link-hover-bg);
  color: var(--text-color);
}

.sidebar .admin-subnav .nav-link.active {
  opacity: 1;
  border-color: rgba(59, 130, 246, 0.35);
  background: var(--sidebar-link-active-bg);
  color: var(--text-color);
  box-shadow: inset 3px 0 0 rgba(59, 130, 246, 0.55);
}

body.light-theme .sidebar .admin-subnav {
  border-left-color: rgba(59, 130, 246, 0.18);
}

body.light-theme .sidebar .admin-subnav .nav-link.active {
  background: var(--sidebar-link-active-bg);
  border-color: rgba(37, 99, 235, 0.32);
  box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.55);
  color: var(--sidebar-link-color);
}

body.light-theme .sidebar .admin-subnav .nav-link {
  color: var(--sidebar-link-color);
  opacity: 0.9;
  background: transparent;
}

body.light-theme .sidebar .admin-subnav .nav-link:hover,
body.light-theme .sidebar .admin-subnav .nav-link:focus {
  background: var(--sidebar-link-hover-bg);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.28);
}

@media (max-width: 991px) {
  .sidebar .admin-subnav {
    margin-left: 1.2rem;
    padding-left: 1rem;
  }

  .sidebar .admin-subnav .nav-link {
    padding: 0.5rem 0.95rem;
  }
}

.contenu {
  margin-left: 260px;
  padding: 30px;
  flex: 1;
}
/* Quand la sidebar est masquée, le contenu doit être centré */
.sidebar.hidden + .contenu {
  margin-left: auto;
}

.bloc-categorie {
  margin-bottom: 30px;
}

.liste-produits {
  list-style: none;
  padding: 0;
  margin: 0;
}

.produit-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 6px;
}

.nom-produit {
  flex: 2;
}

.prix-produit {
  flex: 1;
  text-align: right;
  margin-right: 10px;
}

.produit-item button {
  padding: 6px 10px;
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.produit-item button:hover,
.produit-item button:focus {
  background-color: var(--primary-hover);
}

.form-box {
  background-color: var(--surface-color);
  padding: 20px;
  max-width: 350px;
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px #00000044;
}

.form-box input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: none;
  background-color: var(--accent-bg);
  color: var(--text-color);
  border-radius: 5px;
}

.form-box .form-control,
.form-box .form-select {
  background-color: var(--accent-bg);
  color: var(--text-color);
  border: 1px solid var(--input-border);
}

.form-box button {
  width: 100%;
  padding: 10px;
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.form-box button:hover,
.form-box button:focus {
  background-color: var(--primary-hover);
}

.form-box a {
  color: var(--primary-color);
}

.error {
  color: red;
  text-align: center;
  margin-top: 10px;
}

.password-wrapper {
  position: relative;
}

.password-wrapper input {
  width: 100%;
  padding-right: 40px;
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
}

.form-box {
  background-color: var(--surface-color);
  padding: 20px;
  max-width: 350px;
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px #00000044;
  width: 100%; /* ✅ pour forcer la largeur fluide */
  box-sizing: border-box;
}

.form-box input,
.password-wrapper {
  width: 100%;
  box-sizing: border-box;
}

.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 40px;
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
}

.historique-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  color: var(--text-color);
}

.historique-table th, .historique-table td {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
}

.historique-table th {
  background-color: var(--dark-222);
}

.historique-table pre {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
}

.historique-order-message {
  margin: 0;
  white-space: pre-wrap;
  max-width: min(420px, 68ch);
  word-break: break-word;
}

.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.historique-filters {
  gap: 0.75rem;
}

.historique-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.historique-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 1.2rem;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
  padding: 1.2rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

body.light-theme .historique-card {
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.historique-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
}

.historique-card-date {
  font-size: 1rem;
}

.historique-card-total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 119, 204, 0.9), rgba(0, 174, 255, 0.65));
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: 0 12px 26px rgba(0, 119, 204, 0.4);
}

.historique-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.historique-card-produits {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.historique-card-produits li {
  color: var(--text-color);
  font-size: 0.95rem;
}

.historique-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.historique-card-actions {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.historique-card-actions .historique-reorder-btn {
  width: 100%;
  font-weight: 600;
}

.historique-reorder-note {
  font-size: 0.85rem;
  color: var(--muted-text);
}

.historique-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted-text);
  font-size: 0.9rem;
}

.historique-card-meta i {
  color: var(--primary-color);
}

.historique-empty {
  border: 1px dashed var(--border-color);
  border-radius: 1rem;
  padding: 1.2rem;
  text-align: center;
  color: var(--muted-text);
  background: rgba(255, 255, 255, 0.03);
}

body.light-theme .historique-empty {
  background: rgba(13, 27, 42, 0.04);
  border-color: var(--light-border);
}

.historique-empty-error {
  color: #ff6b6b;
  border-color: rgba(220, 53, 69, 0.4);
}

.filters input[type="text"],
.filters input[type="date"] {
  padding: 6px;
  border: none;
  border-radius: 4px;
  background: var(--accent-bg);
  color: var(--text-color);
}

.form-control,
.form-select {
  background: var(--accent-bg);
  color: var(--text-color);
  border: 1px solid var(--input-border);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--accent-bg);
  color: var(--text-color);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 119, 204, 0.25);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: var(--accent-dark);
  color: var(--muted-text);
  border-color: var(--input-border);
  opacity: 1;
}

.form-control::placeholder {
  color: var(--muted-text);
}

.form-select option,
.form-select optgroup {
  color: var(--text-color);
  background-color: var(--accent-bg);
}

body.light-theme .form-select option,
body.light-theme .form-select optgroup {
  background-color: #ffffff;
}

.form-label,
label {
  color: var(--text-color);
}

.form-text,
.text-muted,
.small,
.form-check-label {
  color: var(--muted-text) !important;
}

.filters button {
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  padding: 8px 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.filters button:hover,
.filters button:focus {
  background-color: var(--primary-hover);
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

#compteur-panier {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  border-radius: 50%;
  padding: 2px 6px;
  background: var(--badge-bg);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.4);
  animation: none;
}

#compteur-panier.pop {
  animation: pop 0.3s ease;
}

.actions-panier {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== Mise en page du panier ===== */
.panier-page-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.panier-page-header h2 {
  margin: 0;
  color: var(--text-color);
}

.panier-page-note {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.95rem;
}

.grille-panier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 5rem; /* espace pour la barre totale collante */
  justify-content: center;
}

@media (min-width: 1200px) {
  .grille-panier {
    grid-template-columns: repeat(5, 1fr);
  }
}

.carte-panier {
  position: relative;
  background: var(--accent-bg);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.cart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.cart-weight-info {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted-text);
}

body.light-theme .cart-weight-info {
  color: #475569;
}

.cart-card-header h4 {
  margin: 0;
  font-size: 1.05rem;
  flex: 1;
}

.carte-panier .badge-quantite {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--primary-color);
  color: var(--text-color);
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 0.8rem;
  font-weight: bold;
}

.product-card-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.product-info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--admin-accent-gradient);
  color: #fff;
  border: none;
  font-weight: 700;
  cursor: help;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-info-icon span {
  pointer-events: none;
}

.product-info-icon:hover,
.product-info-icon:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0, 119, 204, 0.35);
  outline: none;
}

.product-info-icon:focus-visible {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.4);
}

.product-info-icon[data-info]::after {
  content: attr(data-info);
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-100%) translateY(-8px);
  background: var(--surface-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  white-space: pre-line;
  min-width: 200px;
  max-width: 260px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.product-info-icon[data-info]::before {
  content: '';
  position: absolute;
  right: 8px;
  top: -6px;
  width: 12px;
  height: 12px;
  background: var(--surface-color);
  border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease, top 0.2s ease;
  z-index: 9;
}

.product-info-icon[data-info]:hover::after,
.product-info-icon[data-info]:focus-visible::after {
  opacity: 1;
  transform: translateY(-100%) translateY(-12px);
}

.product-info-icon[data-info]:hover::before,
.product-info-icon[data-info]:focus-visible::before {
  opacity: 1;
  top: -12px;
}

.has-precision-info {
  position: relative;
}

.has-precision-info .product-info-icon {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.pickup-location-group {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pickup-location-select {
  width: 100%;
  max-width: 360px;
}

.pickup-location-display {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(14, 165, 233, 0.38));
  color: #e0f2fe;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 26px rgba(14, 165, 233, 0.25);
  max-width: 420px;
}

.pickup-location-dot {
  display: inline-flex;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  background: var(--dot-color, #38bdf8);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.2);
}

.pickup-location-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

body.light-theme .pickup-location-display {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(96, 165, 250, 0.4));
  color: #1e3a8a;
  box-shadow: 0 14px 28px rgba(59, 130, 246, 0.18);
}

.pickup-date-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pickup-date-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
  max-width: 420px;
  padding: 0.65rem 0.95rem;
  border-radius: 0.95rem;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 12px 26px rgba(14, 165, 233, 0.18);
}

.pickup-date-trigger i {
  color: var(--primary-color);
  font-size: 1.2rem;
}

.pickup-date-trigger:hover,
.pickup-date-trigger:focus-visible {
  border-color: rgba(14, 165, 233, 0.65);
  box-shadow: 0 18px 36px rgba(14, 165, 233, 0.28);
  outline: none;
  transform: translateY(-1px);
}

.pickup-date-trigger.has-selection {
  border-color: rgba(14, 165, 233, 0.6);
  background: rgba(14, 165, 233, 0.16);
  box-shadow: 0 16px 34px rgba(14, 165, 233, 0.25);
}

.pickup-date-trigger.is-open {
  border-color: rgba(14, 165, 233, 0.7);
  box-shadow: 0 20px 38px rgba(14, 165, 233, 0.32);
  transform: translateY(-1px);
}

body.light-theme .pickup-date-trigger {
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

body.light-theme .pickup-date-trigger.has-selection {
  background: rgba(219, 234, 254, 0.85);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 16px 32px rgba(59, 130, 246, 0.2);
}

body.light-theme .pickup-date-trigger.is-open {
  background: rgba(219, 234, 254, 0.95);
}

.pickup-date-panel {
  margin-top: 0.3rem;
  padding: 1rem;
  border-radius: 1rem;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
  max-width: 460px;
}

body.light-theme .pickup-date-panel {
  box-shadow: 0 20px 36px rgba(15, 23, 42, 0.12);
}

.pickup-date-container {
  display: block;
}

.pickup-calendar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 420px;
  width: 100%;
}

.pickup-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

body.light-theme .pickup-calendar-nav {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.pickup-calendar-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.6rem;
  background: linear-gradient(135deg, rgba(0, 119, 204, 0.9), rgba(0, 174, 255, 0.6));
  color: #fff;
  border: none;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.pickup-calendar-nav-btn:hover,
.pickup-calendar-nav-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 119, 204, 0.35);
  outline: none;
  filter: brightness(1.05);
}

.pickup-calendar-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}

.pickup-calendar-month-select {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--accent-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 0.6rem;
  padding: 0.4rem 0.6rem;
  font-weight: 600;
  text-transform: capitalize;
}

body.light-theme .pickup-calendar-month-select {
  background: #f3f6fa;
}

.pickup-calendar-month-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pickup-calendar-month {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 0.75rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.light-theme .pickup-calendar-month {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.pickup-calendar-month-header {
  text-transform: capitalize;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.pickup-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.pickup-calendar-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-text);
  text-transform: uppercase;
  padding: 0.25rem 0;
}

.pickup-calendar-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 2.4rem;
  border-radius: 0.6rem;
  padding: 0.35rem;
}

button.pickup-calendar-day {
  background: transparent;
  color: var(--text-color);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

button.pickup-calendar-day:hover:not(:disabled),
button.pickup-calendar-day:focus-visible:not(:disabled) {
  background: var(--accent-bg);
  border-color: var(--border-color);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  outline: none;
}

button.pickup-calendar-day.selected {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

button.pickup-calendar-day:disabled,
.pickup-calendar-day.unavailable {
  background: rgba(148, 163, 184, 0.18);
  color: var(--muted-text);
  border: 1px dashed rgba(148, 163, 184, 0.35);
  cursor: not-allowed;
  opacity: 0.8;
  box-shadow: none;
}

.pickup-calendar-day.out-of-range {
  opacity: 0.35;
}

body.light-theme button.pickup-calendar-day:disabled,
body.light-theme .pickup-calendar-day.unavailable {
  background: rgba(148, 163, 184, 0.25);
  border-color: rgba(148, 163, 184, 0.35);
}

.pickup-calendar-day.placeholder {
  visibility: hidden;
  pointer-events: none;
}

.pickup-calendar-empty {
  max-width: 420px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Vue commande ===== */
.commande-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.commande-page-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.commande-page-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-color);
}

.commande-page-subtitle {
  margin: 0;
  color: var(--muted-text);
  font-size: 1rem;
}

.commande-page-note {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.95rem;
}

.commande-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.commande-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.commande-search-group {
  flex: 1 1 260px;
  max-width: 420px;
}

.commande-search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--admin-chip-border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.light-theme .commande-search-input-wrapper {
  background: rgba(15, 23, 42, 0.05);
}

.commande-search-input-wrapper i {
  color: var(--muted-text);
}

.commande-search-input-wrapper .form-control {
  background: transparent;
  border: none;
  color: var(--text-color);
  padding: 0;
  box-shadow: none;
}

.commande-search-input-wrapper:focus-within {
  border-color: rgba(14, 165, 233, 0.6);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22);
}

.commande-result-count {
  color: var(--muted-text);
  font-weight: 500;
}

.commande-tabs-container {
  overflow: visible;
  padding-bottom: 0.85rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.commande-tabs {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.commande-tab {
  display: flex;
  background: var(--admin-chip-bg);
  border-color: var(--admin-chip-border);
  color: var(--text-color);
  font-weight: 600;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 3.25rem;
}

.commande-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 174, 255, 0.4);
}

.commande-tab.active {
  background: var(--admin-accent-gradient);
  color: #ffffff;
  box-shadow: 0 16px 36px rgba(0, 119, 204, 0.35);
  border-color: transparent;
}

body.light-theme .commande-tab.active {
  color: #ffffff;
}

.commande-tab-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.commande-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
}

.commande-tab.active .commande-tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

body.light-theme .commande-tab .commande-tab-count {
  background: rgba(15, 23, 42, 0.08);
  color: var(--light-text);
}

body.light-theme .commande-tab.active .commande-tab-count {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.commande-panels {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.commande-panel {
  display: none;
}

.commande-panel.active {
  display: block;
}
.carte-panier .form-control,
.carte-panier .form-select {
  width: auto;
  display: inline-block;
}

.carte-panier input[type="text"] {
  width: 100%;
}

.quantite-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0.5rem;
}

.quantite-input-group {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid var(--input-border);
  border-radius: 0.65rem;
  padding: 0.2rem 0.6rem;
}

body.light-theme .quantite-input-group {
  background: rgba(255, 255, 255, 0.9);
}

.quantite-input-group input {
  border: none;
  background: transparent;
  width: auto;
  max-width: 6ch;
  text-align: right;
  padding: 0;
  color: var(--text-color);
}

.quantite-input-group input:focus {
  box-shadow: none;
}

.quantite-unit-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-text);
  white-space: nowrap;
}

body.light-theme .quantite-unit-label {
  color: rgba(71, 85, 105, 0.85);
}

.quantite-actions > input {
  width: 100%;
  max-width: 6ch;
  min-width: 0;
  text-align: center;
  display: inline-block;
}

/* Masquer les flèches par défaut des champs number */
.quantite-actions > input::-webkit-outer-spin-button,
.quantite-actions > input::-webkit-inner-spin-button,
.quantite-input-group input::-webkit-outer-spin-button,
.quantite-input-group input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantite-actions > input,
.quantite-input-group input {
  -moz-appearance: textfield;
}

.badge-quantite {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-weight: 600;
}

.badge-quantite-valeur {
  font-size: 1.25rem;
}

.badge-quantite-unite {
  font-size: 0.75rem;
  text-transform: uppercase;
  opacity: 0.8;
}

.input-quantite-panier {
  padding: 0.25rem;
}

.quantite-actions button {
  background: var(--hover-color);
  border: none;
  color: var(--text-color);
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
}

.barre-total-panier {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface-color);
  border-top: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
  z-index: 5;
}

@media (min-width: 600px) {
  .barre-total-panier {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .barre-total-panier .actions-panier {
    flex-direction: row;
    align-items: center;
  }
}

.ligne-quantite-unite {
  display: flex;
  gap: 0.5rem;
}

/* */

.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

.carte-produit {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1.1rem;
  padding: 1.15rem;
  box-shadow: 0 24px 48px rgba(2, 6, 23, 0.45);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--admin-panel-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  color: var(--text-color);
  touch-action: pan-y;
}

body.light-theme .carte-produit {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 20px 36px rgba(15, 23, 42, 0.1);
}

.carte-produit:hover,
.carte-produit.details-ouverts {
  transform: translateY(-4px);
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow: 0 28px 54px rgba(14, 165, 233, 0.28);
  background: rgba(11, 21, 37, 0.95);
}

body.light-theme .carte-produit:hover,
body.light-theme .carte-produit.details-ouverts {
  background: #f8fbff;
}

.carte-produit h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
}

body.light-theme .carte-produit h3 {
  color: #0f172a;
}

.carte-produit p {
  margin: 0;
  color: var(--muted-text);
  font-weight: 500;
}

body.light-theme .carte-produit p {
  color: #475569;
}

.carte-produit .product-unit-weight {
  display: inline-block;
  margin-left: 0.4rem;
  font-style: italic;
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.7);
}

body.light-theme .carte-produit .product-unit-weight {
  color: rgba(15, 23, 42, 0.55);
}

.carte-produit.indisponible::before {
  content: none;
}

.carte-produit.indisponible {
  opacity: 0.75;
}

body.light-theme .carte-produit.indisponible {
  opacity: 0.85;
}

.carte-produit-titles {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.product-availability {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  align-self: flex-start;
}

.product-availability.is-available {
  background: rgba(34, 197, 94, 0.18);
  color: #34d399;
}

.product-availability.is-unavailable {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

body.light-theme .product-availability.is-available {
  background: rgba(16, 185, 129, 0.15);
  color: #0f766e;
}

body.light-theme .product-availability.is-unavailable {
  background: rgba(239, 68, 68, 0.18);
  color: #b91c1c;
}

.btn-details {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  border: 1px solid var(--admin-chip-border);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 0.25rem;
  font-weight: 600;
  align-self: flex-start;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn-details[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--muted-text);
  border-color: rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.15);
}

.btn-details:hover,
.btn-details:focus,
.btn-details[aria-expanded="true"] {
  background: rgba(14, 165, 233, 0.2);
  color: #ffffff;
  border-color: rgba(14, 165, 233, 0.45);
  transform: translateY(-1px);
}

.btn-details:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.4);
}

.btn-panier-principal {
  background: var(--admin-accent-gradient);
  color: #ffffff;
  border: none;
  padding: 0.55rem 1.2rem;
  border-radius: 0.9rem;
  cursor: pointer;
  margin-top: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 18px 36px rgba(0, 119, 204, 0.35);
}

.btn-panier-principal:hover,
.btn-panier-principal:focus {
  transform: translateY(-1px);
  box-shadow: 0 22px 42px rgba(0, 119, 204, 0.4);
}

.btn-panier-principal:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.4);
}

.btn-panier-principal:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.form-produit {
  margin-top: 0.5rem;
  text-align: left;
}

.form-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--admin-chip-border);
}

body.light-theme .form-block {
  background: rgba(15, 23, 42, 0.05);
}

.commande-card .ligne-quantite-unite {
  display: flex;
  gap: 0.65rem;
}

.commande-card .champ-quantite,
.commande-card .champ-unite,
.commande-card .champ-preparation {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.85rem;
  border: 1px solid var(--admin-chip-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-color);
  box-sizing: border-box;
}

body.light-theme .commande-card .champ-quantite,
body.light-theme .commande-card .champ-unite,
body.light-theme .commande-card .champ-preparation {
  background: rgba(255, 255, 255, 0.98);
  color: var(--text-color);
}

.commande-card .champ-quantite:focus,
.commande-card .champ-unite:focus,
.commande-card .champ-preparation:focus {
  outline: none;
  border-color: rgba(14, 165, 233, 0.6);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22);
}



.commande-quick-wrapper {
  margin-top: 0.75rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.commande-quick-wrapper.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.commande-quick-wrapper[hidden] {
  display: none !important;
}

.commande-card .quick-add {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quick-add--grouped .quick-add-feedback {
  margin-top: 0.35rem;
}

.quick-add__group {
  border: 1px solid var(--quick-add-btn-border);
  border-radius: 1rem;
  background: rgba(var(--bs-primary-rgb, 15, 157, 255), 0.08);
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

body.light-theme .quick-add__group {
  background: rgba(var(--bs-primary-rgb, 37, 99, 235), 0.14);
}

.quick-add__group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.quick-add__group-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--muted-text);
}

.quick-add__group-buttons {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.quick-add[data-variant="inline"] {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.quick-add[data-variant="inline"] .quick-add__group {
  flex: 1 1 220px;
}

.quick-add[data-variant="inline"] .quick-add__group-buttons {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.quick-add-inline {
  margin-top: 0.75rem;
}

.commande-quick-btn {
  flex: 1 1 auto;
  min-height: 44px;
  min-width: 0;
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
  border-radius: 0.85rem;
  border: 1px solid var(--quick-add-btn-border);
  background: var(--quick-add-btn-bg);
  color: var(--quick-add-btn-text);
  box-shadow: 0 6px 18px var(--quick-add-btn-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  touch-action: manipulation;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.commande-quick-btn:hover,
.commande-quick-btn:focus {
  background: var(--quick-add-btn-bg-hover);
  border-color: var(--quick-add-btn-border);
  color: var(--quick-add-btn-text);
  box-shadow: 0 10px 24px var(--quick-add-btn-shadow);
  transform: translateY(-1px);
}

.commande-quick-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--quick-add-btn-border);
}

.commande-quick-btn:active {
  transform: scale(0.97);
}

.commande-quick-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.commande-quick-btn--pulse {
  transform: scale(0.96) !important;
  box-shadow: 0 4px 14px var(--quick-add-btn-shadow);
}

.quick-add-feedback {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: var(--muted-text);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.quick-add-feedback.visible {
  opacity: 1;
  transform: translateY(0);
}

.champ-quantite.quick-add-highlight {
  border-color: var(--quick-add-btn-border);
  box-shadow: 0 0 0 3px var(--quick-add-feedback-shadow);
  animation: quickAddFieldPulse 1s ease-out;
}

@keyframes quickAddFieldPulse {
  0% {
    box-shadow: 0 0 0 0 var(--quick-add-feedback-shadow);
  }
  60% {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(15, 23, 42, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .commande-quick-btn,
  .commande-quick-btn:hover,
  .commande-quick-btn:focus,
  .commande-quick-btn:active,
  .commande-quick-btn--pulse {
    transition: none;
    transform: none !important;
  }
  .champ-quantite.quick-add-highlight {
    animation: none;
  }
}

.quick-add.quick-add-panier {
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.quick-add.quick-add-panier .btn {
  flex: 1 1 calc(33% - 0.4rem);
  min-width: 90px;
}

.champ-quantite,
.champ-unite,
.champ-remarque {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid var(--light-border);
  border-radius: 4px;
  box-sizing: border-box;
}

.precision-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.precision-custom-input.d-none {
  display: none !important;
}

.carte-produit-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.btn-ingredient-info {
  border: 1px solid var(--admin-chip-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
}

.btn-ingredient-info:hover,
.btn-ingredient-info:focus {
  background: rgba(14, 165, 233, 0.2);
  border-color: rgba(14, 165, 233, 0.45);
  color: #ffffff;
}

.btn-ingredient-info:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.35);
}

.ingredient-details {
  margin-top: 0.6rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--admin-chip-border);
  border-radius: 0.85rem;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  font-size: 0.9rem;
  line-height: 1.45;
}

body.light-theme .ingredient-details {
  background-color: rgba(15, 23, 42, 0.05);
}

.categorie-titre {
  background: var(--dark-222);
  color: var(--text-color);
  padding: 0.5rem 1rem;
  cursor: pointer;
  margin-top: 1rem;
  border-radius: 5px;
}

.bloc-produits {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.3s ease, visibility 0.3s ease;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
  margin-top: -10px; /* chevauche légèrement le bouton */
  padding-top: 20px; /* pour éviter que le contenu ne touche vraiment le bouton */
}

.bloc-produits.visible {
  /* La hauteur réelle est définie via JavaScript pour s'adapter au contenu */
  visibility: visible;
}

.btn-categorie {
  display: block;
  width: 100%;
  background-color: var(--accent-dark);
  color: var(--text-color);
  font-size: 1.2rem;
  padding: 0.6rem 1rem;
  margin: 1rem auto 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

.btn-categorie:hover {
  background-color: var(--hover-color);
}

.btn-categorie .fleche {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.btn-categorie.ouvert .fleche {
  transform: translateY(-50%) rotate(45deg);
}


/* Section d'accueil avec image de stand en fond */
.accueil {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 6vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  --accueil-background-image: url('sources/images/stand.jpg');
  color: var(--hero-text-color);
  overflow: hidden;
  isolation: isolate;
}

.accueil::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 0;
}

.accueil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 35%, var(--hero-overlay-soft));
  z-index: 0;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-background-layer {
  position: absolute;
  inset: 0;
  background: var(--accueil-background-image) center/cover no-repeat;
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 1.4s ease-in-out, transform 20s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-background-layer.is-active {
  opacity: 1;
  transform: scale(1.02);
}

.accueil.hero-enter {
  opacity: 0;
  animation: heroFadeIn 900ms ease forwards;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.accueil-contenu {
  position: relative;
  z-index: 2;
  background: var(--hero-card-bg);
  border: 1px solid var(--hero-card-border);
  box-shadow: var(--hero-card-shadow);
  backdrop-filter: blur(18px);
  border-radius: 22px;
  padding: clamp(2rem, 4vw, 3.75rem);
  max-width: min(680px, 100%);
  text-align: center;
}

.accueil-contenu h1 {
  font-size: clamp(1.9rem, 3.3vw, 2.75rem);
  margin-bottom: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}

.accueil-contenu p {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.6;
  margin-bottom: 2rem;
  color: inherit;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--hero-badge-bg);
  color: var(--hero-badge-text);
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}

.hero-badge::before {
  content: "\f578";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

.btn-hero {
  padding: 0.9rem 2.4rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  border-radius: 999px;
  border: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--hero-cta-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: #fff;
}

.btn-hero:hover,
.btn-hero:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 26px 52px rgba(14, 165, 233, 0.35);
}

.btn-hero:focus-visible {
  outline: 3px solid rgba(14, 165, 233, 0.4);
  outline-offset: 4px;
}

.hero-actions .btn-hero + .btn-hero {
  margin-left: 0.5rem;
}

#contenu-principal.accueil-page {
  max-width: none;
  padding: 0;
  margin-top: 0;
  margin-left: 0 !important; /* Force la page d'accueil à être centrée */
  width: 100% !important; /* Force la largeur complète */
}

/* Règles pour l'état connecté uniquement */
@media (min-width: 992px) {
  body.connected #contenu-principal {
    max-width: none;
    width: calc(100% - 250px);
    margin-left: 250px;
  }
}

@media (max-width: 767px) {
  .hero-actions {
    justify-content: center;
    text-align: center;
  }

  .accueil-contenu {
    padding: clamp(1.75rem, 6vw, 2.5rem);
  }
}

body.connected .accueil {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .accueil.hero-enter {
    animation: none;
    opacity: 1;
  }

  .hero-background-layer {
    transition: none;
    transform: none;
  }

  .btn-hero {
    transition: none;
  }
}

/* Correction spécifique pour la page d'accueil connectée */
body.connected #contenu-principal.accueil-page {
  width: 100% !important;
  margin-left: 0 !important;
}

.actions button {
  margin: 1rem;
}

@media (max-width: 600px) {
  #liste-produits,
  .historique-table {
    display: block;
    overflow-x: auto;
    font-size: 0.9rem;
  }
  #form-ajout-produit {
    grid-template-columns: 1fr;
  }
  .ligne-quantite-unite {
    flex-direction: column;
  }
  .grille-produits {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .carte-produit {
    padding: 0.5rem;
    min-height: 140px;
  }
  .carte-produit h3 {
    font-size: 1rem;
  }
  .carte-produit p {
    font-size: 0.9rem;
  }
  .btn-details,
  .btn-panier-principal {
    padding: 0.4rem 0.75rem;
    font-size: 0.95rem;
  }
}


/* ===== Transitions de vues ===== */
#contenu-principal {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Ajustement du padding-top selon la taille d'écran */
@media (max-width: 991px) {
  #contenu-principal {
    padding-top: var(--topbar-height);
  }
}

@media (min-width: 992px) {
  #contenu-principal {
    padding-top: 0;
  }
}

.fade-out {
  opacity: 0;
}

/* ===== Toast notifications ===== */
#toast-container {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 1050;
}

.toast {
  background: var(--hover-color);
  color: var(--text-color);
  padding: 10px 15px;
  margin-top: 10px;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.success {
  background: #28a745;
}

.toast.error {
  background: #dc3545;
}

/* Mise en page centrée pour la connexion */
#contenu-principal.form-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 70px);
  text-align: center;
}

#contenu-principal.form-page h2 {
  text-align: center;
}

@keyframes flash-success {
  from { background-color: var(--success-bg); }
  to { background-color: transparent; }
}

body.commande-succes {
  animation: flash-success 0.4s ease;
}

.fly-dot {
  position: fixed;
  background: var(--primary-color);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  transition: left 0.6s ease, top 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}

.fly-card {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: left 0.6s ease, top 0.6s ease, transform 0.6s ease, opacity 0.6s ease;
}

/* Bouton contact flottant pour les utilisateurs non connectés */
#contact-mobile-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.85rem;
  z-index: 1050;
  }

#contact-mobile-btn:hover {
  background-color: var(--primary-hover);
}

/* ===== Fenêtre de connexion obligatoire ===== */
#staff-assignment-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1110;
}

#staff-assignment-overlay.show {
  opacity: 1;
}

#staff-assignment-overlay .staff-assignment {
  position: absolute;
  width: min(420px, calc(100% - 2rem));
  transform: scale(0.5);
  transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.35);
}

#staff-assignment-overlay .staff-assignment__title {
  margin-bottom: 0.25rem;
  text-align: center;
  color: var(--text-color);
}

#staff-assignment-overlay .staff-assignment__subtitle {
  margin-bottom: 1.25rem;
  text-align: center;
  color: var(--muted-text, rgba(148, 163, 184, 0.9));
  font-size: 0.95rem;
}

#staff-assignment-overlay .staff-assignment__suggestion {
  background-color: var(--accent-bg);
  color: var(--text-color);
  border-radius: 6px;
  cursor: pointer;
}

#staff-assignment-overlay .staff-assignment__suggestion:hover,
#staff-assignment-overlay .staff-assignment__suggestion:focus {
  background-color: var(--primary-color);
  color: var(--text-color);
}

#login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1100;
}

#login-overlay.show {
  opacity: 1;
}

#login-overlay .login-prompt {
  position: absolute;
  transform: scale(0.5);
  transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* ===== Fenêtre date manquante ===== */
#date-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1100;
}

#date-overlay.show {
  opacity: 1;
}

#date-overlay .date-prompt {
  position: absolute;
  transform: scale(0.5);
  transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Animation de chargement pour éviter les saccades */
.sidebar {
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Corrections pour les problèmes de z-index */
.sidebar {
  z-index: 1020 !important;
}

.sidebar-overlay {
  z-index: 1010 !important;
}

.header-mobile,
header.topbar {
  z-index: 1040 !important;
}
/* Corrections pour le thème sombre */
.light-theme #menu-toggle {
  color: #333 !important;
}

body:not(.light-theme) #menu-toggle {
  color: #fff !important;
}

/* Animation du bouton hamburger */
#menu-toggle {
  transition: transform 0.2s ease;
}

#menu-toggle:hover {
  transform: scale(1.1);
}

#menu-toggle:active {
  transform: scale(0.95);
}

/* ========================= */
/* Récapitulatif des commandes */
/* ========================= */

.recap-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.6);
  z-index: 4000;
}

.recap-modal {
  background: var(--surface-color);
  color: var(--text-color);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  width: min(960px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
}

.recap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.recap-header h3 {
  margin: 0;
  font-size: 1.45rem;
}

.recap-actions {
  display: flex;
  gap: 0.5rem;
}

.recap-actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font-size: 0.95rem;
  cursor: pointer;
  background: var(--primary-color);
  color: var(--text-color);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.recap-actions button.secondary {
  background: transparent;
  border: 1px solid var(--border-color);
}

.recap-actions button:hover {
  transform: translateY(-1px);
  background: var(--primary-hover);
}

.recap-actions button.secondary:hover {
  background: var(--accent-bg);
}

.recap-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.recap-section {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: var(--accent-bg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.recap-section h4 {
  margin: 0;
  font-size: 1.1rem;
}

.recap-section > p {
  margin: 0;
  color: var(--muted-text);
}

.recap-orders {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.recap-order-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.recap-order-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.recap-order-client {
  font-weight: 600;
  font-size: 1rem;
}

.recap-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--muted-text);
}

.recap-order-items {
  margin: 0;
  padding-left: 1.2rem;
}

.recap-order-items li {
  margin-bottom: 0.2rem;
}

.recap-summary {
  border-top: 1px dashed var(--border-color);
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.recap-summary h5 {
  margin: 0;
  font-size: 1rem;
}

.recap-summary-table {
  width: 100%;
  border-collapse: collapse;
}

.recap-summary-table th,
.recap-summary-table td {
  border: 1px solid var(--border-color);
  padding: 0.45rem 0.6rem;
  text-align: left;
  font-size: 0.95rem;
}

.recap-summary-table th {
  background: var(--accent-dark);
}

.recap-empty {
  text-align: center;
  color: var(--muted-text);
  padding: 2rem 1rem;
  font-size: 1rem;
}

@media (max-width: 767px) {
  .quick-add.quick-add-panier .btn {
    flex: 1 1 100%;
  }

  .recap-modal {
    padding: 1.25rem;
    max-height: 85vh;
  }

  .recap-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .recap-actions button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .recap-order-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .grille-produits {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .carte-produit {
    text-align: left;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .carte-produit h3 {
    font-size: 1.05rem;
  }

  .grille-panier {
    grid-template-columns: 1fr;
  }

  .carte-panier {
    max-width: none;
  }

  .barre-total-panier {
    position: static;
    margin-top: 1.5rem;
  }

  .actions-panier {
    gap: 0.75rem;
  }

  .filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filters .form-control,
  .filters button {
    width: 100%;
  }
}

@media print {
  body {
    background: #fff;
  }

  body > *:not(#recapitulatif-overlay) {
    display: none !important;
  }

  #recapitulatif-overlay {
    position: static;
    inset: auto;
    background: transparent;
    padding: 0;
    display: block !important;
  }

  #recapitulatif-overlay .recap-modal {
    width: 100%;
    max-height: none;
    box-shadow: none;
    padding: 0;
  }

  #recapitulatif-overlay .recap-actions {
    display: none !important;
  }

  #recapitulatif-overlay .recap-section {
    page-break-inside: avoid;
  }
}
.loader-timeout {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1100;
  transition: opacity 0.3s ease;
}

.loader-timeout.hidden {
  display: none;
}

.loader-timeout__dialog {
  background: var(--surface-color);
  color: var(--text-color);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  max-width: 420px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--border-color);
}

.loader-timeout__dialog p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

body.cookie-preferences-open {
  overflow: hidden;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface-color);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.25);
  padding: 1rem 1.5rem;
  z-index: 1050;
}

.cookie-banner.is-hidden {
  display: none;
}

.cookie-banner__content {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--text-color);
}

.cookie-banner__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cookie-banner__actions .btn {
  flex: none;
}

.cookie-preferences {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1200;
}

.cookie-preferences.is-hidden {
  display: none;
}

.cookie-preferences__dialog {
  background: var(--surface-color);
  color: var(--text-color);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.cookie-preferences__header,
.cookie-preferences__footer {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.cookie-preferences__footer {
  border-bottom: none;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.cookie-preferences__body {
  padding: 1rem 1.5rem 0.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cookie-preferences__category {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.cookie-preferences__category:last-child {
  border-bottom: none;
}

.cookie-preferences__category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.cookie-preferences__badge {
  font-size: 0.75rem;
  color: var(--muted-text);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.cookie-switch {
  position: relative;
  display: inline-flex;
  width: 46px;
  height: 24px;
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-switch__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border-color);
  transition: background 0.2s ease;
  border-radius: 999px;
}

.cookie-switch__slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: var(--surface-color);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
  transition: transform 0.2s ease;
}

.cookie-switch input:checked + .cookie-switch__slider {
  background: var(--primary-color);
}

.cookie-switch input:checked + .cookie-switch__slider::before {
  transform: translateX(22px);
}

.site-footer {
  margin-top: 3rem;
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--surface-color);
  color: var(--text-color);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  align-items: center;
}

.site-footer__links a,
.site-footer__links button {
  color: var(--text-color);
  font-size: 0.95rem;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.site-footer__links a:hover,
.site-footer__links button:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.site-footer__button {
  font-weight: 500;
}

@media (max-width: 768px) {
  .cookie-banner__content {
    text-align: center;
  }

  .cookie-banner__actions {
    justify-content: center;
  }

  .cookie-preferences__dialog {
    max-width: 100%;
  }

  .site-footer__links {
    flex-direction: column;
    gap: 0.75rem;
  }
}