/* ============================================================
   ESPACE MEMBRE — layout sidebar fixe + composants de page
   Dépend de : tokens.css, components.css
   Règle : aucun hex, aucune valeur en dur — uniquement des tokens.
   ============================================================ */

/* ── Layout racine ── */

.app-layout {
  display:    flex;
  min-height: 100vh;
  background: var(--color-bg);
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════ */

.sidebar {
  position:   fixed;
  top:        0;
  left:       0;
  width:      var(--sidebar-w);
  height:     100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display:        flex;
  flex-direction: column;
  z-index:    200;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform var(--dur-mid) var(--ease);
}

/* ── Marque ── */

.sidebar-brand {
  display:     flex;
  align-items: center;
  gap:         var(--s3);
  padding:     var(--s5);
  border-bottom: 1px solid var(--sidebar-border);
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar-brand-logo {
  width:         36px;
  height:        36px;
  border-radius: var(--r-full);
  object-fit:    contain;
  background:    var(--color-surface);
  flex-shrink:   0;
}

.sidebar-brand-name {
  display:     block;
  color:       var(--sidebar-active-text);
  font-size:   var(--text-base);
  font-weight: var(--fw-extra);
  line-height: 1.2;
}

.sidebar-brand-sub {
  display:     block;
  color:       var(--sidebar-text-dim);
  font-size:   var(--text-xs);
  font-weight: var(--fw-medium);
}

/* ── Utilisateur ── */

.sidebar-user {
  display:     flex;
  align-items: center;
  gap:         var(--s3);
  padding:     var(--s4) var(--s5);
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-avatar {
  width:         38px;
  height:        38px;
  border-radius: var(--r-full);
  background:    var(--navy-700);
  color:         var(--sidebar-active-text);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     var(--text-sm);
  font-weight:   var(--fw-bold);
  flex-shrink:   0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sidebar-user-info { min-width: 0; }

.sidebar-user-name {
  display:       block;
  color:         var(--sidebar-active-text);
  font-size:     var(--text-sm);
  font-weight:   var(--fw-semi);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  display:       block;
  color:         var(--sidebar-text-dim);
  font-size:     var(--text-xs);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* ── Navigation ── */

.sidebar-nav {
  flex:           1;
  padding:        var(--s3);
  display:        flex;
  flex-direction: column;
  gap:            2px;
  list-style:     none;
  margin:         0;
}

.sidebar-nav-item {
  display:     flex;
  align-items: center;
  gap:         var(--s3);
  padding:     10px var(--s3);
  border-radius: var(--r-sm);
  color:         var(--sidebar-text);
  text-decoration: none;
  font-size:   var(--text-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease),
    color      var(--dur-fast) var(--ease);
}

.sidebar-nav-item:hover {
  background: var(--sidebar-hover-bg);
  color:      var(--sidebar-active-text);
}

.sidebar-nav-item.active {
  background:  var(--sidebar-active-bg);
  color:       var(--sidebar-active-text);
  font-weight: var(--fw-semi);
}

.sidebar-nav-icon {
  width:      18px;
  height:     18px;
  flex-shrink: 0;
  opacity:    0.70;
}

.sidebar-nav-item.active .sidebar-nav-icon,
.sidebar-nav-item:hover  .sidebar-nav-icon { opacity: 1; }

/* ── Séparateurs ── */

.sidebar-sep {
  margin:  var(--s2) var(--s3);
  border:  none;
  border-top: 1px solid var(--sidebar-sep);
}

.sidebar-sep-label {
  padding:        var(--s2) var(--s3) var(--s1);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-semi);
  color:          var(--sidebar-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Footer sidebar ── */

.sidebar-footer {
  padding:        var(--s3);
  border-top:     1px solid var(--sidebar-border);
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.sidebar-footer-item {
  display:     flex;
  align-items: center;
  gap:         var(--s3);
  padding:     9px var(--s3);
  border-radius: var(--r-sm);
  color:         var(--sidebar-text);
  text-decoration: none;
  font-size:   var(--text-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: var(--font);
  width:       100%;
  text-align:  left;
  transition:
    background var(--dur-fast) var(--ease),
    color      var(--dur-fast) var(--ease);
}

.sidebar-footer-item:hover {
  background: var(--sidebar-hover-bg);
  color:      var(--sidebar-active-text);
}

.sidebar-footer-item.danger       { color: var(--red-200); }
.sidebar-footer-item.danger:hover { background: rgba(220,38,38,0.15); }

/* ═══════════════════════════════════════════════════════════
   MAIN WRAPPER
   ═══════════════════════════════════════════════════════════ */

.main-wrapper {
  flex:           1;
  margin-left:    var(--sidebar-w);
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
}

/* ── Topbar ── */

.main-topbar {
  height:      var(--topbar-h);
  background:  var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     0 var(--s6);
  gap:         var(--s4);
  position:    sticky;
  top:         0;
  z-index:     100;
  box-shadow:  var(--shadow-xs);
}

.topbar-title {
  font-size:   var(--text-sm);
  font-weight: var(--fw-semi);
  color:       var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.topbar-actions {
  display:     flex;
  align-items: center;
  gap:         var(--s2);
}

.topbar-search {
  display:     flex;
  align-items: center;
}

.topbar-search-input {
  padding:       7px var(--s3);
  border:        1.5px solid var(--color-border);
  border-radius: var(--r-sm);
  font-family:   var(--font);
  font-size:     var(--text-xs);
  color:         var(--color-text);
  background:    var(--color-bg);
  outline:       none;
  width:         180px;
  transition:
    border-color var(--dur-fast) var(--ease),
    width        var(--dur-mid)  var(--ease);
}

.topbar-search-input:focus {
  border-color: var(--color-primary);
  width:        220px;
}

.topbar-search-input::placeholder { color: var(--navy-400); }

.topbar-notif {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   var(--r-md);
  color:           var(--color-muted);
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease),
    color      var(--dur-fast) var(--ease);
}

.topbar-notif:hover { background: var(--color-bg); color: var(--color-text); }

.topbar-notif-badge {
  position:        absolute;
  top:             4px;
  right:           4px;
  background:      var(--color-danger);
  color:           var(--color-surface);
  font-size:       0.6rem;
  font-weight:     var(--fw-extra);
  min-width:       16px;
  height:          16px;
  border-radius:   var(--r-full);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0 3px;
  line-height:     1;
}

/* ── Burger mobile ── */

.topbar-burger {
  display:         none;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border:          1px solid var(--color-border);
  border-radius:   var(--r-sm);
  background:      none;
  cursor:          pointer;
  color:           var(--color-text);
  flex-shrink:     0;
}

/* ── Overlay mobile ── */

.sidebar-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.45);
  z-index:    199;
}

/* ═══════════════════════════════════════════════════════════
   CONTENU DE PAGE
   ═══════════════════════════════════════════════════════════ */

.page-content {
  flex:    1;
  padding: var(--s8) var(--s8) var(--s12);
}

.page-header       { margin-bottom: var(--s8); }

.page-title {
  font-size:   var(--text-2xl);
  font-weight: var(--fw-extra);
  color:       var(--color-text);
  margin-bottom: var(--s1);
}

.page-sub {
  font-size: var(--text-sm);
  color:     var(--color-muted);
}

.page-messages {
  display:        flex;
  flex-direction: column;
  gap:            var(--s2);
  margin-bottom:  var(--s6);
}

/* ── Stat cards ── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:            var(--s5);
  margin-bottom:  var(--s8);
}

.stat-card {
  background:    var(--color-surface);
  border-radius: var(--r-lg);
  border:        1px solid var(--color-border);
  box-shadow:    var(--shadow-sm);
  padding:       var(--s5);
  display:       flex;
  flex-direction: column;
  gap:           var(--s3);
}

.stat-card-icon {
  width:           40px;
  height:          40px;
  border-radius:   var(--r-md);
  background:      var(--color-primary-bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--color-primary);
  flex-shrink:     0;
}

.stat-card-icon svg { width: 20px; height: 20px; }

.stat-card--accent .stat-card-icon {
  background: var(--navy-900);
  color:      var(--navy-200);
}

.stat-card-label {
  font-size:      var(--text-xs);
  font-weight:    var(--fw-semi);
  color:          var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-card-value {
  font-size:   var(--text-xl);
  font-weight: var(--fw-bold);
  color:       var(--color-text);
  line-height: 1.2;
}

.stat-card-meta {
  font-size: var(--text-xs);
  color:     var(--color-muted);
}

.stat-card-footer {
  margin-top:      auto;
  padding-top:     var(--s3);
  border-top:      1px solid var(--color-border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--s2);
}

/* ── Sections ── */

.page-section      { margin-bottom: var(--s8); }

.section-title {
  font-size:     var(--text-base);
  font-weight:   var(--fw-bold);
  color:         var(--color-text);
  margin-bottom: var(--s4);
}

/* ── Cotisation bureau ── */

.bureau-cot-grid {
  display:        flex;
  flex-wrap:      wrap;
  gap:            var(--s2);
  margin-bottom:  var(--s4);
}

.cot-mois {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--s1);
  padding:        var(--s2) var(--s3);
  border-radius:  var(--r-sm);
  min-width:      58px;
  font-size:      var(--text-xs);
  font-weight:    var(--fw-semi);
}

.cot-mois--ok  { background: var(--green-100); color: var(--green-700); }
.cot-mois--nok { background: var(--navy-100);  color: var(--color-muted); }

/* ═══════════════════════════════════════════════════════════
   PAGE PROFIL
   ═══════════════════════════════════════════════════════════ */

/* Layout 2 colonnes */
.profil-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 700px) {
  .profil-layout { grid-template-columns: 1fr; }
}

/* Carte identité */
.profil-identity {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
}
.profil-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--color-border);
}
.profil-avatar-placeholder {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-primary-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: var(--fw-extra);
  color: var(--color-primary);
  flex-shrink: 0;
}
.profil-identity-info { flex: 1; min-width: 0; }
.profil-identity-name {
  font-size: var(--text-xl);
  font-weight: var(--fw-extra);
  color: var(--color-text);
  margin-bottom: 3px;
}
.profil-identity-sub {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--s3);
}
.profil-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Champ lecture */
.profil-field { display: flex; flex-direction: column; gap: 3px; }
.profil-field-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.profil-field-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

.profil-section-title {
  font-size:     var(--text-sm);
  font-weight:   var(--fw-bold);
  color:         var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s5);
}

