/* =============================================================================
   Le Juste Coin : design system
   Idée directrice : l'étiquette de prix. L'orange « abricot » sert à la fois
   l'action (boutons) et la chaleur (essai brûlant) ; l'encre « espresso » porte
   le texte. Boutons et touches ont une lèvre qui s'enfonce : ça doit se toucher.
   Tout est réglé par les variables ci-dessous (clair, puis sombre).
   ========================================================================== */

/* ---------- Police : Bricolage Grotesque (OFL), variable : graisse, largeur, taille optique ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2-variations"),
       url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2-variations"),
       url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Espace fine insécable (séparateur de milliers en français : 2 487 points), absente de la police.
   Son .notdef est dessiné : Firefox refuse une police dont tous les glyphes sont vides. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("data:font/woff2;base64,d09GMgABAAAAAAKoAA8AAAAABiwAAAJQAAEAQgAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcKgZgP1NUQVRIADwRCAooQQE2AiQDDAsIAAQgBYYYByAMBxs7BRFVlNMEXxzYxvSCHoIhYNMXAjEsmHsaf2ypa+fuR/A09m3e/j0RJ5lqEvXomUiCRCOahiJJNEESq1xiAUD2/0DjywBY1GnhenwWQ3gVcYQhlGcro/m/mbaF13bPJsVfqO1t6nmCgZaOBfbxhO6d4QSRO9tZ9egdSc4kx5hBFSjXqVvMnrt4tVIZegEC5frqL2HDqvdtPnZAK3wNcnxOD2TS1QSL8p+KDUbGZFJFcVHOScoIAJixevFKT/Tps278/y1fjhGQqtM19FElhFIFNEoYLB08dPRM4OS2Y7siiZM7dx2LkGS1AqJSK0IiStMDkJgDBaHKrD+Kp0LSp89Afk3vl0+vBSBELzWgAIqRUIoyQAYJcq4oqsoriyrztAffH9S5CgTCzNY3r/5trJn8r7TCN3hXtehm+Fpy66dppCHpAYolENzKT/sgZFqPELwCsPYS5xEoKB0psLkqNwoil+EFlRBmeyEk1VEqFKyN5nZGnaKe3CcUmx7P+GpjU9IFrWm8IUJlWi4k5WmdUKo07XAq7VbeAzOgfyxLUiSKpCjkNo3IlGUBlF7SoasxwIh/NYKf0TwYIJkYgykoOeml8JFyRxSTDNPGFwKoRA+jMosYUgz3/kSfqJs+5bOxDYpk8YvMm0IZXqOkKT0mC5Iku5Pb/dXdK3JqXOTo/b2MZ1AT/Z4mMQKU/EUSbEFVhTD6toaJpNiRbMdvdPmPATwYhkGRCzwrBWCJeFruTxT3Uc8jcPY/eog+yqzoLERrEyja+cO60HvdyBC+Ey7czgcAAAA=") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  unicode-range: U+202F;
}

/* ---------- Jetons : thème clair ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Fonds et traits */
  --bg: #ffffff;           /* page */
  --surface: #f7f2ee;      /* fond de photo, cartes discrètes */
  --surface-2: #efe6df;    /* touches du pavé */
  --line: #ebe1d9;         /* séparateurs */
  --line-strong: #cfc0b4;  /* bordures de lignes vides, champs */
  --key-lip: #d8c8bb;      /* lèvre des touches */

  /* Texte */
  --ink: #26180f;          /* encre espresso */
  --muted: #7b685c;

  /* Marque : abricot */
  --brand: #ff8a1f;
  --brand-lip: #d4640a;
  --brand-ink: #b04800;    /* orange lisible sur fond clair (texte) */
  --brand-soft: #ffecd9;
  --on-brand: #26180f;

  /* Résultats d'un essai : mêmes teintes que les emoji du partage 🟩 🟧 🟨 ⬛ */
  --win: #16824a;   --win-lip: #0f5f35;  --on-win: #ffffff;
  --hot: #ff8a1f;   --hot-lip: #d4640a;  --on-hot: #26180f;
  --warm: #ffc933;  --warm-lip: #d9a40f; --on-warm: #26180f;
  --cold: #3d322b;  --cold-lip: #211913; --on-cold: #ffffff;

  --error: #c4321c;
  --focus: #26180f;
  --scrim: rgb(38 24 15 / .5);
  --shadow-pop: 0 12px 32px -10px rgb(38 24 15 / .4);

  /* Typographie */
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --narrow: 82%;            /* largeur des titres et des prix */
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-title: 1.5rem;       /* nom de l'objet */
  --fs-price: 2.1rem;       /* prix révélé */
  --fs-hero: clamp(2.7rem, 13vw, 3.75rem);

  /* Formes et espaces (base 4 px) */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --lip: 4px;

  /* Lignes d'essai */
  --row-h: 40px;
  --row-h-current: 54px;
  --row-h-empty: 30px;
  --key-h: 52px;

  /* Mouvement */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Jetons : thème sombre (réglage système, ou data-theme="dark") ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1a130f;
    --surface: #241b16;
    --surface-2: #34291f;
    --line: #33281f;
    --line-strong: #56473b;
    --key-lip: #0e0a07;
    --ink: #fbf1e9;
    --muted: #b4a295;
    --brand: #ff9a3d;
    --brand-lip: #a9500a;
    --brand-ink: #ffab5e;
    --brand-soft: #3d2615;
    --on-brand: #26180f;
    --win: #1e8c50;   --win-lip: #0d4f2b;  --on-win: #ffffff;
    --hot: #ff9a3d;   --hot-lip: #a9500a;  --on-hot: #26180f;
    --warm: #f2c12e;  --warm-lip: #8f6f0c; --on-warm: #26180f;
    --cold: #4d4038;  --cold-lip: #0e0a07; --on-cold: #fbf1e9;
    --error: #ff7a64;
    --focus: #fbf1e9;
    --scrim: rgb(0 0 0 / .6);
    --shadow-pop: 0 12px 32px -10px rgb(0 0 0 / .8);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a130f;
  --surface: #241b16;
  --surface-2: #34291f;
  --line: #33281f;
  --line-strong: #56473b;
  --key-lip: #0e0a07;
  --ink: #fbf1e9;
  --muted: #b4a295;
  --brand: #ff9a3d;
  --brand-lip: #a9500a;
  --brand-ink: #ffab5e;
  --brand-soft: #3d2615;
  --on-brand: #26180f;
  --win: #1e8c50;   --win-lip: #0d4f2b;  --on-win: #ffffff;
  --hot: #ff9a3d;   --hot-lip: #a9500a;  --on-hot: #26180f;
  --warm: #f2c12e;  --warm-lip: #8f6f0c; --on-warm: #26180f;
  --cold: #4d4038;  --cold-lip: #0e0a07; --on-cold: #fbf1e9;
  --error: #ff7a64;
  --focus: #fbf1e9;
  --scrim: rgb(0 0 0 / .6);
  --shadow-pop: 0 12px 32px -10px rgb(0 0 0 / .8);
}

