:root{
  --bg:#0B1020; --bg2:#121A36; --panel:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.08); --ink:#EAF0FF; --ink2:#D5DDF3; --muted:#97A3C6;
  --gold:#FFC24B; --arc1:#5EEAD4; --arc2:#818CF8;
  --good:#34D399; --bad:#FB7185;
  --disp:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --body:'Sora','Segoe UI',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{touch-action:manipulation}
/* tout ce qui se touche ne doit jamais se sélectionner comme du texte (sensation app native) */
.chip,.tchip,.dcard,.btn,.choice,.nav-btn,.lg-tab,.dg-pill,.m-row,.m-cta,.fact-row,.stat,.ring,.streak,.quota-pill,.install-hint{user-select:none;-webkit-user-select:none}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:15px; line-height:1.55; overflow-x:hidden;
}
/* ---------- écran de démarrage ---------- */
#splash{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .45s ease}
#splash .cx-orb{margin-bottom:6px}
#splash .sp-brand{font-family:var(--disp);font-weight:700;letter-spacing:.26em;font-size:19px}
#splash .sp-brand b{background:linear-gradient(90deg,var(--arc1),var(--arc2));-webkit-background-clip:text;background-clip:text;color:transparent}
#splash .sp-sub{font-size:10.5px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase}
#splash.off{opacity:0;pointer-events:none}

#bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(600px 400px at 50% -10%, rgba(129,140,248,.24), transparent 60%),
    radial-gradient(500px 340px at 85% 110%, rgba(94,234,212,.14), transparent 60%);
}
/* aurore vivante : quatre nappes de lumière qui dérivent lentement */
#bgfx::before{content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(46% 38% at 18% 22%, rgba(94,234,212,.17), transparent 62%),
    radial-gradient(42% 38% at 84% 12%, rgba(129,140,248,.20), transparent 62%),
    radial-gradient(38% 34% at 12% 78%, rgba(240,171,252,.10), transparent 62%),
    radial-gradient(50% 44% at 60% 92%, rgba(255,194,75,.09), transparent 62%);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2.5%,2%,0) scale(1.07)}}
