Défi : la navbar parfaite

🎯 Objectif

Le grand final du module : la barre de navigation complète du FC Courtételle, sans exemple sous les yeux. Logo à gauche, menu à droite, tout aligné au millimètre.

📝 Consigne

Le HTML est figé, n'y touche pas. Tout se passe dans l'onglet CSS, trois règles à écrire :

1. La règle .entete — six déclarations :
   • le mode flexible
   • la répartition qui colle le logo à gauche et le menu à droite
   • la répartition qui centre tout le monde à la verticale
   • une hauteur de 72 pixels
   • l'air intérieur en deux valeurs : rien en haut et en bas, 24 pixels à gauche et à droite
   • le fond blanc cassé #f5f5f4
2. La règle .logo — une seule déclaration : l'espace extérieur remis à zéro sur les quatre côtés (le navigateur en pose tout seul sur un paragraphe, souviens-toi du module 8)
3. La règle .menu ul — cinq déclarations :
   • le mode flexible, pour que les trois liens passent en rangée
   • 24 pixels d'espace entre les liens, posés sur le conteneur
   • les puces supprimées
   • l'espace extérieur remis à zéro
   • l'air intérieur remis à zéro

Il y a un piège, et c'est le rappel de l'exercice 7.1 : Flexbox ne descend que d'un étage — il te faut donc deux conteneurs flex, pas un. Le menu joue les deux rôles à la fois : enfant du premier, parent du second. Vérifie l'aperçu après chaque règle : trois règles d'un coup, et tu ne sauras plus laquelle bloque.

♿ Trois détails valent leur pesant d'or ici. D'abord, le menu est dans un <nav> : les lecteurs d'écran proposent de sauter directement à la navigation, mais seulement si elle est là. Ensuite, supprimer les puces les retire à l'œil — le fait que ce soit une liste de liens, lui, reste dans le HTML, et c'est ce qui permet d'annoncer « liste de 3 éléments ». Enfin, les 24 pixels entre les liens séparent les cibles tactiles : trois liens collés, et le doigt clique de travers.