/* ============================================================
   NDÎ-NCHOUT PÂMOM — Module Shüpamom
   S'appuie sur les variables du design system (style.css)
   ============================================================ */

.lg-page            { padding: var(--sp-xl) 0 var(--sp-2xl); }
.lg-page--narrow    { max-width: 720px; margin: 0 auto; }

/* ══ 1. HERO ═════════════════════════════════════════════════ */

.lg-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-secondary) 0%, #3E2723 55%, var(--c-primary-dark) 140%);
  color: #fff;
  padding: calc(var(--nav-h) * .55 + var(--sp-xl)) 0 var(--sp-xl);
}
.lg-hero--slim { padding-bottom: var(--sp-lg); }

.lg-hero-pattern {
  position: absolute; inset: 0;
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  align-content: center; justify-content: center;
  font-size: 4.5rem; line-height: 1;
  opacity: .07; pointer-events: none; user-select: none;
}
.lg-hero-pattern span { transform: rotate(-8deg); }

.lg-hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-xl); flex-wrap: wrap;
}
.lg-hero-text { flex: 1 1 380px; }

.lg-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-full);
  padding: .35rem .9rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.lg-eyebrow .material-icons { font-size: 16px; }

.lg-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin: var(--sp-sm) 0 var(--sp-xs);
  line-height: 1.05;
}
.lg-hero-sub {
  font-size: 1.08rem; max-width: 46ch;
  color: rgba(255,255,255,.85); margin-bottom: var(--sp-md);
}
.lg-hero-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }

/* Carte de progression */
.lg-hero-card {
  flex: 0 1 340px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  text-align: center;
}
.lg-hero-card--guest p { color: rgba(255,255,255,.88); margin: var(--sp-sm) 0 var(--sp-md); }
.lg-guest-icon { font-size: 46px !important; color: var(--c-accent); }

.lg-level-ring {
  --pct: 0;
  width: 92px; height: 92px; margin: 0 auto var(--sp-sm);
  border-radius: 50%;
  display: grid; place-content: center; gap: 0;
  background: conic-gradient(var(--c-accent) calc(var(--pct) * 1%), rgba(255,255,255,.16) 0);
  position: relative;
}
.lg-level-ring::before {
  content: ''; position: absolute; inset: 7px;
  border-radius: 50%; background: #3E2723;
}
.lg-level-num, .lg-level-lbl { position: relative; z-index: 1; display: block; }
.lg-level-num { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.lg-level-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; opacity: .8; }

.lg-hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .4rem; margin-bottom: var(--sp-sm);
}
.lg-hstat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lg-hstat .material-icons { font-size: 19px; color: var(--c-accent); }
.lg-hstat .lg-flame { color: #FF7043; }
.lg-hstat strong { font-size: 1.05rem; }
.lg-hstat span  { font-size: .62rem; opacity: .75; text-transform: uppercase; letter-spacing: .04em; }

.lg-xp-bar {
  height: 8px; border-radius: var(--r-full);
  background: rgba(255,255,255,.16); overflow: hidden;
}
.lg-xp-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--c-primary-light), var(--c-accent));
  border-radius: var(--r-full); transition: width var(--t-slow);
}
.lg-xp-hint { font-size: .74rem; opacity: .75; margin-top: .4rem; }

.lg-hero-card--rank { flex: 0 0 200px; }
.lg-rank-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.lg-rank-num   { display: block; font-family: var(--font-display); font-size: 3rem; line-height: 1.1; }
.lg-rank-xp    { font-size: .9rem; opacity: .85; }

/* ══ 2. BOUTONS ══════════════════════════════════════════════ */

.lg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .78rem 1.5rem;
  border: none; border-radius: var(--r-full);
  font-family: var(--font-body); font-size: .92rem; font-weight: 700;
  letter-spacing: .02em; cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  text-decoration: none;
}
.lg-btn .material-icons { font-size: 19px; }
.lg-btn:hover:not(:disabled) { transform: translateY(-2px); }
.lg-btn:disabled { opacity: .45; cursor: not-allowed; }

.lg-btn--primary { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-md); }
.lg-btn--primary:hover:not(:disabled) { background: var(--c-primary-dark); color: #fff; }
.lg-btn--ghost   { background: rgba(255,255,255,.12); color: inherit; border: 1px solid currentColor; }
.lg-page .lg-btn--ghost { background: transparent; color: var(--c-secondary); }
.lg-btn--success { background: #2E7D32 !important; color: #fff; }
.lg-btn--danger  { background: #C62828; color: #fff; }
.lg-btn--wide    { width: 100%; margin-top: var(--sp-md); }
.lg-btn--small   { padding: .5rem 1rem; font-size: .82rem; }

/* ══ 3. RACCOURCIS ═══════════════════════════════════════════ */

.lg-quick {
  display: grid; gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin-bottom: var(--sp-xl);
}
.lg-quick-card {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--c-text);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
a.lg-quick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--c-text); }

.lg-quick-label {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--c-text-muted);
}
.lg-quick-label .material-icons { font-size: 16px; color: var(--c-primary); }
.lg-quick-num  { font-family: var(--font-display); font-size: 2.6rem; line-height: 1.1; margin: .3rem 0 0; }
.lg-quick-txt  { font-size: .86rem; color: var(--c-text-muted); margin: 0; }
.lg-quick-txt--big { font-size: 1rem; margin-top: var(--sp-sm); color: var(--c-text); }

