/* ============================================================
   KinouChat, feuille de style unique
   Direction artistique : cartoon sticker.
   Contours nets, ombres portées dures et décalées, couleurs franches,
   coins généreux. Chaque bloc se lit comme un autocollant posé sur la page.
   ============================================================ */

:root {
  --paper: #fff4e2;
  --paper-2: #ffe9c9;
  --card: #ffffff;
  --card-2: #fff9f0;
  --line: #191325;
  --shadow-c: #191325;
  --text: #191325;
  --muted: #6f6880;

  --brand: #7c5cff;
  --brand-ink: #ffffff;
  --brand-soft: #ece6ff;
  --rose: #ff5fa2;
  --sun: #ffc93c;
  --mint: #22c98a;
  --sky: #45c4f0;
  --rouge: #ff5a5f;

  --up: #16a765;
  --up-soft: #d6f6e7;
  --down: #e8383d;
  --down-soft: #ffe0e1;
  --kinou: #7c5cff;
  --kinou-soft: #ece6ff;
  --gold: #f0a800;

  --bw: 2.5px;
  --radius: 20px;
  --radius-sm: 13px;
  --shadow: 4px 4px 0 var(--shadow-c);
  --shadow-sm: 3px 3px 0 var(--shadow-c);
  --shadow-lg: 7px 7px 0 var(--shadow-c);

  --nav-w: 250px;
  --main-w: 620px;
  --side-w: 330px;
}

[data-theme='dark'] {
  --paper: #15121f;
  --paper-2: #1d1930;
  --card: #272138;
  --card-2: #2f2843;
  --line: #0a0812;
  --shadow-c: #0a0812;
  --text: #f6efe4;
  --muted: #a49bbd;

  --brand: #9b82ff;
  --brand-soft: #362c58;
  --up: #2ee08a;
  --up-soft: #143d2c;
  --down: #ff6b70;
  --down-soft: #48181d;
  --kinou: #9b82ff;
  --kinou-soft: #362c58;
  --gold: #ffc93c;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: ui-rounded, 'SF Pro Rounded', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system,
    'Segoe UI Emoji', Roboto, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 500;
  overflow-y: scroll;
  /* Petits pois discrets : la page n'est jamais un aplat mort. */
  background-image: radial-gradient(color-mix(in srgb, var(--line) 7%, transparent) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

b,
strong {
  font-weight: 800;
}

::selection {
  background: var(--sun);
  color: #191325;
}

/* ------------------------------------------------------------ icônes */

.icon {
  flex: none;
  display: block;
  vertical-align: middle;
}

.btn.with-icon,
.action,
.tab,
.nav-link,
.card-row > .icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn.with-icon {
  justify-content: center;
}
.btn.icon-only {
  padding: 9px 11px;
  display: inline-flex;
  align-items: center;
}
.card-row > .icon {
  color: var(--muted);
}

/* ------------------------------------------------------------ écran de boot */

.boot {
  height: 100dvh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 12px;
}
.boot-logo {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--brand);
  -webkit-text-stroke: 1.5px var(--line);
}
.boot-sub {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

/* ------------------------------------------------------------ structure */

.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, var(--main-w)) var(--side-w);
  justify-content: center;
  gap: 22px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
  /* `clip` et pas `hidden` : on coupe le debordement sans creer de conteneur
     de defilement, sinon les entetes collantes cessent de coller. */
  overflow-x: clip;
}

.nav {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 14px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.7px;
  padding: 4px 6px 12px;
}
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  flex: none;
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow-sm);
  transform: rotate(-4deg);
}

.nav-link {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  border: var(--bw) solid transparent;
  transition: transform 0.08s, background 0.12s, border-color 0.12s;
}
@media (hover: hover) {
  .nav-link:hover {
    background: var(--card);
    border-color: var(--line);
    transform: translate(-1px, -1px);
  }
}
.nav-link.active {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.nav-icon {
  width: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-badge {
  position: absolute;
  top: 2px;
  left: 26px;
  background: var(--rose);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  line-height: 1;
  border: 2px solid var(--line);
}

.nav-cta {
  margin: 14px 0 0;
  background: var(--sun);
  color: #191325;
  font-weight: 900;
  font-size: 17px;
  padding: 14px;
  border-radius: 999px;
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.08s, box-shadow 0.08s;
}
@media (hover: hover) {
  .nav-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-lg);
  }
}
.nav-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow-c);
}
.nav-cta .cta-icon {
  display: none;
}

.nav-spacer {
  flex: 1;
}

.nav-me {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: var(--bw) solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s;
}
@media (hover: hover) {
  .nav-me:hover {
    transform: translate(-1px, -1px);
  }
}
.nav-me-text {
  min-width: 0;
  flex: 1;
}
.nav-me-name {
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-me-handle {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.main {
  min-height: 100dvh;
  min-width: 0;
  padding: 14px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-x: clip;
}

.side {
  padding: 14px 0 40px;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ------------------------------------------------------------ blocs autocollants */

.topbar {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.topbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-height: 56px;
}
.topbar-title {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.4px;
}
.topbar-sub {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.back-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--text);
  flex: none;
  border: var(--bw) solid var(--line);
  background: var(--card-2);
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s;
}
@media (hover: hover) {
  .back-btn:hover {
    transform: translate(-1px, -1px);
    background: var(--sun);
  }
}

.tabs {
  display: flex;
  border-top: var(--bw) solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--card-2);
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  flex: 1;
  min-width: max-content;
  padding: 12px 16px;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  position: relative;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
@media (hover: hover) {
  .tab:hover {
    background: var(--brand-soft);
    color: var(--text);
  }
}
.tab.active {
  color: var(--text);
  background: var(--sun);
  font-weight: 900;
}
.tab.active .icon {
  color: var(--text);
}

/* ------------------------------------------------------------ avatars */

.avatar {
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  user-select: none;
  line-height: 1;
  overflow: hidden;
  border: var(--bw) solid var(--line);
  background-size: cover;
  background-position: center;
}
.avatar.sm {
  width: 36px;
  height: 36px;
  font-size: 17px;
}
.avatar.md {
  width: 46px;
  height: 46px;
  font-size: 22px;
}
.avatar.lg {
  width: 104px;
  height: 104px;
  font-size: 48px;
  border-width: 4px;
  box-shadow: var(--shadow);
}
/* Avatar par défaut : initiales blanches sur la couleur du compte. */
.avatar.initials {
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.avatar.sm.initials {
  font-size: 13px;
}
.avatar.md.initials {
  font-size: 16px;
}
.avatar.lg.initials {
  font-size: 34px;
}
.avatar.bot {
  box-shadow: 0 0 0 3px var(--kinou);
}
.avatar.lg.bot {
  box-shadow: var(--shadow), 0 0 0 5px var(--kinou);
}

/* ------------------------------------------------------------ boutons */

.btn {
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 999px;
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}
@media (hover: hover) {
  .btn:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow);
  }
}
.btn:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow-c);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn.ghost {
  background: var(--card);
  color: var(--text);
}
@media (hover: hover) {
  .btn.ghost:hover:not(:disabled) {
    background: var(--sun);
  }
}
.btn.danger {
  background: var(--rouge);
  color: #fff;
}
.btn.sm {
  padding: 6px 14px;
  font-size: 13.5px;
}
.btn.block {
  width: 100%;
  padding: 13px;
}
.btn.kinou {
  background: var(--kinou);
  color: #fff;
}
.btn.sun {
  background: var(--sun);
  color: #191325;
}

/* ------------------------------------------------------------ posts */

.post {
  display: flex;
  gap: 13px;
  padding: 15px;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.09s, box-shadow 0.09s;
  position: relative;
}
@media (hover: hover) {
  .post:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-lg);
  }
}
.post.detail {
  cursor: default;
}
@media (hover: hover) {
  .post.detail:hover {
    transform: none;
    box-shadow: var(--shadow);
  }
}
.post.ai {
  background: var(--kinou-soft);
}
.post.ai::before {
  content: 'KINOU';
  position: absolute;
  top: -11px;
  right: 16px;
  background: var(--kinou);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 2px solid var(--line);
}
.post.focused {
  background: var(--sun);
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.post-main {
  flex: 1;
  min-width: 0;
}
.post-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14.5px;
}
.post-name {
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
@media (hover: hover) {
  .post-name:hover {
    text-decoration: underline wavy var(--brand);
    text-underline-offset: 3px;
  }
}
.post-handle,
.post-time {
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
}
.post-menu {
  margin-left: auto;
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  border: 2px solid transparent;
}
@media (hover: hover) {
  .post-menu:hover {
    background: var(--card-2);
    border-color: var(--line);
    color: var(--text);
  }
}

.post-text {
  font-size: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 4px;
  font-weight: 500;
}
.post.detail .post-text {
  font-size: 20px;
  line-height: 1.4;
  margin-top: 10px;
  font-weight: 600;
}
.post-text a.tag,
.post-text a.mention {
  color: var(--brand);
  font-weight: 800;
}
.post-text a.tag:hover,
@media (hover: hover) {
  .post-text a.mention:hover {
    background: var(--sun);
    color: #191325;
    border-radius: 5px;
  }
}
.post-text .mention.kinou-mention {
  color: var(--kinou);
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.vote {
  display: inline-flex;
  align-items: center;
  background: var(--card-2);
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--line);
}
.vote-btn {
  padding: 4px 9px;
  line-height: 0;
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: background 0.1s, color 0.1s;
}
@media (hover: hover) {
  .vote-btn:hover {
    color: var(--up);
    background: var(--up-soft);
  }
}
@media (hover: hover) {
  .vote-btn.down:hover {
    color: var(--down);
    background: var(--down-soft);
  }
}
.vote-btn.on {
  color: #fff;
  background: var(--up);
}
.vote-btn.down.on {
  color: #fff;
  background: var(--down);
}
.vote-score {
  font-size: 13.5px;
  font-weight: 900;
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  padding: 0 2px;
}
.vote-score.pos {
  color: var(--up);
}
.vote-score.neg {
  color: var(--down);
}

.action {
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
@media (hover: hover) {
  .action:hover {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: var(--line);
  }
}
@media (hover: hover) {
  .action.kinou:hover {
    background: var(--kinou);
    color: #fff;
  }
}
@media (hover: hover) {
  .action.danger:hover {
    background: var(--down-soft);
    color: var(--down);
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 900;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--muted);
  white-space: nowrap;
  border: 2px solid var(--line);
}
.pill.bot {
  background: var(--kinou);
  color: #fff;
}
.pill.admin {
  background: var(--sun);
  color: #191325;
}

.reply-context {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}
.reply-context a {
  color: var(--brand);
  font-weight: 800;
}

/* Décalage volontairement discret : la profondeur est plafonnée côté JS, et
   au-delà les réponses s'affichent à plat avec la mention « en réponse à ». */
.comment-indent {
  margin-left: 14px;
  padding-left: 12px;
  border-left: var(--bw) dashed color-mix(in srgb, var(--line) 35%, transparent);
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 13px;
}

/* ------------------------------------------------------------ « Kinou écrit… » */

.kinou-typing {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--kinou-soft);
  border: var(--bw) dashed var(--kinou);
  border-radius: var(--radius);
  font-size: 14.5px;
  color: var(--kinou);
  font-weight: 800;
}
.kinou-typing .avatar {
  color: #fff;
}
.dots span {
  display: inline-block;
  animation: blink 1.2s infinite;
}
.dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes blink {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  30% {
    opacity: 1;
  }
}

/* ------------------------------------------------------------ composer */

.composer {
  display: flex;
  gap: 12px;
  padding: 15px;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.composer.bare {
  border: none;
  box-shadow: none;
  padding: 0;
  background: none;
}
.composer-body {
  flex: 1;
  min-width: 0;
}
.composer textarea {
  width: 100%;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  resize: none;
  background: var(--card-2);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  padding: 12px 14px;
  min-height: 58px;
  max-height: 280px;
  overflow-y: auto;
}
.composer textarea:focus {
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.composer textarea::placeholder {
  color: var(--muted);
  font-weight: 600;
}
.composer-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 11px;
}
.composer-hint {
  margin-right: auto;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.counter {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.counter.warn {
  color: var(--gold);
}
.counter.over {
  color: var(--down);
}

/* ------------------------------------------------------------ pièces jointes */

.pieces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 11px;
}
.pieces.seule {
  grid-template-columns: 1fr;
}
.piece {
  display: block;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card-2);
  line-height: 0;
}
.piece.large {
  grid-column: 1 / -1;
}
.piece-image {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}
.pieces.seule .piece-image {
  object-fit: contain;
  background: var(--card-2);
}
.piece-video {
  width: 100%;
  max-height: 420px;
  display: block;
  background: #000;
}
.piece-audio {
  width: 100%;
  padding: 10px;
}
.piece-fichier {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  line-height: 1.3;
}
@media (hover: hover) {
  .piece-fichier:hover {
    background: var(--brand-soft);
  }
}
.piece-nom {
  font-weight: 800;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.piece-poids {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

/* Aperçus dans le compositeur, avant publication */
.jointes:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}
.jointe {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  max-width: 100%;
}
.jointe-vignette {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex: none;
  border: 2px solid var(--line);
}
.jointe-vignette.fichier {
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
}
.jointe-nom {
  font-size: 12.5px;
  font-weight: 700;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jointe-retirer {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rouge);
  color: #fff;
  border: 2px solid var(--line);
  flex: none;
}

/* ------------------------------------------------------------ cartes latérales */

.card {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.card-title {
  font-size: 18px;
  font-weight: 900;
  padding: 13px 16px 6px;
  letter-spacing: -0.3px;
}
.card-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px;
  transition: background 0.1s;
}
a.card-row:hover,
@media (hover: hover) {
  .card-row.clickable:hover {
    background: var(--brand-soft);
    cursor: pointer;
  }
}
.card-row-main {
  flex: 1;
  min-width: 0;
}
.card-row-title {
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-row-sub {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-more {
  display: block;
  width: 100%;
  padding: 12px 16px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 800;
  border-top: 2px dashed color-mix(in srgb, var(--line) 30%, transparent);
}
@media (hover: hover) {
  .card-more:hover {
    background: var(--sun);
    color: #191325;
  }
}
.card-body {
  padding: 6px 16px 16px;
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 600;
}

.search-box {
  position: sticky;
  top: 0;
  padding: 0 0 14px;
  z-index: 5;
}
.search-wrap {
  position: relative;
}
.search-input {
  width: 100%;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  padding: 12px 16px 12px 44px;
  outline: none;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.search-input:focus {
  box-shadow: var(--shadow);
}
.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  display: flex;
}

.kinou-status {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mint);
  flex: none;
  border: 2px solid var(--line);
}
.dot.local {
  background: var(--sun);
}

/* ------------------------------------------------------------ profil */

.profile-card {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.profile-banner {
  height: 155px;
  background: var(--brand);
  background-size: cover;
  background-position: center;
  border-bottom: var(--bw) solid var(--line);
}
.profile-head {
  padding: 0 18px 18px;
}
.profile-avatar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: -54px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.profile-name {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-handle {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}
.profile-bio {
  margin-top: 10px;
  font-size: 15.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-weight: 500;
}
.profile-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 13px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.profile-meta b {
  color: var(--text);
}
@media (hover: hover) {
  .profile-meta a:hover {
    text-decoration: underline;
  }
}

/* Ce que Kinou pense de la personne */
.kinou-verdict {
  margin-top: 15px;
  /* Hors de la carte de profil (onglet Stats), il se suffit a lui-meme. */
  background: var(--kinou-soft);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  box-shadow: var(--shadow-sm);
}
.profil-stats > .kinou-verdict {
  margin-top: 0;
}
.kinou-verdict-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 6px;
}
.kinou-verdict-label {
  font-size: 12px;
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 999px;
  border: 2px solid var(--line);
  color: #fff;
  margin-left: auto;
}
.kinou-verdict-note {
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
}
.kinou-gauge {
  margin-top: 10px;
  height: 12px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  overflow: hidden;
  position: relative;
}
.kinou-gauge-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: width 0.5s ease, left 0.5s ease;
}
.kinou-gauge-zero {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 2px;
  background: var(--line);
  opacity: 0.5;
}

/* ------------------------------------------------------------ courbe de réputation */

.courbe-bloc {
  margin-top: 14px;
}
.courbe-cadre {
  position: relative;
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 8px;
  touch-action: pan-y;
}
.courbe {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* Repères en retrait : la donnée passe devant. */
.courbe-grille {
  stroke: var(--line);
  stroke-width: 1;
  opacity: 0.16;
}
.courbe-zero {
  stroke: var(--line);
  stroke-width: 1.5;
  opacity: 0.45;
  stroke-dasharray: 5 4;
}
.courbe-axe {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.courbe-aire.haut {
  fill: var(--up);
  opacity: 0.18;
}
.courbe-aire.bas {
  fill: var(--down);
  opacity: 0.18;
}
.courbe-ligne {
  fill: none;
  stroke: var(--line);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.courbe-point {
  stroke: var(--line);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.courbe-point.positif {
  fill: var(--up);
}
.courbe-point.negatif {
  fill: var(--down);
}
.courbe-point.neutre {
  fill: var(--muted);
}
.courbe-viseur {
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: 0.5;
  pointer-events: none;
}
.courbe-halo {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.5;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.courbe-surface {
  cursor: crosshair;
}
.courbe-bulle {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 8px 11px;
  font-size: 12.5px;
  pointer-events: none;
  max-width: 230px;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
}
.courbe-bulle.visible {
  opacity: 1;
  visibility: visible;
}
.courbe-bulle-tete {
  font-size: 15px;
  font-weight: 900;
}
.courbe-bulle-tete span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.courbe-bulle-date {
  color: var(--muted);
  font-weight: 700;
  font-size: 11.5px;
}
.courbe-bulle-label {
  margin-top: 5px;
  font-weight: 800;
}
.courbe-bulle-note {
  margin-top: 3px;
  font-style: italic;
  font-weight: 600;
  color: var(--muted);
}

/* Version lisible sans survol : les derniers mouvements en clair. */
.courbe-liste {
  margin-top: 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.courbe-ligne-liste {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
}
.courbe-delta {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid var(--line);
  flex: none;
  font-size: 12px;
}
.courbe-delta.positif {
  background: var(--up-soft);
  color: var(--up);
}
.courbe-delta.negatif {
  background: var(--down-soft);
  color: var(--down);
}
.courbe-delta.neutre {
  background: var(--card-2);
  color: var(--muted);
}
.courbe-liste-label {
  font-weight: 800;
}
.courbe-liste-note {
  color: var(--muted);
  font-weight: 600;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.courbe-liste-date {
  margin-left: auto;
  color: var(--muted);
  font-weight: 700;
  font-size: 11.5px;
  white-space: nowrap;
  flex: none;
}

.pill.roi {
  background: var(--sun);
  color: #191325;
}

.karma-bar {
  margin-top: 14px;
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.karma-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 9px;
}
.karma-track {
  height: 13px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.karma-fill {
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--brand) 0 9px, var(--rose) 9px 18px);
  transition: width 0.5s ease;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
  padding: 16px;
}
.badge-card {
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.badge-card.locked {
  opacity: 0.4;
  filter: grayscale(1);
  box-shadow: none;
}
.badge-emoji {
  font-size: 25px;
  line-height: 1;
}
.badge-name {
  font-weight: 900;
  font-size: 13.5px;
}
.badge-desc {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
  font-weight: 600;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 11px;
  padding: 16px;
}
.stat {
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 10px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-value {
  font-size: 21px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 700;
}

/* ------------------------------------------------------------ notifications */

.notif {
  display: flex;
  gap: 13px;
  padding: 14px 16px;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.09s;
}
@media (hover: hover) {
  .notif:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow);
  }
}
.notif.unread {
  background: var(--sun);
}
.notif-icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--brand);
  color: #fff;
}
.notif-icon.kinou {
  background: var(--kinou);
}
.notif-icon.badge {
  background: var(--gold);
}
.notif-icon.milestone {
  background: var(--mint);
}
.notif-text {
  font-size: 14.5px;
  min-width: 0;
  font-weight: 600;
}
.notif-quote {
  color: var(--muted);
  font-size: 14px;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ messages privés */

.dm-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* dvh suit la barre d'adresse mobile, contrairement à vh */
  height: calc(100dvh - 28px);
}
.dm-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: 0;
}
.bubble {
  max-width: 80%;
  padding: 11px 15px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  align-self: flex-start;
  background: var(--card-2);
  border: 2px solid var(--line);
  border-bottom-left-radius: 6px;
}
.bubble.mine {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 6px;
}
.bubble.bot {
  background: var(--kinou-soft);
}
.bubble-time {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
  text-align: right;
  font-weight: 700;
}
.dm-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex: none;
}
.dm-form textarea {
  flex: 1;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: 20px;
  padding: 12px 16px;
  resize: none;
  outline: none;
  max-height: 130px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------ formulaires */

.field {
  margin-bottom: 15px;
}
.field label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  font-weight: 600;
  transition: box-shadow 0.1s;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  box-shadow: var(--shadow-sm);
}
.field textarea {
  resize: vertical;
  min-height: 84px;
}
.field-hint {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 600;
}

.form-error {
  background: var(--down-soft);
  color: var(--down);
  border: var(--bw) solid var(--down);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 15px;
  font-weight: 800;
}
.form-ok {
  background: var(--up-soft);
  color: var(--up);
  border: var(--bw) solid var(--up);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 15px;
  font-weight: 800;
}

.emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.emoji-opt {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 21px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  background: var(--card-2);
  transition: transform 0.08s;
}
@media (hover: hover) {
  .emoji-opt:hover {
    transform: translate(-1px, -1px);
  }
}
.emoji-opt.on {
  background: var(--sun);
  box-shadow: var(--shadow-sm);
}
.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.color-opt {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--line);
  transition: transform 0.08s;
}
@media (hover: hover) {
  .color-opt:hover {
    transform: scale(1.1);
  }
}
.color-opt.on {
  box-shadow: 0 0 0 3px var(--sun), var(--shadow-sm);
}

/* Zone d'envoi d'image */
.dropzone {
  border: var(--bw) dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: background 0.12s;
}
@media (hover: hover) {
  .dropzone:hover {
    background: var(--brand-soft);
  }
}
.dropzone-preview {
  width: 66px;
  height: 66px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--card);
  background-size: cover;
  background-position: center;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 26px;
  overflow: hidden;
}
.dropzone-preview.wide {
  width: 132px;
  height: 52px;
}
.dropzone-text {
  flex: 1;
  min-width: 0;
}
.dropzone-title {
  font-weight: 800;
  font-size: 14px;
}
.dropzone-sub {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

/* ------------------------------------------------------------ recadrage */

.cropper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cropper-frame {
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card-2);
  cursor: grab;
  touch-action: none;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}
.cropper-frame:active {
  cursor: grabbing;
}
.cropper-frame canvas {
  display: block;
  pointer-events: none;
}
.cropper-hint {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  font-weight: 600;
}
.cropper-zoom-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font-weight: 800;
  font-size: 13px;
}
.cropper-zoom {
  flex: 1;
  accent-color: var(--brand);
}

/* ------------------------------------------------------------ authentification */

.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.auth-hero {
  background: var(--brand);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px;
  gap: 18px;
  border-right: var(--bw) solid var(--line);
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 2px, transparent 2px);
  background-size: 26px 26px;
}
.auth-hero h1 {
  font-size: 56px;
  line-height: 1;
  letter-spacing: -2px;
  font-weight: 900;
  text-shadow: 4px 4px 0 var(--line);
}
.auth-hero p {
  font-size: 18px;
  max-width: 32ch;
  font-weight: 600;
}
.auth-quote {
  margin-top: 14px;
  background: var(--card);
  color: var(--text);
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 15px;
  font-style: italic;
  font-weight: 600;
  max-width: 42ch;
  transform: rotate(-1.2deg);
}
.auth-quote small {
  display: block;
  font-style: normal;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 700;
}
.auth-panel {
  display: grid;
  place-content: center;
  padding: 40px 24px;
}
.auth-card {
  width: min(400px, 100%);
}
.auth-card h2 {
  font-size: 30px;
  letter-spacing: -0.8px;
  margin-bottom: 6px;
  font-weight: 900;
}
.auth-card > p {
  color: var(--muted);
  margin-bottom: 22px;
  font-size: 14.5px;
  font-weight: 600;
}
.switch-auth {
  text-align: center;
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.switch-auth button {
  color: var(--brand);
  font-weight: 900;
}
@media (hover: hover) {
  .switch-auth button:hover {
    text-decoration: underline;
  }
}

/* ------------------------------------------------------------ panneau admin */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 16px;
}
.admin-tile {
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}
.admin-tile-value {
  font-size: 26px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.admin-tile-label {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
}
.admin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 2px dashed color-mix(in srgb, var(--line) 22%, transparent);
  flex-wrap: wrap;
}
.admin-row:last-child {
  border-bottom: none;
}
.admin-row-main {
  flex: 1;
  min-width: 160px;
}
.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.relation-score {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 46px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 2px solid var(--line);
  color: #fff;
  font-size: 13px;
}

/* ------------------------------------------------------------ divers */

.empty {
  padding: 48px 28px;
  text-align: center;
  color: var(--muted);
  background: var(--card);
  border: var(--bw) dashed var(--line);
  border-radius: var(--radius);
  font-weight: 600;
}
.empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--brand);
}
.empty-title {
  font-size: 19px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 6px;
}

