/* Mission Cellule — charte « Gélatine pop ». Couleurs, formes et mouvement : voir la planche de direction artistique. */
:root {
  --creme: #FFF4EC;
  --blush: #FFE3E7;
  --plasma: #FFCDD0;
  --cacao: #3A1D2A;
  --cacao-2: #6B4452;
  --rubis: #F0566A;
  --rubis-dark: #C93A52;
  --grenat: #8E1F3D;
  --mangue: #FF9F5A;
  --mangue-dark: #E0773A;
  --lavande: #C9B6FF;
  --lavande-dark: #8C6FE0;
  --paille: #FFE08A;
  --soleil: #FFC857;
  --soleil-dark: #D99A2B;
  --oxygene: #BFE6FF;
  --menthe: #7ED9B5;
  --menthe-dark: #4FB38D;
  --menthe-text: #1E3D32;
  --f-display: 'Baloo 2', 'Trebuchet MS', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --f-body: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  --r-scene: 32px;
  --r-panel: 24px;
  --r-btn: 20px;
  --shadow-panel: 0 8px 24px rgba(142, 31, 61, 0.1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --ease-pop: cubic-bezier(0.3, 1.4, 0.5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
body {
  background: #F4DDD6;
  color: var(--cacao);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--cacao); outline-offset: 3px; }
/* Titres focalisés par programme à l'ouverture d'un écran (lecteurs d'écran) : pas de contour visible. */
[tabindex='-1']:focus { outline: none; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { padding: 24px; font-size: 18px; }

/* ---------- Coque de l'application : colonne portrait, centrée sur grand écran */
.app {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--creme);
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@media (min-width: 520px) {
  .app { box-shadow: 0 0 0 1px rgba(142, 31, 61, 0.08), 0 24px 60px rgba(142, 31, 61, 0.14); }
}
.screen-host { position: absolute; inset: 0; }
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: calc(var(--safe-t) + 12px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 14px) calc(var(--safe-l) + 16px);
  overflow: hidden;
  background: var(--creme);
}
.scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Dans une zone défilante, les blocs gardent leur hauteur : c'est la zone qui défile, pas eux qui rétrécissent. */
.scroll > *, .page-body > *, .labo-body > *, .boss-body > *, .result-body > *, .hub-body > *, .tab-panel > * { flex-shrink: 0; }

/* Démarrage */
.boot { position: absolute; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--creme); text-align: center; padding: 24px; }
.boot-title { font: 800 52px/0.92 var(--f-display); color: var(--cacao); }
.boot-dots { display: flex; gap: 8px; }
.boot-dots span { width: 14px; height: 14px; border-radius: 50%; background: var(--rubis); animation: boot 1s ease-in-out infinite alternate; }
.boot-dots span:nth-child(2) { animation-delay: 0.2s; background: var(--soleil); }
.boot-dots span:nth-child(3) { animation-delay: 0.4s; background: var(--lavande-dark); }
.boot-msg { margin: 0; color: var(--cacao-2); max-width: 30ch; }
.boot.is-error .boot-dots { display: none; }
@keyframes boot { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* Paysage sur téléphone : on demande de tourner l'écran */
.rotate-hint { display: none; position: absolute; inset: 0; z-index: 90; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--creme); color: var(--grenat); text-align: center; padding: 24px; font: 700 20px var(--f-display); }
@media (orientation: landscape) and (max-height: 500px) {
  .rotate-hint { display: flex; }
}

/* ---------- Typographie commune */
.kicker { margin: 0; font: 800 13px var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grenat); }
.section-title { margin: 18px 4px 8px; font: 800 20px var(--f-display); color: var(--cacao); }
.lead { margin: 0; font-size: 17px; }
.page-title { margin: 0; font: 800 clamp(26px, 7.5vw, 32px)/1.05 var(--f-display); }
.source { font-size: 13px; opacity: 0.85; }

/* ---------- Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-btn);
  font: 700 19px/1.1 var(--f-display);
  text-align: center;
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
.btn-block { width: 100%; }
.btn-xl { min-height: 64px; font-size: 22px; }
.btn-sm { min-height: 48px; padding: 0 14px; font-size: 16px; }
.btn-primary { background: var(--soleil); color: var(--cacao); box-shadow: 0 6px 0 var(--soleil-dark); }
.btn-primary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--soleil-dark); }
.btn-secondary { background: #fff; color: var(--grenat); box-shadow: inset 0 0 0 2px var(--rubis), 0 4px 0 #F3B8C1; }
.btn-secondary:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--rubis), 0 1px 0 #F3B8C1; }
.btn-soft { background: var(--blush); color: var(--cacao); box-shadow: 0 5px 0 #F3B8C1; }
.btn-soft:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #F3B8C1; }
.btn-ghost { background: transparent; color: var(--grenat); text-decoration: underline; text-underline-offset: 4px; min-height: 48px; }
.btn-danger { background: #fff; color: #A3122E; box-shadow: inset 0 0 0 2px var(--rubis-dark); }
.btn:disabled { opacity: 0.5; }
.icon-btn { width: 48px; height: 48px; flex: 0 0 48px; border: 0; border-radius: 16px; background: #fff; color: var(--cacao); box-shadow: var(--shadow-panel); display: inline-grid; place-items: center; }
.icon-btn svg { width: 26px; height: 26px; }
.icon-btn:active { transform: scale(0.94); }
.link-btn { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--grenat); font: 700 16px var(--f-display); text-decoration: underline; text-underline-offset: 4px; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 14px; border-radius: 16px; background: #fff; font: 700 14px var(--f-display); color: var(--cacao-2); box-shadow: var(--shadow-panel); text-align: center; }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: 14px; background: var(--blush); font: 700 13px var(--f-body); color: var(--cacao); }
.chip-menthe { background: #E0F5EC; color: var(--menthe-text); }
.chip-blush { background: var(--blush); color: #6B1730; }
.chip-soleil { background: #FFF0CC; color: #6B4A00; }
.chip-oxygene { background: #E3F3FF; color: #1F4E7A; }

/* ---------- En-têtes */
.topbar { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 10px; }
.topbar-title { margin: 0; text-align: center; font: 800 20px/1.1 var(--f-display); }
.topbar-spacer { width: 48px; }
.topbar .pill { justify-self: end; }

