:root{
  /* ---- Thème « admin sobre » (aligné ComptaIA/MailPilot) : navy + gris + bleu ---- */
  --indigo:#2563eb; --violet:#7c3aed; --pink:#2563eb;
  --navy:#0f172a;
  --bg:#f1f5f9; --card:#ffffff; --card2:#f8fafc; --line:#e2e8f0;
  --text:#0f172a; --muted:#64748b; --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --radius:16px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text); min-height:100vh; line-height:1.5;
}
a{color:inherit; text-decoration:none}
.container{max-width:1180px; margin:0 auto; padding:0 24px}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid var(--line);
  position:sticky; top:0; backdrop-filter:blur(8px); background:rgba(241,245,249,.8); z-index:10;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem}
.brand .logo{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--indigo),var(--violet)); font-size:1.1rem;
}
.nav{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.nav a{padding:8px 14px; border-radius:10px; color:var(--muted); font-weight:600}
.nav a:hover{color:var(--text); background:var(--card2)}
.nav a.active{color:#fff; background:linear-gradient(135deg,var(--indigo),var(--violet))}
.avatar{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--indigo),var(--pink)); font-weight:800; color:#fff;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:10px 16px; border-radius:11px; border:1px solid var(--line);
  background:var(--card2); color:var(--text); font-weight:700; font-size:.92rem;
  transition:.15s; text-align:center; justify-content:center;
}
.btn:hover{border-color:var(--indigo); transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--indigo),var(--violet)); border:none; color:#fff}
.btn.ok{background:linear-gradient(135deg,#16a34a,#22c55e); border:none; color:#fff}
.btn.danger{background:transparent; border-color:#5b2330; color:#fda4af}
.btn.danger:hover{border-color:var(--err)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px; font-size:.82rem; border-radius:9px}
.btn.block{width:100%}

/* Cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.grid{display:grid; gap:18px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
@media(max-width:760px){
  .topbar{flex-direction:column; align-items:flex-start; gap:10px; padding:14px 18px}
  .nav{width:100%; gap:6px}
  .nav a{padding:7px 11px; font-size:.9rem}
  .container{padding:0 16px}
  .cover-section{padding:44px 18px}
}
@media(max-width:640px){
  .nav{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch}
  .nav a{white-space:nowrap}
  table{min-width:520px}
  .card{overflow-x:auto}
}

/* Auth pages */
.auth-wrap{min-height:calc(100vh - 0px); display:grid; place-items:center; padding:40px 20px}
.auth-card{width:100%; max-width:420px}
.field{margin-bottom:14px}
.field label{display:block; font-size:.82rem; color:var(--muted); margin-bottom:6px; font-weight:600}
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--line);
  background:var(--card2); color:var(--text); font-size:.95rem; font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--indigo)}

/* Hero / landing */
.hero{padding:70px 0 30px; text-align:center}
.hero h1{font-size:2.8rem; margin:0 0 14px; line-height:1.1}
.hero h1 .grad{background:linear-gradient(135deg,var(--indigo),var(--violet),var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{font-size:1.15rem; color:var(--muted); max-width:640px; margin:0 auto 26px}
.pill{display:inline-block; padding:6px 14px; border-radius:999px; background:var(--card2);
  border:1px solid var(--line); font-size:.82rem; color:var(--muted); margin-bottom:18px}

/* Module cards */
.mod-card{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px}
.mod-icon{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:1.6rem}
.mod-card h3{margin:0; font-size:1.3rem}
.price{font-size:1.5rem; font-weight:800}
.price span{font-size:.85rem; color:var(--muted); font-weight:600}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:700}
.badge.on{background:rgba(34,197,94,.15); color:#4ade80}
.badge.off{background:rgba(136,145,196,.12); color:var(--muted)}
.badge.admin{background:rgba(236,72,153,.16); color:#f9a8d4}

/* Stats */
.stat{padding:20px}
.stat .n{font-size:2rem; font-weight:800}
.stat .l{color:var(--muted); font-size:.85rem}

/* Tables */
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); font-size:.9rem; vertical-align:middle}
th{color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em}
tr:hover td{background:rgba(255,255,255,.02)}

/* Toggle chips (accès module dans le tableau admin) */
.chip{display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:10px;
  border:1px solid var(--line); background:var(--card2); font-size:.82rem; font-weight:700; margin:3px 3px 3px 0}
.chip.on{border-color:#1f5136; background:rgba(34,197,94,.12); color:#86efac}
.chip form{display:inline}
.chip .mini{width:100%; max-width:64px; padding:3px 6px; font-size:.78rem; border-radius:7px;
  border:1px solid var(--line); background:var(--bg); color:var(--text)}
.linkbtn{background:none; border:none; color:inherit; cursor:pointer; font:inherit; padding:0}

/* Flash */
.flash{padding:12px 16px; border-radius:11px; margin-bottom:14px; font-weight:600; font-size:.9rem}
.flash.success{background:rgba(34,197,94,.14); border:1px solid #1f5136; color:#86efac}
.flash.error{background:rgba(239,68,68,.14); border:1px solid #5b2330; color:#fca5a5}

.page{padding:28px 0 60px}
.page h1{margin:0 0 4px}
.section-head{display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; gap:12px; flex-wrap:wrap}
hr{border:none; border-top:1px solid var(--line); margin:18px 0}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}