/* ============================================================
   Séance de jeu : carte-question, moteurs, correction, bilan
   ============================================================ */

.plein { min-height: 100dvh; background: var(--c-wash, var(--pays-bg)); }
.seance { min-height: 100dvh; display: flex; flex-direction: column; }
.seance__haut { display: flex; align-items: center; gap: var(--s4); width: min(100% - 2 * var(--gouttiere), 46rem); margin: 0 auto; padding-block: var(--s4) var(--s2); }
.seance__titre { width: min(100% - 2 * var(--gouttiere), 46rem); margin: 0 auto; font-family: var(--f-titre); font-weight: 700; color: var(--c-deep); font-size: var(--t-sm); }
.seance__etiquette { margin-right: .5rem; padding: .05rem .5rem; color: var(--c-on); background: var(--c); border-radius: 5px 5px 5px 1px; font-size: var(--t-xs); letter-spacing: .04em; }
.seance__zone { flex: 1; display: flex; flex-direction: column; }
.btn-rond--son { margin-left: auto; }

/* — Progression : une languette par question — */
.segments { flex: 1; display: flex; gap: 6px; padding: 0; margin: 0; list-style: none; }
.segment { flex: 1; height: .85rem; max-width: 4rem; background: rgb(27 24 56 / .15); border-radius: 99px; transition: background var(--d-moyen), transform var(--d-moyen) var(--ease-rebond); }
.segment--juste { background: var(--juste); }
.segment--faux { background: var(--faux); }
.segment--courant { background: var(--c); transform: scaleY(1.3); box-shadow: 0 0 0 3px #fff; }
.segment--relance { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgb(255 255 255 / .55) 4px 7px); }

