/* =====================================================================
   COMM ONE — crm.css (page CRM uniquement) · classes préfixées .crm- / .sig-
   Hero + signature « la fiche qui se remplit », décors de mosaïque,
   avant / après, possibilités, cartes métiers, déjà construit, méthode.
   Animations : transform / opacity uniquement (+ stroke-dashoffset des tracés).
   ===================================================================== */

/* ── Logos (messages qui partent au client) ──────────────────────── */
.ico-mail,.ico-wa,.ico-cal{display:inline-grid;place-items:center;width:22px;height:22px;flex:none}
.ico-mail svg,.ico-wa svg,.ico-cal svg{width:100%;height:100%}
.crm-icos{display:inline-flex;align-items:center}
.crm-icos>span+span{margin-left:-5px}
.crm-icos .ico-wa{border-radius:50%;box-shadow:0 0 0 2px var(--blanc)}

/* ── 1. Hero ─────────────────────────────────────────────────────── */
.crm-hero{padding:clamp(12px,2.5vw,32px) 0 clamp(48px,7vw,96px)}
.crm-hero-in{display:grid;gap:clamp(32px,4vw,56px);align-items:center;padding:clamp(20px,4.5vw,64px);border-radius:var(--r-xl);background:var(--accent-teinte);overflow:hidden}
@media (min-width:1000px){.crm-hero-in{grid-template-columns:1.02fr 1fr}}
.crm-hero-copy{min-width:0}
.crm-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px}
.crm-kicker .pill{min-height:36px;padding:4px 18px;font-size:1rem}
.crm-kicker-txt{font:600 var(--fs-small)/1.2 var(--f-texte);color:var(--encre-2)}
.crm-hero h1{max-width:12ch}
.crm-hero-sub{margin-top:24px}
.crm-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.crm-hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.crm-hero-tags .pill .dot{background:var(--violet)}
@media (max-width:599px){.crm-hero-cta .btn{width:100%}.crm-hero h1{max-width:none}}
.js-motion .crm-kicker,.js-motion .crm-hero h1,.js-motion .crm-hero-sub,.js-motion .crm-hero-cta{animation:crmin 640ms var(--ease-out) both}
.js-motion .crm-hero h1{animation-delay:80ms}.js-motion .crm-hero-sub{animation-delay:180ms}.js-motion .crm-hero-cta{animation-delay:280ms}
@keyframes crmin{from{opacity:0;transform:translateY(14px)}}

/* ── Signature : la fiche qui se remplit ─────────────────────────── */
.crm-sig{margin:0;min-width:0}
.sig-scene{position:relative;display:grid;gap:14px;padding:clamp(14px,2.4vw,24px);border-radius:calc(var(--r-xl) - 8px);background:var(--nuit);color:var(--lait);isolation:isolate}
.sig-top{display:flex}
.sig-releve{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 14px 4px 6px;border-radius:var(--r-pill);background:var(--nuit-2);color:var(--brume);
  font:500 var(--fs-small)/1.2 var(--f-chiffre);box-shadow:inset 0 0 0 1px var(--trait-nuit)}
