:root {
  --sidebar-w:  260px;
  --sidebar-bg: #1a1200;
  --accent:     #f5c33c;
  --accent-dk:  #f08c20;
  --content-bg: #f4f6f8;
}

body { background: var(--content-bg); margin: 0; font-family: system-ui, -apple-system, sans-serif; }

/* ── Layout ── */
#wrapper { display: flex; min-height: 100vh; }

#sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Sidebar header ── */
.sidebar-header {
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--accent);
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 12px;
}
.brand .fas { font-size: 1.3rem; }

.countdown { display: flex; align-items: baseline; gap: 6px; }
.countdown-days { font-size: 2rem; font-weight: 900; color: var(--accent); line-height: 1; }
.countdown-label { font-size: .7rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: 1px; }

/* ── Sidebar nav ── */
#sidebar .nav { flex: 1; padding: 8px 0; }

/* ── Content area ── */
.content-header {
  background: #fff;
  padding: 13px 24px;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
}
.content-header h1 { margin: 0; font-size: 1.2rem; font-weight: 700; color: #1a1200; flex: 1; }
.header-logo { height: 36px; width: auto; }
.content-body { padding: 24px; flex: 1; }

/* ── Event banner ── */
.event-banner {
  background: linear-gradient(135deg, #1a1200 0%, #3d2800 100%);
  color: #fff;
  border-radius: 10px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.event-title { font-size: 1rem; font-weight: 700; color: var(--accent); }
.event-date  { font-size: .82rem; color: rgba(255,255,255,.65); margin-top: 2px; }
.countdown-big  { font-size: 2.6rem; font-weight: 900; color: var(--accent); line-height: 1; display: block; }
.countdown-unit { font-size: .7rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: 1px; }

/* ── Stat cards ── */
.stat-card {
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
}
.stat-card--yellow { background: linear-gradient(135deg,#f5c33c,#f4a627); color: #1a1200; }
.stat-card--green  { background: linear-gradient(135deg,#27ae60,#1e8449); color: #fff; }
.stat-card--blue   { background: linear-gradient(135deg,#2980b9,#1a5276); color: #fff; }
.stat-card--orange { background: linear-gradient(135deg,#e67e22,#c0392b); color: #fff; }
.stat-icon  { font-size: 1.4rem; opacity: .75; margin-bottom: 2px; }
.stat-value { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.stat-label { font-size: .78rem; opacity: .8; }

/* ── Budget rows ── */
.budget-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: .88rem; }

/* ── Table ── */
.table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; font-weight: 600; }
.btn-action { padding: 3px 9px; font-size: .78rem; }

/* ── Course badges ── */
.badge-5km  { background: #f5c33c !important; color: #1a1200 !important; }
.badge-10km { background: #f08c20 !important; color: #fff !important; }
.badge-21km { background: #c0392b !important; color: #fff !important; }

/* ── Statut bénévoles ── */
.badge-confirme  { background: #27ae60; color: #fff; }
.badge-en_attente { background: #e67e22; color: #fff; }
.badge-annule    { background: #e74c3c; color: #fff; }

/* ── Login page ── */
body.login-page {
  background: linear-gradient(135deg,#1a1200 0%,#3d2800 60%,#1a1200 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-container { width: 100%; max-width: 400px; padding: 20px; }
.login-card { background: #fff; border-radius: 14px; padding: 38px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.login-logo { text-align: center; margin-bottom: 26px; }
.login-logo img { display: block; margin: 0 auto 8px; }
.login-logo h2 { font-size: 1.35rem; font-weight: 800; color: #1a1200; margin: 0; }
.login-logo p  { color: #9d9590; font-size: .82rem; margin: 3px 0 0; }

/* ── Mobile ── */
#sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.45);
}
#sidebar-overlay.show { display: block; }

#menu-toggle {
  display: none;
  background: none; border: none; padding: 4px 6px; cursor: pointer; color: #1a1200;
  font-size: 1.3rem; line-height: 1; margin-right: 10px;
}

#mobile-logout {
  display: none;
}

@media (max-width: 768px) {
  #menu-toggle { display: inline-flex; align-items: center; }

  #mobile-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 34px; height: 34px;
    border-radius: 8px;
    color: #c0392b;
    font-size: 1.1rem;
    text-decoration: none;
    background: #fff0ee;
    border: 1.5px solid #f5c6c2;
    flex-shrink: 0;
  }

  #sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .22s ease;
    width: 260px;
    height: 100vh;
  }
  #sidebar.open { transform: translateX(0); }

  #wrapper { display: block; }

  #content { width: 100%; }

  .content-header {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    position: sticky; top: 0; z-index: 100;
  }
  .content-header h1 { font-size: 1rem; flex: 1; }
  .header-logo { height: 28px; }

  .content-body { padding: 12px; }

  /* Tables : forcer le scroll horizontal */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Cards sur mobile */
  .card { border-radius: 8px; }

  /* Boutons action plus grands */
  .btn-action { padding: 5px 10px; font-size: .8rem; }

  /* Badges statut inline */
  .d-flex.flex-wrap { gap: 6px !important; }

  /* Stat cards : 2 par ligne */
  .row .col-6 { padding: 4px; }

  /* Cache les colonnes secondaires dans les tableaux */
  .col-hide-mobile { display: none !important; }

  /* Budget : colonne unique */
  .col-lg-5, .col-lg-7 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }

  /* Barre d'actions : scroll horizontal */
  .d-flex.flex-wrap.gap-2.mb-3 { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 4px; }
  .d-flex.flex-wrap.gap-2.mb-3 .ms-auto { margin-left: 0 !important; }

  /* Formulaires */
  .row.g-3 > [class*="col-md"] { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }

  /* Float bar codes-réduction */
  #float-bar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  #float-bar .ms-auto { margin-left: 0 !important; flex-wrap: wrap; gap: 6px; }

  /* Poste popup */
  .poste-popup { max-width: calc(100vw - 24px); }

  /* Step bar import */
  .step-bar { gap: 0; }
  .step-item { font-size: .65rem; padding: 8px 4px; }
  .step-item:not(:last-child)::after { display: none; }

  /* Map rows import */
  .map-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .map-row > div:nth-child(2) { display: none; }

  /* Masquer colonnes peu utiles sur mobile */
  .table th:nth-child(6), .table td:nth-child(6),
  .table th:nth-child(7), .table td:nth-child(7) { display: none; }
}

@media (max-width: 480px) {
  .content-body { padding: 8px; }
  .content-header h1 { font-size: .9rem; }
  .btn-sm { font-size: .72rem; padding: 4px 8px; }
}

/* ═══════════════════════════════════════════
   SIDEBAR — En-tête redesigné
═══════════════════════════════════════════ */

/* Compte à rebours + info événement */
.sb-event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.sb-countdown {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.sb-event-info {
  flex: 1;
}
.sb-event-label {
  font-size: .6rem;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sb-event-date {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
}
.sb-event-jouj {
  font-size: .85rem;
  font-weight: 800;
  color: var(--accent);
}
.sb-edition {
  font-size: .62rem;
  color: rgba(255,255,255,.28);
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: .04em;
  padding-top: 2px;
}

/* ═══════════════════════════════════════════
   SIDEBAR — Sections avec titres cliquables
═══════════════════════════════════════════ */

/* En-tête de section */
.nav-section-hdr {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 16px 14px 5px;
  cursor: pointer;
  user-select: none;
}
.nav-section-hdr:hover .nav-s-lbl  { color: rgba(255,255,255,.55); }
.nav-section-hdr:hover .nav-s-chv  { color: rgba(255,255,255,.4); }

/* Point de couleur */
.nav-s-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

/* Label de section */
.nav-s-lbl {
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: rgba(255,255,255,.3);
  flex: 1;
  transition: color .12s;
}

/* Chevron */
.nav-s-chv {
  font-size: .5rem;
  color: rgba(255,255,255,.18);
  transition: transform .22s cubic-bezier(.4,0,.2,1), color .12s;
}
.nav-section-hdr.collapsed .nav-s-chv {
  transform: rotate(-90deg);
}

/* Groupe de liens — animation collapse */
.nav-group {
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.4,0,.2,1), opacity .2s;
  max-height: 600px;
  opacity: 1;
}
.nav-group.collapsed {
  max-height: 0 !important;
  opacity: 0;
}

/* ═══════════════════════════════════════════
   SIDEBAR — Liens avec icônes colorées
═══════════════════════════════════════════ */

#sidebar .nav-link {
  padding: 7px 14px 7px 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.6);
  font-size: .83rem;
  transition: background .12s, color .12s;
  border-radius: 0;
}
#sidebar .nav-link .fas {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  transition: color .12s;
}
#sidebar .nav-link span {
  flex: 1;
}
#sidebar .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}
#sidebar .nav-link:hover .fas {
  opacity: 1;
}
#sidebar .nav-link.active {
  color: var(--sidebar-bg);
  background: var(--accent);
  font-weight: 700;
}
#sidebar .nav-link.active .fas {
  color: inherit !important;
}

/* ═══════════════════════════════════════════
   SIDEBAR — Badges de compteurs
═══════════════════════════════════════════ */

.nav-badge {
  border-radius: 20px;
  padding: 1px 7px;
  font-size: .58rem;
  font-weight: 900;
  min-width: 20px;
  text-align: center;
  line-height: 1.55;
  flex-shrink: 0;
  animation: badge-pop .3s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes badge-pop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.nav-badge.red    { background: #ef4444; color: #fff; }
.nav-badge.orange { background: #f97316; color: #fff; }
.nav-badge.yellow { background: #f5c33c; color: #1a1200; }

/* Badge invisible si 0 */
.nav-link.active .nav-badge.red    { background: rgba(26,18,0,.25); color: rgba(26,18,0,.7); }
.nav-link.active .nav-badge.orange { background: rgba(26,18,0,.25); color: rgba(26,18,0,.7); }

/* ═══════════════════════════════════════════
   SIDEBAR — Pied redesigné
═══════════════════════════════════════════ */

.sidebar-footer {
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  bottom: 0;
  background: var(--sidebar-bg);
  z-index: 1;
}

/* Avatar initiale */
.sb-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(245,195,60,.18);
  border: 1.5px solid rgba(245,195,60,.35);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sb-user-info {
  flex: 1;
  min-width: 0;
}
.sb-user-name {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-user-role {
  font-size: .6rem;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sb-logout {
  color: rgba(255,255,255,.3);
  font-size: .9rem;
  text-decoration: none;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.sb-logout:hover {
  background: rgba(239,68,68,.2);
  color: #f87171;
}

/* ── Buttons override ── */
.btn-primary, .btn-warning.fw-bold {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #1a1200 !important;
  font-weight: 700;
}
.btn-primary:hover, .btn-warning.fw-bold:hover {
  background: var(--accent-dk) !important;
  border-color: var(--accent-dk) !important;
}