/* Forme G — l'intrus : une série de mots, un seul à désigner. */

.serie-intrus {
    border: 1px solid #e6e7e9; border-radius: .5rem;
    padding: .75rem 1rem; margin-bottom: .75rem; background: #fff;
}
.serie-intrus .numero { font-weight: 700; color: var(--notion, var(--jm-accent)); margin-right: .5rem; }

.serie-intrus .mots { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

.serie-intrus .mot {
    display: inline-flex; align-items: center; min-height: var(--jm-cible, 44px);
    padding: .4rem .9rem; border: 2px solid #dadce0; border-radius: 2rem;
    background: #fff; cursor: pointer; user-select: none;
    font-size: 1.05rem; transition: all .12s;
}
.serie-intrus .mot:hover, .serie-intrus .mot:active, .serie-intrus .mot.actif { border-color: var(--notion, var(--jm-accent)); }
/* Sélectionné = BARRÉ, pas seulement entouré. La consigne de tous ces
   exercices dit « barre l'intrus » : le geste à l'écran doit dire la même chose
   que le mot, et la même chose que la correction, qui barre déjà.

   La pastille pleine d'avant marquait bien la sélection mais ne barrait rien —
   signalé par Luc le 17/08/2026. Un mot rayé sur fond clair se lit mieux qu'un
   mot rayé sur fond plein, et ressemble à ce qu'on ferait au crayon. */
.serie-intrus .mot.choisi     { border-color: var(--notion, var(--jm-accent)); background: var(--notion-lt, var(--jm-accent-lt)); color: var(--notion-dark, var(--jm-accent-dark));
                                font-weight: 600; text-decoration: line-through;
                                text-decoration-color: var(--notion, var(--jm-accent)); text-decoration-thickness: 2px; }

/* Correction : le mot barré est celui que l'élève a désigné. */
.serie-intrus .mot.barre      { text-decoration: line-through; }
.serie-intrus .mot.juste      { border-color: var(--jm-success); background: var(--jm-success-lt); color: #14532d; }
.serie-intrus .mot.faux       { border-color: var(--jm-warn); background: var(--jm-warn-lt); color: #6b1f26; }
.serie-intrus .mot.attendu    { border-color: var(--jm-success); border-style: dashed; }

.serie-intrus .contraire {
    display: block; font-size: .95rem; color: var(--jm-soft);
    text-align: center; margin-top: .15rem; text-decoration: none;
}
.serie-intrus .raison { margin-top: .5rem; font-size: .95rem; color: #45505f; }

@media (max-width: 560px) {
    .serie-intrus .mot { font-size: 1rem; padding: .35rem .7rem; }
}

/* L'indice de catégorie — un <details> natif, sans JavaScript. Volontairement
   discret : il est là pour dépanner, pas pour être le réflexe. */
.serie-intrus .indice-categorie { display: inline-block; }
.serie-intrus .indice-categorie summary {
    display: inline-block; cursor: pointer; list-style: none;
    font-size: .95rem; color: var(--jm-soft); line-height: 1.7;
    border: 1px dashed #c8ccd4; border-radius: 1rem; padding: .2rem .8rem;
}
.serie-intrus .indice-categorie summary::-webkit-details-marker { display: none; }
.serie-intrus .indice-categorie summary:hover { color: var(--notion, var(--jm-accent)); border-color: var(--notion, var(--jm-accent)); }
.serie-intrus .indice-categorie[open] summary { display: none; }

/* Tablette (lot 4, 24/10/2026) : un point de rupture à 768 px, en plus de celui à 560 px. */
@media (max-width: 767.98px) {
    .serie-intrus { padding: .65rem .8rem; }
    .serie-intrus .mots { gap: .45rem; }
}