/* 0) Sélecteur universel */
* {
  box-sizing: border-box;
}

/* 1) Sélecteur par balise (type) */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 16px;
}

/* 2) Sélecteur par id */
#top {
  border: 2px solid black;
  padding: 12px;
  margin-bottom: 16px;
}

/* 3) Sélecteur par class */
.section {
  background: #f5f5f5;
  margin-bottom: 16px;
  padding: 12px;
}

/* 4) Sélecteurs groupés */
h1, h2, h3 {
  margin: 0 0 8px 0;
}

/* 5) Descendant : .menu a = tous les <a> dans .menu */
.menu a {
  margin-right: 12px;
  text-decoration: none;
}

/* 6) Classe combinée (élément avec 2 classes) */
.link.ext {
  font-weight: bold;
}

/* 7) Attribut : tous les <a> qui ont target="_blank" */
a[target="_blank"] {
  text-decoration: underline;
}

/* 8) Attribut “commence par” : href qui commence par https */
a[href^="https"] {
  color: green;
}

/* 9) Enfant direct : seulement les li enfants directs de .list */
.list > li {
  padding: 4px 0;
}

/* 10) Pseudo-classe : nth-child */
.list > li:nth-child(odd) {
  background: #e9e9e9;
}

/* 11) Pseudo-classe : cible un élément qui a une class spécifique */
.item.special {
  color: purple;
}

/* 12) :not() exclure */
.item:not(.special) {
  color: #222;
}

/* 13) Sélecteurs de formulaire par attribut */
input[type="text"] {
  border: 2px solid blue;
}

input[type="email"] {
  border: 2px solid orange;
}

/* 14) Pseudo-classe : focus */
input:focus {
  outline: 3px solid black;
}

/* 15) Pseudo-classe : disabled */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 16) Descendant + class */
.form .btn {
  margin-top: 10px;
  padding: 8px 12px;
}

/* 17) Classe combinée .btn.primary */
.btn.primary {
  background: black;
  color: white;
}

/* 18) Pseudo-classe : hover */
.btn:hover {
  transform: scale(1.02);
}

/* 19) Attribut perso (data-*) */
.card[data-role="pro"] {
  border: 2px dashed red;
}

.card[data-role="free"] {
  border: 2px dashed gray;
}

/* 20) Pseudo-élément ::before */
.card-title::before {
  content: "★ ";
}

/* 21) Enfant direct dans un bloc */
.cards > .card {
  padding: 10px;
  margin-bottom: 10px;
}

/* 22) Frère adjacent : p juste après h3.block-title */
.block-title + p {
  color: red;
}

/* 23) Frères suivants : tous les p après h3.block-title */
.block-title ~ p {
  font-style: italic;
}

/* 24) Pseudo-élément ::first-letter */
.subtitle::first-letter {
  font-size: 28px;
  font-weight: bold;
}