/* CATON ACADEMY — Learning App */
:root{
  --bg:           #010B2E;
  --bg-deep:      #00061a;
  --navy:         #02065B;
  --navy-mid:     #1A275C;
  --gold:         #D1AF5F;
  --gold-light:   #F0D99A;
  --gold-pale:    #FBF5E6;
  --white:        #FFFFFF;
  --muted:        #8892B0;
  --card:         #0A1628;
  --teal:         #00D4AA;
  --crimson:      #FF4757;
  --line:         rgba(209,175,95,0.18);
  --line-soft:    rgba(255,255,255,0.06);

  --f-head: Georgia, "Times New Roman", serif;
  --f-body: Verdana, Geneva, sans-serif;
  --f-mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
  --f-sans:'Verdana', Geneva, sans-serif;
  --bg-card:rgba(10,22,40,0.78);
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; background:var(--bg); color:var(--white); font-family:var(--f-body); -webkit-font-smoothing:antialiased; }
body{ overscroll-behavior-y:none; }

#root{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(209,175,95,0.10), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(2,6,91,0.85), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(0,212,170,0.06), transparent 60%),
    var(--bg);
}

/* Stars layer */
.stars{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1px 1px at 23% 18%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 67% 32%, rgba(209,175,95,.7), transparent 60%),
    radial-gradient(1px 1px at 41% 71%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 84%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 12% 88%, rgba(209,175,95,.45), transparent 60%),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,.4), transparent 60%);
  opacity:.6;
}

/* Phone-like canvas — works full-bleed on phones, framed on desktop */
.app{
  position:relative; z-index:1;
  max-width:480px; margin:0 auto;
  min-height:100vh;
  padding: env(safe-area-inset-top, 0px) 0 calc(110px + env(safe-area-inset-bottom, 0px)); /* zones sûres iPhone (encoche / Dynamic Island) */
  overflow-x:hidden;
  overflow-y:auto;
}
@media (min-width: 700px){
  .app{
    margin: 24px auto;
    border:1px solid var(--line);
    border-radius:32px;
    box-shadow: 0 30px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(209,175,95,.05) inset;
    min-height: calc(100vh - 48px);
    overflow-x:hidden;
    overflow-y:auto;
  }
}

/* Generic */
.h-mono{ font-family:var(--f-mono); font-variant-numeric: tabular-nums; }
.head{ font-family:var(--f-head); font-weight:700; }
.muted{ color:var(--muted); }
.gold{ color:var(--gold); }
.tealc{ color:var(--teal); }

.glass{
  background:rgba(10,22,40,0.78);
  border:1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius:18px;
}
.glass-strong{
  background:rgba(10,22,40,0.92);
  border:1px solid var(--line);
  border-radius:18px;
}

.glow-gold{ box-shadow: 0 0 24px rgba(209,175,95,.25), inset 0 0 0 1px rgba(209,175,95,.4); }
.glow-text-gold{ text-shadow: 0 0 14px rgba(209,175,95,.55); }

/* Header */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 22px 8px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:48px; height:48px; }
.brand-name{ font-family:var(--f-head); font-weight:700; font-size:13px; letter-spacing:.18em; color:var(--gold); }
.brand-sub{ font-size:10px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; }
.streak{
  display:flex; align-items:center; gap:8px;
  background:rgba(255, 80, 30, 0.08);
  border:1px solid rgba(255, 130, 60, 0.25);
  border-radius:999px;
  padding:7px 12px 7px 8px;
  font-family:var(--f-mono); font-size:13px;
}
.streak .flame{ font-size:18px; line-height:1; filter: drop-shadow(0 0 6px rgba(255,130,40,.6)); }

/* Hero greeting */
.hero{
  position:relative;
  margin: 16px 18px 18px;
  padding: 22px 22px 24px;
  overflow:hidden;
}
.hero .mandala{ position:absolute; right:-50px; top:-30px; opacity:.18; pointer-events:none; }
.hero h1{
  font-family:var(--f-head); font-weight:700; font-size:22px; margin:0 0 4px;
  letter-spacing:.01em;
}
.hero .sub{ color:var(--muted); font-size:12px; margin-bottom:14px; }
.level-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.level-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-head); font-weight:700; font-size:12px; letter-spacing:.2em;
  color:var(--gold); padding:6px 12px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(209,175,95,.06);
  text-shadow: 0 0 10px rgba(209,175,95,.4);
}
.xp-readout{ font-family:var(--f-mono); font-size:12px; color:var(--gold-light); }
.xp-readout b{ color:var(--white); font-weight:700; }

.xpbar{
  position:relative; height:10px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(209,175,95,0.15);
}
.xpbar > i{
  display:block; height:100%;
  background: linear-gradient(90deg, #8a6a1f 0%, #D1AF5F 40%, #F0D99A 70%, #D1AF5F 100%);
  box-shadow: 0 0 18px rgba(209,175,95,.6);
  border-radius:999px;
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
  position:relative;
}
.xpbar > i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-100%);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine{ 0%{transform:translateX(-100%);} 60%,100%{transform:translateX(100%);} }

