:root{
  --bg:#ffffff; --surface:#f7f7f5; --surface2:#eeeeec;
  --border:#e5e5e3; --accent:#10b981; --accent-dim:#059669;
  --text:#1a1a1a; --muted:#6b6b6b; --dim:#ababab;
  --warm:#f59e0b; --pink:#ec4899; --error:#ef4444;
  --maxw:460px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,'Segoe UI',system-ui,'Helvetica Neue',sans-serif;
  background:var(--surface2);color:var(--text);display:flex;justify-content:center}
#app{width:100%;max-width:var(--maxw);min-height:100vh;background:var(--bg);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 0 40px rgba(0,0,0,.08)}

/* language flag top-left */
.langbar{position:absolute;top:14px;left:14px;z-index:60;display:flex;gap:6px}
.flag{font-size:22px;cursor:pointer;opacity:.4;transition:.15s;line-height:1;
  background:none;border:none;padding:4px;border-radius:8px}
.flag.on{opacity:1;transform:scale(1.15)}
.flag:hover{opacity:.8}

/* screens */
.screen{flex:1;display:none;flex-direction:column;padding:56px 20px 24px;opacity:0;
  transition:opacity .3s ease;overflow-y:auto}
.screen.active{display:flex;opacity:1}
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-height:34px}
.back{font-size:24px;color:var(--muted);cursor:pointer;background:none;border:none;width:34px;text-align:left}
.streak{margin-left:auto;background:var(--accent);color:#fff;font-size:13px;font-weight:600;
  padding:6px 12px;border-radius:20px;display:flex;align-items:center;gap:5px}
h1{font-size:30px;font-weight:700;letter-spacing:-.02em}
h2{font-size:22px;font-weight:700;letter-spacing:-.01em}
.sub{color:var(--muted);font-size:14px;line-height:1.5;margin:4px 0 16px}

/* tiles */
.tiles{display:grid;gap:14px;margin-top:10px}
.tiles.grid2{grid-template-columns:1fr 1fr}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px;
  cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s;display:flex;
  flex-direction:column;gap:6px;min-height:92px;justify-content:center}
.tile:active{transform:scale(.96)}
.tile:hover{border-color:var(--accent);box-shadow:0 6px 20px rgba(16,185,129,.12)}
.tile .emoji{font-size:34px}
.tile .t{font-size:18px;font-weight:600}
.tile .d{font-size:12px;color:var(--muted)}
.tile.big{min-height:150px;align-items:center;text-align:center}
.tile.big .emoji{font-size:52px}
.tile.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.tile.accent .d{color:rgba(255,255,255,.85)}

/* splash / login */
#s_splash,#s_login{align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(160deg,#10b981,#059669);color:#fff}
.mascot{font-size:88px;animation:bounce 1.4s ease infinite;margin-bottom:8px}
.logo{font-size:44px;font-weight:700;letter-spacing:-.03em;animation:pop .6s ease}
.tap{margin-top:30px;font-size:13px;opacity:.85;animation:pulse 1.6s infinite}
@keyframes pop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
#s_login .card{background:#fff;color:var(--text);border-radius:24px;padding:28px;width:100%;max-width:320px}
.avatar{font-size:60px;text-align:center}

