/* ==========================================================================
   Registre Numérique — Design System v2
   Sidebar flottante (desktop) + barre basse avec FAB (mobile) + mode sombre
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  color-scheme: light;

  /* ---- Palette (clair) ---- */
  --bg: #F3F4EE;
  --bg-alt: #EAEBE2;
  --surface: #FFFFFF;
  --surface-2: #F6F7F1;
  --border: #E1E3D8;
  --border-strong: #CBCEBD;
  --text: #16223E;
  --text-muted: #5E6A82;
  --text-faint: #96A0B5;

  --accent: #2F6B5E;
  --accent-strong: #204A41;
  --accent-soft: rgba(47,107,94,.12);
  --stamp: #A6432A;
  --stamp-strong: #7E2F1B;
  --stamp-soft: rgba(166,67,42,.12);
  --warning: #B8862F;
  --warning-soft: rgba(184,134,47,.14);
  --danger: #C0392B;
  --danger-soft: rgba(192,57,43,.12);

  --spine: #101B30;
  --spine-2: #182848;

  --shadow-sm: 0 1px 2px rgba(20,30,55,.05);
  --shadow-md: 0 4px 16px -4px rgba(20,30,55,.10), 0 1px 3px rgba(20,30,55,.06);
  --shadow-lg: 0 20px 48px -12px rgba(20,30,55,.20);
  --shadow-float: 0 10px 30px -8px rgba(16,27,48,.35);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --sidebar-w: 248px;
  --topbar-h: 68px;
  --bottomnav-h: 68px;

  --ease: cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D1526;
  --bg-alt: #101B30;
  --surface: #151F38;
  --surface-2: #1B2740;
  --border: #2A3654;
  --border-strong: #384874;
  --text: #E8EAF2;
  --text-muted: #9AA5C2;
  --text-faint: #6B7796;

  --accent: #4FAE9B;
  --accent-strong: #6FC4B2;
  --accent-soft: rgba(79,174,155,.16);
  --stamp: #E08363;
  --stamp-strong: #F0A084;
  --stamp-soft: rgba(224,131,99,.16);
  --warning: #E0B45C;
  --warning-soft: rgba(224,180,92,.16);
  --danger: #E2695C;
  --danger-soft: rgba(226,105,92,.16);

  --spine: #0A1120;
  --spine-2: #111C34;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 20px -4px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 56px -12px rgba(0,0,0,.55);
  --shadow-float: 0 10px 30px -8px rgba(0,0,0,.6);
}

/* ---- Reset ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

/* Empêche le rebond de défilement type "page web" (effet natif) */
html, body { overscroll-behavior-y: contain; height: 100%; }

/* Retire le flash bleu au toucher et la sélection de texte sur les éléments d'interface */
a, button, .btn, .nav-tabs a, .bottom-nav a, .capture-tab, summary, .stat-card, .fab {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}

/* Transitions natives entre pages (MPA) sur les navigateurs qui les supportent (dégradation silencieuse ailleurs) */
/* Note : l'API @view-transition a été retirée volontairement. Sur certains
   navigateurs mobiles, une transition avortée pouvait laisser un instantané
   de l'ancienne page au-dessus de la nouvelle, interceptant tous les clics
   (l'utilisateur avait alors l'impression qu'une carte entière se comportait
   comme un seul gros bouton). La fiabilité des clics prime sur cet effet
   cosmétique. */

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .25s var(--ease), color .25s var(--ease);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--accent-soft); color: var(--accent-strong); }

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }

h1, h2, h3, .brand-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 .4em;
}
h1 { font-size: clamp(20px, 2.4vw, 26px); }
h2 { font-size: clamp(16px, 1.6vw, 18px); }
.mono { font-family: var(--font-mono); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar (desktop) ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  margin: 14px 0 14px 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--spine), var(--spine-2));
  box-shadow: var(--shadow-float);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 28px);
  position: sticky;
  top: 14px;
}

