/* 1) HERITAGE : on définit des styles sur le parent (body) */
body {
  font-family: Arial, sans-serif;
  color: #222;                 /* Hérité par les enfants */
}

/* 2) Ce n'est PAS hérité : background/border/padding */
.card {
  background: #c0b9b9;
  border: 2px solid black;
  padding: 12px;
}

/* 3) Spécificité faible : sélecteur par balise */
a {
  color: blue;
}

/* 4) Spécificité plus forte : class */
.link {
  color: purple;               /* gagne contre "a { }" */
}

/* 5) Spécificité encore plus forte : class + class (élément qui a les 2) */
.link.ext {
  color: green;                /* gagne contre ".link" */
}

/* 6) Attribut (même niveau que class) : cible les liens externes */
a[target="_blank"] {
  text-decoration: underline;
}

/* 7) ID : très fort */
#main {
  color: red;                  /* ce paragraphe devient rouge */
}

/* 8) Descendant + class : plus spécifique que ".btn" seul */
.card .btn {
  color: inherit;              /* force le bouton à hériter la couleur du parent */
  font-family: inherit;        /* force à hériter la police */
  padding: 6px 10px;
}

/* 9) Même spécificité que ".link" → l'ordre décide (la règle la plus basse gagne) */
.link {
  color: orange;               /* gagne contre ".link { color: purple; }" plus haut */
}