.cxa{--cxa-a1:#38bdf8;--cxa-a2:#818cf8;--cxa-ink:#1e3a5f;--cxa-mut:#64748b;--cxa-line:#dbe3ec;--cxa-gap:24px;--cxa-step:.75s;position:relative;}
.cxa-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cxa-n),1fr);gap:var(--cxa-gap);position:relative;z-index:1;}
.cxa-track{position:absolute;top:23px;height:2px;border-radius:2px;background:var(--cxa-line);
  left:calc((100% - (var(--cxa-n) - 1) * var(--cxa-gap)) / (2 * var(--cxa-n)));
  right:calc((100% - (var(--cxa-n) - 1) * var(--cxa-gap)) / (2 * var(--cxa-n)));}
.cxa-fill{position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,var(--cxa-a1),var(--cxa-a2));
  transform-origin:left center;transition:transform calc(var(--cxa-step) * (var(--cxa-n) - 1)) linear;}
.cxa-step{text-align:center;}
.cxa-dot{position:relative;overflow:hidden;width:46px;height:46px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid transparent;color:#fff;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 6px rgba(56,189,248,.14);
  transition:color .35s,border-color .35s,box-shadow .35s,transform .45s cubic-bezier(.3,1.6,.5,1);
  transition-delay:calc(var(--i) * var(--cxa-step));}
.cxa-dot::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--cxa-a1),var(--cxa-a2));
  transition:opacity .35s;transition-delay:inherit;}
.cxa-dot span{position:relative;}
.cxa-step h4{margin:0 0 6px;font-size:16px;color:var(--cxa-ink);transition:opacity .5s;transition-delay:calc(var(--i) * var(--cxa-step));}
.cxa-step p{margin:0 auto;max-width:28ch;font-size:14px;line-height:1.5;color:var(--cxa-mut);transition:opacity .5s;transition-delay:calc(var(--i) * var(--cxa-step));}
/* état de départ (posé par le script) */
.cxa.is-prep *,.cxa.is-prep *::before{transition:none !important;}
.cxa.is-prep .cxa-fill{transform:scaleX(0);}
.cxa.is-prep .cxa-dot{color:var(--cxa-mut);border-color:var(--cxa-line);box-shadow:none;transform:scale(.86);}
.cxa.is-prep .cxa-dot::before{opacity:0;}
.cxa.is-prep h4,.cxa.is-prep p{opacity:.35;}
@media (max-width:640px){
  .cxa-steps{grid-template-columns:1fr;gap:22px;}
  .cxa-step{display:grid;grid-template-columns:46px 1fr;gap:0 16px;text-align:left;align-items:start;}
  .cxa-dot{margin:0;grid-row:span 2;}
  .cxa-step h4{margin-top:12px;}
  .cxa-step p{margin:0;max-width:none;}
  .cxa-track{left:22px;right:auto;top:23px;bottom:23px;width:2px;height:auto;}
  .cxa-fill{transform-origin:center top;}
  .cxa.is-prep .cxa-fill{transform:scaleY(0);}
}


.cxf{--cxf-a1:#38bdf8;--cxf-a2:#818cf8;--cxf-ok:#10b981;--cxf-ink:#1e3a5f;--cxf-mut:#94a3b8;--cxf-line:#dbe3ec;--cxf-gap:12px;position:relative;}
.cxf-nodes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--cxf-gap);position:relative;z-index:1;}
.cxf-rail{position:absolute;top:27px;height:3px;border-radius:3px;background:var(--cxf-line);
  left:calc((100% - 3 * var(--cxf-gap)) / 8);right:calc((100% - 3 * var(--cxf-gap)) / 8);}
.cxf-fill{position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg,var(--cxf-a1),var(--cxf-a2),var(--cxf-ok));transform-origin:left center;}
.cxf-pkt{position:absolute;top:50%;left:100%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px var(--cxf-a1),0 0 18px 4px rgba(56,189,248,.6);opacity:0;z-index:2;}
.cxf-node{text-align:center;}
.cxf-ico{position:relative;overflow:hidden;width:56px;height:56px;margin:0 auto 12px;border-radius:16px;display:grid;place-items:center;color:#fff;
  background:#eef2f7;transition:color .35s,box-shadow .35s,transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:var(--d);}
.cxf-ico::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--cxf-a1),var(--cxf-a2));transition:opacity .35s;transition-delay:var(--d);}
.cxf-ico svg{position:relative;width:24px;height:24px;}
.cxf-node.is-human .cxf-ico{border-radius:50%;box-shadow:0 0 0 7px rgba(16,185,129,.18);}
.cxf-node.is-human .cxf-ico::before{background:linear-gradient(135deg,#34d399,#059669);}
.cxf-lbl{display:block;font-size:14px;font-weight:600;line-height:1.35;color:var(--cxf-ink);transition:color .35s;transition-delay:var(--d);}
.cxf-stamp{display:inline-block;white-space:nowrap;margin-top:8px;font-size:12px;font-weight:700;color:#047857;background:#d1fae5;border-radius:999px;padding:3px 10px;
  transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--d) + .35s);}
