/* --- BAP A3A — barre noire / nav --- */
:root{ --bg:#111; --fg:#fff; --muted:#cfcfcd; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family: Arial, sans-serif; background:#f4f4f8; }

.topbar{
  background:var(--bg); color:var(--fg);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; position:sticky; top:0; z-index:1000;
}
.topbar .brand a{ color:#fff; text-decoration:none; font-weight:700; }
.topbar .navlinks a{
  color:#fff; text-decoration:none; margin-left:16px;
  padding:8px 10px; border-radius:8px;
}
.topbar .navlinks a:hover{ background:rgba(255,255,255,.12); }
/* Nav */
html[data-theme="new"] .bap-nav { background: var(--color-noir-profond); color: #fff; }
.bap-nav{ background:#333; color:#fff; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; }
.bap-nav a{ color:#fff; text-decoration:none; margin-left:16px; }
.bap-nav a:hover{ text-decoration:underline; }
.bap-nav .brand{ font-weight:700; font-size:18px; }
/* Boutons & inputs (appliqués aussi à la page login) */
button,.btn{ border-radius:10px; padding:10px 14px; border:1px solid #222; background:#111; color:#fff; cursor:pointer; font-size:14px; }
.btn.ghost{ background:transparent; color:#222; }
button:hover,.btn:hover{ filter:brightness(1.05); }
input[type=email],input[type=password],input[type=text],select,textarea{
  font: 400 16px/1.4 system-ui, -apple-system, Arial, sans-serif;
  border:1px solid #CFCFCD; border-radius:8px; padding:10px 12px; background:#fff; width: 100%; box-sizing: border-box;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:#333; box-shadow:0 0 0 3px rgba(0,0,0,.12); }
table.compact{width:100%;border-collapse:collapse;font-size:14px;}
table.compact th,table.compact td{border-bottom:1px solid #e8e8ef;padding:8px 10px;text-align:left;vertical-align:middle;}
table.compact thead th{font-weight:700;background:#f6f6f9;}
table.compact tr:hover td{background:#fafafa;}
/* ===== Charte & respiration (BAP A3A) ===== */
:root{
  --text:#111; --muted:#666; --line:#CFCFCD; --bg:#fff; --card:#fafbfc;
}
html,body{ font-family: "Arial Narrow", Arial, sans-serif; font-weight: 400; color: var(--text); background: #f4f4f8; }
.container{ max-width: 1000px; margin: 28px auto; padding: 0 16px; }

.h1{ font-family: Arial, sans-serif; font-weight: 700; font-size: 26px; }
.h2{ font-family: "Arial Narrow", Arial, sans-serif; font-weight: 700; font-size: 18px; }
.h3{ font-family: "Arial Narrow", Arial, sans-serif; font-weight: 700; font-size: 16px; }

.note{ font-family:"Arial Narrow", Arial, sans-serif; font-style: italic; color: var(--muted); }
.card{ background: var(--bg); border:1px solid var(--line); border-radius:12px; padding:18px; }
.card.soft{ background:#f6f7f9; }

label{ font-family:"Arial Narrow", Arial, sans-serif; font-weight:700; font-size:14px; color:#222; }
input[type=text],input[type=password],input[type=email],select{
  font: 400 16px/1.4 "Arial Narrow", Arial, sans-serif;
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fff; min-width: 260px;
}
input:focus,select:focus{ outline:none; border-color:#333; box-shadow:0 0 0 3px rgba(0,0,0,.10); }

button,.btn{
  border-radius: 12px; padding: 10px 16px; border:1px solid #222; background:#111; color:#fff;
  cursor:pointer; font-size: 14px;
}
button:hover,.btn:hover{ filter: brightness(1.06); }

table.compact{ width:100%; border-collapse: collapse; background:#fff; }
table.compact th, table.compact td{ border-bottom:1px solid #eee; padding:8px 10px; font-family:"Arial Narrow", Arial, sans-serif; }
/* Forcer RAL 9005 sur la navbar */
.topbar{ background:#0A0A0A !important; color:#fff; }
.topbar .brand a, .topbar .navlinks a{ color:#fff; }