/* Copie (partie animation) de css/flow.css de My Studio Labs, aux couleurs de Take my challenge. Design « flow » : animation 16:9 (sélecteurs limités à .wf) + thème sombre de la page Workflow (body.flowpage) */
.wf{
  --page:#08090b; --page-ink:#e9ecf1; --page-muted:#8a93a3;
  --dk-bg:#0b0d10; --dk-dot:#ffffff1c; --dk-ink:#f2f4f7; --dk-line:#ffffff2e; --dk-node:#121519;
  --lt-bg:#eeeeec; --lt-key:#dcdcd9; --lt-ink:#111214; --lt-line:#1112142e; --lt-node:#ffffff;
  --signal:var(--fp,#5fb4ff); --signal-soft:var(--fp-soft,#5fb4ff55); --hl:var(--fp-hl,#7cc3ff);
  --display:"Inter Tight","Inter",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}.wf .wf-in{display:grid;gap:18px}.wf .intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px 24px}.wf .intro h1{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:-.03em;text-wrap:balance}.wf .intro p{color:var(--page-muted);max-width:56ch;line-height:1.5}.wf .fmt{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--page-muted);border:1px solid #ffffff24;border-radius:999px;padding:6px 12px;white-space:nowrap}.wf .stage{position:relative;width:100%;aspect-ratio:16/9;max-width:100%;border-radius:18px;overflow:hidden;background:var(--dk-bg);box-shadow:0 40px 80px -40px #000,0 0 0 1px #ffffff14}.wf .frame{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0}.wf .frame h3,.wf .frame p,.wf .intro h1,.wf .intro p,.wf .apps{margin:0}.wf .bento h3,.wf .want h3{line-height:1}.wf .scene{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}.wf .scene.on{opacity:1}.wf .scene.dark{background:var(--dk-bg) radial-gradient(circle,var(--dk-dot) 1.6px,transparent 2px) 0 0/44px 44px;color:var(--dk-ink)}.wf .scene.light{background:var(--lt-bg);color:var(--lt-ink)}.wf .scene.light::before{content:"";position:absolute;inset:0;background:
  linear-gradient(var(--lt-bg),var(--lt-bg)) padding-box;opacity:0}.wf .keys{position:absolute;inset:0;display:grid;grid-template-columns:repeat(14,1fr);gap:14px;padding:14px;opacity:.55}.wf .keys i{border:2px solid var(--lt-key);border-radius:18px;height:96px}.wf .bar{position:absolute;left:80px;right:80px;top:96px;height:2px;background:currentColor;opacity:.9}.wf .bar::before,.wf .bar::after{content:"";position:absolute;top:-12px;width:3px;height:26px;background:currentColor}.wf .bar::before{left:0}.wf .bar::after{right:0}.wf .bar i{position:absolute;top:-6px;width:2px;height:14px;background:currentColor;opacity:.45}.wf .bar b{position:absolute;top:-1px;height:4px;background:var(--signal);border-radius:2px}.wf .lab{position:absolute;left:80px;right:80px;top:132px;display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:30px;letter-spacing:.14em}.wf .lab .cmd{font-size:40px;font-weight:700;letter-spacing:0}.wf .lab .tag{background:var(--signal);color:#0b0d10;font-weight:700;padding:4px 14px;border-radius:8px}.wf .lab .ch{opacity:.6}.wf .lab .num{margin-left:auto;opacity:.6}.wf svg.wire{position:absolute;inset:0;width:1600px;height:900px;overflow:visible}.wf .wire .base{fill:none;stroke-width:4}.wf .dark .wire .base{stroke:var(--dk-line)}.wf .light .wire .base{stroke:var(--lt-line)}.wf .wire .lit{fill:none;stroke:var(--signal);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 8px var(--signal))}.wf .node{position:absolute;display:grid;place-items:center;text-align:center;font-family:var(--mono);font-size:32px;font-weight:500;border:3px solid;border-radius:16px;padding:0 18px;transition:border-color .3s,box-shadow .3s,transform .3s,color .3s;line-height:1.15}.wf .node small{display:block;font-size:20px;opacity:.6;margin-top:4px}.wf .dark .node{background:var(--dk-node);border-color:#ffffffd9;color:var(--dk-ink)}.wf .light .node{background:var(--lt-node);border-color:var(--lt-ink);color:var(--lt-ink);box-shadow:0 7px 0 var(--lt-ink)}.wf .node.hit{border-color:var(--signal);color:var(--signal);transform:translateY(-3px)}.wf .dark .node.hit{box-shadow:0 0 0 6px var(--signal-soft),0 0 40px var(--signal-soft)}.wf .light .node.hit{box-shadow:0 7px 0 var(--signal),0 0 0 6px var(--signal-soft)}.wf .comet{position:absolute;left:0;top:0;width:0;height:0}.wf .comet i{position:absolute;border-radius:50%;background:var(--signal);transform:translate(-50%,-50%)}.wf .pop{position:absolute;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s,transform .45s}.wf .pop.in{opacity:1;transform:none}.wf .pill{position:absolute;font-family:var(--mono);font-size:28px;border:3px solid currentColor;border-radius:14px;padding:6px 18px}.wf .big-pill{position:absolute;font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:-.03em;border:3px solid currentColor;border-radius:20px;padding:12px 40px}.wf .bento{position:absolute;background:#fff;border:3px solid var(--lt-ink);border-radius:26px}.wf .bento .t{position:absolute;left:40px;top:28px;background:var(--hl);border:3px solid var(--lt-ink);border-radius:12px;font-family:var(--body);font-weight:600;font-size:30px;padding:4px 18px}.wf .bento h3{position:absolute;left:40px;top:96px;font-family:var(--display);font-weight:800;font-size:96px;letter-spacing:-.05em}.wf .bento .m{position:absolute;right:44px;top:120px;font-family:var(--mono);font-size:24px;opacity:.6}.wf .mail{background:#fff;color:#111214;border-radius:20px;padding:26px 30px;box-shadow:0 30px 60px -20px #000c;font-size:22px;line-height:1.45;width:520px}.wf .mail b{display:block;font-family:var(--display);font-size:30px;margin:6px 0 10px}.wf .mail small{font-family:var(--mono);font-size:17px;color:#5d6470}.wf .mail .go{display:inline-block;margin-top:14px;background:#111214;color:#fff;border-radius:10px;padding:10px 18px;font-weight:600}.wf .notif{display:flex;gap:16px;align-items:center;border-radius:20px;padding:18px 22px;width:560px;font-size:22px;color:#fff;box-shadow:0 20px 40px -18px #0009}.wf .notif i{flex:none;width:52px;height:52px;border-radius:50%;background:#fff3;display:grid;place-items:center;font-style:normal;font-weight:800;font-family:var(--display)}.wf .notif b{display:block;font-size:24px}.wf .tbl{background:#fff;border:3px solid var(--lt-ink);border-radius:18px;font-family:var(--mono);font-size:22px;width:640px;overflow:hidden}.wf .tbl div{display:grid;grid-template-columns:1.1fr 1fr 1fr;padding:14px 22px;border-top:2px solid #11121414}.wf .tbl div:first-child{border-top:0;background:#11121408;font-weight:700}.wf .st{border-radius:8px;padding:2px 10px;justify-self:start}.wf .st.wait{background:#ffe7c2;color:#8a4b00}.wf .st.paid{background:#c9f2d4;color:#11632d}.wf .want{position:absolute;left:150px;right:150px;height:250px;background:#fff;border:3px solid var(--lt-ink);border-radius:26px}.wf .want small{position:absolute;left:40px;top:30px;font-family:var(--mono);font-size:24px;letter-spacing:.14em;opacity:.6}.wf .want h3{position:absolute;left:40px;top:70px;font-family:var(--display);font-weight:800;font-size:92px;letter-spacing:-.05em}.wf .want p{position:absolute;left:44px;top:184px;font-family:var(--mono);font-size:26px;opacity:.6}.wf .cap{position:absolute;left:80px;width:1120px;bottom:70px;border-left:6px solid var(--signal);padding-left:30px;font-family:var(--display);font-weight:800;font-size:54px;line-height:1.16;letter-spacing:-.035em}.wf .cap span{opacity:.18;transition:opacity .25s}.wf .cap span.on{opacity:1}.wf .cap .k{background:var(--hl);color:#0b0d10;border-radius:10px;padding:0 10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.wf .ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}.wf .ctrl button{font:600 .95rem var(--body);color:var(--page-ink);background:#ffffff10;border:1px solid #ffffff22;border-radius:999px;padding:9px 16px;cursor:pointer}.wf .ctrl button:hover{background:#ffffff1c}.wf .ctrl button:focus-visible,.wf .chap button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}.wf .ctrl .now{font-family:var(--mono);font-size:.85rem;color:var(--page-muted);margin-left:auto}.wf .chap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.wf .chap button{text-align:left;font:500 .9rem var(--body);color:var(--page-muted);background:transparent;border:1px solid #ffffff1a;border-radius:12px;padding:10px 12px;cursor:pointer;display:grid;gap:2px;min-width:0}.wf .chap button b{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--page-muted)}.wf .chap button.on{border-color:var(--signal);color:var(--page-ink)}.wf .chap button.on b{color:var(--signal)}.wf .apps{color:var(--page-muted);font-size:.92rem;line-height:1.6}.wf .apps b{color:var(--page-ink)}@media (max-width:720px){.wf .chap{grid-template-columns:repeat(2,minmax(0,1fr))}.wf .ctrl .now{margin-left:0;width:100%}}@media (prefers-reduced-motion:reduce){.wf .scene,.wf .pop,.wf .node,.wf .cap span{transition:none}}
.wf{background:var(--page);color:var(--page-ink);font-family:var(--body);border-radius:28px;padding:clamp(18px,3vw,34px)}
.wf .lab .tag{font-size:30px;font-family:var(--mono);letter-spacing:.14em;line-height:1.3;border:0}
.wf .frame{background:none;border-radius:0;box-shadow:none;overflow:visible}.wf .bar{border-radius:0;flex:none}.wf .pop{animation:none}.wf .lab .tag{color:#0b0d10;background:var(--signal);padding:4px 14px;border-radius:8px}


/* Couleurs et polices Take my challenge */
.wf{--signal:#8f7bff;--signal-soft:#8f7bff55;--hl:#c9bcff;--page:#120a3a;--dk-bg:#140c45;--dk-node:#1b1257;--display:"Lexend",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif}
.wf .stage{box-shadow:0 40px 80px -40px #0008,0 0 0 1px #ffffff1a}
.defi-flow .wf{margin-top:8px}
/* Section « Le déroulement » (page module) : plus compacte sur ordinateur */
@media (min-width:861px){
  .defi-flow{padding:64px 0}
  .defi-flow .head h2{font-size:clamp(1.6rem,2.4vw,2.2rem)}
  .defi-flow .wf{max-width:820px;margin-inline:auto;padding:14px;border-radius:18px}
  .defi-flow .wf .stage{border-radius:12px}
  .defi-flow .wf .wf-in{gap:12px}
  .defi-flow .wf .ctrl button{font-size:.82rem;padding:7px 13px}
  .defi-flow .wf .chap{gap:6px}
  .defi-flow .wf .chap button{font-size:.8rem;padding:8px 10px;border-radius:10px}
}