/* ============================================================
   brasserie.css — Design system craft brasserie (STORY-28)
   Surcharge Bootstrap 5, ne le remplace pas.
   ============================================================ */

/* ── Variables ──────────────────────────────────────────── */
:root {
  --color-background:           #faf8f5;
  --color-foreground:           #1c1a18;
  --color-card:                 #ffffff;
  --color-card-foreground:      #1c1a18;
  --color-primary:              #cf7010;
  --color-primary-foreground:   #ffffff;
  --color-primary-hover:        #b85f0b;
  --color-secondary:            #ede9e4;
  --color-secondary-foreground: #3d3730;
  --color-muted:                #f2f0ed;
  --color-muted-foreground:     #7a756f;
  --color-border:               #ddd8d1;
  --color-input:                #ddd8d1;
  --color-ring:                 #cf7010;
  --color-destructive:          #dc2626;

  /* Sidebar */
  --sidebar-bg:           #ffffff;
  --sidebar-border:       #ece7e1;
  --sidebar-text:         #706860;
  --sidebar-text-hover:   #2a2520;
  --sidebar-hover-bg:     #f5f3f0;
  --sidebar-active-bg:    #fff8f0;
  --sidebar-active-text:  #92400e;
  --sidebar-active-icon:  #d97706;
  --sidebar-logo-from:    #f59e0b;
  --sidebar-logo-to:      #b45309;
  --sidebar-title:        #231f1b;
  --sidebar-subtitle:     #7a7570;
  --sidebar-tip-from:     #fffbeb;
  --sidebar-tip-to:       #fff7ed;

  /* Statuts sémantiques */
  --color-success-bg:     #f0fdf4;
  --color-success-text:   #065f46;
  --color-success-border: #a7f3d0;
  --color-warning-bg:     #fffbeb;
  --color-warning-text:   #92400e;
  --color-warning-border: #fde68a;
  --color-danger-bg:      #fef2f2;
  --color-danger-text:    #b91c1c;
  --color-danger-border:  #fecaca;
  --color-expire-bg:      #fff7ed;
  --color-expire-text:    #c2410c;
  --color-expire-border:  #fed7aa;
  --color-neutral-bg:     #f8fafc;
  --color-neutral-text:   #475569;
  --color-neutral-border: #e2e8f0;

  /* Icônes stat cards */
  --stat-recipes: #f59e0b;
  --stat-malts:   #ca8a04;
  --stat-hops:    #16a34a;
  --stat-yeasts:  #a855f7;
  --stat-bottles: #f43f5e;

  /* Fonds lignes ingrédients */
  --row-malt:  rgba(254,249,195,.5);
  --row-hop:   rgba(240,253,244,.5);
  --row-yeast: rgba(250,245,255,.5);
  --row-mash:  rgba(255,247,237,.5);
  --row-done:  rgba(240,253,244,.5);

  /* Statuts sessions */
  --status-planned-bg:   #f1f5f9; --status-planned-text:   #334155;
  --status-inprog-bg:    #dbeafe; --status-inprog-text:    #1d4ed8;
  --status-ferment-bg:   #f3e8ff; --status-ferment-text:   #7e22ce;
  --status-bottle-bg:    #fef3c7; --status-bottle-text:    #92400e;
  --status-done-bg:      #d1fae5; --status-done-text:      #065f46;

  /* Rayons */
  --radius-sm:   0.5rem;
  --radius-md:   0.625rem;
  --radius-lg:   0.75rem;
  --radius-xl:   0.875rem;
  --radius-full: 9999px;

  /* Espacements */
  --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;

  /* Ombres */
  --shadow-card:       0 1px 3px 0 rgba(0,0,0,.04), 0 1px 2px -1px rgba(0,0,0,.04);
  --shadow-card-hover: 0 4px 12px 0 rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.05);
  --shadow-md:         0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);

  /* Transitions */
  --t-fast:   150ms ease;
  --t-normal: 200ms ease;
  --t-layout: 300ms ease;

  /* Compat anciennes variables (pour les templates qui les utilisent encore en inline) */
  --brew-amber:        #cf7010;
  --brew-amber-light:  #e07a1a;
  --brew-amber-pale:   #fff8f0;
  --brew-amber-bg:     #fff8e8;
  --brew-brown:        #1c1a18;
  --brew-brown-mid:    #3d3730;
  --brew-muted:        #7a756f;
  --brew-cream:        #faf8f5;
  --brew-cream-warm:   #fff8f0;
  --brew-border:       #ddd8d1;
  --brew-border-light: #ece7e1;
  --brew-success:      #065f46;
  --brew-danger:       #b91c1c;
  --brew-warning:      #92400e;
}