.loading {
  padding: 40px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}
.spinner {
  width: 30px;
  height: 30px;
  border: 3.5px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.section-title {
  font-size: 18px;
  font-weight: 900;
  padding: 4px 2px;
}
.panel {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.rank {
  font-size: 15px;
  font-weight: 900;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 2px solid var(--line);
  background: var(--card-2);
  color: var(--text);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.rank.rank-1 {
  background: var(--sun);
}
.rank.rank-2 {
  background: #d8d3e6;
}
.rank.rank-3 {
  background: #f0b483;
}

.toasts {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
  pointer-events: none;
  width: max-content;
  max-width: min(92vw, 460px);
}
.toast {
  background: var(--card);
  color: var(--text);
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 800;
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow);
  animation: rise 0.22s ease;
}
.toast.err {
  background: var(--rouge);
  color: #fff;
}
.toast.kinou {
  background: var(--kinou);
  color: #fff;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--line) 55%, transparent);
  display: grid;
  place-items: center;
  z-index: 500;
  padding: 18px;
  animation: fade 0.15s ease;
  overflow-y: auto;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.modal {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: min(560px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  margin: auto;
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: var(--bw) solid var(--line);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
}
.modal-title {
  font-weight: 900;
  font-size: 18px;
}
.modal-body {
  padding: 16px;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 16px 16px;
}

.mobile-bar {
  display: none;
}
.mobile-fab {
  display: none;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .shell {
    grid-template-columns: var(--nav-w) minmax(0, var(--main-w));
  }
  .side {
    display: none;
  }
}

@media (max-width: 1000px) {
  :root {
    --nav-w: 82px;
  }
  .nav-link span.label,
  .nav-me-text,
  .brand span {
    display: none;
  }
  .nav-cta {
    padding: 14px 0;
    text-align: center;
  }
  .nav-cta .label-long {
    display: none;
  }
  .nav-cta .cta-icon {
    display: inline-flex;
  }
  .nav-link {
    justify-content: center;
    padding: 12px;
  }
  .nav-badge {
    left: auto;
    right: 4px;
    top: 0;
  }
  .nav-me {
    justify-content: center;
  }
  .auth {
    grid-template-columns: 1fr;
  }
  .auth-hero {
    padding: 40px 28px;
    border-right: none;
    border-bottom: var(--bw) solid var(--line);
  }
  .auth-hero h1 {
    font-size: 40px;
  }
}

@media (max-width: 700px) {
  body {
    /* place pour la barre du bas, encoches comprises */
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
    font-size: 15px;
  }
  .shell {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 11px;
    gap: 0;
  }
  .nav {
    display: none;
  }
  .main {
    padding: 11px 0 24px;
    gap: 12px;
  }
  /* Seul le compositeur intégré au fil disparaît : celui de la fenêtre
     de publication doit évidemment rester utilisable. */
  .composer.inline {
    display: none;
  }
  /*
   * La barre du bas, sur iPhone.
   *
   * La barre d'outils du navigateur qui se cache fait passer
   * `env(safe-area-inset-bottom)` de 0 a 34 pixels. Tant que cette valeur
   * entrait dans la HAUTEUR de la barre, le cadre grandissait par le haut
   * pendant que son bord bas restait colle a l'ecran : les icones, centrees
   * dans la partie haute, se decalaient d'une autre quantite que le cadre.
   * D'ou les trois vitesses.
   *
   * La hauteur est maintenant CONSTANTE et c'est la position qui absorbe
   * l'encoche. La barre et son contenu se deplacent donc d'un seul tenant, et
   * un pseudo-element remplit la bande sous elle pour que le fond ne coupe
   * pas au ras du bord.
   */
  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    box-sizing: border-box;
    height: 62px;
    padding-bottom: 0;
    align-items: stretch;
    background: var(--card);
    border-top: var(--bw) solid var(--line);
    z-index: 100;
  }
  .mobile-bar::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: env(safe-area-inset-bottom);
    background: var(--card);
  }
  .mobile-tab {
    /* `1 1 0` et pas `1` : les onglets se partagent la largeur a parts egales
       quel que soit leur contenu, donc la barre garde sa forme. */
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--muted);
    padding: 0;
  }
  .mobile-tab.active {
    color: var(--brand);
  }
  .mobile-tab.active::after {
    content: '';
    position: absolute;
    bottom: 8px;
    width: 22px;
    height: 4px;
    border-radius: 2px;
    background: var(--brand);
  }
  .mobile-tab .nav-badge {
    left: auto;
    right: 22%;
    top: 7px;
  }
  .mobile-fab {
    display: grid;
    place-items: center;
    position: fixed;
    right: 16px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--sun);
    color: #191325;
    border: var(--bw) solid var(--line);
    box-shadow: var(--shadow);
    z-index: 100;
  }
  .mobile-fab:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--shadow-c);
  }
  /* La conversation doit tenir au-dessus de la barre du bas, sinon le champ
     d'envoi se retrouve caché derrière. */
  .dm-layout {
    height: calc(100dvh - 62px - env(safe-area-inset-bottom) - 22px);
  }
  html.clavier-ouvert .dm-layout {
    height: calc(100dvh - 22px);
  }
  .post.detail .post-text {
    font-size: 18px;
  }
  /* Décalage encore plus discret sur petit écran : chaque pixel compte. */
  .comment-indent {
    margin-left: 6px;
    padding-left: 8px;
    gap: 11px;
    margin-top: 11px;
  }
  .profile-avatar-row {
    margin-top: -46px;
  }
  .avatar.lg {
    width: 88px;
    height: 88px;
    font-size: 40px;
  }
  .auth-hero h1 {
    font-size: 34px;
  }
  .auth-hero {
    padding: 30px 22px;
  }
  .badge-grid {
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
    gap: 10px;
  }
  .modal-backdrop {
    padding: 10px;
    align-items: start;
  }
  .modal {
    /* Quand le clavier virtuel s'ouvre, la fenêtre doit rétrécir et non
       passer sous le clavier. */
    max-height: calc(100dvh - 20px);
    margin-top: 8px;
  }
  .toasts {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* Clavier virtuel ouvert : la barre du bas et le bouton flottant s'effacent
   pour laisser toute la place au champ de saisie. Détecté en JavaScript via
   visualViewport, bien plus fiable qu'un seuil de hauteur en CSS. */
html.clavier-ouvert .mobile-bar,
html.clavier-ouvert .mobile-fab {
  display: none;
}
html.clavier-ouvert body {
  padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Kinou est en train d'écrire : le bouton cède la place à cet indicateur. */
.action.kinou-attente {
  color: var(--kinou);
  background: var(--kinou-soft);
  border-color: var(--line);
  cursor: default;
  font-weight: 800;
}
.action.kinou-attente .dots {
  margin-left: -2px;
}

/* ============================================================
   CASINO
   Tables de jeu, pupitre de mise, boutique et effets.
   ============================================================ */

.casino-tete .solde {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sun);
  color: #191325;
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  font-weight: 900;
  box-shadow: var(--shadow-sm);
}
.solde-valeur {
  font-variant-numeric: tabular-nums;
  font-size: 18px;
}
.solde-unite {
  font-size: 12px;
  opacity: 0.75;
}
.solde.pulse {
  animation: solde-pop 0.45s ease;
}
@keyframes solde-pop {
  40% {
    transform: scale(1.14) rotate(-2deg);
  }
}
.solde-mini {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.plateau {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.scene-casino {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-jeu {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.jeu-infos {
  text-align: center;
  min-height: 44px;
}
.jeu-consigne {
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  max-width: 46ch;
  margin: 0 auto;
}
.jeu-detail {
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
.jauge-mult {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
.mult-actuel {
  font-size: 30px;
  font-weight: 900;
  color: var(--up);
  font-variant-numeric: tabular-nums;
}
.mult-suivant {
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

/* ------------------------------------------------ pupitre de mise */

.pupitre {
  display: flex;
  flex-direction: column;
  gap: 11px;
  border-top: 2px dashed color-mix(in srgb, var(--line) 25%, transparent);
  padding-top: 14px;
}
.pupitre-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pupitre-ligne label {
  font-weight: 900;
  font-size: 14px;
}
.champ-mise {
  flex: 1;
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-weight: 900;
  font-size: 17px;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.champ-mise:focus {
  box-shadow: var(--shadow-sm);
}
.mises-rapides {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.mise-puce {
  border: 2px solid var(--line);
  background: var(--card-2);
  border-radius: 999px;
  padding: 5px 13px;
  font-weight: 800;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.mise-puce.tapis {
  background: var(--rouge);
  color: #fff;
}
.commandes {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.gros-bouton {
  flex: 1;
  min-width: 128px;
  font-size: 16px;
  padding: 13px;
}
.select-mines {
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  padding: 10px 14px;
  font-weight: 800;
  outline: none;
}

/* ------------------------------------------------ roue */

.roue-cadre {
  position: relative;
  width: min(300px, 82vw);
}
.roue-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(4px 4px 0 var(--shadow-c));
}
.roue-disque {
  transform-origin: 50% 50%;
}
.roue-label {
  font-size: 11px;
  font-weight: 900;
  fill: #191325;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 2.5px;
}
.roue-fleche {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--line);
  filter: drop-shadow(0 2px 0 var(--sun));
}
.roue-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.roue-puce {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.roue-puce i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1.5px solid var(--line);
  display: inline-block;
}

/* ------------------------------------------------ mines */

.grille-mines {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: min(340px, 92vw);
}
.case-mine {
  aspect-ratio: 1;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--brand);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform 0.09s, background 0.15s;
}
.case-mine:disabled {
  cursor: default;
}
.case-mine.ouverte {
  background: var(--up);
  animation: case-ouvre 0.28s ease;
}
.case-mine.bombe {
  background: var(--down);
  animation: case-boum 0.34s ease;
}
.case-mine.fatale {
  box-shadow: 0 0 0 4px var(--sun), var(--shadow-sm);
}
@keyframes case-ouvre {
  50% {
    transform: scale(1.16) rotate(4deg);
  }
}
@keyframes case-boum {
  30% {
    transform: scale(1.3);
  }
  60% {
    transform: scale(0.92);
  }
}

/* ------------------------------------------------ tour */

.echelle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(340px, 92vw);
}
.etage {
  display: flex;
  gap: 6px;
  align-items: center;
  opacity: 0.45;
  transition: opacity 0.2s;
  position: relative;
}
.etage.actif {
  opacity: 1;
}
.etage.actif .dalle {
  box-shadow: var(--shadow-sm);
}
.dalle {
  flex: 1;
  height: 42px;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform 0.09s, background 0.15s;
}
.dalle.sure {
  background: var(--up);
  animation: case-ouvre 0.28s ease;
}
.dalle.piegee {
  background: var(--down);
}
.dalle.piegee.revelee {
  opacity: 0.55;
}
.dalle.fatale {
  animation: case-boum 0.34s ease;
  box-shadow: 0 0 0 4px var(--sun);
}
.etage-mult {
  width: 52px;
  text-align: right;
  font-weight: 900;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.etage.actif .etage-mult {
  color: var(--up);
}

/* ------------------------------------------------ blackjack */

.table-bj {
  gap: 8px;
}
.cote-table {
  width: 100%;
  text-align: center;
}
.cote-titre {
  font-weight: 900;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 7px;
}
.score-main {
  background: var(--card-2);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 1px 10px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.main-cartes {
  display: flex;
  gap: 7px;
  justify-content: center;
  min-height: 92px;
  flex-wrap: wrap;
}
.carte {
  width: 62px;
  height: 88px;
  border: var(--bw) solid var(--line);
  border-radius: 9px;
  background: #fffdf8;
  color: #191325;
  position: relative;
  box-shadow: var(--shadow-sm);
  animation: carte-arrive 0.3s ease;
  flex: none;
}
.carte.rouge {
  color: #e8383d;
}
.carte.dos {
  background: repeating-linear-gradient(45deg, var(--brand) 0 7px, var(--kinou-soft) 7px 14px);
}
.carte-haut,
.carte-bas {
  position: absolute;
  font-weight: 900;
  font-size: 15px;
}
.carte-haut {
  top: 5px;
  left: 7px;
}
.carte-bas {
  bottom: 5px;
  right: 7px;
  transform: rotate(180deg);
}
.carte-couleur {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 30px;
}
@keyframes carte-arrive {
  from {
    transform: translateY(-26px) rotate(-9deg);
    opacity: 0;
  }
}
.tapis-ligne {
  width: 100%;
  height: 2px;
  border-top: 2px dashed color-mix(in srgb, var(--line) 25%, transparent);
  margin: 4px 0;
}

/* ------------------------------------------------ effets */

.bandeau {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px 26px;
  text-align: center;
  z-index: 20;
  pointer-events: none;
  animation: bandeau-entre 0.34s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.bandeau.sortie {
  animation: bandeau-sort 0.4s ease forwards;
}
.bandeau-titre {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.bandeau-detail {
  font-weight: 800;
  color: var(--muted);
  margin-top: 3px;
}
.bandeau.gain {
  background: var(--up-soft);
}
.bandeau.gain .bandeau-titre {
  color: var(--up);
}
.bandeau.perte {
  background: var(--down-soft);
}
.bandeau.perte .bandeau-titre {
  color: var(--down);
}
.bandeau.jackpot {
  background: var(--sun);
  animation: bandeau-entre 0.34s cubic-bezier(0.2, 1.5, 0.4, 1), jackpot-vibre 0.5s 0.3s ease infinite;
}
@keyframes bandeau-entre {
  from {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
  }
}
@keyframes bandeau-sort {
  to {
    transform: translate(-50%, -140%) scale(0.9);
    opacity: 0;
  }
}
@keyframes jackpot-vibre {
  25% {
    transform: translate(-50%, -50%) rotate(-1.6deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(1.6deg);
  }
}

.piece-volante {
  position: fixed;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffe57a, var(--gold));
  border: 2px solid var(--line);
  pointer-events: none;
  z-index: 900;
  animation: piece-vole 1s ease-out forwards;
}
@keyframes piece-vole {
  0% {
    transform: translate(0, 0) scale(0.4);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), calc(var(--dy) + 220px)) scale(1) rotate(400deg);
    opacity: 0;
  }
}

.flash-ecran {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 850;
  animation: flash-sort 0.7s ease forwards;
}
@keyframes flash-sort {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}

.secousse {
  animation: secousse 0.42s ease;
}
.secousse-forte {
  animation: secousse 0.6s ease;
}
@keyframes secousse {
  10%,
  50%,
  90% {
    transform: translateX(-7px);
  }
  30%,
  70% {
    transform: translateX(7px);
  }
}

/* ------------------------------------------------ boutique */

.grille-boutique {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 12px;
  padding: 16px;
}
.article {
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.article-tete {
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  border: 2px solid var(--line);
  flex: none;
}
.article-famille {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.article-nom {
  font-weight: 900;
  font-size: 15px;
}
.article-desc {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  flex: 1;
}

.gains-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gain-ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 13.5px;
}
.gain-chiffre {
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  font-weight: 900;
}

/* ------------------------------------------------ cosmétiques achetés */

.avatar.cadre-or {
  box-shadow: 0 0 0 3px var(--gold);
}
.avatar.cadre-neon {
  /* --cadre est pose par le profil ; sans choix, on retombe sur le violet. */
  box-shadow: 0 0 0 3px var(--cadre, var(--brand));
  animation: neon-pulse 1.6s ease-in-out infinite;
}
@keyframes neon-pulse {
  50% {
    box-shadow: 0 0 0 3px var(--cadre, var(--rose)), 0 0 14px 3px var(--cadre, var(--rose));
  }
}
.profile-titre {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--brand);
  margin-top: 2px;
}

@media (max-width: 700px) {
  .grille-mines,
  .echelle {
    width: 100%;
  }
  .carte {
    width: 52px;
    height: 75px;
  }
  .bandeau-titre {
    font-size: 21px;
  }
  .gros-bouton {
    min-width: 100px;
    font-size: 15px;
  }
}

/* ------------------------------------------------ plinko */
.plinko-cadre {
  width: min(340px, 92vw);
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: none;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.plinko-svg {
  display: block;
  width: 100%;
  height: auto;
}
.plinko-picot {
  fill: var(--muted);
  opacity: 0.55;
}
.plinko-bille {
  /* Aucune transition : la position vient de la simulation, image par image. */
  fill: var(--sun);
  stroke: var(--line);
  stroke-width: 2;
}
.plinko-bille.posee {
  transition: opacity 0.25s, r 0.25s;
  opacity: 0;
}
.plinko-picot.touche {
  fill: #fff;
  opacity: 1;
}
.plinko-cases {
  width: min(340px, 92vw);
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 2px;
  border: var(--bw) solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 4px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.plinko-case {
  font-size: 8.5px;
  font-weight: 900;
  text-align: center;
  padding: 5px 0;
  border-radius: 5px;
  color: #191325;
  border: 1.5px solid var(--line);
  transition: transform 0.15s;
}
.plinko-case.touchee {
  transform: translateY(4px) scale(1.22);
  box-shadow: 0 0 0 3px var(--sun);
  position: relative;
  z-index: 2;
}

.pill.epingle {
  background: var(--rose);
  color: #fff;
}
.post.epingle-actif {
  box-shadow: var(--shadow), 0 0 0 3px var(--rose);
}

/* ============================================================
   LA MINE
   Décor de plaine, bloc texturé en pixels, éclats et fissures.
   ============================================================ */

.mine-plateau {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bloc-entete {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bloc-nom {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
.bloc-titre {
  font-weight: 900;
  font-size: 18px;
}
.bloc-rarete {
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 2px solid var(--line);
  color: #191325;
}
.pv-piste {
  flex: 1;
  min-width: 160px;
  height: 22px;
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  position: relative;
  overflow: hidden;
}
.pv-remplissage {
  height: 100%;
  transition: width 0.12s linear, background 0.3s;
}
.pv-texte {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ------------------------------------------------ décor */

.mine-scene {
  position: relative;
  height: 320px;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  user-select: none;
  touch-action: manipulation;
}
.mine-decor {
  position: absolute;
  inset: 0;
  background: linear-gradient(#8fd6ff 0%, #b9e8ff 52%, #d9f2ff 100%);
}
[data-theme='dark'] .mine-decor {
  background: linear-gradient(#1b2a52 0%, #2c3f73 55%, #3a5188 100%);
}
.mine-soleil {
  position: absolute;
  top: 22px;
  right: 34px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffe27a;
  border: 3px solid var(--line);
  box-shadow: 0 0 26px 8px rgba(255, 226, 122, 0.6);
}
.mine-nuage {
  position: absolute;
  width: 78px;
  height: 26px;
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 999px;
  animation: nuage-derive 26s linear infinite;
  opacity: 0.9;
}
.mine-nuage.petit {
  width: 52px;
  height: 20px;
}
.mine-nuage::after {
  content: '';
  position: absolute;
  top: -13px;
  left: 20px;
  width: 34px;
  height: 26px;
  background: #fff;
  border: 3px solid var(--line);
  border-bottom: none;
  border-radius: 999px 999px 0 0;
}
@keyframes nuage-derive {
  from {
    transform: translateX(-120px);
  }
  to {
    transform: translateX(420px);
  }
}
.mine-colline {
  position: absolute;
  bottom: 58px;
  border-radius: 50% 50% 0 0;
  border: 3px solid var(--line);
  border-bottom: none;
}
.mine-colline.loin {
  left: -8%;
  width: 62%;
  height: 96px;
  background: #6dbf5b;
}
.mine-colline.proche {
  right: -6%;
  width: 56%;
  height: 74px;
  background: #58a94a;
}
.mine-herbe {
  position: absolute;
  bottom: 52px;
  left: 0;
  right: 0;
  height: 14px;
  background: #6dbf5b;
  border-top: 3px solid var(--line);
}
.mine-sol {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: repeating-linear-gradient(90deg, #8b5a3c 0 26px, #7d5136 26px 52px);
  border-top: 3px solid var(--line);
}

/* ------------------------------------------------ le bloc */

.bloc {
  position: relative;
  width: 148px;
  height: 148px;
  margin-bottom: 26px;
  background: var(--bloc, #8d8d94);
  border: 4px solid var(--line);
  border-radius: 10px;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.32), inset 0 -14px 0 rgba(0, 0, 0, 0.22), inset 0 8px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.06s;
  z-index: 2;
  padding: 0;
  overflow: hidden;
}
.bloc.frappe {
  animation: bloc-coup 0.14s ease;
}
.bloc.explose {
  animation: bloc-explose 0.42s ease forwards;
}
@keyframes bloc-coup {
  50% {
    transform: scale(0.9) rotate(-2deg);
  }
}
@keyframes bloc-explose {
  40% {
    transform: scale(1.28) rotate(6deg);
    filter: brightness(2.2);
  }
  100% {
    transform: scale(0.2) rotate(-16deg);
    opacity: 0;
  }
}
.bloc-pixels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.bloc-pixels i {
  display: block;
}

/* Cinq paliers de fissures, tracés en dégradés : aucun fichier image. */
/*
 * Les fissures.
 *
 * Chaque palier ajoute des branches par-dessus les precedentes, tracees en
 * SVG. Le minerai ne noircit plus : il se couvre d'un reseau de cassures qui
 * s'etend, ce qui se lit beaucoup mieux qu'un aplat qui fonce.
 */
.bloc-fissures {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 6px;
}
.bloc-fissures-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.fissure {
  fill: none;
  stroke: rgba(0, 0, 0, 0.62);
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Un lisere clair sur le bord : la cassure semble creuse, pas dessinee. */
  filter: drop-shadow(0.7px 0.7px 0 rgba(255, 255, 255, 0.42));
  animation: fissure-apparait 0.22s ease-out;
}
@keyframes fissure-apparait {
  from {
    opacity: 0;
    stroke-width: 6;
  }
}

/* ------------------------------------------------ effets */

.bandeau {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px 26px;
  text-align: center;
  z-index: 20;
  pointer-events: none;
  animation: bandeau-entre 0.34s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.bandeau.sortie {
  animation: bandeau-sort 0.4s ease forwards;
}
.bandeau-titre {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.bandeau-detail {
  font-weight: 800;
  color: var(--muted);
  margin-top: 3px;
}
.bandeau.gain {
  background: var(--up-soft);
}
.bandeau.gain .bandeau-titre {
  color: var(--up);
}
.bandeau.perte {
  background: var(--down-soft);
}
.bandeau.perte .bandeau-titre {
  color: var(--down);
}
.bandeau.jackpot {
  background: var(--sun);
  animation: bandeau-entre 0.34s cubic-bezier(0.2, 1.5, 0.4, 1), jackpot-vibre 0.5s 0.3s ease infinite;
}
@keyframes bandeau-entre {
  from {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
  }
}
@keyframes bandeau-sort {
  to {
    transform: translate(-50%, -140%) scale(0.9);
    opacity: 0;
  }
}
@keyframes jackpot-vibre {
  25% {
    transform: translate(-50%, -50%) rotate(-1.6deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(1.6deg);
  }
}

.piece-volante {
  position: fixed;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffe57a, var(--gold));
  border: 2px solid var(--line);
  pointer-events: none;
  z-index: 900;
  animation: piece-vole 1s ease-out forwards;
}
@keyframes piece-vole {
  0% {
    transform: translate(0, 0) scale(0.4);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), calc(var(--dy) + 220px)) scale(1) rotate(400deg);
    opacity: 0;
  }
}

.flash-ecran {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 850;
  animation: flash-sort 0.7s ease forwards;
}
@keyframes flash-sort {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}

.secousse {
  animation: secousse 0.42s ease;
}
.secousse-forte {
  animation: secousse 0.6s ease;
}
@keyframes secousse {
  10%,
  50%,
  90% {
    transform: translateX(-7px);
  }
  30%,
  70% {
    transform: translateX(7px);
  }
}

/* ------------------------------------------------ boutique */

.grille-boutique {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 12px;
  padding: 16px;
}
.article {
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.article-tete {
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  border: 2px solid var(--line);
  flex: none;
}
.article-famille {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.article-nom {
  font-weight: 900;
  font-size: 15px;
}
.article-desc {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  flex: 1;
}

.gains-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gain-ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 13.5px;
}
.gain-chiffre {
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  font-weight: 900;
}

/* ------------------------------------------------ cosmétiques achetés */

.avatar.cadre-or {
  box-shadow: 0 0 0 3px var(--gold);
}
.avatar.cadre-neon {
  /* --cadre est pose par le profil ; sans choix, on retombe sur le violet. */
  box-shadow: 0 0 0 3px var(--cadre, var(--brand));
  animation: neon-pulse 1.6s ease-in-out infinite;
}
@keyframes neon-pulse {
  50% {
    box-shadow: 0 0 0 3px var(--cadre, var(--rose)), 0 0 14px 3px var(--cadre, var(--rose));
  }
}
.profile-titre {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--brand);
  margin-top: 2px;
}

@media (max-width: 700px) {
  .grille-mines,
  .echelle {
    width: 100%;
  }
  .carte {
    width: 52px;
    height: 75px;
  }
  .bandeau-titre {
    font-size: 21px;
  }
  .gros-bouton {
    min-width: 100px;
    font-size: 15px;
  }
}

/* ------------------------------------------------ plinko */
.plinko-cadre {
  width: min(340px, 92vw);
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: none;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.plinko-svg {
  display: block;
  width: 100%;
  height: auto;
}
.plinko-picot {
  fill: var(--muted);
  opacity: 0.55;
}
.plinko-bille {
  /* Aucune transition : la position vient de la simulation, image par image. */
  fill: var(--sun);
  stroke: var(--line);
  stroke-width: 2;
}
.plinko-bille.posee {
  transition: opacity 0.25s, r 0.25s;
  opacity: 0;
}
.plinko-picot.touche {
  fill: #fff;
  opacity: 1;
}
.plinko-cases {
  width: min(340px, 92vw);
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 2px;
  border: var(--bw) solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 4px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.plinko-case {
  font-size: 8.5px;
  font-weight: 900;
  text-align: center;
  padding: 5px 0;
  border-radius: 5px;
  color: #191325;
  border: 1.5px solid var(--line);
  transition: transform 0.15s;
}
.plinko-case.touchee {
  transform: translateY(4px) scale(1.22);
  box-shadow: 0 0 0 3px var(--sun);
  position: relative;
  z-index: 2;
}

.pill.epingle {
  background: var(--rose);
  color: #fff;
}
.post.epingle-actif {
  box-shadow: var(--shadow), 0 0 0 3px var(--rose);
}

/* ============================================================
   LA MINE
   Décor de plaine, bloc texturé en pixels, éclats et fissures.
   ============================================================ */

.mine-plateau {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bloc-entete {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bloc-nom {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
.bloc-titre {
  font-weight: 900;
  font-size: 18px;
}
.bloc-rarete {
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 2px solid var(--line);
  color: #191325;
}
.pv-piste {
  flex: 1;
  min-width: 160px;
  height: 22px;
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  position: relative;
  overflow: hidden;
}
.pv-remplissage {
  height: 100%;
  transition: width 0.12s linear, background 0.3s;
}
.pv-texte {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ------------------------------------------------ décor */

.mine-scene {
  position: relative;
  height: 320px;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  user-select: none;
  touch-action: manipulation;
}
.mine-decor {
  position: absolute;
  inset: 0;
  background: linear-gradient(#8fd6ff 0%, #b9e8ff 52%, #d9f2ff 100%);
}
[data-theme='dark'] .mine-decor {
  background: linear-gradient(#1b2a52 0%, #2c3f73 55%, #3a5188 100%);
}
.mine-soleil {
  position: absolute;
  top: 22px;
  right: 34px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffe27a;
  border: 3px solid var(--line);
  box-shadow: 0 0 26px 8px rgba(255, 226, 122, 0.6);
}
.mine-nuage {
  position: absolute;
  width: 78px;
  height: 26px;
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 999px;
  animation: nuage-derive 26s linear infinite;
  opacity: 0.9;
}
.mine-nuage.petit {
  width: 52px;
  height: 20px;
}
.mine-nuage::after {
  content: '';
  position: absolute;
  top: -13px;
  left: 20px;
  width: 34px;
  height: 26px;
  background: #fff;
  border: 3px solid var(--line);
  border-bottom: none;
  border-radius: 999px 999px 0 0;
}
@keyframes nuage-derive {
  from {
    transform: translateX(-120px);
  }
  to {
    transform: translateX(420px);
  }
}
.mine-colline {
  position: absolute;
  bottom: 58px;
  border-radius: 50% 50% 0 0;
  border: 3px solid var(--line);
  border-bottom: none;
}
.mine-colline.loin {
  left: -8%;
  width: 62%;
  height: 96px;
  background: #6dbf5b;
}
.mine-colline.proche {
  right: -6%;
  width: 56%;
  height: 74px;
  background: #58a94a;
}
.mine-herbe {
  position: absolute;
  bottom: 52px;
  left: 0;
  right: 0;
  height: 14px;
  background: #6dbf5b;
  border-top: 3px solid var(--line);
}
.mine-sol {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: repeating-linear-gradient(90deg, #8b5a3c 0 26px, #7d5136 26px 52px);
  border-top: 3px solid var(--line);
}

/* ------------------------------------------------ le bloc */

.bloc {
  position: relative;
  width: 148px;
  height: 148px;
  margin-bottom: 26px;
  background: var(--bloc, #8d8d94);
  border: 4px solid var(--line);
  border-radius: 10px;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.32), inset 0 -14px 0 rgba(0, 0, 0, 0.22), inset 0 8px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.06s;
  z-index: 2;
  padding: 0;
  overflow: hidden;
}
.bloc.frappe {
  animation: bloc-coup 0.14s ease;
}
.bloc.explose {
  animation: bloc-explose 0.42s ease forwards;
}
@keyframes bloc-coup {
  50% {
    transform: scale(0.9) rotate(-2deg);
  }
}
@keyframes bloc-explose {
  40% {
    transform: scale(1.28) rotate(6deg);
    filter: brightness(2.2);
  }
  100% {
    transform: scale(0.2) rotate(-16deg);
    opacity: 0;
  }
}
.bloc-pixels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.bloc-pixels i {
  display: block;
}

/* Cinq paliers de fissures, tracés en dégradés : aucun fichier image. */
.bloc-fissures {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(115deg, transparent 46%, rgba(0, 0, 0, 0.85) 47%, transparent 49%),
    linear-gradient(65deg, transparent 58%, rgba(0, 0, 0, 0.7) 59%, transparent 61%),
    linear-gradient(160deg, transparent 30%, rgba(0, 0, 0, 0.6) 31%, transparent 33%),
    linear-gradient(20deg, transparent 70%, rgba(0, 0, 0, 0.75) 71%, transparent 73%);
  background-size: 100% 100%;
}
.bloc-fissures[data-palier='1'] {
  opacity: 0.35;
}
.bloc-fissures[data-palier='2'] {
  opacity: 0.6;
}
.bloc-fissures[data-palier='3'] {
  opacity: 0.85;
}
.bloc-fissures[data-palier='4'] {
  opacity: 1;
  filter: contrast(1.6);
}

/* ------------------------------------------------ effets */

.eclat {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--line);
  border-radius: 2px;
  pointer-events: none;
  z-index: 4;
  animation: eclat-vole 0.5s ease-out forwards;
}
@keyframes eclat-vole {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py) + 60px)) scale(0.3) rotate(220deg);
    opacity: 0;
  }
}

.degat-flottant {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 17px;
  color: #fff;
  text-shadow: 2px 2px 0 var(--line);
  pointer-events: none;
  z-index: 5;
  animation: degat-monte 0.85s ease-out forwards;
}
.degat-flottant.gain {
  font-size: 26px;
  color: var(--sun);
}
@keyframes degat-monte {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.7);
  }
  25% {
    transform: translate(-50%, -80%) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -190%) scale(0.9);
  }
}

.combo {
  text-align: center;
  font-weight: 900;
  font-size: 15px;
  color: var(--brand);
  min-height: 20px;
}
.combo.chaud {
  color: var(--rouge);
  animation: combo-vibre 0.35s ease infinite;
}
@keyframes combo-vibre {
  50% {
    transform: scale(1.14) rotate(-2deg);
  }
}

.annonce-bloc {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  text-align: center;
  z-index: 6;
  box-shadow: var(--shadow);
  animation: annonce-entre 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.annonce-titre {
  font-weight: 900;
  font-size: 17px;
}
.annonce-gain {
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
}
@keyframes annonce-entre {
  from {
    transform: translateX(-50%) scale(0.5);
    opacity: 0;
  }
}

.mine-resume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 9px;
}
.mine-stat {
  background: var(--card-2);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px;
  text-align: center;
}
.mine-stat b {
  display: block;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.mine-stat span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 700px) {
  .mine-scene {
    height: 270px;
  }
  .bloc {
    width: 124px;
    height: 124px;
  }
}

 ============================================================
   KinouChat, feuille de style unique
   Direction artistique : cartoon sticker.
   Contours nets, ombres portées dures et décalées, couleurs franches,
   coins généreux. Chaque bloc se lit comme un autocollant posé sur la page.
   ============================================================ */

:root {
  --paper: #fff4e2;
  --paper-2: #ffe9c9;
  --card: #ffffff;
  --card-2: #fff9f0;
  --line: #191325;
  --shadow-c: #191325;
  --text: #191325;
  --muted: #6f6880;

  --brand: #7c5cff;
  --brand-ink: #ffffff;
  --brand-soft: #ece6ff;
  --rose: #ff5fa2;
  --sun: #ffc93c;
  --mint: #22c98a;
  --sky: #45c4f0;
  --rouge: #ff5a5f;

  --up: #16a765;
  --up-soft: #d6f6e7;
  --down: #e8383d;
  --down-soft: #ffe0e1;
  --kinou: #7c5cff;
  --kinou-soft: #ece6ff;
  --gold: #f0a800;

  --bw: 2.5px;
  --radius: 20px;
  --radius-sm: 13px;
  --shadow: 4px 4px 0 var(--shadow-c);
  --shadow-sm: 3px 3px 0 var(--shadow-c);
  --shadow-lg: 7px 7px 0 var(--shadow-c);

  --nav-w: 250px;
  --main-w: 620px;
  --side-w: 330px;
}

[data-theme='dark'] {
  --paper: #15121f;
  --paper-2: #1d1930;
  --card: #272138;
  --card-2: #2f2843;
  --line: #0a0812;
  --shadow-c: #0a0812;
  --text: #f6efe4;
  --muted: #a49bbd;

  --brand: #9b82ff;
  --brand-soft: #362c58;
  --up: #2ee08a;
  --up-soft: #143d2c;
  --down: #ff6b70;
  --down-soft: #48181d;
  --kinou: #9b82ff;
  --kinou-soft: #362c58;
  --gold: #ffc93c;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: ui-rounded, 'SF Pro Rounded', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system,
    'Segoe UI Emoji', Roboto, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 500;
  overflow-y: scroll;
  /* Petits pois discrets : la page n'est jamais un aplat mort. */
  background-image: radial-gradient(color-mix(in srgb, var(--line) 7%, transparent) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

b,
strong {
  font-weight: 800;
}

::selection {
  background: var(--sun);
  color: #191325;
}

/* ------------------------------------------------------------ icônes */

.icon {
  flex: none;
  display: block;
  vertical-align: middle;
}

.btn.with-icon,
.action,
.tab,
.nav-link,
.card-row > .icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn.with-icon {
  justify-content: center;
}
.btn.icon-only {
  padding: 9px 11px;
  display: inline-flex;
  align-items: center;
}
.card-row > .icon {
  color: var(--muted);
}

/* ------------------------------------------------------------ écran de boot */

.boot {
  height: 100dvh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 12px;
}
.boot-logo {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--brand);
  -webkit-text-stroke: 1.5px var(--line);
}
.boot-sub {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

/* ------------------------------------------------------------ structure */

.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, var(--main-w)) var(--side-w);
  justify-content: center;
  gap: 22px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
}

.nav {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 14px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.7px;
  padding: 4px 6px 12px;
}
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  flex: none;
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow-sm);
  transform: rotate(-4deg);
}

.nav-link {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  border: var(--bw) solid transparent;
  transition: transform 0.08s, background 0.12s, border-color 0.12s;
}
@media (hover: hover) {
  .nav-link:hover {
    background: var(--card);
    border-color: var(--line);
    transform: translate(-1px, -1px);
  }
}
.nav-link.active {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.nav-icon {
  width: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-badge {
  position: absolute;
  top: 2px;
  left: 26px;
  background: var(--rose);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  line-height: 1;
  border: 2px solid var(--line);
}

.nav-cta {
  margin: 14px 0 0;
  background: var(--sun);
  color: #191325;
  font-weight: 900;
  font-size: 17px;
  padding: 14px;
  border-radius: 999px;
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.08s, box-shadow 0.08s;
}
@media (hover: hover) {
  .nav-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-lg);
  }
}
.nav-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow-c);
}
.nav-cta .cta-icon {
  display: none;
}

.nav-spacer {
  flex: 1;
}

.nav-me {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: var(--bw) solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s;
}
@media (hover: hover) {
  .nav-me:hover {
    transform: translate(-1px, -1px);
  }
}
.nav-me-text {
  min-width: 0;
  flex: 1;
}
.nav-me-name {
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-me-handle {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.main {
  min-height: 100dvh;
  min-width: 0;
  padding: 14px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-x: clip;
}

.side {
  padding: 14px 0 40px;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ------------------------------------------------------------ blocs autocollants */

.topbar {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.topbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-height: 56px;
}
.topbar-title {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.4px;
}
.topbar-sub {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.back-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--text);
  flex: none;
  border: var(--bw) solid var(--line);
  background: var(--card-2);
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s;
}
@media (hover: hover) {
  .back-btn:hover {
    transform: translate(-1px, -1px);
    background: var(--sun);
  }
}

.tabs {
  display: flex;
  border-top: var(--bw) solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--card-2);
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  flex: 1;
  min-width: max-content;
  padding: 12px 16px;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  position: relative;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
@media (hover: hover) {
  .tab:hover {
    background: var(--brand-soft);
    color: var(--text);
  }
}
.tab.active {
  color: var(--text);
  background: var(--sun);
  font-weight: 900;
}
.tab.active .icon {
  color: var(--text);
}

/* ------------------------------------------------------------ avatars */

.avatar {
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  user-select: none;
  line-height: 1;
  overflow: hidden;
  border: var(--bw) solid var(--line);
  background-size: cover;
  background-position: center;
}
.avatar.sm {
  width: 36px;
  height: 36px;
  font-size: 17px;
}
.avatar.md {
  width: 46px;
  height: 46px;
  font-size: 22px;
}
.avatar.lg {
  width: 104px;
  height: 104px;
  font-size: 48px;
  border-width: 4px;
  box-shadow: var(--shadow);
}
/* Avatar par défaut : initiales blanches sur la couleur du compte. */
.avatar.initials {
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.avatar.sm.initials {
  font-size: 13px;
}
.avatar.md.initials {
  font-size: 16px;
}
.avatar.lg.initials {
  font-size: 34px;
}
.avatar.bot {
  box-shadow: 0 0 0 3px var(--kinou);
}
.avatar.lg.bot {
  box-shadow: var(--shadow), 0 0 0 5px var(--kinou);
}

/* ------------------------------------------------------------ boutons */

.btn {
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 999px;
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}
@media (hover: hover) {
  .btn:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow);
  }
}
.btn:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow-c);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn.ghost {
  background: var(--card);
  color: var(--text);
}
@media (hover: hover) {
  .btn.ghost:hover:not(:disabled) {
    background: var(--sun);
  }
}
.btn.danger {
  background: var(--rouge);
  color: #fff;
}
.btn.sm {
  padding: 6px 14px;
  font-size: 13.5px;
}
.btn.block {
  width: 100%;
  padding: 13px;
}
.btn.kinou {
  background: var(--kinou);
  color: #fff;
}
.btn.sun {
  background: var(--sun);
  color: #191325;
}

/* ------------------------------------------------------------ posts */

.post {
  display: flex;
  gap: 13px;
  padding: 15px;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.09s, box-shadow 0.09s;
  position: relative;
}
@media (hover: hover) {
  .post:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-lg);
  }
}
.post.detail {
  cursor: default;
}
@media (hover: hover) {
  .post.detail:hover {
    transform: none;
    box-shadow: var(--shadow);
  }
}
.post.ai {
  background: var(--kinou-soft);
}
.post.ai::before {
  content: 'KINOU';
  position: absolute;
  top: -11px;
  right: 16px;
  background: var(--kinou);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 2px solid var(--line);
}
.post.focused {
  background: var(--sun);
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.post-main {
  flex: 1;
  min-width: 0;
}
.post-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14.5px;
}
.post-name {
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
@media (hover: hover) {
  .post-name:hover {
    text-decoration: underline wavy var(--brand);
    text-underline-offset: 3px;
  }
}
.post-handle,
.post-time {
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
}
.post-menu {
  margin-left: auto;
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  border: 2px solid transparent;
}
@media (hover: hover) {
  .post-menu:hover {
    background: var(--card-2);
    border-color: var(--line);
    color: var(--text);
  }
}

.post-text {
  font-size: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 4px;
  font-weight: 500;
}
.post.detail .post-text {
  font-size: 20px;
  line-height: 1.4;
  margin-top: 10px;
  font-weight: 600;
}
.post-text a.tag,
.post-text a.mention {
  color: var(--brand);
  font-weight: 800;
}
.post-text a.tag:hover,
@media (hover: hover) {
  .post-text a.mention:hover {
    background: var(--sun);
    color: #191325;
    border-radius: 5px;
  }
}
.post-text .mention.kinou-mention {
  color: var(--kinou);
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.vote {
  display: inline-flex;
  align-items: center;
  background: var(--card-2);
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--line);
}
.vote-btn {
  padding: 4px 9px;
  line-height: 0;
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: background 0.1s, color 0.1s;
}
@media (hover: hover) {
  .vote-btn:hover {
    color: var(--up);
    background: var(--up-soft);
  }
}
@media (hover: hover) {
  .vote-btn.down:hover {
    color: var(--down);
    background: var(--down-soft);
  }
}
.vote-btn.on {
  color: #fff;
  background: var(--up);
}
.vote-btn.down.on {
  color: #fff;
  background: var(--down);
}
.vote-score {
  font-size: 13.5px;
  font-weight: 900;
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  padding: 0 2px;
}
.vote-score.pos {
  color: var(--up);
}
.vote-score.neg {
  color: var(--down);
}

.action {
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
@media (hover: hover) {
  .action:hover {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: var(--line);
  }
}
@media (hover: hover) {
  .action.kinou:hover {
    background: var(--kinou);
    color: #fff;
  }
}
@media (hover: hover) {
  .action.danger:hover {
    background: var(--down-soft);
    color: var(--down);
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 900;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--muted);
  white-space: nowrap;
  border: 2px solid var(--line);
}
.pill.bot {
  background: var(--kinou);
  color: #fff;
}
.pill.admin {
  background: var(--sun);
  color: #191325;
}

.reply-context {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}
.reply-context a {
  color: var(--brand);
  font-weight: 800;
}

/* Décalage volontairement discret : la profondeur est plafonnée côté JS, et
   au-delà les réponses s'affichent à plat avec la mention « en réponse à ». */
.comment-indent {
  margin-left: 14px;
  padding-left: 12px;
  border-left: var(--bw) dashed color-mix(in srgb, var(--line) 35%, transparent);
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 13px;
}

/* ------------------------------------------------------------ « Kinou écrit… » */

.kinou-typing {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--kinou-soft);
  border: var(--bw) dashed var(--kinou);
  border-radius: var(--radius);
  font-size: 14.5px;
  color: var(--kinou);
  font-weight: 800;
}
.kinou-typing .avatar {
  color: #fff;
}
.dots span {
  display: inline-block;
  animation: blink 1.2s infinite;
}
.dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes blink {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  30% {
    opacity: 1;
  }
}

/* ------------------------------------------------------------ composer */

.composer {
  display: flex;
  gap: 12px;
  padding: 15px;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.composer.bare {
  border: none;
  box-shadow: none;
  padding: 0;
  background: none;
}
.composer-body {
  flex: 1;
  min-width: 0;
}
.composer textarea {
  width: 100%;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  resize: none;
  background: var(--card-2);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  padding: 12px 14px;
  min-height: 58px;
  max-height: 280px;
  overflow-y: auto;
}
.composer textarea:focus {
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.composer textarea::placeholder {
  color: var(--muted);
  font-weight: 600;
}
.composer-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 11px;
}
.composer-hint {
  margin-right: auto;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.counter {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.counter.warn {
  color: var(--gold);
}
.counter.over {
  color: var(--down);
}

/* ------------------------------------------------------------ pièces jointes */

.pieces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 11px;
}
.pieces.seule {
  grid-template-columns: 1fr;
}
.piece {
  display: block;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card-2);
  line-height: 0;
}
.piece.large {
  grid-column: 1 / -1;
}
.piece-image {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}
.pieces.seule .piece-image {
  object-fit: contain;
  background: var(--card-2);
}
.piece-video {
  width: 100%;
  max-height: 420px;
  display: block;
  background: #000;
}
.piece-audio {
  width: 100%;
  padding: 10px;
}
.piece-fichier {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  line-height: 1.3;
}
@media (hover: hover) {
  .piece-fichier:hover {
    background: var(--brand-soft);
  }
}
.piece-nom {
  font-weight: 800;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.piece-poids {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

/* Aperçus dans le compositeur, avant publication */
.jointes:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}
.jointe {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  max-width: 100%;
}
.jointe-vignette {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex: none;
  border: 2px solid var(--line);
}
.jointe-vignette.fichier {
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
}
.jointe-nom {
  font-size: 12.5px;
  font-weight: 700;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jointe-retirer {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rouge);
  color: #fff;
  border: 2px solid var(--line);
  flex: none;
}

/* ------------------------------------------------------------ cartes latérales */

.card {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.card-title {
  font-size: 18px;
  font-weight: 900;
  padding: 13px 16px 6px;
  letter-spacing: -0.3px;
}
.card-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px;
  transition: background 0.1s;
}
a.card-row:hover,
@media (hover: hover) {
  .card-row.clickable:hover {
    background: var(--brand-soft);
    cursor: pointer;
  }
}
.card-row-main {
  flex: 1;
  min-width: 0;
}
.card-row-title {
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-row-sub {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-more {
  display: block;
  width: 100%;
  padding: 12px 16px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 800;
  border-top: 2px dashed color-mix(in srgb, var(--line) 30%, transparent);
}
@media (hover: hover) {
  .card-more:hover {
    background: var(--sun);
    color: #191325;
  }
}
.card-body {
  padding: 6px 16px 16px;
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 600;
}

.search-box {
  position: sticky;
  top: 0;
  padding: 0 0 14px;
  z-index: 5;
}
.search-wrap {
  position: relative;
}
.search-input {
  width: 100%;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  padding: 12px 16px 12px 44px;
  outline: none;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.search-input:focus {
  box-shadow: var(--shadow);
}
.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  display: flex;
}

.kinou-status {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mint);
  flex: none;
  border: 2px solid var(--line);
}
.dot.local {
  background: var(--sun);
}

/* ------------------------------------------------------------ profil */

.profile-card {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.profile-banner {
  height: 155px;
  background: var(--brand);
  background-size: cover;
  background-position: center;
  border-bottom: var(--bw) solid var(--line);
}
.profile-head {
  padding: 0 18px 18px;
}
.profile-avatar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: -54px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.profile-name {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-handle {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}
.profile-bio {
  margin-top: 10px;
  font-size: 15.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-weight: 500;
}
.profile-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 13px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.profile-meta b {
  color: var(--text);
}
@media (hover: hover) {
  .profile-meta a:hover {
    text-decoration: underline;
  }
}

/* Ce que Kinou pense de la personne */
.kinou-verdict {
  margin-top: 15px;
  background: var(--kinou-soft);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  box-shadow: var(--shadow-sm);
}
.kinou-verdict-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 6px;
}
.kinou-verdict-label {
  font-size: 12px;
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 999px;
  border: 2px solid var(--line);
  color: #fff;
  margin-left: auto;
}
.kinou-verdict-note {
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
}
.kinou-gauge {
  margin-top: 10px;
  height: 12px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  overflow: hidden;
  position: relative;
}
.kinou-gauge-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: width 0.5s ease, left 0.5s ease;
}
.kinou-gauge-zero {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 2px;
  background: var(--line);
  opacity: 0.5;
}

/* ------------------------------------------------------------ courbe de réputation */

.courbe-bloc {
  margin-top: 14px;
}
.courbe-cadre {
  position: relative;
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 8px;
  touch-action: pan-y;
}
.courbe {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* Repères en retrait : la donnée passe devant. */
.courbe-grille {
  stroke: var(--line);
  stroke-width: 1;
  opacity: 0.16;
}
.courbe-zero {
  stroke: var(--line);
  stroke-width: 1.5;
  opacity: 0.45;
  stroke-dasharray: 5 4;
}
.courbe-axe {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.courbe-aire.haut {
  fill: var(--up);
  opacity: 0.18;
}
.courbe-aire.bas {
  fill: var(--down);
  opacity: 0.18;
}
.courbe-ligne {
  fill: none;
  stroke: var(--line);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.courbe-point {
  stroke: var(--line);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.courbe-point.positif {
  fill: var(--up);
}
.courbe-point.negatif {
  fill: var(--down);
}
.courbe-point.neutre {
  fill: var(--muted);
}
.courbe-viseur {
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: 0.5;
  pointer-events: none;
}
.courbe-halo {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.5;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.courbe-surface {
  cursor: crosshair;
}
.courbe-bulle {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 8px 11px;
  font-size: 12.5px;
  pointer-events: none;
  max-width: 230px;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
}
.courbe-bulle.visible {
  opacity: 1;
  visibility: visible;
}
.courbe-bulle-tete {
  font-size: 15px;
  font-weight: 900;
}
.courbe-bulle-tete span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.courbe-bulle-date {
  color: var(--muted);
  font-weight: 700;
  font-size: 11.5px;
}
.courbe-bulle-label {
  margin-top: 5px;
  font-weight: 800;
}
.courbe-bulle-note {
  margin-top: 3px;
  font-style: italic;
  font-weight: 600;
  color: var(--muted);
}

/* Version lisible sans survol : les derniers mouvements en clair. */
.courbe-liste {
  margin-top: 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.courbe-ligne-liste {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
}
.courbe-delta {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid var(--line);
  flex: none;
  font-size: 12px;
}
.courbe-delta.positif {
  background: var(--up-soft);
  color: var(--up);
}
.courbe-delta.negatif {
  background: var(--down-soft);
  color: var(--down);
}
.courbe-delta.neutre {
  background: var(--card-2);
  color: var(--muted);
}
.courbe-liste-label {
  font-weight: 800;
}
.courbe-liste-note {
  color: var(--muted);
  font-weight: 600;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.courbe-liste-date {
  margin-left: auto;
  color: var(--muted);
  font-weight: 700;
  font-size: 11.5px;
  white-space: nowrap;
  flex: none;
}

.pill.roi {
  background: var(--sun);
  color: #191325;
}

.karma-bar {
  margin-top: 14px;
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.karma-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 9px;
}
.karma-track {
  height: 13px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.karma-fill {
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--brand) 0 9px, var(--rose) 9px 18px);
  transition: width 0.5s ease;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
  padding: 16px;
}
.badge-card {
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.badge-card.locked {
  opacity: 0.4;
  filter: grayscale(1);
  box-shadow: none;
}
.badge-emoji {
  font-size: 25px;
  line-height: 1;
}
.badge-name {
  font-weight: 900;
  font-size: 13.5px;
}
.badge-desc {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
  font-weight: 600;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 11px;
  padding: 16px;
}
.stat {
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 10px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-value {
  font-size: 21px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 700;
}

/* ------------------------------------------------------------ notifications */

.notif {
  display: flex;
  gap: 13px;
  padding: 14px 16px;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.09s;
}
@media (hover: hover) {
  .notif:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow);
  }
}
.notif.unread {
  background: var(--sun);
}
.notif-icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--brand);
  color: #fff;
}
.notif-icon.kinou {
  background: var(--kinou);
}
.notif-icon.badge {
  background: var(--gold);
}
.notif-icon.milestone {
  background: var(--mint);
}
.notif-text {
  font-size: 14.5px;
  min-width: 0;
  font-weight: 600;
}
.notif-quote {
  color: var(--muted);
  font-size: 14px;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ messages privés */

.dm-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* dvh suit la barre d'adresse mobile, contrairement à vh */
  height: calc(100dvh - 28px);
}
.dm-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: 0;
}
.bubble {
  max-width: 80%;
  padding: 11px 15px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  align-self: flex-start;
  background: var(--card-2);
  border: 2px solid var(--line);
  border-bottom-left-radius: 6px;
}
.bubble.mine {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 6px;
}
.bubble.bot {
  background: var(--kinou-soft);
}
.bubble-time {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
  text-align: right;
  font-weight: 700;
}
.dm-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex: none;
}
.dm-form textarea {
  flex: 1;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: 20px;
  padding: 12px 16px;
  resize: none;
  outline: none;
  max-height: 130px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------ formulaires */

.field {
  margin-bottom: 15px;
}
.field label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  font-weight: 600;
  transition: box-shadow 0.1s;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  box-shadow: var(--shadow-sm);
}
.field textarea {
  resize: vertical;
  min-height: 84px;
}
.field-hint {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 600;
}

.form-error {
  background: var(--down-soft);
  color: var(--down);
  border: var(--bw) solid var(--down);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 15px;
  font-weight: 800;
}
.form-ok {
  background: var(--up-soft);
  color: var(--up);
  border: var(--bw) solid var(--up);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 15px;
  font-weight: 800;
}

.emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.emoji-opt {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 21px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  background: var(--card-2);
  transition: transform 0.08s;
}
@media (hover: hover) {
  .emoji-opt:hover {
    transform: translate(-1px, -1px);
  }
}
.emoji-opt.on {
  background: var(--sun);
  box-shadow: var(--shadow-sm);
}
.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.color-opt {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--line);
  transition: transform 0.08s;
}
@media (hover: hover) {
  .color-opt:hover {
    transform: scale(1.1);
  }
}
.color-opt.on {
  box-shadow: 0 0 0 3px var(--sun), var(--shadow-sm);
}

/* Zone d'envoi d'image */
.dropzone {
  border: var(--bw) dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: background 0.12s;
}
@media (hover: hover) {
  .dropzone:hover {
    background: var(--brand-soft);
  }
}
.dropzone-preview {
  width: 66px;
  height: 66px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--card);
  background-size: cover;
  background-position: center;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 26px;
  overflow: hidden;
}
.dropzone-preview.wide {
  width: 132px;
  height: 52px;
}
.dropzone-text {
  flex: 1;
  min-width: 0;
}
.dropzone-title {
  font-weight: 800;
  font-size: 14px;
}
.dropzone-sub {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

/* ------------------------------------------------------------ recadrage */

.cropper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cropper-frame {
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card-2);
  cursor: grab;
  touch-action: none;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}
.cropper-frame:active {
  cursor: grabbing;
}
.cropper-frame canvas {
  display: block;
  pointer-events: none;
}
.cropper-hint {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  font-weight: 600;
}
.cropper-zoom-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font-weight: 800;
  font-size: 13px;
}
.cropper-zoom {
  flex: 1;
  accent-color: var(--brand);
}

/* ------------------------------------------------------------ authentification */

.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.auth-hero {
  background: var(--brand);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px;
  gap: 18px;
  border-right: var(--bw) solid var(--line);
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 2px, transparent 2px);
  background-size: 26px 26px;
}
.auth-hero h1 {
  font-size: 56px;
  line-height: 1;
  letter-spacing: -2px;
  font-weight: 900;
  text-shadow: 4px 4px 0 var(--line);
}
.auth-hero p {
  font-size: 18px;
  max-width: 32ch;
  font-weight: 600;
}
.auth-quote {
  margin-top: 14px;
  background: var(--card);
  color: var(--text);
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 15px;
  font-style: italic;
  font-weight: 600;
  max-width: 42ch;
  transform: rotate(-1.2deg);
}
.auth-quote small {
  display: block;
  font-style: normal;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 700;
}
.auth-panel {
  display: grid;
  place-content: center;
  padding: 40px 24px;
}
.auth-card {
  width: min(400px, 100%);
}
.auth-card h2 {
  font-size: 30px;
  letter-spacing: -0.8px;
  margin-bottom: 6px;
  font-weight: 900;
}
.auth-card > p {
  color: var(--muted);
  margin-bottom: 22px;
  font-size: 14.5px;
  font-weight: 600;
}
.switch-auth {
  text-align: center;
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.switch-auth button {
  color: var(--brand);
  font-weight: 900;
}
@media (hover: hover) {
  .switch-auth button:hover {
    text-decoration: underline;
  }
}

/* ------------------------------------------------------------ panneau admin */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 16px;
}
.admin-tile {
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}
.admin-tile-value {
  font-size: 26px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.admin-tile-label {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
}
.admin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 2px dashed color-mix(in srgb, var(--line) 22%, transparent);
  flex-wrap: wrap;
}
.admin-row:last-child {
  border-bottom: none;
}
.admin-row-main {
  flex: 1;
  min-width: 160px;
}
.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.relation-score {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 46px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 2px solid var(--line);
  color: #fff;
  font-size: 13px;
}

/* ------------------------------------------------------------ divers */

.empty {
  padding: 48px 28px;
  text-align: center;
  color: var(--muted);
  background: var(--card);
  border: var(--bw) dashed var(--line);
  border-radius: var(--radius);
  font-weight: 600;
}
.empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--brand);
}
.empty-title {
  font-size: 19px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 6px;
}

.loading {
  padding: 40px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}
.spinner {
  width: 30px;
  height: 30px;
  border: 3.5px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.section-title {
  font-size: 18px;
  font-weight: 900;
  padding: 4px 2px;
}
.panel {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.rank {
  font-size: 15px;
  font-weight: 900;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 2px solid var(--line);
  background: var(--card-2);
  color: var(--text);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.rank.rank-1 {
  background: var(--sun);
}
.rank.rank-2 {
  background: #d8d3e6;
}
.rank.rank-3 {
  background: #f0b483;
}

.toasts {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
  pointer-events: none;
  width: max-content;
  max-width: min(92vw, 460px);
}
.toast {
  background: var(--card);
  color: var(--text);
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 800;
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow);
  animation: rise 0.22s ease;
}
.toast.err {
  background: var(--rouge);
  color: #fff;
}
.toast.kinou {
  background: var(--kinou);
  color: #fff;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--line) 55%, transparent);
  display: grid;
  place-items: center;
  z-index: 500;
  padding: 18px;
  animation: fade 0.15s ease;
  overflow-y: auto;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.modal {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: min(560px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  margin: auto;
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: var(--bw) solid var(--line);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
}
.modal-title {
  font-weight: 900;
  font-size: 18px;
}
.modal-body {
  padding: 16px;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 16px 16px;
}

.mobile-bar {
  display: none;
}
.mobile-fab {
  display: none;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .shell {
    grid-template-columns: var(--nav-w) minmax(0, var(--main-w));
  }
  .side {
    display: none;
  }
}

@media (max-width: 1000px) {
  :root {
    --nav-w: 82px;
  }
  .nav-link span.label,
  .nav-me-text,
  .brand span {
    display: none;
  }
  .nav-cta {
    padding: 14px 0;
    text-align: center;
  }
  .nav-cta .label-long {
    display: none;
  }
  .nav-cta .cta-icon {
    display: inline-flex;
  }
  .nav-link {
    justify-content: center;
    padding: 12px;
  }
  .nav-badge {
    left: auto;
    right: 4px;
    top: 0;
  }
  .nav-me {
    justify-content: center;
  }
  .auth {
    grid-template-columns: 1fr;
  }
  .auth-hero {
    padding: 40px 28px;
    border-right: none;
    border-bottom: var(--bw) solid var(--line);
  }
  .auth-hero h1 {
    font-size: 40px;
  }
}

@media (max-width: 700px) {
  body {
    /* place pour la barre du bas, encoches comprises */
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
    font-size: 15px;
  }
  .shell {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 11px;
    gap: 0;
  }
  .nav {
    display: none;
  }
  .main {
    padding: 11px 0 24px;
    gap: 12px;
  }
  /* Seul le compositeur intégré au fil disparaît : celui de la fenêtre
     de publication doit évidemment rester utilisable. */
  .composer.inline {
    display: none;
  }
  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    /* Ancrage simple sur le bas de la fenêtre : c'est le navigateur qui gère
       le déplacement, d'un seul bloc. Toute tentative de repositionnement en
       JavaScript décale le cadre sans son contenu. */
    bottom: 0;
    height: 62px;
    background: var(--card);
    border-top: var(--bw) solid var(--line);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    color: var(--muted);
  }
  .mobile-tab.active {
    color: var(--brand);
  }
  .mobile-tab.active::after {
    content: '';
    position: absolute;
    bottom: 8px;
    width: 22px;
    height: 4px;
    border-radius: 2px;
    background: var(--brand);
  }
  .mobile-tab .nav-badge {
    left: auto;
    right: 22%;
    top: 7px;
  }
  .mobile-fab {
    display: grid;
    place-items: center;
    position: fixed;
    right: 16px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--sun);
    color: #191325;
    border: var(--bw) solid var(--line);
    box-shadow: var(--shadow);
    z-index: 100;
  }
  .mobile-fab:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--shadow-c);
  }
  /* La conversation doit tenir au-dessus de la barre du bas, sinon le champ
     d'envoi se retrouve caché derrière. */
  .dm-layout {
    height: calc(100dvh - 62px - env(safe-area-inset-bottom) - 22px);
  }
  html.clavier-ouvert .dm-layout {
    height: calc(100dvh - 22px);
  }
  .post.detail .post-text {
    font-size: 18px;
  }
  /* Décalage encore plus discret sur petit écran : chaque pixel compte. */
  .comment-indent {
    margin-left: 6px;
    padding-left: 8px;
    gap: 11px;
    margin-top: 11px;
  }
  .profile-avatar-row {
    margin-top: -46px;
  }
  .avatar.lg {
    width: 88px;
    height: 88px;
    font-size: 40px;
  }
  .auth-hero h1 {
    font-size: 34px;
  }
  .auth-hero {
    padding: 30px 22px;
  }
  .badge-grid {
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
    gap: 10px;
  }
  .modal-backdrop {
    padding: 10px;
    align-items: start;
  }
  .modal {
    /* Quand le clavier virtuel s'ouvre, la fenêtre doit rétrécir et non
       passer sous le clavier. */
    max-height: calc(100dvh - 20px);
    margin-top: 8px;
  }
  .toasts {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* Clavier virtuel ouvert : la barre du bas et le bouton flottant s'effacent
   pour laisser toute la place au champ de saisie. Détecté en JavaScript via
   visualViewport, bien plus fiable qu'un seuil de hauteur en CSS. */
html.clavier-ouvert .mobile-bar,
html.clavier-ouvert .mobile-fab {
  display: none;
}
html.clavier-ouvert body {
  padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Kinou est en train d'écrire : le bouton cède la place à cet indicateur. */
.action.kinou-attente {
  color: var(--kinou);
  background: var(--kinou-soft);
  border-color: var(--line);
  cursor: default;
  font-weight: 800;
}
.action.kinou-attente .dots {
  margin-left: -2px;
}

/* ============================================================
   CASINO
   Tables de jeu, pupitre de mise, boutique et effets.
   ============================================================ */

.casino-tete .solde {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sun);
  color: #191325;
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  font-weight: 900;
  box-shadow: var(--shadow-sm);
}
.solde-valeur {
  font-variant-numeric: tabular-nums;
  font-size: 18px;
}
.solde-unite {
  font-size: 12px;
  opacity: 0.75;
}
.solde.pulse {
  animation: solde-pop 0.45s ease;
}
@keyframes solde-pop {
  40% {
    transform: scale(1.14) rotate(-2deg);
  }
}
.solde-mini {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.plateau {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.scene-casino {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-jeu {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.jeu-infos {
  text-align: center;
  min-height: 44px;
}
.jeu-consigne {
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  max-width: 46ch;
  margin: 0 auto;
}
.jeu-detail {
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
.jauge-mult {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
.mult-actuel {
  font-size: 30px;
  font-weight: 900;
  color: var(--up);
  font-variant-numeric: tabular-nums;
}
.mult-suivant {
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

/* ------------------------------------------------ pupitre de mise */

.pupitre {
  display: flex;
  flex-direction: column;
  gap: 11px;
  border-top: 2px dashed color-mix(in srgb, var(--line) 25%, transparent);
  padding-top: 14px;
}
.pupitre-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pupitre-ligne label {
  font-weight: 900;
  font-size: 14px;
}
.champ-mise {
  flex: 1;
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-weight: 900;
  font-size: 17px;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.champ-mise:focus {
  box-shadow: var(--shadow-sm);
}
.mises-rapides {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.mise-puce {
  border: 2px solid var(--line);
  background: var(--card-2);
  border-radius: 999px;
  padding: 5px 13px;
  font-weight: 800;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.mise-puce.tapis {
  background: var(--rouge);
  color: #fff;
}
.commandes {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.gros-bouton {
  flex: 1;
  min-width: 128px;
  font-size: 16px;
  padding: 13px;
}
.select-mines {
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  padding: 10px 14px;
  font-weight: 800;
  outline: none;
}

/* ------------------------------------------------ roue */

.roue-cadre {
  position: relative;
  width: min(300px, 82vw);
}
.roue-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(4px 4px 0 var(--shadow-c));
}
.roue-disque {
  transform-origin: 50% 50%;
}
.roue-label {
  font-size: 11px;
  font-weight: 900;
  fill: #191325;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 2.5px;
}
.roue-fleche {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--line);
  filter: drop-shadow(0 2px 0 var(--sun));
}
.roue-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.roue-puce {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.roue-puce i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1.5px solid var(--line);
  display: inline-block;
}

/* ------------------------------------------------ mines */

.grille-mines {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: min(340px, 92vw);
}
.case-mine {
  aspect-ratio: 1;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--brand);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform 0.09s, background 0.15s;
}
.case-mine:disabled {
  cursor: default;
}
.case-mine.ouverte {
  background: var(--up);
  animation: case-ouvre 0.28s ease;
}
.case-mine.bombe {
  background: var(--down);
  animation: case-boum 0.34s ease;
}
.case-mine.fatale {
  box-shadow: 0 0 0 4px var(--sun), var(--shadow-sm);
}
@keyframes case-ouvre {
  50% {
    transform: scale(1.16) rotate(4deg);
  }
}
@keyframes case-boum {
  30% {
    transform: scale(1.3);
  }
  60% {
    transform: scale(0.92);
  }
}

/* ------------------------------------------------ tour */

.echelle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(340px, 92vw);
}
.etage {
  display: flex;
  gap: 6px;
  align-items: center;
  opacity: 0.45;
  transition: opacity 0.2s;
  position: relative;
}
.etage.actif {
  opacity: 1;
}
.etage.actif .dalle {
  box-shadow: var(--shadow-sm);
}
.dalle {
  flex: 1;
  height: 42px;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform 0.09s, background 0.15s;
}
.dalle.sure {
  background: var(--up);
  animation: case-ouvre 0.28s ease;
}
.dalle.piegee {
  background: var(--down);
}
.dalle.piegee.revelee {
  opacity: 0.55;
}
.dalle.fatale {
  animation: case-boum 0.34s ease;
  box-shadow: 0 0 0 4px var(--sun);
}
.etage-mult {
  width: 52px;
  text-align: right;
  font-weight: 900;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.etage.actif .etage-mult {
  color: var(--up);
}

/* ------------------------------------------------ blackjack */

.table-bj {
  gap: 8px;
}
.cote-table {
  width: 100%;
  text-align: center;
}
.cote-titre {
  font-weight: 900;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 7px;
}
.score-main {
  background: var(--card-2);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 1px 10px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.main-cartes {
  display: flex;
  gap: 7px;
  justify-content: center;
  min-height: 92px;
  flex-wrap: wrap;
}
.carte {
  width: 62px;
  height: 88px;
  border: var(--bw) solid var(--line);
  border-radius: 9px;
  background: #fffdf8;
  color: #191325;
  position: relative;
  box-shadow: var(--shadow-sm);
  animation: carte-arrive 0.3s ease;
  flex: none;
}
.carte.rouge {
  color: #e8383d;
}
.carte.dos {
  background: repeating-linear-gradient(45deg, var(--brand) 0 7px, var(--kinou-soft) 7px 14px);
}
.carte-haut,
.carte-bas {
  position: absolute;
  font-weight: 900;
  font-size: 15px;
}
.carte-haut {
  top: 5px;
  left: 7px;
}
.carte-bas {
  bottom: 5px;
  right: 7px;
  transform: rotate(180deg);
}
.carte-couleur {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 30px;
}
@keyframes carte-arrive {
  from {
    transform: translateY(-26px) rotate(-9deg);
    opacity: 0;
  }
}
.tapis-ligne {
  width: 100%;
  height: 2px;
  border-top: 2px dashed color-mix(in srgb, var(--line) 25%, transparent);
  margin: 4px 0;
}

/* ------------------------------------------------ effets */

.bandeau {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px 26px;
  text-align: center;
  z-index: 20;
  pointer-events: none;
  animation: bandeau-entre 0.34s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.bandeau.sortie {
  animation: bandeau-sort 0.4s ease forwards;
}
.bandeau-titre {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.bandeau-detail {
  font-weight: 800;
  color: var(--muted);
  margin-top: 3px;
}
.bandeau.gain {
  background: var(--up-soft);
}
.bandeau.gain .bandeau-titre {
  color: var(--up);
}
.bandeau.perte {
  background: var(--down-soft);
}
.bandeau.perte .bandeau-titre {
  color: var(--down);
}
.bandeau.jackpot {
  background: var(--sun);
  animation: bandeau-entre 0.34s cubic-bezier(0.2, 1.5, 0.4, 1), jackpot-vibre 0.5s 0.3s ease infinite;
}
@keyframes bandeau-entre {
  from {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
  }
}
@keyframes bandeau-sort {
  to {
    transform: translate(-50%, -140%) scale(0.9);
    opacity: 0;
  }
}
@keyframes jackpot-vibre {
  25% {
    transform: translate(-50%, -50%) rotate(-1.6deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(1.6deg);
  }
}

.piece-volante {
  position: fixed;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffe57a, var(--gold));
  border: 2px solid var(--line);
  pointer-events: none;
  z-index: 900;
  animation: piece-vole 1s ease-out forwards;
}
@keyframes piece-vole {
  0% {
    transform: translate(0, 0) scale(0.4);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), calc(var(--dy) + 220px)) scale(1) rotate(400deg);
    opacity: 0;
  }
}

.flash-ecran {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 850;
  animation: flash-sort 0.7s ease forwards;
}
@keyframes flash-sort {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}

.secousse {
  animation: secousse 0.42s ease;
}
.secousse-forte {
  animation: secousse 0.6s ease;
}
@keyframes secousse {
  10%,
  50%,
  90% {
    transform: translateX(-7px);
  }
  30%,
  70% {
    transform: translateX(7px);
  }
}

/* ------------------------------------------------ boutique */

.grille-boutique {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 12px;
  padding: 16px;
}
.article {
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.article-tete {
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  border: 2px solid var(--line);
  flex: none;
}
.article-famille {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.article-nom {
  font-weight: 900;
  font-size: 15px;
}
.article-desc {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  flex: 1;
}

.gains-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gain-ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 13.5px;
}
.gain-chiffre {
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  font-weight: 900;
}

/* ------------------------------------------------ cosmétiques achetés */

.avatar.cadre-or {
  box-shadow: 0 0 0 3px var(--gold);
}
.avatar.cadre-neon {
  /* --cadre est pose par le profil ; sans choix, on retombe sur le violet. */
  box-shadow: 0 0 0 3px var(--cadre, var(--brand));
  animation: neon-pulse 1.6s ease-in-out infinite;
}
@keyframes neon-pulse {
  50% {
    box-shadow: 0 0 0 3px var(--cadre, var(--rose)), 0 0 14px 3px var(--cadre, var(--rose));
  }
}
.profile-titre {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--brand);
  margin-top: 2px;
}

@media (max-width: 700px) {
  .grille-mines,
  .echelle {
    width: 100%;
  }
  .carte {
    width: 52px;
    height: 75px;
  }
  .bandeau-titre {
    font-size: 21px;
  }
  .gros-bouton {
    min-width: 100px;
    font-size: 15px;
  }
}

/* ------------------------------------------------ plinko */
.plinko-cadre {
  width: min(340px, 92vw);
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: none;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.plinko-svg {
  display: block;
  width: 100%;
  height: auto;
}
.plinko-picot {
  fill: var(--muted);
  opacity: 0.55;
}
.plinko-bille {
  /* Aucune transition : la position vient de la simulation, image par image. */
  fill: var(--sun);
  stroke: var(--line);
  stroke-width: 2;
}
.plinko-bille.posee {
  transition: opacity 0.25s, r 0.25s;
  opacity: 0;
}
.plinko-picot.touche {
  fill: #fff;
  opacity: 1;
}
.plinko-cases {
  width: min(340px, 92vw);
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 2px;
  border: var(--bw) solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 4px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.plinko-case {
  font-size: 8.5px;
  font-weight: 900;
  text-align: center;
  padding: 5px 0;
  border-radius: 5px;
  color: #191325;
  border: 1.5px solid var(--line);
  transition: transform 0.15s;
}
.plinko-case.touchee {
  transform: translateY(4px) scale(1.22);
  box-shadow: 0 0 0 3px var(--sun);
  position: relative;
  z-index: 2;
}

.pill.epingle {
  background: var(--rose);
  color: #fff;
}
.post.epingle-actif {
  box-shadow: var(--shadow), 0 0 0 3px var(--rose);
}

/* ============================================================
   LA MINE
   Décor de plaine, bloc texturé en pixels, éclats et fissures.
   ============================================================ */

.mine-plateau {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bloc-entete {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bloc-nom {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
.bloc-titre {
  font-weight: 900;
  font-size: 18px;
}
.bloc-rarete {
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 2px solid var(--line);
  color: #191325;
}
.pv-piste {
  flex: 1;
  min-width: 160px;
  height: 22px;
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  position: relative;
  overflow: hidden;
}
.pv-remplissage {
  height: 100%;
  transition: width 0.12s linear, background 0.3s;
}
.pv-texte {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ------------------------------------------------ décor */

.mine-scene {
  position: relative;
  height: 320px;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  user-select: none;
  touch-action: manipulation;
}
.mine-decor {
  position: absolute;
  inset: 0;
  background: linear-gradient(#8fd6ff 0%, #b9e8ff 52%, #d9f2ff 100%);
}
[data-theme='dark'] .mine-decor {
  background: linear-gradient(#1b2a52 0%, #2c3f73 55%, #3a5188 100%);
}
.mine-soleil {
  position: absolute;
  top: 22px;
  right: 34px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffe27a;
  border: 3px solid var(--line);
  box-shadow: 0 0 26px 8px rgba(255, 226, 122, 0.6);
}
.mine-nuage {
  position: absolute;
  width: 78px;
  height: 26px;
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 999px;
  animation: nuage-derive 26s linear infinite;
  opacity: 0.9;
}
.mine-nuage.petit {
  width: 52px;
  height: 20px;
}
.mine-nuage::after {
  content: '';
  position: absolute;
  top: -13px;
  left: 20px;
  width: 34px;
  height: 26px;
  background: #fff;
  border: 3px solid var(--line);
  border-bottom: none;
  border-radius: 999px 999px 0 0;
}
@keyframes nuage-derive {
  from {
    transform: translateX(-120px);
  }
  to {
    transform: translateX(420px);
  }
}
.mine-colline {
  position: absolute;
  bottom: 58px;
  border-radius: 50% 50% 0 0;
  border: 3px solid var(--line);
  border-bottom: none;
}
.mine-colline.loin {
  left: -8%;
  width: 62%;
  height: 96px;
  background: #6dbf5b;
}
.mine-colline.proche {
  right: -6%;
  width: 56%;
  height: 74px;
  background: #58a94a;
}
.mine-herbe {
  position: absolute;
  bottom: 52px;
  left: 0;
  right: 0;
  height: 14px;
  background: #6dbf5b;
  border-top: 3px solid var(--line);
}
.mine-sol {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: repeating-linear-gradient(90deg, #8b5a3c 0 26px, #7d5136 26px 52px);
  border-top: 3px solid var(--line);
}

/* ------------------------------------------------ le bloc */

.bloc {
  position: relative;
  width: 148px;
  height: 148px;
  margin-bottom: 26px;
  background: var(--bloc, #8d8d94);
  border: 4px solid var(--line);
  border-radius: 10px;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.32), inset 0 -14px 0 rgba(0, 0, 0, 0.22), inset 0 8px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.06s;
  z-index: 2;
  padding: 0;
  overflow: hidden;
}
.bloc.frappe {
  animation: bloc-coup 0.14s ease;
}
.bloc.explose {
  animation: bloc-explose 0.42s ease forwards;
}
@keyframes bloc-coup {
  50% {
    transform: scale(0.9) rotate(-2deg);
  }
}
@keyframes bloc-explose {
  40% {
    transform: scale(1.28) rotate(6deg);
    filter: brightness(2.2);
  }
  100% {
    transform: scale(0.2) rotate(-16deg);
    opacity: 0;
  }
}
.bloc-pixels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.bloc-pixels i {
  display: block;
}

/* Cinq paliers de fissures, tracés en dégradés : aucun fichier image. */
.bloc-fissures {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(115deg, transparent 46%, rgba(0, 0, 0, 0.85) 47%, transparent 49%),
    linear-gradient(65deg, transparent 58%, rgba(0, 0, 0, 0.7) 59%, transparent 61%),
    linear-gradient(160deg, transparent 30%, rgba(0, 0, 0, 0.6) 31%, transparent 33%),
    linear-gradient(20deg, transparent 70%, rgba(0, 0, 0, 0.75) 71%, transparent 73%);
  background-size: 100% 100%;
}
.bloc-fissures[data-palier='1'] {
  opacity: 0.35;
}
.bloc-fissures[data-palier='2'] {
  opacity: 0.6;
}
.bloc-fissures[data-palier='3'] {
  opacity: 0.85;
}
.bloc-fissures[data-palier='4'] {
  opacity: 1;
  filter: contrast(1.6);
}

/* ------------------------------------------------ effets */

.eclat {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--line);
  border-radius: 2px;
  pointer-events: none;
  z-index: 4;
  animation: eclat-vole 0.5s ease-out forwards;
}
@keyframes eclat-vole {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py) + 60px)) scale(0.3) rotate(220deg);
    opacity: 0;
  }
}

.degat-flottant {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 17px;
  color: #fff;
  text-shadow: 2px 2px 0 var(--line);
  pointer-events: none;
  z-index: 5;
  animation: degat-monte 0.85s ease-out forwards;
}
.degat-flottant.gain {
  font-size: 26px;
  color: var(--sun);
}
@keyframes degat-monte {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.7);
  }
  25% {
    transform: translate(-50%, -80%) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -190%) scale(0.9);
  }
}

.combo {
  text-align: center;
  font-weight: 900;
  font-size: 15px;
  color: var(--brand);
  min-height: 20px;
}
.combo.chaud {
  color: var(--rouge);
  animation: combo-vibre 0.35s ease infinite;
}
@keyframes combo-vibre {
  50% {
    transform: scale(1.14) rotate(-2deg);
  }
}

.annonce-bloc {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  text-align: center;
  z-index: 6;
  box-shadow: var(--shadow);
  animation: annonce-entre 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.annonce-titre {
  font-weight: 900;
  font-size: 17px;
}
.annonce-gain {
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
}
@keyframes annonce-entre {
  from {
    transform: translateX(-50%) scale(0.5);
    opacity: 0;
  }
}

.mine-resume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 9px;
}
.mine-stat {
  background: var(--card-2);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px;
  text-align: center;
}
.mine-stat b {
  display: block;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.mine-stat span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 700px) {
  .mine-scene {
    height: 270px;
  }
  .bloc {
    width: 124px;
    height: 124px;
  }
}


/* ============================================================
   TIROIR DES MINI-JEUX
   Bouton en bas à gauche, panneau qui glisse depuis le bord.
   ============================================================ */

/* Declencheur du tiroir, integre a la barre de navigation. */
.tiroir-declencheur {
  font: inherit;
  cursor: pointer;
}
.mobile-tab.tiroir-declencheur {
  background: none;
  border: none;
  color: inherit;
}
.tiroir-declencheur.active {
  color: var(--mint);
}

.tiroir-voile {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--line) 50%, transparent);
  z-index: 215;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s;
}
.tiroir-voile.visible {
  opacity: 1;
  visibility: visible;
}

.tiroir {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(310px, 84vw);
  background: var(--card);
  border-right: var(--bw) solid var(--line);
  box-shadow: var(--shadow-lg);
  z-index: 220;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transform: translateX(-104%);
  transition: transform 0.22s cubic-bezier(0.3, 1.2, 0.5, 1);
  overflow-y: auto;
}
.tiroir.ouvert {
  transform: translateX(0);
}

.tiroir-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.tiroir-titre {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.4px;
}

.tiroir-lien {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  box-shadow: var(--shadow-sm);
  transition: transform 0.09s, background 0.12s;
}
@media (hover: hover) {
  .tiroir-lien:hover {
    transform: translate(-2px, -2px);
    background: var(--brand-soft);
  }
}
.tiroir-lien.actif {
  background: var(--sun);
}
.tiroir-icone {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  border: 2px solid var(--line);
  flex: none;
}
.tiroir-lien.actif .tiroir-icone {
  background: var(--line);
}
.tiroir-texte {
  min-width: 0;
}
.tiroir-texte b {
  display: block;
  font-weight: 900;
  font-size: 15px;
}
.tiroir-texte small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.tiroir-solde {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sun);
  color: #191325;
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  padding: 9px 15px;
  font-weight: 900;
  box-shadow: var(--shadow-sm);
}
.tiroir-solde b {
  font-variant-numeric: tabular-nums;
  font-size: 17px;
}
.tiroir-solde span {
  font-size: 12px;
  opacity: 0.75;
}

@media (max-width: 700px) {
}

/* ============================================================
   CARTES À COLLECTIONNER
   Carte façon Pokémon, ouverture de booster, marché.
   ============================================================ */

/*
 * Un seul gabarit de carte pour tout le site.
 *
 * La boite sert de conteneur de requete ; la carte fixe sa police a un
 * pourcentage de la largeur du conteneur, et tout l'interieur est en `em`.
 * Une vignette et une carte plein ecran ont donc exactement la meme mise en
 * page, aux memes proportions, avec les memes informations lisibles.
 */
.carte-boite {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 5 / 7.6;
  width: 100%;
}
.carte-boite.grande {
  width: min(320px, 76vw);
  margin-inline: auto;
}

.carte-tcg {
  font-size: 7cqw;
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(160deg, var(--carte) 0%, color-mix(in srgb, var(--carte) 55%, #000) 100%);
  border: 0.28em solid var(--line);
  border-radius: 1.5em;
  padding: 0.85em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  color: #fff;
}

.carte-boite.cliquable {
  cursor: pointer;
  transition: transform 0.12s;
}
@media (hover: hover) {
  .carte-boite.cliquable:hover {
    transform: translateY(-5px) scale(1.03);
  }
}
.carte-boite.choisie .carte-tcg {
  outline: 0.4em solid var(--sun);
  outline-offset: 0.15em;
}

.carte-nom {
  font-weight: 900;
  font-size: 1.05em;
  text-align: center;
  text-shadow: 0.06em 0.06em 0 rgba(0, 0, 0, 0.5);
  line-height: 1.15;
  height: 2.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.carte-cadre {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1;
  border: 0.24em solid var(--line);
  border-radius: 0.7em;
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.carte-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.carte-image.vide {
  display: grid;
  place-items: center;
  opacity: 0.55;
}
.carte-image.vide svg {
  width: 40%;
  height: 40%;
}
.carte-desc {
  flex: 1;
  min-height: 0;
  font-size: 0.72em;
  line-height: 1.3;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.55em;
  padding: 0.4em 0.6em;
  font-weight: 600;
  overflow: hidden;
}
.carte-pied {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  font-size: 0.7em;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.carte-rarete {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carte-serie {
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.42);
  border-radius: 999px;
  padding: 0.1em 0.7em;
  font-variant-numeric: tabular-nums;
}
.carte-nombre {
  position: absolute;
  top: 0.35em;
  right: 0.35em;
  background: var(--line);
  color: #fff;
  border-radius: 999px;
  padding: 0.15em 0.6em;
  font-size: 11px;
  font-weight: 900;
  z-index: 3;
}

/* Carte non possedee : silhouette grisee, facon page de collection. */
.carte-boite.manquante .carte-tcg {
  filter: grayscale(1) brightness(0.55) contrast(0.9);
  box-shadow: none;
}
.carte-boite.manquante .carte-image {
  opacity: 0.25;
}
.carte-voile-manquante {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.6em;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.35);
}

/* Reflet qui balaie la carte, à partir du palier « peu commune ». */
.carte-reflet {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
  animation: reflet-balaie 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes reflet-balaie {
  0%,
  62% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(130%);
  }
}

/* Halos selon la rareté : discret en bas, franchement voyant en haut. */
.carte-boite.rarete-rare .carte-tcg {
  box-shadow: var(--shadow-sm), 0 0 12px color-mix(in srgb, var(--carte) 60%, transparent);
}
.carte-boite.rarete-epique .carte-tcg {
  box-shadow: var(--shadow-sm), 0 0 18px color-mix(in srgb, var(--carte) 75%, transparent);
}
.carte-boite.rarete-legendaire .carte-tcg {
  box-shadow: var(--shadow-sm), 0 0 26px var(--carte);
  animation: carte-respire 2.4s ease-in-out infinite;
}
.carte-boite.rarete-mythique .carte-tcg {
  box-shadow: var(--shadow-sm), 0 0 34px var(--carte), 0 0 60px color-mix(in srgb, var(--carte) 50%, transparent);
  animation: carte-respire 1.5s ease-in-out infinite;
}
.carte-boite.manquante .carte-tcg {
  animation: none;
}
@keyframes carte-respire {
  50% {
    filter: brightness(1.22) saturate(1.2);
  }
}

.carte-orbite {
  position: absolute;
  inset: -14%;
  border: 2px solid color-mix(in srgb, var(--carte) 70%, transparent);
  border-radius: 50%;
  border-top-color: transparent;
  border-left-color: transparent;
  animation: orbite-tourne linear infinite;
  pointer-events: none;
}
@keyframes orbite-tourne {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------ carte en grand */

.carte-plein-ecran {
  position: fixed;
  inset: 0;
  z-index: 600;
  /* Halo de la couleur de la carte, pose sur un fond plein. */
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--carte, #7c5cff) 30%, transparent), transparent 60%),
    color-mix(in srgb, var(--line) 94%, #000);
  display: grid;
  place-items: center;
  gap: 18px;
  grid-auto-flow: row;
  align-content: center;
  padding: 20px;
  animation: fade 0.18s ease;
  overflow-y: auto;
}
@media (max-width: 700px) {
  .carte-plein-ecran {
    /* De la place en haut pour la croix, en bas pour la barre de navigation. */
    padding: 68px 20px calc(86px + env(safe-area-inset-bottom));
  }
}
.carte-plein-ecran.sortie {
  animation: fade 0.18s ease reverse;
}
/*
 * La scene ne redefinit plus aucune dimension : la carte garde exactement le
 * gabarit qu'elle a partout ailleurs. Seuls la perspective, l'inclinaison et
 * la brillance sont propres a cette vue.
 */
.carte-scene {
  position: relative;
  width: min(320px, 76vw);
  perspective: 1000px;
  /* Le geste sert a tourner la carte, pas a faire defiler la page. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.carte-scene .carte-boite {
  transition: transform 0.14s ease-out;
  transform-style: preserve-3d;
}
/* Brillance qui suit le pointeur : c'est elle qui donne le relief. */
.carte-scene .carte-tcg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--brillance-x, 50%) var(--brillance-y, 50%), rgba(255, 255, 255, 0.4), transparent 58%);
  pointer-events: none;
  border-radius: 1.5em;
  z-index: 4;
}
.carte-particule {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  animation: particule-flotte ease-in-out infinite;
  filter: blur(0.4px);
}
@keyframes particule-flotte {
  0%,
  100% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0.25;
  }
  50% {
    transform: translate(14px, -26px) scale(1.3);
    opacity: 1;
  }
}
.carte-infos {
  text-align: center;
  color: #fff;
  max-width: 34ch;
}
.carte-infos-nom {
  font-size: 22px;
  font-weight: 900;
}
.carte-infos-rarete {
  font-weight: 800;
  color: var(--carte);
}
.carte-infos-serie {
  font-size: 13px;
  opacity: 0.8;
  font-weight: 700;
}
.carte-fermer {
  position: fixed;
  top: 16px;
  right: 16px;
}

.exemplaires {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}
.exemplaire {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: center;
}
.exemplaire-serie {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ ouverture de booster */

.ouverture {
  position: fixed;
  inset: 0;
  z-index: 620;
  /* Le halo coloré se pose sur un fond plein : sinon la page reste visible
     derrière et l'ouverture perd tout son effet. */
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--booster) 42%, transparent), transparent 62%),
    color-mix(in srgb, var(--line) 92%, #000);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fade 0.2s ease;
  overflow-y: auto;
}
.ouverture.sortie {
  animation: fade 0.2s ease reverse;
}
.ouverture-scene {
  perspective: 1200px;
  display: grid;
  place-items: center;
}
.ouverture-etape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ouverture-consigne {
  color: #fff;
  font-weight: 800;
  text-align: center;
  max-width: 32ch;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.ouverture-compteur {
  color: #fff;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/*
 * Le sachet : un vrai parallelepipede, six faces assemblees en 3D.
 * On le fait pivoter au doigt ; la bande de dechirure court le long du bord
 * droit et se detache vers la droite.
 */
.sachet-scene {
  --l: min(210px, 58vw);
  --h: calc(var(--l) * 1.46);
  --p: 30px;
  --avant: calc(var(--p) / 2);
  width: var(--l);
  height: var(--h);
  perspective: 900px;
  perspective-origin: 50% 45%;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.sachet-scene:active {
  cursor: grabbing;
}

.sachet {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.sachet-face {
  position: absolute;
  border: 3px solid var(--line);
  background: linear-gradient(160deg, var(--booster) 0%, color-mix(in srgb, var(--booster) 42%, #000) 100%);
  overflow: hidden;
  backface-visibility: hidden;
}

/* Les deux grandes faces portent le visuel. */
.sachet-face.avant,
.sachet-face.arriere {
  inset: 0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  color: #fff;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}
.sachet-face.avant {
  transform: translateZ(var(--avant));
}
.sachet-face.arriere {
  transform: rotateY(180deg) translateZ(var(--avant));
  filter: brightness(0.82);
}

/* Les tranches donnent l'epaisseur. */
.sachet-face.gauche,
.sachet-face.droite {
  top: 0;
  left: calc(50% - var(--p) / 2);
  width: var(--p);
  height: 100%;
  filter: brightness(0.7);
}
.sachet-face.gauche {
  transform: rotateY(-90deg) translateZ(calc(var(--l) / 2));
}
.sachet-face.droite {
  transform: rotateY(90deg) translateZ(calc(var(--l) / 2));
}
.sachet-face.haut,
.sachet-face.bas {
  left: 0;
  top: calc(50% - var(--p) / 2);
  width: 100%;
  height: var(--p);
  filter: brightness(0.62);
}
.sachet-face.haut {
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
}
.sachet-face.bas {
  transform: rotateX(-90deg) translateZ(calc(var(--h) / 2));
}

.sachet-image {
  width: 62%;
  aspect-ratio: 1;
  border: 3px solid var(--line);
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
}
.sachet-embleme {
  opacity: 0.75;
}
.sachet-nom {
  font-weight: 900;
  font-size: 16px;
  text-align: center;
  line-height: 1.2;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}
.sachet-brillance {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%);
  animation: reflet-balaie 4s ease-in-out infinite;
  pointer-events: none;
}

/*
 * La bande de dechirure, en haut du sachet sur toute sa largeur. On l'attrape
 * par l'encoche de droite et on la tire vers la droite : elle se decolle, et
 * le bord dechire apparait derriere elle, de gauche a droite.
 */
.sachet-languette {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: 30px;
  transform: translateZ(var(--avant));
  transform-origin: right center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--booster) 78%, #fff) 0%, color-mix(in srgb, var(--booster) 52%, #fff) 100%);
  border: 3px solid var(--line);
  border-radius: 10px 10px 3px 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  color: var(--line);
  cursor: grab;
  touch-action: none;
  z-index: 6;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
}
.sachet-languette:active {
  cursor: grabbing;
}
/* Perforation : la ligne de pointilles ou le carton cede. */
.sachet-crans {
  flex: 1;
  height: 3px;
  background: repeating-linear-gradient(to right, var(--line) 0 5px, transparent 5px 11px);
  opacity: 0.7;
}
/* Encoche de prise, a droite : c'est par la qu'on tire. */
.sachet-prise {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--line);
  color: #fff;
  animation: languette-appelle 1.5s ease-in-out infinite;
}
@keyframes languette-appelle {
  50% {
    transform: translateX(4px);
  }
}

/* Le bord dechire, decouvert a mesure que la bande s'en va. */
.sachet-dechirure {
  position: absolute;
  top: 0;
  left: 0;
  height: 27px;
  width: calc(100% * var(--dechirure, 0));
  transform: translateZ(calc(var(--avant) - 1px));
  background: #0d0a16;
  border-bottom: 3px dashed color-mix(in srgb, var(--booster) 70%, #fff);
  border-radius: 8px 0 0 0;
  z-index: 5;
  pointer-events: none;
}

.sachet.dechire {
  animation: sachet-eclate 0.45s ease forwards;
}
@keyframes sachet-eclate {
  40% {
    transform: scale(1.14) rotateY(-8deg);
    filter: brightness(2);
  }
  100% {
    transform: scale(0.25) rotateY(40deg);
    opacity: 0;
  }
}

.pile-cartes {
  width: min(300px, 78vw);
  perspective: 1000px;
}
.carte-revelee {
  animation: carte-surgit 0.34s cubic-bezier(0.2, 1.4, 0.4, 1);
  touch-action: none;
  cursor: grab;
}
@keyframes carte-surgit {
  from {
    transform: scale(0.6) rotateY(60deg);
    opacity: 0;
  }
}

.recap-titre {
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  text-align: center;
}
.recap-meilleure {
  color: var(--sun);
  font-weight: 800;
  text-align: center;
  max-width: 40ch;
}
.recap-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: 10px;
  max-width: 440px;
}

/* ------------------------------------------------ pages cartes et marché */

.grille-boosters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 13px;
}
.booster-carte {
  background: linear-gradient(160deg, var(--booster) 0%, color-mix(in srgb, var(--booster) 50%, #000) 100%);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: #fff;
}
.booster-visuel {
  height: 120px;
  border: 3px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.booster-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.booster-nom {
  font-weight: 900;
  font-size: 17px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
}
.booster-desc,
.booster-contenu {
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.9;
}

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 12px;
}
.grille-cartes.compacte {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
}
.collection-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.grille-offres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 13px;
}
.offre {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.offre-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.offre-vendeur {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}
.offre-vendeur .avatar.sm {
  width: 22px;
  height: 22px;
  font-size: 10px;
}
.offre-vendeur span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bouton-vendre {
  position: fixed;
  right: 18px;
  bottom: 20px;
  z-index: 100;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--sun);
  color: #191325;
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
}
.bouton-vendre:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow-c);
}

.suggestions-pseudo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.suggestion-pseudo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 11px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  text-align: left;
}
.suggestion-pseudo span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.boutique-famille {
  grid-column: 1 / -1;
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  padding: 6px 2px 0;
}
.grille-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 12px;
  grid-column: 1 / -1;
}

/* Inventaire visible sur un profil */
.profil-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  padding: 16px;
}

@media (max-width: 700px) {
  .recap-grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }
  .grille-cartes {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
  .bouton-vendre {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

/* ---------------------------------------------- panneau admin des cartes */

.admin-tcg {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-tcg .grille-cartes {
  padding: 4px 16px 18px;
}
.carte-admin {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.carte-admin-info {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
}
.carte-admin-actions {
  display: flex;
  gap: 5px;
  min-width: 0;
}
.carte-admin-actions .btn {
  padding: 6px 8px;
  font-size: 12px;
  min-width: 0;
}
.carte-admin-actions .btn.ghost {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carte-admin-actions .btn.danger {
  flex: 0 0 auto;
  padding: 6px 9px;
}
.grille-cartes.compacte .carte-boite {
  cursor: pointer;
}
.case-a-cocher {
  display: flex !important;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.case-a-cocher input[type='checkbox'] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--sun);
  cursor: pointer;
}
.offre-prix {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-size: 14px;
  color: var(--sun);
}
.offre-prix span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

/* La pastille du nombre d'exemplaires ne doit pas manger le nom de la carte. */
.carte-boite:has(.carte-nombre) .carte-nom {
  padding-inline: 2.2em;
}

.profil-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ------------------------------------------------ collections (pokédex) */

.grille-collections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 13px;
}
.collection-tuile {
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.11s, box-shadow 0.11s;
}
@media (hover: hover) {
  .collection-tuile:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow);
  }
}
.collection-tuile:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow-c);
}
.collection-tuile.complete {
  border-color: var(--sun);
}
.collection-visuel {
  position: relative;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--collection) 0%, color-mix(in srgb, var(--collection) 40%, #000) 100%);
  border: 2.5px solid var(--line);
  padding: 12px;
  min-height: 116px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.collection-image {
  width: 84px;
  height: 84px;
  border-radius: 9px;
  border: 2.5px solid var(--line);
  background-size: cover;
  background-position: center;
}
/* Trois cartes en éventail, quand le booster n'a pas de visuel. */
.collection-apercu {
  display: flex;
  justify-content: center;
  width: 100%;
}
.collection-apercu .carte-boite {
  width: 52px;
  flex: 0 0 auto;
}
.collection-apercu .carte-boite:first-child {
  transform: rotate(-11deg) translateX(9px);
}
.collection-apercu .carte-boite:last-child {
  transform: rotate(11deg) translateX(-9px);
}
.collection-apercu .carte-boite:nth-child(2) {
  position: relative;
  z-index: 2;
}
.collection-sceau {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sun);
  color: #191325;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}
.collection-nom {
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
}
.collection-compte {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.collection-jauge {
  height: 9px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.collection-jauge-fill {
  height: 100%;
  background: var(--collection);
  transition: width 0.3s;
}

.collection-vue {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.collection-entete {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-left: 7px solid var(--collection);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 11px 14px;
}
.collection-entete-nom {
  font-weight: 900;
  font-size: 16px;
}
.collection-entete-sous {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ choix d'un exemplaire */

.liste-exemplaires {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 380px;
  overflow-y: auto;
}
.exemplaire-ligne {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: transform 0.1s;
}
@media (hover: hover) {
  .exemplaire-ligne:hover {
    transform: translateX(3px);
    border-color: var(--sun);
  }
}
.exemplaire-ligne.occupe {
  opacity: 0.7;
}
.exemplaire-numero {
  font-weight: 900;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  min-width: 74px;
}
.exemplaire-detail {
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.exemplaire-choix {
  color: var(--muted);
  display: inline-flex;
}

/* Boutons sous une carte affichée en grand. */
.carte-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

@media (max-width: 700px) {
  .grille-collections {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* Rareté puis cote, sous une carte tirée. */
.carte-fiche {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  margin-top: 8px;
}
.carte-fiche-rarete {
  font-weight: 900;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  font-variant-numeric: tabular-nums;
}
.carte-fiche-valeur {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sun);
  font-variant-numeric: tabular-nums;
}
.carte-fiche-valeur span {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.75;
  color: #fff;
}
.carte-fiche-valeur.vide {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
}
.recap-case {
  display: flex;
  flex-direction: column;
}
.recap-case .carte-fiche {
  margin-top: 6px;
}
.recap-case .carte-fiche-rarete {
  font-size: 11px;
}
.recap-case .carte-fiche-valeur {
  font-size: 10.5px;
  flex-direction: column;
  gap: 0;
}
.recap-case .carte-fiche-valeur span {
  font-size: 9.5px;
}
.carte-infos-valeur {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--sun);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ cinématique des cartes rares */

.cine {
  position: fixed;
  inset: 0;
  z-index: 700;
  overflow: hidden;
  pointer-events: auto;
  background: rgba(6, 4, 14, var(--noir, 0.6));
  animation: cine-entre 0.28s ease;
  cursor: pointer;
}
.cine.sortie {
  animation: cine-part 0.3s ease forwards;
}
@keyframes cine-entre {
  from {
    opacity: 0;
  }
}
@keyframes cine-part {
  to {
    opacity: 0;
  }
}

/* Traits qui jaillissent du centre, dans la couleur de la carte. */
.cine-trait {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--longueur, 40vmax);
  height: 2px;
  transform-origin: 0 50%;
  transform: rotate(var(--angle)) scaleX(0);
  background: linear-gradient(90deg, var(--teinte), transparent 85%);
  filter: drop-shadow(0 0 6px var(--teinte));
  animation: cine-trait-jaillit 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) var(--retard) both;
}
@keyframes cine-trait-jaillit {
  0% {
    transform: rotate(var(--angle)) scaleX(0);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: rotate(var(--angle)) scaleX(1);
    opacity: 0;
  }
}

/* Grains qui convergent vers le centre, de plus en plus vite. */
.cine-grain {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--taille, 4px);
  height: var(--taille, 4px);
  margin: calc(var(--taille, 4px) / -2);
  border-radius: 50%;
  background: var(--teinte);
  box-shadow: 0 0 10px var(--teinte);
  animation: cine-converge var(--vitesse, 500ms) cubic-bezier(0.7, 0, 0.9, 0.4) var(--retard) both;
}
@keyframes cine-converge {
  0% {
    transform: translate(var(--dx), var(--dy)) scale(0.4);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1.5);
    opacity: 0;
  }
}

/* Anneaux de choc. */
.cine-anneau {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12vmax;
  height: 12vmax;
  margin: -6vmax;
  border: 3px solid var(--teinte);
  border-radius: 50%;
  opacity: 0;
  animation: cine-anneau-souffle 0.85s ease-out var(--retard) both;
}
@keyframes cine-anneau-souffle {
  0% {
    transform: scale(0.2);
    opacity: 0.9;
  }
  100% {
    transform: scale(3.4);
    opacity: 0;
  }
}

/* Cœur lumineux qui grossit jusqu'à l'impact. */
.cine-coeur {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3vmax;
  height: 3vmax;
  margin: -1.5vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--teinte) 45%, transparent 72%);
  transform: scale(0);
  animation: cine-coeur-grossit var(--duree) cubic-bezier(0.5, 0, 0.9, 0.5) both;
}
@keyframes cine-coeur-grossit {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1);
    opacity: 1;
  }
  74% {
    transform: scale(0.72);
  }
  100% {
    transform: scale(9);
    opacity: 0;
  }
}

/* Éclair blanc à l'impact. */
.cine-souffle {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}
.cine.impact .cine-souffle {
  animation: cine-eclat 0.34s ease-out;
}
@keyframes cine-eclat {
  0% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}

/* Secousse de l'écran, d'autant plus forte que la carte est rare. */
.cine-tremble-1 {
  animation: tremble 0.32s ease-in-out infinite;
}
.cine-tremble-2 {
  animation: tremble 0.22s ease-in-out infinite;
  --ampleur: 3px;
}
.cine-tremble-3 {
  animation: tremble 0.15s ease-in-out infinite;
  --ampleur: 5px;
}
@keyframes tremble {
  25% {
    transform: translate(calc(var(--ampleur, 1.5px) * -1), var(--ampleur, 1.5px));
  }
  75% {
    transform: translate(var(--ampleur, 1.5px), calc(var(--ampleur, 1.5px) * -1));
  }
}

/* La carte atterrit après la séquence : chute nette et rebond. */
.carte-revelee.atterrit {
  animation: carte-atterrit 0.5s cubic-bezier(0.16, 1.5, 0.4, 1);
}
@keyframes carte-atterrit {
  0% {
    transform: scale(2.4) rotate(-8deg);
    opacity: 0;
    filter: brightness(3);
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
    filter: brightness(1);
  }
}
/* Pendant la séquence, les commandes s'effacent : rien à cliquer par erreur. */
.ouverture-etape.en-cinema > *:not(.pile-cartes) {
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------ la mine en plein écran */

/*
 * Le jeu occupe tout l'écran : décor de bord à bord, minerai au centre, aucun
 * défilement. Les commandes flottent dans les coins et tout le reste s'ouvre
 * en fenêtre.
 */
.mine-plein {
  position: relative;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
}
.mine-vide {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

/* La scène prend toute la place restante. */
.mine-plein .mine-scene {
  position: absolute;
  inset: 0;
  height: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  z-index: 0;
}

/* Décor : plus aucun contour noir, on veut un paysage, pas un autocollant. */
.mine-plein .mine-soleil,
.mine-plein .mine-nuage,
.mine-plein .mine-colline,
.mine-plein .mine-herbe,
.mine-plein .mine-sol {
  border: none !important;
  box-shadow: none !important;
}
.mine-piedestal {
  position: absolute;
  left: 50%;
  bottom: calc(50% - 122px);
  transform: translateX(-50%);
  width: 210px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.34), transparent 70%);
  z-index: 1;
}

/* Le minerai reste au centre exact, quelle que soit la hauteur d'écran. */
.mine-plein .bloc {
  width: min(190px, 42vmin);
  height: min(190px, 42vmin);
  margin-bottom: 0;
  border-width: 4px;
  z-index: 3;
}

/* Barre de commandes, posée par-dessus le décor. */
.mine-commandes {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 0;
}
.mine-commandes-droite {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mine-bouton {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: var(--bw) solid var(--line);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform 0.1s;
}
@media (hover: hover) {
  .mine-bouton:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow);
  }
}
.mine-bouton:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow-c);
}
.mine-commandes .solde {
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}

/* Nom du minerai et jauge de vie, en bandeau flottant. */
.mine-plein .bloc-entete {
  position: relative;
  z-index: 6;
  margin: 12px auto 0;
  width: min(430px, calc(100% - 28px));
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 11px 14px;
  backdrop-filter: blur(6px);
}

/* Les indicateurs restent en bas, discrets. */
.mine-jauges {
  position: absolute;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.mine-jauge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}

.mine-plein .combo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -170px);
  z-index: 6;
}

/* La barre du bas n'a rien à faire ici : le jeu occupe tout. */
@media (max-width: 700px) {
  .mine-plein {
    height: 100dvh;
  }
  .mine-plein ~ .mobile-bar,
  .mine-plein ~ .mobile-fab {
    display: none;
  }
  .mine-commandes {
    padding: calc(10px + env(safe-area-inset-top)) 10px 0;
    gap: 7px;
  }
  .mine-commandes-droite {
    gap: 6px;
  }
  .mine-bouton {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .mine-commandes .solde {
    padding: 5px 10px;
  }
  .mine-commandes .solde-unite {
    display: none;
  }
}
html.page-pleine body {
  padding-bottom: 0;
  overflow: hidden;
}

/* ------------------------------------------------ compteur de pièces */

/*
 * L'icône passait au-dessus du nombre dès qu'il devenait long : le bloc
 * enveloppait faute de place. Il ne se coupe plus jamais.
 */
.solde {
  /* La regle de base n'etait pas toujours celle qui gagnait : sans `flex`
     explicite, l'icone se retrouvait au-dessus du nombre des qu'il s'allongeait. */
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.solde svg {
  flex: 0 0 auto;
}
.solde-valeur {
  white-space: nowrap;
}

/* ------------------------------------------------ mine : journal et météo */

.mine-journal {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mine-journal-ligne {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  border-left: 4px solid var(--teinte, #888);
  padding-left: 8px;
  animation: journal-entre 0.24s ease;
}
@keyframes journal-entre {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.mine-journal-nom {
  color: var(--teinte, inherit);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mine-journal-gain {
  margin-left: auto;
  color: var(--sun);
  font-variant-numeric: tabular-nums;
}
.mine-journal-ligne svg {
  color: var(--sun);
  flex: 0 0 auto;
}

.mine-meteo:empty {
  display: none;
}
.mine-meteo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 700;
  padding-top: 3px;
  border-top: 2px dashed color-mix(in srgb, var(--line) 30%, transparent);
}
.mine-meteo-nom {
  color: #191325;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
  font-weight: 900;
  font-size: 11.5px;
  text-transform: uppercase;
}
.mine-meteo-desc {
  color: var(--muted);
  flex: 1;
  min-width: 0;
}
.mine-meteo-temps {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

/* ------------------------------------------------ mine : le temps qu'il fait */

.mine-gouttes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}
.goutte {
  position: absolute;
  top: -8%;
  animation-name: goutte-tombe;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.goutte.pluie {
  width: 2px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(rgba(255, 255, 255, 0.1), #7ec8ff);
}
.goutte.grele {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #eaf8ff;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.85);
}
.goutte.printemps {
  width: 9px;
  height: 9px;
  border-radius: 60% 10% 60% 10%;
  background: #ffb3d9;
  animation-name: petale-tombe;
}
@keyframes goutte-tombe {
  to {
    transform: translate(var(--derive, 0), 118vh);
  }
}
@keyframes petale-tombe {
  to {
    transform: translate(var(--derive, 0), 118vh) rotate(540deg);
  }
}

/* Le décor prend la couleur du temps. */
.mine-scene[data-meteo='pluie'] .mine-decor {
  filter: saturate(0.62) brightness(0.66) hue-rotate(-12deg);
}
.mine-scene[data-meteo='grele'] .mine-decor {
  filter: saturate(0.35) brightness(0.78) contrast(1.1);
}
.mine-scene[data-meteo='printemps'] .mine-decor {
  filter: saturate(1.35) brightness(1.08) hue-rotate(14deg);
}
.mine-scene[data-meteo] .mine-decor {
  transition: filter 0.9s ease;
}
/* Éclairs pendant la grêle. */
.mine-scene[data-meteo='grele']::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  animation: eclair 7s ease-in-out infinite;
}
@keyframes eclair {
  0%,
  92%,
  100% {
    opacity: 0;
  }
  93% {
    opacity: 0.55;
  }
  94% {
    opacity: 0;
  }
  95% {
    opacity: 0.35;
  }
  96% {
    opacity: 0;
  }
}

/* ------------------------------------------------ barre du bas : un seul bloc */

/*
 * Quand la barre d'adresse du navigateur remonte ou descend, le navigateur
 * repositionne les éléments fixes. Le cadre suivait, mais les icônes et le
 * trait de l'onglet actif se recalculaient chacun à leur rythme : les trois
 * bougeaient à des vitesses différentes.
 *
 * En promouvant la barre sur sa propre couche de composition, le navigateur la
 * déplace d'un seul tenant, contenu compris.
 */
@media (max-width: 700px) {
  .mobile-bar {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    contain: layout paint;
  }
  .mobile-tab,
  .mobile-tab::after,
  .mobile-tab .nav-badge {
    will-change: auto;
  }
  /* La boite de l'onglet a desormais une hauteur fixe : l'ancrage par le bas
     redevient stable. */
  .mobile-tab.active::after {
    bottom: 8px;
    top: auto;
  }
}

/* Une fenêtre empilée passe devant celle qui l'a ouverte. */
.modal-backdrop ~ .modal-backdrop {
  z-index: 520;
}

/* ------------------------------------------------ paquets dorés et quantité */

.booster-commande {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.booster-commande .btn {
  flex: 1;
  min-width: 0;
}
.champ-quantite {
  width: 62px;
  flex: 0 0 auto;
  text-align: center;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.dore-jauge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 2px;
}
.dore-piste {
  height: 8px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.dore-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffc93c, #ffe9a8);
  transition: width 0.3s;
}
.dore-texte {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Un paquet doré se signale dès l'ouverture. */
.ouverture.dore .sachet-face.avant,
.ouverture.dore .sachet-face.arriere {
  box-shadow: inset 0 0 40px rgba(255, 201, 60, 0.55), 0 0 26px #ffc93c;
}

/* ------------------------------------------------ KinouScroll */

.scroll-plein {
  position: relative;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: #08060f;
  color: #fff;
}

/*
 * Une vidéo par écran. `scroll-snap` fait le travail : le fil s'arrête
 * toujours pile sur une vidéo, dans les deux sens.
 */
.scroll-piste {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
.scroll-carte {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.scroll-zone {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.scroll-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.scroll-commandes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 0;
  pointer-events: none;
}
.scroll-commandes > * {
  pointer-events: auto;
}
.scroll-titre {
  font-weight: 900;
  font-size: 17px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* Colonne d'actions, à droite. */
.scroll-actions {
  position: absolute;
  right: 10px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.scroll-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
  transition: transform 0.12s;
}
.scroll-action:active {
  transform: scale(0.88);
}
.scroll-action.aime {
  color: #ff2f6d;
}
.scroll-action.discret {
  opacity: 0.55;
  font-size: 10.5px;
}
.scroll-son {
  position: absolute;
  top: calc(64px + env(safe-area-inset-top));
  right: 14px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: #fff;
  cursor: pointer;
}

/* Légende, en bas à gauche. */
.scroll-legende {
  position: absolute;
  left: 14px;
  right: 78px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.scroll-auteur {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 900;
  width: fit-content;
}
.scroll-desc {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  max-height: 4.2em;
  overflow: hidden;
}
.scroll-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.8;
}

/* Cœur qui s'envole au double-tap. */
.scroll-coeur-vole {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ff2f6d;
  pointer-events: none;
  animation: coeur-vole 0.9s ease-out forwards;
}
@keyframes coeur-vole {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -180%) scale(0.9);
  }
}

.scroll-plus {
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 8;
}

/* Fenêtre de publication. */
.scroll-depot {
  border: var(--bw) dashed var(--line);
  border-radius: var(--radius-sm);
  min-height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 12px;
}
.scroll-depot-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
}
.scroll-apercu {
  width: 100%;
  max-height: 320px;
  background: #000;
}
.scroll-sources {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.scroll-sources .btn {
  flex: 1;
}

/* Commentaires. */
.scroll-commentaires {
  max-height: 52vh;
  overflow-y: auto;
  margin: -4px 0 12px;
}
.scroll-commentaire {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 2px solid color-mix(in srgb, var(--line) 12%, transparent);
}
.scroll-commentaire-tete {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  margin-bottom: 2px;
}
.scroll-envoi {
  display: flex;
  gap: 8px;
}
.scroll-envoi input {
  flex: 1;
}

/* Grille de vignettes vidéo, sur les profils. */
.grille-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 4px;
  padding: 12px 16px 16px;
}
.video-vignette {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  border: 2px solid var(--line);
  background: #0d0a16 center / cover no-repeat;
  overflow: hidden;
  display: block;
}
.video-vues {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.video-prive {
  position: absolute;
  top: 6px;
  right: 6px;
}
/* Le bouton « Suivante » maintenu : le défilé rapide se voit. */
.btn.gros-bouton.rafale {
  animation: rafale-pulse 0.34s ease-in-out infinite;
}
@keyframes rafale-pulse {
  50% {
    transform: scale(0.95);
    filter: brightness(1.25);
  }
}

/* Vignettes vidéo dans le panneau d'administration. */
.video-mini {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 76px;
  border-radius: 7px;
  border: 2px solid var(--line);
  background: #0d0a16 center / cover no-repeat;
  display: block;
}
.video-mini-masque {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 5px;
}
.admin-row.masquee {
  opacity: 0.6;
}

/* ------------------------------------------------ visionneuse */

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(6, 4, 14, 0.94);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fade 0.16s ease;
}
.visionneuse-scene {
  max-width: 100%;
  max-height: 100%;
  display: grid;
  place-items: center;
}
.visionneuse-media {
  max-width: min(1100px, 94vw);
  max-height: 84vh;
  border-radius: 10px;
  background: #000;
  display: block;
}
.visionneuse-fermer {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: 14px;
}
.visionneuse-legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.85;
}
.visionneuse-poids,
.visionneuse-compte {
  opacity: 0.7;
}
.visionneuse-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: none;
  color: #fff;
  cursor: pointer;
}
.visionneuse-fleche.avant {
  left: 12px;
}
.visionneuse-fleche.apres {
  right: 12px;
}

/* Pièces jointes cliquables. */
.piece-ouvrable {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.piece-video-vignette {
  width: 100%;
  height: 100%;
  min-height: 160px;
  background: #000 center / cover no-repeat;
}
.piece-lecture {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* Pièces jointes en cours de rédaction, dans les messages privés. */
.dm-pieces:empty {
  display: none;
}
.dm-pieces {
  display: flex;
  gap: 7px;
  padding: 8px 10px 0;
  flex-wrap: wrap;
}
.dm-piece {
  position: relative;
}
.dm-piece-apercu {
  width: 58px;
  height: 58px;
  border-radius: 9px;
  border: 2px solid var(--line);
  background: var(--card-2) center / cover no-repeat;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.dm-piece-retirer {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--down);
  color: #fff;
  border: 2px solid var(--line);
  cursor: pointer;
}
.dm-form-ligne {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
.dm-form-ligne textarea {
  flex: 1;
}

/*
 * Rien ne se sélectionne pendant une ouverture : maintenir « Suivante » pour
 * faire défiler surlignait le texte du bouton et des cartes.
 */
.ouverture,
.ouverture * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.gros-bouton {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Coup critique dans la mine : on doit le voir passer. */
.degat-flottant.critique {
  color: #ffc93c;
  font-size: 17px;
  font-weight: 900;
  text-shadow: 0 0 10px #ffc93c, 1px 1px 0 rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
}
.bloc.critique {
  animation: bloc-critique 0.3s ease;
}
@keyframes bloc-critique {
  40% {
    filter: brightness(2.2) saturate(1.4);
    transform: scale(1.08);
  }
}
/* Lâcher automatique du plinko : le bouton dit qu'il tourne. */
.btn.actif {
  background: var(--down);
  color: #fff;
  animation: rafale-pulse 0.7s ease-in-out infinite;
}

/* ------------------------------------------------ journal Gemini */

.gemini-cas {
  border-bottom: 2px solid color-mix(in srgb, var(--line) 12%, transparent);
}
.gemini-ligne {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 11px 16px;
  cursor: pointer;
  display: block;
}
@media (hover: hover) {
  .gemini-ligne:hover {
    background: color-mix(in srgb, var(--line) 6%, transparent);
  }
}
.gemini-ligne.repli {
  border-left: 4px solid var(--down);
}
.gemini-entete {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gemini-action {
  font-weight: 900;
  font-size: 13.5px;
}
.gemini-qui {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.gemini-meta {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.gemini-extrait {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gemini-detail {
  padding: 4px 16px 16px;
}
.gemini-bloc {
  background: var(--card-2);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 340px;
  overflow: auto;
  margin: 0;
}

/* ------------------------------------------------ machine à sous */

.table-slots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.slot-machine {
  position: relative;
  width: min(340px, 92vw);
  background: linear-gradient(170deg, #3a2f5e, #1c1630);
  border: var(--bw) solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px 18px 20px;
}
.slot-enseigne {
  text-align: center;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 4px;
  color: #ffc93c;
  text-shadow: 0 0 12px rgba(255, 201, 60, 0.7);
  margin-bottom: 12px;
}
.slot-hublot {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: #0d0a16;
  border: 3px solid var(--line);
  border-radius: 12px;
  padding: 8px;
}
.slot-fenetre {
  height: 92px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.slot-colonne {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.slot-symbole {
  flex: 0 0 auto;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: color-mix(in srgb, var(--teinte) 22%, transparent);
  color: var(--teinte);
}
.slot-symbole span {
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--teinte) 70%, transparent));
}
.slot-symbole small {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.3px;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
/* La ligne de paie, au centre du hublot. */
.slot-ligne {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: rgba(255, 90, 95, 0.75);
  box-shadow: 0 0 10px rgba(255, 90, 95, 0.8);
  pointer-events: none;
}

/* Le levier, à droite de la machine. */
.slot-levier {
  position: absolute;
  right: -22px;
  top: 58%;
  width: 26px;
  height: 92px;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform 0.16s ease;
}
.slot-levier.tire {
  transform: rotate(28deg) translateY(6px);
}
.slot-tige {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 7px;
  height: 76px;
  margin-left: -3.5px;
  background: linear-gradient(#d8cfc4, #8d8d94);
  border-radius: 4px;
  border: 2px solid var(--line);
}
.slot-boule {
  position: absolute;
  left: 50%;
  top: 0;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ff9aa0, #ff5a5f 60%, #a3282c);
  border: 2px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------ le coffre */

.table-coffre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.coffre-cadre {
  width: min(320px, 90vw);
  aspect-ratio: 1;
  background: linear-gradient(160deg, #4a4a52, #22222a);
  border: var(--bw) solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  padding: 18px;
}
.coffre-porte {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, #6e6e77, #3a3a42);
  border: 4px solid var(--line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  transition: transform 0.6s ease;
  transform-origin: left center;
}
.coffre-porte.ouvert {
  transform: perspective(700px) rotateY(-62deg);
}
.coffre-volant {
  position: absolute;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 6px solid var(--line);
  background: radial-gradient(circle at 34% 30%, #b9b9c2, #6e6e77);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
}
.coffre-rangee {
  display: flex;
  gap: 12px;
  justify-content: center;
  z-index: 2;
}
.coffre-porte {
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}
.coffre-volant {
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 6px solid var(--line);
  background: radial-gradient(circle at 34% 30%, #b9b9c2, #6e6e77);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
  z-index: 1;
}
/* Les quatre branches du volant, pour qu'on le voie tourner. */
.coffre-volant::before,
.coffre-volant::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 2px;
  background: linear-gradient(var(--line), var(--line)) center / 100% 6px no-repeat;
}
.coffre-volant::after {
  transform: rotate(90deg);
}
.coffre-volant.tourne {
  animation: volant-tourne 1.8s cubic-bezier(0.3, 0, 0.2, 1);
}
@keyframes volant-tourne {
  to {
    transform: rotate(1440deg);
  }
}

.coffre-molette {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: box-shadow 0.2s, filter 0.2s;
}
/*
 * Le cadran : un secteur vert en haut (de -70° à +70°) et du rouge ailleurs.
 * L'aiguille s'arrête dans l'un ou l'autre, et on voit tout de suite si le
 * cran est trouvé.
 */
.coffre-cadran {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -70deg,
    #22c98a 0deg 140deg,
    #b3313a 140deg 360deg
  );
  opacity: 0.85;
}
.coffre-molette::after {
  content: '';
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8d8d94, #3a3a42);
  border: 2px solid var(--line);
}
.coffre-aiguille {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 4px;
  height: 26px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  transform-origin: 50% 28px;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1);
  z-index: 3;
}
.coffre-molette.tourne .coffre-aiguille {
  transform: rotate(var(--cran, 1080deg));
}
.coffre-numero {
  position: relative;
  z-index: 4;
  font-size: 14px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.7);
}
.coffre-molette.trouvee {
  box-shadow: 0 0 18px #22c98a;
}
.coffre-molette.trouvee .coffre-numero {
  color: #6ee7b7;
}
.coffre-molette.ratee {
  filter: grayscale(0.65) brightness(0.75);
}


/* Au plinko, le bandeau passe au-dessus : en continu il masquait tout le jeu. */
.table-plinko .bandeau {
  top: auto;
  bottom: calc(100% + 6px);
  transform: translate(-50%, 0);
  padding: 8px 16px;
  white-space: nowrap;
}
.table-plinko {
  position: relative;
  padding-top: 58px;
}
.table-plinko .bandeau-titre {
  font-size: 16px;
}
.table-plinko .bandeau-detail {
  font-size: 12px;
}

/* ------------------------------------------------ le crash */

.table-crash {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, 94vw);
}
.crash-frise {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.crash-frise-item {
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--teinte) 22%, transparent);
  color: var(--teinte);
  border: 2px solid var(--teinte);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.crash-scene {
  position: relative;
  background: linear-gradient(180deg, #0d0a1e, #1a1436);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.crash-svg {
  display: block;
  width: 100%;
  --teinte: #22c98a;
}
.crash-aire {
  fill: color-mix(in srgb, var(--teinte) 26%, transparent);
  stroke: none;
}
.crash-courbe {
  fill: none;
  stroke: var(--teinte);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--teinte));
}
.crash-corps {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 1.5;
}
.crash-hublot {
  fill: var(--teinte);
}
.crash-affichage {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}
.crash-mult {
  font-size: 40px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  line-height: 1;
}
.crash-etat {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.75);
}
.crash-scene.decolle .crash-fusee {
  animation: fusee-secousse 0.6s ease-out;
}
@keyframes fusee-secousse {
  0%,
  100% {
    transform-origin: center;
  }
  25% {
    filter: brightness(2.4);
  }
}
.crash-scene.explose {
  animation: crash-boum 0.5s ease-out;
}
@keyframes crash-boum {
  0% {
    filter: brightness(3.2) saturate(1.6);
  }
  100% {
    filter: none;
  }
}
.crash-scene.explose .crash-fusee {
  animation: fusee-part 0.5s ease-out forwards;
}
@keyframes fusee-part {
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}

.crash-joueurs {
  max-height: 172px;
  overflow-y: auto;
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.crash-joueurs-titre {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 6px;
}
.crash-joueur {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12.5px;
  font-weight: 700;
}
.crash-joueur-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crash-joueur-mise {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.crash-joueur-sortie {
  min-width: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.crash-joueur.sorti .crash-joueur-sortie {
  color: var(--up);
  font-weight: 900;
}
.crash-joueur.perdu {
  opacity: 0.5;
}
.crash-joueur.perdu .crash-joueur-sortie {
  color: var(--down);
}

/* Table des gains de la machine à sous. */
.slot-table {
  width: min(340px, 92vw);
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.slot-table-tete,
.slot-table-ligne {
  display: grid;
  grid-template-columns: 1fr 62px 62px;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.slot-table-tete {
  background: color-mix(in srgb, var(--line) 10%, transparent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.slot-table-ligne {
  border-top: 2px solid color-mix(in srgb, var(--line) 10%, transparent);
}
.slot-table-tete span:not(:first-child),
.slot-table-ligne span:not(:first-child) {
  text-align: right;
}
.slot-table-sym {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
}
.slot-table-sym small {
  font-size: 12px;
  font-weight: 800;
  color: var(--teinte);
}
.slot-table-triple {
  color: var(--sun);
  font-weight: 900;
}

/* ------------------------------------------------ éjection automatique */

.commandes-crash {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
.auto-eject {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--card-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  flex: 0 0 auto;
}
.champ-auto {
  width: 60px;
  border: none;
  background: none;
  box-shadow: none;
  padding: 6px 0;
  text-align: center;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.champ-auto:focus {
  outline: none;
}

/* ------------------------------------------------ classements du casino */

.banque {
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.banque.positive {
  background: color-mix(in srgb, var(--up) 14%, transparent);
  border-color: var(--up);
}
.banque.negative {
  background: color-mix(in srgb, var(--down) 14%, transparent);
  border-color: var(--down);
}
.banque-titre {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}
.banque-valeur {
  font-size: 32px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 4px 0 6px;
}
.banque.positive .banque-valeur {
  color: var(--up);
}
.banque.negative .banque-valeur {
  color: var(--down);
}
.banque-detail {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.classement-bloc {
  margin-bottom: 16px;
}
.classement-bloc:last-child {
  margin-bottom: 0;
}
.classement-valeur {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.classement-valeur.gain {
  color: var(--up);
}
.classement-valeur.perte {
  color: var(--down);
}