/* ---------- Jetons : catégories ----------
   Une teinte par catégorie, choisie hors des couleurs des essais (vert, orange, jaune, brun) :
   bleu, cerise, rose, bleu canard, violet. Pour chacune : la teinte pleine (pastilles, sélection),
   son encre (texte sur fond clair ou teinté) et son fond teinté. Texte blanc sur la teinte en clair,
   encre sombre en sombre ; tous les couples passent le contraste AA (4,5:1). */
:root,
[data-theme="light"] {
  --on-cat-solid: #ffffff;
  --cat-immobilier: #2f65d0;   --cat-immobilier-ink: #2353b3;   --cat-immobilier-soft: #e4ecfc;
  --cat-vehicules: #d12c4c;    --cat-vehicules-ink: #b3213f;    --cat-vehicules-soft: #fde5ea;
  --cat-famille: #c93d93;      --cat-famille-ink: #a8307a;      --cat-famille-soft: #fbe6f3;
  --cat-maison: #0f7a8a;       --cat-maison-ink: #0c6573;       --cat-maison-soft: #dcf1f3;
  --cat-electronique: #7048d6; --cat-electronique-ink: #5d36c2; --cat-electronique-soft: #ece6fc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --on-cat-solid: #120d0a;
    --cat-immobilier: #6b98f2;   --cat-immobilier-ink: #9dbcff;   --cat-immobilier-soft: #1c2538;
    --cat-vehicules: #f06a82;    --cat-vehicules-ink: #ff9aac;    --cat-vehicules-soft: #371a20;
    --cat-famille: #e889c4;      --cat-famille-ink: #f7b0dc;      --cat-famille-soft: #35192c;
    --cat-maison: #3fb5c4;       --cat-maison-ink: #7bd6e1;       --cat-maison-soft: #122c30;
    --cat-electronique: #a183f5; --cat-electronique-ink: #c3afff; --cat-electronique-soft: #251f3b;
  }
}
[data-theme="dark"] {
  --on-cat-solid: #120d0a;
  --cat-immobilier: #6b98f2;   --cat-immobilier-ink: #9dbcff;   --cat-immobilier-soft: #1c2538;
  --cat-vehicules: #f06a82;    --cat-vehicules-ink: #ff9aac;    --cat-vehicules-soft: #371a20;
  --cat-famille: #e889c4;      --cat-famille-ink: #f7b0dc;      --cat-famille-soft: #35192c;
  --cat-maison: #3fb5c4;       --cat-maison-ink: #7bd6e1;       --cat-maison-soft: #122c30;
  --cat-electronique: #a183f5; --cat-electronique-ink: #c3afff; --cat-electronique-soft: #251f3b;
}
/* Un élément porte data-cat="…" : ses enfants lisent --cat, --cat-ink, --cat-soft, --on-cat.
   « Général » (tous les objets) reprend l'abricot de la marque. */
