/* ==================================================================
   Jeux du module A — 2e différenciée
   Chargé après assets/theme.css, dont il reprend toutes les couleurs.
   Les jeux sont conçus pour la projection au TBI : cibles larges,
   contrastes francs, aucun texte sous 0,85 rem.
   ================================================================== */

/* ---------- séances affichées une par une ---------- */

section[hidden] { display: none; }

/* ---------- plan et objectifs de la séance ---------- */

ol.plan {
  counter-reset: s;
  list-style: none;
  padding: 0;
  max-width: var(--lecture);
}
ol.plan li {
  counter-increment: s;
  position: relative;
  padding: .45rem 0 .45rem 3rem;
  border-bottom: 1px solid var(--trait);
}
ol.plan li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: .45rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  background: var(--encre);
  color: var(--papier);
  font-size: .9rem;
  border-radius: 50%;
}

ul.but { list-style: none; padding: 0; max-width: var(--lecture); }
ul.but li { padding: .35rem 0 .35rem 1.6rem; position: relative; }
ul.but li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95rem;
  width: .7rem;
  height: .7rem;
  background: var(--accent);
}

/* ---------- carte d'un jeu ---------- */

.atelier {
  border: 1px solid var(--trait);
  border-radius: .5rem;
  margin: 1.2rem 0;
  background: var(--blanc);
  overflow: hidden;
}
.atelier > h4 {
  margin: 0;
  padding: .6rem 1rem;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--police-titre);
  font-size: .95rem;
  font-weight: 700;
  display: flex;
  gap: .6rem;
  align-items: baseline;
}
.atelier > h4 .num {
  background: var(--accent);
  color: var(--encre);
  font-size: .78rem;
  padding: .05rem .45rem;
  border-radius: .2rem;
}
.atelier .corps { padding: 1rem; }
.consigne { margin: 0 0 .9rem; font-size: .95rem; max-width: var(--lecture); }

/* ---------- barre d'état d'un jeu ---------- */

.barre {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.4rem;
  align-items: center;
  margin: .2rem 0 .9rem;
  font-size: .95rem;
}
.cible-txt { font-weight: 700; font-size: 1.05rem; }
.score { color: var(--encre-douce); font-size: .9rem; }

/* ---------- boutons de jeu ---------- */

.vf button,
.qcm .choix button,
.paires button,
.liste button,
.etape {
  font: inherit;
  background: var(--blanc);
  color: var(--encre);
  border: 2px solid var(--encre);
  border-radius: .3rem;
  cursor: pointer;
  text-align: left;
}

/* ---------- aire de pions (jeu des nombres) ---------- */

