/*  Le look vient du jeu, pas d'un modele de page.

    MM2 affiche ses items sur des plaques de couleur : le rose pour les
    Godly, le mauve pour les Ancient, le cyan pour les Unique, l'or pour
    les Vintage. C'est ce que les joueurs reconnaissent au premier coup
    d'oeil. Le site est bati la-dessus : fond presque noir avec un fond
    mauve, panneaux a bords durs comme la fenetre de trade, boutons epais
    comme ACCEPT et DECLINE, et le bleu du logo partout ou il faut regarder.
*/
:root{
  --ink:#08060E;
  --ink2:#0C0916;
  --panel:#141021;
  --sunk:#0A0813;
  --line:#2B2340;
  --line2:#3A2F55;
  --text:#F4F1FA;
  --soft:#B6ADCB;
  --muted:#7D7496;

  /*  Le bleu vient du logo, pas d'une palette.

      Mesure sur img/wordmark.webp : 41 721 pixels a #0078F0 et 15 484 a
      #006CF0. C'est ce bleu-la, pas un bleu voisin. --ice est sa version
      claire, pour les lueurs et les mots qu'on veut faire ressortir.

      Les couleurs de rarete restent definies : elles ne sont pas une
      decoration, elles sont ce que le jeu ecrit sous chaque item. Elles ne
      servent plus que la ou elles veulent dire quelque chose, c'est-a-dire
      les plaques Godly / Ancient / Unique / Vintage / Chroma. */
  --brand:#0A7AF5;
  --brand-lit:#3F9BFF;
  --brand-deep:#064A9E;
  --ice:#7DD3FC;

  --godly:#FF3BB4;
  --ancient:#8B5CF6;
  --unique:#22D3EE;
  --vintage:#FBBF24;
  --good:#3DF07A;
  --bad:#FF4D55;

  --display:'Archivo Black', system-ui, sans-serif;
  --body:'Archivo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.5;
  overflow-x:hidden;
}
/*  La lueur mauve derriere tout, comme la map derriere la fenetre de trade. */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 600px at 15% -5%, rgba(10,122,245,.14), transparent 70%),
    radial-gradient(800px 600px at 95% 10%, rgba(125,211,252,.09), transparent 70%);
}
main, header, footer{ position:relative; z-index:1 }
img{ max-width:100%; height:auto; display:block }
h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; letter-spacing:-.015em }
h1{ font-size:clamp(2.6rem, 8.5vw, 5rem); line-height:.95; text-transform:uppercase }
h2{ font-size:clamp(1.9rem, 5.4vw, 3.1rem); line-height:1 ; text-transform:uppercase }
h3{ font-family:var(--body); font-weight:700; font-size:1.0625rem; line-height:1.25 }
p{ margin:0 }
a{ color:inherit }
em{ font-style:normal; color:var(--ice) }

.wrap{ width:min(1180px, 100% - 32px); margin-inline:auto }
section{ padding-block:clamp(54px, 8vw, 96px) }
section.tinted{ background:var(--ink2); border-block:1px solid var(--line) }

/* ---------- la barre du haut ---------- */
.bar{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:30;
  background:rgba(8,6,14,.92); backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line);
}
.bar .wrap{ display:flex; align-items:center; gap:10px; padding-block:11px }
.brandmark{ display:flex; align-items:center; gap:9px; text-decoration:none; margin-right:auto }
.brandmark img{ width:26px; height:26px }
.brandmark span{ font-family:var(--display); font-size:1.0625rem; letter-spacing:-.01em }
.brandmark b{ color:var(--brand-lit) }

