Supprimer les paywalls souples avec du CSS et du JavaScript

16 mai 2026 · par JustZix Team

Certains paywalls vous envoient l'article entier, puis le cachent derrière une surcouche grise et verrouillent la page pour que vous ne puissiez pas défiler. Le texte est déjà dans votre navigateur — vous ne pouvez simplement pas le lire. Cet article montre comment retirer cette surcouche avec du CSS et du JavaScript. D'abord, une distinction importante, et une note honnête sur l'éthique.

Paywall souple contre paywall dur

Cela compte, alors lisez-le avant toute chose.

Un paywall souple envoie le HTML complet de l'article à votre navigateur puis le cache : une surcouche, un blocage du défilement, un flou, une limite max-height. Le contenu est dans le DOM. Vous pouvez le confirmer dans les DevTools — ouvrez le panneau Elements et cherchez un paragraphe de l'article ; s'il y est, le paywall est souple.
Un paywall dur n'envoie jamais le corps du tout. Le serveur vérifie votre abonnement et ne renvoie le texte qu'ensuite. Le DOM ne contient qu'un teaser et rien d'autre. Aucun CSS ni JavaScript ne peut faire apparaître un contenu jamais livré.

Cet article porte uniquement sur les paywalls souples — restaurer la visibilité d'un texte déjà présent dans votre navigateur. Vous ne pouvez pas contourner un paywall dur, et vous ne devriez pas essayer.

Une note honnête sur l'éthique et le droit

Le journalisme de qualité coûte de l'argent à produire. Un paywall souple est le pari d'un éditeur que harceler marche mieux que bloquer. Restyler une page dans votre propre navigateur est légal — le même droit qui permet l'existence des bloqueurs de pub et du mode Lecture — mais la légalité n'est pas toute l'histoire.

Soyez un lecteur correct : si vous dépendez d'une publication, abonnez-vous. Utilisez ces techniques pour l'article occasionnel et ponctuel, pour l'accessibilité, ou pour lire quelque chose qu'un ami vous a envoyé — pas comme moyen de ne plus jamais payer pour l'information. Les rédactions que vous privez de financement finissent par fermer.

Trouver ce qui cache l'article

Ouvrez les DevTools, panneau Elements. Les paywalls souples utilisent un petit ensemble d'astuces, généralement combinées :

Un div en position fixe avec un z-index élevé couvrant l'article — la surcouche.
overflow: hidden ou position: fixed sur <body> — le blocage du défilement.
Un filter: blur() sur les paragraphes du bas.
Un max-height plus overflow: hidden sur le conteneur de l'article — la limite avec fondu.

Cliquez autour de l'élément de surcouche et lisez ses styles calculés. Notez les noms de classes — vous les ciblerez ensuite.

Retirer la surcouche

La surcouche est un élément séparé superposé par-dessus. Masquez-le avec du CSS :

/* Motifs courants de classe et d'ID de surcouche de paywall */
.paywall,
.paywall-overlay,
.subscription-wall,
.piano-overlay,
.tp-modal,
.tp-backdrop,
[class*="paywall" i],
[class*="metering" i],
[id*="paywall" i] {
  display: none !important;
}

Utilisez le drapeau i pour une correspondance d'attributs insensible à la casse, exactement comme pour les bannières cookies. Commencez large, puis resserrez vers des classes précises si vous attrapez trop.

Débloquer le défilement du body

Masquer la surcouche ne sert à rien si la page est toujours figée. Les paywalls souples verrouillent le défilement pour que vous ne puissiez pas atteindre le texte caché. Forcez-le à revenir :

/* Restaure le defilement normal */
html, body {
  overflow: auto !important;
  position: static !important;
  height: auto !important;
}

Si un script ré-applique sans cesse le verrou, une petite règle JS le bat en effaçant le style en ligne en boucle :

// Re-affirme le defilement contre un script qui le reverrouille
setInterval(() => {
  document.documentElement.style.overflow = 'auto';
  document.body.style.overflow = 'auto';
  document.body.style.position = 'static';
}, 400);

Défloutter le texte

Beaucoup de paywalls laissent les deux premiers paragraphes nets et floutent le reste en teaser. Le texte est entièrement là — il est juste hors focus. Retirez le filtre :

/* Supprime le teaser floute */
.article-body,
.article-content,
[class*="blur" i],
[class*="fade" i] {
  filter: none !important;
  -webkit-filter: none !important;
}

Si le flou se trouve sur un enfant précis, inspectez-le et ciblez cette classe exacte — un * { filter: none } général peut casser des effets légitimes ailleurs sur la page.

Retirer la limite max-height

L'autre teaser classique : le conteneur de l'article a un max-height et overflow: hidden, donc vous voyez le haut et un fondu dégradé. Levez la limite :

/* Delimite l'article pour que le texte complet s'affiche */
.article-body,
.post-content,
[class*="article" i][class*="clamp" i],
[class*="gated" i] {
  max-height: none !important;
  overflow: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Supprime l'element de fondu degrade s'il est un noeud separe */
.content-fade,
[class*="gradient-fade" i] {
  display: none !important;
}

Assembler le tout en une seule règle

Chaque éditeur utilise un mélange légèrement différent. L'approche efficace avec JustZix est une règle par site, ciblée serré :

Créez une règle avec le motif d'URL https://news.example.com/*.
Collez le CSS de surcouche, de déblocage du défilement, de déflouttage et de délimitation dans l'onglet CSS.
N'ajoutez le JS de déblocage du défilement que si un script reverrouille sans cesse la page.
Gardez ces règles dans un dossier nommé « Lecture » pour pouvoir les examiner et les désactiver en groupe.

Parce que la règle est ciblée sur un domaine, elle n'affectera jamais un site où vous préféreriez simplement vous abonner.

À voir aussi

Désactiver les dark patterns et la fausse urgence — les mêmes compétences, appliquées aux interfaces manipulatrices.
Une feuille de style d'impression sur mesure pour de meilleurs PDF — nettoyez un article avant de l'enregistrer.
Cas d'usage de JustZix pour plus de règles axées sur la lecture.

Pour l'article occasionnel caché derrière une surcouche souple, installez JustZix et écrivez une règle ciblée. Et si vous lisez souvent une publication — payez-la. C'est ce qui fait que les articles continuent d'arriver.

Notez cet article

Aucune note — soyez le premier.