.aire {
  position: relative;
  width: 100%;
  height: 22rem;
  background: var(--papier);
  border: 2px solid var(--trait-fort);
  border-radius: .4rem;
  overflow: hidden;
  touch-action: none;
}
.pion {
  position: absolute;
  width: 3.2rem;
  height: 3.2rem;
  line-height: 3.2rem;
  text-align: center;
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--blanc);
  color: var(--encre);
  border: 2px solid var(--encre);
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  padding: 0;
}
.pion.fait { background: var(--juste); border-color: var(--juste); color: #fff; }
.pion.actif { background: var(--cible); border-color: var(--cible); }

.rate { animation: secousse .25s; }
@keyframes secousse { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- double-clic : les douze boîtes ---------- */

.boites {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
  max-width: 34rem;
}
.boite {
  aspect-ratio: 1 / 1;
  border: 2px solid var(--encre);
  border-radius: .3rem;
  background: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.boite.ouverte { background: var(--juste); border-color: var(--juste); }
.boite .forme { width: 52%; height: 52%; opacity: 0; }
.boite.ouverte .forme { background: #fff; opacity: 1; border-radius: 50%; }

/* ---------- glisser-déposer dans des bacs ---------- */

.tri { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.reserve {
  flex: 1 1 16rem;
  min-height: 8rem;
  padding: .6rem;
  border: 2px dashed var(--trait-fort);
  border-radius: .4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-content: flex-start;
}
.bacs { flex: 2 1 22rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.bac {
  flex: 1 1 7rem;
  min-height: 8rem;
  border: 2px solid var(--encre);
  border-radius: .4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-content: flex-start;
  padding: .5rem;
  cursor: pointer;
}
.bac .titre {
  flex: 1 0 100%;
  font-size: .85rem;
  text-align: center;
  color: var(--encre-douce);
}
.bac.vise { background: var(--cible-fond); border-color: var(--cible); }

.jeton {
  font: inherit;
  padding: .4rem .65rem;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: .3rem;
  cursor: grab;
  user-select: none;
  font-size: .88rem;
  touch-action: none;
}
/* Sélection au clic : alternative au glisser pour qui ne maîtrise pas
   encore le maintien du bouton, et seul moyen au clavier. */
.jeton.choisi { background: var(--cible); border-color: var(--cible); }
.jeton.pris {
  position: fixed;
  z-index: 99;
  pointer-events: none;
  cursor: grabbing;
  box-shadow: 0 6px 14px rgba(22, 48, 43, .3);
}
.jeton .glyphe { display: block; width: 2rem; height: 2rem; }

/* ---------- remise en ordre ---------- */

.etapes { display: flex; flex-direction: column; gap: .5rem; max-width: 42rem; }
.etape { padding: .5rem .75rem; }
.etape.placee { background: var(--juste); border-color: var(--juste); color: #fff; cursor: default; }
.rang { display: inline-block; min-width: 1.6rem; font-weight: 700; }

/* ---------- vrai ou faux ---------- */

.vf { max-width: var(--lecture); }
.vf .ligne {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid var(--trait);
}
.vf .txt { flex: 1 1 18rem; }
.vf .verdict { font-size: .85rem; flex: 1 1 100%; }
.vf button { padding: .25rem .8rem; }
.vf button.choisi { background: var(--encre); color: var(--papier); }

.juste { color: var(--juste); }
.faux { color: var(--erreur); }

/* ---------- questions à choix ---------- */

.qcm { max-width: var(--lecture); }
.qcm .q { font-weight: 700; margin: .2rem 0 .6rem; }
.qcm .choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.qcm .choix button { padding: .4rem .85rem; }
.qcm .choix button.bon { background: var(--juste); border-color: var(--juste); color: #fff; }
.qcm .choix button.mauvais { background: var(--erreur); border-color: var(--erreur); color: #fff; }
.qcm .retour { margin-top: .7rem; font-size: .9rem; min-height: 1.4rem; }

/* ---------- paires à relier ---------- */

.paires { display: flex; gap: 1rem; flex-wrap: wrap; max-width: var(--lecture); }
.paires .col { flex: 1 1 13rem; display: flex; flex-direction: column; gap: .45rem; }
.paires button { font-size: .88rem; padding: .45rem .7rem; }
.paires button.choisi { background: var(--cible); border-color: var(--cible); }
.paires button.liee { background: var(--juste); border-color: var(--juste); color: #fff; cursor: default; }

/* ---------- parcours de dossiers ---------- */

.chemin { max-width: 40rem; }
.chemin .fil {
  font-size: .9rem;
  color: var(--encre-douce);
  margin-bottom: .6rem;
  word-break: break-word;
}
.liste { display: flex; flex-direction: column; gap: .4rem; }
.liste button { padding: .45rem .7rem; }
.liste button.dossier::before { content: "[dossier] "; color: var(--encre-douce); font-size: .8rem; }
.liste button.fichier::before { content: "[fichier] "; color: var(--encre-douce); font-size: .8rem; }

/* ---------- schémas à zones ---------- */

figure.schema { margin: 0; max-width: 30rem; }
.zone { fill: var(--blanc); stroke: var(--encre); stroke-width: 2; cursor: pointer; }
.zone:hover { fill: var(--cible-fond); }
.zone.trouve { fill: var(--juste-fond); stroke: var(--juste); }
svg text { font-family: inherit; font-size: 11px; fill: var(--encre); pointer-events: none; }

@media print {
  section[hidden] { display: block; }
  .aire, .boites { display: none; }
}