/* ---------- les boutons, epais comme ceux du jeu ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-size:.875rem; text-transform:uppercase;
  letter-spacing:.02em; text-decoration:none; padding:11px 17px;
  border-radius:7px; border:2px solid transparent; white-space:nowrap;
  transition:transform .06s, filter .12s;
}
.btn:active{ transform:translateY(2px) }
.btn-primary{ background:var(--brand); color:#02101F; box-shadow:0 4px 0 var(--brand-deep) }
.btn-primary:active{ box-shadow:0 2px 0 var(--brand-deep) }
.btn-primary:hover{ filter:brightness(1.08) }
.btn-ghost{ background:#1B1529; color:var(--text); border-color:var(--line2); box-shadow:0 4px 0 #120E1D }
.btn-ghost:active{ box-shadow:0 2px 0 #120E1D }
.btn-ghost:hover{ border-color:var(--brand-lit) }
.btn-lg{ font-size:1rem; padding:15px 24px }
.bar .btn-ghost{ display:none }
@media (min-width:620px){ .bar .btn-ghost{ display:inline-flex } }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--brand-lit); outline-offset:3px; border-radius:6px;
}

/* ---------- l'etiquette de section, une plaque de rarete ---------- */
.lab{
  display:inline-block; font-family:var(--display); font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.12em; padding:5px 11px;
  border-radius:5px; color:#02101F; background:var(--brand); margin-bottom:14px;
  /*  Dans une colonne flex, un inline-block s'etire sur toute la largeur :
      la plaque « Murder Mystery 2 » traversait l'ecran du telephone. */
  align-self:flex-start; width:fit-content;
}
/*  Trois tons du MEME bleu, pas trois couleurs differentes : les sections
    se distinguent sans que la page parte dans tous les sens. */
.lab.a{ background:var(--brand-deep); color:#DCEBFF }
.lab.u{ background:var(--ice); color:#02101F }
.lab.v{ background:var(--brand-lit); color:#02101F }
.head{ margin-bottom:clamp(24px, 3.5vw, 38px) }
.head h2{ max-width:16em }
.head p{ color:var(--soft); font-size:1.0625rem; margin-top:12px; max-width:56ch }

/* ---------- le hero ---------- */
.hero{ padding-block:clamp(34px, 5vw, 64px) 0 }
.hero .wrap{ display:grid; gap:28px; align-items:center }
.hero-copy{ display:flex; flex-direction:column; gap:18px; min-width:0 }
.hero h1 span{ color:var(--ice); text-shadow:0 0 38px rgba(125,211,252,.42) }
.lede{ font-size:clamp(1.0625rem, 2.2vw, 1.25rem); color:var(--soft); max-width:34ch }
.cta-row{ display:flex; flex-wrap:wrap; gap:11px }
.meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted); font-size:.875rem }
.meta b{ color:var(--good) }
.meta span{ color:var(--line2) }
@media (min-width:980px){
  .hero .wrap{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px }
}

/* ---------- les captures, encadrees comme la fenetre du jeu ---------- */
.shot{ margin:0; border:2px solid var(--line); border-radius:10px; background:var(--sunk); overflow:hidden }
.shot img{ width:100% }
.shot figcaption{
  padding:11px 14px; font-size:.8125rem; color:var(--muted);
  border-top:2px solid var(--line); background:var(--panel);
}

/* ---------- les panneaux ---------- */
.cards{ display:grid; gap:14px }
@media (min-width:860px){ .cards.three{ grid-template-columns:repeat(3,1fr) } }
.card{
  background:var(--panel); border:2px solid var(--line); border-radius:10px;
  padding:16px; display:flex; flex-direction:column; gap:10px; min-width:0;
  border-top-color:var(--brand);
}
.card .proof{
  background:var(--sunk); border:1px solid var(--line); border-radius:7px;
  padding:11px; display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
}
.card .proof img{ max-height:190px; width:auto }
.card .proof.chips img{ max-height:54px }
.card p{ color:var(--soft); font-size:.9375rem }
@media (min-width:860px){
  .card.wide{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px; align-items:center }
  .card.wide .proof{ grid-row:1 / span 3 }
  .card.wide .proof img{ max-height:230px }
}
.tag{
  font-family:var(--display); font-size:.6875rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--brand-lit);
}
.card.wide .tag{ align-self:end }