.lg-quick-card--word { border-left: 4px solid var(--c-primary); }
.lg-word-big { font-size: 1.7rem; font-weight: 700; margin: .4rem 0 0; color: var(--c-secondary); }
.lg-word-aka { font-size: 1.5rem; margin: 0; color: var(--c-primary); }
.lg-word-fr  { font-style: italic; color: var(--c-text-muted); margin: .2rem 0 0; }

/* ══ 4. PARCOURS ═════════════════════════════════════════════ */

.lg-section-title {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: 1.7rem;
  color: var(--c-secondary); margin: var(--sp-xl) 0 var(--sp-md);
}
.lg-section-title:first-child { margin-top: 0; }
.lg-section-title .material-icons { color: var(--c-primary); }
.lg-section-title small {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  background: var(--c-cream-dark); color: var(--c-secondary);
  padding: .18rem .5rem; border-radius: var(--r-full);
}
.lg-subsection { font-family: var(--font-display); color: var(--c-secondary); margin: var(--sp-lg) 0 var(--sp-sm); }

.lg-path { display: grid; gap: var(--sp-lg); }

.lg-unit {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.lg-unit-head {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-md);
  background: linear-gradient(100deg, color-mix(in srgb, var(--u-color) 12%, #fff), #fff 70%);
  border-bottom: 1px solid var(--c-border);
}
.lg-unit-icon {
  flex: 0 0 auto;
  width: 54px; height: 54px; border-radius: var(--r-md);
  display: grid; place-content: center;
  background: var(--u-color); color: #fff;
}
.lg-unit-icon .material-icons { font-size: 27px; }
.lg-unit-meta { flex: 1 1 auto; min-width: 0; }
.lg-unit-kicker {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--u-color);
}
.lg-unit-meta h3 {
  font-family: var(--font-display); font-size: 1.35rem;
  margin: .12rem 0 .18rem; color: var(--c-secondary);
}
.lg-unit-bam { font-size: .92rem; color: var(--c-primary); font-style: italic; margin-left: .4rem; }
.lg-unit-meta p { font-size: .88rem; color: var(--c-text-muted); margin: 0; }

.lg-unit-progress { flex: 0 0 auto; text-align: center; }
.lg-donut {
  --pct: 0;
  width: 56px; height: 56px; border-radius: 50%;
  background: conic-gradient(var(--u-color) calc(var(--pct) * 1%), var(--c-cream-dark) 0);
  display: grid; place-content: center; position: relative; margin: 0 auto .2rem;
}
.lg-donut::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.lg-donut span { position: relative; z-index: 1; font-size: .74rem; font-weight: 700; color: var(--c-secondary); }
.lg-unit-progress small { font-size: .7rem; color: var(--c-text-muted); }

.lg-lessons { list-style: none; margin: 0; padding: 0; }
.lg-lesson + .lg-lesson { border-top: 1px solid var(--c-border); }
.lg-lesson-inner {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: .9rem var(--sp-md);
  text-decoration: none; color: var(--c-text);
  transition: background var(--t-fast);
}
a.lg-lesson-inner:hover { background: var(--c-cream); color: var(--c-text); }

.lg-lesson-bubble {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--c-cream-dark); color: var(--c-secondary);
  transition: transform var(--t-fast);
}
.lg-lesson-bubble .material-icons { font-size: 21px; }
a.lg-lesson-inner:hover .lg-lesson-bubble { transform: scale(1.08); }
.lg-lesson.is-done .lg-lesson-bubble { background: #2E7D32; color: #fff; }
.lg-lesson.is-locked .lg-lesson-inner { opacity: .5; cursor: not-allowed; }

.lg-lesson-body { flex: 1 1 auto; min-width: 0; }
.lg-lesson-body strong { display: block; font-size: .98rem; color: var(--c-secondary); }
.lg-lesson-body small  { font-size: .8rem; color: var(--c-text-muted); }
.lg-lesson-xp {
  flex: 0 0 auto; font-size: .78rem; font-weight: 700;
  color: var(--c-primary-dark);
  background: var(--c-cream); border-radius: var(--r-full);
  padding: .25rem .6rem;
}
.lg-score { font-style: normal; color: #2E7D32; }

/* ══ 5. LEÇON — bandeau, cours, quiz ═════════════════════════ */

.lg-lesson-page { min-height: 70vh; background: var(--c-bg); }

.lg-topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
}
.lg-topbar-inner { display: flex; align-items: center; gap: var(--sp-md); padding: .7rem 0; }
.lg-topbar-close { color: var(--c-text-muted); display: grid; place-content: center; }
.lg-topbar-close:hover { color: #C62828; }
.lg-topbar-progress {
  flex: 1 1 auto; height: 12px; border-radius: var(--r-full);
  background: var(--c-cream-dark); overflow: hidden;
}
.lg-topbar-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  border-radius: var(--r-full); transition: width var(--t-base);
}
.lg-topbar-hearts {
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 700; color: #C62828;
}
.lg-topbar-hearts .material-icons { font-size: 21px; }
.lg-topbar-hearts.is-hit { animation: lg-shake .5s; }
.lg-topbar-hearts--guest { color: var(--c-text-muted); }
@keyframes lg-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px) scale(1.15); }
  75% { transform: translateX(4px) scale(1.15); }
}

