@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
        
        /* Variables CSS */
        :root {
            --primary-color: #00d9ff;
            --primary-dark: #00b8d4;
            --primary-light: #4de5ff;
            --secondary-color: #f7f7f7;
            --background-color: #fafbfc;
            --text-primary: #1a1a1a;
            --text-secondary: #6b7280;
            --success-color: #10b981;
            --success-bg: #d1fae5;
            --error-color: #ef4444;
            --error-bg: #fef2f2;
            --border-color: #e5e7eb;
            --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --border-radius: 12px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        
.interactif-feedback,
.interactif-result {
    display: none; /* Cachés par défaut */
    margin-top: 20px;
    padding: 0px;
    border-radius: 8px;
}
.interactif-show{
    display: block;
}
/* Quand ils doivent être visibles */
.interactif-feedback.visible,
.interactif-result.visible {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}.interactif-submit-btn {
    background-color: #00D9FF;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    margin: 12px 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
}

/* Conteneur principal */
.interactif-btn-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

/* Bouton Valider centré */
.interactif-submit-btn {
    display: block;
    margin: 10px auto;
    order: 1; /* Positionne en premier */
}

/* Conteneur navigation */
.interactif-navigation {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #E0F7FA;
    order: 2; /* Positionne en second */
}

/* Bouton Suivant */
.interactif-next-btn {
    margin-left: auto;
    background-color: #00C4E6;
}

/* Bouton Précédent */
.interactif-prev-btn {
    background-color: #00A3BF;
}

/* États */
.interactif-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 217, 255, 0.3);
}

.interactif-btn:disabled {
    background-color: #B0E6F2;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .interactif-btn {
        width: 100%;
        margin: 8px 0;
    }
    
    .interactif-navigation {
        flex-direction: column;
    }
    
    .interactif-next-btn {
        margin: 8px 0 0 0;
    }
}
/* ===== CONTAINER PRINCIPAL DU FEEDBACK ===== */
.interactif-feedback {
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
    margin: 8px 0;
    font-family: 'Tahoma', Arial, sans-serif;
    direction: inherit;
}

.interactif-feedback.interactif-show {
    display: block;
    opacity: 1;
    animation: fadeInUp 0.4s ease-out;
}

/* Container principal du feedback QCM */
.interactif-qcm-feedback {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin: 0;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-family: 'Tahoma', Arial, sans-serif;

}

/* ===== MESSAGE DE RÉSULTAT PRINCIPAL ===== */
.interactif-result-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    direction: rtl;
    text-align: right;
}

