/* ═══════════════════════════════════════════════════════════════════════════
   Design tokens — all hardcoded values should reference these variables
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Colors */
  --clr-blue:          #3b82f6;
  --clr-blue-dark:     #2563eb;
  --clr-blue-deeper:   #1d4ed8;
  --clr-green:         #059669;
  --clr-gray-tool:     #4b5563;
  --clr-gray-settings: #6b7280;
  --clr-red:           #dc2626;
  --clr-red-dark:      #b91c1c;
  --clr-amber:         #f59e0b;
  --clr-amber-bg:      #fef3c7;
  --clr-amber-border:  #fcd34d;
  --clr-amber-text:    #92400e;
  --clr-text:          #374151;
  --clr-muted:         #6b7280;
  --clr-subtle:        #9ca3af;
  --clr-border:        #e2e8f0;
  --clr-border-input:  #d1d5db;
  --clr-surface:       #f8fafc;
  --clr-surface-alt:   #f1f5f9;

  /* Spacing */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 2px 6px rgba(0,0,0,.07);
  --shadow-lg: 0 4px 18px rgba(60,60,130,.09);
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f4f8;
    color: #333;
}

h1, h2 {
    text-align: center;
}

form {
    margin-bottom: 20px;
}

button {
    border: none;
    cursor: pointer;
}

table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}


/* Mise en page globale */
.container {
  max-width: 1400px;
  margin: 20px auto;
  background: transparent;
  padding: 20px 32px;
  border-radius: 0;
  box-shadow: none;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 7px 20px;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: #4b5563;
  text-decoration: none;
  display: inline;
  margin: 0;
  font-weight: normal;
}
.breadcrumb a:hover { color: #1d4ed8; text-decoration: underline; }
.breadcrumb-sep { color: #9ca3af; }
.breadcrumb span:not(.breadcrumb-sep) { color: #111; font-weight: 500; }

/* ── Flash messages ─────────────────────────────────────────────────────── */
.flash-success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  border-radius: 6px;
  padding: 10px 16px;
  margin: 10px 0;
  font-size: 0.92em;
}
.flash-error {
  background: #fde8e8;
  color: #c0392b;
  border: 1px solid #f5a5a5;
  border-radius: 6px;
  padding: 10px 16px;
  margin: 10px 0;
  font-size: 0.92em;
}
.flash-info {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 10px 16px;
  margin: 10px 0;
  font-size: 0.92em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Utility classes — apply these instead of repeating inline styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Text */
.text-muted  { color: var(--clr-muted); }
.text-subtle { color: var(--clr-subtle); }
.text-text   { color: var(--clr-text); }

/* Info/status boxes */
.box-info {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.box-warning {
  background: var(--clr-amber-bg);
  border: 1px solid var(--clr-amber-border);
  border-radius: var(--radius-xl);
  padding: 14px 20px;
  color: var(--clr-amber-text);
}
.box-empty {
  background: #f9fafb;
  border: 1px dashed var(--clr-border-input);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  color: var(--clr-subtle);
}

/* Typography */
.section-title {
  font-weight: 700;
  font-size: 0.88em;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--clr-muted);
  margin-bottom: 14px;
}

/* Form primitives */
.form-label {
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--clr-text);
}
.form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--clr-border-input);
  border-radius: var(--radius-md);
  font-size: 0.92em;
  font-family: inherit;
}

/* ── Global toast notifications ── */
.g-toast{padding:10px 16px;border-radius:8px;font-size:0.88em;font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,0.12);pointer-events:auto;max-width:320px;
  animation:_gtin .18s ease;transition:opacity .3s,transform .3s;}
.g-toast.out{opacity:0;transform:translateY(8px);}
.g-toast-s{background:#f0fdf4;color:#15803d;border:1px solid #86efac;}
.g-toast-e{background:#fef2f2;color:#dc2626;border:1px solid #fca5a5;}
.g-toast-i{background:#eff6ff;color:#1d4ed8;border:1px solid #93c5fd;}
.g-toast-w{background:#fffbeb;color:#92400e;border:1px solid #fcd34d;}
@keyframes _gtin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width: 767px) {
  body { overflow-x: hidden; }
  .container { padding: 12px; margin: 0; border-radius: 0; box-shadow: none; }
  h1 { font-size: 1.3em; }
}