.bazar-cards-container .bazar-card {
  border: 3px solid var(--primary-color); /* couleur et épaisseur de bordure de la carte (card), on peut mettre directement le code couleur #ee0022 au lieu de var(--variable-de-la-couleur) */
  background-color:  var(--secondary-color-1); /* couleur du fond de la carte (card) */
}

/* titre de la card */
.bazar-cards-container .bazar-card .title {
	color:var(--primary-color); /* couleur du texte */
}

/* sous-titre / description de la card */
.bazar-cards-container .bazar-card .subtitle-area { 
	color:var(--secondary-color-2); /* couleur du texte */
}


.bazar-cards-container .bazar-card:hover, /* au survol */
.bazar-cards-container .bazar-card:active, /* au clic ou toucher sur tel. portable */
.bazar-cards-container .bazar-card:focus /* a la navigation par touche Tab, accessibilité */
{
  border: 3px solid var(--secondary-color-1); /* couleur et épaisseur de bordure de la carte (card), on peut mettre directement le code couleur #ee0022 au lieu de var(--variable-de-la-couleur) */
  background-color:  var(--secondary-color-2); /* couleur du fond de la carte (card) */
}
/* titre de la card au survol */
.bazar-cards-container .bazar-card:hover .title,
.bazar-cards-container .bazar-card:active .title,
.bazar-cards-container .bazar-card:focus .title
{
	color:var(--secondary-color-1); /* couleur du texte */
}

/* sous-titre / description de la card au survol */
.bazar-cards-container .bazar-card:hover .subtitle-area,
.bazar-cards-container .bazar-card:active .subtitle-area,
.bazar-cards-container .bazar-card:focus .subtitle-area { 
	color:var(--secondary-color-1); /* couleur du texte */
}

.bazar-cards-container .bazar-card .visual-area {
  border-bottom: none; /* on cache une bordure de séparation blanche entre l'image et le bas de la carte */
}