:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e8e8ef;
}

.badge strong{font-weight:800}

*{box-sizing:border-box}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  margin:0;
  background:var(--bg);
  color:var(--text);
}

/* Topbar */
.topbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:20;
}

.brand{display:flex;align-items:center;text-decoration:none}
.brand-logo{height:50px;width:auto;display:block}

.container{padding:16px;max-width:1400px;margin:0 auto}

/* Cards / Grid */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}

.grid{display:grid;gap:12px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.kpi{font-size:24px;font-weight:800}
.muted{color:var(--muted)}

/* Form controls */
input{
  padding:11px 12px;
  border-radius:10px;
  border:1px solid #d8d9e6;
  width:100%;
  min-width:0;
  outline:none;
  background:#fff;
}

input:focus{
  border-color:#aeb3ff;
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
}

button{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #d8d9e6;
  background:#fff;
  cursor:pointer;
}
button:hover{background:#f7f7ff}

.btn-primary{
  background:#111827;
  color:#fff;
  border:1px solid #111827;
  border-radius:10px;
  padding:11px 12px;
  cursor:pointer;
}
.btn-primary:hover{background:#0b1220}

/* Search bar */
.search{width:520px;max-width:55vw}

/* Badges */
.badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #ddd;
  font-size:12px;
  margin-right:6px;
  background:#fafafa;
}
.danger{border-color:#ffb3b3;background:#fff1f1}
.ok{border-color:#b8f0c2;background:#f1fff4}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{
  padding:8px;
  border-bottom:1px solid #f1f1f6;
  text-align:left;
}

/* ===== Auth pages (pro/business) ===== */
.auth-wrap{
  min-height:calc(100vh - 64px);
  display:grid;
  place-items:center;
  padding:24px 16px;
}

.auth-card{
  width:100%;
  max-width:460px;
  border-radius:18px;
  border:1px solid var(--border);
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);
}

.auth-header{
  padding:18px 18px 12px 18px;
  border-bottom:1px solid #f0f0f6;
}

.auth-title{font-size:18px;font-weight:800}
.auth-subtitle{color:var(--muted);font-size:13px;margin-top:2px}

.auth-body{padding:18px}
.auth-form{display:block}

.form-row{display:grid;gap:6px;margin-bottom:12px}
.label{font-size:12px;color:#374151;font-weight:600}

.auth-actions{display:grid;gap:10px;margin-top:10px}

.auth-footer{
  padding:14px 18px;
  border-top:1px solid #f0f0f6;
  background:#fff;
  color:var(--muted);
  font-size:13px;
}
.auth-footer a{color:#111827;text-decoration:none;font-weight:700}
.auth-footer a:hover{text-decoration:underline}

/* Responsive */
@media (max-width: 980px){
  .grid-4,.grid-2{grid-template-columns:1fr}
  .search{max-width:70vw}
}


/* Badges état OUI/NON */
.badge-state {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #374151;
}

.badge-state.true {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.badge-state.true.wl {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}


.stats-sep{
  border-top:1px solid #eef0f6;
  margin:22px 0;
}

.stats-row{
  display:flex;
  gap:14px;
  justify-content:space-between;
  flex-wrap:wrap;
}

.stat-item{min-width:160px}
.stat-label{font-size:12px;color:var(--muted);font-weight:700}
.stat-value{font-size:16px;font-weight:900}

/* Badges état */
.badge-state{
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid #d1d5db;
  background:#f3f4f6;
  color:#374151;
}
.badge-state.true{
  background:#fee2e2;
  border-color:#fecaca;
  color:#991b1b;
}
.badge-state.true.wl{
  background:#dcfce7;
  border-color:#86efac;
  color:#166534;
}

/* Reason pills */
.reason-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.reason-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #d1d5db;
  background:#f3f4f6;
  font-size:12px;
  font-weight:800;
}
.reason-icon{
  width:18px;height:18px;
  display:flex;
  align-items:center;
  justify-content:cen

/* Topbar actions */
    .topbar-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .btn {
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #d8d9e6;
        background: #fff;
        cursor: pointer;
    }

    .btn:hover {
        background: #f7f7ff
    }

    /* Modal */
    .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, .35);
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease;
        z-index: 999;
    }

    .modal-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    .modal {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease;
        z-index: 1000;
        padding: 16px;
    }

    .modal.open {
        opacity: 1;
        pointer-events: auto;
    }

    .modal-card {
        width: 100%;
        max-width: 520px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(16, 24, 40, .18);
        overflow: hidden;
    }

    .modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid #f0f0f6;
    }

    .modal-title {
        font-size: 16px;
        font-weight: 900
    }

    .modal-close {
        border: none;
        background: transparent;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        padding: 0 6px;
        color: #6b7280;
    }

    .modal-close:hover {
        color: #111827
    }

    .modal-body {
        padding: 16px
    }

    /* Password strength meter */
    .pwd-bar {
        height: 10px;
        background: #eef0f6;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid #e8e8ef;
    }

    .pwd-bar-fill {
        height: 100%;
        width: 0%;
        transition: width .12s ease;
    }

    .pwd-bar-fill.weak {
        background: #ef4444;
    }

    .pwd-bar-fill.ok {
        background: #f59e0b;
    }

    .pwd-bar-fill.strong {
        background: #16a34a;
    }

    .pwd-meta {
        display: flex;
        gap: 8px;
        align-items: baseline;
        justify-content: space-between;
        margin-top: 6px;
    }

    .pwd-label {
        font-weight: 900
    }

    .pwd-hint {
        font-size: 12px
    }

/* Boutons topbar (pour garder la même hauteur et éviter le wrap vertical) */
.topbar-actions { display:flex; gap:10px; align-items:center; flex-wrap:nowrap; }
.btn{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #d8d9e6;
  background:#fff;
  cursor:pointer;
}
.btn:hover{ background:#f7f7ff; }

/* Modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.35);
  z-index:999;
}
.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  z-index:1000;
  padding:16px;
}
.modal-card{
  width:100%;
  max-width:520px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(16,24,40,.18);
  overflow:hidden;
}
.modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid #f0f0f6;
}
.modal-title{ font-size:16px; font-weight:900; }
.modal-close{
  border:none;
  background:transparent;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  padding:0 6px;
  color:#6b7280;
}
.modal-close:hover{ color:#111827; }
.modal-body{ padding:16px; }

/* Password strength meter */
.pwd-bar{
  height:10px;
  background:#eef0f6;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #e8e8ef;
}
.pwd-bar-fill{ height:100%; width:0%; transition:width .12s ease; }
.pwd-bar-fill.weak{ background:#ef4444; }
.pwd-bar-fill.ok{ background:#f59e0b; }
.pwd-bar-fill.strong{ background:#16a34a; }

.pwd-meta{
  display:flex;
  gap:8px;
  align-items:baseline;
  justify-content:space-between;
  margin-top:6px;
}
.pwd-label{ font-weight:900; }
.pwd-hint{ font-size:12px; }