Audit Gemini — Congres Strasbourg

Date: 29/03/2026

index.html

En tant qu'auditeur UX/UI senior, je vais procéder à un audit complet et sans complaisance de votre page index.html pour les "Rendez-vous Géopolitiques de Strasbourg".

Audit UX/UI Complet : Les Rendez-vous Géopolitiques de Strasbourg

Contexte : Site événementiel pour un congrès politique/sociétal/environnemental à Strasbourg.

Page auditée : index.html

Thèmes graphiques mentionnés (Classique, Strasbourg, Moderne) vs. implémentés (Nuit, République, Europe, Institutionnel, Eau). Je noterai la richesse de l'implémentation par rapport à la demande initiale.

1. PREMIÈRE IMPRESSION (3 secondes)

Impact : Très forte et positive.

Dès l'ouverture, la page de "lancement" (landing choice) capte l'attention. Le titre est clair, la date est visible, et l'animation des cercles dorés confère une touche d'élégance et de prestige. Le choix du thème visuel est immédiatement proposé, ce qui est une fonctionnalité innovante et engageante. Le thème par défaut ("Nuit diplomatique") est sobre, professionnel et inspire confiance. L'ensemble dégage une impression de sérieux, de qualité et d'événement d'envergure.

Points forts :

Clarté de l'objet et de la date de l'événement.
Esthétique soignée et professionnelle.
Fonctionnalité de choix de thème visuel immédiate et ludique.
Sentiment de prestige et d'importance.

Points faibles :

L'étape supplémentaire du "landing choice" peut être perçue comme une légère friction pour les utilisateurs pressés d'accéder au contenu. Cependant, l'exécution est si fluide qu'elle minimise cet impact.

2. PARCOURS UTILISATEUR

Globalement : Le parcours est bien pensé pour un site "one-page" événementiel, mais quelques frictions et incohérences subsistent.

Landing Page (landing-choice) :

**Objectif :** Présenter l'événement et permettre le choix du thème.
**Efficacité :** Atteint son objectif avec brio. Le bouton "Découvrir le festival" est clair. Le sélecteur de thème est intuitif.
**Friction :** L'étape est un "gate" avant le contenu. Si un utilisateur arrive via un lien profond (`index.html#programme`), il est d'abord redirigé vers le landing, puis vers le haut de la page principale, perdant l'ancre initiale. C'est une rupture de parcours.

Navigation Principale (nav) :

**Structure :** Fixe, claire, avec des liens vers les sections principales. Le dropdown "Programme" est une bonne idée pour désencombrer.
**Cohérence :** Les liens sont généralement logiques.
**Frictions :**

* Le lien "Programme" dans le dropdown ne permet pas de naviguer directement vers un jour spécifique (ex: "Jour 1"). Il renvoie à la section #programme et s'appuie sur onclick="showDay(1)" pour activer l'onglet. C'est fonctionnel mais moins direct qu'un lien d'ancre dédié.

* Le bouton "Réserver" dans la nav renvoie à la section #reserver. C'est logique. Cependant, le bouton "Découvrir le festival" sur la landing page renvoie à #site (qui est juste le conteneur principal) et window.scrollTo(0,0), ce qui peut annuler l'effet d'un lien profond.

* Le bouton de recherche (.search-toggle) est masqué sur desktop (display: none;). La recherche est accessible via Ctrl+K ou le menu mobile, mais pas via un bouton visible sur desktop. C'est une lacune majeure en UX et accessibilité.

Contenu Principal (Sections) :

**Structure :** Longue page découpée en sections claires (`#thematiques`, `#programme`, etc.). Le `scroll-reveal` ajoute un dynamisme agréable.
**Flux :** Le défilement est fluide. Les ancres fonctionnent bien une fois sur le site principal.
**Interactions :** Les onglets du programme, les filtres des intervenants, les cartes d'actualités extensibles sont des interactions bienvenues qui enrichissent l'expérience.
**Frictions :**

* Les ancres id="lieux" et id="pratique" sont des div vides avec un top:-80px pour compenser la barre de navigation fixe. C'est une solution technique fonctionnelle mais peu élégante et non sémantique. Une propriété CSS scroll-padding-top sur html ou body serait préférable.

* Le bouton "Voir tous les intervenants" ne se désactive pas/ne change pas d'état une fois tous les intervenants affichés.

Formulaires :

**Clarté :** Les formulaires "Appel à communications" et "Contact" sont clairs, avec des labels et placeholders explicites.
**Feedback :** Les messages de confirmation sont présents.
**Friction :** Le formulaire de contact envoie un `mailto:`. C'est une solution simple mais peu professionnelle pour un événement de cette envergure (pas de suivi, dépend du client mail de l'utilisateur, risque de spam).

