/* Fredoka et Nunito (SIL Open Font License), hébergées avec le jeu : plus d’attente de Google Fonts au démarrage.
   Sous-ensembles latin, latin étendu et cyrillique (le russe) ; régénérer : voir prototype/publier-web.mjs. */
/* latin-ext */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(polices/fredoka-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(polices/fredoka-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(polices/fredoka-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(polices/fredoka-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(polices/fredoka-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(polices/fredoka-latin.woff2) format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/nunito-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/nunito-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/nunito-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/nunito-latin.woff2) format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(polices/nunito-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(polices/nunito-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(polices/nunito-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(polices/nunito-latin.woff2) format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(polices/nunito-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(polices/nunito-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(polices/nunito-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(polices/nunito-latin.woff2) format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(polices/nunito-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(polices/nunito-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(polices/nunito-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(polices/nunito-latin.woff2) format('woff2');
  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;
}

/* styles/base.css */
/* Le socle de l'interface : jetons, mise en page, barre du haut, onglets du bas, feuilles, toasts,
   bannières, écran d'accueil, accéléré. Un seul monde visuel, pastel, volontairement indépendant du
   thème du lecteur. Les modules des autres agents ont chacun leur fichier (voir ARCHITECTURE.md). */
/* La page claude.ai enveloppe le jeu dans son propre squelette, qui impose img { max-width: 100% } : les
   sprites (Elodie, Princesse, les dégâts) vivent dans des conteneurs sans largeur et disparaissaient
   (largeur 0). Le jeu dimensionne ses images lui-même. */
img { max-width: none; }
:root {
  --socle: #A8C3D0;        /* le bleu du socle des rendus : le fond se fond dans l'image */
  --socle-fonce: #8FB0C0;
  --creme: #FBF3E4;
  --creme-2: #F1E4CC;
  --menthe: #7FB08A;
  --menthe-fonce: #4F8A5E;
  --rose: #F07AA0;
  --rose-fonce: #C9477A;
  --rose-pale: #FBD9E3;
  --orange: #FF9A3D;
  --rouge: #E5484D;
  --or: #F2B53A;
  --nuit: #2C2F5B;
  --encre: #3A2632;
  --encre-2: #7A6470;
  --verre: rgba(255, 250, 244, 0.9);
  --ombre-bouton: 0 5px 0 rgba(58, 38, 50, 0.28);
  --affichage: 'Fredoka', 'Trebuchet MS', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --texte: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--socle); color: var(--encre); font-family: var(--texte); overflow: hidden;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:focus-visible { outline: 3px solid var(--rose-fonce); outline-offset: 2px; }
button:disabled { opacity: 0.55; cursor: default; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

.app { position: fixed; inset: 0; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; overflow: clip; }

/* ---------------------------------------------------------------- barre du haut */
.hud { display: flex; gap: 7px; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 6px; z-index: 5; }
.pilule { display: inline-flex; align-items: center; gap: 6px; background: var(--verre); border-radius: 999px; padding: 5px 11px 5px 6px; position: relative;
  font-weight: 900; font-size: 15px; box-shadow: 0 2px 0 rgba(58, 38, 50, 0.15); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chaos { flex: 1; min-width: 0; }
.jauge { flex: 1; position: relative; height: 12px; border-radius: 999px; background: rgba(58, 38, 50, 0.13); overflow: hidden; min-width: 0; }
/* téléphone : avec des pièces à quatre chiffres, la jauge n'avait plus de place et le pourcentage passait
   sous les pièces (« 29 % » devenait « 2 ») ; la jauge devient un trait sous le pourcentage, sans l'icône */
@media (max-width: 440px) {
  .chaos { justify-content: center; padding: 4px 10px 8px; }
  .chaos > svg { display: none; }
  .chaos .jauge { position: absolute; left: 9px; right: 9px; bottom: 4px; height: 4px; }
}
@media (max-width: 380px) {
  .hud { gap: 5px; }
  .hud .pilule { padding-left: 6px; padding-right: 8px; }
}
.jauge i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; transition: width 0.5s cubic-bezier(.3,1.4,.5,1);
  background: linear-gradient(90deg, var(--menthe) 0%, #E8D05A 35%, var(--orange) 65%, var(--rouge) 100%); background-size: 200px 100%;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.12), inset 0 3px 0 rgba(255,255,255,0.35); }
.pieces .badge { position: absolute; right: -2px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--rouge); border: 2px solid white; }
/* niveau : un rond, l'XP en anneau autour (--p de 0 à 1) */
.niveau { --p: 0; width: 38px; height: 38px; border-radius: 50%; flex: none; position: relative; display: grid; place-items: center;
  background: conic-gradient(var(--rose) calc(var(--p) * 1turn), rgba(58,38,50,0.14) 0); box-shadow: 0 2px 0 rgba(58,38,50,0.15); }
.niveau::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--creme); }
.niveau span { position: relative; font-family: var(--affichage); font-weight: 700; font-size: 17px; color: var(--rose-fonce); }
/* jauge bonus : un rond doré qui se remplit ; il pulse quand un bonus est prêt */
.rond-bonus { --p: 0; width: 38px; height: 38px; border-radius: 50%; flex: none; position: relative; display: grid; place-items: center;
  background: conic-gradient(var(--or) calc(var(--p) * 1turn), rgba(58,38,50,0.14) 0); box-shadow: 0 2px 0 rgba(58,38,50,0.15); }
.rond-bonus::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--creme); }
.rond-bonus svg { position: relative; width: 20px; height: 20px; }
.rond-bonus b { position: absolute; right: -4px; bottom: -4px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--or); color: white;
  font-size: 11px; font-weight: 900; display: grid; place-items: center; padding: 0 3px; }
.rond-bonus.pret { animation: pulse 1.1s ease-in-out infinite; }
.rond-bonus.pret b { background: var(--rose-fonce); }
@keyframes pulse { 50% { transform: scale(1.12); } }
.zone-hud:empty { display: none; }
.zone-hud { display: flex; gap: 6px; align-items: center; }
.bump { animation: bump 0.35s ease; }
@keyframes bump { 40% { transform: scale(1.18); } }

/* ---------------------------------------------------------------- onglets du bas */
.onglets { display: flex; gap: 6px; padding: 6px 10px calc(env(safe-area-inset-bottom, 0px) + 8px); z-index: 5; }
.onglet { flex: 1; background: var(--verre); border-radius: 18px; padding: 7px 4px 6px; font-weight: 900; font-size: 12px; box-shadow: 0 3px 0 rgba(58,38,50,0.15);
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; white-space: nowrap; }
.onglet svg { width: 24px; height: 24px; }
.onglet.soir { background: linear-gradient(180deg, #6F74C9, var(--nuit)); color: white; }
.onglet.menu { flex: 0.8; }
.zone-barre { display: flex; gap: 6px; }
.zone-barre:empty { display: none; }

/* ---------------------------------------------------------------- écrans plein cadre et feuilles */
.couvre { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; }
.chargement { background: var(--socle); align-items: center; justify-content: center; font-family: var(--affichage); font-weight: 600; font-size: 22px; color: white; z-index: 60; }
.intro { background: linear-gradient(180deg, #FFD6E4, var(--creme) 55%); padding: calc(env(safe-area-inset-top, 0px) + 28px) 22px calc(env(safe-area-inset-bottom, 0px) + 24px);
  align-items: center; justify-content: center; text-align: center; gap: 16px; }
.intro .portrait { width: 176px; height: 176px; border-radius: 50%; overflow: hidden; border: 6px solid white; box-shadow: 0 0 0 5px var(--rose), 0 14px 30px rgba(58,38,50,0.25); }
.intro .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.intro h1 { font-family: var(--affichage); font-weight: 700; font-size: 44px; line-height: 1; text-wrap: balance; }
.intro .devise { font-family: var(--affichage); font-weight: 600; font-size: 22px; color: var(--rose-fonce); }
.intro p { font-weight: 700; font-size: 16px; line-height: 1.45; max-width: 34ch; color: var(--encre-2); }
.gros-bouton { display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 22px; font-family: var(--affichage); font-weight: 700;
  font-size: 22px; color: white; padding: 15px 26px; background: linear-gradient(180deg, #FF8DB2, var(--rose) 55%, var(--rose-fonce));
  box-shadow: var(--ombre-bouton), inset 0 2px 0 rgba(255,255,255,0.45); text-shadow: 0 2px 0 rgba(120, 20, 60, 0.35); }
.gros-bouton:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(58,38,50,0.28); }
.gros-bouton.nuit { background: linear-gradient(180deg, #6F74C9, #4A4FA3 55%, var(--nuit)); text-shadow: 0 2px 0 rgba(20,20,60,0.4); }
.gros-bouton.vert { background: linear-gradient(180deg, #A6E3B3, var(--menthe) 55%, var(--menthe-fonce)); text-shadow: 0 2px 0 rgba(30,80,40,0.4); }
.petit-lien { font-weight: 900; font-size: 13px; color: var(--encre-2); text-decoration: underline; text-underline-offset: 3px; }

/* l'accéléré : l'horloge et la frise par-dessus la vue d'ensemble ; la barre du haut et les onglets s'effacent */
.app.accel .hud, .app.accel .onglets, .app.accel .puces-scene, .app.accel .onglets-pieces { visibility: hidden; }
.accelere { pointer-events: none; }
.accelere .voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60,30,80,0.55), rgba(255,140,60,0.10) 30%, rgba(255,140,60,0.05) 60%, rgba(40,20,60,0.55)); }
.accelere .haut { position: relative; text-align: center; color: white; padding-top: calc(env(safe-area-inset-top, 0px) + 18px); text-shadow: 0 3px 0 rgba(58,38,50,0.45); }
.accelere .h { font-family: var(--affichage); font-weight: 700; font-size: 60px; line-height: 1; font-variant-numeric: tabular-nums; }
.accelere .j { font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; }
.frise { position: relative; margin: 12px 28px 0; height: 8px; border-radius: 99px; background: rgba(255,255,255,0.35); overflow: hidden; }
.frise b { position: absolute; inset: 0; border-radius: 99px; background: white; transform: scaleX(0); transform-origin: left center; }
.ff { display: inline-block; margin-top: 10px; background: rgba(58,38,50,0.55); color: white; border-radius: 99px; padding: 4px 12px; font-weight: 900; font-size: 13px; text-shadow: none; }
.legende { position: absolute; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); background: var(--verre); border-radius: 20px; padding: 12px 15px;
  font-weight: 800; font-size: 17px; line-height: 1.3; box-shadow: 0 8px 20px rgba(58,38,50,0.25); text-shadow: none; }
.legende small { display: block; font-weight: 900; font-size: 11.5px; letter-spacing: 1.5px; color: var(--rose-fonce); text-transform: uppercase; margin-bottom: 2px; }
.legende .replique { display: block; font-family: var(--affichage); font-weight: 600; font-size: 19px; margin-top: 4px; color: var(--encre); }
.accelere .passer { pointer-events: auto; position: absolute; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); background: rgba(58,38,50,0.6); color: white;
  border-radius: 99px; padding: 8px 16px; font-weight: 900; font-size: 14px; }
.accelere .compte { position: absolute; left: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 46px); color: white; font-weight: 900; font-size: 14px; text-shadow: 0 2px 0 rgba(0,0,0,0.3); }

/* ---------------------------------------------------------------- toasts et bannières */
.toasts { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 150px); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { max-width: min(340px, calc(100% - 32px)); background: white; border-radius: 18px; padding: 10px 14px; font-weight: 800; font-size: 15px; line-height: 1.3;
  box-shadow: 0 8px 22px rgba(58,38,50,0.28); display: flex; gap: 10px; align-items: center; animation: toast 3.2s ease forwards; }
.toast img.vis { width: 92px; border-radius: 10px; flex: none; }
.toast img.vis.spr { width: 56px; height: 56px; object-fit: contain; border-radius: 0; }
.toast .emo { font-size: 38px; }
.toast .mini-chat { width: 48px; flex: none; }
.toast small { display: block; font-weight: 900; font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; }
.toast.moment { background: linear-gradient(135deg, #FFF3C9, #FFD978); transform: rotate(-2deg); }
.toast.moment small { color: #8a5a0a; }
.toast.ok small { color: var(--menthe-fonce); }
.toast.faille { background: #FFE9D6; }
.toast.faille small { color: #C2571A; }
.pastille-ok, .pastille-faille { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: white; font-weight: 900; font-size: 20px; }
.pastille-ok { background: var(--menthe); }
.pastille-ok::after { content: ''; width: 14px; height: 8px; border: 4px solid white; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -2px); }
.pastille-faille { background: var(--orange); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-14px) scale(0.9); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }

.banniere { position: absolute; left: 50%; top: 16%; z-index: 30; white-space: nowrap; pointer-events: none;
  background: linear-gradient(180deg, #A6E3B3, var(--menthe) 60%, var(--menthe-fonce)); color: white; font-family: var(--affichage); font-weight: 700;
  font-size: 22px; padding: 10px 22px; border-radius: 18px; text-shadow: 0 2px 0 rgba(30, 80, 40, 0.4); box-shadow: 0 5px 0 rgba(30,80,40,0.35);
  animation: banniere 2.2s ease forwards; }
.banniere.or { background: linear-gradient(180deg, #FFE69A, var(--or) 55%, #D18E1C); text-shadow: 0 2px 0 rgba(120,70,0,0.4); box-shadow: 0 5px 0 rgba(120,70,0,0.35); }
@keyframes banniere { 0% { transform: translate(-50%, 20px) scale(0.6) rotate(-2deg); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.06) rotate(-2deg); opacity: 1; }
  80% { transform: translate(-50%, 0) scale(1) rotate(-2deg); opacity: 1; } 100% { transform: translate(-50%, -20px) scale(1) rotate(-2deg); opacity: 0; } }
.gain { position: absolute; z-index: 30; font-family: var(--affichage); font-weight: 700; font-size: 26px; color: white; pointer-events: none; white-space: nowrap;
  text-shadow: 0 3px 0 var(--menthe-fonce), 0 0 14px rgba(255,255,255,0.9); animation: gain 1.1s ease-out forwards; transform: translate(-50%, -50%); }
@keyframes gain { to { transform: translate(-50%, -150%); opacity: 0; } }
.etincelles { position: absolute; z-index: 30; pointer-events: none; }
.etincelles i { position: absolute; width: 10px; height: 10px; background: white; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: eclate 0.7s ease-out forwards; }
@keyframes eclate { to { transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(90deg); opacity: 0; } }

/* ---------------------------------------------------------------- feuilles */
.feuille { background: rgba(40, 24, 40, 0.45); justify-content: flex-end; }
.feuille .panneau { background: var(--creme); border-radius: 28px 28px 0 0; max-height: 92%; display: flex; flex-direction: column;
  box-shadow: 0 -10px 30px rgba(58,38,50,0.25); animation: monte-panneau 0.3s cubic-bezier(.2,1.2,.4,1); max-width: 520px; width: 100%; margin: 0 auto; }
@keyframes monte-panneau { from { transform: translateY(40%); opacity: 0.4; } }
.panneau header { display: flex; align-items: center; gap: 10px; padding: 16px 18px 8px; }
.panneau header h2 { font-family: var(--affichage); font-weight: 700; font-size: 25px; line-height: 1.1; flex: 1; text-wrap: balance; }
.fermer { width: 38px; height: 38px; border-radius: 50%; background: var(--creme-2); font-weight: 900; font-size: 18px; flex: none; }
.panneau .corps { overflow-y: auto; padding: 4px 16px calc(env(safe-area-inset-bottom, 0px) + 20px); display: flex; flex-direction: column; gap: 10px; }
.k { font-weight: 900; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--encre-2); }
.note { font-weight: 700; font-size: 13.5px; line-height: 1.4; color: var(--encre-2); }
.note.blanc { color: white; text-align: center; }

/* le téléphone d'Elodie */
.tel { background: linear-gradient(180deg, #F9A9C5, #F07AA0); }
/* le téléphone prend toute la hauteur, même quand son écran est court (un seul message) : son
   en-tête reste en haut, comme un vrai téléphone, au lieu de flotter au milieu du rose */
.tel .panneau { background: transparent; box-shadow: none; min-height: 92%; }
.tel header h2, .tel header .k { color: white; }
.tel .verrou { text-align: center; color: white; font-family: var(--affichage); font-weight: 600; font-size: 64px; line-height: 1; padding-top: 6px; text-shadow: 0 2px 12px rgba(120,20,60,0.3); }
.tel .date { text-align: center; color: white; font-weight: 900; font-size: 15px; }
/* flex: none : une rangée qui défile en largeur peut sinon être écrasée en hauteur par la colonne
   du panneau (son min-height tombe à 0), et les onglets sont coupés à mi-hauteur */
.tel-onglets { display: flex; flex: none; gap: 6px; padding: 0 14px 8px; overflow-x: auto; scrollbar-width: none; }
.tel-onglets button { flex: none; background: rgba(150,30,80,0.22); color: white; font-weight: 900; font-size: 13px; padding: 7px 12px; border-radius: 99px; position: relative;
  text-shadow: 0 1px 2px rgba(120,20,60,0.35); }
.tel-onglets button.actif { background: white; color: var(--rose-fonce); text-shadow: none; }
.tel-onglets b { margin-left: 5px; background: var(--rose-fonce); color: white; border-radius: 99px; padding: 0 6px; font-size: 11px; }
.notif { display: flex; gap: 10px; background: var(--verre); border-radius: 18px; padding: 10px 12px; align-items: flex-start; box-shadow: 0 4px 14px rgba(120,20,60,0.15); }
.notif .ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--creme-2); overflow: hidden; }
.notif .ic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.notif .ic img.spr, .notif .ic img.vis.spr { object-fit: contain; padding: 3px; }
.notif .ic img.vis { object-fit: cover; }
.notif .ic .emo { font-size: 22px; }
.notif .ic .pt { width: 14px; height: 14px; border-radius: 50%; background: var(--rose); }
.notif .ic .pt.rouge { background: var(--rouge); } .notif .ic .pt.vert { background: var(--menthe); } .notif .ic .pt.orange { background: var(--orange); }
.notif .l1 { display: flex; justify-content: space-between; gap: 8px; font-weight: 900; font-size: 11.5px; color: var(--encre-2); text-transform: uppercase; letter-spacing: 0.5px; }
.notif .l2 { font-weight: 800; font-size: 15px; line-height: 1.28; margin-top: 1px; }
.notif .corps-n { flex: 1; min-width: 0; }
.notif.tete { background: white; }
.notif.tete .l2 { font-family: var(--affichage); font-weight: 700; font-size: 20px; color: var(--rose-fonce); }
.notif.ok .ic { background: #CDEBD4; }
.notif.faille .ic { background: #FFD9B8; }
.notif.moment { background: linear-gradient(135deg, #FFF3C9, #FFE08A); }
.notif.plus { justify-content: center; font-weight: 900; font-size: 13px; color: var(--encre-2); padding: 7px; }
.bilan { background: white; border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 30px rgba(120,20,60,0.2); }
.bilan .ligne { display: flex; align-items: center; gap: 10px; }
.bilan .val { font-family: var(--affichage); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; }

/* les parades du soir */
.prev { background: white; border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.prev .l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.prev .quoi { font-weight: 800; font-size: 15px; line-height: 1.2; }
.prev .pc { font-family: var(--affichage); font-weight: 700; font-size: 21px; color: var(--rose-fonce); flex: none; font-variant-numeric: tabular-nums; }
.barre { height: 6px; border-radius: 3px; background: var(--creme-2); overflow: hidden; }
.barre i { display: block; height: 100%; border-radius: 3px; background: var(--rose); transition: width 0.4s ease; }
.puce { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 12.5px; padding: 6px 11px; border-radius: 99px;
  background: var(--menthe); color: white; box-shadow: 0 2px 0 var(--menthe-fonce); }
.puce.posee { background: white; color: var(--menthe-fonce); box-shadow: inset 0 0 0 2px var(--menthe); }
.puce.grise { background: var(--creme-2); color: var(--encre-2); box-shadow: none; }
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.creneau { border-radius: 16px; padding: 10px; min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 4px; font-weight: 900; font-size: 13px; line-height: 1.15; }
.creneau.plein { background: linear-gradient(135deg, #CFEBD6, var(--menthe)); color: #1f4a2b; }
.creneau.vide { border: 3px dashed var(--creme-2); color: var(--encre-2); align-items: center; }
.creneau.achat { background: var(--creme-2); color: var(--encre); align-items: center; }
.usages { display: flex; gap: 4px; }
.usages i { width: 9px; height: 9px; border-radius: 50%; background: white; }
.notifs-prevues { margin: 0; padding: 0; }
.notifs-prevues li { list-style: none; font-weight: 800; font-size: 14px; line-height: 1.3; padding: 8px 0; border-top: 1px solid var(--creme-2); }
.notifs-prevues li b { font-variant-numeric: tabular-nums; color: var(--rose-fonce); margin-right: 6px; }

/* l'album */
.grille-album { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.carte { border-radius: 16px; padding: 6px; background: white; box-shadow: 0 4px 0 rgba(58,38,50,0.1); position: relative; }
.carte .visuel { aspect-ratio: 16 / 10; border-radius: 11px; overflow: hidden; display: grid; place-items: center; font-size: 42px;
  background: linear-gradient(135deg, var(--rose-pale), #FFE9C2); max-width: 100%; }
.carte .visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte .visuel img.spr { object-fit: contain; padding: 8px; }
/* la rareté reste en minuscules dans le texte (que la traduction la reconnaisse) : la majuscule vient du style */
.carte .num { font-weight: 900; font-size: 10.5px; color: var(--encre-2); margin: 6px 4px 0; letter-spacing: 1px; text-transform: uppercase; }
.carte .t { font-family: var(--affichage); font-weight: 600; font-size: 14.5px; margin: 0 4px 3px; line-height: 1.15; }
.carte.rare { background: linear-gradient(135deg, #C8F0D4, #8FD1E8); }
.carte.legendaire { background: linear-gradient(135deg, #FFF0B0, var(--or) 40%, #FFD0E6 70%, #B6E6FF); }
.carte.cachee .visuel { background: repeating-linear-gradient(45deg, #EADCE4 0 10px, #E3D2DC 10px 20px); font-size: 13px; font-weight: 800; color: var(--encre-2);
  text-align: center; padding: 8px; line-height: 1.25; }
.pips { display: flex; gap: 4px; margin: 3px 4px 2px; flex-wrap: wrap; }
.pips i { width: 12px; height: 12px; border-radius: 50%; background: var(--creme-2); }
.pips i.on { background: var(--rose); }

/* le menu et les outils */
.menu .ligne-menu { display: flex; align-items: center; gap: 12px; width: 100%; background: white; border-radius: 16px; padding: 12px 14px; text-align: left;
  font-weight: 800; font-size: 15.5px; box-shadow: 0 3px 0 rgba(58,38,50,0.1); }
.menu .ligne-menu .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--creme-2); display: grid; place-items: center; font-size: 18px; flex: none; }
.menu .ligne-menu span:nth-child(2) { flex: 1; }
.bascule { width: 42px; height: 24px; border-radius: 99px; background: var(--creme-2); position: relative; flex: none; transition: background 0.2s; }
.bascule::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform 0.2s; }
.bascule.on { background: var(--menthe); }
.bascule.on::after { transform: translateX(18px); }
.outils button.gros-bouton { font-size: 16px; padding: 11px 12px; }
.rangee-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

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

/* ------------------------------------------------------------------ les langues (js/noyau/langue.js) */
.valeur-menu { margin-inline-start: auto; font-weight: 800; font-size: 13px; color: var(--rose-fonce); }
.ligne-langue small { margin-inline-start: auto; font-weight: 700; font-size: 12px; color: var(--encre-2); }
.ligne-langue.actif { background: var(--rose-pale); }
/* Fredoka n'a ni cyrillique ni arabe : les titres passent à Nunito (cyrillique) ou à Cairo (arabe) */
html.lang-ru { --affichage: 'Nunito', 'Trebuchet MS', system-ui, sans-serif; }
html.lang-ru .intro h1, html.lang-ru .gros-bouton, html.lang-ru h2, html.lang-ru h3 { font-weight: 800; }
html.lang-ar { --affichage: 'Cairo', 'Fredoka', system-ui, sans-serif; --texte: 'Cairo', 'Nunito', system-ui, sans-serif; }
html.lang-ar body { line-height: 1.4; }
/* arabe : la scène, les images et les canvas gardent leur sens ; les puces de texte se lisent de droite à gauche */
html.rtl .bascule { margin-inline-start: auto; }
/* arabe : les panneaux et les bulles se lisent de droite à gauche (icône à droite, bascule à gauche) ; la scène garde son sens */
html.rtl #panneau, html.rtl .toasts, html.rtl .mj-tete, html.rtl .consigne, html.rtl .sa-carte, html.rtl .cd-carte, html.rtl .intro { direction: rtl; }
html.rtl .toast small, html.rtl .banniere { direction: rtl; }

/* styles/scene.css */
/* La scène : onglets des pièces, plateau et calques, dégâts, crasse, personnages, bulles,
   télégraphe, vue d'ensemble. Tout ce qui bouge le fait par transform (jamais left/top en boucle). */

.scene { flex: 1; position: relative; min-height: 0; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- les onglets des pièces */
.onglets-pieces { display: flex; gap: 4px; padding: 0 8px 4px; z-index: 4; }
.onglet-piece { flex: 1; min-width: 0; height: 40px; border-radius: 14px; background: rgba(255, 250, 244, 0.72); position: relative;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; color: var(--encre-2);
  box-shadow: 0 2px 0 rgba(58,38,50,0.12); transition: background 0.2s; }
.onglet-piece.maison { flex: 0 0 40px; }
.onglet-piece.sortie { flex: 0 0 40px; }
.onglet-piece.sortie[hidden] { display: none; }
.onglet-piece.sortie svg { width: 22px; height: 22px; }
.onglet-piece.maison svg { width: 22px; height: 22px; }
.onglet-piece .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
/* la porte de la ville en plus : sept onglets sur un téléphone, « Chambre » finissait en « Cham… » ;
   les deux boutons ronds maigrissent et les noms passent à 11 px */
.onglets-pieces:has(.sortie:not([hidden])) { gap: 3px; }
.onglets-pieces:has(.sortie:not([hidden])) .onglet-piece { font-size: 11px; }
.onglets-pieces:has(.sortie:not([hidden])) .onglet-piece.maison,
.onglets-pieces:has(.sortie:not([hidden])) .onglet-piece.sortie { flex-basis: 34px; }
.onglets-pieces:has(.sortie:not([hidden])) .onglet-piece .nom { padding: 0; }
.onglet-piece.actif { background: white; color: var(--encre); box-shadow: 0 2px 0 rgba(58,38,50,0.18), inset 0 -3px 0 var(--rose); }
.onglet-piece.dore { background: linear-gradient(180deg, #FFF3C9, #FFD978); color: #7a520a; }
.onglet-piece.dore.actif { box-shadow: 0 2px 0 rgba(120,70,0,0.25), inset 0 -3px 0 var(--or); }
.onglet-piece .nb { position: absolute; right: -3px; top: -5px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px; background: var(--rose-fonce);
  color: white; font-size: 11px; line-height: 18px; text-align: center; box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.onglet-piece .tetes { position: absolute; left: 2px; bottom: -4px; display: flex; gap: 1px; }
.onglet-piece .tetes i, .puce-elodie .tete-e { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid white; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  background-repeat: no-repeat; background-color: var(--rose-pale); }
.tete-e { background-image: url(img/elodie/debout.webp?v=5c76b5e5); background-size: 55px auto; background-position: -12px -4px; }
.tete-c { background-image: url(img/chat/assis.webp?v=d759949a); background-size: 40px auto; background-position: -15px -3px; background-color: #DDE3EA !important; }
.onglet-piece.tremble { animation: tremble-onglet 0.4s ease; }
@keyframes tremble-onglet { 20% { transform: translateX(-4px) rotate(-3deg); } 40% { transform: translateX(4px) rotate(3deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ---------------------------------------------------------------- le cadre et le plateau */
.cadre { flex: 1; position: relative; min-height: 0; overflow: hidden; overflow: clip; touch-action: none; }
/* clip et non hidden seul : un cadre « hidden » reste défilable par le navigateur, qui le fait glisser
   pour montrer un dégât touché au bord de l'image (focus) : toute la scène partait alors de côté */
.plateau { position: absolute; will-change: transform; }
.plateau > .fond { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.calque { position: absolute; inset: 0; pointer-events: none; }
#calque-monde { isolation: isolate; }
.plateau.sort-g { animation: sort-g 0.11s ease-in forwards; }
.plateau.sort-d { animation: sort-d 0.11s ease-in forwards; }
.plateau.entre-d { animation: entre-d 0.15s ease-out; }
.plateau.entre-g { animation: entre-g 0.15s ease-out; }
.plateau.fond-sort { animation: fond-sort 0.11s ease-in forwards; }
.plateau.fond-entre { animation: fond-entre 0.15s ease-out; }
.plateau.zoome { transition: transform 0.4s cubic-bezier(.4,0,.2,1); transform: scale(2.6); }
.plateau.apparait { animation: fond-entre 0.25s ease-out; }
.plateau.butee { animation: butee 0.25s ease; }
@keyframes sort-g { to { transform: translateX(-35%); opacity: 0; } }
@keyframes sort-d { to { transform: translateX(35%); opacity: 0; } }
@keyframes entre-d { from { transform: translateX(35%); opacity: 0; } }
@keyframes entre-g { from { transform: translateX(-35%); opacity: 0; } }
@keyframes fond-sort { to { opacity: 0; transform: scale(0.97); } }
@keyframes fond-entre { from { opacity: 0; transform: scale(1.03); } }
@keyframes butee { 40% { transform: translateX(-10px); } 70% { transform: translateX(6px); } }

/* ---------------------------------------------------------------- les dégâts */
.degat { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.degat .spr { position: absolute; pointer-events: none; -webkit-user-drag: none; }
.degat .spr.debout { filter: drop-shadow(0 3px 2px rgba(58,38,50,0.28)); }
.degat.effet-demi_cache .spr { opacity: 0.6; }
.degat.effet-anime .spr { animation: vole 1.6s ease-in-out infinite; }
@keyframes vole { 25% { transform: translate(12px, -9px) rotate(18deg); } 50% { transform: translate(-6px, -16px); } 75% { transform: translate(-13px, 2px) rotate(-14deg); } }
.degat .zone { position: absolute; pointer-events: auto; border-radius: 40%; }
.degat .anneau { position: absolute; border-radius: 50%; border: 2.5px dashed rgba(255,255,255,0.9); box-shadow: 0 0 0 1px rgba(201,71,122,0.35);
  pointer-events: none; animation: anneau 2.2s ease-in-out infinite; }
.degat.mini .anneau, .degat.mini .zone { display: none; }
@keyframes anneau { 50% { transform: scale(1.12); opacity: 0.55; } }
.degat.cache { visibility: hidden; }
.degat.nait { animation: nait 0.55s cubic-bezier(.3,1.6,.5,1); }
@keyframes nait { 0% { opacity: 0; filter: brightness(2); } 40% { opacity: 1; } 100% { filter: none; } }
.degat .etiquette { position: absolute; left: 0; top: -70px; transform: translateX(-50%); white-space: nowrap; background: var(--rose-fonce); color: white; font-weight: 900;
  font-size: 11px; padding: 3px 8px; border-radius: 99px; letter-spacing: 0.4px; animation: apparait 0.3s ease; pointer-events: none; }
@keyframes apparait { from { opacity: 0; transform: translate(-50%, 6px); } }
/* effets sans sprite (odeur, fumée, eau, panne, point d'interrogation, pastille), --k : leur échelle */
.degat [class^="fx-"] { position: absolute; left: 0; top: 0; pointer-events: none; transform: scale(var(--k, 1)); transform-origin: 0 0; }
.fx-odeur { width: 70px; height: 70px; margin: -60px 0 0 -35px; border-radius: 50%; background: radial-gradient(circle, rgba(150,200,60,0.55), rgba(150,200,60,0) 70%); }
.fx-odeur i, .odeur i { position: absolute; bottom: 10px; width: 6px; height: 30px; border-radius: 6px; border-left: 3px solid rgba(120,160,40,0.85);
  animation: odeur 1.8s ease-in-out infinite; }
.fx-odeur i:nth-child(1) { left: 20px; } .fx-odeur i:nth-child(2) { left: 34px; animation-delay: 0.5s; } .fx-odeur i:nth-child(3) { left: 48px; animation-delay: 1s; }
@keyframes odeur { 0% { transform: translateY(8px) skewX(12deg); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-16px) skewX(-12deg); opacity: 0; } }
.fx-fumee { width: 10px; height: 10px; }
.fx-fumee i { position: absolute; left: -20px; top: -30px; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(120,120,120,0.75), rgba(120,120,120,0) 70%);
  animation: fumee 2.6s ease-out infinite; }
.fx-fumee i:nth-child(2) { animation-delay: 0.9s; left: -8px; } .fx-fumee i:nth-child(3) { animation-delay: 1.7s; left: -30px; }
@keyframes fumee { from { transform: translateY(0) scale(0.6); opacity: 0.9; } to { transform: translateY(-60px) scale(1.6); opacity: 0; } }
.fx-eau { width: 90px; height: 30px; margin: -18px 0 0 -45px; border-radius: 50%; background: radial-gradient(ellipse, rgba(140,200,240,0.65), rgba(140,200,240,0) 70%);
  animation: anneau 1.6s ease-in-out infinite; }
.fx-panne { margin: -48px 0 0 -38px; padding: 4px 8px; background: #FFE36B; color: var(--encre); font-weight: 900; font-size: 11px; border-radius: 4px;
  border: 2px solid var(--encre); transform: rotate(-6deg) scale(var(--k, 1)); white-space: nowrap; }
.fx-question { margin: -52px 0 0 -18px; width: 36px; height: 36px; border-radius: 50%; background: white; color: var(--rose-fonce); font-family: var(--affichage);
  font-weight: 700; font-size: 24px; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(58,38,50,0.2); animation: pulse 1.4s ease-in-out infinite; }
.fx-pastille { margin: -46px 0 0 -18px; width: 36px; height: 36px; border-radius: 50%; background: var(--rose); display: grid; place-items: center;
  box-shadow: 0 3px 0 rgba(58,38,50,0.2); animation: pulse 1.6s ease-in-out infinite; }
.fx-pastille svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- la crasse de fond */
.crasse { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: auto; }
.crasse .spr { position: absolute; pointer-events: auto; -webkit-user-drag: none; }
.crasse::before { content: ''; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; pointer-events: auto; }
.crasse .prog { --p: 0; position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(rgba(255,255,255,0.95) calc(var(--p) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 14px, #000 15px); mask: radial-gradient(circle, transparent 14px, #000 15px); }
.crasse.actif .prog { opacity: 1; }
.crasse.part { animation: part 0.25s ease-in forwards; }
@keyframes part { to { transform: var(--t, none) scale(0.2); opacity: 0; } }

/* ---------------------------------------------------------------- les personnages */
.perso { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.perso.hors { display: none; }
.perso .corps { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.perso .rebond { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.perso img { position: absolute; pointer-events: auto; -webkit-user-drag: none; touch-action: none; }
.perso .cible { position: absolute; pointer-events: auto; touch-action: none; border-radius: 40%; }
.perso .rebond.marche { animation: pas 0.35s ease-in-out infinite; }
/* la pose animée (js/scene/souple.js) : la toile remplace l'image, qui reste là pour les doigts ; la marche a son propre cycle */
.perso canvas.souple { position: absolute; display: none; pointer-events: none; }
.perso .rebond.souple > canvas.souple { display: block; }
.perso .rebond.souple > img { opacity: 0; }
.perso .rebond.marche.souple { animation: none; }
.perso.saute .rebond { animation: saut 0.35s ease-out; }
.perso .rebond.ecrase { animation: ecrase 0.12s ease-out; }
@keyframes pas { 50% { transform: translateY(-5px); } }
@keyframes saut { 50% { transform: translateY(-16px); } }
@keyframes ecrase { 50% { transform: scaleY(0.96); } }
.perso .ombre { position: absolute; left: 0; top: 0; width: var(--ombre, 60px); height: calc(var(--ombre, 60px) * 0.26); transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(ellipse, rgba(40,20,30,0.34), rgba(40,20,30,0) 70%); pointer-events: none; }
.perso .anneau-humeur { display: none; position: absolute; left: 0; top: 0; width: calc(var(--ombre, 60px) * 1.15); height: calc(var(--ombre, 60px) * 0.34);
  transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid var(--humeur, #A6D96A); box-shadow: 0 0 10px var(--humeur, #A6D96A); pointer-events: none; opacity: 0.9; }
.perso.avec-humeur .anneau-humeur { display: block; }
/* assise : l'anneau va sous ses pieds (mesurés sur le sprite) ; allongée : pas d'anneau sur le lit */
.perso .anneau-humeur { left: var(--pied-x, 0px); top: var(--pied-y, 0px); }
.perso.allongee .anneau-humeur { display: none !important; }
.perso .mouches { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.perso .mouche { --m: calc(22px * var(--kp, 1)); --r: calc(34px * var(--kp, 1)); position: absolute; width: var(--m);
  left: calc(var(--m) / -2); top: calc(var(--m) / -2); animation: orbite 2.2s linear infinite; }
.perso .mouche.m1 { animation-duration: 2.8s; animation-direction: reverse; }
.perso .mouche.m2 { animation-duration: 3.4s; animation-delay: -1.1s; }
@keyframes orbite { from { transform: rotate(0deg) translateX(var(--r)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); } }
/* lignes d'odeur : trois vagues qui montent au-dessus de sa tête */
.perso .odeur { position: absolute; left: -27px; top: calc(var(--dh, 20px) * -1 - 42px); width: 54px; height: 40px; display: flex; justify-content: space-between; transform: scale(var(--kp, 1)); transform-origin: 50% 100%; }
.perso .odeur svg { width: 12px; height: 34px; fill: none; stroke: rgba(130,165,50,0.85); stroke-width: 2.4; stroke-linecap: round; animation: odeur 1.9s ease-in-out infinite; }
.perso .odeur svg:nth-child(2) { animation-delay: 0.6s; margin-top: -8px; } .perso .odeur svg:nth-child(3) { animation-delay: 1.2s; }
.perso .odeur i:nth-child(1) { left: 2px; } .perso .odeur i:nth-child(2) { left: 16px; animation-delay: 0.6s; } .perso .odeur i:nth-child(3) { left: 30px; animation-delay: 1.2s; }
/* le chewing-gum collé dans une mèche, en haut de la tête, du côté où elle ne regarde pas */
.perso .gum-cheveux { position: absolute; width: calc(22px * var(--kp, 1)); left: calc(var(--dh, 20px) * -0.45); top: calc(var(--dh, 20px) * -0.8);
  transform: translate(-50%, -50%) scaleY(0.7) rotate(-15deg); }
.perso .mouches.miroir .gum-cheveux { left: calc(var(--dh, 20px) * 0.45); transform: translate(-50%, -50%) scaleY(0.7) rotate(15deg); }
/* dans un meuble (lit, baignoire) : ni ombre ni anneau au sol, ils seraient dessinés devant le meuble */
.perso.dans-meuble .ombre, .perso.dans-meuble .anneau-humeur { display: none !important; }
.perso .gum-chat { position: absolute; left: -8px; top: -38px; width: 34px; height: 34px; pointer-events: auto; }
.perso .gum-chat img { width: 26px; transform: scaleY(0.7); }

/* ---------------------------------------------------------------- les bulles (dans le cadre) */
.calque-bulles { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.bulle-perso { position: absolute; left: 0; top: 0; --queue: 0px; max-width: 180px; padding: 8px 12px; border-radius: 18px; background: white;
  font-family: var(--affichage); font-weight: 600; font-size: 15.5px; line-height: 1.2; text-align: center; box-shadow: 0 4px 0 rgba(58,38,50,0.18); will-change: transform; }
.bulle-perso::after { content: ''; position: absolute; left: calc(50% + var(--queue) - 7px); bottom: -6px; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.bulle-perso.pensee { font-family: var(--texte); font-style: italic; font-weight: 800; font-size: 14px; color: var(--encre-2); border-radius: 26px; background: #F6F2FF; }
.bulle-perso.pensee::after { width: 10px; height: 10px; bottom: -12px; border-radius: 50%; transform: none; box-shadow: calc(-4px + var(--queue) * 0) 9px 0 -2px #F6F2FF; }
.bulle-perso.recit { font-family: var(--texte); font-style: italic; font-weight: 800; font-size: 13.5px; color: var(--encre-2); background: var(--verre); }
/* l'icône de besoin : la bulle est placée par transform (au-dessus de sa tête), seul l'emoji pulse */
.bulle-perso.icone { padding: 4px; border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; font-size: 22px; background: white; }
.bulle-perso.icone span { display: block; line-height: 1; animation: pulse 1.6s ease-in-out infinite; }
.bulle-perso.icone::after { width: 8px; height: 8px; bottom: -3px; }
.bulle-perso.loin { display: none; }

/* ---------------------------------------------------------------- puces de la scène */
.puces-scene { position: absolute; left: 8px; right: 8px; top: 6px; display: flex; justify-content: space-between; gap: 8px; z-index: 7; pointer-events: none; }
.puces-scene button { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--verre); border-radius: 99px; padding: 4px 11px 4px 4px;
  font-weight: 900; font-size: 12.5px; box-shadow: 0 2px 0 rgba(58,38,50,0.15); white-space: nowrap; }
.puce-elodie.absente { color: var(--encre-2); }
.puce-elodie.absente .tete-e { filter: grayscale(1); opacity: 0.6; }
.btn-suivre { padding: 5px 11px !important; color: var(--encre-2); }
.puces-scene .btn-zoom { margin-left: auto; padding: 5px 7px !important; color: var(--encre-2); }
.btn-zoom svg { width: 20px; height: 20px; }
.btn-zoom.actif { background: var(--rose); color: white; }
.btn-suivre svg { width: 18px; height: 18px; }
.btn-suivre.actif { background: var(--rose); color: white; }
.zone-scene-gauche { position: absolute; left: 8px; top: 40px; z-index: 7; display: flex; flex-direction: column; gap: 6px; }
.zone-scene-droite { position: absolute; right: 8px; top: 40px; z-index: 7; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.etiquette-suivre { position: absolute; left: 0; top: 0; pointer-events: auto; transform-origin: center; white-space: nowrap; background: var(--rose-fonce); color: white;
  font-weight: 900; font-size: 12px; padding: 5px 10px; border-radius: 99px; margin-left: -50px; box-shadow: 0 3px 0 rgba(0,0,0,0.2); animation: apparait-simple 0.3s ease; }
@keyframes apparait-simple { from { opacity: 0; } }

.combo { position: absolute; left: 12px; top: 44px; transform: rotate(-6deg); padding: 6px 14px; border-radius: 14px; z-index: 8; pointer-events: none;
  background: linear-gradient(180deg, #FFD36B, var(--orange) 60%, #E4602A); color: white; font-family: var(--affichage); font-weight: 700; font-size: 24px;
  text-shadow: 0 3px 0 rgba(150, 50, 0, 0.45); box-shadow: 0 5px 0 rgba(150, 50, 0, 0.35); }
.combo small { display: block; font-size: 11px; letter-spacing: 2px; margin-top: -2px; }
.crans { display: flex; gap: 4px; margin-top: 3px; }
.crans i { width: 16px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.45); }
.crans i.on { background: white; }
/* le disaster : une carte compacte en bas de la scène (le haut reste aux bulles d'Elodie) ; la
   toucher déplie le texte */
.disaster { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 9; background: linear-gradient(180deg, #FF7B6B, var(--rouge)); color: white;
  border-radius: 16px; padding: 7px 8px 7px 12px; box-shadow: 0 4px 0 rgba(120,20,20,0.35); display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 1px 10px; cursor: pointer; }
.disaster h3 { font-family: var(--affichage); font-size: 15px; line-height: 1.1; grid-column: 1; }
.disaster p { font-weight: 800; font-size: 11.5px; line-height: 1.3; margin: 0; grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disaster.ouvert p { white-space: normal; }
.disaster .gros-bouton { grid-column: 2; grid-row: 1 / span 2; font-size: 13px; padding: 8px 11px; border-radius: 14px; white-space: nowrap; width: auto; }
.scene.ensemble .disaster { display: none; }

/* ---------------------------------------------------------------- le télégraphe du directeur */
.telegraphe { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; pointer-events: auto; z-index: 3;
  display: grid; place-items: center; }
.telegraphe .cercle { position: absolute; inset: 0; border-radius: 50%; --a: 1;
  background: conic-gradient(var(--rose) calc(var(--a) * 1turn), rgba(255,255,255,0.35) 0);
  -webkit-mask: radial-gradient(circle, transparent 24px, #000 25px); mask: radial-gradient(circle, transparent 24px, #000 25px);
  animation: se-vide linear forwards; }
@property --a { syntax: '<number>'; inherits: false; initial-value: 1; }
@keyframes se-vide { from { --a: 1; } to { --a: 0; } }
.telegraphe b { width: 34px; height: 34px; border-radius: 50%; background: var(--rose); color: white; font-family: var(--affichage); font-size: 24px; line-height: 34px;
  text-align: center; box-shadow: 0 3px 0 rgba(120,20,60,0.35); animation: pulse 0.6s ease-in-out infinite; }
/* elle marche encore vers l'objet : l'anneau attend, grisé ; le toucher trop tôt ne fait rien (mais
   ne traverse pas jusqu'au dégât du dessous) */
.telegraphe.attente { opacity: 0.45; }
.telegraphe.attente b { animation: none; }
.telegraphe .ic-album { position: absolute; right: -4px; top: -4px; width: 22px; height: 18px; border-radius: 4px; background: var(--or); border: 2px solid white; }

/* ---------------------------------------------------------------- la vue d'ensemble */
.zones { pointer-events: none; }
.scene.ensemble .zones { pointer-events: auto; }
.zones polygon { fill: rgba(255,255,255,0); stroke: rgba(255,255,255,0); stroke-width: 6; transition: fill 0.2s; cursor: pointer; }
.zones polygon:active { fill: rgba(240,122,160,0.25); stroke: rgba(240,122,160,0.9); }
.etiquettes-ensemble { z-index: 2; }
.badge-piece { position: absolute; left: 0; top: 0; translate: -50% -50%; pointer-events: auto; min-width: 24px; height: 24px; border-radius: 12px; padding: 0 6px;
  background: var(--rose-fonce); color: white; font-weight: 900; font-size: 12.5px; box-shadow: 0 2px 0 rgba(0,0,0,0.25), 0 0 0 2px white; }
.legende-ensemble { position: absolute; left: 8px; right: 8px; bottom: 10px; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.legende-ensemble:empty { display: none; }
.legende-ensemble .liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.etiquette-piece { display: flex; align-items: center; gap: 5px; white-space: nowrap; background: var(--verre); border-radius: 99px; padding: 5px 10px;
  font-size: 12.5px; font-weight: 900; box-shadow: 0 2px 0 rgba(58,38,50,0.18); }
.etiquette-piece.dore { background: linear-gradient(180deg, #FFF3C9, #FFD978); }
.etiquette-piece .et { color: var(--or); letter-spacing: -1px; font-size: 12px; }
.etiquette-piece .nb { background: var(--rose-fonce); color: white; border-radius: 99px; padding: 0 6px; font-size: 11px; }
.total-etoiles { background: var(--verre); border-radius: 99px; padding: 6px 14px; font-weight: 900; font-size: 13px; white-space: nowrap; box-shadow: 0 3px 0 rgba(58,38,50,0.15); }
.scene:not(.ensemble) .etiquettes-ensemble, .scene:not(.ensemble) .legende-ensemble { display: none; }
.app.accel .etiquettes-ensemble, .app.accel .legende-ensemble { display: none; }

/* les figurants de l'accéléré */
.figurant { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: transform 0.38s cubic-bezier(.4,0,.2,1), opacity 0.3s; z-index: 5; }
.figurant img { position: absolute; }
.figurant.parti { opacity: 0; }

/* ------------------------------------------------------------------ la vue 3D (js/monde3d) */
/* le bouton qui passe en 3D, sur la scène dessinée */
.bouton-3d { position: absolute; right: 10px; top: 10px; z-index: 6; min-width: 44px; height: 36px; padding: 0 12px;
  border: 0; border-radius: 18px; background: rgba(255, 255, 255, .88); color: #E0457B; font: 800 14px/36px var(--affichage, system-ui);
  box-shadow: 0 2px 8px rgba(60, 40, 60, .18); }
/* en 3D, le monde Three.js remplace l'image et les calques dessinés ; les bulles, les menus et l'interface restent */
.scene.vue3d #fond, .scene.vue3d #calque-crasse, .scene.vue3d #calque-sol, .scene.vue3d #calque-monde,
.scene.vue3d #calque-effets, .scene.vue3d #zones, .scene.vue3d #etiquettes-ensemble, .scene.vue3d .perso { visibility: hidden; }
.scene.vue3d #plateau { pointer-events: none; }
canvas.monde3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.attente-3d { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; color: #fff;
  font: 700 16px var(--affichage, system-ui); text-shadow: 0 1px 4px rgba(40, 60, 80, .5); pointer-events: none; }
/* sous le bouton « Suivre » du socle, en colonne */
.commandes-3d { position: absolute; right: 10px; top: 60px; z-index: 6; display: flex; flex-direction: column; gap: 6px; }
.commandes-3d button { min-width: 44px; height: 40px; padding: 0 10px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .88);
  color: #E0457B; font: 800 18px/40px var(--affichage, system-ui); box-shadow: 0 2px 8px rgba(60, 40, 60, .18); }
.commandes-3d button[data-a="2d"] { font-size: 14px; }
.perf-3d { position: absolute; left: 8px; bottom: 8px; z-index: 6; padding: 3px 8px; border-radius: 8px; background: rgba(0, 0, 0, .55);
  color: #fff; font: 600 11px/1.4 ui-monospace, monospace; pointer-events: none; }

/* styles/minijeux.css */
/* Le cadre des mini-jeux (registre) et les six familles du ménage (familles.js). Les nouvelles
   familles ont leur fichier : minijeux-nouveaux.css. */
.minijeu { background: rgba(40, 24, 40, 0.6); align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px); }
.mj { width: 100%; max-width: 440px; height: 100%; max-height: 760px; border-radius: 28px; overflow: hidden; position: relative; display: flex; flex-direction: column;
  background: var(--creme); box-shadow: 0 20px 50px rgba(0,0,0,0.35); animation: monte-panneau 0.3s cubic-bezier(.2,1.2,.4,1); }
.mj-tete { text-align: center; padding: 14px 50px 8px; position: relative; }
.mj-tete small { display: block; font-weight: 900; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--rose-fonce); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-tete h3 { font-family: var(--affichage); font-weight: 700; font-size: 30px; line-height: 1.05; }
.mj-tete .fermer { position: absolute; right: 12px; top: 12px; }
.mj-etoiles { position: absolute; left: 0; right: 0; top: 100%; display: flex; justify-content: center; gap: 4px; z-index: 5; pointer-events: none; }
.mj-etoiles i { font-style: normal; font-size: 34px; color: rgba(58,38,50,0.2); animation: etoile 0.4s cubic-bezier(.3,1.6,.5,1) backwards; }
.mj-etoiles i.on { color: var(--or); text-shadow: 0 3px 0 #C18414; }
.mj-etoiles i:nth-child(2) { animation-delay: 0.08s; } .mj-etoiles i:nth-child(3) { animation-delay: 0.16s; }
@keyframes etoile { from { transform: scale(0); } }
.mj-prog { margin: 4px 22px 10px; height: 12px; border-radius: 99px; background: var(--creme-2); overflow: hidden; }
.mj-prog i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--menthe), #A6E3B3); transition: width 0.2s ease; }
.mj-zone { flex: 1; position: relative; margin: 0 12px 12px; border-radius: 20px; overflow: hidden; touch-action: none; }
.mj-zone canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.consigne { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-weight: 900; font-size: 13px; color: var(--encre-2); pointer-events: none; padding: 0 12px; }
.spr-mj { display: block; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.spr-mj.orange { filter: sepia(1) saturate(5) hue-rotate(-12deg); }

/* frotter */
.mousse { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 30%, #fff, #EAF6FF 45%, rgba(200,230,255,0.75) 70%);
  animation: mousse 0.9s ease-out forwards; }
@keyframes mousse { to { transform: translateY(-24px) scale(1.3); opacity: 0; } }
.eponge { position: absolute; width: 74px; height: 48px; border-radius: 12px; transform: translate(-50%, -50%) rotate(-14deg); pointer-events: none;
  background: linear-gradient(180deg, #FFE36B 0 58%, #6FB37C 58% 100%); box-shadow: 0 6px 0 rgba(58,38,50,0.22), inset 0 3px 0 rgba(255,255,255,0.6); }

/* lancer */
.fond-lancer { background: linear-gradient(180deg, #F6EAD6, #EAD9BE); }
.cible-lancer { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.85); border: 4px dashed var(--rose); }
.cible-lancer svg { width: 70px; height: 70px; }
.cible-lancer small { position: absolute; bottom: -24px; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--encre-2); white-space: nowrap; }
.cible-lancer.recoit { animation: bump 0.35s ease; }
.objet-lancer { position: absolute; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; padding: 8px;
  background: rgba(255,255,255,0.92); box-shadow: 0 6px 12px rgba(58,38,50,0.25); touch-action: none; cursor: grab; }
.objet-lancer.vole { pointer-events: none; box-shadow: none; background: transparent; z-index: 3; }
.objet-lancer.tombe { transition: transform 0.22s cubic-bezier(.3,.7,.4,1), opacity 0.22s ease; }
.objet-lancer.retour { transition: transform 0.45s cubic-bezier(.3,1.6,.5,1); }
/* seconde chance : il ne vaut plus que la moitié */
.objet-lancer.seconde::after { content: '½'; position: absolute; right: -4px; top: -6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--orange); color: white; font-family: var(--affichage); font-weight: 700; font-size: 16px; box-shadow: 0 2px 0 rgba(150, 50, 0, 0.35); }
.objet-lancer.perdu { filter: grayscale(1); opacity: 0.55; }
.ombre-lancer { position: absolute; left: -26px; top: -8px; width: 52px; height: 16px; border-radius: 50%; background: rgba(58, 38, 50, 0.2); pointer-events: none; z-index: 1; }
/* la ligne de lancer : en dessous on tient l'objet, au-dessus il vole */
.ligne-lancer { position: absolute; left: 8%; right: 8%; height: 0; border-top: 3px dashed rgba(58, 38, 50, 0.16); pointer-events: none; }
/* un point par objet : dedans, rattrapé, à relancer, perdu */
.score-lancer { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
.score-lancer i { width: 14px; height: 14px; border-radius: 50%; background: rgba(58, 38, 50, 0.14); transition: background 0.2s ease, transform 0.2s ease; }
.score-lancer i.in { background: var(--menthe); transform: scale(1.15); }
.score-lancer i.demi { background: var(--orange); }
.score-lancer i.attente { background: transparent; box-shadow: inset 0 0 0 3px var(--orange); }
.score-lancer i.out { background: var(--rouge); }
.mot-lancer { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; z-index: 4; font-family: var(--affichage); font-weight: 700; font-size: 24px;
  color: white; text-shadow: 0 3px 0 var(--rouge), 0 0 12px rgba(255, 255, 255, 0.9); animation: mot-lancer 0.9s ease-out forwards; }
.mot-lancer.dedans { text-shadow: 0 3px 0 var(--menthe-fonce), 0 0 12px rgba(255, 255, 255, 0.9); font-size: 28px; }
.mot-lancer.rattrape { text-shadow: 0 3px 0 #C2571A, 0 0 12px rgba(255, 255, 255, 0.9); }
@keyframes mot-lancer { 0% { transform: translate(-50%, -30%) scale(0.5); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -110%) scale(1); opacity: 0; } }
/* partie ratée : le titre vire au rouge */
.mj.rate .mj-tete h3 { color: var(--rouge); }

/* trier */
.fond-frigo { background: linear-gradient(180deg, #EAF4F8, #D6E7EF); }
.tri-degat { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 70px; height: 56px; opacity: 0.9; }
/* la carte laisse toujours la place des deux côtés (Jeter, Garder) : plus étroite sur un petit écran */
.carte-tri { position: absolute; left: 50%; top: 46%; --l: min(190px, calc(100% - 152px)); width: var(--l); height: 230px; margin: -115px 0 0 calc(var(--l) / -2); border-radius: 24px; background: white;
  box-shadow: 0 12px 26px rgba(58,38,50,0.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; text-align: center; touch-action: none; }
.carte-tri .em { font-size: 72px; line-height: 1; }
.carte-tri .tx { font-weight: 900; font-size: 15px; line-height: 1.25; }
.carte-tri.part { transition: transform 0.3s ease, opacity 0.3s ease; }
.carte-tri.tremble { animation: tremble 0.35s ease; }
@keyframes tremble { 25% { translate: -10px; } 75% { translate: 10px; } }
.cotes { position: absolute; top: 46%; transform: translateY(-50%); font-weight: 900; font-size: 12px; text-align: center; width: 72px; color: var(--encre-2); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cotes svg { width: 40px; height: 40px; }
.cotes.g { left: 3px; } .cotes.d { right: 3px; }

/* chasser */
.fond-mouches { background: linear-gradient(180deg, #EAF3F7, #FBF3E4); }
.fond-fumee { background: linear-gradient(180deg, #D9D4CE, #F4EEE6); }
.bete { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; display: grid; place-items: center; cursor: pointer; will-change: transform; }
.bete .spr-mj { width: 46px; }
/* les mouettes de la plage : deux images (ailes hautes, ailes basses), elles s'envolent quand on les touche */
.fond-plage { background: linear-gradient(180deg, #bfe6f6 0%, #e6f6fb 55%, #f6e3b4 56%, #f3d79b 100%) !important; }
.bete.mouette { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.bete.mouette .spr-mj { position: absolute; width: 92px; }
.bete.mouette .aile-basse, .bete.mouette.bas .spr-mj:first-child { visibility: hidden; }
.bete.mouette.bas .aile-basse { visibility: visible; }
.bete.mouette.envol { transition: translate 0.7s ease-in, opacity 0.7s ease-in; translate: 40px -260px; opacity: 0; pointer-events: none; }
.plume { position: absolute; width: 14px; height: 26px; margin: -13px 0 0 -7px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: #fff; box-shadow: 0 0 0 1px #cfd8de; animation: plume 0.9s ease-out forwards; pointer-events: none; }
@keyframes plume { to { transform: translate(18px, 60px) rotate(200deg); opacity: 0; } }
/* le tapis de course trop rapide : le bouton STOP qui s'agite */
.fond-tapis { background: linear-gradient(180deg, #e9e2ee, #d6d0dc) !important; }
.bete.stop { width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a80, #e53935 60%, #9e1c1c); box-shadow: 0 6px 0 #7a1414, 0 0 0 6px #f4e04d; }
.bete.stop span { font-family: var(--affichage); font-weight: 700; font-size: 20px; color: #fff; letter-spacing: 1px; }
.bete.stop.appuye { scale: 0.9; box-shadow: 0 2px 0 #7a1414, 0 0 0 6px #f4e04d; }
.bete.nuage { border-radius: 50%; background: radial-gradient(circle, rgba(110,110,110,0.8), rgba(110,110,110,0.35) 55%, rgba(110,110,110,0) 72%); }
.splat { position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,210,120,0.6) 40%, rgba(255,255,255,0) 70%); animation: splat 0.6s ease-out forwards; }
.splat.brille { background: radial-gradient(circle, #fff, rgba(200,240,255,0.7) 40%, rgba(255,255,255,0) 70%); }
@keyframes splat { from { transform: scale(0.4); } 30% { transform: scale(1.3); } to { transform: scale(1); opacity: 0; } }

/* pomper */
.fond-pompe { background: linear-gradient(180deg, #DCEEF6 0%, #F1F6F2 72%); touch-action: none; cursor: grab; }
.fond-pompe.tenue { cursor: grabbing; }
.scene-pompe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.scene-pompe .p-fleches path { stroke: var(--rose-fonce); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.scene-pompe .p-fleches { animation: p-fleches 0.9s ease-in-out infinite alternate; }
@keyframes p-fleches { from { transform: translateY(-8px); opacity: 0.5; } to { transform: translateY(10px); opacity: 1; } }
/* chaque coup secoue l'écran, d'autant plus qu'il est fort */
.fond-pompe.secoue { animation: p-secoue 0.16s ease-out; }
@keyframes p-secoue { 0% { transform: translateY(var(--secousse, 4px)); } 45% { transform: translateY(calc(var(--secousse, 4px) * -0.5)); } 100% { transform: none; } }
.mot-pompe.court { font-size: 22px; }
/* un coup brutal : l'eau gicle sur l'écran et coule */
.eclats-pompe { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.eclats-pompe i { position: absolute; width: var(--t, 40px); height: var(--t, 40px); border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; opacity: 0.85;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.08), inset 4px 6px 0 rgba(255, 255, 255, 0.35); animation: p-coule 1.5s ease-in forwards; }
@keyframes p-coule { 0% { transform: scale(0.2); } 10% { transform: scale(1.15); } 30% { transform: scale(1) translateY(0); opacity: 0.85; } 100% { transform: scaleX(0.7) scaleY(1.5) translateY(90px); opacity: 0; } }
.pompe { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.pompe .em { width: 140px; height: 140px; position: relative; transition: transform 0.12s ease; }
.pompe .em svg { width: 100%; height: 100%; }
.pompe .em .manche { position: absolute; left: 50%; top: -34px; width: 10px; height: 70px; margin-left: -5px; border-radius: 5px; background: #A8743F; }
.pompe .em .manche::after { content: ''; position: absolute; left: -18px; bottom: -14px; width: 46px; height: 22px; border-radius: 50% 50% 8px 8px; background: #E5484D; }
.pompe .em.appuie { transform: scaleY(0.82) translateY(10px); }
.bonde { position: relative; width: 100%; height: 100%; }
.bonde .sur-bonde { position: absolute; left: 20%; top: 20%; width: 60%; transition: opacity 0.3s; }
.rythme { width: 80%; height: 26px; border-radius: 99px; background: var(--creme-2); position: relative; overflow: hidden; }
.rythme .zone { position: absolute; top: 0; bottom: 0; background: #BFE6C8; }
.rythme .curseur { position: absolute; left: 0; top: -2px; bottom: -2px; width: 8px; border-radius: 4px; background: var(--rose-fonce); will-change: transform; }

/* fouiller */
.fond-fouille { background: linear-gradient(180deg, #F3E7D3, #E8D7BA); }
.grille-fouille { position: absolute; inset: 14px 14px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grille-fouille.g12 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grille-fouille.g16 { grid-template-columns: repeat(4, 1fr); gap: 7px; }
.tuile { border-radius: 18px; background: white; box-shadow: 0 5px 0 rgba(58,38,50,0.12); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 6px 4px 18px; min-height: 0; }
.tuile .em { font-size: 34px; line-height: 1; }
.tuile .spr-mj { width: 70%; max-height: 70%; }
.tuile small { position: absolute; bottom: 5px; left: 0; right: 0; font-size: 10.5px; font-weight: 900; color: var(--encre-2); text-align: center; }
.tuile.vue { background: var(--creme-2); box-shadow: none; }
.tuile.trouve { background: #CFEBD6; animation: bump 0.4s ease; }
.piece-or { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE58A, var(--or) 60%, #C18414); box-shadow: inset 0 0 0 3px #FFD76A; }

/* styles/minijeux-nouveaux.css */
/* Les nouveaux mini-jeux (js/minijeux/nouveaux.js et js/minijeux/nouveaux/) : gratter, arracher,
   tamponner, épouiller, brosser, laver les pattes, shampooing, laver le visage, gestes rapides,
   balayer, rouleau, traces de boue, faux ongles, et le réglage des anciennes familles.
   Toutes les classes sont préfixées « mjn- ». Jetons de couleur du socle : base.css. */

/* ---------------------------------------------------------------- communs */
.mjn-img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.mjn-outil { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; transform: translate(var(--ox, -50%), var(--oy, -50%));
  filter: drop-shadow(0 6px 6px rgba(58, 38, 50, 0.3)); transition: filter 0.15s; }
.mjn-outil[hidden] { display: none; }
.mjn-etincelle { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; z-index: 7;
  background: radial-gradient(circle, #fff 0 12%, rgba(255, 236, 150, 0.85) 22%, rgba(255, 255, 255, 0) 60%);
  animation: mjn-etincelle 0.6s ease-out forwards; }
.mjn-etincelle::before, .mjn-etincelle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 40px; margin: -20px 0 0 -2px; border-radius: 2px;
  background: linear-gradient(transparent, #fff, transparent); }
.mjn-etincelle::after { transform: rotate(90deg); }
.mjn-etincelle.petite { transform: scale(0.6); }
.mjn-etincelle.grain { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #FFF6F0; border-radius: 50%; animation: mjn-grain 0.6s ease-out forwards; }
.mjn-etincelle.grain::before, .mjn-etincelle.grain::after { display: none; }
@keyframes mjn-etincelle { from { transform: scale(0.3) rotate(0); opacity: 1; } to { transform: scale(1.4) rotate(45deg); opacity: 0; } }
@keyframes mjn-grain { to { transform: translate(40px, -30px); opacity: 0; } }
.mjn-flottant { position: absolute; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; white-space: nowrap;
  font-family: var(--affichage); font-weight: 700; font-size: 20px; color: #fff; text-shadow: 0 2px 0 var(--rose-fonce), 0 0 8px rgba(58, 38, 50, 0.4);
  animation: mjn-flotte 1.1s ease-out forwards; }
.mjn-flottant.gros { font-size: 28px; }
@keyframes mjn-flotte { 0% { transform: translate(-50%, -30%) scale(0.6); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  80% { opacity: 1; } 100% { transform: translate(-50%, -110%) scale(1); opacity: 0; } }
.mjn-mousse { position: absolute; border-radius: 50%; pointer-events: none; z-index: 5; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff, #EAF6FF 45%, rgba(200, 230, 255, 0.75) 70%); animation: mjn-mousse 0.9s ease-out forwards; }
@keyframes mjn-mousse { to { transform: translate(-50%, -150%) scale(1.3); opacity: 0; } }

.mjn-jauge { position: absolute; left: 12px; right: 12px; top: 8px; z-index: 7; pointer-events: none; display: flex; align-items: center; gap: 8px; }
.mjn-jauge small { font-weight: 900; font-size: 11px; letter-spacing: 0.5px; color: var(--encre); background: rgba(255, 255, 255, 0.8); border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.mjn-jauge div { flex: 1; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.7); overflow: hidden; box-shadow: inset 0 1px 2px rgba(58, 38, 50, 0.2); }
.mjn-jauge i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #F7A8C4, var(--rose)); transition: width 0.25s ease; }
.mjn-jauge.chrono { top: 30px; }
.mjn-a-badge .mjn-jauge { top: 46px; }
.mjn-a-badge .mjn-jauge.chrono { top: 68px; }
.mjn-jauge.chrono i { background: linear-gradient(90deg, #9CC9E6, #6FA8D6); transition: none; }
.mjn-jauge.patience.bas i { background: var(--rouge); animation: mjn-clignote 0.6s ease infinite alternate; }
@keyframes mjn-clignote { to { opacity: 0.45; } }

.mjn-bouton { position: absolute; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px 6px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 5px 0 rgba(58, 38, 50, 0.18); font-weight: 900; font-size: 11px; color: var(--encre-2); touch-action: none; }
.mjn-bouton:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(58, 38, 50, 0.18); }
.mjn-btn-glacon { right: 10px; top: 52px; }
.mjn-btn-glacon.pris { background: #D9F1FF; box-shadow: 0 0 0 3px #7FC4EE; }
.mjn-glacon { display: block; width: 40px; height: 40px; border-radius: 10px; position: relative; transform: rotate(-8deg);
  background: linear-gradient(135deg, rgba(235, 250, 255, 0.95), rgba(150, 210, 245, 0.85)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8), inset -6px -6px 10px rgba(80, 160, 220, 0.35); }
.mjn-glacon i { position: absolute; left: 8px; top: 7px; width: 12px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.9); }
.mjn-outil.glacon .mjn-glacon, .mjn-outil .mjn-glacon { width: 52px; height: 52px; }
.mjn-anneau { position: absolute; z-index: 6; pointer-events: none; transform: translate(-50%, -50%); opacity: 0.55; transition: opacity 0.2s; }
.mjn-anneau.actif { opacity: 1; }
.mjn-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mjn-anneau circle { fill: none; stroke: #7FC4EE; stroke-width: 7; stroke-linecap: round; }

.mjn-badge { position: absolute; left: 8px; top: 8px; z-index: 7; display: flex; align-items: center; gap: 6px; max-width: 72%; padding: 4px 10px 4px 4px; border-radius: 99px;
  background: rgba(255, 250, 240, 0.94); box-shadow: 0 3px 8px rgba(58, 38, 50, 0.18); pointer-events: none; animation: mjn-badge 0.4s cubic-bezier(.3, 1.6, .5, 1); }
.mjn-badge.second { top: 46px; }
.mjn-badge img { width: 30px; height: 30px; object-fit: contain; }
.mjn-badge span { display: flex; flex-direction: column; font-size: 10.5px; line-height: 1.15; color: var(--encre-2); font-weight: 800; }
.mjn-badge b { font-size: 11px; color: var(--rose-fonce); font-weight: 900; }
@keyframes mjn-badge { from { transform: scale(0.4); opacity: 0; } }
.mjn-alerte { color: var(--rouge) !important; animation: mjn-tremble 0.35s ease; }
@keyframes mjn-tremble { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.mjn-poubelle { position: absolute; width: 58px; height: 58px; z-index: 4; pointer-events: none; }
.mjn-poubelle svg { width: 100%; height: 100%; }
.mjn-poubelle.coin { right: 10px; bottom: 58px; }   /* au-dessus de la consigne (deux lignes au plus) */
.mjn-poubelle.recoit { animation: mjn-bump 0.35s ease; }
@keyframes mjn-bump { 40% { transform: scale(1.18); } }

.mjn-fond-sdb { background: linear-gradient(180deg, #E4F1F6 0%, #F4EEF7 60%, #FBF3E4 100%); }
.mjn-fond-sdb::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 47px, rgba(160, 190, 205, 0.25) 47px 49px), repeating-linear-gradient(90deg, transparent 0 47px, rgba(160, 190, 205, 0.25) 47px 49px); }
.mjn-fond-chat { background: radial-gradient(ellipse at 50% 45%, #FFF5E6, #EAD9BE 75%); }
.mjn-fond-tapis { background: radial-gradient(circle at 30% 20%, #F7EAD8, #E6D2B5); }

/* ---------------------------------------------------------------- gratter, arracher */
.mjn-fils { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; }
.mjn-fils path { transition: stroke 0.15s; filter: drop-shadow(0 1px 1px rgba(58, 38, 50, 0.25)); }
.mjn-fils.tendu path { filter: drop-shadow(0 0 3px #E5484D) drop-shadow(0 0 1px #E5484D); }
.mjn-fils.rentre path { transition: d 0.2s ease, stroke-width 0.2s ease; stroke-width: 0; }
.mjn-gomme { position: absolute; z-index: 3; transform: translate(-50%, -50%); transition: transform 0.18s cubic-bezier(.3, 1.4, .5, 1);
  filter: drop-shadow(0 calc(2px + 10px * var(--decolle, 0)) calc(2px + 6px * var(--decolle, 0)) rgba(58, 38, 50, 0.35)); }
.mjn-gomme.petite { transition: transform 0.12s ease; }
.mjn-gomme .givre { position: absolute; inset: 8%; border-radius: 40%; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(170, 225, 255, 0.55) 45%, rgba(170, 225, 255, 0) 72%); }
.mjn-gomme.gele img { filter: hue-rotate(185deg) saturate(0.7) brightness(1.08); }
.mjn-gomme.gele .givre { opacity: 1; }
.mjn-gomme.boing { animation: mjn-boing 0.35s ease; }
@keyframes mjn-boing { 30% { scale: 1.2 0.8; } 60% { scale: 0.9 1.1; } }
.mjn-gomme.saute, .mjn-noeud.gomme.saute { z-index: 6; }
.mjn-morceau { position: absolute; width: 34px; height: 30px; margin: 0; transform: translate(-50%, -50%); border-radius: 46% 54% 40% 60%; z-index: 5; pointer-events: none;
  background-size: 260px 260px; box-shadow: 0 3px 4px rgba(58, 38, 50, 0.3); }
.mjn-spatule { transform-origin: 10% 14%; }
.mjn-spatule img { transform: rotate(-12deg); transform-origin: 10% 14%; }
.mjn-spatule.tire { filter: drop-shadow(0 0 6px rgba(229, 72, 77, 0.8)); }
.mjn-pince { display: block; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFE0CC, #F3B99A); box-shadow: 0 3px 6px rgba(58, 38, 50, 0.3); }

/* ---------------------------------------------------------------- tamponner */
.mjn-flacons { position: absolute; left: 0; right: 0; bottom: 42px; z-index: 7; display: flex; justify-content: center; gap: 10px; }
.mjn-flacon { position: static; width: 96px; padding: 8px 4px 6px; }
.mjn-flacon svg { width: 52px; height: 66px; }
.mjn-flacon small { font-size: 11px; line-height: 1.1; text-align: center; color: var(--encre); }
.mjn-flacon:disabled { opacity: 0.35; }
.mjn-flacon.choisi { opacity: 1; box-shadow: 0 0 0 3px var(--rose); }
.mjn-verse { position: absolute; width: 64px; z-index: 7; transform: translate(-50%, -50%) rotate(-120deg); transform-origin: 50% 20%; animation: mjn-verse 0.9s ease; pointer-events: none; }
.mjn-verse svg { width: 100%; }
@keyframes mjn-verse { from { transform: translate(-50%, -50%) rotate(0deg); } 40% { transform: translate(-50%, -50%) rotate(-125deg); } }
.mjn-goutte { position: absolute; width: 9px; height: 13px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; z-index: 6; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(58, 38, 50, 0.15); animation: mjn-goutte 0.6s ease-in forwards; }
@keyframes mjn-goutte { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0.2; transform: translateY(70px) scale(1.4, 0.6); } }
.mjn-chiffon { transition: transform 0.08s; }
.mjn-chiffon.appuie { transform: translate(-50%, -50%) scale(0.86, 0.8); }
.mjn-chiffon .empreinte { position: absolute; left: 30%; top: 30%; width: 40%; height: 36%; border-radius: 50%; background: #9C2542; opacity: calc(var(--sale, 0) * 0.7); filter: blur(2px); }
.mjn-saliere { display: block; width: 54px; height: 76px; position: relative; }
.mjn-saliere::before { content: ''; position: absolute; left: 6px; right: 6px; top: 16px; bottom: 0; border-radius: 12px 12px 14px 14px; background: linear-gradient(90deg, #F4F4F6, #fff 40%, #DCDDE2);
  box-shadow: inset 0 -18px 0 rgba(230, 230, 236, 0.9); }
.mjn-saliere::after { content: ''; position: absolute; left: 10px; right: 10px; top: 0; height: 20px; border-radius: 10px 10px 4px 4px; background: #B9BFC7;
  background-image: radial-gradient(circle, #6E747C 2px, transparent 2.5px); background-size: 10px 8px; }
.mjn-outil.secoue { animation: mjn-secoue 0.18s linear infinite; }
@keyframes mjn-secoue { 50% { translate: 0 -6px; rotate: 8deg; } }
.mjn-balayette { display: block; width: 100%; aspect-ratio: 2 / 1; position: relative; transform: rotate(-10deg); }
.mjn-balayette::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; border-radius: 4px 4px 10px 10px;
  background: repeating-linear-gradient(90deg, #7C5A3A 0 3px, #A57D52 3px 6px); }
.mjn-balayette::after { content: ''; position: absolute; left: 10%; right: 10%; top: 20%; height: 36%; border-radius: 10px; background: linear-gradient(180deg, #F07AA0, #C9477A); }

/* ---------------------------------------------------------------- Princesse */
.mjn-dos { position: absolute; z-index: 1; transition: transform 0.5s ease, opacity 0.5s ease; }
.mjn-dos.frisson { animation: mjn-frisson 0.22s ease; }
.mjn-dos.fouette { animation: mjn-fouette 0.45s ease; }
.mjn-dos.part { transform: translate(120%, -30%) rotate(20deg); opacity: 0; }
@keyframes mjn-frisson { 50% { transform: scale(1.012, 0.992); } }
@keyframes mjn-fouette { 20% { transform: rotate(-2.5deg); } 45% { transform: rotate(2.5deg); } 70% { transform: rotate(-1.2deg); } }
.mjn-saute { position: absolute; width: 190px; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; animation: mjn-saute 0.9s ease-in forwards; }
@keyframes mjn-saute { 0% { transform: translate(-50%, -50%) scale(0.8); } 35% { transform: translate(-40%, -90%) scale(1.05); } 100% { transform: translate(140%, -140%) scale(0.9); opacity: 0; } }
.mjn-medaillon { position: absolute; right: 10px; bottom: 44px; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; z-index: 8; pointer-events: none;
  background: #FFF3E6; box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(58, 38, 50, 0.3); }
.mjn-medaillon img { width: 150%; margin: -2% 0 0 -24%; filter: saturate(0.9) brightness(0.95); }
.mjn-medaillon b { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); background: var(--rouge); color: #fff; font-size: 12px; font-weight: 900; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.mjn-medaillon.entre { animation: mjn-entre 0.35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mjn-entre { from { transform: scale(0.2) rotate(-20deg); } }
.mjn-puce { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; will-change: transform; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
.mjn-puce.vole { filter: drop-shadow(0 8px 3px rgba(0, 0, 0, 0.25)); }
.mjn-puce.pincee { transition: opacity 0.25s ease; opacity: 0; }
.mjn-rate { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid rgba(229, 72, 77, 0.7); z-index: 5; pointer-events: none;
  animation: mjn-rate 0.45s ease-out forwards; }
@keyframes mjn-rate { from { transform: scale(0.4); } to { transform: scale(1.4); opacity: 0; } }
.mjn-noeud { position: absolute; z-index: 3; transform: translate(-50%, -50%); transition: transform 0.2s cubic-bezier(.3, 1.4, .5, 1), opacity 0.3s; pointer-events: none; }
.mjn-noeud .givre { position: absolute; inset: 6%; border-radius: 40%; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(170, 225, 255, 0.55) 45%, rgba(170, 225, 255, 0) 72%); }
.mjn-noeud.gele img { filter: hue-rotate(185deg) saturate(0.7) brightness(1.08); }
.mjn-noeud.gele .givre { opacity: 1; }
.mjn-noeud.parti { opacity: 0; }
.mjn-fleche { position: absolute; z-index: 2; width: 44px; transform: translateX(-50%); pointer-events: none; display: flex; flex-direction: column; align-items: center;
  transition: opacity 0.6s ease; animation: mjn-fleche 1.4s ease-in-out infinite; }
.mjn-fleche svg { width: 44px; flex: 1; stroke: rgba(255, 255, 255, 0.85); filter: drop-shadow(0 2px 3px rgba(58, 38, 50, 0.35)); }
.mjn-fleche small { font-weight: 900; font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(58, 38, 50, 0.7); white-space: nowrap; }
.mjn-fleche.cache { opacity: 0; }
@keyframes mjn-fleche { 50% { translate: 0 10px; } }
.mjn-brosse.bloque { animation: mjn-bloque 0.3s ease; }
@keyframes mjn-bloque { 25% { translate: -4px 0; } 50% { translate: 4px 0; } 75% { translate: -3px 0; } }
.mjn-touffe { position: absolute; width: 38px; z-index: 6; pointer-events: none; transform: translate(-50%, -50%); animation: mjn-touffe 0.9s ease-out forwards; }
@keyframes mjn-touffe { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(160deg) scale(0.6); opacity: 0; } }
.mjn-pattes { position: absolute; z-index: 2; transition: transform 0.25s cubic-bezier(.3, 1.4, .5, 1); }
.mjn-patte-propre { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #A29EA8 0 30%, rgba(162, 158, 168, 0.8) 48%, rgba(162, 158, 168, 0) 70%); }
.mjn-patte-propre::after { content: ''; position: absolute; left: 30%; top: 26%; width: 22%; height: 16%; border-radius: 50%; background: rgba(255, 255, 255, 0.8); }
.mjn-patte-cible { position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, 0.9); pointer-events: none;
  animation: mjn-pulse 1s ease-in-out infinite alternate; }
.mjn-patte-cible.fait { border: 3px solid var(--menthe); animation: none; background: rgba(127, 176, 138, 0.2); }
@keyframes mjn-pulse { to { scale: 1.12; } }
.mjn-chat-gamelle { position: absolute; left: 50%; top: 18%; width: 46%; transform: translateX(-50%); pointer-events: none; }
.mjn-chat-gamelle.mange { width: 62%; top: 26%; }
.mjn-gamelle { position: absolute; width: 96px; height: 40px; transform: translate(-50%, -50%); border-radius: 0 0 48px 48px / 0 0 30px 30px; pointer-events: none;
  background: linear-gradient(180deg, #F07AA0, #C9477A); box-shadow: 0 6px 0 rgba(58, 38, 50, 0.2), 0 0 0 4px rgba(255, 255, 255, 0.7); }
.mjn-gamelle i { position: absolute; left: 12%; right: 12%; top: -4px; height: 14px; border-radius: 50%; background: #F4E4D0; transition: background 0.3s; }
.mjn-gamelle.pleine i { background: radial-gradient(circle at 30% 50%, #9A5B2C 0 3px, transparent 4px) 0 0 / 10px 8px, #B8743A; }
.mjn-sachet { position: absolute; width: 84px; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; transition: transform 0.3s; filter: drop-shadow(0 6px 6px rgba(58, 38, 50, 0.3)); }
.mjn-sachet.verse { transform: translate(-50%, -50%) rotate(-120deg); }
.mjn-gamelle.cache, .mjn-sachet.cache { opacity: 0; transition: opacity 0.3s; }
.mjn-eponge { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 12px; transform: rotate(-14deg);
  background: linear-gradient(180deg, #FFE36B 0 58%, #6FB37C 58% 100%); box-shadow: 0 6px 0 rgba(58, 38, 50, 0.22), inset 0 3px 0 rgba(255, 255, 255, 0.6); }

/* ---------------------------------------------------------------- toilette d'Elodie */
.mjn-portrait { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.mjn-portrait img { position: absolute; max-width: none; }
.mjn-portrait.vent img { animation: mjn-vent 0.25s ease-in-out infinite alternate; }
.mjn-portrait.brillant img { filter: brightness(1.06) saturate(1.08); }
@keyframes mjn-vent { to { transform: translateX(1.5px) skewX(-0.6deg); } }
.mjn-tel { position: absolute; z-index: 4; width: 58px; height: 104px; border-radius: 12px; padding: 5px; pointer-events: none; transform: rotate(-10deg);
  background: linear-gradient(135deg, #F9C6DC, #E98FB6); box-shadow: 0 6px 12px rgba(58, 38, 50, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.mjn-tel .ecran { width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: #FFF7FB; display: flex; flex-direction: column; gap: 5px; padding: 5px;
  animation: mjn-scroll 1.8s linear infinite; }
.mjn-tel .ecran i { display: block; height: 12px; border-radius: 3px; background: linear-gradient(90deg, #F2B8CF 30%, #E7E0EA 30%); flex: none; }
.mjn-tel .ecran i:nth-child(2n) { background: linear-gradient(90deg, #BFE0F2 45%, #E7E0EA 45%); height: 18px; }
@keyframes mjn-scroll { from { padding-top: 5px; } to { padding-top: 0; transform: translateY(-17px); } }
.mjn-tel-coin { left: 10px; bottom: 40px; }
.mjn-tel-bas { right: 16px; bottom: 36px; transform: rotate(8deg); }
.mjn-gras { mix-blend-mode: multiply; pointer-events: none; }
.mjn-flacon-shampooing { position: absolute; right: 12px; top: 12px; width: 44px; z-index: 4; pointer-events: none; }
.mjn-flacon-shampooing.presse { animation: mjn-presse 0.5s ease; }
@keyframes mjn-presse { 30% { transform: scale(1.15, 0.85) rotate(-20deg); } }
.mjn-bulle { position: absolute; z-index: 3; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, rgba(240, 250, 255, 0.95) 30%, rgba(215, 236, 255, 0.85) 62%, rgba(190, 220, 245, 0.7) 100%);
  box-shadow: 0 1px 2px rgba(80, 120, 160, 0.25); animation: mjn-bulle-nait 0.25s cubic-bezier(.3, 1.6, .5, 1), mjn-bulle 1.6s ease-in-out 0.25s infinite alternate; }
@keyframes mjn-bulle-nait { from { transform: translate(-50%, -50%) scale(0); } }
@keyframes mjn-bulle { to { transform: translate(-50%, -54%) scale(1.06); } }
.mjn-bulle.rince { animation: mjn-rince 0.7s ease-in forwards; }
@keyframes mjn-rince { to { transform: translate(-50%, 140px) scale(0.5); opacity: 0; } }
.mjn-pommeau { display: block; width: 74px; height: 50px; position: relative; }
.mjn-pommeau::before { content: ''; position: absolute; left: 30px; top: -60px; width: 14px; height: 70px; border-radius: 7px; background: linear-gradient(90deg, #C9D3D9, #F4F7F9, #B7C2C9); }
.mjn-pommeau i { position: absolute; left: 0; right: 0; top: 4px; height: 34px; border-radius: 50% 50% 18px 18px; background: linear-gradient(180deg, #F4F7F9, #B7C2C9);
  background-image: radial-gradient(circle, #7F95A2 2px, transparent 2.5px), linear-gradient(180deg, #F4F7F9, #B7C2C9); background-size: 10px 8px, 100% 100%; background-position: 4px 18px, 0 0; }
.mjn-eau { position: absolute; width: 4px; height: 16px; border-radius: 2px; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(160, 215, 245, 0), #8ECDF2);
  animation: mjn-eau 0.7s linear forwards; }
@keyframes mjn-eau { to { transform: translateY(160px); opacity: 0; } }
.mjn-seche { transform-origin: 96% 30%; }
.mjn-seche .souffle { position: absolute; right: -58px; top: 12%; width: 58px; height: 40%; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255, 255, 255, 0.85) 6px 8px); border-radius: 8px; transition: opacity 0.2s; }
.mjn-seche.souffle .souffle { opacity: 1; animation: mjn-souffle 0.2s linear infinite; }
@keyframes mjn-souffle { to { background-position: 0 8px; } }
.mjn-gant { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 40% 40% 16px 16px; transform: rotate(-12deg);
  background: repeating-linear-gradient(0deg, #9FD2EE 0 3px, #B9E0F4 3px 6px); box-shadow: 0 5px 0 rgba(58, 38, 50, 0.2), inset 0 -10px 0 #7FB5D8; }
.mjn-miette { position: absolute; width: 10px; height: 8px; border-radius: 40%; z-index: 3; pointer-events: none; transform: translate(-50%, -50%);
  box-shadow: inset -1px -2px 0 rgba(120, 70, 20, 0.45), 0 1px 1px rgba(58, 38, 50, 0.3); }
.mjn-miette.part { transition: transform 0.65s cubic-bezier(.3, .1, .6, 1), opacity 0.65s; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(200deg); opacity: 0; }
.mjn-orange { position: absolute; z-index: 3; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0.75; mix-blend-mode: multiply;
  background: radial-gradient(circle, #FF8A2A 0 40%, rgba(255, 138, 42, 0) 72%); }
.mjn-lingette { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; transform: rotate(8deg); background: #fff;
  background-image: repeating-linear-gradient(45deg, rgba(160, 200, 230, 0.35) 0 4px, transparent 4px 9px); box-shadow: 0 5px 8px rgba(58, 38, 50, 0.25); }
.mjn-orteil { position: absolute; z-index: 4; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.25); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); animation: mjn-pulse 0.8s ease-in-out infinite alternate; }
.mjn-orteil i { width: 18px; height: 14px; border-radius: 50% 50% 45% 45%; background: #F2BFA3; box-shadow: 0 0 0 3px #F7A8C4; }
.mjn-orteil.fait { animation: none; box-shadow: 0 0 0 3px var(--menthe); }
.mjn-orteil.fait i { background: #F07AA0; box-shadow: 0 0 0 3px #fff; width: 26px; height: 18px; }

/* ---------------------------------------------------------------- variantes, anciennes familles */
.mjn-granule { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #B9B1A3; z-index: 5; pointer-events: none;
  animation: mjn-granule 0.6s ease-out forwards; }
@keyframes mjn-granule { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.mjn-rouleau { display: block; width: 100%; height: 76px; position: relative; }
.mjn-rouleau::after { content: ''; position: absolute; left: 50%; top: 30px; width: 12px; height: 60px; margin-left: -6px; border-radius: 6px; background: linear-gradient(90deg, #C9477A, #F07AA0); }
.mjn-rouleau .feuille { position: absolute; left: 0; right: 0; top: 0; height: 36px; border-radius: 16px; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(235, 235, 240, 0.95)); box-shadow: 0 3px 0 rgba(58, 38, 50, 0.2);
  background-image: radial-gradient(circle at 20% 40%, rgba(120, 116, 124, calc(var(--plein, 0) * 0.9)) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(120, 116, 124, calc(var(--plein, 0) * 0.9)) 0 2px, transparent 3px), linear-gradient(180deg, #fff, #ECECF0); background-size: 14px 12px, 17px 13px, 100% 100%; }
.mjn-rouleau.plein .feuille { box-shadow: 0 0 0 3px var(--rouge), 0 3px 0 rgba(58, 38, 50, 0.2); animation: mjn-pulse 0.5s ease-in-out infinite alternate; }
.mjn-feuille-arrachee { position: absolute; height: 34px; border-radius: 12px; transform: translate(-50%, -50%); z-index: 7; pointer-events: none;
  background: repeating-linear-gradient(90deg, #E8E6EC 0 6px, #D2CFD8 6px 9px); animation: mjn-arrache 0.7s ease-in forwards; }
@keyframes mjn-arrache { to { transform: translate(40%, -260%) rotate(40deg) scale(0.7); opacity: 0; } }
.mjn-coche { position: absolute; transform: translate(-50%, -50%); z-index: 6; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: var(--menthe); color: #fff; font-weight: 900; font-size: 26px; box-shadow: 0 4px 0 var(--menthe-fonce); animation: mjn-badge 0.4s cubic-bezier(.3, 1.6, .5, 1); }
.mjn-compteur { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 6px; padding: 4px 14px 4px 6px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.9); font-family: var(--affichage); font-size: 18px; box-shadow: 0 3px 8px rgba(58, 38, 50, 0.15); }
.mjn-compteur img { width: 34px; height: 30px; object-fit: contain; }
.mjn-touffes { position: absolute; inset: 52px 14px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mjn-touffes.g16 { grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mjn-touffe-tapis { border-radius: 42% 58% 50% 50%; position: relative; min-height: 0;
  background: radial-gradient(circle at 50% 40%, #F4E6D1, #D9BF98 70%); box-shadow: 0 5px 0 rgba(120, 90, 50, 0.25), inset 0 -6px 10px rgba(150, 110, 60, 0.25); }
.mjn-touffe-tapis i { position: absolute; inset: 18%; border-radius: 50%;
  background: repeating-conic-gradient(from 10deg, rgba(160, 120, 70, 0.3) 0 8deg, transparent 8deg 22deg); }
.mjn-touffe-tapis.vue { background: radial-gradient(circle at 50% 40%, #E9D7BA, #CDB186 70%); box-shadow: inset 0 4px 10px rgba(120, 90, 50, 0.35); }
.mjn-touffe-tapis.rien i { inset: 36%; background: #C9A878; border-radius: 30%; opacity: 0.6; }
.mjn-touffe-tapis.ongle { background: #FFE6EF; animation: mjn-bump 0.35s ease; }
.mjn-touffe-tapis.ongle .mjn-img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.mjn-aimant { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0;
  border: 2px dashed rgba(240, 122, 160, 0.45); background: radial-gradient(circle, rgba(240, 122, 160, 0.08), rgba(240, 122, 160, 0) 70%); }
.mjn-aimant.gants { border-color: rgba(242, 181, 58, 0.8); background: radial-gradient(circle, rgba(242, 181, 58, 0.18), rgba(242, 181, 58, 0) 70%); animation: mjn-pulse 1.2s ease-in-out infinite alternate; }
.mjn-chrono { position: absolute; left: 90px; right: 90px; top: 72px; height: 22px; z-index: 4; pointer-events: none; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 2px rgba(58, 38, 50, 0.2); }
.mjn-chrono i { display: block; height: 100%; background: linear-gradient(90deg, #9CC9E6, #6FA8D6); }
.mjn-chrono small { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 11px; color: var(--encre); white-space: nowrap; }
.mjn-chrono.depasse { left: 40px; right: 40px; background: #FDE2E3; }
.mj-zone .eponge { scale: var(--mjn-eponge, 1); }
.cible-lancer .mjn-sac { width: 62px; height: 62px; object-fit: contain; }
.mjn-croquettes { width: 100%; height: 100%; }

/* styles/boutique.css */
/* La boutique « Livraisons » (js/ui/boutique.js) et ce qu'elle pose dans l'appartement
   (js/ui/boutique/decor.js). Toutes les classes commencent par « bq- ». Une application de
   livraison sur le téléphone d'Elodie : bandeau orange, rayons en pastilles, une ligne par article. */

/* ---------------------------------------------------------------- la feuille */
.bq-feuille .panneau { background: #FFF6EC; }
.bq-tete { background: linear-gradient(135deg, #FFB067, #FF8A5B 60%, #F46A7E); border-radius: 28px 28px 0 0; padding-bottom: 12px !important; color: white; }
.bq-tete .bq-logo { width: 42px; height: 42px; border-radius: 13px; background: white; display: grid; place-items: center; flex: none; box-shadow: 0 3px 0 rgba(120,40,20,0.25); }
.bq-tete .bq-logo .bq-piece { width: 28px; height: 28px; }
.bq-titre { flex: 1; min-width: 0; }
.bq-titre h2 { font-family: var(--affichage); font-weight: 700; font-size: 25px; line-height: 1; color: white; text-shadow: 0 2px 0 rgba(120,40,20,0.3); }
.bq-titre small { display: block; font-weight: 900; font-size: 12px; opacity: 0.95; margin-top: 2px; }
.bq-solde { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.95); color: var(--encre); border-radius: 99px; padding: 4px 11px 4px 5px;
  font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; flex: none; }
.bq-solde .bq-piece { width: 22px; height: 22px; }
.bq-tete .fermer { background: rgba(255,255,255,0.3); color: white; }
.bq-corps { padding-top: 0 !important; }

/* ---------------------------------------------------------------- la vitrine (feuille ou téléphone) */
.bq-vitrine { display: flex; flex-direction: column; gap: 9px; }
.bq-rayons { position: sticky; top: 0; z-index: 2; display: flex; flex: none; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 8px;
  background: linear-gradient(180deg, #FFF6EC 80%, rgba(255,246,236,0)); margin: 0 -2px; }
.bq-rayons::-webkit-scrollbar { display: none; }
.bq-rayons button { flex: none; position: relative; background: white; color: var(--encre); font-weight: 900; font-size: 13.5px; padding: 8px 13px; border-radius: 99px;
  box-shadow: 0 2px 0 rgba(58,38,50,0.12); }
.bq-rayons button.actif { background: #FF8A5B; color: white; box-shadow: 0 2px 0 #C95A33; }
.bq-rayons button i { position: absolute; top: 2px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--rouge); border: 2px solid white; }
.bq-note { font-weight: 700; font-size: 13px; line-height: 1.35; color: var(--encre-2); margin: 0 2px; }
.bq-notice { background: linear-gradient(135deg, #D8F5DF, #B5E8C2); color: #1f4a2b; border-radius: 16px; padding: 10px 13px; font-weight: 800; font-size: 14px;
  line-height: 1.35; box-shadow: 0 3px 0 rgba(30,80,40,0.15); animation: bq-pop 0.35s cubic-bezier(.3,1.6,.5,1); }
.bq-notice b { font-family: var(--affichage); font-weight: 700; font-size: 16px; }
.bq-lien { font-weight: 900; font-size: 13.5px; color: var(--rose-fonce); text-decoration: underline; text-underline-offset: 3px; padding: 2px 2px; }
.bq-notice .bq-lien { color: #1f6a36; }

.bq-article { position: relative; display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; background: white; border-radius: 18px;
  padding: 9px 10px 9px 8px; box-shadow: 0 3px 0 rgba(58,38,50,0.09); }
.bq-vis { width: 62px; height: 62px; border-radius: 14px; background: radial-gradient(circle at 50% 60%, #FFF1DD, #FBE3C6); display: grid; place-items: center; overflow: hidden; }
.bq-vis img { max-width: 54px; max-height: 54px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(58,38,50,0.2)); }
.bq-emo { font-size: 30px; }
.bq-infos { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bq-infos h3 { font-family: var(--affichage); font-weight: 600; font-size: 16px; line-height: 1.12; }
.bq-infos p { font-weight: 700; font-size: 12.5px; line-height: 1.3; color: var(--encre-2); }
.bq-etat { font-weight: 800; font-size: 12px; line-height: 1.3; color: var(--encre); }
.bq-etat b { color: #C95A33; }
.bq-niveaux { display: flex; gap: 3px; margin-top: 2px; flex-wrap: wrap; }
.bq-niveaux i { width: 14px; height: 6px; border-radius: 3px; background: var(--creme-2); }
.bq-niveaux i.on { background: #FF8A5B; }
.bq-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.bq-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 82px; min-height: 38px; border-radius: 14px; padding: 6px 10px;
  font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bq-bouton .bq-piece { width: 19px; height: 19px; flex: none; }
.bq-acheter { background: linear-gradient(180deg, #FFB067, #FF8A5B); color: white; box-shadow: 0 3px 0 #C95A33; text-shadow: 0 1px 0 rgba(120,40,20,0.35); }
.bq-acheter:active { transform: translateY(2px); box-shadow: 0 1px 0 #C95A33; }
.bq-cher .bq-acheter { background: var(--creme-2); color: var(--encre-2); box-shadow: 0 3px 0 rgba(58,38,50,0.15); text-shadow: none; }
.bq-cher .bq-acheter .bq-piece { filter: grayscale(0.6); opacity: 0.8; }
.bq-bloque { background: #EFE6EA; color: var(--encre-2); font-size: 13px; }
.bq-cadenas { width: 15px; height: 15px; flex: none; }
.bq-fini { background: #E4F5E8; color: var(--menthe-fonce); font-size: 13px; }
.bq-utiliser { background: linear-gradient(180deg, #A6E3B3, var(--menthe)); color: white; box-shadow: 0 3px 0 var(--menthe-fonce); font-size: 13.5px; text-shadow: 0 1px 0 rgba(30,80,40,0.35); }
.bq-verrou .bq-vis img { filter: grayscale(1) opacity(0.5); }
.bq-verrou h3, .bq-verrou p { opacity: 0.7; }
.bq-nouveau::after { content: 'Nouveau'; position: absolute; top: -6px; left: 10px; background: var(--rouge); color: white; font-weight: 900; font-size: 10px; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 2px 7px; border-radius: 99px; }
.bq-choix { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 8px; border-top: 1px dashed var(--creme-2); }
.bq-choix span { font-weight: 900; font-size: 12px; color: var(--encre-2); width: 100%; }
.bq-choix button { background: var(--creme-2); font-weight: 900; font-size: 13px; padding: 8px 12px; border-radius: 99px; }
.bq-choix button.actif { background: #FF8A5B; color: white; }
.bq-refus { animation: bq-refus 0.4s ease; }
@keyframes bq-refus { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.bq-livre .bq-vis { animation: bq-pop 0.45s cubic-bezier(.3,1.6,.5,1); }
.bq-livre::before { content: 'Livré !'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 1; pointer-events: none;
  font-family: var(--affichage); font-weight: 700; font-size: 30px; color: #2f8a4a; border: 4px solid #2f8a4a; border-radius: 12px; padding: 0 12px;
  background: rgba(255,255,255,0.85); animation: bq-tampon 1.3s ease forwards; }
@keyframes bq-tampon { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2); } 15% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } }
@keyframes bq-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.bq-toast-refus small { color: var(--rouge); }

/* dans le téléphone (fond rose) */
.bq-dans-tel .bq-rayons { background: none; position: static; }
.bq-dans-tel .bq-note { color: white; }
.bq-ic-menu { width: 26px; height: 26px; object-fit: contain; }

/* ---------------------------------------------------------------- la déco et les aides dans les pièces */
.calque-deco { z-index: 0; }
.bq-objet { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.bq-objet .bq-spr { position: absolute; -webkit-user-drag: none; }
.bq-vue-trois_quarts .bq-spr { filter: drop-shadow(0 4px 3px rgba(58,38,50,0.3)); }
.bq-vue-face .bq-spr { filter: drop-shadow(2px 3px 2px rgba(58,38,50,0.22)); }
.bq-vue-dessus .bq-spr { opacity: 0.96; }
.bq-roule .bq-spr { animation: bq-roule 9s ease-in-out infinite; }
@keyframes bq-roule { 0%, 100% { translate: 0 0; } 25% { translate: 34px 8px; } 50% { translate: -10px 14px; } 75% { translate: -40px 2px; } }
.bq-nait { animation: bq-nait 0.7s cubic-bezier(.3,1.6,.5,1); }
@keyframes bq-nait { 0% { scale: 0.2; opacity: 0; } 60% { scale: 1.12; opacity: 1; } 100% { scale: 1; } }

/* ---------------------------------------------------------------- le sablier doré (barre du haut) */
/* un rond comme la jauge bonus : l'or qui reste en anneau (--p), « ×2 » en pastille, le temps dessous */
.bq-sablier { --p: 1; width: 38px; height: 38px; border-radius: 50%; flex: none; position: relative; display: grid; place-items: center;
  background: conic-gradient(var(--or) calc(var(--p) * 1turn), rgba(58,38,50,0.14) 0); box-shadow: 0 2px 0 rgba(58,38,50,0.15); }
.bq-sablier::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: linear-gradient(180deg, #FFF6D6, #FFE08A); }
.bq-sablier img { position: relative; width: 16px; height: 24px; object-fit: contain; animation: bq-tourne 2.4s ease-in-out infinite; }
.bq-sablier span { position: absolute; right: -6px; top: -5px; background: var(--rose-fonce); color: white; border-radius: 9px; padding: 0 4px;
  font-family: var(--affichage); font-weight: 700; font-size: 11px; line-height: 16px; }
.bq-sablier b { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); background: #7a4a00; color: #FFE08A; border-radius: 8px; padding: 0 4px;
  font-weight: 900; font-size: 9.5px; line-height: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bq-sablier.bq-fin { animation: pulse 0.9s ease-in-out infinite; }
@keyframes bq-tourne { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } }

/* ---------------------------------------------------------------- le joker */
.bq-joker-bandeau { position: absolute; left: 10px; right: 10px; top: 42px; z-index: 9; display: flex; align-items: center; gap: 10px; background: #2C2F5B; color: white;
  border-radius: 16px; padding: 7px 8px 7px 8px; box-shadow: 0 6px 18px rgba(20,20,60,0.35); animation: bq-pop 0.3s ease; }
.bq-joker-bandeau img { width: 30px; height: 40px; object-fit: contain; }
.bq-joker-bandeau span { flex: 1; font-weight: 800; font-size: 14px; line-height: 1.25; }
.bq-joker-bandeau span b { display: block; font-family: var(--affichage); font-size: 16px; color: #FFD66B; }
.bq-joker-bandeau button { background: rgba(255,255,255,0.18); color: white; font-weight: 900; font-size: 13px; padding: 8px 12px; border-radius: 12px; }
.bq-joker-actif .degat .anneau { border-color: #FFD66B; border-style: solid; box-shadow: 0 0 0 3px rgba(255,214,107,0.55), 0 0 18px rgba(255,214,107,0.9); animation: bq-joker 0.9s ease-in-out infinite; }
@keyframes bq-joker { 50% { transform: scale(1.12); } }

/* ---------------------------------------------------------------- le coffre surprise */
.bq-coffre { position: fixed; inset: 0; z-index: 38; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(circle at 50% 42%, rgba(255,214,107,0.55), rgba(44,47,91,0.88) 62%); padding: 24px; }
.bq-coffre-scene { position: relative; width: 220px; height: 210px; display: grid; place-items: center; }
.bq-halo { position: absolute; inset: -30px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,255,255,0.0), rgba(255,240,180,0.6), rgba(255,255,255,0.0) 25%,
  rgba(255,240,180,0.6) 50%, rgba(255,255,255,0) 75%, rgba(255,240,180,0.6)); animation: bq-halo 6s linear infinite; }
@keyframes bq-halo { to { transform: rotate(1turn); } }
.bq-coffre-img { position: relative; width: 200px; filter: drop-shadow(0 12px 16px rgba(0,0,0,0.35)); }
.bq-coffre-img.bq-secoue { animation: bq-secoue 0.3s ease; }
@keyframes bq-secoue { 20% { transform: rotate(-9deg) scale(1.04); } 50% { transform: rotate(8deg) scale(1.06); } 80% { transform: rotate(-4deg); } }
.bq-coffre-img.bq-ouvre { animation: bq-ouvre 0.45s ease forwards; }
@keyframes bq-ouvre { 40% { transform: scale(1.25) translateY(-8px); } 100% { transform: scale(0.7) translateY(30px); opacity: 0.35; } }
.bq-coffre-carte { background: white; border-radius: 26px; padding: 18px 18px 16px; width: min(320px, 100%); text-align: center; display: flex; flex-direction: column; gap: 8px;
  align-items: center; box-shadow: 0 16px 40px rgba(0,0,0,0.35); animation: bq-pop 0.45s cubic-bezier(.3,1.6,.5,1); margin-top: -120px; position: relative; }
.bq-coffre-carte img { max-width: 130px; max-height: 110px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(58,38,50,0.25)); }
.bq-coffre-carte h3 { font-family: var(--affichage); font-weight: 700; font-size: 24px; color: var(--rose-fonce); }
.bq-coffre-carte p { font-weight: 800; font-size: 14.5px; line-height: 1.35; color: var(--encre-2); }
.bq-coffre-carte .gros-bouton { font-size: 19px; padding: 11px 26px; margin-top: 4px; }
.bq-pluie { display: flex; gap: 4px; }
.bq-pluie .bq-piece { width: 48px; height: 48px; animation: bq-pop 0.5s cubic-bezier(.3,1.6,.5,1) backwards; }
.bq-pluie .bq-piece:nth-child(2) { animation-delay: 0.1s; transform: translateY(-10px); }
.bq-pluie .bq-piece:nth-child(3) { animation-delay: 0.2s; }

/* styles/progression.css */
/* La progression (js/ui/progression.js et js/ui/progression/) : feuille du niveau, fête de passage
   de niveau, écrans du téléphone (Rappels et carnet, Idées, Trouvailles, Gestes), l'ampoule, les
   cachettes et le sac des objets perdus. Toutes les classes commencent par « pg- ». Les écrans du
   téléphone sont posés sur son fond rose : des cartes blanches, les titres en blanc. */

/* ---------------------------------------------------------------- barre du haut et barre du bas */
.niveau > .pg-pastille, .pg-pastille { position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--rouge); color: white; border: 2px solid white;
  font-weight: 900; font-size: 10.5px; line-height: 14px; text-align: center; padding: 0 3px; z-index: 1; animation: bump 0.35s ease; }
.pg-ampoule { position: relative; }
.pg-ampoule svg { width: 24px; height: 24px; }
.pg-ampoule.pg-grise svg { filter: grayscale(1) opacity(0.55); }
.pg-ampoule.pg-grise span { opacity: 0.6; }
.pg-ampoule.pg-pulse { background: linear-gradient(180deg, #FFF3C4, #FFE08A); animation: pg-ampoule 1.3s ease-in-out infinite; }
.pg-ampoule.pg-pulse svg { filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.95)); }
@keyframes pg-ampoule { 50% { transform: scale(1.08); box-shadow: 0 3px 0 rgba(58,38,50,0.15), 0 0 16px rgba(255, 205, 80, 0.8); } }
.pg-ic-menu { font-size: 20px; color: var(--or); }

/* ---------------------------------------------------------------- écrans du téléphone */
.pg-ecran { display: flex; flex-direction: column; gap: 10px; }
.pg-app-tete { display: flex; gap: 11px; align-items: center; color: white; padding: 2px 2px 4px; }
.pg-app-tete h3 { font-family: var(--affichage); font-weight: 700; font-size: 24px; line-height: 1; text-shadow: 0 2px 0 rgba(120,20,60,0.25); }
.pg-app-tete small { display: block; font-weight: 800; font-size: 12.5px; line-height: 1.3; opacity: 0.95; margin-top: 2px; }
.pg-app-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: white; position: relative; box-shadow: 0 3px 0 rgba(120,20,60,0.2); display: inline-block; }
.pg-app-ic::before, .pg-app-ic::after { content: ''; position: absolute; }
.pg-ic-rappels::before { left: 10px; top: 11px; width: 8px; height: 8px; border-radius: 50%; border: 2.5px solid #FF8A5B; box-shadow: 0 13px 0 -0px transparent; }
.pg-ic-rappels::after { left: 23px; top: 14px; width: 12px; height: 3px; border-radius: 2px; background: #C9B8C0; box-shadow: 0 8px 0 #C9B8C0, 0 16px 0 #C9B8C0; }
.pg-ic-idees::before { left: 13px; top: 8px; width: 18px; height: 20px; border-radius: 50% 50% 45% 45%; background: #FFD66B; box-shadow: 0 0 10px rgba(255, 200, 60, 0.8); }
.pg-ic-idees::after { left: 17px; top: 29px; width: 10px; height: 6px; border-radius: 2px; background: #8FA3B0; }
.pg-ic-trouvailles::before { left: 9px; top: 9px; width: 18px; height: 18px; border-radius: 50%; border: 3.5px solid var(--rose-fonce); }
.pg-ic-trouvailles::after { left: 27px; top: 27px; width: 11px; height: 4px; border-radius: 2px; background: var(--rose-fonce); transform: rotate(45deg); transform-origin: 0 50%; }
.pg-ic-gestes::before { left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); background: var(--or);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pg-carte { background: var(--verre); border-radius: 18px; padding: 11px 13px; font-weight: 800; font-size: 14.5px; line-height: 1.35; box-shadow: 0 4px 14px rgba(120,20,60,0.15); }
.pg-verrou { background: rgba(255,255,255,0.75); color: var(--encre-2); }
.pg-petit { font-weight: 800; font-size: 12.5px; line-height: 1.35; color: white; text-align: center; opacity: 0.95; }
.pg-bouton { background: linear-gradient(180deg, #FF8DB2, var(--rose) 55%, var(--rose-fonce)); color: white; font-weight: 900; font-size: 14px; padding: 8px 13px;
  border-radius: 14px; box-shadow: 0 3px 0 rgba(120,20,60,0.35); text-shadow: 0 1px 0 rgba(120,20,60,0.35); white-space: nowrap; }
.pg-bouton:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120,20,60,0.35); }
.pg-bouton[aria-disabled="true"] { background: var(--creme-2); color: var(--encre-2); box-shadow: 0 3px 0 rgba(58,38,50,0.12); text-shadow: none; }

/* les Rappels */
.pg-liste { display: flex; flex-direction: column; gap: 8px; }
.pg-rappel { display: flex; gap: 10px; align-items: center; background: white; border-radius: 18px; padding: 11px 12px; box-shadow: 0 4px 14px rgba(120,20,60,0.15); }
.pg-case { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid #FF8A5B; position: relative; }
.pg-fait .pg-case { background: #FFE3D4; }
.pg-recu .pg-case { background: #FF8A5B; }
.pg-recu .pg-case::after { content: ''; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.pg-r-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pg-r-texte { font-weight: 800; font-size: 15px; line-height: 1.25; }
.pg-recu .pg-r-texte { text-decoration: line-through; text-decoration-color: rgba(58,38,50,0.4); color: var(--encre-2); }
.pg-r-prog { display: flex; align-items: center; gap: 8px; }
.pg-r-prog .barre { flex: 1; }
.pg-r-prog .barre i { background: #FF8A5B; }
.pg-r-prog span { font-weight: 900; font-size: 12px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.pg-r-recomp { font-weight: 800; font-size: 11.5px; color: var(--encre-2); }
.pg-r-recomp i { font-style: normal; color: var(--rose-fonce); }
.pg-reclamer { animation: pulse 1.1s ease-in-out infinite; }
.pg-relancer { flex: none; font-weight: 900; font-size: 12px; color: var(--encre-2); background: var(--creme-2); border-radius: 12px; padding: 7px 9px; }
.pg-reclame { flex: none; font-weight: 900; font-size: 12px; color: var(--menthe-fonce); }
.pg-coffret { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,0.7); border-radius: 16px; padding: 8px 12px; font-size: 13px; font-weight: 800; line-height: 1.3; }
.pg-coffret img { width: 44px; height: 42px; object-fit: contain; filter: grayscale(0.5); opacity: 0.8; }
.pg-coffret b { display: block; font-family: var(--affichage); font-weight: 700; font-size: 15px; }
.pg-coffret.pg-ouvert { background: linear-gradient(135deg, #FFF3C9, #FFE08A); }
.pg-coffret.pg-ouvert img { filter: none; opacity: 1; }
.pg-toast-rappel, .pg-toast-carnet { display: flex; gap: 10px; align-items: center; }
.pg-toast-rappel .pg-coche { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #FF8A5B; position: relative; }
.pg-toast-rappel .pg-coche::after { content: ''; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.pg-toast-carnet > b { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--rose); color: white; display: grid; place-items: center; font-family: var(--affichage); font-size: 19px; }

/* le carnet des 28 jours */
.pg-carnet { background: white; border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 14px rgba(120,20,60,0.15); margin-top: 4px; }
.pg-carnet .pg-petit { color: var(--encre-2); }
.pg-carnet-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pg-carnet-tete h4 { margin: 0; font-family: var(--affichage); font-weight: 700; font-size: 17px; }
.pg-carnet-tete span { font-weight: 900; font-size: 12px; color: var(--encre-2); }
.pg-grille-carnet { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.pg-jour { aspect-ratio: 1 / 1.1; border-radius: 10px; background: var(--creme); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  position: relative; overflow: hidden; }
.pg-jour span { position: absolute; left: 4px; top: 2px; font-weight: 900; font-size: 9.5px; color: var(--encre-2); }
.pg-jour b { font-weight: 900; font-size: 11.5px; margin-top: 7px; font-variant-numeric: tabular-nums; }
.pg-jour i { font-style: normal; font-weight: 800; font-size: 9px; color: var(--rose-fonce); line-height: 1; margin-top: 7px; }
.pg-jour b + i { margin-top: 0; }
.pg-jour.pg-gros { background: linear-gradient(135deg, #FFF3C9, #FFE08A); }
.pg-jour.pg-coche { background: var(--rose-pale); }
.pg-jour.pg-coche::after { content: ''; position: absolute; inset: 0; background: rgba(240,122,160,0.32);
  clip-path: polygon(18% 52%, 30% 40%, 44% 56%, 72% 24%, 84% 36%, 44% 80%); }
.pg-jour.pg-auj { box-shadow: 0 0 0 2.5px var(--rose-fonce); animation: bump 0.5s ease 0.3s; }

/* les Idées */
.pg-idees-etat { display: flex; gap: 6px; flex-wrap: wrap; }
.pg-idees-etat span { background: rgba(255,255,255,0.9); border-radius: 99px; padding: 5px 11px; font-weight: 900; font-size: 12.5px; }
.pg-ticket::before { content: ''; display: inline-block; width: 15px; height: 10px; margin-right: 5px; border-radius: 2px; background: var(--or);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 3px, #000 3.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 3px, #000 3.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 3px, #000 3.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 3px, #000 3.5px) right / 51% 100% no-repeat; }
.pg-hebdo::before { background: var(--rose-fonce); }
.pg-idee { display: flex; gap: 11px; background: white; border-radius: 18px; padding: 10px 12px 10px 8px; box-shadow: 0 4px 14px rgba(120,20,60,0.15); }
.pg-idee-vis { flex: none; width: 64px; height: 82px; border-radius: 14px; background: radial-gradient(circle at 50% 70%, #FFE9F1, #FBD9E3); position: relative; overflow: hidden; }
.pg-idee-vis img { position: absolute; left: 50%; bottom: -4px; height: 92px; transform: translateX(-50%); }
.pg-idee-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pg-idee h4 { margin: 0; font-family: var(--affichage); font-weight: 700; font-size: 17px; line-height: 1.1; }
.pg-idee .pg-replique { font-weight: 800; font-size: 13px; font-style: italic; color: var(--rose-fonce); }
.pg-idee-info { font-weight: 700; font-size: 11.5px; line-height: 1.3; color: var(--encre-2); }
.pg-idee-etat { font-weight: 900; font-size: 12px; color: #C2571A; }
.pg-idee-boutons { display: flex; gap: 6px; margin-top: 3px; }
.pg-ticket-b { background: linear-gradient(180deg, #FFE69A, var(--or)); color: #6a4200; text-shadow: none; box-shadow: 0 3px 0 #C98A1A; }
.pg-idee.pg-ferme { opacity: 0.72; }
.pg-idee.pg-ferme .pg-idee-vis img { filter: grayscale(1) opacity(0.5); }
.pg-cadenas { position: absolute; left: 50%; top: 50%; width: 22px; height: 18px; margin: -4px 0 0 -11px; border-radius: 4px; background: var(--encre-2); }
.pg-cadenas::before { content: ''; position: absolute; left: 4px; top: -10px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--encre-2); border-bottom-color: transparent; }
.pg-idee-hebdo { background: linear-gradient(135deg, white 60%, #FFE9F1); }

/* le verre qui penche (Un petit rosé) */
.pg-qte { position: absolute; z-index: 9; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.35); box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 6px 20px rgba(120,20,60,0.35); touch-action: none; }
.pg-qte img { width: 50px; height: 50px; object-fit: contain; animation: pg-penche 0.6s ease-in-out infinite alternate; }
.pg-qte i { position: absolute; inset: -6px; border-radius: 50%; border: 5px solid var(--rose-fonce); animation: pg-referme var(--d, 1.7s) linear forwards; }
.pg-qte span { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--rose-fonce); color: white; font-weight: 900;
  font-size: 13px; padding: 4px 10px; border-radius: 99px; }
@keyframes pg-referme { from { transform: scale(1.7); opacity: 0.4; } 30% { opacity: 1; } to { transform: scale(0.55); border-color: var(--rouge); } }
@keyframes pg-penche { from { transform: rotate(-8deg); } to { transform: rotate(22deg); } }

/* ---------------------------------------------------------------- les cachettes et le sac */
.calque-cachettes .pg-cachette { position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; pointer-events: auto; }
.pg-cachette i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: white;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0.6; filter: drop-shadow(0 0 2px rgba(58,38,50,0.6));
  animation: pg-brille 3.2s ease-in-out infinite; }
.pg-cachette i + i { width: 9px; height: 9px; margin: -15px 0 0 3px; animation-delay: -1.6s; }
.pg-cachette.pg-scintille i { background: #FFE07A; opacity: 1; width: 22px; height: 22px; margin: -11px 0 0 -11px; filter: drop-shadow(0 0 5px rgba(255, 200, 60, 1)); animation-duration: 1.4s; }
.pg-cachette.pg-scintille i + i { width: 12px; height: 12px; margin: -19px 0 0 4px; }
.pg-cachette.pg-fouillee { opacity: 0.18; }
.pg-cachette.pg-fouillee i { animation: none; }
.pg-cachette.pg-du-chat::after { content: '🐾'; position: absolute; right: -10px; bottom: -8px; font-size: 15px; animation: pulse 1s ease-in-out infinite; }
.pg-cachette.pg-fouille { animation: pg-fouille 0.8s ease; }
.pg-cachette.pg-fouille::before { content: '🔍'; position: absolute; left: 50%; top: 50%; font-size: 26px; transform: translate(-50%, -60%); animation: pg-loupe 0.8s ease; }
.pg-cachette.pg-montre { animation: pg-montre 0.6s ease 3; }
@keyframes pg-brille { 0%, 100% { transform: scale(0.7) rotate(0); opacity: 0.35; } 50% { transform: scale(1.1) rotate(45deg); opacity: 0.85; } }
/* « rotate » et « scale » plutôt que « transform » : la position de la cachette est sa transformation */
@keyframes pg-fouille { 15%, 45%, 75% { rotate: -12deg; } 30%, 60%, 90% { rotate: 12deg; } }
@keyframes pg-loupe { 0% { transform: translate(-80%, -40%) rotate(-20deg); } 50% { transform: translate(-20%, -80%) rotate(15deg); } 100% { transform: translate(-50%, -60%); } }
@keyframes pg-montre { 50% { scale: 1.8; } }
.pg-sort { position: absolute; z-index: 10; pointer-events: none; animation: pg-sort 1.3s cubic-bezier(.3,1.4,.5,1) forwards; }
.pg-sort img { width: 76px; height: 76px; object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 6px rgba(58,38,50,0.4)); }
@keyframes pg-sort { 0% { transform: translateY(10px) scale(0.2); opacity: 0; } 30% { transform: translateY(-60px) scale(1.2); opacity: 1; } 70% { transform: translateY(-70px) scale(1); opacity: 1; }
  100% { transform: translate(120px, -300px) scale(0.4); opacity: 0; } }
.gain.pg-rien { font-size: 17px; text-shadow: 0 2px 0 var(--encre-2), 0 0 10px rgba(255,255,255,0.9); }
.toast.pg-rarete-rare { background: linear-gradient(135deg, #D8F5E4, #A9DCEB); }
.toast.pg-rarete-legendaire { background: linear-gradient(135deg, #FFF0B0, var(--or) 45%, #FFD0E6); }

.pg-sac { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; margin-top: 4px; }
.pg-sac-objet { --f: 0; position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--verre); box-shadow: 0 3px 10px rgba(58,38,50,0.3);
  display: grid; place-items: center; touch-action: none; animation: bq-pop 0.4s cubic-bezier(.3,1.6,.5,1); }
.pg-sac-objet img { width: 40px; height: 40px; object-fit: contain; pointer-events: none; animation: pg-flotte 1.6s ease-in-out infinite; }
.pg-sac-objet svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.pg-sac-objet circle { fill: none; stroke: var(--rose); stroke-width: 3.5; stroke-dasharray: 113.1; stroke-dashoffset: calc(113.1 * var(--f)); stroke-linecap: round; }
.pg-sac-objet.pg-tenu { opacity: 0.4; }
.pg-sac-objet::after { content: 'À rendre'; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--rose-fonce); color: white;
  font-weight: 900; font-size: 9.5px; padding: 1px 6px; border-radius: 99px; }
@keyframes pg-flotte { 50% { transform: translateY(-3px) rotate(6deg); } }
.pg-fantome { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; }
.pg-fantome img { width: 64px; height: 64px; object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 8px rgba(58,38,50,0.4)); }
.pg-fantome.pg-vole { transition: transform 0.4s cubic-bezier(.4,0,.2,1); }

/* l'écran Trouvailles */
.pg-a-rendre { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pg-a-rendre button { display: flex; align-items: center; gap: 6px; background: var(--rose-pale); border-radius: 12px; padding: 5px 9px 5px 5px; font-weight: 800; font-size: 12px;
  text-align: left; max-width: 100%; }
.pg-a-rendre img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.pg-serie { background: white; border-radius: 18px; padding: 10px 11px 11px; box-shadow: 0 4px 14px rgba(120,20,60,0.15); display: flex; flex-direction: column; gap: 8px; }
.pg-serie.pg-complete { background: linear-gradient(135deg, #FFFBEA, #FFF0B8); }
.pg-serie-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pg-serie-tete h4 { margin: 0; font-family: var(--affichage); font-weight: 700; font-size: 16px; }
.pg-serie-tete span { font-weight: 900; font-size: 11.5px; color: var(--encre-2); text-align: right; }
.pg-objets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pg-objet { position: relative; border-radius: 12px; background: var(--creme); padding: 6px 4px 5px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.pg-objet img { width: 44px; height: 44px; object-fit: contain; }
.pg-objet span { font-weight: 800; font-size: 10px; line-height: 1.2; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pg-objet b { position: absolute; top: 3px; right: 4px; font-size: 10px; color: var(--encre-2); }
.pg-objet.pg-rare { background: linear-gradient(135deg, #E3F6EA, #D2ECF4); }
.pg-objet.pg-legendaire { background: linear-gradient(135deg, #FFF3C9, #FFE08A); box-shadow: inset 0 0 0 2px var(--or); }
.pg-objet.pg-manque { background: #F3ECEF; }
.pg-objet.pg-manque span { color: var(--encre-2); font-size: 12px; }
.pg-silhouette { filter: brightness(0) opacity(0.18) !important; }

/* ---------------------------------------------------------------- la feuille du niveau */
.pg-niveau-carte { display: flex; gap: 14px; align-items: center; background: white; border-radius: 20px; padding: 12px 14px; box-shadow: 0 4px 0 rgba(58,38,50,0.08); }
.pg-rond { --p: 0; flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--rose) calc(var(--p) * 1turn), rgba(58,38,50,0.12) 0); }
.pg-rond::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--creme); }
.pg-rond b { position: relative; font-family: var(--affichage); font-weight: 700; font-size: 32px; color: var(--rose-fonce); }
.pg-niveau-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pg-niveau-info > span { font-weight: 800; font-size: 12.5px; line-height: 1.3; color: var(--encre-2); }
.pg-xp { display: flex; align-items: center; gap: 8px; }
.pg-xp .barre { flex: 1; height: 9px; border-radius: 5px; }
.pg-xp span { font-weight: 900; font-size: 11.5px; color: var(--encre-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-titres { display: flex; flex-wrap: wrap; gap: 4px; }
.pg-titres i { font-style: normal; font-weight: 900; font-size: 11px; background: linear-gradient(180deg, #FFE69A, var(--or)); color: #6a4200; border-radius: 99px; padding: 2px 8px; }
.pg-raccourcis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pg-raccourcis button { position: relative; display: flex; align-items: center; gap: 9px; background: linear-gradient(180deg, #F9A9C5, var(--rose)); color: white; border-radius: 16px;
  padding: 8px 10px; font-weight: 900; font-size: 14px; text-align: left; box-shadow: 0 3px 0 var(--rose-fonce); }
.pg-raccourcis .pg-app-ic { width: 34px; height: 34px; border-radius: 10px; transform: scale(0.85); transform-origin: left center; margin-right: -4px; }
.pg-raccourcis b { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--rouge); color: white; border-radius: 99px; min-width: 20px; height: 20px;
  display: grid; place-items: center; font-size: 11px; border: 2px solid white; }
.pg-deblocages { display: flex; flex-direction: column; gap: 7px; }
.pg-debl { display: flex; gap: 10px; align-items: center; background: white; border-radius: 16px; padding: 8px 10px 8px 8px; box-shadow: 0 3px 0 rgba(58,38,50,0.08); text-align: left; }
.pg-debl-vis { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--rose-pale); display: grid; place-items: center; overflow: hidden; }
.pg-debl-vis img { max-width: 42px; max-height: 42px; object-fit: contain; }
.pg-type-idee .pg-debl-vis img { max-height: none; height: 60px; margin-top: 18px; }
.pg-emo { font-size: 22px; color: var(--rose-fonce); font-weight: 900; }
.pg-debl-corps { flex: 1; min-width: 0; }
.pg-debl-corps small { display: block; font-weight: 900; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--rose-fonce); }
.pg-debl-corps b { font-weight: 800; font-size: 14px; line-height: 1.25; }
.pg-debl-corps .pg-ville-txt { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--texte-doux, #7a6470); }
.pg-plus-tard .pg-debl { opacity: 0.7; }
.pg-plus-tard .pg-debl-vis img { filter: grayscale(1) opacity(0.6); }

/* ---------------------------------------------------------------- la fête de passage de niveau */
.pg-fete { position: fixed; inset: 0; z-index: 36; display: flex; align-items: center; justify-content: center; padding: 20px 16px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 230, 150, 0.6), rgba(44, 47, 91, 0.82) 70%); animation: fond-entre 0.3s ease; overflow: hidden; }
.pg-confettis { position: absolute; inset: 0; pointer-events: none; }
.pg-confettis i { position: absolute; left: var(--x); top: -20px; width: 9px; height: 14px; border-radius: 2px; background: var(--c); transform: rotate(var(--r));
  animation: pg-tombe calc(var(--d) * 2.2) linear infinite; animation-delay: calc(var(--d) * -1); }
@keyframes pg-tombe { to { transform: translateY(110vh) rotate(calc(var(--r) + 540deg)); } }
.pg-fete-carte { position: relative; width: min(360px, 100%); max-height: 100%; overflow: hidden; background: var(--creme); border-radius: 28px; padding: 16px 14px 16px;
  display: flex; flex-direction: column; gap: 10px; align-items: stretch; box-shadow: 0 18px 40px rgba(0,0,0,0.35); animation: pg-pop-carte 0.45s ease-out; }
/* un rebond discret : la carte fait presque toute la largeur, un grand rebond la faisait sortir de l'écran */
@keyframes pg-pop-carte { 0% { transform: scale(0.85); opacity: 0; } 70% { transform: scale(1.02); opacity: 1; } 100% { transform: none; } }
.pg-fete-niveau { align-self: center; width: 118px; height: 118px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #FFF3C4, var(--or) 60%, #D18E1C); color: white; box-shadow: 0 6px 0 rgba(120,70,0,0.35), 0 0 0 6px white;
  text-shadow: 0 2px 0 rgba(120,70,0,0.4); margin-top: 4px; }
.pg-fete-niveau span { font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; }
.pg-fete-niveau b { font-family: var(--affichage); font-weight: 700; font-size: 52px; line-height: 1; }
.pg-fete-bonus { text-align: center; font-family: var(--affichage); font-weight: 700; font-size: 21px; color: #B9801A; }
/* beaucoup de cartes (plusieurs niveaux d'un coup) : la liste défile, « Continuer » reste en vue */
.pg-fete-niveau, .pg-fete-bonus, .pg-continuer { flex: none; }
.pg-fete .pg-deblocages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 2px 4px; margin: 0 -2px; }
.pg-fete .pg-debl { box-shadow: 0 3px 0 rgba(58,38,50,0.1); }
.pg-fete .pg-bouton { font-size: 13px; padding: 7px 10px; }
.pg-continuer { font-size: 19px !important; padding: 12px 20px !important; margin-top: 2px; }

/* ---------------------------------------------------------------- Gestes : la maîtrise */
.pg-gestes { display: flex; flex-direction: column; gap: 7px; }
.pg-geste { display: flex; gap: 10px; align-items: center; background: white; border-radius: 16px; padding: 9px 11px 9px 9px; box-shadow: 0 4px 14px rgba(120,20,60,0.12); }
.pg-medaille { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--affichage); font-weight: 700; font-size: 14px; color: white;
  background: radial-gradient(circle at 35% 30%, #E4DDE0, #A89CA3); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); }
.pg-rang-1 .pg-medaille { background: radial-gradient(circle at 35% 30%, #F2C49B, #B06A30); }
.pg-rang-2 .pg-medaille { background: radial-gradient(circle at 35% 30%, #F4F6F8, #9CA7B2); color: #4a5560; }
.pg-rang-3 .pg-medaille { background: radial-gradient(circle at 35% 30%, #FFF0B0, var(--or)); color: #6a4200; }
.pg-rang-4 .pg-medaille { background: radial-gradient(circle at 35% 30%, #E6FBFF, #7CCFEA 60%, #B79AF0); color: #2a3a6a; }
.pg-geste-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pg-geste-l1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pg-geste-l1 b { font-family: var(--affichage); font-weight: 600; font-size: 15.5px; }
.pg-geste-l1 span { font-weight: 900; font-size: 11px; color: var(--encre-2); text-align: right; }
.pg-geste .barre i { background: var(--or); }
.pg-geste-l3 { font-weight: 700; font-size: 11.5px; color: var(--encre-2); }

/* styles/bonus.css */
/* Les niveaux bonus et la jauge bonus (js/bonus/). Classes préfixées « bn- », animations aussi.
   Jetons de couleur et de police du socle (base.css) : --rose, --creme, --or, --affichage... */

/* ================================================================ la jauge (barre du haut) */
.bn-plus-jauge { position: fixed; z-index: 45; transform: translate(-50%, 0); pointer-events: none; font-family: var(--affichage); font-weight: 700;
  font-size: 16px; color: white; background: linear-gradient(180deg, #FFD76A, var(--or)); border-radius: 10px; padding: 1px 8px;
  text-shadow: 0 1px 0 #B9801A; box-shadow: 0 2px 0 rgba(120,70,0,0.35); animation: bn-plus-jauge 0.95s ease-out forwards; }
@keyframes bn-plus-jauge { from { opacity: 0; transform: translate(-50%, 10px) scale(0.6); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  to { opacity: 0; transform: translate(-50%, -18px) scale(1); } }
/* l'invitation « Bonus prêt ! » : dans la zone de droite de la scène (sous « Suivre »), jamais sur
   les onglets des pièces ; sa pointe montre la jauge, plus haut */
.bn-invite { position: relative; background: linear-gradient(180deg, #FF8DB2, var(--rose-fonce)); color: white;
  font-family: var(--affichage); font-weight: 700; font-size: 15px; padding: 7px 13px; border-radius: 14px; white-space: nowrap; margin-top: 8px;
  box-shadow: 0 4px 0 rgba(120,20,60,0.35), 0 8px 18px rgba(58,38,50,0.3); animation: bn-invite 0.9s ease-in-out infinite; }
.bn-invite::before { content: ''; position: absolute; right: 22px; top: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: #FF8DB2; }
@keyframes bn-invite { 50% { transform: translateY(4px); } }

/* ================================================================ la feuille du choix */
.bn-feuille .bn-entete { flex: 1; min-width: 0; }
.bn-choix { gap: 10px; }
.bn-jauge-carte { background: white; border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 3px 0 rgba(58,38,50,0.1); }
.bn-jauge-carte.bn-pleine { background: linear-gradient(135deg, #FFF3C9, #FFE08A); }
.bn-jauge-barre { position: relative; height: 26px; border-radius: 13px; background: var(--creme-2); overflow: hidden; }
.bn-jauge-barre i { position: absolute; inset: 0 auto 0 0; border-radius: 13px; background: linear-gradient(90deg, #FFE69A, var(--or) 60%, #E8972A);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1), inset 0 3px 0 rgba(255,255,255,0.4); }
.bn-jauge-barre span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 13.5px; color: var(--encre); }
.bn-tickets { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 14px; color: var(--rose-fonce); }
.bn-tickets img { width: 46px; }
.bn-niv { display: flex; align-items: center; gap: 11px; background: white; border-radius: 18px; padding: 9px 10px; box-shadow: 0 3px 0 rgba(58,38,50,0.1); }
.bn-niv.bn-ferme { opacity: 0.72; }
.bn-niv.bn-ferme .bn-vignette img { filter: grayscale(0.8) brightness(0.9); }
.bn-niv.bn-vedette { box-shadow: 0 0 0 3px var(--or), 0 3px 0 rgba(58,38,50,0.1); }
.bn-vignette { width: 62px; height: 62px; flex: none; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--rose-pale), #FFE9C2); }
.bn-vignette img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.bn-niv-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bn-niv-corps b { font-family: var(--affichage); font-weight: 700; font-size: 17px; line-height: 1.1; }
.bn-niv-corps small { font-weight: 700; font-size: 12px; line-height: 1.3; color: var(--encre-2); }
.bn-niv-note { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 11.5px; color: var(--encre-2); }
.bn-etoiles-mini i { font-style: normal; color: var(--creme-2); font-size: 14px; }
.bn-etoiles-mini i.on { color: var(--or); }
.bn-jouer { flex: none; display: inline-flex; align-items: center; gap: 4px; border-radius: 14px; padding: 9px 13px; font-family: var(--affichage); font-weight: 700;
  font-size: 16px; color: white; background: linear-gradient(180deg, #FF8DB2, var(--rose) 55%, var(--rose-fonce)); box-shadow: 0 3px 0 rgba(120,20,60,0.35);
  text-shadow: 0 1px 0 rgba(120,20,60,0.4); }
.bn-jouer:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120,20,60,0.35); }
.bn-jouer img { width: 26px; margin: -4px 0; }
.bn-jouer.bn-verrou, .bn-jouer.bn-attente { background: var(--creme-2); color: var(--encre-2); box-shadow: none; text-shadow: none; font-size: 13px; font-family: var(--texte); font-weight: 900; }

/* ================================================================ le plateau */
.bn-plateau { left: 0; right: 0; max-width: 520px; margin: 0 auto; background: var(--socle); overflow: hidden; touch-action: none; z-index: 21;
  -webkit-user-select: none; user-select: none; animation: bn-apparait 0.28s ease-out; }
@keyframes bn-apparait { from { opacity: 0; } }
.bn-monde { position: absolute; inset: 0; z-index: 0; transform-origin: 0 0; }
.bn-fond { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; pointer-events: none; }
.bn-sol, .bn-calque, .bn-devant { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.bn-devant { z-index: 5000; }
.bn-aire { position: absolute; inset: 0; z-index: 2; touch-action: none; }
.bn-effets { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.bn-plateau.bn-transition .bn-monde { animation: bn-transition 0.5s ease; }
@keyframes bn-transition { 0% { opacity: 1; } 40% { opacity: 0; transform: translateX(-30px); } 60% { opacity: 0; transform: translateX(30px); } 100% { opacity: 1; } }

/* les acteurs : posés par leur ancrage (0 x 0), le sprite autour */
.bn-acteur { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.bn-acteur.bn-hors { display: none; }
.bn-corps { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.bn-corps img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }
.bn-ombre { position: absolute; left: 0; top: 0; width: var(--w, 60px); height: calc(var(--w, 60px) * 0.24); transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(50,25,40,0.34), rgba(50,25,40,0)); }
.bn-acteur.bn-sans-ombre .bn-ombre { display: none; }

/* la barre du haut du bonus */
.bn-haut { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; pointer-events: none;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 18px; background: linear-gradient(180deg, rgba(44,28,44,0.6), rgba(44,28,44,0)); }
.bn-titre { flex: 1; min-width: 0; color: white; font-family: var(--affichage); font-weight: 700; font-size: 17px; line-height: 1.05;
  text-shadow: 0 2px 0 rgba(58,38,50,0.5); }
.bn-titre small { display: block; font-family: var(--texte); font-weight: 900; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #FFE39A; }
.bn-titre span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-chrono { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.bn-chrono svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.bn-arc-fond { fill: rgba(255,250,244,0.92); stroke: rgba(58,38,50,0.18); stroke-width: 5; }
.bn-arc { fill: none; stroke: var(--menthe); stroke-width: 5; stroke-linecap: round; transition: stroke 0.3s; }
.bn-chrono b { position: relative; font-family: var(--affichage); font-weight: 700; font-size: 24px; color: var(--encre); font-variant-numeric: tabular-nums; }
.bn-chrono.bn-urgent .bn-arc { stroke: var(--rouge); }
.bn-chrono.bn-urgent b { color: var(--rouge); }
.bn-chrono.bn-urgent { animation: bn-battement 0.5s ease-in-out infinite; }
@keyframes bn-battement { 50% { transform: scale(1.1); } }
.bn-score { position: relative; flex: none; min-width: 92px; background: var(--verre); border-radius: 16px; padding: 3px 12px 4px; text-align: right;
  box-shadow: 0 3px 0 rgba(58,38,50,0.18); }
.bn-score small { display: block; font-weight: 900; font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--encre-2); }
.bn-score b { font-family: var(--affichage); font-weight: 700; font-size: 25px; line-height: 1; color: var(--rose-fonce); font-variant-numeric: tabular-nums; }
.bn-score.bn-bump { animation: bn-bump 0.3s ease; }
.bn-x2 { position: absolute; left: -16px; top: -6px; background: var(--rouge); color: white; font-style: normal; font-weight: 900; font-size: 13px;
  border-radius: 10px; padding: 2px 6px; transform: rotate(-12deg); box-shadow: 0 2px 0 rgba(120,20,30,0.4); animation: bn-battement 0.5s ease-in-out infinite; }
.bn-quitter { pointer-events: auto; flex: none; min-width: 36px; height: 36px; border-radius: 18px; background: rgba(255,250,244,0.85); font-weight: 900;
  font-size: 16px; padding: 0 10px; transition: background 0.15s; }
.bn-quitter.bn-arme { background: var(--rouge); color: white; font-size: 13px; }
@keyframes bn-bump { 40% { transform: scale(1.14); } }

/* le combo et la consigne */
.bn-combo { position: absolute; left: 10px; top: calc(env(safe-area-inset-top, 0px) + 76px); z-index: 6; pointer-events: none; transform: rotate(-5deg);
  background: linear-gradient(135deg, #FFB86B, var(--rose)); color: white; border-radius: 16px; padding: 6px 13px 8px; box-shadow: 0 4px 0 rgba(120,20,60,0.3); }
.bn-combo b { display: block; font-family: var(--affichage); font-weight: 700; font-size: 25px; line-height: 1; text-shadow: 0 2px 0 rgba(120,20,60,0.35); }
.bn-combo small { display: block; font-weight: 900; font-size: 11px; }
.bn-combo.bn-max { background: linear-gradient(135deg, #FFE69A, var(--or) 45%, var(--rose)); }
.bn-combo.bn-bump { animation: bn-combo 0.35s cubic-bezier(.3,1.6,.5,1); }
@keyframes bn-combo { from { transform: rotate(-5deg) scale(0.6); } }
.bn-combo-jauge { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.35); margin-top: 4px; overflow: hidden; }
.bn-combo-jauge i { display: block; height: 100%; background: white; transform-origin: left center; }
.bn-consigne { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); z-index: 6; transform: translateX(-50%); pointer-events: none;
  max-width: calc(100% - 40px); background: rgba(44,28,44,0.72); color: white; font-weight: 900; font-size: 14.5px; line-height: 1.25; text-align: center;
  padding: 8px 14px; border-radius: 14px; white-space: normal; width: max-content; }
.bn-consigne.bn-entre { animation: bn-consigne 0.3s ease-out; }
@keyframes bn-consigne { from { opacity: 0; transform: translate(-50%, 8px); } }
.bn-bas { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; }

/* les effets */
.bn-flottant { position: absolute; transform: translate(-50%, -50%); font-family: var(--affichage); font-weight: 700; font-size: 28px; color: white; white-space: nowrap;
  text-shadow: 0 3px 0 var(--rose-fonce), 0 0 12px rgba(255,255,255,0.8); animation: bn-flotte 1.1s ease-out forwards; }
.bn-flottant.bn-gros { font-size: 36px; color: #FFF3C9; text-shadow: 0 3px 0 #C07A10, 0 0 16px rgba(255,220,120,0.9); }
.bn-flottant.bn-rouge { color: #FFE2E2; text-shadow: 0 3px 0 #A61E24, 0 0 16px rgba(255,90,90,0.8); }
.bn-flottant.bn-gris { font-size: 17px; color: white; text-shadow: 0 2px 0 rgba(58,38,50,0.6); }
.bn-flottant.bn-bleu { text-shadow: 0 3px 0 #2E6FA8, 0 0 12px rgba(255,255,255,0.8); }
.bn-flottant.bn-vert { text-shadow: 0 3px 0 var(--menthe-fonce), 0 0 12px rgba(255,255,255,0.8); }
@keyframes bn-flotte { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.5) rotate(var(--r, 0deg)); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.2) rotate(var(--r, 0deg)); }
  30% { transform: translate(-50%, -70%) scale(1) rotate(var(--r, 0deg)); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1) rotate(var(--r, 0deg)); } }
/* les onomatopées de bande dessinée */
.bn-flottant.bn-bd { font-size: 30px; letter-spacing: 1px; color: #FFE14D; -webkit-text-stroke: 1.5px #3A2632;
  text-shadow: 3px 3px 0 #3A2632; animation: bn-bd 0.9s cubic-bezier(.3,1.5,.5,1) forwards; }
.bn-flottant.bn-bd-tarte { color: #FFFFFF; } .bn-flottant.bn-bd-pistolet { color: #9FD8FF; } .bn-flottant.bn-bd-plumeau { color: #FFB3CC; font-size: 24px; }
.bn-flottant.bn-bd-klaxon { color: #FFE14D; font-size: 38px; } .bn-flottant.bn-bd-coussin { color: #C6F06A; font-size: 36px; } .bn-flottant.bn-bd-confettis { color: #FFB3F0; }
.bn-flottant.bn-bd-seche_cheveux { color: #FFD08A; }
@keyframes bn-bd { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-14deg); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(-8deg); }
  35% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1.05) rotate(-8deg); } }
.bn-banniere { position: absolute; left: 50%; top: 34%; z-index: 7; pointer-events: none; white-space: nowrap; font-family: var(--affichage); font-weight: 700;
  font-size: 34px; color: white; padding: 10px 22px; border-radius: 20px; background: linear-gradient(180deg, #A6E3B3, var(--menthe) 60%, var(--menthe-fonce));
  text-shadow: 0 3px 0 rgba(30,80,40,0.45); box-shadow: 0 6px 0 rgba(30,80,40,0.35); animation: bn-banniere 1.5s ease forwards; }
.bn-banniere.bn-or { background: linear-gradient(180deg, #FFE69A, var(--or) 55%, #D18E1C); text-shadow: 0 3px 0 rgba(120,70,0,0.45); box-shadow: 0 6px 0 rgba(120,70,0,0.35); }
.bn-banniere.bn-rouge { background: linear-gradient(180deg, #FF8F86, var(--rouge) 60%, #A61E24); text-shadow: 0 3px 0 rgba(120,20,30,0.45); box-shadow: 0 6px 0 rgba(120,20,30,0.35); }
.bn-banniere.bn-sous { top: 44%; font-size: 26px; }
@keyframes bn-banniere { 0% { transform: translate(-50%, 20px) scale(0.5) rotate(-3deg); opacity: 0; } 14% { transform: translate(-50%, 0) scale(1.1) rotate(-3deg); opacity: 1; }
  24% { transform: translate(-50%, 0) scale(1) rotate(-3deg); } 80% { opacity: 1; } 100% { transform: translate(-50%, -26px) scale(1) rotate(-3deg); opacity: 0; } }
.bn-plateau.bn-secoue .bn-monde, .bn-plateau.bn-secoue .bn-effets { animation: bn-secoue 0.32s ease; }
@keyframes bn-secoue { 15% { translate: calc(var(--f, 1) * -7px) calc(var(--f, 1) * 3px); } 35% { translate: calc(var(--f, 1) * 6px) calc(var(--f, 1) * -4px); }
  55% { translate: calc(var(--f, 1) * -4px) calc(var(--f, 1) * 2px); } 75% { translate: calc(var(--f, 1) * 2px) 0; } }
.bn-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: white; animation: bn-flash 0.3s ease-out forwards; }
.bn-flash.bn-flash-jaune { background: #FFF3A8; }
@keyframes bn-flash { from { opacity: 0.75; } to { opacity: 0; } }
/* les dernières secondes : un liseré rouge qui bat */
.bn-plateau.bn-fievre::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 70px 10px rgba(229,72,77,0.55);
  animation: bn-fievre 0.5s ease-in-out infinite alternate; }
@keyframes bn-fievre { from { opacity: 0.45; } to { opacity: 1; } }

/* les particules : chaque <i> part de (0, 0) vers (--dx, --dy) en --d */
.bn-parts { position: absolute; width: 0; height: 0; }
.bn-parts i { position: absolute; left: 0; top: 0; width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2); border-radius: 50%;
  animation: bn-part var(--d) cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes bn-part { 0% { transform: translate(0, 0) scale(0.4); opacity: 1; } 45% { transform: translate(calc(var(--dx) * 0.75), calc(var(--dy) * 0.6 - 26px)) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 50px)) scale(0.75); opacity: 0; } }
.bn-p-creme i { background: radial-gradient(circle at 35% 35%, #FFFFFF, #F5ECD8 70%, #E6D6B6); box-shadow: 0 1px 2px rgba(120,90,50,0.3); }
.bn-p-eau i { background: linear-gradient(160deg, #E4F5FF, #6FBDF2 60%, #3C8FD6); border-radius: 50% 50% 50% 0; opacity: 0.9; }
.bn-p-confettis i { height: calc(var(--sz) * 0.45); border-radius: 2px; animation: bn-confetti var(--d) cubic-bezier(.25,.6,.5,1) forwards; }
@keyframes bn-confetti { 0% { transform: translate(0, -20px) rotate(0deg); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
.bn-p-plumes i { width: calc(var(--sz) * 1.9); height: calc(var(--sz) * 0.6); background: linear-gradient(90deg, #FFE0EA, #F07AA0); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: bn-plume var(--d) ease-in-out forwards; }
@keyframes bn-plume { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 30% { transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.2 - 20px)) rotate(40deg); }
  60% { transform: translate(calc(var(--dx) * -0.2), calc(var(--dy) * 0.6)) rotate(-30deg); } 100% { transform: translate(var(--dx), var(--dy)) rotate(20deg); opacity: 0; } }
.bn-p-etoiles i { border-radius: 0; background: #FFF6C9; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: bn-etoile var(--d) ease-out forwards; }
@keyframes bn-etoile { from { transform: translate(0, 0) scale(0.3) rotate(0deg); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1) rotate(120deg); opacity: 0; } }
.bn-p-poussiere i { background: radial-gradient(closest-side, rgba(230,220,210,0.85), rgba(230,220,210,0)); animation: bn-poussiere var(--d) ease-out forwards; }
@keyframes bn-poussiere { from { transform: translate(0, 0) scale(0.5); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(2.2); opacity: 0; } }
.bn-p-mousse i { background: radial-gradient(circle at 35% 30%, #FFFFFF 20%, rgba(255,255,255,0.55) 60%, rgba(200,230,255,0.5)); border: 1.5px solid rgba(255,255,255,0.9);
  animation: bn-mousse var(--d) ease-out forwards; }
@keyframes bn-mousse { 0% { transform: translate(0, 0) scale(0.3); opacity: 1; } 80% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); } 100% { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; } }
.bn-p-coeurs i { background: none; font-size: var(--sz); line-height: 1; width: auto; height: auto; animation: bn-etoile var(--d) ease-out forwards; }
.bn-p-coeurs i::before { content: '\2665'; }
.bn-p-sauce i { background: radial-gradient(circle at 35% 35%, #FF6A4D, #C8261B 70%); }

/* la bulle de parole d'Elodie (suit sa tête) */
.bn-bulle { position: absolute; left: 0; top: 0; z-index: 5; max-width: 230px; background: white; color: var(--encre); border-radius: 16px; padding: 8px 12px;
  font-family: var(--affichage); font-weight: 600; font-size: 17px; line-height: 1.15; text-align: center; box-shadow: 0 5px 14px rgba(58,38,50,0.25); width: max-content; }
.bn-bulle::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: white; }
.bn-bulle.bn-entre { animation: bn-bulle 0.3s cubic-bezier(.3,1.6,.5,1); }
@keyframes bn-bulle { from { scale: 0.4; opacity: 0; } }

/* ================================================================ 2.1 les farces */
.bn-niv-farces .bn-consigne { bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); }
.bn-outils { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 16px 6px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: linear-gradient(0deg, rgba(44,28,44,0.66) 40%, rgba(44,28,44,0)); transition: opacity 0.3s; }
.bn-outils.bn-eteinte { opacity: 0.35; pointer-events: none; }
.bn-outil { position: relative; height: 78px; border-radius: 16px; background: var(--verre); box-shadow: 0 3px 0 rgba(58,38,50,0.3); display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; padding: 0 1px 5px; touch-action: none; transition: transform 0.12s, background 0.12s; min-width: 0; }
.bn-outil img { width: 46px; height: 42px; object-fit: contain; margin-bottom: 3px; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(58,38,50,0.25)); }
.bn-outil .bn-nom { font-weight: 900; font-size: 10.5px; color: var(--encre); white-space: nowrap; overflow: hidden; max-width: 100%; }
.bn-outil .bn-stock { position: absolute; right: -3px; top: -6px; min-width: 20px; padding: 1px 5px; border-radius: 9px; background: var(--menthe-fonce); color: white;
  font-size: 11px; font-weight: 900; font-style: normal; box-shadow: 0 2px 0 rgba(0,0,0,0.2); white-space: nowrap; }
.bn-outil .bn-recharge { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: conic-gradient(rgba(44,28,44,0.5) calc(var(--rc, 0) * 1turn), transparent 0); }
.bn-outil.bn-choisi { background: white; transform: translateY(-7px) scale(1.06); box-shadow: 0 0 0 3px var(--rose), 0 6px 0 rgba(120,20,60,0.35); }
.bn-outil.bn-verrou img { filter: grayscale(1) opacity(0.5); }
.bn-outil.bn-verrou .bn-stock { background: var(--encre-2); }
.bn-outil.bn-vide img { opacity: 0.45; }
.bn-outil.bn-vide .bn-stock { background: var(--rouge); }
.bn-projectile { position: absolute; left: 0; top: 0; width: 76px; filter: drop-shadow(0 6px 6px rgba(58,38,50,0.35)); }
.bn-arme-tenue { position: absolute; left: 0; top: 0; width: 104px; filter: drop-shadow(0 6px 8px rgba(58,38,50,0.4)); transform-origin: 50% 50%; }
.bn-arme-tenue.bn-arme-seche_cheveux { width: 96px; }
.bn-rayon { position: absolute; left: 0; top: 0; height: 12px; margin-top: -6px; transform-origin: 0 50%; border-radius: 6px; }
.bn-rayon-pistolet { background: repeating-linear-gradient(90deg, rgba(190,232,255,0.95) 0 16px, rgba(95,175,240,0.85) 16px 26px);
  box-shadow: 0 0 8px rgba(120,200,255,0.8); animation: bn-rayon 0.25s linear infinite; }
.bn-rayon-seche_cheveux { height: 34px; margin-top: -17px; border-radius: 50%; background: repeating-linear-gradient(90deg, rgba(255,236,190,0.55) 0 10px, rgba(255,255,255,0) 10px 22px);
  filter: blur(1.5px); animation: bn-rayon 0.18s linear infinite; }
@keyframes bn-rayon { to { background-position: 26px 0; } }
.bn-apercu { position: absolute; left: 0; top: 0; font-family: var(--affichage); font-weight: 700; font-size: 26px; color: white; white-space: nowrap;
  text-shadow: 0 3px 0 #2E6FA8, 0 0 12px rgba(255,255,255,0.9); }
.bn-plumeau-tenu { position: absolute; left: 0; top: 0; width: 70px; filter: drop-shadow(0 5px 6px rgba(58,38,50,0.35)); }
.bn-fantome { position: absolute; left: 0; top: 0; width: 92px; opacity: 0.92; filter: drop-shadow(0 8px 8px rgba(58,38,50,0.4)); transition: scale 0.12s; }
.bn-fantome.bn-ok { scale: 1.15; filter: drop-shadow(0 0 10px rgba(127,230,150,0.95)) drop-shadow(0 8px 8px rgba(58,38,50,0.4)); }
.bn-cible { position: absolute; left: 0; top: 0; border: 3px dashed rgba(255,255,255,0.9); border-radius: 50%; animation: bn-cible 0.8s ease-in-out infinite; }
.bn-cible-coussin { width: 150px; height: 64px; }
.bn-cible-confettis { width: 130px; height: 100px; }
.bn-cible.bn-ok { border-color: #8CF0A6; border-style: solid; background: rgba(140,240,166,0.2); }
@keyframes bn-cible { 50% { scale: 1.08; } }
.bn-coussin-pose { position: absolute; left: 0; top: 0; width: 84px; filter: drop-shadow(0 4px 4px rgba(58,38,50,0.3)); animation: bn-pose 0.3s cubic-bezier(.3,1.6,.5,1); }
.bn-coussin-pose.bn-coussin-part { animation: bn-coussin-part 0.7s ease-out forwards; }
@keyframes bn-pose { from { scale: 0.3; } }
@keyframes bn-coussin-part { 0% { scale: 1.3 0.55; } 40% { scale: 1.15 0.7; opacity: 1; } 100% { scale: 1 0.8; opacity: 0; } }
.bn-seau-verse { position: absolute; width: 96px; transform: translate(-50%, -50%); animation: bn-seau 0.85s ease-in forwards; filter: drop-shadow(0 6px 6px rgba(58,38,50,0.3)); }
@keyframes bn-seau { 0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.8); } 30% { transform: translate(-50%, -50%) rotate(165deg) scale(1.05); } 85% { opacity: 1; }
  100% { transform: translate(-50%, -90%) rotate(175deg) scale(1); opacity: 0; } }

/* ================================================================ l'intro et la fin */
.bn-intro { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(40,24,40,0.42); padding: 20px; }
.bn-intro.bn-part { animation: bn-part-intro 0.45s ease-in forwards; }
@keyframes bn-part-intro { to { opacity: 0; } }
.bn-carte-intro { background: var(--creme); border-radius: 26px; padding: 18px 20px 16px; max-width: 330px; text-align: center; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 12px 30px rgba(40,24,40,0.35); animation: bn-carte 0.4s cubic-bezier(.3,1.5,.5,1); }
@keyframes bn-carte { from { transform: scale(0.6) rotate(-4deg); opacity: 0; } }
.bn-carte-intro small { font-weight: 900; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rose-fonce); }
.bn-carte-intro h2 { font-family: var(--affichage); font-weight: 700; font-size: 29px; line-height: 1.05; text-wrap: balance; }
.bn-carte-intro p { font-weight: 800; font-size: 15px; line-height: 1.35; color: var(--encre-2); }
.bn-cadeau { display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #FFF3C9, #FFE08A); border-radius: 16px; padding: 8px 10px; text-align: left;
  font-weight: 900; font-size: 13px; line-height: 1.25; }
.bn-cadeau img { width: 40px; flex: none; }
.bn-compte { font-family: var(--affichage); font-weight: 700; font-size: 58px; line-height: 1; color: var(--rose); text-shadow: 0 4px 0 var(--rose-fonce); min-height: 60px; }
.bn-compte.bn-bump { animation: bn-compte 0.5s cubic-bezier(.3,1.6,.5,1); }
.bn-part .bn-compte { font-size: 40px; color: var(--menthe); text-shadow: 0 4px 0 var(--menthe-fonce); }
@keyframes bn-compte { from { transform: scale(2); opacity: 0; } }
.bn-fin { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 18px); background: linear-gradient(180deg, rgba(40,24,40,0) 25%, rgba(40,24,40,0.55) 70%); }
.bn-carte-fin { width: 100%; max-width: 360px; background: var(--creme); border-radius: 26px; padding: 16px 18px; text-align: center; display: flex; flex-direction: column;
  gap: 8px; align-items: center; box-shadow: 0 12px 30px rgba(40,24,40,0.4); animation: bn-carte 0.45s cubic-bezier(.3,1.5,.5,1); }
.bn-carte-fin > small { font-weight: 900; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rose-fonce); }
.bn-fin-points b { display: block; font-family: var(--affichage); font-weight: 700; font-size: 54px; line-height: 1; color: var(--rose-fonce); font-variant-numeric: tabular-nums; }
.bn-fin-points span { font-weight: 900; font-size: 13px; color: var(--encre-2); text-transform: uppercase; letter-spacing: 1.2px; }
.bn-fin-etoiles { display: flex; gap: 8px; }
.bn-fin-etoiles i { font-style: normal; font-size: 42px; line-height: 1; color: var(--creme-2); text-shadow: 0 3px 0 rgba(58,38,50,0.12); }
.bn-fin-etoiles i.on { color: var(--or); text-shadow: 0 3px 0 #B9801A, 0 0 16px rgba(255,210,90,0.9); animation: bn-etoile-fin 0.45s cubic-bezier(.3,1.8,.5,1); }
.bn-fin-etoiles i.off { opacity: 0.6; }
@keyframes bn-etoile-fin { from { transform: scale(2.4) rotate(-40deg); opacity: 0; } }
.bn-record { background: linear-gradient(180deg, #FFE69A, var(--or)); color: #6A3A00; font-family: var(--affichage); font-weight: 700; font-size: 20px; padding: 4px 14px;
  border-radius: 12px; transform: rotate(-3deg); box-shadow: 0 3px 0 rgba(120,70,0,0.35); animation: bn-carte 0.4s cubic-bezier(.3,1.6,.5,1); }
.bn-record span { font-family: var(--texte); font-weight: 900; font-size: 12px; }
.bn-meilleur { font-weight: 900; font-size: 13px; color: var(--encre-2); }
.bn-lignes { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.bn-lignes li { font-weight: 800; font-size: 13px; color: var(--encre-2); }
.bn-gain { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 16px; animation: bn-carte 0.35s cubic-bezier(.3,1.6,.5,1); }
.bn-gain b { font-family: var(--affichage); font-weight: 700; font-size: 26px; color: #B9801A; font-variant-numeric: tabular-nums; }
.bn-gain em { font-style: normal; font-size: 12.5px; background: var(--creme-2); border-radius: 8px; padding: 2px 7px; }
.bn-gain em.bn-conv { background: #FFE08A; }
.bn-gain.bn-essai { color: var(--encre-2); font-size: 14px; }
.bn-piece { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFE69A, var(--or) 60%, #C98A1C); box-shadow: inset 0 -2px 0 rgba(120,70,0,0.3); }
.bn-fin-boutons { display: flex; gap: 10px; width: 100%; margin-top: 4px; }
.bn-fin-boutons .gros-bouton { flex: 1; font-size: 19px; padding: 12px 10px; }

@media (prefers-reduced-motion: reduce) {
  .bn-plateau.bn-secoue .bn-monde, .bn-plateau.bn-secoue .bn-effets { animation: none; }
}

/* ================================================================ 2.2 la douche */
.bn-zone-bain { position: absolute; border-radius: 40%; border: 4px dashed rgba(255,255,255,0.95); background: rgba(120,200,255,0.18); opacity: 0;
  transition: opacity 0.2s; display: grid; place-items: center; }
.bn-zone-bain span { font-family: var(--affichage); font-weight: 700; font-size: 17px; color: white; text-shadow: 0 2px 0 rgba(46,111,168,0.8); }
.bn-zone-bain.bn-visible { opacity: 1; animation: bn-cible 0.8s ease-in-out infinite; }
.bn-zone-bain.bn-ok { border-style: solid; border-color: #8CF0A6; background: rgba(140,240,166,0.28); }
.bn-progres { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 78px); z-index: 6; transform: translateX(-50%); width: 220px;
  background: rgba(44,28,44,0.72); border-radius: 14px; padding: 6px 10px 8px; color: white; font-weight: 900; font-size: 12px; text-align: center; pointer-events: none; }
.bn-progres i { display: block; height: 10px; border-radius: 5px; background: rgba(255,255,255,0.25); margin-top: 4px; overflow: hidden; }
.bn-progres b { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #BFE8FF, #6FBDF2); transition: width 0.15s; }
.bn-mousse { position: absolute; width: var(--s, 24px); height: var(--s, 24px); margin: calc(var(--s, 24px) / -2) 0 0 calc(var(--s, 24px) / -2); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 25%, rgba(255,255,255,0.8) 55%, rgba(210,235,255,0.75)); box-shadow: 0 1px 3px rgba(80,120,160,0.35);
  animation: bn-pose 0.25s cubic-bezier(.3,1.8,.5,1); }
.bn-mousse.bn-rincee { animation: bn-rincee 0.6s ease-in forwards; }
@keyframes bn-rincee { to { transform: translateY(160px) scale(0.6); opacity: 0; } }
.bn-fleche-bas { position: absolute; width: 44px; height: 70px; margin-left: -22px; pointer-events: none; animation: bn-fleche 0.9s ease-in-out infinite;
  background: linear-gradient(180deg, rgba(255,255,255,0), white 60%); clip-path: polygon(35% 0, 65% 0, 65% 60%, 100% 60%, 50% 100%, 0 60%, 35% 60%); opacity: 0.9;
  filter: drop-shadow(0 2px 2px rgba(46,111,168,0.6)); }
@keyframes bn-fleche { 0% { transform: translateY(-10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
.bn-douche-eau { position: absolute; width: 90px; margin-left: -45px; pointer-events: none; opacity: 0; transition: opacity 0.2s; border-radius: 40px 40px 10px 10px;
  background: repeating-linear-gradient(180deg, rgba(200,236,255,0.85) 0 18px, rgba(120,190,245,0.35) 18px 30px); animation: bn-pluie 0.25s linear infinite;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px); mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px); }
@keyframes bn-pluie { to { background-position: 0 30px; } }
.bn-objet-tenu { position: absolute; left: 0; top: 0; filter: drop-shadow(0 6px 6px rgba(58,38,50,0.35)); pointer-events: none; }

/* ================================================================ 2.3 le rush */
.bn-degat { position: absolute; left: 0; top: 0; filter: drop-shadow(0 5px 4px rgba(58,38,50,0.35)); }
.bn-degat.bn-clignote { animation: bn-clignote 0.25s steps(2) infinite; }
@keyframes bn-clignote { 50% { opacity: 0.35; } }
.bn-degat.bn-poof { animation: bn-poof 0.26s ease-out forwards; }
@keyframes bn-poof { to { opacity: 0; scale: 1.8; filter: brightness(2) blur(2px); } }
.bn-degat.bn-incruste { animation: bn-incruste 0.5s ease-in forwards; }
@keyframes bn-incruste { to { opacity: 0; scale: 0.6; filter: grayscale(1); } }

/* ================================================================ 2.4 la chasse au chat */
.bn-pattes { position: absolute; left: 12px; top: calc(env(safe-area-inset-top, 0px) + 78px); z-index: 6; display: flex; gap: 6px; pointer-events: none;
  background: rgba(44,28,44,0.6); border-radius: 16px; padding: 6px 9px; }
.bn-pattes i { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.25); position: relative; }
.bn-pattes i::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.bn-pattes i.on { background: #FF6A4D; animation: bn-bump 0.3s ease; }
.bn-pattes i.on::before { background: #FFE0D8; }
.bn-trace { position: absolute; left: 0; top: 0; width: 64px; opacity: 0.95; }
.bn-trace.bn-effacee { animation: bn-poof 0.35s ease-out forwards; }
.bn-trace.bn-perdue { transition: opacity 0.35s; opacity: 0; }

/* ================================================================ 2.5 les objets perdus express */
.bn-cache { position: absolute; left: 0; top: 0; filter: drop-shadow(0 3px 2px rgba(58,38,50,0.3)); }
.bn-cache.bn-indice { animation: bn-indice 0.9s ease-in-out infinite; }
@keyframes bn-indice { 50% { filter: drop-shadow(0 0 10px #FFF3A8) drop-shadow(0 0 4px white) brightness(1.25); } }
.bn-cache.bn-non { animation: bn-non 0.35s ease; }
@keyframes bn-non { 25% { translate: -5px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
.bn-cache.bn-trouve { z-index: 10; filter: drop-shadow(0 0 10px #FFF3A8) drop-shadow(0 6px 6px rgba(58,38,50,0.35)); }
.bn-cache.bn-revele { animation: bn-indice 0.6s ease-in-out infinite; }
.bn-liste { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 18px 8px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: linear-gradient(0deg, rgba(44,28,44,0.7) 55%, rgba(44,28,44,0)); }
.bn-case { position: relative; background: var(--verre); border-radius: 14px; height: 82px; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; padding: 6px 3px 5px; box-shadow: 0 3px 0 rgba(58,38,50,0.3); min-width: 0; }
.bn-case img { width: 42px; height: 38px; object-fit: contain; }
.bn-case span { font-weight: 900; font-size: 9.5px; line-height: 1.1; text-align: center; color: var(--encre); overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bn-case.on { background: linear-gradient(180deg, #CFF3D8, var(--menthe)); animation: bn-bump 0.35s ease; }
.bn-case.on::after { content: ''; position: absolute; right: -4px; top: -5px; width: 22px; height: 22px; border-radius: 50%; background: var(--menthe-fonce);
  box-shadow: 0 0 0 2px white; }
.bn-case.on::before { content: ''; position: absolute; right: 3px; top: 1px; z-index: 1; width: 9px; height: 5px; border: 3px solid white; border-top: 0; border-right: 0;
  transform: rotate(-45deg); }
.bn-niv-objets_express .bn-consigne { bottom: calc(env(safe-area-inset-bottom, 0px) + 118px); }

/* la fin des farces : ce qu'elle a reçu reste sur elle (crème, confettis), autour de sa tête */
.bn-traces { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.bn-traces i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFFFFF, #F5ECD8 70%, #E6D6B6); box-shadow: 0 2px 3px rgba(120,90,50,0.3); }
.bn-traces .bn-creme-1 { width: 30px; height: 22px; left: -26px; top: -30px; }
.bn-traces .bn-creme-2 { width: 22px; height: 18px; left: 8px; top: -38px; }
.bn-traces .bn-creme-3 { width: 16px; height: 26px; left: 14px; top: 2px; border-radius: 50% 50% 45% 45%; }
.bn-traces b { position: absolute; width: 9px; height: 4px; border-radius: 1px; background: #F07AA0; left: -20px; top: -34px; transform: rotate(30deg); }
.bn-traces b:nth-child(odd) { background: #F2B53A; }
.bn-traces b:nth-of-type(2) { left: 4px; top: -42px; transform: rotate(-20deg); background: #6FA8DC; }
.bn-traces b:nth-of-type(3) { left: 22px; top: -26px; transform: rotate(70deg); }
.bn-traces b:nth-of-type(4) { left: -32px; top: -14px; transform: rotate(-60deg); background: #7FB08A; }
.bn-traces b:nth-of-type(5) { left: 10px; top: -20px; transform: rotate(10deg); background: #B07ADC; }
.bn-traces u { position: absolute; left: -44px; top: -64px; width: 88px; height: 40px; border-radius: 50%; border-top: 3px dashed rgba(255,236,190,0.9); }
/* le mini-jeu du registre (shampooing) passe devant le plateau, qui reste visible derrière */
.bn-plateau.bn-sous-minijeu { z-index: 19; }
.bn-plateau.bn-sous-minijeu .bn-aire { pointer-events: none; }

/* styles/sims.css */
/* Elodie comme un Sim (js/sims/) : menu circulaire, cartes de choix, file des ordres, panneau des
   besoins, événements de vie, fil et messages de son téléphone, farces. Toutes les classes sont
   préfixées « sm- ». Jetons du socle (base.css) : --rose, --creme, --encre, --affichage... */

/* ---------------------------------------------------------------- couches posées sur la scène */
.sm-couche { position: absolute; inset: 0; z-index: 14; animation: sm-apparait 0.16s ease; }
.sm-couche.part { animation: sm-part 0.16s ease forwards; pointer-events: none; }
.sm-voile { position: absolute; inset: 0; background: rgba(40, 24, 40, 0.22); }
.sm-couche.sans-voile .sm-voile { background: transparent; }
@keyframes sm-apparait { from { opacity: 0; } }
@keyframes sm-part { to { opacity: 0; } }

/* ---------------------------------------------------------------- le menu circulaire */
.sm-roue-boite { position: absolute; inset: 0; pointer-events: none; }
.sm-roue { position: absolute; width: 0; height: 0; }
.sm-centre, .sm-petale { pointer-events: auto; position: absolute; left: 0; top: 0; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; }
.sm-centre { width: 70px; height: 70px; transform: translate(-50%, -50%); background: var(--creme); border: 4px solid var(--h, #A6D96A);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.7), 0 6px 16px rgba(58,38,50,0.3); animation: sm-centre 0.22s cubic-bezier(.2,1.4,.4,1); }
.sm-centre .visage { font-size: 26px; line-height: 1; }
.sm-centre small { font-weight: 900; font-size: 9.5px; line-height: 1.1; color: var(--encre-2); margin-top: 2px; max-width: 64px; }
.sm-centre.chat { border-color: var(--rose); }
.sm-centre .coeurs { color: var(--rose-fonce); letter-spacing: -1px; font-size: 9px; }
@keyframes sm-centre { from { transform: translate(-50%, -50%) scale(0.3); } }
.sm-petale { width: 74px; height: 74px; background: white; box-shadow: 0 4px 0 rgba(58,38,50,0.22), 0 8px 18px rgba(58,38,50,0.18);
  transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); animation: sm-petale 0.28s cubic-bezier(.2,1.3,.4,1) backwards;
  animation-delay: calc(var(--i) * 0.025s); }
.sm-petale:active { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.93); }
.sm-petale .ic { font-size: 26px; line-height: 1; }
.sm-petale .lib { font-weight: 900; font-size: 11px; line-height: 1.1; margin-top: 3px; color: var(--encre); }
.sm-petale.chat { width: 66px; height: 66px; }
.sm-petale.chat .ic { font-size: 23px; }
.sm-petale.chat .lib { font-size: 9.5px; max-width: 60px; }
.sm-petale.grise { background: #EFE6EA; box-shadow: 0 3px 0 rgba(58,38,50,0.12); }
.sm-petale.grise .ic, .sm-petale.grise .lib { opacity: 0.45; }
.sm-petale .nb { position: absolute; right: -2px; top: -2px; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px; background: var(--rose-fonce);
  color: white; font-size: 11px; font-weight: 900; display: grid; place-items: center; border: 2px solid white; }
@keyframes sm-petale { from { transform: translate(-50%, -50%) scale(0.2); opacity: 0; } }

/* ---------------------------------------------------------------- la carte qui monte du bas de la scène */
.sm-carte { position: absolute; left: 8px; right: 8px; bottom: 8px; max-height: 70%; display: flex; flex-direction: column; background: var(--creme);
  border-radius: 24px; box-shadow: 0 -6px 26px rgba(58,38,50,0.3); animation: sm-monte 0.26s cubic-bezier(.2,1.2,.4,1); overflow: hidden; }
@keyframes sm-monte { from { transform: translateY(30%); opacity: 0.3; } }
.sm-carte-tete { display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px; }
.sm-carte-tete .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sm-carte-tete .t b { font-family: var(--affichage); font-weight: 700; font-size: 21px; line-height: 1.1; }
.sm-carte-tete .t small { font-weight: 800; font-size: 12px; color: var(--encre-2); line-height: 1.25; }
.sm-retour, .sm-fermer { width: 36px; height: 36px; border-radius: 50%; background: var(--creme-2); font-weight: 900; font-size: 18px; flex: none; }
.sm-retour { font-size: 26px; line-height: 1; padding-bottom: 3px; }
.sm-carte-corps { overflow-y: auto; padding: 2px 10px 12px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.sm-rayon { font-weight: 900; font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--rose-fonce); margin: 6px 4px 0; }
.sm-ligne { display: flex; align-items: center; gap: 10px; width: 100%; background: white; border-radius: 16px; padding: 8px 11px; text-align: left;
  box-shadow: 0 3px 0 rgba(58,38,50,0.1); }
.sm-ligne:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(58,38,50,0.1); }
.sm-ligne .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--creme-2); display: grid; place-items: center; font-size: 21px; }
.sm-ligne .ic-img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.sm-ligne .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sm-ligne .txt b { font-weight: 900; font-size: 14.5px; line-height: 1.2; }
.sm-ligne .txt small { font-weight: 700; font-size: 12px; line-height: 1.3; color: var(--encre-2); }
.sm-ligne .bs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sm-ligne:disabled { opacity: 0.6; box-shadow: none; background: #F7F0F2; }
.sm-ligne.verrou .ic { background: #EADFE4; font-size: 16px; }
.sm-ligne.bonus { background: linear-gradient(135deg, #FFF3C9, #FFD978); }
.sm-ligne.bonus .ic { background: rgba(255,255,255,0.6); }
.sm-b { display: inline-flex; align-items: center; gap: 2px; font-weight: 900; font-size: 11.5px; line-height: 1; padding: 4px 7px; border-radius: 99px;
  background: var(--creme-2); color: var(--encre-2); white-space: nowrap; }
.sm-b.plus { background: #D5EFD9; color: #2E6B3D; }
.sm-b.moins { background: #FBD9DA; color: #A3282D; }
.sm-urgent { display: inline-flex; font-weight: 900; font-size: 11px; padding: 3px 7px; border-radius: 99px; background: var(--rouge); color: white; animation: pulse 1.4s ease-in-out infinite; }
.sm-risque { color: #C2571A; }
.sm-raison { font-style: italic; }
.sm-note { font-weight: 700; font-size: 12.5px; line-height: 1.4; color: var(--encre-2); margin: 2px 4px; }
.sm-lien { font-weight: 900; font-size: 13px; color: var(--rose-fonce); text-decoration: underline; text-underline-offset: 3px; padding: 6px; }

/* les boutons de choix (refus, événements de vie) */
.sm-choix { display: flex; flex-direction: column; gap: 7px; }
.sm-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; background: white; border-radius: 16px; padding: 11px 14px;
  text-align: left; box-shadow: 0 4px 0 rgba(58,38,50,0.14); position: relative; }
.sm-btn span { font-family: var(--affichage); font-weight: 700; font-size: 17px; line-height: 1.15; }
.sm-btn small { font-weight: 800; font-size: 12px; color: var(--encre-2); }
.sm-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(58,38,50,0.14); }
.sm-btn.or { background: linear-gradient(135deg, #FFF0B8, #FFD36B); padding-left: 60px; }
.sm-btn.or img { position: absolute; left: 10px; top: 50%; width: 42px; height: 42px; object-fit: contain; transform: translateY(-50%) rotate(-8deg); }
.sm-btn.gris { background: var(--creme-2); box-shadow: none; }
.sm-btn.gris span { font-size: 15px; color: var(--encre-2); }
.sm-btn.petit { display: inline-flex; flex-direction: row; width: auto; padding: 8px 12px; font-weight: 900; font-size: 13px; box-shadow: 0 3px 0 rgba(58,38,50,0.12); }

/* le refus */
.sm-refus { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.sm-refus-tete { display: flex; align-items: center; gap: 10px; }
.sm-refus-tete .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--creme-2); display: grid; place-items: center; font-size: 26px; flex: none; }
.sm-refus-tete small { display: block; font-weight: 900; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rose-fonce); }
.sm-refus-tete b { font-family: var(--affichage); font-weight: 700; font-size: 19px; line-height: 1.1; }
.sm-refus-quote { font-family: var(--affichage); font-weight: 600; font-size: 22px; color: var(--encre); text-align: center; margin: 2px 0; }

/* ---------------------------------------------------------------- la file des ordres (en haut à gauche) */
.sm-file { display: flex; flex-direction: column; gap: 6px; }
.sm-file:empty { display: none; }
.sm-ordre { --p: 0; position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--verre);
  box-shadow: 0 3px 0 rgba(58,38,50,0.18); animation: sm-centre-ordre 0.25s cubic-bezier(.2,1.4,.4,1); }
.sm-ordre .ic { font-size: 22px; line-height: 1; position: relative; }
.sm-ordre.premier { width: 50px; height: 50px; background: conic-gradient(var(--menthe) calc(var(--p) * 1turn), rgba(255,250,244,0.95) 0); }
.sm-ordre.premier::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--creme); }
.sm-ordre.corvee.premier { background: conic-gradient(var(--orange) calc(var(--p) * 1turn), rgba(255,250,244,0.95) 0); }
.sm-ordre .x { position: absolute; right: -3px; top: -3px; width: 17px; height: 17px; border-radius: 50%; background: var(--encre); color: white;
  font-style: normal; font-size: 9px; font-weight: 900; display: grid; place-items: center; border: 2px solid white; }
@keyframes sm-centre-ordre { from { transform: scale(0.3); } }

/* ---------------------------------------------------------------- son humeur dans la barre du haut */
.sm-humeur-hud { width: 38px; height: 38px; border-radius: 50%; flex: none; position: relative; display: grid; place-items: center; background: var(--creme);
  box-shadow: 0 0 0 3px var(--h, #A6D96A), 0 2px 0 3px rgba(58,38,50,0.15); }
.sm-humeur-hud .visage { font-size: 21px; line-height: 1; }
.sm-humeur-hud .besoin { position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: white; font-style: normal;
  font-size: 12px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--rouge); animation: pulse 1.4s ease-in-out infinite; }

/* ---------------------------------------------------------------- le panneau des besoins (feuille) */
.sm-feuille .panneau header { padding-bottom: 4px; }
.sm-pan-visage { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: white; flex: none;
  box-shadow: 0 0 0 4px var(--h, #A6D96A); }
.sm-onglets { display: flex; gap: 6px; padding: 4px 16px 8px; }
.sm-onglets button { flex: 1; padding: 8px 6px; border-radius: 99px; background: var(--creme-2); font-weight: 900; font-size: 13px; color: var(--encre-2); }
.sm-onglets button.actif { background: var(--rose); color: white; }
.sm-panneau { gap: 12px !important; }
.sm-besoins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sm-besoin { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 7px; row-gap: 3px; align-items: center; background: white;
  border-radius: 14px; padding: 7px 9px; box-shadow: 0 3px 0 rgba(58,38,50,0.08); }
.sm-besoin img { grid-row: 1 / span 2; width: 34px; height: 34px; object-fit: contain; }
.sm-besoin .nom { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.sm-besoin .nom b { font-weight: 900; }
.sm-besoin .v { font-weight: 900; font-size: 12px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.sm-barre { height: 10px; border-radius: 99px; background: rgba(58,38,50,0.12); overflow: hidden; }
.sm-barre i { display: block; height: 100%; border-radius: 99px; transition: width 0.8s ease, background 0.4s; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1), inset 0 2px 0 rgba(255,255,255,0.35); }
.sm-barre.clair { background: rgba(255,255,255,0.4); margin: 4px 0 2px; }
.sm-barre.clair i { background: white; }
.sm-humeur-echelle { background: white; border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.sm-echelle { position: relative; height: 12px; border-radius: 99px; background: linear-gradient(90deg, #E5484D, #FF9A3D 30%, #F2D14B 50%, #A6D96A 70%, #56C271); }
.sm-echelle i { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: white; border: 3px solid var(--encre);
  transform: translate(-50%, -50%); transition: left 0.6s ease; }
.sm-emos { display: flex; flex-wrap: wrap; gap: 5px; }
.sm-puce { font-weight: 900; font-size: 12px; background: var(--creme-2); border-radius: 99px; padding: 4px 9px; }
.sm-etat { display: flex; align-items: center; gap: 10px; background: white; border-radius: 14px; padding: 8px 10px; }
.sm-etat b { flex: none; min-width: 40px; text-align: center; font-weight: 900; font-size: 14px; padding: 4px 6px; border-radius: 10px; }
.sm-etat.pos b { background: #D5EFD9; color: #2E6B3D; }
.sm-etat.neg b { background: #FBD9DA; color: #A3282D; }
.sm-etat span { display: block; font-weight: 900; font-size: 14px; }
.sm-etat small { display: block; font-weight: 700; font-size: 11.5px; color: var(--encre-2); line-height: 1.3; }
.sm-ligne-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: white; border-radius: 14px; padding: 6px 6px 6px 12px;
  font-weight: 800; font-size: 13.5px; }
.sm-raccourcis { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sm-bloc { background: white; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sm-pal { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sm-pal b { font-family: var(--affichage); font-weight: 700; font-size: 19px; }
.sm-pal span { font-weight: 800; font-size: 12.5px; color: var(--encre-2); }
.sm-compl { position: relative; height: 14px; border-radius: 99px; background: rgba(58,38,50,0.12); }
.sm-compl > i:first-child { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #FF8DB2, var(--rose-fonce)); }
.sm-compl > i:not(:first-child) { position: absolute; top: -3px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: rgba(58,38,50,0.25); }
.sm-compl > i.on:not(:first-child) { background: var(--rose-fonce); }
.sm-liste { margin: 0; padding: 0; background: white; border-radius: 14px; }
.sm-liste li { list-style: none; display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; font-weight: 800; font-size: 13px; border-top: 1px solid var(--creme-2); }
.sm-liste li:first-child { border-top: 0; }
.sm-liste b.plus { color: var(--menthe-fonce); white-space: nowrap; } .sm-liste b.moins { color: var(--rouge); white-space: nowrap; }
.sm-talent { background: white; border-radius: 14px; padding: 9px 12px; display: flex; flex-direction: column; gap: 5px; }
.sm-talent .nom { display: flex; align-items: center; gap: 8px; }
.sm-talent .nom .ic { font-size: 20px; }
.sm-talent .nom b { flex: 1; font-weight: 900; font-size: 15px; }
.sm-talent .niv { font-family: var(--affichage); font-weight: 700; font-size: 15px; color: var(--rose-fonce); }
.sm-talent small { font-weight: 700; font-size: 11.5px; color: var(--encre-2); line-height: 1.3; }

/* ---------------------------------------------------------------- mises en scène */
.sm-puce-etat { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap; font-weight: 900; font-size: 13px;
  padding: 5px 10px; border-radius: 99px; background: white; box-shadow: 0 4px 12px rgba(58,38,50,0.25); animation: sm-envol 2.3s ease-out forwards; }
.sm-puce-etat b { margin-left: 3px; }
.sm-puce-etat.pos b { color: var(--menthe-fonce); } .sm-puce-etat.neg b { color: var(--rouge); }
@keyframes sm-envol { 0% { opacity: 0; transform: translate(-50%, -70%) scale(0.7); } 12% { opacity: 1; transform: translate(-50%, -100%) scale(1.05); }
  75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -260%); } }
.gain.sm-coeur { text-shadow: 0 3px 0 var(--rose-fonce), 0 0 14px rgba(255,255,255,0.9); font-size: 22px; }
.gain.sm-perte { text-shadow: 0 3px 0 #7A6470, 0 0 14px rgba(255,255,255,0.9); font-size: 20px; }
.sm-confettis { position: absolute; z-index: 31; pointer-events: none; }
.sm-confettis i { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: sm-confetti 1.3s cubic-bezier(.15,.7,.4,1) forwards; }
@keyframes sm-confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  60% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--r)); opacity: 0; } }

/* les farces : l'outil arrive du bas de l'écran vers sa tête, une onomatopée éclate */
.sm-farce { position: absolute; z-index: 31; pointer-events: none; width: 0; height: 0; }
.sm-farce .outil { position: absolute; width: 74px; height: 74px; object-fit: contain; left: -37px; top: -37px;
  animation: sm-lance 0.4s cubic-bezier(.3,.1,.5,1) forwards; }
@keyframes sm-lance { from { transform: translate(var(--de-x), var(--de-y)) rotate(-30deg) scale(1.2); } to { transform: translate(0, 0) rotate(10deg) scale(0.9); } }
.sm-farce-tarte .outil { animation: sm-lance 0.4s cubic-bezier(.3,.1,.5,1) forwards, sm-ecrase 0.9s 0.4s ease-out forwards; }
@keyframes sm-ecrase { 0% { transform: rotate(10deg) scale(0.9); } 30% { transform: rotate(0) scale(1.3, 0.6); opacity: 1; } 100% { transform: translateY(40px) scale(1.2, 0.5); opacity: 0; } }
.sm-farce-plumeau .outil, .sm-farce-klaxon .outil, .sm-farce-seche_cheveux .outil, .sm-farce-pistolet .outil { animation: sm-lance 0.35s ease-out forwards, sm-agite 0.18s 0.35s ease-in-out 6 alternate; }
.sm-farce-pistolet .outil, .sm-farce-seche_cheveux .outil { left: 20px; }
@keyframes sm-agite { from { transform: rotate(-14deg); } to { transform: rotate(14deg) translateX(-6px); } }
.sm-farce-coussin .outil { top: 70px; animation: sm-lance 0.35s ease-out forwards, sm-gonfle 0.5s 0.35s ease-in-out 2 alternate; }
@keyframes sm-gonfle { to { transform: scale(1.15, 0.8); } }
.sm-farce .onomatopee { position: absolute; left: var(--ono-x, 90px); top: 10px; transform: translate(-50%, 0) rotate(-8deg); white-space: nowrap; font-family: var(--affichage); font-weight: 700;
  font-size: 26px; color: white; -webkit-text-stroke: 1.5px var(--rose-fonce); text-shadow: 0 3px 0 var(--rose-fonce); opacity: 0;
  animation: sm-onomatopee 1.5s 0.35s ease-out forwards; }
@keyframes sm-onomatopee { 0% { opacity: 0; transform: translate(-50%, 10px) rotate(-8deg) scale(0.4); } 15% { opacity: 1; transform: translate(-50%, 0) rotate(-8deg) scale(1.15); }
  70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px) rotate(-8deg) scale(1); } }
.sm-farce .goutte { position: absolute; left: 30px; top: 0; width: 9px; height: 13px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #7CC3F2;
  box-shadow: inset -2px -2px 0 rgba(255,255,255,0.5); opacity: 0; animation: sm-goutte 0.5s calc(0.35s + var(--k) * 0.09s) ease-in 2; }
.sm-farce-seche_cheveux .goutte { background: rgba(255,255,255,0.9); width: 18px; height: 3px; border-radius: 2px; }
@keyframes sm-goutte { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-60px, calc(var(--k) * 5px - 18px)); } }

/* ---------------------------------------------------------------- événements de vie (une feuille du socle) */
.sm-feuille-vie .panneau { padding-bottom: env(safe-area-inset-bottom, 0px); }
.sm-vie { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.sm-vie.fait .sm-vie-illu { font-size: 34px; }
.sm-vie.fait > p:not(.sm-vie-q) { display: none; }
.sm-vie-suite .sm-note { text-align: center; }
.sm-vie-illu { font-size: 54px; line-height: 1; text-align: center; animation: sm-centre 0.4s cubic-bezier(.2,1.5,.4,1); }
.sm-vie .k { text-align: center; color: var(--rose-fonce); }
.sm-vie h3 { font-family: var(--affichage); font-weight: 700; font-size: 24px; line-height: 1.1; text-align: center; text-wrap: balance; }
.sm-vie > p { font-weight: 800; font-size: 15px; line-height: 1.4; text-align: center; color: var(--encre); }
.sm-vie-q { font-weight: 900 !important; font-size: 13px !important; color: var(--encre-2) !important; margin-top: 4px; }
.sm-vie .sm-lien { align-self: center; }
.sm-vie-suite { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 2px dashed var(--creme-2); }
.sm-vie-suite > p:first-child { font-weight: 800; font-size: 15px; line-height: 1.4; text-align: center; }
.sm-vie-suite .bs { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.sm-vie-suite .gros-bouton { font-size: 18px; padding: 11px 20px; }
.sm-rappel { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; background: white; border-radius: 99px; padding: 5px 11px 5px 7px;
  font-size: 12px; font-weight: 900; box-shadow: 0 3px 0 rgba(58,38,50,0.18), 0 0 0 3px var(--rose); animation: sm-appel 1.6s ease-in-out infinite; }
.sm-rappel b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-rappel span { font-size: 17px; }
@keyframes sm-appel { 0%, 100% { transform: none; } 8% { transform: rotate(-6deg); } 16% { transform: rotate(6deg); } 24% { transform: none; } }
.sm-defi { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; max-width: 190px; background: var(--nuit); color: white; border-radius: 14px;
  padding: 7px 11px; box-shadow: 0 3px 0 rgba(0,0,0,0.25); text-align: right; }
.sm-defi b { font-family: var(--affichage); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.sm-defi span { font-weight: 900; font-size: 12px; line-height: 1.2; }
.sm-defi small { font-weight: 800; font-size: 11px; opacity: 0.85; }
.sm-defi.ok { background: var(--menthe-fonce); }

/* ---------------------------------------------------------------- son téléphone : le fil et les messages */
.sm-profil { display: flex; gap: 12px; align-items: center; background: white; border-radius: 20px; padding: 12px; box-shadow: 0 6px 18px rgba(120,20,60,0.15); }
.sm-profil > img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 3px solid var(--rose); flex: none; }
.sm-profil > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sm-profil b { font-weight: 900; font-size: 16px; }
.sm-profil small { font-weight: 800; font-size: 12px; color: var(--encre-2); }
.sm-profil .sm-barre { height: 8px; margin: 5px 0 2px; }
.sm-profil .sm-barre i { background: var(--rose); }
.sm-post { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 18px rgba(120,20,60,0.15); }
.sm-post-photo { position: relative; aspect-ratio: 4 / 5; background-size: cover; background-position: 50% 62%; }
.sm-post-photo .elodie { position: absolute; left: 50%; bottom: 0; height: 88%; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25)); }
.sm-post-tag { position: absolute; left: 10px; top: 10px; background: rgba(255,255,255,0.9); border-radius: 99px; padding: 4px 10px; font-weight: 900; font-size: 12px; color: var(--rose-fonce); }
.sm-post-bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px 4px; font-weight: 800; font-size: 12.5px; color: var(--encre-2); }
.sm-post-bas b { font-family: var(--affichage); font-weight: 700; font-size: 18px; color: var(--rouge); }
.sm-post-bas .plus { color: var(--menthe-fonce); font-weight: 900; }
.sm-comms { margin: 0; padding: 2px 12px 12px; }
.sm-comms li { list-style: none; font-weight: 700; font-size: 13.5px; line-height: 1.35; padding: 3px 0; }
.sm-comms b { font-weight: 900; margin-right: 4px; }
.sm-conv { background: white; border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 6px 18px rgba(120,20,60,0.15); }
.sm-conv.nouveau { box-shadow: 0 0 0 3px var(--or), 0 6px 18px rgba(120,20,60,0.2); }
.sm-conv-tete { display: flex; align-items: center; gap: 8px; }
.sm-conv-tete b { flex: 1; font-weight: 900; font-size: 15px; }
.sm-conv-tete span:last-child { font-weight: 800; font-size: 12px; color: var(--encre-2); }
.sm-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: white; font-weight: 900; font-size: 15px; flex: none; }
/* le portrait d'un personnage (js/noyau/portraits.js) à la place de l'initiale, dans les messages et les ragots */
.sm-avatar.portrait, .rg-pastille.portrait { padding: 0; overflow: hidden; background: none; }
.sm-avatar.portrait img, .rg-pastille.portrait img { width: 100%; height: 100%; display: block; max-width: none; object-fit: cover; }
/* les portraits vivent un peu : ils se balancent, chacun à son rythme (le deuxième de la liste plus lent, le troisième décalé) */
.sm-avatar.portrait img, .rg-pastille.portrait img { transform-origin: 50% 88%; animation: portrait-vit 4.2s ease-in-out infinite; }
.sm-conv:nth-child(2n) .portrait img { animation-duration: 5.3s; animation-delay: -1.4s; }
.sm-conv:nth-child(3n) .portrait img { animation-duration: 3.6s; animation-delay: -2.2s; }
@keyframes portrait-vit { 0%, 100% { transform: rotate(-3deg) scale(1.02); } 50% { transform: rotate(3deg) scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .sm-avatar.portrait img, .rg-pastille.portrait img { animation: none; } }
.sm-bulle { max-width: 82%; padding: 8px 12px; border-radius: 18px; font-weight: 800; font-size: 14.5px; line-height: 1.3; }
.sm-bulle.eux { align-self: flex-start; background: var(--creme-2); border-bottom-left-radius: 6px; }
.sm-bulle.elle { align-self: flex-end; background: var(--rose); color: white; border-bottom-right-radius: 6px; }
.sm-conv-q { font-weight: 900; font-size: 13px; color: var(--encre-2); }
.sm-conv-suite { font-weight: 700; font-style: italic; font-size: 13px; color: var(--encre-2); line-height: 1.35; }
.sm-conv .sm-btn { box-shadow: 0 3px 0 rgba(58,38,50,0.12); background: #FFF6F9; }

@media (prefers-reduced-motion: reduce) {
  .sm-petale, .sm-centre, .sm-carte { animation: none !important; }
}

/* styles/conduite.css */
/* La mission en voiture (js/conduite) : un écran plein cadre par-dessus le jeu. */
.conduite { position: fixed; inset: 0; z-index: 30; background: #B8D9F2; overflow: hidden; touch-action: none;
  -webkit-user-select: none; user-select: none; }
.conduite[hidden] { display: none; }
.cd-vue { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cd-ic-menu { font-size: 20px; }

/* la barre du haut : le chrono, les compteurs, abandonner */
.cd-haut { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0; pointer-events: none; }
.cd-chrono, .cd-compteurs span { background: var(--verre); border-radius: 16px; padding: 5px 12px; box-shadow: 0 2px 0 rgba(58, 38, 50, 0.15);
  display: flex; flex-direction: column; line-height: 1.1; }
.cd-chrono small, .cd-compteurs small { font-weight: 900; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--encre-2); }
.cd-chrono b { font-family: var(--affichage); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; }
.cd-chrono.retard { background: var(--rouge); color: white; }
.cd-chrono.retard small { color: rgba(255, 255, 255, 0.85); }
.cd-compteurs { display: flex; gap: 6px; }
.cd-compteurs b { font-family: var(--affichage); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
/* flex: none : un libellé long (le russe) l'écrasait en ovale */
.cd-quitter { margin-left: auto; pointer-events: auto; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--verre); font-weight: 900; font-size: 17px;
  box-shadow: 0 2px 0 rgba(58, 38, 50, 0.15); }

/* le GPS, rond, en haut à droite */
.cd-gps { position: absolute; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 64px); width: 132px; pointer-events: none; text-align: center; }
.cd-gps canvas { width: 132px; height: 132px; display: block; border-radius: 50%; box-shadow: 0 6px 16px rgba(58, 38, 50, 0.3); }
.cd-dist { display: inline-block; margin-top: -12px; position: relative; background: var(--encre); color: white; border-radius: 99px; padding: 2px 10px;
  font-family: var(--affichage); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }

/* les bulles (Elodie, les piétons, le chien) et les annonces */
.cd-bulles, .cd-popups { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cd-bulle { position: absolute; left: 0; top: 0; white-space: nowrap; background: white; border-radius: 14px; padding: 5px 10px; font-weight: 900; font-size: 13px;
  box-shadow: 0 3px 0 rgba(58, 38, 50, 0.2); }
.cd-bulle.elodie { font-family: var(--affichage); font-weight: 600; font-size: 16px; padding: 7px 12px; }
.cd-bulle.cri { background: #FFE9D6; color: #9A3D10; }
.cd-popups { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: calc(env(safe-area-inset-top, 0px) + 216px); }
.cd-annonce { font-family: var(--affichage); font-weight: 700; font-size: 20px; color: white; text-shadow: 0 3px 0 rgba(58, 38, 50, 0.5), 0 0 12px rgba(58, 38, 50, 0.35);
  animation: cd-annonce 1.7s ease-out forwards; text-align: center; padding: 0 16px; text-wrap: balance; }
.cd-annonce.degat { color: #FFE39A; }
.cd-annonce.choc { color: #FFB8B0; }
.cd-annonce.chien { color: #fff; font-size: 22px; }
@keyframes cd-annonce { 0% { transform: translateY(12px) scale(0.7); opacity: 0; } 12% { transform: none; opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }

/* ses gags au volant : le nuage de la vapoteuse (on l'essuie), la notification du téléphone (on la touche) */
.cd-vapeur { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; transition: opacity 0.5s ease; }
.cd-vapeur.part { opacity: 0; pointer-events: none; }
.cd-vapeur[hidden], .cd-notif[hidden], .cd-essuie[hidden] { display: none; }
.cd-essuie { position: absolute; left: 50%; top: 44%; transform: translateX(-50%); white-space: nowrap; pointer-events: none; background: var(--rose-fonce); color: white;
  border-radius: 99px; padding: 8px 16px; font-family: var(--affichage); font-weight: 700; font-size: 17px; box-shadow: 0 4px 0 rgba(58, 38, 50, 0.3); animation: cd-pulse 0.7s ease-in-out infinite alternate; }
.cd-notif { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 210px); transform: translateX(-50%); width: min(330px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px;
  text-align: left; background: white; border-radius: 22px; padding: 12px 14px; box-shadow: 0 0 0 4px var(--rouge), 0 10px 26px rgba(58, 38, 50, 0.4); animation: cd-pulse 0.45s ease-in-out infinite alternate; touch-action: none; }
.cd-notif-tel { flex: none; width: 34px; height: 54px; border-radius: 8px; background: var(--encre); position: relative; }
.cd-notif-tel::after { content: ''; position: absolute; inset: 5px 4px 9px; border-radius: 3px; background: var(--rose); }
.cd-notif-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-notif-txt b { font-weight: 900; font-size: 15px; line-height: 1.2; }
.cd-notif-txt small { font-weight: 900; font-size: 12.5px; color: var(--rouge); line-height: 1.2; }
@keyframes cd-pulse { from { scale: 1; } to { scale: 1.05; } }
/* la musique à fond : le haut de l'écran bat la mesure */
.conduite.boum .cd-haut, .conduite.boum .cd-gps { animation: cd-boum 0.46s ease-out infinite; }
@keyframes cd-boum { 0% { scale: 1.07; } 100% { scale: 1; } }
.conduite.nuit { background: #20264F; }

/* les commandes : le volant à gauche, les pédales à droite (cachées tant qu'on ne roule pas) */
.cd-volant, .cd-pedales { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); visibility: hidden; }
.conduite.roule .cd-volant, .conduite.roule .cd-pedales { visibility: visible; }
.cd-volant { left: 0; width: 56%; height: 38%; display: flex; align-items: flex-end; padding: 0 0 6px 18px; touch-action: none; }
/* le volant et les pédales sont dessinés (img/conduite : fourrure rose et bande léopard, chrome et caoutchouc) */
.cd-roue { width: 132px; height: 132px; background: url(img/conduite/volant.webp?v=c1ae9068) center / contain no-repeat;
  position: relative; transition: transform 0.06s linear; filter: drop-shadow(0 6px 8px rgba(58, 38, 50, 0.35)); }
.cd-roue i { display: none; }
.cd-volant.tenu .cd-roue { filter: drop-shadow(0 0 10px rgba(240, 122, 160, 0.9)) drop-shadow(0 6px 8px rgba(58, 38, 50, 0.35)); }
.cd-pedales { right: 14px; display: flex; gap: 12px; align-items: flex-end; }
.cd-pedale { border-radius: 14px; font-family: var(--affichage); font-weight: 700; font-size: 14px; color: white; touch-action: none; padding: 0 0 7px;
  display: flex; align-items: flex-end; justify-content: center; text-shadow: 0 1px 0 rgba(58, 38, 50, 0.9), 0 0 6px rgba(58, 38, 50, 0.8);
  background: center / contain no-repeat; filter: drop-shadow(0 5px 5px rgba(58, 38, 50, 0.4)); transition: transform 0.05s linear; }
.cd-gaz { width: 64px; height: 163px; background-image: url(img/conduite/pedale_gaz.webp?v=2372c89a); }
.cd-frein { width: 112px; height: 82px; background-image: url(img/conduite/pedale_frein.webp?v=57d88ec5); }
.cd-pedale.tenu { transform: translateY(5px) scale(0.96); filter: drop-shadow(0 1px 2px rgba(58, 38, 50, 0.4)) brightness(0.9); }

/* les cartes : la mission, le bilan */
.cd-carte { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); width: min(420px, calc(100% - 32px));
  background: var(--creme); border-radius: 26px; padding: 18px 18px 16px; box-shadow: 0 16px 40px rgba(58, 38, 50, 0.35); display: flex; flex-direction: column; gap: 10px; }
.cd-carte[hidden] { display: none; }
.cd-carte > small { font-weight: 900; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--rose-fonce); }
.cd-carte h2 { font-family: var(--affichage); font-weight: 700; font-size: 26px; line-height: 1.1; text-wrap: balance; }
.cd-carte p { font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--encre-2); }
.cd-aide, .cd-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.cd-aide li { display: grid; grid-template-columns: 104px 1fr; gap: 8px; color: var(--encre-2); line-height: 1.3; }
.cd-aide li b { color: var(--encre); }
.cd-note { background: var(--creme-2); border-radius: 12px; padding: 8px 10px; font-size: 13.5px; }
.cd-lignes li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--creme-2); padding-top: 6px; }
.cd-lignes li span { color: var(--encre-2); }
.cd-lignes li b { text-align: right; }
.cd-etoiles { display: flex; gap: 6px; font-size: 34px; line-height: 1; }
.cd-etoiles i { font-style: normal; color: var(--creme-2); }
.cd-etoiles i.on { color: var(--or); text-shadow: 0 2px 0 rgba(150, 100, 0, 0.35); }
.cd-gains { font-family: var(--affichage); font-weight: 600; font-size: 18px; color: var(--menthe-fonce) !important; }
.cd-go:disabled { filter: grayscale(0.8); opacity: 0.6; }
.cd-attente { position: absolute; left: 0; right: 0; top: 38%; text-align: center; color: white; font: 700 16px var(--affichage, system-ui); text-shadow: 0 1px 4px rgba(40, 60, 80, 0.5); pointer-events: none; }
.cd-attente[hidden] { display: none; }
/* en roulant, la carte du GPS et le haut restent ; les cartes sont parties */
@media (min-width: 700px) { .cd-gps { width: 168px; } .cd-gps canvas { width: 168px; height: 168px; } }

/* styles/lieux.css */
/* Les lieux (js/lieux) : la feuille « Le quartier », la scène du balcon, l'alerte sur la scène. */
.lx-ic-menu { font-size: 20px; }

/* ------------------------------------------------------------------ le quartier : les lieux le long de la rue */
.lx-carte .note { margin-bottom: 4px; }
.lx-rue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.lx-rue::before { content: ''; position: absolute; left: 19px; top: 18px; bottom: 18px; width: 4px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--creme-2) 0 10px, transparent 10px 18px); }
.lx-lieu { display: flex; gap: 12px; align-items: flex-start; position: relative; }
.lx-niv { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--affichage); font-weight: 700; font-size: 18px;
  background: var(--creme-2); color: var(--encre-2); box-shadow: 0 0 0 4px var(--creme); position: relative; }
.lx-lieu.ouvert .lx-niv { background: var(--menthe); color: white; }
.lx-lieu.prochain .lx-niv { background: var(--rose); color: white; }
.lx-corps { flex: 1; min-width: 0; background: white; border-radius: 16px; padding: 10px 12px; box-shadow: 0 3px 0 rgba(58, 38, 50, 0.1); display: flex; flex-direction: column; gap: 5px; }
.lx-corps b { font-family: var(--affichage); font-weight: 700; font-size: 18px; line-height: 1.15; }
.lx-corps p { font-weight: 700; font-size: 13.5px; line-height: 1.35; color: var(--encre-2); }
.lx-lieu.verrouille .lx-corps, .lx-lieu.prochain .lx-corps { background: rgba(255, 255, 255, 0.55); box-shadow: none; }
.lx-lieu.verrouille .lx-corps b { color: var(--encre-2); }
.lx-etat { font-weight: 900; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--rose-fonce); }
.lx-lieu.verrouille .lx-etat { color: var(--encre-2); }
.lx-bouton { align-self: flex-start; margin-top: 2px; border-radius: 14px; padding: 8px 14px; font-family: var(--affichage); font-weight: 700; font-size: 15px; color: white;
  background: linear-gradient(180deg, #FF8DB2, var(--rose) 55%, var(--rose-fonce)); box-shadow: 0 3px 0 rgba(58, 38, 50, 0.25); }

/* ------------------------------------------------------------------ l'alerte : elle jette tout par le balcon */
.lx-alerte { position: absolute; left: 50%; bottom: 84px; z-index: 7; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap;
  border-radius: 20px; padding: 9px 18px; color: white; background: linear-gradient(180deg, #FF9D92, var(--rouge) 60%, #B92F35);
  box-shadow: 0 5px 0 rgba(120, 20, 20, 0.35); animation: lx-alerte 0.5s ease-in-out infinite alternate; }
.lx-alerte b { font-family: var(--affichage); font-weight: 700; font-size: 17px; }
.lx-alerte small { font-weight: 900; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.9; }
@keyframes lx-alerte { from { scale: 1; } to { scale: 1.06; } }

/* ------------------------------------------------------------------ le balcon : la façade vue de la rue */
.lx-balcon { background: linear-gradient(180deg, #BFE3F7 0%, #E4F3FC 70%); touch-action: none; }
.lx-facade { position: absolute; left: 8%; right: 8%; top: 0; bottom: 10%;
  background: repeating-linear-gradient(180deg, #F3D9A4 0 46px, #EDD096 46px 48px); border-radius: 0 0 4px 4px; }
.lx-fenetre { position: absolute; width: 19%; height: 13%; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #C9DBE9 0 38%, #8FA6BD 38% 100%);
  box-shadow: 0 0 0 5px #fff, 0 6px 0 5px rgba(58, 38, 50, 0.12); }
.lx-fenetre.f1 { right: 16%; top: 31%; }
.lx-fenetre.f2 { right: 16%; top: 55%; }
.lx-fenetre.f3 { left: 20%; top: 60%; }
/* son balcon, en haut : la dalle, la rambarde, et elle derrière */
.lx-son-balcon { position: absolute; left: 22%; right: 22%; top: 3%; height: 21%; border-bottom: 9px solid #C9B58C; }
.lx-elodie { position: absolute; left: 50%; bottom: 0; height: 118%; translate: -50% 0; transform-origin: 50% 100%; pointer-events: none; }
.lx-elodie.lance { animation: lx-lance 0.3s ease; }
@keyframes lx-lance { 40% { transform: rotate(-9deg) translateY(-4px); } }
.lx-rambarde { position: absolute; left: -4%; right: -4%; bottom: 0; height: 42%; border-top: 6px solid #6D6D78;
  background: repeating-linear-gradient(90deg, #6D6D78 0 4px, transparent 4px 17px); }
/* le voisin du dessous : son balcon et ses géraniums */
.lx-voisin { position: absolute; left: 6%; top: 41%; width: 36%; height: 9%; border-bottom: 8px solid #C9B58C;
  background: repeating-linear-gradient(90deg, #8A8F99 0 3px, transparent 3px 14px) bottom / 100% 62% no-repeat; }
.lx-pots { position: absolute; left: 8%; right: 8%; bottom: 58%; height: 60%;
  background: radial-gradient(circle at 18% 60%, #E5484D 0 7px, transparent 8px), radial-gradient(circle at 50% 50%, #F07AA0 0 8px, transparent 9px), radial-gradient(circle at 80% 62%, #E5484D 0 7px, transparent 8px),
    radial-gradient(circle at 18% 95%, #6FB37C 0 12px, transparent 13px), radial-gradient(circle at 50% 95%, #6FB37C 0 13px, transparent 14px), radial-gradient(circle at 80% 95%, #6FB37C 0 12px, transparent 13px); }
/* la rue : le trottoir, la voiture garée */
.lx-trottoir { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; background: linear-gradient(180deg, #D9CFC0 0 34%, #7C8290 34% 100%); }
.lx-voiture { position: absolute; right: 5%; bottom: 2.2%; width: 40%; height: 8.5%; border-radius: 18px 22px 8px 8px; background: #5B8FD9; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.14); }
.lx-voiture i { position: absolute; left: 22%; right: 20%; top: -48%; height: 60%; border-radius: 16px 20px 0 0; background: linear-gradient(180deg, #CFE6F5 0 70%, #5B8FD9 70%); box-shadow: 0 0 0 5px #5B8FD9; }
.lx-voiture::before, .lx-voiture::after { content: ''; position: absolute; bottom: -22%; width: 19%; aspect-ratio: 1; border-radius: 50%; background: #2B2B33; box-shadow: inset 0 0 0 5px #DADDE4; }
.lx-voiture::before { left: 12%; } .lx-voiture::after { right: 12%; }
.lx-voiture.hurle { animation: lx-hurle 0.9s steps(2, jump-none) 1; }
@keyframes lx-hurle { 0%, 40%, 80% { filter: brightness(1.5) saturate(1.6); translate: -2px 0; } 20%, 60%, 100% { filter: none; translate: 2px 0; } }
/* la consigne se lit sur la façade, pas sur la voiture */
.lx-balcon > .consigne { bottom: auto; top: 27%; }
/* le panier à linge, sous le doigt */
.lx-panier { position: absolute; left: 0; top: 0; width: 96px; height: 56px; pointer-events: none; z-index: 3; }
.lx-panier span { position: absolute; inset: 0; border-radius: 8px 8px 22px 22px; border-top: 8px solid #B98546;
  background: repeating-linear-gradient(90deg, rgba(185, 133, 70, 0.55) 0 3px, transparent 3px 12px), #E4B77A; box-shadow: 0 6px 10px rgba(58, 38, 50, 0.25); }
.lx-panier.recoit span { animation: bump 0.3s ease; }
.lx-objet { position: absolute; left: 0; top: 0; width: 62px; height: 62px; margin: -31px 0 0 -31px; pointer-events: none; z-index: 2; display: grid; place-items: center; }
.lx-objet img { max-width: 100%; max-height: 100%; }
.lx-objet.dedans { transition: transform 0.2s ease, opacity 0.2s ease; opacity: 0; }
.lx-objet.tombe { filter: brightness(0.92); }
.lx-compte { position: absolute; left: 10px; top: 10px; z-index: 4; background: var(--verre); border-radius: 99px; padding: 4px 12px; font-family: var(--affichage); font-weight: 700; font-size: 18px;
  font-variant-numeric: tabular-nums; box-shadow: 0 2px 0 rgba(58, 38, 50, 0.15); }
.lx-bulle { position: absolute; z-index: 4; translate: -50% 0; white-space: nowrap; background: white; border-radius: 14px; padding: 5px 11px; font-weight: 900; font-size: 13px;
  box-shadow: 0 3px 0 rgba(58, 38, 50, 0.2); animation: apparait 0.2s ease; pointer-events: none; }
.lx-bulle.elle { font-family: var(--affichage); font-weight: 600; font-size: 16px; }
.lx-bulle.voisin { background: #FFE9D6; color: #9A3D10; }

/* La cérémonie du déménagement (js/lieux/logement.js) */
.lg-ceremonie { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.lg-vignette { height: 220px; border-radius: 22px; background-size: cover; background-position: 50% 62%; box-shadow: 0 4px 0 rgba(58, 38, 50, 0.15); }
.lg-ceremonie p { font-weight: 700; margin: 0; }

/* styles/ville.css */
/* La ville (js/lieux/ville.js) : la carte illustrée, la fiche d'un lieu, les invitations du téléphone. */
.vl-corps { display: flex; flex-direction: column; gap: 10px; }
.vl-corps > * { flex: none; }
.vl-carte { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: #b6cde0; box-shadow: 0 4px 0 rgba(58, 38, 50, 0.14); }
.vl-carte img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; user-select: none; -webkit-user-drag: none; }
/* un lieu : une pastille ronde et son nom */
.vl-pin { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0; background: none; z-index: 1; }
.vl-pin i { font-style: normal; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; line-height: 1;
  background: white; box-shadow: 0 3px 0 rgba(58, 38, 50, 0.28), 0 0 0 3px rgba(255, 255, 255, 0.7); transition: transform 0.15s; }
.vl-pin span { font-family: var(--affichage); font-weight: 700; font-size: 11px; line-height: 1; color: var(--encre); background: rgba(255, 250, 244, 0.92); border-radius: 8px; padding: 3px 6px; white-space: nowrap; box-shadow: 0 2px 0 rgba(58, 38, 50, 0.14); }
.vl-pin.ferme { opacity: 0.8; filter: grayscale(0.65); }
.vl-pin.ferme i { background: #d9d0d6; font-size: 16px; }
.vl-pin.choisi i { transform: scale(1.2); background: var(--rose-pale); box-shadow: 0 3px 0 rgba(58, 38, 50, 0.28), 0 0 0 4px var(--rose); }
.vl-pin.ici i { background: var(--menthe); box-shadow: 0 3px 0 rgba(58, 38, 50, 0.28), 0 0 0 3px white; }
.vl-pin em { position: absolute; top: -12px; left: 50%; translate: -50% 0; font-style: normal; font-weight: 900; font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: white; background: var(--menthe-fonce); border-radius: 8px; padding: 2px 5px; }
.vl-pin b { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: white; background: var(--rose-fonce); animation: vl-saute 1s ease-in-out infinite alternate; }
@keyframes vl-saute { from { translate: 0 0; } to { translate: 0 -3px; } }

/* la fiche du lieu choisi */
.vl-fiche { background: white; border-radius: 18px; padding: 12px 14px; box-shadow: 0 3px 0 rgba(58, 38, 50, 0.1); display: flex; flex-direction: column; gap: 6px; min-height: 64px; }
.vl-fiche h3 { font-family: var(--affichage); font-weight: 700; font-size: 20px; line-height: 1.1; }
.vl-fiche p { font-weight: 700; font-size: 13.5px; line-height: 1.35; color: var(--encre-2); }
.vl-fiche .vl-dist { color: var(--encre); }
.vl-fiche .vl-etat { color: var(--rose-fonce); font-weight: 900; }
.vl-invite { background: var(--rose-pale); border-radius: 12px; padding: 7px 10px; color: var(--encre) !important; }
.vl-invite i { font-style: normal; font-weight: 900; color: var(--rose-fonce); }
.vl-boutons { display: flex; gap: 8px; }
.vl-go { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 14px; padding: 9px 8px; font-family: var(--affichage); font-weight: 700; font-size: 16px; color: white;
  background: linear-gradient(180deg, #FF8DB2, var(--rose) 55%, var(--rose-fonce)); box-shadow: 0 3px 0 rgba(58, 38, 50, 0.25); }
.vl-go small { font-family: var(--corps, inherit); font-weight: 700; font-size: 10.5px; line-height: 1.2; opacity: 0.92; text-align: center; }
.vl-go.direct { background: linear-gradient(180deg, #9CCBA6, var(--menthe) 55%, var(--menthe-fonce)); }
.vl-go:disabled { opacity: 0.5; box-shadow: none; }
.vl-liste { align-self: center; font-weight: 900; font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--encre-2); background: none; text-decoration: underline; padding: 4px 8px; }

/* le téléphone : les invitations */
.vl-invites { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.vl-inv .vl-ic { font-size: 22px; }
.vl-inv .txt { flex: 1; min-width: 0; }
.vl-inv .haut { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.vl-inv .haut span { color: var(--encre-2); font-weight: 900; text-transform: uppercase; letter-spacing: 0.4px; }
.vl-inv p { font-weight: 700; font-size: 14px; line-height: 1.3; margin: 3px 0 6px; }
.vl-inv.fait { opacity: 0.6; }
.vl-ok { font-style: normal; font-weight: 900; font-size: 12px; color: var(--menthe-fonce); }
.vl-y { border-radius: 12px; padding: 6px 12px; display: inline-flex; gap: 8px; align-items: baseline; font-family: var(--affichage); font-weight: 700; font-size: 14px; color: white;
  background: linear-gradient(180deg, #FF8DB2, var(--rose) 55%, var(--rose-fonce)); box-shadow: 0 3px 0 rgba(58, 38, 50, 0.25); }
.vl-y small { font-weight: 900; font-size: 11px; opacity: 0.9; }

/* la conduite : l'arrivée */
.cd-avance { font-weight: 900; font-size: 14px; text-align: center; margin: 2px 0 6px; }
.cd-avance.bien { color: #4F8A5E; }
.cd-avance.mal { color: #C9473A; }
.cd-lien { display: block; margin: 8px auto 0; background: none; font-weight: 900; font-size: 13px; color: var(--encre-2); text-decoration: underline; padding: 6px 10px; }

/* styles/ragots.css */
/* Les ragots et le salon dans le téléphone (js/ragots). Les cartes reprennent celles des Messages (sims.css). */
.k.blanc { color: white; margin-top: 6px; }
.rg-pastille { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--rose-pale); color: var(--rose-fonce);
  font-family: var(--affichage); font-weight: 700; font-size: 17px; }
.rg-pastille.rose { background: var(--rose); color: white; }
.rg-pastille.or { background: var(--or); color: white; }
.rg-drame .sm-conv-tete { display: flex; align-items: center; gap: 9px; }
.rg-drame .sm-conv-tete b { flex: 1; font-family: var(--affichage); font-weight: 700; font-size: 17px; }
.rg-delai { font-weight: 900; font-size: 11.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--encre-2); }
.rg-delai.urgent { color: var(--rouge); }
.rg-titre { font-weight: 900; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rose-fonce); }
.rg-cause { font-weight: 700; font-style: italic; font-size: 13.5px; line-height: 1.35; color: var(--encre-2); }
.rg-btn small { line-height: 1.3; text-align: left; }
.rg-dit { flex-direction: row; align-items: flex-start; gap: 10px; }
.rg-dit > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rg-dit p { font-weight: 800; font-size: 14.5px; line-height: 1.3; }
.rg-dit small { font-weight: 800; font-size: 12px; line-height: 1.3; color: var(--encre-2); }
.rg-fini { opacity: 0.85; }
.rg-resultat.ok { box-shadow: 0 0 0 3px var(--menthe); }
.rg-resultat.rate { box-shadow: 0 0 0 3px var(--rouge); }
.rg-resultat.ok .rg-titre { color: var(--menthe-fonce); }
.rg-resultat.rate .rg-titre { color: var(--rouge); }
.rg-resultat p { font-weight: 800; font-size: 15px; line-height: 1.35; }
.rg-gain { font-family: var(--affichage); font-weight: 600; color: var(--menthe-fonce); }
.rg-jauge { height: 12px; border-radius: 99px; background: var(--creme-2); overflow: hidden; }
.rg-jauge i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--rouge), var(--or) 50%, var(--menthe)); background-size: 300px 100%; }
.rg-chiffres { font-weight: 800; font-size: 13.5px; color: var(--encre-2); }
.rg-chiffres b { font-family: var(--affichage); font-size: 20px; color: var(--encre); }
.rg-rapport ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rg-rapport li { font-weight: 700; font-size: 14px; line-height: 1.35; padding-left: 12px; position: relative; }
.rg-rapport li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }
.rg-etoiles { color: var(--or); letter-spacing: 1px; }

/* styles/salon.css */
/* Le salon de coiffure en direct (js/salon) : un écran plein cadre par-dessus le jeu, sous les mini-jeux et les feuilles. */
.salon { position: fixed; inset: 0; z-index: 15; background: #A8C3D0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
.salon[hidden] { display: none; }
.sa-vue { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sa-ic-menu { font-size: 20px; }

/* le haut : le rendez-vous, la cliente et sa prestation, quitter */
.sa-haut { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0; pointer-events: none; }
.sa-pastille { background: var(--verre); border-radius: 16px; padding: 5px 12px; box-shadow: 0 2px 0 rgba(58, 38, 50, 0.15); display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.sa-pastille small { font-weight: 900; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-pastille b { font-family: var(--affichage); font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-cliente[hidden] { display: none; }
.sa-quitter { margin-left: auto; pointer-events: auto; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--verre); font-weight: 900; font-size: 17px; box-shadow: 0 2px 0 rgba(58, 38, 50, 0.15); }

/* les bulles au-dessus des têtes, les annonces */
.sa-bulles, .sa-annonces { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sa-bulle { position: absolute; left: 0; top: 0; max-width: 220px; text-align: center; background: white; border-radius: 14px; padding: 6px 11px; font-weight: 900; font-size: 13px; box-shadow: 0 3px 0 rgba(58, 38, 50, 0.2); animation: apparait 0.2s ease; }
.sa-bulle[hidden] { display: none; }
.sa-bulle.elodie.parole { font-family: var(--affichage); font-weight: 600; font-size: 16px; }
.sa-bulle.cliente { background: #FFE9D6; color: #9A3D10; }
.sa-bulle.pensee { background: rgba(255, 255, 255, 0.82); color: var(--encre-2); font-style: italic; border-radius: 18px; }
.sa-annonces { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: calc(env(safe-area-inset-top, 0px) + 92px); }
.sa-annonce { font-family: var(--affichage); font-weight: 700; font-size: 18px; color: white; text-shadow: 0 3px 0 rgba(58, 38, 50, 0.5), 0 0 12px rgba(58, 38, 50, 0.35); animation: sa-annonce 2.2s ease-out forwards; text-align: center; padding: 0 16px; text-wrap: balance; }
.sa-annonce.rate { color: #FFB8B0; }
.sa-annonce.sauve { color: #C9F2CF; }
.sa-annonce.note { color: #FFE39A; font-size: 15px; }
@keyframes sa-annonce { 0% { transform: translateY(12px) scale(0.7); opacity: 0; } 10% { transform: none; opacity: 1; } 78% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }

/* la jauge de pose du produit oublié : bon, trop, brûlé */
.sa-jauge { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 62px); transform: translateX(-50%); width: min(300px, calc(100% - 40px)); background: var(--verre); border-radius: 14px; padding: 6px 10px 8px; box-shadow: 0 2px 0 rgba(58, 38, 50, 0.15); }
.sa-jauge[hidden] { display: none; }
.sa-jauge small { display: block; font-weight: 900; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--encre-2); margin-bottom: 4px; }
.sa-jauge-barre { position: relative; display: flex; height: 12px; border-radius: 6px; overflow: visible; }
.sa-jauge-barre i { height: 100%; }
.sa-jauge-barre i.bon { flex: 25; background: var(--menthe); border-radius: 6px 0 0 6px; }
.sa-jauge-barre i.trop { flex: 20; background: var(--orange); }
.sa-jauge-barre i.brule { flex: 55; background: var(--rouge); border-radius: 0 6px 6px 0; }
.sa-curseur { position: absolute; top: -5px; left: 0; width: 6px; height: 22px; margin-left: -3px; border-radius: 3px; background: var(--encre); box-shadow: 0 0 0 2px white; transition: left 0.2s linear; }
.sa-jauge[data-zone="brule"] small { color: var(--rouge); }

/* le bas : les alertes des bêtises, les puces (calmer, nettoyer) */
.sa-bas { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.sa-alertes, .sa-chips { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sa-alerte-groupe { display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: auto; }
.sa-alerte { display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; border-radius: 20px; padding: 9px 20px; color: white; background: linear-gradient(180deg, #FF9D92, var(--rouge) 60%, #B92F35); box-shadow: 0 5px 0 rgba(120, 20, 20, 0.35); animation: sa-pulse 0.5s ease-in-out infinite alternate; }
.sa-alerte b { font-family: var(--affichage); font-weight: 700; font-size: 17px; }
.sa-alerte small { font-weight: 900; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.9; }
.sa-alerte-alt { border-radius: 99px; padding: 4px 12px; background: var(--verre); font-weight: 900; font-size: 12px; color: var(--rose-fonce); box-shadow: 0 2px 0 rgba(58, 38, 50, 0.15); }
@keyframes sa-pulse { from { scale: 1; } to { scale: 1.06; } }
.sa-chips-groupe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; pointer-events: auto; max-width: 100%; }
.sa-chips-groupe small { width: 100%; text-align: center; font-weight: 900; font-size: 12px; color: white; text-shadow: 0 2px 0 rgba(58, 38, 50, 0.4); }
.sa-chip { pointer-events: auto; border-radius: 99px; padding: 7px 14px; background: white; font-weight: 900; font-size: 13px; color: var(--encre); box-shadow: 0 3px 0 rgba(58, 38, 50, 0.2); display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.sa-chip.sale { background: #FFE9D6; color: #9A3D10; }
.sa-chip b { font-family: var(--affichage); font-weight: 700; font-size: 14px; }
.sa-chip small { font-weight: 900; font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.85; }

/* les cartes : l'intro, le bilan */
.sa-carte { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); width: min(420px, calc(100% - 32px)); max-height: 78%; overflow: auto; background: var(--creme); border-radius: 26px; padding: 18px 18px 16px; box-shadow: 0 16px 40px rgba(58, 38, 50, 0.35); display: flex; flex-direction: column; gap: 10px; }
.sa-carte[hidden] { display: none; }
.sa-carte > small { font-weight: 900; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--rose-fonce); }
.sa-carte h2 { font-family: var(--affichage); font-weight: 700; font-size: 25px; line-height: 1.1; text-wrap: balance; }
.sa-carte p { font-weight: 700; font-size: 14.5px; line-height: 1.4; color: var(--encre-2); }
.sa-aide, .sa-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.sa-aide li { display: grid; grid-template-columns: 84px 1fr; gap: 8px; color: var(--encre-2); line-height: 1.3; }
.sa-aide li b { color: var(--encre); }
.sa-lignes li { border-top: 1px solid var(--creme-2); padding-top: 6px; color: var(--encre); line-height: 1.3; }
.sa-note { background: var(--creme-2); border-radius: 12px; padding: 8px 10px; font-size: 13.5px; }
.sa-gains { font-family: var(--affichage); font-weight: 600; font-size: 17px; color: var(--menthe-fonce) !important; }
.sa-go:disabled { filter: grayscale(0.8); opacity: 0.6; }
.sa-attente { position: absolute; left: 0; right: 0; top: 38%; text-align: center; color: white; font: 700 16px var(--affichage, system-ui); text-shadow: 0 1px 4px rgba(40, 60, 80, 0.5); pointer-events: none; }
.sa-attente[hidden] { display: none; }
.salon:not(.joue) .sa-bas { display: none; }

/* ------------------------------------------------------------------ les mini-jeux du salon (rattrapages.js) */
.fond-salon { background: linear-gradient(180deg, #E4F3FC 0%, #FBF3E4 100%); touch-action: none; }
.scene-salon { position: absolute; inset: 0; width: 100%; height: 100%; }
.mot-salon { translate: -50% 0; }
.sa-rincer.tenue .scene-salon { cursor: grabbing; }
.f-casque.bump { animation: bump 0.25s ease; }
.f-casque { transition: opacity 0.4s ease; }
.sa-fauteuil-cible { position: absolute; left: 50%; bottom: 14%; width: 120px; height: 150px; translate: -50% 0; border: 4px dashed var(--rose-fonce); border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding-bottom: 8px; color: var(--rose-fonce); font-weight: 900; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; background: rgba(240, 122, 160, 0.12); }
.sa-fauteuil-cible i { width: 70px; height: 54px; border-radius: 10px 10px 4px 4px; background: var(--rose); box-shadow: 0 -40px 0 -12px var(--rose), 0 8px 0 rgba(58, 38, 50, 0.2); }
.sa-fauteuil-cible.ok { border-style: solid; border-color: var(--menthe-fonce); color: var(--menthe-fonce); background: rgba(127, 176, 138, 0.18); }
.sa-elodie-ramener { position: absolute; width: 96px; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(58, 38, 50, 0.3)); transition: scale 0.15s ease; }
.sa-elodie-ramener.portee { scale: 1.12; rotate: -6deg; }
.sa-elodie-ramener.posee { transition: left 0.3s ease, top 0.3s ease; }
.sa-ramener > .consigne { bottom: auto; top: 6%; }

/* la scène en images (js/salon/jeu2d.js) : le décor plus large que l'écran, les personnages posés dessus */
.sa2d { position: absolute; inset: 0; overflow: hidden; }
.sa2d-monde { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.sa2d-decor { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; -webkit-user-drag: none; pointer-events: none; }
.sa2d-perso, .sa2d-perso .corps { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sa2d-perso canvas { position: absolute; pointer-events: none; }
.sa2d-casque { position: absolute; max-width: none; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 2px 3px rgba(60, 30, 20, 0.3)); }
.sa2d-marque { position: absolute; transform: translate(-50%, -110%); font-size: 20px; line-height: 1; white-space: nowrap; filter: drop-shadow(0 1px 2px rgba(60, 30, 20, 0.35)); }
.sa2d-tache { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(92, 64, 38, 0.85), rgba(92, 64, 38, 0)); }
.sa2d-fumee { position: absolute; width: 0; height: 0; }
.sa2d-fumee span { position: absolute; left: -9px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: rgba(90, 90, 96, 0.55); animation: sa2d-fumee 1.8s ease-out infinite; }
.sa2d-fumee span:nth-child(2) { animation-delay: 0.6s; left: -2px; }
.sa2d-fumee span:nth-child(3) { animation-delay: 1.2s; left: -15px; }
@keyframes sa2d-fumee { from { transform: translateY(0) scale(0.6); opacity: 0.6; } to { transform: translateY(-46px) scale(1.9); opacity: 0; } }

/* styles/mission.css */
/* Les missions des lieux (js/lieux/mission.js) : le décor remplit la hauteur, la vue suit Elodie. */
.mission { position: fixed; inset: 0; z-index: 15; background: #A8C3D0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
.mission[hidden] { display: none; }
.mi-vue { position: absolute; inset: 0; overflow: hidden; }
.mi-monde { position: absolute; left: 0; top: 0; will-change: transform; }
.mi-decor { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mi-sol, .mi-calque { position: absolute; inset: 0; }
/* le personnage de la menace entre par le côté : il glisse et apparaît */
.mi-menace-perso { position: absolute; display: block; opacity: 0; transform: translateX(40px); transition: opacity 0.5s ease-out, transform 0.7s ease-out; pointer-events: none; }
.mi-menace-perso[hidden] { display: none; }
.mi-menace-perso.entre { opacity: 1; transform: none; }
.mi-calque { z-index: 5000; pointer-events: none; }
.mi-perso { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mi-corps { position: absolute; left: 0; top: 0; }
.mi-corps canvas { position: absolute; display: block; }

/* le haut : le lieu, le compte à rebours de la menace, quitter */
.mi-haut { position: absolute; left: 0; right: 0; top: 0; z-index: 6000; display: flex; align-items: flex-start; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0; pointer-events: none; }
.mi-pastille { background: var(--verre); border-radius: 16px; padding: 5px 12px 7px; box-shadow: 0 2px 0 rgba(58, 38, 50, 0.15); display: flex; flex-direction: column; line-height: 1.15; min-width: 170px; }
.mi-pastille small { font-weight: 900; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--encre-2); }
.mi-pastille b { font-family: var(--affichage); font-weight: 700; font-size: 16px; }
.mi-barre { margin-top: 4px; height: 7px; border-radius: 4px; background: rgba(58, 38, 50, 0.12); overflow: hidden; }
.mi-barre i { display: block; height: 100%; background: linear-gradient(90deg, #E8506F, var(--rose)); border-radius: 4px; }
.mi-quitter { margin-left: auto; pointer-events: auto; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--verre); font-weight: 900; font-size: 17px; box-shadow: 0 2px 0 rgba(58, 38, 50, 0.15); }
.mission:not(.joue) .mi-pastille { opacity: 0.6; }

/* le bouton rouge d'une bêtise, au-dessus d'elle ; son anneau se vide pendant la fenêtre */
.mi-bouton { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; padding: 0; }
.mi-bouton b { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #E8506F; color: white; font-family: var(--affichage); font-size: 30px;
  box-shadow: 0 3px 0 #A62A48, 0 0 0 4px rgba(255, 255, 255, 0.85); animation: mi-bat 0.6s ease-in-out infinite alternate; }
.mi-bouton small { background: var(--verre); border-radius: 10px; padding: 2px 8px; font-weight: 900; font-size: 11px; white-space: nowrap; color: var(--encre); }
.mi-anneau { position: absolute; top: -6px; width: 64px; height: 64px; border-radius: 50%; border: 4px solid #E8506F; animation: mi-vide linear forwards; }
@keyframes mi-bat { to { transform: scale(1.08); } }
@keyframes mi-vide { from { opacity: 1; transform: scale(1.25); } to { opacity: 0.15; transform: scale(0.85); } }

/* le dégât laissé par une bêtise ratée */
.mi-degat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 4000; pointer-events: none; animation: mi-pop 0.35s ease-out; }
.mi-degat-img { position: absolute; display: block; pointer-events: none; animation: mi-tombe 0.3s ease-out; }
@keyframes mi-tombe { from { opacity: 0; transform: translateY(-22px) scale(0.8); } }
.mi-degat small { background: rgba(58, 38, 50, 0.78); color: white; border-radius: 8px; padding: 1px 6px; font-weight: 800; font-size: 10px; white-space: nowrap; }
@keyframes mi-pop { from { transform: translate(-50%, -50%) scale(0.3); } }

/* ses bulles : la pensée (le pourquoi), la parole (sa réplique) */
.mi-bulle { position: absolute; transform: translate(-50%, -100%); max-width: 230px; width: max-content; background: white; border-radius: 16px; padding: 6px 12px; font-weight: 800; font-size: 13px; line-height: 1.25;
  color: var(--encre); box-shadow: 0 3px 0 rgba(58, 38, 50, 0.16); text-align: center; animation: mi-pop 0.25s ease-out; }
.mi-bulle.pensee { font-style: italic; background: #F6F1FF; }
.mi-bulle.menace { background: #FFF4D6; box-shadow: 0 3px 0 rgba(58, 38, 50, 0.22), 0 0 0 2px #E9B949; font-size: 14px; max-width: 250px; z-index: 30; }

/* la menace arrive */
.mi-banniere { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 6000; background: #E8506F; color: white; font-family: var(--affichage); font-weight: 700; font-size: 26px;
  padding: 12px 22px; border-radius: 20px; box-shadow: 0 4px 0 #A62A48; white-space: nowrap; animation: mi-pop 0.3s ease-out; }
.mi-banniere[hidden] { display: none; }

/* l'entrée et le bilan */
.mi-carte { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); z-index: 6000; width: min(420px, calc(100% - 32px)); max-height: 78%; overflow: auto;
  background: var(--creme); border-radius: 26px; padding: 18px 20px; box-shadow: 0 6px 0 rgba(58, 38, 50, 0.18); }
.mi-carte[hidden] { display: none; }
.mi-carte > small { font-weight: 900; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--rose-fonce); }
.mi-carte h2 { font-family: var(--affichage); font-size: 22px; margin: 4px 0 8px; line-height: 1.2; }
.mi-carte p { margin: 6px 0; font-weight: 700; }
.mi-aide { margin: 8px 0; padding-left: 18px; font-size: 14px; }
.mi-note { font-size: 13px; color: var(--encre-2); }
.mi-carte .gros-bouton { width: 100%; margin-top: 10px; }
.mi-etoiles { font-size: 36px; color: #F2B53A; letter-spacing: 4px; text-shadow: 0 2px 0 rgba(150, 100, 0, 0.2); }
.mi-lignes { margin: 6px 0; padding-left: 18px; font-size: 14px; }
.mi-gains { font-size: 14px; }
.mi-boutons { display: flex; gap: 10px; align-items: center; }
.mi-boutons .gros-bouton { flex: 1; }
.mi-retour { flex: none; padding: 14px 18px; border-radius: 20px; background: var(--verre); font-weight: 900; margin-top: 10px; }

/* les appareils du lieu : un rond par poste, qui clignote avant la bêtise */
.mi-appareil { position: absolute; z-index: 3; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; padding: 0; display: grid; place-items: center; pointer-events: auto;
  background: rgba(255, 250, 244, 0.5); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 2px 0 rgba(58, 38, 50, 0.18); transition: background 0.2s, scale 0.2s; }
.mi-appareil i { font-style: normal; font-size: 22px; line-height: 1; filter: saturate(0.9); }
.mi-appareil small { position: absolute; top: 100%; margin-top: 3px; left: 50%; translate: -50% 0; background: var(--verre); border-radius: 9px; padding: 1px 7px; font-weight: 900; font-size: 10px; line-height: 1.2; text-align: center;
  /* un libellé long (l'allemand, le russe) passe à la ligne au lieu de sortir de l'écran quand l'appareil est au bord */
  width: max-content; max-width: 112px; white-space: normal; color: var(--encre); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.mi-appareil:active small, .mi-appareil.alerte small, .mi-appareil.appelle small { opacity: 1; }
.mi-appareil.alerte { background: #FFD27A; scale: 1.2; box-shadow: 0 0 0 3px #F28C28, 0 3px 0 rgba(120, 60, 0, 0.35); animation: mi-alerte 0.45s ease-in-out infinite alternate; }
.mi-appareil.alerte::after { content: '!'; position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #E8506F; color: #fff; font-family: var(--affichage); font-weight: 700; font-size: 14px; }
.mi-appareil.appelle { background: #C9E8D0; box-shadow: 0 0 0 3px var(--menthe), 0 2px 0 rgba(58, 38, 50, 0.18); }
@keyframes mi-alerte { from { scale: 1.08; } to { scale: 1.3; } }
.mi-appels { align-self: center; margin-left: auto; background: var(--verre); border-radius: 14px; padding: 5px 10px; font-weight: 900; font-size: 13px; box-shadow: 0 2px 0 rgba(58, 38, 50, 0.15); white-space: nowrap; }
.mi-appels b { font-family: var(--affichage); font-weight: 700; font-size: 16px; }
.mi-bulle.evitee { background: #DDF3E2; color: #2E6B3E; font-size: 15px; box-shadow: 0 3px 0 rgba(58, 38, 50, 0.2), 0 0 0 2px var(--menthe); }

/* les gens du lieu : debout à leur place ; une demande, un « ? » au-dessus de la tête ; aidés, une étoile */
.mi-gens { position: absolute; display: block; pointer-events: none; }
.mi-gens.temoin { filter: drop-shadow(0 0 6px rgba(255, 214, 90, 0.95)); }
.mi-demande { position: absolute; z-index: 4000; transform: translate(-50%, -100%); pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; background: none; max-width: 190px; }
.mi-demande b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #4F8A5E; color: #fff; font-family: var(--affichage); font-size: 26px; box-shadow: 0 4px 0 #2E5C3B, 0 0 0 4px rgba(255, 255, 255, 0.85); animation: mi-alerte 0.6s ease-in-out infinite alternate; }
.mi-demande span { background: #fff; border-radius: 12px; padding: 4px 9px; font-weight: 800; font-size: 12px; line-height: 1.25; color: var(--encre); box-shadow: 0 2px 0 rgba(58, 38, 50, 0.18); text-align: center; }
.mi-demande small { font-weight: 900; font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--encre); background: var(--verre); border-radius: 8px; padding: 1px 6px; }
.mi-bulle.gens { background: #EEF7EF; box-shadow: 0 3px 0 rgba(58, 38, 50, 0.2), 0 0 0 2px var(--menthe); }
.mi-defendue { font-weight: 900; color: #2E6B3E; background: #DDF3E2; border-radius: 12px; padding: 6px 10px; margin: 4px 0; }

/* la caméra du joueur (mission.js : brancherCamera) */
.mi-vue { touch-action: none; }
.mi-monde { transform-origin: 0 0; }

/* styles/minijeux-lieux.css */
/* Les mini-jeux propres aux lieux de mission (js/minijeux/lieux.js) : classes « mjl- ». */
.mjl-tapis, .mjl-service, .mjl-rythme, .mjl-caisse, .mjl-appels, .mjl-room { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 30px 14px 54px; gap: 12px; }
.mjl-deux { display: flex; gap: 12px; width: 100%; }
.mjl-bouton { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 18px; padding: 14px 8px; background: #fff; box-shadow: 0 4px 0 rgba(58, 38, 50, 0.16); font-family: var(--affichage); font-weight: 700; font-size: 16px; color: var(--encre); }
.mjl-bouton i { font-style: normal; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; }
.mjl-bouton:active { translate: 0 2px; box-shadow: 0 2px 0 rgba(58, 38, 50, 0.16); }
.mjl-bouton.vert { background: #DDF3E2; } .mjl-bouton.rouge { background: #FADBD8; }
.faux { animation: mjl-secoue 0.25s; }
@keyframes mjl-secoue { 25% { translate: -8px 0; } 75% { translate: 8px 0; } }

/* l'aéroport */
.mjl-valise-zone { flex: 1; width: 100%; display: grid; place-items: center; }
.mjl-valise { width: 150px; height: 120px; border-radius: 22px; display: grid; place-items: center; box-shadow: 0 6px 0 rgba(58, 38, 50, 0.22), inset 0 0 0 4px rgba(255, 255, 255, 0.45); animation: mjl-arrive 0.25s ease-out; }
.mjl-valise b { font-size: 60px; font-weight: 400; }
@keyframes mjl-arrive { from { translate: -180px 0; opacity: 0; } }

/* le restaurant */
.mjl-plat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.mjl-plat i { font-style: normal; font-size: 90px; line-height: 1; animation: mjl-arrive 0.25s ease-out; }
.mjl-plat span { font-family: var(--affichage); font-weight: 700; font-size: 24px; background: #fff; border-radius: 14px; padding: 4px 16px; box-shadow: 0 3px 0 rgba(58, 38, 50, 0.14); }
.mjl-tables { display: flex; gap: 12px; width: 100%; }
.mjl-table { flex: 1; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; background: #F9DDE5; box-shadow: 0 5px 0 rgba(58, 38, 50, 0.2), inset 0 0 0 5px #fff; color: var(--encre); }
.mjl-table b { font-family: var(--affichage); font-size: 36px; line-height: 1; } .mjl-table span { font-weight: 900; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.mjl-table:active { translate: 0 3px; }

/* la salle de sport */
.mjl-rythme { justify-content: center; }
.mjl-cercle { position: relative; width: 120px; height: 120px; border-radius: 50%; background: #F7C9A8; display: grid; place-items: center; box-shadow: 0 5px 0 rgba(58, 38, 50, 0.2); }
.mjl-cercle i { font-style: normal; font-size: 54px; }
.mjl-anneau { position: absolute; inset: 0; border-radius: 50%; border: 6px solid #E8506F; pointer-events: none; }
.mjl-note { height: 30px; margin-top: 70px; font-family: var(--affichage); font-weight: 700; font-size: 22px; color: var(--rose-fonce); }

/* le supermarché */
.mjl-caisse { justify-content: center; gap: 40px; }
.mjl-ruban { position: relative; width: 100%; height: 110px; border-radius: 16px; background: repeating-linear-gradient(90deg, #5a5560 0 18px, #67626d 18px 36px); box-shadow: inset 0 0 0 4px #3f3b45, 0 5px 0 rgba(58, 38, 50, 0.2); overflow: hidden; }
.mjl-laser { position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; translate: -50% 0; background: #FF4D5E; box-shadow: 0 0 14px #FF4D5E; }
.mjl-laser.bip { background: #4ADE80; box-shadow: 0 0 22px #4ADE80; }
.mjl-article { position: absolute; top: 50%; translate: -50% -50%; font-size: 52px; line-height: 1; }
.mjl-article.scanne { filter: drop-shadow(0 0 8px #4ADE80); }
.mjl-scan { width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a80, #e53935 60%, #9e1c1c); color: #fff; font-family: var(--affichage); font-weight: 700; font-size: 34px; box-shadow: 0 8px 0 #7a1414; }
.mjl-scan:active { translate: 0 5px; box-shadow: 0 3px 0 #7a1414; }

/* le bureau */
.mjl-appels { justify-content: center; gap: 36px; }
.mjl-telephone { width: 100%; min-height: 190px; border-radius: 26px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 6px 0 rgba(58, 38, 50, 0.18); }
.mjl-telephone i { font-style: normal; font-size: 64px; line-height: 1; }
.mjl-telephone b { font-family: var(--affichage); font-size: 26px; } .mjl-telephone span { font-weight: 800; color: var(--encre-2); }
.mjl-telephone.sonne i { animation: mjl-sonne 0.18s linear infinite alternate; }
.mjl-telephone.faux { background: #FADBD8; }
@keyframes mjl-sonne { from { rotate: -14deg; } to { rotate: 14deg; } }

/* la plage */
.mjl-mer { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(90deg, #f3d79b 0 14%, #bfe6f6 14% 100%); }
.mjl-bouee { position: absolute; right: 8px; top: 50%; translate: 0 -50%; font-size: 52px; }
.mjl-nageur { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; font-size: 40px; line-height: 1; background: rgba(255, 255, 255, 0.55); border-radius: 50%; will-change: transform; }
.mjl-nageur.sauve { opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.mjl-nageur.perdu { opacity: 0.25; pointer-events: none; }

/* l'hôtel */
.mjl-room { justify-content: center; }
.mjl-commande { width: 150px; height: 130px; border-radius: 22px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 5px 0 rgba(58, 38, 50, 0.16); }
.mjl-commande i { font-style: normal; font-size: 64px; line-height: 1; } .mjl-commande span { font-family: var(--affichage); font-weight: 700; }
.mjl-plateau { min-height: 56px; display: flex; gap: 8px; font-size: 40px; }
.mjl-plateau i { font-style: normal; animation: mjl-arrive 0.2s ease-out; }
.mjl-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.mjl-plat-choix { display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 16px; padding: 10px 6px; background: #fff; box-shadow: 0 4px 0 rgba(58, 38, 50, 0.16); font-weight: 800; font-size: 13px; color: var(--encre); }
.mjl-plat-choix i { font-style: normal; font-size: 34px; line-height: 1; }
.mjl-plat-choix:disabled { opacity: 0.45; }

/* l'activité du lieu, dans la scène */
.mi-appareil.activite { background: #FFE9A8; box-shadow: 0 0 0 3px #E9B949, 0 3px 0 rgba(120, 80, 0, 0.3); animation: mi-alerte 1.1s ease-in-out infinite alternate; }
.mi-appareil.activite::after { content: '★'; position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #E9B949; color: #fff; font-size: 14px; }
.mi-appareil.activite small { opacity: 1; }
.mi-appareil.activite.faite { animation: none; filter: grayscale(0.8); opacity: 0.55; }
.mi-appareil.activite.faite::after { content: '✓'; background: #4F8A5E; }
.mi-objectif { font-weight: 900; font-size: 11px; letter-spacing: 0.4px; color: #7A5200; background: #FFE9A8; border-radius: 10px; padding: 2px 8px; margin-top: 3px; align-self: flex-start; }
.mi-objectif.ok { background: #DDF3E2; color: #2E6B3E; }

/* styles/diamants.css */
/* Les diamants (js/ui/diamants.js) : le compteur de l'en-tête et la feuille « Diamants ». */
.pilule.diamants { padding: 5px 10px 5px 7px; gap: 4px; }
.pilule.diamants.gagne { animation: dm-gain 0.7s ease-out; }
@keyframes dm-gain { 30% { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(91, 182, 230, 0.35); } }

.dm-feuille { display: flex; flex-direction: column; gap: 10px; }
.dm-solde { background: var(--verre); border-radius: 18px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.dm-solde b { font-family: var(--affichage); font-size: 26px; }
.dm-solde span { font-size: 12px; color: var(--encre-2); font-weight: 700; }
.dm-test { background: #FFF3C9; border-radius: 12px; padding: 6px 12px; font-size: 12px; font-weight: 800; color: #7A5B00; }
.dm-packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dm-pack { background: white; border-radius: 18px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 3px 0 rgba(58, 38, 50, 0.12); }
.dm-pack b { font-family: var(--affichage); font-size: 20px; }
.dm-pack small { font-size: 11px; font-weight: 800; color: var(--rose-fonce); min-height: 14px; }
.dm-prix { font-weight: 900; font-size: 14px; color: var(--encre); background: var(--creme-2); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.dm-carte { background: white; border-radius: 18px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; box-shadow: 0 3px 0 rgba(58, 38, 50, 0.1); }
.dm-corps { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dm-corps b { font-size: 15px; }
.dm-corps span, .dm-corps small { font-size: 12px; color: var(--encre-2); font-weight: 700; }
.dm-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.dm-achat { background: linear-gradient(180deg, #8FD3F4, #5BB6E6); color: white; font-weight: 900; border-radius: 14px; padding: 8px 12px; font-size: 13px; text-shadow: 0 1px 0 rgba(0, 60, 100, 0.35); box-shadow: 0 3px 0 #3C8FBF; white-space: nowrap; }
.dm-achat:disabled { filter: grayscale(0.8); opacity: 0.55; box-shadow: none; }
.dm-bientot { opacity: 0.6; }
.dm-sauvegarde .dm-corps { gap: 6px; }
.dm-code { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--creme-2); border-radius: 10px; padding: 8px 10px;
  word-break: break-all; user-select: all; -webkit-user-select: all; }
.dm-code-saisie { width: 100%; box-sizing: border-box; border-radius: 12px; border: 2px solid var(--creme-2); padding: 9px 10px; font-size: 14px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.dm-garderobe { display: flex; gap: 8px; flex-wrap: wrap; }
.dm-tenue { background: white; border-radius: 14px; padding: 9px 14px; font-weight: 900; font-size: 13px; box-shadow: 0 3px 0 rgba(58, 38, 50, 0.12); }
.dm-tenue.portee { background: linear-gradient(180deg, #FF8DB2, var(--rose)); color: white; text-shadow: 0 1px 0 rgba(120, 20, 60, 0.35); }

/* styles/mise-a-jour.css */
/* Le bandeau « nouvelle version » (js/noyau/mise-a-jour.js) : en haut, au-dessus de tout, sans masquer la barre du jeu. */
.maj-bandeau { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px); transform: translateX(-50%); z-index: 9000;
  display: flex; align-items: center; gap: 10px; max-width: min(92vw, 460px); padding: 8px 8px 8px 14px; border-radius: 999px;
  background: var(--creme); color: var(--encre); box-shadow: 0 6px 22px rgba(58, 38, 50, .28); font: 800 13px/1.25 var(--texte); }
.maj-bandeau span { flex: 1; min-width: 0; }
.maj-bouton { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--rose); color: #fff; font: 700 13px var(--affichage); cursor: pointer; }