.sidebar .brand { padding: 4px 10px 20px; display: flex; align-items: center; gap: 10px; }
.brand-mark {
   height: 30px; border-radius: 10px; flex-shrink: 0;
  background: var(--stamp); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,.4);
  padding: 0px 8px;
}
.sidebar .brand-title { color: #fff; font-size: 17px; margin: 0; line-height: 1.2; }
.sidebar .brand-sub { font-size: 10.5px; color: #8D9AC0; text-transform: uppercase; letter-spacing: .08em; }

.nav-tabs { list-style: none; margin: 6px 0 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nav-tabs a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  color: #B7C1DC; font-size: 13.8px; font-weight: 500;
  position: relative; transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.nav-tabs a svg { flex-shrink: 0; opacity: .85; }
.nav-tabs a:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(2px); }
.nav-tabs a.active { background: rgba(255,255,255,.11); color: #fff; }
.nav-tabs a.active svg { opacity: 1; color: var(--stamp-strong); }
.nav-tabs a.active::before {
  content: ''; position: absolute; left: -14px; top: 6px; bottom: 6px; width: 3px;
  background: var(--stamp); border-radius: 2px;
}
.nav-divider { height: 1px; background: rgba(255,255,255,.09); margin: 10px 4px; }

.sidebar-hint {
  margin-top: auto; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.05);
  font-size: 11.5px; color: #8D9AC0; line-height: 1.5;
}
.sidebar-hint strong { color: #C7CEE4; }

/* ---------- Zone de contenu ---------- */
.content-area { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  padding-top: env(safe-area-inset-top, 0);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-left: 28px; padding-right: 28px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.topbar-left { display: flex; flex-direction: column; min-width: 0; }
.topbar-left .eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 1px;
}
.topbar-left h1 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.quick-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 8px 14px;
  min-width: 220px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.quick-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.quick-search svg { flex-shrink: 0; color: var(--text-faint); }
.quick-search input { border: none; background: transparent; outline: none; font-size: 13.5px; width: 100%; color: var(--text); }

/* Bascule thème clair/sombre */
.theme-switch { display: inline-flex; align-items: center; }
.theme-switch input { display: none; }
.theme-switch label {
  width: 42px; height: 24px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  position: relative; cursor: pointer; display: block; transition: background .2s var(--ease);
}
.theme-switch label::after {
  content: '☀️'; font-size: 10px; line-height: 18px; text-align: center;
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease);
}
.theme-switch input:checked + label { background: var(--spine); }
.theme-switch input:checked + label::after { content: '🌙'; transform: translateX(18px); }

/* Menu compte (details/summary — fonctionne sans JS) */
.account-menu { position: relative; }
.account-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px; border-radius: var(--radius-pill); border: 1px solid transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover { background: var(--surface); border-color: var(--border); }
.account-menu[open] summary { background: var(--surface); border-color: var(--border); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--stamp); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12.5px; flex-shrink: 0;
}
.account-menu .acc-name { font-size: 13px; font-weight: 600; line-height: 1.15; }
.account-menu .acc-role { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.account-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 40;
  animation: dropIn .15s var(--ease);
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.account-dropdown a, .account-dropdown .dd-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px;
  font-size: 13px; color: var(--text); width: 100%;
}
.account-dropdown a:hover { background: var(--surface-2); }
.account-dropdown .dd-sep { height: 1px; background: var(--border); margin: 6px 2px; }

/* ---------- Contenu principal ---------- */
.main { flex: 1; padding: 26px 28px 40px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ==========================================================================
   Toasts (remplace les bandeaux d'alerte statiques)
   ========================================================================== */

.toast-stack {
  position: fixed; top: 18px; right: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; max-width: 360px;
}
@media (max-width: 420px) {
  .toast-stack { left: 12px; right: 12px; max-width: none; top: 12px; }
}
.toast {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 13px 14px; display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; animation: toastIn .3s var(--ease), toastOut .35s var(--ease) 4.2s forwards;
}
.toast.toast-success { border-left: 3px solid var(--accent); }
.toast.toast-error { border-left: 3px solid var(--danger); }
.toast button.toast-close {
  margin-left: auto; background: none; border: none; color: var(--text-faint); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 0 0 8px; flex-shrink: 0;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); height: 0; margin: 0; padding: 0; border: 0; } }

/* ==========================================================================
   Cartes
   ========================================================================== */

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 22px; transition: box-shadow .2s var(--ease);
}
.card + .card { margin-top: 16px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--border-strong); flex-wrap: wrap; }
.card-header h2 { margin: 0; }
.ruled-top { border-top: 3px solid var(--accent); }

