/* Forme O — retrouver les familles de mots dans un texte.
   L'élève choisit une famille, puis clique les mots du texte : ils prennent la
   couleur de cette famille. Trois couleurs suffisent et restent lisibles. */

.consigne-familles { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }

.famille-cible {
    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-weight: 600;
    font-size: 1.05rem; transition: all .12s;
}
.famille-cible .pastille {
    display: inline-block; width: .7rem; height: .7rem; border-radius: 50%;
    margin-right: .45rem; vertical-align: middle;
}
.famille-cible.active { border-color: currentColor; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.famille-cible .compte { font-weight: 400; color: var(--jm-soft); font-size: .95rem; margin-left: .35rem; }

.texte-exercice {
    font-size: 1.15rem; line-height: 2.1; padding: 1rem 1.2rem;
    background: #fff; border: 1px solid #e6e7e9; border-radius: .5rem;
}
.texte-exercice .titre { font-weight: 700; margin-bottom: .5rem; display: block; }

.texte-exercice .mot-texte {
    cursor: pointer; border-radius: .25rem; padding: .05rem .1rem;
    transition: background .1s;
}
.texte-exercice .mot-texte:hover, .texte-exercice .mot-texte:active { background: #f1f3f5; }
.texte-exercice .mot-texte.pris   { color: #fff; font-weight: 700; padding: .1rem .35rem; }

/* Correction */
.texte-exercice .mot-texte.juste   { background: var(--jm-success); color: #fff; font-weight: 700; padding: .1rem .35rem; }
.texte-exercice .mot-texte.trop    { background: var(--jm-warn-lt); color: #6b1f26; text-decoration: line-through; }
.texte-exercice .mot-texte.oublie  { background: #fff3bf; color: #7a5b00; font-weight: 700;
                                     outline: 2px dashed #f59f00; padding: .1rem .35rem; }

.bilan-famille { margin-top: .5rem; font-size: .95rem; }
.bilan-famille .etiquette { font-weight: 700; }

@media (max-width: 560px) {
    .texte-exercice { font-size: 1.05rem; line-height: 2.2; padding: .75rem .8rem; }
}

/* Tablette (lot 4, 24/10/2026) : un point de rupture à 768 px, en plus de celui à 560 px. */
@media (max-width: 767.98px) {
    .texte-exercice { font-size: 1.1rem; }
}