Fran\u00e7ais \u00b7 Cours complet Pre A1 \u2192 B2<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:wght@400;500;700&family=DM+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n \/* \u2500\u2500 Palette B2-C1 \u2014 appliqu\u00e9e \u00e0 tout le cours \u2500\u2500 *\/\n --ink: #1a1209;\n --cream: #f7f2e8;\n --gold: #c8963e;\n --rouge: #b83232;\n --sage: #4a6741;\n --blue: #2c4a7c;\n --light: #fdf9f2;\n --border: #e2d9c8;\n --muted: #7a6e60;\n --white: #ffffff;\n\n \/* Accents par niveau \u2014 tous dans la m\u00eame palette chaude *\/\n --c1-bg: #f0ebe0; --c1-main: #2c4a7c; --c1-dark: #1a2d4a; --c1-acc: #c8963e; --c1-light: #c8d8f0;\n --c2-bg: #edf2ec; --c2-main: #4a6741; --c2-dark: #2d4028; --c2-acc: #c8963e; --c2-light: #b8d4b4;\n --c3-bg: #f2ede8; --c3-main: #7c4a2c; --c3-dark: #4a2c1a; --c3-acc: #c8963e; --c3-light: #d4b8a0;\n --c4-bg: #f0e8e8; --c4-main: #b83232; --c4-dark: #7c1a1a; --c4-acc: #c8963e; --c4-light: #d4a0a0;\n}\n* { box-sizing: border-box; margin: 0; padding: 0; }\nbody { font-family: 'DM Sans', sans-serif; background: var(--light); color: var(--ink); font-size: 16px; line-height: 1.7; }\n@media (min-width: 900px) { body { font-size: 18px; } }\n@media (min-width: 1200px) { body { font-size: 20px; } }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HOME SCREEN \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#home { display: block; }\n.home-header {\n background: var(--ink);\n color: white; padding: 3rem 4vw 5rem; text-align: center; position: relative; overflow: hidden;\n}\n.home-header::before {\n content: ''; position: absolute; inset: 0;\n background: repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(255,255,255,0.02) 40px,rgba(255,255,255,0.02) 80px);\n}\n.home-badge {\n display: inline-block; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7);\n font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;\n padding: 0.3rem 1rem; margin-bottom: 1rem; font-family: 'DM Mono', monospace;\n border-radius: 100px; position: relative;\n}\n.home-header h1 {\n font-family: 'Playfair Display', serif; font-size: clamp(2rem,5vw,3.8rem);\n font-weight: 700; line-height: 1.1; margin-bottom: 0.5rem; position: relative;\n color: white;\n}\n.home-header h1 em { color: #fbbf24; font-style: italic; }\n.home-sub { color: rgba(255,255,255,0.6); font-size: 0.95rem; position: relative; }\n.home-wave { position: absolute; bottom: -1px; left: 0; right: 0; line-height: 0; }\n\n.home-grid {\n display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem; padding: 3rem 4vw;\n}\n.lesson-card {\n border-radius: 4px; padding: 2rem; cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n border: 2px solid transparent; position: relative; overflow: hidden;\n text-decoration: none; display: block;\n}\n.lesson-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }\n.lesson-card::after {\n content: '\u2192'; position: absolute; bottom: 1.5rem; right: 1.5rem;\n font-size: 1.4rem; opacity: 0.5; transition: opacity 0.2s, right 0.2s;\n}\n.lesson-card:hover::after { opacity: 1; right: 1.2rem; }\n.lc-level { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.4rem; opacity: 0.65; }\n.lc-title { font-family: 'Baloo 2', sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 0.3rem; }\n.lc-theme { font-size: 0.85rem; opacity: 0.75; margin-bottom: 1rem; }\n.lc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }\n.lc-tag { padding: 0.2rem 0.6rem; border-radius: 100px; font-size: 0.68rem; font-weight: 700; font-family: 'DM Mono', monospace; background: rgba(255,255,255,0.3); }\n.lc-emoji { font-size: 2.5rem; margin-bottom: 0.8rem; display: block; }\n.lc-duration { position: absolute; top: 1.2rem; right: 1.2rem; font-family: 'DM Mono', monospace; font-size: 0.65rem; opacity: 0.6; }\n\n.lc1 { background: linear-gradient(135deg, #e8eef8, #c8d8f0); border-color: #a0b8d8; color: var(--c1-dark); }\n.lc2 { background: linear-gradient(135deg, #e8f0e8, #b8d4b4); border-color: #90b890; color: var(--c2-dark); }\n.lc3 { background: linear-gradient(135deg, #f2ece4, #d8c0a8); border-color: #c0a080; color: var(--c3-dark); }\n.lc4 { background: linear-gradient(135deg, #f4e8e8, #d8a8a8); border-color: #c08080; color: var(--c4-dark); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LESSON WRAPPER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.lesson-screen { display: none; }\n.lesson-screen.active { display: block; }\n\n\/* \u2500\u2500 Back button \u2500\u2500 *\/\n.back-bar {\n padding: 0.8rem 4vw; display: flex; align-items: center; gap: 0.8rem;\n border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 200;\n background: var(--cream);\n}\n.back-btn {\n background: none; border: 1px solid var(--border); border-radius: 2px;\n padding: 0.35rem 1rem; font-family: 'Nunito', sans-serif; font-size: 0.82rem;\n font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 0.4rem;\n transition: background 0.15s;\n}\n.back-btn:hover { background: #f1f5f9; }\n.back-breadcrumb { font-size: 0.8rem; color: var(--muted); }\n\n\/* \u2500\u2500 Lesson NAV \u2500\u2500 *\/\n.lesson-nav {\n border-bottom: 2px solid var(--border); padding: 0 2vw;\n display: flex; overflow-x: auto; gap: 0; scrollbar-width: none;\n background: white;\n}\n.lesson-nav::-webkit-scrollbar { display: none; }\n.nav-btn {\n padding: 0.9rem 1rem; border: none; background: none; cursor: pointer;\n font-family: 'Nunito', sans-serif; font-size: 0.82rem; font-weight: 700;\n color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px;\n white-space: nowrap; transition: all 0.2s;\n}\n.nav-btn:hover { color: var(--ink); }\n\n\/* \u2500\u2500 Common section styles \u2500\u2500 *\/\n.section { display: none; padding: 2rem 4vw; }\n.section.active { display: block; }\n.section-header { margin-bottom: 1.8rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border); }\n.section-num { font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.3rem; }\n.section-title { font-family: 'Baloo 2', sans-serif; font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 800; }\n.section-desc { color: var(--muted); font-size: 0.88rem; margin-top: 0.3rem; }\n\n.card { background: white; border: 1px solid var(--border); border-radius: 4px; padding: 1.4rem; margin-bottom: 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }\n.card-label { font-size: 0.66rem; font-family: 'DM Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }\n.tag { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 100px; font-size: 0.68rem; font-weight: 700; font-family: 'DM Mono', monospace; }\n\n.btn { display: inline-block; padding: 0.65rem 1.6rem; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 600; border-radius: 2px; transition: transform 0.15s, box-shadow 0.15s; margin-top: 0.5rem; }\n.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }\n.btn-ink { background: var(--ink); color: white; }\n\n.reveal-btn { border: none; padding: 0.4rem 1rem; border-radius: 2px; font-family: 'Nunito', sans-serif; font-size: 0.78rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; transition: opacity 0.15s; }\n.correction-box { display: none; border-left: 4px solid; border-radius: 0; padding: 0.8rem 1.1rem; margin-top: 0.7rem; font-size: 0.85rem; }\n.correction-box.show { display: block; }\n\n.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }\n@media (max-width: 700px) { .plan-grid { grid-template-columns: 1fr; } }\n\n.timeline { position: relative; padding-left: 2rem; }\n.timeline::before { content: ''; position: absolute; left: 0.5rem; top: 0.5rem; bottom: 0.5rem; width: 2px; border-radius: 2px; }\n.timeline-item { position: relative; margin-bottom: 1.1rem; }\n.timeline-item::before { content: ''; position: absolute; left: -1.6rem; top: 0.5rem; width: 10px; height: 10px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px; }\n.tl-time { font-family: 'DM Mono', monospace; font-size: 0.66rem; margin-bottom: 0.1rem; }\n.tl-title { font-weight: 700; font-size: 0.9rem; }\n.tl-desc { font-size: 0.76rem; color: var(--muted); }\n\n.dialogue-wrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }\n.dialogue-line { display: flex; gap: 0.8rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); align-items: flex-start; }\n.dialogue-line:last-child { border-bottom: none; }\n.dialogue-line.a { background: #f0f9ff; }\n.dialogue-line.b { background: #fff7ed; }\n.dialogue-line.c { background: #f5f3ff; }\n.speaker-bubble { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }\n.speaker-name { font-family: 'DM Mono', monospace; font-size: 0.62rem; color: var(--muted); text-transform: uppercase; margin-bottom: 0.1rem; }\n.line-fr { font-weight: 600; font-size: 0.92rem; }\n.line-ro { font-size: 0.76rem; color: var(--muted); font-style: italic; }\n\n.audio-player { color: white; padding: 1rem 1.3rem; display: flex; align-items: center; gap: 1rem; border-radius: 12px; margin: 0.8rem 0; }\n.play-btn { width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.15s; }\n.play-btn:hover { transform: scale(1.1); }\n.audio-info { flex: 1; }\n.audio-title { font-size: 0.85rem; font-weight: 700; }\n.audio-track { font-size: 0.7rem; color: rgba(255,255,255,0.5); font-family: 'DM Mono', monospace; }\n.progress-bar { height: 4px; background: rgba(255,255,255,0.15); margin-top: 0.5rem; border-radius: 4px; cursor: pointer; }\n.progress-fill { height: 100%; width: 0%; border-radius: 4px; transition: width 0.1s linear; }\n.audio-time { font-family: 'DM Mono', monospace; font-size: 0.66rem; color: rgba(255,255,255,0.5); white-space: nowrap; }\n.waveform { display: flex; align-items: center; gap: 2px; height: 20px; margin: 0.4rem 0 0.2rem; }\n.waveform span { display: inline-block; width: 3px; border-radius: 2px; background: rgba(255,255,255,0.2); }\n.waveform.playing span { animation: wave-bounce 1s ease-in-out infinite; }\n.waveform.playing span:nth-child(2n) { animation-delay: 0.1s; }\n.waveform.playing span:nth-child(3n) { animation-delay: 0.2s; }\n.waveform.playing span:nth-child(4n) { animation-delay: 0.3s; }\n@keyframes wave-bounce { 0%,100%{height:4px} 50%{height:18px} }\n\n.exercise-block { background: white; border-radius: 4px; padding: 1.4rem; margin-bottom: 1.2rem; border: 1px solid var(--border); }\n.ex-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }\n.ex-num { width: 34px; height: 34px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-family: 'DM Mono', monospace; font-size: 0.78rem; flex-shrink: 0; }\n.ex-type { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }\n.ex-question { font-family: 'Baloo 2', sans-serif; font-size: 0.98rem; font-weight: 700; }\n.ex-instruction { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }\n\n.mcq-options { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.8rem 0; }\n.mcq-option { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 1rem; border: 2px solid var(--border); border-radius: 2px; cursor: pointer; transition: all 0.15s; font-size: 0.88rem; }\n.mcq-option:hover { border-color: #94a3b8; background: var(--light); }\n.mcq-option.correct { border-color: #10b981; background: #d1fae5; }\n.mcq-option.wrong { border-color: #f43f5e; background: #ffe4e6; }\n.opt-letter { width: 26px; height: 26px; border: 2px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-family: 'DM Mono', monospace; flex-shrink: 0; }\n\n.word-bank { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.9rem; border: 2px dashed; border-radius: 2px; margin: 0.9rem 0; min-height: 50px; }\n.chip { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; color: white; font-family: 'DM Mono', monospace; font-size: 0.78rem; cursor: grab; border-radius: 2px; user-select: none; transition: opacity 0.15s, transform 0.1s; white-space: nowrap; }\n.chip:active { cursor: grabbing; transform: scale(1.05); }\n.chip.used { opacity: 0.25; pointer-events: none; }\n.chip.selected { outline: 3px solid #fbbf24; transform: scale(1.05); }\n.fill-sentence-interactive { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }\n.fill-sentence-interactive:last-of-type { border-bottom: none; }\n.sent-num { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--muted); min-width: 1.2rem; }\n.drop-zone { display: inline-flex; align-items: center; justify-content: center; min-width: 100px; height: 32px; border: 2px dashed var(--border); border-radius: 2px; padding: 0 0.5rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--ink); background: var(--light); }\n.drop-zone.drag-over { border-color: #3b82f6; background: #dbeafe; }\n.drop-zone.filled { border-style: solid; }\n.drop-zone.correct { border-color: #10b981 !important; background: #10b981 !important; color: white !important; }\n.drop-zone.wrong { border-color: #f43f5e !important; background: #f43f5e !important; color: white !important; animation: shake 0.3s ease; }\n@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }\n\n.match-item { padding: 0.65rem 1rem; border-radius: 2px; border: 2px solid var(--border); cursor: pointer; font-size: 0.85rem; font-weight: 600; text-align: center; transition: all 0.15s; background: white; }\n.match-item:hover { border-color: #94a3b8; background: var(--light); }\n.match-item.selected { border-color: #3b82f6; background: #3b82f6; color: white; }\n.match-item.matched-ok { border-color: #10b981; background: #d1fae5; color: #065f46; cursor: default; }\n.match-item.matched-wrong { border-color: #f43f5e; background: #ffe4e6; animation: shake 0.3s ease; }\n\n.write-input { width: 100%; border: 2px solid var(--border); border-radius: 2px; padding: 0.6rem 0.9rem; font-family: 'Nunito', sans-serif; font-size: 0.88rem; outline: none; transition: border-color 0.2s; background: white; color: var(--ink); }\n.write-input:focus { border-color: #3b82f6; }\n\n.skill-row { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }\n.skill-row:last-child { border-bottom: none; }\n.skill-label { flex: 1; font-size: 0.88rem; font-weight: 600; }\n.star { font-size: 1.1rem; cursor: pointer; transition: transform 0.1s; opacity: 0.2; }\n.star.lit { opacity: 1; }\n.star:hover { transform: scale(1.2); }\n\n\/* SAL cards (Pre A1) *\/\n.sal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 0.9rem; margin: 1rem 0; }\n.sal-card { border-radius: 4px; padding: 1.1rem; border: 2px solid transparent; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }\n.sal-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }\n.sal-icon { font-size: 1.8rem; margin-bottom: 0.4rem; }\n.sal-fr { font-family: 'Times New Roman', Times, serif; font-size: 1.1rem; font-weight: 700; }\n.sal-ro { font-size: 0.76rem; color: var(--muted); font-style: italic; }\n.sal-ctx { font-size: 0.72rem; margin-top: 0.3rem; opacity: 0.7; }\n.speak-btn { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0.2rem 0.3rem; border-radius: 6px; transition: transform 0.15s; display: inline-block; margin-top: 0.2rem; }\n.speak-btn:hover { transform: scale(1.2); }\n.speak-btn.speaking { animation: pulse-speak 0.6s ease infinite alternate; }\n@keyframes pulse-speak { from{transform:scale(1)} to{transform:scale(1.3)} }\n\n\/* Vocab grid (A1+ lessons) *\/\n.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 0.9rem; margin: 1rem 0; }\n.vocab-card { border: 1px solid var(--border); border-radius: 4px; padding: 1rem; background: white; display: flex; flex-direction: column; gap: 0.2rem; }\n.vocab-cat { display: inline-block; align-self: flex-start; font-size: 0.58rem; font-family: 'DM Mono', monospace; background: #f1f5f9; padding: 0.12rem 0.4rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.2rem; border-radius: 4px; }\n.vocab-fr { font-family: 'Times New Roman', Times, serif; font-size: 1rem; font-style: italic; }\n.vocab-ro { font-size: 0.78rem; color: #10b981; font-weight: 600; }\n.vocab-ex { font-size: 0.76rem; color: var(--muted); border-top: 1px solid var(--border); margin-top: 0.4rem; padding-top: 0.4rem; }\n.hl { background: #fef3c7; padding: 0.05rem 0.25rem; border-radius: 3px; font-weight: 700; }\n\n\/* grammar rule box *\/\n.rule-box { border-radius: 12px; padding: 1.1rem 1.3rem; margin: 0.8rem 0; border-left: 4px solid; }\n.rule-title { font-family: 'DM Mono', monospace; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }\n.conj-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }\n.conj-table td { padding: 0.35rem 0.6rem; border: 1px solid var(--border); }\n.conj-table td:first-child { font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--muted); width: 35%; }\n.conj-table tr:nth-child(even) td { background: var(--light); }\n\n\/* \u2500\u2500 Lesson color theming via data attr \u2500\u2500 *\/\n[data-lesson=\"1\"] .nav-btn.active { color: var(--gold); border-bottom-color: var(--gold); }\n[data-lesson=\"1\"] .section-num { color: var(--gold); }\n[data-lesson=\"1\"] .ex-num { background: var(--c1-main); }\n[data-lesson=\"1\"] .timeline::before { background: var(--c1-light); }\n[data-lesson=\"1\"] .timeline-item::before { background: var(--c1-main); box-shadow: 0 0 0 2px var(--c1-main); }\n[data-lesson=\"1\"] .tl-time { color: var(--gold); }\n[data-lesson=\"1\"] .reveal-btn { background: var(--ink); color: var(--cream); }\n[data-lesson=\"1\"] .correction-box { border-color: #10b981; background: #d1fae5; color: #065f46; }\n[data-lesson=\"1\"] .chip { background: var(--ink); }\n[data-lesson=\"1\"] .word-bank { border-color: var(--c1-light); background: var(--c1-bg); }\n[data-lesson=\"1\"] .drop-zone.filled { border-color: var(--ink); background: var(--ink); color: var(--cream); }\n[data-lesson=\"1\"] .btn-lesson { background: var(--ink); color: var(--cream); }\n[data-lesson=\"1\"] .audio-player { background: var(--ink); }\n[data-lesson=\"1\"] .play-btn { background: var(--gold); }\n[data-lesson=\"1\"] .progress-fill { background: var(--gold); }\n[data-lesson=\"1\"] .waveform.playing span { background: var(--gold); }\n\n[data-lesson=\"2\"] .nav-btn.active { color: var(--gold); border-bottom-color: var(--gold); }\n[data-lesson=\"2\"] .section-num { color: var(--gold); }\n[data-lesson=\"2\"] .ex-num { background: var(--c2-main); }\n[data-lesson=\"2\"] .timeline::before { background: var(--c2-light); }\n[data-lesson=\"2\"] .timeline-item::before { background: var(--c2-main); box-shadow: 0 0 0 2px var(--c2-main); }\n[data-lesson=\"2\"] .tl-time { color: var(--gold); }\n[data-lesson=\"2\"] .reveal-btn { background: var(--ink); color: var(--cream); }\n[data-lesson=\"2\"] .correction-box { border-color: var(--c2-main); background: var(--c2-light); color: var(--c2-dark); }\n[data-lesson=\"2\"] .chip { background: var(--ink); }\n[data-lesson=\"2\"] .word-bank { border-color: var(--c2-light); background: var(--c2-bg); }\n[data-lesson=\"2\"] .drop-zone.filled { border-color: var(--ink); background: var(--ink); color: var(--cream); }\n[data-lesson=\"2\"] .btn-lesson { background: var(--ink); color: var(--cream); }\n[data-lesson=\"2\"] .audio-player { background: linear-gradient(135deg,#064e3b,#065f46); }\n[data-lesson=\"2\"] .play-btn { background: var(--gold); }\n[data-lesson=\"2\"] .progress-fill { background: var(--gold); }\n[data-lesson=\"2\"] .waveform.playing span { background: var(--gold); }\n\n[data-lesson=\"3\"] .nav-btn.active { color: var(--gold); border-bottom-color: var(--gold); }\n[data-lesson=\"3\"] .section-num { color: var(--gold); }\n[data-lesson=\"3\"] .ex-num { background: var(--c3-main); }\n[data-lesson=\"3\"] .timeline::before { background: var(--c3-light); }\n[data-lesson=\"3\"] .timeline-item::before { background: var(--c3-main); box-shadow: 0 0 0 2px var(--c3-main); }\n[data-lesson=\"3\"] .tl-time { color: var(--gold); }\n[data-lesson=\"3\"] .reveal-btn { background: var(--ink); color: var(--cream); }\n[data-lesson=\"3\"] .correction-box { border-color: var(--c3-main); background: #ede9fe; color: var(--c3-dark); }\n[data-lesson=\"3\"] .chip { background: var(--ink); }\n[data-lesson=\"3\"] .word-bank { border-color: var(--c3-light); background: var(--c3-bg); }\n[data-lesson=\"3\"] .drop-zone.filled { border-color: var(--ink); background: var(--ink); color: var(--cream); }\n[data-lesson=\"3\"] .btn-lesson { background: var(--ink); color: var(--cream); }\n[data-lesson=\"3\"] .audio-player { background: linear-gradient(135deg,#2e1065,#4c1d95); }\n[data-lesson=\"3\"] .play-btn { background: var(--gold); }\n[data-lesson=\"3\"] .progress-fill { background: var(--gold); }\n[data-lesson=\"3\"] .waveform.playing span { background: var(--gold); }\n\n[data-lesson=\"4\"] .nav-btn.active { color: var(--gold); border-bottom-color: var(--gold); }\n[data-lesson=\"4\"] .section-num { color: var(--gold); }\n[data-lesson=\"4\"] .ex-num { background: var(--c4-main); }\n[data-lesson=\"4\"] .timeline::before { background: var(--c4-light); }\n[data-lesson=\"4\"] .timeline-item::before { background: var(--c4-main); box-shadow: 0 0 0 2px var(--c4-main); }\n[data-lesson=\"4\"] .tl-time { color: var(--gold); }\n[data-lesson=\"4\"] .reveal-btn { background: var(--ink); color: var(--cream); }\n[data-lesson=\"4\"] .correction-box { border-color: var(--c4-main); background: #ffedd5; color: var(--c4-dark); }\n[data-lesson=\"4\"] .chip { background: var(--ink); }\n[data-lesson=\"4\"] .word-bank { border-color: var(--c4-light); background: var(--c4-bg); }\n[data-lesson=\"4\"] .drop-zone.filled { border-color: var(--ink); background: var(--ink); color: var(--cream); }\n[data-lesson=\"4\"] .btn-lesson { background: var(--ink); color: var(--cream); }\n[data-lesson=\"4\"] .audio-player { background: linear-gradient(135deg,#431407,#7c2d12); }\n[data-lesson=\"4\"] .play-btn { background: var(--gold); }\n[data-lesson=\"4\"] .progress-fill { background: var(--gold); }\n[data-lesson=\"4\"] .waveform.playing span { background: var(--gold); }\n\n@media (max-width: 600px) {\n .section { padding: 1rem 3vw; }\n .sal-grid { grid-template-columns: 1fr 1fr; }\n .vocab-grid { grid-template-columns: 1fr; }\n .nav-btn { padding: 0.7rem 0.6rem; font-size: 0.72rem; }\n .fill-sentence-interactive { font-size: 0.82rem; }\n .drop-zone { min-width: 75px; font-size: 0.7rem; }\n .home-grid { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 3vw; }\n}\n<\/style>\n<\/head>\n<body>\n\n\n<div id=\"home\">\n <div class=\"home-header\">\n <div class=\"home-badge\">Cours de fran\u00e7ais \u00b7 Pre A1 \u2192 B2<\/div>\n <h1>Apprenons le <em>Fran\u00e7ais<\/em> !<\/h1>\n <div class=\"home-sub\">S\u0103 \u00eenv\u0103\u021b\u0103m franceza \u00eempreun\u0103 \u00b7 4 niveluri \u00b7 Traduceri \u00een rom\u00e2n\u0103<\/div>\n <div class=\"home-wave\">\n <svg viewBox=\"0 0 1440 50\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M0,25 C360,50 1080,0 1440,25 L1440,50 L0,50 Z\" fill=\"var(--light)\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"home-grid\">\n <div class=\"lesson-card lc1\" onclick=\"openLesson(1)\">\n <div class=\"lc-duration\">\u23f1 1h<\/div>\n <div class=\"lc-emoji\">\ud83d\udc4b<\/div>\n <div class=\"lc-level\">Pre A1 – A1<\/div>\n <div class=\"lc-title\">Les Salutations<\/div>\n <div class=\"lc-theme\">Cum salut\u0103m \u00een francez\u0103<\/div>\n <div class=\"lc-tags\">\n <span class=\"lc-tag\">Bonjour<\/span>\n <span class=\"lc-tag\">\u00c7a va ?<\/span>\n <span class=\"lc-tag\">Au revoir<\/span>\n <\/div>\n <\/div>\n <div class=\"lesson-card lc2\" onclick=\"openLesson(2)\">\n <div class=\"lc-duration\">\u23f1 1h<\/div>\n <div class=\"lc-emoji\">\ud83d\udc64<\/div>\n <div class=\"lc-level\">A1 – A2<\/div>\n <div class=\"lc-title\">Se Pr\u00e9senter<\/div>\n <div class=\"lc-theme\">Cum te prezin\u021bi \u00een francez\u0103<\/div>\n <div class=\"lc-tags\">\n <span class=\"lc-tag\">Je m’appelle<\/span>\n <span class=\"lc-tag\">J’ai \u2026 ans<\/span>\n <span class=\"lc-tag\">Je suis<\/span>\n <\/div>\n <\/div>\n <div class=\"lesson-card lc3\" onclick=\"openLesson(3)\">\n <div class=\"lc-duration\">\u23f1 1h30<\/div>\n <div class=\"lc-emoji\">\ud83c\udfe0<\/div>\n <div class=\"lc-level\">A2 – B1<\/div>\n <div class=\"lc-title\">La Vie Quotidienne<\/div>\n <div class=\"lc-theme\">Rutina zilnic\u0103 \u0219i casa<\/div>\n <div class=\"lc-tags\">\n <span class=\"lc-tag\">Verbes du quotidien<\/span>\n <span class=\"lc-tag\">Imparfait<\/span>\n <span class=\"lc-tag\">Adverbes<\/span>\n <\/div>\n <\/div>\n <div class=\"lesson-card lc4\" onclick=\"openLesson(4)\">\n <div class=\"lc-duration\">\u23f1 2h<\/div>\n <div class=\"lc-emoji\">\ud83d\udcac<\/div>\n <div class=\"lc-level\">B1 – B2<\/div>\n <div class=\"lc-title\">Exprimer son Opinion<\/div>\n <div class=\"lc-theme\">Opinia, argumentarea, dezbaterea<\/div>\n <div class=\"lc-tags\">\n <span class=\"lc-tag\">Connecteurs<\/span>\n <span class=\"lc-tag\">Subjonctif<\/span>\n <span class=\"lc-tag\">Nuancer<\/span>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n\n<div id=\"lesson-1\" class=\"lesson-screen\" data-lesson=\"1\">\n <div class=\"back-bar\">\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Toutes les le\u00e7ons<\/button>\n <span class=\"back-breadcrumb\">Pre A1 – A1 \u00b7 Les Salutations<\/span>\n <\/div>\n \n <div style=\"background:var(--ink);color:white;padding:2.5rem 4vw 3.5rem;text-align:center;position:relative;overflow:hidden\">\n <div style=\"position:absolute;inset:0;background:url(\\\"data:image\/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='rgba(255,255,255,0.07)'\/%3E%3C\/svg%3E\\\") repeat\"><\/div>\n <div style=\"position:relative;display:inline-block;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.75);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;padding:0.25rem 0.9rem;margin-bottom:0.8rem;font-family:'DM Mono',monospace;border-radius:100px\">Pre A1 – A1 \u00b7 Le\u00e7on 1<\/div>\n <div style=\"position:relative;font-family:'Baloo 2',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.1;color:white\">\ud83d\udc4b <span style=\"color:#fef3c7\">Bonjour !<\/span><\/div>\n <div style=\"position:relative;color:rgba(255,255,255,0.75);margin-top:0.4rem\">Les salutations en fran\u00e7ais \u00b7 Saluturile \u00een francez\u0103<\/div>\n <div style=\"position:absolute;bottom:-1px;left:0;right:0;line-height:0\"><svg viewBox=\"0 0 1440 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M0,20 C360,40 1080,0 1440,20 L1440,40 L0,40 Z\" fill=\"var(--light)\"\/><\/svg><\/div>\n <\/div>\n <nav class=\"lesson-nav\" id=\"nav-1\">\n <button class=\"nav-btn active\" onclick=\"showSec('s1','plan','nav-1')\">\ud83d\udccb Plan<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s1','vocabulaire','nav-1')\">\ud83d\udcac Vocabulaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s1','dialogue','nav-1')\">\ud83c\udfa7 Dialogue<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s1','exercices','nav-1')\">\u270f\ufe0f Exercices<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s1','bilan','nav-1')\">\ud83c\udf1f Bilan<\/button>\n <\/nav>\n <div id=\"s1\">\n \n <div class=\"section active\" id=\"s1-plan\">\n <div class=\"section-header\">\n <div class=\"section-num\">00 \u00b7 Introduction<\/div>\n <h2 class=\"section-title\">Plan de la le\u00e7on<\/h2>\n <p class=\"section-desc\">Th\u00e8me : <strong>Les salutations<\/strong> \u00b7 Cum salut\u0103m \u00een francez\u0103<\/p>\n <\/div>\n <div class=\"plan-grid\">\n <div class=\"card\">\n <div class=\"card-label\">D\u00e9roul\u00e9 \u00b7 1 heure<\/div>\n <div class=\"timeline\">\n <div class=\"timeline-item\"><div class=\"tl-time\">0:00 – 0:15<\/div><div class=\"tl-title\">\ud83d\udcac Vocabulaire des salutations<\/div><div class=\"tl-desc\">12 expressions \u00b7 Formel et informel<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:15 – 0:30<\/div><div class=\"tl-title\">\ud83c\udfa7 Dialogue audio<\/div><div class=\"tl-desc\">2 conversations \u00b7 \u00c9coute active<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:30 – 0:50<\/div><div class=\"tl-title\">\u270f\ufe0f Exercices interactifs<\/div><div class=\"tl-desc\">MCQ \u00b7 Associations \u00b7 Drag & drop<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:50 – 1:00<\/div><div class=\"tl-title\">\ud83c\udf1f Bilan & auto-\u00e9valuation<\/div><\/div>\n <\/div>\n <\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\">\n <div class=\"card-label\">\ud83c\udfaf Ce vei \u00eenv\u0103\u021ba<\/div>\n <ul style=\"list-style:none;padding:0;display:flex;flex-direction:column;gap:0.6rem;font-size:0.88rem\">\n <li>\ud83d\udc4b S\u0103 spui <strong>bonjour, bonsoir, salut<\/strong> la momentul potrivit<\/li>\n <li>\ud83d\ude0a S\u0103 \u00eentrebi <strong>cum se simte<\/strong> cineva \u0219i s\u0103 r\u0103spunzi<\/li>\n <li>\ud83e\udd1d Diferen\u021ba dintre <strong>formal<\/strong> \u0219i <strong>informal<\/strong><\/li>\n <li>\ud83d\udc4b Cum s\u0103 spui <strong>la revedere<\/strong> \u00een diferite situa\u021bii<\/li>\n <\/ul>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:white;border:none\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">Con\u021binut<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.7rem\">\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#fef3c7\">12<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">expresii<\/div><\/div>\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#fef3c7\">2<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">dialoguri<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:#fef3c7;border-color:#fcd34d\">\n <div class=\"card-label\" style=\"color:#92400e\">\ud83d\udca1 Sfatul formatorei<\/div>\n <p style=\"font-size:0.85rem;color:#78350f;margin:0\">Repet\u0103 fiecare expresie <strong>cu voce tare<\/strong> de cel pu\u021bin 3 ori. Nu \u00ee\u021bi fie team\u0103 s\u0103 gre\u0219e\u0219ti!<\/p>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s1','vocabulaire','nav-1')\">Commencer \u2192<\/button>\n <\/div>\n\n \n <div class=\"section\" id=\"s1-vocabulaire\">\n <div class=\"section-header\">\n <div class=\"section-num\">01 \u00b7 15 min<\/div>\n <h2 class=\"section-title\">\ud83d\udcac Les Salutations<\/h2>\n <p class=\"section-desc\">12 expressions \u00b7 \ud83d\udd0a Apas\u0103 s\u0103 auzi pronun\u021bia<\/p>\n <\/div>\n <div class=\"card\">\n <div class=\"card-label\">\ud83c\udfa9 Formel – situa\u021bii oficiale<\/div>\n <div class=\"sal-grid\">\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#e8eef8,#c8d8f0);border-color:#a0b8d8\"><div class=\"sal-icon\">\ud83c\udf05<\/div><div class=\"sal-fr\">Bonjour<\/div><button class=\"speak-btn\" onclick=\"speakFR('Bonjour')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Bun\u0103 ziua \/ diminea\u021ba<\/div><div class=\"sal-ctx\">Diminea\u021ba \u0219i ziua<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#e8eef8,#c8d8f0);border-color:#a0b8d8\"><div class=\"sal-icon\">\ud83c\udf06<\/div><div class=\"sal-fr\">Bonsoir<\/div><button class=\"speak-btn\" onclick=\"speakFR('Bonsoir')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Bun\u0103 seara<\/div><div class=\"sal-ctx\">De la ~18:00<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#e8eef8,#c8d8f0);border-color:#a0b8d8\"><div class=\"sal-icon\">\ud83e\udd1d<\/div><div class=\"sal-fr\">Comment allez-vous ?<\/div><button class=\"speak-btn\" onclick=\"speakFR('Comment allez-vous ?')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Cum v\u0103 sim\u021bi\u021bi?<\/div><div class=\"sal-ctx\">\u00centrebare formal\u0103<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#e8eef8,#c8d8f0);border-color:#a0b8d8\"><div class=\"sal-icon\">\ud83d\ude0a<\/div><div class=\"sal-fr\">Je vais bien, merci.<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je vais bien, merci.')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">M\u0103 simt bine, mul\u021bumesc.<\/div><div class=\"sal-ctx\">R\u0103spuns formal<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#e8eef8,#c8d8f0);border-color:#a0b8d8\"><div class=\"sal-icon\">\ud83c\udf19<\/div><div class=\"sal-fr\">Bonne nuit<\/div><button class=\"speak-btn\" onclick=\"speakFR('Bonne nuit')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Noapte bun\u0103<\/div><div class=\"sal-ctx\">Seara t\u00e2rzie<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#e8eef8,#c8d8f0);border-color:#a0b8d8\"><div class=\"sal-icon\">\ud83d\udc4b<\/div><div class=\"sal-fr\">Au revoir<\/div><button class=\"speak-btn\" onclick=\"speakFR('Au revoir')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">La revedere<\/div><div class=\"sal-ctx\">R\u0103mas bun formal<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-label\">\ud83d\ude0e Informel – prieteni, familie<\/div>\n <div class=\"sal-grid\">\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#edf2ec,#b8d4b4);border-color:#90b890\"><div class=\"sal-icon\">\u270c\ufe0f<\/div><div class=\"sal-fr\">Salut !<\/div><button class=\"speak-btn\" onclick=\"speakFR('Salut')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Salut! \/ Bun\u0103!<\/div><div class=\"sal-ctx\">Orice moment<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#edf2ec,#b8d4b4);border-color:#90b890\"><div class=\"sal-icon\">\ud83d\udcac<\/div><div class=\"sal-fr\">\u00c7a va ?<\/div><button class=\"speak-btn\" onclick=\"speakFR('\u00c7a va ?')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Ce mai faci?<\/div><div class=\"sal-ctx\">\u00centrebare informal\u0103<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#fdf0d8,#f0d090);border-color:#d4a840\"><div class=\"sal-icon\">\ud83d\ude04<\/div><div class=\"sal-fr\">\u00c7a va bien !<\/div><button class=\"speak-btn\" onclick=\"speakFR('\u00c7a va bien')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">M\u0103 descurc bine!<\/div><div class=\"sal-ctx\">R\u0103spuns pozitiv<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#fdf0d8,#f0d090);border-color:#d4a840\"><div class=\"sal-icon\">\ud83d\ude10<\/div><div class=\"sal-fr\">Comme ci comme \u00e7a.<\/div><button class=\"speak-btn\" onclick=\"speakFR('Comme ci comme \u00e7a')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">\u0218i-a\u0219a \u0219i-a\u0219a.<\/div><div class=\"sal-ctx\">R\u0103spuns neutru<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#f8ece8,#e8c0b0);border-color:#c89080\"><div class=\"sal-icon\">\ud83c\udfc3<\/div><div class=\"sal-fr\">\u00c0 bient\u00f4t !<\/div><button class=\"speak-btn\" onclick=\"speakFR('\u00c0 bient\u00f4t')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Pe cur\u00e2nd!<\/div><div class=\"sal-ctx\">C\u00e2nd te mai vezi<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#f8ece8,#e8c0b0);border-color:#c89080\"><div class=\"sal-icon\">\ud83d\udcc5<\/div><div class=\"sal-fr\">\u00c0 demain !<\/div><button class=\"speak-btn\" onclick=\"speakFR('\u00c0 demain')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Pe m\u00e2ine!<\/div><div class=\"sal-ctx\">Te revezi a doua zi<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:#d1fae5;border-color:#6ee7b7\">\n <div class=\"card-label\" style=\"color:#065f46\">\ud83d\udd0a Pronun\u021bie – aten\u021bie!<\/div>\n <div style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0.7rem;font-size:0.85rem\">\n <div style=\"background:white;padding:0.65rem;border-radius:8px\"><strong>Bonjour<\/strong> \u2192 bon-JOUR<br><span style=\"color:var(--muted);font-size:0.78rem\">\u201ej” ca \u00een \u201ejoc”<\/span><\/div>\n <div style=\"background:white;padding:0.65rem;border-radius:8px\"><strong>Bonsoir<\/strong> \u2192 bon-SOIR<br><span style=\"color:var(--muted);font-size:0.78rem\">\u201eoir” sun\u0103 ca \u201eoar”<\/span><\/div>\n <div style=\"background:white;padding:0.65rem;border-radius:8px\"><strong>Salut<\/strong> \u2192 sa-LU<br><span style=\"color:var(--muted);font-size:0.78rem\">\u201et” final nu se pronun\u021b\u0103!<\/span><\/div>\n <div style=\"background:white;padding:0.65rem;border-radius:8px\"><strong>Au revoir<\/strong> \u2192 o-ruh-VWAR<br><span style=\"color:var(--muted);font-size:0.78rem\">\u201er” guralizat fran\u021buzesc<\/span><\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s1','dialogue','nav-1')\">Continuer : Dialogue \u2192<\/button>\n <\/div>\n\n \n <div class=\"section\" id=\"s1-dialogue\">\n <div class=\"section-header\">\n <div class=\"section-num\">02 \u00b7 15 min<\/div>\n <h2 class=\"section-title\">\ud83c\udfa7 Dialogues audio<\/h2>\n <p class=\"section-desc\">Dou\u0103 conversa\u021bii \u00b7 Ascult\u0103 \u0219i repet\u0103<\/p>\n <\/div>\n <div style=\"margin-bottom:1.5rem\">\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1rem;font-weight:700;margin-bottom:0.7rem;display:flex;align-items:center;gap:0.5rem\">\ud83c\udf99\ufe0f Dialogue 1 – \u00c0 l’\u00e9cole <span class=\"tag\" style=\"background:#bfdbfe;color:#1d4ed8\">Formel<\/span><\/div>\n <div class=\"audio-player\" id=\"l1-audio-1\">\n <button class=\"play-btn\" onclick=\"toggleAudio('l1-audio-1')\"><svg width=\"13\" height=\"15\" viewBox=\"0 0 14 16\" fill=\"none\"><path d=\"M0 0L14 8L0 16V0Z\" fill=\"#1e293b\"\/><\/svg><\/button>\n <div class=\"audio-info\">\n <div class=\"audio-title\">Marie rencontre son professeur<\/div>\n <div class=\"audio-track\">Dialogue scolaire \u00b7 Registre formel<\/div>\n <div class=\"waveform\" id=\"l1-audio-1-wave\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"progress-bar\" id=\"l1-audio-1-bar\"><div class=\"progress-fill\" id=\"l1-audio-1-fill\"><\/div><\/div>\n <\/div>\n <div class=\"audio-time\" id=\"l1-audio-1-time\">0:00<\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-label\">\ud83d\udcdc Transcription<\/div>\n <div class=\"dialogue-wrap\">\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#3b82f6\">\ud83d\udc67<\/div><div><div class=\"speaker-name\">Marie<\/div><div class=\"line-fr\"><span class=\"hl\">Bonjour<\/span>, Monsieur Dupont !<\/div><div class=\"line-ro\">Bun\u0103 ziua, Domnule Dupont!<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#f59e0b\">\ud83d\udc68\u200d\ud83c\udfeb<\/div><div><div class=\"speaker-name\">M. Dupont<\/div><div class=\"line-fr\"><span class=\"hl\">Bonjour<\/span>, Marie ! <span class=\"hl\">Comment allez-vous<\/span> ?<\/div><div class=\"line-ro\">Bun\u0103 ziua, Marie! Cum v\u0103 sim\u021bi\u021bi?<\/div><\/div><\/div>\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#3b82f6\">\ud83d\udc67<\/div><div><div class=\"speaker-name\">Marie<\/div><div class=\"line-fr\"><span class=\"hl\">Je vais bien<\/span>, merci ! Et vous ?<\/div><div class=\"line-ro\">M\u0103 simt bine, mul\u021bumesc! Dar dumneavoastr\u0103?<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#f59e0b\">\ud83d\udc68\u200d\ud83c\udfeb<\/div><div><div class=\"speaker-name\">M. Dupont<\/div><div class=\"line-fr\">Tr\u00e8s bien, merci. <span class=\"hl\">Au revoir<\/span>, Marie !<\/div><div class=\"line-ro\">Foarte bine, mul\u021bumesc. La revedere, Marie!<\/div><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div>\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1rem;font-weight:700;margin-bottom:0.7rem;display:flex;align-items:center;gap:0.5rem\">\ud83c\udf99\ufe0f Dialogue 2 – Entre amis <span class=\"tag\" style=\"background:#a7f3d0;color:#065f46\">Informel<\/span><\/div>\n <div class=\"audio-player\" id=\"l1-audio-2\">\n <button class=\"play-btn\" onclick=\"toggleAudio('l1-audio-2')\"><svg width=\"13\" height=\"15\" viewBox=\"0 0 14 16\" fill=\"none\"><path d=\"M0 0L14 8L0 16V0Z\" fill=\"#1e293b\"\/><\/svg><\/button>\n <div class=\"audio-info\">\n <div class=\"audio-title\">Lucas et Emma se retrouvent<\/div>\n <div class=\"audio-track\">Conversation amicale \u00b7 Registre informel<\/div>\n <div class=\"waveform\" id=\"l1-audio-2-wave\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"progress-bar\" id=\"l1-audio-2-bar\"><div class=\"progress-fill\" id=\"l1-audio-2-fill\"><\/div><\/div>\n <\/div>\n <div class=\"audio-time\" id=\"l1-audio-2-time\">0:00<\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-label\">\ud83d\udcdc Transcription<\/div>\n <div class=\"dialogue-wrap\">\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#3b82f6\">\ud83d\udc66<\/div><div><div class=\"speaker-name\">Lucas<\/div><div class=\"line-fr\"><span class=\"hl\">Salut<\/span>, Emma !<\/div><div class=\"line-ro\">Salut, Emma!<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#f59e0b\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Emma<\/div><div class=\"line-fr\">Salut ! <span class=\"hl\">\u00c7a va<\/span> ?<\/div><div class=\"line-ro\">Salut! Ce mai faci?<\/div><\/div><\/div>\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#3b82f6\">\ud83d\udc66<\/div><div><div class=\"speaker-name\">Lucas<\/div><div class=\"line-fr\"><span class=\"hl\">\u00c7a va bien<\/span> ! Et toi ?<\/div><div class=\"line-ro\">M\u0103 descurc bine! Tu cum e\u0219ti?<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#f59e0b\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Emma<\/div><div class=\"line-fr\"><span class=\"hl\">Comme ci comme \u00e7a<\/span>… <span class=\"hl\">\u00c0 bient\u00f4t<\/span> !<\/div><div class=\"line-ro\">\u0218i-a\u0219a \u0219i-a\u0219a… Pe cur\u00e2nd!<\/div><\/div><\/div>\n <\/div>\n <button class=\"reveal-btn\" onclick=\"toggleReveal(this,'l1-d2')\">\u25b6 Note<\/button>\n <div class=\"correction-box\" id=\"l1-d2\"><strong>Et toi ?<\/strong> = forma informal\u0103 de la \u201eEt vous ?” \u00b7 <strong>D\u00e9sol\u00e9<\/strong> = \u00cemi pare r\u0103u<\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s1','exercices','nav-1')\">Continuer : Exercices \u2192<\/button>\n <\/div>\n\n \n <div class=\"section\" id=\"s1-exercices\">\n <div class=\"section-header\">\n <div class=\"section-num\">03 \u00b7 20 min<\/div>\n <h2 class=\"section-title\">\u270f\ufe0f Exercices<\/h2>\n <\/div>\n \n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">01<\/div><div><div class=\"ex-type\">Choix multiple<\/div><div class=\"ex-question\">Formel ou informel ?<\/div><\/div><\/div>\n <div style=\"margin-bottom:1rem\"><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Comment allez-vous ? \u00bb<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>Avec ton meilleur ami<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>Avec ton professeur<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>Avec ta petite soeur<\/div>\n <\/div>\n <\/div>\n <div><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00c0 quelle heure dit-on \u00ab Bonsoir \u00bb ?<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>\u00c0 9h du matin<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">B<\/div>\u00c0 14h le apr\u00e8s-midi<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">C<\/div>\u00c0 19h le soir<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">02<\/div><div><div class=\"ex-type\">Association<\/div><div class=\"ex-question\">Francez\u0103 \u2194 Rom\u00e2n\u0103<\/div><div class=\"ex-instruction\">Clic pe o expresie francez\u0103, apoi pe traducerea ei<\/div><\/div><\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin:0.8rem 0\">\n <div><div style=\"font-family:'DM Mono',monospace;font-size:0.62rem;text-transform:uppercase;color:var(--muted);margin-bottom:0.4rem;text-align:center\">\ud83c\uddeb\ud83c\uddf7 Fran\u00e7ais<\/div>\n <div style=\"display:flex;flex-direction:column;gap:0.4rem\">\n <div class=\"match-item\" data-id=\"l1m1\" data-side=\"fr\" onclick=\"doMatch(this,'l1match','l1mfb')\">Bonsoir<\/div>\n <div class=\"match-item\" data-id=\"l1m2\" data-side=\"fr\" onclick=\"doMatch(this,'l1match','l1mfb')\">\u00c0 bient\u00f4t !<\/div>\n <div class=\"match-item\" data-id=\"l1m3\" data-side=\"fr\" onclick=\"doMatch(this,'l1match','l1mfb')\">Comme ci comme \u00e7a<\/div>\n <div class=\"match-item\" data-id=\"l1m4\" data-side=\"fr\" onclick=\"doMatch(this,'l1match','l1mfb')\">Je vais bien<\/div>\n <\/div>\n <\/div>\n <div><div style=\"font-family:'DM Mono',monospace;font-size:0.62rem;text-transform:uppercase;color:var(--muted);margin-bottom:0.4rem;text-align:center\">\ud83c\uddf7\ud83c\uddf4 Rom\u00e2n\u0103<\/div>\n <div style=\"display:flex;flex-direction:column;gap:0.4rem\">\n <div class=\"match-item\" data-id=\"l1m3\" data-side=\"ro\" onclick=\"doMatch(this,'l1match','l1mfb')\">\u0218i-a\u0219a \u0219i-a\u0219a<\/div>\n <div class=\"match-item\" data-id=\"l1m1\" data-side=\"ro\" onclick=\"doMatch(this,'l1match','l1mfb')\">Bun\u0103 seara<\/div>\n <div class=\"match-item\" data-id=\"l1m4\" data-side=\"ro\" onclick=\"doMatch(this,'l1match','l1mfb')\">M\u0103 simt bine<\/div>\n <div class=\"match-item\" data-id=\"l1m2\" data-side=\"ro\" onclick=\"doMatch(this,'l1match','l1mfb')\">Pe cur\u00e2nd!<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"l1mfb\" style=\"font-size:0.85rem;display:none\"><\/div>\n <button class=\"btn btn-ink\" style=\"font-size:0.78rem;padding:0.4rem 0.9rem;margin-top:0.4rem\" onclick=\"resetMatch('l1match','l1mfb')\">\u21ba<\/button>\n <\/div>\n \n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">03<\/div><div><div class=\"ex-type\">Compl\u00e9tez \u00b7 Drag & Drop<\/div><div class=\"ex-question\">Completeaz\u0103 dialogul<\/div><\/div><\/div>\n <div class=\"word-bank\" id=\"l1-wb\">\n <span class=\"chip\" draggable=\"true\" data-word=\"Bonjour\">Bonjour<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"\u00c7a va\">\u00c7a va<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"Au revoir\">Au revoir<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"Bonsoir\">Bonsoir<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"\u00c0 demain\">\u00c0 demain<\/span>\n <\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">1.<\/span><span>– <\/span><span class=\"drop-zone\" data-answer=\"Bonjour\" data-wb=\"l1-wb\"><\/span><span>, Madame !<\/span><span style=\"font-size:0.72rem;color:var(--muted)\">(diminea\u021ba, formal)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">2.<\/span><span>– <\/span><span class=\"drop-zone\" data-answer=\"\u00c7a va\" data-wb=\"l1-wb\"><\/span><span> ? – Oui, \u00e7a va bien !<\/span><span style=\"font-size:0.72rem;color:var(--muted)\">(informal)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">3.<\/span><span>– <\/span><span class=\"drop-zone\" data-answer=\"Bonsoir\" data-wb=\"l1-wb\"><\/span><span>, bonne soir\u00e9e !<\/span><span style=\"font-size:0.72rem;color:var(--muted)\">(seara)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">4.<\/span><span>– <\/span><span class=\"drop-zone\" data-answer=\"Au revoir\" data-wb=\"l1-wb\"><\/span><span>, Monsieur !<\/span><span style=\"font-size:0.72rem;color:var(--muted)\">(formal, pleac\u0103)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">5.<\/span><span>– Bonne nuit ! – <\/span><span class=\"drop-zone\" data-answer=\"\u00c0 demain\" data-wb=\"l1-wb\"><\/span><span> !<\/span><span style=\"font-size:0.72rem;color:var(--muted)\">(se rev\u0103d m\u00e2ine)<\/span><\/div>\n <div style=\"display:flex;gap:0.5rem;margin-top:0.9rem;flex-wrap:wrap\">\n <button class=\"btn btn-lesson\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"checkDnD('.exercise-block:nth-child(3) .drop-zone','l1-dnd-fb','l1-wb')\">\u2713 V\u00e9rifier<\/button>\n <button class=\"btn btn-ink\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"resetDnD('.exercise-block:nth-child(3) .drop-zone','l1-dnd-fb','l1-wb')\">\u21ba<\/button>\n <\/div>\n <div id=\"l1-dnd-fb\" style=\"margin-top:0.7rem;font-size:0.85rem;display:none\"><\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s1','bilan','nav-1')\">Continuer : Bilan \u2192<\/button>\n <\/div>\n\n \n <div class=\"section\" id=\"s1-bilan\">\n <div class=\"section-header\">\n <div class=\"section-num\">04 \u00b7 10 min<\/div>\n <h2 class=\"section-title\">\ud83c\udf1f Bilan<\/h2>\n <\/div>\n <div class=\"plan-grid\">\n <div class=\"card\">\n <div class=\"card-label\">\u2b50 Auto-\u00e9valuation<\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je peux dire bonjour et bonsoir<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je connais formel vs informel<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je peux dire au revoir<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <p style=\"font-size:0.7rem;color:var(--muted);margin-top:0.7rem\">\u2b50 Trebuie s\u0103 mai exersez \u00b7 \u2b50\u2b50 \u00cen\u021beleg \u00b7 \u2b50\u2b50\u2b50 \u0218tiu bine!<\/p>\n <\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\" style=\"background:#fef3c7;border-color:#fcd34d\">\n <div class=\"card-label\" style=\"color:#92400e\">\ud83d\udcdd Tema acas\u0103<\/div>\n <div style=\"font-size:0.85rem;color:#78350f;display:flex;flex-direction:column;gap:0.5rem\">\n <div>1. Exerseaz\u0103 cele 12 expresii cu voce tare de <strong>3 ori<\/strong><\/div>\n <div>2. Salut\u0103 un coleg \u00een francez\u0103 m\u00e2ine<\/div>\n <div>3. Scrie un dialog scurt (4 replici) \u00een caiet<\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#065f46,#10b981);color:white;border:none;cursor:pointer\" onclick=\"openLesson(2)\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">\ud83d\ude80 Lec\u021bia urm\u0103toare<\/div>\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:800\">A1-A2 \u00b7 Se Pr\u00e9senter \u2192<\/div>\n <div style=\"font-size:0.8rem;color:rgba(255,255,255,0.7);margin-top:0.2rem\">Je m’appelle \u00b7 J’ai \u2026 ans \u00b7 Je suis<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div style=\"text-align:center;padding:2rem 0\">\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#3b82f6\">F\u00e9licitations ! \ud83c\udf89<\/div>\n <div style=\"color:var(--muted);margin-top:0.3rem\">Ai terminat Le\u00e7on 1 – Les Salutations!<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"lesson-2\" class=\"lesson-screen\" data-lesson=\"2\">\n <div class=\"back-bar\">\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Toutes les le\u00e7ons<\/button>\n <span class=\"back-breadcrumb\">A1 – A2 \u00b7 Se Pr\u00e9senter<\/span>\n <\/div>\n <div style=\"background:var(--ink);color:white;padding:2.5rem 4vw 3.5rem;text-align:center;position:relative;overflow:hidden\">\n <div style=\"position:absolute;inset:0;background:url(\\\"data:image\/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='rgba(255,255,255,0.07)'\/%3E%3C\/svg%3E\\\") repeat\"><\/div>\n <div style=\"position:relative;display:inline-block;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.75);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;padding:0.25rem 0.9rem;margin-bottom:0.8rem;font-family:'DM Mono',monospace;border-radius:100px\">A1 – A2 \u00b7 Le\u00e7on 2<\/div>\n <div style=\"position:relative;font-family:'Baloo 2',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:white\">\ud83d\udc64 <span style=\"color:#d1fae5\">Se Pr\u00e9senter<\/span><\/div>\n <div style=\"position:relative;color:rgba(255,255,255,0.75);margin-top:0.4rem\">Cum te prezin\u021bi \u00een francez\u0103 \u00b7 Je m’appelle, j’ai … ans<\/div>\n <div style=\"position:absolute;bottom:-1px;left:0;right:0;line-height:0\"><svg viewBox=\"0 0 1440 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M0,20 C360,40 1080,0 1440,20 L1440,40 L0,40 Z\" fill=\"var(--light)\"\/><\/svg><\/div>\n <\/div>\n <nav class=\"lesson-nav\" id=\"nav-2\">\n <button class=\"nav-btn active\" onclick=\"showSec('s2','plan','nav-2')\">\ud83d\udccb Plan<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s2','vocabulaire','nav-2')\">\ud83d\udcac Vocabulaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s2','grammaire','nav-2')\">\u2699\ufe0f Grammaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s2','dialogue','nav-2')\">\ud83c\udfa7 Dialogue<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s2','exercices','nav-2')\">\u270f\ufe0f Exercices<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s2','bilan','nav-2')\">\ud83c\udf1f Bilan<\/button>\n <\/nav>\n <div id=\"s2\">\n <div class=\"section active\" id=\"s2-plan\">\n <div class=\"section-header\"><div class=\"section-num\">00 \u00b7 Introduction<\/div><h2 class=\"section-title\">Plan de la le\u00e7on<\/h2><p class=\"section-desc\">Th\u00e8me : <strong>Se pr\u00e9senter<\/strong> \u00b7 Cum te prezin\u021bi<\/p><\/div>\n <div class=\"plan-grid\">\n <div class=\"card\"><div class=\"card-label\">D\u00e9roul\u00e9 \u00b7 1 heure<\/div><div class=\"timeline\">\n <div class=\"timeline-item\"><div class=\"tl-time\">0:00 – 0:15<\/div><div class=\"tl-title\">\ud83d\udcac Vocabulaire<\/div><div class=\"tl-desc\">Nom, \u00e2ge, nationalit\u00e9, profession \u00b7 15 mots cl\u00e9s<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:15 – 0:30<\/div><div class=\"tl-title\">\u2699\ufe0f Grammaire<\/div><div class=\"tl-desc\">Verbes \u00eatre & avoir au pr\u00e9sent \u00b7 Articles<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:30 – 0:45<\/div><div class=\"tl-title\">\ud83c\udfa7 Dialogue audio<\/div><div class=\"tl-desc\">Deux pr\u00e9sentations authentiques<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:45 – 1:00<\/div><div class=\"tl-title\">\u270f\ufe0f Exercices & Bilan<\/div><\/div>\n <\/div><\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\"><div class=\"card-label\">\ud83c\udfaf Ce vei \u00eenv\u0103\u021ba<\/div>\n <ul style=\"list-style:none;padding:0;display:flex;flex-direction:column;gap:0.6rem;font-size:0.88rem\">\n <li>\ud83d\udc64 S\u0103 spui <strong>cum te cheam\u0103<\/strong> – Je m’appelle…<\/li>\n <li>\ud83c\udf82 S\u0103 spui <strong>c\u00e2\u021bi ani ai<\/strong> – J’ai … ans<\/li>\n <li>\ud83c\udf0d S\u0103 spui <strong>na\u021bionalitatea<\/strong> – Je suis roumain(e)<\/li>\n <li>\ud83d\udcbc S\u0103 spui <strong>profesia<\/strong> – Je suis professeur(e)<\/li>\n <li>\ud83c\udfe0 S\u0103 spui <strong>unde locuie\u0219ti<\/strong> – J’habite \u00e0…<\/li>\n <\/ul>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#064e3b,#10b981);color:white;border:none\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">Con\u021binut<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.7rem\">\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#d1fae5\">15<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">cuvinte<\/div><\/div>\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#d1fae5\">2<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">verbe esen\u021biale<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s2','vocabulaire','nav-2')\">Commencer \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s2-vocabulaire\">\n <div class=\"section-header\"><div class=\"section-num\">01 \u00b7 15 min<\/div><h2 class=\"section-title\">\ud83d\udcac Vocabulaire – Se pr\u00e9senter<\/h2><p class=\"section-desc\">Cuvintele esen\u021biale \u00b7 \ud83d\udd0a Apas\u0103 s\u0103 auzi<\/p><\/div>\n <div class=\"card\"><div class=\"card-label\">\ud83d\udde3\ufe0f Expressions cl\u00e9s<\/div>\n <div class=\"vocab-grid\">\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Identit\u00e9<\/div><div class=\"vocab-fr\">Je m’appelle…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je mappelle')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">M\u0103 numesc… \/ M\u0103 cheam\u0103…<\/div><div class=\"vocab-ex\">Je m’appelle Sophie.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">\u00c2ge<\/div><div class=\"vocab-fr\">J’ai … ans<\/div><button class=\"speak-btn\" onclick=\"speakFR('Jay vingt ans')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Am … ani<\/div><div class=\"vocab-ex\">J’ai vingt ans.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Nationalit\u00e9<\/div><div class=\"vocab-fr\">Je suis roumain(e)<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je suis roumaine')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Sunt rom\u00e2n(\u0103)<\/div><div class=\"vocab-ex\">Je suis roumaine, de Cluj.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Lieu<\/div><div class=\"vocab-fr\">J’habite \u00e0…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Jabite \u00e0 Bucarest')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Locuiesc la…<\/div><div class=\"vocab-ex\">J’habite \u00e0 Bucarest.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Profession<\/div><div class=\"vocab-fr\">Je suis \u00e9tudiant(e)<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je suis \u00e9tudiante')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Sunt student(\u0103)<\/div><div class=\"vocab-ex\">Je suis \u00e9tudiante en droit.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Profession<\/div><div class=\"vocab-fr\">Je suis professeur(e)<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je suis professeur')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Sunt profesor(\u0103)<\/div><div class=\"vocab-ex\">Je suis professeur de fran\u00e7ais.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Famille<\/div><div class=\"vocab-fr\">J’ai un fr\u00e8re \/ une s\u0153ur<\/div><button class=\"speak-btn\" onclick=\"speakFR('Jay un fr\u00e8re et une s\u0153ur')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Am un frate \/ o sor\u0103<\/div><div class=\"vocab-ex\">J’ai deux s\u0153urs.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Loisirs<\/div><div class=\"vocab-fr\">J’aime…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Jaime la musique')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">\u00cemi place…<\/div><div class=\"vocab-ex\">J’aime la musique et les films.<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:#d1fae5;border-color:#6ee7b7\">\n <div class=\"card-label\" style=\"color:#065f46\">\ud83d\udca1 Diferen\u021ba de gen<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;font-size:0.85rem\">\n <div style=\"background:white;padding:0.8rem;border-radius:8px\"><strong>Masculin<\/strong><br>Je suis <span style=\"color:#3b82f6\">roumain<\/span><br>Je suis <span style=\"color:#3b82f6\">\u00e9tudiant<\/span><br>Je suis <span style=\"color:#3b82f6\">professeur<\/span><\/div>\n <div style=\"background:white;padding:0.8rem;border-radius:8px\"><strong>F\u00e9minin<\/strong><br>Je suis <span style=\"color:#ec4899\">roumain<strong>e<\/strong><\/span><br>Je suis <span style=\"color:#ec4899\">\u00e9tudiant<strong>e<\/strong><\/span><br>Je suis <span style=\"color:#ec4899\">professeur<strong>e<\/strong><\/span><\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s2','grammaire','nav-2')\">Continuer : Grammaire \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s2-grammaire\">\n <div class=\"section-header\"><div class=\"section-num\">02 \u00b7 15 min<\/div><h2 class=\"section-title\">\u2699\ufe0f Grammaire<\/h2><p class=\"section-desc\">Verbele \u00caTRE \u0219i AVOIR la prezent \u00b7 Cele mai importante verbe \u00een francez\u0103!<\/p><\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem\">\n <div class=\"card\">\n <div class=\"card-label\" style=\"color:#10b981\">Verbe \u00caTRE (a fi)<\/div>\n <table class=\"conj-table\">\n <tr><td>je<\/td><td><strong>suis<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('je suis')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>tu<\/td><td><strong>es<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('tu es')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>il \/ elle<\/td><td><strong>est<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('il \/ elle est')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>nous<\/td><td><strong>sommes<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('nous sommes')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>vous<\/td><td><strong>\u00eates<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('vous \u00eates')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>ils \/ elles<\/td><td><strong>sont<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('ils \/ elles sont')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <\/table>\n <\/div>\n <div class=\"card\">\n <div class=\"card-label\" style=\"color:#3b82f6\">Verbe AVOIR (a avea)<\/div>\n <table class=\"conj-table\">\n <tr><td>j’<\/td><td><strong>ai<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('jay')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>tu<\/td><td><strong>as<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('tu as')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>il \/ elle<\/td><td><strong>a<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('il \/ elle a')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>nous<\/td><td><strong>avons<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('nous avons')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>vous<\/td><td><strong>avez<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('vous avez')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>ils \/ elles<\/td><td><strong>ont<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('ils \/ elles ont')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <\/table>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:#fef3c7;border-color:#fcd34d\">\n <div class=\"card-label\" style=\"color:#92400e\">\u26a0\ufe0f Aten\u021bie – V\u00e2rsta \u00een francez\u0103!<\/div>\n <p style=\"font-size:0.88rem;color:#78350f\">\u00cen francez\u0103, v\u00e2rsta se exprim\u0103 cu <strong>AVOIR<\/strong>, nu cu \u00caTRE:<br>\n \u274c <del>Je suis 25 ans<\/del> \u2705 <strong>J’ai 25 ans<\/strong> (am 25 de ani)<br>\n \u274c <del>Je suis faim<\/del> \u2705 <strong>J’ai faim<\/strong> (mi-e foame)<\/p>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s2','dialogue','nav-2')\">Continuer : Dialogue \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s2-dialogue\">\n <div class=\"section-header\"><div class=\"section-num\">03 \u00b7 15 min<\/div><h2 class=\"section-title\">\ud83c\udfa7 Dialogue – Deux pr\u00e9sentations<\/h2><\/div>\n <div style=\"margin-bottom:1.5rem\">\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1rem;font-weight:700;margin-bottom:0.7rem\">\ud83c\udf99\ufe0f Dialogue 1 – Pr\u00e9sentation formelle<\/div>\n <div class=\"audio-player\" id=\"l2-audio-1\">\n <button class=\"play-btn\" onclick=\"toggleAudio('l2-audio-1')\"><svg width=\"13\" height=\"15\" viewBox=\"0 0 14 16\" fill=\"none\"><path d=\"M0 0L14 8L0 16V0Z\" fill=\"#064e3b\"\/><\/svg><\/button>\n <div class=\"audio-info\"><div class=\"audio-title\">Sophie se pr\u00e9sente \u00e0 la classe<\/div><div class=\"audio-track\">Pr\u00e9sentation \u00b7 Registre formel \u00b7 A1<\/div>\n <div class=\"waveform\" id=\"l2-audio-1-wave\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"progress-bar\" id=\"l2-audio-1-bar\"><div class=\"progress-fill\" id=\"l2-audio-1-fill\"><\/div><\/div>\n <\/div>\n <div class=\"audio-time\" id=\"l2-audio-1-time\">0:00<\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\ud83d\udcdc Transcription<\/div>\n <div class=\"dialogue-wrap\">\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#10b981\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Sophie<\/div><div class=\"line-fr\"><span class=\"hl\">Bonjour<\/span> ! <span class=\"hl\">Je m’appelle<\/span> Sophie Martin. <span class=\"hl\">J’ai<\/span> vingt-trois ans.<\/div><div class=\"line-ro\">Bun\u0103 ziua! M\u0103 numesc Sophie Martin. Am dou\u0103zeci \u0219i trei de ani.<\/div><\/div><\/div>\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#10b981\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Sophie<\/div><div class=\"line-fr\"><span class=\"hl\">Je suis<\/span> fran\u00e7aise, <span class=\"hl\">j’habite \u00e0<\/span> Lyon. <span class=\"hl\">Je suis<\/span> \u00e9tudiante en m\u00e9decine.<\/div><div class=\"line-ro\">Sunt francez\u0103, locuiesc la Lyon. Sunt student\u0103 la medicin\u0103.<\/div><\/div><\/div>\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#10b981\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Sophie<\/div><div class=\"line-fr\"><span class=\"hl\">J’aime<\/span> lire, voyager et \u00e9couter de la musique. Enchant\u00e9 de vous conna\u00eetre !<\/div><div class=\"line-ro\">\u00cemi place s\u0103 citesc, s\u0103 c\u0103l\u0103toresc \u0219i s\u0103 ascult muzic\u0103. \u00cenc\u00e2ntat de cuno\u0219tin\u021b\u0103!<\/div><\/div><\/div>\n <\/div>\n <button class=\"reveal-btn\" onclick=\"toggleReveal(this,'l2-d1')\">\u25b6 Note<\/button>\n <div class=\"correction-box\" id=\"l2-d1\"><strong>Enchant\u00e9(e)<\/strong> = \u00cenc\u00e2ntat(\u0103) de cuno\u0219tin\u021b\u0103 \u00b7 <strong>Voyager<\/strong> = a c\u0103l\u0103tori \u00b7 <strong>Lire<\/strong> = a citi<\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:#d1fae5;border-color:#6ee7b7\">\n <div class=\"card-label\" style=\"color:#065f46\">\ud83d\udcdd Modelul de prezentare A1<\/div>\n <div style=\"font-size:0.88rem;display:flex;flex-direction:column;gap:0.4rem\">\n <div style=\"background:white;padding:0.6rem;border-radius:8px\">1. <strong>Je m’appelle<\/strong> [prenume + nume].<\/div>\n <div style=\"background:white;padding:0.6rem;border-radius:8px\">2. <strong>J’ai<\/strong> [v\u00e2rst\u0103] <strong>ans<\/strong>.<\/div>\n <div style=\"background:white;padding:0.6rem;border-radius:8px\">3. <strong>Je suis<\/strong> [na\u021bionalitate]. <strong>J’habite \u00e0<\/strong> [ora\u0219].<\/div>\n <div style=\"background:white;padding:0.6rem;border-radius:8px\">4. <strong>Je suis<\/strong> [profesie \/ student].<\/div>\n <div style=\"background:white;padding:0.6rem;border-radius:8px\">5. <strong>J’aime<\/strong> [hobby 1] <strong>et<\/strong> [hobby 2].<\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s2','exercices','nav-2')\">Continuer : Exercices \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s2-exercices\">\n <div class=\"section-header\"><div class=\"section-num\">04 \u00b7 15 min<\/div><h2 class=\"section-title\">\u270f\ufe0f Exercices<\/h2><\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">01<\/div><div><div class=\"ex-type\">Choix multiple<\/div><div class=\"ex-question\">\u00caTRE ou AVOIR ?<\/div><\/div><\/div>\n <div style=\"margin-bottom:1rem\"><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Je ___ 20 ans. \u00bb<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>suis<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>ai<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>es<\/div>\n <\/div>\n <\/div>\n <div style=\"margin-bottom:1rem\"><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Elle ___ \u00e9tudiante. \u00bb<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">A<\/div>est<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">B<\/div>a<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>avons<\/div>\n <\/div>\n <\/div>\n <div><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Nous ___ fran\u00e7ais. \u00bb<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>avons<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>sommes<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>ont<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">02<\/div><div><div class=\"ex-type\">Drag & Drop<\/div><div class=\"ex-question\">Completeaz\u0103 prezentarea<\/div><\/div><\/div>\n <div class=\"word-bank\" id=\"l2-wb\">\n <span class=\"chip\" draggable=\"true\" data-word=\"m'appelle\">m’appelle<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"J'ai\">J’ai<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"Je suis\">Je suis<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"J'habite\">J’habite<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"J'aime\">J’aime<\/span>\n <\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">1.<\/span><span>Je <\/span><span class=\"drop-zone\" data-answer=\"m'appelle\" data-wb=\"l2-wb\"><\/span><span> Ana.<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">2.<\/span><span><\/span><span class=\"drop-zone\" data-answer=\"J'ai\" data-wb=\"l2-wb\"><\/span><span> dix-huit ans.<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">3.<\/span><span><\/span><span class=\"drop-zone\" data-answer=\"Je suis\" data-wb=\"l2-wb\"><\/span><span> roumaine.<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">4.<\/span><span><\/span><span class=\"drop-zone\" data-answer=\"J'habite\" data-wb=\"l2-wb\"><\/span><span> \u00e0 Cluj.<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">5.<\/span><span><\/span><span class=\"drop-zone\" data-answer=\"J'aime\" data-wb=\"l2-wb\"><\/span><span> la danse et le cin\u00e9ma.<\/span><\/div>\n <div style=\"display:flex;gap:0.5rem;margin-top:0.9rem\">\n <button class=\"btn btn-lesson\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"checkDnDById(['s2-exercices'],'l2-dnd-fb','l2-wb')\">\u2713 V\u00e9rifier<\/button>\n <button class=\"btn btn-ink\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"resetDnDById(['s2-exercices'],'l2-dnd-fb','l2-wb')\">\u21ba<\/button>\n <\/div>\n <div id=\"l2-dnd-fb\" style=\"margin-top:0.7rem;font-size:0.85rem;display:none\"><\/div>\n <\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">03<\/div><div><div class=\"ex-type\">\u00c9criture libre<\/div><div class=\"ex-question\">Prezint\u0103-te \u00een francez\u0103!<\/div><div class=\"ex-instruction\">Scrie 3-5 propozi\u021bii despre tine<\/div><\/div><\/div>\n <textarea style=\"width:100%;height:120px;border:2px solid var(--border);border-radius:10px;padding:0.8rem;font-family:'Nunito',sans-serif;font-size:0.88rem;outline:none;resize:vertical\" placeholder=\"Je m'appelle... J'ai... ans. Je suis...\"><\/textarea>\n <button class=\"reveal-btn\" style=\"margin-top:0.5rem\" onclick=\"toggleReveal(this,'l2-ex3-ans')\">\u25b6 Voir un exemple<\/button>\n <div class=\"correction-box\" id=\"l2-ex3-ans\">Je m’appelle <em>Maria<\/em>. J’ai <em>vingt-cinq<\/em> ans. Je suis roumaine et j’habite \u00e0 <em>Bucarest<\/em>. Je suis \u00e9tudiante en \u00e9conomie. J’aime la musique et voyager.<\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s2','bilan','nav-2')\">Continuer : Bilan \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s2-bilan\">\n <div class=\"section-header\"><div class=\"section-num\">05 \u00b7 5 min<\/div><h2 class=\"section-title\">\ud83c\udf1f Bilan<\/h2><\/div>\n <div class=\"plan-grid\">\n <div class=\"card\"><div class=\"card-label\">\u2b50 Auto-\u00e9valuation<\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je peux dire mon nom et mon \u00e2ge<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je conjugue \u00caTRE et AVOIR<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je peux faire une pr\u00e9sentation compl\u00e8te<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\" style=\"background:#fef3c7;border-color:#fcd34d\"><div class=\"card-label\" style=\"color:#92400e\">\ud83d\udcdd Tema acas\u0103<\/div>\n <div style=\"font-size:0.85rem;color:#78350f;display:flex;flex-direction:column;gap:0.5rem\">\n <div>1. Scrie o prezentare de 5-6 propozi\u021bii \u00een caiet<\/div>\n <div>2. Prezint\u0103-te cu voce tare \u00een fa\u021ba oglinzii<\/div>\n <div>3. Memoreaz\u0103 conjugarea lui \u00caTRE \u0219i AVOIR<\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#4c1d95,#8b5cf6);color:white;border:none;cursor:pointer\" onclick=\"openLesson(3)\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">\ud83d\ude80 Lec\u021bia urm\u0103toare<\/div>\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:800\">A2-B1 \u00b7 La Vie Quotidienne \u2192<\/div>\n <div style=\"font-size:0.8rem;color:rgba(255,255,255,0.7);margin-top:0.2rem\">Rutina zilnic\u0103 \u00b7 Imparfait \u00b7 Adverbes<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div style=\"text-align:center;padding:2rem 0\">\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#10b981\">F\u00e9licitations ! \ud83c\udf89<\/div>\n <div style=\"color:var(--muted)\">Ai terminat Le\u00e7on 2 – Se Pr\u00e9senter!<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"lesson-3\" class=\"lesson-screen\" data-lesson=\"3\">\n <div class=\"back-bar\">\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Toutes les le\u00e7ons<\/button>\n <span class=\"back-breadcrumb\">A2 – B1 \u00b7 La Vie Quotidienne<\/span>\n <\/div>\n <div style=\"background:var(--ink);color:white;padding:2.5rem 4vw 3.5rem;text-align:center;position:relative;overflow:hidden\">\n <div style=\"position:absolute;inset:0;background:url(\\\"data:image\/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='rgba(255,255,255,0.07)'\/%3E%3C\/svg%3E\\\") repeat\"><\/div>\n <div style=\"position:relative;display:inline-block;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.75);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;padding:0.25rem 0.9rem;margin-bottom:0.8rem;font-family:'DM Mono',monospace;border-radius:100px\">A2 – B1 \u00b7 Le\u00e7on 3<\/div>\n <div style=\"position:relative;font-family:'Baloo 2',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:white\">\ud83c\udfe0 <span style=\"color:#ede9fe\">La Vie Quotidienne<\/span><\/div>\n <div style=\"position:relative;color:rgba(255,255,255,0.75);margin-top:0.4rem\">Rutina zilnic\u0103 \u00een francez\u0103 \u00b7 Le imparfait \u00b7 Les adverbes<\/div>\n <div style=\"position:absolute;bottom:-1px;left:0;right:0;line-height:0\"><svg viewBox=\"0 0 1440 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M0,20 C360,40 1080,0 1440,20 L1440,40 L0,40 Z\" fill=\"var(--light)\"\/><\/svg><\/div>\n <\/div>\n <nav class=\"lesson-nav\" id=\"nav-3\">\n <button class=\"nav-btn active\" onclick=\"showSec('s3','plan','nav-3')\">\ud83d\udccb Plan<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s3','vocabulaire','nav-3')\">\ud83d\udcac Vocabulaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s3','grammaire','nav-3')\">\u2699\ufe0f Grammaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s3','dialogue','nav-3')\">\ud83c\udfa7 Dialogue<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s3','exercices','nav-3')\">\u270f\ufe0f Exercices<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s3','bilan','nav-3')\">\ud83c\udf1f Bilan<\/button>\n <\/nav>\n <div id=\"s3\">\n <div class=\"section active\" id=\"s3-plan\">\n <div class=\"section-header\"><div class=\"section-num\">00 \u00b7 Introduction<\/div><h2 class=\"section-title\">Plan de la le\u00e7on<\/h2><p class=\"section-desc\">Th\u00e8me : <strong>La vie quotidienne<\/strong> \u00b7 Rutina zilnic\u0103 \u0219i activit\u0103\u021bile obi\u0219nuite<\/p><\/div>\n <div class=\"plan-grid\">\n <div class=\"card\"><div class=\"card-label\">D\u00e9roul\u00e9 \u00b7 1h30<\/div><div class=\"timeline\">\n <div class=\"timeline-item\"><div class=\"tl-time\">0:00 – 0:20<\/div><div class=\"tl-title\">\ud83d\udcac Vocabulaire<\/div><div class=\"tl-desc\">Verbe de rutin\u0103 \u00b7 Adverbe de timp \u00b7 Casa<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:20 – 0:45<\/div><div class=\"tl-title\">\u2699\ufe0f Grammaire<\/div><div class=\"tl-desc\">Le imparfait \u00b7 Formation et usage \u00b7 Comparaison avec pass\u00e9 compos\u00e9<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:45 – 1:05<\/div><div class=\"tl-title\">\ud83c\udfa7 Dialogue audio<\/div><div class=\"tl-desc\">Poveste despre rutina de zi cu zi<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">1:05 – 1:30<\/div><div class=\"tl-title\">\u270f\ufe0f Exercices & Bilan<\/div><\/div>\n <\/div><\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\"><div class=\"card-label\">\ud83c\udfaf Obiective<\/div>\n <ul style=\"list-style:none;padding:0;display:flex;flex-direction:column;gap:0.6rem;font-size:0.88rem\">\n <li>\u23f0 Descrie <strong>rutina zilnic\u0103<\/strong> la prezent<\/li>\n <li>\ud83d\udcc5 Poveste\u0219te despre <strong>trecutul obi\u0219nuit<\/strong> cu imparfait<\/li>\n <li>\ud83c\udfe0 Descrie <strong>casa \u0219i camerele<\/strong><\/li>\n <li>\u26a1 Folose\u0219ti <strong>adverbe de frecven\u021b\u0103<\/strong> (toujours, souvent, jamais)<\/li>\n <\/ul>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#2e1065,#7c3aed);color:white;border:none\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">Con\u021binut<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.7rem\">\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#ede9fe\">20<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">verbe<\/div><\/div>\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#ede9fe\">1<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">timp verbal nou<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s3','vocabulaire','nav-3')\">Commencer \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s3-vocabulaire\">\n <div class=\"section-header\"><div class=\"section-num\">01 \u00b7 20 min<\/div><h2 class=\"section-title\">\ud83d\udcac Vocabulaire<\/h2><p class=\"section-desc\">Verbele rutinei zilnice \u00b7 \ud83d\udd0a Apas\u0103 s\u0103 auzi<\/p><\/div>\n <div class=\"card\"><div class=\"card-label\">\u23f0 Activit\u00e9s quotidiennes – rutina de diminea\u021b\u0103<\/div>\n <div class=\"vocab-grid\">\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Matin<\/div><div class=\"vocab-fr\">se r\u00e9veiller<\/div><button class=\"speak-btn\" onclick=\"speakFR('se r\u00e9veiller')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a se trezi<\/div><div class=\"vocab-ex\">Je me r\u00e9veille \u00e0 7h.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Matin<\/div><div class=\"vocab-fr\">se lever<\/div><button class=\"speak-btn\" onclick=\"speakFR('se lever')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a se ridica \/ a se scula<\/div><div class=\"vocab-ex\">Il se l\u00e8ve t\u00f4t le matin.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Hygi\u00e8ne<\/div><div class=\"vocab-fr\">se doucher<\/div><button class=\"speak-btn\" onclick=\"speakFR('se doucher')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a face du\u0219<\/div><div class=\"vocab-ex\">Elle se douche tous les matins.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Hygi\u00e8ne<\/div><div class=\"vocab-fr\">se brosser les dents<\/div><button class=\"speak-btn\" onclick=\"speakFR('se brosser les dents')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a se sp\u0103la pe din\u021bi<\/div><div class=\"vocab-ex\">Je me brosse les dents deux fois par jour.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Repas<\/div><div class=\"vocab-fr\">prendre le petit-d\u00e9jeuner<\/div><button class=\"speak-btn\" onclick=\"speakFR('prendre le petit d\u00e9jeuner')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a lua micul dejun<\/div><div class=\"vocab-ex\">Nous prenons le petit-d\u00e9jeuner ensemble.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Travail<\/div><div class=\"vocab-fr\">partir au travail<\/div><button class=\"speak-btn\" onclick=\"speakFR('partir au travail')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a pleca la munc\u0103<\/div><div class=\"vocab-ex\">Il part au travail \u00e0 8h30.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Soir<\/div><div class=\"vocab-fr\">rentrer \u00e0 la maison<\/div><button class=\"speak-btn\" onclick=\"speakFR('rentrer \u00e0 la maison')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a se \u00eentoarce acas\u0103<\/div><div class=\"vocab-ex\">Elle rentre \u00e0 la maison \u00e0 18h.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Soir<\/div><div class=\"vocab-fr\">se coucher<\/div><button class=\"speak-btn\" onclick=\"speakFR('se coucher')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a se culca<\/div><div class=\"vocab-ex\">Ils se couchent vers 23h.<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\u26a1 Adverbes de fr\u00e9quence – c\u00e2t de des?<\/div>\n <div style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:0.7rem\">\n <div style=\"background:#ede9fe;padding:0.8rem;border-radius:10px;text-align:center\"><div style=\"font-family:'Baloo 2',sans-serif;font-weight:700;color:#4c1d95\">toujours<\/div><button class=\"speak-btn\" onclick=\"speakFR('toujours')\">\ud83d\udd0a<\/button><div style=\"font-size:0.78rem;color:var(--muted)\">\u00eentotdeauna (100%)<\/div><\/div>\n <div style=\"background:#ede9fe;padding:0.8rem;border-radius:10px;text-align:center\"><div style=\"font-family:'Baloo 2',sans-serif;font-weight:700;color:#4c1d95\">souvent<\/div><button class=\"speak-btn\" onclick=\"speakFR('souvent')\">\ud83d\udd0a<\/button><div style=\"font-size:0.78rem;color:var(--muted)\">des ori (75%)<\/div><\/div>\n <div style=\"background:#ede9fe;padding:0.8rem;border-radius:10px;text-align:center\"><div style=\"font-family:'Baloo 2',sans-serif;font-weight:700;color:#4c1d95\">parfois<\/div><button class=\"speak-btn\" onclick=\"speakFR('parfois')\">\ud83d\udd0a<\/button><div style=\"font-size:0.78rem;color:var(--muted)\">uneori (50%)<\/div><\/div>\n <div style=\"background:#ede9fe;padding:0.8rem;border-radius:10px;text-align:center\"><div style=\"font-family:'Baloo 2',sans-serif;font-weight:700;color:#4c1d95\">rarement<\/div><button class=\"speak-btn\" onclick=\"speakFR('rarement')\">\ud83d\udd0a<\/button><div style=\"font-size:0.78rem;color:var(--muted)\">rareori (25%)<\/div><\/div>\n <div style=\"background:#ede9fe;padding:0.8rem;border-radius:10px;text-align:center\"><div style=\"font-family:'Baloo 2',sans-serif;font-weight:700;color:#4c1d95\">ne … jamais<\/div><button class=\"speak-btn\" onclick=\"speakFR('jamais')\">\ud83d\udd0a<\/button><div style=\"font-size:0.78rem;color:var(--muted)\">niciodat\u0103 (0%)<\/div><\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s3','grammaire','nav-3')\">Continuer : Grammaire \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s3-grammaire\">\n <div class=\"section-header\"><div class=\"section-num\">02 \u00b7 25 min<\/div><h2 class=\"section-title\">\u2699\ufe0f Le Imparfait<\/h2><p class=\"section-desc\">Trecutul obi\u0219nuit – ce f\u0103ceai \u00een mod repetat<\/p><\/div>\n <div class=\"card\" style=\"background:#ede9fe;border-color:#c4b5fd\">\n <div class=\"card-label\" style=\"color:#4c1d95\">\ud83d\udd70\ufe0f Quand utiliser le imparfait ?<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;font-size:0.88rem\">\n <div style=\"background:white;padding:0.8rem;border-radius:10px;border-left:4px solid #8b5cf6\">\n <strong style=\"color:#4c1d95\">\u2705 Imparfait<\/strong><br>\n Ac\u021biuni repetate \u00een trecut<br>\n <em>Quand j’\u00e9tais enfant, je <strong>jouais<\/strong> au foot tous les jours.<\/em><br>\n <span style=\"font-size:0.76rem;color:var(--muted)\">(C\u00e2nd eram copil, jucam fotbal \u00een fiecare zi.)<\/span>\n <\/div>\n <div style=\"background:white;padding:0.8rem;border-radius:10px;border-left:4px solid #f43f5e\">\n <strong style=\"color:#be185d\">\u2705 Pass\u00e9 compos\u00e9<\/strong><br>\n Ac\u021biuni punctuale, terminate<br>\n <em>Hier, je <strong>ai jou\u00e9<\/strong> au foot.<\/em><br>\n <span style=\"font-size:0.76rem;color:var(--muted)\">(Ieri, am jucat fotbal.)<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\u2699\ufe0f Formation de le imparfait<\/div>\n <div style=\"background:#f5f3ff;padding:1rem;border-radius:10px;margin-bottom:1rem;font-size:0.88rem\">\n <strong>Radical<\/strong> = nous + [pr\u00e9sent] – <strong>-ons<\/strong><br>\n <strong>Terminaisons :<\/strong> -ais, -ais, -ait, -ions, -iez, -aient\n <\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:1rem\">\n <div><div style=\"font-family:'DM Mono',monospace;font-size:0.7rem;color:#8b5cf6;text-transform:uppercase;margin-bottom:0.5rem\">PARLER (nous parlons \u2192 parl-)<\/div>\n <table class=\"conj-table\">\n <tr><td>je<\/td><td>parl<strong>ais<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('je parlais')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>tu<\/td><td>parl<strong>ais<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('tu parlais')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>il\/elle<\/td><td>parl<strong>ait<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('il parlait')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>nous<\/td><td>parl<strong>ions<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('nous parlions')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>vous<\/td><td>parl<strong>iez<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('vous parliez')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>ils\/elles<\/td><td>parl<strong>aient<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('ils parlaient')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <\/table>\n <\/div>\n <div><div style=\"font-family:'DM Mono',monospace;font-size:0.7rem;color:#8b5cf6;text-transform:uppercase;margin-bottom:0.5rem\">\u00caTRE (irr\u00e9gulier \u2192 \u00e9t-)<\/div>\n <table class=\"conj-table\">\n <tr><td>j’<\/td><td>\u00e9t<strong>ais<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('j\u00e9tais')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>tu<\/td><td>\u00e9t<strong>ais<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('tu \u00e9tais')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>il\/elle<\/td><td>\u00e9t<strong>ait<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('il\/elle \u00e9tait')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>nous<\/td><td>\u00e9t<strong>ions<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('nous \u00e9tions')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>vous<\/td><td>\u00e9t<strong>iez<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('vous \u00e9tiez')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>ils\/elles<\/td><td>\u00e9t<strong>aient<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('ils \u00e9taient')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s3','dialogue','nav-3')\">Continuer : Dialogue \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s3-dialogue\">\n <div class=\"section-header\"><div class=\"section-num\">03 \u00b7 20 min<\/div><h2 class=\"section-title\">\ud83c\udfa7 Dialogue audio<\/h2><\/div>\n <div class=\"audio-player\" id=\"l3-audio-1\">\n <button class=\"play-btn\" onclick=\"toggleAudio('l3-audio-1')\"><svg width=\"13\" height=\"15\" viewBox=\"0 0 14 16\" fill=\"none\"><path d=\"M0 0L14 8L0 16V0Z\" fill=\"#2e1065\"\/><\/svg><\/button>\n <div class=\"audio-info\"><div class=\"audio-title\">Ma routine – avant et maintenant<\/div><div class=\"audio-track\">Monologue \u00b7 Imparfait vs Pr\u00e9sent \u00b7 A2-B1<\/div>\n <div class=\"waveform\" id=\"l3-audio-1-wave\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"progress-bar\" id=\"l3-audio-1-bar\"><div class=\"progress-fill\" id=\"l3-audio-1-fill\"><\/div><\/div>\n <\/div>\n <div class=\"audio-time\" id=\"l3-audio-1-time\">0:00<\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\ud83d\udcdc Transcription<\/div>\n <div class=\"dialogue-wrap\">\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#8b5cf6\">\ud83e\uddd1<\/div><div><div class=\"speaker-name\">Thomas<\/div><div class=\"line-fr\">Quand j’<span class=\"hl\">\u00e9tais<\/span> enfant, je <span class=\"hl\">me levais<\/span> toujours \u00e0 six heures. Je <span class=\"hl\">prenais<\/span> le petit-d\u00e9jeuner avec ma famille.<\/div><div class=\"line-ro\">C\u00e2nd eram copil, m\u0103 sculam \u00eentotdeauna la \u0219ase. Luam micul dejun cu familia mea.<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#f43f5e\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Claire<\/div><div class=\"line-fr\">Et maintenant, comment est ta routine ?<\/div><div class=\"line-ro\">\u0218i acum, cum \u00ee\u021bi este rutina?<\/div><\/div><\/div>\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#8b5cf6\">\ud83e\uddd1<\/div><div><div class=\"speaker-name\">Thomas<\/div><div class=\"line-fr\">Maintenant je <span class=\"hl\">me l\u00e8ve<\/span> souvent \u00e0 huit heures. Je <span class=\"hl\">travaille<\/span> \u00e0 domicile, donc c’est plus flexible. Mais je <span class=\"hl\">ne fais jamais<\/span> de sport, c’est dommage !<\/div><div class=\"line-ro\">Acum m\u0103 scol de obicei la opt. Lucrez de acas\u0103, deci e mai flexibil. Dar nu fac niciodat\u0103 sport, p\u0103cat!<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#f43f5e\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Claire<\/div><div class=\"line-fr\">Moi, je <span class=\"hl\">faisais<\/span> du yoga tous les matins avant. Maintenant je <span class=\"hl\">pr\u00e9f\u00e8re<\/span> courir. C’est mieux pour moi !<\/div><div class=\"line-ro\">Eu f\u0103ceam yoga \u00een fiecare diminea\u021b\u0103 \u00eenainte. Acum prefer s\u0103 alerg. E mai bine pentru mine!<\/div><\/div><\/div>\n <\/div>\n <button class=\"reveal-btn\" onclick=\"toggleReveal(this,'l3-d1')\">\u25b6 Analyse grammaticale<\/button>\n <div class=\"correction-box\" id=\"l3-d1\"><strong>\u00e9tais, me levais, prenais, faisais<\/strong> = imparfait (ac\u021biuni repetate \u00een trecut)<br><strong>me l\u00e8ve, travaille, pr\u00e9f\u00e8re<\/strong> = pr\u00e9sent (rutina actual\u0103)<br><strong>ne fais jamais<\/strong> = nega\u021bie cu adverb de frecven\u021b\u0103<\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s3','exercices','nav-3')\">Continuer : Exercices \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s3-exercices\">\n <div class=\"section-header\"><div class=\"section-num\">04 \u00b7 25 min<\/div><h2 class=\"section-title\">\u270f\ufe0f Exercices<\/h2><\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">01<\/div><div><div class=\"ex-type\">Choix multiple<\/div><div class=\"ex-question\">Pr\u00e9sent ou Imparfait ?<\/div><\/div><\/div>\n <div style=\"margin-bottom:1rem\"><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Quand j’\u00e9tais enfant, je ___ au parc tous les jours. \u00bb<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>vais<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>allais<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>suis all\u00e9<\/div>\n <\/div>\n <\/div>\n <div><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Hier, elle ___ tard. \u00bb (action ponctuelle)<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>se couchait<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>se est couch\u00e9e<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>se couche<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">02<\/div><div><div class=\"ex-type\">Drag & Drop<\/div><div class=\"ex-question\">Completeaz\u0103 cu adverbul potrivit<\/div><\/div><\/div>\n <div class=\"word-bank\" id=\"l3-wb\">\n <span class=\"chip\" draggable=\"true\" data-word=\"toujours\">toujours<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"souvent\">souvent<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"jamais\">jamais<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"parfois\">parfois<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"rarement\">rarement<\/span>\n <\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">1.<\/span><span>Je me brosse <\/span><span class=\"drop-zone\" data-answer=\"toujours\" data-wb=\"l3-wb\"><\/span><span> les dents le soir. (100%)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">2.<\/span><span>Il va <\/span><span class=\"drop-zone\" data-answer=\"souvent\" data-wb=\"l3-wb\"><\/span><span> au cin\u00e9ma le weekend. (75%)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">3.<\/span><span>Elle ne fait <\/span><span class=\"drop-zone\" data-answer=\"jamais\" data-wb=\"l3-wb\"><\/span><span> de sport. (0%)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">4.<\/span><span>Nous cuisinons <\/span><span class=\"drop-zone\" data-answer=\"parfois\" data-wb=\"l3-wb\"><\/span><span> ensemble. (50%)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">5.<\/span><span>Tu arrives <\/span><span class=\"drop-zone\" data-answer=\"rarement\" data-wb=\"l3-wb\"><\/span><span> en retard. (25%)<\/span><\/div>\n <div style=\"display:flex;gap:0.5rem;margin-top:0.9rem\">\n <button class=\"btn btn-lesson\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"checkDnDById(['s3-exercices'],'l3-dnd-fb','l3-wb')\">\u2713 V\u00e9rifier<\/button>\n <button class=\"btn btn-ink\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"resetDnDById(['s3-exercices'],'l3-dnd-fb','l3-wb')\">\u21ba<\/button>\n <\/div>\n <div id=\"l3-dnd-fb\" style=\"margin-top:0.7rem;font-size:0.85rem;display:none\"><\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s3','bilan','nav-3')\">Continuer : Bilan \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s3-bilan\">\n <div class=\"section-header\"><div class=\"section-num\">05 \u00b7 5 min<\/div><h2 class=\"section-title\">\ud83c\udf1f Bilan<\/h2><\/div>\n <div class=\"plan-grid\">\n <div class=\"card\"><div class=\"card-label\">\u2b50 Auto-\u00e9valuation<\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je connais les verbes de routine<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je forme le imparfait correctement<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je utilise les adverbes de fr\u00e9quence<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\" style=\"background:#fef3c7;border-color:#fcd34d\"><div class=\"card-label\" style=\"color:#92400e\">\ud83d\udcdd Tema acas\u0103<\/div>\n <div style=\"font-size:0.85rem;color:#78350f;display:flex;flex-direction:column;gap:0.5rem\">\n <div>1. Descrie rutina ta zilnic\u0103 (5-6 propozi\u021bii la prezent)<\/div>\n <div>2. Scrie ce f\u0103ceai \u00een copil\u0103rie (5-6 propozi\u021bii la imparfait)<\/div>\n <div>3. Conjug\u0103: faire, aller, vouloir la imparfait<\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#7c2d12,#ea580c);color:white;border:none;cursor:pointer\" onclick=\"openLesson(4)\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">\ud83d\ude80 Lec\u021bia urm\u0103toare<\/div>\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:800\">B1-B2 \u00b7 Exprimer son Opinion \u2192<\/div>\n <div style=\"font-size:0.8rem;color:rgba(255,255,255,0.7);margin-top:0.2rem\">Connecteurs \u00b7 Subjonctif \u00b7 Nuancer<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div style=\"text-align:center;padding:2rem 0\">\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#8b5cf6\">F\u00e9licitations ! \ud83c\udf89<\/div>\n <div style=\"color:var(--muted)\">Ai terminat Le\u00e7on 3 – La Vie Quotidienne!<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"lesson-4\" class=\"lesson-screen\" data-lesson=\"4\">\n <div class=\"back-bar\">\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Toutes les le\u00e7ons<\/button>\n <span class=\"back-breadcrumb\">B1 – B2 \u00b7 Exprimer son Opinion<\/span>\n <\/div>\n <div style=\"background:var(--ink);color:white;padding:2.5rem 4vw 3.5rem;text-align:center;position:relative;overflow:hidden\">\n <div style=\"position:absolute;inset:0;background:url(\\\"data:image\/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='rgba(255,255,255,0.07)'\/%3E%3C\/svg%3E\\\") repeat\"><\/div>\n <div style=\"position:relative;display:inline-block;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.75);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;padding:0.25rem 0.9rem;margin-bottom:0.8rem;font-family:'DM Mono',monospace;border-radius:100px\">B1 – B2 \u00b7 Le\u00e7on 4<\/div>\n <div style=\"position:relative;font-family:'Baloo 2',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:white\">\ud83d\udcac <span style=\"color:#ffedd5\">Exprimer son Opinion<\/span><\/div>\n <div style=\"position:relative;color:rgba(255,255,255,0.75);margin-top:0.4rem\">Opinia, argumentarea, nuan\u021barea \u00b7 Connecteurs \u00b7 Subjonctif<\/div>\n <div style=\"position:absolute;bottom:-1px;left:0;right:0;line-height:0\"><svg viewBox=\"0 0 1440 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M0,20 C360,40 1080,0 1440,20 L1440,40 L0,40 Z\" fill=\"var(--light)\"\/><\/svg><\/div>\n <\/div>\n <nav class=\"lesson-nav\" id=\"nav-4\">\n <button class=\"nav-btn active\" onclick=\"showSec('s4','plan','nav-4')\">\ud83d\udccb Plan<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s4','vocabulaire','nav-4')\">\ud83d\udcac Vocabulaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s4','grammaire','nav-4')\">\u2699\ufe0f Grammaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s4','dialogue','nav-4')\">\ud83c\udfa7 Dialogue<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s4','exercices','nav-4')\">\u270f\ufe0f Exercices<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s4','bilan','nav-4')\">\ud83c\udf1f Bilan<\/button>\n <\/nav>\n <div id=\"s4\">\n <div class=\"section active\" id=\"s4-plan\">\n <div class=\"section-header\"><div class=\"section-num\">00 \u00b7 Introduction<\/div><h2 class=\"section-title\">Plan de la le\u00e7on<\/h2><p class=\"section-desc\">Th\u00e8me : <strong>Exprimer son opinion<\/strong> \u00b7 Cum \u00ee\u021bi exprimi opinia \u0219i argumentezi<\/p><\/div>\n <div class=\"plan-grid\">\n <div class=\"card\"><div class=\"card-label\">D\u00e9roul\u00e9 \u00b7 1h30<\/div><div class=\"timeline\">\n <div class=\"timeline-item\"><div class=\"tl-time\">0:00 – 0:20<\/div><div class=\"tl-title\">\ud83d\udcac Vocabulaire<\/div><div class=\"tl-desc\">15 expressions pour donner et nuancer son opinion<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:20 – 0:45<\/div><div class=\"tl-title\">\u2699\ufe0f Grammaire<\/div><div class=\"tl-desc\">Le subjonctif pr\u00e9sent \u00b7 Connecteurs logiques<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:45 – 1:05<\/div><div class=\"tl-title\">\ud83c\udfa7 Dialogue audio<\/div><div class=\"tl-desc\">D\u00e9bat authentique sur un sujet de soci\u00e9t\u00e9<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">1:05 – 1:30<\/div><div class=\"tl-title\">\u270f\ufe0f Exercices & Bilan<\/div><\/div>\n <\/div><\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\"><div class=\"card-label\">\ud83c\udfaf Obiective<\/div>\n <ul style=\"list-style:padding:0;display:flex;flex-direction:column;gap:0.6rem;font-size:0.88rem;list-style:none\">\n <li>\ud83d\udde3\ufe0f Exprimi <strong>opinia<\/strong> cu nuan\u021b\u0103 \u0219i elegan\u021b\u0103<\/li>\n <li>\ud83d\udd17 Folose\u0219ti <strong>conectori logici<\/strong> pentru a argumenta<\/li>\n <li>\u2699\ufe0f Construie\u0219ti propozi\u021bii cu <strong>subjonctivul<\/strong><\/li>\n <li>\ud83e\udd1d Concezi \u0219i <strong>contraargumentezi<\/strong> politicos<\/li>\n <\/ul>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#431407,#ea580c);color:white;border:none\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">Con\u021binut<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.7rem\">\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#ffedd5\">15<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">expresii<\/div><\/div>\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#ffedd5\">8<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">conectori<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s4','vocabulaire','nav-4')\">Commencer \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s4-vocabulaire\">\n <div class=\"section-header\"><div class=\"section-num\">01 \u00b7 20 min<\/div><h2 class=\"section-title\">\ud83d\udcac Exprimer et nuancer<\/h2><p class=\"section-desc\">15 expressions essentielles \u00b7 \ud83d\udd0a Apas\u0103 s\u0103 auzi<\/p><\/div>\n <div class=\"card\"><div class=\"card-label\">\ud83d\udde3\ufe0f Donner son opinion – a-\u021bi da cu p\u0103rerea<\/div>\n <div class=\"vocab-grid\">\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Opinion<\/div><div class=\"vocab-fr\">\u00c0 mon avis…<\/div><button class=\"speak-btn\" onclick=\"speakFR('\u00c0 mon avis')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Dup\u0103 mine… \/ Din punctul meu de vedere…<\/div><div class=\"vocab-ex\">\u00c0 mon avis, c’est une bonne id\u00e9e.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Opinion<\/div><div class=\"vocab-fr\">Je pense que…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je pense que')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Cred c\u0103… \/ Consider c\u0103…<\/div><div class=\"vocab-ex\">Je pense que nous devons agir.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Opinion<\/div><div class=\"vocab-fr\">Il me semble que…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Il me semble que')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Mi se pare c\u0103…<\/div><div class=\"vocab-ex\">Il me semble que la situation est grave.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Accord<\/div><div class=\"vocab-fr\">Je suis tout \u00e0 fait d’accord.<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je suis tout \u00e0 fait dacord')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Sunt complet de acord.<\/div><div class=\"vocab-ex\">Je suis tout \u00e0 fait d’accord avec vous.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">D\u00e9saccord<\/div><div class=\"vocab-fr\">Je ne suis pas d’accord.<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je ne suis pas dacord')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Nu sunt de acord.<\/div><div class=\"vocab-ex\">Permettez-moi de ne pas \u00eatre d’accord.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Nuance<\/div><div class=\"vocab-fr\">Certes… mais…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Certes, mais')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Desigur… dar… \/ E adev\u0103rat c\u0103… dar…<\/div><div class=\"vocab-ex\">Certes, c’est cher, mais \u00e7a vaut le coup.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Nuance<\/div><div class=\"vocab-fr\">Cependant…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Cependant')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Cu toate acestea… \/ Totu\u0219i…<\/div><div class=\"vocab-ex\">C’est bien. Cependant, il y a des risques.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Concession<\/div><div class=\"vocab-fr\">Il n’emp\u00eache que…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Il nemp\u00eache que')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Cu toate acestea… \/ R\u0103m\u00e2ne c\u0103…<\/div><div class=\"vocab-ex\">Il n’emp\u00eache que c’est un probl\u00e8me r\u00e9el.<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\ud83d\udd17 Connecteurs logiques<\/div>\n <div style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.7rem;font-size:0.85rem\">\n <div style=\"background:#ffedd5;padding:0.8rem;border-radius:10px\"><strong style=\"color:#c2410c\">car \/ parce que<\/strong><button class=\"speak-btn\" onclick=\"speakFR('car, parce que')\">\ud83d\udd0a<\/button><br><span style=\"color:var(--muted)\">pentru c\u0103 (cauza)<\/span><br><em>Je refuse car c’est injuste.<\/em><\/div>\n <div style=\"background:#ffedd5;padding:0.8rem;border-radius:10px\"><strong style=\"color:#c2410c\">donc \/ ainsi<\/strong><button class=\"speak-btn\" onclick=\"speakFR('donc, ainsi')\">\ud83d\udd0a<\/button><br><span style=\"color:var(--muted)\">deci (concluzie)<\/span><br><em>Il pleut, donc je reste.<\/em><\/div>\n <div style=\"background:#ffedd5;padding:0.8rem;border-radius:10px\"><strong style=\"color:#c2410c\">bien que + subj.<\/strong><button class=\"speak-btn\" onclick=\"speakFR('bien que')\">\ud83d\udd0a<\/button><br><span style=\"color:var(--muted)\">de\u0219i (concesie)<\/span><br><em>Bien que il soit tard…<\/em><\/div>\n <div style=\"background:#ffedd5;padding:0.8rem;border-radius:10px\"><strong style=\"color:#c2410c\">en revanche<\/strong><button class=\"speak-btn\" onclick=\"speakFR('en revanche')\">\ud83d\udd0a<\/button><br><span style=\"color:var(--muted)\">\u00een schimb (opozi\u021bie)<\/span><br><em>C’est cher, en revanche c’est beau.<\/em><\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s4','grammaire','nav-4')\">Continuer : Grammaire \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s4-grammaire\">\n <div class=\"section-header\"><div class=\"section-num\">02 \u00b7 25 min<\/div><h2 class=\"section-title\">\u2699\ufe0f Le Subjonctif pr\u00e9sent<\/h2><p class=\"section-desc\">Modul subiectivit\u0103\u021bii – dorin\u021b\u0103, \u00eendoial\u0103, emo\u021bie<\/p><\/div>\n <div class=\"card\" style=\"background:#ffedd5;border-color:#fdba74\">\n <div class=\"card-label\" style=\"color:#7c2d12\">\ud83e\udd14 Quand utiliser le subjonctif ?<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;font-size:0.85rem\">\n <div style=\"background:white;padding:0.8rem;border-radius:10px\">\n <strong>Apr\u00e8s des expressions de :<\/strong><br>\n – dorit: <em>vouloir que, d\u00e9sirer que<\/em><br>\n – emo\u021bie: <em>\u00eatre content que, regretter que<\/em><br>\n – \u00eendoial\u0103: <em>douter que, ne pas croire que<\/em><br>\n – obliga\u021bie: <em>il faut que, il est n\u00e9cessaire que<\/em>\n <\/div>\n <div style=\"background:white;padding:0.8rem;border-radius:10px\">\n <strong>Exemple :<\/strong><br>\n \u2705 Je veux que tu <strong>viennes<\/strong>.<br>\n <span style=\"color:var(--muted);font-size:0.78rem\">Vreau s\u0103 vii. (subjonctif)<\/span><br><br>\n \u2705 Il faut que nous <strong>partions<\/strong>.<br>\n <span style=\"color:var(--muted);font-size:0.78rem\">Trebuie s\u0103 plec\u0103m.<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\u2699\ufe0f Formation – AVOIR et \u00caTRE au subjonctif<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:1rem\">\n <div><div style=\"font-family:'DM Mono',monospace;font-size:0.7rem;color:#ea580c;text-transform:uppercase;margin-bottom:0.5rem\">AVOIR (irr\u00e9gulier)<\/div>\n <table class=\"conj-table\">\n <tr><td>que j’<\/td><td><strong>aie<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que jaye')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que tu<\/td><td><strong>aies<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que tu aies')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que il\/elle<\/td><td><strong>ait<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('kil ait')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que nous<\/td><td><strong>ayons<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que nous ayons')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que vous<\/td><td><strong>ayez<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que vous ayez')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que ils\/elles<\/td><td><strong>aient<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('kils aient')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <\/table>\n <\/div>\n <div><div style=\"font-family:'DM Mono',monospace;font-size:0.7rem;color:#ea580c;text-transform:uppercase;margin-bottom:0.5rem\">\u00caTRE (irr\u00e9gulier)<\/div>\n <table class=\"conj-table\">\n <tr><td>que je<\/td><td><strong>sois<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que je sois')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que tu<\/td><td><strong>sois<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que tu sois')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que il\/elle<\/td><td><strong>soit<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('kil soit')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que nous<\/td><td><strong>soyons<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que nous soyons')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que vous<\/td><td><strong>soyez<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que vous soyez')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que ils\/elles<\/td><td><strong>soient<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('kils soient')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s4','dialogue','nav-4')\">Continuer : Dialogue \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s4-dialogue\">\n <div class=\"section-header\"><div class=\"section-num\">03 \u00b7 20 min<\/div><h2 class=\"section-title\">\ud83c\udfa7 D\u00e9bat – Les r\u00e9seaux sociaux<\/h2><\/div>\n <div class=\"audio-player\" id=\"l4-audio-1\">\n <button class=\"play-btn\" onclick=\"toggleAudio('l4-audio-1')\"><svg width=\"13\" height=\"15\" viewBox=\"0 0 14 16\" fill=\"none\"><path d=\"M0 0L14 8L0 16V0Z\" fill=\"#431407\"\/><\/svg><\/button>\n <div class=\"audio-info\"><div class=\"audio-title\">Faut-il limiter les r\u00e9seaux sociaux ?<\/div><div class=\"audio-track\">D\u00e9bat \u00b7 Registre soutenu \u00b7 B1-B2<\/div>\n <div class=\"waveform\" id=\"l4-audio-1-wave\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"progress-bar\" id=\"l4-audio-1-bar\"><div class=\"progress-fill\" id=\"l4-audio-1-fill\"><\/div><\/div>\n <\/div>\n <div class=\"audio-time\" id=\"l4-audio-1-time\">0:00<\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\ud83d\udcdc Transcription<\/div>\n <div class=\"dialogue-wrap\">\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#ea580c\">\ud83e\uddd1<\/div><div><div class=\"speaker-name\">Alex<\/div><div class=\"line-fr\"><span class=\"hl\">\u00c0 mon avis<\/span>, il faut qu’on <span class=\"hl\">limite<\/span> les r\u00e9seaux sociaux pour les jeunes. <span class=\"hl\">Je pense que<\/span> c’est devenu dangereux.<\/div><div class=\"line-ro\">Dup\u0103 mine, trebuie s\u0103 limit\u0103m re\u021belele sociale pentru tineri. Cred c\u0103 a devenit periculos.<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#ca8a04\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">L\u00e9a<\/div><div class=\"line-fr\"><span class=\"hl\">Certes<\/span>, il y a des risques, <span class=\"hl\">cependant<\/span> je ne suis pas enti\u00e8rement d’accord. Ces plateformes permettent aussi de cr\u00e9er des liens.<\/div><div class=\"line-ro\">Desigur, exist\u0103 riscuri, cu toate acestea nu sunt complet de acord. Aceste platforme permit \u0219i crearea de leg\u0103turi.<\/div><\/div><\/div>\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#ea580c\">\ud83e\uddd1<\/div><div><div class=\"speaker-name\">Alex<\/div><div class=\"line-fr\"><span class=\"hl\">Il n’emp\u00eache que<\/span> les \u00e9tudes montrent une augmentation de l’anxi\u00e9t\u00e9 chez les adolescents. <span class=\"hl\">Par cons\u00e9quent<\/span>, je pense que il faut agir.<\/div><div class=\"line-ro\">Cu toate acestea, studiile arat\u0103 o cre\u0219tere a anxiet\u0103\u021bii la adolescen\u021bi. Prin urmare, cred c\u0103 trebuie s\u0103 ac\u021bion\u0103m.<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#ca8a04\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">L\u00e9a<\/div><div class=\"line-fr\"><span class=\"hl\">Je suis d’accord<\/span> sur ce point. <span class=\"hl\">En revanche<\/span>, la solution ne est peut-\u00eatre pas d’interdire, mais de \u00e9duquer.<\/div><div class=\"line-ro\">Sunt de acord pe acest punct. \u00cen schimb, solu\u021bia poate nu este s\u0103 interzicem, ci s\u0103 educ\u0103m.<\/div><\/div><\/div>\n <\/div>\n <button class=\"reveal-btn\" onclick=\"toggleReveal(this,'l4-d1')\">\u25b6 Analyse des connecteurs<\/button>\n <div class=\"correction-box\" id=\"l4-d1\"><strong>Certes… cependant<\/strong> = concesie elegant\u0103 \u00b7 <strong>Il n’emp\u00eache que<\/strong> = revenire la argument \u00b7 <strong>Par cons\u00e9quent<\/strong> = concluzie logic\u0103 \u00b7 <strong>En revanche<\/strong> = opozi\u021bie<\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s4','exercices','nav-4')\">Continuer : Exercices \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s4-exercices\">\n <div class=\"section-header\"><div class=\"section-num\">04 \u00b7 25 min<\/div><h2 class=\"section-title\">\u270f\ufe0f Exercices<\/h2><\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">01<\/div><div><div class=\"ex-type\">Choix multiple<\/div><div class=\"ex-question\">Indicatif ou Subjonctif ?<\/div><\/div><\/div>\n <div style=\"margin-bottom:1rem\"><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Je veux que tu ___ demain. \u00bb (venir)<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>viens<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>viennes<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>venez<\/div>\n <\/div>\n <\/div>\n <div><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Il est important que nous ___ prudents. \u00bb (\u00eatre)<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>sommes<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>soyons<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>\u00e9tions<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">02<\/div><div><div class=\"ex-type\">Drag & Drop \u00b7 Connecteurs<\/div><div class=\"ex-question\">Completeaz\u0103 cu conectorul potrivit<\/div><\/div><\/div>\n <div class=\"word-bank\" id=\"l4-wb\">\n <span class=\"chip\" draggable=\"true\" data-word=\"car\">car<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"donc\">donc<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"cependant\">cependant<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"en revanche\">en revanche<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"bien que\">bien que<\/span>\n <\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">1.<\/span><span>Il est absent <\/span><span class=\"drop-zone\" data-answer=\"car\" data-wb=\"l4-wb\"><\/span><span> il est malade. (cauza)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">2.<\/span><span>Il pleut, <\/span><span class=\"drop-zone\" data-answer=\"donc\" data-wb=\"l4-wb\"><\/span><span> nous restons \u00e0 la maison. (concluzie)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">3.<\/span><span>C’est beau, <\/span><span class=\"drop-zone\" data-answer=\"cependant\" data-wb=\"l4-wb\"><\/span><span> c’est trop cher. (opozi\u021bie)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">4.<\/span><span>Paris est cher. <\/span><span class=\"drop-zone\" data-answer=\"en revanche\" data-wb=\"l4-wb\"><\/span><span>, c’est magnifique. (contrast)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">5.<\/span><span><\/span><span class=\"drop-zone\" data-answer=\"bien que\" data-wb=\"l4-wb\"><\/span><span> ce soit difficile, je continuerai. (concesie)<\/span><\/div>\n <div style=\"display:flex;gap:0.5rem;margin-top:0.9rem\">\n <button class=\"btn btn-lesson\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"checkDnDById(['s4-exercices'],'l4-dnd-fb','l4-wb')\">\u2713 V\u00e9rifier<\/button>\n <button class=\"btn btn-ink\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"resetDnDById(['s4-exercices'],'l4-dnd-fb','l4-wb')\">\u21ba<\/button>\n <\/div>\n <div id=\"l4-dnd-fb\" style=\"margin-top:0.7rem;font-size:0.85rem;display:none\"><\/div>\n <\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">03<\/div><div><div class=\"ex-type\">Expression \u00e9crite<\/div><div class=\"ex-question\">D\u0103-\u021bi opinia pe o tem\u0103<\/div><div class=\"ex-instruction\">Scrie 5-6 propozi\u021bii folosind cel pu\u021bin 3 conectori<\/div><\/div><\/div>\n <div style=\"background:#ffedd5;padding:1rem;border-radius:10px;margin-bottom:0.8rem;font-size:0.9rem;font-style:italic\">\u00ab Faut-il interdire les voitures en centre-ville ? \u00bb (Ar trebui interzise ma\u0219inile \u00een centrul ora\u0219ului?)<\/div>\n <textarea style=\"width:100%;height:130px;border:2px solid var(--border);border-radius:10px;padding:0.8rem;font-family:'Nunito',sans-serif;font-size:0.88rem;outline:none;resize:vertical\" placeholder=\"\u00c0 mon avis... Certes... cependant... Par cons\u00e9quent...\"><\/textarea>\n <button class=\"reveal-btn\" style=\"margin-top:0.5rem\" onclick=\"toggleReveal(this,'l4-ex3-ans')\">\u25b6 Voir un exemple<\/button>\n <div class=\"correction-box\" id=\"l4-ex3-ans\">\u00c0 mon avis, il faudrait limiter la circulation en centre-ville car la pollution est un probl\u00e8me grave. Certes, cela poserait des difficult\u00e9s pour les commer\u00e7ants. Cependant, on pourrait d\u00e9velopper les transports en commun. Par cons\u00e9quent, je pense que c’est une mesure n\u00e9cessaire.<\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s4','bilan','nav-4')\">Continuer : Bilan \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s4-bilan\">\n <div class=\"section-header\"><div class=\"section-num\">05 \u00b7 5 min<\/div><h2 class=\"section-title\">\ud83c\udf1f Bilan<\/h2><\/div>\n <div class=\"plan-grid\">\n <div class=\"card\"><div class=\"card-label\">\u2b50 Auto-\u00e9valuation<\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je exprime mon opinion avec nuance<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je utilise les connecteurs logiques<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je forme le subjonctif correctement<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\" style=\"background:#ffedd5;border-color:#fdba74\"><div class=\"card-label\" style=\"color:#92400e\">\ud83d\udcdd Tema acas\u0103<\/div>\n <div style=\"font-size:0.85rem;color:#78350f;display:flex;flex-direction:column;gap:0.5rem\">\n <div>1. Scrie un paragraf de opinie de 8-10 propozi\u021bii<\/div>\n <div>2. Memoreaz\u0103 5 conectori \u0219i folosi\u021bi \u00eentr-o conversa\u021bie<\/div>\n <div>3. Conjug\u0103: vouloir, aller, faire la subjonctif<\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#1e293b,#334155);color:white;border:none\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">\ud83c\udfaf Nivelul urm\u0103tor<\/div>\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.1rem;font-weight:800;color:#fbbf24\">B2 – C1 disponibil!<\/div>\n <div style=\"font-size:0.8rem;color:rgba(255,255,255,0.7);margin-top:0.2rem\">La communication persuasive \u00b7 DALF C1<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div style=\"text-align:center;padding:2rem 0\">\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#ea580c\">F\u00e9licitations ! \ud83c\udf89<\/div>\n <div style=\"color:var(--muted)\">Ai terminat toate cele 4 lec\u021bii! Bravo!<\/div>\n <button class=\"btn btn-ink\" style=\"margin-top:1rem\" onclick=\"goHome()\">\u21a9 \u00cenapoi la toate lec\u021biile<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/\/ \u2500\u2500 Navigation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction goHome() {\n document.getElementById('home').style.display = 'block';\n document.querySelectorAll('.lesson-screen').forEach(l => l.classList.remove('active'));\n window.scrollTo({top:0,behavior:'smooth'});\n}\nfunction openLesson(n) {\n document.getElementById('home').style.display = 'none';\n document.querySelectorAll('.lesson-screen').forEach(l => l.classList.remove('active'));\n document.getElementById('lesson-' + n).classList.add('active');\n window.scrollTo({top:0,behavior:'smooth'});\n}\nfunction showSec(container, section, navId) {\n document.getElementById(container).querySelectorAll('.section').forEach(s => s.classList.remove('active'));\n const target = document.getElementById(container + '-' + section);\n if (target) target.classList.add('active');\n const nav = document.getElementById(navId);\n nav.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));\n const idx = ['plan','vocabulaire','grammaire','dialogue','exercices','bilan'].indexOf(section);\n nav.querySelectorAll('.nav-btn')[idx]?.classList.add('active');\n const bb = document.querySelector('.lesson-screen.active .back-bar');\n if (bb) window.scrollTo({top: bb.getBoundingClientRect().bottom + window.scrollY, behavior:'smooth'});\n}\n\n\/\/ \u2500\u2500 Reveal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction toggleReveal(btn, id) {\n const box = document.getElementById(id);\n if (!box) return;\n const open = box.classList.toggle('show');\n btn.innerHTML = (open ? '\u25bc' : '\u25b6') + btn.innerHTML.slice(1);\n}\n\n\/\/ \u2500\u2500 MCQ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction selectMCQ(el, isCorrect) {\n const group = el.closest('.mcq-options');\n group.querySelectorAll('.mcq-option').forEach(o => { o.classList.remove('correct','wrong'); o.style.pointerEvents='none'; });\n el.classList.add(isCorrect ? 'correct' : 'wrong');\n if (!isCorrect) group.querySelectorAll('.mcq-option').forEach(o => { if (o.getAttribute('onclick')?.includes('true')) o.classList.add('correct'); });\n}\n\n\/\/ \u2500\u2500 Matching \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst matchStates = {};\nfunction doMatch(el, groupId, fbId) {\n if (el.classList.contains('matched-ok')) return;\n if (!matchStates[groupId]) matchStates[groupId] = null;\n const prev = matchStates[groupId];\n if (!prev) {\n document.querySelectorAll(`[onclick*=\"${groupId}\"]`).forEach(m => m.classList.remove('selected'));\n el.classList.add('selected'); matchStates[groupId] = el;\n } else {\n if (prev === el) { el.classList.remove('selected'); matchStates[groupId] = null; return; }\n if (prev.dataset.side === el.dataset.side) {\n document.querySelectorAll(`[onclick*=\"${groupId}\"]`).forEach(m => m.classList.remove('selected'));\n el.classList.add('selected'); matchStates[groupId] = el; return;\n }\n if (prev.dataset.id === el.dataset.id) {\n [prev, el].forEach(m => { m.classList.remove('selected'); m.classList.add('matched-ok'); m.style.pointerEvents='none'; });\n const total = document.querySelectorAll(`[onclick*=\"${groupId}\"][data-side=\"fr\"]`).length;\n const done = document.querySelectorAll(`[onclick*=\"${groupId}\"].matched-ok`).length \/ 2;\n if (done === total) { const fb=document.getElementById(fbId); if(fb){fb.style.display='block';fb.innerHTML='<span style=\"color:#065f46;font-weight:700\">\u2713 Parfait ! \ud83c\udf89<\/span>';} }\n } else {\n [prev, el].forEach(m => { m.classList.add('matched-wrong'); setTimeout(()=>m.classList.remove('matched-wrong','selected'),600); });\n }\n matchStates[groupId] = null;\n }\n}\nfunction resetMatch(groupId, fbId) {\n document.querySelectorAll(`[onclick*=\"${groupId}\"]`).forEach(m => { m.classList.remove('selected','matched-ok','matched-wrong'); m.style.pointerEvents=''; });\n const fb=document.getElementById(fbId); if(fb) fb.style.display='none';\n matchStates[groupId] = null;\n}\n\n\/\/ \u2500\u2500 Drag & Drop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet selectedChip = null;\nfunction placeWord(word, zone) {\n if (zone.dataset.current) returnChip(zone);\n const wbId = zone.dataset.wb;\n const chip = wbId ? document.querySelector(`#${wbId} .chip[data-word=\"${CSS.escape(word)}\"]`)\n : [...document.querySelectorAll('.chip')].find(c => c.dataset.word === word);\n if (chip) chip.classList.add('used');\n zone.textContent = word; zone.classList.add('filled'); zone.classList.remove('correct','wrong');\n zone.dataset.current = word;\n}\nfunction returnChip(zone) {\n const word = zone.dataset.current; if (!word) return;\n const wbId = zone.dataset.wb;\n const chip = wbId ? document.querySelector(`#${wbId} .chip[data-word=\"${CSS.escape(word)}\"]`)\n : [...document.querySelectorAll('.chip')].find(c => c.dataset.word === word);\n if (chip) chip.classList.remove('used');\n}\nfunction checkDnDById(sids, fbId, wbId) {\n let zones = []; sids.forEach(sid => document.querySelectorAll(`#${sid} .drop-zone`).forEach(z => zones.push(z)));\n let correct = 0;\n zones.forEach(zone => {\n if (!zone.dataset.current) return;\n const ok = zone.dataset.current.toLowerCase() === zone.dataset.answer.toLowerCase();\n zone.classList.remove('correct','wrong','filled'); zone.classList.add(ok?'correct':'wrong');\n if (ok) correct++;\n });\n const fb=document.getElementById(fbId); if(!fb) return; fb.style.display='block';\n fb.innerHTML = correct===zones.length ? `<span style=\"color:#065f46;font-weight:700\">\u2713 Parfait ! ${correct}\/${zones.length} \ud83c\udf89<\/span>` : `<span style=\"color:#be185d\">${correct}\/${zones.length} - R\u00e9essaye les cases roses !<\/span>`;\n}\nfunction resetDnDById(sids, fbId, wbId) {\n let zones=[]; sids.forEach(sid => document.querySelectorAll(`#${sid} .drop-zone`).forEach(z=>zones.push(z)));\n zones.forEach(z => { returnChip(z); z.textContent=''; z.classList.remove('filled','correct','wrong'); delete z.dataset.current; });\n document.querySelectorAll(`#${wbId} .chip`).forEach(c=>c.classList.remove('used','selected'));\n const fb=document.getElementById(fbId); if(fb) fb.style.display='none'; selectedChip=null;\n}\nfunction checkDnD(sel,fbId,wbId){\n const zones=document.querySelectorAll(sel); let correct=0;\n zones.forEach(zone=>{ if(!zone.dataset.current)return; const ok=zone.dataset.current.toLowerCase()===zone.dataset.answer.toLowerCase(); zone.classList.remove('correct','wrong','filled'); zone.classList.add(ok?'correct':'wrong'); if(ok)correct++; });\n const fb=document.getElementById(fbId); if(!fb)return; fb.style.display='block';\n fb.innerHTML=correct===zones.length?`<span style=\"color:#065f46;font-weight:700\">\u2713 Parfait ! ${correct}\/${zones.length} \ud83c\udf89<\/span>`:`<span style=\"color:#be185d\">${correct}\/${zones.length} - R\u00e9essaye !<\/span>`;\n}\nfunction resetDnD(sel,fbId,wbId){\n document.querySelectorAll(sel).forEach(z=>{returnChip(z);z.textContent='';z.classList.remove('filled','correct','wrong');delete z.dataset.current;});\n document.querySelectorAll(`#${wbId} .chip`).forEach(c=>c.classList.remove('used','selected'));\n const fb=document.getElementById(fbId); if(fb)fb.style.display='none'; selectedChip=null;\n}\n\n\/\/ \u2500\u2500 Stars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction rateStar(el, val) {\n el.closest('.skill-row').querySelectorAll('.star').forEach((s,i)=>s.classList.toggle('lit',i<val));\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ \u2500\u2500 TTS ENGINE \u2014 voce francez\u0103 garantat\u0103 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n\/\/ Dialoguri corecte \u2014 text francez autentic\nconst dialogueTexts = {\n \"l1-audio-1\": [\n \"Bonjour, Monsieur Dupont !\",\n \"Bonjour, Marie ! Comment allez-vous ?\",\n \"Je vais bien, merci ! Et vous ?\",\n \"Tr\u00e8s bien, merci. Au revoir, Marie !\",\n \"Au revoir, Monsieur !\"\n ],\n \"l1-audio-2\": [\n \"Salut, Emma !\",\n \"Salut ! \u00c7a va ?\",\n \"\u00c7a va bien ! Et toi ?\",\n \"Comme ci comme \u00e7a... \u00c0 bient\u00f4t !\",\n \"Oui, \u00e0 demain !\"\n ],\n \"l2-audio-1\": [\n \"Bonjour ! Je mappelle Sophie Martin. Jay vingt-trois ans.\",\n \"Je suis fran\u00e7aise, jabite \u00e0 Lyon. Je suis \u00e9tudiante en m\u00e9decine.\",\n \"Jaime lire, voyager et \u00e9couter de la musique. Enchant\u00e9 de vous conna\u00eetre !\"\n ],\n \"l3-audio-1\": [\n \"Quand j\u00e9tais enfant, je me levais toujours \u00e0 six heures. Je prenais le petit-d\u00e9jeuner avec ma famille.\",\n \"Et maintenant, comment est ta routine ?\",\n \"Maintenant je me l\u00e8ve souvent \u00e0 huit heures. Je travaille \u00e0 domicile, donc sest plus flexible. Mais je ne fais jamais de sport, sest dommage !\",\n \"Moi, je faisais du yoga tous les matins avant. Maintenant je pr\u00e9f\u00e8re courir. Sest mieux pour moi !\"\n ],\n \"l4-audio-1\": [\n \"\u00c0 mon avis, il faut kon limite les r\u00e9seaux sociaux pour les jeunes. Je pense que sest devenu dangereux.\",\n \"Certes, il y a des risques, cependant je ne suis pas enti\u00e8rement dacord. Ces plateformes permettent aussi de cr\u00e9er des liens.\",\n \"Il nemp\u00eache que les \u00e9tudes montrent une augmentation de lanxi\u00e9t\u00e9 chez les adolescents. Par cons\u00e9quent, je pense kil faut agir.\",\n \"Je suis dacord sur ce point. En revanche, la solution nest peut-\u00eatre pas dinterdire, mais d\u00e9duquer.\"\n ]\n};\n\nconst playIcon = '<svg width=\"13\" height=\"15\" viewBox=\"0 0 14 16\" fill=\"none\"><path d=\"M0 0L14 8L0 16V0Z\" fill=\"currentColor\"\/><\/svg>';\nconst pauseIcon = '<svg width=\"11\" height=\"15\" viewBox=\"0 0 12 16\" fill=\"none\"><rect x=\"0\" y=\"0\" width=\"4\" height=\"16\" fill=\"currentColor\"\/><rect x=\"8\" y=\"0\" width=\"4\" height=\"16\" fill=\"currentColor\"\/><\/svg>';\n\n\/\/ Cache vocea francez\u0103 \u2014 o g\u0103sim o singur\u0103 dat\u0103 \u0219i o re\u021binem\nlet frVoiceCache = null;\nlet voicesLoaded = false;\n\nfunction loadVoices() {\n const all = window.speechSynthesis.getVoices();\n if (all.length === 0) return null;\n voicesLoaded = true;\n \/\/ Prefer\u0103m voci native franceze \u00een ordinea calit\u0103\u021bii\n const priority = ['Google fran\u00e7ais', 'Google French', 'Microsoft Julie', 'Microsoft Henri',\n 'Amelie', 'Thomas', 'Audrey', 'Virginie', 'Nicolas'];\n for (const name of priority) {\n const v = all.find(v => v.name.includes(name));\n if (v) { frVoiceCache = v; return v; }\n }\n \/\/ Fallback: orice voce fr-FR sau fr-*\n frVoiceCache = all.find(v => v.lang === 'fr-FR') || all.find(v => v.lang.startsWith('fr')) || null;\n return frVoiceCache;\n}\n\n\/\/ Preload imediat \u0219i la schimbare\nif (window.speechSynthesis) {\n loadVoices();\n window.speechSynthesis.onvoiceschanged = () => { frVoiceCache = null; loadVoices(); };\n}\n\nfunction getFRVoice() {\n if (frVoiceCache) return frVoiceCache;\n return loadVoices();\n}\n\n\/\/ Construim un utterance corect cu voce francez\u0103\n\/\/ normalizeFR removed \u2014 phonetic text stored directly\n\n\nfunction makeFRUtterance(text, pitchMod) {\n const voices = window.speechSynthesis.getVoices();\n const v = voices.find(v => v.lang === 'fr-FR')\n || voices.find(v => v.lang === 'fr-BE')\n || voices.find(v => v.lang === 'fr-CA')\n || voices.find(v => v.lang === 'fr-CH')\n || voices.find(v => v.lang.startsWith('fr'));\n const utt = new SpeechSynthesisUtterance(text);\n utt.lang = 'fr-FR'; utt.rate = 0.82; utt.pitch = pitchMod || 1.0;\n if (v) utt.voice = v;\n return utt;\n}\n\n\/\/ \u2500\u2500 Butoane \ud83d\udd0a vocabular \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction speakFR(text) {\n if (!window.speechSynthesis) return;\n window.speechSynthesis.cancel();\n\n function trySpeak(attempts) {\n const voices = window.speechSynthesis.getVoices();\n const fr = voices.find(v => v.lang === 'fr-FR')\n || voices.find(v => v.lang === 'fr-BE')\n || voices.find(v => v.lang === 'fr-CA')\n || voices.find(v => v.lang === 'fr-CH')\n || voices.find(v => v.lang.startsWith('fr'));\n if (!fr && attempts < 20) { setTimeout(() => trySpeak(attempts + 1), 150); return; }\n const utt = new SpeechSynthesisUtterance(text);\n utt.lang = 'fr-FR'; utt.rate = 0.82; utt.pitch = 1.0;\n if (fr) utt.voice = fr;\n window.speechSynthesis.speak(utt);\n }\n trySpeak(0);\n}\n\n\/\/ \u2500\u2500 Playere dialogue \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst ttsStates = {};\nconst allAudioIds = ['l1-audio-1','l1-audio-2','l2-audio-1','l3-audio-1','l4-audio-1'];\n\nfunction stopPlayer(id) {\n if (!ttsStates[id]) return;\n ttsStates[id].playing = false;\n const btn = document.querySelector('#' + id + ' .play-btn');\n if (btn) btn.innerHTML = playIcon;\n document.getElementById(id + '-wave')?.classList.remove('playing');\n const fill = document.getElementById(id + '-fill'); if (fill) fill.style.width = '0%';\n const time = document.getElementById(id + '-time'); if (time) time.textContent = '0:00';\n}\n\nfunction toggleAudio(id) {\n if (!window.speechSynthesis) { alert('\u00cencearc\u0103 Chrome sau Edge pentru audio.'); return; }\n\n \/\/ Dac\u0103 ruleaz\u0103 \u2014 stop\n if (ttsStates[id] && ttsStates[id].playing) {\n window.speechSynthesis.cancel();\n stopPlayer(id);\n return;\n }\n\n \/\/ Opre\u0219te tot restul\n window.speechSynthesis.cancel();\n allAudioIds.forEach(oid => { if (oid !== id) stopPlayer(oid); });\n\n const lines = dialogueTexts[id];\n if (!lines || !lines.length) return;\n\n const btn = document.querySelector('#' + id + ' .play-btn');\n const wave = document.getElementById(id + '-wave');\n const fill = document.getElementById(id + '-fill');\n const time = document.getElementById(id + '-time');\n\n ttsStates[id] = { playing: true };\n btn.innerHTML = pauseIcon;\n wave?.classList.add('playing');\n\n function speakLine(idx) {\n if (!ttsStates[id]?.playing || idx >= lines.length) {\n stopPlayer(id); return;\n }\n\n const utt = makeFRUtterance(lines[idx], idx % 2 === 0 ? 1.05 : 0.9);\n\n if (fill) fill.style.width = ((idx + 1) \/ lines.length * 100) + '%';\n if (time) time.textContent = (idx + 1) + ' \/ ' + lines.length;\n\n utt.onend = () => { if (ttsStates[id]?.playing) setTimeout(() => speakLine(idx + 1), 400); };\n utt.onerror = (e) => { console.warn('TTS error', e); if (ttsStates[id]?.playing) setTimeout(() => speakLine(idx + 1), 200); };\n\n window.speechSynthesis.speak(utt);\n }\n\n \/\/ A\u0219tept\u0103m vocile dac\u0103 nu sunt \u00eenc\u0103 gata\n function startWhenReady() {\n if (voicesLoaded || loadVoices()) {\n setTimeout(() => speakLine(0), 100);\n } else {\n let attempts = 0;\n const wait = setInterval(() => {\n attempts++;\n if (loadVoices() || attempts > 30) {\n clearInterval(wait);\n setTimeout(() => speakLine(0), 100);\n }\n }, 100);\n }\n }\n startWhenReady();\n}\n\n\/\/ \u2500\u2500 DOMContentLoaded \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\ndocument.addEventListener('DOMContentLoaded', () => {\n \/\/ Waveform bar heights\n const barH = [6,14,10,18,8,16,12,20,7,15,11,19,9,17,13,18,6,14,10,16,8,12,20,7,15,11,19,9,17,13];\n document.querySelectorAll('.waveform').forEach(wf => wf.querySelectorAll('span').forEach((s,i) => s.style.height = barH[i%barH.length]+'px'));\n\n \/\/ Drag & Drop chips\n document.querySelectorAll('.chip').forEach(chip => {\n chip.addEventListener('dragstart', e => e.dataTransfer.setData('text\/plain', chip.dataset.word));\n chip.addEventListener('click', () => {\n if (chip.classList.contains('used')) return;\n document.querySelectorAll('.chip').forEach(c => c.classList.remove('selected'));\n if (selectedChip === chip) { selectedChip = null; return; }\n selectedChip = chip; chip.classList.add('selected');\n });\n });\n document.querySelectorAll('.drop-zone').forEach(zone => {\n zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('drag-over'); });\n zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));\n zone.addEventListener('drop', e => { e.preventDefault(); zone.classList.remove('drag-over'); placeWord(e.dataTransfer.getData('text\/plain'), zone); });\n zone.addEventListener('click', () => {\n if (selectedChip) {\n if (zone.dataset.current) returnChip(zone);\n placeWord(selectedChip.dataset.word, zone);\n selectedChip.classList.remove('selected'); selectedChip = null;\n } else if (zone.dataset.current) {\n returnChip(zone); zone.textContent=''; zone.classList.remove('filled','correct','wrong'); delete zone.dataset.current;\n }\n });\n });\n\n \/\/ Progress bar click (nu mai avem audio HTML5, deci ignor\u0103m)\n});\n<\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Fran\u00e7ais \u00b7 Cours complet Pre A1 \u2192 B2 Cours de fran\u00e7ais \u00b7 Pre A1 \u2192 B2 Apprenons le Fran\u00e7ais ! S\u0103 \u00eenv\u0103\u021b\u0103m franceza \u00eempreun\u0103 \u00b7 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"pmpro_default_level":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-1644","page","type-page","status-publish","hentry","pmpro-has-access"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1644"}],"version-history":[{"count":1,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1644\/revisions"}],"predecessor-version":[{"id":1645,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1644\/revisions\/1645"}],"wp:attachment":[{"href":"https:\/\/geoisteaching.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1644,"date":"2026-04-25T04:54:55","date_gmt":"2026-04-25T04:54:55","guid":{"rendered":"https:\/\/geoisteaching.com\/?page_id=1644"},"modified":"2026-04-25T04:54:59","modified_gmt":"2026-04-25T04:54:59","slug":"pre-a1","status":"publish","type":"page","link":"https:\/\/geoisteaching.com\/?page_id=1644","title":{"rendered":"Pre A1"},"content":{"rendered":"\n\n\n\n\nFran\u00e7ais \u00b7 Cours complet Pre A1 \u2192 B2<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:wght@400;500;700&family=DM+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n \/* \u2500\u2500 Palette B2-C1 \u2014 appliqu\u00e9e \u00e0 tout le cours \u2500\u2500 *\/\n --ink: #1a1209;\n --cream: #f7f2e8;\n --gold: #c8963e;\n --rouge: #b83232;\n --sage: #4a6741;\n --blue: #2c4a7c;\n --light: #fdf9f2;\n --border: #e2d9c8;\n --muted: #7a6e60;\n --white: #ffffff;\n\n \/* Accents par niveau \u2014 tous dans la m\u00eame palette chaude *\/\n --c1-bg: #f0ebe0; --c1-main: #2c4a7c; --c1-dark: #1a2d4a; --c1-acc: #c8963e; --c1-light: #c8d8f0;\n --c2-bg: #edf2ec; --c2-main: #4a6741; --c2-dark: #2d4028; --c2-acc: #c8963e; --c2-light: #b8d4b4;\n --c3-bg: #f2ede8; --c3-main: #7c4a2c; --c3-dark: #4a2c1a; --c3-acc: #c8963e; --c3-light: #d4b8a0;\n --c4-bg: #f0e8e8; --c4-main: #b83232; --c4-dark: #7c1a1a; --c4-acc: #c8963e; --c4-light: #d4a0a0;\n}\n* { box-sizing: border-box; margin: 0; padding: 0; }\nbody { font-family: 'DM Sans', sans-serif; background: var(--light); color: var(--ink); font-size: 16px; line-height: 1.7; }\n@media (min-width: 900px) { body { font-size: 18px; } }\n@media (min-width: 1200px) { body { font-size: 20px; } }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HOME SCREEN \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#home { display: block; }\n.home-header {\n background: var(--ink);\n color: white; padding: 3rem 4vw 5rem; text-align: center; position: relative; overflow: hidden;\n}\n.home-header::before {\n content: ''; position: absolute; inset: 0;\n background: repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(255,255,255,0.02) 40px,rgba(255,255,255,0.02) 80px);\n}\n.home-badge {\n display: inline-block; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7);\n font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;\n padding: 0.3rem 1rem; margin-bottom: 1rem; font-family: 'DM Mono', monospace;\n border-radius: 100px; position: relative;\n}\n.home-header h1 {\n font-family: 'Playfair Display', serif; font-size: clamp(2rem,5vw,3.8rem);\n font-weight: 700; line-height: 1.1; margin-bottom: 0.5rem; position: relative;\n color: white;\n}\n.home-header h1 em { color: #fbbf24; font-style: italic; }\n.home-sub { color: rgba(255,255,255,0.6); font-size: 0.95rem; position: relative; }\n.home-wave { position: absolute; bottom: -1px; left: 0; right: 0; line-height: 0; }\n\n.home-grid {\n display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem; padding: 3rem 4vw;\n}\n.lesson-card {\n border-radius: 4px; padding: 2rem; cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n border: 2px solid transparent; position: relative; overflow: hidden;\n text-decoration: none; display: block;\n}\n.lesson-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }\n.lesson-card::after {\n content: '\u2192'; position: absolute; bottom: 1.5rem; right: 1.5rem;\n font-size: 1.4rem; opacity: 0.5; transition: opacity 0.2s, right 0.2s;\n}\n.lesson-card:hover::after { opacity: 1; right: 1.2rem; }\n.lc-level { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.4rem; opacity: 0.65; }\n.lc-title { font-family: 'Baloo 2', sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 0.3rem; }\n.lc-theme { font-size: 0.85rem; opacity: 0.75; margin-bottom: 1rem; }\n.lc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }\n.lc-tag { padding: 0.2rem 0.6rem; border-radius: 100px; font-size: 0.68rem; font-weight: 700; font-family: 'DM Mono', monospace; background: rgba(255,255,255,0.3); }\n.lc-emoji { font-size: 2.5rem; margin-bottom: 0.8rem; display: block; }\n.lc-duration { position: absolute; top: 1.2rem; right: 1.2rem; font-family: 'DM Mono', monospace; font-size: 0.65rem; opacity: 0.6; }\n\n.lc1 { background: linear-gradient(135deg, #e8eef8, #c8d8f0); border-color: #a0b8d8; color: var(--c1-dark); }\n.lc2 { background: linear-gradient(135deg, #e8f0e8, #b8d4b4); border-color: #90b890; color: var(--c2-dark); }\n.lc3 { background: linear-gradient(135deg, #f2ece4, #d8c0a8); border-color: #c0a080; color: var(--c3-dark); }\n.lc4 { background: linear-gradient(135deg, #f4e8e8, #d8a8a8); border-color: #c08080; color: var(--c4-dark); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LESSON WRAPPER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.lesson-screen { display: none; }\n.lesson-screen.active { display: block; }\n\n\/* \u2500\u2500 Back button \u2500\u2500 *\/\n.back-bar {\n padding: 0.8rem 4vw; display: flex; align-items: center; gap: 0.8rem;\n border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 200;\n background: var(--cream);\n}\n.back-btn {\n background: none; border: 1px solid var(--border); border-radius: 2px;\n padding: 0.35rem 1rem; font-family: 'Nunito', sans-serif; font-size: 0.82rem;\n font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 0.4rem;\n transition: background 0.15s;\n}\n.back-btn:hover { background: #f1f5f9; }\n.back-breadcrumb { font-size: 0.8rem; color: var(--muted); }\n\n\/* \u2500\u2500 Lesson NAV \u2500\u2500 *\/\n.lesson-nav {\n border-bottom: 2px solid var(--border); padding: 0 2vw;\n display: flex; overflow-x: auto; gap: 0; scrollbar-width: none;\n background: white;\n}\n.lesson-nav::-webkit-scrollbar { display: none; }\n.nav-btn {\n padding: 0.9rem 1rem; border: none; background: none; cursor: pointer;\n font-family: 'Nunito', sans-serif; font-size: 0.82rem; font-weight: 700;\n color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px;\n white-space: nowrap; transition: all 0.2s;\n}\n.nav-btn:hover { color: var(--ink); }\n\n\/* \u2500\u2500 Common section styles \u2500\u2500 *\/\n.section { display: none; padding: 2rem 4vw; }\n.section.active { display: block; }\n.section-header { margin-bottom: 1.8rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border); }\n.section-num { font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.3rem; }\n.section-title { font-family: 'Baloo 2', sans-serif; font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 800; }\n.section-desc { color: var(--muted); font-size: 0.88rem; margin-top: 0.3rem; }\n\n.card { background: white; border: 1px solid var(--border); border-radius: 4px; padding: 1.4rem; margin-bottom: 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }\n.card-label { font-size: 0.66rem; font-family: 'DM Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }\n.tag { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 100px; font-size: 0.68rem; font-weight: 700; font-family: 'DM Mono', monospace; }\n\n.btn { display: inline-block; padding: 0.65rem 1.6rem; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 600; border-radius: 2px; transition: transform 0.15s, box-shadow 0.15s; margin-top: 0.5rem; }\n.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }\n.btn-ink { background: var(--ink); color: white; }\n\n.reveal-btn { border: none; padding: 0.4rem 1rem; border-radius: 2px; font-family: 'Nunito', sans-serif; font-size: 0.78rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; transition: opacity 0.15s; }\n.correction-box { display: none; border-left: 4px solid; border-radius: 0; padding: 0.8rem 1.1rem; margin-top: 0.7rem; font-size: 0.85rem; }\n.correction-box.show { display: block; }\n\n.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }\n@media (max-width: 700px) { .plan-grid { grid-template-columns: 1fr; } }\n\n.timeline { position: relative; padding-left: 2rem; }\n.timeline::before { content: ''; position: absolute; left: 0.5rem; top: 0.5rem; bottom: 0.5rem; width: 2px; border-radius: 2px; }\n.timeline-item { position: relative; margin-bottom: 1.1rem; }\n.timeline-item::before { content: ''; position: absolute; left: -1.6rem; top: 0.5rem; width: 10px; height: 10px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px; }\n.tl-time { font-family: 'DM Mono', monospace; font-size: 0.66rem; margin-bottom: 0.1rem; }\n.tl-title { font-weight: 700; font-size: 0.9rem; }\n.tl-desc { font-size: 0.76rem; color: var(--muted); }\n\n.dialogue-wrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }\n.dialogue-line { display: flex; gap: 0.8rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); align-items: flex-start; }\n.dialogue-line:last-child { border-bottom: none; }\n.dialogue-line.a { background: #f0f9ff; }\n.dialogue-line.b { background: #fff7ed; }\n.dialogue-line.c { background: #f5f3ff; }\n.speaker-bubble { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }\n.speaker-name { font-family: 'DM Mono', monospace; font-size: 0.62rem; color: var(--muted); text-transform: uppercase; margin-bottom: 0.1rem; }\n.line-fr { font-weight: 600; font-size: 0.92rem; }\n.line-ro { font-size: 0.76rem; color: var(--muted); font-style: italic; }\n\n.audio-player { color: white; padding: 1rem 1.3rem; display: flex; align-items: center; gap: 1rem; border-radius: 12px; margin: 0.8rem 0; }\n.play-btn { width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.15s; }\n.play-btn:hover { transform: scale(1.1); }\n.audio-info { flex: 1; }\n.audio-title { font-size: 0.85rem; font-weight: 700; }\n.audio-track { font-size: 0.7rem; color: rgba(255,255,255,0.5); font-family: 'DM Mono', monospace; }\n.progress-bar { height: 4px; background: rgba(255,255,255,0.15); margin-top: 0.5rem; border-radius: 4px; cursor: pointer; }\n.progress-fill { height: 100%; width: 0%; border-radius: 4px; transition: width 0.1s linear; }\n.audio-time { font-family: 'DM Mono', monospace; font-size: 0.66rem; color: rgba(255,255,255,0.5); white-space: nowrap; }\n.waveform { display: flex; align-items: center; gap: 2px; height: 20px; margin: 0.4rem 0 0.2rem; }\n.waveform span { display: inline-block; width: 3px; border-radius: 2px; background: rgba(255,255,255,0.2); }\n.waveform.playing span { animation: wave-bounce 1s ease-in-out infinite; }\n.waveform.playing span:nth-child(2n) { animation-delay: 0.1s; }\n.waveform.playing span:nth-child(3n) { animation-delay: 0.2s; }\n.waveform.playing span:nth-child(4n) { animation-delay: 0.3s; }\n@keyframes wave-bounce { 0%,100%{height:4px} 50%{height:18px} }\n\n.exercise-block { background: white; border-radius: 4px; padding: 1.4rem; margin-bottom: 1.2rem; border: 1px solid var(--border); }\n.ex-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }\n.ex-num { width: 34px; height: 34px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-family: 'DM Mono', monospace; font-size: 0.78rem; flex-shrink: 0; }\n.ex-type { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }\n.ex-question { font-family: 'Baloo 2', sans-serif; font-size: 0.98rem; font-weight: 700; }\n.ex-instruction { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }\n\n.mcq-options { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.8rem 0; }\n.mcq-option { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 1rem; border: 2px solid var(--border); border-radius: 2px; cursor: pointer; transition: all 0.15s; font-size: 0.88rem; }\n.mcq-option:hover { border-color: #94a3b8; background: var(--light); }\n.mcq-option.correct { border-color: #10b981; background: #d1fae5; }\n.mcq-option.wrong { border-color: #f43f5e; background: #ffe4e6; }\n.opt-letter { width: 26px; height: 26px; border: 2px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-family: 'DM Mono', monospace; flex-shrink: 0; }\n\n.word-bank { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.9rem; border: 2px dashed; border-radius: 2px; margin: 0.9rem 0; min-height: 50px; }\n.chip { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; color: white; font-family: 'DM Mono', monospace; font-size: 0.78rem; cursor: grab; border-radius: 2px; user-select: none; transition: opacity 0.15s, transform 0.1s; white-space: nowrap; }\n.chip:active { cursor: grabbing; transform: scale(1.05); }\n.chip.used { opacity: 0.25; pointer-events: none; }\n.chip.selected { outline: 3px solid #fbbf24; transform: scale(1.05); }\n.fill-sentence-interactive { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }\n.fill-sentence-interactive:last-of-type { border-bottom: none; }\n.sent-num { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--muted); min-width: 1.2rem; }\n.drop-zone { display: inline-flex; align-items: center; justify-content: center; min-width: 100px; height: 32px; border: 2px dashed var(--border); border-radius: 2px; padding: 0 0.5rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--ink); background: var(--light); }\n.drop-zone.drag-over { border-color: #3b82f6; background: #dbeafe; }\n.drop-zone.filled { border-style: solid; }\n.drop-zone.correct { border-color: #10b981 !important; background: #10b981 !important; color: white !important; }\n.drop-zone.wrong { border-color: #f43f5e !important; background: #f43f5e !important; color: white !important; animation: shake 0.3s ease; }\n@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }\n\n.match-item { padding: 0.65rem 1rem; border-radius: 2px; border: 2px solid var(--border); cursor: pointer; font-size: 0.85rem; font-weight: 600; text-align: center; transition: all 0.15s; background: white; }\n.match-item:hover { border-color: #94a3b8; background: var(--light); }\n.match-item.selected { border-color: #3b82f6; background: #3b82f6; color: white; }\n.match-item.matched-ok { border-color: #10b981; background: #d1fae5; color: #065f46; cursor: default; }\n.match-item.matched-wrong { border-color: #f43f5e; background: #ffe4e6; animation: shake 0.3s ease; }\n\n.write-input { width: 100%; border: 2px solid var(--border); border-radius: 2px; padding: 0.6rem 0.9rem; font-family: 'Nunito', sans-serif; font-size: 0.88rem; outline: none; transition: border-color 0.2s; background: white; color: var(--ink); }\n.write-input:focus { border-color: #3b82f6; }\n\n.skill-row { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }\n.skill-row:last-child { border-bottom: none; }\n.skill-label { flex: 1; font-size: 0.88rem; font-weight: 600; }\n.star { font-size: 1.1rem; cursor: pointer; transition: transform 0.1s; opacity: 0.2; }\n.star.lit { opacity: 1; }\n.star:hover { transform: scale(1.2); }\n\n\/* SAL cards (Pre A1) *\/\n.sal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 0.9rem; margin: 1rem 0; }\n.sal-card { border-radius: 4px; padding: 1.1rem; border: 2px solid transparent; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }\n.sal-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }\n.sal-icon { font-size: 1.8rem; margin-bottom: 0.4rem; }\n.sal-fr { font-family: 'Times New Roman', Times, serif; font-size: 1.1rem; font-weight: 700; }\n.sal-ro { font-size: 0.76rem; color: var(--muted); font-style: italic; }\n.sal-ctx { font-size: 0.72rem; margin-top: 0.3rem; opacity: 0.7; }\n.speak-btn { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0.2rem 0.3rem; border-radius: 6px; transition: transform 0.15s; display: inline-block; margin-top: 0.2rem; }\n.speak-btn:hover { transform: scale(1.2); }\n.speak-btn.speaking { animation: pulse-speak 0.6s ease infinite alternate; }\n@keyframes pulse-speak { from{transform:scale(1)} to{transform:scale(1.3)} }\n\n\/* Vocab grid (A1+ lessons) *\/\n.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 0.9rem; margin: 1rem 0; }\n.vocab-card { border: 1px solid var(--border); border-radius: 4px; padding: 1rem; background: white; display: flex; flex-direction: column; gap: 0.2rem; }\n.vocab-cat { display: inline-block; align-self: flex-start; font-size: 0.58rem; font-family: 'DM Mono', monospace; background: #f1f5f9; padding: 0.12rem 0.4rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.2rem; border-radius: 4px; }\n.vocab-fr { font-family: 'Times New Roman', Times, serif; font-size: 1rem; font-style: italic; }\n.vocab-ro { font-size: 0.78rem; color: #10b981; font-weight: 600; }\n.vocab-ex { font-size: 0.76rem; color: var(--muted); border-top: 1px solid var(--border); margin-top: 0.4rem; padding-top: 0.4rem; }\n.hl { background: #fef3c7; padding: 0.05rem 0.25rem; border-radius: 3px; font-weight: 700; }\n\n\/* grammar rule box *\/\n.rule-box { border-radius: 12px; padding: 1.1rem 1.3rem; margin: 0.8rem 0; border-left: 4px solid; }\n.rule-title { font-family: 'DM Mono', monospace; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }\n.conj-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }\n.conj-table td { padding: 0.35rem 0.6rem; border: 1px solid var(--border); }\n.conj-table td:first-child { font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--muted); width: 35%; }\n.conj-table tr:nth-child(even) td { background: var(--light); }\n\n\/* \u2500\u2500 Lesson color theming via data attr \u2500\u2500 *\/\n[data-lesson=\"1\"] .nav-btn.active { color: var(--gold); border-bottom-color: var(--gold); }\n[data-lesson=\"1\"] .section-num { color: var(--gold); }\n[data-lesson=\"1\"] .ex-num { background: var(--c1-main); }\n[data-lesson=\"1\"] .timeline::before { background: var(--c1-light); }\n[data-lesson=\"1\"] .timeline-item::before { background: var(--c1-main); box-shadow: 0 0 0 2px var(--c1-main); }\n[data-lesson=\"1\"] .tl-time { color: var(--gold); }\n[data-lesson=\"1\"] .reveal-btn { background: var(--ink); color: var(--cream); }\n[data-lesson=\"1\"] .correction-box { border-color: #10b981; background: #d1fae5; color: #065f46; }\n[data-lesson=\"1\"] .chip { background: var(--ink); }\n[data-lesson=\"1\"] .word-bank { border-color: var(--c1-light); background: var(--c1-bg); }\n[data-lesson=\"1\"] .drop-zone.filled { border-color: var(--ink); background: var(--ink); color: var(--cream); }\n[data-lesson=\"1\"] .btn-lesson { background: var(--ink); color: var(--cream); }\n[data-lesson=\"1\"] .audio-player { background: var(--ink); }\n[data-lesson=\"1\"] .play-btn { background: var(--gold); }\n[data-lesson=\"1\"] .progress-fill { background: var(--gold); }\n[data-lesson=\"1\"] .waveform.playing span { background: var(--gold); }\n\n[data-lesson=\"2\"] .nav-btn.active { color: var(--gold); border-bottom-color: var(--gold); }\n[data-lesson=\"2\"] .section-num { color: var(--gold); }\n[data-lesson=\"2\"] .ex-num { background: var(--c2-main); }\n[data-lesson=\"2\"] .timeline::before { background: var(--c2-light); }\n[data-lesson=\"2\"] .timeline-item::before { background: var(--c2-main); box-shadow: 0 0 0 2px var(--c2-main); }\n[data-lesson=\"2\"] .tl-time { color: var(--gold); }\n[data-lesson=\"2\"] .reveal-btn { background: var(--ink); color: var(--cream); }\n[data-lesson=\"2\"] .correction-box { border-color: var(--c2-main); background: var(--c2-light); color: var(--c2-dark); }\n[data-lesson=\"2\"] .chip { background: var(--ink); }\n[data-lesson=\"2\"] .word-bank { border-color: var(--c2-light); background: var(--c2-bg); }\n[data-lesson=\"2\"] .drop-zone.filled { border-color: var(--ink); background: var(--ink); color: var(--cream); }\n[data-lesson=\"2\"] .btn-lesson { background: var(--ink); color: var(--cream); }\n[data-lesson=\"2\"] .audio-player { background: linear-gradient(135deg,#064e3b,#065f46); }\n[data-lesson=\"2\"] .play-btn { background: var(--gold); }\n[data-lesson=\"2\"] .progress-fill { background: var(--gold); }\n[data-lesson=\"2\"] .waveform.playing span { background: var(--gold); }\n\n[data-lesson=\"3\"] .nav-btn.active { color: var(--gold); border-bottom-color: var(--gold); }\n[data-lesson=\"3\"] .section-num { color: var(--gold); }\n[data-lesson=\"3\"] .ex-num { background: var(--c3-main); }\n[data-lesson=\"3\"] .timeline::before { background: var(--c3-light); }\n[data-lesson=\"3\"] .timeline-item::before { background: var(--c3-main); box-shadow: 0 0 0 2px var(--c3-main); }\n[data-lesson=\"3\"] .tl-time { color: var(--gold); }\n[data-lesson=\"3\"] .reveal-btn { background: var(--ink); color: var(--cream); }\n[data-lesson=\"3\"] .correction-box { border-color: var(--c3-main); background: #ede9fe; color: var(--c3-dark); }\n[data-lesson=\"3\"] .chip { background: var(--ink); }\n[data-lesson=\"3\"] .word-bank { border-color: var(--c3-light); background: var(--c3-bg); }\n[data-lesson=\"3\"] .drop-zone.filled { border-color: var(--ink); background: var(--ink); color: var(--cream); }\n[data-lesson=\"3\"] .btn-lesson { background: var(--ink); color: var(--cream); }\n[data-lesson=\"3\"] .audio-player { background: linear-gradient(135deg,#2e1065,#4c1d95); }\n[data-lesson=\"3\"] .play-btn { background: var(--gold); }\n[data-lesson=\"3\"] .progress-fill { background: var(--gold); }\n[data-lesson=\"3\"] .waveform.playing span { background: var(--gold); }\n\n[data-lesson=\"4\"] .nav-btn.active { color: var(--gold); border-bottom-color: var(--gold); }\n[data-lesson=\"4\"] .section-num { color: var(--gold); }\n[data-lesson=\"4\"] .ex-num { background: var(--c4-main); }\n[data-lesson=\"4\"] .timeline::before { background: var(--c4-light); }\n[data-lesson=\"4\"] .timeline-item::before { background: var(--c4-main); box-shadow: 0 0 0 2px var(--c4-main); }\n[data-lesson=\"4\"] .tl-time { color: var(--gold); }\n[data-lesson=\"4\"] .reveal-btn { background: var(--ink); color: var(--cream); }\n[data-lesson=\"4\"] .correction-box { border-color: var(--c4-main); background: #ffedd5; color: var(--c4-dark); }\n[data-lesson=\"4\"] .chip { background: var(--ink); }\n[data-lesson=\"4\"] .word-bank { border-color: var(--c4-light); background: var(--c4-bg); }\n[data-lesson=\"4\"] .drop-zone.filled { border-color: var(--ink); background: var(--ink); color: var(--cream); }\n[data-lesson=\"4\"] .btn-lesson { background: var(--ink); color: var(--cream); }\n[data-lesson=\"4\"] .audio-player { background: linear-gradient(135deg,#431407,#7c2d12); }\n[data-lesson=\"4\"] .play-btn { background: var(--gold); }\n[data-lesson=\"4\"] .progress-fill { background: var(--gold); }\n[data-lesson=\"4\"] .waveform.playing span { background: var(--gold); }\n\n@media (max-width: 600px) {\n .section { padding: 1rem 3vw; }\n .sal-grid { grid-template-columns: 1fr 1fr; }\n .vocab-grid { grid-template-columns: 1fr; }\n .nav-btn { padding: 0.7rem 0.6rem; font-size: 0.72rem; }\n .fill-sentence-interactive { font-size: 0.82rem; }\n .drop-zone { min-width: 75px; font-size: 0.7rem; }\n .home-grid { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 3vw; }\n}\n<\/style>\n<\/head>\n<body>\n\n\n<div id=\"home\">\n <div class=\"home-header\">\n <div class=\"home-badge\">Cours de fran\u00e7ais \u00b7 Pre A1 \u2192 B2<\/div>\n <h1>Apprenons le <em>Fran\u00e7ais<\/em> !<\/h1>\n <div class=\"home-sub\">S\u0103 \u00eenv\u0103\u021b\u0103m franceza \u00eempreun\u0103 \u00b7 4 niveluri \u00b7 Traduceri \u00een rom\u00e2n\u0103<\/div>\n <div class=\"home-wave\">\n <svg viewBox=\"0 0 1440 50\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M0,25 C360,50 1080,0 1440,25 L1440,50 L0,50 Z\" fill=\"var(--light)\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"home-grid\">\n <div class=\"lesson-card lc1\" onclick=\"openLesson(1)\">\n <div class=\"lc-duration\">\u23f1 1h<\/div>\n <div class=\"lc-emoji\">\ud83d\udc4b<\/div>\n <div class=\"lc-level\">Pre A1 – A1<\/div>\n <div class=\"lc-title\">Les Salutations<\/div>\n <div class=\"lc-theme\">Cum salut\u0103m \u00een francez\u0103<\/div>\n <div class=\"lc-tags\">\n <span class=\"lc-tag\">Bonjour<\/span>\n <span class=\"lc-tag\">\u00c7a va ?<\/span>\n <span class=\"lc-tag\">Au revoir<\/span>\n <\/div>\n <\/div>\n <div class=\"lesson-card lc2\" onclick=\"openLesson(2)\">\n <div class=\"lc-duration\">\u23f1 1h<\/div>\n <div class=\"lc-emoji\">\ud83d\udc64<\/div>\n <div class=\"lc-level\">A1 – A2<\/div>\n <div class=\"lc-title\">Se Pr\u00e9senter<\/div>\n <div class=\"lc-theme\">Cum te prezin\u021bi \u00een francez\u0103<\/div>\n <div class=\"lc-tags\">\n <span class=\"lc-tag\">Je m’appelle<\/span>\n <span class=\"lc-tag\">J’ai \u2026 ans<\/span>\n <span class=\"lc-tag\">Je suis<\/span>\n <\/div>\n <\/div>\n <div class=\"lesson-card lc3\" onclick=\"openLesson(3)\">\n <div class=\"lc-duration\">\u23f1 1h30<\/div>\n <div class=\"lc-emoji\">\ud83c\udfe0<\/div>\n <div class=\"lc-level\">A2 – B1<\/div>\n <div class=\"lc-title\">La Vie Quotidienne<\/div>\n <div class=\"lc-theme\">Rutina zilnic\u0103 \u0219i casa<\/div>\n <div class=\"lc-tags\">\n <span class=\"lc-tag\">Verbes du quotidien<\/span>\n <span class=\"lc-tag\">Imparfait<\/span>\n <span class=\"lc-tag\">Adverbes<\/span>\n <\/div>\n <\/div>\n <div class=\"lesson-card lc4\" onclick=\"openLesson(4)\">\n <div class=\"lc-duration\">\u23f1 2h<\/div>\n <div class=\"lc-emoji\">\ud83d\udcac<\/div>\n <div class=\"lc-level\">B1 – B2<\/div>\n <div class=\"lc-title\">Exprimer son Opinion<\/div>\n <div class=\"lc-theme\">Opinia, argumentarea, dezbaterea<\/div>\n <div class=\"lc-tags\">\n <span class=\"lc-tag\">Connecteurs<\/span>\n <span class=\"lc-tag\">Subjonctif<\/span>\n <span class=\"lc-tag\">Nuancer<\/span>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n\n<div id=\"lesson-1\" class=\"lesson-screen\" data-lesson=\"1\">\n <div class=\"back-bar\">\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Toutes les le\u00e7ons<\/button>\n <span class=\"back-breadcrumb\">Pre A1 – A1 \u00b7 Les Salutations<\/span>\n <\/div>\n \n <div style=\"background:var(--ink);color:white;padding:2.5rem 4vw 3.5rem;text-align:center;position:relative;overflow:hidden\">\n <div style=\"position:absolute;inset:0;background:url(\\\"data:image\/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='rgba(255,255,255,0.07)'\/%3E%3C\/svg%3E\\\") repeat\"><\/div>\n <div style=\"position:relative;display:inline-block;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.75);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;padding:0.25rem 0.9rem;margin-bottom:0.8rem;font-family:'DM Mono',monospace;border-radius:100px\">Pre A1 – A1 \u00b7 Le\u00e7on 1<\/div>\n <div style=\"position:relative;font-family:'Baloo 2',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.1;color:white\">\ud83d\udc4b <span style=\"color:#fef3c7\">Bonjour !<\/span><\/div>\n <div style=\"position:relative;color:rgba(255,255,255,0.75);margin-top:0.4rem\">Les salutations en fran\u00e7ais \u00b7 Saluturile \u00een francez\u0103<\/div>\n <div style=\"position:absolute;bottom:-1px;left:0;right:0;line-height:0\"><svg viewBox=\"0 0 1440 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M0,20 C360,40 1080,0 1440,20 L1440,40 L0,40 Z\" fill=\"var(--light)\"\/><\/svg><\/div>\n <\/div>\n <nav class=\"lesson-nav\" id=\"nav-1\">\n <button class=\"nav-btn active\" onclick=\"showSec('s1','plan','nav-1')\">\ud83d\udccb Plan<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s1','vocabulaire','nav-1')\">\ud83d\udcac Vocabulaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s1','dialogue','nav-1')\">\ud83c\udfa7 Dialogue<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s1','exercices','nav-1')\">\u270f\ufe0f Exercices<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s1','bilan','nav-1')\">\ud83c\udf1f Bilan<\/button>\n <\/nav>\n <div id=\"s1\">\n \n <div class=\"section active\" id=\"s1-plan\">\n <div class=\"section-header\">\n <div class=\"section-num\">00 \u00b7 Introduction<\/div>\n <h2 class=\"section-title\">Plan de la le\u00e7on<\/h2>\n <p class=\"section-desc\">Th\u00e8me : <strong>Les salutations<\/strong> \u00b7 Cum salut\u0103m \u00een francez\u0103<\/p>\n <\/div>\n <div class=\"plan-grid\">\n <div class=\"card\">\n <div class=\"card-label\">D\u00e9roul\u00e9 \u00b7 1 heure<\/div>\n <div class=\"timeline\">\n <div class=\"timeline-item\"><div class=\"tl-time\">0:00 – 0:15<\/div><div class=\"tl-title\">\ud83d\udcac Vocabulaire des salutations<\/div><div class=\"tl-desc\">12 expressions \u00b7 Formel et informel<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:15 – 0:30<\/div><div class=\"tl-title\">\ud83c\udfa7 Dialogue audio<\/div><div class=\"tl-desc\">2 conversations \u00b7 \u00c9coute active<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:30 – 0:50<\/div><div class=\"tl-title\">\u270f\ufe0f Exercices interactifs<\/div><div class=\"tl-desc\">MCQ \u00b7 Associations \u00b7 Drag & drop<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:50 – 1:00<\/div><div class=\"tl-title\">\ud83c\udf1f Bilan & auto-\u00e9valuation<\/div><\/div>\n <\/div>\n <\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\">\n <div class=\"card-label\">\ud83c\udfaf Ce vei \u00eenv\u0103\u021ba<\/div>\n <ul style=\"list-style:none;padding:0;display:flex;flex-direction:column;gap:0.6rem;font-size:0.88rem\">\n <li>\ud83d\udc4b S\u0103 spui <strong>bonjour, bonsoir, salut<\/strong> la momentul potrivit<\/li>\n <li>\ud83d\ude0a S\u0103 \u00eentrebi <strong>cum se simte<\/strong> cineva \u0219i s\u0103 r\u0103spunzi<\/li>\n <li>\ud83e\udd1d Diferen\u021ba dintre <strong>formal<\/strong> \u0219i <strong>informal<\/strong><\/li>\n <li>\ud83d\udc4b Cum s\u0103 spui <strong>la revedere<\/strong> \u00een diferite situa\u021bii<\/li>\n <\/ul>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:white;border:none\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">Con\u021binut<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.7rem\">\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#fef3c7\">12<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">expresii<\/div><\/div>\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#fef3c7\">2<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">dialoguri<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:#fef3c7;border-color:#fcd34d\">\n <div class=\"card-label\" style=\"color:#92400e\">\ud83d\udca1 Sfatul formatorei<\/div>\n <p style=\"font-size:0.85rem;color:#78350f;margin:0\">Repet\u0103 fiecare expresie <strong>cu voce tare<\/strong> de cel pu\u021bin 3 ori. Nu \u00ee\u021bi fie team\u0103 s\u0103 gre\u0219e\u0219ti!<\/p>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s1','vocabulaire','nav-1')\">Commencer \u2192<\/button>\n <\/div>\n\n \n <div class=\"section\" id=\"s1-vocabulaire\">\n <div class=\"section-header\">\n <div class=\"section-num\">01 \u00b7 15 min<\/div>\n <h2 class=\"section-title\">\ud83d\udcac Les Salutations<\/h2>\n <p class=\"section-desc\">12 expressions \u00b7 \ud83d\udd0a Apas\u0103 s\u0103 auzi pronun\u021bia<\/p>\n <\/div>\n <div class=\"card\">\n <div class=\"card-label\">\ud83c\udfa9 Formel – situa\u021bii oficiale<\/div>\n <div class=\"sal-grid\">\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#e8eef8,#c8d8f0);border-color:#a0b8d8\"><div class=\"sal-icon\">\ud83c\udf05<\/div><div class=\"sal-fr\">Bonjour<\/div><button class=\"speak-btn\" onclick=\"speakFR('Bonjour')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Bun\u0103 ziua \/ diminea\u021ba<\/div><div class=\"sal-ctx\">Diminea\u021ba \u0219i ziua<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#e8eef8,#c8d8f0);border-color:#a0b8d8\"><div class=\"sal-icon\">\ud83c\udf06<\/div><div class=\"sal-fr\">Bonsoir<\/div><button class=\"speak-btn\" onclick=\"speakFR('Bonsoir')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Bun\u0103 seara<\/div><div class=\"sal-ctx\">De la ~18:00<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#e8eef8,#c8d8f0);border-color:#a0b8d8\"><div class=\"sal-icon\">\ud83e\udd1d<\/div><div class=\"sal-fr\">Comment allez-vous ?<\/div><button class=\"speak-btn\" onclick=\"speakFR('Comment allez-vous ?')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Cum v\u0103 sim\u021bi\u021bi?<\/div><div class=\"sal-ctx\">\u00centrebare formal\u0103<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#e8eef8,#c8d8f0);border-color:#a0b8d8\"><div class=\"sal-icon\">\ud83d\ude0a<\/div><div class=\"sal-fr\">Je vais bien, merci.<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je vais bien, merci.')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">M\u0103 simt bine, mul\u021bumesc.<\/div><div class=\"sal-ctx\">R\u0103spuns formal<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#e8eef8,#c8d8f0);border-color:#a0b8d8\"><div class=\"sal-icon\">\ud83c\udf19<\/div><div class=\"sal-fr\">Bonne nuit<\/div><button class=\"speak-btn\" onclick=\"speakFR('Bonne nuit')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Noapte bun\u0103<\/div><div class=\"sal-ctx\">Seara t\u00e2rzie<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#e8eef8,#c8d8f0);border-color:#a0b8d8\"><div class=\"sal-icon\">\ud83d\udc4b<\/div><div class=\"sal-fr\">Au revoir<\/div><button class=\"speak-btn\" onclick=\"speakFR('Au revoir')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">La revedere<\/div><div class=\"sal-ctx\">R\u0103mas bun formal<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-label\">\ud83d\ude0e Informel – prieteni, familie<\/div>\n <div class=\"sal-grid\">\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#edf2ec,#b8d4b4);border-color:#90b890\"><div class=\"sal-icon\">\u270c\ufe0f<\/div><div class=\"sal-fr\">Salut !<\/div><button class=\"speak-btn\" onclick=\"speakFR('Salut')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Salut! \/ Bun\u0103!<\/div><div class=\"sal-ctx\">Orice moment<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#edf2ec,#b8d4b4);border-color:#90b890\"><div class=\"sal-icon\">\ud83d\udcac<\/div><div class=\"sal-fr\">\u00c7a va ?<\/div><button class=\"speak-btn\" onclick=\"speakFR('\u00c7a va ?')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Ce mai faci?<\/div><div class=\"sal-ctx\">\u00centrebare informal\u0103<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#fdf0d8,#f0d090);border-color:#d4a840\"><div class=\"sal-icon\">\ud83d\ude04<\/div><div class=\"sal-fr\">\u00c7a va bien !<\/div><button class=\"speak-btn\" onclick=\"speakFR('\u00c7a va bien')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">M\u0103 descurc bine!<\/div><div class=\"sal-ctx\">R\u0103spuns pozitiv<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#fdf0d8,#f0d090);border-color:#d4a840\"><div class=\"sal-icon\">\ud83d\ude10<\/div><div class=\"sal-fr\">Comme ci comme \u00e7a.<\/div><button class=\"speak-btn\" onclick=\"speakFR('Comme ci comme \u00e7a')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">\u0218i-a\u0219a \u0219i-a\u0219a.<\/div><div class=\"sal-ctx\">R\u0103spuns neutru<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#f8ece8,#e8c0b0);border-color:#c89080\"><div class=\"sal-icon\">\ud83c\udfc3<\/div><div class=\"sal-fr\">\u00c0 bient\u00f4t !<\/div><button class=\"speak-btn\" onclick=\"speakFR('\u00c0 bient\u00f4t')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Pe cur\u00e2nd!<\/div><div class=\"sal-ctx\">C\u00e2nd te mai vezi<\/div><\/div>\n <div class=\"sal-card\" style=\"background:linear-gradient(135deg,#f8ece8,#e8c0b0);border-color:#c89080\"><div class=\"sal-icon\">\ud83d\udcc5<\/div><div class=\"sal-fr\">\u00c0 demain !<\/div><button class=\"speak-btn\" onclick=\"speakFR('\u00c0 demain')\">\ud83d\udd0a<\/button><div class=\"sal-ro\">Pe m\u00e2ine!<\/div><div class=\"sal-ctx\">Te revezi a doua zi<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:#d1fae5;border-color:#6ee7b7\">\n <div class=\"card-label\" style=\"color:#065f46\">\ud83d\udd0a Pronun\u021bie – aten\u021bie!<\/div>\n <div style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0.7rem;font-size:0.85rem\">\n <div style=\"background:white;padding:0.65rem;border-radius:8px\"><strong>Bonjour<\/strong> \u2192 bon-JOUR<br><span style=\"color:var(--muted);font-size:0.78rem\">\u201ej” ca \u00een \u201ejoc”<\/span><\/div>\n <div style=\"background:white;padding:0.65rem;border-radius:8px\"><strong>Bonsoir<\/strong> \u2192 bon-SOIR<br><span style=\"color:var(--muted);font-size:0.78rem\">\u201eoir” sun\u0103 ca \u201eoar”<\/span><\/div>\n <div style=\"background:white;padding:0.65rem;border-radius:8px\"><strong>Salut<\/strong> \u2192 sa-LU<br><span style=\"color:var(--muted);font-size:0.78rem\">\u201et” final nu se pronun\u021b\u0103!<\/span><\/div>\n <div style=\"background:white;padding:0.65rem;border-radius:8px\"><strong>Au revoir<\/strong> \u2192 o-ruh-VWAR<br><span style=\"color:var(--muted);font-size:0.78rem\">\u201er” guralizat fran\u021buzesc<\/span><\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s1','dialogue','nav-1')\">Continuer : Dialogue \u2192<\/button>\n <\/div>\n\n \n <div class=\"section\" id=\"s1-dialogue\">\n <div class=\"section-header\">\n <div class=\"section-num\">02 \u00b7 15 min<\/div>\n <h2 class=\"section-title\">\ud83c\udfa7 Dialogues audio<\/h2>\n <p class=\"section-desc\">Dou\u0103 conversa\u021bii \u00b7 Ascult\u0103 \u0219i repet\u0103<\/p>\n <\/div>\n <div style=\"margin-bottom:1.5rem\">\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1rem;font-weight:700;margin-bottom:0.7rem;display:flex;align-items:center;gap:0.5rem\">\ud83c\udf99\ufe0f Dialogue 1 – \u00c0 l’\u00e9cole <span class=\"tag\" style=\"background:#bfdbfe;color:#1d4ed8\">Formel<\/span><\/div>\n <div class=\"audio-player\" id=\"l1-audio-1\">\n <button class=\"play-btn\" onclick=\"toggleAudio('l1-audio-1')\"><svg width=\"13\" height=\"15\" viewBox=\"0 0 14 16\" fill=\"none\"><path d=\"M0 0L14 8L0 16V0Z\" fill=\"#1e293b\"\/><\/svg><\/button>\n <div class=\"audio-info\">\n <div class=\"audio-title\">Marie rencontre son professeur<\/div>\n <div class=\"audio-track\">Dialogue scolaire \u00b7 Registre formel<\/div>\n <div class=\"waveform\" id=\"l1-audio-1-wave\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"progress-bar\" id=\"l1-audio-1-bar\"><div class=\"progress-fill\" id=\"l1-audio-1-fill\"><\/div><\/div>\n <\/div>\n <div class=\"audio-time\" id=\"l1-audio-1-time\">0:00<\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-label\">\ud83d\udcdc Transcription<\/div>\n <div class=\"dialogue-wrap\">\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#3b82f6\">\ud83d\udc67<\/div><div><div class=\"speaker-name\">Marie<\/div><div class=\"line-fr\"><span class=\"hl\">Bonjour<\/span>, Monsieur Dupont !<\/div><div class=\"line-ro\">Bun\u0103 ziua, Domnule Dupont!<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#f59e0b\">\ud83d\udc68\u200d\ud83c\udfeb<\/div><div><div class=\"speaker-name\">M. Dupont<\/div><div class=\"line-fr\"><span class=\"hl\">Bonjour<\/span>, Marie ! <span class=\"hl\">Comment allez-vous<\/span> ?<\/div><div class=\"line-ro\">Bun\u0103 ziua, Marie! Cum v\u0103 sim\u021bi\u021bi?<\/div><\/div><\/div>\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#3b82f6\">\ud83d\udc67<\/div><div><div class=\"speaker-name\">Marie<\/div><div class=\"line-fr\"><span class=\"hl\">Je vais bien<\/span>, merci ! Et vous ?<\/div><div class=\"line-ro\">M\u0103 simt bine, mul\u021bumesc! Dar dumneavoastr\u0103?<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#f59e0b\">\ud83d\udc68\u200d\ud83c\udfeb<\/div><div><div class=\"speaker-name\">M. Dupont<\/div><div class=\"line-fr\">Tr\u00e8s bien, merci. <span class=\"hl\">Au revoir<\/span>, Marie !<\/div><div class=\"line-ro\">Foarte bine, mul\u021bumesc. La revedere, Marie!<\/div><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div>\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1rem;font-weight:700;margin-bottom:0.7rem;display:flex;align-items:center;gap:0.5rem\">\ud83c\udf99\ufe0f Dialogue 2 – Entre amis <span class=\"tag\" style=\"background:#a7f3d0;color:#065f46\">Informel<\/span><\/div>\n <div class=\"audio-player\" id=\"l1-audio-2\">\n <button class=\"play-btn\" onclick=\"toggleAudio('l1-audio-2')\"><svg width=\"13\" height=\"15\" viewBox=\"0 0 14 16\" fill=\"none\"><path d=\"M0 0L14 8L0 16V0Z\" fill=\"#1e293b\"\/><\/svg><\/button>\n <div class=\"audio-info\">\n <div class=\"audio-title\">Lucas et Emma se retrouvent<\/div>\n <div class=\"audio-track\">Conversation amicale \u00b7 Registre informel<\/div>\n <div class=\"waveform\" id=\"l1-audio-2-wave\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"progress-bar\" id=\"l1-audio-2-bar\"><div class=\"progress-fill\" id=\"l1-audio-2-fill\"><\/div><\/div>\n <\/div>\n <div class=\"audio-time\" id=\"l1-audio-2-time\">0:00<\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-label\">\ud83d\udcdc Transcription<\/div>\n <div class=\"dialogue-wrap\">\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#3b82f6\">\ud83d\udc66<\/div><div><div class=\"speaker-name\">Lucas<\/div><div class=\"line-fr\"><span class=\"hl\">Salut<\/span>, Emma !<\/div><div class=\"line-ro\">Salut, Emma!<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#f59e0b\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Emma<\/div><div class=\"line-fr\">Salut ! <span class=\"hl\">\u00c7a va<\/span> ?<\/div><div class=\"line-ro\">Salut! Ce mai faci?<\/div><\/div><\/div>\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#3b82f6\">\ud83d\udc66<\/div><div><div class=\"speaker-name\">Lucas<\/div><div class=\"line-fr\"><span class=\"hl\">\u00c7a va bien<\/span> ! Et toi ?<\/div><div class=\"line-ro\">M\u0103 descurc bine! Tu cum e\u0219ti?<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#f59e0b\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Emma<\/div><div class=\"line-fr\"><span class=\"hl\">Comme ci comme \u00e7a<\/span>… <span class=\"hl\">\u00c0 bient\u00f4t<\/span> !<\/div><div class=\"line-ro\">\u0218i-a\u0219a \u0219i-a\u0219a… Pe cur\u00e2nd!<\/div><\/div><\/div>\n <\/div>\n <button class=\"reveal-btn\" onclick=\"toggleReveal(this,'l1-d2')\">\u25b6 Note<\/button>\n <div class=\"correction-box\" id=\"l1-d2\"><strong>Et toi ?<\/strong> = forma informal\u0103 de la \u201eEt vous ?” \u00b7 <strong>D\u00e9sol\u00e9<\/strong> = \u00cemi pare r\u0103u<\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s1','exercices','nav-1')\">Continuer : Exercices \u2192<\/button>\n <\/div>\n\n \n <div class=\"section\" id=\"s1-exercices\">\n <div class=\"section-header\">\n <div class=\"section-num\">03 \u00b7 20 min<\/div>\n <h2 class=\"section-title\">\u270f\ufe0f Exercices<\/h2>\n <\/div>\n \n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">01<\/div><div><div class=\"ex-type\">Choix multiple<\/div><div class=\"ex-question\">Formel ou informel ?<\/div><\/div><\/div>\n <div style=\"margin-bottom:1rem\"><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Comment allez-vous ? \u00bb<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>Avec ton meilleur ami<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>Avec ton professeur<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>Avec ta petite soeur<\/div>\n <\/div>\n <\/div>\n <div><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00c0 quelle heure dit-on \u00ab Bonsoir \u00bb ?<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>\u00c0 9h du matin<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">B<\/div>\u00c0 14h le apr\u00e8s-midi<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">C<\/div>\u00c0 19h le soir<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">02<\/div><div><div class=\"ex-type\">Association<\/div><div class=\"ex-question\">Francez\u0103 \u2194 Rom\u00e2n\u0103<\/div><div class=\"ex-instruction\">Clic pe o expresie francez\u0103, apoi pe traducerea ei<\/div><\/div><\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin:0.8rem 0\">\n <div><div style=\"font-family:'DM Mono',monospace;font-size:0.62rem;text-transform:uppercase;color:var(--muted);margin-bottom:0.4rem;text-align:center\">\ud83c\uddeb\ud83c\uddf7 Fran\u00e7ais<\/div>\n <div style=\"display:flex;flex-direction:column;gap:0.4rem\">\n <div class=\"match-item\" data-id=\"l1m1\" data-side=\"fr\" onclick=\"doMatch(this,'l1match','l1mfb')\">Bonsoir<\/div>\n <div class=\"match-item\" data-id=\"l1m2\" data-side=\"fr\" onclick=\"doMatch(this,'l1match','l1mfb')\">\u00c0 bient\u00f4t !<\/div>\n <div class=\"match-item\" data-id=\"l1m3\" data-side=\"fr\" onclick=\"doMatch(this,'l1match','l1mfb')\">Comme ci comme \u00e7a<\/div>\n <div class=\"match-item\" data-id=\"l1m4\" data-side=\"fr\" onclick=\"doMatch(this,'l1match','l1mfb')\">Je vais bien<\/div>\n <\/div>\n <\/div>\n <div><div style=\"font-family:'DM Mono',monospace;font-size:0.62rem;text-transform:uppercase;color:var(--muted);margin-bottom:0.4rem;text-align:center\">\ud83c\uddf7\ud83c\uddf4 Rom\u00e2n\u0103<\/div>\n <div style=\"display:flex;flex-direction:column;gap:0.4rem\">\n <div class=\"match-item\" data-id=\"l1m3\" data-side=\"ro\" onclick=\"doMatch(this,'l1match','l1mfb')\">\u0218i-a\u0219a \u0219i-a\u0219a<\/div>\n <div class=\"match-item\" data-id=\"l1m1\" data-side=\"ro\" onclick=\"doMatch(this,'l1match','l1mfb')\">Bun\u0103 seara<\/div>\n <div class=\"match-item\" data-id=\"l1m4\" data-side=\"ro\" onclick=\"doMatch(this,'l1match','l1mfb')\">M\u0103 simt bine<\/div>\n <div class=\"match-item\" data-id=\"l1m2\" data-side=\"ro\" onclick=\"doMatch(this,'l1match','l1mfb')\">Pe cur\u00e2nd!<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"l1mfb\" style=\"font-size:0.85rem;display:none\"><\/div>\n <button class=\"btn btn-ink\" style=\"font-size:0.78rem;padding:0.4rem 0.9rem;margin-top:0.4rem\" onclick=\"resetMatch('l1match','l1mfb')\">\u21ba<\/button>\n <\/div>\n \n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">03<\/div><div><div class=\"ex-type\">Compl\u00e9tez \u00b7 Drag & Drop<\/div><div class=\"ex-question\">Completeaz\u0103 dialogul<\/div><\/div><\/div>\n <div class=\"word-bank\" id=\"l1-wb\">\n <span class=\"chip\" draggable=\"true\" data-word=\"Bonjour\">Bonjour<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"\u00c7a va\">\u00c7a va<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"Au revoir\">Au revoir<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"Bonsoir\">Bonsoir<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"\u00c0 demain\">\u00c0 demain<\/span>\n <\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">1.<\/span><span>– <\/span><span class=\"drop-zone\" data-answer=\"Bonjour\" data-wb=\"l1-wb\"><\/span><span>, Madame !<\/span><span style=\"font-size:0.72rem;color:var(--muted)\">(diminea\u021ba, formal)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">2.<\/span><span>– <\/span><span class=\"drop-zone\" data-answer=\"\u00c7a va\" data-wb=\"l1-wb\"><\/span><span> ? – Oui, \u00e7a va bien !<\/span><span style=\"font-size:0.72rem;color:var(--muted)\">(informal)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">3.<\/span><span>– <\/span><span class=\"drop-zone\" data-answer=\"Bonsoir\" data-wb=\"l1-wb\"><\/span><span>, bonne soir\u00e9e !<\/span><span style=\"font-size:0.72rem;color:var(--muted)\">(seara)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">4.<\/span><span>– <\/span><span class=\"drop-zone\" data-answer=\"Au revoir\" data-wb=\"l1-wb\"><\/span><span>, Monsieur !<\/span><span style=\"font-size:0.72rem;color:var(--muted)\">(formal, pleac\u0103)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">5.<\/span><span>– Bonne nuit ! – <\/span><span class=\"drop-zone\" data-answer=\"\u00c0 demain\" data-wb=\"l1-wb\"><\/span><span> !<\/span><span style=\"font-size:0.72rem;color:var(--muted)\">(se rev\u0103d m\u00e2ine)<\/span><\/div>\n <div style=\"display:flex;gap:0.5rem;margin-top:0.9rem;flex-wrap:wrap\">\n <button class=\"btn btn-lesson\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"checkDnD('.exercise-block:nth-child(3) .drop-zone','l1-dnd-fb','l1-wb')\">\u2713 V\u00e9rifier<\/button>\n <button class=\"btn btn-ink\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"resetDnD('.exercise-block:nth-child(3) .drop-zone','l1-dnd-fb','l1-wb')\">\u21ba<\/button>\n <\/div>\n <div id=\"l1-dnd-fb\" style=\"margin-top:0.7rem;font-size:0.85rem;display:none\"><\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s1','bilan','nav-1')\">Continuer : Bilan \u2192<\/button>\n <\/div>\n\n \n <div class=\"section\" id=\"s1-bilan\">\n <div class=\"section-header\">\n <div class=\"section-num\">04 \u00b7 10 min<\/div>\n <h2 class=\"section-title\">\ud83c\udf1f Bilan<\/h2>\n <\/div>\n <div class=\"plan-grid\">\n <div class=\"card\">\n <div class=\"card-label\">\u2b50 Auto-\u00e9valuation<\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je peux dire bonjour et bonsoir<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je connais formel vs informel<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je peux dire au revoir<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <p style=\"font-size:0.7rem;color:var(--muted);margin-top:0.7rem\">\u2b50 Trebuie s\u0103 mai exersez \u00b7 \u2b50\u2b50 \u00cen\u021beleg \u00b7 \u2b50\u2b50\u2b50 \u0218tiu bine!<\/p>\n <\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\" style=\"background:#fef3c7;border-color:#fcd34d\">\n <div class=\"card-label\" style=\"color:#92400e\">\ud83d\udcdd Tema acas\u0103<\/div>\n <div style=\"font-size:0.85rem;color:#78350f;display:flex;flex-direction:column;gap:0.5rem\">\n <div>1. Exerseaz\u0103 cele 12 expresii cu voce tare de <strong>3 ori<\/strong><\/div>\n <div>2. Salut\u0103 un coleg \u00een francez\u0103 m\u00e2ine<\/div>\n <div>3. Scrie un dialog scurt (4 replici) \u00een caiet<\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#065f46,#10b981);color:white;border:none;cursor:pointer\" onclick=\"openLesson(2)\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">\ud83d\ude80 Lec\u021bia urm\u0103toare<\/div>\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:800\">A1-A2 \u00b7 Se Pr\u00e9senter \u2192<\/div>\n <div style=\"font-size:0.8rem;color:rgba(255,255,255,0.7);margin-top:0.2rem\">Je m’appelle \u00b7 J’ai \u2026 ans \u00b7 Je suis<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div style=\"text-align:center;padding:2rem 0\">\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#3b82f6\">F\u00e9licitations ! \ud83c\udf89<\/div>\n <div style=\"color:var(--muted);margin-top:0.3rem\">Ai terminat Le\u00e7on 1 – Les Salutations!<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"lesson-2\" class=\"lesson-screen\" data-lesson=\"2\">\n <div class=\"back-bar\">\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Toutes les le\u00e7ons<\/button>\n <span class=\"back-breadcrumb\">A1 – A2 \u00b7 Se Pr\u00e9senter<\/span>\n <\/div>\n <div style=\"background:var(--ink);color:white;padding:2.5rem 4vw 3.5rem;text-align:center;position:relative;overflow:hidden\">\n <div style=\"position:absolute;inset:0;background:url(\\\"data:image\/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='rgba(255,255,255,0.07)'\/%3E%3C\/svg%3E\\\") repeat\"><\/div>\n <div style=\"position:relative;display:inline-block;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.75);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;padding:0.25rem 0.9rem;margin-bottom:0.8rem;font-family:'DM Mono',monospace;border-radius:100px\">A1 – A2 \u00b7 Le\u00e7on 2<\/div>\n <div style=\"position:relative;font-family:'Baloo 2',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:white\">\ud83d\udc64 <span style=\"color:#d1fae5\">Se Pr\u00e9senter<\/span><\/div>\n <div style=\"position:relative;color:rgba(255,255,255,0.75);margin-top:0.4rem\">Cum te prezin\u021bi \u00een francez\u0103 \u00b7 Je m’appelle, j’ai … ans<\/div>\n <div style=\"position:absolute;bottom:-1px;left:0;right:0;line-height:0\"><svg viewBox=\"0 0 1440 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M0,20 C360,40 1080,0 1440,20 L1440,40 L0,40 Z\" fill=\"var(--light)\"\/><\/svg><\/div>\n <\/div>\n <nav class=\"lesson-nav\" id=\"nav-2\">\n <button class=\"nav-btn active\" onclick=\"showSec('s2','plan','nav-2')\">\ud83d\udccb Plan<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s2','vocabulaire','nav-2')\">\ud83d\udcac Vocabulaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s2','grammaire','nav-2')\">\u2699\ufe0f Grammaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s2','dialogue','nav-2')\">\ud83c\udfa7 Dialogue<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s2','exercices','nav-2')\">\u270f\ufe0f Exercices<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s2','bilan','nav-2')\">\ud83c\udf1f Bilan<\/button>\n <\/nav>\n <div id=\"s2\">\n <div class=\"section active\" id=\"s2-plan\">\n <div class=\"section-header\"><div class=\"section-num\">00 \u00b7 Introduction<\/div><h2 class=\"section-title\">Plan de la le\u00e7on<\/h2><p class=\"section-desc\">Th\u00e8me : <strong>Se pr\u00e9senter<\/strong> \u00b7 Cum te prezin\u021bi<\/p><\/div>\n <div class=\"plan-grid\">\n <div class=\"card\"><div class=\"card-label\">D\u00e9roul\u00e9 \u00b7 1 heure<\/div><div class=\"timeline\">\n <div class=\"timeline-item\"><div class=\"tl-time\">0:00 – 0:15<\/div><div class=\"tl-title\">\ud83d\udcac Vocabulaire<\/div><div class=\"tl-desc\">Nom, \u00e2ge, nationalit\u00e9, profession \u00b7 15 mots cl\u00e9s<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:15 – 0:30<\/div><div class=\"tl-title\">\u2699\ufe0f Grammaire<\/div><div class=\"tl-desc\">Verbes \u00eatre & avoir au pr\u00e9sent \u00b7 Articles<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:30 – 0:45<\/div><div class=\"tl-title\">\ud83c\udfa7 Dialogue audio<\/div><div class=\"tl-desc\">Deux pr\u00e9sentations authentiques<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:45 – 1:00<\/div><div class=\"tl-title\">\u270f\ufe0f Exercices & Bilan<\/div><\/div>\n <\/div><\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\"><div class=\"card-label\">\ud83c\udfaf Ce vei \u00eenv\u0103\u021ba<\/div>\n <ul style=\"list-style:none;padding:0;display:flex;flex-direction:column;gap:0.6rem;font-size:0.88rem\">\n <li>\ud83d\udc64 S\u0103 spui <strong>cum te cheam\u0103<\/strong> – Je m’appelle…<\/li>\n <li>\ud83c\udf82 S\u0103 spui <strong>c\u00e2\u021bi ani ai<\/strong> – J’ai … ans<\/li>\n <li>\ud83c\udf0d S\u0103 spui <strong>na\u021bionalitatea<\/strong> – Je suis roumain(e)<\/li>\n <li>\ud83d\udcbc S\u0103 spui <strong>profesia<\/strong> – Je suis professeur(e)<\/li>\n <li>\ud83c\udfe0 S\u0103 spui <strong>unde locuie\u0219ti<\/strong> – J’habite \u00e0…<\/li>\n <\/ul>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#064e3b,#10b981);color:white;border:none\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">Con\u021binut<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.7rem\">\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#d1fae5\">15<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">cuvinte<\/div><\/div>\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#d1fae5\">2<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">verbe esen\u021biale<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s2','vocabulaire','nav-2')\">Commencer \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s2-vocabulaire\">\n <div class=\"section-header\"><div class=\"section-num\">01 \u00b7 15 min<\/div><h2 class=\"section-title\">\ud83d\udcac Vocabulaire – Se pr\u00e9senter<\/h2><p class=\"section-desc\">Cuvintele esen\u021biale \u00b7 \ud83d\udd0a Apas\u0103 s\u0103 auzi<\/p><\/div>\n <div class=\"card\"><div class=\"card-label\">\ud83d\udde3\ufe0f Expressions cl\u00e9s<\/div>\n <div class=\"vocab-grid\">\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Identit\u00e9<\/div><div class=\"vocab-fr\">Je m’appelle…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je mappelle')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">M\u0103 numesc… \/ M\u0103 cheam\u0103…<\/div><div class=\"vocab-ex\">Je m’appelle Sophie.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">\u00c2ge<\/div><div class=\"vocab-fr\">J’ai … ans<\/div><button class=\"speak-btn\" onclick=\"speakFR('Jay vingt ans')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Am … ani<\/div><div class=\"vocab-ex\">J’ai vingt ans.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Nationalit\u00e9<\/div><div class=\"vocab-fr\">Je suis roumain(e)<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je suis roumaine')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Sunt rom\u00e2n(\u0103)<\/div><div class=\"vocab-ex\">Je suis roumaine, de Cluj.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Lieu<\/div><div class=\"vocab-fr\">J’habite \u00e0…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Jabite \u00e0 Bucarest')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Locuiesc la…<\/div><div class=\"vocab-ex\">J’habite \u00e0 Bucarest.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Profession<\/div><div class=\"vocab-fr\">Je suis \u00e9tudiant(e)<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je suis \u00e9tudiante')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Sunt student(\u0103)<\/div><div class=\"vocab-ex\">Je suis \u00e9tudiante en droit.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Profession<\/div><div class=\"vocab-fr\">Je suis professeur(e)<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je suis professeur')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Sunt profesor(\u0103)<\/div><div class=\"vocab-ex\">Je suis professeur de fran\u00e7ais.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Famille<\/div><div class=\"vocab-fr\">J’ai un fr\u00e8re \/ une s\u0153ur<\/div><button class=\"speak-btn\" onclick=\"speakFR('Jay un fr\u00e8re et une s\u0153ur')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Am un frate \/ o sor\u0103<\/div><div class=\"vocab-ex\">J’ai deux s\u0153urs.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Loisirs<\/div><div class=\"vocab-fr\">J’aime…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Jaime la musique')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">\u00cemi place…<\/div><div class=\"vocab-ex\">J’aime la musique et les films.<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:#d1fae5;border-color:#6ee7b7\">\n <div class=\"card-label\" style=\"color:#065f46\">\ud83d\udca1 Diferen\u021ba de gen<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;font-size:0.85rem\">\n <div style=\"background:white;padding:0.8rem;border-radius:8px\"><strong>Masculin<\/strong><br>Je suis <span style=\"color:#3b82f6\">roumain<\/span><br>Je suis <span style=\"color:#3b82f6\">\u00e9tudiant<\/span><br>Je suis <span style=\"color:#3b82f6\">professeur<\/span><\/div>\n <div style=\"background:white;padding:0.8rem;border-radius:8px\"><strong>F\u00e9minin<\/strong><br>Je suis <span style=\"color:#ec4899\">roumain<strong>e<\/strong><\/span><br>Je suis <span style=\"color:#ec4899\">\u00e9tudiant<strong>e<\/strong><\/span><br>Je suis <span style=\"color:#ec4899\">professeur<strong>e<\/strong><\/span><\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s2','grammaire','nav-2')\">Continuer : Grammaire \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s2-grammaire\">\n <div class=\"section-header\"><div class=\"section-num\">02 \u00b7 15 min<\/div><h2 class=\"section-title\">\u2699\ufe0f Grammaire<\/h2><p class=\"section-desc\">Verbele \u00caTRE \u0219i AVOIR la prezent \u00b7 Cele mai importante verbe \u00een francez\u0103!<\/p><\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem\">\n <div class=\"card\">\n <div class=\"card-label\" style=\"color:#10b981\">Verbe \u00caTRE (a fi)<\/div>\n <table class=\"conj-table\">\n <tr><td>je<\/td><td><strong>suis<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('je suis')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>tu<\/td><td><strong>es<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('tu es')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>il \/ elle<\/td><td><strong>est<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('il \/ elle est')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>nous<\/td><td><strong>sommes<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('nous sommes')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>vous<\/td><td><strong>\u00eates<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('vous \u00eates')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>ils \/ elles<\/td><td><strong>sont<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('ils \/ elles sont')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <\/table>\n <\/div>\n <div class=\"card\">\n <div class=\"card-label\" style=\"color:#3b82f6\">Verbe AVOIR (a avea)<\/div>\n <table class=\"conj-table\">\n <tr><td>j’<\/td><td><strong>ai<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('jay')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>tu<\/td><td><strong>as<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('tu as')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>il \/ elle<\/td><td><strong>a<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('il \/ elle a')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>nous<\/td><td><strong>avons<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('nous avons')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>vous<\/td><td><strong>avez<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('vous avez')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>ils \/ elles<\/td><td><strong>ont<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('ils \/ elles ont')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <\/table>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:#fef3c7;border-color:#fcd34d\">\n <div class=\"card-label\" style=\"color:#92400e\">\u26a0\ufe0f Aten\u021bie – V\u00e2rsta \u00een francez\u0103!<\/div>\n <p style=\"font-size:0.88rem;color:#78350f\">\u00cen francez\u0103, v\u00e2rsta se exprim\u0103 cu <strong>AVOIR<\/strong>, nu cu \u00caTRE:<br>\n \u274c <del>Je suis 25 ans<\/del> \u2705 <strong>J’ai 25 ans<\/strong> (am 25 de ani)<br>\n \u274c <del>Je suis faim<\/del> \u2705 <strong>J’ai faim<\/strong> (mi-e foame)<\/p>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s2','dialogue','nav-2')\">Continuer : Dialogue \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s2-dialogue\">\n <div class=\"section-header\"><div class=\"section-num\">03 \u00b7 15 min<\/div><h2 class=\"section-title\">\ud83c\udfa7 Dialogue – Deux pr\u00e9sentations<\/h2><\/div>\n <div style=\"margin-bottom:1.5rem\">\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1rem;font-weight:700;margin-bottom:0.7rem\">\ud83c\udf99\ufe0f Dialogue 1 – Pr\u00e9sentation formelle<\/div>\n <div class=\"audio-player\" id=\"l2-audio-1\">\n <button class=\"play-btn\" onclick=\"toggleAudio('l2-audio-1')\"><svg width=\"13\" height=\"15\" viewBox=\"0 0 14 16\" fill=\"none\"><path d=\"M0 0L14 8L0 16V0Z\" fill=\"#064e3b\"\/><\/svg><\/button>\n <div class=\"audio-info\"><div class=\"audio-title\">Sophie se pr\u00e9sente \u00e0 la classe<\/div><div class=\"audio-track\">Pr\u00e9sentation \u00b7 Registre formel \u00b7 A1<\/div>\n <div class=\"waveform\" id=\"l2-audio-1-wave\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"progress-bar\" id=\"l2-audio-1-bar\"><div class=\"progress-fill\" id=\"l2-audio-1-fill\"><\/div><\/div>\n <\/div>\n <div class=\"audio-time\" id=\"l2-audio-1-time\">0:00<\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\ud83d\udcdc Transcription<\/div>\n <div class=\"dialogue-wrap\">\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#10b981\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Sophie<\/div><div class=\"line-fr\"><span class=\"hl\">Bonjour<\/span> ! <span class=\"hl\">Je m’appelle<\/span> Sophie Martin. <span class=\"hl\">J’ai<\/span> vingt-trois ans.<\/div><div class=\"line-ro\">Bun\u0103 ziua! M\u0103 numesc Sophie Martin. Am dou\u0103zeci \u0219i trei de ani.<\/div><\/div><\/div>\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#10b981\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Sophie<\/div><div class=\"line-fr\"><span class=\"hl\">Je suis<\/span> fran\u00e7aise, <span class=\"hl\">j’habite \u00e0<\/span> Lyon. <span class=\"hl\">Je suis<\/span> \u00e9tudiante en m\u00e9decine.<\/div><div class=\"line-ro\">Sunt francez\u0103, locuiesc la Lyon. Sunt student\u0103 la medicin\u0103.<\/div><\/div><\/div>\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#10b981\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Sophie<\/div><div class=\"line-fr\"><span class=\"hl\">J’aime<\/span> lire, voyager et \u00e9couter de la musique. Enchant\u00e9 de vous conna\u00eetre !<\/div><div class=\"line-ro\">\u00cemi place s\u0103 citesc, s\u0103 c\u0103l\u0103toresc \u0219i s\u0103 ascult muzic\u0103. \u00cenc\u00e2ntat de cuno\u0219tin\u021b\u0103!<\/div><\/div><\/div>\n <\/div>\n <button class=\"reveal-btn\" onclick=\"toggleReveal(this,'l2-d1')\">\u25b6 Note<\/button>\n <div class=\"correction-box\" id=\"l2-d1\"><strong>Enchant\u00e9(e)<\/strong> = \u00cenc\u00e2ntat(\u0103) de cuno\u0219tin\u021b\u0103 \u00b7 <strong>Voyager<\/strong> = a c\u0103l\u0103tori \u00b7 <strong>Lire<\/strong> = a citi<\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:#d1fae5;border-color:#6ee7b7\">\n <div class=\"card-label\" style=\"color:#065f46\">\ud83d\udcdd Modelul de prezentare A1<\/div>\n <div style=\"font-size:0.88rem;display:flex;flex-direction:column;gap:0.4rem\">\n <div style=\"background:white;padding:0.6rem;border-radius:8px\">1. <strong>Je m’appelle<\/strong> [prenume + nume].<\/div>\n <div style=\"background:white;padding:0.6rem;border-radius:8px\">2. <strong>J’ai<\/strong> [v\u00e2rst\u0103] <strong>ans<\/strong>.<\/div>\n <div style=\"background:white;padding:0.6rem;border-radius:8px\">3. <strong>Je suis<\/strong> [na\u021bionalitate]. <strong>J’habite \u00e0<\/strong> [ora\u0219].<\/div>\n <div style=\"background:white;padding:0.6rem;border-radius:8px\">4. <strong>Je suis<\/strong> [profesie \/ student].<\/div>\n <div style=\"background:white;padding:0.6rem;border-radius:8px\">5. <strong>J’aime<\/strong> [hobby 1] <strong>et<\/strong> [hobby 2].<\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s2','exercices','nav-2')\">Continuer : Exercices \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s2-exercices\">\n <div class=\"section-header\"><div class=\"section-num\">04 \u00b7 15 min<\/div><h2 class=\"section-title\">\u270f\ufe0f Exercices<\/h2><\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">01<\/div><div><div class=\"ex-type\">Choix multiple<\/div><div class=\"ex-question\">\u00caTRE ou AVOIR ?<\/div><\/div><\/div>\n <div style=\"margin-bottom:1rem\"><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Je ___ 20 ans. \u00bb<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>suis<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>ai<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>es<\/div>\n <\/div>\n <\/div>\n <div style=\"margin-bottom:1rem\"><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Elle ___ \u00e9tudiante. \u00bb<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">A<\/div>est<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">B<\/div>a<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>avons<\/div>\n <\/div>\n <\/div>\n <div><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Nous ___ fran\u00e7ais. \u00bb<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>avons<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>sommes<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>ont<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">02<\/div><div><div class=\"ex-type\">Drag & Drop<\/div><div class=\"ex-question\">Completeaz\u0103 prezentarea<\/div><\/div><\/div>\n <div class=\"word-bank\" id=\"l2-wb\">\n <span class=\"chip\" draggable=\"true\" data-word=\"m'appelle\">m’appelle<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"J'ai\">J’ai<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"Je suis\">Je suis<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"J'habite\">J’habite<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"J'aime\">J’aime<\/span>\n <\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">1.<\/span><span>Je <\/span><span class=\"drop-zone\" data-answer=\"m'appelle\" data-wb=\"l2-wb\"><\/span><span> Ana.<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">2.<\/span><span><\/span><span class=\"drop-zone\" data-answer=\"J'ai\" data-wb=\"l2-wb\"><\/span><span> dix-huit ans.<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">3.<\/span><span><\/span><span class=\"drop-zone\" data-answer=\"Je suis\" data-wb=\"l2-wb\"><\/span><span> roumaine.<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">4.<\/span><span><\/span><span class=\"drop-zone\" data-answer=\"J'habite\" data-wb=\"l2-wb\"><\/span><span> \u00e0 Cluj.<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">5.<\/span><span><\/span><span class=\"drop-zone\" data-answer=\"J'aime\" data-wb=\"l2-wb\"><\/span><span> la danse et le cin\u00e9ma.<\/span><\/div>\n <div style=\"display:flex;gap:0.5rem;margin-top:0.9rem\">\n <button class=\"btn btn-lesson\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"checkDnDById(['s2-exercices'],'l2-dnd-fb','l2-wb')\">\u2713 V\u00e9rifier<\/button>\n <button class=\"btn btn-ink\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"resetDnDById(['s2-exercices'],'l2-dnd-fb','l2-wb')\">\u21ba<\/button>\n <\/div>\n <div id=\"l2-dnd-fb\" style=\"margin-top:0.7rem;font-size:0.85rem;display:none\"><\/div>\n <\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">03<\/div><div><div class=\"ex-type\">\u00c9criture libre<\/div><div class=\"ex-question\">Prezint\u0103-te \u00een francez\u0103!<\/div><div class=\"ex-instruction\">Scrie 3-5 propozi\u021bii despre tine<\/div><\/div><\/div>\n <textarea style=\"width:100%;height:120px;border:2px solid var(--border);border-radius:10px;padding:0.8rem;font-family:'Nunito',sans-serif;font-size:0.88rem;outline:none;resize:vertical\" placeholder=\"Je m'appelle... J'ai... ans. Je suis...\"><\/textarea>\n <button class=\"reveal-btn\" style=\"margin-top:0.5rem\" onclick=\"toggleReveal(this,'l2-ex3-ans')\">\u25b6 Voir un exemple<\/button>\n <div class=\"correction-box\" id=\"l2-ex3-ans\">Je m’appelle <em>Maria<\/em>. J’ai <em>vingt-cinq<\/em> ans. Je suis roumaine et j’habite \u00e0 <em>Bucarest<\/em>. Je suis \u00e9tudiante en \u00e9conomie. J’aime la musique et voyager.<\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s2','bilan','nav-2')\">Continuer : Bilan \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s2-bilan\">\n <div class=\"section-header\"><div class=\"section-num\">05 \u00b7 5 min<\/div><h2 class=\"section-title\">\ud83c\udf1f Bilan<\/h2><\/div>\n <div class=\"plan-grid\">\n <div class=\"card\"><div class=\"card-label\">\u2b50 Auto-\u00e9valuation<\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je peux dire mon nom et mon \u00e2ge<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je conjugue \u00caTRE et AVOIR<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je peux faire une pr\u00e9sentation compl\u00e8te<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\" style=\"background:#fef3c7;border-color:#fcd34d\"><div class=\"card-label\" style=\"color:#92400e\">\ud83d\udcdd Tema acas\u0103<\/div>\n <div style=\"font-size:0.85rem;color:#78350f;display:flex;flex-direction:column;gap:0.5rem\">\n <div>1. Scrie o prezentare de 5-6 propozi\u021bii \u00een caiet<\/div>\n <div>2. Prezint\u0103-te cu voce tare \u00een fa\u021ba oglinzii<\/div>\n <div>3. Memoreaz\u0103 conjugarea lui \u00caTRE \u0219i AVOIR<\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#4c1d95,#8b5cf6);color:white;border:none;cursor:pointer\" onclick=\"openLesson(3)\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">\ud83d\ude80 Lec\u021bia urm\u0103toare<\/div>\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:800\">A2-B1 \u00b7 La Vie Quotidienne \u2192<\/div>\n <div style=\"font-size:0.8rem;color:rgba(255,255,255,0.7);margin-top:0.2rem\">Rutina zilnic\u0103 \u00b7 Imparfait \u00b7 Adverbes<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div style=\"text-align:center;padding:2rem 0\">\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#10b981\">F\u00e9licitations ! \ud83c\udf89<\/div>\n <div style=\"color:var(--muted)\">Ai terminat Le\u00e7on 2 – Se Pr\u00e9senter!<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"lesson-3\" class=\"lesson-screen\" data-lesson=\"3\">\n <div class=\"back-bar\">\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Toutes les le\u00e7ons<\/button>\n <span class=\"back-breadcrumb\">A2 – B1 \u00b7 La Vie Quotidienne<\/span>\n <\/div>\n <div style=\"background:var(--ink);color:white;padding:2.5rem 4vw 3.5rem;text-align:center;position:relative;overflow:hidden\">\n <div style=\"position:absolute;inset:0;background:url(\\\"data:image\/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='rgba(255,255,255,0.07)'\/%3E%3C\/svg%3E\\\") repeat\"><\/div>\n <div style=\"position:relative;display:inline-block;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.75);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;padding:0.25rem 0.9rem;margin-bottom:0.8rem;font-family:'DM Mono',monospace;border-radius:100px\">A2 – B1 \u00b7 Le\u00e7on 3<\/div>\n <div style=\"position:relative;font-family:'Baloo 2',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:white\">\ud83c\udfe0 <span style=\"color:#ede9fe\">La Vie Quotidienne<\/span><\/div>\n <div style=\"position:relative;color:rgba(255,255,255,0.75);margin-top:0.4rem\">Rutina zilnic\u0103 \u00een francez\u0103 \u00b7 Le imparfait \u00b7 Les adverbes<\/div>\n <div style=\"position:absolute;bottom:-1px;left:0;right:0;line-height:0\"><svg viewBox=\"0 0 1440 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M0,20 C360,40 1080,0 1440,20 L1440,40 L0,40 Z\" fill=\"var(--light)\"\/><\/svg><\/div>\n <\/div>\n <nav class=\"lesson-nav\" id=\"nav-3\">\n <button class=\"nav-btn active\" onclick=\"showSec('s3','plan','nav-3')\">\ud83d\udccb Plan<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s3','vocabulaire','nav-3')\">\ud83d\udcac Vocabulaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s3','grammaire','nav-3')\">\u2699\ufe0f Grammaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s3','dialogue','nav-3')\">\ud83c\udfa7 Dialogue<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s3','exercices','nav-3')\">\u270f\ufe0f Exercices<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s3','bilan','nav-3')\">\ud83c\udf1f Bilan<\/button>\n <\/nav>\n <div id=\"s3\">\n <div class=\"section active\" id=\"s3-plan\">\n <div class=\"section-header\"><div class=\"section-num\">00 \u00b7 Introduction<\/div><h2 class=\"section-title\">Plan de la le\u00e7on<\/h2><p class=\"section-desc\">Th\u00e8me : <strong>La vie quotidienne<\/strong> \u00b7 Rutina zilnic\u0103 \u0219i activit\u0103\u021bile obi\u0219nuite<\/p><\/div>\n <div class=\"plan-grid\">\n <div class=\"card\"><div class=\"card-label\">D\u00e9roul\u00e9 \u00b7 1h30<\/div><div class=\"timeline\">\n <div class=\"timeline-item\"><div class=\"tl-time\">0:00 – 0:20<\/div><div class=\"tl-title\">\ud83d\udcac Vocabulaire<\/div><div class=\"tl-desc\">Verbe de rutin\u0103 \u00b7 Adverbe de timp \u00b7 Casa<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:20 – 0:45<\/div><div class=\"tl-title\">\u2699\ufe0f Grammaire<\/div><div class=\"tl-desc\">Le imparfait \u00b7 Formation et usage \u00b7 Comparaison avec pass\u00e9 compos\u00e9<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:45 – 1:05<\/div><div class=\"tl-title\">\ud83c\udfa7 Dialogue audio<\/div><div class=\"tl-desc\">Poveste despre rutina de zi cu zi<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">1:05 – 1:30<\/div><div class=\"tl-title\">\u270f\ufe0f Exercices & Bilan<\/div><\/div>\n <\/div><\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\"><div class=\"card-label\">\ud83c\udfaf Obiective<\/div>\n <ul style=\"list-style:none;padding:0;display:flex;flex-direction:column;gap:0.6rem;font-size:0.88rem\">\n <li>\u23f0 Descrie <strong>rutina zilnic\u0103<\/strong> la prezent<\/li>\n <li>\ud83d\udcc5 Poveste\u0219te despre <strong>trecutul obi\u0219nuit<\/strong> cu imparfait<\/li>\n <li>\ud83c\udfe0 Descrie <strong>casa \u0219i camerele<\/strong><\/li>\n <li>\u26a1 Folose\u0219ti <strong>adverbe de frecven\u021b\u0103<\/strong> (toujours, souvent, jamais)<\/li>\n <\/ul>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#2e1065,#7c3aed);color:white;border:none\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">Con\u021binut<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.7rem\">\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#ede9fe\">20<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">verbe<\/div><\/div>\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#ede9fe\">1<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">timp verbal nou<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s3','vocabulaire','nav-3')\">Commencer \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s3-vocabulaire\">\n <div class=\"section-header\"><div class=\"section-num\">01 \u00b7 20 min<\/div><h2 class=\"section-title\">\ud83d\udcac Vocabulaire<\/h2><p class=\"section-desc\">Verbele rutinei zilnice \u00b7 \ud83d\udd0a Apas\u0103 s\u0103 auzi<\/p><\/div>\n <div class=\"card\"><div class=\"card-label\">\u23f0 Activit\u00e9s quotidiennes – rutina de diminea\u021b\u0103<\/div>\n <div class=\"vocab-grid\">\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Matin<\/div><div class=\"vocab-fr\">se r\u00e9veiller<\/div><button class=\"speak-btn\" onclick=\"speakFR('se r\u00e9veiller')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a se trezi<\/div><div class=\"vocab-ex\">Je me r\u00e9veille \u00e0 7h.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Matin<\/div><div class=\"vocab-fr\">se lever<\/div><button class=\"speak-btn\" onclick=\"speakFR('se lever')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a se ridica \/ a se scula<\/div><div class=\"vocab-ex\">Il se l\u00e8ve t\u00f4t le matin.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Hygi\u00e8ne<\/div><div class=\"vocab-fr\">se doucher<\/div><button class=\"speak-btn\" onclick=\"speakFR('se doucher')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a face du\u0219<\/div><div class=\"vocab-ex\">Elle se douche tous les matins.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Hygi\u00e8ne<\/div><div class=\"vocab-fr\">se brosser les dents<\/div><button class=\"speak-btn\" onclick=\"speakFR('se brosser les dents')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a se sp\u0103la pe din\u021bi<\/div><div class=\"vocab-ex\">Je me brosse les dents deux fois par jour.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Repas<\/div><div class=\"vocab-fr\">prendre le petit-d\u00e9jeuner<\/div><button class=\"speak-btn\" onclick=\"speakFR('prendre le petit d\u00e9jeuner')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a lua micul dejun<\/div><div class=\"vocab-ex\">Nous prenons le petit-d\u00e9jeuner ensemble.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Travail<\/div><div class=\"vocab-fr\">partir au travail<\/div><button class=\"speak-btn\" onclick=\"speakFR('partir au travail')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a pleca la munc\u0103<\/div><div class=\"vocab-ex\">Il part au travail \u00e0 8h30.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Soir<\/div><div class=\"vocab-fr\">rentrer \u00e0 la maison<\/div><button class=\"speak-btn\" onclick=\"speakFR('rentrer \u00e0 la maison')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a se \u00eentoarce acas\u0103<\/div><div class=\"vocab-ex\">Elle rentre \u00e0 la maison \u00e0 18h.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Soir<\/div><div class=\"vocab-fr\">se coucher<\/div><button class=\"speak-btn\" onclick=\"speakFR('se coucher')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">a se culca<\/div><div class=\"vocab-ex\">Ils se couchent vers 23h.<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\u26a1 Adverbes de fr\u00e9quence – c\u00e2t de des?<\/div>\n <div style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:0.7rem\">\n <div style=\"background:#ede9fe;padding:0.8rem;border-radius:10px;text-align:center\"><div style=\"font-family:'Baloo 2',sans-serif;font-weight:700;color:#4c1d95\">toujours<\/div><button class=\"speak-btn\" onclick=\"speakFR('toujours')\">\ud83d\udd0a<\/button><div style=\"font-size:0.78rem;color:var(--muted)\">\u00eentotdeauna (100%)<\/div><\/div>\n <div style=\"background:#ede9fe;padding:0.8rem;border-radius:10px;text-align:center\"><div style=\"font-family:'Baloo 2',sans-serif;font-weight:700;color:#4c1d95\">souvent<\/div><button class=\"speak-btn\" onclick=\"speakFR('souvent')\">\ud83d\udd0a<\/button><div style=\"font-size:0.78rem;color:var(--muted)\">des ori (75%)<\/div><\/div>\n <div style=\"background:#ede9fe;padding:0.8rem;border-radius:10px;text-align:center\"><div style=\"font-family:'Baloo 2',sans-serif;font-weight:700;color:#4c1d95\">parfois<\/div><button class=\"speak-btn\" onclick=\"speakFR('parfois')\">\ud83d\udd0a<\/button><div style=\"font-size:0.78rem;color:var(--muted)\">uneori (50%)<\/div><\/div>\n <div style=\"background:#ede9fe;padding:0.8rem;border-radius:10px;text-align:center\"><div style=\"font-family:'Baloo 2',sans-serif;font-weight:700;color:#4c1d95\">rarement<\/div><button class=\"speak-btn\" onclick=\"speakFR('rarement')\">\ud83d\udd0a<\/button><div style=\"font-size:0.78rem;color:var(--muted)\">rareori (25%)<\/div><\/div>\n <div style=\"background:#ede9fe;padding:0.8rem;border-radius:10px;text-align:center\"><div style=\"font-family:'Baloo 2',sans-serif;font-weight:700;color:#4c1d95\">ne … jamais<\/div><button class=\"speak-btn\" onclick=\"speakFR('jamais')\">\ud83d\udd0a<\/button><div style=\"font-size:0.78rem;color:var(--muted)\">niciodat\u0103 (0%)<\/div><\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s3','grammaire','nav-3')\">Continuer : Grammaire \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s3-grammaire\">\n <div class=\"section-header\"><div class=\"section-num\">02 \u00b7 25 min<\/div><h2 class=\"section-title\">\u2699\ufe0f Le Imparfait<\/h2><p class=\"section-desc\">Trecutul obi\u0219nuit – ce f\u0103ceai \u00een mod repetat<\/p><\/div>\n <div class=\"card\" style=\"background:#ede9fe;border-color:#c4b5fd\">\n <div class=\"card-label\" style=\"color:#4c1d95\">\ud83d\udd70\ufe0f Quand utiliser le imparfait ?<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;font-size:0.88rem\">\n <div style=\"background:white;padding:0.8rem;border-radius:10px;border-left:4px solid #8b5cf6\">\n <strong style=\"color:#4c1d95\">\u2705 Imparfait<\/strong><br>\n Ac\u021biuni repetate \u00een trecut<br>\n <em>Quand j’\u00e9tais enfant, je <strong>jouais<\/strong> au foot tous les jours.<\/em><br>\n <span style=\"font-size:0.76rem;color:var(--muted)\">(C\u00e2nd eram copil, jucam fotbal \u00een fiecare zi.)<\/span>\n <\/div>\n <div style=\"background:white;padding:0.8rem;border-radius:10px;border-left:4px solid #f43f5e\">\n <strong style=\"color:#be185d\">\u2705 Pass\u00e9 compos\u00e9<\/strong><br>\n Ac\u021biuni punctuale, terminate<br>\n <em>Hier, je <strong>ai jou\u00e9<\/strong> au foot.<\/em><br>\n <span style=\"font-size:0.76rem;color:var(--muted)\">(Ieri, am jucat fotbal.)<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\u2699\ufe0f Formation de le imparfait<\/div>\n <div style=\"background:#f5f3ff;padding:1rem;border-radius:10px;margin-bottom:1rem;font-size:0.88rem\">\n <strong>Radical<\/strong> = nous + [pr\u00e9sent] – <strong>-ons<\/strong><br>\n <strong>Terminaisons :<\/strong> -ais, -ais, -ait, -ions, -iez, -aient\n <\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:1rem\">\n <div><div style=\"font-family:'DM Mono',monospace;font-size:0.7rem;color:#8b5cf6;text-transform:uppercase;margin-bottom:0.5rem\">PARLER (nous parlons \u2192 parl-)<\/div>\n <table class=\"conj-table\">\n <tr><td>je<\/td><td>parl<strong>ais<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('je parlais')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>tu<\/td><td>parl<strong>ais<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('tu parlais')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>il\/elle<\/td><td>parl<strong>ait<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('il parlait')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>nous<\/td><td>parl<strong>ions<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('nous parlions')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>vous<\/td><td>parl<strong>iez<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('vous parliez')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>ils\/elles<\/td><td>parl<strong>aient<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('ils parlaient')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <\/table>\n <\/div>\n <div><div style=\"font-family:'DM Mono',monospace;font-size:0.7rem;color:#8b5cf6;text-transform:uppercase;margin-bottom:0.5rem\">\u00caTRE (irr\u00e9gulier \u2192 \u00e9t-)<\/div>\n <table class=\"conj-table\">\n <tr><td>j’<\/td><td>\u00e9t<strong>ais<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('j\u00e9tais')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>tu<\/td><td>\u00e9t<strong>ais<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('tu \u00e9tais')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>il\/elle<\/td><td>\u00e9t<strong>ait<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('il\/elle \u00e9tait')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>nous<\/td><td>\u00e9t<strong>ions<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('nous \u00e9tions')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>vous<\/td><td>\u00e9t<strong>iez<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('vous \u00e9tiez')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>ils\/elles<\/td><td>\u00e9t<strong>aient<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('ils \u00e9taient')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s3','dialogue','nav-3')\">Continuer : Dialogue \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s3-dialogue\">\n <div class=\"section-header\"><div class=\"section-num\">03 \u00b7 20 min<\/div><h2 class=\"section-title\">\ud83c\udfa7 Dialogue audio<\/h2><\/div>\n <div class=\"audio-player\" id=\"l3-audio-1\">\n <button class=\"play-btn\" onclick=\"toggleAudio('l3-audio-1')\"><svg width=\"13\" height=\"15\" viewBox=\"0 0 14 16\" fill=\"none\"><path d=\"M0 0L14 8L0 16V0Z\" fill=\"#2e1065\"\/><\/svg><\/button>\n <div class=\"audio-info\"><div class=\"audio-title\">Ma routine – avant et maintenant<\/div><div class=\"audio-track\">Monologue \u00b7 Imparfait vs Pr\u00e9sent \u00b7 A2-B1<\/div>\n <div class=\"waveform\" id=\"l3-audio-1-wave\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"progress-bar\" id=\"l3-audio-1-bar\"><div class=\"progress-fill\" id=\"l3-audio-1-fill\"><\/div><\/div>\n <\/div>\n <div class=\"audio-time\" id=\"l3-audio-1-time\">0:00<\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\ud83d\udcdc Transcription<\/div>\n <div class=\"dialogue-wrap\">\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#8b5cf6\">\ud83e\uddd1<\/div><div><div class=\"speaker-name\">Thomas<\/div><div class=\"line-fr\">Quand j’<span class=\"hl\">\u00e9tais<\/span> enfant, je <span class=\"hl\">me levais<\/span> toujours \u00e0 six heures. Je <span class=\"hl\">prenais<\/span> le petit-d\u00e9jeuner avec ma famille.<\/div><div class=\"line-ro\">C\u00e2nd eram copil, m\u0103 sculam \u00eentotdeauna la \u0219ase. Luam micul dejun cu familia mea.<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#f43f5e\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Claire<\/div><div class=\"line-fr\">Et maintenant, comment est ta routine ?<\/div><div class=\"line-ro\">\u0218i acum, cum \u00ee\u021bi este rutina?<\/div><\/div><\/div>\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#8b5cf6\">\ud83e\uddd1<\/div><div><div class=\"speaker-name\">Thomas<\/div><div class=\"line-fr\">Maintenant je <span class=\"hl\">me l\u00e8ve<\/span> souvent \u00e0 huit heures. Je <span class=\"hl\">travaille<\/span> \u00e0 domicile, donc c’est plus flexible. Mais je <span class=\"hl\">ne fais jamais<\/span> de sport, c’est dommage !<\/div><div class=\"line-ro\">Acum m\u0103 scol de obicei la opt. Lucrez de acas\u0103, deci e mai flexibil. Dar nu fac niciodat\u0103 sport, p\u0103cat!<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#f43f5e\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">Claire<\/div><div class=\"line-fr\">Moi, je <span class=\"hl\">faisais<\/span> du yoga tous les matins avant. Maintenant je <span class=\"hl\">pr\u00e9f\u00e8re<\/span> courir. C’est mieux pour moi !<\/div><div class=\"line-ro\">Eu f\u0103ceam yoga \u00een fiecare diminea\u021b\u0103 \u00eenainte. Acum prefer s\u0103 alerg. E mai bine pentru mine!<\/div><\/div><\/div>\n <\/div>\n <button class=\"reveal-btn\" onclick=\"toggleReveal(this,'l3-d1')\">\u25b6 Analyse grammaticale<\/button>\n <div class=\"correction-box\" id=\"l3-d1\"><strong>\u00e9tais, me levais, prenais, faisais<\/strong> = imparfait (ac\u021biuni repetate \u00een trecut)<br><strong>me l\u00e8ve, travaille, pr\u00e9f\u00e8re<\/strong> = pr\u00e9sent (rutina actual\u0103)<br><strong>ne fais jamais<\/strong> = nega\u021bie cu adverb de frecven\u021b\u0103<\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s3','exercices','nav-3')\">Continuer : Exercices \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s3-exercices\">\n <div class=\"section-header\"><div class=\"section-num\">04 \u00b7 25 min<\/div><h2 class=\"section-title\">\u270f\ufe0f Exercices<\/h2><\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">01<\/div><div><div class=\"ex-type\">Choix multiple<\/div><div class=\"ex-question\">Pr\u00e9sent ou Imparfait ?<\/div><\/div><\/div>\n <div style=\"margin-bottom:1rem\"><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Quand j’\u00e9tais enfant, je ___ au parc tous les jours. \u00bb<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>vais<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>allais<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>suis all\u00e9<\/div>\n <\/div>\n <\/div>\n <div><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Hier, elle ___ tard. \u00bb (action ponctuelle)<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>se couchait<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>se est couch\u00e9e<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>se couche<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">02<\/div><div><div class=\"ex-type\">Drag & Drop<\/div><div class=\"ex-question\">Completeaz\u0103 cu adverbul potrivit<\/div><\/div><\/div>\n <div class=\"word-bank\" id=\"l3-wb\">\n <span class=\"chip\" draggable=\"true\" data-word=\"toujours\">toujours<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"souvent\">souvent<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"jamais\">jamais<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"parfois\">parfois<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"rarement\">rarement<\/span>\n <\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">1.<\/span><span>Je me brosse <\/span><span class=\"drop-zone\" data-answer=\"toujours\" data-wb=\"l3-wb\"><\/span><span> les dents le soir. (100%)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">2.<\/span><span>Il va <\/span><span class=\"drop-zone\" data-answer=\"souvent\" data-wb=\"l3-wb\"><\/span><span> au cin\u00e9ma le weekend. (75%)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">3.<\/span><span>Elle ne fait <\/span><span class=\"drop-zone\" data-answer=\"jamais\" data-wb=\"l3-wb\"><\/span><span> de sport. (0%)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">4.<\/span><span>Nous cuisinons <\/span><span class=\"drop-zone\" data-answer=\"parfois\" data-wb=\"l3-wb\"><\/span><span> ensemble. (50%)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">5.<\/span><span>Tu arrives <\/span><span class=\"drop-zone\" data-answer=\"rarement\" data-wb=\"l3-wb\"><\/span><span> en retard. (25%)<\/span><\/div>\n <div style=\"display:flex;gap:0.5rem;margin-top:0.9rem\">\n <button class=\"btn btn-lesson\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"checkDnDById(['s3-exercices'],'l3-dnd-fb','l3-wb')\">\u2713 V\u00e9rifier<\/button>\n <button class=\"btn btn-ink\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"resetDnDById(['s3-exercices'],'l3-dnd-fb','l3-wb')\">\u21ba<\/button>\n <\/div>\n <div id=\"l3-dnd-fb\" style=\"margin-top:0.7rem;font-size:0.85rem;display:none\"><\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s3','bilan','nav-3')\">Continuer : Bilan \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s3-bilan\">\n <div class=\"section-header\"><div class=\"section-num\">05 \u00b7 5 min<\/div><h2 class=\"section-title\">\ud83c\udf1f Bilan<\/h2><\/div>\n <div class=\"plan-grid\">\n <div class=\"card\"><div class=\"card-label\">\u2b50 Auto-\u00e9valuation<\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je connais les verbes de routine<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je forme le imparfait correctement<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je utilise les adverbes de fr\u00e9quence<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\" style=\"background:#fef3c7;border-color:#fcd34d\"><div class=\"card-label\" style=\"color:#92400e\">\ud83d\udcdd Tema acas\u0103<\/div>\n <div style=\"font-size:0.85rem;color:#78350f;display:flex;flex-direction:column;gap:0.5rem\">\n <div>1. Descrie rutina ta zilnic\u0103 (5-6 propozi\u021bii la prezent)<\/div>\n <div>2. Scrie ce f\u0103ceai \u00een copil\u0103rie (5-6 propozi\u021bii la imparfait)<\/div>\n <div>3. Conjug\u0103: faire, aller, vouloir la imparfait<\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#7c2d12,#ea580c);color:white;border:none;cursor:pointer\" onclick=\"openLesson(4)\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">\ud83d\ude80 Lec\u021bia urm\u0103toare<\/div>\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:800\">B1-B2 \u00b7 Exprimer son Opinion \u2192<\/div>\n <div style=\"font-size:0.8rem;color:rgba(255,255,255,0.7);margin-top:0.2rem\">Connecteurs \u00b7 Subjonctif \u00b7 Nuancer<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div style=\"text-align:center;padding:2rem 0\">\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#8b5cf6\">F\u00e9licitations ! \ud83c\udf89<\/div>\n <div style=\"color:var(--muted)\">Ai terminat Le\u00e7on 3 – La Vie Quotidienne!<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"lesson-4\" class=\"lesson-screen\" data-lesson=\"4\">\n <div class=\"back-bar\">\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Toutes les le\u00e7ons<\/button>\n <span class=\"back-breadcrumb\">B1 – B2 \u00b7 Exprimer son Opinion<\/span>\n <\/div>\n <div style=\"background:var(--ink);color:white;padding:2.5rem 4vw 3.5rem;text-align:center;position:relative;overflow:hidden\">\n <div style=\"position:absolute;inset:0;background:url(\\\"data:image\/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='rgba(255,255,255,0.07)'\/%3E%3C\/svg%3E\\\") repeat\"><\/div>\n <div style=\"position:relative;display:inline-block;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.75);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;padding:0.25rem 0.9rem;margin-bottom:0.8rem;font-family:'DM Mono',monospace;border-radius:100px\">B1 – B2 \u00b7 Le\u00e7on 4<\/div>\n <div style=\"position:relative;font-family:'Baloo 2',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:white\">\ud83d\udcac <span style=\"color:#ffedd5\">Exprimer son Opinion<\/span><\/div>\n <div style=\"position:relative;color:rgba(255,255,255,0.75);margin-top:0.4rem\">Opinia, argumentarea, nuan\u021barea \u00b7 Connecteurs \u00b7 Subjonctif<\/div>\n <div style=\"position:absolute;bottom:-1px;left:0;right:0;line-height:0\"><svg viewBox=\"0 0 1440 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M0,20 C360,40 1080,0 1440,20 L1440,40 L0,40 Z\" fill=\"var(--light)\"\/><\/svg><\/div>\n <\/div>\n <nav class=\"lesson-nav\" id=\"nav-4\">\n <button class=\"nav-btn active\" onclick=\"showSec('s4','plan','nav-4')\">\ud83d\udccb Plan<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s4','vocabulaire','nav-4')\">\ud83d\udcac Vocabulaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s4','grammaire','nav-4')\">\u2699\ufe0f Grammaire<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s4','dialogue','nav-4')\">\ud83c\udfa7 Dialogue<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s4','exercices','nav-4')\">\u270f\ufe0f Exercices<\/button>\n <button class=\"nav-btn\" onclick=\"showSec('s4','bilan','nav-4')\">\ud83c\udf1f Bilan<\/button>\n <\/nav>\n <div id=\"s4\">\n <div class=\"section active\" id=\"s4-plan\">\n <div class=\"section-header\"><div class=\"section-num\">00 \u00b7 Introduction<\/div><h2 class=\"section-title\">Plan de la le\u00e7on<\/h2><p class=\"section-desc\">Th\u00e8me : <strong>Exprimer son opinion<\/strong> \u00b7 Cum \u00ee\u021bi exprimi opinia \u0219i argumentezi<\/p><\/div>\n <div class=\"plan-grid\">\n <div class=\"card\"><div class=\"card-label\">D\u00e9roul\u00e9 \u00b7 1h30<\/div><div class=\"timeline\">\n <div class=\"timeline-item\"><div class=\"tl-time\">0:00 – 0:20<\/div><div class=\"tl-title\">\ud83d\udcac Vocabulaire<\/div><div class=\"tl-desc\">15 expressions pour donner et nuancer son opinion<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:20 – 0:45<\/div><div class=\"tl-title\">\u2699\ufe0f Grammaire<\/div><div class=\"tl-desc\">Le subjonctif pr\u00e9sent \u00b7 Connecteurs logiques<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">0:45 – 1:05<\/div><div class=\"tl-title\">\ud83c\udfa7 Dialogue audio<\/div><div class=\"tl-desc\">D\u00e9bat authentique sur un sujet de soci\u00e9t\u00e9<\/div><\/div>\n <div class=\"timeline-item\"><div class=\"tl-time\">1:05 – 1:30<\/div><div class=\"tl-title\">\u270f\ufe0f Exercices & Bilan<\/div><\/div>\n <\/div><\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\"><div class=\"card-label\">\ud83c\udfaf Obiective<\/div>\n <ul style=\"list-style:padding:0;display:flex;flex-direction:column;gap:0.6rem;font-size:0.88rem;list-style:none\">\n <li>\ud83d\udde3\ufe0f Exprimi <strong>opinia<\/strong> cu nuan\u021b\u0103 \u0219i elegan\u021b\u0103<\/li>\n <li>\ud83d\udd17 Folose\u0219ti <strong>conectori logici<\/strong> pentru a argumenta<\/li>\n <li>\u2699\ufe0f Construie\u0219ti propozi\u021bii cu <strong>subjonctivul<\/strong><\/li>\n <li>\ud83e\udd1d Concezi \u0219i <strong>contraargumentezi<\/strong> politicos<\/li>\n <\/ul>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#431407,#ea580c);color:white;border:none\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">Con\u021binut<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.7rem\">\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#ffedd5\">15<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">expresii<\/div><\/div>\n <div style=\"text-align:center;padding:0.7rem;background:rgba(255,255,255,0.1);border-radius:10px\"><div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#ffedd5\">8<\/div><div style=\"font-size:0.62rem;opacity:0.6;font-family:'DM Mono',monospace;text-transform:uppercase\">conectori<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s4','vocabulaire','nav-4')\">Commencer \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s4-vocabulaire\">\n <div class=\"section-header\"><div class=\"section-num\">01 \u00b7 20 min<\/div><h2 class=\"section-title\">\ud83d\udcac Exprimer et nuancer<\/h2><p class=\"section-desc\">15 expressions essentielles \u00b7 \ud83d\udd0a Apas\u0103 s\u0103 auzi<\/p><\/div>\n <div class=\"card\"><div class=\"card-label\">\ud83d\udde3\ufe0f Donner son opinion – a-\u021bi da cu p\u0103rerea<\/div>\n <div class=\"vocab-grid\">\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Opinion<\/div><div class=\"vocab-fr\">\u00c0 mon avis…<\/div><button class=\"speak-btn\" onclick=\"speakFR('\u00c0 mon avis')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Dup\u0103 mine… \/ Din punctul meu de vedere…<\/div><div class=\"vocab-ex\">\u00c0 mon avis, c’est une bonne id\u00e9e.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Opinion<\/div><div class=\"vocab-fr\">Je pense que…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je pense que')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Cred c\u0103… \/ Consider c\u0103…<\/div><div class=\"vocab-ex\">Je pense que nous devons agir.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Opinion<\/div><div class=\"vocab-fr\">Il me semble que…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Il me semble que')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Mi se pare c\u0103…<\/div><div class=\"vocab-ex\">Il me semble que la situation est grave.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Accord<\/div><div class=\"vocab-fr\">Je suis tout \u00e0 fait d’accord.<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je suis tout \u00e0 fait dacord')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Sunt complet de acord.<\/div><div class=\"vocab-ex\">Je suis tout \u00e0 fait d’accord avec vous.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">D\u00e9saccord<\/div><div class=\"vocab-fr\">Je ne suis pas d’accord.<\/div><button class=\"speak-btn\" onclick=\"speakFR('Je ne suis pas dacord')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Nu sunt de acord.<\/div><div class=\"vocab-ex\">Permettez-moi de ne pas \u00eatre d’accord.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Nuance<\/div><div class=\"vocab-fr\">Certes… mais…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Certes, mais')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Desigur… dar… \/ E adev\u0103rat c\u0103… dar…<\/div><div class=\"vocab-ex\">Certes, c’est cher, mais \u00e7a vaut le coup.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Nuance<\/div><div class=\"vocab-fr\">Cependant…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Cependant')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Cu toate acestea… \/ Totu\u0219i…<\/div><div class=\"vocab-ex\">C’est bien. Cependant, il y a des risques.<\/div><\/div>\n <div class=\"vocab-card\"><div class=\"vocab-cat\">Concession<\/div><div class=\"vocab-fr\">Il n’emp\u00eache que…<\/div><button class=\"speak-btn\" onclick=\"speakFR('Il nemp\u00eache que')\">\ud83d\udd0a<\/button><div class=\"vocab-ro\">Cu toate acestea… \/ R\u0103m\u00e2ne c\u0103…<\/div><div class=\"vocab-ex\">Il n’emp\u00eache que c’est un probl\u00e8me r\u00e9el.<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\ud83d\udd17 Connecteurs logiques<\/div>\n <div style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.7rem;font-size:0.85rem\">\n <div style=\"background:#ffedd5;padding:0.8rem;border-radius:10px\"><strong style=\"color:#c2410c\">car \/ parce que<\/strong><button class=\"speak-btn\" onclick=\"speakFR('car, parce que')\">\ud83d\udd0a<\/button><br><span style=\"color:var(--muted)\">pentru c\u0103 (cauza)<\/span><br><em>Je refuse car c’est injuste.<\/em><\/div>\n <div style=\"background:#ffedd5;padding:0.8rem;border-radius:10px\"><strong style=\"color:#c2410c\">donc \/ ainsi<\/strong><button class=\"speak-btn\" onclick=\"speakFR('donc, ainsi')\">\ud83d\udd0a<\/button><br><span style=\"color:var(--muted)\">deci (concluzie)<\/span><br><em>Il pleut, donc je reste.<\/em><\/div>\n <div style=\"background:#ffedd5;padding:0.8rem;border-radius:10px\"><strong style=\"color:#c2410c\">bien que + subj.<\/strong><button class=\"speak-btn\" onclick=\"speakFR('bien que')\">\ud83d\udd0a<\/button><br><span style=\"color:var(--muted)\">de\u0219i (concesie)<\/span><br><em>Bien que il soit tard…<\/em><\/div>\n <div style=\"background:#ffedd5;padding:0.8rem;border-radius:10px\"><strong style=\"color:#c2410c\">en revanche<\/strong><button class=\"speak-btn\" onclick=\"speakFR('en revanche')\">\ud83d\udd0a<\/button><br><span style=\"color:var(--muted)\">\u00een schimb (opozi\u021bie)<\/span><br><em>C’est cher, en revanche c’est beau.<\/em><\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s4','grammaire','nav-4')\">Continuer : Grammaire \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s4-grammaire\">\n <div class=\"section-header\"><div class=\"section-num\">02 \u00b7 25 min<\/div><h2 class=\"section-title\">\u2699\ufe0f Le Subjonctif pr\u00e9sent<\/h2><p class=\"section-desc\">Modul subiectivit\u0103\u021bii – dorin\u021b\u0103, \u00eendoial\u0103, emo\u021bie<\/p><\/div>\n <div class=\"card\" style=\"background:#ffedd5;border-color:#fdba74\">\n <div class=\"card-label\" style=\"color:#7c2d12\">\ud83e\udd14 Quand utiliser le subjonctif ?<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;font-size:0.85rem\">\n <div style=\"background:white;padding:0.8rem;border-radius:10px\">\n <strong>Apr\u00e8s des expressions de :<\/strong><br>\n – dorit: <em>vouloir que, d\u00e9sirer que<\/em><br>\n – emo\u021bie: <em>\u00eatre content que, regretter que<\/em><br>\n – \u00eendoial\u0103: <em>douter que, ne pas croire que<\/em><br>\n – obliga\u021bie: <em>il faut que, il est n\u00e9cessaire que<\/em>\n <\/div>\n <div style=\"background:white;padding:0.8rem;border-radius:10px\">\n <strong>Exemple :<\/strong><br>\n \u2705 Je veux que tu <strong>viennes<\/strong>.<br>\n <span style=\"color:var(--muted);font-size:0.78rem\">Vreau s\u0103 vii. (subjonctif)<\/span><br><br>\n \u2705 Il faut que nous <strong>partions<\/strong>.<br>\n <span style=\"color:var(--muted);font-size:0.78rem\">Trebuie s\u0103 plec\u0103m.<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\u2699\ufe0f Formation – AVOIR et \u00caTRE au subjonctif<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:1rem\">\n <div><div style=\"font-family:'DM Mono',monospace;font-size:0.7rem;color:#ea580c;text-transform:uppercase;margin-bottom:0.5rem\">AVOIR (irr\u00e9gulier)<\/div>\n <table class=\"conj-table\">\n <tr><td>que j’<\/td><td><strong>aie<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que jaye')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que tu<\/td><td><strong>aies<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que tu aies')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que il\/elle<\/td><td><strong>ait<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('kil ait')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que nous<\/td><td><strong>ayons<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que nous ayons')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que vous<\/td><td><strong>ayez<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que vous ayez')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que ils\/elles<\/td><td><strong>aient<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('kils aient')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <\/table>\n <\/div>\n <div><div style=\"font-family:'DM Mono',monospace;font-size:0.7rem;color:#ea580c;text-transform:uppercase;margin-bottom:0.5rem\">\u00caTRE (irr\u00e9gulier)<\/div>\n <table class=\"conj-table\">\n <tr><td>que je<\/td><td><strong>sois<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que je sois')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que tu<\/td><td><strong>sois<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que tu sois')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que il\/elle<\/td><td><strong>soit<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('kil soit')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que nous<\/td><td><strong>soyons<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que nous soyons')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que vous<\/td><td><strong>soyez<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('que vous soyez')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <tr><td>que ils\/elles<\/td><td><strong>soient<\/strong> <button class=\"speak-btn\" onclick=\"speakFR('kils soient')\">\ud83d\udd0a<\/button><\/td><\/tr>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s4','dialogue','nav-4')\">Continuer : Dialogue \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s4-dialogue\">\n <div class=\"section-header\"><div class=\"section-num\">03 \u00b7 20 min<\/div><h2 class=\"section-title\">\ud83c\udfa7 D\u00e9bat – Les r\u00e9seaux sociaux<\/h2><\/div>\n <div class=\"audio-player\" id=\"l4-audio-1\">\n <button class=\"play-btn\" onclick=\"toggleAudio('l4-audio-1')\"><svg width=\"13\" height=\"15\" viewBox=\"0 0 14 16\" fill=\"none\"><path d=\"M0 0L14 8L0 16V0Z\" fill=\"#431407\"\/><\/svg><\/button>\n <div class=\"audio-info\"><div class=\"audio-title\">Faut-il limiter les r\u00e9seaux sociaux ?<\/div><div class=\"audio-track\">D\u00e9bat \u00b7 Registre soutenu \u00b7 B1-B2<\/div>\n <div class=\"waveform\" id=\"l4-audio-1-wave\"><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"progress-bar\" id=\"l4-audio-1-bar\"><div class=\"progress-fill\" id=\"l4-audio-1-fill\"><\/div><\/div>\n <\/div>\n <div class=\"audio-time\" id=\"l4-audio-1-time\">0:00<\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-label\">\ud83d\udcdc Transcription<\/div>\n <div class=\"dialogue-wrap\">\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#ea580c\">\ud83e\uddd1<\/div><div><div class=\"speaker-name\">Alex<\/div><div class=\"line-fr\"><span class=\"hl\">\u00c0 mon avis<\/span>, il faut qu’on <span class=\"hl\">limite<\/span> les r\u00e9seaux sociaux pour les jeunes. <span class=\"hl\">Je pense que<\/span> c’est devenu dangereux.<\/div><div class=\"line-ro\">Dup\u0103 mine, trebuie s\u0103 limit\u0103m re\u021belele sociale pentru tineri. Cred c\u0103 a devenit periculos.<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#ca8a04\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">L\u00e9a<\/div><div class=\"line-fr\"><span class=\"hl\">Certes<\/span>, il y a des risques, <span class=\"hl\">cependant<\/span> je ne suis pas enti\u00e8rement d’accord. Ces plateformes permettent aussi de cr\u00e9er des liens.<\/div><div class=\"line-ro\">Desigur, exist\u0103 riscuri, cu toate acestea nu sunt complet de acord. Aceste platforme permit \u0219i crearea de leg\u0103turi.<\/div><\/div><\/div>\n <div class=\"dialogue-line a\"><div class=\"speaker-bubble a\" style=\"background:#ea580c\">\ud83e\uddd1<\/div><div><div class=\"speaker-name\">Alex<\/div><div class=\"line-fr\"><span class=\"hl\">Il n’emp\u00eache que<\/span> les \u00e9tudes montrent une augmentation de l’anxi\u00e9t\u00e9 chez les adolescents. <span class=\"hl\">Par cons\u00e9quent<\/span>, je pense que il faut agir.<\/div><div class=\"line-ro\">Cu toate acestea, studiile arat\u0103 o cre\u0219tere a anxiet\u0103\u021bii la adolescen\u021bi. Prin urmare, cred c\u0103 trebuie s\u0103 ac\u021bion\u0103m.<\/div><\/div><\/div>\n <div class=\"dialogue-line b\"><div class=\"speaker-bubble b\" style=\"background:#ca8a04\">\ud83d\udc69<\/div><div><div class=\"speaker-name\">L\u00e9a<\/div><div class=\"line-fr\"><span class=\"hl\">Je suis d’accord<\/span> sur ce point. <span class=\"hl\">En revanche<\/span>, la solution ne est peut-\u00eatre pas d’interdire, mais de \u00e9duquer.<\/div><div class=\"line-ro\">Sunt de acord pe acest punct. \u00cen schimb, solu\u021bia poate nu este s\u0103 interzicem, ci s\u0103 educ\u0103m.<\/div><\/div><\/div>\n <\/div>\n <button class=\"reveal-btn\" onclick=\"toggleReveal(this,'l4-d1')\">\u25b6 Analyse des connecteurs<\/button>\n <div class=\"correction-box\" id=\"l4-d1\"><strong>Certes… cependant<\/strong> = concesie elegant\u0103 \u00b7 <strong>Il n’emp\u00eache que<\/strong> = revenire la argument \u00b7 <strong>Par cons\u00e9quent<\/strong> = concluzie logic\u0103 \u00b7 <strong>En revanche<\/strong> = opozi\u021bie<\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s4','exercices','nav-4')\">Continuer : Exercices \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s4-exercices\">\n <div class=\"section-header\"><div class=\"section-num\">04 \u00b7 25 min<\/div><h2 class=\"section-title\">\u270f\ufe0f Exercices<\/h2><\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">01<\/div><div><div class=\"ex-type\">Choix multiple<\/div><div class=\"ex-question\">Indicatif ou Subjonctif ?<\/div><\/div><\/div>\n <div style=\"margin-bottom:1rem\"><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Je veux que tu ___ demain. \u00bb (venir)<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>viens<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>viennes<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>venez<\/div>\n <\/div>\n <\/div>\n <div><div style=\"font-weight:700;margin-bottom:0.4rem;font-size:0.9rem\">\u00ab Il est important que nous ___ prudents. \u00bb (\u00eatre)<\/div>\n <div class=\"mcq-options\">\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">A<\/div>sommes<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,true)\"><div class=\"opt-letter\">B<\/div>soyons<\/div>\n <div class=\"mcq-option\" onclick=\"selectMCQ(this,false)\"><div class=\"opt-letter\">C<\/div>\u00e9tions<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">02<\/div><div><div class=\"ex-type\">Drag & Drop \u00b7 Connecteurs<\/div><div class=\"ex-question\">Completeaz\u0103 cu conectorul potrivit<\/div><\/div><\/div>\n <div class=\"word-bank\" id=\"l4-wb\">\n <span class=\"chip\" draggable=\"true\" data-word=\"car\">car<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"donc\">donc<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"cependant\">cependant<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"en revanche\">en revanche<\/span>\n <span class=\"chip\" draggable=\"true\" data-word=\"bien que\">bien que<\/span>\n <\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">1.<\/span><span>Il est absent <\/span><span class=\"drop-zone\" data-answer=\"car\" data-wb=\"l4-wb\"><\/span><span> il est malade. (cauza)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">2.<\/span><span>Il pleut, <\/span><span class=\"drop-zone\" data-answer=\"donc\" data-wb=\"l4-wb\"><\/span><span> nous restons \u00e0 la maison. (concluzie)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">3.<\/span><span>C’est beau, <\/span><span class=\"drop-zone\" data-answer=\"cependant\" data-wb=\"l4-wb\"><\/span><span> c’est trop cher. (opozi\u021bie)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">4.<\/span><span>Paris est cher. <\/span><span class=\"drop-zone\" data-answer=\"en revanche\" data-wb=\"l4-wb\"><\/span><span>, c’est magnifique. (contrast)<\/span><\/div>\n <div class=\"fill-sentence-interactive\"><span class=\"sent-num\">5.<\/span><span><\/span><span class=\"drop-zone\" data-answer=\"bien que\" data-wb=\"l4-wb\"><\/span><span> ce soit difficile, je continuerai. (concesie)<\/span><\/div>\n <div style=\"display:flex;gap:0.5rem;margin-top:0.9rem\">\n <button class=\"btn btn-lesson\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"checkDnDById(['s4-exercices'],'l4-dnd-fb','l4-wb')\">\u2713 V\u00e9rifier<\/button>\n <button class=\"btn btn-ink\" style=\"font-size:0.78rem;padding:0.45rem 1rem\" onclick=\"resetDnDById(['s4-exercices'],'l4-dnd-fb','l4-wb')\">\u21ba<\/button>\n <\/div>\n <div id=\"l4-dnd-fb\" style=\"margin-top:0.7rem;font-size:0.85rem;display:none\"><\/div>\n <\/div>\n <div class=\"exercise-block\">\n <div class=\"ex-header\"><div class=\"ex-num\">03<\/div><div><div class=\"ex-type\">Expression \u00e9crite<\/div><div class=\"ex-question\">D\u0103-\u021bi opinia pe o tem\u0103<\/div><div class=\"ex-instruction\">Scrie 5-6 propozi\u021bii folosind cel pu\u021bin 3 conectori<\/div><\/div><\/div>\n <div style=\"background:#ffedd5;padding:1rem;border-radius:10px;margin-bottom:0.8rem;font-size:0.9rem;font-style:italic\">\u00ab Faut-il interdire les voitures en centre-ville ? \u00bb (Ar trebui interzise ma\u0219inile \u00een centrul ora\u0219ului?)<\/div>\n <textarea style=\"width:100%;height:130px;border:2px solid var(--border);border-radius:10px;padding:0.8rem;font-family:'Nunito',sans-serif;font-size:0.88rem;outline:none;resize:vertical\" placeholder=\"\u00c0 mon avis... Certes... cependant... Par cons\u00e9quent...\"><\/textarea>\n <button class=\"reveal-btn\" style=\"margin-top:0.5rem\" onclick=\"toggleReveal(this,'l4-ex3-ans')\">\u25b6 Voir un exemple<\/button>\n <div class=\"correction-box\" id=\"l4-ex3-ans\">\u00c0 mon avis, il faudrait limiter la circulation en centre-ville car la pollution est un probl\u00e8me grave. Certes, cela poserait des difficult\u00e9s pour les commer\u00e7ants. Cependant, on pourrait d\u00e9velopper les transports en commun. Par cons\u00e9quent, je pense que c’est une mesure n\u00e9cessaire.<\/div>\n <\/div>\n <button class=\"btn btn-lesson\" onclick=\"showSec('s4','bilan','nav-4')\">Continuer : Bilan \u2192<\/button>\n <\/div>\n\n <div class=\"section\" id=\"s4-bilan\">\n <div class=\"section-header\"><div class=\"section-num\">05 \u00b7 5 min<\/div><h2 class=\"section-title\">\ud83c\udf1f Bilan<\/h2><\/div>\n <div class=\"plan-grid\">\n <div class=\"card\"><div class=\"card-label\">\u2b50 Auto-\u00e9valuation<\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je exprime mon opinion avec nuance<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je utilise les connecteurs logiques<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <div class=\"skill-row\"><div class=\"skill-label\">Je forme le subjonctif correctement<\/div><div style=\"display:flex;gap:0.3rem\"><span class=\"star\" onclick=\"rateStar(this,1)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,2)\">\u2b50<\/span><span class=\"star\" onclick=\"rateStar(this,3)\">\u2b50<\/span><\/div><\/div>\n <\/div>\n <div style=\"display:flex;flex-direction:column;gap:1rem\">\n <div class=\"card\" style=\"background:#ffedd5;border-color:#fdba74\"><div class=\"card-label\" style=\"color:#92400e\">\ud83d\udcdd Tema acas\u0103<\/div>\n <div style=\"font-size:0.85rem;color:#78350f;display:flex;flex-direction:column;gap:0.5rem\">\n <div>1. Scrie un paragraf de opinie de 8-10 propozi\u021bii<\/div>\n <div>2. Memoreaz\u0103 5 conectori \u0219i folosi\u021bi \u00eentr-o conversa\u021bie<\/div>\n <div>3. Conjug\u0103: vouloir, aller, faire la subjonctif<\/div>\n <\/div>\n <\/div>\n <div class=\"card\" style=\"background:linear-gradient(135deg,#1e293b,#334155);color:white;border:none\">\n <div class=\"card-label\" style=\"color:rgba(255,255,255,0.5)\">\ud83c\udfaf Nivelul urm\u0103tor<\/div>\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.1rem;font-weight:800;color:#fbbf24\">B2 – C1 disponibil!<\/div>\n <div style=\"font-size:0.8rem;color:rgba(255,255,255,0.7);margin-top:0.2rem\">La communication persuasive \u00b7 DALF C1<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div style=\"text-align:center;padding:2rem 0\">\n <div style=\"font-family:'Baloo 2',sans-serif;font-size:1.8rem;font-weight:800;color:#ea580c\">F\u00e9licitations ! \ud83c\udf89<\/div>\n <div style=\"color:var(--muted)\">Ai terminat toate cele 4 lec\u021bii! Bravo!<\/div>\n <button class=\"btn btn-ink\" style=\"margin-top:1rem\" onclick=\"goHome()\">\u21a9 \u00cenapoi la toate lec\u021biile<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/\/ \u2500\u2500 Navigation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction goHome() {\n document.getElementById('home').style.display = 'block';\n document.querySelectorAll('.lesson-screen').forEach(l => l.classList.remove('active'));\n window.scrollTo({top:0,behavior:'smooth'});\n}\nfunction openLesson(n) {\n document.getElementById('home').style.display = 'none';\n document.querySelectorAll('.lesson-screen').forEach(l => l.classList.remove('active'));\n document.getElementById('lesson-' + n).classList.add('active');\n window.scrollTo({top:0,behavior:'smooth'});\n}\nfunction showSec(container, section, navId) {\n document.getElementById(container).querySelectorAll('.section').forEach(s => s.classList.remove('active'));\n const target = document.getElementById(container + '-' + section);\n if (target) target.classList.add('active');\n const nav = document.getElementById(navId);\n nav.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));\n const idx = ['plan','vocabulaire','grammaire','dialogue','exercices','bilan'].indexOf(section);\n nav.querySelectorAll('.nav-btn')[idx]?.classList.add('active');\n const bb = document.querySelector('.lesson-screen.active .back-bar');\n if (bb) window.scrollTo({top: bb.getBoundingClientRect().bottom + window.scrollY, behavior:'smooth'});\n}\n\n\/\/ \u2500\u2500 Reveal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction toggleReveal(btn, id) {\n const box = document.getElementById(id);\n if (!box) return;\n const open = box.classList.toggle('show');\n btn.innerHTML = (open ? '\u25bc' : '\u25b6') + btn.innerHTML.slice(1);\n}\n\n\/\/ \u2500\u2500 MCQ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction selectMCQ(el, isCorrect) {\n const group = el.closest('.mcq-options');\n group.querySelectorAll('.mcq-option').forEach(o => { o.classList.remove('correct','wrong'); o.style.pointerEvents='none'; });\n el.classList.add(isCorrect ? 'correct' : 'wrong');\n if (!isCorrect) group.querySelectorAll('.mcq-option').forEach(o => { if (o.getAttribute('onclick')?.includes('true')) o.classList.add('correct'); });\n}\n\n\/\/ \u2500\u2500 Matching \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst matchStates = {};\nfunction doMatch(el, groupId, fbId) {\n if (el.classList.contains('matched-ok')) return;\n if (!matchStates[groupId]) matchStates[groupId] = null;\n const prev = matchStates[groupId];\n if (!prev) {\n document.querySelectorAll(`[onclick*=\"${groupId}\"]`).forEach(m => m.classList.remove('selected'));\n el.classList.add('selected'); matchStates[groupId] = el;\n } else {\n if (prev === el) { el.classList.remove('selected'); matchStates[groupId] = null; return; }\n if (prev.dataset.side === el.dataset.side) {\n document.querySelectorAll(`[onclick*=\"${groupId}\"]`).forEach(m => m.classList.remove('selected'));\n el.classList.add('selected'); matchStates[groupId] = el; return;\n }\n if (prev.dataset.id === el.dataset.id) {\n [prev, el].forEach(m => { m.classList.remove('selected'); m.classList.add('matched-ok'); m.style.pointerEvents='none'; });\n const total = document.querySelectorAll(`[onclick*=\"${groupId}\"][data-side=\"fr\"]`).length;\n const done = document.querySelectorAll(`[onclick*=\"${groupId}\"].matched-ok`).length \/ 2;\n if (done === total) { const fb=document.getElementById(fbId); if(fb){fb.style.display='block';fb.innerHTML='<span style=\"color:#065f46;font-weight:700\">\u2713 Parfait ! \ud83c\udf89<\/span>';} }\n } else {\n [prev, el].forEach(m => { m.classList.add('matched-wrong'); setTimeout(()=>m.classList.remove('matched-wrong','selected'),600); });\n }\n matchStates[groupId] = null;\n }\n}\nfunction resetMatch(groupId, fbId) {\n document.querySelectorAll(`[onclick*=\"${groupId}\"]`).forEach(m => { m.classList.remove('selected','matched-ok','matched-wrong'); m.style.pointerEvents=''; });\n const fb=document.getElementById(fbId); if(fb) fb.style.display='none';\n matchStates[groupId] = null;\n}\n\n\/\/ \u2500\u2500 Drag & Drop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet selectedChip = null;\nfunction placeWord(word, zone) {\n if (zone.dataset.current) returnChip(zone);\n const wbId = zone.dataset.wb;\n const chip = wbId ? document.querySelector(`#${wbId} .chip[data-word=\"${CSS.escape(word)}\"]`)\n : [...document.querySelectorAll('.chip')].find(c => c.dataset.word === word);\n if (chip) chip.classList.add('used');\n zone.textContent = word; zone.classList.add('filled'); zone.classList.remove('correct','wrong');\n zone.dataset.current = word;\n}\nfunction returnChip(zone) {\n const word = zone.dataset.current; if (!word) return;\n const wbId = zone.dataset.wb;\n const chip = wbId ? document.querySelector(`#${wbId} .chip[data-word=\"${CSS.escape(word)}\"]`)\n : [...document.querySelectorAll('.chip')].find(c => c.dataset.word === word);\n if (chip) chip.classList.remove('used');\n}\nfunction checkDnDById(sids, fbId, wbId) {\n let zones = []; sids.forEach(sid => document.querySelectorAll(`#${sid} .drop-zone`).forEach(z => zones.push(z)));\n let correct = 0;\n zones.forEach(zone => {\n if (!zone.dataset.current) return;\n const ok = zone.dataset.current.toLowerCase() === zone.dataset.answer.toLowerCase();\n zone.classList.remove('correct','wrong','filled'); zone.classList.add(ok?'correct':'wrong');\n if (ok) correct++;\n });\n const fb=document.getElementById(fbId); if(!fb) return; fb.style.display='block';\n fb.innerHTML = correct===zones.length ? `<span style=\"color:#065f46;font-weight:700\">\u2713 Parfait ! ${correct}\/${zones.length} \ud83c\udf89<\/span>` : `<span style=\"color:#be185d\">${correct}\/${zones.length} - R\u00e9essaye les cases roses !<\/span>`;\n}\nfunction resetDnDById(sids, fbId, wbId) {\n let zones=[]; sids.forEach(sid => document.querySelectorAll(`#${sid} .drop-zone`).forEach(z=>zones.push(z)));\n zones.forEach(z => { returnChip(z); z.textContent=''; z.classList.remove('filled','correct','wrong'); delete z.dataset.current; });\n document.querySelectorAll(`#${wbId} .chip`).forEach(c=>c.classList.remove('used','selected'));\n const fb=document.getElementById(fbId); if(fb) fb.style.display='none'; selectedChip=null;\n}\nfunction checkDnD(sel,fbId,wbId){\n const zones=document.querySelectorAll(sel); let correct=0;\n zones.forEach(zone=>{ if(!zone.dataset.current)return; const ok=zone.dataset.current.toLowerCase()===zone.dataset.answer.toLowerCase(); zone.classList.remove('correct','wrong','filled'); zone.classList.add(ok?'correct':'wrong'); if(ok)correct++; });\n const fb=document.getElementById(fbId); if(!fb)return; fb.style.display='block';\n fb.innerHTML=correct===zones.length?`<span style=\"color:#065f46;font-weight:700\">\u2713 Parfait ! ${correct}\/${zones.length} \ud83c\udf89<\/span>`:`<span style=\"color:#be185d\">${correct}\/${zones.length} - R\u00e9essaye !<\/span>`;\n}\nfunction resetDnD(sel,fbId,wbId){\n document.querySelectorAll(sel).forEach(z=>{returnChip(z);z.textContent='';z.classList.remove('filled','correct','wrong');delete z.dataset.current;});\n document.querySelectorAll(`#${wbId} .chip`).forEach(c=>c.classList.remove('used','selected'));\n const fb=document.getElementById(fbId); if(fb)fb.style.display='none'; selectedChip=null;\n}\n\n\/\/ \u2500\u2500 Stars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction rateStar(el, val) {\n el.closest('.skill-row').querySelectorAll('.star').forEach((s,i)=>s.classList.toggle('lit',i<val));\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ \u2500\u2500 TTS ENGINE \u2014 voce francez\u0103 garantat\u0103 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n\/\/ Dialoguri corecte \u2014 text francez autentic\nconst dialogueTexts = {\n \"l1-audio-1\": [\n \"Bonjour, Monsieur Dupont !\",\n \"Bonjour, Marie ! Comment allez-vous ?\",\n \"Je vais bien, merci ! Et vous ?\",\n \"Tr\u00e8s bien, merci. Au revoir, Marie !\",\n \"Au revoir, Monsieur !\"\n ],\n \"l1-audio-2\": [\n \"Salut, Emma !\",\n \"Salut ! \u00c7a va ?\",\n \"\u00c7a va bien ! Et toi ?\",\n \"Comme ci comme \u00e7a... \u00c0 bient\u00f4t !\",\n \"Oui, \u00e0 demain !\"\n ],\n \"l2-audio-1\": [\n \"Bonjour ! Je mappelle Sophie Martin. Jay vingt-trois ans.\",\n \"Je suis fran\u00e7aise, jabite \u00e0 Lyon. Je suis \u00e9tudiante en m\u00e9decine.\",\n \"Jaime lire, voyager et \u00e9couter de la musique. Enchant\u00e9 de vous conna\u00eetre !\"\n ],\n \"l3-audio-1\": [\n \"Quand j\u00e9tais enfant, je me levais toujours \u00e0 six heures. Je prenais le petit-d\u00e9jeuner avec ma famille.\",\n \"Et maintenant, comment est ta routine ?\",\n \"Maintenant je me l\u00e8ve souvent \u00e0 huit heures. Je travaille \u00e0 domicile, donc sest plus flexible. Mais je ne fais jamais de sport, sest dommage !\",\n \"Moi, je faisais du yoga tous les matins avant. Maintenant je pr\u00e9f\u00e8re courir. Sest mieux pour moi !\"\n ],\n \"l4-audio-1\": [\n \"\u00c0 mon avis, il faut kon limite les r\u00e9seaux sociaux pour les jeunes. Je pense que sest devenu dangereux.\",\n \"Certes, il y a des risques, cependant je ne suis pas enti\u00e8rement dacord. Ces plateformes permettent aussi de cr\u00e9er des liens.\",\n \"Il nemp\u00eache que les \u00e9tudes montrent une augmentation de lanxi\u00e9t\u00e9 chez les adolescents. Par cons\u00e9quent, je pense kil faut agir.\",\n \"Je suis dacord sur ce point. En revanche, la solution nest peut-\u00eatre pas dinterdire, mais d\u00e9duquer.\"\n ]\n};\n\nconst playIcon = '<svg width=\"13\" height=\"15\" viewBox=\"0 0 14 16\" fill=\"none\"><path d=\"M0 0L14 8L0 16V0Z\" fill=\"currentColor\"\/><\/svg>';\nconst pauseIcon = '<svg width=\"11\" height=\"15\" viewBox=\"0 0 12 16\" fill=\"none\"><rect x=\"0\" y=\"0\" width=\"4\" height=\"16\" fill=\"currentColor\"\/><rect x=\"8\" y=\"0\" width=\"4\" height=\"16\" fill=\"currentColor\"\/><\/svg>';\n\n\/\/ Cache vocea francez\u0103 \u2014 o g\u0103sim o singur\u0103 dat\u0103 \u0219i o re\u021binem\nlet frVoiceCache = null;\nlet voicesLoaded = false;\n\nfunction loadVoices() {\n const all = window.speechSynthesis.getVoices();\n if (all.length === 0) return null;\n voicesLoaded = true;\n \/\/ Prefer\u0103m voci native franceze \u00een ordinea calit\u0103\u021bii\n const priority = ['Google fran\u00e7ais', 'Google French', 'Microsoft Julie', 'Microsoft Henri',\n 'Amelie', 'Thomas', 'Audrey', 'Virginie', 'Nicolas'];\n for (const name of priority) {\n const v = all.find(v => v.name.includes(name));\n if (v) { frVoiceCache = v; return v; }\n }\n \/\/ Fallback: orice voce fr-FR sau fr-*\n frVoiceCache = all.find(v => v.lang === 'fr-FR') || all.find(v => v.lang.startsWith('fr')) || null;\n return frVoiceCache;\n}\n\n\/\/ Preload imediat \u0219i la schimbare\nif (window.speechSynthesis) {\n loadVoices();\n window.speechSynthesis.onvoiceschanged = () => { frVoiceCache = null; loadVoices(); };\n}\n\nfunction getFRVoice() {\n if (frVoiceCache) return frVoiceCache;\n return loadVoices();\n}\n\n\/\/ Construim un utterance corect cu voce francez\u0103\n\/\/ normalizeFR removed \u2014 phonetic text stored directly\n\n\nfunction makeFRUtterance(text, pitchMod) {\n const voices = window.speechSynthesis.getVoices();\n const v = voices.find(v => v.lang === 'fr-FR')\n || voices.find(v => v.lang === 'fr-BE')\n || voices.find(v => v.lang === 'fr-CA')\n || voices.find(v => v.lang === 'fr-CH')\n || voices.find(v => v.lang.startsWith('fr'));\n const utt = new SpeechSynthesisUtterance(text);\n utt.lang = 'fr-FR'; utt.rate = 0.82; utt.pitch = pitchMod || 1.0;\n if (v) utt.voice = v;\n return utt;\n}\n\n\/\/ \u2500\u2500 Butoane \ud83d\udd0a vocabular \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction speakFR(text) {\n if (!window.speechSynthesis) return;\n window.speechSynthesis.cancel();\n\n function trySpeak(attempts) {\n const voices = window.speechSynthesis.getVoices();\n const fr = voices.find(v => v.lang === 'fr-FR')\n || voices.find(v => v.lang === 'fr-BE')\n || voices.find(v => v.lang === 'fr-CA')\n || voices.find(v => v.lang === 'fr-CH')\n || voices.find(v => v.lang.startsWith('fr'));\n if (!fr && attempts < 20) { setTimeout(() => trySpeak(attempts + 1), 150); return; }\n const utt = new SpeechSynthesisUtterance(text);\n utt.lang = 'fr-FR'; utt.rate = 0.82; utt.pitch = 1.0;\n if (fr) utt.voice = fr;\n window.speechSynthesis.speak(utt);\n }\n trySpeak(0);\n}\n\n\/\/ \u2500\u2500 Playere dialogue \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst ttsStates = {};\nconst allAudioIds = ['l1-audio-1','l1-audio-2','l2-audio-1','l3-audio-1','l4-audio-1'];\n\nfunction stopPlayer(id) {\n if (!ttsStates[id]) return;\n ttsStates[id].playing = false;\n const btn = document.querySelector('#' + id + ' .play-btn');\n if (btn) btn.innerHTML = playIcon;\n document.getElementById(id + '-wave')?.classList.remove('playing');\n const fill = document.getElementById(id + '-fill'); if (fill) fill.style.width = '0%';\n const time = document.getElementById(id + '-time'); if (time) time.textContent = '0:00';\n}\n\nfunction toggleAudio(id) {\n if (!window.speechSynthesis) { alert('\u00cencearc\u0103 Chrome sau Edge pentru audio.'); return; }\n\n \/\/ Dac\u0103 ruleaz\u0103 \u2014 stop\n if (ttsStates[id] && ttsStates[id].playing) {\n window.speechSynthesis.cancel();\n stopPlayer(id);\n return;\n }\n\n \/\/ Opre\u0219te tot restul\n window.speechSynthesis.cancel();\n allAudioIds.forEach(oid => { if (oid !== id) stopPlayer(oid); });\n\n const lines = dialogueTexts[id];\n if (!lines || !lines.length) return;\n\n const btn = document.querySelector('#' + id + ' .play-btn');\n const wave = document.getElementById(id + '-wave');\n const fill = document.getElementById(id + '-fill');\n const time = document.getElementById(id + '-time');\n\n ttsStates[id] = { playing: true };\n btn.innerHTML = pauseIcon;\n wave?.classList.add('playing');\n\n function speakLine(idx) {\n if (!ttsStates[id]?.playing || idx >= lines.length) {\n stopPlayer(id); return;\n }\n\n const utt = makeFRUtterance(lines[idx], idx % 2 === 0 ? 1.05 : 0.9);\n\n if (fill) fill.style.width = ((idx + 1) \/ lines.length * 100) + '%';\n if (time) time.textContent = (idx + 1) + ' \/ ' + lines.length;\n\n utt.onend = () => { if (ttsStates[id]?.playing) setTimeout(() => speakLine(idx + 1), 400); };\n utt.onerror = (e) => { console.warn('TTS error', e); if (ttsStates[id]?.playing) setTimeout(() => speakLine(idx + 1), 200); };\n\n window.speechSynthesis.speak(utt);\n }\n\n \/\/ A\u0219tept\u0103m vocile dac\u0103 nu sunt \u00eenc\u0103 gata\n function startWhenReady() {\n if (voicesLoaded || loadVoices()) {\n setTimeout(() => speakLine(0), 100);\n } else {\n let attempts = 0;\n const wait = setInterval(() => {\n attempts++;\n if (loadVoices() || attempts > 30) {\n clearInterval(wait);\n setTimeout(() => speakLine(0), 100);\n }\n }, 100);\n }\n }\n startWhenReady();\n}\n\n\/\/ \u2500\u2500 DOMContentLoaded \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\ndocument.addEventListener('DOMContentLoaded', () => {\n \/\/ Waveform bar heights\n const barH = [6,14,10,18,8,16,12,20,7,15,11,19,9,17,13,18,6,14,10,16,8,12,20,7,15,11,19,9,17,13];\n document.querySelectorAll('.waveform').forEach(wf => wf.querySelectorAll('span').forEach((s,i) => s.style.height = barH[i%barH.length]+'px'));\n\n \/\/ Drag & Drop chips\n document.querySelectorAll('.chip').forEach(chip => {\n chip.addEventListener('dragstart', e => e.dataTransfer.setData('text\/plain', chip.dataset.word));\n chip.addEventListener('click', () => {\n if (chip.classList.contains('used')) return;\n document.querySelectorAll('.chip').forEach(c => c.classList.remove('selected'));\n if (selectedChip === chip) { selectedChip = null; return; }\n selectedChip = chip; chip.classList.add('selected');\n });\n });\n document.querySelectorAll('.drop-zone').forEach(zone => {\n zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('drag-over'); });\n zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));\n zone.addEventListener('drop', e => { e.preventDefault(); zone.classList.remove('drag-over'); placeWord(e.dataTransfer.getData('text\/plain'), zone); });\n zone.addEventListener('click', () => {\n if (selectedChip) {\n if (zone.dataset.current) returnChip(zone);\n placeWord(selectedChip.dataset.word, zone);\n selectedChip.classList.remove('selected'); selectedChip = null;\n } else if (zone.dataset.current) {\n returnChip(zone); zone.textContent=''; zone.classList.remove('filled','correct','wrong'); delete zone.dataset.current;\n }\n });\n });\n\n \/\/ Progress bar click (nu mai avem audio HTML5, deci ignor\u0103m)\n});\n<\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Fran\u00e7ais \u00b7 Cours complet Pre A1 \u2192 B2 Cours de fran\u00e7ais \u00b7 Pre A1 \u2192 B2 Apprenons le Fran\u00e7ais ! S\u0103 \u00eenv\u0103\u021b\u0103m franceza \u00eempreun\u0103 \u00b7 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"pmpro_default_level":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-1644","page","type-page","status-publish","hentry","pmpro-has-access"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1644"}],"version-history":[{"count":1,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1644\/revisions"}],"predecessor-version":[{"id":1645,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1644\/revisions\/1645"}],"wp:attachment":[{"href":"https:\/\/geoisteaching.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}