/* Un élément masqué (attribut hidden) le reste, même si un style lui donne display:flex (v0.3.2) */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════
   HAL — Hub d'Accès à la Lecture · BOWMAN SAS
   Design system : navy #0D1B2E + or #F5A623
   ═══════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────── */
:root {
  --navy: #0D1B2E;
  --navy-light: #142236;
  --navy-lighter: #1C2F47;
  --gold: #F5A623;
  --gold-light: #F7B844;
  --gold-pale: #FEF3C7;

  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-2: #F0F2F6;
  --border: #E2E6EE;
  --text: #1A1F2E;
  --text-muted: #6B7280;
  --text-light: #9CA3AF;

  --sidebar-w: 240px;
  --topbar-h: 96px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow: 0 4px 12px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.14);

  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;
  --info: #2563EB;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1526;
    --surface: #111E35;
    --surface-2: #1A2B47;
    --border: #253550;
    --text: #E8ECF4;
    --text-muted: #9EB0CC;
    --text-light: #5B7399;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1526;
  --surface: #111E35;
  --surface-2: #1A2B47;
  --border: #253550;
  --text: #E8ECF4;
  --text-muted: #9EB0CC;
  --text-light: #5B7399;
}

/* ── Reset minimal ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  height: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; }

/* ── Layout ──────────────────────────────────────────── */
.layout {
  margin-left: var(--sidebar-w);
  padding-top: var(--topbar-h);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .25s;
}

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--navy);
  color: #CBD5E1;
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
  transition: transform .25s;
}

.sidebar-brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}
.brand-logo {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #FFFFFF;
  letter-spacing: -.01em;
  line-height: 1;
  flex-shrink: 0;
}
.brand-logo .brand-dot { color: var(--gold); }
.brand-text {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  letter-spacing: .01em;
  line-height: 1.3;
  margin-top: 1px;
}

.nav-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 10px;
  flex: 1;
}
.nav-section {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
  padding: 16px 8px 4px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: #94A3B8;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: rgba(255,255,255,.07); color: #E2E8F0; }
.nav-link.active {
  background: rgba(245,166,35,.14);
  color: var(--gold);
  border-left: 3px solid var(--gold);
  padding-left: 7px;
}
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; }

.sidebar-footer {
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.version-badge {
  font-size: 11px;
  color: rgba(255,255,255,.25);
  display: block;
}
.bowman-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.18);
  margin-top: 2px;
  display: block;
}

/* ── Topbar ──────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 1.5rem;
  z-index: 150;
}
.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  color: var(--text-muted);
}
.sidebar-toggle svg { width: 22px; height: 22px; }
.page-title {
  font-family: 'Sora', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-actions { display: flex; gap: 8px; align-items: center; }

/* ── Main content ────────────────────────────────────── */
.main-content {
  flex: 1;
  padding: 24px 20px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* ── Cards ───────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.card-title {
  font-weight: 600;
  font-size: 15px;
  margin: 0;
}

/* ── Stats tiles ─────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .stat-value { color: #E2E8F0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat-value { color: #E2E8F0; }
}
.stat-tile.danger .stat-value { color: var(--danger); }
.stat-tile.warning .stat-value { color: var(--warning); }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  border: none;
  transition: opacity .15s, box-shadow .15s;
}
.btn:hover { opacity: .88; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 11px 20px; font-size: 15px; }
.btn svg { width: 15px; height: 15px; }

/* ── Badges ──────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-green { background: #DCFCE7; color: #15803D; }
.badge-red { background: #FEE2E2; color: #B91C1C; }
.badge-orange { background: #FEF3C7; color: #B45309; }
.badge-blue { background: #DBEAFE; color: #1D4ED8; }
.badge-gray   { background: var(--surface-2); color: var(--text-muted); }
.badge-purple { background: #EDE9FE; color: #6D28D9; }
.badge-teal   { background: #CCFBF1; color: #0F766E; }
[data-theme="dark"] .badge-green  { background: #14532D; color: #86EFAC; }
[data-theme="dark"] .badge-red    { background: #7F1D1D; color: #FCA5A5; }
[data-theme="dark"] .badge-orange { background: #78350F; color: #FCD34D; }
[data-theme="dark"] .badge-blue   { background: #1E3A8A; color: #93C5FD; }
[data-theme="dark"] .badge-purple { background: #4C1D95; color: #C4B5FD; }
[data-theme="dark"] .badge-teal   { background: #134E4A; color: #99F6E4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-green  { background: #14532D; color: #86EFAC; }
  :root:not([data-theme="light"]) .badge-red    { background: #7F1D1D; color: #FCA5A5; }
  :root:not([data-theme="light"]) .badge-orange { background: #78350F; color: #FCD34D; }
  :root:not([data-theme="light"]) .badge-blue   { background: #1E3A8A; color: #93C5FD; }
  :root:not([data-theme="light"]) .badge-purple { background: #4C1D95; color: #C4B5FD; }
  :root:not([data-theme="light"]) .badge-teal   { background: #134E4A; color: #99F6E4; }
}

/* ── Statut exemplaire / prêt ─────────────────────────── */
.statut-disponible { color: var(--success); font-weight: 600; }
.statut-emprunte { color: var(--info); font-weight: 600; }
.statut-retard { color: var(--danger); font-weight: 600; }

/* ── Table ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-2); }
.td-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ── Forms ───────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,166,35,.18);
}
[data-theme="dark"] .form-control:focus { box-shadow: 0 0 0 3px rgba(245,166,35,.22); }
.form-control-lg { padding: 12px 14px; font-size: 15px; border-radius: var(--radius-sm); }
.form-hint { margin-top: 4px; font-size: 12px; color: var(--text-light); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.form-section-title {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 6px;
  margin: 24px 0 16px;
}
[data-theme="dark"] .form-section-title { color: var(--gold-light); }

/* ── Scanner input ───────────────────────────────────── */
.scanner-input-wrap {
  position: relative;
}
.scanner-input-wrap .scanner-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}
.scanner-input-wrap .form-control { padding-left: 36px; }

