/* === STYLES SPÉCIFIQUES TEXTES À TROUS - PRIORITÉ MAXIMALE === */

/* Conteneur principal */
.tat-exercise {
    background: #f8f9fa !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 8px !important;
    padding: 25px !important;
    margin: 20px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    box-sizing: border-box !important;
}

/* Zone de contenu */
.tat-exercise .tat-content {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #2c3338 !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
    background: white !important;
    border-radius: 6px !important;
    border: 1px solid #e1e1e1 !important;
    box-sizing: border-box !important;
}

/* Ligne de texte - INLINE FORCÉ */
.tat-exercise .tat-content .tat-text-line {
    display: block !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.6 !important;
}

/* NEUTRALISATION COMPLÈTE Elementor/Gutenberg */
.tat-exercise .tat-content .tat-text-line br {
    display: none !important;
    content: ' ' !important;
}

.tat-exercise .tat-content .tat-text-line p,
.tat-exercise .tat-content .tat-text-line div {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Inputs de réponse - TAILLE DYNAMIQUE CALCULÉE PAR PHP */
.tat-exercise .tat-content .tat-text-line .tat-input {
    background: #ffffff !important;
    border: 2px solid #72aee6 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin: 0 4px !important;
    font-size: 16px !important;
    color: #2c3338 !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    display: inline-block !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    height: 42px !important;
    line-height: normal !important;
    font-family: inherit !important;
    /* Les dimensions width sont définies inline par PHP */
}

.tat-exercise .tat-content .tat-text-line .tat-input:focus {
    outline: none !important;
    border-color: #007cba !important;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1) !important;
}

.tat-exercise .tat-content .tat-text-line .tat-input.correct {
    background: #f0f9f4 !important;
    border-color: #00a32a !important;
    color: #00a32a !important;
}

.tat-exercise .tat-content .tat-text-line .tat-input.incorrect {
    background: #fcf0f1 !important;
    border-color: #d63638 !important;
    color: #d63638 !important;
}

/* Actions */
.tat-exercise .tat-actions {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
    flex-wrap: wrap !important;
}





.tat-exercise .tat-actions .tat-reset-btn {
    background: #f6f7f7 !important;
    color: #2c3338 !important;
    border: 1px solid #dcdcde !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.tat-exercise .tat-actions .tat-reset-btn:hover {
    background: #f0f0f1 !important;
    border-color: #8c8f94 !important;
}

/* Résultats */
.tat-exercise .tat-results {
    padding: 15px !important;
    border-radius: 6px !important;
    background: white !important;
    border: 1px solid #e1e1e1 !important;
    box-sizing: border-box !important;
}

.tat-exercise .tat-results .tat-score {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    color: #2c3338 !important;
    padding: 10px !important;
    border-radius: 4px !important;
    background: #f8f9fa !important;
    text-align: center !important;
}

.tat-exercise .tat-results .tat-score.good {
    color: #00a32a !important;
    background: #f0f9f4 !important;
    border: 1px solid #00a32a !important;
}

.tat-exercise .tat-results .tat-score.average {
    color: #dba617 !important;
    background: #fef8ee !important;
    border: 1px solid #dba617 !important;
}

.tat-exercise .tat-results .tat-score.poor {
    color: #d63638 !important;
    background: #fcf0f1 !important;
    border: 1px solid #d63638 !important;
}

.tat-exercise .tat-results .tat-feedback {
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}

.tat-exercise .tat-results .tat-feedback.correct {
    background: #f0f9f4 !important;
    border-left: 4px solid #00a32a !important;
    color: #1e4c2e !important;
}

.tat-exercise .tat-results .tat-feedback.incorrect {
    background: #fcf0f1 !important;
    border-left: 4px solid #d63638 !important;
    color: #691c1c !important;
}

.tat-exercise .tat-results .tat-feedback .tat-feedback-item {
    margin-bottom: 6px !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.7) !important;
}

.tat-exercise .tat-results .tat-feedback .tat-feedback-item:last-child {
    margin-bottom: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .tat-exercise {
        padding: 15px !important;
    }
    
    .tat-exercise .tat-actions {
        flex-direction: column !important;
    }
    
    .tat-exercise .tat-actions .tat-check-btn,
    .tat-exercise .tat-actions .tat-reset-btn {
        width: 100% !important;
    }
    
    .tat-exercise .tat-content .tat-text-line .tat-input {
        margin: 2px !important;
        padding: 6px 8px !important;
        font-size: 14px !important;
        height: 36px !important;
    }
    
    .tat-exercise .tat-content {
        font-size: 14px !important;
        padding: 10px !important;
    }
}

/* === Auto-width inputs based on expected characters (non-destructive append) === */
.tat-exercise .tat-content .tat-text-line .tat-input,
.tat-exercise .tat-content .tat-text-line input[type="text"].tat-input {
  width: clamp(6ch, calc(var(--len, 6) * 1ch + 2rem), 48ch) !important;
  max-width: 100%;
  box-sizing: content-box;
}
/* Fallback selector if the class differs */
.tat-exercise .tat-content .tat-text-line input[type="text"] {
  width: clamp(6ch, calc(var(--len, 6) * 1ch + 2rem), 48ch) !important;
  max-width: 100%;
  box-sizing: content-box;
}


/* === VerbaBros Blue — canonical rules for .tat-check-btn === */
.tat-exercise .tat-actions .tat-check-btn {
    background: #1A73D9 !important;       /* Bleu VerbaBros */
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.tat-exercise .tat-actions .tat-check-btn:hover {
    background: #1A73D9 !important;       /* Même couleur au survol */
    transform: translateY(-1px) !important;
}