:root{
  /* Charte SGDF (relevée sur sgdf.fr / logo officiel) */
  --marine:#00395C;      /* bleu profond du logo SGDF (couleur principale) */
  --marine-clair:#0069B2;/* bleu secondaire (liens) */
  --rouge:#C22E16;       /* rouge chaud SGDF (accent) */
  --orange:#EE7F00;      /* orange SGDF (accent secondaire) */
  --vert:#006D3E;        /* vert SGDF */
  --gris:#f4f5f7;
  --bord:#dcdfe4;
  --txt:#20242b;
  --ok:#1a7f37;
  --err:#b02a37;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--txt);background:var(--gris);line-height:1.5}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}
.topbar{background:#fff;border-bottom:3px solid var(--marine)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--marine);font-weight:bold;font-size:18px}
.brand .logo{height:44px;width:auto}
nav a{color:var(--marine);text-decoration:none;margin-left:16px;font-size:14px}
nav a:hover{text-decoration:underline}
main.wrap{padding-top:24px;padding-bottom:48px;min-height:60vh}
h1{color:var(--marine);font-size:26px;margin:8px 0 16px}
h2{color:var(--marine);font-size:20px;margin:24px 0 12px}
a{color:var(--marine-clair)}
.card{background:#fff;border:1px solid var(--bord);border-radius:8px;padding:20px;max-width:520px}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cards2 .card{max-width:none}
@media(max-width:700px){.cards2{grid-template-columns:1fr}}
label{display:block;margin:12px 0 4px;font-weight:600;font-size:14px}
label.inline,label.opt{display:inline-flex;align-items:center;gap:6px;font-weight:400;margin:6px 12px 6px 0}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=datetime-local],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--bord);border-radius:6px;font-size:15px;font-family:inherit}
textarea{min-height:70px}
.req{color:var(--rouge)}
button,.btn{display:inline-block;background:var(--marine);color:#fff;border:none;padding:10px 18px;border-radius:6px;
  font-size:15px;cursor:pointer;text-decoration:none;margin-top:14px}
button:hover,.btn:hover{opacity:.92}
.btn.secondary{background:var(--marine-clair)}
.btn.ghost{background:#fff;color:var(--marine);border:1px solid var(--marine)}
.btn.small,button.small{padding:5px 10px;font-size:13px;margin-top:0}
button.danger,.danger{background:var(--err)}
.flash{background:#e7f5ec;border:1px solid var(--ok);color:#155724;padding:12px 14px;border-radius:6px;margin-bottom:16px}
.error{background:#fdecea;border:1px solid var(--err);color:#842029;padding:12px 14px;border-radius:6px;margin-bottom:16px}
.hint{color:#5b6470;font-size:13px}
table.list{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--bord);border-radius:8px;overflow:hidden}
table.list th,table.list td{padding:10px 12px;border-bottom:1px solid var(--bord);text-align:left;font-size:14px;vertical-align:top}
table.list th{background:var(--marine);color:#fff;font-size:13px}
.table-scroll{overflow-x:auto}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.actions a{margin-right:8px}
.linkbox{font-size:12px;min-width:220px}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px}
.badge.closed{background:#fde2e2;color:#842029}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:700px){.grid3{grid-template-columns:1fr}}
fieldset{border:1px solid var(--bord);border-radius:8px;margin:16px 0;padding:14px}
legend{padding:0 6px;color:var(--marine);font-weight:bold}
.field{margin-bottom:14px}
.field-row{border:1px solid var(--bord);border-radius:8px;padding:12px;margin-bottom:10px;background:#fff}
.fr-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fr-top input[type=text]{flex:1;min-width:160px}
.opts{margin-top:8px}
.event-meta{background:#fff;border:1px solid var(--bord);border-left:4px solid var(--rouge);border-radius:6px;padding:12px 14px;margin-bottom:16px;font-size:14px}
.form-actions{margin-top:16px}
.footer{background:#fff;border-top:1px solid var(--bord);padding:18px 0;font-size:13px;color:#5b6470}
.footer a{color:var(--marine-clair)}

/* En-tête compact sur mobile / petits écrans */
@media(max-width:700px){
  .topbar .wrap{flex-wrap:wrap;min-height:0;padding-top:8px;padding-bottom:8px;gap:6px 12px}
  .brand{font-size:15px;gap:8px}
  .brand .logo{height:32px}
  nav{width:100%;display:flex;flex-wrap:wrap;gap:4px 16px}
  nav a{margin-left:0;font-size:13px}
}