/* QCM ESGI : immeuble de nuit. Personnage repris du defi (tete ronde, deux yeux, corps arrondi). */
:root {
  --nuit: #081021; --nuit2: #101c36; --ligne: #2c3f66; --carte: rgba(18, 30, 56, .92);
  --bleu: #4cc2ff; --or: #e3b341; --vert: #6ee7a8; --encre: #eef3ff; --doux: #a8b6d4; --rouge: #ff6b81;
  --etage: 42px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; hyphens: none; -webkit-hyphens: none; }
body { font-family: "Segoe UI", system-ui, Arial, sans-serif; color: var(--encre); overflow-x: hidden;
  background: radial-gradient(900px 600px at 85% -10%, #1f3a70 0, transparent 60%), var(--nuit); }
.cache { display: none !important; }
.page { max-width: 1040px; margin: 0 auto; padding: 22px 16px 30px; }
.kicker { color: var(--or); text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-size: 13px; }
h1 { margin: 6px 0 4px; font-size: clamp(28px, 4.4vw, 44px); }
.sous { color: var(--doux); margin: 0 0 18px; }
.scene { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; }

/* la tour */
.col-tour { position: sticky; top: 12px; padding-top: 44px; display: flex; flex-direction: column; align-items: center; }
.tour { position: relative; width: 190px; padding-bottom: 58px; background: linear-gradient(90deg, #15233f, #1f3257 50%, #15233f);
  border: 3px solid #0a1428; border-bottom: none; border-radius: 6px 6px 0 0; box-shadow: 0 0 40px rgba(76, 194, 255, .18); }
.toit { position: absolute; left: -12px; right: -12px; top: -38px; height: 38px; background: linear-gradient(180deg, #2f4a7f, #1a2c52); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
#etages { display: flex; flex-direction: column-reverse; }
.etage { height: var(--etage); border-top: 2px solid rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: space-around; position: relative; }
.etage .fen { width: 26px; height: 26px; border-radius: 3px; background: #0d1830; box-shadow: inset 0 0 0 2px #081021; transition: background .6s, box-shadow .6s; }
.etage.fait .fen { background: var(--or); box-shadow: 0 0 10px rgba(227, 179, 65, .7), inset 0 0 0 2px #081021; }
.etage.ici .fen { background: var(--bleu); box-shadow: 0 0 12px rgba(76, 194, 255, .8), inset 0 0 0 2px #081021; }
.etage .num { position: absolute; left: -30px; width: 24px; text-align: right; font-size: 12px; color: var(--doux); }
.porte { position: absolute; bottom: 0; left: 50%; width: 46px; height: 54px; margin-left: -23px; background: #0a1428; border-radius: 4px 4px 0 0; }
.compteur { margin-top: 10px; color: var(--or); font-weight: 700; }
.perso { position: absolute; left: 50%; bottom: 2px; width: 40px; margin-left: -20px; display: flex; flex-direction: column; align-items: center;
  transition: bottom 1s cubic-bezier(.3, 1.4, .5, 1); z-index: 3; }
.perso .tete { width: 24px; height: 24px; border-radius: 50%; background: var(--bleu); position: relative; border: 2px solid rgba(0, 0, 0, .35); box-shadow: 0 0 10px rgba(76, 194, 255, .7); }
.perso .tete::before, .perso .tete::after { content: ""; position: absolute; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #10151c; }
.perso .tete::before { left: 5px; } .perso .tete::after { right: 5px; }
.perso .corps { width: 16px; height: 11px; background: var(--bleu); border-radius: 4px 4px 2px 2px; margin-top: -1px; }
.perso .nom { position: absolute; left: 34px; top: 8px; font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, .65); padding: 1px 6px; border-radius: 8px; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.perso.saute .tete { animation: saut .6s ease; }
@keyframes saut { 40% { transform: translateY(-12px) scale(1.1); } }

/* la carte */
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 22px 24px; box-shadow: 0 12px 40px rgba(0, 0, 0, .4); }
.carte h2 { margin: 4px 0 14px; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25; }
.theme { color: var(--or); text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 700; }
.aide { color: var(--doux); font-size: 14px; margin: 10px 0 0; }
label { display: block; margin: 12px 0; color: var(--doux); font-size: 14px; }
input { display: block; width: 100%; margin-top: 5px; padding: 11px 13px; font: inherit; font-size: 17px; color: var(--encre); background: #0b152b; border: 1px solid var(--ligne); border-radius: 10px; }
input:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }
button { font: inherit; font-size: 16px; padding: 11px 20px; border-radius: 11px; cursor: pointer; margin: 12px 8px 0 0; border: 1px solid var(--ligne); }
button.pri { background: var(--bleu); color: #06213a; font-weight: 800; border: none; }
button.sec { background: #1a2a4b; color: var(--encre); }
button:disabled { opacity: .5; cursor: default; }
.msg { margin-top: 12px; min-height: 1.3em; }
.msg.err { color: var(--rouge); } .msg.ok { color: var(--vert); }
.choix { display: flex; flex-direction: column; gap: 9px; }
.choix button { margin: 0; text-align: left; background: #14223f; color: var(--encre); padding: 13px 16px; display: flex; gap: 12px; align-items: baseline; }
.choix button b { color: var(--or); }
.choix button.pris { border-color: var(--bleu); background: rgba(76, 194, 255, .16); box-shadow: 0 0 0 1px var(--bleu); }
.points { display: flex; gap: 8px; margin-top: 8px; }
.points i { width: 11px; height: 11px; border-radius: 50%; background: var(--bleu); animation: point 1.2s ease-in-out infinite; }
.points i:nth-child(2) { animation-delay: .2s; } .points i:nth-child(3) { animation-delay: .4s; }
@keyframes point { 50% { opacity: .25; } }
.score { font-size: 72px; font-weight: 800; color: var(--or); line-height: 1; margin: 6px 0 10px; }
.score small { font-size: 28px; color: var(--doux); margin-left: 8px; }
#feu { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

@media (max-width: 760px) {
  :root { --etage: 30px; }
  .scene { grid-template-columns: 1fr; gap: 14px; }
  .col-tour { position: static; }
  .etage .fen { width: 20px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .perso { transition: none; } .points i { animation: none; } }