.cxf-cap{margin:22px 0 0;text-align:center;font-size:15px;color:#5f6f83;}
.cxf-cap b{color:var(--cxf-ink);font-weight:600;}
.cxf-cap .ok{color:#047857;}
@keyframes cxfFill{0%{transform:scaleX(0)}20%,30%{transform:scaleX(.3333)}50%,60%{transform:scaleX(.6667)}80%,100%{transform:scaleX(1)}}
@keyframes cxfPkt{0%{left:0;opacity:1}20%,30%{left:33.33%}50%,60%{left:66.67%}80%{left:100%;opacity:1}100%{left:100%;opacity:0}}
.cxf.is-run .cxf-fill{animation:cxfFill 4s ease-in-out both;}
.cxf.is-run .cxf-pkt{animation:cxfPkt 4s ease-in-out both;}
.cxf.is-prep *,.cxf.is-prep *::before{transition:none !important;animation:none !important;}
.cxf.is-prep .cxf-fill{transform:scaleX(0);}
.cxf.is-prep .cxf-ico{color:var(--cxf-mut);box-shadow:none;transform:scale(.9);}
.cxf.is-prep .cxf-ico::before{opacity:0;}
.cxf.is-prep .cxf-lbl{color:var(--cxf-mut);}
.cxf.is-prep .cxf-stamp{opacity:0;transform:scale(.6);}
@media (max-width:560px){
  .cxf{--cxf-gap:6px;}
  .cxf-ico{width:46px;height:46px;border-radius:13px;}
  .cxf-rail{top:22px;}
  .cxf-lbl{font-size:12px;}
  .cxf-stamp{font-size:10px;padding:2px 6px;}
}


.cxb{--cxb-ink:#1e3a5f;--cxb-mut:#64748b;--cxb-line:#e6ebf1;--cxb-a1:#38bdf8;--cxb-ok:#10b981;--cxb-warn:#f59e0b;--cxb-bad:#dc2626;
  --cxb-lw:200px;--cxb-vw:92px;--cxb-g:14px;position:relative;font-variant-numeric:tabular-nums;}
.cxb-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none;}
.cxb-chips button{font:inherit;font-size:12.5px;font-weight:600;color:var(--cxb-mut);background:#fff;border:1px solid var(--cxb-line);border-radius:999px;padding:6px 12px;cursor:pointer;transition:all .25s;}
.cxb-chips button.is-on{color:#fff;background:var(--cxb-ink);border-color:var(--cxb-ink);}
.cxb-plot{position:relative;padding:28px 0 26px;}
.cxb-axis{position:absolute;top:0;bottom:0;left:calc(var(--cxb-lw) + var(--cxb-g));right:calc(var(--cxb-vw) + var(--cxb-g));pointer-events:none;}
.cxb-tick{position:absolute;top:22px;bottom:22px;width:1px;background:var(--cxb-line);}
.cxb-tick i{font-style:normal;}
.cxb-ls{display:none;}
.cxb-tick span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:11px;color:#94a3b8;white-space:nowrap;}
.cxb-est{position:absolute;top:18px;bottom:22px;border-left:1.5px dashed #94a3b8;}
.cxb-est span{position:absolute;top:-18px;left:0;transform:translateX(-50%);font-size:11px;font-weight:600;color:var(--cxb-mut);white-space:nowrap;}
.cxb-row{display:grid;grid-template-columns:var(--cxb-lw) 1fr var(--cxb-vw);gap:var(--cxb-g);align-items:center;min-height:46px;border-radius:10px;transition:background .5s;position:relative;}
.cxb-name{font-size:14px;line-height:1.25;color:var(--cxb-ink);padding-left:10px;transition:opacity .5s;}
.cxb-name b{font-weight:700;margin-right:6px;}
.cxb-tag{display:block;font-size:11.5px;font-weight:600;margin-top:2px;transition:opacity .4s;}
.cxb-track{position:relative;height:46px;}
.cxb-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#eef2f7;}
.cxb-dot{position:absolute;top:50%;left:calc(var(--x) * 1%);width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);
  background:#64748b;border:2px solid transparent;z-index:2;
  transition:left 1s cubic-bezier(.4,0,.2,1),background .4s,border-color .4s,box-shadow .4s,transform .4s;}
.cxb-trail{position:absolute;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:rgba(245,158,11,.45);
  left:calc(var(--x0) * 1%);width:calc((var(--x1) - var(--x0)) * 1%);transform-origin:left center;transition:transform 1s cubic-bezier(.4,0,.2,1);}
.cxb-trail span{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:700;color:#b45309;white-space:nowrap;transition:opacity .4s .5s;}
.cxb-val{white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--cxb-ink);text-align:right;padding-right:10px;}
.cxb-cap{min-height:46px;margin:14px 0 0;padding:12px 14px;border-radius:10px;background:#f1f5f9;font-size:14.5px;line-height:1.45;color:var(--cxb-ink);}
.cxb-note{margin:10px 0 0;font-size:12px;color:#94a3b8;}
/* étape 1 : état initial */
.cxb-r-c .cxb-tag{color:var(--cxb-bad);opacity:0;}
.cxb-r-a .cxb-tag{color:#047857;opacity:0;}
.cxb-r-b .cxb-dot{left:calc(var(--x0) * 1%);}
.cxb-r-b .cxb-trail{transform:scaleX(0);}
.cxb-r-b .cxb-trail span{opacity:0;}
/* étape 2 : conformité */
.cxb.s2 .cxb-r-c .cxb-dot{background:#fff;border-color:#cbd5e1;}
.cxb.s2 .cxb-r-c .cxb-name{opacity:.55;}
.cxb.s2 .cxb-r-c .cxb-tag{opacity:1;}
/* étape 3 : correction */
.cxb.s3 .cxb-r-b .cxb-dot{left:calc(var(--x1) * 1%);background:var(--cxb-warn);}
.cxb.s3 .cxb-r-b .cxb-trail{transform:scaleX(1);}
.cxb.s3 .cxb-r-b .cxb-trail span{opacity:1;}
/* étape 4 : recommandation */
.cxb.s4 .cxb-r-a{background:rgba(16,185,129,.08);}
.cxb.s4 .cxb-r-a .cxb-dot{background:var(--cxb-ok);box-shadow:0 0 0 6px rgba(16,185,129,.2);transform:translate(-50%,-50%) scale(1.2);}
.cxb.s4 .cxb-r-a .cxb-tag{opacity:1;}
.cxb.s4 .cxb-r-b .cxb-dot{background:#64748b;}
@media (max-width:640px){
  .cxb{--cxb-lw:92px;--cxb-vw:64px;--cxb-g:8px;}
  .cxb-name{font-size:12px;padding-left:6px;}
  .cxb-name .cxb-full{display:none;}
  .cxb-tag{font-size:10.5px;}
  .cxb-val{font-size:11.5px;padding-right:6px;}
  .cxb-est span{font-size:10px;}
  .cxb-lf{display:none;}
  .cxb-ls{display:inline;}
  .cxb-val{font-size:11px;}
}
@media (prefers-reduced-motion:reduce){.cxb *{transition:none !important;}}

.cx-animation-panel{padding:28px;border:1px solid #dbe3ec;border-radius:16px;background:#fff;margin-top:28px;color:#1e3a5f}
.cxa-step h3{margin:0 0 6px;font-size:16px;color:var(--cxa-ink);line-height:1.4}
.cxa-track,.cxf-rail{pointer-events:none}
.cxa-steps .cxa-step{padding:0;border:0;background:none}
.cxa-native .rx-steps{position:relative;z-index:1}
.cxa-native .rx-step-h{display:flex;flex-direction:column;align-items:flex-start}
.cxa-native .cxa-dot{margin:0 0 18px}
.cxa-native .cxa-track{left:23px;right:calc(25% - 23px);top:23px}
.cxa-native .rx-step{padding-top:0}
.cxa-native .rx-step-h b{background:inherit}
.cx-reveal-ready{animation:cxReveal .65s ease both}
@keyframes cxReveal{from{opacity:.25;transform:translateY(12px)}to{opacity:1;transform:none}}
.cxb-note{color:#64748b}.cxb-chips button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
@media(max-width:900px){.cxa-native .cxa-track{display:none}.cxa-steps{--cxa-gap:14px}}
@media(max-width:640px){.cx-animation-panel{padding:22px 12px}.cxa-step h3{margin-top:10px}.cxa-native .cxa-track{display:none}}
@media(prefers-reduced-motion:reduce){.cx-reveal-ready{animation:none!important}.cxa *,.cxa *::before,.cxf *,.cxf *::before{animation:none!important;transition:none!important}}