/* Kim Scout — styles. Tout est en « em » : #stage fixe la taille de base selon la largeur de l'écran. */
:root {
  --ink: #23304a;
  --cream: #fffdf7;
  --teal: #2fa59b;
  --green: #36a269;
  --green-d: #26784c;
  --blue: #3b7ddd;
  --blue-d: #2859a8;
  --orange: #f08a3c;
  --orange-d: #c06a22;
  --red: #e5484d;
  --yellow: #f4b942;
  --text: 1;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #19203a; overflow: hidden; color: var(--ink);
  font-family: Verdana, 'Trebuchet MS', 'Segoe UI', Arial, sans-serif; }
button { font-family: inherit; color: inherit; cursor: pointer; }
#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; overflow: hidden; background: #fff3dc; box-shadow: 0 0 60px rgba(0, 0, 0, .5);
  user-select: none; -webkit-user-select: none; font-size: 16px; --text: 1; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .23s; display: block; }
#scene.fade { opacity: 0; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }
#layer-menu { z-index: 50; }
#layer-modal { z-index: 60; } /* au-dessus de l'accueil (#layer-menu) : Réglages, Langue et pays, Guide s'y ouvrent */
#layer-dialog { z-index: 30; }
#layer-fx { z-index: 65; }
#layer-hud { z-index: 20; display: none; }
#layer-inv { z-index: 15; display: none; }
body.playing #layer-hud, body.playing #layer-inv { display: flex; }
/* Cinématique d'introduction : plus d'inventaire ni de boutons de jeu, mais le bouton « Menu » reste (Réglages, Retour à l'accueil) */
body.cine #layer-inv { display: none !important; }
body.cine .hud-left, body.cine .hud-right > :not(.b-menu) { display: none; }
#tip { display: none; }

/* ---------- zones cliquables (dans le SVG) ---------- */
.hs { cursor: pointer; outline: none; }
.hs .hit { fill: transparent; stroke: none; pointer-events: all; }
.hs .art { transition: filter .12s; }
.hs:hover .art, .hs:focus-visible .art { filter: brightness(1.08) drop-shadow(0 0 7px rgba(255, 255, 255, .95)); }
.hs:hover .hit, .hs:focus-visible .hit { stroke: #fff; stroke-width: 5; stroke-dasharray: 14 10; fill: rgba(255, 255, 255, .10); }
.hs .lab { opacity: 0; pointer-events: none; transition: opacity .15s; }
.hs:hover .lab, .hs:focus-visible .lab, .hs.pulse .lab, #stage.reveal .hs .lab { opacity: 1; }
.hs.pulse .hit, #stage.reveal .hs .hit { stroke: #ffd84d; stroke-width: 6; stroke-dasharray: 14 10; animation: pulse 1s infinite; }
.assist .hs .hit { stroke: rgba(255, 255, 255, .75); stroke-width: 3; stroke-dasharray: 10 10; }
#stage.has-item .hs:hover .hit { stroke: #4caf74; }
/* frigo, placard, tiroirs des commodes : ils s'ouvrent au clic et restent ouverts pendant l'action (classe .open, voir anim.js) */
.hs .fr-door, .hs .pt-l, .hs .pt-r { transform-box: fill-box; transition: transform .45s ease-in-out; }
.hs .fr-door, .hs .pt-l { transform-origin: 0% 50%; }
.hs .pt-r { transform-origin: 100% 50%; }
.hs.open .fr-door { transform: scale(.2, 1.02) skewY(-5deg); }
.hs.open .pt-l { transform: scale(.16, 1.02) skewY(-5deg); }
.hs.open .pt-r { transform: scale(.16, 1.02) skewY(5deg); }
.hs .dr { transition: transform .45s ease-in-out; }
.hs.open .dr { transform: translateY(var(--dr)); }
.hs .dr-in { opacity: 0; transition: opacity .2s; }
.hs.open .dr-in { opacity: 1; }
body.cine #scene .hs { pointer-events: none; } /* pendant une réplique, le décor reste cliquable (engine.js, « Cliquer à tout moment ») */
@keyframes pulse { 50% { stroke-opacity: .3; fill: rgba(255, 216, 77, .28); } }
.spark { animation: twinkle 1.4s infinite; }
@keyframes twinkle { 50% { opacity: .3; } }

/* ---------- vue 3D (en essai, js/scene3d.js) : canvas, noms des objets, boutons pour tourner ---------- */
#scene3d { position: absolute; inset: 0; width: 100%; height: 100%; display: none; touch-action: none; transition: opacity .23s; outline: none; }
#scene3d.fade { opacity: 0; }
#stage.v3d #scene3d { display: block; }
#stage.v3d #scene { visibility: hidden; }
#layer-3d { z-index: 5; display: none; overflow: hidden; }
#stage.v3d #layer-3d { display: block; }
#layer-3d > .ov3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* calque 2D de la scène (barre du panier) : sous les noms et les boutons */
#layer-3d > .hs3d { position: absolute; left: 0; top: 0; margin: 0; border: 0; outline: none; white-space: nowrap; padding: .28em .5em .32em;
  display: flex; align-items: center; gap: .3em; border-radius: 1.3em; background: rgba(35, 48, 74, .92); color: #fff; font-weight: 700;
  font-size: calc(1.15em * var(--text)); box-shadow: 0 .15em .4em rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .15s;
  will-change: transform; }
#layer-3d > .hs3d .tx { display: none; }
#layer-3d > .hs3d.hov, #layer-3d > .hs3d:focus-visible, #layer-3d > .hs3d.pulse, #layer-3d > .hs3d.noic { padding: .28em .85em .32em .6em; }
#layer-3d > .hs3d.hov .tx, #layer-3d > .hs3d:focus-visible .tx, #layer-3d > .hs3d.pulse .tx, #layer-3d > .hs3d.noic .tx { display: inline; }
#layer-3d > .hs3d.hov, #layer-3d > .hs3d:focus-visible, #layer-3d > .hs3d.pulse, #stage.reveal #layer-3d > .hs3d { opacity: 1; pointer-events: auto; z-index: 1; }
body.assist #layer-3d > .hs3d { opacity: .85; pointer-events: auto; }
#layer-3d > .hs3d:focus-visible { box-shadow: 0 0 0 .2em #ffd84d; }
#layer-3d > .hs3d.pulse, #stage.reveal #layer-3d > .hs3d { background: #ffd84d; color: var(--ink); animation: pulse3d 1s infinite; }
@keyframes pulse3d { 50% { box-shadow: 0 0 0 .5em rgba(255, 216, 77, .35); } }
#layer-3d > .hs3d.off { display: none; }
#layer-3d > .hs3d.hid:not(.pulse):not(.hov):not(:focus-visible) { opacity: .45; }
body:not(.assist) #stage:not(.reveal) #layer-3d > .hs3d.hid:not(.pulse):not(.hov):not(:focus-visible) { visibility: hidden; }
#stage.has-item #layer-3d > .hs3d.hov { background: #4caf74; }
body.cine #layer-3d > .hs3d { pointer-events: none; }
body.cine #layer-3d > .hs3d:not(.pulse) { opacity: 0; }
#layer-3d .nav3d { position: absolute; right: .8em; bottom: .8em; display: flex; gap: .55em; pointer-events: auto; }
#layer-3d .t3d { width: 3.4em; height: 3.4em; border-radius: 50%; background: #fff; border: .16em solid var(--ink); box-shadow: 0 .18em 0 var(--ink);
  font-size: 1.15em; font-weight: 800; line-height: 1; padding: 0; }
