/* Work Without Me — démonstration animée d'Alex (composant autonome, classes préfixées wd-).
   Sur le site, aucun texte ne descend sous 12 px (--wd-min), en bureau comme sur téléphone. */
.wd-host{width:100%;max-width:1180px;margin:0 auto}
.wd,.wd *{box-sizing:border-box}
.wd{--wd-min:12px;--navy:#07101F;--navy2:#0B1830;--navy3:#12233F;--blue:#4C8DFF;--blue2:#8DB6FF;--text:#EEF3FB;--muted:#A3B2C9;--line:rgba(163,190,235,.16);--paper:#FFFFFF;--bg:#F3F6FB;--ink:#0B1626;--ink2:#53627A;--rule:#E2E8F2;--ok:#17A673;--warn:#F2B13E;
  position:relative;display:grid;gap:14px 22px;padding:18px;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 90% at 85% 0%,#132a52 0%,rgba(19,42,82,0) 55%),var(--navy);
  color:var(--text);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;
  grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "steps" "stage" "cap" "ctrl" "legal"}
.wd :where(p){margin:0;color:inherit}
.wd :where(b){font-weight:650}
.wd :where(small){font-size:max(var(--wd-min),.82em)}
.wd :where(a){color:inherit;text-decoration:none}
.wd :where(ol){list-style:none;margin:0;padding:0}
.wd :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wd button:focus-visible,.wd a:focus-visible{outline:2px solid var(--blue2);outline-offset:3px;border-radius:8px}
.wd :where(svg){max-width:none}
.wd-i{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:none}

/* En-tête */
.wd-head{grid-area:head;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.wd-logo{display:block;flex:none;width:11.5em;max-width:50%}
.wd-logo svg{display:block;width:100%;height:auto}
.wd-tag{display:inline-flex;align-items:center;gap:.55em;font-size:max(var(--wd-min),.68em);font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2);border:1px solid var(--line);border-radius:999px;padding:.45em .9em;white-space:nowrap}
.wd-live{width:.6em;height:.6em;border-radius:50%;background:var(--blue);box-shadow:0 0 0 .25em rgba(76,141,255,.18)}

/* Étapes */
.wd-steps{grid-area:steps;display:flex;gap:6px}
.wd-steps li{flex:1;min-width:0}
.wd-steps button{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:.3em;padding:.35em 0 .55em;border-radius:10px;color:var(--muted);overflow:hidden}
.wd-step-ico{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:.7em;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:1em}
.wd-step-ico .wd-i{width:1.15em;height:1.15em}
.wd-step-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wd-step-txt b{font-weight:650;margin-right:.5em;color:var(--blue2)}
.wd-step-fill{position:absolute;left:10%;right:10%;bottom:0;height:2px;border-radius:2px;background:var(--blue);transform-origin:left center;transform:scaleX(0)}
.wd-steps .is-done{color:var(--text)}
.wd-steps .is-done .wd-step-ico{background:rgba(76,141,255,.16);border-color:rgba(76,141,255,.35);color:var(--blue2)}
.wd-steps .is-active{color:#fff}
.wd-steps .is-active .wd-step-ico{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 .4em 1.2em rgba(76,141,255,.35)}
.wd-steps button:hover .wd-step-ico{border-color:rgba(141,182,255,.6)}

/* Légende */
.wd-cap{grid-area:cap;min-width:0}
.wd-cap-step{font-size:max(var(--wd-min),.7em);font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2);margin-bottom:.45em!important;min-height:1.5em}
.wd-cap-text{font-size:1.04em;line-height:1.5;color:var(--text);min-height:4.5em}