/*  Les plaques de rarete, copiees du jeu. */
.plates{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center }
.plate{
  font-family:var(--display); font-size:.75rem; padding:5px 11px; border-radius:5px;
  color:#0B0611; text-transform:uppercase; letter-spacing:.04em;
}
.p-godly{ background:var(--godly) } .p-ancient{ background:var(--ancient) }
.p-unique{ background:var(--unique); color:#04171B } .p-vintage{ background:var(--vintage); color:#1A1203 }
.p-chroma{ background:linear-gradient(90deg,#FF3BB4,#FBBF24,#3DF07A,#22D3EE,#8B5CF6); color:#0B0611 }

/* ---------- comment demarrer ---------- */
.plain{ color:var(--soft); font-size:1.0625rem; max-width:62ch }
.safe{
  margin-top:18px; padding:15px 17px; border:2px solid var(--line);
  border-left:5px solid var(--good); border-radius:9px;
  background:var(--panel); color:var(--soft); font-size:.9375rem;
}

/* ---------- qui fait ca ---------- */
.maker{ border-block:1px solid var(--line) }
.maker .box{
  border:2px solid var(--line); border-top-color:var(--brand);
  border-radius:12px; background:var(--panel); padding:clamp(20px,3.5vw,32px);
  display:flex; flex-direction:column; gap:14px; max-width:70ch;
}
.maker p{ color:var(--soft); font-size:1.0625rem }
.maker p strong{ color:var(--text) }

/* ---------- avis ---------- */
.rv-top[hidden]{ display:none }
.rv-top{ display:flex; align-items:center; gap:11px; margin-bottom:16px; flex-wrap:wrap }
.rv-score{ font-family:var(--display); font-size:2rem; line-height:1 }
.rv-stars{ color:var(--vintage); font-size:1.125rem; letter-spacing:.1em }
.rv-count{ color:var(--muted); font-size:.875rem }
.rv-belt{ overflow:hidden; margin-bottom:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.rv-run{ display:flex; width:max-content; gap:13px; animation:belt 46s linear infinite }
.rv-belt:hover .rv-run{ animation-play-state:paused }
@keyframes belt{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .rv-run{ animation:none } }
.rv-card{
  flex:none; width:290px; background:var(--panel); border:2px solid var(--line);
  border-top-color:var(--ice); border-radius:10px; padding:14px;
  display:flex; flex-direction:column; gap:8px;
}
.rv-card .who{ display:flex; align-items:center; gap:9px; flex-wrap:wrap }
.rv-card .nm{ font-weight:700; font-size:.9375rem }
.rv-card .st{ color:var(--vintage); font-size:.8125rem; letter-spacing:.08em }
.rv-card .tx{ color:var(--soft); font-size:.9375rem }
.rv-card img{ border-radius:7px; border:1px solid var(--line); max-height:160px; object-fit:cover; width:100% }

.rv-form{
  border:2px solid var(--line); border-radius:12px; background:var(--panel);
  padding:clamp(16px,3vw,24px); display:flex; flex-direction:column; gap:12px; max-width:720px;
}
.rv-form h3{ font-family:var(--display); font-size:1.125rem; text-transform:uppercase }
.rv-line{ display:flex; gap:11px; flex-wrap:wrap; align-items:center }
.rv-pick{ display:flex; gap:3px }
.rv-pick button{
  background:none; border:0; cursor:pointer; font-size:1.5rem; line-height:1;
  color:#3A3252; padding:0 2px;
}
.rv-pick button.on{ color:var(--vintage) }
.rv-name, .rv-form textarea{
  background:var(--sunk); border:2px solid var(--line); border-radius:8px;
  color:var(--text); font:inherit; padding:11px 13px; min-width:0;
}
.rv-name{ flex:1 1 200px }
.rv-form textarea{ min-height:92px; resize:vertical; width:100% }
.rv-name:focus, .rv-form textarea:focus{ outline:none; border-color:var(--brand-lit) }
.rv-file{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:var(--soft);
  font-size:.875rem; border:2px dashed var(--line2); border-radius:8px; padding:10px 13px;
}
.rv-file input{ display:none }
.rv-say{ font-size:.875rem; color:var(--soft); min-height:1.2em }
.rv-say.good{ color:var(--good) } .rv-say.bad{ color:var(--bad) }
.rv-note{ font-size:.8125rem; color:var(--muted) }

/* ---------- d'ou viennent les prix ---------- */
.sources{ display:grid; gap:13px }
@media (min-width:700px){ .sources{ grid-template-columns:1fr 1fr } }
.source{
  display:flex; flex-direction:column; gap:9px; text-decoration:none;
  background:var(--panel); border:2px solid var(--line); border-radius:10px; padding:17px;
}
.source:hover{ border-color:var(--brand-lit) }
.source .logo img{ max-height:30px; width:auto }
.source .nm{ font-family:var(--display); font-size:1.125rem }
.source .u{ color:var(--muted); font-size:.875rem }

/* ---------- questions ---------- */
.faq{ display:grid; gap:9px; max-width:860px }
.faq details{ background:var(--panel); border:2px solid var(--line); border-radius:10px }
.faq summary{
  cursor:pointer; padding:15px 17px; font-weight:700; list-style:none;
  display:flex; justify-content:space-between; gap:14px; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; color:var(--brand-lit); font-family:var(--display); font-size:1.25rem }
.faq details[open] summary::after{ content:'\2212' }
.faq details[open] summary{ border-bottom:2px solid var(--line) }
.faq p{ padding:15px 17px; color:var(--soft); font-size:.9375rem }

/* ---------- la fin ---------- */
.close{ text-align:center; background:var(--ink2); border-top:1px solid var(--line) }
.close h2{ max-width:18ch; margin-inline:auto }
.close .cta-row{ justify-content:center; margin-top:22px }
.close .meta{ justify-content:center; margin-top:14px }

footer{ border-top:2px solid var(--line); padding-block:26px; background:var(--ink) }
footer .wrap{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; font-size:.875rem; color:var(--muted) }
footer a{ color:var(--soft); text-decoration:none }
footer a:hover{ color:var(--brand-lit) }
footer .sep{ margin-left:auto; font-size:.8125rem }

/* ===================================================================
   AJOUTS DU 11 OCTOBRE : la barre de navigation, les vrais items du
   jeu, les fleches sur les captures, le calculateur, la liste de
   valeurs et la page de telechargement.

   Rien au-dessus de cette ligne n'a change : meme polices, memes
   couleurs, memes encadres. Ce qui suit reutilise les memes variables.
   =================================================================== */

/* ---------- la navigation ---------- */
.nav{ display:none; gap:3px; margin-right:10px }
.nav a{
  text-decoration:none; color:var(--soft); font-size:.9375rem; font-weight:600;
  padding:8px 12px; border-radius:7px; white-space:nowrap;
}
.nav a:hover{ color:var(--text); background:#1B1529 }
.nav a[aria-current="page"]{ color:var(--brand-lit); background:#141021 }
@media (min-width:860px){ .nav{ display:flex } }

/*  Sur telephone la navigation passe sous la barre, en une rangee qui
    defile. Un menu burger cache les pages; une rangee les montre. */
.navmob{
  display:flex; gap:7px; overflow-x:auto; padding:9px 16px;
  border-bottom:2px solid var(--line); background:var(--ink2);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
/*  PAS collante. La barre du haut l'est deja, et deux elements colles a
    top:0 se superposent des qu'on fait defiler -- sur telephone la
    rangee de pages passait par-dessus le logo. Les pages restent
    accessibles par le pied de page et par les boutons. */
.navmob::-webkit-scrollbar{ display:none }
.navmob a{
  text-decoration:none; flex:none; font-size:.8125rem; font-weight:700;
  padding:7px 13px; border-radius:999px; border:2px solid var(--line);
  background:var(--panel); color:var(--soft);
}
.navmob a[aria-current="page"]{ border-color:var(--brand); color:var(--text) }
@media (min-width:860px){ .navmob{ display:none } }

/* ---------- les vrais items du jeu ---------- */
/*  Une seule image pour les 271 items, decoupee en CSS. Une page qui en
    montre cent ne fait quand meme qu'une seule requete. */
/*  Le placement est en POURCENTAGE, pas en pixels : la meme regle sert
    pour une vignette de 34px dans la recherche et pour une case de trade
    qui s'etire avec l'ecran. 16 colonnes, 17 rangees. */
.ico{
  --s:48px; --cx:0; --cy:0;
  width:var(--s); height:var(--s); flex:none;
  background-image:url(/img/items.webp); background-repeat:no-repeat;
  background-size:1600% 1700%;
  background-position:calc(var(--cx) * 100% / 15) calc(var(--cy) * 100% / 16);
}
/*  Dans une case de trade, l'image prend toute la place sauf le bandeau
    du nom en bas. */
.ico.fill{ position:absolute; inset:7px 7px 40px 7px; width:auto; height:auto }
/*  Pas d'image pour cet item : un carre sobre plutot qu'un trou. */
.ico.none{ background-image:none; background-color:var(--sunk);
  border:1px dashed var(--line2); border-radius:6px }

/* ---------- les plaques, toutes les familles ---------- */
.p-legendary{ background:#F97316; color:#1A0B02 }
.p-rare{ background:#3B82F6; color:#02101F }
.p-uncommon{ background:#22C55E; color:#021A09 }
.p-common{ background:#64748B; color:#F4F1FA }
.p-pet{ background:#E879F9; color:#1A0420 }
.p-misc{ background:#475569; color:#F4F1FA }

/* ---------- les fleches sur une capture ---------- */
/*  Demande de Philippe : « des petits fleches cool qui pointent et
    donnent de l'information, ca va etre beaucoup moins overwhelming ».

    Comment c'est fait, et pourquoi comme ca : les pastilles numerotees
    sont posees en POURCENTAGE sur l'image, donc elles restent au bon
    endroit quand l'image retrecit. Le texte, lui, ne flotte PAS par
    dessus : il est dans une colonne a cote, chaque ligne reliee a sa
    pastille par un trait de la meme couleur.

    Des bulles flottantes auraient l'air plus malin sur une maquette et
    se marcheraient dessus sur le premier telephone venu. Une colonne ne
    casse jamais, et on lit la meme chose. */
.annobox{ display:grid; gap:18px; align-items:start }
@media (min-width:880px){ .annobox{ grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);
  gap:26px; align-items:center } }

.anno{ position:relative; display:block; margin:0 }
.anno img{ width:100%; border:2px solid var(--line); border-radius:10px; background:var(--sunk); display:block }
.anno .pin{
  position:absolute; translate:-50% -50%; z-index:2;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-size:.8125rem; color:#02101F;
  background:var(--brand); border:2px solid #E3F1FF;
  box-shadow:0 0 0 4px rgba(10,122,245,.26), 0 2px 10px rgba(0,0,0,.6);
}
.anno .pin.b{ background:var(--ice); box-shadow:0 0 0 4px rgba(125,211,252,.26), 0 2px 10px rgba(0,0,0,.6) }
.anno .pin.g{ background:var(--good); box-shadow:0 0 0 4px rgba(61,240,122,.24), 0 2px 10px rgba(0,0,0,.6) }
.anno .pin.v{ background:var(--vintage); box-shadow:0 0 0 4px rgba(251,191,36,.24), 0 2px 10px rgba(0,0,0,.6) }

.anno-list{ display:grid; gap:11px; margin:0; padding:0; list-style:none }
.anno-list li{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  background:var(--panel); border:2px solid var(--line); border-radius:10px; padding:12px 14px;
}
.anno-list li.b{ border-left:4px solid var(--ice) }
.anno-list li.g{ border-left:4px solid var(--good) }
.anno-list li.v{ border-left:4px solid var(--vintage) }
.anno-list li:not(.b):not(.g):not(.v){ border-left:4px solid var(--brand) }
.anno-list .n{
  flex:none; width:25px; height:25px; border-radius:50%; background:var(--brand);
  color:#02101F; display:grid; place-items:center; font-family:var(--display); font-size:.75rem;
}
.anno-list li.b .n{ background:var(--ice) }
.anno-list li.g .n{ background:var(--good) }
.anno-list li.v .n{ background:var(--vintage) }
.anno-list .tx{ min-width:0; color:var(--soft); font-size:.9375rem; line-height:1.4 }
.anno-list .tx b{ display:block; color:var(--text); font-size:1rem; margin-bottom:2px }

/* ---------- le calculateur ---------- */
.calc{ display:grid; gap:14px }
@media (min-width:900px){ .calc{ grid-template-columns:1fr 1fr } }
.side{
  background:var(--panel); border:2px solid var(--line); border-radius:12px;
  padding:15px; display:flex; flex-direction:column; gap:12px; min-width:0;
}
.side.mine{ border-top-color:var(--brand) }
.side.theirs{ border-top-color:var(--godly) }
.side > h3{
  font-family:var(--display); font-size:1.125rem; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.side > h3 .tot{ margin-left:auto; font-family:var(--body); font-weight:700; font-size:1.0625rem }
.slots{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px }
.slot{
  position:relative; aspect-ratio:1; border:2px solid var(--line); border-radius:9px;
  background:var(--sunk); display:grid; place-items:center; padding:5px; min-width:0;
}
.slot.add{ border-style:dashed; cursor:pointer; color:var(--muted) }
.slot.add:hover{ border-color:var(--brand-lit); color:var(--brand-lit) }
.slot.add span{ font-size:1.75rem; line-height:1 }
.slot .x{
  position:absolute; top:3px; right:3px; z-index:2; width:21px; height:21px; border-radius:6px;
  border:0; background:rgba(11,8,19,.86); color:var(--soft); cursor:pointer;
  font:700 .8125rem/1 var(--body); display:grid; place-items:center;
}
.slot .x:hover{ background:var(--bad); color:#fff }
.slot .qty{
  position:absolute; top:3px; left:3px; z-index:2; font-family:var(--display);
  font-size:.6875rem; color:var(--vintage); background:rgba(11,8,19,.86);
  padding:2px 5px; border-radius:5px;
}
.slot .nm{
  position:absolute; left:3px; right:3px; bottom:3px; z-index:2; text-align:center;
  font-size:.625rem; font-weight:700; padding:3px 2px; border-radius:5px;
  color:#0B0611; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.slot .vl{
  position:absolute; left:3px; right:3px; bottom:22px; z-index:2; text-align:center;
  font-size:.6875rem; font-family:var(--display); color:var(--text);
  background:rgba(11,8,19,.82); border-radius:5px; padding:1px 0;
}

/* la recherche d'item */
.pick{ position:relative }
.pick input{
  width:100%; background:var(--sunk); border:2px solid var(--line); border-radius:9px;
  color:var(--text); font:inherit; padding:11px 13px;
}
.pick input:focus{ outline:none; border-color:var(--brand-lit) }
.pick .list{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 5px);
  max-height:310px; overflow:auto; background:var(--ink2);
  border:2px solid var(--line2); border-radius:10px; box-shadow:0 16px 40px rgba(0,0,0,.65);
}
.pick .list:empty{ display:none }
.pick .row{
  display:flex; align-items:center; gap:11px; padding:8px 11px; cursor:pointer;
  border-bottom:1px solid var(--line); min-width:0;
}
.pick .row:last-child{ border-bottom:0 }
.pick .row:hover, .pick .row.on{ background:#1B1529 }
.pick .row .t{ min-width:0; flex:1 }
.pick .row .t b{ display:block; font-size:.9375rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pick .row .t span{ font-size:.75rem; color:var(--muted) }
.pick .row .v{ font-family:var(--display); font-size:.9375rem; color:var(--ice) }

/* le verdict */
.verdict{
  background:var(--panel); border:2px solid var(--line); border-radius:12px;
  overflow:hidden; margin-top:16px;
}
.verdict .top{ padding:17px 19px; display:flex; align-items:center; gap:15px; flex-wrap:wrap }
.verdict .call{ font-family:var(--display); font-size:clamp(1.6rem,5vw,2.4rem); line-height:1 }
.verdict.good{ border-top-color:var(--good) } .verdict.good .call{ color:var(--good) }
.verdict.bad{ border-top-color:var(--bad) } .verdict.bad .call{ color:var(--bad) }
.verdict.even .call{ color:var(--text) }
.verdict .gap{ margin-left:auto; text-align:right }
.verdict .gap b{ font-family:var(--display); font-size:1.25rem; display:block }
.verdict .gap span{ font-size:.8125rem; color:var(--muted) }
.vrows{ border-top:2px solid var(--line) }
.vrow{
  display:grid; grid-template-columns:minmax(74px,auto) 1fr; gap:10px 14px;
  padding:11px 19px; border-bottom:1px solid var(--line); align-items:baseline;
}
.vrow:last-child{ border-bottom:0 }
.vrow .k{ font-family:var(--display); font-size:.75rem; letter-spacing:.08em; color:var(--brand-lit) }
.vrow .d{ color:var(--soft); font-size:.9375rem }
.vrow .d b{ color:var(--text) }

/* le choix de liste */
.picker{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:16px }
.picker .lbl{ font-size:.8125rem; color:var(--muted); margin-right:3px }
.picker button{
  font:700 .875rem/1 var(--body); cursor:pointer; padding:9px 14px; border-radius:999px;
  border:2px solid var(--line); background:var(--panel); color:var(--soft);
}
.picker button:hover{ border-color:var(--line2); color:var(--text) }
.picker button[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#02101F }

/* ---------- la liste de valeurs ---------- */
.vtools{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:14px }
.vtools input[type=search]{
  flex:1 1 220px; background:var(--sunk); border:2px solid var(--line); border-radius:9px;
  color:var(--text); font:inherit; padding:11px 13px; min-width:0;
}
.vtools input[type=search]:focus{ outline:none; border-color:var(--brand-lit) }
.chips{ display:flex; gap:6px; flex-wrap:wrap }
.chips button{
  font:700 .75rem/1 var(--body); cursor:pointer; padding:8px 12px; border-radius:999px;
  border:2px solid var(--line); background:var(--panel); color:var(--soft);
}
.chips button[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#02101F }
.vgrid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)) }
.vcell{
  background:var(--panel); border:2px solid var(--line); border-radius:10px; padding:11px;
  display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; min-width:0;
}
.vcell .ico{ --s:72px }
.vcell .nm{ font-weight:700; font-size:.875rem; line-height:1.2; min-width:0; overflow-wrap:anywhere }
.vcell .val{ font-family:var(--display); font-size:1.125rem; color:var(--ice) }
.vcell .sub{ font-size:.75rem; color:var(--muted) }
.vcell .up{ color:var(--good) } .vcell .dn{ color:var(--bad) }
.vmore{ display:flex; justify-content:center; margin-top:20px }
.vempty{ color:var(--muted); padding:30px 0; text-align:center }

/* ---------- la page de telechargement ---------- */
.dl{ display:grid; gap:14px }
@media (min-width:760px){ .dl{ grid-template-columns:1fr 1fr } }
.dlcard{
  background:var(--panel); border:2px solid var(--line); border-top-color:var(--brand);
  border-radius:12px; padding:clamp(17px,3vw,24px); display:flex; flex-direction:column; gap:13px;
}
.dlcard h3{ font-family:var(--display); font-size:1.375rem; text-transform:uppercase }
.dlcard ol{ margin:0; padding-left:19px; color:var(--soft); font-size:.9375rem; display:grid; gap:7px }
.dlcard .need{ font-size:.8125rem; color:var(--muted) }

/* ---------- la bande communautaire ---------- */
.belt2{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center;
  padding:15px; border:2px solid var(--line); border-radius:12px; background:var(--panel);
}
.belt2 img{ height:26px; width:auto }
.belt2 .t{ font-weight:700; color:var(--soft); font-size:.9375rem }

/* ---------- la grille d'items decorative ---------- */
/*  Une bande d'items du jeu, juste pour que la page SENTE MM2 des le
    premier coup d'oeil. Purement decoratif : aucune information dedans,
    donc cache aux lecteurs d'ecran. */
.strip{ display:flex; gap:8px; overflow:hidden; justify-content:center; padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
.strip .ico{ --s:52px; opacity:.92 }