/* ========== Design system ========== */
:root{
  --bg:#f6f8fc;
  --surface:#ffffff;
  --surface-2:#f6f8fc;
  --text:#0b1220;
  --muted:#4a5970;
  --primary:#1461ff;
  --primary-2:#4d8dff;
  --accent:#005ce6;
  --green:#0e8c63;
  --red:#cc3d3d;
  --border:#e3e8f1;
  --shadow: 0 10px 30px rgba(14,23,38,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';
  background: radial-gradient(1200px 800px at 10% -20%, rgba(58,160,255,.15), transparent 60%) no-repeat,
              radial-gradient(1200px 800px at 90% -10%, rgba(123,241,255,.12), transparent 60%) no-repeat,
              var(--bg);
  color:var(--text);
  letter-spacing:.2px;
  line-height:1.5;
}

/* A11y */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Layout */
.container{max-width:1100px;margin-inline:auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in hsl, var(--surface) 80%, transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(10px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);font-weight:700}
.brand-mark{font-size:1.4rem; filter: drop-shadow(0 10px 20px rgba(58,160,255,.35));}
.brand-text{letter-spacing:.4px}

.nav-toggle{display:none; background:none;border:0;cursor:pointer}
.nav-toggle .bar{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;border-radius:2px}
.menu{display:flex;align-items:center;gap:1rem;list-style:none;margin:0;padding:0}
.menu a{color:var(--text);text-decoration:none}
.menu-cta{margin-left:.5rem}
.btn{display:inline-block;padding:.65rem 1rem;border-radius:12px;background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#061223;font-weight:700;box-shadow:var(--shadow);text-decoration:none;border:1px solid color-mix(in hsl, var(--primary) 30%, #fff 0%)}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none}

/* Hero */
.hero{padding:56px 0 30px}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.hero h1{font-size:clamp(28px,4vw,40px);margin:.2rem 0 1rem}
.hero p{color:var(--muted);max-width:60ch}
.hero-actions{display:flex;gap:.8rem;margin:1rem 0 1.2rem}
.hero-meta{display:flex;gap:1rem}
.link-like{background:none;border:0;color:var(--accent);font-weight:600;cursor:pointer}
.hero-visual{display:flex;justify-content:center}
.card.glass{background:linear-gradient(180deg,rgba(17,26,43,.6),rgba(14,23,38,.35));border:1px solid var(--border);backdrop-filter: blur(6px);border-radius:18px;padding:22px 18px;box-shadow:var(--shadow);min-width:260px}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.stat-value{font-weight:800;font-size:22px}
.stat-label{color:var(--muted);font-size:12px}
.divider{height:1px;background:var(--border);margin:12px 0}

/* Section */
.section{padding:36px 0}
.section.alt{background:linear-gradient(180deg,rgba(17,26,43,.6), rgba(14,23,38,.3))}

/* Events grid */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:16px}
.filters{display:flex;gap:.8rem;flex-wrap:wrap}
.filter{display:flex;align-items:center;gap:.4rem;color:var(--muted)}
.filter select{background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:.45rem .6rem;border-radius:10px}

.grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.event-title{margin:0;font-size:18px}
.event-date,.event-location{margin:.2rem 0;color:var(--muted)}
.event-prices{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0 .6rem}
.chip{padding:.3rem .5rem;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--text)}
.badge{padding:.25rem .5rem;border-radius:999px;font-size:12px;border:1px solid var(--border)}
.badge.green{background:rgba(30,194,139,.15);color:var(--green);border-color:rgba(30,194,139,.4)}
.badge.red{background:rgba(255,107,107,.15);color:var(--red);border-color:rgba(255,107,107,.4)}
.event-details summary{cursor:pointer;color:var(--accent);margin:.2rem 0}
.card-actions{display:flex;gap:.6rem;margin-top:.8rem}

