{"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-10-11T04:53:17","modified_gmt":"2026-10-11T04:53:17","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\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.9.3\/dist\/confetti.browser.min.js\"><\/script>\n\n\n\n<script src=\"https:\/\/tazkiraacademy.com\/app-data\/lisan-forge.js?v1\"><\/script>\n\n\n\n\n<script src=\"https:\/\/tazkiraacademy.com\/app-data\/lisan-mots.js?v7\"><\/script>\n\n\n\n<script src=\"https:\/\/tazkiraacademy.com\/app-data\/alphabet-core.js?v1\"><\/script>\n\n\n\n\n<script src=\"https:\/\/tazkiraacademy.com\/app-data\/lisan-architecture.js?v1\"><\/script>\n\n\n\n\n<style>\n\n\n\n\/* ============================================================\n\n\n\nTAZKIRA - DESIGN PREMIUM, \u00c9PUR\u00c9 & OPTIMIS\u00c9 (V3 - UNIFI\u00c9)\n\n\n\n============================================================ *\/\n\n\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\n\n\n\n\n\n:root {\n\n\n\n --primary: #043E2E; --primary-light: #059669; --gold: #D4AF37; --gold-light: #FEF9C3;\n\n\n\n --danger: #E11D48; --success: #10B981; --dark: #0F172A; --bg-app: #F8FAFC;\n\n\n\n --surface: #FFFFFF; --text-muted: #64748B; --border: #E2E8F0;\n\n\n\n --radius-card: 24px; --shadow-premium: 0 10px 40px -10px rgba(0,0,0,0.04);\n\n\n\n}\n\n\n\n\n\n\n\nbody { margin: 0; padding: 0; background-color: var(--bg-app); width: 100vw; height: 100vh; overflow: hidden; }\n\n\n\n\n\n\n\n.app-shell {\n\n\n\n width: 100%; max-width: 100%; height: 100dvh;\n\n\n\n background-color: var(--bg-app);\n\n\n\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\n\n\n background-repeat: no-repeat; background-position: top; background-size: cover;\n\n\n\n display: flex; flex-direction: column; font-family: 'Nunito', sans-serif;\n\n\n\n color: var(--dark); overflow: hidden; position: relative; z-index: 1;\n\n\n\n}\n\n\n\n\n\n\n\n.app-shell .header { padding: 20px 20px 15px 20px; background: transparent; z-index: 10; display: flex; flex-direction: column; flex-shrink: 0; }  \n\n\n\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\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\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\n\n\n.app-shell .back-btn:active { background: var(--border); }\n\n\n\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\n\n\n.app-shell .progress-bar { height: 100%; width: 0%; background: var(--gold); transition: width 0.4s ease-out; }\n\n\n\n\n\n\n\n\/* SCREENS *\/\n\n\n\n.app-shell .screen { display: none; padding: 25px 20px 60px 20px; flex: 1; flex-direction: column; overflow-y: auto; overflow-x: hidden; will-change: transform, opacity; }   \n\n\n\n.app-shell .screen.active { display: flex; animation: slideRightToLeft 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards; }\n\n\n\n@keyframes slideRightToLeft { from { opacity: 0.5; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }\n\n\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\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\n\n\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\n\n\n.app-shell .section-body { padding: 15px; display: flex; flex-direction: column; align-items: center;}  \n\n\n\n\n\n\n\n\n\n\n\n\/* BOUTONS GLOBAUX - CORRIG\u00c9S POUR PC & MOBILE *\/\n\n\n.app-shell .btn-anchor {\n margin-top: auto !important; position: fixed !important; bottom: 0; left: 0; width: 100%;\n\n\n\n\n background: linear-gradient(to top, var(--bg-app) 80%, transparent);\n\n\n\n padding: 15px 0 20px 0; z-index: 90;\n\n\n\n pointer-events: none !important; \/* Le d\u00e9grad\u00e9 devient un fant\u00f4me, les clics passent au travers ! *\/\n\n\n\n}\n\n\n\n\/* On rend uniquement le bouton solide et cliquable *\/\n\n\n\n.app-shell .btn-anchor .btn { pointer-events: auto !important; position: relative; z-index: 100; }\n\n\n\n\n\n\n\n\/* Le champ de texte passe au premier plan absolu (Z-Index 999) *\/\n\n\n\n.app-shell input, .app-shell .form-test-input { position: relative; z-index: 999 !important; pointer-events: auto !important; }\n\n\n\n\n\n\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\n\n\n.app-shell .btn:active { transform: scale(0.96); }\n\n\n\n.app-shell .btn-next { background: var(--primary); color: white; box-shadow: 0 10px 25px rgba(6, 78, 59, 0.25); border-radius: 50px; font-size: 14px; font-weight: 900; letter-spacing: 1.5px; padding: 14px 20px; width: 90%; max-width: 400px; margin: 0 auto; text-transform: uppercase; position: relative; overflow: hidden;}\n\n\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\n\n.app-shell .btn-next::after { content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-25deg); animation: refletLuxe 4s infinite; pointer-events: none; }\n\n\n\n@keyframes refletLuxe { 0% { left: -150%; } 20% { left: 200%; } 100% { left: 200%; } }\n\n\n\n\n\n\n\n\n\n\n\n\/* ============================================================\n\n\n\n\ud83d\ude80 MENUS & NAVIGATION (RECTANGULAIRE)\n\n\n\n============================================================ *\/\n\n\n\n.taz-action-stack { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-bottom: 25px !important; width: 100% !important; }\n\n\n\n.taz-rect-btn { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 16px !important; padding: 15px !important; display: flex !important; align-items: center !important; gap: 15px !important; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; text-decoration: none !important; }\n\n\n\n.taz-rect-btn:active { transform: scale(0.97) !important; border-color: var(--gold) !important; }\n\n\n\n.taz-rect-btn.taz-hero-btn { border: 2px solid var(--primary) !important; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important; }\n\n\n\n\n\n\n\n.taz-rect-icon { width: 45px !important; height: 45px !important; min-width: 45px !important; border-radius: 12px !important; display: flex !important; justify-content: center !important; align-items: center !important; font-size: 20px !important; }\n\n\n\n.taz-rect-icon.gold { background: rgba(212, 175, 55, 0.15) !important; color: var(--gold) !important; }\n\n\n\n.taz-rect-icon.blue { background: rgba(59, 130, 246, 0.1) !important; color: #3B82F6 !important; }\n\n\n\n.taz-rect-icon.green { background: rgba(16, 185, 129, 0.1) !important; color: #10B981 !important; }\n\n\n\n.taz-rect-icon.purple { background: rgba(139, 92, 246, 0.1) !important; color: #8B5CF6 !important; }\n\n\n\n\n\n\n\n.taz-rect-text { flex: 1 !important; text-align: left !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }\n\n\n\n.taz-rect-text .title { font-size: 15px !important; font-weight: 900 !important; color: var(--dark) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 2px !important; line-height: 1.2 !important; }\n\n\n\n.taz-rect-btn.taz-hero-btn .taz-rect-text .title { color: var(--primary) !important; font-size: 16px !important; }\n\n\n\n.taz-rect-text .subtitle { font-size: 11px !important; font-weight: 700 !important; color: var(--text-muted) !important; line-height: 1.2 !important; }\n\n\n\n.taz-rect-btn .chevron { color: #CBD5E1 !important; font-size: 14px !important; }\n\n\n\n.quick-actions-title { font-size: 11px; font-weight: 900; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin: 10px 0 10px 5px; }\n\n\n\n\n\n\n\n\/* HEADER STREAK & LOGO & ICONS *\/\n\n\n\n.header-streak { display: flex; align-items: center; gap: 6px; background: rgba(245, 158, 11, 0.1); padding: 8px 14px; border-radius: 20px; color: #F59E0B; font-weight: 900; font-size: 14px; border: 1px solid rgba(245, 158, 11, 0.2); }\n\n\n\n.logo-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; margin: 20px 0 40px 0; }\n\n\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\n\n\n.ios-btn:active { background: var(--border); }\n\n\n\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); box-shadow: 0 10px 25px rgba(4, 62, 46, 0.2); }\n\n\n\n.challenge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 25px; width: 100%; }\n\n\n\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\n\n\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\n\n\n\n\n\n\/* BANNI\u00c8RE MEMRISE & OBJECTIFS *\/\n\n\n\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\n\n\n.daily-goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }\n\n\n\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\n\n\n.daily-goal-count { font-size: 14px; font-weight: 900; color: var(--primary); }\n\n\n\n.daily-goal-track { height: 8px; background: #F3F4F6; border-radius: 10px; overflow: hidden; width: 100%; }\n\n\n\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\n\n\n.daily-goal-completed .daily-goal-bar { background: linear-gradient(90deg, var(--success), #34D399); }\n\n\n\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: 0.3s; position: relative; overflow: hidden; width: 100%; box-sizing: border-box; }\n\n\n\n.memrise-review-card:active { transform: scale(0.96); box-shadow: 0 4px 10px rgba(249, 115, 22, 0.1); }\n\n\n\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; }\n\n\n\n.review-text-box { flex: 1; }\n\n\n\n.review-title { font-size: 15px; font-weight: 900; color: #C2410C; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }\n\n\n\n.review-subtitle { font-size: 13px; font-weight: 800; color: #EA580C; }\n\n\n\n.review-action { color: #F97316; font-size: 18px; font-weight: 900; }\n\n\n\n\/* \ud83d\ude80 SURLIGNAGE P\u00c9DAGOGIQUE (Lexical Highlighting) *\/\n.highlight {\n  background: rgba(16, 185, 129, 0.15);\n  color: var(--success);\n  font-weight: 900;\n  padding: 2px 6px;\n  border-radius: 6px;\n  border-bottom: 2px solid var(--success);\n  display: inline-block;\n  line-height: 1.2;\n}\n\n.app-shell.dark-mode .highlight {\n  background: rgba(52, 211, 153, 0.15);\n  color: #34D399;\n  border-bottom-color: #34D399;\n}\n\n\n\n\n\n\/* \ud83d\ude80 CARROUSEL INVISIBLE (Glissement natif tactile) *\/\n.swipe-carousel {\n  -ms-overflow-style: none; \/* Cache la scrollbar sur Edge *\/\n  scrollbar-width: none; \/* Cache la scrollbar sur Firefox *\/\n}\n.swipe-carousel::-webkit-scrollbar {\n  display: none; \/* Cache la scrollbar sur Chrome\/Safari\/iOS *\/\n}\n\n\n\/* ============================================================\n\n\n\nREGLAGES (OPTIMIS\u00c9 RESPONSIVE GRID + PEPS PREMIUM)\n\n\n\n============================================================ *\/\n\n\n\n.settings-container {\n\n\n\n width: 100%;\n\n\n\n max-width: 900px;\n\n\n\n margin: 0 auto;\n\n\n\n padding-top: 40px; \/* \ud83d\ude80 FIX : Repousse le titre sous la barre ! *\/\n\n\n\n padding-bottom: 80px;\n\n\n\n display: flex;\n\n\n\n flex-direction: column;\n\n\n\n flex: 1;\n\n\n\n box-sizing: border-box; \/* \ud83d\ude80 FIX : Emp\u00eache le d\u00e9bordement horizontal ! *\/\n\n\n\n}\n\n\n\n\n\n\n\n.settings-title { font-family: 'Nunito', sans-serif; font-size: 32px; font-weight: 900; color: var(--primary); margin-bottom: 35px; text-align: center; line-height: 1.2; letter-spacing: -0.5px; text-shadow: 0 4px 15px rgba(4, 62, 46, 0.08); }\n\n\n\n\n\n\n\n\/* La Grille Magique Responsive *\/\n\n\n\n.settings-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; width: 100%; box-sizing: border-box; }\n\n\n\n@media (min-width: 768px) {\n\n\n\n .settings-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }\n\n\n\n .settings-card.full-width { grid-column: span 2; }\n\n\n\n}\n\n\n\n\n\n\n\n\/* \ud83c\udf1f LE PEPS : D\u00e9grad\u00e9s subtils, Box-Sizing et Ombres douces *\/\n\n\n\n.settings-card {\n\n\n\n box-sizing: border-box;\n\n\n\n background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);\n\n\n\n border: 2px solid var(--border);\n\n\n\n border-radius: var(--radius-card);\n\n\n\n padding: 25px;\n\n\n\n box-shadow: 0 8px 25px rgba(0,0,0,0.03);\n\n\n\n display: flex;\n\n\n\n flex-direction: column;\n\n\n\n justify-content: space-between;\n\n\n\n transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\n\n\n\n position: relative;\n\n\n\n overflow: hidden;\n\n\n\n}\n\n\n\n\/* La petite barre magique qui s'illumine en haut de la carte au survol (PC) *\/\n\n\n\n.settings-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: transparent; transition: 0.3s; }\n\n\n\n.settings-card:hover { border-color: var(--gold); box-shadow: 0 15px 35px rgba(212, 175, 55, 0.15); transform: translateY(-3px); }\n\n\n\n.settings-card:hover::before { background: var(--gold); }\n\n\n\n\n\n\n\n.settings-card-header { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 900; color: var(--primary); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; border-bottom: 2px dashed rgba(0,0,0,0.06); padding-bottom: 15px; }\n\n\n\n.settings-card-header i { font-size: 20px; padding: 12px; background: rgba(4, 62, 46, 0.05); border-radius: 12px; color: var(--primary); }\n\n\n\n.settings-subtitle { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 20px; font-weight: 700; line-height: 1.5; }\n\n\n\n\n\n\n\n\/* \ud83c\udf1f LE PEPS : Boutons dynamiques *\/\n\n\n\n.lang-btn { box-sizing: border-box; flex: 1; padding: 15px; border: 2px solid var(--border); border-radius: 14px; background: #FFF; color: var(--text-muted); font-weight: 900; font-size: 14px; cursor: pointer; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }\n\n\n\n.lang-btn:active { transform: scale(0.95); }\n\n\n\n.lang-btn.active { border-color: var(--primary); background: linear-gradient(135deg, var(--primary) 0%, #064E3B 100%); color: #FFF; box-shadow: 0 8px 20px rgba(4, 62, 46, 0.25); }\n\n\n\n\n\n\n\n.goal-bubbles-container { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 auto; gap: 8px; box-sizing: border-box; }\n\n\n\n.goal-bubble { width: 55px; height: 55px; border-radius: 50%; border: 2px solid var(--border); background: #FFF; color: var(--text-muted); font-size: 18px; font-weight: 900; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 10px rgba(0,0,0,0.02); flex-shrink: 0; }\n\n\n\n.goal-bubble.active { border-color: var(--gold); background: linear-gradient(135deg, var(--gold) 0%, #B48E2D 100%); color: #FFF; transform: scale(1.15); box-shadow: 0 8px 20px rgba(212, 175, 55, 0.35); border: none; }\n\n\n\n.goal-text-dynamic { text-align: center; font-weight: 900; color: var(--primary); margin-top: 25px; font-size: 15px; letter-spacing: 1px; background: rgba(4, 62, 46, 0.05); padding: 8px 20px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; width: auto; margin-left: auto; margin-right: auto; }\n\n\n\n\n\n\n\nselect.styled-select { box-sizing: border-box; -webkit-appearance: none !important; appearance: none !important; color: var(--dark) !important; height: 60px !important; width: 100%; padding: 0 20px; border: 2px solid var(--border); border-radius: 14px; background-color: #FFF; font-size: 16px; font-weight: 800; outline: none; cursor: pointer; font-family: 'Nunito', sans-serif; box-shadow: 0 4px 10px rgba(0,0,0,0.02); transition: 0.3s;\n\n\n\nbackground-image: url(\"data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23CBD5E1%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E\"); background-repeat: no-repeat; background-position: right 20px top 50%; background-size: 14px auto; }\n\n\n\nselect.styled-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(4, 62, 46, 0.1); }\n\n\n\n\n\n\n\n\/* Ajustements Mobile Ultra-Stricts (Anti-D\u00e9bordement) *\/\n\n\n\n@media (max-width: 400px) {\n\n\n\n .settings-card { padding: 20px 15px; }\n\n\n\n .goal-bubble { width: 45px; height: 45px; font-size: 15px; }\n\n\n\n .lang-btn { padding: 12px 5px; font-size: 12px; }\n\n\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\/* ============================================================\n\n\n\n\ud83c\udf1f NOUVEAU DESIGN : ONGLETS, LEXIQUE, STATS & LEADERBOARD\n\n\n\n============================================================ *\/\n\n\n\n\/* Les Onglets iOS-style *\/\n\n\n\n.taz-tabs { display: flex; background: var(--border); border-radius: 14px; padding: 4px; margin-bottom: 20px; }\n\n\n\n.taz-tab { flex: 1; padding: 12px 10px; border: none; background: transparent; border-radius: 10px; font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); cursor: pointer; transition: 0.3s; }\n\n\n\n.taz-tab.active { background: var(--surface); color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }\n\n\n\n\n\n\n\n\/* --- LEXIQUE --- *\/\n\n\n\n.lexicon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; }\n\n\n\n.lexicon-col { display: flex; flex-direction: column; gap: 10px; }\n\n\n\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\n\n\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\n\n\n.lexicon-item-pro:active { border-color: var(--gold); transform: scale(0.98); }\n\n\n\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\n\n\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\n\n\n\n\n\n\/* OVERLAY ET TH\u00c8MES *\/\n\n\n\n#levels-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }\n\n\n\n#themes-list { display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 600px; margin: 0 auto; }   \n\n\n\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\n\n\n.theme-card-pro:active { transform: scale(0.98); border-color: var(--primary); }\n\n\n\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\n\n\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\n\n\n\n\n\n\/* JEU ET QCM *\/\n\n\n\n#view-learn { padding-left: 8px; padding-right: 8px; }\n\n\n\n#learn-container { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;}\n\n\n\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\n\n\n#learn-container .section-body { padding: 15px 15px 10px 15px; }\n\n\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\n\n\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\n\n#learn-container table { width: 100%; border-collapse: collapse; margin-top: 0; table-layout: fixed; }\n\n\n\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\n\n\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\n\n\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\n\n\n\n\n\n#q-zone .section-block { background: transparent; box-shadow: none; border: none; }\n\n\n\n#q-zone .section-body { padding: 10px 0; }\n\n\n\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\n\n\n\n\n\n\n\n\n\/* ============================================================\n\ud83c\udfaf RESPONSIVE GRID QCM (2 colonnes tr\u00e8s larges sur PC = Anti-Scroll)\n============================================================ *\/\n#qcm-options {\n grid-template-columns: 1fr !important; \/* 1 colonne par d\u00e9faut (Mobile) *\/\n gap: 12px !important;\n margin-top: 15px;\n}\n\n\/* \ud83d\udcbb Breakpoint : Tablette\/PC (768px et +) *\/\n@media (min-width: 768px) {\n \/* 1. On remonte l\u00e9g\u00e8rement le bloc pour s'assurer que tout rentre sur l'\u00e9cran *\/\n #q-zone {\n     justify-content: center !important;\n     padding-bottom: 20px !important; \n     margin-top: 15px !important; \n }\n \/* 2. Le texte de la question prend moins de place en hauteur *\/\n #view-test .ar-main {\n     margin-bottom: 25px !important;\n }\n \/* 3. LA GRILLE 2x2 \u00c9TIR\u00c9E : 2 colonnes tr\u00e8s larges pour de longs rectangles *\/\n #qcm-options {\n     grid-template-columns: repeat(2, 1fr) !important; \/* On remet sur 2 colonnes *\/\n     gap: 15px !important; \n     max-width: 950px !important; \/* \ud83d\ude80 TR\u00c8S LARGE : Fini les \"petites cases\" ! *\/\n     margin: 0 auto !important; \/* Centre la grille au milieu *\/\n     width: 100% !important; \n }\n \/* 4. Boutons rectangulaires, larges, avec une hauteur ma\u00eetris\u00e9e pour ne pas scroller *\/\n #qcm-options .btn {\n     min-height: 70px !important; \/* Assez haut pour \u00eatre beau, mais pas trop pour l'\u00e9cran *\/\n     width: 100% !important; \n     font-size: 16px !important; \n     border-width: 2px !important; \n     padding: 10px 15px !important;\n }\n \/* Agrandissement sp\u00e9cial si la r\u00e9ponse est en arabe *\/\n #qcm-options .btn[style*=\"Scheherazade\"] { \n     font-size: 32px !important; \/* Superbe et lisible, sans exploser la hauteur *\/\n }\n}\n\n\n\n\n\n\n\n\n\/* LE CHAMP DE SAISIE (Fix de l'Alif coup\u00e9) *\/\n.app-shell input {\n  width: 100%;\n  box-sizing: border-box;\n  font-family: 'Scheherazade New', serif;\n  font-size: 38px;\n  font-weight: 700;\n  color: var(--primary);\n  background: #FFFFFF;\n  text-align: center;\n  border: 2px solid rgba(0,0,0,0.04);\n  border-radius: 16px;\n  outline: none;\n  margin-bottom: 20px;\n  transition: 0.3s;\n  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);\n  height: 80px;\n  padding-top: 15px;\n  padding-bottom: 5px;\n  line-height: normal;\n}\n\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\n\n\n\/* CLAVIER VIRTUEL CORRIG\u00c9 (Retour au beau design) *\/\n.app-shell #virtual-keyboard {\n  display: none;\n  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));\n  gap: 8px;\n  margin-bottom: 20px;\n  background: transparent;\n  padding: 0;\n  border: none;\n}\n\n.app-shell .vk-btn {\n  background: #FFFFFF;\n  border: none;\n  border-radius: 12px;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.05);\n  font-family: 'Scheherazade New', serif;\n  font-size: 24px;\n  color: var(--dark);\n  font-weight: bold;\n  cursor: pointer;\n  padding: 10px 5px 6px 5px;\n  transition: 0.1s;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 1.6;\n}\n\n.app-shell .vk-btn:active { background: #E2E8F0; transform: scale(0.95); box-shadow: none; }\n\n.app-shell .vk-btn.vowel {\n  color: var(--gold);\n  font-size: 28px;\n  padding-top: 8px;\n  padding-bottom: 10px;\n}\n\n.app-shell .vk-btn-wide { grid-column: span 2; color: var(--danger); font-size: 18px; font-family: 'Nunito', sans-serif; align-items: center; padding: 0; }\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; align-items: center; padding: 0;}\n\n\n\n.grille-formes-verbales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }\n\n\n\n.grille-formes-verbales > div { display: flex; flex-direction: column; width: 100%; }\n\n\n\n.grille-formes-verbales .form-test-input { padding: 10px 8px; font-size: 18px; letter-spacing: normal; width: 100%; box-sizing: border-box; }\n\n\n\n\n\/* \ud83d\ude80 EFFET FOCUS ELEVATION (La case vient vers toi) *\/\n.form-test-input {\n  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;\n  transform-origin: center center;\n  position: relative;\n  z-index: 1;\n}\n\n.form-test-input.is-focused {\n  transform: scale(1.15) !important;\n  box-shadow: 0 15px 35px rgba(6, 78, 59, 0.2) !important;\n  z-index: 100 !important;\n  background: #FFFFFF !important;\n}\n\n\n\n\n\n\/* R\u00c9SULTATS & PREUVES TEXTUELLES *\/\n\n\n\n.app-shell .mould-content { display: none; flex-direction: column; flex: 1; overflow: visible; }\n\n\n\n\n.scrollable-proofs { flex: 1; overflow-y: auto; padding-right: 5px; max-height: 50vh; }\n\n\n\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\n\n\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\n\n\n.app-shell .ref-label:empty { display: none; }\n\n\n\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\n\n\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\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\n\n\n.app-shell .btn-audio i { font-size: 14px; }\n\n\n\n\n\n\n\n\n@keyframes bounceDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }\n\n\n\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\n\n\n.scroll-arrow-down:active { opacity: 1; transform: scale(0.9); }\n\n\n\n\n\n\n\n\/* DASHBOARD, MENUS ET TUILES *\/\n\n\n\n.logo-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; margin: 20px 0 40px 0; }\n\n\n\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\n\n\n.logo-text-pro { font-family: 'Scheherazade New', serif; font-size: 70px; color: var(--gold); font-weight: 700; line-height: 1; }\n\n\n\n\n\n\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\n\n\n.ios-btn:active { background: var(--border); }\n\n\n\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); box-shadow: 0 10px 25px rgba(4, 62, 46, 0.2); }\n\n\n\n\n\n\n\n\/* BANNI\u00c8RE MEMRISE & OBJECTIFS *\/\n\n\n\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\n\n\n.daily-goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }\n\n\n\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\n\n\n.daily-goal-count { font-size: 14px; font-weight: 900; color: var(--primary); }\n\n\n\n.daily-goal-track { height: 8px; background: #F3F4F6; border-radius: 10px; overflow: hidden; width: 100%; }\n\n\n\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\n\n\n.daily-goal-completed .daily-goal-bar { background: linear-gradient(90deg, var(--success), #34D399); }\n\n\n\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: 0.3s; position: relative; overflow: hidden; width: 100%; box-sizing: border-box; }\n\n\n\n.memrise-review-card:active { transform: scale(0.96); box-shadow: 0 4px 10px rgba(249, 115, 22, 0.1); }\n\n\n\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; }\n\n\n\n.review-text-box { flex: 1; }\n\n\n\n.review-title { font-size: 15px; font-weight: 900; color: #C2410C; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }\n\n\n\n.review-subtitle { font-size: 13px; font-weight: 800; color: #EA580C; }\n\n\n\n.review-action { color: #F97316; font-size: 18px; font-weight: 900; }\n\n\n\n\n\n\n\/* ============================================================\n \ud83c\udf19 MODE SOMBRE PROT\u00c9G\u00c9 (REFONTE UX\/UI ACCESSIBILIT\u00c9)\n ============================================================ *\/\n\/* 1. Red\u00e9finition des variables : Le Vert fonc\u00e9 devient Menthe, le fond s'adoucit *\/\n.app-shell.dark-mode {\n  --bg-app: #131412;\n  --surface: #1E1F1D;\n  --primary: #34D399; \/* Vert pastel lisible *\/\n  --primary-light: #6EE7B7;\n  --text-main: #F8FAFC;\n  --text-muted: #94A3B8;\n  --border: #334155;\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.05' 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}\n\n\/* 2. Bases et composants g\u00e9n\u00e9raux *\/\n.app-shell.dark-mode .section-block,\n.app-shell.dark-mode input,\n.app-shell.dark-mode .vk-btn,\n.app-shell.dark-mode .taz-rect-btn,\n.app-shell.dark-mode .theme-card-pro,\n.app-shell.dark-mode .settings-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-main); }\n\n.app-shell.dark-mode .taz-rect-btn.taz-hero-btn { background: rgba(52, 211, 153, 0.05) !important; border-color: var(--primary) !important; }\n.app-shell.dark-mode .taz-rect-text .title, .app-shell.dark-mode .theme-tr-title { color: var(--text-main) !important; }\n.app-shell.dark-mode .taz-rect-btn.taz-hero-btn .taz-rect-text .title { color: var(--gold) !important; }\n.app-shell.dark-mode select.styled-select { color: var(--text-main) !important; background-color: var(--surface) !important; border-color: 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 .goal-bubble { background: var(--bg-app); border-color: var(--border); }\n.app-shell.dark-mode .goal-bubble.active { background: rgba(212, 175, 55, 0.1); border-color: var(--gold); color: var(--gold); }\n.app-shell.dark-mode .taz-tabs { background: var(--border); }\n.app-shell.dark-mode .taz-tab.active { background: var(--surface); color: var(--gold); }\n.app-shell.dark-mode .taz-list-card { background: var(--surface); border-color: var(--border); }\n.app-shell.dark-mode .taz-list-card .ar { color: var(--gold); }\n.app-shell.dark-mode .taz-list-card .tr { color: var(--text-main); }\n\n\/* \ud83d\udee1\ufe0f FIX UX 1 : TEXTES LONGS ET SYNTH\u00c8SE (Anti-Contraste N\u00e9gatif) *\/\n.app-shell.dark-mode #synth-content-tr,\n.app-shell.dark-mode #synth-content-ar,\n.app-shell.dark-mode #briefing-desc-tr,\n.app-shell.dark-mode #briefing-desc-ar,\n.app-shell.dark-mode div[style*=\"color: var(--dark)\"],\n.app-shell.dark-mode div[style*=\"color:var(--dark)\"],\n.app-shell.dark-mode p {\n  color: var(--text-main) !important;\n}\n\n\/* \ud83d\udee1\ufe0f FIX UX 2 : HI\u00c9RARCHIE VERTE (Inversion Spectrale) *\/\n.app-shell.dark-mode h1,\n.app-shell.dark-mode h2,\n.app-shell.dark-mode h3,\n.app-shell.dark-mode .section-header,\n.app-shell.dark-mode div[style*=\"color: var(--primary)\"],\n.app-shell.dark-mode div[style*=\"color:var(--primary)\"] {\n  color: var(--primary) !important;\n}\n\n\/* \ud83d\udee1\ufe0f FIX UX 3 : LE DOR\u00c9 (Suppression de l'Halation) *\/\n.app-shell.dark-mode div[style*=\"color:var(--gold)\"],\n.app-shell.dark-mode div[style*=\"color: var(--gold)\"],\n.app-shell.dark-mode .theme-ar-title {\n  color: #FBBF24 !important; \/* Dor\u00e9 adouci *\/\n  text-shadow: none !important; \/* Destruit le halo agressif *\/\n}\n\n\/* \ud83d\udee1\ufe0f FIX UX 4 : FORMULAIRES ET QCM (D\u00e9limitation Visuelle) *\/\n.app-shell.dark-mode .form-test-input,\n.app-shell.dark-mode #qcm-options .btn {\n  background: #1E293B !important;\n  color: var(--text-main) !important;\n  border: 2px solid var(--border) !important;\n}\n.app-shell.dark-mode .form-test-input:disabled {\n  background: var(--surface) !important;\n  color: var(--primary) !important;\n}\n.app-shell.dark-mode #learn-container td { color: var(--primary) !important; text-shadow: none !important; }\n.app-shell.dark-mode #learn-container .sub-trans, .app-shell.dark-mode #learn-container th { color: var(--text-main) !important; }\n\n\n\n\n\n\n\n\n\n\/* ============================================================\n\n\n\nMOTEUR DE GLISSEMENT HORIZONTAL (CARROUSEL PREMIUM)\n\n\n\n============================================================ *\/\n\n\n\n.proof-carousel-container {\n\n\n\n width: 100%;\n\n\n\n overflow: hidden;\n\n\n\n box-sizing: border-box;\n\n\n\n position: relative;\n\n\n\n}\n\n\n\n\n\n\n\n\/* Le rail de glissement ultra-fluide pour Mobile & Trackpad PC *\/\n\n\n\n.proof-carousel-track {\n\n\n\n display: flex;\n\n\n\n overflow-x: auto;\n\n\n\n scroll-snap-type: x mandatory; \/* Force le blocage pile sur la page *\/\n\n\n\n scroll-behavior: smooth;\n\n\n\n -webkit-overflow-scrolling: touch; \/* Glissement \u00e9lastique iOS *\/\n\n\n\n width: 100%;\n\n\n\n box-sizing: border-box;\n\n\n\n}\n\n\n\n\/* On cache la barre de d\u00e9filement vilaine sur tous les navigateurs *\/\n\n\n\n.proof-carousel-track::-webkit-scrollbar { display: none; }\n\n\n\n.proof-carousel-track { -ms-overflow-style: none; scrollbar-width: none; }\n\n\n\n\n\n\n\n\/* Chaque page prend exactement 100% de la largeur disponible *\/\n\n\n\n.proof-carousel-page {\n\n\n\n flex: 0 0 100%;\n\n\n\n width: 100%;\n\n\n\n scroll-snap-align: start; \/* Point d'ancrage de la page *\/\n\n\n\n box-sizing: border-box;\n\n\n\n padding: 5px;\n\n\n\n}\n\n\n\n\n\n\/* ============================================================\n \ud83c\udfac ACCORD\u00c9ON CIN\u00c9MATIQUE & PREUVES (1 MOT = 1 IMAGE DYNAMIQUE)\n ============================================================ *\/\n\n\/* 1. La grille des accord\u00e9ons *\/\n#accordeons-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\n\/* 2. L'accord\u00e9on ENTIER (Il contient l'image) *\/\n.accordeon-item {\n position: relative;\n overflow: hidden;\n border-radius: 16px;\n border: 1px solid rgba(255, 255, 255, 0.3);\n box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n background: #0F172A;\n margin-bottom: 10px;\n}\n\n\n\n\n\n\/* 3. L'image de fond (Pilot\u00e9e par notre script magique !) *\/\n.accordeon-item::before {\n  content: '';\n  position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n  \/* La variable --bg-mot va changer \u00e0 chaque mot gr\u00e2ce au script *\/\n  background-image: var(--bg-mot, url('https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/alessa-ciraulo-r-cy77rA0J0-unsplash-scaled.webp'));\n  background-size: cover;\n  background-position: center;\n  animation: zoomInfini 30s ease-in-out infinite;\n  z-index: 0;\n}\n\n\/* \ud83c\udfac Moteur du zoom continu (aller-retour tr\u00e8s doux) *\/\n@keyframes zoomInfini {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.15); }\n  100% { transform: scale(1); }\n}\n\n\/* ============================================================\n \ud83c\udfac 4. LE FILTRE CIN\u00c9MA DYNAMIQUE (Assombrissement synchro)\n ============================================================ *\/\n.accordeon-item::after {\n  content: '';\n  position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n  \/* \u00c9TAT 1 : L'image est claire et lumineuse au d\u00e9part *\/\n  background: rgba(15, 23, 42, 0.15);\n  z-index: 1;\n  pointer-events: none;\n  \/* \u23f1\ufe0f L'ASTUCE : Le voile attend 2s, puis s'assombrit en 0.5s *\/\n  transition: background 0.5s ease-in-out 2s;\n}\n\n\/* \u00c9TAT 2 : Quand l'accord\u00e9on est OUVERT, le voile devient sombre pour lire *\/\n.accordeon-item.active::after {\n  background: rgba(15, 23, 42, 0.75);\n}\n\n\/* ============================================================ *\/\n\n\/* 5. Le Titre de l'accord\u00e9on (La Source) *\/\n.accordeon-btn {\n position: relative; z-index: 2; width: 100%; text-align: left; padding: 18px 15px;\n background: transparent; border: none; display: flex; justify-content: space-between;\n align-items: center; font-family: 'Nunito', sans-serif; font-size: 13px;\n font-weight: 900; color: #FFFFFF !important; text-shadow: 0 2px 4px rgba(0,0,0,0.9); cursor: pointer;\n}\n.accordeon-btn span { display: flex; align-items: center; text-align: left; white-space: normal; word-wrap: break-word; flex: 1; padding-right: 10px; }\n.accordeon-btn i.fa-bookmark, .accordeon-btn i.fa-comment-dots { margin-right: 10px; font-size: 16px; flex-shrink: 0; color: #FCD34D !important; }\n.accordeon-btn i.fa-chevron-down { color: #FFFFFF; transition: transform 0.3s ease; flex-shrink: 0; font-size: 14px; }\n.accordeon-item.active .accordeon-btn i.fa-chevron-down { transform: rotate(180deg); }\n\n\/* 6. Conteneur int\u00e9rieur et bo\u00eete du texte *\/\n.accordeon-content {\n position: relative; z-index: 2; max-height: 0; overflow: hidden;\n transition: max-height 0.3s ease-out; background: transparent !important;\n}\n.accordeon-inner { padding: 0 10px 15px 10px; border-top: none; display: flex; flex-direction: column; }\n.ornate-proof-card {\n  box-sizing: border-box; padding: 5%; min-height: 200px; display: flex;\n  flex-direction: column; align-items: center; justify-content: center; text-align: center;\n  position: relative; background: transparent !important; box-shadow: none !important; border: none !important;\n}\n.ornate-proof-card > * { position: relative; z-index: 2; }\n\n\/* ============================================================\n \ud83c\udfac APPARITION SYNCHRONIS\u00c9E DU TEXTE (D\u00c9LAI DE 2 SECONDES)\n ============================================================ *\/\n\n\/* Cach\u00e9 \u00e0 l'ouverture *\/\n.accordeon-item .ornate-proof-card {\n  opacity: 0; transform: translateY(20px); transition: opacity 0s, transform 0s;\n}\n\/* \ud83d\ude80 Apparition fluide 1.5 secondes apr\u00e8s le clic (Synchronis\u00e9 avec le filtre cin\u00e9ma) *\/\n.accordeon-item.active .ornate-proof-card {\n  opacity: 1; transform: translateY(0);\n  transition: opacity 1.2s ease-out 2s, transform 1.2s ease-out 2s;\n}\n\n\/* ============================================================\n \u270d\ufe0f DESIGN DU TEXTE ET DES BOUTONS (LUXE)\n ============================================================ *\/\n.ornate-proof-card .ar-verse { color: #FFFFFF !important; text-shadow: 0 3px 8px rgba(0, 0, 0, 1) !important; }\n.ornate-proof-card div[style*=\"font-size: clamp(16px\"] { color: #F8FAFC !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 1) !important; }\n\n\n\n\n\n\/* \u2728 Mot surlign\u00e9 en Or brillant SANS bo\u00eete noire et SANS trait *\/\n.ornate-proof-card .ar-verse span {\n  color: #FCD34D !important;\n  background: transparent !important;\n  border-bottom: none !important; \/* \u274c Le trait en dessous est supprim\u00e9 ici ! *\/\n  text-shadow: 0 2px 10px rgba(0,0,0,1) !important;\n  padding: 0 8px !important;\n}\n\n\n\n\n\n\n\/* Badges et Bouton Audio *\/\n.ornate-proof-card .proof-page-badge { background: rgba(0, 0, 0, 0.6) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; }\n.ornate-proof-card .btn-tts-discret { background: rgba(0, 0, 0, 0.5) !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.3) !important; }\n\n\n\n\n\n\n\n\n\/* Les petits points de pagination (Style iOS App Store) *\/\n\n\n\n.proof-carousel-dots {\n\n\n\n display: flex;\n\n\n\n justify-content: center;\n\n\n\n gap: 8px;\n\n\n\n margin-top: 10px;\n\n\n\n margin-bottom: 5px;\n\n\n\n}\n\n\n\n.proof-dot {\n\n\n\n width: 8px;\n\n\n\n height: 8px;\n\n\n\n border-radius: 50%;\n\n\n\n background: #CBD5E1;\n\n\n\n transition: all 0.3s ease;\n\n\n\n}\n\n\n\n\/* Le petit badge indicateur discret en haut \u00e0 droite de la carte *\/\n\n\n\n.proof-page-badge {\n\n\n\n position: absolute; top: 15px; right: 15px;\n\n\n\n background: rgba(4, 62, 46, 0.1);\n\n\n\n color: var(--primary);\n\n\n\n padding: 4px 10px; border-radius: 20px;\n\n\n\n font-size: 10px; font-weight: 900; letter-spacing: 1px;\n\n\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\/* ============================================================\n\n\n\nFL\u00c8CHES DE NAVIGATION PC (DESKTOP ACCESSIBILITY)\n\n\n\n============================================================ *\/\n\n\n\n.carousel-nav-btn {\n\n\n\n position: absolute;\n\n\n\n top: 50%;\n\n\n\n transform: translateY(-50%);\n\n\n\n width: 36px;\n\n\n\n height: 36px;\n\n\n\n border-radius: 50%;\n\n\n\n background: rgba(255, 255, 255, 0.9);\n\n\n\n border: 1px solid var(--border);\n\n\n\n color: var(--primary);\n\n\n\n font-size: 14px;\n\n\n\n display: flex;\n\n\n\n justify-content: center;\n\n\n\n align-items: center;\n\n\n\n cursor: pointer;\n\n\n\n z-index: 10; \/* Flotte au-dessus de tout *\/\n\n\n\n box-shadow: 0 4px 10px rgba(0,0,0,0.15);\n\n\n\n transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1);\n\n\n\n}\n\n\n\n.carousel-nav-btn:hover { background: #FFFFFF; transform: translateY(-50%) scale(1.1); color: var(--gold); }\n\n\n\n.carousel-nav-btn.prev { left: 10px; }\n\n\n\n.carousel-nav-btn.next { right: 10px; }\n\n\n\n\/* \ud83d\ude80 MODIFICATION RESPONSIVE : Masquage automatique sur les \u00e9crans tactiles\/mobiles *\/\n\n\n\n@media (hover: none) and (pointer: coarse), (max-width: 768px) {\n\n\n\n .carousel-nav-btn {\n\n\n\n     display: none !important;\n\n\n\n }\n\n\n\n}\n\n\n\n\n\n\n\n\/* MOBILE AJUSTEMENTS *\/\n\n\n\n@media (max-width: 768px) {\n\n\n\n .app-shell .screen { padding-bottom: 110px !important; }\n\n\n\n .app-shell .btn-anchor { padding: 10px 0 15px 0 !important; }\n\n\n\n .logo-wrapper { margin: 5px 0 20px 0 !important; }\n\n\n\n .logo-wrapper img { width: 200px !important; }\n\n\n\n .app-shell .header { padding: 10px 15px 0px 15px !important; }\n\n\n\n .app-shell .section-block { margin-bottom: 15px !important; }\n\n\n\n#learn-container .section-body { padding: 15px 5px 10px 5px !important; }\n\n\n\n #learn-container td { padding: 5px 2px 10px 2px !important; }\n\n\n\n #learn-container .ar-main { font-size: clamp(35px, 8vw, 45px) !important; margin-bottom: 10px !important; }\n\n\n\n .challenge-grid .limit-btn { padding: 12px 0 !important; font-size: 14px !important; }\n\n\n\n .mould-content { flex-direction: column !important; align-items: center !important; }\n\n\n\n .taz-tabs { margin: 0 10px 20px 10px !important; }\n\n\n\n}\n\n\n\n\n\n\n\n@media screen and (min-width: 1024px) {\n\n\n\n .app-shell .screen { padding-bottom: 120px !important; }\n\n\n\n .app-shell .btn-anchor { padding-bottom: 50px !important; }\n\n\n\n #btn-next-learn { margin-bottom: 40px !important; }\n\n\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\/* ============================================================\n\n\n\n\ud83d\udcf1 FIX TABLETTE STRICT : ALIGNEMENT OPTIQUE DU QCM\n\n\n\nCible uniquement les \u00e9crans entre 768px et 1023px\n\n\n\n============================================================ *\/\n\n\n\n@media screen and (min-width: 768px) and (max-width: 1023px) {\n\n\n\n\n\n\n\n \/* 1. GABARIT HORIZONTAL (Max-Width Constraint) *\/\n\n\n\n \/* Bride la largeur \u00e0 600px pour \u00e9viter les boutons \"spaghettis\" *\/\n\n\n\n #view-test .content-wrapper,\n\n\n\n #view-learn .content-wrapper {\n\n\n\n     max-width: 600px !important;\n\n\n\n     margin: 0 auto !important;\n\n\n\n     display: flex !important;\n\n\n\n     flex-direction: column !important;\n\n\n\n }\n\n\n\n\n\n\n\n\n\n\n\n\/* 2. NEUTRALISATION DU FLEX-GROW ET CENTRAGE VERTICAL (Y-Axis Alignment) *\/\n\n\n\n \/* La magie op\u00e8re ici : on stoppe la chute du QCM et on le bloque au centre *\/\n\n\n\n #q-zone {\n\n\n\n     flex: 0 1 auto !important; \/* Annule le \"flex: 1\" destructeur *\/\n\n\n\n     \/* display: flex !important; <-- SUPPRIM\u00c9 ! On redonne le contr\u00f4le au JavaScript *\/\n\n\n\n     flex-direction: column !important;\n\n\n\n     justify-content: center !important;\n\n\n\n     margin: auto 0 !important; \/* Force le bloc entier au centre parfait de l'\u00e9cran *\/\n\n\n\n }\n\n\n\n\n\n\n\n\n\n\n\n \/* 3. A\u00c9RATION ET PROPORTIONS DU QCM (Spacing &#038; Touch Targets) *\/\n\n\n\n #qcm-options {\n\n\n\n     width: 100% !important;\n\n\n\n     margin-top: 40px !important; \/* Distance fixe entre la question et les boutons *\/\n\n\n\n     margin-bottom: 0 !important;\n\n\n\n     gap: 15px !important;\n\n\n\n }\n\n\n\n\n\n\n\n #qcm-options .btn {\n\n\n\n     min-height: 70px !important; \/* Hauteur g\u00e9n\u00e9reuse optimis\u00e9e pour le tactile tablette *\/\n\n\n\n     font-size: 16px !important;\n\n\n\n }\n\n\n\n\n\n\n\n \/* 4. PROTECTION DE LA BOTTOM-BAR (Safe Area Constraint) *\/\n\n\n\n .app-shell .screen {\n\n\n\n     padding-bottom: 120px !important;\n\n\n\n }\n\n\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\/* ============================================================\n\n\n\n\ud83d\ude80 REFONTE TABLEAU D'APPRENTISSAGE (GRID 2 COLONNES MOBILE)\n\n\n\n============================================================ *\/\n\n\n\n.learn-verb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; width: 100%; margin-top: 10px; }\n\n\n\n.lv-cell { display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.02); padding-bottom: 10px; }\n\n\n\n.lv-th { color: var(--text-muted); font-size: 11px; padding: 5px; text-transform: uppercase; font-weight: 900; border-bottom: 1px solid var(--border); width: 100%; text-align: center; margin-bottom: 5px;}\n\n\n\n.lv-td { text-align: center; font-weight: 700; font-size: clamp(20px, 4vw, 24px); font-family: 'Scheherazade New', serif; color: var(--primary); line-height: 1.4; display: flex; flex-direction: column; align-items: center;}\n\n\n\n\n\n\n\n\/* \ud83d\udcf1 LA MAGIE DU MOBILE : On passe en 2 colonnes ! *\/\n\n\n\n@media screen and (max-width: 768px) {\n\n\n\n\n\n\n\/* \ud83d\ude80 OPTIMISATION ANTI-SCROLL : GRILLE 2 COLONNES UNIFI\u00c9E *\/\n .learn-verb-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }\n .grille-formes-verbales { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }\n .lv-td { font-size: 24px !important; padding: 5px 0; }\n\n \/* On autorise le texte fran\u00e7ais \u00e0 passer \u00e0 la ligne proprement *\/\n #learn-container .sub-trans { font-size: 10px; line-height: 1.2; word-wrap: break-word; text-align: center; padding: 0 4px;}\n}\n\n\n\n\n\n\/* ============================================================\n\n\n\n\ud83d\ude80 FEATURE DISCOVERY : TOAST &#038; BADGING (Nouveaux Niveaux)\n\n\n\n============================================================ *\/\n\n\n\n\n\n\n\n\/* 1. Le Badge Pulse (Micro-animation sur le niveau) *\/\n\n\n\n.badge-new-pulse {\n\n\n\n background: var(--danger);\n\n\n\n color: white;\n\n\n\n font-size: 9px;\n\n\n\n font-weight: 900;\n\n\n\n padding: 3px 8px;\n\n\n\n border-radius: 12px;\n\n\n\n margin-left: 10px;\n\n\n\n vertical-align: middle;\n\n\n\n text-transform: uppercase;\n\n\n\n letter-spacing: 1px;\n\n\n\n box-shadow: 0 0 0 rgba(225, 29, 72, 0.4);\n\n\n\n animation: pulseBadge 2s infinite cubic-bezier(0.66, 0, 0, 1);\n\n\n\n}\n\n\n\n@keyframes pulseBadge {\n\n\n\n to { box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); }\n\n\n\n}\n\n\n\n\n\n\n\n\/* 2. La Toast Notification (Alerte non-bloquante) *\/\n\n\n\n.taz-toast-update {\n\n\n\n position: fixed;\n\n\n\n top: -100px; \/* Cach\u00e9 au-dessus de l'\u00e9cran *\/\n\n\n\n left: 50%;\n\n\n\n transform: translateX(-50%);\n\n\n\n background: linear-gradient(135deg, var(--gold), #B48E2D);\n\n\n\n color: white;\n\n\n\n padding: 12px 25px;\n\n\n\n border-radius: 30px;\n\n\n\n font-size: 14px;\n\n\n\n font-weight: 900;\n\n\n\n font-family: 'Nunito', sans-serif;\n\n\n\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);\n\n\n\n z-index: 999999;\n\n\n\n display: flex;\n\n\n\n align-items: center;\n\n\n\n gap: 10px;\n\n\n\n transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); \/* Effet ressort iOS *\/\n\n\n\n pointer-events: none; \/* Les clics passent \u00e0 travers *\/\n\n\n\n}\n\n\n\n.taz-toast-update.show {\n\n\n\n top: 20px; \/* Glisse gracieusement dans l'\u00e9cran *\/\n\n\n\n}\n\n\n\n\/* ============================================================\n ANIMATION D'APPARITION (BRIEFING)\n ============================================================ *\/\n@keyframes glissementHaut {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.anim-box {\n  opacity: 0;\n  animation: glissementHaut 0.6s ease-out forwards;\n}\n\n\/* Les petits retards pour l'effet cascade *\/\n.d-1 { animation-delay: 0.1s; }\n.d-2 { animation-delay: 0.2s; }\n.d-3 { animation-delay: 0.3s; }\n.d-4 { animation-delay: 0.4s; }\n.d-5 { animation-delay: 0.5s; }\n.d-6 { animation-delay: 0.6s; }\n\n\n\n\n\n\/* ============================================================\n \ud83c\udf99\ufe0f MIDDLEWARE AUDIO : BOUTONS DISCRETS (TTS)\n ============================================================ *\/\n.btn-tts-discret {\n  background: rgba(4, 62, 46, 0.05);\n  border: 1px solid rgba(4, 62, 46, 0.1);\n  color: var(--primary);\n  cursor: pointer;\n  font-size: 15px;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.02);\n  z-index: 50; \/* Reste cliquable sur les cartes *\/\n}\n.btn-tts-discret:active { transform: scale(0.9); }\n.btn-tts-discret.en-lecture {\n  background: var(--primary);\n  color: white;\n  animation: pulse-tts 1.5s infinite;\n  border-color: var(--primary);\n}\n@keyframes pulse-tts {\n  0% { box-shadow: 0 0 0 0 rgba(4, 62, 46, 0.4); }\n  70% { box-shadow: 0 0 0 10px rgba(4, 62, 46, 0); }\n  100% { box-shadow: 0 0 0 0 rgba(4, 62, 46, 0); }\n}\n\/* Mode Sombre Adaptatif *\/\n.app-shell.dark-mode .btn-tts-discret { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: var(--gold); }\n.app-shell.dark-mode .btn-tts-discret.en-lecture { background: var(--gold); color: #131412; }\n\n\n\n\n\n\n\n\n\/* ============================================================\n \ud83d\udd25 FIX D\u00c9FINITIF : R\u00c9GLAGE SUR-MESURE POUR CHAQUE BOUTON\n ============================================================ *\/\n\n\/* 1. On enl\u00e8ve les marges g\u00e9antes de l'\u00e9cran *\/\n.app-shell .screen {\n  padding-bottom: 30px !important;\n  will-change: auto !important;\n}\n.content-wrapper { padding-bottom: 0 !important; }\n\n\n\/* 2. LA BASE : Le style commun pour tous les boutons (Centrage, ombre, etc.) *\/\n.app-shell .btn-anchor {\n  position: relative !important;\n  margin-top: auto !important;\n  width: 100% !important;\n  background: transparent !important;\n  z-index: 10 !important;\n  display: flex !important;\n  justify-content: center !important;\n  pointer-events: auto !important;\n  padding-top: 30px !important; \/* Espace commun au-dessus du bouton *\/\n}\n.app-shell .btn-anchor .btn {\n  box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;\n  margin: 0 auto !important;\n}\n\n\n\/* ============================================================\n \ud83c\udf9b\ufe0f TON TABLEAU DE BORD : R\u00e8gle la hauteur (bottom) de chaque bouton ici !\n Change juste le chiffre en \"px\" pour monter ou descendre.\n ============================================================ *\/\n\n\/* Bouton \"COMMENCER LE NIVEAU\" (\u00c9cran Briefing) *\/\n#view-briefing .btn-anchor {\n  padding-bottom: 80px !important;\n}\n\n\n\/* Bouton \"M\u00c9MORIS\u00c9 \u2192 CONTINUER\" (\u00c9cran Apprentissage) *\/\n#view-learn .btn-anchor {\n  padding-bottom: 160px !important; \/* On garde ce grand espace de s\u00e9curit\u00e9 pour les PC *\/\n}\n\n\/* \ud83d\udcf1 OPTIMISATION STRICTE POUR MOBILE (R\u00e9duction du vide) *\/\n@media (max-width: 768px) {\n  #view-learn .btn-anchor {\n      padding-bottom: 40px !important; \/* Le bouton colle au bas de l'\u00e9cran *\/\n      padding-top: 15px !important; \/* Le bouton se rapproche de la grille des verbes *\/\n  }\n  #view-learn #learn-container {\n      padding-bottom: 0px !important; \/* On d\u00e9truit le trou g\u00e9ant cach\u00e9 par le syst\u00e8me *\/\n  }\n}\n\n\n\n\/* Boutons \"V\u00c9RIFIER\" et \"CONTINUER\" (Pendant le QCM \/ Preuves textuelles) *\/\n#view-test .btn-anchor {\n  padding-bottom: 60px !important;\n}\n\n\/* Bouton \"TERMINER LE NIVEAU\" (\u00c9cran de Synth\u00e8se \u00e0 la fin) *\/\n#view-synthesis .btn-anchor {\n  padding-bottom: 90px !important;\n}\n\n\n\n\n\/* ============================================================\n \ud83d\udccd PLACEMENT PARFAIT DES BADGES ET DU HAUT-PARLEUR\n ============================================================ *\/\n\n\/* \ud83c\udff7\ufe0f Badge (Arabic \/ Translation) ancr\u00e9 tout en haut \u00e0 droite *\/\n.ornate-proof-card .proof-page-badge {\n  position: absolute !important;\n  top: 5px !important; \/* \ud83d\udc48 Remont\u00e9 ! *\/\n  right: 15px !important;\n  margin: 0 !important;\n  z-index: 10 !important;\n}\n\n\/* \ud83d\udd0a Bouton Audio ancr\u00e9 tout en haut \u00e0 gauche (Align\u00e9 avec le badge) *\/\n.ornate-proof-card .btn-tts-discret {\n  position: absolute !important;\n  top: 5px !important; \/* \ud83d\udc48 Remont\u00e9 au m\u00eame niveau ! *\/\n  left: 15px !important;\n  margin: 0 !important;\n  z-index: 10 !important;\n}\n\n\/* \ud83d\udee1\ufe0f S\u00e9curit\u00e9 : On pousse le texte vers le bas pour ne jamais toucher les boutons *\/\n.ornate-proof-card {\n  padding-top: 55px !important;\n}\n\n\n\n\n\n\n\/* ============================================================\n \ud83d\ude80 FIX BUG SCROLL MENU &#038; EXERCICES (R\u00e9v\u00e9ler les boutons du bas)\n ============================================================ *\/\n.app-shell .screen {\n  min-height: 0 !important; \/* \ud83d\udee1\ufe0f Moteur PC : Force le navigateur \u00e0 calculer et afficher le scroll ! *\/\n}\n\n#view-menu, #view-modules, #view-stats, #view-lexicon, #view-leaderboard {\n  padding-bottom: 150px !important; \/* \ud83d\udcf1 Safe Area : Coussin d'air pour ne plus \u00e9craser le bas de l'\u00e9cran *\/\n}\n\n\n\n\n\n\n\n\n\n\n\/* \ud83d\udee1\ufe0f FIX UX 5 : LA CARTE \"SESSION EN COURS\" (Anti-Flashbang) *\/\n.app-shell.dark-mode .resume-card-pro {\n  background: var(--surface) !important; \/* On remet la carte en gris fonc\u00e9\/noir *\/\n  border: 1px solid var(--border) !important; \/* Bordure discr\u00e8te *\/\n  box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important; \/* Ombre douce *\/\n}\n\n\/* Le texte \"Reprendre l'apprentissage\" redevient blanc lisible *\/\n.app-shell.dark-mode .resume-card-pro #lbl-session-sub {\n  color: var(--text-main) !important;\n}\n\n\/* Le vrai bouton \"Continuer\" devient le seul \u00e9l\u00e9ment Vert Menthe ! *\/\n.app-shell.dark-mode .resume-card-pro #btn-resume-game {\n  background: var(--primary) !important; \/* Bouton Menthe *\/\n  color: #131412 !important; \/* Texte noir tr\u00e8s contrast\u00e9 \u00e0 l'int\u00e9rieur *\/\n  border: none !important;\n  font-weight: 900 !important;\n  box-shadow: 0 4px 15px rgba(52, 211, 153, 0.15) !important; \/* L\u00e9ger halo luxueux *\/\n}\n\n\n\n\n\n\n\/* ============================================================\n \ud83d\udda5\ufe0f FIX PC : ADAPTATION DES IMAGES DES ACCORD\u00c9ONS (MOSQU\u00c9ES)\n ============================================================ *\/\n@media screen and (min-width: 1024px) {\n  \/* 1. On emp\u00eache les cartes de s'\u00e9tirer sur 1200px de large *\/\n  #accordeons-container {\n      max-width: 850px !important;\n      margin: 0 auto !important; \/* Centre parfaitement le bloc au milieu de l'\u00e9cran *\/\n  }\n\n  \/* 2. On donne un peu plus de hauteur \u00e0 la carte pour qu'on voie bien l'image *\/\n  .accordeon-item {\n      min-height: 280px;\n  }\n\n  \/* 3. On ajuste le cadrage : l'image se d\u00e9cale un peu vers le haut pour r\u00e9v\u00e9ler les d\u00f4mes *\/\n  .accordeon-item::before {\n      background-position: center 30% !important;\n  }\n}\n\n\n\n\/* ============================================================\n  \ud83d\ude80 FIX SCROLL : \u00c9CRAN ALPHABET (PC PORTABLES &#038; TABLETTES)\n  ============================================================ *\/\n#view-alphabet-learn {\n   padding-bottom: 150px !important;\n}\n\n\n\n\n\n\/* ============================================================\n  \ud83d\ude80 FIX SCROLL ET ADAPTATION PC : \u00c9CRAN ALPHABET\n  ============================================================ *\/\n#view-alphabet-learn {\n   padding-bottom: 150px !important;\n}\n\n\/* \ud83d\udcbb ADAPTATION DE L'ALPHABET POUR LES \u00c9CRANS PC \/ TABLETTES *\/\n@media (min-width: 768px) {\n   \/* 1. On fait sauter la limite de largeur du conteneur principal *\/\n   #view-alphabet-learn .content-wrapper {\n       max-width: 1200px !important;\n       width: 100% !important;\n       margin: 0 auto !important;\n       padding-left: 40px !important;\n       padding-right: 40px !important;\n   }\n\n   \/* 2. On \u00e9tire le conteneur des lettres *\/\n   #alphabet-container {\n       max-width: 100% !important;\n       width: 100% !important;\n   }\n\n   \/* 3. On affiche les cartes de le\u00e7ons en grille sur PC *\/\n   #alphabet-container {\n       display: grid !important;\n       grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;\n       gap: 20px !important;\n       align-items: start !important;\n   }\n\n   \/* Pour que le texte du haut reste centr\u00e9 et sur toute la largeur *\/\n   #alphabet-container > div:first-child {\n       grid-column: 1 \/ -1;\n   }\n}\n\n\n\n\/* ============================================================\n  \ud83c\udf19 FIX MODE NUIT ABSOLU : MODULE ALPHABET\n  ============================================================ *\/\n\n\/* 1. Le fond global de l'\u00e9cran Alphabet et du Lexique *\/\n.app-shell.dark-mode #view-alphabet-learn,\n.app-shell.dark-mode #view-alpha-lexicon {\n   background: transparent !important;\n}\n\n\/* 2. Les textes (Titres et Sous-titres) *\/\n.app-shell.dark-mode #view-alphabet-learn h2,\n.app-shell.dark-mode #view-alphabet-learn h3,\n.app-shell.dark-mode #alphabet-container h3,\n.app-shell.dark-mode #alphabet-container .section-block div[style*=\"color: var(--primary)\"],\n.app-shell.dark-mode #alphabet-container div[style*=\"color: var(--primary)\"] {\n   color: var(--primary) !important;\n}\n\n.app-shell.dark-mode #view-alphabet-learn p,\n.app-shell.dark-mode #alphabet-container p,\n.app-shell.dark-mode #lbl-alpha-sub {\n   color: var(--text-main) !important;\n}\n\n\/* 3. Les Cartes du Tableau de Bord (Le\u00e7on 1, 2, Masterclass...) *\/\n.app-shell.dark-mode #alphabet-container button[onclick^=\"window.startLesson\"] {\n   background: var(--surface) !important;\n   border-color: var(--border) !important;\n}\n.app-shell.dark-mode #alphabet-container button[onclick^=\"window.startLesson\"] div {\n   color: var(--text-main) !important;\n}\n.app-shell.dark-mode #alphabet-container button[onclick^=\"window.startLesson\"] div[style*=\"color: var(--primary)\"] {\n   color: var(--primary) !important;\n}\n.app-shell.dark-mode #alphabet-container button[onclick^=\"window.startLesson\"] div[style*=\"color: #475569\"],\n.app-shell.dark-mode #alphabet-container button[onclick^=\"window.startLesson\"] div[style*=\"color: #166534\"] {\n   color: var(--text-muted) !important;\n}\n\n\n\n\/* 4. Les blocs de contenu (Le Laboratoire, QCM) *\/\n.app-shell.dark-mode #alphabet-container .section-block {\n   background: var(--surface) !important;\n   border-color: var(--border) !important;\n}\n\n\/* 5. Le Clavier Intelligent et les boutons de lettres (Correction du texte noir sur fond noir) *\/\n.app-shell.dark-mode #custom-keyboard button,\n.app-shell.dark-mode #alphabet-container button[style*=\"background: var(--surface)\"],\n.app-shell.dark-mode #alphabet-container button[style*=\"background:var(--surface)\"],\n.app-shell.dark-mode #alphabet-container button[style*=\"background: white\"],\n.app-shell.dark-mode #alphabet-container button[style*=\"background:white\"] {\n   background: var(--surface) !important;\n   border-color: var(--border) !important;\n   color: var(--text-main) !important;\n}\n\n\/* 6. Les cases vides du mot \u00e0 deviner (Slots) *\/\n.app-shell.dark-mode #slots-container div {\n   background: var(--surface) !important;\n   border-color: var(--border) !important;\n}\n\n\/* 7. Le grand miroir de frappe (Typing Display) *\/\n.app-shell.dark-mode #typing-display {\n   background: var(--surface) !important;\n   color: var(--text-main) !important;\n}\n\n\/* 8. Les boutons verts d'\u00e9coute (Volume) *\/\n.app-shell.dark-mode #alphabet-container button[style*=\"background:var(--primary)\"] {\n   background: var(--primary) !important;\n   color: #131412 !important;\n   border: none !important;\n}\n\n\n\n\n\/* 9. Mode Nuit pour le Lexique Alphabet *\/\n.app-shell.dark-mode #view-alpha-lexicon { background-color: var(--bg-app) !important; }\n.app-shell.dark-mode #view-alpha-lexicon h2 { color: var(--primary) !important; }\n.app-shell.dark-mode #view-alpha-lexicon p { color: var(--text-main) !important; }\n.app-shell.dark-mode #alpha-lexicon-list > div { background: var(--surface) !important; border-color: var(--border) !important; }\n\n\n\n\n\n\n\n\/* ============================================================\n   \ud83d\udda5\ufe0f FIX PC : D\u00c9CALAGE DU MENU (TH\u00c8MES ET NIVEAUX)\n   ============================================================ *\/\n@media screen and (min-width: 1024px) {\n    #levels-overlay {\n        align-items: flex-start !important; \n        padding-top: 160px !important; \n        padding-bottom: 40px !important;\n    }\n\n    #themes-list, #levels-grid {\n        padding-bottom: 80px !important; \n    }\n}\n\n\/* ============================================================\n   \ud83d\ude80 FIX WORDPRESS V2 : RESTAURATION DU MENU ET SUPPRESSION DU VIDE\n   ============================================================ *\/\n#footer, .site-footer, .footer-wrapper, .site-info {\n    display: none !important;\n}\n\n#page, .site, #content, .site-content, .entry-content, #main {\n    margin-top: 0 !important;\n    padding-top: 0 !important;\n    padding-bottom: 0 !important;\n}\n\n.app-shell {\n    position: relative !important; \n    top: 0 !important;\n    width: 100vw !important;\n    height: calc(100dvh - 80px) !important; \n    padding-top: 15px !important; \n}\n\n.gtranslate_wrapper, #gtranslate_wrapper, .gtranslate {\n    display: none !important;\n}\n\n\n\n\n\n\n\n<\/style>\n\n\n\n\n\n\n\n<div class=\"app-shell\">\n\n\n\n\n\n\n\n<div id=\"offline-indicator\" style=\"display: none; position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #E11D48; color: white; padding: 10px 20px; border-radius: 30px; font-size: 14px; font-weight: 800; z-index: 9999999; box-shadow: 0 4px 15px rgba(225, 29, 72, 0.5); align-items: center; gap: 10px; font-family: 'Nunito', sans-serif; pointer-events: none; transition: 0.3s;\">\n\n\n\n <i class=\"fa-solid fa-wifi\" style=\"position: relative;\">\n\n\n\n     <div style=\"position: absolute; top: 50%; left: 50%; width: 120%; height: 2px; background: white; transform: translate(-50%, -50%) rotate(45deg);\"><\/div>\n\n\n\n <\/i>\n\n\n\n <span id=\"offline-text\">Hors-Ligne (Pas d&rsquo;audio)<\/span>\n\n\n\n<\/div>\n\n\n\n\n\n\n\n <div class=\"header\">\n\n\n\n    <div class=\"top-bar-row\">\n\n\n\n <button id=\"btn-back\" class=\"back-btn\" onclick=\"window.navigateToMenu()\"><i class=\"fa-solid fa-house\"><\/i><\/button>\n\n\n\n <span id=\"lvl-txt\">NIVEAU 1<\/span>\n\n\n\n <div style=\"width: 36px;\"><\/div>\n\n\n\n<\/div>\n\n\n\n           <div class=\"progress-track\"><div class=\"progress-bar\" id=\"pBar\"><\/div><\/div>\n\n\n\n <\/div>\n\n\n\n\n\n\n\n\n\n\n\n<div class=\"screen\" id=\"view-settings\">\n\n\n\n <div class=\"settings-container\">\n\n\n\n\n\n\n\n     <h2 id=\"lbl-set-title\" class=\"settings-title\">Configurez<br>votre exp\u00e9rience<\/h2>\n\n\n\n\n\n\n\n     <div class=\"settings-grid\">\n\n\n\n\n\n\n\n         <div class=\"settings-card\">\n\n\n\n             <div class=\"settings-card-header\">\n\n\n\n                 <i class=\"fa-solid fa-earth-americas\" style=\"color: #3B82F6; font-size: 22px;\"><\/i>\n\n\n\n                 <span id=\"lbl-set-lang\">LANGUE DE L&rsquo;INTERFACE<\/span>\n\n\n\n             <\/div>\n\n\n\n             <div style=\"display: flex; gap: 10px; margin-top: auto;\">\n\n\n\n                 <button class=\"lang-btn active\" onclick=\"window.setLang('fr')\" id=\"btn-fr-menu\">\ud83c\uddeb\ud83c\uddf7 FRAN\u00c7AIS<\/button>\n\n\n\n                 <button class=\"lang-btn\" onclick=\"window.setLang('en')\" id=\"btn-en-menu\">\ud83c\uddec\ud83c\udde7 ENGLISH<\/button>\n\n\n\n             <\/div>\n\n\n\n         <\/div>\n\n\n\n\n\n\n\n         <div class=\"settings-card\">\n\n\n\n             <div class=\"settings-card-header\">\n\n\n\n                 <i class=\"fa-solid fa-bullseye\" style=\"color: #F59E0B; font-size: 22px;\"><\/i>\n\n\n\n                 <span id=\"lbl-set-goal\">OBJECTIF QUOTIDIEN<\/span>\n\n\n\n             <\/div>\n\n\n\n             <p id=\"lbl-goal-sub\" class=\"settings-subtitle\">Combien de mots souhaitez-vous apprendre par jour ?<\/p>\n\n\n\n             <div class=\"goal-bubbles-container\" id=\"goal-options\">\n\n\n\n                 <button class=\"goal-bubble\" onclick=\"window.setDailyGoal(10, this)\">10<\/button>\n\n\n\n                 <button class=\"goal-bubble active\" onclick=\"window.setDailyGoal(20, this)\">20<\/button>\n\n\n\n                 <button class=\"goal-bubble\" onclick=\"window.setDailyGoal(30, this)\">30<\/button>\n\n\n\n                 <button class=\"goal-bubble\" onclick=\"window.setDailyGoal(50, this)\">50<\/button>\n\n\n\n             <\/div>\n\n\n\n             <div id=\"goal-description\" class=\"goal-text-dynamic\">\ud83d\udeb6 R\u00c9GULIER<\/div>\n\n\n\n         <\/div>\n\n\n\n\n\n\n\n         <div class=\"settings-card\">\n\n\n\n             <div class=\"settings-card-header\">\n\n\n\n                 <i class=\"fa-solid fa-microphone-lines\" style=\"color: #8B5CF6; font-size: 22px;\"><\/i>\n\n\n\n                 <span id=\"lbl-set-rec2\">VOIX DU CORAN<\/span>\n\n\n\n             <\/div>\n\n\n\n\n<select id=\"reciter-select\" onchange=\"window.setReciter(this.value)\" class=\"styled-select\" style=\"margin-top: auto;\">\n\n  <!-- ========================================== -->\n  <!-- LECTURES EN HAFS                           -->\n  <!-- ========================================== -->\n  <optgroup label=\"R\u00e9citateurs Contemporains (Hafs)\">\n      <option value=\"Alafasy_128kbps\">Mishary Alafasy<\/option>\n      <option value=\"Maher_AlMuaiqly_64kbps\">Maher Al Muaiqly<\/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=\"Abdurrahmaan_As-Sudais_192kbps\">Abdurrahman As-Sudais<\/option>\n      <option value=\"Ahmed_ibn_Ali_al-Ajamy_128kbps\">Ahmed Al-Ajmi<\/option>\n      <option value=\"Fares_Abbad_64kbps\">Fares Abbad<\/option>\n      <option value=\"Ghamadi_40kbps\">Saad Al Ghamdi<\/option>\n      <option value=\"Abu_Bakr_Ash-Shaatree_128kbps\">Abu Bakr Ash-Shaatree<\/option>\n      <option value=\"Muhammad_Jibreel_128kbps\">Muhammad Jibreel<\/option>\n\n      <option value=\"Muhammad_AbdulKareem_128kbps\">Muhammad Abdul Kareem<\/option>\n      <option value=\"Hani_Rifai_192kbps\">Hani Ar-Rifai<\/option>\n      <option value=\"Khaalid_Abdullaah_al-Qahtaanee_192kbps\">Khalid Al-Qahtani<\/option>\n  <\/optgroup>\n\n  <optgroup label=\"Grands Ma\u00eetres &#038; Apprentissage (Hafs)\">\n      <option value=\"Ayman_Sowaid_64kbps\">Ayman Sowaid (P\u00e9dagogique)<\/option>\n      <option value=\"Minshawy_Teacher_128kbps\">Minshawi (Mualim \/ R\u00e9p\u00e9tition)<\/option>\n      <option value=\"Husary_128kbps\">Mahmoud Al-Husary (Murattal)<\/option>\n      <option value=\"Minshawy_Murattal_128kbps\">Siddiq Al-Minshawi (Murattal)<\/option>\n      <option value=\"Abdul_Basit_Murattal_192kbps\">Abdul Basit (Murattal)<\/option>\n      <option value=\"Hudhaify_128kbps\">Ali Al-Hudhaify<\/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      <option value=\"Husary_Mujawwad_128kbps\">Al-Husary (Mujawwad lent)<\/option>\n      <option value=\"Abdul_Basit_Mujawwad_128kbps\">Abdul Basit (Mujawwad lent)<\/option>\n  <\/optgroup>\n\n  <!-- ========================================== -->\n  <!-- LECTURES EN WARCH                            -->\n  <!-- ========================================== -->\n  <optgroup label=\"Lecture Warch 'an Nafi'\">\n      <option value=\"Yassin_Al_Jazaery_64kbps\">Yassin Al-Jazaery (Warch)<\/option>\n      <option value=\"Ibrahim_Aldosary_128kbps\">Ibrahim Al-Dosary (Warch)<\/option>\n      <option value=\"Husary_128kbps_Warsh\">Mahmoud Al-Husary (Warch)<\/option>\n      <option value=\"Abdul_Basit_Warsh_128kbps\">Abdul Basit (Warch)<\/option>\n  <\/optgroup>\n\n<\/select>\n\n            <\/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n<div class=\"settings-card\">\n             <div class=\"settings-card-header\">\n                 <i class=\"fa-solid fa-keyboard\" style=\"color: #0EA5E9; font-size: 22px;\"><\/i>\n                 <span id=\"lbl-set-keyboard\">EXIGENCE D&rsquo;\u00c9CRITURE<\/span>\n             <\/div>\n\n             <p id=\"lbl-keyboard-sub\" class=\"settings-subtitle\">Choisissez le niveau d&rsquo;exigence du clavier intelligent pour la validation de vos exercices.<\/p>\n\n             <div style=\"display: flex; gap: 10px; margin-top: auto; margin-bottom: 15px;\">\n                 <button class=\"lang-btn\" onclick=\"window.setStrictMode(false, this)\" id=\"btn-tolerant\">TOL\u00c9RANT<\/button>\n                 <button class=\"lang-btn\" onclick=\"window.setStrictMode(true, this)\" id=\"btn-strict\">STRICT<\/button>\n             <\/div>\n\n\n\n\n\n<div id=\"keyboard-dynamic-explain\" style=\"font-size: 12px; line-height: 1.5; padding: 12px 15px; border-radius: 12px; transition: 0.3s; width: 100%; box-sizing: border-box;\"><\/div>\n         <\/div>\n\n     <\/div>\n     <div class=\"btn-anchor\">\n         <button id=\"btn-save-settings\" class=\"btn btn-next\" onclick=\"window.saveSettingsAndGo()\">CONTINUER<\/button>\n     <\/div>\n\n <\/div>\n<\/div>\n\n\n<style>\n    \/* \ud83d\udd12 CACHE L'ACCUEIL D\u00c8S QU'ON OUVRE UN AUTRE MODE *\/\n    #view-hub:not(.active) {\n        display: none !important;\n    }\n\n    \/* \ud83c\udf0a LAISSE APPARA\u00ceTRE LA VAGUE SUR L'ADN ARABE ET TOUTES LES PAGES *\/\n    .app-shell .screen:not(#view-hub) {\n        background: transparent !important;\n    }\n\n\n    \/* --- \ud83d\udcf1 \u00c9CRAN D'ACCUEIL MOBILE --- *\/\n    #view-hub.active {\n        background: transparent !important; \/* Laisse appara\u00eetre la vague de fond *\/\n        overflow-y: auto !important;\n        height: 100% !important;\n        position: relative !important;\n        display: flex !important;\n        flex-direction: column !important;\n    }\n    \n    .hub-image-mobile {\n        background-image: url('https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/09\/telechargement-MObile.png');\n        background-size: cover; \n        background-position: center; \n        background-repeat: no-repeat;\n        width: 100%; \n        min-height: 310px;\n        flex-shrink: 0;\n    }\n\n    .hub-btn-wrapper {\n        background: transparent !important; \n        width: 100%; \n        flex: 1;\n        padding: 10px 24px 35px 24px;\n        display: flex; \n        flex-direction: column; \n        justify-content: center;\n        align-items: center; \n        gap: 18px;\n        position: relative; \n        z-index: 100;\n        box-sizing: border-box;\n    }\n\n    \/* \u2728 TES 3 BOUTONS IDENTIQUES ET CENTR\u00c9S *\/\n    .hub-btn-wrapper .btn {\n        position: relative !important;\n        background: transparent !important;\n        color: #7D9380 !important;\n        border: 2px solid #7D9380 !important;\n        border-radius: 16px !important;\n        height: 54px !important;\n        padding: 0 16px !important;\n        width: 100% !important;\n        max-width: 440px !important;\n        font-size: 13px !important;\n        font-weight: 900 !important;\n        text-transform: uppercase !important;\n        letter-spacing: 0.6px !important;\n        white-space: nowrap !important;\n        line-height: 1 !important;\n        display: flex !important;\n        flex-direction: row !important;\n        justify-content: center !important;\n        align-items: center !important;\n        gap: 10px !important;\n        cursor: pointer;\n        box-shadow: none !important;\n        box-sizing: border-box !important;\n        overflow: visible !important;\n    }\n\n    .hub-btn-wrapper .btn:active {\n        background: rgba(125, 147, 128, 0.12) !important;\n    }\n\n    .hub-mini-badge {\n        position: absolute !important;\n        top: -10px !important;\n        right: 16px !important;\n        background: #7D9380 !important;\n        color: #F4F2EA !important;\n        padding: 3px 9px !important;\n        border-radius: 10px !important;\n        font-size: 9px !important;\n        font-weight: 900 !important;\n        letter-spacing: 1px !important;\n        line-height: 1 !important;\n        white-space: nowrap !important;\n    }\n\n    \/* --- \ud83d\udcbb \u00c9CRAN D'ACCUEIL PC & TABLETTES --- *\/\n    @media screen and (min-width: 768px) {\n        #view-hub.active {\n            background-image: url('https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/09\/IMG_20260929_122447.png') !important;\n            background-size: 65% auto !important;\n            background-position: center 10% !important;\n            background-color: transparent !important; \/* Laisse voir la vague autour du logo *\/\n            background-repeat: no-repeat !important;\n            overflow: hidden !important;\n            position: absolute !important;\n            display: block !important;\n        }\n        \n        .hub-image-mobile {\n            display: none !important; \n        }\n        \n        .hub-btn-wrapper {\n            background: transparent !important; \n            position: absolute;\n            top: 0; left: 0; width: 100%; height: 100%;\n            padding: 0; box-sizing: border-box;\n            display: block; \n            z-index: 9999; \n        }\n        \n        .hub-btn-wrapper .btn {\n            position: absolute !important;\n            max-width: 320px !important; \n            background: rgba(244, 242, 234, 0.92) !important;\n            z-index: 10000; \n            cursor: pointer;\n        }\n\n        .hub-btn-left { top: 40%; left: 8%; transform: translateY(-50%) !important; }\n        .hub-btn-right { top: 40%; right: 8%; transform: translateY(-50%) !important; }\n        .hub-btn-bottom { top: 78%; left: 50%; transform: translate(-50%, -50%) !important; max-width: 360px !important; }\n    }\n<\/style>\n\n\n\n\n\n<!-- ============================================================ -->\n<!-- \ud83c\udff0 LE GRAND HUB D'ACCUEIL : CHOIX DU PARCOURS                -->\n<!-- ============================================================ -->\n<div class=\"screen active\" id=\"view-hub\" style=\"padding: 0; flex-direction: column; top: 0; left: 0; width: 100%; height: 100%; z-index: 50;\">\n    \n    <!-- \u2699\ufe0f BOUTON PARAM\u00c8TRES (En haut \u00e0 droite) -->\n    <button class=\"ios-btn\" onclick=\"window.navigateTo('view-settings')\" style=\"position: absolute; top: 20px; right: 20px; z-index: 10000; background: var(--surface); border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.15);\">\n        <i class=\"fa-solid fa-gear\" style=\"color: var(--primary);\"><\/i>\n    <\/button>\n\n    <!-- 1. IMAGE MOBILE -->\n    <div class=\"hub-image-mobile\"><\/div>\n\n    <!-- 2. ZONE DES BOUTONS -->\n    <div class=\"hub-btn-wrapper\">\n        \n        <!-- BOUTON 1 : APPRENDRE L'ALPHABET -->\n        <button class=\"btn hub-btn-left\" onclick=\"window.startAlphabetMode()\">\n            <i class=\"fa-solid fa-language\" style=\"font-size: 17px;\"><\/i>\n            <span id=\"lbl-hub-alpha\">Apprendre l&rsquo;Alphabet<\/span>\n            <span class=\"hub-mini-badge\" id=\"lbl-hub-free\">Gratuit<\/span>\n        <\/button>\n\n        <!-- BOUTON 2 : VOCABULAIRE & ADN -->\n        <button class=\"btn hub-btn-right\" onclick=\"window.enterVocabApp()\">\n            <i class=\"fa-solid fa-book-open-reader\" style=\"font-size: 16px;\"><\/i>\n            <span id=\"lbl-hub-vocab\">Vocabulaire &#038; ADN Arabe<\/span>\n        <\/button>\n        \n        <!-- BOUTON 3 : L'ART DE LA PHRASE -->\n        <button class=\"btn hub-btn-bottom\" onclick=\"window.openGrammar()\">\n            <i class=\"fa-solid fa-feather-pointed\" style=\"font-size: 16px;\"><\/i>\n            <span id=\"lbl-hub-grammar\">L&rsquo;Art de la Phrase<\/span>\n            <span class=\"hub-mini-badge\">Pro<\/span>\n        <\/button>\n        \n    <\/div>\n<\/div>\n\n\n\n\n\n<!-- ============================================================ -->\n<!-- 1. LE DASHBOARD PRINCIPAL (DUAL ENTRY POINT)                 -->\n<!-- ============================================================ -->\n<div class=\"screen\" id=\"view-menu\" style=\"padding-top: 0;\">\n\n\n\n\n\n <div class=\"content-wrapper\">\n\n\n\n\n\n\n\n    <div style=\"display: flex; justify-content: center; gap: 15px; padding: 25px 20px; align-items: center; flex-wrap: wrap;\">\n\n         <!-- \ud83c\udfe0 NOUVEAU BOUTON : RETOUR AU HUB D'ACCUEIL -->\n         <button onclick=\"window.navigateTo('view-hub')\" class=\"ios-btn\" style=\"color: var(--primary); border: 2px solid var(--primary);\"><i class=\"fa-solid fa-house\"><\/i><\/button>\n\n         <button onclick=\"window.navigateTo('view-settings'); document.getElementById('reciter-select').value = window.qari;\" 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\n\n\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\n\n\n         <button onclick=\"window.openStats()\" class=\"ios-btn\"><i class=\"fa-solid fa-chart-simple\"><\/i><\/button>\n\n\n\n         <button onclick=\"window.openLexicon()\" class=\"ios-btn\"><i class=\"fa-solid fa-book-open\"><\/i><\/button>\n\n\n\n\n\n\n\n         <div class=\"header-streak\">\n\n\n\n             <i class=\"fa-solid fa-fire\"><\/i>\n\n\n\n             <span id=\"streak-val\">0<\/span>\n\n\n\n         <\/div>\n\n\n\n     <\/div>\n\n\n\n\n\n\n\n     <div class=\"logo-wrapper\">\n\n\n\n         <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\n\n\n     <\/div>\n\n\n\n\n\n\n\n     <div class=\"daily-goal-container\" id=\"daily-goal-ui\">\n\n\n\n         <div class=\"daily-goal-header\">\n\n\n\n             <div class=\"daily-goal-title\" id=\"lbl-daily-title\"><i class=\"fa-solid fa-fire\"><\/i> Objectif du jour<\/div>\n\n\n\n             <div class=\"daily-goal-count\"><span id=\"daily-current\">0<\/span> \/ <span id=\"daily-target\">10<\/span><\/div>\n\n\n\n         <\/div>\n\n\n\n         <div class=\"daily-goal-track\">\n\n\n\n             <div class=\"daily-goal-bar\" id=\"daily-bar-fill\"><\/div>\n\n\n\n         <\/div>\n\n\n\n     <\/div>\n\n\n\n\n\n     <div id=\"urgent-review-banner\" style=\"display: none;\">\n\n\n\n         <div class=\"memrise-review-card\" onclick=\"window.startRevisionMode()\">\n\n\n\n             <div class=\"review-icon-box\"><i class=\"fa-solid fa-brain\"><\/i><\/div>\n\n\n\n             <div class=\"review-text-box\">\n\n\n\n                 <div class=\"review-title\" id=\"lbl-review-title\">M\u00e9moire affaiblie !<\/div>\n\n\n\n                 <div class=\"review-subtitle\"><span id=\"urgent-rev-count\">0<\/span> <span id=\"lbl-review-sub\">mots \u00e0 renforcer<\/span><\/div>\n\n\n\n             <\/div>\n\n\n\n             <div class=\"review-action\"><i class=\"fa-solid fa-chevron-right\"><\/i><\/div>\n\n\n\n         <\/div>\n\n\n\n     <\/div>\n\n\n\n\n\n\n\n     <div id=\"resume-container\" style=\"display:none; width: 100%;\">\n\n\n\n         <div class=\"resume-card-pro\">\n\n\n\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\n\n\n             <div id=\"lbl-session-sub\" style=\"font-size: 15px; font-weight: 800; margin-top: 5px;\">Reprendre l&rsquo;apprentissage<\/div>\n\n\n\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\n\n\n         <\/div>\n\n\n\n     <\/div>\n\n\n\n\n\n\n\n\n\n\n\n     <div class=\"taz-action-stack\">\n\n\n\n            <div class=\"taz-rect-btn taz-hero-btn\" onclick=\"window.toggleMenu()\">\n             <div class=\"taz-rect-icon gold\"><i class=\"fa-solid fa-book-open-reader\"><\/i><\/div>\n             <div class=\"taz-rect-text\">\n                 <span class=\"title\" id=\"lbl-hero-title\">Apprendre<\/span>\n                 <span class=\"subtitle\" id=\"lbl-hero-sub\">Choisir un th\u00e8me et avancer<\/span>\n             <\/div>\n             <i class=\"fa-solid fa-chevron-right chevron\"><\/i>\n         <\/div>\n\n         <!-- =================================================== -->\n         <!-- \ud83e\uddec NOUVELLE SECTION : L'ADN ARABE (HORS NIVEAUX) -->\n         <!-- =================================================== -->\n         <div style=\"margin-top: 15px; margin-bottom: 15px;\">\n\n             <!-- Titre de la section ADN -->\n             <div style=\"font-size:18px; font-weight:900; color:var(--dark); margin-bottom:12px; margin-left: 5px; display:flex; align-items:center; gap:8px;\">\n                 <i class=\"fa-solid fa-dna\" style=\"color:var(--gold);\"><\/i>\n                 <span id=\"lbl-adn-section\">Le secret de la langue<\/span>\n             <\/div>\n\n             <!-- Le Bouton ADN -->\n             <div class=\"taz-rect-btn\"onclick=\"window.openForgeMenu()\" style=\"border-color: var(--gold); background: linear-gradient(135deg, #ffffff 0%, #fefce8 100%); margin:0; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15);\">\n                 <div class=\"taz-rect-icon\" style=\"background: rgba(212, 175, 55, 0.1); color: var(--gold);\">\n                     <i class=\"fa-solid fa-microscope\"><\/i>\n                 <\/div>\n                 <div class=\"taz-rect-text\">\n                     <span class=\"title\" style=\"color: var(--gold);\">\n                         <span id=\"lbl-adn-title\">L&rsquo;ADN Arabe<\/span>\n                         <span class=\"badge-new-pulse\" style=\"background:var(--gold); color:white; font-size:10px; padding:2px 6px; border-radius:10px; margin-left:5px; vertical-align:middle;\">UNIQUE<\/span>\n                     <\/span>\n                     <span class=\"subtitle\" id=\"lbl-adn-sub\" style=\"color: #856619;\">Ma\u00eetrisez les racines (Al-Jidhr)<\/span>\n                 <\/div>\n                 <i class=\"fa-solid fa-chevron-right chevron\" style=\"color: var(--gold);\"><\/i>\n             <\/div>\n\n         <\/div>\n         <!-- =================================================== -->\n\n         <div class=\"quick-actions-title\" id=\"lbl-quick-train-title\">Entra\u00eenement Rapide<\/div>\n\n         <div class=\"taz-rect-btn\" onclick=\"window.lancerEntrainementRapide('qcm-mix');\">\n             <div class=\"taz-rect-icon blue\"><i class=\"fa-solid fa-dice\"><\/i><\/div>\n             <div class=\"taz-rect-text\">\n                 <span class=\"title\" id=\"lbl-quick-qcm-title\">QCM Al\u00e9atoire<\/span>\n                 <span class=\"subtitle\" id=\"lbl-quick-qcm-sub\">R\u00e9vision express<\/span>\n             <\/div>\n             <i class=\"fa-solid fa-chevron-right chevron\"><\/i>\n         <\/div>\n\n         <div class=\"taz-rect-btn\" onclick=\"window.lancerEntrainementRapide('trans');\">\n             <div class=\"taz-rect-icon green\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\n             <div class=\"taz-rect-text\">\n                 <span class=\"title\" id=\"lbl-quick-speed-title\">Marathon Vitesse<\/span>\n                 <span class=\"subtitle\" id=\"lbl-quick-speed-sub\">Encha\u00eenement rapide<\/span>\n             <\/div>\n             <i class=\"fa-solid fa-chevron-right chevron\"><\/i>\n         <\/div>\n\n\n\n\n\n\n\n\n         <div class=\"taz-rect-btn\" onclick=\"window.lancerEntrainementRapide('forms');\">\n\n\n\n             <div class=\"taz-rect-icon purple\"><i class=\"fa-solid fa-puzzle-piece\"><\/i><\/div>\n\n\n\n             <div class=\"taz-rect-text\">\n\n\n\n                 <span class=\"title\" id=\"lbl-quick-forms-title\">D\u00e9clinaisons<\/span>\n\n\n\n                 <span class=\"subtitle\" id=\"lbl-quick-forms-sub\">Ma\u00eetrise de l&rsquo;\u00e9criture<\/span>\n\n\n\n             <\/div>\n\n\n\n             <i class=\"fa-solid fa-chevron-right chevron\"><\/i>\n\n\n\n         <\/div>\n\n\n\n     <\/div>\n\n\n<div class=\"quick-actions-title\" id=\"lbl-rand-words\">Mots Al\u00e9atoires (Marathons)<\/div>\n\n\n\n\n\n\n\n             <div style=\"background:#F8FAFC; border-radius:12px; padding:5px; display:flex; margin-bottom:15px; border: 1px solid #E2E8F0;\">\n\n\n\n         <button id=\"btn-toggle-words\" class=\"btn limit-btn active\" style=\"flex:1; border-radius:8px; padding:10px; font-size:12px; box-shadow:none; background:white; color:var(--primary);\" onclick=\"window.toggleMarathonMode('words')\">\ud83c\udfaf QUANTIT\u00c9<\/button>\n\n\n\n         <button id=\"btn-toggle-time\" class=\"btn limit-btn\" style=\"flex:1; border-radius:8px; padding:10px; font-size:12px; box-shadow:none; background:transparent; color:#64748B;\" onclick=\"window.toggleMarathonMode('time')\">\u23f3 TEMPS<\/button>\n\n\n\n     <\/div>\n\n\n\n\n\n\n\n             <div id=\"box-limit-words\" class=\"challenge-grid\" style=\"margin-bottom: 15px; display:grid;\">\n\n\n\n         <input type=\"hidden\" id=\"marathon-limit\" value=\"25\">\n\n\n\n         <button class=\"btn limit-btn active\" onclick=\"window.setMarathonLimit(25, this)\">25<\/button>\n\n\n\n         <button class=\"btn limit-btn\" onclick=\"window.setMarathonLimit(50, this)\">50<\/button>\n\n\n\n         <button class=\"btn limit-btn\" onclick=\"window.setMarathonLimit(75, this)\"><i class=\"fa-solid fa-lock\" style=\"font-size:10px;\"><\/i> 75<\/button>\n\n\n\n         <button class=\"btn limit-btn\" onclick=\"window.setMarathonLimit(100, this)\"><i class=\"fa-solid fa-lock\" style=\"font-size:10px;\"><\/i> 100<\/button>\n\n\n\n     <\/div>\n\n\n\n\n\n\n\n             <div id=\"box-limit-time\" class=\"challenge-grid\" style=\"margin-bottom: 15px; display:none; grid-template-columns: repeat(3, 1fr);\">\n\n\n\n         <input type=\"hidden\" id=\"marathon-time-input\" value=\"60\">\n\n\n\n         <button class=\"btn limit-btn active\" onclick=\"window.setMarathonTime(1, this)\">1 Min<\/button>\n\n\n\n         <button class=\"btn limit-btn\" onclick=\"window.setMarathonTime(3, this)\">3 Min<\/button>\n\n\n\n         <button class=\"btn limit-btn\" onclick=\"window.setMarathonTime(5, this)\"><i class=\"fa-solid fa-lock\" style=\"font-size:10px;\"><\/i> 5 Min<\/button>\n\n\n\n     <\/div>\n\n\n\n\n\n<div class=\"taz-action-stack\" style=\"margin-bottom: 40px;\">\n\n  <div class=\"taz-rect-btn\" onclick=\"window.startMarathonMode('trans')\">\n      <div class=\"taz-rect-icon gold\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\n      <div class=\"taz-rect-text\">\n          <span class=\"title\" id=\"lbl-tile-mara-trans\">Marathon Traduction<\/span>\n          <span class=\"subtitle\" id=\"lbl-sub-mara-trans\">Encha\u00eenement chronom\u00e9tr\u00e9<\/span>\n      <\/div>\n      <i class=\"fa-solid fa-play chevron\" style=\"color:var(--gold);\"><\/i>\n  <\/div>\n\n  <div class=\"taz-rect-btn\" onclick=\"window.startMarathonMode('forms')\">\n      <div class=\"taz-rect-icon purple\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\n      <div class=\"taz-rect-text\">\n          <span class=\"title\" id=\"lbl-tile-mara-forms\">Marathon des Formes<\/span>\n          <span class=\"subtitle\" id=\"lbl-sub-mara-forms\">D\u00e9clinaisons al\u00e9atoires<\/span>\n      <\/div>\n      <i class=\"fa-solid fa-play chevron\" style=\"color:var(--purple);\"><\/i>\n  <\/div>\n\n  <!-- \ud83d\ude80 LE NOUVEAU MARATHON : LE MOT JUSTE -->\n  <div class=\"taz-rect-btn\" onclick=\"window.startMarathonMode('sniper')\">\n      <div class=\"taz-rect-icon green\"><i class=\"fa-solid fa-pen-fancy\"><\/i><\/div>\n      <div class=\"taz-rect-text\">\n          <span class=\"title\" id=\"lbl-tile-mara-sniper\" style=\"color:var(--success);\">Marathon Le Mot Juste<\/span>\n          <span class=\"subtitle\" id=\"lbl-sub-mara-sniper\">Compl\u00e9tion chronom\u00e9tr\u00e9e<\/span>\n      <\/div>\n      <i class=\"fa-solid fa-play chevron\" style=\"color:var(--success);\"><\/i>\n  <\/div>\n\n<\/div>\n\n\n <\/div>\n\n\n\n<\/div>\n\n\n\n<!-- ============================================================ -->\n<!-- \u00c9CRAN INTERSTITIEL : PR\u00c9SENTATION DU NIVEAU (BRIEFING)       -->\n<!-- ============================================================ -->\n<div class=\"screen\" id=\"view-briefing\">\n  <div class=\"content-wrapper\" style=\"justify-content: center; padding-top: 20px;\">\n\n      <div class=\"settings-card\" style=\"border: 2px solid var(--gold); background: linear-gradient(145deg, #ffffff 0%, #fdfbf7 100%);\">\n\n         <div class=\"anim-box d-1\" style=\"text-align: center; font-size: 35px; color: var(--gold); margin-bottom: 15px;\">\n              <i class=\"fa-solid fa-map-location-dot\"><\/i>\n          <\/div>\n\n          <h2 id=\"briefing-title-tr\" class=\"anim-box d-2\" style=\"font-size: 20px; font-weight: 900; color: var(--primary); text-transform: uppercase; text-align: center; margin: 0 0 5px 0; letter-spacing: 1px;\"><\/h2>\n\n          <h3 id=\"briefing-title-ar\" class=\"anim-box d-3\" style=\"font-family: 'Scheherazade New', serif; font-size: 32px; color: var(--gold); text-align: center; margin: 0 0 20px 0; line-height: 1.2;\"><\/h3>\n\n          <div class=\"anim-box d-4\" style=\"width: 40px; height: 3px; background: var(--gold); margin: 0 auto 20px auto; border-radius: 5px; opacity: 0.5;\"><\/div>\n\n          <p id=\"briefing-desc-tr\" class=\"anim-box d-5\" style=\"font-size: 15px; font-weight: 800; color: var(--dark); line-height: 1.6; text-align: center; margin: 0 0 15px 0;\"><\/p>\n\n          <p id=\"briefing-desc-ar\" class=\"anim-box d-6\" style=\"font-family: 'Scheherazade New', serif; font-size: 26px; color: var(--primary); line-height: 1.6; text-align: center; margin: 0;\"><\/p>\n      <\/div>\n\n      <div class=\"btn-anchor\">\n          <button id=\"btn-start-level\" class=\"btn btn-next\" onclick=\"window.navigateTo('view-modules')\"><\/button>\n      <\/div>\n\n  <\/div>\n<\/div>\n<!-- ============================================================ -->\n\n\n\n<!-- 2. L'\u00c9CRAN DES MODES DE JEU (Apr\u00e8s avoir choisi un th\u00e8me)    -->\n\n\n\n<!-- ============================================================ -->\n\n\n\n<div class=\"screen\" id=\"view-modules\">\n\n\n\n <div class=\"content-wrapper\">\n\n\n\n     <h2 id=\"lbl-modules-title\" style=\"margin-bottom: 25px; text-align:center; color: var(--primary); font-weight: 900; text-transform: uppercase;\">\n\n\n\n         <i class=\"fa-solid fa-sliders\"><\/i> Choix de l&rsquo;exercice\n\n\n\n     <\/h2>\n\n\n\n\n\n\n\n     <div class=\"quick-actions-title\" id=\"lbl-mode-std-title\">S\u00e9lectionnez le mode pour ce niveau<\/div>\n\n\n\n\n<div class=\"taz-action-stack\">\n\n\n\n<!-- \ud83d\ude80 NOUVEAU BOUTON : MODE SPIRALE -->\n<div class=\"taz-rect-btn\" onclick=\"window.startSpiralMode(window.db[window.curLvl-1].content)\" style=\"border-color: var(--danger); background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%);\">\n  <div class=\"taz-rect-icon\" style=\"background: rgba(225, 29, 72, 0.1); color: var(--danger);\"><i class=\"fa-solid fa-hurricane\"><\/i><\/div>\n  <!-- \ud83d\udc47 C'EST ICI QUE TU COLLES TON CODE \ud83d\udc47 -->\n  <div class=\"taz-rect-text\">\n      <span class=\"title\" id=\"lbl-spiral-title\" style=\"color: var(--danger);\">M\u00e9moire Active <span class=\"badge-new-pulse\">INTENSIF<\/span><\/span>\n      <span class=\"subtitle\" id=\"lbl-spiral-sub\">Apprentissage en boucle<\/span>\n  <\/div>\n  <!-- \ud83d\udc46 -------------------------------- \ud83d\udc46 -->\n  <i class=\"fa-solid fa-chevron-right chevron\" style=\"color: var(--danger);\"><\/i>\n<\/div>\n\n\n\n\n\n<!-- \ud83d\ude80 NOUVEAU BOUTON : LE MOT JUSTE -->\n<div class=\"taz-rect-btn\" onclick=\"window.startSniperMode(window.db[window.curLvl-1].content)\" style=\"border-color: var(--success); background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);\">\n  <div class=\"taz-rect-icon\" style=\"background: rgba(16, 185, 129, 0.1); color: var(--success);\"><i class=\"fa-solid fa-pen-fancy\"><\/i><\/div>\n  <div class=\"taz-rect-text\">\n      <span class=\"title\" id=\"lbl-sniper-title\" style=\"color: var(--success);\">Le Mot Juste <span class=\"badge-new-pulse\" style=\"background:var(--success);\">NOUVEAU<\/span><\/span>\n      <span class=\"subtitle\" id=\"lbl-sniper-sub\">Compl\u00e9tion de Coran &#038; Hadith<\/span>\n  <\/div>\n  <i class=\"fa-solid fa-chevron-right chevron\" style=\"color: var(--success);\"><\/i>\n<\/div>\n\n\n\n\n\n\n\n\n\n\n         <div class=\"taz-rect-btn\" onclick=\"window.launchMode('ar-fr')\">\n             <div class=\"taz-rect-icon green\"><i class=\"fa-solid fa-language\"><\/i><\/div>\n             <div class=\"taz-rect-text\">\n                 <span class=\"title\" id=\"lbl-tile-ar-fr\">Traduction (\u0639 \u2190 FR)<\/span>\n                 <span class=\"subtitle\" id=\"lbl-sub-ar-fr\">Comprendre l&rsquo;arabe<\/span>\n             <\/div>\n             <i class=\"fa-solid fa-chevron-right chevron\"><\/i>\n         <\/div>\n\n         <div class=\"taz-rect-btn\" onclick=\"window.launchMode('fr-ar')\">\n             <div class=\"taz-rect-icon gold\"><i class=\"fa-solid fa-pen-nib\"><\/i><\/div>\n             <div class=\"taz-rect-text\">\n                 <span class=\"title\" id=\"lbl-tile-fr-ar\">\u00c9criture (FR \u2190 \u0639)<\/span>\n                 <span class=\"subtitle\" id=\"lbl-sub-fr-ar\">Clavier arabe intelligent<\/span>\n             <\/div>\n             <i class=\"fa-solid fa-chevron-right chevron\"><\/i>\n         <\/div>\n\n         <div class=\"taz-rect-btn\" onclick=\"window.launchMode('qcm-mix')\">\n             <div class=\"taz-rect-icon blue\"><i class=\"fa-solid fa-shuffle\"><\/i><\/div>\n             <div class=\"taz-rect-text\">\n                 <span class=\"title\" id=\"lbl-tile-qcm\">QCM Mixte<\/span>\n                 <span class=\"subtitle\" id=\"lbl-sub-qcm\">Choix multiples<\/span>\n             <\/div>\n             <i class=\"fa-solid fa-chevron-right chevron\"><\/i>\n         <\/div>\n\n         <div class=\"taz-rect-btn\" onclick=\"window.launchMode('forms')\">\n             <div class=\"taz-rect-icon purple\"><i class=\"fa-solid fa-puzzle-piece\"><\/i><\/div>\n             <div class=\"taz-rect-text\">\n                 <span class=\"title\" id=\"lbl-tile-forms\">Ma\u00eetrise<\/span>\n                 <span class=\"subtitle\" id=\"lbl-sub-forms\">Formes &#038; D\u00e9clinaisons<\/span>\n             <\/div>\n             <i class=\"fa-solid fa-chevron-right chevron\"><\/i>\n         <\/div>\n\n     <\/div>\n\n\n\n\n\n\n\n\n\n\n\n <\/div>\n\n\n\n<\/div>\n\n\n\n\n\n\n\n\n\n\n\n<div class=\"screen\" id=\"view-learn\">\n\n\n\n     <div class=\"content-wrapper\">\n\n\n\n         <div id=\"learn-container\"><\/div>\n\n\n\n         <div class=\"btn-anchor\">\n\n\n\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\n         <\/div>\n\n     <\/div>\n\n <\/div>\n<div class=\"screen\" id=\"view-test\">\n <div class=\"content-wrapper\">\n\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\n\n\n\n<!-- \u23f1\ufe0f LE CHRONOM\u00c8TRE DIGITAL (Un seul exemplaire !) -->\n<div id=\"chrono-display\" style=\"display:none; text-align:center; font-size:28px; font-weight:900; color:var(--danger); margin-bottom:15px; letter-spacing: 2px;\">\n  <i class=\"fa-solid fa-stopwatch\"><\/i> <span id=\"chrono-text\">00:00<\/span>\n<\/div>\n\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\n\n\n <!-- 2\ufe0f\u20e3 LA BO\u00ceTE VITALE POUR AFFICHER LE MOT (Ne l'efface plus !) -->\n\n\n\n <div id=\"tAr\" style=\"text-align:center; font-family:'Scheherazade New', serif; font-size:40px; font-weight:900; color:var(--primary); margin-bottom:20px;\"><\/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n             <div class=\"section-block\" style=\"border-radius: 20px; border:none; background:transparent;\">\n\n\n\n                 <div class=\"section-body\" style=\"padding: 10px 0;\">\n\n\n\n                     <div class=\"ar-main\" id=\"tAr\"><\/div>\n\n\n\n                 <\/div>\n\n\n\n             <\/div>\n\n\n\n\n\n\n\n             <input type=\"text\" id=\"tInput\" placeholder=\"...\" autocorrect=\"off\" autocapitalize=\"off\">\n\n\n\n             <div id=\"virtual-keyboard\"><\/div>\n\n\n\n\n\n\n\n             <div class=\"btn-anchor\">\n\n\n\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\n\n\n             <\/div>\n\n\n\n         <\/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<div id=\"mould-result\" class=\"mould-content\">\n\n\n\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\n\n\n\n\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\n\n\n <i class=\"fa-solid fa-book-open\"><\/i> D\u00e9couvrir la preuve textuelle\n\n\n\n<\/h3>\n\n\n<div id=\"accordeons-container\" style=\"display: flex; flex-direction: column; gap: 15px; margin-bottom: 130px;\">\n<\/div>\n\n\n<audio id=\"aud\"><\/audio>                <div class=\"btn-anchor\">\n\n\n\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\n\n\n             <\/div>\n\n\n\n         <\/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n     <\/div> <\/div>\n\n\n\n\n\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\n         <!-- \ud83d\udc47 ICI J'AI AJOUT\u00c9 L'ID : id=\"ui-lock-btn-sub\" \ud83d\udc47 -->\n         <button id=\"ui-lock-btn-sub\" 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\n         <!-- \ud83d\udc47 ET ICI J'AI AJOUT\u00c9 L'ID : id=\"ui-lock-btn-menu\" \ud83d\udc47 -->\n         <button id=\"ui-lock-btn-menu\" onclick=\"window.navigateToMenu()\" class=\"btn btn-outline\" style=\"border-color:transparent; color: var(--text-muted); margin-top: 15px;\">RETOUR AU MENU<\/button>\n\n     <\/div>\n <\/div>  \n\n\n\n\n\n<div class=\"screen\" id=\"view-lexicon\" style=\"flex-direction: column; height: 100%;\">\n  <div class=\"content-wrapper\" style=\"flex:1; display:flex; flex-direction:column;\">\n      <h2 id=\"lbl-lexicon-title\" style=\"text-align:center; color:var(--primary); font-weight:900; margin-top:0; text-transform:uppercase;\">\n          <i class=\"fa-solid fa-book-open\"><\/i> LEXIQUE\n      <\/h2>\n\n      <!-- \ud83d\ude80 ONGLETS PRINCIPAUX : CHOIX DU MODE -->\n      <div class=\"taz-tabs\" style=\"margin-bottom:20px;\">\n          <button class=\"taz-tab active\" id=\"btn-main-tab-savoir\" onclick=\"window.switchMainLexiconTab('savoir')\">Le Savoir<\/button>\n          <button class=\"taz-tab\" id=\"btn-main-tab-adn\" onclick=\"window.switchMainLexiconTab('adn')\">L&rsquo;ADN Arabe<\/button>\n      <\/div>\n\n      <!-- \ud83d\udcda CONTENEUR 1 : LE SAVOIR (Classique) -->\n      <div id=\"lexicon-savoir-wrapper\" style=\"display:flex; flex-direction:column; flex:1; width:100%;\">\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:20px;\">Mots d\u00e9bloqu\u00e9s jusqu&rsquo;au niveau actuel<\/p>\n          <div class=\"taz-tabs\">\n              <button class=\"taz-tab active\" id=\"btn-tab-noms\" onclick=\"window.switchLexiconTab('noms')\">Noms<\/button>\n              <button class=\"taz-tab\" id=\"btn-tab-verbes\" onclick=\"window.switchLexiconTab('verbes')\">Verbes<\/button>\n          <\/div>\n          <div id=\"lexicon-list\" style=\"overflow-y: auto; flex: 1; padding-bottom: 20px; display:flex; flex-direction:column; gap:12px;\"><\/div>\n      <\/div>\n\n      <!-- \ud83e\uddec CONTENEUR 2 : L'ADN ARABE (Les Fiches) -->\n      <div id=\"lexicon-adn-wrapper\" style=\"display:none; flex-direction:column; flex:1; width:100%;\">\n\n<p id=\"lbl-lexicon-adn-sub\" style=\"text-align:center; color:var(--text-muted); font-size:13px; font-weight:800; margin-top:-10px; margin-bottom:15px;\">Vos fiches de racines d\u00e9bloqu\u00e9es<\/p>\n\n          <!-- Barre de choix des formes (D\u00e9filement horizontal) -->\n          <div class=\"swipe-carousel\" id=\"adn-form-tabs\" style=\"display:flex; overflow-x:auto; gap:8px; padding-bottom:10px; margin-bottom:10px; -webkit-overflow-scrolling: touch;\"><\/div>\n\n          <div id=\"lexicon-adn-list\" style=\"overflow-y: auto; flex: 1; display:flex; flex-direction:column; gap:20px; padding-bottom:20px;\"><\/div>\n      <\/div>\n\n  <\/div>\n<\/div>\n\n\n\n\n\n <div class=\"screen\" id=\"view-stats\" style=\"flex-direction: column; height: 100%;\">\n\n\n\n     <div class=\"content-wrapper\">\n\n\n\n         <h2 id=\"lbl-stats-title\" style=\"text-align:center; color:var(--primary); font-weight:900; margin-top:0; text-transform:uppercase;\">\n\n\n\n             <i class=\"fa-solid fa-chart-simple\"><\/i> STATISTIQUES\n\n\n\n         <\/h2>\n\n\n\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\n\n\n\n\n\n\n         <div id=\"stats-container\" style=\"display: flex; flex-direction: column; gap: 15px; padding: 10px; flex:1; align-content: start;\">\n\n\n\n         <\/div>\n\n\n\n     <\/div>\n\n\n\n <\/div>\n\n\n\n\n\n\n\n <div class=\"screen\" id=\"view-leaderboard\" style=\"flex-direction: column; height: 100%;\">\n\n\n\n     <div class=\"content-wrapper\">\n\n\n\n         <h2 id=\"lbl-lead-title\" style=\"text-align:center; color:var(--gold); font-weight:900; margin-top:0; text-transform:uppercase;\">\n\n\n\n             <i class=\"fa-solid fa-trophy\"><\/i> CLASSEMENT\n\n\n\n         <\/h2>\n\n\n\n\n\n\n\n         <div class=\"taz-tabs\">\n\n\n\n             <button class=\"taz-tab active\" id=\"btn-tab-gen\" onclick=\"window.loadLeaderboard('general')\">G\u00e9n\u00e9ral<\/button>\n\n\n\n             <button class=\"taz-tab\" id=\"btn-tab-ligue\" onclick=\"window.loadLeaderboard('ligue')\">Ma Ligue<\/button>\n\n\n\n         <\/div>\n\n\n\n\n\n\n\n         <div id=\"leaderboard-container\" style=\"flex: 1; overflow-y: auto; padding: 0 10px;\">\n\n\n\n             <div id=\"lead-loading\" style=\"text-align:center; color:var(--text-muted); padding: 40px 20px;\">\n\n\n\n                 <i class=\"fa-solid fa-circle-notch fa-spin\" style=\"font-size: 30px; margin-bottom:15px; color:var(--gold);\"><\/i><br>\n\n\n\n                 R\u00e9cup\u00e9ration des champions&#8230;\n\n\n\n             <\/div>\n\n\n\n             <div id=\"lead-list\" style=\"display:flex; flex-direction:column; gap:12px;\"><\/div>\n\n\n\n         <\/div>\n\n\n\n\n\n\n\n     <\/div>\n\n\n\n <\/div>\n\n\n\n\n\n\n\n\n<div class=\"screen\" id=\"view-synthesis\" style=\"flex-direction: column; height: 100%;\">\n  <div class=\"content-wrapper\">\n      <h2 id=\"lbl-synth-title\" style=\"text-align:center; color:var(--primary); font-weight:900; margin-top:0; text-transform:uppercase;\">\n          <i class=\"fa-solid fa-book-open-reader\"><\/i> Le\u00e7on de Synth\u00e8se\n      <\/h2>\n      <p id=\"lbl-synth-sub\" style=\"text-align:center; color:var(--text-muted); font-size:13px; font-weight:800; margin-top:-10px; margin-bottom:15px;\"><\/p>\n\n     \n\n\n\n\n<div class=\"section-block\" style=\"position: relative; border: 2px solid var(--gold); border-radius: 20px; background: #FFFFFF; box-shadow: 0 10px 25px rgba(212, 175, 55, 0.15); display: flex; flex-direction: column;\">\n\n          <div id=\"lbl-swipe-hint\" style=\"background: var(--gold-light); padding: 10px; text-align: center; color: var(--gold); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;\">\n              <i class=\"fa-solid fa-arrows-left-right\"><\/i> Naviguez avec les fl\u00e8ches ou balayez l&rsquo;\u00e9cran\n          <\/div>\n\n         \n\n\n\n<!-- Le carrousel avec l'animation des points -->\n          <div id=\"synth-carousel\" class=\"swipe-carousel\" style=\"display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; width: 100%;\" onscroll=\"let i=Math.round(this.scrollLeft\/this.offsetWidth); document.getElementById('dot-ar').style.background=i===0?'var(--primary)':'#CBD5E1'; document.getElementById('dot-tr').style.background=i===1?'var(--primary)':'#CBD5E1';\">\n\n              <!-- Slide 1 : Arabe (BOUTON AUDIO SUPPRIM\u00c9) -->\n              <div class=\"swipe-slide\" style=\"flex: 0 0 100%; width: 100%; padding: 25px 20px; scroll-snap-align: start; box-sizing: border-box; white-space: normal;\">\n                  <div id=\"synth-content-ar\" style=\"font-family: 'Scheherazade New', serif; font-size: 32px; color: var(--primary); line-height: 1.8; text-align: right; direction: rtl; word-wrap: break-word; padding-top: 15px;\"><\/div>\n              <\/div>\n\n              <!-- Slide 2 : Traduction (AVEC BOUTON AUDIO FR\/EN) -->\n              <div class=\"swipe-slide\" style=\"flex: 0 0 100%; width: 100%; padding: 25px 20px; scroll-snap-align: start; box-sizing: border-box; white-space: normal;\">\n                  <div style=\"text-align: right; margin-bottom: 12px;\">\n                      <button id=\"btn-audio-synth-tr\" onclick=\"window.playSynthAudio('tr')\" style=\"background: none; border: 1px solid var(--border); color: var(--primary); padding: 6px 14px; border-radius: 12px; cursor: pointer; font-size: 12px; font-weight: 800; font-family: 'Nunito', sans-serif; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px;\">\n                          <i class=\"fa-solid fa-volume-high\"><\/i> <span id=\"lbl-listen-btn\">\u00c9COUTER<\/span>\n                      <\/button>\n                  <\/div>\n                  <div id=\"synth-content-tr\" style=\"font-size: 16px; font-weight: 800; color: var(--dark); line-height: 1.8; text-align: justify; word-wrap: break-word;\"><\/div>\n              <\/div>\n\n          <\/div>\n\n          <!-- Contr\u00f4les du bas : Fl\u00e8ches (PC) + Points -->\n          <style>\n              .synth-bottom-nav { display: none; width: 44px; height: 44px; border-radius: 50%; background: #F8FAFC; border: 1px solid #E2E8F0; color: var(--primary); font-size: 16px; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }\n              .synth-bottom-nav:hover { background: #FFFFFF; transform: scale(1.1); color: var(--gold); }\n              @media (min-width: 768px) { .synth-bottom-nav { display: flex; } }\n          <\/style>\n          \n          <div style=\"display: flex; justify-content: center; align-items: center; gap: 25px; padding: 10px 0 25px 0;\">\n              <!-- Fl\u00e8che Gauche (PC seulement) -->\n              <button class=\"synth-bottom-nav\" onclick=\"document.getElementById('synth-carousel').scrollBy({left: -document.getElementById('synth-carousel').offsetWidth, behavior: 'smooth'})\"><i class=\"fa-solid fa-chevron-left\"><\/i><\/button>\n\n              <!-- Points -->\n              <div style=\"display: flex; gap: 8px;\">\n                  <div id=\"dot-ar\" style=\"width: 8px; height: 8px; border-radius: 50%; background: var(--primary); transition: background 0.3s;\"><\/div>\n                  <div id=\"dot-tr\" style=\"width: 8px; height: 8px; border-radius: 50%; background: #CBD5E1; transition: background 0.3s;\"><\/div>\n              <\/div>\n\n              <!-- Fl\u00e8che Droite (PC seulement) -->\n              <button class=\"synth-bottom-nav\" onclick=\"document.getElementById('synth-carousel').scrollBy({left: document.getElementById('synth-carousel').offsetWidth, behavior: 'smooth'})\"><i class=\"fa-solid fa-chevron-right\"><\/i><\/button>\n          <\/div>\n\n\n\n\n\n\n      <\/div>\n\n      <div class=\"btn-anchor\">\n          <button id=\"btn-finish-synth\" class=\"btn btn-next\" onclick=\"window.triggerFinalScoreScreen()\"><i class=\"fa-solid fa-check\"><\/i> TERMINER LE NIVEAU<\/button>\n      <\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\n\n<div class=\"screen\" id=\"view-result-end\">\n\n\n\n     <div class=\"content-wrapper\">\n\n\n\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\n\n\n         <div id=\"end-level-choices\" style=\"display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%;\">\n\n\n\n             <button id=\"btn-next-lvl\" class=\"btn btn-next\"><\/button>\n\n\n\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\n\n\n         <\/div>\n\n\n\n     <\/div>\n\n\n\n <\/div>\n\n\n\n<!-- ============================================================ -->\n<!-- \ud83c\udd70\ufe0f MODULE ALPHABET : L'\u00c9CRAN D'APPRENTISSAGE                 -->\n<!-- ============================================================ -->\n\n<div class=\"screen\" id=\"view-alphabet-learn\" style=\"background: transparent;\">\n\n\n   <div class=\"content-wrapper\" style=\"justify-content: flex-start; align-items: center; padding-top: 20px;\">\n\n       <!-- Bouton retour sp\u00e9cifique \u00e0 l'alphabet -->\n       <div style=\"width: 100%; display: flex; justify-content: flex-start; margin-bottom: 20px;\">\n           <button class=\"ios-btn\" onclick=\"window.navigateTo('view-hub')\" style=\"box-shadow: 0 4px 10px rgba(0,0,0,0.05); background: white; border: 1px solid #E2E8F0; color: var(--primary);\">\n               <i class=\"fa-solid fa-arrow-left\"><\/i>\n           <\/button>\n       <\/div>\n\n       <h2 id=\"lbl-alpha-title\" style=\"text-align:center; color: var(--primary); font-weight: 900; text-transform: uppercase; margin-bottom: 5px;\">\n           <i class=\"fa-solid fa-language\"><\/i> L&rsquo;Alphabet\n       <\/h2>\n\n       <p id=\"lbl-alpha-sub\" style=\"text-align:center; color: var(--text-muted); font-size: 13px; font-weight: 800; margin-bottom: 30px;\">\n           Les fondations de la langue\n       <\/p>\n\n       <!-- \ud83e\udde0 C'EST ICI QUE LE NOUVEAU FICHIER JS VA INJECTER LES LETTRES -->\n       <div id=\"alphabet-container\" style=\"width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 20px;\">\n           <!-- Vide pour l'instant -->\n       <\/div>\n\n   <\/div>\n<\/div>\n\n\n<!-- ============================================================ -->\n<!-- \ud83d\udcd6 LEXIQUE DE L'ALPHABET (NOUVEL \u00c9CRAN)                      -->\n<!-- ============================================================ -->\n\n<div class=\"screen\" id=\"view-alpha-lexicon\" style=\"background: transparent;\">\n   <div class=\"content-wrapper\" style=\"justify-content: flex-start; align-items: center; padding-top: 20px;\">\n\n       <!-- Bouton retour vers le dashboard de l'alphabet -->\n       <div style=\"width: 100%; display: flex; justify-content: flex-start; margin-bottom: 20px;\">\n           <button class=\"ios-btn\" onclick=\"window.navigateTo('view-alphabet-learn'); window.renderDashboard();\" style=\"box-shadow: 0 4px 10px rgba(0,0,0,0.05); background: var(--surface); border: 1px solid var(--border); color: var(--primary);\">\n               <i class=\"fa-solid fa-arrow-left\"><\/i>\n           <\/button>\n       <\/div>\n\n       <h2 id=\"lbl-alpha-lex-title\" style=\"text-align:center; color: var(--primary); font-weight: 900; text-transform: uppercase; margin-bottom: 5px;\">\n           <i class=\"fa-solid fa-book-open\"><\/i> Lexique\n       <\/h2>\n       <p id=\"lbl-alpha-lex-sub\" style=\"text-align:center; color: var(--text-muted); font-size: 13px; font-weight: 800; margin-bottom: 30px;\">\n           Vos mots de l&rsquo;alphabet\n       <\/p>\n\n       <!-- C'est ici que le JavaScript va injecter les mots tri\u00e9s -->\n       <div id=\"alpha-lexicon-list\" style=\"width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 12px; padding-bottom: 150px;\">\n       <\/div>\n\n   <\/div>\n<\/div>\n\n\n\n\n\n\n\n\n\n\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\n\n\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\n\n\n\n\n\n     <div style=\"display: flex; align-items: center; margin-bottom: 25px; position: relative;\">\n\n\n\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\n\n\n             <i class=\"fa-solid fa-house\"><\/i>\n\n\n\n         <\/button>\n\n\n\n\n\n\n\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\n\n\n\n\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\n\n\n     <\/div>\n\n\n\n\n\n\n\n\n\n\n\n     <div style=\"overflow-y:auto; flex: 1; padding-right: 5px;\">\n\n\n\n         <div id=\"themes-list\"><\/div>\n\n\n\n        <div id=\"levels-grid\" style=\"display:none; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:15px;\"><\/div>\n\n\n     <\/div>\n\n\n\n <\/div>\n\n\n\n<\/div>\n\n\n\n\n\n\n\n\n\n<!-- ============================================================ -->\n<!-- \ud83e\udde0 SCRIPT MAGIQUE : ROTATION DES IMAGES (DOUBLE LISTE PC\/MOBILE) -->\n<!-- ============================================================ -->\n<script>\n(function() {\n  \/\/ \ud83d\udcf1 Les 23 images originales (Optimis\u00e9es pour format Portrait \/ Mobile)\n  const imagesMobile = [\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/alessa-ciraulo-r-cy77rA0J0-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/alessio-furlan-Vw3a0HgE7AM-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/blake-verdoorn-cssvEZacHvQ-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/christopher-kuzman-2LhCDvS_7xs-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/daniela-kokina-hOhlYhAiizc-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/emma-swoboda-DXEhDakyt8E-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/emmo-filipov-RNjHBdVVywU-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/fahrul-azmi-5K549TS6F08-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/fahrul-azmi-gyKmF0vnfBs-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/guillaume-briard-lSXpV8bDeMA-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/ian-schneider-WymR2nYtj5M-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/ishan-seefromthesky-66Tu10CxYY0-unsplash-1-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/izuddin-helmi-adnan-JFirQekVo3U-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/jcob-nasyr-hZPYwYR02Yo-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/jumanh-jammaz-RWjM1BLnjxM-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/kyle-johnson-Aq7id0ZjEW4-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/leio-mclaren-nGwhwpzLGnU-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/luke-richardson-dI7vfR1Bqcg-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/matteo-catanese-4KrQq8Z6Y5c-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/mink-mingle-g0Qdolm3K14-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/nick-fewings-ZcBY_mxVBCE-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/rizky-andar-7FldJVOe2DM-unsplash-scaled.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/07\/saj-shafique-24c4PsHzTyc-unsplash-scaled.webp'\n  ];\n\n  \/\/ \ud83d\udcbb Les 16 NOUVELLES images (Optimis\u00e9es pour format Paysage \/ PC)\n  const imagesPC = [\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/apassingstranger-mosque-6231915_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/anonymoustraveller-mosque-2654550_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/rizelli-mosque-3905675_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/maxos_dim-mosque-1978985_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/makalu-sultan-qaboos-grand-mosque-5963726_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/konevi-mosque-4525144_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/konevi-mosque-4372296_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/konevi-mosque-3724921_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/konevi-masjid-prophetic-9883639_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/konevi-kaaba-4870988_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/konevi-ive-to-medina-3340242_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/konevi-cuba-3345457_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/hansjuergenw-mosque-4134459_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/dannysee-ramadhan-4219913_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/ben_kerckx-mosque-6835469_1920.webp',\n    'https:\/\/www.tazkiraacademy.com\/wp-content\/uploads\/2026\/10\/abdullah_shakoor-kaaba-2217859_1920.webp'\n  ];\n\n  let indexMotGlobal = 0; \/\/ On commence \u00e0 0\n\n  \/\/ Le \"Watcher\" (L'observateur)\n  const observer = new MutationObserver(() => {\n      const container = document.getElementById('accordeons-container');\n      if (!container) return;\n\n      const items = container.querySelectorAll('.accordeon-item');\n      \n      \/\/ S'il y a des accord\u00e9ons et qu'on ne leur a pas encore donn\u00e9 d'image...\n      if (items.length > 0 && !items[0].dataset.bgSet) {\n\n          \/\/ \ud83e\udde0 C'EST ICI LA MAGIE : On choisit la liste selon la taille de l'\u00e9cran !\n          let estSurPC = window.innerWidth >= 1024;\n          let listeActive = estSurPC ? imagesPC : imagesMobile;\n\n          \/\/ On pioche l'image actuelle (la boucle modulo % g\u00e8re la r\u00e9p\u00e9tition infinie)\n          const imgActuelle = listeActive[indexMotGlobal % listeActive.length];\n\n          \/\/ On donne l'image aux deux preuves (Coran & Hadith) du mot actuel\n          items.forEach(item => {\n              item.style.setProperty('--bg-mot', `url('${imgActuelle}')`);\n              item.dataset.bgSet = \"true\"; \/\/ On le marque comme \"Fait\"\n          });\n\n          \/\/ On avance d'un pas pour le prochain mot de l'\u00e9l\u00e8ve !\n          indexMotGlobal++;\n      }\n  });\n\n  \/\/ Lancement de la surveillance\n  const initObserver = () => {\n      const container = document.getElementById('accordeons-container');\n      if (container) {\n          observer.observe(container, { childList: true });\n      } else {\n          setTimeout(initObserver, 500); \/\/ R\u00e9essaie dans une demi-seconde si pas encore charg\u00e9\n      }\n  };\n\n  if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', initObserver);\n  } else {\n      initObserver();\n  }\n})();\n<\/script>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!-- ============================================================ -->\n<!-- \ud83e\udde0 SCRIPT DU HUB : PASSEPORT + RESTAURATION PREMIUM & CLOUD  -->\n<!-- ============================================================ -->\n<script>\n\/\/ \ud83d\udd11 1. LECTURE DU PASSEPORT M\u00c9MOIRE (Connexion + Statut Premium)\nwindow.appliquerPasseportConnexion = function() {\n    if (typeof window.lisan_ajax === 'undefined') {\n        window.lisan_ajax = { ajaxurl: '\/wp-admin\/admin-ajax.php', est_connecte: '0', est_premium: '0', est_en_essai: '0' };\n    }\n    if (window.lisan_ajax.est_connecte === '1') {\n        localStorage.setItem('lisan_auth_done', '1');\n    }\n    if (window.lisan_ajax.est_premium === '1') {\n        localStorage.setItem('lisan_premium_done', '1');\n    }\n    if (localStorage.getItem('lisan_auth_done') === '1') {\n        window.lisan_ajax.est_connecte = '1';\n    }\n    if (localStorage.getItem('lisan_premium_done') === '1') {\n        window.lisan_ajax.est_premium = '1';\n    }\n};\n\nwindow.appliquerPasseportConnexion();\n\n\/\/ \ud83d\udce1 2. RADAR EN DIRECT (Interroge TOUJOURS le serveur pour r\u00e9cup\u00e9rer le Premium et les niveaux !)\nwindow.verifierConnexionReelle = function(callback) {\n    window.appliquerPasseportConnexion();\n\n    let formData = new FormData();\n    formData.append('action', 'lisan_verifier_statut_direct');\n\n    fetch('\/wp-admin\/admin-ajax.php?t=' + Date.now(), { method: 'POST', body: formData, credentials: 'include' })\n    .then(r => r.json())\n    .then(res => {\n        if (res.success && res.data && res.data.est_connecte === '1') {\n            localStorage.setItem('lisan_auth_done', '1');\n            window.lisan_ajax.est_connecte = '1';\n            window.lisan_ajax.est_premium = res.data.est_premium || '0';\n            window.lisan_ajax.est_en_essai = res.data.est_en_essai || '0';\n            window.lisan_ajax.jours_restants = res.data.jours_restants || 0;\n            if (res.data.nonce) window.lisan_ajax.nonce = res.data.nonce;\n\n            \/\/ \ud83d\udc51 Sauvegarde du badge Premium\/Admin dans la m\u00e9moire du t\u00e9l\u00e9phone\n            if (res.data.est_premium === '1') {\n                localStorage.setItem('lisan_premium_done', '1');\n            } else {\n                localStorage.removeItem('lisan_premium_done');\n            }\n\n            \/\/ \ud83d\udce6 Restauration automatique de tes niveaux d\u00e9bloqu\u00e9s depuis le Cloud !\n            if (res.data.niveau_cloud && parseInt(res.data.niveau_cloud) > parseInt(localStorage.getItem('lisan_lvl') || '1')) {\n                localStorage.setItem('lisan_lvl', res.data.niveau_cloud);\n                window.curLvl = parseInt(res.data.niveau_cloud);\n            }\n            if (res.data.cloud_data) {\n                let cd = res.data.cloud_data;\n                if (cd.completed_levels && cd.completed_levels !== '\"\"') localStorage.setItem('lisan_completed_levels', cd.completed_levels);\n                if (cd.forge_state && cd.forge_state !== '\"\"') localStorage.setItem('taz_forge_state', cd.forge_state);\n                if (cd.alpha_completed && cd.alpha_completed !== '\"\"') localStorage.setItem('taz_alpha_completed', cd.alpha_completed);\n            }\n        }\n        if (callback) callback();\n    })\n    .catch(() => { if (callback) callback(); });\n};\n\n\/\/ Lancement imm\u00e9diat au chargement pour r\u00e9cup\u00e9rer ton statut Admin\/Premium\nwindow.verifierConnexionReelle();\n\n\/\/ \ud83d\udee1\ufe0f 3. INSTALLATION DES COMMANDES DU HUB\nwindow.installerCommandesHub = function() {\n    window.appliquerPasseportConnexion();\n\n    window.saveSettingsAndGo = function() {\n        localStorage.setItem('lisan_settings_done', 'yes');\n        window.navigateTo('view-hub');\n    };\n\n    \/\/ \ud83d\udd13 ALPHABET : Le visiteur entre sans blocage pour tester sa 1re le\u00e7on\n    window.startAlphabetMode = function() {\n        window.verifierConnexionReelle(function() {\n            window.navigateTo('view-alphabet-learn');\n            if (typeof window.initAlphabetModule === 'function') {\n                window.initAlphabetModule();\n            }\n        });\n    };\n\n    \/\/ \ud83d\udd13 VOCABULAIRE & ADN : Le visiteur entre sans blocage pour tester le Niveau 1\n    window.enterVocabApp = function() {\n        window.verifierConnexionReelle(function() {\n            \/\/ 1. S'il n'est pas connect\u00e9 -> Il entre directement pour tester le Niveau 1 !\n            if (window.lisan_ajax.est_connecte !== '1') {\n                window.navigateTo('view-menu');\n                return;\n            }\n\n            \/\/ 2. \ud83d\udc51 Si Admin\/Premium, ou d\u00e9j\u00e0 en essai, ou essai d\u00e9j\u00e0 lanc\u00e9 -> Entr\u00e9e directe !\n            if (window.lisan_ajax.est_premium === '1' || window.lisan_ajax.est_en_essai === '1' || localStorage.getItem('lisan_trial_started') === '1') {\n                window.navigateTo('view-menu');\n                return;\n            }\n\n            \/\/ 3. S'il vient de cr\u00e9er son compte gratuit -> Pop-up qui active ses 3 jours d'essai\n            localStorage.setItem('lisan_trial_started', '1');\n            if (typeof window.showTrialWarningModal === 'function') {\n                window.showTrialWarningModal();\n            } else if (typeof window.confirmTrialStart === 'function') {\n                window.confirmTrialStart();\n            } else {\n                window.navigateTo('view-menu');\n            }\n        });\n    };\n\n    window.showAuthModal = function(type, source = 'vocabulaire') {\n        let modal = document.getElementById('custom-auth-modal');\n        if (!modal) {\n            modal = document.createElement('div');\n            modal.id = 'custom-auth-modal';\n            document.body.appendChild(modal);\n        }\n\n        let isFr = window.currentLang === 'fr';\n        let title, desc, btn1Txt, btn1Url, btn2Txt, btn2Url, icon1, icon2;\n        let btnRetour = isFr ? \"RETOUR AU MENU\" : \"BACK TO MENU\";\n\n        if (type === 'premium') {\n            title = isFr ? \"\ud83d\udc8e Contenu Premium\" : \"\ud83d\udc8e Premium Content\";\n            desc = isFr ? \"F\u00e9licitations pour vos progr\u00e8s ! L'acc\u00e8s \u00e0 ce niveau est r\u00e9serv\u00e9 aux membres Premium.\" : \"Access to this level is reserved for Premium members.\";\n            btn1Txt = isFr ? \"PASSER AU PREMIUM\" : \"GO PREMIUM\";\n            btn1Url = \"\/compte-premium\/\";\n            icon1 = \"fa-gem\";\n            btn2Txt = isFr ? \"D\u00e9j\u00e0 Premium ? Se connecter\" : \"Already Premium? Log in\";\n            btn2Url = \"\/customer-dashboard\/\";\n            icon2 = \"fa-user-check\";\n        } else {\n            title = isFr ? \"\ud83d\udd12 Inscription Requise\" : \"\ud83d\udd12 Login Required\";\n\n            if (source === 'alphabet') {\n                desc = isFr\n                    ? \"Bravo pour votre premi\u00e8re le\u00e7on ! \ud83c\udf89<br><br>Le mode Alphabet est <b>100% gratuit \u00e0 vie<\/b>. Cr\u00e9ez simplement un compte pour sauvegarder votre progression et d\u00e9bloquer toutes les autres le\u00e7ons !\"\n                    : \"Congrats on your first lesson! \ud83c\udf89<br><br>The Alphabet mode is <b>100% free for life<\/b>. Simply create an account to save your progress and unlock all other lessons!\";\n            } else {\n                desc = isFr\n                    ? \"Cr\u00e9ez un compte gratuit pour sauvegarder votre Niveau 1 et activer vos <b>3 jours d'essai gratuit<\/b> au mode Vocabulaire.<br><br><span style='color:#E11D48;'><i class='fa-solid fa-triangle-exclamation'><\/i> <b>Pr\u00e9requis : Savoir lire l'arabe.<\/b><\/span><br>Si vous d\u00e9butez, utilisez plut\u00f4t le mode Alphabet.\"\n                    : \"Create a free account to save Level 1 and activate your <b>3-day free trial<\/b>.<br><br><span style='color:#E11D48;'><i class='fa-solid fa-triangle-exclamation'><\/i> <b>Requirement: Reading Arabic.<\/b><\/span><br>If you're a beginner, use the free Alphabet mode instead.\";\n            }\n\n            btn1Txt = isFr ? \"CR\u00c9ER UN COMPTE GRATUIT\" : \"CREATE FREE ACCOUNT\";\n            btn1Url = \"\/inscription\/\";\n            icon1 = \"fa-user-plus\";\n            btn2Txt = isFr ? \"D\u00e9j\u00e0 un compte ? Se connecter\" : \"Already an account? Log in\";\n            btn2Url = \"\/customer-dashboard\/\";\n            icon2 = \"fa-user-check\";\n        }\n\n        modal.innerHTML = `\n            <div style=\"position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(15, 23, 42, 0.85); z-index:9999999; display:flex; justify-content:center; align-items:center; padding:20px; box-sizing:border-box; backdrop-filter:blur(5px);\">\n                <div style=\"background:white; padding:30px 20px 15px 20px; border-radius:20px; width:100%; max-width:350px; text-align:center; position:relative; box-shadow:0 10px 30px rgba(0,0,0,0.5);\">\n                    <button onclick=\"document.getElementById('custom-auth-modal').style.display='none'\" style=\"position:absolute; top:15px; right:15px; background:none; border:none; font-size:24px; color:#94A3B8; cursor:pointer;\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\n                    <h2 style=\"margin:0 0 10px 0; color:#1E293B; font-size:22px; font-weight:900; font-family:'Nunito', sans-serif;\">${title}<\/h2>\n                    <p style=\"color:#64748B; font-size:14px; line-height:1.5; margin-bottom:25px; font-weight:700; font-family:'Nunito', sans-serif;\">${desc}<\/p>\n\n                    <button onclick=\"localStorage.setItem('lisan_auth_done', '1'); window.location.href='${btn1Url}';\" style=\"width:100%; background:var(--primary); color:white; border:none; padding:15px; border-radius:12px; font-size:14px; font-weight:900; margin-bottom:12px; cursor:pointer; font-family:'Nunito', sans-serif; box-shadow:0 4px 10px rgba(0,0,0,0.1);\"><i class=\"fa-solid ${icon1}\"><\/i> ${btn1Txt}<\/button>\n\n                    <button onclick=\"localStorage.setItem('lisan_auth_done', '1'); window.location.href='${btn2Url}';\" style=\"width:100%; background:#F8FAFC; color:var(--primary); border:2px solid #E2E8F0; padding:15px; border-radius:12px; font-size:14px; font-weight:800; margin-bottom:15px; cursor:pointer; font-family:'Nunito', sans-serif;\"><i class=\"fa-solid ${icon2}\"><\/i> ${btn2Txt}<\/button>\n\n                    <button onclick=\"document.getElementById('custom-auth-modal').style.display='none'\" style=\"width:100%; background:transparent; color:#94A3B8; border:none; padding:10px; font-size:13px; font-weight:900; cursor:pointer; font-family:'Nunito', sans-serif; text-transform:uppercase;\">\n                        <i class=\"fa-solid fa-arrow-left\"><\/i> ${btnRetour}\n                    <\/button>\n                <\/div>\n            <\/div>\n        `;\n        modal.style.display = 'block';\n    };\n};\n\n\n\n\ndocument.addEventListener('DOMContentLoaded', function() {\n    window.installerCommandesHub();\n\n    if (window.navigateTo) {\n        const originalNavigateTo = window.navigateTo;\n        window.navigateTo = function(screenId) {\n            originalNavigateTo(screenId);\n            const header = document.querySelector('.app-shell .header');\n            const btnBack = document.getElementById('btn-back');\n            const lvlTxt = document.getElementById('lvl-txt');\n            const pTrack = document.querySelector('.app-shell .progress-track');\n\n            \/\/ 1. Pages o\u00f9 l'on cache TOTALEMENT la barre du haut (Hub, Menu, R\u00e9glages, Alphabet)\n            const ecransSansBarre = ['view-hub', 'view-menu', 'view-settings', 'view-alphabet-learn', 'view-alpha-lexicon'];\n            \n            if (ecransSansBarre.includes(screenId)) {\n                if (header) header.style.display = 'none';\n            } else {\n                if (header) header.style.display = 'flex';\n                if (btnBack) btnBack.style.display = 'flex';\n            }\n\n            \/\/ 2. Sur les pages Stats, Lexique et Classement : on garde le bouton Maison, mais on cache \"NIVEAU 1\" et la jauge\n            const ecransSansJauge = ['view-stats', 'view-lexicon', 'view-leaderboard', 'view-lock'];\n            if (ecransSansJauge.includes(screenId)) {\n                if (lvlTxt) lvlTxt.style.visibility = 'hidden';\n                if (pTrack) pTrack.style.display = 'none';\n            } else {\n                if (lvlTxt) lvlTxt.style.visibility = 'visible';\n                if (pTrack) pTrack.style.display = 'block';\n            }\n        };\n    }\n});\n\n\n\n\n\n\n\n\n\n\/\/ ============================================================\n\/\/ INITIALISATION FINALE ET AIGUILLEUR TIKTOK INT\u00c9GR\u00c9\n\/\/ ============================================================\nwindow.addEventListener('load', function() {\n    setTimeout(() => {\n        window.installerCommandesHub();\n\n        \/\/ \ud83d\ude80 L'AIGUILLEUR TIKTOK : Il doit \u00eatre ICI, juste avant le chargement normal !\n        const urlParamsTiktok = new URLSearchParams(window.location.search);\n        if (urlParamsTiktok.get(\"source\") === \"tiktok\") {\n            console.log(\"\ud83c\udfaf Prise de contr\u00f4le TikTok r\u00e9ussie sans conflit !\");\n            \n            let langTel = navigator.language || navigator.userLanguage;\n            if (langTel.toLowerCase().startsWith('en')) { window.setLang('en'); } \n            else { window.setLang('fr'); }\n\n            let rawData = window.forgeData || window.forgeDB;\n            if (Array.isArray(rawData)) { window.tazForgeLibrary = { \"forme1\": rawData }; } \n            else { window.tazForgeLibrary = rawData; }\n            \n            window.forgeCurrentFormId = 'forme1';\n            window.isForgeRandom = false;\n            window.forgeCurrentDB = window.tazForgeLibrary['forme1'];\n\n            window.startForgeMode('new', 0);\n            window.loadForgeLearning();\n            \n            \/\/ \ud83d\uded1 On STOPPE tout ici. Le code en dessous ne sera pas lu, donc l'\u00e9cran d'accueil n'\u00e9crasera pas l'ADN !\n            return; \n        }\n\n        \/\/ --- LOGIQUE CLASSIQUE (S'ex\u00e9cute uniquement si on ne vient pas de TikTok) ---\n        if (!localStorage.getItem('lisan_settings_done')) {\n            window.navigateTo('view-settings');\n        } else {\n            const resumeContainer = document.getElementById('resume-container');\n            if (!resumeContainer || resumeContainer.style.display === 'none') {\n                window.navigateTo('view-hub');\n            } else {\n                window.navigateTo('view-menu');\n            }\n        }\n    }, 400);\n});\n\n\n\n\n\n\n<\/script>\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":380,"href":"https:\/\/www.tazkiraacademy.com\/en\/wp-json\/wp\/v2\/pages\/74\/revisions"}],"predecessor-version":[{"id":955,"href":"https:\/\/www.tazkiraacademy.com\/en\/wp-json\/wp\/v2\/pages\/74\/revisions\/955"}],"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}]}}