Réagis au survol

🎯 Objectif

Faire réagir un bouton sans une ligne de JavaScript — et le faire réagir pour tout le monde, souris et clavier.

📖 Exemple

Le ciné open air du lac a un bouton de réservation qui répond. Et cette fenêtre d'exemple est vivante : passe la souris sur le bouton, puis clique dans la fenêtre et appuie sur Tab — l'effet se joue sous tes yeux.

<h2>Ciné open air du lac</h2>
<a class="resa" href="reserver.html">Réserver ma place</a>

.resa {
    display: inline-block;
    padding: 12px 20px;
    border: 2px solid #1e293b;
    background-color: #ffffff;
    color: #1e293b;
    text-decoration: none;
    transition: background-color 0.3s;
}

.resa:hover,
.resa:focus {
    background-color: #d45e95;
}

Pourquoi ça marche ? :hover n'est pas un élément, c'est un état. On appelle ça une pseudo-classe : elle s'accroche au sélecteur par deux points, sans espace, et le navigateur fait le reste — règle appliquée quand le curseur entre, retirée quand il sort.

La virgule ajoute :focus au même paquet, et c'est le point pro du module ♿ : au clavier, on ne survole rien, on tabule d'un élément au suivant. Sans :focus, ce visiteur avance à l'aveugle. Huit caractères, et ta page devient utilisable sans souris — jamais de :hover sans son :focus. Quant à transition, posée sur l'état de repos, elle ne décide de rien : elle étale le changement de fond sur trois dixièmes de seconde au lieu de le faire d'un coup. C'est la différence entre un bouton qui clignote et un bouton qui répond.

📝 Consigne

La billetterie de Rock'Air a deux boutons, et ils ne réagissent à rien. Même structure que l'exemple, autres valeurs — dans l'onglet CSS :

1. Dans la règle .billet, ajoute une déclaration transition qui étale le changement de fond sur 0,2 seconde — elle nomme la propriété à étaler, puis la durée.
2. Après .billet, écris une seule règle qui vise les deux états — le survol et le focus, séparés par une virgule — avec une seule déclaration dedans : le fond passe à #eab308.

Petite honnêteté : la checklist ne peut pas survoler ton bouton à ta place — elle vérifie que tes règles sont écrites, rien de plus. La vraie preuve est dans l'aperçu : survole tes boutons, puis appuie sur Tab.