/* ── CHINESE-FR APP EMBED ───────────────────────────────────── */
#chinese-fr-section{padding:32px 0}
.chinese-fr-header{margin-bottom:32px}
.chinese-fr-title{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;letter-spacing:0.12em;color:var(--text);margin-bottom:8px}
.chinese-fr-desc{font-size:0.85rem;color:var(--text-dim);line-height:1.7;max-width:560px;margin-bottom:16px}

/* Filter container - largeur limitée comme la flashcard */
.lesson-filter{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
  max-width:480px;  /* Même largeur que la flashcard */
  width:100%;
}

/* Bouton Tous */
.lesson-select-all{
  padding:6px 14px;background:var(--cell);border:1px solid var(--cell-border);
  border-radius:5px;cursor:pointer;font-size:0.72rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-dim);transition:all 0.15s;
  font-family:'DM Mono',monospace;white-space:nowrap;
}
.lesson-select-all:hover{border-color:var(--accent);color:var(--accent)}
.lesson-select-all.selected{background:var(--accent);color:var(--bg);border-color:var(--accent)}

/* Checkboxes container - avec largeur max */
.lesson-checkboxes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  flex:1;
  max-width:calc(100% - 70px); /* Laisse de la place pour le bouton Tous */
}

/* Lesson checkbox styling */
.lesson-checkbox{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 14px;background:var(--cell);border:1px solid var(--cell-border);
  border-radius:5px;cursor:pointer;font-size:0.72rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-dim);transition:all 0.15s;
  font-family:'DM Mono',monospace;white-space:nowrap;
}
.lesson-checkbox:hover{border-color:var(--accent);color:var(--accent)}
.lesson-checkbox.checked{background:var(--accent);color:var(--bg);border-color:var(--accent)}

/* Flashcard */
.fr-flashcard{
  background:var(--surface);border:1px solid var(--cell-border);
  border-radius:16px;padding:56px 48px;
  max-width:480px;min-height:280px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;cursor:pointer;transition:border-color 0.2s;
  position:relative;
}
.fr-flashcard:hover{border-color:var(--accent2)}
.fr-flashcard-hint{
  position:absolute;top:16px;right:20px;
  font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--text-dim);
}
.fr-fc-char{
  font-size:96px;line-height:1;color:var(--text);
  transition:transform 0.15s;
}
.fr-flashcard:hover .fr-fc-char{transform:scale(1.04)}
.fr-fc-pinyin{
  font-family:'Lora',serif;font-style:italic;
  font-size:1.4rem;color:var(--accent2);
  opacity:0;transition:opacity 0.25s;
}
.fr-fc-pinyin.visible{opacity:1}
.fr-fc-definition{
  font-size:0.9rem;color:var(--text-dim);
  opacity:0;transition:opacity 0.25s;text-align:center;
}
.fr-fc-definition.visible{opacity:1}
.fr-fc-lesson{
  font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--cell-border);margin-top:8px;
}

/* Controls */
.french-controls{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;align-items:center}
.fr-btn{
  background:transparent;border:1px solid var(--accent);color:var(--accent);
  font-family:'DM Mono',monospace;font-size:0.72rem;letter-spacing:0.1em;
  padding:8px 20px;border-radius:6px;cursor:pointer;transition:all 0.15s;
  text-transform:uppercase;
}
.fr-btn:hover{background:var(--accent);color:var(--bg)}
.fr-counter{font-size:0.75rem;color:var(--text-dim);margin-left:8px}

/* Progress Bar - avec animation visible */
.fr-progress-bar{
  width:100%;
  max-width:480px;
  height:4px;  /* Légèrement plus haut pour être visible */
  background:var(--cell);
  border-radius:2px;
  margin-bottom:24px;
  overflow:hidden;
}
.fr-progress-fill{
  height:100%;
  background:var(--accent);
  transition:width 0.3s ease;
  width:0%;
}

/* Responsive */
@media (max-width: 600px) {
  .fr-flashcard{padding:40px 24px;min-height:240px}
  .fr-fc-char{font-size:72px}
  .fr-fc-pinyin{font-size:1.2rem}
  .french-controls{gap:8px}
  .fr-btn{padding:6px 16px;font-size:0.65rem}
}