Audit complet — SOS Écrans

Date : 29 mars 2026

Site : https://sos-ecrans-bis.pages.dev

Modèle : Perplexity sonar-pro (audit approfondi)

Pages auditées : 15

Cet audit analyse le fond : parcours utilisateur, contenu, design, confiance, mobile, accessibilité. Pas seulement les accents.

index.html

1. PREMIÈRE IMPRESSION (3 secondes)

En 3 secondes, le visiteur comprend qu'il s'agit d'un outil gratuit et scientifique contre l'addiction aux écrans pour enfants, avec un hero clair ("SOS Écrans — Protégez vos enfants. Comprenez les écrans. Agissez.") et des badges "Gratuit · Anonyme · Scientifique". Le message est très clair : urgence familiale, action immédiate.

Le CTA principal ("Faire le diagnostic →") est évident, gros bouton violet au centre, mais il y en a deux côte à côte ("Choisir mon profil"), ce qui dilue l'urgence — un parent en détresse cliquera sur diagnostic, mais risque la confusion. La barre d'urgence rouge (numéros 3018 etc.) renforce l'immédiateté, mais apparaît après scroll.

Verdict : 8/10. Un parent inquiet trouve l'aide en 5-7s max, pas 10s. Manque un seul méga-CTA "Aidez-moi maintenant".

2. PARCOURS UTILISATEUR

Le parcours est logique et fluide :

Hero → Diagnostic ou Profils (parents/ados/encadrants).
Âges (6-18 ans) → Quiz adaptés.
Scroll naturel vers outils spécifiques (pacte, journal).

Pas de culs-de-sac : tout lien mène à du contenu (diagnostic.html, quiz-complet.html?age=...). Navigation sticky (urgences) + navbar (profils) + footer (liens rapides).

Problèmes :

Pas de breadcrumb ou "retour à l'accueil" évident depuis sections.
Floating button fixe en bas droite ("🔬 Diagnostic") vole l'attention et redirige toujours au diagnostic — redondant avec hero.
Urgence-bar sticky masque le hero sur scroll rapide (spacer OK, mais intrusif).
Navbar burger mobile OK, mais liens internes (#section-profil) sans smooth-scroll.

Verdict : Parent en détresse clique diagnostic en 5s → quiz → action. Enseignant/ado doivent scroller (20s). Parcours 85% optimal, mais trop d'options paralysent les pressés.

3. CONTENU ET TON

Contenu convaincant et crédible :

Ton empathique, direct ("Conçu par un parent, pour les parents", "Pas demain. Maintenant.") — parfait pour parents inquiets.
Âges segmentés avec labels émotionnels ("L'âge de l'éveil", "FOMO") + topics concrets (TikTok, Roblox) = relatable.
Valeurs claires : gratuit, anonyme, scientifique (sources footer : UNICEF/OMS).
Histoire fondatrice (Emmanuel Klein implicite) humanise.

Adapté aux publics :

Parents : Diagnostic + pacte.
Ados : "Teste tes parents", défis.
Enseignants : Atelier classe.

Faiblesses : Pas de témoignages "histoires vraies" visibles (promis dans contexte). Sources listées mais non cliquables/hyperliens. Quiz "230 questions" mentionné nulle part. Manque preuves scientifiques immédiates (ex: "Validé par Inserm").

Verdict : Ton parfait (parents en détresse se sentent compris). Contenu 90% convaincant, mais sous-exploite la science pour booster crédibilité.

4. DESIGN ET CONFIANCE

Design professionnel pour asso : Couleurs chaleureuses (violet #8B7EC8, dégradés doux), typographie bold (system-ui), espacement aéré (padding 20-40px). Cards immersives (overlay + images full-bg) inspirent action. Animations subtiles (float hero, hover lift).

Confiance :

Images pertinentes (famille, âges réalistes — assume /img/ existent).
Urgences rouges = alerte sérieuse.
Pas de pub, footer transparent ("sans données").

Problèmes :

Variables CSS manquantes (var(--text), --primary-dark) → risque rendu cassé si /css/style.css absent.
Hero dégradé pastel OK, mais trop "joyeux" pour détresse (ajouter rouge subtil ?).
Footer "© 2026" (typo future, anachronique).

Verdict : Inspire confiance (90%). Propre, moderne, associatif sans cheap. Sur iPad+, parfait ; desktop OK.

5. MOBILE ET ACCESSIBILITÉ

Mobile (iPhone SE) : Responsive excellent (@media 400px/600px). Grid 2-col âges OK, cards min-180px lisibles. Boutons 14px+ padding = tap OK (44px+ height). Urgences flex-wrap.

Accessibilité :

Alt texts bons ("Famille et écrans").
ARIA (navigation, labels).
Contrastes : Rouge/blanc OK (WCAG AA), violet/fond testable.
Lecteurs d'écran : Structure
, liens descriptifs.

Tests simulés (code) :

Viewport OK, no overflow-x.
Hover → scale/tap actif.
**Problème** : Navbar .nav-links assume CSS externe ; burger JS inline OK.

Verdict : Fonctionne nickel sur SE (320px). A11y B+ (manque skip-links, focus visibles). Contrastes bons, mais tester VoiceOver pour overlays cards.

6. BUGS TECHNIQUES

**CSS vars manquantes** : var(--text), var(--primary-dark), --card, --shadow → rendu dégradé sans /css/style.css.
**Liens internes** : href="#section-profil" sans smooth-scroll (jump brutal).
**Images** : Assume /img/ OK, mais si manquantes → cards vides.
**JS** : Urgence sticky + fade-in robustes (passive scroll). SW OK.
**HTML** : Valide (DOCTYPE, lang=fr, semantic). Accents OK (Écrans).
**Floating btn** : Z-index 99997 chevauche footer ; href fixe diagnostic (devrait varier ?).
**Navbar** : Classe "sos-navbar" sans style inline → assume externe.

Verdict : Peu de crashes, mais dépendance /css/style.css critique.

7. LES 5 CORRECTIONS PRIORITAIRES

**CTA hero unique + urgent** (impact max conversion).

Remplacer les 2 boutons hero par :


   <a href="/diagnostic.html" style="padding:16px 36px;border-radius:50px;background:linear-gradient(135deg,#DC2626,#EF4444);color:#fff;text-decoration:none;font-weight:900;font-size:16px;box-shadow:0 8px 24px rgba(220,38,38,0.4);transition:transform 0.2s;display:block;max-width:280px;margin:20px auto;">🚨 Aidez votre enfant MAINTENANT — Diagnostic (2 min) →</a>

**Définir CSS vars critiques** (fix rendu). Ajouter dans