/* Layout : tablette paysage. Gauche = enfant (avatar, score, chemin, mur de gommettes). Droite = missions / boutique / réglages.
   Deux univers graphiques (data-skin) : « prairie » pour Alice, « chantier » pour Basile. */
:root{
  --bg:#fbf6ee; --bg2:#f3ecdf; --card:#ffffff; --fg:#3a3230; --muted:#8a7f79; --line:#eadfd3;
  --accent:#e98fb0; --accent-soft:#fde7ef; --accent-2:#8cc47a; --accent-2-soft:#e9f5e1;
  --ok:#5fb36a; --ok-soft:#e3f4e4; --wait:#f0b23e; --wait-soft:#fdf1d6; --danger:#e06b5c; --gold:#f6c343;
  --scene-1:#cfe7b8; --scene-2:#b9dba0; --scene-3:#a6cf8c; --scene-sun:#f9d976; --scene-cloud:#ffffff;
  --display:"Fredoka","Nunito",system-ui,sans-serif; --body:"Nunito",system-ui,sans-serif;
  --shadow:0 8px 24px rgba(80,50,30,.10); --r:24px;
}
[data-skin="prairie"]{--bg:#fff6f9;--bg2:#f2f8ea;--accent:#e98fb0;--accent-soft:#fde7ef;--accent-2:#8cc47a;--accent-2-soft:#e9f5e1;
  --scene-1:#cfe7b8;--scene-2:#b9dba0;--scene-3:#a6cf8c;--scene-sun:#f9d976;--scene-cloud:#fff}
[data-skin="chantier"]{--bg:#f3f8ff;--bg2:#fff6e3;--accent:#f28c3a;--accent-soft:#ffe9d6;--accent-2:#4aa8ff;--accent-2-soft:#e2f0fb;
  --scene-1:#e3cfa6;--scene-2:#c6dcec;--scene-3:#f6c343;--scene-sun:#e23b3b;--scene-cloud:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#211c1b;--bg2:#2a2422;--card:#2f2927;--fg:#f3ebe4;--muted:#b2a59c;--line:#453c38;
  --accent:#f09ebd;--accent-soft:#4a2c38;--accent-2:#8cc47a;--accent-2-soft:#2c3f28;
  --ok:#7fc687;--ok-soft:#2b4030;--wait:#f4c261;--wait-soft:#4a3c1f;--danger:#ef8071;--gold:#f9d262;
  --scene-1:#2f3f2a;--scene-2:#2a3826;--scene-3:#243121;--scene-sun:#d8b85a;--scene-cloud:#3a3330;
  --shadow:0 8px 24px rgba(0,0,0,.4);color-scheme:dark}
  :root:not([data-theme="light"])[data-skin="prairie"]{--bg:#241c20;--bg2:#1f261c;--accent:#f09ebd;--accent-soft:#4a2c38;--accent-2:#8cc47a;--accent-2-soft:#2c3f28;
    --scene-1:#2f3f2a;--scene-2:#2a3826;--scene-3:#243121;--scene-sun:#d8b85a;--scene-cloud:#3a3330}
  :root:not([data-theme="light"])[data-skin="chantier"]{--bg:#1c2229;--bg2:#2a241b;--accent:#f49a52;--accent-soft:#4a3222;--accent-2:#6fb6f2;--accent-2-soft:#243a4e;
    --scene-1:#3a3225;--scene-2:#283039;--scene-3:#8a6f22;--scene-sun:#c74343;--scene-cloud:#33393f}}
:root[data-theme="dark"]{
  --bg:#211c1b;--bg2:#2a2422;--card:#2f2927;--fg:#f3ebe4;--muted:#b2a59c;--line:#453c38;
  --accent:#f09ebd;--accent-soft:#4a2c38;--accent-2:#8cc47a;--accent-2-soft:#2c3f28;
  --ok:#7fc687;--ok-soft:#2b4030;--wait:#f4c261;--wait-soft:#4a3c1f;--danger:#ef8071;--gold:#f9d262;
  --scene-1:#2f3f2a;--scene-2:#2a3826;--scene-3:#243121;--scene-sun:#d8b85a;--scene-cloud:#3a3330;
  --shadow:0 8px 24px rgba(0,0,0,.4);color-scheme:dark}
:root[data-theme="dark"][data-skin="prairie"]{--bg:#241c20;--bg2:#1f261c;--accent:#f09ebd;--accent-soft:#4a2c38;--accent-2:#8cc47a;--accent-2-soft:#2c3f28;
  --scene-1:#2f3f2a;--scene-2:#2a3826;--scene-3:#243121;--scene-sun:#d8b85a;--scene-cloud:#3a3330}
:root[data-theme="dark"][data-skin="chantier"]{--bg:#1c2229;--bg2:#2a241b;--accent:#f49a52;--accent-soft:#4a3222;--accent-2:#6fb6f2;--accent-2-soft:#243a4e;
  --scene-1:#3a3225;--scene-2:#283039;--scene-3:#8a6f22;--scene-sun:#c74343;--scene-cloud:#33393f}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);background-image:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);color:var(--fg);font-family:var(--body);font-size:17px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px;
  display:flex;flex-direction:column;gap:10px;overflow:hidden;transition:background-color .4s}
@media (min-width:900px){body{font-size:18px}}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
input,textarea,select{font:inherit;color:inherit}

/* Décor : scène en bas de l'écran + gommettes qui flottent */
.scene{position:fixed;left:0;right:0;bottom:0;height:34vh;pointer-events:none;z-index:0;opacity:.9;will-change:transform;contain:strict}
.scene svg{width:100%;height:100%;display:block}
.decor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.decor{display:none}
@keyframes drift{to{transform:translateY(-130vh) rotate(25deg)}}
.top,.main,.offline{position:relative;z-index:1}

/* Gommettes (SVG) et emojis de secours */
.stk{display:block;width:100%;height:100%}
.stk.emo{display:grid;place-items:center;font-size:1.9em;line-height:1;filter:none}

/* Barre du haut */
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.who{display:flex;gap:10px}
.who button{display:flex;align-items:center;gap:10px;padding:6px 18px 6px 8px;border-radius:999px;background:var(--card);box-shadow:var(--shadow);font-family:var(--display);font-weight:600;font-size:1.1rem;border:3px solid transparent;transition:transform .15s,border-color .2s;min-height:56px}
.who button:active{transform:scale(.95)}
.who button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.who .av{width:44px;height:44px;flex:none}
.spacer{flex:1}
.date{font-family:var(--display);font-weight:600;color:var(--muted);text-transform:capitalize}
.parent-btn{padding:10px 16px;border-radius:14px;color:var(--muted);font-weight:800;font-size:.9rem;border:2px dashed var(--line);display:flex;align-items:center;gap:8px;min-height:48px;background:color-mix(in srgb,var(--card) 60%,transparent)}
.parent-btn.on{border-style:solid;border-color:var(--wait);color:var(--fg);background:var(--wait-soft)}
.badge{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;padding:0 .4em;border-radius:999px;background:var(--wait);color:#3a2a08;font-size:.8rem;font-weight:800;animation:pulse 1.5s infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
.offline{background:var(--danger);color:#fff;text-align:center;padding:6px;border-radius:10px;font-weight:800;font-size:.85rem}

/* Corps */
.main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:14px}
@media (max-width:760px),(orientation:portrait){body{overflow:auto}.main{grid-template-columns:1fr}.panel{min-height:340px}}
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* Colonne enfant */
.hero{padding:14px 18px 10px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;background:linear-gradient(135deg,var(--accent-soft),var(--accent-2-soft))}
.hero .big{width:84px;height:84px;display:block}
.hero .big.happy{animation:jump .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes jump{30%{transform:translateY(-18px) rotate(-10deg) scale(1.15)}60%{transform:translateY(0) rotate(8deg)}}
.hero h1{margin:0;font-family:var(--display);font-weight:700;font-size:1.7rem;text-wrap:balance;line-height:1.1}
.hero .score{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--muted);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.hero .score b{color:var(--fg);font-size:1.9rem;font-variant-numeric:tabular-nums;display:inline-block;line-height:1}
.hero .score b.bump{animation:bump .4s}
@keyframes bump{50%{transform:scale(1.4);color:var(--gold)}}
.tonight{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:800;color:var(--muted);flex-wrap:wrap}
.tonight .dots{display:flex;gap:5px}
.tonight .dot{width:22px;height:22px;border-radius:50%;background:var(--card);border:2px solid var(--line);display:grid;place-items:center;font-size:.75rem;line-height:1}
.tonight .dot.on{background:var(--ok);border-color:var(--ok);color:#fff}
.tonight .dot.wait{background:var(--wait);border-color:var(--wait);color:#3a2a08}

/* Chemin vers les récompenses */
.path{padding:38px 26px 78px;position:relative}
.track{height:14px;border-radius:999px;background:color-mix(in srgb,var(--bg2) 60%,transparent);position:relative;box-shadow:inset 0 2px 3px rgba(0,0,0,.08)}
.track .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .9s cubic-bezier(.3,1.2,.5,1)}
.track .walker{position:absolute;top:50%;width:44px;height:44px;transform:translate(-50%,-92%);transition:left .9s cubic-bezier(.3,1.2,.5,1);z-index:2}
.track .walker.walk{animation:walk .9s}
@keyframes walk{0%,100%{transform:translate(-50%,-92%)}25%{transform:translate(-50%,-125%) rotate(-8deg)}50%{transform:translate(-50%,-92%)}75%{transform:translate(-50%,-125%) rotate(8deg)}}
.track .goal{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:1.15rem;line-height:1;background:var(--card);border:3px solid var(--line);border-radius:999px;width:2.1em;height:2.1em;display:grid;place-items:center;transition:transform .3s,border-color .3s}
.track .goal.open{border-color:var(--gold);box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 35%,transparent);transform:translate(-50%,-50%) scale(1.15)}
.track .goal.alt{top:calc(50% + 36px)}
.track .goal small{position:absolute;top:112%;font-size:.6rem;font-weight:800;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.path-foot{padding:0 18px 4px;font-size:.9rem;color:var(--muted);font-weight:800;text-align:center;min-height:2.6em;text-wrap:balance}

.wall{flex:1;min-height:100px;overflow:auto;padding:10px 16px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:6px;align-content:start}
.sticker{aspect-ratio:1;transform:rotate(var(--r,0deg))}
.sticker.new{animation:pop .6s cubic-bezier(.3,1.6,.5,1) both}
.sticker.gone{animation:unpeel .5s ease-in forwards}
@keyframes pop{0%{transform:scale(0) rotate(-60deg)}70%{transform:scale(1.25) rotate(var(--r,0deg))}100%{transform:scale(1) rotate(var(--r,0deg))}}
@keyframes unpeel{to{transform:scale(0) rotate(60deg);opacity:0}}
.empty{color:var(--muted);padding:20px 16px;text-align:center;font-weight:800;grid-column:1/-1}

/* Colonne droite */
.tabs{display:flex;gap:6px;padding:10px 10px 0}
.tabs button{flex:1;padding:14px 6px;border-radius:16px 16px 0 0;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--muted);background:var(--bg2);min-height:52px}
.tabs button[aria-selected="true"]{background:var(--card);color:var(--fg);box-shadow:0 -4px 0 var(--accent) inset}
.list{flex:1;min-height:0;overflow:auto;padding:12px 12px 16px;display:flex;flex-direction:column;gap:10px}
.list>*{flex-shrink:0}
.item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;border:2px solid var(--line);background:var(--card);position:relative;transition:transform .15s;min-height:72px}
.item.doable:active{transform:scale(.985)}
.item .ico{font-size:2.2rem;line-height:1;width:1.3em;text-align:center}
.item .lbl{font-weight:800;line-height:1.3;min-width:0}
.item .lbl small{display:block;color:var(--muted);font-weight:800;font-size:.8rem;margin-top:3px}
.pts{font-family:var(--display);font-weight:600;font-size:1.1rem;padding:0 18px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--accent-soft);color:var(--fg);white-space:nowrap;min-width:6.6em}
.item.doable .pts{background:var(--accent);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 70%,black)}
.item.doable .pts:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 70%,black)}
.item.pending{border-color:var(--wait);background:var(--wait-soft)}
.item.pending .pts{background:var(--wait);color:#3a2a08}
.item.done{border-color:var(--ok);background:var(--ok-soft)}
.item.done .pts{background:var(--ok);color:#fff}
.item.locked .pts{background:var(--bg2);color:var(--muted)}
.item.locked button.pts{cursor:not-allowed}
.item.unlock{animation:glow 1.2s}
@keyframes glow{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 50%,transparent);transform:scale(1.03)}}
.stamp{position:absolute;right:16px;top:50%;font-size:3.2rem;line-height:1;color:var(--ok);transform:translateY(-50%) scale(3) rotate(-20deg);opacity:0;animation:stamp .6s cubic-bezier(.2,1.4,.4,1) forwards;pointer-events:none}
@keyframes stamp{to{transform:translateY(-50%) scale(1) rotate(-12deg);opacity:1}}
.sub{padding:0 14px;color:var(--muted);font-size:.85rem;font-weight:800}
.pact{display:flex;gap:8px;align-items:center}
.pact .no{min-width:44px;min-height:44px;border-radius:12px;font-weight:800;font-size:.95rem;background:var(--card);border:2px solid var(--line);padding:0 10px}

/* Bouton « maintenir pour valider » */
.hold{position:relative;overflow:hidden;padding:0 22px;min-height:60px;border-radius:18px;font-family:var(--display);font-weight:600;font-size:1.15rem;background:var(--ok-soft);color:var(--fg);border:3px solid var(--ok);user-select:none;-webkit-user-select:none;min-width:12em;display:inline-flex;align-items:center;justify-content:center}
.hold .bar{position:absolute;inset:0;width:0;background:var(--ok);transition:width .1s linear;z-index:0}
.hold.holding .bar{transition:width 1.1s linear;width:100%}
.hold span{position:relative;z-index:1}
.hold.holding span{color:#fff}
.hold.sm{min-height:48px;padding:0 14px;font-size:.95rem;min-width:9.5em;border-radius:14px}
.hold.done-anim{animation:bump .4s}

/* Réglages parents */
.pbar{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;background:var(--wait-soft);border-bottom:1px solid var(--line);align-items:center;font-size:.9rem}
.pbar b{margin-right:auto}
.pbar button:not(.hold),.edit-tools button,.item-edit button{padding:8px 12px;min-height:40px;border-radius:10px;background:var(--card);border:2px solid var(--line);font-weight:800;font-size:.85rem}
.edit{display:flex;flex-direction:column;gap:14px}
.edit h3{margin:4px 0 0;font-family:var(--display);font-weight:600;font-size:1.1rem}
.item-edit{display:grid;grid-template-columns:3.4em 1fr;gap:8px 10px;padding:10px;border:2px solid var(--line);border-radius:14px;background:var(--bg2)}
.item-edit .emo{font-size:1.6rem;text-align:center;width:100%;padding:4px;border:2px solid var(--line);border-radius:10px;background:var(--card)}
.item-edit textarea{width:100%;min-height:2.6em;padding:6px 8px;border:2px solid var(--line);border-radius:10px;background:var(--card);resize:vertical;font-weight:700;line-height:1.3}
.item-edit .row2{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.85rem;font-weight:700;color:var(--muted)}
.item-edit input[type=number]{width:4.5em;padding:6px;border:2px solid var(--line);border-radius:10px;background:var(--card);text-align:center;font-weight:800}
.item-edit label{display:flex;gap:4px;align-items:center}
.item-edit .ml{margin-left:auto;display:flex;gap:6px}
.item-edit .del{color:var(--danger)}
.edit-tools{display:flex;gap:8px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:700;color:var(--muted)}
.field input,.field select{padding:8px 10px;border:2px solid var(--line);border-radius:10px;background:var(--bg2);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{width:56px;height:56px;padding:4px;border-radius:14px;border:3px solid var(--line);background:var(--card)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.savebar{position:sticky;bottom:0;background:var(--card);padding:10px 0 2px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--line)}

/* Fenêtres */
.modal{position:fixed;inset:0;background:rgba(40,25,20,.5);display:grid;place-items:center;padding:20px;z-index:20;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.box{background:var(--card);color:var(--fg);border-radius:26px;padding:24px;max-width:440px;width:100%;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;text-align:center;animation:popin .35s cubic-bezier(.3,1.5,.5,1);position:relative;overflow:hidden}
.box::before{content:"";position:absolute;inset:0 0 auto;height:8px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
@keyframes popin{from{transform:scale(.7);opacity:0}}
.box h2{margin:0;font-family:var(--display);font-weight:700;font-size:1.35rem;text-wrap:balance}
.box p{margin:0;color:var(--muted);font-weight:800}
.box .big{font-size:3.8rem;line-height:1;width:1.4em;height:1.4em;margin:6px auto 0;display:grid;place-items:center}
.box .parent-note{background:var(--wait-soft);border-radius:14px;padding:12px;font-size:.95rem;font-weight:700}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{padding:0 22px;min-height:54px;display:inline-flex;align-items:center;border-radius:16px;font-family:var(--display);font-weight:600;font-size:1.1rem;background:var(--bg2)}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 70%,black)}
.btn:active{transform:translateY(2px)}
.box input.code{font-size:1.6rem;text-align:center;letter-spacing:.4em;width:100%;padding:10px;border-radius:12px;border:2px solid var(--line);background:var(--bg2)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:800;box-shadow:var(--shadow);z-index:30;max-width:90vw;text-align:center;animation:popin .3s}
.toast.gold{background:var(--gold);color:#3a2a08;font-family:var(--display);font-size:1.2rem;padding:16px 26px}

/* Écran « Bravo ! » */
.cheer{position:fixed;inset:0;z-index:22;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.55));animation:fade .25s;pointer-events:none}
.cheer .card{background:var(--card);border-radius:30px;padding:26px 36px;box-shadow:var(--shadow);text-align:center;animation:popin .5s cubic-bezier(.3,1.6,.5,1);display:flex;flex-direction:column;align-items:center;gap:6px}
.cheer .stk,.cheer .emo{width:120px;height:120px;animation:wiggle 1s ease-in-out infinite}
.cheer .emo{font-size:4.5rem}
@keyframes wiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) scale(1.08)}}
.cheer h2{margin:0;font-family:var(--display);font-weight:700;font-size:2rem;color:var(--fg)}
.cheer .plus{font-family:var(--display);font-weight:700;font-size:2.6rem;color:var(--accent);line-height:1}
.cheer p{margin:0;color:var(--muted);font-weight:800}
.cheer.out{animation:fadeout .4s forwards}
@keyframes fadeout{to{opacity:0}}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:25;overflow:hidden}
.confetti .stk{position:absolute;top:-10%;width:44px;height:44px;animation:fall 1.9s ease-in forwards}
.confetti .emo{font-size:1.8rem}
@keyframes fall{to{transform:translateY(120vh) rotate(380deg)}}
.burst{position:fixed;left:50%;top:40%;pointer-events:none;z-index:26}
.burst span{position:absolute;font-size:2rem;animation:burst 1s ease-out forwards;--dx:0px;--dy:0px}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.decor{display:none}}

