/* Feuille de style de l'écran de RECHERCHE (extraite d'index.html en v0.6.94).
   Thèmes et tokens : cf. docs/design-rules.md — styler UNIQUEMENT via les variables CSS. */
/* ===== Thème par défaut = Nuit (sombre). Les 4 autres surchargent via [data-theme]. ===== */
  :root{
    --bg:#14161c;--panel:#1d212b;--panel2:#20242f;--input:#12151c;--line:#2c3240;
    --txt:#e6e9ef;--txt2:#b9c2d8;--mut:#8b93a7;--acc:#6ea8fe;--on-acc:#0b0e14;
    --ok:#8fdca0;--ok-bg:rgba(120,200,140,.15);--ok-line:#3f7a52;
    --bad:#f5a9a9;--bad-bg:rgba(245,120,120,.15);--bad-line:#7a3f3f;
    --warn:#e0b35c;--warn-bg:rgba(230,199,77,.10);--warn-line:#7a5c3f;
    --shadow:rgba(0,0,0,.45);--overlay:rgba(6,8,12,.62);--focus:rgba(110,168,254,.5);
  }
  :root[data-theme="jour"]{
    --bg:#f6f7fa;--panel:#ffffff;--panel2:#eef1f6;--input:#ffffff;--line:#d3d8e2;
    --txt:#1a1e27;--txt2:#47506a;--mut:#6b7488;--acc:#2f6fe0;--on-acc:#ffffff;
    --ok:#1e7a4d;--ok-bg:#e5f6ec;--ok-line:#9fd8b6;
    --bad:#c0392b;--bad-bg:#fbeaea;--bad-line:#e6a6a0;
    --warn:#a86a12;--warn-bg:#fbf3e0;--warn-line:#e6cf9a;
    --shadow:rgba(20,30,50,.14);--overlay:rgba(20,25,35,.4);--focus:rgba(47,111,224,.35);
  }
  :root[data-theme="sepia"]{  /* thème « Rouge » : parchemin teinté rouge, accent rouge */
    --bg:#f7e6dc;--panel:#fdf2ec;--panel2:#f2d9cc;--input:#fff8f4;--line:#e3c3b1;
    --txt:#41302a;--txt2:#6e5249;--mut:#8d7167;--acc:#b5431f;--on-acc:#fff6ef;
    --ok:#4d7a3a;--ok-bg:#e6efd9;--ok-line:#a9c48a;
    --bad:#b23124;--bad-bg:#f7ded8;--bad-line:#e0a89e;
    --warn:#a85f14;--warn-bg:#f6e6cc;--warn-line:#dcb583;
    --shadow:rgba(95,50,30,.18);--overlay:rgba(70,35,25,.45);--focus:rgba(181,67,31,.35);
  }
  :root[data-theme="ocean"]{
    --bg:#0c1a24;--panel:#12293a;--panel2:#17384c;--input:#0d2130;--line:#244a5f;
    --txt:#e2f0f6;--txt2:#a9c8d6;--mut:#6f97a8;--acc:#3fb6c4;--on-acc:#04161d;
    --ok:#6fe0b0;--ok-bg:rgba(90,200,150,.15);--ok-line:#2f6f5c;
    --bad:#f2a6a6;--bad-bg:rgba(240,120,120,.15);--bad-line:#7a3f45;
    --warn:#e6c06a;--warn-bg:rgba(230,190,90,.12);--warn-line:#6f5c3a;
    --shadow:rgba(0,0,0,.5);--overlay:rgba(4,14,20,.62);--focus:rgba(63,182,196,.5);
  }
  :root[data-theme="foret"]{
    --bg:#101a13;--panel:#17251b;--panel2:#1f3326;--input:#0e1a12;--line:#2c4634;
    --txt:#e6f0e6;--txt2:#b3ccb6;--mut:#7a9880;--acc:#5fbf6a;--on-acc:#08150c;
    --ok:#8fdca0;--ok-bg:rgba(120,200,140,.15);--ok-line:#3f7a52;
    --bad:#f2a6a6;--bad-bg:rgba(240,120,120,.15);--bad-line:#7a4340;
    --warn:#e6c06a;--warn-bg:rgba(230,190,90,.12);--warn-line:#6f5c3a;
    --shadow:rgba(0,0,0,.5);--overlay:rgba(6,16,10,.62);--focus:rgba(95,191,106,.5);
  }
  *{box-sizing:border-box}
  /* ------------------------------------------------------------------------ *
   * ASCENSEURS THÉMATISÉS (règle 3 : tokens uniquement -> suivent les 5 thèmes
   * à chaud, sans JS, puisque les variables se résolvent à l'exécution).
   * Deux syntaxes, MUTUELLEMENT EXCLUSIVES (c'est le piège) :
   *   - pseudo-éléments `::-webkit-scrollbar*` (Chromium/WebKit) : contrôle fin
   *     (pouce arrondi, marge, états survol/actif). NON héritables -> sélecteur `*`
   *     pour couvrir tous les conteneurs défilants (liste de deck, volet
   *     collection, éditeur, textareas, menus…).
   *   - `scrollbar-width`/`scrollbar-color` : standard (Firefox). S'HÉRITENT, donc
   *     les poser sur `html` suffit.
   * ATTENTION : sur Chromium, déclarer les propriétés STANDARD **neutralise** les
   * pseudo-éléments ci-dessus (mesuré : ascenseur natif de 15 px au lieu du pouce
   * stylé de 10 px). Elles sont donc scopées par `@supports not selector(...)` :
   * seuls les moteurs SANS `::-webkit-scrollbar` (Firefox) les appliquent.
   * `color-scheme` aligne en plus les ascenseurs natifs restants (contrôles non
   * stylables, 1er rendu) sur la clarté du thème.
   * ------------------------------------------------------------------------ */
  html{color-scheme:dark}
  :root[data-theme="jour"],:root[data-theme="sepia"]{color-scheme:light}
  @supports not selector(::-webkit-scrollbar){
    html{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  }
  *::-webkit-scrollbar{width:11px;height:11px}
  *::-webkit-scrollbar-track{background:transparent}
  /* Bordure transparente + background-clip:content-box = marge autour du pouce
     (il ne colle pas aux bords), impossible à obtenir avec un simple padding. */
  *::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;
    border:2px solid transparent;background-clip:content-box}
  *::-webkit-scrollbar-thumb:hover{background:var(--mut);background-clip:content-box}
  *::-webkit-scrollbar-thumb:active{background:var(--acc);background-clip:content-box}
  /* Angle entre ascenseurs H et V (sinon un carré blanc apparaît en thème sombre). */
  *::-webkit-scrollbar-corner{background:transparent}
  body{margin:0;font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--txt)}
  header{padding:12px 20px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:12px}
  header h1{font-size:17px;margin:0;white-space:nowrap;flex:0 0 auto}
  header .sub{color:var(--mut);font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  header select{width:auto;background:var(--input);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:5px 8px}
  /* Boutons Éditeur/Deck déplacés dans le header : conteneur + dé-FAB (sélecteurs à
     2 ID → l'emportent sur les styles FAB de deck.css/cardedit.css). */
  #mtg-header-actions{display:flex;gap:8px;align-items:center;align-self:center}
  #mtg-header-actions > #mtgd-toggle, #mtg-header-actions > #ce-toggle, #mtg-header-actions > #col-toggle,
  #mtg-header-actions > #scan-toggle, #mtg-header-actions > #rp-toggle{
    position:static;right:auto;bottom:auto;left:auto;
    padding:6px 12px;border-radius:8px;box-shadow:none;font-size:13px;line-height:1.2;white-space:nowrap;
  }
  /* Sélecteur de thème custom (menu déroulant avec logos de mana WUBRG). */
  .theme-sel{position:relative}
  .theme-btn{display:inline-flex;align-items:center;gap:7px;background:var(--input);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:5px 9px;cursor:pointer;font:inherit;line-height:1}
  .theme-btn:hover{border-color:var(--acc)}
  .theme-btn .caret{margin-left:1px;color:var(--mut);font-size:10px}
  .theme-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:4000;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px var(--shadow);padding:4px;min-width:150px}
  .theme-menu[hidden]{display:none}
  .theme-opt{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;color:var(--txt);border-radius:6px;padding:7px 10px;cursor:pointer;font:inherit;text-align:left}
  .theme-opt:hover{background:var(--panel2)}
  .theme-opt.on{background:var(--acc);color:var(--on-acc)}
  /* mini-pip de mana : couleurs sémantiques WUBRG CONSTANTES entre thèmes (règle 3). */
  .theme-pip{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border:1px solid rgba(0,0,0,.4);color:#0b0b0b;box-sizing:border-box}
  .theme-pip svg{width:78%;height:78%;display:block}
  .theme-pip.W{background:#f8f0d8}.theme-pip.U{background:#a9d0f5}.theme-pip.B{background:#b3a1c2}
  .theme-pip.R{background:#f5a9a9}.theme-pip.G{background:#a9d9b0}
  /* Largeur COMMUNE des trois panneaux latéraux : formulaire de recherche (colonne gauche),
     volet deck MINIMISÉ et volet collection MINIMISÉ. Une seule source (`--side-w`) pour que
     le glissement soit exact (voir plus bas). deck.css/collection.css lisent la même variable. */
  :root{--side-w:420px}
  .layout{display:grid;grid-template-columns:var(--side-w) 1fr;transition:transform .22s ease}
  .panel{background:var(--panel);border-right:1px solid var(--line);padding:14px;overflow-y:auto;height:calc(100vh - 50px)}
  /* Volet Deck ou Collection (minimisé) ouvert à DROITE → tout le `.layout` glisse d'UNE largeur
     de panneau (`--side-w`) vers la GAUCHE : le formulaire de recherche sort par la gauche
     pendant que le volet entre par la droite (même largeur → glissement symétrique). Résultat :
     résultats de recherche + construction deck/collection visibles côte à côte, résultats de
     largeur INCHANGÉE (aucun écrasement). Volets mutuellement exclusifs → au plus une classe.
     En plein écran (`.full`, 100vw) le volet recouvre tout : la translation reste sans effet. */
  body.mtgd-panel-open .layout,body.col-panel-open .layout{transform:translateX(calc(-1 * var(--side-w)))}
  .panel h2{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:16px 0 6px;border-top:1px solid var(--line);padding-top:12px}
  .panel h2:first-of-type{border:0;margin-top:4px;padding-top:0}
  label{display:block;font-size:11px;color:var(--mut);margin:6px 0 2px}
  select,input{width:100%;background:var(--input);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:6px 8px;font-size:13px}
  select[multiple]{height:104px}
  .row{display:flex;gap:8px}.row>*{flex:1}
  .colors{display:flex;gap:6px}
  /* Boutons de couleur = LOGOS de mana stylisés (disque coloré WUBRG + glyphe SVG, comme
     .theme-pip / .ce-pip). Couleurs sémantiques CONSTANTES entre thèmes (règle 3). Repli
     lettre si cardrender.js pas encore chargé (glyphe vide). Tooltip = notation {W}… */
  .colors button{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);background:var(--input);color:#0b0b0b;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .colors button svg{width:64%;height:64%;display:block}
  .colors button.mp-W{background:#f8f0d8}.colors button.mp-U{background:#a9d0f5}.colors button.mp-B{background:#b3a1c2}
  .colors button.mp-R{background:#f5a9a9}.colors button.mp-G{background:#a9d9b0}
  .colors button.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--focus)}
  .chk{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--txt);margin:2px 8px 2px 0}
  .chk input{width:auto}
  .ability{border:1px solid var(--line);border-radius:8px;padding:9px;margin-bottom:8px;background:var(--panel2)}
  .ability .hd{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);margin-bottom:5px}
  .ability .x{cursor:pointer;color:var(--mut);border:none;background:none;font-size:15px}
  button.act{background:var(--acc);color:var(--on-acc);border:none;border-radius:6px;padding:10px;font-weight:700;cursor:pointer}
  button.ghost{background:none;border:1px dashed var(--line);color:var(--mut);border-radius:6px;padding:7px;cursor:pointer;width:100%}
  .actions{position:sticky;bottom:-14px;background:var(--panel);padding:12px 0;margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:8px}
  #go{min-width:210px;font-size:15px;transition:transform .12s ease}
  #go:hover{transform:translateY(-1px) scale(1.02)}
  #go:active{transform:translateY(0) scale(.99)}
  #go.loading{animation:gopulse 1s infinite}
  @keyframes gopulse{0%,100%{box-shadow:0 0 0 0 var(--focus)}50%{box-shadow:0 0 0 7px transparent}}
  #reset{min-width:130px}
  .card>.subbtn{position:absolute;top:36px;left:6px;z-index:6;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:rgba(15,18,25,.88);color:var(--bad);font-size:17px;font-weight:700;cursor:pointer;line-height:1;padding:0;display:none;align-items:center;justify-content:center}
  .card>.subbtn:hover{border-color:var(--bad);background:var(--bad);color:var(--on-acc)}
  /* padding-top:0 : la barre collante (1er enfant) doit buter JOINTIVE sous le header de
     l'app. Un padding-top rendrait le sticky `top:0` = bord du contenu (sous le padding) et
     laisserait défiler une bande de carte entre le header et la barre. */
  .results{padding:0 18px 14px;overflow-y:auto;height:calc(100vh - 50px)}
  /* Barre de titre COLLANTE (nombre de résultats · tri · type de vue) : reste visible en
     haut du pane pendant le défilement. `.results` est le conteneur scrollable → sticky top:0.
     Marges négatives (= padding de .results) pour couvrir toute la largeur, y compris les
     gouttières, sinon le contenu défilant apparaîtrait dans les coins au-dessus de la barre.
     `flex-wrap` : sur pane étroit la barre passe à la ligne (sa hauteur alimente `--barh`). */
  .bar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;color:var(--mut);gap:12px;background:var(--bg);
    margin:0 -18px 12px;padding:12px 18px;border-bottom:1px solid var(--line);
    box-shadow:0 5px 12px -8px var(--shadow)}
  .barleft{display:flex;align-items:center;gap:10px;min-width:0}
  /* Navigation dans l'historique de recherche (précédent / suivant). Boutons GRISÉS
     (disabled) selon l'existence d'une recherche précédente/suivante. */
  .histnav{display:inline-flex;gap:4px;flex:0 0 auto}
  .histbtn{width:26px;height:26px;padding:0;line-height:1;font-size:12px;border-radius:6px;cursor:pointer;
    background:var(--input);color:var(--txt2);border:1px solid var(--line)}
  .histbtn:hover:not(:disabled){border-color:var(--acc);color:var(--txt)}
  .histbtn:disabled{opacity:.4;cursor:default}
  /* Menu (click droit sur ◀/▶) : liste des recherches de l'historique, courante surlignée. */
  #histmenu{display:none;position:fixed;z-index:3900;min-width:220px;max-width:min(460px,calc(100vw - 24px));
    max-height:min(60vh,420px);overflow-y:auto;background:var(--panel2);border:1px solid var(--line);
    border-radius:10px;box-shadow:0 12px 40px var(--shadow);padding:5px}
  #histmenu.on{display:block}
  #histmenu .histmi{padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--txt2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:ui-monospace,Consolas,monospace}
  #histmenu .histmi:hover{background:var(--panel)}
  #histmenu .histmi.cur{color:var(--acc);font-weight:700}
  #histmenu .histmi.cur::before{content:"▸ "}
  #histmenu .histmi i{color:var(--mut);font-family:system-ui,Segoe UI,Roboto,sans-serif}
  /* Outils de requête (dropdown recherches emblématiques ★▾ + reset ✕), à droite du (?). */
  .qtools{display:inline-flex;gap:5px;align-items:center;margin-left:6px;vertical-align:middle}
  .qtool{width:24px;height:22px;padding:0;border-radius:5px;background:var(--input);border:1px solid var(--line);
    color:var(--txt2);cursor:pointer;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center;text-transform:none}
  .qtool:hover{border-color:var(--acc);color:var(--txt)}
  .qtool .caret{font-size:8px;margin-left:1px}
  #qexmenu{display:none;position:fixed;z-index:3900;min-width:240px;max-width:min(380px,calc(100vw - 24px));
    max-height:min(64vh,440px);overflow-y:auto;background:var(--panel2);border:1px solid var(--line);
    border-radius:10px;box-shadow:0 12px 40px var(--shadow);padding:5px}
  #qexmenu.on{display:block}
  #qexmenu .qexi{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 10px;
    border-radius:6px;cursor:pointer;font-size:12px;color:var(--txt)}
  #qexmenu .qexi:hover{background:var(--panel)}
  #qexmenu .qexi small{color:var(--mut);font-family:ui-monospace,Consolas,monospace;font-size:10px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%;flex:0 1 auto}
  #qexmenu .qexsep{border-top:1px solid var(--line);margin:5px 6px}
  /* Champs RÉPÉTABLES (kw/otag/o/ft/name/sous-type) : pile d'inputs, « × » sur CHAQUE ligne et
     « ＋ » en bout de la DERNIÈRE (il ajoute à la fin : le bouton est là où la ligne apparaît).
     GRILLE à 3 colonnes (input | × | ＋) et `.mrow{display:contents}` : les lignes SANS ＋ laissent
     la 3e colonne vide, donc TOUS les inputs gardent la même largeur (en flex, la ligne portant 2
     boutons aurait un input plus court). Colonnes EXPLICITES sur les 3 éléments : sans elles, le
     placement automatique (« sparse ») remonterait le ＋ dans la 1re ligne où la 3e colonne est
     libre. Le ＋ est un enfant direct de `.mrows`, pas d'une `.mrow` (il survit au retrait de la
     dernière ligne) ; c'est `refreshMulti` qui le maintient en DERNIÈRE position. */
  .multi{margin:0 0 2px}
  .multi .mrows{display:grid;grid-template-columns:1fr 26px 26px;gap:4px;align-items:center}
  .multi .mrow{display:contents}
  .multi .mrow input{grid-column:1;min-width:0;width:auto}
  /* Boutons de bout de ligne (mêmes dimensions → affichage compact, une ligne par valeur). */
  .mdel,.madd{width:26px;height:28px;padding:0;border-radius:6px;background:var(--input);
    border:1px solid var(--line);font-size:16px;line-height:1;cursor:pointer}
  /* × NEUTRE au repos, rouge au survol : il y en a désormais un par ligne sur 6 champs — en
     rouge permanent, le formulaire devenait un sapin de Noël. L'affordance destructrice reste
     au survol, là où le geste se décide. */
  .mdel{grid-column:2;color:var(--mut)}
  .mdel:hover:not(:disabled){border-color:var(--bad);background:var(--bad);color:var(--on-acc)}
  /* Ligne UNIQUE et déjà vide : rien à vider ni à retirer → bouton neutralisé (état LISIBLE). */
  .mdel:disabled{color:var(--mut);opacity:.45;cursor:default}
  .madd{grid-column:3;color:var(--acc);border-style:dashed}
  .madd:hover{border-color:var(--acc);border-style:solid;background:var(--acc);color:var(--on-acc)}
  /* Ligne « label + ? » (le ? ouvre le panneau otag). */
  .lblrow{display:flex;align-items:center;gap:6px}
  .lblrow label{margin:6px 0 2px}
  .fieldhelp{flex:0 0 auto;width:18px;height:18px;padding:0;border-radius:50%;border:1px solid var(--acc);
    background:none;color:var(--acc);font-size:11px;font-weight:700;line-height:1;cursor:pointer}
  .fieldhelp:hover{background:var(--acc);color:var(--on-acc)}
  /* Panneau otag PLEIN ÉCRAN : catalogue des tags fonctionnels (filtre + liste alpha + définition au survol). */
  #otagpanel{display:none;position:fixed;inset:0;z-index:4200;background:var(--overlay);align-items:center;justify-content:center}
  #otagpanel.on{display:flex}
  #otagpanel .otp-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;
    width:min(920px,94vw);height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden}
  #otagpanel .otp-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
  #otagpanel .otp-head b{font-size:14px;white-space:nowrap}
  #otagpanel #otag-filter{flex:1;min-width:0}
  #otagpanel #otag-close{flex:0 0 auto;width:auto;background:none;border:none;color:var(--mut);font-size:22px;cursor:pointer;padding:0 4px}
  #otagpanel #otag-close:hover{color:var(--txt)}
  #otagpanel .otp-note{padding:6px 16px;font-size:11px;color:var(--mut);border-bottom:1px solid var(--line)}
  #otagpanel .otp-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 10px;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px;align-content:start}
  #otagpanel .otagi{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:5px 9px;
    border-radius:6px;cursor:pointer;font-size:12px;color:var(--txt)}
  #otagpanel .otagi:hover{background:var(--panel2)}
  #otagpanel .otagi .osl{font-family:ui-monospace,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #otagpanel .otagi .ocnt{flex:0 0 auto;color:var(--mut);font-size:10px}
  /* Marqueur des tags PARAPLUIE (avec sous-tags) : otag: est hiérarchique, le compte inclut les
     enfants. CLIQUABLE → plonge dans les sous-tags (le reste de la ligne insère le tag). */
  #otagpanel .otagi .oum{flex:0 0 auto;color:var(--acc);font-size:10px;opacity:.75;
    padding:0 3px;border-radius:4px;cursor:pointer}
  #otagpanel .otagi .oum:hover{opacity:1;background:var(--acc);color:var(--on-acc)}
  /* Fil d'Ariane du plongeon : visible UNIQUEMENT quand on explore les sous-tags d'un tag. */
  #otagpanel .otp-scope{display:none;align-items:center;gap:8px;padding:6px 16px;font-size:12px;
    border-bottom:1px solid var(--line);background:var(--panel2)}
  #otagpanel .otp-scope.on{display:flex}
  #otagpanel .otp-scope b{font-family:ui-monospace,Consolas,monospace;color:var(--acc)}
  #otagpanel .otp-scope button{margin-left:auto;background:none;border:1px solid var(--line);
    color:var(--txt2);border-radius:6px;padding:2px 8px;font-size:11px;cursor:pointer;width:auto}
  #otagpanel .otp-scope button:hover{border-color:var(--acc);color:var(--acc)}
  #otagpanel .otp-def{flex:0 0 auto;min-height:58px;max-height:28%;overflow-y:auto;padding:10px 16px;
    border-top:1px solid var(--line);background:var(--panel2);font-size:12px;color:var(--txt2);line-height:1.5}
  #otagpanel .otp-def b{color:var(--acc);font-family:ui-monospace,Consolas,monospace}
  #otagpanel.nodesc .otp-def{display:none}
  #otagpanel .otp-empty{grid-column:1/-1;color:var(--mut);padding:20px;text-align:center}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
  .card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .card img{width:100%;display:block;aspect-ratio:.716;object-fit:cover;background:var(--input)}
  .card .b{padding:8px 10px}.card .n{font-weight:600;font-size:13px}
  .card .n .mc{color:var(--mut);font-weight:400}
  .card .t{color:var(--mut);font-size:11px;margin-top:2px}
  /* Ligne « méta » : chaque donnée dans SON PROPRE span (set, rareté, MV, F/E, prix)
     pour que la vue tableau puisse en faire des COLONNES alignées (display:contents).
     En vue détaillée/images, les spans se relisent comme une phrase : séparateur « · »
     porté par ::before du span suivant, et span vide = masqué (donc pas de « ·  · »). */
  .card .meta span:empty{display:none}
  .card .meta span+span::before{content:" · "}

  /* ================= Modes d'affichage des résultats (sélecteur .viewsel) =================
     Un SEUL rendu (renderCard) pour les trois vues : on ne re-fetch ni ne reconstruit rien
     au changement de mode, c'est la CSS qui reflow. Classe portée par `.results` (et pas par
     `.grid`) pour que l'en-tête de colonnes puisse s'afficher au même niveau. */
  .viewsel{display:inline-flex;align-items:center;gap:6px}
  .viewsel .vbtn{width:30px;height:26px;padding:0;line-height:1;font-size:14px;
    background:var(--input);color:var(--txt2);border:1px solid var(--line);border-radius:6px;cursor:pointer}
  .viewsel .vbtn:hover{border-color:var(--acc);color:var(--txt)}
  .viewsel .vbtn.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
  .thead{display:none}

  /* ---- Vue TABLEAU dense : une carte = une ligne, colonnes alignées ----
     `--tcols` est partagé par l'en-tête et par chaque `.b` → alignement garanti sans
     `subgrid`. Les boutons d'action restent en position ABSOLUE, calés à droite dans une
     zone de largeur FIXE (`padding-right`) : leur nombre varie (⇄ seulement sur les
     recto-verso), donc les laisser dans le flux décalerait les colonnes d'une ligne à
     l'autre. Même `padding-right` sur l'en-tête. */
  /* `minmax(0,…fr)` et NON `minmax(150px,…)` : une largeur minimale en pixels fait DÉBORDER
     la ligne dès que le pane est étroit (le `.card` est en overflow:hidden → colonnes de
     droite invisibles). À 0, les colonnes se compriment et l'ellipsis prend le relais. */
  .results.view-table{--tcols:minmax(0,1.8fr) minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,.8fr) 46px 50px 58px}
  .results.view-table .thead{position:sticky;top:var(--barh,0);z-index:15;background:var(--bg);
    display:grid;grid-template-columns:var(--tcols);gap:10px;
    padding:6px 200px 4px calc(24px + 8px + 8px);margin-bottom:2px;border-bottom:1px solid var(--line);
    color:var(--mut);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
  .results.view-table .grid{display:block}
  .results.view-table .card{display:flex;align-items:center;gap:8px;padding:2px 200px 2px 8px;
    background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;min-height:30px}
  .results.view-table .card:hover{background:var(--panel)}
  /* La vignette impose la hauteur de ligne (24 px de large ≈ 34 px de haut) : c'est elle
     qui règle la densité. */
  .results.view-table .card>img{order:0;flex:0 0 auto;width:24px;aspect-ratio:.716;border-radius:2px}
  .results.view-table .card>.b{order:1;flex:1 1 auto;min-width:0;padding:0;
    display:grid;grid-template-columns:var(--tcols);gap:10px;align-items:center}
  .results.view-table .card .n,
  .results.view-table .card .t{margin:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .results.view-table .card .meta{display:contents}
  .results.view-table .card .meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Une cellule vide doit RESTER une cellule, sinon la colonne suivante remonte d'un cran. */
  .results.view-table .card .meta span:empty{display:block}
  .results.view-table .card .meta span+span::before{content:none}
  .results.view-table .card .tags{display:none}
  /* Boutons d'action : bande horizontale à droite, à des décalages FIXES. */
  .results.view-table .card>.addbtn,.results.view-table .card>.subbtn,
  .results.view-table .card>.colbtn,.results.view-table .card>.colunknownbtn,
  .results.view-table .card>.detailbtn,.results.view-table .card>.flip,
  .results.view-table .card>.ownbadge,.results.view-table .card>.mtgd-qtybadge{
    top:50%;left:auto;transform:translateY(-50%);width:22px;height:22px;font-size:13px}
  .results.view-table .card>.addbtn{right:8px}
  .results.view-table .card>.subbtn{right:34px}
  .results.view-table .card>.colbtn{right:60px}
  .results.view-table .card>.colunknownbtn{right:86px}
  .results.view-table .card>.detailbtn{right:112px}
  .results.view-table .card>.flip{right:138px}
  .results.view-table .card>.ownbadge{right:166px;width:auto;min-width:20px;height:20px;line-height:18px}
  .results.view-table .card>.mtgd-qtybadge{right:166px;width:auto;min-width:20px;height:20px;line-height:20px}
  /* Pane étroit : on RETIRE des colonnes plutôt que de toutes les écraser. `.layout` vaut
     `360px 1fr`, donc largeur du pane = largeur de fenêtre − 360 → seuils en viewport.
     Ces règles passent APRÈS `.meta span:empty{display:block}` (même spécificité, source
     plus tardive) : une cellule vide masquée le reste bien. */
  @media(max-width:1180px){
    .results.view-table{--tcols:minmax(0,1.8fr) minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,.8fr)}
    .results.view-table .card .meta .mv,.results.view-table .card .meta .pt,.results.view-table .card .meta .pr,
    .results.view-table .thead .th-mv,.results.view-table .thead .th-pt,.results.view-table .thead .th-pr{display:none}
  }
  @media(max-width:980px){
    .results.view-table{--tcols:minmax(0,1.8fr) minmax(0,1.4fr)}
    .results.view-table .card .meta .cset,.results.view-table .card .meta .ra,
    .results.view-table .thead .th-set,.results.view-table .thead .th-ra{display:none}
  }

  /* ---- Vue IMAGES : uniquement les cartes, actions révélées au survol ---- */
  .results.view-image .grid{grid-template-columns:repeat(auto-fill,minmax(var(--imgcol,150px),1fr));gap:10px}
  .results.view-image .card{background:transparent;border:0}
  .results.view-image .card>.b{display:none}
  /* `pointer-events:none` AVEC l'opacité : un bouton invisible mais cliquable volerait le
     clic sur l'image (= ouvrir les versions). */
  .results.view-image .card>button{opacity:0;pointer-events:none;transition:opacity .12s ease}
  .results.view-image .card:hover>button,.results.view-image .card>button:focus-visible{opacity:1;pointer-events:auto}
  /* Badge (!) « une carte strictement meilleure existe » (dans le texte sous la carte) */
  .sbbadge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--warn-line);background:var(--warn-bg);color:var(--warn);font-size:11px;font-weight:800;line-height:1;cursor:pointer;margin-left:5px;vertical-align:middle;padding:0;flex:none}
  .sbbadge:hover,.sbbadge:focus{background:var(--warn);color:var(--on-acc);outline:none}
  /* Popover meilleures alternatives (stylé, non natif) */
  #sbpop{display:none;position:fixed;z-index:3900;width:min(320px,calc(100vw - 24px));max-height:min(60vh,420px);overflow-y:auto;background:var(--panel2);border:1px solid var(--warn-line);border-radius:10px;box-shadow:0 12px 40px var(--shadow);padding:10px 12px}
  #sbpop.on{display:block}
  #sbpop .sbhd{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--warn);font-weight:700;margin:0 0 8px}
  #sbpop .sbrow{border-top:1px solid var(--line);padding:8px 0}
  #sbpop .sbrow:first-of-type{border-top:none;padding-top:0}
  #sbpop .sbtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
  #sbpop .sbname{font-weight:600;font-size:13px;color:var(--acc);text-decoration:none;overflow-wrap:anywhere}
  #sbpop .sbname:hover{text-decoration:underline}
  #sbpop .sbadd{flex:none;background:none;border:1px solid var(--acc);color:var(--acc);border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
  #sbpop .sbadd:hover{background:var(--acc);color:var(--on-acc)}
  #sbpop .sbadd.added{background:var(--ok);border-color:var(--ok);color:var(--on-acc)}
  #sbpop .sbwhy{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px}
  #sbpop .sbtag{font-size:10px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--txt2)}
  #sbpop .sbempty{color:var(--mut);font-size:12px}
  .tag{display:inline-block;font-size:10px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin:3px 3px 0 0;color:var(--txt2)}
  .empty{color:var(--mut);padding:40px;text-align:center}
  #loadmore{display:none;align-items:center;justify-content:center;gap:8px;padding:18px;color:var(--mut);font-size:13px}
  .spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
  @keyframes spin{to{transform:rotate(360deg)}}
  /* Overlay « recherche en cours » : assombrit le pane de résultats + boîte centrée avec
     spinner. `position:fixed` calé au show sur le rect VISIBLE de `.results` (showSearching)
     → la boîte reste centrée dans la fenêtre du pane malgré le scroll interne. */
  #searchov{position:fixed;display:none;z-index:1500;align-items:center;justify-content:center;
    background:var(--overlay);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
  #searchov.on{display:flex}
  #searchov .sbox{display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--panel2);
    border:1px solid var(--line);border-radius:14px;padding:24px 34px;box-shadow:0 16px 48px var(--shadow);
    color:var(--txt2);font-size:13px;font-weight:600;letter-spacing:.02em}
  #searchov .bigspin{width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--acc);
    border-radius:50%;animation:spin .7s linear infinite}
  #vmodal{display:none;position:fixed;inset:0;z-index:3000;background:var(--overlay);align-items:center;justify-content:center}
  #vmodal .vbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:min(880px,92vw);max-height:86vh;overflow:hidden}
  #vmodal .vhead{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
  #vmodal .vhead b{font-size:14px}
  #vmodal .vhead button{background:none;border:none;color:var(--mut);font-size:20px;cursor:pointer}
  #vmodal .vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:max-content;align-content:start;gap:12px;padding:16px;max-height:calc(86vh - 56px);overflow-y:auto}
  #vmodal .vitem{cursor:pointer;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--input)}
  #vmodal .vitem:hover{border-color:var(--acc)}
  #vmodal .vitem img{width:100%;display:block;aspect-ratio:63/88;min-height:220px;object-fit:contain;background:var(--input)}
  #vmodal .vitem .vc{padding:5px 7px;font-size:11px;color:var(--mut)}
  #vmodal .vitem .vc b{color:var(--txt);font-weight:600}
  #zoom{position:fixed;display:none;z-index:3600;pointer-events:none;width:340px}
  #zoom img{width:100%;display:block;border-radius:14px;box-shadow:0 12px 44px var(--shadow)}
  .abtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--acc);color:var(--acc);font-size:12px;font-weight:700;cursor:help;user-select:none;margin-left:-4px}
  .abtn:hover,.abtn:focus{background:var(--acc);color:var(--on-acc);outline:none}
  /* Bouton clavier : un peu plus large que la pastille (?) pour loger le symbole ⌨. */
  #kbdbtn{width:auto;min-width:20px;padding:0 4px;border-radius:9px;font-size:12px}
  /* Popover d'aide des raccourcis (survol/focus), ancrée en haut à droite. */
  #kbdpop{display:none;position:fixed;top:46px;right:12px;z-index:4000;background:var(--panel2);
    border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px var(--shadow);
    padding:12px 14px;min-width:240px;max-width:min(360px,calc(100vw - 24px));text-align:left;
    max-height:calc(100vh - 60px);overflow-y:auto}
  #kbdpop.on{display:block}
  #kbdpop h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
  /* Sous-titre de groupe (raccourcis rangés par panneau où ils s'appliquent). */
  #kbdpop .kbd-grp{margin:11px 0 3px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
    color:var(--acc);font-weight:700;border-top:1px solid var(--line);padding-top:8px}
  #kbdpop .kbd-grp:first-of-type{margin-top:2px;border-top:0;padding-top:0}
  #kbdpop .kbd-row{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:13px}
  #kbdpop kbd{flex:0 0 auto;min-width:22px;text-align:center;background:var(--input);border:1px solid var(--line);
    border-bottom-width:2px;border-radius:5px;padding:2px 7px;font:600 12px/1.5 system-ui,Segoe UI,Roboto,sans-serif;color:var(--txt2)}
  #kbdpop .kbd-desc{color:var(--txt)}
  #aboutpop{display:none;position:fixed;inset:0;z-index:3800;background:var(--overlay);align-items:center;justify-content:center;pointer-events:none}
  #aboutpop.on{display:flex}
  /* pointer-events:auto UNIQUEMENT sur la carte : le fond (#aboutpop) reste
     traversant, mais les liens de crédits doivent être cliquables — sinon la
     popover se dérobe dès qu'on quitte le bouton « ? ». Voir wireAbout(). */
  .aboutcard{width:min(420px,86vw);aspect-ratio:692/552;border-radius:16px;border:1px solid var(--line);box-shadow:0 18px 60px var(--shadow);background:#fff center/cover no-repeat;background-image:url("/about-bg.jpg");position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;pointer-events:auto;max-height:88vh}
  .aboutfoot{width:100%;background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.62) 62%,rgba(0,0,0,0))}
  .aboutver{width:100%;text-align:center;padding:10px 0 2px;font-size:15px;font-weight:700;letter-spacing:.05em;color:#fff}
  /* Couleurs en dur assumées ici (comme .aboutver avant) : le texte est posé sur
     une PHOTO, les tokens de thème n'y garantiraient pas la lisibilité. */
  .aboutsrc{padding:0 12px 9px;text-align:center;font-size:11px;line-height:1.7;color:rgba(255,255,255,.72)}
  .aboutsrc span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
  .aboutsrc i{font-style:normal;opacity:.45;margin:0 4px}
  .aboutsrc a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
  .aboutsrc a:hover,.aboutsrc a:focus{border-bottom-color:#fff}
  .aclist{position:fixed;display:none;z-index:1500;max-height:280px;overflow-y:auto;background:var(--input);border:1px solid var(--acc);border-radius:6px;box-shadow:0 8px 24px var(--shadow)}
  .acitem{padding:6px 9px;font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .acitem:hover,.acitem.sel{background:var(--panel2)}
  .flip{position:absolute;top:6px;right:6px;z-index:5;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:rgba(15,18,25,.88);color:var(--txt);font-size:13px;cursor:pointer;line-height:1;padding:0}
  .flip:hover{border-color:var(--acc)}
  .card>.addbtn{position:absolute;top:6px;left:6px;z-index:6;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:rgba(15,18,25,.88);color:var(--acc);font-size:17px;font-weight:700;cursor:pointer;line-height:1;padding:0}
  .card>.addbtn:hover{border-color:var(--acc);background:var(--acc);color:var(--on-acc)}
  .card>.addbtn.added{background:var(--ok);color:var(--on-acc);border-color:var(--ok)}
  /* Bouton « + collection » (même facture que .addbtn), sous le − ; badge « possédé ». */
  .card>.colbtn{position:absolute;top:66px;left:6px;z-index:6;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:rgba(15,18,25,.88);color:var(--txt);font-size:14px;font-weight:700;cursor:pointer;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
  .card>.colbtn:hover{border-color:var(--acc);background:var(--acc);color:var(--on-acc)}
  .card>.colbtn.added{background:var(--ok);color:var(--on-acc);border-color:var(--ok)}
  /* Bouton « + collection, version inconnue » (même facture que .colbtn), à droite de .colbtn. */
  .card>.colunknownbtn{position:absolute;top:66px;left:36px;z-index:6;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:rgba(15,18,25,.88);color:var(--txt);font-size:13px;font-weight:700;cursor:pointer;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
  .card>.colunknownbtn:hover{border-color:var(--acc);background:var(--acc);color:var(--on-acc)}
  .card>.colunknownbtn.added{background:var(--ok);color:var(--on-acc);border-color:var(--ok)}
  .card>.ownbadge{position:absolute;top:6px;right:38px;z-index:6;min-width:20px;height:20px;padding:0 6px;border-radius:11px;background:var(--panel2);border:1px solid var(--acc);color:var(--acc);font-size:12px;font-weight:700;line-height:18px;text-align:center;pointer-events:auto;cursor:help;box-shadow:0 2px 6px var(--shadow)}
  /* Section « Manquantes / liste de courses » du volet deck (corps ; l'en-tête réutilise mtgd-sec-*). */
  .mtgd-hn-body{padding:4px 2px}
  .mtgd-hn-empty,.mtgd-hn-ok{color:var(--mut);font-size:13px;padding:8px 2px}
  .mtgd-hn-ok{color:var(--ok)}
  .mtgd-hn-sub{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:10px 0 4px}
  .mtgd-hn-row,.mtgd-hn-shop-row{display:flex;gap:8px;align-items:baseline;font-size:12px;padding:3px 0;border-bottom:1px solid var(--line)}
  .mtgd-hn-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
  .mtgd-hn-have{color:var(--mut);flex:0 0 auto}
  .mtgd-hn-need{color:var(--bad);flex:0 0 auto}
  .mtgd-hn-qty,.mtgd-hn-unit{color:var(--mut);flex:0 0 auto}
  .mtgd-hn-cost{color:var(--txt);flex:0 0 auto;font-weight:700;min-width:56px;text-align:right}
  .mtgd-hn-totals{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid var(--acc);font-size:13px}
  .mtgd-hn-totals b{color:var(--acc)}
  .help{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--acc);color:var(--acc);font-size:11px;font-weight:700;cursor:help;position:relative;text-transform:none}
  .help .pop{display:none;position:fixed;left:374px;top:52px;width:min(720px,calc(100vw - 24px));max-height:calc(100vh - 72px);overflow-y:auto;overflow-x:hidden;overflow-wrap:anywhere;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;z-index:1000;box-shadow:0 12px 40px var(--shadow);text-align:left;font-weight:400;text-transform:none;letter-spacing:normal;cursor:auto}
  .pop h4{margin:0 0 6px;font-size:13px;color:var(--txt)}
  .pop p{margin:0 0 10px;font-size:12px;color:var(--mut);line-height:1.5}
  .pop table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px}
  .pop td{padding:4px 14px 4px 0;vertical-align:top;border-top:1px solid var(--line)}
  /* La colonne de gauche DOIT pouvoir passer à la ligne : avec `table-layout:fixed`
     sa largeur est IMPOSÉE, donc un `white-space:nowrap` faisait DÉBORDER les clés
     longues par-dessus la colonne de droite (mesuré : « trig: eff: acost: akind:
     ability: » réclamait 200 px pour 150 px de cellule → textes superposés). */
  .pop td.k{width:30%;white-space:normal;overflow-wrap:anywhere;color:var(--acc);font-family:ui-monospace,Consolas,monospace;font-size:11px}
  .pop td.v{color:var(--txt2)}
  /* Puces de tags fonctionnels (ligne `otag:` dynamique) + libellé « N plus fréquents ». */
  .pop td.v code{display:inline-block;background:var(--input);border:1px solid var(--line);border-radius:4px;
    padding:0 5px;margin:2px 3px 0 0;color:var(--acc);font-family:ui-monospace,Consolas,monospace;font-size:11px}
  .pop td.v .oth{color:var(--mut);font-weight:600}
  /* Exemples : requête pleine largeur (elle peut faire 120 caractères) puis son
     explication — pas de colonnes, donc rien à faire déborder. */
  .pop h4.exh{margin:14px 0 6px;padding-top:10px;border-top:1px solid var(--line)}
  .pop .ex{padding:7px 0}
  .pop .ex+.ex{border-top:1px solid var(--line)}
  .pop .ex code{display:block;margin-bottom:4px;color:var(--acc);font-family:ui-monospace,Consolas,monospace;font-size:11px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
  .pop .ex span{display:block;color:var(--txt2);font-size:12px;line-height:1.5}
  /* ===== Écran fiche carte dédié (routable /card/:oid) ===== */
  .detail{padding:16px 22px;overflow-y:auto;height:calc(100vh - 50px)}
  .dback{margin-bottom:14px}
  .dbackbtn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
  .dbackbtn:hover{border-color:var(--acc);color:var(--acc)}
  .dgrid{display:grid;grid-template-columns:340px 1fr;gap:26px;align-items:start;max-width:1100px}
  @media(max-width:760px){.dgrid{grid-template-columns:1fr}}
  .dimgcol{position:sticky;top:0}
  .dimg{width:100%;border-radius:16px;display:block;background:var(--input);box-shadow:0 12px 40px var(--shadow)}
  .dimg+.dimg{margin-top:12px}
  .dtitle{font-size:24px;font-weight:700;margin:0 0 2px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
  .dtitle .dmana{font-size:16px;color:var(--mut);font-weight:500}
  .dtype{color:var(--txt2);font-size:15px;margin:2px 0 12px}
  .doracle{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
  .dflavor{color:var(--mut);font-style:italic;margin-top:10px;white-space:pre-wrap}
  .dstats{display:flex;flex-wrap:wrap;gap:8px 22px;margin:12px 0;font-size:13px;color:var(--txt2)}
  .dstats b{color:var(--txt);font-weight:600}
  .dpt{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:3px 10px;font-weight:700;color:var(--txt);font-size:15px}
  .dsec{margin-top:20px}
  .dsec>h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:0 0 8px;border-top:1px solid var(--line);padding-top:12px}
  .dchips{display:flex;flex-wrap:wrap;gap:6px}
  .dchip{font-size:12px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:3px 9px;color:var(--txt2)}
  .dchip.otag{background:#2a2338;border-color:#463a5e;color:#d3c3ef}
  .dleg{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
  .legrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px}
  .legrow .lf{color:var(--txt);text-transform:capitalize}
  .legbadge{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:5px;padding:3px 8px;border:1px solid}
  .legbadge.legal{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
  .legbadge.not_legal{color:var(--mut);background:var(--panel2);border-color:var(--line)}
  .legbadge.banned{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
  .legbadge.restricted{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
  .dab{border:1px solid var(--line);border-radius:8px;padding:8px 11px;margin-bottom:8px;background:var(--panel2);font-size:13px}
  .dab .abk{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--acc);font-weight:700;margin-bottom:3px}
  .dab .abmeta{color:var(--mut);font-size:12px;margin-top:4px}
  /* Section repliable « Actions & règles » : glossaire des mots-clés détectés. */
  .drules>summary{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:0 0 8px;border-top:1px solid var(--line);padding-top:12px;cursor:pointer;list-style:none;font-weight:700}
  .drules>summary::-webkit-details-marker{display:none}
  .drules>summary::before{content:"▾ ";color:var(--acc)}
  .drules:not([open])>summary::before{content:"▸ "}
  .drules-body{display:flex;flex-direction:column;gap:6px}
  .drule{border:1px solid var(--line);border-radius:8px;padding:8px 11px;background:var(--panel2);font-size:13px}
  .drule-t{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--acc);font-weight:700;margin-bottom:3px}
  .drule-d{color:var(--txt2);line-height:1.45}
  .dprices{display:flex;gap:10px;flex-wrap:wrap}
  .dprice{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:14px;color:var(--txt)}
  .dprice small{color:var(--mut);font-size:11px;display:block}
  .dflags{display:flex;flex-wrap:wrap;gap:6px}
  .dflag{font-size:11px;font-weight:600;background:var(--acc);color:var(--on-acc);border-radius:6px;padding:3px 9px}
  .dvers{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
  .dvitem{cursor:pointer;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--input)}
  .dvitem:hover{border-color:var(--acc)}
  .dvitem.sel{border-color:var(--acc);box-shadow:0 0 0 2px var(--focus)}
  .dvitem img{width:100%;display:block;aspect-ratio:63/88;object-fit:contain;background:var(--input)}
  .dvitem .vc{padding:4px 6px;font-size:10px;color:var(--mut)}
  .dvitem .vc b{color:var(--txt);font-weight:600}
  .daddbtn{background:var(--acc);color:var(--on-acc);border:none;border-radius:8px;padding:10px 18px;font-weight:700;font-size:14px;cursor:pointer;margin-top:6px}
  .daddbtn:hover{filter:brightness(1.06)}
  .daddbtn.added{background:var(--ok)}
  .daddrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .daddrow .daddbtn{margin-top:0}
  .daddbtn.dcoladd{background:var(--panel2);color:var(--txt);border:1px solid var(--acc)}
  .daddbtn.dcoladd:hover{background:var(--acc);color:var(--on-acc)}
  .daddbtn.dcoladd.added{background:var(--ok);color:var(--on-acc);border-color:var(--ok)}
  .card>.detailbtn{position:absolute;top:36px;right:6px;z-index:6;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:rgba(15,18,25,.88);color:var(--txt);font-size:13px;font-weight:700;cursor:pointer;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
  .card>.detailbtn:hover{border-color:var(--acc);color:var(--acc)}
  .card .n .cardname{color:var(--txt);text-decoration:none;cursor:pointer}
  .card .n .cardname:hover{color:var(--acc);text-decoration:underline}
  /* ===== Dialogue de maintenance (triple-clic sur le titre du header) ===== */
  #mntpop{display:none;position:fixed;inset:0;z-index:3850;background:var(--overlay);align-items:center;justify-content:center}
  #mntpop.on{display:flex}
  #mntpop .mntbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:min(520px,94vw);max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 60px var(--shadow)}
  #mntpop .mnthead{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
  #mntpop .mnthead b{font-size:15px;color:var(--txt)}
  #mntpop .mnthead button{background:none;border:none;color:var(--mut);font-size:22px;cursor:pointer;line-height:1;padding:0}
  #mntpop .mnthead button:hover{color:var(--txt)}
  #mntpop .mntbody{padding:16px;overflow-y:auto}
  #mntpop .mnt-total{font-size:22px;font-weight:700;color:var(--txt);margin-bottom:2px}
  #mntpop .mnt-sub{color:var(--mut);font-size:12px;margin-bottom:10px}
  #mntpop .mnt-bar{height:10px;border-radius:6px;background:var(--input);border:1px solid var(--line);overflow:hidden;margin-bottom:12px}
  #mntpop .mnt-bar-fill{height:100%;transition:width .3s ease}
  #mntpop .mnt-bar-fill.ok{background:var(--ok)}
  #mntpop .mnt-bar-fill.warn{background:var(--warn)}
  #mntpop .mnt-bar-fill.bad{background:var(--bad)}
  #mntpop .mnt-break{list-style:none;margin:0 0 14px;padding:0}
  #mntpop .mnt-break li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line);font-size:13px;color:var(--txt2)}
  #mntpop .mnt-break li b{color:var(--txt);font-weight:600;white-space:nowrap}
  #mntpop .mnt-quota{display:flex;gap:8px;align-items:flex-end;margin-bottom:14px}
  #mntpop .mnt-quota label{flex:1;color:var(--mut);font-size:11px}
  #mntpop .mnt-quota input{margin-top:4px}
  #mntpop .mnt-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
  #mntpop button.mnt-btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer}
  #mntpop button.mnt-btn:hover{border-color:var(--acc);color:var(--acc)}
  #mntpop button.mnt-btn.act{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
  #mntpop button.mnt-btn.act:hover{filter:brightness(1.06);color:var(--on-acc)}
  #mntpop button.mnt-btn.danger{color:var(--bad);border-color:var(--bad-line)}
  #mntpop button.mnt-btn.danger:hover{background:var(--bad);color:var(--on-acc);border-color:var(--bad)}
  #mntpop button.mnt-btn:disabled{opacity:.55;cursor:default;filter:none}
  #mntpop .mnt-note{font-size:12px;color:var(--mut);line-height:1.5;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
  #mntpop .mnt-msg{font-size:12px;margin:0 0 10px;min-height:16px}
  #mntpop .mnt-msg.ok{color:var(--ok)}
  #mntpop .mnt-msg.bad{color:var(--bad)}
  #mntpop .mnt-err{color:var(--bad);font-size:13px;padding:6px 0 12px}