*{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;background:#1b3a22}
#stage{position:absolute;left:50%;top:50%;width:1536px;height:1024px;transform:translate(-50%,-50%);transform-origin:center;background-image:url('assets/images/carte-001.png');background-size:1536px 1024px;background-repeat:no-repeat;overflow:hidden}
.title{position:absolute;left:345px;top:34px;width:845px;text-align:center;z-index:20;pointer-events:none}.title h1{margin:0;color:#3b210e;font-size:53px;line-height:1.05;font-weight:1000;letter-spacing:1px;text-shadow:0 2px 0 #f4c56d,0 4px 3px #0004}.title p{position:absolute;left:45px;right:45px;top:91px;margin:0;color:#fff;font-size:24px;line-height:1.15;font-weight:900;text-shadow:0 2px 2px #173b0d,0 3px 3px #0007}
.left{position:absolute;left:52px;top:235px;width:230px} .wood{background:linear-gradient(#8b5527,#633611);border:5px solid #3b210e;border-radius:15px;color:#fff;text-shadow:0 2px #0009;box-shadow:0 5px 0 #2d1b0c;padding:12px;text-align:center;font-weight:900}
.left .head{font-size:25px;margin-bottom:16px} .level{display:block;width:100%;height:95px;margin:0 0 17px;border:5px solid #715026;border-radius:17px;background:linear-gradient(#8ad045,#4f9d21);color:white;font-weight:900;cursor:pointer;box-shadow:0 6px 0 #3b2813} .level b{font-size:38px;display:block;line-height:1} .level span{font-size:17px} .level.active{outline:5px solid #ffd34a;outline-offset:-9px}
.right{position:absolute;right:38px;top:235px;width:245px;display:grid;gap:16px} .nav{height:92px;border:5px solid #3b210e;border-radius:16px;background:linear-gradient(#8b5527,#633611);color:#fff;font-weight:900;font-size:20px;cursor:pointer;box-shadow:0 5px 0 #2d1b0c}
.panel{position:absolute;left:300px;top:210px;width:940px;height:650px;padding:22px 34px 18px} .meta{display:flex;justify-content:space-between;font-weight:900;color:#254f27;font-size:19px;margin-bottom:6px} .status{text-align:center;font-weight:900;color:#385d32;margin:5px 0 8px;font-size:18px}
.dots{display:flex;justify-content:center;gap:8px;height:28px;align-items:center} .dot{width:20px;height:20px;border-radius:50%;background:#c9c9c9;border:2px solid #fff;box-shadow:0 1px 3px #0005} .dot.cur{outline:4px solid #f5bf25} .dot.ok{background:#4fbf2d} .dot.bad{background:#e84b4b}
.slots{position:absolute;left:60px;top:78px;width:870px;height:275px;display:grid;grid-template-columns:repeat(3,260px);column-gap:45px;justify-content:start;z-index:5}.slot{width:260px;height:275px;border-radius:18px;display:flex;align-items:center;justify-content:center}.slot .card{width:248px;height:248px}.cards{position:absolute;left:60px;top:442px;width:870px;height:250px;display:grid;grid-template-columns:repeat(3,260px);column-gap:45px;justify-content:start;align-items:center;z-index:6}.card{width:248px;height:248px;background:#fff;border:4px solid #8cbbe0;border-radius:18px;padding:6px;box-shadow:0 6px 14px #0003;overflow:hidden;cursor:grab;touch-action:none;user-select:none;justify-self:center;transition:box-shadow .12s}.card img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block;pointer-events:none}.card.drag{box-shadow:0 14px 32px #0007;cursor:grabbing;z-index:999;transition:none}
.actions{position:absolute;left:0;right:0;bottom:-64px;display:flex;justify-content:center;gap:14px} .primary{min-width:190px;height:54px;border:4px solid #386d19;border-radius:14px;background:linear-gradient(#72c83a,#45a61e);color:#fff;font-size:19px;font-weight:900;cursor:pointer;box-shadow:0 4px 0 #2f5c16} .primary.next{background:linear-gradient(#3f90c8,#266b9d);border-color:#245677} .feedback{position:absolute;left:50px;right:50px;bottom:-105px;min-height:34px;text-align:center;font-weight:900;font-size:18px} .feedback.ok{color:#23721d} .feedback.bad{color:#b72b2b}
.start{position:absolute;inset:110px 70px 80px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;text-align:center;background:rgba(255,249,225,.88);border-radius:25px;border:4px solid #8b6425} .start strong{font-size:34px;color:#235d2a} .start span{font-size:20px;color:#5a654f} [hidden]{display:none!important}
@media(max-aspect-ratio:3/2){#stage{transform:translate(-50%,-50%) scale(calc(100vw / 1536))}} 

/* V5 — suppression de la consigne dynamique + score en haut à droite */
.status{display:none!important}
.meta{position:static!important;margin:0!important;font-size:19px!important}
#ex{display:none!important}
#score{
  position:absolute!important;
  top:22px!important;
  right:28px!important;
  z-index:120!important;
  min-width:180px!important;
  height:68px!important;
  padding:0 20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:4px solid #6b4b24!important;
  border-radius:16px!important;
  background:linear-gradient(#fffdf1,#f4e3b7)!important;
  color:#244d29!important;
  font-size:22px!important;
  font-weight:900!important;
  box-shadow:0 5px 0 rgba(63,42,20,.45),0 8px 18px rgba(0,0,0,.18)!important;
}

/* V6 — bouton sous les images + feedback dans la bande centrale */
.actions{
  left:0!important;
  right:0!important;
  bottom:-138px!important;
  z-index:30!important;
}
#validate,#next{
  min-width:210px!important;
  height:58px!important;
}
.feedback{
  left:145px!important;
  right:145px!important;
  top:365px!important;
  bottom:auto!important;
  min-height:58px!important;
  padding:10px 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:15px!important;
  font-size:19px!important;
  line-height:1.2!important;
  z-index:25!important;
}
.feedback:empty{
  visibility:hidden!important;
}
.feedback.ok{
  visibility:visible!important;
  color:#185c20!important;
  background:rgba(226,248,218,.96)!important;
  border:3px solid #55a83f!important;
  box-shadow:0 4px 10px rgba(0,0,0,.16)!important;
}
.feedback.bad{
  visibility:visible!important;
  color:#8b251d!important;
  background:rgba(255,235,215,.97)!important;
  border:3px solid #d86a3b!important;
  box-shadow:0 4px 10px rgba(0,0,0,.16)!important;
}

/* V11 — popup de fin */
.end-modal{position:absolute;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(15,39,22,.58);backdrop-filter:blur(2px)}
.end-modal[hidden]{display:none!important}
.end-card{width:500px;max-width:86%;padding:34px 38px 30px;text-align:center;background:#fff8dc;border:7px solid #76502d;border-radius:28px;box-shadow:0 16px 45px rgba(0,0,0,.4)}
.end-card h2{margin:0 0 18px;color:#345b22;font-size:40px;line-height:1.05}
.end-score{margin:0 0 25px;color:#51391f;font-size:28px;font-weight:900}
.replay-btn{min-width:210px;padding:15px 30px;border:4px solid #39751d;border-radius:17px;background:#65b83b;color:#fff;font-size:23px;font-weight:900;cursor:pointer;box-shadow:0 5px 10px rgba(0,0,0,.2)}
.replay-btn:active{transform:translateY(2px)}

/* V13 — Niveau 2 : 4 emplacements réels, alignés sur 4 cartes */
#stage.level2 .slots{
  left:69px!important;
  top:82px!important;
  width:852px!important;
  height:250px!important;
  display:grid!important;
  grid-template-columns:repeat(4,195px)!important;
  column-gap:24px!important;
  align-items:center!important;
  padding:16px 0!important;
  background:rgba(250,244,214,.96)!important;
  border-radius:18px!important;
  box-shadow:inset 0 0 0 2px rgba(111,87,42,.10)!important;
}
#stage.level2 .slot{
  position:relative!important;
  width:195px!important;
  height:218px!important;
  border:4px dashed #78ad47!important;
  border-radius:18px!important;
  background:rgba(255,255,245,.42)!important;
}
#stage.level2 .slot::before{
  content:attr(data-pos);
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff9d9;border:3px solid #8bb65c;
  color:#5d8a34;font-size:24px;font-weight:900;
  opacity:.9;z-index:0;
}
#stage.level2 .slot[data-pos="0"]::before{content:"1"}
#stage.level2 .slot[data-pos="1"]::before{content:"2"}
#stage.level2 .slot[data-pos="2"]::before{content:"3"}
#stage.level2 .slot[data-pos="3"]::before{content:"4"}
#stage.level2 .slot:not(:last-child)::after{
  content:"➜";
  position:absolute;right:-28px;top:50%;transform:translateY(-50%);
  color:#5e9838;font-size:24px;font-weight:900;z-index:3;
}
#stage.level2 .slot .card{
  width:183px!important;height:183px!important;
  position:relative;z-index:2;
}
#stage.level2 .cards{
  left:69px!important;
  top:457px!important;
  width:852px!important;
  height:205px!important;
  display:grid!important;
  grid-template-columns:repeat(4,195px)!important;
  column-gap:24px!important;
  justify-content:start!important;
  align-items:center!important;
}
#stage.level2 #cards>.card{
  width:183px!important;height:183px!important;
  padding:5px!important;border-width:3px!important;border-radius:16px!important;
}
#stage.level2 #cards>.card img{border-radius:10px!important}



/* V16 — Niveau 2 : véritable fond vierge, sans les 3 emplacements imprimés */
#stage.level2{background-image:url('assets/images/carte-002.png')!important;}
#stage.level2 .slots{z-index:5!important;background:transparent!important;box-shadow:none!important;}

/* V17 — planches Retour aux jeux / Fiches pédagogiques */
.nav-stack{
  right:35px!important;top:245px!important;width:250px!important;gap:20px!important;z-index:80!important;
}
.nav-stack .nav{
  position:relative!important;width:250px!important;height:100px!important;padding:8px 12px 8px 78px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
  border:5px solid #6b4b24!important;border-radius:18px!important;
  color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;font-size:18px!important;font-weight:900!important;line-height:1.05!important;
  text-shadow:0 2px 2px rgba(0,0,0,.65)!important;box-shadow:0 6px 0 #3b2813,0 10px 18px rgba(0,0,0,.22)!important;
  cursor:pointer!important;transition:transform .12s ease,filter .12s ease!important;
}
.nav-stack .nav:hover{filter:brightness(1.08)!important;transform:translateY(-2px)!important}
.nav-stack .nav:active{transform:translateY(3px)!important;box-shadow:0 3px 0 #3b2813,0 5px 10px rgba(0,0,0,.2)!important}
.nav-games{background:linear-gradient(#226a9d,#164b73)!important;border-color:#7a5a2f!important}
.nav-sheets{background:linear-gradient(#3f8b39,#245f29)!important;border-color:#7a5a2f!important}
.nav-icon{
  position:absolute!important;left:13px!important;top:50%!important;transform:translateY(-50%)!important;
  width:58px!important;height:58px!important;border-radius:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  background:#fffef2!important;color:#173e1f!important;font-size:34px!important;text-shadow:none!important;
  border:3px solid rgba(50,34,17,.45)!important;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)!important;
}
.nav-copy{display:block!important;width:100%!important}
.nav-copy strong{font-size:24px!important;color:#ffd23c!important}
.nav-sheets .nav-copy strong{font-size:18px!important;color:#fff!important}

/* Aperçu vertical : conserver l’intégralité des illustrations */
.card{width:190px!important;height:270px!important;padding:6px!important;}
.card img{width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;background:#fff;border-radius:12px;}
.slot{width:260px!important;height:295px!important;}
.slot .card{width:190px!important;height:270px!important;}
.slots{height:300px!important;}
.cards{top:430px!important;height:285px!important;}
#stage.level2 .slot{width:195px!important;height:245px!important;}
#stage.level2 .slot .card{width:150px!important;height:220px!important;}
#stage.level2 .cards{top:430px!important;height:235px!important;}
#stage.level2 #cards>.card{width:150px!important;height:220px!important;}
#stage.level2 #cards>.card img{object-fit:contain!important;object-position:center!important;background:#fff;}

#stage.level2 .slots{
  left:60px!important;
  width:870px!important;
  grid-template-columns:repeat(4,195px)!important;
  column-gap:30px!important;
}
#stage.level2 .slot{
  width:195px!important;
  height:285px!important;
}
#stage.level2 .slot .card{
  width:180px!important;
  height:260px!important;
}
#stage.level2 .cards{
  left:60px!important;
  width:870px!important;
  height:280px!important;
  grid-template-columns:repeat(4,195px)!important;
  column-gap:30px!important;
}
#stage.level2 #cards>.card{
  width:180px!important;
  height:260px!important;
}
#stage.level2 .card img,
#stage.level2 #cards>.card img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* === Navigation finale : liens vides superposés aux planches de droite === */
#backBtn,
#sheetsBtn{
  position:absolute !important;
  z-index:50 !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  text-decoration:none !important;
  cursor:pointer !important;
}

/* dimensions/positions calées sur les anciennes planches */
#backBtn{
  right:0 !important;
  top:88px !important;
  width:294px !important;
  height:132px !important;
}

#sheetsBtn{
  right:0 !important;
  top:240px !important;
  width:294px !important;
  height:132px !important;
}


/* === Visuels des deux planches, sous les zones cliquables === */
.nav-visual{
  position:absolute !important;
  right:0 !important;
  width:294px !important;
  height:132px !important;
  z-index:40 !important;
  box-sizing:border-box !important;
  padding:8px 12px 8px 82px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  border:5px solid #6b4b24 !important;
  border-radius:18px !important;
  color:#fff !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:20px !important;
  font-weight:900 !important;
  line-height:1.05 !important;
  text-shadow:0 2px 2px rgba(0,0,0,.65) !important;
  box-shadow:0 6px 0 #3b2813,0 10px 18px rgba(0,0,0,.22) !important;
  pointer-events:none !important;
}
.nav-visual-games{
  top:88px !important;
  background:linear-gradient(#226a9d,#164b73) !important;
}
.nav-visual-sheets{
  top:240px !important;
  background:linear-gradient(#3f8b39,#245f29) !important;
}
.nav-visual .nav-icon{
  position:absolute !important;
  left:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:62px !important;
  height:62px !important;
  border-radius:12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fffef2 !important;
  color:#173e1f !important;
  font-size:36px !important;
  text-shadow:none !important;
  border:3px solid rgba(50,34,17,.45) !important;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08) !important;
}
.nav-visual .nav-copy{
  display:block !important;
  width:100% !important;
}
.nav-visual-games .nav-copy strong{
  font-size:27px !important;
  color:#ffd23c !important;
}
.nav-visual-sheets .nav-copy strong{
  font-size:20px !important;
  color:#fff !important;
}

/* Les liens transparents restent exactement au-dessus des planches. */
#backBtn,#sheetsBtn{z-index:50 !important;}