/* ══ LES VESTIGES : la collection de cartes du site ═══════════════
   Tout est préfixé « ves- ». Les règles téléphone sont dans mobile.css.
   Niveaux d'une carte : .t0 pas obtenue (silhouette), .t1 bronze, .t2 acier, .t3 or brillant,
   .tl légendaire (holographique). */

.ves-page{ max-width:1320px; margin:0 auto; padding:22px 24px 70px; }
.ves-nav-n{ display:inline-block; min-width:18px; margin-left:6px; padding:1px 5px; border-radius:9px; font-size:11px; font-weight:800; line-height:16px; text-align:center;
  color:#2a1c02; background:linear-gradient(180deg, #ffe9a3, #f2c94c 60%, #b8860b); vertical-align:1px; }
.ves-nav-n[hidden]{ display:none; }

/* ── En-tête ── */
.ves-tete{ display:flex; align-items:center; gap:18px 24px; flex-wrap:wrap; margin-bottom:20px; }
.ves-tete-g{ display:flex; flex-direction:column; gap:4px; }
.ves-titre{ margin:0; font-family:var(--font-head, inherit); font-size:32px; letter-spacing:1.5px; line-height:1.05;
  background:linear-gradient(180deg, #fff3c4, #f2c94c 55%, #b8860b); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ves-proprio{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text2); }
.ves-proprio img{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
.ves-stats{ display:flex; gap:8px; flex-wrap:wrap; }
.ves-stat{ padding:6px 12px; border-radius:12px; background:var(--bg3); border:1px solid var(--border); font-size:12.5px; color:var(--text2); white-space:nowrap; }
.ves-stat b{ font-size:16px; color:var(--text); font-variant-numeric:tabular-nums; }
.ves-stat-l{ border-color:rgba(167,139,250,.55); background:rgba(124,58,237,.14); }
.ves-stat-l b{ color:#c4b5fd; }
.ves-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.ves-btn-pack{ animation:vesPulse 1.8s ease-in-out infinite; }
@keyframes vesPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(242,201,76,.55); } 50%{ box-shadow:0 0 0 9px rgba(242,201,76,0); } }
.ves-note{ margin-top:16px; font-size:12.5px; color:var(--text3); text-align:center; }
.ves-vide{ grid-column:1 / -1; padding:30px 10px; text-align:center; font-size:13px; color:var(--text3); }

/* ── La scène : l'album à gauche, la carte à droite ── */
.ves-scene{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(300px, .8fr); gap:34px; align-items:start; }

/* ── L'album ── */
.ves-album{ border-radius:28px; padding:14px 16px 18px; background:linear-gradient(180deg, #16223f, #0c1428); border:3px solid #26335a;
  box-shadow:0 22px 50px rgba(0,0,0,.5), inset 0 0 0 2px #070c18, inset 0 2px 0 3px rgba(255,255,255,.05); }
.ves-al-marque{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:14px 14px 4px 4px; font-family:var(--font-head, inherit); font-weight:900; font-size:22px; letter-spacing:2.5px;
  color:#ffd84a; background:linear-gradient(180deg, #2f66d8, #1d47a8); text-shadow:0 2px 0 rgba(0,0,0,.35); }
.ves-al-marque span{ font-size:20px; filter:drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.ves-al-nav{ display:flex; align-items:center; gap:10px; padding:9px 10px; background:#1a3f96; }
.ves-al-nom{ flex:1; min-width:0; text-align:center; color:#fff; }
.ves-al-nom b{ display:block; font-family:var(--font-head, inherit); font-size:18px; letter-spacing:.6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ves-al-pts{ display:flex; justify-content:center; gap:5px; margin-top:4px; }
.ves-al-pts i{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.3); }
.ves-al-pts i.on{ background:#ffd84a; box-shadow:0 0 6px #ffd84a; }
.ves-al-fl{ display:inline-flex; align-items:center; gap:7px; border:none; background:none; color:#fff; font-size:30px; font-weight:900; line-height:1; cursor:pointer; padding:0 4px; transition:transform .12s; }
.ves-al-fl:hover:not(:disabled){ transform:scale(1.15); }
.ves-al-fl:disabled{ opacity:.3; cursor:default; }
.ves-al-fl kbd{ font-family:inherit; font-size:11px; font-weight:800; padding:3px 6px; border-radius:5px; background:#0b1b45; border:1px solid rgba(255,255,255,.3); color:#fff; }
.ves-al-prog{ display:flex; align-items:center; gap:12px; padding:9px 14px; margin-bottom:12px; border-radius:4px 4px 14px 14px; background:#16357e; color:#dbe6ff; font-size:13px; font-weight:700; }
.ves-al-barre{ flex:1; height:8px; border-radius:6px; background:#0b1b45; overflow:hidden; }
.ves-al-barre i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, #f2c94c, #ffe680); box-shadow:0 0 10px rgba(242,201,76,.7); transition:width .5s; }
.ves-al-prog b{ min-width:42px; text-align:right; font-size:15px; color:#ffd84a; font-variant-numeric:tabular-nums; }
.ves-al-prog b.plein{ text-shadow:0 0 10px #ffd84a; }

.ves-grille{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px; max-height:min(64vh, 660px); overflow-y:auto; padding:6px 6px 8px; scrollbar-width:thin; scrollbar-color:#3a4c7c transparent; }
.ves-grille.vers-d{ animation:vesGlisseD .28s ease-out; } .ves-grille.vers-g{ animation:vesGlisseG .28s ease-out; }
@keyframes vesGlisseD{ from{ opacity:0; transform:translateX(34px); } } @keyframes vesGlisseG{ from{ opacity:0; transform:translateX(-34px); } }

.ves-mini{ position:relative; display:flex; flex-direction:column; aspect-ratio:4 / 5; padding:0; border-radius:9px; cursor:pointer; overflow:hidden; font:inherit;
  border:2px solid var(--mc, #3a4460); background:var(--mb, #2a3246); transition:transform .14s, box-shadow .14s; }
.ves-mini:hover{ transform:translateY(-3px); }
.ves-mini.sel{ transform:scale(1.07); z-index:2; box-shadow:0 0 0 3px #fff, 0 10px 22px rgba(0,0,0,.55); }
.ves-mini-haut{ flex:0 0 21%; display:flex; align-items:center; justify-content:center; background:var(--ms, #222a3c); font-size:11px; line-height:1; letter-spacing:1px; color:#ffe680; text-shadow:0 1px 0 rgba(0,0,0,.45); }
.ves-mini-img{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:5%; overflow:hidden; }
.ves-mini-img img{ width:100%; height:100%; object-fit:contain; pointer-events:none; }
.ves-mini-img em{ font-style:normal; font-size:22px; font-weight:900; color:rgba(255,255,255,.18); }
.ves-mini.t0{ --mc:#46527a; --mb:#35405f; --ms:#28314b; }
.ves-mini.t0 img{ filter:grayscale(1) brightness(.12) contrast(1.6); opacity:.85; }
.ves-mini.t0 img.plein{ filter:grayscale(1) brightness(.36) contrast(1.15) blur(1.5px); opacity:1; }
.ves-mini.t1{ --mc:#b07a4f; --mb:#55617f; --ms:linear-gradient(180deg, #96623c, #744527); }
.ves-mini.t2{ --mc:#7fa8ee; --mb:#55617f; --ms:linear-gradient(180deg, #3f69bd, #284a94); }
.ves-mini.t3{ --mc:#f2c94c; --mb:#5c6788; --ms:linear-gradient(180deg, #e9b72f, #c08a12); box-shadow:0 0 12px rgba(242,201,76,.35); }
.ves-mini.t3 .ves-mini-haut{ color:#fff8d8; }
.ves-mini.t3::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%); background-size:260% 100%; animation:vesReflet 3.6s ease-in-out infinite; pointer-events:none; }
/* Légendaire : coins coupés, feuille violette changeante */
.ves-mini.leg{ border:none; clip-path:polygon(20% 0, 80% 0, 100% 15%, 100% 85%, 80% 100%, 20% 100%, 0 85%, 0 15%); background:#2a2148; padding:3px; }
.ves-mini.leg .ves-mini-haut{ background:transparent; color:#e9d5ff; font-size:14px; }
.ves-mini.leg.t0{ background:linear-gradient(160deg, #3b2f66, #241b45); }
.ves-mini.leg.t0 .ves-mini-img{ background:#1b1436; border-radius:6px; }
.ves-mini.tl{ background:linear-gradient(135deg, #7c3aed, #ec4899, #22d3ee, #a78bfa, #7c3aed); background-size:300% 300%; animation:vesHoloCadre 5s linear infinite; }
.ves-mini.tl .ves-mini-img{ background:radial-gradient(circle at 50% 40%, #6d4bd0, #2a1a5e); border-radius:6px; }
.ves-mini.tl::after{ content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(34,211,238,.35) 54%, transparent 66%); background-size:260% 100%; mix-blend-mode:screen; animation:vesReflet 2.8s ease-in-out infinite; pointer-events:none; }
.ves-mini.leg.sel{ filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 8px #c4b5fd); box-shadow:none; }
.ves-et-l{ font-size:14px; }
@keyframes vesReflet{ 0%{ background-position:130% 0; } 55%,100%{ background-position:-40% 0; } }
@keyframes vesHoloCadre{ 0%{ background-position:0% 50%; } 100%{ background-position:300% 50%; } }

/* ── La carte en grand ── */
.ves-detail{ position:sticky; top:86px; display:flex; flex-direction:column; align-items:center; gap:16px; perspective:1200px; padding-top:6px; }
.ves-detail-aide{ font-size:12.5px; color:var(--text3); text-align:center; }
/* Elle flotte toute seule (la souris ne la bouge pas) */
.ves-flotte{ width:min(356px, 100%); transform-style:preserve-3d; animation:vesFlotte 7s ease-in-out infinite; }
@keyframes vesFlotte{ 0%,100%{ transform:rotateY(-11deg) rotateX(4deg) translateY(0); } 50%{ transform:rotateY(11deg) rotateX(-3deg) translateY(-10px); } }

/* Le fond de la carte est un GABARIT (public/img/vestiges/carte_<palier>.webp) : cadre, en-tête, fenêtre de
   l'image, bandeau du nom, boîte de description. Chaque palier donne, en pourcentages de la carte, la place de
   ses zones (--t* en-tête, --i* image, --n* nom, --m* ligne période / projet, --d* description, --p* pied) :
   les gabarits n'ont pas tous les mêmes proportions. Les tailles de texte suivent la largeur de la carte (cqw). */
.ves-card{ --enc:#35315a; position:relative; width:100%; aspect-ratio:var(--ar, 1027 / 1509); container-type:inline-size; border-radius:5.2cqw;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.55)); color:var(--enc); }
.ves-card::before{ content:''; position:absolute; inset:0; background:var(--gab) center / 100% 100% no-repeat; }
.ves-card-in{ position:absolute; inset:0; }
.ves-card-top, .ves-card-img, .ves-card-nom, .ves-card-meta, .ves-card-desc, .ves-card-pied{ position:absolute; box-sizing:border-box; }
.ves-card-top{ left:var(--tx); top:var(--ty); width:var(--tw); height:var(--th); display:flex; align-items:center; justify-content:space-between; gap:2cqw; padding:0 3.2cqw 0 3.6cqw; color:#fff; }
.ves-card-marque{ max-width:63%; font-family:var(--font-head, inherit); font-weight:900; font-size:4.9cqw; letter-spacing:.45cqw; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 .5cqw 0 rgba(0,0,0,.28); opacity:.95; }
.ves-card-pts{ font-family:var(--font-head, inherit); font-weight:900; font-size:5.8cqw; white-space:nowrap; text-shadow:0 .5cqw 0 rgba(0,0,0,.28); }
.ves-card-img{ left:var(--ix); top:var(--iy); width:var(--iw); height:var(--ih); overflow:hidden; display:flex; align-items:center; justify-content:center; }
/* L'image de la carte : entière par défaut (un sujet détouré se pose sur le décor du gabarit) ; une image en
   largeur remplit la fenêtre (.plein, posé par vesAjusterImg quand elle est chargée) */
.ves-card-img img{ width:100%; height:100%; object-fit:contain; pointer-events:none; }
.ves-card-img img.plein, .ves-mini-img img.plein{ object-fit:cover; }
.ves-card-img em{ font-style:normal; font-size:20cqw; font-weight:900; color:rgba(255,255,255,.22); text-shadow:0 .6cqw 0 rgba(0,0,0,.25); }
.ves-card-et{ position:absolute; right:2.4cqw; bottom:1.2cqw; font-size:6.6cqw; letter-spacing:.6cqw; color:#ffd84a; text-shadow:0 .5cqw 0 rgba(0,0,0,.6), 0 0 2.6cqw rgba(255,216,74,.75); }
.ves-fx{ position:absolute; inset:0; pointer-events:none; }
.ves-card-nom{ left:var(--nx); top:var(--ny); width:var(--nw); height:var(--nh); display:flex; align-items:center; justify-content:center; padding:0 3cqw; text-align:center;
  font-family:var(--font-head, inherit); font-weight:900; font-size:6.6cqw; line-height:1.05; color:#fff; text-shadow:0 .55cqw 0 rgba(0,0,0,.35); }
.ves-card-nom span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ves-card-meta{ left:var(--mx); top:var(--my); width:var(--mw); height:var(--mh); display:flex; align-items:center; justify-content:space-between; gap:3cqw; font-size:4.1cqw; font-weight:800; }
.ves-card-meta span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ves-card-desc{ left:var(--dx); top:var(--dy); width:var(--dw); height:var(--dh); overflow:hidden; padding:3cqw 3.6cqw; font-size:3.85cqw; line-height:1.42; font-weight:600; }
.ves-card-non{ display:flex; align-items:center; justify-content:center; height:100%; text-align:center; opacity:.8; }
.ves-card-pied{ left:var(--px); top:var(--py); width:var(--pw); height:var(--ph); display:flex; align-items:center; justify-content:space-between; font-size:3.5cqw; font-weight:800; opacity:.72; }
.ves-holo{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; }

/* Les gabarits et la place de leurs zones (mesurées sur les images) */
.ves-card.t0{ --gab:url(../img/vestiges/carte_t0.webp); --ar:1027 / 1509;
  --tx:3.02%; --ty:1.72%; --tw:94.06%; --th:6.83%; --ix:6.91%; --iy:10.87%; --iw:86.47%; --ih:33.40%; --nx:7.11%; --ny:45.99%; --nw:86.08%; --nh:8.75%;
  --mx:7.50%; --my:55.67%; --mw:85.30%; --mh:6.36%; --dx:6.62%; --dy:62.43%; --dw:87.24%; --dh:30.55%; --px:7.50%; --py:93.31%; --pw:85.30%; --ph:4.64%; }
.ves-card.t1{ --gab:url(../img/vestiges/carte_t1.webp); --ar:1020 / 1498;
  --tx:2.65%; --ty:2.00%; --tw:94.61%; --th:6.41%; --ix:6.67%; --iy:10.88%; --iw:86.67%; --ih:33.11%; --nx:6.57%; --ny:45.86%; --nw:86.96%; --nh:8.95%;
  --mx:7.06%; --my:55.34%; --mw:85.98%; --mh:5.87%; --dx:5.78%; --dy:61.55%; --dw:88.53%; --dh:31.31%; --px:7.06%; --py:93.19%; --pw:85.98%; --ph:4.74%; }
.ves-card.t2{ --gab:url(../img/vestiges/carte_t2.webp); --ar:1048 / 1495;
  --tx:2.67%; --ty:2.07%; --tw:94.56%; --th:6.96%; --ix:6.58%; --iy:10.77%; --iw:86.93%; --ih:33.44%; --nx:6.68%; --ny:46.22%; --nw:86.74%; --nh:8.76%;
  --mx:7.25%; --my:55.38%; --mw:85.59%; --mh:4.75%; --dx:6.11%; --dy:60.40%; --dw:88.17%; --dh:32.64%; --px:7.25%; --py:93.38%; --pw:85.59%; --ph:4.41%; }
.ves-card.t3{ --gab:url(../img/vestiges/carte_t3.webp); --ar:1014 / 1489;
  --tx:2.47%; --ty:1.68%; --tw:95.17%; --th:6.92%; --ix:6.80%; --iy:10.75%; --iw:86.49%; --ih:33.58%; --nx:6.61%; --ny:46.41%; --nw:86.88%; --nh:8.46%;
  --mx:7.20%; --my:55.41%; --mw:85.70%; --mh:5.71%; --dx:5.92%; --dy:61.38%; --dw:88.46%; --dh:31.77%; --px:7.20%; --py:93.49%; --pw:85.70%; --ph:4.63%; }
.ves-card.tl{ --gab:url(../img/vestiges/carte_tl.webp); --ar:1039 / 1447;
  --tx:2.60%; --ty:1.87%; --tw:95.09%; --th:7.46%; --ix:7.51%; --iy:12.02%; --iw:85.27%; --ih:33.93%; --nx:7.51%; --ny:47.82%; --nw:85.18%; --nh:9.33%;
  --mx:8.37%; --my:60.95%; --mw:83.54%; --mh:4.28%; --dx:6.64%; --dy:65.38%; --dw:86.91%; --dh:26.81%; --px:8.37%; --py:92.33%; --pw:83.54%; --ph:3.46%; }
/* Pas encore obtenue : le gabarit gris, l'image noircie */
.ves-card.t0{ --enc:#3a365e; }
.ves-card.t0 .ves-card-img img{ filter:grayscale(1) brightness(.16) contrast(1.5); opacity:.92; }
/* une capture (image pleine) non obtenue : sombre, grise et floue plutôt qu'un rectangle noir */
.ves-card.t0 .ves-card-img img.plein{ filter:grayscale(1) brightness(.38) contrast(1.15) blur(1.1cqw); opacity:1; transform:scale(1.06); }
.ves-card.t0 .ves-card-nom{ letter-spacing:1.2cqw; }
.ves-card.leg.t0::before{ filter:hue-rotate(28deg) saturate(1.7) brightness(.92); }   /* une légendaire qui reste à trouver : le gris tire sur le violet */
.ves-card.t1{ --enc:#4d2f18; }
.ves-card.t2{ --enc:#113a7c; }
.ves-card.t2 .ves-holo{ background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.34) 50%, transparent 60%); background-size:250% 100%; animation:vesReflet 7s ease-in-out infinite; }
/* 3 étoiles : halo doré, reflet qui passe, arc-en-ciel sur l'image */
.ves-card.t3{ --enc:#6a4203; filter:drop-shadow(0 16px 22px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(242,201,76,.55)); }
.ves-card.t3 .ves-fx{ background:linear-gradient(115deg, rgba(255,0,128,.36), rgba(0,229,255,.32), rgba(255,230,0,.34), rgba(160,90,255,.34), rgba(255,0,128,.36)); background-size:320% 320%; mix-blend-mode:color-dodge; opacity:.4; animation:vesArc 6s linear infinite; }
.ves-card.t3 .ves-holo{ background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.75) 48%, rgba(255,244,190,.4) 54%, transparent 66%); background-size:250% 100%; animation:vesReflet 3.5s ease-in-out infinite; mix-blend-mode:soft-light; }
@keyframes vesArc{ 0%{ background-position:0% 0%; } 100%{ background-position:320% 320%; } }
/* Légendaire : le gabarit holographique respire (teinte qui glisse), feuille irisée et paillettes par-dessus */
.ves-card.tl{ --enc:#2c0b66; filter:drop-shadow(0 16px 24px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(167,139,250,.8)); }
.ves-card.tl::before{ animation:vesTeinte 7s ease-in-out infinite alternate; }
@keyframes vesTeinte{ from{ filter:hue-rotate(-22deg) saturate(1.05); } to{ filter:hue-rotate(26deg) saturate(1.25); } }
.ves-card.tl .ves-card-et{ color:#fff; font-family:var(--font-head, inherit); font-weight:900; font-size:4.6cqw; letter-spacing:.3cqw; text-shadow:0 .5cqw 0 rgba(60,20,120,.85), 0 0 3cqw #c4b5fd; }
.ves-card.tl .ves-card-meta, .ves-card.tl .ves-card-desc, .ves-card.tl .ves-card-pied{ text-shadow:0 0 1.6cqw rgba(255,255,255,.85), 0 0 .6cqw rgba(255,255,255,.9); }
.ves-card.tl .ves-card-desc{ padding:2cqw 3cqw; font-weight:700; border-radius:2cqw; background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.36)); }
.ves-card.tl .ves-card-pied{ opacity:.85; }
.ves-card.tl .ves-fx{ background:linear-gradient(115deg, rgba(255,0,128,.4), rgba(0,229,255,.38), rgba(255,230,0,.36), rgba(160,90,255,.4), rgba(255,0,128,.4)); background-size:300% 300%; mix-blend-mode:color-dodge; opacity:.55; animation:vesArc 4.5s linear infinite; }
.ves-card.tl .ves-holo{ background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1.1px, transparent 1.8px) 0 0 / 23px 29px,
    radial-gradient(circle, rgba(255,255,255,.8) 0 .9px, transparent 1.6px) 11px 14px / 31px 37px,
    linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 47%, rgba(34,211,238,.3) 54%, transparent 68%);
  background-size:23px 29px, 31px 37px, 260% 100%; mix-blend-mode:soft-light; opacity:.9; animation:vesPaillettes 5s linear infinite; }
@keyframes vesPaillettes{ 0%{ background-position:0 0, 11px 14px, 130% 0; } 100%{ background-position:46px 58px, 73px 88px, -40% 0; } }

/* ── Touches, classement ── */
.ves-touche-l{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.ves-touche{ min-width:46px; margin-left:6px; padding:6px 10px; border-radius:8px; border:1px solid var(--border2); border-bottom-width:3px; background:var(--bg3); color:var(--text); font:inherit; font-weight:800; cursor:pointer; }
.ves-touche.ecoute{ border-color:#f2c94c; color:#f2c94c; animation:vesPulse 1.2s infinite; }
.ves-top{ display:flex; flex-direction:column; gap:6px; max-height:60vh; overflow-y:auto; }
.ves-top-l{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:var(--bg3); color:var(--text); font:inherit; font-size:13.5px; cursor:pointer; text-align:left; }
.ves-top-l:hover{ background:var(--bg4); }
.ves-top-l img, .ves-top-av{ width:28px; height:28px; border-radius:50%; object-fit:cover; background:var(--bg4); flex-shrink:0; }
.ves-top-r{ width:26px; text-align:center; font-weight:800; }
.ves-top-n{ flex:1; min-width:0; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ves-top-c{ font-size:12px; color:var(--text3); white-space:nowrap; }
.ves-top-l b{ color:#f2c94c; white-space:nowrap; }

/* ── Le booster (paquet) ── */
.ves-pack{ --pk:#7c3aed; position:relative; width:118px; height:168px; display:flex; flex-direction:column; filter:drop-shadow(0 10px 14px rgba(0,0,0,.5)); flex-shrink:0; }
.ves-pack.grand{ width:236px; height:336px; }
.ves-pack-corps{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px; text-align:center; color:#fff; overflow:hidden;
  background:linear-gradient(100deg, rgba(255,255,255,.28) 0%, transparent 18%, transparent 55%, rgba(0,0,0,.3) 100%), linear-gradient(160deg, color-mix(in srgb, var(--pk) 70%, #fff), var(--pk) 45%, color-mix(in srgb, var(--pk) 55%, #000)); }
.ves-pack-corps img{ max-width:74%; max-height:52%; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.ves-pack-ico{ font-size:38px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.ves-pack-corps b{ font-family:var(--font-head, inherit); font-size:13px; line-height:1.15; letter-spacing:.4px; text-shadow:0 2px 0 rgba(0,0,0,.4); overflow-wrap:anywhere; }
.ves-pack-corps small{ font-size:10.5px; font-weight:700; opacity:.9; padding:2px 8px; border-radius:9px; background:rgba(0,0,0,.3); }
.ves-pack.grand .ves-pack-ico{ font-size:84px; } .ves-pack.grand .ves-pack-corps b{ font-size:25px; } .ves-pack.grand .ves-pack-corps small{ font-size:15px; padding:4px 14px; border-radius:14px; }
/* Les deux soudures crantées du paquet */
.ves-pack-dents{ flex:0 0 9%; background:linear-gradient(180deg, color-mix(in srgb, var(--pk) 55%, #fff), color-mix(in srgb, var(--pk) 80%, #000));
  -webkit-mask:repeating-linear-gradient(90deg, #000 0 3px, rgba(0,0,0,.72) 3px 6px); mask:repeating-linear-gradient(90deg, #000 0 3px, rgba(0,0,0,.72) 3px 6px); }
.ves-pack-dents.h{ clip-path:polygon(0 30%, 4% 0, 8% 30%, 12% 0, 16% 30%, 20% 0, 24% 30%, 28% 0, 32% 30%, 36% 0, 40% 30%, 44% 0, 48% 30%, 52% 0, 56% 30%, 60% 0, 64% 30%, 68% 0, 72% 30%, 76% 0, 80% 30%, 84% 0, 88% 30%, 92% 0, 96% 30%, 100% 0, 100% 100%, 0 100%); }
.ves-pack-dents.b{ clip-path:polygon(0 0, 100% 0, 100% 70%, 96% 100%, 92% 70%, 88% 100%, 84% 70%, 80% 100%, 76% 70%, 72% 100%, 68% 70%, 64% 100%, 60% 70%, 56% 100%, 52% 70%, 48% 100%, 44% 70%, 40% 100%, 36% 70%, 32% 100%, 28% 70%, 24% 100%, 20% 70%, 16% 100%, 12% 70%, 8% 100%, 4% 70%, 0 100%); }
.ves-pack-reflet{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%); background-size:260% 100%; animation:vesReflet 3.2s ease-in-out infinite; mix-blend-mode:soft-light; }
.ves-packs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:18px 14px; max-height:62vh; overflow-y:auto; padding:8px 4px; }
.ves-packs-c{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.ves-packs-src{ font-size:11.5px; color:var(--text3); text-align:center; min-height:15px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── L'ouverture d'un booster ── */
.ves-ouv{ position:fixed; inset:0; z-index:4000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:20px; overflow:hidden auto;
  background:radial-gradient(circle at 50% 42%, #2b1a55, #0a0616 72%); animation:vesOuvIn .3s ease-out; }
@keyframes vesOuvIn{ from{ opacity:0; } }
.ves-ouv-halo{ position:fixed; left:50%; top:45%; width:160vmax; height:160vmax; margin:-80vmax 0 0 -80vmax; pointer-events:none; opacity:.34;
  background:repeating-conic-gradient(from 0deg, rgba(196,181,253,.5) 0 5deg, transparent 5deg 15deg); -webkit-mask:radial-gradient(circle, #000 0, transparent 46%); mask:radial-gradient(circle, #000 0, transparent 46%); animation:vesTourne 40s linear infinite; }
@keyframes vesTourne{ to{ transform:rotate(360deg); } }
.ves-ouv.eclat .ves-ouv-halo{ opacity:.85; background:repeating-conic-gradient(from 0deg, rgba(250,204,21,.75) 0 5deg, rgba(236,72,153,.4) 5deg 10deg, transparent 10deg 15deg); animation-duration:6s; }
.ves-ouv::after{ content:''; position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; transition:opacity .45s; }
.ves-ouv.flash::after{ opacity:.9; transition:none; }
.ves-ouv-scene{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; min-height:340px; width:100%; }
.ves-ouv-pack{ cursor:pointer; animation:vesPackFlotte 3s ease-in-out infinite; transition:filter .2s; }
.ves-ouv-pack:hover{ filter:brightness(1.12); }
@keyframes vesPackFlotte{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-12px) rotate(2deg); } }
.ves-ouv-pack.secoue{ animation:vesSecoue .12s linear infinite; }
@keyframes vesSecoue{ 0%{ transform:translate(-3px, 1px) rotate(-2.5deg); } 50%{ transform:translate(3px, -2px) rotate(2.5deg); } 100%{ transform:translate(-2px, 2px) rotate(-1.5deg); } }
.ves-ouv-pack.dechire{ animation:vesDechire .8s ease-in forwards; }
.ves-ouv-pack.dechire .ves-pack-dents.h{ animation:vesHautVole .55s ease-out forwards; }
@keyframes vesDechire{ 0%{ transform:scale(1); } 45%{ transform:scale(1.1); filter:brightness(1.5); } 100%{ transform:scale(1.5); opacity:0; filter:brightness(3.2); } }
@keyframes vesHautVole{ to{ transform:translate(60px, -140px) rotate(38deg); opacity:0; } }
.ves-ouv-txt{ position:relative; z-index:1; min-height:24px; font-size:16px; color:#e9defc; text-align:center; text-shadow:0 2px 6px rgba(0,0,0,.6); }
.ves-ouv-txt b{ color:#ffd84a; font-size:20px; }
.ves-ouv-btns{ position:relative; z-index:1; display:flex; gap:10px; min-height:40px; }
.ves-ouv-cartes{ display:flex; flex-wrap:wrap; justify-content:center; gap:46px 20px; padding-bottom:36px; max-width:1180px; }
/* Une carte du booster : dos visible, puis retournée au clic */
.ves-oc{ --l:200px; width:var(--l); height:calc(var(--l) * 1509 / 1027); perspective:1100px; cursor:pointer; position:relative; animation:vesSort .55s cubic-bezier(.2,1.3,.4,1) both; animation-delay:calc(var(--d) * .09s); }
.ves-ouv-cartes.n6 .ves-oc, .ves-ouv-cartes.n7 .ves-oc, .ves-ouv-cartes.n8 .ves-oc, .ves-ouv-cartes.n9 .ves-oc, .ves-ouv-cartes.n10 .ves-oc{ --l:164px; }
@keyframes vesSort{ from{ opacity:0; transform:translateY(120px) scale(.4) rotate(-12deg); } }
.ves-oc-in{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.3,1.3,.5,1); }
.ves-oc.vue .ves-oc-in{ transform:rotateY(180deg); }
.ves-oc:not(.vue):hover .ves-oc-in{ transform:translateY(-8px) rotateY(8deg); }
.ves-oc-dos, .ves-oc-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:12px; }
.ves-oc-dos{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#ffd84a; text-align:center; padding:10px;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px), linear-gradient(160deg, #2f66d8, #162f73); border:3px solid #ffd84a; box-shadow:0 10px 22px rgba(0,0,0,.55), inset 0 0 0 3px #10255d; }
.ves-oc-dos span{ font-size:42px; } .ves-oc-dos b{ font-family:var(--font-head, inherit); font-size:15px; letter-spacing:1.5px; text-transform:uppercase; }
.ves-oc-face{ transform:rotateY(180deg); }
.ves-oc-face .ves-card{ width:100%; }
.ves-oc-ruban{ position:absolute; left:50%; bottom:-32px; transform:translateX(-50%); padding:4px 12px; border-radius:12px; font-size:12px; font-weight:900; letter-spacing:.6px; white-space:nowrap; color:#fff; background:#475569; opacity:0; transition:opacity .3s .5s; }
.ves-oc-ruban i{ font-style:normal; margin-left:4px; color:#ffe680; }
.ves-oc.vue .ves-oc-ruban{ opacity:1; }
.ves-oc-ruban.new{ background:#16a34a; } .ves-oc-ruban.up{ background:#2563eb; } .ves-oc-ruban.dup{ background:#b45309; }
.ves-oc-ruban.legend{ background:linear-gradient(90deg, #7c3aed, #ec4899); box-shadow:0 0 16px #c4b5fd; }
.ves-oc.legend.vue{ animation:vesLegende 1s ease-out; }
@keyframes vesLegende{ 0%{ filter:brightness(3); transform:scale(1.25); } 100%{ filter:none; transform:none; } }

/* ── Configuration ── */
.ves-cfg{ width:min(1120px, 96vw); max-width:none; height:min(88vh, 900px); display:flex; flex-direction:column; padding:0; overflow:hidden; }
.ves-cfg-tete{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 20px 10px; }
.ves-cfg-tete h3{ margin:0; }
.ves-cfg-onglets{ display:flex; gap:4px; padding:0 20px; border-bottom:1px solid var(--border); overflow-x:auto; }
.ves-cfg-onglets button{ border:none; background:none; color:var(--text3); font:inherit; font-size:13.5px; font-weight:700; padding:9px 12px; cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; }
.ves-cfg-onglets button.on{ color:var(--text); border-bottom-color:#f2c94c; }
.ves-cfg-corps{ flex:1; min-height:0; overflow-y:auto; padding:16px 20px 20px; }
.ves-cfg-albums{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.ves-cfg-albums button{ border:1px solid var(--border2); background:var(--bg3); color:var(--text2); border-radius:16px; padding:6px 12px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.ves-cfg-albums button small{ opacity:.6; margin-left:4px; }
.ves-cfg-albums button.on{ background:rgba(242,201,76,.18); border-color:#f2c94c; color:var(--text); }
.ves-cfg-albums button.plus{ border-style:dashed; }
.ves-cfg-barre{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.ves-cfg-info, .ves-cfg-aide{ font-size:12px; color:var(--text3); }
.ves-cfg-aide{ margin-top:10px; }
.ves-cfg-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:10px; }
.ves-cfg-carte{ display:flex; flex-direction:column; gap:3px; padding:6px; border-radius:10px; border:1px solid var(--border); background:var(--bg3); cursor:pointer; text-align:center; transition:transform .12s, border-color .12s; }
.ves-cfg-carte:hover{ transform:translateY(-2px); border-color:var(--border2); }
.ves-cfg-carte.leg{ border-color:rgba(167,139,250,.7); background:rgba(124,58,237,.14); }
.ves-cfg-carte.glisse{ opacity:.4; } .ves-cfg-carte.cible{ outline:2px dashed #f2c94c; }
.ves-cfg-img{ aspect-ratio:16 / 11; border-radius:7px; background:radial-gradient(circle at 50% 35%, #2c406e, #0c1428 80%); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ves-cfg-img img{ width:100%; height:100%; object-fit:contain; } .ves-cfg-img em{ font-style:normal; font-weight:900; font-size:22px; color:rgba(255,255,255,.2); }
.ves-cfg-carte b{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ves-cfg-carte small{ font-size:10.5px; color:var(--text3); }
.ves-cfg-boosters{ display:flex; flex-direction:column; gap:10px; }
.ves-cfg-booster{ display:flex; align-items:center; gap:16px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--bg3); cursor:pointer; }
.ves-cfg-booster:hover{ border-color:var(--border2); }
.ves-cfg-booster .ves-pack{ width:70px; height:100px; } .ves-cfg-booster .ves-pack-ico{ font-size:22px; } .ves-cfg-booster .ves-pack-corps b{ font-size:9px; } .ves-cfg-booster .ves-pack-corps small{ display:none; }
.ves-cfg-booster > div:last-child{ display:flex; flex-direction:column; gap:3px; min-width:0; } .ves-cfg-booster small{ font-size:12px; color:var(--text3); }
.ves-regl{ display:flex; flex-direction:column; gap:14px; }
.ves-regl-b{ padding:14px 16px; border-radius:12px; border:1px solid var(--border); background:var(--bg3); }
.ves-regl-b h4{ margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.8px; color:var(--text3); }
.ves-regl-l{ display:flex; gap:12px; flex-wrap:wrap; }
.ves-regl-l label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--text2); flex:1 1 150px; }
.ves-regl-t{ border-collapse:collapse; } .ves-regl-t th{ text-align:left; font-size:11.5px; color:var(--text3); padding:0 10px 6px 0; } .ves-regl-t td{ padding:3px 10px 3px 0; }
.ves-regl-t input{ width:90px; } .ves-regl-t select{ min-width:230px; }
.ves-puces{ display:flex; flex-wrap:wrap; gap:6px 12px; font-size:13px; } .ves-puces label{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.ves-coche{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; cursor:pointer; padding-bottom:16px; } .ves-coche small{ font-weight:400; color:var(--text3); }
.ves-mini-fen{ max-width:520px; } .ves-mini-fen.ves-large{ max-width:900px; width:94vw; }
.ves-mini-corps{ max-height:70vh; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.ves-cedit{ display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:22px; align-items:start; }
.ves-cedit-f{ display:flex; flex-direction:column; }
.ves-cedit-a{ display:flex; flex-direction:column; align-items:center; gap:10px; position:sticky; top:0; }
.ves-cedit-a > div:first-child{ width:262px; }
.ves-cedit-et{ font-size:12px; color:var(--text3); display:flex; align-items:center; gap:5px; }
.ves-cedit-et button{ border:1px solid var(--border2); background:var(--bg3); color:#f2c94c; border-radius:8px; padding:3px 8px; cursor:pointer; font-size:12px; }

@media (prefers-reduced-motion:reduce){
  .ves-flotte, .ves-card, .ves-mini, .ves-holo, .ves-fx, .ves-pack-reflet, .ves-ouv-halo, .ves-ouv-pack, .ves-btn-pack{ animation:none !important; }
}