{"id":74,"date":"2026-04-24T02:00:05","date_gmt":"2026-04-24T02:00:05","guid":{"rendered":"https:\/\/www.tazkiraacademy.com\/?page_id=74"},"modified":"2026-05-13T01:18:39","modified_gmt":"2026-05-13T01:18:39","slug":"app-tazkira","status":"publish","type":"page","link":"https:\/\/www.tazkiraacademy.com\/en\/app-tazkira\/","title":{"rendered":"app tazkira"},"content":{"rendered":"\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.9.3\/dist\/confetti.browser.min.js\"><\/script>\n<script src=\"https:\/\/tazkiraacademy.com\/app-data\/lisan-mots.js?v7\"><\/script>\n\n<style>\n    \n\/* ============================================================\n       TAZKIRA - DESIGN PREMIUM, \u00c9PUR\u00c9 & OPTIMIS\u00c9 (V2)\n       ============================================================ *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;800;900&family=Scheherazade+New:wght@400;700&display=swap');\n\n    :root { \n        --primary: #043E2E; \n        --primary-light: #059669; \n        --gold: #D4AF37; \n        --gold-light: #FEF9C3;\n        --danger: #E11D48; \n        --success: #10B981;\n        --dark: #0F172A; \n        --bg-app: #F8FAFC; \n        --surface: #FFFFFF;\n        --text-muted: #64748B;\n        --border: #F1F5F9;\n        --radius-card: 24px; \n        --shadow-premium: 0 10px 40px -10px rgba(0,0,0,0.04); \n    }\n    \n    body { margin: 0; padding: 0; background-color: var(--bg-app); width: 100vw; height: 100vh; overflow: hidden; }\n\n    \n \n   .app-shell { \n        width: 100%; max-width: 100%; height: 100dvh; \n        \n        \/* --- D\u00c9BUT DU FOND ONDE \u00c9PUR\u00c9E --- *\/\n        background-color: var(--bg-app); \n        background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23D4AF37' fill-opacity='0.15' d='M0,128L48,138.7C96,149,192,171,288,165.3C384,160,480,128,576,133.3C672,139,768,181,864,186.7C960,192,1056,160,1152,138.7C1248,117,1344,107,1392,101.3L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C\/path%3E%3C\/svg%3E\");\n        background-repeat: no-repeat;\n        background-position: top;\n        background-size: cover;\n        \/* --- FIN DU FOND ONDE --- *\/\n\n        display: flex; flex-direction: column; font-family: 'Nunito', sans-serif; \n        color: var(--dark); overflow: hidden; position: relative; z-index: 1;\n    }\n\n\n    \n    .app-shell .header { \n        padding: 20px 20px 15px 20px; \n        background: transparent; \n        z-index: 10; display: flex; flex-direction: column; flex-shrink: 0;\n    }    \n    .app-shell .top-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; width: 100%;}\n    .app-shell .top-bar-row { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto;}\n    \n    #lvl-txt { white-space: nowrap; font-size: 14px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); text-align: center; flex: 1; }\n\n    .app-shell .back-btn { background: transparent; color: var(--text-muted); border: 2px solid var(--border); width: 36px; height: 36px; border-radius: 50%; font-size: 14px; cursor: pointer; display: none; align-items: center; justify-content: center; transition: 0.2s; }\n    .app-shell .back-btn:active { background: var(--border); }\n    .app-shell .progress-track { height: 4px; background: var(--border); border-radius: 4px; overflow: hidden; width: 100%; margin-top: 10px; max-width: 1200px; margin-left: auto; margin-right: auto;}   \n    .app-shell .progress-bar { height: 100%; width: 0%; background: var(--gold); transition: width 0.4s ease-out; }\n    \n    \n        \/* --- \u00c9crans de base & Animations (Glissement Lat\u00e9ral) --- *\/\n    .app-shell .screen {\n        display: none; padding: 25px 20px 0 20px; flex: 1;\n        flex-direction: column; overflow-y: auto; overflow-x: hidden;\n        will-change: transform, opacity;\n    }   \n\n    .app-shell .screen.active {\n        display: flex;\n        \/* Animation qui glisse de droite \u00e0 gauche en 0.3s *\/\n        animation: slideRightToLeft 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;\n    }\n\n    @keyframes slideRightToLeft {\n        from {\n            opacity: 0.5; \/* L\u00e9g\u00e8rement transparent au tout d\u00e9but *\/\n            transform: translateX(100%); \/* Part compl\u00e8tement depuis la droite (en dehors de l'\u00e9cran) *\/\n        }\n        to {\n            opacity: 1; \/* Totalement visible *\/\n            transform: translateX(0); \/* Arrive \u00e0 sa place normale au centre *\/\n        }\n    }\n\n\n\n    .content-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; flex: 1; padding-bottom: 0; }\n    \n    .app-shell .section-block { background: var(--surface); border-radius: var(--radius-card); margin-bottom: 20px; border: 1px solid var(--border); overflow: hidden; flex-shrink:0; box-shadow: var(--shadow-premium);}\n    .app-shell .section-header { padding: 12px 15px; color: var(--gold); background: var(--primary); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; }\n    .app-shell .section-body { padding: 15px; display: flex; flex-direction: column; align-items: center;}    \n\n    \/* --- \u00c9CRAN D'APPRENTISSAGE OPTIMIS\u00c9 (PHASE 3) --- *\/\n    #view-learn { padding-left: 8px; padding-right: 8px; }\n    #learn-container { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;}\n    #learn-container .section-block { box-shadow: 0 4px 20px rgba(0,0,0,0.02); border-radius: var(--radius-card); border: 1px solid var(--border); margin-bottom: 0; width: 100%;}\n    #learn-container .section-body { padding: 15px 15px 10px 15px; }\n    \n    #learn-container .ar-main { font-family: 'Scheherazade New', serif; font-size: clamp(45px, 8vw, 65px); font-weight: 700; text-align: center; color: var(--gold); line-height: 1.2; margin: 0; width: 100%;} \n    #learn-container .main-trans-badge { color: var(--text-muted); font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin: 5px auto 10px auto; border-bottom: 2px dashed var(--border); padding-bottom: 5px; text-align: center;}\n\n    #learn-container table { width: 100%; border-collapse: collapse; margin-top: 0; table-layout: fixed; }\n    #learn-container th { color: var(--text-muted); font-size: 11px; padding: 5px; text-transform: uppercase; font-weight: 900; border-bottom: 1px solid var(--border); text-align: center;}\n    #learn-container td { padding: 10px 4px 15px 4px; text-align: center; font-weight: 700; font-size: clamp(20px, 4vw, 24px); font-family: 'Scheherazade New', serif; color: var(--primary); border-bottom: 1px solid rgba(0,0,0,0.02); line-height: 1.4;}    \n    #learn-container .sub-trans { display: block; font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 900; color: var(--text-muted); margin-top: 8px; text-transform: uppercase; letter-spacing: 1px; white-space: normal; word-break: break-word; line-height: 1.3; padding: 0 2px;}\n\n    \/* --- BOUTONS PRINCIPAUX ET STICKY FOOTER --- *\/\n    .app-shell .btn-anchor { \n        margin-top: auto; padding: 10px 0 20px 0; background: linear-gradient(to top, var(--bg-app) 85%, transparent); \n        position: sticky; bottom: 0; left: 0; width: 100%; z-index: 100;\n    }\n    .app-shell .btn { width: 100%; padding: 18px; border: none; border-radius: 40px; font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 10px;}\n    .app-shell .btn:active { transform: scale(0.96); }\n    \n    .app-shell .btn-next { \n        background: var(--primary); color: white; box-shadow: 0 10px 25px rgba(6, 78, 59, 0.25); \n        border-radius: 100px; font-size: 15px; font-weight: 900; letter-spacing: 1.5px; padding: 20px; text-transform: uppercase;\n    }\n    .app-shell .btn-next:active { transform: translateY(2px) scale(0.98); box-shadow: 0 5px 15px rgba(6, 78, 59, 0.2); }\n\n    \/* Faisceau de lumi\u00e8re sur les boutons d'action *\/\n    .btn-next { position: relative; overflow: hidden; }\n    .btn-next::after {\n        content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;\n        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\n        transform: skewX(-25deg); animation: refletLuxe 4s infinite; pointer-events: none;\n    }\n    @keyframes refletLuxe { 0% { left: -150%; } 20% { left: 200%; } 100% { left: 200%; } }\n\n    \/* --- \u00c9CRAN DES TESTS (QCM, CLAVIER, INPUT) --- *\/\n    #q-zone .section-block { background: transparent; box-shadow: none; border: none; }\n    #q-zone .section-body { padding: 10px 0; }\n    #view-test .ar-main { font-size: clamp(35px, 8vw, 45px); overflow-wrap: break-word; word-break: break-word; white-space: normal; line-height: 1.4; padding: 10px; color: var(--gold);}\n    \n    #qcm-options { grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }\n    #qcm-options .btn { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.03); border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); color: var(--dark); font-weight: 800; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 26px; font-family: 'Scheherazade New', serif;}\n    #qcm-options .btn:active { transform: scale(0.96); background: #F8FAFC; border-color: var(--primary); box-shadow: 0 2px 5px rgba(0,0,0,0.02); }\n    #qcm-options .btn[style*=\"Scheherazade\"] { font-size: 32px; color: var(--primary); }\n    \n    .app-shell input { width: 100%; padding: 18px; border: 2px solid rgba(0,0,0,0.04); border-radius: 16px; font-size: 26px; text-align: center; outline: none; box-sizing: border-box; background: #FFFFFF; font-weight: 900; color: var(--primary); margin-bottom: 20px; transition: 0.3s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);}\n    .app-shell input:focus { border-color: var(--primary-light); background: #FFFFFF; box-shadow: 0 0 0 4px rgba(6, 78, 59, 0.1); }\n    \n    .app-shell #virtual-keyboard { display: none; grid-template-columns: repeat(auto-fit, minmax(45px, 1fr)); gap: 6px; margin-bottom: 20px; background: transparent; padding: 0; border: none;}\n    .app-shell .vk-btn { background: #FFFFFF; border: none; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.05); font-family: 'Scheherazade New', serif; font-size: 24px; color: var(--dark); font-weight: bold; cursor: pointer; padding: 12px 0; transition: 0.1s;}\n    .app-shell .vk-btn:active { background: #E2E8F0; transform: scale(0.95); box-shadow: none; }\n    .app-shell .vk-btn.vowel { color: var(--gold); font-size: 26px; }\n    .app-shell .vk-btn-wide { grid-column: span 2; color: var(--danger); font-size: 18px; }\n    .app-shell .vk-btn-space { grid-column: span 6; font-family: 'Nunito', sans-serif; font-size: 12px; color: var(--text-muted); text-transform: uppercase; font-weight: 900;}\n\n    .grille-formes-verbales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }\n    .grille-formes-verbales > div { display: flex; flex-direction: column; width: 100%; }\n    .grille-formes-verbales .form-test-input { padding: 10px 8px; font-size: 18px; letter-spacing: normal; width: 100%; box-sizing: border-box; }\n\n    \/* --- R\u00c9SULTATS & PREUVES TEXTUELLES --- *\/\n    .app-shell .mould-content { display: none; flex-direction: column; flex: 1; overflow: hidden; }\n    .scrollable-proofs { flex: 1; overflow-y: auto; padding-right: 5px; max-height: 50vh; }\n    .app-shell .source-card { background: var(--surface); padding: 25px; border-radius: var(--radius-card); border: 1px solid var(--border); border-left: 4px solid var(--gold); margin-bottom: 20px; box-shadow: var(--shadow-premium);}\n    .app-shell .ref-label { background: var(--primary); color: #FFFFFF; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 4px 10px rgba(6, 78, 59, 0.2); }\n    .app-shell .ref-label:empty { display: none; }\n    .app-shell .ar-verse { font-family: 'Scheherazade New', serif; font-size: 42px; text-align: right; direction: rtl; line-height: 1.6; margin: 15px 0; color: var(--primary); font-weight: 700; }\n    #mvCoranTrans, #mvHadithTrans { font-size: 16px; font-weight: 900; color: var(--dark); line-height: 1.5; margin-top: 15px; width: 100%; text-align: left; }\n    \n    .app-shell .btn-audio { background-color: #FDF9EE; color: #064E3B; border: 1px solid #064E3B; width: 75%; max-width: 250px; height: 36px; padding: 0; margin: 15px auto 0 auto; font-size: 11px; font-weight: 900; border-radius: 50px; display: flex; justify-content: center; align-items: center; gap: 8px; }\n    .app-shell .btn-audio i { font-size: 14px; }\n\n    \/* --- ACCORD\u00c9ONS (PREUVES) --- *\/\n    .accordeon-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: all 0.3s ease; }\n    .accordeon-item.active { border-color: var(--gold); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15); }\n    .accordeon-btn { width: 100%; text-align: left; padding: 18px 20px; background: transparent; border: none; display: flex; justify-content: space-between; align-items: center; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 900; color: var(--primary); cursor: pointer; }\n    .accordeon-btn i.fa-chevron-down { color: var(--gold); transition: transform 0.3s ease; }\n    .accordeon-item.active .accordeon-btn i.fa-chevron-down { transform: rotate(180deg); }\n    .accordeon-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #FDFBF7; }\n    .accordeon-inner { padding: 20px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; }\n\n    @keyframes bounceDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }\n    .scroll-arrow-down { background: transparent; color: var(--text-muted); border: none; font-size: 24px; display: flex; justify-content: center; margin: 25px auto 0 auto; cursor: pointer; opacity: 0.5; animation: bounceDown 2s infinite ease-in-out; transition: opacity 0.2s, transform 0.2s; }\n    .scroll-arrow-down:active { opacity: 1; transform: scale(0.9); }\n\n    \/* --- DASHBOARD, MENUS ET TUILES --- *\/\n    .logo-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; margin: 20px 0 40px 0; }\n    .logo-container-pro { position: relative; background: var(--primary); border: none; border-radius: 30px 0 30px 0; padding: 25px 60px; box-shadow: 0 8px 25px rgba(6, 78, 59, 0.25); }\n    .logo-text-pro { font-family: 'Scheherazade New', serif; font-size: 70px; color: var(--gold); font-weight: 700; line-height: 1; }\n\n    .ios-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-size: 16px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.2s; }\n    .ios-btn:active { background: var(--border); }\n    \n    .dash-row { display: flex; gap: 15px; margin-bottom: 25px; width: 100%; }\n    .btn-dash { flex: 1; background: var(--surface); border: 1px solid rgba(0,0,0,0.02); border-radius: var(--radius-card); padding: 25px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; box-shadow: var(--shadow-premium); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s; color: var(--primary); }\n    .btn-dash:active { transform: scale(0.95); box-shadow: 0 4px 10px rgba(0,0,0,0.02); }\n    .btn-dash i { font-size: 28px; margin-bottom: 5px; }\n    .btn-dash-label { text-align: center; line-height: 1.3; }\n    .btn-dash-label span:first-child { font-size: 16px; font-weight: 900; color: var(--dark); }\n    .btn-dash-label span:last-child { font-size: 12px; font-weight: 700; color: var(--text-muted); }\n\n    .btn-dash-wide { width: 100%; background: var(--surface); border: 1px solid rgba(0,0,0,0.02); border-radius: var(--radius-card); padding: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 25px; box-shadow: var(--shadow-premium); transition: transform 0.2s; }\n    .btn-dash-wide:active { transform: scale(0.98); }\n    .resume-card-pro { width: 100%; background: var(--primary); color: white; border-radius: var(--radius-card); padding: 25px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 20px; border: 1px solid var(--gold); }\n\n    .modes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; width: 100%; margin-bottom: 30px;}    \n    .marathon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; width: 100%; }\n    .modern-tile { background: #FDFBF7; border: 2px solid #E8E0D0; color: var(--primary); border-radius: var(--radius-card); padding: 20px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 13px; font-weight: 900; text-align: center; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.03); text-transform: uppercase; letter-spacing: 1px; }\n    .modern-tile:active { transform: scale(0.96); border-color: var(--gold); }\n    .mode-tile-icon { width: 50px; height: 50px; background: rgba(6, 78, 59, 0.08); color: var(--primary); font-size: 24px; border-radius: 12px; display: flex; justify-content: center; align-items: center; margin: 0 auto 5px auto; }\n    .mode-tile-icon.gold { background: rgba(212, 175, 55, 0.15); color: var(--gold); }\n    .modern-tile-title { font-size: 11px; font-weight: 900; color: var(--dark); }\n\n    .challenge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 25px; width: 100%; }\n    .challenge-grid .limit-btn { background: var(--surface); color: var(--dark); border: 2px solid var(--border); padding: 18px 0; border-radius: 12px; cursor: pointer; font-weight: 900; font-size:16px; transition: 0.2s; }\n    .challenge-grid .limit-btn.active { background: var(--gold) !important; color: var(--dark) !important; border-color: var(--gold) !important; box-shadow: 0 6px 15px rgba(212, 175, 55, 0.3); }\n\n    \/* --- OBJECTIFS DU JOUR --- *\/\n    .daily-goal-container { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; margin-bottom: 20px; width: 100%; box-sizing: border-box; box-shadow: var(--shadow-premium); }\n    .daily-goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }\n    .daily-goal-title { font-size: 11px; font-weight: 900; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }\n    .daily-goal-count { font-size: 14px; font-weight: 900; color: var(--primary); }\n    .daily-goal-track { height: 8px; background: #F3F4F6; border-radius: 10px; overflow: hidden; width: 100%; }\n    .daily-goal-bar { height: 100%; background: linear-gradient(90deg, var(--gold), #FCD34D); border-radius: 10px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); width: 0%; }\n    .daily-goal-completed .daily-goal-bar { background: linear-gradient(90deg, var(--success), #34D399); }\n\n    .goal-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }\n    .goal-btn { background: var(--bg-app); border: 2px solid var(--border); border-radius: 12px; padding: 12px; font-size: 12px; font-weight: 800; color: var(--text-muted); cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center; gap: 5px; }\n    .goal-btn span { font-size: 18px; color: var(--primary); font-weight: 900; }\n    .goal-btn.active { border-color: var(--gold); background: #FEF3C7; color: #B45309; }\n\n    \/* --- BANNI\u00c8RE MEMRISE --- *\/\n    .memrise-review-card { background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); border: 2px solid #FDBA74; border-radius: var(--radius-card); padding: 18px 20px; display: flex; align-items: center; gap: 15px; cursor: pointer; box-shadow: 0 8px 20px rgba(249, 115, 22, 0.15); margin-bottom: 25px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; width: 100%; box-sizing: border-box; }\n    .memrise-review-card:active { transform: scale(0.96); box-shadow: 0 4px 10px rgba(249, 115, 22, 0.1); }\n    .memrise-review-card::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent); transform: skewX(-25deg); animation: refletLuxe 4s infinite; pointer-events: none; }\n    .review-icon-box { background: linear-gradient(135deg, #F97316, #EA580C); color: white; width: 50px; height: 50px; border-radius: 14px; display: flex; justify-content: center; align-items: center; font-size: 24px; box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3); flex-shrink: 0; animation: pulse-orange 2s infinite; }\n    @keyframes pulse-orange { 0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(249, 115, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } }\n    .review-text-box { flex: 1; }\n    .review-title { font-size: 15px; font-weight: 900; color: #C2410C; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }\n    .review-subtitle { font-size: 13px; font-weight: 800; color: #EA580C; }\n    .review-action { color: #F97316; font-size: 18px; font-weight: 900; }\n\n    \/* --- OVERLAY ET TH\u00c8MES --- *\/\n    #levels-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }\n    #themes-list { display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 600px; margin: 0 auto; }    \n    .theme-card-pro { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-card); padding: 25px; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.03); display: flex; flex-direction: column; align-items: center; text-align: center; }\n    .theme-card-pro:active { transform: scale(0.98); border-color: var(--primary); }\n    .theme-ar-title { font-family: 'Scheherazade New', serif; font-size: 38px; font-weight: 700; color: var(--gold); margin: 0 0 8px 0; line-height: 1.2; text-shadow: 0 2px 5px rgba(212, 175, 55, 0.15); }\n    .theme-tr-title { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 900; color: var(--text-main); text-transform: uppercase; letter-spacing: 1px; }\n\n    \/* --- LEXIQUE --- *\/\n    .lexicon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; }\n    .lexicon-col { display: flex; flex-direction: column; gap: 10px; }\n    .lexicon-col-header { text-align: center; font-weight: 900; font-size: 14px; text-transform: uppercase; border-bottom: 2px solid var(--gold); padding-bottom: 8px; margin-bottom: 10px; color: var(--primary); letter-spacing: 1px; }\n    .lexicon-item-pro { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 15px 10px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.02); transition: 0.2s; display: flex; flex-direction: column; justify-content: center; }\n    .lexicon-item-pro:active { border-color: var(--gold); transform: scale(0.98); }\n    .lexicon-ar-pro { font-family: 'Scheherazade New', serif; font-size: 28px; font-weight: 700; color: var(--primary); line-height: 1.2; margin-bottom: 5px; }\n    .lexicon-tr-pro { font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 900; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }\n\n    \/* --- R\u00c9GLAGES --- *\/\n    #view-settings { background: var(--bg-app); margin: 0; padding: 20px; }\n    #view-settings #lbl-set-title { color: var(--primary); font-size: 32px; font-weight: 800; text-align: left; margin-bottom: 30px; line-height: 1.2; }\n    #view-settings h3, #lbl-set-lang, #lbl-set-rec1 { color: var(--text-muted); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 15px; }\n    #view-settings .section-block { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.03); border-radius: 20px; padding: 25px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); margin-bottom: 25px; }\n    #view-settings .selector-group { background: #F3F4F6; border-radius: 14px; padding: 4px; border: none; box-shadow: none; display: flex; gap: 0; }\n    #view-settings .select-btn { border-radius: 10px; font-size: 14px; font-weight: 800; color: #9CA3AF; padding: 12px; border: none; background: transparent; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }\n    #view-settings .select-btn.active { background: #FFFFFF; color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }\n    #view-settings .custom-select { background-color: #F9FAFB; border: 1px solid #F3F4F6; border-radius: 14px; height: 55px; font-size: 15px; font-weight: 700; color: var(--dark); text-align: left; padding-left: 20px; background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 10 10\"><path fill=\"%239CA3AF\" d=\"M0 3l5 5 5-5z\"\/><\/svg>'); }\n    #view-settings .custom-select:focus { border-color: var(--primary-light); background-color: #FFFFFF; box-shadow: 0 0 0 4px rgba(6, 78, 59, 0.1); }\n    #view-settings .btn-next { background: var(--primary); color: #FFFFFF; border: none; font-size: 15px; letter-spacing: 1px; padding: 18px; border-radius: 16px; box-shadow: 0 8px 25px rgba(6, 78, 59, 0.25); margin-top: 10px; }\n    #view-settings .btn-next::after { display: none; }\n\n    \/* --- RESPONSIVE MOBILE --- *\/\n    @media (max-width: 768px) {\n        #qcm-options { grid-template-columns: 1fr; gap: 15px; }\n        #qcm-options .btn { width: 100%; padding: 20px 15px; border-radius: 24px; min-height: 90px; }\n        #qcm-options .btn[style*=\"Nunito\"] { font-size: 16px; }\n    }\n    @media (max-width: 650px) {\n        .grille-formes-verbales { grid-template-columns: repeat(2, 1fr); gap: 15px; }\n        .grille-formes-verbales .form-test-input { font-size: 20px; padding: 12px 5px; }\n        .app-shell table { display: grid; grid-template-columns: 1fr 1fr; gap: 0px 15px; }\n        .app-shell tbody, .app-shell tr { display: contents; }\n        .app-shell th, .app-shell td { border-bottom: none; display: flex; flex-direction: column; justify-content: center; width: 100%; }\n        .app-shell th { padding: 15px 5px 5px 5px; }\n        .app-shell td { padding: 0 5px 15px 5px; border-bottom: 1px dashed var(--border); font-size: clamp(22px, 6vw, 28px); }\n        .app-shell tr:nth-of-type(1) th:nth-child(1) { order: 1; }\n        .app-shell tr:nth-of-type(1) th:nth-child(2) { order: 2; }\n        .app-shell tr:nth-of-type(2) td:nth-child(1) { order: 3; }\n        .app-shell tr:nth-of-type(2) td:nth-child(2) { order: 4; }\n        .app-shell tr:nth-of-type(1) th:nth-child(3) { order: 5; }\n        .app-shell tr:nth-of-type(3) th:nth-child(1) { order: 6; }\n        .app-shell tr:nth-of-type(2) td:nth-child(3) { order: 7; }\n        .app-shell tr:nth-of-type(4) td:nth-child(1) { order: 8; }\n        .app-shell tr:nth-of-type(3) th:nth-child(2) { order: 9; }\n        .app-shell tr:nth-of-type(3) th:nth-child(3) { order: 10; }\n        .app-shell tr:nth-of-type(4) td:nth-child(2) { order: 11; }\n        .app-shell tr:nth-of-type(4) td:nth-child(3) { order: 12; }\n        .app-shell .sub-trans { font-size: 10px; }\n    }\n\n    \/* --- MODE NUIT \/ SOMBRE --- *\/\n    .app-shell.dark-mode { --bg-app: #131412; --surface: #1E1F1D; --primary: #065F46; --primary-light: #047857; --text-main: #F5F5F4; --text-muted: #A8A29E; --border: #292A28; }\n    .app-shell.dark-mode .section-block, .app-shell.dark-mode input, .app-shell.dark-mode .custom-select, .app-shell.dark-mode #virtual-keyboard { background: var(--surface); border-color: var(--border); color: var(--text-main); }\n    .app-shell.dark-mode .header { background: transparent; border-bottom: 1px solid var(--border); }\n    .app-shell.dark-mode .vk-btn { background: var(--surface); border-color: var(--border); color: white;}\n    .app-shell.dark-mode .vk-btn-space { background: transparent; }\n    .app-shell.dark-mode .source-card { background: var(--surface); border-left-color: var(--gold); border-color: var(--border); }\n    .app-shell.dark-mode .select-btn { background: var(--surface); border-color: var(--border); color: var(--text-muted); }\n    .app-shell.dark-mode .select-btn.active { background: var(--primary); color: white; border-color: var(--primary); }\n    .app-shell.dark-mode .modern-tile, .app-shell.dark-mode .theme-card-pro, .app-shell.dark-mode .lexicon-item, .app-shell.dark-mode .btn-dash, .app-shell.dark-mode .btn-dash-wide { background: var(--surface); border-color: var(--border); }\n    .app-shell.dark-mode .modern-tile-title, .app-shell.dark-mode .theme-tr-title, .app-shell.dark-mode .lexicon-item div, .app-shell.dark-mode .btn-dash-label { color: var(--text-main); }\n    .app-shell.dark-mode #view-test button { color: var(--text-main); background: var(--surface); border-color: var(--border);}\n    .app-shell.dark-mode #view-test button:active { background: var(--border); }\n    .app-shell.dark-mode .limit-btn { background: var(--surface); border-color: var(--border); color: var(--text-main);}\n    .app-shell.dark-mode .limit-btn.active { background: var(--gold); color: #131412; border-color: var(--gold); }\n    .app-shell.dark-mode .ref-label { background: #292A28; color: var(--gold); border: 1px solid var(--gold); }\n    .app-shell.dark-mode .resume-card-pro { background: var(--surface); color: var(--text-main); border-color: var(--border); }\n    .app-shell.dark-mode .memrise-review-card { background: rgba(194, 65, 12, 0.1); border-color: rgba(194, 65, 12, 0.3); }\n    .app-shell.dark-mode .review-title { color: #FDBA74; }\n    .app-shell.dark-mode .review-subtitle { color: #FFEDD5; }\n    .app-shell.dark-mode .lexicon-item-pro { background: var(--surface); border-color: var(--border); }\n    .app-shell.dark-mode .lexicon-ar-pro { color: var(--gold); }\n    .app-shell.dark-mode .lexicon-tr-pro { color: var(--text-main); }\n\n\/* ============================================================\n   CORRECTIONS : QCM, BOUTONS COMPACTS ET TEXTES MODE NUIT\n   ============================================================ *\/\n\n\/* 1. BOUTONS PLUS COMPACTS ET STICKY FOOTER ALL\u00c9G\u00c9 *\/\n.app-shell .screen { padding-bottom: 60px !important; }\n.app-shell .btn-anchor { \n    position: sticky !important; \n    bottom: 0 !important; \n    left: 0 !important; \n    width: 100% !important; \n    background: linear-gradient(to top, var(--bg-app) 90%, transparent) !important; \n    padding: 10px 0 15px 0 !important; \n    z-index: 9999 !important; \n}\n.app-shell .btn-next {\n    padding: 14px 20px !important; \/* Rend le bouton beaucoup moins haut *\/\n    font-size: 14px !important; \n    width: 90% !important; \/* Le bouton ne touche plus les bords de l'\u00e9cran *\/\n    max-width: 400px !important;\n    margin: 0 auto !important; \/* Centre le bouton *\/\n    border-radius: 50px !important;\n}\n\n\/* 2. QCM SUR UNE SEULE COLONNE PROPRE *\/\n#qcm-options { \n    display: flex !important; \n    flex-direction: column !important; \/* Force l'affichage l'un sous l'autre *\/\n    gap: 12px !important; \n}\n#qcm-options .btn { \n    width: 100% !important; \n    padding: 12px 15px !important; \n    min-height: 60px !important; \n    height: auto !important;\n    font-size: 20px !important; \n    white-space: normal !important; \n    word-break: keep-all !important; \n    overflow-wrap: break-word !important; \n    line-height: 1.3 !important;\n}\n#qcm-options .btn[style*=\"Scheherazade\"] { \n    font-size: 28px !important; \n}\n\n\/* 3. FIX TEXTES INVISIBLES EN MODE NUIT & VAGUES (0.6) *\/\n.app-shell.dark-mode { \n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23D4AF37' fill-opacity='0.6' d='M0,128L48,138.7C96,149,192,171,288,165.3C384,160,480,128,576,133.3C672,139,768,181,864,186.7C960,192,1056,160,1152,138.7C1248,117,1344,107,1392,101.3L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C\/path%3E%3C\/svg%3E\") !important;\n    background-position: top;\n    background-repeat: no-repeat;\n    background-size: cover;\n}\n.app-shell.dark-mode .btn-outline,\n.app-shell.dark-mode #btn-main-menu-end {\n    color: var(--text-main) !important;\n    border-color: var(--border) !important;\n}\n.app-shell.dark-mode table td,\n.app-shell.dark-mode #learn-container td {\n    color: #34D399 !important; \/* Arabe en Vert Emeraude lumineux *\/\n    text-shadow: 0 1px 3px rgba(0,0,0,0.5);\n}\n.app-shell.dark-mode .btn-dash-label span:first-child {\n    color: var(--gold) !important; \/* Titre Apprendre en Or *\/\n}\n.app-shell.dark-mode .btn-dash-label span:last-child {\n    color: var(--text-main) !important; \n}\n.app-shell.dark-mode .btn-dash i,\n.app-shell.dark-mode .modern-tile i,\n.app-shell.dark-mode .mode-tile-icon i {\n    color: #34D399 !important;\n}\n.app-shell.dark-mode .mode-tile-icon {\n    background: rgba(52, 211, 153, 0.1) !important;\n}\n\n\n\/* ============================================================\n   CORRECTION D'URGENCE : OPTIMISATION DE L'ESPACE MOBILE\n   ============================================================ *\/\n@media (max-width: 768px) {\n    \/* 1. SAFE AREA : Remonter les boutons du bas pour \u00e9viter la barre du t\u00e9l\u00e9phone et le widget langue *\/\n    .app-shell .screen { \n        padding-bottom: 110px !important; \/* Donne beaucoup d'air au fond de l'\u00e9cran pour scroller *\/\n    }\n    .app-shell .btn-anchor { \n        padding: 10px 0 35px 0 !important; \/* Pousse le bouton vers le haut, loin du bord bas *\/\n    }\n    \n    \/* 2. VERTICAL RHYTHM : R\u00e9duire l'espace gaspill\u00e9 en haut (Logo et En-t\u00eates) *\/\n    .logo-wrapper { \n        margin: 5px 0 20px 0 !important; \/* R\u00e9duit l'\u00e9norme espace autour du logo *\/\n    }\n    .logo-wrapper img { \n        width: 200px !important; \/* Rend le logo un poil plus compact pour lib\u00e9rer la vue *\/\n    }\n    .app-shell .header {\n        padding: 10px 15px 0px 15px !important; \/* Ent\u00eate plus fine *\/\n    }\n    \n    \/* 3. COMPACIT\u00c9 DES BLOCS : Affiner les cartes d'apprentissage *\/\n    .app-shell .section-block, \n    .modern-tile, \n    .btn-dash {\n        margin-bottom: 15px !important; \/* Rapproche l\u00e9g\u00e8rement les blocs entre eux *\/\n    }\n    #learn-container td {\n        padding: 5px 4px 10px 4px !important; \/* Tableau des mots plus resserr\u00e9 *\/\n    }\n    #learn-container .ar-main {\n        font-size: clamp(35px, 8vw, 45px) !important; \/* Mot arabe principal un peu moins g\u00e9ant *\/\n        margin-bottom: 10px !important;\n    }\n    \n    \/* 4. MARATHON GRID : \u00c9viter l'\u00e9crasement des boutons carr\u00e9s (25, 50, 75...) *\/\n    .challenge-grid .limit-btn {\n        padding: 12px 0 !important; \/* Boutons moins hauts *\/\n        font-size: 14px !important;\n    }\n}\n\n\/* ============================================================\n   AJUSTEMENTS FINAUX ET COMPACIT\u00c9 (V5 - MINIMAL)\n   ============================================================ *\/\n\n\/* 1. Correction Verticale du Bouton \"M\u00e9moris\u00e9\" (Minimum possible) *\/\n.app-shell #view-learn .btn-anchor {\n    padding-bottom: 15px !important; \/* On r\u00e9duit le padding bas pour le \"poser\" *\/\n    margin-top: 15px !important; \/* Rapproche l\u00e9g\u00e8rement le contenu *\/\n}\n\n\n\/* 2. Typographie QCM Fran\u00e7ais plus fine (S\u00e9lecteur Forc\u00e9) *\/\nbody .app-shell #view-test #qcm-options .btn { \n    font-size: 13px !important; \/* Teste avec 15px pour voir la vraie diff\u00e9rence *\/\n    padding: 10px 15px !important; \n    font-weight: 700 !important;\n    line-height: 1.2 !important;\n}\n\/* L'arabe reste prot\u00e9g\u00e9 *\/\nbody .app-shell #view-test #qcm-options .btn[style*=\"Scheherazade\"] { \n    font-size: 28px !important; \n}\n\n\/* L'arabe reste \u00e0 28px pour \u00eatre bien lisible *\/\n#qcm-options .btn[style*=\"Scheherazade\"] { \n    font-size: 28px !important; \n}\n\n\/* 3. Fix Contraste Mode Nuit : \u00c9claircir Fran\u00e7ais et En-t\u00eates sans toucher l'arabe *\/\n.app-shell.dark-mode #learn-container td {\n    color: #34D399 !important; \/* On garde ton vert extra-lisible *\/\n}\n\/* \u00c9claircit le fran\u00e7ais secondaire (ex: Singular \/ Plural) *\/\n.app-shell.dark-mode #learn-container .sub-trans,\n\/* \u00c9claircit les en-t\u00eates de colonnes (ex: Pass\u00e9, Pr\u00e9sent) *\/\n.app-shell.dark-mode #learn-container th {\n    color: var(--text-main) !important; \/* Force le blanc cass\u00e9 clair *\/\n}\n\n<\/style>\n\n\n<div class=\"app-shell\">\n    \n    <div class=\"header\">\n       <div class=\"top-bar-row\">\n    <button id=\"btn-back\" class=\"back-btn\" onclick=\"window.navigateToMenu()\"><i class=\"fa-solid fa-house\"><\/i><\/button>\n    <span id=\"lvl-txt\">NIVEAU 1<\/span>\n    <div style=\"width: 36px;\"><\/div>\n<\/div>\n              <div class=\"progress-track\"><div class=\"progress-bar\" id=\"pBar\"><\/div><\/div>\n    <\/div>\n<div class=\"screen\" id=\"view-settings\">\n        <div class=\"content-wrapper\">\n            \n            <h2 id=\"lbl-set-title\">Configurez votre exp\u00e9rience<\/h2>            \n            \n           \n<div class=\"section-block\">\n<div id=\"lbl-set-lang\"><i class=\"fa-solid fa-globe\" style=\"color: var(--gold); font-size: 22px;\"><\/i> Langue de l&rsquo;interface<\/div>\n\n                <div class=\"selector-group\">\n                    <button class=\"select-btn active\" id=\"btn-fr-menu\" onclick=\"window.setLang('fr')\">Fran\u00e7ais<\/button>\n                    <button class=\"select-btn\" id=\"btn-en-menu\" onclick=\"window.setLang('en')\">English<\/button>\n                <\/div>\n            <\/div>\n\n            <!-- NOUVEAU BLOC : S\u00c9LECTION DE L'OBJECTIF -->\n            <div class=\"section-block\">\n                <div id=\"lbl-set-goal\" style=\"font-size: 16px; font-weight: 900; color: var(--primary); margin-bottom: 5px; text-align: center; display: flex; justify-content: center; align-items: center; gap: 12px;\">\n                    <i class=\"fa-solid fa-bullseye\" style=\"color: var(--gold); font-size: 22px;\"><\/i> Objectif Quotidien\n                <\/div>\n               \n                <div id=\"lbl-goal-sub\" style=\"font-size: 11px; text-align: center; color: var(--text-muted); margin-bottom: 15px;\">Combien de mots souhaitez-vous apprendre par jour ?<\/div>\n                \n<div class=\"goal-selector\" id=\"goal-options\">\n    <button class=\"goal-btn active\" onclick=\"window.setDailyGoal(10, this)\"><span>10<\/span> <span id=\"lbl-goal-10\">D\u00e9tendu<\/span><\/button>\n    <button class=\"goal-btn\" onclick=\"window.setDailyGoal(20, this)\"><span>20<\/span> <span id=\"lbl-goal-20\">R\u00e9gulier<\/span><\/button>\n    <button class=\"goal-btn\" onclick=\"window.setDailyGoal(30, this)\"><span>30<\/span> <span id=\"lbl-goal-30\">Intensif<\/span><\/button>\n    <button class=\"goal-btn\" onclick=\"window.setDailyGoal(50, this)\"><span>50<\/span> <span id=\"lbl-goal-50\">L\u00e9gende<\/span><\/button>\n<\/div>\n            <\/div>\n           \n\n            <div class=\"section-block\">\n<div id=\"lbl-set-rec1\"><i class=\"fa-solid fa-volume-high\" style=\"color: var(--gold); font-size: 22px;\"><\/i> Voix du Coran<\/div>\n            \n                <select id=\"reciter-select\" class=\"custom-select\" onchange=\"window.setReciter(this.value)\">\n                    <option value=\"Alafasy_128kbps\">Mishary Alafasy<\/option>\n                    <option value=\"Maher_AlMuaiqly_64kbps\">Maher Al Muaiqly<\/option>\n                    <option value=\"Husary_128kbps\">Mahmoud Al-Husary<\/option>\n                    <option value=\"Yasser_Ad-Dussary_128kbps\">Yasser Al-Dosari<\/option>\n                    <option value=\"Nasser_Alqatami_128kbps\">Nasser Al-Qatami<\/option>\n                    <option value=\"Saood_ash-Shuraym_128kbps\">Saud Al-Shuraim<\/option>\n                    <option value=\"Fares_Abbad_64kbps\">Fares Abbad<\/option>\n                    <option value=\"Ghamadi_40kbps\">Saad Al Ghamdi<\/option>\n                    <option value=\"Minshawy_Murattal_128kbps\">Siddiq Al-Minshawi<\/option>\n                    <option value=\"Minshawy_Teacher_128kbps\">Minshawi (Mualim)<\/option>\n                    <option value=\"Abdul_Basit_Murattal_192kbps\">Abdul Basit (Murattal)<\/option>\n                    <option value=\"Abdul_Basit_Mujawwad_128kbps\">Abdul Basit (Mujawwad)<\/option>\n                    <option value=\"Hudhaify_128kbps\">Ali Al-Hudhaify<\/option>\n                    <option value=\"Abdurrahmaan_As-Sudais_192kbps\">As-Sudais<\/option>\n                    <option value=\"Abu_Bakr_Ash-Shaatree_128kbps\">Ash-Shaatree<\/option>\n                    <option value=\"Muhammad_Ayyoub_128kbps\">Muhammad Ayyoub<\/option>\n                    <option value=\"Ali_Jaber_64kbps\">Ali Jaber<\/option>\n                    <option value=\"Abdullah_Basfar_192kbps\">Abdullah Basfar<\/option>\n                    <!-- Tu peux rajouter les 12 autres de ta vraie liste juste ici ! -->\n                <\/select>\n            <\/div>\n            \n            <div class=\"btn-anchor\">\n                <button id=\"btn-save-settings\" class=\"btn btn-next\" onclick=\"window.saveSettingsAndGo()\">\n                    Enregistrer et continuer\n                <\/button>\n            <\/div>\n\n        <\/div>\n    <\/div>   \n    <div class=\"screen active\" id=\"view-menu\" style=\"padding-top: 0;\">\n        <div class=\"content-wrapper\">\n            <div style=\"display: flex; justify-content: center; gap: 15px; padding: 25px 20px; align-items: center; flex-wrap: wrap;\">\n                <button onclick=\"window.navigateTo('view-settings')\" class=\"ios-btn\"><i class=\"fa-solid fa-gear\"><\/i><\/button>\n                <button onclick=\"window.toggleTheme()\" class=\"ios-btn\" id=\"btn-theme\"><i class=\"fa-solid fa-moon\"><\/i><\/button>\n                <button onclick=\"window.openLeaderboard()\" class=\"ios-btn\" style=\"border-color: var(--gold);\"><i class=\"fa-solid fa-trophy\" style=\"color: var(--gold);\"><\/i><\/button>\n                <button onclick=\"window.openStats()\" class=\"ios-btn\"><i class=\"fa-solid fa-chart-simple\"><\/i><\/button>\n                <button onclick=\"window.openLexicon()\" class=\"ios-btn\"><i class=\"fa-solid fa-book-open\"><\/i><\/button>\n            <\/div>\n\n<div class=\"logo-wrapper\">\n\u00a0 \u00a0 <img decoding=\"async\" src=\"https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/05\/1000025486-removebg-preview.png\" alt=\"Tazkira Academy Logo\" class=\"app-main-logo\" style=\"width: 290px; max-width: 90vw; height: auto;\">\n<\/div>\n           <!-- NOUVEAU BLOC : LA BARRE D'OBJECTIF DU JOUR -->\n            <div class=\"daily-goal-container\" id=\"daily-goal-ui\">\n                <div class=\"daily-goal-header\">\n                    <div class=\"daily-goal-title\" id=\"lbl-daily-title\"><i class=\"fa-solid fa-fire\"><\/i> Objectif du jour<\/div>\n                    <div class=\"daily-goal-count\"><span id=\"daily-current\">0<\/span> \/ <span id=\"daily-target\">10<\/span><\/div>\n                <\/div>\n                <div class=\"daily-goal-track\">\n                    <div class=\"daily-goal-bar\" id=\"daily-bar-fill\"><\/div>\n                <\/div>\n            <\/div>\n<div class=\"dash-row\">\n    <button onclick=\"window.toggleMenu()\" class=\"btn-dash\">\n        <i class=\"fa-solid fa-layer-group\"><\/i>\n        <span class=\"btn-dash-label\"><span id=\"lbl-learn-title\">Apprendre<\/span><br><span id=\"lbl-learn-sub\" style=\"font-weight: 800; font-size: 10px; color: var(--text-muted); text-transform:none;\">Choisir un th\u00e8me<\/span><\/span>\n    <\/button>\n    <div class=\"btn-dash\">\n        <i class=\"fa-solid fa-fire\"><\/i>\n        <span class=\"btn-dash-label\"><span id=\"lbl-streak-title\">S\u00e9rie<\/span><br><span style=\"font-weight: 800; font-size: 10px; color: var(--text-muted); text-transform:none;\"><span id=\"streak-val\">0<\/span> <span id=\"lbl-streak-days\">jours<\/span><\/span><\/span>\n    <\/div>\n<\/div>\n\n<div id=\"urgent-review-banner\" style=\"display: none;\">\n    <div class=\"memrise-review-card\" onclick=\"window.startRevisionMode()\">\n        <div class=\"review-icon-box\">\n            <i class=\"fa-solid fa-brain\"><\/i>\n        <\/div>\n        <div class=\"review-text-box\">\n            <div class=\"review-title\" id=\"lbl-review-title\">M\u00e9moire affaiblie !<\/div>\n            <div class=\"review-subtitle\"><span id=\"urgent-rev-count\">0<\/span> <span id=\"lbl-review-sub\">mots \u00e0 renforcer<\/span><\/div>\n        <\/div>\n        <div class=\"review-action\">\n            <i class=\"fa-solid fa-chevron-right\"><\/i>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div id=\"resume-container\" style=\"display:none; width: 100%;\">\n    <div class=\"resume-card-pro\">\n        <div id=\"lbl-session-title\" style=\"font-size: 11px; font-weight: 900; color: var(--gold); text-transform: uppercase; letter-spacing: 1px;\">Session en cours<\/div>\n        <div id=\"lbl-session-sub\" style=\"font-size: 15px; font-weight: 800; margin-top: 5px;\">Reprendre l&rsquo;apprentissage<\/div>\n        <button id=\"btn-resume-game\" class=\"btn btn-outline\" style=\"background: transparent; color: var(--gold); border-color: var(--gold); width: auto; padding: 12px 25px; margin-top: 15px;\" onclick=\"window.resumeGame()\">Continuer<\/button>\n    <\/div>\n<\/div>\n        <\/div>\n    <\/div>\n<div class=\"screen\" id=\"view-modules\">\n        <div class=\"content-wrapper\">\n            <h2 id=\"lbl-modules-title\" style=\"margin-bottom: 25px; text-align:center;\">Modules<\/h2>\n\n            <div class=\"modes-grid\">\n                <div class=\"modern-tile\" onclick=\"window.launchMode('qcm-mix')\">\n                    <div class=\"mode-tile-icon\"><i class=\"fa-solid fa-shuffle\"><\/i><\/div>\n                    <div class=\"modern-tile-title\" id=\"lbl-tile-qcm\">QCM MIXTE<\/div>\n                <\/div>\n                <div class=\"modern-tile\" onclick=\"window.launchMode('ar-fr')\">\n                    <div class=\"mode-tile-icon\"><i class=\"fa-solid fa-language\"><\/i><\/div>\n                    <div class=\"modern-tile-title\" id=\"lbl-tile-ar-fr\">\u0639 \u2190 FR<\/div>\n                <\/div>\n                <div class=\"modern-tile\" onclick=\"window.launchMode('fr-ar')\">\n                    <div class=\"mode-tile-icon\"><i class=\"fa-solid fa-pen-nib\"><\/i><\/div>\n                    <div class=\"modern-tile-title\" id=\"lbl-tile-fr-ar\">FR \u2190 \u0639<\/div>\n                <\/div>\n                <div class=\"modern-tile\" onclick=\"window.launchMode('forms')\">\n                    <div class=\"mode-tile-icon\"><i class=\"fa-solid fa-puzzle-piece\"><\/i><\/div>\n                    <div class=\"modern-tile-title\" id=\"lbl-tile-forms\">MA\u00ceTRISE<\/div>\n                <\/div>\n            <\/div>\n\n            <div style=\"margin: 30px 0 15px 0;\">\n                <div id=\"lbl-rand-words\" style=\"font-size:12px; font-weight:900; color:var(--text-muted); margin-bottom:12px; text-transform:uppercase; letter-spacing:1px;\">Mots al\u00e9atoires (Marathon) :<\/div>\n                <div class=\"challenge-grid\">\n                    <button type=\"button\" class=\"limit-btn active\" onclick=\"window.setMarathonLimit(25, this)\">25<\/button>\n                    <button type=\"button\" class=\"limit-btn\" onclick=\"window.setMarathonLimit(50, this)\">50<\/button>\n                    <button type=\"button\" class=\"limit-btn\" onclick=\"window.setMarathonLimit(75, this)\"><i class=\"fa-solid fa-lock\" style=\"font-size:12px;\"><\/i> 75<\/button>\n                    <button type=\"button\" class=\"limit-btn\" onclick=\"window.setMarathonLimit(100, this)\"><i class=\"fa-solid fa-lock\" style=\"font-size:12px;\"><\/i> 100<\/button>\n                <\/div>\n                <input type=\"hidden\" id=\"marathon-limit\" value=\"25\">\n            <\/div>\n\n            <div class=\"marathon-grid\" style=\"margin-bottom: 40px;\">\n                <div class=\"modern-tile\" onclick=\"window.startMarathonMode('trans')\">\n                    <div class=\"mode-tile-icon gold\"><i class=\"fa-solid fa-language\"><\/i><\/div>\n                    <div class=\"modern-tile-title\" id=\"lbl-tile-mara-trans\">MARATHON TRADUCTION<\/div>\n                <\/div>\n                <div class=\"modern-tile\" onclick=\"window.startMarathonMode('forms')\">\n                    <div class=\"mode-tile-icon gold\"><i class=\"fa-solid fa-puzzle-piece\"><\/i><\/div>\n                    <div class=\"modern-tile-title\" id=\"lbl-tile-mara-forms\">MARATHON DES FORMES<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>    \n   <div class=\"screen\" id=\"view-learn\">\n        <div class=\"content-wrapper\">\n            <div id=\"learn-container\"><\/div>\n            <div class=\"btn-anchor\">\n                <button id=\"btn-next-learn\" class=\"btn btn-next\" onclick=\"window.nextLearn()\"><i class=\"fa-solid fa-check\"><\/i> M\u00c9MORIS\u00c9 \u2192 CONTINUER<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<div class=\"screen\" id=\"view-test\">\n        <div class=\"content-wrapper\">\n            \n            <!-- ZONE 1 : LA QUESTION ET LE CLAVIER -->\n            <div id=\"q-zone\" style=\"flex:1; display:flex; flex-direction:column;\">\n                <div id=\"q-counter\" style=\"text-align:center; font-weight:900; color:var(--text-muted); font-size:11px; margin-bottom:15px; display:none; text-transform: uppercase; letter-spacing: 1px;\"><\/div>\n                <h3 id=\"q-title\" style=\"text-align:center; margin:0 0 15px 0; font-size:13px; font-weight: 900; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;\">TRADUISEZ :<\/h3>\n                \n                <div class=\"section-block\" style=\"border-radius: 20px; border:none; background:transparent;\">\n                    <div class=\"section-body\" style=\"padding: 10px 0;\">\n                        <div class=\"ar-main\" id=\"tAr\"><\/div>\n                    <\/div>\n                <\/div>\n                \n                <input type=\"text\" id=\"tInput\" placeholder=\"...\" autocorrect=\"off\" autocapitalize=\"off\">\n                <div id=\"virtual-keyboard\"><\/div>\n                \n                <div class=\"btn-anchor\">\n                    <button id=\"btn-check\" class=\"btn btn-next\" onclick=\"window.check()\">V\u00c9RIFIER &nbsp; <i class=\"fa-solid fa-arrow-right\"><\/i><\/button>\n                <\/div>\n            <\/div>\n\n          \n         \n<div id=\"mould-result\" class=\"mould-content\">\n                <div id=\"feedback-msg\" style=\"padding: 18px; border-radius: 16px; text-align: center; font-weight: 900; margin-bottom: 20px; font-size: 16px; display:flex; align-items:center; justify-content:center; gap:10px; background: white; border: 1px solid var(--border);\"><\/div>\n                \n              <h3 id=\"lbl-proof-title\" style=\"text-align:center; font-size:13px; font-weight: 900; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin: 10px 0 20px 0;\">\n    <i class=\"fa-solid fa-book-open\"><\/i> D\u00e9couvrir la preuve textuelle\n<\/h3>\n                <div id=\"accordeons-container\" style=\"display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px;\">\n                    <\/div>\n<audio id=\"aud\"><\/audio>                <div class=\"btn-anchor\">\n                    <button id=\"btn-next-word\" class=\"btn btn-next\" onclick=\"window.confirmMould()\">CONTINUER &nbsp; <i class=\"fa-solid fa-arrow-right\"><\/i><\/button>\n                <\/div>\n            <\/div>\n\n \n\n        <\/div> <!-- Fin de content-wrapper -->\n    <\/div>\n  \n    <div class=\"screen\" id=\"view-lock\">\n        <div class=\"content-wrapper\" style=\"text-align:center; padding-top:40px;\">\n            <div style=\"font-size:70px; margin-bottom: 20px; color: var(--gold);\"><i class=\"fa-regular fa-gem\"><\/i><\/div>\n            <h2 id=\"ui-lock-title\" style=\"font-size: 32px; color: var(--primary); font-weight: 900; margin-bottom: 10px;\">Premium<\/h2>\n            <p id=\"ui-lock-p\" style=\"font-size:16px; color: var(--text-muted); margin-bottom: 40px; font-weight: 700; line-height: 1.6; padding: 0 20px;\">D\u00e9bloquez l&rsquo;acc\u00e8s illimit\u00e9 \u00e0 partir du Niveau 6 pour seulement 29,90\u20ac \/ an.<\/p>\n          <button onclick=\"window.location.href='https:\/\/www.tazkiraacademy.com\/products\/abonnement-premium-1-an\/'\" class=\"btn btn-next\" style=\"background: var(--gold); color: white; border-color:var(--gold); box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);\"><i class=\"fa-solid fa-unlock-keyhole\"><\/i> S&rsquo;ABONNER MAINTENANT<\/button>\n            <button onclick=\"window.navigateToMenu()\" class=\"btn btn-outline\" style=\"border-color:transparent; color: var(--text-muted); margin-top: 15px;\">RETOUR AU MENU<\/button>\n        <\/div>\n    <\/div>\n\n    <div class=\"screen\" id=\"view-lexicon\">\n        <div class=\"content-wrapper\">\n            <h2 id=\"lbl-lexicon-title\" style=\"text-align:center; color:var(--primary); font-weight:900; margin-top:0; text-transform:uppercase;\"><i class=\"fa-solid fa-book-open\"><\/i> LEXIQUE<\/h2>\n            <p id=\"lbl-lexicon-sub\" style=\"text-align:center; color:var(--text-muted); font-size:13px; font-weight:800; margin-top:-10px; margin-bottom:25px;\">Mots d\u00e9bloqu\u00e9s jusqu&rsquo;au niveau actuel<\/p>\n\n<div class=\"selector-group\" style=\"margin-bottom: 20px; padding: 0 10px;\">\n            <button class=\"select-btn active\" id=\"btn-tab-noms\" onclick=\"window.switchLexiconTab('noms')\">Noms<\/button>\n            <button class=\"select-btn\" id=\"btn-tab-verbes\" onclick=\"window.switchLexiconTab('verbes')\">Verbes<\/button>\n        <\/div>\n\n            <div id=\"lexicon-list\" style=\"overflow-y: auto; flex: 1; padding-bottom: 20px; display:flex; flex-direction:column; gap:12px;\"><\/div>\n           \n        <\/div>\n    <\/div>\n\n    <div class=\"screen\" id=\"view-stats\" style=\"flex-direction: column; height: 100%;\">\n        <div class=\"content-wrapper\">\n            <h2 id=\"lbl-stats-title\" style=\"text-align:center; color:var(--primary); font-weight:900; margin-top:0; text-transform:uppercase;\">\n                <i class=\"fa-solid fa-chart-simple\"><\/i> STATISTIQUES\n            <\/h2>\n            <p id=\"lbl-stats-sub\" style=\"text-align:center; color:var(--text-muted); font-size:13px; font-weight:800; margin-top:-10px; margin-bottom:25px;\">Suivez votre progression<\/p>\n            <div id=\"stats-container\" style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; padding: 10px; flex:1; align-content: start;\">\n            <\/div>\n           \n        <\/div>\n    <\/div>\n\n    <div class=\"screen\" id=\"view-leaderboard\" style=\"flex-direction: column; height: 100%;\">\n        <div class=\"content-wrapper\">\n            <h2 id=\"lbl-lead-title\" style=\"text-align:center; color:var(--gold); font-weight:900; margin-top:0; text-transform:uppercase;\">\n                <i class=\"fa-solid fa-trophy\"><\/i> CLASSEMENT\n            <\/h2>\n            \n            <div class=\"selector-group\" style=\"margin-bottom: 20px; padding: 0 10px;\">\n                <button class=\"select-btn active\" id=\"btn-tab-gen\" onclick=\"window.loadLeaderboard('general')\">G\u00e9n\u00e9ral<\/button>\n                <button class=\"select-btn\" id=\"btn-tab-lvl\" onclick=\"window.loadLeaderboard('niveau')\">Mon Niveau<\/button>\n            <\/div>\n\n            <div id=\"leaderboard-container\" style=\"flex: 1; overflow-y: auto; padding: 0 10px;\">\n                <div id=\"lead-loading\" style=\"text-align:center; color:var(--text-muted); padding: 40px 20px;\">\n                    <i class=\"fa-solid fa-circle-notch fa-spin\" style=\"font-size: 30px; margin-bottom:15px; color:var(--gold);\"><\/i><br>\n                    R\u00e9cup\u00e9ration des champions&#8230;\n                <\/div>\n                <div id=\"lead-list\" style=\"display:flex; flex-direction:column; gap:12px;\"><\/div>\n            <\/div>\n            \n            \n        <\/div>\n    <\/div>\n\n<div class=\"screen\" id=\"view-result-end\">\n        <div class=\"content-wrapper\">\n            <div id=\"level-status\" style=\"text-align:center; font-weight:800; padding:40px 20px; border-radius:var(--radius-card); margin-bottom: 30px; font-size:18px; color: white; display: flex; flex-direction: column; align-items: center; gap: 12px;\"><\/div>\n            <div id=\"end-level-choices\" style=\"display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%;\">\n                <button id=\"btn-next-lvl\" class=\"btn btn-next\"><\/button>\n                <button id=\"btn-main-menu-end\" onclick=\"window.navigateToMenu()\" class=\"btn\" style=\"background: transparent; color: var(--primary); border: 2px solid var(--border);\"><i class=\"fa-solid fa-house\"><\/i> RETOUR AU MENU<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div id=\"levels-overlay\" style=\"display:none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(28, 25, 23, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 99999; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box;\" onclick=\"this.style.display='none'\">\n   <div style=\"background:var(--bg-app); width:100%; max-width:1200px; max-height:85vh; padding:30px 25px; border-radius:var(--radius-card); display:flex; flex-direction:column; box-shadow: 0 15px 50px rgba(0,0,0,0.4);\" onclick=\"event.stopPropagation()\">\n        \n        <div style=\"display: flex; align-items: center; margin-bottom: 25px; position: relative;\">\n            <!-- NOUVEAU BOUTON MAISON (Fermer la modale) -->\n            <button id=\"btn-close-overlay\" class=\"ios-btn\" style=\"position: absolute; left: 0; top: 0; border:none; box-shadow:none; background:transparent;\" onclick=\"document.getElementById('levels-overlay').style.display='none'\">\n                <i class=\"fa-solid fa-house\"><\/i>\n            <\/button>\n\n            <!-- BOUTON RETOUR EXISTANT (G\u00e9r\u00e9 par le JS) -->\n            <button id=\"btn-back-theme\" class=\"ios-btn\" style=\"display: none; position: absolute; left: 0; top: 0; border:none; box-shadow:none; background:transparent;\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/button>\n            \n            <h3 id=\"lbl-choose-lvl\" style=\"color:var(--primary); margin:0; width:100%; text-align:center; font-size:16px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px;\"><i class=\"fa-solid fa-map-location-dot\"><\/i> CHOISIR UN TH\u00c8ME<\/h3>\n        <\/div>\n\n\n        <div style=\"overflow-y:auto; flex: 1; padding-right: 5px;\">\n            <div id=\"themes-list\"><\/div>\n            <div id=\"levels-grid\" style=\"display:none; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:15px;\" onclick=\"setTimeout(function(){ document.getElementById('levels-overlay').style.display='none'; window.navigateTo('view-modules'); }, 200);\"><\/div>        \n        <\/div>\n    <\/div>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"footnotes":""},"class_list":["post-74","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.tazkiraacademy.com\/en\/wp-json\/wp\/v2\/pages\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tazkiraacademy.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tazkiraacademy.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tazkiraacademy.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tazkiraacademy.com\/en\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":104,"href":"https:\/\/www.tazkiraacademy.com\/en\/wp-json\/wp\/v2\/pages\/74\/revisions"}],"predecessor-version":[{"id":526,"href":"https:\/\/www.tazkiraacademy.com\/en\/wp-json\/wp\/v2\/pages\/74\/revisions\/526"}],"wp:attachment":[{"href":"https:\/\/www.tazkiraacademy.com\/en\/wp-json\/wp\/v2\/media?parent=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}