:root {
  --bg: #0b1220; --panel: rgba(13, 20, 36, .93); --line: rgba(255, 255, 255, .12);
  --text: #e8eefc; --muted: #94a3b8; --accent: #f5b942; --blue: #3b82f6; --ok: #34d399; --bad: #f87171;
  --radius: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
[hidden] { display: none !important; }
#map { position: fixed; inset: 0; z-index: 1; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#demo-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; background: #7c2d12; color: #fed7aa;
  padding: 4px 12px; font-size: .75rem; text-align: center; }
.demo #panel { top: 36px; max-height: calc(100% - 48px); }

/* ---- panneau ---- */
#panel { position: fixed; z-index: 1000; top: 12px; left: 12px; width: 370px; max-height: calc(100% - 24px);
  overflow-y: auto; background: var(--panel); backdrop-filter: blur(14px); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.brand { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
h1 { font-size: 1.45rem; letter-spacing: .3px; color: var(--accent); }
h2 { font-size: 1rem; margin: 14px 0 8px; }
.tagline, .hint { color: var(--muted); font-size: .82rem; margin-top: 3px; line-height: 1.35; }
section { margin-bottom: 14px; }
.step { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.step span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #1a1203; font-size: .75rem; }
input, select { width: 100%; background: #111b30; border: 1px solid #26344f; border-radius: 9px; padding: 9px 11px; }
input[type=range] { padding: 0; accent-color: var(--blue); }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row input { flex: 1 1 100%; }
.chip { background: #16223a; border: 1px solid #26344f; border-radius: 999px; padding: 4px 11px; font-size: .78rem; color: var(--muted); }
.chip:hover { color: var(--text); border-color: var(--accent); }
.ghost { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: .8rem; white-space: nowrap; }
.ghost:hover { border-color: var(--accent); }
.primary { width: 100%; background: linear-gradient(180deg, #fbbf24, #f59e0b); color: #1a1203; font-weight: 700;
  border: 0; border-radius: 10px; padding: 12px; font-size: .95rem; }
.primary:disabled { background: #2a3550; color: #7b88a5; cursor: not-allowed; }
.primary:not(:disabled):hover { filter: brightness(1.06); }

.search { position: relative; }
#suggestions { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); background: #0f192e;
  border: 1px solid #26344f; border-radius: 10px; list-style: none; overflow: hidden; }
#suggestions button { width: 100%; text-align: left; background: none; border: 0; padding: 9px 11px; font-size: .86rem; }
#suggestions button:hover, #suggestions button:focus { background: #1a2745; }

#progress { margin-top: 10px; }
.bar { height: 8px; border-radius: 6px; background: #1b2740; overflow: hidden; }
#bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width .4s; }
#progress-text { font-size: .82rem; color: var(--muted); margin-top: 6px; }

footer { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
footer p { font-size: .7rem; color: var(--muted); line-height: 1.4; margin-bottom: 6px; }

/* ---- timeline ---- */
#timeline { position: fixed; z-index: 1000; bottom: 18px; left: calc(50% + 100px); transform: translateX(-50%);
  width: min(860px, calc(100% - 420px)); background: var(--panel); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 18px; padding: 14px 20px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.tl-top, .tl-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tl-bottom { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.tl-bottom label { display: flex; align-items: center; gap: 8px; }
.tl-bottom select { width: auto; padding: 4px 8px; font-size: .8rem; }
.tl-bottom input[type=range] { width: 110px; }
.seg { display: inline-flex; background: #111b30; border: 1px solid #26344f; border-radius: 9px; overflow: hidden; }
.seg button { background: none; border: 0; padding: 6px 12px; font-size: .8rem; color: var(--muted); }
.seg button.active { background: var(--blue); color: #fff; }
.badge { background: #0b1324; border: 1px solid #26344f; border-radius: 999px; padding: 5px 12px; font-size: .8rem; color: var(--muted); }
.badge b { color: var(--accent); }
.slider-row { display: flex; align-items: center; gap: 14px; margin: 12px 0 2px; }
.slider-row input { flex: 1; height: 8px; }
.play { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: #10b981; color: #fff; font-size: 1.1rem; }
.play:hover { background: #059669; }
.time { min-width: 82px; text-align: right; font-size: 1.6rem; font-weight: 800; color: #60a5fa; font-variant-numeric: tabular-nums; }
.legend { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; font-size: .8rem; color: var(--muted); }
.grad { flex: 1; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, rgb(40,30,90), rgb(120,60,140), rgb(230,110,60), rgb(250,190,50), rgb(255,245,150)); }

/* ---- modales ---- */
.modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(2, 6, 18, .6); padding: 16px; }
.card { position: relative; width: min(420px, 100%); background: #0f192e; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 1.6rem; color: var(--muted); }
.card h2 { margin: 0 0 12px; font-size: 1.15rem; }
.card label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.card label input { margin-top: 4px; color: var(--text); }
.tabs { margin-bottom: 14px; width: 100%; } .tabs button { flex: 1; }
.notice { color: var(--accent); font-size: .8rem; background: rgba(245, 185, 66, .1); border: 1px solid rgba(245, 185, 66, .35);
  border-radius: 8px; padding: 7px 10px; margin: 6px 0; }
.error { color: var(--bad); font-size: .82rem; min-height: 1.1em; margin: 6px 0; }
#packs { display: grid; gap: 8px; margin: 12px 0; }
.pack { display: flex; justify-content: space-between; align-items: center; background: #111b30; border: 1px solid #26344f;
  border-radius: 10px; padding: 12px 14px; }
.pack:hover { border-color: var(--accent); }
.pack small { color: var(--ok); margin-left: 8px; }

#toast { position: fixed; z-index: 3000; top: 16px; left: 50%; transform: translateX(-50%); background: #14213b; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 16px; font-size: .88rem; max-width: 90vw; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
#toast.bad { border-color: var(--bad); }

.leaflet-container { background: #0b1220; font: inherit; }

@media (max-width: 860px) {
  #panel { width: calc(100% - 20px); left: 10px; top: 10px; max-height: 52vh; }
  .demo #panel { top: 36px; max-height: 50vh; }
  #timeline { left: 50%; width: calc(100% - 20px); bottom: 10px; padding: 10px 14px; }
  .time { font-size: 1.3rem; min-width: 70px; }
}

/* ---- v2 : bannière, zone, bandeau date, packs ---- */
#demo-banner.staging { background: #1e3a8a; color: #bfdbfe; }
.linkbtn { background: none; border: 0; color: var(--muted); font-size: .8rem; text-decoration: underline; margin: 8px auto 0; display: block; }
.linkbtn:hover { color: var(--accent); }
#side-val { color: var(--accent); margin-left: 4px; font-variant-numeric: tabular-nums; }
.zone-handle { width: 22px; height: 22px; border-radius: 6px; background: #f5a623; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6); cursor: nwse-resize; }
.zone-pin { width: 16px; height: 16px; border-radius: 50%; background: #f5a623; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6); cursor: move; }
.when { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.when-date { font-size: 1.05rem; font-weight: 700; }
.when-sun { font-size: .8rem; color: var(--muted); }
.when-sun b { color: var(--accent); font-weight: 600; }
.card.wide { width: min(760px, 100%); }
#packs.cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pack-card { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; background: #111b30;
  border: 1px solid #26344f; border-radius: 12px; padding: 14px; }
.pack-card:hover { border-color: var(--accent); }
.pack-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pack-card .tag { position: absolute; top: -9px; right: 12px; background: var(--accent); color: #1a1203; font-size: .68rem;
  font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.pack-card .name { font-weight: 700; font-size: .95rem; }
.pack-card .aud { font-size: .75rem; color: var(--muted); }
.pack-card .price { font-size: 1.5rem; font-weight: 800; color: var(--accent); margin-top: 6px; font-variant-numeric: tabular-nums; }
.pack-card .per { font-size: .78rem; color: var(--muted); }
.pack-card .per em { color: var(--ok); font-style: normal; margin-left: 6px; white-space: nowrap; }
.pack-card .use { font-size: .76rem; color: var(--muted); line-height: 1.35; margin: 6px 0 8px; flex: 1; }
.pack-card .buy { background: var(--accent); color: #1a1203; border-radius: 8px; text-align: center; font-weight: 700; padding: 7px; font-size: .85rem; }
.admin-link { display: inline-block; margin-top: 8px; font-size: .82rem; color: var(--accent); }
@media (max-width: 860px) { .when-date { font-size: .95rem; } }

/* ---- export HD ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chips .chip { font-size: .85rem; padding: 6px 12px; }
.chips .chip.sel { background: var(--accent); color: #1a1203; border-color: var(--accent); font-weight: 700; }
.step-label { font-size: .82rem; color: var(--muted); margin-top: 12px; }
#export-fill { height: 100%; width: 0; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width .4s; }
#export-progress { margin: 10px 0; }
a.primary.dl { display: block; text-align: center; text-decoration: none; margin-top: 10px; }
#export-go { margin-top: 10px; }

/* v5 : profil, renommage, options d'export */
.mini{padding:2px 8px;font-size:12px}
.when-name-row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.when-name{font-weight:600;font-size:13px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:8px 0}
.stats div{background:rgba(255,255,255,.06);border-radius:10px;padding:8px 10px;text-align:center}
.stats b{display:block;font-size:22px}
.stats span{font-size:12px;opacity:.75}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.card h3{margin:16px 0 4px;font-size:14px}
.card select,.card form input,.card form select{width:100%}
ul.plain{list-style:none;padding:0;margin:0;font-size:13px}
ul.plain li{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.opts{display:grid;gap:6px;margin:4px 0 8px}
.opts label{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.opts input{width:auto;margin-top:3px}
details.danger{margin-top:16px;font-size:13px}
details.danger summary{cursor:pointer;opacity:.75}
#pw-meter.weak{color:#ff8a80}#pw-meter.ok{color:#ffd54f}#pw-meter.strong{color:#81c784}

/* v6 */
.fine{font-size:.7rem;color:var(--muted);line-height:1.35;margin:8px 0 6px}
#layers{position:fixed;z-index:1000;top:12px;right:56px;display:flex;gap:10px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:.78rem}
#layers select{width:auto;padding:3px 6px;font-size:.78rem}
#layers label{display:flex;gap:6px;align-items:center;white-space:nowrap}
.demo #layers{top:44px}
.result-pin{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#ef4444;border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.5)}
.result-pin span{display:block;transform:rotate(45deg);text-align:center;color:#fff;font-weight:700;font-size:12px;line-height:22px}
#suggestions .kind{font-size:.68rem;background:#26344f;border-radius:5px;padding:1px 6px;margin-right:6px;color:var(--muted)}
#sun-probe{position:fixed;z-index:1100;pointer-events:none;background:rgba(10,16,30,.95);border:1px solid var(--accent);
  border-radius:9px;padding:6px 10px;font-size:.8rem;min-width:150px}
#sun-probe b{color:var(--accent)}
#sun-probe .bar{height:5px;border-radius:3px;background:#26344f;margin-top:5px;overflow:hidden}
#sun-probe .bar i{display:block;height:100%;background:linear-gradient(90deg,#7c3aed,#f59e0b,#fde68a)}
.when-name-row+.when-date+.fine{margin:2px 0 0}
#pass-box{margin:6px 0;font-size:.78rem;color:var(--muted)}
#pass-box b{color:var(--ok)}
@media (max-width:760px){#layers{top:auto;bottom:auto;right:8px;top:56px;flex-direction:column;align-items:flex-start;gap:4px}}

/* ---- v7 ---- */
.tabs-main{display:flex;width:100%;margin-bottom:14px}.tabs-main button{flex:1;padding:8px 6px;font-size:.82rem}
.tabs-main .count{background:var(--accent);color:#1a1405;border-radius:999px;padding:0 7px;font-size:.7rem;font-weight:700;margin-left:4px}
.tabs-main button.active{background:#1d2a47;color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.datesel{display:grid;grid-template-columns:90px 1fr;gap:8px;margin:4px 0}
.datesel select,.quick-date select{padding:9px 10px;cursor:pointer}
#pass-box{margin:8px 0;font-size:.78rem}
#pass-box.on{background:rgba(255,140,0,.12);border:1px solid rgba(255,140,0,.5);border-radius:10px;padding:8px 10px;color:#ffd7a3}
#pass-box.on b{color:#ffb255}
.pill-pass{background:rgba(255,140,0,.16);border:1px solid #ff8c00;color:#ffb255;border-radius:999px;padding:2px 10px;font-size:.72rem;font-weight:700}
.mine-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 6px}.pass-h{color:#ffb255}
#mine-search{margin-bottom:4px}
.mine-list{list-style:none;display:grid;gap:6px}
.grp{background:#0f192e;border:1px solid #1f2b45;border-radius:11px;overflow:hidden;margin-bottom:8px}
.grp-h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;background:#121e36;font-size:.84rem;font-weight:600}
.grp-h span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-h .n{font-weight:400;color:var(--muted);font-size:.74rem;white-space:nowrap}
.grp.pass{border-color:rgba(255,140,0,.55)}.grp.pass .grp-h{background:rgba(255,140,0,.14)}
.job{display:flex;gap:4px;align-items:stretch;border-top:1px solid #1a2640}
.job>button:first-child{flex:1;text-align:left;background:none;border:0;padding:7px 10px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.job>button:first-child:hover{background:#16233f}
.job .d{font-size:.84rem;white-space:nowrap}.job .m{font-size:.72rem;color:var(--muted);text-align:right;white-space:nowrap}
.job.err .d{color:var(--bad)}
.job .ed{flex:0 0 auto;width:auto;background:none;border:0;color:var(--muted);padding:0 10px}
.job .ed:hover{color:var(--accent)}
.tag3{font-size:.62rem;background:#26344f;border-radius:5px;padding:1px 5px;margin-left:5px;color:#bcd}
.passitem{display:flex;justify-content:space-between;gap:8px;background:rgba(255,140,0,.1);border:1px solid rgba(255,140,0,.45);border-radius:9px;padding:7px 10px;font-size:.8rem;width:100%;text-align:left}
.passitem small{color:var(--muted)}
.pass-tag{background:rgba(255,140,0,.92);color:#201400;font:700 10px/17px system-ui,sans-serif;text-align:center;border-radius:0 0 0 6px;white-space:nowrap}
.leaflet-roads-pane{filter:grayscale(1) brightness(1.9) contrast(.75);opacity:.34;mix-blend-mode:screen}

/* bandeau du bas */
#timeline{padding:14px 20px 10px}
.tl-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tl-id{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.tl-id .when-name{font-size:.9rem;font-weight:600;max-width:46%}
.tl-main{margin:8px 0 2px;align-items:flex-end}
.tl-when{display:flex;align-items:baseline;gap:12px}
.tl-when .time{font-size:2.3rem;line-height:1;min-width:0;text-align:left}
.tl-when .when-date{font-size:1.05rem;font-weight:600;color:var(--text)}
.tl-facts{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.tl-facts .badge{padding:3px 10px;font-size:.74rem}
.slider-row{margin:8px 0 2px}
.seg button .lock{font-size:.7em;opacity:.8}.seg button.unlocked .lock{display:none}
.quick-date{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;padding:7px 10px;background:rgba(255,140,0,.1);border:1px solid rgba(255,140,0,.45);border-radius:10px;font-size:.78rem;color:#ffd7a3}
.quick-date span{flex:1 1 220px}.quick-date b{color:#ffb255}
.quick-date select{width:auto;padding:4px 8px;font-size:.8rem}
.tl-foot{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);align-items:center}
.op{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}.op input{width:96px}
.pass-line{margin:0;font-size:.76rem}
.share{display:flex;align-items:center;gap:12px;margin-left:auto;background:linear-gradient(135deg,rgba(245,185,66,.14),rgba(245,185,66,.05));border:1px solid rgba(245,185,66,.4);border-radius:12px;padding:6px 8px 6px 12px}
.share-t{display:flex;flex-direction:column;line-height:1.25}.share-t b{font-size:.82rem;color:var(--accent)}.share-t span{font-size:.7rem;color:var(--muted);max-width:230px}
.cta-share{background:linear-gradient(180deg,#fbbf24,#f59e0b);color:#1a1203;font-weight:700;border:0;border-radius:9px;padding:9px 14px;font-size:.84rem;white-space:nowrap}
.cta-share:hover{filter:brightness(1.07)}
#when-lidar.fine{margin:8px 0 0;font-size:.68rem}
.checks li{padding:3px 0 3px 20px;position:relative;border:0}.checks li::before{content:"✓";position:absolute;left:0;color:var(--ok)}
.primary.small{padding:9px;font-size:.84rem}

/* vue 3D */
#view3d{position:fixed;inset:0;z-index:900;background:#0b1220}
#gl3d{width:100%;height:100%;display:block;cursor:grab;touch-action:none;outline:0}
.v3-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);pointer-events:none}
.v3-ctl{position:absolute;top:14px;right:14px;width:250px;background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.demo .v3-ctl{top:46px}
.v3-title{font-weight:700;color:var(--accent);margin-bottom:6px}
.v3-row{display:block;font-size:.78rem;color:var(--muted);margin:8px 0}.v3-row b{color:var(--text);float:right}
.v3-btns{display:flex;gap:6px;margin-top:4px}.v3-btns .ghost{flex:1;padding:5px 4px}
.v3-btns .ghost[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.v3-help{font-size:.7rem}.v3-help b{color:var(--text)}
.v3-compass{position:absolute;left:400px;top:16px;width:54px;height:54px;border-radius:50%;background:var(--panel);border:1px solid var(--line)}
.v3-compass .cn,.v3-compass .cs{position:absolute;inset:0}
.v3-compass .cn i{position:absolute;left:50%;top:3px;transform:translateX(-50%);font-style:normal;font-weight:700;font-size:.78rem;color:var(--bad)}
.v3-compass .cs i{position:absolute;left:50%;bottom:3px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.view3d-on #layers,.view3d-on #sun-probe{display:none}
@media (max-width:860px){
  #timeline{padding:10px 12px 8px}.tl-when .time{font-size:1.8rem}
  .share{margin-left:0;width:100%;justify-content:space-between}.share-t span{display:none}
  .v3-ctl{top:auto;bottom:230px;right:8px;width:210px}.v3-compass{left:auto;right:8px;top:60px}
}

.v3-seg{margin-bottom:8px}.v3-ctl .wide{width:100%;margin-top:6px;text-align:center;display:block;box-sizing:border-box}
.v3-ctl .dl-link{text-decoration:none;font-size:.82rem;padding:8px 10px;border:1px solid var(--line,#2a3550);border-radius:8px;color:inherit}
.v3-zone-info{border-left:3px solid #ff8c00;padding-left:8px;line-height:1.4}
.v3-btns button[aria-pressed=true],#v3-play[aria-pressed=true]{background:rgba(255,140,0,.18);border-color:#ff8c00;color:#ffb255}

.packs{margin-top:8px;border-top:1px dashed rgba(255,255,255,.12);padding-top:6px}.packs-h{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;opacity:.65;margin-bottom:4px}
.packrow{display:flex;align-items:center;gap:8px;font-size:.8rem;padding:3px 0}.packrow .pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.packrow a.mini{text-decoration:none}.cmp-dates{display:grid;gap:6px;margin:10px 0}.cmp-dates .cd{display:flex;gap:6px;align-items:center}.cmp-dates select{flex:1}
.cmp-time{display:flex;gap:8px;align-items:center;margin:8px 0}#ex-tabs{margin:6px 0 10px}

/* tutoriel */
.brand-btns{display:flex;gap:6px;align-items:center}#tuto-btn{white-space:nowrap}
#tuto-btn.pulse{animation:tutopulse 1.6s ease-in-out 3;border-color:#ff8c00;color:#ffb255}@keyframes tutopulse{50%{box-shadow:0 0 0 6px rgba(255,140,0,.25)}}
#tuto{position:fixed;inset:0;z-index:2000}#tuto[hidden]{display:none}
#tuto-shade{position:absolute;inset:0;background:rgba(5,8,18,.72)}
#tuto-spot{position:fixed;border:2px solid #ff8c00;border-radius:12px;box-shadow:0 0 0 9999px rgba(5,8,18,.72);pointer-events:none;transition:all .25s ease}
#tuto-card{position:fixed;background:#101830;color:#e8eefc;border:1px solid #2a3550;border-radius:14px;padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.55);max-height:calc(100vh - 24px);overflow:auto}
#tuto-card.center{left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 24px))}
#tuto-card h3{margin:2px 0 8px;font-size:1.05rem}#tuto-card p{margin:0 0 10px;line-height:1.5;font-size:.9rem}
#tuto-x{position:absolute;right:8px;top:6px;background:none;border:0;color:inherit;font-size:1.4rem;cursor:pointer}
.tuto-step{font-size:.72rem!important;text-transform:uppercase;letter-spacing:.06em;color:#ffb255;margin-bottom:2px!important}
.tuto-ill{width:100%;height:auto;border-radius:10px;background:#0b1226;margin-bottom:8px}.tuto-note{font-size:.75rem!important;opacity:.7}
#tuto-dots{display:flex;gap:4px;justify-content:center;margin:8px 0}#tuto-dots i{width:6px;height:6px;border-radius:50%;background:#2a3550}#tuto-dots i.on{background:#ff8c00}
.tuto-nav{display:flex;gap:8px;align-items:center}.tuto-nav span{flex:1}
.tuto-choices{display:grid;gap:8px;margin-top:6px}.tuto-choice{display:flex;flex-direction:column;gap:2px;text-align:left;background:#16213a;border:1px solid #2a3550;border-radius:10px;padding:10px 12px;color:inherit;cursor:pointer}
.tuto-choice:hover{border-color:#ff8c00}.tuto-choice span{font-size:.8rem;opacity:.75}

.v3-ctl{max-height:calc(100vh - 340px);min-height:200px;overflow-y:auto}.demo .v3-ctl{max-height:calc(100vh - 372px)}
.v3-ctl .dl-link{white-space:normal;line-height:1.25}
@media (max-width:760px){.v3-ctl{max-height:calc(100vh - 330px)}}

.v3-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.v3-head .v3-title{margin:0}
#v3-exit{font-size:.78rem;padding:5px 10px;border-color:#ff8c00;color:#ffb255;white-space:nowrap}

.job .pk{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:4px;border-radius:7px;border:1px solid rgba(255,140,0,.55);background:rgba(255,140,0,.12);color:#ffb255;font-size:.85rem;text-decoration:none;cursor:pointer;padding:0}
.job .pk:hover{background:rgba(255,140,0,.28)}

.job .pk{align-self:center}
.hist-tag{background:rgba(16,24,48,.92);color:#ffb255;border:1px solid rgba(255,140,0,.7);border-radius:9px;font:600 10px/16px system-ui,sans-serif;text-align:center;cursor:pointer;white-space:nowrap}
.hist-zone{cursor:pointer}
.done-dates{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:0 2px 6px}.dd-h{font-size:.72rem;color:var(--muted);margin-right:2px}
.dd{background:none;border:1px solid rgba(255,140,0,.5);color:#ffb255;border-radius:12px;padding:2px 9px;font-size:.74rem;cursor:pointer}.dd:hover{background:rgba(255,140,0,.15)}.dd.on{background:#ff8c00;color:#201400;cursor:default}
.grp.flash,#mine-passes li.flash{animation:flashgrp 1.8s ease-out}@keyframes flashgrp{0%,40%{box-shadow:0 0 0 3px #ff8c00}100%{box-shadow:0 0 0 0 transparent}}

/* v10 : achat */
#packs.cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pack-card.reco { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; }
.pack-card .tag.reco { background: var(--ok); color: #04210f; }
#packs-more { display: grid; gap: 6px; margin: 8px 0; }
.pack-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #111b30; border: 1px solid #26344f;
  border-radius: 10px; padding: 9px 12px; text-align: left; }
.pack-row:hover { border-color: var(--accent); }
.pack-row b { color: var(--accent); font-variant-numeric: tabular-nums; }
.credit-grid { margin: 10px 0 4px; font-size: .82rem; color: var(--muted); }
.credit-grid summary { cursor: pointer; font-weight: 600; color: var(--text); }
.credit-grid ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; }
.credit-grid li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed #26344f; padding: 3px 0; }
.credit-grid li b { color: var(--accent); white-space: nowrap; }
.pay-secure { text-align: center; margin-top: 8px; }
.upsell { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1200; display: flex; align-items: center; gap: 12px;
  background: #0f192e; border: 1px solid var(--accent); border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.5); max-width: calc(100% - 24px); font-size: .9rem; }
.v3-preview { position: absolute; left: 12px; bottom: 12px; z-index: 5; max-width: 340px; display: grid; gap: 6px; background: rgba(15,25,46,.94);
  border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; font-size: .8rem; }
.v3-preview b { color: var(--accent); }
#view3d.preview #v3-mode-sun, #view3d.preview #v3-play, #view3d.preview #v3-zone, #view3d.preview #v3-zone-clear,
#view3d.preview #v3-rec, #view3d.preview #v3-rec-day, #view3d.preview #v3-model { opacity: .4; pointer-events: none; }
@media (max-width: 560px) { .credit-grid ul { grid-template-columns: 1fr; } }

/* v10 : mention « essai » sur la carte (retirée dès le premier achat réel) */
.trial-mark { position: fixed; inset: 0; z-index: 450; pointer-events: none; overflow: hidden; opacity: .34; }
.trial-mark span { position: absolute; font-weight: 800; font-size: 2.6rem; letter-spacing: .3em; color: #ff8a00; transform: rotate(-28deg);
  white-space: nowrap; text-shadow: 0 0 2px rgba(0,0,0,.55); }
#v3-trial { position: absolute; z-index: 4; }
.trial-badge { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1100; background: #f5a524; color: #1a1203;
  font-weight: 800; font-size: .78rem; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
body.view3d-on .trial-mark { z-index: 5; }

/* v11 */
.tagline2 { margin: 2px 0 0; font-size: .74rem; color: var(--muted); max-width: 34ch; line-height: 1.3; }
.credit-pill { background: #14301f; color: #7ee2a0; border: 1px solid #2c6b44; border-radius: 999px; padding: 4px 10px; font-size: .74rem; font-weight: 700; cursor: pointer; }
.credit-pill.low { background: #3a1f12; color: #ffb066; border-color: #a35a1c; }
#go { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; }
#go .go-main { font-weight: 700; }
#go .go-sub { font-size: .72rem; font-weight: 500; opacity: .9; }
.date-note { background: #2a2212; border: 1px solid #a37a1c; color: #ffd98a; border-radius: 8px; padding: 6px 10px; font-size: .78rem; margin: 6px 0 0; }
.when-date { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.pay-lead { font-size: .86rem; margin: 4px 0 10px; }

.tuto-todo { background: #2a2212; border: 1px solid #ff8a00; color: #ffd98a; border-radius: 8px; padding: 7px 10px; font-size: .84rem; margin: 8px 0 0; }
.tuto-todo.ok { background: #12301f; border-color: #2c6b44; color: #8ff0b0; }
#tuto-skipstep { font-size: .78rem; margin: 0 auto 0 6px; }
#tuto-next:disabled { opacity: .55; cursor: default; }

.job.current { background: rgba(255,255,255,.09); border-radius: 8px; }
.tag3 { cursor: pointer; }
.ledger li { display: grid; grid-template-columns: 62px 1fr auto auto; gap: 8px; font-size: .78rem; padding: 3px 0; border-bottom: 1px dashed #26344f; align-items: baseline; }
.ledger .ld { color: var(--muted); } .ledger .minus { color: #ff9b7a; } .ledger .plus { color: #7ee2a0; } .ledger small { color: var(--muted); }

/* v11 : vidéos 3D */
.v3-rec-box { flex-direction: column; align-items: stretch; gap: .35rem; }
.v3-check { display: flex; gap: .4rem; align-items: center; font-size: .82rem; opacity: .9; }
#v3-rec-day.recording { background: #c0392b; color: #fff; border-color: #c0392b; }
@keyframes recpulse { 50% { opacity: .7; } }
.sun-hover { position: absolute; z-index: 5; pointer-events: none; background: rgba(8,12,24,.88); color: #fff; padding: .25rem .5rem; border-radius: 6px; font-size: .82rem; white-space: nowrap; }
#probe-box { position: fixed; z-index: 30; right: 12px; bottom: 96px; max-width: 280px; background: #fff; color: #1b2433; border-radius: 10px; padding: .6rem .8rem; box-shadow: 0 6px 24px rgba(0,0,0,.28); font-size: .88rem; }
#probe-box[hidden] { display: none; }
#probe-box b { display: block; margin-bottom: .2rem; }
#probe-box .x { position: absolute; top: 2px; right: 6px; background: none; border: 0; cursor: pointer; font-size: 1rem; }
#probe-btn[aria-pressed="true"] { background: #ff8a00; color: #fff; }