États interactifs

📋 Pseudo-classes essentielles

Pseudo-classe	Quand ?	Usage
:hover	Survol souris	Effets visuels
:focus	Focus clavier (Tab)	Accessibilité
:active	Click en cours	Feedback visuel
:visited	Lien déjà visité	Liens uniquement
:disabled	Élément désactivé	Formulaires

---

🎯 :hover - Survol

/* Lien */
a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Bouton */
.button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

/* Carte */
.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Image */
.image:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

---

♿ :focus - Focus (IMPORTANT)

Essentiel pour l’accessibilité ! Navigation au clavier.

/* Liens et boutons */
a:focus,
button:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Champs de formulaire */
input:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
}

/* Retirer outline par défaut (mais remplacer !) */
button:focus {
  outline: none; /* ⚠️ Toujours fournir une alternative */
  box-shadow: 0 0 0 3px var(--color-primary);
}

⚠️ Ne JAMAIS faire :

*:focus {
  outline: none; /* ❌ Rend le site inaccessible */
}

---

👆 :active - Click actif

.button:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.card:active {
  transform: translateY(0);
}

---

🔗 Ordre pour les liens (LVHA)

Ordre important : L-V-H-A

/* L */ink - Lien normal */
a:link {
  color: blue;
}

/* V */isited - Lien visité */
a:visited {
  color: purple;
}

/* H */over - Survol */
a:hover {
  color: red;
}

/* A */ctive - Click */
a:active {
  color: darkred;
}

---

💡 Exemples pratiques

Bouton complet

.btn {
  background: var(--color-primary);
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

Lien avec soulignement animé

.link {
  position: relative;
  color: var(--color-text);
  text-decoration: none;
}

.link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.link:hover::after,
.link:focus::after {
  width: 100%;
}

Carte interactive

.card {
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.card:focus-within {
  border-color: var(--color-primary);
}

---

🎯 Pseudo-classes avancées

:focus-within

Style un parent quand un enfant a le focus.

/* Formulaire avec un champ focus */
.form:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

:focus-visible

Focus visible uniquement au clavier (pas au click).

button:focus-visible {
  outline: 2px solid var(--color-primary);
}

button:focus:not(:focus-visible) {
  outline: none;
}

:disabled

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #ccc;
}

input:disabled {
  background: #f5f5f5;
  color: #999;
}

:checked (Checkboxes/Radio)

input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

---

📱 États sur mobile

Sur mobile, :hover ne fonctionne pas vraiment. Préférez :active ou JavaScript.

/* Desktop */
@media (hover: hover) {
  .button:hover {
    background: var(--color-primary-dark);
  }
}

/* Mobile (touch) */
@media (hover: none) {
  .button:active {
    background: var(--color-primary-dark);
  }
}

---

⚠️ Checklist accessibilité

✅ À faire :

• Tous les éléments focusables ont un :focus visible
• L’ordre des pseudo-classes est correct (LVHA)
• Les boutons disabled sont visuellement distincts
• Les états sont testables au clavier (Tab, Enter, Espace)

❌ À éviter :

• outline: none sans alternative
• États visibles uniquement à la souris
• Contrastes insuffisants dans les états

---

🧪 Testez au clavier

1. Tab : Naviguer entre éléments focusables
2. Shift + Tab : Naviguer en arrière
3. Enter : Activer un lien/bouton
4. Espace : Activer un bouton/checkbox

<button class="test-btn">Testez-moi au clavier</button>

<style>
.test-btn {
  padding: 1rem 2rem;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.test-btn:hover {
  background: #5568d3;
  transform: translateY(-2px);
}

.test-btn:focus {
  outline: 3px solid #ffd700;
  outline-offset: 2px;
}

.test-btn:active {
  transform: translateY(0);
  background: #4451b0;
}
</style>

---