/* Track cards */
.track-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding: 0 18px; }
.track{
  padding:16px; position:relative; overflow:hidden;
}
.track .ring-wrap{ display:flex; align-items:center; gap:14px; }
.track .lbl{ font-size:11px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; }
.track .num{ font-family:var(--f-mono); color:var(--white); font-size:22px; }
.track .num small{ color:var(--muted); font-size:12px; }
.track .ttl{ font-family:var(--f-head); font-weight:700; font-size:14px; margin:6px 0 0; }

/* Continue button */
.cta-row{ padding: 14px 18px 0; }
.cta-continue{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:16px 18px;
  background:linear-gradient(180deg, rgba(209,175,95,.18), rgba(209,175,95,.06));
  border:1px solid rgba(209,175,95,.55);
  border-radius:14px;
  color:var(--white);
  font-family:var(--f-body);
  cursor:pointer;
  box-shadow: 0 0 24px rgba(209,175,95,.18), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .15s ease, box-shadow .2s ease;
}
.cta-continue:hover{ box-shadow: 0 0 36px rgba(209,175,95,.35); }
.cta-continue:active{ transform: scale(.99); }
.cta-continue .l{ text-align:left; }
.cta-continue .l .k{ font-size:11px; color:var(--gold); letter-spacing:.2em; text-transform:uppercase; }
.cta-continue .l .v{ font-family:var(--f-head); font-weight:700; font-size:16px; margin-top:2px; }
.cta-continue .arrow{
  width:36px; height:36px; border-radius:999px;
  background:var(--gold); color:var(--navy);
  display:grid; place-items:center; font-size:18px; font-weight:900;
}

/* Daily challenge */
.daily{
  margin: 14px 18px 0; padding:18px;
}
.daily .h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.daily .ttl{ font-family:var(--f-head); font-weight:700; font-size:15px; }
.daily .pill{
  font-family:var(--f-mono); font-size:11px; color:var(--gold);
  border:1px solid var(--line); padding:4px 10px; border-radius:999px;
}
.daily .desc{ color:var(--muted); font-size:12.5px; margin-bottom:12px; }
.daily .timer{
  height:6px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06);
}
.daily .timer > i{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--teal), #69F0CE);
  box-shadow: 0 0 12px rgba(0,212,170,.4);
}

/* Activity feed */
.feed{ margin:18px 18px 0; }
.feed-h{
  display:flex; align-items:center; justify-content:space-between; margin: 6px 4px 10px;
}
.feed-h .ttl{ font-family:var(--f-head); font-weight:700; font-size:14px; letter-spacing:.02em; }
.feed-h .lnk{ color:var(--gold); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.feed-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border:1px solid var(--line-soft);
  border-radius:14px;
  background:rgba(10,22,40,.5);
  margin-bottom:8px;
}
.feed-item .ico{
  width:36px; height:36px; border-radius:10px;
  background:rgba(209,175,95,.1); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--gold);
}
.feed-item .body{ flex:1; }
.feed-item .body .l1{ font-size:13px; color:var(--white); }
.feed-item .body .l2{ font-size:11px; color:var(--muted); margin-top:2px; }
.feed-item .xp{ font-family:var(--f-mono); color:var(--teal); font-size:12px; }

/* Bottom tab bar */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  display:flex; justify-content:center;
  pointer-events:none;
}
.tabbar-inner{
  pointer-events:auto;
  margin: 0 14px calc(14px + env(safe-area-inset-bottom, 0px)); /* décollée de la barre de geste iPhone */
  display:flex; gap:4px;
  padding:8px;
  background:rgba(2,6,46,0.85);
  border:1px solid var(--line);
  backdrop-filter: blur(16px);
  border-radius:20px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  width: 100%;
  max-width:452px;
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:8px 6px; border-radius:14px;
  color:var(--muted); font-size:10.5px; letter-spacing:.06em;
  background:transparent; border:1px solid transparent;
  cursor:pointer; transition: all .2s ease;
}
.tab svg{ width:22px; height:22px; }
.tab.active{
  color:var(--gold);
  background: linear-gradient(180deg, rgba(209,175,95,.12), rgba(209,175,95,.04));
  border-color: rgba(209,175,95,.45);
  box-shadow: 0 0 18px rgba(209,175,95,.2), inset 0 0 0 1px rgba(255,255,255,.03);
  text-shadow: 0 0 10px rgba(209,175,95,.5);
}

/* ---------- Sections / Constellation ---------- */
.screen-head{ padding: 24px 22px 6px; }
.screen-head h2{ font-family:var(--f-head); font-weight:700; font-size:24px; margin:0; }
.screen-head .sub{ color:var(--muted); font-size:12.5px; margin-top:4px; }

.constellation{
  position:relative; padding: 18px 0 10px;
}
.constellation .level-flag{
  display:flex; align-items:center; gap:10px;
  padding: 14px 22px 4px;
}
.constellation .level-flag .dot{ width:8px; height:8px; border-radius:999px; }
.constellation .level-flag .label{ font-family:var(--f-head); font-weight:700; font-size:13px; letter-spacing:.16em; }
.constellation .level-flag .meta{ color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }

