Le\u00e7on A2-B1 \u2013 La nourriture & les repas<\/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 --tomato: #C0392B;\n --tomato-light: #E74C3C;\n --tomato-pale: #FDECEA;\n --basil: #27AE60;\n --basil-pale: #E9F7EF;\n --mustard: #D4AC0D;\n --mustard-pale: #FEF9E7;\n --aubergine: #6C3483;\n --aubergine-pale: #F5EEF8;\n --cream: #FFFCF8;\n --dark: #2C1810;\n --mid: #5D4037;\n --muted: #9E8B7D;\n --sky: #1A78C2;\n --sky-pale: #EBF5FB;\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(--tomato) 0%, #922B21 100%);\n padding: 40px 60px;\n position: relative;\n overflow: hidden;\n }\n\n .lesson-header::before {\n content: '\ud83c\udf7d\ufe0f';\n position: absolute;\n right: 60px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 130px;\n opacity: 0.12;\n pointer-events: none;\n }\n\n .lesson-badge {\n background: var(--mustard);\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(--mustard);\n font-family: 'Playfair Display', serif;\n }\n\n .lesson-meta {\n display: flex;\n gap: 12px;\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(--tomato-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(--tomato); }\n .sec-btn.active { color: var(--tomato); border-bottom-color: var(--tomato); }\n\n \/* PROGRESS *\/\n .progress-bar {\n background: var(--tomato-pale);\n padding: 10px 60px;\n display: flex;\n align-items: center;\n gap: 16px;\n }\n .progress-label { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--tomato); white-space: nowrap; }\n .progress-track { flex: 1; height: 6px; background: rgba(192,57,43,0.15); border-radius: 3px; }\n .progress-fill { height: 100%; background: var(--tomato); border-radius: 3px; transition: width 0.4s ease; }\n .progress-pct { font-size: 13px; font-weight: 800; color: var(--tomato); 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(--tomato); 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(--tomato);\n color: var(--tomato);\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(--tomato); color: #fff; }\n\n \/* PLAN *\/\n .plan-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 14px;\n margin-bottom: 32px;\n }\n\n .plan-card {\n background: #fff;\n border: 2px solid var(--tomato-pale);\n border-radius: 12px;\n padding: 18px;\n text-align: center;\n transition: border-color 0.2s;\n }\n .plan-card:hover { border-color: var(--tomato-light); }\n .plan-emoji { font-size: 32px; margin-bottom: 8px; }\n .plan-time { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--tomato); margin-bottom: 4px; }\n .plan-title { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 4px; }\n .plan-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }\n\n .objectifs {\n background: var(--mustard-pale);\n border: 2px solid var(--mustard);\n border-radius: 12px;\n padding: 22px 26px;\n }\n .objectifs h3 { font-size: 16px; font-weight: 800; color: var(--dark); margin-bottom: 12px; }\n .obj-list { list-style: none; }\n .obj-list li { padding: 5px 0; color: var(--mid); font-size: 15px; display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }\n .obj-list li::before { content: '\u2705'; flex-shrink: 0; }\n\n \/* TEXTES *\/\n .text-card {\n background: #fff;\n border: 2px solid var(--tomato-pale);\n border-radius: 16px;\n border-top: 4px solid var(--tomato);\n padding: 30px 34px;\n margin-bottom: 26px;\n }\n .text-tag { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--tomato); margin-bottom: 8px; }\n .text-title { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 18px; }\n .text-body p { margin-bottom: 14px; line-height: 1.85; color: var(--mid); font-size: 16px; }\n .text-body p:last-child { margin-bottom: 0; }\n .mot-cle { color: var(--tomato); font-weight: 800; }\n .pc-verb { color: var(--basil); font-weight: 800; background: var(--basil-pale); padding: 1px 4px; border-radius: 4px; }\n\n .questions-box {\n background: var(--tomato-pale);\n border-radius: 10px;\n padding: 20px 24px;\n margin-top: 20px;\n border-left: 4px solid var(--tomato);\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: 15px; line-height: 1.6; font-weight: 600; }\n\n \/* VRAI\/FAUX *\/\n .vf-item {\n background: #fff;\n border: 2px solid var(--tomato-pale);\n border-radius: 10px;\n padding: 12px 16px;\n margin-bottom: 10px;\n }\n .vf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n .vf-q { font-size: 14px; color: var(--mid); font-weight: 600; }\n .vf-btns { display: flex; gap: 8px; flex-shrink: 0; }\n .vf-btn { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 16px; border: 2px solid; cursor: pointer; transition: all 0.2s; }\n .vf-btn.vrai { border-color: var(--basil); color: var(--basil); background: none; }\n .vf-btn.vrai:hover, .vf-btn.vrai.selected { background: var(--basil); color: #fff; }\n .vf-btn.faux { border-color: var(--tomato); color: var(--tomato); background: none; }\n .vf-btn.faux:hover, .vf-btn.faux.selected { background: var(--tomato); color: #fff; }\n .vf-feedback { display: none; font-size: 13px; font-weight: 700; margin-top: 6px; padding: 4px 10px; border-radius: 6px; }\n .vf-feedback.correct { display: block; background: var(--basil-pale); color: var(--basil); }\n .vf-feedback.incorrect { display: block; background: var(--tomato-pale); color: var(--tomato); }\n\n \/* VOCABULAIRE *\/\n .vocab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }\n .vocab-item {\n background: #fff;\n border: 2px solid var(--tomato-pale);\n border-radius: 12px;\n padding: 14px 16px;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n transition: border-color 0.2s, transform 0.2s;\n }\n .vocab-item:hover { border-color: var(--tomato-light); transform: translateY(-1px); }\n .vocab-emoji { font-size: 26px; flex-shrink: 0; }\n .vocab-content { flex: 1; }\n .vocab-word { font-size: 16px; 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: 13px; color: var(--tomato); font-weight: 700; }\n .vocab-example { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 2px; }\n\n \/* GRAMMAIRE *\/\n .gram-block { background: #fff; border: 2px solid var(--tomato-pale); border-radius: 16px; padding: 26px 30px; margin-bottom: 22px; }\n .gram-title { font-size: 19px; font-weight: 800; color: var(--dark); margin-bottom: 12px; }\n .gram-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }\n .gram-table th { background: var(--tomato); color: #fff; padding: 10px 14px; text-align: left; font-weight: 800; }\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: 9px 14px; border-bottom: 1px solid var(--tomato-pale); color: var(--mid); font-weight: 600; }\n .gram-table tr:last-child td { border-bottom: none; }\n .gram-table tr:nth-child(even) td { background: var(--tomato-pale); }\n .gram-note { background: var(--mustard-pale); border: 2px solid var(--mustard); border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--mid); margin-top: 14px; font-weight: 600; }\n .gram-example { background: var(--basil-pale); border-left: 4px solid var(--basil); border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 12px 0; font-size: 15px; color: var(--mid); font-weight: 600; }\n .gram-example em { color: var(--basil); font-weight: 800; font-style: normal; }\n\n \/* EXERCICES *\/\n .exo-block { background: #fff; border: 2px solid var(--tomato-pale); border-radius: 16px; padding: 26px 30px; margin-bottom: 22px; }\n .exo-title { font-size: 18px; font-weight: 800; color: var(--dark); margin-bottom: 14px; }\n .exo-item { margin-bottom: 14px; color: var(--mid); font-size: 15px; line-height: 1.8; font-weight: 600; }\n\n .exo-blank {\n display: inline-block;\n border: none;\n border-bottom: 2px solid var(--tomato);\n min-width: 110px;\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(--basil);\n background: transparent;\n outline: none;\n vertical-align: baseline;\n }\n .exo-blank:focus { border-bottom-color: var(--basil); background: var(--basil-pale); border-radius: 4px 4px 0 0; }\n .exo-blank::placeholder { color: rgba(192,57,43,0.3); font-style: italic; font-weight: 400; }\n\n .reveal-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n margin-top: 14px;\n background: none;\n border: 2px solid var(--tomato);\n color: var(--tomato);\n font-size: 13px;\n font-weight: 800;\n padding: 6px 16px;\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(--tomato); color: #fff; }\n\n .answer-box { display: none; background: var(--basil-pale); border-left: 4px solid var(--basil); border-radius: 0 8px 8px 0; padding: 12px 16px; margin-top: 10px; font-size: 15px; color: var(--mid); font-weight: 600; }\n .answer-box.visible { display: block; }\n .answer-box strong { color: var(--basil); }\n\n \/* CHOIX MULTIPLE *\/\n .choice-item { margin-bottom: 18px; }\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(--tomato-pale);\n background: #fff;\n color: var(--mid);\n cursor: pointer;\n transition: all 0.2s;\n }\n .choice-btn:hover { border-color: var(--tomato-light); color: var(--tomato); }\n .choice-btn.correct { background: var(--basil); border-color: var(--basil); color: #fff; }\n .choice-btn.incorrect { background: var(--tomato); border-color: var(--tomato); 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(--tomato-pale); border-radius: 12px; padding: 20px; transition: border-color 0.2s; }\n .oral-card:hover { border-color: var(--tomato-light); }\n .oral-emoji { font-size: 28px; margin-bottom: 8px; }\n .oral-num { font-size: 28px; font-weight: 800; color: var(--tomato-pale); line-height: 1; 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; font-weight: 600; }\n\n .role-play { background: var(--aubergine); border-radius: 16px; padding: 28px 32px; color: #fff; }\n .role-play h3 { font-size: 20px; font-weight: 800; color: var(--mustard); margin-bottom: 12px; }\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(--mustard); padding: 18px; }\n .role-card h4 { color: var(--mustard); font-size: 14px; font-weight: 800; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }\n .role-card p { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; font-weight: 600; }\n\n \/* TRADUCTION *\/\n .trad-item { background: #fff; border: 2px solid var(--tomato-pale); border-radius: 12px; padding: 20px 24px; margin-bottom: 14px; }\n .trad-num { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--tomato); margin-bottom: 6px; text-transform: uppercase; }\n .trad-ro { font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 12px; }\n .trad-textarea { width: 100%; border: 2px solid var(--tomato-pale); border-radius: 8px; padding: 10px 14px; font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 600; color: var(--dark); background: var(--cream); resize: vertical; min-height: 60px; outline: none; transition: border-color 0.2s; }\n .trad-textarea:focus { border-color: var(--tomato); }\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; 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(--tomato); border-color: var(--tomato); }\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(--tomato-pale); border-radius: 10px; cursor: pointer; transition: all 0.2s; user-select: none; }\n .bilan-item.checked { border-color: var(--basil); background: var(--basil-pale); }\n .bilan-check { width: 24px; height: 24px; border: 2px solid var(--tomato-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(--basil); border-color: var(--basil); 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(--basil); text-decoration: line-through; }\n .bilan-score { background: linear-gradient(135deg, var(--tomato) 0%, #922B21 100%); color: #fff; padding: 22px 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(--mustard); }\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 A2-B1<\/div>\n <h1 class=\"lesson-title\">La nourriture &<br><em>les repas<\/em><\/h1>\n <div class=\"lesson-meta\">\n <span class=\"meta-item\">\u23f1 2 heures<\/span>\n <span class=\"meta-item\">\ud83d\udcda Niveau A2-B1<\/span>\n <span class=\"meta-item\">\ud83c\udf7d\ufe0f Alimentation \u00b7 Restaurant \u00b7 Pass\u00e9 compos\u00e9<\/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\">Qu’avez-vous mang\u00e9 hier ? Quel est votre plat fran\u00e7ais pr\u00e9f\u00e9r\u00e9 ?<\/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 : un dialogue au restaurant et un article sur les repas fran\u00e7ais.<\/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 : aliments, repas, restaurant, go\u00fbts.<\/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 pass\u00e9 compos\u00e9 \u00b7 Les articles partitifs (du, de la, de l’) \u00b7 Les expressions de quantit\u00e9.<\/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 sur la nourriture.<\/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\">Commander au restaurant, raconter un repas, donner son avis sur la cuisine.<\/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 aliments et les repas de la journ\u00e9e en fran\u00e7ais<\/li>\n <li>Commander au restaurant avec politesse<\/li>\n <li>Utiliser le pass\u00e9 compos\u00e9 pour raconter un repas<\/li>\n <li>Employer les articles partitifs (du, de la, de l’, des) correctement<\/li>\n <li>Exprimer ses go\u00fbts et pr\u00e9f\u00e9rences alimentaires<\/li>\n <li>Comprendre et utiliser des expressions de quantit\u00e9<\/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 et \u00e9coutons ! \ud83d\udcd6<\/h2>\n\n \n <div class=\"text-card\">\n <div class=\"text-tag\">Texte 1 \u00b7 Dialogue au restaurant<\/div>\n <h3 class=\"text-title\">Au restaurant \u00ab Le Petit Bistrot \u00bb\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><strong>Serveur :<\/strong> Bonsoir ! Vous avez r\u00e9serv\u00e9 ?<\/p>\n <p><strong>Cliente :<\/strong> Oui, j’<span class=\"pc-verb\">ai r\u00e9serv\u00e9<\/span> une table pour deux personnes. Au nom de Dupont.<\/p>\n <p><strong>Serveur :<\/strong> Tr\u00e8s bien, madame. Voici vos menus. Vous \u00eates pr\u00eats \u00e0 commander ?<\/p>\n <p><strong>Cliente :<\/strong> Oui. Comme entr\u00e9e, je vais prendre <span class=\"mot-cle\">la soupe \u00e0 l’oignon<\/span>, s’il vous pla\u00eet.<\/p>\n <p><strong>Client :<\/strong> Et moi, je prends <span class=\"mot-cle\">les escargots<\/span>. C’est ma premi\u00e8re fois !<\/p>\n <p><strong>Serveur :<\/strong> Excellent choix ! Et comme plat principal ?<\/p>\n <p><strong>Cliente :<\/strong> Je voudrais <span class=\"mot-cle\">le steak frites<\/span>, saignant, s’il vous pla\u00eet.<\/p>\n <p><strong>Client :<\/strong> Pour moi, <span class=\"mot-cle\">le saumon grill\u00e9<\/span> avec des l\u00e9gumes.<\/p>\n <p><strong>Serveur :<\/strong> Et comme boisson ?<\/p>\n <p><strong>Cliente :<\/strong> Une carafe d’eau et une bouteille de vin rouge, s’il vous pla\u00eet.<\/p>\n <p><strong>Serveur :<\/strong> Parfait ! Et vous avez <span class=\"pc-verb\">choisi<\/span> quelque chose comme dessert ?<\/p>\n <p><strong>Client :<\/strong> Pas encore. On regarde la carte d’abord !<\/p>\n <p>\u2014 <em>Plus tard…<\/em> \u2014<\/p>\n <p><strong>Cliente :<\/strong> Excusez-moi, l’addition, s’il vous pla\u00eet.<\/p>\n <p><strong>Serveur :<\/strong> Bien s\u00fbr. Vous avez <span class=\"pc-verb\">pass\u00e9<\/span> une bonne soir\u00e9e ?<\/p>\n <p><strong>Client :<\/strong> Excellente ! Les escargots, c’\u00e9tait d\u00e9licieux ! J’<span class=\"pc-verb\">ai ador\u00e9<\/span> !<\/p>\n <\/div>\n <div class=\"questions-box\">\n <h4>\u2705 Vrai ou Faux ?<\/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 Article culturel<\/div>\n <h3 class=\"text-title\">Les repas en France : une tradition sacr\u00e9e\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>En France, <span class=\"mot-cle\">les repas<\/span> sont beaucoup plus qu’une n\u00e9cessit\u00e9 biologique. Ce sont des moments de partage, de plaisir et de culture. En 2010, l’UNESCO a inscrit \u00ab le repas gastronomique des Fran\u00e7ais \u00bb au patrimoine culturel immat\u00e9riel de l’humanit\u00e9. Une reconnaissance unique au monde !<\/p>\n <p>La journ\u00e9e alimentaire fran\u00e7aise est organis\u00e9e autour de trois repas principaux. <span class=\"mot-cle\">Le petit-d\u00e9jeuner<\/span> est g\u00e9n\u00e9ralement l\u00e9ger : du caf\u00e9 ou du th\u00e9, des tartines avec du beurre et de la confiture, parfois des c\u00e9r\u00e9ales. Il se prend t\u00f4t, entre 7 et 9 heures.<\/p>\n <p><span class=\"mot-cle\">Le d\u00e9jeuner<\/span> est traditionnellement le repas principal. Les Fran\u00e7ais prennent souvent une heure \u2014 parfois deux ! \u2014 pour manger. Une entr\u00e9e, un plat, un dessert. Beaucoup de restaurants proposent un <em>menu du jour<\/em> \u00e0 prix fixe, tr\u00e8s populaire.<\/p>\n <p>Le soir, <span class=\"mot-cle\">le d\u00eener<\/span> r\u00e9unit la famille. On discute, on raconte sa journ\u00e9e. Le repas du soir est plus calme, souvent plus l\u00e9ger que le d\u00e9jeuner.<\/p>\n <p>Et entre les repas ? Pas grand-chose ! Le grignotage n’est pas dans la culture fran\u00e7aise. On mange \u00e0 table, assis, avec du temps. C’est \u00e7a, la gastronomie \u00e0 la fran\u00e7aise.<\/p>\n <\/div>\n <div class=\"questions-box\">\n <h4>Questions de compr\u00e9hension<\/h4>\n <ol>\n <li>Pourquoi les repas fran\u00e7ais ont-ils \u00e9t\u00e9 reconnus par l’UNESCO ?<\/li>\n <li>Qu’est-ce que les Fran\u00e7ais mangent typiquement au petit-d\u00e9jeuner ?<\/li>\n <li>Qu’est-ce qu’un \u00ab menu du jour \u00bb ? Pourquoi est-il populaire ?<\/li>\n <li>Qu’est-ce qui est <em>contraire<\/em> \u00e0 la culture alimentaire fran\u00e7aise ?<\/li>\n <\/ol>\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 pour manger en fran\u00e7ais \ud83c\udf74<\/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 pass\u00e9 compos\u00e9 \u2014 raconter un repas pass\u00e9\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, 'J\\'ai mang\u00e9 une pizza hier soir. Nous avons d\u00een\u00e9 au restaurant. Elle a command\u00e9 le steak frites. Il a ador\u00e9 les escargots. J\\'ai bu du vin rouge.')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/h3>\n <p style=\"color:var(--muted); margin-bottom:14px; font-weight:600;\">Le pass\u00e9 compos\u00e9 = <strong>avoir\/\u00eatre<\/strong> au pr\u00e9sent + <strong>participe pass\u00e9<\/strong>. On l’utilise pour raconter ce qu’on a fait ou mang\u00e9.<\/p>\n <table class=\"gram-table\">\n <tr><th>Infinitif<\/th><th>Participe pass\u00e9<\/th><th>Exemple<\/th><\/tr>\n <tr><td>manger<\/td><td><strong>mang\u00e9<\/strong><\/td><td><em>J’ai mang\u00e9 une quiche ce midi.<\/em><\/td><\/tr>\n <tr><td>boire<\/td><td><strong>bu<\/strong><\/td><td><em>Elle a bu du caf\u00e9 ce matin.<\/em><\/td><\/tr>\n <tr><td>commander<\/td><td><strong>command\u00e9<\/strong><\/td><td><em>Nous avons command\u00e9 le menu du jour.<\/em><\/td><\/tr>\n <tr><td>choisir<\/td><td><strong>choisi<\/strong><\/td><td><em>Il a choisi le saumon grill\u00e9.<\/em><\/td><\/tr>\n <tr><td>prendre<\/td><td><strong>pris<\/strong><\/td><td><em>Vous avez pris le dessert ?<\/em><\/td><\/tr>\n <tr><td>faire<\/td><td><strong>fait<\/strong><\/td><td><em>J’ai fait une tarte aux pommes.<\/em><\/td><\/tr>\n <\/table>\n <div class=\"gram-note\">\u26a0\ufe0f Participes irr\u00e9guliers \u00e0 retenir : boire \u2192 <strong>bu<\/strong> \u00b7 prendre \u2192 <strong>pris<\/strong> \u00b7 faire \u2192 <strong>fait<\/strong> \u00b7 mettre \u2192 <strong>mis<\/strong> \u00b7 vouloir \u2192 <strong>voulu<\/strong><\/div>\n <\/div>\n\n \n <div class=\"gram-block\">\n <h3 class=\"gram-title\">2. Les articles partitifs : DU \u00b7 DE LA \u00b7 DE L’ \u00b7 DES\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, 'Je mange du pain. Je bois de la limonade. Je prends de l\\'eau. Je mange des p\u00e2tes. Je ne mange pas de viande.')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/h3>\n <p style=\"color:var(--muted); margin-bottom:14px; font-weight:600;\">Les articles partitifs expriment une quantit\u00e9 ind\u00e9finie \u2014 une partie d’un tout. Tr\u00e8s utilis\u00e9s pour parler de nourriture !<\/p>\n <table class=\"gram-table\">\n <tr><th>Article<\/th><th>Usage<\/th><th>Exemples<\/th><\/tr>\n <tr><td><strong>DU<\/strong><\/td><td>Masculin singulier<\/td><td><em>du pain, du fromage, du vin, du caf\u00e9<\/em><\/td><\/tr>\n <tr><td><strong>DE LA<\/strong><\/td><td>F\u00e9minin singulier<\/td><td><em>de la viande, de la salade, de la cr\u00e8me<\/em><\/td><\/tr>\n <tr><td><strong>DE L’<\/strong><\/td><td>Devant voyelle<\/td><td><em>de l’eau, de l’huile, de l’ail<\/em><\/td><\/tr>\n <tr><td><strong>DES<\/strong><\/td><td>Pluriel<\/td><td><em>des l\u00e9gumes, des p\u00e2tes, des fruits<\/em><\/td><\/tr>\n <\/table>\n <div class=\"gram-example\">\n \u274c N\u00e9gation : <em>Je ne mange pas <strong>de<\/strong> viande. \u00b7 Il n’y a plus <strong>d’<\/strong>eau.<\/em> \u2192 apr\u00e8s la n\u00e9gation, toujours <strong>de \/ d’<\/strong> !\n <\/div>\n <div class=\"gram-note\">\ud83d\udca1 Astuce : du \/ de la \/ de l’ = \u00ab un peu de… \u00bb. <em>Je mange du pain<\/em> = je mange une partie du pain (pas tout le pain !)<\/div>\n <\/div>\n\n \n <div class=\"gram-block\">\n <h3 class=\"gram-title\">3. Les expressions de quantit\u00e9\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, 'Un verre de vin. Une tasse de caf\u00e9. Une tranche de jambon. Beaucoup de l\u00e9gumes. Un peu de sel. Assez de fromage. Trop de sucre.')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/h3>\n <p style=\"color:var(--muted); margin-bottom:14px; font-weight:600;\">Pour exprimer une quantit\u00e9 pr\u00e9cise ou approximative, on utilise des expressions suivies de <strong>de<\/strong>.<\/p>\n <table class=\"gram-table\">\n <tr><th>Expression<\/th><th>Exemple<\/th><\/tr>\n <tr><td>un verre de<\/td><td><em>un verre de vin rouge<\/em><\/td><\/tr>\n <tr><td>une tasse de<\/td><td><em>une tasse de caf\u00e9, s’il vous pla\u00eet<\/em><\/td><\/tr>\n <tr><td>une tranche de<\/td><td><em>une tranche de jambon<\/em><\/td><\/tr>\n <tr><td>un kilo de<\/td><td><em>un kilo de tomates<\/em><\/td><\/tr>\n <tr><td>beaucoup de<\/td><td><em>J’aime beaucoup de fromage.<\/em><\/td><\/tr>\n <tr><td>un peu de<\/td><td><em>Ajoutez un peu de sel.<\/em><\/td><\/tr>\n <tr><td>trop de<\/td><td><em>C’est trop de sucre !<\/em><\/td><\/tr>\n <tr><td>assez de<\/td><td><em>J’ai assez mang\u00e9, merci.<\/em><\/td><\/tr>\n <\/table>\n <div class=\"gram-note\">\u26a0\ufe0f Apr\u00e8s les expressions de quantit\u00e9, jamais d’article ! \u2192 <em>beaucoup <strong>de<\/strong> l\u00e9gumes<\/em> (pas ~~de des l\u00e9gumes~~)<\/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 <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 1 \u2013 Pass\u00e9 compos\u00e9 : qu’est-ce qu’ils ont mang\u00e9 ?<\/h3>\n <p style=\"color:var(--muted); font-size:14px; font-weight:700; margin-bottom:14px;\">Conjugue les verbes au pass\u00e9 compos\u00e9.<\/p>\n <div class=\"exo-item\">1. Hier soir, je (manger) <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\"> une bonne soupe.<\/div>\n <div class=\"exo-item\">2. Elle (commander) <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\"> le steak frites au restaurant.<\/div>\n <div class=\"exo-item\">3. Nous (boire) <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\"> du vin rouge avec le fromage.<\/div>\n <div class=\"exo-item\">4. Vous (prendre) <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\"> le menu du jour ?<\/div>\n <div class=\"exo-item\">5. Ils (faire) <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\"> une tarte aux fraises pour le dessert.<\/div>\n <div class=\"exo-item\">6. Tu (choisir) <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\"> quel dessert ?<\/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 mang\u00e9<\/em> \u00b7 2. <em>a command\u00e9<\/em> \u00b7 3. <em>avons bu<\/em> \u00b7 4. <em>avez pris<\/em> \u00b7 5. <em>ont fait<\/em> \u00b7 6. <em>as choisi<\/em>\n <\/div>\n <\/div>\n\n <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 2 \u2013 Articles partitifs : DU, DE LA, DE L’ ou DES ?<\/h3>\n <div class=\"exo-item\">1. Le matin, je mange <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> pain et je bois <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> caf\u00e9.<\/div>\n <div class=\"exo-item\">2. Elle ne mange jamais <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> viande. Elle est v\u00e9g\u00e9tarienne.<\/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;\"> l\u00e9gumes frais dans cette recette.<\/div>\n <div class=\"exo-item\">4. Vous voulez <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> eau min\u00e9rale ou <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> vin ?<\/div>\n <div class=\"exo-item\">5. J’ai mis <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> beurre et <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> sel dans la sauce.<\/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>du<\/em> \/ <em>du<\/em> \u00b7 2. <em>de<\/em> (n\u00e9gation) \u00b7 3. <em>des<\/em> \u00b7 4. <em>de l’<\/em> \/ <em>du<\/em> \u00b7 5. <em>du<\/em> \/ <em>du<\/em>\n <\/div>\n <\/div>\n\n <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 3 \u2013 Choix multiple : au restaurant \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\udf73<\/div>\n <div class=\"oral-num\">01<\/div>\n <div class=\"oral-q\">Qu’avez-vous mang\u00e9 hier ? D\u00e9crivez votre repas pr\u00e9f\u00e9r\u00e9 de la semaine pass\u00e9e.<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Hier, j’ai mang\u00e9… \u00b7 J’ai bu… \u00b7 C’\u00e9tait d\u00e9licieux \/ bon \/ pas terrible…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83c\uddeb\ud83c\uddf7<\/div>\n <div class=\"oral-num\">02<\/div>\n <div class=\"oral-q\">Connaissez-vous des plats fran\u00e7ais ? Avez-vous d\u00e9j\u00e0 mang\u00e9 de la cuisine fran\u00e7aise ? Qu’est-ce que vous avez aim\u00e9 ou pas aim\u00e9 ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 J’ai d\u00e9j\u00e0 mang\u00e9… \u00b7 Je n’ai jamais essay\u00e9… \u00b7 J’aimerais go\u00fbter…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83d\uded2<\/div>\n <div class=\"oral-num\">03<\/div>\n <div class=\"oral-q\">Qu’est-ce qu’il y a dans votre r\u00e9frig\u00e9rateur en ce moment ? D\u00e9crivez avec les articles partitifs.<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Dans mon r\u00e9frig\u00e9rateur, il y a du… \u00b7 de la… \u00b7 Je n’ai pas de…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83d\ude0b<\/div>\n <div class=\"oral-num\">04<\/div>\n <div class=\"oral-q\">Quel est votre plat national roumain pr\u00e9f\u00e9r\u00e9 ? Expliquez comment on le pr\u00e9pare (ingr\u00e9dients, \u00e9tapes).<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Pour pr\u00e9parer…, il faut du\/de la… \u00b7 D’abord… \u00b7 Ensuite… \u00b7 Enfin…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83c\udfea<\/div>\n <div class=\"oral-num\">05<\/div>\n <div class=\"oral-q\">Comparez les habitudes alimentaires roumaines et fran\u00e7aises. Quelles sont les diff\u00e9rences ? Les points communs ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 En Roumanie, on mange… \u00b7 En France, ils mangent… \u00b7 Les deux pays…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83c\udf31<\/div>\n <div class=\"oral-num\">06<\/div>\n <div class=\"oral-q\">\u00cates-vous v\u00e9g\u00e9tarien(ne) ? Pensez-vous que c’est important de manger moins de viande ? Pourquoi ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Je pense que… \u00b7 C’est important parce que… \u00b7 Je mange beaucoup de \/ peu de…<\/div>\n <\/div>\n <\/div>\n\n <div class=\"role-play\">\n <h3>\ud83c\udfad Jeu de r\u00f4le : Au restaurant !<\/h3>\n <p style=\"color:rgba(255,255,255,0.8); font-size:15px; line-height:1.7; font-weight:600;\">Vous \u00eates dans un restaurant fran\u00e7ais. Un client commande son repas, l’autre joue le serveur. Utilisez le pass\u00e9 compos\u00e9, les articles partitifs et les expressions de politesse !<\/p>\n <div class=\"role-cards\">\n <div class=\"role-card\">\n <h4>\ud83c\udf7d\ufe0f R\u00f4le A \u2013 Le client \/ la cliente<\/h4>\n <p>Commandez votre repas (entr\u00e9e, plat, dessert, boisson), posez des questions sur le menu, exprimez vos pr\u00e9f\u00e9rences : <em>\u00ab Je voudrais… \u00bb, \u00ab Qu’est-ce que vous recommandez ? \u00bb, \u00ab Je n’aime pas… \u00bb, \u00ab C’est avec du\/de la… ? \u00bb<\/em><\/p>\n <\/div>\n <div class=\"role-card\">\n <h4>\ud83d\udc68\u200d\ud83c\udf73 R\u00f4le B \u2013 Le serveur \/ la serveuse<\/h4>\n <p>Accueillez le client, prenez sa commande, recommandez des plats, r\u00e9pondez aux questions : <em>\u00ab Je vous recommande… \u00bb, \u00ab Le plat du jour, c’est… \u00bb, \u00ab C’est pr\u00e9par\u00e9 avec du… \u00bb, \u00ab Vous avez bien mang\u00e9 ? \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 function ttsStop() {\n if (window.speechSynthesis) window.speechSynthesis.cancel();\n if (currentBtn) { currentBtn.classList.remove('playing'); currentBtn.innerHTML = '<span>\ud83d\udd0a<\/span> \u00c9couter'; currentBtn = null; }\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'; utter.rate = 0.85; 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 function ttsRead(btn, id) {\n const el = document.getElementById(id);\n if (el) ttsReadText(btn, el.innerText || el.textContent);\n }\n if (window.speechSynthesis) window.speechSynthesis.onvoiceschanged = () => window.speechSynthesis.getVoices();\n\n \/\/ VRAI\/FAUX\n const vfData1 = [\n { q: \"La cliente a r\u00e9serv\u00e9 une table pour trois personnes.\", answer: false, correction: \"Non, elle a r\u00e9serv\u00e9 pour deux personnes.\" },\n { q: \"Comme entr\u00e9e, le client a pris les escargots.\", answer: true },\n { q: \"La cliente a command\u00e9 un steak bien cuit.\", answer: false, correction: \"Non, elle a command\u00e9 un steak saignant.\" },\n { q: \"Ils ont command\u00e9 du vin blanc.\", answer: false, correction: \"Non, ils ont command\u00e9 du vin rouge.\" },\n { q: \"Le client a aim\u00e9 les escargots.\", answer: true }\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.innerHTML = `\n <div class=\"vf-row\">\n <span class=\"vf-q\">${i+1}. ${item.q}<\/span>\n <div class=\"vf-btns\">\n <button class=\"vf-btn vrai\" onclick=\"checkVF(this, ${item.answer}, true, '${(item.correction||'').replace(\/'\/g,\"\\\\'\")}')\">\u2705 Vrai<\/button>\n <button class=\"vf-btn faux\" onclick=\"checkVF(this, ${item.answer}, false, '${(item.correction||'').replace(\/'\/g,\"\\\\'\")}')\">\u274c Faux<\/button>\n <\/div>\n <\/div>\n <div class=\"vf-feedback\"><\/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.style.pointerEvents = 'none'; });\n btn.classList.add('selected');\n const fb = btn.closest('.vf-item').querySelector('.vf-feedback');\n if (chosen === correct) { fb.textContent = '\ud83c\udf89 Bravo ! C\\'est correct !'; fb.className = 'vf-feedback correct'; }\n else { fb.textContent = correction ? '\ud83d\udca1 ' + correction : '\u274c Ce n\\'est pas correct.'; fb.className = 'vf-feedback incorrect'; }\n }\n\n buildVF(vfData1, 'vfContainer1');\n\n \/\/ CHOIX MULTIPLE\n const choiceData = [\n { q: \"Pour commander poliment, on dit :\", opts: [\"Je veux le steak.\", \"Je voudrais le steak, s'il vous pla\u00eet.\", \"Donne-moi le steak.\"], correct: 1 },\n { q: \"Apr\u00e8s la n\u00e9gation, on utilise :\", opts: [\"du \/ de la \/ des\", \"de \/ d'\", \"un \/ une\"], correct: 1 },\n { q: \"Le pass\u00e9 compos\u00e9 de \u00ab boire \u00bb est :\", opts: [\"j'ai buv\u00e9\", \"j'ai bu\", \"j'ai boir\u00e9\"], correct: 1 },\n { q: \"\u00ab Une tranche ___ jambon \u00bb \u2014 quel article ?\", opts: [\"du\", \"de\", \"des\"], correct: 1 },\n { q: \"Pour demander l'addition au restaurant :\", opts: [\"L'addition !\", \"Excusez-moi, l'addition, s'il vous pla\u00eet.\", \"Payez maintenant.\"], correct: 1 }\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 btn.parentElement.querySelectorAll('.choice-btn').forEach(b => b.style.pointerEvents = 'none');\n btn.classList.add(isCorrect ? 'correct' : 'incorrect');\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\udf73', word: 'le petit-d\u00e9jeuner', type: 'n.m.', ro: 'micul dejun', example: 'Je prends mon petit-d\u00e9jeuner \u00e0 7h30.' },\n { emoji: '\ud83e\udd57', word: 'le d\u00e9jeuner', type: 'n.m.', ro: 'pr\u00e2nzul', example: 'On d\u00e9jeune ensemble \u00e0 midi ?' },\n { emoji: '\ud83c\udf7d\ufe0f', word: 'le d\u00eener', type: 'n.m.', ro: 'cina', example: 'Le d\u00eener est servi \u00e0 19 heures.' },\n { emoji: '\ud83e\udd56', word: 'le pain', type: 'n.m.', ro: 'p\u00e2inea', example: 'Les Fran\u00e7ais mangent du pain \u00e0 chaque repas.' },\n { emoji: '\ud83e\uddc0', word: 'le fromage', type: 'n.m.', ro: 'br\u00e2nza', example: 'La France a plus de 1000 vari\u00e9t\u00e9s de fromage !' },\n { emoji: '\ud83e\udd69', word: 'la viande', type: 'n.f.', ro: 'carnea', example: 'Je ne mange pas beaucoup de viande.' },\n { emoji: '\ud83d\udc1f', word: 'le poisson', type: 'n.m.', ro: 'pe\u0219tele', example: 'J\\'ai mang\u00e9 du poisson grill\u00e9 hier.' },\n { emoji: '\ud83e\udd66', word: 'les l\u00e9gumes', type: 'n.m.pl.', ro: 'legumele', example: 'Mange des l\u00e9gumes, c\\'est bon pour la sant\u00e9 !' },\n { emoji: '\ud83c\udf4e', word: 'les fruits', type: 'n.m.pl.', ro: 'fructele', example: 'Je mange des fruits au petit-d\u00e9jeuner.' },\n { emoji: '\ud83c\udf70', word: 'le dessert', type: 'n.m.', ro: 'desertul', example: 'Comme dessert, j\\'ai pris une tarte aux pommes.' },\n { emoji: '\ud83e\udd64', word: 'la boisson', type: 'n.f.', ro: 'b\u0103utura', example: 'Quelle boisson voulez-vous ?' },\n { emoji: '\ud83c\udf77', word: 'le vin', type: 'n.m.', ro: 'vinul', example: 'Un verre de vin rouge, s\\'il vous pla\u00eet.' },\n { emoji: '\ud83d\udccb', word: 'le menu', type: 'n.m.', ro: 'meniul', example: 'Je vais prendre le menu du jour.' },\n { emoji: '\ud83d\udcb0', word: 'l\\'addition', type: 'n.f.', ro: 'nota de plat\u0103', example: 'L\\'addition, s\\'il vous pla\u00eet !' },\n { emoji: '\ud83d\udc68\u200d\ud83c\udf73', word: 'le serveur', type: 'n.m.', ro: 'chelnerul', example: 'Le serveur est tr\u00e8s sympathique.' },\n { emoji: '\ud83d\ude0b', word: 'd\u00e9licieux\/d\u00e9licieuse', type: 'adj.', ro: 'delicios\/delicioas\u0103', example: 'Ce g\u00e2teau est absolument d\u00e9licieux !' },\n { emoji: '\ud83e\udd22', word: 'avoir faim', type: 'expr.', ro: 'a-\u021bi fi foame', example: 'J\\'ai tr\u00e8s faim, j\\'ai saut\u00e9 le d\u00e9jeuner.' },\n { emoji: '\ud83d\ude0a', word: 'avoir soif', type: 'expr.', ro: 'a-\u021bi fi sete', example: 'Tu as soif ? Je vais chercher de l\\'eau.' },\n { emoji: '\ud83c\udf36\ufe0f', word: '\u00e9pic\u00e9(e)', type: 'adj.', ro: 'picant\/picant\u0103', example: 'Ce plat est trop \u00e9pic\u00e9 pour moi !' },\n { emoji: '\ud83e\uddd1\u200d\ud83c\udf73', word: 'cuisiner', type: 'v.', ro: 'a g\u0103ti', example: 'J\\'ai cuisin\u00e9 un poulet r\u00f4ti ce 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: 'Ieri sear\u0103, am m\u00e2ncat la un restaurant francez cu prietenii mei.', fr: 'Hier soir, j\\'ai mang\u00e9 dans un restaurant fran\u00e7ais avec mes amis.' },\n { ro: 'Ea a comandat un steak cu cartofi pr\u0103ji\u021bi \u0219i a b\u0103ut un pahar de vin ro\u0219u.', fr: 'Elle a command\u00e9 un steak frites et a bu un verre de vin rouge.' },\n { ro: 'Nu m\u0103n\u00e2nc carne. Sunt vegetarian.', fr: 'Je ne mange pas de viande. Je suis v\u00e9g\u00e9tarien.' },\n { ro: 'Diminea\u021ba, beau cafea cu lapte \u0219i m\u0103n\u00e2nc p\u00e2ine cu unt.', fr: 'Le matin, je bois du caf\u00e9 au lait et je mange du pain avec du beurre.' },\n { ro: 'V\u0103 rog, nota de plat\u0103!', fr: 'L\\'addition, s\\'il vous pla\u00eet !' },\n { ro: 'Ce dori\u021bi ca desert? Am o tart\u0103 cu mere sau o mousse de ciocolat\u0103.', fr: 'Qu\\'est-ce que vous voulez comme dessert ? Nous avons une tarte aux pommes ou une mousse au chocolat.' },\n { ro: 'Am g\u0103tit o sup\u0103 delicioas\u0103 cu legume proaspete.', fr: 'J\\'ai cuisin\u00e9 une d\u00e9licieuse soupe avec des l\u00e9gumes frais.' },\n { ro: 'Mi-e foame! Nu am m\u00e2ncat nimic de la pr\u00e2nz.', fr: 'J\\'ai faim ! Je n\\'ai rien mang\u00e9 depuis le d\u00e9jeuner.' }\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 mots pour les repas de la journ\u00e9e (petit-d\u00e9jeuner, d\u00e9jeuner, d\u00eener).',\n 'Je peux nommer des aliments courants en fran\u00e7ais.',\n 'Je sais commander au restaurant avec politesse.',\n 'Je sais conjuguer les verbes au pass\u00e9 compos\u00e9.',\n 'Je connais les participes pass\u00e9s irr\u00e9guliers : bu, pris, fait, choisi.',\n 'Je sais utiliser les articles partitifs : du, de la, de l\\', des.',\n 'Je sais faire la n\u00e9gation avec pas de \/ pas d\\'.',\n 'Je peux utiliser les expressions de quantit\u00e9 (un verre de, beaucoup de...).',\n 'J\\'ai compris le dialogue au restaurant et r\u00e9pondu aux questions V\/F.',\n 'J\\'ai compl\u00e9t\u00e9 les exercices de grammaire.',\n 'J\\'ai particip\u00e9 au jeu de r\u00f4le au restaurant.',\n 'J\\'ai traduit les phrases 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 A2-B1 \u2013 La nourriture & les repas Le\u00e7on 1 \u00b7 A2-B1 La nourriture &les repas \u23f1 2 heures \ud83d\udcda Niveau A2-B1 \ud83c\udf7d\ufe0f Alimentation \u00b7 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"pmpro_default_level":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-1692","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\/1692","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=1692"}],"version-history":[{"count":1,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1692\/revisions"}],"predecessor-version":[{"id":1693,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1692\/revisions\/1693"}],"wp:attachment":[{"href":"https:\/\/geoisteaching.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1692,"date":"2026-05-10T06:59:46","date_gmt":"2026-05-10T06:59:46","guid":{"rendered":"https:\/\/geoisteaching.com\/?page_id=1692"},"modified":"2026-05-10T06:59:50","modified_gmt":"2026-05-10T06:59:50","slug":"a2-b1_1","status":"publish","type":"page","link":"https:\/\/geoisteaching.com\/?page_id=1692","title":{"rendered":"A2-B1_1"},"content":{"rendered":"\n\n\n\n\nLe\u00e7on A2-B1 \u2013 La nourriture & les repas<\/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 --tomato: #C0392B;\n --tomato-light: #E74C3C;\n --tomato-pale: #FDECEA;\n --basil: #27AE60;\n --basil-pale: #E9F7EF;\n --mustard: #D4AC0D;\n --mustard-pale: #FEF9E7;\n --aubergine: #6C3483;\n --aubergine-pale: #F5EEF8;\n --cream: #FFFCF8;\n --dark: #2C1810;\n --mid: #5D4037;\n --muted: #9E8B7D;\n --sky: #1A78C2;\n --sky-pale: #EBF5FB;\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(--tomato) 0%, #922B21 100%);\n padding: 40px 60px;\n position: relative;\n overflow: hidden;\n }\n\n .lesson-header::before {\n content: '\ud83c\udf7d\ufe0f';\n position: absolute;\n right: 60px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 130px;\n opacity: 0.12;\n pointer-events: none;\n }\n\n .lesson-badge {\n background: var(--mustard);\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(--mustard);\n font-family: 'Playfair Display', serif;\n }\n\n .lesson-meta {\n display: flex;\n gap: 12px;\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(--tomato-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(--tomato); }\n .sec-btn.active { color: var(--tomato); border-bottom-color: var(--tomato); }\n\n \/* PROGRESS *\/\n .progress-bar {\n background: var(--tomato-pale);\n padding: 10px 60px;\n display: flex;\n align-items: center;\n gap: 16px;\n }\n .progress-label { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--tomato); white-space: nowrap; }\n .progress-track { flex: 1; height: 6px; background: rgba(192,57,43,0.15); border-radius: 3px; }\n .progress-fill { height: 100%; background: var(--tomato); border-radius: 3px; transition: width 0.4s ease; }\n .progress-pct { font-size: 13px; font-weight: 800; color: var(--tomato); 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(--tomato); 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(--tomato);\n color: var(--tomato);\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(--tomato); color: #fff; }\n\n \/* PLAN *\/\n .plan-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 14px;\n margin-bottom: 32px;\n }\n\n .plan-card {\n background: #fff;\n border: 2px solid var(--tomato-pale);\n border-radius: 12px;\n padding: 18px;\n text-align: center;\n transition: border-color 0.2s;\n }\n .plan-card:hover { border-color: var(--tomato-light); }\n .plan-emoji { font-size: 32px; margin-bottom: 8px; }\n .plan-time { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--tomato); margin-bottom: 4px; }\n .plan-title { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 4px; }\n .plan-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }\n\n .objectifs {\n background: var(--mustard-pale);\n border: 2px solid var(--mustard);\n border-radius: 12px;\n padding: 22px 26px;\n }\n .objectifs h3 { font-size: 16px; font-weight: 800; color: var(--dark); margin-bottom: 12px; }\n .obj-list { list-style: none; }\n .obj-list li { padding: 5px 0; color: var(--mid); font-size: 15px; display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }\n .obj-list li::before { content: '\u2705'; flex-shrink: 0; }\n\n \/* TEXTES *\/\n .text-card {\n background: #fff;\n border: 2px solid var(--tomato-pale);\n border-radius: 16px;\n border-top: 4px solid var(--tomato);\n padding: 30px 34px;\n margin-bottom: 26px;\n }\n .text-tag { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--tomato); margin-bottom: 8px; }\n .text-title { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 18px; }\n .text-body p { margin-bottom: 14px; line-height: 1.85; color: var(--mid); font-size: 16px; }\n .text-body p:last-child { margin-bottom: 0; }\n .mot-cle { color: var(--tomato); font-weight: 800; }\n .pc-verb { color: var(--basil); font-weight: 800; background: var(--basil-pale); padding: 1px 4px; border-radius: 4px; }\n\n .questions-box {\n background: var(--tomato-pale);\n border-radius: 10px;\n padding: 20px 24px;\n margin-top: 20px;\n border-left: 4px solid var(--tomato);\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: 15px; line-height: 1.6; font-weight: 600; }\n\n \/* VRAI\/FAUX *\/\n .vf-item {\n background: #fff;\n border: 2px solid var(--tomato-pale);\n border-radius: 10px;\n padding: 12px 16px;\n margin-bottom: 10px;\n }\n .vf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n .vf-q { font-size: 14px; color: var(--mid); font-weight: 600; }\n .vf-btns { display: flex; gap: 8px; flex-shrink: 0; }\n .vf-btn { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 16px; border: 2px solid; cursor: pointer; transition: all 0.2s; }\n .vf-btn.vrai { border-color: var(--basil); color: var(--basil); background: none; }\n .vf-btn.vrai:hover, .vf-btn.vrai.selected { background: var(--basil); color: #fff; }\n .vf-btn.faux { border-color: var(--tomato); color: var(--tomato); background: none; }\n .vf-btn.faux:hover, .vf-btn.faux.selected { background: var(--tomato); color: #fff; }\n .vf-feedback { display: none; font-size: 13px; font-weight: 700; margin-top: 6px; padding: 4px 10px; border-radius: 6px; }\n .vf-feedback.correct { display: block; background: var(--basil-pale); color: var(--basil); }\n .vf-feedback.incorrect { display: block; background: var(--tomato-pale); color: var(--tomato); }\n\n \/* VOCABULAIRE *\/\n .vocab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }\n .vocab-item {\n background: #fff;\n border: 2px solid var(--tomato-pale);\n border-radius: 12px;\n padding: 14px 16px;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n transition: border-color 0.2s, transform 0.2s;\n }\n .vocab-item:hover { border-color: var(--tomato-light); transform: translateY(-1px); }\n .vocab-emoji { font-size: 26px; flex-shrink: 0; }\n .vocab-content { flex: 1; }\n .vocab-word { font-size: 16px; 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: 13px; color: var(--tomato); font-weight: 700; }\n .vocab-example { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 2px; }\n\n \/* GRAMMAIRE *\/\n .gram-block { background: #fff; border: 2px solid var(--tomato-pale); border-radius: 16px; padding: 26px 30px; margin-bottom: 22px; }\n .gram-title { font-size: 19px; font-weight: 800; color: var(--dark); margin-bottom: 12px; }\n .gram-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }\n .gram-table th { background: var(--tomato); color: #fff; padding: 10px 14px; text-align: left; font-weight: 800; }\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: 9px 14px; border-bottom: 1px solid var(--tomato-pale); color: var(--mid); font-weight: 600; }\n .gram-table tr:last-child td { border-bottom: none; }\n .gram-table tr:nth-child(even) td { background: var(--tomato-pale); }\n .gram-note { background: var(--mustard-pale); border: 2px solid var(--mustard); border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--mid); margin-top: 14px; font-weight: 600; }\n .gram-example { background: var(--basil-pale); border-left: 4px solid var(--basil); border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 12px 0; font-size: 15px; color: var(--mid); font-weight: 600; }\n .gram-example em { color: var(--basil); font-weight: 800; font-style: normal; }\n\n \/* EXERCICES *\/\n .exo-block { background: #fff; border: 2px solid var(--tomato-pale); border-radius: 16px; padding: 26px 30px; margin-bottom: 22px; }\n .exo-title { font-size: 18px; font-weight: 800; color: var(--dark); margin-bottom: 14px; }\n .exo-item { margin-bottom: 14px; color: var(--mid); font-size: 15px; line-height: 1.8; font-weight: 600; }\n\n .exo-blank {\n display: inline-block;\n border: none;\n border-bottom: 2px solid var(--tomato);\n min-width: 110px;\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(--basil);\n background: transparent;\n outline: none;\n vertical-align: baseline;\n }\n .exo-blank:focus { border-bottom-color: var(--basil); background: var(--basil-pale); border-radius: 4px 4px 0 0; }\n .exo-blank::placeholder { color: rgba(192,57,43,0.3); font-style: italic; font-weight: 400; }\n\n .reveal-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n margin-top: 14px;\n background: none;\n border: 2px solid var(--tomato);\n color: var(--tomato);\n font-size: 13px;\n font-weight: 800;\n padding: 6px 16px;\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(--tomato); color: #fff; }\n\n .answer-box { display: none; background: var(--basil-pale); border-left: 4px solid var(--basil); border-radius: 0 8px 8px 0; padding: 12px 16px; margin-top: 10px; font-size: 15px; color: var(--mid); font-weight: 600; }\n .answer-box.visible { display: block; }\n .answer-box strong { color: var(--basil); }\n\n \/* CHOIX MULTIPLE *\/\n .choice-item { margin-bottom: 18px; }\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(--tomato-pale);\n background: #fff;\n color: var(--mid);\n cursor: pointer;\n transition: all 0.2s;\n }\n .choice-btn:hover { border-color: var(--tomato-light); color: var(--tomato); }\n .choice-btn.correct { background: var(--basil); border-color: var(--basil); color: #fff; }\n .choice-btn.incorrect { background: var(--tomato); border-color: var(--tomato); 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(--tomato-pale); border-radius: 12px; padding: 20px; transition: border-color 0.2s; }\n .oral-card:hover { border-color: var(--tomato-light); }\n .oral-emoji { font-size: 28px; margin-bottom: 8px; }\n .oral-num { font-size: 28px; font-weight: 800; color: var(--tomato-pale); line-height: 1; 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; font-weight: 600; }\n\n .role-play { background: var(--aubergine); border-radius: 16px; padding: 28px 32px; color: #fff; }\n .role-play h3 { font-size: 20px; font-weight: 800; color: var(--mustard); margin-bottom: 12px; }\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(--mustard); padding: 18px; }\n .role-card h4 { color: var(--mustard); font-size: 14px; font-weight: 800; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }\n .role-card p { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; font-weight: 600; }\n\n \/* TRADUCTION *\/\n .trad-item { background: #fff; border: 2px solid var(--tomato-pale); border-radius: 12px; padding: 20px 24px; margin-bottom: 14px; }\n .trad-num { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--tomato); margin-bottom: 6px; text-transform: uppercase; }\n .trad-ro { font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 12px; }\n .trad-textarea { width: 100%; border: 2px solid var(--tomato-pale); border-radius: 8px; padding: 10px 14px; font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 600; color: var(--dark); background: var(--cream); resize: vertical; min-height: 60px; outline: none; transition: border-color 0.2s; }\n .trad-textarea:focus { border-color: var(--tomato); }\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; 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(--tomato); border-color: var(--tomato); }\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(--tomato-pale); border-radius: 10px; cursor: pointer; transition: all 0.2s; user-select: none; }\n .bilan-item.checked { border-color: var(--basil); background: var(--basil-pale); }\n .bilan-check { width: 24px; height: 24px; border: 2px solid var(--tomato-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(--basil); border-color: var(--basil); 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(--basil); text-decoration: line-through; }\n .bilan-score { background: linear-gradient(135deg, var(--tomato) 0%, #922B21 100%); color: #fff; padding: 22px 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(--mustard); }\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 A2-B1<\/div>\n <h1 class=\"lesson-title\">La nourriture &<br><em>les repas<\/em><\/h1>\n <div class=\"lesson-meta\">\n <span class=\"meta-item\">\u23f1 2 heures<\/span>\n <span class=\"meta-item\">\ud83d\udcda Niveau A2-B1<\/span>\n <span class=\"meta-item\">\ud83c\udf7d\ufe0f Alimentation \u00b7 Restaurant \u00b7 Pass\u00e9 compos\u00e9<\/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\">Qu’avez-vous mang\u00e9 hier ? Quel est votre plat fran\u00e7ais pr\u00e9f\u00e9r\u00e9 ?<\/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 : un dialogue au restaurant et un article sur les repas fran\u00e7ais.<\/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 : aliments, repas, restaurant, go\u00fbts.<\/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 pass\u00e9 compos\u00e9 \u00b7 Les articles partitifs (du, de la, de l’) \u00b7 Les expressions de quantit\u00e9.<\/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 sur la nourriture.<\/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\">Commander au restaurant, raconter un repas, donner son avis sur la cuisine.<\/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 aliments et les repas de la journ\u00e9e en fran\u00e7ais<\/li>\n <li>Commander au restaurant avec politesse<\/li>\n <li>Utiliser le pass\u00e9 compos\u00e9 pour raconter un repas<\/li>\n <li>Employer les articles partitifs (du, de la, de l’, des) correctement<\/li>\n <li>Exprimer ses go\u00fbts et pr\u00e9f\u00e9rences alimentaires<\/li>\n <li>Comprendre et utiliser des expressions de quantit\u00e9<\/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 et \u00e9coutons ! \ud83d\udcd6<\/h2>\n\n \n <div class=\"text-card\">\n <div class=\"text-tag\">Texte 1 \u00b7 Dialogue au restaurant<\/div>\n <h3 class=\"text-title\">Au restaurant \u00ab Le Petit Bistrot \u00bb\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><strong>Serveur :<\/strong> Bonsoir ! Vous avez r\u00e9serv\u00e9 ?<\/p>\n <p><strong>Cliente :<\/strong> Oui, j’<span class=\"pc-verb\">ai r\u00e9serv\u00e9<\/span> une table pour deux personnes. Au nom de Dupont.<\/p>\n <p><strong>Serveur :<\/strong> Tr\u00e8s bien, madame. Voici vos menus. Vous \u00eates pr\u00eats \u00e0 commander ?<\/p>\n <p><strong>Cliente :<\/strong> Oui. Comme entr\u00e9e, je vais prendre <span class=\"mot-cle\">la soupe \u00e0 l’oignon<\/span>, s’il vous pla\u00eet.<\/p>\n <p><strong>Client :<\/strong> Et moi, je prends <span class=\"mot-cle\">les escargots<\/span>. C’est ma premi\u00e8re fois !<\/p>\n <p><strong>Serveur :<\/strong> Excellent choix ! Et comme plat principal ?<\/p>\n <p><strong>Cliente :<\/strong> Je voudrais <span class=\"mot-cle\">le steak frites<\/span>, saignant, s’il vous pla\u00eet.<\/p>\n <p><strong>Client :<\/strong> Pour moi, <span class=\"mot-cle\">le saumon grill\u00e9<\/span> avec des l\u00e9gumes.<\/p>\n <p><strong>Serveur :<\/strong> Et comme boisson ?<\/p>\n <p><strong>Cliente :<\/strong> Une carafe d’eau et une bouteille de vin rouge, s’il vous pla\u00eet.<\/p>\n <p><strong>Serveur :<\/strong> Parfait ! Et vous avez <span class=\"pc-verb\">choisi<\/span> quelque chose comme dessert ?<\/p>\n <p><strong>Client :<\/strong> Pas encore. On regarde la carte d’abord !<\/p>\n <p>\u2014 <em>Plus tard…<\/em> \u2014<\/p>\n <p><strong>Cliente :<\/strong> Excusez-moi, l’addition, s’il vous pla\u00eet.<\/p>\n <p><strong>Serveur :<\/strong> Bien s\u00fbr. Vous avez <span class=\"pc-verb\">pass\u00e9<\/span> une bonne soir\u00e9e ?<\/p>\n <p><strong>Client :<\/strong> Excellente ! Les escargots, c’\u00e9tait d\u00e9licieux ! J’<span class=\"pc-verb\">ai ador\u00e9<\/span> !<\/p>\n <\/div>\n <div class=\"questions-box\">\n <h4>\u2705 Vrai ou Faux ?<\/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 Article culturel<\/div>\n <h3 class=\"text-title\">Les repas en France : une tradition sacr\u00e9e\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>En France, <span class=\"mot-cle\">les repas<\/span> sont beaucoup plus qu’une n\u00e9cessit\u00e9 biologique. Ce sont des moments de partage, de plaisir et de culture. En 2010, l’UNESCO a inscrit \u00ab le repas gastronomique des Fran\u00e7ais \u00bb au patrimoine culturel immat\u00e9riel de l’humanit\u00e9. Une reconnaissance unique au monde !<\/p>\n <p>La journ\u00e9e alimentaire fran\u00e7aise est organis\u00e9e autour de trois repas principaux. <span class=\"mot-cle\">Le petit-d\u00e9jeuner<\/span> est g\u00e9n\u00e9ralement l\u00e9ger : du caf\u00e9 ou du th\u00e9, des tartines avec du beurre et de la confiture, parfois des c\u00e9r\u00e9ales. Il se prend t\u00f4t, entre 7 et 9 heures.<\/p>\n <p><span class=\"mot-cle\">Le d\u00e9jeuner<\/span> est traditionnellement le repas principal. Les Fran\u00e7ais prennent souvent une heure \u2014 parfois deux ! \u2014 pour manger. Une entr\u00e9e, un plat, un dessert. Beaucoup de restaurants proposent un <em>menu du jour<\/em> \u00e0 prix fixe, tr\u00e8s populaire.<\/p>\n <p>Le soir, <span class=\"mot-cle\">le d\u00eener<\/span> r\u00e9unit la famille. On discute, on raconte sa journ\u00e9e. Le repas du soir est plus calme, souvent plus l\u00e9ger que le d\u00e9jeuner.<\/p>\n <p>Et entre les repas ? Pas grand-chose ! Le grignotage n’est pas dans la culture fran\u00e7aise. On mange \u00e0 table, assis, avec du temps. C’est \u00e7a, la gastronomie \u00e0 la fran\u00e7aise.<\/p>\n <\/div>\n <div class=\"questions-box\">\n <h4>Questions de compr\u00e9hension<\/h4>\n <ol>\n <li>Pourquoi les repas fran\u00e7ais ont-ils \u00e9t\u00e9 reconnus par l’UNESCO ?<\/li>\n <li>Qu’est-ce que les Fran\u00e7ais mangent typiquement au petit-d\u00e9jeuner ?<\/li>\n <li>Qu’est-ce qu’un \u00ab menu du jour \u00bb ? Pourquoi est-il populaire ?<\/li>\n <li>Qu’est-ce qui est <em>contraire<\/em> \u00e0 la culture alimentaire fran\u00e7aise ?<\/li>\n <\/ol>\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 pour manger en fran\u00e7ais \ud83c\udf74<\/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 pass\u00e9 compos\u00e9 \u2014 raconter un repas pass\u00e9\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, 'J\\'ai mang\u00e9 une pizza hier soir. Nous avons d\u00een\u00e9 au restaurant. Elle a command\u00e9 le steak frites. Il a ador\u00e9 les escargots. J\\'ai bu du vin rouge.')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/h3>\n <p style=\"color:var(--muted); margin-bottom:14px; font-weight:600;\">Le pass\u00e9 compos\u00e9 = <strong>avoir\/\u00eatre<\/strong> au pr\u00e9sent + <strong>participe pass\u00e9<\/strong>. On l’utilise pour raconter ce qu’on a fait ou mang\u00e9.<\/p>\n <table class=\"gram-table\">\n <tr><th>Infinitif<\/th><th>Participe pass\u00e9<\/th><th>Exemple<\/th><\/tr>\n <tr><td>manger<\/td><td><strong>mang\u00e9<\/strong><\/td><td><em>J’ai mang\u00e9 une quiche ce midi.<\/em><\/td><\/tr>\n <tr><td>boire<\/td><td><strong>bu<\/strong><\/td><td><em>Elle a bu du caf\u00e9 ce matin.<\/em><\/td><\/tr>\n <tr><td>commander<\/td><td><strong>command\u00e9<\/strong><\/td><td><em>Nous avons command\u00e9 le menu du jour.<\/em><\/td><\/tr>\n <tr><td>choisir<\/td><td><strong>choisi<\/strong><\/td><td><em>Il a choisi le saumon grill\u00e9.<\/em><\/td><\/tr>\n <tr><td>prendre<\/td><td><strong>pris<\/strong><\/td><td><em>Vous avez pris le dessert ?<\/em><\/td><\/tr>\n <tr><td>faire<\/td><td><strong>fait<\/strong><\/td><td><em>J’ai fait une tarte aux pommes.<\/em><\/td><\/tr>\n <\/table>\n <div class=\"gram-note\">\u26a0\ufe0f Participes irr\u00e9guliers \u00e0 retenir : boire \u2192 <strong>bu<\/strong> \u00b7 prendre \u2192 <strong>pris<\/strong> \u00b7 faire \u2192 <strong>fait<\/strong> \u00b7 mettre \u2192 <strong>mis<\/strong> \u00b7 vouloir \u2192 <strong>voulu<\/strong><\/div>\n <\/div>\n\n \n <div class=\"gram-block\">\n <h3 class=\"gram-title\">2. Les articles partitifs : DU \u00b7 DE LA \u00b7 DE L’ \u00b7 DES\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, 'Je mange du pain. Je bois de la limonade. Je prends de l\\'eau. Je mange des p\u00e2tes. Je ne mange pas de viande.')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/h3>\n <p style=\"color:var(--muted); margin-bottom:14px; font-weight:600;\">Les articles partitifs expriment une quantit\u00e9 ind\u00e9finie \u2014 une partie d’un tout. Tr\u00e8s utilis\u00e9s pour parler de nourriture !<\/p>\n <table class=\"gram-table\">\n <tr><th>Article<\/th><th>Usage<\/th><th>Exemples<\/th><\/tr>\n <tr><td><strong>DU<\/strong><\/td><td>Masculin singulier<\/td><td><em>du pain, du fromage, du vin, du caf\u00e9<\/em><\/td><\/tr>\n <tr><td><strong>DE LA<\/strong><\/td><td>F\u00e9minin singulier<\/td><td><em>de la viande, de la salade, de la cr\u00e8me<\/em><\/td><\/tr>\n <tr><td><strong>DE L’<\/strong><\/td><td>Devant voyelle<\/td><td><em>de l’eau, de l’huile, de l’ail<\/em><\/td><\/tr>\n <tr><td><strong>DES<\/strong><\/td><td>Pluriel<\/td><td><em>des l\u00e9gumes, des p\u00e2tes, des fruits<\/em><\/td><\/tr>\n <\/table>\n <div class=\"gram-example\">\n \u274c N\u00e9gation : <em>Je ne mange pas <strong>de<\/strong> viande. \u00b7 Il n’y a plus <strong>d’<\/strong>eau.<\/em> \u2192 apr\u00e8s la n\u00e9gation, toujours <strong>de \/ d’<\/strong> !\n <\/div>\n <div class=\"gram-note\">\ud83d\udca1 Astuce : du \/ de la \/ de l’ = \u00ab un peu de… \u00bb. <em>Je mange du pain<\/em> = je mange une partie du pain (pas tout le pain !)<\/div>\n <\/div>\n\n \n <div class=\"gram-block\">\n <h3 class=\"gram-title\">3. Les expressions de quantit\u00e9\n <button class=\"tts-btn\" onclick=\"ttsReadText(this, 'Un verre de vin. Une tasse de caf\u00e9. Une tranche de jambon. Beaucoup de l\u00e9gumes. Un peu de sel. Assez de fromage. Trop de sucre.')\"><span>\ud83d\udd0a<\/span><\/button>\n <\/h3>\n <p style=\"color:var(--muted); margin-bottom:14px; font-weight:600;\">Pour exprimer une quantit\u00e9 pr\u00e9cise ou approximative, on utilise des expressions suivies de <strong>de<\/strong>.<\/p>\n <table class=\"gram-table\">\n <tr><th>Expression<\/th><th>Exemple<\/th><\/tr>\n <tr><td>un verre de<\/td><td><em>un verre de vin rouge<\/em><\/td><\/tr>\n <tr><td>une tasse de<\/td><td><em>une tasse de caf\u00e9, s’il vous pla\u00eet<\/em><\/td><\/tr>\n <tr><td>une tranche de<\/td><td><em>une tranche de jambon<\/em><\/td><\/tr>\n <tr><td>un kilo de<\/td><td><em>un kilo de tomates<\/em><\/td><\/tr>\n <tr><td>beaucoup de<\/td><td><em>J’aime beaucoup de fromage.<\/em><\/td><\/tr>\n <tr><td>un peu de<\/td><td><em>Ajoutez un peu de sel.<\/em><\/td><\/tr>\n <tr><td>trop de<\/td><td><em>C’est trop de sucre !<\/em><\/td><\/tr>\n <tr><td>assez de<\/td><td><em>J’ai assez mang\u00e9, merci.<\/em><\/td><\/tr>\n <\/table>\n <div class=\"gram-note\">\u26a0\ufe0f Apr\u00e8s les expressions de quantit\u00e9, jamais d’article ! \u2192 <em>beaucoup <strong>de<\/strong> l\u00e9gumes<\/em> (pas ~~de des l\u00e9gumes~~)<\/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 <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 1 \u2013 Pass\u00e9 compos\u00e9 : qu’est-ce qu’ils ont mang\u00e9 ?<\/h3>\n <p style=\"color:var(--muted); font-size:14px; font-weight:700; margin-bottom:14px;\">Conjugue les verbes au pass\u00e9 compos\u00e9.<\/p>\n <div class=\"exo-item\">1. Hier soir, je (manger) <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\"> une bonne soupe.<\/div>\n <div class=\"exo-item\">2. Elle (commander) <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\"> le steak frites au restaurant.<\/div>\n <div class=\"exo-item\">3. Nous (boire) <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\"> du vin rouge avec le fromage.<\/div>\n <div class=\"exo-item\">4. Vous (prendre) <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\"> le menu du jour ?<\/div>\n <div class=\"exo-item\">5. Ils (faire) <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\"> une tarte aux fraises pour le dessert.<\/div>\n <div class=\"exo-item\">6. Tu (choisir) <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\"> quel dessert ?<\/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 mang\u00e9<\/em> \u00b7 2. <em>a command\u00e9<\/em> \u00b7 3. <em>avons bu<\/em> \u00b7 4. <em>avez pris<\/em> \u00b7 5. <em>ont fait<\/em> \u00b7 6. <em>as choisi<\/em>\n <\/div>\n <\/div>\n\n <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 2 \u2013 Articles partitifs : DU, DE LA, DE L’ ou DES ?<\/h3>\n <div class=\"exo-item\">1. Le matin, je mange <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> pain et je bois <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> caf\u00e9.<\/div>\n <div class=\"exo-item\">2. Elle ne mange jamais <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> viande. Elle est v\u00e9g\u00e9tarienne.<\/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;\"> l\u00e9gumes frais dans cette recette.<\/div>\n <div class=\"exo-item\">4. Vous voulez <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> eau min\u00e9rale ou <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> vin ?<\/div>\n <div class=\"exo-item\">5. J’ai mis <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> beurre et <input class=\"exo-blank\" type=\"text\" placeholder=\"...\" autocomplete=\"off\" spellcheck=\"false\" style=\"min-width:70px;\"> sel dans la sauce.<\/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>du<\/em> \/ <em>du<\/em> \u00b7 2. <em>de<\/em> (n\u00e9gation) \u00b7 3. <em>des<\/em> \u00b7 4. <em>de l’<\/em> \/ <em>du<\/em> \u00b7 5. <em>du<\/em> \/ <em>du<\/em>\n <\/div>\n <\/div>\n\n <div class=\"exo-block\">\n <h3 class=\"exo-title\">Exercice 3 \u2013 Choix multiple : au restaurant \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\udf73<\/div>\n <div class=\"oral-num\">01<\/div>\n <div class=\"oral-q\">Qu’avez-vous mang\u00e9 hier ? D\u00e9crivez votre repas pr\u00e9f\u00e9r\u00e9 de la semaine pass\u00e9e.<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Hier, j’ai mang\u00e9… \u00b7 J’ai bu… \u00b7 C’\u00e9tait d\u00e9licieux \/ bon \/ pas terrible…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83c\uddeb\ud83c\uddf7<\/div>\n <div class=\"oral-num\">02<\/div>\n <div class=\"oral-q\">Connaissez-vous des plats fran\u00e7ais ? Avez-vous d\u00e9j\u00e0 mang\u00e9 de la cuisine fran\u00e7aise ? Qu’est-ce que vous avez aim\u00e9 ou pas aim\u00e9 ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 J’ai d\u00e9j\u00e0 mang\u00e9… \u00b7 Je n’ai jamais essay\u00e9… \u00b7 J’aimerais go\u00fbter…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83d\uded2<\/div>\n <div class=\"oral-num\">03<\/div>\n <div class=\"oral-q\">Qu’est-ce qu’il y a dans votre r\u00e9frig\u00e9rateur en ce moment ? D\u00e9crivez avec les articles partitifs.<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Dans mon r\u00e9frig\u00e9rateur, il y a du… \u00b7 de la… \u00b7 Je n’ai pas de…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83d\ude0b<\/div>\n <div class=\"oral-num\">04<\/div>\n <div class=\"oral-q\">Quel est votre plat national roumain pr\u00e9f\u00e9r\u00e9 ? Expliquez comment on le pr\u00e9pare (ingr\u00e9dients, \u00e9tapes).<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Pour pr\u00e9parer…, il faut du\/de la… \u00b7 D’abord… \u00b7 Ensuite… \u00b7 Enfin…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83c\udfea<\/div>\n <div class=\"oral-num\">05<\/div>\n <div class=\"oral-q\">Comparez les habitudes alimentaires roumaines et fran\u00e7aises. Quelles sont les diff\u00e9rences ? Les points communs ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 En Roumanie, on mange… \u00b7 En France, ils mangent… \u00b7 Les deux pays…<\/div>\n <\/div>\n <div class=\"oral-card\">\n <div class=\"oral-emoji\">\ud83c\udf31<\/div>\n <div class=\"oral-num\">06<\/div>\n <div class=\"oral-q\">\u00cates-vous v\u00e9g\u00e9tarien(ne) ? Pensez-vous que c’est important de manger moins de viande ? Pourquoi ?<\/div>\n <div class=\"oral-hint\">\ud83d\udca1 Je pense que… \u00b7 C’est important parce que… \u00b7 Je mange beaucoup de \/ peu de…<\/div>\n <\/div>\n <\/div>\n\n <div class=\"role-play\">\n <h3>\ud83c\udfad Jeu de r\u00f4le : Au restaurant !<\/h3>\n <p style=\"color:rgba(255,255,255,0.8); font-size:15px; line-height:1.7; font-weight:600;\">Vous \u00eates dans un restaurant fran\u00e7ais. Un client commande son repas, l’autre joue le serveur. Utilisez le pass\u00e9 compos\u00e9, les articles partitifs et les expressions de politesse !<\/p>\n <div class=\"role-cards\">\n <div class=\"role-card\">\n <h4>\ud83c\udf7d\ufe0f R\u00f4le A \u2013 Le client \/ la cliente<\/h4>\n <p>Commandez votre repas (entr\u00e9e, plat, dessert, boisson), posez des questions sur le menu, exprimez vos pr\u00e9f\u00e9rences : <em>\u00ab Je voudrais… \u00bb, \u00ab Qu’est-ce que vous recommandez ? \u00bb, \u00ab Je n’aime pas… \u00bb, \u00ab C’est avec du\/de la… ? \u00bb<\/em><\/p>\n <\/div>\n <div class=\"role-card\">\n <h4>\ud83d\udc68\u200d\ud83c\udf73 R\u00f4le B \u2013 Le serveur \/ la serveuse<\/h4>\n <p>Accueillez le client, prenez sa commande, recommandez des plats, r\u00e9pondez aux questions : <em>\u00ab Je vous recommande… \u00bb, \u00ab Le plat du jour, c’est… \u00bb, \u00ab C’est pr\u00e9par\u00e9 avec du… \u00bb, \u00ab Vous avez bien mang\u00e9 ? \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 function ttsStop() {\n if (window.speechSynthesis) window.speechSynthesis.cancel();\n if (currentBtn) { currentBtn.classList.remove('playing'); currentBtn.innerHTML = '<span>\ud83d\udd0a<\/span> \u00c9couter'; currentBtn = null; }\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'; utter.rate = 0.85; 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 function ttsRead(btn, id) {\n const el = document.getElementById(id);\n if (el) ttsReadText(btn, el.innerText || el.textContent);\n }\n if (window.speechSynthesis) window.speechSynthesis.onvoiceschanged = () => window.speechSynthesis.getVoices();\n\n \/\/ VRAI\/FAUX\n const vfData1 = [\n { q: \"La cliente a r\u00e9serv\u00e9 une table pour trois personnes.\", answer: false, correction: \"Non, elle a r\u00e9serv\u00e9 pour deux personnes.\" },\n { q: \"Comme entr\u00e9e, le client a pris les escargots.\", answer: true },\n { q: \"La cliente a command\u00e9 un steak bien cuit.\", answer: false, correction: \"Non, elle a command\u00e9 un steak saignant.\" },\n { q: \"Ils ont command\u00e9 du vin blanc.\", answer: false, correction: \"Non, ils ont command\u00e9 du vin rouge.\" },\n { q: \"Le client a aim\u00e9 les escargots.\", answer: true }\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.innerHTML = `\n <div class=\"vf-row\">\n <span class=\"vf-q\">${i+1}. ${item.q}<\/span>\n <div class=\"vf-btns\">\n <button class=\"vf-btn vrai\" onclick=\"checkVF(this, ${item.answer}, true, '${(item.correction||'').replace(\/'\/g,\"\\\\'\")}')\">\u2705 Vrai<\/button>\n <button class=\"vf-btn faux\" onclick=\"checkVF(this, ${item.answer}, false, '${(item.correction||'').replace(\/'\/g,\"\\\\'\")}')\">\u274c Faux<\/button>\n <\/div>\n <\/div>\n <div class=\"vf-feedback\"><\/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.style.pointerEvents = 'none'; });\n btn.classList.add('selected');\n const fb = btn.closest('.vf-item').querySelector('.vf-feedback');\n if (chosen === correct) { fb.textContent = '\ud83c\udf89 Bravo ! C\\'est correct !'; fb.className = 'vf-feedback correct'; }\n else { fb.textContent = correction ? '\ud83d\udca1 ' + correction : '\u274c Ce n\\'est pas correct.'; fb.className = 'vf-feedback incorrect'; }\n }\n\n buildVF(vfData1, 'vfContainer1');\n\n \/\/ CHOIX MULTIPLE\n const choiceData = [\n { q: \"Pour commander poliment, on dit :\", opts: [\"Je veux le steak.\", \"Je voudrais le steak, s'il vous pla\u00eet.\", \"Donne-moi le steak.\"], correct: 1 },\n { q: \"Apr\u00e8s la n\u00e9gation, on utilise :\", opts: [\"du \/ de la \/ des\", \"de \/ d'\", \"un \/ une\"], correct: 1 },\n { q: \"Le pass\u00e9 compos\u00e9 de \u00ab boire \u00bb est :\", opts: [\"j'ai buv\u00e9\", \"j'ai bu\", \"j'ai boir\u00e9\"], correct: 1 },\n { q: \"\u00ab Une tranche ___ jambon \u00bb \u2014 quel article ?\", opts: [\"du\", \"de\", \"des\"], correct: 1 },\n { q: \"Pour demander l'addition au restaurant :\", opts: [\"L'addition !\", \"Excusez-moi, l'addition, s'il vous pla\u00eet.\", \"Payez maintenant.\"], correct: 1 }\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 btn.parentElement.querySelectorAll('.choice-btn').forEach(b => b.style.pointerEvents = 'none');\n btn.classList.add(isCorrect ? 'correct' : 'incorrect');\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\udf73', word: 'le petit-d\u00e9jeuner', type: 'n.m.', ro: 'micul dejun', example: 'Je prends mon petit-d\u00e9jeuner \u00e0 7h30.' },\n { emoji: '\ud83e\udd57', word: 'le d\u00e9jeuner', type: 'n.m.', ro: 'pr\u00e2nzul', example: 'On d\u00e9jeune ensemble \u00e0 midi ?' },\n { emoji: '\ud83c\udf7d\ufe0f', word: 'le d\u00eener', type: 'n.m.', ro: 'cina', example: 'Le d\u00eener est servi \u00e0 19 heures.' },\n { emoji: '\ud83e\udd56', word: 'le pain', type: 'n.m.', ro: 'p\u00e2inea', example: 'Les Fran\u00e7ais mangent du pain \u00e0 chaque repas.' },\n { emoji: '\ud83e\uddc0', word: 'le fromage', type: 'n.m.', ro: 'br\u00e2nza', example: 'La France a plus de 1000 vari\u00e9t\u00e9s de fromage !' },\n { emoji: '\ud83e\udd69', word: 'la viande', type: 'n.f.', ro: 'carnea', example: 'Je ne mange pas beaucoup de viande.' },\n { emoji: '\ud83d\udc1f', word: 'le poisson', type: 'n.m.', ro: 'pe\u0219tele', example: 'J\\'ai mang\u00e9 du poisson grill\u00e9 hier.' },\n { emoji: '\ud83e\udd66', word: 'les l\u00e9gumes', type: 'n.m.pl.', ro: 'legumele', example: 'Mange des l\u00e9gumes, c\\'est bon pour la sant\u00e9 !' },\n { emoji: '\ud83c\udf4e', word: 'les fruits', type: 'n.m.pl.', ro: 'fructele', example: 'Je mange des fruits au petit-d\u00e9jeuner.' },\n { emoji: '\ud83c\udf70', word: 'le dessert', type: 'n.m.', ro: 'desertul', example: 'Comme dessert, j\\'ai pris une tarte aux pommes.' },\n { emoji: '\ud83e\udd64', word: 'la boisson', type: 'n.f.', ro: 'b\u0103utura', example: 'Quelle boisson voulez-vous ?' },\n { emoji: '\ud83c\udf77', word: 'le vin', type: 'n.m.', ro: 'vinul', example: 'Un verre de vin rouge, s\\'il vous pla\u00eet.' },\n { emoji: '\ud83d\udccb', word: 'le menu', type: 'n.m.', ro: 'meniul', example: 'Je vais prendre le menu du jour.' },\n { emoji: '\ud83d\udcb0', word: 'l\\'addition', type: 'n.f.', ro: 'nota de plat\u0103', example: 'L\\'addition, s\\'il vous pla\u00eet !' },\n { emoji: '\ud83d\udc68\u200d\ud83c\udf73', word: 'le serveur', type: 'n.m.', ro: 'chelnerul', example: 'Le serveur est tr\u00e8s sympathique.' },\n { emoji: '\ud83d\ude0b', word: 'd\u00e9licieux\/d\u00e9licieuse', type: 'adj.', ro: 'delicios\/delicioas\u0103', example: 'Ce g\u00e2teau est absolument d\u00e9licieux !' },\n { emoji: '\ud83e\udd22', word: 'avoir faim', type: 'expr.', ro: 'a-\u021bi fi foame', example: 'J\\'ai tr\u00e8s faim, j\\'ai saut\u00e9 le d\u00e9jeuner.' },\n { emoji: '\ud83d\ude0a', word: 'avoir soif', type: 'expr.', ro: 'a-\u021bi fi sete', example: 'Tu as soif ? Je vais chercher de l\\'eau.' },\n { emoji: '\ud83c\udf36\ufe0f', word: '\u00e9pic\u00e9(e)', type: 'adj.', ro: 'picant\/picant\u0103', example: 'Ce plat est trop \u00e9pic\u00e9 pour moi !' },\n { emoji: '\ud83e\uddd1\u200d\ud83c\udf73', word: 'cuisiner', type: 'v.', ro: 'a g\u0103ti', example: 'J\\'ai cuisin\u00e9 un poulet r\u00f4ti ce 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: 'Ieri sear\u0103, am m\u00e2ncat la un restaurant francez cu prietenii mei.', fr: 'Hier soir, j\\'ai mang\u00e9 dans un restaurant fran\u00e7ais avec mes amis.' },\n { ro: 'Ea a comandat un steak cu cartofi pr\u0103ji\u021bi \u0219i a b\u0103ut un pahar de vin ro\u0219u.', fr: 'Elle a command\u00e9 un steak frites et a bu un verre de vin rouge.' },\n { ro: 'Nu m\u0103n\u00e2nc carne. Sunt vegetarian.', fr: 'Je ne mange pas de viande. Je suis v\u00e9g\u00e9tarien.' },\n { ro: 'Diminea\u021ba, beau cafea cu lapte \u0219i m\u0103n\u00e2nc p\u00e2ine cu unt.', fr: 'Le matin, je bois du caf\u00e9 au lait et je mange du pain avec du beurre.' },\n { ro: 'V\u0103 rog, nota de plat\u0103!', fr: 'L\\'addition, s\\'il vous pla\u00eet !' },\n { ro: 'Ce dori\u021bi ca desert? Am o tart\u0103 cu mere sau o mousse de ciocolat\u0103.', fr: 'Qu\\'est-ce que vous voulez comme dessert ? Nous avons une tarte aux pommes ou une mousse au chocolat.' },\n { ro: 'Am g\u0103tit o sup\u0103 delicioas\u0103 cu legume proaspete.', fr: 'J\\'ai cuisin\u00e9 une d\u00e9licieuse soupe avec des l\u00e9gumes frais.' },\n { ro: 'Mi-e foame! Nu am m\u00e2ncat nimic de la pr\u00e2nz.', fr: 'J\\'ai faim ! Je n\\'ai rien mang\u00e9 depuis le d\u00e9jeuner.' }\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 mots pour les repas de la journ\u00e9e (petit-d\u00e9jeuner, d\u00e9jeuner, d\u00eener).',\n 'Je peux nommer des aliments courants en fran\u00e7ais.',\n 'Je sais commander au restaurant avec politesse.',\n 'Je sais conjuguer les verbes au pass\u00e9 compos\u00e9.',\n 'Je connais les participes pass\u00e9s irr\u00e9guliers : bu, pris, fait, choisi.',\n 'Je sais utiliser les articles partitifs : du, de la, de l\\', des.',\n 'Je sais faire la n\u00e9gation avec pas de \/ pas d\\'.',\n 'Je peux utiliser les expressions de quantit\u00e9 (un verre de, beaucoup de...).',\n 'J\\'ai compris le dialogue au restaurant et r\u00e9pondu aux questions V\/F.',\n 'J\\'ai compl\u00e9t\u00e9 les exercices de grammaire.',\n 'J\\'ai particip\u00e9 au jeu de r\u00f4le au restaurant.',\n 'J\\'ai traduit les phrases 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 A2-B1 \u2013 La nourriture & les repas Le\u00e7on 1 \u00b7 A2-B1 La nourriture &les repas \u23f1 2 heures \ud83d\udcda Niveau A2-B1 \ud83c\udf7d\ufe0f Alimentation \u00b7 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"pmpro_default_level":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-1692","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\/1692","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=1692"}],"version-history":[{"count":1,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1692\/revisions"}],"predecessor-version":[{"id":1693,"href":"https:\/\/geoisteaching.com\/index.php?rest_route=\/wp\/v2\/pages\/1692\/revisions\/1693"}],"wp:attachment":[{"href":"https:\/\/geoisteaching.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}