:root{
  --ink:#1B2430;
  --ink-2:#252F3D;
  --paper:#F6F4EE;
  --card:#FFFFFF;
  --line:#DFDACD;
  --line-strong:#C9C2AF;
  --muted:#6C7480;
  --seal:#B23A2E;
  --seal-bg:#F6E4E1;
  --steel:#3E6259;
  --steel-bg:#E4EEEA;
  --amber:#A8752E;
  --amber-bg:#F3E7D3;
  --accent:#1B2430;
  --accent-hover:#252F3D;
  --accent-ink:#EDEAE0;
  --font-display:'Source Serif 4', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

/* Palette sombre : --accent* reste volontairement identique (le "bleu marine" de marque ne
   s'inverse pas — sidebar/boutons d'accent gardent le même look dans les deux thèmes), seules
   les teintes de surface/texte changent. Comme presque tout le CSS lit ces variables, le thème
   sombre ne demande pas de dupliquer les règles ailleurs. */
:root[data-theme="dark"]{
  --ink:#E7E4DA;
  --ink-2:#F2EFE6;
  --paper:#14181D;
  --card:#1D232B;
  --line:#2C333B;
  --line-strong:#3C4650;
  --muted:#8B93A0;
  --seal:#E2897C;
  --seal-bg:#3B2320;
  --steel:#7FC2A9;
  --steel-bg:#1D2E28;
  --amber:#D9A860;
  --amber-bg:#3A2E17;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
}

/* TABLET SHELL — l'ambiance "bureau" autour de l'appareil reste volontairement fixe (ni
   claire ni sombre) : dans la vraie vie, la pièce ne change pas de couleur quand on bascule
   le thème de l'écran qu'on regarde. Seul l'intérieur de l'écran (.tablet-screen) lit les
   variables --ink/--paper/etc. et suit donc le thème clair/sombre. */
.tablet-stage{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:26px;
  background:radial-gradient(ellipse at 50% 0%, #3b414a 0%, #202327 55%, #17191c 100%);
}
.tablet-device{
  position:relative;
  width:min(1180px, 94vw);
  height:min(840px, 92vh);
  background:linear-gradient(155deg, #2c2f34, #1a1c1f);
  border-radius:42px;
  padding:20px 20px 44px;
  box-shadow:0 50px 90px -25px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.tablet-cam{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;
  background:#050505;
  box-shadow:0 0 0 3px rgba(255,255,255,0.05);
}
.tablet-home-btn{
  position:absolute;bottom:9px;left:50%;transform:translateX(-50%);
  width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #565b63, #1d2024 75%);
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;padding:0;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.18), 0 1px 3px rgba(0,0,0,0.5);
}
.tablet-home-btn:hover{filter:brightness(1.2);}
.tablet-home-btn:active{filter:brightness(0.85);}

.tablet-screen{
  width:100%;height:100%;
  background:var(--paper);
  border-radius:24px;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3);
}

/* STATUS BAR */
.status-bar{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px;
  border-bottom:0.5px solid var(--line);
  background:var(--card);
}
.status-brand{font-family:var(--font-mono);font-size:12px;letter-spacing:2px;color:var(--muted);}
.status-clock{font-family:var(--font-mono);font-size:13px;color:var(--ink);}
.status-icons{display:flex;align-items:center;gap:4px;}
.status-toggle{
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--muted);cursor:pointer;
  padding:7px;border-radius:8px;
}
.status-toggle:hover{background:var(--paper);color:var(--ink);}
.status-toggle svg{width:16px;height:16px;}
.status-toggle.muted{color:var(--line-strong);}

/* HOME SCREEN */
.home-screen{flex:1;overflow-y:auto;padding:44px 30px;display:flex;flex-direction:column;align-items:center;}
.home-screen.hidden{display:none;}
.home-header{text-align:center;margin-bottom:40px;}
.home-header h1{font-family:var(--font-display);font-size:32px;font-weight:600;margin:0 0 4px;}
.home-header p{color:var(--muted);font-size:13px;margin:0;}
.app-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:30px;max-width:640px;width:100%;
}
.app-icon{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:none;cursor:pointer;
  font-family:var(--font-body);color:var(--ink);padding:6px;
}
.app-icon-glyph{
  width:68px;height:68px;border-radius:19px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 8px 16px -8px rgba(0,0,0,0.45);
  transition:transform .15s ease;
}
.app-icon:hover .app-icon-glyph{transform:translateY(-3px) scale(1.05);}
.app-icon:active .app-icon-glyph{transform:translateY(0) scale(0.97);}
.app-icon-glyph svg{width:30px;height:30px;}
.app-icon-label{font-size:12.5px;font-weight:500;text-align:center;}
.app-icon-glyph.tone-a{background:linear-gradient(160deg, var(--accent), var(--accent-hover));}
.app-icon-glyph.tone-b{background:linear-gradient(160deg, #4C7A6C, #2E4C43);}
.app-icon-glyph.tone-c{background:linear-gradient(160deg, #5C82AC, #385876);}
.app-icon-glyph.tone-d{background:linear-gradient(160deg, #C08B3E, #8C6329);}
.app-icon-glyph.tone-e{background:linear-gradient(160deg, #C24C3E, #8C3527);}
.app-icon-glyph.tone-f{background:linear-gradient(160deg, #7A7F87, #52565C);}

.exam-checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.exam-item{
  display:flex;align-items:center;gap:8px;font-size:12.5px;
  border:0.5px solid var(--line);border-radius:8px;padding:12px 14px;
  background:var(--card);color:var(--ink);cursor:pointer;text-align:left;
  font-family:var(--font-body);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.exam-item:hover{border-color:var(--line-strong);background:var(--paper);}
.exam-item.done{border-color:var(--steel);background:var(--steel-bg);color:var(--steel);}
.exam-item.fail{border-color:var(--seal);background:var(--seal-bg);color:var(--seal);}
.exam-item:disabled{opacity:0.5;cursor:not-allowed;}
.exam-item:disabled:hover{border-color:var(--line);background:var(--card);}

.report-btn-row{display:flex;flex-wrap:wrap;gap:8px;}

.morgue-add-form{margin-top:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.morgue-add-form select{min-width:160px;}

.report-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:12px;color:var(--muted);}
.report-field-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.report-field textarea{
  font-family:var(--font-body);font-size:13px;padding:8px 10px;
  border:0.5px solid var(--line-strong);border-radius:6px;background:var(--paper);color:var(--ink);
  resize:vertical;min-height:60px;
}

/* MAIN (contenu d'une "app" ouverte, à l'intérieur de l'écran) */
.main{flex:1;overflow-y:auto;padding:30px 36px 44px;}
.main.hidden{display:none;}
.view{display:none;}
.view.active{display:block;animation:viewFadeIn .25s ease;}
@keyframes viewFadeIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

.view-head{margin-bottom:24px;}
.view-head h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:28px;
  margin:0 0 6px;
}
.view-sub{color:var(--muted);font-size:13px;margin:0;}

.back-link{
  background:none;border:none;cursor:pointer;
  color:var(--muted);font-size:12px;
  display:flex;align-items:center;gap:6px;
  padding:0;margin-bottom:10px;
  font-family:var(--font-body);
}
.back-link svg{width:14px;height:14px;}

.detail-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.detail-actions{display:flex;gap:8px;flex-shrink:0;}
.btn-danger{color:var(--seal);border-color:var(--seal);}
.btn-danger:hover{background:var(--seal-bg);}

/* Bandeau "Prochaine étape" — repère unique et immédiat pour un aller-retour rapide entre le
   jeu et le site : pas besoin de relire toute la fiche pour savoir quoi faire. */
.next-action-banner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--accent);color:var(--accent-ink);
  border-radius:12px;padding:16px 20px;margin-bottom:20px;
}
.next-action-banner span{font-family:var(--font-display);font-size:15px;font-weight:600;}
.next-action-banner .btn{background:var(--accent-ink);color:var(--accent);border-color:var(--accent-ink);}
.next-action-banner .btn:hover{opacity:0.88;}

/* Carte "Reprendre" — dernier dossier ouvert, mémorisé pour ne rien perdre si l'onglet a été
   fermé entre deux sessions de jeu. */
.resume-card{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--card);border:0.5px solid var(--line-strong);border-radius:12px;
  padding:14px 18px;margin-bottom:26px;max-width:420px;width:100%;
}
.resume-card span{font-size:13px;font-weight:500;}

/* METRICS */
.metric-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;margin-bottom:24px;
}
.metric-card{
  background:var(--card);
  border:0.5px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
}
.metric-label{font-size:12px;color:var(--muted);margin-bottom:6px;}
.metric-value{font-family:var(--font-display);font-size:26px;font-weight:600;}

/* PANEL */
.panel{
  background:var(--card);
  border:0.5px solid var(--line);
  border-radius:12px;
  padding:20px 22px;
  margin-bottom:20px;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.panel-head h2{
  font-family:var(--font-display);
  font-size:16px;font-weight:600;margin:0;
}
.panel-note{font-size:12px;color:var(--muted);}

/* BUTTONS — cibles agrandies pour un usage tactile (tablette) */
.btn{
  font-family:var(--font-body);
  font-size:13px;font-weight:500;
  padding:11px 18px;
  border-radius:8px;
  border:0.5px solid var(--line-strong);
  background:var(--card);
  color:var(--ink);
  cursor:pointer;
  min-height:40px;
}
.btn:hover{background:var(--paper);}
.btn-accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.btn-accent:hover{background:var(--accent-hover);}
.btn-sm{padding:8px 14px;font-size:12.5px;min-height:34px;}
.btn:disabled{opacity:0.45;cursor:not-allowed;}

/* DOSSIER TABLE / CASE TABS */
.dossier-table{display:flex;flex-direction:column;gap:10px;}
.case-row{
  display:grid;
  grid-template-columns:100px 1fr 150px 90px 100px;
  align-items:center;gap:10px;
  padding:16px 18px;
  border:0.5px solid var(--line);
  border-radius:10px;
  cursor:pointer;
}
.case-row:hover{border-color:var(--line-strong);background:var(--paper);}
.case-id{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.case-name{font-weight:500;font-size:13px;}
.case-type{color:var(--muted);font-size:12px;}
.case-time{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.stamp{
  font-family:var(--font-mono);
  font-size:10px;font-weight:500;
  letter-spacing:0.5px;
  padding:3px 8px;border-radius:4px;
  width:fit-content;
  transform:rotate(-2deg);
  border:1px solid currentColor;
}
.stamp-urgent{color:var(--seal);background:var(--seal-bg);}
.stamp-encours{color:var(--muted);background:var(--paper);}
.stamp-nouveau{color:var(--steel);background:var(--steel-bg);}
.stamp-attente{color:var(--amber);background:var(--amber-bg);}
.stamp-termine{color:var(--muted);background:var(--paper);}

/* FORMS */
.form-panel{max-width:640px;}
.form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.form-grid label{
  display:flex;flex-direction:column;gap:5px;
  font-size:12px;color:var(--muted);
  min-width:0;
}
.form-grid select,.form-grid input{width:100%;min-width:0;}
input,select{
  font-family:var(--font-body);
  font-size:14px;
  padding:11px 13px;
  border:0.5px solid var(--line-strong);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  min-height:40px;
}
input:focus,select:focus{outline:2px solid var(--ink);outline-offset:1px;}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}

/* Fiche dossier : colonne latérale persistante (état du dossier en un coup d'œil) + zone
   principale à onglets (le travail actif) — plutôt qu'un long empilement vertical de panneaux. */
.detail-layout{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start;}
.detail-sidebar{position:sticky;top:20px;display:flex;flex-direction:column;gap:20px;}
.detail-sidebar #timeline{max-height:280px;overflow-y:auto;}
.detail-tabs{display:flex;gap:4px;background:var(--paper);border:0.5px solid var(--line);border-radius:8px;padding:4px;margin-bottom:20px;}
.detail-tab-btn{
  flex:1;padding:10px 14px;border-radius:6px;border:0;background:transparent;color:var(--muted);
  font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,color .15s;
}
.detail-tab-btn:hover{color:var(--ink);}
.detail-tab-btn.active{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,0.08);}
.detail-tab-panel{display:none;}
.detail-tab-panel.active{display:block;}

/* BODY WIDGET — colonne unique : le widget vit désormais dans la sidebar (340px), trop étroite
   pour les deux colonnes côte à côte utilisées quand il occupait la pleine largeur de la page. */
.body-widget{display:flex;flex-direction:column;gap:20px;}
.body-col{display:flex;flex-direction:column;align-items:center;gap:8px;}
.body-svg{width:100%;max-width:260px;}
.body-svg [data-zone]{
  fill:var(--paper);stroke:var(--line-strong);stroke-width:1.5;cursor:pointer;
}
.body-svg [data-zone]:hover{stroke:var(--ink);}
.body-svg [data-zone].selected{stroke:var(--steel);stroke-width:2;}
.body-svg [data-zone].injured{fill:var(--seal-bg);stroke:var(--seal);}
.body-hint{font-size:11px;color:var(--muted);text-align:center;}

/* Mannequin avant/dos : les deux vues restent dans le DOM, seule .showing-back bascule
   laquelle est visible — voir mannequinSVG()/bindMannequinToggle() dans app.js. */
.mg-mannequin-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;width:100%;}
.mg-view-toggle{
  align-self:center;font-family:var(--font-body);font-size:11px;font-weight:500;
  padding:4px 12px;border-radius:999px;border:0.5px solid var(--line-strong);
  background:var(--card);color:var(--ink);cursor:pointer;
}
.mg-view-toggle:hover{border-color:var(--ink);}
.mg-side-markers{
  display:flex;justify-content:space-between;width:100%;max-width:260px;
  font-size:10px;font-weight:600;letter-spacing:0.06em;color:var(--muted);
  padding:0 4px;
}
.mg-mannequin.view-back{display:none;}
.mg-mannequin-wrap.showing-back .view-front{display:none;}
.mg-mannequin-wrap.showing-back .view-back{display:block;}

/* Mini-jeu d'association (examen "Identification de l'arme présumée") */
.mg-match-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px;}
.mg-match-col{display:flex;flex-direction:column;gap:8px;}
.mg-match-chip{
  font-family:var(--font-body);font-size:12px;text-align:left;padding:10px 12px;border-radius:8px;
  border:0.5px solid var(--line-strong);background:var(--card);color:var(--ink);cursor:pointer;
  transition:background .15s,border-color .15s;
}
.mg-match-chip.active{border-color:var(--steel);border-width:2px;}
.mg-match-chip.done{background:var(--steel-bg);border-color:var(--steel);color:var(--steel);cursor:default;}
.mg-match-chip.wrong{background:var(--seal-bg);border-color:var(--seal);}
.mg-match-chip:disabled{cursor:default;opacity:0.85;}
.mg-weapon-slot{display:flex;align-items:center;justify-content:center;padding:8px;}
.mg-weapon-shape{width:56px;height:56px;}
.mg-weapon-shape.solid *{fill:var(--ink);stroke:none;}
.mg-weapon-shape.outline *{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:4 3;}
.mg-match-chip.active .mg-weapon-shape.solid *{fill:var(--steel);}
.mg-match-chip.active .mg-weapon-shape.outline *{stroke:var(--steel);}
.mg-match-chip.done .mg-weapon-shape *{fill:var(--steel);stroke:none;}
.mg-match-chip.wrong .mg-weapon-shape.outline *{stroke:var(--seal);}
.hint-box{
  border:0.5px dashed var(--line-strong);border-radius:8px;
  padding:16px;font-size:12px;color:var(--muted);text-align:center;
}
.injury-form{display:flex;flex-direction:column;gap:10px;}
.injury-zone-label{font-size:13px;font-weight:500;}
.range-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);}
.range-row input{flex:1;}
.range-out{font-size:12px;font-weight:500;color:var(--ink);min-width:56px;}
.injury-list{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.injury-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;border:0.5px solid var(--line);border-radius:6px;font-size:12px;
}
.injury-row .sev{color:var(--seal);font-family:var(--font-mono);}

/* TIMELINE */
.timeline{display:flex;flex-direction:column;gap:0;}
.tl-row{display:grid;grid-template-columns:70px 16px 1fr;gap:10px;padding:6px 0;}
.tl-time{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.tl-dot-col{display:flex;flex-direction:column;align-items:center;}
.tl-dot{width:8px;height:8px;border-radius:50%;background:var(--steel);margin-top:4px;}
.tl-line{flex:1;width:1px;background:var(--line-strong);}
.tl-label{font-size:13px;padding-bottom:2px;}

/* PARCOURS GUIDÉ (Décès/Constatation) — même langage visuel que .scene-stage (mode scène
   médico-légal), classes propres pour ne pas coupler les deux fonctionnalités. */
.workflow-stage{border:0.5px solid var(--line);border-radius:8px;margin-bottom:12px;overflow:hidden;}
.workflow-stage summary{
  font-family:var(--font-display);font-size:14px;font-weight:600;
  padding:12px 16px;cursor:pointer;background:var(--paper);color:var(--ink);
}
.workflow-stage summary::-webkit-details-marker{display:none;}
.workflow-stage summary::before{content:'▸ ';color:var(--muted);}
.workflow-stage[open] summary::before{content:'▾ ';}
.workflow-stage-badge{color:var(--steel);}
.workflow-stage-body{padding:14px 16px;}
.workflow-stage-body p{margin:0 0 8px;font-size:13px;}

/* MORGUE CELLS */
.cell-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.cell{
  border:0.5px solid var(--line-strong);border-radius:8px;
  padding:12px;font-size:12px;
}
.cell-id{font-family:var(--font-mono);font-weight:500;margin-bottom:6px;}
.cell.occupied{background:var(--steel-bg);border-color:var(--steel);}
.cell.free{background:var(--paper);color:var(--muted);}
.cell-meta{color:var(--muted);font-size:11px;margin-top:4px;}

/* EVIDENCE */
.evidence-list{display:flex;flex-direction:column;gap:8px;}
.evidence-row{
  border:0.5px solid var(--line);border-radius:8px;padding:12px 14px;
  display:grid;grid-template-columns:110px 1fr 140px;gap:10px;align-items:center;font-size:12px;
}
.ev-tag{font-family:var(--font-mono);font-weight:500;}
.ev-chain{color:var(--muted);font-size:11px;}

/* PHOTOS (examen médico-légal) */
.photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.photo-thumb-wrap{position:relative;}
.photo-thumb{
  display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;
  border:0.5px solid var(--line-strong);
}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-delete{
  position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;border:0.5px solid var(--line-strong);
  background:var(--card);color:var(--seal);font-size:12px;cursor:pointer;
  opacity:0.85;
}
.photo-delete:hover{opacity:1;border-color:var(--seal);background:var(--seal-bg);}

/* WORKFLOW (parcours décès) */
.workflow-flags{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;}
.workflow-flags label{
  display:flex;flex-direction:column;gap:5px;
  font-size:12px;color:var(--muted);min-width:160px;
}

/* REPORT EDITOR */
.report-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
.report-layout .form-panel{max-width:none;}
.report-preview-panel{position:sticky;top:20px;}
.report-preview{
  width:100%;min-height:420px;resize:vertical;
  font-family:var(--font-mono);font-size:12px;line-height:1.6;
  padding:12px 14px;border:0.5px solid var(--line-strong);border-radius:8px;
  background:var(--paper);color:var(--ink);white-space:pre-wrap;
}
.report-preview-formatted{
  min-height:420px;font-size:13px;line-height:1.7;
  padding:12px 14px;border:0.5px solid var(--line-strong);border-radius:8px;
  background:var(--paper);color:var(--ink);overflow-wrap:break-word;
}
.report-preview-formatted h4{font-family:var(--font-display);font-size:14px;margin:14px 0 6px;}
.report-preview-formatted h4:first-child{margin-top:0;}

.preview-toggle{display:flex;gap:4px;background:var(--paper);border:0.5px solid var(--line);border-radius:6px;padding:3px;}
.preview-toggle .toggle-btn{
  border:none;background:none;color:var(--muted);font-family:var(--font-body);
  font-size:11px;padding:5px 10px;border-radius:4px;cursor:pointer;
}
.preview-toggle .toggle-btn.active{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,0.08);}

.report-progress{margin-bottom:16px;}
.report-progress-track{height:6px;border-radius:3px;background:var(--paper);border:0.5px solid var(--line-strong);overflow:hidden;}
.report-progress-fill{height:100%;width:0;background:var(--steel);transition:width .3s ease;}
.report-progress-row{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;}
#autosave-status{color:var(--steel);font-style:italic;}

.report-section{border:0.5px solid var(--line);border-radius:8px;margin-bottom:14px;overflow:hidden;}
.report-section summary{
  font-family:var(--font-display);font-size:14px;font-weight:600;
  padding:10px 14px;cursor:pointer;background:var(--paper);color:var(--ink);
  list-style:none;
}
.report-section summary::-webkit-details-marker{display:none;}
.report-section summary::before{content:'▸ ';color:var(--muted);}
.report-section[open] summary::before{content:'▾ ';}
.report-section .report-field{padding:0 14px;}
.report-section .report-field:first-of-type{margin-top:14px;}
.report-section .report-field:last-of-type{margin-bottom:14px;}

/* MODE SCÈNE (examen médico-légal) — même langage visuel que .report-section, en propre pour
   ne pas coupler deux fonctionnalités par un nom de classe partagé. */
.scene-stage{border:0.5px solid var(--line);border-radius:8px;margin-bottom:12px;overflow:hidden;}
.scene-stage summary{
  font-family:var(--font-display);font-size:14px;font-weight:600;
  padding:12px 16px;cursor:pointer;background:var(--paper);color:var(--ink);
  list-style:none;
}
.scene-stage summary::-webkit-details-marker{display:none;}
.scene-stage summary::before{content:'▸ ';color:var(--muted);}
.scene-stage[open] summary::before{content:'▾ ';}
.scene-stage-badge{color:var(--steel);}
.scene-stage-body{padding:14px 16px;}
.scene-stage-body p{margin:0 0 8px;font-size:13px;}
.scene-stage-body .exam-checklist{margin-top:4px;}

/* MINI-JEUX */
.minigame-overlay{
  position:fixed;inset:0;background:rgba(27,36,48,0.55);
  display:flex;align-items:center;justify-content:center;
  z-index:50;padding:20px;
}
.minigame-box{
  background:var(--card);border-radius:12px;border:0.5px solid var(--line);
  padding:24px 26px;max-width:420px;width:100%;position:relative;
}
.minigame-close{
  position:absolute;top:8px;right:10px;background:none;border:none;
  font-size:22px;line-height:1;color:var(--muted);cursor:pointer;
}
.minigame-box h3{font-family:var(--font-display);font-size:17px;margin:0 0 8px;}
.minigame-desc{font-size:12px;color:var(--muted);margin:0 0 16px;line-height:1.5;}
.minigame-result{margin-top:14px;padding:10px 12px;border-radius:8px;font-size:12px;font-weight:500;text-align:center;animation:resultPop .25s ease;}
@keyframes resultPop{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}
.minigame-result.ok{background:var(--steel-bg);color:var(--steel);}
.minigame-result.fail{background:var(--seal-bg);color:var(--seal);}

/* Étape "observation + confiance" (examens de labo médico-légaux) */
.mg-textarea{
  width:100%;min-height:90px;resize:vertical;
  font-family:var(--font-body);font-size:13px;padding:10px 12px;
  border:0.5px solid var(--line-strong);border-radius:8px;
  background:var(--paper);color:var(--ink);margin-bottom:12px;
}
.mg-textarea:disabled{opacity:0.5;}
.confidence-picker{display:flex;flex-wrap:wrap;gap:6px;}
.confidence-btn{
  font-family:var(--font-mono);font-size:11px;padding:6px 12px;border-radius:20px;
  border:0.5px solid var(--line-strong);background:var(--card);color:var(--muted);cursor:pointer;
}
.confidence-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}

.mg-track{position:relative;height:34px;border:0.5px solid var(--line-strong);border-radius:8px;background:var(--paper);margin-bottom:14px;overflow:hidden;}
.mg-zone{position:absolute;top:0;bottom:0;background:var(--steel-bg);border-left:1px solid var(--steel);border-right:1px solid var(--steel);}
.mg-cursor{position:absolute;top:0;bottom:0;width:3px;background:var(--seal);transform:translateX(-50%);}

.mg-dna-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px;}
.mg-swab{
  height:60px;border-radius:8px;border:0.5px solid var(--line-strong);
  background:var(--paper);cursor:pointer;transition:background .15s;padding:0;
}
.mg-swab.lit{background:var(--steel);border-color:var(--steel);}

.mg-fp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px;}
.mg-fp-card{
  height:56px;font-size:20px;border-radius:8px;border:0.5px solid var(--line-strong);
  background:var(--paper);cursor:pointer;color:var(--ink);
}
.mg-fp-card.flipped{background:var(--card);border-color:var(--ink);}
.mg-fp-card.matched{background:var(--steel-bg);border-color:var(--steel);color:var(--steel);}

