/* ===== CONTAINER PRINCIPAL - DESIGN HARMONIEUX ÉCLATANT ===== */
.interactif-validword-container {
    background: linear-gradient(135deg, 
        #00d9ff 0%, 
        #ffffff 25%, 
        #33e1ff 50%, 
        #ffffff 75%, 
        #00d9ff 100%
    );
    border-radius: 24px;
    padding: 20px;
    box-shadow: 
        0 12px 40px rgba(0, 217, 255, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    margin: 16px 0;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: containerSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    border: 4px solid transparent;
    background-clip: padding-box;
}

/* BORDURE LATÉRALE ANIMÉE ÉCLATANTE */
.interactif-validword-container::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(45deg, 
        #ff6b6b 0%, 
        #ff9500 12.5%, 
        #ffd700 25%, 
        #4caf50 37.5%, 
        #00d9ff 50%, 
        #9c27b0 62.5%, 
        #e91e63 75%, 
        #ff6b6b 87.5%, 
        #ff9500 100%
    );
    background-size: 400% 400%;
    border-radius: 28px;
    z-index: -1;
    animation: rainbowBorderFlow 4s linear infinite;
    filter: blur(0.5px);
}

@keyframes rainbowBorderFlow {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

/* EFFET DE BRILLANCE LATÉRALE */
.interactif-validword-container::after {
    content: '';
    position: absolute;
    top: 10%;
    left: -120%;
    width: 40%;
    height: 80%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.6), 
        rgba(0, 217, 255, 0.4),
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: lateralShine 3s ease-in-out infinite;
    border-radius: 50%;
    filter: blur(1px);
}

@keyframes lateralShine {
    0% { left: -120%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

@keyframes containerSlideIn {
    0% { 
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }
    100% { 
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ===== ITEMS INDIVIDUELS HARMONIEUX ===== */
.interactif-validword-item {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.95), 
        rgba(0, 217, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.95)
    );
    border: 2px solid rgba(0, 217, 255, 0.3);
    border-radius: 16px;
    padding: 16px;
    margin: 12px 0;
    box-shadow: 
        0 6px 20px rgba(0, 217, 255, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.interactif-validword-item:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 
        0 12px 32px rgba(0, 217, 255, 0.25),
        0 4px 16px rgba(255, 107, 107, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 107, 107, 0.5);
}

/* BORDURE LATÉRALE COLORÉE POUR LES ITEMS */
.interactif-validword-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg,
        #ff6b6b 0%,
        #ff9500 25%,
        #00d9ff 50%,
        #4caf50 75%,
        #9c27b0 100%
    );
    border-radius: 0 8px 8px 0;
    animation: sideGlow 2s ease-in-out infinite alternate;
}

@keyframes sideGlow {
    0% { 
        opacity: 0.7;
        box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
    }
    100% { 
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.4);
    }
}

/* ===== INPUTS ULTRA-HARMONIEUX ===== */
.interactif-validword-input {
    border: 3px solid transparent;
    border-radius: 14px;
    padding: 10px 18px;
    font-size: 16px;
    font-weight: 600;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 120px;
    background: linear-gradient(145deg, 
        #ffffff 0%, 
        rgba(0, 217, 255, 0.06) 50%,
        #ffffff 100%
    );
    background-clip: padding-box;
    text-align: center;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 217, 255, 0.15),
        0 0 0 0 rgba(0, 217, 255, 0);
    color: #334155;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative;
}

/* BORDURE ANIMÉE HARMONIEUSE POUR LES INPUTS */
.interactif-validword-input::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg,
        #00d9ff 0%,
        #ff6b6b 20%,
        #ffd700 40%,
        #4caf50 60%,
        #9c27b0 80%,
        #00d9ff 100%
    );
    background-size: 300% 300%;
    border-radius: 17px;
    z-index: -1;
    opacity: 0;
    animation: inputBorderFlow 3s linear infinite;
    transition: opacity 0.3s ease;
}

@keyframes inputBorderFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* FOCUS HARMONIEUX ÉCLATANT */
.interactif-validword-input:focus {
    background: linear-gradient(145deg, 
        #ffffff 0%, 
        rgba(0, 217, 255, 0.1) 50%,
        #ffffff 100%
    );
    box-shadow: 
        0 0 0 4px rgba(0, 217, 255, 0.2),
        0 6px 25px rgba(0, 217, 255, 0.3),
        0 2px 8px rgba(255, 107, 107, 0.1),
        inset 0 2px 4px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px) scale(1.03);
    animation: focusHarmony 0.6s ease-out;
}