.path{ position:relative; padding: 0 18px; pointer-events:none; }
.node-row > div { pointer-events:auto; }

.node-row{
  position:relative;
  display:flex; align-items:center;
  height:130px;
}
.node-row .info{ flex:1; }
.node-row.right{ flex-direction:row-reverse; }
.node-row.right .info{ text-align:right; }

.node-info .num{ font-family:var(--f-mono); font-size:11px; color:var(--gold); letter-spacing:.18em; }
.node-info .ttl{ font-family:var(--f-head); font-weight:700; font-size:15px; margin:2px 0 4px; }
.node-info .ttl.locked{ color:var(--muted); }
.node-info .meta{ font-size:11px; color:var(--muted); }

.hex{
  position:relative;
  width:74px; height:84px;
  flex:none; margin: 0 6px;
  cursor:pointer;
  transition: transform .25s ease;
}
.hex:hover{ transform: translateY(-2px); }
.hex svg{ display:block; width:100%; height:100%; overflow:visible; }
.hex .lbl{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-mono); font-weight:700; color:var(--gold);
  font-size:18px;
}
.hex .lbl.locked{ color:#3d4a6b; }
.hex .lbl.complete{ color:var(--navy); }

.hex.available .ring{ animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(209,175,95,0)); }
  50%{ filter: drop-shadow(0 0 14px rgba(209,175,95,.6)); }
}

/* path connector */
.connector{
  position:absolute; left:50%; top:84px; bottom:-46px;
  width:2px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(209,175,95,.55) 0 6px, transparent 6px 14px);
  z-index:-1;
}
.connector.locked{ background: repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 6px, transparent 6px 14px); }

.constellation-deco{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  opacity:.07; pointer-events:none;
}

/* ---------- Section detail ---------- */
.detail-head{ padding:20px 18px 12px; }
.back{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:none; color:var(--gold);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; padding:0; margin-bottom:14px;
}
.detail-head .num{ font-family:var(--f-mono); font-size:11px; color:var(--gold); letter-spacing:.18em; }
.detail-head h1{
  font-family:var(--f-head); font-weight:700; font-size:26px;
  margin:6px 0 8px;
}
.detail-head .meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tag{
  font-family:var(--f-mono); font-size:11px; color:var(--gold);
  border:1px solid var(--line); padding:4px 9px; border-radius:999px;
  background:rgba(209,175,95,.05);
}
.tag.teal{ color:var(--teal); border-color:rgba(0,212,170,.3); background:rgba(0,212,170,.06); }
.detail-progress{
  margin: 14px 18px 6px;
  height:8px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
}
.detail-progress > i{
  display:block; height:100%;
  background: linear-gradient(90deg, #8a6a1f, var(--gold), #F0D99A, var(--gold));
  box-shadow: 0 0 12px rgba(209,175,95,.5);
}

.mode-pills{
  display:flex; gap:6px;
  padding: 14px 18px 4px;
}
.mode-pills .pill{
  flex:1; text-align:center;
  padding:10px 8px;
  font-size:12px; letter-spacing:.06em;
  background:transparent;
  border:1px solid var(--line-soft);
  border-radius:999px;
  color:var(--muted);
  cursor:pointer; transition: all .2s ease;
}
.mode-pills .pill:hover{ color:var(--white); }
.mode-pills .pill.locked{ opacity:.4; cursor:not-allowed; }
.mode-pills .pill.locked:hover{ color:var(--muted); }
.mode-pills .pill.active{
  color:var(--navy); background:var(--gold); border-color:var(--gold);
  box-shadow: 0 0 16px rgba(209,175,95,.4);
  font-weight:700;
}
.mode-pills .pill.locked{
  opacity:.35; cursor:not-allowed; pointer-events:none;
}

/* Flashcards */
.fc-wrap{ padding: 20px 18px 0; }
.fc-counter{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:12px; color:var(--muted); margin-bottom:12px;
}
.fc-counter b{ color:var(--gold); }
.flashcard{
  position:relative; width:100%; aspect-ratio: 5/6;
  perspective: 1500px;
  margin-bottom:18px;
}
.fc-inner{
  position:absolute; inset:0;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.2,.8,.2,1);
}
.fc-inner.flipped{ transform: rotateY(180deg); }
.fc-face{
  position:absolute; inset:0;
  border-radius:24px;
  background: linear-gradient(180deg, rgba(10,22,40,.95), rgba(2,6,46,.95));
  border:1px solid var(--line);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display:flex; flex-direction:column; padding:24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(209,175,95,.05) inset;
  cursor:pointer;
  overflow:hidden;
}
.fc-face .corner{ position:absolute; opacity:.18; }
.fc-face .corner.tl{ top:14px; left:14px; }
.fc-face .corner.br{ bottom:14px; right:14px; transform: rotate(180deg); }
.fc-face .badge{
  font-family:var(--f-mono); font-size:11px; color:var(--gold);
  letter-spacing:.18em; align-self:flex-start;
}
.fc-front .word{
  flex:1; display:grid; place-items:center;
  font-family:var(--f-head); font-weight:700;
  font-size: clamp(28px, 7vw, 46px);
  text-align:center; padding: 18px 6px;
  line-height:1.1;
}
.fc-front .hint{ text-align:center; font-size:11px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; }
.fc-back{ transform: rotateY(180deg); }
.fc-back .fr{
  font-family:var(--f-head); font-weight:700; color:var(--gold);
  font-size: clamp(22px, 5.5vw, 32px); margin-top:12px;
}
.fc-back .ex{
  margin-top:18px; padding:14px; border-radius:14px;
  background:rgba(209,175,95,.06); border:1px solid var(--line);
  font-family:var(--f-head); font-style:italic; color:var(--white); font-size:14px;
}
.fc-back .ph{
  margin-top:14px; font-family:var(--f-mono); font-size:13px; color:var(--muted);
}

