:root{ --navy:#14284A; --blue:#1E6FB8; --purple:#6A3D9A; --orange:#E86A1E; --green:#2E8B57; --gold:#E8A33D; --red:#C0504D; --teal:#0E7490; --bg:#F7F9FC; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Nunito","Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif; background:var(--bg); color:#222; line-height:1.45; }
a{ color:inherit; }

/* ---------- en-tête ---------- */
header.site{ background:linear-gradient(135deg,var(--navy),var(--blue)); color:#fff; padding:56px 24px 26px; text-align:center; position:relative; }
header.site .eyebrow{ font-size:13px; letter-spacing:2px; text-transform:uppercase; opacity:.85; }
header.site h1{ margin:8px 0 6px; font-size:32px; line-height:1.15; }
header.site p{ opacity:.92; font-size:15px; max-width:660px; margin:0 auto; }
.lang-switch{ position:absolute; top:14px; right:14px; display:flex; gap:6px; }
.lang-btn{ background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.4); color:#fff; font:700 12.5px "Nunito",sans-serif; padding:6px 11px; border-radius:20px; cursor:pointer; }
.lang-btn.active{ background:#fff; color:var(--navy); border-color:#fff; }
.home-btn{ position:absolute; top:14px; left:14px; background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.55); color:#fff; text-decoration:none; font-weight:800; font-size:13px; padding:6px 14px; border-radius:20px; }
.home-btn:hover{ background:#fff; color:var(--navy); }

/* ---------- accueil ---------- */
main.hub{ max-width:1080px; margin:0 auto; padding:28px 20px 60px; }
.progress-wrap{ background:#fff; border-radius:16px; padding:18px 22px; margin:-30px auto 26px; max-width:1040px; box-shadow:0 4px 16px rgba(20,40,74,.12); position:relative; z-index:2; }
.progress-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-weight:800; color:var(--navy); }
.progress-bar{ height:12px; border-radius:8px; background:#e6ecf5; overflow:hidden; }
.progress-fill{ height:100%; background:linear-gradient(90deg,var(--blue),var(--purple)); width:0%; transition:width .4s ease; border-radius:8px; }
.jump{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 0; }
.jump label{ font-weight:800; color:var(--navy); font-size:14px; }
.jump select{ flex:1; min-width:220px; padding:9px 12px; border-radius:10px; border:2px solid var(--blue); font:700 14px "Nunito",sans-serif; color:var(--navy); background:#fff; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.filter-btn{ background:#eef2f8; border:none; padding:8px 16px; border-radius:20px; cursor:pointer; font:800 13px "Nunito",sans-serif; color:var(--navy); }
.filter-btn.active{ background:var(--navy); color:#fff; }
.unit-title{ display:flex; align-items:center; gap:12px; margin:34px 0 14px; }
.unit-title .un{ background:var(--uc,var(--blue)); color:#fff; font-weight:900; border-radius:12px; padding:6px 14px; font-size:14px; white-space:nowrap; }
.unit-title h2{ margin:0; font-size:21px; color:var(--navy); }
.lesson-list{ display:flex; flex-direction:column; gap:12px; }
.lesson-card{ background:#fff; border-radius:14px; padding:16px 20px; box-shadow:0 1px 4px rgba(0,0,0,.08); border-left:6px solid var(--uc,var(--blue)); display:flex; flex-direction:column; gap:10px; }
.lesson-card.done{ border-left-color:var(--green); }
.lesson-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lesson-meta{ flex:1; min-width:200px; }
.lesson-num{ font-size:11.5px; font-weight:900; color:var(--uc,var(--blue)); letter-spacing:1px; text-transform:uppercase; }
.lesson-card.done .lesson-num{ color:var(--green); }
.lesson-title{ margin:2px 0 0; font-size:17.5px; color:var(--navy); font-weight:800; }
.lesson-title a{ text-decoration:none; } .lesson-title a:hover{ text-decoration:underline; }
.lesson-ico{ font-size:1.5em; margin-right:6px; }
.check-label{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:#888; cursor:pointer; user-select:none; white-space:nowrap; }
.check-label input{ width:16px; height:16px; accent-color:var(--green); cursor:pointer; }
.res-row{ display:flex; flex-wrap:wrap; gap:8px; }
.res-chip{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:13px; font-weight:800; padding:7px 13px; border-radius:9px; color:#fff; }
.res-chip.lecon{ background:var(--navy); } .res-chip.vocab{ background:var(--purple); } .res-chip.rev{ background:linear-gradient(120deg,#E86A1E,#E8A33D); color:#2c1800; }
.res-chip.act{ background:var(--teal); } .res-chip.img{ background:var(--green); } .res-chip.doc{ background:#6b7a90; }
.res-chip:hover{ filter:brightness(1.12); }
.general{ margin-top:38px; }
.res-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px; margin:8px 0 14px; }
.res-card{ background:#fff; border-radius:12px; padding:13px; display:flex; gap:11px; text-decoration:none; color:inherit; border:2px solid #e4eaf3; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.res-card:hover{ border-color:var(--blue); }
.res-ico{ font-size:1.7em; } .res-name{ font-weight:800; color:var(--navy); margin-bottom:2px; font-size:14.5px; } .res-desc{ font-size:12.5px; color:#778; }
footer{ text-align:center; padding:20px; color:#999; font-size:12.5px; }

/* ---------- page de leçon ---------- */
main.lecon{ max-width:940px; margin:0 auto; padding:18px 16px 40px; }
nav.tabs{ position:sticky; top:0; z-index:20; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.12); display:flex; gap:6px; padding:9px 12px; overflow-x:auto; }
nav.tabs button{ flex:0 0 auto; background:#eef2f8; border:none; padding:9px 15px; border-radius:22px; cursor:pointer; font:800 14px "Nunito",sans-serif; color:var(--navy); white-space:nowrap; }
nav.tabs button.active{ background:var(--navy); color:#fff; }
.card{ background:#fff; border-radius:14px; padding:20px 22px; margin-bottom:18px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.card h2{ margin:0 0 6px; color:var(--navy); font-size:21px; }
.hint{ color:#667; font-size:14px; margin:0 0 12px; }
h3.grp{ color:var(--purple); margin:16px 0 6px; font-size:17px; }
.listen-all{ background:#eef2f8; border:none; border-radius:16px; padding:6px 14px; font:800 12.5px "Nunito",sans-serif; color:var(--navy); cursor:pointer; margin-left:8px; }
.listen-all:hover{ background:var(--blue); color:#fff; }
table{ width:100%; border-collapse:collapse; margin:8px 0 12px; }
th,td{ border:1px solid #dfe5ee; padding:8px 10px; text-align:left; font-size:15px; vertical-align:middle; }
th{ background:var(--blue); color:#fff; font-size:14px; }
td.zh{ color:var(--purple); font-style:italic; } td.en{ color:#445; }
.spk-btn{ background:none; border:none; cursor:pointer; font-size:17px; vertical-align:middle; padding:2px 4px; } .spk-btn:hover{ transform:scale(1.2); }
.phr{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; background:#f3f7fd; border-left:5px solid var(--blue); border-radius:6px; margin:8px 0; }
.phr .fr{ font-weight:800; color:var(--navy); } .phr .tr{ color:#667; font-size:14px; margin-top:2px; }
.facts{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.fact{ background:#eef2f8; border-radius:20px; padding:5px 13px; font-weight:800; font-size:13px; color:var(--navy); }
.actions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-top:12px; }
.gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.gal figure{ margin:0; background:#f5f8fc; border-radius:12px; overflow:hidden; cursor:zoom-in; border:2px solid #e4eaf3; }
.gal img{ width:100%; height:170px; object-fit:cover; display:block; }
.gal figcaption{ padding:7px 10px; font-size:12.5px; font-weight:700; color:#445; }
.lightbox{ position:fixed; inset:0; background:rgba(8,14,30,.88); display:none; align-items:center; justify-content:center; z-index:100; padding:14px; flex-direction:column; gap:10px; }
.lightbox.on{ display:flex; }
.lightbox img{ max-width:96vw; max-height:84vh; border-radius:10px; background:#fff; }
.lightbox .cap{ color:#fff; font-weight:700; text-align:center; }
.lightbox .x{ position:absolute; top:12px; right:14px; background:#fff; border:none; border-radius:50%; width:38px; height:38px; font-size:20px; cursor:pointer; }
.empty{ color:#99a; font-style:italic; }
@media (max-width:560px){ header.site h1{ font-size:24px; } .card{ padding:16px 12px; } th,td{ padding:7px 6px; font-size:14px; } }

/* bannière abécédaire (accueil) */
.abc-banner{ display:flex; align-items:center; gap:16px; text-decoration:none; background:linear-gradient(120deg,#ff5d73,#ffb703 55%,#2ec4b6); color:#1c2541; border-radius:18px; padding:16px 20px; margin:0 0 20px; box-shadow:0 6px 18px rgba(20,40,74,.18); flex-wrap:wrap; }
.abc-banner:hover{ filter:brightness(1.05); transform:translateY(-2px); }
.abc-ico{ font-size:2.6rem; background:#fff; width:64px; height:64px; border-radius:50% 50% 50% 14px; display:grid; place-items:center; transform:rotate(-6deg); box-shadow:0 4px 0 rgba(0,0,0,.15); }
.abc-txt{ flex:1; min-width:200px; display:flex; flex-direction:column; } .abc-txt b{ font-size:21px; } .abc-txt span{ font-weight:700; font-size:14px; opacity:.85; }
.abc-go{ background:#14284A; color:#fff; font-weight:900; padding:10px 18px; border-radius:999px; font-size:14px; }