.mg-petri{
  position:relative;width:100%;max-width:260px;aspect-ratio:1;margin:0 auto 10px;
  border-radius:50%;border:3px solid var(--line-strong);
  background:radial-gradient(circle at 50% 45%, var(--card) 0%, var(--paper) 100%);
  overflow:hidden;
}
.mg-colony{
  position:absolute;width:22px;height:22px;border-radius:50%;padding:0;
  background:var(--amber);border:1px solid var(--amber);
  transform:translate(-50%,-50%);cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.mg-colony:hover{transform:translate(-50%,-50%) scale(1.15);}
.mg-colony.gone{opacity:0;transform:translate(-50%,-50%) scale(0.2);pointer-events:none;}

.mg-hold-list{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}
.mg-hold-item{
  display:grid;grid-template-columns:1fr 90px auto;align-items:center;gap:10px;
  border:0.5px solid var(--line);border-radius:8px;padding:10px 12px;
}
.mg-hold-item.done{border-color:var(--steel);background:var(--steel-bg);}
.mg-hold-label{font-size:12px;}
.mg-hold-bar{height:8px;border-radius:4px;background:var(--paper);border:0.5px solid var(--line-strong);overflow:hidden;}
.mg-hold-fill{height:100%;width:0;background:var(--steel);transition:width .03s linear;}

.mg-mannequin{width:100%;max-width:260px;display:block;margin:0 auto 14px;}
.mg-mannequin [data-zone].reveal{fill:var(--amber-bg);stroke:var(--amber);}
.mg-mannequin [data-zone].done{fill:var(--steel-bg);stroke:var(--steel);}
.mg-mannequin [data-zone].wrong{fill:var(--seal-bg);stroke:var(--seal);}
.mg-mannequin [data-zone].locked{cursor:default;}

.mg-incision-svg{width:100%;max-width:220px;display:block;margin:0 auto 14px;}
.mg-torso{fill:var(--paper);stroke:var(--line-strong);stroke-width:2;}
.mg-incision-point{fill:var(--card);stroke:var(--line-strong);stroke-width:2;cursor:pointer;transition:fill .15s,stroke .15s;}
.mg-incision-point:hover{stroke:var(--ink);}
.mg-incision-point.done{fill:var(--steel);stroke:var(--steel);}
.mg-incision-point.wrong{fill:var(--seal);stroke:var(--seal);}
.mg-incision-cut{stroke:var(--seal);stroke-width:3;stroke-linecap:round;}
.mg-organ-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.mg-organ-row button:disabled{background:var(--steel-bg);border-color:var(--steel);color:var(--steel);opacity:1;}

.mg-compare-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px;}
.mg-compare-label{font-size:11px;color:var(--muted);text-align:center;margin-bottom:6px;}
.mg-compare-grid{display:grid;gap:4px;}
.mg-compare-cell{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:14px;border-radius:6px;border:0.5px solid var(--line-strong);
  background:var(--paper);color:var(--ink);padding:0;
}
button.mg-compare-cell{cursor:pointer;}
button.mg-compare-cell.done{background:var(--steel-bg);border-color:var(--steel);color:var(--steel);}
button.mg-compare-cell.wrong{background:var(--seal-bg);border-color:var(--seal);color:var(--seal);}

/* CONFETTI (succès génération Google Doc) */
.confetti-piece{
  position:fixed;width:7px;height:12px;pointer-events:none;z-index:200;
  animation:confettiFall 1s ease-in forwards;
}
@keyframes confettiFall{
  to{transform:translate(var(--dx,0),140px) rotate(360deg);opacity:0;}
}

@media (max-width:800px){
  .tablet-stage{padding:0;}
  .tablet-device{width:100vw;height:100vh;border-radius:0;padding:0 0 34px;}
  .tablet-cam{display:none;}
  .tablet-screen{border-radius:0;}
  .main{padding:20px;}
  .home-screen{padding:30px 20px;}
  .form-grid,.report-layout,.mg-compare-wrap,.detail-layout{grid-template-columns:1fr;}
  .detail-sidebar{position:static;}
  .metric-row{grid-template-columns:repeat(2,1fr);}
}