/* Message correct */
.interactif-result-message.correct {
    background: linear-gradient(135deg, #d4edda 0%, #c8e6c9 100%);
    border: 1px solid #10b981;
    color: #155724;
    border-right: 4px solid #10b981;
}

/* Message incorrect */
.interactif-result-message.incorrect {
    background: linear-gradient(135deg, #f8d7da 0%, #ffcdd2 100%);
    border: 1px solid #ef4444;
    color: #721c24;
    border-right: 4px solid #ef4444;
}

/* Icône de résultat */
.interactif-result-icon {
    font-size: 18px;
    font-weight: bold;
    min-width: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.interactif-result-message.correct .interactif-result-icon {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.interactif-result-message.incorrect .interactif-result-icon {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

/* ===== EXPLICATION GÉNÉRALE ===== */
.interactif-general-explanation {
    background: linear-gradient(135deg, #e3f2fd 0%, #e1f5fe 100%);
    border: 1px solid #00d9ff;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-right: 4px solid #00d9ff;
    box-shadow: 0 2px 8px rgba(0, 217, 255, 0.08);
}

.interactif-general-explanation p {
    margin: 0;
    color: #0d47a1;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;

}

.interactif-general-explanation strong {
    color: #1565c0;
    font-weight: 700;
}

/* ===== SECTION DES DÉTAILS DES OPTIONS ===== */
.interactif-options-detail {
    background: white;
    border-radius: 6px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.interactif-options-detail h4 {
    color: #495057;
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #00d9ff;
    display: block;
    text-align: right;
    direction: rtl;
}

.interactif-options-detail h4::before {
    content: "📝 ";
    font-size: 14px;
}

/* Style pour les h4 contenant "undefined" */
.interactif-options-detail h4:contains("undefined") {
    opacity: 0.7;
    font-style: italic;
    color: #6c757d;
}

/* ===== LISTE DES FEEDBACKS ===== */
.interactif-options-feedback {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

/* ===== ITEMS DE FEEDBACK ===== */
.interactif-feedback-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    margin: 0;
    background: #ffffff;
    direction: rtl;
    text-align: right;
}

.interactif-feedback-item::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    transition: all 0.2s ease;
}

/* ===== ÉTATS DES FEEDBACKS ===== */

/* Réponse correcte sélectionnée */
.interactif-feedback-item.correct-selected {
    background: linear-gradient(135deg, #d4edda 0%, #c8e6c9 100%);
    border-color: #10b981;
    color: #155724;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.interactif-feedback-item.correct-selected::before {
    background: #10b981;
}

/* Réponse correcte manquée */
.interactif-feedback-item.correct-missed {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe082 100%);
    border-color: #ffc107;
    color: #856404;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

.interactif-feedback-item.correct-missed::before {
    background: #ffc107;
}

/* Réponse incorrecte sélectionnée */
.interactif-feedback-item.incorrect-selected {
    background: linear-gradient(135deg, #f8d7da 0%, #ffcdd2 100%);
    border-color: #ef4444;
    color: #721c24;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

.interactif-feedback-item.incorrect-selected::before {
    background: #ef4444;
}

/* ===== ICÔNES DE FEEDBACK ===== */
.interactif-feedback-icon {
    font-size: 16px;
    font-weight: bold;
    min-width: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.correct-selected .interactif-feedback-icon {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.correct-missed .interactif-feedback-icon {
    color: #ffc107;
    background: rgba(255, 193, 7, 0.15);
}

.incorrect-selected .interactif-feedback-icon {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

/* ===== TEXTE DE L'OPTION ===== */
.interactif-option-text {
    flex-grow: 1;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    text-align: right;
    direction: rtl;
    font-family: 'Tahoma', 'Arial Unicode MS', Arial, sans-serif;
}

/* ===== STATUT DE L'OPTION ===== */
.interactif-option-status {
    font-size: 10px;
    font-style: italic;
    opacity: 0.6;
    background: rgba(0, 217, 255, 0.08);
    color: #0369a1;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
    margin-right: auto;
    display: inline-block;
    border: 1px solid rgba(0, 217, 255, 0.2);
    transition: all 0.2s ease;
}

.interactif-option-status:hover {
    background: rgba(0, 217, 255, 0.15);
    transform: scale(1.05);
    opacity: 0.8;
}

/* ===== ANIMATION D'EFFET AU HOVER ===== */
.interactif-feedback-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
    transition: width 0.4s ease;
    pointer-events: none;
}

.interactif-feedback-item:hover::after {
    width: 100%;
}

.interactif-feedback-item:hover {
    transform: translateX(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ===== SUPPORT RTL ===== */
[dir="rtl"] .interactif-qcm-feedback,
.interactif-qcm-feedback {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .interactif-result-message,
[dir="rtl"] .interactif-feedback-item {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .interactif-result-message {
    border-left: 4px solid;
    border-right: 1px solid;
}

[dir="rtl"] .interactif-general-explanation {
    border-left: 4px solid #00d9ff;
    border-right: 1px solid #00d9ff;
}

[dir="rtl"] .interactif-feedback-item::before {
    left: 0;
    right: auto;
}

[dir="rtl"] .interactif-feedback-item:hover {
    transform: translateX(2px);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ===== BADGES ET MESSAGES ===== */
.feedback-badge {
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
    margin-right: 3px;
    font-size: 10px;
    background: rgba(0, 217, 255, 0.1);
    color: #0369a1;
    border: 1px solid rgba(0, 217, 255, 0.2);
}

.feedback-message {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;
    background: rgba(0, 217, 255, 0.1);
    color: #0369a1;
    border: 1px solid rgba(0, 217, 255, 0.2);
}

/* ===== FEEDBACKS GÉNÉRAUX ===== */
.feedback, .auto-feedback, .sentence-feedback {
    text-align: center;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    display: none;
    animation: slideInUp 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    font-family: 'Tahoma', Arial, sans-serif;
    direction: rtl;
    text-align: right;
}

.feedback.success, .auto-feedback.success, .sentence-feedback.correct {
    display: block;
    background: linear-gradient(145deg, #10b981, #059669);
    color: white;
    border-right: 4px solid #047857;
}

.feedback.error, .sentence-feedback.incorrect {
    display: block;
    background: linear-gradient(145deg, #ef4444, #dc2626);
    color: white;
    border-right: 4px solid #b91c1c;
}

.feedback.partial, .auto-feedback.partial {
    display: block;
    background: linear-gradient(145deg, #fbbf24, #f59e0b);
    color: white;
    border-right: 4px solid #d97706;
}

/* ===== GESTION DES ÉLÉMENTS "UNDEFINED" ===== */
.interactif-options-detail h4 {
    color: #495057;
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #00d9ff;
    display: block;
    text-align: right;
    direction: rtl;
}

/* Style des éléments de statut visibles */
.interactif-option-status {
    font-size: 10px;
    font-style: italic;
    opacity: 0.6;
    background: rgba(0, 217, 255, 0.08);
    color: #0369a1;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
    margin-right: auto;
    display: inline-block;
    border: 1px solid rgba(0, 217, 255, 0.2);
    transition: all 0.2s ease;
}

.interactif-option-status:hover {
    background: rgba(0, 217, 255, 0.15);
    transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .interactif-qcm-feedback {
        padding: 8px;
    }
    
    .interactif-result-message {
        padding: 6px 8px;
        font-size: 12px;
        margin-bottom: 8px;
        gap: 6px;
    }
    
    .interactif-general-explanation {
        padding: 6px 8px;
        margin-bottom: 8px;
    }
    
    .interactif-general-explanation p {
        font-size: 12px;
    }
    
    .interactif-options-detail {
        padding: 6px 8px;
    }
    
    .interactif-options-detail h4 {
        margin-bottom: 6px;
        font-size: 12px;
        padding-bottom: 2px;
    }
    
    .interactif-options-feedback {
        gap: 4px;
    }
    
    .interactif-feedback-item {
        padding: 6px 8px;
        gap: 6px;
    }
    
    .interactif-result-icon,
    .interactif-feedback-icon {
        width: 18px;
        height: 18px;
        font-size: 14px;
    }
    
    .interactif-option-text {
        font-size: 12px;
    }
    
    .feedback, .auto-feedback, .sentence-feedback {
        padding: 6px 8px;
        font-size: 12px;
        margin-top: 6px;
    }
    
    .interactif-option-status {
        font-size: 9px;
        padding: 1px 4px;
    }
}

/* ===== AMÉLIORATIONS POUR L'ARABE ===== */
.interactif-option-text {
    font-family: 'Tahoma', 'Arial Unicode MS', Arial, sans-serif;
    font-weight: 500;
    line-height: 1.5;
}

/* Support du line-height pour l'arabe */
.interactif-feedback {
    line-height: 1.6;
    word-wrap: break-word;
    max-width: 100%;
}

.interactif-feedback br {
    display: block;
    content: "";
    margin-bottom: 0.3em;
}

/* Effet focus pour l'accessibilité */
.interactif-feedback-item:focus-within {
    outline: 2px solid rgba(0, 217, 255, 0.5);
    outline-offset: 1px;
}

/* ===== STYLES SUPPLÉMENTAIRES POUR COMPATIBILITÉ ===== */

/* Support pour les anciennes classes */
.interactif-word-bank {
    background: #e6f9ff;
    border: 2px solid #00d9ff;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    direction: rtl;
    text-align: right;
}

/* Contenu textuel des feedbacks */
.interactif-feedback-content {
    flex-grow: 1;
    direction: rtl;
    text-align: right;
}

.interactif-feedback-title {
    font-weight: 600;
    margin-bottom: 5px;
    color: #2c3e50;
    font-size: 1.05em;
    text-align: right;
    direction: rtl;
}

.interactif-feedback-desc {
    color: #7f8c8d;
    font-size: 0.92em;
    line-height: 1.5;
    text-align: right;
    direction: rtl;
}

/* Feedback pour les différents types d'options */
.interactif-options-feedback.correct {
    border-right-color: #2ecc71;
    background-color: rgba(46, 204, 113, 0.05);
}

.interactif-options-feedback.correct .interactif-feedback-icon {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.interactif-options-feedback.incorrect {
    border-right-color: #e74c3c;
    background-color: rgba(231, 76, 60, 0.05);
}

.interactif-options-feedback.incorrect .interactif-feedback-icon {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

/* États hover améliorés */
.interactif-feedback-item:hover {
    transform: translateX(2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

/* Support des préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
    .interactif-feedback-item,
    .interactif-result-message,
    .interactif-general-explanation {
        animation: none;
        transition: none;
    }
    
    .interactif-feedback-item:hover {
        transform: none;
    }
}

/* Mode sombre (optionnel) */
@media (prefers-color-scheme: dark) {
    .interactif-qcm-feedback {
        background: #1f2937;
        border-color: #374151;
        color: #f9fafb;
    }
    
    .interactif-feedback-item {
        background: #374151;
        color: #f9fafb;
    }
    
    .interactif-options-detail {
        background: #374151;
        border-color: #4b5563;
    }
}
        .interactif-access-message {
    background: linear-gradient(135deg, #fff9e6 0%, #ffe8cc 100%);
    border: 1px solid #ffd699;
    border-radius: 8px;
    padding: 20px;
    margin:  0;
    margin-top: 10px;
    line-height: 30px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}
.interactif-answered {
    position: relative;
    background-color: #BDBDBD !important;
    transform: scale(1.02);

    animation: pulseAnswered 1.5s infinite alternate;
}

@keyframes pulseAnswered {
    0% {
        transform: scale(1.02);
        box-shadow: 0 0 0 2px white, 
                    0 0 0 4px #00C4A0,
                    0 4px 12px rgba(0, 196, 160, 0.4);
    }
    100% {
        transform: scale(1.05);
        box-shadow: 0 0 0 3px white, 
                    0 0 0 6px #00C4A0,
                    0 6px 16px rgba(0, 196, 160, 0.6);
    }
}

/* Pour désactiver l'animation quand le bouton est disabled */
.interactif-answered:disabled {
    animation: none;
    transform: scale(1);
  
}
.interactif-access-message:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff9500, #ffcc00);
}
.interactif-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

@keyframes shine {
    0% { left: -50%; }
    100% { left: 150%; }
}

.print-button {
    /* Couleurs et apparence */
    background-color: #00D9FF;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 217, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    /* Dimensions et espacement */
    padding: 8px 16px;
    min-width: 100px;
    height: 40px; /* Hauteur fixe pour uniformité */
    box-sizing: border-box;
    
    /* Flexbox pour centrage parfait */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    
    /* Texte */
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    text-align: center;
    white-space: nowrap;
    
    /* Effets et transitions */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    
    /* Pour l'icône SVG */
    line-height: 1;
}

/* Style au survol */
.print-button:hover {
    background-color: #00C4E8;
    box-shadow: 0 4px 8px rgba(0, 217, 255, 0.4);
    transform: translateY(-1px);
}

/* Style actif */
.print-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 217, 255, 0.3);
}

/* Style pour l'icône SVG */
.print-button svg {
    width: 20px;
    top: 10px;
    left: 05px;
    height: 20px;
    flex-shrink: 0;
}

/* Version RTL pour l'arabe */
.print-button[style*="direction: rtl"] {
    flex-direction: row-reverse;
}

/* Version RTL pour l'arabe */
[dir="rtl"] .print-button {
    flex-direction: row-reverse;
    padding: 8px 16px;
}

/* Animation au clic */
.print-button:focus {
    outline: none;
    animation: pulse 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 217, 255, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(0, 217, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 217, 255, 0); }
}

/* États désactivés */
.print-button:disabled {
    background-color: #B0E8F2;
    cursor: not-allowed;
    transform: none !important;
}
.multipleinput-feedback h3 {
    color: red;
    font-size: 1.4em;
    margin: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
}
.interactif-access-message h4 {
    color: #e67e00;
    margin-top: 0;
    font-size: 1.2em;
}
.interactif-access-message p {
    margin-bottom: 10px;
    color: #663d00;
}
.interactif-access-message .btn-subscribe {
    display: inline-block;
    background: linear-gradient(135deg, #ff9500 0%, #ffcc00 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}
.interactif-access-message .btn-subscribe:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}




.interactif-correct {
    color: green;
}
.interactif-strikephrase-sentence.incorrect {
    color: red;
}
.interactif-strikephrase-sentence.striked {
    text-decoration: line-through;
}


/* Transitions fluides pour tous les éléments */
* {
  transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}        
.statement-content{
        line-height: 25px;
    font-family: system-ui;
}
/* Conteneur principal du feedback */




/* Icône de feedback */
.interactif-feedback-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 15px;
  font-size: 16px;
  color: white;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  animation: iconPulse 0.6s ease;
}

/* Feedback correct */

/* Animation des icônes */
@keyframes iconPulse {
  0% { transform: scale(0.8); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}


.interactif-word-bank::before {
    content: "Word Bank";
    position: absolute;
    top: -12px;
    left: 20px;
    background: #00d9ff;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.interactif-word-bank-words {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.interactif-word-bank-word {
    padding: 12px 20px;
    background: white;
    color: #1a202c;
    border: 2px solid #00d9ff;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.interactif-word-bank-word::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.interactif-word-bank-word:hover {
    background: #00d9ff;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.interactif-word-bank-word:hover::before {
    left: 100%;
}

.interactif-word-bank-word:active {
    transform: translateY(0);
}

.interactif-options-container {
    background: white;
    border-radius: 12px;
    padding: 0px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin: 10px 0;
}



@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Responsive design */



/* Style lorsqu'il fait partie d'un en-tête de question */
.question-header  {
    display: inline-block;
    vertical-align: baseline;
    margin-left: 6px;
}



/* Style compact pour les petits écrans */
@media (max-width: 360px) {
   
    
    .question-header  {
        margin-left: 4px;
        display: block;
        margin-top: 2px;
    }
    
 
}








.interactif-image-container img {
        width: 100%;
    border-radius: 10px;
}
.sentence-equation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
     flex-direction: column;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1.6;
  width: 100%;
}

        * {
            box-sizing: border-box;
        }
/* Reset et base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.explication{
        background-color: #e7f5ff;
    border-left: 3px solid #4dabf7;
    display: flex
;
    flex-direction: column;
    padding: 10px;
}

.matching-area {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.connection-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.matching-column {
    width: 45%;
}

.matching-item {
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    background: white;
    transition: all 0.2s;
}

.matching-item.selected {
    background: #e3f2fd;
    border-color: #2196f3;
}

.matching-item.matched {
    background: #e8f5e9;
    border-color: #4caf50;
}

.matching-item.incorrect {
    background: #ffebee;
    border-color: #f44336;
}.image-container {
    margin: 15px 0;
    text-align: center;
}
.hint {
    display: inline-block;
    margin: 10px 0;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-left: 4px solid #17a2b8;
    border-radius: 0 4px 4px 0;
    color: #343a40;
    font-size: 0.9em;
    font-style: italic;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
    line-height: 1.5;
}

/* Pour les interfaces en arabe (RTL) */
[dir="rtl"] .hint {
    border-left: none;
    border-right: 4px solid #17a2b8;
    border-radius: 4px 0 0 4px;
}

/* Effet au survol */
.hint:hover {
    background-color: #e2f3f7;
    transition: background-color 0.3s ease;
}

/* Icône d'indice optionnelle */
.hint::before {
    content: "💡";
    margin-right: 8px;
    font-style: normal;
}

[dir="rtl"] .hint::before {
    margin-right: 0;
    margin-left: 8px;
}
.question-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

/* Pour les matching images */
.matching-image {
    max-width: 120px;
    max-height: 120px;
    display: block;
    margin: 0 auto;
}
/* Container principal */
.container {
    max-width: 950px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.98);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-primary);
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 217, 255, 0.2);
}

/* Header amélioré */
.header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 30px 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><path d="M0,10 Q25,0 50,10 T100,10 V20 H0 Z" fill="rgba(255,255,255,0.1)"/></svg>');
    background-size: 200px 40px;
    animation: wave 3s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-100px); }
}

.header h1 {
    font-size: 32px;
    margin-bottom: 12px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.header p {
    font-size: 16px;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

/* Content */
.content {
    padding: 30px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

/* Reading text modernisé */
.reading-text, .reading-text-container {
    background: linear-gradient(135deg, var(--primary-ultra-light) 0%, #f0fdff 100%);
    padding: 25px;
    border-radius: var(--border-radius);
    margin-bottom: 30px;
    border-left: 5px solid var(--primary-color);
    box-shadow: var(--shadow-secondary);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.reading-text::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(0, 217, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(50%, -50%);
}

.reading-text:hover, .reading-text-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0, 217, 255, 0.2);
}

.reading-text h2 {
    color: var(--primary-dark);
    margin-bottom: 15px;
    font-weight: 600;
}

/* Sections */
.section {
    margin-bottom: 35px;
    display: none;
}

.section.active {
    display: block;
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.section-title {
    color: var(--primary-dark);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--primary-color);
    font-size: 24px;
    font-weight: 600;
    position: relative;
}
.global-explanation {
    background-color: #f8f9fa;
    border-left: 4px solid #4a90e2;
    padding: 12px 15px;
    margin: 20px 0 10px 0;
    border-radius: 0 4px 4px 0;
    font-size: 0.95em;
    line-height: 1.5;
    color: #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.global-explanation strong {
    color: #2c6ecb;
    font-weight: 600;
}

/* Version pour thème sombre */
@media (prefers-color-scheme: dark) {
    .global-explanation {
        background-color: #2d3748;
        border-left-color: #63b3ed;
        color: #e2e8f0;
    }
    
    .global-explanation strong {
        color: #90cdf4;
    }
}

/* Animation d'apparition */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.global-explanation {
    animation: fadeIn 0.3s ease-out forwards;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--primary-light);
    border-radius: 2px;
}

/* Instructions améliorées */
.instructions {
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 25px;
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--neutral-light) 0%, #f0f2f5 100%);
    border-radius: var(--border-radius-small);
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Questions modernisées */
.question {
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-ultra-light) 100%);
    padding: 25px;
    margin-bottom: 25px;
    border-radius: var(--border-radius);
    border: 2px solid var(--primary-color);
    position: relative;
    box-shadow: var(--shadow-secondary);
    transition: var(--transition);
}

.question:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 217, 255, 0.2);
}

.question-number {
    position: absolute;
    top: -15px;
    left: 20px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 217, 255, 0.4);
}

.question-text {
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
}

/* Options de réponse améliorées */
.option-container {
    margin: 20px 0;
}


/* Fill in the blank amélioré */
.fill-blank-container {
    margin: 20px 0;
}

.fill-blank-paragraph {
    line-height: 1.8;
    font-size: 16px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.blank-input {
    display: inline-block;
    min-width: 120px;
    height: 40px;
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius-small);
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-ultra-light) 100%);
    text-align: center;
    line-height: 36px;
    margin: 5px;
    padding: 0 12px;
    font-weight: 500;
    transition: var(--transition);
    box-shadow: inset 0 2px 4px rgba(0, 217, 255, 0.1);
}

.blank-input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.2);
    transform: scale(1.02);
}

.blank-space.correct {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-color: var(--success-color);
    color: #155724;
}

.blank-space.incorrect {
    background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
    border-color: var(--error-color);
    color: #721c24;
}

/* Matching amélioré */
.matching-area {
    position: relative;
    display: flex;
    gap: 60px;
    margin: 50px 0;
    justify-content: center;
    align-items: flex-start;
}

.matching-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
    z-index: 2;
    flex: 1;
    max-width: 380px;
}

.matching-item {
    padding: 22px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    font-weight: 500;
    min-height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 3px solid transparent;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    box-shadow: var(--shadow-secondary);
    user-select: none;
}

.left-column .matching-item {
    background: linear-gradient(145deg, #fff0f3, #fde2e7);
    border-color: #e91e63;
}

.right-column .matching-item {
    background: linear-gradient(145deg, var(--primary-ultra-light), #cceeff);
    border-color: var(--primary-color);
}

.matching-item:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.matching-item.selected {
    border-color: var(--warning-color);
    background: linear-gradient(145deg, #fff3e0, #ffe0b2);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 40px rgba(255, 152, 0, 0.3);
}

.matching-item.matched {
    background: linear-gradient(145deg, var(--success-color), #45a049);
    color: white;
    cursor: default;
    border-color: #2e7d32;
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
}

.matching-item.incorrect {
    background: linear-gradient(145deg, var(--error-color), #d32f2f);
    color: white;
    border-color: #c62828;
    animation: shake 0.6s;
}

@keyframes shake {
    0%, 20%, 40%, 60%, 80% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
}

.item-number {
    position: absolute;
    top: -18px;
    left: -18px;
    background: linear-gradient(145deg, var(--neutral-dark), #555);
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.connection-indicator {
    position: absolute;
    top: -18px;
    right: -18px;
    background: linear-gradient(145deg, var(--warning-color), #f57c00);
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 6px 15px rgba(255, 152, 0, 0.4);
    z-index: 10;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.matching-item.connected .connection-indicator {
    display: flex;
}

/* Word Bank amélioré */
.word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
    padding: 15px;
    border: 2px dashed var(--primary-color);
    border-radius: var(--border-radius-small);
    min-height: 60px;
    background: linear-gradient(135deg, var(--primary-ultra-light) 0%, #f0fdff 100%);
}

.word-item, .selectable-word {
    padding: 10px 15px;
    background: linear-gradient(135deg, #ffffff 0%, var(--neutral-light) 100%);
    border-radius: var(--border-radius-small);
    cursor: move;
    user-select: none;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
}

.word-item:hover, .selectable-word:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 217, 255, 0.2);
    border-color: var(--primary-light);
}

.word-item.dragging {
    opacity: 0.7;
    transform: rotate(5deg);
}

.selectable-word.selected {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
}

.selectable-word.used {
    background: linear-gradient(135deg, var(--neutral-medium), #d0d0d0);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* Sentence containers */
.sentence-container {
    margin-bottom: 35px;
    padding: 20px;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, #ffffff 0%, var(--neutral-light) 100%);
    border: 2px solid var(--primary-color);
    box-shadow: var(--shadow-secondary);
}

.sentence-target{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px;
    border: 3px dashed var(--primary-color);
    border-radius: var(--border-radius-small);
    min-height: 70px;
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-ultra-light) 100%);
    transition: var(--transition);
}




/* Boutons améliorés */
.btn {
    padding: 14px 28px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: var(--shadow-secondary);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-primary);
}

.btn-primary:disabled {
    background: linear-gradient(135deg, #cccccc 0%, #999999 100%);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    background: linear-gradient(135deg, #ffffff 0%, var(--neutral-light) 100%);
    color: var(--text-primary);
    border: 2px solid var(--neutral-medium);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}


.sentence-item {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    cursor: move;
}

.sentence-item.dragging {
    opacity: 0.5;
}


.sentence-item {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin: 5px 0;
    cursor: move;
    transition: all 0.3s ease;
}

.sentence-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 5px rgba(0,123,255,0.3);
}

.sentence-item.dragging {
    opacity: 0.5;
    
}

.sentence-number {
    background: #007bff;
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-weight: bold;
    flex-shrink: 0;
}

.sentence-text {
    flex: 1;
}

.ordered-sentences-target {
    border: 2px solid #007bff;
    border-radius: 8px;
    padding: 15px;
    background-color: #f0f8ff;
}

.target-header {
    font-weight: bold;
    margin-bottom: 10px;
    color: #007bff;
}

.sentence-drop-zone {
    border: 2px dashed #ccc;
    border-radius: 5px;
    padding: 15px;
    margin: 5px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    transition: all 0.3s ease;
}

.sentence-drop-zone.drag-over {
    border-color: #007bff;
    background-color: #e3f2fd;
}

.sentence-drop-zone.filled {
    border-style: solid;
    background-color: white;
    color: inherit;
}

.sentence-drop-zone.correct {
    border-color: #28a745;
    background-color: #d4edda;
}

.sentence-drop-zone.incorrect {
    border-color: #dc3545;
    background-color: #f8d7da;
}
/* Boutons spéciaux */
.reset-question-btn {
    
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--secondary-color), #f03e3e);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.reset-question-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
}

.restart-btn {
    margin-top: 35px;
    padding: 15px 35px;
    font-size: 18px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: none;
    border-radius: 35px;
    color: white;
    cursor: pointer;
    transition: var(--transition);
    width: 200px;
    font-weight: 600;
    box-shadow: var(--shadow-primary);
}

.restart-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 217, 255, 0.5);
}

.matching-btn {
    padding: 12px 24px;
    background: linear-gradient(145deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
    box-shadow: 0 6px 15px rgba(0, 217, 255, 0.3);
}

.matching-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 217, 255, 0.4);
}

.matching-reset-btn {
    background: linear-gradient(145deg, var(--warning-color), #f57c00);
    box-shadow: 0 6px 15px rgba(255, 152, 0, 0.3);
}

.matching-reset-btn:hover {
    box-shadow: 0 10px 25px rgba(255, 152, 0, 0.4);
}

/* True/False buttons */
.true-false-buttons {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.true-btn, .false-btn {
    padding: 12px 25px;
    border: 2px solid var(--neutral-medium);
    border-radius: var(--border-radius-small);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    background: linear-gradient(135deg, #ffffff 0%, var(--neutral-light) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.true-btn:hover, .false-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.true-btn.selected {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-color: var(--primary-color);
}

.false-btn.selected {
    background: linear-gradient(135deg, var(--text-secondary), #5a6268);
    color: white;
    border-color: var(--text-secondary);
}

.true-btn.correct, .false-btn.correct {
    background: linear-gradient(135deg, var(--success-color), #45a049);
    color: white;
    border-color: var(--success-color);
}

.true-btn.incorrect, .false-btn.incorrect {
    background: linear-gradient(135deg, var(--error-color), #d32f2f);
    color: white;
    border-color: var(--error-color);
}

/* Navigation */
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.question-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.matching-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 25px;
}

/* Progress */
.progress-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.progress-text {
    font-weight: 600;
    min-width: 140px;
    text-align: center;
    color: var(--primary-dark);
}

progress {
    width: 220px;
    height: 12px;
    border-radius: 6px;
    border: none;
    background-color: var(--neutral-medium);
}

progress::-webkit-progress-bar {
    background-color: var(--neutral-medium);
    border-radius: 6px;
}

progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    border-radius: 6px;
    transition: width 0.5s ease;
}

progress::-moz-progress-bar {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    border-radius: 6px;
}

/* Timer */
.timer {
    position: fixed;
    top: 25px;
    right: 25px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95));
    padding: 12px 20px;
    border-radius: 25px;
    box-shadow: var(--shadow-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 100;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(0, 217, 255, 0.2);
}

.timer.warning {
    color: var(--error-color);
    animation: pulse 1s infinite;
    border-color: var(--error-color);
}

/* Results */
.exam-results, .result-card {
    text-align: center;
    padding: 35px;
    background: linear-gradient(135deg, #ffffff 0%, var(--neutral-light) 100%);
    border-radius: var(--border-radius);
    max-width: 550px;
    margin: 25px auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-shadow: var(--shadow-primary);
    border: 2px solid var(--primary-color);
}

.result-card p {
    font-size: 18px;
    margin: 18px 0;
    color: var(--text-primary);
}

.result-card strong {
    color: var(--primary-dark);
    font-weight: 700;
}



/* Styles RTL */
body[dir="rtl"] .question-number {
    right: 20px;
    left: auto;
}

body[dir="rtl"] .option-label {
    text-align: right;
    padding-right: 40px;
}

body[dir="rtl"] .header h1 {
    text-align: right;
}

body[dir="rtl"] .reading-text {
    text-align: right;
}

body[dir="rtl"] .matching-area {
    flex-direction: row-reverse;
}

.question[dir="rtl"] {
    text-align: right;
    font-family: 'system-ui';
}

/* Responsive Design - Suite */
@media (max-width: 768px) {

    
    .navigation {
        flex-direction: column;
        gap: 20px;
    }
    
    .progress-container {
        width: 100%;
        justify-content: center;
    }
    
    .timer {
        position: static;
        margin: 20px auto;
        width: fit-content;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 20px 15px;
    }
    
    .header h1 {
        font-size: 22px;
    }
    
    .question {
        padding: 20px 15px;
    }
    
    .option-label {
        padding: 12px 15px;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .true-false-buttons {
        flex-direction: column;
    }
    
    .fill-blank-paragraph {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .blank-input {
        width: 100%;
        min-width: auto;
    }
}

/* Animations supplémentaires */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes glow {
    0% { box-shadow: 0 0 5px rgba(0, 217, 255, 0.5); }
    50% { box-shadow: 0 0 20px rgba(0, 217, 255, 0.8); }
    100% { box-shadow: 0 0 5px rgba(0, 217, 255, 0.5); }
}

/* Effets spéciaux */
.highlight {
    animation: glow 2s infinite;
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* Tooltips */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: var(--neutral-dark);
    color: #fff;
    text-align: center;
    border-radius: var(--border-radius-small);
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
    font-weight: normal;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--neutral-dark) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Icônes */
.icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    fill: currentColor;
}

.btn .icon {
    width: 18px;
    height: 18px;
}

/* Loader */
.loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 4px solid var(--primary-ultra-light);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.full-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.full-page-loader .loader {
    width: 50px;
    height: 50px;
    border-width: 6px;
}

.full-page-loader p {
    margin-top: 20px;
    font-size: 18px;
    color: var(--primary-dark);
    font-weight: 600;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: modalFadeIn 0.4s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
}

.modal-close:hover {
    color: var(--error-color);
    transform: rotate(90deg);
}

.modal-title {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--primary-dark);
    font-weight: 600;
}

.modal-body {
    margin-bottom: 25px;
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
}

.badge-success {
    background: linear-gradient(135deg, var(--success-color), #45a049);
    color: white;
}

.badge-warning {
    background: linear-gradient(135deg, var(--warning-color), #f57c00);
    color: white;
}

.badge-error {
    background: linear-gradient(135deg, var(--error-color), #d32f2f);
    color: white;
}

/* Tableaux */
.table-responsive {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow-secondary);
}


/* Onglets */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--neutral-medium);
    margin-bottom: 25px;
}

.tab {
    padding: 12px 25px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    transition: var(--transition);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.tab:hover {
    color: var(--primary-dark);
}

.tab.active {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-color);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Cards */
.card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-secondary);
    overflow: hidden;
    transition: var(--transition);
    margin-bottom: 25px;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.card-header {
    padding: 20px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    font-weight: 600;
    font-size: 18px;
}

.card-body {
    padding: 25px;
}

.card-footer {
    padding: 15px 25px;
    border-top: 1px solid var(--neutral-medium);
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

/* Accordéon */
.accordion {
    margin-bottom: 20px;
    border-radius: var(--border-radius-small);
    overflow: hidden;
    box-shadow: var(--shadow-secondary);
}

.accordion-header {
    padding: 18px 25px;
    background: linear-gradient(135deg, #ffffff, var(--neutral-light));
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
    border-bottom: 1px solid var(--neutral-medium);
}

.accordion-header:hover {
    background: linear-gradient(135deg, var(--primary-ultra-light), #f0fdff));
}

.accordion-header::after {
    content: '+';
    font-size: 20px;
    transition: var(--transition);
}

.accordion-header.active::after {
    content: '-';
    transform: rotate(180deg);
}

.accordion-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: white;
}

.accordion-content-inner {
    padding: 25px;
}

.accordion-header.active + .accordion-content {
    max-height: 1000px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-light);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Print Styles */
@media print {
    body {
        background: none;
        color: black;
        font-size: 12pt;
    }
    
    .container {
        box-shadow: none;
        border: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .header {
        background: none;
        color: black;
        padding: 10px 0;
    }
    
    .btn, .navigation, .timer {
        display: none !important;
    }
    
    .question {
        page-break-inside: avoid;
        margin-bottom: 20pt;
    }
    
    @page {
        margin: 1cm;
    }
}

/* Matching amélioré - Version responsive */
.matching-area {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 40px 0;
    justify-content: center;
    align-items: flex-start;
}

.matching-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 2;
    flex: 1 1 300px;
    min-width: 250px;
    max-width: 380px;
    padding: 0 15px;
}

.matching-item {
    padding: 18px 15px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    font-weight: 500;
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    box-shadow: var(--shadow-secondary);
    user-select: none;
    word-break: break-word;
    hyphens: auto;
}

.left-column .matching-item {
    background: linear-gradient(145deg, #fff0f3, #fde2e7);
    border-color: #e91e63;
}

.right-column .matching-item {
    background: linear-gradient(145deg, var(--primary-ultra-light), #cceeff);
    border-color: var(--primary-color);
}

.matching-item:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.matching-item.selected {
    border-color: var(--warning-color);
    background: linear-gradient(145deg, #fff3e0, #ffe0b2);
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 15px 25px rgba(255, 152, 0, 0.2);
}

.matching-item.matched {
    background: linear-gradient(145deg, var(--success-color), #45a049);
    color: white;
    cursor: default;
    border-color: #2e7d32;
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.2);
}

.matching-item.incorrect {
    background: linear-gradient(145deg, var(--error-color), #d32f2f);
    color: white;
    border-color: #c62828;
    animation: shake 0.6s;
}

/* Animation shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Media Queries pour différents écrans */
@media (max-width: 768px) {
    .matching-area {
        gap: 20px;
        margin: 30px 0;
    }
    
    .matching-column {
        flex: 1 1 100%;
        max-width: 100%;
        gap: 15px;
    }
    
    .matching-item {
        padding: 15px 10px;
        min-height: 65px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .matching-area {
        flex-direction: column;
        gap: 15px;
    }
    
    .matching-column {
        width: 100%;
        padding: 0 10px;
    }
    
    .matching-item {
        min-height: 60px;
        font-size: 0.85em;
    }
    
    .matching-item:hover {
        transform: translateY(-2px) scale(1.01);
    }
    
    .matching-item.selected {
        transform: translateY(-3px) scale(1.02);
    }
}

/* Styles pour les images dans les éléments de matching */
.matching-item img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
    display: block;
    object-fit: contain;
    max-height: 200px; /* Hauteur maximale pour les images */
}

/* Adaptation du matching-item pour contenir des images */
.matching-item {
    flex-direction: column;
    padding: 15px;
    min-height: auto; /* Suppression de la hauteur fixe */
}

/* Ajustement du texte sous les images */
.matching-item-text {
    margin-top: 8px;
    text-align: center;
    width: 100%;
}



/* Conserver les états (selected, matched, incorrect) pour les items avec images */
.matching-item.selected img,
.matching-item.matched img,
.matching-item.incorrect img {
    filter: brightness(1.1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}







        /* Keyframes pour les animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3);
            }
            50% {
                opacity: 1;
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        @keyframes slideInLeft {
            from {
                transform: translateX(-100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }

        @keyframes glow {
            0%, 100% {
                box-shadow: 0 0 5px var(--primary-color);
            }
            50% {
                box-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--primary-color);
            }
        }

        /* Conteneur principal */
        .interactif-exercise-container {
            font-family: "system-ui";
            max-width: 900px;
            margin: 15px auto;
            padding: 20px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-large);
            background: white;
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
            animation: fadeInUp 0.6s ease-out;
        }

        .interactif-exercise-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
            animation: glow 2s ease-in-out infinite;
        }

        /* Loading */
        .interactif-loading {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary);
            font-size: 16px;
            font-weight: 500;
        }

        .interactif-loading::after {
            content: "";
            display: inline-block;
            width: 40px;
            height: 40px;
            margin-left: 10px;
            border: 3px solid var(--border-color);
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* En-tête */
        .interactif-exercise-header {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f1f5f9;
            position: relative;
        }

        .interactif-exercise-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
            background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 30px;
        }

        /* Compteur de questions */
        .interactif-question-counter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 15px;
            box-shadow: var(--shadow-medium);
            animation: bounceIn 0.6s ease-out 0.3s both;
        }

        /* Image */
        .interactif-exercise-image {
                background: linear-gradient(135deg, #deefff, #E8F5E9);
            max-width: 100%;
            height: auto;
            max-height: 300px;
            margin: 15px 0;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-medium);
            transition: var(--transition);
            animation: fadeInUp 0.6s ease-out 0.4s both;
            margin: 0 auto;
        }

        .interactif-exercise-image:hover {
            transform: scale(1.02);
            box-shadow: var(--shadow-large);
        }

  

       .interactif-exercise-question {
background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(255, 255, 255, 0.95), rgba(156, 39, 176, 0.08));
    padding: 10px 20px;
    border-radius: 16px;
    border-left: 6px solid #00d9ff;
    margin-bottom: 20px;
    font-size: 16px;
    color: #334155;
    box-shadow: 0 4px 15px rgba(0, 217, 255, 0.1);
}




.interactif-word-bank-word {
    transition: all 0.2s ease;
    user-select: none;
}
        .interactif-navigation .interactif-submit-btn {
            flex: 1;
            margin: 0;
        }

        /* Utilitaires */
        .interactif-hidden {
            display: none !important;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .interactif-exercise-container {
                margin: 8px;
                padding: 15px;
            }
            
            .interactif-exercise-title {
                font-size: 16px;
                line-height:32px;
            }
            
         
            
           
            
            .interactif-options-container {
                gap: 10px;
                margin: 10px 0;
            }
            
            .interactif-result {
                padding: 12px 16px;
                margin: 12px 0;
                font-size: 14px;
            }
            
            .interactif-submit-btn {
                padding: 12px 16px;
                font-size: 14px;
               
            }
            
            .interactif-navigation {
                gap: 10px;
                margin-top: 15px;
            }
            
            .interactif-question-counter {
                padding: 5px 10px;
                font-size: 12px;
                margin-bottom: 12px;
            }
            
            .interactif-exercise-header {
                margin-bottom: 15px;
                padding-bottom: 12px;
            }
        }

        @media (max-width: 480px) {
            .interactif-exercise-container {
                margin: 5px;
                padding: 12px;
            }
            
            .interactif-exercise-title {
                font-size: 18px;
            }
            
         
            
            .interactif-option {
                padding: 10px 14px 10px 35px;
                font-size: 13px;
            }
            
            .interactif-options-container {
                gap: 8px;
                margin: 12px 0;
            }
            
            .interactif-result {
                margin: 10px 0;
                font-size: 13px;
            }
            
            .interactif-submit-btn {
                padding: 10px 14px;
                font-size: 13px;
                
            }
            
            .interactif-navigation {
                gap: 8px;
                margin-top: 12px;
            }
        }

        /* Mode sombre (optionnel) */

        /* Styles pour les exercices de remplacement */







      /* Styles pour les résultats finaux */
.interactif-final-results {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-large);
    margin: 20px 0;
    border: 2px solid var(--primary-color);
    animation: fadeInUp 0.6s ease-out;
}

.interactif-final-results h3 {
    font-size: 28px;
    margin-bottom: 25px;
    color: var(--primary-dark);
    position: relative;
    padding-bottom: 15px;
}

.interactif-final-results h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 2px;
}

.interactif-final-score {
    font-size: 42px;
    font-weight: 700;
    margin: 20px 0;
    padding: 15px;
    border-radius: var(--border-radius);
    display: inline-block;
    min-width: 200px;
    box-shadow: var(--shadow-medium);
    animation: bounceIn 0.6s ease-out;
}

.interactif-final-score.interactif-perfect {
    background: linear-gradient(135deg, var(--success-color), #45a049);
    color: white;
}

.interactif-final-score.interactif-good {
    background: linear-gradient(135deg, #4bb543, #2e7d32);
    color: white;
}

.interactif-final-score.interactif-average {
    background: linear-gradient(135deg, var(--warning-color), #f57c00);
    color: white;
}

.interactif-final-score.interactif-poor {
    background: linear-gradient(135deg, var(--error-color), #d32f2f);
    color: white;
}

.interactif-final-details {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    line-height: 1.6;
}

.interactif-restart-btn {
    padding: 15px 30px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-medium);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.interactif-restart-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 217, 255, 0.4);
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
}

.interactif-restart-btn:active {
    transform: translateY(0);
}

/* Animation pour le score */
@keyframes scorePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.interactif-final-score {
    animation: scorePulse 2s infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .interactif-final-results {
        padding: 25px;
    }
    
    .interactif-final-results h3 {
        font-size: 24px;
    }
    
    .interactif-final-score {
        font-size: 36px;
        min-width: 180px;
        padding: 12px;
    }
    
    .interactif-final-details {
        font-size: 16px;
    }
    
    .interactif-restart-btn {
        padding: 12px 25px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .interactif-final-results {
        padding: 20px 15px;
    }
    
    .interactif-final-results h3 {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .interactif-final-score {
        font-size: 32px;
        min-width: 160px;
        margin: 15px 0;
    }
    
    .interactif-final-details {
        font-size: 15px;
        margin-bottom: 25px;
    }
    
    .interactif-restart-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
}

.interactif-final-results p {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    margin: 15px 0 25px;
    padding: 0 20px;
    text-align: center;
    font-weight: 500;
}

/* Style spécifique pour le message de score faible */
.interactif-poor + .interactif-final-details + p {
    color: #721c24; /* Rouge foncé */
    background-color: #f8d7da; /* Rouge très clair */
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid #dc3545;
}

/* Style pour le message de score moyen */
.interactif-average + .interactif-final-details + p {
    color: #856404; /* Jaune foncé */
    background-color: #fff3cd; /* Jaune très clair */
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
}

/* Style pour le message de bon score */
.interactif-good + .interactif-final-details + p {
    color: #0c5460; /* Bleu foncé */
    background-color: #d1ecf1; /* Bleu très clair */
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid #17a2b8;
}

/* Style pour le message de score parfait */
.interactif-perfect + .interactif-final-details + p {
    color: #155724; /* Vert foncé */
    background-color: #d4edda; /* Vert très clair */
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid #28a745;
    font-weight: 600;
}

.interactif-circle-container {
    margin: 20px 0;
}

.interactif-circle-sentence {
    margin: 15px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
}

.interactif-circle-option {
    display: inline-block;
    margin: 0 5px;
    padding: 4px 8px;
    border: 2px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    font-weight: 500;
        min-width: 50px;
    text-align: center;
}

.interactif-circle-option:hover {
    border-color: #007bff;
    background: #f0f8ff;
}

.interactif-circle-option.selected {
    border-color: #007bff;
    background: #007bff;
    color: white;
}
.interactif-circle-option:hover:not(.selected) {
    background-color: #f0f0f0;
}
.interactif-circle-option.correct {
    border-color: #28a745;
    background: #28a745;
    color: white;
}

.interactif-circle-option.incorrect {
    border-color: #dc3545;
    background: #dc3545;
    color: white;
}

.interactif-circle-option.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.interactif-unanswered-warning {
    color: #d9534f;
    font-weight: bold;
    margin: 15px 0;
    padding: 10px;
    background-color: #f8d7da;
    border-radius: 4px;
}

.interactif-submit-btn:disabled,
.interactif-next-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}



.correct-answer {
    color: #28a745;
    font-size: 0.9em;
    margin-left: 5px;
}

/* Style pour l'indication de la bonne réponse */
.correct-answer {
    color: #28a745;
    font-size: 0.9em;
    margin-left: 5px;
    font-style: italic;
}




.correct-answer {
    color: #2ECC40;
    font-weight: bold;
    margin-left: 8px;
    font-size: 16px;
    display: inline-block;
    padding: 4px 8px;
    background-color: #f8f9fa;
    border-radius: 4px;
}



@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}




/* Style pour les mots/phrases à réorganiser */
.interactif-hidden {
    display: none !important;
}








/* Style pour l'exercice True/False */
.interactif-truefalse-question {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.interactif-truefalse-statement {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.interactif-truefalse-text {
    font-weight: 500;
    margin-right: 15px;
}

.interactif-truefalse-options {
    display: flex;
    gap: 15px;
}

.interactif-truefalse-options label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.interactif-truefalse-textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    resize: vertical;
}

.interactif-truefalse-feedback {
    text-align: left;
}

.interactif-truefalse-item {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.interactif-justification, .interactif-explanation {
    font-style: italic;
    margin: 5px 0 0 15px;
    color: #6c757d;
}

/* Style pour le feedback vrai/faux */
.interactif-truefalse-feedback {
    margin-top: 20px;
}

.interactif-truefalse-item {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    border-left: 5px solid;
}

.interactif-truefalse-item.interactif-correct {
    background-color: #e8f5e9;
    border-color: #2e7d32;
}

.interactif-truefalse-item.interactif-incorrect {
    background-color: #ffebee;
    border-color: #c62828;
}



.interactif-truefalse-item.interactif-correct .feedback-badge {
    background-color: #2e7d32;
    color: white;
}

.interactif-truefalse-item.interactif-incorrect .feedback-badge {
    background-color: #c62828;
    color: white;
}

.interactif-explanation {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #ccc;
    font-style: italic;
}
   

.correct-answer {
    color: green;
    font-weight: bold;
    margin-left: 5px;
}

.interactif-trueorfalse-statement {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.interactif-trueorfalse-statement:hover {
    background: #e9ecef;
}

.interactif-trueorfalse-value {
padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    min-width: 50px;
    text-align: center;
    border: solid 1px #3ae2ff;
    height: 30px;
    background-color: white;
    width: 70px;
}

.interactif-trueorfalse-value.true {
    background: #d4edda;
    color: #155724;
}

.interactif-trueorfalse-value.false {
    background: #f8d7da;
    color: #721c24;
}

/* Styles pour la correction */
.correct-answer {
    background-color: #d4edda !important;
    color: #155724 !important;
}

.incorrect-answer {
    background-color: #f8d7da !important;
    color: #721c24 !important;
}





.interactif-select-question {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}




.correction-mark {
    font-weight: bold;
    margin-left: 5px;
}

.interactif-trueorfalse-feedback .correct {
    color: #155724;
    background: #d4edda;
    padding: 8px;
    margin: 5px 0;
    border-radius: 4px;
}

.interactif-trueorfalse-feedback .incorrect {
    color: #721c24;
    background: #f8d7da;
    padding: 8px;
    margin: 5px 0;
    border-radius: 4px;
}

.interactif-trueorfalse-feedback .user-answer {
    font-weight: bold;
    margin: 3px 0;
}

.interactif-trueorfalse-feedback .correct-answer {
    color: #155724;
}

.interactif-trueorfalse-feedback ul {
    list-style: none;
        list-style-type: none;

    padding-left: 0;
}

.interactif-trueorfalse-feedback li {
    background: none;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

/* Pour cacher les puces sur tous les li du système interactif */
.interactif-exercise-container ul {
    list-style-type: none;
    padding-left: 0;
}



/* Style amélioré pour l'indicateur de chargement */
.interactif-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    margin: 20px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95));
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 217, 255, 0.2);
    min-height: 200px;
    text-align: center;
}

.interactif-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    animation: loadingBar 2s linear infinite;
}

@keyframes loadingBar {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

.interactif-loading-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.interactif-loading-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(0, 217, 255, 0.1);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1.2s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
    position: relative;
    margin-bottom: 25px;
}

.interactif-loading-spinner::after {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 4px solid transparent;
    border-radius: 50%;
    border-top-color: var(--primary-light);
    animation: spinReverse 1.6s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes spinReverse {
    to { transform: rotate(-360deg); }
}

.interactif-loading-dots {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.interactif-loading-dot {
    width: 12px;
    height: 12px;
    background-color: var(--primary-color);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
}

.interactif-loading-dot:nth-child(1) { animation-delay: 0s; }
.interactif-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.interactif-loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* Version minimaliste pour les petits écrans */
@media (max-width: 768px) {
    .interactif-loading {
        padding: 30px 15px;
        min-height: 150px;
    }
    
    .interactif-loading-text {
        font-size: 16px;
        margin-bottom: 20px;
    }
    
    .interactif-loading-spinner {
        width: 50px;
        height: 50px;
        border-width: 4px;
        margin-bottom: 20px;
    }
    
    .interactif-loading-dot {
        width: 10px;
        height: 10px;
    }
}

/* Animation de fond optionnelle */
.interactif-loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 217, 255, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(0, 217, 255, 0.05) 0%, transparent 30%);
    animation: pulseBackground 4s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes pulseBackground {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}
/* Styles RTL pour l'arabe */
[dir="rtl"] .interactif-exercise-container,
[dir="rtl"] .interactif-exercise-question,
[dir="rtl"] .interactif-feedback,
[dir="rtl"] .interactif-option {
    text-align: right;
    font-family: Arial, sans-serif; /* Police supportant l'arabe */
}

[dir="rtl"] .interactif-option {
    padding: 15px 45px 15px 20px; /* Inverse les paddings */
}

[dir="rtl"] .interactif-option-checkbox {
    right: 15px;
    left: auto; /* Déplace la checkbox à droite */
}

[dir="rtl"] .interactif-exercise-question,
[dir="rtl"] .interactif-feedback {
    border-right: 4px solid var(--primary-color);
    border-left: none;
}



[dir="rtl"] .interactif-navigation {
    flex-direction: row-reverse; /* Inverse l'ordre des boutons */
}

[dir="rtl"] .interactif-trueorfalse-value {
    margin-left: 0;
    margin-right: 10px;
}


[dir="rtl"] .hint {
    border-left: none;
    border-right: 4px solid #17a2b8;
    border-radius: 4px 0 0 4px;
}

[dir="rtl"] .hint::before {
    margin-right: 0;
    margin-left: 8px;
}

.interactif-validesentence-item {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.original-sentence {
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.interactif-validesentence-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.correct-answer {
    color: #2e7d32;
    font-style: italic;
}

.interactif-validesentence-feedback ul {
    list-style-type: none;
    padding: 0;
}

.interactif-validesentence-feedback li {
    padding: 10px;
    margin-bottom: 10px;
    border-left: 4px solid;
}

.interactif-validesentence-feedback li.correct {
    border-left-color: #4CAF50;
    background-color: #e8f5e9;
}

.interactif-validesentence-feedback li.incorrect {
    border-left-color: #f44336;
    background-color: #ffebee;
}

.interactif-highlight-sentence {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
}

.interactif-highlight-word {
    display: inline-block;
    padding: 2px 4px;
    margin: 0 2px;
    transition: all 0.3s;
}

.interactif-highlight-word:hover {
    background-color: #f0f0f0;
}

.interactif-highlight-word.selected {
    background-color: #ffeb3b;
    text-decoration: underline;
    font-weight: bold;
}

.interactif-highlight-correct {
    background-color: #c8e6c9 !important;
}

.interactif-highlight-incorrect {
    background-color: #ffcdd2 !important;
}


/* Correction visuelle */
.interactif-highlight-correct {
    background-color: #c8e6c9 !important;
    text-decoration: underline;
    font-weight: bold;
}

.interactif-highlight-incorrect {
    background-color: #ffcdd2 !important;
    text-decoration: line-through;
}

.interactif-highlight-missed {
    background-color: #fff9c4 !important;
    text-decoration: underline dotted;
}

/* Feedback */
.interactif-highlight-feedback {
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
    background-color: #f5f5f5;
}

.interactif-highlight-feedback ul {
    list-style-type: none;
    padding: 0;
}

.interactif-highlight-feedback li {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
}

.interactif-highlight-feedback li.correct {
    background-color: #e8f5e9;
    border-left: 4px solid #4caf50;
}

.interactif-highlight-feedback li.incorrect {
    background-color: #ffebee;
    border-left: 4px solid #f44336;
}

.interactif-highlight-word.selected {
    background-color: #ffeb3b;
    outline: 2px solid #ffc107;
}

.interactif-highlight-word.selected::after {
    content: "✓";
    margin-left: 3px;
    color: #388e3c;
    font-weight: bold;
}


/* Conteneur principal des instructions */
.interactif-highlight-instructions {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    background-color: #f8f9fa;
    border-left: 5px solid #4285f4;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    overflow: hidden;
}

/* Titre des instructions */
.interactif-highlight-instructions h3 {
    color: #202124;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* Icône avant le titre (optionnel) */
.interactif-highlight-instructions h3::before {
    content: "✏️";
    margin-right: 10px;
    font-size: 1.1em;
}

/* Texte des instructions */
.interactif-highlight-instructions p {
    color: #5f6368;
    margin: 8px 0;
    line-height: 1.5;
    font-size: 1rem;
}

/* Exemple dans les instructions */
.interactif-highlight-instructions .example {
    display: inline-block;
    padding: 6px 10px;
    margin: 5px 0;
    background-color: #e8f0fe;
    border-radius: 4px;
    color: #1967d2;
    font-weight: 500;
    border: 1px dashed #4285f4;
}

/* Effet de survol pour les instructions interactives */
.interactif-highlight-instructions .interactive:hover {
    cursor: help;
    text-decoration: underline dotted;
}

/* Version responsive */
@media (max-width: 768px) {
    .interactif-highlight-instructions {
        padding: 12px;
        border-left-width: 4px;
    }
    
    .interactif-highlight-instructions h3 {
        font-size: 1.1rem;
    }
}

/* Style pour la langue arabe */
[lang="ar"] .interactif-highlight-instructions {
    border-left: none;
    border-right: 5px solid #4285f4;
    text-align: right;
}

[lang="ar"] .interactif-highlight-instructions h3::before {
    margin-right: 0;
    margin-left: 10px;
}

.interactif-highlight-word.grouped-word {
    transition: all 0.2s;
    border-radius: 0;
}

.interactif-highlight-word.grouped-word.selected {
    background-color: #FFEB3B;
    position: relative;
}

/* Style pour connecter les mots du groupe */
.interactif-highlight-word.grouped-word.selected + .grouped-word.selected {
    margin-left: -4px;
    padding-left: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.interactif-highlight-word.grouped-word.selected {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.interactif-highlight-word {
    cursor: pointer;
    padding: 2px;
    margin: 1px;
    border-radius: 3px;
}

.interactif-highlight-word.selected {
    background-color: #ffeb3b;
    text-decoration: underline;
}

.interactif-highlight-word.correct {
    background-color: #8bc34a;
}

.interactif-highlight-word.incorrect {
    background-color: #f44336;
}

.interactif-highlight-word.missed {
    background-color: #9e9e9e;
}

.interactif-correction {
    color: #2e7d32; /* Vert foncé */
    font-weight: bold;
    margin-top: 8px;
    padding: 5px;
    background-color: #e8f5e9; /* Fond vert très clair */
    border-left: 3px solid #4caf50; /* Bordure verte */
}

/* Style de base des éléments de liste */
.interactif-highlight-feedback li {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
    background-color: #f5f5f5;
}

/* Style pour les phrases complètement correctes (tous mots trouvés) */
.interactif-highlight-feedback li.correct {
    background-color: #e8f5e9; /* Fond vert très clair */
    border-left: 4px solid #4caf50; /* Bordure verte */
}

/* Style pour les phrases partiellement correctes */
.interactif-highlight-feedback li.partial {
    background-color: #fff8e1; /* Fond jaune clair */
    border-left: 4px solid #ffc107; /* Bordure orange */
}

/* Style pour les phrases incorrectes */
.interactif-highlight-feedback li.incorrect {
    background-color: #ffebee; /* Fond rouge très clair */
    border-left: 4px solid #f44336; /* Bordure rouge */
}

.interactif-highlight-stats {
    margin: 8px 0;
    font-size: 0.9em;
}

.interactif-highlight-stats::before {
    content: "• ";
    color: #666;
}

/* Couleurs spécifiques pour chaque stat */
.interactif-highlight-stats span.correct {
    color: #2e7d32;
}

.interactif-highlight-stats span.incorrect {
    color: #c62828;
}

.interactif-highlight-stats span.missed {
    color: #616161;
}

.interactif-highlight-feedback li.partial {
    background-color: #fff8e1; /* Jaune très pâle */
    border-left: 4px solid #ffc107; /* Jaune-orange */
    color: #333;
}

.interactif-highlight-feedback li.partial .interactif-correction {
    background-color: #fffde7; /* Jaune ultra pâle */
    border-left: 3px solid #ffd54f;
}


.interactif-circle-feedback {
    margin-top: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
}

.interactif-circle-feedback ul {
    list-style-type: none;
    padding-left: 0;
}

.interactif-circle-feedback li {
    margin-bottom: 10px;
    padding: 8px;
    border-left: 3px solid #6c757d;
}

.interactif-explanation {
    font-style: italic;
    color: #495057;
    margin-top: 5px;
}

/* Fichier conjugaison.css */
/* Styles pour la conjugaison des verbes */

.verb-conjugation {

}

.verb-conjugation h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 5px;
  font-size: 1.8em;
}

.verb-conjugation h3 {
  color: #7f8c8d;
  text-align: center;
  margin-top: 0;
  font-size: 1.2em;
  font-weight: normal;
}

.conjugation-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 20px 0;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.conjugation-table tr:not(:last-child) {
  border-bottom: 1px solid #ecf0f1;
}

.conjugation-table td {
  padding: 12px 15px;
  vertical-align: middle;
}

.pronoun {
  font-weight: 600;
  width: 20%;
  background: #f8fafc;
  color: #34495e;
  font-size: 1.1em;
}

.verb-form {
  font-size: 1.2em;
  width: 30%;
  color: #2c3e50;
  font-family: 'Courier New', monospace;
}

.rule {
  font-size: 0.95em;
  color: #555;
  line-height: 1.5;
}

.ending-ons {
  color: #e74c3c;
  font-weight: bold;
  font-size: 1.1em;
}

.ending-ez {
  color: #27ae60;
  font-weight: bold;
  font-size: 1.1em;
}

.ending-ent {
  color: #2980b9;
  font-weight: bold;
  font-size: 1.1em;
}

.memory-tip {
  margin-top: 20px;
  padding: 12px 15px;
  background: #fff8e6;
  border-left: 4px solid #f39c12;
  font-size: 0.95em;
  border-radius: 0 4px 4px 0;
  line-height: 1.6;
}

.memory-tip strong {
  color: #e67e22;
}

.explanation {
  margin-bottom: 20px;
  padding: 15px;
  background: #f0f7ff;
  border-radius: 6px;
  color: #34495e;
  line-height: 1.6;
  border-left: 4px solid #3498db;
}

.explanation p {
  margin: 0;
}

/* Animation au survol */
.conjugation-table tr:hover td {
  background-color: #f5f9ff;
  transition: background-color 0.3s ease;
}

/* Responsive design */
@media (max-width: 600px) {
  .verb-conjugation {
    padding: 15px;
  }
  
  .conjugation-table td {
    padding: 8px 10px;
    font-size: 0.9em;
  }
  
  .verb-form {
    font-size: 1em;
  }
}

/* Styles pour la balise vocic */
.grammar-box {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.grammar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.grammar-col {
    flex: 1;
    min-width: 250px;
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grammar-col:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.grammar-title {
    font-weight: 700;
    font-size: 18px;
    color: #1e40af;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #dbeafe;
}

.description {
    margin: 8px 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.5;
}

.punctuation {
    font-weight: bold;
    color: #dc2626;
    font-size: 18px;
    margin-top: 10px;
    text-align: center;
}

/* Responsive design */
@media (max-width: 768px) {
    .grammar-col {
        min-width: 100%;
    }
}

.interactif-validvalue-container {
    text-align: center;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.interactif-validvalue-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20px;
}

.interactif-validvalue-image {
    max-width: 100%;
    max-height: 300px;
    margin: 0 auto 20px;
    display: block;
}

.interactif-validvalue-input-container {
    margin: 20px 0;
}



.interactif-validvalue-input.interactif-correct {
    border-color: #4CAF50;
    background-color: #f0fff0;
}

.interactif-validvalue-input.interactif-incorrect {
    border-color: #f44336;
    background-color: #fff0f0;
}
.interactif-validvalue-container {
    text-align: center;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.interactif-validvalue-image {
    max-width: 100%;
    max-height: 300px;
    margin: 0 auto 20px;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.interactif-validvalue-input-container {
    margin: 20px 0;
}

.interactif-validvalue-input {
    width: 100%;
    
    padding: 12px 15px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 8px;
    text-align: center;
    display: block;
    margin: 0 auto;
}

.interactif-validvalue-input.interactif-correct {
    border-color: #4CAF50;
    background-color: #f0fff0;
}

.interactif-validvalue-input.interactif-incorrect {
    border-color: #f44336;
    background-color: #fff0f0;
}

.interactif-audio-btn {
    background: #4b6cb7;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    margin: 10px 0;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.interactif-audio-btn:hover {
    background: #3a56b0;
}

.interactif-audio-btn::before {
    content: "🔊";
    font-size: 16px;
}

.interactif-validvalue-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
   
}

.interactif-image-tts-container {
    position: relative;
    max-width: 100%;
}

.interactif-tts-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.interactif-validvalue-input-container {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    max-width: 500px;
}



/* Style de base pour les boutons Vrai/Faux */
.truefalse-options label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    user-select: none;
}

/* Style pour l'option Vrai */
.truefalse-options label[for*="true"] {
    background-color: #e8f5e9;
    color: #2e7d32;
}

/* Style pour l'option Faux */
.truefalse-options label[for*="false"] {
    background-color: #ffebee;
    color: #c62828;
}

/* Effet au survol */
.truefalse-options label:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Style quand sélectionné */
.truefalse-options input[type="radio"]:checked + label[for*="true"] {
    background-color: #4caf50;
    color: white;
    border-color: #2e7d32;
}

.truefalse-options input[type="radio"]:checked + label[for*="false"] {
    background-color: #f44336;
    color: white;
    border-color: #c62828;
}

/* Style des inputs radio (cachés visuellement mais accessibles) */
.truefalse-options input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Style pour le focus (accessibilité) */
.truefalse-options input[type="radio"]:focus-visible + label {
    outline: 2px solid #2196f3;
    outline-offset: 2px;
}

/* Style quand désactivé */
.truefalse-options input[type="radio"]:disabled + label {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Style pour l'état "correct" après validation */
.truefalse-options .correct-answer {
    background-color: #4caf50 !important;
    color: white !important;
    border-color: #2e7d32 !important;
}

/* Style pour l'état "incorrect" après validation */
.truefalse-options .incorrect-answer {
    background-color: #f44336 !important;
    color: white !important;
    border-color: #c62828 !important;
}

/* Icône de validation */
.truefalse-options .answer-status {
    margin-left: 8px;
    font-size: 1.1em;
}

.truefalse-options .correct-answer .answer-status {
    content: "✓";
    color: white;
}

.truefalse-options .incorrect-answer .answer-status {
    content: "✗";
    color: white;
}

/* Style pour la question principale */
.truefalse-main-question {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.exercise-title {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
    font-style: italic;
}

/* Conteneur de chaque question Vrai/Faux */
.interactif-truefalse-question {
    background: white;
       padding: 10px 5px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.truefalse-statement {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}



/* Conteneur des options Vrai/Faux */
.truefalse-options {
    display: flex;
    gap: 10px;
}

/* Style des boutons radio */
.truefalse-options input[type="radio"] {
    display: none;
}

.truefalse-options label {
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.truefalse-options label[for*="true"] {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.truefalse-options label[for*="false"] {
    background-color: #ffebee;
    color: #c62828;
}

.truefalse-options input[type="radio"]:checked + label[for*="true"] {
    background-color: #4caf50;
    color: white;
}

.truefalse-options input[type="radio"]:checked + label[for*="false"] {
    background-color: #f44336;
    color: white;
}

/* Zone de justification */
.justification-container {
    margin-top: 15px;
}

.justification-container textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    min-height: 60px;
    resize: vertical;
}

/* Style pour les réponses validées */
.interactif-truefalse-question.answered-correct .truefalse-options label[for*="true"] {
    background-color: #4caf50;
    color: white;
}

.interactif-truefalse-question.answered-incorrect .truefalse-options label[for*="false"] {
    background-color: #f44336;
    color: white;
}

/* Correction */
.correction-explanation {
    margin-top: 10px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 5px;
    display: none;
}

.interactif-truefalse-question.show-correction .correction-explanation {
    display: block;
}
.validvalue-explanation {
    margin-top: 15px;
    padding: 12px;
    background-color: #f8f9fa;
    border-right: 4px solid #28a745;
    border-radius: 5px;
    text-align: right;
    direction: rtl;
    font-size: 14px;
}

.interactif-strike-word {
    cursor: pointer;
    transition: all 0.2s;
    padding: 2px;
}

.interactif-strike-word.striked {
    text-decoration: line-through;
    color: #888;
}

.interactif-strike-word.correct-strike {
    text-decoration: line-through;
    color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
}

.interactif-strike-word.incorrect-strike {
    text-decoration: line-through;
    color: #F44336;
    background-color: rgba(244, 67, 54, 0.1);
}

.interactif-strike-word.missed-strike {
    background-color: rgba(255, 193, 7, 0.3);
    border-bottom: 2px dashed #FFC107;
}

.interactif-strike-feedback {
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
    background-color: #f5f5f5;
}

.interactif-strike-stats {
    margin: 5px 0;
}

.interactif-strike-stats .correct {
    color: #4CAF50;
}

.interactif-strike-stats .incorrect {
    color: #F44336;
}

.interactif-strike-stats .missed {
    color: #FFC107;
}

.interactif-explanation {
    margin-top: 10px;
    padding: 10px;
    background-color: #e9f7ef;
    border-left: 4px solid #4CAF50;
    font-size: 0.9em;
}

/* Pour la direction RTL en arabe */
.interactif-strike-sentence[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

/* Style spécifique pour les mots arabes */
.interactif-strike-word {
    font-size: 1.1em;
    padding: 2px 4px;
    border-radius: 3px;
}

.interactif-strike-word.striked {
    text-decoration: line-through;
    text-decoration-color: #f44336;
    text-decoration-thickness: 2px;
}

/* Feedback en arabe */
.interactif-strike-feedback[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

.interactif-strike-feedback[dir="rtl"] .interactif-explanation {
    border-left: none;
    border-right: 4px solid #4CAF50;
}

/* Style pour l'exercice strikephrase */
.interactif-strikephrase-container {
    margin: 20px 0;
    direction: rtl;
    text-align: right;
}

.interactif-reference {
    background-color: #f5f5f5;
    padding: 10px;
    border-right: 4px solid #4CAF50;
    margin-bottom: 15px;
    font-weight: bold;
}

.interactif-strikephrase-sentence {
    padding: 8px;
    margin: 5px 0;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 4px;
}

.interactif-strikephrase-sentence.striked {
    text-decoration: line-through;
    background-color: #ffebee;
    opacity: 0.8;
}

.interactif-strikephrase-sentence:hover {
    background-color: #f0f0f0;
}



.strikephrase-item {
    padding: 10px;
    margin: 5px 0;
    cursor: pointer;
    border-right: 3px solid transparent;
    transition: all 0.3s;
}

.strikephrase-item.user-striked {
    text-decoration: line-through;
    color: #888;
}

.strikephrase-item .expected-strike {
    color: #ff9800;
    font-size: 0.8em;
    margin-right: 10px;
}

.reference-box {
    background-color: #f5f5f5;
    padding: 10px;
    margin-bottom: 15px;
    border-right: 3px solid #4CAF50;
}
.interactif-strikephrase-item {
    cursor: pointer;
    padding: 8px;
    margin: 5px 0;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.interactif-strikephrase-item:hover {
    background-color: #f0f0f0;
}

.interactif-strikephrase-item.striked {
    text-decoration: line-through;
    color: #888;
}

.interactif-strikephrase-item.correct {
    background-color: #e6f7e6;
}

.interactif-strikephrase-item.incorrect {
    background-color: #ffebeb;
}

.expected-strike {
    color: #ff0000;
    font-size: 0.9em;
    margin-right: 10px;
}

.interactif-reference {
    font-weight: bold;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f8f8;
    border-left: 4px solid #4CAF50;
}
/* Conteneur principal */
.interactif-strikephrase-container {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* Référence du texte */
.interactif-strikephrase-reference {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f0f8ff;
    border-left: 4px solid #4682b4;
    text-align: right;
    direction: rtl;
}

/* Conteneur des phrases */
.interactif-strikephrase-sentences {
    margin-top: 15px;
}

/* Élément de phrase individuel */
.interactif-strikephrase-item {
    cursor: pointer;
    padding: 12px 15px;
    margin: 8px 0;
    border-radius: 6px;
    transition: all 0.3s ease;
    background-color: white;
    border: 1px solid #ddd;
    text-align: right;
    direction: rtl;
    font-size: 1.05em;
    line-height: 1.6;
    position: relative;
}

/* Style au survol */
.interactif-strikephrase-item:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

/* Phrase barrée */
.interactif-strikephrase-item.striked {
    text-decoration: line-through;
    color: #888;
    background-color: #f8f8f8;
}

/* Indicateur "devrait être barré" */
.expected-strike {
    color: #d9534f;
    font-size: 0.85em;
    margin-left: 10px;
    font-style: italic;
}

/* Style pour les réponses correctes */
.interactif-strikephrase-item.correct {
    background-color: #e8f5e9;
    border-color: #a5d6a7;
}

/* Style pour les réponses incorrectes */
.interactif-strikephrase-item.incorrect {
    background-color: #ffebee;
    border-color: #ef9a9a;
}

/* Conteneur du feedback */
.interactif-strikephrase-feedback {
    margin-top: 20px;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 6px;

}

/* Éléments du feedback */
.interactif-strikephrase-feedback li {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

/* Style RTL spécifique */
[dir="rtl"] .interactif-strikephrase-item {
    text-align: right;
    padding-right: 40px;
}

/* Icône de sélection */
.interactif-strikephrase-item::after {
    content: "✓";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: transparent;
    font-size: 1.2em;
}

.interactif-strikephrase-item.striked::after {
    color: #4caf50;
}

/* Version responsive */
@media (max-width: 768px) {
    .interactif-strikephrase-item {
        padding: 10px;
        font-size: 1em;
    }
}
/* Style de base pour le texte barré */
.striked {
  text-decoration: line-through;
}

/* Version épaisse */
.striked-thick {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Version colorée */
.striked-red {
  text-decoration: line-through;
  text-decoration-color: #ff0000;
}

/* Version double barré */
.striked-double {
  text-decoration: line-through double;
}

/* Animation de barré */
@keyframes strike {
  0% { width: 0; }
  100% { width: 100%; }
}

.striked-animated {
  position: relative;
  display: inline-block;
}

.striked-animated::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 2px;
  background: #ff0000;
  animation: strike 0.5s ease-out forwards;
}

/* Style barré avec opacité */
.striked-faded {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Style barré avec fond */
.striked-highlight {
  position: relative;
  display: inline-block;
}

.striked-highlight::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, #ff0000, transparent);
}

/* Version RTL (pour l'arabe) */
.striked-rtl {
  text-decoration-line: line-through;
  text-decoration-style: wavy;
  text-decoration-color: #333;
}

/* Style barré partiel */
.partial-strike {
  background: linear-gradient(transparent 60%, #ff0000 60%);
  background-size: 100% 3px;
  background-repeat: repeat-x;
}

/* Hover effect */
.striked-hover:hover {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #555;
}
/* Style de base avec curseur main */
.interactif-strikephrase-sentences {
  padding: 12px 15px;
  margin: 8px 0;
  border-radius: 6px;
  background-color: white;
  border: 1px solid #e0e0e0;

  font-size: 1.05em;
  line-height: 1.6;
  cursor: pointer; /* Curseur en forme de main */
  transition: all 0.3s ease;
  position: relative;
}

/* Effet hover avec indication claire */
.interactif-strikephrase-sentences:hover {
  background-color: #f8f9fa;
  border-color: #b3d7ff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  
  /* Animation subtile */
  transform: translateY(-1px);
}

/* Version avec icône de main (optionnel) */
.interactif-strikephrase-sentences.with-hand-icon:hover::after {
  content: "👉"; /* ou "☝️" */
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
}

/* Pour les écrans tactiles */
@media (hover: none) {
  .interactif-strikephrase-sentences {
    background-color: #f5f5f5; /* Feedback visuel même sans hover */
  }
}

.encouragement {
    color: #2ecc71;
    font-weight: bold;
    margin-right: 10px;
}
.wrong-feedback {
    color: #e74c3c;
    font-weight: bold;
}
.correction {
    background: #f8f9fa;
    padding: 8px;
    border-radius: 4px;
    margin-top: 5px;
}
.interactif-circle-option.correct {
    background-color: #4CAF50;
    color: white;
}
.interactif-circle-option.incorrect {
    background-color: #F44336;
    color: white;
}
.correct-answer {
    color: #4CAF50;
    font-weight: bold;
}


.interactif-circle-feedback {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.general-explanation {
    background: #f8f8f8;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.interactif-circle-feedback li {
    margin-bottom: 15px;
    padding: 10px;
    border-left: 3px solid #ddd;
}

.interactif-circle-feedback .correct {
    border-left-color: #4CAF50;
}

.interactif-circle-feedback .incorrect {
    border-left-color: #F44336;
}

.correct-text {
    color: #4CAF50;
    font-weight: bold;
}

.incorrect-text {
    color: #F44336;
    font-weight: bold;
}

.explanation {
    font-style: italic;
    color: #555;
    margin-top: 5px;
}


.interactif-circle-feedback {
    font-family: 'Arial Arabic', Tahoma, sans-serif;
  
}

.interactif-circle-feedback ul {
    padding-right: 0;
    list-style-type: none;
}

.interactif-circle-feedback li {
    margin-bottom: 20px;
    padding-right: 15px;
    border-right: 3px solid #eee;
}

.interactif-circle-feedback .correct {
    border-right-color: #4CAF50;
}

.interactif-circle-feedback .incorrect {
    border-right-color: #F44336;
}

.result-summary {
    margin-top: 20px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
}



.number-breakdown-container {
  background: #f5f9ff;
  padding: 20px;
  border-radius: 10px;
  margin: 15px 0;
}

.number-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.number {
  font-size: 1.5em;
  font-weight: bold;
  min-width: 60px;
  text-align: center;
  margin-right: 15px;
}

.input-fields {
  display: flex;
  align-items: center;
  gap: 5px;
}

.breakdown-input {
  width: 100px;
  padding: 8px;
  text-align: center;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 1em;
}

.breakdown-input:focus {
  border-color: #3498db;
  outline: none;
}

.breakdown-input.correct {
  border-color: #2ecc71;
  background-color: #e8f8f0;
}

.breakdown-input.incorrect {
  border-color: #e74c3c;
  background-color: #fdedec;
}

.correction {
  color: #e74c3c;
  font-size: 0.9em;
  margin-left: 5px;
}

/* Conteneur principal */
.multivalidvalue .number-breakdown-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 25px;
  background: linear-gradient(135deg, #e8d5ff, #f0e6ff);
  border-radius: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Éléments de nombre */
.multivalidvalue .number-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Équation de décomposition */
.multivalidvalue .breakdown-equation {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.2em;
  font-weight: 600;
}

/* Boîtes de résultat */
.multivalidvalue .value-box {
  padding: 8px 16px;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  min-width: 40px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.multivalidvalue .value-box.result {
  background: #af7ac5;
}

/* Champs de saisie */
.multivalidvalue .input-box {
  padding: 8px 12px;
  border-radius: 8px;
  border: 2px solid #ddd;
  color: white;
  font-weight: bold;
  min-width: 40px;
  width: 50px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-size: 1em;
}

/* Styles spécifiques par type de champ */
.multivalidvalue .breakdown-input.input-box.units {
  background: #5dade2;
  border-color: #4a9bd1;
}

.multivalidvalue .breakdown-input.input-box.tens {
  background: #58d68d;
  border-color: #45c074;
}

.multivalidvalue .breakdown-input.input-box.hundreds {
  background: #ec7063;
  border-color: #e55a4f;
}

/* Placeholder */
.multivalidvalue .breakdown-input.input-box::placeholder {
  color: rgba(255,255,255,0.8);
}

/* Focus */
.multivalidvalue .breakdown-input.input-box:focus {
  outline: none;
  border-width: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Opérateurs */
.multivalidvalue .plus, 
.multivalidvalue .equals {
  font-size: 1.3em;
  font-weight: bold;
  color: #2c3e50;
}

/* Styles de correction */
.multivalidvalue .correct-answer {
  background-color: #d4edda !important;
  border-color: #28a745 !important;
  color: #155724 !important;
}

.multivalidvalue .incorrect-answer {
  background-color: #f8d7da !important;
  border-color: #dc3545 !important;
  color: #721c24 !important;
}

.multivalidvalue .correction-text {
  color: #28a745;
  font-size: 0.8em;
  margin-left: 5px;
}

/* Feedback */
.multivalidvalue .feedback-container {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
  border: 1px solid #dee2e6;
  text-align: right;
  direction: rtl;
}

.multivalidvalue .feedback-container h3 {
  color: #28a745;
  margin-bottom: 10px;
}

.multivalidvalue .feedback-container ul {
  padding-right: 20px;
  list-style-type: none;
}

.multivalidvalue .feedback-container li.correct {
  color: #28a745;
}

.multivalidvalue .feedback-container li.incorrect {
  color: #dc3545;
}

.interactif-intro-container {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}




/* Conteneur d'image */
.interactif-intro-image-container {
display: flex
;
    justify-content: center;
    margin: 15px 0;
}

/* Image d'intro */
.interactif-intro-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: none; /* Caché par défaut */
}

/* Titre d'intro */
.interactif-intro-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 15px;
    color: #2c3e50;
}

/* Contenu d'intro */
.interactif-intro-content {
    line-height: 1.6;

}
.interactif-intro-content { font-family: 'system-ui'; padding: 20px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #00d9ff; line-height: 1.6; }
.interactif-intro-content h3 { color: #2c3e50; margin-bottom: 15px; }
.interactif-intro-content p { margin-bottom: 15px; }
.interactif-intro-content ul { margin: 15px 0; padding-left: 20px; }
.interactif-intro-content li { margin-bottom: 8px; }
.interactif-intro-content strong { color: #00b8d4; }
.interactif-intro-content em { font-style: italic; color: #555; }
.interactif-intro-content {
    line-height: 1.6;
    color: #333;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 0 auto;
}

.interactif-intro-content h2,
.interactif-intro-content h3 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 600;
}

.interactif-intro-content h2 {
    font-size: 1.2em;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.interactif-intro-content h3 {
    font-size: 1.4em;
    color: #3498db;
}

.interactif-intro-content p {
    margin-bottom: 15px;
    text-align: justify;
}

.interactif-intro-content ul {
    padding-left: 25px;
    margin-bottom: 20px;
}

.interactif-intro-content li {
    margin-bottom: 8px;
    position: relative;
}

.interactif-intro-content li:before {
    content: "•";
    color: #3498db;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin: 1px;
}

/* Pour les questions numérotées */
.interactif-intro-content ol {
    counter-reset: question-counter;
    padding-left: 25px;
}

.interactif-intro-content ol li {
    counter-increment: question-counter;
    margin-bottom: 15px;
    position: relative;
    list-style-type: none;
}

.interactif-intro-content ol li:before {
    content: counter(question-counter) "/";
    color: #e74c3c;
    font-weight: bold;
    margin-right: 5px;
}

/* Style pour les textes importants */
.interactif-intro-content strong {
    color: #2c3e50;
    font-weight: 600;
}

/* Style pour les citations ou textes entre guillemets */
.interactif-intro-content blockquote {
    border-left: 4px solid #3498db;
    padding-left: 15px;
    margin: 20px 0;
    color: #555;
    font-style: italic;
}
/* ============ ITEMS DE PHRASE ============ */
.sentence-item{
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.sentence-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: #2196F3;
}

/* ============ STRUCTURE DES PHRASES ============ */

.sentence-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 16px;
  color: #333;
}

.before-text, 
.after-text {
  font-weight: 500;
}

/* ============ CHAMPS DE SAISIE ============ */
.breakdown-input,
.pronoun-input{
  padding: 10px 15px;
  border: 2px solid #00bcd4;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  min-width: 150px;
  max-width: 200px;
  background-color: #f8f9fa;
  transition: all 0.3s ease;
  outline: none;
  text-align: center;
  color: #0066cc;
}

.breakdown-input:focus,
.pronoun-input:focus{
  border-color: #0097a7;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}

/* ============ ÉTATS DES RÉPONSES ============ */
.breakdown-input.correct,
.pronoun-input.correct {
  background-color: #e8f5e9;
  border-color: #4CAF50;
  color: #2e7d32;
}

.breakdown-input.incorrect,
.pronoun-input.incorrect
 {
  background-color: #ffebee;
  border-color: #f44336;
  color: #c62828;
}

.breakdown-input:disabled,
.pronoun-input:disabled{
  opacity: 1;
  cursor: not-allowed;
}

/* ============ INDICES ET AIDES ============ */
.hint-container {
 
  border-radius: 4px;
  font-size: 0.9em;
}



.verb-hint {
  color: #0d47a1;
  font-weight: 600;
  font-style: italic;
  margin-left: 5px;
}

/* ============ CORRECTIONS ============ */
.correct-answer {
  color: #4CAF50;
  font-weight: bold;
  font-size: 14px;
  margin-left: 10px;
  padding: 2px 8px;
  background-color: #e8f5e9;
  border-radius: 4px;
  border: 1px solid #4CAF50;
  white-space: nowrap;
  animation: fadeIn 0.3s ease-out;
}
/* Responsive */
@media (max-width: 768px) {
    .interactif-intro-content {
        padding: 15px;
        font-size: 0.95em;
    }
    
    .interactif-intro-content h2 {
        font-size: 1.5em;
    }
    
    .interactif-intro-content h3 {
        font-size: 1.2em;
    }
}



[dir="rtl"] .interactif-intro-content ul,
[dir="rtl"] .interactif-intro-content ol {
    padding-right: 25px;
    padding-left: 0;
}

[dir="rtl"] .interactif-intro-content li:before {
    margin-right: 0;
    margin-left: 5px;
}



@media (max-width: 480px) {  
    .pronoun-exercise-container,.exercise-container 
     {    
     padding: 12px;  
     gap: 8px; 
     } 
 .sentence-equation {    font-size: 1em;    gap: 4px;  }   
.breakdown-input {       font-size: 0.9em;    padding: 6px 8px;  }
    
.interactif-intro-content{
  padding: 0;  
}    
}

}
.interactif-image-container {
    margin-bottom: 20px;
    text-align: center;
}

.interactif-main-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.interactif-sentences-container {
    margin-top: 15px;
}

.interactif-circle-sentence {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
}

.interactif-circle-option {
    /* Vos styles existants pour les options */
}

.correction-box {
    margin-top: 5px;
    padding: 5px;
    background-color: #f5f5f5;
    border-left: 3px solid #ccc;
}

/* Liste des résultats */
.question-results {
    padding: 0;
    margin: 0 0 20px 0;
    list-style-type: none;
}

/* Item de résultat */
.question-results li {
    padding: 18px;
    margin-bottom: 15px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #ddd;
    transition: all 0.3s ease;
}

/* Style pour réponse correcte */
.question-results li.correct {
    border-left-color: #28a745;
    background-color: rgba(40, 167, 69, 0.05);
}

/* Style pour réponse incorrecte */
.question-results li.incorrect {
    border-left-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.05);
}

/* En-tête de question */
.question-header {
    display: flex;
    align-items: baseline;
    margin-bottom: 12px;
    font-weight: 600;
    color: #343a40;
}

.question-number {
    font-weight: 700;
    margin-right: 8px;
    color: #495057;
}

.question-text {
    flex: 1;
}

/* Sections de réponse */
.user-answer,

.explanation {
    display: flex;    font-family: system-ui;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 6px;
}

.correct-answer
 {
    font-family: system-ui;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 6px;
}
.user-answer {
    background-color: #e2e3e5;
}

.correct-answer {
    background-color: #d4edda;
}

.question-results li.incorrect .correct-answer {
    display: flex; /* Visible seulement pour les réponses incorrectes */
}

.explanation {
    background-color: #e7f5ff;
    border-left: 3px solid #4dabf7;
}

/* Labels */
.label {
    font-weight: 600;
    min-width: 120px;
    color: #495057;
    margin-right: 10px;
}

/* Valeurs */
.value {
    flex: 1;
}

/* Résumé global */
.result-summary {
    padding: 20px;
    text-align: center;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.score-display {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.score-display .label {
    font-weight: 600;
}

.score-display .value {
    font-weight: 700;
    margin-left: 5px;
}

/* Couleurs du score */
.value.poor { color: #dc3545; }
.value.average { color: #fd7e14; }
.value.good { color: #28a745; }
.value.excellent { color: #20c997; }

.correct-count {
    color: #6c757d;
    margin-bottom: 10px;
}



/* Messages en fonction du score */
.value.poor + .correct-count + .feedback-message {
    background-color: #fff3f3;
    color: #dc3545;
}

.value.good + .correct-count + .feedback-message {
    background-color: #f0fff4;
    color: #28a745;
}

/* Responsive */
@media (max-width: 768px) {

    
    .question-results li {
        padding: 15px;
    }
    
    .label {
        min-width: 100px;
        display: block;
        margin-bottom: 5px;
    }
    
    .user-answer,
    .correct-answer,
    .explanation {
        flex-direction: column;
    }
}

/* Animation pour les nouveaux résultats */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.question-results li {
    animation: fadeIn 0.4s ease-out forwards;
}

.question-results li:nth-child(1) { animation-delay: 0.1s; }
.question-results li:nth-child(2) { animation-delay: 0.2s; }
.question-results li:nth-child(3) { animation-delay: 0.3s; }


/* Media Queries pour petits écrans */
@media (max-width: 480px) {
 
    
    .question-results li {
        padding: 10px 8px;
        margin-bottom: 8px;
    }
    
    .question-header,
    .user-answer,
    .correct-answer,
    .explanation {
        flex-direction: column;
    }
    
    .label {
        min-width: 100%;
        margin-bottom: 2px;
    }
    
    .value {
        min-width: 100%;
    }
    
    .question-text {
        min-width: 100%;
    }
}

/* Version très compacte pour petits mobiles */
@media (max-width: 360px) {
  
    
    .question-results li {
        padding: 8px 6px;
    }
    
    .user-answer,
    .correct-answer,
    .explanation {
        padding: 5px 6px;
    }
    
    .label,
    .value,
    .correct-count {
        font-size: 0.8rem;
    }
}


.interactif-trueorfalse-feedback .explanation {
    font-style: italic;
    color: #666;
    margin: 5px 0;
    padding-left: 15px;
    border-left: 3px solid #eee;
}

.correct .explanation {
    border-left-color: #4CAF50;
}

.incorrect .explanation {
    border-left-color: #F44336;
}
.futur-guide {
  display: flex;
  margin: 15px 0;
}
.regular-box, .irregular-box {
  padding: 15px;
  border-radius: 8px;
}
.regular-box {
  background: #e3f2fd;
}
.irregular-box {
  background: #fff8e1;
}
.letter-context {
  font-style: italic;
  margin-bottom: 20px;
  color: #555;
}
/* ============ CONTAINERS PRINCIPAUX ============ */
.pronoun-exercise-container,
.exercise-container{
  display: flex;
  flex-direction: column;
  
  padding: 16px;
  border-radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  background-color: #f8fafc;
  box-shadow: 0 5px 15px rgba(0, 217, 255, 0.2);
}



@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ VERSION MOBILE ============ */
@media (max-width: 768px) {
  .pronoun-exercise-container,
  .exercise-container {
    padding: 12px;
  }
  
  .sentence-item {
    padding: 15px;
    margin-bottom: 15px;
  }
  
  .sentence-equation,
  .sentence-text {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .breakdown-input,
  .pronoun-input{
    width: 100%;
    max-width: none;
  }
  
  .correct-answer {
    margin-left: 0;
    margin-top: 5px;
    display: block;
  }
}