/* ---------- Gommettes vivantes : lent, doux, organique ---------- */
.wall .sticker.still .stk, .wall .sticker.still .stk *{animation:none!important}
.stk{animation:float 4.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-3%) rotate(1.2deg)}}
.stk .breathe,.stk .eyes,.stk .ears,.stk .cheeks,.stk .nibble,.stk .paws,.stk .petals,.stk .sway,.stk .leaves,.stk .beat,.stk .wheel,.stk .rumble,.stk .light,.stk .shine,.stk .arm,.stk .wobble,.stk .cable,.stk .blade,.stk .puff{transform-box:fill-box;transform-origin:center}
.stk .breathe{animation:breathe 4s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:50% 100%}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
.stk .eyes{animation:blink 5.5s infinite;animation-delay:var(--d,0s)}
@keyframes blink{0%,91%,100%{transform:scaleY(1)}93%,96%{transform:scaleY(.08)}}
.stk .ears{animation:ears 4s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:50% 100%}
@keyframes ears{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}60%{transform:rotate(3deg)}}
.stk .cheeks{animation:cheeks 4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes cheeks{0%,100%{opacity:.7}50%{opacity:1}}
.stk .nibble{animation:nibble 1.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes nibble{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
.stk .paws{animation:paws 1.4s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:50% 0}
@keyframes paws{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.stk .petals{animation:petals 7s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes petals{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.stk .sway{animation:sway 5s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:50% 100%}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.stk .leaves{animation:leaves 3.2s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:50% 100%}
@keyframes leaves{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.stk .beat{animation:beat 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(1)}36%{transform:scale(1.05)}50%{transform:scale(1)}}
.stk .wheel{animation:wheel 6s linear infinite;animation-delay:var(--d,0s)}
@keyframes wheel{to{transform:rotate(360deg)}}
.stk .rumble{animation:rumble 1.1s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes rumble{0%,100%{transform:translateY(0)}50%{transform:translateY(-.8px)}}
.stk .light{animation:light 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes light{0%,100%{opacity:1}50%{opacity:.35}}
.stk .shine{animation:shine 4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes shine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
.stk .arm{animation:arm 5s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:0 70%}
@keyframes arm{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
.stk .wobble{animation:wobble 4.4s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:50% 100%}
@keyframes wobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.stk .cable{animation:cable 5.5s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:50% 0}
@keyframes cable{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.stk .blade{animation:blade 4s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:0 50%}
@keyframes blade{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.stk .puff{animation:puff 2.6s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:50% 100%}
@keyframes puff{0%{opacity:.9;transform:translateY(0) scale(.7)}100%{opacity:0;transform:translateY(-10px) scale(1.3)}}
/* La scène respire aussi : nuages qui dérivent, soleil qui pulse, crochet de grue qui oscille */
.scene .cloud{animation:cloud 60s linear infinite}
.scene .cloud.slow{animation-duration:85s}
@keyframes cloud{from{transform:translateX(-140px)}to{transform:translateX(1340px)}}
.scene .sun{animation:sun 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes sun{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.scene .cable{animation:cable 7s ease-in-out infinite;transform-box:fill-box;transform-origin:50% -300%}

/* ---------- Scène « prairie » plein écran, jour / nuit ---------- */
.scene{inset:0;height:auto;opacity:1}
.panel{background:color-mix(in srgb,var(--card) 58%,transparent)}
.item{background:color-mix(in srgb,var(--card) 55%,transparent)}
.hero{background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 55%,transparent),color-mix(in srgb,var(--accent-2-soft) 55%,transparent))}
.tabs button{background:color-mix(in srgb,var(--bg2) 45%,transparent)}.tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--card) 45%,transparent)}
.savebar,.pbar{background:color-mix(in srgb,var(--card) 80%,transparent)}.pbar{background:color-mix(in srgb,var(--wait-soft) 80%,transparent)}
.who button,.parent-btn{background:color-mix(in srgb,var(--card) 70%,transparent)}
.who button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent-soft) 85%,transparent)}
.date{color:var(--fg);text-shadow:0 1px 6px color-mix(in srgb,var(--bg) 70%,transparent)}
/* Couleurs de la scène, le jour */
[data-skin="prairie"]{--sky1:#5fb0ee;--sky2:#dff4ff;--sunIn:#fff8c8;--sunOut:rgba(255,245,180,0);--sunDisc:#fff3a8;--cloud:#fff;
  --mtn:#9ad08a;--h1:#a3d777;--h2:#8fcc62;--h3:#79bd4e;--h4:#5fae3c;--stripe:rgba(255,255,255,.22);--trunk:#5a3a1e;--leaf:#2e7d3b;--leafHi:#5fb35a;
  --fRed:#e8524f;--fBlue:#4b6fe0;--fYellow:#f6d54a;--stem:#3f8a3a;--star:0;--firefly:0;--moonIn:#f7f1d6;--moonOut:rgba(247,241,214,0)}
/* La nuit : même paysage, lumière bleue, lune, étoiles, lucioles, et l'interface passe en sombre */
[data-daytime="night"][data-skin="prairie"]{--sky1:#0b1538;--sky2:#2a3f75;--cloud:#3f4f78;--mtn:#223a4e;--h1:#2c5a46;--h2:#25503b;--h3:#1e4531;--h4:#173926;
  --stripe:rgba(255,255,255,.07);--trunk:#1b1410;--leaf:#13301e;--leafHi:#1e4a2c;--fRed:#9c3c3e;--fBlue:#3a4f9c;--fYellow:#b59a3c;--stem:#1f4a2a;--star:1;--firefly:1;
  --sunIn:transparent;--sunOut:transparent;--moonDisc:#f7f1d6;
  --bg:#141b33;--bg2:#1b2340;--card:#232b45;--fg:#f1ecff;--muted:#a9a6c4;--line:#3a4466;
  --accent:#f09ebd;--accent-soft:#4a2c48;--accent-2:#8cc47a;--accent-2-soft:#2c3f3a;
  --ok:#7fc687;--ok-soft:#2b4030;--wait:#f4c261;--wait-soft:#4a3c1f;--danger:#ef8071;--gold:#f9d262;
  --shadow:0 8px 24px rgba(0,0,0,.45);color-scheme:dark}
.scene .sky1{stop-color:var(--sky1)}.scene .sky2{stop-color:var(--sky2)}
.scene .sunIn{stop-color:var(--sunIn)}.scene .sunOut{stop-color:var(--sunOut)}.scene .sunDisc{fill:var(--sunDisc)}
.scene .moonIn{stop-color:var(--moonIn)}.scene .moonOut{stop-color:var(--moonOut)}.scene .moonDisc{fill:var(--moonDisc,#f7f1d6)}.scene .crater{fill:rgba(0,0,0,.08)}
.scene .cloud{fill:var(--cloud);opacity:.92}
.scene .mtn{fill:var(--mtn)}.scene .h1{fill:var(--h1)}.scene .h2{fill:var(--h2)}.scene .h3{fill:var(--h3)}.scene .h4{fill:var(--h4)}
.scene .stripe{fill:none;stroke:var(--stripe);stroke-width:6;stroke-linecap:round}
.scene .trunk{fill:var(--trunk)}.scene .leaf{fill:var(--leaf)}.scene .leafHi{fill:var(--leafHi)}
.scene .fRed{fill:var(--fRed)}.scene .fBlue{fill:var(--fBlue)}.scene .fYellow{fill:var(--fYellow)}.scene .stem{stroke:var(--stem);stroke-width:1.6;fill:none}
.scene .stars circle{fill:#fff;opacity:var(--star)}
.scene .fireflies circle{fill:#ffe98a;opacity:var(--firefly)}
.scene .sky1,.scene .sky2,.scene .mtn,.scene .h1,.scene .h2,.scene .h3,.scene .h4,.scene .ground,.scene .dirt,.scene .far rect,.scene .wall,.scene .day-only,.scene .night-only{transition:fill 2.5s ease,stop-color 2.5s ease,opacity 2.5s ease}
[data-daytime="night"] .day-only{opacity:0;pointer-events:none}
[data-daytime="day"] .night-only{opacity:0}
[data-daytime="day"] .moon{display:none}
/* Animations très légères */
.scene .cloud{animation:cloudDrift linear infinite;transform-box:fill-box}
.scene .c1{animation-duration:140s;animation-delay:-40s}.scene .c2{animation-duration:190s;animation-delay:-120s}.scene .c3{animation-duration:110s;animation-delay:-20s}
@keyframes cloudDrift{from{translate:-260px 0}to{translate:1860px 0}}
.scene .patch{animation:flowerSway 5s ease-in-out infinite;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:50% 100%}
@keyframes flowerSway{0%,100%{rotate:-1.5deg}50%{rotate:1.5deg}}
.scene .tree{animation:treeSway 7s ease-in-out infinite;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:50% 100%}
@keyframes treeSway{0%,100%{rotate:-1deg}50%{rotate:1deg}}
.scene .sun{animation:sunGlow 8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes sunGlow{0%,100%{scale:1}50%{scale:1.04}}
.scene .stars g{animation:twinkle var(--t,4s) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes twinkle{0%,100%{opacity:calc(var(--star) * .35)}50%{opacity:var(--star)}}
.scene .fireflies circle{animation:firefly var(--t,9s) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes firefly{0%,100%{translate:0 0;opacity:0}20%{opacity:var(--firefly)}50%{translate:var(--dx,40px) var(--dy,-50px);opacity:calc(var(--firefly) * .9)}80%{opacity:0}}
.scene .moon{animation:sunGlow 10s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* ---------- Scène « chantier » (Basile), jour / nuit ---------- */
[data-skin="chantier"]{--sky1:#4fa8ea;--sky2:#e9f5ff;--sunIn:#fff6c2;--sunOut:rgba(255,246,194,0);--sunDisc:#ffe98a;--cloud:#fff;--moonIn:#f7f1d6;--moonOut:rgba(247,241,214,0);
  --far:#b9d3e6;--wall:#d9c9ad;--roof:#b89a6a;--win:#bfe3ff;--winLit:#ffd86a;--concrete:#c9c3b5;--bar:#8a8378;--steel:#f3b82e;--steelLine:#d49a16;--counter:#8a8a8a;--cab:#f3b82e;--glass:#bfe6ff;--cable:#3a342e;--load:#c9512f;--beacon:#f97a4a;
  --ground:#e8c37a;--dirt:#c9975a;--mound:#b8864d;--rope:#5a4a3a;--f0:#e23b3b;--f1:#f6c343;--f2:#4aa8ff;--barWhite:#fff;--barRed:#e23b3b;
  --dump:#f28c3a;--cabT:#f28c3a;--tire:#2b2320;--rim:#9a9a9a;--puff:#cfcfcf;--coneBody:#f28c3a;--coneStripe:#fff;--star:0;--winGlow:0;--puddle:rgba(255,255,255,0)}
[data-daytime="night"][data-skin="chantier"]{--sky1:#0a1430;--sky2:#243a6b;--cloud:#3a4a70;--far:#1b2e46;--wall:#3a3850;--roof:#2b2a3c;--win:#2a3658;--winLit:#ffd86a;--concrete:#3e3d4e;--bar:#555368;
  --steel:#9a7a2a;--steelLine:#6e561a;--counter:#4a4a58;--cab:#9a7a2a;--glass:#5a6a90;--cable:#1a1a22;--load:#6a2c18;--beacon:#ff4b3a;
  --ground:#4a3f3e;--dirt:#3a2f30;--mound:#2d2426;--rope:#2a2420;--f0:#7a2a2a;--f1:#8a7030;--f2:#2d5a86;--barWhite:#c7c7d2;--barRed:#8a2a2a;
  --dump:#8a4a22;--cabT:#8a4a22;--tire:#111;--rim:#555;--puff:#4a4a55;--coneBody:#8a4a22;--coneStripe:#e8e8f0;--star:1;--winGlow:1;--puddle:rgba(255,255,255,.08);
  --sunIn:transparent;--sunOut:transparent;--moonDisc:#f7f1d6;
  --bg:#141a2e;--bg2:#1c2238;--card:#232a42;--fg:#f1ecff;--muted:#a9a6c4;--line:#3a4466;
  --accent:#f49a52;--accent-soft:#4a3222;--accent-2:#6fb6f2;--accent-2-soft:#243a4e;
  --ok:#7fc687;--ok-soft:#2b4030;--wait:#f4c261;--wait-soft:#4a3c1f;--danger:#ef8071;--gold:#f9d262;
  --shadow:0 8px 24px rgba(0,0,0,.45);color-scheme:dark}
.scene .far rect{fill:var(--far)}
.scene .wall{fill:var(--wall)}.scene .roof{fill:var(--roof)}.scene .win{fill:var(--win)}
.scene .win.lit{fill:color-mix(in srgb,var(--winLit) calc(var(--winGlow) * 100%),var(--win))}
@keyframes winLit{0%,30%{fill:var(--win)}45%,85%{fill:color-mix(in srgb,var(--winLit) calc(var(--winGlow) * 100%),var(--win))}100%{fill:var(--win)}}
.scene .concrete{fill:var(--concrete)}.scene .bar{stroke:var(--bar);stroke-width:5;fill:var(--bar)}.scene .bar.thin{stroke-width:2.5}
.scene .steel{fill:var(--steel)}.scene .steelLine{stroke:var(--steelLine);stroke-width:3}.scene .counter{fill:var(--counter)}.scene .cab{fill:var(--cab)}.scene .glass{fill:var(--glass)}
.scene .cable{stroke:var(--cable);stroke-width:3}.scene .load{fill:var(--load)}
.scene .beacon{fill:var(--beacon);animation:beacon 2s ease-in-out infinite}
@keyframes beacon{0%,100%{opacity:.35}50%{opacity:1}}
.scene .ground{fill:var(--ground)}.scene .dirt{fill:var(--dirt)}.scene .mound{fill:var(--mound)}
.scene .rope{fill:none;stroke:var(--rope);stroke-width:2}.scene .f0{fill:var(--f0)}.scene .f1{fill:var(--f1)}.scene .f2{fill:var(--f2)}
.scene .flag{animation:flag 2.2s ease-in-out infinite;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:50% 0}
@keyframes flag{0%,100%{rotate:-7deg}50%{rotate:7deg}}
.scene .barWhite{fill:var(--barWhite)}.scene .barRed{stroke:var(--barRed);stroke-width:5}
.scene .dump{fill:var(--dump)}.scene .cabT{fill:var(--cabT)}.scene .tire{fill:var(--tire)}.scene .rim{fill:var(--rim)}
.scene .truck .wheel{animation:wheel 5s linear infinite;transform-box:fill-box;transform-origin:center}
.scene .puff circle{fill:var(--puff);animation:puffUp 3s ease-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes puffUp{0%{opacity:.8;translate:0 0;scale:.7}100%{opacity:0;translate:6px -26px;scale:1.5}}
.scene .coneBody{fill:var(--coneBody)}.scene .coneStripe{stroke:var(--coneStripe);stroke-width:5;stroke-linecap:round}
.scene .puddle{fill:var(--puddle)}
.scene .crane .jib{animation:jib 24s ease-in-out infinite;transform-box:fill-box;transform-origin:28% 100%}
@keyframes jib{0%,100%{rotate:-2deg}50%{rotate:2deg}}
.scene .crane .hook{animation:hookSway 6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
@keyframes hookSway{0%,100%{rotate:-3deg}50%{rotate:3deg}}

/* Sélection groupée des missions */
.item.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 80%,transparent)}
.item.sel .pts{background:var(--ok);box-shadow:0 4px 0 color-mix(in srgb,var(--ok) 70%,black)}
.selbar{position:sticky;bottom:-16px;margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:18px;background:color-mix(in srgb,var(--card) 95%,transparent);box-shadow:var(--shadow);border:2px solid var(--accent)}
.selbar .selinfo{flex:1;font-weight:800;font-family:var(--display)}
.allbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:16px;background:var(--wait-soft);border:2px solid var(--wait);font-weight:800}
.mlist{list-style:none;margin:6px 0 0;padding:0;text-align:left;font-weight:700;display:flex;flex-direction:column;gap:4px;max-height:40vh;overflow:auto}
.mlist li{padding:4px 8px;border-radius:8px;background:color-mix(in srgb,var(--card) 60%,transparent)}

.hold.danger{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,var(--card))}
.hold.danger .bar{background:var(--danger)}
.hold.warn{border-color:var(--wait);background:color-mix(in srgb,var(--wait) 18%,var(--card))}
.hold.warn .bar{background:var(--wait)}

/* Historique */
.hstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.hstat{background:color-mix(in srgb,var(--accent-soft) 70%,transparent);border-radius:14px;padding:10px;text-align:center;display:flex;flex-direction:column}
.hstat b{font-family:var(--display);font-size:1.6rem;font-variant-numeric:tabular-nums}
.hstat span{font-size:.75rem;font-weight:800;color:var(--muted)}
.hday{border:2px solid var(--line);border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--card) 55%,transparent)}
.hday-head{display:flex;justify-content:space-between;padding:8px 12px;background:color-mix(in srgb,var(--bg2) 70%,transparent);font-weight:800;text-transform:capitalize}
.hday-head span{font-family:var(--display);font-variant-numeric:tabular-nums}
.hrow{display:grid;grid-template-columns:3em 1.6em 1fr auto 3em;gap:8px;align-items:center;padding:7px 12px;border-top:1px solid var(--line);font-size:.92rem;font-weight:700}
.hrow .ht{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.8rem}
.hrow .hl{min-width:0;overflow-wrap:anywhere}
.hrow .hp{font-family:var(--display);font-variant-numeric:tabular-nums;min-width:2.5em;text-align:right}
.hrow.plus .hp{color:var(--ok)}.hrow.minus .hp{color:var(--danger)}
.hrow .hb{color:var(--muted);font-size:.78rem;text-align:right;font-variant-numeric:tabular-nums}
a.btn{text-decoration:none;color:inherit}

/* Mode léger (réglages parents) : la scène et les gommettes deviennent immobiles */
[data-lite="1"] .scene *,[data-lite="1"] .stk,[data-lite="1"] .stk *{animation:none!important}