/* grain photographique très léger : la texture des interfaces haut de gamme */
#bgfx::after{content:"";position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
.wrap{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:0 16px 96px}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 10px;margin:0 -16px;position:sticky;top:0;z-index:20;background:rgba(11,16,32,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05)}
.brand{font-family:var(--disp);font-weight:700;letter-spacing:.22em;font-size:15px}
.brand b{background:linear-gradient(90deg,var(--arc1),var(--arc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hd-sub{font-size:10.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.streak{display:flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:600;font-size:15px;background:var(--panel);border:1px solid var(--line);padding:6px 11px;border-radius:999px}
.streak .fl{display:inline-block;transform-origin:50% 85%;animation:flick 1.7s ease-in-out infinite}
.streak .fl svg{width:17px;height:17px;display:block;color:var(--gold)}
.quota-pill .pi{display:inline-block;vertical-align:-3px;margin-right:2px}
.quota-pill .pi svg{width:15px;height:15px}
.dbi{display:inline-flex;align-items:center;margin-right:7px}
.dbi svg{width:16px;height:16px;flex-shrink:0}
.dbar .l1{align-items:center}
@keyframes flick{
  0%,100%{transform:scale(1) rotate(-2deg)}
  30%{transform:scale(1.12) rotate(2deg)}
  55%{transform:scale(.96) rotate(-1deg)}
  80%{transform:scale(1.06) rotate(1.5deg)}
}

/* ---------- generic ---------- */
.card{--tint:#818CF8;position:relative;overflow:hidden;border:1px solid color-mix(in srgb, var(--tint) 24%, var(--line));border-radius:18px;padding:16px;
  background:
    radial-gradient(130% 90% at 12% 0%, color-mix(in srgb, var(--tint) 15%, transparent), transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
  box-shadow:0 8px 30px -10px color-mix(in srgb, var(--tint) 30%, transparent)}
/* teintes signature par carte : chaque écran respire une couleur */
#facts-card,#trophy-card{--tint:#FFC24B}
#rev-break{--tint:#5EEAD4}
#account-card{--tint:#97A3C6}
.card::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);pointer-events:none}
.eyebrow{font-family:var(--disp);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.btn{display:block;width:100%;border:0;cursor:pointer;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.04em;color:#081018;background:linear-gradient(90deg,var(--arc1),var(--arc2));padding:14px;border-radius:13px;transition:transform .12s,opacity .12s}
.btn{box-shadow:0 8px 22px rgba(94,234,212,.14)}
.btn.gold{box-shadow:0 8px 22px rgba(255,194,75,.2)}
.btn.ghost{box-shadow:none}
.btn:active{transform:scale(.97)}
.btn.ghost{background:rgba(255,255,255,.055);color:var(--ink);border:1px solid rgba(255,255,255,.11)}
.btn.gold{background:linear-gradient(90deg,#FFD27A,var(--gold));}
.btn[disabled]{opacity:.45;cursor:default}
.small{font-size:12.5px;color:var(--muted)}
.hide{display:none!important}

/* ---------- ring hero ---------- */
.hero{display:flex;flex-direction:column;align-items:center;padding:18px 0 6px}
/* la carte de niveau : le héros de l'accueil parle le même langage que les
   cartes illustrées — verre teinté or, horizon, étoiles d'ambiance */
.lvlcard{--tint:#FFC24B;display:flex;align-items:center;gap:18px;margin-top:14px;
  padding:20px 18px;border-radius:20px;position:relative;overflow:hidden;
  background:
    radial-gradient(2.2px 2.2px at 86% 18%, color-mix(in srgb, var(--tint) 85%, transparent), transparent),
    radial-gradient(1.6px 1.6px at 70% 72%, color-mix(in srgb, var(--tint) 55%, transparent), transparent),
    radial-gradient(1.8px 1.8px at 94% 58%, color-mix(in srgb, var(--tint) 45%, transparent), transparent),
    radial-gradient(130% 160% at 12% 0%, color-mix(in srgb, var(--tint) 18%, transparent), rgba(255,255,255,.025));
  border:1px solid color-mix(in srgb, var(--tint) 38%, transparent);
  box-shadow:0 10px 40px -6px color-mix(in srgb, var(--tint) 32%, transparent)}
.lvlcard::before{content:"";position:absolute;left:-12%;right:-12%;bottom:-46px;height:64px;
  border-radius:50%;border-top:1px solid color-mix(in srgb, var(--tint) 34%, transparent);opacity:.8}
.lvlcard .ring{width:104px;height:104px;flex:none}
.lvlcard .ring-lvl{font-size:30px}
.lvlcard .ring::before{inset:7px}
.lvlcard .ring::after{inset:-7px}
.lvl-side{flex:1;min-width:0}
.lvlcard .title-line{margin-top:0;font-size:18px}
.lvlcard .xp-line{margin-top:4px}
.lvlcard .quota-pill{display:inline-block;margin:11px 0 0;padding:6px 12px;font-size:11.5px}
/* la page Réviser respire le teal, comme une carte de domaine */
#scr-review .hero{margin:14px 0;border-radius:22px;padding:22px 14px 18px;position:relative;overflow:hidden;
  background:
    radial-gradient(130% 100% at 12% 0%, rgba(94,234,212,.15), transparent 55%),
    radial-gradient(130% 100% at 100% 100%, rgba(129,140,248,.11), transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(17,24,50,.5));
  border:1px solid color-mix(in srgb, var(--arc1) 24%, transparent);
  box-shadow:0 14px 40px -22px rgba(94,234,212,.3)}
.ring{--p:0;width:150px;height:150px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(#FFD27A calc(var(--p)*0.5%), var(--gold) calc(var(--p)*1%), rgba(255,255,255,.07) 0);
  box-shadow:0 0 46px rgba(255,194,75,.16), inset 0 0 24px rgba(255,194,75,.10)}
.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle at 50% 32%, #17204485, transparent 70%), var(--bg2);border:1px solid var(--line)}
/* couronne de graduations autour de l'anneau — la signature KORTEK */
.ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,255,.20) 0deg 0.7deg, transparent 0.7deg 6deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px))}
.ring-in{position:relative;text-align:center}
.ring-lvl{font-family:var(--disp);font-weight:700;font-size:44px;line-height:1}
.ring-lab{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.title-line{margin-top:12px;font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.06em}
.xp-line{margin-top:3px;font-size:12.5px;color:var(--muted)}

/* ---------- cartes de domaines ---------- */
.dom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
/* séparation Culture / Scolaire de l'accueil, en écho à celle de l'inscription */
.dom-sec{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:8px 0 -2px;
  font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.dom-sec::after{content:"";flex:1;height:1px;background:var(--line)}
.dom-sec:first-child{margin-top:0}
/* cartes de domaines illustrées */
/* .dcard est un <button> : on annule l'apparence native sans toucher au design */
.dcard{--dc:var(--arc1);position:relative;cursor:pointer;border-radius:18px;overflow:hidden;padding-bottom:12px;
  display:block;width:100%;text-align:inherit;font:inherit;color:inherit;-webkit-appearance:none;appearance:none;
  background:linear-gradient(165deg, color-mix(in srgb, var(--dc) 14%, #111832), #0D1329 70%);
  border:1px solid color-mix(in srgb, var(--dc) 28%, transparent);
  transition:transform .15s}
.dcard:active{transform:scale(.96)}
.dcard .da svg{width:100%;display:block;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--dc) 55%, transparent))
         drop-shadow(0 0 16px color-mix(in srgb, var(--dc) 28%, transparent))}
.dcard .di{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:2px 13px 0}
.dcard .nm{font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard .lv{font-size:10px;color:var(--gold);font-family:var(--disp);flex-shrink:0}
.dcard .bar{position:absolute;bottom:0;left:0;height:3px;border-radius:0 99px 99px 0;background:linear-gradient(90deg, color-mix(in srgb, var(--dc) 55%, transparent), var(--dc))}
.dcard.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:118px;
  border-style:dashed;color:var(--muted);background:none;padding-bottom:0}
.dcard.add .ico svg{width:24px;height:24px}
.dcard.add .nm{font-family:var(--disp);font-size:11px;font-weight:600}
.dcard.in{animation:hexin .6s cubic-bezier(.3,1.36,.5,1) backwards}
/* variante onboarding : les mêmes cartes, avec un état sélectionné lumineux */
.dcard.ob{padding-bottom:11px;opacity:.9;transition:opacity .18s, border-color .18s, box-shadow .18s}
.dcard.ob .ob-check{position:absolute;top:9px;right:9px;width:23px;height:23px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#0B1020;
  background:var(--dc);opacity:0;transform:scale(.4);transition:opacity .18s, transform .22s cubic-bezier(.3,1.5,.5,1)}
.dcard.ob.sel{opacity:1;border-color:color-mix(in srgb, var(--dc) 75%, transparent);
  box-shadow:0 12px 36px -16px color-mix(in srgb, var(--dc) 60%, transparent)}
.dcard.ob.sel .ob-check{opacity:1;transform:none}
.ico svg{display:block}

/* ---------- session overlay ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:var(--bg);overflow-y:auto;display:none}
.overlay.on{display:block}
.ov-wrap{max-width:520px;margin:0 auto;padding:16px 16px 60px;position:relative}
.ov-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.x{border:0;background:var(--panel);border:1px solid var(--line);color:var(--muted);width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer}

/* ---------- chargement « cerveau en éveil » ---------- */
.loader2{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  /* centré dans l'espace réellement disponible sous l'en-tête de session */
  min-height:calc(100vh - 190px);
  min-height:calc(100dvh - 190px)}
.loader2{gap:30px}
.ld-msg{font-size:14.5px;color:var(--ink2);letter-spacing:.01em;min-height:22px;transition:opacity .3s}
.ld-dots{display:flex;gap:7px}
.ld-dots i{width:6px;height:6px;border-radius:50%;background:var(--dc,var(--arc1));opacity:.3;animation:ldBounce 1.3s ease-in-out infinite}
.ld-dots i:nth-child(2){animation-delay:.18s}
.ld-dots i:nth-child(3){animation-delay:.36s}
@keyframes ldBounce{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:1;transform:translateY(-5px)}}

/* ---------- choix du mode ---------- */
.mode-pick{display:flex;flex-direction:column;gap:14px;padding-top:26px}
.mode-pick>.eyebrow{margin-bottom:6px}
.mode-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(94px,112px) minmax(0,1fr);align-items:center;gap:16px;width:100%;
  min-height:128px;padding:14px;text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  color:var(--ink);font:inherit;-webkit-appearance:none;appearance:none;background:#101621;border:1px solid color-mix(in srgb,var(--dc) 24%,var(--line));border-radius:20px;
  box-shadow:0 16px 34px -26px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.035);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .2s,background-color .2s,box-shadow .2s}
.mode-card:active{transform:scale(.985)}
.mc-art{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:96px;overflow:hidden;
  color:var(--dc);background:rgba(7,11,18,.7);border:1px solid color-mix(in srgb,var(--dc) 16%,var(--line));border-radius:15px;pointer-events:none}
.mc-art svg{display:block;width:118%;max-width:none;height:auto;max-height:96px}
.mc-copy{position:relative;display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:6px}
.mc-t{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.25;letter-spacing:-.015em}
.mc-new{display:inline-flex;align-items:center;min-height:20px;padding:2px 8px;font-style:normal;font-size:8.5px;font-weight:700;line-height:1;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dc);background:color-mix(in srgb,var(--dc) 10%,transparent);border:1px solid color-mix(in srgb,var(--dc) 38%,transparent);border-radius:99px}
.mc-d{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---------- carte-fait : le moment « carte gagnée » ---------- */
.fact-won{margin:16px 0 4px}
.fact-card{position:relative;overflow:hidden;margin-top:8px;border-radius:20px;padding:26px 22px 20px;text-align:center;
  background:linear-gradient(160deg, color-mix(in srgb, var(--dc) 14%, #101830), #0C1226 72%);
  border:1px solid color-mix(in srgb, var(--dc) 45%, transparent);
  box-shadow:0 10px 34px color-mix(in srgb, var(--dc) 22%, transparent);
  animation:factIn .85s cubic-bezier(.3,1.3,.4,1)}
@keyframes factIn{0%{opacity:0;transform:perspective(700px) rotateX(50deg) translateY(28px) scale(.9)}55%{opacity:1}100%{opacity:1;transform:none}}
.fc-shine{position:absolute;top:0;bottom:0;width:55%;left:-80%;transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  animation:shineSweep 1.2s .55s ease forwards}
@keyframes shineSweep{to{left:135%}}
.fc-dom{display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--disp);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.fc-dom svg{width:15px;height:15px}
.fc-txt{font-size:17.5px;line-height:1.62;color:var(--ink);font-weight:600;margin:14px 0 16px}
.fc-brand{font-family:var(--disp);font-weight:700;letter-spacing:.22em;font-size:11px;color:var(--muted)}
.fc-brand b{background:linear-gradient(90deg,var(--arc1),var(--arc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.fact-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.fact-row:last-child{border-bottom:0}
.fr-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.fr-t{flex:1;font-size:12.5px;color:var(--ink2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fr-share{flex-shrink:0;opacity:.6;font-size:13px}

/* ---------- parcours ---------- */
.mode-pick .mode-card{animation:chIn .45s cubic-bezier(.25,.9,.3,1) backwards}
.mode-pick .mode-card:nth-of-type(1){animation-delay:.05s}
.mode-pick .mode-card:nth-of-type(2){animation-delay:.13s}
.mode-pick .mode-card:nth-of-type(3){animation-delay:.21s}
.path-track{display:block;width:100%;height:4px;margin-top:4px;overflow:hidden;background:rgba(255,255,255,.1);border-radius:99px}
.path-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--dc) 68%,#fff),var(--dc))}
@media (max-width:380px){
  .mode-card{grid-template-columns:88px minmax(0,1fr);gap:13px;min-height:118px;padding:12px}
  .mc-art{min-height:88px}
  .mc-art svg{width:126%}
  .mc-t{font-size:16.5px}
  .mc-d{font-size:12px;line-height:1.45}
}
.syl{padding-left:22px;display:flex;flex-direction:column;gap:9px}
.syl li{font-size:13.5px;color:var(--ink2);line-height:1.5}
.syl li::marker{color:var(--dc);font-family:var(--disp);font-weight:600}
.trophy-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.trophy-row:last-child{border-bottom:0}
.tr-ico{color:var(--gold);flex-shrink:0}
.tr-ico svg{width:18px;height:18px;display:block}
.tr-t{flex:1;font-weight:600;font-size:13.5px}
.tr-d{font-family:var(--disp);font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* ---------- récit : bouton voix, pause ---------- */
.topic-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.voice-btn{flex-shrink:0;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s,background .2s}
.voice-btn svg{width:19px;height:19px}
.voice-btn.on{color:var(--dc);border-color:color-mix(in srgb, var(--dc) 50%, transparent);background:color-mix(in srgb, var(--dc) 12%, transparent)}
.scard.tall{min-height:250px;font-size:20px;line-height:1.7}
.pause-badge{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:var(--disp);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}

/* ---------- leçon en cartes (story) ---------- */
.sbars{display:flex;gap:6px;margin:4px 0 16px}
.sbars i{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.12);transition:background .35s;overflow:hidden;display:block}
.sbars i b{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--arc1),var(--arc2))}
.sbars i.full{background:linear-gradient(90deg,var(--arc1),var(--arc2))}
.sbars.auto i.full{background:rgba(255,255,255,.12)}
.sbars.auto i.full b{width:100%!important;background:var(--dc)}
.sbars.auto i.cur b{background:var(--dc)}
.scard{position:relative;overflow:hidden;border-radius:22px;padding:32px 22px;min-height:210px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:19px;line-height:1.68;color:var(--ink);cursor:pointer;user-select:none;-webkit-user-select:none;
  background:
    radial-gradient(130% 100% at 12% 0%, color-mix(in srgb, var(--dc) 14%, transparent), transparent 56%),
    radial-gradient(130% 100% at 100% 100%, color-mix(in srgb, var(--dc) 7%, transparent), transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb, var(--dc) 26%, transparent);
  box-shadow:0 16px 48px -24px color-mix(in srgb, var(--dc) 50%, transparent)}
/* braises : quelques particules du domaine montent doucement dans la carte */
.scard .fp{position:absolute;bottom:-6px;left:var(--fx,20%);width:4px;height:4px;border-radius:50%;
  background:var(--dc);opacity:0;pointer-events:none;
  animation:ember var(--fd,8s) linear var(--fdel,0s) infinite}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.5}55%{transform:translate(9px,-130px)}100%{transform:translate(-7px,-240px);opacity:0}}
/* schéma dessiné par l'IA, dans la couleur du domaine */
.sc-in{display:block;width:100%}
.sc-fig{display:block;width:100%;max-width:330px;margin:18px auto 0;color:var(--dc);
  animation:figIn .55s cubic-bezier(.25,.9,.3,1) both}
.sc-fig.hide{display:none}
.sc-fig svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--dc) 35%, transparent))}
.sc-fig text{fill:currentColor;stroke:none;font-family:var(--disp)}
/* la légende : LA phrase qui dit ce que la figure montre */
.sc-cap{display:block;margin:10px auto 0;max-width:300px;text-align:center;
  font-size:12.5px;line-height:1.5;color:var(--ink);opacity:.72}
/* la figure se construit sous les yeux : barres qui poussent, courbe qui se
   trace, éléments en cascade. L'état de base = l'état final : si les
   animations sont coupées (accessibilité), tout est visible d'emblée. */
