/* Le voyage chez Mamy — styles. Polices système uniquement (hors ligne, aucune requête externe). */
:root {
  --sand: #fdf3e1; --sand-2: #f6e3c3; --ink: #2d3047; --teal: #1f6f8b; --terra: #e4572e;
  --saffron: #f3a712; --mint: #2a9d8f; --violet: #6050dc; --white: #fff;
  --radius: 28px; --shadow: 0 6px 0 rgba(45, 48, 71, .18), 0 10px 24px rgba(45, 48, 71, .12);
  --font: ui-rounded, "Nunito", "Segoe UI", Roboto, system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sand); color: var(--ink); font-family: var(--font); }
body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; overscroll-behavior: none; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
#app { position: fixed; inset: 0; }
.hidden { display: none !important; }

/* ------------------------------------------------------------- barre haute */
.topbar { position: absolute; top: 0; left: 0; right: 0; height: 76px; display: flex; align-items: center; padding: 10px 14px; pointer-events: none; z-index: 20; }
.topbar > * { pointer-events: auto; }
.tb-space { flex: 1; pointer-events: none; }
.tb-btn { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.92); font-size: 28px; box-shadow: 0 3px 0 rgba(45,48,71,.15); display: grid; place-items: center; }
.tb-btn:active { transform: translateY(2px); box-shadow: none; }
.help-btn { font-size: 32px; font-weight: 900; color: var(--teal); border: 3px solid var(--teal); }
.screen { position: absolute; inset: 0; padding-top: 76px; }

