/* =============================================
   THEME CLAIR (défaut)
   ============================================= */
:root {
  --clr-bg:           #f4f4f7;
  --clr-surface:      #ffffff;
  --clr-surface-2:    #ebebf0;
  --clr-border:       #d8d8e4;
  --clr-text:         #1a1a2e;
  --clr-text-muted:   #7070a0;
  --clr-accent:       #c62828;
  --clr-accent-hover: #b71c1c;
  --clr-danger:       #d32f2f;
  --clr-success:      #2e7d32;
  --clr-warning:      #e65100;

  /* Typographie */
  --font:      system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --leading:   1.6;

  /* Espacement */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* Radius */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 9999px;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .14);

  /* Layout */
  --nav-h:     60px;
  --sidebar-w: 220px;
  --topbar-h:  56px;
  --page-max:  1400px;

  /* Couleur allergène */
  --clr-allergen:        #7b1fa2;
  --clr-allergen-bg:     rgba(123,31,162,.1);
  --clr-allergen-border: rgba(123,31,162,.28);

  /* Couleurs des badges d'audit */
  --clr-audit-product:  #1565c0; --clr-audit-product-bg:  rgba(21,101,192,.1);
  --clr-audit-category: #e65100; --clr-audit-category-bg: rgba(230,81,0,.1);
  --clr-audit-member:   #c62828; --clr-audit-member-bg:   rgba(198,40,40,.1);
  --clr-audit-sale:     #2e7d32; --clr-audit-sale-bg:     rgba(46,125,50,.1);
  --clr-audit-stock:    #5c6bc0; --clr-audit-stock-bg:    rgba(100,100,180,.1);
  --clr-audit-location: #546e7a; --clr-audit-location-bg: rgba(69,90,100,.1);
  --clr-audit-account:  #f57f17; --clr-audit-account-bg:  rgba(245,127,23,.1);
  --clr-audit-settings: #00796b; --clr-audit-settings-bg: rgba(0,121,107,.1);

  /* Couleurs de rôle */
  --clr-role-super_admin-bg:   #f3e8ff; --clr-role-super_admin-text: #7c3aed;
  --clr-role-admin-bg:         #fee2e2; --clr-role-admin-text:        #b91c1c;
  --clr-role-moderator-bg:          #fff7ed; --clr-role-moderator-text:          #c2410c;
  --clr-role-moderateur_barman-bg:  #ecfeff; --clr-role-moderateur_barman-text:  #0e7490;
  --clr-role-barman-bg:             #eff6ff; --clr-role-barman-text:             #1d4ed8;
  --clr-role-client-bg:             #f0fdf4; --clr-role-client-text:             #15803d;
}

/* =============================================
   THEME SOMBRE
   ============================================= */
[data-theme="dark"] {
  --clr-bg:           #080810;
  --clr-surface:      #12121f;
  --clr-surface-2:    #1c1c2e;
  --clr-border:       #2a2a45;
  --clr-text:         #e2e2ef;
  --clr-text-muted:   #6b6b8f;
  --clr-accent:       #ef5350;
  --clr-accent-hover: #e53935;
  --clr-danger:       #e05252;
  --clr-success:      #4ade80;
  --clr-warning:      #f59e0b;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .6);

  /* Couleur allergène — dark */
  --clr-allergen:        #ce93d8;
  --clr-allergen-bg:     rgba(123,31,162,.22);
  --clr-allergen-border: rgba(206,147,216,.35);

  /* Couleurs des badges d'audit — dark */
  --clr-audit-product:  #90caf9; --clr-audit-product-bg:  rgba(21,101,192,.2);
  --clr-audit-category: #ffb74d; --clr-audit-category-bg: rgba(230,81,0,.2);
  --clr-audit-member:   #ef9a9a; --clr-audit-member-bg:   rgba(198,40,40,.2);
  --clr-audit-sale:     #a5d6a7; --clr-audit-sale-bg:     rgba(46,125,50,.2);
  --clr-audit-stock:    #9fa8da; --clr-audit-stock-bg:    rgba(100,100,180,.2);
  --clr-audit-location: #90a4ae; --clr-audit-location-bg: rgba(69,90,100,.2);
  --clr-audit-account:  #ffb74d; --clr-audit-account-bg:  rgba(245,127,23,.2);
  --clr-audit-settings: #4db6ac; --clr-audit-settings-bg: rgba(0,121,107,.2);

  --clr-role-super_admin-bg:   #3b0764; --clr-role-super_admin-text: #c084fc;
  --clr-role-admin-bg:         #450a0a; --clr-role-admin-text:        #fca5a5;
  --clr-role-moderator-bg:          #431407; --clr-role-moderator-text:          #fdba74;
  --clr-role-moderateur_barman-bg:  #164e63; --clr-role-moderateur_barman-text:  #67e8f9;
  --clr-role-barman-bg:             #1e3a5f; --clr-role-barman-text:             #93c5fd;
  --clr-role-client-bg:             #052e16; --clr-role-client-text:             #86efac;
}