.sc-fig .fbar{transform-box:fill-box;transform-origin:left center;
  animation:figBar .7s cubic-bezier(.25,.9,.3,1) both}
@keyframes figBar{from{transform:scaleX(.02)}}
.sc-fig .ffade{transform-box:fill-box;animation:figFade .55s cubic-bezier(.25,.9,.3,1) both}
@keyframes figFade{from{opacity:0;transform:translateY(5px)}}
.sc-fig .fline{animation:figLine 1.1s .1s cubic-bezier(.4,0,.2,1) both}
@keyframes figLine{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
.sc-fig .farea{animation:figArea .6s .75s ease-out both}
@keyframes figArea{from{opacity:0}}
/* la question-carte : six continents à toucher, taillés pour le pouce */
.map-wrap{margin-top:16px}
.map-q{width:100%;height:auto;display:block;color:var(--dc);
  filter:drop-shadow(0 0 12px color-mix(in srgb, var(--dc) 25%, transparent))}
.map-q path{fill:color-mix(in srgb, currentColor 13%, transparent);
  stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;cursor:pointer;
  transition:fill .22s;transform-box:fill-box;transform-origin:center;
  animation:figFade .5s cubic-bezier(.25,.9,.3,1) both}
@media (hover:hover){.map-q path:not(.done):hover{fill:color-mix(in srgb, currentColor 32%, transparent)}}
.map-q path:not(.done):active{fill:color-mix(in srgb, currentColor 40%, transparent)}
.map-q path.done{cursor:default}
.map-q path.ok{fill:color-mix(in srgb, var(--good) 45%, transparent);stroke:var(--good)}
.map-q path.ko{fill:color-mix(in srgb, var(--bad) 45%, transparent);stroke:var(--bad);animation:mapShake .4s}
@keyframes mapShake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}


@keyframes figIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
/* révélation du texte : chaque mot arrive en cascade, les chiffres et citations s'illuminent */
.scard .w{display:inline-block;animation:wIn .34s cubic-bezier(.2,.7,.3,1) both}
.scard .w.key{color:var(--dc);font-weight:600;text-shadow:0 0 16px color-mix(in srgb, var(--dc) 40%, transparent)}
@keyframes wIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes cardin{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
#scard-txt{position:relative;z-index:1}
.taphint{text-align:center;margin-top:14px;animation:hintpulse 1.6s ease-in-out infinite}
@keyframes hintpulse{0%,100%{opacity:.4}50%{opacity:1}}
.lesson-topic{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.25;margin:6px 0 12px}
.qnum{font-family:var(--disp);font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.qtxt{font-family:var(--disp);font-weight:600;font-size:17.5px;line-height:1.4;margin:8px 0 14px;animation:fade .4s cubic-bezier(.2,.8,.2,1) backwards}
/* les réponses arrivent en escalier */
#choices .choice{animation:chIn .4s cubic-bezier(.25,.9,.3,1) backwards}
@keyframes chIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* la question glisse en place, chaque réponse porte sa lettre */
.qwrap{animation:qIn .4s cubic-bezier(.25,.9,.3,1)}
@keyframes qIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
/* la question vit dans une carte-héros teintée */
.qcard{position:relative;overflow:hidden;border-radius:20px;padding:22px 18px;margin:12px 0 16px;
  background:
    radial-gradient(130% 100% at 12% 0%, color-mix(in srgb, var(--dc) 14%, transparent), transparent 56%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid color-mix(in srgb, var(--dc) 26%, transparent);
  box-shadow:0 14px 40px -22px color-mix(in srgb, var(--dc) 45%, transparent)}
.qcard .qtxt{margin:0;font-size:18px;line-height:1.45}
/* réponses plus généreuses, pressées elles s'illuminent */
#choices .choice{display:flex;align-items:center;gap:12px;padding:15px 15px;border-radius:14px;
  background:
    radial-gradient(120% 120% at 8% 0%, color-mix(in srgb, var(--dc) 5%, transparent), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))}
#choices .choice:active{border-color:color-mix(in srgb, var(--dc) 55%, transparent);transform:scale(.98)}
/* barre de progression épaisse à pointe lumineuse */
#session .qbar i{position:relative;overflow:visible}
#session .qbar i::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--dc);box-shadow:0 0 12px var(--dc)}
.ch-l{width:27px;height:27px;border-radius:9px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:12.5px;color:var(--dc);
  background:color-mix(in srgb, var(--dc) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--dc) 26%, transparent)}