[data-cat] { --cat: var(--brand); --cat-ink: var(--brand-ink); --cat-soft: var(--brand-soft); --on-cat: var(--on-brand); }
[data-cat="immobilier"]   { --cat: var(--cat-immobilier);   --cat-ink: var(--cat-immobilier-ink);   --cat-soft: var(--cat-immobilier-soft);   --on-cat: var(--on-cat-solid); }
[data-cat="vehicules"]    { --cat: var(--cat-vehicules);    --cat-ink: var(--cat-vehicules-ink);    --cat-soft: var(--cat-vehicules-soft);    --on-cat: var(--on-cat-solid); }
[data-cat="famille"]      { --cat: var(--cat-famille);      --cat-ink: var(--cat-famille-ink);      --cat-soft: var(--cat-famille-soft);      --on-cat: var(--on-cat-solid); }
[data-cat="maison"]       { --cat: var(--cat-maison);       --cat-ink: var(--cat-maison-ink);       --cat-soft: var(--cat-maison-soft);       --on-cat: var(--on-cat-solid); }
[data-cat="electronique"] { --cat: var(--cat-electronique); --cat-ink: var(--cat-electronique-ink); --cat-soft: var(--cat-electronique-soft); --on-cat: var(--on-cat-solid); }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 450;
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.1; font-weight: 800; font-stretch: var(--narrow); }
strong { font-weight: 750; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.error { color: var(--error); }
.fineprint { color: var(--muted); font-size: var(--fs-xs); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Logo : étiquette */
.tag-body { fill: var(--brand); stroke: var(--brand); }
.tag-hole { fill: var(--bg); }
.tag-line { stroke: var(--on-brand); opacity: .35; }
.tag-string { stroke: var(--ink); }

/* ---------- Barre du haut ---------- */
.topbar {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s2);
  height: 56px;
  padding: 0 max(8px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.brand { justify-self: start; display: flex; align-items: center; gap: 6px; min-width: 0; }
.brand .logo { flex: none; width: 34px; height: 34px; }
.brand-name { font-size: 1.4rem; letter-spacing: -.01em; white-space: nowrap; }
.topbar-actions { justify-self: end; display: flex; gap: 2px; }

/* Selon l'écran : pas de doublon de nom sur l'accueil, la progression pendant la partie */
body:has(#view-splash:not([hidden])) .brand { visibility: hidden; }
.progress { display: none; }
body:has(#view-game:not([hidden])) .progress { display: flex; }
@media (max-width: 560px) {
  body:has(#view-game:not([hidden])) .brand-name { display: none; }
}
/* La progression (avec le nom de catégorie de l'objet affiché) ne tient plus entre deux colonnes égales */
@media (max-width: 600px) {
  .topbar { grid-template-columns: auto 1fr auto; }
}

.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background-color .15s;
}
.icon-btn:hover { background: var(--surface); }
.icon-btn:active { scale: .92; }
.icon-btn svg { width: 24px; height: 24px; }
/* Pastille : connecté */
#btn-account.signed-in::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--win);
  box-shadow: 0 0 0 2.5px var(--bg);
}

/* Progression : une étiquette numérotée par objet */
.progress { list-style: none; justify-self: center; gap: 6px; margin: 0; padding: 0; }
.progress button {
  width: 30px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--line-strong);
  border-radius: 9px;
  background: var(--bg);
  color: var(--muted);
  font: 800 1rem/1 var(--font);
  font-stretch: var(--narrow);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform .2s var(--ease-pop), box-shadow .2s;
}
.progress .started { border-color: var(--ink); color: var(--ink); }
.progress .win { background: var(--win); border-color: var(--win); color: var(--on-win); }
.progress .lose { background: var(--cold); border-color: var(--cold); color: var(--on-cold); }
.progress .current {
  transform: translateY(-1px) scale(1.1);
  border-color: var(--brand);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--brand-lip);
}
.progress .current.win, .progress .current.lose { border-color: var(--bg); box-shadow: 0 0 0 2.5px var(--brand); color: var(--on-win); }
.progress .current.lose { color: var(--on-cold); }
/* L'objet affiché porte le nom de sa catégorie à la place de son numéro. Seule son étiquette rétrécit
   (nom coupé) si la place manque. */
.progress li { flex: none; }
.progress li:has(.current) { flex: 0 1 auto; min-width: 0; }
.progress .current.named {
  width: auto;
  max-width: 100%;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92rem;
  transform: translateY(-1px);
}
/* Pendant la partie sur petit écran, la place du logo revient à la progression */
@media (max-width: 460px) {
  body:has(#view-game:not([hidden])) .brand { display: none; }
  body:has(#view-game:not([hidden])) .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .progress { justify-self: stretch; justify-content: center; gap: 4px; }
  .progress button { width: 28px; }
  .progress .current.named { padding: 0 8px; font-size: .88rem; }
  .icon-btn { width: 36px; }
}

/* ---------- Mise en page générale ---------- */
main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.view {
  flex: 1 0 auto;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--s4) max(16px, env(safe-area-inset-right)) var(--s5) max(16px, env(safe-area-inset-left));
}

/* ---------- Boutons ---------- */
.btn {
  height: 50px;
  min-width: 0;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  margin-bottom: var(--lip);
  font: 750 var(--fs-md)/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: translate .08s, box-shadow .08s, filter .15s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { filter: brightness(1.04); }
.btn:active { translate: 0 var(--lip); box-shadow: 0 0 0 transparent; }
.btn:disabled { opacity: .5; cursor: default; translate: none; }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 var(--lip) 0 var(--brand-lip); }
.btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--line-strong); box-shadow: 0 var(--lip) 0 var(--line-strong); }
.btn-ghost { height: 40px; background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; margin-bottom: 0; }
.btn-ghost:active { translate: none; opacity: .7; }
.btn-lg { height: 58px; font-size: 1.3rem; font-stretch: 90%; border-radius: 16px; }
.btn-block { width: 100%; }
.link { font: inherit; background: none; border: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px; }

/* ---------- Accueil ---------- */
.splash, .message, .done { display: flex; flex-direction: column; align-items: center; text-align: center; }
.splash { justify-content: center; gap: var(--s5); }
.splash-hero { display: grid; justify-items: center; gap: var(--s2); }
.splash-logo { width: 92px; height: 92px; transform-origin: 8% 6%; animation: swing 1.8s var(--ease-out) both; }
.splash-title { font-size: var(--fs-hero); font-stretch: 76%; letter-spacing: -.02em; line-height: .95; }
.splash-pitch { font-size: 1.3rem; font-weight: 550; max-width: 19ch; text-wrap: balance; }
.splash-pitch [data-rule] { font-weight: 800; white-space: nowrap; }
.splash-demo { list-style: none; display: grid; gap: 8px; width: min(280px, 100%); margin: 0; padding: 0; }
.splash-demo .row { height: 38px; rotate: -1.5deg; }
.splash-demo .row:nth-child(2) { rotate: 1deg; margin-left: 10px; }
.splash-demo .row:nth-child(3) { rotate: -.5deg; }
.splash-demo .row { animation: flip .5s ease-in-out both; }
.splash-demo .row:nth-child(1) { animation-delay: .5s; }
.splash-demo .row:nth-child(2) { animation-delay: .8s; }
.splash-demo .row:nth-child(3) { animation: flip .5s 1.1s ease-in-out both, win-pop .45s 1.6s var(--ease-pop); }
.splash-actions { display: grid; gap: var(--s2); width: min(300px, 100%); }
.splash-foot { display: grid; gap: 2px; color: var(--muted); font-size: var(--fs-sm); }
.splash-date { color: var(--ink); font-weight: 650; }
.splash-date::first-letter { text-transform: uppercase; }
.splash-date:empty { display: none; }
.splash-foot .fineprint { margin-top: 6px; }

/* ---------- Chargement, vide, erreur ---------- */
.message { justify-content: center; gap: var(--s4); font-size: 1.15rem; font-weight: 600; }
.message p { max-width: 26ch; text-wrap: balance; }
.message-logo { width: 72px; height: 72px; transform-origin: 8% 6%; animation: sway 2.8s ease-in-out infinite; }
.message .countdown { font-size: var(--fs-sm); }

/* ---------- Partie ---------- */
.game { display: flex; flex-direction: column; padding-top: var(--s3); padding-bottom: var(--s3); }

/* Photo : la star. Elle prend toute la hauteur disponible. */
.photo {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-height: 170px;
  max-height: 62vh;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
}
.photo-backdrop {
  position: absolute;
  inset: -30px;
  z-index: -1;
  width: calc(100% + 60px);
  height: calc(100% + 60px);
  object-fit: cover;
  filter: blur(26px) saturate(1.5);
  opacity: .6;
  pointer-events: none;
}
.photo > #photo { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.photo.swap > #photo { animation: photo-in .28s var(--ease-out); }
.photo.zoom {
  position: fixed;
  inset: 0;
  z-index: 40;
  max-height: none;
  border-radius: 0;
  background: rgb(14 9 6 / .95);
  cursor: zoom-out;
}
.photo.zoom .photo-backdrop { display: none; }
.photo-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .92);
  color: #26180f;
  box-shadow: 0 2px 10px rgb(0 0 0 / .25);
  cursor: pointer;
  transition: scale .15s var(--ease-pop);
}
.photo-nav:active { scale: .88; }
.photo-nav svg { width: 22px; height: 22px; }
.photo-nav.prev { left: 10px; }
.photo-nav.next { right: 10px; }
.photo-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  translate: -50% 0;
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 5px 7px;
  list-style: none;
  border-radius: 99px;
  background: rgb(0 0 0 / .35);
  pointer-events: none;
}
.photo-dots:empty { display: none; }
.photo-dots li { width: 7px; height: 7px; border-radius: 99px; background: rgb(255 255 255 / .55); transition: width .2s var(--ease-out); }
.photo-dots li.on { width: 18px; background: #fff; }

/* Annonce : nom de l'objet en grand */
.ad { display: grid; gap: 6px; padding: var(--s3) 2px 0; }
.ad-title {
  font-size: var(--fs-title);
  font-weight: 800;
  font-stretch: var(--narrow);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ad-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-sm); }
