/* L'activité Discord de PKMN BOOSTERS : sombre,
costaud,
coloré par set,
avec des touches d'or. */

@font-face {
  font-family: "Bricolage";
  src: url("polices/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage";
  src: url("polices/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("polices/manrope-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("polices/manrope-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("polices/manrope-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("polices/manrope-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("polices/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("polices/jetbrains-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --fond: #0b0b0f;
  --fond-2: #111116;
  --surface: #16161c;
  --surface-2: #1d1d25;
  --trait: rgba(255, 255, 255, 0.08);
  --trait-fort: rgba(255, 255, 255, 0.16);
  --texte: #f3f0ea;
  --doux: #a3a0aa;
  --tres-doux: #6d6a75;
  --or: #e3b862;
  --or-clair: #f6dc9c;
  --degrade-or: linear-gradient(135deg, #ffe8a6 0%, #f2c45a 40%, #c9922f 75%, #f5d27e 100%);
  --corail: #ff6b4a;
  --vert: #4fd1a5;
  --rose: #ff5c9a;
  --titre: "Bricolage", "Segoe UI", system-ui, sans-serif;
  --sans: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --rayon: 18px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--texte);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  background: var(--fond);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
body.sans-defilement {
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}
button:disabled {
  cursor: not-allowed;
}

h1,
h2,
h3 {
  font-family: var(--titre);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.mono {
  font-family: var(--mono);
  font-weight: 500;
}
.doux {
  color: var(--doux);
}
.or {
  color: var(--or-clair);
}
.corail {
  color: var(--corail);
}
.vert {
  color: var(--vert);
}

.surtitre,
.etiquette {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.surtitre {
  color: var(--or);
}
.etiquette {
  color: var(--tres-doux);
  margin-bottom: 0.35rem;
}

.vide,
.erreur {
  color: var(--doux);
  text-align: center;
  padding: 3rem 1rem;
}
.erreur {
  font-size: 1.1rem;
  color: var(--texte);
  max-width: 28rem;
}

/* Boutons --------------------------------------------------------------------------- */

.bouton-or {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--degrade-or);
  color: #1d1405;
  font-family: var(--titre);
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 12px 30px -10px rgba(245, 197, 24, 0.55);
  transition:
    transform 0.15s,
    box-shadow 0.2s,
    filter 0.2s;
}
.bouton-or::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s;
}
.bouton-or:hover:not(:disabled)::after {
  transform: translateX(120%);
}
.bouton-or:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 16px 40px -10px rgba(245, 197, 24, 0.8);
}
.bouton-or:active:not(:disabled) {
  transform: scale(0.97);
}
.bouton-or:disabled {
  filter: grayscale(1) brightness(0.5);
  box-shadow: none;
}
.prix-pastille {
  display: inline-flex;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: #1d1405;
  color: var(--or-clair);
  font-family: var(--mono);
  font-size: 0.85rem;
}
.bouton-contour {
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--trait-fort);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 700;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.bouton-contour:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
}
.bouton-contour.petit,
.bouton-or.petit {
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
}
.bouton-or.petit {
  gap: 0.4rem;
}

/* Pièces,
jetons,
Poké Balls. */
.montant {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.piece,
.jeton {
  flex: none;
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d0 0 12%, #f0c867 32%, #b6852f 75%, #6d4a17 100%);
  box-shadow:
    0 0 0 1px rgba(80, 55, 15, 0.7),
    inset 0 0 0 2px rgba(255, 236, 180, 0.35);
}
.jeton {
  background:
    radial-gradient(circle, #16161c 0 32%, transparent 33%),
    repeating-conic-gradient(#ff6b4a 0 30deg, #f3f0ea 30deg 60deg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.montant.grand,
.grand {
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
}
.montant.enorme {
  font-family: var(--titre);
  font-size: 3rem;
  font-weight: 800;
  color: var(--or-clair);
  text-shadow: 0 0 30px rgba(227, 184, 98, 0.4);
}
.montant.enorme .piece {
  width: 0.6em;
  height: 0.6em;
}

.pokeball {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f3f0ea 0 17%, #16161c 17% 26%, transparent 26%),
    linear-gradient(#ef3b2d 0 45%, #16161c 45% 55%, #f3f0ea 55%);
  box-shadow: 0 0 0 2px #16161c;
}
.pokeball.mini {
  width: 0.9rem;
  height: 0.9rem;
  box-shadow: 0 0 0 1px #16161c;
}
.pokeball.grande {
  width: 4rem;
  height: 4rem;
  box-shadow: 0 0 0 4px #16161c;
}
.ecran-centre .pokeball.grande {
  animation: balance 1.4s ease-in-out infinite;
}
@keyframes balance {
  25% {
    transform: rotate(-14deg);
  }
  75% {
    transform: rotate(14deg);
  }
}
.pokeball.doree {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle, #ffe8a6 0 14%, #4a3410 14% 21%, transparent 21%),
    linear-gradient(transparent 46%, #4a3410 46% 54%, transparent 54%),
    radial-gradient(circle at 35% 30%, #fff1c4, #e9bb55 45%, #a87526 90%);
  box-shadow:
    inset 0 0 0 3px rgba(74, 52, 16, 0.6),
    0 0 0 3px #a87526;
}

/* Chargement ------------------------------------------------------------------------ */

.ecran-centre {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.2rem;
  text-align: center;
}
.chargement-texte {
  color: var(--doux);
  font-family: var(--mono);
  font-size: 0.85rem;
}

/* En-tête --------------------------------------------------------------------------- */

.barre {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.85rem 2rem;
  background: rgba(11, 11, 15, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--trait);
}
.marque {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.nom-marque {
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.nom-marque em {
  font-style: normal;
  background: var(--degrade-or);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.onglets {
  display: flex;
  gap: 1.6rem;
  flex: 1;
}
.onglets button {
  position: relative;
  padding: 0.4rem 0;
  font-weight: 700;
  color: var(--doux);
  transition: color 0.2s;
}
.onglets button::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -0.95rem;
  height: 2px;
  border-radius: 2px;
  background: var(--degrade-or);
  transition:
    left 0.25s,
    right 0.25s;
}
.onglets button:hover,
.onglets button.actif {
  color: var(--texte);
}
.onglets button.actif::after {
  left: 0;
  right: 0;
}
.bourse {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pastille-bourse {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: var(--surface);
  font-size: 0.9rem;
}
.avatar {
  display: grid;
  place-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font-family: var(--titre);
  font-weight: 800;
  background: linear-gradient(135deg, #6d5bd0, #2c2450);
  box-shadow:
    0 0 0 2px var(--fond),
    0 0 0 3px var(--or);
}

/* Contenu --------------------------------------------------------------------------- */

.contenu {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.6rem 2rem 4rem;
}
/* Le pied de page reste en bas de l'écran, même sur une page courte (les jeux). */
#app:has(> .pied) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
#app:has(> .pied) > .contenu {
  flex: 1 0 auto;
  width: 100%;
}
.titre {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
}

/* L'accueil : le Pokémon du jour épinglé,
puis le présentoir des boosters ------------- */

.tete-boutique {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.2rem;
  margin: 0.6rem 0 2.2rem;
}
.tete-boutique .doux {
  margin: 0.3rem 0 0;
}
.epingle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 1.1rem 0.6rem 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(227, 184, 98, 0.35);
  background: linear-gradient(135deg, rgba(227, 184, 98, 0.12), var(--fond-2) 60%);
  transform: rotate(1.2deg);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.9);
}
.epingle::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8f80, #c8261b);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.epingle img {
  width: 48px;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 4px;
  transform: rotate(-6deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
}
.epingle strong {
  display: block;
  font-family: var(--titre);
  font-size: 1.2rem;
  line-height: 1.1;
}
.epingle .doux {
  font-size: 0.8rem;
}
.epingle.touche {
  border-color: var(--trait);
  background: var(--fond-2);
}

.presentoir {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2.6rem 1.6rem;
  justify-items: center;
}
.tuile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  max-width: 210px;
  perspective: 1000px;
}
.tuile[data-tuile] {
  cursor: pointer;
}
.tuile-bouton {
  display: flex;
  justify-content: center;
  width: 100%;
}
.tuile-bouton:disabled {
  cursor: default;
}
.tuile-bouton:disabled .paquet {
  filter: grayscale(0.7) brightness(0.6);
}
.tuile-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 8.2;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.tuile:not(.retournee):hover .tuile-3d,
.tuile-bouton:not(:disabled):hover .paquet {
  translate: 0 -6px;
}
.tuile.retournee .tuile-3d {
  transform: rotateY(180deg);
}
.tuile-recto,
.tuile-verso {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tuile-verso {
  transform: rotateY(180deg);
}
.tuile .paquet,
.tuile-bouton .paquet {
  max-width: none;
}

/* Le dos d'un booster. */
.verso {
  --h: 42;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid hsl(var(--h) 60% 55% / 0.45);
  background:
    radial-gradient(ellipse at 50% 0%, hsl(var(--h) 70% 45% / 0.35), transparent 70%),
    #15141b;
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.9);
  font-size: 0.78rem;
  cursor: pointer;
}
.verso-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
}
.verso-tete strong {
  font-family: var(--titre);
  font-size: 1.05rem;
  line-height: 1.05;
}
.verso-tete span {
  flex: none;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--doux);
}
.verso-stats {
  display: flex;
  justify-content: space-between;
  color: var(--doux);
  font-size: 0.72rem;
}
.verso-stats b {
  font-family: var(--titre);
  font-size: 0.95rem;
  color: var(--texte);
}
.verso-souhaits {
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 700;
}
.verso-chances {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0;
  border-top: 1px solid var(--trait);
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.verso-chances li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.72rem;
}
.verso-chances .nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.verso-chances .mono {
  font-size: 0.68rem;
}
.verso .bouton-or {
  justify-content: center;
  width: 100%;
  padding: 0.6rem;
  font-size: 0.85rem;
}

.legende {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  text-align: center;
}
.legende-prix {
  font-family: var(--mono);
  font-size: 0.9rem;
}
.legende-prix s {
  color: var(--tres-doux);
}
.legende-prix .or {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
}
.legende-palier {
  font-size: 0.75rem;
  color: var(--doux);
}
.jauge.fine {
  width: 70%;
  height: 3px;
  margin: 0;
}

/* Le cadeau du jour : une Poké Ball dorée. Prête,
elle remue (comme une capture) ;
   touchée,
elle s'ouvre et des pièces en jaillissent. */
.widgets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.cadeau-ball {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 1.2rem 0.55rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
  text-align: left;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.cadeau-ball.pret {
  border-color: rgba(227, 184, 98, 0.55);
  background: linear-gradient(135deg, rgba(227, 184, 98, 0.14), var(--fond-2) 65%);
  box-shadow: 0 0 34px -10px rgba(227, 184, 98, 0.7);
}
.cadeau-ball.pret:hover {
  border-color: var(--or);
}
.cb-texte {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.cb-texte strong {
  font-family: var(--titre);
  font-size: 1.2rem;
}
.cb-texte .doux {
  font-size: 0.78rem;
}
.cb-ball {
  position: relative;
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
}
.cb-haut,
.cb-bas {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
}
.cb-haut {
  z-index: 2;
  top: 0;
  border-radius: 999px 999px 0 0;
  background: radial-gradient(circle at 35% 40%, #fff1c4, #f0c867 35%, #b6852f 80%);
  border-bottom: 3px solid #2a1f0c;
  transform-origin: 8% 100%;
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.cb-bas {
  z-index: 1;
  bottom: 0;
  border-radius: 0 0 999px 999px;
  background: radial-gradient(circle at 40% 0%, #fffaf0, #e6dfd2 60%, #b9b0a1);
  border-top: 3px solid #2a1f0c;
}
.cb-bouton {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 34%;
  height: 34%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0 45%, #2a1f0c 46% 62%, #f6f1e6 63%);
  box-shadow: 0 0 0 2px #2a1f0c;
}
.cadeau-ball:disabled:not(.ouvre) .cb-ball {
  filter: grayscale(1) brightness(0.6);
}
.cadeau-ball.pret .cb-ball {
  animation: capture 2.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.cadeau-ball.pret .cb-bouton {
  animation: clignote-bouton 2.6s ease-in-out infinite;
}
@keyframes capture {
  0%,
  45%,
  100% {
    transform: rotate(0);
  }
  55% {
    transform: rotate(-16deg);
  }
  65% {
    transform: rotate(14deg);
  }
  75% {
    transform: rotate(-8deg);
  }
  85% {
    transform: rotate(0);
  }
}
@keyframes clignote-bouton {
  50% {
    box-shadow:
      0 0 0 2px #2a1f0c,
      0 0 10px 3px rgba(255, 220, 120, 0.9);
  }
}
.cadeau-ball.ouvre .cb-ball {
  animation: none;
}
.cadeau-ball.ouvre .cb-haut {
  transform: rotate(-55deg);
}
.cadeau-ball.ouvre .cb-bouton {
  opacity: 0;
}
.piece-vol {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin: -0.45rem 0 0 -0.45rem;
  animation: jaillit 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes jaillit {
  from {
    transform: translate(0, 0) scale(0.4);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) scale(1);
    opacity: 0;
  }
}

/* Un booster ---------------------------------------------------------------------- */

.paquet {
  --h: 42;
  position: relative;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 5 / 8.2;
}
.paquet-secours {
  display: none;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.3em;
  line-height: 1;
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
}
.paquet-reflet {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.22) 46%, transparent 58%) 130% 0 / 260% 100% no-repeat;
  transition: background-position 0.9s ease;
}
.tuile:hover .paquet-reflet,
.tuile-bouton:hover .paquet-reflet {
  background-position: -30% 0;
}
.paquet.grand .paquet-reflet {
  animation: reflet 3.5s ease-in-out infinite;
}
@keyframes reflet {
  50% {
    background-position: -30% 0;
  }
}

/* Le sachet : feuille métallisée à la couleur du set,
trame de points sur les bords,
Poké Ball en filigrane,
médaillon doré avec l'illustration de la carte vedette. */
.sachet-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 13% 8% 12%;
  text-align: center;
  background:
    linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.3) 30%, transparent 42%, transparent 62%, rgba(255, 255, 255, 0.14) 72%, transparent 82%),
    linear-gradient(160deg, hsl(var(--h) 72% 62%), hsl(var(--h) 68% 40%) 42%, hsl(var(--h) 72% 54%) 68%, hsl(var(--h) 65% 30%));
  /* Une seule feuille, découpée en dents de scie en haut et en bas. */
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) top / 9px 5px repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / 9px 5px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 9px) no-repeat;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) top / 9px 5px repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / 9px 5px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 9px) no-repeat;
}
/* Les soudures,
en haut et en bas : de fines nervures dans la même feuille. */
.sachet-face::before,
.sachet-face::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 7.5%;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, rgba(0, 0, 0, 0.12) 1px 2px, transparent 2px 4px),
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
}
.sachet-face::before {
  top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
.sachet-face::after {
  bottom: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2);
}
/* Le sachet est gonflé : ombre sur les côtés,
reflets en long,
plis près des soudures. */
.sachet-relief {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 9%, rgba(255, 255, 255, 0.14) 20%, transparent 30%, transparent 72%, rgba(255, 255, 255, 0.08) 82%, transparent 91%, rgba(0, 0, 0, 0.4)),
    linear-gradient(transparent 6%, rgba(0, 0, 0, 0.22) 9%, transparent 14%, transparent 86%, rgba(0, 0, 0, 0.22) 91%, transparent 94%),
    linear-gradient(160deg, transparent 4%, rgba(255, 255, 255, 0.18) 7%, transparent 10%),
    linear-gradient(-20deg, transparent 4%, rgba(255, 255, 255, 0.12) 7%, transparent 10%);
}
.paquet.sachet {
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.65));
}
/* La trame de points,
plus dense sur les bords,
et la Poké Ball en filigrane. */
.sachet-motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, transparent 0 46%, rgba(255, 255, 255, 0.16) 46% 47%, transparent 47.5% 61%, rgba(255, 255, 255, 0.1) 61% 62%, transparent 62.5%),
    radial-gradient(circle, rgba(255, 255, 255, 0.22) 1px, transparent 1.6px) 0 0 / 6px 6px;
  -webkit-mask: radial-gradient(ellipse 75% 60% at 50% 45%, rgba(0, 0, 0, 0.35), #000 80%);
  mask: radial-gradient(ellipse 75% 60% at 50% 45%, rgba(0, 0, 0, 0.35), #000 80%);
}
.sachet-marque {
  position: relative;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 0.72em;
  letter-spacing: 0.28em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.sachet-titre {
  position: relative;
  flex: none;
  width: 94%;
  height: 21%;
  margin-top: 3%;
}
.sachet-titre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}
.sachet-titre .paquet-secours {
  position: absolute;
  inset: 0;
  display: none;
  place-content: center;
  font-size: 1.15em;
}
.sachet-titre:not(:has(img)) .paquet-secours {
  display: grid;
}
/* La carte vedette,
entière,
en vitrine au milieu du sachet. */
.sachet-vitrine {
  position: relative;
  flex: none;
  width: 56%;
  aspect-ratio: 63 / 88;
  margin: 4% 0 3%;
  overflow: hidden;
  border-radius: 5% / 3.6%;
  transform: rotate(-3deg);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.55),
    0 0 0 4px rgba(154, 115, 48, 0.9),
    0 14px 24px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sachet-vitrine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tuile:hover .sachet-vitrine,
.tuile-bouton:not(:disabled):hover .sachet-vitrine,
.paquet.grand .sachet-vitrine {
  transform: rotate(0deg) scale(1.05);
}
/* Un dos de carte,
pour le mystère (ou un set sans image). */
.dos-vitrine {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, #ffe8a6 0 7%, #4a3410 7% 10%, transparent 10%),
    radial-gradient(circle, transparent 0 25%, var(--or) 25% 27%, transparent 27%),
    radial-gradient(circle at 50% 100%, transparent 0 9px, rgba(227, 184, 98, 0.16) 9px 10px, transparent 10px) 0 0 / 20px 10px,
    #17161c;
  box-shadow:
    inset 0 0 0 4px #121116,
    inset 0 0 0 5px rgba(227, 184, 98, 0.6),
    0 0 0 2px rgba(255, 255, 255, 0.35),
    0 14px 24px rgba(0, 0, 0, 0.55);
}
.dos-vitrine b {
  position: relative;
  z-index: 1;
  font-family: var(--titre);
  font-size: 2.4em;
  color: #fff;
  text-shadow:
    0 0 14px rgba(180, 140, 255, 0.95),
    0 3px 8px rgba(0, 0, 0, 0.9);
}
.sachet-pastille {
  position: relative;
  margin-top: auto;
  padding: 0.25em 0.9em;
  border-radius: 999px;
  background: rgba(10, 10, 14, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--mono);
  font-size: 0.62em;
  font-weight: 700;
}

/* Le sachet mystère : noir,
reflets irisés qui bougent,
liseré d'or. */
.sachet.mystere {
  --h: 45;
}
.sachet.mystere .sachet-face {
  background:
    linear-gradient(90deg, rgba(227, 184, 98, 0.55), transparent 2%, transparent 98%, rgba(227, 184, 98, 0.55)),
    linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.2) 30%, transparent 42%),
    linear-gradient(160deg, #2c2935, #121117 50%, #262330);
}
.sachet.mystere .sachet-relief::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: color-dodge;
  opacity: 0.35;
  background: linear-gradient(120deg, #ff6fd8, #6fd3ff 25%, #ffe27a 50%, #b18cff 75%, #ff6fd8) 0 0 / 300% 300%;
  animation: irise 6s ease-in-out infinite;
}
@keyframes irise {
  50% {
    background-position: 100% 100%;
  }
}

.sachet.mystere .paquet-secours {
  display: block;
  font-size: 1.1em;
  color: var(--or-clair);
}

