:root {
  --bg: #081120;
  --bg-soft: #122038;
  --panel: #0e1829;
  --panel-2: #152641;
  --line: rgba(255,255,255,.08);
  --text: #e7eefb;
  --muted: #98a9c4;
  --primary: #3b82f6;
  --primary-2: #6ba8ff;
  --success: #1dbf73;
  --warning: #f4b400;
  --danger: #ff5d5d;
  --radius: 16px;
  --shadow: 0 18px 42px rgba(0,0,0,.26);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #132746 0%, #081120 54%, #040913 100%);
  color: var(--text);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }
.container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.page-wrapper { min-height: calc(100vh - 160px); padding: 36px 0 64px; }
.centered-page { display: flex; align-items: center; }
.narrow-container { max-width: 620px; }

.main-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(5,11,21,.84);
  backdrop-filter: blur(14px);
}
.header-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
}
.logo { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.logo-mark {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  padding: 4px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(47,125,246,.2), rgba(90,160,255,.08));
  border: 1px solid rgba(255,255,255,.08);
}
.logo-mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.logo-text { display: flex; flex-direction: column; }
.logo-title { font-weight: 800; letter-spacing: .04em; }
.logo-subtitle { font-size: .86rem; color: var(--muted); }

.main-nav, .footer-links, .inline-list, .filters-row, .hero-actions, .hero-badges, .stats-row, .tab-switcher, .actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.main-nav { align-items: center; }
.main-nav a, .mobile-nav a, .sidebar-nav a, .sidebar-nav button, .admin-tab-button {
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--muted);
  transition: .2s ease;
}
.main-nav a:hover, .mobile-nav a:hover, .sidebar-nav a:hover, .admin-tab-button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.main-nav a.active, .sidebar-nav a.active, .admin-tab-button.active { background: rgba(47,125,246,.18); color: #fff; }
.mobile-menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
}
.mobile-nav {
  display: none;
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto 14px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(15,28,50,.95);
}
.mobile-nav.open { display: grid; gap: 6px; }

.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  padding: 34px 0 18px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(90,160,255,.25);
  background: rgba(47,125,246,.12);
  color: #cfe1ff;
  font-size: .92rem;
  margin-bottom: 14px;
}
.hero h1 { margin: 0 0 12px; font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.05; letter-spacing: -.03em; }
.hero p, .section-copy, .topbar p, .card p, .static-box, .empty-state p { color: var(--muted); line-height: 1.75; }
.hero-panel, .card, .form-card, .sidebar, .content-area, .site-card {
  background: linear-gradient(180deg, rgba(19,35,59,.95), rgba(10,19,34,.96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-panel, .card, .site-card { padding: 20px; }
.simple-panel { min-height: 100%; }
.check-list { display: grid; gap: 14px; margin-top: 16px; }
.check-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.check-item span {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(29,191,115,.16);
  color: #7ff4b4;
}

.section { padding: 28px 0; }
.section-title { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.center { text-align: center; }
.feature-grid, .cards-grid, .sites-grid, .kpi-grid, .admin-overview-grid, .qr-grid {
  display: grid;
  gap: 18px;
}
.feature-grid, .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sites-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 18px 0 22px; }
.admin-overview-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.qr-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.icon-badge {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(47,125,246,.14);
  color: #8ec2ff;
  margin-bottom: 16px;
  font-size: 1.15rem;
}

.pill, .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .9rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.badge-success, .status-approved, .scan-ok {
  background: rgba(29,191,115,.14);
  color: #8af2bc;
  border-color: rgba(29,191,115,.28);
}
.badge-warning, .status-pending {
  background: rgba(244,180,0,.14);
  color: #ffd86d;
  border-color: rgba(244,180,0,.28);
}
.badge-danger, .status-rejected {
  background: rgba(255,93,93,.14);
  color: #ffb2b2;
  border-color: rgba(255,93,93,.28);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
}
.btn-secondary {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.08);
  color: #fff;
}
.btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,.12);
  color: var(--text);
}
.btn-danger {
  background: rgba(255,93,93,.12);
  border-color: rgba(255,93,93,.24);
  color: #ffd1d1;
}
.btn-success {
  background: rgba(29,191,115,.14);
  border-color: rgba(29,191,115,.26);
  color: #8af2bc;
}
.btn-sm { padding: 10px 14px; font-size: .92rem; }
.btn-full { width: 100%; }

