/* Edu'Books : compléments au design « Mixte » de tiimboX (css/tiimbo-mixte.css),
   pour les écrans propres au prototype (lecture, QCM, comptes). */

.screen{display:none}
.screen.on{display:block;animation:pgIn .25s ease}
@keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
body.mx{min-height:100vh;margin:0}
html{-webkit-text-size-adjust:100%}
body.no-nav #nav{display:none}
.mx-page{background:transparent}
.d-none{display:none!important}

/* Accueil */
.mx-mod{cursor:pointer;border-width:1px;border-style:solid;font:inherit;min-width:0;width:100%}
.mx-mod.soon{opacity:.7}
.mx-mod .track{width:100%;height:5px;border-radius:5px;background:var(--track);margin-top:10px;overflow:hidden}
.mx-mod .track i{display:block;height:100%;border-radius:5px;background:var(--c)}
.mx-ring circle.line{transition:stroke-dashoffset .6s ease}
.mx-ok{background:var(--t-success)!important}

/* Pages : ruban court */
.mx-hero .mx-sub i{font-size:14px;vertical-align:-2px}
.mx-hero .bk-head{display:flex;gap:14px;align-items:center;margin-top:12px}
.mx-hero .bk-head h1{margin-top:0;font-size:21px}
.bk-ico{width:64px;height:78px;border-radius:10px 14px 14px 10px;flex:none;display:grid;place-items:center;font-size:32px;
  background:color-mix(in srgb,var(--t-on-primary) 20%,transparent);color:var(--t-on-primary);box-shadow:inset 4px 0 0 rgba(0,0,0,.12)}

/* Bandeau d'information */
.mx-info{display:flex;gap:10px;padding:12px;border-radius:12px;font-size:12.5px;line-height:1.5;margin:14px 20px 0;
  background:color-mix(in srgb,var(--t-nav-2) 14%,var(--t-card));color:color-mix(in srgb,var(--t-nav-2) 55%,#000)}
.mx-info i{font-size:18px;flex:none}
.mx-info b{font-weight:600}

/* Barre de progression dans une carte */
.mx-prog{padding:14px}
.mx-prog .row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--t-title)}
.mx-prog .row b{color:var(--t-primary);font-weight:600}
.mx-prog .bar{height:6px;border-radius:6px;background:var(--track);margin:10px 0 12px;overflow:hidden}
.mx-prog .bar i{display:block;height:100%;border-radius:6px;background:var(--t-primary);transition:width .4s}
.mx-prog .mx-btn + .mx-btn{margin-top:10px}

/* Segments à 3 choix */
.mx-seg.three{grid-template-columns:repeat(3,1fr)}

/* Lecture */
.rd-page{position:relative;overflow:hidden;padding:20px 18px 22px;font-size:15.5px;line-height:1.75;color:var(--t-text)}
.rd-page .k{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t-primary);background:var(--p50);padding:3px 10px;border-radius:99px}
.rd-page h2{font-size:21px;font-weight:600;color:var(--t-title);margin:10px 0 8px;position:relative}
.rd-page p{margin-bottom:12px!important;position:relative}
.rd-page mark{background:#FFF1C2;padding:0 3px;border-radius:4px}
.rd-page .formula{position:relative;font-weight:600;font-size:19px;text-align:center;padding:10px;margin:4px 0 14px;border-radius:12px;background:var(--p50);color:var(--t-primary)}
.rd-page .t2{color:var(--t-muted)}
.rd-page .sm{font-size:13px}
.rd-wm{position:absolute;inset:-60px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;transform:rotate(-30deg);pointer-events:none;
  font-size:12px;font-weight:600;color:color-mix(in srgb,var(--t-primary) 9%,transparent);white-space:nowrap}
.rd-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--t-muted);margin:12px 22px 6px}
.rd-bar{height:5px;border-radius:5px;background:var(--track);margin:0 22px;overflow:hidden}
.rd-bar i{display:block;height:100%;background:var(--t-primary);border-radius:5px}
.mx-nav.rd a:disabled,.mx-nav.rd a.off{opacity:.35;pointer-events:none}

/* QCM */
.q-text{padding:16px;font-size:17px;font-weight:600;line-height:1.4;color:var(--t-title)}
.q-ans{display:flex;flex-direction:column;gap:10px;margin:14px 20px 0}
.q-ans button{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border-radius:14px;border:0;cursor:pointer;text-align:left;font:inherit;font-size:14.5px;font-weight:500;
  color:var(--t-title);background:var(--t-card);box-shadow:var(--shadow);transition:transform .12s}
.q-ans button:active{transform:scale(.99)}
.q-ans .l{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;font-weight:600;font-size:13px;color:var(--t-primary);background:var(--p50)}
.q-ans button.ok{box-shadow:inset 0 0 0 2px var(--t-success),var(--shadow);background:color-mix(in srgb,var(--t-success) 8%,var(--t-card))}
.q-ans button.ok .l{background:var(--t-success);color:#fff}
.q-ans button.ko{box-shadow:inset 0 0 0 2px var(--t-alert),var(--shadow);background:color-mix(in srgb,var(--t-alert) 7%,var(--t-card))}
.q-ans button.ko .l{background:var(--t-alert);color:#fff}
.q-ans button.dim{opacity:.5}
.q-why{display:none;gap:10px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.5;margin:14px 20px 0}
.q-why.on{display:flex;animation:pgIn .25s ease}
.q-why i{font-size:20px;flex:none}
.q-why.good{background:color-mix(in srgb,var(--t-success) 12%,var(--t-card));color:color-mix(in srgb,var(--t-success) 70%,#000)}
.q-why.bad{background:color-mix(in srgb,var(--t-alert) 10%,var(--t-card));color:color-mix(in srgb,var(--t-alert) 80%,#000)}
.q-why b{display:block;font-weight:600}
.q-foot{margin:18px 20px 0}
.q-result{text-align:center;padding:26px 18px}
.q-result .big{width:84px;height:84px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:40px;color:var(--t-primary);background:var(--p50)}
.q-result h3{font-size:22px;font-weight:600;color:var(--t-title)}
.q-result p{font-size:13px;color:var(--t-muted);margin-top:6px!important;line-height:1.5}

/* États (paiement, accès activé) */
.mx-done{text-align:center;padding:28px 18px 22px}
.mx-done .big{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:40px;color:var(--t-success);background:color-mix(in srgb,var(--t-success) 14%,var(--t-card))}
.mx-done .big.wait{color:var(--t-primary);background:var(--p50);position:relative}
.mx-done .big.wait::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid transparent;border-top-color:var(--t-primary);animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mx-done h3{font-size:19px;font-weight:600;color:var(--t-title)}
.mx-done p{font-size:13px;color:var(--t-muted);margin-top:6px!important;line-height:1.55}

/* Paiement */
.pay-opt{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border:0;cursor:pointer;background:none;text-align:left;font:inherit;border-bottom:1px solid var(--line)}
.pay-opt:last-child{border-bottom:0}
.pay-opt .lg{width:38px;height:38px;border-radius:11px;color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center;flex:none}
.pay-opt .txt{flex:1}
.pay-opt b{display:block;font-size:13.5px;font-weight:600;color:var(--t-title)}
.pay-opt small{font-size:11px;color:var(--t-muted)}
.pay-opt .radio{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--t-muted) 50%,transparent);flex:none}
.pay-opt.on .radio{box-shadow:inset 0 0 0 6px var(--t-primary)}
.pay-sum{padding:6px 16px}
.pay-sum div{display:flex;justify-content:space-between;padding:9px 0;font-size:13.5px;color:var(--t-text);border-bottom:1px solid var(--line)}
.pay-sum div:last-child{border-bottom:0;font-size:16px;font-weight:600;color:var(--t-title)}

/* QR code */
.qr-cam{margin:18px 20px 0;border-radius:18px;background:#16204A;padding:22px 0;text-align:center;color:#E6ECFB}
.qr-vf{position:relative;width:210px;aspect-ratio:1;margin:0 auto 14px;border-radius:20px;background:rgba(255,255,255,.04)}
.qr-vf i.c{position:absolute;width:40px;height:40px;border:4px solid #8DA8F5}
.qr-vf i.c:nth-of-type(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:18px 0 0 0}
.qr-vf i.c:nth-of-type(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 18px 0 0}
.qr-vf i.c:nth-of-type(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 18px}
.qr-vf i.c:nth-of-type(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 18px 0}
.qr-vf .scan{position:absolute;left:16px;right:16px;height:2px;background:#C7D4FF;box-shadow:0 0 12px #8DA8F5;animation:scan 2.2s ease-in-out infinite alternate}
.qr-vf video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px}
@keyframes scan{from{top:16px}to{top:190px}}
.qr-cam b{display:block;font-size:15px;font-weight:600;color:#fff}
.qr-cam small{display:block;font-size:12px;opacity:.75;margin:4px 20px 0}
.mx-err{font-size:12.5px;font-weight:500;color:var(--t-alert);margin:-4px 2px 10px;min-height:16px}

/* Inscription (pages aux couleurs de connexion) */
.ae-auth .ae-badge img{width:62px;height:62px;border-radius:16px}
.ae-auth .ae-hint{font-size:13px;color:var(--ae-muted);margin:-6px 0 18px;line-height:1.5}
.ae-classes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.ae-classes button{height:52px;border-radius:12px;border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:500;color:var(--ae-ink);background:var(--ae-blue-50);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.ae-classes button small{font-size:10.5px;font-weight:400;color:var(--ae-muted)}
.ae-classes button.on{background:#fff;color:var(--ae-blue);box-shadow:inset 0 0 0 1.5px var(--ae-blue)}
.ae-err{font-size:12.5px;color:var(--ae-red);margin:-6px 2px 12px;min-height:16px}
.ae-demo{display:flex;gap:8px;margin-top:16px;padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.5;background:#FFF4DE;color:#8A5A10}
.ae-demo i{font-size:16px;flex:none}

/* Code à 4 chiffres (feuille) */
.pin-dots{display:flex;gap:16px;justify-content:center;margin:12px 0 18px}
.pin-dots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--t-primary)}
.pin-dots i.on{background:var(--t-primary)}
.pin-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pin-keys button{height:52px;border-radius:12px;border:0;cursor:pointer;font:inherit;font-size:20px;font-weight:500;color:var(--t-text);
  background:color-mix(in srgb,var(--t-text) 7%,var(--t-card))}
.pin-keys button:active{background:var(--p100)}
.pin-keys .x{visibility:hidden}
.pin-keys .soft{background:var(--p50);color:var(--t-primary)}

/* Notification courte, comme toastr en haut au centre */
.toast{position:fixed;left:50%;top:14px;z-index:2000;transform:translate(-50%,-20px);opacity:0;max-width:92%;background:#1E2A5A;color:#fff;font-size:13px;
  padding:11px 15px;border-radius:14px;box-shadow:0 12px 30px -10px rgba(0,0,0,.35);transition:all .3s;pointer-events:none;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.net{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:1031;background:#1E2A5A;color:#fff;font-size:11.5px;font-weight:500;padding:5px 12px;border-radius:99px;display:none;white-space:nowrap}
.net.on{display:block}

/* ── Boutons flottants : menu déroulant sur l'accueil, retour / accueil ailleurs ── */
.mx-dial,.mx-dial-veil,.mx-fabs{display:none}
body.on-home .mx-dial{display:flex}
body.on-home .mx-dial-veil{display:block}
body.with-fabs .mx-fabs{display:flex}
.mx-fabs .back{order:0}
.mx-fabs .home{order:1}

/* ── Menu gauche (sans Bootstrap) ── */
.mx-side{position:fixed;top:0;left:0;bottom:0;z-index:1050;transform:translateX(-105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.mx-side.open{transform:none;visibility:visible}
body.mx-side-open .mx-veil{opacity:1;pointer-events:auto}
.mx-side-head .mx-side-av{color:var(--t-on-primary)}
.mx-side-year > i{font-size:18px;opacity:.8}
.mx-side-list button.danger{color:var(--t-alert)}

/* ── Citation de motivation sous le bandeau ── */
.mx-mile.quote{cursor:pointer;align-items:flex-start}
.mx-mile.quote .gem{margin-top:1px}
.mx-mile.quote #home-mile{display:block;font-style:italic;line-height:1.4}
.mx-mile.quote small{display:block;font-size:11px;opacity:.8;margin-top:2px}
.mx-mile.quote.swap > span:last-child{animation:pgIn .35s ease}

/* ── Drapeau du Burkina Faso dans le cercle des pages de connexion ── */
.ae-auth .ae-badge.bf{padding:0;overflow:hidden;background:#fff}
.bf-flag{display:block;width:100%;height:100%;border-radius:50%;transform-origin:50% 60%;animation:bfSway 4.5s ease-in-out infinite}
@keyframes bfSway{0%,100%{transform:rotate(-2.5deg) scale(1.03)}50%{transform:rotate(2.5deg) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.bf-flag{animation:none}}

/* ── Couvertures des manuels et annales ── */
.mx-cover{width:38px;height:54px;flex:none;object-fit:cover;border-radius:5px;box-shadow:0 4px 10px -4px rgba(20,30,70,.45),inset 0 0 0 1px rgba(0,0,0,.06);background:var(--p50)}
.bk-ico.has-cover{width:78px;height:112px;padding:0;overflow:hidden;background:none;box-shadow:0 10px 22px -8px rgba(0,0,0,.45)}
.bk-ico.has-cover img{width:100%;height:100%;object-fit:cover;display:block}