/* Les Balls : une par rareté. */
@property --mx {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --my {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
.ball {
  --haut: #ef3b2d;
  --bas: #f3f0ea;
  --bande: #17161c;
  --deco: linear-gradient(transparent, transparent);
  flex: none;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f6f3ee 0 15%, var(--bande) 15% 26%, transparent 26%),
    linear-gradient(transparent 45%, var(--bande) 45% 55%, transparent 55%),
    var(--deco),
    linear-gradient(var(--haut) 0 50%, var(--bas) 50%);
  box-shadow:
    0 0 0 1px var(--bande),
    inset -0.12em -0.12em 0.2em rgba(0, 0, 0, 0.25);
}
.ball.super {
  --haut: #3b7bef;
  --deco:
    radial-gradient(ellipse 16% 12% at 24% 26%, #ef3b2d 98%, transparent),
    radial-gradient(ellipse 16% 12% at 76% 26%, #ef3b2d 98%, transparent);
}
.ball.hyper {
  --haut: #24232b;
  --deco: linear-gradient(90deg, transparent 20%, #f5c518 20% 31%, transparent 31% 69%, #f5c518 69% 80%, transparent 80%) top / 100% 46% no-repeat;
}
.ball.honor {
  --haut: #f3f0ea;
  --bande: #d9443a;
}
.ball.reve {
  --haut: #f28fd0;
  --bas: #f6e6ff;
  --deco:
    radial-gradient(circle at 30% 22%, #9b5cf0 0 7%, transparent 8%),
    radial-gradient(circle at 62% 14%, #9b5cf0 0 6%, transparent 7%),
    radial-gradient(circle at 78% 34%, #9b5cf0 0 5%, transparent 6%);
}
.ball.luxe {
  --haut: #1b1a20;
  --bas: #1b1a20;
  --bande: #e0b64f;
  --deco: linear-gradient(transparent 30%, #d9443a 30% 34%, transparent 34%);
}
.ball.master {
  --haut: #7b3fd6;
  --deco:
    radial-gradient(circle at 24% 30%, #ff7ac2 0 10%, transparent 11%),
    radial-gradient(circle at 76% 30%, #ff7ac2 0 10%, transparent 11%),
    linear-gradient(90deg, transparent 38%, #fff 38% 44%, transparent 44% 56%, #fff 56% 62%, transparent 62%) 50% 16% / 100% 18% no-repeat;
}

/* Le médaillon doré qui porte le logo d'un set. */
.medaillon {
  --h: 42;
  position: relative;
  display: grid;
  place-content: center;
  width: 62%;
  aspect-ratio: 1;
  margin: 10% 0 7%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2b2a33, #0f0f13 70%);
  box-shadow:
    0 0 0 3px #f2d48d,
    0 0 0 5px #8a6326,
    0 8px 18px rgba(0, 0, 0, 0.6),
    inset 0 2px 10px rgba(0, 0, 0, 0.8);
}
.medaillon img {
  position: absolute;
  left: 12%;
  top: 12%;
  width: 76%;
  height: 76%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}
.medaillon .initiales {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.7em;
  color: hsl(var(--h) 90% 65%);
}
.medaillon:has(img) .initiales {
  visibility: hidden;
}
/* Les cases de chiffres (fiche d'une carte). */
.cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.case {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--trait);
  background: var(--surface);
}
.case strong {
  font-family: var(--titre);
  font-size: 1.35rem;
  line-height: 1.1;
}
.case strong .montant {
  font-size: 1.05rem;
}
.case strong small {
  font-size: 0.65em;
  color: var(--doux);
}
.case span {
  font-size: 0.75rem;
  color: var(--doux);
}
.note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--tres-doux);
}

/* Ouverture : la scène -------------------------------------------------------------- */

.scene {
  --h: 42;
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 45% 55% at 50% 42%, hsl(var(--h) 80% 45% / 0.22), transparent 75%),
    #08080b;
  animation: apparait 0.35s ease-out;
}
@keyframes apparait {
  from {
    opacity: 0;
  }
}
.particules {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.particules span {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: hsl(var(--h) 90% 70%);
  box-shadow: 0 0 6px hsl(var(--h) 90% 60%);
  opacity: 0;
  animation: flotte-particule var(--d) linear var(--t) infinite;
}
@keyframes flotte-particule {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15%,
  85% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-120px);
    opacity: 0;
  }
}
.scene-barre {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.9rem 1.5rem;
}
.retour {
  justify-self: start;
  font-weight: 700;
  color: var(--doux);
}
.retour:hover {
  color: var(--texte);
}
.scene-titre {
  font-family: var(--titre);
  font-size: 1.1rem;
  font-weight: 800;
}
.scene-barre .pastille-bourse {
  justify-self: end;
}
.scene-centre {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 1rem;
  padding: 0.5rem 1.5rem 2rem;
}
.lueur {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 520px;
  height: 520px;
  max-width: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--h) 90% 55% / 0.35), transparent 65%);
  filter: blur(10px);
  pointer-events: none;
  animation: respire 4s ease-in-out infinite;
}
@keyframes respire {
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.8;
  }
}
.consigne {
  margin: 0;
  color: var(--doux);
  font-size: 0.95rem;
}
.consigne.insiste {
  color: var(--or-clair);
}
.raccourci {
  margin: 0;
  font-size: 0.75rem;
  color: var(--tres-doux);
}

/* Le booster à charger : il tremble et s'illumine tant qu'on reste appuyé. */
.scene {
  --charge: 0;
}
.booster-zone {
  position: relative;
  width: min(280px, 64vw, 44vh);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
.paquet.grand {
  max-width: none;
  font-size: 1.35rem;
  animation:
    flotte 3.2s ease-in-out infinite,
    vibre 0.09s linear infinite;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 calc(30px + var(--charge) * 70px) hsl(var(--h) 95% 60% / calc(0.3 + var(--charge) * 0.6)))
    brightness(calc(1 + var(--charge) * 0.45));
}
@keyframes flotte {
  50% {
    translate: 0 -12px;
  }
}
@keyframes vibre {
  25% {
    transform: translate(calc(var(--charge) * var(--charge) * 5px), calc(var(--charge) * -3px)) rotate(calc(var(--charge) * 1.5deg));
  }
  75% {
    transform: translate(calc(var(--charge) * var(--charge) * -5px), calc(var(--charge) * 3px)) rotate(calc(var(--charge) * -1.5deg));
  }
}
.rayons {
  position: absolute;
  z-index: -1;
  inset: -55%;
  pointer-events: none;
  border-radius: 50%;
  background: repeating-conic-gradient(hsl(var(--h) 95% 80% / 0.4) 0 4deg, transparent 4deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 68%);
  mask: radial-gradient(circle, #000 15%, transparent 68%);
  opacity: calc(var(--charge) * 0.9);
  scale: calc(0.6 + var(--charge) * 0.5);
  animation: tourne 9s linear infinite;
}
@keyframes tourne {
  to {
    rotate: 360deg;
  }
}
.jauge-charge {
  width: min(220px, 56vw);
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.jauge-charge span {
  display: block;
  width: calc(var(--charge) * 100%);
  height: 100%;
  border-radius: 6px;
  background: var(--degrade-or);
  box-shadow: 0 0 12px rgba(245, 197, 24, 0.8);
}
/* L'ouverture : un éclair blanc,
les rayons s'envolent,
le booster disparaît. */
.explose .paquet.grand {
  animation: eclate 0.55s ease-in forwards;
}
@keyframes eclate {
  to {
    scale: 1.35;
    opacity: 0;
    filter: brightness(4);
  }
}
.explose .rayons {
  opacity: 0.9;
  animation:
    tourne 9s linear infinite,
    rayons-partent 0.8s ease-out forwards;
}
@keyframes rayons-partent {
  to {
    scale: 3.2;
    opacity: 0;
  }
}
.explose .jauge-charge {
  visibility: hidden;
}
.explose::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, #fff, hsl(var(--h) 90% 80%) 40%, transparent 75%);
  animation: flash 0.7s ease-out forwards;
}
@keyframes flash {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}

/* La carte regardée,
au centre,
et la lumière qui annonce sa rareté. */
.scene-focus {
  --carte: min(230px, 54vw, 31vh);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  min-height: calc(var(--carte) * 88 / 63 + 6.3rem);
  cursor: pointer;
}
.focus {
  position: relative;
  width: var(--carte);
  aspect-ratio: 63 / 88;
}
.focus:empty {
  border-radius: 4.5%/3.2%;
  border: 1px dashed rgba(227, 184, 98, 0.25);
}
.focus-carte {
  position: absolute;
  inset: 0;
  overflow: visible;
  animation: sort-de-la-main 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sort-de-la-main {
  from {
    transform: translateY(45%) scale(0.45);
    opacity: 0;
  }
}
.lumiere {
  --lumiere: #fff;
  position: absolute;
  left: 50%;
  top: calc(var(--carte) * 44 / 63);
  width: calc(var(--carte) * 2.6);
  height: calc(var(--carte) * 2.6);
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--lumiere) 0%, color-mix(in srgb, var(--lumiere) 40%, transparent) 25%, transparent 62%);
  opacity: 0;
  scale: 0.7;
  transition:
    opacity 0.35s,
    scale 0.35s;
}
.lumiere.allumee {
  opacity: 0.28;
  scale: 0.85;
}
.lumiere.t1 {
  opacity: 0.38;
  scale: 0.95;
}
.lumiere.t2 {
  opacity: 0.5;
  scale: 1.05;
}
.lumiere.t3 {
  opacity: 0.65;
  scale: 1.2;
  animation: palpite 0.6s ease-in-out infinite;
}
@keyframes palpite {
  50% {
    scale: 1.3;
  }
}
.carte-3d.tension:not(.retournee) {
  animation: tension 0.1s linear infinite;
}
@keyframes tension {
  25% {
    transform: rotate(calc(var(--tension, 0) * 0.9deg)) translateX(calc(var(--tension, 0) * 1px));
  }
  75% {
    transform: rotate(calc(var(--tension, 0) * -0.9deg)) translateX(calc(var(--tension, 0) * -1px));
  }
}

/* L'éventail des cartes en main. */
.eventail-cartes {
  --petite: clamp(50px, 6.6vw, 88px);
  --pas: 0.64; /* écart entre deux cartes, en largeur de carte */
  position: relative;
  width: min(900px, 100%);
  height: calc(var(--petite) * 1.65);
  margin-top: 0.2rem;
}
.en-main {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--petite);
  aspect-ratio: 63 / 88;
  translate: -50% 0;
  transform: translateX(calc(var(--x) * var(--petite) * var(--pas))) translateY(var(--y)) rotate(var(--r));
  transform-origin: 50% 100%;
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.3s;
  animation: distribue 0.5s calc(var(--i) * 60ms) backwards cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes distribue {
  from {
    transform: translateY(-40vh) rotate(0deg) scale(1.6);
    opacity: 0;
  }
}
.en-main:hover {
  transform: translateX(calc(var(--x) * var(--petite) * var(--pas))) translateY(calc(var(--y) - 16px)) rotate(var(--r));
}
.en-main.partie {
  opacity: 0;
  transform: translateX(calc(var(--x) * var(--petite) * var(--pas))) translateY(-70px) rotate(0deg);
}
.en-main .carte-3d {
  cursor: pointer;
}
.en-main .face {
  border-radius: 6px;
}
.en-main .dos {
  gap: 0.15rem;
  box-shadow:
    inset 0 0 0 3px #121116,
    inset 0 0 0 4px rgba(227, 184, 98, 0.55),
    0 8px 16px -6px rgba(0, 0, 0, 0.9);
}
/* Le dos d'une petite carte : tout suit la largeur de la carte (--petite), sinon le texte
   et les coins débordent sur téléphone et le médaillon s'écrase en ovale. */
.en-main .dos {
  gap: calc(var(--petite) * 0.05);
}
.en-main .coin {
  width: calc(var(--petite) * 0.065);
  height: calc(var(--petite) * 0.065);
}
.en-main .dos-medaillon {
  flex: none;
  width: 46%;
  padding: 6%;
  box-shadow:
    0 0 0 1px rgba(227, 184, 98, 0.8),
    0 0 12px rgba(227, 184, 98, 0.25);
}
.en-main .dos-titre {
  margin-top: 0;
  font-size: calc(var(--petite) * 0.09);
  line-height: 1;
  letter-spacing: 0.15em;
}
.en-main .dos-sous {
  display: none;
}
.en-main .devant {
  box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.9);
}
/* Une grosse carte cachée frémit dans la main… */
.en-main.fremit .carte-3d {
  animation: fremit 1.8s ease-in-out infinite;
}
.en-main.fremit .dos {
  box-shadow:
    inset 0 0 0 3px #121116,
    inset 0 0 0 4px rgba(227, 184, 98, 0.8),
    0 0 18px 2px rgba(227, 184, 98, 0.45);
}
@keyframes fremit {
  0%,
  70%,
  100% {
    transform: none;
  }
  75% {
    transform: rotate(-2.5deg);
  }
  85% {
    transform: rotate(2.5deg);
  }
  95% {
    transform: rotate(-1deg);
  }
}

/* Une carte (dos et face),
qu'on retourne. */
.carte-3d {
  --aura: var(--or);
  position: absolute;
  inset: 0;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.carte-3d .face {
  position: absolute;
  inset: 0;
  border-radius: 4.5%/3.2%;
  overflow: hidden;
  backface-visibility: hidden;
  transition: transform 0.75s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.carte-3d .devant {
  transform: rotateY(180deg);
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.9);
}
.carte-3d.retournee .dos {
  transform: rotateY(-180deg);
}
.carte-3d.retournee .devant {
  transform: rotateY(0);
}
.carte-3d img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.focus .carte-3d.retournee .devant {
  box-shadow:
    0 25px 50px -10px rgba(0, 0, 0, 0.9),
    0 0 60px -10px var(--aura);
}
.focus-carte.inclinable {
  width: 100%;
  height: 100%;
  overflow: visible;
  box-shadow: none;
  border-radius: 0;
}

/* Le dos des cartes : écailles fines,
médaillon Poké Ball en or,
coins ornés. */
.dos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(227, 184, 98, 0.12), transparent 60%),
    radial-gradient(circle at 50% 100%, transparent 0 9px, rgba(227, 184, 98, 0.16) 9px 10px, transparent 10px) 0 0 / 20px 10px,
    radial-gradient(circle at 50% 100%, transparent 0 9px, rgba(227, 184, 98, 0.16) 9px 10px, transparent 10px) 10px 5px / 20px 10px,
    #17161c;
  box-shadow:
    inset 0 0 0 7px #121116,
    inset 0 0 0 8px rgba(227, 184, 98, 0.55),
    inset 0 0 0 12px #121116,
    inset 0 0 0 13px rgba(227, 184, 98, 0.25),
    0 25px 50px -10px rgba(0, 0, 0, 0.9);
}
.coin {
  position: absolute;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: var(--degrade-or);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}
.coin.hg {
  top: 3%;
  left: 4%;
}
.coin.hd {
  top: 3%;
  right: 4%;
}
.coin.bg {
  bottom: 3%;
  left: 4%;
}
.coin.bd {
  bottom: 3%;
  right: 4%;
}
.dos-medaillon {
  width: 42%;
  aspect-ratio: 1;
  padding: 7%;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(227, 184, 98, 0.75) 0 3deg, transparent 3deg 9deg);
  box-shadow:
    0 0 0 2px rgba(227, 184, 98, 0.8),
    0 0 30px rgba(227, 184, 98, 0.25);
}
.dos-titre {
  margin-top: 0.6rem;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  background: var(--degrade-or);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dos-sous {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(227, 184, 98, 0.65);
}
/* L'éclat d'une grosse carte qui se retourne. */
.eclat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 0 4px var(--aura),
    0 0 40px 10px var(--aura);
  animation: eclat 0.9s ease-out forwards;
}
@keyframes eclat {
  to {
    transform: scale(14);
    opacity: 0;
  }
}
.carte-3d.sans-transition .face {
  transition: none;
}

.pastille-nouveau {
  position: absolute;
  z-index: 2;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-family: var(--titre);
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s 0.5s;
}
.retournee .pastille-nouveau,
.pastille-nouveau.petit {
  opacity: 1;
}
.pastille-nouveau.petit {
  top: -0.55rem;
  font-size: 0.6rem;
  padding: 0.15rem 0.55rem;
  transition: none;
}
.infos-carte {
  min-height: 5.6rem;
  text-align: center;
}
.infos-carte:not(:empty) {
  animation: apparait 0.4s 0.3s both;
}
.infos-carte h2 {
  font-size: 2rem;
  line-height: 1.05;
}
.rarete {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--c, var(--or)) 80%, white);
}
.valeurs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.2rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--doux);
}
.valeurs .montant {
  color: var(--texte);
}
.commandes {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Le récapitulatif. */
.recap {
  position: relative;
  width: min(860px, 100%);
  text-align: center;
}
.recap h2 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  margin-top: 0.3rem;
}
.recap .doux {
  margin: 0.2rem 0 0.8rem;
}
.annonces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.annonce {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(227, 184, 98, 0.5);
  background: rgba(227, 184, 98, 0.1);
  color: var(--or-clair);
  font-weight: 700;
  font-size: 0.85rem;
}
.mini-cartes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem 1rem;
  margin: 1.6rem 0;
}
.mini-cartes figure {
  position: relative;
  margin: 0;
  animation: monte-carte 0.45s calc(var(--i) * 60ms) both;
}
@keyframes monte-carte {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
}
.mini-carte {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  aspect-ratio: 63 / 88;
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.9);
  transition: transform 0.2s;
}
.mini-carte:hover {
  transform: translateY(-5px) scale(1.03);
}
.mini-cartes .hit .mini-carte {
  box-shadow:
    0 0 0 2px var(--c),
    0 0 28px -4px var(--c),
    0 12px 24px -8px rgba(0, 0, 0, 0.9);
}
.mini-carte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mini-cartes figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.rarete-mini {
  font-size: 0.65rem;
  color: color-mix(in srgb, var(--c) 80%, white);
}
.mini-cartes figcaption .montant {
  font-size: 0.75rem;
  color: var(--doux);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}
.chiffres {
  display: flex;
  gap: 2rem;
}
.chiffres > div {
  display: flex;
  flex-direction: column;
}
.jauge {
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin-top: 0.4rem;
}
.jauge span {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--degrade-or);
}

/* Le classeur : sombre,
surpiqûre dorée,
pochettes en plastique. */
.reliure {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
  padding: 1.1rem;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.04), transparent 60%),
    linear-gradient(160deg, #1b1a22, #121117 70%);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.95),
    inset 0 0 0 1px var(--trait);
}
.reliure::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 14px;
  border: 1px dashed rgba(227, 184, 98, 0.28);
  pointer-events: none;
}
.reliure.double {
  max-width: 1160px;
}
.reliure.double::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(50% - 9px);
  width: 18px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), #08080b 50%, rgba(0, 0, 0, 0.5));
}
.classeur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 0.7rem;
}
.reliure.double .classeur {
  /* Deux pages de 3 × 3, séparées par une colonne vide qui sert de reliure. */
  grid-template-columns: repeat(3, 1fr) 22px repeat(3, 1fr);
}
.reliure.double .poche:nth-child(6n + 4) {
  grid-column-start: 5;
}
.poche {
  position: relative;
  aspect-ratio: 63 / 88;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 2px 6px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.poche::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.12) 0%, transparent 28%, transparent 70%, rgba(255, 255, 255, 0.05) 100%);
}
.poche:hover {
  transform: translateY(-3px) scale(1.02);
  z-index: 1;
  box-shadow:
    0 0 0 2px var(--c),
    0 12px 24px -6px rgba(0, 0, 0, 0.9);
}
.poche img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.poche.manquante img {
  filter: grayscale(1) brightness(0.2);
}
.poche .numero {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(243, 240, 234, 0.45);
}
.poche .quantite {
  position: absolute;
  z-index: 1;
  bottom: 5px;
  right: 5px;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: rgba(10, 10, 14, 0.85);
  border: 1px solid rgba(227, 184, 98, 0.5);
  color: var(--or-clair);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
}
.poche.gradee {
  box-shadow:
    inset 0 0 0 2px #cfd6e2,
    0 2px 6px rgba(0, 0, 0, 0.5);
}
.poche .mqc {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 5px;
  right: 5px;
  padding: 0.1rem 0;
  border-radius: 4px;
  background: linear-gradient(180deg, #e0463a, #a62c22);
  color: white;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
}
.poche .mqc.dix {
  background: var(--degrade-or);
  color: #1d1405;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.5rem;
}
.fleche {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--trait-fort);
  font-size: 1.5rem;
  line-height: 1;
  transition:
    background 0.2s,
    opacity 0.2s;
}
.fleche:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}
.fleche:disabled {
  opacity: 0.25;
}

/* Zoom sur une carte ---------------------------------------------------------------- */

.zoom {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow-y: auto;
  background: rgba(5, 5, 8, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: apparait 0.25s ease-out;
}
.fiche {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  max-width: 860px;
}
.inclinable {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  position: relative;
  flex: none;
  width: min(320px, 70vw);
  aspect-ratio: 63 / 88;
  border-radius: 4.5%/3.2%;
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.15s ease-out;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.95),
    0 0 70px -20px var(--aura, transparent);
}
.inclinable img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inclinable.manquante img {
  filter: grayscale(1) brightness(0.45);
}
.fiche-texte {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 300px;
  padding: 1.6rem;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: var(--fond-2);
}
.fiche-texte h2 {
  font-size: 2.2rem;
  line-height: 1;
}
.fiche-texte .bouton-contour {
  align-self: flex-start;
  margin-top: 0.4rem;
}

.titre-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0 1.6rem;
  font-size: 1.7rem;
}
.titre-section::before,
.titre-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(227, 184, 98, 0.45));
}
.titre-section::after {
  background: linear-gradient(to left, transparent, rgba(227, 184, 98, 0.45));
}
.titre-section span::before,
.titre-section span::after {
  content: "✦";
  margin: 0 0.8rem;
  font-size: 0.6em;
  color: var(--or);
  vertical-align: 0.2em;
}

/* Page d'accueil --------------------------------------------------------------------- */

.page-accueil {
  padding-top: 1rem;
}
.ecran-centre.petit {
  min-height: 50vh;
}
.heros {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  min-height: 520px;
  padding: 3.5rem 3.5rem;
  border-radius: 28px;
  border: 1px solid rgba(227, 184, 98, 0.22);
  background: #0d0c12;
  isolation: isolate;
}
/* Des aurores qui dérivent lentement derrière. */
.heros-fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: blur(60px);
}
.heros-fond span {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.55;
  animation: aurore 18s ease-in-out infinite alternate;
}
.heros-fond span:nth-child(1) {
  left: 45%;
  top: -20%;
  background: #e3b862;
}
.heros-fond span:nth-child(2) {
  left: 60%;
  top: 35%;
  background: #7b3fd6;
  animation-duration: 22s;
  animation-direction: alternate-reverse;
}
.heros-fond span:nth-child(3) {
  left: -15%;
  top: 50%;
  background: #1f6fd6;
  opacity: 0.3;
  animation-duration: 26s;
}
@keyframes aurore {
  to {
    transform: translate(-18%, 12%) scale(1.25);
  }
}
.heros::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(90deg, #0d0c12 25%, transparent 70%);
}
.heros .particules {
  position: absolute;
  z-index: -1;
}
.heros .particules span {
  background: #f6dc9c;
  box-shadow: 0 0 6px #e3b862;
}
.heros-texte {
  position: relative;
}
.heros-titre {
  margin: 0.8rem 0 1rem;
  font-size: clamp(3.2rem, 7vw, 5.8rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
}
.heros-titre span {
  background: linear-gradient(100deg, #b8862f 0%, #ffe9a8 25%, #e3b862 45%, #fff6d6 55%, #c9922f 75%, #ffe8a6 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brille-titre 6s linear infinite;
  filter: drop-shadow(0 6px 30px rgba(227, 184, 98, 0.35));
}
@keyframes brille-titre {
  to {
    background-position: -250% 0;
  }
}
.heros-sous {
  margin: 0 0 2rem;
  font-size: 1.15rem;
  color: var(--doux);
}
.heros-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.bouton-or.grand {
  padding: 1.05rem 2rem;
  font-size: 1.2rem;
}
/* Les trois cartes en éventail,
qui flottent et suivent la souris. */
.heros-cartes {
  --px: 0;
  --py: 0;
  position: relative;
  height: 420px;
  perspective: 1200px;
}
.heros-carte {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  aspect-ratio: 63 / 88;
  overflow: hidden;
  border-radius: 4.5% / 3.2%;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.9),
    0 0 50px -10px rgba(227, 184, 98, 0.45);
  transition: transform 0.25s ease-out;
}
.heros-carte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.heros-carte.h1 {
  z-index: 2;
  transform: translate(calc(-50% + var(--px) * 30px), calc(-50% + var(--py) * 24px)) rotateY(calc(var(--px) * 18deg)) rotateX(calc(var(--py) * -14deg));
  animation: flotte-heros 6s ease-in-out infinite;
}
.heros-carte.h2 {
  transform: translate(calc(-118% + var(--px) * 16px), calc(-44% + var(--py) * 12px)) rotate(-13deg);
  filter: brightness(0.75);
  animation: flotte-heros 7s ease-in-out -2s infinite;
}
.heros-carte.h3 {
  transform: translate(calc(18% + var(--px) * 16px), calc(-44% + var(--py) * 12px)) rotate(13deg);
  filter: brightness(0.75);
  animation: flotte-heros 6.5s ease-in-out -4s infinite;
}
@keyframes flotte-heros {
  50% {
    translate: 0 -14px;
  }
}

/* Les chiffres clés. */
.chiffres-cles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.4rem 0 1rem;
}
.chiffre {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.3rem 1.4rem;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: linear-gradient(160deg, var(--surface), var(--fond-2));
}
.grand-chiffre {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--titre);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.grand-chiffre.or {
  color: var(--or-clair);
  text-shadow: 0 0 24px rgba(227, 184, 98, 0.35);
}
.grand-chiffre .piece {
  width: 0.7em;
  height: 0.7em;
}
.chiffre > .doux,
.chiffre > span.or:not(.grand-chiffre) {
  font-size: 0.82rem;
}

