/* Réplique de Flyer Live (page publique) + commandes de démonstration */
.fd{position:relative;color:#e8eaf3;font-size:15px;line-height:1.4}
.fd *{box-sizing:border-box}
.fd button{font:inherit;color:inherit;cursor:pointer}
.fd-layout{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,600px);gap:28px;justify-content:center;align-items:start}
.fd-side{display:grid;gap:16px;position:sticky;top:84px}
.fd-chips{display:flex;flex-wrap:wrap;gap:8px}
.fd-chips button{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.2);color:#e8eaf3;border-radius:99px;padding:7px 16px;font-weight:600;transition:background .15s}
.fd-chips button:hover{background:rgba(255,255,255,.15)}
.fd-chips button[aria-pressed=true]{background:#fff;color:var(--ink);border-color:#fff}
.fd-ctl{background:rgba(255,255,255,.05);border:1px solid #2a2f52;border-radius:16px;padding:14px 16px}
.fd-ctl-h{font-weight:700;margin-bottom:10px;color:#fff}
.fd-time{display:flex;align-items:center;gap:12px}
.fd-play{width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#0e1018;display:grid;place-items:center;flex:none}
.fd-play::before{content:'';border-left:14px solid #0e1018;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.fd-play.on::before{border:0;width:12px;height:14px;margin:0;background:linear-gradient(90deg,#0e1018 0 35%,transparent 35% 65%,#0e1018 65%)}
.fd-clock{font:800 1.8rem var(--f-head);letter-spacing:-.02em;min-width:78px;font-variant-numeric:tabular-nums}
.fd-range{flex:1;min-width:90px;-webkit-appearance:none;appearance:none;height:8px;border-radius:99px;background:linear-gradient(90deg,#7c5cff var(--p,0%),#2a2f52 var(--p,0%));outline-offset:6px}
.fd-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #7c5cff;cursor:grab}
.fd-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #7c5cff;cursor:grab}
.fd-tips{margin:0;padding:0 0 0 18px;color:#aeb4d0;font-size:.93rem}.fd-tips li{margin:.3em 0}
/* téléphone */
.fd-phone{position:relative;height:790px;border-radius:30px;overflow:hidden;background:#0a0710;border:1px solid #2a2f52;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.fd-glow{position:absolute;inset:0;background:radial-gradient(420px 320px at 8% 12%,rgba(232,79,208,.38),transparent 70%),radial-gradient(380px 300px at 100% 38%,rgba(245,184,65,.28),transparent 70%),radial-gradient(420px 360px at 20% 95%,rgba(31,181,165,.26),transparent 70%);filter:blur(20px);pointer-events:none}
.fl{position:absolute;inset:0;overflow-y:auto;padding:18px 16px 24px;scrollbar-width:thin;scrollbar-color:#e84fd0 transparent;outline:none}
.fl-head{display:flex;gap:14px;align-items:flex-start}
.fl-logo{flex:none;width:76px;height:76px;border-radius:18px;background:linear-gradient(135deg,#e84fd0,#f5b841);display:grid;place-items:center;font:800 1.7rem var(--f-head);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.35);transform:rotate(-4deg)}
.fl-kick{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;color:#c9cde4}
.fl-title{font:800 1.7rem/1.05 var(--f-head);text-transform:uppercase;margin:2px 0 4px;color:#fff;letter-spacing:-.01em}
.fl-ed{font-size:.92rem;color:#e8eaf3}.fl-dates{font-size:.85rem;color:#c9cde4}.fl-city{font-size:.82rem;color:#aeb4d0}
.fl-pinic{margin-left:auto;width:18px;height:22px;background:#c9cde4;clip-path:path('M9 0C4 0 0 4 0 9c0 6 9 13 9 13s9-7 9-13c0-5-4-9-9-9zm0 12.5A3.5 3.5 0 1 1 9 5.500a3.5 3.5 0 0 1 0 7z');opacity:.8}
.fl-tabs{display:flex;gap:10px;justify-content:center;margin:14px 0;flex-wrap:wrap}
.fl-tabs button{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);border-radius:12px;padding:9px 18px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.84rem;color:#d4d7ea}
.fl-tabs button[aria-selected=true]{background:#d63fc2;border-color:#f06ad9;color:#fff;box-shadow:0 0 18px rgba(232,79,208,.5)}
.fl-edito{background:rgba(255,255,255,.06);border:1px solid #2a2f52;border-radius:16px;padding:16px;margin-bottom:12px}
.fl-edito p{margin:0 0 12px;color:#e8eaf3;max-width:none}
.tiles{display:grid;gap:8px}.tiles div{border-left:5px solid var(--c);background:rgba(255,255,255,.06);border-radius:0 12px 12px 0;padding:10px 14px}.tiles b{display:block;color:#fff}.tiles small{color:#aeb4d0}
.fl-map{position:relative;border-radius:14px;overflow:hidden;border:1px solid #2a2f52}
.fl-map svg{display:block;width:100%;height:auto;aspect-ratio:800/480}
.fl-mapbtn{position:absolute;left:10px;top:10px;z-index:2;background:rgba(10,7,16,.85);border:0;border-radius:99px;padding:7px 14px;font-weight:800;font-size:.85rem;color:#fff}
/* plan : deux rendus */
svg.carte{--land:#a9d49a;--water:#a8d4ea;--line:#fff}
svg.plan{--land:var(--pland);--water:var(--pwater);--line:var(--pline)}
svg.carte .bgr{fill:#ecdfba}svg.plan .bgr{fill:var(--pbg)}
svg.carte .blk{fill:#dccb98}svg.plan .blk{fill:none}
svg.carte .road{stroke:#fff;stroke-width:15}svg.plan .road{stroke:var(--pline);stroke-width:13}
.road{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pin{cursor:pointer;outline:none}
.pin .halo{fill:var(--c);opacity:0;transform-box:fill-box;transform-origin:center}
.pin .dot{fill:var(--c);stroke:#fff;stroke-width:3;transition:stroke-width .2s}
.pin .num{fill:#fff;font:800 16px var(--f-head);pointer-events:none}
.pin .lab{font:800 13.5px var(--f-body);pointer-events:none;paint-order:stroke;stroke-width:4px;stroke-linejoin:round}
svg.carte .lab{fill:#2a2418;stroke:#fff}svg.plan .lab{fill:#e8eaf3;stroke:var(--pbg)}
.pin.ev[data-s=live] .halo{opacity:.5;animation:halo 2s ease-in-out infinite}
.pin.ev[data-s=next] .halo{opacity:.25;animation:halo 2.6s ease-in-out infinite}
.pin.ev[data-s=idle]{opacity:.62}.pin.ev[data-s=off] .dot{fill:#7b7f95;stroke-dasharray:4 3}
@keyframes halo{50%{transform:scale(1.4);opacity:.12}}
.pin.sv .dot{fill:#3a63d8;stroke:#fff;stroke-width:2.5}.pin.sv .ico{fill:#fff}.pin.sv .ico-t{fill:#fff;font:800 11px var(--f-body);pointer-events:none}
.pin.sv{opacity:.85}.mode-services .pin.sv{opacity:1}.mode-services .pin.ev{opacity:.25}
.pin.dim{opacity:.15!important}
.pin.sel .dot{stroke-width:5;stroke:#ffd36b}.pin.sel{filter:drop-shadow(0 0 7px rgba(255,211,107,.9))}
.pin:focus-visible .dot{stroke:#ffd36b;stroke-width:5}
.pin.flashpin{animation:flashpin .9s ease 2}@keyframes flashpin{50%{filter:drop-shadow(0 0 22px #ff9d3c)}}
.here circle:first-child{fill:rgba(40,40,80,.25);animation:halo 2.4s infinite;transform-box:fill-box;transform-origin:center}
.here circle:nth-child(2){fill:#1d2a8f;stroke:#fff;stroke-width:2.5}
.here text{font:800 12px var(--f-body);paint-order:stroke;stroke-width:4px}svg.carte .here text{fill:#1d2a8f;stroke:#fff}svg.plan .here text{fill:#fff;stroke:var(--pbg)}
.route{fill:none;stroke:#e0301e;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:2 11;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-26}}
.boot .pin{animation:bootpin .6s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:var(--d)}@keyframes bootpin{from{opacity:0}to{opacity:1}}
.boot .pin .halo{animation:none}
/* filtres, note */
.fl-chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.chip{border-radius:99px;padding:5px 13px;font-weight:700;font-size:.88rem;background:rgba(0,0,0,.35);border:1.5px solid var(--c,#e84fd0);color:var(--c,#e84fd0)}
.chip.live{--c:#e84fd0}.chip.all{--c:#f5b841}.chip.on{background:var(--c);color:#13101c}
.fl-note{position:relative;background:rgba(18,12,30,.85);border:1px solid #2f3560;border-radius:12px;padding:10px 34px 10px 14px;font-size:.82rem;color:#e8eaf3;display:grid;gap:3px;margin-bottom:10px}
.fl-note .x{position:absolute;right:8px;top:6px;background:none;border:0;font-size:1.2rem;color:#c9cde4}
.dayh{display:flex;justify-content:space-between;background:rgba(18,12,30,.85);border:1px solid #2f3560;border-radius:10px;padding:9px 14px;font-weight:800;letter-spacing:.05em;color:#aeb4d0;font-size:.85rem;margin-bottom:8px}
.dayh span{font-weight:600}
.none{color:#aeb4d0;padding:12px}
/* lignes */
.row{position:relative;display:grid;grid-template-columns:64px 62px minmax(0,1fr) 34px;gap:10px;align-items:start;background:rgba(20,14,34,.82);border:1px solid #2f3560;border-left:4px solid var(--c,#7c5cff);border-radius:12px;padding:10px;margin-bottom:8px;cursor:pointer}
.row.done,.row.cancel{opacity:.55}.row.cancel h4{text-decoration:line-through}
.row.live{box-shadow:0 0 0 1px #4ee0a8,0 0 22px rgba(78,224,168,.25);background:rgba(16,34,34,.85)}
.row.sel{outline:2px solid #ffd36b;outline-offset:1px}
.row.flash{animation:cardflash 1.4s ease}@keyframes cardflash{0%{box-shadow:0 0 0 0 rgba(255,211,107,.9)}100%{box-shadow:0 0 0 18px rgba(255,211,107,0)}}
.th{width:64px;height:84px;border-radius:8px;display:grid;place-items:center;font:800 1.2rem var(--f-head);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.tm{display:grid;justify-items:center;text-align:center;gap:1px;color:#aeb4d0;font-size:.74rem}
.tm b{color:#ffd36b;font:800 1.05rem var(--f-head)}
.tm .num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 .95rem var(--f-head);font-style:normal;margin-top:6px;border:2px solid rgba(255,255,255,.7)}
.by h4{margin:0;font:800 .95rem/1.2 var(--f-body);text-transform:uppercase;color:#fff;letter-spacing:.01em;display:flex;gap:7px;align-items:baseline}
.ti{flex:none;width:11px;height:11px;border-radius:3px;transform:translateY(1px)}
.ty{display:block;color:#aeb4d0;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;margin:2px 0 5px}
.bds{display:flex;gap:6px;flex-wrap:wrap}
.bd{border-radius:7px;padding:1px 8px;font-size:.76rem;font-weight:700}
.bd.free{background:#1c5a3d;color:#8cf0c0}.bd.paid{background:#5a4210;color:#ffd36b}.bd.fx{background:#2f2a5a;color:#cfc4ff}.bd.full{background:#5a1c1c;color:#ff9d86;border:1px solid #ff6b57}
.stt{margin-top:6px;font-size:.78rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#c9cde4}
.st-live{color:#4ee0a8}.st-next{color:#ffd36b}.st-done{color:#8a8fa8}.st-cancel{color:#ff9d86}
.pg{display:block;width:60px;height:5px;border-radius:3px;background:#2a2f52;overflow:hidden}.pg i{display:block;height:100%;background:#4ee0a8}
.lieu{margin-top:5px;font-size:.78rem;color:#aeb4d0}.lieu b{color:#e8eaf3;text-transform:uppercase}
.go{background:none;border:0;color:#4ee0a8;font-weight:700;font-size:.78rem;padding:0 0 0 6px}
.star{width:34px;height:34px;border-radius:10px;background:none;border:1.5px solid #3a4070;color:#7d85b0;font-size:1.1rem}
.star.on{background:#f5b841;border-color:#f5b841;color:#201600}
.q4{grid-column:1/-1;margin:6px 0 0;display:grid;gap:6px;border-top:1px solid #2f3560;padding-top:10px}
.q4>div{display:grid;grid-template-columns:54px 1fr;gap:8px;align-items:baseline}
.q4 dt{font-weight:800;color:#b9a8ff;font-size:.9rem}.q4 dd{margin:0;color:#e8eaf3}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;background:color-mix(in srgb,var(--c,#7c5cff) 30%,#171b36);border:1px solid var(--c,#7c5cff);font-weight:600;font-size:.85rem}
.tix{grid-column:1/-1}.fd .fd-tix{background:#fff;color:#0e1018;border:0;border-radius:8px;padding:5px 14px;font-weight:700;font-size:.88rem}
.row.svr{grid-template-columns:42px minmax(0,1fr) auto;align-items:center}
.sic{width:40px;height:40px;border-radius:10px;background:#3a63d8;color:#fff;display:grid;place-items:center}
.dist{font-style:normal;font-weight:800;color:#ffd36b;font-size:.85rem}
.fl-foot{text-align:center;color:#8a8fa8;font-size:.78rem;margin-top:14px}
/* organisateur */
.fd-org .org-in{background:#f1f2f7;color:var(--ink);border-radius:16px;padding:16px 18px;border:2px solid var(--gold)}
.fd-org .org-in h3{margin:0 0 4px;font-size:1.1rem;color:var(--ink)}
.fd-org .org-in p{color:var(--ink2);margin:0 0 .6em}
.org-row{display:grid;gap:12px}
.org-row label{display:grid;gap:4px;font-weight:600;font-size:.9rem;color:var(--ink)}
.org-row input[type=text]{padding:8px 10px;width:100%}
.org-time{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:var(--ink);flex-wrap:wrap}
.org-time button{background:#fff;color:var(--ink);border:1.5px solid #b9bed0;border-radius:8px;padding:6px 10px}
.org-time output{font:800 1.3rem var(--f-head);min-width:62px;text-align:center}
.org-chk{display:flex!important;align-items:center;gap:8px!important}.org-chk input{width:18px;height:18px}
.fd .btn{color:#fff}.fd .btn:hover{color:#fff}
.org-st{margin:10px 0 0!important;color:var(--mute)!important;font-size:.92rem;min-height:1.4em}
.fd .small{color:var(--mute)}
.fd-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);background:#fff;color:#0e1018;font-weight:600;padding:12px 18px;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;max-width:min(92vw,520px)}
.fd-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:980px){.fd-layout{grid-template-columns:minmax(0,600px)}.fd-side{position:static;order:2}.fd-phone{order:1;height:720px}}
@media (max-width:520px){.fd-phone{height:680px;border-radius:22px}.row{grid-template-columns:52px 52px minmax(0,1fr) 32px;gap:8px}.th{width:52px;height:72px}.fl-title{font-size:1.4rem}.fl-logo{width:60px;height:60px}.fd-chips button{padding:6px 12px;font-size:.9rem}}
@media (prefers-reduced-motion:reduce){.pin .halo,.route,.here circle:first-child{animation:none!important}}