.fc-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fc-btn{
  padding:14px; border-radius:14px;
  font-family:var(--f-body); font-size:13px; letter-spacing:.04em;
  cursor:pointer; transition: all .15s ease; display:flex; align-items:center; justify-content:center; gap:8px;
}
.fc-btn.no{
  background:rgba(255,71,87,.06);
  border:1px solid rgba(255,71,87,.35);
  color:#ffb4bc;
}
.fc-btn.no:hover{ background:rgba(255,71,87,.12); }
.fc-btn.yes{
  background:linear-gradient(180deg, rgba(0,212,170,.18), rgba(0,212,170,.06));
  border:1px solid rgba(0,212,170,.5);
  color:#d6fff2;
  box-shadow: 0 0 18px rgba(0,212,170,.18);
}
.fc-btn.yes:hover{ box-shadow: 0 0 28px rgba(0,212,170,.35); }

/* QCM */
.qcm{ padding: 18px 18px 0; }
.qcm .q{
  font-family:var(--f-head); font-weight:700; font-size:20px; line-height:1.3;
  margin-bottom:18px;
}
.qcm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.qcm-opt{
  position:relative; padding:18px 14px;
  background:rgba(10,22,40,0.78);
  border:1px solid var(--line);
  backdrop-filter: blur(12px);
  border-radius:14px;
  color:var(--white); font-size:14px;
  cursor:pointer; transition: all .2s ease;
  text-align:left;
  min-height:84px;
}
.qcm-opt .key{
  font-family:var(--f-mono); color:var(--gold); font-size:11px; letter-spacing:.16em; margin-bottom:6px; display:block;
}
.qcm-opt:hover{ border-color: rgba(209,175,95,.5); }
.qcm-opt.correct{
  border-color: rgba(0,212,170,.7);
  background:rgba(0,212,170,.12);
  box-shadow: 0 0 22px rgba(0,212,170,.3);
}
.qcm-opt.wrong{
  border-color: rgba(255,71,87,.7);
  background:rgba(255,71,87,.10);
  animation: shake .35s ease;
}
.qcm-opt.show-correct{
  border-color: var(--gold);
  background:rgba(209,175,95,.14);
  color:var(--gold-light);
}
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
.qcm-dots{ display:flex; gap:6px; justify-content:center; margin-top:18px; }
.qcm-dots span{
  width:8px; height:8px; border-radius:999px;
  background:rgba(255,255,255,.12);
}
.qcm-dots span.done{ background:var(--gold); box-shadow:0 0 8px rgba(209,175,95,.6); }
.qcm-dots span.cur{ background:var(--white); }

.xp-pop{
  position:absolute; right:10px; top:-14px;
  background:var(--gold); color:var(--navy);
  font-family:var(--f-mono); font-weight:700; font-size:11px;
  padding:4px 10px; border-radius:999px;
  animation: pop 1.6s ease forwards;
}
@keyframes pop{
  0%{ opacity:0; transform: translateY(0); }
  20%{ opacity:1; transform: translateY(-12px); }
  100%{ opacity:0; transform: translateY(-32px); }
}

/* Compléter */
.fill{ padding:20px 18px 0; }
.fill .ctx-icon{
  width:52px; height:52px; border-radius:14px;
  background:rgba(209,175,95,.1); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--gold);
  margin-bottom:14px;
}
.fill .sentence{
  font-family:var(--f-head); font-weight:700; font-size:20px; line-height:1.45;
  margin-bottom:18px;
}
.gap{
  display:inline-block;
  min-width:90px; padding:0 6px;
  border-bottom:2px dashed var(--gold);
  color:var(--gold);
  text-align:center;
}
.fill input{
  width:100%; padding:14px 16px;
  background:rgba(2,6,46,.6);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--white); font-family:var(--f-body); font-size:16px; /* 16px min: évite le zoom auto iOS au focus */
  outline:none; transition: all .2s ease;
}
.fill input:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(209,175,95,.18), 0 0 24px rgba(209,175,95,.18);
}
.fill .verify{
  margin-top:14px; width:100%; padding:14px;
  background:var(--gold); color:var(--navy);
  border:none; border-radius:12px;
  font-family:var(--f-body); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer;
  transition: all .15s ease;
}
.fill .verify:hover{ background:var(--gold-light); }
.fill .verify:disabled{ opacity:.5; cursor:not-allowed; }
.fb{
  margin-top:14px; padding:14px; border-radius:12px; font-size:13.5px; line-height:1.45;
  border:1px solid;
}
.fb.ok{
  background:rgba(0,212,170,.08); border-color:rgba(0,212,170,.5); color:#d6fff2;
}
.fb.ko{
  background:rgba(255,71,87,.06); border-color:rgba(255,71,87,.4); color:#ffd6d9;
}
.fb b{ color:var(--gold); }

