/*========================================
  Styles généraux pour toutes les listes
========================================*/
.dbl-cc-list {
  list-style: none;           /* on enlève les puces natives */
  margin: 1em 0;              /* espace au-dessus et en-dessous */
  padding: 0;                 
  display: flex;              /* on aligne verticalement */
  flex-direction: column;
  gap: 4px;                /* espacement entre les <li> */
}

.dbl-cc-list li {
  position: relative;
  padding-left: 1.5em;        /* place la puce custom */
  font-size: 1em;
  line-height: 1.4;
}

.dbl-cc-list li a {
  text-decoration: none;
  font-size:16px;
  transition: color .2s;
  font-family: "Roboto", Sans-serif;
  font-weight:500;
}

.dbl-cc-list li a:hover {
  text-decoration: underline;
}

/*========================================
  Puce custom pour tous les <li>
========================================*/
.dbl-cc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background-color: currentColor; /* reprend la couleur du parent */
}

/*========================================
  Variantes de couleur par type de liste
========================================*/
/* Verbes en vert */
.dbl-list-verbs {
  /* si besoin, un fond léger :
     background-color: rgba(61, 189, 125, .05);
     padding: .75em; border-radius: 4px;
  */
}
.dbl-list-verbs li {
  color: #3DBD7D;
}

/* Synonymes en violet */
.dbl-list-synonyms {
  /* background-color: rgba(166, 93, 231, .05); */
  /* padding: .75em; border-radius: 4px; */
}
.dbl-list-synonyms li {
  color: #A65DE7;
}

/* Quiz en bleu */
.dbl-list-quiz {
  /* background-color: rgba(41, 182, 246, .05); */
  /* padding: .75em; border-radius: 4px; */
}
.dbl-list-quiz li {
  color: #29B6F6;
}

.dbl-cc-list.dbl-list-synonyms, .dbl-cc-list.dbl-list-verbs {
	/* On passe en grid pour gérer les colonnes */
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 4px;        /* espace entre lignes */
  column-gap: 16px;    /* espace entre colonnes */
}