/* — La scène : la carte, et Fenn à côté — */
.scene { position: relative; flex: 1; width: min(100% - 2 * var(--gouttiere), 46rem); margin: var(--s7) auto var(--s6); }
.carte {
  --fond-pli: var(--c-wash, var(--pays-bg));
  padding: var(--s6) clamp(1.2rem, 5vw, 2.4rem) var(--s6) clamp(2.5rem, 8vw, 4.6rem);
  background-color: var(--feuille);
  --seyes-force: .65;
}
@media (max-width: 38rem) {
  .scene { margin: var(--s4) auto var(--s3); }
  .carte {
    padding: var(--s4) clamp(0.75rem, 3.5vw, 1.25rem) var(--s4) clamp(1.4rem, 5vw, 2.4rem);
  }
}
.carte__consigne { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-bottom: var(--s3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-deep, var(--encre-2)); padding-right: var(--pli); }
.carte__compteur { margin-left: .7rem; color: var(--encre-3); letter-spacing: .02em; }
.carte__enonce { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem); line-height: 1.25; margin-bottom: var(--s5); font-weight: 700; letter-spacing: -.01em; text-wrap: pretty; }
.carte__enonce math { font-size: 1.08em; }
.carte__visuel { display: grid; place-items: center; margin-bottom: var(--s5); padding: var(--s3); background: rgb(255 255 255 / .86); border: 2.5px dashed var(--trait); border-radius: 16px; }
.carte__visuel[hidden], .carte__indice[hidden], .carte__fenn-conseil[hidden] { display: none; }
.carte__outils { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.carte__outils:empty { display: none; }
.btn-outil { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.4rem; padding: .3rem .85rem; font-weight: 700; font-size: var(--t-sm); background: #fff; border: 2.5px solid var(--encre); border-radius: 10px 10px 10px 3px; box-shadow: 0 3px 0 var(--encre); }
.btn-outil:hover { background: var(--astuce); }
.btn-outil:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--encre); }
.btn-outil--fenn { border-color: #EA580C; color: #9A3412; }
.btn-outil--fenn:hover { background: #FFEDD5; }
.carte__indice { margin-bottom: var(--s4); padding: var(--s3) var(--s4); background: #FFF6CC; border-left: 6px solid var(--astuce); border-radius: 4px 12px 12px 4px; font-size: var(--t-sm); }
.carte__fenn-conseil { margin-bottom: var(--s4); padding: var(--s3) var(--s4); background: #FFF4E5; border-left: 6px solid #F97316; border-radius: 4px 12px 12px 4px; font-size: var(--t-sm); color: var(--encre); animation: carte-entre .3s var(--ease-rebond) both; }
.carte.entre, .bilan__carte.entre { animation: carte-entre .5s var(--ease-rebond) both; }
@keyframes carte-entre { from { opacity: 0; transform: translateY(18px) rotate(-.8deg); } }

/* — Fenn — */
.compagnon { position: absolute; right: 2.4rem; top: -5.6rem; transform: scale(.58); transform-origin: right bottom; pointer-events: none; z-index: 3; }
@media (min-width: 72rem) {
  .compagnon { right: -11rem; top: auto; bottom: .5rem; transform: scale(1); transform-origin: center bottom; }
}
@media (max-width: 38rem) {
  .compagnon { right: .8rem; top: -4.4rem; transform: scale(.44); }
}
.compagnon--bilan { position: relative; right: auto; top: auto; transform: none; display: grid; justify-items: center; margin-top: -1.2rem; }
.fenn { overflow: visible; filter: drop-shadow(0 6px 0 rgb(27 24 56 / .12)); }
.fenn * { transform-box: fill-box; }
.fenn .arc, .fenn .bouche--joie, .fenn .bouche--oups, .fenn__sourcil { display: none; }
.fenn__tete { transform-origin: 50% 100%; }
.fenn__queue { transform-origin: 0 50%; animation: queue 3.4s ease-in-out infinite; }
.fenn__patte { transform-origin: 80% 100%; }
.oeil { transform-origin: 50% 50%; animation: cligne 5s infinite; }
@keyframes cligne { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes queue { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
.fenn--joie .oeil { display: none; }
.fenn--joie .arc, .fenn--joie .bouche--joie { display: inline; }
.fenn--joie .bouche--neutre { display: none; }
.fenn--joie .fenn__tete { animation: saut .6s var(--ease-rebond); }
.fenn--joie .fenn__queue { animation-duration: .5s; }
@keyframes saut { 30% { transform: translateY(-14px) rotate(-3deg); } 60% { transform: translateY(0) rotate(2deg); } }
.fenn--oups .fenn__sourcil, .fenn--oups .bouche--oups { display: inline; }
.fenn--oups .bouche--neutre { display: none; }
.fenn--oups .sg { transform: rotate(-12deg); } .fenn--oups .sd { transform: rotate(12deg); }
.fenn--oups .fenn__tete { transform: rotate(-5deg); transition: transform .3s var(--ease); }
.fenn--reflexion .fenn__sourcil.sd, .fenn--reflexion .bouche--oups { display: inline; }
.fenn--reflexion .bouche--neutre { display: none; }
.fenn--reflexion .fenn__tete { transform: rotate(4deg); }
.fenn--salut .fenn__patte { animation: salut 1.1s ease-in-out infinite; }
@keyframes salut { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-22deg) translateY(-4px); } }
.fenn--salut .bouche--neutre { display: none; }
.fenn--salut .bouche--joie { display: inline; }

/* Sprites Blender 2D animés de Fenn */
.fenn-sprite {
  object-fit: contain;
  filter: drop-shadow(0 6px 0 rgb(27 24 56 / .14));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  vertical-align: middle;
  transform-origin: center bottom;
}
.fenn-2d-anim {
  display: inline-block;
  position: relative;
  overflow: hidden !important;
  vertical-align: middle;
  user-select: none;
  flex-shrink: 0;
  --fenn-row: 0;
}
.fenn-2d-anim.fenn--neutre    { --fenn-row: 0; }
.fenn-2d-anim.fenn--salut     { --fenn-row: 1; }
.fenn-2d-anim.fenn--reflexion { --fenn-row: 2; }
.fenn-2d-anim.fenn--oups      { --fenn-row: 3; }
.fenn-2d-anim.fenn--joie      { --fenn-row: 4; }

.fenn-2d-anim > .fenn-feuille-2d {
  position: absolute !important;
  left: 0 !important;
  top: calc(var(--fenn-row, 0) * -100%) !important;
  display: block !important;
  width: 800% !important;
  height: 500% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill;
  pointer-events: none;
  transform: translate3d(0%, 0, 0);
  animation: fenn-cycle-blender-2d 0.88s steps(8, end) infinite !important;
}
.fenn-2d-anim.fenn--joie > .fenn-feuille-2d {
  animation-duration: 0.68s !important;
}
.fenn-2d-anim.fenn--salut > .fenn-feuille-2d {
  animation-duration: 0.76s !important;
}
@keyframes fenn-cycle-blender-2d {
  0%   { transform: translate3d(0%, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

.fenn-sprite.fenn--neutre {
  animation: fenn-respire-2d 2.4s ease-in-out infinite !important;
}
.fenn-sprite.fenn--joie {
  animation: saut-sprite 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) infinite !important;
}
.fenn-sprite.fenn--salut {
  animation: salut-sprite 1.2s ease-in-out infinite !important;
}
.fenn-sprite.fenn--oups {
  animation: oups-sprite 0.65s ease-in-out infinite !important;
}
.fenn-sprite.fenn--reflexion {
  animation: reflexion-sprite 2.2s ease-in-out infinite !important;
}
@keyframes fenn-respire-2d {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.02, 0.99); }
}
@keyframes saut-sprite {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-12px) scale(1.05) rotate(-2deg); }
  75%      { transform: translateY(-2px) scale(0.98) rotate(1.5deg); }
}
@keyframes salut-sprite {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%      { transform: rotate(-3.5deg) translateY(-5px); }
}
@keyframes oups-sprite {
  0%, 100% { transform: rotate(-3deg) translateX(0); }
  25%      { transform: rotate(-6deg) translateX(-3px) translateY(-3px); }
  75%      { transform: rotate(2deg) translateX(3px); }
}
@keyframes reflexion-sprite {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50%      { transform: rotate(-2.5deg) translateY(-4px); }
}

/* — Pied : vérifier / retour — */
.pied { position: sticky; bottom: 0; z-index: 10; background: #fff; border-top: 3px solid rgb(27 24 56 / .12); padding-block: var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); transition: background var(--d-moyen); }
.pied.est-juste { background: var(--juste-wash); border-top-color: var(--juste); }
.pied.est-faux { background: var(--faux-wash); border-top-color: var(--faux); }
.pied > * { width: min(100% - 2 * var(--gouttiere), 46rem); margin-inline: auto; }
.pied__action { display: flex; justify-content: flex-end; }
.pied__action .btn { min-width: 12rem; min-height: 3.2rem; font-size: 1.1rem; }
.pied .btn[hidden] { display: none; }
.retour { display: flex; gap: var(--s4); margin-bottom: var(--s4); animation: retour-in .35s var(--ease-rebond); }
.retour[hidden] { display: none; }
@keyframes retour-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 32rem) {
  .pied { padding-block: var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)); }
  .pied__action { width: 100%; }
  .pied__action .btn { width: 100%; min-width: 0; min-height: 3rem; }
  .retour { gap: var(--s2); margin-bottom: var(--s3); }
  .retour__icone { width: 2.2rem; height: 2.2rem; }
}
.retour__icone { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: #fff; }
.retour__icone .ico { width: 22px; height: 22px; stroke-width: 3; }
.retour--juste .retour__icone { background: var(--juste); }
.retour--faux .retour__icone { background: var(--faux); }
.retour__titre { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-md); }
.retour--juste .retour__titre { color: var(--juste-deep); }
.retour--faux .retour__titre { color: var(--faux-deep); }
.retour__attendu { margin-top: .15rem; }
.retour__explication { margin-top: .25rem; font-size: var(--t-sm); color: var(--encre); max-width: 60ch; }
.btn-action--suite { --b: var(--encre) !important; --b-deep: #000 !important; --b-on: #fff !important; }
.pied.est-juste .btn-action--suite { --b: var(--juste) !important; --b-deep: var(--juste-deep) !important; }
.pied.est-faux .btn-action--suite { --b: var(--faux) !important; --b-deep: var(--faux-deep) !important; }

/* ========== Moteurs de jeu ========== */

/* — Choisir — */
.qcm { display: grid; gap: var(--s3); }
.ticket {
  display: flex; align-items: center; gap: var(--s4); width: 100%; min-height: 3.6rem; padding: .7rem 1.1rem .7rem .8rem;
  text-align: left; font-size: var(--t-md); line-height: 1.3; background: #fff; color: var(--encre);
  border: 2.5px solid var(--encre); border-radius: 14px 14px 14px 4px; box-shadow: 0 4px 0 var(--encre);
  transition: transform var(--d-rapide) var(--ease), background var(--d-rapide), box-shadow var(--d-rapide);
}
.ticket:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--encre); background: var(--c-wash, #F6F4FB); }
.ticket:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.ticket__cle, .op__cle, .tuile__cle, .mot-banque__cle, .pastille__cle, .boite__cle {
  flex: none; display: grid; place-items: center;
  font-family: var(--f-titre); font-weight: 700;
  background: var(--feuille-2); color: var(--encre); border: 1.5px solid var(--encre); border-radius: 6px 6px 6px 2px;
}
.ticket__cle { width: 2rem; height: 2rem; font-size: .95rem; border-width: 2px; border-radius: 8px 8px 8px 2px; }
.op__cle { width: 1.4rem; height: 1.4rem; font-size: .75rem; margin-bottom: .2rem; }
.tuile__cle, .mot-banque__cle, .pastille__cle { width: 1.4rem; height: 1.4rem; font-size: .78rem; }
.boite__cle { width: 1.5rem; height: 1.5rem; font-size: .82rem; }
.tuile.est-pose .tuile__cle { display: none; }
.ticket.est-choisi { background: var(--c-wash, #EAE6FF); border-color: var(--c-deep, var(--encre)); box-shadow: 0 4px 0 var(--c-deep, var(--encre)); transform: translateY(-1px); }
.ticket.est-choisi .ticket__cle { background: var(--c); color: var(--c-on); border-color: var(--c-deep); }
.ticket.est-juste { background: var(--juste-wash); border-color: var(--juste-deep); box-shadow: 0 4px 0 var(--juste-deep); }
.ticket.est-juste .ticket__cle { background: var(--juste-deep); color: #fff; border-color: var(--juste-deep); }
.ticket.est-faux { background: var(--faux-wash); border-color: var(--faux-deep); box-shadow: 0 4px 0 var(--faux-deep); animation: secoue .4s; }
.ticket.est-faux .ticket__cle { background: var(--faux-deep); color: #fff; border-color: var(--faux-deep); }
.ticket:disabled:not(.est-juste):not(.est-faux) { opacity: .55; }
@keyframes secoue { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* — Écrire — */
.saisie__ligne { display: flex; align-items: center; gap: var(--s3); }
.saisie .champ, .mesure .champ { max-width: 22rem; min-height: 3.6rem; font-family: var(--f-titre); font-weight: 700; font-size: 1.6rem; letter-spacing: -.01em; }
.saisie__unite { font-family: var(--f-titre); font-weight: 700; font-size: 1.4rem; color: var(--encre-2); }
.champ.est-juste { border-color: var(--juste-deep); background: var(--juste-wash); }
.champ.est-faux { border-color: var(--faux-deep); background: var(--faux-wash); animation: secoue .4s; }
.accents { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: var(--s3); }
.accent { min-width: 2.5rem; min-height: 2.5rem; font-family: var(--f-titre); font-weight: 700; font-size: 1.15rem; background: #fff; border: 2px solid var(--encre); border-radius: 9px 9px 9px 2px; box-shadow: 0 2px 0 var(--encre); }
.accent:hover { background: var(--astuce); }
.accent:active { transform: translateY(2px); box-shadow: none; }
.saisie__retour { min-height: 1.5rem; margin-top: var(--s2); color: var(--faux-deep); font-weight: 700; font-size: var(--t-sm); }

/* — Classer — */
.tri { display: grid; gap: var(--s5); }
.tri__reserve { display: flex; flex-wrap: wrap; gap: .6rem; min-height: 4.2rem; padding: .8rem; background: rgb(255 255 255 / .8); border: 3px dashed var(--trait); border-radius: 16px; }
.tri__reserve.est-vide::after { content: "Tout est rangé. Vérifie, puis valide."; align-self: center; color: var(--encre-3); font-size: var(--t-sm); }
.tri__boites { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--s3); }
.boite { display: grid; grid-template-rows: auto 1fr; background: var(--c-wash, #EEF); border: 3px solid var(--c, var(--encre)); border-radius: 16px 16px 16px 4px; overflow: hidden; }
.boite__titre { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .9rem; font-family: var(--f-titre); font-weight: 700; font-size: 1.05rem; text-align: left; background: var(--c); color: var(--c-on); }
.boite__aide { font-family: var(--f-texte); font-weight: 400; font-size: var(--t-xs); opacity: .9; }
.boite__contenu { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .5rem; min-height: 6rem; padding: .7rem; }
.a-selection .boite { animation: appel 1.2s ease-in-out infinite; }
@keyframes appel { 50% { box-shadow: 0 0 0 5px var(--astuce); } }
.pastille, .tuile {
  display: inline-flex; align-items: center; gap: .45em; padding: .5rem .95rem; font-size: var(--t-base); line-height: 1.25; text-align: left;
  background: #fff; color: var(--encre); border: 2.5px solid var(--encre); border-radius: 11px 11px 11px 3px; box-shadow: 0 3px 0 var(--encre); cursor: grab;
  transition: transform var(--d-rapide) var(--ease), background var(--d-rapide);
}
.pastille:hover:not(:disabled), .tuile:hover:not(:disabled) { transform: translateY(-2px); }
.pastille.est-choisi { background: var(--astuce); transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 6px 0 var(--encre); }
.pastille.est-juste, .tuile.est-juste, .relie.est-juste { background: var(--juste-wash); border-color: var(--juste-deep); box-shadow: 0 3px 0 var(--juste-deep); }
.pastille.est-faux, .tuile.est-faux, .relie.est-faux { background: var(--faux-wash); border-color: var(--faux-deep); box-shadow: 0 3px 0 var(--faux-deep); }
.pastille__bon { color: var(--faux-deep); font-weight: 700; font-size: var(--t-xs); }
.pastille:disabled, .tuile:disabled, .relie:disabled { cursor: default; }

/* — Trouver la faute — */
.faute__phrase { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); line-height: 2.1; text-wrap: pretty; max-width: none; }
.mot { padding: .02em .22em; margin-inline: -.05em; border-radius: 8px; border-bottom: 3px dashed transparent; color: inherit; font: inherit; line-height: inherit; }
.mot:hover:not(:disabled) { background: var(--c-wash, #EEF); border-bottom-color: var(--c, var(--encre)); }
.mot.est-choisi { background: var(--astuce); border-bottom: 3px solid var(--encre); }
.mot.est-faute { text-decoration: line-through; text-decoration-color: var(--faux); text-decoration-thickness: 3px; color: var(--faux-deep); background: var(--faux-wash); }
.mot.est-faute.est-juste { background: var(--juste-wash); color: var(--juste-deep); text-decoration-color: var(--juste); }
.mot.est-faux { background: var(--faux-wash); }
.faute__corr { margin-left: .3em; padding: 0 .35em; color: var(--juste-deep); font-weight: 700; background: var(--juste-wash); border-radius: 8px; }
.faute__aide { margin-top: var(--s3); color: var(--encre-3); font-size: var(--t-sm); }
.mot:disabled { cursor: default; }

/* — Remettre dans l'ordre — */
.ordre { display: grid; gap: var(--s5); }
.ordre__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; min-height: 4.4rem; margin: 0; padding: .8rem .2rem; list-style: none; border-bottom: 4px solid var(--encre); }
.ordre__ligne.est-vide::before { content: attr(data-vide); color: var(--encre-3); font-style: italic; }
.ordre__ligne li { display: contents; }
.ordre__banque { display: flex; flex-wrap: wrap; gap: .6rem; padding: .8rem; background: rgb(255 255 255 / .8); border: 3px dashed var(--trait); border-radius: 16px; min-height: 4rem; }
.tuile { cursor: pointer; font-size: var(--t-md); }
.tuile.est-pose { background: var(--c-wash, #EEF); border-color: var(--c-deep, var(--encre)); box-shadow: 0 3px 0 var(--c-deep, var(--encre)); }

/* — Relier — */
.paires { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 34rem) { .paires { gap: var(--s3); } }
.paires__col { display: grid; gap: var(--s3); padding: 0; margin: 0; list-style: none; align-content: start; }
.relie { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 3.4rem; padding: .55rem .8rem; text-align: left; font-size: var(--t-base); line-height: 1.3; background: #fff; border: 2.5px solid var(--encre); border-radius: 12px 12px 12px 3px; box-shadow: 0 3px 0 var(--encre); transition: transform var(--d-rapide) var(--ease); }
.relie:hover:not(:disabled) { transform: translateY(-2px); }
.relie.est-choisi { background: var(--astuce); transform: translateY(-3px); box-shadow: 0 6px 0 var(--encre); }
.relie__badge { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; font-family: var(--f-titre); font-weight: 700; font-size: .9rem; border-radius: 50%; background: transparent; border: 2px dashed var(--trait); }
.relie[data-c="0"] { background: #FFF0A6; } .relie[data-c="1"] { background: #CFE8FF; } .relie[data-c="2"] { background: #FFD3E1; } .relie[data-c="3"] { background: #CDEFD3; } .relie[data-c="4"] { background: #E0D6FF; }
.relie[data-c] .relie__badge { background: var(--encre); color: #fff; border: 0; }
.relie[data-c=""] .relie__badge { background: transparent; color: transparent; }

/* — Colorier une fraction — */
.fraction__barre { display: grid; grid-template-columns: repeat(var(--d), 1fr); height: 4.4rem; overflow: hidden; border: 3px solid var(--encre); border-radius: 14px 14px 14px 4px; box-shadow: 0 4px 0 var(--encre); }
.part { background: #fff; border-right: 3px solid var(--encre); transition: background var(--d-rapide); }
.part:last-child { border-right: 0; }
.part:hover:not(:disabled) { background: var(--c-wash, #EEF); }
.part.est-remplie { background: var(--c, var(--maths)); }
.part.est-juste { background: var(--juste); }
.part.est-attendue { box-shadow: inset 0 0 0 5px var(--juste); }
.fraction__compte { margin-top: var(--s3); color: var(--encre-2); font-size: var(--t-sm); }

/* — Équilibrer — */
.balance { display: grid; gap: var(--s4); }
.balance__scene { position: relative; height: 8.5rem; margin-top: var(--s2); }
.balance__poutre { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; padding-inline: 4%; }
.balance__poutre::before { content: ""; position: absolute; left: 3%; right: 3%; top: 1.6rem; height: .7rem; background: var(--encre); border-radius: 99px; }
.plateau { position: relative; width: 44%; margin-top: 3.4rem; display: grid; place-items: center; min-height: 3.6rem; padding: .5rem; font-size: 1.4rem; background: #fff; border: 3px solid var(--encre); border-radius: 6px 6px 36px 36px; box-shadow: 0 4px 0 var(--encre); }
.plateau::before, .plateau::after { content: ""; position: absolute; top: -1.8rem; width: 3px; height: 1.8rem; background: var(--encre); transform-origin: bottom; }
.plateau::before { left: 18%; transform: rotate(-14deg); } .plateau::after { right: 18%; transform: rotate(14deg); }
.balance__pied { position: absolute; left: 50%; top: 1.6rem; bottom: 0; width: 5rem; transform: translateX(-50%); background: var(--c); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); opacity: .9; z-index: -1; }
.balance__poutre.oscille .plateau { animation: tangue .7s var(--ease-rebond); }
.balance__poutre.secoue .plateau { animation: secoue .4s; border-color: var(--faux-deep); }
@keyframes tangue { 30% { transform: translateY(-8px); } 70% { transform: translateY(3px); } }
.balance__etapes { display: grid; gap: .4rem; padding: 0; margin: 0; list-style: none; }
.balance__etapes li { padding: .45rem .8rem; background: rgb(255 255 255 / .85); border-left: 6px solid var(--c); border-radius: 4px 10px 10px 4px; font-size: var(--t-sm); }
.balance__etapes li:last-child { font-weight: 700; }
.balance__ops { display: flex; flex-wrap: wrap; gap: var(--s3); }
.op { display: grid; gap: 0; justify-items: center; min-width: 6.4rem; padding: .55rem 1rem .5rem; font-family: var(--f-titre); font-weight: 700; font-size: 1.5rem; line-height: 1.15; background: #fff; border: 2.5px solid var(--encre); border-radius: 12px 12px 12px 3px; box-shadow: 0 4px 0 var(--encre); transition: transform var(--d-rapide) var(--ease), background var(--d-rapide); }
.op small { font-family: var(--f-texte); font-weight: 400; font-size: .72rem; color: var(--encre-2); }
.op:hover { background: var(--astuce); transform: translateY(-2px); }
.op:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.balance__aide { min-height: 1.5rem; color: var(--faux-deep); font-weight: 700; font-size: var(--t-sm); }
.balance.est-juste .plateau { border-color: var(--juste-deep); background: var(--juste-wash); }

/* — Compléter — */
.completer { display: grid; gap: var(--s5); }
.completer__phrase { margin: 0; max-width: none; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); line-height: 2.5; text-wrap: pretty; }
.blanc {
  display: inline-block; min-width: 5.4rem; min-height: 2rem; padding: .05em .45em; margin: 0 .15em; vertical-align: -.3em;
  font: inherit; line-height: 1.4; color: var(--encre); background: #fff;
  border: 2.5px dashed var(--encre); border-radius: 10px 10px 10px 3px; box-shadow: 0 3px 0 var(--encre); cursor: pointer;
  transition: transform var(--d-rapide) var(--ease), background var(--d-rapide);
}
.blanc:hover:not(:disabled) { background: var(--c-wash, #EEF); transform: translateY(-2px); }
.blanc__vide { display: inline-block; min-width: 3.6rem; }
.blanc__mot { font-weight: 700; }
.blanc__bon { display: block; font-size: .68em; font-weight: 700; color: var(--faux-deep); }
.blanc.est-juste { background: var(--juste-wash); border-style: solid; border-color: var(--juste-deep); box-shadow: 0 3px 0 var(--juste-deep); }
.blanc.est-faux { background: var(--faux-wash); border-style: solid; border-color: var(--faux-deep); box-shadow: 0 3px 0 var(--faux-deep); animation: secoue .4s; }
.blanc:disabled { cursor: default; }
.completer__banque { display: flex; flex-wrap: wrap; gap: .6rem; min-height: 4rem; padding: .8rem; background: rgb(255 255 255 / .8); border: 3px dashed var(--trait); border-radius: 16px; }
.mot-banque {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .5rem .95rem; font-size: var(--t-base); font-weight: 700; line-height: 1.25; background: #fff; color: var(--encre);
  border: 2.5px solid var(--encre); border-radius: 11px 11px 11px 3px; box-shadow: 0 3px 0 var(--encre); cursor: pointer;
  transition: transform var(--d-rapide) var(--ease), background var(--d-rapide);
}
.mot-banque:hover:not(:disabled) { transform: translateY(-2px); background: var(--astuce); }
.mot-banque:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.mot-banque:disabled { opacity: .5; cursor: default; }

/* — Lire une mesure — */
.mesure { display: grid; gap: var(--s4); }
.mesure__instrument { width: 100%; }

/* — Placer — */
.placer { display: grid; gap: var(--s3); }
.placer__axe, .placer__grille {
  position: relative; background: rgb(255 255 255 / .85);
  border: 2.5px solid var(--encre); border-radius: 14px 14px 14px 4px; box-shadow: 0 4px 0 var(--encre);
}
.placer__axe { height: 6.6rem; cursor: pointer; }
.placer__axe::before { content: ""; position: absolute; left: 4%; right: 4%; top: 3rem; height: .3rem; background: var(--encre); border-radius: 99px; }
.placer__grads, .placer__etiqs { position: absolute; inset: 0 4%; }
.placer__grad { position: absolute; top: 3rem; width: 2.5px; height: .95rem; background: var(--encre); transform: translateX(-50%); }
.placer__etiq { position: absolute; top: 4.4rem; transform: translateX(-50%); font-family: var(--f-titre); font-weight: 700; font-size: .82rem; color: var(--encre-2); white-space: nowrap; }
.placer__point {
  position: absolute; width: 0; height: 0; transform: translate(-50%, -100%); pointer-events: none;
  border-left: .6rem solid transparent; border-right: .6rem solid transparent; border-top: 1.4rem solid var(--francais);
  filter: drop-shadow(0 2px 0 var(--encre));
}
.placer__axe .placer__point { top: 3rem; }
.placer__axe .placer__point.est-juste { border-top-color: var(--juste-deep); }
.placer__axe .placer__point.est-faux { border-top-color: var(--faux-deep); }
.placer__grille { width: min(100%, 24rem); aspect-ratio: 1; cursor: crosshair; overflow: hidden; }
.placer__grille .placer__point {
  width: 1.15rem; height: 1.15rem; transform: translate(-50%, -50%); filter: none;
  background: var(--francais); border: 2.5px solid var(--encre); border-radius: 50%;
}
.placer__grille .placer__point.est-juste { background: var(--juste); border-color: var(--juste-deep); }
.placer__grille .placer__point.est-faux { background: var(--faux); border-color: var(--faux-deep); }
.placer__gx, .placer__gy { position: absolute; background: var(--trait); }
.placer__gx { top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.placer__gy { left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.placer__gx.est-axe { width: 2.5px; background: var(--encre); }
.placer__gy.est-axe { height: 2.5px; background: var(--encre); }
.placer__axe:focus-visible, .placer__grille:focus-visible { outline: 3px solid var(--astuce); outline-offset: 4px; }
.placer__etat { margin: 0; color: var(--encre-2); font-size: var(--t-sm); }

/* — Figures (SVG des contenus) — */
.figure { width: auto; max-width: 100%; height: auto; max-height: 15rem; }
.figure text, .fig-t, .fig-n { font-family: var(--f-titre); font-weight: 700; fill: var(--encre); }
.fig-t { font-size: 14px; } .fig-t--s { font-size: 11px; } .fig-n { font-size: 17px; }

/* ========== Bilan ========== */

.bilan { position: relative; width: min(100% - 2 * var(--gouttiere), 38rem); margin: var(--s7) auto var(--s8); }
.bilan__carte { --fond-pli: var(--c-wash); position: relative; padding: var(--s7) clamp(1.4rem, 6vw, 3rem) var(--s6) clamp(2.4rem, 9vw, 4.4rem); text-align: center; background-color: var(--feuille); border-radius: var(--r-feuille); box-shadow: var(--ombre-3); }
.bilan__carte::after { content: ""; position: absolute; top: 0; right: 0; width: var(--pli); height: var(--pli); background: linear-gradient(225deg, var(--fond-pli) 0 50%, #DCD6F0 50% 100%); border-top-right-radius: var(--r-feuille); }
.bilan__carte .carte__consigne { justify-content: center; padding: 0; }
.bilan__titre { font-size: var(--t-2xl); letter-spacing: -.04em; outline: none; }
.bilan__etoiles { display: flex; justify-content: center; gap: .3rem; margin-block: var(--s4); }
.bilan__etoile { display: inline-block; opacity: .9; }
.bilan__etoile.est-gagnee { animation: etoile-pop .7s var(--ease-rebond) both; animation-delay: calc(.3s + var(--i) * .26s); }
.bilan__etoile:not(.est-gagnee) { transform: scale(.85); }
@keyframes etoile-pop { 0% { opacity: 0; transform: scale(0) rotate(-50deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.bilan__message { font-size: var(--t-md); margin-inline: auto; margin-bottom: var(--s3); }
.bilan__note { margin: var(--s2) auto; color: var(--encre-2); font-size: var(--t-sm); display: flex; align-items: center; justify-content: center; gap: .4rem; max-width: none; }
.bilan__note--serie { color: #B84A00; font-weight: 700; }
.bilan__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s5); }

@media (max-width: 38rem) {
  .bilan { margin: var(--s4) auto var(--s6); }
  .bilan__carte { padding: var(--s5) clamp(1rem, 4vw, 1.6rem) var(--s4) clamp(1.4rem, 5vw, 2.2rem); }
}
@media (max-width: 30rem) {
  .bilan__actions .btn { width: 100%; min-width: 0; }
}
/* Donjon : carte lisible et énigmes complètes, sans texte miniature sur canvas. */
.page-entre > main:has(.donjon-modal, .arene-jeu-modal), .page-entre > .plein > main:has(.donjon-modal, .arene-jeu-modal) { animation: none; transform: none; }
.donjon-modal { position: fixed; inset: 0; z-index: 2000; background: #12172be8; display: grid; place-items: center; padding: 1rem; overflow-y: auto; }
.donjon-fenetre { width: min(1100px, 100%); max-height: calc(100dvh - 2rem); overflow: auto; color: #182c32; background: #fffdf4; border: 3px solid #182c32; border-radius: 22px; box-shadow: 0 20px 70px #0008; padding: clamp(1rem, 2vw, 1.75rem); }
.donjon-entete { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; border-bottom: 2px solid #d7dbc8; padding-bottom: .8rem; margin-bottom: 1rem; }
.donjon-surtitre { font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: #486555; margin: 0 0 .35rem; }
.donjon-titre { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; }
.donjon-intro { display: flex; gap: 1.5rem; align-items: center; padding: 1rem 0; max-width: 850px; margin: auto; }
.donjon-intro h3 { font-size: 1.6rem; margin-top: 0; }
.donjon-intro p, .donjon-intro li { line-height: 1.6; }
.donjon-intro li { margin: .5rem 0; }
.donjon-stats { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.donjon-stats span { background: #e9efda; border: 1px solid #b9c9a5; border-radius: 10px; padding: .45rem .8rem; }
.donjon-corps { display: grid; grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr); gap: 1.5rem; }
.donjon-grille { display: grid; grid-template-columns: repeat(9, 1fr); background: #193f35; gap: 3px; border: 7px solid #193f35; border-radius: 12px; max-width: min(100%, calc((100dvh - 400px) * 9 / 7)); margin-inline: auto; }
.donjon-case { aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 5px; background: #e0e9b8; color: #16463c; font-size: clamp(1.1rem, 2.4vw, 1.9rem); cursor: pointer; box-shadow: inset 0 -4px #9fb887; }
.donjon-case:hover:not(:disabled) { background: #fff6a7; }
.donjon-case:focus-visible, .donjon-direction button:focus-visible { outline: 4px solid #e67b10; outline-offset: 1px; z-index: 1; }
.donjon-mur { background: repeating-linear-gradient(0deg, #356352 0 8px, #2c5346 8px 10px); box-shadow: inset 0 4px #50806a; cursor: default; }
.donjon-fenn { background: #ffe59b; box-shadow: inset 0 0 0 3px #bc6d22; }
.donjon-fenn .fenn { width: min(90%, 42px); height: auto; margin: auto; pointer-events: none; }
.donjon-fenn img { max-width: 100%; height: auto; }
.donjon-autel { background: #dad0f8; color: #573c8a; }
.donjon-acquis { background: #b4e2d4; color: #166b4d; }
.donjon-legende { font-size: .9rem; line-height: 1.6; margin-bottom: 0; }
.donjon-mission { background: #f1ecd9; border: 1px solid #dbd3b3; border-radius: 14px; padding: 1rem; }
.donjon-mission h3 { margin: .4rem 0; font-size: 1.3rem; }
.donjon-message { line-height: 1.55; min-height: 6em; }
.donjon-direction { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 44px); gap: 5px; justify-content: center; margin: 1rem 0; }
.donjon-direction button { border: 2px solid #486555; border-radius: 8px; background: #fffdf4; color: #182c32; font-size: 1.5rem; cursor: pointer; }
.donjon-direction button:first-child { grid-column: 2; }
.donjon-direction button:nth-child(2) { grid-column: 1; grid-row: 2; }
.donjon-direction button:nth-child(3) { grid-column: 2; grid-row: 2; }
.donjon-direction button:nth-child(4) { grid-column: 3; grid-row: 2; }
.donjon-enigme { max-width: 820px; margin: auto; }
.donjon-question { font-size: clamp(1.25rem, 3vw, 1.8rem); line-height: 1.45; margin: .7rem 0; }
.donjon-figure { max-height: 240px; overflow: auto; }
.donjon-figure svg { max-width: 100%; max-height: 230px; }
.donjon-outils, .donjon-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1rem 0; }
.donjon-actions { justify-content: space-between; border-top: 1px solid #d7dbc8; padding-top: 1rem; }
.donjon-exercice { padding: 1rem; background: #fff; border: 1px solid #d7dbc8; border-radius: 12px; font-size: 1.05rem; }
.donjon-correction, .donjon-aide-texte { background: #e7efdd; padding: 1rem; border-radius: 12px; margin-top: 1rem; line-height: 1.55; }
.donjon-bilan { display: flex; gap: 1rem; flex-wrap: wrap; }
.donjon-bilan div { padding: .8rem; border-radius: 12px; background: #e9efda; }
.donjon-bilan dd { margin: .4rem 0 0; font-weight: 800; font-size: 1.5rem; }
.miroirs-commandes { display: flex; flex-wrap: wrap; gap: .5rem; margin: .65rem 0; }
.miroirs-commandes button { min-height: 44px; }
.sentier-pagination { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; font-size: .85rem; }
@media (max-width: 720px) {
  .donjon-modal { padding: .35rem; }
  .donjon-fenetre { max-height: calc(100dvh - .7rem); border-radius: 14px; padding: .8rem; }
  .donjon-corps { grid-template-columns: 1fr; gap: .8rem; }
  .donjon-case { font-size: clamp(1rem, 4.5vw, 1.6rem); }
  .donjon-grille { gap: 2px; border-width: 4px; max-width: 100%; }
  .donjon-message { min-height: 0; }
  .donjon-intro { flex-direction: column; gap: .5rem; align-items: flex-start; }
  .donjon-intro > svg, .donjon-intro > div:first-child:has(svg) { display: none; }
}
.page-entre > main:has(.pont-modal), .page-entre > .plein > main:has(.pont-modal) { animation: none; transform: none; }
.pont-modal { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 1rem; background: #203a36df; }
.pont-fenetre { width: min(100%, 980px); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1rem 1.5rem; color: #29433b; background: #fffdf2; border: 3px solid #29433b; border-radius: 24px; box-shadow: 0 20px 70px #0006; }
.pont-entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid #d8dcc8; padding-bottom: .7rem; }
.pont-sur-titre { font-size: .75rem; font-weight: 800; letter-spacing: .1em; margin: 0 0 .2rem; color: #596c4b; }
.pont-entete h2 { font-size: 1.65rem; margin: 0; }
.pont-outils { display: flex; gap: .5rem; }
.pont-progress { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem 0 .2rem; }
.pont-progress span { display: grid; place-items: center; width: 28px; height: 28px; background: #e5e7d4; border: 2px solid transparent; border-radius: 50%; font-size: .85rem; }
.pont-progress .est-courant { border-color: #ab6c20; background: #fff1b9; font-weight: 800; }
.pont-progress .est-fait { background: #437b62; color: white; }
.pont-progress b { font-size: .85rem; margin-left: .6rem; }
.pont-consigne { text-align: center; margin: .5rem 0; }
.pont-consigne h3, .pont-intro h3 { margin: .3rem 0; font-size: clamp(1.3rem, 3.5vw, 1.8rem); }
.pont-consigne p, .pont-intro > p { margin: .4rem 0 .6rem; font-size: 1.1rem; }
.pont-paysage { position: relative; width: min(100%, 680px); margin: auto; overflow: hidden; border: 2px solid #bfd5bf; border-radius: 18px; isolation: isolate; }
.pont-paysage > svg { display: block; width: 100%; height: auto; }
.pont-fenn { position: absolute; left: 12%; top: 77%; transform: translate(-50%, -100%); width: 9%; aspect-ratio: 1; pointer-events: none; }
.pont-fenn .fenn { width: 100% !important; height: 100% !important; max-width: 100%; display: block; }
.pont-fenn img { width: 100%; height: auto; }
.pont-paysage--traverse .pont-fenn { animation: pont-traversee 1.4s ease-in-out forwards; }
.pont-paysage--arrive .pont-fenn { left: 85%; }
@keyframes pont-traversee { from { left: 12%; } to { left: 85%; } }
.pont-planche--ajoutee { animation: pont-pose .3s both; animation-delay: calc(var(--rang) * .045s); transform-box: fill-box; transform-origin: center; }
@keyframes pont-pose { from { opacity: 0; transform: translateY(-25px); } to { opacity: 1; transform: translateY(0); } }
.pont-atelier { display: flex; align-items: center; justify-content: center; gap: 2rem; padding: .5rem 0; }
.pont-chariot { min-width: 170px; text-align: center; }
.pont-charge { height: 62px; width: 120px; margin: 0 auto; position: relative; border-bottom: 7px solid #83603e; }
.pont-charge span { display: block; position: absolute; left: 5px; bottom: calc(var(--i) * 5px); width: 110px; height: 6px; border: 1px solid #996a32; background: #edb951; border-radius: 3px; transform: rotate(-3deg); }
.pont-roues { display: flex; justify-content: space-between; margin: -4px auto 0; color: #73543a; width: 95px; font-size: 1.1rem; }
.pont-roues span { flex: 1; }
.pont-chariot p { margin: .2rem 0; font-size: .95rem; }
.pont-chariot output { font-size: 1.35rem; font-weight: 800; }
.pont-commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; max-width: 530px; }
.pont-quantite { display: flex; gap: .6rem; }
.pont-quantite button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; min-height: 72px; border: 2px solid #927444; border-radius: 14px; font-size: 2rem; line-height: 1; font-weight: 800; color: #29433b; background: #fff4c5; cursor: pointer; box-shadow: 0 3px #d1b875; }
.pont-quantite small { font-size: .8rem; margin-top: .3rem; font-weight: 600; }
.pont-quantite button:disabled { opacity: .4; cursor: default; box-shadow: none; }
.pont-modal button:focus-visible, .pont-modal summary:focus-visible { outline: 4px solid #2f71b2; outline-offset: 3px; }
.pont-aide { padding: .5rem .8rem; background: #fff0c0; border-radius: 8px; text-align: center; margin: .3rem 0; }
.pont-message { padding: .7rem; border-radius: 12px; background: #e5efdb; font-size: 1.05rem; }
.pont-intro { text-align: center; padding-top: .6rem; }
.pont-intro-bas { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: .6rem; }
.pont-intro-bas p { max-width: 320px; font-size: 1.1rem; line-height: 1.5; }
.pont-fin { text-align: center; padding: 1rem 0; }
.pont-fin > .fenn { margin: auto; }
.pont-fin h3 { font-size: 1.8rem; }
.pont-collections { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.pont-collections span { padding: .65rem .8rem; background: #e4efda; border-radius: 10px; font-size: 1.2rem; font-weight: 800; }
.pont-fin details { text-align: left; max-width: 650px; margin: 1rem auto; padding: .8rem; background: #f1efdf; border-radius: 10px; }
.pont-fin-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) {
  .pont-modal { padding: .35rem; }
  .pont-fenetre { max-height: calc(100dvh - .7rem); padding: .8rem; border-radius: 17px; }
  .pont-entete { gap: .6rem; }
  .pont-entete h2 { font-size: 1.35rem; }
  .pont-outils .btn { min-height: 44px; padding: .5rem .75rem; }
  .pont-atelier { gap: .5rem; flex-direction: column; }
  .pont-chariot { display: flex; align-items: center; gap: .4rem; min-width: 0; }
  .pont-charge { margin: 0; width: 90px; height: 54px; }
  .pont-charge span { width: 80px; }
  .pont-roues { display: none; }
  .pont-chariot p { max-width: 150px; }
  .pont-commandes { gap: .55rem; }
  .pont-commandes > .pont-aider { width: 100%; }
  .pont-quantite button { width: 64px; min-height: 64px; }
  .pont-poser { min-height: 64px; max-width: 155px; }
  .pont-message { padding: .5rem; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .pont-paysage--traverse .pont-fenn, .pont-planche--ajoutee { animation: none; } .pont-paysage--traverse .pont-fenn { left: 85%; } }
.page-entre > main:has(.mission-maths-modal), .page-entre > .plein > main:has(.mission-maths-modal) { animation: none; transform: none; }
.mission-maths-modal { position: fixed; inset: 0; z-index: 2150; display: grid; place-items: center; padding: .75rem; background: radial-gradient(circle at 50% 20%, #1e293b99, #090d16f2); backdrop-filter: blur(6px); }
.mission-maths-fenetre { width: min(100%, 1060px); max-height: calc(100dvh - 1.5rem); overflow-y: auto; padding: .95rem 1.35rem 1.15rem; color: #f1f5f9; background: linear-gradient(165deg, #0f172a 0%, #1e293b 60%, #0f172a 100%); border: 2px solid #38bdf866; border-radius: 22px; box-shadow: 0 24px 80px #000c, inset 0 1px 0 #ffffff22; }
.mission-maths-entete { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; border-bottom: 1px solid #334155; padding-bottom: .65rem; }
.mission-maths-entete p { margin: 0 0 .2rem; font-size: .75rem; font-weight: 800; letter-spacing: .1em; color: #38bdf8; text-transform: uppercase; }
.mission-maths-entete h2 { margin: 0; font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: #f8fafc; text-shadow: 0 2px 10px #0ea5e955; }
.mission-maths-outils { display: flex; gap: .5rem; align-items: center; }
.mission-maths-hud-bar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .55rem 0; padding: .45rem .85rem; background: #090d1699; border: 1px solid #334155; border-radius: 14px; }
.mission-maths-progres { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0; }
.mission-maths-progres span { width: 28px; height: 28px; display: grid; place-items: center; background: #1e293b; color: #94a3b8; border: 2px solid #475569; border-radius: 50%; font-size: .85rem; font-weight: 800; transition: transform .2s, background .2s; }
.mission-maths-progres span.est-courant { background: linear-gradient(135deg, #f59e0b, #eab308); color: #0f172a; border-color: #fde047; transform: scale(1.12); box-shadow: 0 0 12px #f59e0b88; }
.mission-maths-progres span.est-fait { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-color: #6ee7b7; }
.mission-maths-progres b { font-size: .85rem; margin-left: .4rem; color: #e2e8f0; }
.mission-arcade-badges { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .82rem; font-weight: 700; }
.mission-arcade-badge { padding: .25rem .6rem; border-radius: 999px; background: #1e293b; border: 1px solid #475569; color: #fde047; }
.mission-arcade-badge--combo { background: #3b0764; border-color: #a855f7; color: #f3e8ff; }
.mission-arcade-badge--astuce { color: #7dd3fc; border-color: #0284c7; background: #0c4a6e66; }
.mission-maths-objectif { text-align: center; margin: .45rem 0; }
.mission-maths-objectif h3, .mission-maths-intro h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); margin: .2rem 0; color: #fde047; }
.mission-maths-objectif p { margin: .25rem auto; max-width: 780px; line-height: 1.45; color: #cbd5e1; }
.mission-maths-gares { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: .4rem 0; }
.mission-maths-gares span { padding: .35rem .7rem; background: #1e293b; border: 1px solid #475569; color: #e2e8f0; border-radius: 9px; font-size: .95rem; }
.mission-fraction { display: inline-flex; flex-direction: column; justify-content: center; vertical-align: middle; font-size: 1.05rem; min-width: 1.1em; text-align: center; margin: 0 .2rem; color: #38bdf8; }
.mission-fraction b:first-child { border-bottom: 2px solid currentColor; }
.mission-scene { position: relative; width: min(100%, 710px); margin: .3rem auto; border: 2px solid #38bdf888; border-radius: 18px; overflow: hidden; background: #090d16; box-shadow: 0 12px 36px #0009, 0 0 24px #0ea5e922; user-select: none; touch-action: none; }
.mission-arcade-canvas { display: block; width: 100%; height: auto; aspect-ratio: 780 / 360; cursor: grab; }
.mission-arcade-canvas:active { cursor: grabbing; }
.mission-scene svg.mission-svg-a11y { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.mission-maths-retour { padding: .5rem .85rem; text-align: center; line-height: 1.45; background: #1e293b; border: 1px solid #334155; color: #e2e8f0; border-radius: 11px; margin: .5rem 0; font-weight: 600; }
.mission-maths-retour.a-corriger { background: #451a03; border-color: #f97316; color: #fed7aa; }
.mission-maths-commandes { display: flex; justify-content: center; align-items: stretch; gap: 1rem; flex-wrap: wrap; margin-top: .45rem; }
.mission-maths-vannes, .mission-maths-coefficients, .mission-maths-pas { display: flex; gap: .6rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.mission-maths-reglage { min-height: 48px; min-width: 48px; border: 2px solid #38bdf888; border-radius: 12px; color: #f8fafc; background: linear-gradient(180deg, #1e293b, #0f172a); font-size: 1.45rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #0284c766; transition: transform .08s, box-shadow .08s, border-color .15s; }
.mission-maths-reglage:hover:not(:disabled) { border-color: #7dd3fc; background: #1e3a5f; transform: translateY(-1px); }
.mission-maths-reglage:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #0284c766; }
.mission-maths-reglage:disabled { opacity: .35; cursor: default; box-shadow: none; }
.mission-maths-vannes .mission-maths-reglage { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 110px; min-height: 64px; line-height: 1; padding: .35rem .6rem; }
.mission-maths-reglage small { font-size: .76rem; font-weight: 600; margin-top: .3rem; color: #93c5fd; }
.mission-maths-valider { display: flex; flex-direction: column; justify-content: center; gap: .45rem; }
.mission-maths-tester { min-height: 52px; font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 18px #f59e0b55; }
.mission-maths-coefficients > div { text-align: center; background: #0f172acc; border: 1px solid #334155; border-radius: 14px; padding: .5rem .75rem; min-width: 210px; }
.mission-maths-coefficients label { display: block; font-size: .88rem; margin-bottom: .35rem; color: #93c5fd; font-weight: 700; }
.mission-maths-pas output { min-width: 42px; font-size: 1.45rem; font-weight: 900; color: #fde047; font-variant-numeric: tabular-nums; }
.mission-arcade-slider { width: 100%; margin-top: .45rem; accent-color: #38bdf8; cursor: pointer; height: 6px; }
.mission-maths-aide { max-width: 800px; margin: .5rem auto; background: #422006; border: 1px solid #f59e0b; color: #fef3c7; border-radius: 11px; padding: .65rem .9rem; line-height: 1.5; }
.mission-maths-suivant, .mission-maths-fenetre > .mission-maths-tester { display: block; margin: .7rem auto; }
.mission-maths-intro, .mission-maths-fin { text-align: center; }
.mission-maths-intro p { max-width: 660px; margin: .6rem auto; line-height: 1.55; color: #cbd5e1; }
.mission-maths-commencer { margin: .8rem auto .3rem; font-size: 1.1rem; padding: .7rem 1.5rem; }
.mission-maths-fin { padding: .8rem 0; }
.mission-maths-fin h3 { font-size: 1.8rem; color: #fde047; }
.mission-maths-medaille { margin: .7rem auto; display: grid; place-items: center; width: 95px; height: 95px; border-radius: 50%; border: 4px solid #fbbf24; background: radial-gradient(circle, #fef08a33, #0f172a); color: #fde047; font-size: 3rem; font-weight: 800; box-shadow: 0 0 28px #f59e0b66; }
.mission-maths-synthese { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: .8rem 0; }
.mission-maths-synthese span { border-radius: 10px; padding: .6rem .85rem; background: #1e293b; border: 1px solid #38bdf855; color: #f8fafc; font-weight: 800; font-size: 1.05rem; }
.mission-maths-fin details { text-align: left; max-width: 700px; margin: 1rem auto; padding: .8rem; background: #1e293b; border: 1px solid #334155; color: #cbd5e1; border-radius: 10px; }
.mission-maths-fin-actions { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.mission-maths-modal button:focus-visible, .mission-maths-modal summary:focus-visible, .mission-arcade-slider:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
@media (max-width: 600px) {
  .mission-maths-modal { padding: .3rem; }
  .mission-maths-fenetre { padding: .75rem; max-height: calc(100dvh - .6rem); border-radius: 14px; }
  .mission-maths-entete { gap: .5rem; }
  .mission-maths-outils .btn { min-height: 42px; padding: .45rem .65rem; }
  .mission-maths-commandes { flex-direction: column; gap: .55rem; }
  .mission-maths-valider { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .mission-maths-vannes { gap: .4rem; }
  .mission-maths-vannes .mission-maths-reglage { min-width: 88px; min-height: 58px; }
  .mission-maths-coefficients { gap: .45rem; }
  .mission-maths-coefficients > div { padding: .4rem .55rem; min-width: 150px; }
  .mission-maths-pas { gap: .35rem; }
  .mission-maths-pas .mission-maths-reglage { min-width: 42px; min-height: 44px; }
  .mission-maths-objectif p { font-size: .88rem; }
  .mission-maths-retour { font-size: .88rem; }
}
.mission-chimie-inventaire { padding: .6rem; margin: .6rem 0; border: 1px solid #64748b; border-radius: .8rem; color: #f8fafc; background: #0f172a; text-align: center; }
.mission-chimie-inventaire p { margin: .3rem 0; }
.mission-chimie-inventaire table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.mission-chimie-inventaire caption { padding: .4rem; font-weight: 700; }
.mission-chimie-inventaire th, .mission-chimie-inventaire td { padding: .4rem .2rem; border-bottom: 1px solid #475569; }
.mission-chimie-groupes { margin: .6rem 0; padding: .8rem; border: 1px solid #64748b; border-radius: .8rem; background: #0f172a; color: #f8fafc; }
.mission-chimie-groupes summary { cursor: pointer; padding: .4rem; font-weight: 700; }
.mission-chimie-groupes section { margin: .7rem 0; padding: .5rem; border-top: 1px solid #475569; }
.mission-chimie-groupes h4, .mission-chimie-groupes p { margin: .5rem 0; }
.mission-chimie-paquets { display: flex; flex-wrap: wrap; gap: .5rem; }
.mission-chimie-paquet { display: flex; flex-wrap: wrap; gap: .2rem; padding: .4rem; border: 1px solid #94a3b8; border-radius: .6rem; max-width: 100%; }
.mission-chimie-paquet span { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #e2e8f0; color: #0f172a; font-size: 1rem; font-weight: 800; }
.mission-thales-plan { padding: .8rem; margin: .6rem 0; background: #0f172a; color: #f8fafc; border: 1px solid #64748b; border-radius: .8rem; }
.mission-thales-plan summary { cursor: pointer; font-weight: 700; padding: .4rem; }
.mission-thales-plan svg { display: block; width: 100%; max-width: 360px; margin: auto; }
.mission-litteral-lot { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem; margin: .4rem 0; border: 1px solid #94a3b8; border-radius: .5rem; }
.mission-litteral-lot span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; font-weight: 800; }
.mission-litteral-boite { background: #0284c7; color: #fff; border: 1px solid #7dd3fc; }
.mission-litteral-unite { background: #fbbf24; color: #0f172a; border-radius: 50%; }
.mission-litteral-retrait span { outline: 2px solid #fb7185; text-decoration: line-through; }

/* Atelier : le jeu occupe l'écran, les explications restent dans le carnet. */
.mission-maths--litteral .mission-maths-fenetre { background: #163d3b; border-color: #87c8a0; padding: .75rem 1rem; }
.mission-maths--litteral .mission-maths-entete { border-color: #a8d6b44d; margin-bottom: .5rem; padding-bottom: .5rem; }
.mission-maths--litteral .mission-maths-entete h2 { color: #fff3c3; font-size: 1.5rem; }
.mission-maths--litteral .mission-maths-entete p { color: #a9dbc8; font-size: .65rem; letter-spacing: .12em; }
.atelier-etapes { display: flex; align-items: center; gap: .35rem; padding: 0 0 .5rem; font-size: .85rem; }
.atelier-etapes > span:not(.atelier-sauve) { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #244e48; color: #a9c2b7; border: 1px solid #7ba28b; }
.atelier-etapes > span.courant { background: #f9cf65; color: #42371d; border-color: #ffe0a0; }
.atelier-etapes > span.livre { background: #4e9e71; color: white; }
.atelier-etapes b { color: #f9e8b1; margin-left: .4rem; }
.atelier-sauve { margin-left: auto; color: #b4d5bd; font-size: .7rem; }
.atelier-jeu { height: 450px; position: relative; overflow: hidden; border-radius: 15px; border: 3px solid #b1c998; isolation: isolate; background: #5b9375; }
.atelier-paysage { position: absolute; width: 100%; height: 100%; inset: 0; z-index: -1; }
.atelier-bon { position: absolute; top: 15px; left: 18px; width: 245px; padding: 13px 17px; color: #5b3b26; background: #fff0cd; border: 2px solid #c69b5e; border-radius: 3px 3px 16px 3px; box-shadow: 0 5px 0 #68452d33; transform: rotate(-2deg); z-index: 3; }
.atelier-bon small { display: block; font-size: .65rem; letter-spacing: .1em; color: #8c6742; }
.atelier-bon > strong { font-size: 1.5rem; display: block; margin: 4px 0; }
.atelier-bon p { margin: 5px 0; font-size: .85rem; line-height: 1.4; }
.atelier-lot-temoin { display: flex; align-items: center; gap: 4px; border-top: 1px dashed #ac875e; padding-top: 7px; }
.atelier-lot-temoin i { display: grid; place-items: center; width: 23px; height: 23px; font-size: 15px; font-weight: 800; font-style: normal; }
.atelier-mini-x { background: #2984a4; color: #fff; border: 1px solid #0d5e7b; }
.atelier-mini-unite { background: #dca447; color: #50351e; border-radius: 50%; }
.atelier-lot-temoin small { margin-left: auto; letter-spacing: 0; }
.atelier-destination { position: absolute; right: 2%; top: 23%; display: grid; justify-items: center; gap: 6px; color: #fff7d8; font-weight: 800; text-shadow: 0 2px 2px #25483b; }
.atelier-destination span { background: #7d5035; padding: 5px 12px; border: 2px solid #d7b374; border-radius: 5px; }
.atelier-destination b { font-size: 3rem; }
.atelier-fenn { position: absolute; left: 24%; bottom: 21%; width: 155px; height: 155px; object-fit: contain; z-index: 2; filter: drop-shadow(0 7px 2px #173d4144); }
.atelier-chariot { position: absolute; width: 38%; left: 43%; bottom: 22%; z-index: 4; padding-top: 10px; min-height: 165px; transition: filter .2s; }
.atelier-charge { min-height: 105px; padding: 9px 14px 5px; display: flex; flex-wrap: wrap; align-content: end; justify-content: center; gap: 5px; border: 2px dashed #78502c66; border-radius: 8px 8px 0 0; background: #fff3c334; }
.atelier-vide { align-self: center; padding: 15px 0; color: #274d43; font-size: .9rem; text-align: center; font-weight: 800; }
.atelier-caisse { position: relative; min-height: 49px; border: 4px solid #85592f; border-radius: 3px; background: repeating-linear-gradient(0deg,#ad783e 0 19px,#bf8b49 20px 22px); box-shadow: inset 0 0 0 2px #d8a968; display: flex; justify-content: space-around; align-items: center; color: #fff2bc; gap: 4px; padding: 5px; }
.atelier-caisse span { font-size: .6rem; letter-spacing: .07em; }
.atelier-caisse b { background: #382f22; border: 2px solid #d9b571; border-radius: 5px; padding: 2px 8px; font-size: 1.15rem; }
.atelier-roue { position: absolute; bottom: -21px; width: 34px; height: 34px; border: 7px solid #3c3a31; border-radius: 50%; background: #b4a47d; box-shadow: 0 3px 0 #22382b77; }
.atelier-roue--gauche { left: 15%; } .atelier-roue--droite { right: 15%; }
.atelier-colis { display: grid; place-items: center; padding: 0; width: 32px; height: 32px; cursor: pointer; font-size: 1.15rem; font-weight: 900; box-shadow: 0 3px 0 #31534855; }
.atelier-colis:disabled { cursor: default; opacity: 1; }
.atelier-colis--k { background: #2181a3; border: 3px solid #92cfdb; color: #fff; border-radius: 3px; }
.atelier-colis--c { background: #edb546; border: 3px solid #ffda82; color: #593e1d; border-radius: 50%; }
.atelier-colis:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.15); }
.atelier-depot { position: absolute; bottom: 12px; left: 20px; display: flex; gap: 10px; z-index: 5; }
.atelier-source { display: grid; justify-items: center; gap: 3px; padding: 8px 13px; border: 3px solid #8a643a; border-radius: 8px; background: #eed4a2; color: #4c3b25; cursor: grab; touch-action: none; box-shadow: 0 4px 0 #59452977; }
.atelier-source > span { display: grid; place-items: center; width: 43px; height: 39px; font-size: 1.6rem; font-weight: 900; }
.atelier-source--k > span { background: #2683a1; color: white; border: 3px solid #98d1da; border-radius: 4px; }
.atelier-source--c > span { background: #eeb34a; border: 3px solid #ffe1a0; border-radius: 50%; color: #67401c; }
.atelier-source b { font-size: .72rem; }
.atelier-source:active { cursor: grabbing; transform: translateY(2px); box-shadow: none; }
.atelier-source:disabled { opacity: .5; cursor: default; }
.atelier-pilotage { display: flex; align-items: center; gap: 12px; padding-top: 10px; min-height: 62px; }
.atelier-message { color: #f4edcd; margin: 0; flex: 1; font-weight: 700; font-size: .9rem; }
.atelier-action { display: inline-grid; place-items: center; padding: 12px 22px; min-height: 48px; border: 2px solid #ffe5a0; background: #edba55; box-shadow: 0 4px 0 #785b2d; color: #3c321f; border-radius: 24px; cursor: pointer; font-weight: 900; font-size: 1rem; }
.atelier-gestes { font-size: .73rem; color: #bed6c7; margin: 6px 0; }
.atelier-gestes span { display: block; }
.atelier-carnet { padding: 4px 0; color: #e3e6cc; font-size: .85rem; }
.atelier-carnet summary { cursor: pointer; font-weight: 700; }
.atelier-carnet p { margin: .5rem 0; }
.atelier-demarrage { position: absolute; z-index: 8; inset: 0; background: #122d2399; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff4d0; padding: 25px; backdrop-filter: blur(2px); }
.atelier-demarrage > b { font-size: 1.8rem; text-shadow: 0 3px 1px #233c2f; }
.atelier-demarrage p { font-size: 1rem; max-width: 370px; }
.atelier-fantome { position: fixed; z-index: 2200; width: 46px; height: 46px; display: grid; place-items: center; pointer-events: none; transform: translate(-50%,-50%) rotate(-8deg); box-shadow: 0 8px 15px #0005; font-size: 1.6rem; font-weight: 900; }
.atelier-final { text-align: center; padding: 10px; }
.atelier-final > img { width: min(180px,35vw); height: 170px; object-fit: contain; }
.atelier-final h3 { color: #ffe3a3; font-size: 1.8rem; }
.atelier-villages { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.atelier-villages span { padding: 8px 13px; background: #387657; border-radius: 18px; }
.atelier-final details { text-align: left; margin: 20px auto; max-width: 540px; }
.atelier-jeu.en-route .atelier-chariot { animation: atelier-livrer 1.5s ease-in both; }
.atelier-jeu.en-route .atelier-fenn { animation: atelier-marche 1.5s ease-in both; }
.atelier-jeu.est-livre .atelier-chariot { opacity: .25; transform: translateX(20%); }
.atelier-jeu.a-reparer .atelier-chariot { animation: atelier-retour .35s ease-in-out 2; }
@keyframes atelier-livrer { to { transform: translate(65%,-60%) scale(.4); opacity: 0; } }
@keyframes atelier-marche { to { transform: translate(280%,-10%) scale(.6); opacity: 0; } }
@keyframes atelier-retour { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (max-width: 600px) {
  .mission-maths--litteral .mission-maths-fenetre { padding: .55rem; }
  .mission-maths--litteral .mission-maths-entete h2 { font-size: 1.15rem; }
  .mission-maths--litteral .mission-maths-entete p { font-size: .55rem; }
  .mission-maths--litteral .mission-maths-outils .btn { font-size: .75rem; padding: .25rem .45rem; }
  .atelier-etapes { font-size: .7rem; gap: 3px; }
  .atelier-etapes > span:not(.atelier-sauve) { width: 22px; height: 22px; }
  .atelier-sauve { display: none; }
  .atelier-jeu { height: 415px; }
  .atelier-bon { width: 203px; top: 10px; left: 9px; padding: 9px 12px; }
  .atelier-bon > strong { font-size: 1.15rem; }
  .atelier-bon p { font-size: .75rem; }
  .atelier-lot-temoin i { width: 19px; height: 19px; font-size: 12px; }
  .atelier-destination { top: 8%; right: 5px; font-size: .7rem; }
  .atelier-destination span { padding: 4px 5px; }
  .atelier-destination b { font-size: 2rem; }
  .atelier-fenn { left: 0; bottom: 28%; width: 105px; height: 105px; }
  .atelier-chariot { left: 26%; width: 69%; bottom: 29%; min-height: 140px; }
  .atelier-charge { min-height: 88px; padding: 5px 7px; gap: 4px; }
  .atelier-colis { width: 26px; height: 27px; font-size: 1rem; border-width: 2px; }
  .atelier-caisse { min-height: 38px; }
  .atelier-caisse b { font-size: 1rem; }
  .atelier-caisse span { font-size: .5rem; }
  .atelier-depot { bottom: 15px; left: 16px; gap: 12px; }
  .atelier-source { padding: 6px 12px; }
  .atelier-source > span { width: 33px; height: 33px; font-size: 1.3rem; }
  .atelier-action { padding: 10px 13px; font-size: .8rem; }
  .atelier-message { font-size: .75rem; }
  .atelier-pilotage { gap: 6px; }
  .atelier-gestes { font-size: .65rem; }
  .atelier-gestes span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .atelier-jeu *, .atelier-colis { animation: none !important; transition: none !important; } }

.mission-maths--pourcentages .mission-maths-fenetre { background: #244b37; border-color: #b7d18d; }
.mission-maths--pourcentages .mission-maths-entete { padding-bottom: .5rem; margin-bottom: .5rem; border-color: #b7d18d55; }
.mission-maths--pourcentages .mission-maths-entete h2 { color: #fff0be; font-size: 1.5rem; }
.mission-maths--pourcentages .mission-maths-entete p { color: #bdd6a8; font-size: .65rem; letter-spacing: .1em; }
.jardins-scene { position: relative; height: 450px; overflow: hidden; isolation: isolate; background: #8dbb83; border: 3px solid #c1d394; border-radius: 14px; }
.jardins-paysage { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.jardins-demande { position: absolute; top: 15px; left: 16px; width: 260px; padding: 13px 16px; background: #fff0c9; color: #544126; border: 2px solid #bf9f68; border-radius: 3px 3px 14px 3px; transform: rotate(-2deg); z-index: 4; box-shadow: 0 4px 0 #58432b33; }
.jardins-demande small { display: block; font-size: .6rem; letter-spacing: .1em; }
.jardins-demande strong { display: block; font-size: 1.5rem; margin: 5px 0; }
.jardins-demande p { font-size: .9rem; margin: .4rem 0; }
.jardins-demande > span { color: #52763e; font-weight: 800; font-size: .8rem; }
.jardins-cuve { position: absolute; z-index: 2; left: 42%; top: 13%; width: 18%; height: 64%; background: #e1f6e748; border: 5px solid #536f68; border-top: 9px solid #6f8a78; border-radius: 9px 9px 20px 20px; box-shadow: inset 0 0 0 4px #d7e9d4, 8px 9px 0 #294b3c33; }
.jardins-eau { position: absolute; bottom: 0; left: 0; width: 100%; height: var(--niveau); max-height: 100%; background: linear-gradient(90deg,#168dad,#5bc6d0 65%,#2d9db8); border-radius: 0 0 14px 14px; transition: height .35s ease; }
.jardins-eau::before { content: ''; position: absolute; top: -3px; width: 100%; height: 7px; border-radius: 50%; background: #aff4eb; }
.jardins-reflet { position: absolute; inset: 8px auto 15px 12px; width: 12px; background: #ffffff40; border-radius: 8px; }
.jardins-graduation { position: absolute; right: -47px; font-size: .7rem; font-weight: 800; color: #234c41; transform: translateY(50%); }
.jardins-graduation::before { content: ''; display: inline-block; width: 14px; height: 2px; background: #536f68; vertical-align: middle; margin-right: 3px; }
.jardins-mesure { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); background: #103f47e8; border: 2px solid #c4e6d5; border-radius: 7px; color: #fff4c9; padding: 5px 10px; font-size: 1.4rem; white-space: nowrap; }
.jardins-capacite { position: absolute; bottom: -33px; width: 100%; text-align: center; color: #254b39; font-size: .85rem; font-weight: 900; }
.jardins-tuyau { position: absolute; left: 60%; top: 70%; width: 23%; height: 17px; background: #70836d; border: 4px solid #b4c9a5; transform: rotate(13deg); transform-origin: left; border-radius: 8px; }
.jardins-tuyau i { display: block; background: #42bdd6; height: 100%; width: 0; }
.jardins-parcelles { position: absolute; right: 2%; bottom: 12%; width: 27%; height: 40%; border: 7px solid #88613c; border-radius: 40% 10% 20% 15%; background: repeating-linear-gradient(0deg,#a57849 0 24px,#835b36 25px 29px); display: grid; grid-template-columns: repeat(3,1fr); place-items: center; transform: rotate(-9deg); box-shadow: 0 5px 0 #577146; }
.jardins-plante { position: relative; width: 27px; height: 37px; }
.jardins-plante i { position: absolute; bottom: 0; left: 11px; width: 5px; height: 18px; background: #718249; transform: rotate(25deg); border-radius: 5px; }
.jardins-plante i::before, .jardins-plante i::after { content: ''; position: absolute; width: 14px; height: 7px; background: #829351; border-radius: 80% 0; top: 6px; left: -10px; }
.jardins-plante i::after { left: 2px; transform: rotate(30deg); }
.jardins-plante b { position: absolute; top: -3px; left: 0; font-size: 29px; line-height: 1; color: #ffe18b; opacity: 0; transform: scale(0); }
.jardins-fenn { position: absolute; left: 16%; bottom: 23%; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 5px 1px #254c3833); }
.jardins-robinets { position: absolute; bottom: 15px; left: 17px; display: flex; gap: 10px; }
.jardins-vanne { display: flex; align-items: center; gap: 7px; border: 3px solid #577658; background: #e6edc8; color: #315745; border-radius: 12px; padding: 8px 12px; font-size: .75rem; font-weight: 800; min-height: 58px; cursor: pointer; box-shadow: 0 4px 0 #46644866; }
.jardins-vanne span { display: grid; place-items: center; width: 34px; height: 34px; border: 4px solid #49849a; border-radius: 50%; color: #20738f; font-size: 30px; line-height: 1; }
.jardins-vanne--retour span { border-color: #ad7b40; color: #99622a; }
.jardins-vanne.ouverte { background: #aae6df; border-color: #287c87; }
.jardins-vanne.ouverte span { animation: jardin-vanne 2s linear infinite; }
.jardins-vanne:disabled { opacity: .45; cursor: default; }
.jardins-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0 6px; }
.jardins-arrosoirs { display: flex; gap: 7px; }
.jardins-arrosoirs button { border: 2px solid #c7d899; border-radius: 8px; background: #e8e7b8; color: #35543a; padding: 6px 14px; cursor: pointer; font-weight: 900; }
.jardins-arrosoirs small { display: block; font-size: .6rem; }
.jardins-arrosoirs button:disabled { opacity: .45; cursor: default; }
.jardins-message { min-height: 24px; font-size: .86rem; color: #f4edcf; margin: .5rem 0; font-weight: 700; }
.jardins-carnet { font-size: .8rem; color: #cdddb7; }
.jardins-carnet summary { cursor: pointer; font-weight: 700; }
.jardins-arrose .jardins-eau { animation: jardin-vider 1.5s ease-in forwards; }
.jardins-arrose .jardins-tuyau i { width: 100%; }
.jardins-arrose .jardins-plante b { animation: jardin-fleur .7s ease-out forwards; animation-delay: calc(.3s + var(--retard)); }
.jardins-fleuri .jardins-plante b { opacity: 1; transform: scale(1); }
.jardins-arrose .jardins-plante i, .jardins-fleuri .jardins-plante i { height: 28px; background: #3c873f; transform: rotate(0); }
.jardins-coule .jardins-eau::before { animation: jardin-onde 1s ease-in-out infinite alternate; }
@keyframes jardin-vider { to { height: 0; } }
@keyframes jardin-fleur { to { opacity: 1; transform: scale(1); } }
@keyframes jardin-vanne { to { transform: rotate(360deg); } }
@keyframes jardin-onde { to { transform: translateY(2px); } }
@media (max-width:600px) {
  .mission-maths--pourcentages .mission-maths-fenetre { padding: .55rem; }
  .mission-maths--pourcentages .mission-maths-entete h2 { font-size: 1.15rem; }
  .mission-maths--pourcentages .mission-maths-entete p { font-size: .55rem; }
  .mission-maths--pourcentages .mission-maths-outils .btn { font-size: .75rem; padding: .25rem .45rem; }
  .jardins-scene { height: 415px; }
  .jardins-demande { top: 9px; left: 9px; width: 205px; padding: 9px 12px; }
  .jardins-demande strong { font-size: 1.12rem; }
  .jardins-demande p { font-size: .78rem; }
  .jardins-cuve { left: 36%; top: 34%; width: 29%; height: 42%; border-width: 4px; }
  .jardins-graduation { right: -43px; font-size: .6rem; }
  .jardins-graduation::before { width: 9px; }
  .jardins-mesure { font-size: 1.15rem; padding: 4px 6px; }
  .jardins-capacite { font-size: .65rem; bottom: -27px; }
  .jardins-fenn { left: 0; bottom: 27%; width: 107px; height: 107px; }
  .jardins-parcelles { right: -5%; bottom: 14%; width: 30%; height: 23%; border-width: 4px; }
  .jardins-plante { transform: scale(.65); }
  .jardins-tuyau { left: 65%; top: 72%; width: 20%; height: 12px; border-width: 3px; }
  .jardins-robinets { left: 9px; bottom: 10px; gap: 6px; }
  .jardins-vanne { padding: 6px 8px; min-height: 48px; font-size: .65rem; gap: 4px; }
  .jardins-vanne span { width: 27px; height: 27px; font-size: 25px; border-width: 3px; }
  .jardins-arrosoirs button { padding: 5px 9px; font-size: .85rem; }
  .jardins-message { font-size: .76rem; }
}
@media (prefers-reduced-motion:reduce) { .jardins-scene * { animation: none !important; transition: none !important; } }

/* Passage des lucioles : le geste se joue dans la clairière. */
.mission-maths--symetrie .mission-maths-fenetre { background: #15233a; color: #eff7e9; }
.miroir-partie { max-width: 650px; margin: auto; }
.miroir-scene { position: relative; overflow: hidden; border: 2px solid #548883; border-radius: 20px; background: #102c34; padding-bottom: 60px; }
.miroir-terrain { display: block; width: min(100%, 440px); height: auto; margin: auto; touch-action: none; cursor: crosshair; }
.miroir-terrain:focus-visible { outline: 3px solid #ffe28c; outline-offset: -4px; }
.miroir-fenn { position: absolute; width: 60px; height: 60px; object-fit: contain; left: 12%; bottom: 0; pointer-events: none; }
.miroir-illumine .miroir-fenn { left: 78%; }
.miroir-traverse .miroir-fenn { animation: miroir-traverser 1.5s ease-in-out; }
.miroir-illumine .miroir-porte { opacity: .65; }
.miroir-illumine .miroir-lanterne { filter: drop-shadow(0 0 9px #ffe28c); }
.miroir-rayon { stroke-dasharray: 600; animation: miroir-rayonner 1s ease-out; }
.miroir-commandes { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.miroir-position { color: #e2d7f4; font-size: .85rem; margin: 0; }
.miroir-direction { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.miroir-direction button { min-width: 44px; min-height: 44px; border: 1px solid #8cabb8; border-radius: 10px; background: #31485e; color: #fff; font-size: 1.3rem; cursor: pointer; }
.miroir-direction button:disabled { opacity: .35; cursor: default; }
.miroir-message { min-height: 24px; font-size: .9rem; margin: 9px 0; color: #ffedb2; }
.miroir-gestes, .miroir-carnet { color: #c5d6dd; font-size: .75rem; }
.miroir-carnet summary { cursor: pointer; font-weight: 700; }
.miroir-final { color: #eff7e9; }
@keyframes miroir-traverser { from { left: 12%; } to { left: 78%; } }
@keyframes miroir-rayonner { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@media (max-width:600px) {
  .mission-maths--symetrie .mission-maths-fenetre { padding: .55rem; }
  .mission-maths--symetrie .mission-maths-entete h2 { font-size: 1.12rem; }
  .mission-maths--symetrie .mission-maths-entete p { font-size: .55rem; }
  .mission-maths--symetrie .mission-maths-outils .btn { font-size: .75rem; padding: .25rem .45rem; }
  .miroir-message { font-size: .78rem; }
  .miroir-commandes .atelier-action { font-size: .85rem; padding: 9px 12px; }
}
@media (prefers-reduced-motion:reduce) { .miroir-scene * { animation: none !important; transition: none !important; } }

/* Voiles de lumière : projection manipulable, puis départ du navire. */
.mission-maths--homothetie .mission-maths-fenetre { color: #f4eee0; background: #1c3048; }
.voiles-partie { max-width: 710px; margin: auto; }
.voiles-scene { position: relative; border: 2px solid #83a7ac; border-radius: 20px; overflow: hidden; padding-bottom: 65px; background: #3a6876; }
.voiles-terrain { display: block; width: 100%; height: auto; touch-action: none; }
.voiles-terrain:focus-visible { outline: 3px solid #ffe4a5; outline-offset: -5px; }
.voiles-commande { position: absolute; top: 10px; left: 14px; z-index: 1; background: #182e46e8; border: 1px solid #b7bd9e; border-radius: 12px; padding: 9px 14px; pointer-events: none; }
.voiles-commande b { display: block; font-size: 1.05rem; color: #ffe5ae; }
.voiles-commande small { display: block; font-size: .72rem; margin-top: 3px; }
.voiles-poignee { cursor: grab; }
.voiles-navire { position: absolute; bottom: 0; left: 10%; width: 85px; height: 65px; pointer-events: none; }
.voiles-navire img { position: absolute; width: 48px; height: 48px; object-fit: contain; top: 0; left: 17px; z-index: 1; }
.voiles-navire i { position: absolute; bottom: -8px; font-style: normal; font-size: 66px; line-height: 1; }
.voiles-pretes .voiles-navire { left: 75%; }
.voiles-depart .voiles-navire { animation: voiles-voyage 1.5s ease-in-out; }
.voiles-pretes .voiles-projection { fill-opacity: 1; filter: drop-shadow(0 0 8px #fbe19b); }
.voiles-projection.voiles-essai { fill-opacity: .35; stroke: #ff9f8a; stroke-dasharray: 10 5; }
.voiles-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.voiles-ajuster { display: flex; gap: 8px; }
.voiles-ajuster button { min-width: 48px; min-height: 44px; border: 1px solid #c8ba97; border-radius: 12px; background: #36556a; color: #fff; font-size: 1.4rem; cursor: pointer; }
.voiles-ajuster button:disabled { opacity: .35; cursor: default; }
.voiles-message { font-size: .86rem; color: #ffe5ae; min-height: 24px; margin: 9px 0; }
.voiles-gestes, .voiles-carnet { color: #d0dfe0; font-size: .75rem; }
.voiles-carnet summary { cursor: pointer; font-weight: 700; }
@keyframes voiles-voyage { from { left: 10%; transform: translateY(0); } to { left: 75%; transform: translateY(-5px); } }
@media(max-width:600px) {
  .mission-maths--homothetie .mission-maths-fenetre { padding: .55rem; }
  .mission-maths--homothetie .mission-maths-entete h2 { font-size: 1.08rem; }
  .mission-maths--homothetie .mission-maths-entete p { font-size: .55rem; }
  .mission-maths--homothetie .mission-maths-outils .btn { font-size: .75rem; padding: .25rem .45rem; }
  .voiles-commande { top: 6px; left: 6px; padding: 6px 9px; }
  .voiles-commande b { font-size: .82rem; }
  .voiles-commande small { font-size: .6rem; }
  .voiles-actions .atelier-action { font-size: .8rem; padding: 10px 12px; }
  .voiles-message { font-size: .78rem; }
}
@media(prefers-reduced-motion:reduce) { .voiles-scene * { animation: none !important; transition: none !important; } }

/* Caisse du marchand (CP) : étal, porte-monnaie et comptoir où l'on pose l'argent. */
.mission-maths--monnaie .mission-maths-fenetre { background: #3b2a1f; border-color: #e0b77a; }
.caisse-partie { max-width: 720px; margin: auto; }
.caisse-jeu { position: relative; display: grid; grid-template-columns: 1fr 1.6fr; grid-template-areas: "etal comptoir" "fenn comptoir" "bourse bourse"; gap: 10px; padding: 54px 14px 14px; border: 2px solid #d9b071; border-radius: 20px; overflow: hidden; background: linear-gradient(#fbe9c8 0 62%, #c48a52 62%); }
.caisse-auvent { position: absolute; inset: 0 0 auto; height: 40px; background: repeating-linear-gradient(90deg, #d9534f 0 40px, #fff3dc 40px 80px); border-radius: 0 0 50% 50% / 0 0 18px 18px; box-shadow: 0 4px 0 #0002; }
.caisse-etal { grid-area: etal; display: flex; align-items: center; justify-content: center; gap: 10px; }
.caisse-objet { font-size: 4rem; line-height: 1; filter: drop-shadow(0 4px 2px #0003); }
.caisse-etiquette { background: #fffbe9; border: 2px solid #6b4a2b; border-radius: 8px 22px 22px 8px; padding: 6px 16px 6px 12px; color: #3d2a17; transform: rotate(-4deg); text-align: center; }
.caisse-etiquette small { display: block; font-size: .7rem; text-transform: uppercase; }
.caisse-etiquette strong { font-size: 1.9rem; }
.caisse-fenn { grid-area: fenn; width: 96px; height: 96px; object-fit: contain; justify-self: center; transition: transform .4s; }
.caisse-payee .caisse-fenn { transform: translateY(-8px) rotate(-4deg); }
.caisse-objet { position: relative; z-index: 2; transition: transform .6s ease-in-out; }
.caisse-payee .caisse-objet { transform: translate(-30px, 92px) scale(.7) rotate(-10deg); }
.caisse-comptoir { grid-area: comptoir; display: flex; flex-direction: column; justify-content: center; min-height: 180px; background: #8a5a34; border: 3px solid #5d3a1f; border-radius: 16px; padding: 10px; box-shadow: inset 0 6px 0 #a8754a; }
.caisse-erreur .caisse-comptoir { border-color: #f08a6c; }
.caisse-payee .caisse-comptoir { border-color: #9be19a; }
.caisse-poses { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; min-height: 110px; }
.caisse-vide { color: #f4dcbc; font-weight: 700; border: 2px dashed #d7b48e; border-radius: 12px; padding: 18px 22px; }
.caisse-compte { margin: 8px 0 0; padding: 6px 10px; background: #fff8e6; color: #3d2a17; border-radius: 10px; text-align: center; font-weight: 900; font-size: 1.15rem; }
.caisse-pose, .caisse-source { border: 0; background: none; padding: 2px; cursor: pointer; border-radius: 12px; color: inherit; }
.caisse-pose:focus-visible, .caisse-source:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.caisse-pose:disabled, .caisse-source:disabled { cursor: default; }
.caisse-source:disabled { opacity: .4; }
.caisse-billet { display: grid; place-items: center; width: 84px; height: 48px; border-radius: 6px; background: linear-gradient(135deg, #b9d8c9, #7fae9b); border: 2px solid #4f7f6d; color: #20453a; box-shadow: 0 3px 0 #0003; font-size: 1.1rem; }
.caisse-piece { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 3px 0 #0003; font-size: .9rem; }
.caisse-piece b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.caisse-piece--2 { background: #d6d8dc; border: 2px solid #8e9198; }
.caisse-piece--2 b { background: #e7c15b; color: #4b3a10; }
.caisse-piece--1 { width: 44px; height: 44px; background: #e7c15b; border: 2px solid #a8842a; }
.caisse-piece--1 b { width: 28px; height: 28px; background: #d6d8dc; color: #2f3237; font-size: .8rem; }
.caisse-bourse { grid-area: bourse; display: flex; justify-content: center; gap: 14px; background: #6b3f22; border: 2px solid #3f2412; border-radius: 18px; padding: 10px; }
.caisse-source { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 88px; min-height: 76px; }
.caisse-source small { color: #ffe7c4; font-weight: 800; }
.caisse-fantome { position: fixed; z-index: 2200; pointer-events: none; transform: translate(-50%, -50%) rotate(-8deg); }
.caisse-carnet { color: #f3e1c8; font-size: .8rem; }
.caisse-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) {
  .caisse-jeu { grid-template-columns: 1fr 1fr; grid-template-areas: "etal fenn" "comptoir comptoir" "bourse bourse"; padding: 48px 8px 8px; }
  .caisse-objet { font-size: 2.8rem; }
  .caisse-etiquette strong { font-size: 1.5rem; }
  .caisse-fenn { width: 72px; height: 72px; }
  .caisse-payee .caisse-objet { transform: translate(200px, 34px) scale(.6) rotate(-10deg); }
  .caisse-comptoir { min-height: 140px; }
  .caisse-billet { width: 70px; height: 42px; }
  .caisse-bourse { gap: 6px; }
  .caisse-source { min-width: 76px; }
}
@media (prefers-reduced-motion: reduce) { .caisse-fenn, .caisse-objet { transition: none; } }

/* Robot arroseur (CP) : potager quadrillé et programme de flèches. */
.mission-maths--quadrillage .mission-maths-fenetre { background: #20402a; border-color: #9fd18a; }
.robot-partie { max-width: 640px; margin: auto; }
.robot-jeu { position: relative; border-radius: 20px; overflow: hidden; border: 2px solid #b9df9f; }
.robot-potager { display: block; width: min(100%, 62vh); height: auto; margin: auto; }
.robot-jeu { background: #7cb46b; }
.robot-gagne .robot-fleur { animation: robot-fleurit .6s ease-out 1; transform-origin: center; transform-box: fill-box; }
@keyframes robot-fleurit { 50% { transform: scale(1.25) rotate(-8deg); } }
.robot-programme { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 10px 0 8px; }
.robot-carte, .robot-vide { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; font-size: 1.7rem; font-weight: 900; }
.robot-carte { border: 2px solid #f3d27a; background: #fff6d8; color: #3b3015; cursor: pointer; box-shadow: 0 3px 0 #7a6430; }
.robot-carte:disabled { cursor: default; }
.robot-carte--bloque { border-color: #e2553d; background: #ffd9cf; box-shadow: 0 3px 0 #8c2c1c; }
.robot-vide { border: 2px dashed #6f9b70; color: #6f9b70; font-size: .85rem; }
.robot-commandes { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.robot-pave { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 52px); gap: 6px; grid-template-areas: ". haut ." "gauche bas droite"; }
.robot-fleche { border: 2px solid #b9df9f; border-radius: 14px; background: #3c6d47; color: #fff; font-size: 1.6rem; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 #1b3522; }
.robot-fleche:disabled { opacity: .4; cursor: default; }
.robot-fleche--2 { grid-area: haut; } .robot-fleche--3 { grid-area: gauche; } .robot-fleche--1 { grid-area: droite; } .robot-fleche--4 { grid-area: bas; }
.robot-carte:focus-visible, .robot-fleche:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.robot-partie .atelier-message { margin: 10px 0 4px; }
.robot-carnet { color: #d8ecd0; font-size: .8rem; }
.robot-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) {
  .robot-programme { gap: 4px; }
  .robot-carte, .robot-vide { font-size: 1.3rem; border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) { .robot-gagne .robot-fleur { animation: none; } }

/* Horloge de la gare (CE1) : grande aiguille manipulable, tableau des départs, train à quai. */
.mission-maths--horloge .mission-maths-fenetre { background: #24313d; border-color: #c9a85b; }
.gare-partie { max-width: 680px; margin: auto; }
.gare-jeu { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-areas: "horloge tableau" "horloge quai"; gap: 12px; align-items: center; padding: 14px; border: 2px solid #c9a85b; border-radius: 20px; overflow: hidden; background: linear-gradient(#5a6f80 0 70%, #8b8f92 70%); }
.gare-horloge { grid-area: horloge; width: 100%; max-width: min(320px, 46vh); justify-self: center; touch-action: none; cursor: grab; border-radius: 50%; }
.gare-horloge:focus-visible { outline: 4px solid #ffe08a; outline-offset: 4px; }
.gare-erreur .gare-horloge circle:nth-child(2) { stroke: #e2553d; }
.gare-partie-ok .gare-horloge circle:nth-child(2) { stroke: #6fcf7d; }
.gare-tableau { grid-area: tableau; background: #13202b; color: #ffd76a; border: 3px solid #39495a; border-radius: 12px; padding: 10px 14px; font-family: ui-monospace, monospace; }
.gare-tableau small { display: block; color: #9fb4c7; letter-spacing: .2em; font-size: .7rem; }
.gare-tableau div { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gare-tableau strong { font-size: 2rem; }
.gare-tableau span { color: #fff; font-weight: 700; }
.gare-tableau em { display: block; margin-top: 4px; color: #cfe3f2; font-style: normal; font-family: system-ui; font-size: .85rem; }
.gare-quai { grid-area: quai; position: relative; height: 90px; overflow: hidden; }
.gare-train { position: absolute; bottom: 4px; left: 0; font-size: 2.6rem; white-space: nowrap; transform: scaleX(-1); }
.gare-partie-ok .gare-train { transform: scaleX(-1) translateX(-260px); }
.gare-depart .gare-train { animation: gare-part 1.5s ease-in both; }
@keyframes gare-part { from { transform: scaleX(-1) translateX(0); } to { transform: scaleX(-1) translateX(-260px); } }
.gare-fenn { position: absolute; right: 0; bottom: 0; width: 64px; height: 64px; object-fit: contain; }
.gare-commandes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.gare-tourner { display: flex; gap: 6px; flex-wrap: wrap; }
.gare-tourner button { min-height: 44px; padding: 0 12px; border: 2px solid #c9a85b; border-radius: 12px; background: #36495a; color: #fff; font-weight: 800; cursor: pointer; }
.gare-tourner button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.gare-partie .atelier-message { margin: 10px 0 4px; }
.gare-carnet { color: #dfe7ee; font-size: .8rem; }
.gare-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) {
  .gare-jeu { grid-template-columns: 1fr; grid-template-areas: "tableau" "horloge" "quai"; padding: 10px; }
  .gare-horloge { max-width: 270px; }
  .gare-tableau strong { font-size: 1.6rem; }
  .gare-quai { height: 70px; }
  .gare-tourner { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
  .gare-tourner button { padding: 0 4px; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { .gare-depart .gare-train { animation: none; } }

/* Ascenseur de la mine (CE1) : puits par profondeur, paliers repères, câble en maillons de 10 et 1. */
.mission-maths--ecart .mission-maths-fenetre { background: #2b211a; border-color: #b08a5a; }
.mine-partie { max-width: 560px; margin: auto; }
.mine-jeu { position: relative; border: 2px solid #b08a5a; border-radius: 20px; overflow: hidden; background: #4a382b; }
.mine-puits { display: block; width: min(100%, 50vh); height: auto; margin: auto; }
.mine-fenn { position: absolute; left: 10px; bottom: 10px; width: 64px; height: 64px; object-fit: contain; }
.mine-gagne .mine-fenn { animation: robot-fleurit .6s ease-out 1; }
.mine-cable { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 10px 0 6px; min-height: 46px; padding: 6px 10px; background: #1d1612; border: 2px solid #6b4a1c; border-radius: 14px; color: #ffe3a8; }
.mine-cable b { margin-left: auto; font-size: 1.05rem; }
.mine-maillon { border: 3px solid #c9a35e; background: #6b4a1c; color: #ffe3a8; font-weight: 900; cursor: pointer; }
.mine-maillon--10 { min-width: 64px; height: 38px; border-radius: 19px; }
.mine-maillon--1 { min-width: 30px; height: 38px; border-radius: 15px; padding: 0; }
.mine-maillon:disabled { cursor: default; }
.mine-maillon:focus-visible, .mine-ajouter button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.mine-vide { color: #a88b6a; font-style: italic; }
.mine-commandes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mine-ajouter { display: flex; gap: 8px; flex-wrap: wrap; }
.mine-ajouter button { min-height: 48px; padding: 0 14px; border: 2px solid #c9a35e; border-radius: 14px; background: #4a382b; color: #fff; font-weight: 800; cursor: pointer; }
.mine-ajouter button small { display: inline-grid; place-items: center; min-width: 26px; margin-left: 4px; padding: 2px 6px; border-radius: 10px; background: #c9a35e; color: #2b211a; }
.mine-ajouter button:disabled { opacity: .4; cursor: default; }
.mine-partie .atelier-message { margin: 10px 0 4px; }
.mine-carnet { color: #f0e2cf; font-size: .8rem; }
.mine-carnet summary { cursor: pointer; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .mine-gagne .mine-fenn { animation: none; } }

/* Coffres du corsaire (CE2) : ration choisie, distribution tour par tour, reste au perroquet. */
.mission-maths--partage .mission-maths-fenetre { background: #1f3140; border-color: #d6b05a; }
.coffres-partie { max-width: 680px; margin: auto; }
.coffres-jeu { position: relative; display: grid; grid-template-columns: minmax(150px, 1fr) 2.4fr; gap: 14px; align-items: end; min-height: 230px; padding: 16px 16px 20px; border: 2px solid #d6b05a; border-radius: 20px; overflow: hidden; background: repeating-linear-gradient(90deg, #8a5a34 0 38px, #7c4f2d 38px 40px); }
.coffres-butin { align-self: stretch; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: #3c2716cc; color: #ffe7b0; }
.coffres-butin small { font-weight: 800; font-size: .75rem; }
.coffres-butin strong { font-size: 1.6rem; margin-top: auto; }
.coffre-pile { display: grid; grid-template-columns: repeat(10, 12px); gap: 3px; }
.coffre-piece { display: block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3a6, #e1aa2c 60%, #9a6a12); box-shadow: 0 1px 0 #0004; }
.coffres-anime .coffre-pile--apres, .coffres-anime .coffre b, .coffres-anime .coffres-butin strong { animation: coffres-apparait .35s var(--fin, 0s) both; }
@keyframes coffres-apparait { from { opacity: 0; transform: scale(.6); } }
.coffres-rangee { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.coffre { position: relative; width: 74px; text-align: center; color: #ffe7b0; }
.coffre-couvercle { height: 16px; border-radius: 30px 30px 4px 4px; background: #a8642f; border: 3px solid #5e3412; border-bottom: 0; }
.coffre-corps { display: grid; grid-template-columns: repeat(5, 11px); gap: 2px; justify-content: center; align-content: end; height: 50px; padding: 4px; background: #8a4d22; border: 3px solid #5e3412; border-radius: 0 0 8px 8px; box-shadow: inset 0 0 0 3px #d6b05a55; }
.coffre-corps .coffre-piece { width: 11px; height: 11px; }
.coffres-anime .coffre-corps .coffre-piece { animation: coffres-tombe .3s ease-out both; }
@keyframes coffres-tombe { from { opacity: 0; transform: translateY(-26px); } }
.coffre b { display: block; margin-top: 3px; font-size: 1.15rem; }
.coffre--manque .coffre-corps { border-color: #e2553d; }
.coffre--manque b { color: #ffb3a3; }
.coffres-gagne .coffre-corps { border-color: #6fcf7d; }
.coffres-fenn { position: absolute; right: 10px; top: 8px; width: 56px; height: 56px; object-fit: contain; }
.coffres-commandes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.coffres-ration { display: flex; align-items: center; gap: 8px; }
.coffres-ration > button { width: 52px; height: 52px; border: 2px solid #d6b05a; border-radius: 14px; background: #2f4a5e; color: #fff; font-size: 1.6rem; font-weight: 900; cursor: pointer; }
.coffres-ration > button:disabled { opacity: .4; cursor: default; }
.coffres-ration > button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.coffres-ration-valeur { min-width: 150px; text-align: center; color: #ffe7b0; }
.coffres-ration-valeur small { display: block; font-size: .7rem; }
.coffres-ration-valeur strong { font-size: 1.6rem; }
.coffres-ration-valeur span { display: block; font-size: .8rem; letter-spacing: -2px; min-height: 1.1em; }
.coffres-partie .atelier-message { margin: 10px 0 4px; }
.coffres-carnet { color: #dbe7ef; font-size: .8rem; }
.coffres-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) {
  .coffres-jeu { grid-template-columns: 1fr; padding: 12px 10px 14px; }
  .coffres-fenn { width: 44px; height: 44px; }
  .coffre { width: 64px; }
}
@media (prefers-reduced-motion: reduce) { .coffres-anime .coffre-pile--apres, .coffres-anime .coffre b, .coffres-anime .coffres-butin strong, .coffres-anime .coffre-corps .coffre-piece { animation: none; } }

/* Atelier des charpentes 3D (CE2) : solide tournant, commande de billes et de tiges. */
.mission-maths--solides .mission-maths-fenetre { background: #26323a; border-color: #c9a35e; }
.charpente-partie { max-width: 620px; margin: auto; }
.charpente-jeu { position: relative; border: 2px solid #c9a35e; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #f6ecd7, #d8c4a0); }
.charpente-vue { display: block; width: min(100%, 56vh); height: auto; margin: auto; touch-action: none; cursor: grab; }
.charpente-vue:focus-visible { outline: 4px solid #e2a93b; outline-offset: -6px; }
.charpente-tourner { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; }
.charpente-tourner button { width: 46px; height: 46px; border: 2px solid #8a6a3a; border-radius: 50%; background: #fff8ea; color: #3d2614; font-size: 1.4rem; cursor: pointer; }
.charpente-tourner button:focus-visible { outline: 3px solid #e2a93b; outline-offset: 2px; }
.charpente-etabli { position: absolute; right: 10px; bottom: 10px; margin: 0; padding: 6px 10px; border-radius: 10px; background: #3d2614; color: #ffe3a8; font-size: .8rem; font-weight: 700; }
.charpente-fenn { position: absolute; right: 10px; top: 10px; width: 56px; height: 56px; object-fit: contain; }
.charpente-erreur { border-color: #e2553d; }
.charpente-gagne { border-color: #6fcf7d; }
.charpente-commandes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.charpente-compteur { display: flex; align-items: center; gap: 6px; color: #f3e6cf; }
.charpente-compteur > button { width: 46px; height: 46px; border: 2px solid #c9a35e; border-radius: 12px; background: #3a4a55; color: #fff; font-size: 1.4rem; font-weight: 900; cursor: pointer; }
.charpente-compteur > button:disabled { opacity: .4; cursor: default; }
.charpente-compteur > button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.charpente-compteur div { min-width: 64px; text-align: center; }
.charpente-compteur small { display: block; font-size: .7rem; }
.charpente-compteur strong { font-size: 1.5rem; }
.charpente-compteur span { display: block; font-size: .8rem; }
.charpente-partie .atelier-message { margin: 10px 0 4px; }
.charpente-carnet { color: #e3ebef; font-size: .8rem; }
.charpente-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) { .charpente-compteur div { min-width: 48px; } .charpente-fenn { width: 44px; height: 44px; } }

/* Laboratoire des états de la matière (CE2) : bocal, seringue bouchée, bacs de rangement. */
.mission-maths--etatsEau .mission-maths-fenetre { background: #1f3a46; border-color: #8fd0e0; }
.labo-partie { max-width: 680px; margin: auto; }
.labo-jeu { position: relative; padding: 12px; border: 2px solid #8fd0e0; border-radius: 20px; background: linear-gradient(#2c5566, #234553); }
.labo-paillasse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-bottom: 6px; border-bottom: 6px solid #b7c9cf; }
.labo-svg { display: block; width: 100%; height: auto; max-height: 30vh; }
.labo-experiences { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.labo-experiences button { min-height: 46px; padding: 0 14px; border: 2px solid #8fd0e0; border-radius: 14px; background: #183340; color: #fff; font-weight: 800; cursor: pointer; }
.labo-experiences button:disabled { opacity: .45; cursor: default; }
.labo-experiences button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.labo-bac:focus-visible { outline: 3px dashed #8ad8ff; outline-offset: 3px; }
.labo-cahier { list-style: none; margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #fffdf3; color: #2c3a40; font-size: .88rem; min-height: 2.4em; }
.labo-cahier li + li { margin-top: 4px; }
.labo-cahier-vide { color: #7a8a90; font-style: italic; }
.labo-fenn { position: absolute; right: 10px; top: 8px; width: 48px; height: 48px; object-fit: contain; }
.labo-erreur { border-color: #e2553d; }
.labo-gagne { border-color: #6fcf7d; }
.labo-bacs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.labo-bac { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border: 3px solid #5f8a99; border-radius: 16px; background: #183340; color: #fff; cursor: pointer; }
.labo-bac span { font-size: 1.6rem; }
.labo-bac small { font-size: .7rem; color: #bfe0ea; text-align: center; }
.labo-bac { position: relative; }
.labo-bac--choisi { border-color: #ffd76a; background: #2f5a6b; box-shadow: 0 0 0 3px #ffd76a55; }
.labo-bac--choisi::after { content: "✓"; position: absolute; top: 4px; right: 8px; color: #ffd76a; font-weight: 900; }
.labo-bac:disabled { cursor: default; }
.labo-commandes { display: flex; justify-content: space-between; margin-top: 10px; }
.labo-ranger:disabled { opacity: .45; cursor: default; }
.labo-partie .atelier-message { margin: 10px 0 4px; }
.labo-carnet { color: #dbeef3; font-size: .8rem; }
.labo-carnet summary { cursor: pointer; font-weight: 700; }
/* Animations jouées seulement au moment de l'expérience. */
.labo-contenu, .labo-piston, .labo-compresse { transform-box: fill-box; }
.labo-anim .labo-contenu { transform-origin: 50% 100%; animation: labo-remplit 1.2s ease-out both; }
.labo-anim--miel .labo-contenu { animation-duration: 2.6s; }
.labo-anim--glacon .labo-contenu { animation: labo-tombe .6s cubic-bezier(.4, 0, .9, .6) both; }
.labo-anim--air .labo-contenu { animation: labo-diffuse 1.4s ease-out both; }
.labo-anim .labo-loupe { animation: labo-diffuse .4s 1.2s both; }
@keyframes labo-remplit { from { transform: scaleY(0); } }
@keyframes labo-tombe { from { transform: translateY(-90px); } }
@keyframes labo-diffuse { from { opacity: 0; } }
.labo-piston--enfonce { animation: labo-enfonce 1s ease-in-out both; }
@keyframes labo-enfonce { from { transform: translate(0, 0); } }
.labo-piston--bloque { animation: labo-bloque .5s ease-in-out 2; }
@keyframes labo-bloque { 50% { transform: translateX(-4px); } }
.labo-anim .labo-compresse { transform-origin: 0 50%; animation: labo-serre 1s ease-in-out both; }
@keyframes labo-serre { from { transform: scaleX(2); opacity: .5; } }
@media (max-width: 560px) { .labo-bac small { font-size: .62rem; } .labo-fenn { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .labo-anim .labo-contenu, .labo-anim .labo-loupe, .labo-piston--enfonce, .labo-piston--bloque, .labo-anim .labo-compresse { animation: none; } }

/* Carreleur du palais (CM1) : salle en L, cordeau de découpe, pose des dalles de 1 m². */
.mission-maths--aires .mission-maths-fenetre { background: #3a2a33; border-color: #e0b07a; }
.carreleur-partie { max-width: 640px; margin: auto; }
.carreleur-jeu { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: center; padding: 12px; border: 2px solid #e0b07a; border-radius: 20px; background: #f6efe3; }
.carreleur-erreur { border-color: #e2553d; }
.carreleur-gagne { border-color: #6fcf7d; }
.carreleur-plan { display: block; width: 100%; height: auto; max-height: 52vh; }
.carreleur-sol { fill: #efe2c8; }
.carreleur-mur { fill: none; stroke: #5a3b2a; stroke-width: 5; stroke-linejoin: round; }
.carreleur-cote { font: 800 13px system-ui; fill: #5a3b2a; }
.carreleur-cote--inconnue { fill: #c0392b; font-size: 16px; }
.carreleur-dim { font: 800 14px system-ui; fill: #3d2a1f; paint-order: stroke; stroke: #f6efe3; stroke-width: 4; }
.carreleur-cordeau { stroke: #c0392b; stroke-width: 3; stroke-dasharray: 6 4; }
.carreleur-dalle { fill: #d9814a; stroke: #a95a2c; stroke-width: 1.5; }
.carreleur-anime .carreleur-dalle { animation: carreleur-pose .25s ease-out both; }
@keyframes carreleur-pose { from { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; } }
.carreleur-vide { fill: #f6cfc6; stroke: #e2553d; stroke-width: 1.5; stroke-dasharray: 3 3; }
.carreleur-outils { display: flex; flex-direction: column; gap: 8px; color: #3d2a1f; }
.carreleur-outils p { margin: 0; font-weight: 800; }
.carreleur-outils button { min-height: 44px; padding: 0 10px; border: 2px solid #c9a35e; border-radius: 12px; background: #fff8ea; color: #3d2a1f; font-weight: 800; cursor: pointer; text-align: left; }
.carreleur-outils button[aria-pressed="true"] { background: #c0392b; border-color: #8c2c1c; color: #fff; }
.carreleur-outils button:focus-visible, .carreleur-commande button:focus-visible { outline: 3px solid #ffb347; outline-offset: 2px; }
.carreleur-pile { padding: 6px 8px; border-radius: 10px; background: #d9814a; color: #fff; }
.carreleur-fenn { position: absolute; right: 10px; bottom: 10px; width: 56px; height: 56px; object-fit: contain; }
.carreleur-commandes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.carreleur-commande { display: flex; align-items: center; gap: 5px; color: #f6efe3; }
.carreleur-commande button { min-width: 44px; height: 46px; border: 2px solid #e0b07a; border-radius: 12px; background: #5a3b45; color: #fff; font-weight: 900; cursor: pointer; }
.carreleur-commande button:disabled { opacity: .4; cursor: default; }
.carreleur-commande div { min-width: 86px; text-align: center; }
.carreleur-commande small { display: block; font-size: .68rem; }
.carreleur-commande strong { font-size: 1.6rem; }
.carreleur-partie .atelier-message { margin: 10px 0 4px; }
.carreleur-carnet { color: #f1e4d6; font-size: .8rem; }
.carreleur-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) { .carreleur-jeu { grid-template-columns: 1fr; } .carreleur-outils { flex-direction: row; flex-wrap: wrap; } .carreleur-outils p { width: 100%; } .carreleur-commande div { min-width: 64px; } }
@media (prefers-reduced-motion: reduce) { .carreleur-anime .carreleur-dalle { animation: none; } }

/* Équilibre de la forêt (CM1) : chaîne alimentaire en quatre maillons, flèches « est mangé par ». */
.mission-maths--chaine .mission-maths-fenetre { background: #1f3326; border-color: #9fd18a; }
.chaine-partie { max-width: 660px; margin: auto; }
.chaine-jeu { position: relative; padding: 12px; border: 2px solid #9fd18a; border-radius: 20px; background: linear-gradient(160deg, var(--decor, #2f5d3a), #16261b); color: #f2f7ee; }
.chaine-erreur { border-color: #e2553d; }
.chaine-gagne { border-color: #ffd76a; }
.chaine-legende { margin: 0 0 8px; font-size: .8rem; color: #d8ecd0; }
.chaine-ligne { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 104px; }
.chaine-maillon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 108px; min-height: 96px; padding: 4px; border: 3px solid #cfe8c2; border-radius: 16px; background: #fffdf3; color: #22331f; cursor: pointer; }
.chaine-maillon span { font-size: 2rem; }
.chaine-maillon small { font-size: .72rem; font-weight: 800; text-align: center; line-height: 1.1; }
.chaine-maillon--vide { border-style: dashed; background: transparent; color: #a9cf9c; font-weight: 900; cursor: default; }
.chaine-maillon--faux { border-color: #e2553d; background: #ffe1d9; }
.chaine-maillon:disabled { cursor: default; }
.chaine-fleche { font-size: 1.7rem; font-weight: 900; color: #ffe08a; }
.chaine-fleche--faux { color: #ff7a63; transform: scale(1.3); }
.chaine-gagne .chaine-fleche, .chaine-gagne .chaine-maillon:not(.chaine-maillon--vide) { animation: chaine-energie .5s calc(var(--i) * .35s) ease-out both; }
@keyframes chaine-energie { 50% { transform: scale(1.12); filter: drop-shadow(0 0 10px #ffd76a); } }
.chaine-reserve { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; padding-top: 10px; border-top: 2px dashed #ffffff33; }
.chaine-carte { display: flex; flex-direction: column; align-items: center; width: 96px; min-height: 76px; padding: 4px; border: 2px solid #cfe8c2; border-radius: 14px; background: #2a4430; color: #fff; cursor: pointer; }
.chaine-carte span { font-size: 1.6rem; }
.chaine-carte small { font-size: .7rem; text-align: center; line-height: 1.1; }
.chaine-carte:disabled { opacity: .3; cursor: default; }
.chaine-carte:focus-visible, .chaine-maillon:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.chaine-fenn { position: absolute; right: 10px; top: 6px; width: 46px; height: 46px; object-fit: contain; }
.chaine-commandes { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.chaine-partie .atelier-message { margin: 10px 0 4px; }
.chaine-carnet { color: #d8ecd0; font-size: .8rem; }
.chaine-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) {
  .chaine-ligne { gap: 1px; }
  .chaine-maillon { width: 74px; min-height: 84px; }
  .chaine-maillon span { font-size: 1.5rem; }
  .chaine-maillon small { font-size: .62rem; }
  .chaine-fleche { font-size: 1.1rem; }
  .chaine-carte { width: 84px; }
}
@media (prefers-reduced-motion: reduce) { .chaine-gagne .chaine-fleche, .chaine-gagne .chaine-maillon { animation: none; } }

/* Entrepôt des conteneurs (CM2) : conteneur isométrique, couches de caisses de 1 m³. */
.mission-maths--volumes .mission-maths-fenetre { background: #22313b; border-color: #8fb3c9; }
.entrepot-partie { max-width: 600px; margin: auto; }
.entrepot-jeu { position: relative; padding: 10px; border: 2px solid #8fb3c9; border-radius: 20px; background: linear-gradient(#cfe0ea, #9fb6c4 70%, #7d8f9b 70%); }
.entrepot-erreur { border-color: #e2553d; }
.entrepot-gagne { border-color: #6fcf7d; }
.entrepot-bon { margin: 0; padding: 6px 10px; border-radius: 10px; background: #fffdf3; color: #2e3a44; font-size: .85rem; }
.entrepot-vue { display: block; width: min(100%, 50vh); height: auto; margin: auto; }
.entrepot-cote { font: 800 13px system-ui; fill: #1f2a33; paint-order: stroke; stroke: #e6eff4; stroke-width: 4; }
.entrepot-cote--cache { fill: #c0392b; font-size: 15px; }
.entrepot-anime .entrepot-caisse { animation: entrepot-descend .35s ease-out both; }
@keyframes entrepot-descend { from { opacity: 0; transform: translateY(-40px); } }
.entrepot-quai { position: absolute; left: 10px; bottom: 10px; margin: 0; padding: 6px 10px; border-radius: 10px; background: #c0503a; color: #fff; font-size: .8rem; font-weight: 800; }
.entrepot-fenn { position: absolute; right: 10px; bottom: 10px; width: 52px; height: 52px; object-fit: contain; }
.entrepot-commandes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; color: #e6eff4; }
.entrepot-compteur small { display: block; font-size: .7rem; text-align: center; }
.entrepot-compteur div { display: flex; align-items: center; gap: 4px; }
.entrepot-compteur button { width: 44px; height: 44px; border: 2px solid #8fb3c9; border-radius: 12px; background: #34495a; color: #fff; font-size: 1.3rem; font-weight: 900; cursor: pointer; }
.entrepot-compteur button:disabled { opacity: .4; cursor: default; }
.entrepot-compteur button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.entrepot-compteur strong { min-width: 34px; text-align: center; font-size: 1.5rem; }
.entrepot-fois { font-size: 1.5rem; font-weight: 900; }
.entrepot-total { font-weight: 800; margin-right: auto; }
.entrepot-partie .atelier-message { margin: 10px 0 4px; }
.entrepot-carnet { color: #dfe9ef; font-size: .8rem; }
.entrepot-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) { .entrepot-total { width: 100%; } .entrepot-fenn { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .entrepot-anime .entrepot-caisse { animation: none; } }

/* Centrale de Fenn (CM2) : chaîne source → convertisseur → besoin, contraintes du village. */
.mission-maths--energie .mission-maths-fenetre { background: #26283a; border-color: #ffd76a; }
.centrale-partie { max-width: 680px; margin: auto; }
.centrale-jeu { position: relative; padding: 12px; border: 2px solid #ffd76a; border-radius: 20px; background: linear-gradient(#36406a, #232842); color: #f3f1ff; }
.centrale-erreur { border-color: #e2553d; }
.centrale-gagne { border-color: #6fcf7d; }
.centrale-besoin { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #fffaf0; color: #2b2a40; }
.centrale-besoin > span { font-size: 2rem; }
.centrale-besoin small { display: block; font-size: .7rem; }
.centrale-besoin b { display: block; }
.centrale-besoin em { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 10px; background: #2f7a4f; color: #fff; font-style: normal; font-size: .72rem; font-weight: 800; }
.centrale-besoin em.centrale-contrainte--faux { background: #c0392b; }
.centrale-chaine { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0; }
.centrale-maillon { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 116px; min-height: 84px; padding: 4px; border: 3px solid #b9b6e6; border-radius: 14px; background: #fff; color: #2b2a40; text-align: center; }
.centrale-maillon span { font-size: 1.8rem; }
.centrale-maillon small { font-size: .7rem; font-weight: 800; line-height: 1.1; }
.centrale-maillon--vide { border-style: dashed; background: transparent; color: #cfcdf3; }
.centrale-maillon--faux { border-color: #e2553d; background: #ffe1d9; }
.centrale-cible { border-color: #ffd76a; }
.centrale-fleche { font-size: 1.6rem; font-weight: 900; color: #ffd76a; }
.centrale-fleche--rompue { color: #ff7a63; }
.centrale-gagne .centrale-fleche { animation: centrale-flux .6s ease-in-out 3; }
.centrale-gagne .centrale-cible { animation: centrale-allume 1.2s ease-out both; }
@keyframes centrale-flux { 50% { transform: translateX(6px); color: #fff3a0; } }
@keyframes centrale-allume { to { box-shadow: 0 0 18px #ffd76a; } }
.centrale-bilan { display: flex; height: 26px; margin: 0 0 10px; border-radius: 13px; overflow: hidden; font-size: .72rem; font-weight: 800; }
.centrale-bilan span { display: grid; place-items: center; white-space: nowrap; overflow: hidden; }
.centrale-bilan span:first-child { background: #6fcf7d; color: #133a1f; }
.centrale-bilan span:last-child { background: #e8875a; color: #3a1a0d; }
.centrale-choix { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.centrale-choix > div { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.centrale-choix p { width: 100%; margin: 0; font-size: .75rem; font-weight: 800; color: #d6d4f7; }
.centrale-carte { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px; border: 2px solid #8f8cc9; border-radius: 12px; background: #2f3456; color: #fff; cursor: pointer; }
.centrale-carte span { font-size: 1.2rem; }
.centrale-carte small { font-size: .78rem; font-weight: 700; }
.centrale-carte--choisie { border-color: #ffd76a; background: #4a4f80; box-shadow: 0 0 0 3px #ffd76a55; }
.centrale-carte:disabled { cursor: default; }
.centrale-carte:focus-visible { outline: 3px dashed #8ad8ff; outline-offset: 2px; }
.centrale-fenn { position: absolute; right: 10px; top: 8px; width: 46px; height: 46px; object-fit: contain; }
.centrale-commandes { display: flex; justify-content: space-between; margin-top: 10px; }
.centrale-marche:disabled { opacity: .45; cursor: default; }
.centrale-partie .atelier-message { margin: 10px 0 4px; }
.centrale-carnet { color: #dddbf6; font-size: .8rem; }
.centrale-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) {
  .centrale-choix { grid-template-columns: 1fr; }
  .centrale-maillon { width: 92px; min-height: 76px; }
  .centrale-fleche { font-size: 1.1rem; }
  .centrale-fenn { display: none; }
}
@media (prefers-reduced-motion: reduce) { .centrale-gagne .centrale-fleche, .centrale-gagne .centrale-cible { animation: none; } }

/* Le courrier à une roue : roulement à l'échelle de la maquette. */
.mission-maths--cercle .mission-maths-fenetre { background: #203c3c; color: #f6eedb; }
.poste-partie { max-width: 710px; margin: auto; }
.poste-scene { position: relative; overflow: hidden; border: 2px solid #b7b387; border-radius: 20px; background: #abcbd0; }
.poste-scene svg { display: block; width: 100%; height: auto; }
.poste-adresse { position: relative; margin: 8px; border: 1px solid #a89b6c; border-radius: 12px; padding: 8px 13px; background: #fff1d6; color: #344940; }
.poste-adresse b, .poste-adresse span, .poste-adresse small { display: block; }
.poste-adresse b { font-size: .95rem; }
.poste-adresse span { font-size: .9rem; margin: 3px 0; }
.poste-adresse small { font-size: .65rem; }
.poste-commandes { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; font-size: .85rem; }
.poste-ratelier { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; padding: 8px; background: #6b523b; border: 3px solid #94764d; border-radius: 12px; }
.poste-ratelier button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border: 1px solid #c3a578; border-radius: 8px; background: #f0dfb8; color: #34463e; font-size: .8rem; font-weight: 800; cursor: pointer; }
.poste-ratelier i { display: grid; place-content: center; width: var(--roue); height: var(--roue); border: 2px solid #4d5b50; border-radius: 50%; font-style: normal; }
.poste-ratelier [aria-pressed=true] { box-shadow: inset 0 0 0 3px #bc762c; background: #ffecba; }
.poste-ratelier button:disabled { opacity: .5; cursor: default; }
.poste-message { min-height: 24px; font-size: .88rem; color: #ffe3a3; margin: 9px 0; }
.poste-gestes, .poste-carnet { font-size: .75rem; color: #d9e2cf; }
.poste-carnet summary { cursor: pointer; font-weight: 700; }
.poste-translation { transform: translateX(var(--course)); }
.poste-rotation { transform-origin: 0 0; }
.poste-roule .poste-translation { animation: poste-avancer 1.5s linear; }
.poste-roule .poste-rotation { animation: poste-tourner 1.5s linear; }
.poste-roule .poste-trace { animation: poste-derouler 1.5s linear; }
.poste-lettre { opacity: .4; }
.poste-livree .poste-lettre { opacity: 1; transform: translateY(-100px); filter: drop-shadow(0 0 5px #fff0ac); }
@keyframes poste-avancer { from { transform: translateX(0); } to { transform: translateX(var(--course)); } }
@keyframes poste-tourner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes poste-derouler { from { stroke-dashoffset: var(--longueur); } to { stroke-dashoffset: 0; } }
@media(max-width:600px) {
  .mission-maths--cercle .mission-maths-fenetre { padding: .55rem; }
  .mission-maths--cercle .mission-maths-entete h2 { font-size: 1.1rem; }
  .mission-maths--cercle .mission-maths-entete p { font-size: .55rem; }
  .mission-maths--cercle .mission-maths-outils .btn { font-size: .75rem; padding: .25rem .45rem; }
  .poste-ratelier { grid-template-columns: repeat(4,1fr); padding: 5px; gap: 5px; }
  .poste-adresse { margin: 5px; padding: 5px 8px; }
  .poste-adresse b { font-size: .75rem; }
  .poste-adresse span { font-size: .8rem; margin: 1px 0; }
  .poste-adresse small { font-size: .55rem; }
  .poste-commandes { font-size: .73rem; }
  .poste-commandes .atelier-action { padding: 9px 12px; font-size: .8rem; }
  .poste-message { font-size: .78rem; }
}
@media(prefers-reduced-motion:reduce) { .poste-scene * { animation: none !important; } }

/* Relais de nuit : monter un boîtier de facteurs dix. */
.mission-maths--puissances .mission-maths-fenetre { background: #152d40; color: #edf2df; }
.relais-partie { position: relative; max-width: 710px; margin: auto; }
.relais-paysage { overflow: hidden; border: 2px solid #71989a; border-radius: 18px 18px 0 0; }
.relais-paysage svg { display: block; width: 100%; height: auto; }
.relais-onde { opacity: 0; stroke-dasharray: 14 15; }
.relais-reveille .relais-cible { filter: drop-shadow(0 0 9px #ffda80); }
.relais-erreur .relais-cible { fill: #e7a18a; }
.relais-erreur .relais-onde { opacity: .3; }
.relais-emission .relais-onde { opacity: 1; animation: relais-transmettre .4s linear infinite; }
.relais-atelier { padding: 10px; border: 2px solid #71989a; border-top: 0; border-radius: 0 0 18px 18px; background: #2b4652; }
.relais-commande { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 16px; padding: 8px 12px; border-radius: 9px; background: #e5dcc0; color: #344644; }
.relais-commande span { font-size: .75rem; }
.relais-commande strong { font-size: 1.25rem; }
.relais-commande small { flex-basis: 100%; font-size: .65rem; }
.relais-baie { display: flex; align-items: center; gap: 8px; min-height: 70px; margin: 10px 0; padding: 10px; border: 2px solid #94a7a2; border-radius: 10px; background: #152c39; }
.relais-modules { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; flex: 1; }
.relais-entree { font-weight: 800; color: #a5dbdb; white-space: nowrap; }
.relais-capsule { min-width: 44px; min-height: 44px; padding: 4px; border: 2px solid #99d2d6; border-radius: 9px; background: #26647a; color: #e6ffff; font-size: .85rem; font-weight: 900; cursor: pointer; }
.relais-capsule.relais-attenuateur { background: #86673f; color: #fff1d2; border-color: #d4bb85; }
.relais-capsule:disabled { cursor: default; }
.relais-direct { font-size: .8rem; color: #bdcfcc; }
.relais-sortie { min-width: 78px; text-align: center; color: #ffe7a6; }
.relais-sortie b { font-size: 1.25rem; }
.relais-sortie small { display: block; font-size: .65rem; overflow-wrap: anywhere; }
.relais-reserve { display: flex; gap: 10px; }
.relais-prendre { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; flex: 1; border: 2px solid #a6c5c8; border-radius: 11px; background: #d3e7df; color: #274a53; cursor: grab; touch-action: none; }
.relais-prendre i { display: grid; place-content: center; width: 43px; height: 37px; border-radius: 8px; background: #26647a; color: #e6ffff; font-style: normal; font-weight: 900; }
.relais-prendre[data-relais-module='-1'] i { background: #86673f; color: #fff1d2; }
.relais-prendre span { font-weight: 800; font-size: .8rem; }
.relais-prendre small { display: block; font-size: .6rem; font-weight: 400; }
.relais-prendre:disabled { opacity: .5; cursor: default; }
.relais-annulation { font-size: .68rem; color: #d3dfd8; margin: 8px 0 0; }
.relais-commandes { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.relais-commandes>span { font-size: .78rem; }
.relais-message { font-size: .85rem; color: #ffe4a5; min-height: 24px; margin: 9px 0; }
.relais-gestes, .relais-carnet { font-size: .72rem; color: #cbdbd5; }
.relais-carnet summary { font-weight: 700; cursor: pointer; }
.relais-intro { position: absolute; inset: 35px 0 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 25px; border-radius: 15px; background: #142b3bf2; text-align: center; }
.relais-intro b { font-size: 1.25rem; color: #ffe0a1; }
.relais-intro p { max-width: 400px; font-size: .9rem; }
.relais-drag { position: fixed; z-index: 10000; pointer-events: none; transform: translate(-50%,-50%); padding: 15px; border-radius: 10px; background: #26647a; border: 2px solid #f4dda3; color: #fff; font-weight: 900; }
@keyframes relais-transmettre { to { stroke-dashoffset: -29; } }
@media(max-width:600px) {
  .mission-maths--puissances .mission-maths-fenetre { padding: .55rem; }
  .mission-maths--puissances .mission-maths-entete h2 { font-size: 1.1rem; }
  .mission-maths--puissances .mission-maths-entete p { font-size: .55rem; }
  .mission-maths--puissances .mission-maths-outils .btn { font-size: .75rem; padding: .25rem .45rem; }
  .relais-atelier { padding: 7px; }
  .relais-commande { padding: 6px 9px; }
  .relais-baie { padding: 8px 5px; gap: 5px; }
  .relais-sortie { min-width: 62px; }
  .relais-capsule { font-size: .75rem; }
  .relais-reserve { gap: 7px; }
  .relais-prendre { gap: 5px; min-height: 57px; padding: 5px; }
  .relais-prendre span { font-size: .68rem; }
  .relais-prendre small { font-size: .55rem; }
  .relais-prendre i { width: 34px; height: 34px; font-size: .8rem; }
  .relais-commandes .atelier-action { font-size: .8rem; padding: 10px 12px; }
  .relais-message { font-size: .78rem; }
}
@media(prefers-reduced-motion:reduce) { .relais-paysage * { animation: none !important; } }

/* Le train du rendez-vous : distance et horloge avancent ensemble. */
.mission-maths--vitesse .mission-maths-fenetre { background: #25423e; color: #f3ecd8; }
.rendezvous-partie { max-width: 710px; margin: auto; position: relative; }
.rendezvous-scene { overflow: hidden; border: 2px solid #c3bc90; border-radius: 18px; background: #c6d7cc; }
.rendezvous-ordre { color: #344e45; background: #f1e6c9; border: 1px solid #b2a682; border-radius: 11px; padding: 8px 12px; margin: 8px; }
.rendezvous-ordre b, .rendezvous-ordre span, .rendezvous-ordre small { display: block; }
.rendezvous-ordre b { font-size: .95rem; }
.rendezvous-ordre span { font-size: .88rem; margin: 3px 0; }
.rendezvous-ordre strong { display: inline; }
.rendezvous-ordre small { font-size: .65rem; }
.rendezvous-paysage { width: 100%; height: auto; display: block; }
.rendezvous-mesures { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 8px 12px; gap: 5px 10px; background: #263f42; font-size: .85rem; }
.rendezvous-mesures b { color: #ffe3a3; }
.rendezvous-console { padding: 10px 0 0; }
.rendezvous-vitesse { font-size: .85rem; }
.rendezvous-vitesse b { color: #ffe0a0; }
.rendezvous-manette { width: 100%; height: 80px; display: block; touch-action: none; cursor: grab; }
.rendezvous-manette:focus-visible { outline: 2px solid #f7d898; border-radius: 12px; }
.rendezvous-manette[aria-disabled=true] { opacity: .6; cursor: default; }
.rendezvous-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rendezvous-actions>div { display: flex; gap: 8px; }
.rendezvous-actions [data-vitesse-pas] { border: 1px solid #c2b38b; border-radius: 9px; min-width: 48px; min-height: 44px; background: #d8dab9; color: #2d4d45; font-size: 1rem; font-weight: 800; cursor: pointer; }
.rendezvous-actions [data-vitesse-pas]:disabled { opacity: .4; cursor: default; }
.rendezvous-message { font-size: .85rem; min-height: 24px; color: #ffe1a2; margin: 9px 0; }
.rendezvous-gestes, .rendezvous-carnet { color: #d2e0d1; font-size: .72rem; }
.rendezvous-carnet summary { cursor: pointer; font-weight: 700; }
.rendezvous-intro { position: absolute; inset: 35px 0 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 25px; border-radius: 15px; background: #203d3cf2; text-align: center; }
.rendezvous-intro b { color: #ffe0a0; font-size: 1.2rem; }
.rendezvous-intro p { max-width: 400px; font-size: .9rem; }
@media(max-width:600px) {
  .mission-maths--vitesse .mission-maths-fenetre { padding: .55rem; }
  .mission-maths--vitesse .mission-maths-entete h2 { font-size: 1.05rem; }
  .mission-maths--vitesse .mission-maths-entete p { font-size: .55rem; }
  .mission-maths--vitesse .mission-maths-outils .btn { font-size: .75rem; padding: .25rem .45rem; }
  .rendezvous-ordre { padding: 6px 9px; margin: 5px; }
  .rendezvous-ordre b { font-size: .75rem; }
  .rendezvous-ordre span { font-size: .8rem; }
  .rendezvous-ordre small { font-size: .56rem; }
  .rendezvous-mesures { padding: 7px; font-size: .72rem; }
  .rendezvous-actions .atelier-action { font-size: .78rem; padding: 9px 11px; }
  .rendezvous-message { font-size: .78rem; }
  .rendezvous-manette { height: 60px; }
}

/* Trésor de la demi-droite (6e) : abscisses en fraction, nombre mixte ou décimal. */
.mission-maths--abscisse .mission-maths-fenetre { background: #2e2a22; border-color: #d9b56a; }
.droite-partie { max-width: 720px; margin: auto; }
.droite-jeu { position: relative; border: 2px solid #d9b56a; border-radius: 20px; overflow: hidden; background: #f3e3bf; }
.droite-erreur { border-color: #e2553d; }
.droite-gagne { border-color: #6fcf7d; }
.droite-carte { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 10px 12px 0; padding: 8px 14px; border: 2px dashed #8a6a3a; border-radius: 12px; background: #fff7e3; color: #3d2a17; }
.droite-carte small { font-weight: 800; text-transform: uppercase; font-size: .7rem; }
.droite-carte strong { font-size: 1.8rem; }
.droite-carte span { font-size: .8rem; }
.droite-vue { display: block; width: 100%; height: auto; touch-action: none; cursor: pointer; }
.droite-vue:focus-visible { outline: 4px solid #e2a93b; outline-offset: -6px; }
.droite-nombre { font: 800 20px system-ui; fill: #3d2a17; }
.droite-lecture { font: 800 15px system-ui; fill: #fff; }
.droite-commandes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.droite-pas { display: flex; gap: 8px; }
.droite-pas button { min-height: 44px; padding: 0 12px; border: 2px solid #d9b56a; border-radius: 12px; background: #4a3d2b; color: #fff; font-weight: 800; cursor: pointer; }
.droite-pas button:disabled { opacity: .4; cursor: default; }
.droite-pas button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.droite-planter:disabled { opacity: .45; cursor: default; }
.droite-partie .atelier-message { margin: 10px 0 4px; }
.droite-carnet { color: #efe3cc; font-size: .8rem; }
.droite-carnet summary { cursor: pointer; font-weight: 700; }

/* Échelle du cosinus (4e) : triangle rectangle exact, pied ou longueur à régler. */
.mission-maths--cosinus .mission-maths-fenetre { background: #22313a; border-color: #8fc0d8; }
.echelle-partie { max-width: 680px; margin: auto; }
.echelle-jeu { position: relative; border: 2px solid #8fc0d8; border-radius: 20px; overflow: hidden; background: #cfe6f0; }
.echelle-erreur { border-color: #e2553d; }
.echelle-gagne { border-color: #6fcf7d; }
.echelle-consigne { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 10px 12px 0; padding: 8px 12px; border-radius: 12px; background: #fff8e6; color: #2e3a44; }
.echelle-consigne small { font-weight: 800; text-transform: uppercase; font-size: .68rem; }
.echelle-consigne strong { font-size: 1.4rem; }
.echelle-consigne span { width: 100%; font-size: .85rem; }
.echelle-vue { display: block; width: min(100%, 92vh); height: auto; margin: auto; touch-action: none; cursor: grab; }
.echelle-vue:focus-visible { outline: 4px solid #e2a93b; outline-offset: -6px; }
.echelle-cote { font: 800 15px system-ui; fill: #1f2a33; paint-order: stroke; stroke: #e6f2f7; stroke-width: 4; }
.echelle-angle { font: 800 15px system-ui; fill: #1f2a33; }
.echelle-glisse { animation: echelle-glisse .7s ease-in-out 2; }
.echelle-bascule { animation: echelle-bascule .7s ease-in-out 2; }
@keyframes echelle-glisse { 50% { transform: rotate(4deg); } }
@keyframes echelle-bascule { 50% { transform: rotate(-4deg); } }
.echelle-commandes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.echelle-pas { display: flex; gap: 8px; }
.echelle-pas button { min-width: 64px; min-height: 44px; border: 2px solid #8fc0d8; border-radius: 12px; background: #34495a; color: #fff; font-weight: 800; cursor: pointer; }
.echelle-pas button:disabled { opacity: .4; cursor: default; }
.echelle-pas button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.echelle-poser:disabled { opacity: .45; cursor: default; }
.echelle-partie .atelier-message { margin: 10px 0 4px; }
.echelle-carnet { color: #dfe9ef; font-size: .8rem; }
.echelle-carnet summary { cursor: pointer; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .echelle-glisse, .echelle-bascule { animation: none; } }

/* PGCD : fabriquer un couple entier irréductible dans l'atelier. */
.mission-maths--engrenagePremier .mission-maths-fenetre { background: #253c48; color: #f4e8cb; }
.fabrique-partie { position: relative; max-width: 710px; margin: auto; }
.fabrique-commande { padding: 9px 12px; border: 1px solid #cfb784; border-radius: 12px; background: #eee0bd; color: #394d4e; margin: 8px 0; }
.fabrique-commande b, .fabrique-commande span { display: block; }
.fabrique-commande b { font-size: .95rem; }
.fabrique-commande span { font-size: .8rem; margin-top: 3px; }
.fabrique-etabli { display: grid; grid-template-columns: 1fr 1fr; position: relative; gap: 10px; padding: 10px; border: 3px solid #947655; border-radius: 16px; background: #5b635e; }
.fabrique-etabli>div { min-width: 0; border: 1px solid #9aafad; border-radius: 10px; background: #243e4e; overflow: hidden; }
.fabrique-etabli h3 { font-size: .8rem; padding: 9px 5px 0; margin: 0; text-align: center; color: #f4d7a0; }
.fabrique-etabli svg { display: block; width: 100%; height: auto; }
.fabrique-etabli p { text-align: center; font-size: .75rem; padding: 0 6px 7px; margin: 0; min-height: 36px; }
.fabrique-attente { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 340/245; color: #b7cacc; gap: 6px; padding: 8px; }
.fabrique-attente span { font-size: 2.7rem; }
.fabrique-attente p { padding: 0; min-height: 0; font-size: .75rem; }
/* Fenn dans un coin de l’établi : la page tient en hauteur sur un écran de portable. */
.fabrique-fenn { position: absolute; top: -14px; right: -6px; width: 44px; height: 44px; object-fit: contain; }
.fabrique-reussie .fabrique-prototype { border-color: #f2cf86; box-shadow: 0 0 12px #eac47766; }
.fabrique-tourne { transform-origin: 0 0; animation: fabrique-tour 2s linear infinite; }
.fabrique-instrument>b { display: block; margin: 10px 0 7px; font-size: .85rem; }
.fabrique-outils { display: grid; grid-template-columns: repeat(9,1fr); gap: 6px; padding: 7px; border: 2px solid #ad9365; border-radius: 11px; background: #725c43; }
.fabrique-outils button { min-height: 44px; border-radius: 9px; border: 2px solid #c2b18b; background: #d9d6b9; color: #314a4e; font-size: 1rem; font-weight: 900; cursor: pointer; }
.fabrique-outils [aria-pressed=true] { background: #ffdda1; border-color: #f0b958; box-shadow: inset 0 0 0 2px #936c3b; }
.fabrique-outils button:disabled { opacity: .5; cursor: default; }
.fabrique-commandes { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.fabrique-commandes>span { font-size: .72rem; max-width: 250px; }
.fabrique-message { font-size: .84rem; color: #ffe0a0; margin: 9px 0; min-height: 24px; }
.fabrique-gestes, .fabrique-carnet { font-size: .72rem; color: #d0ddce; }
.fabrique-carnet summary { cursor: pointer; font-weight: 700; }
.fabrique-intro { position: absolute; inset: 36px 0 0; z-index: 1; border-radius: 15px; background: #203745f2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 25px; gap: 12px; }
.fabrique-intro b { font-size: 1.2rem; color: #ffe0a1; }
.fabrique-intro p { max-width: 420px; font-size: .9rem; }
@keyframes fabrique-tour { to { transform: rotate(var(--tour)); } }
@media(max-width:600px) {
  .mission-maths--engrenagePremier .mission-maths-fenetre { padding: .55rem; }
  .mission-maths--engrenagePremier .mission-maths-entete h2 { font-size: 1.05rem; }
  .mission-maths--engrenagePremier .mission-maths-entete p { font-size: .55rem; }
  .mission-maths--engrenagePremier .mission-maths-outils .btn { font-size: .75rem; padding: .25rem .45rem; }
  .fabrique-commande { padding: 7px 9px; }
  .fabrique-commande b { font-size: .8rem; }
  .fabrique-commande span { font-size: .7rem; }
  .fabrique-etabli { padding: 6px; gap: 6px; }
  .fabrique-etabli h3 { font-size: .64rem; padding: 7px 3px 0; }
  .fabrique-etabli p, .fabrique-attente p { font-size: .62rem; }
  .fabrique-outils { grid-template-columns: repeat(6,1fr); gap: 5px; padding: 5px; }
  .fabrique-outils button { font-size: .85rem; }
  .fabrique-commandes .atelier-action { font-size: .77rem; padding: 10px; }
  .fabrique-commandes>span { font-size: .64rem; max-width: 125px; }
  .fabrique-message { font-size: .76rem; }
}
@media(prefers-reduced-motion:reduce) { .fabrique-tourne { animation: none; } }

/* Télémètre trigonométrique (3e) : SOH CAH TOA, loupes qui colorent les côtés d'un rapport. */
.mission-maths--trigo .mission-maths-fenetre { background: #232f38; border-color: #9cc7a8; }
.trigo-partie { max-width: 680px; margin: auto; }
.trigo-jeu { position: relative; border: 2px solid #9cc7a8; border-radius: 20px; overflow: hidden; background: #d6ebf3; padding-bottom: 8px; }
.trigo-erreur { border-color: #e2553d; }
.trigo-gagne { border-color: #6fcf7d; }
.trigo-fiche { display: flex; flex-direction: column; gap: 2px; margin: 10px 12px 0; padding: 8px 12px; border-radius: 12px; background: #fff8e6; color: #2e3a44; font-size: .88rem; }
.trigo-fiche small { font-weight: 800; text-transform: uppercase; font-size: .68rem; }
.trigo-vue { display: block; width: min(100%, 60vh); height: auto; margin: auto; touch-action: none; cursor: grab; }
.trigo-vue:focus-visible { outline: 4px solid #e2a93b; outline-offset: -6px; }
.trigo-cote { font: 800 14px system-ui; fill: #1f2a33; paint-order: stroke; stroke: #eaf5f9; stroke-width: 4; }
.trigo-cote--cherche { text-decoration: underline; }
.trigo-point { font: 800 15px system-ui; fill: #1f2a33; }
.trigo-angle { font: 800 14px system-ui; fill: #1f2a33; }
.trigo-impossible { font: 800 15px system-ui; fill: #c0392b; }
.trigo-loupes { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 0 8px; }
.trigo-loupes button { min-height: 40px; padding: 0 10px; border: 2px solid #5f7a8a; border-radius: 12px; background: #fff; color: #1f2a33; font-weight: 800; cursor: pointer; }
.trigo-loupes button[aria-pressed="true"] { background: #2e3a44; color: #fff; border-color: #2e3a44; }
.trigo-loupes button:focus-visible { outline: 3px solid #e2a93b; outline-offset: 2px; }
.trigo-commandes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.trigo-pas { display: flex; gap: 8px; }
.trigo-pas button { min-width: 64px; min-height: 44px; border: 2px solid #9cc7a8; border-radius: 12px; background: #34495a; color: #fff; font-weight: 800; cursor: pointer; }
.trigo-pas button:disabled { opacity: .4; cursor: default; }
.trigo-pas button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.trigo-valider:disabled { opacity: .45; cursor: default; }
.trigo-partie .atelier-message { margin: 10px 0 4px; }
.trigo-carnet { color: #dfe9ef; font-size: .8rem; }
.trigo-carnet summary { cursor: pointer; font-weight: 700; }

/* Sonde des vecteurs (2de) : deux poussées u et v, relation de Chasles. */
.mission-maths--vecteur .mission-maths-fenetre { background: #141f38; border-color: #7aa6ff; }
.sonde-partie { max-width: 620px; margin: auto; }
.sonde-jeu { position: relative; border: 2px solid #7aa6ff; border-radius: 20px; overflow: hidden; background: #0f1b33; }
.sonde-erreur { border-color: #e2553d; }
.sonde-gagne { border-color: #6fcf7d; }
.sonde-vue { display: block; width: min(100%, 64vh); height: auto; margin: auto; }
.sonde-graduation { font: 700 12px system-ui; fill: #9fb3d1; }
.sonde-point { font: 800 13px system-ui; fill: #f2f6ff; paint-order: stroke; stroke: #0f1b33; stroke-width: 4; }
.sonde-nom { font: 900 16px system-ui; paint-order: stroke; stroke: #0f1b33; stroke-width: 4; }
.sonde-console { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; color: #f2f6ff; }
.sonde-vecteur { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 14px; background: #1c2a4a; font-size: 1.1rem; }
.sonde-valeur { display: inline-flex; align-items: center; gap: 3px; }
.sonde-valeur strong { min-width: 30px; text-align: center; font-size: 1.25rem; }
.sonde-valeur button { width: 40px; height: 40px; border: 2px solid #7aa6ff; border-radius: 10px; background: #2b3d66; color: #fff; font-size: 1.2rem; font-weight: 900; cursor: pointer; }
.sonde-valeur button:disabled { opacity: .4; cursor: default; }
.sonde-valeur button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.sonde-commandes { display: flex; justify-content: space-between; margin-top: 10px; }
.sonde-partie .atelier-message { margin: 10px 0 4px; }
.sonde-carnet { color: #d6e0f5; font-size: .8rem; }
.sonde-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) { .sonde-point { font-size: 16px; } .sonde-graduation { font-size: 15px; } .sonde-nom { font-size: 19px; } .sonde-vecteur { font-size: .95rem; padding: 5px 6px; } .sonde-valeur button { width: 36px; height: 40px; } }

/* Laboratoire des teintes (2de) : dissolution, choix de fiole, dilution ; teinte comparée à l'étalon. */
.mission-maths--solution .mission-maths-fenetre { background: #1d2a36; border-color: #6fb3e0; }
.teinte-partie { max-width: 640px; margin: auto; }
.teinte-jeu { position: relative; border: 2px solid #6fb3e0; border-radius: 20px; overflow: hidden; background: #e8eef3; }
.teinte-erreur { border-color: #e2553d; }
.teinte-gagne { border-color: #6fcf7d; }
.teinte-fiche { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: #fffdf6; color: #2c3640; font-size: .9rem; border-bottom: 1px solid #c9d3dc; }
.teinte-fiche small { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: #6a7783; }
.teinte-vue { display: block; width: min(100%, 78vh); height: auto; margin: auto; }
.teinte-legende { font: 700 14px system-ui; fill: #2c3640; }
.teinte-balance { font: 800 13px ui-monospace, monospace; fill: #1d4d24; }
.teinte-sachet { font: 900 18px system-ui; fill: #5a4a30; }
.teinte-verdict { font: 900 18px system-ui; }
.teinte-reglages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 10px; color: #f2f6ff; }
.teinte-groupe { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.teinte-titre { font-weight: 800; font-size: .9rem; min-width: 110px; text-align: right; }
.teinte-choix { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.teinte-choix button, .teinte-masse button { min-height: 42px; padding: 0 12px; border: 2px solid #6fb3e0; border-radius: 10px; background: #2a3e52; color: #fff; font-weight: 800; cursor: pointer; }
.teinte-choix button[aria-pressed="true"] { background: #6fb3e0; color: #10202e; }
.teinte-choix button:disabled, .teinte-masse button:disabled { opacity: .45; cursor: default; }
.teinte-choix button:focus-visible, .teinte-masse button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.teinte-masse { display: flex; align-items: center; gap: 10px; }
.teinte-masse strong { min-width: 56px; text-align: center; font-size: 1.3rem; }
.teinte-commandes { display: flex; justify-content: space-between; margin-top: 10px; }
.teinte-partie .atelier-message { margin: 10px 0 4px; }
.teinte-carnet { color: #d6e0f5; font-size: .8rem; }
.teinte-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) { .teinte-titre { flex-basis: 100%; text-align: center; } .teinte-legende { font-size: 18px; } .teinte-choix { gap: 4px; flex-wrap: nowrap; } .teinte-choix button { padding: 0 6px; font-size: .82rem; } .teinte-fiche { font-size: .82rem; } }

/* Chantier des paraboles (1re) : a, α et β de la forme canonique ; arches (a < 0) et câbles (a > 0). */
.mission-maths--parabole .mission-maths-fenetre { background: #1f2a33; border-color: #d2b48c; }
.chantier-partie { max-width: 620px; margin: auto; }
.chantier-jeu { position: relative; border: 2px solid #d2b48c; border-radius: 20px; overflow: hidden; background: #eaf2f8; }
.chantier-erreur { border-color: #e2553d; }
.chantier-gagne { border-color: #6fcf7d; }
.chantier-fiche { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: #fffdf6; color: #2c3640; font-size: .9rem; border-bottom: 1px solid #d9cdb8; }
.chantier-fiche small { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: #7a6a52; }
.chantier-vue { display: block; width: min(100%, 66vh); height: auto; margin: auto; }
.chantier-graduation { font: 700 12px system-ui; fill: #2c3640; paint-order: stroke; stroke: #eaf2f8; stroke-width: 3; }
.chantier-note { font: 800 13px system-ui; fill: #c0392b; }
.chantier-ecart { font: 900 15px system-ui; fill: #c0392b; paint-order: stroke; stroke: #eaf2f8; stroke-width: 4; }
.chantier-ok { font: 900 20px system-ui; fill: #2f9e5b; }
.chantier-axe { font: 800 13px system-ui; fill: #6a4fb5; }
.chantier-formule { margin: 10px 0 4px; text-align: center; color: #ffe9c2; font: 800 1.35rem 'Cambria Math', Georgia, serif; }
.chantier-reglages { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; color: #f2f6ff; }
.chantier-valeur { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 14px; background: #2b3540; }
.chantier-valeur b { font-family: 'Cambria Math', Georgia, serif; font-size: 1.15rem; color: #ffe9c2; }
.chantier-valeur strong { min-width: 30px; text-align: center; font-size: 1.2rem; }
.chantier-valeur button { width: 40px; height: 40px; border: 2px solid #d2b48c; border-radius: 10px; background: #3d4b58; color: #fff; font-size: 1.2rem; font-weight: 900; cursor: pointer; }
.chantier-valeur button:disabled { opacity: .4; cursor: default; }
.chantier-valeur button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.chantier-commandes { display: flex; justify-content: space-between; margin-top: 10px; }
.chantier-partie .atelier-message { margin: 10px 0 4px; }
.chantier-carnet { color: #d6e0f5; font-size: .8rem; }
.chantier-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) { .chantier-graduation { font-size: 15px; } .chantier-note, .chantier-axe { font-size: 16px; } .chantier-ecart { font-size: 18px; } .chantier-fiche { font-size: .82rem; } .chantier-valeur { padding: 4px 5px; gap: 3px; } .chantier-valeur button { width: 34px; } }

/* Phare des collines (1re) : rayon tangent, nombre dérivé, équation de tangente, loupe des sécantes. */
.mission-maths--tangente .mission-maths-fenetre { background: #161d33; border-color: #ffd76a; }
.phare-partie { max-width: 620px; margin: auto; }
.phare-jeu { position: relative; border: 2px solid #ffd76a; border-radius: 20px; overflow: hidden; background: #1b2a4e; }
.phare-erreur { border-color: #e2553d; }
.phare-gagne { border-color: #6fcf7d; }
.phare-fiche { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: #10172b; color: #e6ecf7; font-size: .9rem; border-bottom: 1px solid #2c3a5c; }
.phare-fiche small { font: 800 1rem 'Cambria Math', Georgia, serif; color: #ffd76a; }
.phare-vue { display: block; width: min(100%, 64vh); height: auto; margin: auto; }
.phare-graduation { font: 700 12px system-ui; fill: #c9d6e8; }
.phare-point { font: 800 13px system-ui; fill: #fff; paint-order: stroke; stroke: #10172b; stroke-width: 4; }
.phare-note, .phare-secante { font: 800 13px system-ui; fill: #ffe9a8; paint-order: stroke; stroke: #10172b; stroke-width: 4; }
.phare-secante { fill: #c9a7ff; }
.phare-formule { margin: 10px 0 4px; text-align: center; color: #ffe9a8; font: 800 1.25rem 'Cambria Math', Georgia, serif; }
.phare-reglages { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; color: #f2f6ff; }
.phare-valeur { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 14px; background: #24304d; }
.phare-valeur b { font-family: 'Cambria Math', Georgia, serif; font-size: 1.1rem; color: #ffe9a8; }
.phare-valeur strong { min-width: 30px; text-align: center; font-size: 1.2rem; }
.phare-valeur button, .phare-loupe button { min-width: 40px; height: 40px; border: 2px solid #ffd76a; border-radius: 10px; background: #34405f; color: #fff; font-size: 1.1rem; font-weight: 900; cursor: pointer; }
.phare-loupe { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; color: #d6c2ff; font-size: .85rem; font-weight: 700; }
.phare-loupe button { border-color: #c9a7ff; font-size: .95rem; padding: 0 8px; }
.phare-loupe button[aria-pressed="true"] { background: #c9a7ff; color: #1b1433; }
.phare-valeur button:disabled, .phare-loupe button:disabled { opacity: .4; cursor: default; }
.phare-valeur button:focus-visible, .phare-loupe button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.phare-commandes { display: flex; justify-content: space-between; margin-top: 10px; }
.phare-partie .atelier-message { margin: 10px 0 4px; }
.phare-carnet { color: #d6e0f5; font-size: .8rem; }
.phare-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) { .phare-graduation { font-size: 15px; } .phare-point, .phare-note, .phare-secante { font-size: 16px; } .phare-fiche { font-size: .82rem; } .phare-loupe span { flex-basis: 100%; text-align: center; } }

/* Bassin à houle (1re) : phase, opposition, période, fréquence et retard ; chronogrammes après le lancement. */
.mission-maths--onde .mission-maths-fenetre { background: #14283a; border-color: #5fb0e8; }
.houle-partie { max-width: 640px; margin: auto; }
.houle-jeu { position: relative; border: 2px solid #5fb0e8; border-radius: 20px; overflow: hidden; background: #eef5f9; }
.houle-erreur { border-color: #e2553d; }
.houle-gagne { border-color: #6fcf7d; }
.houle-fiche { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; background: #fffdf6; color: #2c3640; font-size: .9rem; border-bottom: 1px solid #c9d6e0; }
.houle-fiche small { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: #3d6d8f; }
.houle-encart { width: min(100%, 300px); height: auto; }
.houle-vue { display: block; width: min(100%, 80vh); height: auto; margin: auto; }
.houle-regle { font: 700 11px system-ui; fill: #2c3e50; }
.houle-nom { font: 900 14px system-ui; fill: #2c3e50; }
.houle-axe { font: 700 11px system-ui; fill: #5c6f82; }
.houle-alerte { font: 800 12px system-ui; fill: #c0392b; }
.houle-attente { font: 700 13px system-ui; fill: #7a8b99; }
.houle-reglages { display: flex; justify-content: center; margin-top: 10px; color: #f2f6ff; }
.houle-valeur { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 14px; background: #203a50; flex-wrap: wrap; justify-content: center; }
.houle-valeur b { font-size: 1.05rem; color: #bfe3ff; }
.houle-valeur strong { min-width: 62px; text-align: center; font-size: 1.2rem; }
.houle-valeur button { min-width: 44px; height: 40px; padding: 0 8px; border: 2px solid #5fb0e8; border-radius: 10px; background: #2c4c66; color: #fff; font-weight: 900; cursor: pointer; }
.houle-valeur button:disabled { opacity: .4; cursor: default; }
.houle-valeur button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.houle-commandes { display: flex; justify-content: space-between; margin-top: 10px; }
.houle-partie .atelier-message { margin: 10px 0 4px; }
.houle-carnet { color: #d6e0f5; font-size: .8rem; }
.houle-carnet summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) { .houle-regle, .houle-axe { font-size: 14px; } .houle-nom { font-size: 17px; } .houle-attente { font-size: 16px; } .houle-fiche { font-size: .82rem; } .houle-valeur button { min-width: 40px; padding: 0 5px; font-size: .85rem; } }
.houle-batteur { font: 800 11px system-ui; fill: #fff; }

/* Convoyeur : le temps et les aires pilotent le même colis. */
.mission-maths--integrale .mission-maths-fenetre { background:#263f3c; color:#f3e9cd; }
.convoyeur-partie { position:relative; max-width:660px; margin:auto; }
.convoyeur-ordre { background:#f0e2bd; color:#294b43; border-radius:12px; padding:9px 12px; margin:8px 0; font-size:.85rem; }
.convoyeur-ordre b,.convoyeur-ordre span { display:block; }
.convoyeur-ordre b { margin-bottom:4px; }
.convoyeur-monde { border:3px solid #a8b994; border-radius:13px; overflow:hidden; }
.convoyeur-paysage,.convoyeur-courbe,.convoyeur-butée { display:block; width:100%; height:auto; }
.convoyeur-compteurs { display:flex; flex-wrap:wrap; justify-content:space-around; gap:4px 12px; padding:7px; font-size:.76rem; background:#365d50; }
.convoyeur-livre { border-color:#e6c876; box-shadow:0 0 12px #efd39355; }
.convoyeur-courbe { margin:8px 0; }
.convoyeur-horloge>b { display:block; font-size:.85rem; margin-bottom:4px; }
.convoyeur-butée { touch-action:none; cursor:grab; }
.convoyeur-butée:focus-visible,.convoyeur-actions button:focus-visible { outline:3px solid #ffdc93; outline-offset:2px; }
.convoyeur-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:7px; }
.convoyeur-actions>div { display:flex; gap:7px; }
.convoyeur-actions button[data-convoyeur-pas] { min-width:60px; min-height:44px; border:2px solid #b1be9d; border-radius:9px; background:#e2d5ab; color:#294a42; font-size:.9rem; font-weight:bold; cursor:pointer; }
.convoyeur-actions button:disabled { opacity:.45; cursor:default; }
.convoyeur-message { color:#ffe2a0; font-size:.85rem; margin:9px 0; min-height:25px; }
.convoyeur-gestes,.convoyeur-carnet { color:#d8e4d0; font-size:.75rem; }
.convoyeur-carnet summary { cursor:pointer; font-weight:bold; }
.convoyeur-intro { position:absolute; inset:37px 0 0; border-radius:14px; background:#203b36f5; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:25px; gap:15px; text-align:center; }
.convoyeur-intro b { font-size:1.3rem; color:#ffe0a1; }
.convoyeur-intro p { max-width:420px; }
@media(max-width:600px) {
 .mission-maths--integrale .mission-maths-fenetre { padding:.6rem; }
 .mission-maths--integrale .mission-maths-entete h2 { font-size:1.1rem; }
 .mission-maths--integrale .mission-maths-entete p { font-size:.58rem; }
 .mission-maths--integrale .mission-maths-outils .btn { padding:.3rem .45rem; font-size:.75rem; }
 .convoyeur-ordre { font-size:.77rem; padding:8px; }
 .convoyeur-compteurs { font-size:.7rem; }
 .convoyeur-actions .atelier-action { font-size:.82rem; padding:10px; }
 .convoyeur-actions button[data-convoyeur-pas] { min-width:52px; }
 .convoyeur-message { font-size:.8rem; }
}
.convoyeur-partie { max-width:860px; }
.convoyeur-vues { display:grid; grid-template-columns:1.1fr 1fr; gap:10px; align-items:center; }
.convoyeur-horloge { max-width:660px; margin:9px auto 0; }
.convoyeur-compteurs { font-size:.72rem; }
@media(max-width:600px) { .convoyeur-vues { grid-template-columns:1fr; gap:0; } }

/* Studio : la charge est séparée du flash et des mesures qui le précèdent. */
.mission-maths--condensateur .mission-maths-fenetre { background:#283b4b; color:#f5e9ce; }
.studio-partie { max-width:820px; margin:auto; position:relative; }
.studio-ordre { background:#eee0bd; color:#31444b; padding:10px 13px; border-radius:12px; margin:8px 0; font-size:.9rem; }
.studio-ordre b,.studio-ordre span { display:block; }
.studio-ordre span { margin-top:3px; font-size:.82rem; }
.studio-scene { display:grid; grid-template-columns:1.25fr 1fr; gap:12px; align-items:center; }
.studio-photo { position:relative; aspect-ratio:1.65; border:5px solid #e4d6b5; border-radius:8px; overflow:hidden; background:#081321; }
.studio-cliche { position:absolute; inset:0; background:#bdd7c9; }
.studio-paysage { position:absolute; inset:0; background:radial-gradient(circle at 18% 18%,#fff1c0 0 6%,transparent 6.4%),linear-gradient(150deg,transparent 42%,#6f9a8a 42% 65%,#476b61 65%); }
.studio-cliche img { position:absolute; width:46%; height:85%; object-fit:contain; bottom:4%; left:27%; }
.studio-surexposition,.studio-eclair { position:absolute; inset:0; background:white; pointer-events:none; }
.studio-eclair { opacity:0; }
.studio-viseur { position:absolute; inset:12px; border:1px dashed #f1e3ba88; pointer-events:none; }
.studio-photo-etat { position:absolute; inset:auto 0 0; text-align:center; padding:5px; background:#162a3ae0; font-size:.78rem; color:#ffe3aa; }
.studio-circuit { background:#203544; border:1px solid #748b91; border-radius:12px; }
.studio-circuit svg { display:block; width:100%; max-height:230px; }
.studio-charges,.studio-reserve,.studio-lampe { opacity:0; }
.studio-tir .studio-source { opacity:0; }
.studio-tir .studio-lampe { opacity:1; }
.studio-gagne .studio-photo { border-color:#f3cf77; box-shadow:0 0 14px #d9ad6d66; }
.studio-commandes { display:flex; align-items:center; justify-content:space-around; gap:16px; margin:10px 0 5px; }
.studio-molette-boite { width:260px; max-width:52%; }
.studio-molette-boite>b { display:block; text-align:center; font-size:.95rem; }
.studio-molette { display:block; width:100%; height:auto; touch-action:none; cursor:grab; }
.studio-actions { display:flex; flex-direction:column; gap:12px; align-items:center; }
.studio-actions>div { display:flex; gap:8px; }
.studio-actions [data-studio-pas] { min-width:62px; min-height:44px; border:2px solid #c0b78b; border-radius:9px; background:#e2d3a7; color:#304b4b; font-weight:bold; cursor:pointer; }
.studio-actions button:disabled { opacity:.45; cursor:default; }
.studio-molette:focus-visible,.studio-actions button:focus-visible { outline:3px solid #ffdb8c; outline-offset:2px; }
.studio-mesures { display:flex; flex-wrap:wrap; gap:5px 14px; padding:9px; border-radius:9px; background:#1d3140; color:#e8ddbd; font-size:.78rem; min-height:35px; }
.studio-mesures b { width:100%; }
.studio-message { font-size:.85rem; color:#ffdfa2; margin:9px 0; min-height:25px; }
.studio-gestes,.studio-carnet { font-size:.75rem; color:#d0dfdc; }
.studio-carnet summary { cursor:pointer; font-weight:bold; }
.studio-album { display:flex; justify-content:center; gap:8px; }
.studio-album img { width:15%; max-width:90px; border:3px solid #dccb9a; background:#37554e; border-radius:6px; }
.studio-intro { position:absolute; inset:37px 0 0; border-radius:14px; background:#203445f5; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:15px; padding:25px; }
.studio-intro b { color:#ffe0a1; font-size:1.3rem; }
.studio-intro p { max-width:420px; }
.studio-en-cours .studio-cliche { animation:studio-photo 2.4s both; }
.studio-en-cours .studio-eclair { animation:studio-eclair 2.4s both; }
.studio-en-cours .studio-charges { animation:studio-charge 2.4s both; }
.studio-en-cours .studio-reserve { animation:studio-charge 2.4s both; }
.studio-en-cours .studio-source { animation:studio-source 2.4s both; }
.studio-en-cours .studio-lampe { animation:studio-lampe 2.4s both; }
@keyframes studio-photo { 0%,62% { opacity:0; } 68%,100% { opacity:1; } }
@keyframes studio-eclair { 0%,59%,85%,100% { opacity:0; } 64% { opacity:var(--studio-flash); } }
@keyframes studio-charge { 0%,85%,100% { opacity:0; } 35%,58% { opacity:var(--studio-charge); } }
@keyframes studio-source { 0%,59% { opacity:1; } 61%,100% { opacity:0; } }
@keyframes studio-lampe { 0%,59% { opacity:0; } 61%,100% { opacity:1; } }
@media(max-width:600px) {
 .mission-maths--condensateur .mission-maths-fenetre { padding:.6rem; }
 .mission-maths--condensateur .mission-maths-entete h2 { font-size:1.1rem; }
 .mission-maths--condensateur .mission-maths-entete p { font-size:.56rem; }
 .mission-maths--condensateur .mission-maths-outils .btn { font-size:.75rem; padding:.3rem .45rem; }
 .studio-ordre { font-size:.8rem; padding:9px; }
 .studio-ordre span { font-size:.75rem; }
 .studio-scene { gap:7px; grid-template-columns:1fr 1fr; }
 .studio-photo { aspect-ratio:1; border-width:3px; }
 .studio-photo-etat { font-size:.64rem; }
 .studio-commandes { gap:8px; }
 .studio-actions .atelier-action { font-size:.78rem; padding:10px; max-width:175px; }
 .studio-actions [data-studio-pas] { min-width:52px; }
 .studio-molette-boite>b { font-size:.85rem; }
 .studio-mesures { font-size:.75rem; }
 .studio-message { font-size:.8rem; }
}
@media(prefers-reduced-motion:reduce) { .studio-en-cours * { animation:none!important; } .studio-en-cours .studio-eclair { opacity:0; } }
@media(min-width:601px) {
 .studio-photo { aspect-ratio:2.25; }
 .studio-circuit svg { max-height:190px; }
 .studio-molette-boite { width:220px; }
}

/* Bal : des billes réelles dans le sac, des tirages avec remise, une validation exacte. */
.mission-maths--probabilites .mission-maths-fenetre { background:#253d45; color:#f3e9ca; }
.bal-partie { max-width:800px; margin:auto; position:relative; }
.bal-ordre { background:#eee0bc; color:#304c45; border-radius:12px; padding:10px 12px; margin:8px 0; }
.bal-ordre b,.bal-ordre span { display:block; }
.bal-ordre b { font-size:.95rem; }
.bal-ordre span { font-size:.82rem; margin-top:4px; }
.bal-monde { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px; border:3px solid #8da68a; border-radius:14px; background:radial-gradient(circle at 85% 20%,#cfd6a4 0 5px,transparent 6px),linear-gradient(#233c50,#40675b); }
.bal-sac { min-height:180px; background:#cdb88a; border:5px solid #88744f; border-top:9px solid #a08d63; border-radius:12px 12px 45px 45px; padding:10px; color:#354c42; }
.bal-sac>b,.bal-sac>span { display:block; text-align:center; }
.bal-sac>span { font-size:.78rem; margin:3px 0 8px; }
.bal-billes { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; justify-items:center; }
.bal-bille { display:inline-flex; justify-content:center; align-items:center; border-radius:50%; width:36px; height:36px; border:2px solid #f1e0b7; font-weight:bold; font-size:.75rem; color:white; }
.bal-bille.bal-rouge { background:#b65045; cursor:pointer; }
.bal-bille.bal-bleue { background:#326e9c; }
.bal-cible { border-color:#ffdd87; box-shadow:0 0 14px #ffe09588; }
.bal-jardin { position:relative; padding-top:20px; text-align:center; min-height:210px; }
.bal-corde { position:absolute; top:22px; left:5%; width:90%; height:7px; background:#cab995; border-radius:50%; }
.bal-lanternes { display:flex; gap:22px; justify-content:center; margin-top:5px; }
.bal-lanterne { border:5px solid #b3996e; border-radius:28%; width:72px; height:83px; background:#536b66; position:relative; display:grid; place-items:center; color:white; font-weight:bold; }
.bal-lanterne:after { content:''; position:absolute; width:5px; height:17px; background:#c3a16c; top:100%; left:50%; }
.bal-lanterne.bal-rouge { background:#ba5b48; box-shadow:0 0 20px #e3915e88; }
.bal-lanterne.bal-bleue { background:#3b80ac; box-shadow:0 0 20px #8fc8e388; }
.bal-jardin p { font-size:.75rem; color:#eee0b9; margin:24px 0 0; }
.bal-jardin img { width:58px; height:58px; object-fit:contain; margin-top:3px; }
.bal-enregistre { border-color:#f1cf7f; }
.bal-inventaire,.bal-reserve { display:flex; gap:8px; align-items:center; }
.bal-inventaire { justify-content:space-between; margin-top:10px; }
.bal-reserve button,.bal-observer { min-width:56px; min-height:44px; border:2px solid #b9ad85; border-radius:10px; background:#ded2ab; color:#344b48; font-weight:bold; cursor:pointer; }
.bal-reserve button { touch-action:none; }
.bal-reserve button:disabled { opacity:.45; cursor:default; }
.bal-bille:focus-visible,.bal-reserve button:focus-visible { outline:3px solid #ffe3a0; outline-offset:2px; }
.bal-exemple { font-size:.8rem; color:#d1e4d9; margin:10px 0 5px; }
.bal-message { font-size:.85rem; color:#ffe0a1; margin:7px 0; }
.bal-carnet,.bal-gestes { font-size:.75rem; color:#d4e4da; }
.bal-carnet summary { cursor:pointer; font-weight:bold; }
.bal-serie { display:grid; grid-template-columns:repeat(20,1fr); gap:3px; max-width:400px; }
.bal-serie span { aspect-ratio:1; background:#365260; border:1px solid #7f9e9d; }
.bal-serie .bal-oui { background:#e3be6c; }
.bal-intro { position:absolute; inset:37px 0 0; background:#203b44f5; border-radius:13px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:15px; padding:25px; text-align:center; }
.bal-intro b { color:#ffe1a1; font-size:1.3rem; }
.bal-intro p { max-width:430px; }
.bal-fantome { position:fixed; z-index:99999; pointer-events:none; padding:12px; border-radius:12px; background:#eed7a6; color:#314d42; border:3px solid #c3a36d; }
.bal-en-cours .bal-numero-1 { animation:bal-premiere 2.4s both; }
.bal-en-cours .bal-numero-2 { animation:bal-seconde 2.4s both; }
@keyframes bal-premiere { 0%,20% { opacity:.1; transform:translateY(-10px); } 35%,100% { opacity:1; transform:translateY(0); } }
@keyframes bal-seconde { 0%,60% { opacity:.1; transform:translateY(-10px); } 80%,100% { opacity:1; transform:translateY(0); } }
@media(max-width:600px) {
 .mission-maths--probabilites .mission-maths-fenetre { padding:.6rem; }
 .mission-maths--probabilites .mission-maths-entete h2 { font-size:1.1rem; }
 .mission-maths--probabilites .mission-maths-entete p { font-size:.55rem; }
 .mission-maths--probabilites .mission-maths-outils .btn { font-size:.75rem; padding:.3rem .45rem; }
 .bal-ordre { padding:9px; }
 .bal-ordre b { font-size:.82rem; }
 .bal-ordre span { font-size:.75rem; }
 .bal-monde { padding:7px; gap:7px; grid-template-columns:1.1fr 1fr; }
 .bal-sac { padding:7px 4px; border-width:3px; min-width:0; }
 .bal-sac>b { font-size:.8rem; }
 .bal-sac>span { font-size:.65rem; }
 .bal-billes { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
 .bal-bille { width:30px; height:30px; font-size:.62rem; }
 .bal-lanternes { gap:9px; }
 .bal-lanterne { width:48px; height:64px; border-width:3px; font-size:.85rem; }
 .bal-jardin { min-height:190px; }
 .bal-jardin p { font-size:.68rem; }
 .bal-inventaire { flex-wrap:wrap; }
 .bal-inventaire .atelier-action { font-size:.8rem; padding:10px; }
 .bal-reserve button { min-width:47px; }
 .bal-exemple,.bal-message { font-size:.78rem; }
}
@media(prefers-reduced-motion:reduce) { .bal-en-cours .bal-lanterne { animation:none!important; } }

/* Portails : angles orientés sur un cercle unité exact. */
.mission-maths--cercleTrigo .mission-maths-fenetre { background:#293f4b; color:#f3e8cc; }
.orbite-partie { max-width:790px; margin:auto; position:relative; }
.orbite-ordre { background:#ede0bc; color:#344e47; border-radius:12px; padding:9px 12px; margin:8px 0; }
.orbite-ordre b,.orbite-ordre span,.orbite-ordre small { display:block; }
.orbite-ordre b { font-size:.85rem; }
.orbite-ordre span { font-weight:bold; font-size:1rem; margin:4px 0; }
.orbite-ordre small { font-size:.72rem; }
.orbite-jeu { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:18px; }
.orbite-carte { max-width:350px; margin:auto; width:100%; }
.orbite-cercle { width:100%; display:block; height:auto; border:3px solid #839d96; border-radius:17px; touch-action:none; cursor:grab; }
.orbite-ouverte .orbite-cercle { border-color:#ebca7a; box-shadow:0 0 12px #e8c87d55; }
.orbite-erreur .orbite-cercle { border-color:#d77c63; }
.orbite-coordonnees { text-align:center; font-size:.8rem; min-height:37px; color:#e3e5cb; margin:7px 0 0; }
.orbite-console { display:grid; grid-template-columns:1fr 1fr; gap:9px; align-items:center; }
.orbite-console>b,.orbite-console>p,.orbite-arcs { grid-column:1/-1; }
.orbite-console>b { font-size:.97rem; }
.orbite-console>p { font-size:.75rem; color:#cedfd4; margin:0; }
.orbite-arcs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.orbite-arcs button,.orbite-zero { min-height:44px; border:2px solid #b8b68d; border-radius:9px; background:#ddd2ac; color:#354f49; font-weight:bold; cursor:pointer; font-size:1rem; }
.orbite-zero { font-size:.8rem; }
.orbite-arcs button:disabled,.orbite-zero:disabled { opacity:.45; cursor:default; }
.orbite-console .atelier-action { font-size:.85rem; padding:10px; }
.orbite-sens br { display:none; }
.orbite-console .orbite-sens { font-size:.8rem; word-spacing:5px; }
.orbite-cercle:focus-visible,.orbite-arcs button:focus-visible { outline:3px solid #ffdf99; outline-offset:2px; }
.orbite-message { color:#ffdfa3; font-size:.84rem; margin:8px 0; }
.orbite-gestes,.orbite-carnet { color:#d1e0d9; font-size:.74rem; }
.orbite-carnet summary { cursor:pointer; font-weight:bold; }
.orbite-intro { position:absolute; inset:37px 0 0; border-radius:14px; background:#203a48f5; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:25px; gap:15px; }
.orbite-intro b { color:#ffe0a1; font-size:1.3rem; }
.orbite-intro p { max-width:420px; }
@media(max-width:600px) {
 .mission-maths--cercleTrigo .mission-maths-fenetre { padding:.6rem; }
 .mission-maths--cercleTrigo .mission-maths-entete h2 { font-size:1.1rem; }
 .mission-maths--cercleTrigo .mission-maths-entete p { font-size:.55rem; }
 .mission-maths--cercleTrigo .mission-maths-outils .btn { font-size:.75rem; padding:.3rem .45rem; }
 .orbite-ordre { padding:8px; }
 .orbite-ordre b { font-size:.74rem; }
 .orbite-ordre span { font-size:.88rem; }
 .orbite-ordre small { font-size:.65rem; }
 .orbite-jeu { grid-template-columns:1fr; gap:5px; }
 .orbite-carte { max-width:270px; }
 .orbite-coordonnees { min-height:20px; font-size:.75rem; margin-top:5px; }
 .orbite-console { gap:6px; }
 .orbite-console>b { font-size:.85rem; }
 .orbite-arcs { grid-template-columns:repeat(4,1fr); gap:6px; }
 .orbite-console .orbite-sens { font-size:.7rem; }
 .orbite-message { font-size:.78rem; }
 .orbite-gestes,.orbite-carnet { font-size:.7rem; }
}

/* Livraisons : le frein transforme l'énergie du chariot en chaleur. */
.mission-maths--cinematique .mission-maths-fenetre { background:#293f45; color:#f3e8cd; }
.rail-partie { max-width:800px; margin:auto; position:relative; }
.rail-commande { background:#e7d8af; color:#344e46; border-radius:12px; padding:9px 12px; margin:8px 0; }
.rail-commande b,.rail-commande span,.rail-commande small { display:block; }
.rail-commande b { font-size:.82rem; }
.rail-commande span { font-size:.98rem; font-weight:bold; margin:4px 0; }
.rail-commande small { font-size:.72rem; }
.rail-scene>svg { width:100%; height:auto; max-height:190px; display:block; }
.rail-scene { border:2px solid #769b86; border-radius:17px; overflow:hidden; }
.rail-scene.rail-erreur { border-color:#d9896a; }
.rail-scene.rail-livre { border-color:#edca76; box-shadow:0 0 10px #ebc87d44; }
.rail-telemetrie { display:grid; gap:4px; padding:7px 12px; font-size:.77rem; line-height:1.35; background:#263e40; color:#dee4cb; }
.rail-telemetrie b { color:#f7d399; }
.rail-energie { display:flex; height:7px; border-radius:5px; overflow:hidden; background:#4d6260; }
.rail-energie i { display:block; height:100%; }
.rail-ec { background:#95c29a; }.rail-chaleur { background:#e3a45d; }
.rail-commandes { display:grid; grid-template-columns:1.2fr 1fr; gap:15px; align-items:center; margin:5px 0 0; }
.rail-levier-boite { max-width:240px; width:100%; margin:auto; text-align:center; }
.rail-levier-boite b { font-size:.85rem; display:block; line-height:1.35; }
.rail-levier { width:100%; height:auto; display:block; touch-action:none; cursor:grab; }
.rail-levier:focus-visible { outline:3px solid #fbd28a; outline-offset:1px; border-radius:9px; }
.rail-actions { display:grid; gap:8px; }
.rail-actions>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rail-actions button { min-height:44px; border:2px solid #b6b48d; border-radius:9px; background:#ded1a9; color:#344f48; font-size:.9rem; font-weight:bold; cursor:pointer; }
.rail-actions button:disabled { opacity:.45; cursor:default; }
.rail-actions .atelier-action { background:#ebbd63; font-size:.9rem; padding:9px; }
.rail-message { font-size:.84rem; color:#ffdc9e; margin:7px 0; }
.rail-gestes,.rail-carnet { font-size:.73rem; color:#d5e3d7; }
.rail-carnet summary { cursor:pointer; font-weight:bold; }
.rail-intro { position:absolute; inset:37px 0 0; background:#243e45f5; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; gap:16px; text-align:center; }
.rail-intro b { font-size:1.3rem; color:#ffdc9e; }.rail-intro p { max-width:450px; }
@media(max-width:600px) {
 .mission-maths--cinematique .mission-maths-fenetre { padding:.6rem; }
 .mission-maths--cinematique .mission-maths-entete h2 { font-size:1.1rem; }
 .mission-maths--cinematique .mission-maths-entete p { font-size:.55rem; }
 .mission-maths--cinematique .mission-maths-outils .btn { font-size:.75rem; padding:.3rem .45rem; }
 .rail-commande { padding:8px; }.rail-commande span { font-size:.88rem; }.rail-commande small { font-size:.67rem; }
 .rail-telemetrie { font-size:.74rem; padding:7px; gap:5px; }
 .rail-commandes { grid-template-columns:1fr; gap:5px; margin-top:8px; }
 .rail-levier-boite { max-width:300px; }
 .rail-actions { grid-template-columns:1fr 1fr; gap:8px; align-items:center; }
 .rail-actions>div { gap:6px; }.rail-actions button { font-size:.8rem; }
 .rail-actions .atelier-action { min-height:48px; font-size:.8rem; }
 .rail-message { font-size:.78rem; }.rail-gestes,.rail-carnet { font-size:.7rem; }
}

/* Ascenseur : une suite donne des arrêts discrets dans une tour à étages. */
.mission-maths--suites .mission-maths-fenetre { background:#293f4c; color:#f1e6ca; scrollbar-gutter:stable; }
.asc-partie { position:relative; max-width:800px; margin:auto; }
.asc-ordre { margin:8px 0; padding:9px 12px; background:#e8dcb6; color:#344f49; border-radius:12px; }
.asc-ordre>b { font-size:.88rem; }.asc-ordre>div { display:flex; gap:8px; margin:5px 0; flex-wrap:wrap; }
.asc-ordre>div span { font-size:.83rem; background:#f3e9cc; padding:4px 7px; border-radius:7px; border:2px solid transparent; }
.asc-ordre>div .embarquee { border-color:#659b73; background:#d1e0b9; }
.asc-ordre small { font-size:.71rem; }
.asc-jeu { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:center; }
.asc-tour { position:relative; border:2px solid #82a295; border-radius:17px; overflow:hidden; }
.asc-immeuble { display:block; width:100%; height:auto; touch-action:none; }
.asc-depart { cursor:grab; }.asc-depart:focus-visible>path { stroke:#fff2b6; stroke-width:6px; }
.asc-reussie { border-color:#ebc875; box-shadow:0 0 10px #eac97644; }.asc-erreur { border-color:#d58b70; }
.asc-hors-champ { padding:0 5px; font-size:.66rem; color:#ffe0a0; pointer-events:none; }
.asc-hors-champ span { display:block; background:#294b5de8; border-radius:5px; padding:2px 4px; }
.asc-commandes { display:grid; gap:8px; }
.asc-reglage>b { font-size:.88rem; }.asc-reglage>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.asc-reglage button { min-height:44px; border:2px solid #b7b28e; border-radius:9px; background:#ded2ae; color:#344f49; font-weight:bold; font-size:1rem; cursor:pointer; }
.asc-reglage button:disabled { opacity:.45; cursor:default; }
.asc-direction { font-size:.77rem; color:#d2e3d6; margin:0; }
.asc-commandes .atelier-action { padding:9px; font-size:.86rem; }
.asc-position { font-size:.85rem; font-weight:bold; margin:8px 0; color:#f7d48e; }
.asc-historique { display:flex; gap:7px; min-height:44px; align-items:center; }
.asc-historique>span { display:grid; text-align:center; background:#3c565b; border-radius:7px; padding:3px 11px; min-width:48px; border:2px solid transparent; }
.asc-historique small { font-size:.7rem; }.asc-historique b { font-size:.85rem; }
.asc-historique .asc-bon { border-color:#94bd8b; }.asc-historique .asc-faux { border-color:#d88b70; }
.asc-message { font-size:.83rem; color:#ffdfa2; margin:8px 0; }
.asc-gestes,.asc-carnet { font-size:.73rem; color:#d3e1d8; }.asc-carnet summary { cursor:pointer; font-weight:bold; }
.asc-intro { position:absolute; inset:37px 0 0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:25px; gap:15px; background:#243e4af5; border-radius:14px; text-align:center; }
.asc-intro b { color:#ffe0a1; font-size:1.3rem; }.asc-intro p { max-width:430px; }
@media(max-width:600px) {
 .mission-maths--suites .mission-maths-fenetre { padding:.6rem; }
 .mission-maths--suites .mission-maths-entete h2 { font-size:1.1rem; }
 .mission-maths--suites .mission-maths-entete p { font-size:.55rem; }
 .mission-maths--suites .mission-maths-outils .btn { font-size:.75rem; padding:.3rem .45rem; }
 .asc-ordre { padding:8px; }.asc-ordre>b { font-size:.78rem; }.asc-ordre>div { gap:5px; }.asc-ordre>div span { font-size:.72rem; padding:3px; }.asc-ordre small { font-size:.64rem; }
 .asc-jeu { grid-template-columns:1fr; gap:7px; }.asc-tour { max-width:400px; width:100%; margin:auto; }
 .asc-commandes { grid-template-columns:1fr 1fr; gap:6px 10px; }
 .asc-reglage>b { font-size:.76rem; }.asc-reglage>div { gap:6px; }.asc-direction,.asc-commandes>.atelier-action,.asc-commandes>span { grid-column:1/-1; }
 .asc-direction { font-size:.71rem; }.asc-commandes .atelier-action { min-height:48px; font-size:.83rem; }
 .asc-position { font-size:.78rem; margin:6px 0; }.asc-historique { gap:5px; min-height:35px; }.asc-historique>span { padding:2px 7px; min-width:44px; }
 .asc-message { font-size:.76rem; }.asc-gestes,.asc-carnet { font-size:.68rem; }
}

/* Bac : la force horizontale ne travaille que sur la projection signée. */
.mission-maths--produitScalaire .mission-maths-fenetre { background:#29464b; color:#f0e5c8; scrollbar-gutter:stable; }
.bac-partie { max-width:800px; margin:auto; position:relative; }
.bac-ordre { background:#e8d9b0; color:#344f46; border-radius:12px; padding:9px 12px; margin:8px 0; }
.bac-ordre>b,.bac-ordre>span,.bac-ordre>small { display:block; }
.bac-ordre>b { font-size:.92rem; }.bac-ordre>span { font-size:.86rem; margin:4px 0; font-weight:bold; }.bac-ordre>small { font-size:.7rem; }
.bac-scene { border:2px solid #7fa591; border-radius:17px; overflow:hidden; max-width:650px; margin:auto; }
.bac-carte { width:100%; height:auto; display:block; touch-action:none; }
.bac-reussite { border-color:#edcf81; box-shadow:0 0 12px #eac67355; }.bac-erreur { border-color:#d68c70; }
.bac-bouee { cursor:grab; }.bac-bouee:focus-visible>circle { stroke:#fff4bc; stroke-width:7px; }
.bac-console { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:8px 0; }
.bac-console b { font-size:.86rem; }.bac-console>div>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:5px; }
.bac-console button { min-height:44px; border:2px solid #b8b38b; border-radius:9px; background:#dfd1a7; color:#344f47; font-weight:bold; font-size:.83rem; cursor:pointer; }
.bac-console button:disabled { opacity:.45; cursor:default; }
.bac-actions { display:flex; justify-content:center; min-height:46px; align-items:center; }
.bac-actions .atelier-action { padding:9px 24px; font-size:.9rem; min-width:260px; }
.bac-lecture { font-size:.83rem; color:#f9d69b; font-weight:bold; margin:7px 0; }
.bac-calcul { font-size:.76rem; color:#d4e1d2; margin:4px 0; }
.bac-message { font-size:.82rem; color:#ffdfa0; margin:7px 0; }
.bac-gestes,.bac-carnet { font-size:.71rem; color:#d2e3d7; }.bac-carnet summary { cursor:pointer; font-weight:bold; }
.bac-intro { position:absolute; inset:37px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; gap:16px; border-radius:14px; background:#25434bf5; text-align:center; }
.bac-intro b { font-size:1.3rem; color:#ffe2a3; }.bac-intro p { max-width:440px; }
@media(max-width:600px) {
 .mission-maths--produitScalaire .mission-maths-fenetre { padding:.6rem; }
 .mission-maths--produitScalaire .mission-maths-entete h2 { font-size:1.1rem; }
 .mission-maths--produitScalaire .mission-maths-entete p { font-size:.55rem; }
 .mission-maths--produitScalaire .mission-maths-outils .btn { font-size:.75rem; padding:.3rem .45rem; }
 .bac-ordre { padding:8px; }.bac-ordre>b { font-size:.83rem; }.bac-ordre>span { font-size:.78rem; }.bac-ordre>small { font-size:.65rem; }
 .bac-console { gap:9px; margin:7px 0; }.bac-console b { font-size:.75rem; }.bac-console>div>div { gap:6px; }.bac-console button { font-size:.75rem; }
 .bac-actions .atelier-action { min-height:48px; width:100%; min-width:0; font-size:.83rem; }
 .bac-lecture { font-size:.76rem; }.bac-calcul { font-size:.71rem; }.bac-message { font-size:.75rem; }.bac-gestes,.bac-carnet { font-size:.68rem; }
}

/* Le banc de Newton : une poussée constante, deux rendez-vous chronométrés. */
.mission-maths--newton .mission-maths-fenetre { background:#253e4c; color:#eee4c8; scrollbar-gutter:stable; }
.capsule-partie { position:relative; max-width:800px; margin:auto; }
.capsule-ordre { background:#e4d4ac; color:#344c45; border-radius:12px; padding:8px 12px; margin:7px 0; }
.capsule-ordre>b,.capsule-ordre>span,.capsule-ordre>small { display:block; }
.capsule-ordre>b { font-size:.91rem; }.capsule-ordre>span { font-size:.85rem; font-weight:bold; margin:4px 0; }.capsule-ordre>small { font-size:.67rem; }
.capsule-scene { max-width:650px; margin:auto; border:2px solid #7f9d9d; border-radius:17px; overflow:hidden; background:#294655; }
.capsule-banc { width:100%; height:auto; display:block; }
.capsule-anneau { stroke:#e3c880; fill:#e3c880; }.capsule-anneau.capsule-pris { stroke:#d7ed9b; fill:#e9f9b1; }.capsule-anneau.capsule-manque { stroke:#da957b; fill:#e5a58a; }
.capsule-anneau>text { stroke:none; }
.capsule-anneau.capsule-pris ellipse { filter:drop-shadow(0 0 5px #e5f3a9); }
.capsule-reussite { border-color:#e6cb84; }.capsule-erreur { border-color:#d38e75; }
.capsule-mesures { background:#203b49; padding:6px 10px; display:grid; gap:3px; }
.capsule-lecture { font-size:.78rem; color:#f7d69b; }.capsule-bips { font-size:.75rem; }.capsule-image { font-size:.66rem; color:#c8ddd6; }
.capsule-commandes { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center; margin:8px 0; }
.capsule-levier-boite>b { display:block; font-size:.86rem; }.capsule-levier { display:block; width:100%; max-width:360px; height:auto; margin-inline:auto; touch-action:none; cursor:grab; border-radius:10px; }
.capsule-levier:focus-visible { outline:3px solid #ffd78b; outline-offset:2px; }
.capsule-actions>div { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:8px; }
.capsule-actions [data-capsule-pas] { min-height:44px; border:2px solid #c0bb99; background:#ddcfa4; color:#344d48; border-radius:9px; font-weight:bold; font-size:.78rem; cursor:pointer; }
.capsule-actions button:disabled { opacity:.45; cursor:default; }.capsule-actions .atelier-action { width:100%; min-height:48px; padding:8px; font-size:.88rem; }
.capsule-message { color:#ffdfa0; font-size:.81rem; margin:7px 0; }.capsule-gestes,.capsule-carnet { color:#cfe0d6; font-size:.69rem; }.capsule-carnet summary { font-weight:bold; cursor:pointer; }
.capsule-intro { position:absolute; inset:37px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; gap:16px; background:#253e4cf7; border-radius:14px; text-align:center; }
.capsule-intro>b { color:#ffe0a0; font-size:1.3rem; }.capsule-intro>p { max-width:440px; }
@media (max-width:600px) {
 .mission-maths--newton .mission-maths-fenetre { padding:.6rem; }
 .mission-maths--newton .mission-maths-entete h2 { font-size:1.1rem; }.mission-maths--newton .mission-maths-entete p { font-size:.55rem; }
 .mission-maths--newton .mission-maths-outils .btn { padding:.3rem .45rem; font-size:.75rem; }
 .capsule-ordre { padding:8px; }.capsule-ordre>b { font-size:.82rem; }.capsule-ordre>span { font-size:.77rem; }.capsule-ordre>small { font-size:.64rem; }
 .capsule-commandes { grid-template-columns:1fr; gap:2px; margin:6px 0; }
 .capsule-actions [data-capsule-pas] { min-height:44px; font-size:.75rem; }.capsule-actions .atelier-action { font-size:.83rem; }
 .capsule-lecture { font-size:.71rem; }.capsule-bips { font-size:.7rem; }.capsule-image { font-size:.62rem; }.capsule-message { font-size:.75rem; }
}

/* La couronne change un rapport positif ; les niveaux suivent son logarithme. */
.mission-maths--logarithme .mission-maths-fenetre { background:#304c5b; color:#eee3c5; scrollbar-gutter:stable; }
.courrier-partie { position:relative; max-width:800px; margin:auto; }
.courrier-ordre { background:#e5d2a8; color:#3e4e48; border-radius:12px; padding:8px 12px; margin:7px 0; }
.courrier-ordre>b,.courrier-ordre>span,.courrier-ordre>small { display:block; }
.courrier-ordre>b { font-size:.91rem; }.courrier-ordre>span { font-size:.84rem; font-weight:bold; margin:3px 0; }.courrier-ordre>small { font-size:.66rem; }
.courrier-scene { max-width:500px; margin:auto; border:2px solid #9eb6a7; border-radius:17px; overflow:hidden; }
.courrier-carte { display:block; width:100%; height:auto; }.courrier-reussi { border-color:#efcf85; box-shadow:0 0 12px #f2d58a44; }.courrier-erreur { border-color:#d49983; }
.courrier-portique.courrier-lu>path { stroke:#edda9b; }
.courrier-mesures { display:grid; gap:3px; padding:5px 9px; background:#294553; }.courrier-lecture { font-size:.77rem; color:#ffdda0; }.courrier-etat { font-size:.72rem; color:#dce6d2; }
.courrier-commandes { display:grid; grid-template-columns:180px 1fr; gap:18px; align-items:center; max-width:560px; margin:4px auto; }
.courrier-couronne { display:block; width:100%; max-width:140px; height:auto; margin:auto; touch-action:none; cursor:grab; border-radius:16px; }
.courrier-couronne:focus-visible { outline:3px solid #ffdc8d; outline-offset:1px; }
.courrier-actions>p { margin:0 0 6px; font-size:.84rem; }.courrier-exact { color:#ffe1a2; margin-left:4px; font-size:1rem; }.courrier-rapport { display:block; color:#dbe6d0; font-size:.8rem; }
.courrier-actions>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.courrier-actions [data-courrier-pas] { min-height:44px; border:2px solid #c7bb92; border-radius:9px; background:#dfcda3; color:#3d514b; font-size:1.05rem; font-weight:bold; cursor:pointer; }
.courrier-actions button:disabled { opacity:.45; cursor:default; }.courrier-actions .atelier-action { min-height:48px; padding:8px; width:100%; font-size:.86rem; }
.courrier-message { font-size:.8rem; color:#ffe0a5; margin:6px 0; }.courrier-gestes,.courrier-carnet { font-size:.69rem; color:#d5e4d9; }.courrier-carnet summary { cursor:pointer; font-weight:bold; }
.courrier-intro { position:absolute; inset:37px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; gap:16px; background:#294956f7; border-radius:14px; text-align:center; }
.courrier-intro>b { color:#ffe0a2; font-size:1.3rem; }.courrier-intro>p { max-width:440px; }
@media (max-width:600px) {
 .mission-maths--logarithme .mission-maths-fenetre { padding:.6rem; }
 .mission-maths--logarithme .mission-maths-entete h2 { font-size:1.1rem; }.mission-maths--logarithme .mission-maths-entete p { font-size:.55rem; }
 .mission-maths--logarithme .mission-maths-outils .btn { padding:.3rem .45rem; font-size:.75rem; }
 .courrier-ordre { padding:8px; }.courrier-ordre>b { font-size:.83rem; }.courrier-ordre>span { font-size:.77rem; }.courrier-ordre>small { font-size:.63rem; }
 .courrier-commandes { grid-template-columns:130px 1fr; gap:10px; margin:6px 0; }.courrier-couronne { max-width:130px; }
 .courrier-actions>p { font-size:.73rem; margin-bottom:3px; }.courrier-exact { font-size:.9rem; }.courrier-rapport { font-size:.72rem; }
 .courrier-actions>div { gap:6px; margin-bottom:6px; }.courrier-actions .atelier-action { font-size:.77rem; }
 .courrier-lecture { font-size:.72rem; }.courrier-etat { font-size:.68rem; }.courrier-message { font-size:.75rem; }
}

/* Le berger pose de vraies unités du contour avant d'ouvrir le portillon. */
.mission-maths--cloture .mission-maths-fenetre { background:#3b584b; color:#f0e6c5; scrollbar-gutter:stable; }
.enclos-partie { position:relative; max-width:800px; margin:auto; }
.enclos-ordre { padding:8px 12px; margin:7px 0; border-radius:12px; background:#e6d5a9; color:#365143; }
.enclos-ordre>b,.enclos-ordre>span,.enclos-ordre>small { display:block; }.enclos-ordre>b { font-size:.93rem; }.enclos-ordre>span { font-size:.84rem; font-weight:bold; margin:3px 0; }.enclos-ordre>small { font-size:.67rem; }
.enclos-scene { max-width:440px; margin:auto; border:2px solid #abc59a; border-radius:16px; overflow:hidden; background:#88af91; }.enclos-terrain { display:block; width:100%; height:auto; touch-action:none; }
.enclos-reussi { border-color:#edcf8b; box-shadow:0 0 10px #f1ce7d55; }.enclos-erreur { border-color:#d7987c; }
.enclos-barriere { stroke:#8c6546; fill:#efd4a2; }.enclos-barriere path { stroke-width:5; }.enclos-barriere circle { stroke-width:2; }
.enclos-manque { stroke:#69826b; fill:#c9d3a4; opacity:.65; }.enclos-manque path { stroke-width:3; stroke-dasharray:4 4; }.enclos-trou { stroke:#b85e49; fill:#f7b69a; opacity:1; }
.enclos-coin { cursor:grab; }.enclos-coin:focus-visible>circle { stroke:#fff5cf; stroke-width:6; }
.enclos-mesures { display:grid; gap:3px; padding:5px 9px; background:#304b40; }.enclos-lecture { color:#ffe0a1; font-size:.79rem; }.enclos-calcul { font-size:.73rem; color:#dbe8cc; }
.enclos-commandes { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:7px 0; }.enclos-commandes b { font-size:.85rem; }.enclos-commandes>div>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.enclos-commandes button { min-height:44px; border:2px solid #c5bb92; background:#e0d0a4; color:#3a5343; border-radius:9px; font-weight:bold; cursor:pointer; }.enclos-commandes button:disabled { opacity:.45; cursor:default; }
.enclos-actions { display:flex; justify-content:center; align-items:center; min-height:48px; }.enclos-actions .atelier-action { min-height:48px; min-width:270px; font-size:.87rem; padding:8px 20px; }
.enclos-message { font-size:.81rem; color:#ffe1a1; margin:7px 0; }.enclos-gestes,.enclos-carnet { font-size:.69rem; color:#d7e6cd; }.enclos-carnet summary { cursor:pointer; font-weight:bold; }
.enclos-intro { position:absolute; inset:37px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:25px; background:#365346f7; text-align:center; border-radius:14px; }.enclos-intro>b { color:#ffe2a1; font-size:1.3rem; }.enclos-intro>p { max-width:440px; }
@media (max-width:600px) {
 .mission-maths--cloture .mission-maths-fenetre { padding:.6rem; }.mission-maths--cloture .mission-maths-entete h2 { font-size:1.1rem; }.mission-maths--cloture .mission-maths-entete p { font-size:.55rem; }.mission-maths--cloture .mission-maths-outils .btn { font-size:.75rem; padding:.3rem .45rem; }
 .enclos-ordre { padding:8px; }.enclos-ordre>b { font-size:.84rem; }.enclos-ordre>span { font-size:.78rem; }.enclos-ordre>small { font-size:.65rem; }
 .enclos-commandes { gap:10px; }.enclos-commandes b { font-size:.75rem; }.enclos-commandes>div>div { gap:6px; }.enclos-commandes button { font-size:.76rem; }
 .enclos-actions .atelier-action { width:100%; min-width:0; font-size:.82rem; }.enclos-lecture { font-size:.73rem; }.enclos-calcul { font-size:.7rem; }.enclos-message { font-size:.75rem; }
}

/* Fioles CM1 : les mesures sont des objets à verser et les niveaux se conservent. */
.mission-maths--fiole .mission-maths-fenetre { background:#304d5c; color:#f4e8ca; scrollbar-gutter:stable; }
.fioles-partie { position:relative; max-width:800px; margin:auto; }
.fioles-ordre { padding:9px 12px; margin:7px 0; border-radius:12px; background:#e9d6ae; color:#344e50; }
.fioles-ordre>b,.fioles-ordre>span { display:block; }.fioles-ordre>b { font-size:.94rem; }.fioles-ordre>span { margin-top:4px; font-size:.76rem; }
.fioles-scene { max-width:490px; margin:auto; border:2px solid #9eb5a8; border-radius:16px; overflow:hidden; background:#294956; }
.fioles-terrain { display:block; width:100%; height:auto; }.fioles-reussie { border-color:#f1d596; box-shadow:0 0 15px #f4d08044; }.fioles-erreur { border-color:#d9a08b; }
.fioles-mesures { display:grid; gap:4px; padding:6px 10px; background:#213b49; }.fioles-lecture { color:#ffe3aa; font-size:.81rem; }.fioles-resultat { color:#dae5d8; font-size:.73rem; }
.fioles-commandes { display:grid; grid-template-columns:2fr 1fr; gap:12px; margin:8px auto; max-width:560px; }
.fioles-verser,.fioles-reprendre { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fioles-commandes button { min-height:48px; border:2px solid #c4bd9d; border-radius:10px; background:#536e79; color:#fff0ce; font-weight:bold; cursor:pointer; }
.fioles-commandes button:disabled { opacity:.42; cursor:default; }.fioles-commandes button:focus-visible { outline:3px solid #ffe09b; outline-offset:2px; }
.fioles-mesure { display:flex; flex-direction:column; align-items:center; padding:5px; touch-action:none; }.fioles-mesure svg { width:58px; height:49px; }.fioles-commandes b { font-size:1rem; }.fioles-commandes small { display:block; font-size:.61rem; font-weight:normal; margin:3px 0; }
.fioles-reprendre { grid-template-columns:1fr; }.fioles-reprendre button { background:#415e68; padding:3px; font-size:.83rem; }
.fioles-actions { display:flex; align-items:center; justify-content:center; min-height:48px; }.fioles-actions .atelier-action { min-height:48px; min-width:280px; font-size:.88rem; padding:8px 20px; }
.fioles-message { font-size:.81rem; color:#ffe1a8; margin:7px 0; }.fioles-gestes,.fioles-carnet { font-size:.69rem; color:#dbe6d9; }.fioles-carnet summary { cursor:pointer; font-weight:bold; }
.fioles-intro { position:absolute; inset:37px 0 0; padding:26px; background:#2a4858f7; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px; border-radius:14px; text-align:center; }.fioles-intro>b { color:#ffe1a6; font-size:1.3rem; }.fioles-intro>p { max-width:450px; }
.fioles-fantome { position:fixed; z-index:100000; pointer-events:none; transform:translate(-50%,-50%); border:3px solid #f1d396; border-radius:15px 15px 6px 6px; padding:15px; color:#fff0c8; background:#917bac; box-shadow:0 5px 15px #142a3b55; font-weight:bold; }
@media (max-width:600px) {
 .mission-maths--fiole .mission-maths-fenetre { padding:.6rem; }.mission-maths--fiole .mission-maths-entete h2 { font-size:1.1rem; }.mission-maths--fiole .mission-maths-entete p { font-size:.55rem; }.mission-maths--fiole .mission-maths-outils .btn { padding:.3rem .45rem; font-size:.75rem; }
 .fioles-ordre { padding:8px; }.fioles-ordre>b { font-size:.84rem; }.fioles-ordre>span { font-size:.72rem; }
 .fioles-commandes { gap:8px; }.fioles-verser { gap:6px; }.fioles-commandes small { font-size:.58rem; }.fioles-lecture { font-size:.76rem; }.fioles-resultat { font-size:.69rem; }
 .fioles-actions .atelier-action { width:100%; min-width:0; font-size:.82rem; }.fioles-message { font-size:.76rem; }
}