/* Les actions du jour. */
.actions-jour,
section.actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.action {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: var(--fond-2);
  text-align: left;
}
.action > span:last-child {
  display: flex;
  flex-direction: column;
}
.action strong {
  font-family: var(--titre);
  font-size: 1.1rem;
}
.action > span:last-child > span {
  font-size: 0.85rem;
  color: var(--doux);
}
.action img {
  width: 44px;
  border-radius: 4px;
  transform: rotate(-5deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
}
.action-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  font-size: 1.4rem;
}
.action-icone .ball {
  width: 1.7rem;
  height: 1.7rem;
  margin: 0;
}
.action.chaude {
  border-color: rgba(227, 184, 98, 0.55);
  background: linear-gradient(120deg, rgba(227, 184, 98, 0.16), var(--fond-2) 70%);
  animation: pulse-or 2.4s ease-in-out infinite;
}
.action.chaude:hover {
  border-color: var(--or);
}
.action.doree {
  border-color: rgba(227, 184, 98, 0.3);
}
@keyframes pulse-or {
  50% {
    box-shadow: 0 0 0 5px rgba(227, 184, 98, 0.12);
  }
}

/* Le trophée : le plus beau tirage,
sous un projecteur. */
.carte-vitrine {
  width: 230px;
}

/* Les plus belles cartes, choisies par le joueur. */
.emplacement-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 190px;
  aspect-ratio: 63 / 88;
  border-radius: 4.5% / 3.2%;
  border: 2px dashed rgba(227, 184, 98, 0.35);
  background: rgba(227, 184, 98, 0.04);
  color: var(--doux);
  font-size: 0.85rem;
  font-weight: 700;
  animation: monte-carte 0.6s calc(var(--i) * 90ms) both;
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s;
}
.emplacement-vide:hover {
  border-color: var(--or);
  background: rgba(227, 184, 98, 0.1);
  color: var(--texte);
}
.emplacement-vide .plus {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(227, 184, 98, 0.15);
  color: var(--or-clair);
  font-family: var(--titre);
  font-size: 1.8rem;
}
.podium.belles {
  grid-template-columns: repeat(3, minmax(0, 220px));
  justify-content: center;
}
.centre {
  text-align: center;
}
.petit-aide {
  margin: 1rem 0 0;
  font-size: 0.82rem;
}
.interrupteur.etoile .interrupteur-rond {
  font-size: 1.05rem;
}
.interrupteur:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Le podium des plus belles cartes. */
.podium {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1.6rem;
  justify-items: center;
}
.podium-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  animation: monte-carte 0.6s calc(var(--i) * 90ms) both;
}
.podium .carte-vitrine {
  width: 100%;
  max-width: 190px;
}
.mqc-mini {
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: #a62c22;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
}
.mqc-mini.dix {
  background: var(--degrade-or);
  color: #1d1405;
}

/* Les sets en anneaux de progression. */
.anneaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1.4rem;
}
.anneau {
  --h: 42;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.2rem 0.8rem;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: var(--fond-2);
  transition:
    transform 0.25s,
    border-color 0.25s;
}
.anneau:hover {
  transform: translateY(-4px);
  border-color: hsl(var(--h) 70% 55% / 0.6);
}
.anneau-cercle {
  position: relative;
  display: grid;
  place-items: center;
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--fond-2) 0 64%, transparent 65%),
    conic-gradient(hsl(var(--h) 85% 60%) calc(var(--p) * 1%), rgba(255, 255, 255, 0.07) 0);
  box-shadow: 0 0 30px -10px hsl(var(--h) 85% 55% / 0.6);
}
.anneau-cercle img {
  width: 66%;
  height: 50%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.anneau-secours {
  position: absolute;
  font-family: var(--titre);
  font-size: 1.4rem;
  color: hsl(var(--h) 85% 65%);
}
.anneau-cercle:has(img) .anneau-secours {
  display: none;
}
.anneau strong {
  font-family: var(--titre);
  font-size: 1rem;
  line-height: 1.1;
}
.anneau .mono {
  font-size: 0.75rem;
  color: var(--doux);
}

/* Page d'aide ------------------------------------------------------------------------- */

.aide {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.sommaire {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sommaire a {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  color: var(--doux);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}
.sommaire a:hover {
  background: var(--fond-2);
  color: var(--texte);
}
.aide-tete h1 {
  margin: 0.4rem 0 0.4rem;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
}
.aide-tete {
  margin-bottom: 1.6rem;
}
.bloc-aide {
  margin-bottom: 1.2rem;
  padding: 1.6rem 1.8rem;
  border-radius: 20px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
  scroll-margin-top: 5.5rem;
  line-height: 1.6;
}
.bloc-aide h2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  font-size: 1.6rem;
}
.icone-aide {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: rgba(227, 184, 98, 0.12);
  color: var(--or);
  font-family: var(--mono);
  font-size: 0.9rem;
}
.sommaire a .mono {
  color: var(--or);
  font-size: 0.8rem;
}
.bloc-aide p {
  margin: 0.6rem 0;
}
.etapes {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0;
}
.etapes > div {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.etapes b {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--degrade-or);
  color: #1d1405;
  font-family: var(--titre);
}
.lumieres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.4rem 0 0.8rem 2.8rem;
}
.lumieres span {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--l) 55%, transparent);
  background: color-mix(in srgb, var(--l) 12%, transparent);
  box-shadow: 0 0 18px -6px var(--l);
  font-size: 0.82rem;
  font-weight: 700;
}
.table-aide {
  width: 100%;
  margin: 0.8rem 0;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.table-aide th {
  padding: 0.4rem 0.6rem;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tres-doux);
}
.table-aide td {
  padding: 0.55rem 0.6rem;
  border-top: 1px solid var(--trait);
}
.raretes-aide td:first-child {
  width: 2rem;
}
.table-aide .ball {
  width: 1.3rem;
  height: 1.3rem;
}
.grille-aide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.8rem;
}
.carte-aide {
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--trait);
  background: var(--surface);
}
.carte-aide h4 {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0 0 0.3rem;
  font-family: var(--titre);
  font-size: 1.05rem;
}
.carte-aide p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--doux);
}
.notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0;
}
.notes span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.4rem;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--trait);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--doux);
}
.notes b {
  font-family: var(--titre);
  font-size: 1.2rem;
  color: var(--texte);
}
.notes .dix {
  border-color: var(--or);
  background: rgba(227, 184, 98, 0.14);
}
.notes .dix b {
  color: var(--or-clair);
}
.notes .bonne b {
  color: var(--vert);
}
.notes .mauvaise b {
  color: var(--corail);
}
.bloc-aide details {
  border-top: 1px solid var(--trait);
}
.bloc-aide details:last-child {
  border-bottom: 1px solid var(--trait);
}
.bloc-aide summary {
  padding: 0.8rem 0;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.bloc-aide summary::before {
  content: "+";
  display: inline-block;
  width: 1.4rem;
  color: var(--or);
  font-family: var(--mono);
  transition: transform 0.2s;
}
.bloc-aide details[open] summary::before {
  transform: rotate(45deg);
}
.bloc-aide details p {
  margin: 0 0 0.9rem 1.4rem;
  color: var(--doux);
}

@media (max-width: 900px) {
  .heros {
    grid-template-columns: 1fr;
    padding: 2rem 1.4rem;
    min-height: 0;
  }
  .heros-cartes {
    order: -1;
    height: 260px;
  }
  .heros-carte {
    width: 140px;
  }
  .chiffres-cles {
    grid-template-columns: 1fr 1fr;
  }
  .podium,
  .anneaux {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem 0.8rem;
  }
  .anneau-cercle {
    width: 96px;
  }
  .titre-section {
    font-size: 1.35rem;
  }
  .aide {
    grid-template-columns: 1fr;
  }
  .sommaire {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sommaire .etiquette {
    flex-basis: 100%;
  }
  .bloc-aide {
    padding: 1.2rem;
  }
  .lumieres {
    margin-left: 0;
  }
}

/* Collection ------------------------------------------------------------------------- */

.coll-tete {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: end;
  margin-bottom: 2rem;
}
.titre-geant {
  margin: 0.3rem 0 1.2rem;
  font-size: clamp(2.8rem, 6.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.coll-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  margin-bottom: 1.4rem;
}
.coll-chiffres > div {
  display: flex;
  flex-direction: column;
}
.coll-chiffres .grand-chiffre small {
  font-size: 0.6em;
  color: var(--tres-doux);
}
.coll-chiffres .etiquette {
  margin: 0.2rem 0 0;
}
.revendre .montant {
  margin-left: 0.2rem;
}
.revendre:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.petit-texte {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
}
.petit-texte svg,
.cadenas svg {
  width: 0.9rem;
  height: 0.9rem;
}
.coll-sets {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem 1.2rem;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: var(--fond-2);
}
/* Beaucoup de sets : la liste défile dans son cadre au lieu d'étirer tout l'en-tête. */
.coll-sets-tete {
  padding: 0 0.5rem 0.6rem;
  border-bottom: 1px solid var(--trait);
}
.coll-sets-tete .etiquette {
  margin: 0;
}
.coll-sets-liste {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 290px;
  overflow-y: auto;
  padding: 0.6rem 0.4rem 0.6rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--trait-fort) transparent;
  -webkit-mask: linear-gradient(transparent, #000 12px, #000 calc(100% - 20px), transparent);
  mask: linear-gradient(transparent, #000 12px, #000 calc(100% - 20px), transparent);
}
.ligne-set {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 4.4rem;
  align-items: center;
  gap: 0.9rem;
  padding: 0.45rem 0.5rem;
  border-radius: 10px;
  text-align: left;
  font-size: 0.88rem;
  font-weight: 700;
  transition: background 0.2s;
}
.ligne-set:hover {
  background: rgba(255, 255, 255, 0.04);
}
.ligne-set.actif {
  background: rgba(227, 184, 98, 0.1);
}
.ligne-set-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ligne-set .jauge {
  margin: 0;
}
.ligne-set .mono {
  text-align: right;
  font-size: 0.8rem;
  color: var(--doux);
}

.barre-filtres {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}
.recherche {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 520px;
  padding: 0 1rem;
  border-radius: 14px;
  border: 1px solid var(--trait-fort);
  background: var(--fond-2);
  transition: border-color 0.2s;
}
.recherche:focus-within {
  border-color: var(--or);
}
.recherche svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--doux);
}
.recherche input {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--texte);
  font: inherit;
}
.puces-raretes {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
  scrollbar-width: thin;
}
.puce-rarete {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--doux);
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s;
}
.puce-rarete .ball {
  width: 1rem;
  height: 1rem;
}
.puce-rarete:hover {
  color: var(--texte);
}
.puce-rarete.actif {
  border-color: var(--c, var(--or));
  background: color-mix(in srgb, var(--c, var(--or)) 14%, var(--fond-2));
  color: var(--texte);
}
.selecteurs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.selecteurs label {
  display: flex;
  flex-direction: column;
}
.selecteurs .etiquette {
  margin-bottom: 0.3rem;
}
.selecteurs select {
  appearance: none;
  min-width: 190px;
  padding: 0.65rem 2.4rem 0.65rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--trait-fort);
  color: var(--texte);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background:
    linear-gradient(45deg, transparent 50%, var(--or) 50%) calc(100% - 18px) 55% / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--or) 50%) calc(100% - 12px) 55% / 6px 6px no-repeat,
    var(--fond-2);
}
.selecteurs select:focus {
  outline: 0;
  border-color: var(--or);
}
.selecteurs option {
  background: var(--surface);
}
.compte-resultats {
  margin: 0 0 0.8rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--doux);
}
.poche .cadenas {
  position: absolute;
  z-index: 1;
  bottom: 5px;
  left: 5px;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgba(10, 10, 14, 0.85);
  border: 1px solid rgba(227, 184, 98, 0.5);
  color: var(--or-clair);
}

/* Les actions d'une carte,
dans sa fiche. */
.actions-carte {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0.4rem 0 0.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--trait);
}
.interrupteur {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--trait);
  background: var(--surface);
  text-align: left;
}
.interrupteur > span:last-child {
  display: flex;
  flex-direction: column;
}
.interrupteur .doux {
  font-size: 0.75rem;
}
.interrupteur-rond {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--doux);
}
.interrupteur-rond svg {
  width: 1.1rem;
  height: 1.1rem;
}
.interrupteur.actif {
  border-color: rgba(227, 184, 98, 0.55);
  background: rgba(227, 184, 98, 0.1);
}
.interrupteur.actif .interrupteur-rond {
  background: var(--degrade-or);
  color: #1d1405;
}
.vente-carte {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.vente-carte .bouton-or {
  flex: 1;
  justify-content: center;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
}
.compteur-quantite {
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--trait-fort);
}
.compteur-quantite button {
  width: 2.2rem;
  height: 2.4rem;
  font-size: 1.2rem;
  color: var(--or-clair);
}
.compteur-quantite button:disabled {
  opacity: 0.3;
}
.compteur-quantite .mono {
  min-width: 1.6rem;
  text-align: center;
  font-weight: 700;
}
.avertissement {
  margin: 0;
  font-size: 0.78rem;
  color: var(--corail);
}

/* La fenêtre de revente des doublons. */
.fenetre-vente {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(620px, 100%);
  max-height: calc(100vh - 3rem);
  padding: 1.8rem;
  border-radius: 22px;
  border: 1px solid var(--trait-fort);
  background: var(--fond-2);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.95);
}
.fenetre-vente h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.8rem;
}
.fenetre-vente h2 .montant {
  font-family: var(--titre);
  color: var(--or-clair);
}
.fenetre-vente > .doux {
  margin: 0;
  font-size: 0.85rem;
}
.lignes-vente {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0.4rem 0;
  padding: 0;
  border-top: 1px solid var(--trait);
}
.lignes-vente li {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid var(--trait);
  font-size: 0.88rem;
}
.lignes-vente img {
  width: 2.4rem;
  border-radius: 4px;
}
.lv-nom {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lv-nom .rarete-mini {
  font-size: 0.72rem;
  font-weight: 700;
}
.lv-nom .ball {
  width: 0.8rem;
  height: 0.8rem;
}
.fenetre-vente .actions {
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .coll-tete {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .selecteurs label {
    flex: 1 1 140px;
  }
  .selecteurs select {
    min-width: 0;
    width: 100%;
  }
  .vente-carte {
    flex-wrap: wrap;
  }
  .lignes-vente li {
    grid-template-columns: 2rem 1fr auto;
  }
  .lignes-vente li > .mono {
    display: none;
  }
}

/* Connexion au site et choix du serveur ---------------------------------------------- */

.portail {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  overflow: hidden;
  isolation: isolate;
}
.portail .particules span {
  background: #f6dc9c;
  box-shadow: 0 0 6px #e3b862;
}
.portail-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: min(520px, 100%);
  padding: 2.6rem 2rem;
  border-radius: 28px;
  border: 1px solid rgba(227, 184, 98, 0.25);
  background: rgba(13, 12, 18, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
  text-align: center;
  animation: monte-carte 0.6s ease-out both;
}
.portail-carte.large {
  width: min(680px, 100%);
}
.portail-carte .heros-titre {
  font-size: clamp(3rem, 12vw, 4.6rem);
  margin: 0.6rem 0 0.2rem;
}
.portail-carte h1:not(.heros-titre) {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
}
.portail-carte .heros-sous {
  margin-bottom: 1rem;
}
.portail-erreur {
  margin: 0;
  color: var(--corail);
  font-weight: 700;
}
.bouton-discord {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  background: #5865f2;
  color: #fff;
  font-family: var(--titre);
  font-size: 1.1rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 30px -10px rgba(88, 101, 242, 0.8);
  transition:
    transform 0.15s,
    filter 0.2s;
}
.bouton-discord:hover {
  filter: brightness(1.1);
}
.bouton-discord:active {
  transform: scale(0.97);
}
.bouton-discord {
  white-space: nowrap;
}
@media (max-width: 420px) {
  .bouton-discord {
    padding: 0.85rem 1.3rem;
    font-size: 1rem;
  }
}
.bouton-discord svg {
  width: 1.5rem;
  height: 1.5rem;
}
.portail-note {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
}
.liste-serveurs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem;
  width: 100%;
  margin-top: 1.2rem;
}
.choix-serveur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.2rem 0.8rem;
  border-radius: 18px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.choix-serveur:hover {
  transform: translateY(-3px);
  border-color: var(--or);
}
.choix-serveur img,
.initiales-serveur {
  width: 64px;
  height: 64px;
  border-radius: 20px;
}
.initiales-serveur {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #3a2c58, #1a1724);
  font-family: var(--titre);
  font-size: 1.3rem;
  color: var(--or-clair);
}
.choix-serveur strong {
  font-size: 0.95rem;
}

/* Le menu du joueur (sur le site). */
.menu-joueur {
  position: relative;
}
.avatar {
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu-deroulant {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  z-index: 20;
  display: none;
  flex-direction: column;
  min-width: 220px;
  padding: 0.4rem;
  border-radius: 14px;
  border: 1px solid var(--trait-fort);
  background: rgba(22, 22, 28, 0.98);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.9);
}
.menu-joueur.ouvert .menu-deroulant {
  display: flex;
}
.menu-tete {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.7rem 0.7rem;
  border-bottom: 1px solid var(--trait);
  margin-bottom: 0.3rem;
}
.menu-tete .doux {
  font-size: 0.8rem;
}
.menu-deroulant button {
  padding: 0.6rem 0.7rem;
  border-radius: 9px;
  text-align: left;
  font-weight: 700;
  font-size: 0.9rem;
}
.menu-deroulant button:hover {
  background: rgba(255, 255, 255, 0.06);
}
.menu-deroulant [data-deconnexion] {
  color: var(--corail);
}

/* Messages -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  padding: 0.8rem 1.3rem;
  border-radius: 14px;
  border: 1px solid var(--trait-fort);
  background: rgba(22, 22, 28, 0.96);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.9);
  font-weight: 700;
  animation: monte 0.3s ease-out;
  transition: opacity 0.4s;
}
.toast.succes {
  border-color: rgba(227, 184, 98, 0.6);
  color: var(--or-clair);
}
.toast.alerte {
  border-color: rgba(255, 107, 74, 0.6);
}
.toast.sortie {
  opacity: 0;
}
@keyframes monte {
  from {
    transform: translate(-50%, 20px);
    opacity: 0;
  }
}

/* Écrans moyens et petits ------------------------------------------------------------ */

@media (max-height: 760px) {
  .scene .raccourci {
    display: none;
  }
  .scene-centre {
    gap: 0.5rem;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 14px;
  }
  .barre {
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding: 0.7rem 1rem;
  }
  .nom-marque {
    display: none;
  }
  .onglets {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }
  .onglets button::after {
    bottom: -0.35rem;
  }
  .bourse {
    margin-left: auto;
  }
  .bourse > .avatar {
    display: none;
  }
  .bourse .jetons-bourse {
    display: none;
  }
  .contenu {
    padding: 1rem 1rem 3rem;
  }
  .presentoir {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
  }
  .paquet {
    font-size: 0.85rem;
  }
  .verso {
    padding: 0.6rem;
    font-size: 0.7rem;
  }
  .eventail-cartes {
    /* Le même écart que sur ordinateur : chaque dos reste lisible. 10 cartes tiennent
       dans la largeur : 1 + 9 × 0,62 = 6,6 largeurs de carte. */
    --petite: clamp(40px, 12vw, 54px);
    --pas: 0.62;
  }
  .mini-cartes {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 0.7rem;
  }
  .fiche {
    flex-direction: column;
    gap: 1.2rem;
  }
  .fiche-texte {
    min-width: 0;
    width: 100%;
  }
  .chiffres {
    gap: 1.2rem;
  }
  .reliure {
    padding: 0.8rem;
  }
  .classeur {
    gap: 0.5rem;
  }
}

/* Le bouton du son. */
.bouton-son {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--trait);
  background: var(--surface);
  color: var(--texte);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.bouton-son:hover {
  border-color: var(--or);
}
.bouton-son svg {
  width: 1.15rem;
  height: 1.15rem;
}
.bouton-son .barre {
  display: none;
}
.bouton-son.coupe {
  color: var(--tres-doux);
}
.bouton-son.coupe .ondes {
  display: none;
}
.bouton-son.coupe .barre {
  display: inline;
}

/* MQC ---------------------------------------------------------------------------------- */
/* Le labo est un aquarium : les cartes flottent dans des bacs qui se remplissent. */

.magicarpe {
  --e: 3; /* la taille d'un pixel du sprite */
  position: relative;
  display: inline-block;
  flex: none;
  width: calc(42px * var(--e));
  height: calc(48px * var(--e));
}
/* Le sprite : 9 images (nage 0-2, saut 3-7, yeux plissés 8), la 2e ligne en chromatique. */
.magicarpe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/magicarpe.png") 0 0 / calc(378px * var(--e)) calc(96px * var(--e));
  image-rendering: pixelated;
  transform: scaleX(-1);
  animation: mc-nage 0.7s steps(3, jump-none) infinite alternate;
}
@keyframes mc-nage {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: calc(-84px * var(--e));
  }
}
@keyframes mc-saut {
  from {
    background-position-x: calc(-126px * var(--e));
  }
  to {
    background-position-x: calc(-294px * var(--e));
  }
}
.magicarpe.mini {
  --e: 0.5;
  margin: -0.4em 0.45em -0.4em 0;
  vertical-align: middle;
}
.magicarpe.mini::before {
  animation: none;
}

/* L'en-tête du labo. */
.mqc-tete {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 2.2rem 0 0.6rem;
}
.mqc-tete .doux {
  max-width: 520px;
  margin: 0.6rem 0 0;
}
.mascotte {
  position: relative;
  width: 170px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 35%),
    radial-gradient(circle at 50% 60%, #1d6fa8, #0b2f55 70%);
  box-shadow:
    inset 0 -14px 30px rgba(0, 0, 0, 0.45),
    inset 0 0 0 2px rgba(160, 220, 255, 0.25),
    0 20px 50px -20px rgba(40, 140, 220, 0.6);
  overflow: hidden;
}
.mascotte .magicarpe {
  --e: 2.6;
  animation: nage-lente 4s ease-in-out infinite;
}
@keyframes nage-lente {
  0%,
  100% {
    transform: translate(-4px, 2px) rotate(-3deg);
  }
  50% {
    transform: translate(6px, -6px) rotate(3deg);
  }
}

/* Les bulles qui montent, partout dans le labo. */
.bulles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.bulles span {
  position: absolute;
  bottom: -12px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.08) 45%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(200, 235, 255, 0.45);
  animation: bulle var(--d) ease-in var(--t) infinite;
}
@keyframes bulle {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(6px, -50cqh);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(-4px, -105cqh);
    opacity: 0;
  }
}
.bulles,
.eau {
  container-type: size;
}

