Cover remaining Sass families and fix autocomplete hover

e2e/fixtures/compiled-styles.js

@@ -0,0 +1,32 @@
+// Rôle : monte le CSS complet compilé et lit les styles calculés des fixtures visuelles.
+import { compile } from "sass";
+import { expect } from "@playwright/test";
+
+let css;
+export async function mountStyles(page, html) {
+  css ??= compile("website/src/styles/main.scss").css;
+  await page.setContent(`<!doctype html>${html}`);
+  await page.addStyleTag({ content: css });
+  await page.mouse.move(0, 0);
+}
+
+export function computed(locator, property, pseudo = null) {
+  return locator.evaluate((element, { property, pseudo }) =>
+    element.ownerDocument.defaultView.getComputedStyle(element, pseudo).getPropertyValue(property),
+  { property, pseudo });
+}
+
+export async function expectPseudo(locator, pseudo, property, value) {
+  await expect.poll(() => computed(locator, property, pseudo)).toEqual(value);
+}
+
+export async function expectFits(locator) {
+  await expect(locator).toBeVisible();
+  const viewport = locator.page().viewportSize();
+  await expect.poll(async () => (await locator.boundingBox()).x).toBeGreaterThanOrEqual(-1);
+  await expect.poll(async () => {
+    const bounds = await locator.boundingBox();
+    return bounds.x + bounds.width;
+  }).toBeLessThanOrEqual(viewport.width + 1);
+  expect(await locator.evaluate((element) => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(1);
+}