/* Infographie pédagogique chaleureuse · V2, d’après la direction fournie. */
:root {
  --creme:#edf1f3; --blush:#e7eeef; --plasma:#ffedb2;
  --cacao:#252d31; --cacao-2:#526166; --rubis:#bd463e; --rubis-dark:#a83a34; --grenat:#91443e;
  --menthe:#d4eeE8; --menthe-dark:#087f78; --menthe-text:#145b53;
  --soleil:#dfb25c; --soleil-dark:#a37828; --paille:#ffe5a0;
  --lavande:#c5b4d7; --lavande-dark:#79638f;
  --f-display:'Segoe UI',system-ui,sans-serif; --f-body:'Segoe UI',system-ui,sans-serif;
  --r-scene:20px; --r-panel:18px; --r-btn:14px;
  --shadow-panel:0 4px 12px #263b4312,0 1px 2px #263b430a;
}
body { background:#dfe6e9; }
.app { box-shadow:0 0 60px #263b431a; }
.screen-title { background:var(--creme); gap:18px; }
.title-top { display:flex; gap:10px; align-items:center; text-align:left; padding:4px 0; flex:none; }
.brand-mark { width:58px; height:58px; border:1px solid #d9c8bc; background:#f5e6d4; border-radius:50%; display:grid; place-items:center; }
.brand-mark svg { width:58px; height:58px; }
.kicker { color:#526166; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 4px; }
.logo { font-size:26px; line-height:1.1; letter-spacing:-.04em; color:#81443d; margin:0; }
.dashboard-body { flex:1; min-height:0; display:flex; flex-direction:column; gap:20px; }
.eyebrow { margin:0 0 8px; font-size:11px; letter-spacing:.13em; font-weight:700; color:#08736d; }
.dashboard-heading h2 { margin:0; font-size:29px; line-height:1.15; letter-spacing:-.035em; white-space:pre-line; }
.dashboard-intro { margin:10px 0 0; color:var(--cacao-2); font-size:14px; max-width:32ch; }
.progress-card { background:#fff; padding:16px; border-radius:16px; box-shadow:var(--shadow-panel); }
.progress-caption { display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.progress-caption span { color:#08736d; font-weight:700; }
.progress-card progress { appearance:none; display:block; width:100%; height:8px; margin:13px 0 9px; border:0; border-radius:8px; overflow:hidden; background:#dce3e5; }
.progress-card progress::-webkit-progress-bar { background:#dce3e5; }
.progress-card progress::-webkit-progress-value { background:#087f78; border-radius:8px; }
.progress-card progress::-moz-progress-bar { background:#087f78; }
.progress-card p { margin:0; color:var(--cacao-2); font-size:11px; }
.learning-path { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.path-step { display:flex; align-items:center; gap:10px; background:#fff; padding:12px; border-radius:15px; border:1px solid #dce3e5; box-shadow:var(--shadow-panel); }
.path-step.is-current { border-left:4px solid #087f78; padding-left:9px; }
.path-art { display:grid; place-items:center; border-radius:12px; background:#f2eee7; width:44px; height:44px; flex-shrink:0; }
.path-number { font-size:9px; letter-spacing:.08em; color:#526166; font-weight:700; }
.path-step h3 { font-size:14px; margin:1px 0 2px; line-height:1.25; }
.path-step p { font-size:11px; margin:0; color:#526166; }
.path-status { margin-left:auto; color:#08736d; font-weight:700; }
.learning-note { margin:0; color:#526166; font-size:11px; text-align:center; }
.title-actions { gap:14px; flex:none; }
.title-actions .btn-xl { min-height:50px; font-size:16px; }
.tiles { padding-top:9px; border-top:1px solid #d5dfe2; }
.tile { min-height:50px; border-radius:0; background:transparent; box-shadow:none; font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.tile-icon { color:var(--cacao); }
.tile-icon svg { width:22px; height:22px; }
.btn-primary,.btn-secondary,.btn-soft { box-shadow:var(--shadow-panel); border:1px solid #dae2e4; }
.btn-primary { color:#fff; border-color:var(--rubis); background:var(--rubis); }
.btn-secondary { color:#08736d; background:#fff; border-color:#9dbfb9; }
.btn-soft { background:#edf3f2; }
.btn:active:not(:disabled),.choice:active:not(:disabled) { transform:translateY(1px); box-shadow:none; }
.btn,.icon-btn,.card-btn,.choice,.chip-item { border-radius:12px; }
.pill { border-radius:10px; font-size:12px; box-shadow:none; background:transparent; }
.story-top .pill { font-weight:700; color:#526166; flex:1; justify-content:flex-start; }
.story-top { flex:none; }
.story-stage { background:#fff0c0; }
.dialog { border-radius:18px; padding:16px 18px 8px; border:1px solid #dce3e5; gap:8px; }
.dialog-name { color:#08736d; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.dialog-text,.dialog.is-narration .dialog-text { font:400 16px/1.5 var(--f-body); }
.dialog-next { color:#08736d; font-size:14px; }
.dialog-next .chev { animation:none; }
.has-question .story-stage { display:none; }
.has-question .dialog { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.has-question .dialog-text { padding-bottom:14px; border-bottom:1px solid #dde5e6; }
.story-question { display:flex; flex-direction:column; gap:16px; margin:8px 0; }
.quiz-prompt { font-size:18px; line-height:1.35; }
.choice { background:#fff; border:1px solid #cbd6d9; box-shadow:0 2px 4px #263b430d; font-weight:500; font-size:15px; line-height:1.4; padding:12px; }
.choice.is-correct { background:#087f78; color:#fff; box-shadow:none; border-color:#087f78; }
.choice.is-wrong { color:#7c2924; background:#fbe6e1; border-color:#cf655a; box-shadow:none; }
.choice:disabled:not(.is-correct):not(.is-wrong) { opacity:.75; }
.feedback { font-size:14px; line-height:1.5; border-radius:12px; gap:8px; border-left:3px solid #087f78; }
.feedback.is-ok { background:#e2f1ec; color:#174e44; }
.feedback.is-ko { background:#fbe6e1; color:#722c27; border-color:#bd463e; }
.feedback strong { font-size:14px; }
.clinical-link { border-top:1px solid currentColor; padding-top:8px; }
.source { font-size:11px; }
.reference-list { padding-left:18px; font-size:13px; display:grid; gap:10px; }
.reference-list a { display:flex; align-items:center; min-height:44px; color:#086b67; text-underline-offset:3px; }
.world-art { background:linear-gradient(155deg,#fff4cc,#f5d78f); }
.world-card,.replay,.patient-card,.nfs-table,.vf-card { border-radius:16px; }
.world-card.is-locked,.replay.is-locked { background:#e5ebed; }
.lumen { background:linear-gradient(180deg,#fff0bf,#f7df98); }
.card-btn { background:#fff; border:1px solid #cbd6d9; border-top:3px solid #087f78; box-shadow:var(--shadow-panel); font-size:14px; font-weight:600; }
.card-btn:active { box-shadow:none; transform:translateY(1px); }
.boss-arena { max-height:126px; background:#e2e9ea; border-radius:18px; }
.boss-caillou svg { width:120px; height:120px; }
.bg-sang .cast-member svg { animation-duration:5s; }
.cast-1 .cast-member { width:min(48%,26vh); }
.bg-sang .cast-2 .cast-member { width:min(38%,24vh); }
.bg-sang .cast-3 .cast-member { width:min(28%,20vh); }
@media(max-height:740px) {
  .screen-title { gap:12px; }
  .dashboard-body { gap:14px; }
  .dashboard-heading h2 { font-size:25px; }
  .path-step { padding-top:8px; padding-bottom:8px; }
  .progress-card { padding:13px; }
}
@media(prefers-reduced-motion:reduce) { .bg-sang .cast-member svg { animation:none; } }
.module-preview { border:1px solid #c4d6d3; background:#e0ede9; border-radius:16px; padding:14px; }
.module-preview p:last-child { font-size:11px; color:#526166; margin:10px 0 0; }
.module-entry { font-size:15px; }
.sampling-body { display:flex; flex-direction:column; gap:16px; }
.sampling-body .lead { font-size:16px; }
.sampling-body .eyebrow { margin:0; }
.scope-note { margin:0; padding:12px 14px; border-left:3px solid #b88e37; background:#fff3d4; border-radius:10px; font-size:13px; line-height:1.5; }
.module-progress { width:100%; height:7px; accent-color:#087f78; }
.sampling-objectives { font-size:15px; display:grid; gap:10px; padding-left:22px; }
.tube-rack { display:flex; gap:22px; justify-content:center; padding:20px 6px; background:#fff; border-radius:16px; }
.tube-symbol { display:inline-flex; position:relative; width:23px; height:52px; border:2px solid #a4b4bc; border-radius:5px 5px 10px 10px; flex-shrink:0; background:linear-gradient(to bottom,#fafdff 35%,#eeaf84 36%); }
.tube-symbol::before { content:''; position:absolute; top:-3px; left:-3px; right:-3px; height:13px; border-radius:3px; background:var(--tube-color); border:1px solid #0003; }
.tube-symbol span { position:absolute; top:19px; left:3px; right:3px; height:16px; background:#fff; }
.tube-card { display:flex; gap:15px; padding:16px; background:#fff; border:1px solid #dae2e4; border-radius:16px; align-items:flex-start; }
.tube-card h2 { font-size:16px; margin:0 0 8px; }
.tube-card p { font-size:13px; margin:6px 0; }
.sampling-body .choice .tube-symbol,.sampling-body .chip-item .tube-symbol { width:17px; height:37px; margin-right:4px; }
.sampling-score { padding:20px; background:#dcedE7; border-radius:16px; display:grid; gap:6px; }
.sampling-score strong { font-size:32px; color:#086b67; }
.sampling-score span { font-size:14px; }
.sampling-actions { display:flex; flex-direction:column; gap:8px; }