/* ═══════════════════════════════════════════════════════════════
   TradeNova — thème commun (en-tête, menu, barre mobile, pied de page)
   Chargé par toutes les pages de l'espace membre avec tn-shell.js.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --tn-gold:#D4AF37; --tn-gold-2:#F0D060; --tn-gold-3:#A88820;
  --tn-navy:#0B132B; --tn-navy-2:#13294B; --tn-bg:#070D1C;
  --tn-text:#FFFFFF; --tn-muted:#C0C8D8; --tn-grey:#6B7A99;
  --tn-ok:#00D68F; --tn-err:#FF4D6A;
  --tn-grad:linear-gradient(135deg,#A88820 0%,#D4AF37 55%,#F0D060 100%);
  --tn-glass:rgba(8,14,31,.82);
  --tn-line:rgba(212,175,55,.14);
  --tn-header-h:64px;
  --tn-tabbar-h:66px;
  --tn-font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ── Base commune ── */
body.tn-app{
  font-family:var(--tn-font) !important;
  display:block !important;
  background-color:var(--tn-bg);
}
body.tn-app ::selection{ background:rgba(212,175,55,.35); color:#fff; }

/* Anciens menus propres à chaque page : remplacés par l'en-tête commun.
   Les éléments restent dans le DOM (le JS des pages y écrit le nom / l'avatar). */
body.tn-app .sidebar,
body.tn-app aside.sb,
body.tn-app .sb-bd,
body.tn-app .top-bar,
body.tn-app .tb .mob-btn,
body.tn-app .app-header:not(.tn-header),
body.tn-app #sidebar{ display:none !important; }

body.tn-app .main-wrapper,
body.tn-app main.main{
  margin-left:0 !important; width:100% !important; max-width:none !important;
  min-height:calc(100vh - var(--tn-header-h)) !important;
}
body.tn-app main.main{ max-width:1280px !important; margin:0 auto !important; }

/* ── Arrivée de page en douceur ── */
@keyframes tnFadeUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
body.tn-app main{ animation:tnFadeUp .45s ease both; }

/* ═════════════ EN-TÊTE ═════════════ */
/* fixed (et non sticky) : plusieurs pages mettent overflow-x:hidden sur html ET body,
   ce qui empêche position:sticky de fonctionner */
body.tn-app{ padding-top:var(--tn-header-h) !important; }
.tn-header{
  position:fixed; top:0; left:0; right:0; z-index:700;
  height:var(--tn-header-h);
  display:flex; align-items:center; gap:14px;
  padding:0 clamp(14px,4vw,40px);
  background:var(--tn-glass);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--tn-line);
  box-shadow:0 6px 30px rgba(0,0,0,.28);
  font-family:var(--tn-font);
}
/* fine ligne dorée animée sous l'en-tête */
.tn-header::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,208,96,.85),transparent);
  background-size:40% 100%; background-repeat:no-repeat;
  animation:tnSweep 6s linear infinite; opacity:.7; pointer-events:none;
}
@keyframes tnSweep{ from{background-position:-40% 0} to{background-position:140% 0} }
body.tn-game{ padding-top:0 !important; }

