/* Free exercises on the homophones a / à, on / ont, et / est, son / sont and ou / où. Loaded after clock-exercise.css, imparfait-exercise.css,
   phrases-exercise.css, noms-exercise.css, present-exercise.css and imparfait1-exercise.css, whose line, keyboard and rows it reuses.
   The sentence keeps its gaps; the word touched below fills its gap at once. */
.homophones-mark{background:none;color:#1f45e6;font-weight:800;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.homophones-slot{display:inline-block;min-width:2.2em;margin:0 2px;padding:0 3px;border-bottom:3px solid #2453ff;color:#2453ff;text-align:center;line-height:1.15}
.homophones-slot sub{font-size:.55em;color:#5a6390}
.homophones-slot.is-filled{color:#1f45e6}
.homophones-slot.is-correct{border-color:#16794a;color:#16794a}
.homophones-slot.is-wrong{border-color:#c0392b;color:#c0392b}
/* One row per gap: its name, then one button per word; a single gap has no name. Eight words go on two lines of four. */
.homophones-rows .clock-choice{font-size:19px}
.homophones-rows--2 .noms-sort-row{grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,1fr))}
.homophones-rows--4 .noms-sort-row{grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr))}
.homophones-rows--8 .noms-sort-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.homophones-rows--8 .noms-sort-word{grid-column:1/-1}
.homophones-rows--single .noms-sort-row{grid-template-columns:repeat(var(--homophones-options,2),minmax(0,1fr))}
.homophones-rows--single.homophones-rows--4{--homophones-options:4}
.homophones-rows--single.homophones-rows--8{--homophones-options:4}
@media(max-width:700px){
 .homophones-rows--2 .noms-sort-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .homophones-rows--4 .noms-sort-row,.homophones-rows--8 .noms-sort-row{grid-template-columns:repeat(4,minmax(0,1fr))}
 .homophones-rows .noms-sort-word{grid-column:1/-1}
}