/* Forme I — classer des mots dans des colonnes. Pensé tablette : grandes
   cibles, deux touchers par mot (le mot, puis la colonne). */

.banque-tri {
    display: flex; flex-wrap: wrap; gap: .5rem;
    padding: .75rem; margin-bottom: 1rem;
    background: #f8f9fb; border: 1px dashed #c8ccd4; border-radius: .5rem;
    min-height: 3.5rem;
}
.banque-tri:empty::after {
    content: "Tous les mots sont classés.";
    color: var(--jm-soft); font-style: italic; padding: .4rem;
}

.jeton {
    display: inline-flex; align-items: center; justify-content: center; min-height: var(--jm-cible, 44px);
    padding: .45rem 1rem; border: 2px solid var(--notion, var(--jm-accent)); border-radius: 2rem;
    background: #fff; color: var(--notion-dark, var(--jm-accent-dark)); font-weight: 600;
    cursor: pointer; user-select: none; font-size: 1.05rem; transition: all .12s;
}
.jeton:hover, .jeton:active { background: var(--notion-lt, var(--jm-accent-lt)); }
.jeton.choisi { background: var(--notion, var(--jm-accent)); color: #fff; box-shadow: 0 0 0 4px rgba(var(--notion-rgb, var(--jm-accent-rgb)), .25); }

.colonnes-tri {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem;
}

.colonne {
    border: 2px solid #e6e7e9; border-radius: .5rem; background: #fff;
    display: flex; flex-direction: column; min-height: 9rem;
}
.colonne.visee  { border-color: var(--notion, var(--jm-accent)); background: var(--notion-lt, var(--jm-accent-lt)); }
.colonne .entete {
    padding: .5rem; text-align: center; border-bottom: 2px solid #e6e7e9;
    background: #f8f9fb; border-radius: .35rem .35rem 0 0;
}
.colonne .entete .radical { font-weight: 700; font-size: 1.1rem; color: #45505f; }
.colonne .entete .etiquette { display: block; font-size: .95rem; color: var(--jm-soft); text-transform: uppercase; }
.colonne .contenu { display: flex; flex-direction: column; gap: .35rem; padding: .5rem; flex: 1; }
.colonne .contenu .jeton { text-align: center; }

/* Correction */
.jeton.juste { border-color: var(--jm-success); background: var(--jm-success-lt); color: #14532d; }
.jeton.faux  { border-color: var(--jm-warn); background: var(--jm-warn-lt); color: #6b1f26; }
.jeton .attendu { display: block; font-size: .95rem; font-weight: 400; color: var(--jm-soft); }

@media (max-width: 560px) {
    .colonnes-tri { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; }
    .jeton { font-size: 1rem; padding: .4rem .7rem; }
}

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