/* Nono : module « Apprendre une langue ». Pensé d'abord pour l'écran du robot (1024x600, au doigt). */
.lc{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  color:var(--hm-frost);
  --lc-hit:64px;
  /* Couleurs qui doivent marcher sur fond sombre comme sur le thème « Jour clair ». */
  --lc-sur-accent:#0B1015;
  --lc-vide:rgba(127,127,127,.26);
}
:where(.lc) button{ font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
.lc p{ margin:0; }
.lc svg{ flex-shrink:0; }

.lc-kicker{
  font-family:'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--hm-amber);
}
.lc-lead{ font-size:clamp(1.05rem, min(2.2vw, 3.6vh), 1.35rem); line-height:1.45; color:var(--hm-body); text-wrap:pretty; }
.lc-muted{ color:var(--hm-dim); line-height:1.45; }
.lc-title{
  margin:0;
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:clamp(1.4rem, min(3.4vw, 5.6vh), 2.2rem);
  line-height:1.15;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.lc-center{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; }

/* Visage de Nono en petit : la bouche bouge quand il parle. */
.lc-face{
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:clamp(64px, 13vh, 96px);
  aspect-ratio:1;
  border-radius:24px;
  border:1px solid var(--hm-edge-strong);
  background:radial-gradient(circle at 50% 40%, var(--hm-tile-hi), var(--hm-tile));
  box-shadow:0 0 30px rgba(111,214,196,.12);
}
.lc-face svg{ width:80%; overflow:visible; }
.lc-face-eye{ fill:none; stroke:var(--hm-mint); stroke-width:13; stroke-linecap:round; filter:drop-shadow(0 0 8px var(--hm-mint-glow)); }
.lc-face-mouth{ fill:none; stroke:var(--hm-frost); stroke-width:10; stroke-linecap:round; transform-box:fill-box; transform-origin:center; }
.lc-face.lc-talking .lc-face-mouth{ animation:lc-talk .22s ease-in-out infinite; }
.lc-face.lc-talking{ border-color:var(--hm-mint); }
@keyframes lc-talk{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1.7); } }

/* Boutons */
.lc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:var(--lc-hit);
  padding:0 24px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  font-size:1.05rem;
  border:1px solid var(--hm-edge-strong);
  background:rgba(111,214,196,.12);
  touch-action:manipulation;
}
.lc-btn svg{ width:24px; height:24px; }
.lc-btn:active{ transform:scale(.97); }
.lc-btn-ghost{ background:transparent; border-color:var(--hm-edge); color:var(--hm-body); }
.lc-btn-primary{ color:var(--lc-sur-accent); background:var(--hm-mint); border-color:var(--hm-mint); box-shadow:0 0 24px rgba(111,214,196,.28); }
.lc-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.lc-chip{
  min-height:48px;
  padding:0 18px;
  border-radius:999px;
  cursor:pointer;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--hm-mint);
  background:transparent;
  border:1px solid var(--hm-edge-strong);
}
.lc-icon-btn{
  display:grid;
  place-items:center;
  width:56px; height:56px;
  border-radius:50%;
  cursor:pointer;
  background:var(--hm-tile);
  border:1px solid var(--hm-edge);
}
.lc-icon-btn svg{ width:24px; height:24px; }
.lc-stars{ display:inline-flex; gap:3px; }
.lc-stars i{ display:block; width:20px; height:20px; color:var(--lc-vide); }
.lc-stars i.lc-on{ color:var(--hm-amber); filter:drop-shadow(0 0 5px rgba(255,180,84,.5)); }
.lc-stars svg{ width:100%; height:100%; }
.lc-meter{ display:block; height:6px; border-radius:3px; background:var(--lc-vide); overflow:hidden; }
.lc-meter i{ display:block; height:100%; border-radius:3px; background:var(--hm-mint); }

