.error { color: red; margin: 10px 0; }
.creneau {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}
.box { max-width: 480px; margin: auto; padding: 20px; border: 1px solid #ccc; border-radius: 10px; }
#timer { font-size: 24px; font-weight: bold; margin-top: 10px; }
.text-small { font-size: .7rem; }

.step[data-state="past"]{
    color: var(--bs-info-text-emphasis);

    .step-circle {
        background-color: var(--bs-primary-bg-subtle);
    }
}

.step[data-state="active"]{
    --bs-text-opacity: 1;
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity));

    .step-circle {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
        color: #FFF;
    }
}

.step[data-state="future"]{
    --bs-text-opacity: 1;
    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity));

    .step-circle {
        background-color: var(--bs-secondary-bg-subtle);
    }    
}

.step-circle {
    height: 3em;
    width: 3em;
    line-height: 3em;
}

.step-line {
    top: 1.5em; /* Moitié de la hauteur du cercle */
}