/* Page Commerce : ciel du hero avec un mail qui devient un besoin, fil du besoin à la mission (sommaire et
   étapes dans /assets/site.css), pipeline des besoins, devis au forfait, portefeuille, FAQ. Contenu lisible sans script. */

/* ---------- en-tête : la fiche du besoin sort des nuages ---------- */
.c-sky .sky-in{padding-bottom:0}
.c-sky h1{max-width:11em;font-size:4.6rem}
.c-stage{position:relative;width:min(36rem,100%);margin-top:3.6rem;text-align:left;color:var(--ink)}
.nd{position:relative;z-index:1;padding:1.6rem 1.8rem 1.4rem;border-radius:1rem;background:#fff;font-size:.85rem;box-shadow:0 0 0 1px rgba(17,17,17,.05),0 2px 4px rgba(17,17,17,.04),0 50px 90px -40px rgba(10,40,90,.55)}
.nd-top{display:flex;align-items:center;gap:.7rem}
.nd-top .w-ttl b{font-size:1.1rem}
.nd-st{margin-left:auto;flex:none;background:#dcf6f1;color:#0b4d47}
.nd-ai{display:flex;align-items:center;gap:.45rem;margin-top:1rem;padding:.55rem .75rem;border-radius:.6rem;background:#eefbf8;color:#0b4d47;font-size:.78rem;font-weight:500}
.nd-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.6rem;margin:.6rem 0 0}
.nd-f div{padding:.6rem 0;border-bottom:1px solid var(--line)}
.nd-f dt{font-size:.7rem;color:var(--muted2)}
.nd-f dd{margin:.1rem 0 0;font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-sk{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.nd-sk span{padding:.3rem .65rem;border-radius:999px;background:#dcf6f1;color:#0b4d47;font-size:.75rem;font-weight:600}
.nd-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.nd-pot{font-size:.8rem;color:var(--muted)}
.nd-pot b{color:var(--ink);font-weight:600;white-space:nowrap}
.nd-btns{display:flex;gap:.4rem;flex:none}
.nd-b{display:inline-flex;align-items:center;height:2.1rem;padding:0 .9rem;border-radius:.55rem;font-size:.78rem;font-weight:600;box-shadow:inset 0 0 0 1px var(--line2)}
.nd-ok{background:var(--ink);color:#fff;box-shadow:none}
.f-src{top:6.4rem;left:-15.4rem;rotate:-4deg}
.f-src small{max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-pipe{z-index:2;top:12rem;right:-13.6rem;rotate:3deg}
.f-pipe .ph-fill{font-size:1.7rem;color:#0b6b5e}

/* ---------- le fil : mail d'origine posé derrière la fiche ---------- */
.stage .f-mail{width:min(19rem,88%)}

/* ---------- pipeline des besoins ---------- */
.pipe{padding:5rem 0 3rem}
.pipe-stage{max-width:62rem;margin:3rem auto 0;padding:2.2rem;border-radius:1.6rem;background:linear-gradient(150deg,var(--c) 0%,color-mix(in srgb,var(--c) 38%,#fff) 72%,#fff 100%)}
/* tableau réaliste : plateau clair, cartes blanches à ombre douce, étiquettes, chances de gain, avatars, carte en cours de déplacement */
.kb-lw{padding:1.4rem 1.4rem 1.5rem;border-radius:1.2rem;background:#f8faf9;box-shadow:0 0 0 1px rgba(0,61,61,.06),0 30px 60px -30px rgba(0,61,61,.35)}
.kb-top{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.4rem;flex-wrap:wrap}
.kb-ttl p{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.kb-ttl small{display:block;margin-top:.15rem;font-size:.76rem;color:var(--muted2)}
.kb-tools{display:flex;align-items:center;gap:.5rem}
.kb-seg{margin-top:0;width:14rem;background:#fff}
.kb-seg span{height:2.1rem;font-size:.76rem}
.kb-ic{width:2.2rem;height:2.2rem;border-radius:.65rem;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px #e3e8e6;font-size:1rem;color:#3d4745}
.kb-cta{display:inline-flex;align-items:center;gap:.35rem;height:2.2rem;padding:0 .95rem;border-radius:999px;background:var(--ink-c);color:#fff;font-size:.78rem;font-weight:600;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(0,61,61,.6)}
.kb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin-top:1.2rem;align-items:start}
.kb-col{display:flex;flex-direction:column;gap:.7rem}
.kb-ch{display:flex;align-items:center;justify-content:space-between;margin:0;padding:0 .15rem;font-size:.84rem;font-weight:600;color:#26302e}
/* étapes mises en valeur : badge coloré par étape, filet de la même couleur sous l'en-tête */
.kb-ch{position:relative;padding-bottom:.55rem!important}
.kb-ch::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--st)}
.kb-st{display:inline-flex;align-items:center;gap:.3rem;height:1.6rem;padding:0 .6rem;border-radius:.45rem;background:var(--stb);color:var(--stc);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.kb-st i{font-size:.8rem}
.is-new{--st:#14a493;--stb:#d6f5ee;--stc:#0b6b5e}
.is-pos{--st:#7cb518;--stb:#eef8cf;--stc:#3e5c05}
.is-sent{--st:#d6409f;--stb:#fbe6fb;--stc:#7a2251}
.is-int{--st:#3b6fe0;--stb:#e3ecff;--stc:#1e3a8a}
.kb-ch em{margin-left:.4rem;font-style:normal;font-weight:500;color:#8a9391}
.kb-plus{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;background:#eaefed;color:#3d4745;font-size:.72rem}
.kc{position:relative;display:flex;flex-direction:column;padding:.75rem .85rem .7rem;border-radius:.8rem;background:#fff;box-shadow:0 1px 2px rgba(0,40,40,.04),0 8px 22px -6px rgba(0,40,40,.09)}
.kc-h{display:flex;align-items:center;justify-content:space-between;gap:.4rem;min-width:0}
.kc-cl{display:flex;align-items:center;gap:.4rem;min-width:0;margin:0;font-size:.72rem;color:#6b7472;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-logo{flex:none;width:1.4rem;height:1.4rem;border-radius:.4rem;display:grid;place-items:center;background:var(--b);color:#fff;font-size:.8rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.12)}
.kc-cl{font-weight:500;color:#3d4745}
.kc-tag{flex:none;display:inline-flex;align-items:center;gap:.22rem;height:1.3rem;padding:0 .5rem;border-radius:999px;font-size:.64rem;font-weight:600;white-space:nowrap}
.kc-ai{background:#eefbf8;color:#0b6b5e}
.kc-dt{background:#f1f3f2;color:#3d4745}
.kc-more{flex:none;font-size:1.05rem;color:#9aa3a1}
.kc>b{margin-top:.5rem;font-size:.88rem;font-weight:600;line-height:1.25;color:#0b1f1f}
.kc-d{display:flex;align-items:center;gap:.4rem;margin:.35rem 0 0;font-size:.72rem;color:#6b7472;font-variant-numeric:tabular-nums;white-space:nowrap}
.kc-pr{display:flex;align-items:center;gap:.55rem;margin-top:.65rem;font-size:.68rem;font-weight:600;color:#26302e;font-variant-numeric:tabular-nums}
.kc-pr>i{flex:1;height:.32rem;border-radius:999px;background:#e4f2ef;overflow:hidden}
.kc-pr i i{display:block;height:100%;border-radius:inherit;background:#14a493}
.kc-f{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.6rem}
.kc-fl{display:flex;align-items:center;gap:.4rem;min-width:0}
.kc-ppl{display:flex}
.kc-ppl img{width:1.4rem;height:1.4rem;border-radius:50%;object-fit:cover;border:2px solid #fff}
.kc-ppl img+img{margin-left:-.45rem}
.kc-add{width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;border:1.5px dashed #c3ccc9;color:#8a9391;font-size:.64rem}
.kc-m{display:flex;gap:.55rem;font-size:.7rem;color:#6b7472;font-variant-numeric:tabular-nums}
.kc-m span{display:inline-flex;align-items:center;gap:.2rem}
.kc-m i{font-size:.85rem}
.kc-sig{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-top:.6rem;padding:.35rem .4rem .35rem .55rem;border-radius:.55rem;background:#fff6e8}
.kc-sig span:first-child{display:inline-flex;align-items:center;gap:.22rem;font-size:.66rem;font-weight:600;color:#9a5207;white-space:nowrap}
.kc-btn{padding:.2rem .5rem;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #f0d9b5;font-size:.66rem;font-weight:600;color:#7a4105}
/* carte en cours de déplacement : emplacement en pointillés, carte soulevée et inclinée */
.kc-slot{position:relative;min-height:9.6rem;border-radius:.8rem;border:1.5px dashed #b9c6c2}
.kc-drag{position:absolute;inset:.45rem -.5rem auto .6rem;z-index:2;rotate:4deg;box-shadow:0 2px 4px rgba(0,40,40,.06),0 30px 50px -14px rgba(0,40,40,.32)}
.kc-hand{position:absolute;right:-.45rem;bottom:-.6rem;font-size:1.45rem;color:#26302e;rotate:-4deg;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}

/* ---------- devis au forfait ---------- */
.dv{padding:5rem 0}
.dv-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3.4rem;align-items:center;max-width:66rem;margin:0 auto}
.dv-txt h2{margin-top:.8rem}
.ticks{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1rem}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;font-size:1.05rem;line-height:1.4}
.ticks .ph{width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;font-size:.8rem;background:#dcf6f1;color:#0b4d47}

/* ---------- maquettes façon Lattice (étapes 02 à 05, devis) : gros texte, pastilles de personnes,
   panneau gris à étiquette, actions en texte, cartes au premier plan qui débordent ---------- */
.lt{position:relative;z-index:1;padding:1.4rem 1.5rem;border-radius:1.2rem;background:#fff;color:#0b2b2b;box-shadow:0 0 0 1px rgba(0,61,61,.05),0 30px 60px -28px rgba(0,61,61,.35)}
.lt img{border-radius:50%;object-fit:cover}
.lt .lt-q{margin:0;font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
.lt-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem;padding:.35rem;border-radius:999px;box-shadow:inset 0 0 0 1.5px #eceeed}
.lt-pill{display:inline-flex;align-items:center;gap:.45rem;height:2.2rem;padding:0 .9rem 0 .3rem;border-radius:999px;font-size:.88rem;font-weight:500;background:color-mix(in srgb,var(--c) 45%,#fff);color:var(--ink-c)}
.lt-pill img{width:1.65rem;height:1.65rem}
.lt-add{padding:0 .8rem;background:none;color:#8a9391;border:1.5px dashed #d5dad8}
.lt-in{margin-top:1rem;padding:.85rem;border-radius:.9rem;background:#f4f6f5}
.lt .lt-lbl{margin:0 0 .6rem .15rem;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5f6967}
.lt-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.7rem;padding:.65rem .75rem;border-radius:.75rem;background:#fff;box-shadow:0 0 0 1.5px #eaedec}
.lt-row+.lt-row{margin-top:.45rem}
.lt-row img{width:2rem;height:2rem}
.lt-row b{display:block;font-size:.92rem;font-weight:600}
.lt-row small{display:block;margin-top:.1rem;font-size:.74rem;line-height:1.3;color:#6b7472;hyphens:auto}
.lt-row em{font-style:normal;font-size:.92rem;font-weight:600;font-variant-numeric:tabular-nums}
.lt-sc{min-width:2rem;height:1.5rem;display:grid;place-items:center;border-radius:.4rem;background:color-mix(in srgb,var(--c) 55%,#fff);color:var(--ink-c);font-size:.76rem!important}
.lt-act{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;font-weight:600;color:var(--ink-c)}
.lt-act.is-done,.lt-act.is-add{width:1.6rem;height:1.6rem;justify-content:center;border-radius:50%;background:var(--ink-c);color:#fff;font-size:.8rem}
.lt-act.is-add{background:none;color:var(--ink-c);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink-c) 35%,#fff)}
.lt-ic{width:2rem;height:2rem;display:grid;place-items:center;border-radius:.6rem;background:#eef1f0;color:#3d4745}
.lt-who{display:flex;align-items:center;gap:.65rem;min-width:0}
.lt-who>img{width:2.3rem;height:2.3rem}
.lt-who b{font-size:1.05rem;font-weight:600}
.lt-who>span:not(.lt-badge):not(.kc-logo){display:flex;flex-direction:column;min-width:0}
.lt-who small{font-size:.76rem;color:#6b7472}
.lt-who .kc-logo,.lt-bh .kc-logo{width:2.1rem;height:2.1rem;border-radius:.6rem;font-size:1.1rem}
.lt-badge{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:.25rem;height:1.45rem;padding:0 .5rem;border-radius:.35rem;background:#e2f6d3;color:#2f6b12;font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.lt-badge.is-wait{background:#eef0ef;color:#4a5452}
.lt-sk{display:block;height:.5rem;border-radius:999px;background:#e6e9e8}
.lt-sk.s2{width:62%;margin-top:.4rem}
/* 03 : la réponse du client passe au premier plan, en débordant de l'espace client */
.lt-back .lt-in{margin-top:.9rem}
.lt-float{width:84%;margin:-1.6rem -1.4rem 0 auto;padding:1.1rem 1.2rem}
.lt .lt-msg{margin:.7rem 0 0;font-size:.98rem;line-height:1.4;color:#26302e}
.lt-reply{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:center;margin-top:.8rem;padding:.7rem .8rem;border-radius:.8rem;background:#f4f6f5}
.lt-reply img{width:1.7rem;height:1.7rem}
/* 04 et 05 : en-tête sur bandeau coloré, comme les fiches 1:1 de Lattice */
.lt-band{padding:0 0 1.3rem;overflow:hidden}
.lt-band::before{content:"";position:absolute;inset:0 0 auto;height:3.2rem;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 55%,#fff))}
.lt-bh{position:relative;display:flex;align-items:center;gap:.7rem;margin:.75rem .75rem 0;padding:.75rem .9rem;border-radius:.95rem;background:#fff;box-shadow:0 0 0 1px rgba(0,61,61,.06),0 6px 16px -8px rgba(0,61,61,.25)}
.lt-bh>img{width:2.5rem;height:2.5rem}
.lt-bh b{display:block;font-size:1.12rem;font-weight:600}
.lt-bh small{display:block;font-size:.76rem;color:#6b7472}
.lt-who-av{margin-left:auto}
.lt-who-av img{width:2.1rem;height:2.1rem;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--acc)}
.lt-split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;padding:1.1rem 1.5rem 0}
.lt .lt-h{margin:0;padding-bottom:.55rem;border-bottom:1.5px solid #eef0ef;font-size:.95rem;font-weight:600}
.lt-check{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.55rem}
.lt-check li{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:#3d4745}
.lt-check i{font-size:1.15rem;color:var(--acc)}
.lt-side{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.85rem 1rem;border-radius:.9rem;background:#f4f6f5}
.lt-side .lt-lbl{margin:0}
.lt-side b{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.lt-side small{font-size:.72rem;color:#6b7472}
.lt-side .lt-act{margin-top:.5rem}
.lt-body{padding:1.1rem 1.5rem 0}
.lt-line{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1.5px solid #f0f2f1;font-size:.9rem}
.lt-line span:first-child{display:inline-flex;align-items:center;gap:.5rem;color:#3d4745}
.lt-line i{font-size:1rem;color:#8a9391}
.lt-line b{font-weight:600;font-variant-numeric:tabular-nums}
.lt-chip{right:.9rem;bottom:.8rem;rotate:2deg}
/* devis au forfait : versions en onglets, lots dans le panneau gris, marge en carte au premier plan */
.stage{position:relative}
.lt-dv .lt-who{flex-wrap:wrap}
.dv-seg{margin:0 0 0 auto;width:9.5rem}
.dv-seg span{height:2rem;font-size:.76rem}
.lt-dv .lt-row{grid-template-columns:minmax(0,1fr) auto}
.lt-tot{display:flex;align-items:baseline;justify-content:space-between;margin-top:1rem;padding:0 .3rem}
.lt-tot span{font-size:.95rem;color:#3d4745}
.lt-tot small{display:block;margin-top:.15rem;font-size:.76rem;color:#6b7472}
.lt-tot b{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.lt-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.6rem;margin-top:1rem;padding-top:1rem;border-top:1.5px solid #f0f2f1}
.lt-cta{display:inline-flex;align-items:center;gap:.4rem;height:2.4rem;padding:0 1.1rem;border-radius:999px;background:var(--ink-c);color:#fff;font-size:.85rem;font-weight:600;box-shadow:0 8px 18px -8px rgba(0,61,61,.6)}
.dv-mgf{bottom:2.6rem;left:-1.2rem;rotate:-3deg;padding:.65rem 1rem .65rem .65rem}
.dv-mgf .w-ring{margin-left:0;width:3rem;height:3rem}
.lw-lg{width:1.9rem;height:1.9rem;border-radius:.55rem;font-size:1rem}

abbr[title]{text-decoration:none}

/* ---------- comptes : bento (grille et carte dans site.css) ---------- */
.acc{padding:3rem 0}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .f-src{top:-1.9rem;left:1.2rem}
  .f-pipe{top:auto;right:1.2rem;bottom:-1.7rem}
  .nd{padding-top:3rem;padding-bottom:3.4rem}
}
@media (max-width:991px){
  .c-sky h1{font-size:3.6rem}
  .dv-grid{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  /* écran étroit : le tableau défile de colonne en colonne, la suivante dépasse pour inviter au geste */
  .kb{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;margin:1.2rem -1.6rem 0;padding:.3rem 1.6rem 1.4rem;scroll-padding:0 1.6rem;scrollbar-width:none}
  .kb::-webkit-scrollbar{display:none}
  .kb-col{scroll-snap-align:start}
}
@media (max-width:767px){
  .c-sky .sky-in{padding-top:3.4rem;padding-bottom:0}
  .c-sky h1{font-size:2.5rem}
  .a-ctas{flex-direction:column;align-items:stretch;width:100%}
  .c-stage{margin-top:2.4rem}
  .nd{padding:3rem 1.1rem 3.6rem}
  .nd-f{gap:0 1rem}
  .nd-foot{flex-wrap:wrap}
  .f-pipe{right:.6rem}
  .stage .f-mail{margin-left:-.4rem}
  .lt{padding:1.1rem}
  .lt-band{padding:0 0 1.1rem}
  .lt-split,.lt-body{padding:1rem 1.1rem 0}
  .lt-split{grid-template-columns:minmax(0,1fr)}
  .lt-float{width:92%;margin-right:-.4rem}
  .lt-row{gap:.55rem;padding:.6rem}
  .lt-chip{right:.3rem;bottom:.2rem}
  .dv-mgf{position:relative;inset:auto;margin:-.8rem 0 0 -.3rem}
  .dv-seg{margin:.3rem 0 0;width:100%}
  .win{padding:.9rem}
  .pipe{padding:3.2rem 0 2rem}
  .pipe-stage{margin-top:2.2rem;padding:1rem;border-radius:1.3rem}
  .kb-lw{padding:1.1rem 1.1rem .4rem}
  .kb{grid-auto-columns:82%;gap:.75rem;margin:1rem -1.1rem 0;padding:.3rem 1.1rem 1.4rem;scroll-padding:0 1.1rem}
  .kb-tools{width:100%}
  .kb-seg{flex:1;width:auto}
  .kb-cta{font-size:0;gap:0;width:2.2rem;padding:0;justify-content:center}
  .kb-cta i{font-size:1rem}
  .dv{padding:3.2rem 0}
  .ticks li{font-size:1rem}
  .acc{padding:2rem 0}
}
@media (max-width:374px){
  .c-sky h1{font-size:2.15rem}
  .a-ctas .btn{padding:0 1rem;font-size:.86rem}
  .nd-f{grid-template-columns:minmax(0,1fr)}
  .kb{grid-auto-columns:90%}
  .kb-ic{display:none}
}