#layer-3d .t3d:active { transform: translateY(.12em); box-shadow: 0 .06em 0 var(--ink); }
body.cine #layer-3d .nav3d { display: none; } /* pendant une réplique, on peut tourner la caméra : les boutons restent (au-dessus de la bulle, voir placeNav) */
#layer-3d .fx3d { position: absolute; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em; font-size: 2.1em; line-height: 2.2em; text-align: center;
  opacity: 0; animation: t-float 1.3s ease-out both; pointer-events: none; }
#layer-3d .fx3d.puff { width: 1.2em; height: 1.2em; margin: -.6em 0 0 -.6em; border-radius: 50%; background: #fff; animation-name: t-puff; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border: .16em solid var(--ink);
  border-radius: 2em; padding: .55em 1.3em; font-size: 1.15em; font-weight: 800; background: #fff;
  box-shadow: 0 .2em 0 var(--ink); transition: transform .08s, box-shadow .08s; min-height: 3em; }
.btn:hover { transform: translateY(-.1em); }
.btn:active { transform: translateY(.15em); box-shadow: 0 .05em 0 var(--ink); }
.btn .ico { font-size: 1.3em; }
.btn.big { font-size: 1.4em; padding: .55em 1.5em; }
.btn.go { background: var(--green); color: #fff; }
.btn.blue { background: var(--blue); color: #fff; }
.btn.warn { background: var(--orange); color: #fff; }
.btn.ghost { background: rgba(255, 255, 255, .92); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.speak { border: .14em solid var(--ink); background: #fff; border-radius: 50%; width: 2.8em; height: 2.8em; font-size: 1em; flex: none; box-shadow: 0 .15em 0 var(--ink); }
.speak:hover { background: #e7f6ff; }
.row { display: flex; gap: 1em; justify-content: center; align-items: center; margin-top: 1em; }

/* ---------- HUD ---------- */
.hud-left, .hud-right { position: absolute; top: .7em; display: flex; gap: .5em; align-items: center; pointer-events: none; }
.hud-left { left: .8em; }
.hud-right { right: .8em; }
.hud-left > *, .hud-right > * { pointer-events: auto; }
.hbtn { display: flex; align-items: center; gap: .35em; height: 3em; padding: 0 .9em 0 .7em; background: #fff; border: .15em solid var(--ink);
  border-radius: 1.6em; font-weight: 800; font-size: .95em; box-shadow: 0 .15em 0 var(--ink); }
.hbtn .ico { font-size: 1.45em; }
.hbtn:hover { background: #fff6d6; }
.hbtn.b-hint { background: #fff0b8; }
.chip { display: flex; align-items: center; height: 3em; padding: 0 1em; background: rgba(255, 255, 255, .94); border: .15em solid var(--ink); border-radius: 1.6em; font-weight: 800; font-size: .95em; white-space: nowrap; }
.chip.mood .mi { font-size: 1.5em; margin-right: .25em; }
.chip.mood.m0 { background: #e6f8e8; } .chip.mood.m1 { background: #fff6d6; } .chip.mood.m2 { background: #e3ecf8; } .chip.mood.m3 { background: #f6dede; animation: shake .5s 2; }
@keyframes shake { 25% { transform: translateX(-.25em); } 75% { transform: translateX(.25em); } }
#layer-inv { left: .8em; bottom: .8em; right: auto; top: auto; gap: .5em; align-items: flex-end; width: auto; height: auto; }
#layer-inv.empty { display: none !important; }
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 5.6em; height: 5.6em; background: #fff; border: .16em solid var(--ink); border-radius: 1.1em; box-shadow: 0 .15em 0 var(--ink); padding: .2em; }
.slot .ico { font-size: 2.2em; line-height: 1; }
.slot .nm { font-size: .72em; font-weight: 800; line-height: 1.1; text-align: center; }
.slot.sel { background: #fff0b8; transform: translateY(-.3em); outline: .2em solid var(--yellow); }

/* ---------- toasts ---------- */
#layer-fx { display: flex; flex-direction: column; align-items: center; gap: .5em; padding-top: 4.6em; }
/* Les messages passent au-dessus de tout (même des fenêtres) mais ne prennent jamais le clic : sinon un message de 3 s posé sur « Non, je continue »
   (plus long en anglais, plusieurs empilés) avalait le clic du joueur. */
#layer-fx > * { pointer-events: none; }
.toast { display: flex; align-items: center; gap: .6em; background: var(--ink); color: #fff; padding: .55em 1.2em; border-radius: 2em; font-weight: 800; font-size: 1.1em; animation: toastIn .25s; }
.toast .ico { font-size: 1.4em; }
.toast.out { opacity: 0; transition: opacity .5s; }
@keyframes toastIn { from { transform: translateY(-1em); opacity: 0; } }

/* ---------- dialogues ---------- */
#layer-dialog { display: flex; align-items: flex-end; justify-content: center; padding: 0 .9em .9em; }
.dlg { width: 100%; min-height: 8em; background: #fffdf7; border: .2em solid var(--ink); border-radius: 1.5em; padding: .8em 1em .8em .8em;
  display: flex; align-items: center; gap: 1em; box-shadow: 0 .3em 0 rgba(35, 48, 74, .35), 0 .6em 2em rgba(0, 0, 0, .25); animation: dlgIn .18s; cursor: pointer; }
.dlg.out { opacity: 0; transition: opacity .12s; }
@keyframes dlgIn { from { transform: translateY(1em); opacity: 0; } }
.dlg-port { flex: none; width: 7.2em; height: 7.2em; border-radius: 50%; background: #ffe9c2; border: .18em solid var(--ink); overflow: hidden; }
.dlg-port svg { width: 100%; height: 100%; display: block; }
.dlg-body { flex: 1; min-width: 0; }
.dlg-name { display: inline-block; color: #fff; font-weight: 800; padding: .15em .8em; border-radius: 1em; font-size: 1em; margin-bottom: .3em; }
.dlg-text { font-size: calc(1.5em * var(--text)); line-height: 1.32; font-weight: 600; }
.dlg.narr { background: #23304a; }
.dlg.narr .dlg-text { color: #fff; font-style: italic; }
.dlg-next { flex: none; display: flex; flex-direction: column; align-items: center; gap: .1em; border: .16em solid var(--ink); background: var(--green); color: #fff; font-weight: 800;
  border-radius: 1.2em; padding: .5em 1em; font-size: 1.05em; box-shadow: 0 .15em 0 var(--ink); animation: nudge 1.4s infinite; }
.dlg-next .arr { font-size: 1.3em; }
@keyframes nudge { 50% { transform: translateX(.25em); } }

/* ---------- modales ---------- */
.modal { position: absolute; inset: 0; background: rgba(20, 28, 48, .58); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; padding: 1em; }
.modal.in { opacity: 1; }
.panel { background: var(--cream); border: .2em solid var(--ink); border-radius: 1.6em; padding: 1.1em 1.5em 1.3em; max-width: 74em; width: 100%; max-height: 100%; overflow: auto; box-shadow: 0 1em 3em rgba(0, 0, 0, .4); animation: pop .18s; }
.modal.choose .panel, .modal.situation .panel, .modal.info .panel, .modal.badge .panel, .modal.settings .panel, .modal.menu .panel, .modal.confirm .panel { width: auto; min-width: 34em; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.ch-head { display: flex; align-items: center; gap: 1em; margin-bottom: .9em; }
.ch-port { flex: none; width: 5.6em; height: 5.6em; border-radius: 50%; background: #ffe9c2; border: .16em solid var(--ink); overflow: hidden; }
.ch-port svg { width: 100%; height: 100%; display: block; }
.ch-title { flex: 1; font-size: calc(1.55em * var(--text)); font-weight: 800; line-height: 1.25; }
.ch-text { font-size: .78em; font-weight: 600; margin-top: .3em; line-height: 1.35; }
.sit-q { font-size: .82em; color: var(--blue-d); }
.cards { display: grid; gap: .9em; }
.cards.cols1 { grid-template-columns: 1fr; } .cards.cols2 { grid-template-columns: repeat(2, 1fr); } .cards.cols3 { grid-template-columns: repeat(3, 1fr); }
.card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em; text-align: center; background: #fff; border: .18em solid #b9c6da;
  border-radius: 1.2em; padding: .8em .8em; min-height: 6.6em; font-size: calc(1.15em * var(--text)); font-weight: 700; box-shadow: 0 .2em 0 #b9c6da; transition: transform .08s, border-color .08s; }
.cards.cols2 .card { flex-direction: row; text-align: left; gap: .9em; justify-content: flex-start; }
.card:hover { border-color: var(--teal); transform: translateY(-.15em); box-shadow: 0 .3em 0 var(--teal); }
.card .cico { font-size: 2.5em; line-height: 1; }
.card .csub { font-size: .75em; font-weight: 600; opacity: .8; }
.card.tried { opacity: .4; text-decoration: line-through; }
.card.on { border-color: var(--green); background: #e8f8ee; box-shadow: 0 .2em 0 var(--green); }

.steps3 { display: flex; gap: .5em; justify-content: center; margin-bottom: .8em; }
.steps3 .st { display: flex; align-items: center; gap: .4em; padding: .25em .9em; border-radius: 1.5em; background: #e5e9f2; color: #7c88a2; font-weight: 800; font-size: .85em; }
.steps3 .st.on { background: var(--blue); color: #fff; }
.fb { border-radius: 1.2em; padding: .9em 1.1em; margin-bottom: .8em; border: .18em solid var(--ink); }
.fb.best { background: #e8f8ee; } .fb.ok { background: #eef6ff; } .fb.bad { background: #fff2e2; }
.fb-ban { display: flex; align-items: center; gap: .5em; font-size: 1.7em; font-weight: 800; }
.fb-pick { display: flex; align-items: center; gap: .6em; margin: .4em 0; font-weight: 700; font-size: 1.1em; padding: .4em .6em; background: rgba(255, 255, 255, .8); border-radius: .8em; }
.fb-pick .cico { font-size: 1.9em; }
.fb-why { display: flex; align-items: center; gap: .8em; font-size: calc(1.25em * var(--text)); line-height: 1.35; font-weight: 600; }
.fb-actions { display: flex; justify-content: center; }

.modal.badge .panel { text-align: center; padding: 1.5em 2.5em; }
.badge .confetti { font-size: 2em; animation: floaty 1.6s infinite; }
.badge .bigico { font-size: 7em; line-height: 1.1; animation: tada 1s; }
.badge .bname { font-size: 1.9em; font-weight: 800; margin: .1em 0; }
.badge .bdesc { font-size: 1.15em; margin-bottom: 1em; max-width: 24em; }
@keyframes floaty { 50% { transform: translateY(-.2em); } }
@keyframes tada { 0% { transform: scale(.3); } 60% { transform: scale(1.15) rotate(-6deg); } 100% { transform: scale(1); } }

.info-title { font-size: 1.9em; font-weight: 800; text-align: center; margin-bottom: .6em; }
.info-list { display: flex; flex-direction: column; gap: .6em; }
.info-step { display: flex; align-items: center; gap: .8em; background: #fff; border: .16em solid #b9c6da; border-radius: 1em; padding: .5em .9em; font-size: calc(1.3em * var(--text)); font-weight: 700; }
.info-step .num { flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.info-step .ico { font-size: 1.8em; }
.info-tip { margin-top: .8em; background: #fff6d6; border: .16em dashed var(--yellow); border-radius: 1em; padding: .6em .9em; font-weight: 700; font-size: 1.05em; }

/* ---------- carnet ---------- */
.modal.book .panel { max-width: 62em; height: 100%; max-height: 92%; display: flex; flex-direction: column; }
.book-tabs { display: flex; gap: .5em; margin-bottom: .8em; flex: none; }
.book-tabs .tab, .set-tabs .tab { display: flex; align-items: center; gap: .4em; padding: .55em 1em; border: .16em solid var(--ink); border-radius: 1em; background: #fff; font-weight: 800; font-size: 1em; }
.book-tabs .tab.on, .set-tabs .tab.on { background: var(--ink); color: #fff; }
.book-tabs .tab .ico, .set-tabs .tab .ico { font-size: 1.3em; }
.book-tabs .tab.close { margin-left: auto; background: var(--red); color: #fff; }
.book-body { flex: 1; overflow: auto; padding-right: .3em; }
.phase { margin-bottom: .9em; }
.phase.later { opacity: .55; }
.ph-title { display: flex; align-items: center; gap: .5em; font-weight: 800; font-size: 1.25em; margin-bottom: .3em; }
.ph-title .ico { font-size: 1.3em; }
.obj { display: flex; align-items: center; gap: .6em; padding: .4em .8em; margin: .25em 0 .25em 1.4em; border-radius: .8em; background: #fff; border: .12em solid #d3dbe8; font-weight: 700; font-size: 1.05em; }
.obj.d { opacity: .6; text-decoration: line-through; } .obj.cur { background: #fff0b8; border-color: var(--yellow); }
.obj .oi { font-size: 1.3em; }
.badge-grid, .fiche-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.bd { text-align: center; padding: .8em; border-radius: 1.1em; background: #eef1f7; border: .14em dashed #b9c6da; opacity: .75; }
.bd.has { background: #fff6d6; border: .16em solid var(--yellow); opacity: 1; }
.bd .bi { font-size: 3.2em; } .bd .bn { font-weight: 800; font-size: 1.1em; } .bd .bs { font-size: .8em; margin-top: .2em; }
.fiche-btn { display: flex; align-items: center; gap: .6em; padding: .8em 1em; border-radius: 1em; background: #fff; border: .16em solid var(--ink); font-weight: 800; font-size: 1.05em; text-align: left; }
.fiche-btn:disabled { opacity: .5; } .fiche-btn .fi { font-size: 2em; }
.back { border: none; background: none; font-weight: 800; font-size: 1.05em; margin-bottom: .6em; text-decoration: underline; }
.f-title { font-size: 1.8em; font-weight: 800; margin-bottom: .6em; }
.bilan-intro { font-weight: 700; margin-bottom: .8em; font-size: 1.05em; }
.bilan .sk { display: flex; align-items: center; gap: .7em; padding: .45em .8em; margin: .3em 0; border-radius: .8em; background: #f0f2f8; font-weight: 700; opacity: .65; }
.bilan .sk.done { background: #e8f8ee; opacity: 1; } .bilan .sk .ico { font-size: 1.4em; } .bilan .sk .sn { flex: 1; } .bilan .sk .ss { font-size: 1.1em; }
.bilan-foot { margin-top: .8em; font-weight: 700; }

/* ---------- menu / réglages ---------- */
.set-title { font-size: 1.8em; font-weight: 800; text-align: center; margin-bottom: .7em; }
.set-row { display: flex; align-items: center; gap: .8em; padding: .55em .4em; border-bottom: .1em solid #e1e6ef; font-weight: 700; font-size: 1.1em; }
.set-row .ico { font-size: 1.6em; } .set-row .sl { flex: 1; }
/* Réglages en onglets : la hauteur du contenu est fixe (celle de l'onglet le plus long), pour que la fenêtre et les onglets ne sautent pas d'un onglet à l'autre */
.set-tabs { display: flex; justify-content: center; gap: .5em; margin-bottom: .6em; }
.set-body { min-height: 19.5em; }
.set-build { margin-top: .6em; text-align: center; font-size: .8em; font-weight: 700; opacity: .75; }
.toggle { min-width: 4.5em; padding: .45em 1em; border-radius: 1.5em; border: .15em solid var(--ink); background: #e5e9f2; font-weight: 800; font-size: 1em; }
.toggle.on { background: var(--green); color: #fff; }
.seg { display: flex; } .segb { padding: .45em .9em; border: .15em solid var(--ink); background: #fff; font-weight: 800; font-size: 1em; margin-left: -.15em; }
.segb:first-child { border-radius: 1.5em 0 0 1.5em; margin-left: 0; } .segb:last-child { border-radius: 0 1.5em 1.5em 0; }
.segb.on { background: var(--blue); color: #fff; }
.menu-col { display: flex; flex-direction: column; gap: .8em; align-items: stretch; }
.menu-note { text-align: center; margin-top: .8em; font-weight: 700; opacity: .7; }
.voice-list { max-height: 22em; overflow: auto; padding: .2em .4em .4em .2em; }
.voice-row { display: flex; align-items: center; gap: .6em; } .voice-row .btn { flex: 1; justify-content: flex-start; font-size: 1.1em; padding: .4em 1em; }
.guide-body { font-size: 1.02em; line-height: 1.45; max-height: 28em; overflow: auto; padding-right: .5em; }
.guide-body h3 { margin: .8em 0 .2em; color: var(--blue-d); } .guide-body p, .guide-body ul { margin: .2em 0; } .guide-body li { margin: .2em 0; }
.modal.guide .panel { max-width: 54em; }

/* ---------- accueil ---------- */
.title-screen { position: absolute; inset: 0; pointer-events: none; }
.title-screen > * { pointer-events: auto; }
.logo { position: absolute; left: 3.5em; top: 2em; }
.logo-top { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
.brand-pill { display: inline-flex; align-items: center; gap: .5em; padding: .25em .9em .25em .5em; border: .15em solid var(--ink); border-radius: 1.5em; background: rgba(255, 255, 255, .94); color: var(--ink); font-weight: 800; font-size: 1.15em; text-decoration: none; box-shadow: 0 .12em 0 var(--ink); }
.brand-pill:hover, .brand-pill:focus-visible { transform: translateY(-.08em); background: #fff; }
.brand-mark { height: 1.9em; width: auto; display: block; }
.brand-name em { font-style: normal; color: #b8291f; }
.brand-pill.support { padding-left: .8em; } .brand-pill .heart { color: #b8291f; font-size: 1.1em; }
.logo-main { font-size: 7.6em; font-weight: 900; line-height: .95; letter-spacing: .02em; margin-top: .05em; -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--ink), 0 .12em .2em rgba(0, 0, 0, .25); }
.logo-main .k { color: #ffd84d; } .logo-main .s { color: #ff7a66; margin-left: .15em; }
.logo-sub { margin-top: .3em; background: rgba(255, 255, 255, .92); border-radius: 1em; padding: .3em .9em; font-weight: 800; font-size: 1.15em; max-width: 24em; }
.title-btns { position: absolute; left: 3.5em; top: 25.5em; display: flex; flex-direction: column; gap: .8em; align-items: flex-start; }
.title-foot { position: absolute; left: 3.5em; bottom: .6em; text-align: left; font-size: .8em; font-weight: 700; color: var(--ink); opacity: .75; }
.title-build::before { content: ' · '; white-space: pre; }
.title-lang { position: absolute; right: 1em; top: 1em; display: inline-flex; align-items: center; gap: .5em; padding: .45em .9em; border: .15em solid var(--ink); border-radius: 1.5em; background: rgba(255,255,255,.94); font-weight: 800; font-size: 1em; box-shadow: 0 .12em 0 var(--ink); cursor: pointer; }
.title-lang:hover { transform: translateY(-.08em); } .title-lang .ico { font-size: 1.2em; }
.toggle.loc, .toggle.voice-btn { min-width: 0; }
.eps-screen { position: absolute; inset: 0; background: rgba(255, 243, 220, .97); padding: 1em 1.4em; display: flex; flex-direction: column; pointer-events: auto; }
.eps-head { display: flex; align-items: center; gap: 1em; margin-bottom: .8em; }
.eps-title { font-size: 2.1em; font-weight: 900; }
.eps-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; padding: .3em .3em 1em; align-content: start; }
.ep { background: #fff; border: .18em solid var(--ink); border-radius: 1.3em; padding: .8em 1em; display: flex; flex-direction: column; gap: .2em; box-shadow: 0 .25em 0 var(--ink); }
.ep.soon { opacity: .72; border-style: dashed; box-shadow: none; }
.ep-n { font-weight: 800; font-size: .8em; color: var(--blue-d); } .ep-ico { font-size: 2.6em; line-height: 1.1; } .ep-t { font-weight: 900; font-size: 1.35em; }
.ep-th { font-weight: 800; font-size: .9em; color: var(--green-d); } .ep-b { font-size: .85em; line-height: 1.35; flex: 1; }
.ep-act { display: flex; gap: .5em; margin-top: .6em; flex-wrap: wrap; } .ep-act .btn { font-size: 1em; }
.ep-soon { font-weight: 800; margin-top: .5em; }

/* ---------- création de Kim ---------- */
.avatar-screen { position: absolute; inset: 0; padding: 1.2em 2em; display: flex; flex-direction: column; pointer-events: auto; }
.av-title { font-size: 2.3em; font-weight: 900; text-align: center; }
.av-main { flex: 1; display: flex; gap: 2em; align-items: center; min-height: 0; }
.av-preview { flex: none; width: 24em; height: 100%; max-height: 32em; display: flex; align-items: center; justify-content: center; } .av-preview svg { height: 100%; width: 100%; }
.av-side { flex: 1; display: flex; flex-direction: column; gap: .7em; }
.av-group { background: rgba(255, 255, 255, .9); border-radius: 1em; padding: .5em .8em; border: .12em solid #d3dbe8; }
.av-label { font-weight: 800; font-size: .95em; margin-bottom: .25em; } .av-row { display: flex; gap: .5em; flex-wrap: wrap; }
.av-chip { border: .16em solid var(--ink); background: #fff; border-radius: 1.2em; padding: .35em .9em; font-weight: 800; font-size: 1em; min-height: 2.4em; }
.av-chip.on { background: var(--green); color: #fff; box-shadow: 0 0 0 .2em #bfe9cf; }
.av-chip.icon, .av-chip.dotchip { padding: .1em; width: 3.2em; height: 3.2em; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; }
.av-chip.icon.on { background: #bfe9cf; } .av-chip .mini svg { width: 3em; height: 3em; display: block; }
.dot { display: block; width: 1.8em; height: 1.8em; border-radius: 50%; border: .12em solid var(--ink); }
.av-name { font-size: 1.2em; padding: .5em .9em; border: .16em solid var(--ink); border-radius: 1em; font-family: inherit; font-weight: 700; }
.av-actions { display: flex; justify-content: space-between; align-items: center; }

/* ---------- diplôme ---------- */
.modal.cert .panel { max-width: 46em; }
.diploma { text-align: center; background: #fffbe8; border: .35em double var(--yellow); border-radius: 1em; padding: 1.2em 1.5em; }
.dp-top { font-weight: 900; letter-spacing: .15em; font-size: 1.2em; color: var(--teal); }
.dp-t1 { font-size: 2.2em; font-weight: 900; margin: .2em 0; } .dp-name { font-size: 2.6em; font-weight: 900; color: #e0502e; margin: .1em 0; }
.dp-t2 { font-size: 1.25em; font-weight: 700; } .dp-badges { font-size: 2.6em; margin: .4em 0; letter-spacing: .15em; } .dp-foot { font-weight: 700; opacity: .8; }

/* ---------- « Tourne ton téléphone » : téléphone tenu en portrait (le décor est dessiné par UI.buildRotate, dans screens.js) ---------- */
#rotate { display: none; position: fixed; inset: 0; z-index: 99; flex-direction: column; align-items: center; overflow: hidden; text-align: center;
  font-size: 16px; font-weight: 800; color: var(--ink); background: linear-gradient(#7cc8f0 0%, #d9f1fb 52%, #fff3dc 100%); }
@media (orientation: portrait) and (max-width: 700px) { #rotate { display: flex; } }
#rotate > * { position: relative; z-index: 1; }
#rotate > .rot-sky { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.rot-sky svg, .rot-phone svg, .rot-cast svg { display: block; width: 100%; height: 100%; }
.rot-main { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: calc(env(safe-area-inset-top, 0px) + 2vh) 5vw 1vh; }
.rot-logo { font-size: min(23vw, 14vh); font-weight: 900; line-height: .9; letter-spacing: .02em; transform: rotate(-4deg);
  -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--ink), 0 .12em .2em rgba(0, 0, 0, .25); }
.rot-logo .k, .rot-logo .s { display: block; }
.rot-logo .k { color: #ffd84d; } .rot-logo .s { color: #ff7a66; }
.rot-phone { flex: none; width: min(58vw, 30vh); aspect-ratio: 1; filter: drop-shadow(0 .4em .5em rgba(35, 48, 74, .25)); }
.rot-msg { max-width: 92%; padding: .5em 1.1em .55em; background: #fff; border: .16em solid var(--ink); border-radius: 1.4em; box-shadow: 0 .2em 0 var(--ink);
  font-size: clamp(18px, 6vw, 28px); font-weight: 900; line-height: 1.25; }
.rot-msg .l1, .rot-msg .l2 { display: block; } .rot-msg .l2 { color: var(--blue-d); }
.rot-cast { flex: none; width: 100%; background: #e6c9a0; padding-bottom: env(safe-area-inset-bottom, 0px); }
/* le téléphone se couche, attend un instant, puis se redresse ; la flèche pulse (rien ne bouge si les mouvements sont coupés, voir Réglages) */
.rot-phone .ph { transform-box: fill-box; transform-origin: 50% 50%; animation: rot-turn 3.8s ease-in-out infinite; }
.rot-phone .arrow { transform-box: fill-box; transform-origin: 50% 50%; animation: rot-arrow 1.9s ease-in-out infinite; }
@keyframes rot-turn { 0%, 16% { transform: rotate(0); } 44%, 76% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
@keyframes rot-arrow { 50% { transform: scale(1.07); } }
body.calm .rot-phone .ph, body.calm .rot-phone .arrow, body.calm .rot-sky .spark { animation: none; }
@media (prefers-reduced-motion: reduce) { .rot-phone .ph, .rot-phone .arrow, .rot-sky .spark { animation: none; } }
@media print {
  html, body, #app, #stage { background: #fff !important; box-shadow: none !important; overflow: visible !important; }
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: fixed; left: 0; top: 0; width: 100%; padding: 1cm; font-size: 14pt; background: #fff; }
}

/* =====================================================================
   MINI-JEUX
   ===================================================================== */
.modal[class*='mg'] .panel { max-width: 70em; width: auto; min-width: 40em; }
.mg-title { font-size: 1.7em; font-weight: 900; text-align: center; margin-bottom: .4em; }
.mg-sub { font-weight: 800; font-size: 1.05em; margin: .5em 0 .3em; }
.mg-rule { background: #eef6ff; border: .14em solid #b9d4f5; border-radius: 1em; padding: .45em .9em; font-weight: 700; font-size: 1.02em; margin-bottom: .6em; text-align: center; }
.mg-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.today { background: var(--ink); color: #fff; font-weight: 800; padding: .4em 1em; border-radius: 1em; font-size: 1.05em; }
.menu-msg { margin-top: .6em; } .menu-msg .fb { margin-bottom: .3em; }

.date-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; margin: .5em 0; }
.dcard { display: flex; flex-direction: column; align-items: center; gap: .15em; padding: .6em; background: #fff; border: .16em solid #b9c6da; border-radius: 1em; font-weight: 700; min-height: 6.4em; }
.dcard .cico { font-size: 2.4em; line-height: 1.1; } .dcard .csub { font-size: .8em; min-height: 1.1em; }
.dcard.sel { border-color: var(--blue); background: #eef6ff; box-shadow: 0 0 0 .2em #bcd6f7; }
.dcard.done { opacity: .75; } .dcard.keep { background: #e8f8ee; border-color: var(--green); } .dcard.trash { background: #f0f0f0; }
.date-detail { min-height: 9em; } .date-hint { text-align: center; font-weight: 700; padding: 1.4em 0; opacity: .7; font-size: 1.1em; }
.lens { display: flex; align-items: center; gap: 1em; background: #fff; border: .18em solid var(--ink); border-radius: 1.2em; padding: .7em 1em; }
.lens-ico { font-size: 4em; } .lens-name { font-weight: 900; font-size: 1.3em; } .lens-label { font-size: 1.5em; font-weight: 800; color: var(--ink); margin: .1em 0; background: #fff6d6; border-radius: .4em; padding: 0 .3em; display: inline-block; } .lens-today { font-weight: 700; }

.menu-layout { display: flex; gap: 1.2em; }
.menu-guests { flex: none; width: 17em; background: #fff; border: .16em solid #b9c6da; border-radius: 1em; padding: .7em .8em; }
.guest { display: flex; gap: .5em; align-items: flex-start; font-size: .92em; margin: .4em 0; line-height: 1.3; } .guest .gi { font-size: 1.6em; line-height: 1; }
.guest.budget { border-top: .1em dashed #b9c6da; padding-top: .5em; }
.menu-main { flex: 1; } .dish-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6em; margin-bottom: .4em; }
.dish { display: flex; align-items: center; gap: .6em; padding: .5em .8em; background: #fff; border: .17em solid #b9c6da; border-radius: 1em; font-weight: 700; text-align: left; font-size: 1em; }
.dish .cico { font-size: 2.2em; } .dish .ctx { flex: 1; } .dish .csub { font-weight: 800; color: var(--green-d); }
.dish.on { border-color: var(--green); background: #e8f8ee; box-shadow: 0 0 0 .2em #bfe9cf; } .dish:hover { border-color: var(--teal); }

.list-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; margin: .5em 0; } .list-grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.lcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .5em .4em; background: #fff; border: .16em solid #b9c6da; border-radius: 1em; font-weight: 700; font-size: .95em; min-height: 5.6em; }
.list-grid.cols2 .lcard { flex-direction: row; gap: .7em; text-align: left; }
.lcard .cico { font-size: 2em; line-height: 1.1; } .lcard .tick { position: absolute; top: .1em; right: .3em; font-size: 1.3em; }
.lcard.on { border-color: var(--green); background: #e8f8ee; box-shadow: 0 0 0 .18em #bfe9cf; }
.home-bar { background: #fff6d6; border: .14em dashed var(--yellow); border-radius: 1em; padding: .4em .8em; font-size: .95em; margin-bottom: .4em; } .hb { margin-right: .7em; font-weight: 700; white-space: nowrap; }

.prod { display: flex; gap: 1.2em; align-items: center; flex-wrap: wrap; }
.prod-ico { font-size: 6em; line-height: 1; background: #fff; border: .16em solid #d3dbe8; border-radius: 1em; padding: .1em .25em; }
.prod-info { flex: 1; min-width: 14em; } .prod-name { font-size: 1.6em; font-weight: 900; } .prod-brand { font-weight: 700; opacity: .75; }
.prod-price { display: inline-block; margin: .3em 0; background: #ffe066; border: .14em solid var(--ink); border-radius: .6em; padding: .1em .7em; font-size: 2em; font-weight: 900; transform: rotate(-2deg); }
.prod-out { font-weight: 800; color: #b4302f; font-size: 1.15em; margin-top: .3em; }
.prod-date { border-radius: .8em; padding: .5em .8em; font-weight: 800; font-size: 1.15em; margin-top: .4em; } .prod-date.bad { background: #fde6e6; border: .14em solid var(--red); } .prod-date.good { background: #e8f8ee; border: .14em solid var(--green); }
.pd-today { font-size: .85em; opacity: .85; margin-top: .2em; } .pd-verdict { font-size: 1.1em; margin-top: .2em; }
.prod-acts { width: 100%; display: flex; gap: .8em; justify-content: center; margin-top: .5em; }

.coins-top { display: flex; gap: 1em; justify-content: center; margin: .5em 0; }
.pay-tag { background: #fff; border: .16em solid var(--ink); border-radius: 1em; padding: .3em 1em; font-weight: 800; text-align: center; font-size: 1.05em; display: flex; flex-direction: column; } .pay-tag b { font-size: 1.6em; } .pay-tag.you { background: #fff6d6; }
.tray, .purse { display: flex; flex-wrap: wrap; gap: .5em; padding: .6em; background: #fff; border: .16em dashed #b9c6da; border-radius: 1em; min-height: 4.6em; align-items: center; }
.tray-empty { opacity: .6; font-weight: 700; padding: .4em; width: 100%; text-align: center; }
.pgrp { display: flex; gap: .3em; padding-right: .6em; border-right: .1em solid #e1e6ef; }
.coin { white-space: nowrap; padding: 0; width: 3.6em; height: 3.6em; border-radius: 50%; border: .16em solid #8a6a1f; font-weight: 900; font-size: .95em; background: radial-gradient(circle at 35% 30%, #fff3b0, #f4c542 60%, #c99a1b); color: #5c4310; box-shadow: 0 .12em 0 #8a6a1f; }
.coin.c200 { width: 4.2em; height: 4.2em; background: radial-gradient(circle at 35% 30%, #e8eef5, #f4c542 45%, #c99a1b 46%); } .coin.c100 { width: 4em; height: 4em; background: radial-gradient(circle at 35% 30%, #fff, #d8dee8 45%, #f4c542 46%); }
.coin.c50, .coin.c20, .coin.c10 { background: radial-gradient(circle at 35% 30%, #fff3b0, #f2c94c 60%, #c99a1b); } .coin.c50 { width: 3.9em; height: 3.9em; } .coin.c10 { width: 3.3em; height: 3.3em; }
.coin.c5 { width: 3em; height: 3em; background: radial-gradient(circle at 35% 30%, #ffd9b8, #d98c54 60%, #a65f2a); border-color: #7a431c; color: #fff; box-shadow: 0 .12em 0 #7a431c; }
.coin.c500 { width: 4.4em; height: 4.4em; background: radial-gradient(circle at 35% 30%, #fff, #d8dee8 55%, #aeb7c6); border-color: #6f7a8c; color: #3a4252; box-shadow: 0 .12em 0 #6f7a8c; } /* pièce de 5 (CHF) ou billet de 5 rendu par la caissière */
.coin.c2, .coin.c1 { background: radial-gradient(circle at 35% 30%, #ffd9b8, #d98c54 60%, #a65f2a); border-color: #7a431c; color: #fff; box-shadow: 0 .12em 0 #7a431c; } .coin.c2 { width: 3.1em; height: 3.1em; } .coin.c1 { width: 2.7em; height: 2.7em; font-size: .85em; } /* 1 et 2 pence */
.coin.counted { opacity: .45; transform: scale(.9); }
.calc { text-align: center; margin: .5em 0; } .calc-line { display: flex; gap: .6em; justify-content: center; align-items: center; font-size: 1.6em; font-weight: 900; } .calc-line .op { color: var(--blue-d); }
.calc-line .res { background: #fff; border: .12em solid var(--ink); border-radius: .5em; padding: 0 .5em; } .calc-line .res.ok { background: #bfe9cf; } .calc-line .res.no { background: #ffd2c2; }
.calc-cmp { font-weight: 800; font-size: 1.1em; margin-top: .3em; }

.pile { display: flex; flex-wrap: wrap; gap: .5em; min-height: 6.4em; background: #fff; border: .16em dashed #b9c6da; border-radius: 1em; padding: .5em; justify-content: center; align-items: center; }
.scard { display: flex; flex-direction: column; align-items: center; padding: .4em .7em; background: #fff; border: .16em solid #b9c6da; border-radius: 1em; font-weight: 700; font-size: .95em; min-width: 6em; } .scard .cico { font-size: 2.2em; line-height: 1.1; } .scard.sel { border-color: var(--blue); background: #eef6ff; box-shadow: 0 0 0 .2em #bcd6f7; }
.zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; margin-top: .7em; } .zone { padding: .6em; border: .18em solid var(--ink); border-radius: 1.1em; background: #f0f6ff; min-height: 7em; font-weight: 800; font-size: 1em; } .zone:hover { background: #dff0ff; } .zi { font-size: 1.7em; margin-top: .2em; word-break: break-all; }

.haz-wrap { border: .18em solid var(--ink); border-radius: 1em; overflow: hidden; background: #fff; max-width: 38em; margin: 0 auto; } .haz-svg { display: block; width: 100%; height: auto; }
.hz-hit { fill: transparent; cursor: pointer; } .hz-hit:hover { fill: rgba(255, 216, 77, .25); stroke: #ffd84d; stroke-width: 4; } .hz-hit.pulse { animation: pulse 1s infinite; stroke: #ffd84d; stroke-width: 6; fill: rgba(255, 216, 77, .3); }
.haz-status { text-align: center; font-weight: 800; font-size: 1.1em; margin-bottom: .4em; } .haz-info { min-height: 4.6em; max-width: 38em; margin: .4em auto 0; }

.cook-layout { display: flex; gap: 1.2em; align-items: flex-start; } .cook-art { flex: none; width: 27em; background: #fff3dc; border: .18em solid var(--ink); border-radius: 1.2em; overflow: hidden; } .cook-art svg { display: block; width: 100%; height: auto; }
.cook-side { flex: 1; min-width: 20em; min-height: 18em; } .cook-flash { font-size: 1.5em; font-weight: 800; text-align: center; padding: 2em 0; }
.say-in { display: flex; align-items: center; gap: .8em; background: #fff; border: .16em solid var(--ink); border-radius: 1.2em; padding: .8em 1em; flex-wrap: wrap; } .si-body { flex: 1; min-width: 10em; } .si-text { font-size: calc(1.3em * var(--text)); font-weight: 600; line-height: 1.35; }
.modal.mg .panel .cards { grid-template-columns: 1fr; }

.breath-wrap { text-align: center; }
.breath { margin: 1em auto; width: 14em; height: 14em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d7f5f0, #6fcfc2); display: flex; align-items: center; justify-content: center; font-size: 1.7em; font-weight: 900; color: #fff; text-shadow: 0 .06em .2em rgba(0, 0, 0, .3); transform: scale(.7); transition: transform 3.7s ease-in-out; box-shadow: 0 0 3em rgba(111, 207, 194, .6); }
.breath.in { transform: scale(1.15); } .b-count { text-align: center; font-weight: 800; font-size: 1.3em; min-height: 1.4em; }
.modal.mg.breathe .panel { min-width: 28em; }

.phone { width: 26em; max-width: 100%; margin: 0 auto; background: #e9f0f7; border: .3em solid var(--ink); border-radius: 2.2em; overflow: hidden; box-shadow: 0 .4em 0 rgba(0, 0, 0, .2); }
.ph-head { background: var(--ink); color: #fff; font-weight: 800; padding: .7em 1em; text-align: center; }
.ph-list { padding: .7em; min-height: 13em; max-height: 17em; overflow: auto; display: flex; flex-direction: column; gap: .5em; }
.msg { display: flex; gap: .5em; align-items: flex-end; animation: dlgIn .2s; } .msg .mp { flex: none; width: 3.2em; height: 3.2em; border-radius: 50%; background: #ffe9c2; overflow: hidden; border: .12em solid var(--ink); } .msg .mp svg { width: 100%; height: 100%; display: block; }
.msg .mb { background: #fff; border-radius: 1.1em 1.1em 1.1em .2em; padding: .4em .8em; max-width: 17em; } .msg .mn { font-weight: 800; font-size: .8em; color: var(--blue-d); } .msg .mt { font-size: 1.1em; font-weight: 600; line-height: 1.3; } .msg .mh { font-size: .7em; opacity: .6; text-align: right; }
.msg.me { flex-direction: row-reverse; } .msg.me .mb { background: #cdf0d6; border-radius: 1.1em 1.1em .2em 1.1em; }
.ph-foot { padding: .7em; background: #fff; text-align: center; }
.modal.mg.msgs .panel { background: transparent; border: none; box-shadow: none; min-width: 0; padding: 0; overflow: visible; }

.table-wrap svg { width: 100%; max-width: 42em; display: block; margin: 0 auto; }
.modal.mg .fb-why { font-size: 1.1em; }
.modal.mg.list .panel { max-width: 62em; }

/* ---------- Kim qui marche ---------- */
#kim-sprite { pointer-events: none; }
#kim-sprite .kim-bob { transform-box: fill-box; transform-origin: 50% 100%; }
#kim-sprite.walking .kim-bob { animation: bob .32s infinite ease-in-out; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }

/* ---------- Vie du décor : mouvements en continu ----------
   Les animations « i-… » sont calées sur l'horloge de la page par KS.anim.sync (pas de saut quand la scène est redessinée).
   Réglage « Décor et personnages qui bougent » coupé (body.calm) : plus rien ne bouge, sauf la bouche qui parle. */
.p-idle, .pg-idle, .p-eyes, .pg-eye, .i-drift, .i-rock, .i-sway, .i-flutter, .m-talk { transform-box: fill-box; }
body:not(.calm) .p-idle { transform-origin: 50% 100%; animation: i-breathe 3.6s ease-in-out infinite; }
body:not(.calm) .pg-idle { transform-origin: 50% 100%; animation: i-breathe 3.1s ease-in-out infinite; }
@keyframes i-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.005, 1.013); } }
body:not(.calm) .p-eyes, body:not(.calm) .pg-eye { transform-origin: 50% 50%; animation: i-blink 5s infinite; }
@keyframes i-blink { 0%, 91%, 100% { transform: scaleY(1); } 94.5% { transform: scaleY(.08); } }
/* bras qui salue : pivote autour de l'épaule (transform-origin posé dans le dessin) */
body:not(.calm) .p-wave { transform-box: view-box; animation: i-wave 3.4s ease-in-out infinite; }
@keyframes i-wave { 0%, 42%, 100% { transform: rotate(0); } 8% { transform: rotate(-16deg); } 16% { transform: rotate(9deg); } 24% { transform: rotate(-16deg); } 32% { transform: rotate(9deg); } }
body:not(.calm) .p-cheer { transform-box: view-box; animation: i-cheer .8s ease-in-out infinite alternate; }
@keyframes i-cheer { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
/* Roucou : il hoche la tête, et de temps en temps il picore */
body:not(.calm) .pg-head { transform-box: view-box; transform-origin: 20px -62px; animation: i-pgnod 6.5s ease-in-out infinite; }
@keyframes i-pgnod {
  0%, 36%, 66%, 100% { transform: translate(0, 0) rotate(0); }
  8% { transform: translate(-2px, 1px) rotate(-1deg); } 16% { transform: translate(2px, 0) rotate(1deg); } 24% { transform: translate(-2px, 1px) rotate(-1deg); }
  72% { transform: translate(2px, 5px) rotate(16deg); } 78% { transform: translate(0, 0) rotate(0); } 84% { transform: translate(2px, 5px) rotate(15deg); } 90% { transform: translate(0, 0) rotate(0); }
}
/* décor : nuages qui dérivent, bateaux qui tanguent, feuilles et rideaux qui ondulent */
body:not(.calm) .i-drift { animation: i-drift 34s ease-in-out infinite alternate; }
@keyframes i-drift { from { transform: translateX(-34px); } to { transform: translateX(34px); } }
body:not(.calm) .i-rock { transform-origin: 50% 90%; animation: i-rock 3.8s ease-in-out infinite; }
@keyframes i-rock { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(2px); } }
body:not(.calm) .i-sway { transform-origin: 50% 100%; animation: i-sway 4.6s ease-in-out infinite alternate; }
@keyframes i-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
body:not(.calm) .i-flutter { transform-origin: 50% 0%; animation: i-flutter 5.2s ease-in-out infinite alternate; }
@keyframes i-flutter { from { transform: skewX(-1.2deg); } to { transform: skewX(1.5deg); } }
body:not(.calm) .i-wave { animation: i-waves 4.4s ease-in-out infinite alternate; }
@keyframes i-waves { from { transform: translateX(-9px); } to { transform: translateX(9px); } }
body:not(.calm) .i-pulse { animation: i-pulse 4.2s ease-in-out infinite alternate; }
@keyframes i-pulse { from { opacity: .35; } to { opacity: .8; } }

/* ---------- Bouche qui parle (classe .talking posée par KS.anim pendant la lecture) ---------- */
.m-talk { display: none; transform-origin: 50% 25%; }
.talking .m-rest { display: none; }
.talking .m-talk { display: inline; animation: t-mouth .62s ease-in-out infinite; }
@keyframes t-mouth {
  0%, 100% { transform: scale(.9, .15); } 14% { transform: scale(1.05, 1); } 28% { transform: scale(.75, .45); } 42% { transform: scale(1, .85); }
  57% { transform: scale(.7, .2); } 72% { transform: scale(1.1, .95); } 86% { transform: scale(.9, .4); }
}
body .talking .p-head { transform-box: view-box; transform-origin: 0 -215px; animation: t-nod .66s ease-in-out infinite; }
@keyframes t-nod { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-1.6px) rotate(-1deg); } 60% { transform: translateY(.8px) rotate(1deg); } }
.pg-gape { display: none; }
.talking .pg-gape { display: inline; }
body .talking .pg-beak-lo { transform-box: fill-box; transform-origin: 0 0; animation: t-beak-lo .36s ease-in-out infinite; }
body .talking .pg-beak-up { transform-box: fill-box; transform-origin: 0 100%; animation: t-beak-up .36s ease-in-out infinite; }
@keyframes t-beak-lo { 50% { transform: rotate(20deg); } }
@keyframes t-beak-up { 50% { transform: rotate(-9deg); } }
body .talking .pg-head { transform-box: view-box; transform-origin: 20px -62px; animation: t-pgtalk .54s ease-in-out infinite; }
@keyframes t-pgtalk { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-1.6px) rotate(-3deg); } 65% { transform: translateY(.6px) rotate(2deg); } }

/* ---------- Particules (notes, vapeur, plumes…) ---------- */
.fxp { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: t-float 1.3s ease-out both; pointer-events: none; }
.fxp-puff { animation-name: t-puff; }
@keyframes t-float {
  0% { opacity: 0; transform: translate(0, 0) scale(.5) rotate(0); } 15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.15) rotate(var(--rot)); }
}
@keyframes t-puff {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.9); }
}

/* ---------- Petites scènes de l'introduction ---------- */
body:not(.calm) .i-tear { animation: i-tear 2.8s ease-in infinite; }
@keyframes i-tear { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
body:not(.calm) .i-gust { animation: i-gust 5s ease-in-out infinite; }
@keyframes i-gust { 0%, 100% { transform: translateX(0); opacity: 0; } 25% { opacity: .85; } 50% { transform: translateX(150px); opacity: .85; } 75% { opacity: 0; } }

/* ---------- Bouton « Quitter » des situations et des mini-jeux ---------- */
.modal.has-exit { padding-top: 4.4em; }
.modal-exit { position: absolute; top: .8em; right: .9em; display: flex; align-items: center; gap: .4em; min-height: 3em; padding: 0 1em .1em;
  background: #fff; border: .16em solid var(--ink); border-radius: 1.6em; font-weight: 800; font-size: .95em; box-shadow: 0 .15em 0 var(--ink); }
.modal-exit:hover { background: #ffe8e4; }
.modal-exit .ico { font-size: 1.1em; color: var(--red); }
.modal.confirm { background: rgba(20, 28, 48, .72); }

/* =====================================================================
   MINI-JEUX DE DÉPLACEMENT : horaire, plan de ligne, trajet en bus, chemin à suivre (js/minigames-transport.js)
   ===================================================================== */
.tt-head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6em; margin-bottom: .6em; font-weight: 800; }
.tt-line { color: #fff; border-radius: .6em; padding: .25em .8em; font-size: 1.25em; font-weight: 900; }
.tt-dir { font-size: 1.1em; }
.tt-now { background: var(--ink); color: #fff; border-radius: 1em; padding: .3em .9em; font-size: 1.05em; }
.tt-wrap { overflow-x: auto; }
table.tt { border-collapse: separate; border-spacing: .35em; margin: 0 auto; }
table.tt th { text-align: left; font-weight: 800; padding: 0 .6em; white-space: nowrap; font-size: 1.02em; }
table.tt tr.here th { color: var(--blue-d); }
.tt-cell { min-width: 5em; padding: .5em .6em; font-size: 1.05em; font-weight: 800; background: #fff; border: .16em solid #b9c6da; border-radius: .8em; white-space: nowrap; }
.tt-cell:hover { border-color: var(--teal); }
.tt-cell.col { background: #eef6ff; border-color: var(--blue); }
.tt-cell.ok { background: #e8f8ee; border-color: var(--green); }

.lm-route { display: flex; align-items: flex-start; justify-content: center; padding: 1em .4em 0; }
.lm-item { display: flex; align-items: flex-start; }
.lm-link { width: 3.2em; height: .5em; margin-top: 1.5em; border-radius: .3em; flex: none; }
.lm-stop { display: flex; flex-direction: column; align-items: center; gap: .3em; width: 8.2em; background: none; border: none; padding: .2em; font-weight: 800; }
.lm-dot { width: 3em; height: 3em; border-radius: 50%; background: #fff; border: .35em solid; display: flex; align-items: center; justify-content: center; font-size: 1.1em; }
.lm-name { font-size: 1em; text-align: center; line-height: 1.15; }
.lm-note { font-size: .78em; background: #fff6d6; border-radius: .6em; padding: .1em .5em; font-weight: 700; }
.lm-stop:hover .lm-dot { background: #eef6ff; }
.lm-stop.here .lm-name { color: var(--blue-d); }
.lm-stop.ok .lm-dot { background: #e8f8ee; }

.br-strip { display: flex; justify-content: center; align-items: flex-start; margin: .4em 0; }
.br-stop { display: flex; flex-direction: column; align-items: center; width: 8.2em; position: relative; font-weight: 800; }
.br-stop::before { content: ''; position: absolute; top: 1.4em; left: -50%; width: 100%; height: .45em; background: #c9d3de; z-index: 0; }
.br-stop:first-child::before { display: none; }
.br-stop.past::before { background: #2b5fd9; }
.br-dot { position: relative; z-index: 1; width: 3.2em; height: 3.2em; border-radius: 50%; background: #fff; border: .3em solid #8d9bae; display: flex; align-items: center; justify-content: center; font-size: 1.1em; }
.br-stop.past .br-dot { border-color: #2b5fd9; }
.br-stop.next .br-dot { border-color: var(--orange); }
.br-name { font-size: .95em; text-align: center; line-height: 1.15; margin-top: .3em; }
.br-board { background: #23304a; color: #ffd84d; border-radius: 1em; padding: .6em 1em; text-align: center; margin: .6em auto; max-width: 36em; font-size: 1.6em; font-weight: 900; letter-spacing: .02em; }
.br-asked { margin-top: .3em; font-size: .6em; color: #fff; background: var(--red); border-radius: 1em; display: inline-block; padding: .1em .7em; }

.dm-layout { display: flex; gap: 1em; align-items: stretch; margin-bottom: .6em; }
.dm-steps { flex: none; width: 18em; display: flex; flex-direction: column; gap: .4em; }
.dm-steps .info-step { font-size: 1em; padding: .4em .7em; }
.dm-map { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: .5em; background: #e3eef0; border: .16em solid #b9c6da; border-radius: 1em; padding: .8em; }
.dm-street { display: flex; gap: .35em; align-items: flex-end; border-bottom: .8em solid #8d9bae; }
.dm-cross { display: flex; flex-direction: column; align-items: center; gap: .1em; font-weight: 800; padding-bottom: .3em; min-width: 5em; text-align: center; }
.dm-from { font-size: 2.4em; line-height: 1; }
.dm-fname { font-size: .9em; }
.dm-here { margin-top: .4em; background: var(--ink); color: #fff; border-radius: 1em; padding: .15em .6em; font-size: .8em; }
.dm-b { display: flex; flex-direction: column; align-items: center; gap: .1em; width: 4.4em; min-height: 6.2em; padding: .4em .15em 0; background: #fff; border: .16em solid #b9c6da; border-bottom: none; border-radius: .8em .8em 0 0; font-weight: 800; font-size: .9em; }
.dm-b:hover { border-color: var(--teal); background: #f4fbfa; }
.dm-b.ok { background: #e8f8ee; border-color: var(--green); }
.dm-ico { font-size: 2em; line-height: 1.1; }
.dm-name { font-size: .72em; line-height: 1.1; min-height: 1.7em; text-align: center; }
.dm-door { width: 1.5em; height: 1.3em; border-radius: .3em .3em 0 0; border: .1em solid var(--ink); border-bottom: none; margin-top: auto; }