Fil de commentaires ancré dans la marge

<div class="uvq13-cmt"><div class="doc"><p class="kk">Document</p><p class="h" tabindex="-1">Proposition de refonte</p><p class="tx"><span>La nouvelle page d'accueil doit se charger en moins de deux secondes.</span> <button type="button" class="hl" aria-expanded="false" aria-controls="uvq13-cmt-0">Nous proposons de retirer le carrousel et de garder une seule image fixe.</button> <span>Ainsi le contenu principal apparaît plus tôt.</span></p><p class="tx"><button type="button" class="hl" aria-expanded="false" aria-controls="uvq13-cmt-1">Les boutons auront une seule couleur d'action.</button> <span>Les autres liens seront soulignés.</span></p></div><span class="bg" aria-hidden="true">2</span><span class="bg" aria-hidden="true">1</span><svg class="ln" aria-hidden="true"><path/></svg><section class="cm" id="uvq13-cmt-0" role="dialog" aria-label="Commentaires"><ul><li><span class="av" style="--c:#db2777">S</span><div><b>Sara</b><small>hace 5 min</small><p>Et si on gardait le carrousel seulement sur mobile ?</p></div></li><li><span class="av" style="--c:#0284c7">L</span><div><b>Leo</b><small>il y a 2 min</small><p>On l'essaie dans la prochaine version.</p></div></li><li class="tpl" hidden><span class="av" style="--c:#64748b">T</span><div><b>Vous</b><small>maintenant</small><p></p></div></li></ul><div class="rp"><input placeholder="Répondre…" aria-label="Répondre" autocomplete="off"><button type="button" class="sd" aria-label="Envoyer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12l16-8-6 16-2.5-6.5z"/></svg></button></div><button type="button" class="rs"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>Résoudre</span></button></section><section class="cm" id="uvq13-cmt-1" role="dialog" aria-label="Commentaires"><ul><li><span class="av" style="--c:#0284c7">L</span><div><b>Leo</b><small>il y a 1 h</small><p>Vérifions le contraste de la nouvelle couleur.</p></div></li><li class="tpl" hidden><span class="av" style="--c:#64748b">T</span><div><b>Vous</b><small>maintenant</small><p></p></div></li></ul><div class="rp"><input placeholder="Répondre…" aria-label="Répondre" autocomplete="off"><button type="button" class="sd" aria-label="Envoyer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12l16-8-6 16-2.5-6.5z"/></svg></button></div><button type="button" class="rs"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>Résoudre</span></button></section><p class="toast" aria-live="polite"><span>Commentaire résolu</span></p></div>