:root{--paper:#f7f0e5;--white:#fffdf8;--ink:#513b30;--muted:#806d60;--terracotta:#b96747;--terracotta-dark:#965035;--line:#e6d8c7;--pale:#eee0cf;--ok:#396b52;--bad:#a0443e;--shadow:0 12px 38px rgba(74,47,33,.06)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}a{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.22}h1{font-size:clamp(1.9rem,3.2vw,3rem);letter-spacing:-.04em}h2{font-size:1.45rem;letter-spacing:-.025em}h3{font-size:1.08rem}small,.muted{color:var(--muted)}.zh{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-weight:550;line-height:1.45}.py{color:var(--terracotta-dark);font-style:italic}.eyebrow{text-transform:uppercase;font-size:.72rem;font-weight:750;letter-spacing:.14em;color:var(--terracotta-dark)}.app{min-height:100vh;display:grid;grid-template-columns:244px 1fr}.sidebar{background:#f1e7da;border-right:1px solid var(--line);padding:28px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:30px}.brand{display:flex;gap:12px;align-items:center;font-size:1.28rem;font-weight:800;letter-spacing:-.05em}.logo{background:var(--ink);color:var(--white);width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:1.1rem}.brand small{display:block;font-size:.65rem;font-weight:600;letter-spacing:.06em}.nav{display:grid;gap:7px}.nav button{border:0;background:transparent;text-align:left;padding:12px 14px;border-radius:12px;color:var(--muted);font-weight:650}.nav button:hover,.nav button.active{background:var(--white);color:var(--ink)}.profile-mini{margin-top:auto;padding:15px;background:var(--white);border-radius:14px;display:grid;gap:7px}.profile-mini button{background:none;border:0;text-align:left;padding:0;color:var(--terracotta-dark);font-size:.85rem}.main{width:min(1060px,100%);margin:0 auto;padding:48px clamp(18px,5vw,68px) 90px}.topline{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:28px}.pill{border:1px solid var(--line);border-radius:50px;padding:5px 12px;font-size:.75rem;font-weight:750;background:var(--white)}.hero{margin-bottom:28px}.hero p{margin-top:12px;color:var(--muted);max-width:640px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:15px}.card{background:var(--white);border:1px solid var(--line);border-radius:19px;padding:23px;box-shadow:var(--shadow)}.card h3{margin:9px 0}.card p{color:var(--muted);font-size:.92rem}.card .zh{font-size:1.5rem;margin:12px 0 2px}.card .py{font-size:.88rem}.card .meta{display:flex;justify-content:space-between;align-items:center;gap:8px}.btn{border:0;border-radius:11px;background:var(--terracotta);color:white;padding:12px 18px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover{background:var(--terracotta-dark)}.btn.secondary{background:var(--pale);color:var(--ink)}.btn.outline{border:1px solid var(--line);background:var(--white);color:var(--ink)}.btn.small{padding:8px 12px;font-size:.84rem}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.progressbar{height:7px;background:#e8dbcc;border-radius:20px;overflow:hidden;margin:12px 0}.progressbar span{display:block;background:var(--terracotta);height:100%;border-radius:20px}.section{margin-top:32px}.section>h2{margin-bottom:16px}.stack{display:grid;gap:12px}.phrase{display:grid;gap:3px;padding:17px 20px;border:1px solid var(--line);background:var(--white);border-radius:14px}.phrase .zh{font-size:1.42rem}.phrase .fr{font-size:.94rem}.phrase .usage{font-size:.76rem;color:var(--terracotta-dark);font-weight:700;margin-top:5px}.dialogue{display:grid;gap:10px}.bubble{max-width:85%;background:var(--white);border:1px solid var(--line);padding:15px;border-radius:15px}.bubble.b{justify-self:end;background:#ead9c6}.bubble .zh{font-size:1.22rem}.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.tabs button{border:1px solid var(--line);border-radius:50px;background:var(--white);padding:8px 13px;color:var(--muted);font-weight:650}.tabs button.active{background:var(--ink);color:white}.option{width:100%;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:13px;padding:14px 17px;color:var(--ink);display:grid;gap:3px}.option:hover{border-color:var(--terracotta)}.option.selected{border:2px solid var(--terracotta);padding:13px 16px;background:#fbefe6}.quizq{font-size:1.15rem;font-weight:700;margin:12px 0 20px}.quiz-options{display:grid;gap:9px}.notice{padding:13px 16px;background:#f3e4d2;border-radius:12px;margin-top:15px}.notice.ok{background:#e1ece2;color:#245b3b}.notice.bad{background:#f5e0dc;color:#8b342e}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(460px,100%);background:var(--white);border:1px solid var(--line);padding:35px;border-radius:24px;box-shadow:var(--shadow)}.auth-card .brand{margin-bottom:30px}.auth-card h1{font-size:2rem}.auth-card p{color:var(--muted);margin:10px 0 25px}.field{display:grid;gap:6px;margin:14px 0}.field label{font-weight:700;font-size:.86rem}.field input,.field select{border:1px solid var(--line);border-radius:11px;padding:12px;background:white;color:var(--ink);width:100%}.auth-card .btn{width:100%;margin-top:10px}.auth-card .switch{background:none;border:0;color:var(--terracotta-dark);margin-top:15px}.divider{height:1px;background:var(--line);margin:22px 0}.results-list{display:grid;gap:8px}.results-row{padding:12px 14px;background:var(--white);border:1px solid var(--line);border-radius:12px;display:flex;justify-content:space-between;gap:12px}.loading{min-height:100vh;display:grid;place-content:center;font-size:2rem;font-weight:800;gap:10px;text-align:center}.loading small{font-size:.85rem}.empty{color:var(--muted);padding:30px;text-align:center}.tag{display:inline-block;padding:3px 8px;background:#f1e2d2;border-radius:7px;font-size:.72rem;font-weight:700;color:var(--terracotta-dark)}.top-phrase{background:#ead8c1;padding:24px;border-radius:19px;margin-top:24px}.top-phrase .zh{font-size:clamp(1.6rem,4vw,2.4rem);margin-top:12px}.top-phrase .py{margin:3px 0}.wordgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.word{padding:16px;border-radius:12px;border:1px solid var(--line);background:var(--white)}.word .zh{font-size:1.45rem}.word .py{font-size:.85rem}.word .fr{font-size:.88rem}.help{font-size:.88rem;color:var(--muted)}.review{display:grid;gap:12px}.review .card{padding:16px}.footnote{font-size:.78rem;color:var(--muted);margin-top:26px}
@media(max-width:760px){.app{display:block}.sidebar{height:auto;position:relative;padding:14px 18px;gap:10px;border-right:0;border-bottom:1px solid var(--line)}.sidebar>.brand{font-size:1rem}.sidebar .logo{width:36px;height:36px}.nav{display:flex;overflow:auto;gap:5px}.nav button{white-space:nowrap;padding:9px 11px;font-size:.83rem}.profile-mini{display:none}.main{padding:25px 17px 95px}.bubble{max-width:95%}.card{padding:18px}}

/* Grammaire : catégories, filtres et construction de phrases */
.filterbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.filter-pill{border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);padding:8px 13px;font-weight:650;font-size:.86rem}
.filter-pill.active{background:var(--ink);border-color:var(--ink);color:var(--white)}
.grammar-group{grid-column:1/-1;margin:5px 0 15px}
.group-heading{margin:6px 0 15px;font-size:1.2rem}
.grammar-card{display:flex;flex-direction:column;gap:10px}
.grammar-card h3{margin:2px 0}
.grammar-card .phrase{box-shadow:none;background:#f8f1e8;padding:13px 15px}
.grammar-card .phrase .zh{font-size:1.35rem}
.grammar-card .phrase .py{font-size:.9rem}
.grammar-card .help{margin-top:2px}
.formula{background:var(--pale);border-radius:10px;padding:10px 12px;font-weight:700;font-size:.92rem}
.grammar-key{display:flex;gap:10px;align-items:baseline}.grammar-key .zh{font-size:1.25rem}.grammar-key .py{font-size:.88rem}


/* Yibu Yibu · Grammaire 1.2 · design editorial */
.grammar-intro{margin-bottom:44px;max-width:750px}
.grammar-intro h1{margin:10px 0 12px;letter-spacing:-.045em}
.grammar-intro p,.grammar-description{color:var(--muted);font-size:.94rem;line-height:1.65}
.grammar-builder-section{margin-bottom:60px}
.grammar-rules-section{margin-top:32px}
.grammar-section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:8px}
.grammar-section-head h2{font-size:1.65rem;margin:7px 0 0;letter-spacing:-.04em}
.grammar-count{color:var(--terracotta-dark);font-size:.77rem;font-weight:750;background:#ead9c7;border-radius:999px;padding:6px 11px;white-space:nowrap}
.grammar-toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:22px 0 20px}
.grammar-filter{display:flex;flex-wrap:wrap;gap:7px}
.grammar-chip{font-family:inherit!important;appearance:none!important;border:1px solid #dfcbb6!important;background:#fffdf8!important;color:#513b30!important;border-radius:999px!important;padding:9px 15px!important;font-size:.84rem!important;font-weight:700!important;line-height:1.2!important;box-shadow:none!important;transition:background .15s,color .15s}
.grammar-chip:hover{border-color:#b96747!important}
.grammar-chip.is-active{background:#513b30!important;color:#fffdf8!important;border-color:#513b30!important}
.grammar-filter-scroll{margin:23px 0 28px}
.grammar-builder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.builder-card{min-width:0;background:#fffdf8;border:1px solid #e6d8c7;border-radius:20px;padding:23px;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 24px rgba(75,46,28,.035)}
.builder-card-top,.grammar-rule-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grammar-index{font-size:.75rem;color:#ad8069;font-weight:800}
.grammar-level{font-size:.72rem;color:#9c5a3f;background:#f4e5d7;border-radius:6px;padding:4px 8px;font-weight:750}
.builder-card h3{font-size:1.12rem;margin:0;line-height:1.4}
.builder-formula{font-size:.86rem;font-weight:750;background:#f5e9db;padding:11px 13px;border-radius:10px}
.sentence-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sentence-part{background:#f7f0e5;border-radius:12px;display:flex;flex-direction:column;align-items:center;padding:11px 4px;gap:3px}
.sentence-part:nth-child(2){background:#ebd0bd}
.sentence-part strong{font-family:"Noto Sans SC","PingFang SC",sans-serif;font-size:1.65rem}
.sentence-part em{color:#9c5a3f;font-size:.81rem}
.sentence-part small{font-size:.71rem}
.builder-example{padding:15px 0 0;border-top:1px solid #ebdfd1}
.builder-example .zh,.grammar-example .zh{font-size:1.55rem;line-height:1.55}
.builder-example .py,.grammar-example .py{font-size:.92rem;margin:2px 0 4px}
.example-fr{font-size:.89rem;color:#675448}
.builder-tip{font-size:.81rem;color:#806d60;line-height:1.6;margin-top:auto}
.grammar-family{margin:30px 0 38px}
.grammar-family-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddcbbb;padding-bottom:12px;margin-bottom:16px}
.grammar-family-head h3{font-size:1.24rem;margin:0}
.grammar-family-head span{font-size:.78rem;color:#806d60}
.grammar-rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.grammar-rule{min-width:0;background:#fffdf8;border:1px solid #e6d8c7;border-radius:17px;padding:22px;display:flex;flex-direction:column;gap:10px}
.grammar-origin{font-size:.75rem;color:#806d60}
.grammar-rule h4{font-size:1.04rem;line-height:1.35;margin:3px 0 0}
.grammar-term{display:flex;align-items:baseline;gap:12px}
.grammar-term .zh{font-size:1.5rem}
.grammar-term .py{font-size:.86rem}
.grammar-explain{font-size:.88rem;line-height:1.6;color:#806d60}
.grammar-example{margin-top:auto;border-top:1px solid #eee3d7;padding-top:14px}
.grammar-empty{grid-column:1/-1;background:#fffdf8;border:1px dashed #dec6b2;border-radius:14px;padding:30px;color:#806d60}
@media(max-width:900px){.grammar-builder-grid,.grammar-rules-grid{grid-template-columns:1fr}}
@media(max-width:760px){.grammar-intro{margin-bottom:32px}.grammar-builder-section{margin-bottom:42px}.grammar-section-head h2{font-size:1.4rem}.grammar-toolbar{gap:10px}.grammar-filter-scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px}.grammar-chip{white-space:nowrap}.builder-card,.grammar-rule{padding:18px}}