/* Les mots de la semaine — même famille visuelle que Dutch Time / Add It Up! */
:root{
  --cream:#FFF6E9;--cream-2:#FDEBCF;--orange:#F5933A;--orange-deep:#E27A22;
  --pink-deep:#EE7AA8;--purple:#8E6FC4;--green:#4CAF7D;--teal:#1E9C9C;--ink:#6B4A2B;
  --shadow:rgba(107,74,43,.22);
  --font:'Fredoka','Baloo 2','Trebuchet MS',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{
  margin:0;font-family:var(--font);color:var(--ink);
  background:
    radial-gradient(circle at 10% 15%, rgba(30,156,156,.18), transparent 25%),
    radial-gradient(circle at 90% 10%, rgba(245,147,58,.30), transparent 25%),
    radial-gradient(circle at 85% 92%, rgba(238,122,168,.22), transparent 26%),
    var(--cream);
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  padding:12px 16px 28px;text-align:center;user-select:none;-webkit-user-select:none;
}
button{font-family:var(--font);color:var(--ink);}
.wrap{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;}
.langs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:2px 0 8px;}
.lg{background:#fff;border:3px solid var(--ink);border-radius:12px;padding:5px 9px;font-weight:700;font-size:.9rem;opacity:.55;cursor:pointer;}
.lg.on{opacity:1;background:var(--cream-2);box-shadow:0 3px 0 var(--shadow);}
h1{font-size:2rem;margin:4px 0 0;line-height:1.1;}
.sub{font-size:.95rem;font-weight:500;opacity:.65;margin:2px 0 14px;}
.top{width:100%;display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.back{text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--shadow);padding:7px 13px;font-weight:700;font-size:1.1rem;}
.back:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow);}
.ttl{flex:1;font-size:1.2rem;font-weight:700;line-height:1.15;margin-right:48px;}
.card{width:100%;background:#fff;border:4px solid var(--ink);border-radius:26px;box-shadow:0 7px 0 var(--shadow);padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.now{text-decoration:none;color:var(--ink);}
.now .lab{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--teal);}
.now .big{font-size:1.55rem;font-weight:700;line-height:1.15;}
.now .dates{font-size:.95rem;opacity:.7;font-weight:500;}
.thumbs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0 2px;}
.thumbs img{width:52px;height:52px;border-radius:12px;border:2px solid var(--cream-2);object-fit:cover;background:#fff;}
.bigbtn{font-weight:700;background:var(--orange);color:#fff;border:4px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--shadow);padding:11px 22px;cursor:pointer;font-size:1.35rem;text-decoration:none;display:inline-block;}
.bigbtn.w{background:#fff;color:var(--ink);}
.bigbtn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--shadow);}
.tip{width:100%;margin-top:14px;background:#E6F5F5;border:3px solid var(--teal);border-radius:20px;padding:10px 14px;text-align:left;font-size:.98rem;line-height:1.35;}
.tip b{display:block;color:var(--teal);margin-bottom:2px;}
.banner{width:100%;margin:0 0 12px;background:#FFF4DB;border:3px solid var(--orange-deep);border-radius:18px;padding:9px 12px;font-weight:600;}
.per{width:100%;margin-top:18px;text-align:left;}
.per h2{font-size:1.1rem;margin:0 0 6px 4px;}
.wk{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--shadow);padding:8px 10px;margin-bottom:8px;text-decoration:none;color:var(--ink);}
.wk:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow);}
.wk .em{font-size:1.7rem;line-height:1;width:36px;text-align:center;}
.wk .tx{flex:1;min-width:0;}
.wk .t1{font-weight:700;font-size:1.02rem;line-height:1.15;display:block;}
.wk .t2{font-size:.85rem;opacity:.65;display:block;}
.wk .st{font-weight:700;font-size:.9rem;color:var(--green);white-space:nowrap;}
.wk.lock{background:#F4EEE6;box-shadow:none;border-style:dashed;opacity:.75;}
.wk.lock .st{color:var(--ink);opacity:.7;}
.wk.cur{border-color:var(--teal);background:#F1FBFB;}
.vac{font-size:.88rem;font-weight:600;opacity:.6;margin:4px 0 8px 6px;}
.foot{font-size:.8rem;opacity:.55;margin-top:22px;line-height:1.4;max-width:420px;}
/* page semaine */
.tabs{display:flex;gap:7px;width:100%;margin:2px 0 12px;}
.tab{flex:1;font-weight:700;font-size:.98rem;background:var(--cream-2);border:3px solid var(--ink);border-radius:15px;padding:9px 3px;cursor:pointer;box-shadow:0 4px 0 var(--shadow);opacity:.6;}
.tab.on{background:#fff;opacity:1;}
.ph{display:flex;align-items:center;justify-content:center;background:var(--cream-2);border-radius:14px;font-weight:700;font-size:1.3rem;padding:8px;width:100%;aspect-ratio:1;line-height:1.1;}
.pic.ph{font-size:4rem;opacity:.5;}
.pic{width:min(72vw,260px);height:min(72vw,260px);border-radius:22px;object-fit:cover;background:#fff;}
.word{font-size:2.4rem;font-weight:700;line-height:1.1;word-break:break-word;}
.nat{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;opacity:.5;}
.mean{font-size:1.1rem;font-weight:500;color:var(--teal);min-height:1.3rem;}
.stars{font-size:1.25rem;letter-spacing:3px;min-height:1.6rem;}
.row{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:4px;}
.rb{font-weight:700;background:var(--cream-2);border:4px solid var(--ink);border-radius:50%;width:72px;height:72px;font-size:1.9rem;cursor:pointer;box-shadow:0 5px 0 var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
.rb small{font-size:.6rem;margin-top:3px;}
.rb:active{transform:translateY(4px);box-shadow:0 1px 0 var(--shadow);}
.rb.mic{background:#FFD9E5;border-color:#C2185B;width:88px;height:88px;font-size:2.4rem;}
.rb.live{animation:pulse .9s infinite;background:#FF5C8A;color:#fff;}
.rb:disabled{opacity:.35;box-shadow:none;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.hint{font-size:.95rem;font-weight:500;opacity:.7;min-height:1.3rem;}
.result{width:100%;margin-top:10px;border-radius:18px;border:4px solid var(--ink);background:#fff;padding:10px 12px;display:none;}
.result.show{display:block;}
.result .big{font-size:1.4rem;font-weight:700;}
.result .heard{font-size:1rem;opacity:.75;margin-top:3px;}
.result.ok{background:#E8F7EE;border-color:var(--green);}
.result.almost{background:#FFF4DB;border-color:var(--orange-deep);}
.result.ko{background:#FFE3EA;border-color:#C2185B;}
.nav{display:flex;gap:12px;width:100%;margin-top:12px;}
.nav .bigbtn{flex:1;font-size:1.2rem;padding:10px;}
.nav .bigbtn:disabled{opacity:.4;}
.speaker{font-size:2.4rem;background:var(--cream-2);border:4px solid var(--ink);border-radius:50%;width:80px;height:80px;cursor:pointer;box-shadow:0 5px 0 var(--shadow);display:flex;align-items:center;justify-content:center;margin:4px auto 10px;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;}
.opt{background:#fff;border:4px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--shadow);padding:6px;cursor:pointer;aspect-ratio:1;display:flex;align-items:center;justify-content:center;max-width:100%;}
.opt img{width:100%;height:100%;object-fit:cover;border-radius:14px;}
.opt.good{background:#E8F7EE;border-color:var(--green);}
.opt.bad{background:#FFE3EA;border-color:#C2185B;}
.score{font-size:1rem;font-weight:700;}
.list{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
.li{background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--shadow);padding:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;}
.li img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;}
.li .w{font-weight:700;font-size:1.05rem;line-height:1.1;}
.li .m{font-size:.8rem;color:var(--teal);line-height:1.1;min-height:.9rem;}
.li .s{font-size:.75rem;}
.overlay{position:fixed;inset:0;background:rgba(255,246,233,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:50;padding:20px;}
.overlay h2{font-size:2.1rem;margin:0;}
.overlay .big{font-size:4rem;margin:0;}
.nosr{font-size:.85rem;opacity:.65;margin-top:6px;}
.shake{animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.pop{animation:pop .35s;}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}