/* ── Tablet paysage (≤1023px) ─────────────────────────── */
@media(max-width:1023px){
  .g4{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════════════
   DESKTOP & TABLETTE PAYSAGE ≥901px
   Nav horizontale sticky · Contenu plein écran
   ══════════════════════════════════════════════════════════ */
/* ── Desktop & tablette paysage ≥901px ── */
@media(min-width:901px){
  .wrap{max-width:100%;padding:0 28px 56px}
  .pg{padding-top:12px}
  .g4{grid-template-columns:repeat(4,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1200px){
  .nb{padding:10px 22px 11px}
  .wrap{padding:0 40px 56px}
  .g4{grid-template-columns:repeat(4,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
}

/* ── Grand écran ≥1600px ── */
@media(min-width:1600px){
  .wrap{padding:0 56px 64px}
}

/* ── Tablet portrait (≤768px) ─────────────────────────── */
@media(max-width:768px){
  .wrap{padding:0 16px 90px}
  .g2,.g3,.gp{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .hero-row{flex-direction:column}
  .hero-stat{flex:none}
  .cw{height:200px}.cwl{height:240px}
  .tbl th,.tbl td{font-size:12px;padding:7px 8px}
  .card{padding:18px}
  .mc{padding:14px 16px}
  .mc .val{font-size:20px}
  header h1{font-size:16px}
}

/* ── Tablette portrait 601–900px : nav compacte ── */
@media(min-width:601px) and (max-width:900px){
  .nb{padding:8px 14px 9px;font-size:11px}
  .wrap{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
}

/* ── Mobile ≤600px : nav horizontale compacte ── */
@media(max-width:600px){
  .nb,#nav-more-btn{flex:1;min-width:0;flex-shrink:1;padding:6px 2px 8px;font-size:10px;gap:2px}
  .nb .icon,.nb .icon-sm,#nav-more-btn .icon,#nav-more-btn .icon-sm{width:18px;height:18px}
  .nb span[data-i18n],#nav-more-btn span{overflow:hidden;text-overflow:ellipsis;max-width:100%}

  /* ── Header minimal & professionnel ── */
  .wrap{padding:0 14px calc(68px + env(safe-area-inset-bottom,0px))}
  header{
    padding:9px 14px;margin-bottom:0;
    border-radius:0;gap:8px;position:sticky;top:0;
    box-shadow:var(--shadow-sm);
    /* Négatif = compense le padding de .wrap (14px) pour couvrir 100vw */
    margin-left:-14px !important;margin-right:-14px !important;
    width:calc(100% + 28px) !important;
    padding-left:14px !important;padding-right:14px !important;
  }
  .hicon{width:32px;height:32px;border-radius:10px}
  .hdate{display:none}
  /* Sur mobile : titre = nom de la page active */
  .header-title-block h1{font-size:15px;font-weight:700}
  .header-title-block p,.header-title-block .hdate{display:none}
  /* Zone utilisateur mobile : icônes seulement, pas de séparateur */
  #userArea .logout-btn{display:none}
  #userArea{gap:6px;padding-left:0;border-left:none}
  .hright{gap:8px}
  .logout-text{display:none}
  .hdr-icon-btn{width:32px;height:32px;border-radius:10px}
  .user-avatar-btn{width:32px;height:32px;font-size:13px}

  /* ── Contenu ── */
  .hero-card{padding:18px 16px}
  .hero-amount{font-size:34px}
  .hero-stat{padding:11px 13px}
  .hero-stat .hv{font-size:17px}
  .g4,.g3,.g2,.gp{grid-template-columns:1fr}
  .card{padding:16px}
  .mc{padding:12px 14px}
  .mc .val{font-size:20px}
  .auth-card{max-width:100%;border-radius:22px}
  #auth-root{padding:12px;align-items:flex-end}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
  .tbl{min-width:520px}
  .score-ring{width:100px;height:100px}
  .score-ring svg{width:100px;height:100px}
  .score-num{font-size:24px}
  #sm2,#st,#sd{width:100%}
}

/* ── Téléphone (≤480px) ─────────────────────────────── */
@media(max-width:480px){
  .hero-amount{font-size:30px;letter-spacing:-1.5px}
  .hero-label{font-size:10px}
  .hero-sub{font-size:11px}
  .hero-row{gap:8px}
  .hero-stat{padding:10px 12px}
  .hero-stat .hl{font-size:9px}
  .hero-stat .hv{font-size:15px}
  .cw{height:180px}.cwl{height:200px}
  .card{padding:14px}
  .ct{font-size:10px}
  .mc .lbl{font-size:9.5px}
  .mc .val{font-size:18px}
  .mc .sub{font-size:10px}
  .btn{padding:8px 16px;font-size:12px}
  .btn.bp{padding:10px 18px}
  /* Invite code plus compact */
  .invite-code-value{font-size:26px;letter-spacing:4px}
  .invite-code-box{padding:16px}
  /* Member cards plus compacts */
  .member-card{padding:10px 12px;gap:10px}
  .member-avatar{width:34px;height:34px;font-size:13px}
  /* Auth */
  #auth-root{padding:8px;align-items:stretch}
  .auth-card{border-radius:22px}
  .auth-top{padding:20px 18px 14px}
  .auth-body{padding:0 18px 20px}
  .auth-title{font-size:19px}
  /* Score ring */
  .score-ring{width:90px;height:90px}
  .score-ring svg{width:90px;height:90px}
  .score-num{font-size:21px}
}

/* ── Petit téléphone (≤375px) ──────────────────────── */
@media(max-width:375px){
  .nb{padding:6px 2px 4px}
  .nb .icon,.nb .icon-sm{width:20px;height:20px}
  .nb.on span[data-i18n]{font-size:9px}
  header{padding:10px 14px}
  .hero-amount{font-size:26px}
  .hdate{display:none}
  .wrap{padding:0 10px calc(70px + env(safe-area-inset-bottom,0px))}
}

/* ── Touch targets — minimum 44×44px ──────────────── */
@media(hover:none) and (pointer:coarse){
  .btn{min-height:44px}
  .auth-tab{min-height:44px}
  select,.field input,.field select,.auth-field input{min-height:44px;font-size:16px} /* évite le zoom auto iOS */
  .icon-btn{width:38px;height:38px}
  .ir input{min-height:38px;font-size:14px}
  .tin{min-height:38px;font-size:13px}
}
/* ── Wrap : par défaut ── */
.wrap{max-width:100%;margin:0 auto;padding:0 20px 56px}

/* ---- HEADER ---- */
header{
  background:var(--header-bg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  color:var(--text);padding:11px 20px;margin-bottom:0;
  display:flex;align-items:center;gap:12px;
  border-radius:0;
  box-shadow:var(--shadow-sm);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  /* Toujours plein viewport, sort du wrap centré */
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  box-sizing:border-box;
}
header::after{content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--mint),transparent);opacity:.45}
[data-theme="light"] header::after{opacity:.25}
.header-title-block{
  flex:1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
}
.header-title-block h1{
  font-size:16px;font-weight:800;letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.1;margin:0;
}
/* Bouton déconnexion — icône seule, tooltip au survol */
.logout-btn{position:relative}
.logout-btn::after{
  content:attr(data-tooltip);
  position:absolute;bottom:calc(100% + 8px);right:0;
  background:var(--bg2);color:var(--text);
  border:1px solid var(--border2);
  font-size:11px;font-weight:600;padding:5px 10px;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .18s ease;box-shadow:var(--shadow);
}
.logout-btn:hover::after{opacity:1}
.hicon{
  width:44px;height:44px;
  background:var(--mint-bg);
  border:1px solid var(--mint-border);
  border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:20px;flex-shrink:0;
}
header h1{font-size:17px;font-weight:800;letter-spacing:-.4px;color:var(--text)}
header p{font-size:11px;color:var(--text2);margin-top:2px;font-weight:400}
.hright{
  margin-left:auto;
  display:flex;align-items:center;
  gap:16px; /* espace généreux entre les groupes d'actions */
  flex-wrap:nowrap;justify-content:flex-end;
}
/* Séparateur visuel entre le bouton thème et le groupe utilisateur */
#userArea{
  gap:10px;
  padding-left:16px;
  border-left:1px solid var(--border2);
}
.hdate{
  text-align:left;font-size:11px;color:var(--text3);
  line-height:1.45;font-weight:400;margin:0;
  white-space:nowrap;
}
.btn-theme{
  background:var(--mint-bg);border:1px solid var(--mint-border);
  color:var(--mint);padding:7px 14px;border-radius:10px;
  cursor:pointer;font-size:12px;font-weight:700;
  font-family:-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;
  transition:background .18s,color .18s,border-color .18s,transform .15s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;user-select:none;
}
.btn-theme:hover{background:var(--mint);color:#003d2a;border-color:var(--mint)}
.btn-theme:active{transform:scale(0.96)}
/* ---- HEADER ICON BUTTONS ---- */
.hdr-icon-btn{
  width:36px;height:36px;
  border:1px solid var(--border2);background:var(--surface);
  color:var(--text2);border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .15s cubic-bezier(.4,0,.2,1);
  flex-shrink:0;gap:4px;font-family:-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
.hdr-icon-btn:hover{background:var(--surface2);color:var(--text);border-color:var(--border2)}
.hdr-icon-btn:active{transform:scale(0.92)}
/* Sun/moon swap via data-theme — spécificité double pour battre .icon */
.icon.hi-sun{display:inline-flex}.icon.hi-moon{display:none}
[data-theme="light"] .icon.hi-sun{display:none}
[data-theme="light"] .icon.hi-moon{display:inline-flex}
.logout-text{display:none}

.icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:16px;height:16px}
.profile-summary{display:flex;align-items:center;gap:16px;padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--border);margin-bottom:18px;flex-wrap:wrap}
.profile-summary div{min-width:120px}
.profile-settings .field{margin-bottom:14px}
.group-card{border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:12px;cursor:pointer;transition:all .2s;background:var(--surface)}
.group-card:hover{border-color:var(--mint-border);background:var(--surface2)}
.group-card.on{background:rgba(0,196,140,0.08);border-color:var(--mint)}
.group-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
@media(max-width:720px){.profile-summary{flex-direction:column;align-items:stretch}}

/* ════════════════════════════════════════════════════════
   NAV — onglets horizontaux
   Desktop  : sticky sous le header
   Mobile   : fixed en bas de l'écran (UX native)
   ════════════════════════════════════════════════════════ */
nav{
  display:flex;align-items:stretch;
  background:var(--bg2);
  overflow:hidden;
  box-sizing:border-box;
  z-index:99;
}

/* Desktop ≥901px : sticky, pleine largeur */
@media(min-width:901px){
  nav{
    position:sticky;
    top:var(--header-h,60px);
    border-bottom:1.5px solid var(--border);
    box-shadow:0 1px 6px rgba(0,0,0,0.05);
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    width:100vw;
  }
}

/* Mobile ≤900px : fixed en bas, pleine largeur */
@media(max-width:900px){
  nav{
    position:fixed;
    bottom:0;left:0;right:0;
    top:auto;width:100%;margin:0;
    border-top:1.5px solid var(--border);
    box-shadow:0 -2px 12px rgba(0,0,0,0.08);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
}

/* Rail — NON défilant, distribute équitablement */
.atn-rail{
  display:flex;
  align-items:stretch;
  overflow:hidden;
  flex:1;
}

@media(min-width:901px){
  #nav-more-btn{display:none !important}
}

/* Bouton Mehr (visible uniquement sur mobile ≤900px) */
#nav-more-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:9px 14px 10px;
  border:none;background:none;cursor:pointer;
  border-bottom:2.5px solid transparent;border-radius:0;
  white-space:nowrap;flex-shrink:0;
  color:var(--text2);font-size:11px;font-weight:500;
  font-family:-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;
  position:relative;transition:color .18s,border-color .18s,background .18s;
}
#nav-more-btn .icon,#nav-more-btn .icon-sm{width:17px;height:17px;stroke-width:1.7;fill:currentColor !important;stroke:none !important}
#nav-more-btn.on{color:var(--mint);border-bottom-color:var(--mint);font-weight:700}
#nav-more-btn:hover:not(.on){color:var(--text);background:var(--surface)}

/* ── Bottom sheet Navigation "Plus" ── */
.nav-more-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.42);z-index:400;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transition:opacity .22s;
}
.nav-more-backdrop.open{display:block;animation:fadeIn .2s ease}
.nav-more-sheet{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--bg2);border-radius:20px 20px 0 0;
  padding:0 0 env(safe-area-inset-bottom,16px);
  z-index:401;box-shadow:0 -4px 24px rgba(0,0,0,0.14);
  transform:translateY(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav-more-sheet.open{display:block;transform:translateY(0)}
.nav-more-handle{
  width:40px;height:4px;border-radius:2px;
  background:var(--border2);margin:10px auto 4px;
}
.nav-more-title{
  font-size:11px;font-weight:600;color:var(--text3);
  letter-spacing:.06em;text-transform:uppercase;
  padding:4px 20px 8px;
}
.nav-more-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;padding:8px 16px 16px;
}
.nav-more-item{
  display:flex;flex-direction:column;align-items:center;
  gap:5px;padding:12px 8px 10px;border:none;background:none;cursor:pointer;
  border-radius:12px;color:var(--text2);font-size:11px;font-weight:500;
  font-family:-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;
  transition:background .15s,color .15s;position:relative;
}
.nav-more-item .icon,.nav-more-item .icon-sm{width:22px;height:22px;stroke-width:1.6}
.nav-more-item.on{color:var(--mint);background:var(--mint-bg)}
.nav-more-item:hover:not(.on){background:var(--surface);color:var(--text)}

/* Onglet */
.nb{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:9px 18px 10px;
  border:none;background:none;cursor:pointer;
  border-bottom:2.5px solid transparent;border-radius:0;
  white-space:nowrap;flex-shrink:0;
  color:var(--text2);font-size:11px;font-weight:500;
  font-family:-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;
  position:relative;
  transition:color .18s,border-color .18s,background .18s;
  text-decoration:none;
}
/* Sur desktop ≥901px : les onglets se répartissent équitablement */
@media(min-width:901px){ .nb{ flex:1;flex-shrink:1;min-width:0;padding:9px 8px 10px } }
.nb .icon,.nb .icon-sm{width:17px;height:17px;stroke-width:1.7;transition:transform .18s}
.nb span[data-i18n]{display:block;letter-spacing:.01em;line-height:1}
.nb.on{color:var(--mint);border-bottom-color:var(--mint);font-weight:700}
.nb.on .icon,.nb.on .icon-sm{transform:translateY(-1px)}
.nb:hover:not(.on){color:var(--text);background:var(--surface)}
[data-theme="dark"] .nb:hover:not(.on){background:rgba(255,255,255,0.05)}

/* Onglets secondaires : cachés sur mobile, visibles sur desktop */
.nb.nb-secondary{display:none !important}
@media(min-width:901px){.nb.nb-secondary{display:flex !important}}

/* Badge numérique sur onglet */
.nb-badge{
  position:absolute;top:5px;right:7px;
  min-width:15px;height:15px;border-radius:999px;
  background:var(--coral);color:#fff;
  font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  border:2px solid var(--bg2);pointer-events:none;
  animation:alertPop .3s cubic-bezier(.34,1.56,.64,1) both;
}

/* Pulse sync badge (réutilisé) */
.sync-badge{
  position:absolute;top:5px;right:5px;width:8px;height:8px;
  background:var(--amber);border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 2px var(--bg2);
  animation:syncPulse 1.8s ease-in-out infinite;
}
@keyframes syncPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* ---- PAGES ---- */
.pg{display:none}.pg.on{display:block;padding-top:8px}

/* ---- GRIDS ---- */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:24px}
.gp{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.g4{grid-template-columns:repeat(2,1fr)}.g2,.g3,.gp{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════
   NAV MOBILE — fix structurel post-base
   #nav-more-btn est enfant direct de <nav> (hors #atn-rail).
   <nav> (flex) = #atn-rail (flex:4) + #nav-more-btn (flex:1) → 5 parts égales.
   Les .nb primaires dans le rail partagent le rail (flex:1 each).
   Les styles de base .nb{flex-shrink:0} n'affectent plus Mehr.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  #atn-rail { flex: 4 4 0 !important; }
  #nav-more-btn { flex: 1 1 0 !important; min-width: 0 !important; }
  #atn-rail > .nb:not(.nb-secondary) { flex: 1 1 0 !important; min-width: 0 !important; }
}
@media(max-width:600px){
  #atn-rail > .nb:not(.nb-secondary), #nav-more-btn {
    padding: 6px 2px 8px !important;
    font-size: 10px !important;
    gap: 2px !important;
  }
}
@media(min-width:601px) and (max-width:900px){
  #atn-rail > .nb:not(.nb-secondary), #nav-more-btn {
    padding: 8px 6px 9px !important;
    font-size: 10px !important;
  }
}