:root { --bg:#14151a; --panel:#1e2028; --line:#2e3240; --text:#e7e9ee; --muted:#9aa1b1; --accent:#6f9dff; --chart:#5a8ae0; --warn:#e0a33e; --bad:#e05a5a; } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui, sans-serif; } header { display:flex; gap:1rem; align-items:center; padding:.75rem 1rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:10; flex-wrap:wrap; } h1 { font-size:1rem; margin:0; } nav { display:flex; gap:.25rem; } nav button { background:none; border:1px solid transparent; color:var(--muted); padding:.4rem .7rem; border-radius:6px; cursor:pointer; } nav button.active { color:var(--text); border-color:var(--line); background:var(--panel); } #status { margin-left:auto; color:var(--muted); font-size:.85rem; } main { padding:1rem; } .hidden { display:none; } .grid { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } .card { background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; } .card img { width:100%; display:block; } .card .body { padding:.5rem .6rem; } .card .name { font-weight:600; font-size:.9rem; } .card .meta { color:var(--muted); font-size:.8rem; } .qty { position:absolute; } table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); } th { color:var(--muted); font-weight:500; font-size:.85rem; } input, select, button { font:inherit; } input, select { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:.45rem .6rem; } .problem { color:var(--bad); } .filters { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; } dialog { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:1.25rem; } .combobox-wrap { position:relative; display:inline-block; } .combobox-list { position:absolute; z-index:20; left:0; top:100%; margin:.15rem 0 0; padding:0; list-style:none; min-width:22rem; max-height:16rem; overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; } .combobox-list li { padding:.35rem .6rem; cursor:pointer; font-size:.9rem; display:flex; gap:.5rem; align-items:baseline; } .combobox-list li.active, .combobox-list li:hover { background:#2b2f3c; } .combobox-list b { min-width:3.5rem; color:var(--accent); } .colours { display:flex; gap:.2rem; } .colours button { width:2rem; height:2rem; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer; font-weight:600; } .colours button.on { border-color:var(--accent); color:var(--text); background:#2b2f3c; } /* --- Saisie rapide ------------------------------------------------------- Hierarchie voulue : edition et numero portent le geste, les reglages (foil, langue, etat) se touchent une fois par session et passent donc au second plan. La carte ajoutee s'affiche en grand pour etre verifiee du coin de l'oeil sans casser la cadence. */ .quick { max-width: 70rem; } .quick-head { display:flex; align-items:baseline; gap:1rem; } .quick-head h2 { margin:0 0 .25rem; } .quick-form { display:flex; align-items:flex-end; gap:.6rem; margin:1rem 0 .5rem; flex-wrap:wrap; } .field { display:flex; flex-direction:column; gap:.2rem; } .field-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } .field input { font-size:1.15rem; padding:.5rem .6rem; } .field-set input { width:8rem; text-transform:uppercase; } .field-cn input { width:7rem; } .field-qty input { width:4.5rem; } .hint { align-self:center; margin-left:.5rem; padding:.25rem .5rem; border:1px solid var(--line); border-radius:5px; color:var(--muted); font-size:.75rem; font-family:inherit; } .quick-settings { display:flex; align-items:center; gap:.75rem; color:var(--muted); font-size:.85rem; margin-bottom:1.25rem; } .quick-settings select { font-size:.85rem; padding:.3rem .4rem; } .quick-idle { max-width:32rem; } .quick-error { color:var(--bad); border:1px solid var(--bad); border-radius:8px; padding:.5rem .8rem; display:inline-block; margin:0 0 1rem; font-size:.9rem; } .last-added { display:flex; gap:1.25rem; align-items:flex-start; } .last-added img { width:11.5rem; border-radius:10px; display:block; } .last-body { padding-top:.25rem; } .last-name { font-size:1.15rem; font-weight:600; margin-bottom:.15rem; } .last-count { font-size:1.35rem; font-weight:600; color:var(--accent); margin:.75rem 0; } .last-count .meta { font-size:.85rem; font-weight:400; } button.undo { background:none; border:1px solid var(--line); color:var(--muted); border-radius:6px; padding:.35rem .7rem; cursor:pointer; } button.undo:hover { color:var(--text); border-color:var(--bad); } .session-strip { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--line); } .session-strip:empty { display:none; } .chip { position:relative; padding:0; background:none; border:none; cursor:pointer; line-height:0; } .chip img { width:3.6rem; border-radius:5px; display:block; opacity:.75; transition:opacity .1s; } .chip:hover img { opacity:1; outline:2px solid var(--bad); outline-offset:1px; } .chip-badge { position:absolute; bottom:-.2rem; right:-.2rem; background:var(--accent); color:#0b0d12; border-radius:99px; font-size:.7rem; font-weight:700; padding:.05rem .35rem; line-height:1.4; } /* --- Grille de collection ------------------------------------------------ L'image porte deja nom, cout, type et texte. La quantite passe donc en pastille SUR l'illustration, le prix dessous, et le nom n'est plus repete sous une image qui l'affiche. */ .card-art { position:relative; line-height:0; } /* Les pastilles vont EN BAS. Posees en haut, elles recouvraient le nom de la carte et son cout de mana — les deux informations qui servent a l'identifier. En bas elles ne masquent que la ligne d'edition et d'illustrateur, qui n'est jamais lue dans une grille. */ .card-badges { position:absolute; bottom:.35rem; left:.35rem; display:flex; gap:.25rem; align-items:center; } .badge-qty { background:rgba(8,10,15,.92); color:var(--text); border-radius:99px; min-width:1.4rem; padding:.05rem .4rem; font-size:.78rem; font-weight:700; text-align:center; line-height:1.5; backdrop-filter:blur(2px); } .badge-foil { background:rgba(8,10,15,.92); color:var(--warn); border-radius:99px; padding:.05rem .3rem; font-size:.72rem; line-height:1.5; backdrop-filter:blur(2px); } .card-noimage { padding:2.5rem .6rem; text-align:center; color:var(--muted); font-size:.8rem; line-height:1.3; } .card .body { padding:.4rem .55rem; } .card-line { display:flex; justify-content:space-between; gap:.5rem; font-size:.85rem; } /* Pastilles de couleur aux teintes du jeu. */ .colours button { color:var(--muted); background:var(--panel); font-size:.8rem; } .colours button.on { background:var(--pip-bg); color:var(--pip-fg); border-color:var(--pip-fg); } .result-count { margin:.25rem 0 1rem; min-height:1.2em; } .grid-more { display:flex; justify-content:center; margin:1.5rem 0; } button.ghost { background:none; border:1px solid var(--line); color:var(--muted); border-radius:6px; padding:.45rem .7rem; cursor:pointer; } button.ghost:hover { color:var(--text); } /* --- Vue Deck : tuiles de synthese et courbe de mana --------------------- La phrase fleuve « 101 cartes comptees (commandant et deck) · deck principal : 100 cartes, 34 terrains... » ne se lit pas. Des tuiles se parcourent d'un regard. */ .format-tag { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:.15rem .5rem; vertical-align:middle; font-weight:500; } .stat-row { display:flex; gap:1.75rem; margin:.75rem 0 1.5rem; flex-wrap:wrap; } .stat { display:flex; flex-direction:column; } .stat-value { font-size:1.35rem; font-weight:600; line-height:1.15; } .stat-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } /* Une seule serie : une teinte, pas de legende, pas de grille. Barres plafonnees a 24px — le reste de la colonne est de l'air —, extremite haute arrondie a 4px et pied carre sur la ligne de base, 2px de fond entre deux barres plutot qu'un contour. */ .curve { margin:0 0 1.75rem; max-width:32rem; } .curve figcaption { font-size:.9rem; font-weight:600; margin-bottom:.6rem; } /* padding-top : l'etiquette du pic est posee au-dessus de sa barre, il lui faut de l'air sous le titre — sans quoi elle le chevauche. */ .curve-plot { display:flex; gap:2px; align-items:flex-end; height:6.5rem; padding-top:1.3rem; box-sizing:content-box; } .curve-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:.35rem; height:100%; } .curve-track { flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; } .curve-bar { width:100%; max-width:24px; background:var(--chart); border-radius:4px 4px 0 0; position:relative; } /* Une valeur nulle n'affiche RIEN. Un moignon de 2px se lirait « un petit peu », ce qui est faux. */ .curve-bar[style*="height:0.0%"] { display:none; } .curve-peak { position:absolute; top:-1.2rem; left:50%; transform:translateX(-50%); font-size:.75rem; font-weight:700; color:var(--text); } .curve-x { font-size:.75rem; color:var(--muted); } .curve-values { font-size:.75rem; margin:.6rem 0 0; } /* Le bouton « retirer » de chaque rangee : discret au repos, une action destructive ne doit pas peser autant que le contenu. `:not(.linkish)` n'est pas cosmetique. Un selecteur a identifiant pese (1,0,2) contre (0,1,1) pour `button.linkish` : sans cette exclusion, le NOM de chaque carte heritait de l'apparence du bouton « retirer » et devenait ROUGE au survol — l'affordance destructive posee sur le texte le plus clique de la vue. */ #d-cards table button:not(.linkish), #d-gaps table button:not(.linkish) { background:none; border:1px solid transparent; color:var(--muted); border-radius:5px; padding:.2rem .45rem; cursor:pointer; font-size:.8rem; } #d-cards tr:hover button:not(.linkish) { border-color:var(--line); } #d-cards table button:not(.linkish):hover { color:var(--bad); border-color:var(--bad); } #d-cards input[type=number] { width:3.5rem; padding:.25rem .35rem; font-size:.9rem; } #d-cards td, #d-gaps td { padding:.3rem .5rem; } /* --- Symboles de mana ---------------------------------------------------- Un rond par symbole, aux memes teintes que les pastilles de filtre. Rendus en CSS : la fiche doit rester lisible sur un NAS coupe d'internet. */ .pip { display:inline-flex; align-items:center; justify-content:center; width:1.15em; height:1.15em; border-radius:50%; background:var(--pip-bg); color:var(--pip-fg); font-size:.82em; font-weight:700; font-style:normal; vertical-align:-.12em; margin:0 .06em; line-height:1; } /* --- Fiche carte --------------------------------------------------------- Deux colonnes : l'illustration porte l'identite, la colonne de droite porte ce qu'on vient chercher — le texte, la legalite, ce qu'on possede. Sur mobile elles s'empilent, l'image d'abord. */ dialog.sheet { width:min(62rem, 94vw); max-height:90vh; padding:0; overflow:auto; border-radius:12px; } dialog.sheet::backdrop { background:rgba(8,10,15,.72); } .sheet-body { display:grid; grid-template-columns:20rem 1fr; gap:1.5rem; padding:1.4rem 1.5rem 1.6rem; } @media (max-width:56rem) { .sheet-body { grid-template-columns:1fr; } } .sheet-close { position:sticky; float:right; top:.6rem; right:.6rem; z-index:2; background:rgba(8,10,15,.75); color:var(--muted); border:1px solid var(--line); border-radius:6px; width:2rem; height:2rem; cursor:pointer; } .sheet-close:hover { color:var(--text); } .sheet-loading { padding:2rem; } .sheet-art img { width:100%; border-radius:10px; display:block; } /* Les tuiles sous l'illustration. En rangee, les quatre debordaient des 20rem de la colonne et « rang EDHREC » retombait seul sur une deuxieme ligne, decale — une grille 2x2 les tient alignees. */ .sheet-art .stat-row { display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1rem; margin:.9rem 0 0; } .sheet-art .stat-value { font-size:1.1rem; } .sheet-head { display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; padding:0; border:0; position:static; background:none; } .sheet-head h2 { margin:0; font-size:1.3rem; } .sheet-cost { margin-left:auto; white-space:nowrap; } .sheet-type { color:var(--muted); margin:.35rem 0 .9rem; } .sheet-pt { color:var(--text); font-weight:600; margin-left:.4rem; } .sheet-oracle { background:#181a21; border:1px solid var(--line); border-radius:8px; padding:.7rem .9rem; } .sheet-oracle p { margin:0 0 .5rem; } .sheet-oracle p:last-child { margin-bottom:0; } .sheet-info h3 { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:1.4rem 0 .5rem; font-weight:600; } /* La legalite se lit par la couleur du verdict, jamais par elle seule : le mot est ecrit a cote. */ .legal-row { display:flex; flex-wrap:wrap; gap:.35rem; margin:.9rem 0 0; } .legal { font-size:.72rem; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:.15rem .55rem; } .legal b { font-weight:600; margin-left:.3rem; } .legal-ok b { color:#6fbf8a; } .legal-no b { color:var(--muted); } .legal-ban b { color:var(--bad); } .legal-warn b { color:var(--warn); } .tag-row { display:flex; flex-wrap:wrap; gap:.3rem; margin:.6rem 0 0; } .tag { font-size:.72rem; color:var(--muted); background:#242833; border-radius:5px; padding:.12rem .45rem; } .sheet-table td, .sheet-table th { font-size:.85rem; padding:.3rem .5rem; } .sheet-table .num { text-align:right; } .sheet-fold { margin-top:1rem; border-top:1px solid var(--line); padding-top:.7rem; } .sheet-fold summary { cursor:pointer; color:var(--muted); font-size:.85rem; } .printings, .rulings { list-style:none; margin:.6rem 0 0; padding:0; } /* La liste d'impressions se PARCOURT du regard — 137 lignes pour Sol Ring — donc une fenetre defilante convient. Les rulings se LISENT : les enfermer dans 18rem donnait une meurtriere de trois lignes pour un paragraphe de 200 mots. Ils coulent donc, sous un repli ferme par defaut. */ .printings { max-height:18rem; overflow-y:auto; } .printing { display:flex; align-items:baseline; gap:.5rem; padding:.28rem .3rem; font-size:.85rem; border-radius:5px; } .printing.owned { background:#20242e; } .printing-set { font-weight:500; } .printing-price { margin-left:auto; color:var(--muted); } .printing .badge-qty { position:static; } .rulings li { font-size:.85rem; padding:.3rem 0; border-bottom:1px solid var(--line); } /* La vignette devient cliquable : c'est un bouton, pas un article, pour avoir le focus clavier et Entree sans les reimplementer. */ button.card { display:block; width:100%; padding:0; text-align:left; color:inherit; font:inherit; cursor:pointer; } button.card:hover { border-color:var(--accent); } button.card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } tr.clickable { cursor:pointer; } tr.clickable:hover td { color:var(--accent); } /* Un nom de carte qui ouvre sa fiche : c'est du texte, pas un bouton. On garde l'element