/* ============================================================
   ÉNERGIE·MOBILE — terminal de charge. Dark, accent lime, numériques mono.
   Mobile-first, low-data : zéro font externe, zéro image (SVG/CSS only).
   ============================================================ */
:root {
  --bg:#0a0b0d; --bg2:#0e1116; --surface:#14181d; --surface2:#1a1f26;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --accent:#c8ff2e; --accent-soft:rgba(200,255,46,.16); --accent-dim:#7e9c14;
  --amber:#ffb23e; --danger:#ff5d5d;
  --text:#e9eef1; --muted:#8b949c; --muted2:#5c656d;
  --mono:"SFMono-Regular","SF Mono","Cascadia Code","JetBrains Mono","Roboto Mono",ui-monospace,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(200,255,46,.10), transparent 60%),
    linear-gradient(transparent 96%, rgba(255,255,255,.025) 96%),
    linear-gradient(90deg, transparent 96%, rgba(255,255,255,.025) 96%);
  background-size:100% 100%, 22px 22px, 22px 22px;
}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1}
.dim{color:var(--muted)} .small{font-size:.78rem} .center{text-align:center}
b{font-weight:700}

#app{
  max-width:460px; min-height:100%; margin:0 auto; padding:0 20px env(safe-area-inset-bottom);
  display:flex; flex-direction:column;
}

/* ---- Topbar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:18px 2px 22px;position:sticky;top:0;background:linear-gradient(var(--bg),rgba(10,11,13,.6));z-index:5}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.14em;font-size:.82rem}
.brand__mark{width:18px;height:18px;fill:var(--accent);filter:drop-shadow(0 0 6px rgba(200,255,46,.6))}
.brand__name i{color:var(--accent-dim);font-style:normal;margin:0 1px}
.net{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.net i{width:7px;height:7px;border-radius:50%;background:var(--muted2)}
.net[data-net="online"] i{background:var(--accent);box-shadow:0 0 0 0 var(--accent-soft);animation:ping 2.4s ease-out infinite}
.net[data-net="offline"]{color:var(--danger)} .net[data-net="offline"] i{background:var(--danger);animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(200,255,46,.5)}100%{box-shadow:0 0 0 9px transparent}}

/* ---- Stage / screens ---- */
.stage{flex:1;display:flex;flex-direction:column;justify-content:center;padding:8px 0 28px}
.screen{display:none;flex-direction:column;gap:18px}
#app[data-state="boot"]    [data-screen="boot"],
#app[data-state="idle"]    [data-screen="idle"],
#app[data-state="pending"] [data-screen="pending"],
#app[data-state="done"]    [data-screen="done"],
#app[data-state="return"]  [data-screen="return"],
#app[data-state="fail"]    [data-screen="fail"]{display:flex}

/* Liste « où rendre » */
.returnlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.returnlist__item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03)}
.returnlist__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.returnlist__meta b{font-weight:700}
.returnlist__meta span{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.returnlist__free{flex:none;font-weight:700;color:#39d98a}

.kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.34em;color:var(--accent-dim);text-transform:uppercase}
h1.station__name{font-size:2rem;line-height:1.05;font-weight:800;letter-spacing:-.01em;margin-top:6px}
.station__loc{color:var(--muted);font-size:.86rem;margin-top:6px}

/* ---- Battery motif ---- */
.battery{display:flex;align-items:center;justify-content:center;gap:6px;position:relative;padding:8px 0}
.battery__body{position:relative;width:208px;height:86px;border:2px solid var(--line-strong);border-radius:14px;
  background:var(--bg2);overflow:hidden;box-shadow:inset 0 0 24px rgba(0,0,0,.6)}
.battery__cap{width:9px;height:38px;border-radius:0 5px 5px 0;background:var(--line-strong)}
.battery__fill{position:absolute;inset:4px auto 4px 4px;width:0;border-radius:9px;
  background:linear-gradient(180deg,var(--accent),var(--accent-dim));
  box-shadow:0 0 18px rgba(200,255,46,.45);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.battery__scan{position:absolute;top:0;bottom:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transform:translateX(-120%)}
.battery__pct{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-weight:700;font-size:1.1rem;color:var(--bg);mix-blend-mode:difference}
.battery__bolt{position:absolute;width:34px;height:34px;left:50%;top:50%;transform:translate(-50%,-50%);
  fill:var(--bg);filter:drop-shadow(0 0 4px rgba(0,0,0,.5));animation:bolt 1.3s ease-in-out infinite}
.battery.charging .battery__fill{
  width:62%;
  background:repeating-linear-gradient(115deg,var(--accent) 0 14px,var(--accent-dim) 14px 28px);
  background-size:200% 100%;animation:flow 1s linear infinite, breathe 2.6s ease-in-out infinite}
.battery.charging .battery__scan{animation:scan 1.8s ease-in-out infinite}
@keyframes flow{to{background-position:200% 0}}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
@keyframes scan{0%{transform:translateX(-120%)}60%,100%{transform:translateX(360%)}}
@keyframes bolt{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
.stock b{color:var(--text);font-family:var(--mono)}

/* ---- Ticket (prix) ---- */
.ticket{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px 16px;
  position:relative;overflow:hidden}
.ticket::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.ticket__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;
  border-bottom:1px dashed var(--line)}
.ticket__row:last-child{border-bottom:0}
.ticket__row span i{color:var(--muted2);font-style:normal;font-size:.78rem}
.ticket__row b{font-size:1.05rem}
.ticket__row.amber b{color:var(--amber)}
.ticket__row.total span{font-weight:800;letter-spacing:.08em;font-size:.82rem}
.ticket__row.total b{font-size:1.5rem;color:var(--accent)}

/* ---- Form ---- */
.form{display:flex;flex-direction:column;gap:18px;margin-top:2px}
.field{display:flex;flex-direction:column;gap:9px}
.field__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--muted)}
.field__phone{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:12px;padding:0 14px;transition:border-color .2s,box-shadow .2s}
.field__phone:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field__phone em{color:var(--muted);font-style:normal;font-size:1.05rem}
.field__phone input{flex:1;background:none;border:0;outline:0;color:var(--text);font-size:1.25rem;
  font-family:var(--mono);letter-spacing:.04em;padding:16px 0}
