/* ============================================================
   CrazyViki — constructeur de deck (PC, scène 1920×1080). Toutes les dimensions sont en px de scène.
   ============================================================ */
.dk{--or:#f7d774;--or2:#e0b045;--panneau:rgba(10,16,36,.72);--disp:var(--display,"Fredoka",system-ui,sans-serif);
  position:absolute;inset:0;z-index:40;overflow:hidden;color:#fff;font-family:var(--body,"Nunito",system-ui,sans-serif);user-select:none;-webkit-user-select:none;
  background:radial-gradient(ellipse at 50% 0%,#1b2a5a 0%,#0c1330 55%,#070b1d 100%);animation:dk-entree .35s ease-out both}
@keyframes dk-entree{from{opacity:0}to{opacity:1}}
.dk *{box-sizing:border-box}
.dk button{font:inherit;color:inherit;cursor:pointer}
.dk-haut{position:absolute;left:0;width:1200px;top:0;height:84px;display:flex;align-items:center;gap:18px;padding:0 36px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.dk-titre{font-family:var(--disp);font-weight:700;font-size:34px;display:flex;align-items:center;gap:12px}
.dk-titre small{font-size:20px;font-weight:600;opacity:.7}
.dk-esp{flex:1}
.dk-btn{font-family:var(--disp);font-weight:600;font-size:21px;background:rgba(255,255,255,.1);border:2px solid var(--or2);border-radius:999px;padding:9px 24px;backdrop-filter:blur(4px);transition:.15s}
.dk-btn:hover:not(:disabled){background:rgba(247,215,116,.22)}
.dk-btn.dk-principal{background:linear-gradient(#f7d774,#d9a21f);color:#2a1d00;border-color:#fff2b8;box-shadow:0 0 18px rgba(247,215,116,.45)}
.dk-btn.dk-principal:hover:not(:disabled){filter:brightness(1.08);background:linear-gradient(#f7d774,#d9a21f)}
.dk-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.dk-col-coll{position:absolute;left:36px;top:96px;width:1164px;bottom:30px;display:flex;flex-direction:column;gap:12px}
.dk-col-deck{position:absolute;left:1224px;top:22px;width:660px;bottom:30px;display:flex;flex-direction:column;gap:10px}
.dk-pan{background:var(--panneau);border:2px solid rgba(224,176,69,.55);border-radius:20px;backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
/* filtres */
.dk-filtres{padding:12px 16px;display:flex;flex-direction:column;gap:9px}
.dk-l1{display:flex;gap:12px;align-items:center}
.dk-rech{flex:1;min-width:0;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2);border-radius:12px;color:#fff;font:600 19px var(--body,"Nunito");padding:8px 14px;outline:none;user-select:text;-webkit-user-select:text}
.dk-rech:focus{border-color:var(--or2)}
.dk-sel{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2);border-radius:12px;color:#fff;font:700 18px var(--body,"Nunito");padding:8px 12px}
.dk-sel option{color:#111}
.dk-puces{display:flex;flex-wrap:wrap;gap:7px}
.dk-puce{font:700 16px var(--body,"Nunito");background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 12px;display:flex;gap:6px;align-items:center;white-space:nowrap}
.dk-puce.on{background:rgba(247,215,116,.2);border-color:var(--or)}
.dk-puce i{width:11px;height:11px;border-radius:50%;background:var(--c,#999);display:inline-block}
/* collection */
.dk-grille-wrap{flex:1;min-height:0;padding:14px 12px 14px 16px;display:flex;flex-direction:column}
.dk-grille-info{font-weight:700;font-size:17px;opacity:.8;margin:0 0 8px 2px;display:flex;justify-content:space-between}
.dk-grille{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:16px 12px;align-content:start;padding:6px 8px 12px 2px}
.dk-grille::-webkit-scrollbar{width:10px}.dk-grille::-webkit-scrollbar-thumb{background:rgba(247,215,116,.45);border-radius:8px}
.dk-vide{grid-column:1/-1;opacity:.7;font:700 20px var(--body,"Nunito");padding:30px}
.dk-plus{grid-column:1/-1;justify-self:center;font-size:18px}
.dk-cc{position:relative;border:0;background:none;padding:0;border-radius:10px;transition:transform .12s}
.dk-cc:hover{transform:translateY(-4px) scale(1.04);z-index:3}
.dk-cc .hs{pointer-events:none}
.dk-cc.dans .hs{filter:grayscale(.8) brightness(.45)}
.dk-cc.dans::after{content:"✔ DANS LE DECK";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 15px var(--disp);letter-spacing:.06em;background:rgba(10,16,36,.85);border:2px solid var(--or);color:var(--or);border-radius:999px;padding:5px 11px;white-space:nowrap}
.dk-cc.bloque:not(.dans) .hs{filter:saturate(.5) brightness(.75)}
.dk-cc.secoue{animation:dk-sec .35s}
@keyframes dk-sec{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
/* decks */
.dk-tabs{display:flex;gap:10px;align-items:stretch}
.dk-tab{flex:1;font-family:var(--disp);font-weight:600;font-size:21px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.2);border-radius:16px;padding:8px 10px;text-align:center;position:relative;line-height:1.15;cursor:pointer;min-width:0}
.dk-tab small{display:block;font:700 14px var(--body,"Nunito");opacity:.75}
.dk-tab.on{background:rgba(247,215,116,.2);border-color:var(--or)}
.dk-tab.sale small{color:var(--or);opacity:1}
.dk-tab.inc small{color:#ff9a9a;opacity:1}
.dk-etoile{position:absolute;right:10px;top:7px;color:var(--or);font-size:20px}
.dk-crayon{position:absolute;left:6px;top:5px;background:none;border:0;font-size:16px;padding:2px 4px;opacity:.7;cursor:pointer}
.dk-crayon:hover{opacity:1}
.dk-ren{width:78%;font:600 19px var(--disp);text-align:center;background:rgba(0,0,0,.35);color:#fff;border:2px solid var(--or);border-radius:8px;padding:0 4px;user-select:text;-webkit-user-select:text}
.dk-alerte{display:flex;flex-direction:column;gap:6px}
.dk-alerte:empty{display:none}
.dk-note{padding:4px 12px;border-radius:12px;background:rgba(91,155,255,.16);border:2px solid #6aa5ff;font:700 15px var(--body,"Nunito");display:flex;gap:8px;align-items:center}
.dk-note.err{background:rgba(255,90,90,.18);border-color:#ff7b7b}
.dk-jauges{padding:10px 12px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.dk-jauge{border-radius:12px;background:rgba(255,255,255,.06);border:2px solid color-mix(in srgb,var(--c) 70%,transparent);padding:6px 4px 7px;text-align:center}
.dk-jauge b{display:block;font:800 25px var(--disp);color:var(--c);line-height:1}
.dk-jauge span{display:block;font:700 14px var(--body,"Nunito");opacity:.9;margin-top:2px}
.dk-jauge em{display:block;font:700 12px var(--body,"Nunito");font-style:normal;color:var(--or);height:14px}
.dk-jauge.plein{background:color-mix(in srgb,var(--c) 22%,transparent)}
.dk-jauge.plein b::after{content:" ✔";font-size:19px}
.dk-slots{--sw:106px;flex:1;min-height:0;overflow:hidden;padding:12px 14px;display:grid;grid-template-columns:repeat(5,var(--sw));grid-auto-rows:min-content;justify-content:center;align-content:space-evenly;gap:12px 12px}
.dk-sl{position:relative;aspect-ratio:63/88;border-radius:10px;width:var(--sw)}
.dk-sl.vide{border:3px dashed rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font:800 26px var(--disp);color:rgba(255,255,255,.3);background:rgba(255,255,255,.03)}
.dk-sl.perdue{border:3px dashed #ff6b6b;background:rgba(255,80,80,.12);color:#ff9a9a;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font:800 14px var(--body,"Nunito");padding:6px;gap:4px}
.dk-sl.perdue b{font-size:28px}
.dk-sl.plein{border:0;background:none;padding:0;transition:transform .12s}
.dk-sl.plein:hover{transform:translateY(-4px) scale(1.05);z-index:3}
.dk-sl.plein:hover::after{content:"✕ Retirer";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 15px var(--disp);background:rgba(120,10,20,.92);border:2px solid #ff8a8a;border-radius:999px;padding:5px 11px;white-space:nowrap}
.dk-sl .hs{pointer-events:none}
.dk-bas{padding:8px 14px;display:flex;flex-direction:column;gap:10px}
.dk-l-stats{display:flex;align-items:center;gap:22px}
.dk-l-btn{display:flex;gap:8px;flex-wrap:nowrap}
.dk-bas .dk-btn{font-size:16px;padding:6px 10px;white-space:nowrap}
.dk-stat{display:flex;flex-direction:column;line-height:1.1}
.dk-stat b{font:800 30px var(--disp);color:var(--or)}
.dk-stat span{font:700 14px var(--body,"Nunito");opacity:.75}
.dk-valide{flex:1;font:800 19px var(--disp);text-align:right}
.dk-valide.ok{color:#7dffb2}.dk-valide.ko{color:#ffd37a}.dk-valide.err{color:#ff9a9a}
/* messages */
.dk-toast{position:absolute;left:36px;width:1164px;bottom:44px;display:flex;justify-content:center;pointer-events:none;z-index:50;opacity:0;transition:.25s;font:700 22px var(--disp)}
.dk-toast.on{opacity:1}
.dk-toast span{background:rgba(10,16,36,.96);border:2px solid var(--or);border-radius:999px;padding:12px 30px}
.dk-voile{position:absolute;inset:0;z-index:60;background:rgba(3,6,16,.72);display:flex;align-items:center;justify-content:center}
.dk-boite{background:#0f1738;border:2px solid var(--or);border-radius:22px;padding:28px 34px;width:640px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.dk-boite h3{font:700 30px var(--disp);margin:0 0 10px}
.dk-boite p{font:600 19px var(--body,"Nunito");opacity:.9;margin:0 0 20px}
.dk-boite-btn{display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================
   SMARTPHONE (portrait d'abord) — 26/10/2026. Même écran que sur PC, rangé en colonne :
   en-tête · 3 decks · jauges · bascule « Mon deck / Ajouter des cartes » · la vue choisie (défile) · barre du bas toujours visible.
   Ici les dimensions sont en px d'écran (pas en px de scène).
   ============================================================ */
.dk-vues,.dk-f-btn{display:none}
.dk.dk-tel{position:fixed;inset:0;display:flex;flex-direction:column;gap:6px;padding:max(6px,env(safe-area-inset-top)) 8px max(6px,env(safe-area-inset-bottom));z-index:60;overscroll-behavior:contain}
.dk-tel .dk-col-coll,.dk-tel .dk-col-deck{display:contents}
.dk-tel .dk-haut{order:0;position:static;width:auto;height:auto;padding:2px 2px 0;background:none;gap:8px}
.dk-tel .dk-titre{font-size:22px;gap:6px}.dk-tel .dk-titre small{font-size:14px}
.dk-tel .dk-btn{font-size:14px;padding:6px 12px;border-width:2px}
.dk-tel .dk-pan{border-radius:14px;border-width:1.5px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
/* 3 decks */
.dk-tel .dk-tabs{order:1;gap:6px}
.dk-tel .dk-tab{font-size:14px;border-radius:12px;padding:6px 4px 5px;border-width:1.5px}
.dk-tel .dk-tab small{font-size:11px}
.dk-tel .dk-etoile{right:5px;top:3px;font-size:13px}
.dk-tel .dk-crayon{left:2px;top:1px;font-size:12px}
.dk-tel .dk-ren{font-size:14px;width:80%}
.dk-tel .dk-alerte{order:2;gap:4px}
.dk-tel .dk-note{font-size:12px;padding:3px 8px;border-radius:10px;border-width:1.5px}
/* jauges : 6 petites cases */
.dk-tel .dk-jauges{order:3;padding:5px;gap:4px}
.dk-tel .dk-jauge{border-radius:8px;border-width:1.5px;padding:3px 1px 2px}
.dk-tel .dk-jauge b{font-size:15px}
.dk-tel .dk-jauge.plein b::after{font-size:11px}
.dk-tel .dk-jauge span{font-size:10px;margin-top:0}
.dk-tel .dk-jauge em{font-size:8.5px;height:10px;line-height:10px;white-space:nowrap;overflow:hidden}
/* bascule des deux vues */
.dk-tel .dk-vues{order:4;display:flex;gap:4px;background:rgba(255,255,255,.07);border:1.5px solid rgba(224,176,69,.55);border-radius:999px;padding:3px}
.dk-tel .dk-vues button{flex:1;border:0;background:none;border-radius:999px;padding:8px 4px;font:700 14px var(--disp);white-space:nowrap}
.dk-tel .dk-vues button[aria-selected="true"]{background:linear-gradient(#f7d774,#d9a21f);color:#2a1d00}
.dk-tel .dk-vues b{font-size:12px;opacity:.85}
.dk-tel[data-vue="deck"] .dk-filtres,.dk-tel[data-vue="deck"] .dk-grille-wrap,.dk-tel[data-vue="coll"] .dk-slots{display:none}
/* vue « Mon deck » : 4 cartes par ligne, ça défile ; toucher une carte la retire (petit ✕) */
.dk-tel .dk-slots{order:5;flex:1;min-height:0;overflow-y:auto;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;justify-content:stretch;gap:10px 6px;padding:10px 8px}
.dk-tel .dk-sl{width:auto;border-radius:7px}
.dk-tel .dk-sl.vide{font-size:16px;border-width:2px}
.dk-tel .dk-sl.perdue{font-size:10px;border-width:2px;padding:3px}.dk-tel .dk-sl.perdue b{font-size:18px}
.dk-tel .dk-sl.plein:hover{transform:none}
.dk-tel .dk-sl.plein:hover::after,.dk-tel .dk-sl.plein::after{display:none;content:"✕";position:absolute;left:auto;right:-5px;top:-5px;transform:none;width:22px;height:22px;padding:0;display:grid;place-items:center;font:800 12px var(--body,"Nunito");background:rgba(150,15,30,.95);border:2px solid #ffb3b3;border-radius:50%;z-index:4}
.dk-tel .dk-sl.plein:active{transform:scale(.94)}
/* vue « Ajouter des cartes » : recherche + filtres repliables, 3 cartes par ligne */
.dk-tel .dk-filtres{order:5;padding:6px;gap:6px}
.dk-tel .dk-l1{flex-wrap:wrap;gap:6px}
.dk-tel .dk-rech{order:0;flex:1 1 0;min-width:0;font-size:16px;padding:7px 10px;border-radius:10px;border-width:1.5px}   /* 16px : pas de zoom automatique du navigateur */
.dk-tel .dk-f-btn{display:flex;order:1;flex:none}   /* toujours à droite de la recherche, filtres ouverts ou fermés (Jérôme, 26/10 23h12) */
.dk-tel .dk-l1 .dk-sel{order:2}
.dk-tel .dk-l1 .dk-puce:not(.dk-f-btn){order:3}
.dk-tel .dk-puce{font-size:13px;padding:4px 10px;border-width:1.5px}
.dk-tel .dk-sel{font-size:14px;padding:6px 8px;border-radius:10px;border-width:1.5px;flex:1 1 100%}
.dk-tel .dk-filtres:not(.ouvert) .dk-sel,.dk-tel .dk-filtres:not(.ouvert) .dk-l1 .dk-puce:not(.dk-f-btn),.dk-tel .dk-filtres:not(.ouvert) .dk-puces{display:none}
.dk-tel .dk-puces{gap:5px}
.dk-tel .dk-grille-wrap{order:6;flex:1;min-height:0;padding:6px 4px 6px 6px}
.dk-tel .dk-grille-info{font-size:12px;margin:0 2px 4px;gap:6px}
.dk-tel .dk-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 6px;padding:4px 4px 10px 0}
.dk-tel .dk-cc:hover{transform:none}
.dk-tel .dk-cc:active{transform:scale(.95)}
.dk-tel .dk-cc.dans::after{content:"✔ DANS LE DECK";font-size:9px;padding:3px 6px;border-width:1.5px;letter-spacing:.02em}
.dk-tel .dk-vide{font-size:15px;padding:16px}
.dk-tel .dk-plus{font-size:14px}
/* barre du bas : toujours visible */
.dk-tel .dk-bas{order:9;padding:6px 8px;gap:6px}
.dk-tel .dk-l-stats{gap:12px}
.dk-tel .dk-stat b{font-size:18px}.dk-tel .dk-stat span{font-size:10px}
.dk-tel .dk-valide{font-size:13px;line-height:1.2}
.dk-tel .dk-l-btn{gap:5px}
.dk-tel .dk-bas .dk-btn{flex:1 1 0;min-width:0;font-size:13px;padding:8px 2px;white-space:nowrap}
.dk-tel .dk-bas .dk-btn[data-a="vider"]{flex:0 0 42px}
.dk-tel .dk-l-btn .dk-esp{display:none}
/* messages */
.dk-tel .dk-toast{position:fixed;left:8px;right:8px;width:auto;bottom:calc(112px + env(safe-area-inset-bottom));font-size:14px}
.dk-tel .dk-toast span{padding:8px 16px;text-align:center}
.dk-tel .dk-voile{position:fixed}
.dk-tel .dk-boite{width:auto;max-width:calc(100vw - 24px);padding:18px 16px;border-radius:16px}
.dk-tel .dk-boite h3{font-size:20px}.dk-tel .dk-boite p{font-size:14px;margin-bottom:14px}
.dk-tel .dk-boite-btn{flex-direction:column;gap:8px}.dk-tel .dk-boite-btn .dk-btn{font-size:15px;padding:10px}
/* (les auras animées des cartes sont coupées dans les petites grilles : fluidité) */
.dk-tel .dk-grille .hs,.dk-tel .dk-slots .hs{animation:none!important}

/* (26/10 23h23) cartes plus grandes, vrai nombre de caractères sous la carte, 1 appui = voir, 2 appuis = ajouter / retirer */
.dk-tel .dk-item{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0}
.dk-tel .dk-item .dk-sl{width:100%}
.dk-tel .dk-long{text-align:center;font:800 12px var(--body,"Nunito");color:var(--or);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.dk-tel .dk-sl-info{grid-column:1/-1;margin:0;text-align:center;font:700 12px var(--body,"Nunito");opacity:.75}
.dk-tel .dk-cc,.dk-tel .dk-sl{touch-action:manipulation}   /* pas de zoom du navigateur au double appui */
.dk-tel .dk-cc.dans::after{font-size:12px;padding:4px 9px}
.dk-tel ~ .voile,body:has(.dk-tel) > .voile{z-index:70}   /* la fiche de la carte s'ouvre AU-DESSUS du constructeur */
.dk-tel .dk-sl.plein::after,.dk-tel .dk-sl.plein:hover::after{content:none}   /* plus de ✕ : on retire par deux appuis */