/* =========================================================
   BadgeQR — design system
   Reprend la charte du prototype : Fraunces / Inter / IBM Plex Mono,
   fond papier, repères d'impression sur les cartes.
   ========================================================= */
:root{
  --bg:#F7F7F5;
  --surface:#FFFFFF;
  --surface-alt:#F0EFEB;
  --border:#E3E1DA;
  --text:#1E2328;
  --text-muted:#70767D;
  --accent:#3D5A80;
  --accent-dark:#2C4160;
  --accent-soft:#E1E8F0;
  --success:#3F7A57;
  --success-soft:#DEEEE3;
  --pending:#B0752C;
  --pending-soft:#F4E5CC;
  --danger:#A8433A;
  --danger-soft:#F6E0DD;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',monospace;}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:236px;flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--border);padding:24px 16px;
  display:flex;flex-direction:column;gap:26px;
}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:19px;padding:0 8px;}
.brand span{color:var(--accent);}
.brand small{display:block;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:400;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:2px;}
nav.menu{display:flex;flex-direction:column;gap:3px;}
.menu-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:12px 8px 4px;}
.menu a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  color:var(--text-muted);font-size:13.5px;font-weight:500;transition:.15s;
}
.menu a:hover{background:var(--surface-alt);color:var(--text);text-decoration:none;}
.menu a.active{background:var(--accent-soft);color:var(--accent-dark);}
.menu a .ico{width:20px;text-align:center;font-size:14px;}
.menu a .count{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-muted);}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--border);padding:14px 8px 0;font-size:11.5px;color:var(--text-muted);}
.sidebar-foot .who{color:var(--text);font-weight:600;font-size:12.5px;}
.logout-btn{background:none;border:none;padding:0;margin-top:6px;color:var(--danger);cursor:pointer;font-size:11.5px;font-family:inherit;}

.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 32px;border-bottom:1px solid var(--border);background:var(--surface);
}
.topbar h1{font-size:22px;margin:0;}
.topbar p{margin:2px 0 0;color:var(--text-muted);font-size:13px;}
.content{padding:28px 32px 48px;flex:1;overflow-y:auto;}

/* ---------- Cartes ---------- */
.card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;
}
.card + .card{margin-top:20px;}
.marked::before,.marked::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
}
.marked::before{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);}
.marked::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);}
.card h2{font-size:17px;margin:0 0 4px;}
.card .desc{color:var(--text-muted);font-size:13px;margin:0 0 20px;}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}

/* ---------- Statistiques ---------- */
.stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;
}
.stat .num{font-family:'Fraunces',serif;font-size:27px;font-weight:600;line-height:1.1;}
.stat .lbl{font-size:12px;color:var(--text-muted);margin-top:3px;}
.stat .trend{font-size:11px;color:var(--success);margin-top:6px;}

