🧪 Prototype UX v2 — CSS fidèle au Silex

Même police, mêmes variables, mêmes composants. Seules les colonnes URL et Mot-clé changent.

⚠️ Version A — Actuelle (scroll horizontal sur < 1400px)

La règle .td-url { min-width: 500px } force le scroll

Mot-clé
Vol.
URL
Budget
Pos.
Nbr mc
Détails
🇫🇷 agence seo Herbretaise 0 268€ 100 0 0 0
🇫🇷 réparateur iphone martigues 590 140€ 23 4 12 2
🇫🇷 devis paysagistes nantes 210 95€ 67 3 5 0
✅ Version B — Optimisée (tout visible, sans scroll)

Seuls 2 changements CSS à appliquer côté dev

Mot-clé
URL
🇫🇷 agence seo Herbretaise 0 268€ 100 =0 0 =0
🇫🇷 réparateur iphone martigues 590 140€ 23 ↑4 12 ↑2
🇫🇷 devis paysagistes nantes 210 95€ 67 ↓3 5 =0
📋 Pour le dev — Changements minimaux à appliquer :

1. Réduire la colonne URL
.td-url { min-width: 220px; max-width: 220px; width: 220px; }
(au lieu de min-width: 500px)

2. Tronquer l'URL affichée
Dans .url-link : ajouter overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; display: block;
Afficher uniquement le domaine + début du chemin. L'URL complète reste dans le title et le href.

3. Activer table-layout fixed
.table-modern { table-layout: fixed; } — permet de contrôler précisément les largeurs

4. Optionnel : diff compacte en position
Remplacer l'icône FA par / / = pour gagner de la place