/**
 * Forme R — ranger des mots dans un ordre, par clics successifs.
 *
 * Deux zones : la banque, où les mots attendent, et la liste, où ils se rangent
 * dans l'ordre choisi. Un clic dans la banque envoie le mot au bout de la
 * liste ; un clic dans la liste le renvoie dans la banque.
 *
 * Pas de glisser-déposer : sur tablette il demande une précision que tous les
 * élèves n'ont pas, et il ne marche pas au clavier. Deux clics font le même
 * travail et se rattrapent aussi bien.
 *
 * Rien ici ne parle d'alphabet : la forme resservira pour remettre une phrase
 * en ordre ou une frise dans le bon sens.
 */

.banque-ordre {
    display: flex; flex-wrap: wrap; gap: .5rem;
    min-height: 3.2rem;
    padding: .7rem; margin-bottom: .9rem;
    background: #f1f3f5; border: 2px dashed #ced4da; border-radius: .6rem;
}
.banque-ordre:empty::after {
    content: 'Tous les mots sont rangés.';
    color: var(--jm-soft); font-size: .95rem; font-style: italic;
}

.banque-ordre .jeton {
    display: inline-flex; align-items: center; min-height: var(--jm-cible, 44px);
    padding: .45rem 1rem; border: 2px solid #dadce0; border-radius: 2rem;
    background: #fff; cursor: pointer; user-select: none;
    font-size: 1.05rem; transition: border-color .12s, transform .08s;
    -webkit-tap-highlight-color: transparent;
}
.banque-ordre .jeton:hover, .banque-ordre .jeton:active { border-color: var(--notion, var(--jm-accent)); }
.banque-ordre .jeton:active { transform: scale(.96); }

/* La liste rangée : numérotée, pour que l'élève voie où il en est. */
.liste-ordre { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .5rem; }

.liste-ordre .place {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .7rem; min-height: var(--jm-cible, 44px);
    background: #fff; border: 1px solid #e6e7e9; border-radius: .5rem;
}
.liste-ordre .place .rang {
    flex: 0 0 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    background: #f1f3f5; border-radius: 50%;
    font-size: .9rem; font-weight: 700; color: var(--jm-soft);
}
.liste-ordre .place .jeton {
    flex: 1; cursor: pointer; user-select: none; font-size: 1.05rem;
    -webkit-tap-highlight-color: transparent;
}
.liste-ordre .place .retirer { color: var(--jm-soft); font-size: .95rem; }
.liste-ordre .place:hover .retirer { color: var(--notion, var(--jm-accent)); }

/* ------------------------------------------------------------------ correction
   Le mot « à déplacer » est celui qui casse la suite : c'est exactement ce que
   compte le barème, et l'élève doit pouvoir le voir mot par mot. */

.liste-ordre .place.enchaine  { background: var(--jm-success-lt); border-color: #bfe5c8; }
.liste-ordre .place.a-deplacer{ background: var(--jm-warn-lt); border-color: #f5cdb3; }
.liste-ordre .place.a-deplacer .jeton { text-decoration: line-through; text-decoration-thickness: 1px; }
.liste-ordre .place .attendu { font-size: .95rem; color: var(--jm-soft); }

.solution-ordre {
    display: flex; flex-wrap: wrap; gap: .4rem;
    padding: .7rem; background: #f8f9fa; border-radius: .6rem; margin-top: .5rem;
}
.solution-ordre .jeton {
    padding: .3rem .8rem; border-radius: 2rem; background: #fff;
    border: 1px solid #dee2e6; font-size: .95rem;
}
.solution-ordre .fleche { color: var(--jm-soft); align-self: center; }

@media (max-width: 560px) {
    .banque-ordre .jeton, .liste-ordre .place .jeton { font-size: 1rem; }
}

/* Tablette (lot 4, 24/10/2026) : un point de rupture à 768 px, en plus de celui à 560 px. */
@media (max-width: 767.98px) {
    .liste-ordre .place { padding: .4rem .6rem; }
}