.interactif-validword-input:focus::before {
    opacity: 1;
    animation-duration: 1.8s;
}

@keyframes focusHarmony {
    0% { 
        box-shadow: 0 0 0 0 rgba(0, 217, 255, 0.8);
        transform: scale(1);
    }
    30% { 
        box-shadow: 0 0 0 8px rgba(255, 107, 107, 0.3);
        transform: scale(1.05);
    }
    100% { 
        box-shadow: 
            0 0 0 4px rgba(0, 217, 255, 0.2),
            0 6px 25px rgba(0, 217, 255, 0.3);
        transform: scale(1.03);
    }
}

/* ===== ÉTATS DE VALIDATION HARMONIEUX ===== */

/* RÉPONSE CORRECTE - EXPLOSION VERTE */
.interactif-validword-input.correct {
    border: 3px solid transparent !important;
    background: linear-gradient(145deg, 
        rgba(76, 175, 80, 0.12), 
        #ffffff 30%,
        rgba(129, 199, 132, 0.08) 70%,
        #ffffff
    ) !important;
    background-clip: padding-box !important;
    color: #2e7d32;
    animation: successHarmony 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.interactif-validword-input.correct::before {
    background: linear-gradient(45deg,
        #4caf50 0%,
        #81c784 25%,
        #00d9ff 50%,
        #66bb6a 75%,
        #4caf50 100%
    ) !important;
    opacity: 1 !important;
    animation: successBorderSpin 1.2s linear infinite !important;
}

@keyframes successBorderSpin {
    0% { 
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }
    100% { 
        background-position: 100% 50%;
        filter: hue-rotate(360deg);
    }
}

@keyframes successHarmony {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.8);
    }
    25% { 
        transform: scale(1.08) rotate(1deg);
        box-shadow: 0 0 0 12px rgba(76, 175, 80, 0.4);
    }
    50% { 
        transform: scale(1.05) rotate(-0.5deg);
        box-shadow: 
            0 0 25px rgba(255, 255, 255, 1),
            0 0 45px rgba(76, 175, 80, 0.3);
    }
    100% { 
        transform: scale(1) rotate(0deg);
        box-shadow: 0 4px 20px rgba(76, 175, 80, 0.25);
    }
}

/* RÉPONSE INCORRECTE - SECOUSSE CORAL */
.interactif-validword-input.incorrect {
    border: 3px solid transparent !important;
    background: linear-gradient(145deg, 
        rgba(255, 107, 107, 0.12), 
        #ffffff 30%,
        rgba(255, 138, 128, 0.08) 70%,
        #ffffff
    ) !important;
    background-clip: padding-box !important;
    color: #d32f2f;
    animation: errorShakeHarmony 0.8s ease-in-out;
}

.interactif-validword-input.incorrect::before {
    background: linear-gradient(45deg,
        #ff6b6b 0%,
        #ff8a80 25%,
        #00d9ff 50%,
        #ff6b6b 75%,
        #e91e63 100%
    ) !important;
    opacity: 1 !important;
    animation: errorBorderPulse 1.8s ease-in-out infinite !important;
}

@keyframes errorBorderPulse {
    0%, 100% { 
        opacity: 0.8;
        transform: scale(1);
        filter: brightness(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.06);
        filter: brightness(1.2);
    }
}

@keyframes errorShakeHarmony {
    0%, 100% { 
        transform: translateX(0) scale(1);
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.6);
    }
    10%, 90% { 
        transform: translateX(-5px) scale(1.02);
        box-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
    }
    20%, 80% { 
        transform: translateX(5px) scale(1.01);
        box-shadow: 0 0 20px rgba(233, 30, 99, 0.3);
    }
    30%, 70% { 
        transform: translateX(-4px) scale(1.02);
    }
    40%, 60% { 
        transform: translateX(4px) scale(1.01);
    }
    50% { 
        transform: translateX(-2px) scale(1.02);
        box-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
    }
}

/* ===== RÉPONSES CORRECTES HARMONIEUSES ===== */
.correct-answer {
    color: #4caf50 !important;
    font-weight: 700 !important;
    margin-left: 12px !important;
    font-size: 14px;
    background: linear-gradient(135deg, 
        rgba(76, 175, 80, 0.15), 
        #ffffff 30%,
        rgba(129, 199, 132, 0.1) 70%,
        rgba(76, 175, 80, 0.05)
    );
    padding: 8px 16px;
    border-radius: 25px;
    border: 2px solid transparent;
    background-clip: padding-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    animation: answerHarmony 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 6px 18px rgba(76, 175, 80, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
}

.correct-answer::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #4caf50, #81c784);
    border-radius: 50%;
    color: white;
    font-size: 12px;
    font-weight: bold;
    animation: checkSpin 0.6s ease-out;
}

