/* ============================================================
   LE TRAK-EUR — nova.css
   Styles spécifiques à la page Nova Shop.
   PC : en-tête compact, onglets fixés en haut, liste et détail
        côte à côte qui défilent chacun dans leur cadre.
   Mobile : onglets en bande défilante fixée en haut, liste pleine
        largeur avec boutons − / + sur chaque carte, détail en fiche
        qui monte du bas de l'écran.
   ============================================================ */

.nova-page{
  max-width:1180px; padding-top:22px; padding-bottom:14px;
  --nova:#c9a6ff; --nova-rgb:201,166,255; --cyan:#00dfff;
  --nova-top: calc(var(--header-h) + var(--subnav-h));
  --nova-tabs-h: 60px;
}

/* --- en-tête : titre + aide sur une seule ligne --- */
.nova-hero{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.nova-hero .page-title{ margin:0; font-size:1.6rem; }
.nova-hero .page-title-icon{ width:32px; height:32px; }
.nova-help{ position:relative; flex:none; }
.nova-help summary{
  cursor:pointer; list-style:none;
  padding:7px 12px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.03);
  font-family:var(--font-ui); font-weight:600; font-size:.82rem;
  color:var(--text-dim);
  transition: color .15s ease, border-color .15s ease;
}
.nova-help summary::-webkit-details-marker{ display:none; }
.nova-help summary:hover{ color:var(--text); border-color:rgba(255,255,255,.25); }
.nova-help[open] summary{ color:var(--nova); border-color:rgba(var(--nova-rgb),.5); }
.nova-help-content{
  position:absolute; right:0; top:calc(100% + 8px); z-index:40;
  width:min(460px, calc(100vw - 32px));
  padding:14px 16px;
  border:1px solid rgba(var(--nova-rgb),.35); border-radius:12px;
  background:var(--bg-1);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7);
  font-family:var(--font-ui); font-size:.88rem; line-height:1.5;
  color:var(--text-dim);
}
.nova-help-content b{ color:var(--nova); }

