@import url("responsive-global.css");
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700;900&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Cairo', Arial, sans-serif;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7);
            background-size: 400% 400%;
            animation: gradientShift 30s ease infinite;
            min-height: 100vh;
            padding: 20px;
            overflow-x: hidden;
        }
        
        /* Effet de particules de fond */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 50%, rgba(255, 107, 107, 0.3) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(78, 205, 196, 0.3) 0%, transparent 50%),
                        radial-gradient(circle at 40% 80%, rgba(69, 183, 209, 0.3) 0%, transparent 50%);
            animation: particleMove 40s ease infinite;
            pointer-events: none;
            z-index: -1;
        }
        
        @keyframes particleMove {
            0%, 100% { 
                transform: translate(0, 0) scale(1); 
                opacity: 0.7;
            }
            25% { 
                transform: translate(100px, -50px) scale(1.2); 
                opacity: 0.5;
            }
            50% { 
                transform: translate(-50px, 100px) scale(0.8); 
                opacity: 0.9;
            }
            75% { 
                transform: translate(75px, 25px) scale(1.1); 
                opacity: 0.6;
            }
        }
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            25% { background-position: 100% 25%; }
            50% { background-position: 50% 100%; }
            75% { background-position: 25% 0%; }
            100% { background-position: 0% 50%; }
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            position: relative;
        }
        
        .header {
            text-align: center;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #fd79a8);
            background-size: 300% 300%;
            animation: headerGradient 20s ease infinite;
            color: white;
            padding: 40px;
            border-radius: 25px;
            margin-bottom: 35px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.4);
            position: relative;
            overflow: hidden;
            animation: bounce 20s ease-in-out infinite, headerGradient 8s ease infinite;
            border: 3px solid rgba(255,255,255,0.3);
        }
        
        @keyframes headerGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            10% { transform: translateY(-8px); }
            30% { transform: translateY(-15px); }
            60% { transform: translateY(-8px); }
            40% { transform: translateY(-20px); }
        }
        
        .header::before {
            content: "🔢🎯🚀💯🎪";
            position: absolute;
            top: 15px;
            left: 25px;
            font-size: 25px;
            animation: spin 20s linear infinite, rainbow 3s ease-in-out infinite;
            transform-origin: center;
        }
        
        .header::after {
            content: "📊🎨✨🔥🎉";
            position: absolute;
            top: 15px;
            right: 25px;
            font-size: 25px;
            animation: spin 20s linear infinite reverse, rainbow 3s ease-in-out infinite;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg) scale(1); }
            25% { transform: rotate(90deg) scale(1.2); }
            50% { transform: rotate(180deg) scale(0.8); }
            75% { transform: rotate(270deg) scale(1.1); }
            to { transform: rotate(360deg) scale(1); }
        }
        
        @keyframes rainbow {
            0% { filter: hue-rotate(0deg) brightness(1); }
            25% { filter: hue-rotate(90deg) brightness(1.2); }
            50% { filter: hue-rotate(180deg) brightness(0.8); }
            75% { filter: hue-rotate(270deg) brightness(1.1); }
            100% { filter: hue-rotate(360deg) brightness(1); }
        }
        
        .header h1 {
            font-size: 32px;
            font-weight: 900;
            text-shadow: 4px 4px 8px rgba(0,0,0,0.6);
            position: relative;
            z-index: 2;
            animation: textGlow 20s ease-in-out infinite alternate;
        }
        
        @keyframes textGlow {
            from { text-shadow: 4px 4px 8px rgba(0,0,0,0.6), 0 0 20px rgba(255,255,255,0.5); }
            to { text-shadow: 4px 4px 8px rgba(0,0,0,0.6), 0 0 30px rgba(255,255,255,0.8); }
        }
        
        .subtitle {
            font-size: 18px;
            margin-top: 15px;
            opacity: 0.95;
            animation: pulse 20s ease-in-out infinite;
        }
        
        .exercise {
            background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
            border-radius: 25px;
            margin: 30px 0;
            box-shadow: 0 20px 45px rgba(0,0,0,0.25);
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
            border: 4px solid transparent;
            background-clip: padding-box;
            backdrop-filter: blur(10px);
        }
        
        .exercise:hover {
            transform: translateY(-15px) scale(1.03);
            box-shadow: 0 30px 60px rgba(0,0,0,0.35);
            border-color: rgba(255,107,107,0.5);
        }
        
        .exercise-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
            background-size: 300% 300%;
            animation: headerFlow 20s ease infinite;
            color: white;
            padding: 25px;
            text-align: center;
            position: relative;
            font-weight: 700;
            font-size: 26px;
            border-radius: 20px 20px 0 0;
        }
        
        @keyframes headerFlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .exercise-header::before {
            content: "💯🎯🚀";
            position: absolute;
            left: 25px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 35px;
            animation: pulse 20s ease-in-out infinite, spinSlow 10s linear infinite;
        }
        
        .exercise-header::after {
            content: "✨🔥💫";
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 35px;
            animation: pulse 2s ease-in-out infinite reverse, spinSlow 10s linear infinite reverse;
        }
        
        @keyframes spinSlow {
            from { transform: translateY(-50%) rotate(0deg); }
            to { transform: translateY(-50%) rotate(360deg); }
        }
        
        @keyframes pulse {
            0%, 100% { transform: translateY(-50%) scale(1); }
            50% { transform: translateY(-50%) scale(1.3); }
        }
        
        .exercise-content {
            padding: 30px;
            position: relative;
        }
        
        .intro-text {
            background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
            padding: 20px;
            border-radius: 15px;
            margin: 20px 0;
            border-left: 5px solid #00acc1;
            font-size: 18px;
            line-height: 1.8;
            box-shadow: 0 4px 15px rgba(0,172,193,0.2);
            position: relative;
            overflow: hidden;
        }
        
        .intro-text::before {
            content: "📘";
            position: absolute;
            right: 15px;
            top: 15px;
            font-size: 30px;
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .question {
            background: linear-gradient(135deg, #fff3e0, #ffe0b2);
            border: 3px solid #ff9800;
            border-radius: 20px;
            padding: 25px;
            margin: 25px 0;
            position: relative;
            box-shadow: 0 8px 25px rgba(255,152,0,0.25);
            transition: all 0.3s ease;
            font-size: 18px;
            line-height: 2;
        }
        
        .question::before {
            content: "❓";
            position: absolute;
            left: -20px;
            top: 15px;
            font-size: 35px;
            animation: bounce 2s ease-in-out infinite;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-15px); }
            60% { transform: translateY(-8px); }
        }
        
        .question:hover {
            transform: translateX(10px) scale(1.02);
            box-shadow: 0 12px 35px rgba(255,152,0,0.35);
        }
        
        .mcq {
            background: linear-gradient(135deg, #f3e5f5, #e1bee7);
            border: 3px solid #9c27b0;
            border-radius: 20px;
            padding: 25px;
            margin: 25px 20px;
            position: relative;
            box-shadow: 0 8px 25px rgba(156,39,176,0.25);
            font-size: 18px;
        }
        
        .mcq::before {
            content: "🤔";
            position: absolute;
            left: -18px;
            top: 15px;
            font-size: 35px;
            animation: think 3s ease-in-out infinite;
        }
        
        @keyframes think {
            0%, 100% { transform: rotate(-5deg); }
            50% { transform: rotate(5deg); }
        }
        
        .mcq-item {
            background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
            border: 2px solid #ba68c8;
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            font-size: 18px;
            line-height: 1.8;
            box-shadow: 0 4px 15px rgba(186,104,200,0.15);
        }
        
        .mcq-item::before {
            content: "▶";
            position: absolute;
            left: -30px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            color: #9c27b0;
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .mcq-item:hover {
            transform: translateX(15px) scale(1.05);
            box-shadow: 0 8px 25px rgba(186,104,200,0.3);
            border-color: #9c27b0;
        }
        
        .mcq-item:hover::before {
            opacity: 1;
            left: -35px;
        }
        
        .mcq-item.selected {
            background: linear-gradient(135deg, #ba68c8, #ab47bc);
            color: white;
            border-color: #8e24aa;
            transform: translateX(15px) scale(1.05);
        }
        
        .mcq-item.correct {
            background: linear-gradient(135deg, #66bb6a, #4caf50);
            color: white;
            border-color: #388e3c;
            animation: correctPulse 0.6s ease;
        }
        
        @keyframes correctPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08); }
        }
        
        .mcq-item.incorrect {
            background: linear-gradient(135deg, #ef5350, #f44336);
            color: white;
            border-color: #d32f2f;
            animation: incorrectShake 0.5s ease;
        }
        
        @keyframes incorrectShake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-10px); }
            75% { transform: translateX(10px); }
        }
        
        button {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 18px 40px;
            font-size: 18px;
            font-weight: 700;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 20px 10px;
            box-shadow: 0 8px 20px rgba(102,126,234,0.4);
            position: relative;
            overflow: hidden;
        }
        
        button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        
        button:hover::before {
            width: 300px;
            height: 300px;
        }
        
        button:hover {
            transform: translateY(-5px) scale(1.08);
            box-shadow: 0 15px 35px rgba(102,126,234,0.6);
        }
        
        button:active {
            transform: translateY(-2px) scale(1.05);
        }
        
        .solution {
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border: 4px solid #4caf50;
            border-radius: 20px;
            padding: 25px;
            margin: 25px 0;
            position: relative;
            box-shadow: 0 10px 30px rgba(76,175,80,0.3);
            font-size: 17px;
            line-height: 2;
        }
        
        .solution::before {
            content: "✅";
            position: absolute;
            left: -20px;
            top: 15px;
            font-size: 40px;
            animation: checkmark 1s ease-in-out;
        }
        
        @keyframes checkmark {
            0% { 
                transform: scale(0) rotate(-180deg); 
                opacity: 0;
            }
            50% { 
                transform: scale(1.3) rotate(10deg); 
            }
            100% { 
                transform: scale(1) rotate(0deg); 
                opacity: 1;
            }
        }
        
        .solution p {
            margin: 20px 0;
            line-height: 2;
        }
        
        .solution p:first-child {
            font-size: 20px;
            font-weight: 700;
            color: #2e7d32;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 3px solid #81c784;
        }
        
        .math-text {
            background: linear-gradient(135deg, #fff9c4, #fff59d);
            padding: 8px 15px;
            border-radius: 10px;
            display: inline-block;
            margin: 3px;
            font-family: 'Courier New', monospace;
            font-weight: 700;
            font-size: 16px;
            box-shadow: 0 3px 10px rgba(255,235,59,0.3);
            border: 2px solid #fbc02d;
            line-height: 1.6;
        }
        
        .calculation {
            background: linear-gradient(135deg, #e3f2fd, #bbdefb);
            border-left: 5px solid #2196f3;
            padding: 20px;
            margin: 20px 0;
            border-radius: 15px;
            font-family: 'Courier New', monospace;
            font-size: 16px;
            line-height: 2;
            box-shadow: 0 5px 20px rgba(33,150,243,0.2);
            position: relative;
        }
        
        .calculation::before {
            content: "🔢";
            position: absolute;
            right: 15px;
            top: 15px;
            font-size: 25px;
            animation: rotate 4s linear infinite;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .highlight {
            background: linear-gradient(135deg, #ffeb3b, #fdd835);
            padding: 5px 12px;
            border-radius: 8px;
            font-weight: 700;
            box-shadow: 0 3px 12px rgba(253,216,53,0.4);
            display: inline-block;
            margin: 3px;
            animation: highlightPulse 2s ease-in-out infinite;
            line-height: 1.8;
        }
        
        @keyframes highlightPulse {
            0%, 100% { 
                box-shadow: 0 3px 12px rgba(253,216,53,0.4);
                transform: scale(1);
            }
            50% { 
                box-shadow: 0 5px 20px rgba(253,216,53,0.6);
                transform: scale(1.05);
            }
        }
        
        .hidden {
            display: none;
        }
        
        /* Emojis flottants aléatoires */
        .floating-emoji {
            position: fixed;
            font-size: 35px;
            pointer-events: none;
            z-index: 1000;
            animation: floatUp 4s ease-out forwards;
        }
        
        @keyframes floatUp {
            0% {
                transform: translateY(0) rotate(0deg) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(-250px) rotate(360deg) scale(1);
                opacity: 0;
            }
        }
        
        /* Animation de confettis */
        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            pointer-events: none;
            z-index: 1000;
            animation: confettiFall 3s ease-out forwards;
        }
        
        @keyframes confettiFall {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }
        
        /* Étoiles scintillantes */
        .star {
            position: fixed;
            font-size: 30px;
            pointer-events: none;
            z-index: 1000;
            animation: starTwinkle 2s ease-in-out forwards;
        }
        
        @keyframes starTwinkle {
            0%, 100% {
                transform: scale(0) rotate(0deg);
                opacity: 0;
            }
            50% {
                transform: scale(1.5) rotate(180deg);
                opacity: 1;
            }
        }
        
        /* Feux d'artifice */
        .firework {
            position: fixed;
            pointer-events: none;
            z-index: 1000;
            animation: fireworkExplode 1.5s ease-out forwards;
        }
        
        @keyframes fireworkExplode {
            0% {
                transform: translateY(0) scale(0);
                opacity: 1;
            }
            50% {
                transform: translateY(-100px) scale(1.5);
                opacity: 1;
            }
            100% {
                transform: translateY(-250px) rotate(360deg) scale(1);
                opacity: 0;
            }
        }
        
        .party-mode {
            animation: party 0.8s ease-in-out;
        }
        
        @keyframes party {
            0%, 100% { transform: scale(1); }
            25% { transform: scale(1.15); }
            50% { transform: scale(0.9); }
            75% { transform: scale(1.15); }
        }
        
        /* Effets de curseur amusants */
        .exercise:hover {
            cursor: pointer;
        }
        
        /* Particules flottantes supplémentaires */
        .math-particle {
            position: fixed;
            pointer-events: none;
            z-index: -1;
            font-size: 20px;
            opacity: 0.3;
            animation: mathFloat 15s linear infinite;
        }
        
        @keyframes mathFloat {
            0% {
                transform: translateY(100vh) translateX(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.3;
            }
            90% {
                opacity: 0.3;
            }
            100% {
                transform: translateY(-100px) translateX(100px) rotate(360deg);
                opacity: 0;
            }
        }
        
        /* Responsive design amélioré */
        @media (max-width: 768px) {
            body {
                padding: 15px;
                font-size: 16px;
                line-height: 1.8;
            }
            
            .container {
                padding: 8px;
            }
            
            .header {
                padding: 25px 20px;
                margin-bottom: 25px;
            }
            
            .header h1 {
                font-size: 24px;
                line-height: 1.4;
            }
            
            .subtitle {
                font-size: 16px;
                margin-top: 10px;
            }
            
            .exercise {
                margin: 20px 0;
                border-radius: 20px;
            }
            
            .exercise-header {
                font-size: 20px;
                padding: 20px 15px;
                line-height: 1.4;
            }
            
            .exercise-content {
                padding: 20px;
            }
            
            .intro-text {
                font-size: 16px;
                padding: 15px;
                margin: 15px 0;
                line-height: 1.6;
            }
            
            .question {
                margin: 18px 0;
                padding: 18px;
                font-size: 16px;
                line-height: 1.8;
                border-radius: 15px;
            }
            
            .question::before {
                left: -15px;
                top: 10px;
                font-size: 25px;
            }
            
            .mcq {
                margin: 18px 15px;
                padding: 18px;
                font-size: 16px;
            }
            
            .mcq::before {
                left: -12px;
                top: 10px;
                font-size: 25px;
            }
            
            .mcq-item {
                margin: 15px 0;
                padding: 15px;
                font-size: 16px;
                line-height: 1.6;
                border-radius: 12px;
            }
            
            .mcq-item:hover {
                transform: translateX(12px) scale(1.03);
            }
            
            .mcq-item::before {
                left: -25px;
                font-size: 18px;
            }
            
            .mcq-item:hover::before {
                left: -30px;
            }
            
            button {
                padding: 15px 25px;
                font-size: 16px;
                margin: 15px 5px;
                border-radius: 25px;
            }
            
            .solution {
                margin: 18px 0;
                padding: 20px;
                font-size: 15px;
                line-height: 1.7;
                border-radius: 15px;
            }
            
            .solution::before {
                left: -15px;
                top: 10px;
                font-size: 30px;
            }
            
            .solution p {
                margin: 15px 0;
                line-height: 1.7;
            }
            
            .solution p:first-child {
                font-size: 18px;
                margin-bottom: 15px;
                padding-bottom: 10px;
            }
            
            .math-text {
                padding: 6px 10px;
                margin: 2px;
                font-size: 14px;
                display: inline-block;
                line-height: 1.4;
            }
            
            .calculation {
                padding: 15px;
                margin: 15px 0;
                font-size: 14px;
                line-height: 1.8;
                border-radius: 12px;
            }
            
            .calculation::before {
                right: 10px;
                top: 10px;
                font-size: 20px;
            }
            
            .highlight {
                padding: 4px 8px;
                margin: 2px;
                font-size: 15px;
                line-height: 1.6;
                display: inline-block;
            }
            
            /* Désactiver les animations hover sur mobile pour de meilleures performances */
            .exercise:hover {
                transform: none;
            }
            
            .question:hover {
                transform: none;
            }
            
            /* Réduire la taille des émojis flottants sur mobile */
            .floating-emoji {
                font-size: 25px;
            }
            
            /* Meilleur espacement pour le texte arabe sur mobile */
            [dir="rtl"] .question,
            [dir="rtl"] .solution,
            [dir="rtl"] .mcq-item {
                text-align: right;
                direction: rtl;
            }
            
            /* Assurer un bon retour à la ligne */
            .math-text {
                word-break: keep-all;
                white-space: nowrap;
            }
            
            /* Meilleur positionnement des boutons */
            button {
                display: block;
                width: 100%;
                max-width: 350px;
                margin: 18px auto;
            }
        }