:root{
  --pink:#ff74b9;
  --purple:#7a6cff;
  --gold:#ffd166;
}
body{
  background:
    radial-gradient(circle at 10% 0,#3b8df5 0,transparent 24%),
    radial-gradient(circle at 95% 10%,#7c62ff 0,transparent 24%),
    radial-gradient(circle at 30% 100%,#16bfd3 0,transparent 22%),
    linear-gradient(180deg,#07192d,#07101c)!important;
}
.card{
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 24px 58px rgba(0,0,0,.27)!important;
}
.top{
  box-shadow:0 16px 36px rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.18)!important;
}
.brand{display:flex;align-items:center;gap:10px}
.brandMascot{
  width:46px;height:46px;border-radius:14px;background:white;padding:4px;
  border:2px solid rgba(255,255,255,.8);object-fit:contain;
}
.hero{
  grid-template-columns:1.08fr .92fr!important;
  min-height:590px!important;
}
.heroArt{
  height:auto!important;
  min-height:440px!important;
  border-radius:34px!important;
  background:
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.55),transparent 24%),
    radial-gradient(circle at 20% 85%,rgba(255,209,102,.28),transparent 28%),
    radial-gradient(circle at 85% 84%,rgba(255,116,185,.22),transparent 26%),
    linear-gradient(145deg,#59c8fa,#2999ed 55%,#646cff)!important;
  border:2px solid rgba(255,255,255,.33)!important;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.08),0 22px 48px rgba(0,0,0,.2);
  padding:24px;
}
.bigMascot{
  width:min(100%,330px);
  max-height:300px;
  object-fit:contain;
  background:rgba(255,255,255,.16);
  border:3px solid rgba(255,255,255,.34);
  border-radius:34px;
  padding:12px;
  animation:bob 2.7s ease-in-out infinite;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.16));
}
.heroBubble{
  position:relative;
  background:#fff;color:#173d58;font-weight:900;line-height:1.35;
  border-radius:20px;padding:12px 15px;max-width:300px;text-align:center;
  box-shadow:0 13px 25px rgba(0,0,0,.15);
}
.funBadge{
  padding:7px 12px;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),#ff9fd2);
  color:#382445;font-weight:950;font-size:.84rem;
}
.missionTitle{
  padding:14px;border-radius:20px;
  background:linear-gradient(90deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
}
.missionGuide{
  margin:14px 0 0;display:flex;gap:12px;align-items:center;
  padding:11px;border:1px solid rgba(255,255,255,.18);
  border-radius:18px;background:rgba(255,255,255,.06);
}
.missionGuide img{
  width:64px;height:64px;border-radius:18px;background:#fff;padding:4px;
  object-fit:contain;flex:0 0 auto;
}
.missionGuide div{
  background:white;color:#214761;padding:9px 12px;border-radius:16px;
  font-weight:850;line-height:1.35;
}
.floatingMascot{
  position:fixed;right:14px;bottom:14px;z-index:40;
  display:flex;align-items:flex-end;gap:9px;
  animation:bob 3s ease-in-out infinite;
}
.floatingMascot img{
  width:82px;height:82px;border-radius:22px;background:#fff;padding:5px;
  border:2px solid rgba(255,255,255,.8);object-fit:contain;
  box-shadow:0 14px 28px rgba(0,0,0,.25);
}
.floatingMascot .talk{
  max-width:220px;background:#fff;color:#214761;font-weight:900;
  padding:9px 11px;border-radius:17px;box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.primary:hover,.secondary:hover,.ghost:hover{transform:translateY(-2px)}
.primary,.secondary,.ghost{transition:.15s transform}
.desktopIcon{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.10)!important;border-radius:18px!important;
}
.desktopIcon:hover{transform:translateY(-3px)}
.chapter:not(.locked){
  box-shadow:0 10px 20px rgba(0,0,0,.16);
  border-color:rgba(101,231,245,.38);
}
.finalMascot{
  display:flex;justify-content:center;margin:6px 0 16px;
}
.finalMascot img{
  width:140px;height:140px;object-fit:contain;background:white;
  padding:8px;border-radius:30px;box-shadow:0 16px 30px rgba(0,0,0,.22);
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:800px){
 .hero{grid-template-columns:1fr!important}
 .heroArt{min-height:300px!important}
 .bigMascot{width:min(100%,230px)}
 .floatingMascot .talk{display:none}
 .floatingMascot img{width:64px;height:64px}
}


/* --- Version compacte et tailles uniformisées --- */
.hero{min-height:520px!important;grid-template-columns:1.12fr .88fr!important}
.heroArt{
  min-height:320px!important;
  padding:18px!important;
  border-radius:28px!important;
}
.brandMascot{
  width:36px!important;height:36px!important;border-radius:10px!important;padding:3px!important;
}
.bigMascot{
  width:210px!important;
  height:210px!important;
  max-height:210px!important;
  object-fit:contain!important;
  padding:10px!important;
  border-radius:26px!important;
}
.heroBubble{
  max-width:250px!important;
  padding:10px 12px!important;
  font-size:.92rem!important;
}
.funBadge{
  font-size:.76rem!important;
  padding:6px 10px!important;
}
.card{
  padding:20px!important;
}
h1{font-size:clamp(2.2rem,5vw,4rem)!important}
h2{font-size:clamp(1.4rem,2.6vw,2rem)!important}
p{font-size:.98rem}
.missionTitle{padding:12px!important}
.missionIcon{
  width:68px!important;height:68px!important;font-size:2.2rem!important;border-radius:16px!important;
}
.missionGuide{
  padding:10px!important;
  gap:10px!important;
}
.missionGuide img{
  width:50px!important;height:50px!important;border-radius:14px!important;padding:3px!important;
}
.missionGuide div{
  font-size:.92rem!important;
  padding:8px 10px!important;
  border-radius:14px!important;
}
.desktop{
  grid-template-columns:repeat(3,115px)!important;
  gap:16px!important;
}
.desktopIcon{
  padding:10px!important;
  border-radius:16px!important;
}
.desktopIcon .emoji{font-size:2.6rem!important}
.desktopIcon b{font-size:.9rem!important}
.workspaceBody{min-height:300px!important;padding:16px!important}
.codebox{
  padding:14px!important;
}
.chapterStrip{gap:9px!important}
.chapter{
  padding:10px 8px!important;
  border-radius:14px!important;
  font-size:.74rem!important;
}
.chapter .e{font-size:1.5rem!important}
.floatingMascot{
  right:12px!important;bottom:12px!important;
}
.floatingMascot img{
  width:58px!important;height:58px!important;border-radius:16px!important;padding:4px!important;
}
.floatingMascot .talk{
  max-width:180px!important;
  font-size:.84rem!important;
  padding:8px 10px!important;
  border-radius:14px!important;
}
.top{
  padding:8px 12px!important;
}
.pill{
  padding:6px 9px!important;
  font-size:.84rem!important;
}
input[type=text]{
  min-height:42px!important;
  padding:10px 12px!important;
}
.primary,.secondary,.ghost{
  padding:10px 14px!important;
  font-size:.95rem!important;
  border-radius:12px!important;
}
.finalMascot img{
  width:96px!important;height:96px!important;border-radius:22px!important;padding:6px!important;
}
.finalGrid{gap:10px!important}
.finalCard{
  padding:14px 8px!important;
  border-radius:16px!important;
}
.finalCard .e{font-size:1.9rem!important}
.window{border-radius:14px!important}
.windowBody{padding:14px!important}
.sourceGrid,.assetGrid{gap:10px!important}
.dropzone,.draggable,.source,.filecard,.tile,.aiClaim,.option{
  border-radius:12px!important;
}
@media(max-width:800px){
  .hero{grid-template-columns:1fr!important;min-height:auto!important}
  .heroArt{min-height:250px!important}
  .bigMascot{
    width:170px!important;height:170px!important;max-height:170px!important;
  }
  .desktop{
    grid-template-columns:repeat(2, minmax(100px, 1fr))!important;
  }
  .floatingMascot .talk{display:none!important}
  .missionGuide img{
    width:44px!important;height:44px!important;
  }
}


/* --- Mission IA : dossier réel Atomium --- */
.realCase{
  margin:16px 0;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,209,102,.12),rgba(101,231,245,.06));
  border:1px solid rgba(255,255,255,.14);
}
.realCaseTop{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.atomiumVisual{
  width:110px;height:110px;position:relative;flex:0 0 110px;
}
.atomiumVisual .ball{
  position:absolute;width:23px;height:23px;border-radius:50%;
  background:linear-gradient(145deg,#f7fbff,#8fa9bc);
  border:2px solid white;box-shadow:0 4px 10px rgba(0,0,0,.24);z-index:2;
}
.atomiumVisual .line{
  position:absolute;height:5px;background:#b8c7d3;border-radius:99px;
  transform-origin:left center;z-index:1;
}
.atomiumVisual .c{left:44px;top:44px}
.atomiumVisual .b1{left:8px;top:8px}.atomiumVisual .b2{left:80px;top:8px}
.atomiumVisual .b3{left:8px;top:80px}.atomiumVisual .b4{left:80px;top:80px}
.atomiumVisual .b5{left:44px;top:5px}.atomiumVisual .b6{left:5px;top:44px}
.atomiumVisual .b7{left:83px;top:44px}.atomiumVisual .b8{left:44px;top:83px}
.atomiumVisual .l1{left:20px;top:20px;width:45px;transform:rotate(45deg)}
.atomiumVisual .l2{left:55px;top:20px;width:45px;transform:rotate(135deg)}
.atomiumVisual .l3{left:20px;top:92px;width:45px;transform:rotate(-45deg)}
.atomiumVisual .l4{left:55px;top:92px;width:45px;transform:rotate(-135deg)}
.atomiumVisual .l5{left:55px;top:17px;width:40px;transform:rotate(90deg)}
.atomiumVisual .l6{left:17px;top:55px;width:40px}
.atomiumVisual .l7{left:55px;top:55px;width:40px}
.atomiumVisual .l8{left:55px;top:55px;width:40px;transform:rotate(90deg)}
.archiveGrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;
}
.archiveCard{
  min-height:112px;padding:13px;border-radius:16px;border:1px solid #345b77;
  background:linear-gradient(180deg,#17334e,#102238);color:var(--txt);
  text-align:left;transition:.16s transform,.16s border-color;
}
.archiveCard:hover{transform:translateY(-3px);border-color:var(--cyan)}
.archiveCard .folder{font-size:2rem;display:block;margin-bottom:5px}
.archiveCard small{display:block;color:var(--muted);margin-top:5px}
.realSource{
  padding:12px 14px;border-radius:14px;background:#f5f9fc;color:#233e52;
  margin:9px 0;border-left:5px solid #4a9fd3;
}
.realSource b{color:#17354b}
.aiWarning{
  margin:14px 0 8px;padding:10px 12px;border-radius:14px;
  background:rgba(255,125,140,.08);border:1px solid rgba(255,125,140,.35);
}
.aiRepair{
  margin-top:16px;padding:16px;border-radius:18px;
  border:1px solid #395d78;background:linear-gradient(180deg,#0d2135,#0a1928);
}
.aiSlots{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0;
}
.aiSlot{
  min-height:58px;border:2px dashed #3b617d;border-radius:14px;
  display:grid;place-items:center;text-align:center;padding:8px;color:#7895aa;
  background:#071522;
}
.aiSlot.filled{border-style:solid;border-color:var(--cyan);color:var(--txt);background:#102b42}
.moduleBank{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.moduleBank .moduleChip:nth-child(2),.moduleBank .moduleChip:nth-child(5){transform:translateY(4px)}
.moduleChip{
  padding:10px 11px;border-radius:13px;border:1px solid #365a75;
  background:#14304a;color:var(--txt);font-weight:800;text-align:left;
}
.moduleChip:hover{border-color:var(--cyan)}
.moduleChip.chosen{border-color:var(--yellow);background:rgba(255,209,102,.12)}
.aiMeter{
  height:10px;background:#06131f;border:1px solid #31516a;border-radius:99px;
  overflow:hidden;margin:10px 0;
}
.aiMeter > div{height:100%;width:0;background:linear-gradient(90deg,#ff7d8c,#ffd166,#72efae);transition:.35s width}
@media(max-width:800px){
  .archiveGrid,.aiSlots,.moduleBank{grid-template-columns:1fr}
  .atomiumVisual{margin:auto}
}


/* Better Atomium visual */
.atomiumImageWrap{
  width:150px;
  height:150px;
  display:grid;
  place-items:center;
  flex:0 0 150px;
  border-radius:24px;
  background:linear-gradient(180deg,#eff7ff,#dbe8f3);
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 12px 24px rgba(0,0,0,.14);
  padding:8px;
}
.atomiumSvg{
  width:132px;
  height:132px;
  display:block;
}
@media(max-width:800px){
  .atomiumImageWrap{
    width:130px;
    height:130px;
    flex-basis:130px;
    margin:auto;
  }
  .atomiumSvg{
    width:114px;
    height:114px;
  }
}


.atomiumImageWrap{
  width:160px!important;
  height:160px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  padding:0!important;
  background:#eaf2f8!important;
}
.atomiumPhoto{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.voicePanel{
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border-radius:16px;
  padding:12px;
}
.voiceActions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:10px 0;
}
.voiceHelp{
  font-size:.9rem;
  color:#7895aa;
}
@media(max-width:800px){
  .atomiumImageWrap{
    width:130px!important;
    height:130px!important;
  }
}


.voiceMessageCard{
  background:linear-gradient(180deg,#eef8ff,#ffffff);
  border:1px solid #c8dce9;
  border-radius:18px;
  padding:14px;
  color:#1e425b;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}
.voiceMessageTop{
  display:flex;
  align-items:center;
  gap:10px;
}
.voiceAvatar{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#65e7f5,#7a6cff);
  color:#fff;font-size:1.25rem;font-weight:950;
}
.voiceMeta b{display:block;color:#183a53}
.voiceMeta small{color:#68859a}
.voicePlayerRow{
  margin-top:13px;
  display:flex;
  gap:10px;
  align-items:center;
}
.voicePlayBig{
  width:52px!important;
  height:52px!important;
  border-radius:50%!important;
  padding:0!important;
  flex:0 0 52px;
  display:grid;
  place-items:center;
  font-size:1.25rem!important;
}
.voiceWaveAnimated{
  flex:1;
  height:50px;
  display:flex;
  align-items:center;
  gap:3px;
  overflow:hidden;
}
.voiceWaveAnimated span{
  width:4px;
  border-radius:99px;
  background:#7fa9c2;
  height:10px;
  transition:.12s height,.12s background;
}
.voiceWaveAnimated.playing span{
  animation:voiceWave .7s ease-in-out infinite alternate;
  background:#3aa7df;
}
.voiceWaveAnimated span:nth-child(2n){animation-delay:.1s}
.voiceWaveAnimated span:nth-child(3n){animation-delay:.22s}
.voiceWaveAnimated span:nth-child(5n){animation-delay:.34s}
@keyframes voiceWave{
  from{height:8px}
  to{height:38px}
}
.voiceSubtitle{
  min-height:46px;
  margin-top:10px;
  padding:9px 11px;
  border-radius:13px;
  background:#f4f8fb;
  border:1px dashed #bdd1de;
  color:#294a60;
  font-weight:800;
}
.voiceSubtitle .word{
  display:inline-block;
  margin-right:5px;
  opacity:0;
  transform:translateY(4px);
  transition:.2s opacity,.2s transform;
}
.voiceSubtitle .word.visible{
  opacity:1;
  transform:translateY(0);
}


.radioCard{
  background:linear-gradient(180deg,#061522,#0b2133);
  border:1px solid #2b566f;
  border-radius:18px;
  padding:15px;
  color:#eaf7ff;
  box-shadow:inset 0 0 30px rgba(0,0,0,.22);
}
.radioTop{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.radioLabel{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:999px;
  background:#102f45;border:1px solid #356782;
  color:#8fe9ff;font-weight:900;font-size:.82rem;
}
.radioLight{
  width:10px;height:10px;border-radius:50%;
  background:#72efae;box-shadow:0 0 12px #72efae;
}
.morseScreen{
  margin:12px 0;
  min-height:74px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:#020a10;
  border:1px solid #24495f;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.45rem;
  letter-spacing:.16em;
  color:#74f0a7;
  text-shadow:0 0 10px rgba(116,240,167,.45);
  padding:10px;
}
.morseScreen .grp{
  display:inline-block;
  margin:0 7px;
  opacity:.18;
  transition:.16s opacity,.16s transform;
  transform:translateY(3px);
}
.morseScreen .grp.on{
  opacity:1;
  transform:translateY(0);
}
.morseControls{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.morseLegend{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px;
}
.morseLegend div{
  padding:8px 9px;border-radius:11px;
  background:#eef6fb;color:#28475a;
  border:1px solid #c6d8e3;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:800;text-align:center;
}
.radioHint{
  color:#8ba8bb;font-size:.9rem;margin-top:9px;
}
@media(max-width:800px){
  .morseLegend{grid-template-columns:repeat(2,1fr)}
  .morseScreen{font-size:1.15rem;letter-spacing:.1em}
}