/* Choix de la langue */
.lc-langs-wrap{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:clamp(14px, 3.4vh, 28px); max-width:1000px; width:100%; margin-inline:auto; }
.lc-hello{ display:flex; align-items:center; gap:18px; }
.lc-hello .lc-lead{ font-family:'Unbounded', sans-serif; font-weight:700; font-size:clamp(1.15rem, min(2.8vw, 4.6vh), 1.7rem); color:var(--hm-frost); }
.lc-langs{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.lc-lang{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  padding:clamp(14px, 2.4vw, 22px);
  border-radius:22px;
  cursor:pointer;
  text-align:left;
  background:var(--hm-tile);
  border:1px solid var(--hm-edge);
}
.lc-lang:active{ transform:scale(.98); }
.lc-lang .lc-meter{ width:100%; margin-top:auto; }
.lc-lang-code{ font-family:'Unbounded', sans-serif; font-weight:800; font-size:clamp(1.8rem, min(4.4vw, 7vh), 2.8rem); line-height:1; color:var(--hm-mint); }
.lc-lang-name{ font-family:'Unbounded', sans-serif; font-weight:700; font-size:1.15rem; }
.lc-lang-meta{ color:var(--hm-dim); font-size:.95rem; line-height:1.35; }
.lc-lang-meta b{ color:var(--hm-amber); font-weight:600; }

/* Accueil d'une langue */
.lc-home{ flex:1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:clamp(12px, 2vw, 20px); min-height:0; }
.lc-home-main{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.lc-home-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
.lc-home-stats{ color:var(--hm-dim); font-size:.95rem; }
.lc-home-stats b{ color:var(--hm-amber); font-weight:600; }
/* Deux façons d'apprendre : les leçons (ici) ou la discussion libre (autre module). */
.lc-modes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lc-mode{
  min-height:56px;
  padding:0 16px;
  border-radius:16px;
  cursor:pointer;
  font-weight:600;
  font-size:1rem;
  color:var(--hm-body);
  background:var(--hm-tile);
  border:1px solid var(--hm-edge);
}
.lc-mode.lc-mode-on{ color:var(--hm-frost); background:rgba(111,214,196,.14); border-color:var(--hm-mint); box-shadow:inset 0 0 0 1px var(--hm-mint); }
.lc-mode:active{ transform:scale(.98); }

.lc-hero{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  min-height:120px;
  padding:clamp(16px, 2.4vw, 24px);
  border-radius:24px;
  cursor:pointer;
  text-align:left;
  background:radial-gradient(120% 100% at 100% 100%, rgba(111,214,196,.16), transparent 60%), var(--hm-tile);
  border:1px solid var(--hm-edge-strong);
}
.lc-hero:active{ transform:scale(.985); }
.lc-hero-review{ background:radial-gradient(120% 100% at 100% 100%, rgba(255,180,84,.16), transparent 60%), var(--hm-tile); border-color:rgba(255,180,84,.45); }
.lc-hero-small{ flex:0 0 auto; min-height:0; }
.lc-hero-small .lc-hero-big{ font-size:1.15rem; }
.lc-hero-small .lc-hero-sub{ display:none; }
.lc-hero-static{ cursor:default; }
.lc-hero-big{ font-family:'Unbounded', sans-serif; font-weight:700; font-size:clamp(1.3rem, min(3vw, 5vh), 1.9rem); line-height:1.15; text-wrap:balance; }
.lc-hero-sub{ color:var(--hm-dim); line-height:1.4; }
.lc-hero-go{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-weight:700; color:var(--hm-mint); }
.lc-hero-review .lc-hero-go{ color:var(--hm-amber); }
.lc-hero-go svg{ width:20px; height:20px; }
.lc-home-list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-auto-rows:minmax(var(--lc-hit), 1fr);
  gap:8px;
  min-height:0;
  overflow-y:auto;
}
.lc-ls{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:4px;
  min-width:0;
  padding:10px 12px;
  border-radius:16px;
  cursor:pointer;
  text-align:left;
  background:var(--hm-tile);
  border:1px solid var(--hm-edge);
}
.lc-ls:active{ transform:scale(.97); }
.lc-ls-num{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.75rem; color:var(--hm-dim); }
.lc-ls-title{ font-weight:600; line-height:1.2; font-size:.98rem; }
.lc-ls-count{ font-size:.8rem; color:var(--hm-dim); }
.lc-ls .lc-stars i{ width:15px; height:15px; }
.lc-ls.lc-done{ background:rgba(111,214,196,.06); }
.lc-ls.lc-next{ border-color:var(--hm-mint); box-shadow:inset 0 0 0 1px var(--hm-mint); }
.lc-ls.lc-next .lc-ls-num{ color:var(--hm-mint); }

/* Séance */
.lc-session{ flex:1; display:flex; flex-direction:column; gap:clamp(8px, 1.8vh, 14px); min-height:0; }
.lc-top{ display:flex; align-items:center; gap:14px; }
.lc-progress{ flex:1; height:10px; border-radius:5px; background:var(--lc-vide); overflow:hidden; }
.lc-progress i{ display:block; height:100%; border-radius:5px; background:var(--hm-mint); box-shadow:0 0 12px var(--hm-mint-glow); transition:width .4s ease; }
.lc-top-count{ font-family:'JetBrains Mono', ui-monospace, monospace; color:var(--hm-dim); font-variant-numeric:tabular-nums; }
.lc-stage{ flex:1; display:flex; flex-direction:column; min-height:0; }

.lc-intro{ flex:1; display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:clamp(14px, 3vw, 32px); align-items:center; }
.lc-intro-text{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.lc-preview{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lc-preview li{ display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:14px; background:var(--hm-tile); border:1px solid var(--hm-edge); }
.lc-preview span{ font-weight:600; }
.lc-preview small{ color:var(--hm-dim); font-size:.85rem; }

.lc-card-grid{ flex:1; display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(260px, 1fr); gap:clamp(12px, 2vw, 20px); min-height:0; }
.lc-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(8px, 1.8vh, 14px);
  padding:clamp(16px, 3vw, 30px);
  border-radius:26px;
  background:var(--hm-tile);
  border:1px solid var(--hm-edge);
  min-width:0;
}
.lc-word{ display:flex; flex-direction:column; gap:6px; }
.lc-target{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:clamp(1.8rem, min(5vw, 8.4vh), 3.3rem);
  line-height:1.1;
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.lc-translit{ font-size:clamp(1.05rem, 2.2vw, 1.3rem); color:var(--hm-dim); font-style:italic; }
.lc-pron{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:clamp(.95rem, 1.8vw, 1.1rem); color:var(--hm-mint); }
.lc-pron span{ font-size:.72em; letter-spacing:.1em; text-transform:uppercase; color:var(--hm-dim); margin-right:6px; }
.lc-fr{ font-size:clamp(1.1rem, 2.3vw, 1.4rem); font-weight:500; color:var(--hm-body); }
.lc-fr::before{ content:"= "; color:var(--hm-dim); }
.lc-note{ padding:10px 14px; border-radius:14px; background:rgba(255,180,84,.08); border-left:3px solid var(--hm-amber); color:var(--hm-body); font-size:.95rem; line-height:1.4; }
.lc-question{ font-family:'Unbounded', sans-serif; font-weight:700; font-size:clamp(1.2rem, min(3vw, 5vh), 1.8rem); line-height:1.2; text-wrap:balance; }

.lc-side{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(8px, 1.8vh, 14px); min-width:0; text-align:center; }
.lc-side .lc-next-btn{ align-self:stretch; }
.lc-next-btn svg{ width:20px; height:20px; }

/* Gros bouton micro : l'anneau grossit avec la voix. */
.lc-mic-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.lc-mic{
  --lvl:0;
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(88px, 18vh, 112px);
  aspect-ratio:1;
  border-radius:50%;
  cursor:pointer;
  color:var(--lc-sur-accent);
  background:var(--hm-mint);
  border:none;
  box-shadow:0 0 30px rgba(111,214,196,.35);
  touch-action:manipulation;
}
.lc-mic svg{ width:42%; height:42%; }
.lc-mic-ring{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:3px solid var(--hm-mint);
  opacity:.35;
  transform:scale(calc(1 + var(--lvl) * .35));
  transition:transform .08s linear;
  pointer-events:none;
}
.lc-mic.lc-rec{ background:var(--hm-coral); box-shadow:0 0 36px rgba(255,138,114,.5); }
.lc-mic.lc-rec .lc-mic-ring{ border-color:var(--hm-coral); opacity:.8; }
.lc-mic.lc-wait{ opacity:.6; cursor:progress; }
.lc-mic.lc-wait .lc-mic-ring{ animation:lc-spin 1s linear infinite; border-style:dashed; opacity:.8; }
@keyframes lc-spin{ to{ transform:rotate(360deg); } }
.lc-mic-label{ font-weight:600; color:var(--hm-body); }

.lc-feedback{ display:flex; flex-direction:column; gap:4px; align-self:stretch; padding:12px 16px; border-radius:18px; text-align:left; background:var(--hm-tile); border:1px solid var(--hm-edge); }
.lc-feedback.lc-empty{ display:none; }
.lc-verdict{ font-family:'Unbounded', sans-serif; font-weight:700; font-size:1.15rem; }
.lc-good{ border-color:rgba(111,214,196,.6); background:rgba(111,214,196,.1); }
.lc-good .lc-verdict{ color:var(--hm-mint); }
.lc-almost{ border-color:rgba(255,180,84,.55); background:rgba(255,180,84,.08); }
.lc-almost .lc-verdict{ color:var(--hm-amber); }
.lc-miss{ border-color:rgba(255,138,114,.5); background:rgba(255,138,114,.08); }
.lc-miss .lc-verdict{ color:var(--hm-coral); }
.lc-heard{ color:var(--hm-dim); font-size:.92rem; overflow-wrap:anywhere; }
.lc-tip{ color:var(--hm-body); font-size:.95rem; }
.lc-marks b{ font-weight:600; }
.lc-marks .lc-hit{ color:var(--hm-mint); }
.lc-marks .lc-miss{ color:var(--hm-coral); text-decoration:underline wavy; text-underline-offset:4px; background:none; border:0; }

/* Quiz à choix */
.lc-quiz{ flex:1; display:flex; flex-direction:column; gap:clamp(10px, 2vh, 16px); min-height:0; }
.lc-quiz-q{ display:flex; align-items:center; gap:18px; }
.lc-quiz-q > div{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.lc-quiz-q .lc-word{ flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 14px; }
.lc-quiz-q .lc-target{ font-size:clamp(1.3rem, min(3vw, 5vh), 1.9rem); }
.lc-choices{ flex:1; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(var(--lc-hit), 1fr); gap:10px; min-height:0; }
.lc-choice{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  min-width:0;
  padding:10px 20px;
  border-radius:20px;
  cursor:pointer;
  text-align:left;
  font-size:clamp(1.05rem, min(2.2vw, 3.6vh), 1.35rem);
  font-weight:600;
  background:var(--hm-tile);
  border:1px solid var(--hm-edge-strong);
  touch-action:manipulation;
}
.lc-choice small{ font-size:.75em; font-weight:400; color:var(--hm-dim); font-style:italic; }
.lc-choice:active{ transform:scale(.98); }
.lc-choice:disabled{ cursor:default; transform:none; }
.lc-choice.lc-right{ border-color:var(--hm-mint); background:rgba(111,214,196,.16); box-shadow:inset 0 0 0 1px var(--hm-mint); }
.lc-choice.lc-wrong{ border-color:var(--hm-coral); background:rgba(255,138,114,.12); }
.lc-choice.lc-faded{ opacity:.4; }
.lc-quiz-foot{ display:flex; align-items:center; gap:12px; min-height:var(--lc-hit); }
.lc-quiz-foot .lc-feedback{ flex:1; padding-block:8px; }
.lc-quiz-foot .lc-feedback:not(.lc-empty){ flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }

/* Fin de séance */
.lc-end{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; max-width:760px; margin-inline:auto; }
.lc-end > .lc-stars i{ width:44px; height:44px; }
.lc-end .lc-row{ justify-content:center; margin-top:6px; }
.lc-score{ font-family:'Unbounded', sans-serif; font-weight:800; font-size:3rem; line-height:1; color:var(--hm-mint); }
.lc-score small{ font-size:.45em; color:var(--hm-dim); }

/* Écran bas (robot en paysage) : on gagne de la hauteur. */
@media (max-height:640px){
  .lc-side > .lc-face{ display:none; }
  .lc-hello .lc-face{ width:64px; }
  .lc-quiz-q .lc-face{ width:60px; }
}
/* Téléphone ou écran debout */
@media (max-width:760px){
  .lc-langs{ grid-template-columns:1fr 1fr; }
  .lc-home, .lc-intro, .lc-card-grid{ grid-template-columns:1fr; }
  .lc-home-list{ grid-template-columns:1fr 1fr; overflow:visible; }
  .lc-choices{ grid-template-columns:1fr; }
  .lc-preview{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .lc-face.lc-talking .lc-face-mouth, .lc-mic.lc-wait .lc-mic-ring{ animation:none; }
  .lc-progress i, .lc-mic-ring{ transition:none; }
}

/* Thème clair du menu : le vert d’accent devient foncé, le texte posé dessus passe en blanc. */
body.hm-jour .lc{ --lc-sur-accent:#FFFFFF; }