/* ============================================================
   OEMA — Base, coquille applicative et navigation
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  height:100%;
}
body{
  font-family:'Switzer',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  height:100%;
  overscroll-behavior-y:none;          /* pas d'effet élastique façon page web */
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,.display{font-family:'Clash Display','Switzer',sans-serif;font-weight:700;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent;}
input,select,textarea{font-family:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
/* Taille par défaut des icônes : sans cela, un SVG sans width/height
   se déploie à 300x150. Chaque contexte affine ensuite. */
svg{width:18px;height:18px;flex:none;display:block;}
.iconbtn svg{width:20px;height:20px;}
ul,ol{list-style:none;}
[hidden]{display:none !important;}
::selection{background:rgba(244,201,40,.35);}

/* Chrome applicatif : non sélectionnable, comme dans une app native.
   Le contenu financier reste sélectionnable (cf. .selectable). */
.app-chrome,.tabbar,.topbar,.seg,.fab{user-select:none;-webkit-user-select:none;}
.selectable{user-select:text;-webkit-user-select:text;}

/* Barres de défilement discrètes */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.scroll-x::-webkit-scrollbar{height:6px;}
.scroll-x::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--pill);}

/* ---------- Coquille ---------- */
.app{
  display:grid;
  grid-template-columns:1fr;
  min-height:100%;
}
.col{min-width:0;display:flex;flex-direction:column;}

/* ---------- Barre haute ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  padding-top:var(--sat);
}
.topbar-in{
  display:flex;align-items:center;gap:12px;
  height:56px;padding:0 max(16px,var(--sal)) 0 max(16px,var(--sar));
  max-width:1180px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:9px;flex:none;}
.brand .mark{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:block;object-fit:cover;background:#fff;
}
.brand .wordmark{font-family:'Clash Display',sans-serif;font-weight:700;font-size:18px;letter-spacing:.06em;}
/* Un titre long ne doit pas repousser les boutons hors de l'écran :
   il se tronque plutôt que de passer à la ligne. */
.topbar h1{
  font-size:17px;font-weight:600;letter-spacing:-.01em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topbar .spacer{margin-left:auto;}
.iconbtn{
  width:38px;height:38px;border-radius:var(--pill);flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:background .15s,color .15s;
}
.iconbtn:hover{background:var(--card-2);color:var(--ink);}
.iconbtn.active{background:var(--info-bg);color:var(--navy);}

/* ---------- Zone de contenu ---------- */
.main{
  max-width:1180px;margin:0 auto;width:100%;
  padding:16px max(16px,var(--sar)) calc(var(--tabbar-h) + 84px) max(16px,var(--sal));
}
.view.anim{animation:viewIn .22s cubic-bezier(.2,.7,.2,1) both;}
@keyframes viewIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .view.anim{animation:none;}
  *{transition-duration:.01ms !important;}
}

/* ---------- Barre d'onglets (mobile) ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:color-mix(in srgb,var(--card) 92%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line);
  padding:0 max(6px,var(--sal)) var(--sab) max(6px,var(--sar));
  display:grid;grid-template-columns:repeat(5,1fr);
  height:var(--tabbar-h);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10.5px;font-weight:600;color:var(--muted2);
  height:60px;position:relative;transition:color .15s;
}
.tab svg{width:22px;height:22px;stroke-width:1.9;}
.tab.on{color:var(--navy);}
.tab.on svg{stroke-width:2.3;}
.tab .dot{
  position:absolute;top:6px;right:calc(50% - 18px);
  width:7px;height:7px;border-radius:50%;background:var(--red);
  border:2px solid var(--card);
}
/* Onglet central : le bouton « + » */
.tab.plus{gap:0;}
.tab.plus i{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:16px;
  background:var(--yellow);color:var(--ink);
  box-shadow:0 4px 14px rgba(244,201,40,.42);
  transition:transform .12s;
}
.tab.plus:active i{transform:scale(.92);}
.tab.plus svg{width:24px;height:24px;stroke-width:2.6;}

/* ---------- Rail latéral (desktop) ---------- */
.rail{display:none;}
@media (min-width:900px){
  .app{grid-template-columns:236px 1fr;}
  .rail{
    display:flex;flex-direction:column;gap:2px;
    position:sticky;top:0;align-self:start;height:100vh;
    background:var(--card);border-right:1px solid var(--line);
    padding:calc(14px + var(--sat)) 12px 14px;
  }
  .rail .brand{padding:6px 10px 18px;}
  .rail .rl{
    display:flex;align-items:center;gap:11px;
    padding:10px 12px;border-radius:var(--r9);
    font-size:14px;font-weight:600;color:var(--muted);
    transition:background .13s,color .13s;
  }
  .rail .rl svg{width:19px;height:19px;stroke-width:1.9;flex:none;}
  .rail .rl:hover{background:var(--card-2);color:var(--ink);}
  .rail .rl.on{background:var(--info-bg);color:var(--navy);}
  .rail .rl .badge{
    margin-left:auto;font-size:11px;font-weight:700;
    background:var(--red);color:#fff;border-radius:var(--pill);padding:1px 7px;
  }
  .rail .sep{height:1px;background:var(--line);margin:12px 12px;}
  .rail .rl.add{background:var(--yellow);color:var(--ink);margin-top:8px;justify-content:center;}
  .rail .rl.add:hover{background:var(--yellow-deep);color:var(--ink);}
  .rail .foot{margin-top:auto;padding:10px 12px;font-size:11.5px;color:var(--muted2);}
  .tabbar{display:none;}
  .main{padding-bottom:64px;padding-left:26px;padding-right:26px;}
  :root{--tabbar-h:0px;}
  /* La marque vit dans le rail : inutile de la répéter dans la barre haute. */
  .topbar .brand{display:none !important;}
  .topbar h1{margin-left:0 !important;color:var(--ink) !important;font-size:16px !important;font-weight:600 !important;}
}

/* Le bouton « + » vit dans la barre d'onglets sur mobile et dans le rail
   sur desktop : aucun bouton flottant n'est nécessaire. */
.fab{display:none;}