/* ==========================================================================
   Tampon d'enregistrement (élément signature, conservé)
   ========================================================================== */

.stamp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-weight: 600; font-size: 12.5px;
  color: var(--stamp-strong);
  border: 2px solid var(--stamp);
  padding: 5px 11px; border-radius: 6px;
  transform: rotate(-2deg);
  background: var(--stamp-soft);
  letter-spacing: .02em; white-space: nowrap;
}
.stamp-badge::before { content: '№'; opacity: .7; }
@keyframes stampIn { 0% { transform: rotate(-2deg) scale(2.1); opacity: 0; } 60% { transform: rotate(-2deg) scale(.94); opacity: 1; } 100% { transform: rotate(-2deg) scale(1); } }
.stamp-badge.stamp-animate { animation: stampIn .4s var(--ease); }

/* ==========================================================================
   Statistiques — grille bento
   ========================================================================== */

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-icon {
  width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-strong); margin-bottom: 12px;
}
.stat-card.accent-stamp .stat-icon { background: var(--stamp-soft); color: var(--stamp-strong); }
.stat-card.accent-warn .stat-icon { background: var(--warning-soft); color: var(--warning); }
.stat-value { font-family: var(--font-display); font-size: 27px; font-weight: 600; color: var(--text); line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 5px; }

/* ==========================================================================
   Formulaires
   ========================================================================== */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.field .hint { font-size: 12px; color: var(--text-faint); }

input[type=text], input[type=date], input[type=email], input[type=password],
input[type=search], select, textarea {
  font-family: var(--font-body); font-size: 14.5px; padding: 10px 13px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); width: 100%;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none; }
textarea { resize: vertical; min-height: 84px; }

.champ-auto-rempli { border-color: var(--accent) !important; background: var(--accent-soft); animation: surligneAuto 1.8s ease-out; }
.champ-deduit { border: 1.5px dashed var(--warning) !important; background: var(--warning-soft); animation: surligneAuto 1.8s ease-out; }
@keyframes surligneAuto { 0% { box-shadow: 0 0 0 5px var(--accent-soft); } 100% { box-shadow: none; } }

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 13.8px;
  padding: 10px 18px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .12s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-seal { background: var(--accent); color: #fff; box-shadow: 0 4px 12px -4px var(--accent-soft); }
.btn-seal:hover { background: var(--accent-strong); }
.btn-stamp { background: var(--stamp); color: #fff; }
.btn-stamp:hover { background: var(--stamp-strong); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12.3px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.fab {
  position: fixed; z-index: 60;
  display: none;
  align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--stamp); color: #fff; box-shadow: var(--shadow-float);
  border: 3px solid var(--bg);
  transition: transform .15s var(--ease);
}
.fab:active { transform: scale(.92); }

/* ==========================================================================
   Onglets de capture — contrôle segmenté
   ========================================================================== */

.capture-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 18px;
  background: var(--surface-2); border-radius: var(--radius-pill); border: 1px solid var(--border);
}
.capture-tab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-pill); padding: 9px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 12.6px; font-weight: 600; color: var(--text-muted);
  transition: all .18s var(--ease);
}
.capture-tab span.sub { font-weight: 400; font-size: 10.8px; color: var(--text-faint); }
.capture-tab.active { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-sm); }
.capture-tab.active span.sub { color: var(--accent-strong); opacity: .8; }

