*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#201b15;font-family:Arial,Helvetica,sans-serif}
#stage{position:absolute;left:50%;top:50%;width:1536px;height:1024px;transform-origin:center;background:url("../assets/fond-charlemagne.png") center/1536px 1024px no-repeat;overflow:hidden}
#backBtn{position:absolute;left:10px;top:10px;width:270px;height:105px;z-index:50}
#sheetsBtn{position:absolute;left:10px;top:125px;width:270px;height:100px;z-index:50}
#scoreBox{position:absolute;right:25px;top:25px;width:205px;height:90px;z-index:55;background:#fff;border:5px solid #43515a;border-radius:17px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 5px 0 #0004}
#scoreBox span{font-size:44px} #scoreBox div{display:flex;flex-direction:column;align-items:center} #scoreBox b{font-size:18px} #scoreBox strong{font-size:40px;line-height:1}
#levels{position:absolute;left:20px;top:330px;width:225px;z-index:55;padding:10px;background:#24465b;border:5px solid #5a3d20;border-radius:17px}
.levelsTitle{height:48px;margin-bottom:12px;background:#17394d;border:4px solid #6b4b24;border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;font-size:23px;font-weight:900}
.level{width:100%;height:67px;margin-bottom:12px;border:5px solid #6b4b24;border-radius:14px;background:linear-gradient(#83c63d,#4b9120);color:#fff;font-size:22px;font-weight:900;cursor:pointer}
.level:last-child{margin-bottom:0} .level.active{outline:4px solid #f1c34a;outline-offset:-9px}
#dots{position:absolute;left:340px;top:290px;width:800px;height:38px;z-index:55;display:flex;align-items:center;justify-content:center;gap:9px}
.dot{width:20px;height:20px;border-radius:50%;background:#eee9df;border:2px solid #56514a} .dot.good{background:#31b85b;border-color:#176b31} .dot.bad{background:#dc433a;border-color:#7b1915} .dot.current{outline:3px solid #e1aa2c;outline-offset:2px}
#board{position:absolute;left:300px;top:335px;width:930px;height:500px;z-index:50;background:transparent;border:0;padding:24px 48px;display:flex;flex-direction:column;align-items:center}
#question{width:100%;min-height:105px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:30px;line-height:1.18;font-weight:900;color:#20313b;padding:0 18px}
#answers{width:800px;display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;margin-top:18px}
.answer{min-height:82px;padding:12px 14px;border:3px solid #625744;border-radius:13px;background:linear-gradient(#fffdf7,#eadfc9);font-size:20px;font-weight:800;color:#222;box-shadow:0 5px 0 #8f8068;cursor:pointer}
.answer.correct{background:#bde9c6;border-color:#2b8b49} .answer.wrong{background:#f0bbb6;border-color:#b73b32} .answer:disabled{opacity:1;cursor:default}
#feedback{height:38px;margin-top:16px;font-size:21px;font-weight:900;text-align:center}
#next,#replay{border:4px solid #5a3d20;border-radius:11px;background:#9d7535;color:#fff;font-size:18px;font-weight:900;padding:8px 18px;cursor:pointer}
.hidden{display:none!important}
#end{position:absolute;left:300px;top:335px;width:930px;height:500px;z-index:70;display:flex;align-items:center;justify-content:center}
#end section{width:500px;padding:34px;text-align:center;background:#fff8e8;border:6px solid #5a3d20;border-radius:18px;box-shadow:0 10px 30px #0006}
#end h2{font-size:38px;margin:0 0 12px} #end p{font-size:25px;font-weight:900}

#stage{width:1536px!important;height:1024px!important;background:url("../assets/fond-charlemagne.png") center/1536px 1024px no-repeat!important}
#backBtn{left:22px!important;top:30px!important;width:285px!important;height:68px!important}
#sheetsBtn{left:22px!important;top:118px!important;width:285px!important;height:68px!important}
#scoreBox{right:25px!important;top:25px!important}
#levels{left:25px!important;top:315px!important}
#dots{left:360px!important;top:220px!important;width:820px!important}
#board{left:315px!important;top:260px!important;width:960px!important;height:620px!important;background:transparent!important;border:0!important;box-shadow:none!important}
#question{font-size:30px!important}
#answers{width:820px!important}

/* === VERSION 3 NIVEAUX : niveau 1 interactif === */
#board.mode-special{
  left:270px!important;
  width:1010px!important;
  padding:18px 45px 92px!important;
  align-items:center!important;
  position:absolute!important;
}
#board.mode-special #question{
  width:100%!important;
  text-align:center!important;
  justify-content:center!important;
}
#board.mode-special #answers{
  width:880px!important;
  display:block!important;
  margin:8px auto 0!important;
}
.special-instruction{
  text-align:center;
  font-size:18px;
  font-weight:800;
  color:#6a512c;
  margin:0 0 12px;
}
.tf-wrap{
  display:flex;
  gap:28px;
  justify-content:center;
  margin-top:20px;
}
.tf-btn{
  width:250px;
  height:90px;
  border:4px solid #715a35;
  border-radius:16px;
  background:linear-gradient(#fffdf7,#eadfc9);
  font-size:26px;
  font-weight:900;
  box-shadow:0 6px 0 #8f8068;
  cursor:pointer;
}
.tf-btn.chosen{outline:5px solid #e1aa2c}
.tf-btn.correct,.match-card.correct{background:#bde9c6;border-color:#2b8b49}
.tf-btn.wrong,.match-card.wrong{background:#f0bbb6;border-color:#b73b32}

.match-grid{
  width:850px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px 25px;
  margin:8px auto;
}
.match-card{
  min-height:65px;
  border:3px solid #715a35;
  border-radius:13px;
  background:linear-gradient(#fffdf7,#eadfc9);
  font-size:18px;
  font-weight:850;
  box-shadow:0 4px 0 #8f8068;
  cursor:pointer;
  padding:9px;
}
.match-card.selected{outline:5px solid #e1aa2c}
.match-card.paired{background:#e5f1f7;border-color:#3a738f}
.match-card.bad-pair{background:#f0bbb6;border-color:#b73b32}

.sort-area{
  width:850px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 22px;
  margin:0 auto;
}
.sort-bank{
  grid-column:1/3;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  min-height:70px;
}
.drag-card{
  padding:11px 15px;
  background:#fffaf0;
  border:3px solid #715a35;
  border-radius:12px;
  font-size:17px;
  font-weight:900;
  cursor:grab;
  box-shadow:0 4px 0 #8f8068;
}
.drop-zone{
  min-height:125px;
  border:4px dashed #8a7049;
  border-radius:16px;
  background:#fff9e8aa;
  padding:9px;
  text-align:center;
}
.drop-zone h3{margin:0 0 7px;font-size:19px}
.drop-zone .items{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
}
.drag-card.correct-card,.order-card.correct-card{
  background:#bde9c6!important;
  border-color:#2b8b49!important;
}
.drag-card.wrong-card,.order-card.wrong-card{
  background:#f0bbb6!important;
  border-color:#b73b32!important;
}

.order-wrap{
  width:800px;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:5px auto;
}
.order-card{
  padding:11px;
  background:#fffaf0;
  border:3px solid #715a35;
  border-radius:12px;
  font-size:17px;
  font-weight:850;
  cursor:pointer;
  text-align:center;
  box-shadow:0 4px 0 #8f8068;
}
.order-card.selected{outline:5px solid #e1aa2c}

#specialCorrection{
  width:850px;
  max-height:92px;
  overflow:auto;
  margin:10px auto 0;
  padding:8px 14px;
  border:3px solid #2c617c;
  border-radius:12px;
  background:#eef7fb;
  color:#17384b;
  font-size:17px;
  line-height:1.2;
  font-weight:800;
  text-align:center;
}

#board.mode-special #specialAction{
  display:block;
  position:absolute!important;
  left:50%!important;
  bottom:17px!important;
  transform:translateX(-50%)!important;
  width:230px!important;
  height:58px!important;
  margin:0!important;
  border:4px solid #4f3a20!important;
  border-radius:13px!important;
  background:linear-gradient(#83c63d,#4b9120)!important;
  color:#fff!important;
  font-size:20px!important;
  font-weight:900!important;
  text-shadow:0 2px #0007!important;
  box-shadow:0 5px 0 #3a2b18!important;
  cursor:pointer!important;
  z-index:100!important;
}
#board.mode-special #specialAction.next-mode{
  background:linear-gradient(#2f7fba,#235f8d)!important;
  border-color:#24485f!important;
  box-shadow:0 5px 0 #183548!important;
}
#board.mode-special #next{display:none!important}
#board:not(.mode-special) #specialAction{display:none!important}