*{box-sizing:border-box}
html,body{
  margin:0;width:100%;height:100%;overflow:hidden;
  background:#246f32;font-family:"Trebuchet MS",Arial,sans-serif
}
body{display:flex;align-items:center;justify-content:center}
button{font:inherit}

.game{
  position:relative;
  width:min(100vw,calc(100vh * 1591 / 989));
  aspect-ratio:1591/989;
  container-type:inline-size;
  overflow:hidden;
  user-select:none;
  background:#246f32;
  transform-origin:center center;
}
.skin{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}

.hotspot{
  position:absolute;z-index:20;border:0;background:transparent;color:transparent;
  padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent
}
.hotspot:focus-visible{outline:4px solid rgba(255,255,255,.8);outline-offset:-4px}

/* ===== niveaux ===== */
.level-btn{top:10.5%;width:8.0%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center}
.level-btn[data-level="0"]{left:34.2%}
.level-btn[data-level="1"]{left:46.9%}
.level-btn[data-level="2"]{left:59.4%}
.level-num{
  color:#5a3a12;font-weight:1000;font-size:clamp(18px,2.8cqw,38px);
  text-shadow:0 2px 0 rgba(255,255,255,.35);pointer-events:none
}
.level-btn.active .level-num{color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.5)}
.level-glow{
  position:absolute;z-index:15;width:8.9%;aspect-ratio:1;border-radius:50%;
  border:5px solid #8fe25e;box-shadow:0 0 16px #b6ff7a;
  pointer-events:none;transition:left .18s ease;top:9.55%;left:33.75%
}

/* ===== consigne ===== */
.instruction-bar{
  position:absolute;z-index:16;left:25.0%;top:21.9%;width:50.4%;height:6.3%;
  display:flex;align-items:center;gap:.8%;
  background:rgba(255,250,235,.96);border:3px solid #8a5a25;border-radius:18px;
  padding:0 1.4%;cursor:pointer;text-align:left
}
.instruction-icon{font-size:clamp(14px,1.5cqw,23px);flex:0 0 auto}
#instructionText{
  font-size:clamp(10px,1.15cqw,17px);font-weight:700;color:#4a3115;line-height:1.15;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical
}

