/* ════════════════════════════════════════════════════════════════════════════
   🗞️ CARNET D'AVENTURE — la PEAU du WaifuDex (2026-09-07, GO admin)
   ----------------------------------------------------------------------------
   Feuille ADDITIVE, chargée APRÈS dex.css : elle ne redéfinit AUCUN jeton
   global de dex.css (un écran encore sombre reste lisible tel quel), elle
   surcharge écran par écran. La retirer du <head> rend le Dex néon d'origine.

   PHASE 1 (cette feuille) : la page, la barre latérale, la grille, les états.
   PAS RETHÉMÉ (décision admin) : la boutique marchande (bois/marchand/musique/
   voix) et le plateau arena-board.
   ⚠️ CETTE LIGNE DISAIT AUSSI « toute modale pas encore listée reste sombre » —
   PÉRIMÉ depuis que `.modal:not(.shop-framed)` est passé au papier : il n'existe
   plus une seule modale sombre en dehors de la boutique (vérifié au navigateur le
   2026-09-09 — la modale quotidienne calcule bien --k-panneau). La conséquence
   compte : tout ce qu'une modale contient doit être lisible SUR PAPIER, et un
   jeton `--text-dim` / `--border` / `--chrome-*` laissé là est un défaut, pas un
   reste acceptable. C'est ce qui rendait la récompense quotidienne illisible.

   Palette validée sur maquette (dex-maquette-carnet2.html v9) :
     papier #faf1e0 · panneau #fdf7ea · papier2 #f1e4cc · bord #e0c9a0
     encre #4a3a26 · encre2 #93805f · or #c08a2e · rose #e8879c
     bande nuit : #2e2440 → #43305c → #27335c, liseré or rgba(255,215,106,.35)
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --k-papier: #faf1e0;
  --k-papier2: #f1e4cc;
  --k-panneau: #fdf7ea;
  --k-bord: #e0c9a0;
  --k-encre: #4a3a26;
  --k-encre2: #93805f;
  --k-or: #c08a2e;
  --k-or-clair: #f5d47a;
  --k-rose: #e8879c;
  --k-serif: Georgia, 'Palatino Linotype', 'Times New Roman', serif;
}

/* ── LA PAGE ─────────────────────────────────────────────────────────────── */
body{
  background: var(--k-papier);
  color: var(--k-encre);
}

