:root{
  --bg:#eef1f6; --card:#ffffff; --ink:#1d2433; --muted:#6b7280;
  --brand:#1f3a5f; --brand2:#2e5a8f; --accent:#c8964b; --accent-d:#a97a33;
  --ok:#1f7a4d; --err:#b23b3b; --line:#e3e7ee; --radius:14px;
  --shadow:0 6px 24px rgba(20,30,50,.08);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--ink); background:linear-gradient(180deg,#f6f8fc,#e7ecf4 320px);
  min-height:100vh; display:flex; flex-direction:column;
}
/* Header */
.topbar{background:var(--brand); color:#fff; padding:14px 20px; box-shadow:var(--shadow)}
.brand{display:flex; align-items:center; gap:14px; max-width:760px; margin:0 auto}
.logo{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-d)); color:#fff;
  font-weight:800; letter-spacing:1px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
}
.brand-title{font-size:20px; font-weight:700; line-height:1}
.brand-sub{font-size:12.5px; opacity:.85; margin-top:3px}
/* Layout */
.wrap{flex:1; width:100%; max-width:760px; margin:26px auto; padding:0 16px;
  display:flex; flex-direction:column; gap:18px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px; box-shadow:var(--shadow)}
.banner{position:relative; margin:-22px -22px 18px; border-radius:14px 14px 0 0; overflow:hidden}
.banner img{width:100%; height:190px; object-fit:cover; display:block}
.banner-cap{position:absolute; left:0; right:0; bottom:0; padding:18px 16px 9px; color:#fff;
  font-size:13px; font-weight:600; letter-spacing:.2px;
  background:linear-gradient(to top, rgba(15,25,45,.72), rgba(15,25,45,0))}
.hero h1{margin:.1em 0 .3em; font-size:25px; color:var(--brand)}
h1,h2{color:var(--brand)} h2{font-size:18px; margin:.2em 0 .7em}
.lead{color:var(--muted); line-height:1.55; margin:.2em 0 1.2em}
.hint{color:var(--muted); font-size:13.5px; margin-top:14px}
.hint a{color:var(--brand2)}
/* Forms */
.form{display:flex; flex-direction:column; gap:10px}
.form.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid2 .span2{grid-column:1 / -1}
label{font-size:13px; font-weight:600; color:#3b4453; margin-bottom:5px; display:block}
input,textarea,select{
  width:100%; padding:12px 13px; border:1.5px solid var(--line); border-radius:10px;
  font-size:15.5px; background:#fbfcfe; transition:border-color .15s,box-shadow .15s;
}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--brand2);
  box-shadow:0 0 0 3px rgba(46,90,143,.15)}
input:disabled{background:#f0f2f6; color:#7a828f}
.code-input{font-size:30px; letter-spacing:12px; text-align:center; font-weight:700}
/* Buttons */
.btn{border:0; border-radius:10px; padding:12px 18px; font-size:15px; font-weight:600;
  cursor:pointer; transition:transform .05s, background .15s, box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand2),var(--brand)); color:#fff}
.btn.primary:hover{box-shadow:0 6px 16px rgba(31,58,95,.28)}
.btn.ghost{background:#f1f4f9; color:var(--brand)}
.btn.ghost:hover{background:#e6ebf3}
.btn.small{padding:8px 12px; font-size:13.5px}
/* Misc */
.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px}
.row-end{display:flex; align-items:center; gap:12px; justify-content:flex-end}
.msg{font-size:14px; min-height:18px}
.msg.ok{color:var(--ok)} .msg.err{color:var(--err)}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{background:#f1f5fb; border:1px solid var(--line); border-radius:10px; padding:10px 13px;
  font-size:14px; min-width:130px}
.chip .t{font-weight:700; color:var(--brand)}
.chip .s{color:var(--muted); font-size:12.5px; margin-top:2px}
.role{font-size:12px; color:var(--muted); background:#eef2f8; padding:3px 9px; border-radius:20px}
.av{width:34px; height:34px; border-radius:50%; background:var(--brand2); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:14px}
.av.big{width:46px; height:46px; font-size:17px}
/* Onglets contacts */
.tabs{display:flex; flex-wrap:wrap; gap:6px; border-bottom:1.5px solid var(--line); margin-bottom:0}
.tab{padding:9px 14px; border:1px solid var(--line); border-bottom:none; cursor:pointer;
  background:#f3f6fb; color:#43506a; font-size:14px; font-weight:600;
  border-radius:10px 10px 0 0; margin-bottom:-1.5px; transition:background .15s,color .15s}
.tab:hover{background:#e9eef6}
.tab.active{background:#fff; color:var(--brand); border-bottom:1.5px solid #fff;
  box-shadow:0 -2px 0 var(--accent) inset}
.tab-panel{border:1.5px solid var(--line); border-top:none; border-radius:0 0 12px 12px;
  padding:16px 16px}
.cc-head{display:flex; align-items:center; gap:13px; margin-bottom:12px}
.cc-name{font-weight:700; font-size:16px; color:var(--brand)}
.cc-head .btn{margin-left:auto}
.kvs{display:grid; gap:8px}
.kv{display:flex; gap:10px; font-size:14.5px; border-bottom:1px dashed var(--line); padding-bottom:7px}
.kv span{min-width:80px; color:var(--muted)}
.btn.danger{background:#fbeaea; color:var(--err)}
.btn.danger:hover{background:#f6dada}
.info-box{background:#fbf7ef; border-color:#ecdfc4}
/* Tables (admin) */
.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th,.tbl td{text-align:left; padding:9px 8px; border-bottom:1px solid var(--line)}
.tbl.small{font-size:12.5px} .nowrap{white-space:nowrap}
/* Footer */
.foot{color:var(--muted); font-size:12.5px; text-align:center; padding:18px}
@media(max-width:560px){
  .form.grid2{grid-template-columns:1fr}
  .hero h1{font-size:22px}
}