/* Les postes du labo : un bac par carte (au maximum deux). */
.postes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.2rem;
  margin-top: 1.6rem;
}
.bac {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 330px;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(160, 220, 255, 0.22);
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.07), transparent 30%),
    linear-gradient(180deg, #0f141c, #0a0d12);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.025);
  overflow: hidden;
  font: inherit;
  color: inherit;
  text-align: left;
}
button.bac {
  cursor: pointer;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}
button.bac:hover {
  transform: translateY(-4px);
  border-color: rgba(160, 220, 255, 0.45);
}
.eau {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--niveau, var(--depart));
  background: linear-gradient(180deg, rgba(64, 170, 235, 0.55), rgba(18, 70, 140, 0.85));
  transition: height 0.6s;
}
.bac:not(.pret):not(.vide) .eau {
  animation: remplir var(--reste) linear forwards;
}
@keyframes remplir {
  from {
    height: var(--depart);
  }
  to {
    height: 92%;
  }
}
/* La surface de l'eau ondule. */
.eau::before,
.eau::after {
  content: "";
  position: absolute;
  left: -50%;
  width: 200%;
  height: 22px;
  top: -11px;
  background: radial-gradient(ellipse 22px 11px at 50% 100%, rgba(64, 170, 235, 0.55) 98%, transparent 100%) 0 0 / 44px 22px repeat-x;
  -webkit-mask: linear-gradient(#000 50%, transparent 50%);
  mask: linear-gradient(#000 50%, transparent 50%);
  animation: vague 3s linear infinite;
}
.eau::after {
  top: -7px;
  opacity: 0.5;
  animation-duration: 5s;
  animation-direction: reverse;
}
@keyframes vague {
  to {
    transform: translateX(44px);
  }
}
.bac-carte {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 52%;
  aspect-ratio: 63 / 88;
  translate: -50% 0;
  border-radius: 4.5%/3.2%;
  overflow: hidden;
  box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.8);
}
.bac-carte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bac-carte.flotte {
  animation: flottaison 4.5s ease-in-out infinite;
}
.bac-carte.flotte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(30, 110, 190, 0.35));
}
@keyframes flottaison {
  0%,
  100% {
    transform: translateY(0) rotate(-2.5deg);
  }
  50% {
    transform: translateY(-10px) rotate(2.5deg);
  }
}
.bac-pied {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem 1rem;
  background: linear-gradient(transparent, rgba(4, 18, 36, 0.8) 40%);
}
.bac-pied strong {
  font-family: var(--titre);
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bac-pied span {
  font-size: 0.82rem;
  color: rgba(220, 240, 255, 0.75);
}
.bac-pied .mono {
  font-size: 1.1rem;
  color: #bfe6ff;
}
/* Une carte revenue : le bac brille et attend qu'on la révèle. */
.bac.pret {
  border-color: var(--or);
  animation: bac-pret 2s ease-in-out infinite;
}
.bac.pret .eau {
  background: linear-gradient(180deg, rgba(120, 200, 255, 0.5), rgba(18, 80, 150, 0.85));
}
.bac.pret .bac-carte {
  animation: emerge 2.4s ease-in-out infinite;
}
.bac.pret .bac-pied strong {
  color: var(--or-clair);
}
@keyframes bac-pret {
  50% {
    box-shadow:
      inset 0 0 0 4px rgba(255, 255, 255, 0.025),
      0 0 40px -6px rgba(227, 184, 98, 0.6);
  }
}
@keyframes emerge {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-14px) scale(1.04);
  }
}
.bac.vide {
  align-items: stretch;
  border-style: dashed;
  border-color: rgba(160, 220, 255, 0.2);
}
.bac.vide .plus {
  position: absolute;
  top: 38%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(160, 220, 255, 0.35);
  font-size: 2rem;
  font-weight: 300;
  color: #bfe6ff;
  transition:
    transform 0.25s,
    background 0.25s;
}
.bac.vide:hover .plus {
  transform: rotate(90deg);
  background: rgba(160, 220, 255, 0.12);
}

/* Les boîtiers : la carte sous plastique, l'étiquette du labo en haut. */
.boitier {
  --etiquette: linear-gradient(135deg, #e9eef5, #b9c3d0);
  --encre: #18202c;
  position: relative;
  padding: 7px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 22px 40px -18px rgba(0, 0, 0, 0.9),
    0 0 50px -24px var(--aura, transparent);
}
.boitier.or {
  --etiquette: linear-gradient(135deg, #fff1c2, #f2c45a 45%, #c9922f 80%, #f5d27e);
  --encre: #3a2604;
  border-color: rgba(246, 220, 156, 0.6);
  box-shadow:
    0 22px 40px -18px rgba(0, 0, 0, 0.9),
    0 0 40px -10px rgba(242, 196, 90, 0.55);
}
.boitier.argent {
  --etiquette: linear-gradient(135deg, #ffffff, #c8d0dc 50%, #9aa6b8);
}
.boitier.bronze {
  --etiquette: linear-gradient(135deg, #f6d2b0, #c98a5a 55%, #9b5f34);
  --encre: #2e1606;
}
.boitier.standard {
  --etiquette: linear-gradient(135deg, #cfe6ff, #8fb8e0);
  --encre: #0d2238;
}
.boitier.faible {
  --etiquette: linear-gradient(135deg, #b8b6c0, #7c7a86);
  --encre: #1c1b22;
}
.boitier.cache {
  --etiquette: linear-gradient(135deg, #2a2f3a, #1a1e26);
  --encre: #c9d4e4;
}
.etiquette-mqc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 7px;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  background: var(--etiquette);
  color: var(--encre);
  line-height: 1.15;
}
.em-gauche {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.62rem;
}
.em-gauche strong {
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.em-gauche span {
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.em-logo {
  font-family: var(--titre);
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 1 !important;
  color: #c0391b;
}
.boitier.cache .em-logo {
  color: #ff8a4c;
}
.em-droite {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}
.em-note {
  font-family: var(--titre);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
}
.em-intitule {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.boitier.cache .em-note {
  animation: clignote 1.4s ease-in-out infinite;
}
@keyframes clignote {
  50% {
    opacity: 0.35;
  }
}
.boitier-fenetre {
  aspect-ratio: 63 / 88;
  padding: 6%;
  border-radius: 6px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.25));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.boitier-fenetre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4.5%/3.2%;
}
.boitier-reflet {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.07) 38%, transparent 46%);
  pointer-events: none;
}

.grille-boitiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.4rem;
  margin-top: 1.2rem;
}
.porte-boitier {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s;
}
.porte-boitier:hover {
  transform: translateY(-6px) rotate(-1deg);
}
.notes-mqc .note-or {
  --c: #f2c45a;
}
.notes-mqc .note-argent {
  --c: #c8d0dc;
}
.notes-mqc .note-bronze {
  --c: #c98a5a;
}
.notes-mqc .note-standard {
  --c: #6fa8dc;
}
.notes-mqc .note-faible {
  --c: #8a8894;
}
.mqc-vide {
  padding: 2rem 0;
}

/* Les cartes sorties de leur boîtier. */
.sorties {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--trait);
}
.sortie {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--trait);
}
.sortie img {
  width: 2.6rem;
  border-radius: 4px;
}
.sortie-nom {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.9rem;
}
.sortie-nom .doux {
  font-family: var(--mono);
  font-size: 0.75rem;
}

/* Choisir la carte à envoyer, puis le devis. */
.liste-mqc {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0.4rem 0;
  border-top: 1px solid var(--trait);
}
.choix-mqc {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.5rem 0.4rem;
  border: 0;
  border-bottom: 1px solid var(--trait);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}
.choix-mqc:hover {
  background: rgba(64, 170, 235, 0.08);
}
.choix-mqc img {
  width: 2.4rem;
  border-radius: 4px;
}
.choix-mqc > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.choix-mqc .rarete-mini {
  font-size: 0.72rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--c) 80%, white);
}
.choix-mqc .ball {
  width: 0.8rem;
  height: 0.8rem;
}
.fiche.devis .inclinable {
  width: min(260px, 60vw);
}
.notes-chances {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.notes-chances li {
  display: grid;
  grid-template-columns: 1.8rem 1fr 4.2rem 5.5rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
}
.notes-chances li .montant {
  justify-self: end;
}
.notes-chances .mono {
  text-align: right;
  color: var(--doux);
}
.nl-note {
  display: grid;
  place-items: center;
  height: 1.5rem;
  border-radius: 5px;
  background: var(--c);
  color: #15151c;
  font-family: var(--titre);
  font-weight: 800;
}
.nl-barre {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.nl-barre span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c);
}
.notes-chances .note-or,
.criteres-liste .note-or {
  --c: #f2c45a;
}
.notes-chances .note-argent {
  --c: #c8d0dc;
}
.notes-chances .note-bronze {
  --c: #c98a5a;
}
.notes-chances .note-standard {
  --c: #6fa8dc;
}
.notes-chances .note-faible {
  --c: #6d6a75;
}
.actions-devis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.fiche-texte .actions-devis .bouton-contour {
  margin-top: 0;
}
.envoi-mqc {
  display: inline-flex;
  align-items: center;
  margin-top: 0.4rem;
}
.confirmation {
  width: min(460px, 100%);
}
.confirmation .actions {
  margin-top: 0.6rem;
}