.capture-panel { display: none; }
.capture-panel.active { display: block; animation: fadeIn .2s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.capture-zone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 32px 20px; text-align: center; background: var(--surface-2); }
.capture-zone p { margin: 8px 0 14px; color: var(--text-muted); font-size: 13.5px; }
.capture-preview { max-width: 100%; max-height: 320px; border-radius: var(--radius-sm); margin: 12px auto 0; display: block; box-shadow: var(--shadow-md); }

.ocr-status {
  display: none; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px;
  color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 11px 14px;
}
.ocr-status.visible { display: flex; }
.ocr-status.error { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.ocr-status.warning { color: var(--warning); background: var(--warning-soft); border-color: var(--warning); }

.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Tableau du registre
   ========================================================================== */

.table-wrap { overflow-x: auto; }
table.registre { width: 100%; border-collapse: collapse; font-size: 13.4px; }
table.registre th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 2px solid var(--text); padding: 10px 12px; white-space: nowrap; }
table.registre td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.registre tbody tr { transition: background .12s var(--ease); }
table.registre tbody tr:hover { background: var(--accent-soft); }
table.registre td.actions { display: flex; gap: 6px; white-space: nowrap; }

.badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.3px; font-weight: 600; }
.badge-attente { background: var(--warning-soft); color: var(--warning); }
.badge-traite { background: var(--accent-soft); color: var(--accent-strong); }
.badge-archive { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }

.thumb { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--border); }

/* ==========================================================================
   Filtres
   ========================================================================== */

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; align-items: flex-end; }
.filters .field { margin-bottom: 0; min-width: 160px; }
.filters .field.grow { flex: 1; min-width: 220px; }

/* ==========================================================================
   Alertes flash (rendu inline, ex: erreurs de formulaire)
   ========================================================================== */

.flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13.4px; display: flex; gap: 10px; align-items: flex-start; }
.flash-success { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent); }
.flash-error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }

/* ==========================================================================
   Connexion
   ========================================================================== */

.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background:
    radial-gradient(circle at 15% 20%, rgba(166,67,42,.25), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(47,107,94,.25), transparent 45%),
    linear-gradient(160deg, var(--spine) 0%, var(--spine-2) 60%, #0B1424 100%);
}
.login-card {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 400px; padding: 40px 34px; border-top: 4px solid var(--stamp);
  animation: fadeIn .3s var(--ease);
}
@media (max-width: 400px) {
  .login-card { padding: 30px 20px; }
}
.login-card .brand-title { font-size: 25px; text-align: center; }
.login-card .brand-sub { text-align: center; display: block; font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 28px; }
.login-card .btn { width: 100%; margin-top: 8px; }
.login-hint { margin-top: 18px; font-size: 12px; color: var(--text-faint); text-align: center; line-height: 1.6; }

/* ==========================================================================
   Vue détaillée
   ========================================================================== */

.detail-grid { display: grid; grid-template-columns: 260px 1fr; gap: 22px; }
.detail-image { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.detail-image img { width: 100%; display: block; }
.detail-image .no-image { padding: 60px 10px; text-align: center; color: var(--text-faint); font-size: 13px; }

.dl { display: grid; grid-template-columns: 150px 1fr; row-gap: 12px; column-gap: 14px; font-size: 14px; }
.dl dt { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; align-self: start; padding-top: 2px; }
.dl dd { margin: 0; }

@media (max-width: 480px) {
  .dl { grid-template-columns: 1fr; row-gap: 3px; }
  .dl dt { margin-top: 10px; }
  .dl dt:first-child { margin-top: 0; }
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.empty-state { text-align: center; padding: 54px 20px; color: var(--text-muted); }
.empty-state h3 { color: var(--text); }

/* ==========================================================================
   Barre de navigation basse (mobile) + FAB
   ========================================================================== */

.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: var(--bottomnav-h);
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--border);
  align-items: center; justify-content: space-around;
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--text-faint); font-size: 10.5px; font-weight: 600; flex: 1; padding: 6px 0;
}
.bottom-nav a.active { color: var(--accent-strong); }
.bottom-nav a svg { opacity: .9; }
.bottom-nav .nav-fab-slot { flex: 1; display: flex; justify-content: center; position: relative; }