/* Benefits */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.benefit{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.benefit .icon{font-size:22px;margin-bottom:.4rem}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:18px 0;background:color-mix(in hsl, var(--surface) 80%, transparent)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.footer-links{display:flex;gap:1rem}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--text)}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .benefits{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .menu{display:none;position:absolute;right:16px;top:64px;background:var(--surface);border:1px solid var(--border);padding:12px;border-radius:12px;flex-direction:column;min-width:220px}
  .menu.show{display:flex}
  .nav-toggle{display:block}
  .grid{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
}
/* Light theme */
:root.dark{
  --bg: #0b1220;
  --surface: #111a2b;
  --surface-2: #0e1726;
  --text: #e8edf7;
  --muted: #9fb2d0;
  --primary: #3aa0ff;
  --primary-2: #5ec1ff;
  --accent: #7bf1ff;
  --green: #1ec28b;
  --red: #ff6b6b;
  --border: #1f2b44;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ========== Components & Utilities ========== */
.grid-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.kpi .label{color:var(--muted);font-size:12px}
.kpi .value{font-size:26px;font-weight:800}
.kpi .delta{font-size:12px}
.kpi .delta.up{color:var(--green)}
.kpi .delta.down{color:var(--red)}
.kpi .spark{height:34px}

.actions{display:flex;gap:.6rem;flex-wrap:wrap}
.btn.sm{padding:.4rem .7rem;border-radius:10px;font-weight:700}
.btn.lg{padding:.85rem 1.2rem;border-radius:14px}
.btn.block{display:block;width:100%}
.btn.round{border-radius:999px}
.btn.icon{display:inline-flex;align-items:center;gap:.5rem}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.ghost.danger{border-color:rgba(255,107,107,.4);color:var(--red)}
.btn.danger{background:linear-gradient(180deg,#ff6b6b,#ff8787);color:#2b0b0b}
.btn.success{background:linear-gradient(180deg,#1ec28b,#3be0a7);color:#062219}

.alert{padding:.75rem 1rem;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,var(--surface),var(--surface-2));display:flex;gap:.6rem;align-items:flex-start}
.alert.info{border-color:color-mix(in hsl, var(--primary) 30%, var(--border));}
.alert.success{border-color:rgba(30,194,139,.4)}
.alert.warn{border-color:#e2b94d}
.alert.danger{border-color:rgba(255,107,107,.4)}
.alert .title{font-weight:700}

.input, .select, .checkbox{
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  padding:.6rem .75rem;border-radius:12px;width:100%;
}
.label{display:block;margin:.25rem 0 .35rem;color:var(--muted);font-size:13px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form{display:grid;gap:.8rem}
.help{color:var(--muted);font-size:12px}

.table-card{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:var(--shadow)}
.table-toolbar{display:flex;gap:.6rem;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:.6rem .65rem;text-align:left;border-bottom:1px solid var(--border)}
.table th{color:var(--muted);font-weight:600}
.table tr:hover td{background:color-mix(in hsl, var(--surface) 10%, transparent)}
.table .badge{font-size:11px}

.pagination{display:flex;gap:.4rem;align-items:center;justify-content:flex-end;margin-top:10px}
.page-btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:.35rem .6rem;border-radius:10px;cursor:pointer}
.page-btn[disabled]{opacity:.5;pointer-events:none}

.tabs{display:flex;gap:.4rem;border-bottom:1px solid var(--border);margin-bottom:12px}
.tab{padding:.6rem .8rem;border:1px solid var(--border);border-bottom:none;border-radius:12px 12px 0 0;background:var(--surface-2);cursor:pointer}
.tab.active{background:var(--surface);}

.code{font-family:ui-monospace,SFMono-Regular,Consolas,Monaco,Menlo,monospace;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:.75rem;overflow:auto}

/* Auth layout */
.auth{min-height:calc(100vh - 64px - 64px);display:grid;place-items:center;padding:32px 16px}
.auth-card{max-width:420px;width:100%}
.auth h1{margin:.2rem 0 1rem}
.auth .brand{justify-content:center}

/* 404 */
.big404{font-size:92px;font-weight:900;letter-spacing:2px;line-height:1}

/* Responsive add-ons */
@media (max-width: 990px){
  .grid-kpi{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .form-row{grid-template-columns:1fr}
}


/* ======= Responsive Enhancements ======= */
/* Scrollable tables on small screens */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.table-scroll .table{min-width:720px}

/* Better card spacing on phones */
@media (max-width: 480px){
  .card{padding:14px;border-radius:14px}
  .btn{padding:.6rem .85rem}
  .btn.lg{padding:.8rem 1.05rem}
  .hero{padding:36px 0 20px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .header-inner{height:60px}
  .brand-mark{font-size:1.2rem}
  .event-title{font-size:16px}
  .grid-kpi{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;align-items:flex-start}
}

/* Compact form fields and labels for touch */
@media (max-width: 600px){
  .label{font-size:12px}
  .input, .select{padding:.55rem .65rem;border-radius:10px}
}

/* Utility: full-width on small devices */
@media (max-width: 600px){
  .sm\:block{display:block;width:100%}
}

/* Stats cards simple grid on phones */
@media (max-width: 700px){
  .grid{grid-template-columns:1fr}
}

/* Make tabs wrap nicely */
@media (max-width: 600px){
  .tabs{flex-wrap:wrap;gap:.25rem}
  .tab{padding:.5rem .6rem}
}

/* --- Event tile image (optionnelle) --- */
.event-image{
  width:100%;
  height:160px;
  border-radius:12px 12px 0 0;
  overflow:hidden;
  margin:-16px -16px 12px; /* compense le padding de .card */
  background:var(--surface-2);
}
.event-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width: 480px){
  .event-image{ height:140px; margin:-14px -14px 10px; }
}


/* ======= Prose (rich text content) ======= */
.prose{
  color:var(--text);
  line-height:1.7;
  max-width:72ch;
}
.prose h1,.prose h2,.prose h3,.prose h4{line-height:1.25;margin:1.2em 0 .6em;font-weight:800}
.prose h1{font-size:clamp(28px,4vw,36px)}
.prose h2{font-size:clamp(22px,3vw,28px)}
.prose h3{font-size:clamp(18px,2.5vw,22px)}
.prose p{margin:.85em 0}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px dashed rgba(0,0,0,.2)}
.prose a:hover{border-bottom-style:solid}
.prose ul,.prose ol{margin:.6em 0 .8em 1.25em}
.prose blockquote{margin:1em 0;padding:.8em 1em;border-left:3px solid var(--border);background:var(--surface-2);border-radius:10px}
.prose code{background:var(--surface-2);border:1px solid var(--border);padding:.1em .35em;border-radius:6px}
.prose pre{background:var(--surface-2);border:1px solid var(--border);padding:1em;border-radius:12px;overflow:auto}
.prose img{max-width:100%;border-radius:12px}
.prose hr{border:0;border-top:1px solid var(--border);margin:1.2em 0}

/* ======= Blog list ======= */
.blog-hero{padding:36px 0 10px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post-card{display:flex;flex-direction:column;gap:.6rem}
.post-cover{width:100%;height:180px;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.post-cover img{width:100%;height:100%;object-fit:cover;display:block}
.post-meta{display:flex;gap:.6rem;flex-wrap:wrap;color:#667085;font-size:12px}
.post-tags{display:flex;gap:.35rem;flex-wrap:wrap}
.tag{font-size:11px;padding:.15rem .45rem;border-radius:999px;border:1px solid var(--border);color:#667085}
.post-card h3{margin:.2rem 0}
.post-excerpt{color:#667085;margin:0}
.readmore{margin-top:.2rem}

/* Single post */
.post-layout{display:grid;grid-template-columns:3fr 1fr;gap:20px}
.toc{position:sticky;top:80px;height:fit-content;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px}
.toc h4{margin:.2rem 0 .4rem}
.toc a{display:block;color:#667085;text-decoration:none;padding:.2rem 0}
.toc a:hover{color:var(--text)}

/* Responsive for blog */
@media (max-width: 980px){
  .blog-grid{grid-template-columns:1fr 1fr}
  .post-layout{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .post-cover{height:150px}
}


/* ======= Centering & Blog/Prose alignment fixes ======= */
.section-head,
.blog-hero {
  text-align: center;
}

.blog-hero h1 {
  font-size: clamp(32px, 5vw, 42px);
  margin-bottom: .4rem;
}

.blog-hero p {
  color: var(--muted);
  max-width: 60ch;
  margin: 0 auto;
}

.blog-grid {
  margin-top: 1rem;
  align-items: start;
}

.post-card { height: 100%; }

.post-card h3 a {
  color: var(--text);
  text-decoration: none;
}
.post-card h3 a:hover {
  color: var(--accent);
}

.prose { margin-left: auto; margin-right: auto; }

.post-layout { align-items: start; }
.post-layout article { margin: 0 auto; }