/* ---------- Tableaux ---------- */
table{width:100%;border-collapse:collapse;font-size:13px;}
th{
  text-align:left;color:var(--text-muted);font-weight:500;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.03em;padding:9px 10px;border-bottom:1px solid var(--border);
}
td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle;}
td.mono,th.mono{font-family:'IBM Plex Mono',monospace;font-size:12.5px;}
tbody tr:hover{background:var(--surface-alt);}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-weight:600;
  font-size:13px;padding:10px 18px;border-radius:8px;border:none;cursor:pointer;
  background:var(--accent);color:#fff;transition:.15s;text-decoration:none;
}
.btn:hover{background:var(--accent-dark);color:#fff;text-decoration:none;}
.btn.ghost{background:transparent;color:var(--accent-dark);border:1px solid var(--border);}
.btn.ghost:hover{background:var(--surface-alt);}
.btn.danger{background:var(--danger);}
.btn.danger:hover{background:#8c362e;}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:6px;}
.btn:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed;}
.btn.block{width:100%;justify-content:center;}
.actions-row{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
.icon-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:5px 8px;cursor:pointer;font-size:12.5px;color:var(--text-muted);}
.icon-btn:hover{background:var(--surface-alt);color:var(--text);}

/* ---------- Formulaires ---------- */
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;}
.field .hint{font-size:11.5px;color:var(--text-muted);margin-top:5px;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);font-family:'Inter',sans-serif;font-size:13.5px;color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
input[type=file]{display:none;}
.checkline{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:14px;}
.checkline input{width:auto;}
.error{color:var(--danger);font-size:12px;margin-top:5px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* ---------- Alertes ---------- */
.alert{padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:18px;border:1px solid;}
.alert.success{background:var(--success-soft);border-color:#c9e2d1;color:#2c5c40;}
.alert.error{background:var(--danger-soft);border-color:#eec7c2;color:#8c362e;}
.alert.warning{background:var(--pending-soft);border-color:#e6d2ad;color:#8a5a1f;}
.alert.info{background:var(--accent-soft);border-color:#c9d7e6;color:var(--accent-dark);}

/* ---------- Pastilles ---------- */
.pill{display:inline-block;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.pill.pending{background:var(--pending-soft);color:var(--pending);}
.pill.done{background:var(--success-soft);color:var(--success);}
.pill.neutral{background:var(--surface-alt);color:var(--text-muted);}
.pill.danger{background:var(--danger-soft);color:var(--danger);}
.tag{
  font-family:'IBM Plex Mono',monospace;font-size:11px;background:var(--surface);
  border:1px solid var(--border);padding:3px 8px;border-radius:5px;color:var(--text-muted);
}

/* ---------- Dropzone ---------- */
.dropzone{
  border:1.5px dashed var(--border);border-radius:8px;padding:34px 20px;text-align:center;
  background:var(--surface-alt);cursor:pointer;transition:.15s;
}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:var(--accent-soft);}
.dropzone .dz-icon{font-size:22px;margin-bottom:8px;}
.dropzone .dz-title{font-weight:500;font-size:13.5px;}
.dropzone .dz-sub{font-size:12px;color:var(--text-muted);margin-top:4px;}
.col-tags{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap;}
.file-chip{
  display:flex;align-items:center;gap:10px;background:var(--success-soft);border:1px solid #c9e2d1;
  padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;
}
.file-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--success);}
.file-chip .file-meta{color:var(--text-muted);margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11.5px;}

/* ---------- Zone QR (étape 2) ---------- */
.canvas-wrap{
  position:relative;aspect-ratio:5/7;
  background:repeating-linear-gradient(45deg,#eceae4,#eceae4 10px,#f2f1ec 10px,#f2f1ec 20px);
  border-radius:8px;border:1px solid var(--border);overflow:hidden;max-width:340px;width:100%;margin:0 auto;
}
.canvas-wrap img{display:none;width:100%;height:100%;object-fit:contain;}
.canvas-wrap.has-image img{display:block;}
.canvas-empty-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:12.5px;text-align:center;padding:20px;}
.qr-zone{
  position:absolute;background:rgba(255,255,255,.55);border:2px dashed var(--accent);
  border-radius:6px;cursor:grab;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(1px);touch-action:none;
}
.qr-zone:active{cursor:grabbing;}
.qr-zone span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--accent-dark);text-align:center;pointer-events:none;user-select:none;}
.resize-handle{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid #fff;cursor:nwse-resize;}
.canvas-hint{font-size:12px;color:var(--text-muted);text-align:center;margin-top:10px;}
.zone-info{font-size:11.5px;font-family:'IBM Plex Mono',monospace;color:var(--text-muted);text-align:center;margin-top:8px;}

/* ---------- Galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin-top:20px;}
.badge-card{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-alt);}
.badge-thumb img{width:100%;display:block;}
.badge-meta{padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:6px;}
.badge-meta .nm{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.progress-bar-wrap{height:6px;background:var(--border);border-radius:4px;overflow:hidden;margin:18px 0 6px;}
.progress-bar-fill{height:100%;width:0%;background:var(--accent);transition:width .25s ease;}
.progress-caption{font-size:12px;color:var(--text-muted);}

.summary-row{display:flex;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.summary-box{flex:1;min-width:150px;border:1px solid var(--border);border-radius:8px;padding:14px 16px;background:var(--surface-alt);}
.summary-box .num{font-family:'Fraunces',serif;font-size:24px;font-weight:600;}
.summary-box .lbl{font-size:12px;color:var(--text-muted);}

/* ---------- Assistant (stepper) ---------- */
.stepper{display:flex;gap:4px;}
.stepper .st{
  display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;
  color:var(--text-muted);cursor:pointer;font-size:13px;
}
.stepper .st.active{background:var(--accent-soft);color:var(--accent-dark);}
.stepper .st .n{
  font-family:'IBM Plex Mono',monospace;font-size:11px;width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;background:var(--surface-alt);color:var(--text-muted);
}
.stepper .st.active .n{background:var(--accent);color:#fff;}
.stepper .st.done .n{background:var(--success);color:#fff;}
.view{display:none;}
.view.active{display:block;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ---------- Graphique ---------- */
.chart{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:10px;}
.chart .bar{flex:1;background:var(--accent-soft);border-radius:3px 3px 0 0;position:relative;min-height:2px;}
.chart .bar span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:9.5px;color:var(--text-muted);}
.chart .bar b{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--accent-dark);}
.chart-wrap{padding-bottom:22px;}

/* ---------- Pages publiques (scan / auth / accueil) ---------- */
.centered{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-card{width:100%;max-width:420px;}
.auth-head{text-align:center;margin-bottom:22px;}
.auth-head .brand{font-size:24px;padding:0;}
.auth-head p{color:var(--text-muted);font-size:13px;margin-top:6px;}
.auth-foot{text-align:center;font-size:12.5px;color:var(--text-muted);margin-top:18px;}

.scan-page{max-width:430px;margin:0 auto;padding:26px 18px 48px;}
.scan-hero{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;
}
.scan-hero .band{padding:16px 20px;border-bottom:1px solid var(--border);}
.scan-hero .band .eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);}
.scan-hero .band h1{font-size:21px;margin:6px 0 0;}
.scan-hero .band .org{font-size:12.5px;color:var(--text-muted);margin-top:4px;}
.scan-fields{padding:8px 20px 16px;}
.scan-field{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:9px 0;border-bottom:1px solid var(--border);}
.scan-field:last-child{border-bottom:none;}
.scan-field span:first-child{color:var(--text-muted);}
.scan-field span:last-child{text-align:right;word-break:break-word;}
.status-banner{padding:16px;border-radius:12px;text-align:center;font-weight:600;font-size:14px;margin:18px 0;}
.status-banner.pending{background:var(--pending-soft);color:var(--pending);}
.status-banner.done{background:var(--success-soft);color:var(--success);}
.status-banner small{display:block;font-weight:400;font-size:11.5px;margin-top:4px;opacity:.85;}
.badge-preview{width:100%;border-radius:12px;border:1px solid var(--border);display:block;}

/* ---------- Accueil ---------- */
.landing{max-width:960px;margin:0 auto;padding:60px 24px;}
.landing h1{font-size:40px;line-height:1.15;margin:0 0 14px;}
.landing .lead{font-size:16px;color:var(--text-muted);max-width:600px;line-height:1.6;}
.landing .cta{display:flex;gap:12px;margin:28px 0 50px;}
.feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.feature h3{font-size:15px;margin:0 0 8px;}
.feature p{font-size:13px;color:var(--text-muted);margin:0;line-height:1.55;}

/* ---------- Divers ---------- */
.muted{color:var(--text-muted);}
.right{text-align:right;}
.flex{display:flex;align-items:center;gap:10px;}
.flex.between{justify-content:space-between;}
.mt0{margin-top:0;}.mt8{margin-top:8px;}.mt16{margin-top:16px;}.mt24{margin-top:24px;}
.mb0{margin-bottom:0;}.mb8{margin-bottom:8px;}.mb16{margin-bottom:16px;}
.empty{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:13px;}
.empty .big{font-size:26px;margin-bottom:10px;}
.pagination{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap;font-size:12.5px;}
.pagination a,.pagination span{padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);}
.pagination .active span{background:var(--accent);color:#fff;border-color:var(--accent);}
.mobile-nav{display:none;}

@media(max-width:900px){
  .grid-2,.grid-3,.grid-4,.form-row{grid-template-columns:1fr;}
  .app{flex-direction:column;}
  .sidebar{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-right:none;border-bottom:1px solid var(--border);}
  .sidebar nav.menu{flex-direction:row;flex-wrap:wrap;gap:4px;}
  .menu-label{display:none;}
  .sidebar-foot{margin-top:0;border-top:none;padding-top:0;margin-left:auto;}
  .content,.topbar{padding-left:18px;padding-right:18px;}
  .stepper{flex-wrap:wrap;}
}