/* ── Info box usager/exemplaire (HTMX targets) ─────────── */
.info-box {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 10px;
  min-height: 56px;
  background: var(--surface-2);
}
.info-box.found { border-color: var(--success); }
.info-box.error { border-color: var(--danger); }
.info-box-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.info-box-meta { font-size: 12px; color: var(--text-muted); }

/* ── Fiche document : cover ──────────────────────────── */
.doc-fiche {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: start;
}
.doc-cover {
  width: 140px;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  background: var(--surface-2);
}
.doc-cover-placeholder {
  width: 140px;
  aspect-ratio: 2/3;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--text-light);
  font-size: 40px;
}

/* ── Alert / flash ───────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-left: 4px solid;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.alert-success { background: #F0FDF4; border-color: var(--success); color: #15803D; }
.alert-danger { background: #FEF2F2; border-color: var(--danger); color: #B91C1C; }
.alert-warning { background: #FFFBEB; border-color: var(--warning); color: #92400E; }

/* ── Search bar ──────────────────────────────────────── */
.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.search-bar .form-control { flex: 1; }

/* ── Pagination / actions bar ────────────────────────── */
.actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.result-count {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Usager card (inline prêts) ──────────────────────── */
.usager-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.usager-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 20px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.usager-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; }
.usager-meta { font-size: 12px; color: var(--text-muted); }

/* ── Mobile ──────────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 150;
}

/* Repli de la sidebar à 900px (et non 768px) : les tablettes en portrait
   font 768–834px (iPad, iPad Air, iPad Pro 11") — avec la sidebar de 240px
   il ne restait que ~580px pour la topbar, qui débordait (panier et menu
   agent hors écran). En paysage (1024px) la sidebar reste visible. */
