/* ============================================================
   LudoSoir – Feuille de style principale
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:     #0f0e17;
  --ink2:    #2d2b3d;
  --surface: #ffffff;
  --bg:      #f4f2ef;
  --accent:  #e8500a;
  --accent2: #f7c948;
  --muted:   #8a8799;
  --border:  #e2dfd8;
  --green:   #16a34a;
  --red:     #dc2626;
  --blue:    #2563eb;
  --sidebar: 220px;
  --r:       12px;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family: 'Syne', sans-serif; font-weight: 800; }
a { text-decoration: none; color: inherit; }

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar);
  position: fixed; top: 0; left: 0; bottom: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 200;
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 0; }

.logo {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.logo-mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne',sans-serif; font-weight: 900; font-size: 18px; color: #fff;
}
.logo-text { font-family: 'Syne',sans-serif; font-weight: 800; font-size: 17px; color: var(--ink); }
.logo-text span { color: var(--accent); }

.sidebar-nav { flex: 1; padding-bottom: 12px; }
.nav-group { padding: 14px 0 4px; }
.nav-label {
  font-size: 9px; font-weight: 600; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--muted);
  padding: 0 20px 8px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px;
  font-size: 13.5px; font-weight: 500; color: var(--ink2);
  cursor: pointer; border-left: 3px solid transparent;
  transition: all .15s;
}
.nav-item:hover { color: var(--ink); background: rgba(0,0,0,.04); }
.nav-item.active { color: var(--accent); border-left-color: var(--accent); background: rgba(232,80,10,.07); }
.ni { font-size: 15px; width: 20px; text-align: center; }
.nbadge {
  margin-left: auto; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px;
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.user-card { display: flex; align-items: center; gap: 10px; }
.user-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent2); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.user-info .uname { font-size: 13px; font-weight: 600; color: var(--ink); }
.user-info .uloc  { font-size: 11px; color: var(--muted); }
.logout-link { font-size: 12px; color: var(--muted); transition: color .15s; }
.logout-link:hover { color: var(--red); }
.btn-sidebar-auth {
  display: block; text-align: center; padding: 8px; border-radius: 8px;
  font-size: 13px; font-weight: 600; background: var(--accent); color: #fff;
  transition: opacity .15s;
}
.btn-sidebar-auth:hover { opacity: .88; }
.btn-sidebar-auth.outline { background: transparent; border: 1.5px solid var(--border); color: var(--ink2); }

/* ── MAIN ── */
.main { margin-left: var(--sidebar); flex: 1; display: flex; flex-direction: column; min-width: 0; max-width: 100%; overflow-x: hidden; }

