/* ===========================================================
   MineKonnect — Mise en page (nav publique, app shell, footer)
   =========================================================== */

/* --- Nav publique --- */
.navbar{
  position:sticky; top:0; z-index:200; height:var(--header-h);
  background:rgba(11,12,16,0.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.navbar .nav-content{
  max-width:1220px; margin:0 auto; height:100%; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ height:36px; width:auto; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:.01em; }
.brand-name b{ color:var(--gold-400); font-weight:600; }

.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:14.5px; font-weight:600; color:var(--ink-dim); transition:color .15s; position:relative; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-24px; height:2px; background:var(--gold-grad); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.nav-burger{ display:none; background:none; border:1px solid var(--border-soft); border-radius:10px; padding:9px 11px; color:var(--ink); cursor:pointer; }

@media (max-width: 880px){
  .nav-links{ position:fixed; inset:var(--header-h) 0 0 0; background:var(--void); flex-direction:column;
    padding:30px 24px; gap:22px; transform:translateX(100%); transition:transform .25s ease; overflow-y:auto; }
  .nav-links.open{ transform:translateX(0); }
  .nav-burger{ display:inline-flex; }
}

/* --- Footer public --- */
.site-footer{ border-top:1px solid var(--border-soft); padding:56px 0 28px; margin-top:100px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-grid h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-400); margin-bottom:16px; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid a{ font-size:14px; color:var(--ink-dim); }
.footer-grid a:hover{ color:var(--ink); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--border-soft); font-size:12.5px; color:var(--ink-mute); flex-wrap:wrap; gap:10px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* --- App shell (pages authentifiées) --- */
.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--surface); border-right:1px solid var(--border-soft);
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:22px 16px; z-index:150;
}
.app-sidebar .brand{ padding:8px 10px 26px; }
.app-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.app-nav a{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px;
  font-size:14.5px; font-weight:600; color:var(--ink-dim); transition:all .15s;
}
.app-nav a svg{ width:19px; height:19px; flex-shrink:0; }
.app-nav a:hover{ background:var(--surface-2); color:var(--ink); }
.app-nav a.active{ background:rgba(230,196,104,.12); color:var(--gold-300); }
.app-nav .nav-badge{ margin-left:auto; background:var(--gold-500); color:#1a1200; font-size:10.5px; font-weight:800; border-radius:var(--r-pill); padding:1px 7px; }
.sidebar-footer{ border-top:1px solid var(--border-soft); padding-top:14px; margin-top:10px; }
.sidebar-user{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; }
.sidebar-user .avatar{ width:36px; height:36px; border-radius:50%; background:var(--gold-grad); display:flex; align-items:center; justify-content:center; font-weight:800; color:#1a1200; font-size:14px; flex-shrink:0; }
.sidebar-user .name{ font-size:13.5px; font-weight:700; }
.sidebar-user .role{ font-size:11.5px; color:var(--ink-mute); }

.app-main{ flex:1; min-width:0; }
.app-topbar{
  height:var(--header-h); border-bottom:1px solid var(--border-soft); display:flex; align-items:center;
  justify-content:space-between; padding:0 30px; position:sticky; top:0; background:rgba(11,12,16,.9);
  backdrop-filter:blur(10px); z-index:100; gap:20px;
}
.topbar-search{ flex:1; max-width:420px; position:relative; }
.topbar-search input{ width:100%; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--r-pill); padding:10px 16px 10px 40px; color:var(--ink); font-size:14px; }
.topbar-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-mute); }
.topbar-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{ position:relative; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border:1px solid var(--border-soft); color:var(--ink); cursor:pointer; }
.icon-btn:hover{ border-color:var(--gold-500); }
.icon-btn .dot{ position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid var(--surface); display:none; }
.icon-btn .dot.show{ display:block; }
.sidebar-toggle{ display:none; background:none; border:1px solid var(--border-soft); border-radius:10px; padding:9px; color:var(--ink); cursor:pointer; }

.app-content{ padding:32px; max-width:1320px; }

@media (max-width: 980px){
  .app-sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .25s; box-shadow:var(--shadow-pop); }
  .app-sidebar.open{ transform:translateX(0); }
  .sidebar-toggle{ display:inline-flex; }
  .topbar-search{ display:none; }
  .app-content{ padding:20px; }
}