.ad-meta { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 550; }
.ad-meta::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.3-7-11.5a7 7 0 0 1 14 0C19 14.7 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.3-7-11.5a7 7 0 0 1 14 0C19 14.7 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ad-meta:empty { display: none; }
.ad-desc summary {
  list-style: none;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 650;
  cursor: pointer;
  user-select: none;
}
.ad-desc summary::-webkit-details-marker { display: none; }
.ad-desc summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: -3px 2px 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  transition: rotate .2s, margin .2s;
}
.ad-desc[open] { flex-basis: 100%; }
.ad-desc[open] summary::after { rotate: -135deg; margin-top: 3px; }
.ad-desc p {
  margin-top: var(--s2);
  max-height: 30vh;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .95rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Lignes d'essai */
.board { list-style: none; display: grid; gap: 6px; margin: var(--s3) 0 0; padding: 0; counter-reset: essai; }
.row {
  --row-bg: transparent;
  --row-fg: var(--ink);
  --row-line: var(--line-strong);
  counter-increment: essai;
  height: var(--row-h);
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 2px solid var(--row-line);
  border-radius: 12px;
  background: var(--row-bg);
  color: var(--row-fg);
  font-weight: 800;
}
.row .value {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.25rem;
  font-stretch: var(--narrow);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.row .hint { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.row.win  { --row-bg: var(--win);  --row-line: var(--win);  --row-fg: var(--on-win); }
.row.hot  { --row-bg: var(--hot);  --row-line: var(--hot);  --row-fg: var(--on-hot); }
.row.warm { --row-bg: var(--warm); --row-line: var(--warm); --row-fg: var(--on-warm); }
.row.cold { --row-bg: var(--cold); --row-line: var(--cold); --row-fg: var(--on-cold); }

/* Essais restants : de simples emplacements en pointillés */
.board .row:not(.current, .win, .hot, .warm, .cold) {
  height: var(--row-h-empty);
  border-style: dashed;
  border-color: var(--line-strong);
  opacity: .7;
}

/* Saisie en cours : l'étiquette à remplir */
.row.current {
  --row-line: var(--brand);
  height: var(--row-h-current);
  background: var(--bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);
}
.row.current .value { font-size: 1.75rem; animation: bump .14s var(--ease-pop); }
.row.current .unit { margin-left: 4px; color: var(--muted); font-size: 1.3rem; }
.row.current .hint::before { content: counter(essai) "e essai"; color: var(--muted); font-weight: 650; }
.row.current:first-child .hint::before { content: "1er essai"; }
.row.current:last-child .hint::before { content: "Dernier essai !"; color: var(--brand-ink); font-weight: 800; }
.row.pending { opacity: .6; }
.caret {
  display: inline-block;
  align-self: center;
  width: 3px;
  height: 1.05em;
  margin: 0 1px;
  border-radius: 2px;
  background: var(--brand);
  animation: blink 1s steps(1) infinite;
}
.row.pending .caret { visibility: hidden; }
.row.reveal { animation: flip .5s ease-in-out both; }
.row.win.reveal { animation: flip .5s ease-in-out both, win-pop .45s .5s var(--ease-pop); }
.row.shake, .board.shake-board { animation: shake .4s; }

/* ---------- Pavé numérique et résultat ---------- */
.dock {
  flex: none;
  padding: var(--s2) max(8px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: var(--bg);
}
.keypad, .result { max-width: 488px; margin: 0 auto; }
.keypad { display: grid; gap: 6px; }
.keys { display: grid; gap: 5px; }
.keys-digits { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.keys-actions { grid-template-columns: 1fr 2fr; gap: 6px; }
.key {
  min-width: 0;
  height: var(--key-h);
  margin-bottom: 3px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--key-lip);
  font: 750 1.45rem/1 var(--font);
  font-stretch: var(--narrow);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: translate .05s, box-shadow .05s;
}
.key:active, .key.is-pressed { translate: 0 3px; box-shadow: 0 0 0 var(--key-lip); }
.key svg { width: 26px; height: 26px; }
.key-submit { background: var(--brand); color: var(--on-brand); box-shadow: 0 3px 0 var(--brand-lip); font-size: 1.2rem; font-stretch: 90%; }
.key-submit:active, .key-submit.is-pressed { box-shadow: 0 0 0 var(--brand-lip); }

/* Résultat : le vrai prix sur son étiquette */
.result { display: grid; gap: var(--s3); padding-top: 2px; }
.result-head { display: flex; align-items: center; justify-content: center; gap: var(--s4); }
.result-tag {
  --tag-bg: var(--cold);
  --tag-fg: var(--on-cold);
  position: relative;
  flex: none;
  display: grid;
  justify-items: start;
  padding: 8px 18px 9px 34px;
  background: var(--tag-bg);
  color: var(--tag-fg);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
  border-radius: 0 12px 12px 0;
  rotate: -3deg;
  animation: tag-drop .55s var(--ease-pop) both;
}
body:has(#board .row.win) .result-tag { --tag-bg: var(--win); --tag-fg: var(--on-win); }
.result-tag::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 9px;
  height: 9px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--bg);
}
.result-label { font-size: var(--fs-xs); font-weight: 700; opacity: .85; }
.result-price {
  font-size: var(--fs-price);
  font-weight: 800;
  font-stretch: 78%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.result-text { max-width: 22ch; font-weight: 650; color: var(--muted); text-align: left; text-wrap: balance; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.result-actions .btn { padding: 0 12px; }

/* ---------- Bilan ---------- */
.done { gap: var(--s5); padding-top: var(--s5); }
.done-hero { display: grid; justify-items: center; gap: 6px; }
.done-kicker { color: var(--muted); font-size: var(--fs-sm); font-weight: 650; }
.done-points { display: grid; justify-items: center; }
.done-points strong {
  font-size: clamp(4.2rem, 24vw, 6rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: .9;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.done-points span { color: var(--muted); font-weight: 700; }
.done-found { font-size: var(--fs-md); font-weight: 700; }
.done-rank {
  padding: 6px 14px;
  border-radius: 99px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 750;
  text-wrap: balance;
}
.done-rank:empty, .countdown:empty { display: none; }

.share-card { display: grid; justify-items: center; gap: var(--s4); width: 100%; }
.mini-grid { display: grid; gap: 5px; }
.mini-grid div { display: flex; gap: 5px; min-height: 24px; }
.sq { width: 24px; height: 24px; border-radius: 6px; animation: sq-pop .35s var(--d, 0ms) var(--ease-pop) both; }
.sq.win { background: var(--win); }
.sq.hot { background: var(--hot); }
.sq.warm { background: var(--warm); }
.sq.cold { background: var(--cold); }
.share-card .btn { width: min(300px, 100%); }
.countdown {
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Récapitulatif façon ticket de caisse, bord dentelé */
.ticket {
  --zz: 14px;
  width: 100%;
  padding: var(--s4) var(--s4) calc(var(--s4) + var(--zz));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface);
  text-align: left;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zz) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zz) 100%;
}
.ticket-title { font-size: 1.15rem; margin-bottom: var(--s2); }
.recap { margin: 0; padding: 0; list-style: none; }
.recap li { display: flex; align-items: center; gap: var(--s3); padding: 10px 0; border-top: 2px dashed var(--line-strong); }
.recap li:first-child { border-top: 0; }
.recap img { width: 52px; height: 52px; flex: none; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.recap .t { flex: 1; min-width: 0; }
.recap .name {
  display: block;
  overflow: hidden;
  color: inherit;
  font-weight: 750;
  font-stretch: 90%;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recap a.name:hover { text-decoration: underline; }
.recap .sub { color: var(--muted); font-size: var(--fs-xs); font-weight: 550; }
.recap .pts { font-size: 1.2rem; font-weight: 800; font-stretch: var(--narrow); white-space: nowrap; font-variant-numeric: tabular-nums; }
.done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }

/* ---------- Bulles de message ---------- */
.toasts {
  position: fixed;
  top: 28%;
  left: 50%;
  translate: -50% 0;
  z-index: 50;
  width: max-content;
  max-width: calc(100vw - 32px);
  display: grid;
  justify-items: center;
  gap: var(--s2);
  pointer-events: none;
}
.toast {
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-pop);
  font-weight: 750;
  text-align: center;
  animation: toast-in .25s var(--ease-pop);
  transition: opacity .3s, translate .3s;
}
.toast.out { opacity: 0; translate: 0 -10px; }
/* Verdict d'un essai : un tampon qui claque, aux couleurs de l'essai */
.toast.verdict {
  padding: 12px 22px;
  border: 3px solid var(--bg);
  border-radius: 16px;
  font-size: 1.6rem;
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1.05;
  rotate: -4deg;
  animation: stamp .42s .22s var(--ease-pop) both;
}
.toast.verdict.win  { background: var(--win);  color: var(--on-win); font-size: 2rem; }
.toast.verdict.hot  { background: var(--hot);  color: var(--on-hot); }
.toast.verdict.warm { background: var(--warm); color: var(--on-warm); }
.toast.verdict.cold { background: var(--cold); color: var(--on-cold); }
.toast.verdict.lose { background: var(--cold); color: var(--on-cold); }

.confetti { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Fenêtres : feuilles qui montent du bas sur mobile ---------- */
dialog {
  width: 100%;
  max-width: 520px;
  max-height: 90dvh;
  margin: auto auto 0;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 26px 26px 0 0;
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}
dialog[open] { animation: sheet-up .34s var(--ease-out); }
dialog::backdrop { background: var(--scrim); }
.dlg-body { position: relative; padding: var(--s3) 20px calc(var(--s5) + env(safe-area-inset-bottom)); }
.dlg-body::before { content: ""; display: block; width: 44px; height: 5px; margin: 0 auto var(--s3); border-radius: 3px; background: var(--line-strong); }
.dlg-close { position: absolute; top: 14px; right: 12px; }
dialog h2 { margin: 0 44px var(--s4) 0; font-size: 1.75rem; letter-spacing: -.01em; }
dialog p + p { margin-top: 10px; }
@media (min-width: 600px) {
  dialog { margin: auto; max-height: calc(100dvh - 48px); border-radius: 26px; }
  dialog[open] { animation: pop-in .25s var(--ease-pop); }
  .dlg-body { padding-top: 26px; }
  .dlg-body::before { display: none; }
  .dlg-close { top: 16px; }
}

.help-h { margin: var(--s5) 0 var(--s2); font-size: 1.25rem; }
.legend { list-style: none; display: grid; gap: var(--s2); padding: 0; margin: var(--s3) 0; }
.legend li { display: flex; align-items: center; gap: var(--s3); font-size: .95rem; }
.legend .row { flex: none; width: 112px; height: 36px; padding: 0 12px; }
.legend .row .value { font-size: 1.05rem; }
dialog .fineprint { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }

/* Compte */
.tabs { display: flex; gap: 4px; margin-bottom: var(--s4); padding: 4px; border-radius: var(--r-md); background: var(--surface-2); }
.tab {
  flex: 1;
  padding: 10px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  font: 700 var(--fs-base)/1.1 var(--font);
  cursor: pointer;
}
.tab.active { background: var(--bg); color: var(--ink); box-shadow: 0 2px 0 var(--key-lip); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: .95rem; font-weight: 700; }
.field .muted { font-weight: 500; }
input, select {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  font: 500 var(--fs-md) var(--font);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent); }
.form-msg { margin-bottom: 14px; font-size: var(--fs-sm); font-weight: 600; }
.form-msg:empty { display: none; }
#auth-forgot { display: block; margin: 12px auto 0; font-size: var(--fs-sm); }
.account-card { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); padding: var(--s4); border-radius: var(--r-md); background: var(--surface); }
.account-card p + p { margin-top: 2px; }
.avatar {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 1.4rem;
  font-weight: 800;
}

/* Classement */
.lb-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
#lb-month { width: auto; max-width: 100%; height: 42px; padding: 0 12px; font-weight: 700; text-transform: capitalize; }
.lb-info { color: var(--muted); font-size: var(--fs-sm); }
.lb { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
.lb th, .lb td { padding: 10px 8px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb th { color: var(--muted); font-size: var(--fs-xs); font-weight: 650; border-bottom: 2px solid var(--line); }
.lb td { border-bottom: 1px solid var(--line); }
.lb th:nth-child(-n+2), .lb td:nth-child(-n+2) { text-align: left; }
.lb td:first-child { width: 2.5em; font-weight: 800; color: var(--muted); }
.lb td:nth-child(2) { width: 100%; white-space: normal; overflow-wrap: anywhere; font-weight: 650; }
.lb td:last-child { font-size: 1.1rem; font-weight: 800; font-stretch: var(--narrow); }
.lb tr.me td { background: var(--cat-soft, var(--brand-soft)); border-bottom-color: transparent; }
.lb tr.me td:first-child { border-radius: 12px 0 0 12px; }
.lb tr.me td:last-child { border-radius: 0 12px 12px 0; }
.lb tbody tr:last-child td { border-bottom: none; }

/* ---------- Catégories ---------- */
.cat-icon { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* Pastille ronde : le pictogramme sur la teinte de la catégorie */
.cat-badge {
  --size: 28px;
  flex: none;
  width: var(--size);
  height: var(--size);
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cat);
  color: var(--on-cat);
}
.cat-badge svg { width: 60%; height: 60%; }

/* Étiquette posée sur la photo : la catégorie de l'annonce. Elle ouvre le classement de la catégorie. */
.photo-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  height: 32px;
  margin: 0;
  padding: 0 12px 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  background: var(--cat);
  color: var(--on-cat);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cat) 60%, #000), 0 8px 18px -8px rgb(0 0 0 / .55);
  font: 800 .95rem/1 var(--font);
  font-stretch: 90%;
  rotate: -2deg;
  cursor: pointer;
  transition: translate .08s, box-shadow .08s;
}
.photo-cat svg { width: 18px; height: 18px; flex: none; }
.photo-cat:active { translate: 0 3px; box-shadow: 0 0 0 transparent; }
.photo.zoom .photo-cat { display: none; }
.game.enter .photo-cat { animation: tag-drop .5s .12s var(--ease-pop) both; }

/* Accueil : les cinq pastilles en éventail */
.splash-cats { list-style: none; display: flex; justify-content: center; gap: 8px; margin: 4px 0 0; padding: 0; }
.splash-cats .cat-badge {
  --size: 38px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cat) 60%, #000);
  animation: sq-pop .4s var(--d, 0ms) var(--ease-pop) both;
}
.splash-cats li:nth-child(odd) { rotate: -7deg; }
.splash-cats li:nth-child(even) { rotate: 6deg; translate: 0 3px; }

/* Aide : la liste des catégories */
.cat-list { list-style: none; display: grid; gap: 10px; margin: var(--s3) 0; padding: 0; }
.cat-list li { display: flex; align-items: center; gap: var(--s3); }
.cat-list .cat-badge { --size: 38px; }
.cat-list strong { display: block; color: var(--cat-ink); font-stretch: 90%; }
.cat-list .muted { display: block; font-size: var(--fs-sm); line-height: 1.25; }

/* Bilan : nom de la catégorie au-dessus de l'objet */
.recap-cat { display: inline-flex; align-items: center; gap: 4px; color: var(--cat-ink); font-size: var(--fs-xs); font-weight: 750; line-height: 1.2; }
.recap-cat svg { width: 14px; height: 14px; flex: none; }

/* Bilan : mon rang dans chaque catégorie */
.ranks { width: 100%; display: grid; gap: var(--s2); }
.ranks-title { color: var(--muted); font-size: var(--fs-sm); font-weight: 650; }
.ranks-list { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; }
.rank-tile {
  width: 100%;
  height: 100%;
  min-height: 100px;
  margin-bottom: 3px;
  padding: 10px 3px 8px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  gap: 5px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--cat-soft);
  color: var(--cat-ink);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cat) 35%, transparent);
  font: inherit;
  cursor: pointer;
  transition: translate .08s, box-shadow .08s;
}
.rank-tile:active { translate: 0 3px; box-shadow: 0 0 0 transparent; }
.rank-tile .cat-badge { --size: 30px; }
.rank-tile .r { font-size: 1.3rem; font-weight: 800; font-stretch: var(--narrow); line-height: 1; font-variant-numeric: tabular-nums; }
.rank-tile .n { align-self: start; font-size: .7rem; font-weight: 700; line-height: 1.1; text-wrap: balance; }
.rank-tile.first { background: var(--cat); color: var(--on-cat); box-shadow: 0 3px 0 color-mix(in srgb, var(--cat) 60%, #000); }
.rank-tile.first .cat-badge { background: var(--on-cat); color: var(--cat); }
.rank-tile.none .r { opacity: .5; }

/* Classement : choix de la catégorie, puis sa carte d'identité */
.lb-cats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 var(--s3); padding: 0; }
.lb-cat {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 62px;
  margin-bottom: 3px;
  padding: 7px 9px 8px;
  display: grid;
  align-content: space-between;
  justify-items: start;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--line-strong);
  font: 750 .88rem/1.1 var(--font);
  font-stretch: 88%;
  text-align: left;
  cursor: pointer;
  transition: translate .08s, box-shadow .08s;
}
.lb-cat:active { translate: 0 3px; box-shadow: 0 0 0 transparent; }
.lb-cat .cat-badge { --size: 24px; }
.lb-cat .name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-cat .me-rank {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.lb-cat .me-rank:empty { display: none; }
.lb-cat[aria-pressed="true"] { border-color: var(--cat); background: var(--cat-soft); color: var(--cat-ink); box-shadow: 0 3px 0 var(--cat); }
.lb-cat[aria-pressed="true"] .me-rank { background: var(--cat); color: var(--on-cat); }

.lb-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px var(--s3);
  margin-bottom: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--cat-soft);
}
.lb-card .cat-badge { --size: 44px; grid-row: span 2; }
.lb-card h3 { align-self: end; color: var(--cat-ink); font-size: 1.35rem; letter-spacing: -.01em; }
.lb-card p { align-self: start; font-size: var(--fs-sm); }
.lb-champion {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 2px dashed color-mix(in srgb, var(--cat) 35%, transparent);
  font-size: var(--fs-sm);
}
.lb-champion:empty { display: none; }
.lb-champion strong { color: var(--cat-ink); }
.lb-champion .muted { font-size: var(--fs-xs); }