/* ── TOPBAR ── */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244,242,239,.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  padding: 10px 28px; height: 58px;
  max-width: 100%; overflow: hidden;
}
.topbar-title { font-family: 'Syne',sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title span { color: var(--accent); }
.search-bar {
  flex: 1; max-width: 380px; margin-left: 16px;
  display: flex; align-items: center; background: #fff;
  border: 1.5px solid var(--border); border-radius: 30px;
  padding: 6px 16px; gap: 8px; transition: border-color .2s;
}
.search-bar:focus-within { border-color: var(--accent); }
.search-bar input { border: none; background: transparent; outline: none; font-size: 13px; width: 100%; color: var(--ink); }
.search-bar input::placeholder { color: var(--muted); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 30px; font-family: 'DM Sans',sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; border: none; transition: opacity .15s; }
.btn-accent  { background: var(--accent); color: #fff; }
.btn-dark    { background: var(--ink); color: #fff; }
.btn-outline { background: #fff; border: 1.5px solid var(--border); color: var(--ink2); }
.btn-danger  { background: #fff; border: 1.5px solid #fca5a5; color: var(--red); }
.btn-green   { background: var(--green); color: #fff; }
.btn:hover   { opacity: .88; }

/* ── CONTENT ── */
.content { padding: 24px 28px 48px; flex: 1; }

/* ── CARDS ── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.card-head {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.card-head h3 { font-family: 'Syne',sans-serif; font-weight: 800; font-size: 15px; }
.ch-count { font-size: 12px; color: var(--muted); background: var(--bg); padding: 2px 8px; border-radius: 20px; }
.ch-action { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; }
.ch-action:hover { text-decoration: underline; }

/* ── STATS GRID ── */
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 24px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 18px 20px; display: flex; align-items: center; gap: 14px;
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.stat-num  { font-family: 'Syne',sans-serif; font-weight: 800; font-size: 24px; }
.stat-lbl  { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── EVENT CARDS ── */
.events-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 28px; }
/* ── Grille compacte (accueil) ── */
.events-grid.compact { grid-template-columns: repeat(4,1fr); gap: 12px; }
.events-grid.compact .event-card { font-size: 13px; }
.events-grid.compact .ec-banner  { height: 44px; padding: 6px 10px; }
.events-grid.compact .ec-banner-bg { font-size: 22px; }
.events-grid.compact .ec-dept    { font-size: 10px; }
.events-grid.compact .ec-body    { padding: 10px 12px 8px; gap: 5px; }
.events-grid.compact .ec-title   { font-size: 13px; }
.events-grid.compact .ec-meta-row{ font-size: 11px; }
.events-grid.compact .ec-games   { gap: 4px; }
.events-grid.compact .game-tag   { font-size: 9px; padding: 1px 6px; }
.events-grid.compact .ec-footer  { padding: 8px 12px; }
.events-grid.compact .ec-av      { width: 20px; height: 20px; font-size: 9px; }
.events-grid.compact .ec-slots   { font-size: 11px; }
.events-grid.compact .ec-join    { font-size: 11px; padding: 4px 10px; }
.event-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
  animation: fadeUp .4s ease both;
}
.event-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }
@keyframes fadeUp { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }

.ec-banner { height: 90px; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 10px 14px; }
.ec-banner-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; opacity: .2; }
.ec-dept { position: absolute; top: 10px; left: 12px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 20px; backdrop-filter: blur(4px); }
.ec-status { position: absolute; top: 10px; right: 12px; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.ec-status.open     { background: #dcfce7; color: #15803d; }
.ec-status.closed   { background: #fee2e2; color: #dc2626; }
.ec-status.soon     { background: #fef9c3; color: #854d0e; }
.ec-status.done     { background: #e5e7eb; color: #4b5563; }

.ec-body  { padding: 14px 16px 12px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ec-title { font-family: 'Syne',sans-serif; font-weight: 700; font-size: 15px; line-height: 1.25; }
.ec-body.has-poster .ec-title,
.ec-body.has-poster .ec-meta-row { padding-right: 58px; }
.ec-meta-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ec-games { display: flex; flex-wrap: wrap; gap: 5px; }
.game-tag { background: var(--bg); border: 1px solid var(--border); font-size: 10px; font-weight: 600; color: var(--ink2); padding: 2px 8px; border-radius: 6px; }

.ec-footer { display: flex; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); gap: 8px; }
.ec-avatars { display: flex; }
.ec-av { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; margin-left: -6px; color: #fff; }
.ec-av:first-child { margin-left: 0; }
.ec-slots { font-size: 11px; color: var(--muted); }
.ec-join { margin-left: auto; background: var(--ink); color: #fff; border: none; padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'DM Sans',sans-serif; transition: background .15s; }
.ec-join:hover { background: var(--accent); }
.ec-join.joined  { background: var(--green); }
.ec-join.host    { background: var(--accent); }
.ec-join.refused { background: #ef4444; }

/* ── SECTION HEAD ── */
.section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.section-head h2 { font-size: 18px; }
.sh-count { font-size: 13px; color: var(--muted); }
.sh-link  { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--accent); }
.sh-link:hover { text-decoration: underline; }

/* ── PROGRESS BAR ── */
.progress-wrap { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--border); }
.progress-bar  { flex: 1; height: 6px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width .6s ease; }

/* ── STATUS PILLS ── */
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; border: none; cursor: pointer; }
.status-pill.open     { background: #dcfce7; color: #15803d; }
.status-pill.closed   { background: #fee2e2; color: #dc2626; }
.status-pill.cancelled{ background: #e5e7eb; color: #6b7280; }
.status-pill.done     { background: #f1f5f9; color: #475569; }

/* ── FLASH MESSAGES ── */
.flash { padding: 12px 28px; font-size: 13px; font-weight: 500; }
.flash-success { background: #dcfce7; color: #15803d; border-bottom: 1px solid #bbf7d0; }
.flash-error   { background: #fee2e2; color: #dc2626; border-bottom: 1px solid #fecaca; }

/* ── FORMS ── */
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
label { font-size: 12px; font-weight: 600; color: var(--ink2); }
input, select, textarea {
  padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 8px;
  font-family: 'DM Sans',sans-serif; font-size: 13px; color: var(--ink);
  background: #fff; outline: none; transition: border-color .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 80px; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 500; pointer-events: none;
  transform: translateY(20px); opacity: 0; transition: all .3s;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── NOTIF BANNER ── */
.notif-banner {
  background: linear-gradient(135deg,rgba(232,80,10,.08),rgba(247,201,72,.08));
  border: 1px solid rgba(232,80,10,.2); border-radius: var(--r);
  padding: 14px 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}

/* ── FILTER CHIPS ── */
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-chip { padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: #fff; font-size: 12px; font-weight: 500; color: var(--ink2); cursor: pointer; transition: all .15s; white-space: nowrap; }
.filter-chip:hover, .filter-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(232,80,10,.06); }

/* ── PLAYERS LIST ── */
.player-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); transition: background .15s; }
.player-row:last-child { border-bottom: none; }
.player-row:hover { background: var(--bg); }
.pl-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pl-name { font-weight: 600; font-size: 13.5px; }
.pl-sub  { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pl-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-left: 6px; }
.pl-badge.confirmed { background: #dcfce7; color: #15803d; }
.pl-badge.pending   { background: #fef9c3; color: #854d0e; }
.pl-badge.host      { background: rgba(232,80,10,.12); color: var(--accent); }
.pl-btn { background: none; border: 1.5px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; color: var(--ink2); cursor: pointer; transition: all .15s; font-family: 'DM Sans',sans-serif; }
.pl-btn:hover { border-color: var(--accent); color: var(--accent); }
.pl-btn.danger:hover { border-color: var(--red); color: var(--red); }

/* ── MESSAGES ── */
.messages-body { max-height: 420px; overflow-y: auto; }
.msg-group { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.msg-group:last-child { border-bottom: none; }
.msg-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.msg-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.msg-time { font-size: 11px; color: var(--muted); margin-left: auto; }
.msg-bubble { background: var(--bg); border: 1px solid var(--border); border-radius: 0 10px 10px 10px; padding: 10px 14px; font-size: 13px; color: var(--ink2); line-height: 1.5; }
.msg-bubble.mine { background: rgba(232,80,10,.08); border-color: rgba(232,80,10,.2); border-radius: 10px 0 10px 10px; }
.msg-actions { display: flex; gap: 12px; margin-top: 6px; }
.msg-action-btn { background: none; border: none; font-size: 11px; color: var(--muted); cursor: pointer; transition: color .15s; }
.msg-action-btn:hover { color: var(--accent); }
.reply-bar { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: flex-end; }
.reply-bar textarea { flex: 1; border-radius: 10px; min-height: 40px; max-height: 100px; resize: none; }
.btn-send { width: 36px; height: 36px; border-radius: 8px; background: var(--accent); color: #fff; border: none; cursor: pointer; font-size: 16px; flex-shrink: 0; }

/* ── TAB BAR ── */
.tab-bar { display: flex; padding: 0 20px; border-bottom: 1px solid var(--border); }
.tab-btn { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s; }
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── QUICK ACTIONS ── */
.quick-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 14px; }
.qa-btn { background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; padding: 14px; cursor: pointer; text-align: left; display: flex; align-items: flex-start; gap: 10px; transition: all .2s; }
.qa-btn:hover { border-color: var(--accent); background: rgba(232,80,10,.04); transform: translateY(-1px); }
.qa-icon  { font-size: 20px; }
.qa-label { font-weight: 700; font-size: 12.5px; color: var(--ink); display: block; }
.qa-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; display: block; }

/* ── TIMELINE ── */
.timeline { padding: 16px 20px; display: flex; flex-direction: column; gap: 0; }
.tl-item  { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--border); }
.tl-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; z-index: 1; }
.tl-dot.done    { background: var(--green); border-color: var(--green); color: #fff; }
.tl-dot.current { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px rgba(232,80,10,.2); }
.tl-label { font-weight: 600; font-size: 13px; }
.tl-time  { font-size: 11px; color: var(--muted); }

/* ── AUTH PAGES ── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.auth-box  { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 36px; width: 420px; max-width: 95vw; }
.auth-logo { text-align: center; margin-bottom: 28px; font-family: 'Syne',sans-serif; font-weight: 900; font-size: 28px; }
.auth-logo span { color: var(--accent); }
.auth-footer { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.auth-footer a { color: var(--accent); font-weight: 600; }

/* ── MISC ── */
.two-col   { display: grid; grid-template-columns: 1fr 380px; gap: 18px; margin-bottom: 22px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.hero-banner { height: 110px; display: flex; align-items: center; padding: 0 28px; gap: 18px; position: relative; overflow: hidden; }
.mini-tag { font-size: 9px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--muted); }

@media(max-width:1100px){
  .events-grid { grid-template-columns: repeat(2,1fr); }
  .events-grid.compact { grid-template-columns: repeat(2,1fr); }
  .two-col, .three-col { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:760px){
  :root { --sidebar: 0px; }
  .sidebar { display: none; }
  .events-grid { grid-template-columns: 1fr; }
  .events-grid.compact { grid-template-columns: 1fr; }
}

/* ── VUE TOGGLE (grille / liste) ── */
.view-toggle { display:flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:3px }
.view-btn    { width:32px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s }
.view-btn svg{ width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round }
.view-btn.active     { background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.1) }
.view-btn.active svg { stroke:var(--accent) }

/* Vue liste */
.events-grid.list-view {
  display:flex;flex-direction:column;gap:8px;
}
.events-grid.list-view .event-card {
  flex-direction:row;align-items:stretch;
}
.events-grid.list-view .ec-banner {
  width:120px;min-width:120px;height:auto;flex-direction:column;justify-content:center;padding:12px;border-radius:0;
}
.events-grid.list-view .ec-banner-bg { font-size:32px;opacity:.25 }
.events-grid.list-view .ec-dept      { position:static;font-size:9px;margin-top:4px;z-index:1 }
.events-grid.list-view .ec-status    { position:static;margin-top:4px;z-index:1 }
.events-grid.list-view .ec-body      { flex:1;padding:12px 16px;gap:4px }
.events-grid.list-view .ec-title     { font-size:14px }
.events-grid.list-view .ec-footer    { border-top:none;border-left:1px solid var(--border);padding:10px 14px;flex-direction:column;justify-content:center;gap:6px;min-width:110px }
.events-grid.list-view .ec-avatars   { display:none }
.events-grid.list-view .ec-slots     { font-size:12px;font-weight:600;color:var(--ink2) }
.events-grid.list-view .ec-join      { border-radius:8px;text-align:center }
.events-grid.list-view .ec-games     { display:flex;flex-wrap:wrap;gap:4px }
@media(max-width:600px){
  .events-grid.list-view .event-card { flex-direction:column }
  .events-grid.list-view .ec-banner  { width:100%;height:70px }
  .events-grid.list-view .ec-footer  { border-left:none;border-top:1px solid var(--border);flex-direction:row }
}

/* ── PASSWORD TOGGLE (œil) ──────────────────────────────────── */
.pw-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-wrapper input[type="password"],
.pw-wrapper input[type="text"] {
  flex: 1;
  padding-right: 38px !important;
}
.pw-toggle-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  transition: color .15s;
  z-index: 1;
}
.pw-toggle-btn:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   THÈME : Azur convivial   — <html class="theme-azur">
   ══════════════════════════════════════════════════════════════ */
.theme-azur {
  --ink:     #0d1526;
  --ink2:    #1e2f50;
  --surface: #ffffff;
  --bg:      #f0f4fa;
  --accent:  #2563eb;
  --accent2: #f7c948;
  --muted:   #7a8bab;
  --border:  #d5e0f3;
}
.theme-azur .sidebar        { background: #e8edf7; border-right: 1px solid #d5e0f3; }
.theme-azur .logo           { border-bottom-color: #d5e0f3; }
.theme-azur .nav-label      { color: #7a8bab; }
.theme-azur .nav-item       { color: #1e2f50; }
.theme-azur .nav-item:hover { color: #0d1526; background: rgba(37,99,235,.07); }
.theme-azur .nav-item.active{ color: #2563eb; background: rgba(37,99,235,.1); border-left-color: #2563eb; }
.theme-azur .sidebar-footer { border-top-color: #d5e0f3; }
.theme-azur .user-info .uname { color: #0d1526; }
.theme-azur .logo-text      { color: #0d1526; }
.theme-azur .logout-link    { color: #7a8bab; }
.theme-azur .btn-accent     { background: #2563eb; }
.theme-azur .btn-accent:hover { background: #1d4ed8; }
.theme-azur .nav-item.active { background: rgba(37,99,235,.1); }

/* ══════════════════════════════════════════════════════════════
   THÈME : Blanc Ludo   — <html class="theme-blanc">
   ══════════════════════════════════════════════════════════════ */
.theme-blanc {
  --ink:     #1a1a2e;
  --ink2:    #3d3d5c;
  --surface: #ffffff;
  --bg:      #ffffff;
  --accent:  #e85d04;
  --accent2: #ffd166;
  --muted:   #9393a8;
  --border:  #e8e8f0;
}
.theme-blanc body,
.theme-blanc .main { background: #ffffff; }
.theme-blanc .topbar { background: rgba(255,255,255,.97); border-bottom-color: #e8e8f0; }
.theme-blanc .sidebar        { background: #ffffff; border-right: 1px solid #e8e8f0; }
.theme-blanc .logo           { border-bottom-color: #e8e8f0; }
.theme-blanc .nav-label      { color: #9393a8; }
.theme-blanc .nav-item       { color: #3d3d5c; }
.theme-blanc .nav-item:hover { color: #1a1a2e; background: rgba(232,93,4,.06); }
.theme-blanc .nav-item.active{ color: #e85d04; background: rgba(232,93,4,.08); border-left-color: #e85d04; }
.theme-blanc .sidebar-footer { border-top-color: #e8e8f0; }
.theme-blanc .user-info .uname { color: #1a1a2e; }
.theme-blanc .logo-text      { color: #1a1a2e; }
.theme-blanc .logout-link    { color: #9393a8; }
.theme-blanc .nbadge         { background: #e85d04; }
/* ==========================================================
   LudoSoir — Blocs onboarding home (à ajouter dans app.css)
   ========================================================== */


/* ── BLOC : Comment ça marche ─────────────────────────────── */

.ls-howto {
  padding: 36px 32px 32px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.ls-howto__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.ls-howto__title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  margin: 0 0 6px;
}

.ls-howto__subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 28px;
}

.ls-howto__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ls-howto__step {
  text-align: center;
  padding: 22px 16px;
  background: linear-gradient(135deg, rgba(232,80,10,.04) 0%, rgba(247,201,72,.06) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ls-howto__step:hover {
  transform: translateY(-3px);
  border-color: rgba(232,80,10,.25);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.ls-howto__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(232,80,10,.25);
}

.ls-howto__step-title {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}

.ls-howto__step-desc {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}


/* ── BLOC : Pourquoi LudoSoir ─────────────────────────────── */

.ls-why {
  padding: 28px 0;
  margin-top: 8px;
}

.ls-why__title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  margin: 0 0 22px;
}

.ls-why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ls-why__item {
  background: #fff;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ls-why__item:hover {
  transform: translateY(-2px);
  border-color: rgba(232,80,10,.2);
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}

.ls-why__icon {
  font-size: 26px;
  margin-bottom: 8px;
  line-height: 1;
}

.ls-why__item-title {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}

.ls-why__item-desc {
  color: var(--ink2);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}


/* ── Responsive mobile ────────────────────────────────────── */

@media (max-width: 768px) {

  .ls-howto {
    padding: 28px 16px 24px;
  }

  .ls-howto__title,
  .ls-why__title {
    font-size: 19px;
  }

  .ls-howto__steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ls-howto__step {
    padding: 18px 14px;
  }

  .ls-why {
    padding: 20px 0;
  }

  .ls-why__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ls-why__item {
    padding: 16px;
  }
}

/* Comptes liés — bascule sans déconnexion (sidebar) */
.account-switcher { padding:10px 14px; border-top:1px solid var(--border); }
.as-current { font-size:12px; color:var(--muted); margin-bottom:6px; }
.as-switch-form { margin-bottom:4px; }
.as-switch-btn {
  width:100%; text-align:left; background:none; border:1px solid var(--border);
  border-radius:8px; padding:6px 10px; font-size:13px; cursor:pointer; font-family:inherit;
}
.as-switch-btn:hover { background:var(--bg); }