/* --------------------------------------------------------- boutons communs */
.btn-go { width: 140px; height: 140px; border-radius: 50%; background: var(--terra); color: #fff; font-size: 64px; box-shadow: 0 8px 0 #a8391a, 0 14px 30px rgba(0,0,0,.2); animation: pulse 1.8s ease-in-out infinite; display: grid; place-items: center; padding-left: 10px; }
.btn-go:active { transform: translateY(6px); box-shadow: 0 2px 0 #a8391a; }
.btn-round { width: 84px; height: 84px; border-radius: 50%; background: #fff; font-size: 40px; box-shadow: var(--shadow); display: grid; place-items: center; }
.btn-round.sm { width: 60px; height: 60px; font-size: 28px; }
.btn-round:active { transform: translateY(4px); }
.btn-replay.speaking { animation: wiggle .5s ease-in-out infinite; background: #fff5d6; }
.vis-emoji { font-size: 1em; line-height: 1; font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.vis-img { width: 80%; height: 80%; object-fit: cover; border-radius: 18px; }

/* --------------------------------------------------------------- accueil */
.home-sky { position: absolute; inset: 0; background: linear-gradient(#bfe6f5, #fdf3e1 75%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.home-sun { position: absolute; top: 8%; right: 10%; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(#ffe27a, #f3a712); box-shadow: 0 0 60px #ffd54a; animation: spin 30s linear infinite; }
.home-title { font-size: clamp(28px, 6vw, 56px); margin: 0; color: var(--teal); text-shadow: 0 3px 0 #fff; }
.home-bella { cursor: pointer; }

/* ----------------------------------------------------------- Bella */
.bella { position: relative; display: inline-block; }
.bella-svg { width: 100%; height: 100%; overflow: visible; }
.bella-sm { width: 96px; height: 110px; } .bella-md { width: 150px; height: 172px; } .bella-lg { width: min(220px, 34vh); height: min(254px, 39vh); }
.bella .b-eye-closed { display: none; }
.bella .b-eye { animation: blink 4s infinite; transform-origin: 58px 34px; }
.bella .b-head { transform-origin: 50px 60px; }
.bella .b-beak-low { transform-origin: 70px 47px; }
.bella .b-wing { transform-origin: 62px 88px; }
.bella.m-idle .bella-svg { animation: bob 2.4s ease-in-out infinite; }
.bella.m-talk .b-beak-low { animation: talk .25s ease-in-out infinite alternate; }
.bella.m-talk .bella-svg { animation: bob 1.2s ease-in-out infinite; }
.bella.m-happy .bella-svg { animation: hop .45s ease-in-out infinite; }
.bella.m-happy .b-wing, .bella.m-fly .b-wing { animation: flap .22s ease-in-out infinite alternate; }
.bella.m-think .b-head { animation: tilt 1s ease-in-out infinite alternate; }
.bella.m-sleep .b-eye { display: none; } .bella.m-sleep .b-eye-closed { display: inline; }
.bella.m-sleep .bella-svg { animation: breathe 3s ease-in-out infinite; }
.bella.m-fly .bella-svg { animation: hop .6s ease-in-out infinite; }
.bella-bubble { position: absolute; bottom: 92%; left: 60%; background: #fff; border-radius: 22px; padding: 8px 14px; font-size: 30px; white-space: nowrap; box-shadow: var(--shadow); animation: popIn .3s; }

/* ------------------------------------------------------------------ carte */
.screen-map { display: flex; align-items: center; justify-content: center; background: #e9f7fb; padding-bottom: 8px; }
.map-wrap { position: relative; width: min(100vw - 16px, (100vh - 96px) * 1.6667); aspect-ratio: 5 / 3; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); }
.map-bg, .map-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.stop { position: absolute; transform: translate(-50%, -50%); width: clamp(58px, 10%, 112px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 5px solid var(--teal); box-shadow: var(--shadow); display: grid; place-items: center; font-size: clamp(26px, 4.6vw, 54px); z-index: 2; }
.stop.done { border-color: var(--saffron); background: #fff8e1; }
.stop.here { border-color: var(--terra); animation: pulse 1.4s ease-in-out infinite; }
.stop.locked { filter: grayscale(.8); opacity: .65; }
.stop-star { position: absolute; top: -12px; right: -10px; font-size: .5em; }
.stop-name { position: absolute; top: 100%; margin-top: 4px; font-size: clamp(10px, 1.5vw, 16px); font-weight: 800; color: var(--ink); background: rgba(255,255,255,.8); padding: 1px 8px; border-radius: 10px; white-space: nowrap; }
.map-bella { position: absolute; transform: translate(-30%, -105%); transition: left 1.5s ease-in-out, top 1.5s ease-in-out; z-index: 3; pointer-events: none; }
.map-bella .bella-sm { width: clamp(56px, 9vw, 100px); height: clamp(64px, 10.4vw, 115px); }
.map-patio { position: absolute; right: 16px; bottom: 16px; width: 86px; height: 86px; border-radius: 50%; background: #fff; font-size: 44px; box-shadow: var(--shadow); z-index: 5; }
.patio-count { position: absolute; top: -6px; right: -6px; background: var(--terra); color: #fff; font-size: 18px; font-weight: 900; min-width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; padding: 0 6px; }
.parent-lock { position: absolute; left: 12px; bottom: 12px; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.6); font-size: 22px; z-index: 5; opacity: .7; }
.parent-lock .lock-ring { position: absolute; inset: -4px; border-radius: 50%; border: 4px solid transparent; }
.parent-lock.holding .lock-ring { border-color: var(--teal); animation: hold 2s linear forwards; }

/* --------------------------------------------------------- étape / jeux */
.screen-stop { background: linear-gradient(#fef8ec, var(--sand-2)); }
.game-area { position: absolute; inset: 76px 0 0 0; display: flex; align-items: center; justify-content: center; padding: 8px 12px 12px 110px; }
.guide-corner { position: absolute; left: 6px; bottom: 6px; z-index: 6; pointer-events: none; }
.act-dots { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 21; }
.act-dots i { width: 18px; height: 18px; border-radius: 50%; background: #e7d6b4; }
.act-dots i.on { background: var(--saffron); } .act-dots i.cur { background: var(--terra); transform: scale(1.25); }
.intro-icon { font-size: clamp(70px, 16vw, 150px); }
.game { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }

.cards { display: flex; gap: clamp(14px, 3vw, 36px); flex-wrap: wrap; justify-content: center; }
.pic-card { width: clamp(130px, 24vw, 250px); aspect-ratio: 1; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); font-size: clamp(70px, 13vw, 150px); display: grid; place-items: center; transition: transform .15s; }
.pic-card:active { transform: scale(.96); }
.pic-card.win { animation: hop .4s ease-in-out 2; background: #fff5c2; outline: 6px solid var(--saffron); }
.pic-card.hint, .drag-item.hint { animation: glow 1s ease-in-out infinite; }

.memory { display: grid; gap: clamp(10px, 2vw, 20px); grid-template-columns: repeat(4, 1fr); }
.memory-6 { grid-template-columns: repeat(3, 1fr); }
.mem-card { width: clamp(90px, 16vw, 170px); aspect-ratio: 1; perspective: 600px; }
.mem-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .35s; transform-style: preserve-3d; }
.mem-card.up .mem-inner { transform: rotateY(180deg); }
.mem-back, .mem-front { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden; display: grid; place-items: center; box-shadow: var(--shadow); }
.mem-back { background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23f3a712' opacity='.85'%3E%3Crect x='12' y='12' width='16' height='16'/%3E%3Crect x='12' y='12' width='16' height='16' transform='rotate(45 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%231f6f8b'/%3E%3C/svg%3E") center/50% repeat; border: 5px solid #fff; }
.mem-front { background: #fff; transform: rotateY(180deg); font-size: clamp(50px, 9vw, 100px); }
.mem-card.matched .mem-front { background: #fff5c2; animation: hop .4s 1; }

.dialogue { position: relative; }
.caller { display: flex; flex-direction: column; align-items: center; transition: transform .2s; }
.caller-face { font-size: clamp(70px, 14vw, 130px); width: 1.5em; height: 1.5em; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); font-family: "Noto Color Emoji", "Segoe UI Emoji", sans-serif; }
.caller-name { font-weight: 900; font-size: 22px; margin-top: 6px; }
.caller.talking .caller-face { animation: talkFace .35s ease-in-out infinite alternate; box-shadow: 0 0 0 10px rgba(42,157,143,.25), var(--shadow); }
.caller.happy .caller-face { animation: hop .4s 2; } .caller.happy .caller-face::after { content: '❤️'; position: absolute; font-size: .4em; transform: translate(70%, -70%); }
.caller.puzzled .caller-face { animation: tilt .35s 2 alternate; }
.phone.ringing .caller-face { animation: ringShake .5s ease-in-out infinite; }
.phone.hung .caller-face { filter: grayscale(.6); }
.dlg-scene { min-height: 110px; display: flex; align-items: center; }
.dlg-bubble { display: flex; align-items: center; gap: 14px; background: #fff; padding: 10px 18px; border-radius: 40px; box-shadow: var(--shadow); font-size: clamp(50px, 8vw, 80px); }
.dlg-answers { display: flex; gap: clamp(14px, 3vw, 30px); flex-wrap: wrap; justify-content: center; min-height: 140px; align-items: center; }
.dlg-answer { min-width: clamp(130px, 20vw, 210px); height: clamp(110px, 16vw, 160px); padding: 0 18px; border-radius: 80px; background: #e6f6f3; border: 5px solid var(--mint); box-shadow: var(--shadow); font-size: clamp(54px, 8vw, 84px); }
.dlg-answer.chosen { background: #fff5c2; border-color: var(--saffron); }
.btn-pickup { width: 120px; height: 120px; background: #34c759; font-size: 60px; animation: pulse 1s ease-in-out infinite; }
.invite { display: flex; align-items: center; gap: 22px; background: #fff; padding: 12px 20px; border-radius: 60px; box-shadow: var(--shadow); }
.invite-icon { font-size: 64px; animation: wiggle 1s ease-in-out infinite; }
.btn-star { background: #fff5c2; }

.drag-game { gap: 26px; }
.drag-top { display: flex; align-items: center; gap: 24px; }
.drop-zone { position: relative; width: clamp(180px, 30vw, 300px); height: clamp(150px, 24vw, 230px); border-radius: 40px; background: #fff; border: 6px dashed var(--saffron); display: grid; place-items: center; font-size: clamp(80px, 13vw, 140px); transition: transform .15s, background .15s; }
.drop-zone.over { transform: scale(1.06); background: #fff5c2; }
.drop-in { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; font-size: 34px; gap: 2px; }
.shelf { display: flex; gap: clamp(10px, 2.4vw, 24px); flex-wrap: wrap; justify-content: center; padding: 14px 20px; background: #c98d4f; border-radius: 26px; box-shadow: inset 0 -10px 0 #a66f37; }
.drag-item { width: clamp(90px, 14vw, 140px); aspect-ratio: 1; border-radius: 24px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; font-size: clamp(54px, 8.5vw, 90px); touch-action: none; }
.drag-item.lifted { opacity: .3; }
.drag-item.placed { visibility: hidden; }
.ghost { position: fixed; z-index: 50; pointer-events: none; transform: scale(1.12) rotate(-4deg); box-shadow: 0 18px 30px rgba(0,0,0,.25); }
.ghost.back { transition: left .3s, top .3s; transform: none; }

.reward { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.reward-mosaic .mosaic { width: min(60vw, 46vh * 1.5); }
.btn-next { width: 120px; height: 120px; font-size: 56px; padding: 0; background: var(--mint); box-shadow: 0 8px 0 #1b6c63; }

/* --------------------------------------------------------- mosaïque */
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; background: #c9b48f; padding: 6px; border-radius: 16px; box-shadow: var(--shadow); width: min(86vw, 62vh * 1.5); }
.m-tile { aspect-ratio: 1; }
.m-tile svg { width: 100%; height: 100%; display: block; border-radius: 3px; }
.m-tile.fresh { animation: tileIn .9s cubic-bezier(.2,1.6,.4,1); position: relative; z-index: 2; }
.patio { position: absolute; inset: 76px 0 0 0; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 10px; flex-wrap: wrap; background: radial-gradient(#fff8ea, var(--sand-2)); }
.patio-frame { padding: 14px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.patio-frame .mosaic { width: min(70vw, 66vh * 1.5); box-shadow: none; }
.patio-side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stickers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sticker { width: 64px; height: 64px; border-radius: 50%; background: #eee3cf; display: grid; place-items: center; font-size: 34px; filter: grayscale(1); opacity: .5; }
.sticker.on { background: #fff; filter: none; opacity: 1; box-shadow: var(--shadow); }
.medals { font-size: 36px; }

/* -------------------------------------------------------------- fin */
.screen-fin { background: #2f3b73; }
.fin { position: absolute; inset: 76px 0 0 0; display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; background: linear-gradient(#2f3b73, #6a5aa8); }
.fin-bella { position: relative; }
.zzz { position: absolute; top: 0; right: -20px; color: #fff; font-size: 30px; font-weight: 900; animation: float 3s ease-in-out infinite; }
.fin-mosaic .mosaic { width: min(50vw, 50vh * 1.5); }

/* ------------------------------------------------------ bandeau « À dire » */
.say-strip { position: fixed; top: 82px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 12px; background: #fff; border: 3px solid var(--teal); border-radius: 22px; padding: 8px 18px; box-shadow: var(--shadow); max-width: calc(100vw - 24px); animation: popIn .25s; }
.say-icon { font-size: 34px; }
.say-txt { display: flex; flex-direction: column; line-height: 1.15; }
.say-txt b { font-size: 26px; color: var(--teal); }
.say-ar { font-size: 22px; font-family: "Noto Naskh Arabic", "Segoe UI", sans-serif; }
.say-txt small { font-size: 14px; color: #6b6f86; }
.say-warn { color: var(--terra); font-size: 12px; }

/* --------------------------------------------------------------- aide */
.help-layer { position: fixed; inset: 0; z-index: 100; background: rgba(45,48,71,.45); display: grid; place-items: center; padding: 16px; animation: fadeIn .2s; }
.help-card { position: relative; background: #fff; border-radius: 30px; padding: 56px 24px 20px; width: min(560px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,.3); display: flex; flex-direction: column; align-items: center; gap: 14px; animation: popIn .25s; user-select: text; max-height: calc(100vh - 32px); overflow: auto; }
.help-close { position: absolute; top: 10px; right: 10px; width: 52px; height: 52px; border-radius: 50%; background: #f1ece2; font-size: 24px; }
.help-row { display: flex; align-items: center; gap: 12px; }
.help-child { font-size: 24px; font-weight: 700; margin: 0; line-height: 1.3; }
.help-ear { font-size: 60px; }
.help-parent { font-size: 15px; background: #eef7f5; border-radius: 16px; padding: 10px 14px; line-height: 1.4; }
.help-note { font-size: 13px; color: #777; margin: 0; }
.gate-card p { margin: 0; font-size: 18px; }
.gate-q { font-size: 40px !important; font-weight: 900; }
.gate-out { font-size: 36px; min-height: 48px; min-width: 120px; text-align: center; border-bottom: 3px solid var(--teal); }
.gate-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; }
.gate-keys button { height: 64px; border-radius: 16px; background: #f1ece2; font-size: 26px; font-weight: 800; }

/* ----------------------------------------------------------- parent */
.screen-parent { overflow: auto; background: #faf7f1; user-select: text; -webkit-user-select: text; }
.parent { max-width: 980px; margin: 0 auto; padding: 0 16px 60px; }
.parent h1 { margin: 0 0 10px; font-size: 26px; color: var(--teal); }
.parent h2 { font-size: 19px; margin: 22px 0 8px; }
.p-tabs { display: flex; gap: 6px; flex-wrap: wrap; position: sticky; top: 0; background: #faf7f1; padding: 6px 0; z-index: 2; }
.p-tabs button { padding: 10px 14px; border-radius: 14px; background: #ece4d4; font-size: 15px; font-weight: 700; }
.p-tabs button.on { background: var(--teal); color: #fff; }
.p-intro { color: #555; font-size: 14px; line-height: 1.45; }
.p-row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 10px 12px; margin: 6px 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.p-row.slim { padding: 6px 10px; font-size: 14px; flex-wrap: wrap; }
.p-emoji { font-size: 34px; width: 46px; text-align: center; }
.p-main { flex: 1; min-width: 0; font-size: 14px; }
.p-latin { font-size: 19px; color: var(--teal); }
.p-ar { font-size: 19px; }
.p-fr { font-weight: 700; } .p-sit { color: #666; } .p-note { color: #8a5a00; font-size: 13px; } .p-meta { color: #888; font-size: 12px; margin-top: 2px; }
.p-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.btn-play { width: 46px; height: 46px; border-radius: 50%; background: var(--mint); color: #fff; font-size: 18px; }
.badge { padding: 6px 10px; border-radius: 12px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.badge.ok { background: #d9f2e6; color: #17734a; } .badge.todo { background: #ffe9cc; color: #9a5400; }
.p-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.p-kpis div { background: #fff; border-radius: 16px; padding: 12px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.p-kpis b { display: block; font-size: 30px; color: var(--teal); } .p-kpis span { font-size: 13px; color: #555; }
.p-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; font-size: 15px; }
.p-table th, .p-table td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: left; }
.p-table input { width: 26px; height: 26px; }
.p-file { display: block; margin: 10px 0; font-size: 16px; padding: 12px; background: #fff; border: 2px dashed var(--teal); border-radius: 14px; width: 100%; }
.p-report { font-size: 14px; }
.p-warn { color: #a34100; }
.p-ids { display: flex; flex-wrap: wrap; gap: 6px; } .p-ids code { background: #fff; padding: 3px 7px; border-radius: 6px; font-size: 13px; }
.btn { display: inline-block; margin: 6px 6px 6px 0; padding: 12px 18px; border-radius: 14px; background: var(--teal); color: #fff; font-size: 15px; font-weight: 700; }
.btn:disabled { opacity: .6; }
.btn-danger { background: #b3261e; }
.btn-del { padding: 6px 10px; border-radius: 10px; background: #f6dede; font-size: 13px; }
.p-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-size: 14px; font-weight: 700; }
.p-field input, .p-field select { font-size: 17px; padding: 10px 12px; border-radius: 12px; border: 2px solid #ddd; font-family: inherit; }
.p-toggle { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0; font-size: 15px; }
.p-toggle input { width: 26px; height: 26px; flex: none; }
.p-toggle small { display: block; }
.p-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.p-seg button { padding: 12px 18px; border-radius: 14px; background: #ece4d4; font-weight: 800; font-size: 16px; }
.p-seg button.on { background: var(--teal); color: #fff; }

/* ------------------------------------------------------------- micro */
.voice-turn { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.btn-mic { width: 120px; height: 120px; border-radius: 50%; background: #fff; font-size: 58px; box-shadow: var(--shadow); border: 6px solid #d9d2c4; transition: border-color .2s; }
.btn-mic.listening { border-color: var(--terra); animation: micPulse 1s ease-in-out infinite; }
.btn-mic.done { opacity: .5; }
.try-dots { display: flex; gap: 10px; }
.try-dots i { width: 20px; height: 20px; border-radius: 50%; background: #e7d6b4; }
.try-dots i.ok { background: var(--mint); } .try-dots i.miss { background: var(--saffron); }
.heard { font-size: 13px; color: #8a8fa5; min-height: 16px; text-align: center; max-width: 90vw; }
.dlg-hints { display: flex; gap: 14px; }
.dlg-hint { font-size: clamp(44px, 7vw, 70px); background: #e6f6f3; border: 4px dashed var(--mint); border-radius: 50px; padding: 6px 20px; }
.dlg-answers { flex-direction: column; }
.dlg-answers:has(.dlg-answer) { flex-direction: row; }
.repeat-game { gap: 24px; }
.repeat-top { display: flex; align-items: center; gap: 22px; }
.big-pic { width: clamp(150px, 28vw, 260px); font-size: clamp(90px, 16vw, 170px); }
.repeat-zone { min-height: 170px; display: flex; align-items: center; justify-content: center; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(228,87,46,.45), var(--shadow); } 50% { box-shadow: 0 0 0 18px rgba(228,87,46,0), var(--shadow); } }

.voice-row { display: flex; align-items: center; gap: 16px; }
.btn-mic { display: grid; place-items: center; }
.btn-hear { width: 70px; height: 70px; font-size: 34px; background: #fff8e1; }
.dlg-bubble.cue { font-size: clamp(44px, 7vw, 70px); max-width: min(92vw, 640px); }
.cue-txt { font-size: clamp(16px, 2.4vw, 22px); font-weight: 800; color: var(--teal); line-height: 1.25; }
.say-strip.hint { border-color: var(--mint); background: #f2fbf8; }
.say-strip.hint b { color: #17734a; }
.who { display: inline-block; font-size: 12px; font-weight: 800; background: #ece4d4; border-radius: 8px; padding: 1px 8px; margin-bottom: 2px; }
.who-c { background: #d9f2e6; color: #17734a; }
.p-child { border-left: 5px solid var(--mint); }
.parent h3 { font-size: 16px; margin: 18px 0 6px; color: var(--teal); }

/* -------------------------------------------- enregistreur (parent) */
.btn-rec { width: 52px; height: 52px; border-radius: 50%; background: #fbe3dd; color: #c0392b; font-size: 22px; }
.btn-rec.on { background: #c0392b; color: #fff; animation: pulse 1s infinite; }
.rec-meter { height: 6px; background: #eee; border-radius: 3px; margin: 6px 0 2px; overflow: hidden; max-width: 260px; }
.rec-meter i { display: block; height: 100%; width: 0; background: var(--mint); transition: width .05s; }
.p-actions-row { flex-direction: row; align-items: center; }
.p-var-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.p-var { flex: 1; min-width: 180px; font-size: 14px; padding: 6px 10px; border-radius: 10px; border: 1px solid #ddd; font-family: inherit; }
.p-range { width: 100%; max-width: 420px; }

/* ------------------------------------------------------------ confettis */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px; animation: fall 1.4s ease-in forwards; }

/* ------------------------------------------------------------- animations */
.pop-in { animation: popIn .35s cubic-bezier(.2,1.5,.4,1) both; }
.wobble { animation: wobble .45s ease-in-out; }
@keyframes popIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.stop.here { animation-name: pulseStop; }
@keyframes pulseStop { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.1); } }
@keyframes wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes wiggle { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes talk { from { transform: rotate(0); } to { transform: rotate(12deg); } }
@keyframes flap { from { transform: rotate(0); } to { transform: rotate(-24deg); } }
@keyframes tilt { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes blink { 0%,94%,100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes glow { 0%,100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 10px rgba(243,167,18,.55), var(--shadow); } }
@keyframes ringShake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(6deg); } }
@keyframes talkFace { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes tileIn { 0% { transform: scale(2.6) rotate(-90deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%,100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(-14px); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes hold { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------- téléphone / portrait */
@media (max-width: 700px), (orientation: portrait) {
  .game-area { padding: 8px 10px 110px; }
  .guide-corner .bella-sm { width: 72px; height: 84px; }
  .cards-3 .pic-card { width: clamp(100px, 40vw, 200px); }
  .memory-8 { grid-template-columns: repeat(2, 1fr); } .memory-6 { grid-template-columns: repeat(2, 1fr); }
  .mem-card { width: clamp(80px, 28vw, 150px); }
  .drag-top { flex-direction: column; gap: 10px; }
  .btn-go { width: 110px; height: 110px; font-size: 50px; }
  .say-strip { top: 78px; padding: 6px 12px; } .say-txt b { font-size: 20px; } .say-ar { font-size: 18px; }
}
@media (max-height: 500px) {
  .topbar { height: 60px; } .tb-btn { width: 48px; height: 48px; font-size: 22px; }
  .screen { padding-top: 60px; } .game-area, .patio, .fin { top: 60px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }