*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,sans-serif;background:#15333d}
#stage{position:absolute;left:50%;top:50%;width:1448px;height:1086px;transform:translate(-50%,-50%);transform-origin:center;background:url(../assets/fond_grammaire_verbe.png) center/100% 100% no-repeat}
.hit{position:absolute;border:0;background:transparent;cursor:pointer;z-index:30}.h1{left:26px;top:229px;width:208px;height:116px}.h2{left:26px;top:372px;width:208px;height:116px}.h3{left:26px;top:520px;width:208px;height:112px}
#pencil{position:absolute;z-index:31;left:45px;top:236px;font-size:86px;line-height:1;pointer-events:none;transform:rotate(-24deg);transition:top .2s;filter:drop-shadow(0 3px 2px #0005);animation:w 1.1s ease-in-out infinite}@keyframes w{50%{transform:translateX(8px) rotate(-18deg)}}
#score{position:absolute;right:38px;top:28px;z-index:40;background:#fff8df;border:5px solid #9c631c;border-radius:18px;padding:9px 20px;font-weight:900;font-size:22px;box-shadow:0 4px 0 #6d4317;min-width:120px;text-align:center}
#dots{position:absolute;left:320px;top:210px;width:960px;height:68px;display:flex;justify-content:space-between;align-items:center;gap:0;z-index:42}.dot{width:58px;height:58px;flex:0 0 58px;border-radius:50%;border:3px solid #d0923d;background:#fff2cd}.dot.good{background:#61c85c}.dot.bad{background:#ef6960}.dot.now{outline:5px solid #2b7bb1;outline-offset:2px}
#game{position:absolute;left:250px;top:245px;width:1080px;height:620px;padding:45px 70px 75px;text-align:center;z-index:20}
#q{font-size:32px;font-weight:900;color:#17394b;margin:20px auto 30px;max-width:900px}
#answers{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:850px;margin:auto}.ans,.word,.tf,.pair{border:4px solid #6c5637;border-radius:16px;background:linear-gradient(#fffef8,#eee2ca);box-shadow:0 5px 0 #9b8564;font-size:22px;font-weight:900;cursor:pointer;min-height:72px;padding:12px}.ans.correct,.word.correct{background:#b9e9bd;border-color:#348348}.ans.wrong,.word.wrong{background:#f1bbb6;border-color:#ad4138}
#words{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.word{min-height:62px}
#feedback{margin-top:22px;font-size:20px;font-weight:900;min-height:28px}
#action{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:260px;height:58px;border:4px solid #49361f;border-radius:15px;background:linear-gradient(#79c83e,#479523);color:#fff;font-size:20px;font-weight:900;box-shadow:0 5px 0 #392817;cursor:pointer}
#correction{margin:10px auto 0;max-width:800px;padding:8px 14px;background:#eaf6fc;border:2px solid #4b83a0;border-radius:10px;font-weight:800;color:#21475a}
.hidden{display:none!important}
#end button{margin-top:40px;padding:15px 35px;font-size:22px;font-weight:900;border-radius:15px;background:#64b936;color:#fff;border:4px solid #4b672c}


#final{font-size:36px;font-weight:900;margin-top:10px}
#finalSub{font-size:20px;font-weight:800;color:#5b4a31;margin-top:10px}
to{transform:translateY(-8px)}}

#end{
  position:absolute;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,35,45,.38);
  backdrop-filter:blur(2px);
}
.popupCard{
  position:relative;
  width:790px;
  min-height:470px;
  padding:88px 44px 34px;
  border:7px solid #a66a25;
  border-radius:30px;
  background:linear-gradient(#fffdf3,#fff3d0);
  box-shadow:0 18px 45px rgba(0,0,0,.38);
}
.popupTitle{
  position:absolute;left:50%;top:-42px;transform:translateX(-50%);
  min-width:390px;padding:18px 48px;
  border:6px solid #9d5f1d;border-radius:24px;
  background:linear-gradient(#f6a92c,#d87a13);
  color:#fff;
  font-size:48px;font-weight:900;text-align:center;
  text-shadow:0 3px 0 #71410f;
  box-shadow:0 6px 0 #7c4d1b;
}
.closePopup{
  position:absolute;right:18px;top:16px;
  width:54px;height:54px;border-radius:50%;
  border:4px solid #8f2c24;background:#e95043;color:#fff;
  font-size:38px;font-weight:900;line-height:44px;cursor:pointer;
}
.popupBody{
  display:flex;align-items:center;justify-content:center;gap:34px;
  min-height:285px;
}
.victoryMascot{
  width:285px;height:285px;display:flex;align-items:center;justify-content:center;
}
.victoryMascot img{
  max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 5px rgba(0,0,0,.18));
  animation:victoryBounce .7s ease-in-out infinite alternate;
}
@keyframes victoryBounce{
  from{transform:translateY(0) rotate(-1deg)}
  to{transform:translateY(-10px) rotate(1.5deg)}
}
.popupScoreBox{
  width:360px;padding:24px 22px;
  border:4px dashed #e7b651;border-radius:22px;
  background:#fffaf0;
  text-align:center;
}
.popupLabel{font-size:24px;font-weight:900;color:#6b3e18}
.popupScore{
  margin:12px auto 8px;
  font-size:56px;font-weight:900;color:#1e65a2;
}
.popupMessage{
  min-height:70px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:900;color:#6b3e18;line-height:1.15;
}
.continueBtn{
  display:block;margin:8px auto 0;
  width:260px;height:62px;
  border:5px solid #3f6f1e;border-radius:18px;
  background:linear-gradient(#74d53d,#43a71c);
  color:#fff;font-size:24px;font-weight:900;
  text-shadow:0 2px 0 rgba(0,0,0,.3);
  box-shadow:0 6px 0 #315719;
  cursor:pointer;
}

.sortWrap{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:850px;margin:auto}
.sortBank{grid-column:1/3;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:8px}
.sortZone{min-height:165px;border:4px dashed #9b8057;border-radius:18px;background:#fff8e7;padding:12px}
.sortZone h3{margin:0 0 10px;color:#17394b}
.sortItem{display:inline-block;margin:5px;padding:9px 14px;border:3px solid #6c5637;border-radius:12px;background:#fff;font-weight:900;cursor:pointer}
.sortItem.sel{outline:5px solid #e7a927}
.miniChoices{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;width:850px;margin:auto}

.popupMascots{
  width:300px;
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#victoryMascot,#neutralMascot{
  width:280px!important;
  height:300px!important;
}
#victoryMascot img,#neutralMascot img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
#neutralMascot img{animation:none!important}

.pairBoard{width:820px;margin:0 auto;display:grid;grid-template-columns:300px 1fr;gap:16px 28px;align-items:center}
.pairSource{min-height:74px;border:4px solid #5d513d;border-radius:16px;background:#fff8e8;
display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:900;
box-shadow:0 5px 0 #8b7758;cursor:grab;user-select:none;touch-action:none}
.pairSource.dragging{cursor:grabbing;opacity:.25}
.pairTarget{min-height:74px;border:4px dashed #c6933e;border-radius:16px;background:#fff9e8;
display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;color:#533d25}
.pairTarget.over{background:#fff0ad;border-color:#e2a51e}
.pairTarget.filled{border-style:solid;background:#e7f2f8}
.pairGhost{position:fixed;width:260px;min-height:74px;z-index:999999;pointer-events:none;
border:4px solid #5d513d;border-radius:16px;background:#fff8e8;display:flex;align-items:center;
justify-content:center;font-size:25px;font-weight:900;box-shadow:0 9px 22px #0005}

/* ASSOCIATIONS V3 : très grosses cartes + drag global souris/tactile */
.pairBoard{width:900px!important;margin:0 auto!important;display:grid!important;
grid-template-columns:400px 400px!important;gap:20px 36px!important;justify-content:center!important}
.pairSource,.pairTarget{height:92px!important;min-height:92px!important;border-radius:20px!important;
font-size:30px!important;font-weight:900!important;padding:12px 20px!important}
.pairSource{border:5px solid #5d513d!important;background:#fff8e8!important;
box-shadow:0 7px 0 #8b7758!important;cursor:grab!important;touch-action:none!important;
-webkit-user-select:none!important;user-select:none!important}
.pairTarget{border:5px dashed #c6933e!important;background:#fff9e8!important}
.pairGhost{position:fixed!important;width:400px!important;height:92px!important;z-index:2147483647!important;
pointer-events:none!important;border:5px solid #5d513d!important;border-radius:20px!important;
background:#fff8e8!important;display:flex!important;align-items:center!important;justify-content:center!important;
font-size:30px!important;font-weight:900!important;box-shadow:0 12px 28px #0007!important}

/* ===== CLASSEMENT : VRAI GLISSER-DEPOSER ===== */
.sortWrap{
  width:900px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:18px 28px!important;
}
.sortBank{
  grid-column:1/3!important;
  min-height:170px!important;
  display:grid!important;
  grid-template-columns:repeat(3, 1fr)!important;
  gap:14px!important;
  align-items:center!important;
  justify-items:stretch!important;
  padding:12px!important;
}
.sortItem{
  width:100%!important;
  min-width:0!important;
  height:78px!important;
  margin:0!important;
  padding:10px 14px!important;
  border:5px solid #66553c!important;
  border-radius:18px!important;
  background:linear-gradient(#fffef7,#eadfc9)!important;
  box-shadow:0 6px 0 #8f8068!important;
  font-size:24px!important;
  line-height:1.05!important;
  font-weight:900!important;
  cursor:grab!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  touch-action:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.sortItem.dragging{
  opacity:.25!important;
  cursor:grabbing!important;
}
.sortZone{
  min-height:190px!important;
  padding:14px!important;
  border:5px dashed #a77b38!important;
  border-radius:20px!important;
  background:#fff8e5!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  align-content:flex-start!important;
  justify-content:center!important;
}
.sortZone h3{
  width:100%!important;
  margin:0 0 8px!important;
  font-size:22px!important;
  color:#17394b!important;
}
.sortZone .sortItem{
  width:calc(50% - 8px)!important;
  height:70px!important;
  font-size:20px!important;
}
.sortZone.over{
  background:#fff0ad!important;
  border-color:#e1a21d!important;
}
.sortGhost{
  position:fixed!important;
  width:270px!important;
  height:78px!important;
  z-index:2147483647!important;
  pointer-events:none!important;
  border:5px solid #66553c!important;
  border-radius:18px!important;
  background:linear-gradient(#fffef7,#eadfc9)!important;
  box-shadow:0 12px 28px #0007!important;
  font-size:24px!important;
  font-weight:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:10px 14px!important;
}

/* DRAG FINAL : aucune transformation visuelle de la carte saisie */
.sortItem.dragging,.pairSource.dragging{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
.sortGhost,.pairGhost{
  box-sizing:border-box!important;
  transform:none!important;
  opacity:1!important;
}

/* V4 : on déplace la vraie étiquette, jamais une copie */
.dragPlaceholder{
  visibility:hidden!important;
  box-sizing:border-box!important;
  margin:0!important;
}
.sortItem.isRealDragging,.pairSource.isRealDragging{
  position:fixed!important;
  z-index:2147483647!important;
  margin:0!important;
  transform:none!important;
  opacity:1!important;
  pointer-events:none!important;
  box-sizing:border-box!important;
}

/* ===== DRAG V5 : déplacement par transform, taille strictement inchangée ===== */
.sortItem,.pairSource{
  transform:none;
  transform-origin:0 0;
}
.sortItem.transformDragging,.pairSource.transformDragging{
  position:relative!important;
  z-index:999999!important;
  pointer-events:none!important;
  opacity:1!important;
  
  
  min-
  
  
}
.sortZone .sortItem{
  width:270px!important;
  height:78px!important;
  min-height:78px!important;
  flex:0 0 270px!important;
}

/* ===== CLASSEMENT FINAL : TAILLE UNIFORME ET FIXE ===== */
.sortWrap{
  width:860px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:18px 24px!important;
}

.sortBank{
  grid-column:1/3!important;
  width:860px!important;
  min-height:154px!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:repeat(3, 260px)!important;
  grid-auto-rows:70px!important;
  gap:14px 20px!important;
  justify-content:center!important;
  align-items:start!important;
  align-content:start!important;
  padding:0!important;
}

.sortItem{
  box-sizing:border-box!important;
  width:260px!important;
  min-width:260px!important;
  max-width:260px!important;
  height:70px!important;
  min-height:70px!important;
  max-height:70px!important;
  margin:0!important;
  padding:8px 12px!important;
  border:4px solid #66553c!important;
  border-radius:14px!important;
  background:linear-gradient(#fffef7,#eadfc9)!important;
  box-shadow:0 5px 0 #8f8068!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  cursor:grab!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  touch-action:none!important;
  flex:0 0 260px!important;
}

.sortItem.transformDragging{
  position:relative!important;
  z-index:999999!important;
  width:260px!important;
  min-width:260px!important;
  max-width:260px!important;
  height:70px!important;
  min-height:70px!important;
  max-height:70px!important;
  margin:0!important;
  transform-origin:0 0!important;
  opacity:1!important;
  pointer-events:none!important;
}

.sortZone{
  box-sizing:border-box!important;
  min-height:150px!important;
  padding:12px!important;
  border:4px dashed #a77b38!important;
  border-radius:18px!important;
  background:#fff8e5!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  align-content:flex-start!important;
  justify-content:center!important;
}

.sortZone h3{
  width:100%!important;
  margin:0 0 8px!important;
  font-size:19px!important;
  color:#17394b!important;
}

.sortZone .sortItem{
  width:260px!important;
  min-width:260px!important;
  max-width:260px!important;
  height:70px!important;
  min-height:70px!important;
  max-height:70px!important;
  flex:0 0 260px!important;
}

.sortZone.over{
  background:#fff0ad!important;
  border-color:#e1a21d!important;
}

/* ===== ZONES DE DEPOT : CONTENIR REELLEMENT LES CARTES ===== */
.sortWrap{
  width:860px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:18px 24px!important;
  align-items:start!important;
}

.sortZone{
  box-sizing:border-box!important;
  width:418px!important;
  min-height:300px!important;
  height:300px!important;
  padding:12px!important;
  overflow:hidden!important;
  border:4px dashed #a77b38!important;
  border-radius:18px!important;
  background:#fff8e5!important;

  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  gap:10px!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

.sortZone h3{
  flex:0 0 auto!important;
  width:100%!important;
  margin:0 0 6px!important;
  font-size:19px!important;
  line-height:24px!important;
  text-align:center!important;
}

.sortZone .sortItem{
  position:relative!important;
  flex:0 0 70px!important;
  width:260px!important;
  min-width:260px!important;
  max-width:260px!important;
  height:70px!important;
  min-height:70px!important;
  max-height:70px!important;
  margin:0!important;
  transform:none!important;
}

#action{
  bottom:8px!important;
}



/* ===== RETOUR AUX JEUX / FICHE PEDAGOGIQUE ===== */
#backBtn,#sheetsBtn{
  position:absolute;
  left:18px;
  width:230px;
  height:48px;
  z-index:90;
  display:block;
  box-sizing:border-box;
  background:linear-gradient(#a96b31,#7e481f);
  border:4px solid #58331a;
  border-radius:10px;
  box-shadow:0 4px 0 #3d2616,inset 0 2px 0 rgba(255,255,255,.18);
  text-decoration:none;
}
#backBtn{top:18px}
#sheetsBtn{top:78px}
#backBtn::after,#sheetsBtn::after{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff7de;
  font-size:15px;
  line-height:1;
  font-weight:900;
  text-shadow:0 2px 0 #4a2915;
  pointer-events:none;
}
#backBtn::after{content:"← RETOUR AUX JEUX"}
#sheetsBtn::after{content:"FICHE PÉDAGOGIQUE"}
#backBtn:hover,#sheetsBtn:hover{filter:brightness(1.08)}