:root { --accent:#1d4ed8; --bg:#f4f5f7; --card:#fff; --line:#e3e6ea; --txt:#1c2330; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--txt); }

.navbar { display:flex; align-items:center; gap:1rem; padding:.7rem 1.2rem;
  background:var(--card); border-bottom:1px solid var(--line); }
.navbar .brand { font-weight:700; color:var(--accent); text-decoration:none; }
.navbar .spacer { flex:1; }
.navbar a { color:var(--txt); text-decoration:none; }
.navbar a:hover { color:var(--accent); }
.navbar .user { color:#697; font-size:.9rem; }

.container { max-width:1000px; margin:2rem auto; padding:0 1.2rem; }
h1 { margin-top:0; }
.muted { color:#8a92a0; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.1rem; }
.tile { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; padding:1.6rem 1.2rem; min-height:140px; background:var(--card);
  border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--txt);
  text-align:center; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  opacity:0; animation:tile-in .4s ease forwards; }
.tile:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(29,78,216,.14);
  border-color:var(--accent); }
.tile-icon { font-size:2.4rem; line-height:1; transition:transform .25s ease;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.12)); }
.tile:hover .tile-icon { transform:scale(1.18) rotate(-4deg); }
.tile-label { font-weight:600; }

@keyframes tile-in { from { opacity:0; transform:translateY(12px) scale(.97); }
                     to   { opacity:1; transform:translateY(0)   scale(1);   } }

@media (prefers-reduced-motion: reduce) {
  .tile { animation:none; opacity:1; }
  .tile:hover { transform:none; }
  .tile:hover .tile-icon { transform:none; }
}

.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.2rem; }
.login-card { max-width:340px; margin:5rem auto; background:var(--card); padding:2rem;
  border:1px solid var(--line); border-radius:12px; }
form label { display:block; margin:.6rem 0; }
form label.inline { display:inline-block; margin-right:1rem; }
input[type=text],input[type=password] { width:100%; padding:.5rem; margin-top:.2rem;
  border:1px solid var(--line); border-radius:8px; }
button { background:var(--accent); color:#fff; border:0; padding:.55rem 1rem;
  border-radius:8px; cursor:pointer; }
button:hover { opacity:.9; }

table.data { width:100%; border-collapse:collapse; background:var(--card); border-radius:12px; overflow:hidden; }
table.data th, table.data td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--line); }

.flash { padding:.6rem 1rem; border-radius:8px; margin-bottom:1rem; }
.flash-error { background:#fde8e8; color:#9b1c1c; }
.flash-success { background:#e6f4ea; color:#176b32; }

/* ── Module Utilisateurs & accès ─────────────────────────────────────────── */
.hint { color:#555; font-size:.9rem; margin:.25rem 0 1rem; }
.user-card { border:1px solid #d9dee5; border-radius:8px; padding:.8rem 1rem;
             margin-bottom:.9rem; background:#fff; }
.user-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.user-id strong { font-size:1.05rem; }
.badge { display:inline-block; font-size:.7rem; padding:.1rem .45rem; border-radius:10px;
         background:#e7ebf0; color:#445; margin-left:.4rem; vertical-align:middle; }
.badge-admin { background:#2d6cdf; color:#fff; }
.badge-off { background:#c8442f; color:#fff; }
.access-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
               gap:.35rem .8rem; margin:.7rem 0; }
.acc { display:flex; align-items:center; gap:.4rem; padding:.25rem .4rem; border-radius:5px;
       font-size:.9rem; }
.acc-on { background:#eef6ec; }
.user-foot details { margin-top:.4rem; font-size:.9rem; }
.user-foot summary { cursor:pointer; color:#2d6cdf; }
.foot-row { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.5rem; }
.new-fields { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:.6rem; }
.btn-primary { background:#2d6cdf; color:#fff; border:none; padding:.4rem .8rem;
               border-radius:5px; cursor:pointer; }
.btn-danger { background:#c8442f; color:#fff; border:none; padding:.4rem .8rem;
              border-radius:5px; cursor:pointer; }