/* ==========================================================================
   AFRICAPASS — shell applicatif : sidebar, topbar, contenu, bottom-nav
   Breakpoints repris du prototype : 980px (desktop→mobile) et 600px (petit mobile)
   ========================================================================== */

.app{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) 1fr}

/* ============================ SIDEBAR ============================ */
.sidebar{
  border-right:1px solid var(--line);
  padding:20px 16px 16px;
  position:sticky;top:0;
  height:100vh;
  background:rgba(6,10,13,.96);
  display:flex;flex-direction:column;
  overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 22px}
.brand-mark{width:36px;height:38px;flex:none}
.brand-text{font-weight:900;font-size:23px;letter-spacing:.4px}
.brand-text span{color:var(--gold)}

.nav{display:grid;gap:4px}
.nav a{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border-radius:var(--radius-sm);
  color:#c8d0d6;font-weight:600;
  border-left:3px solid transparent;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.nav a .icon{font-size:20px;color:var(--muted)}
.nav a:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav a:hover .icon{color:var(--gold)}
.nav a.active{
  background:var(--grad-nav-active);
  border-left-color:var(--gold);
  color:var(--gold2);font-weight:700;
}
.nav a.active .icon{color:var(--gold)}

.sidebar-foot{margin-top:auto;padding-top:22px;display:grid;gap:12px}
.secure-side{
  border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;
  background:linear-gradient(145deg,#10181d,#0a0f13);
}
.secure-side-head{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.35}
.secure-side-head .icon{font-size:19px;color:var(--green);flex:none}
.secure-side p{color:var(--muted);font-size:12.5px;margin-top:7px}

.lang-select{
  display:flex;align-items:center;gap:10px;width:100%;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 12px;color:#dfe4e8;font-weight:600;background:#0b1116;
}
.lang-select .flag{font-size:17px}
.lang-caret{margin-left:auto;color:var(--muted);font-size:16px;display:flex}
.copyright{color:var(--muted2);font-size:11.5px;line-height:1.6;padding:0 4px}

/* ============================ MAIN / TOPBAR ============================ */
.main{min-width:0;display:flex;flex-direction:column}

.topbar{
  height:var(--topbar-h);flex:none;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 28px;
  position:sticky;top:0;z-index:15;
  background:rgba(6,10,13,.90);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mobile{display:none;padding:0}
.brand-mobile .brand-text{
  font-size:22px;letter-spacing:1px;
  background:linear-gradient(100deg,var(--gold2),var(--gold),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.welcome small{color:var(--muted);font-size:13px;display:block;line-height:1.3}
.welcome b{font-size:17px}

.topbar-right{display:flex;align-items:center;gap:16px}
.bell{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#dfe4e8}
.bell:hover{background:rgba(255,255,255,.05)}
.bell .icon{font-size:22px}
.bell-badge{
  position:absolute;top:1px;right:1px;min-width:18px;height:18px;padding:0 4px;
  border-radius:99px;background:var(--gold);color:#141414;
  font-size:11px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--bg);
}
.user{display:flex;align-items:center;gap:10px}
.avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--gold),#6b4402);
  display:grid;place-items:center;font-weight:900;color:#150f00;font-size:14px;
  border:2px solid rgba(246,185,27,.35);
}
.user-name{font-size:14.5px}
.user-caret{color:var(--muted);font-size:16px;display:flex}

/* ============================ CONTENU ============================ */
.content{
  flex:1;min-width:0;
  padding:20px 28px 40px;
  width:100%;max-width:var(--content-max);margin:0 auto;
  display:grid;gap:16px;align-content:start;
}

/* ============================ BOTTOM NAV (mobile) ============================ */
.bottom-nav{display:none}

/* ============================ ÉCRAN SANS SHELL (auth) ============================ */
body.no-shell .sidebar,
body.no-shell .topbar,
body.no-shell .bottom-nav{display:none !important}
body.no-shell .app{display:block}
body.no-shell .content{max-width:none;padding:0;display:block}

/* ======================================================================
   ≤ 980px — passage mobile
   ====================================================================== */
@media (max-width:980px){
  .app{display:block}
  .sidebar{display:none}

  .topbar{height:64px;padding:0 16px}
  .welcome{display:none}
  .brand-mobile{display:flex}
  .user-name,.user-caret{display:none}
  .topbar-right{gap:10px}

  .content{
    padding:14px 14px calc(var(--bottom-nav-h) + 26px + var(--safe-bottom));
    gap:14px;
  }

  .bottom-nav{
    display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    height:calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding:8px 4px calc(6px + var(--safe-bottom));
    background:rgba(7,11,14,.97);
    border-top:1px solid var(--line);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  }
  .bottom-nav a{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
    min-height:52px;padding-top:4px;
    color:#98a2a9;font-size:11px;font-weight:600;text-align:center;
  }
  .bottom-nav a .icon{font-size:23px}
  .bottom-nav a.active{color:var(--gold)}

  /* item central mis en avant (FAB doré de la maquette mobile) */
  .bottom-nav a.fab{justify-content:flex-start;position:relative}
  .bottom-nav a.fab .fab-circle{
    width:56px;height:56px;border-radius:50%;
    display:grid;place-items:center;
    background:var(--grad-gold);color:#160f00;
    box-shadow:var(--shadow-gold);
    margin-top:-30px;margin-bottom:2px;
    border:4px solid var(--bg);
  }
  .bottom-nav a.fab .icon{font-size:26px;color:#160f00}
  .bottom-nav a.fab.active{color:var(--gold)}
}

/* ======================================================================
   ≤ 600px — petit mobile
   ====================================================================== */
@media (max-width:600px){
  .content{padding-left:12px;padding-right:12px}
  .brand-mobile .brand-text{font-size:20px}
}

/* Très petits écrans : les libellés de la bottom-nav ne doivent pas se toucher */
@media (max-width:400px){
  .bottom-nav a{font-size:10px}
  .bottom-nav a .icon{font-size:22px}
}