/* meal result */
.mealcard{background:var(--surface);border-radius:24px;overflow:hidden;border:1px solid var(--border);margin-top:10px}
.mealimg{height:180px;background:linear-gradient(135deg,#fde68a,#fca5a5);display:flex;align-items:center;
  justify-content:center;font-size:76px}
.mealbody{padding:18px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tag{background:var(--surface2);color:var(--muted);font-size:11px;padding:4px 9px;border-radius:12px;font-weight:500}
.tag.ok{background:rgba(16,185,129,.12);color:var(--accent-dim)}

/* buttons */
.btn{background:var(--accent);color:#fff;border:none;border-radius:14px;padding:16px;font-size:16px;
  font-weight:600;cursor:pointer;width:100%;margin-top:14px;transition:transform .1s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.warm{background:var(--warm)}

/* rating */
.stars{display:flex;gap:8px;justify-content:center;font-size:40px;margin:18px 0}
.star{cursor:pointer;filter:grayscale(1);opacity:.4;transition:.15s}
.star.on{filter:none;opacity:1;transform:scale(1.1)}
.photo{height:140px;background:var(--surface2);border:2px dashed var(--border);border-radius:16px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--muted);
  cursor:pointer;margin-top:8px;background-size:cover;background-position:center}
textarea,input[type=text],input[type=number]{width:100%;margin-top:12px;border:1px solid var(--border);
  border-radius:12px;padding:14px;font-family:inherit;font-size:16px;resize:none;background:var(--surface)}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(16,185,129,.12)}

/* list */
.row{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--border);font-size:16px}
.row .chk{width:22px;height:22px;border-radius:7px;border:2px solid var(--border);cursor:pointer;flex:0 0 auto}
.row.done .chk{background:var(--accent);border-color:var(--accent)}
.row.done span{color:var(--dim);text-decoration:line-through}
.seg{display:flex;gap:8px;margin-top:14px}
.seg .s{flex:1;text-align:center;padding:12px 0;border:1px solid var(--border);border-radius:12px;
  font-weight:600;cursor:pointer;font-size:15px}
.seg .s.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* smileys (questionnaire) */
.smileys{display:flex;justify-content:space-between;font-size:38px;margin:10px 0}
.smiley{cursor:pointer;opacity:.35;transition:.15s}
.smiley.on{opacity:1;transform:scale(1.2)}
.label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:18px}

/* pending / banner */
.pending{margin-top:auto;background:#fff7ed;border:1px solid #fed7aa;border-radius:16px;padding:14px;
  display:flex;align-items:center;gap:12px;cursor:pointer}
.pending .dot{width:10px;height:10px;border-radius:50%;background:var(--warm);animation:pulse 1.4s infinite;flex:0 0 auto}
.pending .tx{font-size:14px;font-weight:600}
.pending .tx small{display:block;font-weight:400;color:var(--muted)}
.disclaimer{font-size:11px;color:var(--dim);text-align:center;margin-top:14px;line-height:1.4}
.dietlist{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:8px}
.dietlist li{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;
  font-size:14px;line-height:1.45;color:var(--text)}