/* Un boîtier en grand : ses quatre critères. */
.boitier.grand-boitier {
  flex: none;
  width: min(300px, 70vw);
}
.criteres-liste {
  list-style: none;
  margin: 0.4rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.criteres-liste li {
  display: grid;
  grid-template-columns: 1.4rem 5.5rem 1fr 1.6rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
}
.criteres-liste .mono {
  text-align: right;
  font-weight: 700;
}
.critere-icone svg {
  display: block;
  width: 100%;
}
.criteres-liste .critere-icone {
  color: var(--c);
}
.critere-jauge {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.critere-jauge span {
  display: block;
  width: calc(var(--v, 0) * 10%);
  height: 100%;
  border-radius: inherit;
  background: var(--c);
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s;
}
.niveau-haut {
  --c: #f2c45a;
}
.niveau-moyen {
  --c: #4fb6f0;
}
.niveau-bas {
  --c: var(--corail);
}

/* La révélation, sous l'eau. */
.scene-mqc {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(110, 200, 255, 0.28), transparent 70%),
    linear-gradient(180deg, #0b3a64 0%, #072646 45%, #03101f 100%);
  transition: filter 0.6s;
  /* La scène ne bouge que de haut en bas (sur mobile, quand elle dépasse l'écran). */
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.caustiques {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  opacity: 0.22;
  background:
    radial-gradient(ellipse 120px 40px at 20% 30%, rgba(180, 235, 255, 0.6), transparent 70%),
    radial-gradient(ellipse 90px 30px at 70% 20%, rgba(180, 235, 255, 0.5), transparent 70%),
    radial-gradient(ellipse 160px 50px at 50% 60%, rgba(180, 235, 255, 0.4), transparent 70%),
    radial-gradient(ellipse 100px 30px at 85% 75%, rgba(180, 235, 255, 0.5), transparent 70%),
    radial-gradient(ellipse 130px 40px at 10% 85%, rgba(180, 235, 255, 0.4), transparent 70%);
  background-size: 480px 360px;
  filter: blur(6px);
  animation: caustiques 12s ease-in-out infinite alternate;
}
@keyframes caustiques {
  to {
    transform: translate(60px, 30px) rotate(4deg) scale(1.1);
  }
}
.bulles.plein-ecran {
  position: fixed;
}
.scene-mqc .scene-centre {
  display: grid;
  grid-template-columns: auto minmax(0, 440px);
  grid-template-areas:
    "boitier ."
    "boitier mascotte"
    "boitier criteres"
    "boitier consigne"
    "boitier actions"
    "boitier .";
  grid-template-rows: 1fr auto auto auto auto 1fr;
  align-content: center;
  justify-content: center;
  column-gap: 3rem;
  row-gap: 1rem;
}
.scene-mqc .mqc-mascotte {
  grid-area: mascotte;
}
.scene-mqc .reveal-boitier {
  grid-area: boitier;
  align-self: center;
  width: min(300px, 34vw, 52vh);
}
.scene-mqc .criteres {
  grid-area: criteres;
}
.scene-mqc .consigne {
  grid-area: consigne;
  min-height: 1.4em;
  margin: 0;
  text-align: center;
  color: rgba(220, 240, 255, 0.7);
}
.scene-mqc .reveal-actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Magicarpe et ce qu'il dit. */
.mqc-mascotte {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 110px;
}
.mqc-mascotte .magicarpe {
  --e: 3;
  animation: nage-lente 3s ease-in-out infinite;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}
.replique {
  position: relative;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  background: #f8f6f0;
  color: #1a1a22;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7);
  opacity: 0;
}
.replique::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  translate: 0 -50%;
  border: 9px solid transparent;
  border-left: 0;
  border-right-color: #f8f6f0;
}
.replique.visible {
  animation: replique 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
@keyframes replique {
  from {
    opacity: 0;
    transform: scale(0.7) translateX(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Les quatre critères : des tuiles à retourner. */
.criteres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}
.critere {
  position: relative;
  height: 104px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  perspective: 700px;
  cursor: pointer;
}
.critere-dos,
.critere-face {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.critere-dos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid rgba(160, 220, 255, 0.3);
  background:
    radial-gradient(circle at 50% 120%, rgba(64, 170, 235, 0.35), transparent 70%),
    rgba(8, 30, 56, 0.85);
  font-family: var(--titre);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #cfeaff;
  animation: invite 2.4s ease-in-out infinite;
}
.critere:nth-child(2) .critere-dos {
  animation-delay: 0.3s;
}
.critere:nth-child(3) .critere-dos {
  animation-delay: 0.6s;
}
.critere:nth-child(4) .critere-dos {
  animation-delay: 0.9s;
}
@keyframes invite {
  0%,
  70%,
  100% {
    transform: rotateY(0) translateY(0);
  }
  80% {
    transform: rotateY(0) translateY(-5px) rotate(-2deg);
  }
  90% {
    transform: rotateY(0) translateY(-2px) rotate(2deg);
  }
}
.critere:hover .critere-dos {
  border-color: var(--or);
  box-shadow: 0 0 24px -6px rgba(227, 184, 98, 0.6);
}
.critere-face {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.6rem;
  padding: 0 1rem;
  align-content: center;
  border: 1px solid color-mix(in srgb, var(--c, #fff) 55%, transparent);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--c, #fff) 25%, transparent), transparent 60%),
    rgba(6, 20, 38, 0.92);
  transform: rotateY(180deg);
  text-align: left;
}
.critere.revele {
  cursor: default;
}
.critere.revele .critere-dos {
  animation: none;
  transform: rotateY(-180deg);
}
.critere.revele .critere-face {
  transform: rotateY(0);
}
.critere-face .critere-icone {
  color: var(--c);
}
.critere-nom {
  font-weight: 700;
}
.critere-valeur {
  grid-row: span 2;
  font-family: var(--titre);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--c);
}
.critere-face .critere-jauge {
  grid-column: 1 / 3;
}
.critere.revele.niveau-haut .critere-face {
  box-shadow: 0 0 30px -8px rgba(242, 196, 90, 0.7);
}

/* Le suspense, puis la note qui tombe. */
.scene-mqc .mqc-mascotte,
.scene-mqc .criteres,
.scene-mqc .consigne,
.scene-mqc .caustiques,
.scene-mqc .bulles {
  transition: opacity 0.6s;
}
.scene-mqc.suspense .mqc-mascotte,
.scene-mqc.suspense .criteres,
.scene-mqc.suspense .consigne,
.scene-mqc.suspense .caustiques,
.scene-mqc.suspense .bulles {
  opacity: 0.2;
}
.scene-mqc.suspense .reveal-boitier {
  position: relative;
  z-index: 2;
  animation: tremble 0.12s linear infinite;
}
@keyframes tremble {
  25% {
    transform: translate(1px, -1px) rotate(0.4deg);
  }
  75% {
    transform: translate(-1px, 1px) rotate(-0.4deg);
  }
}
.boitier.tombe .em-note {
  animation: note-tombe 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.boitier.tombe .etiquette-mqc {
  animation: etiquette-flash 0.9s ease-out;
}
@keyframes note-tombe {
  from {
    transform: scale(4) translateY(-20px);
    opacity: 0;
  }
}
@keyframes etiquette-flash {
  from {
    filter: brightness(2.5);
  }
}
.scene-mqc.secousse .scene-centre {
  animation: secousse 0.45s ease-out;
}
@keyframes secousse {
  20% {
    transform: translate(-8px, 4px);
  }
  40% {
    transform: translate(7px, -5px);
  }
  60% {
    transform: translate(-5px, 3px);
  }
  80% {
    transform: translate(3px, -2px);
  }
}
.scene-mqc.verdict-or {
  background:
    radial-gradient(ellipse 60% 55% at 35% 50%, rgba(242, 196, 90, 0.35), transparent 70%),
    linear-gradient(180deg, #0b3a64 0%, #072646 45%, #03101f 100%);
}
.scene-mqc.verdict-or .boitier {
  animation: boitier-or 2.4s ease-in-out infinite;
}
@keyframes boitier-or {
  50% {
    box-shadow:
      0 22px 40px -18px rgba(0, 0, 0, 0.9),
      0 0 80px -6px rgba(242, 196, 90, 0.8);
  }
}
.scene-mqc.verdict-faible .caustiques {
  opacity: 0.08;
}
.valeur-finale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  animation: apparait 0.5s ease-out;
}
.reveal-actions .actions {
  justify-content: center;
  animation: apparait 0.5s ease-out;
}

/* Les réactions de Magicarpe. */
.mqc-mascotte.saute .magicarpe {
  animation: saute 0.9s cubic-bezier(0.3, 0, 0.6, 1) 3;
}
@keyframes saute {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  40% {
    transform: translateY(-46px) rotate(-18deg);
  }
  60% {
    transform: translateY(-46px) rotate(14deg);
  }
}
.mqc-mascotte.nage .magicarpe {
  animation: nage 2.2s ease-in-out infinite;
}
@keyframes nage {
  0%,
  100% {
    transform: translateX(0) rotate(-4deg);
  }
  50% {
    transform: translateX(18px) rotate(4deg);
  }
}
/* Trempette : il gigote sur place, et rien ne se passe. */
.mqc-mascotte.trempette .magicarpe::before {
  animation: mc-saut 0.5s steps(5, jump-none) infinite alternate;
}
.mqc-mascotte.saute .magicarpe::before {
  animation: mc-saut 0.9s steps(5, jump-none) infinite alternate;
}
.scene-mqc.suspense .magicarpe::before {
  animation: none;
  background-position-x: calc(-336px * var(--e));
}
.mqc-mascotte.chromatique .magicarpe::before {
  background-position-y: calc(-48px * var(--e));
}
.mqc-mascotte.trempette .magicarpe {
  animation: trempette 0.5s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes trempette {
  0%,
  100% {
    transform: translateY(0) rotate(0) scaleY(1);
  }
  25% {
    transform: translateY(-22px) rotate(-25deg) scaleY(1.05);
  }
  50% {
    transform: translateY(0) rotate(0) scaleY(0.88);
  }
  75% {
    transform: translateY(-22px) rotate(25deg) scaleY(1.05);
  }
}
/* L'évolution : il devient blanc et clignote, comme dans les jeux… */
.mqc-mascotte.evolution .magicarpe {
  animation: evolution 1.3s steps(1) forwards;
}
@keyframes evolution {
  0%,
  20%,
  40%,
  55%,
  70%,
  80%,
  90% {
    filter: brightness(0) invert(1) drop-shadow(0 0 14px #fff);
    transform: scale(1.1);
  }
  10%,
  30%,
  48%,
  62%,
  75%,
  85%,
  95% {
    filter: brightness(0) invert(1) drop-shadow(0 0 30px #fff);
    transform: scale(0.9);
  }
  100% {
    filter: none;
    transform: none;
  }
}
/* … et ressort chromatique : un Magicarpe doré. */
.mqc-mascotte.chromatique .magicarpe {
  animation: saute 0.9s cubic-bezier(0.3, 0, 0.6, 1) infinite;
  filter: drop-shadow(0 0 22px rgba(255, 215, 90, 0.8));
}
.flash-evolution {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, #fff, rgba(255, 240, 200, 0.6) 40%, transparent 75%);
  opacity: 0;
  animation: flash-evolution 1.6s ease-out 1.1s;
}
@keyframes flash-evolution {
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.pluie-or {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.pluie-or span {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  background: var(--degrade-or);
  opacity: 0;
  animation: pluie-or var(--d) linear calc(1.3s + var(--t)) infinite;
}
.pluie-or span:nth-child(3n) {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
@keyframes pluie-or {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(var(--r));
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .mqc-tete {
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }
  .mascotte {
    width: 96px;
  }
  .mascotte .magicarpe {
    --e: 1.5;
  }
  .postes {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }
  .bac {
    min-height: 250px;
  }
  .grille-boitiers {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
  }
  .em-note {
    font-size: 1.5rem;
  }
  .sortie {
    grid-template-columns: 2.4rem 1fr auto;
  }
  .sortie .mqc-mini {
    display: none;
  }
  .scene-mqc .scene-centre {
    grid-template-columns: 1fr;
    grid-template-areas:
      "mascotte"
      "boitier"
      "criteres"
      "consigne"
      "actions";
    grid-template-rows: none;
    justify-items: center;
    row-gap: 0.8rem;
  }
  .scene-mqc .reveal-boitier {
    width: min(180px, 50vw, 24vh);
  }
  .scene-mqc .valeur-finale .montant.enorme {
    font-size: 2.2rem;
  }
  .scene-mqc .reveal-actions {
    gap: 0.6rem;
  }
  .mqc-mascotte {
    min-height: 0;
  }
  .mqc-mascotte .magicarpe {
    --e: 2;
  }
  .replique {
    font-size: 0.82rem;
  }
  .criteres {
    width: 100%;
    gap: 0.5rem;
  }
  .critere {
    height: 66px;
  }
  .critere-face {
    row-gap: 0.35rem;
  }
  .critere-valeur {
    font-size: 1.8rem;
  }
  .critere-face {
    padding: 0 0.7rem;
  }
  .notes-chances li {
    grid-template-columns: 1.6rem 1fr 3.6rem 4.6rem;
    gap: 0.4rem;
  }
}

.credits {
  margin: 2.5rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--tres-doux);
}

/* Panel admin --------------------------------------------------------------------------- */

.admin-tete {
  padding: 2.2rem 0 0;
}
.admin-tete .doux {
  margin: 0.6rem 0 0;
}
.admin-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.2rem;
}
.admin-bloc {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: var(--fond-2);
}
.admin-bloc h3 {
  margin: 0;
  font-family: var(--titre);
  font-size: 1.25rem;
}
.admin-bloc .petit-texte,
.admin-bloc > .doux {
  margin: 0;
}
.notes-test {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.35rem;
}
.note-test {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--trait-fort);
  background: var(--surface);
  color: var(--texte);
  font-family: var(--titre);
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.15s,
    background 0.15s;
}
.note-test:hover {
  transform: translateY(-2px);
}
.note-test.actif {
  border-color: transparent;
  background: var(--c);
  color: #15151c;
}
.note-test.note-or {
  --c: #f2c45a;
}
.note-test.note-argent {
  --c: #c8d0dc;
}
.note-test.note-bronze {
  --c: #c98a5a;
}
.note-test.note-standard {
  --c: #6fa8dc;
}
.note-test.note-faible {
  --c: #8a8894;
}
.admin-liste,
.admin-joueurs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--trait);
}
.admin-ligne {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid var(--trait);
  font-size: 0.9rem;
}
.admin-ligne img {
  width: 2.4rem;
  border-radius: 4px;
}
.admin-nom {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-nom .doux {
  font-size: 0.78rem;
}
.admin-joueurs .admin-ligne {
  grid-template-columns: 2.4rem minmax(0, 1fr) 8rem 6rem 6rem auto;
}
.admin-joueurs .entete-table {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tres-doux);
}
.avatar.petit {
  width: 2rem;
  height: 2rem;
  font-size: 0.85rem;
  box-shadow: none;
}
.admin-actions-tous {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.admin-fenetre {
  gap: 0.9rem;
  overflow-y: auto;
}
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--trait);
}
.admin-champs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.admin-champs input,
.admin-champs select {
  min-width: 0;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--trait-fort);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
}
.admin-champs input[name="montant"],
.admin-champs select {
  flex: 1;
}
.admin-champs input[name="quantite"],
.admin-champs input[name="nombre"] {
  width: 5rem;
}
.admin-champs input:focus,
.admin-champs select:focus {
  outline: 0;
  border-color: var(--or);
}
.admin-choisie {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-resultats {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
}
.admin-resultats button {
  display: grid;
  grid-template-columns: 1rem auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}
.admin-resultats button:hover,
.admin-resultats button.actif {
  background: color-mix(in srgb, var(--or) 14%, transparent);
}
.admin-resultats .ball {
  width: 1rem;
  height: 1rem;
}
.admin-resultats .doux {
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .admin-grille {
    grid-template-columns: 1fr;
  }
  .notes-test {
    grid-template-columns: repeat(5, 1fr);
  }
  .admin-joueurs .admin-ligne {
    grid-template-columns: 2rem minmax(0, 1fr) auto auto;
  }
  .admin-joueurs .admin-ligne > :nth-child(4),
  .admin-joueurs .admin-ligne > :nth-child(5) {
    display: none;
  }
  .admin-ligne {
    gap: 0.6rem;
  }
}
@media (max-width: 760px) {
  /* Six onglets avec l'admin : ils défilent s'ils ne tiennent pas. */
  .onglets {
    gap: 1.1rem;
    justify-content: safe center;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.4rem;
  }
  .onglets button {
    flex: none;
  }
}
@media (max-width: 420px) {
  .onglets {
    gap: 0.85rem;
  }
  .onglets button {
    font-size: 0.86rem;
  }
}

/* Classements --------------------------------------------------------------------------- */

.avatar-joueur {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  overflow: hidden;
  font-family: var(--titre);
  font-weight: 800;
  color: var(--texte);
  background: linear-gradient(135deg, #6d5bd0, #2c2450);
}
.avatar-joueur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-joueur.grand {
  width: 84px;
  height: 84px;
  font-size: 2rem;
}
.avatar-joueur.geant {
  width: 132px;
  height: 132px;
  font-size: 3.2rem;
}

/* Le podium : les trois premiers sur leurs marches. */
.podium-classement {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 220px));
  justify-content: center;
  align-items: end;
  gap: 1rem;
  margin: 3rem 0 1.5rem;
}
.marche {
  --metal: linear-gradient(160deg, #f0d9b5, #c98a5a 55%, #8a5634);
  --lueur: rgba(201, 138, 90, 0.5);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.marche-or {
  --metal: var(--degrade-or);
  --lueur: rgba(242, 196, 90, 0.6);
}
.marche-argent {
  --metal: linear-gradient(160deg, #ffffff, #c8d0dc 50%, #8d98aa);
  --lueur: rgba(200, 208, 220, 0.5);
}
.marche .avatar-joueur {
  box-shadow:
    0 0 0 3px var(--fond),
    0 0 0 6px transparent,
    0 0 40px -6px var(--lueur);
  outline: 4px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.marche .avatar-joueur::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 4px;
  background: var(--metal);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.marche-or .avatar-joueur {
  width: 108px;
  height: 108px;
}
.marche > strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--titre);
  font-size: 1.1rem;
}
.marche-valeur {
  font-size: 0.9rem;
  color: var(--doux);
}
.socle {
  display: grid;
  place-items: start center;
  width: 100%;
  height: 70px;
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-radius: 14px 14px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 60%),
    var(--surface);
  border: 1px solid var(--trait);
  border-bottom: 0;
  box-shadow: inset 0 3px 0 -1px rgba(255, 255, 255, 0.06);
}
.marche-or .socle {
  height: 120px;
}
.marche-argent .socle {
  height: 92px;
}
.socle-rang {
  font-family: var(--titre);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marche:hover .avatar-joueur {
  transform: translateY(-4px);
}
.marche .avatar-joueur {
  transition: transform 0.25s;
}
.couronne {
  width: 40px;
  margin-bottom: -0.3rem;
  color: #f2c45a;
  filter: drop-shadow(0 0 12px rgba(242, 196, 90, 0.7));
  animation: couronne 2.6s ease-in-out infinite;
}
.couronne svg {
  display: block;
  width: 100%;
}
@keyframes couronne {
  50% {
    transform: translateY(-5px) rotate(-4deg);
  }
}
.marche.moi > strong {
  color: var(--or-clair);
}

.liste-classement {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 760px;
  margin: 0 auto;
}
.rangee {
  display: grid;
  grid-template-columns: 2.4rem 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 1rem 0.55rem 0.6rem;
  border-radius: 14px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.rangee:has(.barre-set) {
  grid-template-columns: 2.4rem 2.4rem minmax(0, 1fr) minmax(60px, 160px) auto;
}
.rangee:hover {
  transform: translateX(4px);
  border-color: var(--trait-fort);
}
.rangee.moi {
  border-color: var(--or);
  background: color-mix(in srgb, var(--or) 8%, var(--fond-2));
}
.rangee strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rangee-rang {
  text-align: center;
  font-weight: 700;
  color: var(--doux);
}
.rangee-valeur {
  justify-self: end;
}
.barre-set {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.barre-set span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--degrade-or);
}
/* Profil : la carte de dresseur ---------------------------------------------------------- */

.places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 820px;
  margin: 1.2rem auto 0;
}
.place {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
  color: var(--doux);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.place strong {
  font-family: var(--titre);
  color: var(--texte);
}
.place-or {
  border-color: rgba(242, 196, 90, 0.7);
}
.place-or strong {
  color: #f2c45a;
}
.place-argent {
  border-color: rgba(200, 208, 220, 0.6);
}
.place-bronze {
  border-color: rgba(201, 138, 90, 0.6);
}
.stats-profil {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.7rem;
  max-width: 820px;
  margin: 1.4rem auto 0;
}
.stats-profil .case span {
  font-size: 0.78rem;
}
.vitrine-profil {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
}
.vitrine-profil .inclinable {
  width: min(220px, 40vw);
}
.profil-anneaux .anneau:hover {
  transform: none;
}
.anneau.complet {
  border-color: hsl(var(--h) 70% 55% / 0.7);
}
.lien {
  padding: 0;
  border: 0;
  background: none;
  color: var(--or-clair);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 760px) {
  .podium-classement {
    gap: 0.5rem;
    margin-top: 2rem;
  }
  .avatar-joueur.grand {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  .marche-or .avatar-joueur {
    width: 76px;
    height: 76px;
  }
  .marche > strong {
    font-size: 0.9rem;
  }
  .marche-valeur {
    font-size: 0.78rem;
  }
  .socle-rang {
    font-size: 2rem;
  }
  .rangee,
  .rangee:has(.barre-set) {
    grid-template-columns: 1.8rem 2.2rem minmax(0, 1fr) auto;
    gap: 0.6rem;
  }
  .rangee .barre-set {
    display: none;
  }
  .avatar-joueur.geant {
    width: 96px;
    height: 96px;
  }
  .stats-profil {
    grid-template-columns: repeat(2, 1fr);
  }
}
.profil-anneaux {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 820px;
  margin: 0 auto;
}
.profil-anneaux .anneau {
  width: 180px;
}
@media (max-width: 760px) {
  .profil-anneaux .anneau {
    width: calc(50% - 0.7rem);
  }
}
.boitiers-profil {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.boitiers-profil .porte-boitier {
  width: 200px;
  cursor: default;
}
@media (max-width: 760px) {
  .boitiers-profil .porte-boitier {
    width: calc(50% - 0.5rem);
  }
}

/* Les raretés de la collection : la rangée défile sans barre, avec un fondu et des flèches
   du côté où il reste des puces à voir. */
.defileur {
  --g: 0px;
  --d: 0px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.defileur.debut {
  --g: 48px;
}
.defileur.fin {
  --d: 48px;
}
.defileur .puces-raretes {
  flex: 1;
  min-width: 0;
  padding-bottom: 0;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 var(--g), #000 calc(100% - var(--d)), transparent);
  mask: linear-gradient(90deg, transparent, #000 var(--g), #000 calc(100% - var(--d)), transparent);
}
.defileur .puces-raretes::-webkit-scrollbar {
  display: none;
}
.defile {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 1px solid var(--trait-fort);
  background: var(--fond-2);
  color: var(--texte);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}
.defile:hover {
  border-color: var(--or);
}
.defileur:not(.debut) .defile.gauche,
.defileur:not(.fin) .defile.droite {
  opacity: 0.25;
  pointer-events: none;
}
.defileur.sans-debord .defile {
  display: none;
}
@media (max-width: 760px) {
  .defile {
    display: none;
  }
}

/* Le badge du site : en image dans la barre, en 3D sur l'écran de connexion. */
.logo-badge {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 8px rgba(227, 184, 98, 0.35));
  transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.marque:hover .logo-badge {
  transform: rotate(-8deg) scale(1.08);
}
.badge-3d {
  display: grid;
  place-items: center;
  width: min(220px, 50vw);
  aspect-ratio: 1;
  margin: -0.6rem 0 -0.4rem;
}
.badge-3d img {
  width: 78%;
  filter: drop-shadow(0 10px 30px rgba(227, 184, 98, 0.35));
}
.badge-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6));
}

/* Le chargement : le badge tourne sur lui-même comme une pièce d'or qu'on lance. */
.chargeur {
  width: 4.5rem;
  height: 4.5rem;
  animation:
    piece-lancee 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    lueur-badge 1.8s ease-in-out infinite;
}
.chargeur.arrete {
  animation: none;
  filter: grayscale(0.6) brightness(0.7);
}
@keyframes piece-lancee {
  0% {
    transform: perspective(500px) rotateY(0) translateY(0);
  }
  50% {
    transform: perspective(500px) rotateY(180deg) translateY(-10px);
  }
  100% {
    transform: perspective(500px) rotateY(360deg) translateY(0);
  }
}
@keyframes lueur-badge {
  0%,
  100% {
    filter: drop-shadow(0 4px 10px rgba(227, 184, 98, 0.25));
  }
  50% {
    filter: drop-shadow(0 8px 26px rgba(227, 184, 98, 0.65));
  }
}
@media (prefers-reduced-motion: reduce) {
  .chargeur {
    animation: lueur-badge 1.8s ease-in-out infinite;
  }
}

/* Le menu « Plus » de la barre (Classement, Amis, Boîte aux lettres) ---------------- */

.menu-plus {
  position: relative;
}
.menu-plus > button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.menu-plus .chevron {
  font-size: 0.7em;
  transition: transform 0.2s;
}
.menu-plus.ouvert .chevron {
  transform: rotate(180deg);
}
.menu-plus .menu-deroulant {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  top: calc(100% + 1.1rem);
  min-width: 210px;
}
.menu-plus.ouvert .menu-deroulant {
  display: flex;
}
.onglets .menu-deroulant button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--texte);
}
.onglets .menu-deroulant button::after {
  content: none;
}
.pastille {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--corail);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}
.pastille[hidden] {
  display: none;
}
/* Le petit rond rouge de la barre (Carnet, Plus, Amis) : du nouveau à voir. */
.pastille.point-notif {
  min-width: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  margin-left: 0.3rem;
  vertical-align: 0.45em;
  box-shadow: 0 0 0 2px var(--fond);
  animation: point-notif 2.4s ease-in-out infinite;
}
@keyframes point-notif {
  0%,
  70%,
  100% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.35);
  }
}
@media (max-width: 760px) {
  /* Le menu « Plus » ne doit pas être coupé : la barre ne défile plus. */
  .onglets {
    overflow: visible;
    gap: 0.75rem;
  }
  .menu-plus .menu-deroulant {
    left: auto;
    right: -0.5rem;
    transform: none;
  }
}

/* Amis --------------------------------------------------------------------------------- */

.amis-tete {
  padding: 2.2rem 0 0.2rem;
}
.amis-tete .doux {
  margin: 0.4rem 0 0;
}
.sous-onglets {
  display: flex;
  gap: 0.4rem;
  margin: 1.6rem 0 2rem;
  border-bottom: 1px solid var(--trait);
  overflow-x: auto;
  scrollbar-width: none;
}
.sous-onglets button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.8rem 1rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--doux);
}
.sous-onglets button.actif {
  color: var(--texte);
}
.sous-onglets button.actif::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--degrade-or);
}
.amis-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 3rem 1rem;
  text-align: center;
}
.amis-vide.petit {
  padding: 2rem 1rem;
}
.vide-badge {
  width: 64px;
  opacity: 0.35;
  filter: grayscale(0.4);
}
.bouton-clair {
  padding: 0.7rem 1.3rem;
  border-radius: 12px;
  background: var(--texte);
  color: var(--fond);
  font-weight: 800;
  transition: transform 0.2s;
}
.bouton-clair:hover {
  transform: translateY(-2px);
}
.grille-amis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.carte-ami {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 1.4rem 1rem 1rem;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: var(--fond-2);
  text-align: center;
}
.carte-ami strong {
  font-family: var(--titre);
  font-size: 1.1rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carte-ami > .doux {
  font-size: 0.8rem;
}
.carte-ami-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.retirer-ami {
  font-size: 0.78rem;
  color: var(--tres-doux);
  text-decoration: none;
}
.retirer-ami:hover {
  color: var(--corail);
}
.liste-joueurs {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.6rem 0 1.4rem;
}
.ligne-joueur {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
}
.lj-nom {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lj-nom strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lj-nom .doux {
  font-size: 0.78rem;
}
.lj-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lj-actions .doux {
  font-size: 0.82rem;
}
.amis-corps .recherche {
  max-width: 520px;
}

/* La messagerie : les conversations à gauche, le fil à droite. */
.messagerie {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  height: min(640px, calc(100vh - 260px));
  min-height: 420px;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: var(--fond-2);
  overflow: hidden;
}
.liste-conversations {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem;
  border-right: 1px solid var(--trait);
  overflow-y: auto;
}
.lc-titre {
  margin: 0.8rem 0.5rem 0.3rem;
}
.ligne-conversation {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem;
  border-radius: 12px;
  text-align: left;
  transition: background 0.2s;
}
.ligne-conversation:hover {
  background: rgba(255, 255, 255, 0.04);
}
.ligne-conversation.actif {
  background: color-mix(in srgb, var(--or) 12%, transparent);
}
.lc-texte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lc-texte .doux {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}
.ligne-conversation.non-lue .lc-texte .doux {
  color: var(--texte);
  font-weight: 700;
}
.lc-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--tres-doux);
}
.fil {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.fil-vide {
  display: grid;
  place-items: center;
  height: 100%;
}
.fil .ecran-centre {
  min-height: 0;
  height: 100%;
}
.fil-tete {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--trait);
}
.fil-tete strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fil-retour {
  display: none;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 0.3rem;
}
.fil-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  overflow-y: auto;
}
.fil-debut {
  margin: auto;
}
.bulle {
  align-self: flex-start;
  max-width: min(75%, 480px);
  padding: 0.6rem 0.9rem;
  border-radius: 16px 16px 16px 4px;
  background: var(--surface-2);
}
.bulle p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bulle .mono {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.66rem;
  color: var(--tres-doux);
}
.bulle.mienne {
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  background: linear-gradient(135deg, #f2c45a, #c9922f);
  color: #1a1408;
}
.bulle.mienne .mono {
  color: rgba(26, 20, 8, 0.65);
  text-align: right;
}
.fil-saisie {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0.8rem;
  border-top: 1px solid var(--trait);
}
.fil-saisie textarea {
  flex: 1;
  max-height: 140px;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--trait-fort);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  resize: none;
  field-sizing: content;
}
.fil-saisie textarea:focus {
  outline: 0;
  border-color: var(--or);
}
.profil-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: -0.4rem 0 1rem;
}
@media (max-width: 760px) {
  /* Sur mobile : la liste des conversations, ou la conversation ouverte. */
  .messagerie {
    grid-template-columns: 1fr;
    height: calc(100vh - 230px);
  }
  .messagerie.ouverte .liste-conversations,
  .messagerie:not(.ouverte) .fil {
    display: none;
  }
  .liste-conversations {
    border-right: 0;
  }
  .fil-retour {
    display: block;
  }
  .fil-tete .bouton-contour {
    display: none;
  }
  .grille-amis {
    grid-template-columns: repeat(2, 1fr);
  }
  .ligne-joueur {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }
  .lj-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Boîte aux lettres : une lettre, des timbres, un sceau de cire --------------------- */

.genre-bug {
  --g: #ff7a59;
}
.genre-idee {
  --g: #8b8cff;
}
.genre-avis {
  --g: #f2c45a;
}
.genre-question {
  --g: #4fd1a5;
}
.atelier {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  max-width: 940px;
  margin-top: 1.8rem;
}
.planche {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.1rem;
  border-radius: 18px;
  border: 1px solid var(--trait);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0 10px, transparent 10px 20px),
    var(--fond-2);
}
.planche-timbres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.choix-timbre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.2rem 0.5rem;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.choix-timbre:nth-child(odd) .timbre {
  transform: rotate(-3deg);
}
.choix-timbre:nth-child(even) .timbre {
  transform: rotate(2deg);
}
.choix-timbre:hover {
  transform: translateY(-3px);
}
.choix-timbre > .doux {
  font-size: 0.72rem;
  line-height: 1.2;
}
.choix-timbre:not(.actif) .timbre {
  filter: saturate(0.35) brightness(0.75);
}
.choix-timbre.actif > .doux {
  color: var(--texte);
}