/* ===== score ===== */
.score-plaque{
  position:absolute;z-index:16;left:84.1%;top:3.2%;width:13.0%;height:9.3%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  pointer-events:none
}
.score-line{
  font-size:clamp(9px,1.05cqw,16px);font-weight:800;color:#5a3a12;
  text-shadow:0 1px 0 rgba(255,255,255,.4)
}
.score-line strong{color:#7a3e0d}

/* ===== grand tableau : plus large et sans ascenseur ===== */
.board-zone{
  position:absolute;z-index:14;left:19.6%;top:33.0%;width:62.4%;height:35.8%;
  overflow:hidden;padding:.65%
}
.board{display:grid;gap:5px;width:100%;height:100%}
.board .head{
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:clamp(9px,1.05cqw,15px);color:#4a3115;
  background:#f3e6c8;border:2px solid #c8a35c;border-radius:8px;padding:2px;
  min-width:0;min-height:0
}
.board .target{
  background:#fffdf6;border:2px dashed #c8a35c;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  min-width:0;min-height:0;position:relative;overflow:hidden
}
.board .target.correct{background:#e3f6da;border-color:#4c9a2a;border-style:solid}
.board .target.wrong{background:#fbe3e1;border-color:#c94a3f;border-style:solid}

/* Niveaux 2/3 : pastille simple */
.color-splotch{
  width:clamp(20px,3.8cqw,44px);aspect-ratio:1;border-radius:50%;
  background:var(--splotch);border:2px solid rgba(0,0,0,.25);
  display:block;box-shadow:0 2px 2px rgba(0,0,0,.14)
}

/* Niveau 1 : vraie tache de peinture irrégulière */
.board[data-level="0"] .color-splotch{
  width:clamp(25px,4.5cqw,52px);
  border:0;
  border-radius:0;
  clip-path:polygon(
    50% 1%,61% 9%,73% 6%,79% 17%,92% 20%,89% 34%,
    99% 45%,90% 55%,94% 69%,80% 74%,76% 89%,61% 86%,
    50% 99%,39% 88%,24% 92%,20% 78%,7% 72%,12% 58%,
    1% 49%,10% 38%,6% 24%,21% 20%,26% 7%,40% 11%
  );
  box-shadow:0 2px 3px rgba(0,0,0,.25),inset 0 0 0 2px rgba(0,0,0,.12);
  transform:rotate(-6deg)
}
.board[data-level="0"] .head:nth-child(3n) .color-splotch{transform:rotate(9deg) scale(.94)}
.board[data-level="0"] .head:nth-child(4n) .color-splotch{transform:rotate(16deg) scale(1.04)}

/* ===== réserve : grande et sans scroll ===== */
.tray-zone{
  position:absolute;z-index:14;left:19.4%;top:69.4%;width:62.8%;height:12.8%;
  overflow:hidden;padding:.55%
}
.pieces{
  display:flex;flex-wrap:nowrap;gap:.7%;align-items:center;justify-content:center;
  width:100%;height:100%;min-width:0
}

/* ===== pièces ===== */
.piece{
  width:clamp(32px,5.5cqw,72px);height:clamp(32px,5.5cqw,72px);
  max-width:9.2%;max-height:94%;border-radius:11px;
  background:#fffdf6;border:2px solid #c8a35c;
  display:flex;align-items:center;justify-content:center;
  cursor:grab;touch-action:none;box-shadow:0 2px 0 rgba(0,0,0,.15);
  flex:0 1 auto
}
.piece.dragging-ghost{
  position:fixed;z-index:80;cursor:grabbing;
  box-shadow:0 6px 14px rgba(0,0,0,.35);pointer-events:none
}
.drag-placeholder{background:rgba(0,0,0,.08);border-radius:10px}
.silhouette{
  font-size:32px;line-height:1;color:var(--piece-color,#111);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(18px,3.8cqw,45px);height:clamp(18px,3.8cqw,45px)
}
.silhouette svg{width:100%;height:100%}
.silhouette.small{width:clamp(15px,2.9cqw,32px);height:clamp(15px,2.9cqw,32px)}

/* ===== feedback ===== */
.feedback{
  position:absolute;z-index:16;left:20%;top:82.4%;width:62%;height:2.6%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(8px,.9cqw,13px);font-weight:800;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none
}
.encouragement{
  position:absolute;z-index:30;left:27%;top:40%;width:46%;
  background:rgba(255,250,235,.98);border:3px solid #8a5a25;border-radius:14px;
  padding:2%;text-align:center;font-weight:800;color:#4a3115;
  font-size:clamp(11px,1.3cqw,18px)
}
.victory-panel{
  position:absolute;z-index:40;left:19.6%;top:33%;width:62.4%;height:49.2%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,20,8,.55);border-radius:12px
}
.victory-panel[hidden],.encouragement[hidden]{display:none}
.victory-card{
  background:linear-gradient(#fff2c4,#eebc68);border:5px solid #70451f;border-radius:20px;
  box-shadow:0 8px 0 #44280f;padding:4% 6%;text-align:center;color:#2c261d
}
.victory-icon{font-size:clamp(28px,3.5cqw,52px)}
.victory-title{font-size:clamp(16px,2cqw,27px);font-weight:1000;margin-top:4px}
.victory-text{font-size:clamp(10px,1.2cqw,16px);margin-top:4px}

/* ===== boutons bas ===== */
.sound-hotspot{left:33.0%;top:84.0%;width:8.8%;aspect-ratio:1;border-radius:50%}
.reset-hotspot{left:45.7%;top:84.0%;width:8.8%;aspect-ratio:1;border-radius:50%}
.validate-hotspot{left:58.7%;top:84.0%;width:8.8%;aspect-ratio:1;border-radius:50%}
.btn-caption{
  position:absolute;z-index:16;text-align:center;
  font-size:clamp(8px,.85cqw,12px);font-weight:800;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none
}
.sound-caption{left:32.5%;top:94.0%;width:9.8%}
.reset-caption{left:45.1%;top:94.0%;width:10%}
.validate-caption{left:58.1%;top:94.0%;width:10%}
.hotspot:active{filter:brightness(1.12);transform:scale(.97)}
.sound-hotspot.muted{filter:grayscale(1) brightness(.75)}

/* ===== mobile paysage : zones tactiles et tableau maximisés ===== */
@media (orientation:landscape) and (max-height:650px){
  .game{width:min(100vw,calc(100vh * 1591 / 989))}
  .board-zone{left:18.8%;width:64%;top:32.5%;height:36.8%}
  .tray-zone{left:18.8%;width:64%;top:69.6%;height:13.2%}
  .piece{border-width:1px}
  .board .head,.board .target{border-width:1px}
  .instruction-bar{border-width:2px}
}

/* ===== mobile portrait : rotation automatique du jeu =====
   Ainsi le tableau reste grand et le drag & drop reste exploitable. */
@media (orientation:portrait) and (max-width:900px){
  body{position:relative}
  .game{
    position:absolute;
    left:50%;top:50%;
    width:min(100vh,calc(100vw * 1591 / 989));
    max-width:none;
    transform:translate(-50%,-50%) rotate(90deg);
  }
  .piece{border-width:1px;border-radius:7px}
  .board .head,.board .target{border-width:1px;border-radius:5px}
  .instruction-bar{border-width:1px;border-radius:8px}
  .level-glow{border-width:2px}
  .hotspot:focus-visible{outline-width:2px}
}

/* =========================================================
   CORRECTIONS VISUELLES V2
   ========================================================= */

/* Le fond généré contient des exemples dessinés.
   Ces fonds opaques les masquent : seul le vrai jeu dynamique reste visible. */
.board-zone{
  background:rgba(255,248,226,.985);
  border-radius:14px;
}
.tray-zone{
  background:rgba(255,248,226,.985);
  border-radius:12px;
}

/* Sélecteurs de niveaux recalés sur les trois médaillons du décor.
   Fond opaque bois = pas de double 1/2/3. */
.level-btn{
  top:10.55% !important;
  width:7.15% !important;
  background:
    radial-gradient(circle at 50% 42%,#d9982d 0 43%,#b16f18 44% 61%,#744113 62% 100%) !important;
  border:3px solid #6e3e13 !important;
  box-shadow:inset 0 0 0 4px rgba(255,191,65,.5),0 3px 0 rgba(80,43,10,.55);
}
.level-btn[data-level="0"]{left:34.85% !important}
.level-btn[data-level="1"]{left:47.15% !important}
.level-btn[data-level="2"]{left:59.55% !important}

.level-glow{
  top:9.65% !important;
  width:8.15% !important;
  left:34.35% !important;
}

.level-num{
  color:#6a3b13 !important;
  font-size:clamp(18px,2.55cqw,34px) !important;
}
.level-btn.active .level-num{color:#fff !important}

/* Le cartouche généré contient déjà du texte : on le masque avec un cartouche propre. */
.score-plaque{
  background:rgba(255,248,226,.985);
  border:2px solid #8a5a25;
  border-radius:10px;
}

/* Les libellés "Son / Recommencer / Valider" sont déjà dessinés sur le fond. */
.btn-caption{display:none !important}

/* Tableau dynamique : compact quand il n'y a que 2 formes,
   puis il grandit avec la difficulté. */
.board{
  margin:auto;
}
.board[data-rows="2"][data-cols="2"]{width:72%;height:72%}
.board[data-rows="2"][data-cols="3"]{width:84%;height:74%}
.board[data-rows="3"][data-cols="2"]{width:78%;height:88%}
.board[data-rows="3"][data-cols="3"]{width:94%;height:94%}
.board[data-rows="4"][data-cols="3"]{width:100%;height:100%}

/* Réserve : seules les cartes de l'exercice courant sont visibles.
   Plus il y a peu de cartes, plus elles sont grandes. */
.pieces[data-count="4"] .piece{width:clamp(48px,8cqw,92px);height:clamp(48px,8cqw,92px);max-width:18%}
.pieces[data-count="6"] .piece{width:clamp(42px,6.7cqw,78px);height:clamp(42px,6.7cqw,78px);max-width:14%}
.pieces[data-count="9"] .piece,
.pieces[data-count="12"] .piece{width:clamp(34px,5.2cqw,66px);height:clamp(34px,5.2cqw,66px);max-width:10%}

/* Taches niveau 1 plus organiques et moins "étoiles". */
.board[data-level="0"] .color-splotch{
  clip-path:polygon(
    50% 2%,58% 10%,70% 6%,76% 17%,88% 19%,86% 32%,
    97% 42%,90% 53%,94% 65%,82% 72%,78% 86%,64% 84%,
    53% 97%,41% 89%,29% 94%,24% 80%,10% 75%,14% 61%,
    3% 51%,12% 40%,8% 27%,22% 22%,28% 9%,41% 13%
  ) !important;
}

/* Mobile : garder le tableau et la réserve contenus après rotation. */
@media (orientation:portrait) and (max-width:900px){
  .board-zone,.tray-zone{border-radius:7px}
  .level-btn{border-width:1px !important}
  .score-plaque{border-width:1px}
}


/* =========================================================
   CORRECTION V3 : CARTES DEJA PLACEES DANS LE TABLEAU
   ========================================================= */

/* Dans la réserve, on garde les tailles adaptatives existantes.
   MAIS une fois déposée dans une case, la carte doit redevenir grande. */
.board .target > .piece,
.board .target .piece{
  width:min(72%,76px) !important;
  height:min(78%,76px) !important;
  max-width:none !important;
  max-height:none !important;
  min-width:38px;
  min-height:38px;
  flex:none !important;
  padding:4px;
  border-width:2px;
  border-radius:12px;
}

/* La silhouette remplit réellement la carte déposée. */
.board .target .piece .silhouette{
  width:78% !important;
  height:78% !important;
  max-width:none !important;
  max-height:none !important;
}

/* Les petites silhouettes utilisées dans les en-têtes restent inchangées,
   sauf lorsqu'elles se trouvent dans une carte déposée. */
.board .target .piece .silhouette.small{
  width:72% !important;
  height:72% !important;
}

/* Tableaux très simples : cartes encore plus confortables. */
.board[data-rows="2"] .target .piece{
  width:min(78%,86px) !important;
  height:min(82%,86px) !important;
}

/* Mobile : garder une grande cible tactile sans dépasser de la case. */
@media (orientation:portrait) and (max-width:900px){
  .board .target .piece{
    width:74% !important;
    height:78% !important;
    min-width:30px;
    min-height:30px;
    padding:2px;
    border-width:1px;
    border-radius:7px;
  }
}


/* =========================================================
   V4 — NIVEAUX : IMAGE D'ORIGINE + SIMPLE CERCLE VERT
   ========================================================= */
.level-btn{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  top:10.15% !important;
  width:7.65% !important;
}
.level-btn[data-level="0"]{left:34.55% !important}
.level-btn[data-level="1"]{left:46.95% !important}
.level-btn[data-level="2"]{left:59.35% !important}

/* Les chiffres sont déjà dessinés sur l'image : pas de chiffre HTML par-dessus. */
.level-num{display:none !important}

.level-glow{
  top:9.55% !important;
  width:8.75% !important;
  aspect-ratio:1 !important;
  border-radius:50% !important;
  border:5px solid #73db39 !important;
  background:transparent !important;
  box-shadow:0 0 10px rgba(115,219,57,.9),0 0 20px rgba(115,219,57,.55) !important;
  pointer-events:none;
}

/* Bouton séparé après réussite : on ne reclique plus sur Valider. */
.next-exercise-btn{
  position:absolute;
  z-index:45;
  left:69.2%;
  top:85.9%;
  width:12.5%;
  height:6.3%;
  border:3px solid #6d4214;
  border-radius:18px;
  background:linear-gradient(#9be84d,#61bd2d);
  box-shadow:0 4px 0 #397d1c,0 5px 8px rgba(0,0,0,.25);
  color:#fff;
  font-weight:1000;
  font-size:clamp(10px,1.2cqw,17px);
  text-shadow:0 2px 1px rgba(0,0,0,.25);
  cursor:pointer;
}
.next-exercise-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #397d1c}
.next-exercise-btn[hidden]{display:none !important}

/* Une fois l'exercice validé, le bouton Valider du décor reste visible
   mais sa zone interactive est neutralisée par le JS. */
@media (orientation:portrait) and (max-width:900px){
  .level-glow{border-width:2px !important}
  .next-exercise-btn{
    border-width:1px;
    border-radius:8px;
    box-shadow:0 2px 0 #397d1c;
  }
}


/* =========================================================
   V5 — VALIDATION UNIQUEMENT QUAND TOUTES LES CARTES SONT PLACEES
   ========================================================= */
.validate-hotspot.disabled,
.validate-hotspot:disabled{
  pointer-events:none !important;
  cursor:default !important;
  opacity:.38;
  filter:grayscale(.65) brightness(.85);
}

/* Le bouton Valider du décor reste visible, mais son hotspot est inactif. */
.validate-hotspot:not(.disabled){
  opacity:1;
  filter:none;
}

/* Zone de correction : elle prend exactement la place de la réserve de cartes. */
.correction-panel{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2%;
  padding:1% 2%;
  background:rgba(255,248,226,.985);
  border-radius:12px;
  text-align:left;
}
.correction-panel[hidden]{display:none !important}

.correction-title{
  color:#8b4e14;
  font-weight:1000;
  font-size:clamp(11px,1.25cqw,18px);
  white-space:nowrap;
}
.correction-text{
  flex:1;
  color:#4a3115;
  font-weight:700;
  font-size:clamp(9px,1.0cqw,15px);
  line-height:1.15;
}

/* Le bouton Suivant est maintenant DANS la zone où se trouvaient les cartes. */
.correction-panel .next-exercise-btn{
  position:static !important;
  width:auto !important;
  min-width:15%;
  height:auto !important;
  padding:9px 18px;
  flex:0 0 auto;
  border:3px solid #6d4214;
  border-radius:18px;
  background:linear-gradient(#9be84d,#61bd2d);
  box-shadow:0 4px 0 #397d1c,0 5px 8px rgba(0,0,0,.22);
  color:#fff;
  font-weight:1000;
  font-size:clamp(10px,1.1cqw,16px);
  text-shadow:0 2px 1px rgba(0,0,0,.25);
  cursor:pointer;
}

@media (orientation:portrait) and (max-width:900px){
  .correction-panel{
    border-radius:6px;
    gap:1%;
    padding:.6% 1%;
  }
  .correction-panel .next-exercise-btn{
    padding:5px 10px;
    border-width:1px;
    border-radius:8px;
    box-shadow:0 2px 0 #397d1c;
  }
}


/* V6 corrections */
.board .target.corrected-error{background:#fbe3e1!important;border-color:#d94338!important;border-style:solid!important;box-shadow:inset 0 0 0 2px rgba(217,67,56,.14)}
.board .target.corrected-error .piece{border-color:#d94338!important;box-shadow:0 0 0 2px rgba(217,67,56,.18),0 2px 0 rgba(0,0,0,.12)!important}
.feedback{z-index:35!important;color:#4a3115!important;background:rgba(255,248,226,.96);border:2px solid #c89a50;border-radius:10px;text-shadow:none!important;padding:.25% .8%;height:3.2%!important;top:82.1%!important}
.correction-panel{z-index:32;position:relative}.correction-title{color:#a63a24!important}
.correction-panel .next-exercise-btn{display:inline-flex!important;align-items:center;justify-content:center;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
.correction-panel .next-exercise-btn[hidden]{display:none!important}
.level-3-mask{position:absolute;z-index:14;left:58.75%;top:9.0%;width:9.0%;aspect-ratio:1;border-radius:50%;border:9px solid rgba(74,190,238,.96);pointer-events:none}
.level-glow{z-index:18!important;top:9.55%!important;width:8.75%!important;border:5px solid #73db39!important;box-shadow:0 0 10px rgba(115,219,57,.95),0 0 20px rgba(115,219,57,.55)!important}
@media (orientation:portrait) and (max-width:900px){.level-3-mask{border-width:3px}.level-glow{border-width:2px!important}.feedback{border-width:1px;border-radius:5px}}


/* =========================================================
   V7 — CORRECTIONS FIABLES
   ========================================================= */

/* IMPORTANT : lorsqu'on masque les cartes de réserve,
   elles ne doivent plus occuper la place du panneau de correction. */
.pieces[hidden]{
  display:none !important;
}

/* Le panneau de correction recouvre exactement l'ancienne réserve. */
.tray-zone{
  position:absolute;
}
.correction-panel{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:40 !important;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:2%;
  padding:1% 2%;

  background:rgba(255,248,226,.99);
  border:2px solid #d1a153;
  border-radius:12px;

  visibility:visible;
  opacity:1;
}
.correction-panel[hidden]{
  display:none !important;
}

.correction-title{
  font-weight:1000 !important;
  color:#9d3d20 !important;
  white-space:nowrap;
}
.correction-text{
  flex:1;
  color:#4a3115 !important;
  font-weight:800 !important;
}

/* Bouton suivant toujours visible dans le panneau. */
.correction-panel .next-exercise-btn{
  position:static !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;

  width:auto !important;
  min-width:16%;
  height:auto !important;

  padding:9px 18px;
  border:3px solid #6d4214;
  border-radius:18px;

  background:linear-gradient(#9be84d,#61bd2d);
  color:#fff;

  box-shadow:0 4px 0 #397d1c,0 5px 8px rgba(0,0,0,.22);

  font-weight:1000;
  font-size:clamp(10px,1.1cqw,16px);
  cursor:pointer;

  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Message principal bien visible au-dessus des boutons du bas. */
.feedback{
  z-index:45 !important;
  top:82.0% !important;
  height:3.4% !important;

  display:flex !important;
  align-items:center;
  justify-content:center;

  padding:.25% 1%;
  background:rgba(255,248,226,.98) !important;
  border:2px solid #c89a50;
  border-radius:10px;

  color:#4a3115 !important;
  text-shadow:none !important;
  font-weight:900 !important;
}

/* Bonnes réponses : vert. */
.board .target.correct{
  background:#e3f6da !important;
  border-color:#4c9a2a !important;
  border-style:solid !important;
}

/* Mauvaises réponses replacées par la correction : restent rouges. */
.board .target.corrected-error{
  background:#fbe3e1 !important;
  border-color:#d94338 !important;
  border-style:solid !important;
  box-shadow:inset 0 0 0 2px rgba(217,67,56,.14);
}
.board .target.corrected-error .piece{
  border-color:#d94338 !important;
  box-shadow:0 0 0 2px rgba(217,67,56,.18),0 2px 0 rgba(0,0,0,.12) !important;
}

/* ---------------------------------------------------------
   NIVEAUX
   Le fond contient déjà les médaillons et leurs chiffres.
   Aucun bouton graphique supplémentaire : seulement un cercle vert
   autour du niveau réellement actif.
   --------------------------------------------------------- */
.level-glow{
  display:none !important;
}

.level-btn{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  top:10.55% !important;
  width:6.25% !important;
  aspect-ratio:1 !important;
  overflow:visible !important;
}

.level-btn[data-level="0"]{left:35.35% !important}
.level-btn[data-level="1"]{left:47.40% !important}
.level-btn[data-level="2"]{left:59.45% !important}

.level-num{
  display:none !important;
}

.level-btn::after{
  content:"";
  position:absolute;
  inset:-10%;
  border-radius:50%;
  border:5px solid transparent;
  pointer-events:none;
}

.level-btn.active::after{
  border-color:#65d83a;
  box-shadow:
    0 0 9px rgba(101,216,58,.95),
    0 0 18px rgba(101,216,58,.58);
}

/* Plus aucun faux halo permanent sur le niveau 3. */
.level-3-mask{
  display:none !important;
}

@media (orientation:portrait) and (max-width:900px){
  .correction-panel{
    border-width:1px;
    border-radius:6px;
    gap:1%;
    padding:.6% 1%;
  }

  .correction-panel .next-exercise-btn{
    padding:5px 10px;
    border-width:1px;
    border-radius:8px;
    box-shadow:0 2px 0 #397d1c;
  }

  .feedback{
    border-width:1px;
    border-radius:5px;
  }

  .level-btn.active::after{
    border-width:2px;
  }
}


/* =========================================================
   V8 — SELECTION DE NIVEAU SIMPLIFIEE
   ========================================================= */

/* Plus aucun halo, cercle ou anneau autour des niveaux. */
.level-glow,
.level-3-mask,
.level-btn::after{
  display:none !important;
}

/* Les zones restent cliquables mais totalement transparentes. */
.level-btn{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  top:10.55% !important;
  width:6.25% !important;
  aspect-ratio:1 !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
}

.level-btn[data-level="0"]{left:35.35% !important}
.level-btn[data-level="1"]{left:47.40% !important}
.level-btn[data-level="2"]{left:59.45% !important}

/* Le chiffre du décor reste visible pour les niveaux non sélectionnés.
   Pour le niveau actif, on affiche simplement le chiffre HTML en BLANC. */
.level-num{
  display:none !important;
}

.level-btn.active .level-num{
  display:block !important;
  color:#ffffff !important;
  font-weight:1000 !important;
  font-size:clamp(20px,2.7cqw,38px) !important;
  line-height:1 !important;
  text-shadow:
    0 2px 2px rgba(0,0,0,.7),
    0 0 4px rgba(0,0,0,.35) !important;
  pointer-events:none !important;
}

/* =========================================================
   SCORE — TEXTE DIRECTEMENT DANS LE CARTOUCHE DU FOND
   ========================================================= */

/* On enlève le cartouche CSS ajouté : celui du background suffit. */
.score-plaque{
  left:84.05% !important;
  top:3.15% !important;
  width:13.2% !important;
  height:9.7% !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.35% !important;

  padding:0 !important;
}

/* Même rendu que ton exemple :
   Exercice 1/10
   Score 0/10 */
.score-line{
  color:#5a2d0c !important;
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:clamp(10px,1.18cqw,17px) !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55) !important;
}

.score-line strong{
  color:#5a2d0c !important;
  font-weight:900 !important;
}

@media (orientation:portrait) and (max-width:900px){
  .level-btn.active .level-num{
    font-size:clamp(15px,2.7cqw,28px) !important;
  }

  .score-line{
    font-size:clamp(8px,1.15cqw,13px) !important;
  }
}


/* =========================================================
   V9 — SCORE : SUPPRESSION DE LA SURIMPRESSION
   ========================================================= */

/* On garde le cartouche BOIS du fond, mais on masque uniquement
   le texte imprimé à l'intérieur avec un panneau parchemin propre. */
.score-plaque{
  left:84.45% !important;
  top:3.05% !important;
  width:12.75% !important;
  height:9.35% !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;

  padding:0 !important;

  /* masque seulement l'intérieur du cartouche */
  background:#fff3cf !important;
  border:0 !important;
  border-radius:8px !important;
  box-shadow:none !important;

  overflow:hidden !important;
}

/* Texte recentré, sans doublon */
.score-line{
  width:100%;
  margin:0 !important;
  padding:0 !important;

  text-align:center !important;

  color:#5a2d0c !important;
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:clamp(9px,1.0cqw,15px) !important;
  font-weight:800 !important;
  line-height:1.08 !important;

  text-shadow:none !important;
  white-space:nowrap !important;
}

.score-line strong{
  color:#5a2d0c !important;
  font-weight:900 !important;
}

/* mobile */
@media (orientation:portrait) and (max-width:900px){
  .score-plaque{
    left:84.45% !important;
    top:3.05% !important;
    width:12.75% !important;
    height:9.35% !important;
    border-radius:4px !important;
  }

  .score-line{
    font-size:clamp(7px,.95cqw,12px) !important;
  }
}


/* =========================================================
   V10 — SCORE REFAIT PROPREMENT
   Le texte d'origine a été retiré directement de background.png.
   ========================================================= */
.score-plaque{
  left:85.78% !important;
  top:5.15% !important;
  width:10.75% !important;
  height:6.75% !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  overflow:visible !important;
}

.score-line{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  color:#5b2e0d !important;
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:clamp(9px,.95cqw,14px) !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  text-shadow:none !important;
  white-space:nowrap !important;
}
.score-line strong{
  color:#5b2e0d !important;
  font-weight:900 !important;
}


/* V11 FINAL — niveaux sans halo, chiffre actif blanc et centré */
.level-glow,
.level-3-mask,
.level-btn::after{
  display:none !important;
}

.level-btn{
  top:11.25% !important;
  width:6.25% !important;
  aspect-ratio:1 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
}

.level-btn[data-level="0"]{left:36.10% !important}
.level-btn[data-level="1"]{left:48.48% !important}
.level-btn[data-level="2"]{left:60.55% !important}

.level-num{
  display:grid !important;
  place-items:center !important;
  width:46% !important;
  aspect-ratio:1 !important;
  border-radius:50% !important;
  background:radial-gradient(circle,#d69128 0 66%,#c67a1f 67% 100%) !important;
  color:#6b3d16 !important;
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-weight:900 !important;
  font-size:clamp(18px,2.25cqw,32px) !important;
  line-height:1 !important;
  text-shadow:0 1px 0 rgba(255,214,112,.45) !important;
  pointer-events:none !important;
}

.level-btn.active .level-num{
  color:#fff !important;
  text-shadow:0 2px 2px rgba(72,37,8,.75) !important;
}

@media (orientation:portrait) and (max-width:900px){
  .level-num{font-size:clamp(13px,2.25cqw,23px) !important}
}


/* =========================================================
   V12 — PANNEAU "RETOUR AUX JEUX" DU BACKGROUND CLIQUABLE
   ========================================================= */
.retour-jeux-bg{
  position:absolute;
  z-index:60;

  /* Zone du panneau déjà dessiné en haut à droite du background */
  left:80.5%;
  top:6.90%;
  width:19.0%;
  height:18.0%;

  display:block;
  background:transparent;
  border:0;
  border-radius:18px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.retour-jeux-bg:hover{
  filter:brightness(1.06);
}

.retour-jeux-bg:focus-visible{
  outline:4px solid rgba(255,255,255,.95);
  outline-offset:-5px;
}

/* Zone suffisamment grande pour le tactile, sans modifier le graphisme. */
@media (orientation:portrait) and (max-width:900px){
  .retour-jeux-bg:focus-visible{
    outline-width:2px;
  }
}