Hi Benoit, this is very interesting!
I really like the standardised headers with difficulty-levels, and the
key-point-reminder/TL;DR/à retenir section. :-)
A few quick notes:
* I suggest reducing the indent for list-items (from 5em to 2em?)
otherwise it leads to problems at smaller (~1024) screen widths, e.g.
https://i.imgur.com/sJgq799.png or
https://i.imgur.com/pkwbvLA.png
* I suggest reducing the margin at top and left, too, for the same reason.
Note to self: the CSS used by the gadget-ized version is here:
https://fr.wikipedia.org/wiki/MediaWiki:Gadget-MiseEnPageEspaceAide.css
Sorry I can't help with the technical-implementation question.