/* xp-kit.css : grammaire visuelle E-Procurement (variables, irritants, roue du parcours, fiche, profils, calendrier). Extrait de module.css. */
:root{--navy:#163467;--cy:#13b4e2;--vi:#6b51ed;--sun:#ffcf63;--gl:#f0f6f8;--txt:#3d5174;--line:rgba(22,52,103,.10);--ease:cubic-bezier(.23,1,.32,1);--spring:cubic-bezier(.34,1.42,.5,1)}
.xp-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbfd 30%,#f0f6f8 100%)}
.xp-bg i{position:absolute;display:block;border-radius:50%}
.xp-bg .h1{top:-8%;right:-12%;width:62%;aspect-ratio:1;background:radial-gradient(circle,rgba(19,180,226,.16),transparent 62%);animation:drift 22s ease-in-out infinite alternate}
.xp-bg .h2{top:30%;left:-18%;width:58%;aspect-ratio:1;background:radial-gradient(circle,rgba(107,81,237,.12),transparent 62%);animation:drift 26s ease-in-out infinite alternate-reverse}
.xp-bg .h3{bottom:-10%;right:10%;width:46%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,207,99,.16),transparent 62%);animation:drift 30s ease-in-out infinite alternate}
.xp-bg .dots{position:absolute;inset:0;border-radius:0;background-image:radial-gradient(rgba(22,52,103,.10) 1px,transparent 1.2px);background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 40%,transparent 60%,#000);mask-image:linear-gradient(180deg,#000,transparent 40%,transparent 60%,#000);animation:xpDots 60s linear infinite}
@keyframes xpDots{to{background-position:280px 140px}}
/* ---------- sections ---------- */
.xp{padding:0 30px 40px;position:relative}
.xp-sec{padding-top:78px}
.xp-k{display:inline-flex;align-items:center;gap:.55rem;font-size:.68rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--cy);background:rgba(19,180,226,.09);border:1px solid rgba(19,180,226,.25);padding:6px 15px;border-radius:50px}
.xp-k i{width:6px;height:6px;border-radius:50%;background:var(--green,#7eefa0);animation:ping 2.4s infinite}
.xp-h{font:700 clamp(1.6rem,3vw,2.35rem)/1.15 'Miriam Libre',Barlow,sans-serif;color:var(--navy);margin:.8rem 0 .5rem;letter-spacing:-.015em}
.xp-h em{font-style:normal;color:var(--cy);position:relative;white-space:nowrap}
.xp-h em::after{content:'';position:absolute;left:0;right:0;bottom:.04em;height:.28em;background:rgba(255,207,99,.55);z-index:-1;border-radius:3px;transform-origin:left;transform:scaleX(0);transition:transform .9s .35s var(--ease)}
.xp-rv.in .xp-h em::after,.xp-h.in em::after{transform:scaleX(1)}
.xp-lead{color:var(--txt);font-size:1.02rem;max-width:64ch;line-height:1.6}
.xp-rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.xp-rv.in{opacity:1;transform:none}
.xp-rv.d1{transition-delay:.08s}.xp-rv.d2{transition-delay:.16s}.xp-rv.d3{transition-delay:.24s}.xp-rv.d4{transition-delay:.32s}

@keyframes xpIn{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* ---------- « Ce que ça change » : irritants révélés à la loupe ---------- */
.xp-pz-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.xp-sw{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:50px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(22,52,103,.08)}
.xp-sw i{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:50px;background:var(--navy);box-shadow:0 8px 20px rgba(22,52,103,.3);transition:transform .6s var(--spring),background .4s}
.xp-sw.r i{transform:translateX(100%);background:linear-gradient(110deg,var(--cy),var(--vi));box-shadow:0 10px 26px rgba(107,81,237,.4)}
.xp-sw button{position:relative;z-index:1;border:0;background:none;cursor:pointer;padding:10px 22px;font:700 .9rem Barlow,sans-serif;color:var(--navy);transition:color .35s;white-space:nowrap}
.xp-sw button.on{color:#fff}
.xp-score{display:inline-flex;align-items:center;gap:10px;font:600 .88rem Barlow,sans-serif;color:var(--txt)}
.xp-score svg{width:40px;height:40px;transform:rotate(-90deg)}
.xp-score circle{fill:none;stroke:var(--gl);stroke-width:5}
.xp-score circle.a{stroke:url(#pwNumG);stroke:var(--cy);stroke-linecap:round;stroke-dasharray:0 200;transition:stroke-dasharray .8s var(--spring)}
.xp-score b{font:700 1.15rem 'Miriam Libre',sans-serif;color:var(--navy)}
.xp-score.bump svg{animation:xpBump .6s var(--spring)}
.xp-score.all circle.a{stroke:var(--vi)}
@keyframes xpBump{40%{transform:rotate(-90deg) scale(1.25)}}
.xp-pz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px;perspective:1100px}
.xp-pt{position:relative;display:grid;min-height:290px;border-radius:1.5rem;overflow:hidden;cursor:pointer;isolation:isolate;outline:none;--mx:50%;--my:50%;--rx:0deg;--ry:0deg;
  border:1px solid var(--line);background:#fff;box-shadow:0 14px 40px rgba(22,52,103,.07);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.xp-pt.w2{grid-column:span 2}
.xp-pt:hover,.xp-pt.full{box-shadow:0 30px 70px rgba(22,52,103,.18)}
.xp-pt:focus-visible{box-shadow:0 0 0 3px var(--cy),0 30px 70px rgba(22,52,103,.18)}
.xp-pain,.xp-gain{grid-area:1/1;position:relative;padding:24px 26px;min-width:0}
.xp-pain{display:flex;flex-direction:column;background:repeating-linear-gradient(135deg,rgba(22,52,103,.035) 0 2px,transparent 2px 13px),linear-gradient(160deg,#fbfcfd,#eef3f7);z-index:1;transition:opacity .35s cubic-bezier(.23,1,.32,1),visibility .35s}
.xp-pt.full .xp-pain{opacity:0;visibility:hidden}
.xp-tag{display:inline-flex;align-items:center;gap:8px;font:700 .68rem Barlow,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6b7c99}
.xp-tag svg{width:16px;height:16px;flex:none}
.xp-pain h4{font:700 clamp(1.12rem,1.55vw,1.42rem)/1.28 'Miriam Libre',sans-serif;color:var(--navy);margin:14px 0 8px;max-width:26ch}
.xp-pain p{color:#566a8c;font-size:.9rem;line-height:1.5;max-width:44ch}
.xp-ghost{position:absolute;right:-18px;bottom:-26px;width:170px;height:170px;color:rgba(22,52,103,.07);animation:xpJit 6s ease-in-out infinite;pointer-events:none}
.xp-ghost svg{width:100%;height:100%}
@keyframes xpJit{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg) translateY(-6px)}}
.xp-hint{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:9px;font:700 .78rem Barlow,sans-serif;color:var(--cy)}
.xp-hint i{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(19,180,226,.12);position:relative}
.xp-hint i::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--cy);animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.xp-hint svg{width:15px;height:15px}
.xp-hint .ht{display:none}
@media (hover:none){.xp-hint .hm{display:none}.xp-hint .ht{display:inline}}
.xp-gain{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,rgba(107,81,237,.6),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(19,180,226,.5),transparent 60%),#163467;
  clip-path:circle(0px at var(--mx) var(--my));transition:clip-path .55s var(--ease);z-index:2}
.xp-pt.w2 .xp-gain{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
.xp-pt.lens .xp-gain{clip-path:circle(110px at var(--mx) var(--my))}
.xp-pt.full .xp-gain{clip-path:circle(160% at var(--mx) var(--my));transition-duration:.95s}
.xp-gain .xp-tag{color:#8fe6ff}
.xp-gain h4{font:700 clamp(1.15rem,1.65vw,1.5rem)/1.22 'Miriam Libre',sans-serif;margin:12px 0 8px;color:#fff}
.xp-gain h4 em{font-style:normal;background:linear-gradient(90deg,#7fe3ff,#c8bbff);-webkit-background-clip:text;background-clip:text;color:transparent}
.xp-gain p{font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.82)}
.xp-lens{position:absolute;left:var(--mx);top:var(--my);width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;z-index:3;pointer-events:none;
  border:2px solid rgba(127,227,255,.95);box-shadow:0 0 0 7px rgba(19,180,226,.16),0 0 46px rgba(19,180,226,.45),inset 0 0 30px rgba(255,255,255,.12);
  opacity:0;transform:scale(.3);transition:opacity .3s,transform .5s var(--spring),left .55s var(--ease),top .55s var(--ease)}
.xp-lens em{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);font:700 .64rem Barlow,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:#fff;padding:4px 10px;border-radius:50px;background:linear-gradient(90deg,var(--cy),var(--vi))}
.xp-pt.lens:not(.full) .xp-lens{opacity:1;transform:none}
/* visuels animés côté « Avec Esker » : ils démarrent à la révélation */
.gv{position:relative;font-family:Barlow,sans-serif;min-width:0}
.xp-pt .gv *{animation-play-state:paused}
.xp-pt.lens .gv *,.xp-pt.full .gv *{animation-play-state:running}
.gv-bud{display:grid;gap:9px;padding:14px 16px;border-radius:1rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.gv-bud .r{display:grid;grid-template-columns:96px minmax(0,1fr) 40px;gap:10px;align-items:center;font-size:.76rem;color:rgba(255,255,255,.85);border-radius:8px;transition:background .3s}
.gv-bud .r:hover{background:rgba(255,255,255,.08)}
.gv-bud .r span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-bud .r b{text-align:right;font-weight:700;color:#fff}
.gv-bud .t{position:relative;height:10px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.gv-bud .t i{position:absolute;top:0;bottom:0;border-radius:6px}
.gv-bud .c{left:0;width:var(--c);background:linear-gradient(90deg,#13b4e2,#5fd4f5);transform-origin:left;animation:xpGrow 1.1s var(--d) var(--ease) both}
.gv-bud .e{left:var(--c);width:var(--e);background:repeating-linear-gradient(135deg,#a594ff 0 4px,#6b51ed 4px 8px);transform-origin:left;animation:xpGrow .9s calc(var(--d) + .7s) var(--ease) both}
.gv-bud .r.hot b{color:var(--sun)}
.gv-bud .r.hot .t{box-shadow:0 0 0 1.5px var(--sun);animation:xpHot 1.6s 1.8s ease-in-out infinite}
@keyframes xpGrow{from{transform:scaleX(0)}to{transform:none}}
@keyframes xpHot{50%{box-shadow:0 0 0 1.5px var(--sun),0 0 16px rgba(255,207,99,.6)}}
.gv-bud .lg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:4px;font-size:.7rem;color:rgba(255,255,255,.7)}
.gv-bud .lg span{display:inline-flex;align-items:center;gap:6px}
.gv-bud .lg .c::before,.gv-bud .lg .e::before{content:'';width:10px;height:10px;border-radius:3px;background:#13b4e2}
.gv-bud .lg .e::before{background:#6b51ed}
.gv-bud .lg .al{color:var(--sun);font-weight:700}
.gv-bud .lg svg{width:13px;height:13px}
.gv-ia .ch{position:relative;display:grid;gap:6px;padding-left:22px}
.gv-ia .ch u{position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden}
.gv-ia .ch u::after{content:'';position:absolute;left:0;right:0;height:34%;background:linear-gradient(transparent,#7fe3ff,#fff);animation:xpRun 2.75s linear infinite}
@keyframes xpRun{from{top:-34%}to{top:100%}}
.gv-ia .ch span{position:relative;display:flex;align-items:center;gap:8px;font:700 .8rem Barlow,sans-serif;color:rgba(255,255,255,.88);padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.07);animation:xpLit 2.75s var(--d) linear infinite}
.gv-ia .ch span::before{content:'';position:absolute;left:-19px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#163467;border:2px solid #7fe3ff}
.gv-ia .ch svg{width:14px;height:14px;color:#c8bbff;flex:none}
@keyframes xpLit{0%,100%{background:rgba(255,255,255,.07)}8%,22%{background:rgba(127,227,255,.26);box-shadow:0 0 18px rgba(127,227,255,.35)}}
.gv-ia .gov{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.gv-ia .gov em{display:flex;align-items:center;gap:6px;font:700 .7rem Barlow,sans-serif;font-style:normal;color:#163467;background:#fff;border-radius:50px;padding:5px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-ia .gov svg{width:13px;height:13px;color:var(--vi);flex:none}
.gv-chat{display:grid;gap:7px;padding:12px;border-radius:1rem;background:#fff;color:#1d2b45;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.gv-chat .hd{display:flex;align-items:center;gap:7px;font:700 .72rem Barlow,sans-serif;color:#5b5fc7;border-bottom:1px solid #eef0f6;padding-bottom:7px}
.gv-chat .hd i{width:9px;height:9px;border-radius:50%;background:#5b5fc7}
.gv-chat .b{font-size:.76rem;line-height:1.4;padding:7px 10px;border-radius:10px;max-width:92%;opacity:0;animation:xpMsg .5s var(--d) var(--ease) forwards}
.gv-chat .bot{background:#f1f3fb}
.gv-chat .me{justify-self:end;background:#5b5fc7;color:#fff;font-weight:700}
.gv-chat .ac{display:flex;gap:6px;opacity:0;animation:xpMsg .5s var(--d) var(--ease) forwards}
.gv-chat .ac span{font:700 .7rem Barlow,sans-serif;padding:5px 11px;border-radius:7px;border:1px solid #d7dbec;color:#3d4470}
.gv-chat .ac .ok{background:#5b5fc7;border-color:#5b5fc7;color:#fff;animation:xpPress .5s 1.45s both}
.gv-chat .via{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.gv-chat .via span{font:700 .64rem Barlow,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6b51ed;background:#f2efff;border-radius:50px;padding:4px 9px}
@keyframes xpMsg{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes xpPress{50%{transform:scale(.88);box-shadow:0 0 0 6px rgba(91,95,199,.25)}}
.gv-pdf{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:1rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.gv-pdf .doc{flex:none;width:40px;height:50px;border-radius:6px;background:#fff;color:#163467;font:800 .66rem Barlow,sans-serif;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;position:relative;animation:xpFly 2.6s var(--ease) infinite}
.gv-pdf .doc::before{content:'';position:absolute;left:8px;right:8px;top:9px;height:3px;border-radius:2px;background:#d0d9e6;box-shadow:0 7px 0 #d0d9e6,0 14px 0 #d0d9e6}
@keyframes xpFly{0%,100%{transform:none}40%{transform:translateX(6px) rotate(4deg)}}
.gv-pdf .ar{width:22px;height:2px;background:linear-gradient(90deg,transparent,#7fe3ff);position:relative}
.gv-pdf .ar::after{content:'';position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:#7fe3ff;border-right:0}
.gv-pdf .ln{flex:1;display:grid;gap:5px}
.gv-pdf .ln i{height:8px;border-radius:4px;background:linear-gradient(90deg,#13b4e2,#6b51ed);transform-origin:left;animation:xpLine 2.6s var(--d) var(--ease) infinite}
@keyframes xpLine{0%{transform:scaleX(0);opacity:.3}30%,85%{transform:none;opacity:1}100%{opacity:.3}}
.gv-pdf .ck{flex:none;font:800 1rem 'Miriam Libre',sans-serif;color:var(--sun)}
.gv-ok{display:flex;align-items:center;gap:16px;padding:12px 14px;border-radius:1rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.gv-ok .ph{display:flex;align-items:center;gap:10px}
.gv-ok .bt{width:42px;height:42px;border-radius:50%;background:var(--green,#7eefa0);color:#163467;display:flex;align-items:center;justify-content:center;animation:xpBeat 1.8s ease-in-out infinite}
.gv-ok .bt svg{width:20px;height:20px}
.gv-ok small{font:700 .8rem Barlow,sans-serif;color:#fff}
@keyframes xpBeat{0%,100%{box-shadow:0 0 0 0 rgba(126,239,160,.55)}50%{box-shadow:0 0 0 12px rgba(126,239,160,0);transform:scale(1.06)}}
.gv-ok .wv{display:flex;align-items:center;gap:4px;height:30px;margin-left:auto}
.gv-ok .wv i{width:4px;height:100%;border-radius:3px;background:#7fe3ff;transform-origin:center;animation:xpWave 1s var(--d) ease-in-out infinite alternate}
@keyframes xpWave{from{transform:scaleY(.25)}to{transform:none}}
.gv-dial{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.gv-dial .dl{position:relative;width:118px;height:118px;border-radius:50%;background:conic-gradient(from -90deg,#13b4e2,#6b51ed,#13b4e2);padding:3px}
.gv-dial .dl::before{content:'';position:absolute;inset:3px;border-radius:50%;background:#163467}
.gv-dial .hd{position:absolute;left:50%;top:50%;width:2px;height:44px;margin-left:-1px;background:linear-gradient(#7fe3ff,transparent);transform-origin:top;animation:spin 6s linear infinite;z-index:1}
.gv-dial .su,.gv-dial .mo{position:absolute;left:50%;width:18px;height:18px;margin-left:-9px;z-index:1}
.gv-dial .su{top:10px;color:var(--sun)}.gv-dial .mo{bottom:10px;color:#c8bbff}
.gv-dial .su svg,.gv-dial .mo svg{width:100%;height:100%}
.gv-dial b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 .86rem 'Miriam Libre',sans-serif;color:#fff;z-index:1}
.gv-dial .ev{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gv-dial .ev li{display:flex;gap:8px;align-items:center;font-size:.76rem;color:#fff;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.08);opacity:0;animation:xpMsg .5s var(--d) var(--ease) forwards}
.gv-dial time{font:700 .7rem Barlow,sans-serif;color:#7fe3ff}
.gv-sync{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.gv-sync .nd{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 .78rem Barlow,sans-serif;background:#fff;color:#163467;box-shadow:0 0 0 6px rgba(255,255,255,.1)}
.gv-sync .nd:last-child{background:linear-gradient(135deg,#13b4e2,#6b51ed);color:#fff}
.gv-sync .ln{display:grid;gap:8px}
.gv-sync .l{position:relative;height:20px;border-top:1.5px dashed rgba(255,255,255,.25);margin-top:10px}
.gv-sync .l span{position:absolute;top:-11px;left:0;font:700 .64rem Barlow,sans-serif;white-space:nowrap;padding:3px 8px;border-radius:50px;background:#7fe3ff;color:#163467;animation:xpGoR 2.4s var(--d) var(--ease) infinite}
.gv-sync .l.rev span{background:#c8bbff;animation-name:xpGoL}
@keyframes xpGoR{0%{left:0;opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0;transform:translateX(-100%)}}
@keyframes xpGoL{0%{left:100%;opacity:0;transform:translateX(-100%)}15%{opacity:1}85%{opacity:1}100%{left:0;opacity:0;transform:translateX(0)}}
.xp-pz-end{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-radius:1.3rem;color:#fff;background:linear-gradient(110deg,#163467,#2b3f9a 55%,#6b51ed);box-shadow:0 20px 50px rgba(107,81,237,.3);animation:xpIn .8s var(--ease) both}
.xp-pz-end[hidden]{display:none}
.xp-pz-end b{display:block;font:700 1.15rem 'Miriam Libre',sans-serif}
.xp-pz-end span{font-size:.9rem;opacity:.85}
.xp-pz-end .xp-sb svg{width:14px;height:14px}

/* ---------- roue du parcours : un seul SVG, un seul centre ---------- */
.xp-wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;margin-top:24px}
.pw{position:relative;width:100%;max-width:640px;margin:0 auto;outline:none}
.pw-svg{display:block;width:100%;height:auto;overflow:visible}
.pw-seg{cursor:pointer;outline:none;transition:transform .6s var(--spring),opacity .4s}
.pw-seg:focus{outline:none}
.pw-seg .pg{fill:var(--c);opacity:0;filter:url(#pwBlur);transition:opacity .45s}
.pw-seg .pf{fill:#fff;stroke:var(--c);stroke-width:1.6;stroke-opacity:.55;transition:fill .45s var(--ease),stroke-width .3s,stroke-opacity .3s}
.pw-seg .pr{fill:var(--c);opacity:.55;transition:opacity .4s}
.pw-seg .pi{color:var(--c);transform-box:fill-box;transform-origin:center;transition:color .4s,transform .55s var(--spring)}
.pw-seg .pl{fill:var(--navy);font:700 15px Barlow,sans-serif;text-anchor:middle;transition:fill .4s;pointer-events:none}
.pw-seg .pn{fill:#8a9ab4;font:700 10.5px 'Miriam Libre',sans-serif;letter-spacing:.1em;text-anchor:middle;transition:fill .4s;pointer-events:none}
.pw-seg:hover,.pw-seg.hov,.pw-seg.on,.pw-seg:focus-visible{transform:translate(var(--tx),var(--ty))}
.pw-seg:hover .pf,.pw-seg.hov .pf{stroke-width:2.6;stroke-opacity:1}
.pw-seg:hover .pg,.pw-seg.hov .pg{opacity:.3}
.pw-seg:hover .pi,.pw-seg.hov .pi{transform:scale(1.22) rotate(-6deg)}
.pw-seg.done .pr{opacity:1}
.pw-seg.done .pn{fill:var(--c)}
.pw-seg.on .pf{fill:var(--c);stroke-opacity:1;stroke-width:2}
.pw-seg.on .pg{opacity:.55}
.pw-seg.on .pr{fill:#fff;opacity:.35}
.pw-seg.on .pi{color:#fff;transform:scale(1.15)}
.pw-seg.on .pl{fill:#fff}
.pw-seg.on .pn{fill:rgba(255,255,255,.85)}
.pw-seg:focus-visible .pf{stroke:var(--navy);stroke-width:3;stroke-opacity:1}
.pw.hovering .pw-seg:not(.hov):not(.on){opacity:.5}
.pw.pers .pw-seg:not(.hit):not(.on){opacity:.25}
.pw.pers .pw-seg.hit .pf{stroke:var(--vi);stroke-width:3;stroke-opacity:1;stroke-dasharray:7 5;animation:xpDashA 1s linear infinite}
@keyframes xpDashA{to{stroke-dashoffset:-24}}
@keyframes xpDashB{to{stroke-dashoffset:-20}}
.pw-ind{transform-box:view-box;transform-origin:370px 370px;transition:transform 1.05s cubic-bezier(.34,1.3,.5,1);filter:drop-shadow(0 0 8px rgba(107,81,237,.55))}
.pw-flow .fl{animation:xpDashB 1.6s linear infinite}
.pw-flow .cm{animation:xpComet 7s linear infinite}
@keyframes xpComet{from{stroke-dashoffset:1017.9}to{stroke-dashoffset:0}}
.pw-node{fill:#fff;stroke:rgba(22,52,103,.25);stroke-width:1.5;transform-box:fill-box;transform-origin:center;transition:all .5s var(--spring)}
.pw-node.done{fill:var(--c);stroke:var(--c)}
.pw-node.on{fill:var(--c);stroke:#fff;stroke-width:2.5;transform:scale(1.8)}
.pw-hub .hn{font:700 64px 'Miriam Libre',sans-serif;fill:url(#pwNumG);text-anchor:middle;letter-spacing:-.02em}
.pw-hub .hs{font-size:22px;fill:#8a9ab4}
.pw-hub .ht{font:700 19px 'Miriam Libre',sans-serif;fill:var(--navy);text-anchor:middle}
.pw-hub .hk{font:700 10.5px Barlow,sans-serif;letter-spacing:.2em;fill:var(--hc,#13b4e2);text-anchor:middle;transition:fill .4s}
.pw-hc.sw{animation:xpHubIn .55s var(--ease) both}
@keyframes xpHubIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- fiche étape, profils ---------- */
.xp-card{position:relative;border-radius:1.6rem;background:#fff;border:1px solid var(--line);box-shadow:0 30px 80px rgba(22,52,103,.10);padding:28px 28px 22px;overflow:hidden}
.xp-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--cy),var(--vi))}
.xp-card .xin{animation:xpIn .7s var(--ease) both}
.xp-card-k{font:700 .7rem Barlow,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:var(--cy)}
.xp-card-h{font:700 1.5rem/1.2 'Miriam Libre',sans-serif;color:var(--navy);margin:.5rem 0 .6rem}
.xp-card-p{color:var(--txt);font-size:.96rem;line-height:1.6}
.xp-card ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.xp-card li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--navy);font-weight:600;line-height:1.4}
.xp-card li::before{content:'';flex:none;width:20px;height:20px;border-radius:50%;background:var(--cy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:0 4px 10px rgba(19,180,226,.35)}
.xp-shot{margin-top:18px;position:relative;display:block;width:100%;border-radius:1rem;overflow:hidden;border:1px solid var(--line);cursor:zoom-in;padding:0;background:var(--gl);aspect-ratio:16/8}
.xp-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;animation:xpKen 16s ease-in-out infinite alternate}
.xp-shot.xin{animation:xpWipe .9s .25s var(--ease) both}
@keyframes xpWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes xpKen{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-3%,-4%)}}
.xp-shot span{position:absolute;left:10px;bottom:10px;font:700 .74rem Barlow,sans-serif;padding:5px 11px;border-radius:50px;background:rgba(255,255,255,.92);color:var(--navy);box-shadow:0 4px 14px rgba(22,52,103,.15)}
.xp-act{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.xp-go{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;text-align:left;padding:10px 18px 10px 10px;border-radius:50px;background:var(--navy);color:#fff;font-family:Barlow,sans-serif;transition:all .35s var(--spring);box-shadow:0 10px 26px rgba(22,52,103,.25)}
.xp-go:hover{background:var(--cy);transform:translateY(-2px);box-shadow:0 16px 36px rgba(19,180,226,.4)}
.xp-go .pl{width:36px;height:36px;border-radius:50%;background:var(--cy);display:flex;align-items:center;justify-content:center;flex:none;transition:background .3s}
.xp-go:hover .pl{background:#fff;color:var(--cy)}
.xp-go .pl svg{width:14px;height:14px;margin-left:2px}
.xp-go b{display:block;font-size:.86rem;line-height:1.2}
.xp-go small{display:block;font-size:.72rem;opacity:.75;margin-top:2px}
.xp-go.off{background:var(--gl);color:#64779a;box-shadow:none;cursor:default}
.xp-go.off .pl{background:rgba(22,52,103,.12)}
.xp-nav{margin-left:auto;display:flex;gap:6px}
.xp-nb{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s var(--spring)}
.xp-nb:hover,.xp-nb.on{border-color:var(--cy);background:var(--cy);color:#fff;transform:scale(1.08)}
.xp-nb svg{width:15px;height:15px}
.xp-tbar{height:3px;background:var(--gl);border-radius:3px;margin-top:16px;overflow:hidden}
.xp-tbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cy),var(--vi))}

/* ---------- personas ---------- */
.xp-pers{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.xp-pc{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:50px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;font:700 .9rem Barlow,sans-serif;box-shadow:0 6px 18px rgba(22,52,103,.06);transition:all .35s var(--spring)}
.xp-pc i{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;background:var(--gl);transition:transform .5s var(--spring)}
.xp-pc:hover{transform:translateY(-3px);border-color:var(--vi)}
.xp-pc:hover i{transform:rotate(-12deg) scale(1.1)}
.xp-pc.on{background:var(--vi);border-color:var(--vi);color:#fff;box-shadow:0 14px 34px rgba(107,81,237,.35)}
.xp-pc.on i{background:#fff}
.xp-pcard{margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:26px;border-radius:1.4rem;padding:26px 28px;background:linear-gradient(120deg,#fff,#f4f1ff);border:1px solid rgba(107,81,237,.22);box-shadow:0 20px 60px rgba(107,81,237,.10)}
.xp-pcard[hidden]{display:none}
.xp-pq{font:700 1.2rem/1.45 'Miriam Libre',sans-serif;color:var(--navy)}
.xp-pq small{display:block;margin-top:10px;font:700 .8rem Barlow,sans-serif;color:var(--vi);letter-spacing:.04em}
.xp-pg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.xp-pg div{border-radius:1rem;padding:13px 15px;background:#fff;border:1px solid var(--line)}
.xp-pg b{display:block;font-size:.92rem;color:var(--navy)}
.xp-pg span{display:block;font-size:.82rem;color:var(--txt);margin-top:3px;line-height:1.4}
.xp-pcard .xin{animation:xpIn .6s var(--ease) both}
/* ---------- calendrier ---------- */
.xp-road{position:relative;margin-top:30px;padding:56px 0 6px}
.xp-road-line{position:absolute;left:0;right:0;top:32px;height:6px;border-radius:6px;background:rgba(22,52,103,.08);overflow:hidden}
.xp-road-line i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--cy),var(--vi));transition:transform 2.4s var(--ease)}
.xp-road-line u{position:absolute;top:0;bottom:0;width:80px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);animation:xpRunX 3s linear infinite}
@keyframes xpRunX{from{left:-80px}to{left:100%}}
.xp-road.in .xp-road-line i{transform:scaleX(1)}
.xp-road-pts{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.xp-road-pt{position:relative;text-align:center;opacity:0;transform:translateY(14px);transition:all .7s var(--spring)}
.xp-road.in .xp-road-pt{opacity:1;transform:none}
.xp-road-pt::before{content:'';position:absolute;left:50%;top:-31px;width:16px;height:16px;transform:translateX(-50%);border-radius:50%;background:#fff;border:4px solid var(--cy);box-shadow:0 4px 12px rgba(19,180,226,.4)}
.xp-road-pt.last::before{background:var(--sun);border-color:var(--navy);width:22px;height:22px;top:-34px;animation:ping 2.4s infinite}
.xp-road-pt b{display:block;font:700 .72rem Barlow,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cy)}
.xp-road-pt span{display:block;font-size:.86rem;color:var(--navy);font-weight:600;margin-top:4px;line-height:1.3}

/* ---------- surcharges fiche et profils ---------- */
.xp-card-k em{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;margin-right:10px;background:var(--sc,var(--cy));color:#fff;letter-spacing:0;font-size:.7rem;vertical-align:middle;transition:background .4s}
.xp-card::before{background:linear-gradient(var(--sc,var(--cy)),var(--vi));transition:background .4s}
.xp-shot span{display:inline-flex;align-items:center;gap:6px}
.xp-shot span svg{width:14px;height:14px}
.xp-pc i{color:var(--vi)}
.xp-pc i svg{width:17px;height:17px}
.xp-pc.on i{color:var(--vi)}

@media(max-width:1060px){
  .xp-stage{grid-template-columns:1fr}
  .xp-rail{min-height:0}
  .xp-rail-in{position:static}
  .xp-rail-l{flex-direction:row;overflow-x:auto;overflow-y:hidden}
  .xp-ri{flex:0 0 260px}
  .xp-ri.on::before{left:14%;right:14%;top:-6px;bottom:auto;width:auto;height:3px}
  .xp-ri:hover{transform:translateY(-2px)}
}
@media(max-width:980px){
  .xp-pcard{grid-template-columns:1fr}
  .xp-road-pts{grid-template-columns:repeat(4,1fr);row-gap:46px}
}
@media(max-width:640px){
  .xp{padding:0 16px 28px}
  .xp-sec{padding-top:56px}
  .xp-road-pts{grid-template-columns:repeat(2,1fr)}
  .xp-nav{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .xp-rv{opacity:1;transform:none}
  .xp-road-line i{transform:scaleX(1)}.xp-road-pt{opacity:1;transform:none}
}
.xp-lb.tall{align-items:flex-start}
.xp-lb.tall figure{max-height:92vh;overflow:auto;padding:0 4px 12px}
.xp-lb.tall img{max-height:none;width:min(1300px,86vw);max-width:none}

/* ---------- adaptatif ---------- */
@media (max-width:1100px){
  .xp-pz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xp-pt.w2 .xp-gain{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  .xp-wrap{grid-template-columns:minmax(0,1fr)}
  .pw{max-width:560px}
  .xp-ex-grid{grid-template-columns:minmax(0,1fr)}
  .xp-ex-vp{height:420px}
  .xp-ex-list{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
@media (max-width:640px){
  .xp-pz{grid-template-columns:minmax(0,1fr)}
  .xp-pt.w2{grid-column:auto}
  .xp-pt{min-height:0}
  .xp-pain,.xp-gain{padding:20px}
  .gv-bud .r{grid-template-columns:78px minmax(0,1fr) 36px}
  .gv-dial{grid-template-columns:minmax(0,1fr)}
  .gv-dial .dl{margin:0 auto}
  .xp-ex-vp{height:340px}
  .xp-ex-list{grid-template-columns:minmax(0,1fr)}
  .xp-sw button{padding:9px 16px}
  .pw-seg .pl{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .xp-pt,.xp-gain,.xp-lens,.pw-seg,.pw-ind,.xp-ex-cam{transition-duration:.01s!important}
  .gv *,.pw-flow .cm,.pw-flow .fl,.xp-ghost{animation:none!important;opacity:1!important}
}

