/* SQL Hospital — feuille de style. Un seul thème clair, lisible au vidéoprojecteur. */
:root{
  --fond:#e7f2ef; --carte:#fff; --texte:#17202a; --doux:#5b6875; --bord:#d5e2de;
  --teal:#0f766e; --teal-fonce:#0b5a54; --teal-clair:#d6ecea;
  --console:#1e2a33; --console-texte:#e8eef2;
  --ok-f:#e6f6e9; --ok-t:#1d6b2f; --ko-f:#fdeaea; --ko-t:#a11d1d; --info-f:#e8f0fd; --info-t:#1f4fa3;
  --hint-f:#fff5d6; --hint-t:#7a5200;
  --kw:#7cc4ff; --str:#ffb86b; --num:#c3e88d;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fond); color:var(--texte); font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; min-height:100vh; display:flex; flex-direction:column}
a{color:var(--teal)}
button{font:inherit; cursor:pointer}
[hidden]{display:none !important}

/* --- barre du haut ------------------------------------------------------- */
.top{background:var(--teal); color:#fff; display:flex; align-items:center; gap:18px; padding:10px 20px; flex-wrap:wrap}
.top h1{margin:0; font-size:20px; letter-spacing:.02em; display:flex; align-items:center; gap:8px}
.top h1 img{width:34px; height:34px; object-fit:contain}
.top .sub{font-size:12px; opacity:.85; margin-left:-8px}
#progress{position:relative; background:rgba(255,255,255,.18); border-radius:999px; padding:4px 14px; font-weight:600; font-size:14px; overflow:hidden; --p:0%}
#progress::before{content:""; position:absolute; inset:0; width:var(--p); background:rgba(255,255,255,.28); transition:width .4s}
#timer{font-variant-numeric:tabular-nums; font-size:14px; opacity:.95}
.top .spacer{flex:1}
#whoami{font-size:12px; opacity:.8}
.top button{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:8px; padding:5px 10px; font-size:13px}
.top button:hover{background:rgba(255,255,255,.15)}

/* --- plateau ------------------------------------------------------------- */
.jeu{display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:22px; width:100%; max-width:1240px; margin:20px auto 12px; padding:0 18px; flex:1}
.scene{position:relative; display:flex; flex-direction:column; gap:14px; height:calc(100vh - 140px); min-height:420px; border-radius:18px; padding:12px 10px 8px; overflow:hidden;
  --decor-color:#dbeeea; background:var(--decor-color)}
.scene .decor{position:absolute; inset:0; background:center bottom / cover no-repeat; opacity:.6; pointer-events:none; z-index:0; transition:opacity .4s}
.scene::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.15) 55%, rgba(255,255,255,0) 100%); pointer-events:none; z-index:0}
.scene > *:not(.decor){position:relative; z-index:1}
.lieu{align-self:flex-start; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--teal-fonce); background:rgba(255,255,255,.75); border-radius:999px; padding:3px 10px; margin-bottom:-6px}
.lieu:empty{display:none}
#thread{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:12px; padding:4px 6px 18px 2px}
#thread::-webkit-scrollbar{width:8px} #thread::-webkit-scrollbar-thumb{background:var(--bord); border-radius:8px}
.bubble{position:relative; background:var(--carte); border:1px solid var(--bord); border-radius:16px; padding:12px 16px 11px; box-shadow:0 3px 10px rgba(15,118,110,.06); opacity:.72; user-select:text; flex-shrink:0}
.bubble.from-me{margin-right:28px} .bubble.from-npc{margin-left:28px}
.bubble.current{opacity:1; padding:16px 18px 14px; box-shadow:0 6px 18px rgba(15,118,110,.12)}
.bubble:not(.current){cursor:pointer}
.bubble:not(.current):hover{opacity:.95}
.bubble.viewing{opacity:1; outline:2px dashed var(--teal); outline-offset:2px}
.bubble .who{margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--teal); font-weight:700}
.bubble .text{margin:0; font-size:15.5px}
.bubble.current .text{font-size:16.5px}
.bubble code, .alert code{font:0.92em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:#eef3f2; color:var(--teal-fonce); border-radius:5px; padding:1px 5px; overflow-wrap:anywhere}
.bubble.task code{background:#fff}
.bubble .text{overflow-wrap:anywhere}
.bubble.task{border-color:var(--teal)}
.bubble.task.current{box-shadow:0 0 0 3px var(--teal-clair)}
.bubble.task .text::before{content:"Mission : "; font-weight:700; color:var(--teal)}
.bubble.current::after{content:""; position:absolute; bottom:-14px; border:14px solid transparent; border-bottom:0; border-top-color:var(--carte)}
.bubble.current.from-me::after{left:52px}
.bubble.current.from-npc::after{right:52px}
#continue{align-self:flex-end; background:var(--teal); color:#fff; border:0; border-radius:10px; padding:11px 22px; font-weight:700; font-size:15px; box-shadow:0 3px 0 var(--teal-fonce)}
#continue:hover{filter:brightness(1.08)} #continue:active{transform:translateY(2px); box-shadow:none}
#continue:disabled{opacity:.6; cursor:wait}
.avatars{display:flex; justify-content:space-between; align-items:flex-end; padding:10px 6px 0; flex-shrink:0}
.avatar{width:200px; height:200px; background:center bottom / contain no-repeat; opacity:.35; filter:grayscale(.8); transition:all .3s; transform:scale(.92); transform-origin:bottom center}
.avatar.active{opacity:1; filter:none; transform:scale(1)}
.avatar.sprite{background-size:300% 200%; background-position:0 0}
/* seules les icônes de secours sont retournées : sur une image générée, un badge se lirait à l'envers */
.avatar.npc.fallback{transform:scaleX(-1) scale(.92)} .avatar.npc.fallback.active{transform:scaleX(-1) scale(1)}

.console{display:flex; flex-direction:column; gap:10px; min-width:0; height:calc(100vh - 140px); min-height:420px}
#log{background:var(--console); color:var(--console-texte); border-radius:14px; padding:14px 16px; flex:1; min-height:160px; overflow:auto; font-size:14px; box-shadow:inset 0 2px 10px rgba(0,0,0,.35)}
#log:empty::before{content:"La console SQL de l'hôpital. Les requêtes et leurs résultats s'afficheront ici."; color:#7f8f9c; font-style:italic}
#log pre.q{margin:14px 0 8px; font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-word; color:#fff}
#log pre.q:first-child{margin-top:0}
#log pre.q::before{content:"› "; color:#7f8f9c}
.kw{color:var(--kw); font-weight:600} .str{color:var(--str)} .num{color:var(--num)}
.tw{overflow-x:auto; margin:6px 0 10px}
.tw table{border-collapse:collapse; background:#fff; color:var(--texte); font-size:13px; border-radius:8px; overflow:hidden}
.tw th,.tw td{padding:5px 11px; border:1px solid #e1e6ea; text-align:left; white-space:nowrap}
.tw th{background:#eef3f2; font-weight:700}
.tw tr:nth-child(even) td{background:#f7f9f9}
.tw i{color:#98a2ad}
.tw .more{color:#9fb0bd; font-size:12px; margin-top:4px}
.alert{border-radius:9px; padding:9px 13px; margin:6px 0 2px; font-weight:600; font-size:14px}
.alert .rem{display:block; font-weight:400; font-size:13px; margin-top:3px; opacity:.9}
.alert.ok{background:var(--ok-f); color:var(--ok-t)} .alert.ko{background:var(--ko-f); color:var(--ko-t)}
.alert.info{background:var(--info-f); color:var(--info-t); font-weight:500} .alert.hint{background:var(--hint-f); color:var(--hint-t); font-weight:500}

#editor{width:100%; min-height:72px; flex-shrink:0; resize:vertical; border:1px solid var(--bord); border-radius:12px; padding:12px 14px;
  font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:#fff; color:var(--texte)}
#editor:focus{outline:2px solid var(--teal); outline-offset:1px}
#editor:disabled{background:#f1f4f3; color:#9aa5ae}
.actions{display:flex; gap:10px; align-items:center; flex-shrink:0}
.actions .astuce{font-size:12.5px; color:var(--doux)}
#run{margin-left:auto; background:var(--teal); color:#fff; border:0; border-radius:10px; padding:11px 26px; font-weight:700; font-size:15px; box-shadow:0 3px 0 var(--teal-fonce)}
#run:hover{filter:brightness(1.08)} #run:active{transform:translateY(2px); box-shadow:none}
#run:disabled{background:#9db8b4; box-shadow:none; cursor:not-allowed}
#cheat{background:#fde2e2; color:#a11d1d; border:1px solid #f0b4b4; border-radius:10px; padding:10px 14px; font-weight:600}
#hint{background:var(--hint-f); color:var(--hint-t); border:1px solid #f0d78a; border-radius:10px; padding:10px 14px; font-weight:600}
#schema{display:flex; flex-wrap:wrap; gap:4px 16px; background:var(--console); color:#cfd8de; border-radius:10px; padding:8px 14px; font-size:12px; flex-shrink:0; max-height:32vh; overflow:auto}
#schema b{color:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px}
#schema .tbl.new{animation:reveal 1.6s ease-out}
#schema .autres{background:transparent; color:#9fb0bd; border:1px dashed #56636e; border-radius:6px; padding:1px 8px; font-size:11.5px}
#schema .autres:hover{color:#fff; border-color:#9fb0bd}
#schema .reste{display:contents; opacity:.75}
@keyframes reveal{0%{background:var(--teal); border-radius:6px} 100%{background:transparent}}
#erd-svg .vide{color:var(--doux); font-style:italic; text-align:center; padding:30px}

footer{text-align:center; font-size:12px; color:var(--doux); padding:10px 16px 16px}

/* --- écran de fin ------------------------------------------------------- */
.bubble.certificat{border:2px solid var(--teal); background:#fffdf5}
.cert-print{margin-top:8px; background:var(--teal); color:#fff; border:0; border-radius:8px; padding:7px 14px; font-size:13px}
dialog.fin{max-width:980px}
dialog.fin .in{text-align:center; padding:18px 22px 22px}
#fin-img{width:100%; max-height:62vh; object-fit:cover; object-position:center 35%; border-radius:12px; display:block}
dialog.fin h2{margin:14px 0 4px; font-size:26px}
dialog.fin p{margin:4px auto; max-width:720px; font-size:15.5px}
.fin-actions{display:flex; gap:12px; justify-content:center; margin-top:14px; flex-wrap:wrap}
.fin-actions button{background:var(--teal); color:#fff; border:0; border-radius:10px; padding:12px 22px; font-weight:700; font-size:15px; box-shadow:0 3px 0 var(--teal-fonce)}
.fin-actions button.secondaire{background:#fff; color:var(--teal-fonce); border:1px solid var(--teal); box-shadow:none}
.fin-actions button:disabled{opacity:.6; cursor:wait}

/* --- écran d'accueil ----------------------------------------------------- */
#start{position:fixed; inset:0; background:var(--fond); display:flex; align-items:center; justify-content:center; padding:20px; z-index:10; overflow:auto}
body.accueil-img #start{background:var(--fond) center top / cover no-repeat}   /* l'image est posée par game.js, avec son ?v= */
body.accueil-img .accueil{background:rgba(255,255,255,.94)}
/* écran large : la carte à droite, pour laisser voir l'hôpital et le chat sur le toit */
@media (min-width:1200px){ body.accueil-img #start{justify-content:flex-end; padding-right:5vw} }
.accueil{width:100%; max-width:560px; background:var(--carte); border:1px solid var(--bord); border-radius:18px; padding:34px 36px; box-shadow:0 12px 40px rgba(15,118,110,.12); text-align:center}
.accueil img.logo{width:96px; height:96px}
.accueil h2{margin:8px 0 4px; font-size:30px}
.accueil .pitch{color:var(--doux); margin:0 0 20px; font-size:15.5px}
.accueil p.histoire{text-align:left; font-size:15px; background:var(--teal-clair); border-radius:10px; padding:12px 14px}
.accueil form{display:flex; flex-direction:column; gap:10px; margin-top:18px; text-align:left}
.accueil label{font-size:14px; font-weight:600}
.accueil input[type=email]{width:100%; padding:12px 13px; font:inherit; border:1px solid var(--bord); border-radius:9px}
.accueil input:focus{outline:2px solid var(--teal); outline-offset:1px}
#start-btn{background:var(--teal); color:#fff; border:0; border-radius:10px; padding:13px; font-weight:700; font-size:16px}
#start-btn:disabled{background:#9db8b4}
.accueil .note{font-size:12.5px; color:var(--doux); margin:6px 0 0}
.avatar-choix{border:1px solid var(--bord); border-radius:10px; padding:8px 12px 10px; display:flex; gap:18px; justify-content:center}
.avatar-choix legend{font-size:13px; font-weight:600; padding:0 6px}
.avatar-choix label{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:13px; cursor:pointer; padding:6px 10px; border-radius:10px; border:2px solid transparent}
.avatar-choix label:has(input:checked){border-color:var(--teal); background:var(--teal-clair)}
.avatar-choix input{position:absolute; opacity:0; width:0; height:0}
.avatar-choix .av{width:96px; height:100px; background:center bottom / contain no-repeat}
#start-err{background:var(--ko-f); color:var(--ko-t); border-radius:8px; padding:9px 12px; font-size:14px}

/* --- aide-mémoire -------------------------------------------------------- */
dialog{border:0; border-radius:14px; padding:0; max-width:760px; width:calc(100% - 32px); box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,30,28,.45)}
dialog .in{padding:22px 26px}
dialog h3{margin:0 0 10px}
dialog table{width:100%; border-collapse:collapse; font-size:14px}
dialog td{padding:6px 8px; border-top:1px solid var(--bord); vertical-align:top}
dialog td:first-child{font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--teal-fonce); font-weight:600; font-size:13px; max-width:360px}
dialog form{margin:14px 0 0; text-align:right}
dialog.wide{max-width:900px}
#erd-svg{overflow-x:auto}
#erd-svg svg{display:block; margin:0 auto; max-width:100%; height:auto; font:13px ui-monospace,Menlo,Consolas,monospace}
#erd-svg .box{fill:#fff; stroke:var(--teal); stroke-width:1.5}
#erd-svg .head{fill:var(--teal)}
#erd-svg .title{fill:#fff; font-weight:700; letter-spacing:.04em}
#erd-svg .pk{font-weight:700; text-decoration:underline}
#erd-svg .fk{fill:var(--teal-fonce); font-style:italic}
#erd-svg .lien{fill:none; stroke:#3b4a56; stroke-width:1.6}
#erd-svg .sep{stroke:var(--bord)}
dialog .legende{font-size:13px; color:var(--doux); margin:12px 0 0; line-height:1.7}
dialog .legende svg{vertical-align:middle; color:#3b4a56}
dialog form button{background:var(--teal); color:#fff; border:0; border-radius:8px; padding:8px 16px}

@media (max-width:900px){
  .jeu{grid-template-columns:1fr; gap:14px}
  .scene{height:auto; min-height:0}
  #thread{max-height:45vh}
  .console{height:auto; min-height:0}
  #log{height:40vh; flex:none}
  .avatars img{width:100px; height:100px}
  .top{gap:10px}
}