/* =============================================
   RESET
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; }

/* Scrollbars masquées globalement */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--clr-text);
  background: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; background: transparent; border: none; outline: none; }

/* =============================================
   TYPOGRAPHIE
   ============================================= */
h1 { font-size: var(--text-3xl); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--text-2xl); font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--text-xl);  font-weight: 600; line-height: 1.4; }
h4 { font-size: var(--text-lg);  font-weight: 500; }
p  { line-height: var(--leading); }

/* =============================================
   UTILITAIRES
   ============================================= */

.flex        { display: flex; }
.grid        { display: grid; }
.hidden      { display: none !important; }
.block       { display: block; }
.inline-flex { display: inline-flex; }

.flex-col        { flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1          { flex: 1; }
.flex-shrink-0   { flex-shrink: 0; }
.gap-1  { gap: var(--sp-1); } .gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); } .gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); } .gap-8  { gap: var(--sp-8); }

.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); }
.ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .mx-auto { margin-inline: auto; }

.p-2  { padding: var(--sp-2); }  .p-3 { padding: var(--sp-3); }
.p-4  { padding: var(--sp-4); }  .p-6 { padding: var(--sp-6); }
.p-8  { padding: var(--sp-8); }
.px-3 { padding-inline: var(--sp-3); } .px-4 { padding-inline: var(--sp-4); }
.px-6 { padding-inline: var(--sp-6); }
.py-2 { padding-block: var(--sp-2); }  .py-3 { padding-block: var(--sp-3); }
.py-4 { padding-block: var(--sp-4); }  .py-6 { padding-block: var(--sp-6); }

.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-muted  { color: var(--clr-text-muted); }
.text-accent { color: var(--clr-accent); }
.text-danger { color: var(--clr-danger); }
.text-success{ color: var(--clr-success); }
.text-center { text-align: center; }
.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }

.w-full   { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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;
}

/* =============================================
   COMPOSANTS : Boutons
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background .15s, opacity .15s, transform .1s;
  white-space: nowrap;
}
.btn:active   { transform: scale(.98); }
.btn:disabled { opacity: .45; pointer-events: none; }

.btn-primary   { background: var(--clr-accent); color: #fff; }
.btn-primary:hover { background: var(--clr-accent-hover); }

.btn-secondary { background: var(--clr-surface-2); color: var(--clr-text); border: 1px solid var(--clr-border); }
.btn-secondary:hover { background: var(--clr-border); }

.btn-ghost     { background: transparent; color: var(--clr-text-muted); border: 1px solid var(--clr-border); }
.btn-ghost:hover { color: var(--clr-text); border-color: var(--clr-text-muted); }

.btn-danger    { background: var(--clr-danger); color: #fff; }
.btn-danger:hover { opacity: .85; }

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: var(--clr-surface-2);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
}
.btn-google:hover { background: var(--clr-border); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--clr-text-muted);
  font-size: var(--text-sm);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--clr-border);
}

.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--sp-4) var(--sp-8); font-size: var(--text-base); }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  color: var(--clr-text-muted);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--clr-surface-2); color: var(--clr-text); }

/* =============================================
   COMPOSANTS : Formulaires
   ============================================= */
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-label { font-size: var(--text-sm); font-weight: 500; color: var(--clr-text-muted); }
.form-row-inline { display: flex; gap: var(--sp-2); align-items: stretch; }
.form-row-inline .form-input { flex: 1; min-width: 0; }
.form-row-inline .emoji-picker { display: flex; }

.form-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  font-size: var(--text-base);
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, .15);
  outline: none;
}
[data-theme="dark"] .form-input:focus {
  box-shadow: 0 0 0 3px rgba(239, 83, 80, .2);
}
.form-input::placeholder { color: var(--clr-text-muted); }
.form-input.is-error     { border-color: var(--clr-danger); }
.form-input--sm { padding: var(--sp-2) var(--sp-3); font-size: 16px; }
@media (min-width: 1024px) {
  .form-input--sm { font-size: var(--text-xs); }
}

.form-error { font-size: var(--text-xs); color: var(--clr-danger); }
.form-hint  { font-size: var(--text-xs); color: var(--clr-text-muted); }

/* =============================================
   COMPOSANTS : Cards
   ============================================= */
.card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; }
.card-header {
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--clr-border);
  font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.card-body   { padding: var(--sp-6); }
.card-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--clr-border);
  display: flex; gap: var(--sp-3); justify-content: flex-end;
}

/* =============================================
   COMPOSANTS : Badges
   ============================================= */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--sp-2);
  font-size: var(--text-xs); font-weight: 600;
  border-radius: var(--radius-sm); letter-spacing: .03em;
}
.badge-success { background: rgba(46,125,50,.12);  color: var(--clr-success); }
.badge-danger  { background: rgba(211,47,47,.12);  color: var(--clr-danger); }
.badge-warning { background: rgba(230,81,0,.12);   color: var(--clr-warning); }
.badge-neutral { background: var(--clr-surface-2); color: var(--clr-text-muted); }
.badge-accent  { background: rgba(198,40,40,.1);   color: var(--clr-accent); }

