Section 2

Spécifications Fonctionnelles Front-Office

Plateforme CMA France - Interface utilisateur et processus d'inscription TAXI/VTC/VMDTR

Spécifications complètes : Architecture Front-Office de la plateforme CMA France avec 5 pages principales interconnectées

Vue d'Ensemble Front-Office

Le Front-Office de la plateforme CMA France est organisé autour de 5 pages principales offrant une expérience utilisateur complète et fluide pour les candidats aux examens professionnels TAXI, VTC et VMDTR.

2.1. Page d'Accueil

Structure Schématique Complète

Architecture détaillée de la page d'accueil avec ses 6 sections principales organisées pour guider le candidat vers l'inscription.

Voir les détails

2.2. Page Inscription

Processus en 5 Étapes

Workflow structuré d'inscription avec validation progressive, upload de documents et paiement sécurisé.

Voir les détails

2.3. Mon Espace

Dashboard Candidat

Interface personnelle avec 5 onglets pour la gestion complète du dossier candidat et suivi temps réel.

Voir les détails

2.4. Page Informations

Centre de Ressources

Centralisation des ressources, guides, FAQ et informations pratiques avec recherche avancée.

Voir les détails

2.5. Page Contact

Support Complet

Support multicanal avec chat, téléphone, email et système de tickets pour un accompagnement optimal.

Voir les détails

Spécifications Techniques Générales

Le Front-Office est développé selon les standards modernes du web avec une attention particulière portée à l'expérience utilisateur, l'accessibilité et la performance.

Technologies Utilisées

  • • Framework CSS : Bootstrap 5.3.0
  • • Icônes : Font Awesome 6.4.0
  • • Polices : Roboto Slab + Montserrat (Google Fonts)
  • • Éditeur d'images : Cropper.js 1.6.1 intégré
  • • JavaScript : Vanilla JS + modules personnalisés

Système de Couleurs CMA

  • • Variable CSS : --couleur-principale
  • • Classes boutons : btn-cma, btn-blanc, btn-rouge
  • • Thèmes : Système de thème personnalisable
  • • Icônes couleurs : Différenciation par type d'examen
  • • États visuels : Hover, focus, active states

Responsive Design et Accessibilité

Breakpoints Responsive
  • • Mobile : < 768px (col-12, stacked layout)
  • • Tablet : 768px+ (col-md-4, col-md-6)
  • • Desktop : 992px+ (col-lg-4, full layout)
  • • Container : Bootstrap container responsive
Accessibilité RGAA
  • • ARIA labels : aria-labelledby, aria-hidden
  • • Navigation clavier : tabindex et focus
  • • Contraste : Respect des ratios WCAG AA
  • • Textes alternatifs : Alt text pour icônes

Parcours Utilisateur

L'architecture Front-Office suit un parcours utilisateur logique et progressif :

Workflow Utilisateur Complet

1
Découverte

Page d'Accueil

2
Information

Page Informations

3
Inscription

Page Inscription

4
Suivi

Mon Espace

5
Support

Page Contact

Architecture Front-Office Complète : 5 pages principales interconnectées offrant une expérience utilisateur fluide et complète, de l'information initiale jusqu'au suivi post-examen, avec support multicanal intégré.