/* Ogrelo · espace « Langues » (public/langues.js). Couleurs : jetons de l'appli (mode sombre compris).
   Identité : une teinte par langue (--lc, drapeau SVG), une couleur par niveau du CECRL (--nc, pastille).
   Les quiz reprennent l'allure du quiz des fiches (.qcard, .opts/.opt, .feedback, .prog : index.html) ; ici, seulement l'audio en plus. */
.cz-lg{--c:#2E7DD7;display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:2px solid color-mix(in srgb,var(--c) 40%,var(--line));background:color-mix(in srgb,var(--c) 9%,var(--card));color:var(--ink);border-radius:22px;padding:16px;margin:0 0 16px;font:inherit;cursor:pointer}
.cz-lg .i{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;background:var(--c);color:#fff}
.cz-lg .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cz-lg b{font-family:var(--display);font-size:1.15rem}
.cz-lg small{color:var(--soft);overflow-wrap:anywhere}
.cz-lg .go{color:var(--soft)}

/* ---------- cadre ---------- */
.lg{--lg-r:20px;--lg-ombre:0 4px 0 color-mix(in srgb,var(--ink) 10%,transparent)}
.lg .cm-top{gap:8px}
.lg .lg-t{flex:1;min-width:0;font-family:var(--display);font-size:1.1rem;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-ret{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none;visibility:hidden}
.lg .cm-corps>*,.lg-inl>*{animation:lgIn .32s ease both}
.lg .cm-corps>*:nth-child(2),.lg-inl>*:nth-child(2){animation-delay:.04s}.lg .cm-corps>*:nth-child(3),.lg-inl>*:nth-child(3){animation-delay:.08s}
.lg .cm-corps>*:nth-child(4),.lg-inl>*:nth-child(4){animation-delay:.12s}.lg .cm-corps>*:nth-child(n+5),.lg-inl>*:nth-child(n+5){animation-delay:.16s}
@keyframes lgIn{from{opacity:0;transform:translateY(8px)}}
.lg button{-webkit-tap-highlight-color:transparent}
.lg-lang,.lg-l2,.lg-go,.lg-u,.lg-tu,.lg-etapes button,.lg-lien,.lg-choix button{transition:transform .12s ease,box-shadow .12s ease,border-color .15s}
.lg-lang:active,.lg-l2:active,.lg-go:active,.lg-tu:active,.lg-etapes button:active,.lg-lien:active,.lg-u:not(:disabled):active{transform:translateY(2px) scale(.99);box-shadow:none}

/* ---------- drapeaux, pastilles de niveau ---------- */
.lg-drap{flex:none;display:block;width:42px;height:30px;border-radius:9px;overflow:hidden;box-shadow:0 0 0 2px var(--card),0 0 0 3.5px color-mix(in srgb,var(--ink) 14%,transparent)}
.lg-drap svg{display:block;width:100%;height:100%}
.lg-drap.g{width:56px;height:40px;border-radius:12px}
.lg-badge{--nc:#1F5FA8;flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(150deg,color-mix(in srgb,var(--nc) 78%,#fff),var(--nc) 60%);color:#fff;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:.02em;box-shadow:0 4px 0 color-mix(in srgb,var(--nc) 55%,#000 20%),inset 0 -3px 0 rgba(0,0,0,.12);text-shadow:0 1px 1px rgba(0,0,0,.2)}
.lg-badge.s{width:40px;height:40px;border-radius:12px;font-size:.95rem;box-shadow:0 3px 0 color-mix(in srgb,var(--nc) 55%,#000 20%)}
.lg-badge.xl{width:88px;height:88px;border-radius:26px;font-size:2rem;margin:4px auto 10px}

/* ---------- Ogrelo parle ---------- */
.lg-dit{display:flex;gap:10px;align-items:flex-end;margin:6px 0 26px}
.lg-dit .f{flex:none;width:58px;height:58px}
.lg-dit .f svg{width:100%;height:100%}
.lg-attente{margin:16px 0}

/* chargement */
.lg-charge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 16px;text-align:center;color:var(--soft)}
.lg-charge .f{width:84px;height:84px;animation:lgFlotte 2.4s ease-in-out infinite}.lg-charge .f svg{width:100%;height:100%}
.lg-charge p{margin:0;font-weight:700}
.lg-points{display:inline-flex;gap:6px;align-items:center;height:14px}
.lg-points i{width:9px;height:9px;border-radius:50%;background:var(--ogre);animation:g-wave 1.2s ease-in-out infinite}
.lg-points i:nth-child(2){animation-delay:.15s}.lg-points i:nth-child(3){animation-delay:.3s}
@keyframes lgFlotte{50%{transform:translateY(-6px)}}

/* titres, aides */
.lg-h{font-family:var(--display);font-size:1.08rem;margin:30px 0 12px;display:flex;align-items:center;gap:10px}
.lg-h::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--line)}
.lg-aide{color:var(--soft);font-size:.95rem;line-height:1.45;margin:6px 0 12px}
.lg-aide.c{text-align:center}
.lg-bientot{color:var(--soft);font-size:.9rem;margin-top:22px;display:flex;gap:8px;align-items:center;justify-content:center;text-align:center}
.lg .ic,.lg-inl .ic{flex:none;display:grid;place-items:center;border-radius:14px}

/* ---------- choix de la langue : tuiles colorées, ombre pleine dessous (on appuie : la tuile descend) ---------- */
.lg-grille{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin:0 0 8px}
.lg-tuile{--tc:#2563C9;--tt:#fff;--td:color-mix(in srgb,var(--tc) 62%,#000);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;min-height:146px;text-align:left;border:0;border-radius:22px;padding:14px;margin:0 0 5px;font:inherit;color:var(--tt);cursor:pointer;overflow:hidden;
  background:linear-gradient(165deg,color-mix(in srgb,var(--tc) 80%,#fff),var(--tc) 58%);box-shadow:0 5px 0 var(--td);transition:transform .08s ease,box-shadow .08s ease}
.lg-tuile::after{content:"";position:absolute;right:-26px;top:-26px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
button.lg-tuile:active{transform:translateY(4px);box-shadow:0 1px 0 var(--td)}
.lg-tuile .lg-drap.g{width:54px;height:38px;border-radius:11px;box-shadow:0 0 0 3px rgba(255,255,255,.92),0 3px 0 3px var(--td)}
.lg-tuile .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.lg-tuile b{font-family:var(--display);font-weight:800;font-size:1.18rem;line-height:1.15}
.lg-tuile .n{font-weight:700;font-size:.88rem;opacity:.9}
.lg-tuile small{font-size:.8rem;line-height:1.3;font-weight:700;opacity:.92;margin-top:3px}
.lg-tuile.cour{outline:3px solid var(--sun);outline-offset:3px}
.lg-t-niv{margin-top:auto;display:flex;align-items:center;gap:8px;width:100%}
.lg-t-niv .lg-badge.s{width:34px;height:34px;font-size:.8rem;border-radius:10px;background:#fff;color:var(--td);text-shadow:none;box-shadow:0 3px 0 var(--td)}
.lg-t-barre{flex:1;height:10px;border-radius:99px;background:rgba(0,0,0,.2);overflow:hidden}
.lg-t-barre i{display:block;height:100%;border-radius:99px;background:#fff}
/* rien de prêt : grisée, cadenas, ne s'ouvre pas */
.lg-tuile.verrou{cursor:default;filter:grayscale(.9);opacity:.6;box-shadow:0 5px 0 var(--td)}
.lg-tuile.verrou::after{display:none}
.lg-t-lock{position:absolute;right:12px;top:12px;z-index:1;font-size:1rem;opacity:.9}
.lg-lang .go,.lg-l2 .go,.lg-go .go,.lg-lien .go{color:var(--soft);flex:none}

/* boutons « deux lignes » (départ, ensemble) */
.lg-l2{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--lg-r,20px);padding:14px 16px;margin:0 0 12px;font:inherit;cursor:pointer;box-shadow:var(--lg-ombre)}
.lg-l2:not(.ic){flex-direction:column;align-items:flex-start;gap:4px}
.lg-l2 .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lg-l2 b{font-family:var(--display);font-size:1.05rem}
.lg-l2 small{color:var(--soft)}
.lg-l2 .ic{width:46px;height:46px;background:color-mix(in srgb,var(--c,#2E7DD7) 16%,var(--card));color:var(--c,#2E7DD7);font-size:1.3rem}

/* ---------- ma langue ---------- */
.lg-hero{display:block;--lc:#2563C9;--nc:#1F5FA8;--ld:color-mix(in srgb,var(--lc) 62%,#000);position:relative;border-radius:24px;padding:18px 18px 16px;margin:4px 0 18px;color:#fff;overflow:hidden;
  background:linear-gradient(165deg,color-mix(in srgb,var(--lc) 80%,#fff),var(--lc) 60%);box-shadow:0 6px 0 var(--ld)}
.lg-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.12)}
.lg-hero-h{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.lg-hero-h .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.lg-hero-h small{font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.lg-hero-h b{font-family:var(--display);font-size:1.22rem;line-height:1.2;text-shadow:0 1px 0 rgba(0,0,0,.18)}
.lg-hero .lg-drap.g{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 3px 0 3px var(--ld)}
.lg-hero .lg-badge{background:#fff;color:var(--lc);text-shadow:none;box-shadow:0 4px 0 var(--ld)}
.lg-hero-d{position:relative;z-index:1;margin:14px 0 12px;line-height:1.45;font-size:.95rem;opacity:.95}
.lg-hero-p{position:relative;z-index:1;font-size:.82rem;font-weight:800;opacity:.92}
.lg-hero .lg-barre{position:relative;z-index:1;background:rgba(0,0,0,.22)}
.lg-hero .lg-barre i{background:#fff}
.lg-barre{height:12px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,var(--line));overflow:hidden;margin:0 0 6px}
.lg-barre i{display:block;height:100%;background:linear-gradient(90deg,var(--ogre),var(--sun));border-radius:99px;animation:lgBarre .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
@keyframes lgBarre{from{transform:scaleX(0)}}
.lg-jour{display:flex;gap:16px;align-items:center;border:2px solid var(--line);background:var(--card);border-radius:22px;padding:16px;box-shadow:var(--lg-ombre)}
.lg-jour.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:color-mix(in srgb,var(--ok) 6%,var(--card))}
.lg-jour .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.lg-jour b{font-family:var(--display);font-size:1.02rem;line-height:1.25}
.lg-jour small{color:var(--soft);font-size:.85rem}
.lg-anneau{flex:none;width:80px;height:80px;border-radius:50%;display:grid;place-items:center;align-content:center;background:conic-gradient(var(--ogre) calc(var(--p)*1%),color-mix(in srgb,var(--ink) 8%,var(--line)) 0);position:relative}
.lg-anneau::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--card)}
.lg-anneau b,.lg-anneau small{position:relative;line-height:1.05;text-align:center}
.lg-anneau b{font-family:var(--display);font-size:1.45rem}
.lg-anneau small{font-size:.68rem;color:var(--soft)}
.lg-sem{display:flex;gap:6px}
.lg-sem i{position:relative;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);background:var(--card)}
.lg-sem i.mi{background:color-mix(in srgb,var(--ogre) 30%,var(--card));border-color:var(--ogre)}
.lg-sem i.ok{background:var(--ogre);border-color:var(--ogre)}
.lg-sem i.ok::after{content:"";position:absolute;inset:3px;background:#fff;-webkit-mask:var(--gi-check) center/contain no-repeat;mask:var(--gi-check) center/contain no-repeat}
.lg-go{--c:#2B8A3E;display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;color:#fff;border-radius:24px;padding:18px 16px;margin:18px 0 20px;font:inherit;cursor:pointer;
  background:linear-gradient(135deg,#3F9A4C,#2B7A3A);box-shadow:0 6px 0 #1F5C2B,0 12px 22px rgba(43,122,58,.25)}
.lg-go .i{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#2B7A3A;font-size:1.3rem;box-shadow:0 0 0 6px rgba(255,255,255,.2);animation:lgPouls 2.2s ease-in-out infinite}
.lg-go .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lg-go small{color:rgba(255,255,255,.85);font-weight:700;font-size:.82rem;letter-spacing:.02em}
.lg-go b{font-family:var(--display);font-size:1.12rem;line-height:1.25}
.lg-go .go{color:#fff}
.lg-go:active{box-shadow:0 2px 0 #1F5C2B}
@keyframes lgPouls{50%{box-shadow:0 0 0 11px rgba(255,255,255,0)}}
.lg-tuiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 4px}
.lg-tu{--cd:color-mix(in srgb,var(--c) 62%,#000);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;border:0;background:linear-gradient(165deg,color-mix(in srgb,var(--c) 80%,#fff),var(--c) 60%);color:#fff;border-radius:22px;padding:14px;margin-bottom:5px;font:inherit;cursor:pointer;min-height:124px;box-shadow:0 5px 0 var(--cd);overflow:hidden}
.lg-tu:active{transform:translateY(4px)!important;box-shadow:0 1px 0 var(--cd)!important}
.lg-tu .ic{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.95);color:var(--c);font-size:1.2rem;margin-bottom:2px;box-shadow:0 3px 0 var(--cd)}
.lg-tu b{font-family:var(--display);font-size:1.05rem;line-height:1.2;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.lg-tu small{color:#fff;opacity:.9;font-size:.82rem;line-height:1.35}

/* dépliants : je sais dire, parcours */
.lg-pli{border:2px solid var(--line);background:var(--card);border-radius:20px;margin:12px 0;overflow:hidden}
.lg-pli summary{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer;list-style:none}
.lg-pli summary::-webkit-details-marker{display:none}
.lg-pli summary .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lg-pli summary b{flex:1;font-family:var(--display);font-size:1rem;line-height:1.25}
.lg-pli summary small{color:var(--soft);font-size:.82rem}
.lg-pli summary>.gi-bas{transition:transform .2s;color:var(--soft)}
.lg-pli[open] summary>.gi-bas{transform:rotate(180deg)}
.lg-pli-js .ic{width:34px;height:34px;border-radius:11px;background:var(--ok-bg);color:var(--ok-t)}
.lg-js{list-style:none;margin:0;padding:0 16px 14px}
.lg-js li{padding:7px 0;display:flex;gap:10px;align-items:baseline;line-height:1.4}
.lg-js .gi-check{color:var(--ok-t);flex:none}
.lg-niv{--nc:#1F5FA8}
.lg-niv.cour{border-color:color-mix(in srgb,var(--nc) 45%,var(--line));box-shadow:0 4px 0 color-mix(in srgb,var(--nc) 22%,var(--line))}
/* les unités : un chemin, chaque étape reliée à la suivante */
.lg-us{position:relative;padding:2px 12px 10px}
.lg-u{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;color:var(--ink);border-radius:14px;padding:9px 8px;margin:0;font:inherit;cursor:pointer}
.lg-u:not(:last-child)::after{content:"";position:absolute;left:24px;top:44px;bottom:-9px;width:3px;border-radius:3px;background:var(--line)}
.lg-u.fait:not(:last-child)::after{background:color-mix(in srgb,var(--ok) 60%,var(--line))}
.lg-u .k{position:relative;z-index:1;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2.5px solid var(--line);font-family:var(--display);font-weight:800;font-size:.85rem;color:var(--soft)}
.lg-u:not(:disabled) .k{border-color:color-mix(in srgb,var(--nc) 55%,var(--line));color:var(--ink)}
.lg-u.fait .k{background:var(--ok);border-color:var(--ok);color:#fff}
.lg-u.cour{background:color-mix(in srgb,var(--nc) 9%,var(--card));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--nc) 40%,transparent)}
.lg-u.cour .k{background:var(--nc);border-color:var(--nc);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--nc) 22%,transparent)}
.lg-u .tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35;font-size:.95rem}
.lg-u small{color:var(--soft);font-size:.78rem}
.lg-u .sc{flex:none;font-weight:800;color:var(--ok-t);font-size:.82rem}
.lg-u i.sc{color:var(--nc);font-size:1rem}
.lg-u:disabled{cursor:default}.lg-u:disabled .tx{color:var(--soft)}
.lg-bas{display:flex;flex-direction:column;margin:26px 0 8px;border:2px solid var(--line);border-radius:20px;background:var(--card);overflow:hidden}
.lg-lien{display:flex;align-items:center;gap:12px;width:100%;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-weight:700;padding:15px 16px;cursor:pointer;text-align:left}
.lg-lien:first-child{border-top:0}
.lg-lien>i:first-child{color:var(--soft);font-size:1.1rem}
.lg-lien span{flex:1}

/* ---------- test de niveau ---------- */
.lg-intro{--lc:#2E7DD7;text-align:center;margin:4px 0 18px;padding:18px 16px 16px;border-radius:26px;background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--lc) 16%,var(--card)),var(--card) 70%);border:2px solid color-mix(in srgb,var(--lc) 25%,var(--line))}
.lg-intro .lg-drap{margin:0 auto 10px}
.lg-intro h2{font-family:var(--display);font-size:1.45rem;margin:4px 0 6px;line-height:1.2}
.lg-intro p{margin:6px 0 0;line-height:1.45}
.lg-intro-h{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}
.lg-intro-h .lg-drap{margin:0}
.lg-intro-h small{font-weight:800;color:var(--soft);font-size:.8rem;letter-spacing:.06em}
.lg-intro .lg-badge:not(.s){margin:0}
.lg-intro-dep,.lg-intro-test{padding-bottom:14px}
.lg-paliers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 6px;margin-top:10px;color:var(--soft)}
.lg-paliers .lg-badge.s{width:34px;height:34px;font-size:.8rem;border-radius:10px}
.lg-qbar{gap:10px}
.lg-qbar .lg-badge.s{width:38px;height:38px;font-size:.85rem}
.lg-qbar .sg-btn,.lg-qbar>button:last-child{flex:none}
.lg-qcard{text-align:left}
.lg-qcard .tag{display:inline-flex;align-items:center;gap:6px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.74rem;color:color-mix(in srgb,var(--sky) 80%,var(--ink))}
.lg-qcard h2{font-size:1.18rem;line-height:1.3;margin:6px 0 2px}
.lg-trans{margin:14px 0 0;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--sky) 10%,var(--card));line-height:1.45;font-weight:700;display:flex;gap:8px;align-items:baseline}
.lg-trans i{flex:none;color:var(--sky)}
.lg-res{--nc:#1F5FA8}
.lg-res p{color:var(--soft);margin:0;line-height:1.45}

/* ---------- lecteur audio (boutons d'écoute) ---------- */
.lg-ecout{display:flex;gap:12px;align-items:center;margin:14px 0 4px}
.lg-play{position:relative;flex:none;width:60px;height:60px;border-radius:50%;border:0;background:linear-gradient(150deg,#4A8FE0,#1F5FA8);color:#fff;display:grid;place-items:center;font-size:1.35rem;cursor:pointer;
  box-shadow:0 4px 0 #17497F,0 8px 16px rgba(31,95,168,.25);transition:transform .1s}
.lg-play:active{transform:translateY(3px);box-shadow:0 1px 0 #17497F}
.lg-play::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid #4A8FE0;opacity:0}
.lg-play.joue::after{animation:lgOnde 1.1s ease-out infinite}
@keyframes lgOnde{0%{opacity:.7;transform:scale(.92)}100%{opacity:0;transform:scale(1.35)}}
.lg-play.s{width:42px;height:42px;font-size:1rem;box-shadow:0 3px 0 #17497F}
.lg-play.s.alt{background:linear-gradient(150deg,#B57BE8,#7B3FD1);box-shadow:0 3px 0 #5A2BA0}
.lg-play.s.alt::after{border-color:#B57BE8}
.lg-lent{display:inline-flex;gap:8px;align-items:center;height:46px;padding:0 18px;border-radius:999px;border:2px solid color-mix(in srgb,#1F5FA8 35%,var(--line));background:var(--card);color:var(--ink);font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,#1F5FA8 22%,var(--line))}
.lg-lent i{color:#2E7DD7}
.lg-lent.joue{border-color:#2E7DD7;background:color-mix(in srgb,#2E7DD7 10%,var(--card))}
.lg .lg-ecout .btn.lg-lent{width:auto;margin:0}

/* ---------- une unité ---------- */
.lg-jsd{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px}
.lg-jsd li{display:flex;gap:12px;align-items:center;padding:10px 12px;border:2px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--lg-ombre)}
.lg-jsd li span{display:flex;flex-direction:column;min-width:0}
.lg-jsd b{font-family:var(--display);font-size:1.02rem;line-height:1.25;overflow-wrap:anywhere}
.lg-jsd small{color:var(--soft);font-size:.85rem}
.lg-etapes{list-style:none;padding:0;margin:0 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:10px;counter-reset:e}
.lg-etapes button{display:flex;gap:10px;align-items:center;width:100%;min-height:56px;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:16px;padding:8px 10px;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;text-align:left;box-shadow:var(--lg-ombre)}
.lg-etapes .ic{width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--sky) 14%,var(--card));color:var(--sky)}
.lg-etapes .fait{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.lg-etapes .fait .ic{background:var(--ok);color:#fff}
.lg-etapes .cour{border-color:var(--sky);box-shadow:0 4px 0 color-mix(in srgb,var(--sky) 35%,var(--line))}
.lg-etapes .cour .ic{background:var(--sky);color:#fff}
.lg-etapes .lk{margin-left:auto;color:var(--soft)}
/* en-tête d'une étape : 6 segments + consigne */
.lg-pas{display:flex;gap:6px;margin:2px 0 16px}
.lg-pas i{flex:1;height:10px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,var(--line))}
.lg-pas i.f{background:var(--ogre)}
.lg-pas i.c{background:linear-gradient(90deg,var(--ogre),var(--sun));box-shadow:0 0 0 3px color-mix(in srgb,var(--sun) 25%,transparent)}
.lg-cons{font-family:var(--display);font-size:1.12rem;line-height:1.3;margin:4px 0 16px;display:flex;gap:10px;align-items:center}
.lg-cons-e .ic{width:40px;height:40px;border-radius:13px;background:color-mix(in srgb,var(--sky) 14%,var(--card));color:var(--sky);font-size:1.15rem}
.lg-mini{display:flex;align-items:center;justify-content:flex-end;gap:10px;color:var(--soft);font-size:.85rem;font-weight:700;margin:0 0 10px}
.lg-mini-p{flex:1;display:flex;gap:4px}.lg-mini-p i{flex:1;max-width:28px;height:6px;border-radius:9px;background:var(--line)}.lg-mini-p i.f{background:var(--ogre)}.lg-mini-p i.c{background:var(--sun)}
.lg-sens{color:var(--soft);font-size:.92rem;margin:12px 0 0;text-align:center}
.lg-suite{margin-top:18px}
.lg-bravo{font-family:var(--display);color:var(--ok-t);display:flex;gap:8px;align-items:center;justify-content:center;font-size:1.1rem}

/* parler : la phrase dans une carte, le gros micro */
.lg-carte{background:var(--card);border:3px solid var(--ink);border-radius:24px;padding:18px;margin:0 0 6px;box-shadow:var(--shadow);text-align:center}
.lg-carte .lg-ecout{justify-content:center;margin:12px 0 0}
.lg-carte.q{border-width:2px;border-color:color-mix(in srgb,var(--sky) 40%,var(--line));background:color-mix(in srgb,var(--sky) 6%,var(--card))}
.lg-phrase{font-family:var(--display);font-size:1.38rem;line-height:1.35;margin:0;overflow-wrap:anywhere}
.lg-q{font-size:1.15rem;font-weight:700;line-height:1.4;margin:0;overflow-wrap:anywhere}
.lg-mic-z{display:grid;place-items:center;margin:26px 0 6px}
.lg-mic{position:relative;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;border:0;background:linear-gradient(150deg,#E05BB8,#B0287F);color:#fff;font-size:2.1rem;cursor:pointer;box-shadow:0 6px 0 #861F61,0 14px 26px rgba(176,40,127,.3);transition:transform .1s}
.lg-mic:active{transform:translateY(4px);box-shadow:0 2px 0 #861F61}
.lg-mic::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px dashed color-mix(in srgb,#C2389E 35%,transparent)}
.lg-mic.rec{background:linear-gradient(150deg,#F0645A,#B8322A);box-shadow:0 6px 0 #8A241E}
.lg-mic.rec::before{border:4px solid #F0645A;animation:lgOnde 1.2s ease-out infinite}
.lg-mic.stt{background:var(--soft);box-shadow:0 6px 0 color-mix(in srgb,var(--soft) 60%,#000);cursor:wait}
.lg-mic.stt::before{border-style:solid;border-color:var(--soft) transparent;animation:lgTourne 1s linear infinite}
@keyframes lgTourne{to{transform:rotate(1turn)}}
.lg-dit-moi{color:var(--soft);margin:18px 0 6px;text-align:center}
.lg-dit-moi span{color:var(--ink);font-weight:700}
.lg-mots{font-size:1.15rem;line-height:1.9;margin:0 0 10px;text-align:center}
.lg-mots span,.lg-mots mark{display:inline-block;padding:0 7px;border-radius:9px;margin:2px 0}
.lg-mots .ok{color:var(--ok-t);background:var(--ok-bg)}
.lg-mots mark{background:var(--ko-bg);color:var(--ko-t);text-decoration:underline wavy color-mix(in srgb,var(--ko) 60%,transparent);text-underline-offset:4px}
.lg-note{margin:12px 0 16px}
.feedback.lg-note.mid{background:var(--t-warn-bg,#FFF3D6);border-color:var(--t-warn,#E8A317)}
.feedback.lg-note .ogre{width:56px;height:56px}
.lg-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.lg .lg-duo .btn{margin:0 0 10px}

/* sons (version libre) */
.lg-son{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--line);background:var(--card);border-radius:18px;padding:14px;margin:0 0 12px}
.lg-son .ic{width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,#C2389E 14%,var(--card));color:#C2389E}
.lg-son b{font-family:var(--display)}
.lg-son p{margin:4px 0 0;color:var(--soft);line-height:1.4}
.lg-paires{display:grid;gap:10px;margin:16px 0 22px}
.lg-paire{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:18px;background:color-mix(in srgb,var(--sky) 5%,var(--card));border:2px solid var(--line)}
.lg-paire .m{display:flex;gap:10px;align-items:center;min-width:0}
.lg-paire b{font-family:var(--display);font-size:1.05rem}
.lg-paire .vs{color:var(--soft);font-weight:800;padding:0 4px}

/* mission (jeu de rôle) */
.lg-mis{position:relative;border:2px solid color-mix(in srgb,#E07A1F 40%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,#E07A1F 12%,var(--card)),var(--card));border-radius:22px;padding:16px 16px 14px 70px;margin:0 0 16px;min-height:74px}
.lg-mis .ic{position:absolute;left:14px;top:16px;width:42px;height:42px;border-radius:14px;background:#E07A1F;color:#fff;font-size:1.2rem}
.lg-mis b{font-family:var(--display);font-size:1.05rem}
.lg-mis p{margin:6px 0 0;line-height:1.45}
.lg-mis .lg-obj{margin:10px 0 0}
.lg-obj{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px}
.lg-obj li{display:flex;gap:10px;align-items:baseline;padding:2px 0;color:var(--soft);line-height:1.4}
.lg-obj li i{flex:none}
.lg-obj li.ok{color:var(--ok-t);font-weight:700}
.lg-chat{display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow-y:auto;padding:6px 2px 10px;scroll-behavior:smooth}
.lg-chat .me{position:relative;align-self:flex-end;max-width:82%;background:linear-gradient(150deg,#3A86D6,#2471AE);color:#fff;border-radius:20px 20px 6px 20px;padding:11px 14px;margin:0 6px 0 0;line-height:1.4;box-shadow:0 4px 12px rgba(36,113,174,.22);animation:bIn .3s ease both;transform-origin:100% 100%}
.lg-chat .me::after{content:"";position:absolute;right:-7px;bottom:0;width:14px;height:14px;background:#2471AE;clip-path:polygon(0 0,0 100%,100% 100%)}
.lg-chat .lui{display:flex;gap:8px;align-items:flex-end;max-width:94%}
.lg-chat .lui .f{flex:none;width:38px;height:38px}.lg-chat .lui .f svg{width:100%;height:100%}
.lg-chat .lui p{margin:0;line-height:1.42}
.lg-chat .lui p.tw{font-family:"Patrick Hand","Comic Sans MS",cursive;font-size:1.12rem}
.lg-chat .lui details{margin-top:6px;color:var(--soft);font-size:.88rem}.lg-chat .lui summary{cursor:pointer;font-weight:700}
.lg-chat .aide{margin-top:8px!important;padding-top:8px;border-top:1px dashed var(--line);color:var(--soft);font-size:.92rem}
.lg-chat .lg-tape{padding:12px 16px}
.lg-chat .corr{align-self:flex-end;max-width:85%;background:color-mix(in srgb,var(--sun) 12%,var(--card));border:2px dashed color-mix(in srgb,var(--sun) 60%,var(--line));border-radius:16px;padding:9px 13px;margin:0 6px 0 0;display:flex;flex-direction:column;gap:2px;line-height:1.4}
.lg-chat .corr small{color:var(--soft)}
.lg-chat .err{align-self:center;color:var(--soft);margin:0;font-size:.92rem;text-align:center}

/* fin d'unité */
.lg-fin{--nc:#1F5FA8;display:flex;flex-direction:column;align-items:center;gap:12px;margin:6px 0 20px;padding:20px 16px;border-radius:26px;background:radial-gradient(100% 100% at 50% 0%,color-mix(in srgb,var(--sun) 22%,var(--card)),var(--card) 70%);border:2px solid color-mix(in srgb,var(--sun) 40%,var(--line))}
.lg-fin-ic{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:2.2rem;color:#fff;background:linear-gradient(150deg,#FFC83D,#E8961A);box-shadow:0 5px 0 #B87410;animation:pop .5s ease both}
.lg-fin:not(.ok) .lg-fin-ic{background:linear-gradient(150deg,#8FB8E8,#2E7DD7);box-shadow:0 5px 0 #1F5FA8}
.lg-fin-e{display:flex;gap:8px}
.lg-fin-e i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--line);color:var(--soft);font-size:.95rem}
.lg-fin-e i.f{background:var(--ok);color:#fff}

/* ---------- accent ---------- */
.lg-semaine{display:flex;gap:12px;align-items:center;border:2px solid color-mix(in srgb,#C2389E 30%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,#C2389E 9%,var(--card)),var(--card));border-radius:22px;padding:16px;margin:0 0 14px}
.lg-semaine .ic,.lg-sonl .ic{width:42px;height:42px;border-radius:14px;background:#C2389E;color:#fff;font-size:1.2rem}
.lg-semaine .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lg-semaine b{font-family:var(--display)}
.lg-semaine small{color:var(--soft);line-height:1.4}
.lg-tend,.lg-sonl .lg-courbe{color:#2E7DD7}
.lg-courbe{width:110px;height:40px;flex:none}
.lg-sonl{display:flex;gap:12px;align-items:center;border:2px solid var(--line);background:var(--card);border-radius:18px;padding:12px 14px;margin:0 0 10px}
.lg-sonl .ic{background:color-mix(in srgb,#2E7DD7 14%,var(--card));color:#2E7DD7;width:38px;height:38px;border-radius:12px}
.lg-sonl.m{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.lg-sonl.m .ic{background:var(--ok);color:#fff}
.lg-sonl .tx{flex:1;min-width:0}
.lg-sonl b{font-family:var(--display)}
.lg-sonl small{color:var(--soft);display:block;font-size:.82rem}
.lg-sonl p{margin:4px 0 0;font-size:.9rem;color:var(--soft);line-height:1.4}
.lg-m{flex:none;color:var(--ok-t);font-weight:800;font-size:.85rem;display:flex;gap:4px;align-items:center}

/* ---------- me situer, réglages ---------- */
.lg-dix{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;justify-items:center;margin:10px auto 16px;max-width:280px}
.lg-dix i{width:40px;height:40px;border-radius:50%;background:var(--line);animation:pop .4s ease both;animation-delay:calc(var(--i)*60ms)}
.lg-dix i.ok{background:linear-gradient(150deg,#6DBE58,#3E7F31);box-shadow:0 3px 0 #2E5F25}
.lg-choix{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.lg-choix button{min-height:46px;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:10px 16px;font:inherit;font-weight:700;cursor:pointer;box-shadow:var(--lg-ombre)}
.lg-choix button.sel{border-color:var(--ogre);background:color-mix(in srgb,var(--ogre) 14%,var(--card));color:var(--ink)}
.lg-choix button.sel i{color:var(--ogre-d)}
.lg-choix button:disabled{opacity:.55;cursor:default;box-shadow:none}
.lg-demo-note{margin:10px 0 0;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--c,#2E7DD7) 10%,var(--card));color:var(--ink);font-weight:700;line-height:1.35}

/* exercices de l'unité (Exo) dans l'espace Langues */
.lg .exo-ch button{overflow-wrap:anywhere}
/* Valider : toujours bien séparé des options (quiz audio, test de niveau) */
button.btn[data-v]{display:block;width:100%;margin-top:26px}
.lg .opts{margin-bottom:0}

@media (max-width:340px){.lg-tuiles,.lg-etapes{grid-template-columns:1fr}.lg-tu{min-height:0}.lg-drap.g{width:46px;height:33px}.lg-dix{gap:8px}.lg-dix i{width:34px;height:34px}}
@media (prefers-reduced-motion:reduce){.lg .cm-corps>*,.lg-inl>*,.lg-dit p,.lg-chat .me,.lg-chat .lui>div,.lg-barre i,.lg-dix i,.lg-fin-ic{animation:none}
  .lg-go .i,.lg-charge .f,.lg-points i,.lg-play.joue::after,.lg-mic.rec::before,.lg-mic.stt::before{animation:none}}
/* départ : le drapeau et le nom de la langue dans la bulle d'Ogrelo */
.lg-dit-drap .lg-dd{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}
.lg-dit-drap .lg-dd>svg,.lg-dit-drap .lg-dd>img,.lg-dit-drap .lg-dd>span:first-child{grid-row:1;width:44px;height:44px;border-radius:12px;overflow:hidden;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.lg-dit-drap .lg-dd-n{font-family:var(--display);font-size:1.25rem;color:var(--lc)}
.lg-dit-drap .lg-dd p{grid-column:1/-1;margin:6px 0 0}
/* blocs de niveau A0…C2 : tuiles à ombre pleine, couleur du niveau */
.lg-niv{border:2px solid color-mix(in srgb,var(--nc) 55%,#fff)!important;border-radius:20px!important;box-shadow:0 5px 0 color-mix(in srgb,var(--nc) 75%,#000)!important;margin:0 0 16px!important;overflow:hidden;background:var(--sheet)}
.lg-niv>summary{background:linear-gradient(180deg,color-mix(in srgb,var(--nc) 92%,#fff),var(--nc));color:#fff;padding:14px 16px!important;font-weight:800}
.lg-niv>summary small{color:rgba(255,255,255,.88)!important}
.lg-niv>summary b{color:#fff}
.lg-niv>summary:active{transform:translateY(3px)}
.lg-niv.cour{box-shadow:0 5px 0 color-mix(in srgb,var(--nc) 75%,#000),0 0 0 4px color-mix(in srgb,var(--nc) 30%,transparent)!important}
.lg-niv.bloque{filter:grayscale(.85);opacity:.6}
.lg-niv.bloque>summary{pointer-events:none}
.lg-niv .lg-us{padding:12px}
/* départ : tuile « A0 · Niveau débutant » façon Duolingo (bleu, ombre pleine) */
.lg-l2[data-n="A0"]{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;border-radius:24px;padding:16px 18px;margin:0 0 20px;font:inherit;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,#3CC1FA,#1CB0F6);box-shadow:0 6px 0 #1288C4;transition:transform .08s,box-shadow .08s}
.lg-l2[data-n="A0"]:active{transform:translateY(4px);box-shadow:0 2px 0 #1288C4}
.lg-l2[data-n="A0"] .tx{flex:1;display:flex;flex-direction:column;gap:2px}
.lg-l2[data-n="A0"] .tx b{font-family:var(--display);font-size:1.7rem;line-height:1;color:#fff;letter-spacing:.02em}
.lg-l2[data-n="A0"] .tx small{color:rgba(255,255,255,.92)!important;font-weight:800;font-size:.95rem}
.lg-l2[data-n="A0"]>i{color:#fff;font-size:1.2rem;background:rgba(255,255,255,.22);width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
/* difficulté : petits piments rouges sur pastille blanche */
.lg-diff{display:inline-flex;gap:1px;vertical-align:middle;margin-left:6px;background:rgba(255,255,255,.92);border-radius:999px;padding:2px 6px;color:#E0251B}
.lg-diff svg{width:14px;height:14px}
.lg-niv>summary b,.lg-l2[data-n="A0"] .tx b{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.lg-niv>summary{text-shadow:0 1px 0 rgba(0,0,0,.18)}
.lg-l2[data-n="A0"]{background:linear-gradient(180deg,#5BC21A,#46A302)!important;box-shadow:0 6px 0 #2F7A00!important}
.lg-l2[data-n="A0"]:active{box-shadow:0 2px 0 #2F7A00!important}
/* départ : test de niveau en bleu (le vert reste au niveau A0) */
.lg-intro-dep~.lg-go,.lg-dit-drap~.lg-go{background:linear-gradient(180deg,#3CC1FA,#1CB0F6)!important;box-shadow:0 6px 0 #1288C4!important}
.lg-dit-drap~.lg-go .i{color:#1288C4!important}
.lg-l2[data-n="A0"]>i{color:#fff!important;opacity:1!important}
.lg-diff svg.off path{fill:#CBD1D9}.lg-diff svg{width:12px;height:12px}
/* en-tête de ma langue : le drapeau derrière le niveau (A0…) */
.lg-hero-fb{position:relative;flex:none;width:78px;height:56px;border-radius:14px;overflow:hidden;box-shadow:0 4px 0 rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.9)}
.lg-hero-fb>svg,.lg-hero-fb>span,.lg-hero-fb>img{position:absolute;inset:0;width:100%!important;height:100%!important;border-radius:0!important;box-shadow:none!important}
.lg-hero-fb b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:1.5rem;color:#fff;background:rgba(0,0,0,.28);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.lg-hero-h .tx b{font-size:1.5rem}
.lg-back{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);background:var(--card,#fff);color:var(--ink);font:inherit;font-weight:800;border-radius:999px;padding:8px 16px 8px 12px;margin:0 0 16px;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.lg-back:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
/* en-tête de ma langue : le drapeau en grand, en fond de la tuile */
.lg-hero{position:relative;overflow:hidden}
.lg-hero>*{position:relative;z-index:1}
.lg-hero>.lg-hero-drap{position:absolute;z-index:0;top:-10%;right:-12%;width:75%;height:120%;opacity:.22;transform:rotate(-8deg);pointer-events:none}
.lg-hero>.lg-hero-drap>*{width:100%!important;height:100%!important;border-radius:0!important;box-shadow:none!important}
.lg-hero>.lg-hero-drap svg{width:100%;height:100%}
.lg-intro-h small:empty{display:none}
/* en-tête de ma langue : le drapeau couvre toute la tuile, voile sombre pour lire le texte ; niveau en blanc, couleur de la langue */
.lg-hero>.lg-hero-drap{inset:0!important;top:0!important;right:0!important;width:100%!important;height:100%!important;opacity:1!important;transform:none!important}
.lg-hero>.lg-hero-drap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,40,.35),rgba(10,16,40,.72))}
.lg-hero>.lg-hero-drap>*,.lg-hero>.lg-hero-drap svg{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.lg-hero{background:var(--lc)!important}
.lg-hero .lg-hero-h .tx b,.lg-hero .lg-hero-d,.lg-hero small{text-shadow:0 2px 6px rgba(0,0,0,.45)}
.lg-hero .lg-hero-h .lg-badge{background:#fff!important;color:var(--lc)!important;border:0!important;box-shadow:0 4px 0 color-mix(in srgb,var(--lc) 60%,#000)!important;font-weight:900}
.lg-hero .lg-hero-h .lg-badge{background:rgba(255,255,255,.14)!important;color:#fff!important;border:2px solid rgba(255,255,255,.85)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-shadow:0 2px 4px rgba(0,0,0,.4)}
/* tuiles des langues : le drapeau en fond plein, voile sombre en bas pour lire le nom */
.lg-tuile{overflow:hidden;color:#fff!important}
.lg-tuile>*{position:relative;z-index:1}
.lg-tuile>.lg-t-fond{position:absolute;inset:0;z-index:0}
.lg-tuile>.lg-t-fond>*,.lg-tuile>.lg-t-fond svg{position:absolute!important;inset:0;width:100%!important;height:100%!important;border-radius:0!important;box-shadow:none!important;display:block}
.lg-tuile>.lg-t-fond::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,40,.05) 15%,rgba(10,16,40,.72))}
.lg-tuile{justify-content:flex-end}
.lg-tuile b,.lg-tuile .n,.lg-tuile small{color:#fff!important;text-shadow:0 2px 6px rgba(0,0,0,.55)}
.lg-tuile .lg-badge{background:rgba(255,255,255,.14)!important;color:#fff!important;border:2px solid rgba(255,255,255,.85)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lg-t-lock{z-index:2!important}
/* parcours : activité de chaque unité (icône) et légende, dans le niveau déplié */
.lg-legende{display:flex;flex-wrap:wrap;gap:6px 12px;margin:2px 4px 10px;color:var(--soft);font-size:.8rem;font-weight:700}
.lg-legende>span{display:inline-flex;align-items:center;gap:6px}
.lg-act{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:.85rem;color:var(--nc,#1F5FA8);background:color-mix(in srgb,var(--nc,#1F5FA8) 12%,var(--card))}
.lg-niv.bloque .lg-act{background:var(--line);color:var(--soft)}
@media (max-width:380px){.lg-act{width:24px;height:24px}.lg-niv .lg-u{gap:8px}.lg-niv .lg-u .tx{font-size:.9rem}}
.lg-cons-w{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 14px}
/* parcours : chemin façon Duolingo — fait = vert coché, « Tu es ici » = gros point qui pulse, la suite = gris */
.lg-us{position:relative}
.lg-us .lg-u{position:relative}
.lg-u .k{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:#fff;flex:none;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.lg-u.fait .k{background:#46A302;box-shadow:0 3px 0 #2F7A00}
.lg-u.fait .tx{opacity:.8}
.lg-u.cour{border:3px solid var(--nc,#46A302)!important;border-radius:18px;background:color-mix(in srgb,var(--nc,#46A302) 10%,var(--card,#fff))!important}
.lg-u.cour .k{width:44px;height:44px;background:var(--nc,#46A302);box-shadow:0 4px 0 color-mix(in srgb,var(--nc,#46A302) 65%,#000);animation:lgIci 1.8s ease-in-out infinite}
.lg-ici{display:inline-block;background:var(--nc,#46A302);color:#fff!important;font-weight:900;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 9px;margin:0 0 4px}
@keyframes lgIci{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.lg-u.cour .k{animation:none}}
.lg-niv.acquis>summary{background:linear-gradient(180deg,#5BC21A,#46A302)!important}
.lg-ok{width:30px;height:30px;border-radius:50%;background:#fff;color:#46A302;display:grid;place-items:center;flex:none}
.lg-niv>summary{display:flex!important;align-items:center;gap:14px;list-style:none}.lg-niv>summary::-webkit-details-marker{display:none}.lg-niv>summary>.lg-badge{flex:none}.lg-niv>summary>.tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left}.lg-niv>summary>i,.lg-niv>summary>.lg-ok{flex:none;margin-left:auto}
.lg-diff{background:none!important;padding:0!important;color:#FF3B2F;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}.lg-diff svg.off path{fill:rgba(255,255,255,.45)!important}.lg-l2 .lg-diff svg.off path,.lg-u .lg-diff svg.off path{fill:#CBD1D9!important}
/* étapes numérotées : 1, 2, 3… ; faites = vert + petite coche ; en cours = couleur du niveau ; la suite = grise et fermée */
.lg-u .k{position:relative}
.lg-u .k b{font-family:var(--display);font-weight:900;font-size:1rem;color:#fff}
.lg-u:not(.fait):not(.cour) .k{background:#E3E7EE}
.lg-u:not(.fait):not(.cour) .k b{color:#8A93A3}
.lg-k-ok{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:#fff;color:#46A302;font-size:.7rem;display:grid;place-items:center;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.lg-u.apres{opacity:.55}
.lg-u.cour .k b{font-size:1.15rem}
.lg-valide{display:inline-flex;align-items:center;gap:4px;background:#E7F6DA;color:#2F7A00!important;font-weight:900;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 9px;margin:0 0 4px;width:max-content}
.lg-niv>summary{position:relative}.lg-niv.bloque>summary>i.gi-cadenas{position:absolute;left:34px;top:8px;width:20px;height:20px;border-radius:50%;background:#fff;color:#5B6475;font-size:.62rem;display:grid;place-items:center;margin:0!important;box-shadow:0 1px 0 rgba(0,0,0,.2)}.lg-niv.bloque>summary>.tx{flex:1 1 100%}
.lg-bw{position:relative;flex:none;display:inline-block}.lg-bw-c{position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:50%;background:#fff;color:#5B6475;font-size:.5rem;display:grid;place-items:center;box-shadow:0 1px 0 rgba(0,0,0,.25)}

/* ---------- imagier (exercices en images de exo.js, écran « Imagier » de langues.js, défi) ----------
   Même allure que le quiz des fiches (.qcard, .opts / .opt, lettres A B C D) ; les 4 réponses deviennent des tuiles d'images 2 × 2. */
.xi-grille{grid-template-columns:1fr 1fr}
.opt.xi{position:relative;flex-direction:column;align-items:stretch;gap:6px;padding:8px;text-align:center;min-height:0}
.opt.xi .l{position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:10px;font-size:.9rem;z-index:1}
.opt.xi small{font-weight:700;font-size:.92rem;line-height:1.2}
.xi-img{display:block;width:100%;aspect-ratio:1;border-radius:12px;background:#fff;overflow:hidden}
.xi-img img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.xi-img.charge,.xi-img.vide{background:linear-gradient(100deg,var(--line) 30%,var(--card) 50%,var(--line) 70%);background-size:300% 100%;animation:xi-sc 1.3s linear infinite}
.xi-img.charge img{opacity:0}
.xi-img.vide{animation:none;opacity:.6}
@keyframes xi-sc{to{background-position:-150% 0}}
@media (prefers-reduced-motion:reduce){.xi-img.charge{animation:none}.xi-mm.faux{animation:none}}
.xi-grande{max-width:220px;margin:12px auto 0}
.xi-ecout{display:flex;align-items:center;gap:14px;margin-top:12px}
.xi-ecout b{font-size:1.15rem}
.xi-play{width:56px;height:56px;flex:none;border-radius:50%;border:0;background:var(--sky);color:#fff;font-size:1.4rem;display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer}
.xi-play:active{transform:translateY(2px);box-shadow:none}
.xi-memo-i{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.xi-memo-m{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.xi-mc,.xi-mm{border:3px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);cursor:pointer}
.xi-mc{padding:4px}
.xi-mm{padding:10px 8px;font:inherit;font-weight:700;min-height:48px}
.xi-mc.sel,.xi-mm.sel{border-color:var(--sky);box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 25%,transparent)}
.xi-mc.ok,.xi-mm.ok{border-color:var(--ok);background:var(--ok-bg)}
.xi-mc.ok{opacity:.75}
.xi-mm.faux{border-color:var(--ko);animation:xi-non .35s}
@keyframes xi-non{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* écran « Imagier » : un thème = 4 images d'aperçu */
.lg-img-niv{margin:6px 0 14px;display:flex;flex-wrap:wrap;gap:8px}
.lg-img-niv button{display:inline-flex;align-items:center;gap:8px}
.lg-img-ths{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;margin-bottom:18px}
.lg-img-th{display:flex;flex-direction:column;gap:6px;text-align:left;border:3px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);padding:10px;box-shadow:var(--shadow);font:inherit;cursor:pointer}
.lg-img-th b{font-size:.98rem;line-height:1.2}
.lg-img-th small{color:var(--soft);font-size:.82rem}
.lg-img-th.attente{box-shadow:none;cursor:default}
.lg-img-th.attente b{color:var(--soft)}
.lg-img-ap{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.lg-img-ap .xi-img{border-radius:8px}
/* défi : réponses en images */
.df-c .xi-img{width:min(28vw,120px);margin:0 auto}
.df-choix.xi-df{grid-template-columns:1fr 1fr}
.xi-grille{margin-bottom:28px!important}.xi-grille~.btn,.xi-grille+.btn,.xi-grille~.exo-ok2,.xi-grille~.exo-valide{margin-top:28px!important}.exo-ok2,.exo-valide{margin-top:28px!important}
.xi-voir{border:2px dashed var(--line);background:none;color:var(--soft);border-radius:999px;padding:6px 12px;font:inherit;font-size:.88rem;cursor:pointer}
.xi-sous{font-size:1.15rem}
.xi-memory{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.xi-mcard{aspect-ratio:1;border:3px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);padding:4px;display:grid;place-items:center;font:inherit;font-weight:700;font-size:.85rem;line-height:1.15;cursor:pointer;overflow:hidden}
.xi-mcard .xi-img{border-radius:8px}
.xi-mcard.ok{border-color:var(--ok);background:var(--ok-bg)}
.xi-dos{display:grid;place-items:center;width:70%;opacity:.85}
.xi-dos svg{width:100%;height:auto}
p.xi-sous.c{text-align:center;margin:8px 0 0}
.xi-grille+.btn.exo-ok2,.opts+.btn.exo-ok2,.opts+.xi-grande+.btn.exo-ok2{margin-top:26px}
/* en-têtes des exercices en images : petits et légers (allure du quiz des Cours) ; la question « Où est … ? » reste en grand */
.xi-carte .tag{display:inline-block;font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--sky) 14%,var(--card));color:var(--ink)}
.xi-carte h2{font-size:.95rem;font-weight:400;font-family:inherit;line-height:1.35;margin-top:8px}
.xi-carte h2.xi-q{font-size:1.3rem;font-weight:800;font-family:var(--display)}
/* phrase à trous, série éclair */
.xi-phrase{font-size:1.25rem;font-weight:700;text-align:center;margin:12px 0 0;line-height:1.6}
.xi-trou{display:inline-block;min-width:5.5em;border-bottom:3px dashed var(--line);margin:0 .25em;padding:0 .2em;color:var(--sky)}
.xi-trou.pris{border-bottom-style:solid;border-color:var(--sky)}
.xi-chrono{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:10px}
.xi-chrono i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--ok),var(--sun));transform-origin:left;animation:xi-temps linear forwards}
@keyframes xi-temps{to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.xi-chrono i{animation-timing-function:steps(6)}}
.xi-eclair-ch{grid-template-columns:1fr 1fr}
.xi-eclair-bilan{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.xi-eclair-bilan span{display:flex;flex-direction:column;gap:2px;border:3px solid var(--line);border-radius:12px;padding:3px;text-align:center}
.xi-eclair-bilan span.ok{border-color:var(--ok)}.xi-eclair-bilan span.ko{border-color:var(--ko)}
.xi-eclair-bilan small{font-size:.75rem;font-weight:700}

/* ---------- feuille : moments ponctuels (mission, fin d'unité, point accent, me situer) par-dessus l'écran ---------- */
body.lg-feuille-ouverte{overflow:hidden}
.lg-feuille{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;justify-content:flex-end;background:color-mix(in srgb,#000 45%,transparent);padding-top:calc(10px + env(safe-area-inset-top,0px));animation:lgFondu .18s ease-out}
.lg-feuille-in{display:flex;flex-direction:column;width:100%;height:100%;max-width:560px;margin:0 auto;background:var(--paper);color:var(--ink);border-radius:24px 24px 0 0;overflow:hidden;box-shadow:0 -6px 30px rgba(0,0,0,.18);animation:lgMonte .26s cubic-bezier(.2,.8,.2,1)}
.lg-feuille-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 10px;position:relative}
.lg-feuille-top::before{content:"";position:absolute;left:50%;top:6px;width:40px;height:5px;margin-left:-20px;border-radius:9px;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.lg-feuille-top b{font-family:var(--display);font-size:1.15rem;line-height:1.25}
.lg-feuille-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 16px}
.lg-feuille-bas{flex:none;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--line);background:var(--paper)}
.lg-feuille-bas:empty{display:none}
.lg-feuille .btn{display:block;width:100%;margin:0 0 10px}
.lg-feuille-bas .btn:last-child{margin-bottom:0}
@media (min-width:600px){.lg-feuille{justify-content:center;padding:24px 16px}.lg-feuille-in{height:auto;max-height:min(860px,92vh);border-radius:26px;box-shadow:0 20px 60px rgba(0,0,0,.3)}.lg-feuille-top::before{display:none}}
@keyframes lgFondu{from{opacity:0}to{opacity:1}}
@keyframes lgMonte{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.lg-feuille,.lg-feuille-in{animation:none}}

/* mission : la scène, « Ton objectif » (objectif → phrase modèle), les actions */
.lg-scene{display:flex;gap:12px;align-items:flex-start;border:2px solid color-mix(in srgb,#E07A1F 40%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,#E07A1F 12%,var(--card)),var(--card));border-radius:20px;padding:14px;margin:4px 0 14px}
.lg-scene .ic{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#E07A1F;color:#fff;font-size:1.2rem}
.lg-scene small{display:block;font-weight:800;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb,#E07A1F 75%,var(--ink))}
.lg-scene p{margin:3px 0 0;font-family:var(--display);font-size:1.12rem;line-height:1.3}
.lg-feuille .lg-dit{margin:4px 0 16px}
.lg-buts{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.lg-buts li{display:flex;gap:12px;align-items:center;padding:12px;border:2px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--lg-ombre);transition:border-color .2s,background .2s}
.lg-buts .coche{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2.5px solid var(--line);color:var(--soft);font-size:.9rem}
.lg-buts li.ok{border-color:color-mix(in srgb,var(--ok) 55%,var(--line));background:color-mix(in srgb,var(--ok) 8%,var(--card))}
.lg-buts li.ok .coche{background:var(--ok);border-color:var(--ok);color:#fff;animation:lgPop .35s ease}
.lg-buts .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lg-buts .but{font-weight:700;line-height:1.35}
.lg-buts .mod{display:flex;gap:6px;align-items:baseline;color:var(--sky,#2E7DD7)}
.lg-buts .mod i{font-size:.75rem;flex:none}
.lg-buts .mod b{font-family:var(--display);font-size:1.08rem;color:var(--ink);overflow-wrap:anywhere}
.lg-buts small{color:var(--soft);font-size:.85rem}
.lg-buts .lg-play{flex:none}
@keyframes lgPop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:none}}
.lg-go-mis{margin:4px 0 12px}
.lg-teaser{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:2px dashed var(--line);background:transparent;color:var(--soft);border-radius:16px;padding:12px 14px;margin:4px 0 8px;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer}
.lg-teaser i{flex:none;color:#C99A00}
.lg-mis-n{display:flex;gap:6px;align-items:center;font-weight:800;color:var(--soft);font-size:.92rem}
.lg-but-1{font-family:var(--display);font-size:1.15rem;line-height:1.3;margin:0 0 10px}
/* jouer avec quelqu'un de ma famille : les phrases en grand */
.lg-grandes{display:grid;gap:12px;margin:0 0 8px}
.lg-grande{display:flex;flex-direction:column;gap:6px;padding:16px;border:2px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--lg-ombre)}
.lg-grande small{color:var(--soft);font-weight:700;font-size:.85rem}
.lg-grande b{font-family:var(--display);font-size:1.6rem;line-height:1.2;overflow-wrap:anywhere}
.lg-grande .sens{color:var(--soft)}
.lg-grande .act{display:flex;gap:10px;align-items:center;margin-top:6px}
.lg-dit-ok{display:inline-flex;gap:8px;align-items:center;height:46px;padding:0 18px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:800;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.lg-grande.ok{border-color:color-mix(in srgb,var(--ok) 55%,var(--line));background:color-mix(in srgb,var(--ok) 8%,var(--card))}
.lg-grande.ok .lg-dit-ok{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--ok) 60%,#000)}
.lg-feuille .lg-chat{max-height:none}
.lg-l2.lg-l2-row{flex-direction:row;align-items:center;gap:14px}
/* intro dunité : même tuile que len-tête de la langue (drapeau en fond, voile sombre, texte blanc) */
.lg-intro-u{position:relative;overflow:hidden;border-radius:22px;padding:18px 16px!important;color:#fff;background:var(--lc);box-shadow:0 5px 0 color-mix(in srgb,var(--lc) 60%,#000);margin-bottom:18px}
.lg-intro-u>*{position:relative;z-index:1}
.lg-intro-u>.lg-hero-drap{position:absolute;inset:0;z-index:0}
.lg-intro-u>.lg-hero-drap svg,.lg-intro-u>.lg-hero-drap>*{position:absolute;inset:0;width:100%!important;height:100%!important;border-radius:0!important;box-shadow:none!important}
.lg-intro-u>.lg-hero-drap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,40,.45),rgba(10,16,40,.78))}
.lg-intro-u h2,.lg-intro-u p,.lg-intro-u b{color:#fff!important;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.lg-intro-u .lg-badge{background:rgba(255,255,255,.14)!important;color:#fff!important;border:2px solid rgba(255,255,255,.85)!important;box-shadow:none!important}
/* parler : plus d air au-dessus de la phrase à dire */
.lg-mic-z+.lg-aide{margin-top:14px}
.lg-aide.c+*{margin-top:26px!important}