/* ==========================================================================
   Pages en préparation : chantier « Apprendre la langue » + Boutique
   ========================================================================== */
.ch-wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;padding-top:clamp(20px,4vw,44px);padding-bottom:30px}
.ch-stage{border:1.5px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:7px 7px 0 var(--ink);background:linear-gradient(180deg,#cfe8f3 0%,#eaf4f6 62%,var(--bg) 100%)}
[data-theme=dark] .ch-stage{background:linear-gradient(180deg,#16374b 0%,#1d3a4c 62%,var(--bg) 100%)}
.ch-scene{display:block;width:100%;height:auto}
.ch-scene *{transform-box:fill-box}
.ch-hero-g,.bq-globi{cursor:pointer}
.ch-text h1{font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.05;margin:.3em 0 .4em}
.ch-text p{color:var(--muted);font-size:1.05rem;line-height:1.6;max-width:52ch}
.ch-h2{font-family:var(--f-display);font-weight:500;font-size:1.3rem;margin:22px 0 8px}
.ch-progress{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin:18px 0 14px;font-weight:700;font-size:.85rem}
.ch-progress div{height:14px;border-radius:9px;border:1.5px solid var(--ink);overflow:hidden;background:var(--surface)}
.ch-progress i{display:block;height:100%;width:var(--p);background:repeating-linear-gradient(45deg,#f2b33d 0 10px,#e5a220 10px 20px);background-size:28px 28px;animation:ch-grow 1.6s cubic-bezier(.2,.8,.2,1) both,ch-tape 1s linear infinite}
@keyframes ch-grow{from{width:0}}
@keyframes ch-tape{to{background-position:28px 0}}
.ch-langs{display:flex;flex-wrap:wrap;gap:8px}
.ch-langs span{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1.5px solid var(--ink);border-radius:99px;background:var(--surface);font-weight:700;font-size:.88rem;animation:ch-pop .5s calc(.6s + var(--i) * .1s) cubic-bezier(.2,1.5,.4,1) both}
.ch-langs i{font-style:normal;font-size:1.15rem}
@keyframes ch-pop{from{opacity:0;transform:translateY(10px) scale(.8)}}
.ch-notify{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:480px}
.ch-notify input[type=email]{flex:1;min-width:200px;padding:12px 14px;border:1.5px solid var(--ink);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
.ch-notify .btn{margin:0!important}
.ch-notify .ch-st{flex-basis:100%;color:var(--muted);font-size:.78rem}
.ch-notify.done .ch-st{color:#2d7a4f;font-weight:700}

/* --- animations de la scène --- */
.ch-pick{transform-origin:100% 50%;animation:ch-swing 1.6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes ch-swing{0%{transform:rotate(-8deg)}45%{transform:rotate(55deg)}58%{transform:rotate(58deg)}66%{transform:rotate(-9deg)}72%{transform:rotate(-6deg)}100%{transform:rotate(-8deg)}}
.ch-globi.big .ch-body{transform-origin:50% 100%;animation:ch-squash 1.6s ease-in-out infinite}
@keyframes ch-squash{0%,55%{transform:none}60%{transform:translateY(-4px) scale(1.02,.98)}68%{transform:scale(1.05,.94)}80%,100%{transform:none}}
.ch-eyes{transform-origin:50% 50%;animation:ch-blink 4.2s infinite}
@keyframes ch-blink{0%,92%,100%{transform:none}95%{transform:scaleY(.1)}}
.ch-sparks path{transform-box:view-box;transform-origin:0 0;opacity:0;animation:ch-spark 1.6s infinite}
@keyframes ch-spark{0%,64%{opacity:0;transform:translate(566px,380px) rotate(var(--a)) translateX(2px)}67%{opacity:1}80%{opacity:0;transform:translate(566px,380px) rotate(var(--a)) translateX(22px)}100%{opacity:0;transform:translate(566px,380px) rotate(var(--a)) translateX(22px)}}
.ch-bits rect{transform-box:view-box;opacity:0;animation:ch-bit 1.6s infinite}
.ch-bits rect:nth-child(2){animation-name:ch-bit2}.ch-bits rect:nth-child(3){animation-name:ch-bit3}
@keyframes ch-bit{0%,65%{opacity:0;transform:translate(566px,380px)}68%{opacity:1}82%{transform:translate(536px,350px) rotate(90deg)}100%{opacity:0;transform:translate(522px,410px) rotate(200deg)}}
@keyframes ch-bit2{0%,65%{opacity:0;transform:translate(566px,380px)}68%{opacity:1}82%{transform:translate(585px,346px) rotate(-80deg)}100%{opacity:0;transform:translate(600px,408px) rotate(-190deg)}}
@keyframes ch-bit3{0%,65%{opacity:0;transform:translate(566px,380px)}68%{opacity:1}84%{transform:translate(556px,334px) rotate(60deg)}100%{opacity:0;transform:translate(548px,404px) rotate(160deg)}}
.ch-rock{transform-origin:50% 100%;animation:ch-rock 1.6s infinite}
@keyframes ch-rock{0%,64%,80%,100%{transform:none}68%{transform:translateY(2px) scale(1.03,.96)}}
.ch-shovel{transform-origin:10% 90%;animation:ch-dig 2s ease-in-out infinite}
@keyframes ch-dig{0%,100%{transform:rotate(0)}35%{transform:rotate(-28deg)}55%{transform:rotate(24deg)}70%{transform:rotate(18deg)}}
.ch-globi.mini .ch-body{transform-origin:50% 100%;animation:ch-hop 2s ease-in-out infinite}
@keyframes ch-hop{0%,100%{transform:none}50%{transform:translateY(-5px) rotate(4deg)}}
.ch-dirt circle{transform-box:view-box;opacity:0;animation:ch-toss 2s infinite}
.ch-dirt circle:nth-child(2){animation-delay:.08s}.ch-dirt circle:nth-child(3){animation-delay:.16s}
@keyframes ch-toss{0%,50%{opacity:0;transform:translate(784px,398px)}54%{opacity:1;transform:translate(784px,398px);animation-timing-function:cubic-bezier(.2,.7,.4,1)}72%{transform:translate(826px,330px);animation-timing-function:cubic-bezier(.6,0,.8,.4)}90%{opacity:1;transform:translate(862px,394px)}94%,100%{opacity:0;transform:translate(862px,394px)}}
.ch-trolley{animation:ch-trolley 7s ease-in-out infinite}
@keyframes ch-trolley{0%,8%{transform:translateX(400px)}32%,70%{transform:translateX(250px)}94%,100%{transform:translateX(400px)}}
.ch-hook{animation:ch-hook 7s ease-in-out infinite}
@keyframes ch-hook{0%,32%{transform:translateY(-40px)}48%,58%{transform:translateY(0)}70%,100%{transform:translateY(-40px)}}
.ch-letter{opacity:0;animation:ch-letter 28s infinite;animation-delay:calc(var(--k) * 7s)}
@keyframes ch-letter{0%,24.9%{opacity:1}25%,100%{opacity:0}}
.ch-b{transform-origin:0 50%;animation:ch-build 9s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--d) * .35s)}
@keyframes ch-build{0%{transform:scaleX(0);opacity:0}9%{transform:scaleX(1);opacity:1}86%{transform:scaleX(1);opacity:1}94%,100%{transform:scaleX(1);opacity:0}}
.ch-sun{transform-origin:50% 50%;animation:ch-sun 6s ease-in-out infinite}
@keyframes ch-sun{50%{transform:scale(1.08)}}
.ch-cloud{animation:ch-cloud 14s ease-in-out infinite}
@keyframes ch-cloud{50%{transform:translateX(-40px)}}
.ch-bubble{animation:ch-bubble 3.2s ease-in-out infinite}
@keyframes ch-bubble{50%{transform:translateY(-6px)}}
.ch-hat{transform-origin:50% 100%}
.ch-rush .ch-pick,.ch-rush .ch-sparks path,.ch-rush .ch-bits rect,.ch-rush .ch-rock,.ch-rush .ch-globi.big .ch-body{animation-duration:.7s}
.ch-wrap.paused .ch-scene *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.ch-scene *,.ch-progress i,.ch-langs span,.bq-scene *,.bq-card{animation:none!important}.ch-sparks,.ch-bits,.ch-dirt{display:none}}

/* ---------- Boutique ---------- */
.bq-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,50px);align-items:center;padding-top:clamp(26px,5vw,60px);padding-bottom:20px}
.bq-text h1{font-family:var(--f-display);font-weight:500;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;margin:.3em 0 .4em}
.bq-text h1 em{color:var(--orange)}
.bq-text p{color:var(--muted);font-size:1.08rem;line-height:1.6;max-width:48ch;margin-bottom:18px}
.bq-art{border:1.5px solid var(--ink);border-radius:26px;box-shadow:7px 7px 0 var(--ink);background:radial-gradient(circle at 60% 30%,#fde6d6,var(--surface) 70%);overflow:hidden}
[data-theme=dark] .bq-art{background:radial-gradient(circle at 60% 30%,#3a2a24,var(--surface) 70%)}
.bq-scene{display:block;width:100%;height:auto}
.bq-scene *{transform-box:fill-box}
.bq-globi{animation:bq-pop 3.6s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes bq-pop{0%,8%{transform:translateY(70px)}22%,78%{transform:translateY(0)}92%,100%{transform:translateY(70px)}}
.bq-wave{transform-origin:0% 100%;animation:bq-wave .6s ease-in-out infinite alternate}
@keyframes bq-wave{from{transform:rotate(-12deg)}to{transform:rotate(18deg)}}
.bq-flap.l{transform-origin:100% 0;animation:bq-flapl 3.6s ease-in-out infinite}.bq-flap.r{transform-origin:0 0;animation:bq-flapr 3.6s ease-in-out infinite}
@keyframes bq-flapl{0%,8%,92%,100%{transform:rotate(30deg)}22%,78%{transform:rotate(-6deg)}}
@keyframes bq-flapr{0%,8%,92%,100%{transform:rotate(-30deg)}22%,78%{transform:rotate(6deg)}}
.bq-stars path{opacity:0;animation:bq-star 3.6s infinite;animation-delay:calc(var(--i) * .2s)}
@keyframes bq-star{0%,18%{opacity:0}28%{opacity:1}60%{opacity:.2}75%,100%{opacity:0}}
.bq-stack{animation:bq-stack 5s ease-in-out infinite;transform-origin:50% 100%}
@keyframes bq-stack{50%{transform:rotate(-1.5deg)}}
.bq-soon{padding-top:30px;padding-bottom:50px}
.bq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bq-card{position:relative;padding:22px;border:1.5px solid var(--ink);border-radius:20px;background:var(--surface);opacity:0;transform:translateY(16px);transition:opacity .5s calc(var(--i) * 70ms),transform .5s calc(var(--i) * 70ms) cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.bq-card.in{opacity:1;transform:none}
.bq-card:hover{box-shadow:5px 5px 0 var(--orange)}
.bq-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--soft);font-size:2rem;margin-bottom:12px}
.bq-card:hover .bq-ico{animation:bq-wiggle .5s}
@keyframes bq-wiggle{25%{transform:rotate(-10deg)}75%{transform:rotate(8deg)}}
.bq-tag{position:absolute;top:18px;right:18px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:#f2b33d;color:#1b2433}
.bq-card h3{margin:0 0 6px;font-size:1.1rem}
.bq-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.bq-meanwhile{margin-top:22px;text-align:center;color:var(--muted)}
.bq-meanwhile a{color:var(--blue);font-weight:700}

@media (max-width:900px){
  .ch-wrap,.bq-hero{grid-template-columns:minmax(0,1fr)}
  .bq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ch-stage,.bq-art{border-radius:18px;box-shadow:4px 4px 0 var(--ink)}
  .bq-grid{grid-template-columns:minmax(0,1fr)}
  .ch-notify{flex-direction:column;align-items:stretch}
}
.ch-globi.box .ch-hat{display:none}

/* ==========================================================================
   « Apprendre la langue » : Globi bâtit le mur de lettres (langue-globi.js)
   Charte T2W : fond crème, encre marine, bordure 1.5px + ombre portée pleine,
   Fraunces pour les titres, Work Sans pour le texte, accent orange.
   ========================================================================== */
:root{--lgg-sky:#e6eef0;--lgg-sun:#f6dcc7;--lgg-ground:#e5dccb;--lgg-hat:#f2b33d;
  --lgg-t-en:#d9ecf2;--lgg-l-en:#1f5f7a;--lgg-t-ja:#fbe0da;--lgg-l-ja:#a8323e;--lgg-t-es:#fbe9c8;--lgg-l-es:#9a6a12;--lgg-t-ko:#e1efdc;--lgg-l-ko:#2d7a4f;--lgg-limb:#0b1f33}
[data-theme=dark]{--lgg-sky:#18283a;--lgg-sun:#243247;--lgg-ground:#1d2836;
  --lgg-t-en:#1d3a4a;--lgg-l-en:#9fd4ea;--lgg-t-ja:#3d2228;--lgg-l-ja:#f3a3ac;--lgg-t-es:#3a3020;--lgg-l-es:#f1c46d;--lgg-t-ko:#1f3526;--lgg-l-ko:#9bd6a8;--lgg-limb:#e9eef2}
.lgg{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-top:clamp(22px,4vw,48px);padding-bottom:clamp(24px,4vw,40px)}
.lgg-stage{position:relative;border:1.5px solid var(--ink);border-radius:24px;background:var(--lgg-sky);overflow:hidden;box-shadow:6px 6px 0 var(--ink)}
.lgg-svg{display:block;width:100%;height:auto;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.lgg-hint{position:absolute;left:14px;top:12px;margin:0;font-size:.76rem;font-weight:600;color:var(--ink);background:var(--surface);border:1.5px solid var(--ink);border-radius:99px;padding:4px 11px;pointer-events:none;animation:lgg-hint 2.4s ease-in-out 3}
@keyframes lgg-hint{50%{transform:translateY(-3px)}}
.lgg-sun{fill:var(--lgg-sun)}.lgg-clouds{fill:var(--surface);opacity:.9}.lgg-ground{fill:var(--lgg-ground)}
.lgg-line{stroke:var(--ink)}.lgg-limb{stroke:var(--lgg-limb)}.lgg-hand{fill:var(--lgg-limb)}.lgg-shadow{fill:var(--ink);opacity:.16}
.lgg-hatfill{fill:var(--lgg-hat)}.lgg-hatline{stroke:var(--lgg-hat)}
.lgg-blank{fill:var(--lgg-t-es)}
.lgg-bub{fill:var(--surface);stroke:var(--ink)}.lgg-bubfill{stroke:var(--surface)}
.lgg-say{font:600 17px var(--f-body,system-ui);fill:var(--ink)}.lgg-say2{font:500 13.5px var(--f-body,system-ui);fill:var(--muted)}
.lgg-tile{stroke:var(--ink)}
.lgg-brick.k-en .lgg-tile{fill:var(--lgg-t-en)}.lgg-brick.k-en .lgg-letter{fill:var(--lgg-l-en)}
.lgg-brick.k-ja .lgg-tile{fill:var(--lgg-t-ja)}.lgg-brick.k-ja .lgg-letter{fill:var(--lgg-l-ja)}
.lgg-brick.k-es .lgg-tile{fill:var(--lgg-t-es)}.lgg-brick.k-es .lgg-letter{fill:var(--lgg-l-es)}
.lgg-brick.k-ko .lgg-tile{fill:var(--lgg-t-ko)}.lgg-brick.k-ko .lgg-letter{fill:var(--lgg-l-ko)}
.lgg-letter{font:700 30px var(--f-body,system-ui)}.lgg-letter.cjk{font-size:26px}
.lgg-brick,.lgg-globi{cursor:pointer;outline:none}
.lgg-brick:focus-visible .lgg-tile{stroke:var(--orange);stroke-width:5}
.lgg-globi:focus-visible{outline:none}.lgg-globi:focus-visible .lgg-shadow{fill:var(--orange);opacity:.8}
.lgg-dust{fill:var(--lgg-ground);stroke:var(--ink)}.lgg-star{fill:var(--lgg-hat)}
.lgg-text h1{font-family:var(--f-display);font-weight:500;font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.04;letter-spacing:-.01em;margin:.35em 0 .45em;text-wrap:balance}
.lgg-lead{color:var(--muted);font-size:1.06rem;line-height:1.6;max-width:44ch;margin:0 0 20px}
.lgg-langs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.lgg-langs li{display:inline-flex;align-items:baseline;gap:8px;padding:6px 13px;border-radius:99px;background:var(--surface);border:1.5px solid var(--line);font-size:.9rem;transition:border-color .3s,box-shadow .3s,transform .3s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.lgg-langs b{font-weight:700}.lgg-langs span{color:var(--muted)}
.lgg-langs li[data-on]{border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:translate(-2px,-2px)}
.lgg-h2{font-family:var(--f-display);font-weight:500;font-size:1.3rem;margin:0 0 8px}
@media (max-width:900px){.lgg{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.lgg-stage{border-radius:18px;box-shadow:4px 4px 0 var(--ink)}.lgg-hint{font-size:.68rem;padding:3px 9px}}
@media (prefers-reduced-motion:reduce){.lgg-hint,.lgg-langs li{animation:none;transition:none}}