/* ── Body & fond ─────────────────────────────────────────── */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--color-background);
  color: var(--color-foreground);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
}

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

/* Sidebar */
.brew-sidebar {
  width: 256px;
  height: 100vh;
  position: sticky;
  top: 0;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 40;
  transition: transform var(--t-layout);
}

/* Contenu principal */
.brew-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.brew-main > main {
  flex: 1;
  padding: var(--sp-4);
  max-width: 80rem;
  width: 100%;
  margin-inline: auto;
}
@media (min-width: 768px)  { .brew-main > main { padding: var(--sp-6); } }
@media (min-width: 1024px) { .brew-main > main { padding: var(--sp-8); } }

/* Mobile */
@media (max-width: 1023px) {
  .brew-sidebar {
    position: fixed;
    left: 0; top: 0;
    transform: translateX(-100%);
    box-shadow: var(--shadow-md);
  }
  .brew-sidebar.is-open { transform: translateX(0); }
  .brew-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.30);
    z-index: 39;
  }
  .brew-overlay.is-open { display: block; }
}
@media (min-width: 1024px) {
  .brew-overlay { display: none !important; }
}

/* ── Sidebar : contenu ──────────────────────────────────── */

/* Logo */
.sidebar-logo-box {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--sidebar-logo-from), var(--sidebar-logo-to));
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.sidebar-app-name {
  font-size: 1.125rem; font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--sidebar-title);
}
.sidebar-app-sub {
  font-size: 0.75rem;
  color: var(--sidebar-subtitle);
}

/* Section label */
.sidebar-section-label {
  font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-muted-foreground);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
}

/* Items nav */
.nav-item {
  display: flex; align-items: center;
  gap: var(--sp-3);
  padding: 0.625rem var(--sp-3);
  border-radius: var(--radius-lg);
  font-size: 0.875rem; font-weight: 500;
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background var(--t-normal), color var(--t-normal);
}
.nav-item:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text-hover);
}
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.nav-item.active .nav-icon { color: var(--sidebar-active-icon); }
.nav-item .nav-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

/* Tip en bas de sidebar */
.sidebar-tip {
  background: linear-gradient(135deg, var(--sidebar-tip-from), var(--sidebar-tip-to));
  border-radius: var(--radius-xl);
  padding: var(--sp-4);
  margin: var(--sp-4);
}
.sidebar-tip-title { font-size: 0.75rem; font-weight: 600; color: #92400e; }
.sidebar-tip-body  { font-size: 0.75rem; color: #d97706; margin-top: 0.25rem; }

/* ── Header mobile ──────────────────────────────────────── */
.mobile-header {
  display: flex; align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sidebar-border);
  position: sticky; top: 0; z-index: 30;
}
@media (min-width: 1024px) { .mobile-header { display: none; } }

/* ── Cards ───────────────────────────────────────────────── */
.brew-card {
  background: var(--color-card);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-normal);
  overflow: hidden;
}
.brew-card:hover { box-shadow: var(--shadow-card-hover); }