.lg-lesson-wrap { padding: var(--sp-lg) 0 7rem; max-width: 780px; }

.lg-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-lg);
}

.lg-cours-kicker {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--u-color, var(--c-primary));
}
.lg-cours-title {
  font-family: var(--font-display); font-size: 2rem;
  color: var(--c-secondary); margin: .25rem 0 .4rem;
}
.lg-cours-lead { color: var(--c-text-muted); font-size: 1rem; margin-bottom: var(--sp-md); }
.lg-cours-body { font-size: 1rem; line-height: 1.75; }
.lg-cours-body p  { margin: 0 0 var(--sp-sm); }
.lg-cours-body ul { margin: 0 0 var(--sp-md); padding-left: 1.3rem; }
.lg-cours-body li { margin-bottom: .3rem; }

.lg-highlight {
  background: var(--c-cream);
  border-left: 4px solid var(--c-primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-sm) var(--sp-md);
  font-size: 1.1rem;
}
.lg-word { font-weight: 700; color: var(--c-secondary); }
.lg-akauku-big { font-size: 2.6rem; letter-spacing: .3rem; text-align: center; }

.lg-note {
  background: #FFFDE7;
  border: 1px dashed var(--c-primary-light);
  border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-md);
  font-size: .92rem;
}

.lg-focus {
  display: grid; gap: var(--sp-sm);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: var(--sp-md) 0;
}
.lg-focus > div {
  background: var(--c-cream);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  text-align: center;
}
.lg-focus p { font-size: .88rem; margin: .4rem 0 0; color: var(--c-text-muted); }
.lg-big {
  display: block; font-size: 2.4rem; font-weight: 700;
  color: var(--c-primary-dark); line-height: 1.1;
}

.lg-table {
  width: 100%; border-collapse: collapse; margin: var(--sp-md) 0;
  font-size: .94rem;
}
.lg-table th, .lg-table td {
  border-bottom: 1px solid var(--c-border);
  padding: .55rem .6rem; text-align: left;
}
.lg-table th { background: var(--c-cream); color: var(--c-secondary); font-size: .82rem; }
.lg-tone { font-size: 1.5rem; font-weight: 700; color: var(--c-primary-dark); }
.lg-aka  { font-size: 1.6rem; color: var(--c-primary-dark); }

/* Grille de syllabaire insérée dans une leçon */
.lg-syl-grid {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  margin: var(--sp-md) 0;
}
.lg-syl-cell {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: .6rem .3rem;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  cursor: pointer; position: relative;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.lg-syl-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-primary); }
.lg-syl-cell.is-open { background: var(--c-cream); border-color: var(--c-primary); }
.lg-syl-cell--static { cursor: default; }
.lg-syl-char { font-size: 2rem; line-height: 1.1; color: var(--c-secondary); }
.lg-syl-val  { font-size: .74rem; color: var(--c-text-muted); font-weight: 700; }
.lg-syl-info {
  font-size: .6rem; color: var(--c-primary-dark);
  background: #fff; border-radius: var(--r-sm); padding: 0 .2rem;
}