/* --- onglets : une seule ligne, fixés sous la barre de navigation --- */
.nova-tabs{
  position:sticky; top:var(--nova-top); z-index:20;
  display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:8px;
  padding:8px 0;
  margin-bottom:6px;
  background:var(--bg-0);
  box-shadow:0 10px 14px -12px rgba(0,0,0,.9);
}
.nova-tab{
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px;
  font-family:var(--font-ui); font-weight:700; font-size:.84rem; line-height:1.15;
  letter-spacing:.02em; text-align:left;
  color:var(--text-dim);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px 10px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nova-tab-icon{ height:20px; width:auto; flex:none; opacity:.55; transition:opacity .15s ease, filter .15s ease; }
.nova-tab:hover .nova-tab-icon{ opacity:.85; }
.nova-tab.active .nova-tab-icon{ opacity:1; filter:drop-shadow(0 0 6px rgba(0,223,255,.55)); }
.nova-tab:hover{ border-color:rgba(255,255,255,.25); color:var(--text); }
.nova-tab.active{
  color:var(--nova);
  border-color:var(--nova);
  background:rgba(var(--nova-rgb),.08);
  box-shadow:0 0 18px -6px var(--nova);
}

/* --- liste à gauche, détail à droite : chacun défile dans son cadre --- */
.nova-layout{
  display:grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap:16px;
  align-items:start;
  margin-bottom:0;
}
/* le lien « Retour » repoussait les cadres sous les onglets en bas de page : la barre de navigation suffit */
.nova-page > .back-link{ display:none; }
.nova-layout-iconic{ grid-template-columns: minmax(0,1fr); }
.nova-layout-iconic .nova-detail{ display:none; }
.nova-layout-iconic .nova-list{ display:block; }  /* pleine largeur (Emblématiques, jetons) */

.nova-list{ display:flex; flex-direction:column; gap:7px; }
.nova-list,
.nova-detail{
  /* --nova-avail : hauteur restante sous les onglets, calculée en JS -> la page ne défile pas */
  max-height:var(--nova-avail, calc(100vh - var(--nova-top) - var(--nova-tabs-h) - 90px));
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(var(--nova-rgb),.45) transparent;
}
.nova-list{ overflow-x:hidden; padding-right:6px; }
.nova-list::-webkit-scrollbar, .nova-detail::-webkit-scrollbar{ width:6px; }
.nova-list::-webkit-scrollbar-track, .nova-detail::-webkit-scrollbar-track{ background:transparent; }
.nova-list::-webkit-scrollbar-thumb, .nova-detail::-webkit-scrollbar-thumb{ background:rgba(var(--nova-rgb),.4); border-radius:6px; }
.nova-list::-webkit-scrollbar-thumb:hover, .nova-detail::-webkit-scrollbar-thumb:hover{ background:rgba(var(--nova-rgb),.7); }

/* --- carte : zone cliquable (ouvre le détail) + contrôles rapides --- */
.nova-card{
  display:flex; align-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--text);
  font-family:var(--font-ui);
  transition: border-color .15s ease, background .15s ease;
}
.nova-card:hover{ border-color:rgba(255,255,255,.22); }
.nova-card.active{
  border-color:var(--nova);
  background:rgba(var(--nova-rgb),.08);
  box-shadow:0 0 16px -8px var(--nova);
}
.nova-card.soon{ opacity:.62; }
.nova-card.soon.active{ opacity:1; }
.nova-card-main{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:10px;
  padding:9px 8px 9px 12px;
  background:none; border:0; color:inherit; font:inherit; text-align:left;
  cursor:pointer;
}
.nova-card-icon{ width:34px; height:34px; object-fit:contain; flex:none; }
.nova-card-text{ display:flex; flex-direction:column; min-width:0; flex:1; }
.nova-card-name{ font-weight:700; font-size:.93rem; line-height:1.2; }
.nova-card-sub{ font-size:.74rem; color:var(--text-dim); margin-top:2px; }
.nova-card-ctrl{ flex:none; display:flex; align-items:center; padding:0 10px 0 2px; }
.nova-quick-step{ display:flex; align-items:center; gap:4px; }
.nova-quick{
  cursor:pointer;
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  border:1px solid rgba(var(--nova-rgb),.35);
  background:rgba(var(--nova-rgb),.06);
  color:var(--nova);
  font-family:var(--font-ui); font-size:1rem; font-weight:700; line-height:1;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.nova-quick:hover{ background:rgba(var(--nova-rgb),.16); border-color:rgba(var(--nova-rgb),.7); }
.nova-quick:disabled{ opacity:.25; cursor:default; background:transparent; }
.nova-check{ width:32px; height:32px; font-size:.95rem; color:var(--text-dim); border-color:var(--line); background:transparent; }
.nova-check.on{ color:#0b0d1a; background:#8CFFA6; border-color:#8CFFA6; }
.nova-check.on:hover{ background:#b6ffc6; }
.nova-card-badge{
  flex:none; min-width:46px; text-align:center;
  font-family:var(--font-mono); font-size:.78rem;
  padding:3px 6px;
  border-radius:999px;
  border:1px solid rgba(var(--nova-rgb),.35);
  color:var(--nova);
}
.nova-card-badge.max{
  color:#8CFFA6; border-color:rgba(140,255,166,.45);
  background:rgba(140,255,166,.08);
  font-family:var(--font-ui); font-weight:700; letter-spacing:.06em;
}
.nova-card.maxed .nova-card-name{ color:#8CFFA6; }

.nova-detail{
  padding:16px 18px;
  border:1px solid rgba(var(--nova-rgb),.25);
  border-radius:12px;
  background:var(--panel);
}
.nova-close{ display:none; }
.nova-detail-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.nova-detail-icon{ width:56px; height:56px; object-fit:contain; flex:none; }
.nova-detail-name{
  margin:0;
  font-family:var(--font-display); font-size:1.15rem; letter-spacing:.04em;
  color:var(--nova);
}
.nova-detail-desc{ margin:6px 0 0; font-size:.9rem; line-height:1.45; color:var(--text-dim); }
.nova-soon{
  margin:8px 0 0; padding:16px;
  border:1px dashed rgba(var(--nova-rgb),.3);
  border-radius:10px;
  text-align:center;
  font-size:.9rem; color:var(--text-dim);
}

.nova-detail-stats{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:8px;
  margin-bottom:12px;
}
.nova-pill{
  display:flex; flex-direction:column; gap:3px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}
.nova-pill span{ font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.nova-pill b{ font-family:var(--font-mono); font-weight:400; font-size:1rem; color:var(--text); }
.nova-pill b em{ font-style:normal; font-family:var(--font-ui); font-size:.82rem; color:var(--text-dim); }
.nova-pill.hl{ border-color:rgba(var(--nova-rgb),.45); background:rgba(var(--nova-rgb),.08); }
.nova-pill.hl b{ color:var(--nova); }
.nova-pill.max{ border-color:rgba(140,255,166,.45); background:rgba(140,255,166,.07); }
.nova-pill.max b{ color:#8CFFA6; font-family:var(--font-ui); font-weight:700; letter-spacing:.06em; }
.nova-reset{
  margin-left:auto; align-self:center;
  cursor:pointer;
  font-family:var(--font-ui); font-weight:700; font-size:.78rem;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(255,138,138,.34);
  background:transparent;
  color:#ff8a8a;
}
.nova-reset:hover{ background:rgba(255,138,138,.09); border-color:rgba(255,138,138,.65); }
.nova-reset:disabled{ opacity:.35; cursor:default; background:transparent; }

/* --- niveaux infinis : niveau saisi + calcul d'objectif --- */
.nova-pill-level .nova-stepper{ margin-top:2px; }
.nova-pill-level .nova-step{ width:30px; height:30px; font-size:1.05rem; }
.nova-pill-level .nova-step-input{ width:72px; height:30px; }
.nova-calc{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin-bottom:12px;
  padding:10px 12px;
  border:1px dashed rgba(var(--nova-rgb),.35);
  border-radius:10px;
  background:rgba(var(--nova-rgb),.04);
  font-size:.86rem; color:var(--text-dim);
}
.nova-calc label{ font-weight:700; }
.nova-calc .nova-step-input{ width:80px; height:32px; }
.nova-calc-res{ font-family:var(--font-mono); font-size:1rem; color:var(--nova); }
.nova-calc-res em{ font-style:normal; font-family:var(--font-ui); font-size:.82rem; color:var(--text-dim); margin-left:4px; }
.nova-detail-desc b{ color:var(--nova); font-family:var(--font-mono); font-weight:400; }
.nova-row-inf.next{ background:rgba(var(--nova-rgb),.07); box-shadow: inset 3px 0 0 var(--nova); }
.nova-row-inf.next .c-lvl{ color:var(--nova); }

/* --- tableau des niveaux --- */
.nova-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.nova-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.nova-table th{
  text-align:left;
  padding:10px 12px;
  font-family:var(--font-ui); font-weight:700; font-size:.74rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim);
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--line);
}
.nova-table td{ padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.05); }
.nova-table tr:last-child td{ border-bottom:0; }
.nova-row{ cursor:pointer; transition: background .12s ease; }
.nova-row:hover{ background:rgba(var(--nova-rgb),.06); }
.nova-row:focus-visible{ outline:1px solid var(--nova); outline-offset:-1px; }
.c-lvl{ font-weight:700; white-space:nowrap; }
.c-cost, .c-need{ font-family:var(--font-mono); white-space:nowrap; }
.c-cost{ color:var(--nova); }
.c-need{ color:var(--text); }
.nova-bought{ font-family:var(--font-ui); font-weight:700; font-size:.82rem; color:#8CFFA6; }
.nova-row.next{ background:rgba(var(--nova-rgb),.07); box-shadow: inset 3px 0 0 var(--nova); }
.nova-row.next .c-lvl{ color:var(--nova); }
.c-boost{ color:var(--text); }
.nova-row.done{ background:rgba(140,255,166,.05); }
.nova-row.done .c-lvl{ color:#8CFFA6; }
.nova-row.current{ box-shadow: inset 3px 0 0 #8CFFA6; }
.nova-row-hint{ margin:8px 0 0; font-size:.76rem; color:var(--text-dim); opacity:.8; }

.nova-empty{ margin:0; padding:18px; color:var(--text-dim); text-align:center; }

/* --- Emblématiques --- */
.nova-iconic-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px;
  margin-bottom:12px;
}
.nova-iconic-note{ margin:0; font-size:.85rem; color:var(--text-dim); flex:1 1 320px; }
.nova-iconic-left{ font-size:.88rem; color:var(--text-dim); }
.nova-iconic-left b{ color:var(--nova); font-family:var(--font-mono); font-weight:400; }
.nova-iconic-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
}
.nova-iconic{
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:12px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
  font-family:var(--font-ui);
  transition: border-color .15s ease, transform .15s ease;
}
.nova-iconic:hover{ transform:translateY(-2px); border-color:rgba(255,216,114,.45); }
.nova-iconic-img{ width:100%; max-width:110px; aspect-ratio:1; object-fit:contain; opacity:.55; filter:grayscale(.6); transition:opacity .15s, filter .15s; }
.nova-iconic-name{ font-weight:700; font-size:.92rem; color:var(--tier-iconic); }
.nova-iconic-cost{ font-size:.85rem; font-weight:700; color:var(--nova); font-family:var(--font-mono); }
.nova-iconic-state{ font-size:.72rem; color:var(--text-dim); }
.nova-iconic.owned{ border-color:rgba(255,216,114,.5); box-shadow:0 0 18px -8px var(--tier-iconic); }
.nova-iconic.owned .nova-iconic-img{ opacity:1; filter:none; }
.nova-iconic.owned .nova-iconic-state{ color:#8CFFA6; }

/* --- Jetons de salon (quantité illimitée) --- */
.nova-token-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:12px;
}
.nova-token{
  display:flex; flex-direction:column; gap:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nova-token.has{ border-color:rgba(0,255,189,.38); box-shadow:0 0 18px -10px #00ffbd; }
.nova-token-top{ display:flex; align-items:center; gap:12px; }
.nova-token-icon{ width:54px; height:54px; object-fit:contain; flex:none; }
.nova-token-head{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.nova-token-name{ margin:0; font-family:var(--font-ui); font-size:1rem; font-weight:700; line-height:1.2; color:var(--text); }
.nova-token-price{ font-size:.82rem; color:var(--text-dim); }
.nova-token-price .nova-amount{ font-family:var(--font-mono); color:var(--nova); }
.nova-token-desc{ margin:0; flex:1; font-size:.85rem; line-height:1.45; color:var(--text-dim); }
.nova-token-count{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:10px; border-top:1px solid var(--line);
}
.nova-token-label{ font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.nova-stepper{ display:flex; align-items:center; gap:6px; }
.nova-step{
  cursor:pointer;
  width:34px; height:34px;
  border-radius:9px;
  border:1px solid rgba(0,255,189,.35);
  background:rgba(0,255,189,.06);
  color:#00ffbd;
  font-size:1.2rem; font-weight:700; line-height:1;
  transition: background .12s ease, border-color .12s ease;
}
.nova-step:hover{ background:rgba(0,255,189,.14); border-color:rgba(0,255,189,.65); }
.nova-step:disabled{ opacity:.3; cursor:default; background:transparent; }
.nova-step-input{
  width:62px; height:34px;
  text-align:center;
  font-family:var(--font-mono); font-size:1.05rem;
  color:var(--text);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:9px;
  -moz-appearance:textfield; appearance:textfield;
}
.nova-step-input::-webkit-outer-spin-button,
.nova-step-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.nova-step-input:focus{ outline:none; border-color:#00ffbd; }
.nova-token.has .nova-step-input{ color:#00ffbd; border-color:rgba(0,255,189,.4); }

/* --- tablette / mobile --- */
@media (max-width:760px){
  .nova-page{ padding-top:14px; --nova-tabs-h: 54px; }
  .nova-hero .page-title{ font-size:1.3rem; gap:10px; }
  .nova-hero .page-title-icon{ width:26px; height:26px; }

  /* onglets : bande horizontale qui défile, toujours visible */
  .nova-tabs{
    display:flex; gap:6px;
    overflow-x:auto; scrollbar-width:none;
    margin:0 -24px 6px; padding:7px 24px;
    scroll-padding-inline:24px;
  }
  .nova-tabs::-webkit-scrollbar{ display:none; }
  .nova-tab{ flex:none; min-height:38px; padding:6px 12px; font-size:.8rem; white-space:nowrap; gap:6px; }
  .nova-tab-icon{ height:17px; }

  /* liste pleine largeur dans le flux de la page */
  .nova-layout{ grid-template-columns: minmax(0,1fr); }
  .nova-list{ max-height:none; overflow:visible; padding-right:0; }
  .nova-card-main{ padding:10px 6px 10px 10px; gap:9px; }
  .nova-card-icon{ width:30px; height:30px; }
  .nova-card-name{ font-size:.9rem; }
  .nova-card-sub{ font-size:.72rem; }
  .nova-card-ctrl{ padding-right:8px; }
  .nova-quick{ width:34px; height:34px; font-size:1.1rem; }
  .nova-check{ width:36px; height:36px; }
  .nova-card-badge{ min-width:44px; font-size:.74rem; }

  /* détail : fiche qui monte du bas de l'écran */
  .nova-detail{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:70;
    max-height:calc(100vh - var(--nova-top) - 8px); max-height:calc(100dvh - var(--nova-top) - 8px);
    border-radius:18px 18px 0 0;
    border-bottom:0;
    padding:10px 14px calc(18px + env(safe-area-inset-bottom));
    background:var(--bg-1);
    box-shadow:0 -20px 50px -10px rgba(0,0,0,.8);
    transform:translateY(105%);
    visibility:hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .nova-detail::before{
    content:''; display:block;
    width:42px; height:4px; margin:0 auto 10px;
    border-radius:4px; background:rgba(255,255,255,.18);
  }
  body.nova-sheet-open .nova-detail{ transform:none; visibility:visible; transition: transform .25s ease; }
  body.nova-sheet-open{ overflow:hidden; }
  .nova-sheet-backdrop{
    position:fixed; inset:0; z-index:65;
    background:rgba(3,4,10,.62);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  body.nova-sheet-open .nova-sheet-backdrop{ opacity:1; pointer-events:auto; }
  .nova-close{
    display:flex; align-items:center; justify-content:center;
    position:sticky; top:0; float:right; z-index:2;
    width:34px; height:34px; margin:-4px -2px 4px 10px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--bg-2);
    color:var(--text); font-size:1rem; cursor:pointer;
  }
  .nova-detail-icon{ width:44px; height:44px; }
  .nova-detail-name{ font-size:1rem; }
}
@media (max-width:520px){
  .nova-help summary{ padding:6px 10px; font-size:.76rem; }
  .nova-pill{ padding:7px 9px; flex:1 1 40%; }
  .nova-pill b{ font-size:.9rem; }
  .nova-table{ font-size:.82rem; }
  .nova-table th, .nova-table td{ padding:8px 7px; }
  .nova-reset{ margin-left:0; }
  .nova-table .nova-ico{ height:1.2em; }
  .nova-iconic-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; }
  .nova-token-grid{ grid-template-columns: minmax(0,1fr); gap:10px; }
  .nova-token{ padding:12px; }
  .nova-token-icon{ width:46px; height:46px; }
  .nova-iconic{ padding:8px 6px; }
  .nova-iconic-name{ font-size:.78rem; text-align:center; }
  .nova-iconic-cost{ font-size:.7rem; }
  .nova-iconic-state{ font-size:.62rem; }
}