/* Songs */
.songs{ padding: 18px 18px 0; }
.song-card{
  display:flex; gap:14px; align-items:center;
  padding:14px;
  background:rgba(10,22,40,0.78);
  border:1px solid var(--line);
  border-radius:16px;
  margin-bottom:10px;
  cursor:pointer; transition: all .2s ease;
}
.song-card:hover{ border-color: rgba(209,175,95,.5); }
.song-art{
  width:64px; height:64px; flex:none; border-radius:12px;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy));
  display:grid; place-items:center; color:var(--gold);
  border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.song-art .wave{
  position:absolute; inset:auto 6px 6px 6px; height:18px;
  display:flex; gap:2px; align-items:flex-end;
}
.song-art .wave i{
  flex:1; background:var(--gold); border-radius:1px; opacity:.7;
  animation: wave 1.4s ease-in-out infinite;
}
@keyframes wave{
  0%,100%{ height:30%; }
  50%{ height:100%; }
}
.song .meta{ flex:1; }
.song .ttl{ font-family:var(--f-head); font-weight:700; font-size:14px; }
.song .art{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.song-card .lvl{
  font-family:var(--f-mono); font-size:10.5px; color:var(--gold);
  border:1px solid var(--line); padding:3px 8px; border-radius:999px;
}

/* Profil */
.profil-head{ padding: 30px 22px 8px; text-align:center; }
.avatar{
  width:96px; height:96px; border-radius:999px; margin:0 auto 14px;
  border:1px solid var(--line);
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(209,175,95,.35), transparent 70%),
    var(--navy-mid);
  display:grid; place-items:center;
  font-family:var(--f-head); font-weight:700; font-size:34px; color:var(--gold);
  position:relative;
  box-shadow: 0 0 32px rgba(209,175,95,.2), inset 0 0 0 2px rgba(209,175,95,.4);
}
.avatar .ring{
  position:absolute; inset:-6px; border-radius:999px;
  border:1px dashed rgba(209,175,95,.35);
  animation: spin 22s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.profil-head h2{ font-family:var(--f-head); font-weight:700; font-size:22px; margin:6px 0 2px; }
.profil-head .role{ color:var(--muted); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }

.stat-grid{
  margin: 18px; padding:18px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.stat .v{ font-family:var(--f-mono); color:var(--white); font-size:22px; }
.stat .v small{ color:var(--gold); font-size:14px; }
.stat .l{ font-size:10.5px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin-top:2px; }
.stat + .stat{ border-left:1px solid var(--line-soft); padding-left:10px; }

.section-title{
  padding: 6px 22px;
  font-family:var(--f-head); font-weight:700; font-size:13px;
  color:var(--muted); letter-spacing:.18em; text-transform:uppercase;
  margin: 14px 0 8px;
}

.achievements{
  padding: 0 18px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
}
.ach{
  aspect-ratio:1; padding:10px;
  border-radius:14px;
  background:rgba(10,22,40,.78);
  border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:6px;
  position:relative;
  overflow:hidden;
}
.ach .ico{ width:38px; height:38px; color:var(--gold); }
.ach.locked .ico{ color:#3d4a6b; }
.ach .lbl{ font-size:10px; line-height:1.25; color:var(--white); }
.ach.locked .lbl{ color:var(--muted); }
.ach.unlocked{ box-shadow: inset 0 0 0 1px rgba(209,175,95,.5), 0 0 18px rgba(209,175,95,.18); }

.row-line{
  margin: 12px 18px; padding:14px 16px;
  border-radius:14px; background:rgba(10,22,40,.6);
  border:1px solid var(--line-soft);
  display:flex; align-items:center; gap:14px;
  cursor:pointer; transition: all .2s ease;
}
.row-line:hover{ border-color:var(--line); }
.row-line .ico{
  width:36px; height:36px; border-radius:10px;
  background:rgba(209,175,95,.08); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--gold);
}
.row-line .body{ flex:1; }
.row-line .body .l1{ font-size:13px; }
.row-line .body .l2{ font-size:11px; color:var(--muted); margin-top:1px; }
.row-line .chev{ color:var(--muted); }

/* Particles */
.particles{
  position:fixed; inset:0; pointer-events:none; z-index:99;
}
.particle{
  position:absolute; width:6px; height:6px; border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(209,175,95,.9);
  animation: burst 1.4s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes burst{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.4); }
  10%{ opacity:1; }
  100%{ opacity:0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2); }
}