@media (max-width: 900px) {
  .layout { margin-left: 0; }
  .sidebar { transform: translateX(-100%); }
  .sidebar-toggle { display: flex; }
  .topbar { left: 0; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-overlay { display: block; }
  .doc-fiche { grid-template-columns: 1fr; }
  .doc-cover, .doc-cover-placeholder { width: 100px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Utilitaires ──────────────────────────────────────── */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.gap-8 { gap: 8px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 12px; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-muted);
}
.empty-state-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state-text { font-size: 14px; color: var(--text-muted); margin: 0; }
.mb-20 { margin-bottom: 20px; }

/* (bandeau supérieur supprimé en v0.2e — layout simplifié) */

/* ═══════════════════════════════════════════════════════
   BANDEAU INFÉRIEUR (FOOTER)
   ═══════════════════════════════════════════════════════ */
.app-footer {
  background: var(--navy);
  color: rgba(255,255,255,.45);
  font-size: 11.5px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 2px solid var(--gold);
  margin-top: auto;
}
.footer-left { display: flex; align-items: center; gap: 10px; }
.footer-brand {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  letter-spacing: -.02em;
}
.footer-dot { color: var(--gold); }
.footer-tagline { font-size: 11px; color: rgba(255,255,255,.4); }
.footer-right { display: flex; align-items: center; gap: 6px; }
.footer-sep { color: rgba(255,255,255,.2); }
.footer-link { color: rgba(255,255,255,.5); text-decoration: underline; }
.footer-link:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════════
   HÉROS TABLEAU DE BORD
   ═══════════════════════════════════════════════════════ */
.dashboard-hero {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}
.dashboard-hero::before {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(245,166,35,.07);
  pointer-events: none;
}
.dashboard-hero::after {
  content: '';
  position: absolute;
  right: 80px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(245,166,35,.04);
  pointer-events: none;
}
.hero-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  position: relative;
}
.hero-title-block { }
.hero-hal {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 4px;
}
.hero-dot { color: var(--gold); }
.hero-library {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
}
.hero-subtitle {
  font-size: 12.5px;
  color: rgba(255,255,255,.4);
  text-transform: capitalize;
}
.hero-stats-grid {
  display: flex;
  gap: 12px;
}
.hero-stat-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-align: center;
  min-width: 100px;
  transition: background .15s;
}
.hero-stat-card:hover { background: rgba(255,255,255,.11); }
.hero-stat-icon {
  color: rgba(255,255,255,.4);
  margin-bottom: 8px;
}
.hero-stat-icon svg { width: 18px; height: 18px; }
.hero-stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.45);
  margin-top: 4px;
}
.hero-stat-danger .hero-stat-value { color: #FCA5A5; }
.hero-stat-danger .hero-stat-icon { color: #FCA5A5; }
.hero-stat-ok .hero-stat-value { color: #86EFAC; }
.hero-stat-ok .hero-stat-icon { color: #86EFAC; }

/* ═══════════════════════════════════════════════════════
   ACTIONS RAPIDES
   ═══════════════════════════════════════════════════════ */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.quick-action-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  cursor: pointer;
}
.quick-action-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.quick-action-card.qa-alert {
  border-color: rgba(220,38,38,.4);
}
.quick-action-card.qa-alert:hover {
  border-color: var(--danger);
}
.quick-action-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.quick-action-icon svg { width: 18px; height: 18px; }
.qa-blue  { background: #DBEAFE; color: #1D4ED8; }
.qa-gold  { background: #FEF3C7; color: #B45309; }
.qa-green { background: #DCFCE7; color: #15803D; }
.qa-red   { background: #FEE2E2; color: #B91C1C; }
.quick-action-label {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
}
.quick-action-desc {
  font-size: 12px;
  color: var(--text-muted);
}
[data-theme="dark"] .qa-blue  { background: #1E3A8A; color: #93C5FD; }
[data-theme="dark"] .qa-gold  { background: #78350F; color: #FCD34D; }
[data-theme="dark"] .qa-green { background: #14532D; color: #86EFAC; }
[data-theme="dark"] .qa-red   { background: #7F1D1D; color: #FCA5A5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qa-blue  { background: #1E3A8A; color: #93C5FD; }
  :root:not([data-theme="light"]) .qa-gold  { background: #78350F; color: #FCD34D; }
  :root:not([data-theme="light"]) .qa-green { background: #14532D; color: #86EFAC; }
  :root:not([data-theme="light"]) .qa-red   { background: #7F1D1D; color: #FCA5A5; }
}

/* Retour rapide form */
.retour-rapide-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Usager link avec initiales */
.usager-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.usager-initials-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
[data-theme="dark"] .usager-initials-sm { background: var(--navy-lighter); }
.doc-link { font-weight: 500; }

/* ═══════════════════════════════════════════════════════
   NOTICE DOCUMENT (FICHE)
   ═══════════════════════════════════════════════════════ */
.notice-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  margin-bottom: 20px;
  align-items: start;
}
.notice-cover-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.notice-cover {
  width: 160px;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: block;
}
.notice-cover-placeholder {
  width: 160px;
  aspect-ratio: 2/3;
  border-radius: var(--radius);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--text-light);
  border: 2px dashed var(--border);
}
.notice-cover-placeholder svg { width: 48px; height: 48px; }
.notice-cover-dispo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.notice-type-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.notice-type-badge { letter-spacing: .08em; }
.notice-titre {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 6px;
  line-height: 1.25;
  color: var(--text);
  text-wrap: balance;
}
.notice-auteur {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.notice-edition-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.notice-editeur { font-weight: 600; color: var(--text); }
.notice-annee { color: var(--text-muted); }
.notice-dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.notice-dl-row {
  display: contents;
}
.notice-dl-row:not(:last-child) dt,
.notice-dl-row:not(:last-child) dd {
  border-bottom: 1px solid var(--border);
}
.notice-dl dt {
  background: var(--surface-2);
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
}
.notice-dl dd {
  background: var(--surface);
  padding: 8px 12px;
  margin: 0;
  font-size: 13.5px;
  color: var(--text);
}
.notice-isbn { font-size: 13px; }
.notice-description { margin-top: 12px; }
.notice-description-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.notice-description-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}
.notice-actions { margin-top: 16px; }

/* Statut avec puce colorée */
.statut-puce {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 13px;
}
.puce-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.statut-puce.statut-disponible .puce-dot { background: var(--success); }
.statut-puce.statut-emprunte .puce-dot { background: var(--info); }

/* ── Responsive notices et dashboard ──────────────── */
@media (max-width: 768px) {
  .notice-hero {
    grid-template-columns: 1fr;
  }
  .notice-cover-wrap {
    flex-direction: row;
    align-items: flex-start;
  }
  .notice-cover,
  .notice-cover-placeholder {
    width: 120px;
  }
  .hero-header {
    grid-template-columns: 1fr;
  }
  .hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .notice-dl {
    grid-template-columns: 1fr;
  }
  .notice-dl dt {
    border-right: none;
    border-bottom: none;
  }
  .notice-dl dd {
    border-bottom: 1px solid var(--border);
  }
  .app-footer {
    flex-direction: column;
    text-align: center;
    gap: 4px;
    padding: 12px 16px;
  }
  .footer-tagline { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE IA — Assistant conversationnel
   ═══════════════════════════════════════════════════════════ */
.ia-topbar-badge{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);padding:4px 10px;border-radius:999px;letter-spacing:.02em}
.ia-hero{padding:32px 0 24px;text-align:center}
.ia-hero-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);padding:4px 12px;border-radius:999px;margin-bottom:16px}
.ia-hero-title{font-family:'Sora',sans-serif;font-size:clamp(22px,4vw,36px);font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.2;margin:0 0 10px}
.ia-hero-accent{color:var(--gold)}
.ia-hero-subtitle{font-size:14px;color:var(--text-muted);margin:0}
.ia-hero-subtitle strong{color:var(--navy);font-weight:700}
.ia-search-section{max-width:720px;margin:0 auto 32px}
.ia-search-form{width:100%}
.ia-search-wrap{display:flex;align-items:center;background:var(--surface);border:2px solid var(--border);border-radius:16px;padding:6px 6px 6px 16px;gap:8px;transition:border-color .2s,box-shadow .2s}
.ia-search-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 15%,transparent)}
.ia-search-icon{color:var(--text-light);flex-shrink:0;width:20px;height:20px}
.ia-input{flex:1;border:none;outline:none;background:transparent;font-size:15px;font-weight:500;color:var(--text);padding:8px 0;min-width:0}
.ia-input::placeholder{color:var(--text-light);font-weight:400}
.ia-submit-btn{display:flex;align-items:center;gap:6px;background:var(--navy);color:#fff;border:none;border-radius:11px;padding:10px 18px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,opacity .15s;flex-shrink:0}
.ia-submit-btn:hover{background:color-mix(in srgb,var(--navy) 85%,#fff)}
.ia-submit-btn:disabled{opacity:.55;cursor:not-allowed}
.ia-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center;transition:opacity .3s}
.ia-chip{background:var(--surface);border:1.5px solid var(--border);color:var(--text-muted);font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.ia-chip:hover{border-color:var(--gold);color:var(--navy);background:color-mix(in srgb,var(--gold) 8%,var(--surface))}
.ia-loader{display:flex;align-items:center;gap:12px;padding:20px 0}
.ia-loader-dots{display:flex;gap:5px}
.ia-loader-dots span{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:ia-bounce .7s ease-in-out infinite}
.ia-loader-dots span:nth-child(2){animation-delay:.1s}
.ia-loader-dots span:nth-child(3){animation-delay:.2s}
@keyframes ia-bounce{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-5px);opacity:.5}}
.ia-loader-label{font-size:13px;color:var(--text-muted);font-style:italic}
.ia-response-box{display:flex;align-items:flex-start;gap:12px;background:color-mix(in srgb,var(--gold) 8%,var(--surface));border:1.5px solid color-mix(in srgb,var(--gold) 25%,transparent);border-radius:14px;padding:16px 20px;margin-bottom:24px;animation:ia-fadein .25s ease}
@keyframes ia-fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ia-response-avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--gold);color:var(--navy);flex-shrink:0;margin-top:1px}
.ia-response-text{font-size:14px;line-height:1.6;color:var(--text);margin:0}
.ia-results-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ia-results-count{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);white-space:nowrap}
.ia-results-divider{flex:1;height:1px;background:var(--border)}
.ia-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-bottom:32px}
.ia-card{display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.ia-card:hover{border-color:var(--gold);box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-2px)}
.ia-card-cover{aspect-ratio:2/3;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.ia-card-cover-img{width:100%;height:100%;object-fit:cover}
.ia-card-cover--placeholder{background:color-mix(in srgb,var(--navy) 8%,var(--bg))}
.ia-card-cover-placeholder-icon{font-size:36px;opacity:.4}
.ia-card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.ia-card-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:4px}
.ia-card-type{font-size:9px;letter-spacing:.06em}
.ia-card-titre{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.ia-card-auteur{font-size:11px;color:var(--text-muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ia-card-genre{font-size:10.5px;color:var(--text-light);font-style:italic;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ia-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 0;color:var(--text-muted);text-align:center}
.ia-empty svg{opacity:.3}
.ia-empty p{font-size:14px;font-weight:600;margin:0;color:var(--text)}
.ia-empty span{font-size:13px}
.ia-help{margin-top:40px;padding-top:32px;border-top:1px solid var(--border)}
.ia-help-title{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;color:var(--navy);margin:0 0 20px}
.ia-help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ia-help-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:6px}
.ia-help-icon{font-size:22px;line-height:1}
.ia-help-card strong{font-size:13px;font-weight:700;color:var(--text)}
.ia-help-card p{font-size:12px;color:var(--text-muted);margin:0;line-height:1.5}


/* ════════════════════════════════════════════
   SIDEBAR IA SEARCH — HAL v0.1
   ════════════════════════════════════════════ */

/* Conteneur principal du champ IA dans la sidebar */
.sidebar-ia-search {
  padding: 0 12px 4px;
  margin-bottom: 4px;
}

/* Wrapper flex pour aligner icône + input + bouton */
.sidebar-ia-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F0F4FF;
  border: 1px solid #D8E0F5;
  border-radius: 10px;
  padding: 7px 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sidebar-ia-wrap:focus-within {
  border-color: #F5A623;
  box-shadow: 0 0 0 3px rgba(245,166,35,0.15);
  background: #fff;
}

/* Icône étoile IA */
.sidebar-ia-star {
  flex-shrink: 0;
  color: #F5A623;
  opacity: 0.85;
}

/* Champ de saisie */
.sidebar-ia-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #0D1B2E;
  outline: none;
  min-width: 0;
}

.sidebar-ia-input::placeholder {
  color: #9AA5BF;
  font-style: italic;
}

/* Bouton envoi */
.sidebar-ia-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: #F5A623;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  padding: 0;
}

.sidebar-ia-btn:hover {
  background: #E09010;
}

.sidebar-ia-btn:active {
  transform: scale(0.92);
}

/* Lien discret en bas de sidebar pour ouvrir la page IA complète */
.sidebar-ia-link-wrap {
  padding: 8px 16px 4px;
  margin-top: auto;
}

.sidebar-ia-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #9AA5BF;
  text-decoration: none;
  transition: color 0.15s;
}

.sidebar-ia-link:hover {
  color: #F5A623;
}

.sidebar-ia-link--active {
  color: #F5A623;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════
   HAL — REDESIGN SHOP ÉDITORIAL (Place des libraires)
   marker: .shop-header
   ═══════════════════════════════════════════════════════════════════════ */

/* ── En-tête boutique ─────────────────────────────────────────────────── */
.shop-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 24px 24px 0;
  margin: -24px -24px 0;
  position: sticky;
  top: var(--topbar-h);
  z-index: 100;
}
.shop-header-top {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.shop-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -.3px;
}
.shop-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* Barre de recherche */
.shop-search { display: flex; align-items: center; }
.shop-search-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.shop-search-wrap:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,166,35,.15);
}
.shop-search-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin: 0 0 0 11px;
  color: var(--text-muted);
  pointer-events: none;
}
.shop-search-input {
  height: 38px;
  padding: 0 10px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  min-width: 200px;
  max-width: 280px;
}
.shop-search-input:focus { outline: none; }
.shop-search-btn {
  height: 38px;
  padding: 0 16px;
  background: var(--navy);
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.shop-search-btn:hover { background: var(--navy-light, #1a3a5c); }
.shop-search-clear {
  height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  border-left: 1px solid var(--border);
  transition: color .15s;
  text-decoration: none;
}
.shop-search-clear:hover { color: var(--danger); }

/* Navigation onglets */
.shop-nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.shop-nav::-webkit-scrollbar { display: none; }
.shop-nav-link {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  text-decoration: none;
}
.shop-nav-link:hover { color: var(--text); }
.shop-nav-link.active {
  color: var(--text);
  border-bottom-color: var(--gold);
  font-weight: 600;
}
.shop-nav-link--suggestions {
  margin-left: auto;
  color: var(--navy);
  background: rgba(13,27,46,.05);
  border-radius: 6px 6px 0 0;
  border-color: transparent;
  font-weight: 500;
}
.shop-nav-link--suggestions:hover { color: var(--navy); background: rgba(13,27,46,.1); }
.shop-nav-link--suggestions.active {
  background: var(--navy);
  color: #fff;
  border-bottom-color: var(--navy);
  font-weight: 600;
}

/* ── Sections éditoriales ─────────────────────────────────────────────── */
.shop-section { margin: 36px 0; }
.shop-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.shop-section-emoji { font-size: 20px; flex-shrink: 0; }
.shop-section-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  flex: 1;
  letter-spacing: -.2px;
}
.shop-section-more {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
  transition: opacity .15s;
  white-space: nowrap;
}
.shop-section-more:hover { opacity: .7; }

/* ── Carousel ─────────────────────────────────────────────────────────── */
.shop-carousel-wrap { position: relative; padding: 0 4px; }
.shop-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.shop-carousel::-webkit-scrollbar { display: none; }
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-65%);
  width: 34px;
  height: 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  z-index: 3;
  line-height: 1;
  padding: 0 0 1px;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.carousel-arrow:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-65%) scale(1.08);
}
.carousel-arrow-l { left: -18px; }
.carousel-arrow-r { right: -18px; }