/* ── LA BARRE LATÉRALE ───────────────────────────────────────────────────── */
.sidebar{
  background: var(--k-panneau);
  border-right: 2px solid var(--k-bord);
  color: var(--k-encre);
}
.sidebar a.brand, a.brand, .brand{ background: none; border-color: var(--k-bord); }
.brand-title{ font-family: var(--k-serif); color: var(--k-encre); }
.brand-title-accent{ color: var(--k-or); }
.sidebar-collapse, .sidebar-expand, .sidebar-close{
  background: var(--k-papier2); border: 1px solid var(--k-bord);
  color: var(--k-encre2);
}
.lang-switch button{
  background: var(--k-papier2); border: 1px solid var(--k-bord);
  color: var(--k-encre2);
}
.lang-switch button[aria-current="true"], .lang-switch button.is-active{
  background: var(--k-or); border-color: var(--k-or); color: #fff;
}
.points-badge{
  background: var(--k-papier2); border: 1px solid var(--k-bord);
  color: var(--k-encre);
}
.points-badge-value{ color: var(--k-or); font-family: var(--k-serif); }
.points-badge-label{ color: var(--k-encre2); }
.side-section{ background: transparent; border-color: var(--k-bord); }
.side-title{ color: var(--k-encre2); font-family: var(--k-serif); }
.stats-summary{ color: var(--k-encre); }
.stats-pct{ color: var(--k-or); }
.progress{ background: var(--k-papier2); border: 1px solid var(--k-bord); }
.progress-fill{ background: linear-gradient(90deg, #e8b04a, var(--k-or-clair)); }
.search{
  background: #fff; border: 1px solid var(--k-bord); color: var(--k-encre);
}
.search::placeholder{ color: var(--k-encre2); }
.chip{
  background: var(--k-papier2); border: 1px solid var(--k-bord);
  color: var(--k-encre);
}
.chip:hover{ background: #fff; border-color: var(--k-or); }
.toggle-label{ color: var(--k-encre); }
.toggle-track{ background: var(--k-papier2); border: 1px solid var(--k-bord); }
.rarity-stats{ color: var(--k-encre2); }
/* bannières de hub (Combat / Échanges / Boutique & codes / Progression) */
.cmd-banner{
  background: var(--k-papier2); border: 1px solid var(--k-bord);
  color: var(--k-encre);
}
.cmd-banner:hover{ background: #fff; border-color: var(--k-or); transform: translateX(3px); }
.cmd-banner-label{ color: var(--k-encre); }
.cmd-banner-go{ color: var(--k-encre2); }
.cmd-banner-ico{ background: transparent; box-shadow: none; border: none; }
/* le voile sombre posé sur la photo de couverture des bannières : sans objet
   sur parchemin (c'est lui qui rendait les bannières noires) */
.cmd-banner::before{ background: none; }
.cmd-banner::after{ background: none; }
.sidebar-foot{ border-color: var(--k-bord); }

/* ── LES ÉTATS (chargement, erreur, accueil) ─────────────────────────────── */
.state{ color: var(--k-encre); }
.landing-card{
  background: var(--k-panneau); border: 1px solid var(--k-bord);
  color: var(--k-encre);
}
.landing-title{ color: var(--k-encre); font-family: var(--k-serif); }
.landing-sub{ color: var(--k-encre2); }
.no-results{ color: var(--k-encre2); }
.footer{ color: var(--k-encre2); }
.footer-link{ color: var(--k-or); }
.mobile-topbar{ background: var(--k-panneau); border-bottom: 1px solid var(--k-bord); }
.menu-toggle{ background: var(--k-papier2); border: 1px solid var(--k-bord); color: var(--k-encre); }

/* ── LA GRILLE : LA CARTE EST LA TUILE ───────────────────────────────────────
   Maquette validée : la carte imprimée ENTIÈRE (plus de recadrage 3/4), la
   bande d'infos NUIT VIOLETTE détachée dessous (badge rareté plein · ×copies ·
   N° à droite), AUCUNE ombre ni halo qui dépasse la carte (retour admin ×2),
   survol = levée + estompage des voisines. */
.grid{ align-items: start; /* sans quoi l'article s'étire à la rangée et le N° décroche de la bande */ }
/* colonnes : SEULEMENT au bureau — la grille mobile de dex.css reste la sienne
   (une règle sans média ici écraserait ses coupes tactiles, cascade oblige) */
/* retour admin (2026-09-07) : « le nombre de cartes n'est pas pareil que ta
   maquette » — les tuiles de 200 px donnaient 7 colonnes sur grand écran, la
   maquette en montrait de GRANDES. 320 px ≈ la carte de la maquette. */
@media (min-width: 821px){
  .grid{ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
}

/* ⚠️ TOUT CE BLOC EST SCOPÉ `.grid > …` (2026-09-07, 2e passe). La première
   version disait `.card{…}` : or `.card` est AUSSI la classe des cartes du
   PLATEAU arena-board et de la carte dessinée (officialCardHTML) — la peau
   fuyait sur le combat. `.grid > .card` ne touche que les tuiles du Dex. */
.grid > .card{
  aspect-ratio: auto;
  display: flex; flex-direction: column;
  overflow: hidden;
  border: none; background: transparent;
  border-radius: 14px;
}
.grid > .card-owned, .grid > .card-owned:hover,
.grid > .card-owned.card-secret, .grid > .card-owned.card-secret:hover,
.grid > .card-owned.dex-r-celestial.in-view, .grid > .card-owned.card-secret.in-view{
  box-shadow: none; animation: none;
}

/* ── LA TUILE EST LA CARTE DU JEU (2026-09-07, retour admin : « on est loin du
   visuel ») ─────────────────────────────────────────────────────────────────
   Les vignettes (assets/cards/*.webp) sont des recadrages d'ILLUSTRATION sans
   cadre ni nom : elles ne peuvent PAS donner le rendu validé sur maquette. La
   tuile possédée monte donc la CARTE DESSINÉE du jeu (officialCardHTML — la
   même que la fiche et le survol), avec la vignette comme illustration.
   L'article porte `bb-skin` : la peau du plateau habille la carte interne. */
.grid > .card-owned .cw{ display: block; width: 100%; }
.grid > .card-owned .cw > .card{ width: 100%; }

/* ⚠️ LE TEXTE DE LA CARTE SUIT LA TAILLE DE LA CARTE (2026-09-07, retour admin :
   « les textes sont illisibles »). CAUSE EXACTE, déjà écrite dans arena-board.css
   (bloc « LES TEXTES DE CARTE SONT EN rem, DONC INDÉPENDANTS DE LA CARTE ») :
   nom, rareté, stats et attaques sont calibrés en `rem` pour une carte de 152 px.
   Sur une tuile de 240 px ils ne bougent pas d'un pixel — ils occupent donc une
   part BEAUCOUP plus petite de la carte, et deviennent illisibles.
   Le remède existe déjà dans la feuille du plateau : exprimer ces tailles en
   `cqw` (part de la largeur de la CARTE). Mais il y est volontairement scopé
   `#bbRoot` — le PLATEAU seul, jamais les hôtes `.bb-skin` du Dex. On applique
   ici les MÊMES RATIOS CALIBRÉS (9,6 / 6,6 / 7,2 cqw), aux tuiles de la grille
   uniquement : le plateau, le sélecteur de deck et la fiche ne bougent pas.
   Les ancrages `bottom` suivent dans la MÊME unité — sans quoi la pile
   nom/rareté/stats se chevauche (le piège que la note d'arena-board décrit). */
.grid > .card-owned .cw > .card{ container-type: inline-size; }
/* Ancrages MESURÉS au navigateur, pas choisis : à 264 px de carte les hauteurs
   réelles sont stats 26 px (9,8cqw), rareté 23 px (8,7cqw), nom 33 px (12,5cqw).
   Chaque ancrage = celui du dessous + la hauteur de la boîte du dessous, plus
   une marge. Sans ce calcul, les quatre boîtes se chevauchaient de 2 à 7 px. */
.grid > .card-owned .card .nm{ font-size: 9.6cqw; bottom: 24cqw; }
.grid > .card-owned .card .rar{ font-size: 6.6cqw; bottom: 14.2cqw; }
.grid > .card-owned .card .st{ font-size: 7.2cqw; bottom: 3.4cqw; gap: 4.5cqw; }
.grid > .card-owned .card .cardatks{ bottom: 37.5cqw; left: 3cqw; right: 3cqw; }
.grid > .card-owned .card .cardatks b{ font-size: 5.4cqw; }
.grid > .card-owned .card .cardatks em{ font-size: 5cqw; }
.grid > .card-owned .card .cardatks u{ font-size: 5cqw; }
.grid > .card-owned .card .cardatks u small{ font-size: .78em; }
.grid > .card-owned .card .cardatks .cardflav{ font-size: 5cqw; }
.grid > .card-owned .card .cardatks .atk-eff{ font-size: 4.6cqw; }
/* la pastille d'élément et le sceau de maîtresse suivent aussi la carte */
.grid > .card-owned .card .el{ width: 13cqw; height: 13cqw; }
.grid > .card-owned .card .el.el2{ width: 13cqw; height: 13cqw; }
/* le repli (initiale) : hachures parchemin, derrière l'illustration */
.grid > .card .card-art-fallback{
  background: repeating-linear-gradient(45deg, var(--k-papier2), var(--k-papier2) 12px, var(--k-panneau) 12px, var(--k-panneau) 24px);
  color: var(--k-bord);
}
/* la vignette-art des cartes DÉJÀ VUES (branche .card-seen, restée en image) */
.grid > .card-seen .card-art{
  position: static;
  width: 100%; height: auto;
  aspect-ratio: 640 / 897;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* la BANDE nuit violette, détachée sous la carte */
.grid > .card .card-overlay{
  position: static;
  margin-top: 6px;
  padding: 4px 26px 4px 9px; /* la droite est réservée au N° (absolu) */
  background: linear-gradient(100deg, #2e2440, #43305c 55%, #27335c);
  border: 1px solid rgba(255, 215, 106, .35);
  border-radius: 11px;
  display: flex; align-items: center; gap: 6px;
  justify-content: flex-start; /* la modale néon centrait : un contenu trop
    large débordait des DEUX côtés de la bande */
  min-height: 26px;
}
.grid > .card .card-overlay .card-meta{ flex-wrap: wrap; min-width: 0; }
/* le nom est GRAVÉ par la carte dessinée : la bande d'une possédée ne le répète
   pas. Une DÉJÀ-VUE (image grise sans cadre) garde son nom dans la bande. */
.grid > .card .card-overlay .card-title{ display: none; }
.grid > .card-owned .card-overlay .card-name{ display: none; }
.grid > .card-seen .card-overlay .card-name{
  display: block; width: 100%;
  color: var(--k-encre2); font-size: .78rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grid > .card .card-overlay .card-meta{ display: flex; align-items: center; gap: 7px; margin: 0; }
.grid > .card .rarity-badge{
  background: var(--rc, #9e9e9e);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 2px 9px;
  font-size: .6rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase;
}
/* céleste : badge multicolore (retour admin « céleste est multi color ») */
.grid > .dex-r-celestial .rarity-badge{
  background: linear-gradient(90deg, #8fd0ff, #c9a0ff, #ffa0d8, #ffd76a);
  color: #4a3a26;
}
/* le NOMBRE d'exemplaires (plus de pastilles bleues) */
.grid > .card .card-copies{
  color: #ffd76a; font-weight: 800; font-size: .74rem;
  background: rgba(255, 215, 106, .14); border: 1px solid rgba(255, 215, 106, .4);
  border-radius: 99px; padding: 1px 7px;
}
.grid > .card .card-copies .pip, .grid > .card .card-copies .pip-more{ display: none; }
.grid > .card .card-level{ color: #cfc4e0; background: transparent; border: none; }
.grid > .card .evolved-tag{ color: #8fd8ff; }
.grid > .card .card-count-hint{ display: none; }

/* N° : en bas à droite, DANS la bande (retour admin) */
.grid > .card .card-number{
  top: auto; left: auto; bottom: 7px; right: 10px;
  background: transparent; border: none; padding: 0;
  color: #cfc4e0; font-size: .68rem; font-style: italic;
}

/* ÉVÉNEMENT / EXCLUSIVE : le ruban diagonal validé — le texte vient du title
   localisé déjà posé par dex.js (badge_event / badge_exclusive) */
.grid > .card .badge-event{
  font-size: 0; line-height: 0;
  position: absolute; top: 22px; left: -38px; width: 150px;
  transform: rotate(-38deg);
  text-align: center;
  background: linear-gradient(90deg, #e8b04a, #f5d47a, #e8b04a);
  color: #5a3a10;
  padding: 4px 0;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  z-index: 3;
  pointer-events: none;
}
.grid > .card .badge-event::after{
  content: attr(title);
  font-size: .56rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
}
/* le ruban se rogne aux bords de l'ART (pas de débord hors carte) :
   l'art est le premier bloc, on borne le ruban par un conteneur virtuel — la
   tuile n'a plus d'overflow:hidden (la bande vit dessous), donc on rogne par
   clip-path sur le ruban lui-même : aux coins l'art est arrondi, le ruban
   diagonal reste DANS le rectangle de l'art. */
.grid > .card{ clip-path: none; }

/* survol : la carte visée se LÈVE, et c'est tout. Aucun halo, aucun voile.
   ⚠️ L'ESTOMPAGE DES VOISINES EST RETIRÉ (2026-09-09). Il a été signalé DEUX fois :
     · « avoir le curseur dans le vide grise un peu les cartes, c'est un peu chiant »
       → j'avais restreint le déclencheur de `.grid:hover` à `:has(.card-owned:hover)`,
         ce qui règle le cas du curseur dans les gouttières, et RIEN d'autre ;
     · « griser d'un côté et de l'autre non, dû au curseur dans la zone de carte, ça
       rend moche » → le vrai reproche portait sur le voile LUI-MÊME : survoler une
       carte éteint les onze autres, et une grille à moitié terne est moche quoi qu'il
       arrive. Un demi-correctif à un retour répété n'est pas un correctif.
   Ce qui reste suffit à désigner la carte visée : elle monte, pivote et grossit.
   Pointeurs à survol SEULEMENT — au tactile, l'effet collerait après le 1ᵉʳ toucher. */
.grid > .card-owned{ transition: transform .18s ease; }
/* ⚠️ NI ROTATION NI ÉCHELLE — RETIRÉES LE 2026-09-10, retour admin : « flou sur la
   carte quand on met le curseur dessus, c'est horrible ; il est présent pour faire
   un genre d'effet de distance ? j'en veux pas ».
   Son œil avait raison et la cause est mécanique, pas subjective : `rotate(-.6deg)`
   et `scale(1.04)` obligent le navigateur à RÉ-ÉCHANTILLONNER la tuile entière —
   texte compris — sur une grille non alignée aux pixels. C'est exactement le flou
   décrit dans holo.css à propos de `will-change`, et c'est MOI qui l'avais introduit
   ici en croyant « désigner » la carte visée.
   `translateY` d'un nombre ENTIER de pixels, lui, ne resample rien : la carte monte,
   elle reste nette. Ça suffit largement à dire laquelle est visée. */
@media (hover: hover) and (pointer: fine){
  .grid .card-owned:hover{
    transform: translateY(-8px);
    z-index: 2;
  }
}

/* cartes verrouillées (mystère) et déjà-vues : hachures parchemin.
   ⚠️ scope `.grid > …` OBLIGATOIRE : la règle générale `.grid > .card`
   (aspect auto + flex) gagnerait sinon la cascade et écraserait la tuile. */
.grid > .card-locked, .grid > .card-seen{
  border: 2px dashed var(--k-bord);
  border-radius: 14px;
  background: repeating-linear-gradient(45deg, var(--k-papier2), var(--k-papier2) 12px, var(--k-panneau) 12px, var(--k-panneau) 24px);
  box-shadow: none;
}
.grid > .card-locked{ aspect-ratio: 640 / 897; display: block; position: relative; }
/* mystère : le « ? » seul + le N° en bas à droite — pas de bande */
.grid > .card-locked .card-overlay{ display: none; }
.grid > .card-locked .lock-mark{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--k-bord);
  background: none; text-shadow: none;
}
.grid > .card-locked .card-number{
  top: auto; left: auto; bottom: 7px; right: 10px;
  background: transparent; border: none; padding: 0;
  color: var(--k-encre2); font-size: .68rem; font-style: italic;
}

/* ── LA FICHE DE CARTE (phase 2a) ────────────────────────────────────────────
   La classe .carnet-fiche est posée par openCardDetailModal (dex.js), sur le
   modèle de shopAddFrame : SEULE cette modale passe au carnet — la boutique
   garde son bois, les autres modales gardent leur sombre (lisible sur papier)
   jusqu'à leur propre phase. */
.modal.carnet-fiche{
  background: var(--k-panneau);
  border: 2px solid var(--k-bord);
  color: var(--k-encre);
}
.modal.carnet-fiche .modal-head{
  background: linear-gradient(90deg, var(--k-papier2), var(--k-panneau));
  border-bottom: 2px solid var(--k-bord);
}
.modal.carnet-fiche .modal-title{
  color: var(--k-encre); font-family: var(--k-serif);
  background: none; /* la plaque violette de la modale néon */
  -webkit-text-fill-color: currentColor; /* si le titre était un texte-dégradé */
}
.modal.carnet-fiche .modal-close{
  background: none; border: 1px solid var(--k-bord); color: var(--k-encre2);
}
.modal.carnet-fiche .modal-body{ color: var(--k-encre); }
/* les étincelles se posent en absolu sur le porte-carte */
.carnet-fiche .cd-official-card{ position: relative; }
/* l'en-tête de fiche : le dégradé radial néon (qui FINIT sombre) laisse place
   au parchemin — la carte, sombre et vernie, ressort dessus comme sur la maquette */
.carnet-fiche .cd-head, .carnet-fiche .cd-head-card, .carnet-fiche .cd-official{
  background: var(--k-papier2);
  border-color: var(--k-bord);
}
/* sous la carte : titre de la waifu, tag secrète, description */
.carnet-fiche .cd-official-sub{ color: var(--k-encre2); }
.carnet-fiche .cd-description{ color: var(--k-encre) !important; }
.carnet-fiche .cd-note{ background: var(--k-papier2); border: 1px solid var(--k-bord); color: var(--k-encre); }
/* 6/7 · les DEUX encarts, chacun sa couleur (retour admin : « les couleurs …
   sont presque toutes pareil ») : drop/capture = sarcelle, évolution = rose */
.carnet-fiche .cd-drop{
  background: #def0ec; border: none; border-left: 4px solid #3a9a8f;
  border-radius: 10px; color: #20756b;
}
.carnet-fiche .cd-drop-secret{ background: #f7e9c6; border-left-color: #d98f2b; color: #a86a10; }
/* ── LA BULLE DES TAUX PAR PLATEFORME (2026-09-09, retour admin : « pas jolie ») ──
   TROIS causes, toutes mesurées dans le rendu, aucune supposée :
     1. `.cd-plat-bit + .cd-plat-bit` sépare « drop » et « capture » par un
        `border-left: 1px solid var(--border)`. `--border` vaut #36295e — le violet
        sombre du thème néon, JAMAIS retraduit pour le papier. Un trait violet foncé
        sur du crème, à côté d'un liseré sarcelle : deux liserés qui se battent.
     2. Ce même trait est posé sur un flex qui PASSE À LA LIGNE quand la bulle est
        étroite : il se retrouve en tête de 2ᵉ ligne, vertical et pleine hauteur.
        C'est le grand trait qu'on voit sur la capture — un séparateur devenu barre.
     3. `.cd-plat-logos` est un simple `flex: 0 0 auto` dans le même flux : au wrap,
        les logos se retrouvent collés au-dessus du texte au lieu de le précéder.
   Correctif : une GRILLE deux colonnes (logos figés à gauche, texte libre à droite),
   et le séparateur devient un point médian à l'encre — il disparaît de lui-même en
   début de ligne, ce qu'un `border` ne sait pas faire. */
   ⚠️ PREMIÈRE TENTATIVE, ÉCARTÉE APRÈS L'AVOIR REGARDÉE : remplacer le trait par
   un point médian en `::before`. Un pseudo-élément ne disparaît pas davantage en
   tête de ligne qu'un `border` — le point s'est retrouvé exactement là où était la
   barre. Une mise en page qui dépend de l'endroit où le texte coupe est fausse par
   construction ; on arrête donc de la faire couper.
   RETENU : une GRILLE. Les logos occupent une colonne à eux, sur toute la hauteur ;
   chaque mesure prend SA ligne. Plus de wrap, donc plus de séparateur du tout —
   et ça se lit pareil à 300 px ou à 560 px de large. */
.carnet-fiche .cd-drop-plat{
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 3px 10px; padding: 8px 13px 8px 11px;
}
.carnet-fiche .cd-drop-plat .cd-plat-logos{
  grid-column: 1; grid-row: 1 / -1; align-self: center; gap: 5px;
}
.carnet-fiche .cd-drop-plat .cd-plat-bit{ grid-column: 2; white-space: normal; }
/* plus de séparateur : les deux mesures ne sont plus sur la même ligne */
.carnet-fiche .cd-plat-bit + .cd-plat-bit{ border-left: none; padding-left: 0; }
.carnet-fiche .cd-drop-plat b{ color: #14625a; }
.carnet-fiche .cd-evolve-cost{
  background: #fbe3ef; border: none; border-left: 4px solid #d05a90;
  border-radius: 10px; color: #b03a70;
}
.carnet-fiche .cd-evolve-cost b{ color: #8a2450; }
.carnet-fiche .cd-copies-badge{
  background: var(--k-papier2); border: 1px solid var(--k-bord); color: var(--k-or);
}

/* ── FICHE : MISE EN PAGE MAQUETTE (2026-09-07, retour admin « ouvrir une
   carte n'est pas pareil ») : carte À GAUCHE, informations À DROITE ── */
.carnet-fiche .cd-head{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.carnet-fiche .cd-official-card{ flex: 0 0 auto; margin: 0 auto; }
.carnet-fiche .cd-meta{ flex: 1 1 260px; min-width: 250px; }
/* stats en lignes colorées (vert / rouge / bleu), comme la maquette */
.carnet-fiche .cd-lstat{ display: flex; justify-content: space-between; align-items: center;
  border-radius: 8px; padding: 6px 10px; margin-bottom: 5px; font-size: .9rem; color: var(--k-encre); }
.carnet-fiche .cd-lstat-pv{ background: #e3f0dd; } .carnet-fiche .cd-lstat-pv b{ color: #2e8a48; }
.carnet-fiche .cd-lstat-atk{ background: #f5e2dd; } .carnet-fiche .cd-lstat-atk b{ color: #c23a2c; }
.carnet-fiche .cd-lstat-def{ background: #dfe8f5; } .carnet-fiche .cd-lstat-def b{ color: #2a63c0; }
/* encarts classe (ambre) et passif (violet), descriptions comprises */
.carnet-fiche .cd-carnet-role, .carnet-fiche .cd-carnet-passif{
  border-radius: 10px; padding: 8px 11px; margin: 9px 0 0; font-size: .82rem; }
.carnet-fiche .cd-carnet-role{ background: #f7e9c6; border-left: 4px solid #d98f2b; }
.carnet-fiche .cd-carnet-role b{ color: #a86a10; }
.carnet-fiche .cd-carnet-passif{ background: #ece2f7; border-left: 4px solid #8a5fc0; }
.carnet-fiche .cd-carnet-passif b{ color: #6a3fa0; }
.carnet-fiche .cd-carnet-role small, .carnet-fiche .cd-carnet-passif small{
  display: block; margin-top: 2px; color: var(--k-encre); line-height: 1.45; }
/* CE QUE LE RÔLE APPORTE : une ligne par effet, étiquette à gauche, valeur à
   droite (retour admin : des pourcentages en file ne disaient pas de quoi ils
   parlaient). Le seul MALUS du jeu — « Dégâts subis » — se lit en rouge. */
.carnet-fiche .cd-role-effets{ margin-top: 7px; }
.carnet-fiche .cd-role-ligne{
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 3px 0; border-top: 1px dashed rgba(216, 143, 43, .35);
  font-size: .8rem;
}
.carnet-fiche .cd-role-ligne i{ font-style: normal; color: var(--k-encre); }
.carnet-fiche .cd-role-ligne b{ white-space: nowrap; color: var(--k-encre); }
.carnet-fiche .cd-role-ligne b.est-bon{ color: #2e8a48; }
.carnet-fiche .cd-role-ligne b.est-malus{ color: #c23a2c; }
.carnet-fiche .cd-role-vide{ color: var(--k-encre2); font-style: italic; display: block; }
/* le CARROUSEL d'exemplaires passe au parchemin (les blocs gris sombres) */
.carnet-fiche #cdBody{ color: var(--k-encre); }
.carnet-fiche .cd-copy{ background: var(--k-papier2); border: 1px solid var(--k-bord);
  border-radius: 12px; padding: 10px 12px; color: var(--k-encre); }
.carnet-fiche .cd-copy-no{ color: var(--k-or); font-weight: 800; }
.carnet-fiche .cd-copy-lvl{ color: var(--k-or); }
/* ⚠️ LES TEXTES DE LA FICHE ÉTAIENT ILLISIBLES (retour admin 2026-09-08).
   CAUSE : ces blocs sont construits par dex.js avec des couleurs CLAIRES posées
   EN STYLE INLINE (`color:var(--text-dim)`, `#ffd76a`…) — elles étaient prévues
   pour le fond sombre du Dex néon. Sur parchemin, du crème sur crème ne se voit
   pas. Une règle de feuille ne bat PAS un style inline : il faut `!important`,
   et c'est le seul endroit du carnet qui en emploie — à dessein, avec sa raison
   écrite ici. */
.carnet-fiche .cd-atks{ margin: 6px 0 0; }
.carnet-fiche .cd-atk{
  background: #fff; border: 1px solid var(--k-bord); border-radius: 9px;
  color: var(--k-encre);
}
.carnet-fiche .cd-atk-btn{ color: var(--k-encre) !important; }
.carnet-fiche .cd-atk-name{ color: var(--k-encre) !important; font-weight: 700; }
.carnet-fiche .cd-atk-pow{ color: #c23a2c !important; font-weight: 700; }
.carnet-fiche .cd-atk-fx{
  color: var(--k-encre) !important;
  background: var(--k-papier2); border: 1px solid var(--k-bord);
}
.carnet-fiche .cd-atk-caret{ color: var(--k-encre2) !important; }
.carnet-fiche .cd-atk-desc{ color: var(--k-encre) !important; background: var(--k-papier2); }
.carnet-fiche .cd-atks-label{ color: var(--k-encre2) !important; }
/* le bloc PASSIF de l'exemplaire (chip + phrase dérivée) */
.carnet-fiche .cd-passive{ color: var(--k-encre) !important; }
.carnet-fiche .cd-passive b{ color: #6a3fa0 !important; }
.carnet-fiche .cd-passive-desc{
  color: var(--k-encre) !important;
  background: #ece2f7 !important;
  border-left-color: #8a5fc0 !important;
}
.carnet-fiche .cd-pa-tete{ color: #6a3fa0 !important; }
.carnet-fiche .cd-pa-ligne{ color: var(--k-encre) !important; }
/* pastilles d'élément des attaques : elles portent leur couleur d'élément en
   inline (lisible sur sombre) — on leur redonne un fond sombre à elles seules */
.carnet-fiche .cd-atk-meta .el-badge, .carnet-fiche .cd-atk-meta [class*="elem"]{
  background: #2e2440; border-radius: 99px;
}
.carnet-fiche .cd-car-bar{ color: var(--k-encre); }
.carnet-fiche .cd-nav{ background: var(--k-papier2); border: 1px solid var(--k-bord); color: var(--k-encre); }
.carnet-fiche .cd-dot{ background: var(--k-bord); }
.carnet-fiche .cd-dot.is-active{ background: var(--k-or); }

/* ── BOUTIQUE : le CONTOUR VIOLET saute (retour admin) — le cadre suit le BOIS
   du marchand, l'intérieur n'est pas touché ── */
.modal.shop-framed{ background: #2c1c10; border: 2px solid #6a4a2e; }
.modal.shop-framed .modal-head{ background: linear-gradient(#3a2414, #2c1c10); border-bottom: 1px solid #6a4a2e; }
.modal.shop-framed .modal-title{ color: #e8d5b8; background: none; -webkit-text-fill-color: currentColor; }
.modal.shop-framed .modal-close{ background: none; border: 1px solid #6a4a2e; color: #c8ae8e; }

/* ── PANNEAUX DE HUB (Combat, Échanges, Boutique & codes, Progression) ──
   Le panneau passe au parchemin ; les tuiles À ILLUSTRATION gardent leur
   artwork (background-image par tuile, non touché) ; les tuiles SANS artwork
   (Decks, Tapis, Entraînement…) reposent sur le parchemin au lieu du violet
   vide — leur bandeau-label sombre reste lisible dans les deux cas. */
.modal.hub-modal{ background: var(--k-panneau); border: 2px solid var(--k-bord); }
.modal.hub-modal .modal-head{ background: linear-gradient(90deg, var(--k-papier2), var(--k-panneau)); border-bottom: 2px solid var(--k-bord); }
.modal.hub-modal .modal-title{ color: var(--k-encre); font-family: var(--k-serif); background: none; -webkit-text-fill-color: currentColor; }
.modal.hub-modal .modal-close{ background: none; border: 1px solid var(--k-bord); color: var(--k-encre2); }
.modal.hub-modal .hub-tile{ background-color: var(--k-papier2); border: 1px solid var(--k-bord); border-radius: 14px; }
.modal.hub-modal .hub-tile:hover{ border-color: var(--k-or); }
.modal.hub-modal .hub-panel-ico{ color: var(--k-or); }

/* ── BANNIÈRES DE LA BARRE LATÉRALE, 2e passe (retour admin : « ça c'est mal
   fait ») : icône dans une pastille blanche régulière, étiquette nette,
   plus aucun reste de la plaque néon ── */
.cmd-banner{ border-radius: 12px; padding: 9px 12px; box-shadow: none; text-shadow: none; }
.cmd-banner-ico{
  width: 30px; height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--k-bord); border-radius: 9px;
}
.cmd-banner-ico svg{ width: 16px; height: 16px; }
.cmd-banner-label{ font-weight: 600; font-size: .9rem; }
.cmd-badge{ background: #d0483a; color: #fff; border: none; }

/* ════════════════════════════════════════════════════════════════════════════
   PASSE « PLUS RIEN À MOITIÉ » (2026-09-07, retour admin : « hors thème hors
   thème, les choses sont faites à moitié »). Tout le chrome néon restant passe
   au carnet, d'un bloc. SEULE la boutique marchande garde son identité (bois).
   ════════════════════════════════════════════════════════════════════════════ */

/* 1 · SIX COLONNES comme sur sa capture dézoomée (240px ≈ 6 par rangée à 1920) */
@media (min-width: 821px){
  .grid{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
}

/* 2 · le CONTENEUR du menu (fond sombre derrière Combat/Échanges/…) */
.dex-cmdbar{
  background: var(--k-papier2);
  border: 1px solid var(--k-bord);
  border-radius: 14px;
  box-shadow: none;
}
.cmd-banner{ background: var(--k-panneau); }

/* 3 · LANGUES : la classe active réelle est `.active` (pas .is-active — c'est
   pour ça que FR restait violet), et le COMPTE (pastille profil) */
.lang-switch{ background: transparent; border: none; box-shadow: none; }
.lang-switch button{ border-radius: 99px; }
.lang-switch button.active{
  background: var(--k-or); border-color: var(--k-or); color: #fff;
  box-shadow: none; text-shadow: none;
}
.user-chip{
  background: var(--k-papier2); border: 1px solid var(--k-bord);
  border-radius: 12px; box-shadow: none; color: var(--k-encre);
}
.user-chip-name{ color: var(--k-encre); }
.user-chip-preview{ color: var(--k-encre2); }

/* 4 · LES ANGLES : le langage néon chanfreinait tous les coins (3px 12px 3px
   12px, var(--cut-*)) — c'est la source des « problèmes d'angles ». Le carnet
   arrondit UNIFORMÉMENT : pilules rondes, panneaux 12-14px, aucun chanfrein. */
.cmd-banner, .cmd-banner-ico, .btn, .btn-cmd, .btn-cmd .cmd-ico,
.search, .sidebar-collapse, .sidebar-expand, .menu-toggle,
.points-badge, .actions-note{
  border-radius: 12px;
}
.chip, .lang-switch button, .lb-pill{ border-radius: 99px; }
.points-badge{ box-shadow: none; }
.cmd-banner:hover{ box-shadow: none; border-color: var(--k-or); }
.chip.is-active{
  background: #fff;
  border-color: var(--chip-color, var(--k-or));
  color: var(--k-encre);
  box-shadow: inset 0 0 0 1px var(--chip-color, var(--k-or));
  text-shadow: none;
}

/* 5 · compteurs « Par rareté » : les nombres étaient quasi invisibles */
.rarity-stat{ color: var(--k-encre); }
.rarity-stat b{ color: var(--k-encre2); }

/* 6 · contrôle MUSIQUE (pastille bas-droite) */
.music-ctl{
  background: var(--k-panneau); border: 1px solid var(--k-bord);
  border-radius: 99px; box-shadow: 0 4px 14px rgba(120, 90, 40, .25);
}
.music-ctl button{
  background: var(--k-papier2); border: 1px solid var(--k-bord);
  color: var(--k-encre); border-radius: 99px; box-shadow: none;
}

/* 7 · TOUTES LES MODALES passent au carnet (coquille + titre — fini la plaque
   violette inclinée), SAUF la boutique marchande qui garde son bois. Les blocs
   déjà thémés (fiche, hubs) portent les mêmes valeurs : aucune divergence. */
.modal:not(.shop-framed){
  background: var(--k-panneau);
  border: 2px solid var(--k-bord);
  color: var(--k-encre);
}
.modal:not(.shop-framed) .modal-head{
  background: linear-gradient(90deg, var(--k-papier2), var(--k-panneau));
  border-bottom: 2px solid var(--k-bord);
}
.modal:not(.shop-framed) .modal-title{
  color: var(--k-encre); font-family: var(--k-serif);
  background: none; -webkit-text-fill-color: currentColor;
  transform: none; clip-path: none; text-shadow: none;
}
.modal:not(.shop-framed) .modal-close{
  background: none; border: 1px solid var(--k-bord); color: var(--k-encre2);
}
.modal:not(.shop-framed) .modal-body{ color: var(--k-encre); }
/* ── LE BOUTON D'ACTION (2026-09-09) ─────────────────────────────────────────
   Dernier morceau resté au néon dans une modale devenue papier : `.btn-primary`
   garde son dégradé lavande #a78bfa → #8b5cf6 (les jetons `--chrome-*`, calibrés
   pour le fond sombre). Mesuré au navigateur sur la modale quotidienne — c'est le
   gros bouton violet de la capture, au milieu d'un parchemin.
   Il passe à l'or du carnet : c'est la couleur que cette peau réserve DÉJÀ à
   l'action (case du jour réclamable, valeur des points, titre de marque), donc
   rien de nouveau n'est inventé — on arrête juste une exception.
   ⚠️ `.shop-framed` reste exclue : sa modale est en bois sombre, un bouton papier
   y serait illisible. Le `:not()` est le même que celui des règles ci-dessus, pour
   qu'il n'y ait qu'UNE frontière à retenir entre les deux mondes. */
.modal:not(.shop-framed) .btn-primary{
  background: linear-gradient(135deg, #e0a844, var(--k-or));
  border: 1px solid #a5761f;
  color: #fff8e6;
  text-shadow: 0 1px 1px rgba(90, 60, 12, .45);
  box-shadow: 0 3px 10px rgba(192, 138, 46, .3);
}
.modal:not(.shop-framed) .btn-primary:hover{
  background: linear-gradient(135deg, #eebb5c, #d09a38);
  box-shadow: 0 4px 14px rgba(192, 138, 46, .42);
}
.modal:not(.shop-framed) .btn-primary:disabled{ opacity: .55; box-shadow: none; }
.modal:not(.shop-framed) .modal-body input[type="text"],
.modal:not(.shop-framed) .modal-body input[type="search"],
.modal:not(.shop-framed) .modal-body input:not([type]){
  background: #fff; border: 1px solid var(--k-bord); color: var(--k-encre);
  border-radius: 9px;
}

/* 8 · CLASSEMENTS (le contenu, pas seulement la coquille) */
.lb-season-row, .lb-season-winner{
  background: var(--k-papier2); border: 1px solid var(--k-bord);
  border-radius: 11px; color: var(--k-encre);
}
.lb-season-label, .lb-season-countdown{ color: var(--k-encre); }
.lb-pill{
  background: var(--k-papier2); border: 1px solid var(--k-bord); color: var(--k-encre);
  box-shadow: none;
}
.lb-pill.is-active{
  background: var(--k-or); border-color: var(--k-or); color: #fff;
}
.lb-table{ color: var(--k-encre); }
.lb-table thead tr, .lb-table th{ color: var(--k-encre2); background: transparent; }
.lb-row{ background: transparent; border-bottom: 1px dashed var(--k-bord); }
.lb-row-me{ background: #f7e9c6; }
.lb-profile-link{ color: var(--k-encre); }
.lb-you{ color: var(--k-or); }
.lb-c-val{ color: var(--k-or); font-weight: 700; }
.lb-rank-num{ color: var(--k-encre2); }
.lb-empty{ color: var(--k-encre2); }
.grid > .card-seen .card-art{ filter: grayscale(1) opacity(.55); }
/* 🎗️ « RELÂCHÉE » / « SOUHAITÉE » : ruban DIAGONAL montant de gauche-bas vers
   droite-haut (demande admin), coin opposé au ruban Évènement et sens inverse.
   Rogné par l'overflow de la tuile : il ne dépasse jamais. */
/* dimensions en cqw : le ruban garde la même diagonale quelle que soit la
   taille de la tuile (la tuile est le conteneur, cf. le bloc de lisibilité) */
.grid > .card-seen{ container-type: inline-size; }
/* ⚠️ « RELÂCHÉE EST MAL FAIT, IL N'EST PAS CENTRÉ, LA BANNIÈRE EST À MOITIÉ
   FAITE » (admin, 2026-09-08). La version précédente faisait 78cqw de large et
   commençait à −16cqw : elle s'ARRÊTAIT à 62cqw, donc AVANT le bord droit — on
   voyait son bout coupé au milieu de l'illustration, et le texte, centré sur la
   bande entière, tombait à gauche de la partie visible.
   Un ruban de coin correct DÉBORDE des deux côtés : ses deux extrémités sont
   rognées par la tuile, et il n'a donc pas de « bout ». Largeur 150cqw pour
   −25cqw de départ = il sort de 25cqw à gauche ET de 25cqw à droite ; son centre
   tombe à 50cqw, soit l'axe de la carte : le texte est centré sur ce que l'œil
   voit. Mesuré au navigateur, pas choisi au jugé. */
.grid > .card-seen .card-seen-ruban{
  position: absolute; top: 84cqw; left: -25cqw; width: 150cqw;
  transform: rotate(-38deg); transform-origin: center;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, #a08a5e, #f2e6c8 45%, #f2e6c8 55%, #a08a5e);
  color: #3a2c19;
  font-size: 5.4cqw; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 1.8cqw 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  z-index: 3; pointer-events: none;
}
.grid > .card-seen .card-overlay{ background: var(--k-papier2); border-color: var(--k-bord); }
.grid > .card-seen .card-overlay .card-name{ display: block; color: var(--k-encre2); }
.card-seen-tag{ color: var(--k-encre2); }

/* ════════════════════════════════════════════════════════════════════════════
   DEUX FUITES DE PORTÉE, TROUVÉES PAR AUDIT LE 2026-09-08
   (audit-carnet-portee.js : croisement « classes que je thème » × « endroits qui
   les produisent » — la FAMILLE du défaut, pas le seul cas vu à l'œil)
   ════════════════════════════════════════════════════════════════════════════ */

/* 1 · `.btn` FUYAIT SUR LE PLATEAU DE COMBAT. La règle d'arrondi uniforme du
   carnet visait `.btn` sans portée, or `arena-board.js` produit `class="btn
   bb-ult"`, `btn btn-primary`, `btn btn-ghost`, `btn primary` — le bouton
   d'Ultime et les dialogues du combat perdaient leur chanfrein néon.
   Le plateau n'est PAS rethémé (décision admin) : on lui rend sa valeur, celle
   de dex.css (`--cut-btn`). Repli en dur si la variable n'est pas définie. */
#bbRoot .btn, .bb-skin .btn{
  border-radius: var(--cut-btn, 13px 4px 13px 4px);
}
/* ⚠️ mais la TUILE de grille porte `bb-skin` elle aussi (la carte dessinée) :
   ses propres boutons doivent, eux, rester au carnet. */
.grid > .card.bb-skin .btn{ border-radius: 12px; }

/* 2 · L'APERÇU DE LA PAGE D'ACCUEIL N'ÉTAIT PAS THÉMÉ. `renderLandingPreview`
   fabrique des `.card card-locked` dans `#landingPreview`, qui n'est PAS `.grid` :
   toutes mes règles scopées `.grid > …` le manquaient, et un visiteur NON
   CONNECTÉ — donc la toute première page du Dex — voyait des cartes mystère
   néon sombres derrière un panneau parchemin.
   Le conteneur est déjà à 35 % d'opacité et flouté : on ne lui met pas la
   bande d'infos, seulement les hachures parchemin de la tuile mystère. */
.landing-preview .card-locked{
  aspect-ratio: 640 / 897;
  border: 2px dashed var(--k-bord);
  border-radius: 14px;
  background: repeating-linear-gradient(45deg, var(--k-papier2), var(--k-papier2) 12px, var(--k-panneau) 12px, var(--k-panneau) 24px);
  box-shadow: none;
}
.landing-preview .card-overlay{ display: none; }
.landing-preview .lock-mark{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; color: var(--k-bord);
  background: none; text-shadow: none;
}

/* 3 · `.grad-text` — le mot accentué du titre d'accueil (« ton DEX de waifus »)
   restait en dégradé lavande néon sur parchemin : un violet isolé au milieu de
   l'encre. Il passe à l'OR du carnet, en gardant le même mécanisme (dégradé
   découpé au texte) pour ne pas changer la forme du titre. */
.grad-text{
  background: linear-gradient(90deg, var(--k-or), #e8b04a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ════════════════════════════════════════════════════════════════════════════
   🎒 LE SAC (2026-09-08) — l'historique de tout ce que le joueur a gagné.
   Même famille que la fiche : parchemin, encre, lignes séparées d'un filet.
   Les entrées PAS ENCORE VUES (celles dont la célébration n'a pas encore été
   jouée) portent un liseré doré : c'est le seul signal d'état de cet écran.
   ════════════════════════════════════════════════════════════════════════════ */
.modal.bag-modal .bag-count{ color: var(--k-encre2); font-size: .82rem; margin: 0 0 10px; }
.modal.bag-modal .bag-more{ color: var(--k-encre2); font-size: .76rem; font-style: italic; margin-top: 10px; }
.modal.bag-modal .bag-list{ list-style: none; margin: 0; padding: 0; }
.modal.bag-modal .bag-row{
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 11px; margin-bottom: 7px;
  background: var(--k-papier2); border: 1px solid var(--k-bord); border-radius: 11px;
  color: var(--k-encre);
}
.modal.bag-modal .bag-row.bag-new{ border-left: 4px solid var(--k-or); background: #f7e9c6; }
.modal.bag-modal .bag-ico{ font-size: 1.35rem; flex: 0 0 auto; line-height: 1.2; }
.modal.bag-modal .bag-main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.modal.bag-modal .bag-title{ color: var(--k-encre); font-size: .88rem; }
.modal.bag-modal .bag-msg{ color: var(--k-encre2); font-size: .76rem; }
/* 🎒 LA PROVENANCE (2026-09-08) — « reçu sur Discord » doit se lire sans cliquer.
   Posée DANS le titre, en petit et à ses couleurs de marque : c'est un repère, pas
   une récompense — elle ne doit jamais concurrencer les pastilles de gain. */
.modal.bag-modal .bag-src{
  display: inline-block; margin-left: 7px; vertical-align: 1px;
  font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 99px; padding: 1px 7px; border: 1px solid var(--k-bord); color: var(--k-encre2);
}
.modal.bag-modal .bag-src-discord{ background: #e6e8f8; border-color: #7a84d8; color: #454f9e; }
.modal.bag-modal .bag-src-twitch{ background: #ede4f8; border-color: #9a6fd0; color: #6d3fa8; }
.modal.bag-modal .bag-gains{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.modal.bag-modal .bag-gain{
  font-size: .74rem; font-weight: 700; border-radius: 99px; padding: 2px 9px;
  background: #fff; border: 1px solid var(--k-bord); color: var(--k-encre);
}
.modal.bag-modal .bag-pts{ color: var(--k-or); }
.modal.bag-modal .bag-card{ background: #ece2f7; border-color: #8a5fc0; color: #6a3fa0; }
.modal.bag-modal .bag-mat{ background: #def0ec; border-color: #3a9a8f; color: #20756b; }
.modal.bag-modal .bag-slot{ background: #e3f0dd; border-color: #9cc890; color: #2e8a48; }
.modal.bag-modal .bag-date{ color: var(--k-encre2); font-size: .72rem; flex: 0 0 auto; white-space: nowrap; }
.modal.bag-modal .bag-empty{ text-align: center; color: var(--k-encre2); padding: 26px 10px; }
.modal.bag-modal .bag-empty-ico{ font-size: 2.6rem; margin-bottom: 8px; }
/* les récompenses SUPPLÉMENTAIRES de l'overlay de célébration (tapis, emplacements) */
.inbox-extras{ display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 8px 0 2px; }
.inbox-extras span{
  font-size: .8rem; font-weight: 700; border-radius: 99px; padding: 3px 11px;
  background: rgba(255, 215, 106, .16); border: 1px solid rgba(255, 215, 106, .45); color: #ffd76a;
}

/* ════════════════════════════════════════════════════════════════════════════
   🎁 LA RÉCOMPENSE QUOTIDIENNE — elle n'avait JAMAIS été rhabillée (2026-09-09)
   ----------------------------------------------------------------------------
   Retour admin, capture à l'appui : « pas bon, texte illisible ; je pensais que
   tu avais tout contrôlé ». Il a raison, et la cause est nette : `carnet.css` ne
   contenait pas UNE règle `daily` ni `dq-` — zéro. La modale gardait donc sa
   palette d'origine, calibrée pour le fond NÉON SOMBRE :
     · `.promo-intro { color: var(--text-dim) }` = #9aa6c9, un bleu-gris pâle
       prévu pour du #130c24. Posé sur le papier #faf1e0, c'est le texte gris
       clair sur crème de la capture : illisible, exactement comme il le dit ;
     · `.dq-cell` peint un dégradé `rgba(0,0,0,.18)` et une bordure `--border`
       (#36295e, violet sombre) → les cases J4-J7 paraissent sales ;
     · `.dq-ico` porte un `drop-shadow` noir fait pour détacher l'émoji du sombre ;
       sur papier il salit le contour ;
     · `.dq-soon` ajoute `grayscale(.35)` : sur fond crème ça vire au gris boueux.
   ⚠️ CE BLOC NE REDÉCIDE RIEN DE LA HIÉRARCHIE. L'arbitrage du 2026-08-06 (« une
   SEULE case attire l'œil : celle qu'on peut réclamer ») est un choix de jeu de
   l'administrateur, pas une couleur : réclamé = discret, aujourd'hui = or, demain
   = neutre lisible, plus tard = verrouillé, J7 = ambre muet. On le TRADUIT dans
   la palette du carnet, on ne le rejoue pas.
   ⚠️ Spécificité : les règles d'origine montent à deux classes (`.dq-cell.dq-done`).
   On préfixe par `.modal` — trois niveaux — sinon la moitié de ce bloc serait
   inerte, et une feuille chargée après ne garantit rien à spécificité inférieure.
   ════════════════════════════════════════════════════════════════════════════ */
.modal .promo-intro{ color: var(--k-encre2); }
.modal .promo-result .promo-intro{ color: var(--k-encre); }
.modal .dq-streak{ color: var(--k-encre); }

.modal .dq-cell{
  border: 1px solid var(--k-bord);
  background: var(--k-panneau);
  box-shadow: 0 1px 0 rgba(122, 96, 56, .1);
}
.modal .dq-day{ color: var(--k-encre2); background: var(--k-papier2); }
.modal .dq-ico{ filter: none; }
.modal .dq-rw{ color: var(--k-encre2); }
.modal .dq-sub{ color: var(--k-encre2); background: var(--k-papier2); }
.modal .dq-mask, .modal .dq-mystery{ color: var(--k-encre2); text-shadow: none; }

/* RÉCLAMÉ — acquis, donc discret. Le vert reste le signe « fait », mais sourd :
   un vert néon sur papier crème ne se lit pas, il éclabousse. */
.modal .dq-cell.dq-done{
  opacity: 1;                       /* .66 sur papier rendait le ✓ presque absent */
  border-color: #9cc890;
  background: #eef6ea;
}
.modal .dq-cell.dq-done .dq-day{ background: #dcecd6; color: #35704a; }
.modal .dq-cell.dq-done .dq-rw{ color: #35704a; }

/* AUJOURD'HUI — la seule action, donc le seul or. Celui du carnet (--k-or),
   pas le #ffca28 néon qui bave sur du crème. */
.modal .dq-cell.dq-today{
  border-color: var(--k-or);
  background: linear-gradient(160deg, #fbeccb, #f7e3b4);
  box-shadow: 0 5px 16px rgba(192, 138, 46, .26);
}
.modal .dq-cell.dq-today .dq-day{ background: var(--k-or); color: #fff8e6; }
.modal .dq-cell.dq-today .dq-rw{ color: #97671c; }
.modal .dq-cell.dq-today .dq-sub{ color: #97671c; background: rgba(192, 138, 46, .16); }
.modal .dq-cell.dq-today .dq-mystery{ color: #97671c; text-shadow: none; }
@media (prefers-reduced-motion: no-preference){
  .modal .dq-cell.dq-today{ animation: dqPulseCarnet 1.6s ease-in-out infinite; }
}
@keyframes dqPulseCarnet{
  0%, 100% { box-shadow: 0 5px 16px rgba(192, 138, 46, .22); }
  50%      { box-shadow: 0 5px 24px rgba(192, 138, 46, .44); }
}

/* DEMAIN — information, pas appel : lisible, neutre, zéro or. */
.modal .dq-cell.dq-next{
  opacity: 1; filter: none;
  border-color: var(--k-bord);
  background: var(--k-papier2);
}
.modal .dq-cell.dq-next .dq-rw{ color: var(--k-encre); }
/* ⚠️ La pastille « DEMAIN » se posait sur du papier2 DANS une case en papier2 :
   même fond, donc pastille invisible — mesuré au navigateur (les deux à
   rgb(241,228,204)). Elle passe au blanc pour exister. Même chose pour « J4 ». */
.modal .dq-cell.dq-next .dq-sub,
.modal .dq-cell.dq-next .dq-day{ background: #fff; border: 1px solid var(--k-bord); }

/* PLUS TARD — verrouillé. Sur papier, on ATTÉNUE (opacité + encre pâle) au lieu
   de désaturer : `grayscale` sur du crème donne un gris sale, c'est ce que la
   capture montre sur J5 et J6. */
.modal .dq-cell.dq-soon{
  opacity: 1; filter: none;
  border-color: #e8dcc4; background: #f6efe1;
}
.modal .dq-cell.dq-soon .dq-day,
.modal .dq-cell.dq-soon .dq-rw,
.modal .dq-cell.dq-soon .dq-mask{ color: #b6a685; }
.modal .dq-cell.dq-soon .dq-ico{ opacity: .5; }

/* J7 — coffre final. Ambre à peine posé, muet tant qu'il n'est pas réclamable. */
.modal .dq-cell.dq-gift7{
  opacity: 1;
  border-color: #e3cb95; background: #fbf2dd;
}
.modal .dq-cell.dq-gift7 .dq-day{ background: #f3e4c2; color: #9b8149; }
.modal .dq-cell.dq-next.dq-gift7{ opacity: 1; }
.modal .dq-cell.dq-today.dq-gift7{
  border-color: var(--k-or);
  background: linear-gradient(160deg, #fbeccb, #f5dda8);
}
.modal .dq-cell.dq-today.dq-gift7 .dq-ico{ filter: drop-shadow(0 0 5px rgba(192, 138, 46, .5)); }

/* ═══ 🕊️ LE CHEMIN COURT DE LA RELÂCHE (2026-09-10) ═══════════════════════════
   Retour admin : « le système relâcher est vraiment très très mal fait, c'est tout
   le contraire de simple ». Le compte passe DEVANT la liste à cocher : sur des
   doublons interchangeables, la question est « combien », pas « lesquels ». */
.rl-vite{
  border: 1px solid var(--k-bord);
  border-radius: 12px;
  background: var(--k-panneau);
  padding: 12px 14px;
  margin: 0 0 14px;
}
.rl-vite-lab{
  display: block;
  font-weight: 700;
  color: var(--k-encre);
  margin-bottom: 8px;
}
.rl-vite-ctl{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rl-vite-ctl input[type="number"]{
  width: 72px; text-align: center;
  font-weight: 700; font-size: 1.05rem;
  padding: 6px 8px;
  border: 1px solid var(--k-bord); border-radius: 8px;
  background: #fff; color: var(--k-encre);
}
.rl-vite-pm{
  min-width: 34px; padding: 6px 10px;
  font-size: 1.1rem; line-height: 1; font-weight: 700;
}
.rl-vite-sur{ color: var(--k-encre2); font-size: .9rem; }
.rl-vite-go{ margin-left: auto; }
.rl-vite-note{
  margin: 10px 0 0;
  font-size: .82rem; line-height: 1.45;
  color: var(--k-encre2);
}
/* Sur mobile le bouton passe sous les commandes plutôt que de les comprimer. */
@media (max-width: 520px){
  .rl-vite-go{ margin-left: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🃏 LA VRAIE CARTE DANS LA GRILLE : SA TAILLE VIENT DE LA TUILE (2026-09-11)
   -------------------------------------------------------------------------------
   Retour admin, capture a l'appui : « pas du tout a la bonne taille ». Il avait
   raison, et la cause etait courte.

   `.ig-spawn-card` est declaree dans la feuille de la VITRINE en taille FIXE —
   `flex: 0 0 280px; width: 280px; height: 440px` — parce qu'elle y vit dans un
   carrousel. Servie telle quelle dans la grille du Dex (cellules de 320 px et
   plus, `minmax(320px, 1fr)`), elle sortait a 280x440 : plus petite que sa
   cellule, au mauvais rapport, et desalignee de ses voisines.

   ⚠️ CE DEFAUT A DEJA ETE CORRIGE UNE FOIS, LE 2026-09-10, DANS LA GRILLE DE WCM
   (`#waifus-grid .ig-carte-reelle`) — et il n'avait pas ete reporte ici, alors que
   le Dex monte la meme carte depuis le meme jour. Meme cause, meme remede : on
   reprend la main sur les DEUX dimensions, et seulement sur elles. Tout le reste
   du vernis (les 23 motifs, les 4 couches, le balayage) reste EXACTEMENT le CSS
   du site.
   ⚠️ `overflow: visible` de `.ig-carte-reelle` est CONSERVE : la bande de balayage
   fait 260 % de la carte et doit pouvoir sortir du cadre pour la traverser.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* ⚠️ `.ig-spawn-card.ig-carte-reelle` ET PAS `.ig-carte-reelle` SEUL — MESURE, pas
   precaution. `holo.css` declare `.ig-spawn-card.ig-carte-reelle { height:440px }`,
   soit une specificite de 0,2,0 : exactement la meme que `.grid .ig-carte-reelle`.
   A egalite, c'est la feuille chargee EN DERNIER qui gagne — et c'est holo.css.
   Mesure au navigateur : largeur bien reprise (365 px) mais hauteur restee a 440,
   donc la carte debordait de sa cellule. On passe a 0,3,0 : la regle gagne quel que
   soit l'ordre des feuilles, aujourd'hui et apres n'importe quel reordonnancement.
   C'est le piege de specificite decrit dans CLAUDE.md §4. */
.grid .ig-spawn-card.ig-carte-reelle,
.cd-official-card .ig-spawn-card.ig-carte-reelle{
  flex: initial;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 897;   /* le format REEL des cartes composees */
  margin: 0;
}
.grid .ig-spawn-card.ig-carte-reelle .ig-carte-img,
.cd-official-card .ig-spawn-card.ig-carte-reelle .ig-carte-img{
  width: 100%; height: 100%; object-fit: contain;
}

/* 📦 LE DEPLIANT DES DOUBLONS IDENTIQUES (2026-09-11) — cf. dex.js, `rl-groupe`.
   Sept lignes rigoureusement identiques n'aidaient a decider de rien ; elles sont
   comptees et repliees. Le depliant CACHE, il ne retire rien : les cases sont
   toujours la, la selection marche a l'identique. */
.rl-groupe{ list-style: none; margin: 4px 0 0; }
.rl-groupe > details > summary{
  cursor: pointer; padding: 8px 12px; border-radius: 10px;
  /* ⚠️ LES MEMES COULEURS QUE `.rl-row`, SA VOISINE (dex.css) — pas une variable
     choisie au hasard : `--surface-2` sort en bleu nuit dans ce theme et la barre
     jurait sur le panneau creme. Un depliant doit se lire comme une ligne de la
     liste qu'il replie, pas comme un bloc etranger. */
  background: rgba(255, 255, 255, .03);
  border: 1px dashed var(--border);
  font-size: .92em; color: var(--text-dim);
  display: flex; align-items: center; gap: .5em;
}
.rl-groupe > details > summary::-webkit-details-marker{ display: none }
.rl-groupe > details > summary::before{ content: '▸'; font-size: .8em; opacity: .7 }
.rl-groupe > details[open] > summary::before{ content: '▾' }
.rl-groupe > details > summary em{ margin-left: auto; font-style: normal; font-weight: 700; opacity: .85 }
.rl-groupe > details > summary:hover{ background: rgba(255, 255, 255, .07) }
.rl-sous{ margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--border) }

/* ═══════════════════════════════════════════════════════════════════════════════
   RETOURS DE L'ADMINISTRATEUR DU 2026-09-11 — QUATRE DÉFAUTS, MESURÉS AVANT D'ÊTRE
   CORRIGÉS. Aucun réglage « à l'œil » : chaque valeur ci-dessous vient d'un relevé
   dans le navigateur, et la mesure est rappelée à côté de la règle.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · « TOUS LES REBORDS HAUT À GAUCHE DÉPASSENT » ──────────────────────────
   CAUSE MESURÉE. Le langage néon de `dex.css` CHANFREINE : `--cut-panel:
   18px 5px 18px 5px`, `--cut-btn: 13px 4px`, `--cut-chip: 9px 3px` — grand coin en
   haut à gauche, minuscule en haut à droite. Le §4 de ce fichier dit arrondir
   « UNIFORMÉMENT », mais il ne vise qu'une liste de sélecteurs écrite à la main :
   tout ce qu'elle a oublié garde le chanfrein.
   AUDIT (pas l'œil) : 9 éléments à coins asymétriques restaient à l'écran, dont la
   MODALE (12px / 4px / 12px / 4px) et le bloc du logo (18 / 5). C'est exactement ce
   qu'il voit « dépasser » — un coin quatre fois plus grand que son voisin.
   ⚠️ LE PLATEAU DE COMBAT EST EXCLU : il garde son langage néon (décision admin),
   et il porte déjà sa propre exception plus haut dans ce fichier. */
.modal, .modal-title, .brand, .lang-switch, .landing-card, .pp-wrap,
.no-results, .state, .state-loading, .state-error{
  border-radius: 12px;
}
.lang-switch{ border-radius: 99px; }
/* l'en-tête de modale épouse le haut du panneau, et rien d'autre */
.modal-title{ border-radius: 10px 10px 0 0; }

/* ── 2 · L'INVENTAIRE N'ÉTAIT PAS HABILLÉ DU TOUT ──────────────────────────────
   CAUSE MESURÉE : ce fichier ne contenait AUCUNE règle pour `.inv-*` ni pour
   `.shop-owned-*`. Les pastilles du thème sombre tombaient donc telles quelles sur
   le papier crème. Couleurs calculées relevées à l'écran :
     · compteur  : texte rgb(234,240,255) sur fond rgba(0,229,255,.10)
                   par-dessus une modale rgb(253,247,234) -> contraste ~1,05:1,
                   autrement dit INVISIBLE (c'est la pastille vide de sa capture) ;
     · pastille  : fond rgb(38,26,71) — violet nuit sur du parchemin ;
     · quantité  : rgb(255,206,106) sur ce violet -> le « ×16 » illisible.
   On ne change pas le HTML : c'est de l'habillage, et le même balisage sert la
   boutique. */
.inv-intro{ color: var(--k-encre2); }
.inv-count{
  font-family: var(--k-serif);
  color: var(--k-encre);
  background: var(--k-papier2);
  border: 1px solid var(--k-bord);
  box-shadow: none;
}
.inv-note{ color: var(--k-encre2); }
.inv-note b{ color: var(--k-or); }
.shop-owned-chip{
  background: var(--k-panneau);
  border: 1px solid var(--k-bord);
  border-radius: 99px;
  box-shadow: 0 1px 3px rgba(74, 58, 38, .08);
}
.shop-owned-chip:hover{ background: #fff; border-color: var(--k-or); }
.shop-owned-name{ color: var(--k-encre); }
/* La QUANTITÉ est l'information : elle devient une pastille à elle, pas un mot
   perdu en bout de ligne. Chiffres alignés (tabular) — deux pastilles l'une sous
   l'autre ne doivent pas danser. */
.shop-owned-chip .shop-owned-x{
  color: #6a4a12;
  background: var(--k-or-clair);
  border: 1px solid var(--k-or);
  border-radius: 99px;
  padding: 1px 8px;
  margin-left: 2px;
  font-variant-numeric: lining-nums tabular-nums;
}
.shop-owned{ background: var(--k-papier2); border-color: var(--k-bord); }
.shop-owned-title{ color: var(--k-encre); font-family: var(--k-serif); }
.shop-owned-hint{ color: var(--k-encre2); }
.inv-empty{ color: var(--k-encre2); }

/* ── 3 · LES COINS DE LA CARTE ─────────────────────────────────────────────────
   CAUSE MESURÉE, dans le FICHIER de la carte composée (Hana.webp, 731×1024) :
   ses coins sont transparents sur un rayon d'environ 55 px en haut (7,5 % de la
   largeur) et ~65 px en diagonale. La tuile, elle, coupait à 14 px sur 248 px de
   large, soit 4,7 % : elle arrondissait MOINS que la carte. Entre les deux courbes
   restait un coin d'illustration nue — le « rebord qui dépasse des coins ».
   LA GÉOMÉTRIE EXACTE VIENT DU MASQUE `-cadre.webp` — le fichier qui dit au pixel
   près où est le cadre. Relevé sur `Hana-cadre.webp` (731×1024) :
     · marge gauche/droite  10 px = 1,37 % de la largeur
     · marge haut/bas        9 px = 0,88 % de la hauteur
     · rayon du coin        58 px = 7,93 % de la largeur
   On découpe donc à CES valeurs : l'illustration qui débordait du cadre disparaît,
   et le cadre garde sa courbe entière. Dans `inset()`, le rayon se mesure sur la
   boîte DÉJÀ rognée — 7,93 % de l'élément font 8,15 % de cette boîte — et le
   vertical suit le format de la carte (58 px sur 1024 = 5,66 %, soit 5,76 % de la
   boîte rognée). Tout en POURCENTAGE : la grille change de taille, pas la forme.
   ⚠️ Un `border-radius` seul ne suffisait pas : il ne rogne pas la marge droite et
   gauche, et sa courbe partait du coin de l'ÉLÉMENT, pas de celui du cadre — le
   croissant d'illustration restait visible (mesuré : première tentative à 7,5 %). */
.grid > .card .ig-carte-reelle{
  clip-path: inset(0.88% 1.37% round 8.15% / 5.76%);
}

/* ── 4 · « NV.1 », ET LE NOMBRE DE CARTES ──────────────────────────────────────
   MESURE : `.card-level` s'affichait en **Palatino Linotype, 9,92 px** — une
   police de roman pour un niveau de jeu, c'est le « vieux texte mal fait ». La
   page charge DÉJÀ Orbitron et Rajdhani (c'est ce que portent ses cartes) : on
   s'en sert, plutôt que d'ajouter une police de plus.
   Et le compteur d'exemplaires était à 162 px sur une tuile de 248 (au milieu) :
   il part à droite, où on le cherche. */
.grid > .card .card-overlay .card-meta{ width: 100%; }
.grid > .card .card-copies{ margin-left: auto; }
.grid > .card .card-level{
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--k-encre2);
}
.grid > .card .card-copies{
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}
.grid > .card .card-number{ font-family: 'Rajdhani', 'Segoe UI', sans-serif; font-style: normal; }
/* Les deux derniers chanfreins de l'audit : ils vivent sous des sélecteurs PLUS
   SPÉCIFIQUES dans dex.css (`.sidebar .brand` = 0,2,0 et
   `.modal:not(.shop-framed) .modal-title` = 0,3,0). Une règle à un seul nom de
   classe perdait la cascade en silence — le défaut CSS n°1 de ce projet. On les
   égale, on ne les dépasse pas d'un !important. */
.sidebar .brand{ border-radius: 12px; }
.modal:not(.shop-framed) .modal-title{ border-radius: 10px 10px 0 0; }

/* ── 5 · LA TYPOGRAPHIE DE L'INTERFACE ────────────────────────────────────────
   Retour admin : « la police utilisée ne fait pas jeu vidéo, c'est trop nul ».
   MESURE, et il a raison sans discussion possible :
     --font-ui  : system-ui, -apple-system, Segoe UI, Roboto, Arial…  (Windows)
     --font-num : Palatino Linotype, Book Antiqua, Georgia, Times…    (un ROMAN)
     --k-serif  : Georgia, Palatino, Times
   Aucune police de jeu nulle part — alors que les CARTES, elles, sont écrites en
   Orbitron et Rajdhani, et que ces deux polices sont DÉJÀ chargées par la page.
   L'interface s'aligne donc sur ses propres cartes. Zéro téléchargement de plus.

   ⚠️ ON GARDE LE PAPIER ET L'ENCRE : ce lot change les LETTRES, pas la peau. Le
   carnet reste un carnet — c'est la typo qui était hors sujet, pas le parchemin.
   ⚠️ REPLIS CONSERVÉS : si Google Fonts ne répond pas, on retombe sur les mêmes
   familles qu'avant. Une police absente ne doit jamais casser une mise en page. */
:root{
  --font-ui:  'Rajdhani', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  /* ⚠️ LES CHIFFRES NE SONT PAS EN ORBITRON, ET C'EST UNE MESURE. Essaye faite,
     capture a l'appui : le ZERO d'Orbitron est un rectangle barre d'une diagonale.
     Sur « 0 POINTS », « 0 % » et « 0/1 » il se lit comme un GLYPHE MANQUANT — la
     page a l'air cassee la ou elle annonce justement qu'il n'y a rien. Rajdhani a
     des chiffres nets, alignes, et reste une police de jeu. Orbitron garde les
     TITRES, ou il n'y a pas de zero isole. */
  --font-num: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --k-serif:  'Orbitron', Georgia, 'Palatino Linotype', serif;
}
/* Rajdhani est étroite et haute : à taille égale elle paraît plus petite que
   system-ui. On rattrape sur le corps de texte, pas sur les titres (Orbitron, lui,
   est large — l'augmenter ferait déborder les libellés longs des 4 langues). */
body{ font-size: 1.03rem; }
.side-title, .brand-title, .modal-title{ letter-spacing: .04em; }
/* Le compteur de POINTS était sur la police de TITRE (`--k-serif`, désormais
   Orbitron) : son zéro redevenait le rectangle barré. Un nombre se lit avec la
   police des NOMBRES — capture à l'appui, « 0 POINTS » affichait un glyphe qui
   ressemblait à une erreur de chargement. */
.points-badge-value{
  font-family: var(--font-num);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ── 6 · LES PUCES DE RARETÉ SUR DU PAPIER ────────────────────────────────────
   Le registre `/rarities` donne à la CÉLESTE la couleur `#ffffff`. Sur le thème
   néon d'origine (fond `#0b0f1a`) elle éclate ; sur le parchemin `#faf1e0` elle
   DISPARAÎT — c'est le rond vide de sa capture, et le même sort attend toute
   couleur claire qu'il choisira un jour.
   On ne touche PAS à ses couleurs : elles servent à tout le jeu (Twitch, Discord,
   cartes, bandeaux) et c'est son registre. On rend seulement la puce lisible SUR
   CE FOND : un cerne d'encre, et l'ombre néon retirée (elle bavait sur le papier).
   Une couleur claire garde donc sa forme, une couleur foncée ne change pas. */
.rarity-stat .dot{
  box-shadow: inset 0 0 0 1px rgba(74, 58, 38, .30), 0 1px 2px rgba(74, 58, 38, .18);
  border: 1px solid rgba(74, 58, 38, .45);
  width: 11px; height: 11px;
}