3. CONTENU ET TON

Globalement : Le contenu est riche, pertinent et le ton est parfaitement adapté à l'événement.

Clarté et Pertinence :

Les titres et sous-titres sont accrocheurs et informatifs.
Les descriptions des thématiques, sessions et intervenants sont concises et claires.
Les informations pratiques sont complètes et bien organisées.
Le thème "Les batailles de l'eau" est bien développé et transversal.

Crédibilité et Autorité :

La mention de cofondateurs comme Pierre Haski et la liste d'intervenants de renom (Thomas Piketty, Jean-Marc Jancovici, etc.) confèrent une crédibilité immense.
Les partenaires institutionnels et médiatiques (Conseil de l'Europe, Le Monde, Arte) renforcent cette autorité.
Le ton est sérieux, académique, mais accessible, invitant à la réflexion et au débat, ce qui est idéal pour un congrès géopolitique.

Engagement :

Les "petits plus" comme "✏️ Une thématique à ajouter ?" ou "✏️ Il manque quelqu'un ?" sont excellents pour l'engagement et donnent l'impression que l'avis de l'utilisateur compte.
Les microcopies pour les statuts des sessions ("Dernières places", "Complet") sont efficaces.

Points faibles :

L'utilisation d'entités HTML (`é`, `à`) est fonctionnelle mais, avec `charset="UTF-8"`, l'utilisation directe des caractères accentués serait plus propre dans le code source. Ce n'est pas un bug, juste une pratique de code.
Le contenu du slider est très textuel. Bien que les messages soient forts, l'absence d'images réelles (même en arrière-plan) peut rendre certaines slides un peu abstraites.

4. DESIGN ET CONFIANCE

Globalement : Le design est le point fort majeur de ce site. Il est moderne, élégant, cohérent et inspire une confiance immédiate.

Esthétique et Cohérence :

**Thèmes Visuels :** Le système de thèmes est exceptionnel. Les 5 thèmes (Nuit diplomatique, République, Jour d'Europe, Institutionnel, Batailles de l'eau) sont distincts, bien réalisés et offrent une personnalisation riche. Ils sont tous professionnels et adaptés au contexte. Le thème "Nuit diplomatique" par défaut est particulièrement réussi.
**Typographie :** L'association Playfair Display (serif, titres) et Inter (sans-serif, corps) est un excellent choix, conférant à la fois élégance et lisibilité.
**Palette de Couleurs :** Chaque thème a une palette bien définie avec des variables CSS, assurant une cohérence parfaite. Les couleurs d'accentuation sont utilisées avec parcimonie et efficacité.
**Animations :** Les animations (cercles dorés, `fadeInUp`, `scroll-reveal`, slider) sont subtiles, fluides et ajoutent une touche de modernité et de dynamisme sans être distrayantes.
**Mise en Page :** L'utilisation de Flexbox et Grid pour les mises en page est efficace, créant des structures claires et aérées. Les cartes sont bien conçues, avec des ombres et des transitions au survol qui améliorent l'expérience.

Confiance et Professionnalisme :

Le design global est d'un niveau très élevé, digne d'un événement international. Il inspire immédiatement confiance et crédibilité.
La qualité visuelle suggère une organisation méticuleuse et un souci du détail.
Les éléments décoratifs (gradients, motifs SVG discrets) contribuent à une ambiance sophistiquée.

Points faibles :

L'absence d'images réelles (photos des intervenants, lieux, etc.) dans le code fourni rend le site très abstrait visuellement. Bien que les placeholders soient présents, un site événementiel bénéficie grandement de visuels concrets pour humaniser l'expérience et renforcer l'attrait. Le `speaker-avatar` avec les initiales est une solution élégante mais ne remplace pas une photo.
Les icônes utilisées sont des caractères Unicode (ex: `🏛`). C'est simple à implémenter mais limite la personnalisation et la cohérence stylistique par rapport à des icônes SVG ou une bibliothèque d'icônes dédiée.

5. MOBILE ET ACCESSIBILITÉ

Globalement : La réactivité est bonne, mais l'accessibilité présente des lacunes notables.

Mobile (Responsiveness) :

**Adaptation :** Le site est bien conçu pour le mobile. Les grilles se transforment en colonnes uniques, les boutons s'adaptent, la navigation passe en hamburger.
**Lisibilité :** Les tailles de police `clamp()` et les ajustements de padding/margin garantissent une bonne lisibilité sur petits écrans.
**Navigation Mobile :** Le menu hamburger est fonctionnel. Les boutons de sélection de thème et de recherche dans le menu mobile sont une bonne idée.
**Friction :** Le slider peut être un peu lourd en termes de performance sur des connexions mobiles lentes, bien que l'absence d'images réelles aide.

Accessibilité (WCAG) :

**Points positifs :**

* lang="fr", charset="UTF-8", viewport sont corrects.

* Utilisation de balises sémantiques (nav, section, footer, h1-h4).

* aria-label est utilisé pour le hamburger et les flèches du slider, ainsi que les thèmes pills.

* Le contraste des couleurs semble généralement bon sur tous les thèmes.

* La classe sr-only est présente pour le texte masqué.

**Points faibles (critiques) :**

* Recherche cachée : Le bouton de recherche (.search-toggle) est masqué sur desktop. L'accès via Ctrl+K n'est pas accessible à tous les utilisateurs (mobilité réduite, non-connaissance du raccourci). C'est une barrière majeure.

* Liens sociaux non fonctionnels : Les icônes sociales dans le footer sont des avec title et aria-label, mais ne sont pas des liens cliquables (). Elles sont donc inaccessibles et non fonctionnelles.

* Focus states : Les états de focus pour la navigation, les boutons et les champs de formulaire ne sont pas explicitement stylisés. Ils reposent sur le comportement par défaut du navigateur, qui peut être insuffisant ou incohérent.

* Images (manquantes) : Bien qu'il n'y ait pas d'éléments , si des images étaient ajoutées (ce qui est souhaitable), il faudrait s'assurer qu'elles aient des attributs alt pertinents.

* Structure du programme : Les liens du dropdown "Programme" qui appellent showDay(X) via onclick sur des sans href (ou avec href="#programme") peuvent être déroutants pour la navigation au clavier ou les lecteurs d'écran qui s'attendent à une navigation directe. Il serait préférable d'avoir des liens d'ancre vers des sous-sections ou des boutons sémantiques.

6. BUGS TECHNIQUES (accents, liens, HTML/JS/CSS)

Globalement : Le code est propre et structuré, mais quelques bugs et choix techniques sous-optimaux sont présents.

Accents :

**Statut :** Non bug. L'utilisation d'entités HTML (`é`, `à`, `œ`) est une pratique sûre pour les accents, même si `charset="UTF-8"` permettrait d'écrire les caractères directement. C'est une question de préférence et de compatibilité historique.

Liens :

**BUG - Liens sociaux :** Les éléments `.social-link` dans le footer sont des `` et ne sont pas cliquables. Ils devraient être des `` tags.

**BUG - Navigation "Réserver" :** Le bouton "Réserver" dans la nav renvoie à `#reserver`, ce qui est correct. Cependant, le bouton "Découvrir le festival" sur la landing page renvoie à `#site` et `window.scrollTo(0,0)`, ce qui annule l'effet d'un lien profond si l'utilisateur arrive sur `index.html#programme` par exemple. Le `showSite()` devrait idéalement préserver le hash si présent.

**BUG - Liens de feedback :** Les liens "✏️ Une thématique à ajouter ?" sont des `` avec `onclick` mais sans `href` (ou avec `href="#"`). Ils devraient être des `

HTML :

**Hack - Ancres de défilement :** Les `div` vides avec `id="lieux"` et `id="pratique"` et un `position:relative;top:-80px;` sont une solution de contournement pour le décalage de la barre de navigation fixe. La propriété CSS `scroll-padding-top` sur `html` ou `body` est la méthode moderne et sémantique pour gérer cela.
**Redondance :** Le `search-toggle` est présent dans le HTML mais masqué par CSS sur desktop.

JS :

**Redondance / Conflit potentiel :** Il y a deux implémentations de recherche : `performSearch` (dans le script principal) et `doSearch` (chargée via Fuse.js). La fonction `openSearch()` appelle `doSearch`. `performSearch` semble inutilisée. Il faut consolider.
**Gestion du hash après landing :** La fonction `showSite()` ne gère pas la persistance du hash de l'URL. Si l'utilisateur arrive sur `index.html#programme`, le site s'affiche mais défile au top, ignorant l'ancre.
**`renderSpeakers()` :** Ajoute `reveal visible` directement. Le `visible` devrait être géré uniquement par l'IntersectionObserver pour une animation correcte.
**`setTheme()` :** La `themeMap` pour `classique`, `strasbourg`, `moderne` est présente mais les `data-pill` des `theme-pill` utilisent `nuit`, `republique`, `europe`, `institutionnel`, `eau`. C'est une légère incohérence de nommage entre la demande initiale et l'implémentation, mais l'implémentation est plus riche.
**Feedback Widget :** L'envoi direct par `mailto:` est techniquement fonctionnel mais présente des limites (pas de suivi côté serveur, dépend du client mail, risque de spam). Pour un événement de cette envergure, une solution backend serait plus robuste.

CSS :

**Inline CSS :** Le bloc `