/* Vocabulaire de la leçon */
.lg-vocab-title {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-size: 1.2rem;
  color: var(--c-secondary); margin: var(--sp-lg) 0 var(--sp-sm);
}
.lg-vocab-title .material-icons { font-size: 20px; color: var(--c-primary); }
.lg-vocab-list { list-style: none; margin: 0; padding: 0; }
.lg-vocab-item {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: .55rem .2rem;
  border-bottom: 1px solid var(--c-border);
}
.lg-vocab-main { flex: 1 1 40%; display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.lg-vocab-bam  { font-weight: 700; color: var(--c-secondary); }
.lg-vocab-aka  { font-size: 1.25rem; color: var(--c-primary); }
.lg-vocab-fr   { flex: 1 1 45%; color: var(--c-text-muted); font-size: .92rem; }
.lg-vocab-src  {
  display: flex; align-items: center; gap: .3rem;
  font-size: .76rem; color: var(--c-text-muted); margin-top: var(--sp-sm);
}
.lg-vocab-src .material-icons { font-size: 15px; }

.lg-speak {
  flex: 0 0 auto;
  background: var(--c-cream); border: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-content: center; color: var(--c-primary-dark);
  transition: background var(--t-fast), transform var(--t-fast);
}
.lg-speak:hover { background: var(--c-cream-dark); }
.lg-speak.is-playing { transform: scale(1.15); background: var(--c-primary); color: #fff; }
.lg-speak .material-icons { font-size: 19px; }

/* ── Quiz ─────────────────────────────────────────────────── */

.lg-quiz { min-height: 46vh; }
.lg-quiz-consigne {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-text-muted); margin: 0 0 .5rem;
}
.lg-quiz-question {
  font-family: var(--font-display); font-size: 1.6rem;
  color: var(--c-secondary); line-height: 1.35; margin-bottom: var(--sp-lg);
}
.lg-q-glyph {
  display: block; font-size: 5.5rem; text-align: center;
  color: var(--c-primary-dark); line-height: 1.1;
}
.lg-zone-hint { font-size: .84rem; color: var(--c-text-muted); margin-bottom: var(--sp-sm); }

.lg-options { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lg-options--compact { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.lg-option {
  background: var(--c-white);
  border: 2px solid var(--c-border);
  border-bottom-width: 4px;
  border-radius: var(--r-md);
  padding: .95rem 1rem;
  font-family: var(--font-body); font-size: 1rem; color: var(--c-text);
  cursor: pointer; text-align: left;
  transition: all var(--t-fast);
}
.lg-option:hover:not(:disabled) { border-color: var(--c-primary-light); background: var(--c-cream); }
.lg-option.is-selected { border-color: var(--c-primary); background: var(--c-cream); font-weight: 700; }
.lg-option.is-right    { border-color: #2E7D32; background: #E8F5E9; color: #1B5E20; }
.lg-option.is-wrong    { border-color: #C62828; background: #FFEBEE; color: #B71C1C; }
.lg-option:disabled    { cursor: default; }

.lg-input-wrap { max-width: 460px; }
.lg-input {
  width: 100%; box-sizing: border-box;
  border: 2px solid var(--c-border) !important;
  border-bottom-width: 4px !important;
  border-radius: var(--r-md);
  padding: .9rem 1rem !important;
  font-size: 1.05rem; height: auto !important;
  background: var(--c-white);
}
.lg-input:focus { border-color: var(--c-primary) !important; box-shadow: none !important; }
.lg-input.is-right { border-color: #2E7D32 !important; background: #E8F5E9; }
.lg-input.is-wrong { border-color: #C62828 !important; background: #FFEBEE; }

.lg-match { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.lg-match-col { display: grid; gap: .5rem; align-content: start; }
.lg-match-item {
  background: var(--c-white);
  border: 2px solid var(--c-border); border-bottom-width: 4px;
  border-radius: var(--r-md);
  padding: .75rem .8rem; font-size: .95rem; cursor: pointer;
  text-align: left; position: relative;
  transition: all var(--t-fast);
}
.lg-match-item:hover:not(:disabled) { border-color: var(--c-primary-light); }
.lg-match-item.is-selected { border-color: var(--c-primary); background: var(--c-cream); }
.lg-match-item.is-paired {
  border-color: #00897B; background: #E0F2F1; color: #00695C; opacity: .85;
}
.lg-match-item[data-pair]::after {
  content: attr(data-pair);
  position: absolute; top: -7px; right: -7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #00897B; color: #fff;
  font-size: .68rem; display: grid; place-content: center;
}
.lg-reset-btn {
  margin-top: var(--sp-sm); background: none; border: none; cursor: pointer;
  color: var(--c-text-muted); display: inline-flex; align-items: center;
}
.lg-reset-btn:hover { color: var(--c-primary); }

.lg-order-line {
  min-height: 58px; border-bottom: 2px dashed var(--c-border);
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  padding: .5rem 0; margin-bottom: var(--sp-md);
}
.lg-order-bank { display: flex; flex-wrap: wrap; gap: .45rem; }
.lg-order-chip {
  background: var(--c-white);
  border: 2px solid var(--c-border); border-bottom-width: 4px;
  border-radius: var(--r-full);
  padding: .5rem 1rem; font-size: .95rem; cursor: pointer;
  transition: all var(--t-fast);
}
.lg-order-chip:hover:not(:disabled) { border-color: var(--c-primary-light); }
.lg-order-chip.is-used { opacity: .28; pointer-events: none; }
.lg-order-line .lg-order-chip { background: var(--c-cream); border-color: var(--c-primary); }

.lg-hint-btn {
  margin-top: var(--sp-md); background: none; border: none; cursor: pointer;
  color: var(--c-primary-dark); font-weight: 700; font-size: .86rem;
  display: inline-flex; align-items: center; gap: .3rem;
}

/* Barre de validation fixe */
.lg-checkbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -4px 20px var(--c-shadow);
  padding: var(--sp-sm) 0;
}
.lg-checkbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md); flex-wrap: wrap;
}
.lg-feedback {
  flex: 1 1 300px; display: flex; align-items: flex-start; gap: .45rem;
  font-size: .92rem; line-height: 1.5;
}
.lg-feedback .material-icons { font-size: 21px; flex: 0 0 auto; }
.lg-feedback.is-ok   { color: #1B5E20; }
.lg-feedback.is-ko   { color: #B71C1C; }
.lg-feedback.is-hint { color: var(--c-primary-dark); font-style: italic; }
.lg-checkbar .lg-btn { min-width: 170px; }

/* ── Bilan ────────────────────────────────────────────────── */

.lg-bilan { text-align: center; }
.lg-bilan.is-in { animation: lg-pop .4s ease-out; }
@keyframes lg-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.lg-bilan-crown .material-icons {
  font-size: 64px; color: var(--c-accent);
  filter: drop-shadow(0 4px 10px rgba(255,143,0,.35));
}
.lg-bilan h2 {
  font-family: var(--font-display); font-size: 1.9rem;
  color: var(--c-secondary); margin: .4rem 0 .1rem;
}
.lg-bilan > p { color: var(--c-text-muted); margin-bottom: var(--sp-md); }
.lg-bilan-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm); margin-bottom: var(--sp-md);
}
.lg-bilan-stats > div {
  background: var(--c-cream); border-radius: var(--r-md); padding: var(--sp-sm);
}
.lg-bilan-stats strong { display: block; font-size: 1.6rem; color: var(--c-primary-dark); }
.lg-bilan-stats span   { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-muted); }

.lg-bilan-badges { display: grid; gap: .6rem; margin-bottom: var(--sp-md); }
.lg-bilan-badge {
  display: flex; align-items: center; gap: .6rem;
  background: color-mix(in srgb, var(--b-color) 12%, #fff);
  border: 1px solid var(--b-color);
  border-radius: var(--r-md); padding: .6rem .9rem; text-align: left;
}
.lg-bilan-badge .material-icons { color: var(--b-color); font-size: 28px; }
.lg-bilan-badge strong { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--b-color); }
.lg-bilan-badge span   { display: block; font-weight: 700; color: var(--c-secondary); }
.lg-bilan-levelup, .lg-bilan-guest {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--c-cream); border-radius: var(--r-md);
  padding: .6rem; font-weight: 700; color: var(--c-primary-dark); margin: 0;
}
.lg-bilan-guest { font-weight: 400; font-size: .88rem; color: var(--c-text-muted); }
.lg-bilan-actions { display: flex; gap: var(--sp-sm); justify-content: center; flex-wrap: wrap; }

/* Confettis */
.lg-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.lg-confetti i {
  position: absolute; top: -14px;
  width: 9px; height: 15px; border-radius: 2px;
  animation: lg-fall 2.8s linear forwards;
}
@keyframes lg-fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ══ 6. ALPHABET ═════════════════════════════════════════════ */

.lg-tabs {
  display: flex; gap: .4rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--c-border); margin-bottom: var(--sp-lg);
}
.lg-tab {
  background: none; border: none; cursor: pointer;
  padding: .7rem 1.1rem; font-family: var(--font-body);
  font-size: .92rem; font-weight: 700; color: var(--c-text-muted);
  display: inline-flex; align-items: center; gap: .35rem;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.lg-tab .material-icons { font-size: 18px; }
.lg-tab:hover { color: var(--c-primary-dark); }
.lg-tab.is-active { color: var(--c-primary-dark); border-bottom-color: var(--c-primary); }
.lg-panel-intro { color: var(--c-text-muted); max-width: 70ch; margin-bottom: var(--sp-md); }

.lg-sound-grid {
  display: grid; gap: var(--sp-md);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.lg-sound-card {
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.lg-sound-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lg-sound-symbol {
  display: block; font-size: 3rem; font-weight: 700; line-height: 1;
  color: var(--c-primary-dark);
}
.lg-sound-translit {
  display: inline-block; font-size: .74rem; font-weight: 700;
  background: var(--c-cream); color: var(--c-secondary);
  padding: .12rem .5rem; border-radius: var(--r-full); margin: .4rem 0;
}
.lg-sound-desc { font-size: .88rem; color: var(--c-text-muted); margin: 0; }
.lg-sound-ex   { font-size: .88rem; margin: .5rem 0 0; }
.lg-sound-ex strong { color: var(--c-secondary); }
.lg-sound-ex em     { color: var(--c-text-muted); margin-left: .35rem; }

.lg-cons-grid {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.lg-cons-card {
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: .7rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.lg-cons-symbol { font-size: 1.5rem; font-weight: 700; color: var(--c-primary-dark); }
.lg-cons-desc {
  font-size: .72rem; color: var(--c-text-muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.lg-tone-grid { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lg-tone-card {
  display: flex; gap: var(--sp-md); align-items: flex-start;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-md);
}
.lg-tone-symbol {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: var(--r-md);
  background: var(--c-cream); color: var(--c-primary-dark);
  font-size: 2rem; font-weight: 700;
  display: grid; place-content: center;
}
.lg-tone-card strong { color: var(--c-secondary); text-transform: capitalize; }
.lg-tone-val {
  font-size: .7rem; font-weight: 700; margin-left: .4rem;
  background: var(--c-secondary); color: #fff;
  padding: .1rem .4rem; border-radius: var(--r-sm);
}
.lg-tone-card p { font-size: .88rem; color: var(--c-text-muted); margin: .3rem 0 0; }

.lg-syl-search {
  position: relative; max-width: 340px; margin-bottom: var(--sp-md);
}
.lg-syl-search .material-icons {
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  color: var(--c-text-muted); font-size: 20px;
}
.lg-syl-search input {
  width: 100%; box-sizing: border-box;
  padding: .65rem .8rem .65rem 2.3rem !important;
  border: 1px solid var(--c-border) !important; border-radius: var(--r-full);
  background: var(--c-white); height: auto !important; margin: 0 !important;
}
.lg-syl-board {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
.lg-syl-board--small { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

/* Convertisseur */
.lg-converter {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-md); align-items: center; margin-bottom: var(--sp-lg);
}
.lg-conv-side label {
  display: block; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--c-text-muted); margin-bottom: .3rem;
}
.lg-conv-side textarea {
  width: 100%; box-sizing: border-box;
  border: 2px solid var(--c-border) !important; border-radius: var(--r-md);
  padding: .8rem !important; font-size: 1rem; background: var(--c-white);
  resize: vertical; height: auto !important;
}
.lg-conv-hint { font-size: .76rem; color: var(--c-text-muted); margin: .35rem 0 0; }
.lg-conv-arrow .material-icons { color: var(--c-primary); font-size: 30px; }
.lg-conv-output {
  display: block; min-height: 96px;
  background: var(--c-cream); border-radius: var(--r-md);
  padding: .8rem; font-size: 2rem; line-height: 1.4;
  color: var(--c-secondary); word-break: break-word;
}
#lg-conv-copy { margin-top: .5rem; }
#lg-conv-copy.is-done { background: #2E7D32; color: #fff; border-color: #2E7D32; }

.lg-conv-keys {
  display: grid; gap: .35rem;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
}
.lg-conv-key {
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-sm); padding: .4rem .2rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.lg-conv-key:hover { background: var(--c-cream); border-color: var(--c-primary); }
.lg-conv-key span  { font-size: 1.4rem; color: var(--c-secondary); }
.lg-conv-key small { font-size: .62rem; color: var(--c-text-muted); }

/* ══ 7. LEXIQUE ══════════════════════════════════════════════ */

.lg-lex-search { display: flex; gap: var(--sp-sm); margin-bottom: var(--sp-md); flex-wrap: wrap; }
.lg-lex-field { position: relative; flex: 1 1 260px; }
.lg-lex-field .material-icons {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  color: var(--c-text-muted);
}
.lg-lex-field input {
  width: 100%; box-sizing: border-box;
  padding: .8rem 1rem .8rem 2.5rem !important;
  border: 1px solid var(--c-border) !important; border-radius: var(--r-full);
  background: var(--c-white); height: auto !important; margin: 0 !important;
}
.lg-lex-cats { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--sp-lg); }
.lg-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-full); padding: .35rem .85rem;
  font-size: .84rem; color: var(--c-text); text-decoration: none;
  transition: all var(--t-fast);
}
.lg-chip:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }
.lg-chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.lg-chip em { font-style: normal; opacity: .65; font-size: .74rem; }

.lg-lex-grid {
  display: grid; gap: var(--sp-md);
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
}
.lg-lex-card {
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-md);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.lg-lex-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lg-lex-card header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.lg-lex-bam { font-size: 1.15rem; font-weight: 700; color: var(--c-secondary); }
.lg-lex-aka { font-size: 1.7rem; color: var(--c-primary); margin: .2rem 0 0; }
.lg-lex-fr  { margin: .3rem 0 0; color: var(--c-text); }
.lg-lex-en  { margin: .2rem 0 0; font-size: .82rem; color: var(--c-text-muted); }
.lg-lex-note{ margin: .35rem 0 0; font-size: .8rem; font-style: italic; color: var(--c-text-muted); }
.lg-lex-card footer {
  margin-top: auto; padding-top: var(--sp-sm);
  display: flex; justify-content: space-between; gap: .4rem;
  font-size: .68rem; color: var(--c-text-muted);
}
.lg-lex-cat {
  background: var(--c-cream); color: var(--c-secondary);
  padding: .12rem .5rem; border-radius: var(--r-full); font-weight: 700;
}
.lg-lex-contrib {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-top: var(--sp-xl); padding: var(--sp-md);
  background: var(--c-cream); border-radius: var(--r-md);
  font-size: .92rem;
}

.lg-pagination { display: flex; gap: .3rem; justify-content: center; margin-top: var(--sp-lg); flex-wrap: wrap; }
.lg-pagination a {
  min-width: 36px; height: 36px; border-radius: var(--r-sm);
  display: grid; place-content: center;
  background: var(--c-white); border: 1px solid var(--c-border);
  color: var(--c-text); text-decoration: none; font-size: .88rem;
}
.lg-pagination a.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ══ 8. CLASSEMENT ═══════════════════════════════════════════ */

.lg-board { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lg-board-row {
  display: flex; align-items: center; gap: var(--sp-md);
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: .7rem var(--sp-md);
}
.lg-board-row.is-podium { border-color: var(--c-primary-light); background: linear-gradient(90deg, var(--c-cream), #fff 60%); }
.lg-board-row.is-me     { border-color: var(--c-primary); border-width: 2px; }
.lg-board-rank {
  flex: 0 0 34px; text-align: center;
  font-size: 1.1rem; font-weight: 700; color: var(--c-text-muted);
}
.lg-board-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--c-cream); display: grid; place-content: center; }
.lg-board-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lg-board-avatar .material-icons { color: var(--c-text-muted); }
.lg-board-name { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--c-secondary); }
.lg-board-name small { display: block; font-weight: 400; font-size: .76rem; color: var(--c-text-muted); }
.lg-board-streak { display: inline-flex; align-items: center; gap: .2rem; color: #FF7043; font-weight: 700; font-size: .88rem; }
.lg-board-streak .material-icons { font-size: 18px; }
.lg-board-xp { flex: 0 0 auto; font-weight: 700; color: var(--c-primary-dark); }
.lg-board-xp em { font-style: normal; font-size: .7rem; opacity: .7; }

/* ══ 9. BADGES ═══════════════════════════════════════════════ */

.lg-badge-grid {
  display: grid; gap: var(--sp-md);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.lg-badge {
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-md); text-align: center;
  transition: transform var(--t-base);
}
.lg-badge.is-earned { border-color: var(--b-color); }
.lg-badge.is-earned:hover { transform: translateY(-4px) scale(1.02); }
.lg-badge.is-locked { opacity: .55; }
.lg-badge-medal {
  width: 66px; height: 66px; margin: 0 auto var(--sp-sm);
  border-radius: 50%; display: grid; place-content: center;
  background: var(--c-cream-dark); color: var(--c-text-muted);
}
.lg-badge.is-earned .lg-badge-medal {
  background: color-mix(in srgb, var(--b-color) 18%, #fff);
  color: var(--b-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--b-color) 14%, transparent);
}
.lg-badge-medal .material-icons { font-size: 32px; }
.lg-badge h3 { font-family: var(--font-display); font-size: 1.05rem; color: var(--c-secondary); margin: 0 0 .3rem; }
.lg-badge p  { font-size: .82rem; color: var(--c-text-muted); margin: 0; }
.lg-badge-date {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-top: .5rem; font-size: .74rem; color: #2E7D32; font-weight: 700;
}
.lg-badge-date .material-icons { font-size: 15px; }

/* ══ 10. RÉVISION (flashcards) ═══════════════════════════════ */

.lg-rev-head { display: flex; align-items: center; gap: var(--sp-md); max-width: 520px; margin: 0 auto var(--sp-lg); }
#lg-rev-counter { font-weight: 700; color: var(--c-text-muted); font-size: .88rem; }
.lg-rev-progress { flex: 1 1 auto; height: 8px; background: var(--c-cream-dark); border-radius: var(--r-full); overflow: hidden; }
.lg-rev-progress span { display: block; height: 100%; width: 0; background: var(--c-primary); transition: width var(--t-base); }

.lg-flashcard {
  max-width: 520px; margin: 0 auto; height: 300px;
  perspective: 1200px; cursor: pointer;
}
.lg-flash-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .6s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
}
.lg-flashcard.is-flipped .lg-flash-inner { transform: rotateY(180deg); }
.lg-flash-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  padding: var(--sp-lg); text-align: center;
}
.lg-flash-back { transform: rotateY(180deg); background: var(--c-cream); }
.lg-flash-bam { font-size: 2.2rem; font-weight: 700; color: var(--c-secondary); }
.lg-flash-aka { font-size: 2.6rem; color: var(--c-primary); }
.lg-flash-fr  { font-size: 1.7rem; color: var(--c-secondary); }
.lg-flash-hint { position: absolute; bottom: var(--sp-md); font-size: .78rem; color: var(--c-text-muted); margin: 0; }

.lg-rev-actions { display: flex; gap: var(--sp-md); justify-content: center; margin-top: var(--sp-lg); }
.lg-rev-done { text-align: center; padding: var(--sp-xl) 0; }
.lg-rev-done .material-icons { font-size: 60px; color: var(--c-primary); }
.lg-rev-done h2 { font-family: var(--font-display); color: var(--c-secondary); }

/* ══ 11. FORMULAIRES & MODÉRATION ════════════════════════════ */

.lg-form-row { margin-bottom: var(--sp-md); }
.lg-form-row label {
  display: block; font-size: .8rem; font-weight: 700;
  color: var(--c-secondary); margin-bottom: .3rem;
}
.lg-form-row input[type="text"],
.lg-form-row textarea,
.lg-form-row select {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--c-border) !important; border-radius: var(--r-md);
  padding: .7rem .85rem !important; background: var(--c-white);
  height: auto !important; margin: 0 !important; font-size: .98rem;
}
.lg-form-row input:focus, .lg-form-row textarea:focus {
  border-color: var(--c-primary) !important; box-shadow: none !important;
}
.lg-form-legal {
  display: flex; gap: .4rem; align-items: flex-start;
  font-size: .8rem; color: var(--c-text-muted);
  background: var(--c-cream); border-radius: var(--r-md); padding: .7rem;
}
.lg-form-legal .material-icons { font-size: 17px; }

.lg-alert {
  display: flex; align-items: center; gap: .5rem;
  border-radius: var(--r-md); padding: .8rem 1rem; margin-bottom: var(--sp-md);
  font-size: .92rem;
}
.lg-alert--ok { background: #E8F5E9; color: #1B5E20; }
.lg-alert--ko { background: #FFEBEE; color: #B71C1C; }

.lg-contrib-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lg-contrib-row {
  display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-left-width: 4px; border-radius: var(--r-md); padding: .6rem .9rem;
}
.lg-contrib-row.is-en_attente { border-left-color: var(--c-primary); }
.lg-contrib-row.is-accepte    { border-left-color: #2E7D32; }
.lg-contrib-row.is-refuse     { border-left-color: #C62828; }
.lg-contrib-word { font-weight: 700; color: var(--c-secondary); }
.lg-contrib-fr   { flex: 1 1 auto; color: var(--c-text-muted); }
.lg-contrib-status { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

.lg-mod-list { display: grid; gap: var(--sp-md); }
.lg-mod-card {
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-md);
}
.lg-mod-card.is-accepte { opacity: .7; border-color: #A5D6A7; }
.lg-mod-card.is-refuse  { opacity: .55; }
.lg-mod-card header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lg-mod-word { font-size: 1.1rem; font-weight: 700; color: var(--c-secondary); }
.lg-mod-arrow{ color: var(--c-text-muted); }
.lg-mod-fr   { flex: 1 1 auto; }
.lg-mod-badge {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--c-cream); padding: .18rem .55rem; border-radius: var(--r-full);
}
.lg-mod-meta {
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--c-text-muted); margin: .4rem 0;
}
.lg-mod-meta .material-icons { font-size: 15px; }
.lg-mod-note { font-size: .88rem; background: var(--c-cream); border-radius: var(--r-md); padding: .6rem; }
.lg-mod-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: var(--sp-sm); }
.lg-mod-actions select { flex: 1 1 200px; padding: .5rem !important; border-radius: var(--r-md); border: 1px solid var(--c-border) !important; height: auto !important; margin: 0 !important; }

/* ══ 12. DIVERS ══════════════════════════════════════════════ */

.lg-empty {
  text-align: center; color: var(--c-text-muted);
  padding: var(--sp-xl) var(--sp-md);
}
.lg-empty .material-icons { font-size: 44px; display: block; margin-bottom: .5rem; opacity: .5; }
.lg-empty--joy .material-icons { color: #2E7D32; opacity: 1; }

.lg-sources {
  margin-top: var(--sp-2xl); padding: var(--sp-lg);
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.lg-sources h3 {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-size: 1.2rem;
  color: var(--c-secondary); margin: 0 0 .5rem;
}
.lg-sources h3 .material-icons { color: #2E7D32; }
.lg-sources p  { font-size: .9rem; color: var(--c-text-muted); }
.lg-sources ul { font-size: .88rem; color: var(--c-text-muted); padding-left: 1.2rem; }
.lg-sources li { margin-bottom: .3rem; }
.lg-sources-call { margin-top: var(--sp-sm); }

/* ══ 13. RESPONSIVE ══════════════════════════════════════════ */

@media (max-width: 992px) {
  .lg-converter { grid-template-columns: 1fr; }
  .lg-conv-arrow { transform: rotate(90deg); text-align: center; }
}

@media (max-width: 768px) {
  .lg-hero-inner { flex-direction: column; align-items: stretch; }
  .lg-hero-card  { flex: 1 1 auto; }
  .lg-unit-head  { flex-wrap: wrap; }
  .lg-unit-progress { order: -1; margin-left: auto; }
  .lg-quiz-question { font-size: 1.3rem; }
  .lg-q-glyph { font-size: 4rem; }
  .lg-bilan-stats { grid-template-columns: repeat(3, 1fr); }
  .lg-checkbar .lg-btn { width: 100%; min-width: 0; }
  .lg-match { grid-template-columns: 1fr; }
  .lg-flashcard { height: 250px; }
}

@media (max-width: 600px) {
  .lg-lesson-inner { gap: .6rem; padding: .8rem .8rem; }
  .lg-lesson-body small { display: none; }
  .lg-hero-stats { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .lg-syl-board { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .lg-board-row { gap: .5rem; padding: .6rem; }
  .lg-board-name small { display: none; }
  .lg-rev-actions { flex-direction: column; }
  .lg-rev-actions .lg-btn { width: 100%; }
}