/* 04 — Les compétences d'Arthur, par étape */
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green-2);display:inline-block;position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--green-2);opacity:0;animation:ping 2s ease-out infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.4);opacity:0}}

/* Hero Arthur */
.hero{position:relative;display:grid;grid-template-columns:230px 1fr;background:linear-gradient(120deg,#e8eeea 0%,#eff1f0 45%,#f2f2f2 100%);border-radius:var(--r-lg);min-height:262px;overflow:hidden}
.hero-img{grid-column:1;align-self:end;justify-self:center;height:270px;margin-bottom:-28px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.14))}
.hero-body{grid-column:2;padding:24px 26px 22px 6px}
.who{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.role{font-size:12.5px;color:var(--muted);font-weight:500}
.who h1{font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.cta{display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:11px;height:34px;padding:0 13px;font-size:13px;font-weight:500;white-space:nowrap}
.cta svg{width:15px;height:15px}
.skills-meter{display:flex;align-items:center;gap:14px;margin-top:12px}
.sm-txt{font-size:14px;color:var(--ink-2);white-space:nowrap}
.sm-txt b{font-size:20px;font-weight:600;color:var(--green-ink);letter-spacing:-.02em;margin-right:2px}
.sm-txt span{color:var(--muted)}
.sm-bar{display:flex;gap:4px;flex:1;max-width:300px}
.sm-bar i{flex:1;height:8px;border-radius:3px;background:#dcdedd;transition:background .25s}
.sm-bar i.m2{} .sm-bar i:nth-child(3n){margin-right:5px}
.sm-bar i.on{background:var(--green-2)}
.bubble{margin-top:14px}
.bubble p{background:#fff;border-radius:4px 16px 16px 16px;padding:10px 14px;font-size:13.5px;line-height:1.45;box-shadow:var(--shadow)}
.bubble b{font-weight:600}
.ask{margin-top:10px;display:flex;align-items:center;background:#fff;border-radius:14px;padding:5px 5px 5px 16px;box-shadow:0 0 0 1px rgba(0,0,0,.05),var(--shadow)}
.ask input{flex:1;border:0;outline:0;font-size:13.5px;background:none;min-width:0}
.ask input::placeholder{color:#9a9a9a}
.ask button{display:flex;align-items:center;gap:8px;background:#ececec;color:#7a7a7a;border-radius:10px;height:34px;padding:0 14px;font-size:13px;font-weight:500}
.ask button svg{width:14px;height:14px}
.chip-leads{position:absolute;left:18px;top:18px;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:999px;padding:6px 11px 6px 8px;font-size:12.5px;font-weight:500;box-shadow:var(--shadow);white-space:nowrap}
.chip-leads .dots{display:flex}
.chip-leads .dots i{width:14px;height:14px;border-radius:50%;border:2px solid #fff;margin-left:-5px;background:#c7d9cf}
.chip-leads .dots i:first-child{margin-left:0;background:#e7c9b5}.chip-leads .dots i:last-child{background:#b9c7e4}

/* Section */
.skills{margin-top:38px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.sec-h h2{font-size:21px;font-weight:600;letter-spacing:-.02em}
.sec-h p{color:var(--muted);font-size:13.5px;margin-top:5px;max-width:540px;line-height:1.45}
.seg{display:flex;background:#ececec;border-radius:11px;padding:3px;flex:none}
.seg button{height:28px;padding:0 12px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.col{display:flex;flex-direction:column;min-width:0}

/* Bandeau en chevrons = le funnel */
.stage{position:relative;height:96px;padding:12px 26px 0 16px;color:var(--ink);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);margin-right:-18px}
.col:first-child .stage{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);border-radius:16px 0 0 16px}
.col:not(:first-child) .stage{padding-left:28px}
.col:last-child .stage{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%);margin-right:0;border-radius:0 16px 16px 0}
.stage.s1{background:#eef7f1}
.stage.s2{background:#dcf1e4}
.stage.s3{background:#bfe6cd}
.stage.s4{background:#15803d;color:#fff}
.st-top{display:flex;align-items:center;justify-content:space-between}
.num{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.85);color:var(--green-ink);display:grid;place-items:center;font-size:11px;font-weight:700}
.st-count{font-size:11px;font-weight:600;color:var(--green-ink);background:rgba(255,255,255,.7);padding:2px 7px;border-radius:999px}
.s4 .st-count{background:rgba(255,255,255,.18);color:#fff}
.st-name{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-top:8px}
.st-sub{font-size:11.5px;opacity:.7;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s4 .st-sub{opacity:.85}

.res{display:flex;align-items:center;gap:8px;height:30px;margin:8px 2px 2px;font-size:12px;color:var(--ink-2)}
.res b{font-weight:600;color:var(--green-ink);font-size:13px}

.cards{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.sk{position:relative;background:#fff;border-radius:18px;padding:14px 14px 12px;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;transition:box-shadow .2s,background .2s}
.sk.hide{display:none}
.sk h3{display:flex;flex-direction:column;gap:1px}
.verb{font-size:17px;font-weight:600;letter-spacing:-.02em;color:#8a8a8a}
.cpl{font-size:13.5px;font-weight:500;line-height:1.3;color:var(--ink)}
.sk p{font-size:12px;line-height:1.4;color:var(--muted);margin-top:6px}
.sk-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #f2f2f2}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}
.tools .lg{width:22px;height:22px;border-radius:7px}
.tools .lg i{width:12px;height:12px}
.tools .lg img{width:14px;height:14px}
.tools em{flex-basis:100%;font-style:normal;font-size:10.5px;color:var(--faint);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg.tf b{font-size:12px;font-weight:700;color:#262627;font-family:Georgia,serif}

.tg{width:36px;height:21px;border-radius:999px;background:#dedede;position:relative;flex:none;transition:background .2s}
.tg i{position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.sk.on .tg{background:var(--green-2)}
.sk.on .tg i{transform:translateX(15px)}

.state{position:absolute;top:14px;right:12px;font-size:10.5px;color:var(--faint);display:flex;align-items:center;gap:6px}
.sk.on{box-shadow:0 0 0 1.5px #9edbb6,0 6px 18px rgba(22,163,74,.08);background:linear-gradient(180deg,#f4fbf7 0%,#fff 55%)}
.sk.on .verb{color:var(--green-ink)}
.sk.on .state{color:var(--green-ink);font-weight:500}
.sk:not(.on) .state{display:none}
.sk.on .sk-head{padding-right:0}
.sk.on h3{padding-top:16px}
.sk.on .state{top:12px;left:14px;right:auto}

.learn{margin-top:10px;height:38px;border-radius:14px;border:1.5px dashed #d6d6d6;font-size:12.5px;color:var(--muted);font-weight:500}
.learn:hover{border-color:var(--green-2);color:var(--green-ink)}

.more-row{display:flex;justify-content:center;margin-top:24px}
.more-row a{background:#fff;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:500;box-shadow:0 0 0 1px var(--line-2)}

@media (max-width:1380px){
  .wrap{padding-left:28px;padding-right:28px}
  .hero{grid-template-columns:200px 1fr}
  
  .st-sub{font-size:11px}
}
.sk{min-height:214px}
.sk-foot{margin-top:auto}
.sk p{margin-bottom:12px}