/* ── Grille résultats filtrés ─────────────────────────────────────────── */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 24px;
  padding: 24px 0;
}
.shop-results-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.shop-results-query { color: var(--text); font-weight: 600; }

/* ── Carte livre ──────────────────────────────────────────────────────── */
.book-card {
  flex-shrink: 0;
  width: 158px;
  scroll-snap-align: start;
  text-decoration: none;
  display: block;
}
.book-cover-wrap {
  width: 158px;
  height: 220px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  background: linear-gradient(145deg, #e8e3d8, #d0c9bb);
  box-shadow:
    3px 3px 10px rgba(0,0,0,.14),
    -1px 0 0 rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease;
}
.book-card:hover .book-cover-wrap {
  transform: translateY(-5px) rotate(.4deg);
  box-shadow:
    3px 14px 28px rgba(0,0,0,.2),
    -1px 0 0 rgba(0,0,0,.06);
}
.book-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-cover-wrap.book-cover-ph {
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-cover-ph-icon {
  font-size: 42px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .6;
}

/* Badges sur la couverture */
.book-type-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(13,27,46,.8);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}
.book-new-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--gold);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .6px;
}
.book-dispo-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}
.book-dispo-ok { background: rgba(22,163,74,.85); color: #fff; }
.book-dispo-no { background: rgba(180,30,30,.78); color: #fff; }

/* Informations sous la couverture */
.book-info { margin-top: 10px; }
.book-titre {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  margin-bottom: 3px;
}
a.book-card:hover .book-titre { color: var(--gold); }
.book-auteur {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.book-genre {
  font-size: 11px;
  color: var(--text-light, var(--text-muted));
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-prix {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 8px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .book-prix { color: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .book-prix { color: var(--gold); }
}

/* Bouton Ajouter */
.book-add-btn {
  width: 100%;
  padding: 7px 0;
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.book-add-btn:hover {
  background: #e09520;
  transform: translateY(-1px);
}

/* Contrôle quantité */
.book-qty {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 100%;
}
.book-qty-btn {
  width: 30px;
  flex-shrink: 0;
  padding: 6px 0;
  background: var(--surface-2, var(--surface));
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  transition: background .1s, color .1s;
}
.book-qty-btn:hover { background: var(--gold); color: #fff; }
.book-qty-display {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  pointer-events: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.book-qty-input { display: none !important; }

/* ── Barre panier flottante ───────────────────────────────────────────── */
.cart-bar {
  position: fixed;
  bottom: 24px;
  left: calc(var(--sidebar-w) + 16px);
  right: 16px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow:
    0 8px 32px rgba(13,27,46,.45),
    0 2px 8px rgba(0,0,0,.2);
  z-index: 200;
}
.cart-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  flex-wrap: wrap;
}
.cart-bar-count {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.cart-bar-total {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
  flex: 1;
  font-variant-numeric: tabular-nums;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .shop-header { padding: 16px 16px 0; margin: -16px -16px 0; }
  .shop-header-top { flex-direction: column; gap: 12px; }
  .shop-search-input { min-width: 140px; }
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
  }
  .book-card { width: 130px; }
  .book-cover-wrap { width: 130px; height: 182px; }
  .carousel-arrow { display: none; }
  .cart-bar { left: 8px; right: 8px; bottom: 12px; }
}

/* HAL-FEATURES-CSS */

/* ── topbar-right (flex horizontal) ─────────────────────────────── */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Date courante ───────────────────────────────────────────────── */
.topbar-date {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 0 4px;
}
@media (max-width: 900px) { .topbar-date { display: none; } }

/* ── Bouton notifications ────────────────────────────────────────── */
.notif-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.notif-btn:hover { background: var(--surface-2); color: var(--text); }
.notif-btn svg { width: 16px; height: 16px; }


/* ═══════════════════════════════════════════════════════════════
   HAL-FEATURES-CSS — Météo · Visiteurs · Agent · CSP · Paniers
   ═══════════════════════════════════════════════════════════════ */

/* ── Météo topbar ──────────────────────────────────────────────── */
.topbar-meteo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 4px;
  user-select: none;
}
.meteo-today {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.meteo-today-icon { font-size: 15px; line-height: 1; }
.meteo-today-temp { font-size: 13px; }
.meteo-forecast {
  display: flex;
  gap: 4px;
  align-items: center;
}
.meteo-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 26px;
  opacity: .85;
}
.meteo-day-name { font-size: 9px; text-transform: uppercase; letter-spacing: .03em; }
.meteo-day-icon { font-size: 12px; line-height: 1; }
.meteo-day-temp { font-size: 10px; font-weight: 600; }
@media (max-width: 900px) { .meteo-forecast { display: none; } }
@media (max-width: 700px) { .topbar-meteo { display: none; } }

/* ── Visiteurs topbar ──────────────────────────────────────────── */
.topbar-visiteurs { position: relative; }
.visiteurs-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  transition: background .15s;
}
.visiteurs-btn:hover { background: var(--surface); color: var(--text); }
.visiteurs-count {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  min-width: 18px;
  text-align: center;
}
.visiteurs-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 200;
}
.visiteurs-menu-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.visiteurs-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.visiteurs-stat {
  flex: 1;
  text-align: center;
}
.visiteurs-stat-n {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.visiteurs-stat small {
  font-size: 11px;
  color: var(--text-muted);
}
.visiteurs-stat-sep {
  width: 1px;
  height: 32px;
  background: var(--border);
}
.visiteurs-actions {
  display: flex;
  gap: 8px;
}
.visiteurs-action-btn {
  flex: 1;
  padding: 7px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: opacity .15s;
}
.visiteurs-action-btn:hover { opacity: .8; }
.visiteurs-entree {
  background: #d1fae5;
  color: #065f46;
}
.visiteurs-sortie {
  background: #fee2e2;
  color: #991b1b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .visiteurs-entree { background:#064e3b; color:#6ee7b7; }
  :root:not([data-theme="light"]) .visiteurs-sortie { background:#7f1d1d; color:#fca5a5; }
}
:root[data-theme="dark"] .visiteurs-entree { background:#064e3b; color:#6ee7b7; }
:root[data-theme="dark"] .visiteurs-sortie { background:#7f1d1d; color:#fca5a5; }
@media (max-width: 600px) { .topbar-visiteurs { display: none; } }

/* ── Agent dropdown ─────────────────────────────────────────────── */
.agent-dropdown { position: relative; }
.agent-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background .15s;
}
.agent-btn:hover { background: var(--surface); }
.agent-nom-label {
  /* v0.3.0 : nom complet, jamais tronqué ; un nom très long passe sur 2 lignes */
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  max-width: 220px;
  white-space: normal;
  line-height: 1.2;
  text-align: right;
}
.agent-chevron { color: var(--text-muted); transition: transform .2s; }
.agent-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  overflow: hidden;
  z-index: 200;
}
.agent-menu-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.agent-menu-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.agent-menu-role {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.agent-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.agent-menu-item:hover { background: var(--surface); color: var(--gold); }
.agent-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }
.agent-menu-logout { color: #dc2626 !important; }
.agent-menu-logout:hover { background: #fee2e2 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .agent-menu-logout:hover { background: #450a0a !important; }
}
:root[data-theme="dark"] .agent-menu-logout:hover { background: #450a0a !important; }

/* ── Bouton connexion topbar ─────────────────────────────────────── */
.topbar-login-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  background: var(--gold);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
  white-space: nowrap;
}
.topbar-login-btn:hover { opacity: .88; }

/* ── Page auth ──────────────────────────────────────────────────── */
.auth-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 60vh;
  padding: 40px 16px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 36px 32px;
}
.auth-logo {
  text-align: center;
  margin-bottom: 16px;
}
.auth-title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 6px;
  color: var(--text);
}
.auth-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 20px;
}
.auth-form .form-group { margin-bottom: 16px; }
.auth-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 16px;
}
.auth-hint code {
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
}

/* ── Cotisation (fiche adhérent) ─────────────────────────────────── */
.cotisation-radios {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 6px;
}
.cotisation-radio {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}
.cotisation-radio input[type="radio"] { width: 16px; height: 16px; cursor: pointer; }

/* ── Paniers d'acquisition ──────────────────────────────────────── */
.paniers-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
  min-height: 60vh;
}
@media (max-width: 800px) {
  .paniers-layout { grid-template-columns: 1fr; }
}
.paniers-sidebar {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.paniers-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.paniers-sidebar-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.paniers-list { list-style: none; margin: 0; padding: 0; }
.paniers-list-item { border-bottom: 1px solid var(--border); }
.paniers-list-item:last-child { border-bottom: none; }
.paniers-list-link {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text);
  transition: background .12s;
}
.paniers-list-link:hover { background: var(--surface); }
.paniers-list-item--active .paniers-list-link {
  background: rgba(245,166,35,.10);
  border-left: 3px solid var(--gold);
}
.panier-list-nom {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panier-list-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.panier-list-nb { font-size: 11px; color: var(--text-muted); }
.panier-list-date { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
.paniers-list-empty {
  padding: 20px 16px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.paniers-content { min-height: 300px; }
.panier-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.panier-detail-titre {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}
.panier-detail-date { font-size: 12px; color: var(--text-muted); margin: 0; }
.panier-valider-form { margin-top: 20px; }
.panier-valider-inner {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.panier-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
}
.panier-empty p { margin: 0; font-size: 15px; }


/* HAL-v4-patch */

/* ── Topbar fond navy ────────────────────────────────────── */
.topbar {
  background: var(--navy) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.page-title { color: #fff !important; }
.sidebar-toggle { color: rgba(255,255,255,.65) !important; }
.topbar-date { color: rgba(255,255,255,.5) !important; font-size:12px; }
.notif-btn { color: rgba(255,255,255,.65) !important; }
.notif-btn:hover { color:#fff !important; }
.topbar-login-btn { color: rgba(255,255,255,.8) !important; }
.agent-nom-label { color: #fff !important; }
.agent-chevron { stroke: rgba(255,255,255,.55) !important; }
.user-avatar { background:rgba(255,255,255,.15)!important; color:#fff!important; }

/* ── Visiteurs inline (toujours visible) ─────────────────── */
.topbar-visiteurs-inline {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
  user-select: none;
}
.topbar-visiteurs-inline .v-icon { opacity:.6; flex-shrink:0; }
.topbar-visiteurs-inline .v-n {
  font-weight:700; font-size:13px; color:#fff;
  font-variant-numeric:tabular-nums; min-width:14px; text-align:center;
}
.topbar-visiteurs-inline .v-lbl { opacity:.6; font-size:11px; }
.topbar-visiteurs-inline .v-sep { opacity:.25; margin:0 1px; }
.topbar-visiteurs-inline .v-btn {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; color:#fff; font-size:11px;
  padding:2px 7px; cursor:pointer; font-weight:500;
  transition:background .15s;
}
.topbar-visiteurs-inline .v-btn:hover { background:rgba(255,255,255,.2); }
.topbar-visiteurs-inline .v-entree { color:#7effc0; border-color:rgba(126,255,192,.22); }
.topbar-visiteurs-inline .v-sortie { color:#ffb07e; border-color:rgba(255,176,126,.22); }

/* ── Lien IA sous la barre de recherche ─────────────────── */
.sidebar-ia-under {
  display:flex; align-items:center; gap:6px;
  padding:5px 14px 10px;
  font-size:11px; color:rgba(255,255,255,.42);
  text-decoration:none; transition:color .15s;
}
.sidebar-ia-under:hover { color:rgba(255,255,255,.72); }
.sidebar-ia-under svg { opacity:.7; flex-shrink:0; }
.sidebar-ia-under.sidebar-ia-link--active { color:rgba(255,255,255,.75); }
/* Lien IA déplacé sous la barre de recherche */
.sidebar-ia-link-wrap { display:flex !important; flex-direction:column; padding:4px 10px 8px; }

/* ── Type de résidence ──────────────────────────────────── */
.residence-radios { display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; }
.residence-radio {
  display:flex; align-items:center; gap:6px;
  cursor:pointer; font-size:14px; color:var(--text);
}
.residence-radio input { cursor:pointer; accent-color:var(--gold); }
.residence-rp-fields {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px; margin-top:10px;
}

/* ── BAN autocomplete ───────────────────────────────────── */
.ban-input-wrap { position:relative; }
.ban-suggestions {
  position:absolute; top:100%; left:0; right:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 4px 16px rgba(0,0,0,.12);
  z-index:1000; max-height:220px; overflow-y:auto; margin-top:2px;
}
.ban-suggestion {
  padding:8px 12px; cursor:pointer; font-size:13px;
  border-bottom:1px solid var(--border); transition:background .1s;
}
.ban-suggestion:last-child { border-bottom:none; }
.ban-suggestion:hover { background:var(--bg,#f4f6f9); }
.ban-suggestion .ban-label { color:var(--text); }
.ban-suggestion .ban-cp { color:var(--text-muted); font-size:11px; margin-left:5px; }

/* ═══ v0.3.0 — Couverture typographique HAL (_couverture.html) ═══════════ */
.hal-cover { position:relative; width:100%; height:100%; overflow:hidden; background:#e9ecf0;
  container-type:inline-size; }  /* le texte suit la largeur de la couverture */
.hal-cover > img { width:100%; height:100%; object-fit:cover; display:block; }
.hal-cover-typo {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-start;
  gap:.35em; padding:12% 10% 10%; background:var(--hc-bg,#0D1B2E);
  background:linear-gradient(155deg, var(--hc-bg,#0D1B2E) 0%, var(--hc-bg2,var(--hc-bg,#0D1B2E)) 100%); color:#fff;
  font-size:clamp(5px, 8.5cqw, 17px); text-align:left; overflow:hidden;
}
.hal-cover-typo[hidden] { display:none; }
.hal-cover-type { font-size:.72em; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.55); }
.hal-cover-titre { font-family:'Sora',sans-serif; font-weight:700; font-size:1.18em; line-height:1.18;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.hal-cover-rule { width:28%; height:2px; background:#F5A623; margin:.3em 0; flex-shrink:0; }
.hal-cover-auteur { font-size:.86em; color:rgba(255,255,255,.8); line-height:1.25; }
.hal-cover-mark { position:absolute; left:10%; bottom:7%; font-family:'Sora',sans-serif; font-weight:800;
  font-size:.8em; letter-spacing:.02em; color:rgba(255,255,255,.45); }
.hal-cover-mark b { color:#F5A623; }
/* v0.5.7 : motif du type de document (visuel HAL de remplacement) */
.hal-cover-motif { position:absolute; right:-12%; bottom:-6%; width:78%; height:auto; color:rgba(255,255,255,.10);
  pointer-events:none; }
.hal-cover-typo::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.10), transparent 60%); }
.hal-cover-typo > span:not(.hal-cover-mark) { position:relative; }
/* v0.5.6 : illustration de démonstration interne (droits non validés) */
.hal-cover-demo { position:absolute; right:4px; bottom:4px; font:700 9px/1.4 Inter,sans-serif; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; background:rgba(109,40,217,.85); border-radius:3px; padding:0 4px; pointer-events:auto; }