/* enter animations */
.fade-in{ animation: fade .35s ease both; }
@keyframes fade{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

.section-end-pad{ height:30px; }

/* ================= SPLASH ================= */
.splash{
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 28px 20px 40px;
  overflow:hidden;
}
.splash-mandala{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  pointer-events:none;
  animation: spin 80s linear infinite;
}
.splash-content{ position:relative; z-index:2; text-align:center; max-width:520px; width:100%; }
.splash-logo{ display:flex; justify-content:center; margin-bottom:16px; filter: drop-shadow(0 0 28px rgba(209,175,95,.45)); }
.splash-name{
  font-family:var(--f-head); color:var(--gold); letter-spacing:.32em; font-size:13px;
  margin-bottom:18px;
}
.splash-tag{
  font-family:var(--f-head); font-weight:700; font-size:30px; line-height:1.15;
  color:var(--white); margin: 0 0 10px;
}
.splash-tag::after{
  content:""; display:block; width:60px; height:1px; margin:18px auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.splash-sub{ color:var(--muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.splash-cards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin: 28px 0 22px; }
@media (max-width:480px){ .splash-cards{ grid-template-columns:1fr; } }
.splash-card{
  text-align:left;
  padding:18px;
  border-radius:18px;
  background: rgba(10,22,40,0.85);
  border:1px solid var(--line);
  cursor:pointer;
  transition: all .25s ease;
  backdrop-filter: blur(12px);
}
.splash-card:hover{ transform: translateY(-2px); }
.splash-card.learner{
  border-color: rgba(209,175,95,.55);
  box-shadow: 0 0 30px rgba(209,175,95,.18);
}
.splash-card.demo{
  border-color: rgba(0,212,170,.45);
  box-shadow: 0 0 30px rgba(0,212,170,.12);
}
.splash-card .ic{ font-size:30px; margin-bottom:10px; }
.splash-card .ttl{ font-size:16px; margin-bottom:6px; color:#fff; font-weight:bold; }
.splash-card .desc{ color:rgba(255,255,255,.65); font-size:12px; line-height:1.5; min-height:40px; }
.splash-card .cta{
  margin-top:14px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
}
.splash-card .cta.teal{ color:var(--teal); }
.splash-foot{ font-family:var(--f-head); font-style:italic; color:var(--muted); font-size:11px; letter-spacing:.18em; }

/* Demo banner */
.demo-banner{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background: linear-gradient(90deg, rgba(209,175,95,.18), rgba(209,175,95,.08));
  border-bottom:1px solid var(--line);
  font-size:11.5px;
  backdrop-filter: blur(10px);
}
.demo-banner .dot{ width:8px; height:8px; border-radius:999px; background:var(--gold); box-shadow:0 0 8px var(--gold); animation: pulse 2s ease-in-out infinite; }
.demo-banner .lbl{ flex:1; color:var(--gold-light); letter-spacing:.06em; }
.demo-banner .cta{ color:var(--gold); font-family:var(--f-mono); font-weight:700; text-decoration:none; font-size:11px; letter-spacing:.06em; }

/* ================= IMMERSION ================= */
.imm-block-title{
  display:flex; align-items:baseline; gap:10px;
  padding: 18px 22px 4px; font-size:18px;
}
.imm-block-title small{ color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-left:6px; }

.imm-staircase{ padding: 6px 18px 0; display:flex; flex-direction:column; gap:14px; }
.imm-step{ position:relative; }
.imm-step.locked .step-card{ opacity:.7; }
.step-num{
  font-family:var(--f-mono); color:var(--accent); font-size:10.5px; letter-spacing:.2em;
  margin-bottom:6px; text-shadow:0 0 8px var(--accent);
}
.step-card{
  display:flex; gap:14px; padding:14px;
  border-color: rgba(255,255,255,.06);
  position:relative; overflow:hidden;
}
.step-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px var(--accent);
  opacity:.85;
}
.step-character{
  width:64px; flex:none;
  border-radius:14px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent) 0%, var(--card) 70%);
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.06);
}
.step-emoji{ font-size:34px; }
.step-body{ flex:1; }
.step-tag{
  font-family:var(--f-mono); font-size:10.5px; color:var(--accent); letter-spacing:.14em;
}
.step-title{ font-size:16px; margin: 4px 0 4px; }
.step-desc{ color:var(--muted); font-size:12px; line-height:1.45; margin-bottom:10px; }
.step-meta{ display:flex; align-items:center; gap:10px; font-size:11px; color:var(--muted); margin-bottom:10px; }
.step-bar{ flex:1; height:5px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.step-bar > i{ display:block; height:100%; }
.step-open{
  display:inline-flex; padding:8px 14px;
  background:transparent; border:1px solid currentColor; border-radius:999px;
  font-family:var(--f-body); font-size:12px; cursor:pointer;
  transition: all .2s ease;
}
.step-open:hover{ box-shadow: 0 0 16px var(--accent); }
.step-locked{ font-size:12px; color:var(--muted); padding-top:6px; border-top:1px dashed var(--line); margin-top:6px; }

/* News section */
.news-card{
  display:flex; align-items:center; gap:12px;
  margin: 6px 18px 0; padding:16px 16px 16px 18px;
  text-align:left; cursor:pointer; transition: all .2s ease;
  position:relative; overflow:hidden;
}
.news-card:hover{ border-color: rgba(209,175,95,.5); }
.news-stripe{
  width:3px; align-self:stretch;
  background: linear-gradient(180deg, #5B7FFF, #7BC67E, #D1AF5F);
  border-radius:2px;
  box-shadow: 0 0 10px rgba(255,255,255,.2);
}
.news-body{ flex:1; }
.news-kicker{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; color:var(--gold); text-transform:uppercase; }
.news-ttl{ font-size:14px; margin: 4px 0 8px; line-height:1.35; }
.news-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.news-pill{
  font-family:var(--f-mono); font-size:10px; padding:3px 8px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted);
}
.news-arrow{ font-size:22px; }

.songs-mini{ padding: 6px 18px 0; }
.song-mini{
  display:flex; align-items:center; gap:12px;
  width:100%; text-align:left; padding:12px;
  margin-bottom:8px; cursor:pointer; transition: all .2s ease;
}
.song-mini:hover{ border-color: rgba(209,175,95,.4); }
.song-mini-art{
  width:48px; height:48px; flex:none; border-radius:10px;
  display:grid; place-items:center; color:var(--gold);
  border:1px solid var(--line);
}
.song-mini-meta{ flex:1; }
.song-mini-ttl{ font-family:var(--f-head); font-weight:700; font-size:13.5px; color:var(--white); }
.song-mini-art2{ color:var(--muted); font-size:11px; margin-top:2px; }
.song-mini-lvl{ font-family:var(--f-mono); font-size:10px; padding:3px 8px; border-radius:999px; border:1px solid; }

/* Episode card */
.ep-card{ display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:10px; color: var(--white); }
.ep-num{ color:#FF6B9D; font-size:11px; letter-spacing:.14em; width:46px; flex:none; text-align:center; }
.ep-body{ flex:1; }
.ep-ttl{ font-size:14px; color: var(--white); font-weight:600; }
.ep-meta{ display:flex; gap:6px; margin: 4px 0 8px; color: var(--muted); }
.ep-exos{ display:flex; gap:6px; flex-wrap:wrap; }
.ep-exo{
  font-size:10.5px; padding:4px 8px; border-radius:6px;
  background:rgba(255,107,157,.06); border:1px solid rgba(255,107,157,.2); color:#ffc1d4;
}
.chev.gold{ color:var(--gold); font-size:18px; }

/* News article */
.news-article{ padding:16px; margin-bottom:10px; }
.news-article-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.news-article-ttl{ font-size:16px; line-height:1.3; margin-bottom:6px; }
.news-article-topic{ font-family:var(--f-mono); font-size:10px; color:var(--gold); letter-spacing:.16em; text-transform:uppercase; margin-bottom:10px; }
.news-article-excerpt{ color:var(--muted); font-style:italic; font-size:12.5px; line-height:1.55; padding:10px 12px; border-left:2px solid var(--gold); margin-bottom:12px; }
.news-article-cta{
  background:var(--gold); color:var(--navy); border:none; padding:10px 16px;
  border-radius:10px; font-family:var(--f-body); font-weight:700; font-size:12px;
  cursor:pointer; letter-spacing:.06em;
}

/* Songs full */
.song-full{ display:flex; gap:12px; padding:14px; margin-bottom:10px; align-items:center; color:var(--white); }
.song-full-art{
  width:84px; height:84px; flex:none; border-radius:14px; position:relative; overflow:hidden;
  display:grid; place-items:center; color:var(--gold); border:1px solid var(--line);
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.song-full-body{ flex:1; }
.song-full-ttl{ font-size:15px; color:var(--gold-light); font-weight:700; }
.song-full-art2{ color:var(--muted); font-size:11.5px; margin-top:1px; }
.song-full-preview{ font-style:italic; color:var(--gold-light); font-size:12px; margin: 8px 0; }
.song-full-modes{ display:flex; gap:6px; flex-wrap:wrap; }
.song-mode{ font-size:10.5px; padding:3px 8px; border-radius:6px; background:rgba(209,175,95,.08); border:1px solid var(--line); color:var(--gold-light); }

/* ================= VOCAB ================= */
.vocab-search{
  position:relative; margin: 12px 18px 8px;
  display:flex; align-items:center; gap:10px;
  padding: 10px 14px;
  background: rgba(10,22,40,0.78);
  border:1px solid var(--line);
  border-radius:14px;
}
.vocab-search input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--white); font-family:var(--f-body); font-size:16px; /* 16px min: évite le zoom auto iOS au focus */
}
.vs-icon{ color:var(--gold); display:grid; place-items:center; }

.vocab-family-h{
  display:flex; align-items:center; gap:10px;
  padding: 6px 22px 0; font-size:12px; letter-spacing:.16em;
}
.vocab-family-h .head{ color:var(--gold); font-size:11px; letter-spacing:.18em; }
.vocab-family-h small{ font-size:10.5px; }
.vocab-family-h .dot{ width:8px; height:8px; border-radius:999px; }

.theme-grid{
  padding: 10px 18px 0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; /* colonnes strictement égales, jamais de débordement */
}
.theme-card{
  display:flex; align-items:center; gap:10px; padding:12px;
  cursor:pointer; transition: all .2s ease;
  text-align:left;
  min-width:0; width:100%;
}
.theme-card > svg{ flex:none; }
.theme-card .theme-emoji{ flex:none; }
.theme-card:hover:not(.locked){ border-color: rgba(209,175,95,.5); transform: translateY(-1px); }
.theme-card.locked{ opacity:.55; cursor:not-allowed; }
.theme-emoji{ font-size:34px; }
.theme-body{ flex:1 1 auto; min-width:0; overflow:hidden; }
.theme-name{ font-size:12px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; }
.theme-meta{ font-size:10.5px; color:var(--muted); margin-top:3px; font-family:var(--f-mono); }
.theme-src{ margin-left:4px; }

/* ================= PROFIL — CECRL & badges ================= */
.cefr-journey{ margin: 18px; padding:16px 14px 14px; }
.cefr-h{ font-size:10.5px; letter-spacing:.18em; margin-bottom:14px; text-align:center; }
.cefr-line{ display:flex; align-items:center; justify-content:space-between; }
.cefr-node{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.cefr-dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
}
.cefr-node.done .cefr-dot{
  background: var(--gold); border-color:var(--gold);
  box-shadow: 0 0 10px var(--gold);
}
.cefr-node.current .cefr-dot{
  width:14px; height:14px;
  box-shadow: 0 0 18px var(--gold), 0 0 0 4px rgba(209,175,95,.18);
  animation: pulse 2s ease-in-out infinite;
}
.cefr-code{ font-size:11px; color:var(--muted); }
.cefr-node.done .cefr-code{ color:var(--gold); }
.cefr-node.current .cefr-code{ color:var(--white); text-shadow: 0 0 8px var(--gold); font-weight:700; }
.cefr-xp{ font-size:9.5px; }
.cefr-rail{
  flex:1; height:2px; margin: 0 4px 18px;
  background: rgba(255,255,255,.08);
}
.cefr-rail.done{ background: linear-gradient(90deg, var(--gold), var(--gold-light)); box-shadow: 0 0 10px rgba(209,175,95,.4); }

.rings-row{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding: 0 18px;
}
.big-ring{
  padding:18px; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.big-ring-l{ font-size:11px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; }

.badge-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
  padding: 0 18px;
}
.badge-card{
  padding:14px 8px; text-align:center;
  border-radius:14px;
}
.badge-card.unlocked{ box-shadow: inset 0 0 0 1px rgba(209,175,95,.5), 0 0 14px rgba(209,175,95,.15); }
.badge-card.locked{ opacity:.65; }
.badge-emoji{ font-size:28px; line-height:1; }
.badge-lbl{ font-size:11px; margin: 6px 0 3px; line-height:1.25; }
.badge-card.locked .badge-lbl{ color:var(--muted); }
.badge-req{ font-size:9.5px; letter-spacing:.04em; line-height:1.25; }

.method-card{
  margin: 18px 18px 0; padding:18px;
  position:relative; overflow:hidden;
}
.method-h{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
  position:relative;
}
.mandala-sm{ position:absolute; right:-30px; top:-30px; opacity:.5; pointer-events:none; }
.method-tag{
  font-family:var(--f-mono); font-size:11px; color:var(--gold); letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:8px;
}
.method-body{ font-size:13px; line-height:1.55; color:#cdd5e0; }

.demo-cta{
  margin: 18px 18px 0; padding:20px;
  text-align:center;
  border-color: rgba(209,175,95,.55);
  box-shadow: 0 0 30px rgba(209,175,95,.18);
}
.cta-big{
  display:inline-block; margin-top:6px;
  padding: 14px 22px;
  background: linear-gradient(135deg, #D1AF5F, #F0D080, #B8960C);
  color:var(--navy); text-decoration:none;
  font-family:var(--f-body); font-weight:700; font-size:13px;
  letter-spacing:.06em; border-radius:12px;
  box-shadow: 0 0 24px rgba(209,175,95,.35);
}
  /* === Couleurs explicites : texte blanc sur fond sombre === */
  .theme-card, .song-card, .song-mini, .news-card, .row-line {
    color: var(--white);
    font-family: var(--f-body);
  }
  .theme-card .theme-name { color: var(--white); }
  .theme-card .theme-meta { color: var(--muted); }
  .theme-card.locked .theme-name,
  .theme-card.locked .theme-meta { color: var(--muted); }
  .step-card { color: var(--white); font-family: var(--f-body); }
  .step-title { color: var(--white); }
  .step-desc { color: var(--muted); }
  .news-card, .news-ttl { color: var(--white); }
  .song-card, .song-mini { color: var(--white); }
  .row-line .body .l1 { color: var(--white); }
  /* Cartes boutons Accueil — texte noir par défaut navigateur → forcé blanc */
  .track { color: var(--white); font-family: var(--f-body); }
  .track .ttl { color: var(--muted); }
  .cta-continue { color: var(--white); font-family: var(--f-body); }
  .daily { color: var(--white); font-family: var(--f-body); }
  .daily .ttl { color: var(--white); }
  .big-ring { color: var(--white); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }