/* PRONO 27 — palette « Pop néon » = Tricolore pop (fond clair) + Néon arcade (accents). ACTIVE. Couleurs seules (typo et mise en page : app.css). */
:root { color-scheme: light; --papier:#f4f1ff; --carte:#ffffff; --encre:#150a33; --encre-douce:#5d5384; --enveloppe:#6a2cff; --tampon:#ff2fb9; --filet:#ddd3fb;
  --basique:#8a84ad; --rare:#0a8fd6; --ultra:#a21fe0; --or:#f0b400; --gagne:#12a05c; --perdu:#ff3b6e;
  --degrade: linear-gradient(135deg,#0c9ad8,#7420c8 55%,#d4199a); }
body { background: radial-gradient(800px 380px at 15% -100px,#e3d6ff 0%,transparent 70%), radial-gradient(600px 360px at 100% 0,#cdeeff 0%,transparent 65%), var(--papier); background-attachment: fixed; }
.top, nav.tabs { background: #170a3a; color: #f4eeff; border-color: #2d1a6b; }
.top .who span, nav.tabs button { color: #b9acec; }
nav.tabs button[aria-current="page"] { color: #fff; border-image: var(--degrade) 1; }
.logo { color: #fff; }
.logo b { color: #ff5fd0; }
.who, .who button { color: #f4eeff; }
.credits, .points { background: var(--degrade); color: #fff; }
.btn { background: var(--degrade); border-color: transparent; color: #fff; border-radius: 999px; box-shadow: 0 4px 14px rgba(138,43,226,.35); }
.btn.alt { background: transparent; color: var(--encre); border: 2px solid var(--ultra); box-shadow: none; }
.btn.danger { background: var(--tampon); color: #fff; }
.card { background: var(--carte); border-top-color: var(--filet); border-right-color: var(--filet); border-bottom-color: var(--filet); box-shadow: 0 2px 10px rgba(80,40,160,.08); }
.card[data-r="or"] { box-shadow: 0 0 0 2px rgba(240,180,0,.6), 0 0 18px rgba(240,180,0,.35); }
.badge { background: var(--tampon); color: #fff; }
.packfx-box { background: var(--degrade); }
.dots i.on { background: var(--ultra); }
.back-card { border-color: var(--ultra); color: var(--ultra); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(138,43,226,.08) 10px 20px); }
.rv-rare .c3d-face, .card.rv-rare { box-shadow: 0 0 0 2px rgba(10,143,214,.55), 0 0 18px rgba(23,195,255,.5); }
.rv-ultra_rare .c3d-face, .card.rv-ultra_rare { box-shadow: 0 0 0 2px rgba(162,31,224,.55), 0 0 24px rgba(196,92,255,.55); }
.rv-or .c3d-face, .card.rv-or { box-shadow: 0 0 0 2px rgba(240,180,0,.85), 0 0 30px rgba(255,214,60,.6); }

/* Création de compte */
.auth { padding-top: calc(28px + env(safe-area-inset-top)); justify-items: stretch; text-align: left; }
.auth > * { width: 100%; }
.auth-logo { font-size: 1.6rem; margin-bottom: 18px; color: var(--encre); }
.auth h1 { margin: 0 0 6px; }
.switch { margin: 0 0 18px; color: var(--encre-douce); }
.linklike { background: none; border: 0; padding: 4px 2px; color: var(--ultra); font-weight: 800; text-decoration: underline; cursor: pointer; }
.pwd { position: relative; }
.pwd input { padding-right: 52px; }
.eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: none; border: 0; font-size: 1.1rem; opacity: .7; }
.auth input[type=text], .auth input[type=email], .auth input[type=password] { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--filet); background: #fff; color: var(--encre); font-size: 1rem; }
.auth input:focus-visible { outline: none; border-color: var(--ultra); box-shadow: 0 0 0 3px rgba(138,43,226,.2); }
.auth .check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 2px solid var(--filet); border-radius: 12px; background: #fff; margin: 10px 0; }
.auth .check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ultra); flex: none; }
.auth .check a { color: var(--ultra); font-weight: 700; }
.auth .row { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.auth .btn { margin-top: 12px; }


/* Connexion */
.gbtn { gap: 10px; background: #fff !important; color: var(--encre) !important; border: 2px solid var(--filet) !important; }
.gbtn::before, .gbtn::after { display: none !important; }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--encre-douce); font-size: .9rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--filet); }
.forgot { text-align: right; margin: -6px 0 10px; }
.alt-login { margin-top: 18px; text-align: center; font-size: .9rem; }
.auth .lead { margin: 0 0 16px; }
.auth .row { display: flex; justify-content: space-between; margin-top: 12px; }