.field__phone input::placeholder{color:var(--muted2)}
.chips{display:flex;gap:10px}
.chip{flex:1;cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);border-radius:12px;
  padding:14px 10px;text-align:center;font-weight:700;letter-spacing:.02em;color:var(--muted);
  transition:all .18s;-webkit-tap-highlight-color:transparent}
.chip small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;margin-top:3px;color:var(--muted2)}
.chip[aria-pressed="true"]{color:var(--bg);background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 22px rgba(200,255,46,.3)}
.chip[aria-pressed="true"] small{color:rgba(10,11,13,.65)}

.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  border:0;border-radius:13px;padding:19px;font-family:var(--sans);font-size:1.05rem;font-weight:800;
  letter-spacing:.06em;color:var(--bg);background:var(--accent);cursor:pointer;
  box-shadow:0 8px 24px -8px rgba(200,255,46,.5);transition:transform .12s,filter .2s,opacity .2s}
.btn:active{transform:translateY(2px) scale(.995)}
.btn[disabled]{opacity:.45;filter:saturate(.5);box-shadow:none;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none}
.btn__spin{display:none;width:18px;height:18px;border:2px solid rgba(10,11,13,.4);border-top-color:var(--bg);
  border-radius:50%;animation:spin .7s linear infinite}
.btn.busy .btn__spin{display:block} .btn.busy .btn__label{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
.form__err{color:var(--danger);font-size:.84rem;min-height:1em;text-align:center}

/* ---- Pending ---- */
[data-screen="pending"] h2{font-size:1.5rem;font-weight:800;margin-top:6px}
.pulsebar{height:4px;border-radius:4px;background:var(--surface2);overflow:hidden}
.pulsebar span{display:block;height:100%;width:35%;border-radius:4px;background:var(--accent);
  box-shadow:0 0 12px var(--accent);animation:slide 1.4s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}

/* ---- Done ---- */
.slotpop{display:flex;flex-direction:column;align-items:center;gap:4px;animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
.slot{font-size:5.5rem;font-weight:800;line-height:1;color:var(--accent);text-shadow:0 0 40px rgba(200,255,46,.5)}
.slot__sub{font-family:var(--mono);letter-spacing:.4em;font-size:.7rem;color:var(--muted)}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.ticket.done{margin-top:6px}

/* ---- Fail ---- */
.xmark{width:74px;height:74px;margin:0 auto;border-radius:50%;border:2px solid var(--danger);
  display:grid;place-items:center;animation:pop .4s both}
.xmark svg{width:36px;height:36px;stroke:var(--danger);stroke-width:2.5;fill:none;stroke-linecap:round}
[data-screen="fail"] h2{font-size:1.4rem;font-weight:800}

/* ---- Loader / footer ---- */
.loader{display:flex;gap:8px;justify-content:center;padding:20px}
.loader span{width:11px;height:11px;border-radius:50%;background:var(--accent-dim);animation:blink 1s ease-in-out infinite}
.loader span:nth-child(2){animation-delay:.15s}.loader span:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1);background:var(--accent)}}
.foot{padding:18px 0;text-align:center;font-size:.64rem;letter-spacing:.24em;color:var(--muted2);text-transform:uppercase}

/* ---- Staggered reveal ---- */
.reveal{opacity:0;transform:translateY(14px);animation:rise .55s cubic-bezier(.2,.8,.2,1) forwards}
.r1{animation-delay:.02s}.r2{animation-delay:.12s}.r3{animation-delay:.22s}.r4{animation-delay:.32s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* i18n — sélecteur de langue (footer). Construit par i18n.js dans [data-i18n-switch]. */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.langswitch { display: inline-flex; gap: 6px; }
.langbtn {
  background: none; border: 1px solid currentColor; border-radius: 4px;
  color: inherit; font: inherit; font-size: 0.85em; padding: 2px 8px; cursor: pointer;
  opacity: 0.6;
}
.langbtn[aria-pressed="true"] { opacity: 1; font-weight: 700; }

/* ---- Bandeau mise à jour PWA (masqué/affiché via show()=CSSOM, jamais style= inline) ---- */
.updatebar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:14px;max-width:92vw;
  background:var(--surface2);border:1px solid var(--line-strong);border-left:3px solid var(--accent);
  border-radius:12px;padding:10px 14px;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
.updatebar span{font-size:.86rem}
.updatebar .btn{width:auto;padding:8px 14px;font-size:.78rem;white-space:nowrap}