@keyframes answerHarmony {
    0% { 
        transform: scale(0.8) translateY(10px);
        opacity: 0;
    }
    50% { 
        transform: scale(1.05) translateY(-2px);
        opacity: 0.8;
    }
    100% { 
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes checkSpin {
    0% { transform: rotate(-180deg) scale(0); }
    80% { transform: rotate(10deg) scale(1.1); }
    100% { transform: rotate(0deg) scale(1); }
}

/* ===== BOUTON SUBMIT HARMONIEUX ===== */
.interactif-submit-btn {
    background: linear-gradient(135deg, 
        #00d9ff 0%, 
        #33e1ff 50%, 
        #00d9ff 100%
    );
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 6px 20px rgba(0, 217, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.interactif-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 8px 25px rgba(0, 217, 255, 0.4),
        0 4px 12px rgba(255, 107, 107, 0.2);
    background: linear-gradient(135deg, 
        #ff6b6b 0%, 
        #ff9500 50%, 
        #ffd700 100%
    );
}

.interactif-submit-btn:disabled {
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ===== TITRE ET QUESTION HARMONIEUX ===== */
.interactif-exercise-title {
    background: linear-gradient(135deg, 
        #00d9ff 0%, 
        #9c27b0 50%, 
        #e91e63 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
    animation: titleShimmer 3s ease-in-out infinite;
}

@keyframes titleShimmer {
    0%, 100% { 
        background-position: 0% 50%; 
        filter: brightness(1);
    }
    50% { 
        background-position: 100% 50%; 
        filter: brightness(1.2);
    }
}

.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: 16px 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);
}

/* ===== HINTS HARMONIEUX ===== */
.hint {
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.15), 
        rgba(255, 255, 255, 0.9),
        rgba(255, 149, 0, 0.1)
    );
    color: #f57c00;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-style: italic;
    margin-top: 8px;
    border-left: 4px solid #ffd700;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}

/* ===== RESPONSIVITÉ HARMONIEUSE ===== */
@media screen and (max-width: 768px) {
    .interactif-validword-container {
        padding: 16px;
        margin: 12px 0;
        border-radius: 20px;
    }
    
    .interactif-validword-item {
        margin: 10px 0;
        padding: 14px;
        border-radius: 14px;
    }
    
    .interactif-validword-input {
        width: 100%;
        min-width: 0;
        font-size: 16px;
        padding: 12px 16px;
        margin: 6px 0;
    }
    
    .correct-answer {
        margin-left: 0 !important;
        margin-top: 8px;
        display: block;
        width: fit-content;
    }
    
    .interactif-exercise-title {
        font-size: 20px;
    }
    
    /* Bordures plus subtiles sur mobile */
    .interactif-validword-container::before {
        animation-duration: 6s;
        opacity: 0.7;
    }
    
    .interactif-validword-item::before {
        width: 4px;
    }
}

/* ===== ANIMATIONS DE PERFORMANCE ===== */
.interactif-validword-container,
.interactif-validword-item,
.interactif-validword-input,
.interactif-submit-btn {
    will-change: transform;
    transform: translateZ(0);
}

/* ===== DARK MODE HARMONIEUX ===== */
@media (prefers-color-scheme: dark) {
    .interactif-validword-container {
        background: linear-gradient(135deg, 
            #001a1f 0%, 
            #003d4a 25%,
            #00d9ff 50%,
            #003d4a 75%,
            #001a1f 100%
        );
    }
    
    .interactif-validword-item {
        background: linear-gradient(145deg, 
            rgba(255, 255, 255, 0.1), 
            rgba(0, 217, 255, 0.05) 50%,
            rgba(255, 255, 255, 0.08)
        );
        border-color: rgba(0, 217, 255, 0.4);
    }
    
    .interactif-validword-input {
        background: linear-gradient(145deg, 
            rgba(255, 255, 255, 0.9), 
            rgba(0, 217, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.9)
        );
        color: #1e293b;
    }
    
    .interactif-exercise-question {
        background: linear-gradient(135deg, 
            rgba(0, 217, 255, 0.15), 
            rgba(255, 255, 255, 0.1),
            rgba(156, 39, 176, 0.1)
        );
        color: #e2e8f0;
    }
}