/* ═════════════════════════════════════════════════════════════
   Furmaster — direction artistique « musée »
   Murs de galerie aubergine, lumière chaude, œuvres encadrées.
   La rareté se lit au cadre : noir, chêne, laqué, argent, doré.
   ═════════════════════════════════════════════════════════════ */

:root {
  /* Taille de l'interface (public/ui-size.js) : la page est agrandie avec « zoom », qui agrandit
     aussi les unités vw / vh ; ces variables les ramènent à la taille réelle de l'écran. */
  --zoom: 1;
  --vw: calc(1vw / var(--zoom));
  --vh: calc(1vh / var(--zoom));
  --dvh: calc(1dvh / var(--zoom));
  --svh: calc(1svh / var(--zoom));
  --vmin: calc(1vmin / var(--zoom));
  --vmax: calc(1vmax / var(--zoom));
  --wall: #2b2142;
  --wall-deep: #1e1730;
  --panel: #372b54;
  --panel-2: #44365f;
  --line: #5c4c7e;
  --ink: #f7f1e6;
  --muted: #bdb1d0;
  --paper: #f2ece0;
  --paper-ink: #2a2240;
  --paper-muted: #6c6385;
  --pink: #ff5fa2;
  --pink-deep: #d63c85;
  --light: 255, 230, 190;
  /* Teintes des surfaces (triplets RVB) : chaque décor les redéfinit */
  --deep: 20, 14, 33;
  --deep-2: 30, 23, 48;
  --panel-rgb: 55, 43, 84;
  --hover-rgb: 70, 55, 105;

  /* Couleur signature de chaque cadre */
  --r0: #9d98ab;
  --r1: #cf9f62;
  --r2: #5e88ea;
  --r3: #d6dbe7;
  --r4: #f2c14e;
  --r5: #ff7ad9; /* Super légendaire : irisé */

  --display: 'Fraunces', 'Georgia', 'DejaVu Serif', serif;
  --body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;

  --s-1: 0.8125rem;
  --s0: 1rem;
  --s1: 1.25rem;
  --s2: 1.5625rem;
  --s3: 1.9375rem;
  --s4: 2.4375rem;
  --s5: 3.0625rem;
  color-scheme: dark;
}

/* Chinois et japonais : polices du système qui ont ces caractères (titres en Song / Mincho) */
:root:lang(zh-CN) {
  --display: 'Fraunces', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'Microsoft YaHei', serif;
  --body: 'Atkinson Hyperlegible', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
}
:root:lang(ja-JP) {
  --display: 'Fraunces', 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
  --body: 'Atkinson Hyperlegible', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Le mur de la galerie : tenture damassée très discrète, grain de la peinture,
   lumière qui tombe du plafond. Le fond est porté par <html> pour que le
   parquet et la plinthe (body::before/::after) puissent passer devant. */
:root,
[data-decor='musee'] {
  /* Décor par défaut : le musée aubergine. Chaque décor (skin) redéfinit ces trois fonds. */
  --decor-bg:
    radial-gradient(1100px 520px at 50% -140px, rgba(var(--light), 0.12), transparent 70%) no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 160px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='132' viewBox='0 0 96 132'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.3'%3E%3Cpath d='M48 12c11 15 15 27 0 46-15-19-11-31 0-46z'/%3E%3Cpath d='M48 58c15-6 26 2 29 15-12-4-21-6-29-15zM48 58c-15-6-26 2-29 15 12-4 21-6 29-15z'/%3E%3Cpath d='M48 58v24'/%3E%3Ccircle cx='48' cy='88' r='5'/%3E%3Cpath d='M30 30c-8 2-12 8-11 15M66 30c8 2 12 8 11 15'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 96px 132px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='132' viewBox='0 0 96 132'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.3'%3E%3Cpath d='M48 12c11 15 15 27 0 46-15-19-11-31 0-46z'/%3E%3Cpath d='M48 58c15-6 26 2 29 15-12-4-21-6-29-15zM48 58c-15-6-26 2-29 15 12-4 21-6 29-15z'/%3E%3Cpath d='M48 58v24'/%3E%3Ccircle cx='48' cy='88' r='5'/%3E%3Cpath d='M30 30c-8 2-12 8-11 15M66 30c8 2 12 8 11 15'/%3E%3C/g%3E%3C/svg%3E") 48px 66px / 96px 132px,
    var(--wall);
  --decor-plinth: linear-gradient(180deg, #57456f 0 2px, #1a1226 2px 3px, #2c2140 3px 13px, #1a1226 13px);
  --decor-floor:
    linear-gradient(180deg, rgba(12, 6, 18, 0.75), transparent 55%),
    radial-gradient(45% 140% at 50% 0%, rgba(255, 214, 160, 0.16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0 2px, transparent 2px 72px),
    linear-gradient(90deg, #452a1b, #5c3923 25%, #4e301e 50%, #63402a 75%, #48301f);
}
html {
  -webkit-text-size-adjust: 100%;
  background: var(--decor-bg);
}
body {
  margin: 0;
  min-height: calc(100 * var(--dvh));
  background: none;
  /* Les halos de lumière débordent des œuvres : jamais de défilement horizontal */
  overflow-x: clip;
  color: var(--ink);
  font: 400 var(--s0) / 1.5 var(--body);
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--r4);
  outline-offset: 3px;
  border-radius: 4px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
h1,
h2,
.display {
  font-family: var(--display);
  font-weight: 650;
  font-variation-settings: 'SOFT' 60, 'opsz' 96;
  letter-spacing: -0.01em;
}

/* ───────────── Cadres : couleurs par rareté (partagées partout) ─────────────
   --ft/--fr/--fb/--fl : couleur des 4 côtés, ce qui dessine les coupes d'onglet. */
.r-0 {
  --rc: var(--r0);
  --ft: #45404f;
  --fr: #24202c;
  --fb: #16131c;
  --fl: #322e3b;
}
.r-1 {
  --rc: var(--r1);
  --ft: #e2b981;
  --fr: #aa7b45;
  --fb: #835b2f;
  --fl: #c6955c;
}
.r-2 {
  --rc: var(--r2);
  --ft: #7c9ff2;
  --fr: #3159bd;
  --fb: #22408f;
  --fl: #4c75d8;
}
.r-3 {
  --rc: var(--r3);
  --ft: #ffffff;
  --fr: #a8b0c2;
  --fb: #848ca0;
  --fl: #d9dee9;
}
.r-4,
.r-5 {
  --rc: var(--r4);
  --ft: #ffeaa6;
  --fr: #c48d1f;
  --fb: #966610;
  --fl: #e9bb4c;
}

/* ───────────── Boutons & champs ───────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.6em 1.25em;
  border: 0;
  border-radius: 999px;
  background: var(--panel-2);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.15s ease;
}
.btn:hover {
  background: var(--line);
}
.btn:active {
  transform: translateY(1px) scale(0.98);
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-primary {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 4px 0 var(--pink-deep);
}
.btn-primary:hover {
  background: #ff74af;
}
.btn-primary:active {
  box-shadow: 0 2px 0 var(--pink-deep);
  transform: translateY(2px);
}
.btn-big {
  font-size: var(--s1);
  padding: 0.7em 1.6em;
}
.btn-ghost {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--line);
}
.btn-sm {
  min-height: 38px;
  padding: 0.45em 1em;
  font-size: 0.9rem;
}
.btn .icon {
  width: 1.1em;
  height: 1.1em;
}
.btn[aria-pressed='true'] {
  background: var(--ink);
  color: var(--wall-deep);
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--panel);
}

.field {
  display: grid;
  gap: 0.35rem;
}
.field label {
  font-weight: 700;
  font-size: var(--s-1);
  color: var(--muted);
}
.input {
  width: 100%;
  min-height: 44px;
  padding: 0.55em 0.9em;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--panel);
}
.input:focus {
  border-color: var(--pink);
  outline: none;
}

/* ───────────── Barre du haut ───────────── */
.topbar {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 0 rgba(0, 0, 0, 0.22), 0 12px 30px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.7rem clamp(1rem, calc(4 * var(--vw)), 2.5rem);
  background: rgba(var(--deep-2), 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.logo {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'SOFT' 100, 'opsz' 72;
  font-size: var(--s2);
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}
.logo span {
  color: var(--pink);
}
.nav {
  display: flex;
  gap: 0.25rem;
  margin-right: auto;
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
}
@media (hover: hover) {
  .nav a:hover {
    color: var(--ink);
    background: var(--panel);
  }
}
.nav a[aria-current='page'] {
  color: var(--paper-ink);
  background: var(--paper);
}
.nav svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.nav .pip {
  min-width: 1.4em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: var(--s-1);
  text-align: center;
}
.who {
  color: var(--muted);
  font-size: var(--s-1);
}
/* PinterCoin */
.coins-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-variant-numeric: tabular-nums;
}
.coins-amount .coin {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
.topcoins {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(242, 193, 78, 0.12);
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.35);
  color: #ffe3a0;
  font-size: var(--s-1);
  text-decoration: none;
}
.topcoins:hover {
  background: rgba(242, 193, 78, 0.2);
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .who {
    display: none;
  }
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .topbar {
    justify-content: space-between;
    backdrop-filter: none;
    background: var(--wall-deep);
  }
  .nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    justify-content: space-around;
    margin: 0;
    padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom));
    background: var(--wall-deep);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav a {
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    border-radius: 12px;
  }
  /* 6 onglets (avec Communauté et Profil) : chacun prend sa part de la largeur */
  .nav a {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.35rem 0.15rem;
    font-size: 0.66rem;
  }
  .nav a .nl-long {
    display: none;
  }
  .nav a .nl-short {
    display: inline;
  }
  .nav a > span:not(.pip) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav .pip {
    position: absolute;
    transform: translate(14px, -6px);
  }
  main {
    padding-bottom: 5.5rem !important;
  }
}

/* Parquet et plinthe, fixés au bas de l'écran (sur grand écran seulement) */
@media (min-width: 721px) and (min-height: 521px), (min-width: 721px) and (pointer: fine) {
  body::before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(9 * var(--vh));
    height: var(--plinth-h, 16px);
    z-index: -1;
    pointer-events: none;
    background: var(--decor-plinth);
    box-shadow: var(--plinth-shadow, 0 -18px 30px rgba(0, 0, 0, 0.22));
  }
  body::after {
    content: '';
    position: fixed;
    left: -25%;
    right: -25%;
    bottom: 0;
    height: calc(9 * var(--vh));
    z-index: -1;
    pointer-events: none;
    background: var(--decor-floor);
    transform: perspective(220px) rotateX(36deg);
    transform-origin: 50% 100%;
  }
  main {
    padding-bottom: calc(4rem + calc(10 * var(--vh))) !important;
  }
}

main {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: clamp(1.25rem, calc(3 * var(--vw)), 2.5rem) clamp(1rem, calc(4 * var(--vw)), 2.5rem) 4rem;
}
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-head h1 {
  margin: 0;
  font-size: clamp(var(--s3), calc(5 * var(--vw)), var(--s5));
  line-height: 1.02;
}
.lede {
  margin: 0.4rem 0 0;
  color: var(--muted);
  max-width: 60ch;
}

/* ═════════════ L'œuvre encadrée ═════════════
   --r : format de l'image (largeur / hauteur)
   --u : échelle des cadres (1px sur le mur, plus en grand) */
.piece {
  --u: 1px;
  --fwn: 4;
  --mwn: 6;
  --fw: calc(var(--fwn) * var(--u));
  --mw: calc(var(--mwn) * var(--u));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0;
}
.piece.r-1 {
  --fwn: 5;
  --mwn: 6;
}
.piece.r-2 {
  --fwn: 5;
  --mwn: 7;
}
.piece.r-3 {
  --fwn: 6;
  --mwn: 7;
}
.piece.r-4,
.piece.r-5 {
  --fwn: 7;
  --mwn: 7;
}
.frame {
  position: relative;
  width: 100%;
  border: var(--fw) solid;
  border-color: var(--ft) var(--fr) var(--fb) var(--fl);
  padding: var(--mw);
  background: var(--paper);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.22),
    inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.22),
    0 calc(8 * var(--u)) calc(16 * var(--u)) calc(-6 * var(--u)) rgba(8, 4, 20, 0.7);
  transition: filter 0.6s ease;
}
.piece.r-2 .frame {
  /* Filet doré entre le cadre laqué et le passe-partout */
  box-shadow:
    inset 0 0 0 calc(1.2 * var(--u)) #e3b84f,
    inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.22),
    0 calc(8 * var(--u)) calc(16 * var(--u)) calc(-6 * var(--u)) rgba(8, 4, 20, 0.7);
}
.piece.r-3 .frame {
  box-shadow:
    0 0 0 calc(1 * var(--u)) #7a8197,
    inset 0 0 0 1px rgba(0, 0, 0, 0.22),
    inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.22),
    0 calc(8 * var(--u)) calc(16 * var(--u)) calc(-6 * var(--u)) rgba(8, 4, 20, 0.75);
}
.piece.r-4 .frame,
.piece.r-5 .frame {
  /* Une fine moulure autour du cadre doré, et un léger halo */
  box-shadow:
    0 0 0 calc(1 * var(--u)) #8a5e10,
    0 0 0 calc(2.5 * var(--u)) #e9c66a,
    inset 0 0 0 calc(1.2 * var(--u)) #b8862a,
    inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.22),
    0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-6 * var(--u)) rgba(8, 4, 20, 0.75),
    0 0 calc(30 * var(--u)) 0 rgba(242, 193, 78, 0.18);
}
.frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--r);
  background: #d9d2c4;
  transition: filter 0.25s ease;
}
/* Reflet de vitre qui passe sur les œuvres argent et or */
.piece.r-3 .frame::after,
.piece.r-4 .frame::after,
.piece.r-5 .frame::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--fw));
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%) 200% 0 / 300% 100% no-repeat;
  mix-blend-mode: soft-light;
  pointer-events: none;
  animation: glint 7s ease-in-out infinite;
}
.piece.r-4 .frame::after,
.piece.r-5 .frame::after {
  mix-blend-mode: overlay;
  animation-duration: 5s;
}
@keyframes glint {
  0%, 70% { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* Lumière d'exposition au-dessus de chaque œuvre (dégradé entièrement
   contenu dans sa boîte, pour ne jamais laisser de bord net) */
.piece::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -30%;
  right: -30%;
  top: -90px;
  bottom: 30%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--light), 0.13), transparent);
  pointer-events: none;
}
.piece.r-4::before,
.piece.r-5::before {
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 220, 140, 0.26), transparent);
}

/* Cartel */
.cartel {
  align-self: center;
  width: max-content;
  /* Un cartel peut déborder un peu d'un cadre étroit, jamais jusqu'au cartel voisin (0.37.1) */
  max-width: max(100%, min(150px, calc(100% + 16px)));
  margin-top: calc(12px + var(--fw) * 0.2);
  padding: 5px 10px 6px;
  border-radius: 2px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
  font-size: 11.5px;
  line-height: 1.25;
  text-align: center;
}
.cartel b,
.cartel span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cartel b {
  font-size: 12px;
}
.cartel b.t {
  font-family: var(--display);
  font-weight: 650;
  font-variation-settings: 'SOFT' 50, 'opsz' 24;
  font-size: 13px;
}
.cartel span {
  opacity: 0.75;
}
.cartel .dup {
  display: inline;
  margin-left: 0.4em;
  padding: 0 0.3em;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.12);
  font-weight: 700;
  font-size: 0.92em;
}

/* Plaques : l'étiquette suit la matière du cadre */
.piece.r-1 .cartel,
.cartel-big.r-1 {
  background:
    repeating-linear-gradient(90deg, rgba(110, 60, 20, 0.07) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #edcc9a, #d5a86c);
  color: #4a2b10;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(80, 40, 10, 0.25), 0 2px 3px rgba(0, 0, 0, 0.4);
}
.piece.r-2 .cartel,
.cartel-big.r-2 {
  background: linear-gradient(180deg, #3b64c9, #24449a);
  color: #f6d988;
  box-shadow: inset 0 0 0 1px #e3b84f, inset 0 0 0 2.5px #24449a, inset 0 0 0 3px rgba(227, 184, 79, 0.5), 0 2px 4px rgba(0, 0, 0, 0.45);
}
.piece.r-3 .cartel,
.cartel-big.r-3 {
  padding-inline: 18px;
  background:
    radial-gradient(circle at 8px 50%, #6e7486 0 1.6px, rgba(255, 255, 255, 0.8) 2.1px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 8px) 50%, #6e7486 0 1.6px, rgba(255, 255, 255, 0.8) 2.1px, transparent 2.6px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f7f9fc, #c3c9d6 55%, #e6e9f0);
  color: #2b3042;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 0 0 1px rgba(80, 88, 110, 0.45), 0 2px 4px rgba(0, 0, 0, 0.45);
}
.piece.r-4 .cartel,
.piece.r-5 .cartel,
.cartel-big.r-4,
.cartel-big.r-5 {
  padding-inline: 18px;
  background:
    radial-gradient(circle at 8px 50%, #7a520c 0 1.6px, rgba(255, 245, 210, 0.8) 2.1px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 8px) 50%, #7a520c 0 1.6px, rgba(255, 245, 210, 0.8) 2.1px, transparent 2.6px),
    linear-gradient(180deg, #fff0bd, #e9bb52 46%, #cf9a30 54%, #f4d57f);
  color: #42280a;
  text-shadow: 0 1px 0 rgba(255, 244, 205, 0.6);
  box-shadow: inset 0 0 0 1px #8a5e10, 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 16px -4px rgba(242, 193, 78, 0.7);
}

.piece[data-card] {
  cursor: pointer;
}
.piece[data-card]:focus-visible {
  outline-offset: 8px;
}

/* Étiquette « Nouveau » */
.ribbon {
  position: absolute;
  z-index: 3;
  top: calc(-8px - var(--u) * 2);
  left: -8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
  transform: rotate(-6deg);
  box-shadow: 0 2px 0 var(--pink-deep);
}

/* Floutage NSFW */
.mat-clip {
  position: relative;
}
.piece.is-blurred .mat-clip {
  overflow: hidden;
}
.piece.is-blurred .frame img {
  filter: blur(14px) saturate(0.7);
}
.nsfw-veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.1rem;
  color: #fff;
  font-weight: 700;
  font-size: var(--s-1);
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.nsfw-veil b {
  font-family: var(--display);
  font-size: var(--s1);
}

/* Œuvre pas encore acquise : cadre vide au bon format */
.piece.locked {
  cursor: default;
}
.piece.locked .frame,
html[data-frames] .piece.locked:not(.sp-scope *) .frame,
.sp-scope[data-frames] .piece.locked .frame {
  /* La toile vide prend la couleur du décor choisi (0.38) : avant, toujours violet nuit ; même avec
     les cadres « minimal » (sinon on voyait le mur au travers) */
  background:
    radial-gradient(ellipse 80% 70% at 50% 35%, color-mix(in srgb, var(--wall) 55%, transparent), transparent 75%),
    color-mix(in srgb, var(--wall-deep) 82%, #000);
}
.piece.locked .void {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--r);
  border: 1px dashed rgba(var(--light), 0.2);
  color: var(--muted);
  font-family: var(--display);
  font-size: calc(26 * var(--u));
}
.piece.locked .frame::after {
  display: none;
}
.piece.locked .cartel {
  text-shadow: none;
  padding-inline: 10px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
}
.piece.locked .cartel span {
  color: var(--muted);
}

/* ═════════════ Le mur : accrochage au format réel ═════════════
   Chaque œuvre prend une largeur proportionnelle à son format, si bien que
   toutes les images d'une rangée ont la même hauteur, sans aucun recadrage. */
/* Les rangées sont centrées sur le mur ; une œuvre ne grandit pas de plus de
   30 % pour remplir sa rangée, pour garder des hauteurs homogènes. */
.wall {
  --h: 180px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 52px 32px;
  padding: 26px 8px 8px;
  overflow-x: clip;
  overflow-clip-margin: 24px;
}
/* Salle d'artiste ou de tag : le filtre des sortes à gauche, « Sélectionner » à droite */
.wall-tools.has-kinds {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
}
/* Une galerie d'une ou deux œuvres n'est pas centrée : elle part de la gauche, comme Mon musée
   (au-delà, les rangées restent centrées ; le récapitulatif et la pièce maîtresse aussi) */
.wall:not(:has(> :nth-child(3))) {
  justify-content: flex-start;
}
.op-summary .wall,
.masterpiece .wall {
  justify-content: center;
}
.wall > .piece {
  flex: var(--r) 1 calc(var(--r) * var(--h) + 2 * (var(--fw) + var(--mw)));
  max-width: calc(var(--r) * var(--h) * 1.3 + 2 * (var(--fw) + var(--mw)));
}
.wall.small {
  --h: 148px;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .wall {
    --h: 128px;
    gap: 40px 20px;
    /* De la place pour qu'un cartel du bord ne soit pas coupé */
    padding-inline: 8px;
    margin-inline: -8px;
  }
  .wall.small {
    --h: 100px;
  }
}
@media (max-width: 420px) {
  .wall {
    --h: 108px;
    gap: 36px 16px;
  }
  .wall > .piece {
    --u: 0.8px;
  }
}

/* Petit échantillon de cadre (filtres, légendes) */
.swatch {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 14px;
  border: 3px solid;
  border-color: var(--ft) var(--fr) var(--fb) var(--fl);
  background: var(--paper);
  vertical-align: -2px;
}
.swatch.r-4,
.swatch.r-5 {
  box-shadow: 0 0 0 1px #7a520c;
}

/* ═════════════ Accueil : le colis ═════════════ */
.home-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, calc(5 * var(--vw)), 4rem);
  min-height: min(calc(72 * var(--vh)), 680px);
}
@media (max-width: 820px) {
  .home-stage {
    grid-template-columns: 1fr;
    text-align: center;
    min-height: 0;
  }
  .home-copy {
    order: 2;
    justify-items: center;
  }
}
.home-copy {
  display: grid;
  gap: 1.1rem;
  align-content: center;
}
.home-copy h1 {
  margin: 0;
  font-size: clamp(2.4rem, calc(6 * var(--vw)), 4.2rem);
  line-height: 0.98;
}
.home-copy p {
  margin: 0;
  color: var(--muted);
  font-size: var(--s1);
  max-width: 36ch;
}
.timer {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--muted);
}
.timer b {
  font-family: var(--display);
  font-size: var(--s3);
  color: var(--r4);
  font-variant-numeric: tabular-nums;
}
.charge-dots {
  display: flex;
  gap: 6px;
}
@media (max-width: 820px) {
  .charge-dots,
  .home-actions,
  .stat-row {
    justify-content: center;
  }
}
.charge-dots i {
  width: 26px;
  height: 20px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--line);
}
.charge-dots i.on {
  background:
    linear-gradient(90deg, transparent 40%, rgba(150, 92, 36, 0.85) 40% 60%, transparent 60%) top / 100% 55% no-repeat,
    linear-gradient(180deg, #e2b77e 0 30%, #c99659 30%);
  box-shadow: inset 0 0 0 1.5px rgba(90, 50, 14, 0.6);
}
.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: var(--s-1);
  text-decoration: none;
}
.stat b {
  color: var(--ink);
  font-size: var(--s0);
}
.parcel-zone {
  display: grid;
  place-items: center;
  padding: 1rem 0 2rem;
}
.parcel-stack {
  position: relative;
  width: clamp(220px, calc(32 * var(--vw)), 340px);
  aspect-ratio: 10 / 9;
  container-type: inline-size;
}
.parcel-stack > button {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* Colis empilés derrière : de vrais colis (ils suivent l'emballage choisi), assombris */
.parcel-ghost {
  position: absolute;
  inset: 0;
  filter: brightness(0.55) saturate(0.85);
  pointer-events: none;
}
.parcel-ghost .parcel-label,
.parcel-ghost .parcel-fragile,
.parcel-ghost .stk {
  display: none;
}
.parcel-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  border: 3px dashed var(--line);
  color: var(--muted);
}
.parcel-empty b {
  display: block;
  font-family: var(--display);
  font-size: var(--s3);
  color: var(--r4);
}

/* Le colis en carton (dessiné en CSS, mis à l'échelle par cqi) */
.parcel-art {
  position: absolute;
  inset: 0;
  border-radius: 1.2cqi;
  background:
    /* pli entre le dessus et la face avant */
    linear-gradient(180deg, transparent 0 25%, rgba(70, 38, 10, 0.45) 25% calc(25% + 0.7cqi), rgba(255, 235, 200, 0.18) calc(25% + 0.7cqi) calc(25% + 1.2cqi), transparent calc(25% + 1.2cqi)),
    /* jointure des deux rabats sur le dessus */
    linear-gradient(90deg, transparent calc(50% - 0.25cqi), rgba(70, 38, 10, 0.5) calc(50% - 0.25cqi) calc(50% + 0.25cqi), transparent calc(50% + 0.25cqi)) top / 100% 25% no-repeat,
    /* fibres du carton */
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 2px, rgba(0, 0, 0, 0.03) 2px 6px),
    /* dessus plus clair (éclairé), face avant plus foncée */
    linear-gradient(180deg, var(--box-top, #e2b77e) 0 25%, var(--box-front, #c99659) 25% 100%);
  box-shadow:
    inset 0 0 0 0.6cqi rgba(90, 50, 14, 0.35),
    inset 0 -6cqi 8cqi -6cqi rgba(70, 38, 10, 0.35),
    0 26px 40px -14px rgba(0, 0, 0, 0.85);
}
.parcel-art::before {
  /* Ruban adhésif sur la jointure, qui descend sur la face avant */
  content: '';
  position: absolute;
  left: 50%;
  top: -0.5cqi;
  width: 17cqi;
  height: 52%;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.12)),
    var(--tape, linear-gradient(180deg, rgba(166, 104, 42, 0.78), rgba(150, 92, 36, 0.82)));
  clip-path: polygon(0 0, 100% 0, 100% 96%, 88% 100%, 76% 96%, 62% 100%, 50% 96%, 38% 100%, 24% 96%, 12% 100%, 0 96%);
  box-shadow: inset 0 0 0 1px rgba(90, 50, 14, 0.3);
}
.parcel-label {
  position: absolute;
  z-index: 1;
  left: 8cqi;
  bottom: 8cqi;
  display: grid;
  gap: 1.2cqi;
  width: 40cqi;
  padding: 2.6cqi 3cqi 3cqi;
  background: #fbf8f1;
  color: #2a2240;
  box-shadow: 0 0.6cqi 1.2cqi rgba(60, 30, 8, 0.35);
  transform: rotate(-2deg);
}
.parcel-label b {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
  font-size: 6.4cqi;
  line-height: 1;
  white-space: nowrap;
}
.parcel-label b span {
  color: var(--pink-deep);
}
.parcel-label small {
  font-weight: 700;
  font-size: 3.6cqi;
  line-height: 1.2;
  color: #5d5577;
}
.parcel-label i {
  display: block;
  height: 6cqi;
  background: repeating-linear-gradient(90deg, #2a2240 0 0.5cqi, transparent 0.5cqi 1cqi, #2a2240 1cqi 2cqi, transparent 2cqi 2.6cqi, #2a2240 2.6cqi 2.9cqi, transparent 2.9cqi 3.8cqi);
}
.parcel-fragile {
  position: absolute;
  z-index: 1;
  right: 9cqi;
  bottom: 11cqi;
  padding: 1.4cqi 3cqi;
  background: #d8283f;
  color: #fff;
  font-weight: 700;
  font-size: 5cqi;
  line-height: 1;
  box-shadow: 0 0.6cqi 1.2cqi rgba(60, 30, 8, 0.35);
  transform: rotate(6deg);
}
.stk {
  position: absolute;
  z-index: 2;
  height: auto;
  filter: drop-shadow(0 0.5cqi 0.7cqi rgba(60, 30, 8, 0.45));
}
.stk-paw {
  right: 9cqi;
  top: 3cqi;
  width: 15cqi;
  transform: rotate(12deg);
}
.stk-fox {
  left: 7cqi;
  top: 27cqi;
  width: 21cqi;
  transform: rotate(-12deg);
}
.stk-star {
  left: 29cqi;
  top: 27cqi;
  width: 8cqi;
  transform: rotate(10deg);
}
.stk-uwu {
  right: 6cqi;
  top: 31cqi;
  width: 23cqi;
  transform: rotate(7deg);
}
.stk-heart {
  left: 45cqi;
  top: 69cqi;
  width: 10cqi;
  transform: rotate(16deg);
}

/* ═════════════ Pages : Musée, salles, catalogue ═════════════ */
.progress {
  display: grid;
  gap: 0.4rem;
  width: min(320px, 100%);
}
.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--s-1);
  color: var(--muted);
}
.progress-label b {
  color: var(--ink);
}
.bar {
  height: 10px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pink), var(--r4));
}
/* Musée, Œuvres : les cadres puis les sortes d'œuvres, chacun dans une barre partagée aux coupures
   nettes ; chaque morceau s'allume ou s'éteint (aucun allumé : tout est montré) */
.mus-tools .mus-select {
  margin-left: auto;
}
.mus-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: -0.35rem 0 1.25rem;
}
/* Étoiles, flammes, portes : les œuvres protégées */
.seg-protect .seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.seg-protect .seg-btn {
  padding-inline: 0.6rem;
}
.seg-protect .icon {
  width: 17px;
  height: 17px;
}
.seg-protect .p-free .icon {
  color: var(--muted);
}
.seg-protect .p-star .icon {
  color: #f4c64e;
}
.seg-protect .p-flame .icon {
  color: #ff7b39;
}
.seg-protect .p-door .icon {
  color: #e2b878;
}
.seg {
  display: inline-flex;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(var(--deep), 0.5);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0 0.95rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--s-1);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
/* La coupure entre deux morceaux */
.seg-btn + .seg-btn {
  box-shadow: inset 1px 0 0 var(--line);
}
.seg-btn:hover {
  background: rgba(var(--light), 0.07);
  color: var(--ink);
}
.seg-btn[aria-pressed='true'] {
  background: var(--ink);
  color: rgb(var(--deep));
}
.seg-btn[aria-pressed='true'] + .seg-btn {
  box-shadow: none;
}
.seg-btn:focus-visible {
  outline: 3px solid var(--r4);
  outline-offset: -3px;
}
.seg-frames .seg-btn {
  width: 46px;
  padding: 0;
}
.seg-frames .seg-btn .swatch {
  width: 20px;
  height: 15px;
}
.seg-frames .seg-btn[aria-pressed='true'] {
  background: rgba(var(--light), 0.85);
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .mus-filters {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .mus-filters > * {
    min-width: 0;
  }
  .seg .seg-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-inline: 0.4rem;
  }
  /* Au téléphone, « Sélectionner » devient une simple coche */
  .mus-tools .mus-select {
    flex: none;
    width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
  }
  .mus-tools .sel-label {
    display: none;
  }
}
.wallet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.wallet-balance {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: #ffe3a0;
  font-size: var(--s1);
}
.wallet-balance small {
  color: var(--muted);
  font-size: var(--s-1);
}
.btn .gain {
  color: #ffe3a0;
}

/* Séries & BD */
.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
}
.series-tile {
  display: grid;
  gap: 0.8rem;
  padding: 1rem 1rem 1.1rem;
  border-radius: 14px;
  background: rgba(var(--deep-2), 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  text-decoration: none;
}
.series-tile:hover {
  background: rgba(var(--panel-rgb), 0.7);
}
.series-tile.complete {
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.55), 0 0 24px -10px rgba(242, 193, 78, 0.7);
}
.sv-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 180px;
}
.sv-ghost {
  position: absolute;
  width: 110px;
  height: 140px;
  background: var(--paper);
  border: 5px solid #2d2838;
  box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.7);
  transform: rotate(-7deg) translateX(-14px);
  opacity: 0.55;
}
.sv-ghost.two {
  transform: rotate(6deg) translateX(14px);
  opacity: 0.4;
}
.sv-piece {
  position: relative;
  width: min(100%, calc(150px * var(--r) + 2 * (var(--fw) + var(--mw))));
  max-height: 180px;
}
.sv-piece::before {
  display: none;
}
.sv-info {
  display: grid;
  gap: 0.3rem;
}
.sv-kind {
  color: var(--muted);
  font-size: var(--s-1);
  font-weight: 700;
}
.sv-done {
  margin-left: 0.3rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--r4);
  color: #42280a;
  font-size: 0.75rem;
}
.sv-name {
  font-family: var(--display);
  font-weight: 650;
  font-variation-settings: 'SOFT' 50, 'opsz' 48;
  font-size: var(--s1);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.series-tile .bar {
  height: 6px;
}
.room-head .room-desc {
  margin: 0.45rem 0 0;
}

.frame-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 620px) {
  .frame-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.frame-cell {
  display: grid;
  gap: 0.3rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: var(--panel);
  font-size: var(--s-1);
  color: var(--muted);
}
.frame-cell .name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--ink);
}
.frame-cell .bar {
  height: 6px;
}
.frame-cell .bar > i {
  background: var(--rc);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.filters .input {
  width: auto;
  flex: 1 1 220px;
}
.filters select.input {
  flex: 0 0 auto;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.3rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  font-size: var(--s-1);
  text-decoration: none;
  cursor: pointer;
}
.pill[aria-pressed='true'],
.pill[aria-selected='true'] {
  background: var(--paper);
  color: var(--paper-ink);
}
.empty {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
}
.empty h2 {
  margin: 0;
  font-size: var(--s2);
  color: var(--ink);
}
.load-more {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.loading {
  padding: 3rem;
  text-align: center;
  color: var(--muted);
}

/* En-tête de salle */
.room-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  align-items: end;
  margin-bottom: 1rem;
}
@media (max-width: 680px) {
  .room-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .room-side > .progress {
    flex: 1;
    width: auto;
  }
}
.room-kind {
  margin: 0 0 0.3rem;
  color: var(--muted);
  font-weight: 700;
}
.room-head h1 {
  margin: 0;
  font-size: clamp(var(--s3), calc(6 * var(--vw)), var(--s5));
  line-height: 1;
  overflow-wrap: anywhere;
}
/* Titres très longs (séries surtout) : plus petits */
.room-head h1.long {
  font-size: clamp(var(--s2), calc(3.6 * var(--vw)), var(--s4));
  line-height: 1.08;
}
.room-side {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  max-width: 100%;
}
.room-side > .progress {
  width: 300px;
  max-width: 100%;
}
.room-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}
/* Boxes d'une salle : la petite box et son stock, puis un bouton coupé en deux (1 | ×10),
   bleu pour la Série box, vert pour l'Artist box */
.box-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  padding: 0 0.2rem 0 0.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.box-stock svg {
  width: 26px;
  height: 26px;
}
.box-stock.kind-spec svg {
  color: #8fb0ec;
}
.box-stock.kind-artist svg {
  color: #5fd68a;
}
.box-stock.empty {
  opacity: 0.5;
}
.split-btn {
  --sb: var(--panel-2);
  --sb-hover: var(--line);
  --sb-deep: rgba(0, 0, 0, 0.35);
  display: inline-flex;
  min-height: 44px;
  border-radius: 999px;
  background: var(--sb);
  color: #fff;
  box-shadow: 0 4px 0 var(--sb-deep);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.split-btn.kind-spec {
  --sb: #3f6cc6;
  --sb-hover: #5481d8;
  --sb-deep: #284a8f;
}
.split-btn.kind-artist {
  --sb: #2d8a66;
  --sb-hover: #3aa079;
  --sb-deep: #1d6148;
}
.split-btn.ghost {
  --sb: transparent;
  --sb-hover: var(--panel);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line);
}
.split-btn > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.split-btn .sb-main {
  padding: 0.6em 1em 0.6em 1.25em;
  border-radius: 999px 0 0 999px;
}
/* Une seule box suffit : pas de « ×10 », le bouton redevient entier */
.split-btn .sb-main:last-child {
  padding-right: 1.25em;
  border-radius: 999px;
}
/* Petite séparation entre « Mode lecture » et les boutons de box */
.room-sep {
  align-self: center;
  width: 2px;
  height: 26px;
  margin-inline: 0.25rem;
  border-radius: 2px;
  background: var(--line);
}
.room-actions > .room-sep:first-child {
  display: none;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .room-sep {
    display: none;
  }
}
.split-btn .sb-side {
  min-width: 3.4em;
  padding: 0.6em 1em 0.6em 0.8em;
  border-radius: 0 999px 999px 0;
  /* la coupure, aux quatre cinquièmes du bouton */
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.32);
  font-variant-numeric: tabular-nums;
}
.split-btn.ghost .sb-side {
  box-shadow: inset 2px 0 0 var(--line);
}
.split-btn > button:hover {
  background: var(--sb-hover);
}
.split-btn > button:active {
  transform: translateY(1px);
}
.split-btn > button:focus-visible {
  outline: 3px solid var(--r4);
  outline-offset: 2px;
}
.split-btn .gain {
  color: #ffe3a0;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--s-1);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.chip:hover {
  background: var(--panel-2);
}
.chip small {
  color: var(--muted);
}
.chip.k-artist {
  background: color-mix(in srgb, var(--pink) 24%, var(--panel));
}
.chip.k-character {
  background: color-mix(in srgb, #3dd6a3 18%, var(--panel));
}
.chip.k-species {
  background: color-mix(in srgb, var(--r2) 24%, var(--panel));
}
.chip.k-copyright {
  background: color-mix(in srgb, var(--r4) 20%, var(--panel));
}
.chip.k-pool {
  background: color-mix(in srgb, #ff9a3d 26%, var(--panel));
}
/* Une salle de Mon musée, montrée comme un tag (fiche d'une œuvre, salle d'une série) */
.chip.k-room {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: color-mix(in srgb, #f2c14e 22%, var(--panel));
}
.chip.k-room .icon {
  width: 14px;
  height: 14px;
}
.room-rooms {
  margin: 0.2rem 0 0.9rem;
}
.related {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}
.related h2 {
  margin: 0 0 0.5rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--s0);
  letter-spacing: 0;
  color: var(--muted);
}

/* Catalogue */
.tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
/* Sous les grands onglets (Musée, Catalogue), un trait qui les sépare des outils */
.tabs-ruled {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.15rem;
}
/* Entre les onglets artistes / séries et les autres, un petit trait */
.tab-sep {
  align-self: center;
  width: 2px;
  height: 22px;
  margin-inline: 0.4rem;
  border-radius: 2px;
  background: var(--line);
}
.cat-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.cat-item a {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  background: var(--panel);
  text-decoration: none;
}
.cat-item a:hover {
  background: var(--panel-2);
}
.cat-item .top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 700;
}
.cat-item .top span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-item .top small {
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}
.cat-item .bar {
  height: 6px;
}

/* Étoiles d'une salle, sous son nom */
.room-stars {
  display: flex;
  align-items: center;
  flex: none;
  gap: 0;
  margin-bottom: -6px; /* les étoiles s'alignent sur la barre de progression */
}
.room-stars .star {
  display: grid;
  place-items: center;
  width: 30px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(var(--light), 0.28);
  cursor: pointer;
  transition: color 0.12s, transform 0.12s;
}
.room-stars .star svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.room-stars .star.on {
  color: #f4c64e;
}
.room-stars .star:hover,
.room-stars .star:has(~ .star:hover) {
  color: #ffd86b;
}
.room-stars:hover .star:hover ~ .star {
  color: rgba(var(--light), 0.28);
}
.room-stars .star:active {
  transform: scale(0.88);
}

/* Noms longs : plus petits, sur une seule ligne (la fin cachée) ; les tuiles d'une rangée gardent
   toutes la même hauteur. Séries : deux lignes au plus, la place des deux toujours gardée. */
.cat-item {
  display: flex;
  flex-direction: column;
}
.cat-item > a {
  flex: 1;
  align-content: start;
}
.cat-item a {
  grid-template-columns: minmax(0, 1fr);
}
.cat-item .top {
  min-width: 0;
}
.cat-item .top span.cat-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.cat-item.has-cover .top {
  align-items: flex-start;
  min-height: 2.5em;
}
.cat-item.has-cover .top span.cat-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: break-word;
}
.cat-item .top small {
  flex: none;
  white-space: nowrap;
}
.cat-item .top.name-l span.cat-name {
  font-size: 0.92em;
}
.cat-item .top.name-xl span.cat-name {
  font-size: 0.82em;
}
/* Couverture d'une série, en grand entre le nom et la barre, au format d'une page de BD */
.cat-list:has(.has-cover) {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.cat-cover {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  background: rgba(var(--deep), 0.6);
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.12), 0 6px 14px -8px rgba(0, 0, 0, 0.7);
}
.cat-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%; /* le haut de la première planche : le titre, souvent */
  transition: transform 0.4s ease;
}
.cat-item a:hover .cat-cover img {
  transform: scale(1.03);
}
.cat-cover.is-blurred img {
  filter: blur(9px) saturate(0.85);
  transform: scale(1.15);
}
.cat-cover.is-none {
  display: grid;
  place-items: center;
  color: rgba(var(--light), 0.25);
}
.cat-cover.is-none svg {
  width: 38%;
  height: auto;
}
/* Au téléphone : deux séries par rangée, le compte passe sous le nom, la date seule */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .cat-list:has(.has-cover) {
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  }
  .cat-item.has-cover a {
    padding: 0.7rem 0.75rem;
  }
  .cat-item.has-cover .top {
    flex-direction: column;
    gap: 0.1rem;
    min-height: 3.7em;
  }
  .cat-item.has-cover .cd-pre {
    display: none;
  }
}
.cat-item.done .cat-cover {
  box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.65), 0 6px 14px -8px rgba(242, 193, 78, 0.5);
}

/* Glisser-déposer (ordinateur) : on attrape une tuile et on la dépose dans un groupe d'étoiles */
#cat:not(.rated) .cat-group-h {
  display: none;
}
.cat-group.is-empty {
  display: none;
}
#cat.dragging .cat-group {
  border-radius: 16px;
  outline: 2px dashed transparent;
  outline-offset: 8px;
  transition: outline-color 0.15s, background 0.15s;
}
#cat.dragging .cat-group.drop-over {
  outline-color: #f4c64e;
  background: rgba(244, 198, 78, 0.06);
}
.cat-item[draggable='true'] {
  cursor: grab;
}
.cat-item.is-dragged {
  opacity: 0.35;
}
/* Pendant le glisser : quatre cases en bas de l'écran, pour ne pas avoir à remonter la liste */
.cat-dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 60;
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(var(--deep), 0.92);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(var(--light), 0.12);
  translate: -50% 140%;
  opacity: 0;
  pointer-events: none;
  transition: translate 0.22s ease, opacity 0.22s ease;
}
#cat.dragging .cat-dock {
  translate: -50% 0;
  opacity: 1;
  pointer-events: auto;
}
@media (pointer: coarse), (max-width: 720px) {
  .cat-dock {
    display: none;
  }
}
.cat-dock-slot {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 108px;
  padding: 12px 14px;
  border: 2px dashed rgba(var(--light), 0.22);
  border-radius: 12px;
  font-weight: 700;
  font-size: var(--s-1);
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.cat-dock-slot.drop-over {
  border-color: #f4c64e;
  background: rgba(244, 198, 78, 0.12);
  transform: translateY(-3px);
}

/* Vignette : la meilleure œuvre du joueur pour cet artiste, ce personnage ou cette espèce, recadrée en carré */
.cat-list:has(.has-thumb) {
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
}
.cat-item .cat-date {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cat-item.has-thumb a {
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: center;
}
.cat-item.has-thumb a > :not(.cat-thumb) {
  grid-column: 2;
}
.cat-thumb {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(var(--deep), 0.6);
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.6);
}
.cat-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Les personnages ont souvent la tête dans le haut de l'image */
  object-position: 50% 22%;
}
.cat-thumb.is-blurred img {
  filter: blur(7px) saturate(0.85);
  transform: scale(1.15);
}
.cat-item.done .cat-thumb {
  box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.7), 0 4px 12px -4px rgba(242, 193, 78, 0.5);
}

/* Étoiles : 0 à 3 par entrée, pour ranger son catalogue */
.cat-item {
  position: relative;
}
.cat-stars {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  z-index: 1;
  display: flex;
}
.cat-stars .star {
  display: grid;
  place-items: center;
  width: 20px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: rgba(var(--light), 0.28);
  cursor: pointer;
  transition: color 0.12s, transform 0.12s;
}
.cat-stars .star svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.cat-stars .star.on {
  color: #f4c64e;
}
/* Survol : les étoiles jusqu'à celle visée s'allument */
.cat-stars .star:hover,
.cat-stars .star:has(~ .star:hover) {
  color: #ffd86b;
}
.cat-stars:hover .star:hover ~ .star {
  color: rgba(var(--light), 0.28);
}
.cat-stars .star:active {
  transform: scale(0.88);
}
.cat-stars .star:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: -2px;
}
.cat-item .cat-date {
  padding-right: 66px;
}
.cat-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: -0.4rem 0 1rem;
}
/* Tri du catalogue, à côté de la recherche ; la double flèche l'inverse */
.cat-sort {
  display: flex;
  gap: 0.4rem;
}
.cat-sort .input {
  width: auto;
}
.cat-reverse {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
}
.cat-reverse svg {
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease;
}
.cat-reverse[aria-pressed='true'] svg {
  transform: scaleY(-1);
}
.cat-tools .fine {
  margin: 0;
}
.cat-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
}
.cat-search svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  color: var(--muted);
  pointer-events: none;
}
.cat-search .input {
  padding-left: 2.5rem;
}
/* Propositions sous la barre de recherche, comme sur e621 : la couleur dit la sorte de tag */
.suggest {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  max-height: min(calc(60 * var(--vh)), 420px);
  overflow-y: auto;
  padding: 5px;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -12px rgba(0, 0, 0, 0.75);
}
.suggest[hidden] {
  display: none;
}
.sg-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tk, var(--ink));
  font: inherit;
  font-size: var(--s-1);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.sg-item:hover,
.sg-item.on {
  background: rgba(var(--light), 0.1);
}
.sg-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sg-item small {
  flex: none;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tk-artist {
  --tk: #f2b84b;
}
.tk-character {
  --tk: #7fd38b;
}
.tk-species {
  --tk: #f29068;
}
.tk-copyright {
  --tk: #d79cf0;
}
.tk-general {
  --tk: #a9c8ec;
}
.tk-meta {
  --tk: #d6d6d6;
}
.tk-pool {
  --tk: #8fb0ec;
}
.tk-room {
  --tk: #f2c14e;
}
.cat-hint {
  margin: -0.3rem 0 1rem;
}
.cat-more {
  display: flex;
  justify-content: center;
  margin-top: 1.4rem;
}
.empty-line {
  color: var(--muted);
}
.cat-group + .cat-group {
  margin-top: 1.6rem;
}
.cat-group-h {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.7rem;
  font-size: var(--s1);
}
.cat-group-h small {
  color: var(--muted);
  font-weight: 700;
  font-size: var(--s-1);
}
/* La flèche qui replie ou déplie un groupe d'étoiles (ou de flammes) */
.cat-fold {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0 -0.35rem;
  padding: 0.15rem 0.45rem 0.15rem 0.3rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cat-fold:hover {
  background: rgba(var(--light), 0.06);
}
.cat-fold:focus-visible {
  outline: 3px solid var(--r4);
  outline-offset: 2px;
}
.cat-fold .fold-arrow {
  width: 15px;
  height: 15px;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}
.cat-group.is-folded .fold-arrow {
  transform: rotate(0deg);
}
.cat-group.is-folded .cat-list {
  display: none;
}
/* Repliés, les groupes se serrent les uns contre les autres */
.cat-group.is-folded .cat-group-h {
  margin-bottom: 0;
}
.cat-group + .cat-group.is-folded {
  margin-top: 0.9rem;
}
.cat-group.is-folded + .cat-group {
  margin-top: 0.25rem;
}
.star-row {
  display: inline-flex;
  gap: 1px;
}
.star-row i {
  display: block;
  width: 18px;
  height: 18px;
  color: rgba(var(--light), 0.22);
}
.star-row i.on {
  color: #f4c64e;
}
/* Flammes (personnages, univers, espèces, tags) : orange, pour les distinguer des étoiles */
.star-row.is-flame i.on,
.cat-stars.is-flame .star.on,
.room-stars.is-flame .star.on {
  color: #ff7b39;
}
.cat-stars.is-flame .star:hover,
.cat-stars.is-flame .star:has(~ .star:hover),
.room-stars.is-flame .star:hover,
.room-stars.is-flame .star:has(~ .star:hover) {
  color: #ff9a5c;
}
.star-row svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
/* Entrée terminée : la carte prend un dégradé doré, comme la God box de la boutique, un peu plus marqué */
.cat-item.done a {
  background: linear-gradient(135deg, color-mix(in srgb, #f2c14e 30%, var(--panel)), color-mix(in srgb, #f2c14e 6%, var(--panel)) 55%, var(--panel) 85%);
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.55), 0 6px 18px -10px rgba(242, 193, 78, 0.55);
}
.cat-item.done a:hover {
  background: linear-gradient(135deg, color-mix(in srgb, #f2c14e 36%, var(--panel-2)), color-mix(in srgb, #f2c14e 8%, var(--panel-2)) 55%, var(--panel-2) 85%);
}
.cat-item.done .top small {
  color: #f2c14e;
  font-weight: 700;
}
.cat-item.done .bar {
  background: rgba(242, 193, 78, 0.18);
}
.cat-item.done .bar i {
  background: linear-gradient(90deg, #f2c14e, #ffe8a3);
}
.cat-done-mark {
  display: inline-grid;
  vertical-align: -3px;
  margin-right: 0.3rem;
}
.cat-done-mark svg {
  width: 15px;
  height: 15px;
}
/* L'entrée qu'on vient d'étoiler, à sa nouvelle place */
.cat-item.moved a {
  animation: cat-moved 1.1s ease;
}
@keyframes cat-moved {
  0% {
    box-shadow: 0 0 0 3px #f4c64e, 0 0 24px rgba(244, 198, 78, 0.6);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 198, 78, 0);
  }
}

/* ═════════════ Fiche d'une œuvre ═════════════ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: clamp(0.5rem, calc(3 * var(--vw)), 2rem);
  background: rgba(var(--deep), 0.74);
  backdrop-filter: blur(2px);
  animation: fade 0.18s ease;
}
@keyframes fade {
  from { opacity: 0; }
}
.sheet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr);
  width: min(1140px, 100%);
  max-height: calc(calc(100 * var(--dvh)) - 2rem);
  border-radius: 18px;
  background: var(--wall-deep);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
@media (max-width: 760px) {
  .sheet {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }
}
.sheet-art,
.sheet-info {
  min-width: 0;
}
.sheet-art {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: clamp(1rem, calc(3 * var(--vw)), 2rem);
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(var(--light), 0.14), transparent 75%), var(--wall);
}
.sheet-art img,
.sheet-art video {
  max-height: calc(calc(100 * var(--dvh)) - 6rem);
  width: auto;
  max-width: 100%;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8);
}
.sheet-info {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.1rem, calc(3 * var(--vw)), 1.8rem);
  overflow-y: auto;
}
.sell-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  color: var(--muted);
  font-size: var(--s-1);
}
.sell-row b {
  color: #ffe3a0;
  font-size: var(--s0);
}
.cartel-big {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.2rem 1.1rem;
  border-radius: 3px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
.cartel-big.r-3,
.cartel-big.r-4,
.cartel-big.r-5 {
  padding-inline: 1.8rem;
  background-position: 0 0;
}
.cartel-big.r-3 {
  background:
    radial-gradient(circle at 12px 14px, #6e7486 0 2.2px, rgba(255, 255, 255, 0.8) 2.8px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 12px) 14px, #6e7486 0 2.2px, rgba(255, 255, 255, 0.8) 2.8px, transparent 3.4px),
    radial-gradient(circle at 12px calc(100% - 14px), #6e7486 0 2.2px, rgba(255, 255, 255, 0.8) 2.8px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 14px), #6e7486 0 2.2px, rgba(255, 255, 255, 0.8) 2.8px, transparent 3.4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f7f9fc, #c3c9d6 55%, #e6e9f0);
}
.cartel-big.r-4,
.cartel-big.r-5 {
  background:
    radial-gradient(circle at 12px 14px, #7a520c 0 2.2px, rgba(255, 245, 210, 0.8) 2.8px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 12px) 14px, #7a520c 0 2.2px, rgba(255, 245, 210, 0.8) 2.8px, transparent 3.4px),
    radial-gradient(circle at 12px calc(100% - 14px), #7a520c 0 2.2px, rgba(255, 245, 210, 0.8) 2.8px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 14px), #7a520c 0 2.2px, rgba(255, 245, 210, 0.8) 2.8px, transparent 3.4px),
    linear-gradient(180deg, #fff0bd, #e9bb52 46%, #cf9a30 54%, #f4d57f);
}
.cartel-big h2 {
  margin: 0;
  font-size: var(--s3);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.cartel-big .by {
  font-size: var(--s1);
}
.cartel-big .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.3rem;
  font-size: var(--s-1);
}
.cartel-big .meta span {
  opacity: 0.8;
}
.frame-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: var(--s-1);
}
.info-block h3 {
  margin: 0 0 0.4rem;
  font-size: var(--s-1);
  color: var(--muted);
}
.close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 5;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--deep), 0.75);
  cursor: pointer;
}
.close svg {
  width: 20px;
  height: 20px;
}
details.tags summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
  font-size: var(--s-1);
}
details.tags .chips {
  margin-top: 0.6rem;
}

/* ═════════════ Ouverture d'un colis ═════════════ */
.opening {
  --tint: rgba(var(--light), 0.12);
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background:
    radial-gradient(700px 560px at 50% 40%, var(--tint), transparent 70%),
    linear-gradient(180deg, rgba(var(--deep-2), 0.9), rgba(var(--deep), 0.95)),
    var(--decor-bg);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.6s ease;
}
.opening[data-r='2'] { --tint: rgba(94, 136, 234, 0.3); }
.opening[data-r='3'] { --tint: rgba(214, 219, 231, 0.26); }
.opening[data-r='4'] { --tint: rgba(242, 193, 78, 0.36); }
.opening[data-phase='summary'] {
  display: block;
  overflow-y: auto;
  user-select: auto;
  -webkit-user-select: auto;
  /* Récapitulatif : le décor reste visible (pas d'aplat), légèrement assombri */
  background:
    radial-gradient(900px 480px at 50% -60px, rgba(var(--light), 0.12), transparent 70%),
    linear-gradient(180deg, rgba(var(--deep), 0.45), rgba(var(--deep), 0.6)),
    var(--decor-bg);
}
.op-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(620px, 100%);
  min-height: 44px;
}
.op-pips {
  display: flex;
  gap: 6px;
}
.op-pips i {
  width: 28px;
  height: 6px;
  border-radius: 99px;
  background: var(--panel-2);
  transition: background 0.3s ease, transform 0.3s ease;
}
.op-pips i.now {
  background: var(--ink);
  transform: scaleY(1.4);
}
.op-pips i.done {
  background: var(--rc);
}
.op-right {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.op-sound {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.op-sound:hover {
  color: var(--ink);
}
.op-sound svg {
  width: 22px;
  height: 22px;
}
.op-skip {
  min-height: 44px;
  padding: 0 0.6rem;
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}
.op-skip:hover {
  color: var(--ink);
}
.op-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  container-type: size;
}
.op-foot {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.55rem;
  min-height: 132px;
  width: min(620px, 100%);
  text-align: center;
}
.op-hint {
  margin: 0;
  color: var(--muted);
}
.op-rarity {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-weight: 650;
  font-size: var(--s2);
  line-height: 1.1;
  color: var(--rc);
  animation: pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.op-rarity small {
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--s-1);
  color: var(--muted);
}
.op-rarity .swatch {
  width: 24px;
  height: 18px;
  border-width: 4px;
}
.op-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}
.op-badges .chip {
  animation: pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms + 120ms);
}
.op-new,
.op-dup {
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: var(--s-1);
}
.op-new {
  background: var(--pink);
  color: #fff;
}
.op-dup {
  background: var(--panel-2);
  color: var(--muted);
}

/* Le colis à ouvrir */
.parcel {
  position: relative;
  width: min(calc(76 * var(--vw)), 360px, calc(46 * var(--dvh)));
  aspect-ratio: 10 / 9;
  container-type: inline-size;
  cursor: pointer;
  touch-action: manipulation;
  outline-offset: 10px;
}
/* La lueur et le contour de sélection suivent le colis quand il bouge (et non sa place d'origine) */
.cr-float::before {
  content: '';
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--light), 0.22), transparent);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.parcel:focus-visible {
  outline: none;
}
.parcel:focus-visible:not(.opened):not(.spent) .cr-float {
  outline: 3px solid var(--r4);
  outline-offset: 10px;
  border-radius: 14px;
}
.cr-float {
  position: absolute;
  inset: 0;
  animation: bob 3.4s ease-in-out infinite;
}
@keyframes bob {
  50% { transform: translateY(-7px) rotate(-0.8deg); }
}
.cr-part {
  position: absolute;
  inset: 0;
}
.cr-flap {
  z-index: 2;
}
.cr-flap.left {
  clip-path: inset(0 50% 74.5% 0);
  transform-origin: 0% 25%;
}
.cr-flap.right {
  clip-path: inset(0 0 74.5% 50%);
  transform-origin: 100% 25%;
}
.cr-body {
  clip-path: inset(25.5% 0 0 0);
}
/* La lumière qui sort du colis ouvert : centrée sur l'ouverture (à 25,5 % du haut du colis) et
   fondue de tous les côtés, sans bord net au-dessus du carton */
.cr-light {
  position: absolute;
  z-index: 1;
  left: 2%;
  right: 2%;
  top: -6%;
  height: 76%;
  background: radial-gradient(ellipse 48% 40% at 50% 41%, #fff, rgba(255, 228, 170, 0.6) 38%, rgba(255, 228, 170, 0.18) 68%, transparent 100%);
  opacity: 0;
  pointer-events: none;
}
.cr-spark {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 24%;
  width: 0;
  height: 0;
}
.parcel.primed .cr-float {
  animation: prime 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.parcel.primed .cr-float::before {
  transform: scale(1.15);
}
@keyframes prime {
  40% { transform: translateY(-14px) scale(1.03) rotate(1.6deg); }
}
.parcel.opened {
  cursor: default;
}
.parcel.opened .cr-float {
  animation: squash 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) forwards;
}
.parcel.opened .cr-float::before {
  background: radial-gradient(closest-side, rgba(255, 240, 210, 0.5), rgba(var(--light), 0.25) 55%, transparent);
  transform: scale(1.3);
}
.parcel.opened .cr-flap.left {
  animation: flap-left 0.8s 0.08s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.parcel.opened .cr-flap.right {
  animation: flap-right 0.8s 0.14s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.parcel.opened .cr-light {
  animation: leak 0.9s 0.12s ease-out forwards;
}
.parcel.waiting .cr-body {
  animation: wiggle 0.5s ease-in-out infinite;
}
@keyframes squash {
  22% { transform: scale(1.06, 0.94); }
  55% { transform: scale(0.98, 1.03) translateY(-5px); }
  100% { transform: none; }
}
@keyframes flap-left {
  25% { transform: translateY(-4%) rotate(-6deg); }
  to { transform: translate(-30%, -45%) rotate(-48deg); opacity: 0; }
}
@keyframes flap-right {
  25% { transform: translateY(-4%) rotate(6deg); }
  to { transform: translate(30%, -45%) rotate(48deg); opacity: 0; }
}
@keyframes leak {
  35% { opacity: 1; }
  to { opacity: 0.85; }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}
.parcel.spent {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.parcel.spent .cr-flap {
  display: none;
}
.parcel.spent .cr-light {
  opacity: 0.85;
}
.parcel.spent .cr-float {
  animation: parcel-drop 0.6s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
.parcel.spent .cr-float::before {
  opacity: 0;
}
@keyframes parcel-drop {
  45% { opacity: 1; }
  80% { opacity: 0; }
  to { transform: translateY(calc(60 * var(--vh))) rotate(-5deg) scale(0.92); opacity: 0; }
}

/* Une œuvre en grand */
.show {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
}
.show .piece {
  --u: 1.5px;
  user-select: none;
  -webkit-user-drag: none;
  /* La plus grande taille qui tient dans la scène, cartel compris */
  width: min(calc(100cqw - 28px), 640px, calc((100cqh - 96px - 2 * (var(--fw) + var(--mw))) * var(--r) + 2 * (var(--fw) + var(--mw))));
  touch-action: none;
  cursor: pointer;
}
@media (max-width: 520px) {
  .show .piece {
    --u: 1.1px;
  }
}
.show .piece::before {
  top: -160px;
  bottom: 35%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--light), 0.2), transparent);
}
.show .cartel {
  font-size: 13px;
  padding: 6px 12px 7px;
}
.show .cartel b {
  font-size: 15px;
}
.show.rise {
  animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.show.hang .piece {
  animation: hang 0.55s cubic-bezier(0.25, 0.9, 0.3, 1.15);
  transform-origin: 50% -30px;
}
.show.dragging .piece {
  transition: none;
}
.show.settle .piece {
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.show.out-left .piece {
  animation: out-left 0.34s cubic-bezier(0.3, 0.55, 0.45, 1) forwards;
}
.show.out-right .piece {
  animation: out-right 0.34s cubic-bezier(0.3, 0.55, 0.45, 1) forwards;
}
@keyframes rise {
  from { transform: translateY(32%) scale(0.85); }
}
/* Planche de série tirée au hasard : cachée, puis échangée contre la suite de la lecture */
.op-swap {
  margin: 0;
  max-width: 34rem;
  text-align: center;
  color: var(--ink);
}
.op-swap b {
  color: var(--r4);
}
.op-page {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--s-1);
  font-weight: 700;
}
.swap-show .piece {
  cursor: pointer;
}
.swap-show .piece.swap-out {
  transition: transform 0.38s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.38s ease-in;
  transform: rotateY(90deg) scale(0.92);
  opacity: 0.2;
}
.show.swap-in .piece {
  animation: swap-in 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes swap-in {
  from {
    transform: rotateY(-90deg) scale(0.92);
    opacity: 0.2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .swap-show .piece.swap-out,
  .show.swap-in .piece {
    transition: none;
    animation: none;
  }
}

@keyframes hang {
  from { transform: translateX(55%) rotate(5deg); opacity: 0; }
  70% { transform: translateX(-2%) rotate(-1.5deg); opacity: 1; }
}
/* Ouverture : glisser à gauche garde, à droite revend ; « Garder » et « Revendre » sur les côtés de
   la scène pendant le geste, celui vers lequel on glisse grossit */
#slot {
  display: grid;
  place-items: center;
}
#slot > .show {
  grid-area: 1 / 1;
}
#slot > .show.leaving {
  z-index: 3;
  pointer-events: none;
}
#slot > .show.leaving .rays {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.show.enter .piece {
  animation: enter 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.show.quick.enter .piece {
  animation-duration: 0.17s;
}
@keyframes enter {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
}
.swipe-hints {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(6px, calc(3 * var(--vw)), 48px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.swipe-hints.on {
  opacity: 1;
}
.sh {
  --x: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1.05em;
  border-radius: 999px;
  font: 900 clamp(14px, calc(1.7 * var(--vw)), 19px) / 1 var(--body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 2px currentColor, 0 12px 30px -10px rgba(0, 0, 0, 0.75);
  opacity: calc(0.4 + var(--x) * 0.6);
  transform: scale(calc(0.86 + var(--x) * 0.22));
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.sh .icon {
  width: 1.1em;
  height: 1.1em;
}
.sh.keep {
  --x: var(--keep, 0);
  background: rgba(14, 40, 28, 0.88);
  color: #7fe8ad;
}
.sh.sell {
  --x: var(--sell, 0);
  background: rgba(48, 16, 16, 0.88);
  color: #ff9d8c;
}
.sh .gain {
  color: #ffe3a0;
  letter-spacing: 0;
}
.swipe-hints.armed-keep .sh.keep {
  background: #2c9a66;
  color: #fff;
}
.swipe-hints.armed-sell .sh.sell {
  background: #cf4a43;
  color: #fff;
}
@media (max-width: 520px) {
  .sh {
    padding: 0.5em 0.8em;
    font-size: 13px;
  }
}
@keyframes out-left {
  to { transform: translate(-120%, -3%) rotate(-12deg); opacity: 0; }
}
@keyframes out-right {
  to { transform: translate(120%, -3%) rotate(12deg); opacity: 0; }
}

/* Les Rares et mieux arrivent dans l'ombre : seul leur cadre se devine.
   Un tap allume le spot au-dessus de l'œuvre. */
.piece.unlit .frame {
  filter: brightness(0.55) saturate(0.8);
}
.piece.unlit .frame img,
.piece.unlit .frame .nsfw-veil {
  filter: brightness(0.16) saturate(0.35);
}
.piece.unlit .frame::after,
.piece.unlit::before {
  opacity: 0;
}
.piece.unlit .cartel {
  visibility: hidden;
}
.show .piece .frame img {
  transition: filter 0.7s ease;
}
/* Ouverture : l'aperçu (tout petit, chargé d'avance) flou sous l'image, le temps qu'elle arrive */
.mat-clip:has(> img.lqip) {
  overflow: hidden;
}
.frame img.lqip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  filter: blur(12px) saturate(1.1);
  transform: scale(1.06);
}
.mat-clip > img.lqip + img {
  position: relative;
  background: transparent;
}
.piece.unlit .frame img.lqip {
  filter: blur(12px) brightness(0.16) saturate(0.35);
}
.piece.lighting::before {
  animation: spot-on 0.6s ease-out;
}
@keyframes spot-on {
  0% { opacity: 0; }
  25% { opacity: 1; }
  40% { opacity: 0.35; }
  60%, 100% { opacity: 1; }
}
/* La couleur du cadre rayonne doucement derrière l'œuvre dans l'ombre */
.glow {
  position: absolute;
  z-index: -1;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--rc), transparent);
  opacity: 0.35;
  animation: glow-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
.piece.r-4 .glow,
.piece.r-5 .glow {
  animation-duration: 1.2s;
}
@keyframes glow-pulse {
  50% { opacity: 0.6; }
}
.piece.charging .glow {
  animation: none;
  opacity: 0.9;
  transform: scale(1.25);
  transition: transform 0.7s ease-in, opacity 0.7s ease-in;
}
.piece.lighting .glow {
  animation: glow-out 1s ease-out forwards;
}
@keyframes glow-out {
  from { opacity: 0.9; transform: scale(1.25); }
  to { opacity: 0; transform: scale(1.5); }
}
.sweep {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%) 120% 0 / 260% 100% no-repeat;
  mix-blend-mode: overlay;
  animation: sweep 1s 0.2s ease-out forwards;
}
@keyframes sweep {
  to { background-position: -60% 0; opacity: 0; }
}
.rays {
  position: absolute;
  z-index: -2;
  /* Toujours un carré centré sur l'œuvre, quelle que soit sa forme : en tournant, ses bords
     restent invisibles (le fondu s'arrête bien avant) */
  left: 50%;
  top: 50%;
  width: calc(180 * var(--vmax));
  height: calc(180 * var(--vmax));
  margin: calc(-90 * var(--vmax)) 0 0 calc(-90 * var(--vmax));
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 55%, transparent) 0 7deg, transparent 7deg 20deg);
  mask: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, 0.55) 22%, rgba(0, 0, 0, 0.18) 38%, transparent 56%);
  -webkit-mask: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, 0.55) 22%, rgba(0, 0, 0, 0.18) 38%, transparent 56%);
  opacity: 0.5;
  animation: spin 16s linear infinite;
}
.rays.boost {
  opacity: 1;
  animation-duration: 4s;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.op-flash {
  position: fixed;
  inset: 0;
  z-index: 66;
  background: #fff;
  pointer-events: none;
  animation: flash 0.8s ease-out forwards;
}
.op-flash.soft {
  background: #e6ebf5;
  animation-duration: 0.55s;
}
@keyframes flash {
  from { opacity: 0.95; }
  to { opacity: 0; }
}
.op-banner {
  position: absolute;
  z-index: 8;
  top: -0.2em;
  left: 50%;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
  font-size: clamp(2.2rem, calc(10 * var(--vw)), 3.8rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--r4);
  text-shadow: 0 3px 0 #8a5e10, 0 0 28px rgba(242, 193, 78, 0.85);
  pointer-events: none;
  animation: banner 1.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}
.op-banner.r-3 {
  color: #f4f6fb;
  text-shadow: 0 3px 0 #6c748a, 0 0 24px rgba(214, 219, 231, 0.9);
}
@keyframes banner {
  0% { transform: translateX(-50%) scale(0.3) rotate(-8deg); opacity: 0; }
  22% { transform: translateX(-50%) scale(1.16) rotate(-4deg); opacity: 1; }
  36% { transform: translateX(-50%) scale(1) rotate(-4deg); }
  80% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-24px) rotate(-4deg); opacity: 0; }
}

/* Particules */
.particles {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}
.particles i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
  animation: fly var(--d) cubic-bezier(0.1, 0.75, 0.3, 1) forwards;
}
.particles i.star {
  width: 18px;
  height: 18px;
  border-radius: 0;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
}
@keyframes fly {
  0% { transform: translate(-50%, -50%) scale(var(--s)); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(0.2); opacity: 0; }
}

/* Récapitulatif : nouvelles acquisitions */
.op-summary {
  display: grid;
  gap: 1.4rem;
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 1rem 0 0;
}
.op-summary h2 {
  margin: 0;
  font-size: clamp(var(--s3), calc(6 * var(--vw)), var(--s4));
  line-height: 1;
  text-align: center;
}
.op-sub {
  margin: -0.6rem 0 0;
  color: var(--muted);
  text-align: center;
}
.op-summary .wall > .piece {
  flex-grow: 0;
  animation: pop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
  animation-delay: calc(var(--i) * 80ms);
}
.sum-disc {
  display: grid;
  gap: 1.1rem;
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  background: var(--panel);
}
.sum-disc h3 {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-size: var(--s-1);
  color: var(--muted);
}
.sum-disc h3 b {
  color: var(--ink);
  font-size: var(--s0);
}
.sum-disc .chip {
  background: var(--panel-2);
}
.sum-disc .chip.k-artist {
  background: color-mix(in srgb, var(--pink) 28%, var(--panel-2));
}
.sum-disc .chip.k-character {
  background: color-mix(in srgb, #3dd6a3 20%, var(--panel-2));
}
.sum-disc .chip.k-species {
  background: color-mix(in srgb, var(--r2) 26%, var(--panel-2));
}
.sum-disc .chip.k-copyright {
  background: color-mix(in srgb, var(--r4) 22%, var(--panel-2));
}
.sum-disc .chips .chip {
  animation: pop 0.3s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
  animation-delay: calc(min(var(--i, 0), 30) * 18ms + 300ms);
}
.sum-empty {
  margin: 0;
  color: var(--muted);
}
.more-tags {
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 700;
  font-size: var(--s-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sum-actions {
  position: sticky;
  z-index: 2;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.2rem 0 calc(0.4rem + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--wall) 35%);
}
@media (max-width: 520px) {
  .sum-actions {
    gap: 0.4rem;
  }
  .sum-actions .btn {
    min-height: 40px;
    padding: 0.45em 0.95em;
    font-size: var(--s-1);
  }
}
@keyframes pop {
  from { transform: scale(0.5); opacity: 0; }
}

/* ═════════════ Connexion ═════════════ */
.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(2rem, calc(6 * var(--vw)), 5rem);
  align-items: center;
  width: min(1060px, 100%);
  min-height: calc(100 * var(--dvh));
  margin: 0 auto;
  padding: 2rem clamp(1rem, calc(4 * var(--vw)), 2.5rem);
}
@media (max-width: 820px) {
  .auth {
    grid-template-columns: 1fr;
    align-content: center;
  }
  .auth .parcel-zone {
    display: none;
  }
}
.auth-copy h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(3rem, calc(9 * var(--vw)), 5.4rem);
  font-weight: 700;
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
  line-height: 0.95;
}
.auth-copy h1 span {
  color: var(--pink);
}
.auth-copy p {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: var(--s1);
  max-width: 34ch;
}
.auth-card {
  display: grid;
  gap: 1rem;
  padding: clamp(1.2rem, calc(3 * var(--vw)), 1.8rem);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.auth-card .tabs {
  margin: 0;
}
.form-error {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pink) 20%, var(--panel));
  font-size: var(--s-1);
}
.fine {
  margin: 0;
  color: var(--muted);
  font-size: var(--s-1);
}

/* ═════════════ Réglages ═════════════ */
.settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 800px;
}
.setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: var(--panel);
}
.setting h2 {
  margin: 0 0 0.2rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--s0);
  letter-spacing: 0;
}
.setting p {
  margin: 0;
  color: var(--muted);
  font-size: var(--s-1);
  max-width: 60ch;
}
/* Réglages avec un choix en morceaux : au téléphone, le choix passe sous le texte */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .setting-wide {
    grid-template-columns: 1fr;
  }
}
/* Langue : petits drapeaux */
.setting-lang {
  grid-template-columns: 1fr;
}
.lang-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.lang-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.3rem 0.75rem 0.3rem 0.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: var(--s-1);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background 0.15s, box-shadow 0.15s;
}
.lang-opt:hover {
  background: rgb(var(--hover-rgb));
}
.lang-opt[aria-checked='true'] {
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: none;
}
.lang-opt .flag {
  display: block;
  width: 27px;
  height: 18px;
  flex: none;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.lang-opt .flag svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lang-picker.compact {
  justify-content: center;
  gap: 0.35rem;
}
.lang-picker.compact .lang-opt {
  min-height: 0;
  padding: 5px;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  opacity: 0.6;
}
.lang-picker.compact .lang-opt:hover {
  opacity: 1;
  background: var(--panel-2);
}
.lang-picker.compact .lang-opt[aria-checked='true'] {
  opacity: 1;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 2px var(--paper);
}
.lang-picker.compact .flag {
  width: 27px;
  height: 18px;
}
.switch {
  position: relative;
  width: 56px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--panel-2);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line);
}
.switch::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s ease, background 0.18s ease;
}
.switch[aria-checked='true'] {
  background: var(--pink);
  box-shadow: none;
}
.switch[aria-checked='true']::after {
  transform: translateX(24px);
  background: #fff;
}
.switch[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.odds-wrap {
  display: block;
  overflow-x: auto; /* en-têtes plus longs dans certaines langues */
}
.odds {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--s-1);
}
.odds th,
.odds td {
  padding: 0.55rem 0.4rem;
  text-align: right;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.odds th:first-child,
.odds td:first-child {
  text-align: left;
}
.odds thead th {
  color: var(--muted);
  font-weight: 700;
}
.odds .rar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}
.odds .rar small {
  color: var(--muted);
  font-weight: 400;
}
@media (max-width: 560px) {
  .odds .col-pool {
    display: none;
  }
  /* Le nom du cadre passe sous la rareté : le tableau tient dans l'écran */
  .odds .rar {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .odds .rar small {
    flex-basis: 100%;
  }
}
.dialog {
  display: grid;
  gap: 1rem;
  width: min(480px, 100%);
  padding: 1.5rem;
  border-radius: 18px;
  background: var(--panel);
}
.dialog h2 {
  margin: 0;
  font-size: var(--s2);
}
.dialog p {
  margin: 0;
  color: var(--muted);
}
.foot-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

/* ═════════════ Toasts ═════════════ */
.toasts {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  z-index: 80;
  display: grid;
  gap: 0.5rem;
  transform: translateX(-50%);
  pointer-events: none;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .toasts {
    bottom: 5.5rem;
  }
}
.toast {
  padding: 0.7rem 1.1rem;
  border-radius: 12px;
  background: var(--paper);
  color: var(--paper-ink);
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  animation: pop 0.25s ease backwards;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Fiche : la plaque d'abord, puis la revente */
.sheet-info > .cartel-big {
  order: -2;
}
.sheet-info > .sell-row {
  order: -1;
}

/* ── Séries : recherche automatique en cours ── */
.sync-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted, #cfc6e0);
  font-size: 0.92rem;
}
.sync-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e8c36a;
  box-shadow: 0 0 0 0 rgba(232, 195, 106, 0.6);
  animation: sync-pulse 1.6s ease-out infinite;
}
@keyframes sync-pulse {
  70% { box-shadow: 0 0 0 8px rgba(232, 195, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 195, 106, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sync-dot { animation: none; }
}
.sv-filling {
  font-size: 0.78em;
  font-style: italic;
  opacity: 0.75;
  margin-left: 6px;
}

/* ── Sélection multiple dans le Musée ── */
.wall .piece {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.wall .piece img {
  -webkit-touch-callout: none;
}
.wall.selecting .piece[data-card]::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(var(--deep), 0.78);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.wall.selecting .piece.selected::after {
  background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  border-color: #fff;
  transform: scale(1.08);
}
.wall.selecting .piece.selected .frame {
  outline: 3px solid var(--pink);
  outline-offset: 5px;
}
.wall.selecting .piece:not(.selected) .frame img {
  filter: brightness(0.82);
}
.select-bar {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  width: min(820px, calc(100% - 24px));
  padding: 10px 12px 10px 18px;
  border-radius: 16px;
  background: rgba(var(--deep), 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  animation: bar-in 0.18s ease-out;
}
.select-bar[hidden] {
  display: none;
}
@keyframes bar-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
}
.sb-count {
  color: var(--muted);
  white-space: nowrap;
}
.sb-count b {
  color: var(--ink);
  font-size: 1.15em;
}
.sb-count .gain {
  margin-left: 0.3rem;
  color: #ffe3a0;
}
.sb-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}
body.has-select-bar main {
  padding-bottom: 9rem !important;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .select-bar {
    bottom: calc(70px + env(safe-area-inset-bottom));
    padding: 10px 12px;
    justify-content: center;
  }
  .sb-count {
    width: 100%;
    text-align: center;
  }
  .sb-actions {
    justify-content: center;
  }
  body.has-select-bar main {
    padding-bottom: 14rem !important;
  }
}

/* ── Découvertes repliées (« 16 nouveaux tags », un clic pour déplier) ── */
.disc-fold {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}
.disc-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.disc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font: inherit;
  font-size: var(--s-1);
  cursor: pointer;
}
.disc-toggle b {
  color: var(--ink);
}
.disc-toggle:hover,
.disc-toggle[aria-expanded='true'] {
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink);
}
.disc-toggle.k-pool b {
  color: #ffe3a0;
}
.chev {
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform 0.15s ease;
}
.disc-toggle[aria-expanded='true'] .chev {
  transform: translateY(0.1em) rotate(-135deg);
}
.disc-panel {
  justify-content: center;
  max-width: 640px;
}
.disc-panel .chip {
  animation: pop 0.25s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
  animation-delay: calc(min(var(--i, 0), 30) * 14ms);
}
.op-foot .disc-panel {
  max-height: calc(22 * var(--vh));
  overflow: auto;
}
.sum-disc {
  padding: 0;
  background: none;
}
.sum-drag-hint {
  margin: -0.6rem 0 0;
  text-align: center;
}
.sum-disc:empty,
.sum-series:empty {
  display: none;
}
.sum-series {
  display: grid;
  gap: 0.8rem;
  justify-items: center;
}
.disc-panel[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .filters .input[type='search'] {
    flex-basis: 100%;
  }
  .filters select.input {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ── Doublons pendant l'ouverture : badge + revente immédiate ── */
.ribbon-row {
  position: absolute;
  z-index: 3;
  top: calc(-12px - var(--u) * 2);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-3deg);
}
.ribbon,
.mini-sell {
  white-space: nowrap;
}
.ribbon-row .ribbon {
  position: static;
  transform: none;
}
.ribbon.dup {
  background: #4a3d66;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.mini-sell {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border: 0;
  border-radius: 6px;
  background: #ffe3a0;
  color: var(--paper-ink);
  font: inherit;
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1.5;
  box-shadow: 0 2px 0 #c49a3c;
  cursor: pointer;
}
.mini-sell:hover {
  background: #fff0c6;
}
.mini-sell[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.mini-sell .gain,
.ribbon .gain {
  color: inherit;
}
.mini-sell .coins-amount svg,
.ribbon .coins-amount svg {
  width: 1em;
  height: 1em;
}
.op-badges .mini-sell {
  font-size: var(--s-1);
  padding: 0.2rem 0.65rem;
  border-radius: 8px;
}
.op-badges {
  align-items: center;
}

/* ── Découvertes empilées ── */
.disc-stack b {
  color: #ffe3a0;
}
.disc-sub {
  padding-top: 0.1rem;
}
.disc-sub[hidden] {
  display: none;
}

/* ── Bandeau de mise à jour ── */
.update-banner {
  position: fixed;
  z-index: 95;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 10px 14px 10px 18px;
  border-radius: 14px;
  background: #ffe3a0;
  color: var(--paper-ink);
  font-size: 0.92rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
@media (max-width: 560px) {
  .op-summary .ribbon-row {
    position: static;
    align-self: center;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    transform: none;
  }
}

/* ── Statistiques & succès ── */
.nav .pip.gold {
  background: #f2c14e;
  color: var(--paper-ink);
}
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.stat-tile {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: var(--panel);
}
.stat-tile b {
  font-family: var(--display);
  font-size: var(--s3);
  line-height: 1.1;
  color: var(--ink);
}
.stat-tile b small {
  font-family: var(--body);
  font-size: var(--s-1);
  font-weight: 400;
  color: var(--muted);
}
.stat-tile b .coins-amount svg {
  width: 0.7em;
  height: 0.7em;
}
.stat-tile > span {
  color: var(--muted);
  font-size: var(--s-1);
}
.stats-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.stats-card {
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: var(--panel);
}
.stats-card h2,
.ach-head h2 {
  margin: 0 0 0.8rem;
  font-size: var(--s1);
}
.stats-card.masterpiece {
  display: grid;
  justify-items: center;
  text-align: center;
}
.stats-card.masterpiece .wall {
  margin: 0.4rem 0 0;
  justify-content: center;
}
.stats-card.masterpiece .piece {
  flex: 0 0 auto;
  width: min(220px, 70%);
}
.stats-card.masterpiece .fine {
  margin: 0.4rem 0 0;
}
.frame-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.frame-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 0.75rem;
  font-size: var(--s-1);
  color: var(--muted);
}
.frame-list .name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--ink);
}
.frame-list .count b {
  color: var(--ink);
}
.frame-list .bar {
  grid-column: 1 / -1;
  height: 6px;
}
.frame-list .bar > i {
  background: var(--rc);
}
.ach-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.8rem;
}
.ach-head h2 {
  margin: 0;
}
.ach-head h2 span {
  margin-left: 0.4rem;
  font-family: var(--body);
  font-size: var(--s-1);
  font-weight: 400;
  color: var(--muted);
}
.ach-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ach-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: var(--panel);
}
.ach-row.is-ready {
  background: color-mix(in srgb, #f2c14e 14%, var(--panel));
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.45);
}
.ach-row.is-done {
  opacity: 0.6;
}
.medal {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--paper-ink);
  background: radial-gradient(circle at 35% 30%, #fff8 0 18%, transparent 19%), var(--mc, #cf9f62);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.18), 0 2px 0 rgba(0, 0, 0, 0.3);
}
.medal svg {
  width: 20px;
  height: 20px;
}
.medal.t-0 { --mc: #cf9f62; }
.medal.t-1 { --mc: #d6dbe7; }
.medal.t-2 { --mc: #f2c14e; }
.medal.t-3 { --mc: #7fb2ff; }
.medal.t-4 { --mc: #ff8fc4; }
.medal.t-done { --mc: #8fd9b0; }
.ach-row.is-progress .medal {
  filter: saturate(0.35) brightness(0.8);
}
.ach-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
}
.ach-title b {
  color: var(--ink);
}
.tier-dots {
  display: inline-flex;
  gap: 3px;
}
.tier-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.tier-dots i.on {
  background: #f2c14e;
  box-shadow: none;
}
.ach-desc {
  display: block;
  color: var(--muted);
  font-size: var(--s-1);
}
.ach-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  font-size: var(--s-1);
  color: var(--muted);
}
.ach-progress .bar {
  flex: 1;
  max-width: 260px;
  height: 6px;
}
.ach-prize {
  color: #ffe3a0;
  font-weight: 700;
  font-size: var(--s-1);
  white-space: nowrap;
}
.ach-done {
  color: #8fd9b0;
  font-weight: 700;
  font-size: var(--s-1);
}
/* Premiers pas : un petit parcours avant les grands succès */
.ach + .ach {
  margin-top: 2rem;
}
.ach-lede {
  margin: -0.4rem 0 0.9rem;
}
.medal.t-soon { --mc: #8a8399; }
.ach-row.is-soon {
  opacity: 0.55;
}
.ach-row.is-soon .medal {
  filter: grayscale(1);
}
.ach-soon {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-weight: 700;
  font-size: var(--s-1);
  white-space: nowrap;
}
/* Succès débloqué par une action : un toast doré, cliquable vers les Stats */
.toast.toast-ach {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: center;
  pointer-events: auto;
  background: color-mix(in srgb, #f2c14e 22%, var(--paper));
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(242, 193, 78, 0.6);
}
.toast.toast-ach svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: #b7841b;
}
.toast.toast-ach .gain {
  font-weight: 800;
}
.ach-note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 auto 1.2rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, #f2c14e 18%, var(--panel));
  color: var(--ink);
  font-size: var(--s-1);
  text-decoration: none;
}
.ach-note svg {
  width: 18px;
  height: 18px;
  color: #f2c14e;
}
.ach-note .gain {
  color: #ffe3a0;
  font-weight: 700;
}
@media (max-width: 1000px) {
  .stat-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .stats-duo {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .ach-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ach-reward {
    grid-column: 2;
  }
  .medal {
    width: 36px;
    height: 36px;
  }
}

/* ── God box (dorée) et Spec box (bleue) ── */
.parcel-art.kind-god {
  --box-top: #f7dc84;
  --box-front: #d9a83a;
  --tape: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 240, 200, 0.45));
}
.parcel-art.kind-god .parcel-label b span,
.parcel-art.kind-spec .parcel-label b span {
  color: #b5831b;
}
.parcel-art.kind-god .parcel-fragile {
  background: #2a2240;
  color: #f7dc84;
}
.parcel-art.kind-spec {
  --box-top: #a9c6f5;
  --box-front: #6e95d8;
  --tape: linear-gradient(180deg, rgba(40, 60, 120, 0.55), rgba(30, 50, 110, 0.6));
}
.parcel-art.kind-spec .parcel-label b span {
  color: #3b63b8;
}
.parcel-art.kind-spec .parcel-fragile {
  background: #3b63b8;
}
.parcel-art.kind-artist {
  --box-top: #9fe0c4;
  --box-front: #4fae8a;
  --tape: linear-gradient(180deg, rgba(20, 80, 60, 0.55), rgba(15, 70, 50, 0.6));
}
.parcel-art.kind-artist .parcel-label b span {
  color: #2f8a68;
}
.parcel-art.kind-artist .parcel-fragile {
  background: #2f8a68;
}
.opening[data-kind='god'] {
  --tint: rgba(255, 210, 110, 0.22);
}
.btn-gold {
  background: #f2c14e;
  color: var(--paper-ink);
  box-shadow: 0 4px 0 #b88a1f;
}
.btn-gold:hover {
  background: #f7d272;
}

/* ── Boutique ── */
.shop-balance {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: #ffe3a0;
  font-size: var(--s2);
  font-weight: 700;
}
.shop-balance small {
  color: var(--muted);
  font-size: var(--s-1);
  font-weight: 400;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 1rem;
}
.shop-item {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
  padding: 1.3rem;
  border-radius: 18px;
  background: var(--panel);
}
.shop-item.shop-god {
  background: linear-gradient(135deg, color-mix(in srgb, #f2c14e 16%, var(--panel)), var(--panel) 60%);
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.35);
}
.shop-art {
  position: relative;
  width: 170px;
  aspect-ratio: 10 / 9;
  container-type: inline-size;
}
.shop-info h2 {
  margin: 0 0 0.3rem;
  font-size: var(--s2);
}
.shop-info p {
  margin: 0 0 0.8rem;
  color: var(--muted);
}
.shop-owned b {
  color: var(--ink);
}
.shop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.shop-info .fine {
  margin: 0.6rem 0 0;
}
@media (max-width: 520px) {
  .shop-item {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .shop-actions {
    justify-content: center;
  }
}

/* ── Musée : filtre rapide par rareté ── */
.rarity-pills .pill .swatch {
  flex: none;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .rarity-pills {
    width: 100%;
    flex-wrap: nowrap;
  }
  .rarity-pills .pill {
    flex: 1 1 0;
    justify-content: center;
    padding-inline: 0.4rem;
  }
  .rarity-pills .pill > span:not(.swatch) {
    display: none;
  }
}

/* Communauté : « Amis » dans la barre du bas sur téléphone */
.nav .nl-short {
  display: none;
}
/* Les Paramètres sont l'engrenage de la barre du haut, à gauche du Profil (voir « Profil » plus bas) */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .topcoins {
    margin-left: auto;
  }
}

/* ── Accueil : réserve automatique (10) + colis achetés ── */
.reserve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
}
.charge-dots i {
  width: 22px;
  height: 17px;
}
.bought-stack {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, #e2b77e 22%, var(--panel));
  box-shadow: inset 0 0 0 1px rgba(226, 183, 126, 0.45);
  color: #f3d7ad;
  font-size: var(--s-1);
  font-weight: 700;
}
.home-shop {
  display: inline-block;
  margin-top: 0.8rem;
  color: #ffe3a0;
  font-size: var(--s-1);
}
.dev-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}
.dev-row > span {
  margin-right: 0.3rem;
  color: var(--muted);
  font-size: var(--s-1);
}
@media (max-width: 820px) {
  .reserve,
  .dev-row {
    justify-content: center;
  }
}

/* ── Ouverture de 10 colis ── */
.parcel-count {
  position: absolute;
  z-index: 5;
  top: -4cqi;
  right: -4cqi;
  display: grid;
  place-items: center;
  min-width: 18cqi;
  height: 18cqi;
  padding: 0 3cqi;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 8cqi;
  box-shadow: 0 1cqi 0 var(--pink-deep), 0 3cqi 6cqi rgba(0, 0, 0, 0.4);
  transform: rotate(8deg);
}
.parcel.opened .parcel-count {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sum-bulk {
  display: flex;
  justify-content: center;
}
.wall.small.many {
  --h: 118px;
  gap: 44px 22px;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .wall.small.many {
    --h: 86px;
    gap: 40px 14px;
  }
}

/* ── Séries terminées : ruban doré ── */
.series-tile {
  position: relative;
  overflow: hidden;
}
.series-tile.complete {
  background: linear-gradient(160deg, color-mix(in srgb, #f2c14e 14%, rgba(var(--deep-2), 0.75)), rgba(var(--deep-2), 0.55) 55%);
}
.corner-ribbon {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: -38px;
  width: 150px;
  padding: 4px 0;
  background: linear-gradient(180deg, #ffe08a, #e6ad2e);
  color: #3a2a06;
  font-weight: 800;
  font-size: 0.82rem;
  text-align: center;
  letter-spacing: 0.02em;
  transform: rotate(38deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.complete-ribbon,
.sdn-ribbon {
  display: inline-block;
  padding: 0.15em 0.6em 0.2em;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffe08a, #e6ad2e);
  color: #3a2a06;
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.42em;
  vertical-align: middle;
  transform: rotate(-4deg);
  box-shadow: 0 3px 0 #b88a1f;
}
.sdn-ribbon {
  font-size: 0.85em;
}
.progress.done .bar > i {
  background: linear-gradient(90deg, #ffe08a, #e6ad2e);
}
.series-done-note {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, #f2c14e 22%, var(--panel));
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.55), 0 0 30px -8px rgba(242, 193, 78, 0.6);
  color: var(--ink);
  text-decoration: none;
}
.series-summary {
  margin: 0 0 1rem;
  color: var(--muted);
}
.series-summary b {
  color: var(--ink);
}
/* Récap d'un lot (50 œuvres) : badges sous l'étiquette, empilés, pour ne pas chevaucher les voisines */
.op-summary .wall.many .ribbon-row {
  position: static;
  align-self: center;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  transform: none;
}
.sdn-ribbon,
.complete-ribbon,
.corner-ribbon {
  white-space: nowrap;
}
.series-done-note .sdn-ribbon {
  flex: none;
}

/* ── Gros lot (100 colis) : répartition par rareté ── */
.rarity-breakdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.6rem;
}
.rarity-breakdown .rb {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: var(--s-1);
}
.rarity-breakdown .rb b {
  color: var(--ink);
}
.rarity-breakdown .rb.r-4,
.rarity-breakdown .rb.r-5 {
  background: color-mix(in srgb, #f2c14e 22%, var(--panel));
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.5);
}

/* ── Enchaînement rapide des Communes et Peu communes ── */
.show.quick.hang .piece {
  animation-duration: 0.26s;
}
.show.quick.out-left .piece,
.show.quick.out-right .piece {
  animation-duration: 0.24s;
}
.op-counter {
  color: var(--muted);
  font-size: var(--s-1);
  font-variant-numeric: tabular-nums;
}
.op-counter b {
  color: var(--ink);
  font-size: var(--s0);
}

/* ── Woah, God pack ! ── */
.parcel.god-pack {
  filter: drop-shadow(0 0 30px rgba(255, 210, 90, 0.85));
}
.godpack-banner {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
  background: radial-gradient(circle at 50% 45%, rgba(255, 214, 110, 0.35), rgba(var(--deep), 0.6) 60%);
  animation: gp-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
  pointer-events: none;
}
.godpack-banner b {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, calc(9 * var(--vw)), 5.5rem);
  line-height: 1;
  color: #ffe08a;
  text-shadow: 0 3px 0 #b07a12, 0 0 40px rgba(255, 200, 80, 0.9);
  transform: rotate(-4deg);
}
.godpack-banner .gp-count {
  padding: 0.1em 0.6em;
  border-radius: 999px;
  background: #ffe08a;
  color: #3a2a06;
  font-weight: 800;
  font-size: var(--s2);
}
.godpack-banner em {
  margin-top: clamp(0.8rem, calc(3 * var(--vw)), 1.6rem);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(var(--deep), 0.7);
  font-style: normal;
  color: #fff3d0;
  font-size: var(--s1);
}
.godpack-banner.out {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@keyframes gp-in {
  from { opacity: 0; transform: scale(0.6); }
}
.op-god {
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffe08a, #e6ad2e);
  color: #3a2a06;
  font-weight: 800;
}
.godpack-note {
  justify-self: center;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #e6ad2e);
  color: #3a2a06;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--s1);
  box-shadow: 0 4px 0 #b88a1f, 0 0 30px rgba(255, 200, 80, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .godpack-banner {
    animation: none;
  }
}

/* ── Fiche : œuvre précédente / suivante ── */
.modal.no-anim {
  animation: none;
}
.sheet-art {
  position: relative;
  touch-action: pan-y;
}
.nav-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--deep), 0.72);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.15s ease, opacity 0.15s ease;
}
.nav-arrow:hover {
  background: rgba(var(--deep), 0.92);
}
.nav-arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}
.nav-arrow svg {
  width: 22px;
  height: 22px;
}
.nav-arrow.prev {
  left: 10px;
}
.nav-arrow.prev svg,
.icon.flip {
  transform: scaleX(-1);
}
.nav-arrow.next {
  right: 10px;
}
.sheet-pos {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(var(--deep), 0.72);
  color: var(--muted);
  font-size: var(--s-1);
  font-variant-numeric: tabular-nums;
}

/* ── Mode lecture ── */
.reader {
  width: min(920px, 100%);
  margin: 0 auto;
}
.reader-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  margin-bottom: 1.4rem;
}
.reader-title {
  flex: 1;
  min-width: 0;
}
.reader-title h1 {
  margin: 0;
  font-size: clamp(var(--s2), calc(4 * var(--vw)), var(--s4));
}
.reader-count {
  color: var(--muted);
  font-size: var(--s-1);
}
.reader-count b {
  color: var(--ink);
}
.reader-pages {
  display: grid;
  gap: 10px;
}
.reader-page {
  position: relative;
  margin: 0;
}
.reader-page img {
  display: block;
  width: 100%;
  height: auto;
  background: rgb(var(--deep));
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
}
.reader-page figcaption {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(var(--deep), 0.65);
  color: var(--muted);
  font-size: 0.75rem;
  opacity: 0.8;
}
.reader-page.is-blurred img {
  filter: blur(24px) saturate(0.6);
}
.reader-page .nsfw-veil {
  position: absolute;
  inset: 0;
}
.reader-missing {
  display: grid;
  place-content: center;
  gap: 0.2rem;
  min-height: 130px;
  border: 2px dashed rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
  font-size: var(--s-1);
}
.reader-missing b {
  color: var(--ink);
  font-size: var(--s0);
}
.reader-end {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  margin: 2rem 0 1rem;
  color: var(--muted);
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .reader-pages {
    gap: 6px;
    margin: 0 calc(-1 * clamp(1rem, calc(4 * var(--vw)), 2.5rem));
  }
  .reader-page img {
    box-shadow: none;
  }
}
/* En lecture : pas de plinthe ni de parquet par-dessus les planches */
body:has(.reader)::before,
body:has(.reader)::after {
  display: none;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .reader-title {
    flex: 1 1 100%;
    order: 2;
  }
  .reader-count {
    order: 1;
    margin-left: auto;
  }
}

/* ── Cartels : titre seulement s'il existe, sinon « art by » ── */
.cartel .by-only {
  opacity: 1;
  font-size: 11.5px;
  color: var(--paper-muted, #6c6385);
}
.cartel .by-only i {
  font-style: normal;
  font-weight: 700;
  color: var(--paper-ink, #2a2240);
}
.r-2 .cartel .by-only,
.r-2 .cartel .by-only i {
  color: inherit;
}
.cartel-big .by b {
  font-weight: 700;
}
.cartel-big .by.solo {
  font-size: var(--s2);
  line-height: 1.15;
}

/* ── Salle d'un artiste : ses séries ── */
.artist-series {
  margin-top: 2.2rem;
}
.artist-series h2 {
  margin: 0 0 0.8rem;
  font-size: var(--s1);
}
.as-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 0.6rem;
}
.as-item {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
}
.as-item:hover {
  background: var(--panel-2);
}
.as-item.done {
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.55);
}
.as-kind {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}
.as-done {
  margin-left: 0.3rem;
  padding: 0 0.4em;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffe08a, #e6ad2e);
  color: #3a2a06;
}
.as-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.as-item .bar {
  height: 6px;
}

/* ── Fiche : cadre d'image de taille fixe, image calée en haut, flèches immobiles ── */
.sheet {
  --sheet-h: min(880px, calc(calc(100 * var(--dvh)) - 2rem));
  --art-pad: clamp(1rem, calc(3 * var(--vw)), 2rem);
  height: var(--sheet-h);
  grid-template-rows: minmax(0, 1fr);
}
.sheet-art {
  /* L'œuvre reste centrée dans sa colonne, même quand la fiche est plus haute qu'elle */
  place-items: center;
  align-content: center;
  height: 100%;
  overflow: hidden;
  padding: var(--art-pad);
}
.sheet-art img,
.sheet-art video {
  max-height: calc(var(--sheet-h) - 2 * var(--art-pad) - 3.4rem);
  object-fit: contain;
}
.sheet-info {
  min-height: 0;
}
@media (max-width: 760px) {
  .sheet {
    --art-h: min(calc(58 * var(--dvh)), 560px);
    height: auto;
    max-height: calc(calc(100 * var(--dvh)) - 1rem);
    grid-template-rows: auto;
  }
  .sheet-art {
    height: var(--art-h);
    min-height: 0;
  }
  .sheet-art img,
  .sheet-art video {
    max-height: calc(var(--art-h) - 2 * var(--art-pad) - 3.2rem);
  }
}

/* ═════════════ Super légendaire (top 0,1 %) : le cadre doré devient irisé ═════════════ */
.r-5 {
  --rc: var(--r5);
  --ft: #ffd6f4;
  --fr: #b04cc4;
  --fb: #6a3cc0;
  --fl: #ff9ad8;
}
.piece.r-5 .frame {
  animation: prism-border 6s linear infinite;
  box-shadow:
    0 0 0 calc(1 * var(--u)) #6a3cc0,
    0 0 0 calc(2.5 * var(--u)) #ffc2ee,
    inset 0 0 0 calc(1.2 * var(--u)) #b04cc4,
    inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.22),
    0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-6 * var(--u)) rgba(8, 4, 20, 0.75),
    0 0 calc(40 * var(--u)) 0 rgba(255, 122, 217, 0.3);
}
@keyframes prism-border {
  0%, 100% { border-color: #ffd6f4 #b04cc4 #6a3cc0 #ff9ad8; }
  33% { border-color: #c8f3ff #3aa0d8 #2b5bb8 #8fe3ff; }
  66% { border-color: #fff2b0 #d8902a #a0621a #ffd36b; }
}
.piece.r-5::before {
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 150, 230, 0.3), transparent);
}
.piece.r-5 .cartel,
.cartel-big.r-5 {
  background: linear-gradient(110deg, #ffd6f4, #c8f3ff 35%, #fff2b0 65%, #ffd6f4);
  color: #3a1640;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px #8d4cc0, 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 18px -4px rgba(255, 122, 217, 0.8);
}
.swatch.r-5 {
  background: conic-gradient(#ff7ad9, #8fe3ff, #ffd36b, #ff7ad9);
  box-shadow: 0 0 0 1px #6a3cc0;
}
.rarity-breakdown .rb.r-5 {
  background: color-mix(in srgb, #ff7ad9 22%, var(--panel));
  box-shadow: inset 0 0 0 1px rgba(255, 122, 217, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .piece.r-5 .frame {
    animation: none;
  }
}

/* ═════════════ Galerie vidéo : animations, vidéos et GIF ═════════════ */
.play-badge {
  position: absolute;
  left: 6%;
  bottom: 6%;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 2.1em;
  height: 2.1em;
  padding: 0 0.5em;
  border-radius: 999px;
  background: rgba(20, 12, 36, 0.72);
  color: #fff;
  font-size: clamp(10px, calc(1.6 * var(--vw)), 14px);
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.sheet-art video {
  width: auto;
  max-width: 100%;
  background: #000;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8);
}

/* ═════════════ Ouverture : vendre, passer à la suivante, continuer ailleurs ═════════════ */
/* Le cadre de l'œuvre (sa rareté), en petit au-dessus, à gauche ; caché tant qu'elle est dans l'ombre */
.frame-tag {
  position: absolute;
  bottom: calc(100% + var(--fw) + 6px);
  left: calc(-1 * var(--fw));
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--rc);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: opacity 0.35s ease;
}
.frame-tag .swatch {
  width: 14px;
  height: 10px;
}
.piece.unlit .frame-tag {
  opacity: 0;
}
.op-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.op-sell,
.op-next {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0.35rem 0.95rem;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
}
.op-sell {
  background: #ffe3a0;
  color: var(--paper-ink);
  box-shadow: 0 2px 0 #c49a3c, 0 6px 14px -8px rgba(0, 0, 0, 0.6);
}
.op-next {
  background: rgba(var(--light), 0.1);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.25);
}
.op-next:hover {
  background: rgba(var(--light), 0.18);
}
.op-next .icon {
  width: 14px;
  height: 14px;
}
.op-sell:hover {
  background: #fff0c6;
}
.op-sell:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #c49a3c;
}
.op-next:active {
  transform: translateY(1px);
}
.op-sell[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.op-sell .gain,
.op-sold .gain {
  color: inherit;
}
.op-sell .coins-amount svg,
.op-sold .coins-amount svg,
.sum-sell .coins-amount svg {
  width: 1.05em;
  height: 1.05em;
}
.op-sold {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-weight: 700;
}
.op-sold small {
  font-weight: 400;
}
.sum-sell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border: 0;
  border-radius: 8px;
  background: #ffe3a0;
  color: var(--paper-ink);
  font: inherit;
  font-weight: 800;
  font-size: 12.5px;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 2px 0 #c49a3c, 0 4px 10px -4px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.sum-sell:hover {
  background: #fff0c6;
}
.sum-sell[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.sum-sell .gain {
  color: inherit;
}
#sum-wall .piece.leaving {
  transition: transform 0.4s ease-in, opacity 0.4s ease-in;
  transform: translateY(18px) scale(0.85);
  opacity: 0;
  pointer-events: none;
}
.swap-show {
  position: relative;
}
.swap-tag {
  position: absolute;
  z-index: 4;
  top: -10px;
  left: 50%;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: var(--r4);
  color: #42280a;
  font-weight: 800;
  font-size: var(--s-1);
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.op-swap b {
  display: block;
  margin-bottom: 0.15rem;
}
.box-continue {
  margin: 1rem auto 0.4rem;
  max-width: 46rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--r4) 10%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r4) 45%, transparent);
  text-align: left;
}
.bc-head {
  margin: 0 0 0.7rem;
  font-weight: 700;
}
.bc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
}
.bc-item {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem 0.8rem;
  border: 0;
  border-radius: 10px;
  background: rgba(var(--deep), 0.55);
  color: var(--ink);
  font: inherit;
  text-align: left;
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
}
.bc-item:hover,
.bc-item:focus-visible {
  background: rgba(var(--hover-rgb), 0.7);
  box-shadow: inset 0 0 0 1.5px var(--r4);
}
.bc-name {
  font-family: var(--display);
  font-weight: 650;
  overflow-wrap: anywhere;
}
.bc-meta {
  color: var(--muted);
  font-size: var(--s-1);
}
.bc-same {
  color: var(--r4);
}
.bc-item .bar {
  height: 5px;
}
.box-continue .fine {
  margin: 0.6rem 0 0;
}
.home-reserve {
  display: inline-block;
  margin-top: 0.7rem;
  color: var(--r4);
  font-weight: 700;
  font-size: var(--s-1);
}

/* Date d'obtention sur le cartel */
.cartel .when {
  margin-top: 1px;
  font-size: 10px;
  letter-spacing: 0.02em;
  opacity: 0.62;
}
.cat-date {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.75rem;
}

/* ═════════════ Mode lecture : vertical ou horizontal ═════════════ */
.reader-modes {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.reader-modes-sep {
  width: 1px;
  height: 1.4rem;
  margin: 0 0.25rem;
  background: var(--line);
}
.reader-hq {
  font-weight: 800;
  letter-spacing: 0.04em;
}
.reader-modes .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.reader-modes .pill .icon {
  width: 15px;
  height: 15px;
}
.book-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--deep), 0.7);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -6px rgba(0, 0, 0, 0.7);
  transform: translateY(-50%);
  cursor: pointer;
}
.book-nav svg {
  width: 22px;
  height: 22px;
}
.book-nav.prev {
  left: 0;
}
.book-nav.next {
  right: 0;
}
.book-nav[disabled] {
  opacity: 0.25;
  cursor: default;
}
.book-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
}
/* Où on en est : « 3 / 20 », à gauche. En vertical, il reste en bas de l'écran pendant la lecture */
.reader-pos {
  display: block;
  flex: none;
  width: max-content;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: rgba(var(--deep), 0.85);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -8px rgba(0, 0, 0, 0.7);
  font-weight: 800;
  font-size: var(--s-1);
  font-variant-numeric: tabular-nums;
}
.reader > .reader-pos {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  margin-top: 14px;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .reader > .reader-pos {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}
/* Vertical, formats variés (artistes, tags) : une œuvre tient dans la hauteur de l'écran */
.reader-pages.varied {
  gap: 22px;
}
.reader-pages.varied .reader-page {
  justify-self: center;
  width: min(100%, calc((calc(100 * var(--dvh)) - 8rem) * var(--r)));
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .book-nav {
    width: 38px;
    height: 38px;
    background: rgba(var(--deep), 0.5);
  }
  .reader-modes {
    order: 3;
  }
}

/* ═════════════ Boutique : skins ═════════════ */
.skins {
  margin-top: 2.6rem;
}
.skins > h2 {
  margin-bottom: 0.2rem;
}
.skins > .lede {
  margin: 0 0 1rem;
}
.skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.skin-item {
  display: grid;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(var(--deep-2), 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.skin-item.on {
  box-shadow: inset 0 0 0 2px var(--r4), 0 0 24px -10px rgba(242, 193, 78, 0.7);
}
.skin-info {
  padding: 0.8rem 1rem 1rem;
}
.skin-info h3 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--s1);
}
.skin-info p {
  margin: 0.25rem 0 0.6rem;
  color: var(--muted);
  font-size: var(--s-1);
}
.skin-info .fine {
  margin: 0.4rem 0 0;
}
.skin-on {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.3rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--r4);
  color: #42280a;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
}
.skin-on .icon {
  width: 0.9em;
  height: 0.9em;
}
/* Aperçu : un morceau de mur, son sol, trois œuvres de démonstration */
.sp-scope {
  position: relative;
  height: 158px;
  overflow: hidden;
  background: var(--decor-bg);
  background-size: auto;
}
.sp-floor {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 0;
  height: 30px;
  background: var(--decor-floor);
  transform: perspective(90px) rotateX(30deg);
  transform-origin: 50% 100%;
}
.sp-scope::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  height: calc(var(--plinth-h, 16px) * 0.5);
  background: var(--decor-plinth);
  background-size: auto 100%;
  transform-origin: 50% 100%;
}
.sp-wall {
  position: absolute;
  inset: 14px 8px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.sp-piece {
  --u: 0.6px;
  flex: none;
  width: calc(58px * var(--r) + 2 * (var(--fw) + var(--mw)));
}
.sp-piece .cartel {
  display: none;
}
.sp-art {
  display: block;
  width: 100%;
  aspect-ratio: var(--r);
  background:
    radial-gradient(circle at 70% 30%, hsl(calc(var(--hue) + 40) 80% 85%) 0 9%, transparent 10%),
    radial-gradient(120% 60% at 30% 100%, hsl(calc(var(--hue) + 160) 40% 38%) 0 45%, transparent 46%),
    linear-gradient(170deg, hsl(var(--hue) 55% 72%), hsl(calc(var(--hue) + 30) 50% 48%));
}

/* ═════════════ Décors de galerie (skins) ═════════════
   Chaque décor change toute la palette (mur, panneaux, lignes, textes secondaires, fonds de
   l'ouverture et des fiches), avec des tons sobres et peu saturés. */
[data-decor='backrooms'] {
  --wall: #57503a;
  --wall-deep: #2d2a1e;
  --panel: #4a4432;
  --panel-2: #575039;
  --line: #776f52;
  --muted: #cfc7aa;
  --light: 255, 246, 220;
  --deep: 36, 33, 23;
  --deep-2: 50, 46, 32;
  --panel-rgb: 74, 68, 50;
  --hover-rgb: 94, 86, 62;
  --decor-bg:
    linear-gradient(180deg, rgba(255, 250, 225, 0.12), transparent 140px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .08 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%232a2412' stroke-opacity='.18' stroke-width='1.2'%3E%3Cpath d='M10 6l6 8-6 8M30 18l6 8-6 8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 40px 40px,
    repeating-linear-gradient(90deg, #5b543c 0 13px, #534c35 13px 26px),
    var(--wall);
  --decor-plinth: linear-gradient(180deg, #9d9474 0 2px, #3f3a28 2px 3px, #7c7354 3px 13px, #312d1f 13px);
  --decor-floor:
    linear-gradient(180deg, rgba(30, 27, 16, 0.7), transparent 60%),
    radial-gradient(30% 60% at 22% 60%, rgba(50, 44, 24, 0.35), transparent 70%),
    radial-gradient(25% 50% at 74% 40%, rgba(50, 44, 24, 0.28), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .04 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, #7a7150, #857c59 50%, #746b4b);
}
[data-decor='beton'] {
  --wall: #393a3c;
  --wall-deep: #1d1e1f;
  /* Panneaux bien plus sombres que le béton du mur, pour que les textes se détachent */
  --panel: #232425;
  --panel-2: #2d2e30;
  --line: #5a5b5e;
  --muted: #c4c4c6;
  --light: 246, 240, 230;
  --deep: 20, 20, 22;
  --deep-2: 28, 28, 30;
  --panel-rgb: 35, 36, 37;
  --hover-rgb: 52, 53, 56;
  --decor-bg:
    radial-gradient(900px 480px at 50% -160px, rgba(255, 250, 240, 0.09), transparent 70%) no-repeat,
    radial-gradient(circle, rgba(0, 0, 0, 0.4) 0 2.5px, rgba(255, 255, 255, 0.05) 3px 4px, transparent 4.5px) 30px 30px / 240px 120px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px) 0 0 / 240px 100%,
    linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px) 0 0 / 100% 120px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #3e3f41, #353638),
    var(--wall);
  --decor-plinth: linear-gradient(180deg, #5a5b5e 0 1px, #19191b 1px 13px, #0e0e0f 13px);
  --decor-floor:
    linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 50%),
    radial-gradient(40% 160% at 50% 0%, rgba(255, 250, 240, 0.12), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, #48494b, #535456 50%, #46474a);
}
[data-decor='neon'] {
  --wall: #1a1830;
  --wall-deep: #100f1f;
  --light: 230, 170, 235;
  --deep: 16, 14, 32;
  --deep-2: 26, 23, 48;
  --decor-bg:
    radial-gradient(900px 420px at 50% -120px, rgba(214, 92, 196, 0.14), transparent 70%) no-repeat,
    linear-gradient(180deg, transparent 0 60px, rgba(214, 92, 196, 0.5) 60px 61px, rgba(214, 92, 196, 0.12) 61px 68px, transparent 68px) no-repeat,
    repeating-linear-gradient(90deg, rgba(110, 200, 230, 0.05) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(110, 200, 230, 0.035) 0 1px, transparent 1px 80px),
    radial-gradient(120% 80% at 50% 110%, #261a44, #1a1830 70%),
    var(--wall);
  --decor-plinth: linear-gradient(180deg, #8fd6e8 0 1px, #3f97ad 1px 3px, #0f0d1e 3px 12px, #c25fb2 12px 13px, #0f0d1e 13px);
  --decor-floor:
    linear-gradient(180deg, rgba(194, 95, 178, 0.22), transparent 30%),
    repeating-linear-gradient(90deg, rgba(143, 214, 232, 0.22) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(143, 214, 232, 0.12) 0 1px, transparent 1px 26px),
    linear-gradient(90deg, #0f0d1e, #1b1534 50%, #0f0d1e);
}

/* ═════════════ Styles de cadre (skins) ═════════════
   La couleur de la rareté reste (variables --ft/--fr/--fb/--fl/--rc) ; seule la moulure change.
   Les aperçus de la boutique (.sp-scope) ont leur propre style, quel que soit celui du musée. */
html[data-frames='baroque'] .piece:not(.sp-scope *),
.sp-scope[data-frames='baroque'] .piece {
  --fw: calc(var(--fwn) * var(--u) * 2.1);
  --mw: calc(var(--mwn) * var(--u) * 1.2);
}
html[data-frames='baroque'] .piece:not(.sp-scope *) .frame,
.sp-scope[data-frames='baroque'] .piece .frame {
  border-style: ridge;
  box-shadow:
    0 0 0 calc(1.5 * var(--u)) var(--fb),
    0 0 0 calc(3 * var(--u)) var(--ft),
    0 0 0 calc(4.5 * var(--u)) var(--fb),
    inset 0 0 0 calc(2 * var(--u)) var(--fl),
    inset 0 0 0 calc(3 * var(--u)) var(--fb),
    inset 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.3),
    0 calc(10 * var(--u)) calc(20 * var(--u)) calc(-6 * var(--u)) rgba(8, 4, 20, 0.75);
}
html[data-frames='baroque'] .piece:not(.sp-scope *) .frame::before,
.sp-scope[data-frames='baroque'] .piece .frame::before {
  --rs: calc(var(--fw) * 1.35);
  --rose: radial-gradient(circle at center, var(--ft) 0 20%, var(--fb) 21% 30%, var(--fl) 31% 44%, var(--fb) 45% 50%, transparent 52%);
  content: '';
  position: absolute;
  z-index: 1;
  inset: calc(-1 * var(--fw) - 4.5 * var(--u));
  pointer-events: none;
  background:
    var(--rose) 0 0 / var(--rs) var(--rs) no-repeat,
    var(--rose) 100% 0 / var(--rs) var(--rs) no-repeat,
    var(--rose) 0 100% / var(--rs) var(--rs) no-repeat,
    var(--rose) 100% 100% / var(--rs) var(--rs) no-repeat,
    radial-gradient(ellipse at center, var(--ft) 0 24%, var(--fb) 25% 36%, var(--fl) 37% 46%, transparent 49%) 50% 0 / calc(var(--rs) * 2) var(--rs) no-repeat,
    radial-gradient(ellipse at center, var(--ft) 0 24%, var(--fb) 25% 36%, var(--fl) 37% 46%, transparent 49%) 50% 100% / calc(var(--rs) * 2) var(--rs) no-repeat;
}
html[data-frames='futuriste'] .piece:not(.sp-scope *),
.sp-scope[data-frames='futuriste'] .piece {
  --fw: calc(2.5 * var(--u));
  --mw: calc(var(--mwn) * var(--u) * 0.9);
}
html[data-frames='futuriste'] .piece:not(.sp-scope *) .frame,
.sp-scope[data-frames='futuriste'] .piece .frame {
  animation: none;
  border-color: #3a3e4a #1b1d24 #121318 #2a2d36;
  background: #0f0e16;
  box-shadow:
    0 0 0 calc(1 * var(--u)) color-mix(in srgb, var(--rc) 75%, transparent),
    0 0 calc(16 * var(--u)) calc(1 * var(--u)) color-mix(in srgb, var(--rc) 45%, transparent),
    inset 0 0 0 calc(1 * var(--u)) color-mix(in srgb, var(--rc) 35%, transparent),
    0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-6 * var(--u)) rgba(0, 0, 0, 0.85);
}
html[data-frames='futuriste'] .piece:not(.sp-scope *) .frame::before,
.sp-scope[data-frames='futuriste'] .piece .frame::before {
  --k: calc(18 * var(--u));
  --t: calc(2.5 * var(--u));
  --c: linear-gradient(var(--rc), var(--rc));
  content: '';
  position: absolute;
  z-index: 1;
  inset: calc(-1 * var(--fw) - 6 * var(--u));
  pointer-events: none;
  background:
    var(--c) 0 0 / var(--k) var(--t) no-repeat,
    var(--c) 0 0 / var(--t) var(--k) no-repeat,
    var(--c) 100% 0 / var(--k) var(--t) no-repeat,
    var(--c) 100% 0 / var(--t) var(--k) no-repeat,
    var(--c) 0 100% / var(--k) var(--t) no-repeat,
    var(--c) 0 100% / var(--t) var(--k) no-repeat,
    var(--c) 100% 100% / var(--k) var(--t) no-repeat,
    var(--c) 100% 100% / var(--t) var(--k) no-repeat;
  filter: drop-shadow(0 0 calc(4 * var(--u)) var(--rc));
}
html[data-frames='futuriste'] .piece.r-5:not(.sp-scope *) .frame::before,
.sp-scope[data-frames='futuriste'] .piece.r-5 .frame::before {
  animation: neon-hue 6s linear infinite;
}
@keyframes neon-hue {
  to {
    filter: drop-shadow(0 0 calc(4 * var(--u)) var(--rc)) hue-rotate(360deg);
  }
}

html[data-frames='minimal'] .piece:not(.sp-scope *),
.sp-scope[data-frames='minimal'] .piece {
  --fw: calc(1.5 * var(--u));
  --mw: 0px;
}
html[data-frames='minimal'] .piece:not(.sp-scope *) .frame,
.sp-scope[data-frames='minimal'] .piece .frame {
  border-color: var(--rc);
  background: transparent;
  box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-8 * var(--u)) rgba(0, 0, 0, 0.75);
}
@media (prefers-reduced-motion: reduce) {
  .piece.r-5 .frame::before {
    animation: none !important;
  }
}

/* Mode lecture des artistes et des tags : une bande horizontale, toutes les images à la même hauteur */
.reader-strip {
  width: 100%;
}
.strip-wrap {
  position: relative;
  /* D'un bord de l'écran à l'autre, au-delà de la largeur de la page */
  width: calc(100 * var(--vw));
  margin-inline: calc(50% - calc(50 * var(--vw)));
}
.strip {
  --sh: calc(calc(100 * var(--dvh)) - 17.5rem);
  display: flex;
  align-items: flex-start;
  gap: 18px;
  height: max(300px, var(--sh));
  padding: 4px 4px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  outline: none;
  cursor: grab;
}
.strip.grabbing,
.reader-pages.grabbing {
  cursor: grabbing;
  user-select: none;
}
/* Vertical : on attrape aussi les planches à la souris pour monter ou descendre */
@media (pointer: fine) {
  .reader-pages {
    cursor: grab;
    user-select: none;
  }
}
.reader-pages img,
.strip-item img {
  -webkit-user-drag: none;
}
.strip-item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 100%;
  margin: 0;
}
.si-art {
  position: relative;
  min-height: 0;
}
/* Toutes à la même hauteur ; une image très large ne dépasse jamais l'écran (format respecté) */
.strip-item img {
  display: block;
  width: min(calc((max(300px, var(--sh)) - 1.7rem - 14px) * var(--r)), calc(calc(100 * var(--vw)) - 3rem));
  height: auto;
  aspect-ratio: var(--r);
  max-width: none;
  background: rgb(var(--deep));
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
.strip-item figcaption {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--s-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.strip-item.is-blurred img {
  filter: blur(24px) saturate(0.6);
}
/* Planche manquante d'une série : un cadre vide au format des autres */
.si-missing {
  display: grid;
  place-content: center;
  gap: 0.25rem;
  width: min(calc((max(300px, var(--sh)) - 1.7rem - 14px) * var(--r)), calc(calc(100 * var(--vw)) - 3rem));
  aspect-ratio: var(--r);
  padding: 1rem;
  border: 2px dashed rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}
.si-missing b {
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--s2);
}
.strip-item.missing figcaption {
  visibility: hidden;
}
.strip-item .nsfw-veil {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.strip-wrap .book-nav {
  top: calc(50% - 0.85rem);
}
.strip-wrap .book-nav.prev {
  left: 14px;
}
.strip-wrap .book-nav.next {
  right: 14px;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .strip {
    --sh: calc(calc(100 * var(--dvh)) - 25rem);
    gap: 10px;
    cursor: auto;
  }
}

/* ═════════════ Vidéos : bouton ▶, grand écran ; image HD ═════════════ */
/* Un rond de verre au milieu de l'œuvre */
.play-btn {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(40px, 24%, 64px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(14, 10, 24, 0.42);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  color: #fff;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.7),
    0 10px 26px -8px rgba(0, 0, 0, 0.75);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.play-btn svg {
  width: 44%;
  height: 44%;
  margin-left: 0; /* le tracé est déjà décalé dans son cadre : son centre de gravité tombe au milieu */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.play-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 0 0 1.5px #fff,
    0 0 0 6px rgba(255, 255, 255, 0.14),
    0 12px 30px -8px rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.07);
}
.play-btn:active {
  transform: translate(-50%, -50%) scale(0.96);
}
.play-btn:focus-visible {
  outline: 3px solid var(--r4);
  outline-offset: 3px;
}
.piece.unlit .play-btn,
.piece.is-blurred .play-btn,
.strip-item.is-blurred .play-btn {
  visibility: hidden;
}
/* Sur un grand cadre (ouverture), le bouton grandit avec lui */
.show .play-btn {
  width: clamp(56px, 20%, 84px);
}
/* Dans la fiche, où la vidéo joue déjà : une petite pastille pour la voir en grand */
.play-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 11px 4px 9px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: rgba(var(--deep), 0.55);
  color: var(--muted);
  font: 800 11px/1.2 var(--body);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.play-pill svg {
  width: 12px;
  height: 12px;
}
.play-pill:hover,
.play-pill:focus-visible {
  color: var(--ink);
}
/* Fiche : la barre sous l'image (▶ à gauche, HQ à droite) */
.sheet-media {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  max-width: 100%;
}
.media-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 24px;
}
.hq-btn {
  padding: 3px 8px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  background: rgba(var(--deep), 0.55);
  color: var(--muted);
  font: 800 11px/1.2 var(--body);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.hq-btn:hover,
.hq-btn:focus-visible {
  color: var(--ink);
}
.viewer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: rgba(6, 5, 10, 0.94);
  animation: fade 0.16s ease;
}
.viewer-stage {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  padding: clamp(0.5rem, calc(2 * var(--vw)), 1.5rem);
  overflow: hidden;
}
.viewer-stage video,
.viewer-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.9);
}
/* La vidéo prend toute la place disponible, au bon format (bandes noires si besoin) */
.viewer-video .viewer-stage video {
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  height: 100%;
  max-height: none;
  background: #000;
  box-shadow: none;
}
.viewer-image .viewer-stage img {
  cursor: zoom-in;
}
.viewer.zoomed .viewer-stage {
  place-items: start;
  overflow: auto;
}
.viewer.zoomed .viewer-stage img {
  max-width: none;
  max-height: none;
  margin: auto;
  cursor: zoom-out;
}
.viewer-loading {
  position: absolute;
  color: var(--muted);
  font-size: var(--s-1);
}
.viewer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(var(--deep), 0.9);
}
.viewer-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--s-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer:fullscreen {
  background: #000;
}
.viewer:fullscreen .viewer-bar {
  position: absolute;
  inset: auto 0 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.viewer:fullscreen:hover .viewer-bar {
  opacity: 1;
}

/* ═════════════ Emballages des colis et des boxes (skins) ═════════════
   Chaque box garde sa couleur (--kind) ; seul l'emballage change. */
.parcel-art {
  --kind: #b9824a;
}
.parcel-art.kind-god {
  --kind: #c9a043;
}
.parcel-art.kind-spec {
  --kind: #6f8fc7;
}
.parcel-art.kind-artist {
  --kind: #5a9e84;
}
/* Caisse en bois : quatre grosses planches brutes, clous et coins en fer */
html[data-boxes='bois'] .parcel-art:not(.sp-scope *),
.sp-scope[data-boxes='bois'] .parcel-art {
  border-radius: 0.6cqi;
  background:
    /* coins en fer */
    linear-gradient(135deg, #5a5d63 0 7cqi, transparent 7cqi) 0 0 / 100% 100% no-repeat,
    linear-gradient(225deg, #5a5d63 0 7cqi, transparent 7cqi) 0 0 / 100% 100% no-repeat,
    linear-gradient(45deg, #4c4f55 0 7cqi, transparent 7cqi) 0 0 / 100% 100% no-repeat,
    linear-gradient(315deg, #4c4f55 0 7cqi, transparent 7cqi) 0 0 / 100% 100% no-repeat,
    /* planche en diagonale qui renforce la caisse (avec son ombre) */
    linear-gradient(148deg, transparent calc(50% - 7.4cqi), rgba(25, 12, 4, 0.55) calc(50% - 7.4cqi) calc(50% - 6.4cqi),
      color-mix(in srgb, var(--kind) 12%, #b07c4c) calc(50% - 6.4cqi), color-mix(in srgb, var(--kind) 12%, #8e6038) calc(50% + 6.4cqi),
      rgba(25, 12, 4, 0.7) calc(50% + 6.4cqi) calc(50% + 7.6cqi), transparent calc(50% + 7.6cqi)),
    /* têtes de clous */
    radial-gradient(circle at 4.5cqi 50%, #2c2d31 0 0.9cqi, #8a8c92 1cqi 1.3cqi, transparent 1.5cqi) 0 0 / 100% 25% repeat-y,
    radial-gradient(circle at calc(100% - 4.5cqi) 50%, #2c2d31 0 0.9cqi, #8a8c92 1cqi 1.3cqi, transparent 1.5cqi) 0 0 / 100% 25% repeat-y,
    /* joints sombres entre les quatre planches */
    repeating-linear-gradient(180deg, transparent 0 calc(25% - 0.9cqi), rgba(25, 12, 4, 0.9) calc(25% - 0.9cqi) 25%),
    /* nœuds et veines du bois */
    radial-gradient(ellipse 4cqi 1.6cqi at 30% 14%, rgba(60, 30, 10, 0.55), transparent 70%),
    radial-gradient(ellipse 3cqi 1.2cqi at 72% 62%, rgba(60, 30, 10, 0.5), transparent 70%),
    repeating-linear-gradient(178deg, rgba(0, 0, 0, 0.08) 0 0.35cqi, transparent 0.35cqi 1.6cqi, rgba(255, 230, 190, 0.05) 1.6cqi 2cqi, transparent 2cqi 3.4cqi),
    /* planches de teintes un peu différentes */
    linear-gradient(180deg,
      color-mix(in srgb, var(--kind) 14%, #a57345) 0 25%,
      color-mix(in srgb, var(--kind) 14%, #93633a) 25% 50%,
      color-mix(in srgb, var(--kind) 14%, #a06c40) 50% 75%,
      color-mix(in srgb, var(--kind) 14%, #8a5c35) 75% 100%);
  box-shadow:
    inset 0 0 0 0.8cqi rgba(40, 20, 6, 0.55),
    inset 0 -1.6cqi 0 rgba(30, 14, 4, 0.35),
    0 26px 40px -14px rgba(0, 0, 0, 0.85);
}
/* Pas de scotch sur une caisse : la planche en diagonale est dessinée dans le bois */
html[data-boxes='bois'] .parcel-art:not(.sp-scope *)::before,
.sp-scope[data-boxes='bois'] .parcel-art::before {
  display: none;
}

/* Paquet cadeau : papier brillant à rayures, ruban en croix et gros nœud sur le dessus */
html[data-boxes='cadeau'] .parcel-art:not(.sp-scope *),
.sp-scope[data-boxes='cadeau'] .parcel-art {
  --ribbon: color-mix(in srgb, #f3e2bd 70%, var(--kind));
  border-radius: 1.6cqi;
  background:
    /* ruban horizontal */
    linear-gradient(180deg, transparent calc(55% - 5cqi), rgba(0, 0, 0, 0.18) calc(55% - 5cqi) calc(55% - 4.4cqi), var(--ribbon) calc(55% - 4.4cqi) calc(55% + 4.4cqi), rgba(0, 0, 0, 0.18) calc(55% + 4.4cqi) calc(55% + 5cqi), transparent calc(55% + 5cqi)),
    /* reflet du papier glacé */
    linear-gradient(120deg, transparent 18%, rgba(255, 255, 255, 0.22) 24%, transparent 32%, transparent 64%, rgba(255, 255, 255, 0.12) 70%, transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0 25%, transparent 25%),
    /* rayures du papier cadeau */
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--kind) 78%, #fff) 0 3cqi, color-mix(in srgb, var(--kind) 88%, #3a2030) 3cqi 6cqi);
  box-shadow:
    inset 0 0 0 0.5cqi rgba(0, 0, 0, 0.15),
    0 26px 40px -14px rgba(0, 0, 0, 0.85);
}
/* ruban vertical */
html[data-boxes='cadeau'] .parcel-art:not(.sp-scope *)::before,
.sp-scope[data-boxes='cadeau'] .parcel-art::before {
  top: 0;
  width: 10cqi;
  height: 100%;
  clip-path: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 0.6cqi, var(--ribbon) 0.6cqi calc(100% - 0.6cqi), rgba(0, 0, 0, 0.18) calc(100% - 0.6cqi));
  box-shadow: none;
}
/* le nœud : deux boucles et le cœur du nœud, posés sur le dessus */
html[data-boxes='cadeau'] .parcel-art:not(.sp-scope *)::after,
.sp-scope[data-boxes='cadeau'] .parcel-art::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -9cqi;
  width: 42cqi;
  height: 20cqi;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--ribbon) 80%, #000) 0 3.4cqi, transparent 3.6cqi),
    radial-gradient(ellipse 11cqi 7.5cqi at 27% 52%, transparent 0 42%, var(--ribbon) 44% 92%, transparent 94%),
    radial-gradient(ellipse 11cqi 7.5cqi at 73% 52%, transparent 0 42%, var(--ribbon) 44% 92%, transparent 94%),
    radial-gradient(ellipse 11cqi 7.5cqi at 27% 52%, color-mix(in srgb, var(--ribbon) 70%, #000) 0 44%, transparent 46%),
    radial-gradient(ellipse 11cqi 7.5cqi at 73% 52%, color-mix(in srgb, var(--ribbon) 70%, #000) 0 44%, transparent 46%);
  filter: drop-shadow(0 0.8cqi 0.8cqi rgba(0, 0, 0, 0.35));
}

/* Capsule futuriste : métal brossé, joints lumineux à la couleur de la box, écran de statut */
html[data-boxes='futur'] .parcel-art:not(.sp-scope *),
.sp-scope[data-boxes='futur'] .parcel-art {
  --glow: color-mix(in srgb, var(--kind) 40%, #8fe6ff);
  --screen: color-mix(in srgb, var(--glow) 18%, #071014);
  border-radius: 4cqi;
  background:
    /* écran de statut : deux lignes lumineuses sur fond sombre */
    linear-gradient(var(--glow), var(--glow)) 21.3% 14% / 11cqi 1cqi no-repeat,
    linear-gradient(color-mix(in srgb, var(--glow) 60%, transparent), color-mix(in srgb, var(--glow) 60%, transparent)) 20.4% 17.4% / 7cqi 1cqi no-repeat,
    linear-gradient(var(--screen), var(--screen)) 22% 12% / 25cqi 10cqi no-repeat,
    /* joints lumineux */
    linear-gradient(180deg, transparent calc(25% - 0.5cqi), var(--glow) calc(25% - 0.5cqi) calc(25% + 0.5cqi), transparent calc(25% + 0.5cqi)),
    linear-gradient(180deg, transparent calc(82% - 0.4cqi), color-mix(in srgb, var(--glow) 60%, transparent) calc(82% - 0.4cqi) calc(82% + 0.4cqi), transparent calc(82% + 0.4cqi)),
    /* rivets */
    radial-gradient(circle at 7cqi 8cqi, #1c2026 0 0.9cqi, #a8b0ba 1cqi 1.3cqi, transparent 1.5cqi),
    radial-gradient(circle at calc(100% - 7cqi) 8cqi, #1c2026 0 0.9cqi, #a8b0ba 1cqi 1.3cqi, transparent 1.5cqi),
    /* métal brossé et reflet */
    linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.16) 28%, transparent 36%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.05) 1px 3px),
    linear-gradient(180deg, #8a929c 0 25%, #5d646d 25% 100%);
  box-shadow:
    inset 0 0 0 0.7cqi #2c3138,
    inset 0 0 0 1.2cqi rgba(255, 255, 255, 0.12),
    0 0 4cqi -1cqi var(--glow),
    0 26px 40px -14px rgba(0, 0, 0, 0.85);
}
/* bande lumineuse verticale (fermeture) */
html[data-boxes='futur'] .parcel-art:not(.sp-scope *)::before,
.sp-scope[data-boxes='futur'] .parcel-art::before {
  top: 0;
  width: 2.2cqi;
  height: 100%;
  clip-path: none;
  background: linear-gradient(180deg, transparent, var(--glow) 12% 88%, transparent);
  box-shadow: 0 0 2.4cqi var(--glow);
  animation: futur-pulse 2.6s ease-in-out infinite;
}
@keyframes futur-pulse {
  50% {
    opacity: 0.55;
  }
}
html[data-boxes='futur'] .parcel-art:not(.sp-scope *) .parcel-label,
.sp-scope[data-boxes='futur'] .parcel-art .parcel-label {
  background: #e9eef3;
}

/* Aperçu en boutique : trois boxes posées au sol */
.sp-parcels {
  position: absolute;
  inset: 22px 14px 26px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
}
.sp-parcel {
  position: relative;
  display: block;
  width: 76px;
  aspect-ratio: 10 / 9;
  container-type: inline-size;
}
.sp-parcel:nth-child(2) {
  width: 92px;
}
.sp-parcel .parcel-label small,
.sp-parcel .stk-star,
.sp-parcel .stk-uwu,
.sp-parcel .stk-heart {
  display: none;
}
.sp-wall,
.sp-parcels {
  z-index: 1;
}

/* Bulle déjà affichée qui revient : petite secousse au lieu d'une bulle de plus */
.toast.bump {
  animation: toast-bump 0.3s ease;
}
@keyframes toast-bump {
  40% {
    transform: scale(1.04);
  }
}

/* Abonnés : la réserve passe à 20 colis, sur deux rangées de 10 */
.charge-dots.two-rows {
  display: grid;
  grid-template-columns: repeat(10, 26px);
}
.home-nsfw {
  max-width: 34rem;
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: rgba(var(--deep), 0.45);
  color: var(--muted);
  font-size: var(--s-1);
  box-shadow: inset 0 0 0 1px var(--line);
}
.home-nsfw a {
  color: var(--ink);
  font-weight: 700;
}
@media (max-width: 820px) {
  .home-nsfw {
    margin-inline: auto;
  }
}
/* Soutien actif : petit cœur doré à côté du pseudo (en-tête, Réglages) */
.sup-badge {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 0.35rem;
  vertical-align: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a6, #e3a93a 70%);
  box-shadow: 0 0 0 1px rgba(255, 236, 170, 0.55), 0 0 10px rgba(242, 193, 78, 0.45);
}
.sup-badge svg {
  width: 12px;
  height: 12px;
  fill: #c2185b;
}
.sup-line {
  color: var(--r4);
  font-weight: 700;
}

/* Année de sortie de l'œuvre, sous l'artiste */
.cartel .year {
  opacity: 0.62;
  font-weight: 400;
}

/* ═════════════ Boutique : soutenir le jeu (euros) ═════════════ */
.support {
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.support > h2 {
  margin-bottom: 0.2rem;
}
.support > .lede {
  max-width: 44rem;
  margin: 0 0 1rem;
}
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.support-item {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 1.2rem 1.3rem;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--r4) 10%, var(--panel)), var(--panel) 65%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r4) 35%, transparent);
}
.support-item.on {
  box-shadow: inset 0 0 0 2px var(--r4);
}
.support-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.support-top h3 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--s2);
}
.support-price {
  color: var(--r4);
  font-weight: 800;
  font-size: var(--s1);
}
.support-item ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  line-height: 1.6;
}
.support-item ul b {
  color: var(--ink);
}
.support-art {
  margin: -0.4rem -0.4rem 0.2rem;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(var(--light), 0.08), transparent 70%), rgba(var(--deep), 0.45);
}

/* Bandeaux illustrés : de vraies boxes du jeu (elles suivent l'emballage choisi), posées sur une petite scène */
.sa {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 48 / 18;
  margin: 0 auto;
  container-type: inline-size;
  isolation: isolate;
}
.sa-light {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(28% 75% at 50% -8%, rgba(255, 228, 160, 0.26), transparent 72%),
    radial-gradient(22% 60% at 18% -10%, rgba(255, 150, 200, 0.12), transparent 70%),
    radial-gradient(22% 60% at 82% -10%, rgba(140, 190, 255, 0.12), transparent 70%);
}
.sa-floor {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 22cqi;
  background:
    radial-gradient(42% 46% at 50% 38%, rgba(255, 255, 255, 0.07), transparent 72%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.34));
  border-top: 1px solid rgba(var(--light), 0.07);
}
.sa-group {
  position: absolute;
  bottom: 3.4cqi;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sa-boxes {
  position: relative;
  z-index: 1;
  display: block;
}
.sa-b {
  position: relative;
  display: block;
  width: calc(var(--w) * 1cqi);
  aspect-ratio: 10 / 9;
  container-type: inline-size;
}
.sa-b .parcel-art {
  box-shadow:
    inset 0 0 0 0.6cqi rgba(90, 50, 14, 0.35),
    inset 0 -6cqi 8cqi -6cqi rgba(70, 38, 10, 0.35),
    0 1.6cqi 2.4cqi -0.8cqi rgba(0, 0, 0, 0.75);
}
.sa-b .parcel-label small,
.sa-b .stk-star,
.sa-b .stk-uwu,
.sa-b .stk-heart {
  display: none;
}
/* Piles : les boxes sont posées les unes sur les autres */
.sa-pile .sa-boxes {
  width: 24cqi;
  height: 21.6cqi;
}
.sa-stock .sa-boxes {
  width: 18.6cqi;
  height: 17.2cqi;
}
.sa-pile .sa-b,
.sa-stock .sa-b {
  position: absolute;
  left: calc(var(--x) * 1cqi);
  bottom: calc(var(--y) * 1cqi);
}
.sa-qty {
  position: relative;
  z-index: 2;
  margin-top: 1.2cqi;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  background: rgba(var(--deep), 0.82);
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(10px, 2.7cqi, 15px);
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.16), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.sa-qty.gold {
  background: linear-gradient(180deg, #ffe08a, #e3b245);
  color: #4a3208;
  box-shadow: 0 0 0 1px rgba(255, 236, 170, 0.6), 0 0 14px rgba(255, 205, 90, 0.45);
}
/* Halo doré qui tourne lentement derrière les God box */
.sa-halo {
  position: absolute;
  left: 50%;
  bottom: 58%;
  z-index: 0;
  width: 54cqi;
  aspect-ratio: 1;
  translate: -50% 50%;
  background:
    radial-gradient(closest-side, rgba(255, 220, 130, 0.6), rgba(255, 200, 90, 0.15) 45%, transparent 65%),
    repeating-conic-gradient(rgba(255, 220, 130, 0.45) 0 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.5) 45%, transparent 78%);
  mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.5) 45%, transparent 78%);
  animation: sa-spin 40s linear infinite;
}
@keyframes sa-spin {
  to {
    rotate: 1turn;
  }
}
.sa-spark {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  z-index: 3;
  width: calc(var(--s) * 2.6cqi);
  aspect-ratio: 1;
  background: #fff4cf;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px rgba(255, 230, 160, 0.8));
  animation: sa-twinkle 3.2s ease-in-out infinite var(--d);
}
@keyframes sa-twinkle {
  0%,
  100% {
    opacity: 0.25;
    scale: 0.6;
  }
  50% {
    opacity: 1;
    scale: 1;
  }
}
/* Pack de soutien : une pile de colis, la God box au centre, Série box et Artist box */
.sa-bundle .sa-light {
  background:
    radial-gradient(30% 80% at 50% -10%, rgba(255, 220, 140, 0.34), transparent 72%),
    radial-gradient(24% 60% at 20% -10%, rgba(255, 170, 110, 0.14), transparent 70%),
    radial-gradient(24% 60% at 80% -10%, rgba(130, 200, 180, 0.14), transparent 70%);
}
.sa-sub .sa-light {
  background:
    radial-gradient(26% 70% at 12% -10%, rgba(255, 110, 180, 0.24), transparent 72%),
    radial-gradient(26% 70% at 88% -10%, rgba(255, 220, 140, 0.26), transparent 72%),
    radial-gradient(30% 60% at 50% -10%, rgba(255, 255, 255, 0.06), transparent 70%);
}
.sa-bundle .sa-pile {
  left: 12cqi;
}
.sa-bundle .sa-hero {
  left: 50%;
  bottom: 5cqi;
  translate: -50% 0;
}
.sa-bundle .sa-duo {
  left: 63cqi;
  flex-direction: row;
  align-items: flex-end;
  gap: 2cqi;
}
.sa-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Abonnement : l'horloge, le tapis qui amène un colis toutes les 5 minutes, la réserve de 20, la God box du jour */
.sa-clock-wrap {
  position: absolute;
  left: 3cqi;
  bottom: 3.4cqi;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sa-clock {
  position: relative;
  width: 14cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(rgba(255, 95, 162, 0.85) 0 30deg, transparent 30deg),
    radial-gradient(circle, #33284a 0 60%, #241c36 100%);
  box-shadow: 0 0 0 0.7cqi #f3e9d6, 0 0 0 1.1cqi rgba(0, 0, 0, 0.25), 0 1.6cqi 3cqi rgba(0, 0, 0, 0.5);
}
.sa-clock::before {
  /* graduations */
  content: '';
  position: absolute;
  inset: 0.6cqi;
  border-radius: 50%;
  background: repeating-conic-gradient(from -2deg, #f3e9d6 0 4deg, transparent 4deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 81%);
  mask: radial-gradient(closest-side, transparent 80%, #000 81%);
}
.sa-hand {
  position: absolute;
  left: calc(50% - 0.45cqi);
  bottom: 50%;
  width: 0.9cqi;
  height: 5.2cqi;
  border-radius: 1cqi;
  background: #f3e9d6;
  transform-origin: 50% 100%;
  animation: sa-spin 6s linear infinite;
}
.sa-clock::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: #ff5fa2;
}
.sa-belt {
  position: absolute;
  left: 20cqi;
  width: 38cqi;
  bottom: 5.4cqi;
  height: 2.2cqi;
  border-radius: 2cqi;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1.2cqi, transparent 1.2cqi 3cqi) 0 0 / 3cqi 100%,
    linear-gradient(180deg, #4a4058, #2a2236);
  box-shadow: 0 0.5cqi 1.2cqi rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: sa-belt 1.2s linear infinite;
}
@keyframes sa-belt {
  to {
    background-position: 3cqi 0, 0 0;
  }
}
.sa-rollers {
  position: absolute;
  inset: 100% 1cqi auto;
  height: 1.6cqi;
  background: radial-gradient(circle at 50% 30%, #6d6280 0 0.6cqi, transparent 0.7cqi) 0 0 / 4.2cqi 100%;
}
.sa-track {
  position: absolute;
  inset: auto 0 100%;
  height: 8cqi;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 86%, transparent);
  mask: linear-gradient(90deg, transparent, #000 10%, #000 86%, transparent);
}
.sa-ride {
  position: absolute;
  bottom: 0;
  left: 0;
  animation: sa-ride 8s linear infinite;
  animation-delay: calc(var(--i) * -2s);
}
.sa-ride .sa-b .parcel-label {
  display: none;
}
@keyframes sa-ride {
  from {
    left: -20%;
  }
  to {
    left: 100%;
  }
}
.sa-sub .sa-stock {
  left: 60cqi;
}
.sa-sub .sa-daily {
  left: 82cqi;
  bottom: 5cqi;
}
.sa-sub .sa-daily .sa-halo {
  width: 32cqi;
}
@media (max-width: 560px) {
  /* Sur téléphone, les étiquettes gardent une taille lisible : la scène est un peu plus haute */
  .sa {
    aspect-ratio: 48 / 21;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sa *,
  .sa *::before,
  .sa *::after {
    animation-play-state: paused !important;
  }
}

/* ═════════════ Musée, Organisation : dossiers en forme de portes entrouvertes ═════════════ */
.field > span {
  font-weight: 700;
  font-size: var(--s-1);
  color: var(--muted);
}
.orga-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: -0.2rem 0 0.9rem;
  color: var(--muted);
  font-size: var(--s-1);
  font-weight: 700;
}
.orga-trail a {
  color: var(--muted);
  text-decoration: none;
}
.orga-trail a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.orga-trail [aria-current] {
  color: var(--ink);
}
.orga-trail .sep {
  opacity: 0.6;
}
.orga-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-bottom: 1.4rem;
}
.orga-head h2 {
  margin: 0;
  font-size: var(--s3);
  overflow-wrap: anywhere;
}
/* Le chemin, et juste à côté, discret, « Créer une nouvelle salle » ; « Sélectionner » au bout de
   la ligne du nom */
.orga-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  margin: -0.2rem 0 0.9rem;
}
.orga-path .orga-trail {
  margin: 0;
}
.orga-new {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.6rem 0.18rem 0.45rem;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--light), 0.08);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}
.orga-new:hover {
  background: rgba(var(--light), 0.14);
  color: var(--ink);
}
.orga-new:focus-visible {
  outline: 3px solid var(--r4);
  outline-offset: 2px;
}
.orga-new .icon {
  width: 12px;
  height: 12px;
}
/* Mode lecture et Sélectionner, au bout de la ligne */
.orga-tools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-left: auto;
}
/* Dans Mon musée, les œuvres partent de la gauche (on choisit leur ordre) */
.orga-wall .wall {
  justify-content: flex-start;
}
/* Glisser-déposer : le trait qui montre où l'œuvre, la série ou la porte va se glisser */
.ins-mark {
  position: fixed;
  z-index: 80;
  width: 4px;
  border-radius: 2px;
  background: #f2c14e;
  box-shadow: 0 0 10px rgba(242, 193, 78, 0.85);
  pointer-events: none;
}
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.door-wrap {
  position: relative;
}
/* Chaque porte dans un petit cadre, avec dessous le nom de la salle et ce qu'elle contient */
.door-tile {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  padding: 12px 12px 10px;
  -webkit-touch-callout: none;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--light), 0.07), rgba(var(--light), 0.03));
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -16px rgba(0, 0, 0, 0.8);
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.door-tile:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.35), 0 14px 28px -16px rgba(0, 0, 0, 0.85);
}
.door-tile:focus-visible {
  outline: 3px solid var(--r4);
  outline-offset: 3px;
}
.door {
  display: block;
  width: min(100%, 172px);
}
/* Le nom de la salle en grand ; plus petit s'il est long, et sa fin se cache s'il ne tient pas */
.door-name {
  max-width: 100%;
  margin-top: 0.5rem;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.door-name.name-l {
  font-size: 0.98rem;
}
.door-name.name-xl {
  font-size: 0.86rem;
}
.door-count {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem 0.7rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.door-count > span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}
.door-count .icon {
  width: 15px;
  height: 15px;
}
.series-tile .door-count {
  gap: 0.3rem;
}
/* Porte attrapée, et porte (ou case) où la lâcher */
.door-wrap[draggable='true'] .door-tile {
  cursor: grab;
}
.door-wrap.is-held,
.piece.is-held {
  opacity: 0.4;
}
.door-wrap.drop-over .door-tile {
  box-shadow: inset 0 0 0 3px #f4c64e, 0 0 0 4px rgba(244, 198, 78, 0.18);
  transform: translateY(-3px);
}
.door-wrap.drop-over .door-leaf {
  transform: rotateY(55deg);
}
.orga-trail [data-crumb].drop-over {
  color: #f4c64e;
  text-decoration: underline;
}
/* La porte : un encadrement de bois, la salle éclairée qu'on devine derrière, le battant entrouvert.
   Ses couleurs suivent le décor du musée (bois, porte de bureau jaunie, acier, néon). */
.door-frame {
  --df: #5a3a22;
  --df-glow: inset 0 0 0 1px rgba(255, 220, 170, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.45), 0 18px 30px -14px rgba(0, 0, 0, 0.8);
  --room: radial-gradient(ellipse 55% 70% at 78% 55%, rgba(255, 216, 150, 0.95), rgba(255, 176, 92, 0.35) 45%, transparent 78%), linear-gradient(180deg, #2a1c12, #120b07);
  --dl: linear-gradient(90deg, #7c4f2c, #9c6639 38%, #8a5731 70%, #6e4627);
  --dl-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.28), inset -6px 0 10px -6px rgba(0, 0, 0, 0.45);
  --dp: rgba(0, 0, 0, 0.12);
  --dp-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.3), inset -2px -2px 0 rgba(255, 230, 190, 0.18);
  --dk: radial-gradient(circle at 35% 35%, #fff0c2, #d9a640 55%, #8a6118);
  --dk-w: 9%;
  --dk-h: auto;
  --dk-ar: 1;
  --dk-r: 50%;
  --dk-top: 58%;
  position: relative;
  display: block;
  aspect-ratio: 5 / 8;
  border: 8px solid var(--df);
  border-bottom-width: 5px;
  border-radius: 8px 8px 3px 3px;
  background: #140d08;
  box-shadow: var(--df-glow);
  perspective: 620px;
}
.door-room {
  position: absolute;
  inset: 0;
  background: var(--room);
  transition: filter 0.45s ease;
}
/* Le battant, entrouvert vers l'intérieur de la salle */
.door-leaf {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--dl);
  box-shadow: var(--dl-shadow);
  transform-origin: left center;
  transform: rotateY(24deg);
  transition: transform 0.5s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.door-panel {
  position: absolute;
  left: 15%;
  right: 15%;
  border-radius: 3px;
  background: var(--dp);
  box-shadow: var(--dp-shadow);
}
.door-panel.top {
  top: 9%;
  aspect-ratio: 1;
}
.door-panel.bottom {
  bottom: 8%;
  height: 30%;
}
.door-knob {
  position: absolute;
  right: 9%;
  top: var(--dk-top);
  width: var(--dk-w);
  height: var(--dk-h);
  aspect-ratio: var(--dk-ar);
  border-radius: var(--dk-r);
  background: var(--dk);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.door-tile:hover .door-leaf,
.door-tile:focus-visible .door-leaf {
  transform: rotateY(42deg);
}
.door-tile:hover .door-room,
.door-tile:focus-visible .door-room {
  filter: brightness(1.15);
}
/* La pancarte : l'œuvre choisie pour la salle, recadrée en carré, accrochée en très grand sur la
   porte (presque toute sa largeur). La porte qui la porte est à peine entrouverte : on reconnaît
   l'image de face, comme l'affiche sur la porte de sa chambre ; au survol, elle s'ouvre. */
.door-sign {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 4%;
  z-index: 1;
  aspect-ratio: 1;
  padding: 4px;
  border-radius: 3px;
  background: var(--sign-frame, linear-gradient(135deg, #f0d79a, #a87b34));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 12px -2px rgba(0, 0, 0, 0.55);
}
.door-leaf:has(.door-sign) {
  transform: rotateY(9deg);
}
.door-leaf:has(.door-sign) .door-knob {
  top: 66%;
}
.door-leaf:has(.door-sign) .door-panel.bottom {
  bottom: 6%;
  height: 22%;
}
.door-leaf:has(.door-sign) .door-panel.top {
  display: none;
}
.sign-pic {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #222;
}
.sign-pic img {
  position: absolute;
  max-width: none;
  height: auto;
}
.sign-pic.is-blurred img {
  filter: blur(8px) saturate(0.8);
}
/* Backrooms : porte de bureau jaunie, poignée en bec-de-cane, néon blafard derrière */
html[data-decor='backrooms'] .door-frame {
  --df: #7a7150;
  --df-glow: inset 0 0 0 1px rgba(255, 250, 220, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 18px 30px -14px rgba(0, 0, 0, 0.6);
  --room: radial-gradient(ellipse 55% 75% at 78% 45%, rgba(255, 252, 215, 0.95), rgba(240, 230, 160, 0.35) 45%, transparent 78%), linear-gradient(180deg, #4a4328, #2a2616);
  --dl: linear-gradient(90deg, #b9ab78, #d2c595 38%, #c6b886 70%, #ab9d6b);
  --dl-shadow: inset 0 0 0 2px rgba(70, 60, 30, 0.25), inset -6px 0 10px -6px rgba(70, 60, 30, 0.4);
  --dp: rgba(90, 80, 40, 0.08);
  --dp-shadow: inset 2px 2px 0 rgba(90, 78, 40, 0.28), inset -2px -2px 0 rgba(255, 252, 230, 0.4);
  --dk: linear-gradient(180deg, #ecebe3, #9c998c);
  --dk-w: 20%;
  --dk-h: 3%;
  --dk-ar: auto;
  --dk-r: 3px;
  --sign-frame: linear-gradient(135deg, #f4efdb, #b9b29a);
}
/* Galerie béton : porte d'acier brossé, lumière froide */
html[data-decor='beton'] .door-frame {
  --df: #2a2c30;
  --df-glow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.45), 0 18px 30px -14px rgba(0, 0, 0, 0.8);
  --room: radial-gradient(ellipse 55% 75% at 78% 50%, rgba(235, 242, 255, 0.9), rgba(200, 215, 235, 0.3) 45%, transparent 78%), linear-gradient(180deg, #1c1e22, #0b0c0e);
  --dl: linear-gradient(90deg, #5c6064, #7a7e83 38%, #6c7075 70%, #54585c);
  --dl-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset -6px 0 10px -6px rgba(0, 0, 0, 0.5);
  --dp: rgba(255, 255, 255, 0.03);
  --dp-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.35), inset -1px -1px 0 rgba(255, 255, 255, 0.12);
  --dk: linear-gradient(180deg, #e2e4e8, #85888e);
  --dk-w: 4%;
  --dk-h: 22%;
  --dk-ar: auto;
  --dk-r: 3px;
  --dk-top: 44%;
  --sign-frame: linear-gradient(135deg, #f2f2f2, #9a9a9a);
}
/* Nuit néon : porte sombre au liseré lumineux, salle rose derrière */
html[data-decor='neon'] .door-frame {
  --df: #15122b;
  --df-glow: inset 0 0 0 1px rgba(143, 214, 232, 0.5), 0 0 0 1px rgba(194, 95, 178, 0.65), 0 0 20px -4px rgba(194, 95, 178, 0.6), 0 18px 30px -14px rgba(0, 0, 0, 0.85);
  --room: radial-gradient(ellipse 55% 75% at 78% 50%, rgba(240, 120, 220, 0.95), rgba(180, 80, 200, 0.35) 45%, transparent 78%), linear-gradient(180deg, #1a1430, #0a0916);
  --dl: linear-gradient(90deg, #1b1735, #26204a 38%, #211c40 70%, #18142f);
  --dl-shadow: inset 0 0 0 1px rgba(143, 214, 232, 0.6), 0 0 10px rgba(143, 214, 232, 0.3);
  --dp: transparent;
  --dp-shadow: inset 0 0 0 1px rgba(143, 214, 232, 0.45);
  --dk: #f08ad8;
  --sign-frame: linear-gradient(135deg, #8fd6e8, #c25fb2);
}
html[data-decor='neon'] .door-knob {
  box-shadow: 0 0 6px #f08ad8;
}
/* Menu contextuel (clic droit, appui long) */
.ctx-menu {
  position: fixed;
  z-index: 95;
  display: grid;
  min-width: 190px;
  padding: 5px;
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -12px rgba(0, 0, 0, 0.75);
  animation: fade 0.12s ease;
}
.ctx-menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--s-1);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.ctx-menu button:hover,
.ctx-menu button:focus-visible {
  outline: none;
  background: rgba(var(--light), 0.1);
}
.ctx-menu button.on {
  color: #f4c64e;
}
.ctx-menu button.danger {
  color: #ff9d8c;
}
.ctx-menu .icon {
  flex: none;
  width: 16px;
  height: 16px;
}
.cat-dock-sep {
  align-self: stretch;
  width: 1px;
  margin: 4px 2px;
  background: rgba(var(--light), 0.18);
}
.cat-dock-slot.add .icon {
  width: 22px;
  height: 22px;
}
.orga-sep {
  margin: 2.2rem 0 1.2rem;
  border: 0;
  border-top: 1px solid var(--line);
}
.orga-empty {
  max-width: 40rem;
}
/* Les séries de la salle : à part des œuvres, chacune comme un album posé (sa première planche
   possédée en couverture, la tranche à gauche, les pages qui dépassent à droite) */
.orga-series {
  margin-bottom: 1.8rem;
}
.orga-series:last-child {
  margin-bottom: 0;
}
.series-wrap {
  position: relative;
}
.series-book {
  position: relative;
  display: block;
  width: min(100%, 150px);
  aspect-ratio: 5 / 7;
  margin: 4px 8px 6px 0;
  border-radius: 3px 6px 6px 3px;
  background: #ece6d8;
  box-shadow: 3px 3px 0 -1px #ded6c4, 6px 6px 0 -2px #c9bfaa, 0 16px 26px -14px rgba(0, 0, 0, 0.85);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sb-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: rgba(var(--deep), 0.85);
}
.sb-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
.sb-cover.is-blurred img {
  filter: blur(9px) saturate(0.85);
  transform: scale(1.15);
}
.sb-cover.is-none {
  display: grid;
  place-items: center;
  color: rgba(var(--light), 0.3);
}
.sb-cover.is-none svg {
  width: 38%;
  height: auto;
}
/* La tranche */
.series-book::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 9%;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.12) 70%, rgba(255, 255, 255, 0.18));
  pointer-events: none;
}
.series-tile:hover .series-book,
.series-tile:focus-visible .series-book {
  transform: translateY(-3px) rotate(-1.5deg);
}
.series-tile.done .series-book {
  box-shadow: 3px 3px 0 -1px #ded6c4, 6px 6px 0 -2px #c9bfaa, 0 0 0 2px rgba(242, 193, 78, 0.7), 0 16px 26px -14px rgba(242, 193, 78, 0.45);
}
.series-tile.done .door-count {
  color: #f2c14e;
}
.series-wrap[draggable='true'] .door-tile {
  cursor: grab;
}
.series-wrap.is-held {
  opacity: 0.4;
}
.wall-tools {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.6rem;
}
/* Glisser-déposer d'œuvres ou de portes : le dock en bas de l'écran */
.drag-dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(var(--deep), 0.94);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(var(--light), 0.12);
  translate: -50% 140%;
  opacity: 0;
  pointer-events: none;
  transition: translate 0.22s ease, opacity 0.22s ease;
}
body.dragging-works .drag-dock {
  translate: -50% 0;
  opacity: 1;
  pointer-events: auto;
}
.drag-slot {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 128px;
  padding: 12px 16px;
  border: 2px dashed rgba(var(--light), 0.24);
  border-radius: 12px;
  color: var(--ink);
  font-weight: 700;
  font-size: var(--s-1);
  text-align: center;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.drag-slot .icon {
  width: 22px;
  height: 22px;
}
.drag-slot.drop-over {
  border-color: #f4c64e;
  background: rgba(244, 198, 78, 0.12);
  transform: translateY(-3px);
}
.drag-count {
  padding: 0 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: var(--s-1);
}
.wall .piece[draggable='true'] {
  cursor: grab;
}
/* Paramètres d'une salle */
.fs-dialog {
  width: min(560px, 100%);
}
.fs-sign {
  display: grid;
  gap: 0.5rem;
}
.fs-label {
  font-weight: 700;
  font-size: var(--s-1);
  color: var(--muted);
}
.fs-sign-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.fs-preview {
  flex: none;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  padding: 4px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f3d488, #b88a32);
}
.fs-none {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: rgba(var(--deep), 0.8);
  color: var(--muted);
  font-size: var(--s-1);
  font-weight: 700;
}
.fs-sign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.fs-sign .fine {
  margin: 0;
}
.fs-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
}
.fs-tools,
.fs-save {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.fs-save {
  margin-left: auto;
}
.fs-danger {
  color: #ff9d8c;
}
.fs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  grid-auto-rows: max-content;
  gap: 8px;
  max-height: min(calc(55 * var(--vh)), 440px);
  overflow-y: auto;
  padding: 2px;
}
/* Des vignettes carrées, toutes pareilles : l'image (même très haute, une planche de BD) est
   centrée et coupée, elle ne peut plus étirer la case */
.fs-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: rgba(var(--deep), 0.6);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line);
}
.fs-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform 0.2s ease;
}
.fs-thumb:hover img {
  transform: scale(1.06);
}
.fs-thumb.on {
  box-shadow: 0 0 0 3px #f4c64e;
}
.fs-thumb.is-blurred img {
  filter: blur(8px);
}
.crop-wrap {
  display: grid;
  place-items: center;
}
.crop-stage {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #111;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
}
.crop-stage img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.crop-box {
  position: absolute;
  border: 2px solid #fff;
  border-radius: 2px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.58);
  cursor: move;
}
.crop-box::before,
.crop-box::after {
  content: '';
  position: absolute;
  inset: 33.33% 0;
  border-block: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.crop-box::after {
  inset: 0 33.33%;
  border-block: 0;
  border-inline: 1px solid rgba(255, 255, 255, 0.35);
}
.crop-zoom {
  width: 100%;
  accent-color: var(--pink);
}
.choice-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pick-new {
  color: #f4c64e;
}
/* Choisir où ranger un dossier */
.pick-list {
  display: grid;
  gap: 2px;
  max-height: min(calc(55 * var(--vh)), 460px);
  overflow-y: auto;
}
.pick-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  padding-left: calc(0.7rem + var(--d, 0) * 1.1rem);
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.pick-row span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pick-row small {
  margin-left: auto;
  color: var(--muted);
  font-weight: 600;
}
.pick-row:hover:not([disabled]),
.pick-row:focus-visible {
  background: rgba(var(--light), 0.1);
}
.pick-row[disabled] {
  opacity: 0.55;
  cursor: default;
}
.pick-row .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
}
@media (max-width: 520px) {
  .doors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
  }
  .fs-sign-row {
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .door-leaf {
    transition: none;
  }
}

/* ── Musée, Ma vitrine : un podium de 3 places, puis une galerie de 17 places ── */
.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 1.4rem;
  max-width: 1000px;
  margin: 0.6rem auto 2.8rem;
}
.pod {
  --ph: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.pod-1 {
  --ph: 290px;
}
.pod-3 {
  --ph: 200px;
}
.pod .vit-slot {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 16px;
}
.pod .piece {
  width: min(100%, calc(var(--r) * var(--ph) + 2 * (var(--fw) + var(--mw))));
}
/* Les marches : or, argent, bronze */
.pod-step {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, rgba(var(--light), 0.16), rgba(var(--light), 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px var(--line), 0 16px 26px -18px rgba(0, 0, 0, 0.85);
}
.pod-1 .pod-step {
  height: 96px;
}
.pod-2 .pod-step {
  height: 68px;
}
.pod-3 .pod-step {
  height: 48px;
}
.pod-step b {
  font-family: var(--display);
  font-size: 2.1rem;
  line-height: 1;
  background: linear-gradient(180deg, #fff3c4, #e2a93a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pod-2 .pod-step b {
  background-image: linear-gradient(180deg, #ffffff, #a9b2bd);
}
.pod-3 .pod-step b {
  background-image: linear-gradient(180deg, #ffd9b8, #b76e3a);
}
/* Une marche vide : sa place en pointillés (on peut y glisser une pièce) */
.vit-empty {
  border: 2px dashed rgba(var(--light), 0.18);
  border-radius: 12px;
  background: rgba(var(--light), 0.025);
}
.pod .vit-empty {
  width: min(100%, calc(var(--ph) * 0.8));
  height: var(--ph);
}
.vit-gallery {
  --h: 170px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 44px 30px;
  padding: 10px 4px 8px;
}
.vit-gallery .vit-slot {
  flex: none;
}
/* Chaque pièce à la hauteur de la galerie, à son format (sans dépasser la largeur de l'écran) */
.vit-gallery .vit-slot .piece {
  width: calc(var(--r) * var(--h) + 2 * (var(--fw) + var(--mw)));
  max-width: calc(100 * var(--vw) - 48px);
}
.vit-gallery.is-empty {
  min-height: 0;
  padding: 0;
}
/* Pendant un glisser-déposer, la galerie montre où lâcher (au bout) */
#vitrine.is-dragging .vit-gallery {
  min-height: 150px;
  border-radius: 14px;
  outline: 2px dashed rgba(var(--light), 0.18);
  outline-offset: 4px;
}
#vitrine.is-dragging .vit-gallery.drop-over {
  outline-color: #f2c14e;
}
/* Une série exposée : un album posé, son nom, ses planches */
.vit-book {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: 150px;
  color: var(--ink);
  text-decoration: none;
}
.vit-book .series-book {
  width: calc(var(--h, 170px) * 0.72);
  margin: 0 6px 6px 0;
}
.pod .vit-book {
  width: min(100%, calc(var(--ph) * 0.8));
}
.pod .vit-book .series-book {
  width: min(100%, calc(var(--ph) * 0.72));
}
.vit-book-name {
  max-width: 100%;
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vit-book-count {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.vit-book-count .icon {
  width: 14px;
  height: 14px;
}
.vit-book.done .series-book {
  box-shadow: 3px 3px 0 -1px #ded6c4, 6px 6px 0 -2px #c9bfaa, 0 0 0 2px rgba(242, 193, 78, 0.7), 0 16px 26px -14px rgba(242, 193, 78, 0.45);
}
.vit-hidden {
  display: grid;
  place-items: center;
  gap: 0.3rem;
  width: 130px;
  height: var(--h, 170px);
  border-radius: 10px;
  background: rgba(var(--deep), 0.6);
  color: var(--muted);
  font-size: 0.85rem;
}
.vit-slot[draggable='true'] {
  cursor: grab;
}
.vit-slot.is-held {
  opacity: 0.4;
}
.vit-slot.drop-over {
  border-radius: 12px;
  outline: 3px solid #f2c14e;
  outline-offset: 6px;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .podium {
    gap: 0.6rem;
  }
  .pod {
    --ph: 150px;
  }
  .pod-1 {
    --ph: 190px;
  }
  .pod-3 {
    --ph: 130px;
  }
  .pod-1 .pod-step {
    height: 70px;
  }
  .pod-2 .pod-step {
    height: 50px;
  }
  .pod-3 .pod-step {
    height: 36px;
  }
  .pod-step b {
    font-size: 1.6rem;
  }
  .vit-gallery {
    --h: 120px;
    gap: 34px 18px;
  }
  .vit-book {
    width: 110px;
  }
}

/* Réglages : outils de test (Kaparo) */
.dev-tools h2 small {
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(var(--light), 0.1);
  color: var(--muted);
  font-size: 0.7rem;
  vertical-align: middle;
}
.dev-rows {
  display: grid;
  gap: 0.5rem;
}
.dev-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.dev-row > span {
  min-width: 6.5rem;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
}
.dev-row .danger {
  color: #ff8a8a;
}
/* Petite flèche vers le bas d'un bouton qui ouvre un menu */
.icon.chev-down {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
}

/* ───────────── Profil ───────────── */
/* Image de profil : une œuvre recadrée en carré (comme une pancarte), ou l'initiale du pseudo */
.avatar {
  position: relative;
  display: inline-block;
  flex: none;
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel-2);
}
.avatar img {
  position: absolute;
  max-width: none;
  height: auto;
}
.avatar.is-blurred img {
  filter: blur(6px) saturate(0.8);
}
.avatar.is-initial {
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, #ff6fb0, #8c6cf0);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
}
.avatar-xs {
  width: 22px;
  font-size: 0.75rem;
}
.avatar-sm {
  width: 30px;
  font-size: 0.95rem;
}
.avatar-xl {
  width: 128px;
  font-size: 3.2rem;
}
/* Barre du haut : engrenage « Paramètres » puis l'onglet Profil */
.top-settings {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--muted);
  text-decoration: none;
}
.top-settings svg {
  width: 22px;
  height: 22px;
}
@media (hover: hover) {
  .top-settings:hover {
    color: var(--ink);
    background: var(--panel);
  }
}
.top-settings[aria-current='page'] {
  color: var(--paper-ink);
  background: var(--paper);
}
.top-profile {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: -0.6rem;
  padding: 0.3rem 0.85rem 0.3rem 0.3rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
  isolation: isolate;
}
@media (hover: hover) {
  .top-profile:hover {
    color: var(--ink);
    background: var(--panel);
  }
}
.top-profile[aria-current='page'] {
  color: var(--paper-ink);
  background: var(--paper);
}
.top-profile .pip,
.nav-profil .pip {
  min-width: 1.4em;
  padding: 0 0.35em;
  border-radius: 999px;
  font-size: var(--s-1);
  text-align: center;
}
.nav .pip.gold,
.top-profile .pip.gold {
  background: #f2c14e;
  color: #3a2604;
}
.tp-name {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Abonné·e : l'onglet Profil est doré, avec un reflet qui passe */
.top-profile.is-gold,
.nav a.nav-profil.is-gold {
  color: #3a2604;
  background: linear-gradient(135deg, #ffe7a3, #f2c14e 40%, #c8902a 75%, #f7d774);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 205, 0.7), 0 0 18px -4px rgba(242, 193, 78, 0.65);
  overflow: hidden;
}
.top-profile.is-gold::after,
.nav a.nav-profil.is-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.65) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat;
  animation: gold-sheen 3.6s ease-in-out infinite;
}
.top-profile.is-gold[aria-current='page'],
.nav a.nav-profil.is-gold[aria-current='page'] {
  box-shadow: inset 0 0 0 2px #fff4cd, 0 0 22px -2px rgba(242, 193, 78, 0.9);
}
@media (hover: hover) {
  .top-profile.is-gold:hover {
    color: #3a2604;
    filter: brightness(1.06);
  }
}
@keyframes gold-sheen {
  0%,
  55% {
    background-position: -150% 0;
  }
  100% {
    background-position: 250% 0;
  }
}
.nav a.nav-profil {
  display: none;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .top-profile {
    display: none;
  }
  .nav a.nav-profil {
    display: inline-flex;
  }
  .top-settings {
    margin-left: 0.2rem;
  }
}

/* La carte du joueur */
.pf-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 1.6rem;
  border-radius: 20px;
  background: var(--panel);
}
.pf-card.is-gold {
  background: linear-gradient(135deg, color-mix(in srgb, #f2c14e 16%, var(--panel)), var(--panel) 60%);
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.55), 0 0 40px -16px rgba(242, 193, 78, 0.7);
}
.pf-card.is-gold .avatar-xl {
  box-shadow: 0 0 0 4px #f2c14e, 0 0 24px -2px rgba(242, 193, 78, 0.8);
}
.pf-avatar {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.pf-avatar .avatar-xl {
  display: grid;
  box-shadow: 0 0 0 4px var(--panel-2), 0 10px 24px -10px rgba(0, 0, 0, 0.7);
}
.pf-avatar-edit {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
.pf-avatar-edit .icon {
  width: 18px;
  height: 18px;
}
.pf-id h2 {
  margin: 0;
  font-size: var(--s3);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.pf-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  margin: 0.4rem 0 0.9rem;
  color: var(--muted);
  font-size: var(--s-1);
}
.pf-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #ffe3a0;
  font-weight: 700;
}
.pf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (max-width: 560px) {
  .pf-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .pf-meta,
  .pf-actions {
    justify-content: center;
  }
}
/* Inventaire : boxes et colis à ouvrir, cosmétiques possédés */
.pf-inv {
  margin-top: 2rem;
}
.pf-inv > h2,
.pf-h {
  margin: 0 0 0.9rem;
  font-size: var(--s1);
}
.pf-h {
  margin-top: 2.2rem;
}
.pf-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem;
}
.pf-box {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.15rem;
  padding: 1rem 0.8rem 0.9rem;
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}
@media (hover: hover) {
  .pf-box:hover {
    background: var(--panel-2);
  }
}
.pf-box.empty {
  opacity: 0.55;
}
/* Même box que dans la boutique, en plus petit (ses étiquettes suivent sa taille) */
.pf-box-art {
  position: relative;
  display: block;
  width: min(118px, 80%);
  aspect-ratio: 10 / 9;
  margin-bottom: 0.7rem;
  container-type: inline-size;
}
.pf-box-art .parcel-art {
  box-shadow:
    inset 0 0 0 0.6cqi rgba(90, 50, 14, 0.35),
    inset 0 -6cqi 8cqi -6cqi rgba(70, 38, 10, 0.35),
    0 10px 18px -8px rgba(0, 0, 0, 0.75);
}
.pf-box .pf-box-n {
  font-family: var(--display);
  font-size: var(--s2);
  line-height: 1;
}
.pf-box-name {
  font-weight: 700;
}
.pf-box-art .parcel-label small {
  display: none;
}
.pf-box .pf-box-note {
  color: var(--muted);
  font-size: var(--s-1);
}
.pf-skins {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: var(--panel);
}
.pf-skin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
}
.pf-skin-row .fs-label {
  min-width: 7rem;
}
.pf-skin-row .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.pf-skin-row .chip {
  background: var(--panel-2);
}
.pf-skin-row .chip.on {
  background: color-mix(in srgb, #8fd9b0 22%, var(--panel-2));
  box-shadow: inset 0 0 0 1px rgba(143, 217, 176, 0.5);
}
.pf-skin-row .chip .icon {
  width: 14px;
  height: 14px;
}
.pf-shop {
  justify-self: start;
}
.av-search {
  margin: 0.2rem 0 0.6rem;
}
.av-more {
  justify-self: center;
  margin-top: 0.6rem;
}
@media (prefers-reduced-motion: reduce) {
  .top-profile.is-gold::after,
  .nav a.nav-profil.is-gold::after {
    animation: none;
  }
}

/* ───────────── Communauté ───────────── */
.avatar-md {
  width: 44px;
  font-size: 1.3rem;
}
.avatar-lg {
  width: 84px;
  font-size: 2.2rem;
}
.com-search {
  max-width: 560px;
  margin-bottom: 0.6rem;
}
.com-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.com-results:empty {
  display: none;
}
.com-results {
  margin-bottom: 1.6rem;
}
.com-user {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  background: var(--panel);
}
.com-user.is-gold .avatar-md {
  box-shadow: 0 0 0 3px #f2c14e;
}
.cu-main {
  display: grid;
  min-width: 0;
}
.cu-main b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cu-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #ffe3a0;
  font-size: var(--s-1);
}
.cu-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}
.cu-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-weight: 700;
  font-size: var(--s-1);
}
.cu-tag .icon {
  width: 14px;
  height: 14px;
}
.com-section {
  margin-top: 1.8rem;
}
.com-section h2 {
  margin: 0 0 0.8rem;
  font-size: var(--s1);
}
.com-section h2 span {
  margin-left: 0.4rem;
  font-family: var(--body);
  font-size: var(--s-1);
  font-weight: 400;
  color: var(--muted);
}
.com-none {
  padding: 0.6rem 0.2rem;
}
@media (max-width: 640px) {
  .com-user {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .cu-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
/* Une visite : l'image et le pseudo du propriétaire */
.visit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.2rem;
  margin: 0.4rem 0 1.6rem;
}
.visit-head.is-gold .avatar-lg {
  box-shadow: 0 0 0 4px #f2c14e, 0 0 22px -4px rgba(242, 193, 78, 0.8);
}
.vh-id h1 {
  margin: 0;
  line-height: 1;
}
.vh-id .room-kind {
  margin: 0 0 0.3rem;
}
.vh-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}
.visit-trail {
  margin-bottom: 1.2rem;
}
.visit .piece {
  cursor: zoom-in;
}
.visit .series-tile {
  cursor: default;
}
/* Petites fenêtres de choix en liste (camion, ami) */
.ld-dialog {
  width: min(460px, 100%);
}
.ld-list {
  display: grid;
  gap: 0.45rem;
  margin: 0.4rem 0 0.2rem;
  max-height: min(calc(55 * var(--vh)), 420px);
  overflow-y: auto;
}
.ld-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  border: 0;
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.ld-item:hover:not([disabled]),
.ld-item:focus-visible {
  background: color-mix(in srgb, var(--pink) 18%, var(--panel-2));
}
.ld-item.is-off {
  opacity: 0.5;
  cursor: not-allowed;
}
.ld-main {
  display: grid;
}
.ld-main small {
  color: var(--muted);
  font-size: var(--s-1);
}
.ld-truck {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--tc);
  color: #fff;
}
.ld-truck .icon {
  width: 22px;
  height: 22px;
}

/* ───────────── Parking : les camions ───────────── */
.park-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: var(--panel);
  color: var(--muted);
}
.park-note .icon {
  width: 20px;
  height: 20px;
  flex: none;
}
.trucks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
}
.truck-card {
  display: grid;
  gap: 0.9rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: inset 0 3px 0 var(--tc);
  overflow: hidden;
}
.truck-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.truck-art {
  flex: none;
  width: 118px;
}
.truck-svg {
  display: block;
  width: 100%;
  height: auto;
}
.truck-head h2 {
  margin: 0;
  font-size: var(--s1);
}
.truck-status {
  color: var(--muted);
  font-size: var(--s-1);
}
.truck-card.is-away .truck-art {
  opacity: 0.35;
  filter: grayscale(0.6);
}
/* Il part livrer : le camion file vers la droite */
.truck-card.driving .truck-art {
  animation: truck-go 1s ease-in forwards;
}
@keyframes truck-go {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-6px) rotate(-1deg);
  }
  100% {
    transform: translateX(260%);
    opacity: 0;
  }
}
.truck-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
}
.ts-slot {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--panel-2);
  overflow: hidden;
  cursor: pointer;
}
.ts-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ts-slot.is-blurred img {
  filter: blur(8px);
}
.ts-slot.is-empty {
  display: grid;
  place-items: center;
  border: 2px dashed rgba(var(--light), 0.22);
  background: none;
  color: var(--muted);
}
.ts-slot.is-empty:not([disabled]):hover {
  border-color: var(--tc);
  color: var(--ink);
}
.ts-slot.is-empty[disabled] {
  cursor: default;
  opacity: 0.4;
}
.ts-slot .icon {
  width: 20px;
  height: 20px;
}
.ts-off {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s;
}
.ts-slot:hover .ts-off,
.ts-slot:focus-visible .ts-off {
  opacity: 1;
}
.ts-slot.is-bad {
  box-shadow: 0 0 0 3px #ff6b6b;
}
.truck-cargo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.tc-field {
  display: grid;
  gap: 0.25rem;
}
.tc-field > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-weight: 700;
  font-size: var(--s-1);
}
.tc-field .icon {
  width: 16px;
  height: 16px;
}
.tc-field .input {
  min-height: 38px;
  padding: 0.35em 0.7em;
}
.truck-actions {
  display: flex;
  justify-content: flex-end;
}
.park-sent {
  margin-top: 2rem;
}
.park-sent h2 {
  margin: 0 0 0.8rem;
  font-size: var(--s1);
}
.park-sent ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.park-sent li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  background: var(--panel);
  font-size: var(--s-1);
}
.ps-truck {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--tc);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
}
.ps-main .icon {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  color: #ff8fc4;
}
.ps-when {
  color: var(--muted);
}
@media (max-width: 560px) {
  .park-sent li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ps-when {
    grid-column: 2;
  }
}

/* ───────────── Colis cadeau ───────────── */
.parcel-art.kind-gift {
  --box-top: #ffb3cf;
  --box-front: #e0568c;
  --tape: linear-gradient(180deg, rgba(255, 232, 150, 0.95), rgba(242, 193, 78, 0.95));
}
.parcel-art.kind-gift .parcel-fragile {
  background: #c23a72;
}
/* L'étiquette : l'image de profil de l'expéditeur, « Colis de », son nom */
.parcel-label.gift-label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 2.4cqi;
}
.parcel-label.gift-label .avatar-gift {
  grid-row: 1 / span 2;
  width: 11cqi;
  font-size: 5.5cqi;
}
.parcel-label.gift-label b {
  font-size: 4.6cqi;
}
.parcel-label.gift-label small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 4.4cqi;
  color: #2a2240;
}
.parcel-label.gift-label i {
  grid-column: 1 / -1;
}
.home-gifts {
  margin-top: 1.4rem;
}
.home-gifts h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-size: var(--s1);
}
.home-gifts h2 .icon {
  width: 22px;
  height: 22px;
  color: #ff8fc4;
}
.hg-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.hg-box {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.6rem 0.5rem;
  border: 0;
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s;
}
.hg-box:hover {
  transform: translateY(-3px) rotate(-1deg);
}
.hg-art {
  position: relative;
  display: block;
  width: 150px;
  aspect-ratio: 10 / 9;
  container-type: inline-size;
}
.hg-what {
  color: var(--muted);
  font-size: var(--s-1);
  font-weight: 700;
}
.gift-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: center;
  margin: -0.4rem 0 0;
  padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, #ff8fc4 18%, var(--panel));
  color: var(--ink);
  font-size: var(--s-1);
}

/* ═════════════ 0.20 : barre du haut, profil, amis, réglages, boutique ═════════════ */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--s-1);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) {
  .link-btn:hover {
    color: var(--ink);
  }
}
.link-btn.danger {
  color: #ff8a8a;
  text-decoration-color: rgba(255, 138, 138, 0.45);
}
/* Barre du haut : Amis, puis le profil (bouton transparent, doré pour les abonné·e·s), puis l'engrenage */
.top-friends {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  padding: 0 0.85rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}
.top-friends svg {
  width: 21px;
  height: 21px;
}
@media (hover: hover) {
  .top-friends:hover {
    color: var(--ink);
    background: var(--panel);
  }
}
.top-friends[aria-current='page'] {
  color: var(--paper-ink);
  background: var(--paper);
}
.top-friends .pip {
  min-width: 1.4em;
  padding: 0 0.35em;
  border-radius: 999px;
  font-size: var(--s-1);
  text-align: center;
}
.top-profile {
  margin-left: 0;
  gap: 0.6rem;
  padding: 0.25rem 1rem 0.25rem 0.25rem;
  font-size: 1.02rem;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--line) 85%, transparent);
  backdrop-filter: blur(6px);
}
.top-profile .avatar-md {
  width: 38px;
  font-size: 1.1rem;
}
.top-profile.is-gold {
  box-shadow: inset 0 0 0 1.5px rgba(255, 244, 205, 0.8), 0 0 18px -4px rgba(242, 193, 78, 0.65);
}
.top-settings {
  margin-left: 0.15rem;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .top-friends {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .top-friends .tf-label {
    display: none;
  }
  .top-friends .pip {
    position: absolute;
    top: -2px;
    right: -4px;
  }
}

/* Le profil */
.pf-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-top: 0.4rem;
}
.pf-id h1 {
  margin: 0;
  font-size: var(--s3);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.pf-meta {
  margin: 0.35rem 0 0.3rem;
}
.pf-img-links {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.8rem;
  color: var(--muted);
}
.pf-visit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pf-visit .btn {
  min-height: 34px;
}
.pf-worth {
  display: grid;
  justify-items: end;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(242, 193, 78, 0.16), rgba(242, 193, 78, 0.03));
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.3);
  text-align: right;
}
.pf-worth > span {
  color: var(--muted);
  font-size: var(--s-1);
}
.pf-worth b {
  font-family: var(--display);
  font-size: var(--s3);
  line-height: 1.05;
  color: #ffe3a0;
}
.pf-worth b .coins-amount svg {
  width: 0.75em;
  height: 0.75em;
}
.pf-worth small {
  color: var(--muted);
  font-size: var(--s-1);
}
@media (max-width: 860px) {
  .pf-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pf-worth {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 0.2rem 0.8rem;
  }
  .pf-worth > span {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .pf-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .pf-img-links,
  .pf-visit {
    justify-content: center;
  }
  .pf-worth {
    justify-items: center;
    justify-content: center;
    text-align: center;
  }
}
/* Inventaire : une rangée de box compacte */
.pf-inv {
  margin-top: 1rem;
}
.pf-boxes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
.pf-box {
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  text-align: left;
}
.pf-box-art {
  width: 58px;
  margin: 0;
}
.pf-box-txt {
  display: grid;
  min-width: 0;
}
.pf-box .pf-box-n {
  font-size: var(--s1);
}
.pf-box .pf-box-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .pf-boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pf-h {
  margin-top: 1.6rem;
}
.stat-tiles {
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
.stat-tile {
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
}
.stat-tile b {
  font-size: var(--s2);
}
.stats-duo {
  margin-bottom: 1.4rem;
}
/* Par cadre : six petits cadres, chacun avec le nombre d'œuvres */
.pf-frames {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-frame {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
}
.pff-art {
  display: block;
  width: 100%;
  max-width: 120px;
  padding: 7px;
  border-radius: 6px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.45), transparent 40%, rgba(0, 0, 0, 0.35)),
    var(--rc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 8px 16px -8px rgba(0, 0, 0, 0.7);
}
.pf-frame.r-5 .pff-art {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), transparent 45%, rgba(0, 0, 0, 0.3)),
    conic-gradient(from 30deg, #ff7ad9, #8fd3ff, #b8ffb0, #ffe27a, #ff7ad9);
}
.pf-frame.r-0 .pff-art {
  background: linear-gradient(145deg, #4a4458, #1c1826 60%, #3a3448);
}
.pff-canvas {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  background: radial-gradient(circle at 50% 35%, #3c2f58, #1d1630);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45), inset 0 6px 14px rgba(0, 0, 0, 0.5);
}
.pff-canvas b {
  font-family: var(--display);
  font-size: var(--s3);
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.pff-name {
  font-size: var(--s-1);
  font-weight: 700;
  color: var(--ink);
}
.pf-frame.none {
  opacity: 0.45;
}
.pf-frames-note {
  margin: 0.8rem 0 0;
  text-align: center;
}
@media (max-width: 560px) {
  .pf-frames {
    gap: 0.6rem 0.5rem;
  }
  .pff-art {
    padding: 5px;
  }
  .pff-canvas b {
    font-size: var(--s2);
  }
}
/* Succès : des tuiles compactes, 3 par ligne ; les terminés repliés */
.ach-cols {
  display: grid;
  gap: 1.6rem;
}
.ach + .ach {
  margin-top: 0;
}
.ach .ach-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 0.5rem;
}
.ach .ach-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.25rem 0.65rem;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
}
.ach .medal {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
}
.ach .medal svg {
  width: 16px;
  height: 16px;
}
.ach .ach-title b {
  font-size: 0.92rem;
  line-height: 1.2;
}
.ach .ach-desc {
  font-size: 0.78rem;
  line-height: 1.3;
}
.ach .ach-progress {
  margin-top: 0.3rem;
  gap: 0.45rem;
  font-size: 0.75rem;
}
.ach .ach-reward {
  grid-column: 2;
  display: flex;
  justify-content: flex-start;
}
.ach .ach-reward .btn {
  min-height: 32px;
  padding: 0.3em 0.8em;
  font-size: 0.82rem;
}
.ach-prize,
.btn .gain {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.rw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.rw-box .icon {
  width: 15px;
  height: 15px;
}
.btn-primary .rw-chip {
  color: inherit;
}
.ach-done .icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}
.ach-fold {
  margin-top: 0.6rem;
}
.ach-fold > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: var(--s-1);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.ach-fold > summary::-webkit-details-marker {
  display: none;
}
.ach-fold > summary .icon {
  width: 15px;
  height: 15px;
  color: #8fd9b0;
}
.ach-fold[open] > summary {
  margin-bottom: 0.6rem;
  color: var(--ink);
}
.ach .ach-row.is-done {
  opacity: 0.7;
}
@media (max-width: 520px) {
  .ach .ach-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Bas du profil : aide, déconnexion, suppression du compte */
.pf-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.pf-foot-gap {
  flex: 1;
}
.pf-delete {
  margin-left: 0.4rem;
}
@media (max-width: 560px) {
  .pf-foot {
    justify-content: center;
  }
  .pf-foot-gap {
    flex-basis: 100%;
    height: 0;
  }
}
/* Amis : en grand, l'image puis le pseudo, puis vitrine, musée et profil */
.friend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.friend-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.45rem;
  padding: 1.3rem 0.9rem 1rem;
  border-radius: 18px;
  background: var(--panel);
  text-align: center;
}
.friend-card.is-gold {
  background: linear-gradient(170deg, color-mix(in srgb, #f2c14e 14%, var(--panel)), var(--panel) 65%);
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.45);
}
.fc-face {
  border-radius: 50%;
}
.fc-face .avatar-xl {
  width: 112px;
  box-shadow: 0 0 0 4px var(--panel-2), 0 10px 22px -10px rgba(0, 0, 0, 0.7);
}
.friend-card.is-gold .fc-face .avatar-xl {
  box-shadow: 0 0 0 4px #f2c14e, 0 0 22px -4px rgba(242, 193, 78, 0.8);
}
.fc-name {
  max-width: 100%;
  margin-top: 0.3rem;
  overflow: hidden;
  font-size: var(--s1);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-links {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.fc-links .btn {
  min-height: 34px;
  padding: 0.35em 0.85em;
}
.fc-links .is-off {
  opacity: 0.4;
  cursor: default;
}
.fc-profile {
  min-height: 34px;
  width: 100%;
}
.fc-more {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.fc-more .icon {
  width: 18px;
  height: 18px;
}
@media (hover: hover) {
  .fc-more:hover {
    background: var(--panel-2);
    color: var(--ink);
  }
}
@media (max-width: 520px) {
  .friend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .fc-face .avatar-xl {
    width: 84px;
  }
  .fc-profile {
    font-size: 0.78rem;
  }
}
/* Réglages : des séparations entre les groupes, et l'aide en bas */
.settings-sep {
  width: 100%;
  height: 1px;
  margin: 0.4rem 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
}
.settings-help {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
/* Comment jouer */
.howto {
  display: grid;
  gap: 0.8rem;
  max-width: 820px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.howto-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: var(--panel);
}
.howto-ic {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--panel-2);
  color: var(--ink);
}
.howto-ic svg {
  width: 28px;
  height: 28px;
}
.howto-step h2 {
  margin: 0 0 0.25rem;
  font-size: var(--s1);
}
.howto-step p {
  margin: 0;
  color: var(--muted);
}
.rules-text {
  display: block;
}
.rules-text h2 {
  margin: 0 0 0.5rem;
  font-size: var(--s1);
}
.rules-text ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
}
.rules-text li + li {
  margin-top: 0.3rem;
}
.rules-text b {
  color: var(--ink);
}
/* Boutique : les box possédées à côté du solde */
.shop-head-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem 1.2rem;
}
.shop-inv {
  display: flex;
  gap: 0.55rem;
}
.si-box {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem 0.2rem 0.25rem;
  border-radius: 999px;
  background: var(--panel);
  font-weight: 700;
}
.si-box.empty {
  opacity: 0.5;
}
.sib-art {
  position: relative;
  display: block;
  width: 30px;
  aspect-ratio: 10 / 9;
  container-type: inline-size;
}
.sib-art .parcel-label,
.sib-art .parcel-fragile,
.sib-art .sticker {
  display: none;
}
.top-profile,
.top-friends,
.top-settings {
  flex: none;
}
.tp-name {
  flex: none;
}
@media (max-width: 1420px) and (min-width: 721px) and (min-height: 521px), (max-width: 1420px) and (min-width: 721px) and (pointer: fine) {
  .top-friends .tf-label {
    display: none;
  }
  .top-friends {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .top-friends .pip {
    position: absolute;
    top: -2px;
    right: -4px;
  }
}
.sib-art .stk {
  display: none;
}
.si-box { box-shadow: inset 0 0 0 1.5px var(--si, transparent); }
.si-parcel { --si: rgba(227, 180, 122, 0.55); }
.si-god { --si: rgba(247, 215, 116, 0.75); }
.si-spec { --si: rgba(143, 192, 255, 0.65); }
.si-artist { --si: rgba(231, 165, 255, 0.6); }
.settings-sep { height: 2px; opacity: 0.9; }

/* ═════════════ 0.20 : ouverture — titre, artistes, tags aimés, Vendre | cœur | Garder ═════════════ */
.opening[data-phase='reveal'] {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.op-title {
  width: min(720px, 100%);
  min-height: 1.3em;
  margin: 0;
  overflow: hidden;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.6vw, 1.55rem);
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.op-title:empty {
  min-height: 0;
}
.opening .show .cartel {
  display: none;
}
.opening .show .piece {
  width: min(calc(100cqw - 28px), 640px, calc((100cqh - 22px - 2 * (var(--fw) + var(--mw))) * var(--r) + 2 * (var(--fw) + var(--mw))));
}
.op-credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}
.op-artist {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 10px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.7);
}
.op-artist small {
  color: var(--paper-muted);
  font-size: 0.75rem;
}
.op-artist b {
  font-size: 0.98rem;
}
.op-artist .star-row {
  align-self: center;
}
.star-row.mini {
  display: inline-flex;
  gap: 1px;
}
.star-row.mini i {
  display: none;
}
.star-row.mini i.on {
  display: inline-grid;
  /* La case suit la taille de l'icône : les petites étoiles et flammes se touchent presque (0.38) */
  width: auto;
  height: auto;
}
.star-row.mini.is-flame {
  gap: 0;
}
.star-row.mini.is-flame i.on + i.on {
  margin-left: -2px;
}
.star-row.mini svg {
  width: 13px;
  height: 13px;
}
.op-artist .star-row.mini svg {
  color: #d69a12;
}
.liked-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}
.liked-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 95, 110, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 110, 120, 0.45);
  color: #ffc2c6;
  font-size: 0.82rem;
  font-weight: 700;
}
.liked-tag .star-row.mini svg {
  color: #ff7a59;
}
.liked-more {
  align-self: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.op-sell {
  background: #ffd75e;
  box-shadow: 0 2px 0 #b88a1c, 0 6px 14px -8px rgba(0, 0, 0, 0.6);
}
.op-sell:hover {
  background: #ffe385;
}
.op-sep {
  width: 1px;
  height: 26px;
  margin: 0 0.2rem;
  background: rgba(var(--light), 0.25);
}
.op-keep {
  background: #5fcf8e;
  color: #0f2b1c;
  box-shadow: 0 2px 0 #2f8f57, 0 6px 14px -8px rgba(0, 0, 0, 0.6);
}
.op-keep:hover {
  background: #79dca2;
}
.op-keep .icon {
  width: 16px;
  height: 16px;
}
/* Le bouton cœur : gris, rouge une fois mis */
.heart-btn {
  display: inline-grid;
  place-items: center;
  grid-auto-flow: column;
  gap: 0.35rem;
  min-width: 36px;
  min-height: 36px;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 10px;
  background: rgba(var(--light), 0.12);
  color: #b9b1c7;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.heart-btn .icon {
  width: 19px;
  height: 19px;
}
@media (hover: hover) {
  .heart-btn:hover {
    color: #ff8f9c;
    background: rgba(var(--light), 0.18);
  }
}
.heart-btn.on {
  background: #e8445a;
  color: #fff;
  box-shadow: 0 2px 0 #a82638, 0 6px 14px -8px rgba(232, 68, 90, 0.9);
}
.heart-btn.pop .icon {
  animation: heart-pop 0.45s cubic-bezier(0.3, 1.8, 0.5, 1);
}
@keyframes heart-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
/* Petit cœur sur les œuvres aimées, dans les galeries */
.heart-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e8445a;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.heart-badge svg {
  width: 13px;
  height: 13px;
}
.piece.has-heart .heart-badge {
  display: grid;
}
/* Pendant l'ouverture, les toasts passent en haut : ils ne cachent plus Vendre | cœur | Garder */
body:has(.opening[data-phase='reveal']) .toasts {
  top: 4.2rem;
  bottom: auto;
}

/* ═════════════ 0.20 : fiche — plaque plus discrète, cœur, actions sur une ligne ═════════════ */
.sheet .sheet-info .cartel-big {
  gap: 0.2rem;
  padding: 0.7rem 0.95rem 0.75rem;
  border-radius: 10px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--rc) 32%, transparent), color-mix(in srgb, var(--rc) 9%, transparent) 55%, transparent 92%);
  color: var(--ink);
  text-shadow: none;
  box-shadow: inset 3px 0 0 var(--rc);
}
.sheet .sheet-info .cartel-big.r-0 {
  background: linear-gradient(100deg, rgba(157, 152, 171, 0.26), rgba(157, 152, 171, 0.06) 55%, transparent 92%);
}
.sheet .sheet-info .cartel-big.r-5 {
  background: linear-gradient(100deg, rgba(255, 122, 217, 0.28), rgba(143, 211, 255, 0.12) 50%, transparent 92%);
  box-shadow: inset 3px 0 0 #ff7ad9;
}
.sheet .sheet-info .cartel-big h2 {
  font-size: var(--s2);
}
.sheet .sheet-info .cartel-big .by {
  font-size: var(--s0);
  color: var(--muted);
}
.sheet .sheet-info .cartel-big .by b {
  color: var(--ink);
}
.sheet .sheet-info .cartel-big .by.solo {
  font-size: var(--s1);
}
.sheet .sheet-info .cartel-big .meta {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.sheet .sheet-info .cartel-big .frame-name {
  color: var(--rc);
  font-size: 0.78rem;
}
.sheet .sheet-info .cartel-big.r-0 .frame-name {
  color: var(--muted);
}
.sell-row {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
}
.sr-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
}
.sr-line .btn {
  min-height: 36px;
  padding: 0.35em 0.85em;
  white-space: nowrap;
}
.sr-sep {
  flex: none;
  width: 1px;
  height: 24px;
  background: var(--line);
}
.sheet-heart {
  flex: none;
  min-height: 36px;
  border-radius: 999px;
}
.liked-block h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #ff9aa5;
}
.liked-block h3 .icon {
  width: 15px;
  height: 15px;
  color: #ff7a59;
}
.chip.liked-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(232, 68, 90, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 110, 120, 0.55);
  color: #ffd0d4;
}
.liked-chip .star-row.mini svg {
  color: #ff7a59;
  width: 12px;
  height: 12px;
}
/* Œuvre d'un autre : fond gris hachuré et un mot pour le dire */
.sheet.is-foreign,
.sheet.is-foreign .sheet-art {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 9px, transparent 9px 18px),
    #34323a;
}
.sheet.is-foreign .sheet-info {
  background: rgba(20, 18, 24, 0.35);
}
.foreign-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: var(--muted);
  font-size: var(--s-1);
  order: -3;
}
.foreign-note .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--ink);
}
.foreign-note b {
  color: var(--ink);
}
@media (max-width: 420px) {
  .sr-line .btn {
    padding: 0.35em 0.65em;
    font-size: 0.82rem;
  }
}
/* Série chez un ami */
.visit-series {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.2rem 1.4rem;
  border-radius: 18px;
  background: var(--panel);
}
.visit-series.is-foreign {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 9px, transparent 9px 18px),
    #34323a;
}
.vs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8rem 1.2rem;
}
.vs-title h2 {
  margin: 0.1rem 0 0.2rem;
  font-size: var(--s3);
  line-height: 1.1;
}
.vs-title .fine {
  margin: 0;
}
.vs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.reader.is-foreign {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 9px, transparent 9px 18px);
  border-radius: 18px;
}

/* ═════════════ 0.20 : barre d'outils des galeries, barre de sélection ═════════════ */
.gal-tools {
  margin: -0.3rem 0 1.1rem;
}
.gt-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}
.gt-row .cat-search {
  flex: 1 1 240px;
  max-width: 400px;
}
.gt-gap {
  flex: 1 1 0;
}
.gt-more {
  min-height: 44px;
  gap: 0.45rem;
  padding-inline: 0.95rem;
}
.gt-more .icon {
  width: 18px;
  height: 18px;
}
.gt-more[aria-pressed='true'] {
  background: var(--ink);
  color: rgb(var(--deep));
  box-shadow: none;
}
.gt-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 0.75rem;
}
.gt-select,
.gt-reader,
.gt-switch {
  min-height: 44px;
  gap: 0.45rem;
}
.gt-select .icon,
.gt-reader .icon,
.gt-switch .icon {
  width: 18px;
  height: 18px;
}
.gt-select[aria-pressed='true'] {
  background: var(--ink);
  color: rgb(var(--deep));
  box-shadow: none;
}
.gt-filters {
  margin: 0.6rem 0 0;
}
.gt-filters[hidden] {
  display: none;
}
.seg-protect .p-heart .icon {
  color: #ff5f73;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .gt-row .cat-search {
    flex-basis: 100%;
    max-width: none;
  }
  .gt-more .gt-more-label,
  .gt-label {
    display: none;
  }
  .gt-more,
  .gt-select,
  .gt-reader,
  .gt-switch {
    min-width: 44px;
    padding: 0 0.7rem;
    justify-content: center;
  }
  .gt-row .cat-sort {
    flex: 1 1 auto;
  }
  .gt-row .cat-sort .input {
    flex: 1;
    min-width: 0;
  }
}
/* Barre de sélection : tout / annuler | cœur | musée, vitrine, camion | vendre */
.sb-sep {
  width: 1px;
  height: 26px;
  margin: 0 0.15rem;
  background: rgba(var(--light), 0.22);
}
.select-bar .sb-actions {
  align-items: center;
}
.select-bar .btn .icon {
  width: 17px;
  height: 17px;
}
.sb-heart {
  min-width: 40px;
  padding-inline: 0.65rem;
  color: #b9b1c7;
}
.sb-heart.on {
  background: #e8445a;
  color: #fff;
  box-shadow: none;
}
.select-bar .btn.is-off {
  opacity: 0.35;
  filter: grayscale(1);
  cursor: not-allowed;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .select-bar .sb-l {
    display: none;
  }
}
.select-bar {
  width: min(1080px, calc(100% - 24px));
}
.select-bar .sb-actions {
  flex-wrap: nowrap;
}
@media (max-width: 1100px) {
  .select-bar .sb-actions {
    flex-wrap: wrap;
  }
}
/* Le petit cœur des galeries, en bas à gauche du cadre (la coche de sélection est en haut à droite) */
.heart-badge {
  top: auto;
  right: auto;
  bottom: 6px;
  left: 6px;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .gt-gap {
    display: none;
  }
  .gt-row {
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .gt-row .cat-sort {
    flex: 1 1 0;
    min-width: 0;
  }
  .gt-row > .btn {
    flex: none;
  }
}
/* En-tête de salle : le titre, puis les étoiles et la progression sur la même ligne */
.room-head-v2 {
  display: block;
}
.rh-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
}
.room-head .rh-title {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
  font-size: clamp(var(--s3), calc(5 * var(--vw)), var(--s5));
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.room-head .rh-title.long {
  font-size: clamp(var(--s2), calc(3.4 * var(--vw)), var(--s4));
  line-height: 1.08;
}
.room-head .rh-title.xlong {
  font-size: clamp(var(--s1), calc(2.4 * var(--vw)), var(--s3));
  line-height: 1.12;
}
.room-head-v2 .room-side {
  flex: none;
  align-items: center;
}
.room-head-v2 .room-actions {
  margin-top: 0.8rem;
}
.room-head-v2 + .sync-note,
.room-head-v2 {
  margin-bottom: 0.9rem;
}
@media (max-width: 680px) {
  .room-head-v2 .room-side {
    flex: 1 1 100%;
  }
}
/* Séries d'un artiste : toujours en petites couvertures, comme dans Mon musée */
.as-books {
  margin-top: 0.6rem;
}

/* ═════════════ 0.20 : onglets illustrés (Musée, Échange) ═════════════ */
.art-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.2rem 0 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.art-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.45rem 1.05rem 0.45rem 0.55rem;
  border-radius: 16px;
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.08);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.at-art {
  display: grid;
  place-items: center;
  width: 58px;
  height: 44px;
  border-radius: 11px;
  background: radial-gradient(circle at 50% 40%, rgba(var(--light), 0.14), transparent 70%), rgba(var(--deep), 0.45);
}
.at-art svg {
  width: 52px;
  height: 39px;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.at-label {
  display: grid;
  line-height: 1.15;
}
.at-label small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}
@media (hover: hover) {
  .art-tab:hover {
    color: var(--ink);
    background: var(--panel-2);
  }
  .art-tab:hover .at-art svg {
    transform: translateY(-2px) rotate(-3deg) scale(1.06);
  }
}
.art-tab[aria-selected='true'] {
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.8);
}
.art-tab[aria-selected='true'] .at-label small {
  color: var(--paper-muted);
}
.art-tab[aria-selected='true'] .at-art {
  background: radial-gradient(circle at 50% 40%, #fff, #e6dcc8);
}
.art-tab.at-vitrine[aria-selected='true'] {
  background: linear-gradient(135deg, #fff4cd, #f2c14e 60%, #d9a83a);
  color: #3a2604;
}
.art-tab.at-vitrine[aria-selected='true'] .at-art {
  background: radial-gradient(circle at 50% 40%, #fffaf0, #f7dc84);
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .art-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }
  .art-tab {
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.45rem 0.3rem 0.5rem;
    text-align: center;
    font-size: 0.8rem;
  }
  .at-art {
    width: 52px;
    height: 38px;
  }
  .at-art svg {
    width: 46px;
    height: 34px;
  }
}

/* ═════════════ 0.20 : Ma vitrine, un salon d'exception ═════════════ */
#vitrine,
.visit:has(> .podium) {
  position: relative;
  padding: 3.2rem clamp(0.8rem, 3vw, 2rem) 2rem;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 34% 60% at 50% -4%, rgba(255, 236, 190, 0.32), transparent 72%),
    radial-gradient(ellipse 22% 50% at 18% -6%, rgba(255, 236, 190, 0.16), transparent 70%),
    radial-gradient(ellipse 22% 50% at 82% -6%, rgba(255, 236, 190, 0.16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 3px, rgba(255, 255, 255, 0.025) 3px 6px, transparent 6px 34px),
    linear-gradient(180deg, #5c1733, #3c1024 52%, #220818);
  box-shadow:
    inset 0 0 0 2px rgba(242, 193, 78, 0.7),
    inset 0 0 0 7px #2a0a1c,
    inset 0 0 0 8.5px rgba(242, 193, 78, 0.4),
    inset 0 -40px 60px -30px rgba(0, 0, 0, 0.7),
    0 30px 60px -30px rgba(0, 0, 0, 0.85);
  isolation: isolate;
}
/* La couronne au fronton */
#vitrine::before,
.visit:has(> .podium)::before {
  content: '';
  position: absolute;
  top: -22px;
  left: 50%;
  width: 92px;
  height: 46px;
  translate: -50% 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 46'%3E%3Cpath d='M18 14l12 10 16-20 16 20 12-10-6 26H24z' fill='%23f2c14e' stroke='%238a5e10' stroke-width='2.5' stroke-linejoin='round'/%3E%3Ccircle cx='46' cy='5' r='4' fill='%23ff5fa2' stroke='%238a5e10' stroke-width='1.5'/%3E%3Ccircle cx='17' cy='13' r='3.4' fill='%237fb2ff' stroke='%238a5e10' stroke-width='1.5'/%3E%3Ccircle cx='75' cy='13' r='3.4' fill='%237fb2ff' stroke='%238a5e10' stroke-width='1.5'/%3E%3Cpath d='M26 33h40' stroke='%23fff4cd' stroke-width='2' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
  z-index: 2;
}
/* Une frise dorée en haut, comme un lambrequin */
#vitrine::after,
.visit:has(> .podium)::after {
  content: '';
  position: absolute;
  inset: 9px 9px auto;
  height: 22px;
  border-radius: 16px 16px 0 0;
  background:
    radial-gradient(circle at 12px -2px, transparent 11px, rgba(242, 193, 78, 0.55) 11.5px 13px, transparent 13.5px) 0 0 / 24px 22px repeat-x;
  opacity: 0.8;
  pointer-events: none;
  z-index: -1;
}
#vitrine .podium,
.visit .podium {
  position: relative;
  margin-top: 0.2rem;
}
/* Projecteurs sur chaque marche */
#vitrine .pod,
.visit .pod {
  position: relative;
}
#vitrine .pod::before,
.visit .pod::before {
  content: '';
  position: absolute;
  inset: -3.2rem 8% 30px;
  background: linear-gradient(180deg, rgba(255, 240, 200, 0.2), rgba(255, 240, 200, 0.05) 70%, transparent);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: -1;
}
/* Les marches en marbre, liserés dorés */
#vitrine .pod-step,
.visit .pod-step {
  position: relative;
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.16) 45%, transparent 60%),
    radial-gradient(ellipse at 30% 40%, rgba(180, 170, 190, 0.35), transparent 60%),
    linear-gradient(180deg, #f3eef4, #cfc6d6 60%, #b8adc2);
  box-shadow:
    inset 0 3px 0 rgba(242, 193, 78, 0.95),
    inset 0 5px 0 rgba(120, 80, 10, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 18px 26px -14px rgba(0, 0, 0, 0.9);
}
#vitrine .pod-1 .pod-step,
.visit .pod-1 .pod-step {
  box-shadow:
    inset 0 3px 0 #f2c14e,
    inset 0 5px 0 rgba(120, 80, 10, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 0 40px -6px rgba(242, 193, 78, 0.55),
    0 18px 26px -14px rgba(0, 0, 0, 0.9);
}
#vitrine .pod-step b,
.visit .pod-step b {
  font-size: 2.3rem;
  filter: drop-shadow(0 2px 0 rgba(60, 30, 0, 0.45));
  background-image: linear-gradient(180deg, #fff3c4, #d99a24 60%, #a86c0c);
}
#vitrine .pod-2 .pod-step b,
.visit .pod-2 .pod-step b {
  background-image: linear-gradient(180deg, #ffffff, #8d97a5 70%, #6b7480);
}
#vitrine .pod-3 .pod-step b,
.visit .pod-3 .pod-step b {
  background-image: linear-gradient(180deg, #ffd9b8, #a85c26 70%, #7a3f15);
}
/* Le n°1 brille */
#vitrine .pod-1 .piece,
.visit .pod-1 .piece {
  filter: drop-shadow(0 0 22px rgba(242, 193, 78, 0.35));
}
#vitrine .vit-empty,
.visit .vit-empty {
  border-color: rgba(242, 193, 78, 0.35);
  background: rgba(242, 193, 78, 0.04);
}
/* La galerie, sous un filet doré */
#vitrine .vit-gallery,
.visit .vit-gallery {
  position: relative;
  margin-top: 0.6rem;
  padding-top: 2.4rem;
  border-top: 1px solid rgba(242, 193, 78, 0.45);
}
#vitrine .vit-gallery::before,
.visit .vit-gallery::before {
  content: 'Galerie';
  position: absolute;
  top: -0.75rem;
  left: 50%;
  translate: -50% 0;
  padding: 0.1rem 1rem;
  border-radius: 999px;
  background: #3c1024;
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.6);
  color: #f7d774;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#vitrine .vit-gallery.is-empty::before {
  display: none;
}
#vitrine .vit-book-name,
#vitrine .vit-book-count,
.visit .vit-book-name,
.visit .vit-book-count {
  color: #f7e7c4;
}
#vitrine .pod-step::before,
.visit .pod-step::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: min(62px, calc(100% - 12px));
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5c1a38, #24091a);
  box-shadow: inset 0 0 0 2px rgba(242, 193, 78, 0.75), 0 3px 8px rgba(0, 0, 0, 0.35);
}
#vitrine .pod-step b,
.visit .pod-step b {
  position: relative;
  font-size: min(2.1rem, 28px + 0.5vw);
}
#vitrine .pod-3 .pod-step b,
.visit .pod-3 .pod-step b {
  font-size: 1.6rem;
}
/* Grandes ou petites couvertures de séries */
:root[data-series-musee='big'] #orga .orga-series {
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
}
:root[data-series-musee='big'] #orga .series-book {
  width: min(100%, 220px);
}
:root[data-series-musee='big'] #orga .series-tile .door-name {
  font-size: var(--s1);
}
:root[data-series-cat='small'] .cat-list:has(.has-cover) {
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 0.5rem;
}
:root[data-series-cat='small'] .cat-list .has-cover a {
  gap: 0.3rem;
  padding: 0.55rem 0.6rem;
  font-size: 0.85rem;
}
:root[data-series-cat='small'] .cat-list .has-cover .star-row svg {
  width: 13px;
  height: 13px;
}
.orga-tools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.cat-tools .gt-gap {
  flex: 1 1 0;
}

/* ═════════════ 0.20 : mode lecture — titre, marque-page, bande à la hauteur de la fenêtre ═════════════ */
.reader-title h1 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.reader-title h1.long {
  font-size: clamp(var(--s1), calc(2.8 * var(--vw)), var(--s3));
}
.reader-title h1.xlong {
  font-size: clamp(var(--s0), calc(2 * var(--vw)), var(--s2));
}
.reader-resume .icon {
  width: 16px;
  height: 16px;
}
.reader-float {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.reader > .reader-float {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  margin-top: 14px;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .reader > .reader-float {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}
.reader-bm {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--deep), 0.85);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -8px rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
.reader-bm .icon {
  width: 17px;
  height: 17px;
}
.reader-bm.on {
  color: #ff8fc4;
}
.reader-bm.here {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(255, 95, 162, 0.8);
}
@media (hover: hover) {
  .reader-bm:hover {
    color: var(--ink);
  }
}
/* Bande horizontale : hauteur donnée par le script (presque jusqu'en bas), sans trop agrandir */
.strip-item img {
  width: min(calc((max(300px, var(--sh)) - 1.7rem - 14px) * var(--r)), calc(var(--maxh, 9999px) * var(--r)), calc(calc(100 * var(--vw)) - 3rem));
}
.reader-strip .book-foot {
  margin-top: 0.4rem;
}
.reader-strip .reader-head {
  margin-bottom: 0.8rem;
}
/* Exposer dans la vitrine : un petit podium à toucher, puis la galerie */
.spd {
  width: min(520px, 100%);
}
.spd-lede {
  margin: -0.3rem 0 1rem;
}
.spd-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.spd-step {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper-ink);
  font: inherit;
  cursor: pointer;
}
.spd-thumb {
  display: grid;
  place-items: center;
  width: 74px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: #e7dfcf;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6);
  transition: transform 0.18s ease;
}
.spd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spd-thumb img.is-blur {
  filter: blur(8px);
}
.spd-thumb.free {
  border: 2px dashed #b8a98c;
  background: transparent;
  color: #8a7a5c;
}
.spd-thumb .icon {
  width: 22px;
  height: 22px;
}
.spd-block {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #f3eef4, #cfc6d6);
  box-shadow: inset 0 3px 0 #f2c14e, 0 8px 14px -10px rgba(0, 0, 0, 0.6);
}
.s-1 .spd-block { height: 58px; }
.s-2 .spd-block { height: 42px; }
.s-3 .spd-block { height: 30px; }
.spd-block b {
  font-family: var(--display);
  font-size: 1.4rem;
  color: #8a5e10;
}
.spd-step small {
  max-width: 100%;
  overflow: hidden;
  color: var(--paper-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .spd-step:hover .spd-thumb {
    transform: translateY(-4px);
  }
  .spd-step:hover .spd-block {
    box-shadow: inset 0 3px 0 #f2c14e, 0 0 0 2px var(--pink), 0 8px 14px -10px rgba(0, 0, 0, 0.6);
  }
}
.spd-step:focus-visible .spd-block {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}
.spd-gallery {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 12px;
  background: rgba(42, 34, 64, 0.08);
  box-shadow: inset 0 0 0 1px rgba(42, 34, 64, 0.18);
  color: var(--paper-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.spd-gallery .icon {
  width: 24px;
  height: 24px;
}
.spd-gallery span {
  display: grid;
}
.spd-gallery small {
  color: var(--paper-muted);
}
.spd-gallery:hover:not([disabled]) {
  background: rgba(255, 95, 162, 0.12);
  box-shadow: inset 0 0 0 2px var(--pink);
}
.spd-gallery[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.spd-step { color: var(--ink); }
.spd-step small, .spd-gallery small { color: var(--muted); }
.spd-thumb { background: var(--panel-2); }
.spd-thumb.free { border-color: rgba(var(--light), 0.3); color: var(--muted); background: transparent; }
.spd-gallery { background: rgba(var(--light), 0.06); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.spd-podium { margin-bottom: 0; }
/* Ranger une série : en album ou planche par planche */
.shd {
  width: min(560px, 100%);
}
.shd-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.shd-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.45rem;
  padding: 1.1rem 0.9rem 1rem;
  border: 0;
  border-radius: 14px;
  background: rgba(var(--light), 0.06);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.shd-card b {
  font-size: var(--s1);
}
.shd-card small {
  color: var(--muted);
  line-height: 1.35;
}
@media (hover: hover) {
  .shd-card:hover {
    background: rgba(255, 95, 162, 0.1);
    box-shadow: inset 0 0 0 2px var(--pink);
    transform: translateY(-2px);
  }
}
.shd-card:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}
.shd-art {
  display: grid;
  place-items: center;
  height: 96px;
}
.shd-art .series-book {
  width: 66px;
  margin: 0;
}
.shd-pages {
  position: relative;
  width: 110px;
}
.shd-pages i {
  position: absolute;
  width: 40px;
  height: 54px;
  border-radius: 3px;
  background: #ece6d8;
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.7);
}
.shd-pages i:nth-child(1) { left: 2px; top: 26px; rotate: -8deg; }
.shd-pages i:nth-child(2) { left: 35px; top: 18px; }
.shd-pages i:nth-child(3) { left: 68px; top: 26px; rotate: 8deg; }
.shd-tag {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}
@media (max-width: 460px) {
  .shd-choices {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ═════════════ 0.20 : colis d'un ami — sceau, ruban, lettre, cadeaux ═════════════ */
.gift-seal {
  position: absolute;
  top: 6cqi;
  left: 50%;
  z-index: 3;
  translate: -50% 0;
  width: 40cqi;
  aspect-ratio: 1;
  padding: 1.6cqi;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7d6, #f2c14e 55%, #b07a14);
  box-shadow: 0 2cqi 4cqi rgba(80, 20, 40, 0.55), inset 0 0 0 0.8cqi rgba(255, 255, 255, 0.45);
}
.gift-seal .avatar-seal {
  display: grid;
  width: 100%;
  font-size: 17cqi;
  box-shadow: inset 0 0 0 0.8cqi rgba(0, 0, 0, 0.2);
}
.gift-ribbon {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 12cqi;
  z-index: 3;
  display: grid;
  justify-items: center;
  padding: 1.6cqi 3cqi 2cqi;
  border-radius: 1cqi;
  background: linear-gradient(180deg, #fff, #f3e8ee);
  box-shadow: 0 1.6cqi 3cqi rgba(80, 20, 40, 0.45);
  color: #2a2240;
  text-align: center;
}
.gift-ribbon::before,
.gift-ribbon::after {
  content: '';
  position: absolute;
  top: 1.4cqi;
  width: 6cqi;
  height: calc(100% - 0.4cqi);
  background: #e9dce4;
  z-index: -1;
}
.gift-ribbon::before {
  left: -4cqi;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%);
}
.gift-ribbon::after {
  right: -4cqi;
  clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%);
}
.gift-ribbon small {
  font-size: 4cqi;
  font-weight: 700;
  color: #c23a72;
}
.gift-ribbon b {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--display);
  font-size: 7cqi;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.parcel-art.kind-gift .stk {
  opacity: 0.85;
}
.parcel-art.kind-gift .stk-fox,
.parcel-art.kind-gift .stk-uwu {
  display: none;
}
/* La lettre : grande photo, nom, mot, cadeaux */
.gift-letter {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: radial-gradient(circle at 50% 40%, rgba(255, 140, 190, 0.25), transparent 60%), rgba(var(--deep), 0.55);
  animation: gl-in 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.gift-letter.out {
  opacity: 0;
  transition: opacity 0.25s ease;
}
@keyframes gl-in {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
}
.gl-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  width: min(460px, 100%);
  padding: 4.2rem 1.6rem 1.6rem;
  border-radius: 22px;
  background: linear-gradient(180deg, #fffaf2, #f6e9ef);
  color: #2a2240;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.gl-face {
  position: absolute;
  top: -58px;
  padding: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7d6, #f2c14e 55%, #b07a14);
  box-shadow: 0 12px 26px rgba(80, 20, 40, 0.45);
}
.gl-face .avatar-xl {
  display: grid;
  width: 112px;
}
.gl-from {
  margin: 0;
  color: #c23a72;
  font-weight: 800;
}
.gl-name {
  margin: -0.2rem 0 0.2rem;
  font-size: var(--s3);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.gl-message {
  position: relative;
  margin: 0.3rem 0 0.4rem;
  padding: 0.7rem 1.1rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px -10px rgba(80, 20, 40, 0.5), inset 0 0 0 1px rgba(194, 58, 114, 0.25);
  font-family: var(--display);
  font-size: var(--s1);
  font-style: italic;
}
.gl-message::before {
  content: '“';
  position: absolute;
  top: -0.9rem;
  left: 0.5rem;
  color: #e0568c;
  font-size: 2.6rem;
  font-style: normal;
  line-height: 1;
}
.gl-what {
  margin: 0.3rem 0 0;
  color: #6c6385;
  font-size: var(--s-1);
  font-weight: 700;
}
.gl-dup {
  margin: 0;
  color: #6c6385;
}
.gl-card .btn {
  margin-top: 0.6rem;
}
.gl-card .btn .icon {
  width: 16px;
  height: 16px;
}
/* Les cadeaux : chaque box dessinée, son nombre ; les PinterCoin */
.gift-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.gift-chip {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  min-width: 76px;
  padding: 0.55rem 0.6rem 0.5rem;
  border-radius: 14px;
  background: rgba(42, 34, 64, 0.06);
  box-shadow: inset 0 0 0 1px rgba(42, 34, 64, 0.12);
}
.gift-chip b {
  font-family: var(--display);
  font-size: var(--s2);
  line-height: 1;
}
.gift-chip small {
  color: #6c6385;
  font-size: 0.75rem;
  font-weight: 700;
}
.gc-art {
  position: relative;
  display: block;
  width: 54px;
  aspect-ratio: 10 / 9;
  container-type: inline-size;
}
.gc-art .parcel-label small,
.gc-art .stk,
.gc-art .parcel-fragile {
  display: none;
}
.gc-coin {
  display: grid;
  place-items: center;
}
.gc-coin svg {
  width: 40px;
  height: 40px;
}
.gift-chips.big .gift-chip {
  min-width: 92px;
}
.gift-chips.big .gc-art {
  width: 66px;
}
/* Le récapitulatif : les cadeaux en grand, puis les œuvres */
.gift-sum {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  margin: 0.4rem auto 1rem;
}
.gift-sum .gift-chip {
  background: rgba(var(--light), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.18);
}
.gift-sum .gift-chip small {
  color: var(--muted);
}
.gift-sum .gift-note .avatar-md {
  width: 40px;
}
.gift-sum-works {
  margin: 0.6rem 0 0;
  font-size: var(--s1);
}

/* ═════════════ 0.20 : camions — places, flèche pour retirer, cadeaux, petit mot ═════════════ */
.ts-slot {
  display: block;
  cursor: default;
}
.ts-slot.is-empty {
  cursor: default;
}
.ts-out {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--deep), 0.85);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.ts-out .icon {
  width: 15px;
  height: 15px;
}
@media (hover: hover) {
  .ts-out:hover {
    background: var(--pink);
  }
}
.truck-hint {
  margin: -0.2rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}
.truck-sep {
  height: 1px;
  margin: 0.15rem 0;
  background: linear-gradient(90deg, transparent, rgba(var(--light), 0.2) 20%, rgba(var(--light), 0.2) 80%, transparent);
}
.truck-gifts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}
.tg-item {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.4rem 0.2rem 0.35rem;
  border-radius: 10px;
  background: rgba(var(--deep), 0.35);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tg-item.on {
  box-shadow: inset 0 0 0 2px var(--tc);
}
.tg-art {
  position: relative;
  display: block;
  width: 40px;
  aspect-ratio: 10 / 9;
  container-type: inline-size;
}
.tg-art .parcel-label,
.tg-art .stk,
.tg-art .parcel-fragile {
  display: none;
}
.tg-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tg-step {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.tg-step b {
  min-width: 1.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tg-step button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.tg-step button[disabled] {
  opacity: 0.35;
  cursor: default;
}
.tg-coins {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tg-coins > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: var(--s-1);
  font-weight: 700;
  white-space: nowrap;
}
.tg-coins .icon {
  width: 16px;
  height: 16px;
}
.tg-coins .input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 0.3em 0.7em;
}
.truck-msg {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.6rem;
  border-radius: 12px;
  background: rgba(var(--light), 0.07);
  box-shadow: inset 0 0 0 1px var(--line);
}
.truck-msg > span .icon {
  width: 16px;
  height: 16px;
  color: var(--tc);
}
.truck-msg .input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.truck-msg small {
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.truck-msg.is-off {
  opacity: 0.45;
  filter: grayscale(1);
}
.ps-msg {
  color: var(--muted);
}
.gc-art .parcel-label,
.sib-art .parcel-label,
.tg-art .parcel-label {
  display: none;
}

/* ═════════════ 0.20 : Enchères ═════════════ */
.auc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1rem;
  margin-bottom: 0.9rem;
}
.auc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.auc-tabs .pill span {
  margin-left: 0.25rem;
  opacity: 0.7;
}
.auc-head .btn .icon {
  width: 18px;
  height: 18px;
}
.auc-balance {
  color: #ffe3a0;
  font-size: var(--s1);
  font-weight: 800;
}
.lots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}
.lot {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.08), 0 14px 30px -20px rgba(0, 0, 0, 0.8);
}
.lot.is-leading {
  box-shadow: inset 0 0 0 2px #5fcf8e, 0 14px 30px -20px rgba(0, 0, 0, 0.8);
}
.lot.is-mine {
  box-shadow: inset 0 0 0 2px rgba(255, 95, 162, 0.55), 0 14px 30px -20px rgba(0, 0, 0, 0.8);
}
.lot.is-closed {
  opacity: 0.7;
}
.lot-art {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-bottom: 5px solid var(--rc);
  background: rgba(var(--deep), 0.6);
  cursor: zoom-in;
  overflow: hidden;
}
.lot-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  transition: transform 0.3s ease;
}
.lot-art.is-blurred img {
  filter: blur(14px);
}
@media (hover: hover) {
  .lot-art:hover img {
    transform: scale(1.04);
  }
}
.lot-frame {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(var(--deep), 0.85);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
}
.lot-owned {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #5fcf8e;
  color: #0f2b1c;
  font-size: 0.72rem;
  font-weight: 800;
}
.lot-body {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 0.7rem 0.85rem 0.85rem;
}
.lot-title {
  margin: 0;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lot-seller {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--s-1);
}
.lot-price {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: rgba(var(--deep), 0.4);
}
.lot-price > span {
  display: grid;
  gap: 0.1rem;
}
.lot-price small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}
.lot-price b {
  font-size: 1rem;
}
.lot-price b .coins-amount b {
  color: #ffe3a0;
}
.lot-time {
  text-align: right;
}
.lot-time.soon b {
  color: #ff8a8a;
}
.lot-lead {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: #8fe0b0;
  font-size: var(--s-1);
  font-weight: 700;
}
.lot-lead .icon {
  width: 15px;
  height: 15px;
}
.lot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.lot-actions .btn .icon {
  width: 16px;
  height: 16px;
}
.auc-empty {
  display: grid;
  justify-items: center;
}
.auc-empty svg {
  width: 120px;
  height: 90px;
}
.auc-rules {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  max-width: 820px;
  margin-top: 1.6rem;
}
.auc-rules .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
/* Mettre aux enchères */
.aucd h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.aucd h2 .icon {
  width: 22px;
  height: 22px;
}
.aucd-work {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.aucd-work img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
}
.aucd-work img.is-blur {
  filter: blur(8px);
}
.aucd-work > div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.aucd-work b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aucd .field > span {
  display: block;
  margin-bottom: 0.3rem;
}
.aucd .seg {
  display: flex;
}
.aucd .seg .seg-btn {
  flex: 1;
}

/* ═════════════ 0.21 ═════════════ */
/* Cartel : l'artiste en titre, l'année dessous */
.cartel b.t.a {
  font-size: 12.5px;
}
.cartel span[translate='no'] + .year::before {
  content: ' · ';
}
.cartel .when-line:empty {
  display: none;
}
/* Profil : boutons d'image, et au centre les portes « Mon musée » et « Ma vitrine » */
.pf-card {
  grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr) auto;
}
.pf-img-links {
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
}
.pf-img-links .btn {
  min-height: 32px;
}
.pf-friend-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.pf-visit {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  padding: 0 0.6rem;
}
.pf-door {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.5rem;
  width: 132px;
  min-height: 118px;
  padding: 0.9rem 0.6rem 0.8rem;
  border-radius: 16px 16px 10px 10px;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 22%, var(--panel-2, var(--panel))), color-mix(in srgb, var(--dc) 6%, var(--panel)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc) 45%, transparent), 0 10px 26px -18px var(--dc);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pf-door.is-museum {
  --dc: #c8a46a;
}
.pf-door.is-showcase {
  --dc: #f2c14e;
}
.pf-door::before {
  /* l'arche de la porte */
  content: '';
  position: absolute;
  inset: 8px 14px auto;
  height: 54%;
  border-radius: 60px 60px 6px 6px;
  border: 1px solid color-mix(in srgb, var(--dc) 40%, transparent);
  border-bottom: 0;
  pointer-events: none;
}
.pf-door:hover,
.pf-door:focus-visible {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--dc), 0 16px 30px -16px var(--dc);
}
.pf-door-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--dc);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--dc) 30%, transparent), transparent 70%);
}
.pf-door-art .icon {
  width: 30px;
  height: 30px;
}
.pf-door b {
  position: relative;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 650;
}
.pf-limited {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  background: var(--panel);
}
.pf-limited .icon {
  flex: none;
  width: 18px;
  height: 18px;
}
@media (max-width: 1000px) {
  .pf-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .pf-visit {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0;
  }
  .pf-door {
    flex: 1;
    max-width: 200px;
    min-height: 96px;
  }
}
@media (max-width: 860px) {
  .pf-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pf-worth {
    grid-row: 3;
  }
}
@media (max-width: 560px) {
  .pf-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .pf-visit {
    grid-row: auto;
  }
  .pf-friend-act {
    justify-content: center;
  }
}
/* Paramètres : « Supprimer le compte » tout à droite de la rangée d'aide, en rouge */
.settings-help {
  align-items: center;
}
.settings-help .sh-gap {
  flex: 1;
}
.btn-danger {
  color: #fff;
  background: #c62f45;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.btn-danger:hover,
.btn-danger:focus-visible {
  background: #de3a52;
}
/* Succès : toutes les tuiles à la même hauteur */
.ach .ach-list {
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.ach .ach-list > .ach-row {
  height: 100%;
  align-content: start;
}
/* Œuvre non possédée : des hachures grises légères, le fond habituel reste visible dessous */
.sheet.is-foreign {
  background:
    repeating-linear-gradient(135deg, rgba(150, 150, 165, 0.067) 0 9px, transparent 9px 18px),
    var(--wall-deep);
}
.sheet.is-foreign .sheet-art {
  background:
    repeating-linear-gradient(135deg, rgba(150, 150, 165, 0.053) 0 9px, transparent 9px 18px),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(var(--light), 0.14), transparent 75%),
    var(--wall);
}
.sheet.is-foreign .sheet-info {
  background: transparent;
}
.visit-series.is-foreign {
  background:
    repeating-linear-gradient(135deg, rgba(150, 150, 165, 0.06) 0 9px, transparent 9px 18px),
    var(--panel);
}
.foreign-note {
  align-items: center;
}
.foreign-note.is-auction {
  background: color-mix(in srgb, #f2c14e 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f2c14e 45%, transparent);
}
.foreign-note.is-auction .icon {
  color: #f2c14e;
}
.foreign-note.is-auction .btn {
  margin-left: auto;
}
.seg-btn.is-zero:not([aria-pressed='true']) {
  opacity: 0.45;
}
/* Récapitulatif : les boutons du bas flottent, sans bandeau dégradé coupé derrière eux */
.sum-actions {
  background: none;
  pointer-events: none;
}
.sum-actions > * {
  pointer-events: auto;
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.65);
}
.sum-actions .btn-ghost {
  background: color-mix(in srgb, var(--wall-deep) 88%, transparent);
  backdrop-filter: blur(6px);
}
/* Colis reçus à l'accueil : plus grands, et rien ne dit ce qu'il y a dedans */
.hg-list {
  gap: 1.1rem;
}
.hg-box {
  gap: 0.6rem;
  padding: 0.9rem 0.9rem 0.8rem;
  border-radius: 18px;
}
.hg-art {
  width: 210px;
}
.hg-what {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  color: var(--ink);
  font-size: var(--s1);
}
.hg-what b {
  font-weight: 800;
}
.home-gifts h2 {
  font-size: var(--s2);
}
.home-gifts h2 .icon {
  width: 28px;
  height: 28px;
}
.hg-box.is-auction .hg-what b {
  color: #f2c14e;
}
@media (max-width: 520px) {
  .hg-art {
    width: 160px;
  }
}
/* Le colis « Enchère réussie » : doré, avec un marteau en sceau */
.parcel-art.kind-auction {
  filter: sepia(0.35) saturate(1.3) hue-rotate(-8deg);
}
.parcel-art.kind-auction .stk-fox,
.parcel-art.kind-auction .stk-uwu {
  display: none;
}
.gift-seal.is-gavel {
  display: grid;
  place-items: center;
  color: #5c3a1e;
  background: radial-gradient(circle at 35% 30%, #fff7d6, #f2c14e 55%, #b07a14);
}
.gift-seal.is-gavel .icon {
  width: 46%;
  height: 46%;
}
.gift-note.is-auction {
  background: color-mix(in srgb, #f2c14e 18%, var(--panel));
}
.gn-gavel {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #5c3a1e;
  background: radial-gradient(circle at 35% 30%, #fff7d6, #f2c14e 55%, #b07a14);
}
.gn-gavel .icon {
  width: 17px;
  height: 17px;
}
/* La lettre du colis : aux couleurs des fenêtres du jeu (plus de fond blanc) */
.gl-card {
  background: linear-gradient(180deg, color-mix(in srgb, #ff8fc4 10%, var(--panel)), var(--wall-deep));
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px color-mix(in srgb, #ff8fc4 28%, transparent);
}
.gl-card.is-auction {
  background: linear-gradient(180deg, color-mix(in srgb, #f2c14e 12%, var(--panel)), var(--wall-deep));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px color-mix(in srgb, #f2c14e 35%, transparent);
}
.gl-from {
  color: #ff8fc4;
}
.gl-card.is-auction .gl-from {
  color: #f2c14e;
}
.gl-message {
  background: color-mix(in srgb, #ff8fc4 10%, var(--wall));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ff8fc4 30%, transparent);
}
.gl-what,
.gl-dup {
  color: var(--muted);
}
.gl-gavel {
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  color: #5c3a1e;
}
.gl-gavel .icon {
  width: 56px;
  height: 56px;
}
.gl-card .gift-chip {
  background: rgba(var(--light), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.18);
}
.gl-card .gift-chip small {
  color: var(--muted);
}

/* Dock : à gauche, à part, le cœur ; une case grisée quand on ne peut pas y lâcher */
.drag-sep {
  align-self: stretch;
  width: 1px;
  margin: 4px 2px;
  background: rgba(var(--light), 0.22);
}
.drag-slot.is-heart {
  min-width: 110px;
  border-color: rgba(232, 68, 90, 0.5);
}
.drag-slot.is-heart .icon {
  color: #e8445a;
}
.drag-slot.is-heart.drop-over {
  border-color: #e8445a;
  background: rgba(232, 68, 90, 0.14);
}
.drag-slot.is-star {
  min-width: 70px;
  padding: 12px 10px;
  border-color: rgba(242, 193, 78, 0.45);
  color: #f2c14e;
  letter-spacing: 0.05em;
}
.drag-slot.is-star .icon {
  display: none;
}
.drag-slot.is-star span {
  font-size: 1.15rem;
}
.drag-slot.is-off {
  opacity: 0.4;
  border-style: dotted;
  cursor: not-allowed;
}
.drag-slot small {
  max-width: 150px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
}
/* Barre de sélection : « Enchère » grisée */
.select-bar .btn.is-off {
  opacity: 0.45;
}

/* Enchères : vendeur et acheteurs cliquables, lots de séries, historique */
.player-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
}
.player-link:hover span,
.player-link:focus-visible span {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.player-link.is-gone {
  color: var(--muted);
}
.lot-title {
  display: grid;
  gap: 0.05rem;
}
.lot-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lot-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.4em;
  border-radius: 6px;
  background: rgba(127, 178, 255, 0.18);
  color: #9cc4ff;
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: 1px;
}
.lot-kind .icon {
  width: 12px;
  height: 12px;
}
.lot-sub {
  color: var(--muted);
  font-size: var(--s-1);
}
.lot.is-series .lot-art {
  overflow: visible;
}
.lot-stack {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--panel-2);
  box-shadow: 0 0 0 1px rgba(var(--light), 0.12);
  transform: rotate(3deg) translate(5px, 2px);
}
.lot-stack.two {
  transform: rotate(-3deg) translate(-5px, 2px);
}
.lot-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(20, 16, 30, 0.8);
  color: #9cc4ff;
  font-size: 0.78rem;
  font-weight: 800;
}
.lot-count .icon {
  width: 13px;
  height: 13px;
}
.lot-winner .player-link {
  color: #f2c14e;
}
.lot-hist {
  margin-left: auto;
}
.auc-head {
  align-items: center;
}
.auc-tools {
  margin-top: 0.8rem;
}
/* Détail d'une vente */
.aud {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(calc(100 * var(--dvh)) - 2rem);
  overflow-y: auto;
}
.aud h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 2.4rem 0.2rem 0;
}
.aud-meta {
  margin: 0 0 0.9rem;
  color: var(--muted);
}
.aud-works {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
}
.aud-work {
  flex: none;
  width: 86px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-2);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--rc, rgba(var(--light), 0.15));
}
.aud-work img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aud-work.is-blurred img {
  filter: blur(8px);
}
.aud-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 1.4rem;
  margin: 0.9rem 0 0.4rem;
}
.aud-price > span {
  display: grid;
}
.aud-price small {
  color: var(--muted);
  font-size: var(--s-1);
}
.aud-price b {
  font-size: var(--s1);
}
.aud-h {
  margin: 1rem 0 0.5rem;
  font-size: var(--s0, 1rem);
}
.aud-bids {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aud-bids li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  background: var(--panel-2, rgba(var(--light), 0.05));
}
.aud-bids li.is-top {
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.55);
}
.aud-me {
  padding: 0 0.4em;
  border-radius: 999px;
  background: rgba(var(--light), 0.12);
  color: var(--muted);
  font-weight: 700;
}
.aud-bids small {
  color: var(--muted);
}
.aucd-err {
  margin: 0;
  color: #ff8c9b;
  font-weight: 700;
}
.aucd-work.is-series img {
  box-shadow: 4px -4px 0 -1px var(--panel-2), 8px -8px 0 -2px rgba(var(--light), 0.15);
}

/* Camion : une série entière dans une place */
.ts-slot.is-series {
  box-shadow: inset 0 0 0 2px rgba(127, 178, 255, 0.7);
}
.ts-series-tag {
  position: absolute;
  left: 4px;
  top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(20, 16, 30, 0.85);
  color: #9cc4ff;
  font-size: 0.7rem;
  font-weight: 800;
}
.ts-series-tag .icon {
  width: 11px;
  height: 11px;
}
.ts-slot.is-bad {
  box-shadow: inset 0 0 0 3px #e8445a;
}
/* Départ d'un camion : la fenêtre illustrée */
.std {
  width: min(520px, 100%);
  text-align: center;
}
.std-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0.2rem 0 0.6rem;
}
.std-truck {
  display: block;
  width: 120px;
}
.std-truck svg {
  width: 100%;
  height: auto;
}
.std-arrow .icon {
  width: 22px;
  height: 22px;
  color: var(--tc, var(--muted));
}
.std-friend .avatar-lg {
  width: 64px;
  box-shadow: 0 0 0 3px var(--tc, #ff8fc4);
}
.std h2 {
  margin: 0;
}
.std-sub {
  margin: 0.2rem 0 0.8rem;
  color: var(--muted);
}
.std-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
  max-width: 400px;
  margin: 0 auto 0.9rem;
}
.std-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-2, rgba(var(--light), 0.06));
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.14);
}
.std-slot.is-empty {
  background: repeating-linear-gradient(135deg, rgba(var(--light), 0.05) 0 6px, transparent 6px 12px);
}
.std-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.std-slot.is-blurred img {
  filter: blur(8px);
}
.std-slot.is-series {
  box-shadow: inset 0 0 0 2px rgba(127, 178, 255, 0.7);
}
.std .gift-chips {
  margin-bottom: 0.6rem;
}
.std .gift-chip {
  background: rgba(var(--light), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.18);
}
.std .gift-chip small {
  color: var(--muted);
}
.std-msg {
  display: inline-block;
  margin: 0.2rem auto 0.6rem;
}
.std-note {
  margin: 0.2rem 0 0.8rem;
}
.cat-dock-slot.is-off {
  opacity: 0.4;
  border-style: dotted;
  cursor: not-allowed;
}
/* Bouton bleu « Séries liées » d'une salle d'artiste, et les séries qu'il montre */
.btn-blue {
  color: #fff;
  background: #3f7fe0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.btn-blue:hover,
.btn-blue:focus-visible {
  background: #4d8cf0;
}
.btn-blue[aria-pressed='true'] {
  background: #2a5fb4;
  box-shadow: inset 0 0 0 2px #9cc4ff, 0 0 18px -6px #4d8cf0;
}
.btn-blue .rel-n {
  padding: 0 0.45em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.82em;
}
.related-series {
  margin-top: 0.4rem;
}
.rs-hint {
  margin: 0 0 1rem;
}
.related-series .series-tile {
  position: relative;
}
.rs-stars {
  position: absolute;
  top: 6px;
  right: 8px;
}
.related-series .series-wrap[draggable='true'] {
  cursor: grab;
}
.rs-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.rs-top .rs-hint {
  margin: 0;
}
:root:not([data-series-cat='big']) .related-series .orga-series {
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 0.6rem;
}
:root:not([data-series-cat='big']) .related-series .series-book {
  width: min(100%, 110px);
}
:root:not([data-series-cat='big']) .related-series .series-tile .door-name {
  font-size: 0.85rem;
}
.drag-slot.is-star {
  min-width: 84px;
}
.aud h2 > .icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: #f2c14e;
}
.sheet-info > .foreign-note {
  margin-right: 2.8rem;
}
/* « Ajouter à ton musée » : les salles en petites portes */
.pick-dialog {
  width: min(680px, 100%);
  max-height: calc(calc(100 * var(--dvh)) - 2rem);
  display: flex;
  flex-direction: column;
}
.pick-dialog h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.pick-dialog h2 > .icon {
  flex: none;
  width: 26px;
  height: 26px;
  color: #c8a46a;
}
.pick-search {
  margin: 0 0 0.8rem;
}
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 0.6rem;
  min-height: 0;
  margin: 0.2rem 0 0.4rem;
  padding: 0.2rem;
  overflow-y: auto;
}
.pick-tile {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: 14px;
  background: rgba(var(--light), 0.06);
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.1);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.pick-tile:hover,
.pick-tile:focus-visible {
  transform: translateY(-2px);
  background: rgba(var(--light), 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 216, 150, 0.55), 0 10px 22px -14px rgba(255, 176, 92, 0.8);
}
.pick-tile:hover .door-leaf,
.pick-tile:focus-visible .door-leaf {
  transform: rotateY(48deg);
}
.pick-tile.here {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.pick-tile[hidden] {
  display: none;
}
.pt-door {
  display: block;
  width: 46px;
}
.pt-door .door-frame {
  border-width: 4px;
  border-bottom-width: 3px;
  border-radius: 5px 5px 2px 2px;
}
.pt-door .door-sign {
  display: none;
}
.pt-museum,
.pt-plus {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 8;
  border-radius: 8px;
  background: rgba(200, 164, 106, 0.16);
  color: #c8a46a;
}
.pt-plus {
  border: 2px dashed rgba(var(--light), 0.3);
  background: none;
  color: var(--ink);
}
.pt-museum .icon,
.pt-plus .icon {
  width: 22px;
  height: 22px;
}
.pt-text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.pt-text b {
  overflow: hidden;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-text small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-text .pt-where {
  color: #c8a46a;
}
.pick-new {
  background: none;
  box-shadow: inset 0 0 0 2px rgba(var(--light), 0.16);
}
.pt-text b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.pick-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}
/* « Exposer dans ta vitrine » : un vrai petit podium, sombre et doré (plus de blocs blancs) */
.spd-v2 {
  position: relative;
  width: min(560px, 100%);
  padding-top: 2.4rem;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(242, 193, 78, 0.16), transparent 70%),
    var(--panel);
}
.spd-crown {
  position: absolute;
  top: -26px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #5c3a1e;
  background: radial-gradient(circle at 35% 30%, #fff7d6, #f2c14e 55%, #b07a14);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.7);
}
.spd-crown .icon {
  width: 26px;
  height: 26px;
}
.spd-v2 h2 {
  margin: 0 0 0.3rem;
}
.spd-v2 .spd-lede {
  margin: 0 auto 1.1rem;
  max-width: 40ch;
}
.spd-stage {
  position: relative;
  margin: 0 0 1rem;
  padding: 1rem 0.8rem 0;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(242, 193, 78, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.32));
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.18);
  overflow: hidden;
}
.spd-v2 .spd-podium {
  gap: 0.35rem;
  margin: 0;
}
.spd-v2 .spd-step {
  gap: 0.45rem;
}
.spd-v2 .spd-thumb {
  width: 82px;
  border-radius: 4px;
  background: #1b1324;
  box-shadow: 0 0 0 3px #3a2a14, 0 0 0 5px var(--medal, #f2c14e), 0 12px 20px -10px rgba(0, 0, 0, 0.8);
}
.spd-v2 .s-1 .spd-thumb {
  width: 96px;
}
.spd-v2 .spd-thumb.free {
  border: 0;
  background: rgba(var(--light), 0.05);
  box-shadow: inset 0 0 0 2px rgba(var(--light), 0.22);
  color: var(--muted);
}
.spd-v2 .s-1 { --medal: #f2c14e; --medal-2: #b07a14; }
.spd-v2 .s-2 { --medal: #d9dde6; --medal-2: #8e96a8; }
.spd-v2 .s-3 { --medal: #e0a36b; --medal-2: #8f5a2c; }
.spd-v2 .spd-block {
  display: grid;
  align-content: center;
  gap: 0;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #4a2a4e, #2a1730 80%);
  box-shadow: inset 0 4px 0 var(--medal), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.spd-v2 .s-1 .spd-block { height: 74px; }
.spd-v2 .s-2 .spd-block { height: 54px; }
.spd-v2 .s-3 .spd-block { height: 40px; }
.spd-v2 .spd-block b {
  background: linear-gradient(180deg, var(--medal), var(--medal-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.7rem;
  line-height: 1;
}
.spd-v2 .s-3 .spd-block b {
  font-size: 1.3rem;
}
.spd-medal {
  color: rgba(var(--light), 0.5);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.spd-v2 .s-3 .spd-medal {
  display: none;
}
.spd-v2 .spd-who {
  order: -1;
  max-width: 100%;
  min-height: 1.1em;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .spd-v2 .spd-step:hover .spd-thumb {
    transform: translateY(-5px) scale(1.03);
  }
  .spd-v2 .spd-step:hover .spd-block {
    background: linear-gradient(180deg, #5b3360, #331c3a 80%);
    box-shadow: inset 0 4px 0 var(--medal), 0 0 22px -6px var(--medal);
  }
}
.spd-v2 .spd-gallery {
  gap: 0.9rem;
  padding: 0.8rem 1rem;
  border-radius: 14px;
}
.spd-gal-art {
  display: grid;
  grid-template-columns: repeat(2, 14px);
  gap: 3px;
  flex: none;
}
.spd-gal-art i {
  width: 14px;
  height: 12px;
  border-radius: 2px;
  background: rgba(var(--light), 0.18);
  box-shadow: inset 0 0 0 2px rgba(242, 193, 78, 0.5);
}
.spd-v2 .spd-gallery > span:not(.spd-gal-art) {
  flex: 1;
}
.spd-go {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.spd-v2 .spd-gallery:hover:not([disabled]) {
  background: rgba(242, 193, 78, 0.1);
  box-shadow: inset 0 0 0 2px rgba(242, 193, 78, 0.6);
}
/* Profil : la plus aimée de chaque cadre, en fond derrière le chiffre */
.pff-canvas {
  position: relative;
  overflow: hidden;
}
.pff-best {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(1.05);
}
.pff-best.is-blur {
  filter: blur(8px);
}
.pf-frame.has-best .pff-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(15, 10, 25, 0.55), rgba(15, 10, 25, 0.15) 70%);
}
.pff-canvas b {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 0 14px rgba(0, 0, 0, 0.8);
}

/* Ma vitrine : marches sombres veinées d'or (plus de marbre blanc), et des projecteurs qui
   tombent du haut de la vitrine, même au-dessus des marches 2 et 3 */
#vitrine .podium,
.visit .podium {
  clip-path: inset(-3.4rem -100vw -80px -100vw);
}
#vitrine .pod::before,
.visit .pod::before {
  top: -100vh;
  background: linear-gradient(0deg, transparent, rgba(255, 240, 200, 0.06) 25%, rgba(255, 240, 200, 0.16) 75%, rgba(255, 240, 200, 0.22));
  clip-path: polygon(calc(50% - 26px) 0, calc(50% + 26px) 0, 100% 100%, 0 100%);
}
#vitrine .pod-step,
.visit .pod-step {
  background:
    linear-gradient(115deg, transparent 28%, rgba(255, 230, 170, 0.12) 44%, transparent 58%),
    radial-gradient(ellipse 60% 80% at 25% 30%, rgba(242, 193, 78, 0.1), transparent 65%),
    repeating-linear-gradient(160deg, transparent 0 22px, rgba(242, 193, 78, 0.07) 22px 23px, transparent 23px 41px),
    linear-gradient(180deg, #6a2547, #44142e 55%, #2c0b1e);
}
#vitrine .pod-step::before,
.visit .pod-step::before {
  background: radial-gradient(circle at 40% 35%, #3a0f26, #1a0612);
}

/* ═════════════ 0.22 ═════════════ */
/* Séries liées : les étoiles en bas de la case */
.related-series .rs-stars {
  position: static;
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
/* Menu du clic droit : séparateur, choix grisés */
.ctx-sep {
  margin: 4px 6px;
  border: 0;
  border-top: 1px solid rgba(var(--light), 0.14);
}
.ctx-menu button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.ctx-menu button span small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}
/* Flammes des tags aimés : serrées */
.liked-tag .star-row.mini {
  gap: 0;
}
.liked-tag .star-row.mini i.on {
  margin: 0 -2px;
}
.liked-tag .star-row.mini svg {
  width: 12px;
  height: 12px;
}
.pf-frame[data-best] {
  cursor: pointer;
}
.pf-frame[data-best]:hover .pff-art,
.pf-frame[data-best]:focus-visible .pff-art {
  transform: translateY(-3px);
  filter: brightness(1.08);
}
.pf-frame[data-best]:hover .pff-best {
  opacity: 0.85;
}
.pff-art {
  transition: transform 0.18s ease, filter 0.18s ease;
}
/* Profil : les portes Mon musée / Ma vitrine, dans le style des onglets illustrés du Musée */
.pf-door {
  width: 150px;
  min-height: 0;
  gap: 0.45rem;
  padding: 0.8rem 0.7rem 0.75rem;
  border-radius: 18px;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.85);
}
.pf-door::before {
  display: none;
}
.pf-door.is-museum {
  background: var(--paper);
  color: var(--paper-ink);
}
.pf-door.is-showcase {
  background: linear-gradient(135deg, #fff4cd, #f2c14e 60%, #d9a83a);
  color: #3a2604;
}
.pf-door-art {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-width: 112px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, #fff, #e6dcc8);
}
.pf-door.is-showcase .pf-door-art {
  background: radial-gradient(circle at 50% 40%, #fffaf0, #f7dc84);
}
.pf-door-art svg {
  width: 88%;
  height: auto;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.pf-door b {
  font-size: 15px;
}
.pf-door:hover,
.pf-door:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.9);
}
.pf-door:hover .pf-door-art svg {
  transform: translateY(-2px) rotate(-3deg) scale(1.06);
}
@media (max-width: 1000px) {
  .pf-door {
    max-width: 200px;
  }
}
/* « Ajouter à ton musée » : de porte en porte, avec les pancartes */
.pick-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 0.8rem;
}
.pc-crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--light), 0.07);
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
}
.pc-crumb .icon {
  width: 15px;
  height: 15px;
}
.pc-crumb.on {
  background: rgba(200, 164, 106, 0.22);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(200, 164, 106, 0.55);
}
.pc-sep {
  color: var(--muted);
}
.pick-tile {
  grid-template-columns: 62px minmax(0, 1fr);
}
.pt-door {
  width: 62px;
}
.pt-door .door-sign {
  display: grid;
}
.pt-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #c8a46a !important;
}
.pt-sub .icon {
  width: 12px;
  height: 12px;
}
.pick-empty {
  margin: 0.4rem 0;
}
.pick-foot {
  justify-content: flex-end;
}
.pick-foot [data-drop] {
  max-width: 100%;
}
.pick-here {
  max-width: 14ch;
  overflow: hidden;
  margin-left: 0.3rem;
  padding: 0 0.45em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.8em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Succès : grandes médailles, cinq paliers (cuivre, bronze, argent, or, diamant), et la carte qui
   prend la couleur du palier atteint */
.ach .medal {
  width: 46px;
  height: 46px;
}
.ach .medal svg {
  width: 22px;
  height: 22px;
}
.medal.t-0 { --mc: #c8794a; }
.medal.t-1 { --mc: #b08d57; }
.medal.t-2 { --mc: #d6dbe7; }
.medal.t-3 { --mc: #f2c14e; }
.medal.t-4 { --mc: #9ee7ff; }
.tier-tag {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #241a10;
  background: var(--tc);
}
.tier-tag.t-0 { --tc: #e0956a; }
.tier-tag.t-1 { --tc: #c9a46a; }
.tier-tag.t-2 { --tc: #e3e7ef; }
.tier-tag.t-3 { --tc: #f2c14e; }
.tier-tag.t-4 { --tc: linear-gradient(90deg, #b9f3ff, #e7c8ff, #b9f3ff); }
.ach-row.lv-1 { --lv: 200, 121, 74; }
.ach-row.lv-2 { --lv: 176, 141, 87; }
.ach-row.lv-3 { --lv: 214, 219, 231; }
.ach-row.lv-4 { --lv: 242, 193, 78; }
.ach-row.lv-5 { --lv: 158, 231, 255; }
.ach-row[class*='lv-']:not(.lv-0) {
  background: linear-gradient(135deg, rgba(var(--lv), 0.26), rgba(var(--lv), 0.06) 60%, rgba(var(--lv), 0.14));
  box-shadow: inset 0 0 0 1px rgba(var(--lv), 0.45);
}
.ach-row.lv-5:not(.is-single) {
  background: linear-gradient(135deg, rgba(158, 231, 255, 0.28), rgba(231, 200, 255, 0.16) 50%, rgba(158, 231, 255, 0.22));
}
.ach-row.is-done {
  opacity: 0.85;
}
.ach .tier-dots i.on {
  background: #f2c14e;
}
/* Récompenses : une icône de colis à la couleur de chaque box, quel que soit le skin */
.rw-box {
  gap: 0.2rem;
}
.rw-chip.rw-box .icon {
  width: 17px;
  height: 17px;
  color: var(--rw, #e3b47a);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.rw-parcel { --rw: #e3b47a; }
.rw-god { --rw: #f7d774; }
.rw-spec { --rw: #6fb0ff; }
.rw-artist { --rw: #5fd68a; }

/* ===== 0.23 ===== */
/* Dock : des mots courts, des cases plus étroites ; les étoiles serrées comme les flammes */
.drag-slot {
  min-width: 96px;
}
.drag-slot.is-star {
  min-width: 64px;
  letter-spacing: 0;
}
.drag-slot.is-star .dz-stars {
  display: inline-flex;
  align-items: center;
}
.drag-slot.is-star .dz-stars .icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 -3.5px;
  color: #f2c14e;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.drag-slot.is-star.is-zero {
  color: var(--muted);
  border-color: rgba(var(--light), 0.24);
}
.drag-slot.is-star.is-zero span {
  font-size: var(--s-1);
  white-space: nowrap;
}
/* Œuvre à découvrir : un cadre neutre, qui ne trahit pas sa rareté */
.piece.r-u {
  --rc: var(--muted);
  /* Aux couleurs du décor (0.38) : un cadre sombre du même ton que le mur */
  --ft: color-mix(in srgb, var(--wall) 62%, #000);
  --fr: color-mix(in srgb, var(--wall-deep) 80%, #000);
  --fb: color-mix(in srgb, var(--wall-deep) 62%, #000);
  --fl: color-mix(in srgb, var(--wall) 50%, #000);
}
/* Grand écran ouvert depuis une fiche : petites flèches vers les œuvres voisines */
.viewer-stage {
  position: relative;
}
.viewer-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(10, 7, 18, 0.55);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s;
}
.viewer-nav:hover:not([disabled]) {
  opacity: 1;
  background: rgba(255, 255, 255, 0.18);
}
.viewer-nav[disabled] {
  opacity: 0.2;
  cursor: default;
}
.viewer-nav svg {
  width: 18px;
  height: 18px;
}
.viewer-nav.prev {
  left: 10px;
}
.viewer-nav.prev svg {
  transform: rotate(180deg);
}
.viewer-nav.next {
  right: 10px;
}
.viewer.zoomed .viewer-nav {
  position: fixed;
}
/* « Placer la réserve » : à la couleur de la box (bleu Série box, vert Artist box) */
.btn-reserve {
  color: #fff;
  background: var(--sb);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 16px -6px var(--sb);
}
.btn-reserve:hover,
.btn-reserve:focus-visible {
  background: var(--sb-hover);
}
.btn-reserve.kind-spec {
  --sb: #3f6cc6;
  --sb-hover: #5481d8;
}
.btn-reserve.kind-artist {
  --sb: #2d8a66;
  --sb-hover: #3aa079;
}
/* Surplus de Série box : les séries proposées en livres */
.box-continue .bc-books {
  grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
  gap: 0.7rem;
  margin: 0.6rem 0;
}
.box-continue .bc-books .door-tile {
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.box-continue .bc-books .series-book {
  width: min(100%, 110px);
}
.box-continue .bc-books .door-tile:hover .series-book {
  transform: translateY(-3px);
}
.bc-tag {
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(14, 10, 24, 0.82);
  font-size: 0.68rem;
  white-space: nowrap;
  transform: translateX(-50%);
}
/* Récapitulatif : ranger par cadre, score ou ordre d'ouverture */
.sum-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0.8rem;
}
/* Pendant qu'on glisse une œuvre, les boutons du bas s'effacent derrière le dock */
body.dragging-works .opening .sum-actions {
  visibility: hidden;
}
/* Réglages : rayons immobiles */
:root[data-fx-spin='off'] .rays {
  animation: none;
}
/* Réglages : liste noire (syntaxe e621) */
.setting.blacklist-setting {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}
.blacklist-setting p {
  max-width: 62ch;
}
.blacklist-setting textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(var(--deep), 0.6);
  color: var(--ink);
  font: 500 0.9rem/1.45 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  resize: vertical;
}
.blacklist-setting code {
  padding: 0 0.3em;
  border-radius: 4px;
  background: rgba(var(--light), 0.1);
  font-size: 0.92em;
}
.bl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}
/* ===== 0.24 ===== */
/* Dock des séries (galerie d'artiste, Mon musée) : les mêmes cases qu'au Catalogue */
.drag-slot.is-rate {
  min-width: 92px;
  gap: 4px;
}
.drag-slot.is-rate > span {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.drag-slot.is-rate b {
  font-weight: 700;
  white-space: nowrap;
}
/* Dock du Catalogue : des mots courts, des cases plus étroites */
.cat-dock-slot {
  min-width: 92px;
}
.cat-dock-slot span {
  white-space: nowrap;
}
/* Séries en petit (Catalogue et Séries liées) : la date seule, sans « Découverte le » */
:root:not([data-series-cat='big']) .cat-item.has-cover .cd-pre {
  display: none;
}
/* Séries liées d'une galerie d'artiste : les tuiles du Catalogue */
.related-series .related-cat {
  margin-top: 0.6rem;
}
/* Enchère : l'œuvre en grand dans le détail des offres */
.dialog.aud {
  width: min(620px, 100%);
}
.aud-works {
  gap: 0.6rem;
}
.aud-work {
  width: auto;
  height: 200px;
  aspect-ratio: var(--r, 1);
  max-width: 260px;
  border-radius: 8px;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
}
.aud-works.is-single {
  justify-content: center;
}
.aud-works.is-single .aud-work {
  height: min(46vh, 420px);
  max-width: 100%;
}
.aud-works.is-single .aud-work img {
  object-fit: contain;
}
/* « toi » bien aligné avec le nom */
.aud-who {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.aud-me {
  line-height: 1.5;
  font-size: 0.75rem;
}

/* ===== 0.24 ===== */
/* Portes réservées (amis, privée) : un petit badge sur la porte, pour le propriétaire */
.door-tile {
  position: relative;
}
.door-access {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: rgba(14, 10, 24, 0.82);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.door-access .icon {
  width: 13px;
  height: 13px;
}
.door-access.is-friends {
  color: #9fd8ff;
}
.door-access.is-private {
  color: #ffb4c2;
}
.fs-access {
  display: grid;
  gap: 0.45rem;
}
.fs-access .seg-btn .icon {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}
.pf-gift-note {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.pf-gift-note .icon {
  width: 15px;
  height: 15px;
}
/* Accueil : « Ouvrir le colis | ×10 | ×50 » et, en dessous, « Ouvrir une God box | ×10 », coupés comme
   les boutons de box des galeries ; les « ×10 » et « ×50 » n'apparaissent qu'avec assez de colis */
.home-actions {
  flex-direction: column;
  align-items: flex-start;
}
.split-btn.split-big {
  min-height: 54px;
  font-size: var(--s1);
}
.split-btn.split-big .sb-main {
  padding: 0.7em 1.2em 0.7em 1.6em;
}
.split-btn.split-big .sb-main:last-child {
  padding-right: 1.6em;
}
.split-btn.split-big .sb-side {
  min-width: 3.6em;
}
.split-btn .sb-side:not(:last-child) {
  border-radius: 0;
}
.split-btn.kind-parcel {
  --sb: var(--pink);
  --sb-hover: #ff74af;
  --sb-deep: var(--pink-deep);
}
.split-btn.kind-god {
  --sb: #f2c14e;
  --sb-hover: #f7d272;
  --sb-deep: #b88a1f;
  color: var(--paper-ink);
}
.split-btn.kind-god .sb-side {
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.22);
}
.split-btn .sb-main:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.home-god {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.box-stock.kind-god svg {
  color: #f2c14e;
}
/* Mode lecture : les vidéos se lisent sur place, comme les images */
.reader-page video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
}
.strip-item video {
  display: block;
  width: min(calc((max(300px, var(--sh)) - 1.7rem - 14px) * var(--r)), calc(calc(100 * var(--vw)) - 3rem));
  height: auto;
  aspect-ratio: var(--r);
  max-width: none;
  background: #000;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
.reader-page.is-blurred video,
.strip-item.is-blurred video {
  filter: blur(28px) brightness(0.7);
}

/* ===== 0.25 ===== */
/* Paramètres : liste noire et trigger warnings, avec « + Filtre » et « + Tag » */
.fb-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.fb-tag-row {
  position: relative;
  flex: 1 1 220px;
  max-width: 340px;
}
.fb-tag-row .input {
  width: 100%;
  min-height: 34px;
  padding: 0.35rem 0.7rem;
}
.fb-tag-row .suggest {
  z-index: 30;
}
.fb-syntax {
  margin: -0.2rem 0.3rem 0.4rem;
}
.fb-syntax code {
  padding: 0 0.3em;
  border-radius: 4px;
  background: rgba(var(--light), 0.1);
  font-size: 0.92em;
}
.ctx-menu small {
  margin-left: 0.3rem;
  color: var(--muted);
  font-weight: 500;
}
/* Voile des trigger warnings : ⚠ et ce que contient l'œuvre */
.tw-veil b {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 90%;
  text-align: center;
}
.tw-sign {
  color: #ffcf5a;
  font-size: 1.1em;
}
.piece.is-blurred .tw-veil {
  cursor: pointer;
}
/* Profil : la photo ouvre l'œuvre ; le petit bouton (à soi) la change */
.pf-avatar-art {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: zoom-in;
}
button.pf-avatar-edit {
  border: 0;
  cursor: pointer;
}
/* Une grande œuvre (ouverture, récapitulatif) se floute plus fort : on ne doit rien deviner */
.show .piece.is-blurred .frame img,
.wall .piece.is-blurred .frame img {
  filter: blur(24px) saturate(0.7) brightness(0.85);
}
.show .piece.is-blurred .frame img {
  filter: blur(46px) saturate(0.7) brightness(0.75);
}
/* Un long menu (les familles de « + Filtre ») défile au lieu de sortir de l'écran */
.ctx-menu {
  max-height: calc(calc(100 * var(--dvh, 1vh)) - 16px);
  overflow-y: auto;
}
/* Liste noire : « 20 arts retirés » en petit sous le compte, qui remonte un peu */
.cat-item .top small.has-removed {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  margin-top: -0.25rem;
  line-height: 1.15;
}
.cat-item .top small .cat-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.removed-note {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
}
.pl-count {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.progress-label:has(.removed-note) {
  margin-top: -0.3rem;
}
/* Livraison : les œuvres revenues (liste noire de l'ami), avec leurs tags en étiquettes */
.rf-dialog {
  width: min(560px, 100%);
}
.rf-lede {
  margin-bottom: 0.8rem;
}
.rf-list {
  display: grid;
  gap: 0.7rem;
  max-height: min(52vh, 460px);
  margin: 0 0 0.8rem;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.rf-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.6rem;
  border-radius: 12px;
  background: var(--panel-2);
}
.rf-art {
  flex: none;
  width: min(150px, 38%);
  aspect-ratio: var(--r, 1);
  max-height: 200px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px var(--ft, #666), 0 8px 18px -10px rgba(0, 0, 0, 0.8);
}
.rf-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rf-art.is-blurred img {
  filter: blur(14px);
}
.rf-info {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.rf-info small {
  color: var(--muted);
}

/* ═════════════ 0.27 : quêtes, bonus de connexion, série ═════════════ */
.top-quests .pip.gold,
.home-quests .pip.gold {
  color: var(--paper-ink);
  background: #f2c14e;
}
/* Accueil : où en sont les quêtes du jour */
.home-quests {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 460px;
  margin-top: 1.2rem;
  padding: 0.7rem 1rem 0.7rem 0.75rem;
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
  background: rgba(var(--panel-rgb), 0.85);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent);
  transition: background 0.15s;
}
.home-quests.has-ready {
  box-shadow: inset 0 0 0 1.5px rgba(242, 193, 78, 0.7), 0 0 22px -8px rgba(242, 193, 78, 0.7);
}
@media (hover: hover) {
  .home-quests:hover {
    background: rgba(var(--hover-rgb), 0.95);
  }
}
.hq-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--paper-ink);
  background: #f2c14e;
}
.hq-icon svg {
  width: 24px;
  height: 24px;
}
.hq-text {
  display: grid;
  min-width: 0;
  flex: 1;
}
.hq-text small {
  color: var(--muted);
}
.hq-flame,
.sk-flame {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: #9a8fb0;
  font-weight: 800;
}
.hq-flame svg {
  width: 22px;
  height: 22px;
}
.hq-flame.is-lit,
.sk-flame.is-lit {
  color: #ff9a3c;
  filter: drop-shadow(0 0 6px rgba(255, 140, 50, 0.6));
}
.home-quests .pip {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 1.5em;
  padding: 0.05em 0.4em;
  border-radius: 999px;
  font-size: var(--s-1);
  font-weight: 800;
  text-align: center;
}

/* Bonus de connexion : 7 cases, la 7e (God box) plus grande */
.q-login {
  margin-bottom: 2rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 18px;
  background: rgba(var(--panel-rgb), 0.6);
}
.q-login.is-ready {
  box-shadow: inset 0 0 0 1.5px rgba(242, 193, 78, 0.55);
}
.login-cal {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lc-day {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.45rem;
  min-height: 92px;
  padding: 0.6rem 0.55rem;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}
.lc-n {
  font-size: var(--s-1);
  font-weight: 800;
  color: var(--muted);
}
.lc-rw {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: var(--s-1);
}
.lc-day.is-taken {
  opacity: 0.55;
}
.lc-day.is-today {
  background: color-mix(in srgb, #f2c14e 18%, var(--panel));
  box-shadow: inset 0 0 0 2px #f2c14e, 0 0 18px -6px rgba(242, 193, 78, 0.8);
}
.lc-day.is-today .lc-n {
  color: #ffe3a0;
}
.lc-day.is-big {
  background: linear-gradient(160deg, color-mix(in srgb, #f7d774 22%, var(--panel)), var(--panel));
}
.lc-check {
  position: absolute;
  right: 0.45rem;
  bottom: 0.4rem;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--paper-ink);
  background: #8fd9b0;
}
.lc-check svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .login-cal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lc-day.is-big {
    grid-column: span 1;
  }
  .lc-day {
    min-height: 78px;
  }
}

/* Quêtes du jour (et série à côté), quêtes de la semaine */
.q-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 960px) {
  .q-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}
.q-weekly {
  margin-top: 2rem;
}
.q-reset b {
  color: var(--ink);
}
.q-row .ach-reward {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.medal.q-t0,
.q-t0 .medal:not(.t-done) { --mc: #8fd9b0; }
.q-t1 .medal:not(.t-done) { --mc: #7fb2ff; }
.q-t2 .medal:not(.t-done) { --mc: #ff8fc4; }
.q-t9 .medal:not(.t-done) { --mc: #f2c14e; }
.q-tag.t-1 { --tc: #8fd9b0; }
.q-tag.t-2 { --tc: #7fb2ff; }
.q-tag.t-3 { --tc: #ff8fc4; }
.q-reroll {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: var(--panel-2);
  cursor: pointer;
}
.q-reroll svg {
  width: 17px;
  height: 17px;
}
@media (hover: hover) {
  .q-reroll:hover {
    color: var(--ink);
    background: var(--line);
  }
}
.q-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
}
.q-hint .icon {
  width: 15px;
  height: 15px;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .q-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .q-row .ach-reward {
    grid-column: 2;
  }
}

/* Coffres du jour et de la semaine */
.q-chest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-top: 0.8rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border-radius: 16px;
  background: linear-gradient(120deg, color-mix(in srgb, #f2c14e 10%, var(--panel)), var(--panel));
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.3);
}
.q-chest.is-ready {
  box-shadow: inset 0 0 0 2px #f2c14e, 0 0 26px -8px rgba(242, 193, 78, 0.85);
}
.q-chest.is-ready .qc-art {
  animation: qc-wiggle 2.4s ease-in-out infinite;
}
.q-chest.is-locked .qc-art {
  filter: grayscale(0.7) brightness(0.8);
}
.q-chest.is-claimed {
  opacity: 0.6;
}
.qc-art {
  position: relative;
  display: block;
  width: 78px;
  aspect-ratio: 10 / 9;
  container-type: inline-size;
}
.qc-art .parcel-label small,
.qc-art .stk-star,
.qc-art .stk-uwu,
.qc-art .stk-heart {
  display: none;
}
.qc-body {
  display: grid;
  gap: 0.15rem;
}
.qc-head > b {
  font-family: var(--display);
  font-size: var(--s1);
}
@keyframes qc-wiggle {
  0%, 80%, 100% { transform: rotate(0); }
  84% { transform: rotate(-6deg); }
  88% { transform: rotate(5deg); }
  92% { transform: rotate(-3deg); }
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .q-chest {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .q-chest.is-ready .qc-art {
    animation: none;
  }
}

/* Série */
.q-streak {
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 18px;
  background: rgba(var(--panel-rgb), 0.6);
}
.q-streak h2 {
  margin: 0 0 0.8rem;
}
.sk-main {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.sk-flame {
  flex: none;
  gap: 0;
  font-family: var(--display);
  font-size: var(--s4);
  line-height: 1;
}
.sk-flame svg {
  width: 52px;
  height: 52px;
}
.sk-flame.is-off {
  opacity: 0.55;
}
.sk-say {
  display: grid;
  gap: 0.25rem;
}
.sk-broken {
  color: #ffb3b3;
}
.sk-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #9ee7ff;
}
.sk-saved .icon {
  width: 14px;
  height: 14px;
}
.sk-jokers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 1rem 0 0.9rem;
}
.sk-joker {
  color: #6a5f85;
}
.sk-joker.on {
  color: #9ee7ff;
  filter: drop-shadow(0 0 5px rgba(158, 231, 255, 0.55));
}
.sk-joker svg {
  width: 24px;
  height: 24px;
}
.sk-jokers .fine {
  flex: 1 1 180px;
  margin: 0;
}
.sk-track {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sk-track li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: var(--panel);
}
.sk-track li > b {
  min-width: 3.2em;
  font-family: var(--display);
}
.sk-track li.is-done {
  opacity: 0.55;
}
.sk-track li.is-done > b::after {
  content: ' ✓';
  color: #8fd9b0;
}
.sk-track li.is-next {
  box-shadow: inset 0 0 0 1.5px #ff9a3c;
}
.sk-rw {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: var(--s-1);
}
.sk-pending {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.sk-best {
  margin: 0.8rem 0 0;
}
.rw-frame {
  --rw: #9fd86a;
}
.rw-frame .icon {
  width: 14px;
  height: 14px;
}

/* Fenêtre du bonus de connexion (au premier passage de la journée) */
.login-dialog {
  width: min(760px, calc(100 * var(--vw) - 32px));
}
.login-dialog .login-cal {
  margin: 0.8rem 0 1rem;
}
.skin-earn .icon {
  width: 15px;
  height: 15px;
  color: #ff9a3c;
}
.sr-resold {
  margin: 0.3rem 0 0;
}

.rw-chip.rw-named {
  gap: 0.25rem;
  font-weight: 600;
}
.rw-chip.rw-named b {
  font-weight: 800;
}
.lc-rw {
  flex-direction: column;
  align-items: flex-start;
}
.lc-art {
  position: relative;
  display: block;
  width: min(86px, 70%);
  aspect-ratio: 10 / 9;
  margin: 0.1rem auto 0;
  container-type: inline-size;
}
.lc-art .parcel-label small,
.lc-art .stk-star,
.lc-art .stk-uwu,
.lc-art .stk-heart {
  display: none;
}
.q-daily .ach-list {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
}
.q-daily .ach-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .q-daily .ach-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
.q-weekly .ach-row .ach-reward,
.q-row .ach-reward {
  flex-wrap: wrap;
}
.btn-gold .gain,
.btn-gold .rw-chip,
.btn-gold .coins-amount b {
  color: var(--paper-ink);
  opacity: 1;
}
.btn-gold .rw-chip.rw-box .icon {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}
.lc-day {
  min-width: 0;
}
.lc-rw .rw-chip {
  white-space: normal;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .login-cal {
    gap: 0.35rem;
  }
  .lc-day {
    padding: 0.5rem 0.4rem;
  }
  .lc-rw {
    font-size: 0.72rem;
  }
}
/* Barre du haut sur téléphone : logo, PinterCoin, Quêtes, Amis, Réglages tiennent sur une ligne */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .topbar {
    gap: 0.35rem;
  }
  .topbar .top-friends {
    width: 36px;
    height: 36px;
  }
  .top-settings {
    margin-left: 0;
  }
}
@media (max-width: 380px) {
  .topbar .logo {
    font-size: var(--s1);
  }
}
.lc-check {
  top: 0.4rem;
  bottom: auto;
  width: 18px;
  height: 18px;
}
.lc-check svg {
  width: 12px;
  height: 12px;
}

/* ═════════════ 0.28 : niveaux, quêtes aérées, succès dans les Quêtes ═════════════ */
/* Badge de niveau : un petit écusson rond, couleur du palier */
.lvl-badge {
  --lb: #c98b5a;
  --lb2: #8a5530;
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 1.75em;
  height: 1.75em;
  margin-left: 0.4em;
  padding: 0 0.3em;
  border-radius: 999px;
  color: #1c1208;
  font-family: var(--sans, inherit);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: 0.15em;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lb) 55%, #fff) 0 18%, var(--lb) 45%, var(--lb2) 100%);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.lvl-badge b {
  font-weight: 800;
}
.lvl-badge.t-silver { --lb: #d6dbe4; --lb2: #8790a0; }
.lvl-badge.t-gold { --lb: #f7d774; --lb2: #b6861f; }
.lvl-badge.t-platinum { --lb: #9fe7e0; --lb2: #3f8f9a; }
.lvl-badge.t-diamond { --lb: #d9b8ff; --lb2: #6c4bd1; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35), 0 0 10px rgba(190, 150, 255, 0.7); }
.lvl-badge.is-big {
  min-width: 2.4em;
  height: 2.4em;
  font-size: 1rem;
}
.top-profile .lvl-badge {
  margin-left: 0.15em;
}
.nav-lvl {
  display: none;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .nav-profil {
    position: relative;
  }
  .nav-lvl {
    position: absolute;
    top: 2px;
    right: 50%;
    display: block;
    margin-right: 8px;
  }
  .nav-lvl .lvl-badge {
    margin: 0;
    font-size: 0.6rem;
  }
}
.pf-id h1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
}
.vh-id h1,
.fc-name {
  display: inline-flex;
  align-items: center;
}
.player-link .lvl-badge {
  font-size: 0.62rem;
}

/* Pastille d'XP dans les récompenses */
.rw-chip.rw-xp {
  --rw: #b9a6ff;
  gap: 0.2rem;
  color: #d9cfff;
  font-weight: 700;
}
.btn .rw-chip.rw-xp {
  color: inherit;
}

/* Carte du niveau (haut des Quêtes, profil) */
.lvl-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem 1.4rem;
  margin: 0 0 2.4rem;
  padding: 1.1rem 1.4rem;
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(185, 166, 255, 0.16), transparent 55%),
    rgba(var(--panel-rgb), 0.7);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}
.lvl-card > .lvl-badge {
  margin: 0;
  font-size: 1.35rem;
}
.lvl-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.lvl-top b {
  font-family: var(--display);
  font-size: var(--s2);
}
.lvl-xp {
  color: var(--muted);
  font-size: var(--s-1);
  font-variant-numeric: tabular-nums;
}
.lvl-bar {
  height: 10px;
  margin: 0.5rem 0 0.6rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
}
.lvl-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8f7bff, #d9b8ff);
  box-shadow: 0 0 12px rgba(185, 166, 255, 0.7);
}
.lvl-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.lvl-next .fine {
  margin: 0;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .lvl-card {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1rem;
  }
}

/* Page des Quêtes : plus d'air entre les blocs */
.q-page {
  display: grid;
  gap: 0;
}
.q-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: 1.6rem;
}
.q-head h1 {
  margin: 0;
}
.q-all {
  margin-left: auto;
}
.q-tabs {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(var(--panel-rgb), 0.8);
}
.q-tabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}
.q-tabs a[aria-current] {
  color: var(--paper-ink);
  background: var(--ink);
}
.q-tabs .icon {
  width: 17px;
  height: 17px;
}
.q-tabs .pip {
  min-width: 1.4em;
  padding: 0 0.35em;
  border-radius: 999px;
  color: var(--paper-ink);
  background: #f2c14e;
  font-size: var(--s-1);
  text-align: center;
}
.q-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.q-sec-head h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
}
.q-sec-head h2 > .icon {
  width: 24px;
  height: 24px;
  color: #f2c14e;
}
.q-count {
  color: var(--muted);
  font-family: var(--sans, inherit);
  font-size: var(--s0);
  font-weight: 600;
}
.q-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.q-reset .icon {
  width: 15px;
  height: 15px;
}
.q-login {
  margin-bottom: 2.6rem;
  padding: 1.3rem 1.4rem 1.4rem;
}
.q-cols {
  gap: 2rem;
  margin-bottom: 2.6rem;
}
.q-weekly {
  margin-top: 0;
}

/* Calendrier illustré */
.login-cal {
  gap: 0.7rem;
}
.lc-day {
  justify-items: center;
  align-content: start;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.7rem 0.4rem 0.75rem;
  text-align: center;
}
.lc-n {
  justify-self: start;
}
.rw-art {
  position: relative;
  display: block;
  width: min(64px, 80%);
  aspect-ratio: 10 / 9;
  container-type: inline-size;
}
.rw-art .parcel-label small,
.rw-art .stk-star,
.rw-art .stk-uwu,
.rw-art .stk-heart {
  display: none;
}
.rw-art.rw-coins {
  display: grid;
  place-items: center;
  color: #f2c14e;
}
.rw-art.rw-coins svg {
  position: absolute;
  width: 44%;
  height: 44%;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}
.rw-art.rw-coins svg:nth-child(1) { transform: translate(-28%, 14%); }
.rw-art.rw-coins svg:nth-child(2) { transform: translate(26%, 18%); }
.rw-art.rw-coins svg:nth-child(3) { transform: translate(0, -16%); }
.lc-day.is-big .rw-art {
  width: min(96px, 80%);
}
.lc-short {
  font-size: var(--s-1);
  font-weight: 700;
}
.lc-art {
  display: none;
}

/* Quêtes : une rangée aérée, une icône par genre de quête */
.q-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.q-list-week {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
}
.q-item {
  --qc: #8fd9b0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  background: rgba(var(--panel-rgb), 0.75);
}
.q-t1 { --qc: #7fb2ff; }
.q-t2 { --qc: #ff8fc4; }
.q-t9 { --qc: #f2c14e; }
.q-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--qc);
  background: color-mix(in srgb, var(--qc) 16%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--qc) 45%, transparent);
}
.q-icon svg {
  width: 24px;
  height: 24px;
}
.q-item.is-done {
  opacity: 0.55;
}
.q-item.is-done .q-icon {
  --qc: #8fd9b0;
}
.q-item.is-ready {
  box-shadow: inset 0 0 0 1.5px #f2c14e, 0 0 20px -10px rgba(242, 193, 78, 0.9);
}
.q-body {
  display: grid;
  gap: 0.45rem;
}
.q-text {
  font-weight: 700;
  line-height: 1.3;
}
.q-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.q-progress .bar {
  flex: 1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
}
.q-progress .bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--qc);
}
.q-progress span {
  color: var(--muted);
  font-size: var(--s-1);
  font-variant-numeric: tabular-nums;
}
.q-reward {
  display: grid;
  justify-items: end;
  gap: 0.4rem;
}
.q-prize {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
  font-size: var(--s-1);
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .q-item {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.8rem;
  }
  .q-reward {
    grid-column: 2;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
  }
}

/* Coffres : les étapes en pastilles */
.q-chest {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem 0.9rem 0.9rem;
}
.qc-art {
  width: 72px;
}
.qc-steps,
.hq-dots {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.qc-steps i,
.hq-dots i {
  width: 22px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.qc-steps i.on,
.hq-dots i.on {
  background: #f2c14e;
  box-shadow: 0 0 8px rgba(242, 193, 78, 0.6);
}
.hq-dots i {
  width: 16px;
  height: 6px;
}

/* Jours d'affilée : une route illustrée */
.q-streak {
  padding: 1.3rem 1.3rem 1.4rem;
}
.q-streak h2 {
  margin: 0;
}
.sk-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}
.sk-jokers {
  margin: 0;
  gap: 0.2rem;
}
/* Profil : vers les succès */
.pf-ach-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  color: var(--ink);
  text-decoration: none;
  background: rgba(var(--panel-rgb), 0.75);
}
.pal-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--paper-ink);
  background: #f2c14e;
}
.pal-icon svg {
  width: 24px;
  height: 24px;
}
.pal-text {
  display: grid;
  flex: 1;
}
.pal-text small {
  color: var(--muted);
}
.pal-go svg {
  width: 20px;
  height: 20px;
}
.pf-ach-link .pip {
  min-width: 1.5em;
  padding: 0.05em 0.4em;
  border-radius: 999px;
  color: var(--paper-ink);
  background: #f2c14e;
  font-weight: 800;
  text-align: center;
}
@media (hover: hover) {
  .pf-ach-link:hover {
    background: rgba(var(--hover-rgb), 0.95);
  }
}

/* Fenêtre du bonus de connexion : une image, le gain, 7 pastilles, un bouton */
.login-dialog {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  width: min(420px, calc(100 * var(--vw) - 32px));
  padding: 1.6rem 1.4rem 1.3rem;
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 22%, rgba(242, 193, 78, 0.28), transparent 70%),
    var(--panel);
}
.ld-x {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.ld-x svg {
  width: 18px;
  height: 18px;
}
.ld-day {
  margin: 0;
  font-family: var(--display);
  font-size: var(--s3);
}
.ld-hero .rw-art {
  width: 150px;
  animation: ld-float 3s ease-in-out infinite;
}
.ld-hero.is-god .rw-art {
  width: 180px;
}
@keyframes ld-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ld-hero .rw-art {
    animation: none;
  }
}
.ld-gain {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}
.login-cal.is-compact {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  width: 100%;
  margin: 0.2rem 0;
}
.login-cal.is-compact .lc-day {
  min-height: 0;
  padding: 0.35rem 0.1rem;
  border-radius: 10px;
}
.login-cal.is-compact .lc-n {
  justify-self: center;
  font-size: 0.7rem;
}
.login-cal.is-compact .rw-art {
  width: 80%;
}
.login-cal.is-compact .lc-short {
  display: none;
}
.login-cal.is-compact .lc-check {
  top: auto;
  bottom: -5px;
  right: 50%;
  transform: translateX(50%);
  width: 16px;
  height: 16px;
}
.ld-take {
  width: 100%;
  padding-block: 0.8rem;
  font-size: var(--s1);
}
.ld-quests {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}
.ld-quests .icon {
  width: 16px;
  height: 16px;
}

/* « Niveau 12 ! » */
.lvlup-dialog {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  width: min(360px, calc(100 * var(--vw) - 32px));
  padding: 2rem 1.4rem 1.4rem;
  overflow: hidden;
  text-align: center;
}
.lvlup-dialog h2 {
  margin: 0;
}
.lvlup-dialog .lvl-badge.is-big {
  margin: 0;
  font-size: 2rem;
  animation: lvl-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.lvlup-burst {
  position: absolute;
  inset: -40% -40% auto;
  height: 120%;
  background: repeating-conic-gradient(from 0deg, rgba(185, 166, 255, 0.18) 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(circle at 50% 40%, #000 0 20%, transparent 55%);
  mask: radial-gradient(circle at 50% 40%, #000 0 20%, transparent 55%);
  animation: lvl-spin 18s linear infinite;
  pointer-events: none;
}
.lvlup-gain {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}
.lvlup-dialog .btn {
  width: 100%;
}
@keyframes lvl-pop {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes lvl-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lvlup-burst,
  .lvlup-dialog .lvl-badge.is-big {
    animation: none;
  }
}
.pf-inv + .lvl-card,
.pf-card + .lvl-card {
  margin-top: 1.6rem;
  margin-bottom: 0.4rem;
}
/* Petites box (route des jours d'affilée, calendrier compact) : sans leur étiquette */
.sk-art .parcel-label,
.login-cal.is-compact .rw-art .parcel-label {
  display: none;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .fc-links {
    flex-wrap: wrap;
  }
}
.q-count {
  white-space: nowrap;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .q-sec-head h2,
  .q-streak h2 {
    font-size: var(--s2);
  }
  .q-login {
    padding: 1rem;
  }
}
/* Jours d'affilée : un titre comme les autres blocs (alignés), la récompense en carte */
.q-streak-col {
  min-width: 0;
}
.sk-title {
  font-family: var(--display);
  font-size: var(--s2);
}
.q-cols .q-sec-head {
  min-height: 2.6rem;
}
.sk-claim {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  background: linear-gradient(120deg, color-mix(in srgb, #ff9a3c 14%, var(--panel)), var(--panel));
  box-shadow: inset 0 0 0 1.5px rgba(255, 154, 60, 0.6), 0 0 20px -10px rgba(255, 154, 60, 0.9);
}
.sk-claim .rw-art {
  width: 52px;
}
.sk-claim .rw-art .parcel-label {
  display: none;
}
.skc-body {
  display: grid;
  gap: 0.3rem;
}
.skc-body > b {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--display);
}
.skc-body > b .icon {
  width: 16px;
  height: 16px;
  color: #ff9a3c;
}
.skc-body .q-prize {
  justify-content: flex-start;
}
/* ×20 : réservé aux abonnés, une touche dorée */
.split-btn .sb-side.sb-sub {
  position: relative;
}
.split-btn .sb-side.sb-sub::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f7d774;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.25), 0 0 6px rgba(247, 215, 116, 0.9);
}
/* Joueur dans une liste (recherche, demandes) : grande vignette, pseudo et badge de niveau sur une ligne */
.com-user {
  gap: 1rem;
  padding: 0.8rem 1rem;
}
.com-user.is-gold .avatar-lg {
  box-shadow: 0 0 0 3px #f2c14e;
}
.cu-main {
  gap: 0.2rem;
}
.cu-name {
  display: flex;
  align-items: center;
  min-width: 0;
}
.cu-name b {
  overflow: hidden;
  font-size: var(--s1);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cu-name .lvl-badge {
  flex: none;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .com-user {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .com-user .cu-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
/* « Qui peut entrer » : les trois choix se partagent toute la largeur */
.fs-access .seg {
  display: flex;
  width: 100%;
}
.fs-access .seg-btn {
  flex: 1 1 0;
  min-width: 0;
}
/* Bannière « Une God box parmi tes colis ! » (tri par cadre) : plus longue, un peu plus petite */
.godpack-banner.is-long b {
  max-width: 92vw;
  font-size: clamp(1.8rem, 6vw, 3.6rem);
  text-align: center;
  text-wrap: balance;
}
/* Identifiant public après le pseudo (« #7K2Q ») */
.u-tag {
  flex: none;
  margin-left: 0.3em;
  color: var(--muted);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
h1 .u-tag {
  font-size: 0.42em;
  align-self: center;
}
.player-link .u-tag {
  font-size: 0.78em;
}
/* Barre du haut sur téléphone : logo et PinterCoin plus compacts, pour laisser de la marge aux icônes */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .topbar .logo {
    font-size: var(--s1);
  }
  .topcoins {
    padding: 0.25rem 0.55rem;
  }
  .topbar .top-friends {
    width: 34px;
    height: 34px;
  }
  .topbar .top-friends svg {
    width: 20px;
    height: 20px;
  }
}
/* 0.29 : quêtes du jour et de la semaine côte à côte (elles vont ensemble), jours d'affilée dessous */
.q-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.q-list-week {
  grid-template-columns: minmax(0, 1fr);
}
.q-streak-col {
  margin-bottom: 1rem;
}
.q-streak-col .q-streak {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 1.2rem 2rem;
}
.q-streak-col .sk-main {
  margin-bottom: 0;
}
.q-streak-col .sk-pending {
  grid-column: 1 / -1;
}
@media (max-width: 960px) {
  .q-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .q-streak-col .q-streak {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 0.30 : ton identifiant complet, en petit sur ton profil */
.pf-tag {
  color: var(--muted);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.78em;
  letter-spacing: 0.03em;
  opacity: 0.75;
}
.aucd-extra {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.aucd-extra .icon {
  width: 16px;
  height: 16px;
}
/* 0.32 : quêtes du jour et de la semaine chacune dans son cadre */
.q-cols > section {
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid rgba(185, 166, 255, 0.22);
  border-radius: 20px;
  background: rgba(var(--panel-rgb), 0.35);
}
.q-cols > .q-daily {
  border-color: rgba(242, 193, 78, 0.3);
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .q-cols > section {
    padding: 0.9rem 0.8rem 1rem;
  }
}
/* 0.32 : jours d'affilée en plan de métro, une station par jour (14 jours, la route avance avec la
   série) : pastille pleine = un cadeau, pastille vide = rien ce jour-là */
.sk-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}
.sk-metro {
  --line: rgba(185, 166, 255, 0.35);
  --on: #ff9a3c;
  display: grid;
  grid-template-columns: repeat(var(--n, 14), minmax(44px, 1fr));
  min-width: calc(var(--n, 14) * 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.st {
  position: relative;
  display: grid;
  grid-template-rows: 46px 24px auto auto;
  justify-items: center;
  align-items: center;
}
/* La ligne : un segment par station, posé au niveau des pastilles */
.st::before {
  content: '';
  position: absolute;
  top: calc(46px + 12px - 2px);
  left: 0;
  right: 0;
  height: 4px;
  background: var(--line);
}
.st:first-child::before {
  left: 50%;
}
.st:last-child::before {
  right: 0;
  background: linear-gradient(90deg, var(--line), transparent);
}
.st.is-done::before {
  background: var(--on);
}
.st.is-now::before {
  background: linear-gradient(90deg, var(--on) 50%, var(--line) 50%);
}
.st-gift {
  display: grid;
  place-items: end center;
  width: 38px;
  height: 46px;
  padding-bottom: 4px;
}
.st-gift .rw-art {
  width: 100%;
}
.st-gift .parcel-label {
  display: none;
}
.st-stop {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 24px;
}
.st-dot {
  width: 11px;
  height: 11px;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: var(--panel, #2a2140);
}
.st.is-gift .st-dot {
  width: 18px;
  height: 18px;
  border-color: #d9cfff;
  background: #d9cfff;
}
.st.is-done .st-dot {
  border-color: var(--on);
}
.st.is-done.is-gift .st-dot {
  background: var(--on);
}
.st.is-done .st-gift {
  opacity: 0.4;
}
.st.is-next .st-dot {
  box-shadow: 0 0 0 4px rgba(255, 154, 60, 0.25), 0 0 14px rgba(255, 154, 60, 0.7);
  border-color: var(--on);
}
.st.is-next .st-gift {
  filter: drop-shadow(0 0 8px rgba(255, 154, 60, 0.6));
}
.st-flame {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--on);
  color: #2a1a10;
  box-shadow: 0 0 12px rgba(255, 154, 60, 0.8);
}
.st-flame svg {
  width: 16px;
  height: 16px;
}
.st-day {
  min-height: 1.2em;
  margin-top: 0.25rem;
  font-family: var(--display);
  font-size: var(--s-1);
  white-space: nowrap;
}
.st.is-done .st-day {
  color: #ffcf7a;
}
.st-what {
  min-height: 1.1em;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
/* 0.32 : parrainage dans les Paramètres */
.ref-setting h2 .icon {
  width: 18px;
  height: 18px;
  margin-right: 0.3rem;
  color: #f2c14e;
  vertical-align: -3px;
}
.ref-count {
  margin-top: 0.35rem !important;
}
/* 0.32 : jeton des œuvres obtenues par box (revente à 10 %) : vert Artist box, bleu Série box ;
   le bouton Vendre prend la même couleur (jaune pour une œuvre de colis ou de God box) */
.boxed-chip {
  --bx: 95, 214, 138;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem 0.12rem 0.4rem;
  border: 1px solid rgba(var(--bx), 0.45);
  border-radius: 999px;
  background: rgba(var(--bx), 0.12);
  color: rgb(var(--bx));
  font-weight: 600;
  white-space: nowrap;
}
.boxed-chip.is-spec {
  --bx: 111, 176, 255;
}
.boxed-chip .icon {
  width: 14px;
  height: 14px;
}
.sr-resold:has(.boxed-chip),
.aud-boxed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}
.boxed-note {
  font-size: 0.82em;
  font-weight: 600;
}
.boxed-note.is-artist {
  color: #5fd68a;
}
.boxed-note.is-spec {
  color: #6fb0ff;
}
.sr-sell.is-gold {
  border-color: rgba(242, 193, 78, 0.6);
  color: #f2c14e;
}
.sr-sell.is-artist {
  border-color: rgba(95, 214, 138, 0.6);
  color: #5fd68a;
}
.sr-sell.is-spec {
  border-color: rgba(111, 176, 255, 0.6);
  color: #6fb0ff;
}
.sr-sell.is-gold:hover {
  background: rgba(242, 193, 78, 0.12);
}
.sr-sell.is-artist:hover {
  background: rgba(95, 214, 138, 0.12);
}
.sr-sell.is-spec:hover {
  background: rgba(111, 176, 255, 0.12);
}
/* 0.32 : Comment jouer, l'esprit du jeu d'abord, puis ce qu'on peut faire (sans étapes) */
.howto-intro {
  max-width: 820px;
  margin: 0 0 1.4rem;
  padding: 1.3rem 1.5rem;
  border-radius: 20px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 122, 182, 0.16), transparent 60%),
    var(--panel);
}
.howto-intro h2 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: var(--s2);
}
.howto-intro p {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  line-height: 1.55;
}
.howto-intro p:last-child {
  margin-bottom: 0;
}
/* 0.34 : coffres sans cadenas, « Ouvert » (ou « Ouvrir ») à côté du nom, la récompense juste dessous */
.q-chest {
  grid-template-columns: auto minmax(0, 1fr);
}
.qc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.8rem;
}
.qc-head b {
  white-space: nowrap;
}
.qc-body .q-prize {
  justify-content: flex-start;
  margin-top: 0.35rem;
}
/* 0.35 : colis d'un ami ou enchère : une série reçue arrive comme une seule œuvre, un album */
.album-piece {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: 132px;
  padding: 0.7rem 0.6rem 0.8rem;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.35);
  color: var(--ink);
  text-align: center;
  touch-action: none;
  user-select: none;
}
.album-piece.big {
  width: min(320px, 72vw);
  padding: 1.1rem 1rem 1.2rem;
  border-radius: 20px;
}
/* Le livre : la couverture, une tranche à gauche et des pages qui dépassent à droite */
.ab-book {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 4px 10px 10px 4px;
  background: #e9dfc7;
  box-shadow: 4px 4px 0 -1px #d8cba8, 7px 7px 0 -2px #c9b98f, 0 12px 24px rgba(0, 0, 0, 0.4);
}
.ab-cover {
  position: absolute;
  inset: 0 3px 0 0;
  overflow: hidden;
  border-radius: 3px 9px 9px 3px;
  background: #2b2240;
  display: grid;
  place-items: center;
}
.ab-cover::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 9%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1) 70%, rgba(255, 255, 255, 0.12));
}
.ab-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-cover.is-blurred img {
  filter: blur(14px);
}
.ab-cover > svg {
  width: 40%;
  height: 40%;
  color: var(--muted);
}
.ab-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(242, 193, 78, 0.16);
  color: #f2c14e;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ab-tag .icon {
  width: 13px;
  height: 13px;
}
.ab-name {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album-piece.big .ab-name {
  font-size: 1.25rem;
  white-space: normal;
}
.ab-count {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.album-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.album-link:hover .album-piece {
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.5), 0 10px 30px rgba(0, 0, 0, 0.35);
}
/* 0.37 : grands paliers de succès (tous les Premiers pas, tout en Cuivre…, absolument tout) */
.ms-dialog {
  --ms: #f2c14e;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  width: min(420px, calc(100 * var(--vw) - 32px));
  padding: 2rem 1.4rem 1.4rem;
  overflow: hidden;
  text-align: center;
}
.ms-dialog.t-cuivre { --ms: #d98b5f; }
.ms-dialog.t-bronze { --ms: #c99a5b; }
.ms-dialog.t-argent { --ms: #cfd6e4; }
.ms-dialog.t-or { --ms: #f2c14e; }
.ms-dialog.is-final { --ms: #9fe6ff; }
.ms-dialog .lvlup-burst {
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ms) 28%, transparent) 0 10deg, transparent 10deg 20deg);
}
.ms-dialog h2 {
  position: relative;
  margin: 0;
  text-wrap: balance;
}
.ms-dialog > p {
  text-wrap: balance;
}
.ms-dialog > p,
.ms-dialog > .gift-chips {
  position: relative;
  margin: 0;
}
.ms-trophy {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ms) 70%, #fff), var(--ms) 60%, color-mix(in srgb, var(--ms) 60%, #000));
  color: #2a1d10;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ms) 25%, transparent), 0 0 40px color-mix(in srgb, var(--ms) 60%, transparent);
  animation: lvl-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.ms-trophy svg {
  width: 44px;
  height: 44px;
}
.ms-pack {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 122, 182, 0.18);
  color: #ff9cc8;
  font-weight: 800;
}
.ms-pack .icon {
  width: 16px;
  height: 16px;
}
.ms-dialog .btn {
  position: relative;
  width: 100%;
}

/* ═════════════ 0.38 : pastilles notées, encadré de galerie, « Retour à … » ═════════════ */
/* Fiche d'une œuvre : une pastille notée porte ses étoiles ou flammes */
.chip[data-mk-kind] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.chip[data-mk-kind] .star-row.mini svg {
  width: 12px;
  height: 12px;
}
.chip[data-mk-kind] .star-row.mini:not(.is-flame) svg {
  color: #f4c64e;
}
.chip[data-mk-kind] .star-row.mini.is-flame svg {
  color: #ff7a59;
}
.chip[data-mk-kind].is-dragged {
  opacity: 0.4;
}
@media (pointer: fine) {
  .sheet .chip[data-mk-kind] {
    cursor: grab;
  }
}
.modal.tag-dragging .tag-dock {
  translate: -50% 0;
  opacity: 1;
  pointer-events: auto;
}
.tag-dock {
  z-index: 5;
}

/* En-tête d'une galerie : étoiles et progression dans un encadré, doré quand tout est réuni */
.room-head-v2 .room-side {
  gap: 0.9rem;
  padding: 0.55rem 1rem 0.65rem 0.7rem;
  border-radius: 14px;
  background: rgba(var(--deep), 0.28);
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.14);
}
.room-head-v2 .room-side .room-stars {
  margin-bottom: 0;
}
.room-head-v2 .room-side.is-full {
  /* Comme une entrée terminée du Catalogue : panneau sombre teinté d'or, filet doré, barre dorée */
  background: linear-gradient(135deg, color-mix(in srgb, #f2c14e 30%, var(--panel)), color-mix(in srgb, #f2c14e 6%, var(--panel)) 55%, var(--panel) 85%);
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.55), 0 6px 18px -10px rgba(242, 193, 78, 0.55);
}
.room-side.is-full .pl-count,
.room-side.is-full .pl-count b {
  color: #f2c14e;
}
.room-side.is-full .bar {
  background: rgba(242, 193, 78, 0.18);
}
.room-side.is-full .progress.done .bar > i,
.room-side.is-full .bar > i {
  background: linear-gradient(90deg, #f2c14e, #ffe8a3);
}

/* « Retour à … » : à côté de « Galerie de l'artiste », à la taille du texte */
.room-kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.1em 0.7em 0.1em 0.45em;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--light), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--light), 0.16);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.12s;
}
.back-link:hover {
  background: rgba(var(--light), 0.18);
}
.back-link .icon {
  flex: none;
  width: 1em;
  height: 1em;
  rotate: 180deg;
}
.back-link span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Protections : « Seulement » ou « Sauf », un petit interrupteur raccordé au groupe (0.38.2) */
.gt-protect {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.gt-link {
  flex: none;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
}
.seg-pmode {
  flex: none;
}
.seg-pmode .seg-btn {
  padding-inline: 0.75rem;
}
.seg-pmode .seg-btn[aria-checked='true'] {
  background: var(--ink);
  color: rgb(var(--deep));
}
.seg-pmode .seg-btn[aria-checked='true'] + .seg-btn {
  box-shadow: none;
}
.seg-pmode [data-gt-mode='not'][aria-checked='true'] {
  background: #e5484d;
  color: #fff;
}
/* En mode « Sauf », les protections choisies sont barrées : on voit tout de suite ce qui est retiré */
.gt-protect.is-not .seg-protect .seg-btn[aria-pressed='true'] {
  position: relative;
}
.gt-protect.is-not .seg-protect .seg-btn[aria-pressed='true']::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: #e5484d;
  box-shadow: 0 0 0 1.5px rgb(var(--deep));
  translate: -50% -50%;
  rotate: -45deg;
  pointer-events: none;
}
@media (max-width: 420px) {
  .seg-pmode .seg-btn {
    padding-inline: 0.55rem;
  }
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  /* Au téléphone : le groupe prend toute la largeur, l'interrupteur garde la place de ses mots */
  .gt-protect {
    width: 100%;
  }
  .gt-protect .seg-protect {
    flex: 1 1 auto;
  }
  .gt-protect .seg-pmode .seg-btn {
    flex: none;
    padding-inline: 0.7rem;
  }
}

/* « Vendre une œuvre protégée ? » : ce qui la protège (0.38.3) */
.pz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.pz-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(var(--light), 0.08);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: var(--s-1);
  font-weight: 700;
}
.pz-chip .icon {
  width: 16px;
  height: 16px;
}
.pz-chip.p-star .icon {
  color: #f4c64e;
}
.pz-chip.p-door .icon {
  color: #e2b878;
}
.pz-chip.p-heart .icon {
  color: #ff5f73;
}
.pz-chip b {
  color: var(--muted);
}
.pz-text {
  display: block;
}

/* 0.38.5 : l'aperçu sous les œuvres du mur, sans flou (pas de filtre à recalculer en défilant) */
.frame img.lqip.lqip-wall {
  filter: none;
  transform: none;
}
.piece.unlit .frame img.lqip.lqip-wall {
  filter: brightness(0.16) saturate(0.35);
}
/* « Attention ! » : pourquoi cette œuvre compte (0.38.6) */
.pz-lines {
  display: grid;
  gap: 0.45rem;
  margin: 0.2rem 0 0.2rem;
  padding: 0;
  list-style: none;
}
.pz-line {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.pz-line .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
}
.pz-line.p-star .icon {
  color: #f4c64e;
}
.pz-line.p-door .icon {
  color: #e2b878;
}
.pz-line.p-heart .icon {
  color: #ff5f73;
}
.pz-line b {
  color: var(--ink);
}

/* ═════════════ 0.39 : téléphone, comme une app ═════════════ */
/* Le profil en haut à droite (sa photo, son niveau), la barre du bas garde 5 onglets ; les Paramètres
   s'ouvrent depuis le profil */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .topbar .top-profile {
    display: inline-flex;
    flex: none;
    margin-left: 0.1rem;
    padding: 0;
    gap: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  .topbar .top-profile .tp-name {
    display: none;
  }
  .topbar .top-profile .avatar-md {
    width: 36px;
  }
  .topbar .top-profile .lvl-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    margin: 0;
    font-size: 0.58rem;
  }
  .topbar .top-profile.is-gold .avatar-md {
    box-shadow: 0 0 0 2px #f2c14e, 0 0 12px -2px rgba(242, 193, 78, 0.7);
  }
  .topbar .top-profile[aria-current='page'] .avatar-md {
    box-shadow: 0 0 0 2px var(--paper);
  }
  .topbar .top-settings,
  .nav a.nav-profil {
    display: none;
  }
}
.pf-settings {
  display: none;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .pf-card {
    position: relative;
  }
  .pf-settings {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(var(--deep), 0.55);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink);
  }
  .pf-settings svg {
    width: 22px;
    height: 22px;
  }
}
/* Réglage sans effet sur cet appareil : grisé, avec un mot pour dire où il sert */
.setting.is-off .seg {
  opacity: 0.45;
  pointer-events: none;
}
.setting-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(var(--light), 0.1);
  color: var(--muted);
  font-family: var(--body);
  font-size: var(--s-1);
  font-weight: 700;
  vertical-align: middle;
}
/* « Succès débloqué » : une petite carte sur une ligne (icône, nom, gain), plus un bloc de texte qui se casse */
.toast.toast-ach {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  width: min(380px, calc(100 * var(--vw, 1vw) - 32px));
  padding: 0.55rem 0.9rem 0.55rem 0.55rem;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, #f2c14e 26%, var(--panel)), var(--panel) 75%);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(242, 193, 78, 0.6);
  font-weight: 400;
}
.toast.toast-ach .ta-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe8a3, #f2c14e 60%, #b7841b);
  box-shadow: 0 0 14px -2px rgba(242, 193, 78, 0.7);
}
.toast.toast-ach .ta-ic svg {
  width: 22px;
  height: 22px;
  color: #3a2706;
}
.toast.toast-ach .ta-txt {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}
.toast.toast-ach .ta-txt small {
  color: #f2c14e;
  font-size: var(--s-1);
  font-weight: 700;
}
.toast.toast-ach .ta-txt b {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.toast.toast-ach .gain {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Boutique au téléphone : deux articles par ligne, chacun en petite carte (boîte, nom, prix) */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .shop-item {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: center;
    gap: 0.45rem;
    padding: 0.8rem 0.6rem 0.9rem;
    border-radius: 16px;
    text-align: center;
  }
  .shop-art {
    width: min(118px, 78%);
  }
  .shop-info {
    display: grid;
    align-content: start;
    min-width: 0;
    height: 100%;
  }
  .shop-info h2 {
    margin: 0 0 0.2rem;
    font-size: var(--s1);
  }
  .shop-info p {
    display: -webkit-box;
    margin: 0 0 0.5rem;
    overflow: hidden;
    font-size: var(--s-1);
    line-height: 1.35;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .shop-info .shop-owned {
    -webkit-line-clamp: 2;
  }
  .shop-actions {
    flex-direction: column;
    align-items: stretch;
    align-self: end;
    gap: 0.4rem;
  }
  .shop-actions .btn {
    justify-content: center;
    width: 100%;
    min-height: 38px;
    padding: 0.35rem 0.5rem;
    font-size: var(--s-1);
  }
  .shop-info .fine {
    margin: 0.4rem 0 0;
    font-size: 0.72rem;
  }
}

/* ── Au doigt : sélection, glisser-déposer, menus ── */
/* Un appui long ne sélectionne pas le texte et n'ouvre pas le menu « Enregistrer l'image » */
.wall .piece,
.door-wrap,
.series-wrap,
.cat-item,
.vit-slot,
.chip[data-mk-kind],
.topbar,
.nav,
.select-bar,
.btn {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
img {
  -webkit-user-drag: none;
}
html {
  -webkit-tap-highlight-color: transparent;
}
a,
button,
.piece,
.seg-btn,
.chip {
  touch-action: manipulation; /* pas d'attente du double-tap : le toucher répond tout de suite */
}
/* La vignette qui suit le doigt pendant un glisser-déposer */
.touch-ghost {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1000;
  margin: 0 !important;
  opacity: 0.92;
  pointer-events: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  transition: none !important;
  animation: none !important;
}
body.touch-dragging {
  -webkit-user-select: none;
  user-select: none;
}
@media (max-width: 720px), (pointer: coarse) {
  /* Les cases où lâcher : en bas de l'écran, sur toute la largeur, par-dessus la barre d'onglets */
  .cat-dock {
    display: flex;
  }
  .drag-dock,
  .cat-dock,
  .tag-dock {
    left: 8px;
    right: 8px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 95;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    translate: 0 140%;
  }
  body.dragging-works .drag-dock,
  #cat.dragging .cat-dock,
  .modal.tag-dragging .tag-dock {
    translate: 0 0;
  }
  .drag-slot,
  .cat-dock-slot {
    flex: 1 1 58px;
    min-width: 0;
    padding: 9px 4px;
    font-size: 0.72rem;
  }
  .drag-slot small,
  .drag-count {
    display: none;
  }
  .drag-sep {
    display: none;
  }
}

/* Barre de sélection au téléphone : deux lignes serrées. En haut le nombre, « Tout », « Annuler » ;
   en bas les actions en icônes et « Vendre » */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .select-bar {
    justify-content: flex-start;
    gap: 8px 6px;
    padding: 8px 10px;
  }
  .select-bar::before {
    content: '';
    order: 3;
    flex-basis: 100%;
    height: 0;
  }
  .select-bar .sb-count {
    order: 0;
    flex: 1 1 auto;
    width: auto;
    text-align: left;
    font-size: var(--s-1);
  }
  .select-bar .sb-actions {
    display: contents;
  }
  .select-bar [data-sel-all] {
    order: 1;
  }
  .select-bar [data-sel-cancel] {
    order: 2;
  }
  .select-bar [data-sel-dups] {
    order: 2;
  }
  .select-bar .sb-sep {
    display: none;
  }
  .select-bar [data-sel-act] {
    order: 4;
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    min-height: 40px;
    padding-inline: 0.3rem;
  }
  .select-bar .sb-sell {
    order: 5;
    flex: 0 0 auto;
    padding-inline: 0.9rem;
  }
  .select-bar .btn-sm {
    font-size: var(--s-1);
  }
  body.has-select-bar main {
    padding-bottom: 11rem !important;
  }
}
@media (max-width: 720px), (pointer: coarse) {
  .drag-slot,
  .cat-dock-slot {
    flex: 1 1 0;
  }
  .drag-slot span,
  .cat-dock-slot span {
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/* Les petits messages passent au-dessus de la barre de sélection, au lieu de la cacher */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  body.has-select-bar .toasts {
    bottom: calc(190px + env(safe-area-inset-bottom));
  }
}

/* 0.39.1 : quêtes plus serrées — une ligne par mission : l'icône, le texte et sa barre, la récompense */
.q-list {
  gap: 0.45rem;
}
.q-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  padding: 0.55rem 0.8rem 0.55rem 0.55rem;
  border-radius: 13px;
}
.q-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}
.q-icon svg {
  width: 19px;
  height: 19px;
}
.q-body {
  gap: 0.3rem;
}
.q-text {
  font-size: 0.92rem;
  line-height: 1.25;
}
.q-progress .bar {
  height: 5px;
}
.q-progress span {
  font-size: 0.74rem;
}
.q-reward {
  gap: 0.3rem;
}
.q-prize {
  font-size: 0.74rem;
}
.q-item.is-done .q-text {
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: rgba(var(--light), 0.35);
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .q-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.5rem 0.65rem 0.5rem 0.5rem;
  }
  .q-reward {
    grid-column: auto;
    grid-auto-flow: row;
    justify-items: end;
    justify-content: end;
  }
  .q-reward .q-prize {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
  }
  .q-reward .btn-sm {
    min-height: 32px;
    padding: 0.25rem 0.7rem;
    font-size: 0.78rem;
  }
}

/* 0.39.1 : jours d'affilée — jokers et record dans l'en-tête, le compte et la phrase sur une ligne ;
   au téléphone : 8 jours de la route, sans défilement de côté */
.sk-head-right {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.sk-head-right .sk-jokers {
  margin: 0;
}
.sk-head-right .sk-joker svg {
  width: 20px;
  height: 20px;
}
.sk-main {
  grid-template-columns: auto minmax(0, 1fr);
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .q-streak-col .q-sec-head {
    flex-wrap: nowrap;
  }
  .q-streak {
    padding: 0.9rem 0.8rem 0.8rem;
  }
  .sk-main {
    gap: 0.7rem;
    margin-bottom: 0.9rem;
  }
  .sk-flame {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: var(--s3);
  }
  .sk-flame svg {
    width: 34px;
    height: 34px;
  }
  .sk-say {
    gap: 0.1rem;
  }
  .sk-say .sk-title {
    font-size: var(--s1);
    line-height: 1.15;
  }
  .sk-say .fine {
    font-size: 0.78rem;
    line-height: 1.3;
  }
  .sk-scroll {
    overflow: hidden;
  }
  .sk-metro {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    min-width: 0;
  }
  .sk-metro .st:nth-child(n + 9) {
    display: none;
  }
  .sk-metro .st:nth-child(8)::before {
    right: 0;
    background: linear-gradient(90deg, var(--line), transparent);
  }
  .st-gift {
    width: 32px;
  }
  .st-what {
    font-size: 0.66rem;
  }
}

/* 0.39.1 : profil Premium — un dégradé or transparent, sur ordinateur comme au téléphone */
.pf-card.is-gold {
  background:
    linear-gradient(135deg, rgba(242, 193, 78, 0.26), rgba(242, 193, 78, 0.08) 45%, rgba(242, 193, 78, 0) 75%),
    var(--panel);
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.45), 0 0 40px -18px rgba(242, 193, 78, 0.6);
}
.pf-lvl-corner,
.pf-status-m {
  display: none;
}
/* 0.39.1 : profil au téléphone — grande photo, pseudo centré, niveau dans le coin de la bulle,
   identifiant en tout petit dessous ; le statut et l'ancienneté passent sous la valeur */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .pf-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 0.9rem;
    padding-top: 1.4rem;
  }
  .pf-card > .pf-avatar {
    grid-row: 1;
    grid-column: 1;
  }
  .pf-card > .pf-id,
  .pf-card > .pf-visit,
  .pf-card > .pf-worth,
  .pf-card > .pf-status-m {
    grid-column: 1;
    grid-row: auto;
  }
  .pf-card .avatar-xl {
    width: 148px;
    height: 148px;
    font-size: 3.6rem;
  }
  .pf-lvl-corner {
    display: block;
    grid-row: 1;
    grid-column: 1;
    align-self: start;
    justify-self: center;
    z-index: 1;
    transform: translate(58px, -4px);
    pointer-events: none;
  }
  .pf-lvl-corner .lvl-badge {
    box-shadow: 0 0 0 3px var(--panel), 0 4px 10px rgba(0, 0, 0, 0.45);
  }
  .pf-id {
    display: grid;
    justify-items: center;
    width: 100%;
  }
  .pf-id h1 {
    justify-content: center;
    margin: 0;
  }
  .pf-id h1 .lvl-badge,
  .pf-img-links,
  .pf-meta .pf-sub,
  .pf-meta .pf-classic,
  .pf-meta .pf-since {
    display: none;
  }
  .pf-meta {
    justify-content: center;
    margin: 0.1rem 0 0;
  }
  .pf-meta .pf-tag {
    font-size: 0.72rem;
    opacity: 0.75;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .pf-status-m {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem 0.9rem;
    margin: -0.3rem 0 0;
  }
  .pf-worth {
    justify-self: stretch;
  }
  /* Pièce maîtresse plus grande, la phrase des cadres sur une ligne */
  .stats-card.masterpiece .piece {
    width: min(300px, 86%);
  }
  .pf-frames-note {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 0.39.1 : accueil — le colis du dessus bien au centre (la pile part sur la droite) ;
   au téléphone, les quêtes du jour passent tout en bas, sous un filet */
.parcel-stack {
  translate: calc(var(--g, 0) * -7px) 0;
}
.hq-foot {
  display: none;
}
@media (max-width: 820px) {
  .home-copy > .home-quests {
    display: none;
  }
  .hq-foot {
    display: block;
    order: 3;
    margin-top: 0.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
  }
  .hq-foot .home-quests {
    width: 100%;
  }
}

/* 0.39.1 : décors et cadres de la boutique, deux par ligne au téléphone */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .skin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .skin-item {
    grid-template-rows: auto 1fr;
  }
  .sp-scope {
    height: 112px;
  }
  .skin-info {
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    padding: 0.6rem 0.65rem 0.75rem;
  }
  .skin-info h3 {
    font-size: var(--s0, 1rem);
    line-height: 1.2;
  }
  .skin-on {
    margin: 0.25rem 0 0;
  }
  .skin-info p {
    display: -webkit-box;
    margin: 0.2rem 0 0.5rem;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .skin-info .shop-actions .btn {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .skin-info .fine {
    font-size: 0.72rem;
  }
}

/* 0.39.1 : le chiffre des PinterCoin bien centré sur la pièce (en haut de l'écran) */
.topcoins .coins-amount {
  align-items: center;
  line-height: 1;
}
.topcoins .coins-amount b {
  display: block;
  line-height: 1;
  padding-top: 0.08em;
}

/* 0.39.1 : pas de « tirer pour recharger » de Chrome au téléphone */
html,
body {
  overscroll-behavior-y: none;
}

/* 0.39.1 : en-têtes des quêtes sur une ligne au téléphone ; la flamme devient l'icône du titre */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .q-sec-head h2 {
    font-size: var(--s2);
    white-space: nowrap;
  }
  .sk-head-right {
    gap: 0.5rem;
    flex: none;
  }
  .sk-head-right .fine {
    white-space: nowrap;
  }
  .sk-head-right .sk-jokers {
    display: flex;
    flex-direction: row;
    gap: 0.15rem;
  }
  .sk-main {
    align-items: center;
  }
  .sk-flame {
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .sk-flame b {
    display: none;
  }
  .sk-flame svg {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .q-streak-col .q-sec-head {
    flex-wrap: wrap;
    row-gap: 0.2rem;
  }
  .q-streak-col .sk-head-right {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

/* 0.39.1 : boutons d'ouverture de l'accueil sur une ligne au téléphone */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .home-actions {
    width: 100%;
  }
  /* Les deux boutons alignés, de la même largeur, au milieu ; le stock de God box juste à droite */
  .home-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content) 1fr;
    align-items: center;
    row-gap: 0.6rem;
  }
  .home-actions > .split-btn,
  .home-actions .home-god > .split-btn {
    grid-column: 2;
  }
  .home-actions .home-god {
    display: contents;
  }
  .home-actions .home-god > .box-stock {
    grid-column: 3;
    justify-self: start;
    margin-left: 0.4rem;
    min-height: 0;
    font-size: 0.9rem;
  }
  .home-actions .split-btn.split-big {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    font-size: clamp(0.8rem, 3.9vw, 1rem);
  }
  .home-actions .split-btn.split-big .sb-main {
    display: block;
    text-align: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6em 0.7em 0.6em 1em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .home-actions .split-btn.split-big .sb-side {
    font-size: 0.92em;
    padding-left: clamp(0.45em, 1.6vw, 0.65em);
    padding-right: clamp(0.5em, 1.8vw, 0.75em);
  }
  .home-actions .split-btn.split-big .sb-main:last-child {
    padding-right: 1em;
  }
  .home-actions .split-btn.split-big .sb-side {
    flex: none;
    min-width: 0;
    padding: 0.6em 0.75em 0.6em 0.65em;
  }
  .home-actions .split-btn.split-big .sb-main {
    flex: 1 1 auto;
    padding-left: 1.4em;
    padding-right: 1.1em;
  }
  .home-actions .split-btn.split-big .sb-main:last-child {
    padding-right: 1.4em;
  }
  /* Le gros colis, plus grand */
  .parcel-stack {
    width: min(300px, 74vw);
  }
}
.hq-foot .hq-text{text-align:left}

/* ───── 0.39.2 : retouches téléphone ───── */
.sk-jokers-in,
.pl-ribbon,
.room-desc-foot,
.rt-sep {
  display: none;
}
.rt-search-line {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.rt-search-line .cat-search {
  flex: 1 1 auto;
  min-width: 0;
}
#room-tools.rel-only .gt-row > :not(.rt-search-line),
#room-tools.rel-only .gt-filters,
#room-tools.rel-only .rt-search-line > :not([data-related]) {
  display: none;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  /* Coffre : la récompense sur une ou deux lignes, pas une par ligne */
  .q-chest {
    gap: 0.75rem;
    padding: 0.75rem 0.85rem 0.75rem 0.7rem;
  }
  .q-chest .qc-art {
    width: 58px;
  }
  .qc-body .q-prize {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem 0.7rem;
  }
  /* Jokers en haut à droite du cadre */
  .q-streak {
    position: relative;
  }
  .sk-head-right .sk-jokers {
    display: none;
  }
  .sk-jokers-in {
    position: absolute;
    top: 0.75rem;
    right: 0.8rem;
    display: flex;
    gap: 0.15rem;
  }
  .sk-jokers-in .sk-joker svg {
    width: 20px;
    height: 20px;
  }
  .sk-main {
    padding-right: 3.2rem;
  }
  .q-streak-col .sk-head-right {
    flex: none;
  }
  .q-streak-col .q-sec-head {
    flex-wrap: nowrap;
  }

  /* Séries : plus d'interrupteur grandes / petites couvertures */
  .gt-switch[data-series-size] {
    display: none;
  }

  /* Galeries : « Complète ! » entre « Planches réunies » et le compte */
  .rh-title .complete-ribbon {
    display: none;
  }
  .pl-ribbon {
    display: inline-block;
    margin: 0 auto 0 0.5rem;
    font-size: 0.7rem;
  }
  .room-head-v2 .progress-label {
    align-items: center;
  }
  /* Le texte de la série passe en bas, après les œuvres */
  .room-head-v2 .room-desc {
    display: none;
  }
  .room-desc-foot {
    display: block;
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: var(--s-1);
  }
  /* Les boutons d'une salle sur une ligne : textes plus petits, pas de trait entre eux */
  .room-head-v2 .room-actions {
    gap: 0.4rem 0.35rem;
  }
  .room-head-v2 .room-actions > .room-sep {
    display: none;
  }
  .room-head-v2 .room-actions .btn,
  .room-head-v2 .room-actions .split-btn {
    min-height: 38px;
    font-size: clamp(0.66rem, 2.85vw, 0.84rem);
  }
  .room-head-v2 .room-actions .btn {
    padding: 0.35rem 0.65rem;
    gap: 0.35rem;
    white-space: nowrap;
  }
  .room-head-v2 .room-actions .btn .icon {
    width: 1.05em;
    height: 1.05em;
  }
  .room-head-v2 .room-actions .split-btn {
    flex: 0 1 auto;
    min-width: 0;
  }
  .room-head-v2 .room-actions .split-btn .sb-main {
    min-width: 0;
    padding: 0.45em 0.8em 0.45em 0.95em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .room-head-v2 .room-actions .split-btn .sb-main:last-child {
    padding-right: 0.95em;
  }
  .room-head-v2 .room-actions .split-btn .sb-side {
    min-width: 0;
    padding: 0.45em 0.65em 0.45em 0.55em;
  }
  .room-head-v2 .room-actions .box-stock {
    min-height: 38px;
    gap: 0.15rem;
    font-size: 0.8rem;
  }
  .room-head-v2 .room-actions .box-stock svg {
    width: 20px;
    height: 20px;
  }
  /* « Séries liées » au bout de la ligne de recherche */
  .rt-sep {
    display: block;
    flex: none;
    width: 1px;
    height: 26px;
    background: var(--line);
  }
  .rt-search-line [data-related] {
    flex: none;
    min-height: 44px;
    padding: 0.4rem 0.7rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }
}

/* 0.39.2 : téléphone couché (paysage) — la mise en page du téléphone, avec des barres plus fines
   pour laisser de la hauteur aux œuvres */
@media (pointer: coarse) and (max-height: 520px) {
  .topbar {
    min-height: 0;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
  .nav {
    padding: 0.2rem 0.5rem calc(0.2rem + env(safe-area-inset-bottom));
  }
  .nav a {
    flex-direction: row;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.3rem 0.4rem;
    font-size: 0.74rem;
  }
  .nav a {
    position: relative;
  }
  .nav .pip {
    position: static;
    transform: none;
  }
  main {
    padding-bottom: 3.6rem !important;
  }
  /* Accueil : le colis à gauche, le texte et les boutons à droite */
  .home-stage {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 1.5rem;
    text-align: left;
    min-height: 0;
  }
  .home-copy {
    order: 2;
    justify-items: start;
    gap: 0.7rem;
  }
  .home-copy h1 {
    font-size: 2rem;
  }
  .parcel-zone {
    order: 1;
    align-self: start;
    padding: 1.2rem 0 0.5rem;
  }
  .parcel-stack {
    width: min(210px, 30vw);
  }
  .hq-foot {
    grid-column: 1 / -1;
  }
  .home-actions {
    grid-template-columns: 0 minmax(0, max-content) 1fr;
    column-gap: 0;
  }
  /* Profil : la carte en deux colonnes (photo à gauche, le reste à droite) */
  .pf-card .avatar-xl {
    width: 120px;
    height: 120px;
  }
}

/* ───── 0.40 ───── */
/* Boutique : toutes les cartes à la même hauteur, les boutons alignés en bas
   (plus de « Il te manque … » : le bouton grisé suffit) */
.shop-item {
  align-items: stretch;
}
.shop-item .shop-art {
  align-self: center;
}
.shop-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.shop-info .shop-actions {
  margin-top: auto;
}
.skin-item {
  grid-template-rows: auto 1fr;
}
.skin-info {
  display: flex;
  flex-direction: column;
}
.skin-info .shop-actions {
  margin-top: auto;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .shop-info {
    display: flex;
    height: auto;
    flex: 1 1 auto;
  }
  .shop-item {
    align-content: stretch;
    grid-template-rows: auto 1fr;
  }
  .skin-info {
    display: flex;
  }
}
/* Quêtes : le texte d'une mission sur deux lignes au plus (il rapetisse sinon), toutes les rangées à
   la même hauteur, la récompense (PinterCoin, box, XP) sur une seule ligne */
.q-item .q-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.q-list .q-item {
  min-height: 4.1rem;
  align-items: center;
}
.q-body {
  align-content: center;
}
.q-reward .q-prize {
  flex-wrap: nowrap;
  white-space: nowrap;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .q-reward .q-prize {
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
  }
  .q-list .q-item {
    min-height: 4.7rem;
  }
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .qc-body .q-prize {
    flex-wrap: nowrap;
    gap: 0.15rem 0.45rem;
    font-size: 0.68rem;
    white-space: nowrap;
  }
}
/* Notifications : une petite carte comme celle des succès, sans l'or ; le texte en petit, deux lignes au plus */
.toast.toast-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  width: max-content;
  max-width: min(380px, calc(100 * var(--vw, 1vw) - 32px));
  justify-self: center;
  padding: 0.45rem 0.9rem 0.45rem 0.45rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 92%, #fff 8%);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font-weight: 600;
}
.toast-card .ta-ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(var(--light), 0.1);
}
.toast-card .ta-ic svg {
  width: 18px;
  height: 18px;
  color: var(--ink);
}
.toast-card .ta-ic:has(svg) svg[class*='coin'],
.toast-card .ta-ic .coin {
  color: #f2c14e;
}
.toast-card .ta-txt {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.86rem;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.toasts {
  justify-items: center;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .toast-card .ta-txt {
    font-size: 0.78rem;
  }
  .toast.toast-card,
  .toast.toast-ach {
    max-width: calc(100 * var(--vw, 1vw) - 32px);
  }
}
/* Glisser au doigt : la page ne bouge plus tant que l'œuvre est tenue */
body.touch-dragging,
body.touch-dragging * {
  touch-action: none !important;
}
html:has(body.touch-dragging) {
  overflow: hidden;
  overscroll-behavior: none;
}
/* Ouverture au doigt : deux touchers sur l'œuvre, un grand cœur au milieu */
.heart-burst {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 5;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  color: #ff4f8f;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  animation: heart-burst 0.7s ease-out forwards;
}
.heart-burst svg {
  width: 100%;
  height: 100%;
}
.heart-burst.is-off {
  color: rgba(255, 255, 255, 0.85);
  opacity: 0.8;
}
@keyframes heart-burst {
  0% { transform: scale(0.3); opacity: 0; }
  25% { transform: scale(1.1); opacity: 1; }
  45% { transform: scale(0.95); }
  100% { transform: scale(1.05); opacity: 0; }
}
/* Accueil : l'invitation à lire « Comment jouer », tant qu'on ne l'a pas ouvert */
.home-help {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.home-help .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: #f2c14e;
}
.home-nsfw + .home-nsfw {
  margin-top: 0.5rem;
}
.howto-h {
  margin-top: 2.2rem;
}
.toast.toast-card {
  background: linear-gradient(135deg, rgba(var(--light), 0.08), rgba(var(--light), 0.02)), rgba(var(--deep-2), 0.97);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(var(--light), 0.16);
}

/* 0.40.1 : ouverture — en glissant, un dégradé derrière l'œuvre, sur toute la hauteur de l'écran
   (vert à droite « Garder », jaune à gauche « Vendre »), du milieu jusqu'au bord, et le mot écrit en
   grand dans le fond, derrière l'œuvre, vers le bas */
.opening {
  isolation: isolate;
}
.opening > .swipe-hints {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  padding: 0;
  overflow: hidden;
}
.opening > .swipe-hints::before,
.opening > .swipe-hints::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  pointer-events: none;
}
.opening > .swipe-hints::after {
  right: 0;
  background: linear-gradient(90deg, rgba(60, 200, 120, 0), rgba(60, 200, 120, 0.1) 45%, rgba(60, 200, 120, 0.28));
  opacity: var(--keep, 0);
}
.opening > .swipe-hints::before {
  left: 0;
  background: linear-gradient(270deg, rgba(255, 205, 70, 0), rgba(255, 205, 70, 0.09) 45%, rgba(255, 205, 70, 0.25));
  opacity: var(--sell, 0);
}
.opening > .swipe-hints.keep-only::before {
  display: none;
}
.opening > .swipe-hints .sh {
  position: absolute;
  top: max(64px, 9%);
  bottom: auto;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  font: 900 clamp(18px, calc(2.4 * var(--vw)), 30px) / 1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  opacity: calc(var(--x) * 0.9);
  transform: translateY(calc((1 - var(--x)) * 10px));
}
.opening > .swipe-hints .sh.keep {
  right: clamp(14px, 5%, 64px);
  left: auto;
  color: #7ff0b0 !important;
}
.opening > .swipe-hints .sh.sell {
  left: clamp(14px, 5%, 64px);
  right: auto;
  color: #ffd75e !important;
}
.opening > .swipe-hints .sh .gain {
  color: inherit;
  font-family: var(--body);
  font-size: 0.55em;
}
.opening > .swipe-hints.armed-keep .sh.keep {
  color: #b5ffd5 !important;
}
.opening > .swipe-hints.armed-sell .sh.sell {
  color: #ffe9a3 !important;
}
.opening > .swipe-hints.armed-keep::after,
.opening > .swipe-hints.armed-sell::before {
  filter: saturate(1.3) brightness(1.15);
}
@media (max-width: 520px) {
  .opening > .swipe-hints .sh {
    font-size: 20px;
    top: 56px;
  }
}
/* Les boutons Vendre, cœur et Garder, un peu plus grands */
.op-actions {
  gap: 0.6rem;
}
.op-actions .op-sell,
.op-actions .op-next {
  min-height: 46px;
  padding: 0.5rem 1.25rem;
  border-radius: 13px;
  font-size: 1.02rem;
}
.op-actions .op-heart {
  width: 46px;
  height: 46px;
  border-radius: 13px;
}
.op-actions .op-heart .icon,
.op-actions .op-keep .icon {
  width: 20px;
  height: 20px;
}
/* 0.40.4 : onglets du Musée et d'Échange — l'illustration prend plus de place dans sa case */
.at-art {
  width: 86px;
  height: 64px;
  border-radius: 13px;
}
.at-art svg {
  width: 82px;
  height: 60px;
}
.art-tab {
  padding: 0.45rem 1.15rem 0.45rem 0.45rem;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .art-tab {
    padding: 0.35rem 0.35rem 0.5rem;
  }
  .at-art {
    width: 100%;
    height: clamp(58px, 17vw, 84px);
  }
  .at-art svg {
    width: 92%;
    height: 92%;
  }
}
@media (pointer: coarse) and (max-height: 520px) {
  .at-art {
    height: 56px;
  }
}
/* 0.40.5 : boutons de la boutique bien au centre de leur carte (au téléphone, la colonne les
   poussait à droite) */
.shop-info .shop-actions {
  align-self: stretch;
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .shop-info .shop-actions {
    align-items: stretch;
    justify-content: center;
    width: 100%;
  }
  .shop-info .shop-actions .btn {
    justify-content: center;
  }
}
/* 0.40.6 : au téléphone, quand le dock a beaucoup de cases (une série : 4 étoiles + musée, vitrine,
   camion, enchère), deux lignes de 4 au lieu d'une seule ligne trop serrée */
@media (max-width: 720px) and (orientation: portrait), (pointer: coarse) and (orientation: portrait) {
  .drag-dock:has(> div:nth-of-type(7)),
  .cat-dock:has(> div:nth-of-type(7)) {
    flex-wrap: wrap;
  }
  .drag-dock:has(> div:nth-of-type(7)) > .drag-slot,
  .cat-dock:has(> div:nth-of-type(7)) > .cat-dock-slot {
    flex: 0 0 calc(25% - 6px);
    max-width: calc(25% - 6px);
    min-width: 0;
    padding: 10px 4px;
    font-size: 0.78rem;
  }
  .drag-dock:has(> div:nth-of-type(7)) > .drag-sep,
  .cat-dock:has(> div:nth-of-type(7)) > .cat-dock-sep {
    display: none;
  }
}
/* Série sans planche : on ne peut que la noter */
.drag-slot.is-off,
.cat-dock-slot.is-off {
  opacity: 0.4;
}
/* 0.40.8 : planche de série — une seule ligne courte : ce que rapporterait toute la série */
.sr-series {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-series .gain {
  font-weight: 800;
}
/* 0.41 : ordinateur, fenêtre étroite (ou interface agrandie) — la barre du haut ne déborde plus.
   app.js (fitTopbar) mesure la barre et ajoute ces paliers un par un, seulement s'il le faut :
   1. onglets en icônes (le nom au survol)  2. pseudo caché derrière l'avatar  3. libellés Quêtes/Amis cachés, marges serrées */
.topbar.tb-1 .nav a > span:not(.pip):not(.nav-lvl) {
  display: none;
}
.topbar.tb-1 .nav a {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}
.topbar.tb-2 .top-profile .tp-name {
  display: none;
}
.topbar.tb-3 .tf-label {
  display: none;
}
.topbar.tb-3 {
  gap: 0.4rem;
}
.topbar.tb-3 .nav a {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.topbar.tb-4 .logo {
  font-size: var(--s1);
}
.topbar.tb-4 .nav a {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

/* ═════════════ 0.41 : ouverture — cartel des artistes accroché au cadre, boutons fixes en bas ═════════════ */
/* Le cartel pend sous le cadre, dans la pièce : il part avec l'œuvre quand on la glisse */
.opening .show .piece {
  width: min(calc(100cqw - 28px), 640px, calc((100cqh - 50px - 2 * (var(--fw) + var(--mw))) * var(--r) + 2 * (var(--fw) + var(--mw))));
}
.opening .show .piece > .op-credits {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 3;
  width: max-content;
  max-width: min(calc(100% + 60px), 92vw);
  transform: translate(-50%, -30%);
  gap: 0.3rem;
  animation: plaque-in 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
  pointer-events: none;
}
.opening .show .piece.unlit > .op-credits {
  display: none;
}
.opening .show .piece > .op-credits .op-artist {
  padding: 0.28rem 0.75rem;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 16px -8px rgba(0, 0, 0, 0.8);
}
@keyframes plaque-in {
  from {
    opacity: 0;
    transform: translate(-50%, -80%);
  }
}
/* Le bas : une ligne d'infos (God pack, planche, tags aimés), puis les boutons — toujours à la même place */
.opening .op-foot {
  grid-template-rows: 2rem 46px;
  align-content: start;
  gap: 0.5rem;
  min-height: 0;
  height: calc(2rem + 0.5rem + 46px);
}
.opening .op-foot > .op-hint {
  grid-row: 1 / span 2;
  align-self: center;
}
.opening .op-foot > .op-actions {
  flex-wrap: nowrap;
  margin-top: 0;
}
.op-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.op-info .liked-tags,
.op-info .op-badges {
  flex-wrap: nowrap;
  min-width: 0;
}
.op-info .liked-tag {
  white-space: nowrap;
}

/* Téléphone à l'horizontale : l'œuvre prend toute la hauteur à gauche, les boutons passent à droite */
@media (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  .opening[data-phase='reveal'] {
    grid-template-columns: minmax(0, 1fr) 11.5rem;
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    padding: 0.35rem max(0.75rem, env(safe-area-inset-right)) calc(0.5rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  }
  .opening[data-phase='reveal'] .op-top {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-height: 36px;
    gap: 0.4rem;
  }
  .opening[data-phase='reveal'] .op-pips {
    flex: 1;
    min-width: 0;
    gap: 3px;
  }
  .opening[data-phase='reveal'] .op-pips i {
    flex: 1 1 0;
    min-width: 3px;
    width: auto;
  }
  .opening[data-phase='reveal'] .op-title {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.95rem;
  }
  .opening[data-phase='reveal'] .op-stage {
    grid-column: 1;
    grid-row: 1 / -1;
    height: 100%;
  }
  .opening[data-phase='reveal'] .op-foot {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    height: auto;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
  }
  .opening[data-phase='reveal'] .op-info {
    flex-direction: column;
    justify-content: flex-end;
    align-self: end;
  }
  .opening[data-phase='reveal'] .op-info .liked-tags {
    flex-wrap: wrap;
  }
  .opening[data-phase='reveal'] .op-actions {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 0.5rem;
    width: 100%;
  }
  .opening[data-phase='reveal'] .op-actions .op-sep {
    display: none;
  }
  .opening[data-phase='reveal'] .op-actions .op-next,
  .opening[data-phase='reveal'] .op-actions .op-sold {
    grid-column: 1 / -1;
    order: -1;
  }
  .opening[data-phase='reveal'] .op-actions .op-heart {
    grid-column: 1;
    grid-row: 2;
  }
  .opening[data-phase='reveal'] .op-actions .op-sell {
    grid-column: 2;
    grid-row: 2;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}
/* 0.41 : les étoiles d'un artiste, aussi serrées que les flammes des tags (cartel d'ouverture, fiches…) */
.star-row.mini:not(.is-flame) {
  gap: 0;
}
.star-row.mini:not(.is-flame) i.on + i.on {
  margin-left: -1px;
}
.op-artist .star-row.mini svg {
  width: 12px;
  height: 12px;
}

/* ═════════════ 0.41.1 : fenêtres de choix plus belles, téléphone couché ═════════════ */
/* Fenêtre de choix (« Attention ! », photo de profil…) : compacte, l'icône à côté du titre, les choix
   l'un sous l'autre sur toute la largeur, « Annuler » discret en bas */
.choice-dialog {
  width: min(400px, 100%);
  gap: 0.85rem;
  padding: 1.25rem 1.25rem 1rem;
}
.choice-dialog .cd-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.choice-dialog .cd-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(244, 198, 78, 0.16);
  box-shadow: inset 0 0 0 1px rgba(244, 198, 78, 0.4);
  color: #f4c64e;
}
.choice-dialog .cd-icon svg {
  width: 22px;
  height: 22px;
}
.choice-dialog .cd-text {
  display: grid;
  gap: 0.55rem;
  color: var(--muted);
}
.choice-dialog .pz-lines {
  gap: 0.15rem;
  margin: 0;
  padding: 0.35rem;
  border-radius: 12px;
  background: rgba(var(--deep), 0.35);
}
.choice-dialog .pz-line {
  align-items: center;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  color: var(--ink);
  font-size: var(--s-1);
}
.choice-dialog .pz-line .icon {
  margin-top: 0;
}
.choice-dialog .choice-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.2rem;
}
.choice-dialog.is-many .choice-actions {
  grid-template-columns: minmax(0, 1fr);
}
.choice-dialog .choice-actions .btn {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  width: 100%;
  min-height: 46px;
  padding-block: 0.45rem;
  line-height: 1.15;
}
.choice-dialog .cd-sub {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
}
.choice-dialog .cd-danger {
  color: #ff8f9c;
  box-shadow: inset 0 0 0 1.5px rgba(255, 110, 130, 0.45);
}
.choice-dialog .cd-cancel {
  justify-self: center;
  padding: 0.35rem 1rem;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--s-1);
  font-weight: 700;
  cursor: pointer;
}
.choice-dialog .cd-cancel:hover {
  color: var(--ink);
}

/* Une fenêtre plus haute que l'écran (téléphone couché surtout) défile elle-même, et la page derrière
   ne bouge plus */
.modal {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (pointer: coarse) {
  html:has(body > .modal) {
    overflow: hidden;
  }
}

/* Enchères au téléphone debout : deux ventes par ligne, cartes resserrées */
@media (max-width: 720px) and (orientation: portrait) {
  .lots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .lot {
    border-radius: 12px;
  }
  .lot-art {
    aspect-ratio: 1;
    border-bottom-width: 4px;
  }
  .lot-frame,
  .lot-owned {
    top: 5px;
    padding: 0.1rem 0.4rem;
    font-size: 0.62rem;
  }
  .lot-frame {
    left: 5px;
  }
  .lot-owned {
    right: 5px;
  }
  .lot-body {
    gap: 0.35rem;
    padding: 0.5rem 0.55rem 0.6rem;
  }
  .lot-title {
    font-size: 0.82rem;
  }
  .lot-seller {
    font-size: 0.72rem;
  }
  .lot-price {
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    padding: 0.35rem 0.45rem;
  }
  .lot-price b {
    font-size: 0.86rem;
  }
  .lot-price small {
    font-size: 0.62rem;
  }
  .lot-lead {
    font-size: 0.72rem;
  }
  .lot-actions {
    gap: 0.3rem;
  }
  .lot-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 34px;
    padding: 0.3rem 0.5rem;
    font-size: 0.74rem;
  }
}

/* Téléphone couché */
@media (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  /* Fenêtre de choix : plus large et moins haute (les raisons sur deux colonnes, les choix côte à côte) */
  .choice-dialog {
    width: min(600px, 100%);
    gap: 0.6rem;
    padding: 0.9rem 1.1rem 0.6rem;
  }
  .choice-dialog .cd-icon {
    width: 36px;
    height: 36px;
  }
  .choice-dialog .pz-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .choice-dialog.is-many .choice-actions {
    grid-template-columns: 1fr 1fr;
  }
  .choice-dialog .cd-cancel {
    grid-column: 1 / -1;
  }
  /* Onglets à images (Musée, Échange) : l'image à gauche du nom, sur une ligne basse */
  .art-tab {
    flex-direction: row;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.3rem 0.8rem 0.3rem 0.3rem;
    font-size: 0.85rem;
  }
  .at-art {
    width: 72px;
    height: 46px;
  }
  .art-tabs {
    margin-bottom: 0.9rem;
    padding-bottom: 0.7rem;
  }
  .page-head h1 {
    font-size: 1.7rem;
  }
  /* Enchères : quatre par ligne */
  .lots {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.7rem;
  }
  /* Accueil : le colis, le texte et les boutons, puis la quête du jour dans une colonne à droite */
  .home-stage {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.25fr) minmax(0, 0.95fr);
    gap: 1.2rem;
    align-items: center;
  }
  .home-copy > .home-quests {
    display: none;
  }
  .hq-foot {
    display: block;
    order: 3;
    grid-column: auto;
    align-self: start;
    min-width: 0;
    margin: 1.4rem 0 0;
    padding: 0;
    border: 0;
  }
  .hq-foot > * {
    width: 100%;
    max-width: none;
  }
  .parcel-zone {
    padding-right: 1.6rem;
  }
  .parcel-stack {
    width: min(150px, 17vw);
  }
  .home-copy h1 {
    font-size: 1.6rem;
  }
  /* Parking : les trois camions sur une ligne */
  .trucks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .truck-card {
    gap: 0.6rem;
    padding: 0.75rem 0.7rem 0.8rem;
  }
  .truck-slots {
    gap: 0.3rem;
  }
  .truck-gifts {
    gap: 0.25rem;
  }
  .tg-item {
    padding: 0.3rem 0.1rem;
  }
  .tg-art {
    width: 32px;
  }
  .tg-step {
    gap: 0;
  }
  .tg-step button {
    width: 20px;
    height: 20px;
  }
  .tg-step b {
    min-width: 1.1em;
    font-size: 0.85rem;
  }
  .tg-coins > span {
    font-size: 0.72rem;
  }
  /* Profil : la photo à gauche, le pseudo et le statut au milieu, les deux portes et la valeur à droite */
  .pf-card {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    justify-items: start;
    align-items: center;
    text-align: left;
    gap: 0.4rem 1.2rem;
    padding: 1rem 1.2rem;
  }
  .pf-card > .pf-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .pf-card .avatar-xl {
    width: 112px;
    height: 112px;
    font-size: 2.8rem;
  }
  .pf-lvl-corner {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    transform: translate(42px, -6px);
  }
  .pf-card > .pf-id {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-items: start;
  }
  .pf-id h1,
  .pf-meta {
    justify-content: flex-start;
  }
  .pf-card > .pf-status-m {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-content: flex-start;
    margin: 0;
  }
  .pf-card > .pf-visit {
    grid-column: 3;
    grid-row: 1 / span 2;
    gap: 0.5rem;
    padding: 0;
  }
  .pf-door {
    width: 104px;
    min-height: 0;
    padding: 0.55rem 0.4rem 0.5rem;
    gap: 0.3rem;
    font-size: 0.8rem;
  }
  .pf-door-art svg {
    width: 60px;
    height: auto;
  }
  .pf-card > .pf-worth {
    grid-column: 4;
    grid-row: 1 / span 2;
    justify-self: end;
    padding: 0.6rem 0.8rem;
  }
  .pf-settings {
    top: 0.5rem;
    right: 0.5rem;
    width: 34px;
    height: 34px;
  }
  /* Barre de sélection : tout sur une ligne (le nombre, les actions en icônes, Tout, Annuler, Vendre) */
  .select-bar {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 6px 10px;
  }
  .select-bar::before {
    display: none;
  }
  .select-bar .sb-count {
    flex: 0 0 auto;
  }
  .select-bar [data-sel-act] {
    order: 1;
    flex: 0 0 42px;
    min-height: 38px;
    padding-inline: 0;
  }
  .select-bar [data-sel-all] {
    order: 2;
    margin-left: auto;
  }
  .select-bar [data-sel-all],
  .select-bar [data-sel-cancel],
  .select-bar [data-sel-dups] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    padding-inline: 0.7rem;
    text-overflow: ellipsis;
  }
  .select-bar .sb-sell {
    flex: none;
    padding-inline: 0.8rem;
  }
  .select-bar [data-sel-cancel],
  .select-bar [data-sel-dups] {
    order: 3;
  }
  .select-bar .sb-sell {
    order: 4;
  }
  .select-bar .btn-sm {
    min-height: 38px;
    white-space: nowrap;
  }
  body.has-select-bar main {
    padding-bottom: 6.5rem !important;
  }
  body.has-select-bar .toasts {
    bottom: calc(120px + env(safe-area-inset-bottom));
  }
}

/* 0.42.1 : sous une œuvre très étroite (bande verticale), le cartel garde une largeur lisible :
   il peut déborder du cadre (jusqu’à 88 px), sans aller jusqu'aux œuvres voisines */
.cartel {
  min-width: min(88px, calc(100% + 56px));
}