.brew-card-header {
  padding: var(--sp-5);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem; font-weight: 600;
  display: flex; align-items: center; gap: var(--sp-2);
}
.brew-card-header .card-icon { width: 1rem; height: 1rem; color: #f59e0b; }

.brew-card-body { padding: var(--sp-5); }
.brew-card-body--lg { padding: var(--sp-6); }

/* ── Stat cards (dashboard) ──────────────────────────────── */
.stat-card {
  background: var(--color-card);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  cursor: pointer;
  transition: box-shadow var(--t-normal);
  text-decoration: none;
  display: block;
  color: inherit;
}
.stat-card:hover { box-shadow: var(--shadow-card-hover); }

.stat-card-label {
  font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-muted-foreground);
}
.stat-card-value {
  font-size: 1.5rem; font-weight: 700;
  color: var(--color-foreground);
  margin-top: 0.25rem;
}
.stat-card-unit {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  margin-top: 0.125rem;
}
.stat-card-icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--t-normal);
}
.stat-card:hover .stat-card-icon { transform: scale(1.1); }
.stat-card-icon i, .stat-card-icon svg { color: #fff; font-size: 1.1rem; }

/* Ancien stat-card compat */
.stat-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-muted);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 1.4rem; flex-shrink: 0;
}
.stat-value {
  font-size: 1.75rem; font-weight: 700; line-height: 1;
  color: var(--color-foreground);
}
.stat-label {
  font-size: .82rem; color: var(--color-muted-foreground); margin-top: .15rem;
}

/* ── Boutons ─────────────────────────────────────────────── */
.btn-brew {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  cursor: pointer; border: none;
  transition: background var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
}
.btn-brew-primary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border: none;
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.btn-brew-primary:hover,
.btn-brew-primary:focus { background: var(--color-primary-hover); color: var(--color-primary-foreground); }

