/* Portail Portes — CSS léger, sans dépendance externe */
:root{
  --bg:#f4f6f8; --card:#fff; --ink:#1f2933; --muted:#6b7280;
  --line:#e2e8f0; --brand:#1d4ed8; --brand-d:#1e40af;
  --ok:#15803d; --okbg:#dcfce7; --err:#b91c1c; --errbg:#fee2e2;
  --warn:#92400e; --warnbg:#fef3c7;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  background:var(--card);border-bottom:1px solid var(--line);
  padding:.7rem 1.2rem}
.brand a{font-weight:700;color:var(--ink);font-size:1.1rem}
.mainnav{display:flex;gap:1rem;flex:1;flex-wrap:wrap}
.mainnav a{color:var(--muted);font-weight:500}
.mainnav a:hover{color:var(--brand)}
.userbox{display:flex;align-items:center;gap:.8rem;font-size:.9rem}
.userbox .who{color:var(--muted)}
.userbox .logout{color:var(--err)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--brand);cursor:pointer}
.linkbtn:hover{text-decoration:underline}

.content{max-width:960px;margin:1.5rem auto;padding:0 1.2rem}
h1{font-size:1.4rem;margin:.2rem 0 1rem}
h2{font-size:1.1rem;margin:1.4rem 0 .6rem}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:1.2rem;margin-bottom:1.2rem}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem}
.stat .n{font-size:2rem;font-weight:700;color:var(--brand)}
.stat .l{color:var(--muted);font-size:.85rem}

table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);font-size:.92rem}
th{color:var(--muted);font-weight:600;background:#fafbfc}

label{display:block;font-size:.9rem;color:var(--muted);margin:.6rem 0 .2rem}
input,select{width:100%;padding:.55rem .6rem;border:1px solid var(--line);
  border-radius:8px;font-size:1rem;background:#fff}
input:focus,select:focus{outline:2px solid var(--brand);border-color:var(--brand)}

.btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:8px;
  padding:.6rem 1.1rem;font-size:1rem;cursor:pointer}
.btn:hover{background:var(--brand-d);text-decoration:none}
.btn-danger{background:var(--err)}
.btn-sm{padding:.35rem .7rem;font-size:.85rem}

.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.92rem}
.flash-ok{background:var(--okbg);color:var(--ok)}
.flash-err{background:var(--errbg);color:var(--err)}
.flash-warn{background:var(--warnbg);color:var(--warn)}

.loginwrap{max-width:360px;margin:8vh auto}
.loginwrap .card{padding:1.6rem}
.muted{color:var(--muted)}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.78rem}
.badge-ok{background:var(--okbg);color:var(--ok)}
.badge-wait{background:var(--warnbg);color:var(--warn)}
.badge-err{background:var(--errbg);color:var(--err)}