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, style propre à la page — tout ce que tu as appris depuis le module 8, sans exemple sous les yeux.

📝 Consigne

Le HTML est figé, sauf <body> à l'étape 7, et l'habillage est déjà écrit. Il manque la mise en page : sept 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 11.3).
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 10) ; puis le placement collant, son point d'accroche à zéro et l'ordre d'empilement à 10 (exercices 11.5 et 11.6).
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 10.6).
4. .carte — la déclaration qui fait de la carte le repère de son badge, sans la déplacer (exercice 11.4).
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 11.4).
6. Une 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 11.1).
7. La page Programme est la seule du site à teinter ses cartes. Dans l'onglet HTML, pose la classe page-programme sur <body>. Puis, à la fin du CSS, écris une dernière règle qui vise les cartes de cette page seulement, avec le fond #fefce8 (exercice 11.7).

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.