/* ==========================================================================
   Styles propres au site — tout ce qui n'existe pas dans le prototype.
   style.css (extrait de v4.html) reste la reference de la carte et des vues ;
   ici vivent l'authentification, la grille virtualisee, la boutique et la
   preuve de tirage. Meme langage : verre depoli, palette de lentille.
   ========================================================================== */

/* defs SVG hors ecran, sans attribut style (CSP) */
.defs-svg{position:absolute;width:0;height:0;overflow:hidden}

/* Teintes de famille de la serie 3 « Cosmos ».
   style.css porte celles du vivant (--t-mammifere, --t-plante...) et vient du
   prototype, qui ne connait pas cette serie : les siennes vivent donc ici.
   Sans elles, elCarte() retombe sur --iris-2 et les six familles se
   ressemblent toutes. */
:root{
  --t-planete:#E8A85C; --t-lune:#C6CEDB; --t-etoile:#FFD166;
  --t-nebuleuse:#FF8FC7; --t-galaxie:#A97BFF; --t-amas:#7FE0FF;
}

/* Choix de la collection en cours, sur la page des series.
   Le bouton reprend le .cta du prototype ; la serie deja active n'est pas un
   bouton eteint mais un ETAT — pastille allumee, contour a la couleur de la
   serie — pour qu'on voie d'un coup d'oeil laquelle on collectionne. */
.serie-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.serie-actions .cta.en-cours{
  background:transparent;color:var(--acc,#5AA8FF);box-shadow:none;cursor:default;
  border:1px solid color-mix(in srgb,var(--acc,#5AA8FF) 55%,transparent)}
.serie-actions .cta.en-cours::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--acc,#5AA8FF);flex:0 0 auto;
  box-shadow:0 0 10px color-mix(in srgb,var(--acc,#5AA8FF) 80%,transparent)}

/* bascule generique — la CSP interdit style="display:none" */
.cache{display:none!important}
#chargement.cache{display:none}
#chargement .petit{font-size:11px;letter-spacing:.04em;text-transform:none;color:var(--gris2)}

/* l'appel a creer un compte n'apparait qu'en mode anonyme */
.appel-compte{display:none}
.appel-compte.on{display:block}

/* le bouton fermer du prototype est fixe a l'ecran ; dans un panneau, il
   se colle au panneau */
.panneau .fermer{position:absolute;top:14px;right:14px;z-index:6}

/* ---------------- en-tete : compte ---------------- */
.bouton-compte{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
  border-radius:99px;border:1px solid var(--verre-bord);background:var(--verre);
  font-weight:600;font-size:13px;color:var(--txt);backdrop-filter:blur(12px);
  transition:.16s;white-space:nowrap}
.bouton-compte:hover{background:var(--verre-fort);border-color:rgba(255,255,255,.22)}
.bouton-compte .ic{width:15px;height:15px;color:var(--iris-1)}
.bouton-compte.connecte .ic{color:var(--iris-5)}

/* ---------------- en-tete : le son ----------------
   Un bouton de coupure toujours atteignable, et un curseur de volume qui se
   decouvre au survol ET au focus clavier : c'est ce :focus-within qui le rend
   accessible a la tabulation sans une ligne de script. Sur un pointeur
   grossier, ou le survol n'existe pas, le geste qui coupe le son deplie aussi
   le curseur (classe .deplie) — sinon le volume serait hors d'atteinte. */
.reglage-son{display:flex;align-items:center;--v:70%}
.bouton-son{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;border-radius:99px;
  border:1px solid var(--verre-bord);background:var(--verre);color:var(--iris-1);
  backdrop-filter:blur(12px);transition:.16s}
.bouton-son:hover{background:var(--verre-fort);border-color:rgba(255,255,255,.22)}
.bouton-son svg{width:17px;height:17px}
.bouton-son .onde-2{opacity:.6}
.reglage-son.muet .bouton-son{color:var(--gris2)}

.son-volume{-webkit-appearance:none;appearance:none;background:transparent;
  width:0;opacity:0;margin:0;height:26px;flex:none;pointer-events:none;cursor:pointer;
  transition:width .22s cubic-bezier(.2,.9,.3,1),opacity .18s,margin .22s}
.reglage-son:hover .son-volume,
.reglage-son:focus-within .son-volume,
.reglage-son.deplie .son-volume{width:78px;opacity:1;margin-left:9px;pointer-events:auto}
.son-volume::-webkit-slider-runnable-track{height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--iris-1) 0,var(--iris-3) var(--v),
    rgba(255,255,255,.14) var(--v))}
.son-volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:12px;height:12px;margin-top:-4px;border-radius:50%;background:#fff;
  box-shadow:0 0 8px var(--iris-2),0 1px 3px #000A}
.son-volume::-moz-range-track{height:4px;border-radius:99px;background:rgba(255,255,255,.14)}
.son-volume::-moz-range-progress{height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--iris-1),var(--iris-3))}
.son-volume::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;
  background:#fff;box-shadow:0 0 8px var(--iris-2),0 1px 3px #000A}
.son-volume:focus-visible{outline:2px solid var(--iris-2);outline-offset:3px;border-radius:99px}

/* ---------------- voile générique ---------------- */
.voile{position:fixed;inset:0;z-index:1100;background:#06050Cf2;
  backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,40px);overflow-y:auto}
.voile.on{display:flex}
.panneau{width:min(430px,94vw);background:rgba(13,15,23,.86);border:1px solid var(--verre-bord);
  border-radius:22px;padding:clamp(22px,3.4vw,34px);position:relative;
  backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.55)}
.panneau.large-p{width:min(620px,94vw)}
.panneau h2{margin:0 0 6px;font-size:24px;font-weight:800;letter-spacing:-.02em}
.panneau .sous{color:var(--gris);font-size:13.5px;margin:0 0 20px;line-height:1.6}

/* ---------------- formulaires ---------------- */
.champ{display:block;margin-bottom:14px}
.champ span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris2);font-weight:600;margin-bottom:6px}
.champ input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);
  border:1px solid var(--verre-bord);border-radius:10px;color:var(--txt);
  font:inherit;padding:11px 13px;transition:border-color .16s, background .16s}
.champ input:focus{outline:none;border-color:var(--iris-2);background:rgba(255,255,255,.08)}
.champ .aide{font-size:12px;color:var(--gris2);margin-top:5px;letter-spacing:0;
  text-transform:none;font-weight:500}
.form-erreur{display:none;border:1px solid #C0703C55;background:#C0703C14;color:#E8B48C;
  border-radius:10px;padding:11px 14px;font-size:13.5px;line-height:1.5;margin-bottom:14px}
.form-erreur.on{display:block}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:20px;flex-wrap:wrap}
.form-actions .cta{padding:12px 22px;font-size:14.5px}
.lien-bascule{font-size:13px;color:var(--gris);background:none;border:none;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lien-bascule:hover{color:var(--txt)}
.note-age{font-size:12px;color:var(--gris2);line-height:1.6;margin-top:16px;
  border-top:1px solid var(--bord);padding-top:12px}

/* profil */
.profil-lignes{border-top:1px solid var(--bord);margin:14px 0 18px}
.profil-lignes div{display:flex;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--bord);font-size:14px}
.profil-lignes span{color:var(--gris)}
.profil-lignes b{font-family:"JetBrains Mono",monospace;font-weight:600}
.actions-profil{display:flex;flex-direction:column;gap:9px}
.actions-profil button{padding:11px 16px;border-radius:10px;border:1px solid var(--bord);
  background:var(--verre);font-weight:600;font-size:13.5px;color:var(--txt);
  text-align:left;transition:.16s}
.actions-profil button:hover{background:var(--verre-fort)}
.actions-profil button.danger{border-color:#C0703C55;color:#E8A87C}
.actions-profil button.danger:hover{background:#C0703C1A}

/* ---------------- grille virtualisee ---------------- */
/* Le classeur du prototype posait toutes les cases dans une grille CSS ;
   3 001 cartes font ~30 000 noeuds. Ici le conteneur reserve la hauteur
   totale et seules les rangees visibles existent dans le DOM. */
.classeur-virtuel{position:relative}
.classeur-virtuel .case{position:absolute;top:0;left:0;margin:0}
.carte-attente{position:relative;width:100%;aspect-ratio:734/1024;border-radius:4.6%/3.3%;
  background:linear-gradient(160deg,#191627,#0E0C18);overflow:hidden;
  box-shadow:0 8px 22px #0007, 0 0 0 1px #FFFFFF0D}
.carte-attente::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.05) 50%,transparent 62%);
  animation:attente-balaye 1.4s linear infinite}
@keyframes attente-balaye{from{transform:translateX(-70%)}to{transform:translateX(70%)}}

/* ---------------- ouverture : bandeau de preuve ---------------- */
.preuve-mini{display:inline-flex;align-items:center;gap:8px;font-size:12px;
  color:var(--gris2);font-family:"JetBrains Mono",monospace;letter-spacing:.02em;
  background:var(--verre);border:1px solid var(--verre-bord);border-radius:99px;
  padding:6px 14px;backdrop-filter:blur(10px);max-width:92vw}
.preuve-mini .pastille-ok{width:7px;height:7px;border-radius:50%;background:var(--iris-1);
  box-shadow:0 0 8px var(--iris-1);flex:0 0 auto}
.preuve-mini b{color:var(--gris);font-weight:600}
.preuve-mini .tronque{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}

.bouton-verif{font-size:13px;color:var(--gris);border:1px solid var(--bord);
  border-radius:10px;padding:10px 18px;font-weight:600;transition:.16s}
.bouton-verif:hover{color:var(--txt);border-color:var(--iris-1)}

/* panneau de verification */
.verif-lignes{border-top:1px solid var(--bord);margin-top:16px;font-size:13px}
.verif-lignes>div{display:grid;grid-template-columns:150px 1fr;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--bord);align-items:baseline}
.verif-lignes dt{color:var(--gris2);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;font-weight:600}
.verif-lignes dd{margin:0;font-family:"JetBrains Mono",monospace;font-size:12px;
  word-break:break-all;color:var(--txt);line-height:1.55}
