Design et pédagogie du site BIA

Ce site de préparation au Brevet d'Initiation Aéronautique a été conçu avec une attention particulière portée à la lisibilité, à la cohérence visuelle et à l'efficacité pédagogique. Cette page détaille les choix de design qui structurent l'expérience d'apprentissage.

1. Philosophie générale

Le design du site repose sur trois principes fondateurs :

1. Rationalité géométrique — inspirée du Bauhaus et de l'esthétique aéronautique (instruments de bord, cadrans, lettrage technique). Pas de décorations superflues : chaque élément visuel a une fonction. Pas de border-radius (0 partout) — angles droits stricts. Ombres minimales pour une profondeur subtile sans distraction.
2. Progression pédagogique visible — l'organisation en modules, niveaux et barres KPI permet à l'élève de situer sa progression à tout moment.
3. Lisibilité sur tout écran — du smartphone au tableau interactif de la salle de classe, le contenu reste lisible et structuré grâce à une échelle typographique responsive.

2. Polices de caractères

Choix des familles

Deux polices Google Fonts ont été sélectionnées pour leur complémentarité :

Outfit est une police géométrique variable conçue par Rodrigo Fuenzalida. Ses formes rondes et rationnelles s'inscrivent dans la tradition du Bauhaus tout en offrant des terminaisons douces qui la rendent chaleureuse aux petites tailles. Elle est utilisée pour tous les titres, la navigation, les badges et les barres KPI.

Lexend a été conçue par Bonnie Shaver-Troup, chercheuse en éducation, avec un objectif précis : améliorer la vitesse et la compréhension de lecture. Ses caractéristiques — espacement optimisé, formes ouvertes, bonne discrimination I/l/1 et O/0 — en font un choix idéal pour un contenu pédagogique lu sur écran.

Échelle typographique

Les tailles de police sont définies comme variables CSS avec une cascade responsive sur 4 points de rupture. Ce système garantit la cohérence visuelle et permet une seule source de vérité pour toute la typographie du site.

3. Palette de couleurs

Couleurs institutionnelles

La palette s'ancre dans l'identité du LFIP (Lycée Français International de Pékin) et dans les codes visuels de l'aéronautique — bleu marine (ciel nocturne, instruments), blanc (fuselage), accents vifs (signalétique).

Couleurs des niveaux d'apprentissage

Chaque cours est structuré en niveaux de difficulté, chacun associé à une couleur sémantique constante sur tout le site. Les trois premiers niveaux correspondent aux paliers pédagogiques (fondamental, approfondi, expert). Les niveaux 4 et 5 identifient les parties supplémentaires du cours (Partie 4 et Partie 5 — Espace) :

Ce code couleur est repris dans les titres de section, les cartes de compétences sur les pages d'index de module, et les quiz associés. L'élève apprend rapidement à reconnaître visuellement le niveau de difficulté d'un contenu. Les variables correspondantes sont --color-level-1 à --color-level-5, définies dans le :root de base.css.

Thème de code — Dracula

Les blocs de code utilisent une variante du thème Dracula, optimisé pour la lisibilité technique :

4. Architecture pédagogique

Découpage en modules

Le site suit fidèlement les cinq modules du programme officiel du BIA (arrêté du 19 février 2015), auxquels s'ajoutent les modules d'annales et de vocabulaire anglais aéronautique :

Structure de chaque module

Chaque module suit un schéma pédagogique identique pour créer des repères stables chez l'élève :

1. Page d'index — vue d'ensemble avec barre KPI (nombre de cours, QCU, durée, points), description, prérequis, source officielle, et grille de cartes vers les sous-pages.
2. Cours — contenu structuré en 3 niveaux (fondamental, approfondi, expert) avec navigation ancré via la barre « Programme et plan du cours ».
3. Quiz fondamental & approfondi — QCU interactifs avec correction immédiate et renvoi vers les sections de cours correspondantes.
4. Travaux dirigés — exercices pratiques complémentaires.
5. Bibliographie — ressources, vidéos et liens utiles.

Barres KPI

Chaque page d'index de module affiche une barre KPI normalisée avec 6 indicateurs (Cours, TD, Parties, QCU, Durée, Points). Sur les pages de cours, une barre de navigation à 4 items permet d'accéder directement aux différentes parties du cours. Ce système offre une vue synthétique avant d'entrer dans le contenu détaillé.

5. Choix techniques

Astro — générateur de site statique

Le site est construit avec Astro (v5), un générateur de sites statiques qui produit du HTML pur sans framework JavaScript côté client. Avantages :

• Performance — pages pré-rendues, chargement quasi instantané.
• Accessibilité — HTML sémantique natif, utilisable sans JS.
• Hébergement simple — GitHub Pages, gratuit et fiable.

Responsive design

Le site utilise 4 points de rupture (breakpoints) pour s'adapter à tous les écrans :

Accessibilité

• Contrastes couleur conformes WCAG AA sur tous les textes.
• Focus visible sur tous les éléments interactifs (outline 3px).
• Navigation au clavier complète.
• Police Lexend — conçue pour réduire le stress visuel en lecture.
• Carrousel horizontal sur la page d'accueil — parcours visuel des modules, auto-scroll au survol, navigation clavier incluse.

Typographie et mise en forme

• Texte justifié (text-align: justify) au niveau du conteneur parent — les enfants en héritent. Remplacement par text-align: left uniquement sur les titres, tableaux et blocs monospace.
• text-wrap: pretty pour équilibrer les lignes (supportée par tous les navigateurs modernes depuis 2024 ; à utiliser en amélioration progressive de façon à conserver un rendu correct sans elle). Jamais de hyphens: auto — pas de césures.

6. Mode sombre

Le site propose un mode sombre activable via le bouton  /  de la barre de navigation. Le symbole du soleil (géométrique) apparaît en mode clair, et le croissant de lune en mode sombre. Le thème est persisté dans localStorage et respecte la préférence système (prefers-color-scheme) au premier chargement.

Palette sombre

Principes d'adaptation

• Surfaces étagées — trois niveaux de gris-bleu (--dm-bg, --dm-surface, --dm-surface-hi) créent la profondeur sans ombres agressives.
• Texte à contraste calibré — le texte principal (#e2e8f0) atteint un ratio WCAG AA de 11:1 sur le fond sombre. Le texte secondaire (#94a3b8) reste à 5,5:1.
• Hover vert émeraude — les effets de survol rouges du mode clair sont remplacés par un halo vert émeraude (#10b981) en mode sombre, plus reposant pour les yeux et cohérent avec la palette nocturne.

Adaptation des couleurs de modules

En mode sombre, les fonds des badges de modules (planning, index) sont foncés pour garantir un contraste WCAG AA (≥ 4,5:1) avec le texte blanc :

Le badge MET (météorologie) conserve son fond jaune #FFBD0A mais inverse le texte en sombre (--dm-surface-strong) pour maintenir le contraste. Ces surcharges sont définies dans docs-planning.css sous html[data-theme="dark"].

Symboles de contrôle — esthétique Bauhaus

Le bouton de bascule clair/sombre dans la barre de navigation utilise deux icônes SVG purement géométriques, dessinées dans l'esprit Bauhaus :

Soleil : cercle plein + huit barres rectangulaires (quatre cardinales + quatre diagonales). Lune : un cercle plein découpé par un second cercle en masque SVG — la technique géométrique pure de « cercle moins cercle » crée le croissant. Pas de courbes de Bézier, pas d'emoji : uniquement des primitives géométriques.