/* Un timbre : bords dentelés (un masque perce les trous), image et valeur. */
.timbre {
  --dent: 10px;
  display: inline-block;
  width: 92px;
  padding: calc(var(--dent) / 2);
  background: #f6efe0;
  -webkit-mask:
    radial-gradient(circle calc(var(--dent) / 3.2), #0000 96%, #000) calc(var(--dent) / -2)
      calc(var(--dent) / -2) / var(--dent) var(--dent) round,
    linear-gradient(#000 0 0) content-box;
  mask:
    radial-gradient(circle calc(var(--dent) / 3.2), #0000 96%, #000) calc(var(--dent) / -2)
      calc(var(--dent) / -2) / var(--dent) var(--dent) round,
    linear-gradient(#000 0 0) content-box;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
  transition: filter 0.25s;
}
.timbre-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.3rem 0.45rem;
  border: 1.5px solid color-mix(in srgb, var(--g) 70%, #1a1408);
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--g) 35%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--g) 85%, #fff), color-mix(in srgb, var(--g) 70%, #000));
  color: #1a1408;
}
.timbre-image svg {
  width: 1.9rem;
  height: 1.9rem;
}
.timbre-nom {
  font-family: var(--titre);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.timbre-valeur {
  font-family: var(--mono);
  font-size: 0.55rem;
  opacity: 0.75;
}

/* La feuille : papier sombre ligné, l'adresse, le timbre collé et oblitéré. */
.papier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.4rem 1.6rem 1.6rem;
  border-radius: 6px 6px 20px 20px;
  background:
    linear-gradient(90deg, transparent 2.6rem, rgba(255, 107, 74, 0.25) 2.6rem 2.7rem, transparent 2.7rem),
    linear-gradient(180deg, #1b1a20, #141318);
  border: 1px solid var(--trait-fort);
  box-shadow:
    0 30px 60px -25px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform-origin: 50% 0;
}
.papier-tete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-left: 1.6rem;
}
.papier-adresse {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--titre);
  font-size: 1.05rem;
}
.papier-adresse b {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--or);
}
.papier-affranchi {
  position: relative;
  flex: none;
}
.papier-affranchi .timbre {
  width: 76px;
  transform: rotate(4deg);
  animation: colle 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes colle {
  from {
    transform: rotate(-12deg) scale(1.4);
    opacity: 0;
  }
}
/* Le cachet de la poste, à moitié sur le timbre. */
.oblitere {
  position: absolute;
  left: -38px;
  top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(227, 184, 98, 0.55);
  color: rgba(227, 184, 98, 0.75);
  font-family: var(--titre);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  transform: rotate(-14deg);
  pointer-events: none;
}
.oblitere .mono {
  font-size: 0.6rem;
  letter-spacing: 0;
}
.oblitere::before,
.oblitere::after {
  content: "";
  position: absolute;
  left: 62px;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: rgba(227, 184, 98, 0.45);
}
.oblitere::before {
  top: 24px;
}
.oblitere::after {
  top: 34px;
}
.papier textarea {
  min-height: 15rem;
  padding: 0 0.4rem 0 1.6rem;
  border: 0;
  background: repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), rgba(255, 255, 255, 0.07) calc(2rem - 1px) 2rem);
  background-attachment: local;
  color: var(--texte);
  font: inherit;
  font-size: 1rem;
  line-height: 2rem;
  resize: vertical;
}
.papier textarea:focus,
.papier-ligne input:focus {
  outline: 0;
}
.papier textarea::placeholder,
.papier-ligne input::placeholder {
  color: var(--tres-doux);
  font-style: italic;
}
.papier-ligne {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-left: 1.6rem;
  border-bottom: 1px dashed var(--trait-fort);
}
.papier-ligne span {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--or);
  white-space: nowrap;
}
.papier-ligne input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--texte);
  font: inherit;
}
.papier-pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-left: 1.6rem;
}
.papier-pied .compteur-car {
  position: static;
}
.reserve {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
}
.mini-timbre {
  width: 14px;
  height: 17px;
  border-radius: 2px;
  background: var(--g);
  box-shadow: 0 0 0 2px #f6efe0;
}
.mini-timbre.utilise {
  background: var(--surface-2);
  box-shadow: 0 0 0 2px var(--trait-fort);
}
.reserve .doux {
  margin-left: 0.4rem;
}
.papier-note {
  margin: 0;
  padding-left: 1.6rem;
  font-size: 0.75rem;
}
/* Le bouton : un sceau de cire au badge du site. */
.bouton-cachet {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 1.4rem 0.5rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(227, 184, 98, 0.5);
  background: linear-gradient(180deg, rgba(227, 184, 98, 0.16), rgba(227, 184, 98, 0.05));
  font-family: var(--titre);
  font-weight: 800;
  color: var(--or-clair);
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.bouton-cachet:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--or);
}
.bouton-cachet:hover:not(:disabled) .cachet-cire {
  transform: rotate(-12deg);
}
.bouton-cachet:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cachet-cire {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #9b2a1f, #6d140d 65%, #4a0b06);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.45),
    inset 0 2px 3px rgba(255, 160, 120, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.cachet-cire img {
  width: 62%;
  filter: sepia(1) saturate(2.5) brightness(0.95) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
}

/* L'envoi : la lettre se plie, puis s'envole. */
.atelier.envoi .planche {
  opacity: 0;
  transition: opacity 0.3s;
}
.atelier.envoi .papier {
  animation: plie-envole 1.5s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}
.atelier.envoi .papier > :not(.bouton-cachet) {
  opacity: 0;
  transition: opacity 0.25s;
}
.atelier.envoi .bouton-cachet {
  animation: sceau 1.5s ease forwards;
}
@keyframes plie-envole {
  0% {
    transform: none;
  }
  35% {
    transform: scaleY(0.35);
    border-radius: 14px;
  }
  60% {
    transform: scaleY(0.35) scaleX(0.6);
  }
  100% {
    transform: translate(40vw, -60vh) scaleY(0.35) scaleX(0.4) rotate(18deg);
    opacity: 0;
  }
}
@keyframes sceau {
  30% {
    transform: scale(1.15);
  }
}

/* Lettre envoyée : l'enveloppe fermée, son timbre, son sceau. */
.courrier-envoye {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 3rem 1rem;
  text-align: center;
  animation: apparait 0.5s ease-out;
}
.enveloppe {
  position: relative;
  width: min(320px, 80vw);
  aspect-ratio: 1.6;
  margin-bottom: 1rem;
  border-radius: 10px;
  background:
    linear-gradient(155deg, transparent 49.5%, rgba(0, 0, 0, 0.35) 50%) top / 100% 50% no-repeat,
    linear-gradient(205deg, transparent 49.5%, rgba(0, 0, 0, 0.25) 50%) top / 100% 50% no-repeat,
    linear-gradient(180deg, #24222b, #1a1920);
  border: 1px solid var(--trait-fort);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.9);
  animation: arrive 0.7s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.enveloppe .timbre {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 64px;
  transform: rotate(5deg);
}
.enveloppe .cachet-cire {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.4rem;
  height: 3.4rem;
  transform: translate(-50%, -50%);
}
@keyframes arrive {
  from {
    transform: translateY(30px) rotate(-6deg);
    opacity: 0;
  }
}
@media (max-width: 760px) {
  .atelier {
    grid-template-columns: 1fr;
  }
  .planche-timbres {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
  }
  .timbre {
    width: 72px;
  }
  .timbre-nom {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }
  .choix-timbre > .doux {
    display: none;
  }
  .papier {
    padding: 1.1rem 1rem 1.2rem;
  }
  .papier-tete,
  .papier-ligne,
  .papier-pied,
  .papier-note {
    padding-left: 0.6rem;
  }
  .papier textarea {
    padding-left: 0.6rem;
  }
  .papier {
    background: linear-gradient(180deg, #1b1a20, #141318);
  }
  .oblitere {
    display: none;
  }
}

/* La boîte aux lettres, côté admin. */
.liste-courrier {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.missive {
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--trait);
  border-left: 3px solid var(--g);
  background: var(--fond-2);
}
.missive.traite {
  opacity: 0.55;
}
.missive header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.missive header .avatar-joueur {
  width: 1.8rem;
  height: 1.8rem;
  font-size: 0.8rem;
}
.missive header .mono {
  font-size: 0.75rem;
}
.genre-puce {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--g) 18%, transparent);
  color: var(--g);
  font-size: 0.75rem;
  font-weight: 800;
}
.missive p {
  margin: 0.7rem 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.missive footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.missive footer .petit-texte {
  margin: 0;
}
.statuts {
  display: flex;
  gap: 0.4rem;
}
.statuts .puce-rarete {
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
}
@media (max-width: 760px) {
  .genres {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Le pied de page : une bande sur toute la largeur, comme la barre du haut. ----------- */

.pied {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 2rem;
  align-items: center;
  margin-top: 3rem;
  padding: 1.1rem 2rem 1.2rem;
  border-top: 1px solid var(--trait);
  background: var(--fond-2);
  font-size: 0.8rem;
  color: var(--tres-doux);
}
.pied-marque {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.pied-marque img {
  flex: none;
  width: 24px;
  opacity: 0.85;
}
.pied-marque strong {
  flex: none;
  font-family: var(--titre);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--doux);
}
.pied-marque em {
  font-style: normal;
  color: var(--or);
}
.pied-marque span {
  padding-left: 0.7rem;
  border-left: 1px solid var(--trait-fort);
  line-height: 1.4;
}
.pied-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
}
.pied-liens button {
  font-weight: 700;
  color: var(--doux);
  transition: color 0.2s;
}
.pied-liens button:hover {
  color: var(--or-clair);
}
.pied-mentions {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.5;
  opacity: 0.8;
}
.contenu {
  padding-bottom: 1rem;
}
.portail-fan {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: var(--tres-doux);
}
@media (max-width: 760px) {
  .pied {
    grid-template-columns: 1fr;
    padding: 1.1rem 1rem 1.3rem;
  }
  .pied-marque {
    flex-wrap: wrap;
  }
  .pied-marque span {
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
  }
}

/* Échanges --------------------------------------------------------------------------- */

.carte-ami .echanger {
  margin-top: 0.2rem;
}
.echanges-tete .doux {
  margin: 0 0 1.2rem;
  max-width: 720px;
}
.liste-propositions {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0.6rem 0 1.6rem;
}
.proposition {
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
}
.proposition.attente.recue {
  border-color: rgba(227, 184, 98, 0.55);
  box-shadow: 0 0 30px -14px rgba(227, 184, 98, 0.5);
}
.passees .proposition {
  opacity: 0.7;
}
.proposition header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.proposition header strong {
  flex: 1;
  min-width: 0;
}
.proposition header .mono {
  font-size: 0.75rem;
}
.statut-echange {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.72rem;
  font-weight: 800;
}
.attente .statut-echange {
  background: rgba(227, 184, 98, 0.16);
  color: var(--or-clair);
}
.acceptee .statut-echange {
  background: rgba(79, 209, 165, 0.16);
  color: var(--vert);
}
.echouee .statut-echange,
.refusee .statut-echange {
  background: rgba(255, 107, 74, 0.14);
  color: var(--corail);
}
.pc-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin: 0.9rem 0 0.4rem;
}
.pc-cote {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.pc-cote .etiquette {
  margin: 0;
}
.pc-cartes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 70px;
}
.pc-carte {
  position: relative;
}
.pc-carte img {
  display: block;
  width: 50px;
  border-radius: 4px;
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.8);
}
.pc-carte b {
  position: absolute;
  right: -6px;
  bottom: -6px;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--or);
  color: #1d1405;
  font-family: var(--mono);
  font-size: 0.68rem;
}
.pc-pd {
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--trait-fort);
  font-size: 0.85rem;
}
.pc-valeur {
  font-size: 0.75rem;
}
.pc-fleches {
  font-size: 1.6rem;
  color: var(--or);
}
.proposition footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

/* La table d'échange. */
.table-tete {
  padding: 1.6rem 0 0.8rem;
}
.table-titre {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.8rem;
}
.table-titre h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.plateau {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1rem;
}
.plateau-cote {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
}
.plateau-titre {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.plateau-titre .etiquette {
  margin: 0;
}
.plateau-cartes {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 120px;
}
.plateau-vide {
  margin: auto 0;
  text-align: center;
}
.plateau-carte {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.4rem;
  border-radius: 10px;
  background: var(--surface);
  animation: apparait 0.25s ease-out;
}
.plateau-carte img {
  width: 2.2rem;
  border-radius: 3px;
}
.plateau-nom {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.85rem;
}
.plateau-nom strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compteur-quantite.petit button {
  width: 1.8rem;
  height: 1.9rem;
  font-size: 1rem;
}
.plateau-argent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--trait-fort);
  background: var(--fond);
}
.plateau-argent input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0;
  border: 0;
  background: none;
  color: var(--texte);
  font: inherit;
}
.plateau-argent input:focus {
  outline: 0;
}
.plateau-valeur {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}
/* La balance : son fléau penche du côté qui reçoit le plus. */
.balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-align: center;
  font-size: 0.82rem;
}
.balance-fleau {
  position: relative;
  width: 110px;
  height: 60px;
}
.balance-fleau::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 46px;
  border-radius: 2px;
  background: var(--degrade-or);
  translate: -50% 0;
}
.balance-fleau span:first-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 4px;
  border-radius: 2px;
  background: var(--degrade-or);
  transform: rotate(var(--penche));
  transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.balance-fleau span:last-child {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--or);
  translate: -50% 0;
}
.balance.equilibre strong {
  color: var(--vert);
}
.balance.penche-lui strong {
  color: var(--corail);
}
.balance.penche-moi strong {
  color: var(--or-clair);
}
.table-envoi {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin: 1.2rem 0 0.4rem;
}
.table-envoi .petit-texte {
  margin: 0;
}
.classeurs-onglets {
  display: none;
}
.classeurs-echange {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}
.classeur-echange {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
}
.ce-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}
.recherche.petite {
  flex: 1;
  max-width: 240px;
  min-width: 140px;
}
.recherche.petite input {
  padding: 0.55rem 0;
}
.ce-modes {
  flex-wrap: wrap;
}
.ce-set {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ce-set select {
  appearance: none;
  flex: 1;
  min-width: 0;
  padding: 0.55rem 2.2rem 0.55rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--trait-fort);
  color: var(--texte);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  background:
    linear-gradient(45deg, transparent 50%, var(--or) 50%) calc(100% - 18px) 55% / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--or) 50%) calc(100% - 12px) 55% / 6px 6px no-repeat,
    var(--fond);
}
.ce-set select:focus {
  outline: 0;
  border-color: var(--or);
}
.ce-suite {
  grid-column: 1 / -1;
  text-align: center;
  padding: 0.6rem 0;
}
.ce-modes .puce-rarete {
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
}
.grille-echange {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 0.6rem;
  max-height: 560px;
  overflow-y: auto;
  padding: 0.2rem 0.3rem 0.2rem 0;
  scrollbar-width: thin;
}
.carte-echange {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0;
  border-radius: 8px;
  transition: transform 0.2s;
}
.carte-echange img {
  width: 100%;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 5px;
}
.carte-echange:hover:not(:disabled) {
  transform: translateY(-3px);
}
.carte-echange.prise img {
  outline: 2px solid var(--or);
  outline-offset: 1px;
}
.carte-echange:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ce-badges {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.ce-badge {
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.ce-badge.nouvelle {
  background: var(--vert);
  color: #062a1e;
}
.ce-badge.souhait {
  background: var(--or);
  color: #1d1405;
}
.ce-pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
}

/* L'échange conclu : les deux paquets se croisent. */
.scene-echange {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(5, 5, 8, 0.86);
  backdrop-filter: blur(6px);
  animation: apparait 0.3s ease-out;
  transition: opacity 0.35s;
}
.scene-echange.fin {
  opacity: 0;
}
.se-pile {
  position: absolute;
  top: 40%;
  width: 120px;
  aspect-ratio: 63 / 88;
}
.se-pile img {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: 7px;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.9);
  transform: translate(calc(var(--i) * 8px), calc(var(--i) * -6px)) rotate(calc(var(--i) * 3deg));
}
.se-donne {
  left: calc(50% - 220px);
  animation: croise-droite 1.4s cubic-bezier(0.6, 0, 0.3, 1) 0.2s forwards;
}
.se-recois {
  left: calc(50% + 100px);
  animation: croise-gauche 1.4s cubic-bezier(0.6, 0, 0.3, 1) 0.2s forwards;
}
@keyframes croise-droite {
  50% {
    transform: translate(160px, -70px) rotate(10deg) scale(1.08);
  }
  100% {
    transform: translate(320px, 0) rotate(0);
  }
}
@keyframes croise-gauche {
  50% {
    transform: translate(-160px, 70px) rotate(-10deg) scale(1.08);
  }
  100% {
    transform: translate(-320px, 0) rotate(0);
  }
}
.se-texte {
  position: absolute;
  top: 70%;
  font-family: var(--titre);
  font-size: 2rem;
  background: var(--degrade-or);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  animation: apparait 0.4s ease-out 1.2s forwards;
}
@media (max-width: 760px) {
  .pc-corps {
    grid-template-columns: 1fr;
  }
  .pc-fleches {
    justify-self: center;
    transform: rotate(90deg);
  }
  .plateau {
    grid-template-columns: 1fr;
  }
  .balance {
    flex-direction: row;
  }
  .balance-fleau {
    width: 80px;
    height: 46px;
  }
  .classeurs-onglets {
    display: flex;
    margin: 1.2rem 0 0;
  }
  .classeurs-echange {
    grid-template-columns: 1fr;
    margin-top: 0.8rem;
  }
  .classeurs-echange.cote-lui [data-classeur="moi"],
  .classeurs-echange.cote-moi [data-classeur="lui"] {
    display: none;
  }
  .grille-echange {
    grid-template-columns: repeat(3, 1fr);
    max-height: none;
  }
  .se-donne {
    left: calc(50% - 150px);
  }
  .se-recois {
    left: calc(50% + 30px);
  }
}

/* Le Pokémon du jour en détail : ses cartes, rangées par booster. */
button.epingle {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}
button.epingle:hover {
  transform: rotate(0deg) translateY(-2px);
  border-color: var(--or);
}
.epingle-lien {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--or);
}
button.action {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button.action:hover {
  border-color: var(--or);
}
.fenetre-pdj {
  position: relative;
  width: min(760px, 100%);
  overflow-y: auto;
}
.fenetre-pdj h2 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
}
.fermer-fenetre {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--trait-fort);
  background: var(--fond);
  color: var(--texte);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.fermer-fenetre:hover {
  border-color: var(--or);
}
.pdj-sets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.4rem;
}
.pdj-set {
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid var(--trait);
  background: var(--fond);
}
.pdj-set-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.pdj-set-tete strong {
  display: block;
  font-family: var(--titre);
  font-size: 1.05rem;
}
.pdj-set-tete .doux {
  font-size: 0.8rem;
}
.pdj-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.8rem;
}
.pdj-carte {
  position: relative;
  margin: 0;
}
.pdj-carte img {
  display: block;
  width: 100%;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.9);
}
.pdj-carte.manquante img {
  filter: grayscale(0.85) brightness(0.6);
}
.pdj-possession {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(8, 8, 11, 0.85);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--or);
}
.pdj-carte.manquante .pdj-possession {
  color: var(--doux);
}
.pdj-carte figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.35rem;
  font-size: 0.68rem;
  color: var(--doux);
}

/* Combien de boosters ouvrir d'un coup. */
.fenetre-nombre {
  width: min(560px, 100%);
  text-align: center;
}
.fenetre-nombre h2 {
  justify-content: center;
  margin: 0;
}
.choix-nombre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 0.7rem;
  margin: 0.8rem 0 0.4rem;
}
.nombre-booster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 0.5rem 0.8rem;
  border-radius: 16px;
  border: 1px solid var(--trait-fort);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.nombre-booster:hover {
  transform: translateY(-3px);
  border-color: var(--or);
}
.nombre-booster strong {
  font-family: var(--titre);
  font-size: 1.5rem;
}
.nombre-booster .doux {
  font-size: 0.78rem;
}
.nb-paquets {
  position: relative;
  width: 44px;
  height: 46px;
}
.nb-paquets span {
  position: absolute;
  bottom: 0;
  left: calc(50% - 13px + (var(--i) - 2) * 4px);
  width: 26px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(160deg, hsl(var(--h) 70% 55%), hsl(var(--h) 60% 25%));
  transform: rotate(calc((var(--i) - 2) * 7deg));
  transform-origin: 50% 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

/* Plusieurs boosters ouverts d'un coup : une rangée de cartes par booster. */
.multi {
  position: relative;
  width: min(1100px, 100%);
  text-align: center;
}
.multi-tete h2 {
  margin: 0.2rem 0 1rem;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
}
.multi-boosters {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.multi-booster {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.multi-numero {
  flex: none;
  width: 1.6rem;
  color: var(--doux);
  font-size: 0.8rem;
}
.multi-cartes {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.5rem;
}
.multi-carte {
  position: relative;
  aspect-ratio: 63 / 88;
}
.multi-carte .face {
  border-radius: 5px;
}
.multi-carte .dos {
  gap: 0.1rem;
  box-shadow:
    inset 0 0 0 2px #121116,
    inset 0 0 0 3px rgba(227, 184, 98, 0.55);
}
.multi-carte .coin,
.multi-carte .dos-sous {
  display: none;
}
.multi-carte {
  container-type: inline-size;
}
.multi-carte .dos {
  gap: 5cqw;
}
.multi-carte .dos-medaillon {
  flex: none;
  width: 46%;
  padding: 6%;
  box-shadow: 0 0 0 1px rgba(227, 184, 98, 0.8);
}
.multi-carte .dos-titre {
  margin-top: 0;
  font-size: 9cqw;
  line-height: 1;
  letter-spacing: 0.12em;
}
.multi-carte .face.devant {
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.9);
}
.multi-carte.hit .carte-3d.retournee .devant {
  box-shadow:
    0 0 0 2px var(--c),
    0 0 18px 2px var(--c);
}
.multi-carte.eclate {
  animation: eclate-multi 0.45s ease-out;
}
@keyframes eclate-multi {
  40% {
    transform: scale(1.18);
  }
}
.multi-carte .pastille-nouveau {
  top: -0.5rem;
}
.multi .commandes {
  display: flex;
  justify-content: center;
  position: sticky;
  bottom: 0.8rem;
  margin-top: 1.2rem;
}
.mini-cartes.multiples {
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 700px) {
  .multi-cartes {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
  }
  .multi-numero {
    display: none;
  }
  .mini-cartes.multiples {
    grid-template-columns: repeat(3, 1fr);
  }
  .pdj-set-tete {
    flex-direction: column;
    align-items: stretch;
  }
  .pdj-cartes {
    grid-template-columns: repeat(3, 1fr);
  }
}
.recap > .petit-texte {
  justify-content: center;
}

/* L'ouverture booster par booster : « Tout ouvrir » sous le booster à charger. */
.tout-ouvrir {
  margin-top: 0.4rem;
}
.multi-carte {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.multi-carte.fremit .carte-3d {
  animation: fremit 1.8s ease-in-out infinite;
}
.multi .commandes {
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.multi .commandes .consigne {
  margin: 0;
}
/* La grande carte par-dessus les lignes : une belle carte, ou une carte touchée. */
.multi-focus {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.5rem;
  background: rgba(5, 5, 8, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: apparait 0.2s ease-out;
  cursor: pointer;
}
.multi-focus .scene-focus {
  --carte: min(280px, 64vw, 46vh);
}
.multi-carte.fremit .dos {
  box-shadow:
    inset 0 0 0 2px #121116,
    inset 0 0 0 3px rgba(227, 184, 98, 0.8),
    0 0 14px 2px rgba(227, 184, 98, 0.45);
}

/* Téléphones : le filtre (ombre, halo, éclat) du grand booster se recalculait à chaque
   image à cause des reflets animés à l'intérieur. Le halo et l'ombre deviennent deux
   calques à part, que l'appareil anime sans redessiner le booster. */
@media (hover: none), (max-width: 700px) {
  .paquet.grand {
    filter: none;
    will-change: transform;
  }
  .booster-zone::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, hsl(var(--h) 95% 60% / 0.75), transparent 62%);
    opacity: calc(0.35 + var(--charge) * 0.65);
    transform: scale(calc(0.85 + var(--charge) * 0.35));
    will-change: opacity, transform;
  }
  .booster-zone::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -6%;
    height: 8%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), transparent);
  }
  .explose .booster-zone::before {
    transition: opacity 0.5s;
    opacity: 0;
  }
  @keyframes eclate {
    to {
      scale: 1.35;
      opacity: 0;
    }
  }
  .lueur {
    filter: none;
  }
  .multi-focus {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(5, 5, 8, 0.92);
  }
}
@media (max-width: 700px) {
  .scene-barre {
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
  }
  .scene-titre {
    min-width: 0;
    font-size: 0.95rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Classements : le menu à gauche, le classement choisi à droite. */
.cl-page {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding-top: 2.2rem;
}
.cl-menu {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 20px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
}
.cl-liste {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cl-choix {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: none;
  color: var(--doux);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cl-choix:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--texte);
}
.cl-choix.actif {
  border-color: rgba(227, 184, 98, 0.45);
  background: linear-gradient(120deg, rgba(227, 184, 98, 0.14), transparent 80%);
  color: var(--texte);
}
.cl-choix > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cl-choix strong {
  font-size: 0.92rem;
}
.cl-choix small {
  font-size: 0.74rem;
  color: var(--tres-doux, var(--doux));
}
.icone-classement {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
}
.cl-choix.actif .icone-classement {
  color: var(--or);
}
.cl-sets {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
}
.cl-sets select {
  appearance: none;
  width: 100%;
  padding: 0.65rem 2.2rem 0.65rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--trait-fort);
  color: var(--texte);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  background:
    linear-gradient(45deg, transparent 50%, var(--or) 50%) calc(100% - 18px) 55% / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--or) 50%) calc(100% - 12px) 55% / 6px 6px no-repeat,
    var(--fond);
}
.cl-sets.actif select {
  border-color: var(--or);
}
.cl-sets select:focus {
  outline: 0;
  border-color: var(--or);
}
.cl-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--trait);
}
.cl-titre {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.cl-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 16px;
  border: 1px solid rgba(227, 184, 98, 0.4);
  background: radial-gradient(circle at 30% 20%, rgba(227, 184, 98, 0.22), var(--fond-2) 70%);
  color: var(--or);
}
.cl-icone .icone-classement {
  width: 1.7rem;
  height: 1.7rem;
}
.cl-icone img {
  width: 82%;
  max-height: 70%;
  object-fit: contain;
}
.cl-icone img + svg {
  display: none;
}
.cl-titre h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.05;
}
.cl-titre .doux {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
}
.cl-moi {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.6rem 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(227, 184, 98, 0.45);
  background: var(--fond-2);
}
.cl-moi strong {
  font-family: var(--titre);
  font-size: 1.35rem;
  color: var(--or-clair);
}
.cl-moi-valeur {
  font-size: 0.85rem;
  color: var(--doux);
}
.cl-contenu .podium-classement {
  margin-top: 2.6rem;
}
.cl-contenu .liste-classement {
  max-width: none;
}
@media (max-width: 900px) {
  .cl-page {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
    padding-top: 1.4rem;
  }
  .cl-menu {
    position: static;
    padding: 0.9rem;
    gap: 0.8rem;
  }
  /* Sur mobile, les classements défilent en une rangée de pastilles. */
  .cl-liste {
    flex-direction: row;
    gap: 0.45rem;
    overflow-x: auto;
    margin: 0 -0.9rem;
    padding: 0 0.9rem 0.2rem;
    scrollbar-width: none;
  }
  .cl-liste::-webkit-scrollbar {
    display: none;
  }
  .cl-choix {
    flex: none;
    width: auto;
    padding: 0.5rem 0.85rem;
    border-color: var(--trait);
    border-radius: 999px;
    gap: 0.5rem;
  }
  .cl-choix small {
    display: none;
  }
  .cl-choix strong {
    font-size: 0.85rem;
    white-space: nowrap;
  }
  .icone-classement {
    width: 1.1rem;
    height: 1.1rem;
  }
  .cl-sets {
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    padding-top: 0.8rem;
  }
  .cl-sets .etiquette {
    flex: none;
  }
  .cl-moi {
    width: 100%;
  }
  .cl-moi .bouton-contour {
    margin-left: auto;
  }
}