/* ==========================================================================
   Bannière d'installation ("Ajouter à l'écran d'accueil")
   ========================================================================== */

.install-banner {
  position: fixed; left: 12px; right: 12px; z-index: 150;
  bottom: calc(env(safe-area-inset-bottom, 0) + 12px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 12px 12px 12px 14px;
  display: flex; align-items: center; gap: 10px;
  animation: slideUpIn .3s var(--ease);
  max-width: 420px; margin: 0 auto;
}
@media (min-width: 881px) { .install-banner { left: auto; right: 24px; bottom: 24px; } }
@media (max-width: 880px) { .install-banner { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0) + 10px); } }
.install-banner-icon { font-size: 20px; flex-shrink: 0; }
.install-banner-text { font-size: 12.8px; color: var(--text); line-height: 1.4; flex: 1; }
.install-banner-close { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px; padding: 4px; flex-shrink: 0; }
@keyframes slideUpIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Retour tactile réservé aux petits éléments atomiques (nav, onglets, FAB) : sur un grand
   conteneur comme .card ou une ligne de tableau, un scale() décale visuellement son contenu
   de plusieurs pixels depuis le centre de l'élément (l'effet CSS :active remonte aux ancêtres
   dès qu'un enfant est pressé) — ce qui désynchronisait la position affichée des boutons
   "Voir"/"Modifier" et leur zone réellement cliquable au moment du relâchement du doigt. */
.nav-tabs a:active, .bottom-nav a:active, .capture-tab:active, .stat-card:active { transform: scale(.985); }
.bottom-nav a { transition: color .15s var(--ease), transform .1s var(--ease); }
.fab:hover { transform: translateY(-2px); }


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .detail-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .sidebar { display: none; }
  .quick-search { display: none; }
  .main { padding: 18px 16px calc(var(--bottomnav-h) + 28px); }
  .topbar { padding-left: 16px; padding-right: 16px; }
  .bottom-nav { display: flex; }
  .fab { display: flex; bottom: calc(var(--bottomnav-h) + 14px); right: 18px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 21px; }
  .card { padding: 16px; }
  .capture-tab span.sub { display: none; }
  .filters .field { min-width: 130px; }
  .filters .field.grow { min-width: 100%; }

  table.registre thead { display: none; }
  table.registre, table.registre tbody, table.registre tr, table.registre td { display: block; width: 100%; }
  table.registre tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; padding: 10px 12px; background: var(--surface); }
  table.registre td { border: none; padding: 4px 0; }
  table.registre td.actions { justify-content: flex-start; padding-top: 8px; }
  table.registre td[data-label]::before {
    content: attr(data-label); display: block; font-size: 10px; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: .04em; margin-bottom: 1px;
  }

  /* Barre d'actions tactile : Voir/Modifier deviennent de vrais boutons pleine largeur
     (44px de hauteur minimum, recommandation standard iOS/Android) plutôt que des
     petits liens serrés côte à côte, difficiles à toucher précisément au doigt. */
  table.registre td.actions {
    display: flex; gap: 8px; margin-top: 8px; padding-top: 12px;
    border-top: 1px dashed var(--border);
  }
  table.registre td.actions .btn {
    flex: 1; justify-content: center; min-height: 44px; padding: 10px 12px; font-size: 13px;
  }

  /* Groupes de boutons d'en-tête de carte (fiche dossier, listes...) : mêmes cibles généreuses. */
  .card-header { row-gap: 10px; }
  .card-header > div:not(.stats-grid) { display: flex; gap: 8px; flex-wrap: wrap; }
  .card-header .btn { min-height: 42px; padding: 9px 14px; }

  /* Menu compte : zone de toucher confortable pour ouvrir le menu déroulant. */
  .account-menu summary { min-height: 40px; padding: 6px 12px; }
}

@media (max-width: 420px) {
  .account-menu .acc-text { display: none; }
}