.sig-releve-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--violet);color:#fff}
.sig-releve-ic svg{width:16px;height:16px}
.sig-mail{justify-self:start;display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:8px 18px 8px 10px;border-radius:var(--r-pill);background:var(--blanc);color:var(--encre);box-shadow:var(--ombre-nuit);position:relative;z-index:3}
.sig-mail .ico-mail{width:30px;height:30px}
.sig-mail b{display:block;font:700 1rem/1.2 var(--f-titre)}
.sig-mail small{display:block;font-size:var(--fs-small);color:var(--encre-2);line-height:1.3}
.sig-card{position:relative;padding:18px;border-radius:var(--r-lg);background:var(--blanc);color:var(--encre);overflow:hidden}
.sig-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--violet);opacity:0;pointer-events:none}
.sig-card-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:14px}
.sig-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--violet);color:#fff;font:700 1rem/1 var(--f-titre);flex:none}
.sig-who{min-width:0}
.sig-who b{display:block;font:700 1.0625rem/1.2 var(--f-titre)}
.sig-who small{display:block;font-size:var(--fs-small);color:var(--encre-2)}
.sig-ok{margin-left:auto;display:inline-flex;align-items:center;min-height:30px;padding:3px 12px;border-radius:var(--r-pill);background:var(--vert-teinte);font:600 var(--fs-small)/1.2 var(--f-texte)}
.sig-lines{display:grid;gap:8px}
.sig-lines li{display:grid;grid-template-columns:5.2rem 1fr;align-items:center;gap:10px}
.sig-k{font:500 var(--fs-small)/1.2 var(--f-chiffre);color:var(--encre-2)}
.sig-v{position:relative;display:block;min-height:38px;border-radius:var(--r-md);background:var(--sable);min-width:0}
.sig-v--ia{background:var(--violet-teinte)}
.sig-v>i{position:absolute;left:14px;top:50%;width:62%;height:10px;margin-top:-5px;border-radius:var(--r-pill);background:rgba(23,20,42,.14);opacity:0}
.sig-v>span{display:block;padding:8px 14px;font:500 .9375rem/1.4 var(--f-texte)}
.sig-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.sig-j{display:flex;gap:8px}
.sig-jb{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--blanc);color:var(--encre);isolation:isolate}
.sig-jb::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--jc);z-index:-1}
.sig-jb b{font:700 .9375rem/1 var(--f-chiffre)}
.sig-jb--j{background:var(--encre-2);color:#fff}
.sig-rdv{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px 6px 12px;border-radius:var(--r-pill);background:var(--violet);color:#fff;font:600 var(--fs-small)/1.2 var(--f-texte)}
.sig-rdv svg{width:20px;height:20px;flex:none}
.sig-cap{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;min-height:44px}
.sig-replay{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--blanc);box-shadow:inset 0 0 0 1.5px var(--trait);font-weight:600;font-size:var(--fs-small);transition:transform var(--t-sm) var(--ease-out)}
.sig-replay:hover{transform:translateY(-2px)}
@media (max-width:599px){.sig-lines li{grid-template-columns:1fr;gap:4px}.sig-ok{margin-left:0}.sig-jb{width:44px;height:44px}}

/* état d'attente (posé par le JS ; avant lui, "" = même chose) */
.js-motion .crm-sig[data-sig=""] :is(.sig-releve,.sig-mail,.sig-v>span,.sig-ok,.sig-rdv),
.js-motion .crm-sig[data-sig="wait"] :is(.sig-releve,.sig-mail,.sig-v>span,.sig-ok,.sig-rdv){opacity:0}
.js-motion .crm-sig:is([data-sig=""],[data-sig="wait"]) .sig-v>i{opacity:1}
.js-motion .crm-sig:is([data-sig=""],[data-sig="wait"]) .sig-jb::before{opacity:0}
/* filet si le JS ne se lance pas */
.js-motion .crm-sig[data-sig=""] :is(.sig-releve,.sig-mail,.sig-v>span,.sig-ok,.sig-rdv),.js-motion .crm-sig[data-sig=""] .sig-jb::before{animation:sigsafe 0s 3.5s forwards}
.js-motion .crm-sig[data-sig=""] .sig-v>i{animation:sigout 0s 3.5s forwards}
@keyframes sigsafe{to{opacity:1}}
/* lecture (03-MOTION §5, temps en ms) */
.crm-sig[data-sig="play"] .sig-releve{animation:sigfade 400ms var(--ease-out) both}
.crm-sig[data-sig="play"] .sig-releve-ic svg{animation:sigspin 900ms var(--ease-inout) 200ms both}
.crm-sig[data-sig="play"] .sig-mail{animation:sigmail 5400ms linear both}
.crm-sig[data-sig="play"] .sig-card::after{animation:sigring 640ms var(--ease-out) 1380ms both}
.crm-sig[data-sig="play"] .sig-v>i{opacity:1;animation:sigout 200ms var(--ease-in) both;animation-delay:calc(1500ms + var(--i)*260ms)}
.crm-sig[data-sig="play"] .sig-v>span{animation:sigline 320ms var(--ease-out) both;animation-delay:calc(1500ms + var(--i)*260ms)}
.crm-sig[data-sig="play"] .sig-ok{animation:sigpop 320ms var(--spring) 2700ms both}
.crm-sig[data-sig="play"] .sig-jb::before{animation:sigfade 200ms var(--ease-out) both;animation-delay:calc(3200ms + var(--i)*500ms)}
.crm-sig[data-sig="play"] .sig-jb{animation:sigbump 360ms var(--spring) both;animation-delay:calc(3200ms + var(--i)*500ms)}
.crm-sig[data-sig="play"] .sig-rdv{animation:sigup 320ms var(--ease-out) 4800ms both}
.crm-sig.sig-paused *,.crm-sig.sig-paused *::before,.crm-sig.sig-paused *::after{animation-play-state:paused!important}
@keyframes sigfade{from{opacity:0}to{opacity:1}}
@keyframes sigout{from{opacity:1}to{opacity:0}}
@keyframes sigspin{from{transform:rotate(-360deg)}to{transform:none}}
@keyframes sigline{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes sigpop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes sigbump{0%{transform:none}50%{transform:scale(1.12)}100%{transform:none}}
@keyframes sigup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sigring{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@keyframes sigmail{
  0%{opacity:0;transform:translate(-16px,-10px) scale(.6) rotate(-4deg);animation-timing-function:var(--spring)}
  11%{opacity:1;transform:none}
  13%{opacity:1;transform:none;animation-timing-function:var(--ease-inout)}
  26%{opacity:1;transform:translate(var(--mx,0),var(--my,60px)) scale(.92);animation-timing-function:var(--ease-in)}
  29.6%{opacity:0;transform:translate(var(--mx,0),var(--my,60px)) scale(.8)}
  88%{opacity:0;transform:translateY(-6px) scale(.96);animation-timing-function:var(--ease-out)}
  95%,100%{opacity:1;transform:none}
}

/* ── 2. Mosaïque : bulles spéciales + décors ─────────────────────── */
.crm-mz .mz-b .ico-mail,.crm-mz .mz-b .ico-wa,.crm-mz .mz-b .ico-cal{margin-left:-2px}
.crm-mz .mz-b .crm-icos .ico-wa{margin-left:-5px}
.crm-mz .mz-b[data-kind="card"] b{font-family:var(--f-titre)}
.crm-sub{display:block;font:500 .875rem/1.3 var(--f-texte);color:var(--encre-2)}
.crm-ech{display:flex;flex-wrap:wrap;gap:4px}
.crm-ech i{font-style:normal;display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border-radius:var(--r-pill);background:var(--sable);font-size:.875rem;font-weight:600;white-space:nowrap}
.crm-ech i.ok{background:var(--vert-teinte)}
.crm-jmini{display:flex;gap:4px}
.crm-jmini i{font-style:normal;display:grid;place-items:center;min-width:34px;height:28px;padding:0 8px;border-radius:var(--r-pill);background:var(--k);font:700 .8125rem/1 var(--f-chiffre);color:var(--encre)}
.crm-jmini i.j{color:#fff}

/* A — le document qui change d'état */
.crm-doc{position:absolute;left:50%;top:50%;width:min(36%,190px);aspect-ratio:.8;translate:-50% -50%;padding:14px;border-radius:var(--r-md);
  background:rgba(250,247,242,.06);box-shadow:inset 0 0 0 1px var(--trait-nuit);display:flex;flex-direction:column;gap:10px}
.crm-doc-h{display:flex;align-items:center;gap:10px}
.crm-doc-ic{position:relative;width:36px;height:36px;border-radius:50%;background:var(--violet);flex:none}
.crm-doc-ic i{position:absolute;inset:0;display:grid;place-items:center;font:700 .75rem/1 var(--f-chiffre);font-style:normal;color:#fff;opacity:0;transform:scale(.6);
  transition:opacity 200ms var(--ease-out),transform 320ms var(--spring)}
.crm-doc-t{flex:1;display:grid;gap:5px}
.crm-doc-t i{height:7px;border-radius:var(--r-pill);background:rgba(250,247,242,.3)}
.crm-doc-t i+i{width:60%;background:rgba(250,247,242,.16)}
.crm-doc-l{display:grid;gap:8px}
.crm-doc-l span{display:flex;align-items:center;gap:6px}
.crm-doc-l i{width:24%;height:7px;border-radius:var(--r-pill);background:rgba(250,247,242,.16)}
.crm-doc-l b{flex:1;height:7px;border-radius:var(--r-pill);background:var(--violet-clair);opacity:.75;transform:scaleX(0);transform-origin:left;transition:transform 520ms var(--spring-soft)}
.crm-doc-l span:nth-child(2) b{transition-delay:120ms;flex:.7}.crm-doc-l span:nth-child(3) b{transition-delay:240ms;flex:.85}.crm-doc-l span:nth-child(4) b{transition-delay:360ms;flex:.5}
.crm-doc-tot{display:flex;justify-content:flex-end;margin-top:auto;opacity:0;transform:translateY(8px);transition:opacity 240ms var(--ease-out) 400ms,transform 420ms var(--spring) 400ms}
.crm-doc-tot b{width:46%;height:16px;border-radius:var(--r-pill);background:var(--citron)}
.crm-doc-stamp{position:absolute;right:-10px;bottom:-10px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--vert);color:#fff;font:700 1.25rem/1 var(--f-titre);
  opacity:0;transform:scale(.4) rotate(-30deg);transition:opacity 200ms var(--ease-out) 300ms,transform 420ms var(--spring) 300ms}
.mz-panel[data-step="1"] .crm-doc .i1,.mz-panel[data-step="2"] .crm-doc .i2,.mz-panel[data-step="3"] .crm-doc .i3{opacity:1;transform:none}
.mz-panel[data-step] .crm-doc-l b{transform:none}
.mz-panel[data-step="2"] .crm-doc-tot,.mz-panel[data-step="3"] .crm-doc-tot{opacity:1;transform:none}
.mz-panel[data-step="3"] .crm-doc-stamp{opacity:1;transform:none}
.mz-panel[data-phase="exit"] .crm-doc-l b{transform:scaleX(0);transition-delay:0s;transition-duration:240ms}
@media (max-width:599px){.crm-doc{width:min(42%,170px)}}

/* B — la semaine, la relance et ses bulles */
.crm-week{position:absolute;left:4px;right:4px;top:50%;translate:0 -50%;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;align-items:start}
.crm-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.crm-day>b{display:grid;place-items:center;width:min(100%,36px);aspect-ratio:1;border-radius:50%;background:var(--blanc);font:700 .8125rem/1 var(--f-chiffre);color:var(--encre-2)}
.crm-day.is-rdv>b{background:var(--encre);color:var(--lait)}
.crm-rdv{display:block;padding:4px 6px;border-radius:var(--r-pill);background:var(--violet);color:#fff;font:700 .8125rem/1 var(--f-chiffre);
  opacity:0;transform:translateY(-12px);transition:opacity 200ms var(--ease-out) 200ms,transform 420ms var(--spring) 200ms}
.crm-mark{position:absolute;top:calc(100% + 34px);display:grid;place-items:center;min-width:36px;height:26px;padding:0 6px;border-radius:var(--r-pill);background:var(--mk);color:var(--encre);
  font:700 .8125rem/1 var(--f-chiffre);opacity:0;transform:scale(.5);transition:opacity 200ms var(--ease-out),transform 360ms var(--spring)}
.crm-day.is-rdv .crm-mark{top:calc(100% + 6px)}
.crm-day.m0 .crm-mark{--mk:var(--citron-teinte)}
.crm-day.m1 .crm-mark{--mk:var(--citron);transition-delay:250ms}
.crm-day.m2 .crm-mark{--mk:var(--violet);color:#fff;transition-delay:500ms}
.crm-day:not(.is-rdv) .crm-mark{top:calc(100% + 6px)}
.crm-ready{position:absolute;bottom:calc(100% + 8px);display:flex;opacity:0;transform:translateY(8px) scale(.7);transition:opacity 200ms var(--ease-out) 250ms,transform 420ms var(--spring) 250ms}
.crm-ready i{width:22px;height:22px;border-radius:7px;background:#2F7BF5}
.crm-ready i+i{margin-left:-6px;border-radius:50%;background:#25D366;box-shadow:0 0 0 2px var(--violet-teinte)}
.mz-panel[data-step] .crm-rdv{opacity:1;transform:none}
.mz-panel[data-step="2"] .crm-mark,.mz-panel[data-step="3"] .crm-mark{opacity:1;transform:none}
.mz-panel[data-step="3"] .crm-ready{opacity:1;transform:none}

/* C — l'historique, puis la copie sur disque */
.crm-hist{position:absolute;left:12px;right:12px;top:50%;translate:0 -50%;display:grid;gap:12px;transition:opacity 240ms var(--ease-out)}
.crm-hist span{display:flex;align-items:center;gap:10px;opacity:0;transform:translateX(-10px);transition:opacity 240ms var(--ease-out),transform 420ms var(--spring-soft)}
.crm-hist span:nth-child(2){transition-delay:160ms}.crm-hist span:nth-child(3){transition-delay:320ms}
.crm-hist i{width:14px;height:14px;border-radius:50%;background:var(--violet);flex:none}
.crm-hist span:nth-child(2) i{background:var(--vert)}.crm-hist span:nth-child(3) i{background:var(--citron)}
.crm-hist b{flex:1;height:10px;border-radius:var(--r-pill);background:var(--sable)}
.crm-hist span:nth-child(2) b{flex:.7}.crm-hist span:nth-child(3) b{flex:.85}
.mz-panel[data-step="1"] .crm-hist span{opacity:1;transform:none}
.crm-disk{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:center;gap:40px;opacity:0;transform:scale(.9);transition:opacity 240ms var(--ease-out),transform 420ms var(--spring-soft)}
.crm-disk-a{width:58px;height:42px;border-radius:14px;box-shadow:inset 0 0 0 3px var(--encre)}
.crm-disk-b{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--violet-teinte);box-shadow:inset 0 0 0 3px var(--violet)}
.crm-disk-b i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--vert);color:#fff;font-style:normal;font-weight:700;font-size:.875rem;opacity:0;transform:scale(.3);transition:opacity 200ms 1100ms,transform 360ms var(--spring) 1100ms}
.crm-disk-arrow{position:absolute;left:52px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--violet);opacity:0}
.mz-panel[data-step="2"] .crm-disk{opacity:1;transform:none}
.mz-panel[data-step="2"] .crm-disk-b i{opacity:1;transform:none}
.js-motion .mz-panel[data-step="2"] .crm-disk-arrow{animation:diskrun 900ms var(--ease-inout) 300ms both}
@keyframes diskrun{0%{opacity:0;transform:none}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(56px)}}

/* ── 3. Ce qui change ────────────────────────────────────────────── */
.crm-ba-head{display:none}
@media (min-width:800px){.crm-ba-head{display:grid;grid-template-columns:1fr 56px 1fr;margin-bottom:12px;font:600 var(--fs-small)/1 var(--f-texte);color:var(--encre-2)}.crm-ba-head span+span{grid-column:3;color:var(--accent-txt)}}
.crm-ba-list{display:grid;gap:12px}
.crm-ba-row{display:grid;gap:8px;align-items:center}
@media (min-width:800px){.crm-ba-row{grid-template-columns:1fr 56px 1fr}}
.crm-ba-av,.crm-ba-ap{display:block;padding:14px 22px;border-radius:var(--r-lg)}
.crm-ba-av{background:var(--blanc);color:var(--encre-2)}
.crm-ba-ap{background:var(--violet);color:#fff;font-weight:600}
.crm-ba-arr{display:grid;place-items:center;justify-self:center;width:44px;height:44px;border-radius:50%;background:var(--citron);color:var(--encre)}
.crm-ba-arr svg{width:20px;height:20px}
@media (max-width:799px){.crm-ba-arr{transform:rotate(90deg);width:36px;height:36px}.crm-ba-row{justify-items:stretch}}
.js-motion .crm-ba-row>*{transition:opacity 480ms var(--ease-out),transform 480ms var(--ease-out)}
.js-motion .crm-ba-row:not(.rv-in) .crm-ba-av{opacity:0;transform:translateX(-16px)}
.js-motion .crm-ba-row:not(.rv-in) .crm-ba-ap{opacity:0;transform:translateX(16px)}
.js-motion .crm-ba-row .crm-ba-ap{transition-delay:160ms}
.js-motion .crm-ba-row:not(.rv-in) .crm-ba-arr{opacity:0;transform:translateX(-4px) scale(.5)}
.js-motion .crm-ba-row .crm-ba-arr{transition:opacity 240ms var(--ease-out) 120ms,transform 420ms var(--spring) 120ms}
@media (max-width:799px){.js-motion .crm-ba-row:not(.rv-in) .crm-ba-arr{transform:rotate(90deg) scale(.5)}}

/* ── 4. Possibilités ─────────────────────────────────────────────── */
.crm-legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin-bottom:28px}
.crm-legend li{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crm-legend-t{font-size:var(--fs-small);color:var(--encre-2)}
.crm-tabs .tabs-list{--tab-bg:var(--violet);--tab-on:#fff}
.crm-caps{display:grid;gap:16px}
@media (min-width:640px){.crm-caps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.crm-caps{grid-template-columns:repeat(3,1fr)}}
.crm-cap{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;border-radius:var(--r-lg);background:var(--blanc);box-shadow:var(--ombre-1);
  transition:transform var(--t-md) var(--spring)}
.crm-cap:hover{transform:translateY(-3px)}
.crm-cap h3{font-size:1.25rem;line-height:1.2}
.crm-cap-h{display:flex;align-items:center;gap:10px}
.crm-cap-h .ico-mail,.crm-cap-h .ico-wa{width:26px;height:26px}
.crm-cap p{color:var(--encre-2)}
.crm-ex{margin-top:auto;padding-top:10px;border-top:1px solid var(--trait);width:100%;font-size:var(--fs-small)}
.crm-ex b{color:var(--accent-txt)}
.crm-note{margin-top:28px;max-width:46rem}
.crm-after{margin-top:12px}

/* ── 5. Cartes métiers ───────────────────────────────────────────── */
.crm-jobs{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.crm-jobs>li{display:flex}
.crm-job{position:relative;display:grid;grid-template-rows:1fr auto;width:100%;min-height:300px;padding:24px;border-radius:var(--r-lg);background:var(--blanc);box-shadow:var(--ombre-1);overflow:hidden;isolation:isolate}
.crm-job>.crm-job-face,.crm-job>.crm-job-steps{grid-area:1/1;position:relative;z-index:1}
.crm-job-bar{position:relative;z-index:1}
.crm-job-face{display:flex;flex-direction:column;align-items:flex-start;gap:14px;transition:opacity 160ms var(--ease-out),visibility 0s}
.crm-job-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--violet-teinte);font-size:2rem;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;transition:transform 420ms var(--spring)}
.crm-job h3{font-size:1.375rem}
.crm-job-plus{font-size:1.0625rem;line-height:1.45}
.crm-job-plus span{display:table;margin-bottom:6px;padding:2px 10px;border-radius:var(--r-pill);background:var(--citron-teinte);font:600 var(--fs-label)/1.6 var(--f-texte)}
.crm-job-steps{display:grid;align-content:start;gap:8px;counter-reset:st;visibility:hidden}
.crm-job-steps li{counter-increment:st;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-size:.9375rem;line-height:1.4;
  opacity:0;transform:translateX(-8px);transition:opacity 200ms var(--ease-out),transform 320ms var(--ease-out)}
.crm-job-steps li::before{content:counter(st);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--violet);color:#fff;font:700 .875rem/1 var(--f-chiffre)}
.crm-job-steps li:nth-child(2){transition-delay:70ms}.crm-job-steps li:nth-child(3){transition-delay:140ms}.crm-job-steps li:nth-child(4){transition-delay:210ms}
.crm-job-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:16px}
.crm-job-tg{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 2px var(--encre);font-weight:600;font-size:var(--fs-small);transition:transform var(--t-sm) var(--ease-out)}
.crm-job-tg:hover{transform:translateY(-2px)}
.crm-job-tg .t-c,.crm-job.is-open .crm-job-tg .t-o{display:none}
.crm-job.is-open .crm-job-tg .t-c{display:inline}
.crm-job.is-open .crm-job-face{opacity:0;visibility:hidden;transition:opacity 160ms var(--ease-out),visibility 0s 160ms}
.crm-job.is-open .crm-job-steps{visibility:visible}
.crm-job.is-open .crm-job-steps li{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .crm-job:hover .crm-job-face{opacity:0;visibility:hidden;transition:opacity 160ms var(--ease-out),visibility 0s 160ms}
  .crm-job:hover .crm-job-steps{visibility:visible}
  .crm-job:hover .crm-job-steps li{opacity:1;transform:none}
}
html:not(.js) .crm-job>.crm-job-steps{grid-area:auto;visibility:visible;margin-top:16px}
html:not(.js) .crm-job-steps li{opacity:1;transform:none}
html:not(.js) .crm-job{grid-template-rows:auto}
html:not(.js) .crm-job-tg{display:none}
.crm-job-more{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:24px;border-radius:var(--r-lg);box-shadow:inset 0 0 0 2px var(--trait);min-height:200px}
.crm-job-more p{font:700 1.25rem/1.2 var(--f-titre)}

/* ── 6. Déjà construit / sur mesure ──────────────────────────────── */
.crm-built{display:grid;gap:16px}
@media (min-width:860px){.crm-built{grid-template-columns:1.25fr 1fr}}
.crm-col{padding:clamp(22px,3vw,36px);border-radius:var(--r-xl);background:var(--vert-teinte)}
.crm-col--mesure{background:var(--violet-teinte)}
.crm-col-h{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.crm-col-h b{display:block;font:800 var(--fs-h3)/1.1 var(--f-titre)}
.crm-col-h small{display:block;margin-top:4px;font-size:var(--fs-small);color:var(--encre-2)}
.crm-col-n{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--vert);color:#fff;font:700 2rem/1 var(--f-chiffre);font-variant-numeric:tabular-nums;flex:none}
.crm-col--mesure .crm-col-n{background:var(--violet)}
.crm-chips{display:flex;flex-wrap:wrap;gap:8px}
.crm-chips li{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 16px 6px 10px;border-radius:var(--r-pill);background:var(--blanc);font:600 .9375rem/1.25 var(--f-texte)}
.crm-chips li::before{content:"✓";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--vert);color:#fff;font-size:.75rem;flex:none}
.crm-chips li[data-k]::before{content:"";width:12px;height:12px;margin-inline:5px}
.crm-chips li[data-k="custom"]::before{background:var(--violet);border-radius:50% 50% 50% 2px}
.crm-chips li[data-k="plug"]::before{background:#E8742C}
.crm-col-leg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:18px}
.crm-k{display:inline-block;width:12px;height:12px;border-radius:50%}
.crm-k--custom{background:var(--violet);border-radius:50% 50% 50% 2px}
.crm-k--plug{background:#E8742C;margin-left:10px}

/* ── 7. Comment on avance ────────────────────────────────────────── */
.crm-last{padding-bottom:calc(var(--section) + var(--r-xl))}
.crm-how{position:relative}
.crm-how-line{position:absolute;pointer-events:none;overflow:visible}
.crm-how-line path{fill:none;stroke:var(--violet);stroke-opacity:.35;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round}
.crm-how-line--h{left:0;right:0;top:12px;width:100%;height:40px;display:none}
.crm-how-line--v{left:12px;top:0;bottom:0;width:40px;height:100%}
@media (min-width:900px){.crm-how-line--h{display:block}.crm-how-line--v{display:none}}
.crm-how-list{position:relative;display:grid;gap:28px}
@media (min-width:900px){.crm-how-list{grid-template-columns:repeat(4,1fr);gap:24px}}
.crm-how-step{display:grid;grid-template-columns:64px 1fr;column-gap:20px;align-items:start}
.crm-how-step h3{grid-column:2;margin-top:14px}
.crm-how-step p{grid-column:2;margin-top:6px;color:var(--encre-2)}
@media (min-width:900px){.crm-how-step{grid-template-columns:1fr}.crm-how-step h3,.crm-how-step p{grid-column:1}.crm-how-step h3{margin-top:20px}}
.crm-how-n{grid-row:span 2;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--violet);color:#fff;font:700 1.375rem/1 var(--f-chiffre);box-shadow:0 0 0 6px var(--sable)}
.crm-end{margin-top:clamp(40px,5vw,64px);padding:clamp(22px,3vw,36px);border-radius:var(--r-xl);background:var(--blanc);box-shadow:var(--ombre-1)}
.crm-end-t{font-size:var(--fs-lead);line-height:1.55;color:var(--encre-2);max-width:48rem}
.crm-end-t b{display:block;margin-bottom:6px;font:800 var(--fs-h3)/1.15 var(--f-titre);color:var(--encre)}

/* ── Reduced-motion : tout est posé, rien ne bouge ───────────────── */
@media (prefers-reduced-motion:reduce){
  .crm-sig .sig-v>i{opacity:0!important}
  .crm-sig :is(.sig-releve,.sig-mail,.sig-v>span,.sig-ok,.sig-rdv),.crm-sig .sig-jb::before{opacity:1!important;transform:none!important}
  .crm-cap:hover,.sig-replay:hover,.crm-job-tg:hover{transform:none}
  .crm-job-steps li,.crm-hist span,.crm-doc-l b,.crm-rdv,.crm-mark,.crm-ready,.crm-doc-tot,.crm-doc-stamp,.crm-doc-ic i,.crm-disk,.crm-disk-b i{transform:none!important}
  .crm-ba-row>*{transform:none!important}
}