.selected-words, .wordbank { display:flex; flex-wrap:wrap; align-content:flex-start; gap:9px; padding:17px; border-radius:15px; margin:16px 0; }
.selected-words { min-height:90px; border:2px dashed #d5d5d5; background:#fafafa; }
.selected-words:empty::before { content:'Ta phrase apparaîtra ici…'; color:#999; font-size:14px; padding:7px 0; }
.wordbank { justify-content:center; padding:16px 0 21px; }
.word-token { padding:10px 15px; font:inherit; font-weight:800; font-size:16px; color:#555; background:white; border:2px solid #e5e5e5; border-radius:12px; box-shadow:0 3px 0 #e5e5e5; overflow-wrap:anywhere; max-width:100%; }
.word-token:hover:not(:disabled) { border-color:#84d8ff; background:#ddf4ff; color:#168ac2; }
.word-token:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
.word-token:disabled { opacity:.3; }
.selected-words .word-token { color:#168ac2; border-color:#84d8ff; box-shadow:0 3px 0 #84d8ff; background:#ddf4ff; }
.practice-controls { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; margin:22px 0 8px; }
.practice-writing { margin:22px 0 12px; }
.practice-writing label { display:block; font-size:13px; font-weight:800; color:#888; margin-bottom:10px; }
.practice-writing input { width:100%; min-width:0; padding:17px; border:2px solid #e5e5e5; border-radius:14px; background:#f7f7f7; font-size:21px; color:#3c3c3c; }
.practice-writing input:focus { border-color:#84d8ff; background:#fff; }
.practice-writing .keyboard { justify-content:flex-start; margin-top:15px; gap:7px; }
.practice-writing input.correct { border-color:#a4dd74; background:#efffe4; }
.practice-writing input.incorrect { border-color:#f5aaaa; background:#fff0f0; }
@media(max-width:760px) { .word-token{font-size:15px;padding:9px 12px}.selected-words{padding:13px}.practice-controls>.primary{flex:1}.practice-writing input{font-size:20px} }

.expansion-highlight { display:flex; gap:24px; align-items:center; margin:28px 0 34px; padding:25px; border:2px solid #84d8ff; border-bottom-width:5px; border-radius:20px; background:#f1fbff; }
.expansion-highlight h2 { margin:8px 0 10px; font-size:24px; }
.expansion-highlight p { color:#667783; font-size:14px; line-height:1.7; margin:0 0 18px; }
.expansion-illustration { flex:0 0 70px; text-align:center; }
.composition-families { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0; }
.composition-families .filter { white-space:normal; }
.composition-mobile-family { display:none; }
.composition-card { max-width:850px; }
.composition-card .section-title { margin:0 0 12px; flex-wrap:nowrap; align-items:center; gap:12px; }
.composition-card .section-title h2 { font-size:20px; min-width:0; }
.composition-card .section-title > .ic { flex-shrink:0; }
.composition-description { color:#777; font-size:15px; line-height:1.7; }
.composition-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:24px 0; }
.composition-controls label { font-size:13px; font-weight:800; color:#777; }
.composition-controls select,.composition-mobile-family select { display:block; width:100%; margin-top:9px; border:2px solid #ddd; border-bottom-width:4px; border-radius:12px; background:white; color:#444; padding:14px 10px; font:inherit; font-size:15px; text-overflow:ellipsis; }
.composed-sentence { background:#efffe4; border:2px solid #b6e794; border-radius:17px; padding:25px; }
.composed-sentence h2 { color:#4d8728; font-size:28px; line-height:1.5; margin:12px 0; overflow-wrap:anywhere; }
.composed-sentence p { font-size:17px; line-height:1.6; }
.composition-rule,.quiz-rule { color:#586873; background:#f0faff; border-radius:13px; padding:17px; margin:20px 0; font-size:14px; line-height:1.8; }
.composition-rule p,.quiz-rule p { margin:5px 0 0; }
.composition-actions { display:flex; gap:15px; align-items:center; justify-content:flex-end; }
@media(max-width:760px) {
  .expansion-highlight { padding:20px; gap:14px; align-items:flex-start; }
  .expansion-illustration { flex-basis:36px; }
  .expansion-illustration svg { width:36px; }
  .expansion-highlight h2 { font-size:20px; }
  .expansion-highlight .primary { font-size:12px; padding:13px 16px; }
  .composition-controls { grid-template-columns:1fr; gap:14px; }
  .composition-mobile-family { display:block; color:#777; font-weight:800; font-size:13px; margin:20px 0; }
  .composition-families { display:none; }
  .composition-card .section-title h2 { font-size:18px; }
  .composition-description { font-size:13px; line-height:1.5; }
  .composed-sentence { padding:18px; }
  .composed-sentence h2 { font-size:23px; }
  .composition-families .filter { font-size:12px; }
}