/* ---------- Accueil */
.screen-title { justify-content: space-between; background: radial-gradient(120% 70% at 50% 40%, #FFE9E4 0%, var(--creme) 60%); }
.title-top { text-align: center; padding-top: 10px; }
.logo { margin: 6px 0 0; font: 800 clamp(46px, 14vw, 64px)/0.9 var(--f-display); color: var(--cacao); letter-spacing: -0.01em; }
.title-hero { position: relative; flex: 1 1 auto; min-height: 140px; display: grid; place-items: center; }
.hero-rubis { line-height: 0; }
.hero-rubis svg { width: min(62vw, 270px, 34vh); height: auto; }
.hero-cells { position: absolute; inset: 0; pointer-events: none; }
.hero-cells span { position: absolute; border-radius: 50%; background: var(--plasma); opacity: 0.6; }
.hero-cells span:nth-child(1) { width: 70px; height: 52px; left: 6%; top: 18%; }
.hero-cells span:nth-child(2) { width: 46px; height: 34px; right: 10%; top: 8%; }
.hero-cells span:nth-child(3) { width: 90px; height: 64px; right: 4%; bottom: 10%; opacity: 0.45; }
.title-actions { display: flex; flex-direction: column; gap: 14px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { min-height: 72px; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--shadow-panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 700 15px var(--f-display); color: var(--cacao); }
.tile-icon { line-height: 0; color: var(--grenat); }
.tile-icon svg { width: 26px; height: 26px; }
.tile:active { transform: scale(0.96); }

/* ---------- Mondes */
.hub-body { padding-bottom: 8px; }
.world-card { position: relative; background: #fff; border-radius: 28px; box-shadow: var(--shadow-panel); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.world-card.is-locked { margin-top: 16px; background: #FBEFF0; box-shadow: none; flex-direction: row; align-items: center; justify-content: space-between; }
.world-art { display: flex; align-items: flex-end; justify-content: center; gap: 4px; background: linear-gradient(165deg, #FFE7E2, #FFCDD0); border-radius: 22px; padding: 10px 0 4px; line-height: 0; }
.world-title { margin: 2px 0 0; font: 800 28px/1 var(--f-display); }
.world-sub { margin: 2px 0 8px; color: var(--cacao-2); font-size: 15px; }
.world-meta { margin: 6px 0 0; font-size: 14px; color: var(--cacao-2); font-weight: 700; }
.progress { height: 12px; border-radius: 6px; background: var(--blush); overflow: hidden; }
.progress-fill { display: block; height: 100%; background: var(--menthe-dark); border-radius: 6px; }
.replay { background: #fff; border-radius: 22px; box-shadow: var(--shadow-panel); padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.replay.is-locked { background: #FBEFF0; box-shadow: none; }
.replay-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.replay-title { font: 800 18px var(--f-display); }
.replay-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.replay-actions .btn { flex: 1 1 0; }
.replay-locked { margin: 0; font-size: 14px; color: var(--cacao-2); }
.lock { display: inline-grid; place-items: center; color: var(--cacao-2); line-height: 0; }
.lock svg { width: 22px; height: 22px; }
.lock-lg svg { width: 32px; height: 32px; }

/* ---------- Étoiles */
.stars { display: inline-flex; gap: 4px; }
.star path { fill: var(--soleil); stroke: var(--soleil-dark); stroke-width: 1.4; stroke-linejoin: round; }
.star.is-off path { fill: #F3D9DE; stroke: #E8C0C8; }
.stars-sm .star { width: 20px; height: 20px; }
.stars-lg .star { width: 56px; height: 56px; }

/* ---------- Scène d'histoire */
.screen-story { gap: 10px; }
.story-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.story-stage { position: relative; flex: 1 1 auto; min-height: 0; border-radius: var(--r-scene); overflow: hidden; box-shadow: var(--shadow-panel); background: #FFE7E2; }
.story-stage .bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cast { position: absolute; left: 0; right: 0; bottom: 3%; display: flex; justify-content: center; align-items: flex-end; gap: 1%; pointer-events: none; }
.cast-member { line-height: 0; transform-origin: 50% 100%; transition: transform 0.3s var(--ease-pop), opacity 0.3s; }
.cast-member svg { width: 100%; height: auto; display: block; }
.cast-1 .cast-member { width: min(64%, 34vh); }
.cast-2 .cast-member { width: min(47%, 27vh); }
.cast-3 .cast-member { width: min(33%, 21vh); }
/* Dans le sang, les personnages flottent au milieu du plasma (et non posés au sol) : plus grands, centrés. */
.bg-sang .cast { top: 50%; bottom: auto; transform: translateY(-38%); }
.bg-sang .cast-2 .cast-member { width: min(48%, 31vh); }
.bg-sang .cast-3 .cast-member { width: min(34%, 25vh); }
.bg-sang .cast-member svg { animation: float 1.8s ease-in-out infinite alternate; }
.bg-sang .cast-member:nth-child(2) svg { animation-delay: -0.6s; }
.bg-sang .cast-member:nth-child(3) svg { animation-delay: -1.2s; }
.reduce-motion .bg-sang .cast-member svg { animation: none; }
.cast-member.is-speaking { transform: scale(1.06); }
.cast-member.is-quiet { opacity: 0.78; transform: scale(0.93); }
.fx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.drift-cells span { position: absolute; width: 54px; height: 40px; border-radius: 50%; background: #FFB3BC; opacity: 0.5; animation: drift 14s linear infinite; }
.drift-cells span:nth-child(1) { top: 20%; animation-delay: -2s; }
.drift-cells span:nth-child(2) { top: 44%; animation-delay: -7s; animation-duration: 18s; }
.drift-cells span:nth-child(3) { top: 12%; animation-delay: -11s; width: 36px; height: 28px; }
.drift-cells span:nth-child(4) { top: 60%; animation-delay: -4s; animation-duration: 20s; }
@keyframes drift { from { transform: translateX(-80px); } to { transform: translateX(520px); } }
.dialog { position: relative; background: #fff; border-radius: 26px 26px 26px 10px; box-shadow: var(--shadow-panel); padding: 12px 16px 6px; min-height: 128px; display: flex; flex-direction: column; gap: 4px; }
.dialog-name { font: 800 15px var(--f-display); color: var(--grenat); }
.dialog-text { margin: 0; font: 600 19px/1.3 var(--f-display); color: var(--cacao); text-wrap: pretty; }
.dialog.is-narration .dialog-text { font: italic 600 17px/1.4 var(--f-body); color: var(--cacao-2); }
.dialog-choices { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.dialog-next { align-self: flex-end; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; font: 700 15px var(--f-display); color: var(--grenat); }
.dialog-next .chev { line-height: 0; animation: nudge 1.2s ease-in-out infinite; }
.dialog-next svg { width: 18px; height: 18px; }
@keyframes nudge { 50% { transform: translateX(4px); } }
.tube-host { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; pointer-events: none; }
.tube-host:empty { display: none; }
.tube-wrap { pointer-events: auto; display: flex; align-items: center; gap: 14px; max-width: 100%; padding: 14px; border-radius: 24px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow-panel); }
.tube { flex: 0 0 64px; height: min(250px, 34vh); display: flex; flex-direction: column; border-radius: 10px 10px 30px 30px; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 0 0 7px #E8C9C3; }
.tube-layer { position: relative; border: 0; padding: 0; width: 100%; min-height: 44px; } /* cible tactile suffisante, même pour la fine couche blanche */
.tube-layer::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font: 800 18px var(--f-display); color: rgba(58, 29, 42, 0.45); }
.tube-layer.is-revealed::after { content: '✓'; color: var(--cacao); }
.tube-plasma { flex: 52 1 0; background: #FFE08A; }
.tube-gb { flex: 14 1 0; background: #fff; box-shadow: inset 0 0 0 2px #EDE7FF; }
.tube-gr { flex: 34 1 0; background: var(--rubis); }
.tube-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 210px; }
.fact strong { display: block; font: 800 15px/1.15 var(--f-display); }
.fact span { font-size: 13px; line-height: 1.3; }

/* ---------- Pages simples */
.page-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.page-head { display: flex; align-items: center; gap: 12px; }
.page-actions { display: flex; flex-direction: column; gap: 10px; }
.page-actions:empty { display: none; }
.mini-avatar { display: inline-block; line-height: 0; flex: 0 0 auto; }
.feedback { border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.feedback p { margin: 0; }
.feedback strong { font: 800 17px var(--f-display); }
.feedback.is-ok { background: #E3F6EE; color: var(--menthe-text); }
.feedback.is-ko { background: #FFE3E7; color: #6B1730; }
.feedback:empty { display: none; }
.feedback-who { display: flex; align-items: center; gap: 8px; }
.ide-says { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-weight: 700; }

/* Transmission */
.transmissions { display: flex; flex-direction: column; gap: 10px; }
.transmission { position: relative; display: flex; gap: 10px; align-items: flex-start; min-height: 56px; padding: 14px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 5px 0 #F3B8C1, var(--shadow-panel); text-align: left; font: 600 16px/1.35 var(--f-body); color: var(--cacao); }
.transmission.is-correct { background: #E3F6EE; box-shadow: 0 5px 0 var(--menthe-dark); }
.transmission.is-wrong { background: #FFE9EC; box-shadow: none; opacity: 0.8; }
.transmission:disabled:not(.is-correct):not(.is-wrong) { opacity: 0.6; }
.badge-icon { line-height: 0; color: var(--menthe-dark); }
.badge-icon svg { width: 24px; height: 24px; }

/* Bonus */
.bonus-card { background: #fff; border-radius: 28px; box-shadow: var(--shadow-panel); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.bonus-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bonus-art { line-height: 0; }
.bonus-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bonus-list li { display: flex; gap: 10px; align-items: flex-start; }
.bullet { line-height: 0; color: var(--menthe-dark); padding-top: 2px; }
.bullet svg { width: 20px; height: 20px; }

/* ---------- Bilan */
.result-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 6px; }
.result-hero { line-height: 0; }
.result-hero svg { width: min(40vw, 150px, 22vh); height: auto; }
.result-hero.duo { display: flex; align-items: flex-end; }
.result-title { margin: 0; font: 800 clamp(28px, 8vw, 36px)/1.05 var(--f-display); }
.result-sub { margin: 0; color: var(--cacao-2); max-width: 34ch; }
.criteria { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.criterion { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 10px 12px; text-align: left; font-weight: 700; font-size: 15px; }
.crit-icon { line-height: 0; }
.crit-icon svg { width: 22px; height: 22px; }
.criterion.is-ok .crit-icon { color: var(--menthe-dark); }
.criterion.is-ko .crit-icon { color: var(--rubis-dark); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.result-actions { display: flex; flex-direction: column; gap: 10px; }
.teaser { margin: 8px 0 0; font: 700 15px var(--f-display); color: var(--grenat); }
.error-detail { margin: 0; font-size: 13px; color: var(--cacao-2); word-break: break-word; }

/* ---------- Carnet */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #fff; border-radius: 18px; padding: 4px; box-shadow: var(--shadow-panel); }
.tab { min-height: 48px; border: 0; border-radius: 14px; background: transparent; font: 700 15px var(--f-display); color: var(--cacao-2); }
.tab[aria-selected='true'] { background: var(--soleil); color: var(--cacao); box-shadow: 0 3px 0 var(--soleil-dark); }
.tab-panel { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
.carnet-summary { margin: 0; font-size: 14px; color: var(--cacao-2); font-weight: 700; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px 12px; color: var(--cacao-2); }
.empty-icon { line-height: 0; color: var(--lavande-dark); }
.empty-icon svg { width: 40px; height: 40px; }
.fiche-list, .glossary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fiche { background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow-panel); display: flex; flex-direction: column; gap: 6px; }
.fiche .chip { background: #E3F3FF; color: #1F4E7A; }
.fiche.is-due .chip { background: var(--rubis-dark); color: #fff; } /* 5:1 (le rubis clair ne donnait que 3,4:1) */
.fiche.is-acquired .chip { background: #E0F5EC; color: var(--menthe-text); }
.fiche.is-acquired { opacity: 0.75; }
.fiche-q { margin: 0; font: 700 16px/1.25 var(--f-display); }
.fiche-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fiche-src { font-size: 12px; color: var(--cacao-2); }
.glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.term { background: #fff; border-radius: 18px; padding: 12px; box-shadow: var(--shadow-panel); }
.term-name { margin: 0 0 4px; font: 800 16px/1.15 var(--f-display); color: var(--grenat); }
.term-def { margin: 0; font-size: 14px; line-height: 1.35; }
.term.is-locked { display: flex; align-items: center; gap: 8px; background: #FBEFF0; box-shadow: none; color: var(--cacao-2); min-height: 64px; }
.term.is-locked .term-name { margin: 0; color: var(--cacao-2); }

/* ---------- Réglages */
.card-list { background: #fff; border-radius: 24px; box-shadow: var(--shadow-panel); overflow: hidden; }
.card-list.pad { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.setting-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px; cursor: pointer; }
.setting-row + .setting-row { border-top: 1px solid #F6E4E7; }
.setting-icon { line-height: 0; color: var(--grenat); }
.setting-icon svg { width: 24px; height: 24px; }
.setting-text { flex: 1; display: flex; flex-direction: column; }
.setting-label { font: 700 17px var(--f-display); }
.setting-hint { font-size: 13px; color: var(--cacao-2); }
.setting-hint.pad { padding: 0 14px 12px; margin: 0; }
.setting-hint.warn { color: #A3122E; font-weight: 700; margin: 0; }
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { position: relative; flex: 0 0 52px; width: 52px; height: 32px; border-radius: 16px; background: #E3CCD2; transition: background 0.2s; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.2s var(--ease-pop); }
.switch-input:checked + .switch { background: var(--menthe-dark); }
.switch-input:checked + .switch::after { transform: translateX(20px); }
.switch-input:focus-visible + .switch { outline: 3px solid var(--cacao); outline-offset: 2px; }
.setting-block { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.setting-block + .setting-block { border-top: 1px solid #F6E4E7; }
.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-label { flex: 1 1 0; min-width: 64px; min-height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--blush); font: 700 15px var(--f-display); cursor: pointer; }
.seg-input:checked + .seg-label { background: var(--soleil); box-shadow: 0 3px 0 var(--soleil-dark); }
.seg-input:focus-visible + .seg-label { outline: 3px solid var(--cacao); outline-offset: 2px; }
.about p { margin: 0; font-size: 15px; }
.version { color: var(--cacao-2); font-size: 13px; }
.pause-settings { background: #fff; border-radius: 20px; overflow: hidden; }

/* ---------- Fenêtres et messages */
.overlay-host { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.backdrop { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 16px calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px); background: rgba(58, 29, 42, 0.42); pointer-events: auto; }
.sheet { width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 20px 18px 16px; border-radius: 28px; background: var(--creme); box-shadow: 0 20px 50px rgba(58, 29, 42, 0.3); }
.sheet-title { margin: 0; font: 800 26px/1.1 var(--f-display); }
.sheet-warn .sheet-title { color: var(--grenat); }
.sheet-danger .sheet-title { color: #A3122E; }
.sheet-text { margin: 0; font-size: 17px; }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.intro-art { display: flex; justify-content: center; line-height: 0; }
.toast-host { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 10px); z-index: 60; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.toast { max-width: 100%; padding: 10px 16px; border-radius: 16px; background: var(--cacao); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); text-align: center; }
.toast-warn { background: var(--grenat); }

/* ---------- Quiz */
.quiz { display: flex; flex-direction: column; gap: 12px; }
.quiz-prompt { margin: 0; font: 700 20px/1.25 var(--f-display); text-wrap: pretty; }
.quiz-choices { display: flex; flex-direction: column; gap: 10px; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; border: 0; border-radius: 18px; background: var(--blush); box-shadow: 0 5px 0 #F3B8C1; text-align: left; font: 700 17px/1.2 var(--f-display); color: var(--cacao); }
.choice:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #F3B8C1; }
.choice svg { width: 22px; height: 22px; flex: 0 0 auto; }
.choice.is-correct { background: var(--menthe); box-shadow: 0 5px 0 var(--menthe-dark); color: var(--menthe-text); }
.choice.is-wrong { background: #FFD4DA; box-shadow: 0 5px 0 #E99AA6; }
.choice:disabled:not(.is-correct):not(.is-wrong) { opacity: 0.55; }
.vf-card { position: relative; min-height: 150px; display: flex; align-items: center; justify-content: center; padding: 34px 20px 20px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-panel); text-align: center; font: 700 20px/1.25 var(--f-display); touch-action: none; cursor: grab; transition: box-shadow 0.2s; }
.vf-hint { position: absolute; top: 10px; font: 700 13px var(--f-body); color: var(--cacao-2); }
.vf-left { left: 16px; }
.vf-right { right: 16px; }
.vf-card.lean-left { box-shadow: -8px 0 0 #E99AA6, var(--shadow-panel); }
.vf-card.lean-right { box-shadow: 8px 0 0 var(--menthe-dark), var(--shadow-panel); }
.vf-card.said-true { box-shadow: 6px 0 0 var(--menthe-dark), var(--shadow-panel); cursor: default; }
.vf-card.said-false { box-shadow: -6px 0 0 #E99AA6, var(--shadow-panel); cursor: default; }
.vf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vf-btn.is-correct { background: var(--menthe); box-shadow: 0 5px 0 var(--menthe-dark); color: var(--menthe-text); }
.vf-btn.is-wrong { background: #FFD4DA; box-shadow: 0 5px 0 #E99AA6; }
.vf-btn:disabled { opacity: 1; }
.order-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.order-slot { display: flex; align-items: center; gap: 10px; }
.slot-num { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--cacao); color: #fff; display: grid; place-items: center; font: 800 16px var(--f-display); }
.slot-item { flex: 1; min-height: 52px; padding: 0 12px; border: 2px dashed #E3B9C3; border-radius: 16px; background: #fff; text-align: left; font: 700 16px var(--f-display); color: var(--cacao); }
.order-slot.is-filled .slot-item { border-style: solid; border-color: var(--lavande-dark); background: #F3EEFF; }
.order-slot.is-correct .slot-item { border-color: var(--menthe-dark); background: #E3F6EE; }
.order-slot.is-wrong .slot-item { border-color: var(--rubis); background: #FFE3E7; }
.order-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-item { min-height: 48px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--lavande); box-shadow: 0 4px 0 var(--lavande-dark); font: 700 16px var(--f-display); color: var(--cacao); touch-action: none; }
.chip-item.is-used { opacity: 0.3; pointer-events: none; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: 0.92; }
.order-answer-title { margin: 0; font-weight: 800; }
.order-answer { margin: 0; padding-left: 24px; font-weight: 700; }

/* ---------- Tête de mini-jeu */
.game-hud { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
.hud-center { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.hud-title { margin: 0; text-align: center; font: 800 20px/1.1 var(--f-display); }
.hud-center .pill { align-self: center; min-height: 26px; font-size: 13px; }
.hud-phase { text-align: center; font: 800 14px/1.1 var(--f-display); color: var(--grenat); }
.gauge { display: flex; flex-direction: column; gap: 2px; }
.gauge-track { position: relative; display: flex; height: 14px; border-radius: 7px; }
.g-hemo { flex: 35 1 0; background: var(--rubis); border-radius: 7px 0 0 7px; }
.g-green { flex: 30 1 0; background: var(--menthe); }
.g-thrombo { flex: 35 1 0; background: var(--grenat); border-radius: 0 7px 7px 0; }
.gauge-marker { position: absolute; left: 0; top: -5px; width: 8px; height: 24px; border-radius: 4px; background: var(--cacao); box-shadow: 0 0 0 2px #fff; will-change: transform; }
.gauge-labels { display: flex; justify-content: space-between; font: 700 11px var(--f-body); color: var(--cacao-2); }
/* Halo de danger : on anime l'opacité d'un calque (composé), pas l'ombre (qui se redessine). */
.gauge-track::after { content: ''; position: absolute; inset: -5px; border-radius: 12px; box-shadow: 0 0 0 5px rgba(240, 86, 106, 0.45); opacity: 0; pointer-events: none; }
.breche-hud.is-danger .gauge-track::after { animation: danger 0.7s ease-in-out infinite alternate; }
@keyframes danger { from { opacity: 0; } to { opacity: 1; } }
.atp { width: 48px; height: 48px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.atp-cell { width: 24px; height: 12px; border-radius: 3px; background: var(--mangue); box-shadow: 0 0 0 2px var(--mangue-dark); }
.atp.is-empty .atp-cell { background: transparent; }
.atp-label { font: 800 11px/1 var(--f-display); color: #9A4A16; }
.boss-hud { grid-template-columns: 48px minmax(0, 1fr) auto; }
.boss-score { text-align: center; font: 700 13px var(--f-body); color: var(--cacao-2); }
.hearts { display: flex; gap: 2px; color: var(--rubis); }
.heart { line-height: 0; }
.heart svg { width: 22px; height: 22px; }
.heart.is-lost { color: #E3B9C3; }

/* ---------- Urgence brèche */
.screen-breche { gap: 8px; }
.stage-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.stage { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; border-radius: 32px; overflow: hidden; background: #FBE3DB; box-shadow: var(--shadow-panel); contain: layout paint; touch-action: none; }
.world { position: absolute; inset: 0; }
.tissue { position: absolute; left: 0; right: 0; top: 220px; bottom: 0; background: linear-gradient(#FBE0D8, #F4CFC6); }
.hematoma { position: absolute; left: 180px; top: 330px; width: 300px; height: 110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 58, 82, 0.6), rgba(201, 58, 82, 0.3) 60%, rgba(201, 58, 82, 0)); transform: translate(-50%, -50%) scale(0.2); transition: transform 0.4s; }
.lumen { position: absolute; left: -10px; right: -10px; top: 70px; height: 160px; background: linear-gradient(180deg, #FFE3DF, #FFD0D5); transform-origin: 50% 50%; }
.wall { position: absolute; height: 24px; background: #F7A8B4; }
.wall-top { left: -10px; right: -10px; top: 46px; box-shadow: inset 0 -5px 0 #EE93A3; }
.wall-bl { left: -10px; width: 148px; top: 230px; border-radius: 0 14px 14px 0; box-shadow: inset 0 5px 0 #EE93A3; }
.wall-br { right: -10px; width: 148px; top: 230px; border-radius: 14px 0 0 14px; box-shadow: inset 0 5px 0 #EE93A3; }
.collagen { position: absolute; left: 124px; top: 232px; width: 112px; height: 44px; line-height: 0; }
.collagen.is-target::after { content: ''; position: absolute; inset: -12px -8px; border: 3px dashed var(--soleil-dark); border-radius: 18px; animation: target 1.1s ease-in-out infinite alternate; }
@keyframes target { from { opacity: 0.35; } to { opacity: 1; } }
.endo { position: absolute; top: 220px; width: 44px; height: 24px; background: #F7A8B4; box-shadow: inset 0 5px 0 #EE93A3; transform: scaleX(0); }
.endo-l { left: 136px; transform-origin: left center; border-radius: 0 12px 12px 0; }
.endo-r { left: 180px; transform-origin: right center; border-radius: 12px 0 0 12px; }
.ambient { position: absolute; left: 0; right: 0; top: 70px; height: 160px; overflow: hidden; pointer-events: none; }
.flow-cell { position: absolute; left: -70px; line-height: 0; opacity: 0.5; animation: flow 8s linear infinite; }
@keyframes flow { to { transform: translateX(470px); } }
.leak { position: absolute; inset: 0; pointer-events: none; }
.drop { position: absolute; top: 240px; width: 10px; height: 14px; margin-left: -5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #E0475F; opacity: 0; }
.drop.on, .leak.is-burst .drop { animation: drip 1.1s ease-in infinite; }
.leak.is-burst .drop { animation-duration: 0.7s; }
@keyframes drip { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 15% { opacity: 0.95; } 100% { transform: translate(var(--dx, 0), var(--fall, 110px)) scale(1); opacity: 0; } }
.plug { position: absolute; left: 180px; top: 226px; width: 96px; height: 46px; border-radius: 48% 52% 46% 54% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 35%, #E6DCFF, #C9B6FF 60%, #B39DF5); transform: translate(-50%, -50%) scale(0.35); opacity: 0; transition: opacity 0.3s, transform 0.25s var(--ease-pop); pointer-events: none; }
.plug.is-on { opacity: 1; }
.plug.is-red { background: radial-gradient(circle at 35% 35%, #FF97A6, #E0475F 60%, #C93A52); }
.plug-net { position: absolute; inset: 3px 8px; line-height: 0; opacity: 0; transition: opacity 0.4s; }
.plug-net svg { width: 100%; height: 100%; }
.plug.is-red .plug-net { opacity: 1; }
.tokens, .fx { position: absolute; inset: 0; pointer-events: none; }
.token { position: absolute; left: 0; top: 0; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; pointer-events: auto; touch-action: none; cursor: grab; }
.token svg { pointer-events: none; }
.token:focus-visible { outline: 3px solid var(--cacao); outline-offset: -2px; }
.platelet.stuck { width: 48px; height: 48px; cursor: default; }
.platelet.stuck svg { width: 36px; height: 42px; }
.platelet.flowing { width: 60px; height: 60px; cursor: pointer; }
.platelet.is-dragging { z-index: 5; }
.platelet.is-dragging svg { filter: drop-shadow(0 6px 6px rgba(58, 29, 42, 0.25)); }
.platelet.is-active::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; box-shadow: 0 0 0 3px var(--soleil); opacity: 0.9; }
.is-pulsing svg { animation: pulse 0.9s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.14); } }
.bud { width: 64px; height: 64px; cursor: pointer; }
.repair { position: absolute; left: 40px; right: 40px; top: 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.repair-label { font: 800 13px var(--f-display); color: var(--grenat); }
.repair-track { width: 100%; height: 12px; border-radius: 6px; background: #FFE3E7; overflow: hidden; box-shadow: inset 0 0 0 2px #fff; }
.repair-fill { display: block; height: 100%; background: var(--menthe-dark); transform-origin: left center; transform: scaleX(0); }
.float-text { position: absolute; left: 0; top: 0; white-space: nowrap; font: 800 16px var(--f-display); color: var(--grenat); text-shadow: 0 2px 0 #fff, 0 0 8px #fff; pointer-events: none; }
.float-text.is-combo { font-size: 19px; color: #9A5A00; }
.float-text.is-good { color: var(--menthe-text); }
.float-text.is-granule { color: #5B3FB8; }
.float-text.is-small { font-size: 12px; color: var(--cacao-2); }
.spark { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--soleil); }
.chunk { position: absolute; left: 0; top: 0; width: 30px; height: 26px; border-radius: 50%; background: var(--grenat); }
.hand { position: absolute; left: 0; top: 0; line-height: 0; filter: drop-shadow(0 3px 3px rgba(58, 29, 42, 0.3)); }
.panel { position: absolute; left: 0; right: 0; top: 0; height: 400px; z-index: 10; border-radius: 32px; background: rgba(255, 249, 246, 0.97); box-shadow: 0 10px 24px rgba(142, 31, 61, 0.12); }
.panel-title { position: absolute; left: 0; right: 0; top: 14px; margin: 0; text-align: center; font: 800 22px/1.1 var(--f-display); color: var(--cacao); }
.panel-hint { position: absolute; left: 22px; right: 22px; top: 44px; margin: 0; text-align: center; font-size: 14px; line-height: 1.3; color: var(--cacao-2); }
.panel-legend { position: absolute; left: 0; right: 0; top: 246px; margin: 0; text-align: center; font-size: 13px; color: var(--cacao-2); }
.ing-chips { position: absolute; left: 14px; right: 14px; top: 76px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ing-chip { min-height: 52px; padding: 4px 8px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 #F3B8C1, 0 6px 14px rgba(142, 31, 61, 0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 15px/1.1 var(--f-display); color: var(--cacao); touch-action: none; }
.ing-chip small { font: 600 11px/1.2 var(--f-body); color: var(--cacao-2); }
.ing-chip.is-dragging { z-index: 3; box-shadow: 0 10px 18px rgba(58, 29, 42, 0.2); }
.ing-chip.is-in { opacity: 0.35; box-shadow: none; }
.ing-chip.is-bad { opacity: 0.4; box-shadow: none; text-decoration: line-through; }
.pot-zone { position: absolute; left: 0; right: 0; top: 262px; display: flex; flex-direction: column; align-items: center; }
.pot { line-height: 0; }
.pot svg { width: 150px; height: 122px; }
.pot-items { position: absolute; top: 82px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 220px; }
.pot-tag { padding: 1px 8px; border-radius: 10px; background: #fff; font: 700 11px var(--f-display); color: #5B3FB8; }
.t-track { position: absolute; left: 40px; width: 280px; top: 158px; height: 60px; border-radius: 30px; background: #FFE3E7; box-shadow: inset 0 0 0 3px #fff; touch-action: none; }
.t-zone { position: absolute; top: 0; bottom: 0; border-radius: 26px; background: rgba(126, 217, 181, 0.85); transition: left 0.3s, width 0.3s; }
.t-zone span { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); white-space: nowrap; font: 800 13px var(--f-display); color: var(--menthe-text); }
.t-marker { position: absolute; left: 0; top: 6px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--lavande-dark); color: #fff; font: 800 18px var(--f-display); box-shadow: 0 4px 0 #6F54C9; will-change: transform; }
.trace-blob { position: absolute; left: 40px; top: 96px; width: 280px; height: 224px; border-radius: 46% 54% 50% 50% / 55% 50% 50% 45%; background: radial-gradient(circle at 40% 35%, #E6DCFF, #C9B6FF 65%, #B39DF5); }
.trace-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.trace-line { fill: none; stroke: #E3A93A; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.trace-dot { position: absolute; left: 0; top: 0; width: 50px; height: 50px; border: 3px solid #fff; border-radius: 50%; background: var(--paille); box-shadow: 0 3px 0 #D9A93B; font: 800 18px var(--f-display); color: var(--cacao); }
.trace-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 8px rgba(255, 200, 87, 0.8); opacity: 0; pointer-events: none; }
.trace-dot.is-next::after { animation: ring 1s ease-out infinite; }
.trace-dot.is-done { background: var(--menthe); box-shadow: 0 3px 0 var(--menthe-dark); }
@keyframes ring { from { opacity: 1; transform: scale(0.9); } to { opacity: 0; transform: scale(1.35); } }
.trace-fibrine { position: absolute; left: 12px; top: 318px; line-height: 0; pointer-events: none; }
.lysis-clot { position: absolute; left: 50px; top: 96px; width: 260px; height: 170px; border-radius: 50% 48% 52% 50% / 55% 55% 45% 45%; background: radial-gradient(circle at 40% 35%, #FF97A6, #E0475F 60%, #C93A52); }
.strand { position: absolute; left: 180px; width: 210px; height: 44px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; touch-action: none; }
.strand-half { flex: 1; height: 12px; border-radius: 6px; background: var(--paille); box-shadow: 0 2px 0 #D9A93B; transition: transform 0.35s, opacity 0.35s; }
.strand.is-cut .strand-half.a { transform: translateX(-26px) rotate(-12deg); opacity: 0; }
.strand.is-cut .strand-half.b { transform: translateX(26px) rotate(12deg); opacity: 0; }
.coach { display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 8px 12px; border-radius: 22px 22px 22px 8px; background: #fff; box-shadow: var(--shadow-panel); }
.coach.is-flash { animation: coach 0.35s var(--ease-pop); }
@keyframes coach { from { transform: scale(0.97); } to { transform: none; } }
.coach-avatar { flex: 0 0 52px; line-height: 0; }
/* Baloo 2 dessine ses accents au-dessus de la ligne : la marge intérieure évite de rogner « É » ou « Ç ». */
.coach-text { margin: 0; padding: 3px 0; font: 600 15.5px/1.3 var(--f-display); color: var(--cacao); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tray { min-height: 72px; display: flex; align-items: center; justify-content: center; }
.tray.is-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tray.is-action { display: block; }
.card-btn { min-height: 70px; padding: 6px; border: 0; border-radius: 18px; background: var(--soleil); box-shadow: 0 5px 0 var(--soleil-dark); font: 700 16px/1.1 var(--f-display); color: var(--cacao); overflow-wrap: anywhere; hyphens: manual; }
.card-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--soleil-dark); }
.tray-progress { font: 800 17px var(--f-display); color: var(--grenat); text-align: center; }
.now-btn { touch-action: none; }

/* ---------- Labo NFS */
.labo-body { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.labo-hint { margin: 0 4px; font: 700 15px/1.3 var(--f-display); color: var(--grenat); }
.patient-card { background: #fff; border-radius: 24px; box-shadow: var(--shadow-panel); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.patient-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.patient-name { margin: 0; font: 800 22px/1.1 var(--f-display); }
.patient-detail { margin: 0; font-size: 14px; color: var(--cacao-2); }
.patient-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nfs { display: flex; flex-direction: column; gap: 6px; }
.nfs-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.95fr) 26px; align-items: center; gap: 6px; min-height: 54px; padding: 6px 10px; border: 0; border-radius: 14px; background: var(--creme); text-align: left; font-size: 15px; color: var(--cacao); }
.nfs-row.no-norms { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 26px; }
.nfs-head { min-height: 0; padding-top: 0; padding-bottom: 0; background: transparent; font-size: 12px; font-weight: 700; color: var(--cacao-2); }
.nfs-label { font-weight: 800; line-height: 1.15; }
.nfs-value { line-height: 1.1; }
.nfs-value strong { font: 800 18px var(--f-display); }
.nfs-value small { font-size: 11px; color: var(--cacao-2); white-space: nowrap; }
.nfs-norm { font-size: 13px; color: var(--cacao-2); line-height: 1.15; }
.nfs-mark { font: 800 22px var(--f-display); text-align: center; line-height: 0; }
.nfs-mark svg { width: 20px; height: 20px; }
.nfs-row.is-abnormal { background: #FFE3E7; box-shadow: inset 0 0 0 2px var(--rubis); }
.nfs-row.is-abnormal .nfs-mark { color: var(--rubis-dark); line-height: 1; }
.nfs-row.is-normal { background: #E3F6EE; }
.nfs-row.is-normal .nfs-mark { color: var(--menthe-dark); }
.nfs-row:disabled { opacity: 1; }
.none-btn { align-self: center; }
.term-choices { margin-top: 2px; }

/* ---------- Boss */
.boss-arena { flex: 0 0 auto; height: clamp(110px, 22vh, 200px); display: grid; place-items: center; }
.boss-caillou { line-height: 0; transform-origin: 50% 90%; transition: transform 0.35s var(--ease-pop); }
.boss-caillou svg { width: clamp(100px, 21vh, 190px); height: auto; }
.crack { fill: none; stroke: #2B1320; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.3s; }
.crack.on { opacity: 1; }
.boss-body { display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }

/* ---------- Personnages : mouvements
   Règle de performance : aucune animation continue à l'intérieur d'un dessin SVG (elle force un redessin à chaque image).
   On anime le dessin entier (couche composée, gratuite) ; les clignements d'yeux sont brefs et déclenchés de temps en temps (js/ui/life.js). */
.float { animation: float 1.6s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.char .blink, .char .bolt { transform-box: fill-box; transform-origin: center; }
.char .bolt { transform-origin: 50% 100%; }
.cast-member.is-speaking.who-caillou { animation: grumble 0.5s linear infinite; }
@keyframes grumble { 25% { transform: scale(1.06) translate(-2px, 1px); } 75% { transform: scale(1.06) translate(2px, -1px); } }
.platelet.flowing, .bud, .token.is-dragging, .ing-chip.is-dragging { will-change: transform; }

/* Qualité basse : on coupe les animations décoratives */
.q-low .cast-member.who-caillou { animation: none; }
.q-low .drift-cells, .q-low .flow-cell { display: none; }
.q-low .stage, .q-low .coach, .q-low .icon-btn, .q-low .tile, .q-low .card-list, .q-low .fiche, .q-low .replay { box-shadow: none; }

/* Animations réduites (réglage ou préférence système) */
.reduce-motion .float, .reduce-motion .cast-member.who-caillou,
.reduce-motion .drift-cells span, .reduce-motion .flow-cell, .reduce-motion .dialog-next .chev,
.reduce-motion .is-pulsing svg, .reduce-motion .trace-dot.is-next::after,
.reduce-motion .collagen.is-target::after, .reduce-motion .boot-dots span { animation: none; }
.reduce-motion .breche-hud.is-danger .gauge-track::after { animation: none; opacity: 1; }
.reduce-motion .drop.on { animation: none; opacity: 0.8; transform: translateY(40px); }
.reduce-motion .cast-member, .reduce-motion .plug, .reduce-motion .switch::after, .reduce-motion .strand-half { transition: none; }

/* Petits écrans en hauteur (360 × 640) */
@media (max-height: 680px) {
  .screen { gap: 8px; padding-top: calc(var(--safe-t) + 8px); padding-bottom: calc(var(--safe-b) + 10px); }
  .dialog { min-height: 112px; }
  .dialog-text { font-size: 17px; }
  .coach { min-height: 62px; }
  .coach-text { font-size: 14.5px; }
  .tray { min-height: 66px; }
  .card-btn { min-height: 64px; font-size: 15px; }
  .tile { min-height: 64px; }
  .btn { min-height: 52px; }
  .btn-xl { min-height: 58px; }
  .quiz-prompt { font-size: 18px; }
  .choice { min-height: 52px; font-size: 16px; }
  .vf-card { min-height: 120px; }
}