/* Profil : la carte de dresseur, noire et or, comme une carte gravée. */
.carte-dresseur {
  position: relative;
  max-width: 820px;
  margin: 2.2rem auto 0;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(227, 184, 98, 0.5);
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(227, 184, 98, 0.16), transparent 65%),
    radial-gradient(ellipse 50% 70% at 0% 100%, rgba(227, 184, 98, 0.08), transparent 60%),
    repeating-linear-gradient(115deg, rgba(227, 184, 98, 0.035) 0 1px, transparent 1px 9px),
    #0f0e12;
  box-shadow:
    inset 0 0 0 6px #0f0e12,
    inset 0 0 0 7px rgba(227, 184, 98, 0.22),
    0 40px 80px -30px rgba(0, 0, 0, 0.95);
}
/* Un reflet qui passe lentement, comme sur une carte métallisée. */
.cd-reflet {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(246, 220, 156, 0.08) 48%, transparent 60%);
  background-size: 250% 100%;
  animation: cd-reflet 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cd-reflet {
  0%,
  100% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0 0;
  }
}
.cd-haut {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.2rem 1.8rem 0;
}
.cd-embleme {
  width: 1.9rem;
  height: 1.9rem;
}
.cd-intitule {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
}
.cd-numero {
  margin-left: auto;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--doux);
}
.cd-corps {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.8rem;
  padding: 1.4rem 1.8rem 1.6rem;
}
.cd-portrait {
  position: relative;
  padding: 6px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #f6dc9c, #a8792c, #f6dc9c, #6b4a17, #f6dc9c);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.95);
}
.cd-portrait .avatar-joueur {
  box-shadow: 0 0 0 4px #0f0e12;
}
.cd-identite {
  min-width: 0;
}
.cd-identite .etiquette {
  color: var(--tres-doux, var(--doux));
}
.cd-identite h1 {
  margin: 0.15rem 0 0;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  overflow-wrap: anywhere;
}
.cd-identite > .doux {
  margin: 0.4rem 0 0.9rem;
}
.profil-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cd-chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-top: 1px solid rgba(227, 184, 98, 0.18);
}
.cd-chiffres div {
  padding: 1rem 1.8rem 1.2rem;
}
.cd-chiffres div + div {
  border-left: 1px solid rgba(227, 184, 98, 0.18);
}
.cd-chiffres dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--doux);
}
.cd-chiffres dd {
  margin: 0.35rem 0 0;
  font-family: var(--titre);
  font-size: 1.45rem;
  font-weight: 800;
}
.cd-places {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.8rem 1.2rem;
  border-top: 1px solid rgba(227, 184, 98, 0.18);
  background: rgba(0, 0, 0, 0.25);
}
.cd-places .places {
  justify-content: flex-start;
  margin: 0;
}
@media (max-width: 760px) {
  .cd-haut {
    padding: 1rem 1.2rem 0;
  }
  .cd-corps {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 1rem;
    padding: 1.2rem 1.2rem 1.3rem;
  }
  .cd-identite {
    width: 100%;
  }
  .profil-actions {
    justify-content: center;
  }
  .cd-chiffres div {
    padding: 0.8rem 0.7rem 0.9rem;
    text-align: center;
  }
  .cd-chiffres dt {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }
  .cd-chiffres dd {
    font-size: 1.05rem;
  }
  .cd-places {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.9rem 1.2rem 1.1rem;
  }
  .cd-places .places {
    justify-content: center;
  }
}

/* Panel admin : le prix de chaque booster. */
.admin-prix {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--trait);
}
.admin-prix .admin-ligne {
  grid-template-columns: minmax(0, 1fr) 8rem 4rem 7rem 8rem 11rem;
}
.enregistrer-prix {
  visibility: hidden;
}
.admin-ligne.modifie .enregistrer-prix {
  visibility: visible;
}
.admin-prix .entete-table {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tres-doux);
}
.admin-prix .admin-ligne.force {
  background: linear-gradient(90deg, rgba(227, 184, 98, 0.08), transparent 70%);
}
.admin-prix .admin-nom {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.admin-prix .admin-nom .doux {
  font-size: 0.75rem;
}
.champ-prix {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--trait-fort);
  background: var(--fond);
}
.champ-prix:focus-within {
  border-color: var(--or);
}
.champ-prix input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--texte);
  font: inherit;
  font-family: var(--mono);
  font-weight: 700;
  outline: 0;
}
.admin-boutons {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}
.rendement {
  font-family: var(--mono);
  font-weight: 700;
}
.rendement.sain {
  color: #6fd38f;
}
.rendement.limite {
  color: var(--or-clair);
}
.rendement.danger {
  color: #ff7a6b;
}
@media (max-width: 760px) {
  .admin-prix .admin-ligne {
    grid-template-columns: minmax(0, 1fr) 3.2rem 6rem;
    row-gap: 0.4rem;
  }
  .admin-prix .admin-ligne > :nth-child(2),
  .admin-prix .admin-ligne > :nth-child(4),
  .admin-prix .entete-table > :last-child {
    display: none;
  }
  /* Les boutons ne prennent une ligne que s'il y a quelque chose à faire. */
  .admin-prix .admin-boutons {
    display: none;
    grid-column: 1 / -1;
  }
  .admin-prix .admin-ligne.modifie .admin-boutons,
  .admin-prix .admin-ligne.force .admin-boutons {
    display: flex;
  }
  .admin-prix .admin-ligne.force:not(.modifie) .enregistrer-prix {
    display: none;
  }
}

/* Préproduction : un bandeau pour ne jamais la confondre avec le vrai site. */
.bandeau-preprod {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0.35rem 1rem;
  background: repeating-linear-gradient(135deg, #ffd36e 0 14px, #1a1408 14px 28px);
  color: #1a1408;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 6px #ffd36e, 0 0 2px #ffd36e;
}

/* Casino : la salle, une grille de jeux en affiches. */
.casino-tete {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem;
  margin-top: 2rem;
  padding: 2rem 2.2rem;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--trait);
  background:
    radial-gradient(ellipse 50% 90% at 100% 0%, rgba(227, 184, 98, 0.18), transparent 70%),
    linear-gradient(120deg, #15131b, #0e0d12);
}
.casino-tete h1 {
  margin: 0.2rem 0 0;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1;
}
.casino-tete .doux {
  margin: 0.5rem 0 0;
  max-width: 34rem;
}
.casino-filigrane {
  position: absolute;
  right: -2rem;
  top: -2.5rem;
  width: 15rem;
  color: rgba(227, 184, 98, 0.07);
  pointer-events: none;
}
.casino-bourse {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(227, 184, 98, 0.45);
  background: rgba(10, 9, 13, 0.7);
}
.casino-bourse strong {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--titre);
  font-size: 1.8rem;
  color: var(--or-clair);
}
.casino-bourse .doux {
  margin: 0;
  font-size: 0.75rem;
}
.casino-bourse .bouton-contour {
  margin-top: 0.4rem;
  align-self: flex-start;
}
.casino-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.2rem;
  margin: 1.4rem 0 1.2rem;
}
.casino-recherche {
  flex: 1 1 260px;
  max-width: 420px;
}
.casino-categories {
  flex-wrap: wrap;
}
.casino-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem 0.9rem;
}
.jeu-carte {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.jeu-tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  padding: 0.8rem 0.7rem 0.75rem;
  border-radius: 14px;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(170deg, var(--c1), var(--c2));
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 14px 26px -16px rgba(0, 0, 0, 0.9);
  transition: transform 0.2s, box-shadow 0.2s;
}
.jeu-tuile:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    0 22px 34px -16px rgba(0, 0, 0, 0.95);
}
.jeu-tuile::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.jt-ruban {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem 0.18rem 0.25rem;
  border-radius: 6px;
  background: rgba(10, 9, 13, 0.75);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.jt-ruban img {
  width: 0.95rem;
  height: 0.95rem;
}
.jt-art {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 78%;
  translate: -50% 0;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
  transition: transform 0.3s;
}
.jeu-tuile:hover .jt-art {
  transform: scale(1.06) rotate(-2deg);
}
.jt-titre {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  font-family: var(--titre);
  font-weight: 900;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.5);
}
.jt-maison {
  position: relative;
  z-index: 1;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}
.jeu-etat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.2rem;
  font-size: 0.78rem;
  color: var(--doux);
}
.jeu-etat .point {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 6px var(--or);
}
.casino-vide {
  grid-column: 1 / -1;
  padding: 2rem 0;
}

/* L'avertissement à l'entrée du casino. */
.avertissement-casino {
  width: min(600px, 100%);
  overflow-y: auto;
  border-color: rgba(255, 211, 110, 0.55);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 211, 110, 0.1), transparent 70%),
    var(--fond-2);
}
.ac-panneau svg {
  width: 3.2rem;
  height: 3.2rem;
  animation: ac-vacille 2.6s ease-in-out infinite;
}
@keyframes ac-vacille {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
.avertissement-casino h2 {
  margin: 0;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
}
.ac-chapeau {
  margin: 0;
  color: var(--or-clair);
  font-weight: 700;
}
.ac-regles {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.4rem 0;
  padding: 0;
  list-style: none;
}
.ac-regles li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  color: var(--doux);
}
.ac-regles li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--or);
}
.ac-regles strong {
  color: var(--texte);
}
.ac-vrai {
  margin: 0.2rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--trait-fort);
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.82rem;
  color: var(--doux);
}
.avertissement-casino .actions {
  flex-wrap: wrap;
}

/* La fiche d'un jeu. */
.fiche-jeu {
  position: relative;
  width: min(520px, 100%);
  overflow-y: auto;
}
.fj-entete {
  display: grid;
  place-items: center;
  height: 150px;
  margin: -1.8rem -1.8rem 0.6rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(170deg, var(--c1), var(--c2));
}
.fj-entete svg {
  height: 120px;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}
.fiche-jeu h2 {
  margin: 0;
}
.fiche-jeu p {
  margin: 0;
  color: var(--doux);
}
.fj-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.3rem 0;
  padding: 0;
  list-style: none;
}
.fj-infos li {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--trait-fort);
  font-size: 0.78rem;
}
.fj-bientot {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px dashed rgba(227, 184, 98, 0.5);
}
.fj-bientot strong {
  color: var(--or-clair);
}
.fj-bientot code {
  font-family: var(--mono);
  color: var(--texte);
}
.fiche-jeu .fermer-fenetre {
  z-index: 2;
}
@media (max-width: 700px) {
  .casino-tete {
    padding: 1.4rem 1.2rem;
    margin-top: 1.2rem;
  }
  .casino-bourse {
    width: 100%;
  }
  .casino-grille {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 0.7rem;
  }
  .casino-categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .avertissement-casino .actions button {
    width: 100%;
  }
}

/* La boutique du casino : ce n'est pas un jeu, elle a sa propre vitrine sous les jeux. */
.boutique-casino {
  margin-top: 2.4rem;
  padding: 1.6rem;
  border-radius: 22px;
  border: 1px solid rgba(227, 184, 98, 0.4);
  background:
    radial-gradient(ellipse 60% 100% at 0% 0%, rgba(227, 184, 98, 0.16), transparent 70%),
    var(--fond-2);
  scroll-margin-top: 5rem;
}
.bc-tete {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.bc-art {
  flex: none;
  width: 6rem;
  height: 6rem;
  padding: 0.4rem;
  border-radius: 18px;
  background: linear-gradient(170deg, #e3b862, #5c4210);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}
.bc-tete h2 {
  margin: 0.2rem 0 0;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
}
.bc-tete .doux {
  margin: 0.3rem 0 0;
}
.bc-articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-top: 1.3rem;
}
.bc-article {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--trait);
  background: var(--fond);
}
.bc-article .doux {
  flex: 1;
  font-size: 0.85rem;
}
.bc-article .bouton-contour {
  align-self: flex-start;
  margin-top: 0.4rem;
}
@media (max-width: 700px) {
  .boutique-casino {
    padding: 1.2rem;
  }
  .bc-tete {
    align-items: flex-start;
  }
  .bc-art {
    width: 4.2rem;
    height: 4.2rem;
  }
  .bc-articles {
    grid-template-columns: 1fr;
  }
}

/* Le casino : un jeu jouable. */
.jt-ruban.pret {
  background: rgba(16, 64, 40, 0.85);
  color: #b7f5cf;
}
.jeu-etat.pret {
  color: #9be3b6;
}
.jeu-etat.pret .point {
  background: #43d17a;
  box-shadow: 0 0 6px #43d17a;
}
.bc-achat {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.bc-achat input {
  width: 6.5rem;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--trait-fort);
  background: var(--fond-2);
  color: var(--texte);
  font: inherit;
  font-family: var(--mono);
  font-weight: 700;
}
.bc-article .bouton-or {
  align-self: flex-start;
  margin-top: 0.4rem;
}

/* Voltorbataille : le plateau du jeu d'origine, en pixel art agrandi (--k). */
.vb-page {
  padding-top: 1.6rem;
}
.vb-barre {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.vb-barre h1 {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
}
.vb-barre .lien {
  justify-self: start;
}
.vb-barre .pastille-bourse {
  justify-self: end;
}
.vb-jeu {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.6rem;
}
.vb-cadre {
  --k: 2;
  position: relative;
  flex: none;
  width: calc(262px * var(--k));
  height: calc(207px * var(--k));
  border-radius: calc(4px * var(--k));
  overflow: hidden;
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.95);
}
.vb-plateau {
  position: absolute;
  top: 0;
  left: 0;
  width: 262px;
  height: 207px;
  transform: scale(var(--k));
  transform-origin: 0 0;
  image-rendering: pixelated;
}
.vb-plateau img {
  image-rendering: pixelated;
  -webkit-user-drag: none;
  user-select: none;
}
.vb-fond {
  position: absolute;
  inset: 0;
}
.vb-case {
  position: absolute;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
}
.vb-case > img:first-child {
  display: block;
}
.vb-case.jouable {
  cursor: pointer;
}
.vb-case.jouable:hover::after,
.vb-case.jouable:focus-visible::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 28px;
  height: 28px;
  background: url(images/voltorbataille/tuile/hover.png);
  image-rendering: pixelated;
  pointer-events: none;
}
.vb-case:focus-visible {
  outline: 0;
}
.vb-point {
  position: absolute;
}
.vb-case .devoilee {
  opacity: 0.55;
}
.vb-case.explose {
  z-index: 3;
  overflow: visible;
}
.vb-boum {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  pointer-events: none;
}
.vb-chiffre {
  position: absolute;
}
.vb-memo-cadre {
  position: absolute;
  left: 200px;
  top: 12px;
  width: 54px;
  height: 78px;
}
.vb-memo-cadre > img {
  position: absolute;
  inset: 0;
}
.vb-marque {
  position: absolute;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.vb-marque img {
  display: block;
}
.vb-bouton-memo {
  position: absolute;
  left: 200px;
  width: 54px;
  height: 40px;
  padding: 0;
  border: 2px solid #424242;
  border-radius: 3px;
  background: linear-gradient(#29a56b 0 38%, #f8f8f8 38%);
  color: #303030;
  font-family: var(--mono);
  line-height: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  padding-bottom: 4px;
}
.vb-bouton-memo span {
  font-size: 9px;
  font-weight: 800;
}
.vb-bouton-memo small {
  font-size: 6px;
  color: #6a6a6a;
}
.vb-bouton-memo:hover {
  border-color: #e3b862;
}
.vb-plateau.en-memo .vb-case.jouable {
  cursor: copy;
}
/* Les fenêtres du panneau : la mise, la grille finie, la fin (le plateau reste visible). */
.vb-fenetre {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(227, 184, 98, 0.5);
  background: var(--fond);
  text-align: center;
  animation: apparait 0.25s ease-out;
}
.vb-fenetre h2 {
  margin: 0;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
}
.vb-fenetre p {
  margin: 0;
}
.vb-fenetre.perdue {
  border-color: rgba(255, 106, 90, 0.6);
}
.vb-fenetre.perdue h2 {
  color: #ff8a7a;
}
.vb-fenetre.gagnee h2 {
  color: var(--or-clair);
}
.vb-fenetre .actions {
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.vb-mise {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.3rem auto 0;
  padding: 0.45rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--trait-fort);
  background: var(--fond);
}
.vb-mise input {
  width: 7rem;
  border: 0;
  background: none;
  color: var(--texte);
  font: inherit;
  font-family: var(--titre);
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  outline: 0;
}
.vb-puces {
  justify-content: center;
  flex-wrap: wrap;
}
.vb-panneau {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 300px;
  padding: 1.2rem;
  border-radius: 18px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
}
.vb-niveau {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
}
.vb-niveau strong {
  font-family: var(--titre);
  font-size: 2rem;
}
.vb-niveau small {
  font-size: 1rem;
  color: var(--doux);
}
.vb-pips {
  display: flex;
  gap: 4px;
  width: 100%;
}
.vb-pips span {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
}
.vb-pips span.fait {
  background: var(--degrade-or);
}
.vb-chiffres {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
}
.vb-chiffres div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}
.vb-chiffres dt {
  color: var(--doux);
}
.vb-chiffres dd {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
}
.vb-chiffres .fort {
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  background: rgba(227, 184, 98, 0.1);
}
.vb-chiffres .fort dd {
  color: var(--or-clair);
  font-size: 1.05rem;
}
.vb-regles summary {
  cursor: pointer;
  font-weight: 700;
}
.vb-regles p {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--doux);
}
@media (max-width: 1099px) {
  .vb-jeu {
    flex-direction: column;
    align-items: center;
  }
  .vb-panneau {
    width: min(100%, calc(262px * var(--k, 1.4)));
    width: 100%;
    max-width: 700px;
  }
}
@media (max-width: 700px) {
  .vb-page {
    padding-top: 1rem;
  }
  .vb-barre {
    grid-template-columns: auto 1fr auto;
  }
  .vb-barre h1 {
    text-align: center;
    font-size: 1.3rem;
  }
  .vb-fenetre {
    padding: 0.9rem 1rem;
    gap: 0.35rem;
  }
  .vb-fenetre .doux {
    font-size: 0.8rem;
  }
}

/* Les vrais sprites sur les affiches du casino (Voltorbe, Galopa). */
.jt-sprite {
  position: absolute;
  top: 9%;
  left: 50%;
  translate: -50% 0;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
  transition: transform 0.3s;
}
.jt-voltorbataille {
  width: 58%;
  top: 13%;
}
.jt-course {
  width: 60%;
  top: 3%;
}
.jeu-tuile:hover .jt-sprite {
  transform: scale(1.06) rotate(-3deg);
}
.fj-sprite {
  height: 120px;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}
.fj-voltorbataille {
  height: 92px;
}

/* Le comptoir : la liste des boosters et le total. */
.fenetre-comptoir {
  position: relative;
  width: min(560px, 100%);
}
.fenetre-comptoir h2 {
  margin: 0;
}
.comptoir-liste {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 46vh;
  overflow-y: auto;
  margin: 0.4rem 0;
  padding-right: 0.2rem;
}
.comptoir-set {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.8rem 0.5rem 0.5rem;
  border-radius: 12px;
  border: 1px solid var(--trait);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.comptoir-set:hover {
  border-color: var(--trait-fort);
}
.comptoir-set.actif {
  border-color: var(--or);
  background: linear-gradient(90deg, rgba(227, 184, 98, 0.12), var(--fond) 70%);
}
.cs-logo {
  position: relative;
  display: grid;
  place-items: center;
  height: 2.4rem;
  border-radius: 8px;
  background: hsl(var(--h) 60% 22%);
  overflow: hidden;
}
.cs-logo img {
  position: relative;
  z-index: 1;
  max-width: 90%;
  max-height: 80%;
  object-fit: contain;
}
.cs-logo span {
  position: absolute;
  font-family: var(--titre);
  font-size: 0.75rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
}
.cs-logo img + span {
  display: none;
}
.cs-nom {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cs-nom strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-nom .doux {
  font-size: 0.75rem;
}
.cs-prix {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
}
.comptoir-total {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: rgba(227, 184, 98, 0.08);
}
.comptoir-total strong {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  font-size: 1.15rem;
  color: var(--or-clair);
}
.comptoir-total strong.manque {
  color: #ff8a7a;
}

/* La page des crédits. */
.page-credits {
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 1rem;
}
.credits-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.6rem;
}
.credit-bloc {
  padding: 1.3rem 1.4rem;
  border-radius: 18px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
}
.credit-bloc:first-child {
  grid-column: 1 / -1;
  border-color: rgba(227, 184, 98, 0.4);
  background:
    radial-gradient(ellipse 60% 100% at 0% 0%, rgba(227, 184, 98, 0.12), transparent 70%),
    var(--fond-2);
}
.credit-bloc h2 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
}
.credit-bloc p,
.credit-bloc li {
  color: var(--doux);
  font-size: 0.92rem;
  line-height: 1.6;
}
.credit-bloc p {
  margin: 0 0 0.5rem;
}
.credit-bloc p:last-child {
  margin-bottom: 0;
}
.credit-bloc ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.1rem;
}
.credit-bloc strong {
  color: var(--texte);
}
.credit-bloc a {
  color: var(--or-clair);
  text-underline-offset: 3px;
}
@media (max-width: 760px) {
  .credits-grille {
    grid-template-columns: 1fr;
  }
}

.credit-bloc:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* « Aide » est dans le menu « Plus » (et le pied de page) : la barre tient sur téléphone. */
@media (max-width: 760px) {
  .onglets {
    gap: 0.7rem;
  }
}
@media (max-width: 400px) {
  .onglets {
    gap: 0.55rem;
  }
  .onglets button {
    font-size: 0.8rem;
  }
}

