/* Forme D — appariement : relier chaque mot de gauche à son correspondant.
   Partagé par tous les exercices de cette forme. */

/* L'écart entre les colonnes est ce qui rend les traits lisibles. Trop serré,
   ils deviennent presque verticaux et se confondent ; c'est cet écart, et non
   la largeur du bloc, qui sépare les deux rangées de points, puisque chaque
   colonne colle ses points au bord intérieur. */
.relier {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: clamp(4rem, 22vw, 16rem);
    padding: .5rem 0;
}

/* Les traits sont dessinés dans un SVG posé PAR-DESSUS les colonnes, mais
   transparent aux clics : sans pointer-events:none, il avalerait les clics
   destinés aux mots. */
.relier .liens {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.relier .col     { display: flex; flex-direction: column; gap: .7rem; flex: 1 1 0; min-width: 0; }
.relier .col-g   { align-items: flex-end; }
.relier .col-d   { align-items: flex-start; }

.relier .mot {
    display: flex; align-items: center; gap: .6rem;
    padding: .35rem .7rem; border-radius: .4rem; min-height: var(--jm-cible, 44px);
    cursor: pointer; user-select: none; transition: background .12s;
    font-size: 1.05rem; max-width: 100%;
}
.relier .col-g .mot { flex-direction: row; }
.relier .col-d .mot { flex-direction: row-reverse; }

.relier .mot:hover, .relier .mot:active, .relier .mot.touche { background: rgba(0, 0, 0, .05); }
.relier .mot.actif  { background: rgba(var(--notion-rgb, var(--jm-accent-rgb)), .18); font-weight: 600; }
.relier .mot .txt   { overflow-wrap: anywhere; }

.relier .point {
    width: 16px; height: 16px; flex: none;
    border: 2px solid #adb5bd; border-radius: 50%;
    background: #fff; transition: all .12s;
}
.relier .mot.relie .point { border-color: currentColor; background: currentColor; }

/* Correction : on garde les deux colonnes mais on montre l'association faite. */
.relier-correction .paire {
    display: flex; align-items: center; gap: .6rem;
    padding: .35rem .6rem; border-radius: .4rem; margin-bottom: .3rem;
}
.relier-correction .fleche { color: var(--jm-soft); }

/* Sur téléphone, l'écart doit rester le plus grand possible sans écraser les
   mots : on rogne d'abord sur les marges des mots, pas sur l'écart central. */
@media (max-width: 560px) {
    .relier      { gap: clamp(2.5rem, 16vw, 5rem); }
    .relier .mot { font-size: 1rem; padding: .3rem .35rem; gap: .4rem; min-height: var(--jm-cible, 44px); }
}

/* Correction (23/10/2026) : mêmes colonnes, traits de l'élève retracés par forme_d.js
   en vert (juste) ou orange (faux). Rien n'est cliquable. */
.relier-corrige .mot          { cursor: default; }
.relier-corrige .mot:hover    { background: none; }
.relier-corrige .mot-g.juste  { color: var(--jm-success); }
.relier-corrige .mot-g.faux   { color: var(--jm-warn); }
.relier-corrige .mot-g.faux .txt { text-decoration: underline wavy var(--jm-warn); }
.relier-corrige .mot-d.relie .point { border-color: #5a6270; background: #5a6270; }

/* Tablette (lot 4, 24/10/2026) : un point de rupture à 768 px, en plus de celui à 560 px. */
@media (max-width: 767.98px) {
    .relier { gap: clamp(3rem, 18vw, 8rem); }
    .relier .mot { font-size: 1rem; }
}