2CInfo/assets/exercices-commune.css

/* ==================================================================
   Composants du moteur d'exercices de la 2e commune.
   Chargé après assets/theme.css, dont il reprend toutes les couleurs.
   ================================================================== */

/* ---------- bandeau de score ---------- */

.score {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: .5rem;
  padding: .8rem 1.1rem 1rem;
  margin-bottom: 1.2rem;
}
.score__txt { font-size: .95rem; }
.score strong { color: var(--accent-encre); }
.score .action { margin-top: .7rem; }

.jauge {
  height: .7rem;
  background: var(--accent-fond);
  border-radius: .35rem;
  overflow: hidden;
  margin-top: .5rem;
}
.jauge span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--juste);
  transition: width .3s;
}

/* ---------- carte d'exercice ---------- */

.ex {
  border: 1px solid var(--trait);
  border-radius: .5rem;
  padding: 1.1rem 1.2rem 1.2rem;
  margin: 1.2rem 0;
  background: var(--blanc);
}
.ex .consigne {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: .95rem;
  color: var(--accent-encre);
  margin: 0 0 .3rem;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}
.ex .enonce { margin: 0 0 .9rem; }
.ex h4 { margin: 0 0 .5rem; color: var(--encre-douce); font-size: .85rem; }

.minuteur {
  font-family: var(--police-titre);
  font-weight: 700;
  color: var(--erreur);
}

/* ---------- boutons de réponse ---------- */

.opt, .jeton, .item {
  font: inherit;
  font-size: .97rem;
  display: inline-block;
  margin: .25rem .35rem .25rem 0;
  padding: .5rem .8rem;
  border: 1px solid var(--trait-fort);
  border-radius: .4rem;
  background: var(--blanc);
  color: var(--encre);
  cursor: pointer;
  text-align: left;
}
.opt { display: block; width: 100%; }
.jeton--bloc { display: block; width: 100%; }
.jeton--mini { font-size: .8rem; padding: .2rem .55rem; margin-left: .4rem; }

.opt:hover:not([disabled]),
.jeton:hover:not([disabled]),
.item:hover:not([disabled]) { border-color: var(--encre); }

.opt.choisi, .jeton.choisi, .item.choisi {
  background: var(--encre);
  color: var(--papier);
  border-color: var(--encre);
}

.opt.juste, .jeton.juste, .item.juste {
  background: var(--juste-fond);
  border-color: var(--juste);
}
.opt.faux, .jeton.faux, .item.faux {
  background: var(--erreur-fond);
  border-color: var(--erreur);
}
.opt[disabled], .jeton[disabled], .item[disabled] { cursor: default; }

/* ---------- tri en paniers ---------- */

.reserve { margin-bottom: .6rem; }

.paniers {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: .8rem;
}
.panier {
  flex: 1 1 11rem;
  min-height: 6rem;
  border: 2px dashed var(--trait-fort);
  border-radius: .5rem;
  padding: .6rem;
  background: var(--papier);
  cursor: pointer;
}
.panier:hover { border-color: var(--accent); }
.panier.vise { border-color: var(--accent); background: var(--accent-fond); }
.panier h4 {
  margin: 0 0 .4rem;
  font-family: var(--police-titre);
  font-size: .85rem;
  color: var(--accent-encre);
}

/* ---------- association en deux colonnes ---------- */

.deux-col { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.deux-col > div { flex: 1 1 14rem; }

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

.liste-ordre { margin-bottom: .6rem; }
.item--bloc { display: block; width: 100%; }

/* ---------- saisie ---------- */

.court {
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--trait-fort);
  border-radius: .4rem;
  width: 11rem;
}

/* ---------- schéma à zones cliquables ---------- */

.schema { margin: .4rem 0 .8rem; }
.schema svg { max-width: 100%; height: auto; }
svg .zone {
  fill: transparent;
  stroke: var(--accent-encre);
  stroke-width: 2;
  cursor: pointer;
}
svg .zone:hover { fill: var(--accent-fond); fill-opacity: .55; }
svg .zone.juste { fill: var(--juste); fill-opacity: .3; stroke: var(--juste); }
svg .zone.faux  { fill: var(--erreur); fill-opacity: .3; stroke: var(--erreur); }
svg text { font-family: inherit; font-size: 13px; fill: var(--encre); pointer-events: none; }

/* ---------- verdict ---------- */

.retour {
  margin-top: .8rem;
  font-size: .93rem;
  padding: .55rem .7rem;
  border-radius: .4rem;
  display: none;
}
.retour--ok { display: block; background: var(--juste-fond); border: 1px solid var(--juste); }
.retour--ko { display: block; background: var(--erreur-fond); border: 1px solid var(--erreur); }

@media print {
  .score, .ex .action, .panier { display: none; }
}