.tn-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; flex-shrink:0; }
.tn-logo{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--tn-grad); color:var(--tn-navy);
  font-weight:900; font-size:.86rem; letter-spacing:.5px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 6px 20px rgba(212,175,55,.35);
  position:relative; overflow:hidden;
}
.tn-logo::after{ /* reflet */
  content:''; position:absolute; inset:-40%;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  animation:tnShine 5s ease-in-out infinite;
}
@keyframes tnShine{ 0%,70%{transform:translateX(-60%)} 100%{transform:translateX(60%)} }
.tn-brand-txt{ display:flex; flex-direction:column; line-height:1.1; }
.tn-brand-name{
  font-weight:800; font-size:1rem; letter-spacing:1.6px;
  background:linear-gradient(90deg,#fff 35%,var(--tn-gold-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tn-brand-sub{ font-size:.52rem; letter-spacing:2.6px; color:var(--tn-gold); text-transform:uppercase; margin-top:2px; }

.tn-nav{ display:flex; align-items:center; gap:2px; margin:0 auto; }
.tn-nav a{
  position:relative; display:flex; align-items:center; gap:8px;
  padding:9px 13px; border-radius:10px;
  color:var(--tn-muted); text-decoration:none; font-size:.84rem; font-weight:500;
  transition:color .2s, background .2s; white-space:nowrap;
}
.tn-nav a i{ font-size:.82rem; color:var(--tn-gold); opacity:.8; }
.tn-nav a:hover{ color:#fff; background:rgba(255,255,255,.04); }
.tn-nav a.active{ color:#fff; background:rgba(212,175,55,.09); }
.tn-nav a.active::after{
  content:''; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px;
  background:var(--tn-grad); box-shadow:0 0 10px rgba(212,175,55,.7);
}

.tn-right{ display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.tn-actions{ display:flex; align-items:center; gap:8px; }
.tn-nav + .tn-right{ margin-left:0; }

.tn-icon-btn{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color:var(--tn-muted); font-size:.95rem; transition:all .2s;
  text-decoration:none; position:relative;
}
.tn-icon-btn:hover{ color:var(--tn-gold); border-color:rgba(212,175,55,.4); }
.tn-icon-btn.danger:hover{ color:var(--tn-err); border-color:rgba(255,77,106,.45); }

.tn-user{
  display:flex; align-items:center; gap:9px; text-decoration:none; color:#fff;
  padding:4px 12px 4px 4px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  transition:border-color .2s; max-width:200px;
}
.tn-user:hover{ border-color:rgba(212,175,55,.4); }
.tn-avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-weight:800; font-size:.8rem; color:var(--tn-navy);
  background:var(--tn-grad); background-size:cover; background-position:center;
  position:relative;
}
.tn-avatar::after{ /* pastille "en ligne" */
  content:''; position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%;
  background:var(--tn-ok); border:2px solid var(--tn-bg); box-shadow:0 0 6px rgba(0,214,143,.7);
}
.tn-user-name{ font-size:.8rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.tn-burger{ display:none; }

/* ═════════════ TIROIR (mobile / tablette) ═════════════ */
.tn-drawer-bd{
  position:fixed; inset:0; z-index:5990; background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .25s;
}
.tn-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:6000;
  width:min(310px,86vw); padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#0B132B,#070D1C);
  border-left:1px solid var(--tn-line);
  transform:translateX(105%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; gap:6px; overflow-y:auto;
  font-family:var(--tn-font);
}
body.tn-drawer-open .tn-drawer{ transform:none; }
body.tn-drawer-open .tn-drawer-bd{ opacity:1; pointer-events:auto; }
.tn-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.tn-drawer-user{
  display:flex; align-items:center; gap:11px; padding:12px; margin-bottom:10px;
  border-radius:14px; background:rgba(212,175,55,.06); border:1px solid rgba(212,175,55,.18);
}
.tn-drawer-user .tn-avatar{ width:42px; height:42px; font-size:1rem; }
.tn-drawer-user strong{ display:block; font-size:.9rem; color:#fff; }
.tn-drawer-user small{ font-size:.7rem; color:var(--tn-gold); }
.tn-drawer-sec{ font-size:.6rem; letter-spacing:2px; text-transform:uppercase; color:var(--tn-grey); margin:12px 8px 4px; }
.tn-drawer a, .tn-drawer button.tn-link{
  display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:11px;
  color:var(--tn-muted); text-decoration:none; font-size:.9rem; font-weight:500;
  background:none; border:none; width:100%; text-align:left; cursor:pointer; font-family:inherit;
}
.tn-drawer a i, .tn-drawer button.tn-link i{ width:18px; text-align:center; color:var(--tn-gold); }
.tn-drawer a:hover, .tn-drawer button.tn-link:hover{ background:rgba(255,255,255,.04); color:#fff; }
.tn-drawer a.active{ background:linear-gradient(90deg,rgba(212,175,55,.16),transparent); color:#fff; }
.tn-drawer .tn-logout{ color:var(--tn-err); margin-top:auto; }
.tn-drawer .tn-logout i{ color:var(--tn-err); }

/* ═════════════ BARRE D'ONGLETS MOBILE ═════════════ */
.tn-tabbar{ display:none; }

/* ═════════════ PIED DE PAGE ═════════════ */
.tn-footer{
  position:relative; z-index:3; margin-top:48px;
  font-family:var(--tn-font); color:var(--tn-muted);
  background:linear-gradient(180deg,rgba(7,13,28,0),rgba(7,13,28,.92) 22%);
  border-top:1px solid var(--tn-line);
  padding:40px clamp(16px,5vw,48px) 22px;
}
.tn-footer-grid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px;
}
.tn-footer p{ font-size:.82rem; line-height:1.65; color:var(--tn-grey); margin-top:12px; max-width:300px; }
.tn-footer h4{ font-size:.72rem; letter-spacing:2px; text-transform:uppercase; color:#fff; margin-bottom:12px; font-weight:700; }
.tn-footer-col a, .tn-footer-col button{
  display:flex; align-items:center; gap:8px; padding:5px 0;
  color:var(--tn-muted); text-decoration:none; font-size:.83rem;
  background:none; border:none; cursor:pointer; font-family:inherit; transition:color .2s;
}
.tn-footer-col a:hover, .tn-footer-col button:hover{ color:var(--tn-gold); }
.tn-footer-col a i, .tn-footer-col button i{ width:16px; color:var(--tn-gold); font-size:.78rem; }
.tn-trust{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.tn-trust span{
  display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:600;
  padding:6px 10px; border-radius:999px; color:var(--tn-muted);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.tn-trust span i{ color:var(--tn-ok); }
.tn-footer-bottom{
  max-width:1200px; margin:28px auto 0; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; align-items:center;
  font-size:.74rem; color:var(--tn-grey);
}
.tn-pay{ display:flex; flex-wrap:wrap; gap:6px; }
.tn-pay span{
  font-size:.64rem; font-weight:700; letter-spacing:.5px; padding:4px 9px; border-radius:6px;
  background:rgba(212,175,55,.07); border:1px solid rgba(212,175,55,.2); color:var(--tn-gold-2);
}
.tn-footer .tn-risk{ max-width:1200px; margin:12px auto 0; font-size:.68rem; color:#56627f; line-height:1.55; }

/* ── Bouton retour en haut ── */
.tn-top{
  position:fixed; left:18px; bottom:calc(22px + env(safe-area-inset-bottom)); z-index:600;
  width:42px; height:42px; border-radius:12px; border:1px solid rgba(212,175,55,.35);
  background:rgba(8,14,31,.85); color:var(--tn-gold); cursor:pointer;
  display:grid; place-items:center; opacity:0; transform:translateY(10px); pointer-events:none;
  transition:all .25s; backdrop-filter:blur(8px);
}
.tn-top.show{ opacity:1; transform:none; pointer-events:auto; }

/* ═════════════ RESPONSIVE ═════════════ */
@media (max-width:1100px){
  .tn-nav a span{ display:none; }          /* icônes seules sur tablette */
  .tn-nav a{ padding:10px 12px; }
  .tn-nav a i{ font-size:.95rem; opacity:1; }
  .tn-nav a.active::after{ left:9px; right:9px; }
}
@media (max-width:900px){
  .tn-nav{ display:none; }
  .tn-burger{ display:grid; }       /* le menu ☰ ouvre Robots, Contact, Investir… */
  .tn-user-name{ display:none; }
  .tn-user{ padding:3px; }
  /* On allège l'en-tête pour que le menu ☰ reste visible : aide et déconnexion
     passent dans le tiroir (ils y figurent déjà). La cloche de notifications reste. */
  .tn-help-btn{ display:none !important; }
  .tn-logout-btn{ display:none !important; }
  .lang-select{ display:none !important; } /* le choix de langue reste dans la page */
  .tn-right{ gap:6px; }
  .tn-header{ padding-left:12px; padding-right:12px; gap:8px; }

  /* barre d'onglets façon application */
  body.tn-app:not(.tn-game) .tn-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:690;
    height:calc(var(--tn-tabbar-h) + env(safe-area-inset-bottom));
    padding:6px 6px env(safe-area-inset-bottom);
    background:rgba(8,14,31,.94);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-top:1px solid var(--tn-line);
    box-shadow:0 -8px 30px rgba(0,0,0,.35);
    font-family:var(--tn-font);
  }
  .tn-tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    color:var(--tn-grey); text-decoration:none; font-size:.62rem; font-weight:600; border-radius:12px;
    position:relative; transition:color .2s;
  }
  .tn-tabbar a i{ font-size:1.08rem; transition:transform .2s; }
  .tn-tabbar a.active{ color:var(--tn-gold); }
  .tn-tabbar a.active i{ transform:translateY(-2px); }
  .tn-tabbar a.active::before{
    content:''; position:absolute; top:-6px; width:28px; height:3px; border-radius:0 0 3px 3px;
    background:var(--tn-grad); box-shadow:0 0 10px rgba(212,175,55,.8);
  }
  .tn-tabbar a.tn-tab-main i{
    width:44px; height:44px; margin-top:-22px; border-radius:14px; display:grid; place-items:center;
    background:var(--tn-grad); color:var(--tn-navy); font-size:1.1rem;
    box-shadow:0 8px 22px rgba(212,175,55,.45), 0 0 0 4px #0A1124;
  }
  .tn-tabbar a.tn-tab-main.active i{ transform:none; }
  .tn-tabbar a.tn-tab-main.active::before{ display:none; }

  /* place pour la barre d'onglets */
  body.tn-app:not(.tn-game){ padding-bottom:calc(var(--tn-tabbar-h) + env(safe-area-inset-bottom)); }
  body.tn-app .chat-fab-wrap,
  body.tn-app .floating-chat-btn{ bottom:calc(var(--tn-tabbar-h) + 16px + env(safe-area-inset-bottom)) !important; }
  body.tn-app .chat-panel,
  body.tn-app .chat-window{ bottom:calc(var(--tn-tabbar-h) + 82px + env(safe-area-inset-bottom)) !important; }
  body.tn-app .wa-banner{ bottom:calc(var(--tn-tabbar-h) + 12px + env(safe-area-inset-bottom)) !important; }
  .tn-top{ bottom:calc(var(--tn-tabbar-h) + 16px + env(safe-area-inset-bottom)); left:14px; }

  .tn-footer-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .tn-footer-grid > :first-child{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .tn-brand-sub{ display:none; }
  .tn-brand-name{ font-size:.92rem; }
  .tn-logo{ width:36px; height:36px; border-radius:10px; }
  .tn-header{ gap:8px; }
  .tn-right{ gap:6px; }
  .tn-icon-btn{ width:38px; height:38px; }
  .tn-footer{ padding-top:30px; }
  .tn-footer-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  .tn-header::after, .tn-logo::after, body.tn-app main{ animation:none !important; }
}