/* La machine à sous : une borne, 5 rouleaux de 3 cases, et les lignes gagnantes. */
.ms-page {
  --ms-case: 104px;
  padding-top: 1.6rem;
}
.ms-jeu {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.6rem;
}
.ms-borne {
  flex: none;
  padding: 1rem 1rem 1.1rem;
  border-radius: 28px;
  background:
    linear-gradient(160deg, #3a0e1e, #1a0710 60%),
    #1a0710;
  border: 2px solid rgba(255, 140, 160, 0.35);
  box-shadow:
    inset 0 0 0 6px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(227, 184, 98, 0.35),
    0 40px 70px -30px rgba(0, 0, 0, 0.95);
}
.ms-fronton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0.4rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd36e;
}
.ms-fronton strong {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 211, 110, 0.12);
}
.ms-vitre {
  position: relative;
  padding: 8px;
  border-radius: 18px;
  background: linear-gradient(#0b0a0e, #15131b);
  box-shadow:
    inset 0 0 0 2px rgba(227, 184, 98, 0.45),
    inset 0 18px 30px -18px rgba(0, 0, 0, 0.9);
}
.ms-rouleaux {
  display: grid;
  grid-template-columns: repeat(5, var(--ms-case));
  gap: 6px;
}
.ms-rouleau {
  position: relative;
  height: calc(var(--ms-case) * 3);
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(#f7f3ea, #e9e2d2 50%, #f7f3ea);
  box-shadow: inset 0 10px 14px -8px rgba(0, 0, 0, 0.45), inset 0 -10px 14px -8px rgba(0, 0, 0, 0.45);
}
.ms-bande {
  display: flex;
  flex-direction: column;
}
.ms-case {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--ms-case);
  flex: none;
}
.ms-case img {
  image-rendering: pixelated;
  max-width: 78%;
  max-height: 78%;
  user-select: none;
}
.ms-case .ms-baie,
.ms-case .ms-poke,
.ms-case .ms-super,
.ms-case .ms-hyper,
.ms-case .ms-bonus {
  width: 52%;
}
.ms-case .ms-joker {
  width: 70%;
}
.ms-sept {
  font-family: var(--titre);
  font-size: calc(var(--ms-case) * 0.62);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(#fff3c4, #f2c24a 45%, #a8711c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #6b3d0c) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}
/* Pendant le tirage : la bande défile, floutée. */
.ms-rouleau.tourne .ms-bande {
  animation: ms-tourne 0.28s linear infinite;
  filter: blur(2.5px);
}
@keyframes ms-tourne {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(var(--ms-case) * -9));
  }
}
.ms-rouleau.suspense {
  box-shadow:
    inset 0 0 0 3px #ff5fd2,
    0 0 22px 2px rgba(255, 95, 210, 0.6);
}
/* À l'arrêt : la bande descend sur les 3 derniers symboles, avec un petit rebond. */
.ms-bande.atterrit {
  animation: ms-atterrit 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.25) forwards;
}
@keyframes ms-atterrit {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(var(--ms-case) * -3));
  }
}
.ms-case.gagne {
  animation: ms-gagne 0.9s ease-in-out infinite;
}
.ms-case.gagne::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  background: radial-gradient(circle, rgba(255, 211, 110, 0.55), transparent 70%);
}
.ms-case.gagne.bonus::before {
  background: radial-gradient(circle, rgba(255, 95, 210, 0.6), transparent 70%);
}
@keyframes ms-gagne {
  50% {
    transform: scale(1.08);
  }
}
.ms-lignes {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  pointer-events: none;
}
.ms-lignes polyline {
  fill: none;
  stroke: var(--c);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px var(--c));
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: ms-trait 0.6s ease-out forwards;
}
@keyframes ms-trait {
  to {
    stroke-dashoffset: 0;
  }
}
.ms-annonce {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 60%;
  padding: 1rem 1.6rem;
  border-radius: 18px;
  background: rgba(10, 9, 13, 0.9);
  border: 1px solid rgba(227, 184, 98, 0.6);
  text-align: center;
  animation: apparait 0.25s ease-out;
}
.ms-annonce[hidden] {
  display: none;
}
.ms-annonce strong {
  font-family: var(--titre);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--or-clair);
}
.ms-annonce.bonus {
  border-color: #ff5fd2;
  box-shadow: 0 0 40px rgba(255, 95, 210, 0.45);
}
.ms-annonce.bonus strong {
  color: #ffb3ec;
}
.ms-annonce.gros strong {
  font-size: clamp(1.8rem, 6vw, 3rem);
}
.ms-annonce.compteur {
  top: 0.6rem;
  translate: -50% 0;
  min-width: 0;
  padding: 0.3rem 0.9rem;
}
.ms-ecran {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.ms-ecran > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.8rem;
  border-radius: 12px;
  background: #0b0a0e;
  box-shadow: inset 0 0 0 1px rgba(255, 211, 110, 0.25);
}
.ms-ecran strong {
  font-size: 1.25rem;
  color: #ffd36e;
  text-shadow: 0 0 10px rgba(255, 211, 110, 0.45);
}
.ms-lignes.apercu polyline {
  stroke-width: 3;
  opacity: 0.75;
  animation: none;
  stroke-dasharray: none;
}
.ms-choix-lignes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.ms-choix-lignes strong {
  min-width: 2.2rem;
  text-align: center;
  font-size: 1.3rem;
}
.ms-choix-lignes [data-ms-lignes="max"] {
  margin-left: auto;
}
.ms-motif.eteinte {
  opacity: 0.3;
}
.ms-panneau .ms-mises {
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.ms-lancer {
  width: 100%;
  padding-block: 1rem;
  font-size: 1.15rem;
}
.ms-auto {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  font-weight: 700;
}
.ms-auto input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ms-interrupteur {
  position: relative;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s;
}
.ms-interrupteur::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(1.5rem - 6px);
  height: calc(1.5rem - 6px);
  border-radius: 50%;
  background: #fff;
  transition: translate 0.2s;
}
.ms-auto input:checked + .ms-interrupteur {
  background: var(--or);
}
.ms-auto input:checked + .ms-interrupteur::after {
  translate: 1.1rem 0;
}
.ms-auto input:focus-visible + .ms-interrupteur {
  outline: 2px solid var(--or-clair);
  outline-offset: 2px;
}
.ms-gagnantes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}
.ms-gagnantes li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ms-gagnantes strong {
  margin-left: auto;
  color: var(--or-clair);
}
.ms-pastille {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--c);
  color: #111;
  font-size: 0.7rem;
  font-weight: 800;
}
/* La table des gains. */
.ms-table {
  position: relative;
  width: min(640px, 100%);
  overflow-y: auto;
}
.ms-table h2 {
  margin: 0;
}
.ms-table h3 {
  margin: 0.6rem 0 0;
  font-size: 1rem;
}
.ms-table-lignes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ms-table-ligne {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) repeat(3, 4.2rem);
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: 10px;
  background: var(--fond);
}
.ms-table-ligne span:not(.ms-table-symbole) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ms-table-ligne small {
  color: var(--doux);
  font-size: 0.68rem;
}
.ms-table-symbole {
  --ms-case: 2.6rem;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 8px;
  background: #f3eee2;
}
.ms-table-symbole img {
  image-rendering: pixelated;
  max-width: 80%;
  max-height: 80%;
}
.ms-table-speciaux {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ms-table-speciaux > div {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.ms-table-speciaux p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--doux);
}
.ms-table-motifs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}
.ms-motif {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--doux);
}
.ms-motif svg {
  width: 100%;
}
.ms-motif rect {
  fill: rgba(255, 255, 255, 0.08);
}
.ms-motif rect.pris {
  fill: var(--c);
}
@media (max-width: 1099px) {
  .ms-jeu {
    flex-direction: column;
    align-items: center;
  }
  .ms-panneau {
    width: 100%;
    max-width: 700px;
  }
}
@media (max-width: 700px) {
  .ms-page {
    --ms-case: calc((100vw - 32px - 2rem - 16px - 24px) / 5);
  }
  .ms-borne {
    padding: 0.7rem 0.7rem 0.8rem;
    border-radius: 20px;
  }
  .ms-rouleaux {
    gap: 4px;
  }
  .ms-vitre {
    padding: 6px;
  }
  .ms-ecran strong {
    font-size: 1rem;
  }
  .ms-table-ligne {
    grid-template-columns: 2.6rem minmax(0, 1fr) repeat(3, 3.2rem);
  }
  .ms-table-motifs {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Plus ou Moins ------------------------------------------------------------------------ */

.pom-table {
  flex: 1;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem 1.4rem 1.2rem;
  border-radius: 22px;
  border: 1px solid rgba(91, 140, 255, 0.35);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(91, 140, 255, 0.22), transparent 60%),
    linear-gradient(160deg, #141a3d, #0c0f24);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.95), inset 0 0 0 6px rgba(0, 0, 0, 0.25);
}
.pom-cartes {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.2rem;
}
.pom-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.pom-boite {
  position: relative;
  width: min(100%, 220px);
  aspect-ratio: 63 / 88;
}
.pom-suivante .carte-3d:not(.retournee) .dos {
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.9);
}
.pom-legende {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-height: 4.2rem;
  text-align: center;
}
.pom-nom {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
}
.pom-valeur {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--or-clair);
}
.pom-paris {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 170px;
}
.pom-paris > p {
  margin: 0;
  text-align: center;
}
.pom-pari {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "fleche nom fois" "fleche detail detail";
  align-items: center;
  gap: 0.1rem 0.55rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.pom-pari.plus {
  --c: #3ddc97;
}
.pom-pari.moins {
  --c: #ff6b7d;
}
.pom-pari:hover:not(:disabled) {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--c) 26%, transparent);
}
.pom-pari:disabled {
  opacity: 0.4;
  cursor: default;
}
.pom-fleche {
  grid-area: fleche;
  font-size: 1.4rem;
  color: var(--c);
}
.pom-pari strong {
  grid-area: nom;
  font-size: 1.05rem;
}
.pom-fois {
  grid-area: fois;
  font-weight: 800;
  color: var(--c);
}
.pom-pari small {
  grid-area: detail;
  color: var(--doux);
  font-size: 0.75rem;
}
.pom-verdict {
  position: absolute;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 210px;
  padding: 0.9rem 1.4rem;
  border-radius: 16px;
  background: rgba(10, 9, 13, 0.92);
  border: 1px solid var(--c, var(--trait-fort));
  text-align: center;
  animation: apparait 0.2s ease-out;
}
.pom-verdict[hidden] {
  display: none;
}
.pom-verdict strong {
  font-family: var(--titre);
  font-size: 1.5rem;
  color: var(--c, var(--texte));
}
.pom-verdict.gagne {
  --c: #3ddc97;
}
.pom-verdict.perdu {
  --c: #ff6b7d;
  animation: apparait 0.2s ease-out, pom-secousse 0.4s 0.1s;
}
.pom-verdict.egalite {
  --c: #9fb4ff;
}
@keyframes pom-secousse {
  25% {
    transform: translateX(-8px);
  }
  50% {
    transform: translateX(7px);
  }
  75% {
    transform: translateX(-4px);
  }
}
.pom-parcours {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pom-parcours-cartes {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.pom-parcours-cartes img {
  flex: none;
  width: 44px;
  aspect-ratio: 63 / 88;
  border-radius: 4px;
  object-fit: cover;
}
.pom-lien {
  flex: none;
  font-size: 0.8rem;
  color: var(--doux);
}
.pom-lien.gagne {
  color: #3ddc97;
}
.pom-lien.perdu {
  color: #ff6b7d;
}
@media (max-width: 1099px) {
  .pom-table {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .pom-table {
    padding: 1rem 0.8rem 0.9rem;
  }
  .pom-cartes {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }
  .pom-paris {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    width: 100%;
  }
  .pom-pari {
    flex: 1;
    padding: 0.65rem 0.7rem;
  }
  .pom-legende {
    min-height: 3.6rem;
    font-size: 0.85rem;
  }
  .pom-verdict {
    top: 30%;
  }
}
.pom-suivante.perdu .carte-3d .devant {
  box-shadow: 0 0 0 3px #ff6b7d, 0 25px 50px -10px rgba(0, 0, 0, 0.9);
}
.pom-suivante.gagne .carte-3d .devant {
  box-shadow: 0 0 0 3px #3ddc97, 0 25px 50px -10px rgba(0, 0, 0, 0.9);
}
.pom-resultat {
  margin: 0;
  font-weight: 700;
  text-align: center;
}
.pom-resultat.perdu {
  color: #ff6b7d;
}
.pom-resultat.gagne {
  color: #3ddc97;
}

/* Carnet du dresseur ------------------------------------------------------------------- */

.cn {
  --cn-papier: #f6efdf;
  --cn-encre: #2b2620;
  --cn-rouge: #d8343f;
  --cn-ligne: rgba(70, 110, 170, 0.28);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 1.6rem 0 2rem;
}
.cn-titre h1 {
  margin: 0.2rem 0 0.4rem;
  font-size: clamp(2rem, 6vw, 3.2rem);
}
.cn-titre p {
  margin: 0;
  max-width: 640px;
}

/* La carte de fidélité : un vrai bout de carton. */
.cn-fidelite {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--cn-papier);
  color: var(--cn-encre);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9);
}
.cn-fidelite::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 80% 0%, rgba(255, 255, 255, 0.35), transparent 55%);
}
.cn-fidelite.secoue {
  animation: cn-secousse 0.35s ease-out;
}
@keyframes cn-secousse {
  30% {
    transform: translateY(3px) scale(0.995);
  }
  60% {
    transform: translateY(-1px);
  }
}
.cn-fidelite-tete {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.3rem;
  background: var(--cn-rouge);
  color: #fff;
}
.cn-fidelite-tete div {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.cn-fidelite-tete strong {
  font-family: var(--titre);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}
.cn-fidelite-tete span {
  font-size: 0.8rem;
  opacity: 0.9;
}
.cn-croix {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: #fff;
}
.cn-croix::before,
.cn-croix::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  background: var(--cn-rouge);
  border-radius: 2px;
}
.cn-croix::before {
  width: 20px;
  height: 7px;
}
.cn-croix::after {
  width: 7px;
  height: 20px;
}
.cn-numero {
  margin-left: auto;
  font-size: 0.8rem;
  opacity: 0.85;
}
.cn-cases {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.6rem;
  padding: 1.3rem 1.3rem 0.6rem;
}
.cn-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.cn-jour {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: rgba(43, 38, 32, 0.55);
}
.cn-rond {
  display: grid;
  place-items: center;
  width: min(84px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(43, 38, 32, 0.28);
}
.cn-case.derniere .cn-rond {
  border-color: rgba(201, 145, 40, 0.8);
  background: radial-gradient(circle, rgba(244, 196, 84, 0.25), transparent 70%);
}
.cn-gain {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
}
.cn-case.derniere .cn-gain {
  color: #a8731a;
}
.cn-sceau {
  width: 92%;
  color: var(--cn-rouge);
  rotate: var(--r);
  opacity: 0.88;
  mix-blend-mode: multiply;
}
.cn-sceau.tombe {
  animation: cn-tombe 0.32s cubic-bezier(0.5, 0, 0.75, 0) both;
}
@keyframes cn-tombe {
  from {
    transform: scale(2.4);
    opacity: 0;
  }
  70% {
    opacity: 0.95;
  }
  to {
    transform: scale(1);
  }
}
.cn-fidelite-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  padding: 0.6rem 1.3rem 1.2rem;
}
.cn-fidelite-pied .doux {
  color: rgba(43, 38, 32, 0.6);
}
.cn-revenir {
  font-weight: 700;
  color: #2f7d4f;
}

/* Les pages du carnet : du papier ligné, une marge rouge. */
.cn-pages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.cn-page {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.2rem 1rem 2.6rem;
  border-radius: 6px 16px 16px 6px;
  background:
    linear-gradient(90deg, transparent 1.9rem, rgba(216, 52, 63, 0.45) 1.9rem, rgba(216, 52, 63, 0.45) calc(1.9rem + 2px), transparent calc(1.9rem + 2px)),
    var(--cn-papier);
  color: var(--cn-encre);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9);
}
.cn-page::before {
  /* les trous de la reliure */
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 12px;
  background: radial-gradient(circle, #15131a 5px, transparent 6px) 0 0 / 12px 42px repeat-y;
}
.cn-page-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--cn-ligne);
}
.cn-page-tete h2 {
  margin: 0;
  font-size: 1.35rem;
}
.cn-renouvelle {
  font-size: 0.75rem;
  color: rgba(43, 38, 32, 0.55);
}
.cn-missions {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cn-mission {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 64px;
  border-bottom: 1px solid var(--cn-ligne);
}
.cn-coche {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(43, 38, 32, 0.5);
  border-radius: 4px;
}
.cn-mission.reussie .cn-coche,
.cn-mission.validee .cn-coche {
  border-color: #2f7d4f;
  background: #2f7d4f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.cn-mission-texte {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 600;
}
.cn-mission.validee .cn-mission-texte > span:first-child {
  text-decoration: line-through;
  text-decoration-color: rgba(43, 38, 32, 0.4);
  color: rgba(43, 38, 32, 0.6);
}
.cn-progres {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(43, 38, 32, 0.12);
  overflow: hidden;
}
.cn-progres span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e2a336, #d8343f);
}
.cn-compte {
  font-size: 0.8rem;
  color: rgba(43, 38, 32, 0.6);
}
.cn-recompense {
  opacity: 0.75;
}
.cn-recompense .montant,
.cn-bouton-tampon .montant {
  color: var(--cn-encre);
}
.cn-bouton-tampon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.4rem 0.8rem;
  border: 2px solid var(--cn-rouge);
  border-radius: 10px;
  background: rgba(216, 52, 63, 0.08);
  color: var(--cn-rouge);
  font: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  animation: cn-appel 1.6s ease-in-out infinite;
}
.cn-bouton-tampon small {
  font-size: 0.75rem;
}
.cn-bouton-tampon:hover {
  background: rgba(216, 52, 63, 0.16);
}
@keyframes cn-appel {
  50% {
    box-shadow: 0 0 0 5px rgba(216, 52, 63, 0.14);
  }
}
.cn-valide {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 52px;
  color: var(--cn-rouge);
  rotate: -9deg;
}
.cn-valide .cn-sceau {
  position: absolute;
  width: 52px;
  opacity: 0.35;
}
.cn-valide b {
  position: relative;
  padding: 0.05rem 0.4rem;
  border: 2px solid currentColor;
  border-radius: 4px;
  font-family: var(--titre);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  mix-blend-mode: multiply;
}
.cn-coup {
  animation: cn-secousse 0.35s ease-out;
}
.cn-page-pied {
  margin-top: auto;
  padding-top: 0.9rem;
}
.cn-page-pied .doux {
  color: rgba(43, 38, 32, 0.65);
}
.cn-page-finie {
  font-weight: 700;
  color: #2f7d4f;
}

/* L'album d'autocollants. */
.cn-album {
  padding: 1.3rem;
  border-radius: 18px;
  border: 1px solid var(--trait);
  background: var(--fond-2);
}
.cn-album-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.cn-album-tete h2 {
  margin: 0;
}
.cn-album > p {
  margin: 0.3rem 0 1rem;
}
.cn-autocollants {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.cn-autocollant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0.7rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}
.cn-autocollant .cn-progres {
  width: 80%;
  background: rgba(255, 255, 255, 0.08);
}
.cn-sticker {
  --bord: #fff;
  display: grid;
  place-items: center;
  width: 92px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e9e4f2);
  box-shadow: 0 0 0 5px var(--bord), 0 10px 22px -8px rgba(0, 0, 0, 0.8);
}
.cn-sticker img {
  width: 66%;
  image-rendering: pixelated;
}
.cn-autocollant.vide .cn-sticker {
  background: transparent;
  box-shadow: none;
  border: 2px dashed var(--trait-fort);
}
.cn-autocollant.vide .cn-sticker img {
  filter: brightness(0) invert(1);
  opacity: 0.12;
}
.cn-autocollant.bronze .cn-sticker {
  --bord: #c98552;
}
.cn-autocollant.argent .cn-sticker {
  --bord: #c9d2de;
}
.cn-autocollant.or .cn-sticker {
  --bord: #f1c34f;
  box-shadow: 0 0 0 5px var(--bord), 0 0 24px rgba(241, 195, 79, 0.45), 0 10px 22px -8px rgba(0, 0, 0, 0.8);
}
.cn-autocollant.vient-d-etre-colle .cn-sticker {
  animation: cn-colle 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}
@keyframes cn-colle {
  from {
    transform: scale(1.5) rotate(-14deg);
    opacity: 0;
  }
}
.cn-pips {
  display: flex;
  gap: 5px;
}
.cn-pips span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
}
.cn-pips .bronze.pris {
  background: #c98552;
  border-color: #c98552;
}
.cn-pips .argent.pris {
  background: #c9d2de;
  border-color: #c9d2de;
}
.cn-pips .or.pris {
  background: #f1c34f;
  border-color: #f1c34f;
}
.cn-pips .pret {
  border-color: var(--or-clair);
  animation: cn-appel 1.6s ease-in-out infinite;
}
.cn-autocollant .cn-bouton-tampon {
  margin-top: 0.2rem;
  border-color: var(--or);
  background: rgba(227, 184, 98, 0.1);
  color: var(--or-clair);
}
.cn-autocollant .cn-bouton-tampon .montant {
  color: var(--or-clair);
}

@media (max-width: 900px) {
  .cn-pages {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .cn {
    padding-top: 1rem;
  }
  .cn-cases {
    gap: 0.25rem;
    padding: 1rem 0.7rem 0.4rem;
  }
  .cn-rond {
    border-width: 1.5px;
  }
  .cn-gain {
    font-size: 0.66rem;
  }
  .cn-fidelite-tete {
    padding: 0.75rem 1rem;
  }
  .cn-fidelite-pied {
    padding: 0.5rem 1rem 1rem;
  }
  .cn-fidelite-pied .bouton-or {
    width: 100%;
  }
  .cn-page {
    padding: 1rem 0.9rem 0.9rem 2.2rem;
  }
  .cn-page::before {
    left: 0.4rem;
  }
  .cn-page {
    background:
      linear-gradient(90deg, transparent 1.6rem, rgba(216, 52, 63, 0.45) 1.6rem, rgba(216, 52, 63, 0.45) calc(1.6rem + 2px), transparent calc(1.6rem + 2px)),
        var(--cn-papier);
  }
  .cn-mission {
    grid-template-columns: auto 1fr auto;
    gap: 0.4rem 0.6rem;
    padding: 0.6rem 0;
  }
  .cn-mission > :last-child {
    grid-column: 2 / -1;
    justify-self: end;
  }
  .cn-autocollants {
    grid-template-columns: repeat(2, 1fr);
  }
  .cn-sticker {
    width: 76px;
  }
}
.menu-plus > button .point-notif {
  align-self: flex-start;
  margin: 0.15rem 0 0 0.15rem;
}