.verif-verdict{display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  padding:10px 16px;border-radius:10px;font-weight:700;font-size:13.5px}
.verif-verdict.ok{background:#22C55E1A;color:#4ADE80;border:1px solid #22C55E44}
.verif-verdict.ko{background:#C0703C1A;color:#E8A87C;border:1px solid #C0703C55}
.verif-note{font-size:12.5px;color:var(--gris2);line-height:1.65;margin-top:14px}
.verif-note code{font-family:"JetBrains Mono",monospace;background:var(--verre);
  border:1px solid var(--verre-bord);border-radius:6px;padding:2px 7px;font-size:11.5px}

/* ---------------- boutique ---------------- */
.solde-barre{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* mise en vente d'un doublon : deux canaux clairement nommes */
.dbl .vente{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.dbl .vente .canal{flex:1 0 100%;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris2);font-weight:700;margin-top:2px}
.etagere-tete b.plein{color:var(--iris-5)}
.dbl .vente input{flex:1;min-width:0;box-sizing:border-box;background:rgba(255,255,255,.05);
  border:1px solid var(--verre-bord);border-radius:9px;color:var(--txt);
  font:inherit;font-size:12.5px;padding:7px 9px;font-family:"JetBrains Mono",monospace}
.dbl .vente input:focus{outline:none;border-color:var(--iris-2)}
.dbl .vente input::-webkit-outer-spin-button,
.dbl .vente input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dbl .vente button{padding:7px 13px;border-radius:9px;font-size:12px;font-weight:700;
  border:1px solid var(--iris-1);color:var(--iris-1);transition:.16s;white-space:nowrap}
.dbl .vente button:hover{background:var(--iris-1);color:#08090F}
.dbl .vente select{box-sizing:border-box;background:rgba(255,255,255,.05);
  border:1px solid var(--verre-bord);border-radius:9px;color:var(--txt);
  font:inherit;font-size:12px;padding:7px 6px;font-family:"JetBrains Mono",monospace}
.dbl .vente select:focus{outline:none;border-color:var(--iris-2)}
.dbl .vente select option{background:#12141D}

/* ---------------- encheres ---------------- */
.annonce .reste{font-size:11px;color:var(--gris2);font-family:"JetBrains Mono",monospace;
  white-space:nowrap}
.annonce.mene{border-color:#3FD6A455;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 16px #3FD6A422}
.annonce .miser{display:flex;gap:7px}
.annonce .miser input{flex:1;min-width:0;box-sizing:border-box;background:rgba(255,255,255,.05);
  border:1px solid var(--verre-bord);border-radius:9px;color:var(--txt);
  font:inherit;font-size:12.5px;padding:7px 9px;font-family:"JetBrains Mono",monospace}
.annonce .miser input:focus{outline:none;border-color:var(--iris-2)}
.annonce .miser input::-webkit-outer-spin-button,
.annonce .miser input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.annonce .miser button{padding:7px 14px;border-radius:9px;font-size:12.5px;font-weight:700;
  background:var(--iris-5);color:#0A0B0F;white-space:nowrap}
.annonce .prix .v .gem{flex:0 0 auto}
.vendu{position:absolute;inset:0;display:grid;place-items:center;z-index:11;
  background:rgba(7,8,14,.55);border-radius:4.6%/3.3%;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--iris-1);font-size:14px}

/* ==========================================================================
   LE BOOSTER COMME OBJET
   Avant la premiere carte : un sachet qu'on attrape, qu'on retourne, dont la
   lumiere suit le doigt, et qu'on dechire par la languette. Meme matiere que
   le sachet de l'accueil (enveloppe irisee sombre, stries d'emballage),
   pousse au rang d'objet : crampes serties haut et bas, microtexte, foil.
   ========================================================================== */
/* La porte de sortie du sachet. Discrete — elle ne doit pas concurrencer
   l'objet — mais toujours la, et au meme endroit que toutes les croix du
   site. Elle ne parait qu'avant la dechirure : apres, il n'y a plus rien a
   annuler, les cartes sont servies. */
.ouverture-fermer{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;
  z-index:30;width:38px;height:38px;border-radius:50%;display:none;
  align-items:center;justify-content:center;font-size:15px;color:var(--gris2);
  background:var(--verre);border:1px solid var(--verre-bord);
  backdrop-filter:blur(12px);transition:color .16s,background .16s,transform .16s}
#ouverture.mode-booster .ouverture-fermer{display:flex}
.ouverture-fermer:hover{color:var(--txt);background:#FFFFFF16;transform:scale(1.06)}
.ouverture-fermer:focus-visible{outline:2px solid var(--iris-2);outline-offset:3px}

#scene-booster{display:none;flex-direction:column;align-items:center;gap:26px}
#ouverture.mode-booster #scene-booster{display:flex}
#ouverture.mode-booster #paquet,#ouverture.mode-booster #progression,
#ouverture.mode-booster .rang-ligne{display:none}

.booster-pivot{position:relative;width:min(300px,64vw,42vh);aspect-ratio:5/8;
  perspective:1500px;cursor:grab;touch-action:none;
  /* --ep : la DEMI-epaisseur. 7px sur 300px de large, soit la proportion d'un
     vrai sachet de cinq cartes (environ 3 mm sur 65). */
  --px:50%;--py:30%;--opa:0;--dech:0%;--ep:7px}
.booster-pivot:active{cursor:grabbing}
.booster-faces{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
/* La face ne rogne PAS : c'est .b-clip, a l'interieur, qui rogne les couches
   aux coins arrondis. La bande d'arrachage vit au-dessus du rognage — c'est
   ce qui lui permet de QUITTER le sachet a l'ouverture au lieu de glisser
   hors de vue a l'interieur d'une boite fermee. */
.booster-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:9px;
  container-type:inline-size;
  transform:translateZ(var(--ep));
  box-shadow:0 26px 60px #000C, 0 0 0 1px #FFFFFF1A}
.booster-face.arriere{transform:rotateY(180deg) translateZ(var(--ep))}
.b-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden}

/* ---- L'EPAISSEUR ----
   Un booster n'est pas une feuille : il a un ventre. Les deux faces reculent
   chacune d'une demi-epaisseur et quatre panneaux ferment la boite dans le
   meme espace 3D. Les COTES portent la crete du pli (sombre aux jonctions,
   clair au milieu : c'est un bombe, pas une tranche de carton) ; les BOUTS
   portent les dents de la crampe, parce que c'est la que l'usine a pince.
   A 90 degres on voit un objet, plus une ligne. */
.b-tranche{position:absolute;pointer-events:none;z-index:2}
.b-tranche.cote{top:7px;bottom:7px;width:calc(var(--ep) * 2);border-radius:1px;
  background:
    repeating-linear-gradient(0deg,#0000001F 0 2px,transparent 2px 5px),
    linear-gradient(90deg,#07060F 0%,#221A42 16%,#4A3688 42%,#5B3FA0 52%,
      #2A2050 76%,#08070F 100%)}
.b-tranche.droite{right:calc(var(--ep) * -1);transform:rotateY(90deg)}
.b-tranche.gauche{left:calc(var(--ep) * -1);transform:rotateY(-90deg)}
.b-tranche.bout{left:7px;right:7px;height:calc(var(--ep) * 2);
  background:
    repeating-linear-gradient(90deg,#241E42 0 9px,#3A3168 9px 18px),
    linear-gradient(180deg,#0A0816,#3A3168 48%,#0A0816);
  background-blend-mode:overlay}
.b-tranche.haut{top:calc(var(--ep) * -1);transform:rotateX(90deg)}
.b-tranche.bas{bottom:calc(var(--ep) * -1);transform:rotateX(-90deg)}
/* La bande arrachee emporte le haut du sachet : la tranche du haut part avec. */
.booster-pivot.ouvre .b-tranche.haut{opacity:0;transition:opacity .2s}

/* enveloppe : stries d'emballage sur un degrade irise sombre (celle du sachet) */
.b-enveloppe{position:absolute;inset:0;
  background:
    repeating-linear-gradient(102deg,#00000026 0 2px,transparent 2px 5px),
    linear-gradient(158deg,#1A1630 0%,#3A2A64 26%,#5B3FA0 44%,#2A1F52 66%,#141026 100%)}
.booster-face.arriere .b-enveloppe{
  background:
    repeating-linear-gradient(102deg,#00000026 0 2px,transparent 2px 5px),
    linear-gradient(202deg,#181430 0%,#2E2452 30%,#433180 52%,#221A44 74%,#100D20 100%)}

/* crampes serties : la pince d'usine, dents en degrade alterne */
.b-crampe{position:absolute;left:0;right:0;height:7.5cqw;z-index:6;
  background:
    repeating-linear-gradient(90deg,#241E42 0 9px,#3A3168 9px 18px),
    linear-gradient(180deg,#2E2756,#1A1533);
  background-blend-mode:overlay}
.b-crampe.haut{top:0;border-bottom:1px solid #FFFFFF24;
  box-shadow:0 2px 8px #0008, inset 0 -2px 3px #00000066, inset 0 1px 0 #FFFFFF22}
.b-crampe.bas{bottom:0;border-top:1px solid #FFFFFF18;
  box-shadow:0 -2px 8px #0006, inset 0 2px 3px #00000066, inset 0 -1px 0 #FFFFFF14}

/* languette : la zone qu'on tire, perforation pointillee sous la crampe.
   Au-dessus de la bande (z12) : c'est elle qui recoit le geste. */
.b-languette{position:absolute;left:0;right:0;top:0;height:15cqw;z-index:13;
  cursor:grab;touch-action:none}
.b-languette:active{cursor:grabbing}
.b-languette::before{content:'';position:absolute;left:2cqw;right:2cqw;top:8.4cqw;
  border-top:2px dashed #FFFFFF3D}
.b-languette i{position:absolute;top:2.6cqw;width:2.2cqw;height:2.2cqw;border-radius:50%;
  background:#0B0918;box-shadow:inset 0 1px 2px #000}
.b-languette i:nth-child(1){right:6cqw}
.b-languette i:nth-child(2){right:12cqw}
.b-languette i:nth-child(3){right:18cqw}

/* ---- la bande d'arrachage ----
   La piece d'emballage au-dessus de la perforation est un element a part :
   son bord inferieur est DECHIQUETE (clip-path), elle porte sa tranche
   d'enveloppe et la crampe. Tant qu'elle est en place, la couture est
   invisible ; a l'ouverture, c'est ELLE qui s'arrache et s'envole. */
.b-bande{position:absolute;left:0;right:0;top:0;height:11cqw;z-index:12;
  overflow:hidden;will-change:transform;border-radius:9px 9px 0 0;
  transform-origin:100% 92%;
  clip-path:polygon(0% 0%,100% 0%,100% 74%,96% 90%,91% 76%,85% 93%,79% 78%,
    72% 95%,65% 80%,58% 96%,51% 78%,44% 93%,37% 77%,30% 95%,23% 80%,
    16% 96%,10% 78%,5% 91%,0% 76%);
  filter:drop-shadow(0 2px 3px #0009)}
.b-bande-enveloppe{position:absolute;left:0;right:0;top:0;height:160cqw;
  background:
    repeating-linear-gradient(102deg,#00000026 0 2px,transparent 2px 5px),
    linear-gradient(158deg,#1A1630 0%,#3A2A64 26%,#5B3FA0 44%,#2A1F52 66%,#141026 100%)}
.b-bande .b-crampe.haut{position:absolute;box-shadow:0 2px 8px #0008,
  inset 0 -2px 3px #00000066, inset 0 1px 0 #FFFFFF22}

/* ---- LA MENTION IMPRIMEE ----
   Personne ne devine qu'un sachet a l'ecran se dechire. Alors le sachet le
   DIT, comme un vrai emballage le dit : une mention serigraphiee sur la
   crampe, encre pale sur les dents de la pince, avec les chevrons du sens du
   geste. Ce n'est pas une infobulle posee par-dessus l'objet — c'est de
   l'impression, elle vit sur la bande et elle s'envole avec elle. */
.b-tirez{position:absolute;left:0;right:0;top:0;height:7.5cqw;z-index:7;
  display:flex;align-items:center;gap:1.6cqw;padding-left:4cqw;
  pointer-events:none;--encre:#FFFFFFB0}
.b-tirez em{font-style:normal;font-size:3.6cqw;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--encre);
  text-shadow:0 1px 2px #000A, 0 0 7px #0009;transition:color .2s}
.b-tirez i{width:1.5cqw;height:1.5cqw;border-top:.5cqw solid var(--encre);
  border-right:.5cqw solid var(--encre);transform:rotate(45deg);
  filter:drop-shadow(0 1px 1px #000A);opacity:.75;transition:opacity .2s}

/* l'entaille : le bord dechire qui reste sur le sachet — ombre interieure,
   levre dentelee, filet de lumiere. Elle SE REVELE DERRIERE LE DOIGT : un
   masque la decouvre de gauche a droite au rythme de la coupe. */
.b-entaille{position:absolute;left:0;right:0;top:7.6cqw;height:4.6cqw;z-index:5;
  opacity:clamp(0, calc(var(--dechn, 0) * 6), 1);pointer-events:none;
  background:linear-gradient(180deg,#04030A 0%,#0B0918 58%,transparent 100%);
  clip-path:polygon(0% 24%,5% 39%,10% 26%,16% 44%,23% 28%,30% 43%,37% 25%,
    44% 41%,51% 26%,58% 44%,65% 28%,72% 43%,79% 26%,85% 41%,91% 24%,96% 38%,
    100% 22%,100% 100%,0% 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 var(--dech,0%),transparent var(--dech,0%));
  mask-image:linear-gradient(90deg,#000 0,#000 var(--dech,0%),transparent var(--dech,0%))}
.b-entaille::before{content:'';position:absolute;left:0;right:0;top:0;height:1.2cqw;
  background:linear-gradient(90deg,#4FE3D0AA,#5AA8FFCC 34%,#A97BFFCC 66%,#FF77C4AA);
  filter:blur(1.5px)}

/* ==========================================================================
   L'INVITE — comment on apprend que ce sachet s'ouvre a la main
   Trois etats, du plus discret au plus engage :
     .invite  au repos, face avant tournee vers le joueur : la bande RESPIRE,
              un filet de lumiere file le long de la perforation et les trous
              s'allument un par un — le geste est montre, pas ecrit ;
     .pret    le doigt est sur la languette : la bande se DECOLLE, la couture
              s'irise, l'encre s'allume. L'objet repond avant meme qu'on tire ;
     .franchi le point de rupture est passe : lacher ne referme plus rien, et
              la lame le dit d'un eclat.
   L'invite se tait definitivement des que le joueur a pose le doigt sur la
   languette : il sait, on n'insiste plus.
   ========================================================================== */
.b-invite{position:absolute;left:0;right:0;top:7.4cqw;height:1.6cqw;z-index:14;
  pointer-events:none;opacity:0;transition:opacity .32s;overflow:visible}
/* la couture s'irise faiblement : « il y a une ligne ici » */
.b-invite::before{content:'';position:absolute;left:2cqw;right:2cqw;top:.5cqw;
  height:.45cqw;border-radius:1cqw;
  background:linear-gradient(90deg,transparent,#4FE3D066 12%,#5AA8FF88 40%,
    #A97BFF88 66%,#FF77C466 88%,transparent);
  filter:blur(.5px)}
/* le filet de lumiere qui PART dans le sens du geste */
.b-invite::after{content:'';position:absolute;top:-.6cqw;left:0;width:26cqw;
  height:2.8cqw;border-radius:2cqw;opacity:0;
  background:radial-gradient(60% 50% at 50% 50%,#FFFFFF 0%,#B8FBF2AA 34%,
    #5AA8FF55 58%,transparent 76%);
  filter:blur(1px)}
.booster-pivot.invite .b-invite{opacity:1}
.booster-pivot.pret .b-invite{opacity:.85}
.booster-pivot.invite .b-invite::after,
.booster-pivot.pret .b-invite::after{animation:b-file 2.8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes b-file{
  0%{opacity:0;transform:translateX(-18%) scaleX(.4)}
  10%{opacity:.95}
  40%{opacity:.9;transform:translateX(70%) scaleX(.85)}
  54%{opacity:0;transform:translateX(112%) scaleX(.4)}
  100%{opacity:0;transform:translateX(112%) scaleX(.4)}
}
/* la bande respire : elle se souleve d'un cheveu et retombe */
.booster-pivot.invite .b-bande,
.booster-pivot.invite .b-languette{transform-origin:100% 92%;
  animation:b-respire 2.8s cubic-bezier(.34,.8,.4,1) infinite}
@keyframes b-respire{
  0%,64%,100%{transform:rotate(0deg) translateY(0)}
  16%{transform:rotate(-1.7deg) translateY(-.55cqw)}
  38%{transform:rotate(-.55deg) translateY(-.18cqw)}
}
/* les perforations s'allument de gauche a droite : la lumiere passe a travers */
.booster-pivot.invite .b-languette i{animation:b-perce 2.8s ease-in-out infinite}
.booster-pivot.invite .b-languette i:nth-child(3){animation-delay:0s}
.booster-pivot.invite .b-languette i:nth-child(2){animation-delay:.09s}
.booster-pivot.invite .b-languette i:nth-child(1){animation-delay:.18s}
@keyframes b-perce{
  0%,46%,100%{background:#0B0918;box-shadow:inset 0 1px 2px #000}
  12%{background:#3E6BC8;
    box-shadow:inset 0 1px 2px #000, 0 0 5px #5AA8FFCC, 0 0 13px #A97BFF88}
}
/* l'encre imprimee suit le meme souffle */
.booster-pivot.invite .b-tirez,.booster-pivot.pret .b-tirez{--encre:#F2EEFF}
.booster-pivot.invite .b-tirez i,.booster-pivot.pret .b-tirez i{opacity:1;
  animation:b-chevron 2.8s ease-in-out infinite}
.booster-pivot.invite .b-tirez i:nth-child(3){animation-delay:.1s}
.booster-pivot.invite .b-tirez i:nth-child(4){animation-delay:.2s}
.booster-pivot.pret .b-tirez i:nth-child(3){animation-delay:.1s}
.booster-pivot.pret .b-tirez i:nth-child(4){animation-delay:.2s}
@keyframes b-chevron{
  0%,52%,100%{transform:rotate(45deg) translate(0,0);opacity:.7}
  20%{transform:rotate(45deg) translate(.7cqw,-.7cqw);opacity:1}
}

/* LE DOIGT EST DESSUS : la bande se decolle vraiment, l'ombre se creuse.
   C'est la recompense avant l'effort — l'objet a repondu, on tire. */
.booster-pivot.pret .b-bande,
.booster-pivot.pret .b-languette{transform-origin:100% 92%;
  transform:rotate(-2.1deg) translateY(-.6cqw);
  transition:transform .22s cubic-bezier(.2,.95,.35,1)}
.booster-pivot.pret .b-bande{filter:drop-shadow(0 6px 8px #000C)}
.booster-pivot.pret .b-languette::before{border-top-color:#B8FBF2B8}

/* la dechirure au doigt : la bande PELE en volet depuis le cote encore
   attache — le bout gauche se souleve franchement et decouvre l'entaille.
   La languette voyage avec elle ; la capture de pointeur maintient le geste
   meme si la zone bouge sous le doigt. */
.booster-pivot.tire .b-invite{opacity:0}
.booster-pivot.tire .b-bande,
.booster-pivot.tire .b-languette{
  transform-origin:100% 92%;
  transform:rotate(calc(var(--dechn, 0) * -6.5deg))
            translateY(calc(var(--dechn, 0) * -1.6cqw));
  transition:none;animation:none}

/* la LAME : ligne de coupe nette et incandescente, AU-DESSUS de la bande,
   qui avance exactement sous le doigt */
.b-lame{position:absolute;left:0;right:0;top:8.2cqw;height:.7cqw;z-index:14;
  opacity:clamp(0, calc(var(--dechn, 0) * 8), 1);pointer-events:none;
  background:linear-gradient(90deg,#B8FBF2,#D8ECFF 40%,#FFFFFF 70%,#FFF6E8);
  box-shadow:0 0 6px #FFFFFFCC, 0 0 16px #5AA8FFB8, 0 0 34px #A97BFF77;
  transform:scaleX(var(--dechn, 0));transform-origin:left;border-radius:1cqw}
.b-lumiere{position:absolute;left:0;right:0;top:7.4cqw;height:3.6cqw;z-index:11;
  opacity:var(--dechn, 0);pointer-events:none;
  background:linear-gradient(90deg,#4FE3D0,#5AA8FF 34%,#A97BFF 66%,#FF77C4);
  filter:blur(5px);transform:scaleX(var(--dechn, 0));transform-origin:left}

/* le POINT DE CHAUFFE : le foyer qui suit le doigt au point de coupe */
.b-coupe{position:absolute;top:8.5cqw;left:var(--dech, 0%);width:7cqw;height:7cqw;
  margin-left:-3.5cqw;margin-top:-3.5cqw;z-index:15;pointer-events:none;
  opacity:clamp(0, calc(var(--dechn, 0) * 8), 1);
  background:
    radial-gradient(circle at 50% 50%,#FFFFFF 0%,#D8ECFF 18%,#5AA8FF55 40%,transparent 62%)}
.b-coupe::after{content:'';position:absolute;inset:-46%;
  background:conic-gradient(from 0deg,
    transparent 0deg,#FFFFFFB8 6deg,transparent 14deg,
    transparent 86deg,#B8FBF2AA 93deg,transparent 101deg,
    transparent 176deg,#FFFFFFB8 182deg,transparent 190deg,
    transparent 266deg,#D8C4FFAA 273deg,transparent 281deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(circle,#000 0%,transparent 62%);
  mask-image:radial-gradient(circle,#000 0%,transparent 62%);
  animation:coupe-tourne 1.1s linear infinite}
@keyframes coupe-tourne{to{transform:rotate(180deg)}}

/* LE POINT DE RUPTURE — au-dela, lacher ne referme plus le sachet : la
   dechirure se termine toute seule. Le geste doit donc SE SENTIR franchir un
   cran, sinon le joueur n'ose pas relacher. La lame s'embrase une fois, le
   foyer gonfle, et la ou le materiel le permet le doigt recoit un a-coup. */
.booster-pivot.franchi .b-lame{
  box-shadow:0 0 9px #FFFFFF, 0 0 24px #5AA8FFE0, 0 0 52px #A97BFF99;
  animation:b-rupture .36s cubic-bezier(.2,.8,.3,1)}
@keyframes b-rupture{
  0%{filter:brightness(3.2) saturate(1.4)}
  100%{filter:brightness(1) saturate(1)}
}
.booster-pivot.franchi .b-coupe{transform:scale(1.32)}
.b-coupe{transition:transform .2s cubic-bezier(.2,1.5,.4,1)}

/* une fois la bande arrachee, les outils de coupe s'eteignent */
.booster-pivot.ouvre .b-lame,.booster-pivot.ouvre .b-coupe,
.booster-pivot.ouvre .b-lumiere{opacity:0;transition:opacity .18s}

/* ---- l'instant de l'ouverture ----
   La bande S'ARRACHE le long du bord dechiquete et voltige — soulevee,
   retournee, emportee — pendant que la fente s'embrase. L'entaille parait,
   le corps reste un battement sous la lumiere, puis tombe. */
.booster-pivot.ouvre .b-bande{animation:b-arrache .56s cubic-bezier(.32,.6,.3,1) forwards}
@keyframes b-arrache{
  0%{transform:rotate(-6.5deg) translateY(-1.6cqw)}
  26%{transform:rotate(-11deg) translateY(-40%) translateX(-4%)}
  58%{transform:rotate(6deg) translateY(-120%) translateX(12%);opacity:1}
  100%{transform:rotate(17deg) translateY(-230%) translateX(36%);opacity:0;
    filter:drop-shadow(0 2px 3px #0009) blur(2px)}
}
.booster-pivot.ouvre .b-entaille{opacity:1}
.booster-pivot.ouvre .b-languette{opacity:0;pointer-events:none}
.booster-pivot.ouvre .booster-faces{
  transition:transform .44s cubic-bezier(.55,0,1,1) .2s,opacity .4s .2s,filter .44s .2s;
  transform:translateX(-26px) translateY(74px) rotate(-7deg) scale(.9)!important;
  opacity:0;filter:blur(1.5px)}

.b-eclat{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:visible}
/* la fente s'embrase */
.b-eclat .e-fente{position:absolute;left:-4%;right:-4%;top:6.5cqw;height:2.6cqw;
  border-radius:2cqw;
  background:linear-gradient(90deg,#4FE3D0,#5AA8FF 30%,#FFFFFF 50%,#A97BFF 70%,#FF77C4);
  filter:blur(1px);
  box-shadow:0 0 18px #5AA8FFCC, 0 0 44px #A97BFF88, 0 0 90px #4FE3D055;
  animation:e-fente .62s cubic-bezier(.2,.8,.4,1) forwards}
@keyframes e-fente{
  0%{opacity:0;transform:scaleX(.2);filter:blur(1px) brightness(1)}
  22%{opacity:1;transform:scaleX(1.04);filter:blur(1px) brightness(2.1)}
  60%{opacity:1;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(1.1) translateY(-2cqw);filter:blur(4px)}
}
/* l'eclair au sommet */
.b-eclat .e-flash{position:absolute;left:50%;top:7.5cqw;width:1cqw;height:1cqw;
  border-radius:50%;
  background:radial-gradient(circle,#FFFFFF 0%,#D8ECFF 22%,#A97BFF44 52%,transparent 70%);
  animation:e-flash .55s cubic-bezier(.15,.9,.3,1) forwards}
@keyframes e-flash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(46)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(74)}
}
/* l'onde de choc */
.b-eclat .e-onde{position:absolute;left:50%;top:7.5cqw;width:30cqw;height:30cqw;
  border-radius:50%;border:1.1cqw solid #FFFFFFB8;
  box-shadow:0 0 22px #5AA8FF99, inset 0 0 22px #A97BFF66;
  animation:e-onde .68s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes e-onde{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15);border-width:2.4cqw}
  14%{opacity:.95}
  100%{opacity:0;transform:translate(-50%,-50%) scale(3.1);border-width:.2cqw}
}
/* les rais : la lumiere sort en faisceaux, comme d'un diaphragme */
.b-eclat .e-rais{position:absolute;left:50%;top:7.5cqw;width:150cqw;height:150cqw;
  transform:translate(-50%,-50%);
  background:conic-gradient(from -8deg,
    transparent 0deg,#4FE3D0AA 5deg,transparent 13deg,
    transparent 47deg,#5AA8FFB8 53deg,transparent 62deg,
    transparent 100deg,#FFFFFF99 104deg,transparent 112deg,
    transparent 150deg,#A97BFFAA 156deg,transparent 165deg,
    transparent 205deg,#FF77C499 211deg,transparent 220deg,
    transparent 262deg,#5AA8FFAA 268deg,transparent 277deg,
    transparent 318deg,#FFC46B99 323deg,transparent 331deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(circle,#000 0%,#00000088 34%,transparent 62%);
  mask-image:radial-gradient(circle,#000 0%,#00000088 34%,transparent 62%);
  animation:e-rais .8s cubic-bezier(.2,.7,.35,1) forwards}
@keyframes e-rais{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0deg)}
  16%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.15) rotate(11deg)}
}
/* les etincelles montent de la fente */
.b-eclat i{position:absolute;top:7cqw;left:var(--el);width:var(--et);height:var(--et);
  border-radius:50%;background:var(--ec);
  box-shadow:0 0 8px var(--ec), 0 0 18px var(--ec);
  animation:e-etincelle var(--em) cubic-bezier(.2,.7,.4,1) var(--ed) both}
@keyframes e-etincelle{
  0%{opacity:0;transform:translateY(0) scale(.4)}
  14%{opacity:1;transform:translateY(-4cqw) scale(1)}
  100%{opacity:0;transform:translateY(var(--eh)) scale(.2)}
}

/* la pile arrive dans la lueur residuelle : le fond bat une fois,
   et la premiere carte JAILLIT de l'eclat avec un leger depassement */
#ouverture.revele .lueur{animation:lueur-bat .9s cubic-bezier(.2,.7,.4,1)}
@keyframes lueur-bat{
  0%{filter:brightness(2.6) saturate(1.5)}
  100%{filter:brightness(1) saturate(1)}
}
#ouverture.revele .slot.arrive{
  animation:carte-jaillit .64s cubic-bezier(.17,1.16,.3,1) backwards}
@keyframes carte-jaillit{
  0%{opacity:0;transform:translateY(128px) scale(.78)}
  55%{opacity:1}
  74%{transform:translateY(-7px) scale(1.015)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* ==========================================================================
   LE FILM — un plastique metallise froisse, pas un aplat colore
   Trois couches qui se repondent :
     .b-relief  les plis, FIXES : c'est une matiere, elle ne bouge pas ;
     .b-froisse le reflet mobile, MASQUE PAR LES MEMES PLIS — la lumiere ne
                s'allume que sur les aretes, et c'est de la que vient la
                sensation de pouvoir palper le sachet ;
     .b-brosse  les micro-rayures anisotropes du metallise.
   Le froissement est un bruit de turbulence etire (frequence basse en X,
   haute en Y) : cela donne des cassures longues, comme sur un vrai sachet,
   la ou un bruit isotrope donnerait du sable.
   ========================================================================== */
.b-relief{position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:.46;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.011 0.055' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size:320px 320px;
  background-position:var(--pli,0px) var(--pli2,0px)}

.b-froisse{position:absolute;inset:0;z-index:8;pointer-events:none;
  opacity:calc(.5 + .5 * var(--opa));
  mix-blend-mode:color-dodge;
  background:
    radial-gradient(56% 40% at var(--px) var(--py),
      #FFFFFF 0%,#CFE6FF88 26%,transparent 58%),
    linear-gradient(102deg,
      transparent calc(var(--px) - 30%), #4FE3D0 calc(var(--px) - 12%),
      #FFFFFF var(--px), #A97BFF calc(var(--px) + 12%),
      #FF77C4 calc(var(--px) + 22%), transparent calc(var(--px) + 34%));
  /* Le meme bruit sert de masque : le reflet n'existe que sur les plis. */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.011 0.055' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.6' intercept='-0.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.011 0.055' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.6' intercept='-0.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23m)'/%3E%3C/svg%3E");
  -webkit-mask-size:320px 320px;mask-size:320px 320px;
  -webkit-mask-position:var(--pli,0px) var(--pli2,0px);
  mask-position:var(--pli,0px) var(--pli2,0px);
  transition:opacity .25s}

/* micro-rayures du metallise : fines, orientees, elles scintillent au passage */
.b-brosse{position:absolute;inset:0;z-index:5;pointer-events:none;
  opacity:calc(.10 + .16 * var(--opa));mix-blend-mode:soft-light;
  background:repeating-linear-gradient(99deg,
    #FFFFFF00 0 1px,#FFFFFF 1px 1.5px,#FFFFFF00 1.5px 4px)}

/* LE CRISSEMENT : au frottement rapide, les plis sautent par a-coups.
   Pas de transition — un glissement doux ferait une onde liquide ; ce qu'on
   veut, c'est un craquement sec. */
.crisse .b-relief,.crisse .b-froisse{transition:none}
.crisse .b-froisse{opacity:1}
.crisse .b-relief{opacity:.62}

/* foil : la nappe irisee suit le pointeur, comme sur les cartes */
.b-foil{position:absolute;inset:0;z-index:7;pointer-events:none;
  opacity:calc(.22 + .5 * var(--opa));
  background:
    radial-gradient(140% 90% at var(--px) var(--py),#FFFFFF2E 0%,transparent 42%),
    linear-gradient(105deg,transparent calc(var(--px) - 24%),#4FE3D033 calc(var(--px) - 10%),
      #5AA8FF40 var(--px),#A97BFF33 calc(var(--px) + 10%),#FF77C426 calc(var(--px) + 18%),
      transparent calc(var(--px) + 30%));
  mix-blend-mode:screen;transition:opacity .3s}
.b-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.3;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size:180px 180px}
.b-micro{position:absolute;inset:-30%;z-index:3;pointer-events:none;
  transform:rotate(-24deg);opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='26'%3E%3Ctext x='0' y='8' font-family='monospace' font-size='5.4' letter-spacing='1.6' fill='%23ffffff'%3EBENJACORP %C2%B7 COLLEC %C2%B7%3C/text%3E%3Ctext x='36' y='20' font-family='monospace' font-size='5.4' letter-spacing='1.6' fill='%23ffffff'%3ECOLLEC %C2%B7 BENJACORP%3C/text%3E%3C/svg%3E");
  background-size:150px 26px}
.b-lisere{position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:9px;
  border:1px solid #FFFFFF1F;
  box-shadow:inset 0 1px 0 #FFFFFF33, inset 0 -22px 40px #0000004D}

/* contenu avant */
.b-contenu{position:absolute;inset:10cqw 6cqw;z-index:5;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:3.4cqw;
  text-align:center;pointer-events:none}
.b-marque{width:22cqw;height:22cqw;color:#E7D9AE;filter:drop-shadow(0 2px 6px #0009)}
.b-marque svg{width:100%;height:100%;display:block}
.b-mot{font-size:11cqw;font-weight:800;letter-spacing:-.01em;line-height:1;color:#F1F3F9;
  text-shadow:0 2px 8px #000A}
.b-mot i{font-style:normal;background:linear-gradient(96deg,#4FE3D0,#5AA8FF 40%,#A97BFF 70%,#FF77C4);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.b-serie{font-size:4cqw;letter-spacing:.3em;text-transform:uppercase;color:#DCD3FF;
  font-weight:600}
.b-filet{width:38cqw;height:.5cqw;border-radius:1cqw;
  background:linear-gradient(90deg,transparent,#FFFFFF3D,transparent)}
.b-region{font-size:6cqw;font-weight:800;color:#fff;letter-spacing:.02em;
  display:flex;flex-direction:column;gap:1.2cqw;text-shadow:0 1px 6px #0009}
.b-region em{font-style:normal;font-size:3cqw;letter-spacing:.34em;color:#B7ACE0;
  text-transform:uppercase;font-weight:600}
.b-nb{font-size:3.1cqw;letter-spacing:.12em;color:#B7ACE0;text-transform:uppercase}

/* contenu arriere */
.b-contenu.arriere{justify-content:flex-start;padding-top:6cqw;gap:3cqw}
.b-sceau{width:15cqw;height:15cqw;border-radius:50%;position:relative;
  background:radial-gradient(circle at 40% 34%,#1B2340,#0A0C18 70%);
  box-shadow:0 0 0 .7cqw #FFFFFF14, 0 2px 8px #0009}
.b-sceau span{position:absolute;inset:14%;border-radius:50%;
  border:.6cqw solid transparent;
  background:linear-gradient(140deg,#4FE3D0,#5AA8FF 34%,#A97BFF 66%,#FF77C4) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.b-titre-dos{font-size:3.6cqw;letter-spacing:.18em;text-transform:uppercase;
  color:#DCD3FF;font-weight:700}
.b-taux{width:100%;font-size:3.4cqw;color:#C9C2E4}
.b-taux div{display:flex;justify-content:space-between;padding:1.5cqw .5cqw;
  border-bottom:1px solid #FFFFFF14}
.b-taux b{font-family:"JetBrains Mono",monospace;font-weight:600;color:#fff}
.b-lot{width:100%;text-align:left;display:flex;flex-direction:column;gap:1.4cqw}
.b-lot em{font-style:normal;font-size:2.6cqw;letter-spacing:.1em;color:#B7ACE0;
  text-transform:uppercase}
.b-lot code{font-family:"JetBrains Mono",monospace;font-size:2.9cqw;line-height:1.5;
  color:#E9EDFA;word-break:break-all;background:#00000042;border:1px solid #FFFFFF14;
  border-radius:1.4cqw;padding:1.8cqw}
.b-note{font-size:2.7cqw;line-height:1.6;color:#B7ACE0;text-align:left}

.booster-actions{display:flex;flex-direction:column;align-items:center;gap:10px}
.booster-actions .cta{padding:13px 26px;font-size:15px}
/* Le raccourci, pas la vedette : un bouton de verre qui laisse le sachet
   porter l'invitation. Il reste parfaitement cliquable et garde le focus. */
.booster-actions .cta.discret{background:var(--verre);background-image:none;
  color:var(--gris);font-weight:600;font-size:13.5px;padding:10px 22px;
  border:1px solid var(--verre-bord);box-shadow:none;
  backdrop-filter:blur(10px);letter-spacing:.03em}
.booster-actions .cta.discret:hover{color:var(--txt);background:#FFFFFF14;
  border-color:#FFFFFF38;box-shadow:none}
.booster-actions .cta.discret:focus-visible{outline:2px solid var(--iris-2);
  outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .booster-pivot.ouvre .booster-faces,.booster-pivot.ouvre .b-crampe.haut{transition-duration:.01ms}
  /* L'invite perd son mouvement, pas son message : la couture reste irisee et
     l'encre reste allumee. Un joueur qui refuse les animations doit quand
     meme savoir que ce sachet se dechire. */
  .booster-pivot.invite .b-bande,.booster-pivot.invite .b-languette,
  .booster-pivot.invite .b-languette i,.booster-pivot.invite .b-tirez i,
  .booster-pivot.pret .b-tirez i,
  .booster-pivot.invite .b-invite::after,
  .booster-pivot.pret .b-invite::after{animation:none}
  .booster-pivot.invite .b-languette::before{border-top-color:#B8FBF2B8}
  .booster-pivot.invite .b-languette i{background:#3E6BC8;
    box-shadow:inset 0 1px 2px #000, 0 0 5px #5AA8FFCC}
}

/* ==========================================================================
   L'ETAL DE BOOSTERS — l'accueil met les sachets au premier plan
   Le nombre de sachets visibles est la reserve reelle (trois au plus, badge
   au-dela). C'est la face avant du VRAI booster ; l'eventail de cartes passe
   en toile de fond attenuee derriere.
   ========================================================================== */
.etal{position:absolute;inset:0;display:grid;place-items:center;z-index:5}
/* Le halo de reserve : tant qu'il reste un sachet, la pile RESPIRE dans une
   lueur irisee. C'est le seul element de l'accueil qui bouge tout seul, et
   c'est voulu — l'oeil y revient, et le clic suit. Reserve vide, il s'eteint :
   la page cesse de promettre ce qu'elle ne peut pas tenir. */
.etal::before{content:'';position:absolute;left:50%;top:50%;
  width:118%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  pointer-events:none;z-index:0;opacity:0;filter:blur(46px);
  background:radial-gradient(circle,#5AA8FF 0%,#A97BFF 32%,transparent 64%);
  transition:opacity .45s}
.etal.pleine::before{opacity:.15;animation:etal-souffle 5.5s ease-in-out infinite}
.etal.pleine:hover::before{opacity:.3}
@keyframes etal-souffle{
  0%,100%{opacity:.12;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.26;transform:translate(-50%,-50%) scale(1.08)}
}
/* La livraison : un booster vient de se recharger. Le sachet TOMBE dans la
   pile en pleine lumiere — le joueur qui passait par la voit son stock
   grandir sans avoir a lire un compteur. */
.etal.livraison .booster-etal.devant{
  animation:etal-livraison .85s cubic-bezier(.2,1.35,.35,1)}
@keyframes etal-livraison{
  0%{opacity:0;transform:translateY(-34px) scale(.88);filter:brightness(2.4) saturate(1.4)}
  55%{opacity:1}
  100%{transform:none;filter:none}
}
.etal.livraison::before{opacity:.42;transition:opacity .12s}

.booster-etal{position:absolute;height:clamp(272px,40vh,440px);width:auto;aspect-ratio:5/8;
  --px:50%;--py:30%;--opa:0;--ex:0deg;--ey:0deg;--ep:5px;
  transform:rotate(var(--r,0deg)) translate(var(--tx,0px),var(--ty,0px));
  transition:transform .35s cubic-bezier(.2,1,.35,1),filter .35s}
/* Le corps porte l'inclinaison ET l'espace 3D : c'est lui qui donne au sachet
   d'etal la meme epaisseur qu'au sachet qu'on tient. Sans ce niveau, la face
   ecrasait le preserve-3d et les tranches disparaissaient. */
.booster-etal .booster-corps{position:absolute;inset:0;transform-style:preserve-3d;
  transform:perspective(1100px) rotateY(var(--ex)) rotateX(var(--ey))}
.booster-etal .booster-face{position:absolute;inset:0}
.booster-etal.derriere1{--r:-9deg;--tx:-21%;--ty:4%;z-index:1;
  filter:brightness(.5) saturate(.75)}
.booster-etal.derriere2{--r:8deg;--tx:21%;--ty:6%;z-index:0;
  filter:brightness(.36) saturate(.65)}
.booster-etal.devant{z-index:3;cursor:pointer;
  animation:flotte 6s ease-in-out infinite}
.booster-etal.devant:hover,.booster-etal.devant:focus-visible{
  animation-play-state:paused;transform:translateY(-14px) scale(1.04)}
.booster-etal.devant:focus-visible{outline:2px solid var(--iris-1);outline-offset:6px}
/* La pastille d'ouverture : elle ne parait qu'au survol, sous le sachet, et
   dit ce que le clic fait. Le sachet porte deja « ouvrir ici » ; cette
   pastille-ci dit que l'objet ENTIER est le bouton. */
.booster-etal.devant::after{content:'Ouvrir';position:absolute;left:50%;bottom:-15px;
  z-index:9;pointer-events:none;white-space:nowrap;
  padding:7px 17px;border-radius:99px;
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#08090F;background:var(--iris);box-shadow:0 8px 22px #5AA8FF55;
  opacity:0;transform:translate(-50%,7px);transition:opacity .2s,transform .2s}
.booster-etal.devant:hover::after,.booster-etal.devant:focus-visible::after{
  opacity:1;transform:translate(-50%,0)}
.booster-etal.vide{cursor:default;animation:none;
  filter:grayscale(.7) brightness(.45)}
.booster-etal.vide::after{content:none}
.booster-etal .b-languette{pointer-events:none;cursor:default}
.etal-badge{position:absolute;top:8%;right:14%;z-index:6;
  background:var(--iris-5);color:#0A0B0F;font-weight:800;font-size:14px;
  padding:5px 13px;border-radius:99px;box-shadow:0 6px 18px #FFC46B44;
  font-family:"JetBrains Mono",monospace}

/* l'eventail de cartes recule : present, mais derriere les sachets */
.eventail .carte{width:clamp(104px,9.6vw,140px)!important;
  filter:brightness(.62) saturate(.82)}

/* Dans le pivot, les faces n'interceptent AUCUN evenement : le hit-testing
   d'une carte inclinee en preserve-3d diverge de sa surface peinte, et le
   survol gelait en plein geste. Le pivot recoit tout et pilote l'inclinaison
   (voir elPivot) ; le retournement au clic passe par lui aussi. */
.pivot .faces, .pivot .faces > *{pointer-events:none}

/* ==========================================================================
   FICHE — le flou d'arriere-plan vit sur un calque STATIQUE
   La fiche posait backdrop-filter sur le conteneur : chaque frame
   d'inclinaison de la carte invalidait le calque porteur du flou, et le
   navigateur re-echantillonnait tout l'arriere-plan — indolore sur l'accueil,
   ruineux sur la grille de collection et ses dizaines de cartes
   multi-degrades. Le flou vit desormais sur un ::before sans animation : il
   se calcule a l'ouverture, se met en cache, et la carte s'incline dans un
   calque qui ne le touche plus.
   ========================================================================== */
#fiche{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#fiche::before{content:'';position:absolute;inset:0;z-index:-1;
  background:#06050Cf2;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* ==========================================================================
   DUELS
   ========================================================================== */
.cta.petite{padding:9px 18px;font-size:13.5px;margin-left:auto}

.d-liste{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.d-ligne{display:flex;align-items:center;gap:16px;text-align:left;
  padding:13px 17px;border-radius:13px;background:var(--verre);
  border:1px solid var(--verre-bord);transition:.16s;font-size:14px}
.d-ligne:hover{border-color:rgba(255,255,255,.22);background:var(--verre-fort)}
.d-ligne.atoi{border-color:#3FD6A466;box-shadow:0 0 14px #3FD6A41F}
.d-ligne.victoire .etat-duel{color:#4ADE80}
.d-ligne.defaite .etat-duel{color:#F87171}
.d-ligne .qui{font-weight:700;min-width:130px}
.d-ligne .etat-duel{color:var(--gris);font-size:13px}
.d-ligne .mise{display:inline-flex;align-items:center;gap:6px;font-weight:700;
  font-size:13px;margin-left:auto}
.d-ligne .mise.amical{color:var(--gris2);font-weight:500}
.d-ligne .quand{color:#3FD6A4;font-size:12.5px;font-weight:700;min-width:52px;text-align:right}

.d-retour{color:var(--gris);font-size:13.5px;font-weight:600;margin-bottom:14px}
.d-retour:hover{color:var(--txt)}
.d-tete{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.d-tete h3{font-size:24px;font-weight:800;margin:0;letter-spacing:-.02em}
.d-score{font-family:"JetBrains Mono",monospace;font-size:20px;font-weight:700}
.d-score em{font-style:normal;font-size:12px;color:var(--gris2)}
.d-statut{color:var(--iris-1);font-size:13.5px;font-weight:600}
.d-tete .mise{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  font-weight:700;color:var(--gris)}
.d-refus{padding:9px 16px;border-radius:10px;border:1px solid var(--bord);
  color:var(--gris);font-size:13px;font-weight:600;margin-bottom:14px;transition:.16s}
.d-refus:hover{color:var(--txt);border-color:#C0703C88}

/* la scene d'une manche : ma carte, le choix, la carte adverse cachee */
.d-scene{display:grid;grid-template-columns:minmax(150px,220px) minmax(200px,1fr)
  minmax(150px,220px);gap:clamp(16px,3vw,42px);align-items:center;
  justify-content:center;margin:8px 0 26px}
.d-camp{display:flex;flex-direction:column;gap:10px;align-items:center}
.d-nom{font-size:12.5px;color:var(--gris2);letter-spacing:.05em}
.d-centre{display:flex;flex-direction:column;gap:9px;align-items:stretch}
.d-consigne{text-align:center;color:var(--gris);font-size:14px;line-height:1.6;
  margin-bottom:6px}
.d-stat{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px 17px;border-radius:11px;background:var(--verre);
  border:1px solid var(--verre-bord);font-size:14px;font-weight:600;transition:.16s}
.d-stat b{font-family:"JetBrains Mono",monospace;font-weight:700}
.d-stat:hover{border-color:var(--iris-1);background:var(--verre-fort);
  box-shadow:0 0 14px #4FE3D022}

/* ==========================================================================
   BALAYAGE VERTICAL — dissoudre un doublon d'un geste
   Le retour visuel arrive AVANT le relachement : on voit ce qui va se
   passer pendant qu'on tient encore la carte, donc on peut renoncer.
   ========================================================================== */
/* un doublon porte une pastille discrete : le geste ne se devine pas seul */
.slot.dissoluble .carte::after{
  content:'';position:absolute;top:8px;right:8px;z-index:12;
  width:22px;height:22px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 35%,#4FE3D0,#5AA8FF 70%);
  box-shadow:0 0 0 3px #07080E88, 0 2px 8px #0009;opacity:.9}

/* pendant le geste : la carte s'illumine en « on dissout » */
.slot.vers-dissolution .carte{
  box-shadow:0 0 0 2px #4FE3D0, 0 0 34px #4FE3D066, 0 12px 34px #000A;
  filter:saturate(1.15) brightness(1.06)}
.slot.vers-dissolution::after{
  content:'DISSOUDRE';position:absolute;left:50%;top:-30px;transform:translateX(-50%);
  font-size:11px;font-weight:800;letter-spacing:.18em;color:#0A0B0F;
  background:var(--iris-1);padding:5px 13px;border-radius:99px;
  box-shadow:0 6px 18px #4FE3D055;white-space:nowrap;pointer-events:none}

/* une nouvelle espece resiste : elle ne partira pas */
.slot.protegee .carte{
  box-shadow:0 0 0 2px var(--iris-5), 0 0 26px #FFC46B44, 0 12px 34px #000A}
.slot.protegee::after{
  content:'NOUVELLE ESPÈCE — GARDÉE';position:absolute;left:50%;top:-30px;
  transform:translateX(-50%);font-size:11px;font-weight:800;letter-spacing:.12em;
  color:#0A0B0F;background:var(--iris-5);padding:5px 13px;border-radius:99px;
  white-space:nowrap;pointer-events:none}

/* depart vertical, distinct du depart lateral */
.slot.dissout{
  transition:transform .34s cubic-bezier(.4,0,1,1),opacity .34s,filter .34s;
  transform:translateY(var(--py,-130%)) scale(.7);opacity:0;
  filter:brightness(1.5) saturate(1.4);pointer-events:none}

/* ---- la carte se defait sur place avant de partir ----
   Un eclat blanc traverse, la carte blanchit puis se retire : c'est
   l'instant ou elle cesse d'etre une carte pour devenir de la matiere. */
.se-desagrege{animation:desagrege .5s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes desagrege{
  0%{filter:none}
  22%{filter:brightness(2.1) saturate(1.6) contrast(.9)}
  55%{filter:brightness(1.5) saturate(1.3) blur(1.5px);opacity:.75}
  100%{filter:brightness(1.2) blur(5px);opacity:0;transform:scale(.9)}
}

/* ---- les grains qui volent vers le compteur ---- */
.pluie-poussiere{position:fixed;inset:0;z-index:1200;pointer-events:none;overflow:visible}
.grain-poussiere{
  position:fixed;display:block;border-radius:2px;
  background:linear-gradient(135deg,#FFFFFF,var(--g,#5AA8FF) 55%);
  box-shadow:0 0 8px var(--g,#5AA8FF), 0 0 18px var(--g,#5AA8FF);
  will-change:transform,opacity}

/* ---- le compteur accuse reception ---- */
.reserve-mini.recoit{animation:compteur-recoit .85s cubic-bezier(.2,.9,.3,1)}
.reserve-mini.recoit .gem{animation:gemme-recoit .85s cubic-bezier(.2,.9,.3,1)}
@keyframes compteur-recoit{
  0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
  28%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 22px #5AA8FF88;
      border-color:#5AA8FF88}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
}
@keyframes gemme-recoit{
  0%{transform:rotate(45deg) scale(1)}
  30%{transform:rotate(45deg) scale(1.5);filter:brightness(1.8)}
  100%{transform:rotate(45deg) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  .slot.dissout{transition-duration:.01ms}
  .se-desagrege,.reserve-mini.recoit,.reserve-mini.recoit .gem{animation:none}
}

/* ---------------- classement des duellistes ---------------- */
.classement{display:flex;flex-direction:column;gap:5px;margin-bottom:26px}
.cl-ligne{display:grid;grid-template-columns:36px minmax(0,1fr) 62px 96px 78px 56px 62px;
  gap:10px;align-items:center;padding:11px 15px;border-radius:11px;
  background:var(--verre);border:1px solid var(--verre-bord);font-size:13.5px}
.cl-ligne.entete{background:none;border:0;padding-bottom:2px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris2);font-weight:700}
.cl-ligne .rang{font-family:"JetBrains Mono",monospace;font-weight:700;color:var(--gris2)}
.cl-ligne.podium .rang{color:var(--iris-5)}
.cl-ligne.podium{border-color:#FFC46B33}
.cl-ligne .qui{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-ligne .qui em{font-style:normal;font-size:11px;color:var(--iris-1);font-weight:600}
.cl-ligne .n{text-align:right;color:var(--gris)}
.cl-ligne .taux{font-weight:700;color:var(--txt);font-family:"JetBrains Mono",monospace}
.cl-ligne.moi{border-color:#3FD6A455;background:var(--verre-fort)}
.d-moi-rang{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:13.5px;
  color:var(--gris);background:var(--verre);border:1px dashed var(--verre-bord)}
.cta.petite.cache{display:none}

@media(max-width:760px){
  .cl-ligne{grid-template-columns:30px minmax(0,1fr) 88px 56px;font-size:12.5px}
  .cl-ligne .n:nth-child(3),.cl-ligne .n:nth-child(5){display:none}
}

/* historique des manches */
.d-manches{display:flex;flex-direction:column;gap:6px;margin-bottom:24px}
.d-manche{display:flex;align-items:center;gap:14px;padding:10px 15px;
  border-radius:11px;background:var(--verre);border:1px solid var(--verre-bord);
  font-size:13.5px}
.d-manche .n{font-family:"JetBrains Mono",monospace;color:var(--gris2);width:16px}
.d-manche .cartes{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.d-manche .cartes em{font-style:normal;color:var(--gris2);font-size:12px}
.d-manche .stat{color:var(--gris);font-size:12.5px}
.d-manche .valeurs{font-size:13px}
.d-manche .issue{font-weight:700;font-size:12.5px;min-width:60px;text-align:right}
.d-manche.gagnee .issue{color:#4ADE80}
.d-manche.perdue .issue{color:#F87171}
.d-manche.nulle .issue{color:var(--gris2)}

/* composition du pont */
.d-composition{margin-bottom:24px}
.d-forme{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.d-forme label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;
  color:var(--gris);letter-spacing:.03em}
.d-forme input{background:rgba(255,255,255,.05);border:1px solid var(--verre-bord);
  border-radius:10px;color:var(--txt);font:inherit;font-size:14px;padding:10px 13px;
  min-width:210px}
.d-forme input:focus{outline:none;border-color:var(--iris-2)}
.d-pont{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.d-slot{position:relative;width:clamp(86px,8vw,116px);aspect-ratio:734/1024;
  border:1.5px dashed var(--verre-bord);border-radius:7px;display:grid;
  place-items:center;color:var(--gris2);font-size:20px;font-weight:800;
  font-family:"JetBrains Mono",monospace}
.d-slot.pris{border-style:solid;cursor:pointer}
.d-slot.pris:hover{border-color:#F8717188}
.d-slot i{position:absolute;top:-7px;left:-7px;width:22px;height:22px;
  border-radius:50%;background:var(--iris-5);color:#0A0B0F;font-style:normal;
  font-size:12px;font-weight:800;display:grid;place-items:center;z-index:5}
.d-choix .case{flex:0 0 clamp(104px,10vw,138px);cursor:pointer}
.d-actions{display:flex;justify-content:flex-end;margin-top:6px}

@media(max-width:760px){
  .d-scene{grid-template-columns:1fr 1fr;gap:14px}
  .d-centre{grid-column:1/-1;order:3}
}

.lien-oubli{display:block;margin:14px auto 0;font-size:12.5px;color:var(--gris2);
  transition:color .16s}
.lien-oubli:hover{color:var(--iris-2);text-decoration:underline}

/* ==========================================================================
   LE MOT-MARQUE — le dégradé court sur TOUTES les lettres
   Le logo n'était irisé que sur sa seconde moitié : la première restait
   blanche, ce qui coupait le mot en deux. Le dégradé s'applique désormais au
   conteneur, donc au mot entier, et se prolonge sans rupture d'une lettre à
   l'autre. Le balisage scindé reste en place (il ne coûte rien et le
   vérificateur de marque s'y appuie) — les deux moitiés héritent simplement
   du même remplissage.
   style.css étant régénéré depuis le prototype, ces règles vivent ici.
   ========================================================================== */
.logo .mot{background:var(--iris);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.logo .mot b{background:none;-webkit-text-fill-color:inherit;color:inherit}
/* le suffixe « · Règne » reste en gris : c'est une précision, pas la marque */
.logo .mot i{-webkit-text-fill-color:var(--gris2);color:var(--gris2)}

.dos .mot{background:linear-gradient(96deg,#4FE3D0,#5AA8FF 32%,#A97BFF 62%,#FF77C4);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* text-shadow disparaîtrait sous un remplissage transparent : c'est le
     filtre qui porte désormais le décollement du fond. */
  text-shadow:none;filter:drop-shadow(0 .3cqw 1.2cqw #000B)}
.dos .mot b{background:none;-webkit-text-fill-color:inherit;color:inherit}

.b-mot{background:linear-gradient(96deg,#4FE3D0,#5AA8FF 34%,#A97BFF 66%,#FF77C4);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 7px #000C)}
.b-mot i{background:none;-webkit-text-fill-color:inherit;color:inherit}

/* ---------------- acces externes ---------------- */
.acces-externes{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.acces-externes.cache{display:none}
.acces-externe{display:flex;align-items:center;gap:12px;justify-content:center;
  padding:11px 16px;border-radius:11px;background:var(--verre);
  border:1px solid var(--verre-bord);color:var(--txt);text-decoration:none;
  font-size:14px;font-weight:600;transition:.16s}
.acces-externe:hover{background:var(--verre-fort);border-color:rgba(255,255,255,.22)}
.acces-externe svg{width:19px;height:19px;flex:0 0 auto}
.ou-bien{display:flex;align-items:center;gap:12px;color:var(--gris2);font-size:12px;
  margin-top:4px}
.ou-bien::before,.ou-bien::after{content:'';flex:1;height:1px;background:var(--bord)}
.champ .optionnel{font-style:normal;color:var(--gris2);font-weight:400}

/* ---------------- parrainage (profil) ---------------- */
.parrainage-bloc{border-top:1px solid var(--bord);margin-top:16px;padding-top:14px}
.parrainage-bloc h3{font-size:14px;font-weight:700;margin:0 0 8px}
.parrainage-bloc p{font-size:13px;color:var(--gris);margin:0 0 10px;line-height:1.55}
.parrainage-bloc .petit{font-size:12px;color:var(--gris2)}
.code-parrain{display:flex;gap:9px;align-items:center;margin-bottom:8px}
.code-parrain code{flex:1;font-family:"JetBrains Mono",monospace;font-size:17px;
  letter-spacing:.22em;text-align:center;background:#00000042;
  border:1px solid var(--verre-bord);border-radius:10px;padding:9px 12px;color:var(--iris-1)}
.code-parrain button{padding:9px 15px;border-radius:10px;font-size:12.5px;font-weight:700;
  border:1px solid var(--iris-1);color:var(--iris-1);transition:.16s}
.code-parrain button:hover{background:var(--iris-1);color:#08090F}

/* ---------------- bandeau beta ---------------- */
.bandeau-beta{position:sticky;top:0;z-index:700;display:flex;gap:10px;
  align-items:center;justify-content:center;padding:7px 40px 7px 14px;
  background:linear-gradient(90deg,#241C46,#1A2340);border-bottom:1px solid var(--verre-bord);
  font-size:12.5px;color:#C9C2E4;text-align:center}
.bandeau-beta b{color:var(--iris-1);letter-spacing:.06em}
.bandeau-beta a{color:var(--txt);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--iris-5)}
.bandeau-beta button{position:absolute;right:8px;width:26px;height:26px;
  border-radius:50%;color:var(--gris);font-size:13px}
.bandeau-beta button:hover{background:var(--verre-fort);color:var(--txt)}
.bandeau-beta.cache{display:none}

/* ---------------- messages furtifs ---------------- */
#toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:1500;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.toast{background:rgba(13,15,23,.92);border:1px solid var(--verre-bord);color:var(--txt);
  border-radius:12px;padding:11px 18px;font-size:13.5px;font-weight:600;
  backdrop-filter:blur(16px);box-shadow:0 14px 40px rgba(0,0,0,.5);
  animation:toast-entre .3s cubic-bezier(.2,1.2,.35,1) backwards;max-width:min(480px,92vw)}
.toast.erreur{border-color:#C0703C66;color:#E8B48C}
@keyframes toast-entre{from{opacity:0;transform:translateY(12px) scale(.96)}}

/* ---------------- accueil anonyme ---------------- */
.appel-compte{border:1px dashed var(--verre-bord);border-radius:16px;background:var(--verre);
  padding:26px;text-align:center;color:var(--gris);font-size:14px;line-height:1.7;
  margin:20px 0}
.appel-compte b{color:var(--txt)}
.appel-compte .cta{margin-top:14px;padding:12px 24px;font-size:14.5px}

@media(max-width:620px){
  .verif-lignes>div{grid-template-columns:1fr;gap:2px}
  .preuve-mini .tronque{max-width:120px}
}