/* Parcours de révision G5 · U1 L3 « Les différences de caractère » */
:root{ --ink:#1c2541; --muted:#5b6b86; --ok:#2a9134; --ko:#e0334c; --main:#ff8a00; --main2:#ffd9a8; --card:#fff; --shadow:0 6px 0 rgba(28,37,65,.14),0 12px 26px rgba(28,37,65,.14); --plus:#12a150; --moins:#e0334c; --comme:#f59e0b; }
*{box-sizing:border-box} html,body{margin:0;min-height:100%}
body{ font-family:"Nunito","Trebuchet MS","Segoe UI",system-ui,"PingFang SC","Microsoft YaHei","Apple Color Emoji","Segoe UI Emoji",sans-serif; color:var(--ink); padding-top:40px;
  background:radial-gradient(circle at 10% 8%,#ffe3b3 0,transparent 32%),radial-gradient(circle at 92% 18%,#d6e8ff 0,transparent 30%),linear-gradient(180deg,#f7f9ff,#fff 70%); background-attachment:fixed; }
body.map-savane{--main:#e08a00;--main2:#ffe2a8} body.map-foret{--main:#2e9d5b;--main2:#cdeed8} body.map-espace{--main:#7c4dff;--main2:#e0d4ff}
button{font:inherit;cursor:pointer}
.app{max-width:1040px;margin:0 auto;padding:8px 12px 40px}
.zh{color:var(--muted);font-weight:700}
.btn{border:0;border-radius:999px;background:var(--main);color:#fff;font-weight:900;padding:11px 24px;font-size:17px;box-shadow:0 5px 0 rgba(0,0,0,.2);transition:transform .1s}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(2px)} .btn.alt{background:#fff;color:var(--ink);border:3px solid var(--main)} .btn.sm{font-size:13px;padding:6px 12px} .btn.dark{background:var(--ink)} .btn[disabled]{opacity:.45;pointer-events:none}
.card{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} h2{margin:0 0 8px;font-size:22px}
.pill{background:#fff;border-radius:999px;padding:5px 13px;font-weight:900;box-shadow:var(--shadow);font-size:14.5px;white-space:nowrap}
/* accueil */
.hero{text-align:center;padding:8px 0}
.hero h1{margin:0;font-size:clamp(30px,6vw,52px);line-height:1.05} .hero p{margin:8px auto 0;max-width:640px;font-weight:800;color:var(--muted)}
.maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.mapcard{border:4px solid #e1e6f0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow);text-align:center;padding:0} .mapcard.on{border-color:var(--main);transform:scale(1.03)}
.mapcard .pv{height:110px;display:flex;align-items:center;justify-content:center;font-size:54px;gap:8px} .mapcard b{display:block;padding:8px 6px 10px;font-size:17px}
.avatars{display:flex;gap:8px;flex-wrap:wrap}
.avatars button{font-size:32px;background:#fff;border:3px solid #e1e6f0;border-radius:16px;padding:4px 9px;line-height:1.2} .avatars button.on{border-color:var(--main);background:var(--main2);transform:scale(1.08)}
/* hud */
.hud{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 10px}
.hud .sp{flex:1}
.pw{border:3px solid #e1e6f0;background:#fff;border-radius:14px;padding:4px 10px;font-weight:900;font-size:15px} .pw.on{border-color:var(--ok);background:#e7f7e9} .pw[disabled]{opacity:.4}
/* plateau */
.board{position:relative;width:100%;aspect-ratio:16/10;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);border:5px solid #fff}
.board .deco{position:absolute;font-size:clamp(20px,4vw,38px);opacity:.75;pointer-events:none}
.board svg{position:absolute;inset:0;width:100%;height:100%}
.node{position:absolute;transform:translate(-50%,-50%);width:clamp(18px,3.4vw,30px);height:clamp(18px,3.4vw,30px);border-radius:50%;background:#fff;border:3px solid rgba(28,37,65,.35);display:grid;place-items:center;font-size:clamp(10px,2vw,16px);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.node.st{width:clamp(34px,6.6vw,58px);height:clamp(34px,6.6vw,58px);border-color:var(--ink);font-size:clamp(16px,3.2vw,28px);background:#fff7d6;font-weight:900}
.node.st.cur{background:#ffd23f;animation:pulse 1.2s infinite} .node.st.done{background:#bdf0c5;border-color:var(--ok)}
.node .n{position:absolute;top:-8px;left:-8px;background:var(--ink);color:#fff;border-radius:50%;width:20px;height:20px;font-size:12px;display:grid;place-items:center}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.15)}}
.pawn{position:absolute;transform:translate(-50%,-72%);font-size:clamp(28px,6vw,52px);transition:left .38s ease-in-out,top .38s ease-in-out;z-index:5;filter:drop-shadow(0 4px 3px rgba(0,0,0,.35))}
.boardbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px;align-items:center}
/* jeux */
.stage{position:relative;background:#fff;border-radius:26px;box-shadow:var(--shadow);min-height:52vh;padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.prompt{font-size:clamp(19px,3.2vw,28px);font-weight:900;text-align:center} .prompt small{display:block;font-size:.55em;color:var(--muted);font-weight:700}
.fb{min-height:46px;text-align:center;font-weight:900;font-size:clamp(16px,2.6vw,22px)} .fb.ok{color:var(--ok)} .fb.ko{color:var(--ko)} .fb small{display:block;color:var(--muted);font-weight:700;font-size:.72em}
.choices{display:grid;gap:10px;width:100%;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.choice{border:4px solid var(--main);background:#fff;border-radius:18px;padding:12px;font-weight:900;font-size:clamp(17px,2.8vw,24px);box-shadow:0 5px 0 rgba(0,0,0,.12)} .choice:hover{background:var(--main2)}
.choice.ok{background:var(--ok);border-color:var(--ok);color:#fff} .choice.ko{background:var(--ko);border-color:var(--ko);color:#fff;animation:shake .35s} .choice.gone{visibility:hidden}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pic{max-width:min(90%,330px);border-radius:18px;box-shadow:0 8px 22px rgba(28,37,65,.22)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:640px}
.mem{aspect-ratio:1/1;border-radius:16px;border:4px solid var(--main);background:var(--main2);display:grid;place-items:center;font-weight:900;font-size:clamp(13px,2.4vw,20px);padding:4px;text-align:center;overflow:hidden;perspective:600px}
.mem.back{font-size:34px;color:var(--main)} .mem.up{background:#fff} .mem.ok{background:#e7f7e9;border-color:var(--ok);pointer-events:none} .mem img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%} .cols2>div{display:grid;gap:10px;align-content:start}
.tile{border:4px solid #dfe5f0;border-radius:16px;background:#fff;padding:8px;min-height:64px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;font-size:clamp(14px,2.3vw,19px);box-shadow:0 4px 0 rgba(0,0,0,.1)}
.tile img{max-width:100%;max-height:96px;border-radius:10px} .tile:hover{border-color:var(--main)} .tile.sel{border-color:var(--main);background:var(--main2)} .tile.done{border-color:var(--ok);background:#e7f7e9;pointer-events:none;opacity:.75} .tile.bad{animation:shake .35s;border-color:var(--ko)} .tile.pulse{animation:pulse2 .6s 3}
@keyframes pulse2{50%{transform:scale(1.07);border-color:var(--main)}}
.slots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:54px;padding:8px;border:3px dashed #cfd7e6;border-radius:16px;width:100%}
.chip{border:3px solid var(--main);background:#fff;border-radius:14px;padding:8px 14px;font-weight:900;font-size:clamp(16px,2.8vw,24px);box-shadow:0 4px 0 rgba(0,0,0,.12)} .chip.used{visibility:hidden} .chip.ok{border-color:var(--ok);background:#e7f7e9} .chip.bad{animation:shake .35s;border-color:var(--ko)}
.letters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.blank{display:inline-block;min-width:1.2em;border-bottom:4px solid var(--ink);text-align:center;font-weight:900;font-size:clamp(24px,5vw,40px);margin:0 3px}
.scard{border:3px solid var(--main);background:#fff;border-radius:16px;padding:8px 12px;text-align:center;min-width:130px} .scard b{display:block;font-size:20px} .scard span{display:inline-block;background:var(--main2);border-radius:999px;padding:1px 9px;margin:2px;font-size:14px;font-weight:800}
.vs{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.cmpA{color:var(--plus);font-weight:900} .cmpM{color:var(--moins);font-weight:900} .cmpC{color:var(--comme);font-weight:900}
.bars{display:flex;gap:26px;align-items:flex-end;justify-content:center;height:180px;margin:8px 0}
.bars div{width:54px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,var(--main),var(--main2));display:flex;align-items:flex-end;justify-content:center;font-weight:900;padding-bottom:4px;transition:height .8s} .bars span{display:block;text-align:center;font-weight:900}
select.sel{font:inherit;font-weight:900;font-size:clamp(16px,2.6vw,22px);padding:8px 10px;border:3px solid var(--main);border-radius:12px;background:#fff}
.sentence{font-size:clamp(18px,3vw,30px);font-weight:900;text-align:center;line-height:2}
.bonus{position:fixed;inset:0;z-index:2147482400;background:rgba(20,30,60,.7);display:flex;align-items:center;justify-content:center;padding:16px}
.bonus .box{background:#fff;border-radius:24px;padding:22px;max-width:520px;width:100%;text-align:center;box-shadow:0 14px 44px rgba(0,0,0,.45);animation:pop .35s}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.bonus .big{font-size:64px;line-height:1.1}
.stars{font-size:46px} .bigtxt{font-size:clamp(34px,8vw,64px);font-weight:900;color:var(--main)}
.cert{border:6px double var(--main);border-radius:26px;background:#fffdf5;padding:20px;text-align:center}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:2147482500;overflow:hidden} .confetti i{position:absolute;top:-20px;font-style:normal;font-size:26px;animation:fall linear forwards} @keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
.hint{color:var(--muted);font-size:13px}
@media(max-width:560px){.cards{grid-template-columns:repeat(3,1fr)} .cols2{gap:8px}}

.choice.ok .cmpA,.choice.ok .cmpM,.choice.ok .cmpC,.choice.ko .cmpA,.choice.ko .cmpM,.choice.ko .cmpC{color:#fff}