:root{
  --blue:#0a67ad; --navy:#0b4f8a; --orange:#f39200; --ink:#18324d;
  --bg:#eef7fc; --card:#fff; --soft:#dfeff8; --shadow:0 18px 45px rgba(8,75,122,.18);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:radial-gradient(circle at 80% 10%,#cceffc 0,#eef7fc 42%,#f7fbfe 100%)}
button{font:inherit}
.screen{display:none;min-height:100vh}.screen.active{display:block}
.levels-shell{width:min(1180px,92vw);margin:0 auto;padding:5vh 0 8vh;text-align:center}
.brand-logo{width:min(380px,65vw);height:auto;display:block;margin:0 auto 30px}
.eyebrow{font-weight:800;color:var(--blue);letter-spacing:.08em;font-size:14px}
h1{font-size:clamp(34px,4vw,64px);line-height:1.02;margin:12px 0 36px;color:var(--navy)}
.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.level-card{min-height:300px;border:0;border-radius:28px;padding:34px;text-align:left;background:white;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:22px;position:relative}
.level-card strong{font-size:31px;line-height:1.08;color:var(--navy)}
.level-card span:last-child{font-size:18px;line-height:1.4}
.level-no{font-size:13px;font-weight:900;letter-spacing:.08em;color:var(--blue)}
.level-card.available{cursor:pointer;outline:4px solid rgba(243,146,0,0);transition:.2s transform,.2s outline}
.level-card.available:hover{transform:translateY(-5px);outline-color:rgba(243,146,0,.3)}
.level-card.available:after{content:'JOUER';position:absolute;right:28px;bottom:28px;background:var(--blue);color:#fff;border-radius:999px;padding:12px 22px;font-weight:800;letter-spacing:.04em}
.level-card.locked{background:rgba(255,255,255,.72);opacity:.62}
.level-card.unlocked{opacity:1;background:#fff;border:3px solid rgba(243,146,0,.45)}
.level-card.unlocked .level-status{color:var(--blue);font-weight:900}
.level-status{font-size:24px!important}
.game-header{width:min(1580px,96vw);margin:0 auto;padding:18px 8px 12px;display:flex;align-items:end;justify-content:space-between;gap:20px}
.game-header h1{font-size:clamp(30px,3vw,48px);margin:6px 0 6px}.game-header p{margin:0;font-size:18px}
.quiet,.secondary{border:2px solid #a9cee4;background:#fff;color:var(--navy);padding:12px 20px;border-radius:14px;font-weight:800;cursor:pointer}
.game-layout{width:min(1640px,98vw);margin:0 auto 25px;display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}
.board-wrap{position:relative;aspect-ratio:1.43/1;background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.board-img{width:100%;height:100%;object-fit:fill;display:block;user-select:none;-webkit-user-drag:none}
.placed-layer{position:absolute;inset:0;pointer-events:none}
.rank-hint{position:absolute;left:14%;right:14%;top:34.5%;z-index:4;display:flex;justify-content:space-between;align-items:center;pointer-events:none;color:var(--navy);font-size:12px;font-weight:900;letter-spacing:.08em}
.rank-hint span{background:rgba(255,255,255,.96);padding:6px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(9,77,124,.08)}
.insert-guide{position:absolute;top:42.5%;height:22%;width:8.8%;z-index:5;background:rgba(10,103,173,.10);border:3px solid rgba(10,103,173,.38);border-radius:16px;transform:translateX(-50%);pointer-events:none;transition:left .08s ease}
.anchor{position:absolute;width:6.2%;min-width:62px;z-index:7;transform:translate(-50%,-50%);text-align:center;top:52%;border:0;background:transparent;padding:0;pointer-events:none}
.anchor.revealed{pointer-events:auto;cursor:pointer}
.anchor-water{left:10.4%}.anchor-sugar{left:88.2%}
.anchor img{width:100%;display:block;border-radius:8%;box-shadow:0 6px 15px rgba(0,0,0,.18)}
.anchor span{display:inline-block;margin-top:4px;font-size:9px;font-weight:900;background:#fff;color:var(--navy);border-radius:999px;padding:3px 7px;box-shadow:0 2px 6px rgba(0,0,0,.12);white-space:nowrap}
.side-panel{background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow);position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto}
.side-head h2{margin:0;color:var(--navy);font-size:28px}.side-head p{margin:5px 0 18px;color:#60758a;line-height:1.4}
.tray{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;min-height:340px}
.card-tile{position:relative;touch-action:none;user-select:none;cursor:grab;border-radius:12px;box-shadow:0 7px 16px rgba(17,68,103,.15);background:#fff;overflow:hidden;transition:.18s opacity,.18s transform}
.card-tile img{width:100%;display:block;pointer-events:none}
.card-tile.placed{opacity:.24;transform:scale(.96);pointer-events:none}
.primary{width:100%;border:0;border-radius:16px;padding:15px 20px;margin-top:18px;background:var(--blue);color:white;font-weight:900;font-size:17px;cursor:pointer}
.primary:disabled{background:#aac8dc;cursor:not-allowed}.secondary{width:100%;margin-top:10px}
.placed-card{position:absolute;width:6.2%;min-width:62px;transform:translate(-50%,-50%);z-index:8;cursor:grab;touch-action:none;user-select:none;pointer-events:auto;transition:left .25s cubic-bezier(.2,.8,.2,1),transform .25s ease,filter .25s ease}
.placed-card img{width:100%;display:block;border-radius:8%;box-shadow:0 8px 20px rgba(5,50,80,.28);pointer-events:none}
.placed-card.revealed{cursor:pointer}
.placed-card.focus-card{transform:translate(-50%,-50%) scale(1.22);filter:drop-shadow(0 0 12px rgba(243,146,0,.9));z-index:20}
.result-panel h2{margin:4px 0 8px;color:var(--navy);font-size:27px;line-height:1.08}
.result-kicker{font-size:12px;font-weight:900;letter-spacing:.09em;color:var(--orange)}
.result-intro{margin:0 0 14px;color:#4c667b;font-size:14px;line-height:1.5}
.errors-wrap{margin-top:14px}.errors-wrap>strong{display:block;color:var(--navy);font-size:14px;margin-bottom:8px}
.errors-list{display:flex;flex-direction:column;gap:9px}
.insight-row{width:100%;border:1px solid #d7e8f3;background:#f8fcff;border-radius:16px;padding:13px;text-align:left;cursor:pointer;transition:.18s border-color,.18s transform;display:flex;flex-direction:column;gap:6px}
.insight-row:hover{border-color:#91c8e6;transform:translateY(-1px)}
.single-card-insight{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center}
.single-card-insight img{width:58px;border-radius:7px;box-shadow:0 3px 8px rgba(10,79,138,.12)}
.position-focus{color:#3e617a;font-size:11px;line-height:1.38;font-weight:700}
.pair-cards{display:grid;grid-template-columns:48px 18px 48px 1fr;gap:8px;align-items:center}
.pair-cards img{width:48px;border-radius:6px;box-shadow:0 3px 8px rgba(10,79,138,.12)}
.pair-arrow{font-weight:900;color:#c57400;text-align:center;font-size:17px}
.insight-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.insight-title{color:var(--navy);font-size:13px;line-height:1.32;font-weight:900}
.value-focus{color:#a65f00;font-weight:900;font-size:11px;line-height:1.35}
.insight-text{color:#4d687d;font-size:12px;line-height:1.5}
.takeaway{margin-top:14px;padding:15px;border-radius:15px;background:#fff8ed;border:2px solid #f2bd69;display:flex;flex-direction:column;gap:8px}
.takeaway>strong{color:#a65f00;font-size:13px;letter-spacing:.06em}
.takeaway span{color:#624a2f;font-size:12px;line-height:1.5}
.takeaway .key-message{color:var(--navy);font-size:16px;line-height:1.38;font-weight:900}
.decision-box{margin-top:14px;border-radius:15px;padding:13px 14px;display:flex;flex-direction:column;gap:4px}
.decision-box strong{font-size:17px}.decision-box span{font-size:12px;line-height:1.4}
.decision-box.pass{background:#edf8f1;border:1px solid #bfe0c9;color:#23643a}
.decision-box.retry{background:#fff7ed;border:1px solid #f4d2a3;color:#87510d}
.hidden{display:none!important}
.drag-ghost{position:fixed;width:92px;z-index:9999;pointer-events:none;transform:translate(-50%,-50%) scale(1.04);filter:drop-shadow(0 15px 20px rgba(0,0,0,.28))}
.modal{position:fixed;inset:0;z-index:999;background:rgba(4,29,48,.76);display:flex;align-items:center;justify-content:center;padding:25px}
.modal-card-shell{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:94vw}
.modal-title{color:#fff;font-size:20px;font-weight:900}
.modal img{max-height:72vh;max-width:86vw;border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,.45);cursor:pointer}
.modal-tools{display:flex;gap:10px;background:rgba(255,255,255,.12);padding:6px;border-radius:999px}
.face-button{border:0;border-radius:999px;padding:9px 18px;background:#fff;color:var(--navy);font-weight:900;cursor:pointer;opacity:.72}
.face-button.active{background:var(--orange);color:#fff;opacity:1}
.modal-card-shell p{margin:0;color:#fff;font-size:13px}
.modal-close{position:fixed;right:28px;top:22px;border:0;background:#fff;color:var(--navy);width:48px;height:48px;border-radius:50%;font-size:34px;cursor:pointer}
@media(max-width:1100px){.game-layout{grid-template-columns:1fr}.side-panel{position:static;max-height:none}.tray{grid-template-columns:repeat(4,1fr);min-height:0}.level-grid{grid-template-columns:1fr}.level-card{min-height:230px}.game-header{align-items:start}}
@media(max-width:700px){.tray{grid-template-columns:repeat(2,1fr)}.game-header{flex-direction:column}.anchor{width:8.2%;min-width:48px}.placed-card{width:8.2%;min-width:48px}.rank-hint{font-size:8px;left:12%;right:12%;top:33.5%}.pair-cards{grid-template-columns:40px 15px 40px 1fr}.pair-cards img{width:40px}.modal img{max-height:67vh}}

/* V10 : débrief global, simple et centré sur trois pièges ETP. */
.mascot-bubble{
  position:absolute;
  left:57%;
  top:67%;
  z-index:15;
  width:27%;
  min-width:220px;
  padding:14px 18px;
  border-radius:18px;
  background:#fff;
  color:var(--navy);
  font-size:14px;
  line-height:1.35;
  font-weight:900;
  box-shadow:0 12px 28px rgba(8,75,122,.22);
  border:2px solid #b9d9eb;
  transform-origin:90% 100%;
}
.mascot-bubble::after{
  content:'';
  position:absolute;
  right:18px;
  bottom:-14px;
  border-width:14px 8px 0 8px;
  border-style:solid;
  border-color:#fff transparent transparent transparent;
}
.mascot-bubble.pass{border-color:#9fd4af}
.mascot-bubble.retry{border-color:#f2bd69}
.mascot-bubble.bubble-pop{animation:bubblePop .52s cubic-bezier(.2,.8,.2,1)}
@keyframes bubblePop{
  0%{opacity:0;transform:scale(.78) translateY(10px)}
  65%{opacity:1;transform:scale(1.04) translateY(-2px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

.learning-wrap{margin-top:15px}
.learning-wrap>strong{display:block;color:var(--navy);font-size:15px;margin-bottom:9px}
.learning-list{display:flex;flex-direction:column;gap:9px}
.learning-item{
  padding:12px 13px;
  border-radius:14px;
  background:#f8fcff;
  border:1px solid #d7e8f3;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.learning-item b{color:var(--navy);font-size:13px;line-height:1.3}
.learning-item span{color:#4d687d;font-size:12px;line-height:1.45}
.card-help{margin:10px 0 0;color:#60758a;font-size:11px;line-height:1.35}

/* Le repère d'insertion est une place, pas une seconde échelle. */
.insert-guide{
  top:41.5%;
  height:21%;
  width:7.2%;
  background:rgba(10,103,173,.08);
  border:2px solid rgba(10,103,173,.32);
  border-radius:14px;
}

@media(max-width:700px){
  .mascot-bubble{left:48%;top:67%;width:42%;min-width:0;font-size:11px;padding:10px 12px}
}

/* V11 : la bulle ne masque plus la mascotte ; le débrief d'échec ne révèle pas l'ordre. */
.mascot-bubble{
  left:47%;
  top:66%;
  width:25%;
  min-width:215px;
  transform-origin:100% 100%;
}
.mascot-bubble::after{
  right:-13px;
  bottom:16px;
  border-width:8px 0 8px 14px;
  border-color:transparent transparent transparent #fff;
}
.anchor span{display:none!important}
.insert-guide{width:6.8%}

@media(max-width:700px){
  .mascot-bubble{left:39%;top:66%;width:44%;min-width:0}
}

/* V12 : correction progressive. Seules les cartes déjà bien ordonnées se retournent. */
.placed-card.locked-answer{
  cursor:pointer;
  filter:drop-shadow(0 0 8px rgba(10,103,173,.16));
}
#play-panel.retrying .tray{display:none}
#play-panel.retrying .side-head p{margin-bottom:10px}

/* Expression de réussite issue de la mascotte officielle fournie, sans fond ajouté. */
.happy-face{
  position:absolute;
  left:73.55%;
  top:67.7%;
  width:10.5%;
  height:auto;
  z-index:6;
  pointer-events:none;
  transform-origin:center;
  animation:happyFaceIn .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes happyFaceIn{
  0%{opacity:0;transform:scale(.78)}
  65%{opacity:1;transform:scale(1.025)}
  100%{opacity:1;transform:scale(1)}
}
.success-sparkles{
  position:absolute;
  left:70.5%;
  top:59%;
  width:18%;
  height:28%;
  z-index:5;
  pointer-events:none;
}
.success-sparkles i{position:absolute;width:10px;height:10px;background:var(--orange);border-radius:2px;animation:spark 1.15s ease-in-out infinite alternate}
.success-sparkles i:nth-child(1){left:8%;top:42%;transform:rotate(25deg);animation-delay:.05s}
.success-sparkles i:nth-child(2){left:32%;top:5%;background:#39a94b;transform:rotate(55deg);animation-delay:.18s}
.success-sparkles i:nth-child(3){right:25%;top:9%;background:#0a67ad;transform:rotate(15deg);animation-delay:.3s}
.success-sparkles i:nth-child(4){right:5%;top:41%;background:#8e5ab5;transform:rotate(70deg);animation-delay:.12s}
.success-sparkles i:nth-child(5){left:23%;bottom:5%;background:#e9473f;transform:rotate(40deg);animation-delay:.4s}
@keyframes spark{from{opacity:.42;transform:translateY(4px) rotate(20deg) scale(.75)}to{opacity:1;transform:translateY(-5px) rotate(70deg) scale(1.15)}}

@media(max-width:700px){
  .happy-face{left:73.55%;top:67.7%;width:10.5%}
  .success-sparkles{left:69%;top:58%;width:20%;height:30%}
}


/* V13 : correction fiable par tentative + expression de réussite mieux intégrée. */
.happy-face{
  left:73.55%;
  top:66.1%;
  width:10.5%;
  /* On conserve l'expression de réussite mais le bas de la surimpression
     s'arrête avant les épaules et les bras de la mascotte du plateau. */
  clip-path:inset(0 0 18% 0 round 18%);
}
.success-sparkles{
  left:68.6%;
  top:56.5%;
  width:22.5%;
  height:33%;
}
.success-sparkles i{width:8px;height:8px}
.success-sparkles i:nth-child(6){left:2%;top:16%;background:#8e5ab5;transform:rotate(34deg);animation-delay:.22s}
.success-sparkles i:nth-child(7){left:18%;top:2%;background:#f39200;transform:rotate(68deg);animation-delay:.48s}
.success-sparkles i:nth-child(8){left:49%;top:14%;background:#e9473f;transform:rotate(18deg);animation-delay:.32s}
.success-sparkles i:nth-child(9){right:8%;top:18%;background:#39a94b;transform:rotate(51deg);animation-delay:.56s}
.success-sparkles i:nth-child(10){right:1%;bottom:22%;background:#0a67ad;transform:rotate(27deg);animation-delay:.26s}
.success-sparkles i:nth-child(11){left:49%;bottom:0;background:#f39200;transform:rotate(74deg);animation-delay:.62s}

@media(max-width:700px){
  .happy-face{left:73.55%;top:66.1%;width:10.5%}
  .success-sparkles{left:67.5%;top:56%;width:24%;height:34%}
}

/* V14 : visage de réussite détouré, bouche complète, aucune surimpression sur les épaules. */
.happy-face{
  left:73.55%;
  top:66.1%;
  width:10.5%;
  clip-path:none;
}


/* V15 : la main d'origine du plateau repasse au premier plan sur le visage de réussite.
   Aucun changement de mécanique ni de placement des cartes. */
.mascot-hand-restore{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  z-index:7;
  pointer-events:none;
}

.levels-complete{margin:0 0 24px;padding:12px 16px;border:1px solid #9fd4af;border-radius:14px;background:#f0faf3;color:#246b3f;font-weight:800}
.bonus-level-card.unlocked{border-color:rgba(243,146,0,.7);background:#fffaf2}
@media(max-width:1350px){.level-grid{grid-template-columns:repeat(2,1fr)}}

.choice-main{min-height:100vh;display:grid;place-items:center;padding:32px;background:linear-gradient(180deg,#edf9ff 0%,#ffffff 100%)}
.choice-shell{width:min(1120px,96vw);background:#fff;border:1px solid #d8eaf4;border-radius:30px;padding:40px;box-shadow:0 22px 55px rgba(8,75,122,.13)}
.choice-logo{width:230px;height:auto;margin-bottom:18px}
.choice-shell h1{font-size:clamp(38px,5vw,64px);color:var(--navy);margin:8px 0 12px}
.choice-intro{font-size:19px;line-height:1.5;color:#4c6b7e;max-width:760px}
.game-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.game-choice-card{min-height:320px;border-radius:26px;padding:32px;text-decoration:none;display:flex;flex-direction:column;gap:16px;position:relative;box-sizing:border-box}
.game-choice-card strong{font-size:34px;line-height:1.05;color:var(--navy)}
.game-choice-card p{font-size:18px;line-height:1.5;color:#45657b;margin:0}
.choice-no{font-size:13px;font-weight:900;letter-spacing:.1em;color:var(--blue)}
.game-choice-active{background:#f5fbff;border:2px solid #abd4e9;box-shadow:var(--shadow);transition:.2s transform,.2s border-color}
.game-choice-active:hover{transform:translateY(-5px);border-color:var(--blue)}
.choice-cta{margin-top:auto;align-self:flex-start;background:var(--blue);color:white;border-radius:999px;padding:13px 22px;font-weight:900}
.game-choice-soon{background:#fafafa;border:2px dashed #c8d9e2}
.choice-soon-label{margin-top:auto;align-self:flex-start;background:#eef2f4;color:#607887;border-radius:999px;padding:11px 18px;font-weight:900;font-size:12px;letter-spacing:.06em}
.levels-intro{font-size:18px;line-height:1.5;color:#4c6b7e;max-width:760px;margin:0 0 24px}
.level-card .level-status{margin-top:auto;font-size:12px!important;font-weight:900;letter-spacing:.05em;color:#c56f00}
.level-card.unlocked{border:3px solid rgba(243,146,0,.55);background:#fffaf2}
.level-card.unlocked.available:after{content:'JOUER'}
@media(max-width:800px){.game-choice-grid{grid-template-columns:1fr}.choice-shell{padding:24px}.game-choice-card{min-height:270px}}

/* V3 · cartes de parcours lisibles */
.level-card{padding-bottom:105px!important}
.level-card span:not(.level-no):not(.level-status){display:block}
.level-card .level-status{
  position:absolute;
  left:34px;
  bottom:42px;
  margin:0;
  font-size:12px!important;
  font-weight:900;
  letter-spacing:.04em;
  color:#378151;
}
.level-card.available:after{right:28px;bottom:28px}
.level-card.completed{background:#fff}
.level-card.completed .level-status{color:#378151}
.mascot-bubble span{white-space:pre-line}