:root {
  --fond: #f4efe6;
  --papier: #fffdf8;
  --encre: #1d1a16;
  --encre-douce: #6b645a;
  --trait: #ddd4c4;
  --accent: #b8322a;
  --accent-fonce: #8e231d;
  --tapis-vert: #2f5d3a;
  --commune: #8a8378;
  --peu_commune: #2f7d5b;
  --rare: #2c5fa8;
  --legendaire: #c8922a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #17150f; --papier: #221f18; --encre: #f1ece2; --encre-douce: #a59d90; --trait: #3a352b;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--encre);
       font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x: hidden; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.cache { display: none !important; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fond) 92%, transparent);
          backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); }
.entete .int { max-width: 1280px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 14px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.marque img { width: 36px; height: 36px; border-radius: 50%; }
.marque b { font: 900 20px/1 Georgia, serif; letter-spacing: -.01em; }
.marque b span { color: var(--accent); }
nav { display: flex; gap: 2px; }
nav a { text-decoration: none; padding: 7px 12px; border-radius: 8px; color: var(--encre-douce); font-weight: 550; }
nav a[aria-current="page"] { color: var(--encre); background: var(--papier); box-shadow: inset 0 0 0 1px var(--trait); }
.compte { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.fils { font-variant-numeric: tabular-nums; font-weight: 650; padding: 5px 10px; border-radius: 99px;
        background: var(--papier); border: 1px solid var(--trait); white-space: nowrap; }
.demo { background: #f6d77a; color: #3d2c00; text-align: center; font-size: 13px; padding: 6px 16px; }
.demo button { background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0 4px; color: inherit; }
@media (max-width: 640px) {
  .entete .int { flex-wrap: wrap; gap: 8px; }
  .marque b { font-size: 17px; }
  nav { order: 3; width: 100%; justify-content: space-between; }
  nav a { flex: 1; text-align: center; padding: 6px 4px; font-size: 14px; }
}

/* ---------- Boutons, champs ---------- */
.bouton { border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 650; cursor: pointer;
          background: var(--accent); color: #fff; transition: background .15s, transform .1s; }
.bouton:hover { background: var(--accent-fonce); }
.bouton:active { transform: scale(.97); }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.bouton.second { background: var(--papier); color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait); }
.bouton.second:hover { background: var(--fond); }
.bouton.petit { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.puce { border: 1px solid var(--trait); background: var(--papier); color: var(--encre); border-radius: 99px;
        padding: 5px 12px; cursor: pointer; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.puce[aria-pressed="true"] { border-color: var(--encre); background: var(--encre); color: var(--papier); }
.puce i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
select, input { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; max-width: 100%; min-width: 0;
                border: 1px solid var(--trait); background: var(--papier); color: var(--encre); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.erreur { color: var(--accent); font-size: 14px; min-height: 1.2em; margin: 6px 0 0; }

main { max-width: 1280px; margin: 0 auto; padding: 16px 16px 60px; }
h1.titre { font: 900 clamp(26px, 5vw, 40px)/1.05 Georgia, serif; margin: 12px 0 4px; letter-spacing: -.02em; }
.sous { color: var(--encre-douce); margin: 0 0 16px; }

/* ---------- Carte (face) ---------- */
.carte { --c: var(--commune); position: relative; border-radius: 12px; padding: 7px; background: var(--c);
         box-shadow: 0 1px 2px rgb(0 0 0 / .15); display: flex; flex-direction: column; border: 0; text-align: left;
         color: #fff; width: 100%; transition: transform .15s ease, box-shadow .15s ease; }
button.carte { cursor: pointer; }
button.carte:hover, button.carte:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 22px rgb(0 0 0 / .22); outline: none; }
.carte.peu_commune { --c: var(--peu_commune); }
.carte.rare { --c: linear-gradient(145deg, #1f4a8a, #4f86d6 45%, #1f4a8a); }
.carte.legendaire { --c: linear-gradient(135deg, #8a5a12, #f3cf6b 30%, #b07a1e 55%, #f8e3a0 75%, #8a5a12); }
.carte .img { aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: #fff; position: relative; }
.carte .img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.carte .pied { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; padding: 6px 2px 0;
               text-shadow: 0 1px 1px rgb(0 0 0 / .35); }
.carte.legendaire .pied { text-shadow: 0 1px 2px rgb(60 35 0 / .8); }
.carte .nom { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte .num { opacity: .85; font-variant-numeric: tabular-nums; flex: none; }
.carte .qte { position: absolute; top: 12px; right: 12px; background: rgb(20 16 10 / .82); color: #fff;
              font: 700 12px/1 system-ui; padding: 4px 7px; border-radius: 99px; }
.carte .neuf { position: absolute; top: 12px; left: 12px; background: var(--accent); color: #fff;
               font: 800 11px/1 system-ui; padding: 5px 8px; border-radius: 99px; letter-spacing: .04em;
               animation: pop .4s .2s both cubic-bezier(.3, 1.6, .5, 1); }
.holo { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0;
        background: linear-gradient(115deg, transparent 20%, rgb(255 120 200 / .55) 35%, rgb(120 220 255 / .55) 45%,
                    rgb(255 245 140 / .55) 55%, transparent 70%) var(--hx, 50%) 0 / 250% 100%;
        transition: opacity .2s; }
.carte.legendaire:hover .holo, .carte.legendaire.brille .holo { opacity: .8; }
.carte.rare .holo { background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), rgb(255 255 255 / .45), transparent 45%);
                    mix-blend-mode: overlay; }
.carte.rare:hover .holo { opacity: 1; }

/* ---------- Dos de carte (motif tapis) ---------- */
.dos { position: relative; border-radius: 12px; padding: 7px; background: #5a1414; width: 100%; border: 0;
       box-shadow: 0 1px 2px rgb(0 0 0 / .2); cursor: pointer; display: block; }
.dos .motif { aspect-ratio: 4 / 5.55; border-radius: 6px; position: relative; overflow: hidden;
  border: 3px solid #d9b25a;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26%, rgb(0 0 0 / .0) 26%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgb(217 178 90 / .35) 14px 15px),
    repeating-linear-gradient(-45deg, transparent 0 14px, rgb(217 178 90 / .35) 14px 15px),
    linear-gradient(#8f2a24, #6e1c18);
  box-shadow: inset 0 0 0 5px #2f5d3a, inset 0 0 0 7px #d9b25a; }
.dos .motif::before { content: ""; position: absolute; inset: 22% 18%; border-radius: 50%;
  background: url(img/logo.webp) center / cover; border: 3px solid #d9b25a; box-shadow: 0 0 0 4px #2f5d3a; }
.dos .num { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #f3dfae;
            font: 700 12px/1 system-ui; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.dos.manquante { filter: saturate(.25) brightness(.85); opacity: .75; transition: filter .15s, opacity .15s; }
.dos.manquante:hover, .dos.manquante:focus-visible { filter: none; opacity: 1; outline: none; }

/* ---------- Grilles ---------- */
.barre { position: sticky; top: 53px; z-index: 5; background: color-mix(in srgb, var(--fond) 92%, transparent);
         backdrop-filter: blur(6px); margin: 0 -16px; padding: 10px 16px; border-bottom: 1px solid var(--trait);
         display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.barre input[type=search] { flex: 1 1 160px; }
@media (max-width: 640px) { .barre { position: static; } }
h2.numero { font: 700 18px/1.2 Georgia, serif; margin: 28px 0 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
h2.numero small { font: 13px system-ui, sans-serif; color: var(--encre-douce); }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
@media (max-width: 640px) { .grille { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } }
.vide { color: var(--encre-douce); padding: 40px 0; text-align: center; }

/* ---------- Progression ---------- */
.progres { background: var(--papier); border: 1px solid var(--trait); border-radius: 14px; padding: 16px; margin: 8px 0 12px;
           display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
.progres .chiffre { font: 800 26px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.progres .lib { font-size: 12px; color: var(--encre-douce); margin-top: 4px; }
.jauge { height: 8px; border-radius: 99px; background: var(--trait); overflow: hidden; margin-top: 8px; }
.jauge i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .6s; }
@media (max-width: 700px) { .progres { grid-template-columns: repeat(2, minmax(0, 1fr)); } .progres > :first-child { grid-column: 1 / -1; } }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 4px; }

/* ---------- Booster ---------- */
.scene { display: flex; flex-direction: column; align-items: center; padding: 10px 0 30px; overflow-x: clip; }
.paquet { position: relative; width: min(260px, 64vw); aspect-ratio: 5 / 8; cursor: pointer; border: 0; padding: 0;
          background: none; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .3)); transition: transform .2s; }
.paquet:hover:not(:disabled) { transform: translateY(-6px) rotate(-1.5deg); }
.paquet:disabled { cursor: default; filter: grayscale(.8) drop-shadow(0 8px 12px rgb(0 0 0 / .2)); opacity: .7; }
.paquet .bande, .paquet .corps { position: absolute; left: 0; right: 0; overflow: hidden;
  background: linear-gradient(160deg, #6e1c18 0%, #b8322a 35%, #d9534a 50%, #8e231d 70%, #5a1414 100%); }
.paquet .bande { top: 0; height: 12%; border-radius: 8px 8px 0 0;
  transition: transform .7s cubic-bezier(.5, -0.3, .7, 1), opacity .7s; }
/* ligne de découpe : une tranche nette entre la bande et le corps */
.paquet .bande::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; z-index: 1;
  border-bottom: 2px dashed rgb(255 244 214 / .55); }
.paquet .corps { top: 12%; bottom: 0; border-radius: 0 0 8px 8px; display: flex; flex-direction: column; align-items: center;
  box-shadow: inset 0 2px 0 rgb(0 0 0 / .18);
  transition: transform .6s ease-in, opacity .6s; }
.paquet .bande::after, .paquet .corps::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .35) 45%, transparent 60%) -200% 0 / 200% 100% no-repeat;
  animation: reflet 4s ease-in-out infinite; }
.paquet .tapis-motif { position: absolute; inset: 0; opacity: .25;
  background: repeating-linear-gradient(45deg, transparent 0 12px, #f3cf6b 12px 13px),
              repeating-linear-gradient(-45deg, transparent 0 12px, #f3cf6b 12px 13px); }
.paquet .logo-paquet { position: relative; margin-top: 9%; font: 900 clamp(24px, 7vw, 34px)/.9 Georgia, serif; color: #fff4d6;
  text-align: center; text-shadow: 0 2px 0 #5a1414, 0 4px 10px rgb(0 0 0 / .4); letter-spacing: -.01em; }
.paquet .logo-paquet small { display: block; font: 700 11px/1 system-ui; letter-spacing: .3em; margin-top: 6px; color: #f3cf6b; }
.paquet .mascotte { position: relative; width: 92%; margin-top: auto; margin-bottom: 4%; }
.paquet .etiquette { position: absolute; bottom: 4%; right: 6%; background: #f3cf6b; color: #5a1414; font: 800 11px/1 system-ui;
  padding: 5px 8px; border-radius: 99px; letter-spacing: .05em; }
.paquet.tremble { animation: tremble .5s; }
.paquet.ouvert .bande { transform: translate(120%, -40%) rotate(14deg); opacity: 0; }
.paquet.ouvert .corps { transform: translateY(70%); opacity: 0; transition-delay: .35s; }
.compteur { margin-top: 22px; text-align: center; }
.compteur b { font: 800 22px/1 Georgia, serif; }
.compteur p { margin: 6px 0 0; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
details.taux { margin-top: 18px; max-width: 420px; width: 100%; background: var(--papier); border: 1px solid var(--trait);
               border-radius: 12px; padding: 10px 14px; font-size: 14px; }
details.taux summary { cursor: pointer; font-weight: 600; }
details.taux ol { margin: 8px 0 0; padding-left: 20px; color: var(--encre-douce); }

/* ---------- Révélation : une carte à la fois ---------- */
.points { display: flex; gap: 8px; margin: 4px 0 14px; }
.points i { width: 10px; height: 10px; border-radius: 50%; background: var(--trait); transition: background .3s, transform .3s; }
.points i.en-cours { background: var(--accent); transform: scale(1.3); }
.points i.fait { background: var(--encre-douce); }
.plateau { width: min(320px, 78vw); position: relative; }
.revele { position: relative; perspective: 1200px; cursor: pointer; outline: none; border-radius: 14px;
          animation: distribue .5s both cubic-bezier(.2, .9, .3, 1.2); }
.revele:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.revele .pivot { position: relative; z-index: 1; transition: transform .8s cubic-bezier(.3, .8, .3, 1.15); transform-style: preserve-3d; }
.revele .pivot > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.revele .pivot > .carte { position: absolute; inset: 0; transform: rotateY(180deg); }
.revele.vu .pivot { transform: rotateY(180deg); }
.revele:not(.vu):hover .pivot { transform: translateY(-4px) rotate(-1deg); }
.revele.indice-rare:not(.vu) .dos { box-shadow: 0 0 0 2px #4f86d6, 0 0 22px rgb(79 134 214 / .7); }
.revele.indice-legendaire:not(.vu) .dos { animation: lueur 1.4s ease-in-out infinite; }
.revele.indice-holo:not(.vu) .dos { animation: lueur-holo 2s linear infinite; }
.revele.part { animation: part .28s ease-in forwards; }
/* rayons derrière la carte retournée */
.rayons { position: absolute; inset: -45%; z-index: 0; pointer-events: none; opacity: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--rayon, rgb(255 255 255 / .55)) 0 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent);
  transition: opacity .6s .3s; animation: tourne 14s linear infinite; }
.revele.vu .rayons { opacity: .35; }
.revele.peu_commune { --rayon: rgb(126 214 165 / .7); }
.revele.rare { --rayon: rgb(79 134 214 / .75); }
.revele.rare.vu .rayons { opacity: .6; }
.revele.legendaire { --rayon: rgb(243 207 107 / .9); }
.revele.legendaire.vu .rayons { opacity: .85; }
.revele.indice-holo { --rayon: rgb(255 122 217 / .7); }
.revele.indice-holo.vu .rayons { opacity: .9; background: repeating-conic-gradient(from 0deg, #ff7ad9 0 8deg, transparent 8deg 16deg,
  #7ae0ff 16deg 24deg, transparent 24deg 32deg, #fff59a 32deg 40deg, transparent 40deg 48deg); }
.revele.vu .carte { animation: eclat 1s .45s; }
.revele.vu.legendaire .carte, .revele.vu.indice-holo .carte { animation: eclat 1s .45s, rebond .6s .4s; }
.revele.vu.legendaire.indice-holo .carte { animation: eclat 1s .45s, rebond .6s .4s, angle 4s linear infinite; }
.confetti { position: absolute; left: 50%; top: 45%; z-index: 3; width: 9px; height: 14px; border-radius: 2px; background: var(--c);
  pointer-events: none; animation: confetti 1.6s cubic-bezier(.15, .7, .3, 1) both; }
.confetti.rond { width: 9px; height: 9px; border-radius: 50%; }
.legende { margin: 22px 0 0; text-align: center; min-height: 3.2em; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.legende b { font: 800 20px/1.2 Georgia, serif; }
.legende span { color: var(--encre-douce); }
.legende small { color: var(--encre-douce); margin-top: 6px; animation: clignote 1.6s ease-in-out infinite; }
.recap { display: grid; grid-template-columns: repeat(5, minmax(0, 170px)); gap: 14px; justify-content: center; width: 100%; margin-top: 10px; }
.recap > * { animation: distribue .4s both cubic-bezier(.2, .9, .3, 1.2); }
@media (max-width: 760px) { .recap { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .recap > * { grid-column: span 2; } .recap > :nth-child(4) { grid-column: 2 / span 2; } }
.apres { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.bilan { margin-top: 14px; color: var(--encre-douce); text-align: center; min-height: 1.4em; }

/* ---------- Cartes brillantes ✦ ---------- */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* reflet arc-en-ciel permanent qui glisse sur toute la carte */
.carte.brillante .holo { opacity: .55; mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 15%, rgb(255 122 217 / .6) 30%, rgb(122 224 255 / .6) 42%,
              rgb(255 245 154 / .6) 54%, rgb(182 162 255 / .6) 66%, transparent 82%) 0 0 / 300% 300%;
  animation: irise 5s linear infinite; }
.carte.brillante:hover .holo { opacity: .8; background-position: var(--hx, 50%) var(--hy, 50%); animation: none; }
.carte.brillante:not(.legendaire) .pied { text-shadow: 0 1px 2px rgb(0 0 0 / .55); }
/* liseré arc-en-ciel autour du cadre (la couleur de rareté reste visible) */
.carte.brillante:not(.legendaire)::before { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 3px; pointer-events: none;
  background: linear-gradient(135deg, #ff9ad5, #9ee7ff 25%, #fff59a 50%, #c4b1ff 75%, #ff9ad5) 0 0 / 300% 300%;
  animation: irise 4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
/* légendaire, édition spéciale : cadre prismatique qui tourne, halo doré, étincelles */
.carte.legendaire.brillante { --c: conic-gradient(from var(--angle), #e9a92a, #e0459b, #6a4bd8, #2fb3e6, #4fcf6a, #e9a92a);
  animation: angle 4s linear infinite;
  box-shadow: 0 0 0 1px rgb(255 244 214 / .6), 0 0 18px rgb(243 207 107 / .55), 0 0 40px rgb(255 122 217 / .25); }
.carte.legendaire.brillante .holo { opacity: .75; }
.carte.legendaire.brillante .pied { text-shadow: 0 1px 2px rgb(20 5 30), 0 0 6px rgb(20 5 30 / .8); }
.carte.legendaire.brillante .img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 78% 30%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 35% 72%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 85% 80%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 55% 12%, #fff 0 1px, transparent 2px);
  mix-blend-mode: screen; animation: scintille 2.4s ease-in-out infinite; }

@media (max-width: 640px) {
  .carte .neuf { font-size: 9px; padding: 3px 6px; top: 9px; left: 9px; }
  .carte .qte { top: 9px; right: 9px; font-size: 11px; }
  .carte .pied { font-size: 10px; }
}

@keyframes reflet { 0%, 60% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes tremble { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg) translateX(-4px); } 40% { transform: rotate(4deg) translateX(4px); }
  60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes distribue { from { opacity: 0; transform: translateY(-60px) scale(.6) rotate(-8deg); } }
@keyframes lueur { 50% { box-shadow: 0 0 0 3px #f3cf6b, 0 0 30px 6px rgb(243 207 107 / .8); } }
@keyframes eclat { 0% { box-shadow: 0 0 0 0 rgb(243 207 107 / .9); } 100% { box-shadow: 0 0 0 30px rgb(243 207 107 / 0); } }
@keyframes pop { from { transform: scale(0); } }
@keyframes part { to { opacity: 0; transform: translateX(-60%) rotate(-10deg) scale(.9); } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes rebond { 40% { transform: rotateY(180deg) scale(1.06); } }
@keyframes confetti { 0% { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
  70% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx) * 1.1), calc(-50% + var(--dy) + 140px)) rotate(var(--r)); opacity: 0; } }
@keyframes clignote { 50% { opacity: .45; } }
@keyframes irise { to { background-position: 300% 300%; } }
@keyframes angle { to { --angle: 360deg; } }
@keyframes scintille { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes lueur-holo { 0% { box-shadow: 0 0 0 3px #ff7ad9, 0 0 26px 4px rgb(255 122 217 / .7); }
  33% { box-shadow: 0 0 0 3px #7ae0ff, 0 0 26px 4px rgb(122 224 255 / .7); }
  66% { box-shadow: 0 0 0 3px #fff59a, 0 0 26px 4px rgb(255 245 154 / .7); }
  100% { box-shadow: 0 0 0 3px #ff7ad9, 0 0 26px 4px rgb(255 122 217 / .7); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Connexion ---------- */
.accueil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 20px 0; }
@media (max-width: 760px) { .accueil { grid-template-columns: 1fr; } }
.formulaire { background: var(--papier); border: 1px solid var(--trait); border-radius: 16px; padding: 22px; max-width: 420px; width: 100%; }
.formulaire h2 { margin: 0 0 4px; font: 800 22px/1.2 Georgia, serif; }
.formulaire label { display: block; font-size: 13px; color: var(--encre-douce); margin: 12px 0 4px; }
.formulaire input { width: 100%; }
.formulaire .bouton { width: 100%; margin-top: 16px; }
.onglets { display: flex; gap: 4px; margin-bottom: 14px; background: var(--fond); padding: 4px; border-radius: 10px; }
.onglets button { flex: 1; border: 0; background: none; padding: 7px; border-radius: 7px; cursor: pointer; font-weight: 600; color: var(--encre-douce); }
.onglets button[aria-selected="true"] { background: var(--papier); color: var(--encre); box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
.lien { background: none; border: 0; padding: 0; color: var(--encre-douce); text-decoration: underline; cursor: pointer; font-size: 13px; margin-top: 10px; }

/* ---------- Classement ---------- */
table.classement { width: 100%; border-collapse: collapse; background: var(--papier); border: 1px solid var(--trait);
                   border-radius: 14px; overflow: hidden; }
.classement th, .classement td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--trait); }
.classement th { font-size: 12px; color: var(--encre-douce); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.classement td.n { font-variant-numeric: tabular-nums; }
.classement tr:last-child td { border-bottom: 0; }
.classement tr.moi td { background: color-mix(in srgb, var(--legendaire) 14%, transparent); }
.classement a { font-weight: 600; text-decoration: none; }
.classement a:hover { text-decoration: underline; }
.classement .rang { width: 44px; font-weight: 800; }
.classement .jauge { width: 120px; margin: 0; display: inline-block; vertical-align: middle; }
@media (max-width: 600px) { .classement .masquable { display: none; } }

/* ---------- Visionneuse ---------- */
dialog { border: 0; padding: 0; background: transparent; max-width: min(960px, 100vw); width: 100%; color: var(--encre); }
dialog::backdrop { background: rgb(10 8 5 / .82); }
.vue { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; }
.vue .carte, .vue .dos { max-width: min(100%, calc(80vh * 0.76)); margin: 0 auto; cursor: default; }
.fiche { background: var(--papier); border-radius: 14px; padding: 20px; }
.fiche h3 { margin: 0 0 6px; font: 700 22px/1.2 Georgia, serif; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; color: #fff; font-size: 12px; font-weight: 600; }
.fiche dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 16px 0; font-size: 14px; }
.fiche dt { color: var(--encre-douce); }
.fiche dd { margin: 0; }
.fiche .nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fiche .nav .puce { flex: 1; justify-content: center; }
.fiche .tisser { width: 100%; margin-top: 4px; }
@media (max-width: 700px) { .vue { grid-template-columns: 1fr; } .vue .carte, .vue .dos { max-width: min(100%, calc(55vh * 0.76)); } }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--encre); color: var(--papier);
         padding: 10px 18px; border-radius: 10px; opacity: 0; transition: .25s; z-index: 50; max-width: calc(100vw - 32px); pointer-events: none; }
.toast.visible { opacity: 1; transform: translateX(-50%); }