.tfj-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.screen-instruction.mini-margin {
    text-align: center;
    margin: 0.5rem auto 1.5rem auto;
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 90%;
}

.tfj-questions-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.tfj-item {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-100);
}

.tfj-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.tfj-question-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-800);
}

/* --- TOGGLE V/F --- */
.tfj-segmented-control {
    display: flex;
    position: relative;
    background: var(--gray-100);
    border-radius: 8px;
    width: 100px;
    height: 32px;
    flex-shrink: 0;
}

.tfj-segmented-control input { display: none; }

.tfj-segmented-control label {
    flex: 1;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
    z-index: 2;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--gray-400);
    transition: all 0.2s;
    border-radius: 6px;
}

.tfj-segmented-control input:checked + label { color: white; }

.tfj-slider {
    position: absolute;
    top: 2px; left: 2px;
    width: calc(50% - 2px);
    height: calc(100% - 4px);
    border-right: 2px solid var(--primary);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.tfj-segmented-control input[value="Faux"]:checked ~ .tfj-slider { 
    transform: translateX(100%); 
    background: var(--primary);
    border-radius: 6px;
    border: none;
}



.tfj-segmented-control input[value="Vrai"]:checked ~ .tfj-slider { 
    transform: translateX(0);
    background: var(--primary);
    border-radius: 6px;
    border: none;
}

span.tfj-justif-text {
    font-size: 0.9rem;
}

/* --- MÉCANISME DE COULEURS BOUTONS V/F --- */

/* Cas où le choix Vrai/Faux est correct (peu importe la justif) */
.tfj-item.tf-correct .tfj-slider {
    background-color: var(--success) !important;
}

/* Cas où le choix Vrai/Faux est faux (peu importe la justif) */
.tfj-item.tf-incorrect .tfj-slider {
    background-color: var(--error) !important;
    border:none;
    border-radius: 6px;
}

/* Cas où le choix Vrai/Faux est omis (hint orange-light) */
.tfj-item.tf-omitted .tfj-slider {
    background-color: var(--orange-light) !important;
    border: none;
    border-radius: 6px;
}

.tfj-item.tf-omitted .tfj-segmented-control input:checked + label {
    color: var(--gray-500)
}

.tfj-justifs-wrapper {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    padding-left: 1.5rem;
}

.tfj-justifs-wrapper.open {
    max-height: 600px;
    opacity: 1;
    margin-top: 0.75rem;
}

.tfj-justif-group {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-bottom: 0.4rem;
    background: white;
}

/* Nettoyage : cacher les mauvaises réponses non choisies */
.tfj-item.evaluated .hidden-distractor { display: none !important; }
/* 
.tfj-item.evaluated.tf-incorrect label{
    color: var(--white);
} */

/* Justif choisie est correcte -> Vert */
.tfj-justif-group.correct {
    border-color: var(--success) !important;
    background-color: var(--success-light) !important;
}

/* Justif choisie est fausse -> Rouge */
.tfj-justif-group.incorrect {
    border-color: var(--error) !important;
    background-color: var(--error-light) !important;
}

/* Justif attendue (révélée) -> Orange */
.tfj-justif-group.actual-correct {
    border-color: var(--orange) !important;
    background-color: var(--orange-light) !important;
}