/* SEMS — Performance des fournisseurs — 16 blocs v2 (maquettes « Performance des fournisseurs (1).docx ») — préfixe .spf — 2026-10-02 */
.spf{--nv:#073652;--bl:#1a73e8;--bl2:#0d78c5;--tx:#61708a;--ln:#dce8f1;--sh:0 12px 30px rgba(6,66,103,.07);color:var(--nv)}
.spf *,.spf *:before,.spf *:after{box-sizing:border-box}
.spf .i{width:22px;height:22px;fill:currentColor;fill-opacity:.16;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.spf .spf-sec{position:relative;overflow:hidden;padding:72px 0;background:linear-gradient(180deg,#fff,#f8fbff)}
.spf .spf-sec.spf-soft{background:linear-gradient(180deg,#f3f8fe,#f7fbff)}
.spf .spf-sec:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(18,123,190,.08) 1px,transparent 1px);background-size:26px 26px;opacity:.2}
.spf .spf-sec:after{content:"";position:absolute;width:420px;height:420px;right:-160px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(205,228,252,.55),rgba(205,228,252,0) 70%);pointer-events:none}
.spf .spf-c{position:relative;z-index:2}
.spf .spf-k{display:inline-flex;align-items:center;gap:14px;color:var(--bl2);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.spf .spf-k:after{content:"";width:48px;height:2px;background:var(--bl);border-radius:99px}
.spf h2,.spf h3,.spf p{margin-top:0}
.spf h2{font-size:30px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--nv);margin:12px 0 12px}
.spf h3{color:var(--nv)}
.spf h2 .spf-ac{color:#1a73e8}
.spf .spf-lead{font-size:16px;line-height:1.6;color:var(--tx);max-width:860px;margin:0 0 24px}
/* couleurs */
.spf .c-bl{--c:#1a73e8;--t:#eaf3ff;--b:#d4e5fb}
.spf .c-gr{--c:#13a874;--t:#e8f8f0;--b:#c8ecdb}
.spf .c-or{--c:#f08a12;--t:#fff3e5;--b:#f9ddbb}
.spf .c-rd{--c:#e5304c;--t:#ffeef1;--b:#f7cdd5}
.spf .c-pu{--c:#7c4ddf;--t:#f3eeff;--b:#ddd2fa}
.spf .c-pk{--c:#e8467c;--t:#ffeef4;--b:#f8cfdd}
.spf .c-cy{--c:#1aa3c8;--t:#e7f7fb;--b:#c5e9f2}
.spf .c-gy{--c:#6b7f99;--t:#f1f4f8;--b:#dbe2ea}
.spf .spf-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--t,#eaf3ff);color:var(--c,#1a73e8);flex:0 0 auto}
.spf .spf-ic .i{width:24px;height:24px;fill-opacity:.3;stroke-width:2.1}
.spf .spf-ic.sm{width:34px;height:34px;border-radius:9px}.spf .spf-ic.sm .i{width:19px;height:19px}
/* cartes */
.spf .spf-g{display:grid;gap:12px}
.spf .spf-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.spf .spf-g4,.spf .spf-g4h{grid-template-columns:repeat(4,minmax(0,1fr))}
.spf .spf-g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.spf .spf-card{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 22px;gap:12px;align-items:center;padding:15px 12px 15px 14px;border-radius:14px;border:1px solid var(--b);background:linear-gradient(135deg,var(--t) 0%,#fff 62%);box-shadow:0 6px 18px rgba(6,66,103,.04);transition:transform .2s,box-shadow .2s}
.spf .spf-card:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.spf .spf-card h3{font-size:14.5px;line-height:1.3;font-weight:800;margin:0 0 4px;overflow-wrap:break-word;hyphens:auto}
.spf .spf-card p{font-size:13px;line-height:1.45;color:var(--tx);margin:0}
.spf .spf-g4h .spf-card{grid-template-columns:46px minmax(0,1fr)}
.spf .spf-chev{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #e1eaf3;color:var(--nv)}
.spf .spf-chev .i{width:13px;height:13px;stroke-width:2.6;fill:none}
/* cartes empilées (grilles 4/5 colonnes à côté d'une illustration) */
.spf .spf-g4 .spf-card,.spf .spf-g5 .spf-card{grid-template-columns:40px minmax(0,1fr) 20px;gap:11px;padding:13px 10px 13px 12px}
.spf .spf-g4 .spf-ic,.spf .spf-g5 .spf-ic{width:40px;height:40px;border-radius:10px}
.spf .spf-g4 .spf-ic .i,.spf .spf-g5 .spf-ic .i{width:21px;height:21px}
.spf .spf-g4 .spf-card h3,.spf .spf-g5 .spf-card h3{font-size:13.5px}
.spf .spf-g4 .spf-card p,.spf .spf-g5 .spf-card p{font-size:12px}
.spf .spf-g4 .spf-chev,.spf .spf-g5 .spf-chev{width:20px;height:20px}
.spf .stk .spf-card{grid-template-columns:minmax(0,1fr) 20px;grid-template-areas:"ic ic" "tx ch";align-items:start;align-content:start;row-gap:12px;padding:14px}
.spf .stk .spf-ic{grid-area:ic}.spf .stk .spf-tx{grid-area:tx}.spf .stk .spf-chev{grid-area:ch;align-self:center}
/* mise en page */
.spf .spf-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.5fr);gap:24px;align-items:center}
.spf .spf-split.spf-sil{grid-template-columns:minmax(0,1fr) 250px;gap:20px}
.spf .spf-il{display:flex;align-items:center;justify-content:center}
.spf .spf-ilsvg{width:100%;height:auto;display:block;max-width:400px}
.spf .spf-img{display:block;width:100%;height:auto;max-width:420px;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,transparent 100%)}
.spf .spf-scene .spf-img{max-width:none;-webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 80% 75% at 50% 50%,#000 60%,transparent 100%)}
/* maquettes */
.spf .spf-mock{background:#fff;border:1px solid var(--ln);border-radius:18px;box-shadow:0 20px 44px rgba(14,70,130,.10);padding:18px}
.spf .spf-mh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.spf .spf-mh h3{font-size:17px;font-weight:800;margin:0}
.spf .spf-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #dfe8f2;border-radius:9px;font-size:12px;color:var(--nv);white-space:nowrap}
.spf .spf-pill .i{width:14px;height:14px;fill:none}
.spf .spf-sup{display:flex;align-items:center;gap:14px;border:1px solid #e6eef6;border-radius:14px;padding:12px 14px;margin-bottom:10px}
.spf .spf-av{width:48px;height:48px;border-radius:50%;background:#e4f0fd;color:#1a73e8;font-weight:800;font-size:17px;display:grid;place-items:center;flex:0 0 auto}
.spf .spf-supn{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spf .spf-supn b{font-size:15px}
.spf .spf-sup small{display:block;font-size:11.5px;color:var(--tx);margin-top:4px}
.spf .spf-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:#e3f7ee;color:#0d9a66;font-weight:700;font-size:11px}
.spf .spf-badge .i{width:12px;height:12px;stroke-width:3;fill:none}
.spf .spf-kpis{display:grid;gap:8px;margin-bottom:10px}
.spf .spf-kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.spf .spf-kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.spf .spf-kpis.k4 .spf-kt{flex-direction:column;gap:6px}
.spf .spf-kpis.k4 .spf-kpi{padding:10px 9px}
.spf .spf-kpi{border:1px solid #e6eef6;border-radius:12px;padding:10px;background:#fff}
.spf .spf-kt{display:flex;gap:8px;align-items:flex-start}
.spf .spf-kpi strong{display:block;font-size:17px;line-height:1.15;white-space:nowrap}
.spf .spf-kpi small{display:block;font-size:10.5px;line-height:1.3;color:var(--tx);margin-top:2px}
.spf .spf-dl{display:inline-flex;align-items:center;gap:3px;margin-top:8px;padding:3px 7px;border-radius:7px;font-size:11.5px;font-weight:800}
.spf .spf-dl .i{width:12px;height:12px;stroke-width:3;fill:none}
.spf .spf-dl.up{background:#e6f7ef;color:#0d9a66}.spf .spf-dl.dn{background:#ffeef1;color:#e5304c}
.spf .spf-vc{border:1px solid #e6eef6;border-radius:14px;padding:12px 14px;background:#fff;margin-top:10px}
.spf .spf-vc>b{display:block;font-size:13.5px;color:var(--nv);margin-bottom:6px}
.spf .spf-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--tx);margin-bottom:4px}
.spf .spf-leg span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:6px}
.spf .spf-chart{width:100%;height:auto;display:block}
.spf .spf-repi{display:flex;align-items:center;gap:18px}
.spf .spf-dn{position:relative;width:110px;flex:0 0 110px}
.spf .spf-dn svg{width:110px;height:110px;display:block}
.spf .spf-dn span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10.5px;color:var(--tx)}
.spf .spf-dn span b{font-size:15px;color:var(--nv)}
.spf .spf-repi ul{list-style:none;margin:0;padding:0;flex:1;font-size:12.5px}
.spf .spf-repi li{display:flex;align-items:center;gap:8px;padding:4px 0;color:var(--nv)}
.spf .spf-repi li i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.spf .spf-repi li b{margin-left:auto}
/* livraisons */
.spf .spf-dlv{background:linear-gradient(180deg,#fff,#f5faff)}
.spf .spf-dg{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"a b" "s s" "c d";gap:8px 12px}
.spf .spf-dg .a{grid-area:a}.spf .spf-dg .b{grid-area:b}.spf .spf-dg .c{grid-area:c}.spf .spf-dg .d{grid-area:d}
.spf .spf-scene{grid-area:s;margin:-6px -4px}
.spf .spf-scene .spf-ilsvg{max-width:none}
.spf .spf-dg .spf-kpi{box-shadow:0 8px 20px rgba(14,70,130,.07)}
/* bloc 1 */
.spf .spf-fh{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:20px;margin-top:6px}
.spf .spf-fp{position:relative;overflow:hidden;border-radius:20px;padding:28px;background:linear-gradient(165deg,#0b4f9c 0%,#0a3f86 45%,#1171e3 100%);color:#fff;display:flex;flex-direction:column}
.spf .spf-fp:before{content:"";position:absolute;width:360px;height:360px;right:-120px;top:-120px;border-radius:50%;border:44px solid rgba(255,255,255,.05);pointer-events:none}
.spf .spf-fp:after{content:"";position:absolute;width:300px;height:300px;left:-140px;bottom:-150px;border-radius:50%;border:40px solid rgba(255,255,255,.05);pointer-events:none}
.spf .spf-ic.wh{background:#fff;color:#1a73e8;width:56px;height:56px;border-radius:14px}
.spf .spf-fp h3{color:#fff;font-size:28px;line-height:1.2;font-weight:800;margin:18px 0 8px;position:relative;z-index:2}
.spf .spf-fp>p{color:#d8e8fa;line-height:1.55;font-size:15px;margin:0 0 18px;position:relative;z-index:2}
.spf .spf-cmp{position:relative;z-index:2;background:#fff;border-radius:16px;padding:14px;color:var(--nv);box-shadow:0 18px 38px rgba(0,25,70,.25)}
.spf .spf-search{display:flex;align-items:center;gap:10px;border:1px solid #dfe8f2;border-radius:10px;padding:9px 12px;font-size:12.5px;color:#8a99ad}
.spf .spf-search .i{width:17px;height:17px;color:#1a73e8;fill:none}
.spf .spf-filters{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
.spf .spf-filters span{display:inline-flex;align-items:center;gap:6px;border:1px solid #dfe8f2;border-radius:8px;padding:6px 9px;font-size:11.5px;white-space:nowrap}
.spf .spf-filters .i{width:11px;height:11px;transform:rotate(90deg);fill:none;stroke-width:2.6}
.spf .spf-tbl{font-size:12px}
.spf .spf-tr{display:grid;grid-template-columns:72px repeat(3,minmax(0,1fr));align-items:center;border-bottom:1px solid #edf2f7;min-height:36px}
.spf .spf-tr:last-child{border-bottom:none}
.spf .spf-tr>*{padding:0 8px}
.spf .spf-tr>span{color:var(--tx)}
.spf .spf-th b{font-size:11.5px;text-align:center}
.spf .spf-mb{display:block;height:8px;border-radius:99px;background:#e8eef5;margin:0 8px;padding:0;overflow:hidden}
.spf .spf-mb i{display:block;height:100%;border-radius:99px;background:#1a73e8}
.spf .spf-mb.lt i{background:#9ccaf6}
.spf .spf-ok{justify-self:center;width:24px;height:24px;border-radius:50%;background:#0a2f6f;color:#fff;display:grid;place-items:center;padding:0!important}
.spf .spf-ok.lt{background:#9ccaf6}
.spf .spf-ok .i{width:13px;height:13px;stroke-width:3;fill:none}
.spf .spf-more{display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:#1a73e8;font-weight:800;font-size:14px;text-decoration:none}
.spf .spf-more .i{width:16px;height:16px;fill:none;stroke-width:2.4;transition:transform .2s}
.spf .spf-more:hover .i{transform:translateX(3px)}
.spf .spf-more.wh{color:#fff;margin-top:auto;padding-top:22px;position:relative;z-index:2}
.spf .spf-fcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.spf .spf-fc{position:relative;overflow:hidden;background:#fff;border:1px solid #e1eaf4;border-radius:16px;padding:20px;box-shadow:0 8px 22px rgba(6,66,103,.05)}
.spf .spf-fc:after{content:"";position:absolute;width:120px;height:120px;right:-40px;top:-40px;border-radius:50%;background:#eef5fd;pointer-events:none}
.spf .spf-fc .spf-ic{position:relative;z-index:2;width:56px;height:56px;border-radius:14px}
.spf .spf-fc .spf-ic .i{width:28px;height:28px}
.spf .spf-fc h3{font-size:17px;line-height:1.3;font-weight:800;margin:16px 0 8px}
.spf .spf-fc p{font-size:14px;line-height:1.5;color:var(--tx);margin:0}
.spf .spf-fc.wide{grid-column:1/-1;display:flex;gap:18px;align-items:flex-start}
.spf .spf-fc.wide h3{margin-top:2px}
/* responsive */
@media(max-width:1240px){
  .spf .spf-split.spf-sil{grid-template-columns:minmax(0,1fr) 230px}
  .spf .spf-g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spf .spf-split .spf-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spf .spf-split .spf-g4.stk{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1080px){
  .spf .spf-split,.spf .spf-split.spf-sil,.spf .spf-fh{grid-template-columns:1fr}
  .spf .spf-split>.spf-mock{max-width:640px;width:100%;margin:0 auto}
  .spf .spf-il{order:-1}.spf .spf-ilsvg,.spf .spf-il .spf-img{max-width:340px}
  .spf .spf-g4h{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .spf .spf-g3,.spf .spf-g4,.spf .spf-g5,.spf .spf-split .spf-g4,.spf .spf-split .spf-g4.stk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spf .spf-fcs{grid-template-columns:1fr}
}
@media(max-width:620px){
  .spf .spf-sec{padding:54px 0}
  .spf h2{font-size:25px}
  .spf .spf-g3,.spf .spf-g4,.spf .spf-g4h,.spf .spf-g5,.spf .spf-split .spf-g4,.spf .spf-split .spf-g4.stk{grid-template-columns:1fr}
  .spf .stk .spf-card{grid-template-columns:40px minmax(0,1fr) 20px;grid-template-areas:"ic tx ch";align-items:center}
  .spf .spf-il{display:none}
  .spf .spf-kpis.k4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spf .spf-kpis.k3 small{font-size:10px}
  .spf .spf-mock{padding:14px}
  .spf .spf-fp{padding:20px}.spf .spf-fp h3{font-size:23px}
  .spf .spf-tr{grid-template-columns:58px repeat(3,minmax(0,1fr))}
  .spf .spf-th b{font-size:10px}
  .spf .spf-fc.wide{display:block}
  .spf .spf-repi{gap:12px}
  .spf .spf-mh{flex-wrap:wrap}
}
.spf .spf-kpi small{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:620px){
  .spf .spf-kpis.k3 .spf-kt{flex-direction:column;gap:6px}
  .spf .spf-tr>span{font-size:11px;overflow-wrap:anywhere;hyphens:auto}
}

/* v3b — conteneur du site (1180) : cartes empilées à côté des illustrations, cartes 3 col. compactes */
.spf .spf-split .spf-g4 .spf-card{grid-template-columns:minmax(0,1fr) 20px;grid-template-areas:"ic ic" "tx ch";align-items:start;align-content:start;row-gap:10px;padding:14px}
.spf .spf-split .spf-g4 .spf-ic{grid-area:ic}.spf .spf-split .spf-g4 .spf-tx{grid-area:tx}.spf .spf-split .spf-g4 .spf-chev{grid-area:ch;align-self:center}
.spf .spf-split .spf-g3 .spf-card{grid-template-columns:38px minmax(0,1fr) 20px;gap:10px;padding:13px 10px 13px 12px}
.spf .spf-split .spf-g3 .spf-ic{width:38px;height:38px;border-radius:10px}.spf .spf-split .spf-g3 .spf-ic .i{width:20px;height:20px}
.spf .spf-split .spf-g3 .spf-card h3{font-size:13.5px}.spf .spf-split .spf-g3 .spf-card p{font-size:12px}
.spf .spf-split .spf-g3 .spf-chev{width:20px;height:20px}
@media(max-width:620px){
  .spf .spf-split .spf-g4 .spf-card{grid-template-columns:40px minmax(0,1fr) 20px;grid-template-areas:"ic tx ch";align-items:center}
}
.spf .spf-dl{white-space:nowrap}
.spf .spf-card p{hyphens:auto;overflow-wrap:break-word}
.spf .spf-kpis.k4 small{font-size:10px;overflow-wrap:normal;word-break:normal}
/* v3c — cartes simples : fond blanc, bordure fine, icône à gauche (retour utilisateur 02/10) */
.spf .spf-card{background:#fff;border:1px solid #e3eaf2;box-shadow:0 4px 14px rgba(6,66,103,.04)}
.spf .spf-card:hover{border-color:#cfdeee}
.spf .spf-g4 .spf-card,.spf .spf-g5 .spf-card,.spf .stk .spf-card,.spf .spf-split .spf-g4 .spf-card{grid-template-columns:40px minmax(0,1fr) 20px;grid-template-areas:"ic tx ch";align-items:center;align-content:normal;row-gap:0;gap:12px;padding:14px 12px 14px 14px}
.spf .spf-split .spf-g4,.spf .spf-split .spf-g4.stk,.spf .spf-split .spf-g5,.spf .spf-split .spf-g5.stk{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1240px){.spf .spf-split .spf-g4,.spf .spf-split .spf-g4.stk,.spf .spf-split .spf-g5,.spf .spf-split .spf-g5.stk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.spf .spf-split .spf-g4,.spf .spf-split .spf-g4.stk,.spf .spf-split .spf-g5,.spf .spf-split .spf-g5.stk{grid-template-columns:1fr}}
/* v3d — illustrations plus grandes */
.spf .spf-split.spf-sil{grid-template-columns:minmax(0,1fr) 360px;gap:24px}
.spf .spf-il .spf-img{max-width:none;width:112%;margin:0 -6%}
@media(max-width:1240px){.spf .spf-split.spf-sil{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:1080px){.spf .spf-split.spf-sil{grid-template-columns:1fr}.spf .spf-il .spf-img{width:100%;max-width:420px;margin:0 auto}}
/* v3e — hauteur d'illustration homogène + espace cartes / image */
.spf .spf-split.spf-sil{grid-template-columns:minmax(0,1fr) 340px;gap:48px}
.spf .spf-il .spf-img{width:112%;height:auto;max-height:290px;object-fit:contain}
@media(max-width:1240px){.spf .spf-split.spf-sil{grid-template-columns:minmax(0,1fr) 280px;gap:36px}}
@media(max-width:1080px){.spf .spf-split.spf-sil{grid-template-columns:1fr;gap:24px}.spf .spf-il .spf-img{width:100%;max-height:260px}}
.spf .spf-il .spf-img{width:100%;margin:0 auto}
@media(max-width:1080px){.spf .spf-il .spf-img{max-width:380px}}
.spf .spf-il .spf-img{max-height:255px}
/* v3f — titres d'une seule couleur (comme E-Sourcing) */
.spf h2 .spf-ac,.spf h2 .spf-ac.or{color:inherit}/* v3g — typographie alignée sur E-Sourcing (titres) et OCR (cartes) */
.spf h2{font-size:30px;font-weight:800;line-height:1.25;letter-spacing:normal;margin:10px 0 10px}
.spf .spf-k{font-size:13px;letter-spacing:1px;color:#1078b8}
.spf .spf-lead{color:#5b6478;line-height:1.55}
.spf .spf-card h3,.spf .spf-g4 .spf-card h3,.spf .spf-g5 .spf-card h3,.spf .spf-split .spf-g3 .spf-card h3{font-size:14px;font-weight:700;line-height:1.45;color:#0b2f5a;margin:0 0 2px}
.spf .spf-card p,.spf .spf-g4 .spf-card p,.spf .spf-g5 .spf-card p,.spf .spf-split .spf-g3 .spf-card p{font-size:12.5px;font-weight:400;line-height:1.45;color:#62708b}
.spf .spf-fc h3{font-size:16px;font-weight:700}
.spf .spf-fp h3{font-weight:700}
@media(max-width:620px){.spf h2{font-size:25px}}