#16 Pseudo-éléments et pseudo-classes

/* Ajouter du contenu décoratif avant un élément */
.citation::before {
  content: "\201C";
  font-size: 3rem;
  color: #3b82f6;
}

/* Astérisque obligatoire après les labels */
.obligatoire::after {
  content: " *";
  color: #ef4444;
}

/* Ligne décorative sous un titre */
h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #3b82f6;
  margin-top: 8px;
}

/* Première ligne du texte */
p::first-line {
  font-weight: bold;
}

/* Première lettre */
p::first-letter {
  font-size: 3rem;
  float: left;
  color: #3b82f6;
}

/* Texte sélectionné */
::selection {
  background: #3b82f6;
  color: white;
}

/* Texte placeholder */
input::placeholder {
  color: #9b9baa;
  font-style: italic;
}

a:hover { color: #3b82f6; }
.button:active { transform: scale(0.98); }

input:focus {
  border-color: #3b82f6;
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

input:required { border-left: 3px solid #3b82f6; }
input:valid { border-color: #10b981; }
input:invalid { border-color: #ef4444; }

li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }

tr:nth-child(even) { background: #f5f5f5; }  /* Lignes zébrées */

p:not(:last-child) { margin-bottom: 1em; }