/* Pilou — mini-site prototype. Identité visuelle reprise du prototype CP validé. */
:root{
  --bg1:#aee3f5; --bg2:#fdf3d8;
  --card:#ffffff; --ink:#3a3354;
  --accent:#ff8a5c; --accent2:#7c6cf0;
  --good:#3dbb7e; --warn:#f5a623; --bad:#e8638c;
  --radius:26px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,'Segoe UI',system-ui,sans-serif;
  background:
    radial-gradient(circle at 50% -8%, #fff6d8 0%, rgba(255,246,216,0) 42%),
    radial-gradient(circle at 88% 8%, #ffe7a8 0%, rgba(255,231,168,0) 34%),
    radial-gradient(circle at 10% 18%, #c8efff 0%, rgba(200,239,255,0) 40%),
    linear-gradient(180deg, #a6dff4 0%, #c3ecf6 45%, #fdf3d8 100%);
  background-attachment:fixed;
  min-height:100vh; color:var(--ink);
  display:flex; flex-direction:column; align-items:center;
  padding:14px; font-size:18px;
}
/* nuages doux en arrière-plan */
body:before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38px 22px at 18% 26%, #ffffffcc 0%, transparent 70%),
    radial-gradient(52px 28px at 24% 30%, #ffffffcc 0%, transparent 70%),
    radial-gradient(34px 20px at 78% 20%, #ffffffb0 0%, transparent 70%),
    radial-gradient(48px 26px at 84% 24%, #ffffffb0 0%, transparent 70%);
}

/* ---- décor de fond (scène nature + thème matière) ---- */
.scene{position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none;}
.scene-sun{
  position:absolute; top:7%; right:9%; width:92px; height:92px; border-radius:50%;
  background:radial-gradient(circle,#fff6cf 0%,#ffe27a 58%,#ffd54a 100%);
  box-shadow:0 0 50px 18px #ffe9a055;
  animation:sunGlow 6s ease-in-out infinite;
}
@keyframes sunGlow{0%,100%{box-shadow:0 0 50px 18px #ffe9a055}50%{box-shadow:0 0 70px 26px #ffe9a077}}
.scene-hills{position:absolute; left:0; bottom:0; width:100%; height:44vh; min-height:230px;}
.scene-wash{position:absolute; inset:0; background:var(--theme,transparent); opacity:.10; transition:background .6s ease;}
.scene-motifs{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none;}
.scene-motifs span{
  position:absolute; font-size:46px; opacity:.18; will-change:transform;
  animation:drift 9s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-18px) rotate(5deg)}}
.stage{width:100%; max-width:620px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.topbar{width:100%; display:flex; justify-content:space-between; align-items:center; min-height:34px;}
.profile-chip{
  background:#ffffffcc; border-radius:999px; padding:6px 14px; font-size:14px; font-weight:700;
  cursor:pointer; border:2px solid #fff; box-shadow:0 3px 10px #00000010;
}
.streak-chip{background:#fff3df; border-radius:999px; padding:6px 12px; font-size:14px; font-weight:700; border:2px solid #ffd9a8;}
.progress{display:flex; gap:8px; margin-top:2px;}
.dot{width:14px;height:14px;border-radius:50%;background:#ffffff88;border:2px solid #ffffff; transition:background .3s, box-shadow .3s;}
.dot.on{background:var(--accent); box-shadow:0 0 0 3px #ff8a5c33, 0 2px 5px rgba(217,106,64,.3);}
.card{
  background:linear-gradient(180deg,#ffffff 0%,#fbfaff 100%);
  border-radius:var(--radius);
  padding:22px; width:100%;
  box-shadow:0 12px 30px rgba(58,51,84,.14), inset 0 1px 0 #ffffff;
  border:1px solid #ffffff;
  text-align:center;
}
h1{font-size:27px;margin:0 0 6px; letter-spacing:-.4px;}
h2{font-size:23px;margin:0 0 10px; letter-spacing:-.3px;}
p{line-height:1.5;margin:8px 0;}
.muted{color:#8b85a3;font-size:15px;}
@keyframes cardIn{from{opacity:0; transform:translateY(10px) scale(.99)}to{opacity:1; transform:none}}
.card{animation:cardIn .32s ease both;}
button{
  font-family:inherit; font-size:19px; font-weight:700;
  border:none; border-radius:22px; cursor:pointer;
  padding:15px 24px; color:#fff;
  background:linear-gradient(180deg,#ffa177 0%,var(--accent) 100%);
  box-shadow:0 5px 0 #d96a40, 0 9px 16px rgba(217,106,64,.28);
  transition:transform .08s, box-shadow .08s;
  min-height:58px;
}
button:active{transform:translateY(3px); box-shadow:0 2px 0 #d96a40, 0 4px 8px rgba(217,106,64,.22);}
button.alt{background:linear-gradient(180deg,#917fff 0%,var(--accent2) 100%); box-shadow:0 5px 0 #5a4cc4, 0 9px 16px rgba(90,76,196,.28);}
button.alt:active{box-shadow:0 2px 0 #5a4cc4;}
button.ghost{background:#fff;color:var(--accent2);border:3px solid var(--accent2);box-shadow:none;font-size:16px;min-height:48px;padding:10px 18px;}
button:disabled{opacity:.45; pointer-events:none;}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}

/* ---- Pilou ---- */
.pilou-wrap{position:relative; width:190px; height:190px; flex:none; transition:transform .8s;}
.pilou-wrap.mini{width:120px;height:120px;}
.pilou{width:100%;height:100%; filter:drop-shadow(0 10px 8px rgba(58,51,84,.18));}
/* petite ombre au sol sous le compagnon */
.pilou-wrap:after{
  content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:58%; height:14px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(58,51,84,.20) 0%, rgba(58,51,84,0) 70%);
  z-index:-1;
}
.bubble{
  background:linear-gradient(180deg,#ffffff 0%,#fbfaff 100%); border-radius:20px; padding:14px 18px;
  box-shadow:0 8px 20px rgba(58,51,84,.14); position:relative; border:1px solid #fff;
  font-size:17.5px; line-height:1.45; width:100%;
  min-height:56px; text-align:center;
}
.bubble:after{
  content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  border:12px solid transparent; border-bottom-color:#fff; border-top:none;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pilou-wrap.floaty{animation:float 3s ease-in-out infinite;}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.eyes{transform-origin:center 86px; animation:blink 4.2s infinite;}
.mouth-talk{display:none;}
.talking .mouth-talk{display:block;}
.talking .mouth-smile{display:none;}
@keyframes chew{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.talking .mouth-talk{transform-origin:center 118px; animation:chew .28s infinite;}

/* ---- évolutions (stades cumulatifs) ---- */
.evo1,.evo2,.evo3,.evo4,.evo5{opacity:0; transition:opacity 1.2s;}
.pilou-wrap.s1 .evo1{opacity:1;}
.pilou-wrap.s2 .evo1,.pilou-wrap.s2 .evo2{opacity:1;}
.pilou-wrap.s3 .evo1,.pilou-wrap.s3 .evo2,.pilou-wrap.s3 .evo3{opacity:1;}
.pilou-wrap.s4 .evo1,.pilou-wrap.s4 .evo2,.pilou-wrap.s4 .evo3,.pilou-wrap.s4 .evo4{opacity:1;}
.pilou-wrap.s5 .evo1,.pilou-wrap.s5 .evo2,.pilou-wrap.s5 .evo3,.pilou-wrap.s5 .evo4,.pilou-wrap.s5 .evo5{opacity:1;}
.pilou-wrap.s5{transform:scale(1.08);}
@keyframes flap{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
.pilou-wrap.s1 .wingL,.pilou-wrap.s2 .wingL,.pilou-wrap.s3 .wingL,.pilou-wrap.s4 .wingL,.pilou-wrap.s5 .wingL{transform-origin:62px 95px; animation:flap 1.6s ease-in-out infinite;}
.pilou-wrap.s1 .wingR,.pilou-wrap.s2 .wingR,.pilou-wrap.s3 .wingR,.pilou-wrap.s4 .wingR,.pilou-wrap.s5 .wingR{transform-origin:128px 95px; animation:flap 1.6s ease-in-out infinite reverse;}
@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:1}}
.pilou-wrap.s5 .aura circle{animation:twinkle 1.8s infinite;}
.pilou-wrap.s5 .aura circle:nth-child(2){animation-delay:.6s;}
.pilou-wrap.s5 .aura circle:nth-child(3){animation-delay:1.2s;}
.zzz{position:absolute; top:-6px; right:-2px; font-size:30px; animation:float 2s infinite;}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.egg{font-size:110px; cursor:pointer; user-select:none; line-height:1; display:inline-block;
  filter:drop-shadow(0 8px 10px rgba(58,51,84,.22)); transition:transform .12s;}
.egg:active{transform:scale(.94);}
.egg.shaking{animation:shake .5s infinite;}

/* ---- cadeau à ouvrir (adoption) ---- */
.giftbox{position:relative; width:150px; height:152px; margin:14px auto 6px; cursor:pointer; user-select:none;}
.giftbox span{position:absolute; left:50%; transform:translateX(-50%);}
.gift-body{
  bottom:0; width:120px; height:92px; border-radius:12px;
  background:linear-gradient(180deg,#ff9ec4 0%,#ff6fa5 100%);
  box-shadow:0 12px 18px rgba(58,51,84,.22), inset 0 -8px 0 rgba(0,0,0,.07);
}
.gift-body:after{content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:24px; height:100%; background:#ffd54a;}
.gift-lid{
  top:36px; width:140px; height:34px; border-radius:10px; z-index:2;
  background:linear-gradient(180deg,#ffadcd 0%,#ff7aac 100%);
  box-shadow:0 6px 10px rgba(58,51,84,.18);
  transition:transform .5s cubic-bezier(.3,-0.4,.5,1.3), opacity .5s;
}
.gift-lid:after{content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:24px; height:100%; background:#ffd54a;}
.gift-bow{top:6px; width:48px; height:32px; z-index:3; transition:transform .5s, opacity .5s;}
.gift-bow:before, .gift-bow:after{
  content:""; position:absolute; top:0; width:23px; height:32px;
  background:linear-gradient(180deg,#ffe27a,#ffd54a); border:2px solid #e8a94e;
}
.gift-bow:before{left:0; border-radius:70% 18% 70% 18%; transform:rotate(-10deg);}
.gift-bow:after{right:0; border-radius:18% 70% 18% 70%; transform:rotate(10deg);}
.giftbox.shaking{animation:shake .45s;}
.giftbox.open .gift-lid{transform:translateX(-50%) translateY(-94px) rotate(-20deg); opacity:0;}
.giftbox.open .gift-bow{transform:translateX(-50%) translateY(-124px) rotate(42deg); opacity:0;}
.giftbox.open .gift-body{animation:giftpop .5s ease;}
@keyframes giftpop{0%{transform:translateX(-50%) scaleY(1)}40%{transform:translateX(-50%) scaleY(.84)}100%{transform:translateX(-50%) scaleY(1)}}

/* ---- exercices ---- */
.bigQ{font-size:38px; font-weight:800; margin:10px 0 18px; letter-spacing:1px;}
.bigQ.small{font-size:26px;}
.choices{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.choices button{font-size:26px;}
.choices.text button{font-size:19px;}
.stars{font-size:28px; min-height:36px; letter-spacing:4px;}
input[type=text],input[type=number],textarea{
  width:100%; font-family:inherit; font-size:22px; padding:14px;
  border:3px solid #d8d3ee; border-radius:18px; text-align:center;
  color:var(--ink); outline:none; background:#fff;
}
textarea{min-height:96px; text-align:left; line-height:1.6; font-size:20px;}
input:focus, textarea:focus{border-color:var(--accent2);}
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px 0;}
.chip{padding:7px 14px; border-radius:999px; font-size:15px; font-weight:700; color:#fff; box-shadow:0 3px 7px rgba(58,51,84,.16);}
.chip.ok{background:var(--good);} .chip.warn{background:var(--warn);} .chip.bad{background:var(--bad);}
.tip{
  background:#f4f1ff; border-radius:16px; padding:12px 16px; text-align:left;
  font-size:15px; margin-top:10px; border-left:5px solid var(--accent2);
}
.problem-text{
  background:#fffdf4; border:2px solid #f0e8c8; border-radius:18px;
  padding:16px; font-size:19px; line-height:1.6; text-align:left;
}
.bars-svg{width:100%; max-width:480px; margin:14px auto; display:block;}

/* ---- fluence ---- */
.reading{
  text-align:left; font-size:21px; line-height:1.95; background:#fffdf4;
  border-radius:18px; padding:18px; border:2px solid #f0e8c8;
  max-height:46vh; overflow-y:auto;
}
.reading span{padding:1px 3px; border-radius:6px;}
.reading span.read{background:#c9f2dd;}
.reading span.skip{background:#ffe2b8;}
.timer{font-size:34px; font-weight:800; color:var(--accent2);}
.result-big{font-size:52px; font-weight:900; color:var(--accent); margin:6px 0;}
.gauge{height:18px; background:#eee9ff; border-radius:999px; overflow:hidden; margin:10px 0;}
.gauge>div{height:100%; background:linear-gradient(90deg,var(--good),#7de0ae); width:0%; transition:width 1s; border-radius:999px;}
.digest{
  text-align:left; background:#fff; border:2px dashed #c9c2e8; border-radius:18px;
  padding:16px; font-size:15.5px; line-height:1.6;
}
.micdot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--bad);margin-right:6px;animation:blink2 1s infinite;}
@keyframes blink2{50%{opacity:.2}}

/* ---- carte ---- */
.map-svg{width:100%; height:auto; display:block; border-radius:20px;}
.island{cursor:pointer;}
.island .halo{opacity:0;}
.island.current .halo{opacity:1; animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.island.current .halo{transform-origin:center; transform-box:fill-box;}
.island.locked{cursor:default;}
.island-name{font-size:16px; font-weight:800; fill:#2c2742; stroke:#ffffff; stroke-width:4.5px; paint-order:stroke; stroke-linejoin:round;}
.island-icon{font-size:34px;}
.island-state{font-size:20px;}

/* ---- profils ---- */
.profile-card{
  display:flex; align-items:center; gap:14px; width:100%;
  background:#fff; border:3px solid #e8e3f8; border-radius:20px;
  padding:14px 18px; cursor:pointer; text-align:left; font-size:18px; font-weight:700;
  color:var(--ink); box-shadow:none; min-height:64px;
}
.profile-card{transition:border-color .12s, box-shadow .12s, transform .12s;}
.profile-card:active{transform:translateY(2px); border-color:var(--accent2); box-shadow:0 4px 12px rgba(124,108,240,.18);}
.profile-card .lvl{margin-left:auto; font-size:13px; background:#f4f1ff; color:var(--accent2); padding:5px 10px; border-radius:999px;}
.profile-card.danger{border-color:#e88; background:#fff6f6;}
.profile-card.danger:active{border-color:#d55; box-shadow:0 4px 12px rgba(220,80,80,.2);}
.level-pick{display:flex; flex-direction:column; gap:12px; margin-top:10px;}

/* ---- menu des matières (entraînement libre) ---- */
.subject-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0;}
.subject-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:20px 10px; min-height:104px; border:none; border-radius:22px; position:relative; overflow:hidden;
  background:var(--sc,#7c6cf0); color:#fff; font-size:17px; font-weight:800;
  box-shadow:0 6px 0 rgba(0,0,0,.16), 0 10px 18px rgba(0,0,0,.12);
}
.subject-card:before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%); pointer-events:none;}
.subject-card:active{transform:translateY(3px); box-shadow:0 3px 0 rgba(0,0,0,.16), 0 5px 10px rgba(0,0,0,.12);}
.subj-ic{font-size:38px; line-height:1; filter:drop-shadow(0 2px 2px rgba(0,0,0,.18));}

/* ---- choix du compagnon (adoption) ---- */
.char-pick{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0;
}
@media(max-width:430px){ .char-pick{grid-template-columns:repeat(2,1fr);} }
.char-card{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px;
  padding:12px 6px 14px; min-height:128px; border:3px solid #e8e3f8; border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%,#f8f6ff 100%); color:var(--ink);
  font-size:13.5px; font-weight:800; box-shadow:0 4px 12px rgba(58,51,84,.08);
  transition:transform .1s, border-color .1s, box-shadow .1s;
}
.char-card:active{transform:translateY(2px); border-color:var(--accent2); background:#f3f0ff; box-shadow:0 2px 6px rgba(124,108,240,.18);}
.char-illo{width:80px; height:80px; display:block;}
.char-illo .pilou{width:80px; height:80px; filter:drop-shadow(0 5px 5px rgba(58,51,84,.16));}
.char-name{font-size:15px; font-weight:800; color:var(--ink); line-height:1.15;}
.char-species{font-size:11px; font-weight:600; color:#8b85a3; line-height:1.1;}

.confetti{position:fixed; top:-40px; font-size:26px; animation:fall linear forwards; z-index:50; pointer-events:none;}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);}}
.hidden{display:none !important;}
.footer-note{font-size:12.5px;color:#9a94b5;margin:10px 0 20px;text-align:center;max-width:620px;}