.choice.ok .ch-l{background:var(--good);border-color:transparent;color:#081018}
.choice.ko .ch-l{background:var(--bad);border-color:transparent;color:#1C0B10}
/* XP de session qui grossit en direct */
.sxp{font-family:var(--disp);font-weight:700;font-size:12.5px;color:var(--gold)}
.sxp.pop{animation:sxpPop .38s cubic-bezier(.3,1.5,.5,1)}
@keyframes sxpPop{50%{transform:scale(1.35)}}
/* écran de fin de défi : toi contre l'autre cerveau */
.vs-row{display:flex;align-items:stretch;justify-content:center;gap:14px;margin:18px 0 12px}
.vs-side{min-width:100px;padding:14px 12px;border-radius:16px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line)}
.vs-side.me{border-color:color-mix(in srgb, var(--dc) 50%, transparent);
  background:
    radial-gradient(130% 100% at 50% 0%, color-mix(in srgb, var(--dc) 14%, transparent), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:0 10px 30px -16px color-mix(in srgb, var(--dc) 55%, transparent)}
.vs-side b{font-family:var(--disp);font-size:31px;font-weight:700;line-height:1}
.vs-side b i{font-style:normal;font-size:15px;color:var(--muted)}
.vs-side span{display:block;font-size:10.5px;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.07em;
  max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-mid{align-self:center;font-family:var(--disp);font-weight:700;font-size:13px;color:var(--muted)}
/* compteur de cartes de leçon */
.tr-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.cc{font-family:var(--disp);font-size:11px;font-weight:600;color:var(--dc);letter-spacing:.08em;
  border:1px solid color-mix(in srgb, var(--dc) 36%, transparent);border-radius:99px;padding:4px 10px;white-space:nowrap}
/* le soulignement du titre s'étire à l'ouverture */
.lesson-topic::after{animation:ulGrow .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes ulGrow{from{width:0}to{width:46px}}
.choice{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:13px 14px;margin-bottom:10px;font-family:var(--body);font-size:14.5px;cursor:pointer;transition:border-color .12s}
.choice:active{transform:scale(.985)}
.choice.ok{border-color:var(--good);background:rgba(52,211,153,.12);animation:okpop .35s ease}
.choice.ko{border-color:var(--bad);background:rgba(251,113,133,.12)}
.choice.shake{animation:shake .4s ease}
.choice[disabled]{cursor:default}
@keyframes okpop{0%{transform:scale(1)}45%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
.qnum-row{display:flex;justify-content:space-between;align-items:center}
.combo{font-family:var(--disp);color:var(--gold);font-weight:700;font-size:13px;display:inline-flex;gap:4px;align-items:center}
.combo svg{width:14px;height:14px}
.combo.pop{animation:pop .3s ease}
.combo-line{text-align:center;color:var(--gold);font-family:var(--disp);font-size:13px;margin-top:2px}
.teaser-card{border-color:rgba(255,194,75,.3)}
.daily{margin:0 0 14px;padding:12px 14px}
.dg-row{display:flex;gap:8px;flex-wrap:wrap}
.dg-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:5px 11px}
.dg-pill svg{width:13px;height:13px}
.dg-pill.ok{color:var(--good);border-color:rgba(52,211,153,.4)}
.dg-pill.gold{color:var(--gold);border-color:rgba(255,194,75,.4)}
.dg-pill.ice{color:#9ED8FF;border-color:rgba(158,216,255,.4)}
.report-link{text-align:center;margin-top:22px}
.report-link a{color:var(--muted);font-size:12.5px;text-decoration:none}
.dg-teaser{margin-top:9px;font-size:12.5px;color:var(--muted)}
.qbar{height:3px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:6px 0 14px}
.qbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--arc1),var(--arc2));transition:width .45s cubic-bezier(.2,.8,.2,1)}
.explain{border-left:3px solid var(--arc2);padding:10px 12px;background:rgba(129,140,248,.08);border-radius:0 10px 10px 0;font-size:13.5px;color:var(--ink2);margin:6px 0 14px}
.explain.ai{border-left-color:var(--gold);background:rgba(255,194,75,.07);animation:fade .35s ease}
.explain.ai b{font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:4px}
.tutor-btn{position:relative}
.tutor-btn .ld-dots{display:flex}
.res-xp{font-family:var(--disp);font-weight:700;font-size:52px;color:var(--gold);text-align:center;animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.res-line{text-align:center;color:var(--muted);margin:4px 0 22px}

/* ---------- level up ---------- */
#levelup{position:fixed;inset:0;z-index:70;background:rgba(6,9,20,.97);display:none;align-items:center;justify-content:center}
#levelup.on{display:flex}
#lv-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lv-box{text-align:center;padding:30px;position:relative}
/* le nombre au cœur de l'orbe lors d'une célébration */
.lv-orb-wrap{position:relative;width:150px;height:150px;margin:0 auto 12px;animation:pop .55s cubic-bezier(.3,1.4,.5,1)}
.lv-orb-wrap .cx-orb{position:absolute;inset:0}
/* le chiffre sous la mascotte : grand, doré, lumineux — le visage reste visible */
.lv-big{font-family:var(--disp);font-weight:700;font-size:58px;line-height:1;margin:0 0 8px;
  background:linear-gradient(180deg,#FFEECB,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(255,194,75,.5));animation:pop .55s cubic-bezier(.3,1.4,.5,1)}
.lv-t{font-family:var(--disp);font-weight:700;letter-spacing:.24em;font-size:13px;color:var(--gold);text-transform:uppercase}
.lv-name{font-family:var(--disp);font-weight:600;font-size:20px;margin:8px 0 22px}

/* ---------- stats ---------- */
.stat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:14px 0}
.stat{--tint:#818CF8;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;padding:13px 10px;text-align:center;
  background:
    radial-gradient(140% 110% at 50% 0%, color-mix(in srgb, var(--tint) 13%, transparent), transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025))}
.stat:nth-child(1){--tint:#FFC24B}
.stat:nth-child(2){--tint:#5EEAD4}
.stat:nth-child(3){--tint:#FB7185}
.stat b{display:block;font-family:var(--disp);font-size:22px;font-weight:700}
.stat span{font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.dbar{margin-bottom:14px}
.dbar .l1{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.dbar .l1 b{font-family:var(--disp)}
.dbar .tr{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.dbar .fi{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--arc1),var(--arc2));transition:width .6s ease}

/* ---------- ligue ---------- */
.lg-tabs{display:flex;gap:8px;margin-top:4px}
.lg-tab{flex:1;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.05em;padding:10px;border-radius:12px;cursor:pointer}
.lg-tab.active{color:var(--ink);border-color:var(--arc1);background:rgba(94,234,212,.08)}
.lg-row{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--line)}
.lg-row:last-child{border-bottom:0}
.lg-row.me{background:linear-gradient(90deg,rgba(94,234,212,.10),transparent);border-radius:10px;padding-left:8px;padding-right:8px}
.lg-rank{font-family:var(--disp);font-weight:700;width:30px;color:var(--muted);font-size:14px;text-align:center;flex-shrink:0}
.lg-rank.r1{color:var(--gold)}
.lg-rank.r2{color:#C9D3EE}
.lg-rank.r3{color:#E8A06B}
.lg-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px}
.lg-lvl{font-family:var(--disp);font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:2px 8px;flex-shrink:0}
.lg-xp{font-family:var(--disp);font-weight:700;color:var(--gold);font-size:14px;flex-shrink:0}
.lg-sep{text-align:center;color:var(--muted);padding:4px 0;letter-spacing:.3em}

/* ---------- inputs ---------- */
.inp{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:13px 14px;font-family:var(--body);font-size:15px;margin-bottom:10px}
.inp:focus{outline:none;border-color:var(--arc2)}

/* ---------- onboarding ---------- */
.ob-grid{display:block;margin:16px 0}
.ob-grid-in{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ob-sec{display:flex;align-items:baseline;gap:8px;margin:18px 0 9px;flex-wrap:wrap}
.ob-sec:first-child{margin-top:0}
.ob-sec span{font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase}
.ob-sec em{font-style:normal;font-size:11.5px;color:var(--muted)}
/* la fenêtre « Ajouter un domaine » garde sa grille simple */
#dom-suggest.ob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 10px;text-align:center;cursor:pointer;font-family:var(--disp);font-weight:600;font-size:13px}
.chip .ico{display:block;font-size:20px;margin-bottom:4px}
.chip .ico{color:var(--arc1)}
.chip .ico svg{width:22px;height:22px;margin:0 auto}
.chip.sel{border-color:var(--arc1);background:rgba(94,234,212,.1)}
.ob-h1{font-family:var(--disp);font-weight:700;font-size:26px;line-height:1.2;margin:18px 0 6px}

/* ---------- bottom nav ---------- */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:rgba(11,16,32,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.nav-in{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.nav-btn{border:0;background:none;color:var(--muted);padding:11px 0 max(11px,env(safe-area-inset-bottom));cursor:pointer;font-family:var(--disp);font-size:10.5px;letter-spacing:.06em}
.nav-btn .ni{display:block;font-size:19px;margin-bottom:2px}
.nav-btn .ni svg{width:19px;height:19px;margin:0 auto;display:block}
.nav-btn.active{color:var(--ink)}
.nav-btn.active .ni{filter:drop-shadow(0 0 6px rgba(94,234,212,.8))}
.nav-btn[disabled]{opacity:.4;cursor:default}
.badge{display:inline-block;min-width:17px;padding:1px 5px;border-radius:99px;background:var(--gold);color:#231a05;font-weight:700;font-size:10px;margin-left:3px}

/* ---------- KORTEK+ / quota ---------- */
.plus-list{list-style:none;padding:0}
.plus-list li{padding:8px 0;font-size:14.5px;border-bottom:1px solid var(--line)}
.plus-list li:last-child{border-bottom:0}

/* Paywall : les bénéfices reprennent en miniature les vignettes lumineuses de l'app. */
#paywall .card.paywall-benefits{padding:10px;border-color:rgba(255,194,75,.18);
  background:
    radial-gradient(120% 75% at 50% 0%,rgba(255,194,75,.055),transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));
  box-shadow:0 22px 48px -38px rgba(255,194,75,.42),inset 0 1px 0 rgba(255,255,255,.035)}
#paywall .card.paywall-benefits::before{left:18%;right:18%;background:linear-gradient(90deg,transparent,rgba(255,224,158,.24),transparent)}
#paywall .card.paywall-benefits::after{animation:none;box-shadow:inset 0 0 34px rgba(255,194,75,.035)}
#paywall .plus-list{display:grid;gap:7px}
#paywall .plus-list li{--benefit-rgb:94,234,212;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;column-gap:11px;
  min-height:58px;padding:9px 11px;border:1px solid rgba(var(--benefit-rgb),.14);border-radius:14px;
  background:
    radial-gradient(100% 90% at 50% 50%,rgba(var(--benefit-rgb),.065),transparent 76%),
    rgba(255,255,255,.018);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 24px -24px rgba(var(--benefit-rgb),.72);
  font-size:14px;text-align:start}
#paywall .plus-list li:last-child{border-bottom:1px solid rgba(var(--benefit-rgb),.14)}
#paywall .plus-list .plus-learning{--benefit-rgb:94,234,212}
#paywall .plus-list .plus-memory{--benefit-rgb:129,140,248}
#paywall .plus-list .plus-goal{--benefit-rgb:255,194,75}
#paywall .plus-list .plus-scanner{--benefit-rgb:240,171,252}
#paywall .plus-list .plus-tutor{--benefit-rgb:125,211,252}
#paywall .plus-icon{position:relative;display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(var(--benefit-rgb),.24);border-radius:12px;
  color:rgb(var(--benefit-rgb));background:radial-gradient(circle at 50% 42%,rgba(var(--benefit-rgb),.13),rgba(var(--benefit-rgb),.025) 68%);
  box-shadow:inset 0 0 14px rgba(var(--benefit-rgb),.07),0 0 18px rgba(var(--benefit-rgb),.07)}
#paywall .plus-icon::after{content:"";position:absolute;inset:5px;border-radius:50%;background:rgba(var(--benefit-rgb),.08);filter:blur(6px);pointer-events:none}
#paywall .plus-icon svg{position:relative;z-index:1;width:26px;height:26px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(var(--benefit-rgb),.34))}
#paywall .plus-icon svg :where(path,circle,ellipse,line,rect){vector-effect:non-scaling-stroke}
#paywall .plus-copy{display:flex;min-width:0;flex-direction:column;gap:2px}
#paywall .plus-copy b{color:var(--ink);font-family:var(--disp);font-size:13.5px;font-weight:600;line-height:1.25;letter-spacing:-.012em}
#paywall .plus-copy>span{color:var(--muted);font-size:11.25px;line-height:1.4}

/* Choix annuel : relief net mais retenu. Le mensuel reste volontairement secondaire. */
#paywall #pw-buy-year,#paywall #pw-buy-month{min-height:52px;transform:translate3d(0,0,0);transition:transform .14s ease,opacity .14s ease;-webkit-touch-callout:none}
#paywall #pw-buy-year{min-height:61px;border:1px solid rgba(255,237,193,.78);color:#171104;
  background:linear-gradient(180deg,#FFDB89 0%,#FFC24B 58%,#EAAA30 100%);
  box-shadow:0 18px 34px -19px rgba(255,194,75,.95),0 7px 14px -9px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(116,73,0,.24);
  text-shadow:0 1px 0 rgba(255,255,255,.3)}
#paywall #pw-buy-year span{display:inline-block;margin-top:2px;font-family:var(--body);font-weight:600;letter-spacing:.01em}
#paywall #pw-buy-month{border-color:rgba(226,232,255,.13);background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
#paywall #pw-buy-year:hover,#paywall #pw-buy-month:hover{filter:none}
#paywall #pw-buy-year:active:not([disabled]),#paywall #pw-buy-month:active:not([disabled]){transform:translate3d(0,1px,0) scale(.985);opacity:.94}

.quota-pill{margin:0 0 14px;text-align:center;font-family:var(--disp);font-size:12.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer}
.quota-pill b{color:var(--gold)}
.quota-pill.plus{color:var(--gold);border-color:rgba(255,194,75,.35);cursor:default}

/* ---------- mini-fenêtres ---------- */
.mini{position:fixed;inset:0;z-index:80;background:rgba(4,7,16,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.mini.on{display:flex}
/* les fenêtres ne sont plus translucides : chacune est une pièce à part, avec sa couleur */
.mini .box{width:100%;max-width:380px;animation:pop .3s ease;--tint:#818CF8;
  background:
    radial-gradient(130% 90% at 12% 0%, color-mix(in srgb, var(--tint) 20%, transparent), transparent 58%),
    linear-gradient(180deg,#141C36,#0D1329 70%);
  border:1px solid color-mix(in srgb, var(--tint) 34%, transparent);
  box-shadow:0 26px 70px -26px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4)}
#modal-goal .box{--tint:#FFC24B}
#modal-scan .box{--tint:#F0ABFC}
#modal-dom .box{--tint:#5EEAD4}
.mini .box .eyebrow{color:var(--tint)}
/* l'en-tête illustré qui dit d'un coup d'œil de quoi il s'agit */
.mbox-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.mbox-ico{width:44px;height:44px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:21px;background:color-mix(in srgb, var(--tint) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--tint) 34%, transparent)}
.mbox-head b{font-family:var(--disp);font-size:16.5px;font-weight:700;display:block}
.mbox-head span{font-size:11.5px;color:var(--muted)}
/* les étapes, pour que personne ne se demande ce qu'il doit faire */
.mstep{display:flex;gap:9px;font-size:12.5px;color:var(--muted);margin-bottom:7px;line-height:1.45}
.mstep b{color:var(--tint);font-family:var(--disp);flex-shrink:0}
.danger-link{color:var(--bad);font-size:12px;text-decoration:none;opacity:.8}
.danger-link:active{opacity:1}

/* ---------- bannière d'installation ---------- */
.install-hint{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;background:linear-gradient(90deg,rgba(94,234,212,.12),rgba(129,140,248,.08));border:1px solid rgba(94,234,212,.3);border-radius:14px;padding:11px 14px;font-size:13px}
.install-hint button{border:0;background:none;color:var(--muted);font-size:14px;cursor:pointer;padding:4px}

.screen{display:none;animation:fade .32s cubic-bezier(.2,.8,.2,1)}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.overlay.on{animation:ovin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes ovin{from{opacity:0;transform:translateY(2.5%)}to{opacity:1;transform:none}}
/* entrées en cascade */
@keyframes hexin{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.screen.active .stat{animation:fade .4s cubic-bezier(.2,.8,.2,1) backwards}
.screen.active .stat:nth-child(2){animation-delay:.07s}
.screen.active .stat:nth-child(3){animation-delay:.14s}
/* détails d'orfèvre */
::selection{background:rgba(94,234,212,.3)}
:focus-visible{outline:2px solid var(--arc2);outline-offset:2px}
.inp:focus-visible{outline:none}
/* ---------- théming par domaine (session) ---------- */
#session{--dc:var(--arc1)}
#ss-dom{color:var(--dc) !important}
.sbars i.full{background:var(--dc)}
#session .qbar i{background:var(--dc)}
.lesson-topic{position:relative}
.lesson-topic::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;border-radius:99px;background:var(--dc)}

/* ---------- états vides : l'orbe ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:28px 18px}
.empty b{font-family:var(--disp);font-size:15.5px;letter-spacing:.04em}
.empty p{font-size:12.5px;color:var(--muted);max-width:270px;line-height:1.6}

/* ================= L'ORBE — l'entité vivante de KORTEK ================= */
.cx-orb{--brand-mint:#52E0B8;--oc:var(--brand-mint);--o2:var(--arc2);position:relative;flex-shrink:0;isolation:isolate;z-index:1;
  width:var(--os,120px);height:var(--os,120px);display:flex;align-items:center;justify-content:center;
  animation:orbBob 5.6s ease-in-out infinite}
/* halo externe */
.cx-orb::before{content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--oc) 15%, transparent), transparent 64%);
  animation:orbHalo 5.6s ease-in-out infinite}
/* noyau : sphère de verre sombre qui abrite le cerveau */
.cx-orb .core{position:absolute;inset:14%;border-radius:50%;
  background:
    /* rétro-éclairage : la sphère s'illumine derrière le cerveau */
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--oc) 30%, transparent), color-mix(in srgb, var(--oc) 8%, transparent) 42%, transparent 68%),
    radial-gradient(circle at 32% 24%, rgba(139,156,255,.10), transparent 55%),
    radial-gradient(circle at 42% 34%, color-mix(in srgb, var(--oc) 18%, #0C1624), #020610 76%);
  border:1px solid color-mix(in srgb, var(--oc) 30%, transparent);
  box-shadow:0 0 28px color-mix(in srgb, var(--oc) 26%, transparent),
             inset 0 -10px 26px rgba(0,0,0,.48);
  animation:orbPulse 5.6s ease-in-out infinite}
/* le double-K du logo, vivant au cœur de la sphère */
.cx-orb .brain{position:absolute;inset:19%;z-index:2;color:var(--brand-mint);
  filter:none;transition:opacity .36s ease;
  animation:orbPulse 5.6s ease-in-out infinite}
.cx-orb .brain svg{width:100%;height:100%;display:block}
.cx-orb .brain .hemi{opacity:.96;stroke-width:5.2;transform-box:fill-box;transform-origin:center}
.cx-orb .brain .kk-left{animation:kkLeft 5.6s ease-in-out infinite}
.cx-orb .brain .kk-right{animation:kkRight 5.6s ease-in-out -.28s infinite}
/* pochoir du logo : la forme vient du fichier détouré, la couleur du CSS.
   Les deux hémisphères restent dans le même menthe uni (--oc). */
.cx-orb .brain-photo{position:absolute;inset:5%;
  /* lueur néon statique (jamais animée : Safari la compose une fois) */
  filter:drop-shadow(0 0 4px rgba(82,224,184,.5)) drop-shadow(0 0 12px rgba(82,224,184,.18));
  -webkit-mask:url('icons/brain-mask.png') center/contain no-repeat;
  mask:url('icons/brain-mask.png') center/contain no-repeat}
.cx-orb .brain-photo.g{background:var(--oc);clip-path:inset(-8% 50% -8% -8%);animation:kkLeft 5.6s ease-in-out infinite}
.cx-orb .brain-photo.d{background:var(--oc); /* couleur unie voulue par le propriétaire (02/09) — les humeurs teintent toujours via --oc */clip-path:inset(-8% -8% -8% 50%);animation:kkRight 5.6s ease-in-out -.28s infinite}
/* liseré : la même silhouette, à peine agrandie, en menthe claire derrière
   la forme pleine — un contour qui épouse exactement le logo */
.cx-orb .brain-photo.rim{background:#A9F5DE;opacity:.22;transform:scale(1.035);filter:none}
.cx-orb .brain .brain-mark{position:absolute;inset:0}
/* Les éventuels tracés SVG secondaires suivent l'accent d'humeur ; le pochoir,
   lui, reste intégralement menthe. */
.cx-orb .brain .kk-right{stroke:var(--o2)}
.cx-orb .brain .cortex-arc{opacity:.32;stroke-width:1.2;vector-effect:non-scaling-stroke}
.cx-orb .brain .cir{opacity:.42;stroke-width:1.15;vector-effect:non-scaling-stroke}
.cx-orb .brain .nd{fill:none;stroke-width:1.15;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.cx-orb .brain .nd{animation:ndBlink 2.8s ease-in-out infinite}
.cx-orb .brain .nd:nth-of-type(2){animation-delay:-.35s}
.cx-orb .brain .nd:nth-of-type(3){animation-delay:-.7s}
.cx-orb .brain .nd:nth-of-type(4){animation-delay:-1.05s}
.cx-orb .brain .nd:nth-of-type(5){animation-delay:-1.4s}
.cx-orb .brain .nd:nth-of-type(6){animation-delay:-1.75s}
.cx-orb .brain .nd:nth-of-type(7){animation-delay:-2.1s}
.cx-orb .brain .nd:nth-of-type(8){animation-delay:-2.45s}
.cx-orb .brain .nd:nth-of-type(even){stroke:var(--o2)}
@keyframes kkLeft{0%,100%{transform:translateX(0)}50%{transform:translateX(-.8px)}}
@keyframes kkRight{0%,100%{transform:translateX(0)}50%{transform:translateX(.8px)}}
@keyframes ndBlink{0%,100%{opacity:.2;transform:scale(.84)}50%{opacity:.78;transform:scale(1.06)}}
/* reflet de verre par-dessus le tout */
.cx-orb .gloss{position:absolute;inset:14%;border-radius:50%;z-index:3;pointer-events:none;
  background:
    radial-gradient(ellipse 34% 22% at 34% 19%, rgba(255,255,255,.28), rgba(255,255,255,.035) 60%, transparent 78%),
    radial-gradient(circle at 72% 84%, color-mix(in srgb, var(--o2) 12%, transparent), transparent 44%)}
/* couronne graduée : des traits lumineux fins entourent le noyau */
.cx-orb .orbit{position:absolute;inset:0;border:0;border-radius:50%;opacity:.38;
  background:repeating-conic-gradient(from -1deg,color-mix(in srgb,var(--oc) 64%,transparent) 0 1deg,transparent 1deg 12deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:orbSpin 16.8s linear infinite}
.cx-orb .orbit.r2{inset:-7%;opacity:.28;background:none;-webkit-mask:none;mask:none;border:1px solid transparent;border-top-color:transparent;
  border-bottom-color:color-mix(in srgb, var(--o2) 50%, transparent);
  border-left-color:color-mix(in srgb, var(--o2) 16%, transparent);
  animation:orbSpin 22.4s linear infinite reverse}

@keyframes orbBob{0%,100%{transform:translateY(0) scale(1)}42%{transform:translateY(-4.8px) scale(.994,1.006)}54%{transform:translateY(-5.4px) scale(.996,1.004)}74%{transform:translateY(-1.4px) scale(1.004,.996)}80%{transform:translateY(0) scale(1.012,.988)}88%{transform:translateY(-.8px) scale(.998,1.002)}}
@keyframes orbHalo{0%,36%,100%{opacity:.32;transform:scale(.99)}43%{opacity:.52;transform:scale(1.035)}50%{opacity:.38;transform:scale(1.008)}58%{opacity:.6;transform:scale(1.055)}70%{opacity:.34;transform:scale(1)}}
@keyframes orbPulse{0%,100%{transform:scale(1)}43%{transform:scale(.996,1.008)}54%{transform:scale(1.008,.996)}72%{transform:scale(1.003,1.002)}}
@keyframes orbJoy{0%,36%,100%{transform:translateY(0) scale(1)}47%{transform:translateY(-6px) scale(.975,1.03)}58%{transform:translateY(-1px) scale(1.025,.975)}65%{transform:translateY(-8px) scale(.98,1.025)}75%{transform:translateY(0) scale(1.04,.96)}83%{transform:translateY(-2px) scale(.99,1.01)}90%{transform:translateY(0) scale(1)}}
@keyframes orbAlert{0%,68%,100%{transform:translate(0,0) scale(1)}71%{transform:translate(0,-1px) scale(1.018,.982)}74%{transform:translate(-1.1px,-2px) scale(.992,1.008)}77%{transform:translate(1.1px,-2px) scale(.992,1.008)}80%{transform:translate(-.8px,-2px) scale(.996,1.004)}84%{transform:translate(.6px,-1px) scale(1.008,.992)}88%{transform:translate(0,0) scale(1)}}
@keyframes orbSpin{to{transform:rotate(360deg)}}

/* ——— humeurs de l'orbe ——— */
/* réflexion : elle s'active, tourne vite, respire fort */
.cx-orb.think{--oc:var(--brand-mint);--o2:var(--arc2)}
.cx-orb.think .core,.cx-orb.think .brain{animation-duration:2.8s}
.cx-orb.think .brain .nd{animation-duration:1.4s}
.cx-orb.think .orbit{animation-duration:8.4s}
.cx-orb.think .orbit.r2{animation-duration:11.2s}
.cx-orb.think .brain-photo.g,.cx-orb.think .brain-photo.d{animation-duration:2.8s}
.cx-orb.think .brain-photo.d{animation-delay:-.14s}
/* triomphe : le double-K reste menthe, l'or signe la célébration */
.cx-orb.joy{--oc:var(--brand-mint);--o2:var(--gold);animation-name:orbJoy;animation-duration:4.8s}
.cx-orb.joy .core{animation-duration:2.4s;box-shadow:0 0 34px color-mix(in srgb,var(--brand-mint) 26%,transparent),0 0 40px rgba(255,194,75,.17),inset 0 -8px 24px rgba(0,0,0,.4)}
.cx-orb.joy .brain{animation-duration:2.4s;filter:none}
.cx-orb.joy .brain .nd{animation-duration:1.2s}
.cx-orb.joy .orbit{animation-duration:14.4s}
.cx-orb.joy .orbit.r2{animation-duration:19.2s}
.cx-orb.joy .brain-photo.g,.cx-orb.joy .brain-photo.d{animation-duration:4.8s}
.cx-orb.joy .brain-photo.d{animation-delay:-.24s}
/* repos : elle s'assoupit, tout ralentit */
.cx-orb.sleep{--oc:var(--brand-mint);--o2:#5B6689;animation-duration:7.2s}
.cx-orb.sleep .core{animation-duration:7.2s}
.cx-orb.sleep .brain{animation-duration:7.2s;opacity:.68;filter:none}
.cx-orb.sleep .brain .nd{animation-duration:7.2s}
.cx-orb.sleep .orbit{animation-duration:21.6s}
.cx-orb.sleep .orbit.r2{animation-duration:28.8s}
.cx-orb.sleep .brain-photo.g,.cx-orb.sleep .brain-photo.d{animation-duration:7.2s}
.cx-orb.sleep .brain-photo.d{animation-delay:-.36s}
/* alerte : série en danger / erreur */
.cx-orb.alert{--oc:var(--brand-mint);--o2:#FB7185;animation-name:orbAlert;animation-duration:2.4s}
.cx-orb.alert .core,.cx-orb.alert .brain{animation-duration:1.2s}
.cx-orb.alert .brain .nd{animation-duration:.8s}
.cx-orb.alert .orbit{animation-duration:7.2s}
.cx-orb.alert .orbit.r2{animation-duration:9.6s}
.cx-orb.alert .brain-photo.g,.cx-orb.alert .brain-photo.d{animation-duration:2.4s}
.cx-orb.alert .brain-photo.d{animation-delay:-.12s}
.cx-orb.alert::before{animation-duration:1.2s}

/* ——— le regard : deux points de vie logés dans la fissure du logo ——— */
.cx-orb .face{color:#E7FFF9;pointer-events:none}
.cx-orb .face .eye,.cx-orb .face .eye-aperture,.cx-orb .face .gaze,.cx-orb .face .pupil{transform-box:fill-box;transform-origin:center}
.cx-orb .face .eye,.cx-orb .face .eye-aperture,.cx-orb .face .gaze,.cx-orb .face .pupil{transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .24s ease}
.cx-orb .face .eye-light{fill:currentColor;stroke:none;opacity:1}
.cx-orb .face .pupil{fill:#06111B;stroke:none;animation:pupilDriftL 8.8s ease-in-out -1.7s infinite}
.cx-orb .face .eye-aperture{animation:faceBlinkL 5.3s ease-in-out -2.1s infinite}
.cx-orb .face .eye-r .eye-aperture{animation-name:faceBlinkR;animation-duration:6.7s;animation-delay:-4.6s}
.cx-orb .face .eye-r .pupil{animation-name:pupilDriftR;animation-duration:10.2s;animation-delay:-5.1s}
@keyframes faceBlinkL{0%,88%,92%,100%{transform:scaleY(1)}90%{transform:scaleY(.08)}}
@keyframes faceBlinkR{0%,63%,67%,100%{transform:scaleY(1)}65%{transform:scaleY(.08)}}
@keyframes pupilDriftL{0%,100%{transform:translate(0,0)}28%{transform:translate(-.22px,.12px)}56%{transform:translate(.26px,-.1px)}79%{transform:translate(.1px,.16px)}}
@keyframes pupilDriftR{0%,100%{transform:translate(0,0)}24%{transform:translate(.2px,.1px)}53%{transform:translate(-.24px,-.12px)}82%{transform:translate(-.08px,.15px)}}
/* réflexion : les pupilles se lèvent, comme si KORTEK cherchait une idée. */
.cx-orb.think .face .gaze{transform:translateY(-.58px)}
/* triomphe : deux arcs lumineux, légèrement relevés vers le centre. */
.cx-orb.joy .face .eye-aperture{animation:none;transform:scale(1.06,.28)}
.cx-orb.joy .face .eye-l{transform:rotate(-8deg)}
.cx-orb.joy .face .eye-r{transform:rotate(8deg)}
.cx-orb.joy .face .pupil{animation:none;opacity:0}
/* repos : les mêmes paupières se ferment sans ajouter un autre signe au logo. */
.cx-orb.sleep .face .eye-aperture{animation:none;opacity:.78;transform:scale(1.08,.12)}
.cx-orb.sleep .face .pupil{animation:none;opacity:0}
/* alerte : regard fixe et ouvert, puis bref frémissement de l'orbe. */
.cx-orb.alert .face .eye-aperture{animation:none;transform:scale(1.08,1.14)}
.cx-orb.alert .face .pupil{animation:none;transform:scale(1.06)}

/* ——— transitions d'onglets + flamme de série vivante ——— */
.screen.active{animation:scrIn .3s cubic-bezier(.2,.8,.2,1)}
@keyframes scrIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.streak .fl{display:inline-block;transform-origin:50% 88%;animation:flameLive 2.1s ease-in-out infinite}
@keyframes flameLive{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.13) rotate(2deg)}}

/* ——— photo du cours ——— */
.shot-btn{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border:1px dashed rgba(255,194,75,.45);border-radius:14px;padding:13px;margin-bottom:8px;
  font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--gold)}
.shot-btn span{font-family:var(--body);font-weight:400;font-size:11px;color:var(--muted)}
.shot-btn:active{background:rgba(255,194,75,.08)}
.shot-list:empty{display:none}
.shot-list{margin-bottom:10px}
.shot-list a{color:var(--muted)}

/* ——— réponse écrite et recto-verso ——— */
.ans-wrap{margin-top:2px}
.ans-in{font-size:16px;text-align:center}
.ans-in.ok{border-color:var(--good);background:rgba(52,211,153,.12)}
.ans-in.ko{border-color:var(--bad);background:rgba(251,113,133,.12)}
.ans-truth:empty{display:none}
.ans-truth{text-align:center;margin:-4px 0 10px;color:var(--muted)}
.flip-back{border-radius:16px;padding:18px 16px;margin-bottom:12px;text-align:center;
  background:
    radial-gradient(130% 100% at 50% 0%, color-mix(in srgb, var(--dc) 14%, transparent), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid color-mix(in srgb, var(--dc) 30%, transparent);
  animation:cardin .45s cubic-bezier(.3,1.36,.5,1)}
.fl-a{font-size:16.5px;line-height:1.6;color:var(--ink)}
.flip-judge{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ——— écriture de droite à gauche (arabe) ——— */
[dir="rtl"] .m-row b, [dir="rtl"] .id-grid, [dir="rtl"] .g-meta{direction:rtl}
[dir="rtl"] .choice{text-align:right}
[dir="rtl"] .lesson-topic::after{left:auto;right:0}
[dir="rtl"] .g-bar i, [dir="rtl"] .qbar i::after{right:auto;left:-3px}
[dir="rtl"] #ss-floor .floor-ico{right:auto;left:-60px;transform:rotate(10deg) scaleX(-1)}

/* ——— bandeau hors ligne ——— */
.offbar{display:flex;align-items:center;gap:9px;margin-top:12px;padding:10px 13px;border-radius:14px;
  font-size:12.5px;line-height:1.4;color:#FFD98A;
  background:rgba(255,194,75,.09);border:1px solid rgba(255,194,75,.28);
  animation:chIn .35s cubic-bezier(.25,.9,.3,1)}
.offbar .ob-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;
  animation:pulseCd 1.8s ease-in-out infinite}

/* ——— OBJECTIF DATÉ : l'échéance qui commande la révision ——— */
.goal-card{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.goal-item{position:relative;overflow:hidden;border-radius:22px;padding:16px 17px 17px;
  background:
    radial-gradient(130% 100% at 10% 0%, rgba(255,194,75,.17), transparent 55%),
    radial-gradient(130% 100% at 100% 100%, rgba(251,146,60,.12), transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(17,24,50,.55));
  border:1px solid rgba(255,194,75,.34);
  box-shadow:0 14px 44px -22px rgba(255,194,75,.45);
  animation:chIn .45s cubic-bezier(.25,.9,.3,1) backwards}
/* la deuxième échéance et les suivantes restent visibles mais moins criardes */
.goal-item:nth-child(n+2){animation-delay:.07s;
  background:
    radial-gradient(130% 100% at 10% 0%, rgba(255,194,75,.1), transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(17,24,50,.5));
  border-color:rgba(255,194,75,.22);box-shadow:none}
.g-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.g-cd{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--gold);
  border:1px solid rgba(255,194,75,.4);border-radius:99px;padding:3px 11px}
.g-cd.urgent{background:var(--gold);color:#0B1020;border-color:transparent;animation:pulseCd 1.8s ease-in-out infinite}
@keyframes pulseCd{0%,100%{opacity:1}50%{opacity:.72}}
.g-title{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.25;margin-bottom:12px}
.g-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.g-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FFD98A,var(--gold));
  transition:width .6s cubic-bezier(.2,.8,.2,1)}
.g-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin:7px 0 13px}
.g-quit{text-align:center;margin-top:11px}
.g-quit a{color:var(--muted);font-size:12px;text-decoration:none}

/* ——— MISSION DU JOUR : la carte-héros de l'accueil ——— */
.mission{position:relative;margin-top:14px;border-radius:22px;padding:17px 17px 18px;overflow:hidden;
  background:
    radial-gradient(130% 100% at 10% 0%, rgba(94,234,212,.22), transparent 55%),
    radial-gradient(130% 100% at 100% 100%, rgba(129,140,248,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(17,24,50,.55));
  border:1px solid color-mix(in srgb, var(--arc1) 26%, transparent);
  box-shadow:0 14px 44px -20px rgba(94,234,212,.3)}
.mission::before{content:"";position:absolute;top:0;left:18%;right:18%;height:1px;
  background:linear-gradient(90deg,transparent,var(--arc1),transparent);opacity:.7}
.m-head{display:flex;align-items:center;justify-content:space-between}
.m-min{font-family:var(--disp);font-size:11px;color:var(--muted);letter-spacing:.06em}
.m-min.ok{color:var(--good)}
.m-coach{display:flex;align-items:center;gap:12px;margin:10px 0 4px}
.m-coach p{font-size:14px;line-height:1.45;flex:1}
.m-rows{margin:8px 0 12px}
.m-row{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px;border-top:1px solid var(--line)}
.m-row:first-child{border-top:none}
.m-row b{margin-left:auto;font-family:var(--disp);font-size:12.5px;color:var(--gold)}
.m-row .mi{color:var(--arc1);display:flex}
.m-row .mi svg{width:17px;height:17px}
.m-cta{margin-top:2px}

/* ——— page Réviser : le moteur s'explique ——— */
.rv-line{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13.5px}
.rv-line i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rv-line em{margin-left:auto;font-style:normal;font-size:11px;color:var(--muted)}
.recall-line{font-size:12.5px;color:var(--arc1);text-align:center;margin-bottom:10px;opacity:.9}

/* ——— fiche de personnage ——— */
.idcard{position:relative;overflow:hidden;border:1px solid color-mix(in srgb, #B7A6FF 24%, transparent);border-radius:20px;padding:15px;margin-bottom:12px;
  background:
    radial-gradient(130% 100% at 10% 0%, rgba(183,166,255,.15), transparent 55%),
    radial-gradient(130% 100% at 100% 100%, rgba(94,234,212,.09), transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(17,24,50,.5));
  box-shadow:0 14px 40px -22px rgba(129,140,248,.35)}
.id-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.id-lvl{font-family:var(--disp);font-weight:700;font-size:16px}
.id-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.id-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;text-align:center}
.id-grid b{display:block;font-family:var(--disp);font-size:16px}
.id-grid span{font-size:9.5px;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;display:block;margin-top:2px}

.id-fw{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-top:11px;color:var(--muted);flex-wrap:wrap}
.lg-me-line{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:10px;border-radius:12px;
  background:rgba(94,234,212,.07);border:1px solid color-mix(in srgb, var(--arc1) 30%, transparent);font-size:13px}
.lg-me-line b{font-family:var(--disp);font-size:15px;color:var(--arc1)}

/* ——— chips de rythme (onboarding) ——— */
.ob-time{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 14px}
.tchip{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 4px;cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:12.5px;color:var(--ink)}
.tchip.sel{border-color:var(--arc1);background:rgba(94,234,212,.1);color:var(--arc1)}

/* ——— feedback et célébrations ——— */
.fxp{position:fixed;z-index:9999;pointer-events:none;transform:translateX(-50%);
  font-family:var(--disp);font-weight:700;font-size:17px;color:var(--good);
  text-shadow:0 0 12px rgba(52,211,153,.6);animation:fxpRise .9s ease-out forwards}
@keyframes fxpRise{from{opacity:1}to{transform:translateX(-50%) translateY(-54px);opacity:0}}
.confetti{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:7px;height:11px;border-radius:2px;opacity:.95;animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(106vh) rotate(var(--rot,540deg))}}

/* ——— scène d'ambiance en tête de session ——— */
#ss-scene{position:absolute;top:0;left:0;right:0;height:250px;pointer-events:none;opacity:.6;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
#ss-scene svg{width:100%;height:100%;display:block}
/* la session occupe toute la hauteur : plus de vide sous le contenu */
#session .ov-wrap{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100dvh}
#session-body{flex:1;display:flex;flex-direction:column}
/* La géométrie des leçons et leur rythme sont définis dans v2.css. */
#session-body .qwrap{flex:1;display:flex;flex-direction:column}
/* le sol : lueur montante + illustration géante, dans la couleur du domaine */
#ss-floor{position:absolute;left:0;right:0;bottom:0;height:46vh;pointer-events:none;overflow:hidden;
  background:radial-gradient(130% 90% at 50% 118%, color-mix(in srgb, var(--dc, #5EEAD4) 13%, transparent), transparent 62%)}
#ss-floor .floor-ico{position:absolute;right:-60px;bottom:-70px;width:300px;height:300px;opacity:.06;transform:rotate(-10deg);color:var(--dc, #5EEAD4)}
#ss-floor .floor-ico svg{width:100%;height:100%}
#ss-floor::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent, color-mix(in srgb, var(--dc, #5EEAD4) 45%, transparent), transparent)}

@media (prefers-reduced-motion:reduce){
  .cx-orb,.cx-orb::before,.cx-orb::after,.cx-orb *{animation:none!important}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== la vie des cartes : halo extérieur + souffle intérieur =====
   Chaque grande carte rayonne dans sa teinte et respire lentement —
   des durées différentes pour que rien ne pulse à l'unisson. */
.mission{--tint:#5EEAD4;box-shadow:0 10px 42px -8px color-mix(in srgb, var(--tint) 38%, transparent)}
.goal-item{--tint:#FFC24B;box-shadow:0 10px 42px -8px color-mix(in srgb, var(--tint) 36%, transparent);
  border-color:color-mix(in srgb, var(--tint) 40%, transparent)}
.idcard{--tint:#B7A6FF;box-shadow:0 10px 42px -8px color-mix(in srgb, var(--tint) 34%, transparent)}
.mission::after,.goal-item::after,.lvlcard::after,.idcard::after,.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 36px color-mix(in srgb, var(--tint, #5EEAD4) 14%, transparent),
             inset 0 1px 0 color-mix(in srgb, var(--tint, #5EEAD4) 42%, transparent);
  animation:cardBreath 4.2s ease-in-out infinite}
.goal-item::after{animation-duration:5.1s}
.lvlcard::after{animation-duration:4.6s}
.card::after{animation-duration:5.6s}
@keyframes cardBreath{0%,100%{opacity:.5}50%{opacity:1}}
/* les cartes d'action d'Explorer : une illustration qui donne envie */
.card .ac-art{display:block;width:70%;max-width:250px;margin:4px auto 10px;color:var(--tint);
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 12px color-mix(in srgb, var(--tint) 40%, transparent))}
/* la pastille KORTEK+ : dorée mais discrète, plus de surligneur */
.plus-tag{font-size:10px;letter-spacing:.08em;color:var(--gold);
  border:1px solid rgba(255,194,75,.45);border-radius:99px;padding:2px 8px;margin-left:4px}
/* le bouton de mission — LE geste du jour — rayonne doucement */
.mission .btn:not(.ghost){animation:ctaGlow 3.4s ease-in-out infinite}
@keyframes ctaGlow{0%,100%{box-shadow:0 6px 20px rgba(94,234,212,.22)}50%{box-shadow:0 6px 32px rgba(94,234,212,.5)}}

/* ===== PASSE D'ORFÈVRE (audit design system) — habiller les 3 écrans nus ===== */
/* Les deux portes (onboarding, compte) respirent la même aurore que l'app */
#auth, #onboard{background:
  radial-gradient(420px 300px at 88% -60px, rgba(94,234,212,.10), transparent 70%),
  radial-gradient(540px 400px at -90px 45%, rgba(129,140,248,.10), transparent 70%),
  radial-gradient(420px 320px at 60% 108%, rgba(240,171,252,.06), transparent 70%),
  var(--bg)}
/* L'orbe-mascotte accueille sur la porte du compte */
#auth-orb{margin:20px auto 8px}
/* Les 4 motivations : des cartes teintées, l'examen en or */
#ob-why .why-b{position:relative;display:block;width:100%;text-align:left;
  padding:15px 42px 15px 15px;border-radius:14px;
  border:1px solid color-mix(in srgb, var(--wc) 30%, transparent);
  background:radial-gradient(130% 170% at 0% 0%, color-mix(in srgb, var(--wc) 13%, transparent), transparent 62%), rgba(255,255,255,.045);
  box-shadow:0 10px 24px -16px color-mix(in srgb, var(--wc) 60%, transparent)}
#ob-why .why-b::after{content:'›';position:absolute;right:16px;top:50%;transform:translateY(-52%);
  font-family:var(--disp);font-size:20px;line-height:1;color:var(--wc);opacity:.85}
#ob-why .why-b:active{transform:scale(.985)}
/* Les textes des schémas gagnent un halo : lisibles même posés sur un trait */
.sc-fig text{paint-order:stroke fill;stroke:rgba(11,16,32,.85);stroke-width:3.2px;stroke-linejoin:round}

/* ===== AUDIT 2026-08-18 — accessibilité & design system (surcharges : rester en FIN de feuille) ===== */

/* Focus clavier : anneau turquoise discret, le même pour boutons, liens et champs */
:focus-visible{outline:2px solid color-mix(in srgb, var(--arc1) 85%, transparent);outline-offset:2px}
.inp:focus-visible{outline:2px solid color-mix(in srgb, var(--arc1) 85%, transparent);outline-offset:1px;
  border-color:color-mix(in srgb, var(--arc1) 55%, transparent)}

/* Cibles tactiles : les boutons des bannières atteignent 44×44 px sans épaissir la bannière
   (marges négatives = la zone grandit, la mise en page ne bouge pas) */
.install-hint button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  margin:-12px 0;padding:4px}
.install-hint button:last-child{margin-right:-14px}
/* les ✕ ronds (paywall, session) : le cercle reste à 36 px, la zone de toucher passe à 46 px */
.x{position:relative}
.x::after{content:"";position:absolute;inset:-5px;border-radius:50%}
/* les deux petits liens : zone de toucher élargie, rendu inchangé */
.g-quit a,.report-link a,.danger-link,#paywall .small a,#scr-stats .small a{display:inline-block;padding:10px 8px;margin:-10px -8px}

/* Vrais gras : Sora n'est chargée qu'en 400/600 — les <b>/<strong> du corps passent en 600 réel
   (fini le gras synthétique de l'écran de vente) */
b,strong{font-weight:600}
/* le logotype garde son 700 : Chakra Petch 700 est réellement chargée */
.brand b,.sp-brand b,.fc-brand b{font-weight:700}

/* L'or ne sert plus d'avertissement (règle maison : or = niveau, objectif, KORTEK+) :
   bandeau hors ligne neutre — le point pulsant suffit à signaler l'état */
.offbar{color:var(--muted);background:var(--panel);border-color:var(--line)}
.offbar .ob-dot{background:var(--muted)}
/* l'orbe en alerte abandonne l'ambre quasi-or pour un rose dérivé de --bad */
.cx-orb.alert{--o2:#FDA4AF}

/* Message de succès prêt à l'emploi (pendant vert des messages d'erreur en --bad) —
   !important : il doit gagner sur les color:var(--bad) posés en style inline */
.msg-ok{color:var(--good)!important;background:rgba(52,211,153,.08);
  border:1px solid rgba(52,211,153,.3);border-radius:10px;padding:9px 12px}

/* ===== AUDIT 2026-08-21 — arabe (RTL) & iOS (surcharges : rester en FIN de feuille) ===== */

/* ——— arabe : les règles directionnelles restées non miroitées ——— */

/* l'encadré d'explication accroche son filet du côté du début de ligne.
   Il s'affiche après CHAQUE réponse de quiz et pour chaque explication du tuteur : sans
   cela la barre violette se retrouve à la fin de la ligne arabe, arrondis inversés.
   (v2.css redessine .explain en carte à bordure symétrique : plus rien à retourner) */

/* les valeurs poussées en bout de ligne se collent au bord opposé, comme en LTR :
   en RTL une marge auto à gauche est absorbée du côté où l'espace libre se trouve déjà,
   donc elle ne pousse plus rien (gain XP de la Mission du jour, cartes par domaine). */
[dir="rtl"] .m-row b, [dir="rtl"] .rv-line em{margin-left:0;margin-right:auto}

/* « Pourquoi tu apprends ? » : cartes et chevron dans le sens de lecture */

/* retraits et marges d'icônes du bon côté : liste du parcours, badge de révisions,
   pastilles d'en-tête, zone de toucher élargie du ✕ de la bannière d'installation */
[dir="rtl"] .syl{padding-left:0;padding-right:22px}
[dir="rtl"] .badge{margin-left:0;margin-right:3px}
[dir="rtl"] .dbi{margin-right:0;margin-left:7px}
[dir="rtl"] .quota-pill .pi{margin-right:0;margin-left:2px}
[dir="rtl"] .install-hint button:last-child{margin-right:0;margin-left:-14px}

/* ——— iOS : zoom au focus, zones sûres, gestes ——— */

/* Sous 16px, WebKit zoome la page entière au focus d'un champ et ne dézoome JAMAIS au blur.
   .ans-in était déjà passée à 16px pour cette raison exacte : on aligne les 10 autres champs.
   Ne PAS mettre maximum-scale=1 / user-scalable=no dans le viewport (index.html l.5) :
   cela casserait le zoom d'accessibilité et est mal vu à la revue App Store. */
.inp{font-size:16px}

/* Le centrage par align-items rend le haut de la boîte inatteignable dès qu'elle déborde
   (clavier ouvert, iPhone SE) : le débordement du HAUT sort de la zone scrollable.
   margin:auto centre à l'identique ET garde le haut atteignable — les marges auto
   l'emportent sur align-items dans l'axe transverse, et tombent à 0 si l'espace est négatif. */
.mini{align-items:flex-start}
.mini .box{margin:auto}
#levelup{align-items:flex-start;overflow-y:auto}
#levelup .lv-box{margin:auto}

/* Zones sûres iPhone : .overlay et .mini sont position:fixed, donc jamais décalées par le
   contentInset de la WKWebView — sans cela le ✕ de fermeture de #session et #paywall tombe
   dans la barre d'état, et « Annuler » passe sous la barre d'accueil.
   max() = sans effet sur un appareil sans encoche et sur le web.
   NE PAS appliquer à .top (position:sticky, déjà décalée par contentInset:"automatic"). */
.ov-wrap{padding-top:max(16px, calc(env(safe-area-inset-top) + 6px));
  padding-bottom:calc(60px + env(safe-area-inset-bottom))}
.mini{padding-top:max(20px, calc(env(safe-area-inset-top) + 6px));
  padding-bottom:max(20px, calc(env(safe-area-inset-bottom) + 6px))}

/* Le geste ne doit jamais fuir vers la page du dessous (rebond iOS + position de
   défilement perdue à la fermeture). overflow-y:auto ci-dessus fait de #levelup un
   conteneur de défilement, condition pour que la propriété s'applique. */
.overlay,.mini,#levelup{overscroll-behavior:contain}

/* Nom de domaine : deux lignes plutôt qu'une troncature.
   « Cultura generale » (16), « الفيزياء والكيمياء » (18) et les domaines créés par
   l'utilisateur (jusqu'à 18 caractères) étaient coupés aux points de suspension. */
.dcard .nm{white-space:normal;line-height:1.15;letter-spacing:.02em;
  word-break:break-word;overflow:hidden;max-height:2.3em}
.dcard .di{align-items:flex-start}


/* ═══ Ajouts de l'audit du 27/08 ═══ */

/* Le ✕ du paywall disparaissait dès qu'on faisait défiler : il reste collé en
   haut, sinon la seule sortie visible demandait de remonter toute la page. */
#paywall .ov-top{position:sticky;top:0;z-index:3;background:var(--bg);padding-top:6px}

/* Modale Langue : dix langues dépassaient l'écran d'un iPhone SE et le bouton
   Annuler naissait hors champ — la liste défile, Annuler reste atteignable. */
#modal-lang .box{max-height:82vh;overflow-y:auto}

/* Réponse écrite réaffichée en entier après validation (l'input tronquait) */
.ans-given{width:100%;padding:13px 14px;border-radius:12px;font-size:16px;line-height:1.5;
  word-break:break-word;background:rgba(255,255,255,.05);border:1px solid var(--line);margin-bottom:8px}
.ans-given.ok{border-color:var(--good)}
.ans-given.ko{border-color:var(--bad)}

/* secousse brève d'un champ requis laissé vide */
.shake{animation:cx-shake .4s}
@keyframes cx-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Onboarding : le bouton Commencer naissait à 1500 px sous le bord de l'écran.
   Collé en bas du défilement, il est visible dès la première sélection. */
#onboard #ob-go{position:sticky;bottom:0;z-index:2;
  box-shadow:0 -18px 24px -6px var(--bg)}

/* ═══ Arabe (RTL) : les compteurs et la marque ne doivent pas se retourner ═══ */
/* « 1 / 3 » se lisait « 3 / 1 » : ces pastilles sont des chiffres, sens fixe */
.cc,.qnum{direction:ltr;unicode-bidi:isolate}
/* du contenu français (faits, teasers, titres de leçon) affiché en interface
   arabe : chaque bloc garde son propre sens de lecture */
.dg-teaser,.fr-t,.g-title,.lesson-topic,.qtxt{unicode-bidi:plaintext}

/* la marque « KORTEK+ » se lisait « +KORTEK » en arabe : le + neutre basculait
   côté droite-à-gauche. La pastille garde son sens propre. */
.plus-tag{unicode-bidi:isolate;direction:ltr}

/* ═══ PWA installée sur iPhone : l'en-tête passait sous l'encoche ═══ */
@media (display-mode: standalone){
  .top{padding-top:calc(14px + env(safe-area-inset-top))}
}

/* action destructrice dans un modal : lisible sans crier */
.btn.ghost.danger{color:#F87171;border-color:rgba(248,113,113,.35)}