/* Apprendre l'hébreu et le grec bibliques */
.appr [hidden]{display:none!important}
.appr-exl a,.appr-var a{text-decoration:none}
.appr h1{margin:4px 0 8px}
.appr-dek{color:var(--ink-2);max-width:640px}
.appr-langs{display:flex;gap:8px;margin:18px 0}
.appr-kpi .card{display:flex;flex-direction:column;gap:2px}
.appr-n{font:800 2rem var(--f-title,inherit);color:var(--lapis);line-height:1.1}
.appr-obj{margin-top:16px}
.appr-obj-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:10px}
.appr-bar{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.appr-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lapis),var(--gold));border-radius:inherit;transition:width .5s ease}
.appr-nj{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--ink-2)}
.appr-nj input{width:64px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.appr-prog{text-align:center;margin-bottom:10px}
.appr-scene{perspective:1200px;max-width:560px;margin:0 auto}
.appr-carte{position:relative}
.appr-carte.anim{animation:appr-in .32s ease-out}
.appr-carte.anim.tourne .appr-dos{animation:appr-flip .4s ease-out}
.appr-carte.anim.sort{animation:appr-out .22s ease-in forwards}
.appr-face{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;min-height:260px;justify-content:center;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 20px;box-shadow:0 6px 24px rgba(20,30,60,.08);color:var(--ink);font:inherit}
.appr-avant{cursor:pointer}
.appr-avant:hover{border-color:var(--lapis)}
.appr-avant:focus-visible{outline:3px solid var(--lapis);outline-offset:3px}
.appr-carte.tourne .appr-avant{display:none}
.appr-mot{font-size:clamp(2.6rem,9vw,4rem);line-height:1.25;color:var(--lapis)}
.appr-mot.grk{font-family:var(--f-text)}
.appr-mot.sm{font-size:2rem}
.appr-tr{font-size:1.3rem;color:var(--ink-2)}
.appr-gl{font-size:1.2rem;font-weight:600}
.appr-ex{max-width:480px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.appr-or{font-size:1.15rem;margin:0 0 6px}
.appr-or mark,.appr-texte mark{background:var(--lapis-soft);color:inherit;border-radius:4px;padding:0 2px}
.appr-fr{font-style:italic;color:var(--ink-2);margin:0 0 4px;font-size:.95rem}
.appr-lien{font-weight:600}
.appr-ecoute{padding:5px 12px;font-size:.85rem}
.appr-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px auto 0;max-width:560px}
.appr-btns .btn{flex:1 1 140px;justify-content:center}
.appr-q0{color:#b23b3b}
.appr-fini{text-align:center;max-width:560px;margin:0 auto}
.appr-fini-t{font-size:1.2rem;font-weight:700;margin:0}
.appr-lect-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.appr-lect-bar select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;max-width:100%}
.appr-leg{display:flex;gap:6px;margin-left:auto;font-size:.85rem}
.appr-pc{font-size:1.05rem}
.appr-texte{font-size:1.25rem;line-height:2.1}
.appr-texte.grk{font-family:var(--f-text)}
.appr-v sup{font:600 .7rem var(--f-body);color:var(--ink-3);margin:0 3px}
.appr-k{background:color-mix(in srgb,var(--olive,#5c7a2a) 22%,transparent);border-radius:4px;padding:0 3px}
.appr-e{background:color-mix(in srgb,var(--gold) 26%,transparent);border-radius:4px;padding:0 3px}
/* étapes */
.appr-etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:4px 0 22px;counter-reset:e}
.appr-etape{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;min-height:58px}
.appr-etape b{font-size:.95rem}
.appr-etape span{font-size:.8rem;color:var(--ink-3)}
.appr-etape:hover{border-color:var(--lapis)}
.appr-etape.on{border-color:var(--lapis);background:var(--lapis-soft);box-shadow:inset 0 -3px 0 var(--lapis)}
.appr-etape.fait b::after{content:" ✓";color:var(--olive,#5c7a2a)}
.appr-etape:focus-visible,.appr-l:focus-visible,.appr-w:focus-visible{outline:3px solid var(--lapis);outline-offset:2px}
.appr-intro{margin-bottom:8px}
.appr-intro p{margin:0 0 8px}.appr-intro p:last-child{margin:0}
.appr-suite{display:flex;justify-content:flex-end;margin:22px 0 4px}
/* alphabet */
.appr-alpha{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.appr-l{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 4px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;direction:ltr}
.appr-l span{font-size:2.1rem;line-height:1.25;color:var(--lapis)}
.appr-l span.grk{font-size:1.6rem}
.appr-l b{font-size:.85rem}.appr-l i{font-style:normal;font-size:.78rem;color:var(--ink-3)}
.appr-l:hover,.appr-l.sel{border-color:var(--lapis);background:var(--lapis-soft)}
.appr-l.ok::after{content:"✓";position:absolute;top:4px;right:7px;font-size:.75rem;color:var(--olive,#5c7a2a);font-weight:700}
.appr-detail{margin-top:14px}
.appr-det-h{display:flex;gap:18px;align-items:flex-start}
.appr-det-h h3{margin:0 0 4px}.appr-det-h p{margin:0 0 6px}
.appr-det-g{font-size:3.4rem;line-height:1.1;color:var(--lapis);min-width:70px;text-align:center}
.appr-det-g.grk{font-size:2.4rem}
.appr-var,.appr-exl{margin:8px 0 0;padding-left:20px}
.appr-var li,.appr-exl li{margin:4px 0}
.appr-var .heb,.appr-exl .heb{font-size:1.35rem}
.appr-detail .label{margin:12px 0 0}
/* voyelles */
.appr-voy{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:12px}
.appr-vc{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.appr-vc>span:first-child{font-size:2.2rem;line-height:1.35;color:var(--lapis)}
.appr-vc b{font-size:1.1rem}.appr-vc span{font-size:.85rem}.appr-vc i{font-size:.78rem;color:var(--ink-3);font-style:normal}
/* quiz */
.appr-quiz{max-width:560px;margin:14px auto 0}
.appr-qg{min-height:150px}
.appr-qg .appr-mot{font-size:clamp(3rem,12vw,4.6rem)}
.appr-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.appr-opts .btn{justify-content:center;min-height:48px}
.appr-opts .btn.bon,.appr-opts .btn.bon:disabled{border-color:var(--olive,#5c7a2a);background:color-mix(in srgb,var(--olive,#5c7a2a) 20%,var(--surface));opacity:1}
.appr-opts .btn.faux{border-color:#b23b3b;background:color-mix(in srgb,#b23b3b 14%,var(--surface))}
.appr-opts .btn:disabled{cursor:default;opacity:.75}
.appr-retour{text-align:center;font-weight:600;margin:10px 0 0}
.appr-retour.bon{color:var(--olive,#5c7a2a)}.appr-retour.faux{color:#b23b3b}
/* cartes : options */
.appr-opt{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;margin-bottom:14px}
.appr-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.appr-seg button{border:0;background:var(--surface);color:var(--ink);font:600 .88rem var(--f-body);padding:8px 12px;cursor:pointer}
.appr-seg button+button{border-left:1px solid var(--line)}
.appr-seg button.on{background:var(--lapis);color:var(--surface)}
.appr-chk{display:inline-flex;gap:6px;align-items:center;font-size:.9rem;color:var(--ink-2);cursor:pointer}
.appr-kbd{text-align:center;margin-top:12px}
.appr-gl-r{font-size:1.6rem;max-width:460px}
@media (hover:none){.appr-kbd{display:none}}
/* lecture */
.appr-w{all:unset;cursor:pointer;border-radius:4px;padding:0 2px}
.appr-w:hover{background:var(--lapis-soft)}
.appr-w.sel{outline:2px solid var(--lapis)}
.appr-texte.inter{line-height:1.4}
.appr-il{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top;margin:4px 3px;padding:2px 4px}
.appr-il i{font:italic .78rem var(--f-text);color:var(--ink-2)}
.appr-il small{font:.72rem var(--f-body);color:var(--ink-3);max-width:110px;text-align:center;white-space:normal;line-height:1.2}
.appr-texte.inter .appr-v sup{vertical-align:top}
.appr-sel{position:relative;border:1px solid var(--lapis);background:var(--lapis-soft);border-radius:12px;padding:12px 40px 12px 14px;margin-bottom:12px}
.appr-sel p{margin:6px 0 0}.appr-sel .chips{margin-top:10px}
.appr-sel-m{font-size:1.6rem}
.appr-sel-x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:1.4rem;line-height:1;color:var(--ink-2);cursor:pointer;padding:4px 8px}
@keyframes appr-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes appr-out{to{opacity:0;transform:translateX(-24px)}}
@keyframes appr-flip{from{opacity:0;transform:rotateY(-80deg)}to{opacity:1;transform:none}}
@media (max-width:720px){.appr-etapes{grid-template-columns:1fr 1fr}.appr-alpha{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}.appr-l span{font-size:1.8rem}.appr-det-h{gap:12px}.appr-det-g{font-size:2.6rem;min-width:50px}.appr-voy{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.appr-opts{grid-template-columns:1fr}.appr-kpi{grid-template-columns:1fr}.appr-face{min-height:220px}.appr-leg{margin-left:0}}
@media (prefers-reduced-motion:reduce){.appr-carte,.appr-dos,.appr-bar i{animation:none!important;transition:none!important}}