/* ---------- Animations ---------- */
@keyframes blink { 50% { opacity: 0; } }
@keyframes bump { 40% { scale: 1.12; } }
@keyframes flip {
  0% { transform: rotateX(0deg); background: var(--bg); border-color: var(--line-strong); color: var(--ink); }
  49% { transform: rotateX(90deg); background: var(--bg); border-color: var(--line-strong); color: var(--ink); }
  50% { transform: rotateX(90deg); background: var(--row-bg); border-color: var(--row-line); color: var(--row-fg); }
  100% { transform: rotateX(0deg); }
}
@keyframes win-pop { 40% { scale: 1.06; } }
@keyframes shake { 20%, 60% { translate: -7px 0; } 40%, 80% { translate: 7px 0; } }
@keyframes stamp {
  0% { opacity: 0; scale: 1.9; rotate: -14deg; }
  55% { opacity: 1; scale: .94; }
  100% { opacity: 1; scale: 1; rotate: -4deg; }
}
@keyframes toast-in { from { opacity: 0; translate: 0 -10px; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes pop-in { from { opacity: 0; scale: .94; } }
@keyframes photo-in { from { opacity: .2; scale: 1.04; } }
@keyframes item-in { from { opacity: 0; translate: 28px 0; } }
@keyframes tag-drop { 0% { opacity: 0; translate: 0 -24px; rotate: -16deg; } 100% { opacity: 1; } }
@keyframes sq-pop { from { scale: 0; } }
@keyframes swing {
  0% { rotate: -32deg; }
  30% { rotate: 20deg; }
  52% { rotate: -11deg; }
  72% { rotate: 6deg; }
  88% { rotate: -2deg; }
  100% { rotate: 0deg; }
}
@keyframes sway { 50% { rotate: 8deg; } }

/* Entrée d'un nouvel objet (classe posée par juice.js) */
.game.enter .photo, .game.enter .ad { animation: item-in .32s var(--ease-out) both; }
.game.enter .ad { animation-delay: .05s; }

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

/* ---------- Écrans peu hauts : tout tient sans défiler ---------- */
@media (max-height: 740px) {
  :root { --row-h: 36px; --row-h-current: 48px; --row-h-empty: 26px; --key-h: 46px; --fs-title: 1.3rem; }
  .topbar { height: 50px; }
  .photo { min-height: 140px; }
  .ad { padding-top: 10px; gap: 4px; }
  .board { gap: 5px; margin-top: 10px; }
  .row.current .value { font-size: 1.5rem; }
}
@media (max-height: 620px) {
  :root { --row-h: 32px; --row-h-current: 42px; --row-h-empty: 22px; --key-h: 42px; --fs-title: 1.15rem; --fs-price: 1.75rem; }
  .photo { min-height: 84px; }
  .ad-title { -webkit-line-clamp: 1; }
  .board { gap: 4px; }
  .dock { padding-top: 6px; }
  /* Le résultat ne dépasse pas la hauteur du pavé qu'il remplace */
  .result { gap: var(--s2); }
  .result-tag { padding: 6px 16px 7px 32px; }
  .result-actions .btn { height: 44px; }
  .photo-cat { top: 8px; left: 8px; height: 28px; font-size: .85rem; }
}

/* ---------- Écrans étroits ---------- */
@media (max-width: 360px) {
  .topbar { gap: 4px; padding-left: 8px; }
  .brand .logo { width: 30px; height: 30px; }
  .icon-btn { width: 34px; height: 36px; }
  .progress { gap: 4px; }
  .progress button { width: 27px; height: 30px; font-size: .92rem; }
  .progress .current.named { padding: 0 7px; font-size: .84rem; }
  .keys-digits { gap: 4px; }
  .key { font-size: 1.3rem; }
  .row { padding: 0 10px; }
  .row .hint { font-size: var(--fs-xs); }
  .result-actions .btn { font-size: 1rem; }
  .result-head { gap: var(--s3); }
  .lb-cats { gap: 5px; }
  .lb-cat { height: auto; min-height: 62px; gap: 4px; padding: 6px 7px 7px; font-size: .8rem; }
  .lb-cat .name { white-space: normal; line-height: 1.05; }
  .ranks-list { gap: 4px; }
  .rank-tile { min-height: 94px; }
  .rank-tile .r { font-size: 1.12rem; }
  .rank-tile .n { font-size: .64rem; }
  .splash-cats .cat-badge { --size: 34px; }
}