Défi : la page du festival

🎯 Objectif

Le grand final : la page complète de Rock'Air. Conteneur centré, en-tête collant au premier plan, badge épinglé, boutons vivants — tout ce que tu as appris depuis le module 8, sans exemple sous les yeux.

📝 Consigne

Le HTML est figé, l'habillage est déjà écrit. Il manque la mise en page : six règles, dans l'onglet CSS, dans cet ordre — et vérifie l'aperçu après chacune :

1. .page — deux déclarations : plafonne la largeur à 800 pixels, puis partage la place restante à parts égales des deux côtés (exercice 8.2).
2. .entete — six déclarations : le mode flexible, la répartition qui envoie le logo à gauche et le menu à droite, celle qui centre tout le monde à la verticale (module 9) ; puis le placement collant, son point d'accroche à zéro et l'ordre d'empilement à 10 (exercices 8.4 et 8.5).
3. .menu ul — une nouvelle règle, cinq déclarations : le mode flexible, 24 pixels d'espace entre les liens, les puces supprimées, l'espace extérieur et l'air intérieur remis à zéro (défi 7.6).
4. .carte — la déclaration qui fait de la carte le repère de son badge, sans la déplacer (exercice 8.3).
5. .badge — trois déclarations : le placement qui l'épingle hors du flux, puis 8 pixels du haut et 8 pixels de la droite (exercice 8.3).
6. Une dernière règle, tout en bas : les deux états du bouton — survol et focus, séparés par une virgule — avec le fond qui passe en #eab308 (exercice 8.1).

Le plafond de 800 pixels ne se voit pas ? C'est la preuve qu'il travaille : l'aperçu est plus étroit que 800, le bloc rétrécit donc pour tenir dedans — exactement comme sur un téléphone, souviens-toi de 8.2. Pour le voir agir, masque les instructions ou tire la séparation vers la gauche : le bloc s'arrêtera à 800 et se centrera sur le gris. Cette fois, tu écris la vraie valeur d'un vrai site.

Un mot d'honnêteté, le dernier du module : la checklist relit ton code et mesure les styles calculés, mais elle ne survole rien et ne fait rien défiler. Le survol des boutons et l'en-tête qui colle, c'est dans l'aperçu que ça se prouve — dix secondes de vérification à l'œil, comme le ferait n'importe quel professionnel avant de livrer.

♿ Trois détails valent de l'or ici. Le menu vit dans un <nav> : les lecteurs d'écran proposent d'y sauter directement. Les 24 pixels d'espace séparent les cibles tactiles, pour que le doigt ne clique pas de travers. Et le focus des boutons, ajouté en huit caractères, rend toute la billetterie utilisable sans souris. Une page pro, ce n'est pas une page qui en jette : c'est une page dont personne n'est exclu.