:root {
  --pb-primary: #6c5ce7;
  --pb-primary-dark: #5647c9;
  --pb-primary-soft: #f0eeff;
  --pb-ink: #172033;
  --pb-muted: #667085;
  --pb-border: #e4e7ec;
  --pb-bg: #f5f7fb;
  --pb-success: #12b76a;
  --pb-warning: #f79009;
  --pb-danger: #f04438;
  --pb-sidebar: 250px;
}

html { scroll-behavior: smooth; }
body { color: var(--pb-ink); background: var(--pb-bg); }
.page { min-height: 100vh; }
.navbar-vertical.navbar-expand-lg {
  width: var(--pb-sidebar);
  background: linear-gradient(180deg, #161a2f 0%, #25203d 100%);
  border: 0;
  box-shadow: 10px 0 35px rgba(18, 22, 44, .08);
}
.navbar-vertical .navbar-brand { min-height: 76px; justify-content: flex-start; gap: 12px; }
.brand-mark {
  width: 38px; height: 38px; display: inline-grid; place-items: center;
  border-radius: 12px; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, #8b7cf6, #d363e8);
  box-shadow: 0 8px 24px rgba(130, 104, 246, .35);
}
.brand-copy { color: #fff; font-size: 16px; line-height: 1.1; letter-spacing: -.02em; }
.brand-copy small { display:block; margin-top:4px; color:#9ea5c2; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }
.navbar-vertical .navbar-nav .nav-link { color:#b9bfd4; border-radius:10px; margin:2px 10px; padding:10px 12px; gap:10px; }
.navbar-vertical .navbar-nav .nav-link:hover { color:#fff; background:rgba(255,255,255,.07); }
.navbar-vertical .navbar-nav .nav-link.active { color:#fff; background:linear-gradient(90deg,rgba(124,103,246,.3),rgba(124,103,246,.08)); box-shadow:inset 3px 0 #9b87ff; }
.navbar-vertical .nav-section { color:#777f9f; text-transform:uppercase; letter-spacing:.12em; font-size:10px; padding:20px 22px 6px; }
.nav-icon { width:20px; height:20px; flex:0 0 20px; }
.page-wrapper { margin-left: var(--pb-sidebar); min-width:0; }
.topbar { height:76px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--pb-border); position:sticky; top:0; z-index:1025; }
.topbar .container-xl { height:100%; }
.page-header { margin:0; padding:28px 0 20px; }
.page-pretitle { color:var(--pb-primary); font-weight:700; letter-spacing:.09em; }
.page-title { letter-spacing:-.035em; font-weight:720; }
.content-subtitle { color:var(--pb-muted); max-width:740px; }
.card { border-color:var(--pb-border); box-shadow:0 5px 20px rgba(16,24,40,.035); border-radius:14px; }
.card-header { min-height:62px; border-color:var(--pb-border); }
.card-title { letter-spacing:-.02em; font-weight:650; }
.btn-primary { --tblr-btn-bg:var(--pb-primary); --tblr-btn-border-color:var(--pb-primary); --tblr-btn-hover-bg:var(--pb-primary-dark); --tblr-btn-hover-border-color:var(--pb-primary-dark); }
.btn-soft-primary { color:var(--pb-primary-dark); background:var(--pb-primary-soft); border-color:transparent; }
.btn-soft-primary:hover { color:#fff; background:var(--pb-primary); }
.form-control:focus,.form-select:focus { border-color:#9d8df4; box-shadow:0 0 0 .2rem rgba(108,92,231,.13); }
.avatar-purple { color:#fff; background:linear-gradient(135deg,#7a68ea,#ba69d4); }
.stat-card { position:relative; overflow:hidden; min-height:132px; }
.stat-card:after { content:""; position:absolute; width:90px; height:90px; border-radius:50%; right:-28px; top:-28px; background:var(--stat-color,#6c5ce7); opacity:.08; }
.stat-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--stat-color,#6c5ce7); background:color-mix(in srgb,var(--stat-color,#6c5ce7) 10%,white); }
.stat-value { font-size:26px; font-weight:750; letter-spacing:-.04em; }
.trend { font-size:12px; font-weight:650; }
.health-dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent); }
.status-online,.text-success-strong { color:var(--pb-success)!important; }
.status-offline { color:#98a2b3!important; }
.status-warning { color:var(--pb-warning)!important; }
.status-danger { color:var(--pb-danger)!important; }
.status-badge { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:5px 9px; background:#f2f4f7; font-size:12px; font-weight:650; white-space:nowrap; }
.attention-item { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--pb-border); }
.attention-item:last-child { border-bottom:0; }
.attention-icon { flex:0 0 36px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; }
.table-vcenter td,.table-vcenter th { vertical-align:middle; }
.table thead th { color:#667085; text-transform:uppercase; letter-spacing:.055em; font-size:10px; font-weight:700; border-bottom-width:1px; }
.empty-state { padding:54px 24px; text-align:center; }
.empty-state-icon { width:64px; height:64px; margin:0 auto 18px; display:grid; place-items:center; border-radius:20px; color:var(--pb-primary); background:var(--pb-primary-soft); }
.empty-state h3 { margin-bottom:7px; }
.filter-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.filter-search { min-width:260px; flex:1; }
.booth-health { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.health-tile { padding:14px; border:1px solid var(--pb-border); border-radius:12px; background:#fff; }
.health-tile small { display:block; color:var(--pb-muted); margin-bottom:5px; }
.code-pairing { font:800 36px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.14em; color:var(--pb-ink); }
.pairing-qr-frame { width:min(100%,352px); padding:16px; border:1px solid var(--pb-border); border-radius:18px; background:#fff; box-shadow:0 12px 34px rgba(16,24,40,.09); }
.pairing-qr { display:block; width:100%; height:auto; image-rendering:pixelated; }
.qr-placeholder { width:180px; aspect-ratio:1; padding:10px; border:1px solid var(--pb-border); background:#fff; display:grid; grid-template-columns:repeat(9,1fr); gap:2px; }
.qr-placeholder i { background:#111827; }
.timeline-simple { position:relative; padding-left:24px; }
.timeline-simple:before { content:""; position:absolute; left:6px; top:5px; bottom:5px; width:2px; background:#e4e7ec; }
.timeline-entry { position:relative; padding:0 0 20px 10px; }
.timeline-entry:before { content:""; position:absolute; left:-23px; top:4px; width:10px; height:10px; border-radius:50%; background:#fff; border:3px solid var(--pb-primary); box-sizing:content-box; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.gallery-card { position:relative; overflow:hidden; border-radius:13px; border:1px solid var(--pb-border); background:#fff; }
.gallery-thumb { aspect-ratio:4/3; display:grid; place-items:center; background:linear-gradient(135deg,#ebe9ff,#f8eafa); color:#7567d5; }
.gallery-card .meta { padding:12px; }

/* Page evenement : legende de la galerie + petit graphique (chapitre 8) */
.photo-legend { display:inline-flex; align-items:center; gap:6px; margin-left:16px; font-size:12px; color:var(--pb-muted); }
.photo-legend:first-child { margin-left:0; }
.photo-legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.chart-bars { display:flex; align-items:flex-end; gap:3px; height:140px; padding-top:10px; }
.chart-bar-col { flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:2px; }
.chart-bar { width:100%; min-height:2px; background:var(--pb-primary); border-radius:3px 3px 0 0; }
.chart-bar-label { margin-top:6px; font-size:10px; color:var(--pb-muted); white-space:nowrap; }
.consent-state { border-left:3px solid var(--pb-border); padding-left:12px; }
.consent-state.granted { border-color:var(--pb-success); }
.consent-state.denied { border-color:var(--pb-danger); }
.consent-state.withdrawn { border-color:var(--pb-warning); }
.audit-context { max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; }
.settings-nav .list-group-item.active { background:var(--pb-primary-soft); color:var(--pb-primary-dark); border-color:var(--pb-border); font-weight:650; }

/* Wizard */
.wizard-shell { display:grid; grid-template-columns:230px minmax(0,1fr); gap:20px; align-items:start; }
.wizard-nav { position:sticky; top:96px; }
.wizard-progress { display:flex; flex-direction:column; gap:3px; }
.wizard-step { position:relative; display:flex; gap:11px; align-items:flex-start; padding:10px 9px; border-radius:10px; color:#667085; text-decoration:none; }
.wizard-step:hover { background:#f8f7ff; color:var(--pb-primary); }
.wizard-step.active { color:var(--pb-primary-dark); background:var(--pb-primary-soft); font-weight:650; }
.wizard-step.complete .step-index { color:#fff; background:var(--pb-success); border-color:var(--pb-success); }
.step-index { flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#fff; border:1px solid #d0d5dd; font-size:11px; font-weight:750; }
.wizard-step.active .step-index { color:#fff; background:var(--pb-primary); border-color:var(--pb-primary); }
.wizard-step-copy { min-width:0; line-height:1.15; padding-top:2px; }
.wizard-step-copy small { display:block; margin-top:4px; font-size:10px; color:#98a2b3; font-weight:400; }
.autosave-state { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#667085; }
.autosave-state .spinner-border { width:12px; height:12px; border-width:2px; }
.wizard-footer { display:flex; justify-content:space-between; gap:12px; margin-top:24px; padding-top:18px; border-top:1px solid var(--pb-border); }
.option-tile { display:block; height:100%; padding:15px; border:1px solid var(--pb-border); border-radius:12px; cursor:pointer; transition:.15s ease; }
.option-tile:hover { border-color:#a79af2; transform:translateY(-1px); }
.option-tile:has(input:checked) { border-color:var(--pb-primary); box-shadow:0 0 0 3px rgba(108,92,231,.1); background:#faf9ff; }
.model-card { display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px; border:1px solid var(--pb-border); border-radius:13px; }
.model-thumb { width:120px; aspect-ratio:3/2; background:repeating-linear-gradient(45deg,#f5f5f5,#f5f5f5 8px,#ececec 8px,#ececec 16px); border:1px solid #1f2937; display:grid; place-items:center; overflow:hidden; }
.preflight-list { display:grid; gap:9px; }
.preflight-row { display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border-radius:10px; background:#f8fafc; }
.preflight-row.error { background:#fff3f2; color:#912018; }
.preflight-row.warning { background:#fffaeb; color:#93370d; }
.preflight-row.success { background:#ecfdf3; color:#05603a; }

/* Canvas editor */
.canvas-editor { --editor-panel:245px; border:1px solid var(--pb-border); border-radius:14px; overflow:hidden; background:#fff; }
.canvas-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:50px; padding:8px 10px; border-bottom:1px solid var(--pb-border); background:#fff; }
.canvas-toolbar-separator { width:1px; height:26px; margin:0 3px; background:var(--pb-border); }
.canvas-toolbar .btn { padding:5px 8px; }
.canvas-zoom-value { min-width:44px; text-align:center; font-size:11px; font-weight:650; color:#667085; }
.canvas-workbench { display:grid; grid-template-columns:var(--editor-panel) minmax(0,1fr) var(--editor-panel); min-height:610px; }
.canvas-sidebar { min-width:0; background:#fff; border-right:1px solid var(--pb-border); }
.canvas-sidebar:last-child { border-right:0; border-left:1px solid var(--pb-border); }
.canvas-panel-title { display:flex; justify-content:space-between; align-items:center; min-height:45px; padding:10px 12px; border-bottom:1px solid var(--pb-border); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; color:#475467; }
.canvas-palette { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; }
.canvas-tool { border:1px solid var(--pb-border); border-radius:9px; padding:10px 6px; background:#fff; color:#475467; text-align:center; font-size:10px; cursor:pointer; transition:.15s; }
.canvas-tool:hover { color:var(--pb-primary); border-color:#a79af2; background:#faf9ff; }
.canvas-tool svg { display:block; width:20px; height:20px; margin:0 auto 6px; }
.canvas-stage-wrap { position:relative; min-width:0; overflow:auto; display:grid; place-items:center; padding:24px; background:#dfe3e9; }
.canvas-stage { position:relative; flex:none; background:#d1d5db; box-shadow:0 8px 26px rgba(16,24,40,.12); }
.canvas-stage canvas { display:block; touch-action:none; }
.canvas-drop-hint { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); padding:6px 10px; border-radius:20px; background:rgba(23,32,51,.78); color:#fff; font-size:10px; pointer-events:none; opacity:0; transition:.2s; }
.canvas-stage-wrap.dragging .canvas-drop-hint { opacity:1; }
.canvas-layers { max-height:265px; overflow:auto; }
.canvas-layer { display:grid; grid-template-columns:22px minmax(0,1fr) 24px 24px; align-items:center; gap:4px; min-height:38px; padding:5px 8px; border-bottom:1px solid #f0f1f3; font-size:11px; cursor:pointer; }
.canvas-layer:hover { background:#fafafa; }
.canvas-layer.active { color:var(--pb-primary-dark); background:var(--pb-primary-soft); }
.canvas-layer-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.canvas-icon-btn { border:0; background:transparent; color:#98a2b3; padding:2px; display:grid; place-items:center; cursor:pointer; }
.canvas-icon-btn:hover { color:var(--pb-primary); }
.canvas-properties { padding:12px; max-height:430px; overflow:auto; }
.canvas-properties .form-label { margin-bottom:3px; font-size:10px; color:#667085; }
.canvas-properties .form-control,.canvas-properties .form-select { min-height:31px; padding:4px 7px; font-size:11px; }
.canvas-prop-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.canvas-empty-properties { padding:28px 12px; text-align:center; color:#98a2b3; font-size:11px; }
.canvas-align-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:9px 12px; border-top:1px solid var(--pb-border); }
.canvas-align-grid .btn { padding:5px; font-size:10px; }
.safe-zone-control { display:flex; align-items:center; gap:7px; margin-left:auto; }
.canvas-preview-dialog { width:min(1000px,calc(100vw - 32px)); max-width:none; border:0; padding:0; border-radius:16px; box-shadow:0 24px 80px rgba(16,24,40,.32); }
.canvas-preview-dialog::backdrop { background:rgba(15,23,42,.72); backdrop-filter:blur(4px); }
.preview-stage { min-height:560px; display:grid; place-items:center; padding:28px; background:#202433; }
.preview-stage canvas { max-width:100%; max-height:70vh; background:#fff; box-shadow:0 14px 50px rgba(0,0,0,.35); }
.preview-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--pb-border); }

/* Login */
.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(340px, .9fr) minmax(520px,1.1fr); background:#f5f6fa; }
.login-panel { display:grid; place-items:center; padding:40px; }
.login-card { width:min(420px,100%); }
.login-visual { position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:64px; color:#fff; background:linear-gradient(145deg,#17162a 0%,#35265b 56%,#7347a5 100%); }
.login-visual:before,.login-visual:after { content:""; position:absolute; border-radius:50%; filter:blur(1px); }
.login-visual:before { width:520px; height:520px; right:-180px; top:-160px; background:radial-gradient(circle at 30% 30%,rgba(211,99,232,.8),rgba(108,92,231,.05) 62%); }
.login-visual:after { width:380px; height:380px; left:-140px; bottom:-130px; border:1px solid rgba(255,255,255,.13); box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018); }
.login-visual-copy { position:relative; z-index:1; max-width:560px; }
.login-visual h1 { font-size:clamp(34px,4vw,58px); line-height:1.02; letter-spacing:-.05em; }

@media (max-width: 1199px) {
  .canvas-workbench { grid-template-columns:200px minmax(520px,1fr) 210px; }
  .canvas-stage-wrap { place-items:start center; }
}
@media (max-width: 991.98px) {
  .navbar-vertical.navbar-expand-lg { width:100%; }
  .page-wrapper { margin-left:0; }
  .topbar { height:62px; }
  .wizard-shell { grid-template-columns:1fr; }
  .wizard-nav { position:static; overflow:auto; }
  .wizard-progress { flex-direction:row; min-width:max-content; }
  .wizard-step { width:150px; }
  .booth-health { grid-template-columns:repeat(2,1fr); }
  .login-page { grid-template-columns:1fr; }
  .login-visual { display:none; }
}
@media (max-width: 575.98px) {
  .page-header { padding-top:20px; }
  .filter-search { min-width:100%; }
  .model-card { grid-template-columns:80px minmax(0,1fr); }
  .model-thumb { width:80px; }
  .model-card > :last-child { grid-column:1/-1; }
  .booth-health { grid-template-columns:1fr; }
  .wizard-footer { flex-direction:column-reverse; }
  .wizard-footer .btn { width:100%; }
  .login-panel { padding:24px; }
}

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