.profil-section-sub {
  font-size:     var(--text-xs);
  color:         var(--color-muted);
  margin-top:    calc(-1 * var(--s3));
  margin-bottom: var(--s4);
}

.profil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

.profil-full { grid-column: 1 / -1; }

.form-hint {
  font-size:  var(--text-xs);
  color:      var(--color-muted);
  margin-top: var(--s1);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   ONBOARDING BANNER (checklist de complétion profil)
   ═══════════════════════════════════════════════════════════ */

.onboarding-banner {
  background:    var(--blue-50);
  border:        1px solid var(--blue-100);
  border-left:   3px solid var(--color-primary);
  border-radius: var(--r-lg);
  padding:       var(--s4) var(--s6);
  margin-bottom: var(--s6);
}

.onboarding-title {
  font-size:      var(--text-xs);
  font-weight:    var(--fw-extra);
  color:          var(--blue-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom:  var(--s3);
}

.onboarding-steps {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--s2);
}

.onboarding-step {
  display:     flex;
  align-items: center;
  gap:         var(--s2);
  padding:     6px var(--s3);
  border-radius: var(--r-full);
  font-size:   var(--text-sm);
  font-weight: var(--fw-medium);
}

.onboarding-step--done    { background: var(--green-100); color: var(--green-700); }
.onboarding-step--pending { background: var(--amber-100); color: var(--amber-700); }
.onboarding-step--todo    { background: var(--navy-100);  color: var(--color-muted); }

.onboarding-step--todo a {
  color:       var(--color-primary);
  font-weight: var(--fw-semi);
}
.onboarding-step--todo a:hover { text-decoration: underline; }

.ostep-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           20px;
  height:          20px;
  border-radius:   var(--r-full);
  font-size:       var(--text-xs);
  font-weight:     var(--fw-extra);
  flex-shrink:     0;
  line-height:     1;
}

