/* =====================================================================
   THEME DOJO SOMBRE — MyTCGPrice
   Socle global (variables, fond, navbar) + home.
   Charge APRES style.css et theme.css : c'est lui qui a le dernier mot.

   Principe de ce fichier : le moins de "boites" possible.
   - la navbar est un BANDEAU pleine largeur, pas une pastille flottante ;
   - le hero occupe toute la largeur de la page et se fond dans le fond ;
   - les sections de contenu n'ont plus de cadre ni d'ombre : on separe
     par de l'espace et de fins filets, pas par des cartes empilees.
   ===================================================================== */
@font-face{ font-family:'Anton';   src:url('/static/fonts/anton.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Rampart'; src:url('/static/fonts/rampart.woff2') format('woff2'); font-display:swap; }

:root{
  /* fonds */
  --dj-bg:#0b0c10;            /* fond profond, tres legerement chaud */
  --dj-bg2:#101218;
  /* filets */
  --dj-line:rgba(255,255,255,.07);
  --dj-line2:rgba(255,255,255,.13);
  /* textes */
  --dj-txt:#e9eaf0;
  --dj-mut:#959bab;
  --dj-mut2:#c4c9d6;
  /* accents repris du visuel : rouge du dojo, ambre des shoji, bleu ceinture */
  --dj-red:#e0303a;
  --dj-red-d:#9c1e26;
  --dj-amber:#e8a24a;
  --dj-gold:#ffcf5c;
  --dj-blue:#4f86e0;
  --dj-green:#4ade80;
  /* gabarit */
  --dj-nav-h:64px;
  --dj-gut:clamp(18px, 3.4vw, 46px);
  --dj-max:1280px;
  --brush:'Rampart', system-ui, sans-serif;
  --impact:'Anton', system-ui, sans-serif;
}

html{ scroll-padding-top:calc(var(--dj-nav-h) + 16px); }

/* ============================ FOND GLOBAL ============================
   Le fond couvre TOUTE la page (pas de bloc, pas de bord visible) et reste
   fixe au defilement. On force aussi les variantes par type de page, qui
   posaient chacune leur propre fond.
   ==================================================================== */
html body,
html body.home-page, html body.game-page, html body.quote-page,
html body.scan-page, html body.collection-page, html body.account-page{
  background:
    radial-gradient(1100px 620px at 78% -8%,  rgba(232,162,74,.10), transparent 60%),
    radial-gradient(900px 640px at -8% 108%,  rgba(224,48,58,.09),  transparent 58%),
    var(--dj-bg) !important;
  /* Pas de "background-attachment:fixed" : il force une couche fixe qui
     provoque des artefacts de rendu avec le bandeau collant (et il est
     ignore par Safari iOS). Le fond couvre deja toute la page. */
  background-attachment:scroll !important;
  background-repeat:no-repeat !important;
  color:var(--dj-txt) !important;
}
/* voiles decoratifs de l'ancien theme (grilles, halos) : off partout */
html body::before, html body::after,
html body.home-page::before, html body.home-page::after,
html body.game-page::before, html body.game-page::after{ display:none !important; }

html body a{ color:var(--dj-txt); }
/* Garde-fou contre un debordement horizontal accidentel.
   "clip" et non "hidden" : "hidden" ferait du <body> un conteneur de
   defilement, ce qui casse le maintien en haut (sticky) du bandeau. */
html{ overflow-x:clip; }
html body{ overflow-x:clip; }

/* conteneur central commun */
html body .page{ max-width:var(--dj-max) !important; margin:0 auto !important; padding:34px var(--dj-gut) 70px !important; }

.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }


/* ====================================================================
   NAVBAR — BANDEAU pleine largeur
   Plus de pastille arrondie centree : une bande qui court d'un bord a
   l'autre, posee sur le fond, separee du contenu par un simple filet.
   ==================================================================== */
html body .site-header{
  position:sticky; top:0; z-index:10000;
  width:100%;
}
html body .site-header .nav{
  position:static !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-bottom:1px solid var(--dj-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#0e1015 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  html body .site-header .nav{
    background:rgba(14,16,21,.82) !important;
    backdrop-filter:blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(140%) !important;
  }
}
/* la bande est pleine largeur, son CONTENU reste aligne sur le reste du site */
/* Grille en trois colonnes plutot qu'un flux flex : la colonne du milieu est
   centree sur le bandeau quelles que soient les largeurs de la marque et du
   selecteur de langue. Avec un simple flex, les liens se decalaient des que
   l'un des deux cotes changeait de largeur (connecte / deconnecte, FR / EN). */
html body .site-header .nav .nav-inner{
  max-width:var(--dj-max);
  margin:0 auto;
  padding:0 var(--dj-gut);
  min-height:var(--dj-nav-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
}

/* --- marque --- */
html body .site-header .nav .brand{
  display:inline-flex !important; align-items:center !important; gap:10px !important;
  justify-self:start !important;
  width:auto !important; flex:0 0 auto !important;
  text-decoration:none !important;
  /* le retrait negatif compense le rembourrage : le logo reste aligne sur la
     grille du site, et le contour de survol a de la place pour s'afficher. */
  margin:0 0 0 -10px !important; padding:6px 10px !important;
  border:1px solid transparent !important; border-radius:11px !important;
  transition:border-color .15s ease !important;
}
/* Survol discret : un simple contour. Les feuilles precedentes posaient ici un
   fond clair (var(--surface-2), herite du theme clair) qui noyait la ceinture
   blanche de la marque. */
html body .site-header .nav a.brand:hover,
html body .site-header .nav a.brand:focus-visible{
  background:none !important; background-image:none !important; box-shadow:none !important;
  border-color:rgba(255,255,255,.34) !important;
}
html body .site-header .nav a.brand:hover .brand-logo{ transform:none !important; }
/* La marque n'est plus carree (trois cartes, 154 x 78) : on cale la hauteur et
   on laisse la largeur suivre, sinon le rapport serait ecrase. */
html body .site-header .nav .brand .brand-logo{
  display:block !important; height:28px !important; width:auto !important;
  border-radius:0 !important; filter:none !important; object-fit:contain !important;
}
/* Wordmark en Anton, la police "impact" du dojo (celle des titres de section).
   Rampart, la police du gros titre MTP, n'est pas utilisable ici : conçue pour
   de tres grandes tailles, ses lettres se chevauchent des qu'on descend sous
   ~40 px et son ombre 3d integree bouche les contreformes. */
html body .site-header .nav .brand .brand-wordmark{
  font-family:var(--impact) !important; font-weight:400 !important;
  font-size:20px !important; letter-spacing:.03em !important; font-style:normal !important;
  line-height:1 !important;
}
html body .site-header .nav .brand-wordmark-my,
html body .site-header .nav .brand-wordmark-price{ color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important; }
html body .site-header .nav .brand-wordmark-tcg{ color:var(--dj-red) !important; -webkit-text-fill-color:var(--dj-red) !important; background:none !important; }

/* --- liens : texte nu, aucun cadre, centres sur le bandeau --- */
html body .site-header .nav .nav-links{
  display:flex !important; align-items:center !important; flex-wrap:wrap !important;
  justify-content:center !important; gap:2px !important;
  grid-column:2 !important; justify-self:center !important;
}
html body .site-header .nav .nav-links > a,
html body .site-header .nav .games-menu > summary,
html body .site-header .nav a.nav-dojo-btn,
html body .site-header .nav .nav-drop > summary.nav-collection-btn,
html body .site-header .nav .nav-drop > summary.nav-dojo-btn,
html body .site-header .nav a.nav-account-btn{
  font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important; font-size:13.5px !important;
  display:inline-block !important;
  text-transform:lowercase !important; letter-spacing:0 !important;
  color:var(--dj-mut) !important;
  background:none !important; background-image:none !important;
  border:0 !important; border-radius:10px !important;
  padding:8px 12px !important; box-shadow:none !important; text-shadow:none !important;
  transition:color .15s ease, background-color .15s ease !important;
}
html body .site-header .nav .nav-links > a:hover,
html body .site-header .nav .games-menu > summary:hover,
html body .site-header .nav a.nav-dojo-btn:hover,
html body .site-header .nav .nav-drop > summary.nav-collection-btn:hover,
html body .site-header .nav a.nav-account-btn:hover{
  color:#fff !important; background:rgba(255,255,255,.055) !important;
}
/* page courante : simple texte blanc souligne de rouge, pas de pave colore */
html body .site-header .nav .nav-links > a.active,
html body .site-header .nav a.nav-dojo-btn.active,
html body .site-header .nav a.nav-account-btn.active,
html body .site-header .nav .nav-drop.on > summary.nav-collection-btn,
html body .site-header .nav .nav-drop.on > summary.nav-dojo-btn{
  color:#fff !important; background:none !important; position:relative !important;
}
html body .site-header .nav .nav-links > a.active::before,
html body .site-header .nav a.nav-dojo-btn.active::before,
html body .site-header .nav a.nav-account-btn.active::before,
html body .site-header .nav .nav-drop.on > summary.nav-collection-btn::before,
html body .site-header .nav .nav-drop.on > summary.nav-dojo-btn::before{
  content:"" !important; position:absolute !important; left:12px; right:12px; bottom:-1px;
  height:2px; background:var(--dj-red); border-radius:2px;
}
/* les libelles arrivent en MAJUSCULES depuis les traductions : on repasse en
   casse de phrase (minuscules + initiale capitale), comme sur le visuel. */
html body .site-header .nav .nav-links > a::first-letter,
html body .site-header .nav .games-menu > summary::first-letter,
html body .site-header .nav a.nav-dojo-btn::first-letter,
html body .site-header .nav .nav-drop > summary.nav-collection-btn::first-letter,
html body .site-header .nav a.nav-account-btn::first-letter{ text-transform:uppercase !important; }

/* chevrons des menus deroulants */
html body .site-header .nav .games-menu > summary::-webkit-details-marker,
html body .site-header .nav .nav-drop > summary.nav-collection-btn::-webkit-details-marker,
html body .site-header .nav .nav-drop > summary.nav-dojo-btn::-webkit-details-marker{ display:none !important; }
/* inline-block (et non inline-flex) : indispensable pour que ::first-letter
   s'applique et remette l'initiale du libelle en capitale. */
html body .site-header .nav .games-menu > summary,
html body .site-header .nav .nav-drop > summary.nav-collection-btn,
html body .site-header .nav .nav-drop > summary.nav-dojo-btn{
  display:inline-block !important; cursor:pointer !important; list-style:none !important;
}
html body .site-header .nav .games-menu > summary::after,
html body .site-header .nav .nav-drop > summary.nav-collection-btn::after,
html body .site-header .nav .nav-drop > summary.nav-dojo-btn::after{
  content:"" !important; display:inline-block; vertical-align:middle;
  width:0; height:0; opacity:.7; margin:-2px 0 0 7px;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor;
}

/* --- bloc de droite : FR / EN en petit segmente --- */
html body .site-header .nav .lang-switch{
  margin:0 !important; justify-self:auto !important;
  display:flex !important; align-items:center !important; gap:2px !important;
  width:auto !important; flex:0 0 auto !important;
  background:rgba(255,255,255,.05) !important; border:1px solid var(--dj-line) !important;
  border-radius:999px !important; padding:3px !important;
}
html body .site-header .nav .lang-switch a{
  font-family:'Inter',system-ui,sans-serif !important; font-weight:700 !important; font-size:11.5px !important;
  color:var(--dj-mut) !important; background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:999px !important; padding:5px 10px !important; text-transform:none !important; letter-spacing:.02em !important;
}
html body .site-header .nav .lang-switch a:hover{ color:#fff !important; }
html body .site-header .nav .lang-switch a.active{ color:#fff !important; background:var(--dj-red) !important; }

/* panneaux deroulants : verre sombre, coherents avec le bandeau */
html body .site-header .nav .games-menu-panel,
html body .site-header .nav .nav-drop-panel{
  background:rgba(14,16,21,.96) !important; border:1px solid var(--dj-line2) !important;
  border-radius:16px !important; box-shadow:0 26px 60px rgba(0,0,0,.55) !important;
  backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important;
}
html body .site-header .nav .game-menu-card,
html body .site-header .nav .colmenu-link{
  background:transparent !important; border:1px solid transparent !important; box-shadow:none !important; color:var(--dj-txt) !important;
}
html body .site-header .nav .game-menu-card:hover,
html body .site-header .nav .colmenu-link:hover{ background:rgba(255,255,255,.06) !important; border-color:var(--dj-line) !important; }
html body .site-header .nav .game-menu-card.active{ background:rgba(224,48,58,.16) !important; border-color:rgba(224,48,58,.4) !important; }
html body .site-header .nav .game-menu-card small,
html body .site-header .nav .colmenu-link small{ color:var(--dj-mut) !important; }
html body .site-header .nav .game-menu-card strong,
html body .site-header .nav .colmenu-link strong{ color:#fff !important; }


/* ====================================================================
   HERO DOJO — pleine largeur, sans cadre
   L'image court d'un bord a l'autre et se dissout vers le bas dans le
   fond de page : aucune bordure, aucun arrondi, aucune ombre portee.
   ==================================================================== */
html body.home-page .dojo-hero{
  position:relative;
  width:100%;
  margin:0;
  border:0; border-radius:0; box-shadow:none;
  overflow:hidden; isolation:isolate;
  background:url('/static/brand/dojo_bg.jpg') center 42% / cover no-repeat, #0b0d12;
  min-height:clamp(540px, 76vh, 780px);
  display:flex; align-items:stretch;
}
/* MOBILE — image dediee, recadree 9:16 sur le pratiquant.
   Avec l'image large, "cover" sur un hero aussi haut n'en laissait voir qu'une
   bande de 15 % de large : le sujet passait derriere le panneau des ceintures.
   Les deux fichiers sont generes depuis le meme master (assets_sources/). */
@media (max-width:700px){
  html body.home-page .dojo-hero{
    background-image:url('/static/brand/dojo_bg_mobile.jpg');
    background-position:center center;
  }
}
/* Tablette en portrait : on garde l'image large, simplement recentree. */
@media (min-width:701px) and (orientation:portrait){
  html body.home-page .dojo-hero{ background-position:center 38%; }
}
/* voile lateral : lisibilite du texte a gauche */
html body.home-page .dojo-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(8,9,13,.93) 0%, rgba(8,9,13,.82) 26%, rgba(8,9,13,.30) 58%, rgba(8,9,13,.62) 100%);
}
/* fondu haut ET bas : le hero se raccorde au bandeau et au fond de page */
html body.home-page .dojo-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,12,16,.75) 0%, transparent 18%),
    linear-gradient(180deg, transparent 55%, rgba(11,12,16,.75) 86%, var(--dj-bg) 100%);
}
/* contenu du hero aligne sur la grille du site */
/* Le hero n'a plus de bloc en position absolue : simple rangee, le texte a
   gauche et l'anneau de progression a droite. Le grand rembourrage bas
   servait a degager la barre de stats, qui a rejoint la page dojo. */
html body.home-page .dh-wrap{
  position:relative; z-index:2;
  width:100%; max-width:var(--dj-max); margin:0 auto;
  padding:clamp(40px, 6vh, 74px) var(--dj-gut);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px, 5vw, 72px);
}

/* --- colonne de gauche --- */
html body.home-page .dh-inner{ max-width:560px; }
html body.home-page .dh-eyebrow{
  font-family:var(--impact); font-size:11.5px; letter-spacing:3.2px; text-transform:uppercase;
  color:var(--dj-red); margin:0 0 4px;
}
html body.home-page .dh-title{
  font-family:var(--brush); font-weight:400; line-height:.9;
  font-size:clamp(66px, 9.6vw, 138px);
  margin:4px 0 0; position:relative; display:inline-block;
  color:#fff !important; background:none !important;
  text-shadow:0 10px 40px rgba(0,0,0,.6);
}
html body.home-page .dh-title span[aria-hidden]{ position:relative; z-index:1; color:#fff !important; }

/* Une seule marque sur le site : le hero reprend le logo du bandeau. Le titre
   perd donc son ombre de texte et son trait rouge — le logo porte deja son
   rouge, un second trait ferait doublon. */
html body.home-page .dh-title-logo{
  display:block; text-shadow:none !important; line-height:0; margin:18px 0 0;
}
html body.home-page .dh-title-logo::after{ display:none !important; content:none !important; }
html body.home-page .dh-inner{ --dh-logo-h:clamp(62px, 8.4vw, 112px); }
html body.home-page .dh-logo{
  display:block; height:var(--dh-logo-h); width:auto;
  filter:drop-shadow(0 12px 34px rgba(0,0,0,.55));
}
/* le trait rouge passe DERRIERE les lettres, legerement incline */
html body.home-page .dh-title::after{
  content:""; position:absolute; z-index:0;
  left:-8px; right:11%; bottom:.11em; height:.115em;
  background:var(--dj-red); border-radius:2px;
  transform:rotate(-2.4deg); opacity:.95;
}
/* --- decodage de l'acronyme, sous le titre MTP --- */
/* Meme police que le wordmark du bandeau (Anton), a une taille qui tient tete
   au titre. Largeur naturelle, non etiree : les mots restent groupes et c'est
   le point median qui les separe. */
/* Chaque mot sous SA carte. Les trois cartes du logo occupent, dans le
   viewBox 154 x 78 : 0-46, 49-105 et 108-154 ; leurs centres tombent donc a
   14,94 %, 50 % et 85,06 % de la largeur. Des colonnes de 29,87 / 40,26 /
   29,87 % placent leurs centres exactement dessus.

   La largeur du bloc est celle du logo, deduite de sa hauteur (rapport
   154/78) : le calage tient a toutes les tailles d'ecran, sans point d'arret. */
html body.home-page .dh-expand{
  font-family:var(--impact); font-weight:400;
  font-size:clamp(14px, 1.86vw, 26px); line-height:1;
  letter-spacing:.02em; margin:13px 0 0; padding-left:0;
  width:calc(var(--dh-logo-h, 112px) * 1.9744);
  display:grid; grid-template-columns:29.87% 40.26% 29.87%;
  align-items:center; position:relative;
}
html body.home-page .dh-expand .dx-w,
html body.home-page .dh-expand .dx-t{ text-align:center; white-space:nowrap; }
html body.home-page .dh-expand .dx-w{ color:#fff; }
html body.home-page .dh-expand .dx-t{ color:var(--dj-red); }
/* Les points ne sont plus des elements : dans une grille a trois colonnes ils
   prendraient une place de mot. Poses aux mediennes exactes entre les centres
   de cartes — (14,94+50)/2 et (50+85,06)/2. */
html body.home-page .dh-expand::before,
html body.home-page .dh-expand::after{
  content:"·"; position:absolute; top:50%; transform:translate(-50%,-50%);
  color:#565d70; pointer-events:none;
}
html body.home-page .dh-expand::before{ left:32.47%; }
html body.home-page .dh-expand::after{ left:67.53%; }

html body.home-page .dh-tagline{
  font-family:'Inter',system-ui,sans-serif; font-weight:800; line-height:1.14;
  font-size:clamp(21px, 2.5vw, 28px); color:#fff; margin:22px 0 0;
}

/* Accroches tournantes. Les six lignes sont empilees sur la MEME cellule de
   grille : le bloc prend la hauteur de la plus longue et plus rien ne bouge
   autour au changement. Seule l'opacite varie. */
html body.home-page .dh-rotate{
  display:grid; margin:15px 0 0; max-width:462px;
  color:var(--dj-mut2); font-weight:400; font-size:15px; line-height:1.62;
}
html body.home-page .dh-rotate .dh-rot{
  grid-area:1 / 1; opacity:0; transition:opacity .5s ease;
}
html body.home-page .dh-rotate .dh-rot.is-on{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  html body.home-page .dh-rotate .dh-rot{ transition:none; }
}
html body.home-page .dh-actions{ display:flex; align-items:center; gap:20px; margin-top:30px; flex-wrap:wrap; }
/* un seul vrai bouton : pilule cerclee, fond transparent */
html body.home-page .dh-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:14px;
  color:#fff; text-decoration:none; cursor:pointer;
  padding:13px 24px; border-radius:999px;
  border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background-color .16s ease, border-color .16s ease;
}
html body.home-page .dh-btn:hover{ background:rgba(255,255,255,.15); border-color:#fff; }
/* Le second appel etait un lien gris, trop discret pour se voir sur l'image de
   fond. Il devient une pilule cerclee — meme gabarit que le bouton principal,
   mais sans fond ni flou : visible, sans lui faire concurrence. */
html body.home-page .dh-link{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:14px;
  color:#fff; text-decoration:none;
  padding:13px 22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.26); background:transparent;
  transition:background-color .16s ease, border-color .16s ease;
}
html body.home-page .dh-link:hover{
  color:#fff; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.55);
}
/* la fleche descend d'un cheveu au survol : elle annonce ou l'on va */
html body.home-page .dh-link .dh-link-arrow{
  transition:transform .16s ease; display:inline-block;
}
html body.home-page .dh-link:hover .dh-link-arrow{ transform:translateY(2px); }
/* Collection : fleche vers la DROITE sur PC (on quitte la page), vers le BAS sur mobile (on
   deroule le panneau de la barre du bas). Selecteurs au moins aussi precis que la regle
   ci-dessus, qui impose display:inline-block a toutes les fleches. */
html body.home-page .dh-link .dh-link-arrow.dh-arrow-mob{ display:none; }
@media (max-width:860px){
  html body.home-page .dh-link .dh-link-arrow.dh-arrow-pc{ display:none; }
  html body.home-page .dh-link[data-col-sheet] .dh-link-arrow.dh-arrow-mob{ display:inline-block; }
}
@media (prefers-reduced-motion: reduce){
  html body.home-page .dh-link .dh-link-arrow{ transition:none; }
}

/* --- anneau de progression : la ceinture en cours au centre --- */
html body.home-page .dh-rank{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  /* la marge droite degage le bouton flottant "Avis", fixe au bord */
  width:clamp(190px, 21vw, 238px); margin-right:clamp(0px, 2vw, 26px); text-align:center;
}
html body.home-page .dh-ring{ position:relative; width:100%; aspect-ratio:1; display:grid; place-items:center; }
html body.home-page .dh-ring svg{
  position:absolute; inset:0; width:100%; height:100%;
  transform:rotate(-90deg);            /* l'arc demarre en haut */
  overflow:visible;
}
html body.home-page .dh-ring-track,
html body.home-page .dh-ring-arc{ fill:none; stroke-width:5; }
html body.home-page .dh-ring-track{ stroke:rgba(255,255,255,.12); }
html body.home-page .dh-ring-arc{
  stroke:#fff; stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.35));
}
html body.home-page .dh-ring-belt{
  position:relative; width:58%; height:auto;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.55));
}
html body.home-page .dh-rank-name{
  font-family:var(--impact); font-size:clamp(15px, 1.5vw, 19px);
  letter-spacing:1.5px; text-transform:uppercase; color:#fff; margin:18px 0 0;
}
html body.home-page .dh-rank-xp{
  font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:12.5px;
  color:var(--dj-mut); margin:6px 0 0;
}
html body.home-page .dh-rank-prog{ display:flex; align-items:center; gap:10px; width:100%; margin-top:12px; }
html body.home-page .dh-rank-bar{
  flex:1; display:block; height:6px; border-radius:999px;
  background:rgba(255,255,255,.13); overflow:hidden;
}
html body.home-page .dh-rank-bar i{ display:block; height:100%; border-radius:999px; background:#fff; }
html body.home-page .dh-rank-pct{
  font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:11.5px;
  color:var(--dj-mut); flex:0 0 auto;
}


/* ==================================================================
   BLOCS DEPLACES VERS LA PAGE DOJO
   Le panneau des ceintures et la barre d'indicateurs vivaient dans le
   hero de l'accueil, en position absolue. Ils sont devenus des blocs
   autonomes : plus de positionnement, et des selecteurs non lies a
   .home-page puisqu'ils s'affichent desormais ailleurs.
   ================================================================== */


























@media (max-width:640px){
  
  
  
}


/* ====================================================================
   HOME — sections de contenu, debarrassees de leurs cadres
   ==================================================================== */
/* titres de section : filet rouge + libelle, rien d'autre */
html body.home-page .neo-games-title{
  font-family:var(--impact) !important; font-size:14px !important; color:#fff !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important;
  display:flex !important; align-items:center !important; gap:11px !important;
  margin:0 0 18px !important;
}
html body.home-page .neo-games-title::before{ content:""; width:18px; height:3px; background:var(--dj-red); border-radius:2px; flex:0 0 auto; }

/* --- bandeau "atouts" : plus de cartes, juste icone + texte --- */
html body.home-page .neo-feature-strip{
  display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:0 !important; margin:52px 0 !important;
  border-top:1px solid var(--dj-line) !important; border-bottom:1px solid var(--dj-line) !important;
}
/* Cinquieme carte (la boutique, affichee seulement quand elle est ouverte) : on passe a cinq
   colonnes plutot que de laisser une carte seule sur une deuxieme ligne. */
html body.home-page .neo-feature-strip:has(> :nth-child(5)){
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;
}
html body.home-page .neo-feature-card{
  display:grid !important; grid-template-columns:38px 1fr !important; gap:14px !important;
  align-items:start !important; min-height:0 !important;
  padding:24px !important; border-radius:0 !important;
  background:none !important; border:0 !important; border-left:1px solid var(--dj-line) !important;
  box-shadow:none !important; color:var(--dj-txt) !important; text-decoration:none !important;
  transition:background-color .16s ease !important;
}
html body.home-page .neo-feature-card:first-child{ border-left:0 !important; }
html body.home-page .neo-feature-card:hover{ transform:none !important; background:rgba(255,255,255,.028) !important; }
html body.home-page .neo-feature-icon{
  width:38px !important; height:38px !important; border-radius:11px !important;
  background:rgba(224,48,58,.13) !important; border:1px solid rgba(224,48,58,.28) !important;
  box-shadow:none !important; filter:none !important;
  display:grid !important; place-items:center !important; font-size:0 !important;
}
html body.home-page .neo-feature-icon img{ display:none !important; }
/* pictos en SVG dans le gabarit : plus de glyphes typographiques, dont le
   dessin variait d'une police systeme a l'autre. */
html body.home-page .neo-feature-icon svg{
  width:20px !important; height:20px !important; display:block !important;
  color:var(--dj-red) !important;
}
html body.home-page .neo-feature-card strong{
  display:block !important; color:#fff !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:800 !important;
  font-size:14px !important; letter-spacing:0 !important; text-transform:none !important; margin-bottom:6px !important;
}
html body.home-page .neo-feature-card p{ color:var(--dj-mut) !important; font-size:13.5px !important; line-height:1.5 !important; margin:0 !important; }

/* --- grille des jeux : tuiles sans cadre, le logo suffit --- */
html body.home-page .neo-games-section{ margin:0 0 20px !important; }
html body.home-page .games{ display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:10px !important; }
html body.home-page .neo-games-section .game{
  position:relative !important; display:flex !important; flex-direction:column !important;
  min-height:0 !important; aspect-ratio:auto !important; padding:0 !important; overflow:hidden !important;
  background:rgba(255,255,255,.028) !important; border:1px solid transparent !important; border-radius:16px !important;
  box-shadow:none !important; text-decoration:none !important;
  transition:background-color .16s ease, border-color .16s ease, transform .16s ease !important;
}
html body.home-page .neo-games-section .game:hover{
  transform:translateY(-3px) !important;
  background:rgba(255,255,255,.055) !important; border-color:var(--dj-line2) !important;
}
html body.home-page .game .bg, html body.home-page .game .bg.logo-bg{
  position:relative !important; inset:auto !important; width:100% !important; aspect-ratio:16/10 !important;
  opacity:1 !important; background:none !important; border:0 !important;
}
/* Le cadre du logo mesure 306x70 (rapport 4,4), pas 16/10 : "contain" y rend
   donc chaque fichier a une taille qui depend entierement de SES proportions et
   de sa marge transparente. Mesure faite : l'encre affichee va de 3 100 px2
   (Lorcana) a 18 000 px2 (Yu-Gi-Oh) — d'ou l'impression que certains logos sont
   « zoomes ».

   On corrige en retrecissant la BOITE de fond, centree, d'un facteur pose par
   tuile (--logo-k). "contain" continue de s'appliquer normalement a l'interieur,
   donc le reglage tient a toutes les largeurs d'ecran — ce qu'un
   background-size chiffre ne ferait pas : le cadre change de rapport selon le
   nombre de colonnes, et un logo tres large deborderait sur mobile. */
html body.home-page .game .bg.logo-bg::after{
  top:calc(50% * (1 - var(--logo-k, 1))) !important;
  left:0 !important; right:0 !important; margin-inline:auto !important;
  width:calc(100% * var(--logo-k, 1)) !important;
  height:calc(100% * var(--logo-k, 1)) !important;
  transform:none !important;
  background-size:contain !important; background-position:center !important; background-repeat:no-repeat !important; opacity:1 !important;
}
html body.home-page .game .bg.logo-bg::before,
html body.home-page .neo-games-section .game .bg::before{ display:none !important; opacity:0 !important; }
/* Pas de zoom au survol. theme.css applique ici un
   "translate(-50%,-50%) scale(...)" prevu pour un logo centre PAR translation ;
   comme on l'a repositionne en haut a gauche (top/left:0, 100 % x 100 %), cette
   translation le projetait hors de la tuile — d'ou l'effet de zoom geant.
   Le selecteur reprend le leur, prefixe de "html", pour passer devant. */
html body.home-page .game:hover .bg.logo-bg::after,
html body.home-page .game:focus-within .bg.logo-bg::after{
  transform:none !important;
  top:calc(50% * (1 - var(--logo-k, 1))) !important;
  left:0 !important; right:0 !important; margin-inline:auto !important;
  width:calc(100% * var(--logo-k, 1)) !important;
  height:calc(100% * var(--logo-k, 1)) !important;
}
html body.home-page .game .content{
  background:none !important; border:0 !important; border-top:1px solid var(--dj-line) !important;
  padding:11px 14px 14px !important;
  /* le logo est centre dans sa tuile : le nom du jeu s'aligne dessous */
  text-align:center !important;
}
/* theme.css impose "-webkit-text-fill-color:var(--ink)" (bleu nuit) sur ces
   titres : sans le neutraliser, le nom du jeu reste invisible sur fond sombre. */
html body.home-page .game .content small{
  color:var(--dj-mut) !important;
  font-size:11px !important;
}
html body.home-page .game .content h3{
  color:#fff !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:700 !important;
  font-size:.82rem !important; text-transform:none !important; letter-spacing:0 !important; margin:3px 0 0 !important;
}
html body.home-page .game:before, html body.home-page .game:after{ content:none !important; }


/* ================ CARROUSEL DES HAUSSES / BAISSES ==================
   Le bloc vient du theme clair : noms de cartes et sous-titres etaient en
   --ink (bleu nuit), donc invisibles sur le fond sombre. */
/* Le carrousel ouvre le contenu, juste sous le hero : pas de marge haute a
   ajouter, .page apporte deja son rembourrage. */

/* l'emoji cede la place a un filet colore, comme les autres titres de section :
   vert pour les hausses, rouge pour les baisses. */





/* les vignettes : aucun cadre, l'illustration se suffit */
html body .mover{
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; text-decoration:none !important;
}






/* rouge eclairci : le rouge de marque tombe a 4,3:1 sur le fond sombre (sous le
   seuil AA) et paraissait terne face au vert des hausses. */



/* ============================== FOOTER ============================== */
html body .footer{
  background:none !important; border-top:1px solid var(--dj-line) !important;
  box-shadow:none !important; color:var(--dj-mut) !important; margin-top:0 !important;
  padding:26px var(--dj-gut) 20px !important;
}
html body .footer::before, html body .footer::after{ display:none !important; }
html body .footer-inner{ max-width:var(--dj-max) !important; }
html body .footer .footer-brand-logo{ display:none !important; }
html body .footer .brand-wordmark{ font-family:'Inter',system-ui,sans-serif !important; font-weight:800 !important; font-style:normal !important; font-size:15px !important; }
html body .footer .brand-wordmark-my, html body .footer .brand-wordmark-price{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
html body .footer .brand-wordmark-tcg{ color:var(--dj-red) !important; -webkit-text-fill-color:var(--dj-red) !important; }
html body .footer .footer-brand p{ color:var(--dj-mut) !important; font-family:'Inter',system-ui,sans-serif !important; font-size:13px !important; }
html body .footer .footer-links a{ color:var(--dj-mut) !important; font-weight:600 !important; }
html body .footer .footer-links a:hover{ color:var(--dj-red) !important; }
/* lien "Quote tool / Pro" : il restait en bleu nuit sur fond sombre */
html body .footer a.footer-link-pro,
html body .footer a.footer-link-pro .pro-tag{
  color:var(--dj-mut) !important;
}
html body .footer a.footer-link-pro:hover,
html body .footer a.footer-link-pro:hover .pro-tag{
  color:var(--dj-red) !important;
}
html body .footer .footer-bottom{ color:var(--dj-mut) !important; border-top:1px solid var(--dj-line) !important; }
html body .feedback-fab{ background:var(--dj-red) !important; color:#fff !important; border:0 !important; box-shadow:0 10px 26px rgba(224,48,58,.35) !important; }


/* ===================== BARRE DU BAS (mobile) =======================
   Elle etait restee en clair : meme palette que le bandeau du haut. */
html body .bottom-nav{
  background:rgba(14,16,21,.94) !important;
  border-top:1px solid var(--dj-line) !important;
  border-left:0 !important; border-right:0 !important; border-bottom:0 !important;
  border-radius:0 !important;
  box-shadow:0 -10px 30px rgba(0,0,0,.45) !important;
  backdrop-filter:blur(16px) !important; -webkit-backdrop-filter:blur(16px) !important;
}
html body .bottom-nav .bnav-item{
  color:var(--dj-mut) !important; background:none !important; background-image:none !important;
  border:0 !important; box-shadow:none !important;
}
html body .bottom-nav .bnav-item .bnav-label{ color:inherit !important; }
html body .bottom-nav .bnav-item.active{
  color:#fff !important;
  background:rgba(224,48,58,.16) !important; background-image:none !important;
  box-shadow:none !important;   /* halo violet de l'ancien theme */
}
html body .bottom-nav .bnav-item.active svg{ color:var(--dj-red) !important; }
/* volets coulissants (jeux / collection) */
html body .bnav-sheet{
  background:rgba(14,16,21,.98) !important; color:var(--dj-txt) !important;
  border:1px solid var(--dj-line2) !important; box-shadow:0 -20px 60px rgba(0,0,0,.6) !important;
}
html body .bnav-sheet .bnav-sheet-title{ color:#fff !important; }
html body .bnav-sheet .bnav-grip{ background:var(--dj-line2) !important; }
html body .bnav-sheet .bnav-close{ color:var(--dj-mut) !important; background:rgba(255,255,255,.06) !important; border:1px solid var(--dj-line) !important; }
html body .bnav-sheet .bnav-game,
html body .bnav-sheet .colmenu-link{
  background:rgba(255,255,255,.04) !important; border:1px solid var(--dj-line) !important; color:var(--dj-txt) !important;
}
html body .bnav-sheet .bnav-game.active{ background:rgba(224,48,58,.16) !important; border-color:rgba(224,48,58,.4) !important; }
html body .bnav-sheet .colmenu-link strong{ color:#fff !important; }
html body .bnav-sheet .colmenu-link small{ color:var(--dj-mut) !important; }
html body .bnav-backdrop{ background:rgba(4,5,8,.66) !important; }


/* ============================ RESPONSIVE ============================ */
@media (max-width:1120px){
  html body.home-page .games{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
  html body.home-page .neo-feature-strip,
  html body.home-page .neo-feature-strip:has(> :nth-child(5)){ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  html body.home-page .neo-feature-card:nth-child(3){ border-left:0 !important; }
  html body.home-page .neo-feature-card:nth-child(n+3){ border-top:1px solid var(--dj-line) !important; }
  html body.home-page .neo-feature-card:nth-child(5){ border-left:0 !important; }
  
}

@media (max-width:900px){
  /* le hero s'empile : le texte, puis l'anneau centre en dessous */
  html body.home-page .dh-rank{ width:min(196px, 54vw); margin:30px auto 0; margin-right:auto; }
  html body.home-page .dojo-hero{ min-height:0; }
  html body.home-page .dojo-hero::after{
    background:linear-gradient(180deg, rgba(11,12,16,.7) 0%, transparent 16%),
               linear-gradient(180deg, transparent 70%, var(--dj-bg) 100%);
  }
  html body.home-page .dh-wrap{ display:block; padding:34px var(--dj-gut) 40px; }
  html body.home-page .dh-inner{ max-width:none; }
  
  html body.home-page .dh-rotate{ max-width:none; }
  html body.home-page .games{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width:820px){
  /* Sous 820px la navigation passe par la barre du bas : on ne garde que la
     marque et le selecteur de langue.
     Les colonnes repassent en "auto" : en 1fr auto 1fr, la marque — devenue
     plus large avec la marque a trois cartes — debordait de sa demi-largeur
     et chevauchait FR/EN. */
  html body .site-header .nav .nav-inner{
    min-height:56px; grid-template-columns:auto auto; justify-content:space-between; gap:10px;
  }
  html body .site-header .nav .nav-links{ display:none !important; }
  html body .site-header .nav .brand{ margin:0 0 0 -8px !important; padding:6px 8px !important; }
  html body .site-header .nav .brand .brand-logo{ height:24px !important; }
  html body .site-header .nav .brand .brand-wordmark{ font-size:17px !important; }
}

@media (max-width:560px){
  html body.home-page .neo-feature-strip,
  html body.home-page .neo-feature-strip:has(> :nth-child(5)){ grid-template-columns:1fr !important; }
  html body.home-page .neo-feature-card{ border-left:0 !important; border-top:1px solid var(--dj-line) !important; }
  html body.home-page .neo-feature-card:first-child{ border-top:0 !important; }
  /* Une tuile par ligne etirait la section sur toute la hauteur de l'ecran :
     on garde deux jeux par ligne, avec un nom un peu plus compact. */
  html body.home-page .games{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:8px !important; }
  html body.home-page .game .content{ padding:9px 10px 11px !important; }
  html body.home-page .game .content small{ font-size:10px !important; }
  html body.home-page .game .content h3{ font-size:.74rem !important; line-height:1.25 !important; }
  html body.home-page .dh-title{ font-size:clamp(58px, 19vw, 96px); }
  html body.home-page .dh-actions{ gap:14px; }
}

@media (prefers-reduced-motion:reduce){
  html body.home-page .neo-games-section .game:hover{ transform:none !important; }
}


/* ====================================================================
   PAGES DE JEU — refonte dojo
   ====================================================================
   Meme grammaire que l'accueil : surfaces a peine plus claires que le fond,
   filets fins plutot que cadres, titres en Anton, rouge en seul accent.

   Portee : body.game-page. La page dojo partage cette classe (elle ne definit
   pas de page_type), donc tout ce qui touche aux cartes est scope sous
   .results-section, .search-panel ou .hero — trois conteneurs qui n'existent
   que sur les pages de jeu.

   Les couleurs de RARETE sont conservees comme information : c'est une echelle,
   pas une decoration. Elles passent en teinte + filet sur fond sombre au lieu
   de pastilles pleines.
   ==================================================================== */
:root{
  --dj-t-chase:#ffcf5c;      /* God / Secret Rare */
  --dj-t-secret:#c084fc;     /* Concept, Special... */
  --dj-t-super:#60a5fa;
  --dj-t-rare:#5eead4;
  --dj-t-uncommon:#4ade80;
  --dj-t-common:#9aa1b2;
}

/* ---------- 1. L'identite du jeu ----------
   Le bloc etait un empilement decoratif : une pastille qui redisait le titre
   de la page, un logo pose la sans rien pour l'asseoir, une accroche qui
   parlait de l'outil plutot que de ce qu'on vient chercher.

   Il suit desormais le meme rythme que la colonne de droite — identite, une
   phrase, un filet, une ligne de faits en libelle/valeur — ce qui fait rimer
   les deux colonnes au lieu de les opposer. La pastille est supprimee : sa
   place revient a deux informations reelles.
   ==================================================================== */
html body.game-page .hero{
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 0 26px !important; min-height:0 !important;
}
html body.game-page .hero::before, html body.game-page .hero::after{ display:none !important; }

html body.game-page .game-title-row{
  display:flex !important; align-items:center !important; gap:16px !important; margin:0 !important;
}

/* Le logo passe devant, pose sur un halo a SES couleurs — les memes variables
   par jeu que le halo de page. Un halo et non un cadre : il met en valeur sans
   ajouter une boite de plus. Le degrade est empile deux fois parce que --g1 est
   regle pour teinter une page entiere ; a cette taille il faut le densifier. */
html body.game-page .game-logo-wrap{
  position:relative !important; display:inline-flex !important; flex:0 0 auto !important;
  align-items:center !important; justify-content:center !important;
  padding:16px 26px !important;
}
html body.game-page .game-logo-wrap::before{
  content:"" !important; position:absolute !important; inset:0 !important;
  z-index:0 !important; pointer-events:none !important;
  background:
    radial-gradient(56% 62% at 50% 50%, var(--g1, rgba(224,48,58,.26)), transparent 70%),
    radial-gradient(56% 62% at 50% 50%, var(--g1, rgba(224,48,58,.26)), transparent 70%),
    radial-gradient(72% 80% at 50% 50%, rgba(255,255,255,.055), transparent 74%) !important;
  filter:blur(7px) !important;
}
html body.game-page .game-logo-wrap > img{ position:relative !important; z-index:1 !important; }

html body.game-page .game-page-logo{
  height:66px !important; width:auto !important; max-width:180px !important;
  background:none !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; box-shadow:none !important; object-fit:contain !important;
}
html body.game-page .hero h1, html body.game-page .game-title-row h1{
  font-family:var(--impact) !important; font-weight:400 !important;
  font-size:clamp(30px, 4.4vw, 54px) !important; line-height:1 !important;
  letter-spacing:.5px !important; text-transform:uppercase !important;
  color:#fff !important;
  background:none !important; margin:0 !important; text-shadow:none !important;
}
html body.game-page .hero .lead{
  color:var(--dj-mut) !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:14.5px !important;
  font-weight:400 !important; margin:14px 0 0 !important; max-width:460px !important;
}

/* Les deux faits, exactement dans la grammaire de la ligne du set selectionne :
   micro-libelle en capitales au-dessus, valeur en blanc en dessous, un filet
   au-dessus du groupe. C'est ce qui raccorde le haut de page au reste. */
html body.game-page .game-facts{
  display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important;
  gap:13px 28px !important; margin:20px 0 0 !important; padding:15px 0 0 !important;
  border-top:1px solid var(--dj-line) !important; max-width:460px !important;
}
html body.game-page .game-fact{
  display:flex !important; flex-direction:column !important; gap:4px !important;
}
html body.game-page .game-fact-label{
  color:var(--dj-mut) !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:9.5px !important; font-weight:800 !important; letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
html body.game-page .game-fact-value{
  color:#fff !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-weight:700 !important; font-size:14px !important;
  font-variant-numeric:tabular-nums !important;
}

/* ---------- 2. Panneau de recherche ---------- */
/* Un panneau encadre, qui contient des champs encadres, qui contiennent des
   pastilles encadrees : trois niveaux de boites pour une seule action. On
   supprime le cadre exterieur. Ce qui porte la recherche, c'est la barre
   elle-meme (plus bas), pas un conteneur autour d'elle. */
html body.game-page .search-panel{
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; backdrop-filter:none !important;
  padding:0 !important; margin:0 0 24px !important;
}
html body.game-page .search-panel h2{
  font-family:var(--impact) !important; font-weight:400 !important; font-size:15px !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important;
  color:#fff !important;
  display:flex !important; align-items:center !important; gap:11px !important; margin:0 0 6px !important;
}
html body.game-page .search-panel h2::before{
  content:"" !important; width:18px; height:3px; background:var(--dj-red); border-radius:2px; flex:0 0 auto;
}
html body.game-page .search-panel > p{
  color:var(--dj-mut) !important;
  font-size:13.5px !important; margin:0 0 18px !important;
}

/* champs de saisie et liste deroulante de sets */
html body.game-page .scb-input,
html body.game-page .search-panel input[type="text"],
html body.game-page .search-panel select{
  background:rgba(255,255,255,.05) !important; color:var(--dj-txt) !important;

  border:1px solid var(--dj-line2) !important; border-radius:12px !important;
  box-shadow:none !important; font-family:'Inter',system-ui,sans-serif !important;
  font-size:14px !important; padding:13px 15px !important;
}
/* Texte d'exemple nettement attenue. Le champ impose -webkit-text-fill-color (texte clair),
   que le placeholder herite dans Chrome/Safari/Edge : sans le redefinir ici, l'exemple
   s'affichait aussi clair qu'un vrai texte saisi. */
html body.game-page .scb-input::placeholder,
html body.game-page .search-panel input::placeholder{
  color:#5d6373 !important; opacity:1 !important;
}
html body.game-page .scb-input:focus,
html body.game-page .search-panel input:focus{
  outline:none !important; border-color:rgba(224,48,58,.55) !important;
  background:rgba(255,255,255,.07) !important;
}
html body.game-page .searchable-combobox{ background:none !important; border:0 !important; }
html body.game-page .scb-list{
  background:#12141b !important; border:1px solid var(--dj-line2) !important;
  border-radius:14px !important; box-shadow:0 24px 60px rgba(0,0,0,.6) !important;
}
html body.game-page .scb-list > *{ color:var(--dj-txt) !important; }
html body.game-page .scb-list > *:hover,
html body.game-page .scb-list > .on{ background:rgba(255,255,255,.07) !important; }
html body.game-page .scb-head{ background:none !important; border-bottom:1px solid var(--dj-line) !important; }
html body.game-page .scb-title{ color:#fff !important; }
html body.game-page .scb-cancel, html body.game-page .scb-clear{
  color:var(--dj-mut) !important;
  background:none !important; border:0 !important;
}

/* bouton principal : le rouge du dojo, plus de degrade violet */
html body.game-page .search-panel button[type="submit"]{
  background:var(--dj-red) !important; background-image:none !important;
  color:#fff !important;
  border:0 !important; border-radius:12px !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:800 !important;
  font-size:14px !important; letter-spacing:.02em !important; text-transform:none !important;
  padding:14px 20px !important; transition:background-color .15s ease !important;
}
html body.game-page .search-panel button[type="submit"]:hover{ background:#f0434d !important; }

/* ---------- Les raccourcis du set ----------
   Treize pastilles encadrees, chacune avec son fond, son filet et son ombre :
   c'est la meme faute que le reste, en pire, parce qu'elles sont nombreuses.
   Elles deviennent du TEXTE. Le fond n'apparait qu'au survol et sur le
   raccourci actif — ce qui donne au passage un "vous etes ici" que la rangee
   n'avait pas : rien n'indiquait quelle rarete etait affichee.

   Les couleurs de rarete sont conservees telles quelles : c'est une echelle
   d'information, pas une decoration. Elles passent simplement du cadre au
   texte, ou elles se lisent mieux.

   Les regles a neutraliser viennent de style.css et theme.css, toutes deux
   portees par l'ID #top-buttons : il faut le reprendre pour les depasser. */
html body.game-page #top-buttons .btn,
html body.game-page #top-buttons .all-btn,
html body.game-page #top-buttons .top-btn,
html body.game-page #top-buttons .rarity-btn{
  background:none !important; background-image:none !important;
  border:0 !important; border-radius:9px !important;
  box-shadow:none !important; text-shadow:none !important;
  transform:none !important; filter:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important;
  font-size:12.5px !important; letter-spacing:0 !important; text-transform:none !important;
  padding:7px 11px !important; line-height:1.35 !important;
  transition:background-color .14s ease, color .14s ease !important;
}
/* Toutes les cartes / Top 10 / Top 20 : ce sont des VUES, pas des filtres de
   rarete — elles restent neutres, la couleur est reservee a l'echelle. */
html body.game-page #top-buttons .all-btn,
html body.game-page #top-buttons .top-btn{
  color:var(--dj-txt) !important;
}
html body.game-page #top-buttons .all-btn:hover,
html body.game-page #top-buttons .top-btn:hover{
  background:rgba(255,255,255,.08) !important; transform:none !important; filter:none !important;
  background-image:none !important;
}
html body.game-page #top-buttons .all-btn.active,
html body.game-page #top-buttons .top-btn.active{
  background:rgba(255,255,255,.12) !important; background-image:none !important;
  color:#fff !important;
  font-weight:800 !important; box-shadow:none !important;
}
/* respiration entre les deux groupes, sans filet : un filet vertical se
   retrouverait en debut de ligne des que la rangee passe a la ligne */
html body.game-page #top-buttons .top-btn + .rarity-btn{ margin-left:15px !important; }

/* rarete sans tier connu */
html body.game-page #top-buttons .rarity-btn{
  color:var(--dj-mut) !important;
}
html body.game-page #top-buttons .rarity-btn:hover{ background:rgba(255,255,255,.07) !important; }
html body.game-page #top-buttons .rarity-btn[data-tier="chase"]{
  color:var(--dj-t-chase) !important;
  background:none !important; background-image:none !important; border:0 !important;
  box-shadow:none !important; text-shadow:none !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="chase"]:hover{ background:rgba(255,207,92,.14) !important; }
html body.game-page #top-buttons .rarity-btn[data-tier="chase"].active{
  background:rgba(255,207,92,.22) !important; font-weight:800 !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="secret"]{
  color:var(--dj-t-secret) !important;
  background:none !important; background-image:none !important; border:0 !important;
  box-shadow:none !important; text-shadow:none !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="secret"]:hover{ background:rgba(192,132,252,.14) !important; }
html body.game-page #top-buttons .rarity-btn[data-tier="secret"].active{
  background:rgba(192,132,252,.22) !important; font-weight:800 !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="super"]{
  color:var(--dj-t-super) !important;
  background:none !important; background-image:none !important; border:0 !important;
  box-shadow:none !important; text-shadow:none !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="super"]:hover{ background:rgba(96,165,250,.14) !important; }
html body.game-page #top-buttons .rarity-btn[data-tier="super"].active{
  background:rgba(96,165,250,.22) !important; font-weight:800 !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="leader"]{
  color:var(--dj-t-rare) !important;
  background:none !important; background-image:none !important; border:0 !important;
  box-shadow:none !important; text-shadow:none !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="leader"]:hover{ background:rgba(94,234,212,.14) !important; }
html body.game-page #top-buttons .rarity-btn[data-tier="leader"].active{
  background:rgba(94,234,212,.22) !important; font-weight:800 !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="rare"]{
  color:var(--dj-t-rare) !important;
  background:none !important; background-image:none !important; border:0 !important;
  box-shadow:none !important; text-shadow:none !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="rare"]:hover{ background:rgba(94,234,212,.14) !important; }
html body.game-page #top-buttons .rarity-btn[data-tier="rare"].active{
  background:rgba(94,234,212,.22) !important; font-weight:800 !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="uncommon"]{
  color:var(--dj-t-uncommon) !important;
  background:none !important; background-image:none !important; border:0 !important;
  box-shadow:none !important; text-shadow:none !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="uncommon"]:hover{ background:rgba(74,222,128,.14) !important; }
html body.game-page #top-buttons .rarity-btn[data-tier="uncommon"].active{
  background:rgba(74,222,128,.22) !important; font-weight:800 !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="common"]{
  color:var(--dj-t-common) !important;
  background:none !important; background-image:none !important; border:0 !important;
  box-shadow:none !important; text-shadow:none !important;
}
html body.game-page #top-buttons .rarity-btn[data-tier="common"]:hover{ background:rgba(154,161,178,.14) !important; }
html body.game-page #top-buttons .rarity-btn[data-tier="common"].active{
  background:rgba(154,161,178,.22) !important; font-weight:800 !important;
}

/* Rappels sous le formulaire. Le gabarit ne les rend plus des qu'un set est
   choisi : ce sont des consignes de depart, pas une legende permanente. Tant
   qu'ils sont la, ils sont du texte separe par un filet, pas deux pastilles. */
html body.game-page .hint{ display:block !important; margin:14px 0 0 !important; }
html body.game-page .hint .pill{
  display:inline !important; background:none !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important;
  color:var(--dj-mut) !important;
  font-weight:500 !important; font-size:12.5px !important;
}
html body.game-page .hint .pill + .pill{
  border-left:1px solid var(--dj-line2) !important;
  margin-left:13px !important; padding-left:13px !important;
}

/* Les raccourcis sortent du formulaire (ce sont des liens de navigation, pas
   des champs) et n'existent dans le gabarit qu'une fois un set choisi.
   Ils forment UNE surface, pas une rangee d'objets libres : c'est ce qui les
   rattache a la barre de recherche au lieu de flotter entre elle et la ligne
   du set. En grande largeur ils en deviennent litteralement la 2e ligne. */
/* la barre de raretes des resultats « tous les sets » est faite de LIENS (une recherche
   relancee), pas de boutons : meme habillage, sans le souligne. */
html body.game-page #top-buttons a.btn{ text-decoration:none !important; display:inline-block; }
html body.game-page #top-buttons.tb-anyset{ margin-top:14px !important; }
html body.game-page #top-buttons{
  display:flex !important; flex-wrap:wrap !important;
  align-items:center !important; gap:3px !important;
  margin:12px 0 0 !important; padding:8px 9px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--dj-line) !important; border-radius:14px !important;
}

/* ---------- 3. Le set selectionne ----------
   C'etait une carte pleine largeur, avec a l'interieur des pastilles encadrees :
   une boite dans une boite dans une boite. Elle devient une LIGNE de contexte
   sous la barre de recherche, posee sur un simple filet.

   Rien n'est retire — nom, code, date, nombre de cartes, prix des produits
   scelles sont tous la. Ce qui change, c'est qu'ils sont mis bout a bout au
   lieu d'etre empiles dans des cadres. Chaque element garde son couple
   libelle/valeur sur deux lignes : cette paire suffit a le delimiter, aucun
   cadre n'est necessaire pour ca. La ligne n'occupe plus que sa largeur utile
   et retombe naturellement en dessous quand la place manque.
   ==================================================================== */
html body.game-page .set-info-card{
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; padding:15px 0 0 !important; margin:17px 0 0 !important;
  border-top:1px solid var(--dj-line) !important;
  display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important;
  gap:14px 26px !important;
}
html body.game-page .set-info-head{ margin:0 !important; gap:4px !important; }
html body.game-page .set-info-eyebrow{
  font-family:var(--impact) !important; font-weight:400 !important;
  font-size:10.5px !important; letter-spacing:1.7px !important;
  text-transform:uppercase !important; color:var(--dj-red) !important;

}
html body.game-page .set-info-name{
  font-family:'Inter',system-ui,sans-serif !important; font-weight:800 !important;
  font-size:16px !important; color:#fff !important;
  gap:9px !important;
}
html body.game-page .set-info-abbr{
  background:rgba(224,48,58,.14) !important; border:1px solid rgba(224,48,58,.3) !important;
  color:#f3a6ab !important;
  border-radius:999px !important; padding:2px 8px !important; font-weight:700 !important;
  font-size:10.5px !important; box-shadow:none !important;
}

/* date, nombre de cartes, produits scelles : meme ligne, sans cadres */
html body.game-page .set-info-meta,
html body.game-page .set-info-sealed{
  display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important;
  gap:14px 26px !important; margin:0 !important;
}
html body.game-page .set-info-pill{
  background:none !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:0 !important; gap:8px !important; align-items:center !important;
}
html body.game-page .set-info-ico{
  color:var(--dj-mut) !important; width:14px !important; height:14px !important;
}
html body.game-page .set-info-pill-label{
  color:var(--dj-mut) !important;
  font-size:9.5px !important; font-weight:800 !important; letter-spacing:.08em !important;
}
html body.game-page .set-info-pill-value{
  color:#fff !important;
  font-weight:700 !important; font-size:14px !important;
  font-variant-numeric:tabular-nums !important;
}
html body.game-page .set-info-sealed-pill{
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; padding:0 !important;
  color:var(--dj-txt) !important; transition:none !important;
}
/* le survol ne deplace plus la pastille (il n'y a plus de pastille) : c'est le
   prix qui s'allume, ce qui indique le lien sans rien faire bouger */
html body.game-page a.set-info-sealed-pill:hover{
  border-color:transparent !important; transform:none !important;
}
html body.game-page a.set-info-sealed-pill:hover .set-info-pill-value{
  color:var(--dj-red) !important;
}
html body.game-page .set-info-sealed-img{
  width:26px !important; height:26px !important; border-radius:4px !important;
  background:none !important;
}

/* ---------- 4. En-tete des resultats ---------- */
html body.game-page .results-section{
  background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}
html body.game-page .results-section .head{
  background:none !important; border:0 !important; border-bottom:1px solid var(--dj-line) !important;
  box-shadow:none !important; padding:0 0 16px !important; margin:0 0 22px !important;
}
html body.game-page .results-section .head h2{
  font-family:var(--impact) !important; font-weight:400 !important; font-size:15px !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important;
  color:#fff !important;
}
html body.game-page .results-section .head p{
  color:var(--dj-mut) !important; font-size:13.5px !important;
}
html body.game-page .top-title-badge,
html body.game-page .all-title-badge,
html body.game-page .rarity-title-badge,
html body.game-page .variant-title-badge{
  background:rgba(224,48,58,.14) !important; background-image:none !important;
  border:1px solid rgba(224,48,58,.32) !important; border-radius:999px !important;
  color:#f3a6ab !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:800 !important;
  font-size:12px !important; padding:6px 13px !important; box-shadow:none !important;
}
html body.game-page .results-search-btn{
  background:rgba(255,255,255,.05) !important; background-image:none !important;
  border:1px solid var(--dj-line2) !important; border-radius:999px !important;
  color:var(--dj-mut) !important;
  font-weight:700 !important; font-size:12.5px !important; padding:7px 14px !important;
  box-shadow:none !important;
}
html body.game-page .results-search-btn:hover{ color:#fff !important; background:rgba(255,255,255,.1) !important; }
html body.game-page .sort-select{
  background:rgba(255,255,255,.05) !important; color:var(--dj-txt) !important;
  border:1px solid var(--dj-line2) !important; border-radius:10px !important;
  padding:9px 12px !important; box-shadow:none !important;
}
html body.game-page .sort-bar label{ color:var(--dj-mut) !important; font-size:12.5px !important; }





/* ---------- 5. La grille de cartes ---------- */
html body.game-page .results-section .grid{ gap:14px !important; }
html body.game-page .results-section .card{
  background:rgba(255,255,255,.035) !important; background-image:none !important;
  border:1px solid var(--dj-line) !important; border-radius:16px !important;
  box-shadow:none !important; overflow:hidden !important;
  transition:background-color .16s ease, border-color .16s ease !important;
}
html body.game-page .results-section .card:hover{
  background:rgba(255,255,255,.055) !important; border-color:var(--dj-line2) !important;
  transform:none !important;
}
html body.game-page .results-section .card-media{ background:none !important; border:0 !important; }
html body.game-page .results-section .card-media img{ border-radius:10px !important; }
html body.game-page .results-section .info{ background:none !important; }
html body.game-page .results-section .card .name,
html body.game-page .results-section .card .name a{
  color:#fff !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:700 !important;
  font-size:14px !important; line-height:1.3 !important; text-decoration:none !important;
}
html body.game-page .results-section .card .name a:hover{ color:var(--dj-red) !important; }
html body.game-page .results-section .card .meta,
html body.game-page .results-section .card .meta strong,
html body.game-page .results-section .cc-set{
  color:var(--dj-mut) !important;
  font-size:12px !important; font-weight:500 !important;
}
/* la pastille de rarete sur la carte */
html body.game-page .results-section .card .tag,
html body.game-page .results-section .cc-rarity{
  background:rgba(255,255,255,.06) !important; background-image:none !important;
  border:1px solid var(--dj-line2) !important; border-radius:999px !important;
  color:var(--dj-mut2) !important;
  font-weight:700 !important; font-size:11px !important; padding:4px 10px !important;
  box-shadow:none !important; text-transform:none !important;
}
html body.game-page .results-section .cc-variant{
  background:rgba(255,255,255,.05) !important; border:1px solid var(--dj-line) !important;
  border-radius:999px !important; color:var(--dj-mut) !important;
  font-size:11px !important; padding:4px 9px !important;
}
html body.game-page .results-section .cc-variant.empty{ opacity:.5 !important; }

/* les prix : le prix marche est le seul en blanc, les autres reculent */
html body.game-page .results-section .sku-table{
  background:rgba(0,0,0,.22) !important; border:1px solid var(--dj-line) !important;
  border-radius:12px !important; box-shadow:none !important; overflow:hidden !important;
}
html body.game-page .results-section .sku-table th{
  background:rgba(255,255,255,.03) !important; color:var(--dj-mut) !important;
 font-weight:600 !important;
  font-size:10.5px !important; text-transform:none !important; border:0 !important;
  border-bottom:1px solid var(--dj-line) !important;
}
html body.game-page .results-section .sku-table td{
  color:var(--dj-mut2) !important;
  font-size:12px !important; border:0 !important; border-top:1px solid var(--dj-line) !important;
  background:none !important;
}

html body.game-page .results-section .cc-unit,
html body.game-page .results-section .gblack{
  color:#fff !important;
  font-weight:800 !important; background:none !important;
}
html body.game-page .results-section .cc-prices{ background:none !important; }

/* boutons de la carte */
html body.game-page .results-section .pull-open-btn,
html body.game-page .results-section a.pull-login-link{
  background:var(--dj-red) !important; background-image:none !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  border:0 !important; border-radius:999px !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:800 !important;
  font-size:12px !important; text-shadow:none !important; padding:8px 14px !important;
}
html body.game-page .results-section .pull-open-btn:hover,
html body.game-page .results-section a.pull-login-link:hover{ background:#f0434d !important; }
html body.game-page .results-section .card-details-btn{
  background:rgba(255,255,255,.06) !important; background-image:none !important;
  border:1px solid var(--dj-line2) !important; border-radius:10px !important;
  color:var(--dj-txt) !important;
  font-weight:700 !important; font-size:11.5px !important; letter-spacing:.02em !important;
  box-shadow:none !important; text-transform:uppercase !important;
}
html body.game-page .results-section .card-details-btn:hover{ background:rgba(255,255,255,.11) !important; border-color:rgba(255,255,255,.26) !important; }
html body.game-page .results-section .zoom-btn{
  background:rgba(10,12,16,.72) !important; border:1px solid var(--dj-line2) !important;
  color:#fff !important; border-radius:999px !important; box-shadow:none !important;
  backdrop-filter:blur(6px) !important;
}
html body.game-page .results-section .zoom-btn:hover{ background:var(--dj-red) !important; border-color:var(--dj-red) !important; }

/* compteur de quantite */
html body.game-page .results-section .cstep{
  background:rgba(0,0,0,.25) !important; border:1px solid var(--dj-line) !important;
  border-radius:999px !important; box-shadow:none !important;
}
html body.game-page .results-section .cstep-btn{
  background:none !important; border:0 !important; color:var(--dj-mut) !important;
 box-shadow:none !important;
}
html body.game-page .results-section .cstep-btn:hover{ color:#fff !important; background:rgba(255,255,255,.08) !important; }
html body.game-page .results-section .cstep-qty{
  color:#fff !important; font-weight:800 !important;
  font-size:14px !important; background:none !important; border:0 !important;
}

/* liens marchands : la vignette reste claire, le logo doit rester lisible */
html body.game-page .results-section .market-link-btn,
html body.game-page .results-section .market-icon-btn{
  background:rgba(255,255,255,.9) !important; background-image:none !important;
  border:1px solid var(--dj-line2) !important; border-radius:10px !important;
  box-shadow:none !important; transition:background-color .15s ease !important;
}
html body.game-page .results-section .market-link-btn:hover,
html body.game-page .results-section .market-icon-btn:hover{ background:#fff !important; }
html body.game-page .results-section .buttons{ background:none !important; border:0 !important; }
html body.game-page .results-section .market-col{ background:none !important; }

/* etiquette de variante a cote du compteur ("Normal", "Foil"...) */
html body.game-page .results-section .cstep-tag{
  color:var(--dj-mut) !important;
  background:rgba(255,255,255,.05) !important; border:1px solid var(--dj-line) !important;
  border-radius:999px !important; font-size:11px !important; font-weight:600 !important;
  padding:3px 9px !important; box-shadow:none !important;
}

/* pagination : les numeros de page sont des .btn.page-num, le compteur un
   .pagination-status — tous deux restes en bleu nuit du theme clair. */
html body.game-page .pagination{ background:none !important; border:0 !important; }
html body.game-page .pagination-status{
  color:var(--dj-mut) !important;
  font-size:12.5px !important; font-weight:600 !important;
}
html body.game-page .pagination .page-num,
html body.game-page .pagination a,
html body.game-page .pagination span{
  background:rgba(255,255,255,.05) !important; background-image:none !important;
  border:1px solid var(--dj-line) !important;
  color:var(--dj-mut) !important;
  border-radius:10px !important; box-shadow:none !important; font-weight:700 !important;
}
html body.game-page .pagination .page-num:hover,
html body.game-page .pagination a:hover{
  background:rgba(255,255,255,.1) !important; color:#fff !important;
 border-color:var(--dj-line2) !important;
}
html body.game-page .pagination .page-num.active,
html body.game-page .pagination .current{
  background:var(--dj-red) !important; color:#fff !important;
 border-color:var(--dj-red) !important;
}


/* ---------- 6. Le bloc de prix ----------
   Le gabarit d'origine est un tableau de 4 colonnes. Dans la colonne
   d'information d'une carte il ne dispose que de ~167 px : 33 px utiles par
   cellule, ou "414.00 EUR" ne rentre pas. Les montants se chevauchaient.

   On le repasse donc en 4 LIGNES appariees (libelle a gauche, montant a
   droite) grace a une grille : thead / tbody / tr passent en display:contents,
   puis chaque th et son td sont places explicitement sur la meme rangee.
   Le gain n'est pas que de place — c'est la lecture naturelle d'une fiche de
   prix, et le prix marche peut enfin etre mis en avant.

   Garde-fou : la mise en grille n'est appliquee QUE si le tableau n'a qu'une
   seule ligne de donnees (:has(tbody tr:only-child)). Une carte a plusieurs
   variantes garde le tableau classique, ou l'appariement n'aurait aucun sens. */
html body.game-page .results-section .sku-table:has(tbody tr:only-child){
  display:grid !important; grid-template-columns:1fr auto !important;
  gap:0 12px !important; width:100% !important; align-items:baseline !important;
  background:rgba(0,0,0,.22) !important; border:1px solid var(--dj-line) !important;
  border-radius:12px !important; padding:11px 13px !important;
  overflow:visible !important; border-collapse:separate !important;
}
html body.game-page .results-section .sku-table:has(tbody tr:only-child) thead,
html body.game-page .results-section .sku-table:has(tbody tr:only-child) tbody,
html body.game-page .results-section .sku-table:has(tbody tr:only-child) tr{
  display:contents !important;
}
html body.game-page .results-section .sku-table:has(tbody tr:only-child) th,
html body.game-page .results-section .sku-table:has(tbody tr:only-child) td{
  display:block !important; border:0 !important; background:none !important;
  padding:3px 0 !important; width:auto !important; white-space:nowrap !important;
}
html body.game-page .results-section .sku-table:has(tbody tr:only-child) th{
  text-align:left !important; color:var(--dj-mut) !important;

  font-weight:600 !important; font-size:11px !important; text-transform:none !important;
}
html body.game-page .results-section .sku-table:has(tbody tr:only-child) td{
  text-align:right !important; color:var(--dj-mut2) !important;

  font-weight:700 !important; font-size:12.5px !important;
  font-variant-numeric:tabular-nums !important;
}
/* appariement : chaque libelle et son montant sur la meme rangee */
html body.game-page .results-section .sku-table:has(tbody tr:only-child) th:nth-child(1){ grid-area:1 / 1 !important; }
html body.game-page .results-section .sku-table:has(tbody tr:only-child) td:nth-child(1){ grid-area:1 / 2 !important; }
html body.game-page .results-section .sku-table:has(tbody tr:only-child) th:nth-child(2){ grid-area:2 / 1 !important; }
html body.game-page .results-section .sku-table:has(tbody tr:only-child) td:nth-child(2){ grid-area:2 / 2 !important; }
html body.game-page .results-section .sku-table:has(tbody tr:only-child) th:nth-child(3){ grid-area:3 / 1 !important; }
html body.game-page .results-section .sku-table:has(tbody tr:only-child) td:nth-child(3){ grid-area:3 / 2 !important; }
html body.game-page .results-section .sku-table:has(tbody tr:only-child) th:nth-child(4){ grid-area:4 / 1 !important; }
html body.game-page .results-section .sku-table:has(tbody tr:only-child) td:nth-child(4){ grid-area:4 / 2 !important; }

/* la variante (Foil / Near Mint) sert d'en-tete au bloc */
html body.game-page .results-section .sku-table:has(tbody tr:only-child) td:nth-child(1){
  color:#fff !important; font-weight:800 !important;
}
html body.game-page .results-section .sku-table:has(tbody tr:only-child) td:nth-child(1) small{
  display:block !important; color:var(--dj-mut) !important;
 font-weight:500 !important; font-size:10.5px !important;
}
html body.game-page .results-section .sku-table:has(tbody tr:only-child) th:nth-child(1),
html body.game-page .results-section .sku-table:has(tbody tr:only-child) td:nth-child(1){
  padding-bottom:8px !important; margin-bottom:4px !important;
  border-bottom:1px solid var(--dj-line) !important;
}

/* le prix marche : seul element en blanc et en grand, c'est LE chiffre */
html body.game-page .results-section .sku-table:has(tbody tr:only-child) td.market-col,
html body.game-page .results-section .sku-table td.market-col{
  color:#fff !important;
  font-size:16px !important; font-weight:800 !important;
}
html body.game-page .results-section .sku-table:has(tbody tr:only-child) th.market-col,
html body.game-page .results-section .sku-table th.market-col{
  color:var(--dj-txt) !important; font-weight:700 !important;
}

/* Repli pour les tableaux a PLUSIEURS variantes, et pour les navigateurs sans
   :has() : on garde le tableau classique, mais lisible.
   Les EN-TETES doivent pouvoir revenir a la ligne : en les empechant, le
   tableau reclamait 280 px dans un conteneur de 188 et la derniere colonne
   sortait du cadre. Seuls les MONTANTS gardent le nowrap, eux ne doivent
   jamais se couper. */
html body.game-page .results-section .sku-table{
  table-layout:auto !important; width:100% !important; max-width:100% !important;
}
html body.game-page .results-section .sku-table th{
  white-space:normal !important; word-break:normal !important; hyphens:none !important;
}
html body.game-page .results-section .sku-table td{
  white-space:nowrap !important; font-variant-numeric:tabular-nums !important;
}


/* ====================================================================
   PAGES DE JEU — halo d'identite et composition de l'en-tete
   ====================================================================
   Le fond entierement noir manquait d'ancrage en haut de page. Plutot qu'une
   image — qui pese, et qui concurrence la grille de visuels de cartes, seule
   chose qu'on vient regarder ici — un halo en CSS aux couleurs du jeu.

   Les couleurs viennent de celles deja definies pour les tuiles de l'accueil
   (--glow1 / --glow2 de home.html), reprises ici a faible opacite : sur fond
   sombre elles doivent teinter, pas dominer. base.html expose desormais
   data-game sur le <body>, ce qui suffit a les selectionner.
   ==================================================================== */
html body[data-game="dbmasters"]   { --g1:rgba(255,190,80,.26);  --g2:rgba(124,92,255,.20); }
html body[data-game="dbfusion"]    { --g1:rgba(180,110,250,.26); --g2:rgba(0,190,255,.18); }
html body[data-game="onepiece"]    { --g1:rgba(0,190,255,.24);   --g2:rgba(124,92,255,.20); }
html body[data-game="lorcana"]     { --g1:rgba(120,200,255,.24); --g2:rgba(140,100,255,.22); }
html body[data-game="pokemon"]     { --g1:rgba(255,196,20,.24);  --g2:rgba(52,120,210,.26); }
html body[data-game="pokemon-japan"]{ --g1:rgba(255,70,70,.26);  --g2:rgba(255,196,20,.20); }
html body[data-game="yugioh"]      { --g1:rgba(170,120,255,.27); --g2:rgba(0,190,255,.18); }
html body[data-game="magic"]       { --g1:rgba(255,120,75,.25);  --g2:rgba(124,92,255,.22); }

/* le halo : une couche en haut de page, sous le contenu.
   Il remplace le ::before decoratif de l'ancien theme, qu'on masquait. */
html body.game-page::before{
  display:block !important; content:"" !important;
  position:absolute !important; top:0; left:0; right:0; height:760px;
  z-index:0 !important; pointer-events:none;
  background:
    /* les deux halos aux couleurs du jeu... */
    radial-gradient(1150px 580px at 4% 6%,  var(--g1, rgba(224,48,58,.26)), transparent 64%),
    radial-gradient(980px 500px at 92% 1%,  var(--g2, rgba(232,162,74,.22)), transparent 62%),
    /* ...poses sur un eclaircissement neutre. C'est lui qui repond au "tout
       noir" : la couleur seule teinte, mais ne sort pas la page du noir. */
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022) 45%, transparent 82%) !important;
}
html body.game-page{ position:relative !important; }
html body.game-page .site-header{ position:sticky !important; z-index:10000 !important; }
html body.game-page main.page{ position:relative !important; z-index:1 !important; }


/* ---------- Composition de l'en-tete ----------
   .hero contient l'introduction ET le panneau de recherche. Empiles, ils
   donnaient une colonne unique tres plate. En grande largeur on les met cote
   a cote : identite du jeu a gauche, outil a droite. */
@media (min-width:1080px){
  html body.game-page .hero{
    display:grid !important; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) !important;
    gap:40px !important; align-items:start !important;
  }
  html body.game-page .hero .hero-main{ padding-top:0 !important; }
  html body.game-page .game-page-logo{ height:94px !important; max-width:250px !important; }
  html body.game-page .hero h1, html body.game-page .game-title-row h1{
    font-size:clamp(28px, 2.6vw, 40px) !important;
  }
  html body.game-page .game-title-row{
    flex-direction:column !important; align-items:flex-start !important; gap:8px !important;
  }
  html body.game-page .game-logo-wrap{ margin:-16px 0 0 -26px !important; }
}

/* ---------- La barre de recherche ----------
   Avant : trois champs encadres, empiles, dans un panneau lui-meme encadre.
   On les fond en UNE barre : le cadre est porte par la barre, les segments ne
   sont plus separes que par un filet. Un objet au lieu de quatre.

   L'ordre du HTML est set / numero / bouton, donc l'ordre visuel : aucun
   replacement n'est necessaire, mais on garde les grid-area explicites — le
   composant de recherche de set s'enveloppe en .searchable-combobox au
   chargement, et la regle survit si cet ordre change.
   ==================================================================== */
@media (min-width:760px){
  html body.game-page .search-panel form{
    display:grid !important;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto !important;
    gap:0 !important; align-items:center !important; overflow:visible !important;
    background:rgba(255,255,255,.05) !important;
    border:1px solid var(--dj-line2) !important; border-radius:14px !important;
    padding:5px !important; margin:0 !important;
    transition:border-color .15s ease, background-color .15s ease !important;
  }
  /* la barre entiere reagit a la saisie, pas seulement le segment actif —
     et sa 2e ligne avec elle, sinon l'objet se coupe en deux au focus */
  html body.game-page .search-panel:focus-within form,
  html body.game-page .search-panel:focus-within form + #top-buttons{
    border-color:rgba(224,48,58,.5) !important;
  }
  html body.game-page .search-panel:focus-within form + #top-buttons{
    border-top-color:rgba(255,255,255,.09) !important;
  }

  /* la 2e ligne : meme fond, meme filet, coins raccordes. Le formulaire perd
     son filet du bas et ses coins bas des qu'un bloc de raccourcis le suit —
     ce qui se dit avec :has(). Le raccordement en depend entierement : sans
     :has(), les deux se colleraient sans se joindre. On garde donc les deux
     regles ensemble derriere @supports, et a defaut ce sont simplement deux
     surfaces distinctes et correctes. */
  @supports selector(:has(*)){
    html body.game-page .search-panel form:has(+ #top-buttons){
      border-radius:14px 14px 0 0 !important; border-bottom:0 !important;
    }
    html body.game-page .search-panel form + #top-buttons{
      margin:0 !important; padding:9px 10px !important;
      background:rgba(255,255,255,.05) !important;
      border:1px solid var(--dj-line2) !important;
      border-top:1px solid rgba(255,255,255,.09) !important;
      border-radius:0 0 14px 14px !important;
    }
  }

  html body.game-page .search-panel form > .searchable-combobox{
    grid-area:1 / 1 !important; margin:0 !important;
  }
  /* les segments perdent leur cadre propre : c'est tout l'interet */
  html body.game-page .search-panel form > .searchable-combobox .scb-input,
  html body.game-page .search-panel form > .searchable-combobox.scb-open .scb-input,
  html body.game-page .search-panel form > input[type="text"],
  html body.game-page .search-panel form > input[type="text"]:focus{
    background:none !important; border:0 !important; border-radius:0 !important;
    box-shadow:none !important; padding:0 16px !important; height:48px !important;
  }
  html body.game-page .search-panel form > input[type="text"]{
    grid-area:1 / 2 !important; margin:0 !important;
    border-left:1px solid var(--dj-line2) !important;
  }
  html body.game-page .search-panel form > button[type="submit"]{
    grid-area:1 / 3 !important; margin:0 !important; white-space:nowrap !important;
    padding:0 22px !important; height:48px !important; border-radius:10px !important;
  }
}

/* En dessous, la barre n'a pas la place : on reste empile, chaque champ
   reprend son propre cadre (regles de la section 2), ecarts reguliers.
   Les deux rappels passent l'un sous l'autre : le filet vertical qui les
   separe n'a de sens que s'ils tiennent sur la meme ligne. */
@media (max-width:759px){
  html body.game-page .hint .pill{ display:block !important; }
  html body.game-page .hint .pill + .pill{
    border-left:0 !important; margin:5px 0 0 !important; padding-left:0 !important;
  }
  html body.game-page .search-panel form{
    display:grid !important; gap:10px !important;
    background:none !important; border:0 !important; padding:0 !important;
  }
}


/* ====================================================================
   PALMARES DES MOUVEMENTS
   ====================================================================
   Le carrousel demandait deux pistes qui defilent en permanence et une
   trentaine d'images HD chargees d'entree ; sur mobile, deux blocs a faire
   glisser avant d'arriver aux cartes qu'on est venu voir.

   Ici, deux listes cote a cote. La premiere carte de chaque liste est montree,
   les suivantes sont des lignes de texte avec une icone photo qui agrandit la
   carte au survol — et l'image n'est demandee qu'a ce moment-la. Deux images
   au chargement au lieu d'une trentaine.

   Pas de numeros de rang : la selection est tiree au sort parmi les plus forts
   mouvements (get_price_movers melange le vivier), les afficher classees
   1-2-3 serait faux.

   Le carrousel reste tel quel sur l'accueil, ou il est a sa place.
   ==================================================================== */
/* Deux blocs sans set choisi, trois avec les meilleures offres : la grille
   s'adapte d'elle-meme plutot que d'imposer un nombre de colonnes. Le
   min(300px,100%) evite le debordement sur les ecrans plus etroits que la
   largeur minimale demandee. */
html body .mv-section{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
  gap:32px 40px !important; margin:6px 0 0 !important; padding:0 !important;
}
/* Sans ces deux minimums a zero, la piste de grille prend la largeur MIN-CONTENT
   du bloc — or les noms de cartes sont en nowrap, donc tres larges : la liste
   debordait de 136 px hors de l'ecran sur mobile, pourcentages et prix compris.
   Un "1fr" seul vaut minmax(auto, 1fr), et ce "auto" est le coupable. */
html body .mv-block{ min-width:0 !important; }

/* meme grammaire de titre que les autres sections : filet colore + libelle */
html body .mv-title{
  font-family:var(--impact) !important; font-weight:400 !important; font-size:14px !important;
  color:#fff !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important;
  display:flex !important; align-items:center !important; gap:11px !important;
  margin:0 0 6px !important;
}
html body .mv-title::before{
  content:"" !important; width:18px; height:3px; border-radius:2px; flex:0 0 auto;
}
html body .mv-block-up .mv-title::before{ background:var(--dj-green); }
html body .mv-block-down .mv-title::before{ background:var(--dj-red); }
html body .mv-sub{
  color:var(--dj-mut) !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important;
  font-size:11.5px !important; letter-spacing:0 !important; text-transform:none !important;
}

html body .mv-list{
  list-style:none !important; margin:0 !important; padding:0 !important;
}
/* en flex et non en grille : si l'image de la premiere carte ne repond pas,
   le gabarit la retire et la ligne doit se refermer proprement */
html body .mv-row{
  display:flex !important; align-items:center !important; gap:12px !important;
  padding:9px 0 !important; margin:0 !important;
  border-top:1px solid var(--dj-line) !important;
}
html body .mv-row:first-child{ border-top:0 !important; }
html body .mv-link{
  flex:1 1 auto !important; min-width:0 !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:14px !important; text-decoration:none !important; color:inherit !important;
}
html body .mv-body{
  display:flex !important; flex-direction:column !important; gap:2px !important;
  min-width:0 !important;
}
html body .mv-name{
  color:var(--dj-txt) !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important;
  font-size:13.5px !important; line-height:1.3 !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
html body .mv-link:hover .mv-name{ color:#fff !important; }
html body .mv-meta{
  color:var(--dj-mut) !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:9.5px !important; font-weight:800 !important; letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
html body .mv-figs{
  display:flex !important; flex-direction:column !important; align-items:flex-end !important;
  gap:1px !important; flex:0 0 auto !important;
}
html body .mv-pct{
  font-family:'Inter',system-ui,sans-serif !important; font-weight:800 !important;
  font-size:13.5px !important; font-variant-numeric:tabular-nums !important;
}
html body .mv-pct.up{ color:var(--dj-green) !important; }
html body .mv-pct.down{ color:var(--dj-red) !important; }
html body .mv-price{
  color:var(--dj-mut) !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:700 !important;
  font-size:11.5px !important; font-variant-numeric:tabular-nums !important;
}

/* l'icone photo : pas de cadre, elle s'allume au survol */
html body .mv-peek{
  width:26px !important; height:26px !important; flex:0 0 auto !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:none !important; background-image:none !important; border:0 !important;
  border-radius:8px !important; box-shadow:none !important; padding:0 !important;
  color:#5d6478 !important; cursor:pointer !important;
  transition:color .14s ease, background-color .14s ease !important;
}
html body .mv-peek:hover,
html body .mv-peek:focus-visible{
  color:#fff !important; background:rgba(255,255,255,.09) !important; outline:none !important;
}

/* la carte mise en avant */
html body .mv-row-hero{ padding:0 0 13px !important; }
/* .mv-shot est un <button> : la carte mise en avant s'agrandit au survol comme
   les icones, il lui fallait donc un element focalisable et cliquable. */
html body .mv-shot{
  width:66px !important; flex:0 0 auto !important; display:block !important;
  line-height:0 !important; padding:0 !important; border:0 !important;
  background:none !important; background-image:none !important; box-shadow:none !important;
  cursor:zoom-in !important; border-radius:6px !important;
}
html body .mv-shot:focus-visible{
  outline:2px solid rgba(224,48,58,.7) !important; outline-offset:2px !important;
}
html body .mv-shot img{
  width:100% !important; height:auto !important; display:block !important;
  border-radius:6px !important; background:none !important;
  /* Certaines illustrations sont tres sombres et se fondaient dans le fond :
     un filet d'un pixel redonne son bord a la carte, sans rien deplacer. */
  box-shadow:0 0 0 1px rgba(255,255,255,.1) !important;
}
html body .mv-row-hero .mv-name{ font-size:15px !important; font-weight:700 !important; }
html body .mv-row-hero .mv-pct{ font-size:18px !important; }
html body .mv-row-hero .mv-price{ font-size:12.5px !important; }

/* le nom du jeu, uniquement quand la liste en melange plusieurs (accueil) */
html body .mv-game{
  color:var(--dj-red) !important;
  margin-right:7px !important; padding-right:7px !important;
  border-right:1px solid var(--dj-line2) !important;
}

/* l'agrandissement : une seule vignette pour toute la page, deplacee au besoin */
html body .mv-preview{
  position:absolute !important; z-index:9999 !important; width:200px !important;
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  transition:opacity .12s ease !important;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.7)) !important;
}
html body .mv-preview.on{ opacity:1 !important; visibility:visible !important; }
html body .mv-preview img{
  width:100% !important; height:auto !important; display:block !important;
  border-radius:9px !important;
}


/* ====================================================================
   BARRE DU BAS — feuille « Choisir un jeu »
   ====================================================================
   theme.css impose color:var(--ink) (le bleu nuit du theme clair) sur le nom
   des jeux : sur fond sombre, du noir sur du noir. Meme correction que
   partout ailleurs, color ET -webkit-text-fill-color, dans la police du site.
   ==================================================================== */
html body .bnav-game span{
  color:#fff !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-weight:700 !important; font-size:.73rem !important; letter-spacing:0 !important;
}
html body .bnav-sheet-title{
  color:#fff !important;
  font-family:var(--impact) !important; font-weight:400 !important;
  letter-spacing:1.2px !important; text-transform:uppercase !important;
}


/* ====================================================================
   VUE GRILLE DES RESULTATS
   ====================================================================
   Elle etait restee au theme clair : une tuile blanche encadree et ombree,
   contenant l'image, contenant des pastilles, contenant des lignes de
   quantite elles-memes encadrees. Quatre niveaux de boites par carte,
   multiplies par vingt cartes a l'ecran.

   Principe retenu : L'IMAGE EST LA TUILE. Aucun cadre autour, un filet d'un
   pixel sur l'illustration (qui lui redonne son bord quand elle est sombre),
   et sous elle du texte nu, dans la grammaire du reste du site — micro-libelle
   en capitales, valeur en blanc.

   La rarete garde sa couleur : c'est l'echelle d'information deja utilisee par
   les raccourcis de rarete. Elle passe du fond au TEXTE, comme la-bas.

   Densite : trois cartes par ligne sur mobile, jusqu'a six sur grand ecran.
   ==================================================================== */
html body.game-page .grid.mtcg-compact{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:20px 12px !important; align-items:start !important;
}
@media (min-width:640px){
  html body.game-page .grid.mtcg-compact{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:26px 16px !important;
  }
}
@media (min-width:900px){
  html body.game-page .grid.mtcg-compact{ grid-template-columns:repeat(5, minmax(0,1fr)) !important; }
}
@media (min-width:1200px){
  html body.game-page .grid.mtcg-compact{ grid-template-columns:repeat(6, minmax(0,1fr)) !important; }
}

/* la tuile n'est plus une boite */
html body.game-page .grid.mtcg-compact .card{
  display:flex !important; flex-direction:column !important; gap:0 !important;
  background:none !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:0 !important; backdrop-filter:none !important; overflow:visible !important;
  transform:none !important; transition:none !important;
}
html body.game-page .grid.mtcg-compact .card:hover{
  transform:none !important; background:none !important; box-shadow:none !important;
}
html body.game-page .grid.mtcg-compact .card::before,
html body.game-page .grid.mtcg-compact .card::after{ content:none !important; }

/* l'image porte la tuile */
html body.game-page .grid.mtcg-compact .card .card-media{
  position:relative !important; width:100% !important; display:block !important;
  margin:0 !important; padding:0 !important; gap:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; min-height:0 !important;
}
html body.game-page .grid.mtcg-compact .card .card-media > a,
html body.game-page .grid.mtcg-compact .card .card-media .card-image-link{
  display:block !important; line-height:0 !important;
}
html body.game-page .grid.mtcg-compact .card .card-media img{
  width:100% !important; height:auto !important; display:block !important;
  border-radius:9px !important; background:none !important;
  /* un filet d'un pixel : certaines illustrations sont tres sombres et se
     fondaient dans le fond de page */
  box-shadow:0 0 0 1px rgba(255,255,255,.1) !important;
  transform:none !important; transition:transform .16s ease !important;
}
html body.game-page .grid.mtcg-compact .card:hover .card-media img{
  box-shadow:0 0 0 1px rgba(255,255,255,.26) !important;
}

/* le texte : plus de pastilles, plus de cadres */
html body.game-page .grid.mtcg-compact .card .info{
  display:flex !important; flex-direction:column !important; gap:3px !important;
  padding:9px 1px 0 !important; margin:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  min-width:0 !important;
}
html body.game-page .grid.mtcg-compact .card .info .name{
  font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important;
  font-size:12.5px !important; line-height:1.28 !important; margin:0 !important;
  /* deux lignes reservees, meme quand le nom en tient une : sans cela, prix et
     compteurs se decalent d'une carte a l'autre sur une meme rangee */
  min-height:2.56em !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important; overflow:hidden !important;
}
html body.game-page .grid.mtcg-compact .card .info .name,
html body.game-page .grid.mtcg-compact .card .info .name a{
  color:var(--dj-txt) !important;
  text-decoration:none !important;
}
html body.game-page .grid.mtcg-compact .card .info .name a:hover{
  color:#fff !important;
}

/* set, variante et rarete sur une ligne ; le prix sur la suivante */
html body.game-page .grid.mtcg-compact .card .mtcg-gi{
  display:flex !important; flex-wrap:wrap !important; align-items:baseline !important;
  gap:1px 6px !important; margin:1px 0 0 !important;
}
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-set,
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-variant,
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-rarity{
  background:none !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:9.5px !important; font-weight:800 !important; letter-spacing:.07em !important;
  text-transform:uppercase !important; line-height:1.4 !important;
}
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-set,
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-variant{
  color:var(--dj-mut) !important;
}
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-tags{
  display:flex !important; align-items:baseline !important; gap:6px !important;
  margin:0 !important; padding:0 !important; flex:0 0 auto !important;
  white-space:nowrap !important;
}
/* La ligne d'infos doit tenir sur UNE ligne : sur une tuile de 98 px elle
   partait sur deux a quatre lignes selon la carte, et prix et compteurs ne
   s'alignaient plus d'une carte a l'autre sur la rangee. C'est le code du set
   qui cede la place en premier (il s'abrege), les tags restent entiers. */
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-set{
  flex:0 1 auto !important; min-width:0 !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
/* A trois cartes par ligne il n'y a de place que pour la rarete. Le code du set
   est de toute facon connu — on navigue DANS un set — et le numero comme la
   variante sont lisibles sur l'illustration et sur la fiche de la carte. */
@media (max-width:639px){
  html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-set,
  html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-variant,
  html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-tags::before{
    display:none !important;
  }
}
/* separateur entre le set et ce qui suit : pseudo-element du conteneur de tags,
   il devient donc son premier element de flex — exactement a la bonne place */
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-tags::before{
  content:"·"; color:#4d5468; font-size:10px; font-weight:700;
}
/* la rarete reprend l'echelle de couleurs des raccourcis de rarete */
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-rarity{
  color:var(--dj-mut) !important;
}
html body.game-page .grid.mtcg-compact .card[data-tier="chase"] .cc-rarity{ color:var(--dj-t-chase) !important; }
html body.game-page .grid.mtcg-compact .card[data-tier="secret"] .cc-rarity{ color:var(--dj-t-secret) !important; }
html body.game-page .grid.mtcg-compact .card[data-tier="super"] .cc-rarity{ color:var(--dj-t-super) !important; }
html body.game-page .grid.mtcg-compact .card[data-tier="leader"] .cc-rarity,
html body.game-page .grid.mtcg-compact .card[data-tier="rare"] .cc-rarity{ color:var(--dj-t-rare) !important; }
html body.game-page .grid.mtcg-compact .card[data-tier="uncommon"] .cc-rarity{ color:var(--dj-t-uncommon) !important; }
html body.game-page .grid.mtcg-compact .card[data-tier="common"] .cc-rarity{ color:var(--dj-t-common) !important; }

/* le prix : seul element en blanc et en grand, c'est LE chiffre */
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-prices{
  flex:0 0 100% !important; margin:3px 0 0 !important; padding:0 !important;
  background:none !important; border:0 !important;
}
html body.game-page .grid.mtcg-compact .card .cc-unit,
html body.game-page .grid.mtcg-compact .card .cc-unit.gblack{
  color:#fff !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:800 !important;
  font-size:13.5px !important; font-variant-numeric:tabular-nums !important;
}
/* pas de cotation : un tiret, a sa place, plutot qu'un trou dans la rangee */
html body.game-page .grid.mtcg-compact .card .cc-unit.na{
  color:var(--dj-mut) !important;
}

/* --- ajout a la collection : un trio, pas un formulaire --- */
html body.game-page .grid.mtcg-compact .card .details-button-row{
  display:block !important; padding:0 !important; margin:8px 0 0 !important;
  border:0 !important; background:none !important;
}
html body.game-page .grid.mtcg-compact .cstep{
  width:100% !important; gap:7px !important; margin:0 !important;
}
html body.game-page .grid.mtcg-compact .cstep-row{
  display:flex !important; align-items:center !important; gap:5px !important;
  flex-wrap:wrap !important;
  background:none !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:0 !important;
}
/* A trois cartes par ligne, le nom de la variante n'a pas la place de tenir a
   cote des boutons : il se retrouvait coupe en « NO... » / « COL... ». Il passe
   AU-DESSUS, en micro-libelle — la meme paire libelle/valeur que partout. */
html body.game-page .grid.mtcg-compact .cstep-tag{
  flex:0 0 100% !important; max-width:none !important; overflow:visible !important;
  background:none !important; border:0 !important; padding:0 !important; margin:0 !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:9px !important; font-weight:800 !important; letter-spacing:.08em !important;
  text-transform:uppercase !important; line-height:1.3 !important;
  color:var(--dj-mut) !important;
  text-align:left !important;
}
html body.game-page .grid.mtcg-compact .cstep-btn{
  width:24px !important; height:24px !important; min-height:0 !important; flex:0 0 auto !important;
  padding:0 !important; border:0 !important; border-radius:7px !important;
  background:rgba(255,255,255,.07) !important; background-image:none !important;
  box-shadow:none !important;
  color:var(--dj-txt) !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:700 !important;
  font-size:14px !important; line-height:1 !important;
  transition:background-color .14s ease !important;
}
html body.game-page .grid.mtcg-compact .cstep-btn:hover{
  background:rgba(255,255,255,.15) !important; color:#fff !important;
 transform:none !important;
}
html body.game-page .grid.mtcg-compact .cstep-qty{
  min-width:20px !important; text-align:center !important; flex:0 0 auto !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:800 !important;
  font-size:12px !important; font-variant-numeric:tabular-nums !important;
  color:#5d6478 !important;
}
/* une carte possedee se lit d'un coup d'oeil : le compte passe en blanc */
html body.game-page .grid.mtcg-compact .cstep-row.has .cstep-qty{
  color:#fff !important;
}
html body.game-page .grid.mtcg-compact .cstep-row.has{
  background:none !important; border:0 !important;
}

/* --- « Je l'ai pull » : l'action se pose SUR la carte --- */
/* En pleine largeur sous la vignette, le libelle ne tenait pas a trois cartes
   par ligne. Il devient une pastille dans le coin de l'illustration ; le texte
   reste dans le bouton (donc lu par les lecteurs d'ecran), seule sa taille
   tombe a zero pour laisser la place a l'icone. */
html body.game-page .grid.mtcg-compact .card .card-media .pull-open-btn,
html body.game-page .grid.mtcg-compact .card .card-media .pull-login-link{
  position:absolute !important; right:6px !important; bottom:6px !important;
  left:auto !important; top:auto !important; transform:none !important;
  width:27px !important; height:27px !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; border-radius:999px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-size:0 !important; line-height:0 !important;
  background:rgba(9,10,14,.78) !important; background-image:none !important;
  border:1px solid rgba(255,255,255,.2) !important; box-shadow:none !important;
  backdrop-filter:blur(3px) !important; -webkit-backdrop-filter:blur(3px) !important;
  opacity:.9 !important; transition:opacity .14s ease, border-color .14s ease !important;
}
html body.game-page .grid.mtcg-compact .card .card-media .pull-open-btn::before,
html body.game-page .grid.mtcg-compact .card .card-media .pull-login-link::before{
  content:"🔥"; font-size:12px; line-height:1;
}
html body.game-page .grid.mtcg-compact .card .card-media .pull-open-btn:hover,
html body.game-page .grid.mtcg-compact .card .card-media .pull-login-link:hover{
  opacity:1 !important; border-color:rgba(255,255,255,.5) !important;
  background:rgba(9,10,14,.92) !important;
}

/* la loupe reste en haut a droite, meme habillage que la pastille de pull */
html body.game-page .grid.mtcg-compact .card .zoom-btn{
  top:6px !important; right:6px !important; width:27px !important; height:27px !important;
  border-radius:999px !important; background:rgba(9,10,14,.78) !important;
  border:1px solid rgba(255,255,255,.2) !important; color:#fff !important;
  backdrop-filter:blur(3px) !important; -webkit-backdrop-filter:blur(3px) !important;
}
/* Sur ecran tactile il n'y a pas de survol : sans cela, les deux pastilles
   restaient invisibles. */
@media (hover: none){
  html body.game-page .grid.mtcg-compact .card .zoom-btn{ opacity:.9 !important; }
}

/* la bascule de vue, accordee au fond sombre */







/* ================= GRILLE DE CARTES : ALIGNEMENT ====================
   Trois defauts corriges ici, tous en vue grille (.mtcg-compact) :

   1. Les illustrations n'ont pas toutes le meme format. Les leaders DBS sont
      livres en 682x1000 quand le reste du set est en 640x893 : la vignette
      mesurait 16 px de plus et decalait tout ce qui suit. Le cadre de l'image
      recoit donc un format fixe (celui de la carte physique) et l'image s'y
      cale en "cover" — quelques pixels de bord rognes sur les rares
      exceptions, rien sur les autres.

   2. Meme a images egales, nom, rarete, prix et compteur ne tombaient pas a
      la meme hauteur d'une carte a l'autre (nom sur une ou deux lignes,
      rarete qui passe a la ligne...). Chaque carte devient une sous-grille
      (subgrid) de six rangees partagees par toute la rangee de cartes : la
      hauteur de chaque rangee est celle du contenu le plus haut de la ligne.
      .info et .mtcg-gi s'effacent (display:contents) pour que leurs enfants
      soient directement places dans ces rangees.

   3. Une rarete longue ("SPECIAL LEADER RARE") ne passait pas a la ligne
      (nowrap) et debordait sur la carte voisine sur mobile. Elle peut
      maintenant se couper ; la sous-grille garde l'alignement.
   ==================================================================== */

/* 1) format fixe de l'illustration (63x88 mm ; Yu-Gi-Oh : 59x86 mm) */
html body.game-page .grid.mtcg-compact .card .card-media img{
  aspect-ratio:63 / 88 !important; object-fit:cover !important;
}
html body.game-page[data-game="yugioh"] .grid.mtcg-compact .card .card-media img{
  aspect-ratio:59 / 86 !important;
}

/* 2) six rangees alignees d'une carte a l'autre */
@supports (grid-template-rows: subgrid){
  html body.game-page .grid.mtcg-compact .card{
    display:grid !important; grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:subgrid !important; grid-row:span 6 !important;
    gap:0 !important; row-gap:0 !important;
  }
  html body.game-page .grid.mtcg-compact .card .info,
  html body.game-page .grid.mtcg-compact .card .mtcg-gi{ display:contents !important; }

  /* rangees posees explicitement : une carte sans ligne de set (ou sans
     compteur) laisse sa rangee vide au lieu de faire remonter la suite */
  html body.game-page .grid.mtcg-compact .card .card-media{ grid-row:1 !important; }
  html body.game-page .grid.mtcg-compact .card .info .name{ grid-row:2 !important; margin:9px 0 0 !important; }
  html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-set{ grid-row:3 !important; margin:3px 0 0 !important; }
  html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-tags{ grid-row:4 !important; margin:1px 0 0 !important; }
  html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-prices{ grid-row:5 !important; margin:3px 0 0 !important; }
  html body.game-page .grid.mtcg-compact .card .details-button-row{ grid-row:6 !important; margin:8px 0 0 !important; }
  /* les espacements sont portes par des marges : une rangee vide (le set,
     masque sur mobile) ne laisse donc aucun trou */
}

/* 3) la rarete peut passer a la ligne sans deborder */
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-tags{
  display:flex !important; flex-wrap:wrap !important; white-space:normal !important;
  min-width:0 !important; max-width:100% !important; gap:0 6px !important;
}
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-rarity{
  min-width:0 !important; overflow-wrap:anywhere !important;
}
/* Le set et la rarete sont desormais sur deux lignes distinctes : le point
   qui les separait se retrouvait seul en debut de ligne, comme une puce. On
   ne le garde qu'entre une variante et la rarete. */
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-tags::before{ content:none !important; }
html body.game-page .grid.mtcg-compact .card .mtcg-gi .cc-variant:not(.empty) + .cc-rarity::before{
  content:"·"; margin-right:6px; color:#4d5468;
}

/* ---- compteur de collection : sans cadre, centre sous la carte ----
   La pastille sombre venait de la regle generale de .results-section .cstep
   (fond noir, filet, coins ronds), pensee pour la vue liste : la vue grille
   ne la neutralisait pas. */
html body.game-page .grid.mtcg-compact .cstep{
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  background:none !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:0 !important;
}
html body.game-page .grid.mtcg-compact .cstep-row{ justify-content:center !important; }
html body.game-page .grid.mtcg-compact .cstep-tag{ text-align:center !important; }



/* ================= COMPTEUR DE COLLECTION (vue grille) ================
   Ce qui n'allait pas :
   - "− 0 +" seul sous une carte ne dit pas a quoi il sert ;
   - une carte a deux versions empilait deux compteurs, chacun sous son
     libelle : son premier compteur tombait plus bas que celui des cartes a
     une seule version, et la carte s'allongeait.

   Forme retenue, la meme pour TOUTES les cartes, sur deux lignes fixes :
   1. un en-tete en micro-libelle (comme set et rarete) : l'icone Collection
      de la barre du bas, suivie de "Collection" — ou, si la carte a plusieurs
      versions, du nom de la version choisie. Ce libelle recouvre un vrai
      <select> natif, invisible : sur mobile il ouvre la liste du systeme ;
   2. une pastille : "+ Ajouter" tant que la version n'est pas possedee,
      puis un compteur "−  2  +" teinte du rouge du dojo.
   Le balisage est dans _collect_btn.html ; hors vue grille, l'en-tete reste
   masque et toutes les lignes s'affichent comme avant.
   ==================================================================== */
.cstep-head{ display:none; }

html body.game-page .grid.mtcg-compact .cstep{ gap:6px !important; }

/* 1) en-tete */
html body.game-page .grid.mtcg-compact .cstep-head{
  display:flex !important; align-items:center !important; gap:5px !important;
  height:14px !important; min-width:0 !important; margin:0 !important; padding:0 !important;
  color:var(--dj-mut) !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:9.5px !important;
  font-weight:800 !important; letter-spacing:.07em !important; text-transform:uppercase !important;
  line-height:1 !important;
}
html body.game-page .grid.mtcg-compact .cstep-ic{ width:13px !important; height:13px !important; flex:0 0 auto !important; }
html body.game-page .grid.mtcg-compact .cstep-title{ white-space:nowrap !important; }
html body.game-page .grid.mtcg-compact .cstep-pick{
  position:relative !important; display:inline-flex !important; align-items:center !important;
  gap:4px !important; min-width:0 !important; max-width:100% !important; margin:0 !important;
  cursor:pointer !important; border-radius:3px !important;
  color:var(--dj-mut2) !important;
  font:inherit !important; letter-spacing:inherit !important; text-transform:inherit !important;
}
html body.game-page .grid.mtcg-compact .cstep-pick:hover,
html body.game-page .grid.mtcg-compact .cstep-pick:focus-within{
  color:#fff !important;
}
html body.game-page .grid.mtcg-compact .cstep-pick:focus-within{
  outline:2px solid rgba(224,48,58,.6) !important; outline-offset:2px !important;
}
html body.game-page .grid.mtcg-compact .cstep-pick-lbl{
  min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}
html body.game-page .grid.mtcg-compact .cstep-caret{ width:9px !important; height:6px !important; flex:0 0 auto !important; }
/* le vrai select, invisible, recouvre le libelle */
html body.game-page .grid.mtcg-compact .cstep-select{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important;
  opacity:0 !important; cursor:pointer !important; appearance:none !important; -webkit-appearance:none !important;
  font-size:16px !important;   /* sous 16px, iOS zoome la page a l'ouverture */
}

/* 2) la pastille : une seule ligne de compteur visible, celle de la version choisie */
html body.game-page .grid.mtcg-compact .cstep-row{ display:none !important; }
html body.game-page .grid.mtcg-compact .cstep-row.is-cur{
  display:flex !important; align-items:stretch !important; flex-wrap:nowrap !important; gap:0 !important;
  height:30px !important; padding:0 !important; overflow:hidden !important;
  border:1px solid var(--dj-line2) !important; border-radius:9px !important;
  background:rgba(255,255,255,.035) !important; background-image:none !important;
  transition:border-color .14s ease, background-color .14s ease !important;
}
/* le nom de la version est deja dans l'en-tete */
html body.game-page .grid.mtcg-compact .cstep-tag{ display:none !important; }

html body.game-page .grid.mtcg-compact .cstep-row.is-cur .cstep-btn{
  flex:0 0 32px !important; width:32px !important; height:auto !important; min-height:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  background:none !important; background-image:none !important; box-shadow:none !important;
  color:var(--dj-mut2) !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:15px !important; font-weight:700 !important;
  line-height:1 !important; transform:none !important;
}
html body.game-page .grid.mtcg-compact .cstep-row.is-cur .cstep-btn:hover{
  background:rgba(255,255,255,.08) !important; color:#fff !important;
}
html body.game-page .grid.mtcg-compact .cstep-row.is-cur .cstep-qty{
  flex:1 1 auto !important; min-width:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:13px !important; font-weight:800 !important;
  color:#fff !important;
}

/* etat "pas encore dans la collection" : un seul bouton, qui dit ce qu'il fait */
html body.game-page .grid.mtcg-compact .cstep-row.is-cur:not(.has) .cstep-btn.minus,
html body.game-page .grid.mtcg-compact .cstep-row.is-cur:not(.has) .cstep-qty{ display:none !important; }
html body.game-page .grid.mtcg-compact .cstep-row.is-cur:not(.has) .cstep-btn.plus{
  flex:1 1 auto !important; width:100% !important; gap:6px !important;
  color:var(--dj-txt) !important;
}
html body.game-page .grid.mtcg-compact .cstep-row.is-cur:not(.has) .cstep-btn.plus::after{
  content:attr(data-add); font-size:12px; font-weight:700; letter-spacing:0;
}
html body.game-page .grid.mtcg-compact .cstep-row.is-cur:not(.has):hover{
  border-color:rgba(255,255,255,.26) !important; background:rgba(255,255,255,.07) !important;
}
html body.game-page .grid.mtcg-compact .cstep-row.is-cur:not(.has) .cstep-btn.plus:hover{ background:none !important; }

/* etat "possedee" : la pastille prend le rouge du dojo */
html body.game-page .grid.mtcg-compact .cstep-row.is-cur.has{
  border-color:rgba(224,48,58,.5) !important; background:rgba(224,48,58,.1) !important;
}
html body.game-page .grid.mtcg-compact .cstep-row.is-cur.has .cstep-btn:hover{ background:rgba(224,48,58,.2) !important; }
/* confirmation d'enregistrement : le halo reprend le rouge (il etait violet) */
html body.game-page .grid.mtcg-compact .cstep-row.ok{ box-shadow:0 0 0 2px rgba(224,48,58,.35) !important; }

/* prix absent : "Non cote", a la place et dans le corps du prix */
html body.game-page .grid.mtcg-compact .card .cc-unit.na{ font-weight:600 !important; }


/* ============== EN-TETE DES RESULTATS : UNE BARRE D'OUTILS ==============
   Le titre reprend la forme des autres titres de section (trait rouge +
   Anton : "Recherche rapide", "Top hausses") au lieu d'une pastille rose ;
   recherche, tri et bascule de vue forment une seule barre, a hauteur
   commune (34 px), en Inter comme le reste de l'interface — le select et le
   bouton heritaient jusque-la d'Arial et de l'Anton du titre. */
html body.game-page .results-section .head{
  display:flex !important; flex-wrap:wrap !important; align-items:center !important;
  justify-content:flex-start !important; gap:10px 12px !important;
  padding:0 0 14px !important; margin:0 0 22px !important;
}
html body.game-page .results-section .head h2{
  order:0 !important; flex:1 1 auto !important; min-width:0 !important; margin:0 !important;
  display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:8px 12px !important;
  font-family:var(--impact) !important; font-weight:400 !important; font-size:15px !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important; line-height:1.2 !important;
  color:#fff !important;
}
html body.game-page .results-section .head h2::before{
  content:"" !important; width:18px !important; height:3px !important; border-radius:2px !important;
  background:var(--dj-red) !important; flex:0 0 auto !important;
}
html body.game-page .results-section .head .all-title-badge,
html body.game-page .results-section .head .top-title-badge,
html body.game-page .results-section .head .rarity-title-badge,
html body.game-page .results-section .head .variant-title-badge{
  display:inline !important; padding:0 !important; margin:0 !important;
  background:none !important; background-image:none !important; border:0 !important;
  border-radius:0 !important; box-shadow:none !important; text-shadow:none !important;
  font:inherit !important; letter-spacing:inherit !important; text-transform:inherit !important;
  color:#fff !important;
}
html body.game-page .results-section .head > p{
  order:9 !important; flex:0 0 100% !important; margin:0 !important;
}

/* commandes : meme hauteur, meme police, meme rayon */
html body.game-page .results-section .head .results-search-btn{
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  height:34px !important; padding:0 13px !important; margin:0 !important;
  border:1px solid var(--dj-line2) !important; border-radius:10px !important;
  background:rgba(255,255,255,.05) !important; background-image:none !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:12.5px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important; line-height:1 !important;
  color:var(--dj-mut2) !important;
  text-decoration:none !important; transition:background-color .14s ease, border-color .14s ease !important;
}
html body.game-page .results-section .head .results-search-btn:hover{
  background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.26) !important;
  color:#fff !important;
}
html body.game-page .results-section .head .rsb-ic{ width:14px !important; height:14px !important; flex:0 0 auto !important; }

html body.game-page .results-section .head .sort-bar{
  order:2 !important; display:flex !important; align-items:center !important; flex-wrap:nowrap !important;
  gap:10px !important; margin:0 !important;
}
html body.game-page .results-section .head .sort-bar label{
  margin:0 !important; white-space:nowrap !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:10.5px !important; font-weight:800 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  color:var(--dj-mut) !important;
}
html body.game-page .results-section .head .sort-select{
  height:34px !important; min-height:0 !important; min-width:170px !important; width:auto !important;
  margin:0 !important; padding:0 34px 0 12px !important;
  border:1px solid var(--dj-line2) !important; border-radius:10px !important; box-shadow:none !important;
  background-color:rgba(255,255,255,.05) !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23959bab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:11px !important;
  appearance:none !important; -webkit-appearance:none !important; cursor:pointer !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:13px !important; font-weight:600 !important;
  color:var(--dj-txt) !important;
  transition:border-color .14s ease !important;
}
html body.game-page .results-section .head .sort-select:hover{ border-color:rgba(255,255,255,.26) !important; }
html body.game-page .results-section .head .sort-select:focus{
  outline:none !important; border-color:var(--dj-red) !important; box-shadow:0 0 0 3px rgba(224,48,58,.18) !important;
}
html body.game-page .results-section .head .sort-select option{ background:#15171d; color:var(--dj-txt); }






/* mobile : le titre sur sa ligne, puis la barre ; le libelle "Trier par"
   passe en lecture d'ecran seulement (le select reste nomme) */
@media (max-width:640px){
  html body.game-page .results-section .head h2{ flex:1 1 100% !important; }
  html body.game-page .results-section .head .sort-bar{ flex:1 1 auto !important; min-width:0 !important; }
  html body.game-page .results-section .head .sort-bar label{
    position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important;
    clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important;
    margin:-1px !important; padding:0 !important; border:0 !important;
  }
  html body.game-page .results-section .head .sort-select{
    flex:1 1 auto !important; min-width:0 !important; width:auto !important;
  }
}



/* ============ JEUX SUIVIS SUR TCGPLAYER SEULEMENT (Magic, Yu-Gi-Oh!) ============
   La fiche carte n'a plus ni bloc Cardmarket ni colonne eBay : la grille passe sur
   une seule colonne, et une note dit d'ou vient le prix (marche americain). */

html body.game-page .cd-tcg-only-note{
  margin:0 0 14px !important; font-size:12.5px !important; line-height:1.5 !important;
  color:var(--dj-mut) !important;
}



/* ============================ FICHE CARTE ============================
   card_detail.html. Meme grammaire que l'accueil et les pages de jeu :
   pas de boites dans des boites, des filets d'un pixel, des micro-libelles
   en capitales, les valeurs en blanc, Anton pour les titres.

   - En-tete : la carte a gauche (collante sur grand ecran), sur un halo tire
     de sa propre illustration, avec une lueur de la couleur de sa rarete ;
     a droite l'identite, la ligne des prix (une colonne par plateforme),
     les actions, la collection et le set.
   - « Prix par plateforme » : un onglet par plateforme, graphique a gauche,
     chiffres a droite en liste filetee. Sans JS, les panneaux s'empilent.
   Toutes les regles sont prefixees par .cd-v2 : les anciennes regles de
   theme.css (panneaux blancs, degrades violets) ne s'appliquent plus.
   ==================================================================== */
html body.game-page .cd-v2{
  position:relative; max-width:1180px !important; margin:0 auto !important;
  padding:4px 0 64px !important; font-family:'Inter',system-ui,sans-serif;
}
html body.game-page .cd-v2 .cd-ic{ width:15px; height:15px; flex:0 0 auto; }

/* ---------- barre du haut : retour au set + fil d'ariane ---------- */
html body.game-page .cd-v2 .cd-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px 18px;
  flex-wrap:wrap; margin:0 0 26px;
}
html body.game-page .cd-v2 .cd-back{
  display:inline-flex !important; align-items:center; gap:6px; height:32px; max-width:100%;
  margin:0 !important; padding:0 12px 0 8px !important;
  border:1px solid var(--dj-line2) !important; border-radius:10px !important;
  background:rgba(255,255,255,.04) !important; background-image:none !important; box-shadow:none !important;
  color:var(--dj-mut2) !important;
  font-size:12.5px !important; font-weight:600 !important; text-decoration:none !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background-color .14s ease, border-color .14s ease;
}
html body.game-page .cd-v2 .cd-back:hover{
  background:rgba(255,255,255,.09) !important; border-color:rgba(255,255,255,.26) !important;
  color:#fff !important;
}
html body.game-page .cd-v2 .cd-crumbs{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;
  font-size:12px; color:var(--dj-mut);
}
html body.game-page .cd-v2 .cd-crumbs a{
  color:var(--dj-mut) !important; text-decoration:none !important;
}
html body.game-page .cd-v2 .cd-crumbs a:hover{ color:#fff !important; }
html body.game-page .cd-v2 .cd-crumb-sep{ color:#4d5468; }
html body.game-page .cd-v2 .cd-crumb-current{
  color:var(--dj-mut2); max-width:30ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- en-tete ---------- */
html body.game-page .cd-v2 .cd-hero{
  --cd-tier:var(--dj-t-common);
  position:relative !important; isolation:isolate;
  display:grid !important; grid-template-columns:minmax(0,340px) minmax(0,1fr) !important;
  gap:clamp(28px,5vw,64px) !important; align-items:start !important; justify-content:stretch !important;
  flex-wrap:nowrap !important; max-width:none !important; margin:0 0 48px !important;
}
html body.game-page .cd-v2 .cd-hero[data-tier="chase"]{ --cd-tier:var(--dj-t-chase); }
html body.game-page .cd-v2 .cd-hero[data-tier="secret"]{ --cd-tier:var(--dj-t-secret); }
html body.game-page .cd-v2 .cd-hero[data-tier="super"]{ --cd-tier:var(--dj-t-super); }
html body.game-page .cd-v2 .cd-hero[data-tier="rare"],
html body.game-page .cd-v2 .cd-hero[data-tier="leader"]{ --cd-tier:var(--dj-t-rare); }
html body.game-page .cd-v2 .cd-hero[data-tier="uncommon"]{ --cd-tier:var(--dj-t-uncommon); }

/* halo : l'illustration, tres floutee, eclaire le haut de la page */
html body.game-page .cd-v2 .cd-ambient{
  position:absolute; z-index:-1; left:-10%; top:-80px; width:74%; height:600px;
  background-size:cover; background-position:center; pointer-events:none;
  filter:blur(90px) saturate(1.25); opacity:.2;
  -webkit-mask-image:radial-gradient(closest-side, #000 30%, transparent);
          mask-image:radial-gradient(closest-side, #000 30%, transparent);
}

/* la carte : collante tant que l'en-tete defile */
html body.game-page .cd-v2 .cd-visual{
  position:sticky; top:calc(var(--dj-nav-h) + 22px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
html body.game-page .cd-v2 .cd-visual img{
  display:block; width:100% !important; max-width:340px !important; height:auto !important;
  border-radius:14px !important; margin:0 !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),
             0 36px 80px -30px color-mix(in srgb, var(--cd-tier) 60%, transparent),
             0 22px 50px -24px rgba(0,0,0,.85) !important;
  transition:transform .25s ease, box-shadow .25s ease;
}
html body.game-page .cd-v2 .cd-visual img:hover{ transform:translateY(-4px); }
html body.game-page .cd-v2 .cd-zoom-hint{
  display:inline-flex !important; align-items:center; gap:6px;
  height:30px !important; min-height:0 !important; width:auto !important; padding:0 12px !important; margin:0 !important;
  border:0 !important; border-radius:999px !important;
  background:none !important; background-image:none !important; box-shadow:none !important;
  color:var(--dj-mut) !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important; cursor:pointer; transform:none !important;
}
html body.game-page .cd-v2 .cd-zoom-hint:hover{
  color:#fff !important; background:rgba(255,255,255,.06) !important;
}

/* identite */
html body.game-page .cd-v2 .cd-main{ min-width:0; padding-top:4px; }
html body.game-page .cd-v2 .cd-eyebrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0 0 12px !important;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dj-mut) !important;
}
html body.game-page .cd-v2 .cd-eyebrow a{
  color:var(--dj-mut2) !important; text-decoration:none !important;
}
html body.game-page .cd-v2 .cd-eyebrow a:hover{ color:#fff !important; }
/* Aligne sur la couleur REELLEMENT peinte. Le #4d5468 ecrit ici n'a jamais ete
   visible : un -webkit-text-fill-color herite le recouvrait depuis toujours. On
   fige donc l'apparence actuelle ; revenir a la teinte sombre voulue a l'origine
   est un choix d'esthetique, a faire sciemment. */
html body.game-page .cd-v2 .cd-dot{ color:var(--dj-mut); }
html body.game-page .cd-v2 .cd-title{
  margin:0 !important; padding:0 !important; overflow-wrap:anywhere;
  font-family:var(--impact) !important; font-weight:400 !important;
  font-size:clamp(30px,4.2vw,50px) !important; line-height:1.02 !important;
  letter-spacing:.5px !important; text-transform:uppercase !important;
  color:#fff !important; background:none !important;
}
html body.game-page .cd-v2 .cd-rarity{
  margin:12px 0 0 !important; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cd-tier) !important;
}

/* ---------- ligne des prix : une colonne par plateforme ---------- */
html body.game-page .cd-v2 .cd-prices{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  margin:28px 0 0; padding:18px 0;
  border-top:1px solid var(--dj-line); border-bottom:1px solid var(--dj-line);
}
html body.game-page .cd-v2 .cd-prices.is-solo{ grid-auto-columns:max-content; }
html body.game-page .cd-v2 .cd-price-card{
  position:relative; display:flex !important; flex-direction:column !important; gap:7px !important;
  min-width:0; margin:0 !important; padding:2px 20px !important;
  background:none !important; background-image:none !important; box-shadow:none !important;
  border:0 !important; border-left:1px solid var(--dj-line) !important; border-radius:0 !important;
  cursor:pointer; outline:none;
}
html body.game-page .cd-v2 .cd-price-card::before{ content:none !important; display:none !important; }
html body.game-page .cd-v2 .cd-prices > .cd-price-card:first-child,
html body.game-page .cd-v2 .cd-pf-row > .cd-price-card:nth-child(2){
  border-left:0 !important; padding-left:0 !important;
}
html body.game-page .cd-v2 .cd-price-card:focus-visible{ box-shadow:inset 0 -2px 0 var(--dj-red) !important; }
html body.game-page .cd-v2 .cd-pc-tcg,  html body.game-page .cd-v2 .cd-mk-tcg{ --cd-mk:var(--dj-blue); }
html body.game-page .cd-v2 .cd-pc-cm,   html body.game-page .cd-v2 .cd-mk-cm{ --cd-mk:var(--dj-amber); }
html body.game-page .cd-v2 .cd-pc-ebay, html body.game-page .cd-v2 .cd-mk-ebay{ --cd-mk:var(--dj-red); }
html body.game-page .cd-v2 .cd-pc-top{ display:flex; align-items:center; gap:6px; min-height:14px; }
html body.game-page .cd-v2 .cd-price-card .cd-pc-label{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10.5px !important; font-weight:800 !important; letter-spacing:.08em !important; text-transform:uppercase !important;
  color:var(--dj-mut) !important;
  transition:color .14s ease;
}
html body.game-page .cd-v2 .cd-price-card .cd-pc-label::before{
  content:""; width:7px; height:7px; border-radius:2px; background:var(--cd-mk, var(--dj-mut)); flex:0 0 auto;
}
html body.game-page .cd-v2 .cd-price-card:hover .cd-pc-label{ color:var(--dj-mut2) !important; }
/* la finition est ecrite pour « Comparer » et les lecteurs d'ecran, la ligne la dit deja */
html body.game-page .cd-v2 .cd-pc-fin{
  position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important;
}
html body.game-page .cd-v2 .cd-price-card .cd-pc-val{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 9px;
  font-family:'Inter',system-ui,sans-serif !important; font-size:clamp(20px,2.3vw,26px) !important;
  font-weight:800 !important; line-height:1.1 !important; font-variant-numeric:tabular-nums;
  /* prix de reference (market TCGplayer, trend Cardmarket, mediane eBay) : ambre des courbes */
  color:var(--dj-amber) !important;
}
html body.game-page .cd-v2 .cd-pc-pct{
  font-size:11.5px; font-weight:700; line-height:1; padding:4px 7px; border-radius:999px;
  background:rgba(255,255,255,.06); color:var(--dj-mut2) !important;
}
html body.game-page .cd-v2 .cd-pc-pct.up{ background:rgba(74,222,128,.12); color:#4ade80 !important; }
html body.game-page .cd-v2 .cd-pc-pct.down{ background:rgba(248,113,113,.12); color:#f87171 !important; }
html body.game-page .cd-v2 .cd-pc-stale{
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dj-amber) !important;
}
html body.game-page .cd-v2 .cd-pc-kind{ font-size:12px; color:var(--dj-mut); }

/* deux finitions (Lorcana, Magic) : une ligne par finition */
html body.game-page .cd-v2 .cd-prices--finish{ display:flex; flex-direction:column; gap:0; }
html body.game-page .cd-v2 .cd-pf-row{
  display:grid; grid-template-columns:78px repeat(3, minmax(0,1fr)); align-items:center;
}
html body.game-page .cd-v2 .cd-prices--finish.is-solo .cd-pf-row{ grid-template-columns:78px max-content; }
html body.game-page .cd-v2 .cd-pf-row + .cd-pf-row{ margin-top:14px; padding-top:14px; border-top:1px solid var(--dj-line); }
html body.game-page .cd-v2 .cd-pf-label{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dj-mut2);
}
html body.game-page .cd-v2 .cd-pf-row .cd-price-card .cd-pc-val{ font-size:clamp(17px,1.9vw,21px) !important; }

html body.game-page .cd-v2 .cd-tcg-only-note{
  margin:12px 0 0 !important; font-size:12.5px !important; line-height:1.5 !important;
  color:var(--dj-mut) !important;
}

/* ---------- actions ---------- */
html body.game-page .cd-v2 .cd-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 0; }
html body.game-page .cd-v2 .cd-actions .pull-open-btn,
html body.game-page .cd-v2 .cd-actions .pull-login-link,
html body.game-page .cd-v2 .cd-compare-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  height:42px !important; min-height:0 !important; width:auto !important; margin:0 !important; padding:0 18px !important;
  border-radius:10px !important; background-image:none !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:14px !important; font-weight:700 !important;
  letter-spacing:0 !important; text-transform:none !important; text-decoration:none !important;
  transform:none !important; cursor:pointer; transition:background-color .14s ease, border-color .14s ease !important;
}
html body.game-page .cd-v2 .cd-actions .pull-open-btn,
html body.game-page .cd-v2 .cd-actions .pull-login-link{
  border:0 !important; background:var(--dj-red) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
html body.game-page .cd-v2 .cd-actions .pull-open-btn:hover,
html body.game-page .cd-v2 .cd-actions .pull-login-link:hover{ background:#f0434d !important; }
html body.game-page .cd-v2 .cd-compare-btn{
  border:1px solid var(--dj-line2) !important; background:rgba(255,255,255,.05) !important;
  color:var(--dj-txt) !important;
}
html body.game-page .cd-v2 .cd-compare-btn .cd-ic{ width:16px; height:16px; color:var(--dj-mut2); }
html body.game-page .cd-v2 .cd-compare-btn:hover{ background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.26) !important; }
html body.game-page .cd-v2 .cd-compare-txt{ color:inherit !important; }

/* ---------- ma collection : le meme compteur que dans la grille ---------- */
html body.game-page .cd-v2 .cd-collect{
  display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:10px !important;
  margin:28px 0 0 !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important;
}
html body.game-page .cd-v2 .cd-collect-label{
  font-size:10.5px !important; font-weight:800 !important; letter-spacing:.08em !important; text-transform:uppercase !important;
  color:var(--dj-mut) !important; margin:0 !important;
}
html body.game-page .cd-v2 .cd-collect .cstep{
  display:flex !important; flex-direction:column !important; gap:8px !important;
  width:100% !important; max-width:440px !important; margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
html body.game-page .cd-v2 .cd-collect .cstep-row{
  display:flex !important; align-items:center !important; gap:12px !important; min-height:36px;
  margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
html body.game-page .cd-v2 .cd-collect .cstep-tag{
  flex:1 1 auto !important; min-width:0 !important; max-width:none !important;
  margin:0 !important; padding:0 !important; background:none !important; border:0 !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:var(--dj-mut2) !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html body.game-page .cd-v2 .cd-collect .cstep-btn,
html body.game-page .cd-v2 .cd-collect .cstep-qty{
  height:36px !important; min-height:0 !important; margin:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border:1px solid var(--dj-line2) !important; background:rgba(255,255,255,.04) !important;
  background-image:none !important; box-shadow:none !important; transform:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-variant-numeric:tabular-nums;
  transition:background-color .14s ease, border-color .14s ease !important;
}
html body.game-page .cd-v2 .cd-collect .cstep-btn{
  flex:0 0 36px !important; width:36px !important; padding:0 !important; border-radius:0 !important;
  font-size:16px !important; font-weight:700 !important; line-height:1 !important; cursor:pointer;
  color:var(--dj-mut2) !important;
}
html body.game-page .cd-v2 .cd-collect .cstep-btn.minus{ border-radius:10px 0 0 10px !important; border-right:0 !important; }
html body.game-page .cd-v2 .cd-collect .cstep-btn.plus{ border-radius:0 10px 10px 0 !important; border-left:0 !important; }
html body.game-page .cd-v2 .cd-collect .cstep-qty{
  flex:0 0 auto !important; min-width:46px !important; padding:0 6px !important; border-left:0 !important; border-right:0 !important;
  border-radius:0 !important; font-size:14px !important; font-weight:800 !important;
  color:#fff !important;
}
html body.game-page .cd-v2 .cd-collect .cstep-btn:hover{
  background:rgba(255,255,255,.1) !important; color:#fff !important;
}
/* pas encore possedee : « + Ajouter » */
html body.game-page .cd-v2 .cd-collect .cstep-row:not(.has) .cstep-btn.minus,
html body.game-page .cd-v2 .cd-collect .cstep-row:not(.has) .cstep-qty{ display:none !important; }
html body.game-page .cd-v2 .cd-collect .cstep-row:not(.has) .cstep-btn.plus{
  flex:0 0 auto !important; width:auto !important; gap:7px; padding:0 16px !important;
  border-radius:10px !important; border-left:1px solid var(--dj-line2) !important;
  color:var(--dj-txt) !important;
}
html body.game-page .cd-v2 .cd-collect .cstep-row:not(.has) .cstep-btn.plus::after{
  content:attr(data-add); font-size:13px; font-weight:700;
}
/* possedee : le compteur prend le rouge du dojo */
html body.game-page .cd-v2 .cd-collect .cstep-row.has .cstep-btn,
html body.game-page .cd-v2 .cd-collect .cstep-row.has .cstep-qty{
  border-color:rgba(224,48,58,.5) !important; background:rgba(224,48,58,.1) !important;
}
html body.game-page .cd-v2 .cd-collect .cstep-row.has .cstep-btn:hover{ background:rgba(224,48,58,.22) !important; }
html body.game-page .cd-v2 .cd-collect .cstep-row.ok{ box-shadow:none !important; }

/* ---------- le set ---------- */
html body.game-page .cd-v2 .cd-facts{
  display:grid !important; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)) !important; gap:14px 28px !important;
  margin:30px 0 0 !important; padding:20px 0 0 !important; border-top:1px solid var(--dj-line);
}
html body.game-page .cd-v2 .cd-facts dt{
  margin:0 0 5px !important; font-size:10.5px !important; font-weight:800 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  color:var(--dj-mut) !important;
}
html body.game-page .cd-v2 .cd-facts dd{
  margin:0 !important; font-size:14px !important; font-weight:600 !important; line-height:1.4;
  color:#fff !important;
}
html body.game-page .cd-v2 .cd-facts dd a{
  color:#fff !important;
  text-decoration:underline !important; text-decoration-color:rgba(255,255,255,.25) !important; text-underline-offset:3px;
}
html body.game-page .cd-v2 .cd-facts dd a:hover{ text-decoration-color:var(--dj-red) !important; }
html body.game-page .cd-v2 .cd-intro{
  max-width:64ch; margin:18px 0 0 !important; font-size:14px !important; line-height:1.7 !important;
  color:var(--dj-mut) !important;
}
html body.game-page .cd-v2 .cd-intro strong{ color:var(--dj-txt) !important; font-weight:700; }
html body.game-page .cd-v2 .cd-intro b{ color:var(--dj-mut2) !important; font-weight:700; }
/* « Description » repliable sous les infos du set */
html body.game-page .cd-v2 .cd-details.cd-desc{ margin:16px 0 0; border-top:1px solid var(--dj-line); border-bottom:0; }
html body.game-page .cd-v2 .cd-desc .cd-intro{ margin:0 0 14px !important; }

/* ---------- prix par plateforme ---------- */
html body.game-page .cd-v2 .cd-markets{
  padding:34px 0 0; border-top:1px solid var(--dj-line); scroll-margin-top:calc(var(--dj-nav-h) + 16px);
}
html body.game-page .cd-v2 .cd-markets-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px 20px; flex-wrap:wrap; margin:0 0 26px;
}
html body.game-page .cd-v2 .cd-h2{
  display:flex; align-items:center; gap:11px; margin:0 !important;
  font-family:var(--impact) !important; font-weight:400 !important; font-size:15px !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important;
  color:#fff !important;
}
html body.game-page .cd-v2 .cd-h2::before{
  content:""; width:18px; height:3px; border-radius:2px; background:var(--dj-red); flex:0 0 auto;
}
html body.game-page .cd-v2 .cd-tabs{
  display:inline-flex; gap:4px; padding:4px; max-width:100%; overflow-x:auto; scrollbar-width:none;
  border:1px solid var(--dj-line2); border-radius:12px; background:rgba(255,255,255,.03);
}
html body.game-page .cd-v2 .cd-tabs::-webkit-scrollbar{ display:none; }
html body.game-page .cd-v2 .cd-tab{
  display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:9px;
  font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none !important;
  color:var(--dj-mut) !important;
  transition:background-color .14s ease, color .14s ease;
}
html body.game-page .cd-v2 .cd-tab::before{
  content:""; width:7px; height:7px; border-radius:2px; background:var(--cd-mk); flex:0 0 auto;
}
html body.game-page .cd-v2 .cd-tab:hover{ background:rgba(255,255,255,.05); color:#fff !important; }
html body.game-page .cd-v2 .cd-tab.is-on{ background:rgba(255,255,255,.1); color:#fff !important; }
html body.game-page .cd-v2 .cd-markets.is-tabbed .cd-market:not(.is-on){ display:none; }
html body.game-page .cd-v2 .cd-markets:not(.is-tabbed) .cd-market + .cd-market{
  margin-top:34px; padding-top:30px; border-top:1px solid var(--dj-line);
}
html body.game-page .cd-v2 .cd-market-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 18px;
}
html body.game-page .cd-v2 .cd-market-title{
  display:inline-flex; align-items:center; gap:8px; margin:0 !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:11px !important; font-weight:800 !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:var(--dj-mut2) !important;
}
html body.game-page .cd-v2 .cd-market-title::before{
  content:""; width:7px; height:7px; border-radius:2px; background:var(--cd-mk); flex:0 0 auto;
}
html body.game-page .cd-v2 .cd-market-link{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px;
  border:1px solid var(--dj-line2); border-radius:10px; background:rgba(255,255,255,.05);
  font-size:12.5px; font-weight:600; text-decoration:none !important;
  color:var(--dj-mut2) !important;
  transition:background-color .14s ease, border-color .14s ease;
}
html body.game-page .cd-v2 .cd-market-link .cd-ic{ width:14px; height:14px; }
html body.game-page .cd-v2 .cd-market-link:hover{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26);
  color:#fff !important;
}
html body.game-page .cd-v2 .cd-market-body{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:24px 44px; align-items:start;
}
html body.game-page .cd-v2 .cd-market-body.is-single{ grid-template-columns:minmax(0,1fr); max-width:680px; }
html body.game-page .cd-v2 .cd-chart{ min-width:0; margin:0; padding:0; border:0; }
html body.game-page .cd-v2 .cd-chart-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 6px;
}
html body.game-page .cd-v2 .cd-chart-head h4{
  margin:0 !important; font-size:10.5px !important; font-weight:800 !important; letter-spacing:.08em !important;
  text-transform:uppercase !important; color:var(--dj-mut) !important;
}
html body.game-page .cd-v2 .cd-chart-head span{ font-size:12px; color:#6f7689; }
html body.game-page .cd-v2 .cd-empty{
  margin:0 !important; padding:18px 0; font-size:13.5px; line-height:1.6;
  color:var(--dj-mut) !important;
}

/* chiffres : une liste filetee, la valeur-cle plus grande */
html body.game-page .cd-v2 .cd-market-data{ min-width:0; }
html body.game-page .cd-v2 .cd-stats{ display:flex; flex-direction:column; border-top:1px solid var(--dj-line); }
html body.game-page .cd-v2 .cd-stat{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--dj-line);
}
html body.game-page .cd-v2 .cd-stat span{ font-size:13px; color:var(--dj-mut) !important; }
html body.game-page .cd-v2 .cd-stat strong{
  font-size:14px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums;
  color:var(--dj-txt) !important;
}
html body.game-page .cd-v2 .cd-stat.is-key span{ color:var(--dj-mut2) !important; }
html body.game-page .cd-v2 .cd-stat.is-key strong{ font-size:18px; font-weight:800; color:var(--dj-amber) !important; }
html body.game-page .cd-v2 .cd-group-label{
  margin:24px 0 8px !important; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dj-mut2) !important;
}
html body.game-page .cd-v2 .cd-market-data > .cd-group-label:first-child,
html body.game-page .cd-v2 .cd-market-data > .cd-group:first-child > .cd-group-label{ margin-top:0 !important; }

/* tableau des variantes TCGplayer */
html body.game-page .cd-v2 .cd-table-wrap{ overflow-x:auto; }
html body.game-page .cd-v2 .cd-table{
  width:100%; border-collapse:collapse; background:none !important; font-size:13px; font-variant-numeric:tabular-nums;
}
html body.game-page .cd-v2 .cd-table th{
  padding:0 12px 10px 0; text-align:left; white-space:nowrap; background:none !important;
  border-bottom:1px solid var(--dj-line2);
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dj-mut) !important;
}
html body.game-page .cd-v2 .cd-table td{
  padding:12px 12px 12px 0; vertical-align:top; white-space:nowrap; background:none !important;
  border-bottom:1px solid var(--dj-line);
  color:var(--dj-mut2) !important;
}
html body.game-page .cd-v2 .cd-table th:last-child,
html body.game-page .cd-v2 .cd-table td:last-child{ padding-right:0; }
html body.game-page .cd-v2 .cd-table td:first-child{
  white-space:normal; font-weight:600; color:var(--dj-txt) !important;
}
html body.game-page .cd-v2 .cd-table td small{
  display:block; margin-top:2px; font-size:11.5px; font-weight:400;
  color:var(--dj-mut) !important;
}
html body.game-page .cd-v2 .cd-table th.is-key{ color:var(--dj-mut2) !important; }
html body.game-page .cd-v2 .cd-table td.is-key{ font-weight:800; color:var(--dj-amber) !important; }

/* prix par état (NM, LP…) et nombre d'annonces TCGplayer */
html body.game-page .cd-v2 .cd-cond .cd-group-label{ margin:14px 0 6px !important; }
html body.game-page .cd-v2 .cd-cond .cd-table th.is-num,
html body.game-page .cd-v2 .cd-cond .cd-table td.is-num{ text-align:right; }
html body.game-page .cd-v2 .cd-cond .cd-table td{ padding-top:9px; padding-bottom:9px; }
html body.game-page .cd-v2 .cd-cond-none{ margin:8px 0 0 !important; font-size:12px; color:var(--dj-mut) !important; }
html body.game-page .cd-v2 .cd-cond-note{ margin:12px 0 14px !important; font-size:11.5px; line-height:1.45; color:var(--dj-mut) !important; }

/* annonces et cartes gradees : repliees par defaut */
html body.game-page .cd-v2 .cd-details{ margin:14px 0 0; border-bottom:1px solid var(--dj-line); }
html body.game-page .cd-v2 .cd-details summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:12px 0;
  font-size:13px; font-weight:600; color:var(--dj-mut2) !important;
}
html body.game-page .cd-v2 .cd-details summary::-webkit-details-marker{ display:none; }
html body.game-page .cd-v2 .cd-details summary::after{
  content:""; width:7px; height:7px; margin-left:auto; margin-right:3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .15s ease;
}
html body.game-page .cd-v2 .cd-details[open] summary::after{ transform:translateY(1px) rotate(-135deg); }
html body.game-page .cd-v2 .cd-details summary:hover{ color:#fff !important; }
html body.game-page .cd-v2 .cd-list-label{
  margin:6px 0 4px !important; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dj-mut) !important;
}
html body.game-page .cd-v2 .cd-list{ list-style:none; margin:0 0 12px !important; padding:0 !important; }
html body.game-page .cd-v2 .cd-list li{
  display:flex; justify-content:space-between; gap:14px; padding:8px 0; margin:0;
  border-top:1px solid var(--dj-line); font-size:12.5px; background:none;
}
html body.game-page .cd-v2 .cd-list li > a,
html body.game-page .cd-v2 .cd-list li > span:first-child{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none !important;
  color:var(--dj-txt) !important;
}
html body.game-page .cd-v2 .cd-list li > a:hover{ color:#fff !important; text-decoration:underline !important; }
html body.game-page .cd-v2 .cd-list li > span:last-child{
  flex:0 0 auto; font-variant-numeric:tabular-nums; color:var(--dj-mut2) !important;
}
html body.game-page .cd-v2 .cd-list.is-muted li > a,
html body.game-page .cd-v2 .cd-list.is-muted li > span{ color:var(--dj-mut) !important; }
html body.game-page .cd-v2 .cd-graded{ margin-top:24px; }
html body.game-page .cd-v2 .cd-graded .cd-group-label{ margin:0 0 2px !important; }
html body.game-page .cd-v2 .cd-graded .cd-details{ margin:0; }
html body.game-page .cd-v2 .cd-grade{
  display:inline-flex; align-items:center; height:22px; padding:0 9px;
  border:1px solid var(--dj-line2); border-radius:999px; font-size:11px; font-weight:800;
  color:#fff !important;
}
html body.game-page .cd-v2 .cd-sold{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin:18px 0 0 !important; font-size:13px; color:var(--dj-mut) !important;
}
html body.game-page .cd-v2 .cd-sold a{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; text-decoration:none !important;
  color:var(--dj-txt) !important;
}
html body.game-page .cd-v2 .cd-sold a:hover{ color:#fff !important; }

/* ---------- liens de fin ---------- */





/* info-bulle des graphiques (commune au site), accordee au fond sombre */
html body.game-page .ph-tooltip{
  background:#15171d !important; color:var(--dj-txt) !important; border:1px solid var(--dj-line2) !important;
  border-radius:8px !important; box-shadow:0 10px 30px rgba(0,0,0,.5) !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:12px !important; font-weight:600 !important;
}

/* ---------- tablette / mobile ---------- */
@media (max-width:900px){
  html body.game-page .cd-v2 .cd-hero{ grid-template-columns:minmax(0,1fr) !important; gap:26px !important; margin-bottom:40px !important; }
  html body.game-page .cd-v2 .cd-visual{ position:static; }
  html body.game-page .cd-v2 .cd-visual img{ max-width:min(270px, 72vw) !important; }
  html body.game-page .cd-v2 .cd-ambient{ left:0; width:100%; height:440px; top:-40px; }
  html body.game-page .cd-v2 .cd-market-body{ grid-template-columns:minmax(0,1fr); }
  html body.game-page .cd-v2 .cd-crumbs{ display:none; }
}
@media (max-width:560px){
  html body.game-page .cd-v2 .cd-topbar{ margin-bottom:18px; }
  html body.game-page .cd-v2 .cd-prices{ padding:14px 0; }
  html body.game-page .cd-v2 .cd-price-card{ padding:2px 12px !important; gap:6px !important; }
  html body.game-page .cd-v2 .cd-price-card .cd-pc-val{ font-size:18px !important; }
  html body.game-page .cd-v2 .cd-pc-kind{ font-size:11px; }
  html body.game-page .cd-v2 .cd-pf-row{ grid-template-columns:60px repeat(3, minmax(0,1fr)); }
  html body.game-page .cd-v2 .cd-pf-row .cd-price-card .cd-pc-val{ font-size:15px !important; }
  html body.game-page .cd-v2 .cd-actions > *{ flex:1 1 auto; }
  html body.game-page .cd-v2 .cd-collect .cstep{ max-width:none !important; }
  html body.game-page .cd-v2 .cd-markets-head{ flex-direction:column; align-items:stretch; }
  html body.game-page .cd-v2 .cd-tabs{ display:flex; }
  html body.game-page .cd-v2 .cd-tab{ flex:1 1 0; justify-content:center; padding:0 8px; }
}
@media (prefers-reduced-motion:reduce){
  html body.game-page .cd-v2 .cd-visual img{ transition:none; }
  html body.game-page .cd-v2 .cd-visual img:hover{ transform:none; }
}

/* deux finitions : les noms de plateformes ne sont ecrits qu'une fois, sur la
   premiere ligne ; ils restent dans le code (lecteurs d'ecran, « Comparer »). */
html body.game-page .cd-v2 .cd-pf-row + .cd-pf-row .cd-pc-top{
  position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important;
}


/* image introuvable : un cadre au format carte plutot que l'icone d'image cassee */
html body.game-page .cd-v2 .cd-noimg{ display:none; }
html body.game-page .cd-v2 .cd-visual.is-missing .cd-noimg{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  width:100%; max-width:340px; aspect-ratio:63 / 88;
  border:1px dashed var(--dj-line2); border-radius:14px; background:rgba(255,255,255,.02);
  font-size:12.5px; font-weight:600; color:var(--dj-mut);
}
html body.game-page .cd-v2 .cd-noimg svg{ width:34px; height:34px; opacity:.6; }
html body.game-page .cd-v2 .cd-visual.is-missing img,
html body.game-page .cd-v2 .cd-visual.is-missing .cd-zoom-hint{ display:none !important; }
@media (max-width:900px){
  html body.game-page .cd-v2 .cd-visual.is-missing .cd-noimg{ max-width:min(270px, 72vw); }
}
/* mobile : les libelles de plateforme tiennent dans leur colonne, les en-tetes du
   tableau passent sur deux lignes plutot que de deborder */
@media (max-width:560px){
  html body.game-page .cd-v2 .cd-price-card .cd-pc-label{ font-size:9.5px !important; letter-spacing:.03em !important; gap:5px; }
  html body.game-page .cd-v2 .cd-price-card .cd-pc-label::before{ width:6px; height:6px; }
  html body.game-page .cd-v2 .cd-table th{ white-space:normal; padding-right:8px; }
  html body.game-page .cd-v2 .cd-table td{ padding-right:8px; font-size:12.5px; }
}



/* ====================== FENETRE « JE L'AI PULL » ======================
   Fenetre globale (base.html). Meme habillage que « Comparer les prix » :
   fond sombre, titre Anton avec le trait rouge, champs sombres, bouton rouge.
   Le « mood » passe d'une liste deroulante a des pastilles cliquables.
   Au-dessus de l'en-tete du site (z-index 10000) : c'est lui qui masquait
   le haut de la fenetre sur mobile. Sur mobile : panneau qui monte du bas,
   defilement interne, bouton « Partager » toujours visible.
   ==================================================================== */
body.pm-open{ overflow:hidden !important; }
html body .pull-modal{
  z-index:100040 !important; padding:24px !important; overflow:hidden !important;
  align-items:center !important; justify-content:center !important;
  font-family:'Inter',system-ui,sans-serif;
}
html body .pull-modal-backdrop{
  background:rgba(5,6,9,.74) !important;
  -webkit-backdrop-filter:blur(4px) !important; backdrop-filter:blur(4px) !important;
}
html body .pull-modal .pull-modal-card{
  display:flex !important; flex-direction:column !important;
  width:min(540px, 100%) !important; max-height:calc(100dvh - 48px) !important;
  margin:0 !important; padding:0 !important; overflow:hidden !important;
  background:#13151b !important; background-image:none !important;
  border:1px solid rgba(255,255,255,.13) !important; border-radius:16px !important;
  box-shadow:0 30px 90px rgba(0,0,0,.6) !important;
  color:var(--dj-txt, #e9eaf0) !important;
}
/* en-tete */
html body .pull-modal .pm-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex:0 0 auto;
  padding:15px 16px 15px 18px; border-bottom:1px solid rgba(255,255,255,.07);
}
html body .pull-modal .pm-title{
  display:flex; align-items:center; gap:11px; margin:0 !important;
  font-family:var(--impact, 'Anton', system-ui, sans-serif) !important; font-weight:400 !important;
  font-size:15px !important; letter-spacing:1.4px !important; text-transform:uppercase !important; line-height:1.2 !important;
  color:#fff !important;
}
html body .pull-modal .pm-title::before{
  content:""; width:18px; height:3px; border-radius:2px; background:var(--dj-red, #e0303a); flex:0 0 auto;
}
html body .pull-modal .pull-modal-close{
  position:static !important; display:inline-flex !important; align-items:center; justify-content:center;
  width:34px !important; height:34px !important; min-height:0 !important; padding:0 !important; margin:0 !important;
  border:1px solid rgba(255,255,255,.13) !important; border-radius:10px !important;
  background:rgba(255,255,255,.05) !important; background-image:none !important; box-shadow:none !important;
  color:#c4c9d6 !important; cursor:pointer;
}
html body .pull-modal .pull-modal-close svg{ width:16px; height:16px; }
html body .pull-modal .pull-modal-close:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
/* contenu qui defile */
html body .pull-modal .pm-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:18px 18px 0;
}
/* la carte partagee */
html body .pull-modal .pull-modal-preview{
  display:grid !important; grid-template-columns:92px minmax(0,1fr) !important; gap:16px !important;
  align-items:center !important; margin:0 0 20px !important; padding:0 0 18px !important;
  border-bottom:1px solid rgba(255,255,255,.07);
}
html body .pull-modal .pull-card-preview{
  width:92px !important; max-width:92px !important; margin:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important;
}
html body .pull-modal #pull-modal-image{
  display:block; width:100% !important; height:auto !important; max-height:none !important;
  border-radius:8px !important; object-fit:contain;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 14px 30px -12px rgba(0,0,0,.8) !important;
  animation:none !important;
}
html body .pull-modal .pm-card-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
html body .pull-modal #pull-modal-card-name{
  font-size:16px !important; font-weight:700 !important; line-height:1.3 !important;
  color:#fff !important; overflow-wrap:anywhere;
}
html body .pull-modal #pull-modal-set{
  display:block; margin:0 !important; font-size:13px !important;
  color:var(--dj-mut, #959bab) !important;
}
html body .pull-modal #pull-modal-price{
  display:block; margin:2px 0 0 !important; font-size:15px !important; font-weight:800 !important;
  font-variant-numeric:tabular-nums; color:#fff !important;
}
html body .pull-modal .pm-intro{
  margin:8px 0 0 !important; font-size:12.5px !important; line-height:1.5 !important;
  color:var(--dj-mut, #959bab) !important;
}
/* formulaire */
html body .pull-modal .pull-form{ display:flex !important; flex-direction:column !important; gap:18px !important; }
html body .pull-modal .pm-label{
  display:block; margin:0 0 8px; padding:0;
  font-size:10.5px !important; font-weight:800 !important; letter-spacing:.08em !important; text-transform:uppercase !important;
  color:var(--dj-mut, #959bab) !important;
}
html body .pull-modal .pm-moods{ margin:0; padding:0; border:0; min-width:0; }
html body .pull-modal .pm-mood-list{ display:flex; flex-wrap:wrap; gap:8px; }
html body .pull-modal .pm-mood{ position:relative; display:inline-flex; margin:0; cursor:pointer; }
html body .pull-modal .pm-mood input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
html body .pull-modal .pm-mood span{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px;
  border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.04);
  font-size:13px; font-weight:600; white-space:nowrap;
  color:var(--dj-mut2, #c4c9d6) !important;
  transition:background-color .14s ease, border-color .14s ease, color .14s ease;
}
html body .pull-modal .pm-mood span i{ font-style:normal; font-size:14px; line-height:1; }
html body .pull-modal .pm-mood:hover span{ border-color:rgba(255,255,255,.26); color:#fff !important; }
html body .pull-modal .pm-mood input:checked + span{
  border-color:rgba(224,48,58,.6); background:rgba(224,48,58,.14);
  color:#fff !important;
}
html body .pull-modal .pm-mood input:focus-visible + span{ outline:2px solid rgba(224,48,58,.7); outline-offset:2px; }
html body .pull-modal .pm-field{ display:block !important; margin:0 !important; font-weight:400 !important; }
html body .pull-modal .pull-form input[type="text"],
html body .pull-modal .pull-form textarea{
  display:block; width:100% !important; margin:0 !important; box-sizing:border-box;
  background:rgba(255,255,255,.04) !important; background-image:none !important;
  border:1px solid rgba(255,255,255,.13) !important; border-radius:10px !important; box-shadow:none !important;
  color:var(--dj-txt, #e9eaf0) !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:14px !important; font-weight:500 !important;
  outline:none !important; transition:border-color .14s ease, box-shadow .14s ease;
}
html body .pull-modal .pull-form input[type="text"]{ height:42px !important; padding:0 12px !important; }
html body .pull-modal .pull-form textarea{
  min-height:88px; padding:11px 52px 11px 12px !important; resize:vertical; line-height:1.5 !important;
}
html body .pull-modal .pull-form input[type="text"]::placeholder,
html body .pull-modal .pull-form textarea::placeholder{
  color:#6f7689 !important; opacity:1;
}
html body .pull-modal .pull-form input[type="text"]:focus,
html body .pull-modal .pull-form textarea:focus{
  border-color:var(--dj-red, #e0303a) !important; box-shadow:0 0 0 3px rgba(224,48,58,.18) !important;
}
/* commentaire : le bouton emoji se pose dans le coin du champ */
html body .pull-modal .pm-caption{ position:relative; display:block; }
html body .pull-modal .pm-caption .emoji-btn{
  position:absolute !important; right:8px; bottom:8px;
  width:34px !important; height:34px !important; border-radius:9px !important;
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.13) !important;
  color:#fff !important; font-size:1rem !important;
}
html body .pull-modal .pm-caption .emoji-btn:hover{ background:rgba(255,255,255,.12) !important; }
html body .pull-modal .pm-caption .emoji-btn::after{ background:var(--dj-red, #e0303a) !important; }
/* actions : collees en bas de la fenetre, toujours visibles */
html body .pull-modal .pull-form-actions{
  position:sticky; bottom:0; z-index:1;
  display:flex !important; justify-content:flex-end !important; gap:10px !important; flex-wrap:nowrap !important;
  margin:4px -18px 0 !important; padding:14px 18px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  background:#13151b; border-top:1px solid rgba(255,255,255,.07);
}
html body .pull-modal .pull-form-actions .btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  height:42px !important; min-height:0 !important; min-width:0 !important; padding:0 18px !important; margin:0 !important;
  border-radius:10px !important; background-image:none !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:14px !important; font-weight:700 !important;
  letter-spacing:0 !important; text-transform:none !important; transform:none !important; cursor:pointer;
}
html body .pull-modal .pull-form-actions .btn.secondary{
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.13) !important;
  color:var(--dj-txt, #e9eaf0) !important;
}
html body .pull-modal .pull-form-actions .btn.secondary:hover{ background:rgba(255,255,255,.1) !important; }
html body .pull-modal .pull-form-actions .btn.pull-share-submit{
  background:var(--dj-red, #e0303a) !important; border:0 !important;
  color:#fff !important;
}
html body .pull-modal .pull-form-actions .btn.pull-share-submit:hover{ background:#f0434d !important; }
html body .pull-modal .pull-form-actions .btn *{ color:inherit !important; }

/* mobile : panneau qui monte du bas de l'ecran */
@media (max-width:640px){
  html body .pull-modal{ padding:0 !important; align-items:flex-end !important; }
  html body .pull-modal .pull-modal-card{
    width:100% !important; max-height:calc(100dvh - 10px) !important;
    border-radius:18px 18px 0 0 !important; border-bottom:0 !important;
    animation:pmSheetUp .22s ease-out;
  }
  html body .pull-modal .pm-head{ padding:13px 14px 13px 16px; }
  html body .pull-modal .pm-scroll{ padding:16px 16px 0; }
  html body .pull-modal .pull-modal-preview{ grid-template-columns:76px minmax(0,1fr) !important; gap:14px !important; }
  html body .pull-modal .pull-card-preview{ width:76px !important; max-width:76px !important; }
  html body .pull-modal .pull-form-actions{ margin:4px -16px 0 !important; padding:12px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
  html body .pull-modal .pull-form-actions .btn{ flex:1 1 0; }
}
@keyframes pmSheetUp{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){
  html body .pull-modal .pull-modal-card{ animation:none; }
}



/* ============================ MA COLLECTION ============================
   collection.html. Meme grammaire que l'accueil, les pages de jeu et la fiche
   carte : pas de boites dans des boites, des filets d'un pixel, micro-libelles en
   capitales, Anton pour les titres, valeurs en blanc.
   - En-tete « portefeuille » : la valeur totale en grand + sa variation, les autres
     chiffres en micro-libelles separes par des filets.
   - Graphique (courbe ambre + barres discretes), periode en pastilles.
   - Hausses / baisses : deux listes filetees.
   - « Mes cartes » : jeux en pastilles, barre d'outils, grille alignee comme sur les
     pages de jeu (sous-grille de six rangees).
   Tout est prefixe par .cv : les anciennes regles (cartes blanches) ne s'appliquent plus.
   ==================================================================== */
html body .cv{
  max-width:1180px; margin:0 auto; padding:10px 0 64px;
  font-family:'Inter',system-ui,sans-serif; color:var(--dj-txt);
}
html body .cv .cv-h2{
  display:flex; align-items:center; gap:11px; margin:0 !important;
  font-family:var(--impact) !important; font-weight:400 !important; font-size:15px !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important; line-height:1.2 !important;
  color:#fff !important;
}
html body .cv .cv-h2::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--dj-red); flex:0 0 auto; }
html body .cv .cv-h2.is-up::before{ background:#4ade80; }
html body .cv .cv-h2.is-down::before{ background:#f87171; }

/* ---------- en-tete ---------- */
html body .cv .cv-hero{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 56px; align-items:end;
  padding:10px 0 30px;
}
html body .cv .cv-title{
  margin:0 0 22px !important; padding:0 !important;
  font-family:var(--impact) !important; font-weight:400 !important;
  font-size:clamp(34px,5vw,56px) !important; line-height:1 !important;
  letter-spacing:.5px !important; text-transform:uppercase !important;
  color:#fff !important;
}
html body .cv .cv-kicker{
  margin:0 0 10px !important; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dj-mut) !important;
}
html body .cv .cv-kicker span{ color:#6f7689; }
html body .cv .cv-total{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
html body .cv .cv-total-val{
  font-size:clamp(40px,6vw,64px); font-weight:800; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:#fff !important;
}
html body .cv .cv-total-val small{
  margin-left:8px; font-size:.42em; font-weight:700; letter-spacing:0;
  color:var(--dj-mut2) !important;
}
html body .cv .cv-delta{
  display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:999px;
  font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
html body .cv .cv-delta em{ font-style:normal; font-weight:800; opacity:.9; }
html body .cv .cv-delta.up{ background:rgba(74,222,128,.12); color:#4ade80 !important; }
html body .cv .cv-delta.down{ background:rgba(248,113,113,.12); color:#f87171 !important; }
html body .cv .cv-delta-period{ font-size:12.5px; color:var(--dj-mut); }
html body .cv .cv-note{ margin:12px 0 0 !important; font-size:12.5px; color:var(--dj-mut) !important; }

html body .cv .cv-stats{ display:flex; align-items:stretch; margin:0 !important; padding:0 0 4px; }
html body .cv .cv-stat{
  position:relative; padding:0 0 0 26px; margin:0 0 0 26px; border-left:1px solid var(--dj-line);
}
html body .cv .cv-stat:first-child{ padding-left:0; margin-left:0; border-left:0; }
html body .cv .cv-stat dt{
  display:flex; align-items:center; gap:7px; margin:0 0 8px !important;
  font-size:10.5px !important; font-weight:800 !important; letter-spacing:.08em !important; text-transform:uppercase !important;
  color:var(--dj-mut) !important;
}
html body .cv .cv-stat dd{ margin:0 !important; }
html body .cv .cv-stat dd b{
  display:block; font-size:21px; font-weight:800; line-height:1.1; white-space:nowrap; font-variant-numeric:tabular-nums;
  color:#fff !important;
}
html body .cv .cv-stat dd small{
  display:block; margin-top:5px; font-size:12px; white-space:nowrap;
  color:var(--dj-mut) !important;
}










/* ---------- graphique ---------- */
html body .cv .cv-chart{ padding:24px 0 0; border-top:1px solid var(--dj-line); scroll-margin-top:calc(var(--dj-nav-h) + 16px); }
html body .cv .cv-chart-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin:0 0 14px;
}
html body .cv .cv-legend{ display:flex; gap:18px; font-size:12px; color:var(--dj-mut); }
html body .cv .cv-lg{ display:inline-flex; align-items:center; gap:7px; }
html body .cv .cv-lg::before{ content:""; width:10px; height:10px; border-radius:2px; flex:0 0 auto; }
html body .cv .cv-lg-value::before{ background:var(--dj-amber); }
html body .cv .cv-lg-qty::before{ background:rgba(255,255,255,.2); }
html body .cv .cv-range{
  display:inline-flex; gap:2px; padding:3px; max-width:100%; overflow-x:auto; scrollbar-width:none;
  border:1px solid var(--dj-line2); border-radius:10px; background:rgba(255,255,255,.03);
}
html body .cv .cv-range::-webkit-scrollbar{ display:none; }
html body .cv .cv-range-opt{
  display:inline-flex; align-items:center; height:30px; padding:0 11px; border-radius:8px; white-space:nowrap;
  font-size:12.5px; font-weight:600; text-decoration:none !important;
  color:var(--dj-mut) !important;
  transition:background-color .14s ease, color .14s ease;
}
html body .cv .cv-range-opt:hover{ color:#fff !important; background:rgba(255,255,255,.05); }
html body .cv .cv-range-opt.is-on{ background:rgba(255,255,255,.1); color:#fff !important; }
html body .cv .cv-chart-svg{ width:100%; }
html body .cv .cv-chart-svg svg{ display:block; width:100%; height:auto; }
html body .cv .cv-chart-svg .cc-hit{ cursor:pointer; }
html body .cv .cv-chart-empty{ padding:34px 0 30px; text-align:center; }
html body .cv .cv-chart-empty-title{ margin:0 0 6px !important; font-size:15px; font-weight:700; color:#fff !important; }
html body .cv .cv-chart-empty-sub{
  max-width:60ch; margin:0 auto !important; font-size:13px; line-height:1.6;
  color:var(--dj-mut) !important;
}
html body .cv .cv-chart-empty-sub strong{ color:var(--dj-txt); }
/* info-bulle du graphique (element cree par le script) */
html body .cc-tip{
  background:#15171d !important; border:1px solid var(--dj-line2) !important; border-radius:10px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.5) !important; color:var(--dj-txt) !important;
  font-family:'Inter',system-ui,sans-serif !important;
}
html body .cc-tip .cc-tip-date,
html body .cc-tip .cc-tip-v{ color:#fff !important; }
html body .cc-tip .cc-tip-k{ color:var(--dj-mut) !important; }
html body .cc-tip .cc-tip-kv::before{ background:var(--dj-amber) !important; }
html body .cc-tip .cc-tip-kq::before{ background:rgba(255,255,255,.3) !important; }

/* ---------- hausses / baisses ---------- */
html body .cv .col-movers.cv-movers{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 56px;
  margin:36px 0 0 !important; padding:30px 0 0 !important;
  background:none !important; border:0 !important; border-top:1px solid var(--dj-line) !important; box-shadow:none !important;
}
html body .cv .cv-mv-col{ min-width:0; }
html body .cv .cv-mv-list{ list-style:none; margin:16px 0 0 !important; padding:0 !important; border-top:1px solid var(--dj-line); }
html body .cv .cv-mv-row{
  display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:12px; align-items:center;
  margin:0; padding:9px 0; border-bottom:1px solid var(--dj-line);
}
html body .cv .cv-mv-thumb{
  display:block !important; width:36px !important; height:50px !important; margin:0 !important; padding:0 !important;
  border:0 !important; border-radius:4px !important; overflow:hidden; cursor:zoom-in;
  background:rgba(255,255,255,.04) !important; box-shadow:0 0 0 1px rgba(255,255,255,.12) !important;
}
html body .cv .cv-mv-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
html body .cv .cv-mv-thumb:hover, html body .cv .cv-mv-thumb:focus-visible{ box-shadow:0 0 0 1px rgba(255,255,255,.4) !important; outline:none; }
html body .cv .cv-mv-id{ display:flex; flex-direction:column; gap:3px; min-width:0; }
html body .cv .cv-mv-name{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none !important;
  font-size:13.5px; font-weight:600; color:var(--dj-txt) !important;
}
html body .cv a.cv-mv-name:hover{ color:#fff !important; }
html body .cv .cv-mv-id small{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px;
  color:var(--dj-mut) !important;
}
html body .cv .cv-mv-val{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
html body .cv .cv-pct{ font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; }
html body .cv .cv-pct.is-up{ color:#4ade80 !important; }
html body .cv .cv-pct.is-down{ color:#f87171 !important; }
html body .cv .cv-mv-val small{ font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--dj-mut) !important; }
html body .cv .cv-empty-line{
  margin:16px 0 0 !important; font-size:13px; line-height:1.6;
  color:var(--dj-mut) !important;
}
/* apercu agrandi (element cree par le script) */
html body .cmv-preview{
  padding:6px !important; background:#15171d !important; border:1px solid var(--dj-line2) !important;
  border-radius:12px !important; box-shadow:0 18px 44px rgba(0,0,0,.6) !important;
}
html body .cmv-preview img{ border-radius:8px !important; }

/* ---------- mes cartes : filtres ---------- */
html body .cv .cv-browse{ margin:40px 0 0; padding:30px 0 0; border-top:1px solid var(--dj-line); scroll-margin-top:calc(var(--dj-nav-h) + 16px); }
html body .cv .cv-browse-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 18px; }
html body .cv .cv-count{ font-size:12.5px; color:var(--dj-mut); font-variant-numeric:tabular-nums; }
/* Le compte est colle a droite, l'export le suit : la barre reste lisible a trois
   elements alors qu'elle etait pensee pour deux (justify-content:space-between). */
html body .cv .cv-browse-head .cv-count{ margin-left:auto; }
html body .cv .cv-export{
  display:inline-flex; align-items:center; gap:7px; flex:none; height:32px; padding:0 12px;
  border-radius:9px; border:1px solid var(--dj-line2); background:rgba(255,255,255,.05);
  font-size:12.5px; font-weight:600; text-decoration:none !important;
  color:var(--dj-txt) !important;
}
html body .cv .cv-export:hover{ background:rgba(255,255,255,.1); }
html body .cv .cv-export svg{ width:14px; height:14px; flex:none; }
@media (max-width:560px){
  /* Sur telephone, l'icone seule : trois elements sur une ligne devenaient illisibles. */
  html body .cv .cv-export span{ display:none; }
  html body .cv .cv-export{ padding:0 10px; }
}
html body .cv .cv-filters{
  display:flex !important; flex-direction:column !important; gap:14px !important;
  margin:0 0 24px !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important;
  scroll-margin-top:calc(var(--dj-nav-h) + 16px);
}
html body .cv .cv-games{ display:flex; flex-wrap:wrap; gap:8px; }
html body .cv .cv-game{ position:relative; display:inline-flex; margin:0 !important; cursor:pointer; font-weight:400 !important; }
html body .cv .cv-game input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
html body .cv .cv-game span{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; white-space:nowrap;
  border:1px solid var(--dj-line2); border-radius:999px; background:rgba(255,255,255,.04);
  font-size:13px; font-weight:600; color:var(--dj-mut2) !important;
  transition:background-color .14s ease, border-color .14s ease, color .14s ease;
}
html body .cv .cv-game span b{ font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--dj-mut); }
html body .cv .cv-game:hover span{ border-color:rgba(255,255,255,.26); color:#fff !important; }
html body .cv .cv-game input:checked + span{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.32);
  color:#fff !important;
}
html body .cv .cv-game input:checked + span b{ color:var(--dj-mut2); }
html body .cv .cv-game input:focus-visible + span{ outline:2px solid rgba(224,48,58,.7); outline-offset:2px; }

html body .cv .cv-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
html body .cv .cv-field{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
html body .cv .cv-tools select,
html body .cv .cv-tools input[type="number"],
html body .cv .cv-rar-summary{
  height:38px !important; min-height:0 !important; margin:0 !important; box-sizing:border-box;
  border:1px solid var(--dj-line2) !important; border-radius:10px !important;
  background-color:rgba(255,255,255,.04) !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:13px !important; font-weight:600 !important;
  color:var(--dj-txt) !important;
  transition:border-color .14s ease, box-shadow .14s ease;
}
html body .cv .cv-tools select{
  padding:0 34px 0 12px !important; cursor:pointer; appearance:none !important; -webkit-appearance:none !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23959bab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:11px !important;
}
html body .cv .cv-tools select option{ background:#15171d; color:var(--dj-txt); }
html body .cv .cv-field--set select{ min-width:220px; max-width:340px; }
html body .cv .cv-field--sort select{ min-width:170px; }
html body .cv .cv-tools input[type="number"]{
  width:104px; padding:0 12px !important; background-image:none !important; -moz-appearance:textfield;
}
html body .cv .cv-tools input[type="number"]::-webkit-outer-spin-button,
html body .cv .cv-tools input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
html body .cv .cv-tools input[type="number"]::placeholder{ color:#6f7689 !important; opacity:1; }
html body .cv .cv-tools select:hover,
html body .cv .cv-tools input[type="number"]:hover,
html body .cv .cv-rar-summary:hover{ border-color:rgba(255,255,255,.26) !important; }
html body .cv .cv-tools select:focus,
html body .cv .cv-tools input[type="number"]:focus{
  outline:none !important; border-color:var(--dj-red) !important; box-shadow:0 0 0 3px rgba(224,48,58,.18) !important;
}
html body .cv .cv-dash{ color:var(--dj-mut); }
/* rarete : menu deroulant a cases */
html body .cv .cv-rar{ position:relative; margin:0; }
html body .cv .cv-rar-summary{
  display:inline-flex !important; align-items:center; gap:10px; padding:0 12px !important;
  list-style:none; cursor:pointer; white-space:nowrap; user-select:none;
}
html body .cv .cv-rar-summary::-webkit-details-marker{ display:none; }
html body .cv .cv-caret{ width:11px; height:8px; color:var(--dj-mut); transition:transform .15s ease; }
html body .cv .cv-rar[open] .cv-caret{ transform:rotate(180deg); }
html body .cv .cv-rar[open] .cv-rar-summary{ border-color:rgba(255,255,255,.3) !important; }
html body .cv .cv-rar-menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:50; min-width:250px; max-height:340px; overflow-y:auto;
  padding:6px; border:1px solid var(--dj-line2); border-radius:12px; background:#15171d;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
html body .cv .cv-rar-opt{
  display:flex !important; align-items:center; gap:10px; margin:0 !important; padding:8px 10px; border-radius:8px; cursor:pointer;
  font-size:13px !important; font-weight:500 !important; color:var(--dj-mut2) !important;
}
html body .cv .cv-rar-opt:hover{ background:rgba(255,255,255,.06); color:#fff !important; }
html body .cv .cv-rar-opt input{ width:15px; height:15px; margin:0; accent-color:var(--dj-red); flex:0 0 auto; }
html body .cv .cv-rar-name{ flex:1 1 auto; }
html body .cv .cv-rar-n{ font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--dj-mut); }
html body .cv .cv-rar-none{ margin:0; padding:8px 10px; font-size:13px; color:var(--dj-mut); }
html body .cv .cv-apply{
  height:38px !important; min-height:0 !important; padding:0 16px !important; border-radius:10px !important;
  border:1px solid var(--dj-line2) !important; background:rgba(255,255,255,.05) !important; background-image:none !important;
  color:var(--dj-txt) !important; font-weight:700 !important; box-shadow:none !important;
}
html body .cv .cv-apply[hidden]{ display:none !important; }
html body .cv .cv-reset{
  margin-left:auto; font-size:12.5px; font-weight:600; text-decoration:none !important;
  color:var(--dj-mut) !important;
}
html body .cv .cv-reset:hover{ color:#fff !important; text-decoration:underline !important; }

/* totaux du filtre en cours : une ligne, pas un bloc */
html body .cv .cv-sub{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 26px;
  margin:0 0 22px; padding:14px 0; border-top:1px solid var(--dj-line); border-bottom:1px solid var(--dj-line);
}
html body .cv .cv-sub-label{
  margin-right:auto; font-family:var(--impact); font-size:13px; letter-spacing:1px; text-transform:uppercase;
  color:#fff;
}
html body .cv .cv-sub-item{ display:inline-flex; align-items:baseline; gap:8px; }
html body .cv .cv-sub-item em{
  font-style:normal; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dj-mut);
}
html body .cv .cv-sub-item b{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:#fff; }
html body .cv .cv-sub-item small{ font-weight:600; color:var(--dj-mut); }

/* onglets possedees / manquantes */
html body .cv .cv-tabs{
  display:inline-flex; gap:4px; padding:4px; margin:0 0 24px;
  border:1px solid var(--dj-line2); border-radius:12px; background:rgba(255,255,255,.03);
}
html body .cv .cv-tab{
  display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:9px;
  font-size:13px; font-weight:600; text-decoration:none !important; white-space:nowrap;
  color:var(--dj-mut) !important;
  transition:background-color .14s ease, color .14s ease;
}
html body .cv .cv-tab b{ font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--dj-mut); }
html body .cv .cv-tab:hover{ background:rgba(255,255,255,.05); color:#fff !important; }
html body .cv .cv-tab.is-on{ background:rgba(255,255,255,.1); color:#fff !important; }
html body .cv .cv-tab.is-on b{ color:var(--dj-mut2); }
html body .cv .cv-warn{ margin:-10px 0 22px !important; font-size:13px; color:var(--dj-amber) !important; }
html body #col-live.col-loading{ opacity:.55; pointer-events:none; transition:opacity .15s ease; }

/* ---------- mes cartes : la grille (meme dessin que les pages de jeu) ---------- */
html body .cv .cv-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px 12px; align-items:start;
}
@media (min-width:640px){ html body .cv .cv-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px 16px; } }
@media (min-width:900px){ html body .cv .cv-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
@media (min-width:1200px){ html body .cv .cv-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
html body .cv .cv-card{
  --cv-tier:var(--dj-t-common);
  display:flex; flex-direction:column; min-width:0; margin:0; padding:0;
  background:none; border:0; box-shadow:none;
}
html body .cv .cv-card[data-tier="chase"]{ --cv-tier:var(--dj-t-chase); }
html body .cv .cv-card[data-tier="secret"]{ --cv-tier:var(--dj-t-secret); }
html body .cv .cv-card[data-tier="super"]{ --cv-tier:var(--dj-t-super); }
html body .cv .cv-card[data-tier="rare"],
html body .cv .cv-card[data-tier="leader"]{ --cv-tier:var(--dj-t-rare); }
html body .cv .cv-card[data-tier="uncommon"]{ --cv-tier:var(--dj-t-uncommon); }
/* six rangees partagees par toute la ligne de cartes : image, nom, set, tags, prix, compteur */
@supports (grid-template-rows: subgrid){
  html body .cv .cv-card{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:span 6; row-gap:0; }
  html body .cv .cv-media{ grid-row:1; }
  html body .cv .cv-name{ grid-row:2; }
  html body .cv .cv-set{ grid-row:3; }
  html body .cv .cv-tags{ grid-row:4; }
  html body .cv .cv-price{ grid-row:5; }
  html body .cv .cv-collect{ grid-row:6; }
}
html body .cv .cv-media{ position:relative; }
html body .cv .cv-media-link{ display:block; line-height:0; }
html body .cv .cv-media img{
  display:block; width:100%; height:auto; aspect-ratio:63 / 88; object-fit:cover;
  border-radius:9px; background:rgba(255,255,255,.03);
  box-shadow:0 0 0 1px rgba(255,255,255,.1); transition:box-shadow .16s ease, filter .16s ease;
}
html body .cv .cv-card.is-ygo .cv-media img{ aspect-ratio:59 / 86; }
html body .cv .cv-card:hover .cv-media img{ box-shadow:0 0 0 1px rgba(255,255,255,.28); }
html body .cv .cv-grid.is-missing .cv-media img{ filter:grayscale(.85) brightness(.62); }
html body .cv .cv-grid.is-missing .cv-card:hover .cv-media img{ filter:grayscale(.3) brightness(.9); }
html body .cv .cv-badge{
  position:absolute; left:6px; top:6px; display:inline-flex; align-items:center; height:22px; padding:0 8px;
  border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(9,10,14,.8);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1;
  color:#fff; pointer-events:none;
}
html body .cv .cv-badge.is-missing{ color:var(--dj-mut2); font-weight:700; }
html body .cv .cv-media .zoom-btn{
  position:absolute !important; top:6px !important; right:6px !important; left:auto !important; bottom:auto !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:27px !important; height:27px !important; min-height:0 !important; padding:0 !important; margin:0 !important;
  border:1px solid rgba(255,255,255,.2) !important; border-radius:999px !important;
  background:rgba(9,10,14,.78) !important; background-image:none !important; box-shadow:none !important;
  color:#fff !important; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .14s ease !important; transform:none !important;
}
html body .cv .cv-card:hover .zoom-btn, html body .cv .zoom-btn:focus-visible{ opacity:1; }
@media (hover:none){ html body .cv .cv-media .zoom-btn{ opacity:.9; } }
html body .cv .cv-name{
  margin:9px 0 0; min-height:2.56em; overflow:hidden; text-decoration:none !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  font-size:12.5px; font-weight:600; line-height:1.28;
  color:var(--dj-txt) !important;
}
html body .cv .cv-name:hover{ color:#fff !important; }
html body .cv .cv-set,
html body .cv .cv-tags{
  font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; line-height:1.4;
}
html body .cv .cv-set{
  margin:3px 0 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--dj-mut) !important;
}
html body .cv .cv-tags{ display:flex; flex-wrap:wrap; gap:0 6px; margin:1px 0 0; min-width:0; }
html body .cv .cv-variant{ color:var(--dj-mut) !important; }
html body .cv .cv-variant + .cv-rarity::before{ content:"·"; margin-right:6px; color:#4d5468; }
html body .cv .cv-rarity{ min-width:0; overflow-wrap:anywhere; color:var(--cv-tier) !important; }
html body .cv .cv-price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 7px; margin:4px 0 0;
  font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums;
  color:#fff !important;
}
html body .cv .cv-price small{ font-size:11px; font-weight:600; color:var(--dj-mut) !important; }
html body .cv .cv-price .na{ font-weight:600; color:var(--dj-mut) !important; }
/* compteur : une pastille, neutre (dans sa collection, toute carte est possedee) */
html body .cv .cv-collect{ margin:8px 0 0; }
html body .cv .cv-collect .cstep{
  display:flex !important; flex-direction:column !important; gap:0 !important; width:100% !important;
  margin:0 !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important;
}
html body .cv .cv-collect .cstep-row{
  display:flex !important; align-items:stretch !important; gap:0 !important; height:30px !important;
  margin:0 !important; padding:0 !important; overflow:hidden !important;
  border:1px solid var(--dj-line2) !important; border-radius:9px !important;
  background:rgba(255,255,255,.035) !important; background-image:none !important; box-shadow:none !important;
}
html body .cv .cv-collect .cstep-tag{ display:none !important; }
html body .cv .cv-collect .cstep-btn{
  flex:0 0 32px !important; width:32px !important; height:auto !important; min-height:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  background:none !important; background-image:none !important; box-shadow:none !important; transform:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:15px !important; font-weight:700 !important; line-height:1 !important;
  color:var(--dj-mut2) !important; cursor:pointer;
}
html body .cv .cv-collect .cstep-btn:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
html body .cv .cv-collect .cstep-qty{
  flex:1 1 auto !important; min-width:0 !important; display:flex !important; align-items:center !important; justify-content:center !important;
  margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:13px !important; font-weight:800 !important; font-variant-numeric:tabular-nums;
  color:#fff !important;
}
html body .cv .cv-collect .cstep-row:not(.has) .cstep-btn.minus,
html body .cv .cv-collect .cstep-row:not(.has) .cstep-qty{ display:none !important; }
html body .cv .cv-collect .cstep-row:not(.has) .cstep-btn.plus{
  flex:1 1 auto !important; width:100% !important; gap:6px;
  color:var(--dj-txt) !important;
}
html body .cv .cv-collect .cstep-row:not(.has) .cstep-btn.plus::after{ content:attr(data-add); font-size:12px; font-weight:700; }
html body .cv .cv-collect .cstep-row:not(.has):hover{ border-color:rgba(255,255,255,.26) !important; background:rgba(255,255,255,.07) !important; }
html body .cv .cv-collect .cstep-row.ok{ box-shadow:0 0 0 2px rgba(224,48,58,.35) !important; }

/* pagination */
html body .cv .cv-pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin:34px 0 0; }
html body .cv .cv-page{
  display:inline-flex; align-items:center; height:36px; padding:0 15px; text-decoration:none !important;
  border:1px solid var(--dj-line2); border-radius:10px; background:rgba(255,255,255,.04);
  font-size:13px; font-weight:600; color:var(--dj-mut2) !important;
  transition:background-color .14s ease, border-color .14s ease;
}
html body .cv .cv-page:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.26); color:#fff !important; }
html body .cv .cv-page-status{ font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--dj-mut); }

/* etats vides */
html body .cv .cv-empty{ padding:48px 0 20px; text-align:center; }
html body .cv .cv-empty--start{ padding:56px 0 30px; border-top:1px solid var(--dj-line); }
html body .cv .cv-empty-title{
  margin:0 0 8px !important; font-family:var(--impact); font-size:18px; letter-spacing:1px; text-transform:uppercase;
  color:#fff !important;
}
html body .cv .cv-empty-sub{
  max-width:52ch; margin:0 auto 22px !important; font-size:14px; line-height:1.6;
  color:var(--dj-mut) !important;
}
html body .cv .cv-empty-btn{
  display:inline-flex; align-items:center; height:42px; padding:0 20px; border-radius:10px; text-decoration:none !important;
  background:var(--dj-red); font-size:14px; font-weight:700; color:#fff !important;
}
html body .cv .cv-empty-btn:hover{ background:#f0434d; }
html body .cv .cv-empty-btn.is-secondary{
  background:rgba(255,255,255,.05); border:1px solid var(--dj-line2); color:var(--dj-txt) !important;
}
html body .cv .cv-empty-btn.is-secondary:hover{ background:rgba(255,255,255,.1); }

/* ---------- tablette / mobile ---------- */
@media (max-width:900px){
  html body .cv .cv-hero{ grid-template-columns:minmax(0,1fr); align-items:start; gap:24px; }
  html body .cv .cv-stats{ padding:18px 0 0; border-top:1px solid var(--dj-line); }
  html body .cv .col-movers.cv-movers{ grid-template-columns:minmax(0,1fr); gap:34px; }
}
@media (max-width:640px){
  html body .cv{ padding-top:4px; }
  html body .cv .cv-title{ margin-bottom:16px !important; }
  html body .cv .cv-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
  html body .cv .cv-stat{ padding-left:12px; margin-left:12px; min-width:0; }
  html body .cv .cv-stat dd b{ font-size:15.5px; }
  html body .cv .cv-stat dd small{ white-space:normal; font-size:11px; }
  html body .cv .cv-stat dt{ font-size:9.5px !important; letter-spacing:.05em !important; }
  
  
  html body .cv .cv-chart-bar{ flex-direction:column-reverse; align-items:stretch; }
  html body .cv .cv-range{ display:flex; }
  html body .cv .cv-range-opt{ flex:1 0 auto; justify-content:center; padding:0 8px; }
  /* les jeux defilent sur une ligne plutot que d'empiler trois rangees de pastilles */
  html body .cv .cv-games{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--dj-gut, 16px)); padding:0 var(--dj-gut, 16px); }
  html body .cv .cv-games::-webkit-scrollbar{ display:none; }
  html body .cv .cv-field--set{ flex:1 1 100%; }
  html body .cv .cv-field--set select{ width:100%; min-width:0; max-width:none; }
  html body .cv .cv-field--price{ flex:1 1 auto; }
  html body .cv .cv-tools input[type="number"]{ width:100%; min-width:0; }
  html body .cv .cv-field--sort{ flex:1 1 auto; }
  html body .cv .cv-field--sort select{ width:100%; min-width:0; }
  html body .cv .cv-rar{ flex:1 1 auto; }
  html body .cv .cv-rar-summary{ width:100%; justify-content:space-between; }
  html body .cv .cv-reset{ margin-left:0; }
  html body .cv .cv-sub-label{ flex:1 1 100%; }
  html body .cv .cv-tabs{ display:flex; }
  html body .cv .cv-tab{ flex:1 1 0; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  html body .cv .cv-media img{ transition:none; }
}


/* image de carte introuvable : cadre au format carte (classe posee par le script) */
html body .cv .cv-media.is-broken .cv-media-link{
  display:flex; align-items:center; justify-content:center; aspect-ratio:63 / 88;
  border:1px dashed var(--dj-line2); border-radius:9px; background:rgba(255,255,255,.02); line-height:1.4;
}
html body .cv .cv-card.is-ygo .cv-media.is-broken .cv-media-link{ aspect-ratio:59 / 86; }
html body .cv .cv-media.is-broken img{ display:none !important; }
html body .cv .cv-media.is-broken .cv-media-link::after{
  content:attr(data-noimg); padding:0 10px; text-align:center;
  font-size:11px; font-weight:600; color:var(--dj-mut);
}
html body .cv .cv-media.is-broken .zoom-btn{ display:none !important; }

/* periode en cours de chargement : le graphique se grise, rien ne bouge */
html body .cv #col-chart.col-loading{ opacity:.55; pointer-events:none; transition:opacity .15s ease; }

/* Ma collection : deux chiffres a cote de la valeur totale (plus de Cardmarket) */
@media (max-width:640px){ html body .cv .cv-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* legende du graphique : un ancien style global forcait ces libelles en bleu nuit
   (#11132a, !important) — invisibles sur le fond sombre */
html body .cv .cv-legend .cv-lg{
  color:var(--dj-mut2) !important;
  font-size:12px !important; font-weight:600 !important;
}



/* ============================ MES DOUBLES ============================
   dupes.html + _dupes_live.html. La page reutilise le systeme .cv de « Ma
   collection » (en-tete, pastilles de jeux, barre d'outils, grille alignee) ;
   ce bloc n'ajoute que ce qui lui est propre : l'accroche, le bandeau d'echange
   (visibilite des doubles + trouveur), l'explication repliee, le badge ×N rouge
   et la valeur des exemplaires en trop.
   ==================================================================== */
html body .cv .cv-lead{
  max-width:56ch; margin:16px 0 0 !important; font-size:14px; line-height:1.6;
  color:var(--dj-mut) !important;
}
html body .cv .cv-lead b{ font-weight:700; color:var(--dj-txt); }

/* bandeau d'echange : une ligne filetee, pas une carte */
html body .cv .cv-trade{
  display:flex; align-items:center; justify-content:space-between; gap:14px 24px; flex-wrap:wrap;
  padding:16px 0; border-top:1px solid var(--dj-line); border-bottom:1px solid var(--dj-line);
}
html body .cv .cv-trade-status{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:0 !important; min-width:0;
  font-size:13.5px; color:var(--dj-mut2) !important;
}
html body .cv .cv-trade-dot{ width:8px; height:8px; border-radius:999px; background:#6f7689; flex:0 0 auto; }
html body .cv .cv-trade-status.is-public .cv-trade-dot{ background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.16); }
html body .cv .cv-trade-status a{
  font-weight:600; text-decoration:underline !important; text-decoration-color:rgba(255,255,255,.3) !important;
  text-underline-offset:3px; color:#fff !important;
}
html body .cv .cv-trade-status a:hover{ text-decoration-color:var(--dj-red) !important; }
html body .cv .cv-trade-cta{
  display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 18px; flex:0 0 auto;
  border-radius:10px; background:var(--dj-red); text-decoration:none !important;
  font-size:14px; font-weight:700; color:#fff !important;
  transition:background-color .14s ease;
}
html body .cv .cv-trade-cta:hover{ background:#f0434d; }
html body .cv .cv-trade-cta svg{ width:16px; height:16px; flex:0 0 auto; }

/* « Comment ca marche ? » : l'explication, repliee */
html body .cv .cv-how{ margin:0; border-bottom:1px solid var(--dj-line); }
html body .cv .cv-how summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:14px 0;
  font-size:13px; font-weight:600; color:var(--dj-mut2) !important;
}
html body .cv .cv-how summary::-webkit-details-marker{ display:none; }
html body .cv .cv-how summary::after{
  content:""; width:7px; height:7px; margin-left:auto; margin-right:3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .15s ease;
}
html body .cv .cv-how[open] summary::after{ transform:translateY(1px) rotate(-135deg); }
html body .cv .cv-how summary:hover{ color:#fff !important; }
html body .cv .cv-how-body{ max-width:72ch; padding:0 0 18px; }
html body .cv .cv-how-body p{
  margin:0 0 10px !important; font-size:13.5px; line-height:1.65;
  color:var(--dj-mut) !important;
}
html body .cv .cv-how-body b{ font-weight:700; color:var(--dj-txt); }
html body .cv .cv-how-body a{ color:#fff !important; text-underline-offset:3px; }

/* grille : le nombre d'exemplaires est l'information de la page -> badge rouge */
html body .cv .cv-badge.is-dupe{ background:var(--dj-red); border-color:transparent; }
html body .cv .cv-extra{ flex:0 0 100%; }
html body .cv .cv-extra b{ font-weight:700; color:var(--dj-mut2); }
html body .cv--dupes .cv-browse{ margin-top:32px; }

@media (max-width:640px){
  html body .cv .cv-trade{ flex-direction:column; align-items:stretch; }
  html body .cv .cv-trade-cta{ justify-content:center; }
}



/* ======================= TROUVER DES ECHANGES =======================
   dupes_finder.html. Reutilise le systeme .cv (Ma collection / Mes doubles) ;
   ce bloc n'ajoute que le lien de retour et, sous chaque carte, le membre qui
   la propose (avatar, pseudo, region) — une pastille qui mene a son profil,
   posee dans la 6e rangee de la sous-grille (celle du compteur ailleurs).
   ==================================================================== */
html body .cv .cv-backlink{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 18px; text-decoration:none !important;
  font-size:12.5px; font-weight:600; color:var(--dj-mut2) !important;
}
html body .cv .cv-backlink svg{ width:14px; height:14px; }
html body .cv .cv-backlink:hover{ color:#fff !important; }
html body .cv--finder .cv-trade{ border-bottom:0; }
html body .cv--finder .cv-browse{ margin-top:26px; }

/* Mention TEMPORAIRE « en cours de developpement » (pas encore de mise en relation entre
   membres) : pastille « Beta » dans le titre + une ligne filetee sous l'en-tete, pas une
   carte. A retirer avec le bloc « cv-wip » de dupes_finder.html. */
html body .cv .cv-beta{
  display:inline-block; vertical-align:middle; position:relative; top:-.12em; margin-left:.3em; padding:5px 10px 4px;
  border:1px solid rgba(255,207,92,.45); border-radius:999px; background:rgba(255,207,92,.1);
  font-family:'Inter',system-ui,sans-serif !important; font-size:11px !important; font-weight:800 !important;
  line-height:1 !important; letter-spacing:.1em !important; text-transform:uppercase;
  color:var(--dj-gold) !important;
}
html body .cv .cv-wip{
  display:flex; align-items:flex-start; gap:12px; padding:16px 0; border-top:1px solid var(--dj-line);
}
html body .cv .cv-wip-ic{
  display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:9px;
  background:rgba(255,207,92,.1); border:1px solid rgba(255,207,92,.3); color:var(--dj-gold);
}
html body .cv .cv-wip-ic svg{ width:16px; height:16px; }
html body .cv .cv-wip-tx{
  margin:0 !important; max-width:78ch; padding-top:5px; font-size:13.5px; line-height:1.6;
  color:var(--dj-mut2) !important;
}
html body .cv .cv-wip-tx b{ font-weight:700; color:var(--dj-gold); }

html body .cv .cv-owner{
  display:flex; align-items:center; gap:8px; min-width:0; margin:8px 0 0; padding:4px 8px 4px 4px;
  border:1px solid var(--dj-line2); border-radius:999px; background:rgba(255,255,255,.035);
  text-decoration:none !important; transition:background-color .14s ease, border-color .14s ease;
}
@supports (grid-template-rows: subgrid){ html body .cv .cv-owner{ grid-row:6; align-self:start; } }
html body .cv .cv-owner:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.26); }
html body .cv .cv-owner-av{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:24px; height:24px; border-radius:999px; overflow:hidden; background:rgba(224,48,58,.2);
  font-size:11px; font-weight:800; color:#fff;
}
html body .cv .cv-owner-av img{ display:block; width:100%; height:100%; object-fit:cover; }
html body .cv .cv-owner-id{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
html body .cv .cv-owner-id b{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700;
  color:var(--dj-txt) !important;
}
html body .cv .cv-owner-id small{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px;
  color:var(--dj-mut) !important;
}
html body .cv .cv-owner-go{ width:13px; height:13px; margin-left:auto; flex:0 0 auto; color:var(--dj-mut); }
html body .cv .cv-owner:hover .cv-owner-id b{ color:#fff !important; }
html body .cv .cv-owner:hover .cv-owner-go{ color:#fff; }
@media (max-width:640px){
  html body .cv .cv-owner{ padding:3px 6px 3px 3px; gap:6px; }
  html body .cv .cv-owner-av{ width:20px; height:20px; font-size:10px; }
  html body .cv .cv-owner-go{ display:none; }
}

/* Trouver des echanges, mobile : trois chiffres dans l'en-tete -> trois colonnes sur une
   ligne (la regle generale a deux colonnes renvoyait « Valeur » seul, decale, dessous) */
@media (max-width:640px){
  html body .cv--finder .cv-stats{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  html body .cv--finder .cv-stat dd b{ font-size:14px; white-space:normal; }
}


/* ========== MENU « MA COLLECTION » (bandeau + panneau mobile) ==========
   Pictos au format des fonctionnalites de l'accueil : carre arrondi teinte de
   rouge, picto rouge de 20 px (« Ma collection » reprend les trois cartes
   empilees de l'accueil). Textes alignes sur le reste de l'interface : Inter,
   titre 14 px / 700, sous-titre gris 12,5 px. */
html body .colmenu-link{ gap:12px !important; }
html body .colmenu-link .cml-ic-box{
  display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  background:rgba(224,48,58,.13); border:1px solid rgba(224,48,58,.28);
  transition:background-color .14s ease, border-color .14s ease;
}
/* « > svg » en plus de .cml-ic : les pictos du menu « Le Dojo » viennent des macros
   _dojo_macros.html, qui ne posent pas cette classe. Sans cela ils gardaient leur taille
   d'origine et la couleur du texte au lieu du rouge. */
html body .colmenu-link .cml-ic,
html body .colmenu-link .cml-ic-box > svg{
  display:block; width:20px !important; height:20px !important; flex:0 0 auto;
  color:var(--dj-red) !important;
}
html body .colmenu-link:hover .cml-ic-box{ background:rgba(224,48,58,.2); border-color:rgba(224,48,58,.45); }
html body .colmenu-link .cml-tx strong{
  font-family:'Inter',system-ui,sans-serif !important; font-size:14px !important; font-weight:700 !important;
  letter-spacing:0 !important; text-transform:none !important; line-height:1.3 !important;
  color:#fff !important;
}
html body .colmenu-link .cml-tx small{
  font-family:'Inter',system-ui,sans-serif !important; font-size:12.5px !important; font-weight:500 !important;
  letter-spacing:0 !important; text-transform:none !important; line-height:1.4 !important;
  color:var(--dj-mut) !important;
}



/* ============================ MON COMPTE ============================
   auth_account.html. Reutilise le socle .cv (Ma collection) : titres Anton,
   micro-libelles, filets. En-tete (avatar, pseudo, etat du profil, actions),
   apercu de l'espace en trois colonnes filetees, sections separees par des
   filets (confidentialite en interrupteurs, session, suppression repliee).
   Fenetres (.acca-*) : meme habillage que « Comparer » et « Je l'ai pull ».
   ==================================================================== */
html body .ax .ax-hero{ display:flex; align-items:center; flex-wrap:wrap; gap:22px 28px; padding:12px 0 32px; }
html body .ax .ax-avatar{ flex:0 0 auto; }
html body .ax .ax-avatar-btn,
html body .ax .ax-avatar-initial{
  display:grid !important; place-items:center; width:96px !important; height:96px !important;
  min-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden;
  border:0 !important; border-radius:999px !important; background:rgba(255,255,255,.04) !important;
  box-shadow:0 0 0 2px rgba(224,48,58,.6), 0 0 0 7px rgba(224,48,58,.12) !important;
}
html body .ax .ax-avatar-btn{ cursor:zoom-in; transition:box-shadow .16s ease; }
html body .ax .ax-avatar-btn:hover{ box-shadow:0 0 0 2px var(--dj-red), 0 0 0 8px rgba(224,48,58,.18) !important; }
html body .ax .ax-avatar-btn img{ display:block; width:100%; height:100%; object-fit:cover; }
html body .ax .ax-avatar-initial{ font-family:var(--impact); font-size:40px; color:#fff; }
html body .ax .ax-id{ flex:1 1 320px; min-width:0; }
html body .ax .ax-id .cv-kicker{ margin-bottom:6px !important; }
html body .ax .ax-name{ margin:0 0 12px !important; font-size:clamp(30px,4.4vw,48px) !important; overflow-wrap:anywhere; }
html body .ax .ax-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:0 0 18px !important;
  font-size:13px; color:var(--dj-mut) !important;
}
html body .ax .ax-dot{ color:#4d5468; }
html body .ax .ax-status{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--dj-mut2); }
html body .ax .ax-status i{ width:8px; height:8px; border-radius:999px; background:#6f7689; }
html body .ax .ax-status.is-public i{ background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.16); }
html body .ax .ax-belt{ font-weight:600; color:var(--dj-txt); }
html body .ax .ax-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* boutons de la page */
html body .ax .ax-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center; gap:8px;
  height:40px !important; min-height:0 !important; width:auto !important; margin:0 !important; padding:0 16px !important;
  border:1px solid var(--dj-line2) !important; border-radius:10px !important;
  background:rgba(255,255,255,.05) !important; background-image:none !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:13.5px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important; text-decoration:none !important;
  color:var(--dj-txt) !important;
  cursor:pointer; transform:none !important; transition:background-color .14s ease, border-color .14s ease !important;
}
html body .ax .ax-btn svg{ width:16px; height:16px; flex:0 0 auto; color:var(--dj-mut2); }
html body .ax .ax-btn:hover{ background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.26) !important; }
html body .ax .ax-btn.is-small{ height:32px !important; padding:0 12px !important; font-size:12.5px !important; }
html body .ax .ax-btn.is-primary{ background:var(--dj-red) !important; border-color:transparent !important; color:#fff !important; }
html body .ax .ax-btn.is-primary:hover{ background:#f0434d !important; }
html body .ax .ax-btn.is-primary:disabled{ opacity:.45; cursor:not-allowed; }
html body .ax .ax-btn.is-danger{
  background:rgba(224,48,58,.12) !important; border-color:rgba(224,48,58,.45) !important;
  color:#fca5a5 !important;
}
html body .ax .ax-btn.is-danger:hover{ background:var(--dj-red) !important; color:#fff !important; }

/* apercu de l'espace : trois colonnes filetees, chacune un lien */
html body .ax .ax-overview{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  border-top:1px solid var(--dj-line); border-bottom:1px solid var(--dj-line);
}
html body .ax .ax-ov{
  position:relative; display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:20px 44px 20px 0; text-decoration:none !important;
}
html body .ax .ax-ov + .ax-ov{ padding-left:24px; border-left:1px solid var(--dj-line); }
html body .ax .ax-ov-k{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dj-mut) !important;
}
html body .ax .ax-ov b{
  font-size:22px; font-weight:800; line-height:1.15; white-space:nowrap; font-variant-numeric:tabular-nums;
  color:#fff !important;
}
html body .ax .ax-ov b .ax-unit{ font-size:13px; font-weight:700; color:var(--dj-mut2) !important; }
html body .ax .ax-ov small{ font-size:12.5px; color:var(--dj-mut) !important; }
html body .ax .ax-ov-go{
  position:absolute; right:16px; top:50%; width:16px; height:16px; margin-top:-8px;
  color:var(--dj-mut); transition:transform .16s ease, color .16s ease;
}
html body .ax .ax-ov:hover .ax-ov-go{ color:#fff; transform:translateX(3px); }
html body .ax .ax-ov:hover .ax-ov-k{ color:var(--dj-mut2) !important; }

/* sections */
html body .ax .ax-section{ padding:34px 0; border-bottom:1px solid var(--dj-line); }
html body .ax .ax-section-head{ display:flex; flex-direction:column; gap:8px; margin:0 0 14px; }
html body .ax .ax-section-head p{
  max-width:70ch; margin:0 !important; font-size:13.5px; line-height:1.6;
  color:var(--dj-mut) !important;
}
html body .ax .ax-section-head p strong{ color:#fff; }
html body .ax .ax-warn{ margin:0 0 12px !important; font-size:13px; color:var(--dj-amber) !important; }

/* confidentialite : lignes filetees, interrupteur a droite */
html body .ax .ax-form{ display:flex; flex-direction:column; max-width:780px; margin:0; padding:0; background:none; border:0; }
html body .ax .ax-switch-row,
html body .ax .ax-field,
html body .ax .ax-link-row{ border-top:1px solid var(--dj-line); }
html body .ax .ax-switch-row{
  display:flex !important; align-items:center; justify-content:space-between; gap:24px;
  margin:0 !important; padding:16px 0; cursor:pointer; font-weight:400 !important;
}
html body .ax .ax-switch-row.is-off{ cursor:default; }
html body .ax .ax-switch-row.is-off .ax-switch-tx strong{ color:var(--dj-mut2) !important; }
html body .ax .ax-switch-tx{ display:flex; flex-direction:column; gap:4px; min-width:0; }
html body .ax .ax-switch-tx strong{ font-size:14px; font-weight:600; color:#fff !important; }
html body .ax .ax-switch-tx small{ font-size:12.5px; line-height:1.55; color:var(--dj-mut) !important; }
html body .ax .ax-switch-tx small.ax-caution{ color:var(--dj-amber) !important; }
html body .ax .ax-switch-tx small.ax-req{ display:none; color:#6f7689 !important; }
html body .ax .ax-switch-row.is-off small.ax-req{ display:block; }
html body .ax .ax-switch{ position:relative; flex:0 0 auto; width:44px; height:26px; }
html body .ax .ax-switch input{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;
}
html body .ax .ax-switch input:disabled{ cursor:not-allowed; }
html body .ax .ax-switch i{
  position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.1);
  border:1px solid var(--dj-line2); transition:background-color .16s ease, border-color .16s ease;
}
html body .ax .ax-switch i::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:999px;
  background:#c4c9d6; transition:transform .16s ease, background-color .16s ease;
}
html body .ax .ax-switch input:checked + i{ background:var(--dj-red); border-color:transparent; }
html body .ax .ax-switch input:checked + i::after{ transform:translateX(18px); background:#fff; }
html body .ax .ax-switch input:disabled + i{ opacity:.35; }
html body .ax .ax-switch input:focus-visible + i{ outline:2px solid rgba(224,48,58,.7); outline-offset:2px; }
html body .ax .ax-field{
  display:flex !important; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px;
  margin:0 !important; padding:16px 0; font-weight:400 !important;
}
html body .ax .ax-field .ax-switch-tx{ flex:1 1 320px; }
html body .ax .ax-field input[type="text"],
html body .ax .ax-input{
  height:40px !important; min-height:0 !important; margin:0 !important; padding:0 12px !important; box-sizing:border-box;
  border:1px solid var(--dj-line2) !important; border-radius:10px !important;
  background:rgba(255,255,255,.04) !important; background-image:none !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:14px !important; font-weight:500 !important;
  color:var(--dj-txt) !important; outline:none !important;
  transition:border-color .14s ease, box-shadow .14s ease;
}
html body .ax .ax-field input[type="text"]{ width:260px; max-width:100%; }
html body .ax .ax-field input[type="text"]::placeholder,
html body .ax .ax-input::placeholder{ color:#6f7689 !important; opacity:1; }
html body .ax .ax-field input[type="text"]:focus,
html body .ax .ax-input:focus{ border-color:var(--dj-red) !important; box-shadow:0 0 0 3px rgba(224,48,58,.18) !important; }
html body .ax .ax-link-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:16px 0;
  font-size:13px; color:var(--dj-mut) !important;
}
html body .ax .ax-link-row a{ font-weight:600; overflow-wrap:anywhere; color:#fff !important; text-underline-offset:3px; }
html body .ax .ax-form-foot{ display:flex; justify-content:flex-end; padding:18px 0 0; border-top:1px solid var(--dj-line); }

/* session */
html body .ax .ax-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px;
  font-size:13.5px; color:var(--dj-mut2) !important;
}
html body .ax .ax-row b{ color:#fff; }
html body .ax .ax-inline-form{ margin:0; }

/* suppression du compte */
html body .ax .ax-danger{ border-bottom:0; }
html body .ax .ax-danger .cv-h2::before{ background:#f87171; }
html body .ax .ax-danger-list{
  max-width:72ch; margin:0 0 16px !important; font-size:13px; line-height:1.6;
  color:var(--dj-mut) !important;
}
html body .ax .ax-danger-details{ margin:0; }
html body .ax .ax-danger-details summary{
  display:inline-flex; align-items:center; gap:10px; list-style:none; cursor:pointer;
  font-size:13px; font-weight:600; color:#fca5a5 !important;
}
html body .ax .ax-danger-details summary::-webkit-details-marker{ display:none; }
html body .ax .ax-danger-details summary::after{
  content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .15s ease;
}
html body .ax .ax-danger-details[open] summary::after{ transform:translateY(1px) rotate(-135deg); }
html body .ax .ax-danger-form{ display:flex; flex-direction:column; gap:10px; max-width:420px; margin:16px 0 0; }
html body .ax .ax-danger-form label{ font-size:13px; color:var(--dj-mut2) !important; }
html body .ax .ax-danger-form label strong{ color:#fff; }
html body .ax .ax-danger-form .ax-btn{ margin-top:6px !important; }

/* ---------- fenetres : Parametres et pseudo ---------- */
body.pm-open{ overflow:hidden !important; }
html body .acca-modal{
  position:fixed !important; inset:0 !important; z-index:100040 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:24px !important; font-family:'Inter',system-ui,sans-serif;
}
html body .acca-modal[hidden]{ display:none !important; }
html body .acca-modal .acca-backdrop{
  position:absolute; inset:0; background:rgba(5,6,9,.74) !important;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
html body .acca-modal .acca-panel{
  position:relative; display:flex !important; flex-direction:column !important;
  width:min(520px, 100%) !important; max-width:none !important; max-height:calc(100dvh - 48px) !important;
  margin:0 !important; padding:0 !important; overflow:hidden !important;
  background:#13151b !important; background-image:none !important;
  border:1px solid rgba(255,255,255,.13) !important; border-radius:16px !important;
  box-shadow:0 30px 90px rgba(0,0,0,.6) !important; color:var(--dj-txt) !important;
}
html body .acca-modal .acca-panel-head{
  display:flex !important; align-items:center; justify-content:space-between; gap:12px; flex:0 0 auto;
  padding:15px 16px 15px 18px !important; background:none !important; border-bottom:1px solid rgba(255,255,255,.07) !important;
}
html body .acca-modal .acca-panel-head h2{
  display:flex; align-items:center; gap:11px; margin:0 !important;
  font-family:var(--impact) !important; font-weight:400 !important; font-size:15px !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important; line-height:1.2 !important;
  color:#fff !important;
}
html body .acca-modal .acca-panel-head h2::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--dj-red); flex:0 0 auto; }
html body .acca-modal .acca-close{
  position:static !important; display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 auto;
  width:34px !important; height:34px !important; min-height:0 !important; margin:0 !important; padding:0 !important;
  border:1px solid rgba(255,255,255,.13) !important; border-radius:10px !important;
  background:rgba(255,255,255,.05) !important; background-image:none !important; box-shadow:none !important;
  color:#c4c9d6 !important; cursor:pointer;
}
html body .acca-modal .acca-close svg{ width:16px; height:16px; }
html body .acca-modal .acca-close:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
/* hub « Parametres » */
html body .acca-modal .set-list{ overflow-y:auto; padding:2px 18px 8px; }
html body .acca-modal .set-row{
  display:grid !important; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:15px 0 !important; border-bottom:1px solid rgba(255,255,255,.07) !important;
}
html body .acca-modal .set-row:last-child{ border-bottom:0 !important; }
html body .acca-modal .set-ic{
  display:grid; place-items:center; width:38px; height:38px; overflow:hidden; border-radius:11px;
  background:rgba(224,48,58,.13); border:1px solid rgba(224,48,58,.28); color:var(--dj-red);
  font-family:var(--impact); font-size:17px;
}
html body .acca-modal .set-ic svg{ width:18px; height:18px; }
html body .acca-modal .set-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
html body .acca-modal .set-info strong{ font-size:14px !important; font-weight:600 !important; color:#fff !important; }
html body .acca-modal .set-val{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; overflow-wrap:anywhere;
  font-size:13px !important; color:var(--dj-mut2) !important;
}
html body .acca-modal .set-hint{ margin:0 !important; font-size:12px !important; color:var(--dj-mut) !important; }
html body .acca-modal .set-chip{
  display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
html body .acca-modal .set-chip.is-ok{ background:rgba(74,222,128,.12); color:#4ade80; }
html body .acca-modal .set-chip.is-warn{ background:rgba(232,162,74,.14); color:var(--dj-amber); }
html body .acca-modal .set-act{
  display:inline-flex !important; align-items:center; justify-content:center;
  height:34px !important; min-height:0 !important; min-width:0 !important; margin:0 !important; padding:0 14px !important;
  border:1px solid rgba(255,255,255,.13) !important; border-radius:10px !important;
  background:rgba(255,255,255,.05) !important; background-image:none !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-decoration:none !important;
  color:var(--dj-txt) !important; cursor:pointer;
}
html body .acca-modal .set-act:hover{ background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.26) !important; }
/* formulaires des sous-fenetres */
html body .acca-modal .acca-form{ display:flex !important; flex-direction:column !important; gap:10px !important; overflow-y:auto; padding:18px 18px 0 !important; }
html body .acca-modal .acca-label{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dj-mut) !important; }
html body .acca-modal .ax-input{
  height:42px !important; min-height:0 !important; margin:0 !important; padding:0 12px !important; box-sizing:border-box; width:100% !important;
  border:1px solid rgba(255,255,255,.13) !important; border-radius:10px !important;
  background:rgba(255,255,255,.04) !important; background-image:none !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:14px !important; font-weight:500 !important;
  color:var(--dj-txt) !important; outline:none !important;
}
html body .acca-modal .ax-input:focus{ border-color:var(--dj-red) !important; box-shadow:0 0 0 3px rgba(224,48,58,.18) !important; }
html body .acca-modal .accu-note{
  margin:0 0 4px !important; padding:10px 12px !important; border-radius:10px !important;
  background:rgba(232,162,74,.1) !important; border:1px solid rgba(232,162,74,.3) !important;
  font-size:13px !important; line-height:1.5 !important; color:#f3c27e !important;
}
html body .acca-modal .auth-hint{ font-size:12px !important; color:var(--dj-mut) !important; }
html body .acca-modal .auth-hint.ok{ color:#4ade80 !important; }
html body .acca-modal .auth-hint.bad{ color:#f87171 !important; }
html body .acca-modal .user-suggest{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:var(--dj-mut); }
html body .acca-modal .user-suggest[hidden]{ display:none !important; }
html body .acca-modal .user-sug{
  height:28px !important; min-height:0 !important; padding:0 10px !important; margin:0 !important;
  border:1px solid rgba(255,255,255,.13) !important; border-radius:999px !important;
  background:rgba(255,255,255,.05) !important; background-image:none !important; box-shadow:none !important;
  font-size:12px !important; font-weight:600 !important; color:#fff !important; cursor:pointer;
}
html body .acca-modal .user-sug:hover{ border-color:rgba(224,48,58,.6) !important; }
html body .acca-modal .acca-panel-foot{
  position:sticky; bottom:0; z-index:1; display:flex !important; justify-content:flex-end; gap:10px;
  margin:6px -18px 0 !important; padding:14px 18px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  background:#13151b !important; border-top:1px solid rgba(255,255,255,.07) !important;
}
html body .acca-modal .acca-btn{
  display:inline-flex !important; align-items:center; justify-content:center;
  height:42px !important; min-height:0 !important; padding:0 18px !important; margin:0 !important;
  border-radius:10px !important; background-image:none !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:14px !important; font-weight:700 !important;
  letter-spacing:0 !important; text-transform:none !important; cursor:pointer;
}
html body .acca-modal .acca-btn.ghost{
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.13) !important;
  color:var(--dj-txt) !important;
}
html body .acca-modal .acca-btn.ghost:hover{ background:rgba(255,255,255,.1) !important; }
html body .acca-modal .acca-btn.primary{ background:var(--dj-red) !important; border:0 !important; color:#fff !important; }
html body .acca-modal .acca-btn.primary:hover{ background:#f0434d !important; }

/* ---------- mobile ---------- */
@media (max-width:760px){
  html body .ax .ax-overview{ grid-template-columns:minmax(0,1fr); }
  html body .ax .ax-ov{ padding:16px 40px 16px 0; }
  html body .ax .ax-ov + .ax-ov{ padding-left:0; border-left:0; border-top:1px solid var(--dj-line); }
}
@media (max-width:640px){
  html body .ax .ax-hero{ gap:18px; padding-top:4px; }
  html body .ax .ax-avatar-btn,
  html body .ax .ax-avatar-initial{ width:76px !important; height:76px !important; }
  html body .ax .ax-actions .ax-btn{ flex:1 1 auto; }
  html body .ax .ax-switch-row{ gap:16px; }
  html body .ax .ax-field input[type="text"]{ width:100%; }
  html body .ax .ax-form-foot .ax-btn{ width:100% !important; }
  /* fenetres : panneau qui monte du bas */
  html body .acca-modal{ padding:0 !important; align-items:flex-end !important; }
  html body .acca-modal .acca-panel{
    width:100% !important; max-height:calc(100dvh - 10px) !important;
    border-radius:18px 18px 0 0 !important; border-bottom:0 !important; animation:pmSheetUp .22s ease-out;
  }
  html body .acca-modal .acca-panel-foot .acca-btn{ flex:1 1 0; }
}


/* ======================= AVATAR = CEINTURE =======================
   L'avatar d'un membre est l'image de sa ceinture (static/brand/belts/),
   une illustration detouree : dans les cadres ronds (fil du Dojo, carte de
   guerrier, classement, trouveur d'echanges, Mon compte, zoom), on la montre
   ENTIERE et centree sur un fond sombre au lieu de la rogner.
   ================================================================= */
html body .cav img[src*="/brand/belts/"],
html body .cv-owner-av img[src*="/brand/belts/"],
html body .ax-avatar-btn img[src*="/brand/belts/"]{
  object-fit:contain !important; padding:13% !important; box-sizing:border-box !important;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.09), rgba(255,255,255,0) 68%), #16181f !important;
}
html body .avz-img[src*="/brand/belts/"]{
  object-fit:contain !important; padding:12% !important; box-sizing:border-box !important;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.09), rgba(255,255,255,0) 68%), #16181f !important;
}



/* ======================= CONNEXION / INSCRIPTION =======================
   auth_login, auth_register, auth_forgot, auth_reset, auth_password.
   Hero pleine largeur sur l'image du dojo (meme principe que l'accueil :
   aucune bordure, l'image se fond dans le fond de page). Un seul panneau
   pour le formulaire, rien d'imbrique dedans : filets, micro-libelles,
   champs sombres, bouton rouge. Sous le hero (connexion, inscription) :
   ce que le compte debloque, en colonnes separees par des filets.
   ====================================================================== */
html body .au-hero{
  position:relative; isolation:isolate; overflow:clip; /* clip : n'empeche pas l'accroche collante */
  background:url('/static/brand/dojo_bg.jpg') center 40% / cover no-repeat, var(--dj-bg);
}
/* voile : texte lisible a gauche, panneau bien detache a droite */
html body .au-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(8,9,13,.93) 0%, rgba(8,9,13,.80) 34%, rgba(8,9,13,.42) 64%, rgba(8,9,13,.72) 100%);
}
/* fondu haut et bas : raccord au bandeau et au fond de page */
html body .au-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,12,16,.7) 0%, transparent 16%),
    linear-gradient(180deg, transparent 60%, rgba(11,12,16,.82) 88%, var(--dj-bg) 100%);
}
html body .au-wrap{
  position:relative; z-index:1; box-sizing:border-box;
  width:100%; max-width:var(--dj-max); margin:0 auto;
  padding:clamp(34px, 6vh, 70px) var(--dj-gut) clamp(46px, 8vh, 92px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px);
  align-items:start; gap:clamp(28px, 6vw, 96px);
}
html body .au-hero--solo::before{ background:rgba(8,9,13,.74); }
html body .au-hero--solo .au-wrap{
  grid-template-columns:minmax(0,460px); justify-content:center; align-items:center;
  min-height:clamp(520px, 74vh, 760px);
}
/* pages sans contenu sous le hero : pas de bande vide avant le pied de page */
html body .au-hero--solo ~ main.page{ padding:0 !important; } /* ~ : le script de l'oeil se glisse entre les deux */

/* ---------- accroche (colonne gauche) ---------- */
/* calee en haut et collante : sur l'inscription (formulaire long) elle reste a l'ecran */
html body .au-pitch{ max-width:540px; position:sticky; top:calc(var(--dj-nav-h) + 40px); padding-top:clamp(12px, 4vh, 44px); }
html body .au-eyebrow{
  margin:0 0 14px !important; font-family:var(--impact); font-size:11.5px; letter-spacing:3.2px;
  text-transform:uppercase; color:var(--dj-red) !important;
}
html body .au-logo{
  display:block; height:clamp(52px, 5.6vw, 76px); width:auto; margin:0 0 24px;
  filter:drop-shadow(0 12px 34px rgba(0,0,0,.55));
}
html body .au-title{
  margin:0 !important; font-family:var(--impact) !important; font-weight:400 !important;
  font-size:clamp(34px, 4.3vw, 56px) !important; line-height:1.02 !important;
  letter-spacing:.4px !important; text-transform:uppercase !important;
  color:#fff !important; text-shadow:0 10px 40px rgba(0,0,0,.5);
}
html body .au-title em{ font-style:normal; color:var(--dj-red) !important; }
html body .au-lead{
  max-width:450px; margin:16px 0 0 !important; font-size:15px; line-height:1.62;
  color:var(--dj-mut2) !important;
}
html body .au-free{
  display:inline-flex; align-items:center; gap:8px; margin:22px 0 0 !important;
  font-size:13px; font-weight:700; color:#fff !important;
}
html body .au-free svg{ width:16px; height:16px; color:var(--dj-green); }

/* ---------- panneau du formulaire ---------- */
html body .au-panel{
  position:relative; box-sizing:border-box; width:100%;
  padding:24px 26px 22px; border:1px solid rgba(255,255,255,.12); border-radius:18px;
  background:rgba(12,13,18,.8); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 30px 80px rgba(0,0,0,.45); color:var(--dj-txt);
  font-family:'Inter',system-ui,sans-serif;
}
html body .au-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:3px; margin:0 0 22px; padding:3px;
  border:1px solid var(--dj-line2); border-radius:12px; background:rgba(255,255,255,.03);
}
html body .au-tabs a{
  display:flex; align-items:center; justify-content:center; height:38px; border-radius:9px;
  font-size:13.5px; font-weight:700; text-decoration:none !important;
  color:var(--dj-mut) !important;
  transition:background-color .14s ease, color .14s ease;
}
html body .au-tabs a:hover{ color:#fff !important; }
html body .au-tabs a.is-on{
  background:rgba(255,255,255,.09); box-shadow:inset 0 -2px 0 var(--dj-red);
  color:#fff !important;
}
html body .au-ic{
  display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  background:rgba(224,48,58,.13); border:1px solid rgba(224,48,58,.28); color:var(--dj-red);
}
html body .au-ic svg{ width:20px; height:20px; display:block; }
html body .au-ic--head{ margin:0 0 16px; width:44px; height:44px; border-radius:12px; }
html body .au-ic--head svg{ width:22px; height:22px; }
html body .au-h1{
  display:flex; align-items:center; gap:12px; margin:0 !important; padding:0 !important;
  font-family:var(--impact) !important; font-weight:400 !important; font-size:26px !important;
  line-height:1.12 !important; letter-spacing:.6px !important; text-transform:uppercase !important;
  color:#fff !important; background:none !important;
}
html body .au-h1::before{ content:""; width:20px; height:3px; border-radius:2px; background:var(--dj-red); flex:0 0 auto; }
html body .au-sub{
  margin:8px 0 18px !important; font-size:13.5px; line-height:1.55;
  color:var(--dj-mut) !important;
}
html body .au-back{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 18px; text-decoration:none !important;
  font-size:12.5px; font-weight:600; color:var(--dj-mut2) !important;
}
html body .au-back svg{ width:14px; height:14px; }
html body .au-back:hover{ color:#fff !important; }

/* messages (partages avec Mon compte) */
html body .auth-flash{ display:flex; flex-direction:column; gap:8px; margin:0 0 16px !important; }
html body .auth-msg{
  margin:0 !important; padding:10px 12px !important; border-radius:10px !important;
  font-size:13px !important; font-weight:600 !important; line-height:1.45 !important;
}
html body .auth-msg.ok{
  background:rgba(74,222,128,.1) !important; border:1px solid rgba(74,222,128,.3) !important;
  color:#86efac !important;
}
html body .auth-msg.err{
  background:rgba(224,48,58,.12) !important; border:1px solid rgba(224,48,58,.42) !important;
  color:#fca5a5 !important;
}

/* ---------- champs ---------- */
html body .au-form{ display:flex; flex-direction:column; margin:0; padding:0; background:none; border:0; }
html body .au-label{
  display:block; margin:14px 0 7px !important; padding:0 !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:10.5px !important; font-weight:800 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  color:var(--dj-mut) !important;
}
html body .au-form > .au-label:first-of-type{ margin-top:2px !important; }
html body .au-label-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:14px 0 7px; }
html body .au-label-row .au-label{ margin:0 !important; }
html body .au-label-row a{
  font-size:12px; font-weight:600; text-decoration:none !important;
  color:var(--dj-mut2) !important;
}
html body .au-label-row a:hover{ color:#fff !important; }
html body .au-input{
  display:block; box-sizing:border-box; width:100% !important; height:44px !important; min-height:0 !important;
  margin:0 !important; padding:0 13px !important;
  border:1px solid var(--dj-line2) !important; border-radius:10px !important;
  background:rgba(255,255,255,.045) !important; background-image:none !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:14.5px !important; font-weight:500 !important;
  color:var(--dj-txt) !important; outline:none !important;
  transition:border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
html body .au-input::placeholder{ color:#6f7689 !important; opacity:1; }
html body .au-input:focus{
  border-color:var(--dj-red) !important; background:rgba(255,255,255,.06) !important;
  box-shadow:0 0 0 3px rgba(224,48,58,.18) !important;
}
/* remplissage automatique du navigateur : pas de fond clair sur le theme sombre */
html body .au-input:-webkit-autofill,
html body .au-input:-webkit-autofill:hover,
html body .au-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #17191f inset !important; box-shadow:0 0 0 1000px #17191f inset !important;
  /* LES DEUX, et ce n'est pas une redondance. Sur un champ rempli automatiquement,
     Chrome peint le texte avec SA couleur et ignore « color » : seul
     -webkit-text-fill-color l'emporte. Le 2026-10-11 j'ai converti cette ligne en
     « color » en retirant le mecanisme ailleurs, et l'adresse et le mot de passe
     autoremplis sont sortis en noir sur le fond noir de la boite. C'est le seul
     endroit du site ou cette propriete est IRREMPLACABLE. */
  color:var(--dj-txt) !important; -webkit-text-fill-color:var(--dj-txt) !important;
  caret-color:#fff;
}
html body .au-pw{ position:relative; }
html body .au-pw .au-input{ padding-right:46px !important; }
html body .au-eye{
  position:absolute !important; top:5px; right:5px; display:grid !important; place-items:center;
  width:34px !important; height:34px !important; min-height:0 !important; margin:0 !important; padding:0 !important;
  border:0 !important; border-radius:8px !important; background:transparent !important; background-image:none !important;
  box-shadow:none !important; color:var(--dj-mut) !important; cursor:pointer;
}
html body .au-eye:hover{ background:rgba(255,255,255,.07) !important; color:#fff !important; }
html body .au-eye svg{ width:18px; height:18px; }
html body .au-eye .au-eye-hide,
html body .au-eye.is-on .au-eye-show{ display:none; }
html body .au-eye.is-on .au-eye-hide{ display:block; }

/* aides, pseudo disponible, criteres du mot de passe */
html body .au-panel .auth-hint{
  display:block; margin:7px 0 0 !important; font-size:12px !important; line-height:1.45; font-weight:500 !important;
  color:var(--dj-mut) !important;
}
html body .au-panel .auth-hint.ok{ color:#4ade80 !important; font-weight:600 !important; }
html body .au-panel .auth-hint.bad{ color:#f87171 !important; font-weight:600 !important; }
html body .au-panel .auth-mismatch{
  display:block; margin:7px 0 0 !important; font-size:12px !important; font-weight:600 !important;
  color:#f87171 !important;
}
html body .au-panel .auth-mismatch[hidden],
html body .au-panel .user-suggest[hidden]{ display:none !important; }
html body .au-panel .user-suggest{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:9px 0 0 !important;
  font-size:12px !important; color:var(--dj-mut) !important;
}
html body .au-panel .user-suggest > span:first-child{ font-weight:700; }
html body .au-panel .user-sug{
  height:28px !important; min-height:0 !important; margin:0 !important; padding:0 11px !important;
  border:1px solid var(--dj-line2) !important; border-radius:999px !important;
  background:rgba(255,255,255,.05) !important; background-image:none !important; box-shadow:none !important;
  font-size:12px !important; font-weight:600 !important; color:#fff !important; cursor:pointer;
}
html body .au-panel .user-sug:hover{ border-color:rgba(224,48,58,.6) !important; background:rgba(224,48,58,.12) !important; }
html body .au-panel .pw-req{
  display:grid !important; grid-template-columns:1fr 1fr; gap:6px 14px; margin:10px 0 2px !important; padding:0 !important; list-style:none;
}
html body .au-panel .pw-req li{
  position:relative; padding-left:18px !important; font-size:12px !important; line-height:1.45 !important;
  color:var(--dj-mut) !important; transition:color .14s ease;
}
html body .au-panel .pw-req li::before{
  content:"" !important; position:absolute; left:1px; top:4.5px; width:8px; height:8px; box-sizing:border-box;
  border-radius:999px; border:1.5px solid #5d6475; background:transparent;
  transition:background-color .14s ease, border-color .14s ease;
}
html body .au-panel .pw-req li.ok{ color:var(--dj-txt) !important; }
html body .au-panel .pw-req li.ok::before{ background:var(--dj-green); border-color:var(--dj-green); }

/* ceinture de depart (inscription) : une ligne filetee, pas un encadre */
html body .au-belt{
  display:flex; align-items:center; gap:12px; margin:20px 0 0 !important; padding:14px 0 0 !important;
  border-top:1px solid var(--dj-line); font-size:13px; line-height:1.45;
  color:var(--dj-mut2) !important;
}
html body .au-belt img{ width:40px; height:40px; object-fit:contain; flex:0 0 40px; }
html body .au-belt b{ font-weight:700; color:#fff; }

/* ---------- boutons et liens ---------- */
html body .au-submit{
  display:flex !important; align-items:center; justify-content:center; gap:8px;
  width:100% !important; height:46px !important; min-height:0 !important; margin:22px 0 0 !important; padding:0 18px !important;
  border:0 !important; border-radius:10px !important; background:var(--dj-red) !important; background-image:none !important;
  box-shadow:0 10px 26px rgba(224,48,58,.25) !important; transform:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:14.5px !important; font-weight:700 !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:#fff !important; cursor:pointer;
  transition:background-color .14s ease, box-shadow .14s ease !important;
}
html body .au-submit svg{ width:17px; height:17px; transition:transform .16s ease; }
html body .au-submit:hover{ background:#f0434d !important; box-shadow:0 12px 30px rgba(224,48,58,.35) !important; }
html body .au-submit:hover svg{ transform:translateX(3px); }
html body .au-submit:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---------- « Continuer avec Google » ----------
   Habillage officiel de Google : fond clair, texte #1f1f1f, logo intact. Tout est force en
   !important parce que style.css impose sinon ses propres couleurs aux liens. */
html body .au-google{
  display:flex !important; align-items:center; justify-content:center; gap:11px;
  width:100% !important; height:46px !important; min-height:0 !important;
  margin:4px 0 0 !important; padding:0 18px !important;
  border:1px solid #747775 !important; border-radius:10px !important;
  background:#fff !important; background-image:none !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:14.5px !important;
  font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important;
  text-decoration:none !important;
  color:#1f1f1f !important; cursor:pointer;
  transition:background-color .14s ease, box-shadow .14s ease !important;
}
html body .au-google:hover{ background:#f2f2f2 !important; box-shadow:0 8px 22px rgba(0,0,0,.3) !important; }
html body .au-google:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
html body .au-google .au-glogo{ width:19px; height:19px; flex:0 0 19px; }

/* separateur « ou » entre le bouton Google et le formulaire classique */
html body .au-or{
  display:flex; align-items:center; gap:12px; margin:16px 0 2px;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px;
  color:var(--dj-mut) !important;
}
html body .au-or::before, html body .au-or::after{
  content:""; flex:1 1 auto; height:1px; background:var(--dj-line2);
}
html body .au-ghost{
  display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 auto;
  height:40px !important; min-height:0 !important; margin:0 !important; padding:0 14px !important;
  border:1px solid var(--dj-line2) !important; border-radius:10px !important;
  background:rgba(255,255,255,.05) !important; background-image:none !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:var(--dj-txt) !important; cursor:pointer;
}
html body .au-ghost:hover{ background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.26) !important; }
html body .au-legal{
  margin:12px 0 0 !important; text-align:center; font-size:11.5px; line-height:1.5;
  color:var(--dj-mut) !important;
}
html body .au-legal a{ color:var(--dj-mut2) !important; text-underline-offset:2px; }
html body .au-legal a:hover{ color:#fff !important; }
html body .au-resend{ margin:16px 0 0; font-size:12.5px; }
html body .au-resend summary{
  display:flex; align-items:center; justify-content:center; gap:8px; list-style:none; cursor:pointer;
  font-weight:600; color:var(--dj-mut2) !important;
}
html body .au-resend summary::-webkit-details-marker{ display:none; }
html body .au-resend summary::after{
  content:""; width:6px; height:6px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .15s ease;
}
html body .au-resend[open] summary::after{ transform:translateY(1px) rotate(-135deg); }
html body .au-resend summary:hover{ color:#fff !important; }
html body .au-resend-form{ display:flex; gap:8px; margin:10px 0 0; }
html body .au-resend-form .au-input{ height:40px !important; flex:1 1 auto; min-width:0; }
html body .au-switch{
  margin:18px 0 0 !important; padding:16px 0 0 !important; border-top:1px solid var(--dj-line);
  text-align:center; font-size:13px; color:var(--dj-mut) !important;
}
html body .au-switch a{
  font-weight:700; color:#fff !important;
  text-decoration:underline; text-decoration-color:rgba(224,48,58,.75); text-underline-offset:3px;
}
html body .au-switch a:hover{ color:var(--dj-red) !important; }

/* ---------- sous le hero : ce que le compte debloque ---------- */
html body .au-perks{ margin:0; padding:0; }
html body .au-h2{
  display:flex; align-items:center; gap:11px; margin:0 0 18px !important;
  font-family:var(--impact) !important; font-weight:400 !important; font-size:15px !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important; line-height:1.2 !important;
  color:#fff !important;
}
html body .au-h2::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--dj-red); flex:0 0 auto; }
html body .au-perks-list{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin:0; padding:0; list-style:none;
  border-top:1px solid var(--dj-line); border-bottom:1px solid var(--dj-line);
}
html body .au-perks-list li{ display:flex; flex-direction:column; gap:14px; min-width:0; padding:22px 24px 22px 0; }
html body .au-perks-list li + li{ padding-left:24px; border-left:1px solid var(--dj-line); }
html body .au-perks-list strong{ display:block; font-size:14.5px; font-weight:700; color:#fff !important; }
html body .au-perks-list p{
  margin:5px 0 0 !important; font-size:13px; line-height:1.55;
  color:var(--dj-mut) !important;
}

/* ---------- tablette et mobile ---------- */
@media (max-width:960px){
  html body .au-wrap{ grid-template-columns:minmax(0,1fr); gap:26px; justify-items:center; }
  html body .au-pitch{ max-width:560px; width:100%; position:static; padding-top:0; }
  html body .au-panel{ max-width:520px; }
  html body .au-perks-list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  html body .au-perks-list li:nth-child(3){ padding-left:0; border-left:0; }
  html body .au-perks-list li:nth-child(n+3){ border-top:1px solid var(--dj-line); }
}
@media (max-width:700px){
  html body .au-hero{ background-image:url('/static/brand/dojo_bg_mobile.jpg'); background-position:center 30%; }
  html body .au-hero::before{ background:linear-gradient(180deg, rgba(8,9,13,.62) 0%, rgba(8,9,13,.84) 42%, rgba(8,9,13,.9) 100%); }
  html body .au-hero--solo::before{ background:rgba(8,9,13,.78); }
  html body .au-wrap{ padding-top:24px; padding-bottom:40px; }
  html body .au-hero--solo .au-wrap{ min-height:0; }
}
@media (max-width:560px){
  /* le formulaire d'abord : l'accroche se resume au sur-titre et au titre */
  html body .au-logo, html body .au-lead, html body .au-free{ display:none; }
  html body .au-eyebrow{ margin-bottom:8px !important; }
  html body .au-title{ font-size:30px !important; }
  html body .au-wrap{ gap:18px; }
  html body .au-panel{ padding:18px 16px 18px; border-radius:16px; }
  html body .au-h1{ font-size:22px !important; }
  html body .au-panel .pw-req{ grid-template-columns:1fr; }
  html body .au-perks-list{ grid-template-columns:minmax(0,1fr); }
  html body .au-perks-list li,
  html body .au-perks-list li + li{ flex-direction:row; align-items:flex-start; gap:14px; padding:16px 0; border-left:0; }
  html body .au-perks-list li + li{ border-top:1px solid var(--dj-line); }
}



/* ======================= BOUTONS DE VARIANTE =======================
   Alt Art, Super Alt Art (Dragon Ball Fusion, One Piece), Manga, SP, DON!!
   (One Piece). Ils gardaient les degrades de l'ancien site : ils prennent
   la meme grammaire que l'echelle de rarete — texte colore, fond teinte au
   survol et a l'actif, aucun cadre ni ombre. Selecteurs a id + 2 classes +
   attribut pour passer devant ceux de style.css.
   ================================================================== */
html body.game-page #top-buttons .variant-btn{ --vt:var(--dj-mut2); --vb:255,255,255; }
html body.game-page #top-buttons .variant-btn[data-variant="superaltart"]{ --vt:var(--dj-t-chase);  --vb:255,207,92; }
html body.game-page #top-buttons .variant-btn[data-variant="altart"]{      --vt:var(--dj-t-secret); --vb:192,132,252; }
html body.game-page #top-buttons .variant-btn[data-variant="manga"]{       --vt:#f87171;           --vb:248,113,113; }
html body.game-page #top-buttons .variant-btn[data-variant="sp"]{          --vt:var(--dj-t-super);  --vb:96,165,250; }
html body.game-page #top-buttons .variant-btn[data-variant="don"]{         --vt:var(--dj-amber);    --vb:232,162,74; }
html body.game-page #top-buttons .variant-btn,
html body.game-page #top-buttons .variant-btn[data-variant]{
  background:none !important; background-image:none !important;
  border:0 !important; border-radius:9px !important;
  box-shadow:none !important; text-shadow:none !important; transform:none !important; filter:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important; font-size:12.5px !important;
  letter-spacing:0 !important; text-transform:none !important; padding:7px 11px !important; line-height:1.35 !important;
  color:var(--vt) !important;
  transition:background-color .14s ease, color .14s ease !important;
}
html body.game-page #top-buttons .variant-btn[data-variant]:hover{
  background:rgba(var(--vb), .14) !important; color:var(--vt) !important;
  transform:none !important; filter:none !important;
}
html body.game-page #top-buttons .variant-btn[data-variant].active{
  background:rgba(var(--vb), .22) !important; font-weight:800 !important; box-shadow:none !important;
}
/* meme respiration qu'entre les vues (Top) et l'echelle de rarete */
html body.game-page #top-buttons .rarity-btn + .variant-btn{ margin-left:15px !important; }



/* ============================== LE DOJO ==============================
   share_your_hit.html (+ _dojo_macros, _leaderboard, _dojo_rules) et profile.html.
   Plus de carte de guerrier ni de voies : la ceinture dans son anneau d'XP (meme
   dessin que le hero de l'accueil), des onglets soulignes de rouge, des sections
   separees par des filets — aucune boite dans une boite.
   ==================================================================== */


html body .dj .dj-lead{
  max-width:62ch; margin:0 !important; font-size:15px; line-height:1.6;
  color:var(--dj-mut2) !important;
}

/* ---------- onglets ---------- */
html body .dj .dj-tabs{
  display:flex; gap:2px; margin:0 0 28px; padding:0; border-bottom:1px solid var(--dj-line);
  overflow-x:auto; scrollbar-width:none;
}
html body .dj .dj-tabs::-webkit-scrollbar{ display:none; }
html body .dj .dj-tab{
  display:inline-flex !important; align-items:center; gap:8px; flex:0 0 auto;
  height:46px !important; min-height:0 !important; width:auto !important; margin:0 0 -1px !important; padding:0 14px !important;
  border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important;
  background:none !important; background-image:none !important; box-shadow:none !important; transform:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:13.5px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important; white-space:nowrap;
  color:var(--dj-mut) !important; cursor:pointer;
  transition:color .14s ease, border-color .14s ease !important;
}
html body .dj .dj-tab svg{ width:16px; height:16px; flex:0 0 auto; }
html body .dj .dj-tab:hover{ color:#fff !important; }
html body .dj .dj-tab.is-on{
  color:#fff !important; border-bottom-color:var(--dj-red) !important;
}
html body .dj .dj-tab.is-on svg{ color:var(--dj-red); }

/* ---------- panneaux et mise en page ---------- */
html body .dj.is-ready .dj-pane{ display:none; }
html body .dj.is-ready .dj-pane.is-on{ display:block; }
html body .dj .dj-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:0 56px; align-items:start; }
html body .dj .dj-main{ min-width:0; }
html body .dj .dj-side{ min-width:0; }
@media (min-width:1000px){
  html body .dj.is-ready .dj-side{ display:block !important; }
  html body .dj .dj-tab--me{ display:none !important; }
}
html body .dj .dj-pane-head{ display:flex; flex-direction:column; gap:8px; margin:0 0 18px; }
html body .dj .dj-pane-head p{
  max-width:68ch; margin:0 !important; font-size:13.5px; line-height:1.6;
  color:var(--dj-mut) !important;
}
html body .dj .dj-pane-head p b{ color:#fff; }
html body .dj .dj-pane-head--row{ flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; }
html body .dj .dj-empty{ margin:0 !important; padding:40px 0; text-align:center; font-size:14px; color:var(--dj-mut) !important; }
html body .dj .dj-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
html body .dj .dj-bar{ display:block; height:6px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
html body .dj .dj-bar i{ display:block; height:100%; border-radius:999px; background:#fff; transition:width .6s ease; }

/* ---------- fil d'actualite ---------- */
html body .dj .dj-sort{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--dj-line2); border-radius:10px; background:rgba(255,255,255,.03); }
html body .dj .dj-sort a{
  display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:8px; text-decoration:none !important;
  font-size:12.5px; font-weight:600; color:var(--dj-mut) !important;
}
html body .dj .dj-sort a:hover{ color:#fff !important; }
html body .dj .dj-sort a.is-on{ background:rgba(255,255,255,.1); color:#fff !important; }
html body .dj .dj-tip{
  display:flex; align-items:center; gap:10px; margin:0 0 22px !important; padding:0 0 18px; border-bottom:1px solid var(--dj-line);
  font-size:13px; line-height:1.5; color:var(--dj-mut) !important;
}
html body .dj .dj-tip svg{ width:16px; height:16px; flex:0 0 auto; color:var(--dj-red); }
html body .dj .dj-tip b{ color:#fff; }
html body .dj .dj-feed{ display:flex; flex-direction:column; max-width:640px; }
html body .dj .dj-post{ margin:0 0 24px; padding:0 0 24px; border:0; border-bottom:1px solid var(--dj-line); border-radius:0; background:none; }
html body .dj .post-head{ display:flex; align-items:center; gap:11px; margin:0 0 12px; padding:0; }
html body .dj .cav{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; overflow:hidden;
  border-radius:999px; background:#16181f; box-shadow:0 0 0 1px rgba(255,255,255,.12); text-decoration:none !important;
}
html body .dj .cav.sm{ flex-basis:30px; width:30px; height:30px; }
html body .dj .cav img{ display:block; width:100%; height:100%; }
html body .dj .cav-i{ font-size:14px; font-weight:800; color:#fff; }
html body .dj .post-who{ display:flex; flex-direction:column; min-width:0; }
html body .dj .post-name{ font-size:14px; font-weight:700; text-decoration:none !important; color:#fff !important; }
html body .dj a.post-name:hover{ color:var(--dj-red) !important; }
html body .dj .post-sub{ font-size:12px; color:var(--dj-mut) !important; }
html body .dj .post-media{
  display:flex; align-items:center; justify-content:center; max-height:560px; overflow:hidden; border-radius:14px; cursor:zoom-in;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), transparent 70%), #101218;
}
html body .dj .post-media img{ display:block; width:auto; max-width:100%; max-height:560px; object-fit:contain; }
html body .dj .post-actions{ display:flex; align-items:center; gap:2px; margin:8px 0 4px; padding:0; }
html body .dj .post-actions form{ margin:0; }
html body .dj .act{
  display:inline-flex !important; align-items:center; gap:6px; height:36px !important; min-height:0 !important;
  margin:0 !important; padding:0 8px !important; border:0 !important; border-radius:9px !important;
  background:none !important; background-image:none !important; box-shadow:none !important;
  font-size:13px !important; font-weight:700 !important; color:var(--dj-mut2) !important; cursor:pointer;
}
html body .dj .act svg{ width:22px; height:22px; }
html body .dj .act:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }
html body .dj .act.like:hover, html body .dj .act.like.on{ color:#f43f5e !important; }
html body .dj .post-price{ margin-left:auto; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; }
html body .dj .post-caption{ padding:0 2px; font-size:13.5px; color:var(--dj-txt); }
html body .dj .post-card{ font-size:15px; font-weight:700; text-decoration:none !important; color:#fff !important; }
html body .dj a.post-card:hover{ color:var(--dj-red) !important; }
html body .dj .post-meta{ margin-top:3px; font-size:12.5px; color:var(--dj-mut) !important; }
html body .dj .post-note{ margin-top:8px; font-size:13px; font-style:italic; color:var(--dj-mut2); }
html body .dj .post-comment{ margin-top:8px; font-size:13.5px; line-height:1.5; white-space:pre-wrap; color:var(--dj-txt); }
html body .dj .post-comment b{ color:#fff; }
html body .dj .post-cmts{ display:flex; flex-direction:column; gap:10px; margin:14px 0 0; padding:12px 0 0; list-style:none; border-top:1px solid var(--dj-line); }
/* UNE LIGNE QUI SAIT REVENIR A LA LIGNE. Sans flex-wrap, tout frere de .cmt-b
   occupait une colonne A DROITE du commentaire : le lien « voir les reponses » y
   flottait, et le fil des reponses lui-meme s'y retrouvait comprime. D'ou l'affichage
   signale le 2026-10-28. Les deux elements qui doivent tenir leur propre ligne sous le
   commentaire le disent desormais eux-memes, et s'alignent sous le TEXTE (34 px) et non
   sous l'avatar, comme chez Instagram. */
html body .dj .cmt{ display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap; }
html body .dj .cmt > .cmt-reponses{ flex:0 0 100%; margin-left:34px; }
/* .btn-texte pose « margin:2px 0 0 !important » : il faut donc passer devant lui, en
   specificite ET en !important, sans quoi le lien revient coller au bord gauche. C'est
   la quatrieme fois que ce reset mord ce qui l'utilise ; la lecon est notee dans
   AUDIT.md plutot que reapprise une cinquieme. */
html body .dj .cmt > button.cmt-voir-rep{
  flex:0 0 100%; margin:4px 0 0 34px !important;
}
html body .dj .cmt-b{ flex:1; min-width:0; font-size:13px; line-height:1.45; color:var(--dj-txt); }
html body .dj .cmt-tx{ color:var(--dj-txt) !important; }
html body .dj .cmt-au{ margin-right:6px; font-weight:700; text-decoration:none !important; color:#fff !important; }
html body .dj .cmt-meta{ display:flex; align-items:center; gap:10px; margin-top:3px; }
html body .dj .cmt-t{ font-size:11.5px; color:var(--dj-mut); }
html body .dj .cmt-like{
  display:inline-flex !important; align-items:center; gap:4px; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important;
  border:0 !important; background:none !important; box-shadow:none !important; cursor:pointer;
  font-size:11.5px !important; color:var(--dj-mut) !important;
}
html body .dj .cmt-like svg{ width:14px; height:14px; }
html body .dj .cmt-like.on{ color:#f43f5e !important; }
html body .dj .cmt-like.on svg{ fill:#f43f5e; }
html body .dj .cmt-menu{ position:relative; flex:0 0 auto; }
html body .dj .cmt-dots{
  min-height:0 !important; margin:0 !important; padding:2px !important; border:0 !important; border-radius:8px !important;
  background:none !important; box-shadow:none !important; line-height:0; cursor:pointer; color:var(--dj-mut) !important;
}
html body .dj .cmt-dots svg{ fill:currentColor; }
html body .dj .cmt-dots:hover{ background:rgba(255,255,255,.07) !important; color:#fff !important; }
html body .dj .cmt-menu-pop{
  display:none; position:absolute; top:100%; right:0; z-index:40; min-width:140px; margin-top:4px; padding:4px;
  border:1px solid var(--dj-line2); border-radius:10px; background:#16181f; box-shadow:0 14px 34px rgba(0,0,0,.5);
}
html body .dj .cmt-menu.open .cmt-menu-pop{ display:block; }
html body .dj .cmt-menu-pop button{
  display:block; width:100%; min-height:0 !important; margin:0 !important; padding:8px 10px !important; text-align:left;
  border:0 !important; border-radius:7px !important; background:none !important; box-shadow:none !important; cursor:pointer;
  font-size:13px !important; font-weight:600 !important; color:var(--dj-txt) !important;
}
html body .dj .cmt-menu-pop button:hover{ background:rgba(255,255,255,.07) !important; }
html body .dj .cmt-menu-pop button[data-cmt-del]{ color:#f87171 !important; }
html body .dj .cmt-edit-box{ display:flex; gap:6px; margin-top:6px; }
html body .dj .cmt-edit-input{
  flex:1; min-width:0; height:34px; padding:0 10px; border:1px solid var(--dj-line2); border-radius:8px;
  background:rgba(255,255,255,.05); color:var(--dj-txt); font-size:13px; outline:none;
}
html body .dj .cmt-edit-save, html body .dj .cmt-edit-cancel{
  height:34px !important; min-height:0 !important; margin:0 !important; padding:0 12px !important; border:0 !important; border-radius:8px !important;
  box-shadow:none !important; background-image:none !important; font-size:12.5px !important; font-weight:700 !important; cursor:pointer;
}
html body .dj .cmt-edit-save{ background:var(--dj-red) !important; color:#fff !important; }
html body .dj .cmt-edit-cancel{ background:rgba(255,255,255,.08) !important; color:var(--dj-txt) !important; }
html body .dj .cmt-form{ display:flex; align-items:center; gap:8px; margin:14px 0 0; padding:0; border:0; }
html body .dj .cmt-input{
  flex:1; min-width:0; height:38px !important; min-height:0 !important; margin:0 !important; padding:0 14px !important;
  border:1px solid var(--dj-line2) !important; border-radius:999px !important;
  background:rgba(255,255,255,.04) !important; box-shadow:none !important; outline:none;
  font-size:13.5px !important; color:var(--dj-txt) !important;
}
html body .dj .cmt-input::placeholder{ color:#6f7689 !important; }
html body .dj .cmt-input:focus{ border-color:var(--dj-red) !important; background:rgba(255,255,255,.06) !important; }
html body .dj .emoji-btn{
  flex:0 0 36px; width:36px !important; height:36px !important; border:1px solid var(--dj-line2) !important; border-radius:999px !important;
  background:rgba(255,255,255,.04) !important; color:#fff !important; font-size:16px;
}
html body .dj .emoji-btn::after{ display:none; }
html body .dj .emoji-btn:hover{ background:rgba(255,255,255,.09) !important; }
html body .dj .cmt-send{
  flex:0 0 auto; height:36px !important; min-height:0 !important; margin:0 !important; padding:0 14px !important;
  border:0 !important; border-radius:999px !important; background:var(--dj-red) !important; background-image:none !important; box-shadow:none !important;
  font-size:13px !important; font-weight:700 !important; color:#fff !important; cursor:pointer;
}
html body .dj .cmt-send:hover{ background:#f0434d !important; }

/* ---------- ma progression ---------- */
html body .dj .dj-side > * + *{ border-top:1px solid var(--dj-line); }
html body .dj .dj-me{ display:flex; flex-direction:column; align-items:center; padding:0 0 24px; text-align:center; }
html body .bring{ position:relative; display:grid; place-items:center; flex:0 0 auto; aspect-ratio:1; }
html body .bring--lg{ width:190px; }
html body .bring--md{ width:150px; }
html body .bring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
html body .bring-track, html body .bring-arc{ fill:none; stroke-width:5; }
html body .bring-track{ stroke:rgba(255,255,255,.12); }
html body .bring-arc{ stroke:#fff; stroke-linecap:round; filter:drop-shadow(0 0 10px rgba(255,255,255,.35)); transition:stroke-dashoffset .7s ease; }
html body .bring-belt{ position:relative; width:58%; height:auto; filter:drop-shadow(0 8px 20px rgba(0,0,0,.55)); }
html body .dj .dj-me-belt{
  margin:16px 0 0 !important; font-family:var(--impact); font-size:21px; letter-spacing:1.5px; text-transform:uppercase;
  color:#fff !important;
}
html body .dj .dj-me-xp{ margin:4px 0 0 !important; font-size:13px; font-weight:600; color:var(--dj-mut) !important; }
html body .dj .dj-me-xp b{ font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; }
html body .dj .dj-me-next{ display:flex; flex-direction:column; gap:8px; width:100%; margin-top:16px; }
html body .dj .dj-me-next small{ font-size:12.5px; line-height:1.4; color:var(--dj-mut) !important; }
html body .dj .dj-me-next small b{ color:#fff; }
html body .dj .dj-me-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); width:100%; margin:18px 0 0; padding:14px 0 0; border-top:1px solid var(--dj-line); }
html body .dj .dj-me-stats div + div{ border-left:1px solid var(--dj-line); }
html body .dj .dj-me-stats dt{ margin:0; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dj-mut); }
html body .dj .dj-me-stats dd{
  display:inline-flex; align-items:center; gap:5px; margin:5px 0 0; font-size:16px; font-weight:800;
  font-variant-numeric:tabular-nums; color:#fff;
}
html body .dj .dj-me-stats dd svg{ width:15px; height:15px; color:#fb923c; }
html body .dj .dj-block{ padding:22px 0; }
html body .dj .dj-timer{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--dj-mut); }
html body .dj .dj-timer span{ color:var(--dj-mut); }
html body .dj .dj-timer svg{ width:13px; height:13px; }
html body .dj .dj-more{ font-size:12.5px; font-weight:600; text-decoration:none !important; color:var(--dj-mut2) !important; }
html body .dj .dj-more:hover{ color:#fff !important; }

/* entrainements du jour et defi de la semaine */
html body .dj .dj-qlist{ margin:0; padding:0; list-style:none; }
html body .dj .dj-q{ display:flex; align-items:center; gap:12px; padding:11px 0; }
html body .dj .dj-qlist .dj-q + .dj-q{ border-top:1px solid var(--dj-line); }
html body .dj .dj-q--week{ padding:0; }
html body .dj .dj-q-ic{
  display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:10px;
  background:rgba(224,48,58,.12); border:1px solid rgba(224,48,58,.26); color:var(--dj-red);
}
html body .dj .dj-q-ic svg{ width:18px; height:18px; }
html body .dj .dj-q.is-claimed .dj-q-ic{ background:rgba(74,222,128,.1); border-color:rgba(74,222,128,.28); color:var(--dj-green); }
html body .dj .dj-q-body{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
html body .dj .dj-q-fam{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dj-mut); }
html body .dj .dj-q-name{ font-size:13.5px; font-weight:600; line-height:1.35; color:#fff; }
html body .dj .dj-q.is-claimed .dj-q-name{ color:var(--dj-mut2); }
html body .dj .dj-q-meta{ display:flex; align-items:center; gap:9px; margin-top:5px; }
html body .dj .dj-bar--sm{ flex:1; max-width:150px; height:4px; }
html body .dj .dj-q .dj-bar i{ background:var(--dj-red); }
html body .dj .dj-q.is-ready .dj-bar i{ background:var(--dj-green); }
html body .dj .dj-q-count{ font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--dj-mut); }
html body .dj .dj-q-done{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--dj-green); }
html body .dj .dj-q-done svg{ width:14px; height:14px; }
html body .dj .dj-q-xp{ flex:0 0 auto; font-size:12.5px; font-weight:800; white-space:nowrap; color:var(--dj-mut2); }
html body .dj .dj-claim{
  flex:0 0 auto; height:32px !important; min-height:0 !important; margin:0 !important; padding:0 12px !important;
  border:0 !important; border-radius:9px !important; background:var(--dj-red) !important; background-image:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:12.5px !important; font-weight:800 !important;
  letter-spacing:0 !important; text-transform:none !important; white-space:nowrap;
  color:#fff !important; cursor:pointer;
  box-shadow:0 6px 16px rgba(224,48,58,.3) !important; animation:djPulse 2.2s ease-in-out infinite;
}
html body .dj .dj-claim:hover{ background:#f0434d !important; }
@keyframes djPulse{ 0%,100%{ box-shadow:0 6px 16px rgba(224,48,58,.28); } 50%{ box-shadow:0 6px 24px rgba(224,48,58,.6); } }
@media (prefers-reduced-motion: reduce){ html body .dj .dj-claim{ animation:none; } }
html body .dj .dj-combo{
  display:flex; align-items:center; gap:10px; margin:10px 0 0; padding:12px 0 0; border-top:1px dashed var(--dj-line2);
  font-size:12.5px; line-height:1.45; color:var(--dj-mut);
}
html body .dj .dj-combo > svg{ width:16px; height:16px; flex:0 0 auto; color:var(--dj-amber); }
html body .dj .dj-combo > span{ flex:1; min-width:0; color:inherit !important; }
html body .dj .dj-combo b{ color:#fff; }
html body .dj .dj-combo.is-ready{ color:#fcd34d; }
html body .dj .dj-combo.is-claimed{ color:var(--dj-green); }
html body .dj .dj-combo.is-claimed > svg{ color:var(--dj-green); }

/* ---------- classement ---------- */
html body .dj .dj-lb{ max-width:680px; margin:0; padding:0; list-style:none; }
html body .dj .dj-lb-row{
  display:grid; grid-template-columns:32px 36px minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:10px 8px; border-bottom:1px solid var(--dj-line);
}
html body .dj .dj-lb-row.is-me{ border-radius:10px; border-bottom-color:transparent; background:rgba(224,48,58,.09); }
html body .dj .dj-lb-pos{ text-align:center; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--dj-mut); }
html body .dj .dj-lb-row.is-top1 .dj-lb-pos{ color:#ffcf5c; }
html body .dj .dj-lb-row.is-top2 .dj-lb-pos{ color:#d8dde8; }
html body .dj .dj-lb-row.is-top3 .dj-lb-pos{ color:#e0a869; }
html body .dj .dj-lb-av{
  display:block; width:36px; height:36px; padding:5px; box-sizing:border-box; object-fit:contain;
  border-radius:999px; background:#16181f; box-shadow:0 0 0 1px rgba(255,255,255,.1);
}
html body .dj .dj-lb-id{ display:flex; flex-direction:column; min-width:0; }
html body .dj .dj-lb-name{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:700; text-decoration:none !important;
  color:#fff !important;
}
html body .dj a.dj-lb-name:hover{ color:var(--dj-red) !important; }
html body .dj .dj-lb-id small{ font-size:12px; color:var(--dj-mut); }
html body .dj .dj-lb-xp{ font-size:12px; font-weight:700; white-space:nowrap; color:var(--dj-mut); }
html body .dj .dj-lb-xp b{ font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; }
html body .dj .dj-lb-gap{ padding:4px 0; text-align:center; letter-spacing:.3em; color:#4d5468; list-style:none; }
html body .dj .dj-lb--mini .dj-lb-row{ grid-template-columns:22px 30px minmax(0,1fr) auto; gap:10px; padding:8px 6px; }
html body .dj .dj-lb--mini .dj-lb-av{ width:30px; height:30px; padding:4px; }
html body .dj .dj-lb--mini .dj-lb-name{ font-size:13px; }
html body .dj .dj-lb--mini .dj-lb-xp b{ font-size:13px; }

/* ---------- ceintures ---------- */
html body .dj .dj-ladder{ max-width:820px; margin:0; padding:0; list-style:none; border-top:1px solid var(--dj-line); }
html body .dj .dj-rung{
  display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:12px 10px; border-bottom:1px solid var(--dj-line);
}
html body .dj .dj-rung.is-current{ border-radius:12px; border-bottom-color:transparent; background:rgba(255,255,255,.045); }
html body .dj .dj-rung-img{ display:block; width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
html body .dj .dj-rung.is-locked .dj-rung-img{ opacity:.42; }
html body .dj .dj-rung-id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
html body .dj .dj-rung-id strong{ font-family:var(--impact); font-weight:400; font-size:17px; letter-spacing:1px; text-transform:uppercase; color:#fff; }
html body .dj .dj-rung.is-locked .dj-rung-id strong{ color:var(--dj-mut2); }
html body .dj .dj-rung-id small{ font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--dj-mut); }
html body .dj .dj-rung-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; }
html body .dj .dj-rung-meta i{ font-style:normal; color:#4d5468; }
html body .dj .dj-rung-meta span{ color:var(--dj-mut) !important; }



html body .dj .dj-rung-st{ display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; text-align:right; font-size:12.5px; font-weight:600; color:var(--dj-mut); }
html body .dj .dj-rung-st svg{ width:14px; height:14px; flex:0 0 auto; }
html body .dj .dj-rung.is-done .dj-rung-st{ color:var(--dj-green); }
html body .dj .dj-chip{
  display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--dj-red);
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff;
}


/* ---------- regles ---------- */
html body .dj .dj-rule{ max-width:820px; padding:22px 0; border-top:1px solid var(--dj-line); }
html body .dj .dj-rule h3{ margin:0 0 10px !important; font-family:'Inter',system-ui,sans-serif !important; font-size:15px !important; font-weight:700 !important; color:#fff !important; }
html body .dj .dj-rule p{ margin:0 0 10px !important; font-size:13.5px; line-height:1.6; color:var(--dj-mut2) !important; }
html body .dj .dj-rule p b{ color:#fff; }
html body .dj .dj-rule p a{
  font-weight:600; text-decoration:underline; text-decoration-color:rgba(224,48,58,.75); text-underline-offset:3px;
  color:#fff !important;
}
html body .dj .dj-rule .dj-note{ margin:12px 0 0 !important; font-size:12px; color:var(--dj-mut) !important; }
html body .dj .dj-gains{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 40px; }
html body .dj .dj-qfam{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px 28px; }
html body .dj .dj-gain-t{ margin:10px 0 4px !important; font-size:10.5px !important; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dj-mut) !important; }
html body .dj .dj-gains ul, html body .dj .dj-qfam ul, html body .dj .dj-rlist{ margin:0; padding:0; list-style:none; }
html body .dj .dj-gains li, html body .dj .dj-qfam li, html body .dj .dj-rlist li{
  display:flex; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid var(--dj-line); font-size:13px;
}
html body .dj .dj-gains li span, html body .dj .dj-qfam li span, html body .dj .dj-rlist li span{ flex:1; min-width:0; color:var(--dj-txt); }
html body .dj .dj-gains li b, html body .dj .dj-qfam li b, html body .dj .dj-rlist li b{ font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; color:#fff; }
html body .dj .dj-gains li small{ min-width:42px; text-align:right; font-size:11.5px; color:var(--dj-mut); }
html body .dj .dj-steps{ display:flex; flex-wrap:wrap; gap:10px 0; margin:6px 0 0; padding:0; list-style:none; }
html body .dj .dj-steps li{ display:flex; flex-direction:column; gap:3px; margin:0 22px 0 0; padding:2px 22px 2px 0; border-right:1px solid var(--dj-line); }
html body .dj .dj-steps li:last-child{ margin-right:0; padding-right:0; border-right:0; }
html body .dj .dj-steps small{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dj-mut); }
html body .dj .dj-steps b{ font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; }

/* ---------- visionneuse ---------- */
html body .dj-lightbox{ position:fixed; inset:0; z-index:100050; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(5,6,9,.9); }
html body .dj-lightbox[hidden]{ display:none !important; }
html body .dj-lightbox img{ max-width:min(94vw, 760px); max-height:90vh; border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.6); }
html body .dj-lightbox-x{
  position:absolute !important; top:16px; right:16px; display:grid !important; place-items:center;
  width:42px !important; height:42px !important; min-height:0 !important; padding:0 !important; margin:0 !important;
  border:1px solid rgba(255,255,255,.18) !important; border-radius:999px !important;
  background:rgba(255,255,255,.08) !important; box-shadow:none !important; color:#fff !important; cursor:pointer;
}
html body .dj-lightbox-x svg{ width:20px; height:20px; }

/* ---------- profil public ---------- */
html body .pf .pf-hero{ display:flex; align-items:center; flex-wrap:wrap; gap:22px 34px; padding:10px 0 30px; border-bottom:1px solid var(--dj-line); }
html body .pf .pf-id{ flex:1 1 320px; min-width:0; }
html body .pf .pf-name{ margin:0 0 12px !important; overflow-wrap:anywhere; }
html body .pf .pf-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 !important; font-size:13.5px; color:var(--dj-mut) !important; }
html body .pf .pf-meta b{ font-weight:700; color:#fff; }
html body .pf .pf-dot{ color:#4d5468; }
html body .pf .pf-next{ display:flex; flex-direction:column; gap:7px; max-width:360px; margin-top:16px; }
html body .pf .dj-bar{ display:block; height:6px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
html body .pf .dj-bar i{ display:block; height:100%; border-radius:999px; background:#fff; }
html body .pf .pf-next small{ font-size:12.5px; color:var(--dj-mut) !important; }
html body .pf .pf-sec{ padding:28px 0; border-bottom:1px solid var(--dj-line); }
html body .pf .pf-sec:last-child{ border-bottom:0; }
html body .pf .pf-sec-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin:0 0 18px; }
html body .pf .pf-sec-head span{ font-size:13px; font-weight:600; color:var(--dj-mut2); }
html body .pf .pf-stats{ display:flex; flex-wrap:wrap; gap:12px 0; margin:16px 0 0; }
html body .pf .pf-stats div{ margin:0 28px 0 0; padding:0 28px 0 0; border-right:1px solid var(--dj-line); }
html body .pf .pf-stats div:last-child{ margin-right:0; padding-right:0; border-right:0; }
html body .pf .pf-stats dt{ margin:0; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dj-mut); }
html body .pf .pf-stats dd{ margin:5px 0 0; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; }
html body .pf .pf-note{ margin:14px 0 0 !important; font-size:12.5px; color:var(--dj-mut) !important; }
html body .pf .pf-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(136px, 1fr)); gap:20px 16px; }
html body .pf .pf-card{ display:flex; flex-direction:column; gap:3px; min-width:0; text-decoration:none !important; }
html body .pf .pf-card-img{ position:relative; display:block; aspect-ratio:63/88; overflow:hidden; border-radius:10px; background:#101218; }
html body .pf .pf-card-img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
html body .pf .pf-card:hover .pf-card-img img{ transform:scale(1.03); }
html body .pf .pf-qty{
  position:absolute; top:6px; right:6px; display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:999px;
  background:var(--dj-red); font-size:11.5px; font-weight:800; color:#fff;
}
html body .pf .pf-card-name{
  margin-top:6px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  font-size:13px; font-weight:700; line-height:1.3; color:#fff;
}
html body .pf .pf-card-meta{ font-size:11.5px; color:var(--dj-mut); }
html body .pf .pf-card-price{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; }
html body .pf .pf-empty{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:26px 0 60px; }
html body .pf .pf-empty .cv-title{ margin:6px 0 0 !important; }
html body .pf .pf-empty p{ margin:0 !important; font-size:14px; color:var(--dj-mut2) !important; }
html body .pf .pf-empty-ic{
  display:grid; place-items:center; width:48px; height:48px; border-radius:12px;
  background:rgba(224,48,58,.13); border:1px solid rgba(224,48,58,.28); color:var(--dj-red);
}
html body .pf .pf-empty-ic svg{ width:22px; height:22px; }
html body .pf .pf-btn{
  display:inline-flex; align-items:center; height:40px; margin-top:10px; padding:0 16px; border-radius:10px; background:var(--dj-red);
  font-size:13.5px; font-weight:700; text-decoration:none !important; color:#fff !important;
}
html body .pf .pf-btn:hover{ background:#f0434d; }

/* ---------- tablette et mobile ---------- */
@media (max-width:999px){
  html body .dj .dj-layout{ grid-template-columns:minmax(0,1fr); }
  html body .dj .dj-side{ width:100%; max-width:560px; margin:0 auto; }
}
@media (max-width:760px){
  html body .dj .dj-rung{ grid-template-columns:48px minmax(0,1fr) auto; gap:12px; padding:10px 6px; }
  html body .dj .dj-rung-img{ width:44px; height:44px; }
  
  html body .dj .dj-gains, html body .dj .dj-qfam{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  html body .dj .dj-tabs{ margin-left:calc(-1 * var(--dj-gut)); margin-right:calc(-1 * var(--dj-gut)); padding:0 var(--dj-gut); }
  html body .dj .dj-tab{ padding:0 11px !important; }
  html body .dj .post-media{ border-radius:10px; }
  html body .dj .dj-lb-row{ gap:10px; padding:10px 4px; }
  html body .dj .dj-steps li{ margin-right:14px; padding-right:14px; }
  html body .pf .pf-hero{ gap:18px; }
  html body .pf .bring--md{ width:118px; }
}


/* ===================== LE DOJO : BANDEAU ======================
   L'en-tete du Dojo sur l'image du dojo de l'accueil, pleine largeur,
   sans cadre : un voile a gauche pour le texte, un fondu en bas qui la
   raccorde au fond de page. Le contenu reste aligne sur la grille .cv.
   ============================================================= */
html body .dj-band{
  position:relative; isolation:isolate; overflow:hidden;
  background:url('/static/brand/dojo_bg.jpg') center 42% / cover no-repeat, var(--dj-bg);
}
html body .dj-band::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(8,9,13,.92) 0%, rgba(8,9,13,.74) 38%, rgba(8,9,13,.34) 70%, rgba(8,9,13,.55) 100%);
}
html body .dj-band::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,12,16,.7) 0%, transparent 22%),
    linear-gradient(180deg, transparent 50%, rgba(11,12,16,.8) 84%, var(--dj-bg) 100%);
}
html body .dj-band .dj-band-in{
  position:relative; z-index:1; box-sizing:content-box;
  padding:clamp(40px, 7vh, 76px) var(--dj-gut) clamp(44px, 7vh, 72px);
}
html body .dj-band .cv-title{ margin:0 0 12px !important; text-shadow:0 10px 40px rgba(0,0,0,.55); }
html body .dj-band .dj-lead{
  max-width:560px; margin:0 !important; font-size:15px; line-height:1.6;
  color:var(--dj-mut2) !important;
}
/* le contenu remonte sous le bandeau : les onglets prennent le relais du fondu */
html body .dj-band ~ main.page{ padding-top:6px !important; }

/* ========= LE DOJO : BANDEAU TEMPORAIRE « XP REMISE A ZERO » =========
   Affiche quelques jours apres reset_xp.py --apply (xp_reset_notice() dans app.py), puis
   disparait tout seul. Refermable (« Compris », retenu par navigateur). A supprimer avec
   le bloc {% if xp_reset %} de share_your_hit.html lors du nettoyage. */
html body .dj .dj-reset{
  display:flex; align-items:flex-start; gap:14px; margin:0 0 24px; padding:16px 18px;
  border:1px solid rgba(224,48,58,.30); border-radius:14px;
  background:linear-gradient(100deg, rgba(224,48,58,.14) 0%, rgba(224,48,58,.04) 55%, rgba(255,255,255,.02) 100%);
  transition:opacity .2s ease, transform .2s ease;
}
html body .dj .dj-reset.is-out{ opacity:0; transform:translateY(-6px); }
html body .dj .dj-reset-belt{ flex:0 0 52px; width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 6px 16px rgba(255,255,255,.14)); }
html body .dj .dj-reset-tx{ flex:1; min-width:0; }
html body .dj .dj-reset-t{
  margin:2px 0 5px !important; font-family:'Anton',Impact,sans-serif !important; font-size:18px !important; font-weight:400 !important;
  line-height:1.2; letter-spacing:.02em; text-transform:uppercase; color:#fff !important;
}
html body .dj .dj-reset-p{
  margin:0 !important; max-width:72ch; font-size:13.5px !important; line-height:1.55;
  color:var(--dj-mut2) !important;
}
html body .dj .dj-reset-p b{ color:#fff; }
html body .dj .dj-reset-ok{
  display:inline-flex !important; align-items:center; gap:6px; width:auto !important; height:auto !important; min-height:0 !important;
  margin:10px 0 0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  background:none !important; background-image:none !important; box-shadow:none !important; transform:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:12.5px !important; font-weight:700 !important;
  letter-spacing:0 !important; text-transform:none !important; cursor:pointer;
  color:var(--dj-mut2) !important;
}
html body .dj .dj-reset-ok:hover{ color:#fff !important; }
html body .dj .dj-reset-ok svg{ width:14px; height:14px; color:var(--dj-green); }

/* ================= INSTALLER L'APPLICATION (PWA) =================
   Bandeau discret (#pwa-banner, base.html) : juste au-dessus de la barre du bas sur mobile,
   en bas a droite sur ordinateur (seulement via le lien du bas de page). */
html body .pwa-banner{
  position:fixed; z-index:100060; left:12px; right:12px; margin:0 auto; max-width:520px;
  bottom:calc(var(--bnav-h, 62px) + 30px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px;
  background:#14161d; border:1px solid var(--dj-line2); box-shadow:0 18px 50px rgba(0,0,0,.55);
  font-family:'Inter',system-ui,sans-serif;
  opacity:0; transform:translateY(14px); transition:opacity .25s ease, transform .25s ease;
}
html body .pwa-banner.is-on{ opacity:1; transform:none; }
@media (min-width:821px){ html body .pwa-banner{ left:auto; right:24px; bottom:24px; width:420px; } }
html body .pwa-ic{ flex:0 0 44px; width:44px; height:44px; border-radius:11px; display:block; }
html body .pwa-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
html body .pwa-tx strong{ font-size:14px; font-weight:800; line-height:1.25; color:#fff !important; }
html body .pwa-sub{ font-size:12.5px; line-height:1.4; color:var(--dj-mut) !important; }
html body .pwa-share{ display:inline-block; width:15px; height:15px; vertical-align:-3px; color:var(--dj-mut2); }
html body .pwa-act{ flex:0 0 auto; display:flex; flex-direction:column; align-items:stretch; gap:4px; }
html body .pwa-banner button{
  font-family:inherit !important; text-transform:none !important; letter-spacing:0 !important;
  box-shadow:none !important; transform:none !important; min-height:0 !important; width:auto !important;
  margin:0 !important; background-image:none !important; cursor:pointer;
}
html body .pwa-banner .pwa-yes{
  height:34px !important; padding:0 14px !important; border:0 !important; border-radius:9px !important;
  background:var(--dj-red) !important; font-size:13px !important; font-weight:700 !important;
  color:#fff !important;
}
html body .pwa-banner .pwa-no{
  height:24px !important; padding:0 6px !important; border:0 !important; background:none !important;
  font-size:12px !important; font-weight:600 !important; color:var(--dj-mut) !important;
}
/* trois formes : .pwa-std (bouton du navigateur), .is-ios (geste Safari), .is-man (menu du navigateur) */
html body .pwa-banner .pwa-ios,
html body .pwa-banner .pwa-man,
html body .pwa-banner .pwa-ack{ display:none !important; }
html body .pwa-banner.is-ios span.pwa-ios,
html body .pwa-banner.is-man span.pwa-man{ display:inline !important; }
html body .pwa-banner.is-ios .pwa-ack,
html body .pwa-banner.is-man .pwa-ack{ display:inline-block !important; }
html body .pwa-banner.is-ios .pwa-std,
html body .pwa-banner.is-man .pwa-std{ display:none !important; }
html body .pwa-banner .pwa-man b{ color:var(--dj-mut2); font-weight:800; }

/* ============ PAGES DE CONTENU : CONTACT ET PAGES JURIDIQUES ============
   contact.html, privacy-policy.html, terms.html, legal-notice.html (body.doc-page).
   Meme grammaire que Collection / Doubles (.cv) : micro-libelle, grand titre Anton, sections
   separees par des filets, aucune boite dans une boite. Sommaire fixe a gauche sur ordinateur. */
html body .lg .lg-hero{ padding:10px 0 30px; border-bottom:1px solid var(--dj-line); }
html body .lg .lg-hero .cv-title{ margin:0 !important; }
html body .lg .lg-hero .cv-lead{ max-width:62ch; }
/* Meme raison : ce lien est peint comme le paragraphe qui le porte, dont il herite
   le -webkit-text-fill-color. Sans cette ligne il s'eclaircirait le jour ou le
   mecanisme disparait -- un changement visible, pas une correction. */
html body .lg .lg-hero .cv-lead a{ color:var(--dj-mut); }
html body .lg .lg-updated{
  margin:14px 0 0 !important; font-size:12px; font-weight:600;
  color:#6f7689 !important;
}
html body .lg .lg-layout{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:0 64px; align-items:start; }
html body .lg .lg-layout.is-solo{ grid-template-columns:minmax(0,1fr); }
html body .lg .lg-toc{
  position:sticky; top:calc(var(--dj-nav-h) + 28px); display:flex; flex-direction:column;
  margin:28px 0 0; padding:0; border-left:1px solid var(--dj-line);
}
html body .lg .lg-toc-title{
  margin:0 0 8px 14px !important; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dj-mut) !important;
}
html body .lg .lg-toc a{
  display:block; margin-left:-1px; padding:6px 0 6px 14px; border-left:2px solid transparent;
  font-size:13px; line-height:1.35; text-decoration:none !important;
  color:var(--dj-mut) !important;
  transition:color .14s ease, border-color .14s ease;
}
html body .lg .lg-toc a:hover{ color:#fff !important; border-left-color:var(--dj-red); }
html body .lg .lg-doc{ max-width:76ch; min-width:0; }
html body .lg .lg-sec{ padding:28px 0; border-bottom:1px solid var(--dj-line); scroll-margin-top:calc(var(--dj-nav-h) + 20px); }
html body .lg .lg-sec .cv-h2{ margin:0 0 16px !important; }
html body .lg .lg-sec h3{
  margin:22px 0 10px !important; font-family:'Inter',system-ui,sans-serif !important; font-size:14.5px !important;
  font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important;
  color:#fff !important;
}
html body .lg .lg-sec p{
  margin:0 0 12px !important; font-size:14.5px; line-height:1.7;
  color:var(--dj-mut2) !important;
}
html body .lg .lg-sec p:last-child{ margin-bottom:0 !important; }
html body .lg .lg-sec strong{ font-weight:700; color:#fff !important; }
/* « Donnees / Finalite / Base legale » : un libelle, une valeur, bien alignes */
html body .lg .lg-kv{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:9px 20px; margin:0 0 12px !important; }
html body .lg .lg-kv dt{
  font-size:12.5px; font-weight:700; line-height:1.75; max-width:220px;
  color:#fff !important;
}
html body .lg .lg-kv dd{
  margin:0 !important; font-size:14.5px; line-height:1.7;
  color:var(--dj-mut2) !important;
}
html body .lg .lg-doc a,
html body .ctc .ctc-info a{
  color:#fff !important; text-decoration:underline !important;
  text-decoration-color:rgba(255,255,255,.3) !important; text-underline-offset:3px;
}
html body .lg .lg-doc a:hover,
html body .ctc .ctc-info a:hover{ text-decoration-color:var(--dj-red) !important; }
html body .lg .lg-related{ display:flex; flex-wrap:wrap; gap:10px 26px; padding:24px 0 0; }
html body .lg .lg-doc .lg-related a{
  font-size:13px; font-weight:600; text-decoration:none !important;
  color:var(--dj-mut2) !important;
}
html body .lg .lg-doc .lg-related a::after{ content:" →"; }
html body .lg .lg-doc .lg-related a:hover{ color:#fff !important; }
@media (max-width:900px){
  html body .lg .lg-layout{ grid-template-columns:minmax(0,1fr); }
  html body .lg .lg-toc{ display:none; }
  html body .lg .lg-kv{ grid-template-columns:minmax(0,1fr); gap:1px; }
  html body .lg .lg-kv dd{ margin-bottom:10px !important; }
}

/* contact : formulaire (champs de la page de connexion) a gauche, coordonnees a droite */
html body .ctc .ctc-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:start; padding-top:30px; }
html body .ctc .ctc-main{ padding-right:56px; }
html body .ctc .ctc-info{ padding-left:48px; border-left:1px solid var(--dj-line); }
html body .ctc .ctc-flash{ margin-top:16px; max-width:560px; }
html body .ctc .ctc-flash:empty{ display:none; }
html body .ctc .ctc-form{ max-width:560px; margin-top:14px !important; }
html body .ctc textarea.au-input{
  height:auto !important; min-height:170px !important; padding:12px 13px !important;
  line-height:1.55 !important; resize:vertical;
}
html body .ctc .ctc-form .au-submit{ margin-top:20px !important; }
html body .ctc .ctc-dl{ display:flex; flex-direction:column; gap:20px; margin:18px 0 0 !important; }
html body .ctc .ctc-dl dt{
  margin:0 0 6px !important; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dj-mut) !important;
}
html body .ctc .ctc-dl dd{ margin:0 !important; font-size:15px; line-height:1.55; color:#fff !important; }
html body .ctc .ctc-note{
  margin:26px 0 0 !important; padding-top:20px; border-top:1px solid var(--dj-line); font-size:13px; line-height:1.6;
  color:var(--dj-mut) !important;
}
@media (max-width:860px){
  html body .ctc .ctc-grid{ grid-template-columns:minmax(0,1fr); }
  html body .ctc .ctc-main{ padding-right:0; }
  html body .ctc .ctc-info{ margin-top:34px; padding:28px 0 0; border-left:0; border-top:1px solid var(--dj-line); }
}
@media (max-width:700px){
  html body .dj-band{ background-image:url('/static/brand/dojo_bg_mobile.jpg'); background-position:center 30%; }
  html body .dj-band::before{ background:linear-gradient(180deg, rgba(8,9,13,.55) 0%, rgba(8,9,13,.78) 100%); }
  html body .dj-band .dj-band-in{ padding-top:30px; padding-bottom:34px; }
}

/* ================ FENETRE « CHARGEMENT DES CARTES » ================
   #page-loader (base.html) : theme.css lui imposait un encadre blanc et un
   texte fonce jusque sur son id. Meme habillage que les autres fenetres du
   site : voile sombre, panneau sombre filete, anneau rouge.
   ================================================================== */
html body .page-loader{
  background:rgba(5,6,9,.62) !important; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
html body .page-loader-box{
  gap:13px !important; padding:13px 20px 13px 14px !important;
  background:#13151b !important; background-image:none !important;
  border:1px solid rgba(255,255,255,.13) !important; border-radius:14px !important;
  box-shadow:0 24px 70px rgba(0,0,0,.55) !important;
}
html body .page-loader-spinner{
  width:24px !important; height:24px !important; flex:0 0 auto;
  border:3px solid rgba(255,255,255,.12) !important; border-top-color:var(--dj-red) !important;
  animation:page-loader-spin .75s linear infinite;
}
html body #page-loader-text, html body .page-loader-box *{
  font-family:'Inter',system-ui,sans-serif !important; font-size:14px !important; font-weight:600 !important;
  letter-spacing:0 !important; color:#fff !important;
}
@media (prefers-reduced-motion: reduce){ html body .page-loader-spinner{ animation-duration:1.6s; } }

/* ====================================================================
   MON BILAN — achats face à la valeur droppée (templates/bilan.html,
   templates/bilan_purchase.html, static/bilan.js). Reprend la grammaire .cv
   de « Ma collection » : filets d'un pixel, micro-libellés, Anton, valeurs en
   blanc ; ambre = valeur obtenue, vert / rouge = gagnant / perdant.
   ==================================================================== */
html body .bl{ padding-bottom:110px; }
/* [hidden] doit gagner sur les display:flex / grid de ce bloc (panneaux, lignes et formulaires masqués). */
html body .bl [hidden], html body .bl-sheet[hidden], html body .bl-sheet [hidden], html body .bl-backdrop[hidden]{ display:none !important; }
html body .bl .is-up{ color:#4ade80 !important; }
html body .bl .is-down{ color:#f87171 !important; }
html body .bl .bl-amber{ color:var(--dj-amber) !important; }
html body .bl .cv-delta em{ margin-left:2px; font-weight:600; opacity:.85; }

/* état vide */
html body .bl .bl-empty{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:26px 0 10px; border-top:1px solid var(--dj-line); }
html body .bl .bl-empty-title{ margin:0 !important; font-family:var(--impact); font-size:26px; letter-spacing:.4px; text-transform:uppercase; line-height:1.1; color:#fff !important; }
html body .bl .bl-steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 28px; margin:6px 0 4px; padding:0; list-style:none; counter-reset:blstep; max-width:980px; }
html body .bl .bl-steps li{ counter-increment:blstep; display:flex; flex-direction:column; gap:4px; padding-top:12px; border-top:2px solid var(--dj-line2); font-size:13.5px; color:var(--dj-mut2); }
html body .bl .bl-steps li::before{ content:counter(blstep); font-family:var(--impact); font-size:22px; color:var(--dj-red); line-height:1; }
/* couleurs imposées : le thème force sinon ces textes en noir (illisibles sur le fond sombre) */
html body .bl .bl-steps b{ color:#fff !important; font-weight:700; }
html body .bl .bl-steps span{ display:block; color:var(--dj-mut2) !important; line-height:1.5; }

/* graphique */
html body .bl .cv-lg::before{ content:""; display:inline-block; width:16px; height:3px; border-radius:2px; margin-right:7px; vertical-align:middle; background:var(--dj-mut2); }
html body .bl .bl-lg-value::before{ background:var(--dj-amber) !important; }
html body .bl .bl-custom{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:12px 0 0; font-size:12.5px; color:var(--dj-mut); }
html body .bl .bl-custom label{ display:inline-flex; align-items:center; gap:8px; }
html body .bl .bl-custom .au-input{ width:auto; height:36px; padding:0 10px; }
html body .bl .bl-chart-svg{ margin-top:14px; }
html body .bl .bl-chart-svg svg{ display:block; width:100%; height:auto; font-family:'Inter',system-ui,sans-serif; }

/* par type / mes achats */
html body .bl .bl-cols{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:32px 56px; margin-top:34px; }
html body .bl .bl-types, html body .bl .bl-buys{ display:flex; flex-direction:column; gap:10px; min-width:0; }
html body .bl .bl-side{ display:flex; flex-direction:column; gap:30px; min-width:0; }
/* « Par jeu » / « Par type d'achat » : titres repliables (details/summary), même flèche que
   « Mes achats » */
html body .bl .bl-side{ gap:14px; }
html body .bl .bl-fold{ border-bottom:1px solid var(--dj-line); }
html body .bl .bl-fold-sum{ display:flex; align-items:center; gap:10px; padding:12px 0; cursor:pointer; list-style:none;
  -webkit-user-select:none; user-select:none; }
html body .bl .bl-fold-sum::-webkit-details-marker{ display:none; }
html body .bl .bl-fold-sum .cv-h2{ flex:1 1 auto; }
html body .bl .bl-fold-sum:hover .bl-chev{ color:#fff; }
html body .bl .bl-fold-n{ font-size:12px; font-weight:700; color:var(--dj-mut) !important; }
html body .bl .bl-fold > .bl-types{ padding:0 0 14px; }
html body .bl .bl-fold .bl-type:last-child{ border-bottom:0; }
html body .bl .bl-type-list, html body .bl .bl-buy-list{ margin:0; padding:0; list-style:none; }
html body .bl .bl-type{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:13px 0; border-bottom:1px solid var(--dj-line); }
html body .bl .bl-type-name{ font-size:14px; font-weight:700; color:#fff; }
html body .bl .bl-type-name small, html body .bl .bl-type-res small{ display:block; margin-top:2px; font-size:12px; font-weight:500; color:var(--dj-mut) !important; }
html body .bl .bl-type-res{ text-align:right; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
html body .bl .bl-bar{ grid-column:1 / -1; position:relative; height:6px; border-radius:99px; background:rgba(255,255,255,.07); }
html body .bl .bl-bar i{ position:absolute; inset:0 auto 0 0; border-radius:99px; background:#f87171; }
html body .bl .bl-bar i.is-up{ background:#4ade80; }
html body .bl .bl-bar-mark{ position:absolute; left:66.67%; top:-3px; bottom:-3px; width:2px; border-radius:2px; background:var(--dj-mut2); }
html body .bl .bl-buy{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 8px; margin:0 -8px; border-radius:10px;
  border-bottom:1px solid var(--dj-line); text-decoration:none !important; color:inherit !important; }
html body .bl .bl-buy:hover{ background:rgba(255,255,255,.035); }
html body .bl .bl-ico{ display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--dj-line); color:var(--dj-mut2); }
html body .bl .bl-ico svg{ width:20px; height:20px; }
html body .bl .bl-buy-id{ min-width:0; display:flex; flex-direction:column; gap:2px; }
html body .bl .bl-buy-name{ font-size:14px; font-weight:700; color:#fff !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* nom de l'achat + pastille de quantité « ×2 » (toujours visible, même si le nom est coupé) */
html body .bl .bl-buy-top{ display:flex; align-items:center; gap:7px; min-width:0; }
html body .bl .bl-buy-top .bl-buy-name{ min-width:0; }
html body .bl .bl-qty-tag{ flex:none; font-style:normal; font-size:11.5px; font-weight:800; line-height:1; padding:3px 6px 3px 5px; border-radius:6px; font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.08); border:1px solid var(--dj-line2); color:#fff !important; }
html body .bl .bl-buy-sub{ font-size:12px; color:var(--dj-mut) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; min-width:0; }
/* date · set coupés si trop longs ; l'étiquette « Pas ouvert » / « N hits » reste toujours visible */
html body .bl .bl-buy-subtxt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html body .bl .bl-buy-sub .bl-tag{ flex:none; }
html body .bl .bl-tag{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:6px; background:rgba(255,255,255,.07); font-style:normal; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--dj-mut2); }
html body .bl .bl-tag.is-sealed{ background:rgba(79,134,224,.14); color:#8fb3f0; }
html body .bl .bl-tag.is-hits{ background:rgba(255,255,255,.07); color:var(--dj-mut2); }
html body .bl .bl-buy-val{ text-align:right; font-variant-numeric:tabular-nums; }
html body .bl .bl-buy-val b{ display:block; font-size:14px; font-weight:800; }
html body .bl .bl-buy-val small{ font-size:11.5px; color:var(--dj-mut); }
/* VENTES : même ligne que les achats, mais sans lien (bouton Supprimer à droite) */
html body .bl .bl-sale{ cursor:default; }
html body .bl .bl-add-sale{ align-self:flex-start; height:38px !important; margin-top:4px; }
html body .bl .bl-sale:hover{ background:none; }
html body .bl .bl-sale-del{ margin-top:2px; padding:0 !important; border:0 !important; background:none !important; cursor:pointer;
  font-size:11.5px !important; font-weight:600 !important; color:var(--dj-mut) !important; text-decoration:underline; }
html body .bl .bl-sale-del:hover{ color:#f87171 !important; }
html body .bl-sheet .bl-modes{ margin:0 0 16px; }
html body .bl-sheet .bl-modes .bl-chip{ flex:1 1 0; justify-content:center; }
html body .bl .bl-how{ margin-top:30px; }
/* « Mes achats » rangés par MOIS puis par JEU : blocs qui se déroulent d'un toucher (details/summary) */
html body .bl .bl-cards{ display:flex; flex-direction:column; gap:10px; }
html body .bl .bl-card, html body .bl .bl-hgroup{ border:1px solid var(--dj-line); border-radius:12px; background:rgba(255,255,255,.02); }
html body .bl .bl-card-sum, html body .bl .bl-hgroup-sum{ display:grid; align-items:center; gap:10px; cursor:pointer; list-style:none; border-radius:12px; -webkit-user-select:none; user-select:none; }
html body .bl .bl-card-sum::-webkit-details-marker, html body .bl .bl-hgroup-sum::-webkit-details-marker{ display:none; }
html body .bl .bl-card-sum:hover, html body .bl .bl-hgroup-sum:hover{ background:rgba(255,255,255,.035); }
html body .bl .bl-card-sum{ grid-template-columns:22px minmax(0,1fr) auto; padding:12px 14px; }
html body .bl .bl-chev{ display:grid; place-items:center; width:22px; height:22px; color:var(--dj-mut2); transition:transform .2s ease; }
html body .bl .bl-chev svg{ width:18px; height:18px; }
html body .bl details[open] > summary .bl-chev{ transform:rotate(180deg); }
html body .bl .bl-card-id{ min-width:0; display:flex; flex-direction:column; gap:3px; }
html body .bl .bl-card-id b{ font-size:15px; font-weight:800; color:#fff !important; }
html body .bl .bl-card-id small{ display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px; font-size:12px; color:var(--dj-mut) !important; }
html body .bl .bl-st{ font-style:normal; font-weight:700; white-space:nowrap; }
html body .bl .bl-sub-name .bl-st{ font-size:12px; letter-spacing:0; }
html body .bl .bl-st::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:currentColor; vertical-align:1px; }
html body .bl .bl-st.is-running{ color:var(--dj-amber) !important; }
html body .bl .bl-st.is-sealed{ color:#8fb3f0 !important; }
html body .bl .bl-card .bl-buy-list{ padding:0 14px 4px; }
/* jeu dans un mois d'achat : bandeau discret qui se déroule (ouvert d'office s'il est seul) */
html body .bl .bl-sub{ border-top:1px solid var(--dj-line); }
html body .bl .bl-sub-sum{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 14px;
  cursor:pointer; list-style:none; background:rgba(255,255,255,.018); -webkit-user-select:none; user-select:none; }
html body .bl .bl-sub-sum::-webkit-details-marker{ display:none; }
html body .bl .bl-sub-sum:hover{ background:rgba(255,255,255,.04); }
html body .bl .bl-sub-sum .bl-chev svg{ width:16px; height:16px; }
html body .bl .bl-sub-name{ min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; font-size:13.5px; font-weight:800; color:#fff !important; }
html body .bl .bl-sub-name small{ font-size:12px; font-weight:500; letter-spacing:0; color:var(--dj-mut) !important; }
html body .bl .bl-sub-res{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
html body .bl .bl-card .bl-buy-list li:last-child .bl-buy{ border-bottom:0; }
/* état d'une session : pas ouvert (bleu), en cours (ambre), terminée (vert) — étiquette + icône */
html body .bl .bl-tag.is-running{ background:rgba(232,162,74,.14); color:var(--dj-amber); }
html body .bl .bl-tag.is-running::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:currentColor; vertical-align:1px; }
html body .bl .bl-tag.is-done{ background:rgba(74,222,128,.12); color:var(--dj-green); }
html body .bl .bl-tag.is-done::before{ content:"\2713"; margin-right:4px; }
html body .bl .bl-st-sealed .bl-ico{ color:#8fb3f0; border-color:rgba(79,134,224,.4); background:rgba(79,134,224,.08); }
html body .bl .bl-st-running .bl-ico{ color:var(--dj-amber); border-color:rgba(232,162,74,.5); background:rgba(232,162,74,.08); }
html body .bl .bl-st-done .bl-ico{ color:var(--dj-green); border-color:rgba(74,222,128,.4); background:rgba(74,222,128,.07); }
html body .bl .cv-kicker .bl-tag{ vertical-align:1px; }

/* bouton flottant « Ajouter un achat » */
html body .bl-fab{ position:fixed; right:max(20px, calc((100vw - 1180px) / 2)); bottom:28px; z-index:60; display:inline-flex; align-items:center; gap:9px;
  height:50px; padding:0 22px; border:0 !important; border-radius:14px; cursor:pointer;
  background:var(--dj-red) !important; color:#fff !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:14.5px !important; font-weight:800 !important; box-shadow:0 14px 34px rgba(224,48,58,.38); }
html body .bl-fab svg{ width:18px; height:18px; }
html body .bl-fab:hover{ filter:brightness(1.08); }
html body.bl-locked{ overflow:hidden; }

/* boutons secondaires / danger */
html body .bl-btn2, html body .bl .bl-btn2{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 16px; border-radius:11px; cursor:pointer;
  border:1px solid var(--dj-line2) !important; background:rgba(255,255,255,.04) !important; color:#fff !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:13.5px !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; }
html body .bl-btn2:hover{ background:rgba(255,255,255,.08) !important; }
html body .bl .bl-danger{ height:40px; padding:0 14px; border-radius:10px; cursor:pointer; border:1px solid rgba(248,113,113,.4) !important; background:rgba(248,113,113,.08) !important;
  color:#f87171 !important; font-weight:700 !important; font-size:13px !important; }

/* ---------- feuille « Ajouter un achat » ---------- */
/* Au-dessus de tout (barre du bas, bandeau d'installation) ; la barre du bas est masquée
   tant que la feuille est ouverte, sinon elle cachait le bouton « Enregistrer ». */
html body.bl-locked .bottom-nav, html body.bl-locked .pwa-banner{ display:none !important; }
html body .bl-backdrop{ position:fixed; inset:0; z-index:100000; background:rgba(5,6,8,.66); opacity:0; transition:opacity .25s; }
html body .bl-backdrop.open{ opacity:1; }
html body .bl-sheet{ position:fixed; z-index:100001; left:50%; bottom:0; width:min(560px, 100%); max-height:92vh; display:flex; flex-direction:column;
  transform:translate(-50%, 100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  border-radius:22px 22px 0 0; background:#101218; border:1px solid var(--dj-line2); border-bottom:0; box-shadow:0 -24px 70px rgba(0,0,0,.6);
  font-family:'Inter',system-ui,sans-serif; color:var(--dj-txt); }
html body .bl-sheet.open{ transform:translate(-50%, 0); }
@media (min-width:821px){
  html body .bl-sheet{ bottom:auto; top:50%; transform:translate(-50%, -46%); opacity:0; border-radius:20px; border-bottom:1px solid var(--dj-line2); transition:transform .25s, opacity .25s; }
  html body .bl-sheet.open{ transform:translate(-50%, -50%); opacity:1; }
}
html body .bl-sheet-in{ overflow-y:auto; overscroll-behavior:contain; padding:10px 18px calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:18px; }
html body .bl-grip{ width:40px; height:4px; margin:0 auto; border-radius:9px; background:var(--dj-line2); }
@media (min-width:821px){ html body .bl-grip{ display:none; } html body .bl-sheet-in{ padding-top:20px; } }
html body .bl-sheet-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
html body .bl-sheet-title{ margin:0 !important; font-family:var(--impact) !important; font-weight:400 !important; font-size:26px !important; letter-spacing:.5px !important; text-transform:uppercase !important; color:#fff !important; }
html body .bl-x{ display:grid; place-items:center; width:34px; height:34px; border-radius:10px; cursor:pointer; border:1px solid var(--dj-line2) !important; background:none !important; color:var(--dj-mut2) !important; }
html body .bl-x svg{ width:15px; height:15px; }
html body .bl-q{ display:flex; flex-direction:column; gap:9px; }
html body .bl-q-label{ display:flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dj-mut2); }
/* libellé d'étape mis dans une balise (il change entre achat et vente) : sans ça, une règle
   générale du thème le repeignait en sombre */
html body .bl-q-label > span:not(.bl-n){ color:inherit !important; }
html body .bl-q-label em{ margin-left:auto; font-style:normal; font-weight:600; letter-spacing:0; text-transform:none; color:#6f7689; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%; }
html body .bl-n{ display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:var(--dj-red); color:#fff; font-size:11px; letter-spacing:0; }
html body .bl-chips{ display:flex; flex-wrap:wrap; gap:6px; }
html body .bl-chip{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--dj-line2) !important; background:rgba(255,255,255,.03) !important; color:var(--dj-mut2) !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:13px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important; }
html body .bl-chip:hover{ color:#fff !important; border-color:rgba(255,255,255,.28) !important; }
html body .bl-chip.is-on{ border-color:var(--dj-red) !important; background:rgba(224,48,58,.16) !important; color:#fff !important; }
html body .bl-chip.is-sm{ height:28px; padding:0 11px; font-size:12px !important; }
/* Champ date natif invisible : la puce ouvre le sélecteur (bilan.js) et affiche la date choisie. */
html body .bl-datechip{ position:relative; }
html body .bl-datechip input{ position:absolute !important; left:0; bottom:0; width:1px !important; height:1px !important; min-width:0 !important;
  padding:0 !important; border:0 !important; opacity:0 !important; pointer-events:none; }
html body .bl-select{ height:44px; padding:0 10px; }
/* choix du set : recherche + suggestions (code du set, nom FR et EN, année) */
html body .bl-search input:disabled{ opacity:.55; cursor:not-allowed; }
/* champs de recherche : pas de cadre du thème au focus (il dessinait une boîte dans la boîte),
   le contour du champ passe en ambre ; croix native (bleue) masquée */
html body .bl-search input:focus{ outline:none !important; box-shadow:none !important; border:0 !important; background:none !important; }
html body .bl-search:focus-within{ border-color:var(--dj-amber); }
html body .bl-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; display:none; }
html body .bl-setlist{ max-height:250px; margin-top:-2px !important; }
html body .bl-setrow{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; padding:9px 8px; border-radius:10px; cursor:pointer; text-align:left;
  border:0 !important; border-bottom:1px solid var(--dj-line) !important; background:none !important; color:inherit !important; font:inherit !important; }
html body .bl-setrow:hover, html body .bl-setrow.is-active{ background:rgba(255,255,255,.06) !important; }
html body .bl-setrow.is-picked{ border:1px solid var(--dj-line2) !important; background:rgba(255,255,255,.03) !important; padding:10px 12px; }
html body .bl-setcode{ min-width:46px; padding:4px 7px; border-radius:7px; background:rgba(224,48,58,.15); text-align:center; white-space:nowrap;
  font-family:var(--impact); font-size:13px; letter-spacing:.4px; color:#fff; }
html body .bl-setname{ min-width:0; font-size:13.5px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html body .bl-setname small{ display:block; font-size:11.5px; font-weight:500; color:var(--dj-mut); overflow:hidden; text-overflow:ellipsis; }
html body .bl-setyear{ font-size:12px; font-variant-numeric:tabular-nums; color:var(--dj-mut); }
html body .bl-setchange{ font-size:12px; font-weight:700; color:var(--dj-mut2); }
html body .bl-select:disabled{ opacity:.5; }
/* Listes déroulantes (jeu, set, devise) : la liste native s'ouvrait en blanc avec un texte gris.
   color-scheme:dark = liste native sombre (Chrome, Android, Edge) ; options colorées en repli. */
html body .bl-sheet select, html body .bl select{ color-scheme:dark;
  background-color:#14161d !important; color:#fff !important; }
html body .bl-sheet select option, html body .bl select option{ background-color:#14161d; color:#fff; }
html body .bl-sheet select option:disabled, html body .bl-sheet select option[value=""]{ color:#959bab; }
html body .bl-search{ display:flex; align-items:center; gap:9px; height:44px; padding:0 12px; border:1px solid var(--dj-line2); border-radius:12px; background:rgba(255,255,255,.03); color:var(--dj-mut); }
html body .bl-search svg{ width:16px; height:16px; flex:0 0 auto; }
html body .bl-search input{ flex:1 1 auto; min-width:0; height:100%; border:0 !important; background:none !important; outline:0; box-shadow:none !important; color:#fff !important; font-size:14px !important; }
html body .bl-results{ margin:0; padding:0; list-style:none; max-height:280px; overflow-y:auto; }
html body .bl-res{ display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:11px; align-items:center; width:100%; padding:8px 6px; border-radius:10px; cursor:pointer; text-align:left;
  border:0 !important; border-bottom:1px solid var(--dj-line) !important; background:none !important; color:inherit !important; font:inherit !important; }
html body .bl-res:hover{ background:rgba(255,255,255,.04) !important; }
html body .bl-res img, html body .bl-res-noimg{ width:34px; height:47px; object-fit:cover; border-radius:5px; border:1px solid var(--dj-line2); background:rgba(255,255,255,.04); }
html body .bl-res-id{ min-width:0; }
html body .bl-res-id b{ display:block; font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html body .bl-res-id small{ display:block; font-size:11.5px; color:var(--dj-mut); }
html body .bl-res-v{ text-align:right; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--dj-amber); }
html body .bl-res-v em{ display:block; font-style:normal; font-size:11px; font-weight:700; color:var(--dj-mut2); }
html body .bl-res.is-added{ background:rgba(74,222,128,.08) !important; }
html body .bl-res.is-added .bl-res-v em{ color:#4ade80; }
html body .bl-res-empty{ padding:12px 4px; font-size:13px; color:var(--dj-mut); }
html body .bl-picked .bl-results{ max-height:none; }
/* choix de la version d'une carte (Normal, Holofoil, Reverse Holofoil…) */
html body .bl-vpick{ display:flex; flex-direction:column; gap:8px; margin:4px 0 8px; padding:10px 12px; list-style:none;
  border:1px dashed rgba(232,162,74,.45); border-radius:12px; background:rgba(232,162,74,.05); }
html body .bl-vpick-lbl{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dj-amber); }
html body .bl-vchip b{ margin-left:2px; font-weight:800; color:var(--dj-amber); }
html body .bl-vchip.is-added{ border-color:#4ade80 !important; background:rgba(74,222,128,.12) !important; }
html body .bl .bl-var, html body .bl-sheet .bl-var{ font-style:normal; color:var(--dj-amber); }
/* carte d'un sous-set rangé à part par TCGplayer (« Classic Collection »…) */
html body .bl .bl-settag, html body .bl-sheet .bl-settag{ display:inline-block; font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.02em; line-height:1.5; padding:0 6px; margin-right:2px; border-radius:6px; vertical-align:1px; color:var(--dj-gold) !important; background:rgba(255,207,92,.12); border:1px solid rgba(255,207,92,.35); white-space:nowrap; }
/* « Nouvelle » / « Déjà ×2 » dans la liste de cartes d'une session : savoir tout de suite si la
   carte tirée manque à la collection (toutes versions confondues) */
html body .bl .bl-own, html body .bl-sheet .bl-own{ display:inline-block; font-style:normal; font-size:10.5px; font-weight:800; line-height:1.5;
  padding:0 6px; margin-right:5px; border-radius:6px; vertical-align:1px; white-space:nowrap;
  color:var(--dj-mut2) !important; background:rgba(255,255,255,.06); border:1px solid var(--dj-line2); }
html body .bl .bl-own.is-new, html body .bl-sheet .bl-own.is-new{ color:#4ade80 !important;
  background:rgba(74,222,128,.13); border-color:rgba(74,222,128,.45); }
html body .bl .bl-own.is-part, html body .bl-sheet .bl-own.is-part{ color:#ffcf5c !important;
  background:rgba(255,207,92,.12); border-color:rgba(255,207,92,.4); }
/* marque d'une VERSION dans « Quelle version ? » : « Nouvelle » ou « ×2 » */
html body .bl .bl-vown, html body .bl-sheet .bl-vown{ font-style:normal; margin-left:7px; font-size:11px; font-weight:800;
  color:var(--dj-mut) !important; }
html body .bl .bl-vown.is-new, html body .bl-sheet .bl-vown.is-new{ color:#4ade80 !important; }
html body .bl-other .au-input{ height:44px; }
html body .bl-pricerow{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:stretch; }
html body .bl-stepper{ display:flex; align-items:center; border:1px solid var(--dj-line2); border-radius:12px; overflow:hidden; }
html body .bl-stepper button{ width:36px; height:50px; border:0 !important; cursor:pointer; background:rgba(255,255,255,.04) !important; color:#fff !important; font-size:18px !important; font-weight:700 !important; }
html body .bl-stepper input{ width:40px; height:50px; border:0 !important; background:none !important; text-align:center; color:#fff !important; font-size:16px !important; font-weight:800 !important; -moz-appearance:textfield; box-shadow:none !important; }
html body .bl-stepper input::-webkit-outer-spin-button, html body .bl-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
html body .bl-price{ display:flex; align-items:center; height:52px; padding:0 14px; border:1px solid var(--dj-amber); border-radius:12px; background:rgba(232,162,74,.06); }
html body .bl-price input{ width:100%; min-width:0; border:0 !important; background:none !important; outline:0; box-shadow:none !important; font-size:22px !important; font-weight:800 !important; font-variant-numeric:tabular-nums; color:#fff !important; }
html body .bl-price input::placeholder{ color:#5d6373; }
html body .bl-cur{ display:flex; gap:2px; padding:3px; border:1px solid var(--dj-line2); border-radius:12px; background:rgba(255,255,255,.03); }
html body .bl-cur button{ width:38px; border:0 !important; border-radius:9px; cursor:pointer; background:none !important; color:var(--dj-mut) !important; font-size:16px !important; font-weight:800 !important; }
html body .bl-cur button.is-on{ background:rgba(255,255,255,.12) !important; color:#fff !important; }
html body .bl-hint{ margin:0 !important; font-size:12.5px; color:var(--dj-mut) !important; }
html body .bl-hint b{ color:var(--dj-amber); font-weight:700; }
html body .bl-switch-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--dj-line); border-radius:12px; background:rgba(255,255,255,.02); cursor:pointer; }
html body .bl-switch-row b{ display:block; font-size:13.5px; color:#fff; }
html body .bl-switch-row small{ display:block; font-size:12px; color:var(--dj-mut); }
/* Interrupteur : le thème impose un fond blanc aux cases à cocher, d'où les !important. */
html body .bl-switch{ -webkit-appearance:none !important; appearance:none !important; position:relative; flex:0 0 auto; width:44px !important; height:26px !important; min-width:44px;
  margin:0 0 0 auto !important; padding:0 !important; border:0 !important; border-radius:99px !important; box-shadow:none !important; cursor:pointer;
  background:rgba(255,255,255,.16) !important; transition:background .18s; }
html body .bl-switch::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .18s; }
html body .bl-switch:checked{ background:var(--dj-red) !important; }
html body .bl-switch:checked::after{ transform:translateX(18px); }
html body .bl-switch:focus-visible{ outline:2px solid var(--dj-amber); outline-offset:2px; }
html body .bl-error{ margin:0 !important; padding:10px 12px; border-radius:10px; background:rgba(248,113,113,.1); color:#f87171 !important; font-size:13px; font-weight:600; }
html body .bl-save{ width:100%; }

/* ---------- page d'un achat / session d'ouverture ---------- */
html body .bl.bl-sess{ max-width:780px; display:flex; flex-direction:column; gap:26px; }
html body .bl .bl-back{ align-self:flex-start; font-size:13px; font-weight:700; color:var(--dj-mut2) !important; text-decoration:none !important; }
html body .bl .bl-back:hover{ color:#fff !important; }
html body .bl .bl-sess-head .cv-kicker{ margin-bottom:8px !important; }
html body .bl .bl-sess-title{ margin:0 0 8px !important; font-size:clamp(30px,5vw,46px) !important; }
html body .bl .bl-sess-sub{ margin:0 !important; font-size:14px; color:var(--dj-mut2) !important; }
html body .bl .bl-gauge{ display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:16px; background:#14161d; border:1px solid var(--dj-line); }
html body .bl .bl-gauge-top{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; }
html body .bl .bl-gauge-big{ font-size:30px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; color:#fff; }
html body .bl .bl-gauge-big small{ font-size:15px; font-weight:700; color:var(--dj-mut); }
html body .bl .bl-gauge-pct{ font-size:14px; font-weight:800; color:var(--dj-amber); }
html body .bl .bl-track{ position:relative; height:12px; border-radius:99px; background:rgba(255,255,255,.07); }
html body .bl .bl-track i{ position:absolute; inset:0 auto 0 0; border-radius:99px; background:linear-gradient(90deg, var(--dj-amber), var(--dj-gold)); transition:width .35s; }
html body .bl .bl-goal{ position:absolute; right:0; top:-4px; bottom:-4px; width:2px; border-radius:2px; background:#fff; }
html body .bl .bl-gauge-hint{ display:flex; justify-content:space-between; gap:10px; margin:0 !important; font-size:13px; color:var(--dj-mut) !important; }
html body .bl .bl-gauge-hint b{ color:#fff; }
html body .bl .bl-notice{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 18px; padding:14px 16px; border-radius:14px; border:1px dashed rgba(79,134,224,.45); background:rgba(79,134,224,.06); }
html body .bl .bl-notice p{ margin:0 !important; font-size:13.5px; color:var(--dj-mut2) !important; max-width:52ch; }
html body .bl .bl-notice .au-submit{ width:auto; margin:0; }
html body .bl .bl-addhit{ display:flex; flex-direction:column; gap:10px; }
html body .bl .bl-addhit .bl-results{ max-height:380px; }     /* toutes les cartes du set : liste plus haute */
html body .bl .bl-hit-tools{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; }
html body .bl .bl-hit-btns{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
html body .bl .bl-sort{ flex:0 0 auto; }
/* « Voir toutes les cartes » : la liste du set est masquée tant qu'on ne la demande pas */
html body .bl .bl-showall{ height:30px !important; padding:0 11px !important; font-size:12.5px !important; white-space:nowrap; }
html body .bl .bl-sort button{ width:auto !important; height:30px; padding:0 11px !important; font-size:12.5px !important; font-weight:700 !important; }
html body .bl .bl-del-form .bl-check{ flex:1 1 100%; }
/* case « pas encore ouvert » du formulaire de modification : case et texte sur une ligne
   (sinon elle héritait de la mise en colonne des champs du formulaire) */
html body .bl .bl-edit-form > label.bl-check{ flex-direction:row; align-items:center; gap:9px; font-size:13px; font-weight:500; color:var(--dj-mut2); }
html body .bl .bl-check{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--dj-mut2); cursor:pointer; }
html body .bl .bl-check input{ width:17px; height:17px; accent-color:var(--dj-red); }
html body .bl .bl-hits-sec, html body .bl .bl-share-sec{ display:flex; flex-direction:column; gap:10px; }
html body .bl .bl-hits{ margin:0; padding:0; list-style:none; }
html body .bl .bl-hit{ display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:6px 12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--dj-line); }
html body .bl .bl-thumb{ width:38px; height:53px; object-fit:cover; border-radius:5px; border:1px solid var(--dj-line2); background:rgba(255,255,255,.04); }
html body .bl .bl-hit-id{ min-width:0; font-size:13.5px; font-weight:700; color:#fff; }
html body .bl .bl-hit-id a{ color:#fff !important; text-decoration:none !important; }
html body .bl .bl-hit-id a:hover{ text-decoration:underline !important; }
html body .bl .bl-hit-id small{ display:block; font-size:11.5px; font-weight:500; color:var(--dj-mut); }
html body .bl .bl-qty{ display:none; align-items:center; gap:2px; border:1px solid var(--dj-line2); border-radius:9px; grid-column:2 / -1; justify-self:start; }
html body .bl .is-editing .bl-hit .bl-qty{ display:inline-flex; }
html body .bl .bl-hit-top{ display:block; }
html body .bl .bl-hit-top .bl-qty-tag{ display:inline-block; margin-left:7px; vertical-align:1px; }
html body .bl .bl-qty b{ min-width:22px; text-align:center; font-size:13px; font-variant-numeric:tabular-nums; }
html body .bl .bl-qbtn{ width:28px; height:28px; border:0 !important; background:none !important; cursor:pointer; color:var(--dj-mut2) !important; font-size:15px !important; font-weight:700 !important; }
html body .bl .bl-qbtn:hover{ color:#fff !important; }
html body .bl .bl-hit-v{ min-width:74px; text-align:right; font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--dj-amber); }
/* « Mes hits » rangés par RARETÉ (couleur du palier, comme les boutons de rareté des pages de jeu) */
html body .bl .bl-hits-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:32px; }
html body .bl .bl-edit-hits{ height:32px !important; padding:0 12px !important; font-size:12.5px !important; }
html body .bl .bl-edit-hits[aria-pressed="true"]{ border-color:rgba(232,162,74,.6) !important; color:var(--dj-amber) !important; }
html body .bl .bl-hgroups{ display:flex; flex-direction:column; gap:8px; }
html body .bl .bl-hgroup-sum{ grid-template-columns:22px minmax(0,1fr) auto auto; padding:10px 12px; }
html body .bl .bl-hgroup-name{ min-width:0; line-height:1.25; overflow-wrap:break-word; font-size:14px; font-weight:800; --tier:var(--dj-t-common); color:var(--tier) !important; }
html body .bl .bl-hgroup-sum[data-tier="chase"] .bl-hgroup-name{ --tier:var(--dj-t-chase); }
html body .bl .bl-hgroup-sum[data-tier="secret"] .bl-hgroup-name{ --tier:var(--dj-t-secret); }
html body .bl .bl-hgroup-sum[data-tier="super"] .bl-hgroup-name{ --tier:var(--dj-t-super); }
html body .bl .bl-hgroup-sum[data-tier="rare"] .bl-hgroup-name{ --tier:var(--dj-t-rare); }
html body .bl .bl-hgroup-sum[data-tier="uncommon"] .bl-hgroup-name{ --tier:var(--dj-t-uncommon); }
html body .bl .bl-hgroup-n{ font-size:12px; white-space:nowrap; color:var(--dj-mut) !important; }
html body .bl .bl-hgroup-v{ min-width:70px; text-align:right; white-space:nowrap; font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--dj-amber) !important; }
html body .bl .bl-hgroup .bl-hits{ padding:0 12px 2px; border-top:1px solid var(--dj-line); }
html body .bl .bl-hgroup .bl-hit:last-child{ border-bottom:0; }
/* session terminée : vrac en lecture seule, « Reprendre la session » */
html body .bl .bl-bulk-ro{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 0; padding:12px 0; }
html body .bl .bl-bulk-ro span b{ display:block; font-size:13.5px; color:#fff; }
html body .bl .bl-bulk-ro span small{ display:block; font-size:12px; color:var(--dj-mut); }
html body .bl .bl-bulk-ro > b{ font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--dj-amber); }
html body .bl .bl-finish .bl-btn2{ width:100%; height:44px; }
html body .bl .bl-bulk{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:6px; padding:12px 0; }
html body .bl .bl-bulk label b{ display:block; font-size:13.5px; color:#fff; }
html body .bl .bl-bulk label small{ display:block; font-size:12px; color:var(--dj-mut); }
html body .bl .bl-bulk-in{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
html body .bl .bl-bulk-in .au-input{ width:110px; height:40px; text-align:right; }
html body .bl .bl-bulk-in em{ font-style:normal; font-weight:700; color:var(--dj-mut2); }
html body .bl .bl-share-actions{ display:flex; flex-wrap:wrap; gap:10px; }
html body .bl .bl-share-actions .au-submit{ width:auto; margin:0; }
/* formulaire « Modifier l'achat » : une colonne ; quantité, prix total et devise sur UNE ligne,
   comme dans la feuille d'ajout (le « € » débordait auparavant sur le champ Quantité) */
html body .bl .bl-edit-form{ display:flex; flex-direction:column; gap:16px; max-width:560px; }
html body .bl .bl-edit-form > label{ display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; color:var(--dj-mut2); }
html body .bl .bl-edit-form .au-input{ height:44px; }
html body .bl .bl-edit-form .bl-q{ gap:8px; }
html body .bl .bl-edit-form .au-submit{ margin:0; }
html body .bl-pricerow.is-nostep{ grid-template-columns:minmax(0,1fr) auto; }
/* « Terminer la session » : l'action principale de la page, sous les hits et le vrac */
html body .bl .bl-finish{ flex:1 1 100%; display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-top:10px; padding-top:18px; border-top:1px solid var(--dj-line); }
html body .bl .bl-finish .au-submit{ width:100%; margin:0; }
html body .bl .bl-finish small{ font-size:12.5px; text-align:center; color:var(--dj-mut); }
html body .bl .bl-del-form{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--dj-line); }
html body .bl .bl-del-form small{ font-size:12px; color:var(--dj-mut); }

/* points d'entrée : fiche carte, page de set */
html body .cd-bought-link, html body .set-info-bought{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; font-weight:700;
  color:var(--dj-amber) !important; text-decoration:none !important; }
html body .cd-bought-link svg{ width:14px; height:14px; }
html body .cd-bought-link:hover, html body .set-info-bought:hover{ text-decoration:underline !important; }

@media (max-width:820px){
  html body .bl .bl-cols{ grid-template-columns:minmax(0,1fr); gap:28px; }
  html body .bl .bl-steps{ grid-template-columns:minmax(0,1fr); }
  html body .bl-fab{ left:16px; right:16px; justify-content:center; bottom:calc(var(--bnav-h, 62px) + 14px + env(safe-area-inset-bottom)); }
  html body .bl .bl-hit{ grid-template-columns:34px minmax(0,1fr) auto; }
  html body .bl .bl-hit .bl-hit-v{ min-width:0; font-size:13px; }
  html body .bl .bl-buy-sub{ flex-wrap:wrap; row-gap:4px; white-space:normal; }
  html body .bl .bl-buy-subtxt{ flex:1 1 100%; }
  html body .bl .bl-buy-subtxt + .bl-tag{ margin-left:0; }
  html body .bl .bl-hgroup-sum{ gap:8px; padding:10px; }
  html body .bl .bl-hgroup .bl-hits{ padding:0 10px 2px; }
  html body .bl .bl-card-sum{ padding:12px; }
  html body .bl .bl-card .bl-buy-list{ padding:0 12px 4px; }
  html body .bl .bl-sub-sum{ padding:9px 12px; }
  html body .bl .bl-thumb{ width:34px; height:47px; }
  html body .bl-sheet{ max-height:94vh; }
}
@media (max-width:420px){
  /* quantité, prix et devise restent sur une seule ligne : contrôles resserrés */
  html body .bl-stepper button{ width:30px; }
  html body .bl-stepper input{ width:30px; }
  html body .bl-price{ padding:0 10px; }
  html body .bl-price input{ font-size:19px !important; }
  html body .bl-cur button{ width:32px; }
}
/* ---------- neutralise les styles génériques du thème (boutons, champs) ---------- */
html body .bl button:not(.bl-fab):not(.au-submit), html body .bl-sheet button:not(.au-submit){
  background-image:none !important; box-shadow:none !important; text-shadow:none !important; min-height:0 !important; min-width:0 !important; }
html body .bl-sheet-in{ flex:1 1 auto; min-height:0; }      /* la feuille défile au lieu de dépasser l'écran */
html body .bl-stepper input{ padding:0 !important; min-width:0 !important; min-height:0 !important; color:#fff !important; }
html body .bl .bl-qty b{ color:#fff; }
html body .bl .bl-qbtn{ width:28px !important; height:28px !important; padding:0 !important; }
html body .bl .bl-bulk label{ flex:1 1 200px; }
html body .bl .bl-bulk-in .au-input{ width:110px !important; }
html body .bl .bl-edit-form .bl-bulk-in .au-input{ width:auto !important; }
@media (min-width:821px){
  /* sur ordinateur, « Ajouter un achat » se place en haut à droite, à hauteur du titre */
  html body .bl{ position:relative; }
  html body .bl-fab{ position:absolute; top:22px; right:0; bottom:auto; }
}
/* ---------- yin-yang de l'en-tête (ambre = droppé, nuit = dépensé ; halo selon le résultat) ---------- */
html body .bl .bl-hero-row{ display:flex; align-items:center; gap:16px 28px; }
html body .bl .bl-hero-res{ flex:1 1 auto; min-width:0; }
html body .bl .bl-yy{ --yy-glow:rgba(232,162,74,.45); --yy-rim:rgba(232,162,74,.75);
  position:relative; flex:0 0 auto; width:124px; height:124px; border-radius:50%; cursor:pointer; outline:none; }
html body .bl .bl-yy.is-up{ --yy-glow:rgba(74,222,128,.4); --yy-rim:rgba(74,222,128,.7); }
html body .bl .bl-yy.is-down{ --yy-glow:rgba(248,113,113,.4); --yy-rim:rgba(248,113,113,.7); }
/* le halo sur le SEUL symbole (sur le conteneur, il débordait aussi autour de la bulle) */
html body .bl .bl-yy svg{ display:block; width:100%; height:100%; overflow:visible; transition:transform .2s;
  filter:drop-shadow(0 0 20px var(--yy-glow)) drop-shadow(0 0 2px rgba(0,0,0,.6)); }
html body .bl .bl-yy:hover svg, html body .bl .bl-yy:focus-visible svg, html body .bl .bl-yy.is-open svg{ transform:scale(1.04); }
html body .bl .bl-yy:focus-visible{ box-shadow:0 0 0 3px rgba(232,162,74,.55); }
/* bulle « Droppé / Dépensé » : survol (ordinateur), appui (mobile), focus clavier */
html body .bl .bl-yy-tip{ position:absolute; z-index:6; top:calc(100% + 10px); right:0; display:flex; flex-direction:column; gap:5px;
  padding:9px 12px; border-radius:11px; border:1px solid var(--dj-line2); background:#14161d; box-shadow:0 14px 34px rgba(0,0,0,.55);
  white-space:nowrap; font-size:12.5px; font-weight:600; line-height:1.4; color:var(--dj-mut2) !important;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility .15s; pointer-events:none; }
html body .bl .bl-yy-tip b{ margin-left:6px; font-weight:800; font-variant-numeric:tabular-nums; color:#fff !important; }
html body .bl .bl-yy-tip i{ display:inline-block; width:10px; height:10px; margin-right:7px; border-radius:50%; vertical-align:-1px; }
html body .bl .bl-yy-tip i.is-amber{ background:linear-gradient(135deg,#ffe49a,#e8a24a); }
html body .bl .bl-yy-tip i.is-night{ background:linear-gradient(135deg,#3a0f14,#140709); border:1px solid rgba(255,255,255,.22); }
html body .bl .bl-yy:hover .bl-yy-tip, html body .bl .bl-yy:focus-visible .bl-yy-tip,
html body .bl .bl-yy.is-open .bl-yy-tip{ opacity:1; visibility:visible; transform:none; }
html body .bl .bl-yy .yy-rim{ fill:none; stroke:var(--yy-rim); stroke-width:3; }
@media (max-width:820px){ html body .bl .bl-yy{ width:92px; height:92px; } }
@media (max-width:420px){ html body .bl .bl-hero-row .cv-total-val{ font-size:34px; } }

/* ---------- Dojo : publication d'une SESSION D'OUVERTURE (partagée depuis « Mon bilan ») ---------- */
html body .post-session{ margin:0 14px 12px; padding:12px 14px; border-radius:14px; border:1px solid rgba(232,162,74,.35);
  background:linear-gradient(180deg, rgba(232,162,74,.09), rgba(232,162,74,.02)); }
html body .post-session .ps-kicker{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dj-amber); }
html body .post-session .ps-title{ display:block; margin-top:2px; font-family:var(--impact); font-weight:400; font-size:21px; letter-spacing:.4px; line-height:1.1; text-transform:uppercase; color:#fff; }
html body .post-session .ps-set{ display:block; margin-top:2px; font-size:12px; color:var(--dj-mut); }
html body .post-session .ps-nums{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:10px 0 0 !important; padding-top:10px; border-top:1px solid var(--dj-line); }
html body .post-session .ps-nums dt{ margin:0 !important; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dj-mut); }
html body .post-session .ps-nums dd{ margin:2px 0 0 !important; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; color:#fff; }
html body .post-session .ps-nums dd.is-amber{ color:var(--dj-amber); }
html body .post-session .ps-nums dd.is-up{ color:#4ade80; }
html body .post-session .ps-nums dd.is-down{ color:#f87171; }
html body .post-session .ps-hits{ display:flex; gap:8px; margin-top:10px; overflow-x:auto; scrollbar-width:none; }
html body .post-session .ps-hits::-webkit-scrollbar{ display:none; }
html body .post-session .ps-hit{ flex:0 0 auto; display:flex; align-items:center; gap:8px; max-width:210px; padding:5px 10px 5px 5px; border-radius:10px; border:1px solid var(--dj-line); background:rgba(255,255,255,.04); }
html body .post-session .ps-hit img{ width:28px; height:39px; object-fit:cover; border-radius:4px; }
html body .post-session .ps-hit > span{ min-width:0; font-size:11.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; }
html body .post-session .ps-hit b{ display:block; font-size:11px; color:var(--dj-amber); }
/* fenêtre « Je l'ai pull » : ligne de résumé quand on partage une session */
html body .pm-session{ display:block; margin-top:6px; padding:6px 9px; border-radius:8px; background:rgba(232,162,74,.1); font-size:12px; font-weight:700; line-height:1.45; color:var(--dj-amber); }
html body .pm-session[hidden]{ display:none !important; }
html body .bl #bl-share-hit:disabled{ opacity:.5; cursor:not-allowed; }
@media (prefers-reduced-motion: reduce){ html body .bl-sheet, html body .bl-backdrop, html body .bl .bl-track i{ transition:none; } }

/* =====================================================================
   SCAN BÊTA (page de test cachée /scan-beta, templates/scan_beta.html)
   ===================================================================== */
html body .sb{ padding-bottom:110px; }
html body .sb .sb-hero{ display:block !important; }
html body .sb .sb-wip{ margin-top:16px; }
html body .sb .sb-lead{ max-width:62ch; margin:10px 0 0 !important; font-size:14px; line-height:1.6; color:var(--dj-mut) !important; }
html body .sb [hidden]{ display:none !important; }
html body .sb .sb-controls{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 90px; gap:10px; margin:20px 0 14px; }
html body .sb .sb-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
html body .sb .sb-field > span{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dj-mut2) !important; }
html body .sb .sb-field small{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--dj-mut) !important; }
html body .sb .sb-field select{ width:100%; height:44px; padding:0 10px; border-radius:10px; border:1px solid var(--dj-line2) !important; background:#15161c !important; color:#fff !important; font-size:14px; }
html body .sb .sb-field select option{ background:#15161c; color:#fff; }
html body .sb .sb-modes{ display:inline-flex; gap:4px; padding:4px; margin:4px 0 14px; border-radius:12px; border:1px solid var(--dj-line2); }
html body .sb .sb-mode{ min-width:110px; height:38px; padding:0 14px; border:0 !important; border-radius:9px; cursor:pointer; background:none !important; box-shadow:none !important; font-size:14px; font-weight:700; color:var(--dj-mut2) !important; }
html body .sb .sb-mode.is-on{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
html body .sb .sb-stage{ position:relative; overflow:hidden; border-radius:14px; background:#0d0e12; border:1px solid var(--dj-line2); touch-action:none; }
html body .sb #sb-cam-stage{ width:100%; max-width:520px; aspect-ratio:3 / 4; max-height:72vh; }
html body .sb #sb-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
html body .sb .sb-frame{ position:absolute; border-radius:10px; box-shadow:0 0 0 2000px rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.85); pointer-events:none; }
html body .sb #sb-cam-stage:not(.is-live) .sb-frame{ display:none; }
html body .sb .sb-frame i{ position:absolute; width:22px; height:22px; border:3px solid var(--dj-amber); }
html body .sb .sb-frame i:nth-child(1){ left:-3px; top:-3px; border-right:0; border-bottom:0; border-radius:10px 0 0 0; }
html body .sb .sb-frame i:nth-child(2){ right:-3px; top:-3px; border-left:0; border-bottom:0; border-radius:0 10px 0 0; }
html body .sb .sb-frame i:nth-child(3){ left:-3px; bottom:-3px; border-right:0; border-top:0; border-radius:0 0 0 10px; }
html body .sb .sb-frame i:nth-child(4){ right:-3px; bottom:-3px; border-left:0; border-top:0; border-radius:0 0 10px 0; }
html body .sb .sb-frame.is-drag{ pointer-events:auto; cursor:move; touch-action:none; }
html body .sb .sb-start{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:48px; padding:0 22px; border-radius:12px; cursor:pointer; border:1px solid var(--dj-line2) !important; background:#1b1c23 !important; color:#fff !important; font-size:15px; font-weight:700; box-shadow:none !important; }
html body .sb .sb-shutter{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:2; width:72px; height:72px; padding:0; border-radius:50%; cursor:pointer; border:4px solid #fff !important; background:rgba(0,0,0,.25) !important; box-shadow:0 4px 18px rgba(0,0,0,.45) !important; }
html body .sb .sb-shutter span{ display:block; width:54px; height:54px; margin:5px auto; border-radius:50%; background:var(--dj-amber); transition:transform .12s ease; }
html body .sb .sb-shutter:active span{ transform:scale(.88); }
html body .sb #sb-cam-stage:not(.is-live) .sb-shutter{ display:none; }
html body .sb .sb-torch{ position:absolute; top:12px; right:12px; z-index:2; width:44px; height:44px; padding:0; border-radius:50%; cursor:pointer; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35) !important; background:rgba(0,0,0,.45) !important; color:#fff !important; box-shadow:none !important; }
html body .sb .sb-torch svg{ width:20px; height:20px; }
html body .sb .sb-torch.is-on{ background:var(--dj-amber) !important; color:#111 !important; border-color:var(--dj-amber) !important; }
html body .sb .sb-zoom{ position:absolute; left:12px; right:68px; top:14px; z-index:2; display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background:rgba(0,0,0,.45); font-size:11px; font-weight:800; color:#fff; }
html body .sb .sb-zoom input{ flex:1; accent-color:var(--dj-amber); }
html body .sb .sb-focus-ring{ position:absolute; z-index:2; width:64px; height:64px; margin:-32px 0 0 -32px; border:2px solid var(--dj-amber); border-radius:50%; opacity:0; pointer-events:none; }
html body .sb .sb-focus-ring.is-on{ animation:sbFocus .9s ease-out forwards; }
@keyframes sbFocus{ 0%{ opacity:1; transform:scale(1.4); } 40%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(1); } }
html body .sb .sb-picks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:520px; }
html body .sb .sb-picks .sb-pick{ max-width:none; }
html body .sb .sb-pick.is-main{ border:1px solid var(--dj-amber); background:rgba(232,162,74,.1); }
html body .sb .sb-go{ width:100%; max-width:520px; margin-top:14px !important; }
html body .sb .sb-go:disabled{ opacity:.45; cursor:not-allowed; }
html body .sb .sb-pick{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; max-width:520px; height:56px; border-radius:12px; border:1px dashed var(--dj-line2); cursor:pointer; font-size:15px; font-weight:700; color:#fff; }
html body .sb .sb-pick input{ position:absolute; width:1px; height:1px; opacity:0; }
html body .sb .sb-editor{ margin-top:14px; }
html body .sb .sb-stage-photo{ max-width:100%; }
html body .sb #sb-canvas{ display:block; }
html body .sb .sb-tools{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 18px; margin-top:12px; max-width:520px; }
html body .sb .sb-range{ display:flex; flex-direction:column; gap:6px; flex:1 1 180px; font-size:12px; color:var(--dj-mut2); }
html body .sb .sb-range b{ color:#fff; }
html body .sb .sb-range input{ width:100%; accent-color:var(--dj-amber); }
html body .sb .sb-rot{ height:38px; padding:0 14px; border-radius:10px; cursor:pointer; border:1px solid var(--dj-line2) !important; background:none !important; color:#fff !important; font-size:13px; font-weight:700; box-shadow:none !important; }
html body .sb .sb-hint{ margin:8px 0 0 !important; font-size:12px; color:var(--dj-mut) !important; }
html body .sb .sb-status{ min-height:20px; margin:14px 0 0 !important; font-size:14px; font-weight:600; color:var(--dj-mut2) !important; }
html body .sb .sb-status.is-error{ color:#f87171 !important; }
html body .sb .sb-out{ margin-top:22px; }
html body .sb .sb-results{ list-style:none; margin:10px 0 0; padding:0; }
html body .sb .sb-res{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--dj-line); }
html body .sb .sb-res img{ width:64px; height:89px; object-fit:cover; border-radius:6px; background:#15161c; }
html body .sb .sb-res.is-best{ border-bottom-color:rgba(232,162,74,.45); }
html body .sb .sb-res-id{ min-width:0; display:flex; flex-direction:column; gap:2px; }
html body .sb .sb-res-id b{ font-size:15px; color:#fff; }
html body .sb .sb-res-id small{ font-size:12px; color:var(--dj-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html body .sb .sb-res-id a{ margin-top:4px; font-size:12.5px; font-weight:700; color:var(--dj-amber) !important; text-decoration:none !important; }
html body .sb .sb-res-v{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; text-align:right; font-variant-numeric:tabular-nums; }
html body .sb .sb-score{ font-size:18px; font-weight:800; color:#fff; }
html body .sb .sb-res.is-best .sb-score{ color:var(--dj-amber); }
html body .sb .sb-res-v small{ font-size:11px; color:var(--dj-mut); }
html body .sb .sb-res-v b{ margin-top:4px; font-size:13px; color:var(--dj-mut2); }
html body .sb .sb-debug{ margin-top:18px; border-top:1px solid var(--dj-line); }
html body .sb .sb-debug summary{ cursor:pointer; padding:12px 0; font-size:13px; font-weight:600; color:var(--dj-mut2); }
html body .sb .sb-debug-imgs{ display:flex; gap:14px; flex-wrap:wrap; }
html body .sb .sb-debug-imgs figure{ margin:0; }
html body .sb .sb-debug-imgs img{ width:150px; border-radius:8px; background:#15161c; display:block; }
html body .sb .sb-debug-imgs figcaption{ margin-top:6px; font-size:11.5px; color:var(--dj-mut); }
html body .sb .sb-metrics{ margin:10px 0 0 !important; font-size:12px; color:var(--dj-mut) !important; }
@media (max-width:640px){
  html body .sb .sb-controls{ grid-template-columns:minmax(0,1fr) 80px; }
  html body .sb .sb-controls .sb-field:nth-child(2){ grid-column:1 / -1; grid-row:2; }
}

/* ---------- Pages de set : le nom du set est le <h1> de la page (SEO) ----------
   Même apparence que le <span class="set-info-name"> des autres cas : on neutralise les règles
   « .hero h1 » (police Anton, capitales, grande taille). */
html body.game-page .hero h1.set-info-name,
html body.game-page h1.set-info-name{
  display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:9px !important;
  margin:0 !important; padding:0 !important; background:none !important; text-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-weight:800 !important; font-size:16px !important;
  line-height:1.25 !important; letter-spacing:normal !important; text-transform:none !important;
  color:#fff !important;
}

/* ---------- Pages de jeu : « Tous les sets » (liens vers chaque set, rangés par année) ---------- */
html body.game-page .set-dir{ margin:34px 0 0; }
html body.game-page .set-dir-head{ display:flex; align-items:center; gap:12px; padding:0 0 14px; margin:0 0 4px; border-bottom:1px solid var(--dj-line); }
html body.game-page .set-dir-head h2{
  display:flex !important; align-items:center !important; gap:12px !important; margin:0 !important;
  font-family:var(--impact) !important; font-weight:400 !important; font-size:15px !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important; line-height:1.2 !important;
  color:#fff !important;
}
html body.game-page .set-dir-head h2::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--dj-red); flex:0 0 auto; }
html body.game-page .set-dir-total{ font-size:12px; font-weight:700; color:var(--dj-mut) !important; }
html body.game-page .set-dir-year{ border-bottom:1px solid var(--dj-line); }

/* ---------- filtre « Principaux / Annexes / Tous » ----------
   Une liste de sets est surtout faite d'annexes (promos, decks, coffrets) : sur One Piece,
   17 sets sur 83 sont de vraies extensions. On n'affiche donc que les principaux a l'arrivee.
   Le masquage est purement CSS : les liens restent dans le document, donc explorables. */
html body.game-page .set-dir-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 2px; }
html body.game-page .set-dir-f{
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px !important;
  border:1px solid var(--dj-line2) !important; border-radius:999px !important;
  background:rgba(255,255,255,.03) !important; background-image:none !important; box-shadow:none !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:12.5px !important; font-weight:700 !important;
  letter-spacing:0 !important; text-transform:none !important; cursor:pointer;
  color:var(--dj-mut2) !important;
  transition:background-color .14s ease, border-color .14s ease;
}
html body.game-page .set-dir-f span{ font-size:11px; font-weight:700; opacity:.72; font-variant-numeric:tabular-nums; }
html body.game-page .set-dir-f:hover{ border-color:rgba(255,255,255,.26) !important; background:rgba(255,255,255,.06) !important; }
html body.game-page .set-dir-f.is-on{
  border-color:transparent !important; background:var(--dj-red) !important;
  color:#fff !important;
}
html body.game-page .set-dir[data-filter="principal"] .set-dir-list li:not([data-kind="principal"]),
html body.game-page .set-dir[data-filter="annexe"] .set-dir-list li[data-kind="principal"]{ display:none; }

/* Pastille de nature, sur les annexes seulement : meme en vue « Tous », on sait a quoi on a affaire. */
html body.game-page .set-dir-kind{
  flex:none; padding:1px 6px 2px; border-radius:5px; font-size:10px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  color:var(--dj-mut) !important;
}
html body.game-page .set-dir-kind[data-kind="promo"]{
  border-color:rgba(224,48,58,.36); background:rgba(224,48,58,.12);
  color:#ff8d94 !important;
}
html body.game-page .set-dir-year > summary{ display:flex; align-items:center; gap:10px; padding:13px 2px; cursor:pointer; list-style:none;
  -webkit-user-select:none; user-select:none; }
html body.game-page .set-dir-year > summary::-webkit-details-marker{ display:none; }
html body.game-page .set-dir-y{ font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; color:#fff !important; }
html body.game-page .set-dir-n{ flex:1 1 auto; font-size:12px; font-weight:700; color:var(--dj-mut) !important; }
html body.game-page .set-dir-chev{ flex:none; color:var(--dj-mut); transition:transform .18s ease; }
html body.game-page .set-dir-year[open] > summary .set-dir-chev{ transform:rotate(180deg); }
html body.game-page .set-dir-year > summary:hover .set-dir-chev{ color:#fff; }
html body.game-page .set-dir-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:2px 16px;
  margin:0 !important; padding:0 0 16px !important; list-style:none !important; }
html body.game-page .set-dir-list li{ margin:0 !important; padding:0 !important; min-width:0; list-style:none !important; }
html body.game-page .set-dir-list a{ display:flex; align-items:center; gap:9px; min-width:0; padding:8px 10px; border-radius:9px;
  text-decoration:none !important; font-size:14px; font-weight:600;
  color:var(--dj-mut2) !important; }
html body.game-page .set-dir-list a:hover{ background:rgba(255,255,255,.045); color:#fff !important; }
html body.game-page .set-dir-abbr{ flex:none; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:10.5px; font-weight:800; letter-spacing:.03em; padding:2px 7px; border-radius:6px; background:rgba(255,255,255,.07);
  color:var(--dj-mut2) !important; }
html body.game-page .set-dir-name{ min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- visuel et valeur d'un set (liste « Tous les sets ») ----------
   La ligne passe de « abreviation + nom » a « visuel + texte + valeur ». Les colonnes
   s'elargissent en consequence, sinon le nom du set n'a plus la place de s'afficher. */
html body.game-page .set-dir-list{ grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); }
html body.game-page .set-dir-img{
  flex:none; width:52px; height:33px; object-fit:contain; border-radius:5px;
  background:rgba(255,255,255,.05); box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}

/* ---------- vignette dessinee par le site ----------
   Le visuel officiel d'un set appartient a son editeur : plutot que d'aller le chercher
   ailleurs, on dessine un carre aux couleurs du jeu portant l'abreviation. Couverture 100 %,
   aucune dependance. --tint est la couleur du jeu (meme teinte que l'accent de sa page) ;
   deposer un fichier dans static/sets/<jeu>/ remplace la vignette par le vrai visuel. */
html body .set-dir-tile{
  --tint:#9aa3b5;
  display:grid; place-items:center; flex:none; text-align:center;
  font-family:'Inter', system-ui, sans-serif; font-weight:600; text-transform:uppercase;
  border:1px solid color-mix(in srgb, var(--tint) 38%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tint) 22%, transparent) 0%,
                    rgba(255,255,255,0) 62%),
    #14161c;
  color:var(--tint) !important;
}
html body .set-dir-tile{
  /* Les abreviations vont jusqu'a 10 caracteres (« DBS-B22PRE ») : la vignette est
     dimensionnee pour les tenir, sinon les pre-sorties Dragon Ball etaient coupees. */
  width:74px; height:34px; border-radius:6px; padding:0 5px;
  font-size:11px; letter-spacing:.02em; line-height:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html body.game-page .set-dir-list a:hover .set-dir-tile{
  border-color:color-mix(in srgb, var(--tint) 62%, transparent);
}
/* Teinte par jeu : la meme que l'accent de la page du jeu (index_*.html). */
html body [data-game="pokemon"], html body [data-game="pokemon-japan"]{ --tint:#ffcb05; }
html body [data-game="onepiece"]{ --tint:#00d4ff; }
html body [data-game="lorcana"]{ --tint:#8fd3ff; }
html body [data-game="magic"]{ --tint:#ff845c; }
html body [data-game="yugioh"]{ --tint:#b58cff; }
html body [data-game="dbmasters"]{ --tint:#ffd166; }
html body [data-game="dbfusion"]{ --tint:#c084fc; }

/* color-mix est recent : repli lisible pour les navigateurs qui ne le connaissent pas. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  html body .set-dir-tile{ border-color:rgba(255,255,255,.18); background:#14161c; }
}
html body.game-page .set-dir-txt{ display:flex; align-items:center; gap:9px; min-width:0; flex:1 1 auto; }
html body.game-page .set-dir-val{
  flex:none; margin-left:8px; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums;
  white-space:nowrap; color:var(--dj-amber) !important;
}
html body.game-page .set-dir-list a:hover .set-dir-val{ color:#f3c078 !important; }
html body.game-page .set-dir-ytot{
  flex:none; margin-right:4px; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--dj-amber) !important;
}
@media (max-width:520px){
  html body.game-page .set-dir-list{ grid-template-columns:1fr; }
  html body.game-page .set-dir-abbr{ max-width:74px; }
}

/* ---------- valeur du set selectionne ----------
   Pastille identique aux autres (Sortie, Cartes) : pas de fond colore, seul le chiffre
   est teinte, comme les valeurs de la liste des sets. */
html body .set-info-pill.is-val .set-info-pill-value{
  color:var(--dj-amber) !important; font-weight:800;
}

/* Mon bilan : carte achetée à l'unité (dépense simple, comptée à sa revente) */
html body .bl .bl-notice.is-held{ border-color:var(--dj-line2); background:rgba(255,255,255,.03); }
html body .bl .bl-notice a.bl-btn2{ text-decoration:none !important; }

/* ---------- MODÉRATION : signaler / bloquer (templates/_moderation.html) ---------- */
/* menu « ⋯ » d'une publication du Dojo, à droite de l'auteur */
html body .dj .post-head .post-menu{ margin-left:auto; align-self:flex-start; }
html body .dj .post-menu-pop, html body .dj .cmt-menu-pop{ min-width:170px; }
html body .dj .cmt-menu-pop button.is-danger{ color:#f87171 !important; }
/* fenêtre : feuille en bas sur mobile, boîte centrée au-delà */
html.mod-open, html.mod-open body{ overflow:hidden; }
html body .mod-layer{ position:fixed; inset:0; z-index:100070; display:flex; align-items:flex-end; justify-content:center; }
html body .mod-layer[hidden]{ display:none !important; }
html body .mod-backdrop{ position:absolute; inset:0; background:rgba(5,6,9,.72); }
html body .mod-sheet{ position:relative; width:100%; max-width:460px; max-height:92vh; overflow:auto; margin:0; padding:22px 20px calc(18px + env(safe-area-inset-bottom));
  border:1px solid var(--dj-line2); border-radius:18px 18px 0 0; background:#14161c; box-shadow:0 -18px 50px rgba(0,0,0,.55);
  font-family:'Inter',system-ui,sans-serif; color:var(--dj-mut2); }
@media (min-width:640px){
  html body .mod-layer{ align-items:center; padding:20px; }
  html body .mod-sheet{ border-radius:18px; padding:24px; }
}
html body .mod-title{ margin:0 0 4px !important; font-family:var(--impact) !important; font-weight:400 !important; font-size:20px !important;
  letter-spacing:.6px !important; text-transform:uppercase !important; color:#fff !important; }
html body .mod-sub{ margin:0 0 14px !important; font-size:13.5px !important; line-height:1.5; color:var(--dj-mut) !important; }
html body .mod-sub:empty{ display:none; }
html body .mod-reasons{ margin:0 0 14px; padding:0; border:0; display:flex; flex-direction:column; gap:6px; }
html body .mod-legend{ display:block; margin:0 0 8px; padding:0; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dj-mut) !important; }
html body .mod-reason{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--dj-line2); border-radius:10px; cursor:pointer;
  font-size:14px; font-weight:600; color:#fff !important; background:rgba(255,255,255,.02); }
html body .mod-reason:has(input:checked){ border-color:rgba(224,48,58,.7); background:rgba(224,48,58,.1); }
html body .mod-reason input{ width:16px; height:16px; margin:0; accent-color:var(--dj-red); flex:none; }
html body .mod-details{ display:block; width:100%; box-sizing:border-box; min-height:70px; margin:0 0 12px; padding:10px 12px; resize:vertical;
  border:1px solid var(--dj-line2); border-radius:10px; background:#0e1015; color:#fff; font:14px/1.45 'Inter',system-ui,sans-serif; }
html body .mod-details:focus{ outline:none; border-color:rgba(255,255,255,.35); }
html body .mod-note{ margin:0 0 14px !important; font-size:12.5px !important; line-height:1.5; color:var(--dj-mut) !important; }
html body .mod-error{ margin:0 0 12px !important; font-size:13px !important; font-weight:600; color:#f87171 !important; }
html body .mod-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
html body .mod-btn{ display:inline-flex; align-items:center; justify-content:center; height:42px; min-height:0 !important; margin:0 !important; padding:0 16px !important;
  border:1px solid var(--dj-line2) !important; border-radius:11px !important; background:rgba(255,255,255,.04) !important; box-shadow:none !important; cursor:pointer;
  font:700 13.5px 'Inter',system-ui,sans-serif !important; text-transform:none !important; letter-spacing:0 !important; color:#fff !important; }
html body .mod-btn:hover{ background:rgba(255,255,255,.08) !important; }
html body .mod-btn.is-danger{ border-color:transparent !important; background:var(--dj-red) !important; }
html body .mod-btn.is-danger:hover{ background:#f0434d !important; }
html body .mod-btn:disabled{ opacity:.6; cursor:default; }
html body .mod-toast{ position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom)); z-index:100080; transform:translateX(-50%);
  max-width:calc(100vw - 32px); padding:11px 16px; border:1px solid var(--dj-line2); border-radius:12px; background:#1b1e26;
  box-shadow:0 12px 30px rgba(0,0,0,.5); font:600 13.5px 'Inter',system-ui,sans-serif; color:#fff; }
html body .mod-toast[hidden]{ display:none !important; }
/* profil public : signaler / bloquer / débloquer */
html body .pf .pf-mod{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; padding:16px 0 0; }
html body .pf .pf-mod-btn{ display:inline-flex; align-items:center; gap:7px; height:38px; min-height:0 !important; margin:0 !important; padding:0 14px !important;
  border:1px solid var(--dj-line2) !important; border-radius:10px !important; background:rgba(255,255,255,.04) !important; box-shadow:none !important; cursor:pointer;
  font:700 13px 'Inter',system-ui,sans-serif !important; text-transform:none !important; letter-spacing:0 !important; color:var(--dj-mut2) !important; }
html body .pf .pf-mod-btn svg{ width:15px; height:15px; }
html body .pf .pf-mod-btn:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
html body .pf .pf-mod-btn.is-danger{ color:#f87171 !important; }
html body .pf .pf-blocked{ flex:1 1 100%; margin:0 !important; font-size:13.5px !important; color:var(--dj-mut2) !important; }
/* « Mon compte » : membres bloqués */
html body .ax .ax-blocked{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
html body .ax .ax-blocked li{ padding:0 0 10px; border-bottom:1px solid var(--dj-line); }
html body .ax .ax-blocked li:last-child{ padding-bottom:0; border-bottom:0; }
html body .ax .ax-note{ margin:0 !important; font-size:13.5px !important; line-height:1.5; color:var(--dj-mut) !important; }

/* Lien Instagram : pied de page et page contact (icône alignée sur le texte) */
html body .footer .footer-links a.footer-ig{ display:inline-flex; align-items:center; gap:7px; }
html body .footer .footer-links a.footer-ig svg{ width:16px; height:16px; flex:none; }
html body .ctc .ctc-info a.ctc-ig{ display:inline-flex; align-items:center; gap:8px; }
html body .ctc .ctc-info a.ctc-ig svg{ width:17px; height:17px; flex:none; }

/* Recherche sur TOUS les sets (sans set choisi) : le code du set et le numero redeviennent
   indispensables pour savoir d'ou vient chaque carte — on les remet, meme sur mobile. */
@media (max-width:639px){
  html body.game-page .grid.mtcg-compact.is-anyset .card .mtcg-gi .cc-set{ display:block !important; }
}

/* ---------- LISTE D'ENVIES : bouton de la fiche carte + page /wishlist ---------- */
html body.game-page .cd-collect .cd-wish{
  display:inline-flex; align-items:center; gap:9px; width:auto; align-self:flex-start; margin:12px 0 0; padding:11px 15px;
  min-height:0 !important; cursor:pointer;
  border:1px solid var(--dj-line2) !important; border-radius:11px !important;
  background:rgba(255,255,255,.04) !important; box-shadow:none !important;
  font:700 13.5px 'Inter',system-ui,sans-serif !important; letter-spacing:0 !important; text-transform:none !important;
  color:var(--dj-mut2) !important;
}
html body.game-page .cd-collect .cd-wish:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
html body.game-page .cd-collect .cd-wish .cd-wish-ic{ width:17px; height:17px; flex:none; transition:transform .18s ease; }
html body.game-page .cd-collect .cd-wish.is-on{
  border-color:rgba(224,48,58,.45) !important; background:rgba(224,48,58,.12) !important;
  color:#f3a6ab !important;
}
html body.game-page .cd-collect .cd-wish.is-on .cd-wish-ic{ fill:#e0303a; stroke:#e0303a; transform:scale(1.08); }

html body .wl .cv-empty{ text-align:center; }
html body .wl .wl-empty-ic{ display:grid; place-items:center; width:64px; height:64px; margin:0 auto 16px;
  border-radius:50%; border:1px solid var(--dj-line2); background:rgba(224,48,58,.10); color:#e0303a; }
html body .wl .wl-empty-ic svg{ width:30px; height:30px; }
html body .wl .wl-owned{ background:rgba(255,255,255,.14) !important; color:#fff !important; }
html body .wl .wl-actions{ display:flex; align-items:center; gap:8px; margin:8px 0 0; }
html body .wl .wl-actions form{ margin:0; }
html body .wl .wl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; min-height:0 !important;
  margin:0 !important; padding:0 12px !important; cursor:pointer;
  border:1px solid var(--dj-line2) !important; border-radius:9px !important; background:rgba(255,255,255,.04) !important;
  box-shadow:none !important; font:700 12.5px 'Inter',system-ui,sans-serif !important; text-transform:none !important;
  letter-spacing:0 !important; color:#fff !important;
}
html body .wl .wl-btn svg{ width:14px; height:14px; flex:none; }
html body .wl .wl-btn:hover{ background:rgba(255,255,255,.09) !important; }
html body .wl .wl-btn.is-got{ flex:1 1 auto; white-space:nowrap; border-color:rgba(74,222,128,.35) !important;
  color:#4ade80 !important; }
html body .wl .wl-actions form{ flex:1 1 auto; }
html body .wl .wl-actions .wl-btn{ width:100%; }
/* retrait : petite croix en haut a droite de l'image */
/* en haut a gauche il y a le badge « Deja xN », en haut a droite la loupe : la croix va en bas. */
html body .wl .cv-media .wl-del-form{ position:absolute; bottom:6px; right:6px; z-index:3; margin:0; }
html body .wl .cv-media .wl-del{
  display:grid; place-items:center; width:26px; height:26px; min-height:0 !important; margin:0 !important; padding:0 !important;
  border:1px solid rgba(255,255,255,.18) !important; border-radius:50% !important; cursor:pointer;
  background:rgba(8,9,12,.72) !important; box-shadow:none !important;
  color:var(--dj-mut2) !important;
}
html body .wl .cv-media .wl-del svg{ width:13px; height:13px; }
html body .wl .cv-media .wl-del:hover{ background:rgba(224,48,58,.85) !important; border-color:transparent !important;
  color:#fff !important; }
html body .wl .cv-empty-note{ margin:18px 0 0 !important; font-size:13.5px !important; color:var(--dj-mut) !important; }


/* ==========================================================================
   BOUTIQUE (/boutique, /boutique/produit/..., /boutique/panier)
   Le catalogue vient de Shopify (data/shop_catalog.json) mais l'habillage est celui du site :
   memes cartes sombres, meme rouge, meme typographie que « Ma collection ».
   ========================================================================== */

/* le lien de retour est celui de « Mon bilan » : sa regle est portee par .bl, on la reprend ici */
html body .sh .bl-back{ display:inline-block; align-self:flex-start; margin-bottom:10px; font-size:13px;
  font-weight:700; color:var(--dj-mut2) !important;
  text-decoration:none !important; }
html body .sh .bl-back:hover{ color:#fff !important; }
html body .sh .sh-lead{ max-width:62ch; }
/* bandeau temporaire « boutique en construction » — a retirer a l ouverture */
html body .sh .sh-wip{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; margin:0 0 20px; padding:13px 16px;
  border:1px solid rgba(247,201,72,.35); border-left:3px solid #f7c948; border-radius:12px;
  background:rgba(247,201,72,.07); font-size:13.5px; line-height:1.55;
  color:var(--dj-mut2) !important;
}
html body .sh .sh-wip-tx{ flex:1 1 220px; min-width:0; }   /* un seul element souple : sinon le lien devient une colonne */
html body .sh .sh-wip a{ font-weight:700; text-decoration:underline;
  color:#f7c948 !important; }
html body .sh .sh-wip a:hover{ color:#fff !important; }
html body .sh .sh-wip-tag{
  flex:none; padding:3px 10px; border-radius:999px; background:#f7c948;
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#1a1300 !important;
}
/* ---------- le panier, en haut a droite de l en-tete ----------
   Place conventionnelle d un panier : dans l en-tete, visible sur toutes les pages du site des
   qu il contient quelque chose. Un bouton flottant en bas a droite avait ete essaye : c est un
   usage mobile, deplace sur ordinateur. */
html body .site-header .nav .nav-end{
  justify-self:end; display:flex; align-items:center; gap:10px; min-width:0;
}
/* Compte sur MOBILE : la barre du bas mene desormais a la boutique, le compte se rejoint
   donc par cette roue. Sur ordinateur, « Mon compte » est deja dans la navigation. */
html body .site-header .nav-acc-m{ display:none; }
@media (max-width:860px){        /* la rangee de liens disparait : la roue prend le relais */
  html body .site-header .nav-acc-m{
    display:grid; place-items:center; width:38px; height:38px; flex:none;
    padding:0 !important; line-height:0 !important;   /* sinon un padding herite decentre l icone */
    border:1px solid var(--dj-line2); border-radius:11px; background:rgba(255,255,255,.04);
    text-decoration:none !important;
    color:var(--dj-txt) !important;
  }
  html body .site-header .nav-acc-m svg{ width:19px; height:19px; }
  html body .site-header .nav-acc-m:hover{ background:rgba(255,255,255,.09);
    color:#fff !important; }
}
html body .site-header .nav-cart{
  position:relative; display:inline-grid; place-items:center; width:38px; height:38px; flex:none;
  padding:0 !important; line-height:0 !important;     /* meme precaution que la roue */
  margin-right:4px; border:1px solid var(--dj-line2); border-radius:11px;
  background:rgba(255,255,255,.04); text-decoration:none !important;
  color:var(--dj-txt) !important;
  transition:background-color .15s ease, border-color .15s ease;
}
html body .site-header .nav-cart:hover{ background:rgba(255,255,255,.09); border-color:var(--dj-line2);
  color:#fff !important; }
html body .site-header .nav-cart svg{ width:19px; height:19px; }
html body .site-header .nav-cart em{
  position:absolute; top:-6px; right:-6px; display:grid; place-items:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  border:2px solid var(--dj-bg, #08090c); background:var(--dj-red);
  font-style:normal; font-size:10.5px; font-weight:800; line-height:1;
  color:#fff !important;
}

/* ---------- choisir un jeu : des vignettes, comme sur l'accueil ----------
   L'etat choisi doit se voir SANS lire : filet rouge, halo aux couleurs du jeu, nom en blanc,
   et les autres vignettes reculent (opacite). Un lien simple, donc l'historique du navigateur
   et le partage d'adresse fonctionnent. */
html body .sh .sh-games{
  display:grid; gap:10px; margin:22px 0 0;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
html body .sh .sh-game{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--dj-line); border-radius:15px; background:rgba(255,255,255,.028);
  text-decoration:none !important; transition:border-color .16s ease, background-color .16s ease, transform .16s ease;
}
html body .sh .sh-game:hover{ transform:translateY(-3px); border-color:var(--dj-line2); background:rgba(255,255,255,.055); }
html body .sh .sh-game-logo{
  position:relative; display:grid; place-items:center; width:100%; aspect-ratio:16 / 9; padding:12px;
  background:radial-gradient(70% 90% at 50% 45%, var(--glow, rgba(255,255,255,.06)), rgba(255,255,255,0) 72%);
}
html body .sh .sh-game-logo img{ display:block; width:auto; height:auto; object-fit:contain; }
html body .sh .sh-game-all svg{ width:30px; height:30px; color:var(--dj-mut); }
html body .sh .sh-game-name{
  display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 10px 11px;
  border-top:1px solid var(--dj-line); text-align:center;
  font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; line-height:1.2;
  color:var(--dj-mut2) !important;
}
html body .sh .sh-game-name em{
  font-style:normal; display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px;
  border-radius:10px; background:rgba(255,255,255,.08); font-size:10.5px; font-weight:800;
  color:var(--dj-mut) !important;
}
/* les autres vignettes ne reculent que lorsqu'un VRAI jeu est choisi : avec « Tous les
   jeux » actif, tout doit rester bien lisible a l'arrivee sur la page */
html body .sh .sh-games:has(.sh-game.is-on:not(.sh-game--all)) .sh-game:not(.is-on){ opacity:.5; }
html body .sh .sh-games:has(.sh-game.is-on:not(.sh-game--all)) .sh-game:not(.is-on):hover{ opacity:1; }
html body .sh .sh-game.is-on{
  border-color:var(--dj-red); background:rgba(224,48,58,.08);
  box-shadow:0 0 0 1px var(--dj-red) inset, 0 10px 30px rgba(224,48,58,.16);
}
html body .sh .sh-game.is-on .sh-game-name{
  border-top-color:rgba(224,48,58,.45);
  color:#fff !important;
}
html body .sh .sh-game.is-on .sh-game-name em{ background:var(--dj-red);
  color:#fff !important; }

/* ---------- le jeu choisi, puis ses types de produit ---------- */
html body .sh .sh-bar{ margin:18px 0 0; padding:14px 16px; border:1px solid var(--dj-line);
  border-radius:14px; background:rgba(255,255,255,.03); }
html body .sh .sh-bar-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:0; }
html body .sh .sh-bar-game{ font-family:var(--impact); font-size:19px; letter-spacing:.5px;
  text-transform:uppercase; color:#fff !important; }
html body .sh .sh-bar-clear{ font-size:12.5px; font-weight:700; text-decoration:none !important;
  color:var(--dj-mut) !important; }
html body .sh .sh-bar-clear::before{ content:"\2190\00a0"; }
html body .sh .sh-bar-clear:hover{ color:#fff !important; }
html body .sh .sh-types{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
html body .sh .sh-type{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border:1px solid var(--dj-line2); border-radius:999px; background:rgba(255,255,255,.04);
  font-size:13px; font-weight:700; text-decoration:none !important;
  color:var(--dj-mut2) !important;
  transition:background-color .14s ease, border-color .14s ease, color .14s ease;
}
html body .sh .sh-type em{ font-style:normal; font-size:11px; font-weight:800; opacity:.75; }
html body .sh .sh-type:hover{ background:rgba(255,255,255,.09);
  color:#fff !important; }
html body .sh .sh-type.is-on{
  background:var(--dj-red) !important; border-color:var(--dj-red) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(224,48,58,.28);
}
html body .sh .sh-type.is-on em{ opacity:.85; }

/* ---------- resultats : en stock d'abord, epuises a part ---------- */
html body .sh .sh-results{ margin-top:22px; }
html body .sh .sh-none{ margin:14px 0 0; font-size:13.5px;
  color:var(--dj-mut) !important; }
html body .sh .sh-sold{ margin-top:26px; padding-top:18px; border-top:1px dashed var(--dj-line2); }
html body .sh .sh-sold-sum{ display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; }
html body .sh .sh-sold-sum::-webkit-details-marker{ display:none; }
html body .sh .sh-sold-sum .cv-h2{ margin:0 !important; }
html body .sh .sh-sold-sum .cv-count{ margin-left:auto; }
html body .sh .sh-sold .sh-chev{ display:grid; place-items:center; width:22px; height:22px; flex:none;
  color:var(--dj-mut); transition:transform .18s ease; }
html body .sh .sh-sold .sh-chev svg{ width:15px; height:15px; }
html body .sh .sh-sold[open] .sh-chev{ transform:rotate(180deg); }
html body .sh .sh-sold .sh-grid{ margin-top:14px; }

@media (max-width:640px){
  html body .sh .sh-games{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; }
  html body .sh .sh-game-logo{ padding:8px; }
  html body .sh .sh-game-name{ padding:7px 6px 9px; font-size:10.5px; gap:5px; }
  html body .sh .sh-game-name em{ min-width:17px; height:17px; font-size:10px; }
  html body .sh .sh-bar{ padding:12px 13px; }
  html body .sh .sh-type{ padding:7px 12px; font-size:12.5px; }
}

/* ---------- la grille ---------- */
html body .sh .sh-grid{ display:grid; gap:16px; margin-top:18px;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
html body .sh .sh-card{ display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--dj-line); border-radius:16px; background:rgba(255,255,255,.028);
  transition:border-color .15s ease, transform .15s ease; }
html body .sh .sh-card:hover{ border-color:var(--dj-line2); transform:translateY(-2px); }
html body .sh .sh-card.is-out{ opacity:.62; }
/* Les photos de produits arrivent sur fond blanc (visuels fournisseurs) : une boite claire
   les accueille toutes de la meme facon, plutot que des rectangles blancs poses sur du noir. */
html body .sh .sh-media{ position:relative; display:block; aspect-ratio:4 / 3; overflow:hidden;
  background:#f4f5f8; }
html body .sh .sh-media img{ width:100%; height:100%; object-fit:contain; display:block; }
html body .sh .sh-noimg{ display:block; width:100%; height:100%;
  background:linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02)); }
html body .sh .sh-badge{ position:absolute; left:10px; top:10px; padding:5px 10px; border-radius:999px;
  background:rgba(8,9,12,.82); border:1px solid rgba(255,255,255,.18);
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
html body .sh .sh-body{ display:flex; flex-direction:column; flex:1 1 auto; gap:6px; padding:13px 14px 15px; }
html body .sh .sh-body > form, html body .sh .sh-body > .sh-add{ margin-top:auto; }
html body .sh .sh-name{ font-size:14px; font-weight:700; line-height:1.3; text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.6em;                       /* deux lignes reservees : les boutons s'alignent */
  color:var(--dj-txt) !important; }
html body .sh .sh-name:hover{ color:#fff; }
html body .sh .sh-meta{ margin:0; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--dj-mut) !important; }
html body .sh .sh-price{ margin:2px 0 8px; font-size:19px; font-weight:800; color:#fff !important; }
html body .sh .sh-price small{ font-size:11.5px; font-weight:700; color:var(--dj-mut); text-transform:uppercase; }
html body .sh .sh-price del{ margin-left:9px; font-size:14px; font-weight:600; color:var(--dj-mut); }

/* ---------- le bouton d'ajout ---------- */
html body .sh .sh-add{
  display:inline-flex; align-items:center; justify-content:center; width:100%; padding:11px 14px;
  border:0 !important; border-radius:11px !important; cursor:pointer;
  background:var(--dj-red) !important; background-image:none !important; box-shadow:none !important;
  font:700 13.5px 'Inter',system-ui,sans-serif !important; letter-spacing:0 !important; text-transform:none !important;
  color:#fff !important; text-decoration:none !important;
  transition:background-color .15s ease !important;
}
html body .sh .sh-add:hover{ background:#f0434d !important; }
html body .sh .sh-add.is-big{ padding:14px 20px; font-size:15px !important; }
html body .sh .sh-add.is-off{ background:rgba(255,255,255,.06) !important; color:var(--dj-mut) !important;
 cursor:default; }
html body .sh .sh-add[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---------- fiche produit ---------- */
html body .sh-one .sh-one-grid{ display:grid; gap:28px; margin-top:18px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
html body .sh-one .sh-one-media{ position:relative; border:1px solid var(--dj-line); border-radius:18px;
  background:#f4f5f8; overflow:hidden; aspect-ratio:1 / 1; display:grid; place-items:center; }
html body .sh-one .sh-one-media img{ width:100%; height:100%; object-fit:contain; display:block; }
html body .sh-one .sh-one-title{ margin:4px 0 6px !important; }
html body .sh-one .sh-one-price{ margin:0 0 18px; font-size:30px; font-weight:800; color:#fff !important; }
html body .sh-one .sh-one-price del{ margin-left:12px; font-size:17px; font-weight:600; color:var(--dj-mut); }
html body .sh-one .sh-one-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:20px; }
html body .sh-one .sh-variant{ flex:1 1 220px; }
html body .sh-one .sh-qty{ display:flex; flex-direction:column; gap:6px; }
html body .sh-one .sh-qty > span{ font-size:11.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--dj-mut) !important; }
html body .sh-one .sh-qty input{ width:84px; padding:10px 12px; border:1px solid var(--dj-line2) !important;
  border-radius:11px !important; background:rgba(255,255,255,.04) !important;
  font:700 15px 'Inter',system-ui,sans-serif !important; color:#fff !important; }
html body .sh-one .sh-one-form .sh-add{ width:auto; flex:1 1 200px; }
html body .sh-one .sh-desc, html body .sh-one .sh-desc *{
  color:var(--dj-txt) !important;
  background:none !important;
}
html body .sh-one .sh-desc{ margin:18px 0; font-size:14.5px; line-height:1.65; }
html body .sh-one .sh-desc a{ color:var(--dj-red) !important; }
html body .sh-one .sh-desc strong, html body .sh-one .sh-desc b{ color:#fff !important; }
html body .sh-one .sh-desc p{ margin:0 0 10px; }
html body .sh .sh-out-note{ margin:0; font-size:13px; font-weight:700;
  color:#f87171 !important; }
/* stock faible : une information, pas une alerte — ambre plutot que rouge */
html body .sh .sh-left{ margin:0 0 14px; font-size:13px; font-weight:700;
  color:#f7c948 !important; }
html body .sh-cart .sh-left{ margin:3px 0 0; font-size:12px; }
html body .sh .sh-badge.is-low{ background:rgba(247,201,72,.92); border-color:transparent;
  color:#1a1300 !important; }
html body .sh .sh-assur{ margin:22px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
html body .sh .sh-assur li{ position:relative; padding-left:24px; font-size:13px;
  color:var(--dj-mut2) !important; }
html body .sh .sh-assur li::before{ content:""; position:absolute; left:4px; top:6px; width:9px; height:5px;
  border-left:2px solid #4ade80; border-bottom:2px solid #4ade80; transform:rotate(-45deg); }

/* ---------- le panier ---------- */
html body .sh-cart .sh-lines{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
html body .sh-cart .sh-line{ display:grid; align-items:center; gap:12px; padding:12px;
  grid-template-columns:76px minmax(0,1fr) auto auto auto;
  border:1px solid var(--dj-line); border-radius:14px; background:rgba(255,255,255,.028); }
html body .sh-cart .sh-line.is-out{ border-color:rgba(248,113,113,.35); }
html body .sh-cart .sh-line-media{ display:block; width:76px; height:64px; border-radius:9px; overflow:hidden; background:#f4f5f8; }
html body .sh-cart .sh-line-media img{ width:100%; height:100%; object-fit:contain; display:block; }
html body .sh-cart .sh-line-name{ font-size:14px; font-weight:700; text-decoration:none;
  color:var(--dj-txt) !important; }
html body .sh-cart .sh-line-id .sh-meta{ margin-top:3px; text-transform:none; letter-spacing:0; font-weight:600; }
html body .sh-cart .sh-line-qty{ display:flex; gap:6px; margin:0; }
html body .sh-cart .sh-line-qty input{ width:62px; padding:8px 10px; border:1px solid var(--dj-line2) !important;
  border-radius:9px !important; background:rgba(255,255,255,.04) !important;
  font:700 14px 'Inter',system-ui,sans-serif !important; color:#fff !important; }
html body .sh-cart .sh-line-qty button{ padding:8px 11px; border:1px solid var(--dj-line2) !important;
  border-radius:9px !important; background:rgba(255,255,255,.04) !important; cursor:pointer;
  font:700 12.5px 'Inter',system-ui,sans-serif !important; color:var(--dj-mut2) !important;
 box-shadow:none !important; }
html body .sh-cart .sh-line-qty button:hover{ color:#fff !important; }
html body .sh-cart .sh-line-total{ font-size:16px; font-weight:800; white-space:nowrap;
  color:#fff !important; }
html body .sh-cart .sh-line-del{ margin:0; }
html body .sh-cart .sh-line-del button{ display:grid; place-items:center; width:32px; height:32px; padding:0 !important;
  border:1px solid var(--dj-line2) !important; border-radius:50% !important; cursor:pointer;
  background:none !important; box-shadow:none !important; color:var(--dj-mut) !important;
 }
html body .sh-cart .sh-line-del button svg{ width:13px; height:13px; }
html body .sh-cart .sh-line-del button:hover{ background:rgba(224,48,58,.85) !important; border-color:transparent !important;
  color:#fff !important; }
html body .sh-cart .sh-foot{ margin-top:22px; padding:18px; border:1px solid var(--dj-line);
  border-radius:16px; background:rgba(255,255,255,.03); }
html body .sh-cart .sh-foot-total{ display:flex; align-items:baseline; justify-content:space-between; margin:0 0 4px; }
html body .sh-cart .sh-foot-total span{ font-size:12px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dj-mut); }
html body .sh-cart .sh-foot-total b{ font-size:26px; font-weight:800; color:#fff !important; }
html body .sh-cart .sh-foot form{ margin:14px 0 0; }
html body .sh-cart .sh-secure{ margin:12px 0 0; font-size:12px; line-height:1.55;
  color:var(--dj-mut) !important; }
html body .sh-cart .sh-clear{ margin-top:14px !important; text-align:center; }
html body .sh-cart .sh-clear button{ border:0 !important; background:none !important; box-shadow:none !important;
  cursor:pointer; font:600 12.5px 'Inter',system-ui,sans-serif !important; text-decoration:underline !important;
  color:var(--dj-mut) !important; }
html body .sh .sh-updated{ margin-top:18px; }

@media (max-width:860px){
  html body .sh-one .sh-one-grid{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width:640px){
  html body .sh .sh-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
  html body .sh .sh-body{ padding:11px 11px 13px; }
  html body .sh .sh-name{ font-size:13px; }
  html body .sh .sh-price{ font-size:17px; }
  html body .sh .sh-add{ padding:10px 12px; font-size:12.5px !important; }
  html body .sh-cart .sh-line{ grid-template-columns:60px minmax(0,1fr) auto; row-gap:10px; }
  html body .sh-cart .sh-line-media{ width:60px; height:52px; }
  html body .sh-cart .sh-line-qty{ grid-column:2; }
  html body .sh-cart .sh-line-total{ grid-column:3; grid-row:2; }
  html body .sh-cart .sh-line-del{ grid-column:3; grid-row:1; justify-self:end; }
}

/* ---------- CGV : encadres, trous a combler, case d'acceptation ----------
   .lg-todo signale ce qui reste a renseigner (mediateur, identifiant emballages) : volontairement
   criard, pour qu'une page incomplete ne parte jamais en production sans qu'on le voie. */
html body .lg .lg-box{
  margin:14px 0; padding:16px 18px; border:1px solid var(--dj-line2); border-left:3px solid var(--dj-red);
  border-radius:12px; background:rgba(255,255,255,.03);
}
html body .lg .lg-box p{ margin:0 0 10px; }
html body .lg .lg-box p:last-child{ margin-bottom:0; }
html body .lg .lg-form{ font-size:14px; line-height:1.85; }
html body .lg .lg-todo{
  padding:2px 8px; border-radius:6px; background:#f7c948 !important;
  color:#1a1300 !important; font-weight:700;
}
html body .lg .lg-sign{ margin-top:26px; padding-top:16px; border-top:1px solid var(--dj-line);
  font-size:12.5px; color:var(--dj-mut) !important; }

html body .sh-cart .sh-cgv{ display:flex; align-items:flex-start; gap:10px; margin:0 0 14px;
  font-size:13px; line-height:1.5; color:var(--dj-mut2) !important; }
html body .sh-cart .sh-cgv input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--dj-red); cursor:pointer; }
html body .sh-cart .sh-cgv a{ color:var(--dj-txt) !important; text-decoration:underline; }

/* ==========================================================================
   NOTIFICATIONS DU DOJO
   Une pastille rouge sur « Le Dojo » (en haut et en bas), et un panneau depliable en tete du
   fil. Le compteur seul ne dit pas OU regarder : le panneau donne la liste et le lien direct.
   ========================================================================== */
html body .site-header .nav a.nav-dojo-btn,
html body .site-header .nav summary.nav-dojo-btn{ position:relative; }

html body .bottom-nav .bnav-item{ position:relative; }


/* ---------- le panneau ---------- */













/* la publication visee par une notification clignote une fois, pour qu on la repere */
@keyframes dj-flash{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,48,58,0); } 30%{ box-shadow:0 0 0 3px rgba(224,48,58,.55); } }
html body .dj-post.is-flash, html body .is-flash{ animation:dj-flash 1.8s ease; border-radius:16px; }

/* ---------- les lignes ---------- */
html body .dj-notif-list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--dj-line); }
html body .dj-notif + .dj-notif{ border-top:1px solid var(--dj-line); }
html body .dj-notif > a{
  display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:11px;
  padding:11px 15px; text-decoration:none !important;
  color:var(--dj-mut2) !important;
}
html body .dj-notif > a:hover{ background:rgba(255,255,255,.05); }
html body .dj-notif.is-new > a{ background:rgba(224,48,58,.07); }
html body .dj-notif.is-new > a::before{
  content:""; position:absolute; left:6px; width:5px; height:5px; border-radius:50%; background:var(--dj-red);
}
html body .dj-notif{ position:relative; }
html body .dj-notif-ic{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.06); }
html body .dj-notif-ic svg{ width:15px; height:15px; }
html body .dj-notif-ic--like svg, html body .dj-notif-ic--like-comment svg{ color:var(--dj-red); }
html body .dj-notif-ic--comment svg{ color:#60a5fa; }
/* Une reponse EST un commentaire : meme bulle, mais une teinte propre pour qu'on
   distingue « a commente ta prise » de « a repondu a ton commentaire ». Sans ces
   deux lignes, les deux nouveaux types tombaient dans le cas par defaut et
   s'affichaient avec le coeur du j'aime. */
html body .dj-notif-ic--reply svg{ color:#7dd3a0; }
html body .dj-notif-ic--mention svg{ color:#c084fc; }

/* Entrainement termine : ambre, pour le distinguer d'un j'aime (rouge) ou d'un
   commentaire (bleu), et recompense en evidence a la place de la date. */
html body .dj-notif-ic--quest svg{ color:#e8a24a; }
html body .dj-notif--quest .dj-notif-ic{ background:rgba(232,162,74,.14) !important;
  border-color:rgba(232,162,74,.34) !important; }
html body .dj-notif--quest .dj-notif-when{ color:#f0b968 !important; font-weight:800 !important;
  font-variant-numeric:tabular-nums; }
html body .dj-notif-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
html body .dj-notif-main{ font-size:13.5px; line-height:1.4; }
html body .dj-notif-main b{ color:#fff !important; }
html body .dj-notif-tx small{ font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--dj-mut) !important; }
html body .dj-notif-when{ font-size:11.5px; white-space:nowrap;
  color:var(--dj-mut) !important; }

@media (max-width:640px){
  html body .dj-notif > a{ grid-template-columns:28px minmax(0,1fr); row-gap:2px; padding:10px 13px; }
  html body .dj-notif-ic{ width:28px; height:28px; }
  html body .dj-notif-when{ grid-column:2; }
}

/* ---------- qui a aime, et remontee en haut du fil ---------- */
html body .post-actions .act.likers{
  margin-left:-6px; padding:6px 8px; border:0 !important; background:none !important;
  box-shadow:none !important; cursor:pointer;
}
html body .post-actions .act.likers .pl-n{ font-weight:800; }
html body .post-actions .act.likers:hover .pl-n{ color:#fff !important; }

html body .dj-likers-back{ position:fixed; inset:0; z-index:100060; background:rgba(5,6,8,.66);
  opacity:0; transition:opacity .2s ease; }
html body .dj-likers-back.open{ opacity:1; }
html body .dj-likers{
  position:fixed; z-index:100070; left:50%; top:50%; transform:translate(-50%, -46%);
  width:min(420px, calc(100vw - 32px)); max-height:min(70vh, 560px); display:flex; flex-direction:column;
  border:1px solid var(--dj-line2); border-radius:18px; background:#101218;
  box-shadow:0 30px 80px rgba(0,0,0,.6); opacity:0; transition:transform .2s ease, opacity .2s ease;
  font-family:'Inter',system-ui,sans-serif;
}
html body .dj-likers.open{ transform:translate(-50%, -50%); opacity:1; }
html body .dj-likers-head{ display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--dj-line); }
html body .dj-likers-head h2{ margin:0 !important; font-family:var(--impact) !important;
  font-size:19px !important; letter-spacing:.5px !important; text-transform:uppercase !important;
  color:#fff !important; }
html body .dj-likers-x{ display:grid; place-items:center; width:32px; height:32px; padding:0 !important;
  border:1px solid var(--dj-line2) !important; border-radius:9px !important; cursor:pointer;
  background:none !important; box-shadow:none !important;
  color:var(--dj-mut2) !important; }
html body .dj-likers-x svg{ width:14px; height:14px; }
html body .dj-likers-x:hover{ color:#fff !important; }
html body .dj-likers-body{ overflow-y:auto; padding:6px 0 10px; }
html body .dj-liker{
  display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:11px;
  padding:9px 16px; text-decoration:none !important;
  color:var(--dj-txt) !important;
}
html body a.dj-liker:hover{ background:rgba(255,255,255,.05); }
/* la fenetre vit dans <body>, hors de la portee des styles du Dojo : on redit la taille */
html body .dj-liker .cav{ display:grid; place-items:center; width:34px; height:34px; flex:none;
  border-radius:50%; overflow:hidden; background:rgba(255,255,255,.07); }
html body .dj-liker .cav img{ width:100%; height:100%; object-fit:cover; display:block; }
html body .dj-liker .cav-i{ font-size:13px; font-weight:800;
  color:#fff !important; }
html body .dj-liker b{ font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html body .dj-liker time{ font-size:11.5px; white-space:nowrap;
  color:var(--dj-mut) !important; }
html body .dj-likers-anon, html body .dj-likers-wait{
  margin:10px 16px 4px; font-size:12.5px;
  color:var(--dj-mut) !important; }

/* masquee par defaut : elle n apparait que sur l onglet du fil, une fois qu on a defile
   (classe is-on posee par le script ; l attribut hidden ne suffisait pas, cette regle le
   contredisait) */
html body .dj-top{ display:none; }
html body .dj-top.is-on{
  position:fixed; right:max(20px, calc((100vw - 1180px) / 2)); bottom:28px; z-index:59;
  display:grid; place-items:center; width:44px; height:44px; padding:0 !important;
  border:1px solid var(--dj-line2) !important; border-radius:50% !important; cursor:pointer;
  background:rgba(16,18,24,.92) !important; backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.45) !important;
  color:var(--dj-txt) !important;
}
html body .dj-top.is-on svg{ width:19px; height:19px; }
html body .dj-top.is-on:hover{ background:var(--dj-red) !important; border-color:transparent !important;
  color:#fff !important; }
@media (max-width:860px){
  html body .dj-top.is-on{ right:16px; bottom:calc(var(--bnav-h, 62px) + 14px + env(safe-area-inset-bottom)); }
}


/* ==========================================================================
   NOTIFICATIONS : LA CLOCHE DE LA BARRE DU HAUT
   Elles occupaient le haut de la page du Dojo, ou elles repoussaient le fil vers le bas.
   Ici elles sont joignables depuis n'importe quelle page, sur ordinateur comme sur mobile,
   et chaque ligne se ferme par sa croix. Meme gabarit que le panier : carre de 38 px.
   ========================================================================== */
html body .site-header .nav .nav-bell{ position:relative; flex:none; }
html body .site-header .nav .nav-bell > summary.nav-bell-btn{
  position:relative; display:grid; place-items:center; width:38px; height:38px;
  padding:0 !important; line-height:0 !important; cursor:pointer; list-style:none;
  border:1px solid var(--dj-line2); border-radius:11px; background:rgba(255,255,255,.04);
  color:var(--dj-txt) !important;
}
html body .site-header .nav .nav-bell > summary::-webkit-details-marker{ display:none !important; }
html body .site-header .nav .nav-bell > summary.nav-bell-btn svg{ width:19px; height:19px; }
html body .site-header .nav .nav-bell > summary.nav-bell-btn:hover,
html body .site-header .nav .nav-bell[open] > summary.nav-bell-btn{
  background:rgba(255,255,255,.1); color:#fff !important;
}
html body .site-header .nav .nav-bell-n{
  position:absolute; top:-6px; right:-6px; display:grid; place-items:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  border:2px solid #101218; background:var(--dj-red);
  font-style:normal; font-size:10px; font-weight:800; line-height:1;
  color:#fff !important;
}
html body .site-header .nav .nav-bell-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:10003;
  width:340px; max-width:calc(100vw - 24px); max-height:min(70vh, 520px); overflow-y:auto;
  background:rgba(14,16,21,.97); border:1px solid var(--dj-line2); border-radius:16px;
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
html body .site-header .nav .nav-bell-head{ padding:12px 15px 10px; font-size:13px; font-weight:800;
  color:#fff !important; }
html body .site-header .nav .nav-bell-vide{ margin:0; padding:2px 15px 16px; font-size:13px;
  color:var(--dj-mut) !important; }
/* la croix est posee PAR-DESSUS la ligne : d'ou le retrait a droite du lien, sinon elle
   recouvrirait l'heure ou la recompense */
html body .nav-bell-panel .dj-notif > a{ padding-right:40px; }
html body .dj-notif-x{
  position:absolute; top:7px; right:7px; display:grid; place-items:center;
  width:24px; height:24px; padding:0; border:0; border-radius:8px;
  background:transparent; cursor:pointer; opacity:.4;
  color:var(--dj-mut) !important;
  transition:opacity .14s ease, background-color .14s ease;
}
html body .dj-notif-x svg{ width:12px; height:12px; }
html body .dj-notif:hover .dj-notif-x{ opacity:.85; }
html body .dj-notif-x:hover{ opacity:1 !important; background:rgba(255,255,255,.12);
  color:#fff !important; }

/* Sur telephone le panneau ne peut pas etre ancre au bouton : celui-ci est a 40 px du bord
   droit, et 340 px de panneau debordaient de 121 px a gauche. On l'epingle donc a la fenetre. */
@media (max-width:560px){
  html body .site-header .nav .nav-bell-panel{
    position:fixed; top:58px; left:12px; right:12px; width:auto; max-width:none;
  }
}

/* Le survol d'une ligne passait en violet clair et le texte devenait illisible : le panneau
   est dans .nav, il heritait donc de « body .nav a:hover », qui pose un degrade violet en
   !important. On le neutralise ici, avec la specificite et le !important qu'il faut. */
html body .site-header .nav .nav-bell-panel .dj-notif > a:hover,
html body .site-header .nav .nav-bell-panel .dj-notif > a:focus{
  background:rgba(255,255,255,.055) !important;
  background-image:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
  color:var(--dj-mut2) !important;
}
html body .site-header .nav .nav-bell-panel .dj-notif > a:hover .dj-notif-main b{
  color:#fff !important;
}
html body .site-header .nav .nav-bell-panel .dj-notif.is-new > a:hover{
  background:rgba(224,48,58,.12) !important;
}

/* Balayage lateral pour effacer, sur telephone. « pan-y » laisse le panneau defiler
   verticalement : sans cela le navigateur s'approprie le geste et le balayage ne part jamais. */
html body .nav-bell-panel .dj-notif{ touch-action:pan-y; }
html body .nav-bell-panel .dj-notif.is-sliding{ will-change:transform, opacity; }
html body .nav-bell-panel .dj-notif.is-sliding > a{ background:rgba(255,255,255,.04) !important; }

/* Fiche carte : quand le guide de prix TCGplayer ne publie rien, on l'ecrit, et on renvoie
   toujours vers la page d'origine pour que le visiteur puisse verifier lui-meme. */
html body .cd-tcg-vide{
  margin:12px 0 0; padding:11px 13px; border-radius:11px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);
  font-size:12.5px; line-height:1.5;
  color:var(--dj-mut) !important;
}
html body .cd-tcg-source{ margin:10px 0 0; font-size:12.5px; }
html body .cd-tcg-source a{
  color:var(--dj-mut) !important;
  text-decoration:none !important; font-weight:700;
}
html body .cd-tcg-source a:hover{ color:#fff !important;
  text-decoration:underline !important; }


/* ================= LISIBILITE ET ZONES TAPABLES EN MOBILE =================
   Mesure du 2026-10-11 sur la fiche carte a 375 px : 41 textes sous 12 px et 27 zones
   tapables sur 43 sous 44 px. References : 44 x 44 points (Apple), 48 x 48 (Google),
   16 px pour le texte courant.

   LES SELECTEURS SONT LONGS EXPRES. Une premiere version, plus courte, a ete injectee
   dans la page de production et mesuree : la moitie des regles PERDAIT contre des regles
   existantes plus specifiques, par exemple
     @media (max-width:560px) html body.game-page .cd-v2 .cd-price-card .cd-pc-label
         { font-size:9.5px !important }
   On reprend donc la specificite exacte des regles gagnantes, relevee sur la page.

   Borne a max-width:820px, la meme limite que le bandeau d'installation : l'affichage
   sur ordinateur n'est pas touche. */
@media (max-width:820px){

  /* --- 1. Le bandeau d'installation ne masque plus de contenu ---------------------
     Il fait ~99 px et flotte 30 px au-dessus de la barre du bas, alors que theme.css ne
     reserve que « --bnav-h + 34px ». La difference restait inaccessible tant qu'on
     n'avait pas clique « Compris » -- et il reste affiche jusque-la, par choix. Sa
     hauteur reelle est mesuree en JS dans --pwa-h (base.html) : les trois variantes du
     bandeau n'ont pas le meme texte. Verifie : la reserve passe de 96 a 225 px. */
  html body.pwa-on{
    padding-bottom:calc(var(--bnav-h, 62px) + 34px + 30px + var(--pwa-h, 100px)
                        + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --- 2. Les textes de CONTENU au-dessus de 12 px --------------------------------
     Ce ne sont pas des mentions legales : « TCGPLAYER », « MARKET PRICE », « SET » sont
     ce que le visiteur vient lire. */
  html body.game-page .cd-v2 .cd-price-card .cd-pc-label{ font-size:12px !important; }
  html body.game-page .cd-v2 .cd-price-card .cd-pc-kind{ font-size:12px !important; }
  html body.game-page .cd-v2 .cd-price-card .cd-pc-pct{ font-size:12px !important; }
  html body.game-page .cd-v2 .cd-facts dt{ font-size:12px !important; }
  html body.game-page .cd-v2 .cd-table thead th,
  html body.game-page .cd-v2 .cd-cond thead th{ font-size:12px !important; }
  html body.game-page .cd-v2 .cd-eyebrow,
  html body.game-page .cd-v2 .cd-eyebrow a,
  html body.game-page .cd-v2 .cd-eyebrow span{ font-size:12px !important; }
  html body.game-page .cd-v2 .cd-rarity{ font-size:12.5px !important; }
  html body .site-header .nav .lang-switch a{ font-size:12px !important; }
  html body .pro-tag{ font-size:11px !important; }
  /* La barre du bas porte cinq entrees sur 375 px : 11 px est le maximum tenable sans
     que « Collection » ne se coupe. Mieux vaut 11 lisibles que 10 serres. */
  html body .bottom-nav .bnav-item .bnav-label{ font-size:11px !important; }
  html body .bnav-games .bnav-game span{ font-size:12px !important; }

  /* --- 3. Les zones tapables -------------------------------------------------------
     a) Les vrais boutons : une hauteur mini suffit, le fond suit. .cd-zoom-hint exige la
        specificite complete, une regle existante lui imposant height:30px !important. */
  html body.game-page .cd-v2 .cd-zoom-hint{ height:44px !important; }
  html body .cd-wish,
  html body .cstep-btn,
  html body .cd-back,
  html body .nav-acc-m{
    min-height:44px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  /*  b) Le pied de page : liens empiles, on agrandit pour de vrai. Verifie a 44 px. */
  html body .footer-links a{
    display:inline-flex !important; align-items:center !important;
    min-height:44px !important; padding:0 6px !important;
  }
  /*  c) Les deux plus petits, en ligne dans du texte : marge interne ASYMETRIQUE, qui
        prend la place libre AU-DESSUS et ne recouvre pas le titre qui suit. On passe de
        14-15 px a une trentaine, sans deplacer un seul pixel visible (la marge negative
        annule l'effet sur la mise en page) et sans voler le toucher du titre. */
  html body.game-page .cd-v2 .cd-eyebrow a{
    display:inline-block !important;
    padding:14px 6px 4px !important; margin:-14px -6px -4px !important;
  }
  html body.game-page .cd-v2 .cm-warn{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    padding:12px 10px 6px !important; margin:-12px -10px -6px !important;
  }
}


/* ================= DOJO OUVERT AUX VISITEURS =================
   Trois classes nouvelles pour le visiteur sans compte. Elles portent leur couleur
   EXPLICITEMENT, color ET -webkit-text-fill-color : theme.css impose « --ink », un bleu
   nuit, a tout ce qui n'est pas repris ici. Un element nouveau non prevu naît donc
   INVISIBLE sur le fond sombre -- c'est le defaut structurel du point J, et il vaut
   aussi pour le code qu'on ajoute aujourd'hui. */
html body .dj-me-guest{ text-align:center; }
html body .dj-me-guest .dj-me-belt,
html body .dj-me-guest .dj-me-xp{
  color:#fff !important;
}
html body .dj-me-guest small{
  color:var(--dj-mut) !important;
}
html body .dj-join{
  display:inline-block; margin-top:14px; text-decoration:none;
  color:#fff !important;
}
html body .dj-guest-signin{ margin-top:10px; font-size:13px; }
html body .dj-guest-signin a,
html body .cmt-guest a{
  color:var(--dj-mut) !important;
  text-decoration:underline; text-underline-offset:3px;
}
html body .dj-guest-signin a:hover,
html body .cmt-guest a:hover{
  color:#fff !important;
}
/* L'invite sous une publication : meme retrait que le formulaire qu'elle remplace, et
   une zone tapable d'au moins 44 px (cf. point B). */
html body .cmt-guest{ margin:10px 0 2px; padding:0 4px; font-size:13.5px; }
html body .cmt-guest a{ display:inline-flex; align-items:center; min-height:44px; }


/* ===================================================================
   FIL DU DOJO : rendre au texte et aux actions la place qu'ils meritent
   2026-10-11.

   MESURE AVANT. Sur un ecran de 375x812, une publication faisait 758 px --
   un ecran entier -- dont 472 px d'image, soit 62 %. La barre j'aime /
   commentaires ne pesait que 36 px, 4,6 % de la publication, et tombait
   tout en bas : on ne voyait jamais la publication suivante commencer.
   Sur bureau (colonne de 640 px) l'image montait a 560 px, soit 67 %.

   TROIS CHANGEMENTS :

   1. L'image est plafonnee a 340 px en mobile et 420 px sur bureau. La
      publication passe de 758 a 625 px : elle tient ENTIERE a l'ecran, et
      la suivante depasse. La carte reste entiere (object-fit:contain,
      jamais de rognage) ; elle devient simplement plus etroite.

   2. La hauteur est RESERVEE (min-height). Avant, .post-media mesurait
      0 px tant que l'image n'etait pas arrivee, puis 450 : le fil sautait
      de 450 px sous le doigt a chaque image chargee. C'est un defaut en
      soi, independant de la taille.

   3. La barre d'actions passe de 36 a 44 px -- la cible tactile
      recommandee -- avec un filet au-dessus qui la detache du texte, et
      un compteur de j'aime plus lisible.
   =================================================================== */
html body .dj .post-media{ max-height:420px; min-height:420px; }
html body .dj .post-media img{ max-height:420px; }

@media (max-width:820px){
  html body .dj .post-media{ max-height:340px; min-height:340px; }
  html body .dj .post-media img{ max-height:340px; }
}

html body .dj .post-actions{
  margin:10px 0 4px; padding:9px 0 0; gap:4px;
  border-top:1px solid var(--dj-line);
}
html body .dj .act{ height:44px !important; padding:0 10px !important; }
html body .dj .act svg{ width:24px; height:24px; }
html body .post-actions .act.likers .pl-n{ font-size:14.5px; }

/* LE CHIFFRE APPARTIENT AU COEUR, pas a la bulle de commentaire.
   Mesure : l'ecart coeur -> chiffre et l'ecart chiffre -> bulle valaient tous les deux
   24 px. Rien ne regroupait donc le j'aime et son compteur, qui flottait au milieu. Et
   j'avais aggrave les choses en portant le rembourrage de 8 a 10 px : l'ecart etait de
   18 px avant.
   On ne rapproche QUE cette paire, en rognant les rembourrages qui se font face. Les
   deux boutons gardent leurs 44 px de hauteur tactile ; seule leur largeur diminue de
   8 px. Resultat vise : 8 px entre le coeur et son chiffre, 24 px avant la bulle --
   un rapport de 1 a 3, qui se lit comme un groupe. */
html body .dj .act.like{ padding-right:2px !important; }
html body .dj .act.likers{ padding-left:2px !important; }

/* Le champ de commentaire est un textarea depuis qu'un commentaire peut porter des
   paragraphes (1000 caracteres). Il doit ressembler EXACTEMENT a l'ancien input d'une
   ligne : meme hauteur de 38 px, texte centre -- d'ou le rembourrage vertical, qu'un
   input n'avait pas besoin de declarer. Il grandit ensuite avec le contenu jusqu'a
   168 px, puis defile. Et .cmt-tx doit afficher les sauts de ligne, sinon le texte
   reviendrait en un bloc a l'ecran meme s'il est correct en base. */
html body .dj textarea.cmt-input{
  height:38px !important; min-height:38px !important; max-height:168px;
  padding:8px 14px !important; line-height:20px !important;
  resize:none; overflow-y:auto; font-family:inherit;
}
html body .dj textarea.cmt-edit-input{
  height:34px; min-height:34px; max-height:168px; padding:7px 10px;
  line-height:18px; resize:none; overflow-y:auto; font-family:inherit; width:100%;
}
html body .dj .cmt-form{ align-items:flex-end; }
html body .dj .cmt-tx{ white-space:pre-line; }

/* ===================================================================
   LA LIGNE DE COMMENTAIRE EN MOBILE, a la maniere d'Instagram
   2026-10-12.

   MESURE AVANT, sur 375 px : le formulaire fait 317 px et le champ n'en
   recevait que 154 -- 49 %, soit environ 18 caracteres visibles. Le
   bouton emoji (36 px) et la pastille « Publier » (72 px) en prenaient
   108 a eux deux, plus trois espacements de 8.

   DEUX CHANGEMENTS, tous deux limites au mobile :

   1. Le bouton emoji disparait. Le clavier du telephone en propose
      deja ; le doubler coutait 44 px avec son espacement, sur une
      ligne qui n'en a pas de trop. Il reste sur ordinateur, ou le
      clavier n'en offre pas, et dans la fenetre de partage.

   2. « Publier » perd sa pastille et devient un simple lien de texte.

   CE QUE JE N'AI PAS FAIT, ET POURQUOI. Instagram eteint son « Post »
   tant qu'on n'a rien ecrit. La regle tenait en une ligne
   -- .cmt-form:has(.cmt-input:placeholder-shown) -- mais je n'ai pas pu
   verifier son basculement : le volet de mesure ne recalcule pas les
   styles, et la couleur restait figee dans les deux etats. Si
   l'invalidation echouait sur un vrai telephone, « Publier » resterait
   gris en permanence, ce qui se lit comme DESACTIVE. Un lien toujours
   allume est moins elegant mais ne ment jamais.
   =================================================================== */
@media (max-width:820px){
  html body .dj .cmt-form .emoji-btn{ display:none !important; }
  html body .dj .cmt-send{
    flex:0 0 auto; padding:0 2px !important; height:38px !important;
    background:none !important; border:0 !important; border-radius:0 !important;
    color:var(--dj-red) !important; font-weight:800 !important;
  }
  html body .dj .cmt-send:hover,
  html body .dj .cmt-send:focus{ background:none !important; }
}

/* « LE DOJO » dans la barre du haut sortait en « le dojo ». La regle qui remet la
   majuscule (::first-letter) liste bien summary.nav-collection-btn mais avait OUBLIE
   summary.nav-dojo-btn : le libelle etait donc mis en minuscules sans etre recapitalise.
   Plutot que d'ajouter le selecteur manquant -- qui n'aurait rendu que « Le dojo » --,
   on laisse le libelle tel qu'il est ecrit. C'est un nom propre : il porte deux
   majuscules, comme partout ailleurs sur le site. */
html body .site-header .nav .nav-drop > summary.nav-dojo-btn{ text-transform:none !important; }

/* Le champ-piege du formulaire de contact. On le sort de l'ecran plutot que de le mettre
   en display:none : certains robots ignorent les champs caches de cette facon, alors
   qu'un champ simplement deplace leur parait normal. Il est aussi retire du parcours au
   clavier (tabindex=-1) et du lecteur d'ecran (aria-hidden), donc hors de portee d'un
   humain quel que soit son moyen de navigation. */
html body .ctc-piege{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}

/* « Voir les N commentaires » : un lien discret au-dessus des commentaires, comme sur
   Instagram. Il n'apparait que si la publication en a plus que les deux charges. */
/* Il porte AUSSI .btn-texte dans le gabarit : sans lui, « body.game-page button »
   laissait passer border-radius:999px, min-height:48px et une ombre ambre que les
   declarations ci-dessous n'effacaient pas. Le lien sortait en grosse pastille avec un
   halo -- la troisieme fois que ce piege mord, apres le « plus » de la legende et
   « Repondre ». Les valeurs propres au lien doivent donc etre en !important a leur
   tour, pour repasser devant celles de .btn-texte. */
html body .dj button.cmt-plus{
  display:block; text-align:left;
  margin:10px 0 0 !important; font-size:13.5px !important; font-weight:600 !important;
}
html body .dj button.cmt-plus:hover{ color:var(--dj-txt) !important; }

/* Legende repliee a trois lignes, avec « ... plus » A LA SUITE DU TEXTE -- comme
   Instagram, et non un bouton sur sa propre ligne.

   Le premier essai mettait un <button> sous le texte. Il heritait de
   « body.game-page button » : degrade, border-radius 999px et une lueur en box-shadow.
   Il sortait en pastille sombre de 33x48 px, detachee du texte. Effacer le fond ne
   suffisait pas -- restaient l'ombre, le rayon et la hauteur de bouton.

   D'ou un <span> : il n'herite d'aucun habillage, il n'y a donc rien a desactiver. La
   troncature se fait en JavaScript, par dichotomie, de sorte que « ... plus » tienne sur
   la derniere ligne visible. */
html body .dj .cap-suite{ color:var(--dj-mut); }
html body .dj .cap-plus{
  color:var(--dj-mut); font-weight:600; cursor:pointer;
}
html body .dj .cap-plus:hover{ color:var(--dj-txt); }

/* Le coeur du double-tap. Il nait au centre de l'image, grossit et s'efface. */
html body .dj .post-media{ position:relative; }
html body .dj .dbl-coeur{
  position:absolute; left:50%; top:50%; width:92px; height:92px; margin:-46px 0 0 -46px;
  color:#fff; pointer-events:none; z-index:3;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.45));
  animation:dbl-coeur .8s cubic-bezier(.2,.9,.3,1) forwards;
}
html body .dj .dbl-coeur svg{ width:100%; height:100%; }
@keyframes dbl-coeur{
  0%{ transform:scale(.4); opacity:0; }
  22%{ transform:scale(1.08); opacity:1; }
  58%{ transform:scale(.98); opacity:1; }
  100%{ transform:scale(1.06); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  html body .dj .dbl-coeur{ animation:none; opacity:.9; }
}

/* Reponses a un commentaire : un seul niveau d'indentation, aligne sous le texte du
   parent et non sous son avatar -- c'est ce que fait Instagram, et sur 375 px chaque
   niveau supplementaire mangerait la largeur du texte. */
html body .dj .cmt-reponses{
  list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;
}
/* UN BOUTON QUI DOIT RESSEMBLER A DU TEXTE. A mettre sur tout <button> du Dojo qui
   n'est pas une vraie pastille.

   « body.game-page button » impose NEUF declarations : min-height 48px, border-radius
   999px, un degrade, une ombre portee, une couleur, une graisse 950 et une taille de
   15 px. Poser « background:none » n'en efface qu'une. Je m'y suis laisse prendre deux
   fois le meme jour -- sur le « plus » de la legende, puis sur « Repondre », qui
   sortaient en pastille de 48 px de haut. On les reprend donc TOUTES, une fois pour
   toutes, dans une classe qu'il suffit d'ajouter. */
html body .dj .btn-texte{
  min-height:0 !important; height:auto !important;
  margin:2px 0 0 !important; padding:0 !important;
  border:0 !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important;
  -webkit-appearance:none; appearance:none;
  color:var(--dj-mut) !important; font-size:12.5px !important; font-weight:700 !important;
  cursor:pointer;
}
html body .dj .btn-texte:hover,
html body .dj .btn-texte:focus{ color:var(--dj-txt) !important; background:none !important; }
html body .dj .cmt-voir-rep{ display:block; text-align:left; }
html body .dj .cmt-voir-rep::before{
  content:""; display:inline-block; width:22px; height:1px; margin:0 8px 4px 0;
  background:var(--dj-line2); vertical-align:middle;
}

/* Mention @pseudo dans un commentaire ou une legende : seuls les pseudos qui existent
   et dont le profil est public deviennent des liens. Un @ vers un profil introuvable
   donnerait un lien mort, pire que du texte simple. */
html body .dj .cmt-mention{ color:var(--dj-blue, #6ab7ff) !important; font-weight:600; }
html body .dj .cmt-mention:hover{ text-decoration:underline; }

/* Sentinelle du fil infini : invisible, mais haute de 1 px pour que l'observateur
   puisse la croiser. Elle affiche trois points pendant le chargement du lot suivant. */
html body .dj .dj-sentinelle{ height:1px; }
html body .dj .dj-sentinelle.occupee{
  height:34px; background:no-repeat center/18px
    radial-gradient(circle 3px, var(--dj-mut) 99%, transparent 0);
}

/* Liste des suggestions de mention. Elle flotte au-dessus du champ : sur telephone, le
   champ est en bas de la publication et le clavier mange la moitie basse de l'ecran --
   une liste en dessous serait invisible. */
html body .mention-liste{
  position:absolute; z-index:100080; max-height:220px; overflow-y:auto;
  display:flex; flex-direction:column; padding:6px;
  border:1px solid var(--dj-line2); border-radius:12px; background:#15171d;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
html body .mention-liste .mention-item{
  min-height:0 !important; height:auto !important; margin:0 !important;
  padding:9px 10px !important; border:0 !important; border-radius:8px !important;
  background:none !important; box-shadow:none !important;
  color:var(--dj-txt) !important; font-size:14px !important; font-weight:600 !important;
  text-align:left; cursor:pointer;
}
html body .mention-liste .mention-item.on,
html body .mention-liste .mention-item:hover{
  background:rgba(255,255,255,.08) !important;
}