: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}
/* Le paywall s'ouvre PAR-DESSUS une séance en cours (« Va plus loin » du
   tuteur). Tous les calques partageaient z-index:50 : à égalité, c'est
   l'ordre du HTML qui décide, et #session est déclaré après #paywall — le
   paywall s'ouvrait donc SOUS le quiz. Invisible, et surtout inclicable :
   le seul chemin de vente du tuteur était mort à 100 %, et la vue de paywall
   était quand même comptée dans les mesures (20/09/2026). Il reste sous
   « niveau supérieur » (70) et sous les petites fenêtres (80). */
#paywall{z-index:60}
.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)}
.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;
  /* c'est un <button> : on lui retire l'habillage de bouton du navigateur */
  background:none;border:0;padding:0;margin:0;font-family:inherit;text-align:start;cursor:pointer}
.fr-t.open{-webkit-line-clamp:unset;display:block;overflow:visible}
/* zone tactile de 40 px : l'émoji seul faisait 13 px, trop petit pour un pouce */
.fr-share{flex-shrink:0;opacity:.6;font-size:13px;background:none;border:0;padding:0;margin:0;min-width:40px;min-height:40px;display:grid;place-items:center;cursor:pointer;color:inherit}
.fr-share:hover,.fr-share:focus-visible{opacity:1}

/* ---------- 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;
  /* devenu un <button> : iOS impose sinon son propre fond et sa propre bordure */
  display:block;width:100%;-webkit-appearance:none;appearance:none}
.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;
  /* zone tactile portée à 44 px de haut, le minimum recommandé par Apple :
     le texte fait ~19 px, il faut donc 12,5 px de marge intérieure de chaque
     côté. La marge négative annule l'effet sur la mise en page. */
  padding:12.5px 8px;margin:-12.5px -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)}

/* Les liens-actions des listes — retirer un élève, quitter une classe, retirer
   une leçon, envoyer à toute la classe — sont de simples petits textes :
   21 × 16 px mesurés, pour des actions parfois destructrices. Apple demande
   44 × 44. Le remplissage agrandit la zone atteignable, la marge négative
   annule tout effet sur la mise en page. Même technique que pour les liens de
   pied de page, déjà en place plus haut. */
#scr-classe a[href="#"], .rv-line a[href="#"]{
  display:inline-block;
  padding:14px 12px;
  margin:-14px -12px;
}
/* KORTEK Classe : les lignes « libellé | chiffres » n'avaient rien qui pousse
   la colonne de droite contre le bord. Sur l'écran Réviser c'est un <em> en
   margin-left:auto qui le fait ; ici la colonne de droite est un <span>. Quand
   le prénom était court (« Tom »), les chiffres flottaient au milieu de la
   carte (audit du 17/09/2026). `inline-start` se retourne tout seul en arabe. */
#scr-classe .rv-line>span:last-child{margin-inline-start:auto;flex-shrink:0;max-width:60%}
#scr-classe .rv-line>span:first-child{min-width:0}