/* L'app, dans la MEME direction artistique que le site : meme fond, meme typo, meme cyan.
   Ce qui change est la densite, pas le langage. */
.appwrap{max-width:1180px; margin:0 auto; padding:26px var(--gut) 90px}

.banner{display:flex; align-items:flex-start; gap:13px; border:1px solid rgba(248,113,113,.34);
  background:rgba(248,113,113,.07); padding:14px 16px; margin-bottom:24px}
.banner .b{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); flex:0 0 auto; padding-top:2px}
.banner p{font-size:14.5px; color:#d3b9b9; max-width:none; margin:0}

.appgrid{display:grid; grid-template-columns:minmax(0,1fr) 336px; gap:20px; align-items:start}
/* `padding:0` explicite : ces boites sont des <section>, et le site donne a toute section un
   padding-block allant jusqu'a 88 px. Sans ca le titre flottait au milieu de la boite. */
.box{padding:0; border:1px solid var(--line); background:rgba(10,16,32,.72);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
/* `margin:0` explicite : le h3 du site porte une marge haute de 28 px, qui poussait le titre
   au milieu de la boite au lieu de le coller en haut. */
.box>h3{margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--faint); padding:13px 16px;
  border-bottom:1px solid var(--line); font-weight:400;
  display:flex; justify-content:space-between; gap:10px}

/* `.btn` du site a ete ecrit pour des <a>, qui sont transparents par defaut. Sur un <button> le
   navigateur applique son propre fond gris clair : le bouton sortait blanc, texte invisible. */
button.btn{background:transparent; font-family:var(--mono); cursor:pointer}
button.btn.solid{background:var(--cyan)}
button.btn.solid:hover{background:#7dfff8}
.box>h3 b{color:var(--cyan); font-weight:400}
.box .body{padding:16px}

.stat{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:1px; background:var(--line)}
.stat>div{background:rgba(10,16,32,.9); padding:13px 15px}
.stat .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--faint)}
.stat .v{font-size:21px; margin-top:5px; font-weight:600; letter-spacing:-.01em}

.inv{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px}
.core{border:1px solid var(--line); background:rgba(4,7,13,.7); cursor:pointer; text-align:left;
  padding:0; font:inherit; color:inherit; transition:border-color .18s, transform .18s}
.core:hover{border-color:var(--line-c)}
.core[aria-pressed="true"]{border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan)}
.core svg{width:100%;height:auto;display:block}
.core .m{padding:8px 10px; border-top:1px solid var(--line); font-family:var(--mono); font-size:9.5px;
  color:var(--faint); line-height:1.6}
.core .m b{display:block; color:var(--dim); font-weight:400}
.core.lit .m b{color:var(--cyan)}
.core:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

.empty{font-family:var(--mono); font-size:12px; color:var(--faint); padding:28px 0; text-align:center; line-height:1.9}

.ign{border:1px solid rgba(0,240,228,.3); background:rgba(0,240,228,.05); padding:16px; margin-top:16px}
.ign h4{font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--cyan); margin-bottom:9px}
.ign p{font-size:13.5px; color:#a9bcc0; margin:0 0 12px}
.ign .warn{font-size:13px; color:#f0b8b8}
.wide{width:100%; justify-content:center}
.btn[disabled]{opacity:.4; cursor:not-allowed}
.btn[disabled]:hover{border-color:var(--line-c)}

.rows{font-family:var(--mono); font-size:12px}
.rows div{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line)}
.rows div:last-child{border-bottom:0}
.rows span{color:var(--dim)} .rows b{font-weight:500; color:var(--ink)}
.rows b.ok{color:var(--cyan)} .rows b.no{color:var(--red)}

@media (max-width:900px){
  .appgrid{grid-template-columns:minmax(0,1fr)}
  .inv{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  /* Jamais sous 16 px au doigt : la banniere et le panneau d'allumage portent du texte a lire,
     pas des etiquettes. */
  .banner p{font-size:16px}
  .ign p{font-size:16px}
  .banner{flex-direction:column; gap:8px}
}


/* ── icones et finition ─────────────────────────────────────────────────── */
.ttl,.banner .b{display:inline-flex; align-items:center; gap:8px}
.ttl svg,.banner .b svg{flex:0 0 auto; opacity:.75}
.box>h3 .ttl{color:var(--dim)}

/* La pastille de grade : la couleur dit ce que le coeur produit, avant meme de lire. */
.core .m{display:flex; align-items:center; gap:7px}
.core .m .chip{width:7px; height:7px; flex:0 0 auto}
.core .m .txt{min-width:0}
.core{position:relative; overflow:hidden}
.core::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 62%, rgba(0,240,228,.07)); opacity:0; transition:opacity .2s}
.core:hover::after{opacity:1}
.core.lit{border-color:rgba(0,240,228,.4)}
.core.lit::after{opacity:1; background:linear-gradient(180deg, transparent 55%, rgba(0,240,228,.12))}

/* Un coeur allume porte une marque permanente dans son coin : l'etat se lit sans lire. */
.core .flag{position:absolute; top:0; right:0; padding:3px 6px; background:var(--cyan); color:#04070d;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; font-weight:600}

.stat>div{position:relative}
.stat>div::before{content:''; position:absolute; left:0; top:0; width:2px; height:100%; background:transparent}
.stat>div.on::before{background:var(--cyan)}

.rows div span{display:inline-flex; align-items:center; gap:7px}
.rows div span svg{opacity:.55}

.ign h4{display:inline-flex; align-items:center; gap:8px}