.dietlist.avoid li{background:#fef2f2;border-color:#fecaca}

/* photos plats */
.mealimg{padding:0}
.mealimg img.mealphoto{width:100%;height:100%;object-fit:cover;display:block}
.mealimg span.mealphoto{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:76px}
.mealimg img.mealphoto{transition:filter .45s ease, transform .45s ease}
.mealcard.rolling .mealimg img.mealphoto,
.mealcard.rolling .mealimg span.mealphoto{filter:blur(10px) brightness(1.07);transform:scale(1.12)}
.mealcard.rolling #resName{opacity:.7}
.tile img.thumb{width:100%;height:120px;border-radius:12px;object-fit:cover;display:block;background:var(--surface2);margin-bottom:8px}
.tile span.thumb{height:120px;border-radius:12px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:44px;margin-bottom:8px}

/* plan de la semaine (accordéon) */
.planday{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:4px 12px;margin-bottom:12px}
.planhdr{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 2px 4px}
.planrow{border-top:1px solid var(--border)}
.planslot{display:flex;align-items:center;gap:10px;padding:12px 2px;cursor:pointer}
.planslot .emoji{font-size:26px}
.plantxt{display:flex;flex-direction:column;font-size:15px;font-weight:600;flex:1;line-height:1.3}
.plantxt small{font-weight:500;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.chev{color:var(--muted);transition:transform .2s}
.planrow.open .chev{transform:rotate(180deg)}
.plandet{max-height:0;overflow:hidden;transition:max-height .25s ease}
.planrow.open .plandet{max-height:320px}
.plandet ul{list-style:none;padding:2px 0 12px 38px}
.plandet li{font-size:14px;color:var(--text);padding:3px 0;position:relative}
.plandet li:before{content:"•";color:var(--accent);position:absolute;left:-14px}
.row b{color:var(--accent-dim)}

/* ===== Thème vert global : canvas emerald + contenus blancs ===== */
#app{background:linear-gradient(165deg,#12b886 0%,#0a9e72 55%,#07845d 100%)}
.screen{color:var(--text)}              /* les cartes gardent leur texte sombre */
h1{color:#fff}
.topbar h2{color:#fff}
.back{color:rgba(255,255,255,.92)}
.sub{color:rgba(255,255,255,.88)}
.mealcard .sub,.card .sub{color:var(--muted)}   /* sauf dans les cartes blanches */
.label{color:rgba(255,255,255,.85)}
.disclaimer{color:rgba(255,255,255,.80)}
.streak{box-shadow:0 2px 10px rgba(0,0,0,.15)}
/* boutons : blanc sur fond vert, sauf dans la carte de login */
.btn{background:#fff;color:var(--accent-dim);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.45);box-shadow:none}
#s_login .btn{background:var(--accent);color:#fff}
/* grosses tuiles accent : emerald profond pour ressortir sur le vert clair */
.tile.accent{background:#047857;border-color:#047857;box-shadow:0 8px 24px rgba(0,0,0,.18)}
/* sélecteur durée sur fond vert */
.seg .s{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.seg .s.on{background:#fff;color:var(--accent-dim);border-color:#fff}

/* feedback couleur au clic — immédiat au doigt posé (visible même si on change d'écran) */
.tile{transition:transform .1s,border-color .12s,box-shadow .12s,background .12s}
.tile:active{transform:scale(.94);background:#6ee7b7;border-color:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,.25)}
.tile.accent:active{background:#065f46;box-shadow:0 0 0 3px rgba(4,120,87,.4)}
.seg .s:active{background:#6ee7b7;color:var(--accent-dim)}
.planslot:active{background:#d1fae5}
.btn:active{filter:brightness(.92)}

/* sélection manuelle des plats */
.pickrow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:background .12s,border-color .12s}
.pickrow .emoji{font-size:24px}
.pickname{flex:1;font-size:15px;font-weight:500;color:var(--text)}
.pickchk{width:22px;height:22px;border-radius:7px;border:2px solid var(--border);flex:0 0 auto;position:relative}
.pickrow.sel{border-color:var(--accent);background:#ecfdf5}
.pickrow.sel .pickchk{background:var(--accent);border-color:var(--accent)}
.pickrow.sel .pickchk:after{content:"✓";color:#fff;font-size:14px;position:absolute;top:-2px;left:3px}
.pickrow:active{background:#d1fae5}
@keyframes tileflash{0%{background:#6ee7b7;border-color:var(--accent)}100%{background:var(--surface)}}
.tile.flash{animation:tileflash .5s ease}
@keyframes tileflashAccent{0%{background:#065f46}100%{background:#047857}}
.tile.accent.flash{animation:tileflashAccent .5s ease}
@keyframes segflash{0%{background:#6ee7b7;color:var(--accent-dim)}100%{background:rgba(255,255,255,.14);color:#fff}}
.seg .s.flash{animation:segflash .5s ease}
@keyframes slotflash{0%{background:#d1fae5}100%{background:transparent}}
.planslot.flash{animation:slotflash .5s ease}

/* stats */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.statbox{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;text-align:center}
.statbox .n{font-size:30px;font-weight:700;color:var(--accent-dim)}
.statbox .l{font-size:12px;color:var(--muted);margin-top:2px}

/* confetti */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.conf{position:absolute;width:10px;height:10px;top:-20px;opacity:0}
.firing .conf{animation:fall 1.2s ease-out forwards}
@keyframes fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(100vh) rotate(540deg)}}
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;
  padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;z-index:100;opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1}