/* ═══════════════════════════════════════════════════════════════
   design.css — Frost Design System v2
   Palette light #F8F7F4 · dark #0F1117
   Typographie : Inter 800/600/400 · Boutons pill · Ombres douces
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800;14..32,900&display=swap');

/* ── Variables globales ─────────────────────────────────────── */
:root {
  --font-head: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Inter', system-ui, sans-serif;
  --radius:    14px;
  --radius-sm: 10px;
  --radius-xl: 20px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.04);
  --shadow-md: 0 4px 8px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.09), 0 4px 12px rgba(0,0,0,.05);
}

/* ── Typographie ────────────────────────────────────────────── */
body, input, select, textarea, button {
  font-family: 'Inter', system-ui, sans-serif !important;
}

h1, h2, h3, h4,
header h1,
.card-title,
.section-title,
.capture-title,
.bib-section-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
}

label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.8rem !important;
}

/* ── Boutons pill ────────────────────────────────────────────── */
.btn {
  border-radius: 999px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 24px !important;
  font-size: 0.85rem !important;
  transition: all .18s ease !important;
}
.btn-primary      { box-shadow: var(--shadow-xs) !important; }
.btn-primary:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-1px) !important; }
.btn-outline       { border-radius: 999px !important; border-width: 1.5px !important; }
.btn-outline:hover { transform: translateY(-1px) !important; box-shadow: var(--shadow-xs) !important; }
.btn-danger        { border-radius: 999px !important; }
.btn-gold          { border-radius: 999px !important; }
.btn-xs            { border-radius: 999px !important; padding: 4px 12px !important; font-weight: 600 !important; }
.btn-weather       { border-radius: 999px !important; font-weight: 700 !important; transition: all .18s ease !important; }
.btn-weather:hover { transform: translateY(-1px) !important; }

/* Icônes circulaires */
button.bib-edit-btn,
button.bib-dup-btn,
button.cap-preset-edit-btn,
button.photo-remove-btn,
.tab-close,
button[title*="catalogue"],
button[title*="Modifier"],
button[title*="Chercher"],
button[onclick*="_catInlineToggle"],
button[onclick*="_meppsInlineToggle"],
button[onclick*="removeCapture"],
button[onclick*="toggleCollapse"] {
  border-radius: 50% !important;
}

/* ── Inputs & selects ─────────────────────────────────────────*/
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="search"],
select,
textarea {
  border-radius: var(--radius-sm) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.85rem !important;
  border-width: 1.5px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent,#2e8048) 20%, transparent) !important;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .22s ease, transform .22s ease !important;
}
.card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

.stat-box,
.kpi-box,
.hourly-wrap,
.auto-meteo-bar {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xs) !important;
}

/* Captures */
.capture-card {
  border-radius: var(--radius-xl) !important;
  border-left-width: 4px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .2s !important;
}
.capture-card:hover {
  box-shadow: var(--shadow-md) !important;
}

/* Bibliothèque */
.bib-section {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
}
.cat-wrap {
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-xs) !important;
}

/* ── Onglets ─────────────────────────────────────────────── */
.tab {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.82rem !important;
  border-radius: 10px 10px 0 0 !important;
}

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  border-radius: 14px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  border-left-width: 4px !important;
  padding: 14px 20px !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── Badges & pills ──────────────────────────────────────── */
.bib-badge-lib,
.bib-badge-session {
  border-radius: 999px !important;
  padding: 2px 8px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
}

/* ── Sélecteur de session ────────────────────────────────── */
#session-selector {
  border-radius: 999px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  padding-left: 14px !important;
}

/* ── Météo & lune ────────────────────────────────────────── */
.meteo-label,
.lune-label {
  border-radius: 10px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.capture-meteo-strip { border-radius: 12px !important; }

/* ── Header ──────────────────────────────────────────────── */
header h1 { font-weight: 900 !important; letter-spacing: -1px !important; }

/* ── Catalogues ──────────────────────────────────────────── */
#cat-inline-brand-1, [id^="cat-inline-brand-"] { border-radius: var(--radius-sm) !important; }
[id^="cat-inline-fam-"]                         { border-radius: var(--radius-sm) !important; }
.cat-item    { border-radius: 12px !important; }
.cat-toggle  { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 700 !important; }
.mepps-item  { border-radius: 12px !important; }
.mepps-toggle{ font-family: 'Inter', system-ui, sans-serif !important; font-weight: 700 !important; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border,#d5d1c8); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3,#a1a1aa); }

/* ══ FROST — Dark mode unifié ═══════════════════════════════
   Les variables de couleur sont définies dans chaque page.
   Ces règles appliquent les ajustements visuels dark mode.
   ═══════════════════════════════════════════════════════════ */

html[data-theme="dark"] .card {
  box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.3) !important;
}
html[data-theme="dark"] .card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.35) !important;
  transform: translateY(-2px) !important;
}
html[data-theme="dark"] .capture-card {
  box-shadow: 0 2px 10px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .bib-section {
  box-shadow: 0 4px 24px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] thead th {
  background: var(--surface3) !important;
}
html[data-theme="dark"] .tabs-wrap,
html[data-theme="dark"] .actions-bar {
  background: var(--surface) !important;
}