.btn-brew-outline {
  background: transparent;
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.btn-brew-outline:hover,
.btn-brew-outline:focus { background: var(--color-muted); color: var(--color-foreground); }

.btn-brew-ghost {
  background: transparent;
  color: var(--color-muted-foreground);
  border: none;
  border-radius: var(--radius-md);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.btn-brew-ghost:hover,
.btn-brew-ghost:focus {
  background: var(--color-muted);
  color: var(--color-foreground);
}
.btn-brew-ghost.danger { color: #ef4444; }
.btn-brew-ghost.danger:hover { background: var(--color-danger-bg); }

.btn-brew-success {
  background: #16a34a; color: #fff;
  border: none; border-radius: var(--radius-md);
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500;
  cursor: pointer; transition: background var(--t-fast);
  text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2);
}
.btn-brew-success:hover { background: #15803d; }

.btn-brew-destructive {
  background: var(--color-destructive); color: #fff;
  border: none; border-radius: var(--radius-md);
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500;
  cursor: pointer; transition: background var(--t-fast);
  text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2);
}
.btn-brew-destructive:hover { background: #b91c1c; }

/* Alias danger */
.btn-brew-danger {
  background: transparent;
  color: var(--color-destructive);
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--t-fast);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.btn-brew-danger:hover,
.btn-brew-danger:focus {
  background: var(--color-danger-bg);
  color: var(--color-destructive);
}

/* Large */
.btn-brew-lg { padding: 0.625rem 1.25rem; font-size: 1rem; }
/* Min touch target mobile */
@media (max-width: 767px) { .btn-brew { min-height: 44px; }
  .btn-brew-primary, .btn-brew-outline, .btn-brew-ghost, .btn-brew-danger { min-height: 44px; }
}

/* ── Formulaires ─────────────────────────────────────────── */
.brew-label {
  display: block;
  font-size: 0.875rem; font-weight: 500;
  color: var(--color-foreground);
  margin-bottom: 0.25rem;
}
.brew-label-xs {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}
.brew-input {
  width: 100%;
  background: var(--color-card);
  border: 1px solid var(--color-input);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-foreground);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.brew-input:focus {
  border-color: var(--color-ring);
  box-shadow: 0 0 0 2px rgba(207,112,16,.20);
}
.brew-input::placeholder { color: var(--color-muted-foreground); }

/* Évite le zoom iOS */
@media (max-width: 767px) { .brew-input { font-size: 1rem; } }

/* Search input */
.brew-input-search { padding-left: 2.25rem; }
.brew-search-wrapper { position: relative; }
.brew-search-icon {
  position: absolute; left: 0.75rem; top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted-foreground);
  pointer-events: none;
}

/* ── Tables ──────────────────────────────────────────────── */
.brew-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.brew-table thead th {
  font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-muted-foreground);
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.brew-table tbody td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.brew-table tbody tr:last-child td { border-bottom: none; }
.brew-table tbody tr:hover { background: var(--color-muted); }

/* ── Badges ──────────────────────────────────────────────── */
.brew-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem; font-weight: 500;
  white-space: nowrap; border: 1px solid transparent;
}
.brew-badge-success { background:var(--color-success-bg); color:var(--color-success-text); border-color:var(--color-success-border); }
.brew-badge-warning { background:var(--color-warning-bg); color:var(--color-warning-text); border-color:var(--color-warning-border); }
.brew-badge-danger  { background:var(--color-danger-bg);  color:var(--color-danger-text);  border-color:var(--color-danger-border);  }
.brew-badge-expire  { background:var(--color-expire-bg);  color:var(--color-expire-text);  border-color:var(--color-expire-border);  }
.brew-badge-neutral { background:var(--color-neutral-bg); color:var(--color-neutral-text); border-color:var(--color-neutral-border); }
.brew-badge-muted   { background:var(--color-secondary);  color:var(--color-secondary-foreground); }

/* Statuts sessions */
.brew-badge-planned  { background:var(--status-planned-bg);  color:var(--status-planned-text);  }
.brew-badge-inprog   { background:var(--status-inprog-bg);   color:var(--status-inprog-text);   }
.brew-badge-ferment  { background:var(--status-ferment-bg);  color:var(--status-ferment-text);  }
.brew-badge-bottling { background:var(--status-bottle-bg);   color:var(--status-bottle-text);   }
.brew-badge-done     { background:var(--status-done-bg);     color:var(--status-done-text);     }

/* Tags ingrédients */
.brew-badge-hop  { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.brew-badge-malt { background:#fefce8; color:#a16207; border-color:#fef08a; }

/* Anciens badges (compat) */
.badge-amber, .badge-brown, .badge-green, .badge-red, .badge-orange {
  font-size: .75rem; padding: .2rem .6rem; border-radius: 20px;
  font-weight: 500; white-space: nowrap; display: inline-block;
}
.badge-amber  { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.badge-brown  { background: var(--color-secondary);  color: var(--color-secondary-foreground); border: 1px solid var(--color-border); }
.badge-green  { background: var(--color-success-bg); color: var(--color-success-text);  border: 1px solid var(--color-success-border); }
.badge-red    { background: var(--color-danger-bg);  color: var(--color-danger-text);   border: 1px solid var(--color-danger-border); }
.badge-orange { background: var(--color-expire-bg);  color: var(--color-expire-text);   border: 1px solid var(--color-expire-border); }

/* ── Lignes ingrédients colorées ─────────────────────────── */
.ingredient-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.625rem var(--sp-3);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  transition: background var(--t-fast);
}
.ingredient-row--malt  { background: var(--row-malt);  }
.ingredient-row--hop   { background: var(--row-hop);   }
.ingredient-row--yeast { background: var(--row-yeast); }
.ingredient-row--mash  { background: var(--row-mash);  }
.ingredient-row--done  {
  background: var(--row-done);
  text-decoration: line-through;
  color: var(--color-muted-foreground);
}

/* ── Empty state ─────────────────────────────────────────── */
.brew-empty {
  text-align: center;
  padding: 4rem 0;
  color: var(--color-muted-foreground);
  font-size: 0.875rem;
}
.brew-empty-icon {
  width: 3rem; height: 3rem;
  opacity: .30;
  margin: 0 auto var(--sp-3);
}

/* ── Alertes ─────────────────────────────────────────────── */
.brew-alert {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid;
  margin-bottom: .75rem;
}
.brew-alert-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}
.brew-alert-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

/* Flash messages Bootstrap overrides */
.alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); }
.alert-danger  { background: var(--color-danger-bg);  border-color: var(--color-danger-border);  color: var(--color-danger-text);  }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc4ba; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ── Grilles responsive ──────────────────────────────────── */
/* Stat cards : 2 col mobile, 5 col desktop */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 1024px) { .grid-stats { grid-template-columns: repeat(5, 1fr); } }

