/* V4 Glassy UI — fond éclairci + header compact */
:root{
  --bg:#121635; --muted:#a6b0d6; --text:#e9ecff;
  --card:#171d42; --acc1:#6e00ff; --acc2:#00d4ff
}
*{box-sizing:border-box}

/* FOND PLUS CLAIR */
html,body{
  margin:0; padding:0;
  background: radial-gradient(1100px 650px at 16% -8%, #2a3170 0, #1a204e 55%, #121635 100%);
  color:var(--text);
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial;
}

a{color:var(--acc2);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}

/* --- HEADER COMPACT + NAV DROITE --- */
.hero{
  padding:18px 0 8px;                 /* compact */
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero .container{padding-top:8px;padding-bottom:8px}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:nowrap; margin-bottom:8px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{
  width:46px;height:46px;border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  display:flex;justify-content:center;align-items:center;
  background:linear-gradient(135deg,#6e00ff22,#00d4ff22);font-weight:700
}
.actions{margin-left:auto;display:flex;gap:10px;align-items:center}

/* Slogan resserré */
h1{
  margin:4px 0 0; font-size:44px;
  background:linear-gradient(135deg,#6e00ff,#00d4ff);
  -webkit-background-clip:text; background-clip:text; color:transparent
}
p.lead{color:var(--muted); margin:6px 0 4px}

/* Cartes / grilles */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:22px 0 40px}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10); border-radius:18px; overflow:hidden;
  transition:transform .15s ease
}
.card:hover{transform:translateY(-3px)}
.card .pad{padding:14px}

.badge{font-size:12px;color:var(--muted);padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.btn.primary{background:linear-gradient(135deg,#6e00ff,#00d4ff);border:none}

.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}

/* Formulaires */
input,select,textarea{
  width:100%;padding:12px;background:#161c46;
  border:1px solid rgba(255,255,255,.16);border-radius:12px;color:#e9ecff
}
input[type=number]{max-width:160px}
label{display:block;margin:10px 0 6px;color:#cbd5ff}

/* KPIs & divers */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0}
.kpi{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.kpi .value{font-size:22px}
.notice{padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);color:#cbd5ff;margin:12px 0}
.alert{padding:12px;border-radius:12px}
.alert.ok{background:rgba(49,196,141,.12);border:1px solid rgba(49,196,141,.45)}
.alert.err{background:rgba(240,82,82,.12);border:1px solid rgba(240,82,82,.45)}
.footer{border-top:1px solid rgba(255,255,255,.08);color:#a6b0d6;padding:16px 0;margin-top:36px;font-size:13px}
.tag{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-size:12px;color:#a6b0d6;margin-right:6px}
.hr{height:1px;background:rgba(255,255,255,.1);margin:16px 0}
.small{font-size:12px;color:#a6b0d6}

/* --- VISUELS ÉVÈNEMENTS --- */
.event-card .event-cover{
  width:100%; height:320px; object-fit:contain; display:block; border-radius:12px;
  background:#151a44; border:1px solid rgba(255,255,255,.10);
}
.partner-block{display:flex;align-items:center;gap:12px;margin-top:8px}
.logo-box{width:190px;height:190px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:#151a44;overflow:hidden}
.logo-box img{width:100%;height:100%;object-fit:contain;display:block}

/* Mobile */
@media (max-width:640px){
  .hero{padding:14px 0 8px}
  .nav{flex-wrap:wrap}
  .actions{margin-left:0;margin-top:6px}
  h1{font-size:36px}
  p.lead{margin-bottom:8px}
}