/* Style for the separator */
 .separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

/* Line before the word */
.separator::before,
.separator::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #000; /* Line style */
}

/* Spacing for the word */
.separator::before {
    margin-right: 10px;
}

.separator::after {
    margin-left: 10px;
}


.custom-hr {
    display: flex;
    align-items: center;
    text-align: center;
    color: #333; /* Couleur du texte */
    margin: 20px 0;
  }
  
  .custom-hr::before,
  .custom-hr::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ccc; /* Couleur de la ligne */
    margin: 0 10px;
  }
  
  .custom-hr span {
    padding: 0 10px; /* Espace autour du texte */
    font-weight: bold;
    color: #333; /* Couleur du texte */
    background-color: #fff; /* Fond du texte */
  }

/*bootstrap color selector */
#target {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}
/* Style pour les échantillons de couleurs */
.color-swatch {
    width: 40px;
    height: 40px;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border 0.3s;
}
.color-swatch.selected {
    border: 2px solid #000;
}

.color-swatch:hover {
    transform: scale(1.1);
    opacity: 0.8;
}