/* 2 colonnes */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* 3 colonnes */
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 768px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* 4 colonnes compat */
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ── Page header (compat ancien style) ───────────────────── */
.brew-page-header {
  margin-bottom: 1.5rem;
}
.brew-page-header h1 {
  font-size: 1.5rem; font-weight: 700;
  color: var(--color-foreground);
  margin-bottom: .25rem;
}
.brew-page-header .breadcrumb-item a {
  color: var(--color-primary);
  text-decoration: none;
}
.brew-page-header .breadcrumb-item a:hover { text-decoration: underline; }

/* Markdown body */
.markdown-body { line-height: 1.7; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 1rem; font-weight: 600; }
.markdown-body p { margin-bottom: .75rem; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5rem; margin-bottom: .75rem; }
.markdown-body code {
  background: var(--color-muted); padding: .1rem .3rem;
  border-radius: var(--radius-sm); font-size: .85em;
}

/* ── Toast UI Editor — thème brew ────────────────────────────────────────── */
.toastui-editor-defaultUI {
  border: 1px solid var(--brew-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}
.toastui-editor-toolbar {
  background: var(--brew-cream) !important;
  border-bottom: 1px solid var(--brew-border) !important;
}
.toastui-editor-toolbar-icons {
  border: none !important;
}
.toastui-editor-toolbar-icons:hover,
.toastui-editor-toolbar-icons.active {
  background: var(--brew-amber-bg) !important;
  color: var(--brew-amber) !important;
}
.toastui-editor-contents {
  font-family: inherit !important;
  font-size: .95rem !important;
  color: var(--color-foreground) !important;
}
.toastui-editor-ww-container,
.toastui-editor-md-container {
  background: var(--color-card) !important;
}
.toastui-editor-defaultUI .ProseMirror {
  padding: 1rem !important;
}

/* ── STORY-35 : Catalogue houblons ──────────────────────────────────────── */
.hops-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.filter-pills  { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  padding: 4px 14px; border-radius: 20px; border: 1px solid var(--color-border);
  background: none; color: var(--color-muted-foreground); font-size: 13px;
  cursor: pointer; transition: all .15s;
}
.pill:hover { color: var(--color-foreground); }
.pill.active { color: var(--color-card); font-weight: 700; border-color: transparent; background: var(--brew-amber); }
.hops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.hop-card {
  display: block; text-decoration: none;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 20px; transition: all .2s;
  color: var(--color-foreground);
}
.hop-card:hover {
  border-color: var(--brew-amber); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  color: var(--color-foreground);
}
.hop-name { font-size: 18px; font-weight: 600; margin-top: 10px; }
.hop-meta { font-size: 13px; color: var(--color-muted-foreground); }
.type-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  letter-spacing: .5px; text-transform: uppercase;
}

/* ── STORY-36 : Fiche détaillée houblon ─────────────────────────────────── */
.hop-detail-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  align-items: start;
}
.hop-detail-left  { position: sticky; top: 80px; text-align: center; }
.hop-detail-right { min-width: 0; }

.hop-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 768px) {
  .hop-detail-layout { grid-template-columns: 1fr; }
  .hop-detail-left   { position: static; }
  .hop-cards-grid    { grid-template-columns: 1fr; }
}

/* ── Surveillance ────────────────────────────────────────────────────────── */
.surveillance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 768px) {
  .surveillance-grid { grid-template-columns: 1fr; }
}
.surveillance-grid .brew-card-body {
  height: 300px;
  position: relative;
}
.chart-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.chart-wrapper canvas {
  position: absolute;
  inset: 0;
}
.chart-select-overlay {
  position: absolute;
  inset: 0;
  cursor: col-resize;
  z-index: 10;
}
.chart-select-region {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  background: rgba(207, 112, 16, 0.18);
  border: 1px solid var(--brew-amber);
  pointer-events: none;
}
.time-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}
#date-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
#date-picker-row.hidden { display: none; }