Le\u00e7on A1-A2 \u2013 La maison & les activit\u00e9s<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700;800&family=Playfair+Display:ital,wght@0,600;1,400&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --coral: #E8633A;\n --coral-light: #F4956E;\n --coral-pale: #FEF0EB;\n --yellow: #F5C842;\n --yellow-pale: #FFFBE8;\n --teal: #2A9D8F;\n --teal-pale: #E8F8F6;\n --purple: #7B5EA7;\n --purple-pale: #F0EBF8;\n --cream: #FFFCF8;\n --dark: #2D2416;\n --mid: #5A4E3C;\n --muted: #9A8E7E;\n --green: #2D9E5F;\n --green-pale: #E8F8EF;\n --red: #E63946;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Nunito', sans-serif;\n background: var(--cream);\n color: var(--dark);\n font-size: 17px;\n line-height: 1.7;\n }\n\n \/* HEADER *\/\n .lesson-header {\n background: linear-gradient(135deg, var(--coral) 0%, #D4522A 100%);\n padding: 40px 60px;\n position: relative;\n overflow: hidden;\n }\n\n .lesson-header::before {\n content: '\ud83c\udfe0';\n position: absolute;\n right: 60px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 120px;\n opacity: 0.15;\n pointer-events: none;\n }\n\n .lesson-badge {\n background: var(--yellow);\n color: var(--dark);\n font-size: 12px;\n font-weight: 800;\n letter-spacing: 2px;\n text-transform: uppercase;\n padding: 5px 14px;\n border-radius: 20px;\n margin-bottom: 14px;\n display: inline-block;\n }\n\n .lesson-title {\n font-family: 'Nunito', sans-serif;\n font-size: clamp(24px, 3vw, 42px);\n color: #fff;\n line-height: 1.2;\n font-weight: 800;\n position: relative;\n z-index: 1;\n }\n\n .lesson-title em {\n font-style: italic;\n color: var(--yellow);\n font-family: 'Playfair Display', serif;\n }\n\n .lesson-meta {\n display: flex;\n gap: 20px;\n margin-top: 16px;\n flex-wrap: wrap;\n position: relative;\n z-index: 1;\n }\n\n .meta-item {\n background: rgba(255,255,255,0.15);\n color: #fff;\n font-size: 13px;\n font-weight: 600;\n padding: 4px 12px;\n border-radius: 20px;\n }\n\n \/* NAV *\/\n .section-nav {\n background: #fff;\n border-bottom: 2px solid var(--coral-pale);\n padding: 0 60px;\n display: flex;\n overflow-x: auto;\n position: sticky;\n top: 0;\n z-index: 100;\n box-shadow: 0 2px 12px rgba(0,0,0,0.05);\n }\n\n .sec-btn {\n font-family: 'Nunito', sans-serif;\n font-size: 13px;\n font-weight: 700;\n color: var(--muted);\n background: none;\n border: none;\n border-bottom: 3px solid transparent;\n padding: 16px 14px;\n cursor: pointer;\n white-space: nowrap;\n transition: color 0.2s, border-color 0.2s;\n }\n .sec-btn:hover { color: var(--coral); }\n .sec-btn.active { color: var(--coral); border-bottom-color: var(--coral); }\n\n \/* PROGRESS *\/\n .progress-bar {\n background: var(--coral-pale);\n padding: 10px 60px;\n display: flex;\n align-items: center;\n gap: 16px;\n border-bottom: 1px solid rgba(232,99,58,0.1);\n }\n\n .progress-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--coral); white-space: nowrap; }\n .progress-track { flex: 1; height: 6px; background: rgba(232,99,58,0.15); border-radius: 3px; }\n .progress-fill { height: 100%; background: var(--coral); border-radius: 3px; transition: width 0.4s ease; }\n .progress-pct { font-size: 13px; font-weight: 800; color: var(--coral); white-space: nowrap; }\n\n \/* SECTIONS *\/\n .section { display: none; padding: 50px 60px; max-width: 1000px; margin: 0 auto; animation: fadeIn 0.3s ease; }\n .section.active { display: block; }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .section-label { font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--coral); margin-bottom: 8px; }\n .section-title { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 38px); color: var(--dark); margin-bottom: 36px; line-height: 1.2; }\n\n \/* TTS *\/\n .tts-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n background: none;\n border: 2px solid var(--coral);\n color: var(--coral);\n font-size: 12px;\n font-weight: 700;\n padding: 3px 10px;\n border-radius: 20px;\n cursor: pointer;\n transition: all 0.2s;\n vertical-align: middle;\n margin-left: 6px;\n font-family: 'Nunito', sans-serif;\n }\n .tts-btn:hover, .tts-btn.playing { background: var(--coral); color: #fff; }\n\n \/* PLAN *\/\n .plan-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n margin-bottom: 36px;\n }\n\n .plan-card {\n background: #fff;\n border: 2px solid var(--coral-pale);\n border-radius: 12px;\n padding: 20px;\n text-align: center;\n transition: border-color 0.2s;\n }\n .plan-card:hover { border-color: var(--coral-light); }\n\n .plan-emoji { font-size: 36px; margin-bottom: 10px; }\n .plan-time { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--coral); margin-bottom: 6px; }\n .plan-title { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 6px; }\n .plan-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }\n\n \/* OBJECTIFS *\/\n .objectifs {\n background: var(--yellow-pale);\n border: 2px solid var(--yellow);\n border-radius: 12px;\n padding: 24px 28px;\n margin-bottom: 0;\n }\n\n .objectifs h3 { font-size: 16px; font-weight: 800; color: var(--dark); margin-bottom: 14px; }\n .obj-list { list-style: none; }\n .obj-list li { padding: 6px 0; color: var(--mid); font-size: 15px; display: flex; align-items: flex-start; gap: 10px; }\n .obj-list li::before { content: '\u2705'; flex-shrink: 0; }\n\n \/* TEXTES *\/\n .text-card {\n background: #fff;\n border: 2px solid var(--coral-pale);\n border-radius: 16px;\n padding: 32px 36px;\n margin-bottom: 28px;\n }\n\n .text-tag { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--coral); margin-bottom: 8px; }\n .text-title { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 20px; }\n\n .text-body p { margin-bottom: 14px; line-height: 1.9; color: var(--mid); font-size: 16px; }\n .text-body p:last-child { margin-bottom: 0; }\n\n \/* MOT CL\u00c9 dans texte *\/\n .mot-cle { color: var(--coral); font-weight: 700; }\n\n .questions-box {\n background: var(--coral-pale);\n border-radius: 10px;\n padding: 20px 24px;\n margin-top: 20px;\n border-left: 4px solid var(--coral);\n }\n .questions-box h4 { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 12px; }\n .questions-box ol { padding-left: 20px; }\n .questions-box li { margin-bottom: 8px; color: var(--mid); font-size: 14px; line-height: 1.6; }\n\n \/* VRAI \/ FAUX *\/\n .vf-item {\n background: #fff;\n border: 2px solid var(--coral-pale);\n border-radius: 10px;\n padding: 14px 18px;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n font-size: 15px;\n color: var(--mid);\n }\n\n .vf-btns { display: flex; gap: 8px; flex-shrink: 0; }\n\n .vf-btn {\n font-family: 'Nunito', sans-serif;\n font-size: 13px;\n font-weight: 800;\n padding: 5px 14px;\n border-radius: 20px;\n border: 2px solid;\n cursor: pointer;\n transition: all 0.2s;\n }\n\n .vf-btn.vrai { border-color: var(--green); color: var(--green); background: none; }\n .vf-btn.vrai:hover, .vf-btn.vrai.selected { background: var(--green); color: #fff; }\n .vf-btn.faux { border-color: var(--red); color: var(--red); background: none; }\n .vf-btn.faux:hover, .vf-btn.faux.selected { background: var(--red); color: #fff; }\n\n .vf-feedback { display: none; font-size: 13px; font-weight: 700; margin-top: 6px; padding: 4px 10px; border-radius: 8px; }\n .vf-feedback.correct { display: inline-block; background: var(--green-pale); color: var(--green); }\n .vf-feedback.incorrect { display: inline-block; background: #FDE8E8; color: var(--red); }\n\n \/* VOCABULAIRE *\/\n .vocab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }\n\n .vocab-item {\n background: #fff;\n border: 2px solid var(--coral-pale);\n border-radius: 12px;\n padding: 16px 18px;\n display: flex;\n align-items: flex-start;\n gap: 12px;\n transition: border-color 0.2s, transform 0.2s;\n }\n .vocab-item:hover { border-color: var(--coral-light); transform: translateY(-1px); }\n\n .vocab-emoji { font-size: 28px; flex-shrink: 0; }\n .vocab-content { flex: 1; }\n .vocab-word { font-size: 17px; font-weight: 800; color: var(--dark); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n .vocab-type { font-size: 11px; color: var(--muted); font-style: italic; font-weight: 400; }\n .vocab-ro { font-size: 14px; color: var(--coral); font-weight: 700; }\n .vocab-example { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 3px; }\n\n \/* GRAMMAIRE *\/\n .gram-block {\n background: #fff;\n border: 2px solid var(--coral-pale);\n border-radius: 16px;\n padding: 28px 32px;\n margin-bottom: 24px;\n }\n\n .gram-title { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 14px; }\n\n .gram-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }\n .gram-table th { background: var(--coral); color: #fff; padding: 10px 16px; text-align: left; font-weight: 800; border-radius: 0; }\n .gram-table th:first-child { border-radius: 8px 0 0 0; }\n .gram-table th:last-child { border-radius: 0 8px 0 0; }\n .gram-table td { padding: 10px 16px; border-bottom: 1px solid var(--coral-pale); color: var(--mid); }\n .gram-table tr:last-child td { border-bottom: none; }\n .gram-table tr:nth-child(even) td { background: var(--coral-pale); }\n\n .gram-note { background: var(--yellow-pale); border: 2px solid var(--yellow); border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--mid); margin-top: 16px; font-weight: 600; }\n\n .gram-example {\n background: var(--teal-pale);\n border-left: 4px solid var(--teal);\n border-radius: 0 8px 8px 0;\n padding: 12px 16px;\n margin: 12px 0;\n font-size: 15px;\n color: var(--mid);\n }\n .gram-example em { color: var(--teal); font-weight: 700; font-style: normal; }\n\n \/* EXERCICES *\/\n .exo-block { background: #fff; border: 2px solid var(--coral-pale); border-radius: 16px; padding: 28px 32px; margin-bottom: 24px; }\n .exo-title { font-size: 18px; font-weight: 800; color: var(--dark); margin-bottom: 16px; }\n .exo-item { margin-bottom: 16px; color: var(--mid); font-size: 15px; line-height: 1.8; }\n\n .exo-blank {\n display: inline-block;\n border: none;\n border-bottom: 2px solid var(--coral);\n min-width: 100px;\n margin: 0 4px;\n padding: 2px 6px;\n font-family: 'Nunito', sans-serif;\n font-size: 15px;\n font-weight: 700;\n color: var(--teal);\n background: transparent;\n outline: none;\n vertical-align: baseline;\n }\n .exo-blank:focus { border-bottom-color: var(--teal); background: var(--teal-pale); border-radius: 4px 4px 0 0; }\n .exo-blank::placeholder { color: rgba(232,99,58,0.35); font-style: italic; font-weight: 400; }\n\n .reveal-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n margin-top: 16px;\n background: none;\n border: 2px solid var(--coral);\n color: var(--coral);\n font-size: 13px;\n font-weight: 800;\n padding: 7px 18px;\n border-radius: 20px;\n cursor: pointer;\n font-family: 'Nunito', sans-serif;\n transition: all 0.2s;\n }\n .reveal-btn:hover { background: var(--coral); color: #fff; }\n\n .answer-box { display: none; background: var(--green-pale); border-left: 4px solid var(--green); border-radius: 0 8px 8px 0; padding: 14px 18px; margin-top: 12px; font-size: 15px; color: var(--mid); }\n .answer-box.visible { display: block; }\n .answer-box strong { color: var(--green); }\n\n \/* CHOIX MULTIPLE *\/\n .choice-item { margin-bottom: 16px; }\n .choice-q { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }\n .choice-opts { display: flex; gap: 8px; flex-wrap: wrap; }\n .choice-btn {\n font-family: 'Nunito', sans-serif;\n font-size: 14px;\n font-weight: 700;\n padding: 6px 16px;\n border-radius: 20px;\n border: 2px solid var(--coral-pale);\n background: #fff;\n color: var(--mid);\n cursor: pointer;\n transition: all 0.2s;\n }\n .choice-btn:hover { border-color: var(--coral-light); color: var(--coral); }\n .choice-btn.correct { background: var(--green); border-color: var(--green); color: #fff; }\n .choice-btn.incorrect { background: var(--red); border-color: var(--red); color: #fff; }\n\n \/* ORAL *\/\n .oral-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 28px; }\n .oral-card { background: #fff; border: 2px solid var(--coral-pale); border-radius: 12px; padding: 20px; transition: border-color 0.2s; }\n .oral-card:hover { border-color: var(--coral-light); }\n .oral-num { font-size: 32px; font-weight: 800; color: var(--coral-pale); line-height: 1; margin-bottom: 10px; }\n .oral-emoji { font-size: 24px; margin-bottom: 8px; }\n .oral-q { color: var(--mid); font-size: 15px; line-height: 1.6; font-weight: 600; }\n .oral-hint { color: var(--muted); font-size: 13px; margin-top: 8px; font-style: italic; }\n\n .role-play { background: var(--purple); border-radius: 16px; padding: 28px 32px; color: #fff; }\n .role-play h3 { font-size: 20px; font-weight: 800; color: var(--yellow); margin-bottom: 14px; }\n .role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }\n .role-card { background: rgba(255,255,255,0.1); border-radius: 10px; border-top: 3px solid var(--yellow); padding: 18px; }\n .role-card h4 { color: var(--yellow); font-size: 14px; font-weight: 800; margin-bottom: 10px; letter-spacing: 1px; text-transform: uppercase; }\n .role-card p { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; }\n\n \/* TRADUCTION *\/\n .trad-item { background: #fff; border: 2px solid var(--coral-pale); border-radius: 12px; padding: 20px 24px; margin-bottom: 14px; }\n .trad-num { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--coral); margin-bottom: 6px; text-transform: uppercase; }\n .trad-ro { font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 12px; }\n\n .trad-textarea {\n width: 100%;\n border: 2px solid var(--coral-pale);\n border-radius: 8px;\n padding: 10px 14px;\n font-family: 'Nunito', sans-serif;\n font-size: 15px;\n font-weight: 600;\n color: var(--dark);\n background: var(--cream);\n resize: vertical;\n min-height: 60px;\n outline: none;\n transition: border-color 0.2s;\n }\n .trad-textarea:focus { border-color: var(--coral); }\n .word-count { font-size: 12px; font-weight: 700; color: var(--muted); text-align: right; margin-top: 4px; }\n\n \/* CLAVIER *\/\n .clavier { background: var(--dark); border-radius: 12px; padding: 14px 18px; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n .clavier-label { color: rgba(255,255,255,0.5); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-right: 6px; width: 100%; }\n .key-btn { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); padding: 6px 12px; font-size: 16px; cursor: pointer; font-family: 'Nunito', sans-serif; font-weight: 700; transition: background 0.15s; border-radius: 6px; }\n .key-btn:hover { background: var(--coral); border-color: var(--coral); }\n\n \/* BILAN *\/\n .bilan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }\n .bilan-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; background: #fff; border: 2px solid var(--coral-pale); border-radius: 10px; cursor: pointer; transition: all 0.2s; user-select: none; }\n .bilan-item.checked { border-color: var(--green); background: var(--green-pale); }\n .bilan-check { width: 24px; height: 24px; border: 2px solid var(--coral-pale); border-radius: 50%; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; transition: all 0.2s; }\n .bilan-item.checked .bilan-check { background: var(--green); border-color: var(--green); color: #fff; }\n .bilan-text { font-size: 14px; color: var(--mid); line-height: 1.5; font-weight: 600; }\n .bilan-item.checked .bilan-text { color: var(--green); text-decoration: line-through; }\n\n .bilan-score { background: linear-gradient(135deg, var(--coral) 0%, #D4522A 100%); color: #fff; padding: 24px 28px; border-radius: 16px; margin-top: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }\n .score-text { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.8); }\n .score-num { font-size: 42px; font-weight: 800; color: var(--yellow); }\n\n \/* RESPONSIVE *\/\n @media (max-width: 768px) {\n .lesson-header { padding: 28px 20px; }\n .section-nav { padding: 0 8px; }\n .section { padding: 28px 20px; }\n .progress-bar { padding: 10px 20px; }\n .vocab-grid, .oral-grid, .bilan-grid, .role-cards, .plan-grid { grid-template-columns: 1fr; }\n }\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"lesson-header\">\n <div class=\"lesson-badge\">Le\u00e7on 1 \u00b7 A1-A2<\/div>\n <h1 class=\"lesson-title\">La maison & <em>les activit\u00e9s<\/em><br>du quotidien<\/h1>\n <div class=\"lesson-meta\">\n <span class=\"meta-item\">\u23f1 2 heures<\/span>\n <span class=\"meta-item\">\ud83d\udcda Niveau A1-A2<\/span>\n <span class=\"meta-item\">\ud83c\udfe0 La maison \u00b7 Les pi\u00e8ces \u00b7 Les activit\u00e9s<\/span>\n <span class=\"meta-item\">\ud83d\udd0a Audio int\u00e9gr\u00e9<\/span>\n <\/div>\n<\/div>\n\n\n<div class=\"progress-bar\">\n <span class=\"progress-label\">Progression<\/span>\n <div class=\"progress-track\"><div class=\"progress-fill\" id=\"progressFill\" style=\"width:12%\"><\/div><\/div>\n <span class=\"progress-pct\" id=\"progressPct\">1\/8<\/span>\n<\/div>\n\n\n<nav class=\"section-nav\">\n <button class=\"sec-btn active\" onclick=\"showSection(0)\">\ud83d\udccb Plan<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(1)\">\ud83d\udcd6 Compr\u00e9hension<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(2)\">\ud83d\udcdd Vocabulaire<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(3)\">\u2699\ufe0f Grammaire<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(4)\">\u270f\ufe0f Exercices<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(5)\">\ud83d\udde3\ufe0f Expression orale<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(6)\">\ud83d\udd04 Traduction<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(7)\">\u2705 Bilan<\/button>\n<\/nav>\n\n\n<div class=\"section active\" id=\"sec0\">\n <div class=\"section-label\">Aper\u00e7u de la le\u00e7on<\/div>\n <h2 class=\"section-title\">Plan de la s\u00e9ance<\/h2>\n\n <div class=\"plan-grid\">\n <div class=\"plan-card\">\n <div class=\"plan-emoji\">\ud83d\udcac<\/div>\n <div class=\"plan-time\">0:00 \u2013 0:20<\/div>\n <div class=\"plan-title\">Mise en route<\/div>\n <div class=\"plan-desc\">Discussion : comment est votre maison ? Quelles pi\u00e8ces avez-vous ?<\/div>\n <\/div>\n <div class=\"plan-card\">\n <div class=\"plan-emoji\">\ud83d\udcd6<\/div>\n <div class=\"plan-time\">0:20 \u2013 0:45<\/div>\n <div class=\"plan-title\">Compr\u00e9hension<\/div>\n <div class=\"plan-desc\">Deux textes courts sur une maison et une journ\u00e9e typique.<\/div>\n <\/div>\n <div class=\"plan-card\">\n <div class=\"plan-emoji\">\ud83d\udcdd<\/div>\n <div class=\"plan-time\">0:45 \u2013 1:05<\/div>\n <div class=\"plan-title\">Vocabulaire<\/div>\n <div class=\"plan-desc\">20 mots : les pi\u00e8ces, les meubles et les activit\u00e9s \u00e0 la maison.<\/div>\n <\/div>\n <div class=\"plan-card\">\n <div class=\"plan-emoji\">\u2699\ufe0f<\/div>\n <div class=\"plan-time\">1:05 \u2013 1:25<\/div>\n <div class=\"plan-title\">Grammaire<\/div>\n <div class=\"plan-desc\">Le verbe <em>avoir<\/em>, les articles (un\/une\/des), la n\u00e9gation.<\/div>\n <\/div>\n <div class=\"plan-card\">\n <div class=\"plan-emoji\">\u270f\ufe0f<\/div>\n <div class=\"plan-time\">1:25 \u2013 1:45<\/div>\n <div class=\"plan-title\">Exercices & traduction<\/div>\n <div class=\"plan-desc\">Exercices pratiques et traduction de phrases simples.<\/div>\n <\/div>\n <div class=\"plan-card\">\n <div class=\"plan-emoji\">\ud83d\udde3\ufe0f<\/div>\n <div class=\"plan-time\">1:45 \u2013 2:00<\/div>\n <div class=\"plan-title\">Expression orale<\/div>\n <div class=\"plan-desc\">D\u00e9crire sa maison et raconter sa journ\u00e9e en fran\u00e7ais !<\/div>\n <\/div>\n <\/div>\n\n <div class=\"objectifs\">\n <h3>\ud83c\udfaf Objectifs de la le\u00e7on<\/h3>\n <ul class=\"obj-list\">\n <li>Nommer les pi\u00e8ces de la maison et les meubles principaux<\/li>\n <li>D\u00e9crire les activit\u00e9s quotidiennes \u00e0 la maison<\/li>\n <li>Utiliser le verbe <em>avoir<\/em> au pr\u00e9sent<\/li>\n <li>Employer correctement les articles ind\u00e9finis (un, une, des)<\/li>\n <li>Formuler des phrases n\u00e9gatives avec <em>ne… pas<\/em><\/li>\n <li>Poser des questions simples sur la maison et les habitudes<\/li>\n <\/ul>\n <\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec1\">\n <div class=\"section-label\">Compr\u00e9hension \u00e9crite & orale<\/div>\n <h2 class=\"section-title\">Lisons ensemble ! \ud83d\udcd6<\/h2>\n\n \n <div class=\"text-card\">\n <div class=\"text-tag\">Texte 1 \u00b7 Description<\/div>\n <h3 class=\"text-title\">La maison de Sophie\n <button class=\"tts-btn\" onclick=\"ttsRead(this,'txt1')\"><span>\ud83d\udd0a<\/span> \u00c9couter<\/button>\n <\/h3>\n <div class=\"text-body\" id=\"txt1\">\n <p>Je m’appelle Sophie. J’ai <span class=\"mot-cle\">un appartement<\/span> \u00e0 Lyon. C’est petit mais confortable !<\/p>\n <p>Dans mon appartement, il y a <span class=\"mot-cle\">un salon<\/span>, <span class=\"mot-cle\">une cuisine<\/span>, <span class=\"mot-cle\">une chambre<\/span> et <span class=\"mot-cle\">une salle de bains<\/span>. Il n’y a pas de jardin.<\/p>\n <p>Dans le salon, j’ai <span class=\"mot-cle\">un canap\u00e9<\/span>, <span class=\"mot-cle\">une table<\/span> et <span class=\"mot-cle\">une t\u00e9l\u00e9vision<\/span>. Dans la cuisine, j’ai <span class=\"mot-cle\">un r\u00e9frig\u00e9rateur<\/span> et <span class=\"mot-cle\">une machine \u00e0 caf\u00e9<\/span>. J’adore le caf\u00e9 !<\/p>\n <p>Dans ma chambre, j’ai <span class=\"mot-cle\">un lit<\/span>, <span class=\"mot-cle\">une armoire<\/span> et <span class=\"mot-cle\">un bureau<\/span>. Je travaille souvent dans ma chambre.<\/p>\n <p>J’aime beaucoup mon appartement. C’est mon chez-moi !<\/p>\n <\/div>\n <div class=\"questions-box\">\n <h4>\u2705 Vrai ou Faux ? Cliquez sur votre r\u00e9ponse !<\/h4>\n <div id=\"vfContainer1\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"text-card\">\n <div class=\"text-tag\">Texte 2 \u00b7 Une journ\u00e9e typique<\/div>\n <h3 class=\"text-title\">La journ\u00e9e de Marc\n <button class=\"tts-btn\" onclick=\"ttsRead(this,'txt2')\"><span>\ud83d\udd0a<\/span> \u00c9couter<\/button>\n <\/h3>\n <div class=\"text-body\" id=\"txt2\">\n <p>Je m’appelle Marc. Je suis professeur de math\u00e9matiques. Voici ma journ\u00e9e typique !<\/p>\n <p>Le matin, je me l\u00e8ve \u00e0 7 heures. Je prends une douche dans <span class=\"mot-cle\">la salle de bains<\/span>. Ensuite, je mange dans <span class=\"mot-cle\">la cuisine<\/span> : des tartines et du caf\u00e9.<\/p>\n <p>\u00c0 8 heures, je quitte la maison. Je travaille de 9 heures \u00e0 17 heures.<\/p>\n <p>Le soir, je rentre \u00e0 la maison. Je cuisine dans <span class=\"mot-cle\">la cuisine<\/span>, je mange dans <span class=\"mot-cle\">le salon<\/span> et je regarde la t\u00e9l\u00e9vision. J’aime les documentaires !<\/p>\n <p>\u00c0 22 heures, je vais dans <span class=\"mot-cle\">ma chambre<\/span>. Je lis un livre et je dors. Bonne nuit !<\/p>\n <\/div>\n <div class=\"questions-box\">\n <h4>\u2705 Vrai ou Faux ? Cliquez sur votre r\u00e9ponse !<\/h4>\n <div id=\"vfContainer2\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec2\">\n <div class=\"section-label\">Vocabulaire th\u00e9matique<\/div>\n <h2 class=\"section-title\">20 mots essentiels \ud83c\udfe0<\/h2>\n <div class=\"vocab-grid\" id=\"vocabGrid\"><\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec3\">\n <div class=\"section-label\">Points de grammaire<\/div>\n <h2 class=\"section-title\">On apprend ! \u2699\ufe0f<\/h2>\n\n \n <div class=\"gram-block\">\n <h3 class=\"gram-title\">1. Le verbe AVOIR au pr\u00e9sent\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, 'J\\'ai un appartement. Tu as une chambre. Il a un salon. Nous avons une cuisine. Vous avez un jardin. Ils ont une maison.')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/h3>\n <p style=\"color:var(--muted); margin-bottom:16px; font-weight:600;\">Le verbe <em>avoir<\/em> est tr\u00e8s important ! On l’utilise pour dire ce qu’on poss\u00e8de.<\/p>\n <table class=\"gram-table\">\n <tr><th>Pronom<\/th><th>AVOIR<\/th><th>Exemple<\/th><\/tr>\n <tr><td>Je<\/td><td><strong>ai<\/strong><\/td><td><em>J’ai un appartement.<\/em><\/td><\/tr>\n <tr><td>Tu<\/td><td><strong>as<\/strong><\/td><td><em>Tu as une chambre.<\/em><\/td><\/tr>\n <tr><td>Il \/ Elle \/ On<\/td><td><strong>a<\/strong><\/td><td><em>Elle a un salon confortable.<\/em><\/td><\/tr>\n <tr><td>Nous<\/td><td><strong>avons<\/strong><\/td><td><em>Nous avons une grande cuisine.<\/em><\/td><\/tr>\n <tr><td>Vous<\/td><td><strong>avez<\/strong><\/td><td><em>Vous avez un jardin ?<\/em><\/td><\/tr>\n <tr><td>Ils \/ Elles<\/td><td><strong>ont<\/strong><\/td><td><em>Ils ont trois chambres.<\/em><\/td><\/tr>\n <\/table>\n <div class=\"gram-note\">\u26a0\ufe0f Attention ! Je + ai = <strong>J’ai<\/strong> (on fait l’\u00e9lision !)<\/div>\n <\/div>\n\n \n <div class=\"gram-block\">\n <h3 class=\"gram-title\">2. Les articles ind\u00e9finis : UN \u00b7 UNE \u00b7 DES\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, 'Un salon. Une cuisine. Une chambre. Des meubles. J\\'ai un canap\u00e9. J\\'ai une table. J\\'ai des chaises.')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/h3>\n <p style=\"color:var(--muted); margin-bottom:16px; font-weight:600;\">En fran\u00e7ais, chaque nom a un genre (masculin ou f\u00e9minin). L’article change selon le genre !<\/p>\n <table class=\"gram-table\">\n <tr><th>Article<\/th><th>Genre<\/th><th>Exemples<\/th><\/tr>\n <tr><td><strong>UN<\/strong><\/td><td>Masculin singulier<\/td><td><em>un salon, un lit, un bureau, un canap\u00e9<\/em><\/td><\/tr>\n <tr><td><strong>UNE<\/strong><\/td><td>F\u00e9minin singulier<\/td><td><em>une cuisine, une chambre, une armoire<\/em><\/td><\/tr>\n <tr><td><strong>DES<\/strong><\/td><td>Pluriel (m. et f.)<\/td><td><em>des meubles, des chaises, des fen\u00eatres<\/em><\/td><\/tr>\n <\/table>\n <div class=\"gram-example\">\n \ud83c\udfe0 <em>J’ai <strong>un<\/strong> salon, <strong>une<\/strong> chambre et <strong>des<\/strong> meubles confortables.<\/em>\n <\/div>\n <div class=\"gram-note\">\ud83d\udca1 Astuce : apprenez toujours le mot avec son article ! Pas \u00ab salon \u00bb mais \u00ab <strong>un<\/strong> salon \u00bb. Pas \u00ab cuisine \u00bb mais \u00ab <strong>une<\/strong> cuisine \u00bb.<\/div>\n <\/div>\n\n \n <div class=\"gram-block\">\n <h3 class=\"gram-title\">3. La n\u00e9gation : NE… PAS\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, 'Je n\\'ai pas de jardin. Il n\\'y a pas de garage. Je ne regarde pas la t\u00e9l\u00e9vision. Elle n\\'a pas de balcon.')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/h3>\n <p style=\"color:var(--muted); margin-bottom:16px; font-weight:600;\">Pour dire ce qu’on n’a pas, on utilise <strong>ne… pas<\/strong>. Apr\u00e8s la n\u00e9gation, <em>un\/une\/des<\/em> devient <strong>de<\/strong> !<\/p>\n <table class=\"gram-table\">\n <tr><th>Affirmatif \u2705<\/th><th>N\u00e9gatif \u274c<\/th><\/tr>\n <tr><td>J’ai <em>un<\/em> jardin.<\/td><td>Je n’ai pas <strong>de<\/strong> jardin.<\/td><\/tr>\n <tr><td>Il y a <em>une<\/em> terrasse.<\/td><td>Il n’y a pas <strong>de<\/strong> terrasse.<\/td><\/tr>\n <tr><td>J’ai <em>des<\/em> voisins sympa.<\/td><td>Je n’ai pas <strong>de<\/strong> voisins sympa.<\/td><\/tr>\n <tr><td>Elle regarde la t\u00e9l\u00e9.<\/td><td>Elle ne regarde pas la t\u00e9l\u00e9.<\/td><\/tr>\n <\/table>\n <div class=\"gram-note\">\u26a0\ufe0f Ne + voyelle = <strong>N’<\/strong> ! \u2192 Je <strong>n’<\/strong>ai pas de jardin. Il <strong>n’<\/strong>y a pas de garage.<\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec4\">\n <div class=\"section-label\">Mise en pratique<\/div>\n <h2 class=\"section-title\">\u00c0 toi de jouer ! \u270f\ufe0f<\/h2>\n\n \n <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 1 \u2013 Compl\u00e8te avec AVOIR !<\/h3>\n <p style=\"color:var(--muted); font-size:14px; font-weight:600; margin-bottom:16px;\">Conjugue le verbe <em>avoir<\/em> au pr\u00e9sent.<\/p>\n <div class=\"exo-item\">1. J’ <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:80px;\"> un grand appartement \u00e0 Paris.<\/div>\n <div class=\"exo-item\">2. Tu <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:80px;\"> une belle chambre ?<\/div>\n <div class=\"exo-item\">3. Sophie <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:80px;\"> un canap\u00e9 rouge dans son salon.<\/div>\n <div class=\"exo-item\">4. Nous <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:80px;\"> une maison avec un jardin.<\/div>\n <div class=\"exo-item\">5. Vous <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:80px;\"> combien de chambres ?<\/div>\n <div class=\"exo-item\">6. Mes parents <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:80px;\"> une grande cuisine.<\/div>\n <button class=\"reveal-btn\" onclick=\"revealExo(this)\">\ud83d\udc40 Voir les r\u00e9ponses<\/button>\n <div class=\"answer-box\">\n <strong>\u2705 R\u00e9ponses :<\/strong><br>\n 1. <em>ai<\/em> \u00b7 2. <em>as<\/em> \u00b7 3. <em>a<\/em> \u00b7 4. <em>avons<\/em> \u00b7 5. <em>avez<\/em> \u00b7 6. <em>ont<\/em>\n <\/div>\n <\/div>\n\n \n <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 2 \u2013 UN, UNE ou DES ?<\/h3>\n <p style=\"color:var(--muted); font-size:14px; font-weight:600; margin-bottom:16px;\">Compl\u00e8te avec l’article correct.<\/p>\n <div class=\"exo-item\">1. Dans ma maison, il y a <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> salon et <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> cuisine.<\/div>\n <div class=\"exo-item\">2. J’ai <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> lit tr\u00e8s confortable dans ma chambre.<\/div>\n <div class=\"exo-item\">3. Il y a <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> chaises autour de la table.<\/div>\n <div class=\"exo-item\">4. Sophie a <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> armoire blanche dans sa chambre.<\/div>\n <div class=\"exo-item\">5. Marc a <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> bureau pour travailler.<\/div>\n <button class=\"reveal-btn\" onclick=\"revealExo(this)\">\ud83d\udc40 Voir les r\u00e9ponses<\/button>\n <div class=\"answer-box\">\n <strong>\u2705 R\u00e9ponses :<\/strong><br>\n 1. <em>un<\/em> \/ <em>une<\/em> \u00b7 2. <em>un<\/em> \u00b7 3. <em>des<\/em> \u00b7 4. <em>une<\/em> \u00b7 5. <em>un<\/em>\n <\/div>\n <\/div>\n\n \n <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 3 \u2013 Mets \u00e0 la forme n\u00e9gative !<\/h3>\n <p style=\"color:var(--muted); font-size:14px; font-weight:600; margin-bottom:16px;\">Transforme les phrases avec <em>ne… pas<\/em>.<\/p>\n <div class=\"exo-item\">1. J’ai un jardin. \u2192 Je <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:180px;\"> jardin.<\/div>\n <div class=\"exo-item\">2. Il y a une terrasse. \u2192 Il <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:220px;\"> terrasse.<\/div>\n <div class=\"exo-item\">3. Marc regarde la t\u00e9l\u00e9vision. \u2192 Marc <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:220px;\"> t\u00e9l\u00e9vision.<\/div>\n <div class=\"exo-item\">4. Elle a des voisins. \u2192 Elle <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:200px;\"> voisins.<\/div>\n <button class=\"reveal-btn\" onclick=\"revealExo(this)\">\ud83d\udc40 Voir les r\u00e9ponses<\/button>\n <div class=\"answer-box\">\n <strong>\u2705 R\u00e9ponses :<\/strong><br>\n 1. <em>n’ai pas de<\/em> \u00b7 2. <em>n’y a pas de<\/em> \u00b7 3. <em>ne regarde pas la<\/em> \u00b7 4. <em>n’a pas de<\/em>\n <\/div>\n <\/div>\n\n \n <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 4 \u2013 Choisis la bonne r\u00e9ponse ! \ud83c\udfaf<\/h3>\n <div id=\"choiceContainer\"><\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec5\">\n <div class=\"section-label\">Expression orale<\/div>\n <h2 class=\"section-title\">Parle en fran\u00e7ais ! \ud83d\udde3\ufe0f<\/h2>\n\n <div class=\"oral-grid\">\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83c\udfe0<\/div>\n <div class=\"oral-num\">01<\/div>\n <div class=\"oral-q\">Comment est votre maison ou appartement ? Combien de pi\u00e8ces avez-vous ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Utilisez : J’ai un\/une… \u00b7 Il y a… \u00b7 Dans ma maison…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83d\udecb\ufe0f<\/div>\n <div class=\"oral-num\">02<\/div>\n <div class=\"oral-q\">Quelle est votre pi\u00e8ce pr\u00e9f\u00e9r\u00e9e dans votre maison ? Pourquoi ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Utilisez : Ma pi\u00e8ce pr\u00e9f\u00e9r\u00e9e est… \u00b7 J’aime… parce que…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\u2600\ufe0f<\/div>\n <div class=\"oral-num\">03<\/div>\n <div class=\"oral-q\">D\u00e9crivez votre matin typique. Que faites-vous dans chaque pi\u00e8ce ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Utilisez : Le matin, je… \u00b7 Dans la cuisine, je… \u00b7 Ensuite…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83c\udf19<\/div>\n <div class=\"oral-num\">04<\/div>\n <div class=\"oral-q\">Que faites-vous le soir \u00e0 la maison ? Quelles activit\u00e9s aimez-vous ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Utilisez : Le soir, je… \u00b7 J’aime… \u00b7 Je regarde \/ lis \/ cuisine…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83c\udfe1<\/div>\n <div class=\"oral-num\">05<\/div>\n <div class=\"oral-q\">D\u00e9crivez la maison id\u00e9ale ! Combien de pi\u00e8ces ? Avec un jardin ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Utilisez : Dans ma maison id\u00e9ale, il y a… \u00b7 J’ai… \u00b7 Je veux…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83d\udc6b<\/div>\n <div class=\"oral-num\">06<\/div>\n <div class=\"oral-q\">Posez 3 questions \u00e0 votre partenaire sur sa maison et ses activit\u00e9s.<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Utilisez : Tu as… ? \u00b7 Il y a… chez toi ? \u00b7 Qu’est-ce que tu fais… ?<\/div>\n <\/div>\n <\/div>\n\n <div class=\"role-play\">\n <h3>\ud83c\udfad Jeu de r\u00f4le : Cherche un appartement !<\/h3>\n <p style=\"color:rgba(255,255,255,0.8); font-size:15px; line-height:1.7; margin-bottom:4px;\">Tu cherches un appartement. L’agent immobilier te propose un appartement. Pose des questions et d\u00e9cide si tu le prends !<\/p>\n <div class=\"role-cards\">\n <div class=\"role-card\">\n <h4>\ud83d\udd0d R\u00f4le A \u2013 Le\/la locataire<\/h4>\n <p>Tu cherches un appartement. Pose des questions : <em>\u00ab Il y a combien de chambres ? \u00bb, \u00ab Est-ce qu’il y a un jardin ? \u00bb, \u00ab La cuisine est grande ? \u00bb, \u00ab Il n’y a pas de… ? \u00bb<\/em><\/p>\n <\/div>\n <div class=\"role-card\">\n <h4>\ud83c\udfe2 R\u00f4le B \u2013 L’agent immobilier<\/h4>\n <p>Tu pr\u00e9sentes l’appartement : <em>\u00ab Il y a un salon, deux chambres… \u00bb, \u00ab L’appartement a une grande cuisine… \u00bb, \u00ab Il n’y a pas de jardin mais il y a un balcon… \u00bb<\/em><\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec6\">\n <div class=\"section-label\">Traduction RO \u2192 FR<\/div>\n <h2 class=\"section-title\">Traduis en fran\u00e7ais ! \ud83d\udd04<\/h2>\n\n <div class=\"clavier\">\n <span class=\"clavier-label\">Lettres fran\u00e7aises<\/span>\n <button class=\"key-btn\" onclick=\"insertChar('\u00e9')\">\u00e9<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00e8')\">\u00e8<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00ea')\">\u00ea<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00e0')\">\u00e0<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00e2')\">\u00e2<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00f9')\">\u00f9<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00fb')\">\u00fb<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00ee')\">\u00ee<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00f4')\">\u00f4<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u0153')\">\u0153<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00e7')\">\u00e7<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00ab')\">\u00ab<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00bb')\">\u00bb<\/button>\n <\/div>\n\n <div id=\"tradItems\"><\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec7\">\n <div class=\"section-label\">Bilan de la le\u00e7on<\/div>\n <h2 class=\"section-title\">Qu’est-ce que j’ai appris ? \u2705<\/h2>\n <div class=\"bilan-grid\" id=\"bilanGrid\"><\/div>\n <div class=\"bilan-score\">\n <div>\n <div class=\"score-text\">Objectifs atteints<\/div>\n <div id=\"bilanScoreText\" style=\"color:rgba(255,255,255,0.7); font-size:14px; font-weight:700; margin-top:4px;\">Coche les cases !<\/div>\n <\/div>\n <div class=\"score-num\" id=\"bilanScore\">0 \/ 12<\/div>\n <\/div>\n<\/div>\n\n\n<script>\n \/\/ NAVIGATION\n const sections = document.querySelectorAll('.section');\n const secBtns = document.querySelectorAll('.sec-btn');\n\n function showSection(idx) {\n sections.forEach((s, i) => s.classList.toggle('active', i === idx));\n secBtns.forEach((b, i) => b.classList.toggle('active', i === idx));\n const pct = Math.round(((idx + 1) \/ sections.length) * 100);\n document.getElementById('progressFill').style.width = pct + '%';\n document.getElementById('progressPct').textContent = (idx + 1) + '\/' + sections.length;\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n \/\/ TTS\n let currentBtn = null;\n\n function ttsStop() {\n if (window.speechSynthesis) window.speechSynthesis.cancel();\n if (currentBtn) {\n currentBtn.classList.remove('playing');\n currentBtn.innerHTML = '<span>\ud83d\udd0a<\/span> \u00c9couter';\n currentBtn = null;\n }\n }\n\n function ttsReadText(btn, text) {\n if (!window.speechSynthesis) { alert('Synth\u00e8se vocale non support\u00e9e.'); return; }\n if (currentBtn === btn && window.speechSynthesis.speaking) { ttsStop(); return; }\n ttsStop();\n const utter = new SpeechSynthesisUtterance(text);\n utter.lang = 'fr-FR';\n utter.rate = 0.82;\n utter.pitch = 1.05;\n const voices = window.speechSynthesis.getVoices();\n const frVoice = voices.find(v => v.lang.startsWith('fr-FR')) || voices.find(v => v.lang.startsWith('fr'));\n if (frVoice) utter.voice = frVoice;\n utter.onstart = () => { btn.classList.add('playing'); btn.innerHTML = '<span>\u23f9<\/span> Stop'; currentBtn = btn; };\n utter.onend = utter.onerror = () => { btn.classList.remove('playing'); btn.innerHTML = '<span>\ud83d\udd0a<\/span> \u00c9couter'; currentBtn = null; };\n window.speechSynthesis.speak(utter);\n }\n\n function ttsRead(btn, id) {\n const el = document.getElementById(id);\n if (el) ttsReadText(btn, el.innerText || el.textContent);\n }\n\n if (window.speechSynthesis) window.speechSynthesis.onvoiceschanged = () => window.speechSynthesis.getVoices();\n\n \/\/ VRAI \/ FAUX\n const vfData1 = [\n { q: \"Sophie habite dans une maison.\", answer: false, correction: \"Non, elle habite dans un appartement.\" },\n { q: \"L'appartement de Sophie est \u00e0 Lyon.\", answer: true },\n { q: \"Sophie a un jardin.\", answer: false, correction: \"Non, il n'y a pas de jardin.\" },\n { q: \"Dans le salon, il y a un canap\u00e9 et une t\u00e9l\u00e9vision.\", answer: true },\n { q: \"Sophie n'a pas de bureau.\", answer: false, correction: \"Non, elle a un bureau dans sa chambre.\" }\n ];\n\n const vfData2 = [\n { q: \"Marc est professeur de fran\u00e7ais.\", answer: false, correction: \"Non, il est professeur de math\u00e9matiques.\" },\n { q: \"Marc se l\u00e8ve \u00e0 7 heures.\", answer: true },\n { q: \"Le matin, Marc mange dans le salon.\", answer: false, correction: \"Non, il mange dans la cuisine.\" },\n { q: \"Marc aime les documentaires.\", answer: true },\n { q: \"Marc va dormir \u00e0 23 heures.\", answer: false, correction: \"Non, il va dans sa chambre \u00e0 22 heures.\" }\n ];\n\n function buildVF(data, containerId) {\n const container = document.getElementById(containerId);\n data.forEach((item, i) => {\n const div = document.createElement('div');\n div.className = 'vf-item';\n div.style.flexDirection = 'column';\n div.style.alignItems = 'flex-start';\n div.innerHTML = `\n <div style=\"display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;\">\n <span>${i+1}. ${item.q}<\/span>\n <div class=\"vf-btns\">\n <button class=\"vf-btn vrai\" onclick=\"checkVF(this, ${item.answer}, true, '${item.correction || ''}')\">\u2705 Vrai<\/button>\n <button class=\"vf-btn faux\" onclick=\"checkVF(this, ${item.answer}, false, '${item.correction || ''}')\">\u274c Faux<\/button>\n <\/div>\n <\/div>\n <div class=\"vf-feedback\" id=\"vf-fb-${containerId}-${i}\"><\/div>`;\n container.appendChild(div);\n });\n }\n\n function checkVF(btn, correct, chosen, correction) {\n const btns = btn.parentElement.querySelectorAll('.vf-btn');\n btns.forEach(b => { b.classList.remove('selected'); b.style.pointerEvents = 'none'; });\n btn.classList.add('selected');\n const fb = btn.closest('.vf-item').querySelector('.vf-feedback');\n if (chosen === correct) {\n fb.textContent = '\ud83c\udf89 Bravo ! C\\'est correct !';\n fb.className = 'vf-feedback correct';\n } else {\n fb.textContent = correction ? '\ud83d\udca1 ' + correction : '\u274c Ce n\\'est pas correct.';\n fb.className = 'vf-feedback incorrect';\n }\n }\n\n buildVF(vfData1, 'vfContainer1');\n buildVF(vfData2, 'vfContainer2');\n\n \/\/ CHOIX MULTIPLE\n const choiceData = [\n { q: \"Dans ___, il y a un canap\u00e9.\", opts: [\"la cuisine\", \"le salon\", \"la chambre\"], correct: 1 },\n { q: \"J'ai ___ armoire dans ma chambre.\", opts: [\"un\", \"une\", \"des\"], correct: 1 },\n { q: \"Sophie ___ un appartement \u00e0 Lyon.\", opts: [\"est\", \"a\", \"ont\"], correct: 1 },\n { q: \"Je n'ai pas ___ jardin.\", opts: [\"un\", \"une\", \"de\"], correct: 2 },\n { q: \"Marc se l\u00e8ve ___ 7 heures.\", opts: [\"\u00e0\", \"en\", \"de\"], correct: 0 }\n ];\n\n const cc = document.getElementById('choiceContainer');\n choiceData.forEach((item, i) => {\n const div = document.createElement('div');\n div.className = 'choice-item';\n div.innerHTML = `<div class=\"choice-q\">${i+1}. ${item.q}<\/div>\n <div class=\"choice-opts\">${item.opts.map((o, j) =>\n `<button class=\"choice-btn\" onclick=\"checkChoice(this, ${j === item.correct})\">${o}<\/button>`\n ).join('')}<\/div>`;\n cc.appendChild(div);\n });\n\n function checkChoice(btn, isCorrect) {\n const opts = btn.parentElement.querySelectorAll('.choice-btn');\n opts.forEach(b => b.style.pointerEvents = 'none');\n btn.classList.add(isCorrect ? 'correct' : 'incorrect');\n if (!isCorrect) {\n opts.forEach(b => { if (b.classList.contains('correct') || b === btn) return; });\n }\n }\n\n \/\/ EXERCICES\n function revealExo(btn) {\n const box = btn.nextElementSibling;\n box.classList.toggle('visible');\n btn.textContent = box.classList.contains('visible') ? '\ud83d\ude48 Masquer' : '\ud83d\udc40 Voir les r\u00e9ponses';\n }\n\n \/\/ CLAVIER\n let activeTextarea = null;\n function setActiveTA(ta) { activeTextarea = ta; }\n function insertChar(ch) {\n if (!activeTextarea) { const f = document.activeElement; if (f && f.tagName === 'TEXTAREA') activeTextarea = f; }\n if (!activeTextarea) return;\n const s = activeTextarea.selectionStart, e = activeTextarea.selectionEnd, v = activeTextarea.value;\n activeTextarea.value = v.slice(0, s) + ch + v.slice(e);\n activeTextarea.selectionStart = activeTextarea.selectionEnd = s + ch.length;\n activeTextarea.focus();\n updateWordCount(activeTextarea);\n }\n function updateWordCount(ta) {\n const c = document.getElementById(ta.dataset.counter);\n if (!c) return;\n const w = ta.value.trim() === '' ? 0 : ta.value.trim().split(\/\\s+\/).length;\n c.textContent = w + ' mot' + (w !== 1 ? 's' : '');\n }\n\n \/\/ VOCABULAIRE\n const vocabData = [\n { emoji: '\ud83c\udfe0', word: 'la maison', type: 'n.f.', ro: 'casa', example: 'J\\'habite dans une maison.' },\n { emoji: '\ud83c\udfe2', word: 'l\\'appartement', type: 'n.m.', ro: 'apartamentul', example: 'J\\'ai un appartement au centre-ville.' },\n { emoji: '\ud83d\udecb\ufe0f', word: 'le salon', type: 'n.m.', ro: 'sufrageria \/ livingul', example: 'Je regarde la t\u00e9l\u00e9 dans le salon.' },\n { emoji: '\ud83c\udf73', word: 'la cuisine', type: 'n.f.', ro: 'buc\u0103t\u0103ria', example: 'Je cuisine dans la cuisine.' },\n { emoji: '\ud83d\udecf\ufe0f', word: 'la chambre', type: 'n.f.', ro: 'dormitorul', example: 'Je dors dans ma chambre.' },\n { emoji: '\ud83d\udebf', word: 'la salle de bains', type: 'n.f.', ro: 'baia', example: 'Je prends une douche dans la salle de bains.' },\n { emoji: '\ud83d\udebd', word: 'les toilettes', type: 'n.f.pl.', ro: 'toaleta', example: 'Les toilettes sont \u00e0 droite.' },\n { emoji: '\ud83c\udf3f', word: 'le jardin', type: 'n.m.', ro: 'gr\u0103dina', example: 'Je lis dans le jardin.' },\n { emoji: '\ud83d\udecb\ufe0f', word: 'le canap\u00e9', type: 'n.m.', ro: 'canapea', example: 'Le canap\u00e9 est tr\u00e8s confortable.' },\n { emoji: '\ud83d\udecf\ufe0f', word: 'le lit', type: 'n.m.', ro: 'patul', example: 'J\\'ai un grand lit.' },\n { emoji: '\ud83e\ude91', word: 'la chaise', type: 'n.f.', ro: 'scaunul', example: 'Il y a quatre chaises autour de la table.' },\n { emoji: '\ud83e\ude9e', word: 'l\\'armoire', type: 'n.f.', ro: 'dulapul', example: 'Mes v\u00eatements sont dans l\\'armoire.' },\n { emoji: '\ud83d\udda5\ufe0f', word: 'le bureau', type: 'n.m.', ro: 'biroul', example: 'Je travaille \u00e0 mon bureau.' },\n { emoji: '\ud83d\udcfa', word: 'la t\u00e9l\u00e9vision', type: 'n.f.', ro: 'televizorul', example: 'Je regarde la t\u00e9l\u00e9vision le soir.' },\n { emoji: '\u2744\ufe0f', word: 'le r\u00e9frig\u00e9rateur', type: 'n.m.', ro: 'frigiderul', example: 'Le lait est dans le r\u00e9frig\u00e9rateur.' },\n { emoji: '\u2615', word: 'cuisiner', type: 'v.', ro: 'a g\u0103ti', example: 'J\\'aime cuisiner le week-end.' },\n { emoji: '\ud83d\udcda', word: 'lire', type: 'v.', ro: 'a citi', example: 'Je lis un livre avant de dormir.' },\n { emoji: '\ud83e\uddf9', word: 'faire le m\u00e9nage', type: 'expr.', ro: 'a face cur\u0103\u021benie', example: 'Je fais le m\u00e9nage le samedi.' },\n { emoji: '\ud83c\udfb5', word: '\u00e9couter de la musique', type: 'expr.', ro: 'a asculta muzic\u0103', example: 'J\\'\u00e9coute de la musique dans ma chambre.' },\n { emoji: '\ud83d\ude34', word: 'se reposer', type: 'v.', ro: 'a se odihni', example: 'Je me repose dans le salon le dimanche.' }\n ];\n\n const vocabGrid = document.getElementById('vocabGrid');\n vocabData.forEach((v, i) => {\n const item = document.createElement('div');\n item.className = 'vocab-item';\n item.innerHTML = `\n <div class=\"vocab-emoji\">${v.emoji}<\/div>\n <div class=\"vocab-content\">\n <div class=\"vocab-word\">\n ${v.word} <span class=\"vocab-type\">${v.type}<\/span>\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, '${v.word.replace(\/'\/g,\"\\\\'\")}. ${v.example.replace(\/'\/g,\"\\\\'\")}')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/div>\n <div class=\"vocab-ro\">\ud83c\uddf7\ud83c\uddf4 ${v.ro}<\/div>\n <div class=\"vocab-example\">\u2192 ${v.example}<\/div>\n <\/div>`;\n vocabGrid.appendChild(item);\n });\n\n \/\/ TRADUCTION\n const tradData = [\n { ro: 'Am un apartament mic, dar confortabil.', fr: 'J\\'ai un petit appartement, mais confortable.' },\n { ro: '\u00cen casa mea, exist\u0103 un salon, o buc\u0103t\u0103rie \u0219i dou\u0103 dormitoare.', fr: 'Dans ma maison, il y a un salon, une cuisine et deux chambres.' },\n { ro: 'Nu am gr\u0103din\u0103, dar am un balcon.', fr: 'Je n\\'ai pas de jardin, mais j\\'ai un balcon.' },\n { ro: 'Diminea\u021ba, m\u0103n\u00e2nc \u00een buc\u0103t\u0103rie.', fr: 'Le matin, je mange dans la cuisine.' },\n { ro: 'Seara, m\u0103 uit la televizor \u00een sufragerie.', fr: 'Le soir, je regarde la t\u00e9l\u00e9vision dans le salon.' },\n { ro: 'Camera mea preferat\u0103 este dormitorul.', fr: 'Ma pi\u00e8ce pr\u00e9f\u00e9r\u00e9e est la chambre.' },\n { ro: 'Ei au o cas\u0103 mare cu o gr\u0103din\u0103 frumoas\u0103.', fr: 'Ils ont une grande maison avec un beau jardin.' },\n { ro: '\u00cemi place s\u0103 g\u0103tesc \u00een weekend.', fr: 'J\\'aime cuisiner le week-end.' }\n ];\n\n const tradContainer = document.getElementById('tradItems');\n tradData.forEach((t, i) => {\n const div = document.createElement('div');\n div.className = 'trad-item';\n const taId = 'ta-' + i, cId = 'c-' + i;\n div.innerHTML = `\n <div class=\"trad-num\">Phrase ${i+1}<\/div>\n <div class=\"trad-ro\">${t.ro}<\/div>\n <textarea class=\"trad-textarea\" id=\"${taId}\" data-counter=\"${cId}\"\n placeholder=\"\u00c9cris ta traduction en fran\u00e7ais...\"\n onfocus=\"setActiveTA(this)\" oninput=\"updateWordCount(this)\"><\/textarea>\n <div class=\"word-count\" id=\"${cId}\">0 mot<\/div>\n <button class=\"reveal-btn\" onclick=\"revealTrad(this)\" style=\"margin-top:10px;\">\ud83d\udc40 Voir la r\u00e9ponse<\/button>\n <div class=\"answer-box\">\n <strong>\u2705 R\u00e9ponse :<\/strong> ${t.fr}\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, '${t.fr.replace(\/'\/g,\"\\\\'\")}')\" style=\"margin-left:8px;\"><span>\ud83d\udd0a<\/span><\/button>\n <\/div>`;\n tradContainer.appendChild(div);\n });\n\n function revealTrad(btn) {\n const box = btn.nextElementSibling;\n box.classList.toggle('visible');\n btn.textContent = box.classList.contains('visible') ? '\ud83d\ude48 Masquer' : '\ud83d\udc40 Voir la r\u00e9ponse';\n }\n\n \/\/ BILAN\n const bilanItems = [\n 'Je connais les pi\u00e8ces de la maison en fran\u00e7ais.',\n 'Je connais les meubles principaux (canap\u00e9, lit, armoire, bureau...).',\n 'Je peux d\u00e9crire les activit\u00e9s qu\\'on fait \u00e0 la maison.',\n 'Je sais conjuguer le verbe AVOIR au pr\u00e9sent.',\n 'Je sais utiliser les articles UN, UNE et DES correctement.',\n 'Je sais faire une phrase n\u00e9gative avec NE... PAS.',\n 'J\\'ai compris les deux textes et r\u00e9pondu aux questions Vrai\/Faux.',\n 'J\\'ai compl\u00e9t\u00e9 l\\'exercice sur AVOIR.',\n 'J\\'ai compl\u00e9t\u00e9 l\\'exercice sur les articles.',\n 'J\\'ai compl\u00e9t\u00e9 l\\'exercice sur la n\u00e9gation.',\n 'J\\'ai particip\u00e9 \u00e0 la conversation orale sur ma maison.',\n 'J\\'ai traduit les phrases fran\u00e7aises avec succ\u00e8s.'\n ];\n\n const bilanGrid = document.getElementById('bilanGrid');\n bilanItems.forEach(text => {\n const div = document.createElement('div');\n div.className = 'bilan-item';\n div.innerHTML = `<div class=\"bilan-check\"><\/div><div class=\"bilan-text\">${text}<\/div>`;\n div.onclick = function() {\n this.classList.toggle('checked');\n this.querySelector('.bilan-check').textContent = this.classList.contains('checked') ? '\u2713' : '';\n updateBilanScore();\n };\n bilanGrid.appendChild(div);\n });\n\n function updateBilanScore() {\n const checked = document.querySelectorAll('.bilan-item.checked').length;\n document.getElementById('bilanScore').textContent = checked + ' \/ ' + bilanItems.length;\n const txt = document.getElementById('bilanScoreText');\n if (checked === bilanItems.length) { txt.textContent = '\ud83c\udf89 F\u00e9licitations, le\u00e7on compl\u00e8te !'; }\n else if (checked >= bilanItems.length \/ 2) { txt.textContent = '\ud83d\udc4f Tr\u00e8s bien, continue !'; }\n else { txt.textContent = 'Coche les cases au fur et \u00e0 mesure !'; }\n }\n<\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Le\u00e7on A1-A2 \u2013 La maison & les activit\u00e9s Le\u00e7on 1 \u00b7 A1-A2 La maison & les activit\u00e9sdu quotidien \u23f1 2 heures \ud83d\udcda Niveau A1-A2 \ud83c\udfe0 […]<\/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-1688","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\/1688","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=1688"}],"version-history":[{"count":1,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1688\/revisions"}],"predecessor-version":[{"id":1689,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1688\/revisions\/1689"}],"wp:attachment":[{"href":"https:\/\/geoisteaching.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1688,"date":"2026-05-10T06:49:15","date_gmt":"2026-05-10T06:49:15","guid":{"rendered":"https:\/\/geoisteaching.com\/?page_id=1688"},"modified":"2026-05-10T06:49:19","modified_gmt":"2026-05-10T06:49:19","slug":"a1-a2_1","status":"publish","type":"page","link":"https:\/\/geoisteaching.com\/?page_id=1688","title":{"rendered":"A1-A2_1"},"content":{"rendered":"\n\n\n\n\nLe\u00e7on A1-A2 \u2013 La maison & les activit\u00e9s<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700;800&family=Playfair+Display:ital,wght@0,600;1,400&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --coral: #E8633A;\n --coral-light: #F4956E;\n --coral-pale: #FEF0EB;\n --yellow: #F5C842;\n --yellow-pale: #FFFBE8;\n --teal: #2A9D8F;\n --teal-pale: #E8F8F6;\n --purple: #7B5EA7;\n --purple-pale: #F0EBF8;\n --cream: #FFFCF8;\n --dark: #2D2416;\n --mid: #5A4E3C;\n --muted: #9A8E7E;\n --green: #2D9E5F;\n --green-pale: #E8F8EF;\n --red: #E63946;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Nunito', sans-serif;\n background: var(--cream);\n color: var(--dark);\n font-size: 17px;\n line-height: 1.7;\n }\n\n \/* HEADER *\/\n .lesson-header {\n background: linear-gradient(135deg, var(--coral) 0%, #D4522A 100%);\n padding: 40px 60px;\n position: relative;\n overflow: hidden;\n }\n\n .lesson-header::before {\n content: '\ud83c\udfe0';\n position: absolute;\n right: 60px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 120px;\n opacity: 0.15;\n pointer-events: none;\n }\n\n .lesson-badge {\n background: var(--yellow);\n color: var(--dark);\n font-size: 12px;\n font-weight: 800;\n letter-spacing: 2px;\n text-transform: uppercase;\n padding: 5px 14px;\n border-radius: 20px;\n margin-bottom: 14px;\n display: inline-block;\n }\n\n .lesson-title {\n font-family: 'Nunito', sans-serif;\n font-size: clamp(24px, 3vw, 42px);\n color: #fff;\n line-height: 1.2;\n font-weight: 800;\n position: relative;\n z-index: 1;\n }\n\n .lesson-title em {\n font-style: italic;\n color: var(--yellow);\n font-family: 'Playfair Display', serif;\n }\n\n .lesson-meta {\n display: flex;\n gap: 20px;\n margin-top: 16px;\n flex-wrap: wrap;\n position: relative;\n z-index: 1;\n }\n\n .meta-item {\n background: rgba(255,255,255,0.15);\n color: #fff;\n font-size: 13px;\n font-weight: 600;\n padding: 4px 12px;\n border-radius: 20px;\n }\n\n \/* NAV *\/\n .section-nav {\n background: #fff;\n border-bottom: 2px solid var(--coral-pale);\n padding: 0 60px;\n display: flex;\n overflow-x: auto;\n position: sticky;\n top: 0;\n z-index: 100;\n box-shadow: 0 2px 12px rgba(0,0,0,0.05);\n }\n\n .sec-btn {\n font-family: 'Nunito', sans-serif;\n font-size: 13px;\n font-weight: 700;\n color: var(--muted);\n background: none;\n border: none;\n border-bottom: 3px solid transparent;\n padding: 16px 14px;\n cursor: pointer;\n white-space: nowrap;\n transition: color 0.2s, border-color 0.2s;\n }\n .sec-btn:hover { color: var(--coral); }\n .sec-btn.active { color: var(--coral); border-bottom-color: var(--coral); }\n\n \/* PROGRESS *\/\n .progress-bar {\n background: var(--coral-pale);\n padding: 10px 60px;\n display: flex;\n align-items: center;\n gap: 16px;\n border-bottom: 1px solid rgba(232,99,58,0.1);\n }\n\n .progress-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--coral); white-space: nowrap; }\n .progress-track { flex: 1; height: 6px; background: rgba(232,99,58,0.15); border-radius: 3px; }\n .progress-fill { height: 100%; background: var(--coral); border-radius: 3px; transition: width 0.4s ease; }\n .progress-pct { font-size: 13px; font-weight: 800; color: var(--coral); white-space: nowrap; }\n\n \/* SECTIONS *\/\n .section { display: none; padding: 50px 60px; max-width: 1000px; margin: 0 auto; animation: fadeIn 0.3s ease; }\n .section.active { display: block; }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .section-label { font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--coral); margin-bottom: 8px; }\n .section-title { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 38px); color: var(--dark); margin-bottom: 36px; line-height: 1.2; }\n\n \/* TTS *\/\n .tts-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n background: none;\n border: 2px solid var(--coral);\n color: var(--coral);\n font-size: 12px;\n font-weight: 700;\n padding: 3px 10px;\n border-radius: 20px;\n cursor: pointer;\n transition: all 0.2s;\n vertical-align: middle;\n margin-left: 6px;\n font-family: 'Nunito', sans-serif;\n }\n .tts-btn:hover, .tts-btn.playing { background: var(--coral); color: #fff; }\n\n \/* PLAN *\/\n .plan-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n margin-bottom: 36px;\n }\n\n .plan-card {\n background: #fff;\n border: 2px solid var(--coral-pale);\n border-radius: 12px;\n padding: 20px;\n text-align: center;\n transition: border-color 0.2s;\n }\n .plan-card:hover { border-color: var(--coral-light); }\n\n .plan-emoji { font-size: 36px; margin-bottom: 10px; }\n .plan-time { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--coral); margin-bottom: 6px; }\n .plan-title { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 6px; }\n .plan-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }\n\n \/* OBJECTIFS *\/\n .objectifs {\n background: var(--yellow-pale);\n border: 2px solid var(--yellow);\n border-radius: 12px;\n padding: 24px 28px;\n margin-bottom: 0;\n }\n\n .objectifs h3 { font-size: 16px; font-weight: 800; color: var(--dark); margin-bottom: 14px; }\n .obj-list { list-style: none; }\n .obj-list li { padding: 6px 0; color: var(--mid); font-size: 15px; display: flex; align-items: flex-start; gap: 10px; }\n .obj-list li::before { content: '\u2705'; flex-shrink: 0; }\n\n \/* TEXTES *\/\n .text-card {\n background: #fff;\n border: 2px solid var(--coral-pale);\n border-radius: 16px;\n padding: 32px 36px;\n margin-bottom: 28px;\n }\n\n .text-tag { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--coral); margin-bottom: 8px; }\n .text-title { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 20px; }\n\n .text-body p { margin-bottom: 14px; line-height: 1.9; color: var(--mid); font-size: 16px; }\n .text-body p:last-child { margin-bottom: 0; }\n\n \/* MOT CL\u00c9 dans texte *\/\n .mot-cle { color: var(--coral); font-weight: 700; }\n\n .questions-box {\n background: var(--coral-pale);\n border-radius: 10px;\n padding: 20px 24px;\n margin-top: 20px;\n border-left: 4px solid var(--coral);\n }\n .questions-box h4 { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 12px; }\n .questions-box ol { padding-left: 20px; }\n .questions-box li { margin-bottom: 8px; color: var(--mid); font-size: 14px; line-height: 1.6; }\n\n \/* VRAI \/ FAUX *\/\n .vf-item {\n background: #fff;\n border: 2px solid var(--coral-pale);\n border-radius: 10px;\n padding: 14px 18px;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n font-size: 15px;\n color: var(--mid);\n }\n\n .vf-btns { display: flex; gap: 8px; flex-shrink: 0; }\n\n .vf-btn {\n font-family: 'Nunito', sans-serif;\n font-size: 13px;\n font-weight: 800;\n padding: 5px 14px;\n border-radius: 20px;\n border: 2px solid;\n cursor: pointer;\n transition: all 0.2s;\n }\n\n .vf-btn.vrai { border-color: var(--green); color: var(--green); background: none; }\n .vf-btn.vrai:hover, .vf-btn.vrai.selected { background: var(--green); color: #fff; }\n .vf-btn.faux { border-color: var(--red); color: var(--red); background: none; }\n .vf-btn.faux:hover, .vf-btn.faux.selected { background: var(--red); color: #fff; }\n\n .vf-feedback { display: none; font-size: 13px; font-weight: 700; margin-top: 6px; padding: 4px 10px; border-radius: 8px; }\n .vf-feedback.correct { display: inline-block; background: var(--green-pale); color: var(--green); }\n .vf-feedback.incorrect { display: inline-block; background: #FDE8E8; color: var(--red); }\n\n \/* VOCABULAIRE *\/\n .vocab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }\n\n .vocab-item {\n background: #fff;\n border: 2px solid var(--coral-pale);\n border-radius: 12px;\n padding: 16px 18px;\n display: flex;\n align-items: flex-start;\n gap: 12px;\n transition: border-color 0.2s, transform 0.2s;\n }\n .vocab-item:hover { border-color: var(--coral-light); transform: translateY(-1px); }\n\n .vocab-emoji { font-size: 28px; flex-shrink: 0; }\n .vocab-content { flex: 1; }\n .vocab-word { font-size: 17px; font-weight: 800; color: var(--dark); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n .vocab-type { font-size: 11px; color: var(--muted); font-style: italic; font-weight: 400; }\n .vocab-ro { font-size: 14px; color: var(--coral); font-weight: 700; }\n .vocab-example { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 3px; }\n\n \/* GRAMMAIRE *\/\n .gram-block {\n background: #fff;\n border: 2px solid var(--coral-pale);\n border-radius: 16px;\n padding: 28px 32px;\n margin-bottom: 24px;\n }\n\n .gram-title { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 14px; }\n\n .gram-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }\n .gram-table th { background: var(--coral); color: #fff; padding: 10px 16px; text-align: left; font-weight: 800; border-radius: 0; }\n .gram-table th:first-child { border-radius: 8px 0 0 0; }\n .gram-table th:last-child { border-radius: 0 8px 0 0; }\n .gram-table td { padding: 10px 16px; border-bottom: 1px solid var(--coral-pale); color: var(--mid); }\n .gram-table tr:last-child td { border-bottom: none; }\n .gram-table tr:nth-child(even) td { background: var(--coral-pale); }\n\n .gram-note { background: var(--yellow-pale); border: 2px solid var(--yellow); border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--mid); margin-top: 16px; font-weight: 600; }\n\n .gram-example {\n background: var(--teal-pale);\n border-left: 4px solid var(--teal);\n border-radius: 0 8px 8px 0;\n padding: 12px 16px;\n margin: 12px 0;\n font-size: 15px;\n color: var(--mid);\n }\n .gram-example em { color: var(--teal); font-weight: 700; font-style: normal; }\n\n \/* EXERCICES *\/\n .exo-block { background: #fff; border: 2px solid var(--coral-pale); border-radius: 16px; padding: 28px 32px; margin-bottom: 24px; }\n .exo-title { font-size: 18px; font-weight: 800; color: var(--dark); margin-bottom: 16px; }\n .exo-item { margin-bottom: 16px; color: var(--mid); font-size: 15px; line-height: 1.8; }\n\n .exo-blank {\n display: inline-block;\n border: none;\n border-bottom: 2px solid var(--coral);\n min-width: 100px;\n margin: 0 4px;\n padding: 2px 6px;\n font-family: 'Nunito', sans-serif;\n font-size: 15px;\n font-weight: 700;\n color: var(--teal);\n background: transparent;\n outline: none;\n vertical-align: baseline;\n }\n .exo-blank:focus { border-bottom-color: var(--teal); background: var(--teal-pale); border-radius: 4px 4px 0 0; }\n .exo-blank::placeholder { color: rgba(232,99,58,0.35); font-style: italic; font-weight: 400; }\n\n .reveal-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n margin-top: 16px;\n background: none;\n border: 2px solid var(--coral);\n color: var(--coral);\n font-size: 13px;\n font-weight: 800;\n padding: 7px 18px;\n border-radius: 20px;\n cursor: pointer;\n font-family: 'Nunito', sans-serif;\n transition: all 0.2s;\n }\n .reveal-btn:hover { background: var(--coral); color: #fff; }\n\n .answer-box { display: none; background: var(--green-pale); border-left: 4px solid var(--green); border-radius: 0 8px 8px 0; padding: 14px 18px; margin-top: 12px; font-size: 15px; color: var(--mid); }\n .answer-box.visible { display: block; }\n .answer-box strong { color: var(--green); }\n\n \/* CHOIX MULTIPLE *\/\n .choice-item { margin-bottom: 16px; }\n .choice-q { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }\n .choice-opts { display: flex; gap: 8px; flex-wrap: wrap; }\n .choice-btn {\n font-family: 'Nunito', sans-serif;\n font-size: 14px;\n font-weight: 700;\n padding: 6px 16px;\n border-radius: 20px;\n border: 2px solid var(--coral-pale);\n background: #fff;\n color: var(--mid);\n cursor: pointer;\n transition: all 0.2s;\n }\n .choice-btn:hover { border-color: var(--coral-light); color: var(--coral); }\n .choice-btn.correct { background: var(--green); border-color: var(--green); color: #fff; }\n .choice-btn.incorrect { background: var(--red); border-color: var(--red); color: #fff; }\n\n \/* ORAL *\/\n .oral-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 28px; }\n .oral-card { background: #fff; border: 2px solid var(--coral-pale); border-radius: 12px; padding: 20px; transition: border-color 0.2s; }\n .oral-card:hover { border-color: var(--coral-light); }\n .oral-num { font-size: 32px; font-weight: 800; color: var(--coral-pale); line-height: 1; margin-bottom: 10px; }\n .oral-emoji { font-size: 24px; margin-bottom: 8px; }\n .oral-q { color: var(--mid); font-size: 15px; line-height: 1.6; font-weight: 600; }\n .oral-hint { color: var(--muted); font-size: 13px; margin-top: 8px; font-style: italic; }\n\n .role-play { background: var(--purple); border-radius: 16px; padding: 28px 32px; color: #fff; }\n .role-play h3 { font-size: 20px; font-weight: 800; color: var(--yellow); margin-bottom: 14px; }\n .role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }\n .role-card { background: rgba(255,255,255,0.1); border-radius: 10px; border-top: 3px solid var(--yellow); padding: 18px; }\n .role-card h4 { color: var(--yellow); font-size: 14px; font-weight: 800; margin-bottom: 10px; letter-spacing: 1px; text-transform: uppercase; }\n .role-card p { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; }\n\n \/* TRADUCTION *\/\n .trad-item { background: #fff; border: 2px solid var(--coral-pale); border-radius: 12px; padding: 20px 24px; margin-bottom: 14px; }\n .trad-num { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--coral); margin-bottom: 6px; text-transform: uppercase; }\n .trad-ro { font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 12px; }\n\n .trad-textarea {\n width: 100%;\n border: 2px solid var(--coral-pale);\n border-radius: 8px;\n padding: 10px 14px;\n font-family: 'Nunito', sans-serif;\n font-size: 15px;\n font-weight: 600;\n color: var(--dark);\n background: var(--cream);\n resize: vertical;\n min-height: 60px;\n outline: none;\n transition: border-color 0.2s;\n }\n .trad-textarea:focus { border-color: var(--coral); }\n .word-count { font-size: 12px; font-weight: 700; color: var(--muted); text-align: right; margin-top: 4px; }\n\n \/* CLAVIER *\/\n .clavier { background: var(--dark); border-radius: 12px; padding: 14px 18px; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n .clavier-label { color: rgba(255,255,255,0.5); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-right: 6px; width: 100%; }\n .key-btn { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); padding: 6px 12px; font-size: 16px; cursor: pointer; font-family: 'Nunito', sans-serif; font-weight: 700; transition: background 0.15s; border-radius: 6px; }\n .key-btn:hover { background: var(--coral); border-color: var(--coral); }\n\n \/* BILAN *\/\n .bilan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }\n .bilan-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; background: #fff; border: 2px solid var(--coral-pale); border-radius: 10px; cursor: pointer; transition: all 0.2s; user-select: none; }\n .bilan-item.checked { border-color: var(--green); background: var(--green-pale); }\n .bilan-check { width: 24px; height: 24px; border: 2px solid var(--coral-pale); border-radius: 50%; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; transition: all 0.2s; }\n .bilan-item.checked .bilan-check { background: var(--green); border-color: var(--green); color: #fff; }\n .bilan-text { font-size: 14px; color: var(--mid); line-height: 1.5; font-weight: 600; }\n .bilan-item.checked .bilan-text { color: var(--green); text-decoration: line-through; }\n\n .bilan-score { background: linear-gradient(135deg, var(--coral) 0%, #D4522A 100%); color: #fff; padding: 24px 28px; border-radius: 16px; margin-top: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }\n .score-text { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.8); }\n .score-num { font-size: 42px; font-weight: 800; color: var(--yellow); }\n\n \/* RESPONSIVE *\/\n @media (max-width: 768px) {\n .lesson-header { padding: 28px 20px; }\n .section-nav { padding: 0 8px; }\n .section { padding: 28px 20px; }\n .progress-bar { padding: 10px 20px; }\n .vocab-grid, .oral-grid, .bilan-grid, .role-cards, .plan-grid { grid-template-columns: 1fr; }\n }\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"lesson-header\">\n <div class=\"lesson-badge\">Le\u00e7on 1 \u00b7 A1-A2<\/div>\n <h1 class=\"lesson-title\">La maison & <em>les activit\u00e9s<\/em><br>du quotidien<\/h1>\n <div class=\"lesson-meta\">\n <span class=\"meta-item\">\u23f1 2 heures<\/span>\n <span class=\"meta-item\">\ud83d\udcda Niveau A1-A2<\/span>\n <span class=\"meta-item\">\ud83c\udfe0 La maison \u00b7 Les pi\u00e8ces \u00b7 Les activit\u00e9s<\/span>\n <span class=\"meta-item\">\ud83d\udd0a Audio int\u00e9gr\u00e9<\/span>\n <\/div>\n<\/div>\n\n\n<div class=\"progress-bar\">\n <span class=\"progress-label\">Progression<\/span>\n <div class=\"progress-track\"><div class=\"progress-fill\" id=\"progressFill\" style=\"width:12%\"><\/div><\/div>\n <span class=\"progress-pct\" id=\"progressPct\">1\/8<\/span>\n<\/div>\n\n\n<nav class=\"section-nav\">\n <button class=\"sec-btn active\" onclick=\"showSection(0)\">\ud83d\udccb Plan<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(1)\">\ud83d\udcd6 Compr\u00e9hension<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(2)\">\ud83d\udcdd Vocabulaire<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(3)\">\u2699\ufe0f Grammaire<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(4)\">\u270f\ufe0f Exercices<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(5)\">\ud83d\udde3\ufe0f Expression orale<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(6)\">\ud83d\udd04 Traduction<\/button>\n <button class=\"sec-btn\" onclick=\"showSection(7)\">\u2705 Bilan<\/button>\n<\/nav>\n\n\n<div class=\"section active\" id=\"sec0\">\n <div class=\"section-label\">Aper\u00e7u de la le\u00e7on<\/div>\n <h2 class=\"section-title\">Plan de la s\u00e9ance<\/h2>\n\n <div class=\"plan-grid\">\n <div class=\"plan-card\">\n <div class=\"plan-emoji\">\ud83d\udcac<\/div>\n <div class=\"plan-time\">0:00 \u2013 0:20<\/div>\n <div class=\"plan-title\">Mise en route<\/div>\n <div class=\"plan-desc\">Discussion : comment est votre maison ? Quelles pi\u00e8ces avez-vous ?<\/div>\n <\/div>\n <div class=\"plan-card\">\n <div class=\"plan-emoji\">\ud83d\udcd6<\/div>\n <div class=\"plan-time\">0:20 \u2013 0:45<\/div>\n <div class=\"plan-title\">Compr\u00e9hension<\/div>\n <div class=\"plan-desc\">Deux textes courts sur une maison et une journ\u00e9e typique.<\/div>\n <\/div>\n <div class=\"plan-card\">\n <div class=\"plan-emoji\">\ud83d\udcdd<\/div>\n <div class=\"plan-time\">0:45 \u2013 1:05<\/div>\n <div class=\"plan-title\">Vocabulaire<\/div>\n <div class=\"plan-desc\">20 mots : les pi\u00e8ces, les meubles et les activit\u00e9s \u00e0 la maison.<\/div>\n <\/div>\n <div class=\"plan-card\">\n <div class=\"plan-emoji\">\u2699\ufe0f<\/div>\n <div class=\"plan-time\">1:05 \u2013 1:25<\/div>\n <div class=\"plan-title\">Grammaire<\/div>\n <div class=\"plan-desc\">Le verbe <em>avoir<\/em>, les articles (un\/une\/des), la n\u00e9gation.<\/div>\n <\/div>\n <div class=\"plan-card\">\n <div class=\"plan-emoji\">\u270f\ufe0f<\/div>\n <div class=\"plan-time\">1:25 \u2013 1:45<\/div>\n <div class=\"plan-title\">Exercices & traduction<\/div>\n <div class=\"plan-desc\">Exercices pratiques et traduction de phrases simples.<\/div>\n <\/div>\n <div class=\"plan-card\">\n <div class=\"plan-emoji\">\ud83d\udde3\ufe0f<\/div>\n <div class=\"plan-time\">1:45 \u2013 2:00<\/div>\n <div class=\"plan-title\">Expression orale<\/div>\n <div class=\"plan-desc\">D\u00e9crire sa maison et raconter sa journ\u00e9e en fran\u00e7ais !<\/div>\n <\/div>\n <\/div>\n\n <div class=\"objectifs\">\n <h3>\ud83c\udfaf Objectifs de la le\u00e7on<\/h3>\n <ul class=\"obj-list\">\n <li>Nommer les pi\u00e8ces de la maison et les meubles principaux<\/li>\n <li>D\u00e9crire les activit\u00e9s quotidiennes \u00e0 la maison<\/li>\n <li>Utiliser le verbe <em>avoir<\/em> au pr\u00e9sent<\/li>\n <li>Employer correctement les articles ind\u00e9finis (un, une, des)<\/li>\n <li>Formuler des phrases n\u00e9gatives avec <em>ne… pas<\/em><\/li>\n <li>Poser des questions simples sur la maison et les habitudes<\/li>\n <\/ul>\n <\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec1\">\n <div class=\"section-label\">Compr\u00e9hension \u00e9crite & orale<\/div>\n <h2 class=\"section-title\">Lisons ensemble ! \ud83d\udcd6<\/h2>\n\n \n <div class=\"text-card\">\n <div class=\"text-tag\">Texte 1 \u00b7 Description<\/div>\n <h3 class=\"text-title\">La maison de Sophie\n <button class=\"tts-btn\" onclick=\"ttsRead(this,'txt1')\"><span>\ud83d\udd0a<\/span> \u00c9couter<\/button>\n <\/h3>\n <div class=\"text-body\" id=\"txt1\">\n <p>Je m’appelle Sophie. J’ai <span class=\"mot-cle\">un appartement<\/span> \u00e0 Lyon. C’est petit mais confortable !<\/p>\n <p>Dans mon appartement, il y a <span class=\"mot-cle\">un salon<\/span>, <span class=\"mot-cle\">une cuisine<\/span>, <span class=\"mot-cle\">une chambre<\/span> et <span class=\"mot-cle\">une salle de bains<\/span>. Il n’y a pas de jardin.<\/p>\n <p>Dans le salon, j’ai <span class=\"mot-cle\">un canap\u00e9<\/span>, <span class=\"mot-cle\">une table<\/span> et <span class=\"mot-cle\">une t\u00e9l\u00e9vision<\/span>. Dans la cuisine, j’ai <span class=\"mot-cle\">un r\u00e9frig\u00e9rateur<\/span> et <span class=\"mot-cle\">une machine \u00e0 caf\u00e9<\/span>. J’adore le caf\u00e9 !<\/p>\n <p>Dans ma chambre, j’ai <span class=\"mot-cle\">un lit<\/span>, <span class=\"mot-cle\">une armoire<\/span> et <span class=\"mot-cle\">un bureau<\/span>. Je travaille souvent dans ma chambre.<\/p>\n <p>J’aime beaucoup mon appartement. C’est mon chez-moi !<\/p>\n <\/div>\n <div class=\"questions-box\">\n <h4>\u2705 Vrai ou Faux ? Cliquez sur votre r\u00e9ponse !<\/h4>\n <div id=\"vfContainer1\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"text-card\">\n <div class=\"text-tag\">Texte 2 \u00b7 Une journ\u00e9e typique<\/div>\n <h3 class=\"text-title\">La journ\u00e9e de Marc\n <button class=\"tts-btn\" onclick=\"ttsRead(this,'txt2')\"><span>\ud83d\udd0a<\/span> \u00c9couter<\/button>\n <\/h3>\n <div class=\"text-body\" id=\"txt2\">\n <p>Je m’appelle Marc. Je suis professeur de math\u00e9matiques. Voici ma journ\u00e9e typique !<\/p>\n <p>Le matin, je me l\u00e8ve \u00e0 7 heures. Je prends une douche dans <span class=\"mot-cle\">la salle de bains<\/span>. Ensuite, je mange dans <span class=\"mot-cle\">la cuisine<\/span> : des tartines et du caf\u00e9.<\/p>\n <p>\u00c0 8 heures, je quitte la maison. Je travaille de 9 heures \u00e0 17 heures.<\/p>\n <p>Le soir, je rentre \u00e0 la maison. Je cuisine dans <span class=\"mot-cle\">la cuisine<\/span>, je mange dans <span class=\"mot-cle\">le salon<\/span> et je regarde la t\u00e9l\u00e9vision. J’aime les documentaires !<\/p>\n <p>\u00c0 22 heures, je vais dans <span class=\"mot-cle\">ma chambre<\/span>. Je lis un livre et je dors. Bonne nuit !<\/p>\n <\/div>\n <div class=\"questions-box\">\n <h4>\u2705 Vrai ou Faux ? Cliquez sur votre r\u00e9ponse !<\/h4>\n <div id=\"vfContainer2\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec2\">\n <div class=\"section-label\">Vocabulaire th\u00e9matique<\/div>\n <h2 class=\"section-title\">20 mots essentiels \ud83c\udfe0<\/h2>\n <div class=\"vocab-grid\" id=\"vocabGrid\"><\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec3\">\n <div class=\"section-label\">Points de grammaire<\/div>\n <h2 class=\"section-title\">On apprend ! \u2699\ufe0f<\/h2>\n\n \n <div class=\"gram-block\">\n <h3 class=\"gram-title\">1. Le verbe AVOIR au pr\u00e9sent\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, 'J\\'ai un appartement. Tu as une chambre. Il a un salon. Nous avons une cuisine. Vous avez un jardin. Ils ont une maison.')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/h3>\n <p style=\"color:var(--muted); margin-bottom:16px; font-weight:600;\">Le verbe <em>avoir<\/em> est tr\u00e8s important ! On l’utilise pour dire ce qu’on poss\u00e8de.<\/p>\n <table class=\"gram-table\">\n <tr><th>Pronom<\/th><th>AVOIR<\/th><th>Exemple<\/th><\/tr>\n <tr><td>Je<\/td><td><strong>ai<\/strong><\/td><td><em>J’ai un appartement.<\/em><\/td><\/tr>\n <tr><td>Tu<\/td><td><strong>as<\/strong><\/td><td><em>Tu as une chambre.<\/em><\/td><\/tr>\n <tr><td>Il \/ Elle \/ On<\/td><td><strong>a<\/strong><\/td><td><em>Elle a un salon confortable.<\/em><\/td><\/tr>\n <tr><td>Nous<\/td><td><strong>avons<\/strong><\/td><td><em>Nous avons une grande cuisine.<\/em><\/td><\/tr>\n <tr><td>Vous<\/td><td><strong>avez<\/strong><\/td><td><em>Vous avez un jardin ?<\/em><\/td><\/tr>\n <tr><td>Ils \/ Elles<\/td><td><strong>ont<\/strong><\/td><td><em>Ils ont trois chambres.<\/em><\/td><\/tr>\n <\/table>\n <div class=\"gram-note\">\u26a0\ufe0f Attention ! Je + ai = <strong>J’ai<\/strong> (on fait l’\u00e9lision !)<\/div>\n <\/div>\n\n \n <div class=\"gram-block\">\n <h3 class=\"gram-title\">2. Les articles ind\u00e9finis : UN \u00b7 UNE \u00b7 DES\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, 'Un salon. Une cuisine. Une chambre. Des meubles. J\\'ai un canap\u00e9. J\\'ai une table. J\\'ai des chaises.')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/h3>\n <p style=\"color:var(--muted); margin-bottom:16px; font-weight:600;\">En fran\u00e7ais, chaque nom a un genre (masculin ou f\u00e9minin). L’article change selon le genre !<\/p>\n <table class=\"gram-table\">\n <tr><th>Article<\/th><th>Genre<\/th><th>Exemples<\/th><\/tr>\n <tr><td><strong>UN<\/strong><\/td><td>Masculin singulier<\/td><td><em>un salon, un lit, un bureau, un canap\u00e9<\/em><\/td><\/tr>\n <tr><td><strong>UNE<\/strong><\/td><td>F\u00e9minin singulier<\/td><td><em>une cuisine, une chambre, une armoire<\/em><\/td><\/tr>\n <tr><td><strong>DES<\/strong><\/td><td>Pluriel (m. et f.)<\/td><td><em>des meubles, des chaises, des fen\u00eatres<\/em><\/td><\/tr>\n <\/table>\n <div class=\"gram-example\">\n \ud83c\udfe0 <em>J’ai <strong>un<\/strong> salon, <strong>une<\/strong> chambre et <strong>des<\/strong> meubles confortables.<\/em>\n <\/div>\n <div class=\"gram-note\">\ud83d\udca1 Astuce : apprenez toujours le mot avec son article ! Pas \u00ab salon \u00bb mais \u00ab <strong>un<\/strong> salon \u00bb. Pas \u00ab cuisine \u00bb mais \u00ab <strong>une<\/strong> cuisine \u00bb.<\/div>\n <\/div>\n\n \n <div class=\"gram-block\">\n <h3 class=\"gram-title\">3. La n\u00e9gation : NE… PAS\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, 'Je n\\'ai pas de jardin. Il n\\'y a pas de garage. Je ne regarde pas la t\u00e9l\u00e9vision. Elle n\\'a pas de balcon.')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/h3>\n <p style=\"color:var(--muted); margin-bottom:16px; font-weight:600;\">Pour dire ce qu’on n’a pas, on utilise <strong>ne… pas<\/strong>. Apr\u00e8s la n\u00e9gation, <em>un\/une\/des<\/em> devient <strong>de<\/strong> !<\/p>\n <table class=\"gram-table\">\n <tr><th>Affirmatif \u2705<\/th><th>N\u00e9gatif \u274c<\/th><\/tr>\n <tr><td>J’ai <em>un<\/em> jardin.<\/td><td>Je n’ai pas <strong>de<\/strong> jardin.<\/td><\/tr>\n <tr><td>Il y a <em>une<\/em> terrasse.<\/td><td>Il n’y a pas <strong>de<\/strong> terrasse.<\/td><\/tr>\n <tr><td>J’ai <em>des<\/em> voisins sympa.<\/td><td>Je n’ai pas <strong>de<\/strong> voisins sympa.<\/td><\/tr>\n <tr><td>Elle regarde la t\u00e9l\u00e9.<\/td><td>Elle ne regarde pas la t\u00e9l\u00e9.<\/td><\/tr>\n <\/table>\n <div class=\"gram-note\">\u26a0\ufe0f Ne + voyelle = <strong>N’<\/strong> ! \u2192 Je <strong>n’<\/strong>ai pas de jardin. Il <strong>n’<\/strong>y a pas de garage.<\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec4\">\n <div class=\"section-label\">Mise en pratique<\/div>\n <h2 class=\"section-title\">\u00c0 toi de jouer ! \u270f\ufe0f<\/h2>\n\n \n <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 1 \u2013 Compl\u00e8te avec AVOIR !<\/h3>\n <p style=\"color:var(--muted); font-size:14px; font-weight:600; margin-bottom:16px;\">Conjugue le verbe <em>avoir<\/em> au pr\u00e9sent.<\/p>\n <div class=\"exo-item\">1. J’ <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:80px;\"> un grand appartement \u00e0 Paris.<\/div>\n <div class=\"exo-item\">2. Tu <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:80px;\"> une belle chambre ?<\/div>\n <div class=\"exo-item\">3. Sophie <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:80px;\"> un canap\u00e9 rouge dans son salon.<\/div>\n <div class=\"exo-item\">4. Nous <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:80px;\"> une maison avec un jardin.<\/div>\n <div class=\"exo-item\">5. Vous <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:80px;\"> combien de chambres ?<\/div>\n <div class=\"exo-item\">6. Mes parents <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:80px;\"> une grande cuisine.<\/div>\n <button class=\"reveal-btn\" onclick=\"revealExo(this)\">\ud83d\udc40 Voir les r\u00e9ponses<\/button>\n <div class=\"answer-box\">\n <strong>\u2705 R\u00e9ponses :<\/strong><br>\n 1. <em>ai<\/em> \u00b7 2. <em>as<\/em> \u00b7 3. <em>a<\/em> \u00b7 4. <em>avons<\/em> \u00b7 5. <em>avez<\/em> \u00b7 6. <em>ont<\/em>\n <\/div>\n <\/div>\n\n \n <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 2 \u2013 UN, UNE ou DES ?<\/h3>\n <p style=\"color:var(--muted); font-size:14px; font-weight:600; margin-bottom:16px;\">Compl\u00e8te avec l’article correct.<\/p>\n <div class=\"exo-item\">1. Dans ma maison, il y a <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> salon et <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> cuisine.<\/div>\n <div class=\"exo-item\">2. J’ai <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> lit tr\u00e8s confortable dans ma chambre.<\/div>\n <div class=\"exo-item\">3. Il y a <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> chaises autour de la table.<\/div>\n <div class=\"exo-item\">4. Sophie a <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> armoire blanche dans sa chambre.<\/div>\n <div class=\"exo-item\">5. Marc a <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> bureau pour travailler.<\/div>\n <button class=\"reveal-btn\" onclick=\"revealExo(this)\">\ud83d\udc40 Voir les r\u00e9ponses<\/button>\n <div class=\"answer-box\">\n <strong>\u2705 R\u00e9ponses :<\/strong><br>\n 1. <em>un<\/em> \/ <em>une<\/em> \u00b7 2. <em>un<\/em> \u00b7 3. <em>des<\/em> \u00b7 4. <em>une<\/em> \u00b7 5. <em>un<\/em>\n <\/div>\n <\/div>\n\n \n <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 3 \u2013 Mets \u00e0 la forme n\u00e9gative !<\/h3>\n <p style=\"color:var(--muted); font-size:14px; font-weight:600; margin-bottom:16px;\">Transforme les phrases avec <em>ne… pas<\/em>.<\/p>\n <div class=\"exo-item\">1. J’ai un jardin. \u2192 Je <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:180px;\"> jardin.<\/div>\n <div class=\"exo-item\">2. Il y a une terrasse. \u2192 Il <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:220px;\"> terrasse.<\/div>\n <div class=\"exo-item\">3. Marc regarde la t\u00e9l\u00e9vision. \u2192 Marc <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:220px;\"> t\u00e9l\u00e9vision.<\/div>\n <div class=\"exo-item\">4. Elle a des voisins. \u2192 Elle <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:200px;\"> voisins.<\/div>\n <button class=\"reveal-btn\" onclick=\"revealExo(this)\">\ud83d\udc40 Voir les r\u00e9ponses<\/button>\n <div class=\"answer-box\">\n <strong>\u2705 R\u00e9ponses :<\/strong><br>\n 1. <em>n’ai pas de<\/em> \u00b7 2. <em>n’y a pas de<\/em> \u00b7 3. <em>ne regarde pas la<\/em> \u00b7 4. <em>n’a pas de<\/em>\n <\/div>\n <\/div>\n\n \n <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 4 \u2013 Choisis la bonne r\u00e9ponse ! \ud83c\udfaf<\/h3>\n <div id=\"choiceContainer\"><\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec5\">\n <div class=\"section-label\">Expression orale<\/div>\n <h2 class=\"section-title\">Parle en fran\u00e7ais ! \ud83d\udde3\ufe0f<\/h2>\n\n <div class=\"oral-grid\">\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83c\udfe0<\/div>\n <div class=\"oral-num\">01<\/div>\n <div class=\"oral-q\">Comment est votre maison ou appartement ? Combien de pi\u00e8ces avez-vous ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Utilisez : J’ai un\/une… \u00b7 Il y a… \u00b7 Dans ma maison…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83d\udecb\ufe0f<\/div>\n <div class=\"oral-num\">02<\/div>\n <div class=\"oral-q\">Quelle est votre pi\u00e8ce pr\u00e9f\u00e9r\u00e9e dans votre maison ? Pourquoi ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Utilisez : Ma pi\u00e8ce pr\u00e9f\u00e9r\u00e9e est… \u00b7 J’aime… parce que…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\u2600\ufe0f<\/div>\n <div class=\"oral-num\">03<\/div>\n <div class=\"oral-q\">D\u00e9crivez votre matin typique. Que faites-vous dans chaque pi\u00e8ce ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Utilisez : Le matin, je… \u00b7 Dans la cuisine, je… \u00b7 Ensuite…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83c\udf19<\/div>\n <div class=\"oral-num\">04<\/div>\n <div class=\"oral-q\">Que faites-vous le soir \u00e0 la maison ? Quelles activit\u00e9s aimez-vous ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Utilisez : Le soir, je… \u00b7 J’aime… \u00b7 Je regarde \/ lis \/ cuisine…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83c\udfe1<\/div>\n <div class=\"oral-num\">05<\/div>\n <div class=\"oral-q\">D\u00e9crivez la maison id\u00e9ale ! Combien de pi\u00e8ces ? Avec un jardin ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Utilisez : Dans ma maison id\u00e9ale, il y a… \u00b7 J’ai… \u00b7 Je veux…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83d\udc6b<\/div>\n <div class=\"oral-num\">06<\/div>\n <div class=\"oral-q\">Posez 3 questions \u00e0 votre partenaire sur sa maison et ses activit\u00e9s.<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Utilisez : Tu as… ? \u00b7 Il y a… chez toi ? \u00b7 Qu’est-ce que tu fais… ?<\/div>\n <\/div>\n <\/div>\n\n <div class=\"role-play\">\n <h3>\ud83c\udfad Jeu de r\u00f4le : Cherche un appartement !<\/h3>\n <p style=\"color:rgba(255,255,255,0.8); font-size:15px; line-height:1.7; margin-bottom:4px;\">Tu cherches un appartement. L’agent immobilier te propose un appartement. Pose des questions et d\u00e9cide si tu le prends !<\/p>\n <div class=\"role-cards\">\n <div class=\"role-card\">\n <h4>\ud83d\udd0d R\u00f4le A \u2013 Le\/la locataire<\/h4>\n <p>Tu cherches un appartement. Pose des questions : <em>\u00ab Il y a combien de chambres ? \u00bb, \u00ab Est-ce qu’il y a un jardin ? \u00bb, \u00ab La cuisine est grande ? \u00bb, \u00ab Il n’y a pas de… ? \u00bb<\/em><\/p>\n <\/div>\n <div class=\"role-card\">\n <h4>\ud83c\udfe2 R\u00f4le B \u2013 L’agent immobilier<\/h4>\n <p>Tu pr\u00e9sentes l’appartement : <em>\u00ab Il y a un salon, deux chambres… \u00bb, \u00ab L’appartement a une grande cuisine… \u00bb, \u00ab Il n’y a pas de jardin mais il y a un balcon… \u00bb<\/em><\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec6\">\n <div class=\"section-label\">Traduction RO \u2192 FR<\/div>\n <h2 class=\"section-title\">Traduis en fran\u00e7ais ! \ud83d\udd04<\/h2>\n\n <div class=\"clavier\">\n <span class=\"clavier-label\">Lettres fran\u00e7aises<\/span>\n <button class=\"key-btn\" onclick=\"insertChar('\u00e9')\">\u00e9<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00e8')\">\u00e8<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00ea')\">\u00ea<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00e0')\">\u00e0<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00e2')\">\u00e2<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00f9')\">\u00f9<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00fb')\">\u00fb<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00ee')\">\u00ee<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00f4')\">\u00f4<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u0153')\">\u0153<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00e7')\">\u00e7<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00ab')\">\u00ab<\/button>\n <button class=\"key-btn\" onclick=\"insertChar('\u00bb')\">\u00bb<\/button>\n <\/div>\n\n <div id=\"tradItems\"><\/div>\n<\/div>\n\n\n<div class=\"section\" id=\"sec7\">\n <div class=\"section-label\">Bilan de la le\u00e7on<\/div>\n <h2 class=\"section-title\">Qu’est-ce que j’ai appris ? \u2705<\/h2>\n <div class=\"bilan-grid\" id=\"bilanGrid\"><\/div>\n <div class=\"bilan-score\">\n <div>\n <div class=\"score-text\">Objectifs atteints<\/div>\n <div id=\"bilanScoreText\" style=\"color:rgba(255,255,255,0.7); font-size:14px; font-weight:700; margin-top:4px;\">Coche les cases !<\/div>\n <\/div>\n <div class=\"score-num\" id=\"bilanScore\">0 \/ 12<\/div>\n <\/div>\n<\/div>\n\n\n<script>\n \/\/ NAVIGATION\n const sections = document.querySelectorAll('.section');\n const secBtns = document.querySelectorAll('.sec-btn');\n\n function showSection(idx) {\n sections.forEach((s, i) => s.classList.toggle('active', i === idx));\n secBtns.forEach((b, i) => b.classList.toggle('active', i === idx));\n const pct = Math.round(((idx + 1) \/ sections.length) * 100);\n document.getElementById('progressFill').style.width = pct + '%';\n document.getElementById('progressPct').textContent = (idx + 1) + '\/' + sections.length;\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n \/\/ TTS\n let currentBtn = null;\n\n function ttsStop() {\n if (window.speechSynthesis) window.speechSynthesis.cancel();\n if (currentBtn) {\n currentBtn.classList.remove('playing');\n currentBtn.innerHTML = '<span>\ud83d\udd0a<\/span> \u00c9couter';\n currentBtn = null;\n }\n }\n\n function ttsReadText(btn, text) {\n if (!window.speechSynthesis) { alert('Synth\u00e8se vocale non support\u00e9e.'); return; }\n if (currentBtn === btn && window.speechSynthesis.speaking) { ttsStop(); return; }\n ttsStop();\n const utter = new SpeechSynthesisUtterance(text);\n utter.lang = 'fr-FR';\n utter.rate = 0.82;\n utter.pitch = 1.05;\n const voices = window.speechSynthesis.getVoices();\n const frVoice = voices.find(v => v.lang.startsWith('fr-FR')) || voices.find(v => v.lang.startsWith('fr'));\n if (frVoice) utter.voice = frVoice;\n utter.onstart = () => { btn.classList.add('playing'); btn.innerHTML = '<span>\u23f9<\/span> Stop'; currentBtn = btn; };\n utter.onend = utter.onerror = () => { btn.classList.remove('playing'); btn.innerHTML = '<span>\ud83d\udd0a<\/span> \u00c9couter'; currentBtn = null; };\n window.speechSynthesis.speak(utter);\n }\n\n function ttsRead(btn, id) {\n const el = document.getElementById(id);\n if (el) ttsReadText(btn, el.innerText || el.textContent);\n }\n\n if (window.speechSynthesis) window.speechSynthesis.onvoiceschanged = () => window.speechSynthesis.getVoices();\n\n \/\/ VRAI \/ FAUX\n const vfData1 = [\n { q: \"Sophie habite dans une maison.\", answer: false, correction: \"Non, elle habite dans un appartement.\" },\n { q: \"L'appartement de Sophie est \u00e0 Lyon.\", answer: true },\n { q: \"Sophie a un jardin.\", answer: false, correction: \"Non, il n'y a pas de jardin.\" },\n { q: \"Dans le salon, il y a un canap\u00e9 et une t\u00e9l\u00e9vision.\", answer: true },\n { q: \"Sophie n'a pas de bureau.\", answer: false, correction: \"Non, elle a un bureau dans sa chambre.\" }\n ];\n\n const vfData2 = [\n { q: \"Marc est professeur de fran\u00e7ais.\", answer: false, correction: \"Non, il est professeur de math\u00e9matiques.\" },\n { q: \"Marc se l\u00e8ve \u00e0 7 heures.\", answer: true },\n { q: \"Le matin, Marc mange dans le salon.\", answer: false, correction: \"Non, il mange dans la cuisine.\" },\n { q: \"Marc aime les documentaires.\", answer: true },\n { q: \"Marc va dormir \u00e0 23 heures.\", answer: false, correction: \"Non, il va dans sa chambre \u00e0 22 heures.\" }\n ];\n\n function buildVF(data, containerId) {\n const container = document.getElementById(containerId);\n data.forEach((item, i) => {\n const div = document.createElement('div');\n div.className = 'vf-item';\n div.style.flexDirection = 'column';\n div.style.alignItems = 'flex-start';\n div.innerHTML = `\n <div style=\"display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;\">\n <span>${i+1}. ${item.q}<\/span>\n <div class=\"vf-btns\">\n <button class=\"vf-btn vrai\" onclick=\"checkVF(this, ${item.answer}, true, '${item.correction || ''}')\">\u2705 Vrai<\/button>\n <button class=\"vf-btn faux\" onclick=\"checkVF(this, ${item.answer}, false, '${item.correction || ''}')\">\u274c Faux<\/button>\n <\/div>\n <\/div>\n <div class=\"vf-feedback\" id=\"vf-fb-${containerId}-${i}\"><\/div>`;\n container.appendChild(div);\n });\n }\n\n function checkVF(btn, correct, chosen, correction) {\n const btns = btn.parentElement.querySelectorAll('.vf-btn');\n btns.forEach(b => { b.classList.remove('selected'); b.style.pointerEvents = 'none'; });\n btn.classList.add('selected');\n const fb = btn.closest('.vf-item').querySelector('.vf-feedback');\n if (chosen === correct) {\n fb.textContent = '\ud83c\udf89 Bravo ! C\\'est correct !';\n fb.className = 'vf-feedback correct';\n } else {\n fb.textContent = correction ? '\ud83d\udca1 ' + correction : '\u274c Ce n\\'est pas correct.';\n fb.className = 'vf-feedback incorrect';\n }\n }\n\n buildVF(vfData1, 'vfContainer1');\n buildVF(vfData2, 'vfContainer2');\n\n \/\/ CHOIX MULTIPLE\n const choiceData = [\n { q: \"Dans ___, il y a un canap\u00e9.\", opts: [\"la cuisine\", \"le salon\", \"la chambre\"], correct: 1 },\n { q: \"J'ai ___ armoire dans ma chambre.\", opts: [\"un\", \"une\", \"des\"], correct: 1 },\n { q: \"Sophie ___ un appartement \u00e0 Lyon.\", opts: [\"est\", \"a\", \"ont\"], correct: 1 },\n { q: \"Je n'ai pas ___ jardin.\", opts: [\"un\", \"une\", \"de\"], correct: 2 },\n { q: \"Marc se l\u00e8ve ___ 7 heures.\", opts: [\"\u00e0\", \"en\", \"de\"], correct: 0 }\n ];\n\n const cc = document.getElementById('choiceContainer');\n choiceData.forEach((item, i) => {\n const div = document.createElement('div');\n div.className = 'choice-item';\n div.innerHTML = `<div class=\"choice-q\">${i+1}. ${item.q}<\/div>\n <div class=\"choice-opts\">${item.opts.map((o, j) =>\n `<button class=\"choice-btn\" onclick=\"checkChoice(this, ${j === item.correct})\">${o}<\/button>`\n ).join('')}<\/div>`;\n cc.appendChild(div);\n });\n\n function checkChoice(btn, isCorrect) {\n const opts = btn.parentElement.querySelectorAll('.choice-btn');\n opts.forEach(b => b.style.pointerEvents = 'none');\n btn.classList.add(isCorrect ? 'correct' : 'incorrect');\n if (!isCorrect) {\n opts.forEach(b => { if (b.classList.contains('correct') || b === btn) return; });\n }\n }\n\n \/\/ EXERCICES\n function revealExo(btn) {\n const box = btn.nextElementSibling;\n box.classList.toggle('visible');\n btn.textContent = box.classList.contains('visible') ? '\ud83d\ude48 Masquer' : '\ud83d\udc40 Voir les r\u00e9ponses';\n }\n\n \/\/ CLAVIER\n let activeTextarea = null;\n function setActiveTA(ta) { activeTextarea = ta; }\n function insertChar(ch) {\n if (!activeTextarea) { const f = document.activeElement; if (f && f.tagName === 'TEXTAREA') activeTextarea = f; }\n if (!activeTextarea) return;\n const s = activeTextarea.selectionStart, e = activeTextarea.selectionEnd, v = activeTextarea.value;\n activeTextarea.value = v.slice(0, s) + ch + v.slice(e);\n activeTextarea.selectionStart = activeTextarea.selectionEnd = s + ch.length;\n activeTextarea.focus();\n updateWordCount(activeTextarea);\n }\n function updateWordCount(ta) {\n const c = document.getElementById(ta.dataset.counter);\n if (!c) return;\n const w = ta.value.trim() === '' ? 0 : ta.value.trim().split(\/\\s+\/).length;\n c.textContent = w + ' mot' + (w !== 1 ? 's' : '');\n }\n\n \/\/ VOCABULAIRE\n const vocabData = [\n { emoji: '\ud83c\udfe0', word: 'la maison', type: 'n.f.', ro: 'casa', example: 'J\\'habite dans une maison.' },\n { emoji: '\ud83c\udfe2', word: 'l\\'appartement', type: 'n.m.', ro: 'apartamentul', example: 'J\\'ai un appartement au centre-ville.' },\n { emoji: '\ud83d\udecb\ufe0f', word: 'le salon', type: 'n.m.', ro: 'sufrageria \/ livingul', example: 'Je regarde la t\u00e9l\u00e9 dans le salon.' },\n { emoji: '\ud83c\udf73', word: 'la cuisine', type: 'n.f.', ro: 'buc\u0103t\u0103ria', example: 'Je cuisine dans la cuisine.' },\n { emoji: '\ud83d\udecf\ufe0f', word: 'la chambre', type: 'n.f.', ro: 'dormitorul', example: 'Je dors dans ma chambre.' },\n { emoji: '\ud83d\udebf', word: 'la salle de bains', type: 'n.f.', ro: 'baia', example: 'Je prends une douche dans la salle de bains.' },\n { emoji: '\ud83d\udebd', word: 'les toilettes', type: 'n.f.pl.', ro: 'toaleta', example: 'Les toilettes sont \u00e0 droite.' },\n { emoji: '\ud83c\udf3f', word: 'le jardin', type: 'n.m.', ro: 'gr\u0103dina', example: 'Je lis dans le jardin.' },\n { emoji: '\ud83d\udecb\ufe0f', word: 'le canap\u00e9', type: 'n.m.', ro: 'canapea', example: 'Le canap\u00e9 est tr\u00e8s confortable.' },\n { emoji: '\ud83d\udecf\ufe0f', word: 'le lit', type: 'n.m.', ro: 'patul', example: 'J\\'ai un grand lit.' },\n { emoji: '\ud83e\ude91', word: 'la chaise', type: 'n.f.', ro: 'scaunul', example: 'Il y a quatre chaises autour de la table.' },\n { emoji: '\ud83e\ude9e', word: 'l\\'armoire', type: 'n.f.', ro: 'dulapul', example: 'Mes v\u00eatements sont dans l\\'armoire.' },\n { emoji: '\ud83d\udda5\ufe0f', word: 'le bureau', type: 'n.m.', ro: 'biroul', example: 'Je travaille \u00e0 mon bureau.' },\n { emoji: '\ud83d\udcfa', word: 'la t\u00e9l\u00e9vision', type: 'n.f.', ro: 'televizorul', example: 'Je regarde la t\u00e9l\u00e9vision le soir.' },\n { emoji: '\u2744\ufe0f', word: 'le r\u00e9frig\u00e9rateur', type: 'n.m.', ro: 'frigiderul', example: 'Le lait est dans le r\u00e9frig\u00e9rateur.' },\n { emoji: '\u2615', word: 'cuisiner', type: 'v.', ro: 'a g\u0103ti', example: 'J\\'aime cuisiner le week-end.' },\n { emoji: '\ud83d\udcda', word: 'lire', type: 'v.', ro: 'a citi', example: 'Je lis un livre avant de dormir.' },\n { emoji: '\ud83e\uddf9', word: 'faire le m\u00e9nage', type: 'expr.', ro: 'a face cur\u0103\u021benie', example: 'Je fais le m\u00e9nage le samedi.' },\n { emoji: '\ud83c\udfb5', word: '\u00e9couter de la musique', type: 'expr.', ro: 'a asculta muzic\u0103', example: 'J\\'\u00e9coute de la musique dans ma chambre.' },\n { emoji: '\ud83d\ude34', word: 'se reposer', type: 'v.', ro: 'a se odihni', example: 'Je me repose dans le salon le dimanche.' }\n ];\n\n const vocabGrid = document.getElementById('vocabGrid');\n vocabData.forEach((v, i) => {\n const item = document.createElement('div');\n item.className = 'vocab-item';\n item.innerHTML = `\n <div class=\"vocab-emoji\">${v.emoji}<\/div>\n <div class=\"vocab-content\">\n <div class=\"vocab-word\">\n ${v.word} <span class=\"vocab-type\">${v.type}<\/span>\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, '${v.word.replace(\/'\/g,\"\\\\'\")}. ${v.example.replace(\/'\/g,\"\\\\'\")}')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/div>\n <div class=\"vocab-ro\">\ud83c\uddf7\ud83c\uddf4 ${v.ro}<\/div>\n <div class=\"vocab-example\">\u2192 ${v.example}<\/div>\n <\/div>`;\n vocabGrid.appendChild(item);\n });\n\n \/\/ TRADUCTION\n const tradData = [\n { ro: 'Am un apartament mic, dar confortabil.', fr: 'J\\'ai un petit appartement, mais confortable.' },\n { ro: '\u00cen casa mea, exist\u0103 un salon, o buc\u0103t\u0103rie \u0219i dou\u0103 dormitoare.', fr: 'Dans ma maison, il y a un salon, une cuisine et deux chambres.' },\n { ro: 'Nu am gr\u0103din\u0103, dar am un balcon.', fr: 'Je n\\'ai pas de jardin, mais j\\'ai un balcon.' },\n { ro: 'Diminea\u021ba, m\u0103n\u00e2nc \u00een buc\u0103t\u0103rie.', fr: 'Le matin, je mange dans la cuisine.' },\n { ro: 'Seara, m\u0103 uit la televizor \u00een sufragerie.', fr: 'Le soir, je regarde la t\u00e9l\u00e9vision dans le salon.' },\n { ro: 'Camera mea preferat\u0103 este dormitorul.', fr: 'Ma pi\u00e8ce pr\u00e9f\u00e9r\u00e9e est la chambre.' },\n { ro: 'Ei au o cas\u0103 mare cu o gr\u0103din\u0103 frumoas\u0103.', fr: 'Ils ont une grande maison avec un beau jardin.' },\n { ro: '\u00cemi place s\u0103 g\u0103tesc \u00een weekend.', fr: 'J\\'aime cuisiner le week-end.' }\n ];\n\n const tradContainer = document.getElementById('tradItems');\n tradData.forEach((t, i) => {\n const div = document.createElement('div');\n div.className = 'trad-item';\n const taId = 'ta-' + i, cId = 'c-' + i;\n div.innerHTML = `\n <div class=\"trad-num\">Phrase ${i+1}<\/div>\n <div class=\"trad-ro\">${t.ro}<\/div>\n <textarea class=\"trad-textarea\" id=\"${taId}\" data-counter=\"${cId}\"\n placeholder=\"\u00c9cris ta traduction en fran\u00e7ais...\"\n onfocus=\"setActiveTA(this)\" oninput=\"updateWordCount(this)\"><\/textarea>\n <div class=\"word-count\" id=\"${cId}\">0 mot<\/div>\n <button class=\"reveal-btn\" onclick=\"revealTrad(this)\" style=\"margin-top:10px;\">\ud83d\udc40 Voir la r\u00e9ponse<\/button>\n <div class=\"answer-box\">\n <strong>\u2705 R\u00e9ponse :<\/strong> ${t.fr}\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, '${t.fr.replace(\/'\/g,\"\\\\'\")}')\" style=\"margin-left:8px;\"><span>\ud83d\udd0a<\/span><\/button>\n <\/div>`;\n tradContainer.appendChild(div);\n });\n\n function revealTrad(btn) {\n const box = btn.nextElementSibling;\n box.classList.toggle('visible');\n btn.textContent = box.classList.contains('visible') ? '\ud83d\ude48 Masquer' : '\ud83d\udc40 Voir la r\u00e9ponse';\n }\n\n \/\/ BILAN\n const bilanItems = [\n 'Je connais les pi\u00e8ces de la maison en fran\u00e7ais.',\n 'Je connais les meubles principaux (canap\u00e9, lit, armoire, bureau...).',\n 'Je peux d\u00e9crire les activit\u00e9s qu\\'on fait \u00e0 la maison.',\n 'Je sais conjuguer le verbe AVOIR au pr\u00e9sent.',\n 'Je sais utiliser les articles UN, UNE et DES correctement.',\n 'Je sais faire une phrase n\u00e9gative avec NE... PAS.',\n 'J\\'ai compris les deux textes et r\u00e9pondu aux questions Vrai\/Faux.',\n 'J\\'ai compl\u00e9t\u00e9 l\\'exercice sur AVOIR.',\n 'J\\'ai compl\u00e9t\u00e9 l\\'exercice sur les articles.',\n 'J\\'ai compl\u00e9t\u00e9 l\\'exercice sur la n\u00e9gation.',\n 'J\\'ai particip\u00e9 \u00e0 la conversation orale sur ma maison.',\n 'J\\'ai traduit les phrases fran\u00e7aises avec succ\u00e8s.'\n ];\n\n const bilanGrid = document.getElementById('bilanGrid');\n bilanItems.forEach(text => {\n const div = document.createElement('div');\n div.className = 'bilan-item';\n div.innerHTML = `<div class=\"bilan-check\"><\/div><div class=\"bilan-text\">${text}<\/div>`;\n div.onclick = function() {\n this.classList.toggle('checked');\n this.querySelector('.bilan-check').textContent = this.classList.contains('checked') ? '\u2713' : '';\n updateBilanScore();\n };\n bilanGrid.appendChild(div);\n });\n\n function updateBilanScore() {\n const checked = document.querySelectorAll('.bilan-item.checked').length;\n document.getElementById('bilanScore').textContent = checked + ' \/ ' + bilanItems.length;\n const txt = document.getElementById('bilanScoreText');\n if (checked === bilanItems.length) { txt.textContent = '\ud83c\udf89 F\u00e9licitations, le\u00e7on compl\u00e8te !'; }\n else if (checked >= bilanItems.length \/ 2) { txt.textContent = '\ud83d\udc4f Tr\u00e8s bien, continue !'; }\n else { txt.textContent = 'Coche les cases au fur et \u00e0 mesure !'; }\n }\n<\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Le\u00e7on A1-A2 \u2013 La maison & les activit\u00e9s Le\u00e7on 1 \u00b7 A1-A2 La maison & les activit\u00e9sdu quotidien \u23f1 2 heures \ud83d\udcda Niveau A1-A2 \ud83c\udfe0 […]<\/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-1688","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\/1688","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=1688"}],"version-history":[{"count":1,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1688\/revisions"}],"predecessor-version":[{"id":1689,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1688\/revisions\/1689"}],"wp:attachment":[{"href":"https:\/\/geoisteaching.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}