[data-theme="dark"] .badge-success { background: rgba(74,222,128,.12); }
[data-theme="dark"] .badge-danger  { background: rgba(224,82,82,.12); }
[data-theme="dark"] .badge-warning { background: rgba(245,158,11,.12); }
[data-theme="dark"] .badge-accent  { background: rgba(239,83,80,.12); }

/* =============================================
   COMPOSANTS : Modales
   ============================================= */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: var(--sp-4);
}
[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, .7); }

.modal {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 480px;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--clr-border);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: var(--text-lg);
}
.modal-body   { padding: var(--sp-6); }
.modal-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--clr-border);
  display: flex; gap: var(--sp-3); justify-content: flex-end;
}

/* =============================================
   COMPOSANTS : Toasts
   ============================================= */
.toast-stack {
  position: fixed; top: var(--sp-4); right: var(--sp-4);
  z-index: 2000;
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: min(380px, calc(100vw - var(--sp-8)));
  pointer-events: none;
}
.toast {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  pointer-events: auto;
  position: relative; overflow: hidden;
}
.toast__icon { font-size: 1rem; flex-shrink: 0; line-height: 1; }
.toast--success .toast__icon { color: var(--clr-success); }
.toast--danger  .toast__icon { color: var(--clr-danger); }
.toast--warning .toast__icon { color: var(--clr-warning); }
.toast--info    .toast__icon { color: var(--clr-accent); }
.toast__msg  { flex: 1; font-size: var(--text-sm); line-height: 1.4; }
.toast__bar {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 100%;
  animation: toast-shrink 4s linear forwards;
}
.toast--success .toast__bar { background: var(--clr-success); }
.toast--danger  .toast__bar { background: var(--clr-danger); }
.toast--warning .toast__bar { background: var(--clr-warning); }
.toast--info    .toast__bar { background: var(--clr-accent); }
@keyframes toast-shrink { from { width: 100%; } to { width: 0%; } }

/* =============================================
   COMPOSANTS : Divers
   ============================================= */
.divider { border: none; border-top: 1px solid var(--clr-border); margin-block: var(--sp-6); }

/* =============================================
   COMPOSANTS : Auth (login / register)
   ============================================= */
.auth-body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--clr-bg);
}
@media (display-mode: standalone) {
  .auth-body {
    height: 100lvh;
    min-height: unset;
    overflow: hidden;
  }
  .auth-top-bar {
    padding-top: calc(var(--sp-4) + env(safe-area-inset-top));
  }
  .auth-main {
    overflow-y: auto;
    padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom));
  }
}

.auth-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--clr-border);
}

.auth-logo {
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: .06em;
}

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-4);
}

.auth-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-md);
}

.auth-card-header { margin-bottom: var(--sp-6); }
.auth-title       { font-size: var(--text-2xl); font-weight: 700; }
.auth-subtitle    { margin-top: var(--sp-1); font-size: var(--text-sm); }

.auth-remember { color: var(--clr-text-muted); }
.auth-remember input[type="checkbox"] { accent-color: var(--clr-accent); }

.auth-card-footer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--clr-border);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
}

.alert {
  padding: var(--sp-4); border-radius: var(--radius-sm);
  border-left: 3px solid; font-size: var(--text-sm);
}
.alert-danger  { background: rgba(211,47,47,.08);  border-color: var(--clr-danger);  color: var(--clr-danger); }
.alert-success { background: rgba(46,125,50,.08);  border-color: var(--clr-success); color: var(--clr-success); }
.alert-warning { background: rgba(230,81,0,.08);   border-color: var(--clr-warning); color: var(--clr-warning); }

[data-theme="dark"] .alert-danger  { background: rgba(224,82,82,.1); }
[data-theme="dark"] .alert-success { background: rgba(74,222,128,.1); }
[data-theme="dark"] .alert-warning { background: rgba(245,158,11,.1); }

/* 16px minimum sur tous les champs — empêche le zoom automatique d'iOS Safari */
input, select, textarea { font-size: 1rem; }

/* ── CGU / Mentions légales ───────────────────────────────────────── */
.cgu-page {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-6) 0 var(--sp-10);
}
.cgu-title {
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.cgu-updated {
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  margin-top: calc(-1 * var(--sp-6));
}
.cgu-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--clr-border);
}
.cgu-section h2 { font-size: var(--text-lg); font-weight: 700; }
.cgu-section p,
.cgu-section li { font-size: var(--text-sm); line-height: 1.75; color: var(--clr-text); }
.cgu-section ul {
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
}
.cgu-placeholder {
  background: var(--clr-surface-2);
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 1px var(--sp-2);
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
}