*{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#17152b;font-family:Arial,sans-serif}
#stage{position:absolute;left:50%;top:50%;width:1536px;height:1024px;transform:translate(-50%,-50%);transform-origin:center;background:url(../assets/fond_grammaire_la_phrase.png) center/100% 100% no-repeat}
.levelHit{position:absolute;left:160px;width:112px;height:125px;border:0;background:transparent;cursor:pointer;z-index:30}
.levelHit[data-l="1"]{top:250px} .levelHit[data-l="2"]{top:405px} .levelHit[data-l="3"]{top:555px}
#marker{position:absolute;left:112px;top:288px;font-size:38px;z-index:31;pointer-events:none;filter:drop-shadow(0 0 8px #ffd84d);transition:top .25s;animation:float 1s ease-in-out infinite alternate}
@keyframes float{to{transform:translateX(-5px) rotate(-8deg)}}
#score{position:absolute;right:58px;top:28px;z-index:35;background:#fff6d8;border:4px solid #79502c;border-radius:15px;padding:8px 16px;font-weight:900;font-size:20px}
#dots{position:absolute;left:410px;top:225px;width:650px;display:flex;gap:10px;justify-content:center;z-index:34}
.dot{width:30px;height:30px;border-radius:50%;border:3px solid #9c6d35;background:#fff1c9} .dot.good{background:#69c96a} .dot.bad{background:#ec6d65} .dot.now{outline:4px solid #7d55b4}
#game{position:absolute;left:340px;top:255px;width:810px;height:520px;z-index:25;padding:28px 35px 72px;text-align:center;color:#33264c}
#q{font-size:28px;font-weight:900;margin:8px 0 22px} #text{font-size:21px;line-height:1.35;margin:0 auto 18px;max-width:720px}
#answers{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
.choice,.tile,.target{border:4px solid #68563e;border-radius:15px;background:linear-gradient(#fffef7,#e8dcc6);box-shadow:0 5px 0 #8c7656;font-size:20px;font-weight:900;padding:14px 18px;min-height:60px}
.choice{cursor:pointer;min-width:215px} .choice.sel{background:#cfeeff;outline:5px solid #4aa7df;box-shadow:0 5px 0 #5d94b5} .choice.correct{background:#c7ebbd} .choice.wrong{background:#f3c0ba}
#feedback{margin-top:18px;font-size:19px;font-weight:900;min-height:28px} #correction{margin:8px auto 0;padding:8px 12px;max-width:700px;border-radius:10px;background:#edf4ff;font-weight:800}
#action{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:250px;height:56px;border:4px solid #3d5229;border-radius:14px;background:linear-gradient(#75c83e,#479427);color:#fff;font-size:19px;font-weight:900;box-shadow:0 5px 0 #31451e;cursor:pointer}
.hidden{display:none!important}
#end{position:absolute;inset:0;z-index:9999;background:#0008;display:flex;align-items:center;justify-content:center}
#endCard{width:620px;padding:46px 35px 30px;border:6px solid #79502c;border-radius:24px;background:#fff6d8;text-align:center;box-shadow:0 18px 40px #0006}
#endTitle{font-size:38px;font-weight:900;color:#4f3477} #endScore{font-size:52px;font-weight:900;margin:20px} #replay{padding:14px 30px;font-size:20px;font-weight:900;border-radius:14px;background:#65b83d;color:#fff;border:4px solid #3d6926}
.orderBank{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:20px} .tile{cursor:grab;touch-action:none;user-select:none;min-width:150px}
.orderTargets{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .target{min-width:170px;border-style:dashed;background:#fff9e8}
.matchGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;width:720px;margin:auto} .matchSrc{cursor:grab;touch-action:none;user-select:none} .matchTarget{border-style:dashed}
.dragging{position:relative;z-index:999;pointer-events:none}

.target[data-value]:not([data-value=""]){background:#e7f2f8;border-style:solid}

.target.filled{
  cursor:grab;
}
.target.filled:active{
  cursor:grabbing;
}

#backBtn,#sheetsBtn{
  position:absolute!important;
  left:1300px!important;
  width:168px!important;
  height:165px!important;
  z-index:2147483647!important;
  display:block!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
#backBtn{top:128px!important}
#sheetsBtn{top:315px!important}