.form-card { padding: 28px; max-width: 980px; margin: 0 auto; }
.form-card-wide { max-width: 980px; }
.form-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 10px; }
.form-subtitle { color: var(--muted); margin-bottom: 24px; line-height: 1.7; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-group { display: grid; gap: 8px; }
.form-group label { font-weight: 600; color: #dce7fb; }
.form-control, .static-box {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
}
select.form-control option { color: #091221; }
.form-control::placeholder { color: #6f829f; }
.form-control:focus { border-color: rgba(90,160,255,.55); box-shadow: 0 0 0 4px rgba(47,125,246,.12); }
.form-divider { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.section-label { font-weight: 700; color: #dce7fb; margin-bottom: 18px; display: inline-flex; gap: 10px; align-items: center; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .03em; }

.alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 16px;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,.08);
}
.alert i { margin-top: 3px; }
.alert-success { background: rgba(29,191,115,.12); color: #c7f6dc; border-color: rgba(29,191,115,.2); }
.alert-info { background: rgba(47,125,246,.12); color: #d6e7ff; border-color: rgba(47,125,246,.2); }
.alert-warning { background: rgba(244,180,0,.12); color: #ffebaa; border-color: rgba(244,180,0,.2); }
.alert-danger { background: rgba(255,93,93,.12); color: #ffd0d0; border-color: rgba(255,93,93,.2); }

.dashboard-shell { padding: 28px 0 64px; }
.dashboard-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
}
.single-content-grid { grid-template-columns: 250px minmax(0, 1fr); }
.sidebar, .content-area { padding: 20px; }
.compact-sidebar { align-self: start; position: sticky; top: 92px; }
.sidebar-user {
  margin: 20px 0;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  display: grid;
  gap: 6px;
}
.sidebar-user strong { font-size: 1rem; }
.sidebar-user span { color: var(--muted); font-size: .92rem; }
.sidebar-nav { display: grid; gap: 8px; }
.sidebar-nav button {
  border: 1px solid rgba(255,255,255,.08);
  background: transparent;
  text-align: left;
  color: var(--muted);
  cursor: pointer;
}
.admin-tab-nav { align-items: stretch; }
.content-area { min-height: 75vh; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.topbar h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.compact-topbar { margin-bottom: 24px; }
.panel-list { display: grid; gap: 18px; }
.metric-card {
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.metric-label { color: var(--muted); font-size: .92rem; margin-bottom: 10px; }
.metric-value { font-size: 2rem; font-weight: 800; }
.metric-trend { color: #cddaf2; font-size: .9rem; margin-top: 6px; }

.table-wrap {
  overflow: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
}
.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.table th, .table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-align: left;
  vertical-align: top;
}
.table th { color: #d9e5fb; background: rgba(255,255,255,.04); font-weight: 700; }
.table td { color: #c6d4ec; }
.table tr:last-child td { border-bottom: 0; }

.split-grid, .two-column-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-card {
  display: grid;
  gap: 14px;
}
.site-meta { display: grid; gap: 8px; color: var(--muted); font-size: .96rem; }
.site-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.site-header h3, .card h3 { margin: 0; }
.small-note { color: var(--muted); font-size: .92rem; }
.list-stack { display: grid; gap: 12px; }
.list-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.checkpoint-list { display: grid; gap: 10px; margin-top: 14px; }
.checkpoint-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.success-panel {
  padding: 18px;
  border-radius: 16px;
  background: rgba(29,191,115,.12);
  border: 1px solid rgba(29,191,115,.2);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.success-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(29,191,115,.2);
  color: #9ef3c7;
  font-size: 1.2rem;
}
.scan-box {
  display: grid;
  gap: 16px;
}
.camera-box {
  min-height: 280px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  display: grid;
  gap: 14px;
  place-items: center;
  padding: 16px;
}
#reader { width: 100%; max-width: 420px; min-height: 240px; }
#reader video, #reader canvas {
  width: 100% !important;
  border-radius: 16px;
  object-fit: cover;
}
.camera-status {
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.camera-status-success {
  border-color: rgba(29,191,115,.28);
  background: rgba(29,191,115,.12);
}
.camera-status-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: #dce7fb;
}
.camera-status-success .camera-status-icon {
  background: rgba(29,191,115,.22);
  color: #9ef3c7;
}
.empty-state {
  padding: 24px;
  text-align: center;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.filters-row { margin-bottom: 18px; }
.footer {
  border-top: 1px solid var(--line);
  background: rgba(5,11,21,.92);
  margin-top: 40px;
}
.footer-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  color: var(--muted);
}
.footer-links { justify-content: center; }

.qr-card canvas, .qr-card img {
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  margin-top: 14px;
}
.subtle-divider {
  height: 1px;
  background: var(--line);
  margin: 14px 0;
}
.simple-card { padding: 20px; }
.admin-tab-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.admin-empty-state {
  min-height: 280px;
  display: grid;
  place-items: center;
}
#qrcodeCanvasHolder { display: flex; justify-content: center; }
.counter-text { color: var(--muted); font-size: .95rem; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  color: #dce7fb;
  font-size: .88rem;
}

@media (max-width: 980px) {
  .hero,
  .dashboard-grid,
  .single-content-grid,
  .feature-grid,
  .cards-grid,
  .form-grid,
  .split-grid,
  .two-column-grid,
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .topbar, .site-header, .list-row, .checkpoint-item { flex-direction: column; align-items: stretch; }
  .compact-sidebar { position: static; }
}

@media (max-width: 820px) {
  .main-nav { display: none; }
  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .header-inner { gap: 12px; }
  .hero { padding-top: 26px; }
}

@media (max-width: 640px) {
  .container, .header-inner, .footer-inner, .mobile-nav { width: min(var(--max), calc(100% - 20px)); }
  .hero h1 { font-size: 2rem; }
  .form-card, .sidebar, .content-area, .card, .hero-panel, .site-card { padding: 18px; }
  .btn { width: 100%; }
  .hero-actions .btn, .actions-row .btn, .inline-list .btn { width: 100%; }
  .hero-actions, .inline-list, .filters-row, .actions-row { flex-direction: column; }
}


.clean-hero .hero-copy {
  display: grid;
  gap: 14px;
  align-content: start;
}

.hero-title-compact {
  max-width: 12ch;
  text-wrap: balance;
}

.hero-lead {
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.7;
}

.install-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(90, 160, 255, .18);
  background: rgba(255,255,255,.04);
}

.install-strip strong {
  display: block;
  color: #fff;
  margin-bottom: 4px;
}

.hero-checklist .hero-panel h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.logo-title {
  font-weight: 800;
  letter-spacing: .06em;
}

.form-title {
  font-size: 1.65rem;
}

@media (max-width: 820px) {
  .install-strip {
    flex-direction: column;
    align-items: stretch;
  }
}

body[data-device="desktop"] .hero.clean-hero {
  min-height: calc(100vh - 180px);
}

body[data-device="desktop"] .content-area {
  overflow: hidden;
}

body[data-device="mobile"] .dashboard-shell {
  padding-top: 20px;
}

body[data-device="mobile"] .dashboard-grid {
  gap: 14px;
}

body[data-device="mobile"] .sidebar {
  padding: 16px;
}

body[data-device="mobile"] .sidebar .logo {
  display: none;
}

body[data-device="mobile"] .sidebar-user {
  margin: 0 0 14px;
}

body[data-device="mobile"] .sidebar-nav {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

body[data-device="mobile"] .sidebar-nav a,
body[data-device="mobile"] .sidebar-nav button,
body[data-device="mobile"] .admin-tab-button {
  min-height: 48px;
}

body[data-device="mobile"] .camera-box {
  min-height: 220px;
  padding: 12px;
}

body[data-device="mobile"] #reader,
body[data-device="mobile"] .camera-status {
  max-width: none;
}

body[data-device="mobile"] .logo-mark {
  width: 52px;
  height: 52px;
}

body[data-device="mobile"] .logo-subtitle {
  max-width: 26ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .hero-title-compact {
    max-width: none;
  }

  .hero-lead {
    font-size: .96rem;
  }
}

body[data-dashboard-role="vigile"] .guard-card {
  overflow: hidden;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .dashboard-shell {
  padding-top: 14px;
  padding-bottom: 40px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .container {
  width: min(var(--max), calc(100% - 16px));
}

body[data-dashboard-role="vigile"][data-device="mobile"] .sidebar,
body[data-dashboard-role="vigile"][data-device="mobile"] .content-area {
  padding: 14px;
  border-radius: 18px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .topbar {
  gap: 10px;
  margin-bottom: 14px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .topbar h1 {
  font-size: 1.45rem;
  margin-bottom: 4px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .topbar p {
  margin: 0;
  line-height: 1.5;
  font-size: .94rem;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .inline-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .pill {
  width: 100%;
  justify-content: center;
  padding: 8px 10px;
  font-size: .82rem;
  text-align: center;
}

body[data-dashboard-role="vigile"][data-device="mobile"] #dashboardStats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .metric-card {
  padding: 14px;
  border-radius: 14px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .metric-label {
  font-size: .78rem;
  line-height: 1.35;
  margin-bottom: 8px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .metric-value {
  font-size: 1.42rem;
  line-height: 1;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .metric-trend {
  font-size: .78rem;
  margin-top: 6px;
  line-height: 1.35;
}

body[data-dashboard-role="vigile"][data-device="mobile"] #dashboardSections {
  gap: 12px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .guard-card {
  padding: 15px;
  border-radius: 18px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .guard-card h3 {
  font-size: 1.05rem;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .guard-scan-box {
  gap: 12px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .guard-manual-grid {
  gap: 10px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .guard-manual-grid .form-control {
  min-height: 46px;
  padding: 11px 12px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .guard-manual-grid .btn {
  min-height: 46px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .guard-scan-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .guard-scan-actions .btn {
  width: 100%;
  min-height: 46px;
  padding: 11px 10px;
}

/* =========================================================
   STATS PAR ENTREPRISE — SURVOEIL v4
   ========================================================= */

/* Bloc par vigile dans l'onglet stats */
.guard-stats-block {
  transition: box-shadow .2s;
}
.guard-stats-block:hover {
  box-shadow: 0 4px 24px rgba(59,130,246,.12);
}
.guard-stats-header {
  gap: 10px;
}

/* Badge service debut / fin */
.badge-debut { background: rgba(16,185,129,.15); color: #10b981; border: 1px solid rgba(16,185,129,.3); }
.badge-fin   { background: rgba(239,68,68,.15);  color: #ef4444; border: 1px solid rgba(239,68,68,.3); }

/* Tableau des créneaux horaires */
.slots-table { font-size: .82rem; }
.slots-table td, .slots-table th { padding: 7px 10px; }

/* Inline-list tags (multi-wrapper) */
.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Colonne stats entreprise admin */
.company-stats-header {
  background: var(--gradient-surface, linear-gradient(135deg,rgba(15,26,50,.9),rgba(11,22,40,.96)));
  border: 1px solid rgba(59,130,246,.35);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Responsive : onglet stats sur mobile */
@media (max-width: 640px) {
  .guard-stats-header { flex-direction: column; align-items: flex-start; }
  .company-stats-header { flex-direction: column; }
  .slots-table { font-size: .75rem; }
  .slots-table td, .slots-table th { padding: 5px 7px; }
}

/* ── Badge scan type (Début / Passage / Fin) ────────────────────────── */
.badge-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.badge-type-début,
.badge-type-debut {
  background: rgba(16,185,129,.15);
  color: #10b981;
  border-color: rgba(16,185,129,.3);
}
.badge-type-passage {
  background: rgba(59,130,246,.14);
  color: #6ba8ff;
  border-color: rgba(59,130,246,.28);
}
.badge-type-fin {
  background: rgba(239,68,68,.14);
  color: #fca5a5;
  border-color: rgba(239,68,68,.28);
}

/* Badge variables de couleur manquantes */
:root {
  --blue: #3b82f6;
  --orange: #f97316;
  --green: #10b981;
  --red: #ef4444;
  --green-2: rgba(16,185,129,.15);
  --line: rgba(255,255,255,.08);
  --bg-2: #0b1628;
  --gradient-surface: linear-gradient(135deg, rgba(15,26,50,.9) 0%, rgba(11,22,40,.96) 100%);
  --gradient-card: linear-gradient(145deg, rgba(15,28,55,.95) 0%, rgba(10,20,42,.98) 100%);
}

body[data-dashboard-role="vigile"][data-device="mobile"] .guard-camera-box {
  min-height: 200px;
  padding: 10px;
  gap: 10px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] #reader {
  min-height: 190px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] #reader video,
body[data-dashboard-role="vigile"][data-device="mobile"] #reader canvas {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .camera-status {
  padding: 12px;
  gap: 10px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .camera-status strong {
  display: block;
  margin-bottom: 4px;
  font-size: .96rem;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .camera-status .small-note {
  line-height: 1.45;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .success-panel {
  padding: 14px;
  gap: 10px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .success-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .guard-checkpoint-list {
  gap: 10px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .checkpoint-item {
  padding: 12px;
  gap: 8px;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .checkpoint-item strong {
  display: block;
  line-height: 1.38;
  font-size: .95rem;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .checkpoint-item .small-note {
  line-height: 1.45;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .checkpoint-item .badge {
  width: 100%;
  justify-content: center;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table {
  overflow: visible;
  border: 0;
}

body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table {
  min-width: 0;
}

@media (max-width: 640px) {
  body[data-dashboard-role="vigile"][data-device="mobile"] .header-inner {
    gap: 10px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .logo {
    gap: 10px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .logo-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .logo-title {
    font-size: .95rem;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .logo-subtitle {
    display: none;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .sidebar {
    padding: 12px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .sidebar-nav {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .sidebar-nav a,
  body[data-dashboard-role="vigile"][data-device="mobile"] .sidebar-nav button {
    min-height: 44px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .content-area {
    padding: 12px;
    min-height: auto;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .inline-list {
    grid-template-columns: 1fr;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .metric-card {
    padding: 12px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .metric-value {
    font-size: 1.3rem;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-card {
    padding: 13px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-scan-actions .btn {
    font-size: .92rem;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-camera-box {
    min-height: 188px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] #reader {
    min-height: 170px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .camera-status-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table,
  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table thead,
  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table tbody,
  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table tr,
  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table thead {
    display: none;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table tbody {
    display: grid;
    gap: 10px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table tr {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.03);
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table td {
    padding: 0;
    border: 0;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table td + td {
    margin-top: 8px;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table td::before {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table td:nth-child(1)::before {
    content: "Magasin";
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table td:nth-child(2)::before {
    content: "Point";
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table td:nth-child(3)::before {
    content: "Date";
  }

  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table td:nth-child(4)::before {
    content: "Heure";
  }
}

/* =====================================================================
   SURVOEIL v9 — Badges type scan + Torche + Scanner rapide
   ===================================================================== */

/* ── Badges Début / Passage / Fin ─────────────────────────────────── */
.badge-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.badge-type-début,
.badge-type-debut {
  background: rgba(59,130,246,.18);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,.3);
}
.badge-type-passage {
  background: rgba(139,92,246,.18);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,.3);
}
.badge-type-fin {
  background: rgba(16,185,129,.18);
  color: #34d399;
  border: 1px solid rgba(16,185,129,.3);
}

/* ── Bouton torche/flash ──────────────────────────────────────────── */
#torchBtn {
  transition: background .2s, color .2s, box-shadow .2s;
}
#torchBtn[data-torch-on="true"],
#torchBtn.torch-on {
  background: rgba(244,180,0,.18);
  color: #f4b400;
  border-color: #f4b400;
  box-shadow: 0 0 12px rgba(244,180,0,.35);
}

/* ── Zone caméra scanner ─────────────────────────────────────────── */
.guard-camera-box {
  position: relative;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  min-height: 220px;
}

/* html5-qrcode reader – apparition rapide, pas de clignotement */
#reader {
  border-radius: 10px;
  overflow: hidden;
  min-height: 200px;
  background: #000;
}
#reader video {
  border-radius: 10px;
  width: 100% !important;
  height: auto !important;
}
#reader img { display: none !important; }  /* masque l'image de placeholder QR */

/* Retrait de la bordure ajoutée par html5-qrcode */
#reader > div[style] { border: none !important; box-shadow: none !important; }

/* ── Panneau succès scan ──────────────────────────────────────────── */
.success-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.35);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 12px;
  animation: fadeInUp .3s ease;
}
.success-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  background: rgba(16,185,129,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #34d399;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Statut caméra ────────────────────────────────────────────────── */
.camera-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
.camera-status-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: rgba(59,130,246,.14);
  color: var(--primary-2);
}
.camera-status-success {
  background: rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.3);
}
.camera-status-success .camera-status-icon {
  background: rgba(16,185,129,.2);
  color: #34d399;
}

/* ── Alerte 5 min avant réouverture ──────────────────────────────── */
.guard-alert-5min {
  animation: pulse-alert 2s infinite;
}
@keyframes pulse-alert {
  0%, 100% { opacity: 1; }
  50%       { opacity: .82; }
}

/* ── Actions row scan (3 boutons : caméra, torche, stop) ─────────── */
.guard-scan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.guard-scan-actions .btn {
  flex: 1 1 auto;
  min-width: 120px;
}

@media (max-width: 480px) {
  .guard-scan-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .guard-scan-actions .btn:first-child { grid-column: 1 / -1; }
}

/* ── Scan box ─────────────────────────────────────────────────────── */
.scan-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.guard-scan-box { gap: 14px; }

/* ── Grille manuelle ──────────────────────────────────────────────── */
.guard-manual-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 480px) {
  .guard-manual-grid { grid-template-columns: 1fr; }
}

/* ── Table compacte historique mobile ─────────────────────────────── */
@media (max-width: 640px) {
  body[data-dashboard-role="vigile"][data-device="mobile"] .guard-history-table .table td:nth-child(3)::before {
    content: "Type";
  }
}

/* ── Colonne Type dans les tableaux admin/entreprise ─────────────── */
.table th, .table td {
  vertical-align: middle;
}

/* ── Barre live indicator ─────────────────────────────────────────── */
[data-live-indicator] {
  font-size: .80rem;
  color: #34d399;
  font-weight: 500;
}

/* ── Print styles ─────────────────────────────────────────────────── */
@media print {
  .no-print, header, footer, .sidebar, .admin-tab-nav, .actions-row { display: none !important; }
  body { background: #fff !important; color: #111 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}



.home-hero {
  padding-bottom: 8px;
}
.home-ops-panel {
  display: grid;
  gap: 16px;
}
.home-mini-grid {
  display: grid;
  gap: 12px;
}
.home-mini-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.home-mini-card strong {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.home-mini-card span {
  color: var(--muted);
  line-height: 1.6;
}
.home-flow-grid,
.home-bottom-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-flow-card,
.home-cta-card {
  position: relative;
  overflow: hidden;
}
.home-step-badge {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 14px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.scan-upload-btn {
  position: relative;
  overflow: hidden;
}
.scan-upload-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 980px) {
  .home-flow-grid,
  .home-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* ── SURVOEIL v13 : Espace Opérateur ─────────────────────────────────── */
.op-pick-card {
  background: #fff;
  padding: 14px;
  border-radius: 12px;
  transition: all .18s ease;
  font-family: inherit;
  color: #0f172a;
}
.op-pick-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.op-pick-card.active { background: #eef4ff; }
.op-pick-card strong { display: block; margin-bottom: 6px; color: #0d1b2f; font-size: 14px; }
.op-pick-card span { color: #475569; font-size: 12px; }

body[data-page="operateur"] .sidebar-user img {
  display: block;
  margin: 0 auto 8px;
}

#operatorReportTable {
  width: 100%;
  table-layout: auto;
}
#operatorReportTable input.form-control,
#operatorReportTable select.form-control {
  min-width: 100px;
  width: 100%;
  box-sizing: border-box;
  pointer-events: auto !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
  position: relative;
  z-index: 1;
}
#operatorReportTable td,
#operatorReportTable th {
  vertical-align: middle;
  white-space: nowrap;
}
#operatorReportTable td[data-cell="store"] {
  white-space: normal;
  min-width: 140px;
}
#operatorReportForm {
  pointer-events: auto;
}
@media (max-width: 820px) {
  #operatorReportTable { font-size: 12px; }
  #operatorReportTable th, #operatorReportTable td { padding: 6px 4px; }
  #operatorReportTable input.form-control,
  #operatorReportTable select.form-control { min-width: 90px; }
}

/* Sélecteurs Étape 1 / Étape 2 (zone & tour) */
.op-selector {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.op-selector .op-select {
  flex: 1;
  min-width: 220px;
  max-width: 420px;
}
@media (max-width: 600px) {
  .op-selector { flex-direction: column; align-items: stretch; }
  .op-selector .op-select { max-width: 100%; }
  .op-selector .btn { width: 100%; }
}

/* ── SURVOEIL v15 : Panels Opérateur & Administrateur ─────────── */
/* Objectif :
   - Espace ADMIN (ordinateur) : format plus large pour afficher
     tout le contenu de la page sans coupure ni scroll inutile.
   - Espace OPÉRATEUR (téléphone) : format compact mais lisible
     pour visualiser le contenu de TOUTES les pages.
   - TABLEAU opérateur (téléphone) : se remplit en mode portrait
     (pas besoin d'incliner le téléphone).                          */

/* — Mode ordinateur (≥ 981px) ——————————————————————————————————————— */
@media (min-width: 981px) {
  /* OPÉRATEUR : reste compact sur ordinateur */
  body[data-page="operateur"] .container.dashboard-shell {
    width: min(1100px, calc(100% - 32px));
    padding: 18px 0 40px;
  }
  body[data-page="operateur"] .single-content-grid {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
  }

  /* ADMIN : format ÉLARGI pour afficher tout le contenu de la page */
  body[data-page="admin"] .container.dashboard-shell {
    width: min(1480px, calc(100% - 28px));
    padding: 22px 0 56px;
  }
  body[data-page="admin"] .single-content-grid {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 22px;
  }

  body[data-page="operateur"] .sidebar,
  body[data-page="operateur"] .content-area,
  body[data-page="admin"] .sidebar,
  body[data-page="admin"] .content-area {
    padding: 18px;
    border-radius: 14px;
  }
  body[data-page="admin"] .content-area {
    padding: 22px 24px;
    overflow: visible;
  }
  body[data-page="operateur"] .topbar h1 {
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    margin-bottom: 4px;
  }
  body[data-page="admin"] .topbar h1 {
    font-size: clamp(1.6rem, 2.4vw, 2.05rem);
    margin-bottom: 6px;
  }
  body[data-page="operateur"] .topbar p,
  body[data-page="admin"] .topbar p {
    font-size: .94rem;
    line-height: 1.55;
    margin: 0;
  }
  body[data-page="operateur"] .compact-topbar,
  body[data-page="admin"] .compact-topbar {
    margin-bottom: 16px;
  }
  body[data-page="operateur"] .panel-list { gap: 12px; }
  body[data-page="admin"] .panel-list { gap: 16px; }

  body[data-page="operateur"] .card,
  body[data-page="operateur"] .site-card {
    padding: 14px 16px;
    border-radius: 14px;
  }
  body[data-page="admin"] .card,
  body[data-page="admin"] .site-card {
    padding: 18px 20px;
    border-radius: 16px;
  }
  body[data-page="operateur"] .sidebar-user,
  body[data-page="admin"] .sidebar-user {
    margin: 14px 0;
    padding: 14px;
    border-radius: 12px;
  }
  body[data-page="operateur"] .sidebar-user strong { font-size: .92rem; }
  body[data-page="admin"] .sidebar-user strong { font-size: .98rem; }
  body[data-page="operateur"] .sidebar-user span { font-size: .82rem; }
  body[data-page="admin"] .sidebar-user span { font-size: .88rem; }

  body[data-page="operateur"] .sidebar-nav a,
  body[data-page="operateur"] .sidebar-nav button {
    padding: 8px 10px;
    font-size: .88rem;
    min-height: 36px;
  }
  body[data-page="admin"] .sidebar-nav a,
  body[data-page="admin"] .sidebar-nav button,
  body[data-page="admin"] .admin-tab-button {
    padding: 10px 14px;
    font-size: .94rem;
    min-height: 42px;
  }
  body[data-page="operateur"] .pill { padding: 5px 10px; font-size: .8rem; }
  body[data-page="admin"] .pill { padding: 6px 12px; font-size: .86rem; }

  body[data-page="operateur"] .site-header h3 { font-size: 1rem; margin: 0 0 4px; }
  body[data-page="admin"] .site-header h3 { font-size: 1.08rem; margin: 0 0 6px; }

  body[data-page="operateur"] .small-note { font-size: .82rem; }
  body[data-page="admin"] .small-note { font-size: .88rem; }

  body[data-page="operateur"] #operatorReportTable th,
  body[data-page="operateur"] #operatorReportTable td {
    padding: 8px 10px;
    font-size: .88rem;
  }
  /* ADMIN : tableau plus aéré pour ne pas tronquer */
  body[data-page="admin"] .table th,
  body[data-page="admin"] .table td {
    padding: 12px 14px;
    font-size: .92rem;
  }
  body[data-page="admin"] .table-wrap { overflow: auto; }

  body[data-page="operateur"] .btn { padding: 8px 14px; font-size: .88rem; }
  body[data-page="admin"] .btn { padding: 10px 16px; font-size: .94rem; }

  body[data-page="operateur"] .form-control { padding: 8px 10px; font-size: .9rem; }
  body[data-page="admin"] .form-control { padding: 10px 12px; font-size: .94rem; }
}

/* — Mode ordinateur très large (≥ 1400px) : ADMIN profite de l'espace — */
@media (min-width: 1400px) {
  body[data-page="admin"] .container.dashboard-shell {
    width: min(1620px, calc(100% - 32px));
  }
  body[data-page="admin"] .single-content-grid {
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 26px;
  }
}

/* — Mode téléphone (≤ 640px) ——————————————————————————————————————— */
@media (max-width: 640px) {
  /* Conteneur global ULTRA-compact pour TOUT afficher en mode portrait */
  body[data-page="operateur"] .container.dashboard-shell,
  body[data-page="admin"] .container.dashboard-shell {
    padding: 8px 0 24px;
  }
  body[data-page="operateur"] .container,
  body[data-page="admin"] .container {
    width: min(var(--max), calc(100% - 8px));
  }
  body[data-page="operateur"] .dashboard-grid,
  body[data-page="admin"] .dashboard-grid {
    gap: 8px;
  }
  body[data-page="operateur"] .sidebar,
  body[data-page="operateur"] .content-area,
  body[data-page="admin"] .sidebar,
  body[data-page="admin"] .content-area {
    padding: 10px;
    border-radius: 10px;
  }
  body[data-page="operateur"] .sidebar-user,
  body[data-page="admin"] .sidebar-user {
    margin: 6px 0;
    padding: 8px;
    border-radius: 8px;
  }
  body[data-page="operateur"] .sidebar-user strong,
  body[data-page="admin"] .sidebar-user strong { font-size: .86rem; }
  body[data-page="operateur"] .sidebar-user span,
  body[data-page="admin"] .sidebar-user span { font-size: .74rem; }
  body[data-page="operateur"] .sidebar-user img {
    width: 44px !important;
    height: 44px !important;
  }
  body[data-page="operateur"] .sidebar-nav,
  body[data-page="admin"] .sidebar-nav {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 5px;
  }
  body[data-page="operateur"] .sidebar-nav a,
  body[data-page="operateur"] .sidebar-nav button,
  body[data-page="admin"] .sidebar-nav a,
  body[data-page="admin"] .sidebar-nav button,
  body[data-page="admin"] .admin-tab-button {
    padding: 7px 8px;
    font-size: .78rem;
    min-height: 34px;
  }
  body[data-page="operateur"] .topbar h1,
  body[data-page="admin"] .topbar h1 {
    font-size: 1.1rem;
    margin: 0 0 3px;
  }
  body[data-page="operateur"] .topbar p,
  body[data-page="admin"] .topbar p {
    font-size: .78rem;
    line-height: 1.4;
  }
  body[data-page="operateur"] .compact-topbar,
  body[data-page="admin"] .compact-topbar {
    margin-bottom: 8px;
  }
  body[data-page="operateur"] .panel-list,
  body[data-page="admin"] .panel-list {
    gap: 8px;
  }
  body[data-page="operateur"] .card,
  body[data-page="admin"] .card,
  body[data-page="operateur"] .site-card,
  body[data-page="admin"] .site-card {
    padding: 10px;
    border-radius: 10px;
  }
  body[data-page="operateur"] .site-header h3,
  body[data-page="admin"] .site-header h3 {
    font-size: .92rem;
    margin: 0 0 3px;
  }
  body[data-page="operateur"] .small-note,
  body[data-page="admin"] .small-note {
    font-size: .74rem;
  }
  body[data-page="operateur"] .pill,
  body[data-page="admin"] .pill {
    padding: 4px 7px;
    font-size: .72rem;
  }
  body[data-page="operateur"] .tag,
  body[data-page="admin"] .tag {
    font-size: .72rem;
  }
  body[data-page="operateur"] .btn,
  body[data-page="admin"] .btn {
    padding: 8px 10px;
    font-size: .82rem;
  }
  body[data-page="operateur"] .form-control,
  body[data-page="admin"] .form-control {
    padding: 7px 9px;
    font-size: .82rem;
  }

  /* === TABLEAU OPÉRATEUR (téléphone) ============================
     Objectif : remplir le tableau SANS incliner le téléphone.
     Solution : transformation en "cartes empilées" (1 ligne = 1 carte),
     chaque cellule prend toute la largeur en portrait.             */
  body[data-page="operateur"] .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  body[data-page="operateur"] #operatorReportTable {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
  }
  body[data-page="operateur"] #operatorReportTable thead {
    display: none; /* les libellés sont injectés via data-label sur chaque td */
  }
  body[data-page="operateur"] #operatorReportTable tbody {
    display: block;
    width: 100%;
  }
  body[data-page="operateur"] #operatorReportTable tr {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
  }
  body[data-page="operateur"] #operatorReportTable td {
    display: block;
    width: 100%;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px dashed rgba(255,255,255,.07);
    white-space: normal;
    text-align: left;
  }
  body[data-page="operateur"] #operatorReportTable tr td:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
  }
  /* Libellé de chaque champ (récupéré depuis l'attribut data-label
     ou data-cell). Si data-label absent, on garde un fallback sobre. */
  body[data-page="operateur"] #operatorReportTable td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #d9e5fb;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
  }
  body[data-page="operateur"] #operatorReportTable td[data-cell="store"] {
    min-width: 0;
  }
  body[data-page="operateur"] #operatorReportTable input.form-control,
  body[data-page="operateur"] #operatorReportTable select.form-control,
  body[data-page="operateur"] #operatorReportTable textarea.form-control {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 9px 10px;
    font-size: 14px;        /* ≥ 14px pour éviter le zoom auto iOS */
    line-height: 1.35;
    border-radius: 10px;
  }
  body[data-page="operateur"] #operatorReportTable select.form-control {
    appearance: none;
    -webkit-appearance: none;
  }

  body[data-page="admin"] .table-wrap { overflow: auto; }
  body[data-page="admin"] .table th,
  body[data-page="admin"] .table td {
    padding: 7px 9px;
    font-size: .78rem;
  }
}

/* — Mode tablette (641-980px) : tableau opérateur fluide ——————————————— */
@media (max-width: 980px) and (min-width: 641px) {
  body[data-page="operateur"] #operatorReportTable {
    display: block;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  body[data-page="operateur"] #operatorReportTable input.form-control,
  body[data-page="operateur"] #operatorReportTable select.form-control {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 14px;
  }
  body[data-page="operateur"] .table-wrap { overflow: visible; }
}


/* === SURVOEIL UI Refresh v26 === */
:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --bg-soft: #eef2f8;
  --panel: rgba(255,255,255,.92);
  --panel-2: rgba(248,250,252,.96);
  --surface-elevated: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,248,252,.98));
  --surface-contrast: #ffffff;
  --surface-muted: rgba(255,255,255,.82);
  --line: rgba(15,23,42,.10);
  --line-strong: rgba(15,23,42,.16);
  --text: #0f172a;
  --heading: #020617;
  --muted: #475569;
  --soft-text: #64748b;
  --primary: #2563eb;
  --primary-2: #60a5fa;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --shadow: 0 18px 45px rgba(15, 23, 42, .08);
  --shadow-soft: 0 12px 30px rgba(15, 23, 42, .06);
  --radius: 18px;
  --gradient-page: radial-gradient(circle at top, #ffffff 0%, #f7f9fc 42%, #edf2f8 100%);
  --gradient-header: rgba(255,255,255,.82);
  --gradient-mobile-nav: rgba(255,255,255,.96);
  --gradient-accent-soft: linear-gradient(135deg, rgba(37,99,235,.10), rgba(96,165,250,.06));
  --gradient-surface: linear-gradient(135deg, rgba(255,255,255,.96), rgba(241,245,249,.94));
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,247,251,.96));
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000000;
    --bg-soft: #050505;
    --panel: rgba(10,10,10,.92);
    --panel-2: rgba(18,18,18,.96);
    --surface-elevated: linear-gradient(180deg, rgba(18,18,18,.96), rgba(8,8,8,.98));
    --surface-contrast: #0d0d0d;
    --surface-muted: rgba(255,255,255,.03);
    --line: rgba(255,255,255,.08);
    --line-strong: rgba(255,255,255,.14);
    --text: #f5f5f5;
    --heading: #ffffff;
    --muted: #a3a3a3;
    --soft-text: #737373;
    --primary: #3b82f6;
    --primary-2: #60a5fa;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #f87171;
    --shadow: 0 22px 50px rgba(0, 0, 0, .45);
    --shadow-soft: 0 16px 32px rgba(0, 0, 0, .35);
    --gradient-page: radial-gradient(circle at top, #121212 0%, #060606 46%, #000000 100%);
    --gradient-header: rgba(0,0,0,.82);
    --gradient-mobile-nav: rgba(10,10,10,.96);
    --gradient-accent-soft: linear-gradient(135deg, rgba(59,130,246,.18), rgba(96,165,250,.08));
    --gradient-surface: linear-gradient(135deg, rgba(18,18,18,.96), rgba(7,7,7,.98));
    --gradient-card: linear-gradient(145deg, rgba(18,18,18,.98), rgba(8,8,8,.98));
  }
}

html { background: var(--bg); }
body {
  background: var(--gradient-page);
  color: var(--text);
  transition: background-color .25s ease, color .25s ease;
}

.main-header {
  background: var(--gradient-header);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(15,23,42,.04);
}

.logo-mark {
  background: var(--gradient-accent-soft);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.logo-title,
.hero h1,
.section-title,
.topbar h1,
.form-title,
.site-header h3,
.card h3,
.home-mini-card strong,
.install-strip strong,
.footer strong,
.table th,
.form-group label,
.section-label {
  color: var(--heading) !important;
}

.logo-subtitle,
.hero p,
.section-copy,
.topbar p,
.card p,
.static-box,
.empty-state p,
.small-note,
.counter-text,
.metric-label,
.metric-trend,
.table td,
.footer-inner,
.form-subtitle,
.home-mini-card span {
  color: var(--muted);
}

.main-nav a,
.mobile-nav a,
.sidebar-nav a,
.sidebar-nav button,
.admin-tab-button {
  color: var(--muted);
}
.main-nav a:hover,
.mobile-nav a:hover,
.sidebar-nav a:hover,
.admin-tab-button:hover,
.sidebar-nav button:hover {
  color: var(--heading);
  background: rgba(37,99,235,.08);
}
.main-nav a.active,
.sidebar-nav a.active,
.admin-tab-button.active {
  background: rgba(37,99,235,.12);
  color: var(--heading);
  border-color: rgba(37,99,235,.16);
}

.mobile-menu-btn,
.admin-tab-button,
.sidebar-nav button,
.btn-outline,
.btn-secondary,
.form-control,
.static-box,
.table-wrap,
.camera-status,
.empty-state,
.tag,
.pill,
.badge,
.metric-card,
.list-row,
.checkpoint-item,
.check-item,
.sidebar-user,
.home-mini-card,
.install-strip {
  border-color: var(--line) !important;
}

.mobile-nav {
  background: var(--gradient-mobile-nav);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.hero-panel,
.card,
.form-card,
.sidebar,
.content-area,
.site-card,
.company-stats-header {
  background: var(--surface-elevated) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow);
}

.form-card,
.sidebar,
.content-area,
.card,
.hero-panel,
.site-card,
.metric-card,
.list-row,
.checkpoint-item,
.check-item,
.sidebar-user,
.home-mini-card,
.table-wrap,
.empty-state,
.camera-status,
.install-strip {
  backdrop-filter: blur(10px);
}

.check-item,
.sidebar-user,
.metric-card,
.list-row,
.checkpoint-item,
.home-mini-card,
.tag,
.pill,
.badge,
.camera-status,
.install-strip,
.form-control,
.static-box,
.empty-state {
  background: var(--surface-muted) !important;
}

.icon-badge,
.eyebrow {
  background: rgba(37,99,235,.10);
  color: var(--primary);
  border-color: rgba(37,99,235,.16);
}

.eyebrow {
  color: var(--primary);
}

.btn {
  font-weight: 600;
  box-shadow: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 14px 26px rgba(37,99,235,.22);
}
.btn-secondary {
  background: var(--surface-muted);
  color: var(--heading);
}
.btn-outline {
  background: transparent;
  color: var(--heading);
}
.btn-danger {
  color: var(--danger);
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.16);
}
.btn-success {
  color: var(--success);
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.16);
}

.form-control,
.static-box,
.select2,
.table-wrap,
.tag,
.pill,
.badge,
.admin-tab-button,
.sidebar-nav button,
.mobile-menu-btn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.form-control::placeholder {
  color: var(--soft-text);
}
.form-control:focus {
  border-color: rgba(37,99,235,.34) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}
select.form-control option {
  color: var(--text);
  background: var(--surface-contrast);
}

.table {
  background: transparent;
}
.table th {
  background: color-mix(in srgb, var(--surface-contrast) 94%, transparent);
}
.table th,
.table td {
  border-bottom-color: var(--line) !important;
}
.table tbody tr:hover td {
  background: rgba(37,99,235,.04);
}

.footer {
  background: color-mix(in srgb, var(--surface-contrast) 92%, transparent);
  border-top-color: var(--line);
}
.footer strong {
  color: var(--heading) !important;
}
.footer-links a:hover {
  color: var(--heading);
}

.qr-card canvas,
.qr-card img {
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
}

.op-pick-card {
  background: var(--surface-contrast);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.op-pick-card.active {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.16);
}
.op-pick-card strong,
.op-pick-card span {
  color: inherit;
}

.company-stats-header {
  border-color: rgba(37,99,235,.18) !important;
}

[data-live-indicator] {
  color: var(--success);
}

body[data-page="operateur"] #operatorReportTable td::before {
  color: var(--heading);
  opacity: .72;
}

@media (prefers-color-scheme: dark) {
  .main-header {
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
  }
  .btn-secondary,
  .tag,
  .pill,
  .badge,
  .form-control,
  .static-box,
  .camera-status,
  .empty-state,
  .list-row,
  .check-item,
  .checkpoint-item,
  .metric-card,
  .sidebar-user,
  .home-mini-card,
  .install-strip {
    background: rgba(255,255,255,.03) !important;
  }
  .table tbody tr:hover td {
    background: rgba(255,255,255,.03);
  }
  .qr-card canvas,
  .qr-card img {
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
  }
}

@media (max-width: 640px) {
  .main-header {
    backdrop-filter: blur(16px);
  }
  .hero,
  .dashboard-grid,
  .single-content-grid {
    gap: 16px;
  }
}

/* =====================================================================
   SURVOEIL v28 — Arrière-plan visuel de marque sur toutes les pages
   ---------------------------------------------------------------------
   Utilise ::before sur <body> pour afficher la bannière SURVOEIL en
   arrière-plan fixe, visible mais discret, qui s'adapte au mode clair
   et au mode sombre via prefers-color-scheme.
   ===================================================================== */

body {
  position: relative;
  /* L'image de marque est placée derrière tout le contenu */
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../images/survoeil-bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  /* Mode clair par défaut : l'image est claire, on la laisse bien visible
     mais légèrement adoucie pour ne pas gêner la lecture */
  opacity: 0.32;
  filter: saturate(1.1);
  transition: opacity .3s ease, filter .3s ease;
}

/* Voile blanc en mode clair pour fondre l'image avec le fond pastel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(245,247,251,0.78) 55%,
    rgba(237,242,248,0.88) 100%
  );
  transition: background .3s ease;
}

/* === Mode sombre === */
@media (prefers-color-scheme: dark) {
  body::before {
    /* v29.1 : en mode sombre, on rend l'image de marque nettement
       plus visible tout en gardant un léger assombrissement pour le
       confort de lecture. */
    opacity: 0.42;
    filter: saturate(1.15) brightness(1.05) contrast(1.05);
  }
  body::after {
    /* Voile sombre allégé pour laisser respirer l'image */
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.28) 0%,
      rgba(5,5,5,0.45) 55%,
      rgba(0,0,0,0.58) 100%
    );
  }
}

/* === Adaptation responsive ===
   Sur mobile, background-attachment: fixed peut être coûteux et
   parfois bugué sur iOS, on bascule sur scroll pour la performance. */
@media (max-width: 820px) {
  body::before {
    background-attachment: scroll;
    background-size: cover;
    opacity: 0.28;
  }
  @media (prefers-color-scheme: dark) {
    body::before { opacity: 0.38; }
  }
}

/* === Forcer la transparence du body pour laisser passer le ::before ===
   Le body avait un dégradé opaque qui masquait l'image. On le retire
   tout en gardant la couleur de secours dans <html>. */
body {
  background: transparent !important;
}

/* Les zones de contenu (header, footer, cartes) sont déjà semi-transparentes
   grâce à backdrop-filter, donc on n'a rien d'autre à faire — l'image
   transparaîtra naturellement derrière elles. */

/* =====================================================================
   SURVOEIL v29.1 — Hero accueil minimaliste "voir · analyser · protéger"
   ===================================================================== */
.hero.hero-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 16px 32px;
}
.hero-copy-centered {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero-title-brand {
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  margin: 0;
  background: linear-gradient(135deg, #5aa0ff 0%, #2f7df6 55%, #1dbf73 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 18px rgba(47,125,246,0.25);
  line-height: 1.05;
}
.hero-tagline-brand {
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  margin: 0;
  color: #d9e5fb;
  opacity: 0.92;
}
.hero.hero-centered .hero-actions {
  margin-top: 8px;
  justify-content: center;
}
@media (prefers-color-scheme: light) {
  .hero-tagline-brand { color: #1c2a44; }
}
@media (max-width: 600px) {
  .hero.hero-centered { min-height: 55vh; padding: 28px 14px 24px; }
  .hero-tagline-brand { letter-spacing: 0.12em; }
}

/* =====================================================================
   SURVOEIL v29.2 — Correctifs UX demandés
   ---------------------------------------------------------------------
   1) Mode SOMBRE : adoucir l'image de fond pour réduire la netteté
      (la rapprocher du rendu du mode clair).
   2) Page d'ACCUEIL : agrandir l'espace pour mieux respirer.
   3) Boutons "Créer un compte" / "Se connecter" en effet
      "Liquid Glass" semi-transparent.
   4) Espace ADMIN (comptes, opérateurs, magasins, vigiles) :
      éviter la coupure et le besoin de zoomer — autoriser les
      tableaux à scroller, élargir le conteneur, ne plus tronquer
      les colonnes (nom & nombre de rapports).
   5) Mêmes correctifs côté espace OPÉRATEUR sur ordinateur.
   ===================================================================== */

/* ---------- 1) Image de fond moins nette en mode sombre ---------- */
@media (prefers-color-scheme: dark) {
  body::before {
    /* Plus de flou + opacité plus douce pour matcher le mode clair */
    opacity: 0.30 !important;
    filter: saturate(0.95) brightness(0.95) contrast(0.95) blur(2px) !important;
  }
  body::after {
    /* Voile sombre légèrement renforcé pour atténuer encore */
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.40) 0%,
      rgba(5,5,5,0.55) 55%,
      rgba(0,0,0,0.66) 100%
    ) !important;
  }
}
@media (prefers-color-scheme: dark) and (max-width: 820px) {
  body::before { opacity: 0.26 !important; }
}

/* ---------- 2) Page d'accueil plus grande / mieux espacée ---------- */
body[data-page="home"] .hero.hero-centered {
  /* On occupe presque tout l'écran et on aère le contenu */
  min-height: calc(100vh - 220px);
  padding: 80px 24px 64px;
}
body[data-page="home"] .hero-copy-centered {
  max-width: 860px;
  gap: 30px;
}
body[data-page="home"] .hero-title-brand {
  font-size: clamp(3.2rem, 9vw, 6rem);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
body[data-page="home"] .hero-tagline-brand {
  font-size: clamp(1.15rem, 2.8vw, 1.7rem);
  letter-spacing: 0.22em;
}
body[data-page="home"] .hero.hero-centered .hero-actions {
  margin-top: 22px;
  gap: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
body[data-page="home"] .install-strip {
  margin-top: 18px;
}
@media (max-width: 820px) {
  body[data-page="home"] .hero.hero-centered {
    min-height: calc(100vh - 180px);
    padding: 56px 18px 44px;
  }
  body[data-page="home"] .hero-copy-centered { gap: 22px; }
}
@media (max-width: 600px) {
  body[data-page="home"] .hero.hero-centered {
    min-height: calc(100vh - 160px);
    padding: 44px 14px 36px;
  }
}

/* ---------- 3) Boutons d'accueil — effet Liquid Glass ---------- */
body[data-page="home"] .hero-actions .btn {
  position: relative;
  padding: 14px 26px;
  border-radius: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: transform .25s ease, box-shadow .25s ease,
              background .25s ease, border-color .25s ease;
}
body[data-page="home"] .hero-actions .btn-primary {
  /* Bouton primaire en verre bleu lumineux */
  background: linear-gradient(135deg,
              rgba(90, 160, 255, 0.45),
              rgba(47, 125, 246, 0.40) 55%,
              rgba(29, 191, 115, 0.38));
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px rgba(47, 125, 246, 0.25);
}
body[data-page="home"] .hero-actions .btn-primary:hover {
  background: linear-gradient(135deg,
              rgba(90, 160, 255, 0.58),
              rgba(47, 125, 246, 0.55) 55%,
              rgba(29, 191, 115, 0.50));
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 16px 34px rgba(47, 125, 246, 0.32);
}
body[data-page="home"] .hero-actions .btn-secondary {
  /* Bouton secondaire en verre clair */
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(15, 23, 42, 0.18);
}
body[data-page="home"] .hero-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 14px 30px rgba(15, 23, 42, 0.22);
}
/* Reflet "liquid glass" subtil en haut */
body[data-page="home"] .hero-actions .btn::before {
  content: "";
  position: absolute;
  top: 1px; left: 8%; right: 8%;
  height: 38%;
  border-radius: 14px 14px 30px 30px / 14px 14px 18px 18px;
  background: linear-gradient(180deg,
              rgba(255,255,255,0.32) 0%,
              rgba(255,255,255,0.05) 60%,
              rgba(255,255,255,0) 100%);
  pointer-events: none;
}
/* Mode clair : on ajuste pour rester lisible sur fond pastel */
@media (prefers-color-scheme: light) {
  body[data-page="home"] .hero-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.55);
    color: #1c2a44;
    border-color: rgba(28, 42, 68, 0.18);
  }
  body[data-page="home"] .hero-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.75);
  }
  body[data-page="home"] .hero-actions .btn-primary {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
  }
}

/* ---------- 4) ADMIN / OPÉRATEUR — éviter le zoom forcé ---------- */
/* Le bug venait de :
     body[data-device="desktop"] .content-area { overflow: hidden; }
   qui coupait les tableaux trop larges (comptes, opérateurs, magasins,
   vigiles) et obligeait l'utilisateur à zoomer. On rétablit un
   défilement horizontal propre sur le wrapper de tableau, et on
   autorise le contenu admin/opérateur à s'étendre. */
body[data-device="desktop"][data-page="admin"] .content-area,
body[data-device="desktop"][data-page="operateur"] .content-area,
body[data-device="desktop"][data-page="dashboard"] .content-area {
  overflow: visible !important;
}

/* Les tableaux peuvent défiler horizontalement à l'intérieur de leur
   carte au lieu de déborder de la page. */
body[data-page="admin"] .table-wrap,
body[data-page="operateur"] .table-wrap,
body[data-page="dashboard"] .table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* On réduit le min-width pour que les tableaux s'adaptent au conteneur
   sans forcer un scroll dès que la fenêtre est en dessous de 720px de
   contenu utile. */
body[data-page="admin"] .table,
body[data-page="operateur"] .table,
body[data-page="dashboard"] .table {
  min-width: 0;
  width: 100%;
}

/* Onglet OPÉRATEURS de l'admin : il faut que le NOM et le NOMBRE DE
   RAPPORTS s'affichent en entier. On autorise le retour à la ligne sur
   le nom et on garde le compteur sur une seule ligne. */
body[data-page="admin"] .table th,
body[data-page="admin"] .table td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: middle;
}
body[data-page="admin"] .table td .pill,
body[data-page="admin"] .table td .badge,
body[data-page="admin"] .table td .tag {
  white-space: nowrap;
}
/* Pour l'écran ≥ 981px on garde une cellule "Rapports" compacte mais
   visible en entier (ne se coupe pas). */
@media (min-width: 981px) {
  body[data-page="admin"] .table td[data-cell="reports"],
  body[data-page="admin"] .table th[data-cell="reports"],
  body[data-page="admin"] .table td[data-col="reports"],
  body[data-page="admin"] .table th[data-col="reports"] {
    white-space: nowrap;
    text-align: center;
    min-width: 110px;
  }
  /* Élargir un peu le contenu admin et lui donner plus d'espace */
  body[data-page="admin"] .container.dashboard-shell {
    width: min(1620px, calc(100% - 24px));
  }
  body[data-page="admin"] .content-area {
    padding: 22px 22px;
  }
}
@media (min-width: 1400px) {
  body[data-page="admin"] .container.dashboard-shell {
    width: min(1760px, calc(100% - 28px));
  }
}

/* Le conteneur d'onglet admin ne doit pas déborder horizontalement */
body[data-page="admin"] #adminTabContent,
body[data-page="admin"] .panel-list,
body[data-page="operateur"] .panel-list {
  min-width: 0;
  max-width: 100%;
}
body[data-page="admin"] #adminTabContent > *,
body[data-page="admin"] .panel-list > *,
body[data-page="operateur"] .panel-list > * {
  min-width: 0;
  max-width: 100%;
}

/* ---------- 5) Espace OPÉRATEUR sur ordinateur : pas de zoom ------- */
@media (min-width: 981px) {
  /* On élargit légèrement l'opérateur pour que le tableau de rapports
     tienne sans forcer le zoom. */
  body[data-page="operateur"] .container.dashboard-shell {
    width: min(1280px, calc(100% - 28px));
  }
  body[data-page="operateur"] .content-area {
    overflow: visible !important;
    padding: 20px 22px;
  }
  /* Tableau opérateur : autorise wrap dans les cellules longues, mais
     garde les champs (input/select) sur une seule ligne. */
  body[data-page="operateur"] #operatorReportTable td,
  body[data-page="operateur"] #operatorReportTable th {
    white-space: normal;
  }
  body[data-page="operateur"] #operatorReportTable td input.form-control,
  body[data-page="operateur"] #operatorReportTable td select.form-control {
    min-width: 90px;
  }
}

/* ---------- 6) Assurer que l'image hero a bien le min-height ------- */
.hero.hero-centered { min-height: 60vh; }

/* =====================================================================
   SURVOEIL v29.3 — Correctifs UX (suite)
   ---------------------------------------------------------------------
   1) ACCUEIL : forcer "voir · analyser · protéger" sur UNE seule ligne,
      quelle que soit la largeur du téléphone.
   2) Boutons "Liquid Glass" plus transparents, plus beaux
      (verre dépoli vraiment translucide, reflet plus marqué).
   3) TABLEAUX (admin, opérateur, dashboard) sur MOBILE :
      supprimer le bug d'affichage vertical "lettre par lettre".
      Cause : `word-break: break-word; overflow-wrap: anywhere;` forçait
      le navigateur à casser entre chaque caractère quand la cellule
      devenait trop étroite. On revient à un wrapping normal (mots
      entiers) avec un scroll horizontal propre dans `.table-wrap`.
   ===================================================================== */

/* ---------- 1) Tagline d'accueil sur une seule ligne ---------- */
body[data-page="home"] .hero-tagline-brand {
  /* Empêche le retour à la ligne entre voir · analyser · protéger.
     L'espace insécable + le no-wrap garantissent l'affichage en ligne. */
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}
/* On garde une taille qui rentre confortablement sur tous les écrans :
   sur les très petits téléphones (≤ 360px), on rétrécit un peu pour
   éviter qu'un débordement ne se produise. */
@media (max-width: 600px) {
  body[data-page="home"] .hero-tagline-brand {
    font-size: clamp(0.92rem, 4.2vw, 1.25rem);
    letter-spacing: 0.14em;
  }
}
@media (max-width: 380px) {
  body[data-page="home"] .hero-tagline-brand {
    font-size: clamp(0.82rem, 4vw, 1.05rem);
    letter-spacing: 0.10em;
  }
}

/* ---------- 2) Boutons "Liquid Glass" — version plus transparente ---------- */
body[data-page="home"] .hero-actions .btn {
  /* Verre dépoli plus prononcé : blur + saturation augmentés.
     L'arrière-plan transparaît davantage tout en restant lisible. */
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
}
/* Bouton primaire : verre coloré bleu/vert très translucide */
body[data-page="home"] .hero-actions .btn-primary {
  background: linear-gradient(135deg,
              rgba(120, 180, 255, 0.22) 0%,
              rgba(70, 140, 240, 0.18) 50%,
              rgba(40, 200, 140, 0.20) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 22px rgba(255, 255, 255, 0.06),
    0 14px 38px rgba(47, 125, 246, 0.22),
    0 2px 8px rgba(15, 23, 42, 0.10);
}
body[data-page="home"] .hero-actions .btn-primary:hover {
  background: linear-gradient(135deg,
              rgba(120, 180, 255, 0.34),
              rgba(70, 140, 240, 0.30) 50%,
              rgba(40, 200, 140, 0.32));
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 18px 44px rgba(47, 125, 246, 0.30);
}
/* Bouton secondaire : verre clair très translucide */
body[data-page="home"] .hero-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 18px rgba(255, 255, 255, 0.04),
    0 12px 32px rgba(15, 23, 42, 0.18);
}
body[data-page="home"] .hero-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    0 16px 36px rgba(15, 23, 42, 0.24);
}
/* Reflet "liquid glass" amélioré : bande lumineuse + halo diagonal */
body[data-page="home"] .hero-actions .btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  border-radius: 22px 22px 50% 50% / 22px 22px 28px 28px;
  background: linear-gradient(180deg,
              rgba(255,255,255,0.38) 0%,
              rgba(255,255,255,0.10) 55%,
              rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Halo lumineux diagonal qui balaie le bouton (effet verre liquide) */
body[data-page="home"] .hero-actions .btn::after {
  content: "";
  position: absolute;
  top: -50%; left: -20%;
  width: 60%;
  height: 200%;
  background: linear-gradient(115deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,0.18) 45%,
              rgba(255,255,255,0.30) 50%,
              rgba(255,255,255,0.18) 55%,
              rgba(255,255,255,0) 100%);
  transform: rotate(8deg) translateX(-30%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  transition: transform .6s ease, opacity .4s ease;
}
body[data-page="home"] .hero-actions .btn:hover::after {
  transform: rotate(8deg) translateX(220%);
  opacity: 1;
}
/* Le contenu (icône + texte) doit rester au-dessus des reflets */
body[data-page="home"] .hero-actions .btn > * {
  position: relative;
  z-index: 2;
}
body[data-page="home"] .hero-actions .btn {
  /* texte un peu plus lumineux pour contraster avec le verre */
  text-shadow: 0 1px 1px rgba(15, 23, 42, 0.18);
}
/* Mode clair : on remonte les opacités pour rester lisible sur fond pastel */
@media (prefers-color-scheme: light) {
  body[data-page="home"] .hero-actions .btn-primary {
    background: linear-gradient(135deg,
                rgba(90, 160, 255, 0.55),
                rgba(47, 125, 246, 0.50) 55%,
                rgba(29, 191, 115, 0.48));
    border-color: rgba(255, 255, 255, 0.60);
    color: #ffffff;
  }
  body[data-page="home"] .hero-actions .btn-primary:hover {
    background: linear-gradient(135deg,
                rgba(90, 160, 255, 0.68),
                rgba(47, 125, 246, 0.62) 55%,
                rgba(29, 191, 115, 0.58));
  }
  body[data-page="home"] .hero-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(28, 42, 68, 0.16);
    color: #1c2a44;
  }
  body[data-page="home"] .hero-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.65);
  }
  body[data-page="home"] .hero-actions .btn {
    text-shadow: none;
  }
}

/* ---------- 3) Tableaux : corriger l'affichage vertical "lettre par lettre" ---------- */
/* IMPORTANT : la règle v29.2 ci-dessus appliquait
     word-break: break-word; overflow-wrap: anywhere;
   sur toutes les cellules admin. Sur les petits écrans, ces propriétés
   forcent le navigateur à casser un mot caractère par caractère quand
   la cellule devient très étroite — c'est ce qui produisait les colonnes
   où le texte s'affichait verticalement (une lettre par ligne).
   On rétablit un wrapping de mots normal et on laisse `.table-wrap`
   gérer un scroll horizontal propre si le tableau est plus large que
   l'écran. */
body[data-page="admin"] .table th,
body[data-page="admin"] .table td,
body[data-page="operateur"] .table th,
body[data-page="operateur"] .table td,
body[data-page="dashboard"] .table th,
body[data-page="dashboard"] .table td {
  word-break: normal;
  overflow-wrap: break-word;       /* casse seulement si un mot est plus long que la cellule */
  hyphens: none;
  -webkit-hyphens: none;
}

/* Scroll horizontal propre sur les wrappers, peu importe le device. */
body[data-page="admin"] .table-wrap,
body[data-page="operateur"] .table-wrap,
body[data-page="dashboard"] .table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Sur mobile : on garde les noms longs (emails, URLs) sur une seule ligne
   avec ellipsis si nécessaire — pour qu'ils ne soient JAMAIS coupés
   lettre par lettre. L'utilisateur peut faire défiler horizontalement. */
@media (max-width: 820px) {
  body[data-page="admin"] .table,
  body[data-page="dashboard"] .table {
    min-width: 640px;              /* le tableau scrolle dans .table-wrap */
  }
  body[data-page="admin"] .table th,
  body[data-page="admin"] .table td,
  body[data-page="dashboard"] .table th,
  body[data-page="dashboard"] .table td {
    white-space: nowrap;           /* pas de wrap forcé sur mobile */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
    vertical-align: middle;
  }
  /* La cellule "nom + email" peut s'étendre un peu plus, l'email passe
     en small-note sur une 2e ligne (déjà géré par le HTML existant). */
  body[data-page="admin"] .table td .small-note,
  body[data-page="dashboard"] .table td .small-note {
    white-space: normal;           /* le sous-libellé peut revenir à la ligne… */
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    overflow-wrap: anywhere;       /* …pour les emails très longs uniquement ici */
    display: block;
    max-width: 100%;
  }
  /* Les pills/badges/tags restent inline et compacts. */
  body[data-page="admin"] .table td .pill,
  body[data-page="admin"] .table td .badge,
  body[data-page="admin"] .table td .tag,
  body[data-page="dashboard"] .table td .pill,
  body[data-page="dashboard"] .table td .badge,
  body[data-page="dashboard"] .table td .tag {
    white-space: nowrap;
  }
  /* Les boutons d'action ne se compriment pas en colonne verticale. */
  body[data-page="admin"] .table td .btn,
  body[data-page="admin"] .table td .actions-row,
  body[data-page="dashboard"] .table td .btn,
  body[data-page="dashboard"] .table td .actions-row {
    white-space: nowrap;
  }
}

/* Téléphone (≤ 640px) : on resserre encore un peu et on indique le scroll. */
@media (max-width: 640px) {
  body[data-page="admin"] .table-wrap,
  body[data-page="dashboard"] .table-wrap {
    /* indicateur visuel discret que le tableau scrolle */
    background:
      linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 30%) left center / 30px 100% no-repeat,
      linear-gradient(-90deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 30%) right center / 30px 100% no-repeat;
  }
  body[data-page="admin"] .table th,
  body[data-page="admin"] .table td,
  body[data-page="dashboard"] .table th,
  body[data-page="dashboard"] .table td {
    padding: 10px 12px;
    font-size: 0.86rem;
    max-width: 200px;
  }
  /* La première cellule (nom) peut être un peu plus large. */
  body[data-page="admin"] .table td:first-child,
  body[data-page="dashboard"] .table td:first-child {
    max-width: 220px;
    min-width: 140px;
  }
}

/* Filets de sécurité globaux : aucun texte de tableau ne doit plus
   s'afficher verticalement. Si un futur composant réintroduit le bug,
   on l'attrape avec une règle générique. */
.table th, .table td {
  word-break: normal;
  overflow-wrap: break-word;
}
.table th *, .table td * {
  word-break: inherit;
}