/* Scène */
.wd-stage{grid-area:stage;position:relative;height:27em;min-width:0}
.wd-window{position:relative;height:100%;border-radius:14px;overflow:hidden;background:var(--bg);box-shadow:0 1.4em 3em rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06)}
.wd-winbar{position:absolute;z-index:3;left:0;right:0;top:0;height:2.5em;display:flex;align-items:center;gap:.8em;padding:0 1em;background:#fff;border-bottom:1px solid var(--rule);color:var(--ink2);font-size:max(var(--wd-min),.82em)}
.wd-dots{display:flex;gap:.35em}
.wd-dots i{width:.62em;height:.62em;border-radius:50%;background:#D5DDE9}
.wd-wintitle{flex:1;min-width:0;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-count{font-variant-numeric:tabular-nums;color:#8090A8;font-size:max(var(--wd-min),.92em)}
.wd-scenes{position:absolute;inset:0}
.wd-scene{position:absolute;inset:0;padding-top:2.05em;background:var(--bg);color:var(--ink);opacity:0;visibility:hidden;overflow:hidden}
.wd-scene:first-child{opacity:1;visibility:visible}
.wd-scene--dark{padding-top:0;background:radial-gradient(90% 80% at 50% 0%,#17315e 0%,rgba(23,49,94,0) 70%),var(--navy2);color:var(--text)}
.wd-pad{height:100%;display:flex;flex-direction:column;justify-content:center;gap:.75em;padding:1.1em 1.25em}
.wd-pad--center{align-items:center;justify-content:center}

/* Couverture */
.wd-cover{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5em;gap:.35em}
.wd-cover-mark{display:block;width:4.2em;margin-bottom:.6em}
.wd-cover-mark svg{display:block;width:100%;height:auto}
.wd-eyebrow{font-size:max(var(--wd-min),.7em);font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:var(--blue2);margin-bottom:.7em!important}
.wd-cover-title{font-size:2em;line-height:1.12;font-weight:560;letter-spacing:-.03em;color:#fff}
.wd-serif{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;color:var(--blue2);letter-spacing:-.02em}
.wd-end-logo{display:block;width:13em;margin-bottom:1em}
.wd-end-logo svg{display:block;width:100%;height:auto}
.wd-cta{display:inline-flex;align-items:center;gap:.5em;margin-top:1.1em;padding:.75em 1.4em;border-radius:999px;background:var(--blue);color:#fff!important;font-weight:650;box-shadow:0 .6em 1.6em rgba(76,141,255,.35)}
.wd-cta-url{margin-top:.6em!important;font-size:max(var(--wd-min),.8em);color:var(--muted)!important;letter-spacing:.04em}

/* Emails */
.wd-avatar{flex:none;display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:#E4EBF7;color:#2A3A55;font-weight:700;font-size:max(var(--wd-min),.9em)}
.wd-avatar--alex{background:var(--blue);color:#fff}
.wd-inbox-row{display:flex;align-items:center;gap:.75em;padding:.65em .85em;background:#fff;border:1px solid var(--rule);border-left:3px solid var(--blue);border-radius:10px}
.wd-inbox-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.wd-inbox-who small{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-badge{font-size:max(var(--wd-min),.68em);font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.3em .7em}
.wd-badge--new{background:#E7F0FF;color:#2559C8}
.wd-mail{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:.9em 1.05em;box-shadow:0 .3em 1em rgba(12,30,60,.06)}
.wd-mail--alex{border-top:3px solid var(--blue)}
.wd-mail-head{display:flex;align-items:center;gap:.7em;margin-bottom:.6em}
.wd-mail-who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.wd-mail-who small{color:var(--ink2)}
.wd-mail-subject{font-weight:650;margin-bottom:.3em!important}
.wd-mail-body{color:#26344B;line-height:1.5}
.wd-reply p+p{margin-top:.45em}
.wd-sign{color:#2559C8;font-weight:600}
.wd-alex-note{display:flex;align-items:center;gap:.7em;padding:.65em .85em;border-radius:10px;background:#E9F1FF;color:#1D3E80;font-size:max(var(--wd-min),.95em)}
.wd-alex-dot{flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:max(var(--wd-min),.82em)}
.wd-typing{display:flex;align-items:center;gap:.3em;color:var(--ink2);font-size:max(var(--wd-min),.92em)}
.wd-typing i{width:.42em;height:.42em;border-radius:50%;background:var(--blue)}
.wd-typing--inline{padding:.35em 0}
.wd-chips{display:flex;flex-wrap:wrap;gap:.45em}
.wd-chip{font-size:max(var(--wd-min),.82em);font-weight:600;color:#2559C8;background:#fff;border:1px solid #BFD3FA;border-radius:999px;padding:.32em .85em}

/* Effet machine à écrire : le texte complet réserve la place */
.wd-tw{position:relative;display:block}
.wd-tw-ghost{visibility:hidden}
.wd-tw-live{position:absolute;left:0;top:0;right:0}
.wd-caret::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--blue)}

/* Documents */
.wd-paper{position:relative;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:1em 1.15em;box-shadow:0 .5em 1.5em rgba(12,30,60,.08)}
.wd-paper-head{display:flex;align-items:center;justify-content:space-between;gap:1em;padding-bottom:.75em;border-bottom:2px solid var(--ink);margin-bottom:.4em}
.wd-yourlogo{display:grid;place-items:center;flex:none;white-space:nowrap;min-width:6.5em;min-height:2.4em;padding:0 .7em;border:1.5px dashed #B7C4D9;border-radius:8px;color:#7C8BA3;font-size:max(var(--wd-min),.78em);font-weight:600;letter-spacing:.04em}
.wd-paper-id{display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.3}
.wd-paper-id b{letter-spacing:.14em;font-size:1.05em}
.wd-paper-id small{color:var(--ink2)}
.wd-line{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.55em 0;border-bottom:1px solid var(--rule)}
.wd-line span{display:flex;flex-direction:column;line-height:1.35}
.wd-line small{color:var(--ink2)}
.wd-line b{white-space:nowrap;font-variant-numeric:tabular-nums}
.wd-line--total{border-bottom:0;font-size:1.08em}
.wd-line--total b{color:#2559C8;font-size:1.12em}
.wd-actions{display:flex;justify-content:flex-end;margin-top:.6em}
.wd-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-width:11em;padding:.62em 1.2em;border-radius:999px;background:var(--blue);color:#fff;font-weight:650;white-space:nowrap}
.wd-btn.is-pressed{transform:scale(.95);background:#3473E0}
.wd-btn.is-loading{background:#3473E0}
.wd-btn.is-done{background:var(--ok);transform:none}
.wd-lbl-l,.wd-lbl-b{display:none;align-items:center;gap:.45em}
.wd-btn.is-loading .wd-lbl-a{display:none}
.wd-btn.is-loading .wd-lbl-l{display:inline-flex}
.wd-btn.is-done .wd-lbl-a,.wd-btn.is-done .wd-lbl-l{display:none}
.wd-btn.is-done .wd-lbl-b{display:inline-flex}
.wd-spin{width:1em;height:1em;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff}
.wd-cursor{position:absolute;right:16%;bottom:-.95em;width:1.7em;height:1.7em;opacity:0;pointer-events:none;filter:drop-shadow(0 .15em .25em rgba(0,0,0,.3))}
.wd-cursor svg{display:block;width:100%;height:100%}
.wd-proof{display:flex;align-items:center;gap:.45em;color:#0E7F57;font-weight:600;font-size:max(var(--wd-min),.92em)}
.wd-proof .wd-i{color:var(--ok)}
.wd-stamp{position:absolute;right:9%;top:42%;padding:.15em .55em;border:3px solid var(--ok);border-radius:8px;color:var(--ok);font-weight:800;font-size:1.5em;letter-spacing:.14em;text-transform:uppercase;opacity:0;background:rgba(255,255,255,.85)}
.wd-toast,.wd-escalade{display:flex;align-items:center;gap:.8em;padding:.75em .95em;border-radius:12px;background:var(--navy);color:#fff;box-shadow:0 .6em 1.6em rgba(7,16,31,.25)}
.wd-toast span:last-child,.wd-escalade span:last-child{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.wd-toast small,.wd-escalade small{color:var(--blue2);font-size:max(var(--wd-min),.75em);font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.wd-toast-ico{flex:none;display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:var(--blue);color:#fff}
.wd-escalade .wd-toast-ico{background:var(--warn);color:var(--navy)}

/* Paiement */
.wd-bubble{align-self:stretch;background:#E9F1FF;color:#1D3E80;border-radius:12px;padding:.6em .9em;font-size:max(var(--wd-min),.95em)}
.wd-pay{width:100%;max-width:23em;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:1em 1.15em;display:flex;flex-direction:column;gap:.55em;box-shadow:0 .6em 1.6em rgba(12,30,60,.09)}
.wd-pay-head{display:flex;align-items:center;gap:.5em;color:var(--ink2);font-size:max(var(--wd-min),.82em);font-weight:600}
.wd-pay-what{color:var(--ink2);font-size:max(var(--wd-min),.9em)}
.wd-pay-amount{font-size:1.9em;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.wd-field{display:flex;justify-content:space-between;gap:1em;padding:.6em .8em;border:1px solid var(--rule);border-radius:9px;color:var(--ink2);font-size:max(var(--wd-min),.9em)}
.wd-field-val{color:var(--ink);font-variant-numeric:tabular-nums;min-width:9em;text-align:right}
.wd-btn--pay{width:100%;margin-top:.2em}

/* Livraison */
.wd-files{display:grid;grid-template-columns:1fr 1fr;gap:.45em;margin-top:.7em}
.wd-file{display:flex;align-items:center;gap:.5em;padding:.5em .7em;border:1px solid var(--rule);border-radius:9px;background:#F8FAFD;font-size:max(var(--wd-min),.88em);font-weight:600;color:#26344B;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-file .wd-i{color:var(--blue)}

/* SAV */
.wd-thread{justify-content:center}
.wd-msg{display:flex;align-items:flex-end;gap:.6em;max-width:92%}
.wd-msg p{padding:.65em .9em;border-radius:14px;line-height:1.45}
.wd-msg--in p{background:#fff;border:1px solid var(--rule);border-bottom-left-radius:4px}
.wd-msg--out{align-self:flex-end;flex-direction:row-reverse}
.wd-msg--out p{background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.wd-msg--out .wd-typing i{background:#fff}
.wd-msg--out .wd-caret::after{background:#fff}

/* Commandes */
.wd-ctrl{grid-area:ctrl;display:flex;align-items:center;gap:10px;min-width:0}
.wd-ctrl-btns{display:flex;gap:6px}
.wd-ib{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;border:1px solid var(--line)!important;color:var(--text)}
.wd-ib:hover{border-color:rgba(141,182,255,.6)!important}
.wd-ib--main{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff}
.wd-ib .wd-i{width:1.05em;height:1.05em}
.wd-ico-pause{display:none}
.wd.is-playing .wd-ico-play{display:none}
.wd.is-playing .wd-ico-pause{display:block}
.wd-ico-play,.wd-ico-pause{line-height:0}
.wd-progress{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;min-width:3em}
.wd-progress i{display:block;height:100%;background:var(--blue);transform-origin:left center;transform:scaleX(0)}
.wd-ctrl-cta{flex:none;padding:.55em 1.05em;border-radius:999px;background:#fff;color:var(--navy)!important;font-weight:650;font-size:max(var(--wd-min),.9em)}
.wd-legal{grid-area:legal;font-size:max(var(--wd-min),.72em);color:var(--muted);line-height:1.45}

/* Mise en page large (côte à côte) */
.wd.wd--wide{grid-template-columns:minmax(14em,29%) minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto;grid-template-areas:"head head" "steps stage" "cap stage" "ctrl ctrl" "legal legal";padding:22px 24px}
.wd--wide .wd-steps{flex-direction:column;gap:2px;align-self:start}
.wd--wide .wd-steps button{flex-direction:row;justify-content:flex-start;gap:.75em;padding:.42em .5em;text-align:left}
.wd--wide .wd-step-txt{position:static;width:auto;height:auto;clip:auto;font-size:max(var(--wd-min),.94em)}
.wd--wide .wd-step-ico{width:2.1em;height:2.1em}
.wd--wide .wd-step-fill{left:.5em;right:.5em}
.wd--wide .wd-stage{grid-row:2/4;height:29em}
.wd--wide .wd-cap{align-self:end;padding-bottom:.2em}
.wd--wide .wd-cap-step{display:none}

/* Très petit écran */
.wd.wd--compact{padding:14px;gap:12px;border-radius:16px}
.wd--compact .wd-tag{font-size:max(var(--wd-min),.6em);padding:.4em .65em;letter-spacing:.06em}
.wd--compact .wd-logo{width:9.5em}
.wd--compact .wd-head{gap:8px}
.wd--compact .wd-step-ico{width:2.05em;height:2.05em}
.wd--compact .wd-files{grid-template-columns:1fr}
.wd--compact .wd-ctrl-cta{display:none}
.wd--compact .wd-stage{height:29em}
.wd--xs .wd-stage{height:33em}
.wd--xs .wd-logo{width:8.4em}
.wd--xs .wd-live{display:none}

/* Petits formats : on garde l'essentiel */
.wd:not(.wd--wide) .wd-chips{display:none}
.wd:not(.wd--wide) .wd-tag-long{display:none}
.wd--square .wd-steps,.wd--square .wd-cap-step{display:none}

/* Mode vidéo (export publicitaire) */
.wd-host.is-video{max-width:none;width:100vw;height:100vh}
.is-video .wd{--wd-min:0px;height:100%;border-radius:0;grid-template-areas:"head" "steps" "stage" "cap";grid-template-rows:auto auto minmax(0,1fr) auto}
.is-video .wd-ctrl,.is-video .wd-legal{display:none}
.is-video .wd-stage{height:auto}
.is-video .wd.wd--wide{grid-template-areas:"head head" "steps stage" "cap stage";grid-template-rows:auto auto minmax(0,1fr)}
.is-video .wd.wd--square{grid-template-areas:"head" "stage" "cap";grid-template-rows:auto minmax(0,1fr) auto}
.wd--square .wd-stage{font-size:max(var(--wd-min),.9em)}
.is-video .wd--wide .wd-stage{grid-row:2/4}
.is-video .wd-cap-text{min-height:3em}