.onboarding-step--done    .ostep-icon { background: var(--green-600); color: #fff; }
.onboarding-step--pending .ostep-icon { background: var(--amber-600); color: #fff; }
.onboarding-step--todo    .ostep-icon { background: var(--navy-200);  color: var(--color-muted); }

.ostep-label { font-size: var(--text-sm); }

.ostep-sep {
  color:       var(--navy-400);
  font-size:   var(--text-sm);
  flex-shrink: 0;
  padding:     0 var(--s1);
}

/* ═══════════════════════════════════════════════════════════
   PAGES D'AUTHENTIFICATION (connexion, rejoindre, reset)
   ═══════════════════════════════════════════════════════════ */

.auth-page {
  min-height:      100vh;
  background:      var(--color-bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--s8) var(--s4);
}

.auth-card {
  width:           100%;
  max-width:       420px;
  background:      var(--color-surface);
  border-radius:   var(--r-xl);
  box-shadow:      var(--shadow-xl);
  padding:         var(--s10) var(--s8);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--s5);
}

.auth-logo {
  width:         64px;
  height:        64px;
  border-radius: var(--r-full);
  object-fit:    contain;
  box-shadow:    var(--shadow-md);
}

.auth-title {
  font-size:   var(--text-2xl);
  font-weight: var(--fw-extra);
  color:       var(--color-text);
  text-align:  center;
}

.auth-sub {
  font-size:  var(--text-sm);
  color:      var(--color-muted);
  text-align: center;
  line-height: 1.5;
}

.auth-form {
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            var(--s4);
}

.auth-links {
  font-size:       var(--text-sm);
  color:           var(--color-muted);
  text-align:      center;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--s2);
  flex-wrap:       wrap;
}

.auth-sep { color: var(--color-border); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-overlay.is-open {
    display: block;
  }

  .main-wrapper {
    margin-left: 0;
  }

  .topbar-burger {
    display: flex;
  }

  .page-content {
    padding: var(--s5) var(--s4) var(--s12);
  }

  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
  }

  .topbar-search { display: none; }
}

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .auth-card {
    padding:       var(--s8) var(--s5);
    border-radius: var(--r-lg);
    box-shadow:    var(--shadow-lg);
  }
}