/* Capsules : mini-écrans de l'app en HTML/CSS (taille relative à la largeur de la carte). */
.nd-capsule{container-type:inline-size;margin:0;width:100%}
.ndc-frame{--ink:var(--wp--preset--color--ink,#020b42);--mint:var(--wp--preset--color--yellow,#13f5bb);--mint-soft:#d4fbef;--line:#e1e5ef;--muted:#646a8c;--canvas:#f3f5fa;
	font-size:2.85cqw;aspect-ratio:2/1.08;overflow:hidden;border-radius:1.4em;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(243,245,250,.85));border:1px solid rgba(2,11,66,.06);box-shadow:0 1.6em 3.6em rgba(2,11,66,.08),inset 0 1px 0 #fff;color:var(--ink);font-family:var(--wp--preset--font-family--nunito,"Nunito",system-ui,sans-serif);line-height:1.25;position:relative;transition:transform .45s var(--nodema-ease,cubic-bezier(.2,.8,.2,1)),box-shadow .45s}
.ndc-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 100% 0%,rgba(19,245,187,.16),transparent 70%)}
.nodema-card-link:hover .ndc-frame,.nd-capsule:hover .ndc-frame{transform:translateY(-.3em);box-shadow:0 2.2em 4.4em rgba(2,11,66,.12),inset 0 1px 0 #fff}
.ndc-app{position:absolute;inset:1.2em;display:flex;flex-direction:column;gap:.8em}
.ndc-app b{font-family:var(--wp--preset--font-family--titres,"Montserrat Alternates",sans-serif);font-weight:700}
.ndc-app small{display:block;font-size:.78em;color:var(--muted);font-weight:600}
.ndc-head{display:flex;align-items:center;justify-content:space-between;gap:1em;font-size:1.15em}
.ndc-pill{display:inline-flex;align-items:center;padding:.3em .7em;border-radius:99em;font-size:.78em;font-weight:800;white-space:nowrap;background:#eef0f6;color:#4a5072}
.ndc-pill.is-mint{background:var(--mint-soft);color:#056a51}
.ndc-pill.is-blue{background:#dfe7fb;color:#2c4aa0}
.ndc-head .ndc-pill.is-mint{background:var(--mint);color:var(--ink)}

/* Messagerie */
.ndc-chat{flex-direction:row;gap:1em}
.ndc-side{width:38%;display:flex;flex-direction:column;gap:.45em}
.ndc-label{font-size:.85em;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.2em}
.ndc-thread{display:flex;align-items:center;gap:.6em;padding:.55em .6em;border-radius:.8em}
.ndc-thread i{flex:none;width:2.3em;height:2.3em;border-radius:.7em;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8em;background:#e7eaf3;color:var(--ink)}
.ndc-thread em{font-style:normal;font-weight:700;font-size:.95em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ndc-thread.is-on{background:#fff;box-shadow:0 .3em 1em rgba(2,11,66,.06)}
.ndc-thread.is-on i{background:var(--mint)}
.ndc-conv{flex:1;display:flex;flex-direction:column;gap:.5em;justify-content:flex-end;padding:.8em;border-radius:1em;background:rgba(255,255,255,.7);border:1px solid var(--line)}
.ndc-msg{max-width:84%;padding:.55em .8em;border-radius:1em;font-size:.95em;font-weight:600}
.ndc-msg.is-them{align-self:flex-start;background:#eef0f6;border-bottom-left-radius:.3em}
.ndc-msg.is-me{align-self:flex-end;background:var(--ink);color:#fafcff;border-bottom-right-radius:.3em}
.ndc-file{align-self:flex-end;display:flex;align-items:center;gap:.5em;padding:.45em .7em;border-radius:.8em;background:#fff;border:1px solid var(--line);font-size:.9em;font-weight:700}
.ndc-file i{width:1.6em;height:1.9em;border-radius:.3em;background:var(--mint);flex:none}
.ndc-file small{margin-left:.3em}
.ndc-typing{display:inline-flex;gap:.25em;padding:.7em .8em}
.ndc-typing b{width:.45em;height:.45em;border-radius:50%;background:#9aa0c0;animation:ndc-type 1.2s ease-in-out infinite}
.ndc-typing b:nth-child(2){animation-delay:.15s}.ndc-typing b:nth-child(3){animation-delay:.3s}
@keyframes ndc-type{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-.3em);opacity:1}}

/* Factures */
.ndc-kpis{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:.6em}
.ndc-kpis>span{padding:.6em .8em;border-radius:.9em;background:#fff;border:1px solid var(--line)}
.ndc-kpis>span b{display:block;font-size:1.25em;margin-top:.15em}
.ndc-bars{display:flex!important;align-items:flex-end;gap:.35em}
.ndc-bars i{flex:1;height:var(--h);min-height:.3em;border-radius:.25em .25em .1em .1em;background:linear-gradient(var(--mint),#7ff9d8);transform-origin:bottom;transition:transform .5s var(--nodema-ease,ease)}
.nodema-card-link:hover .ndc-bars i,.nd-capsule:hover .ndc-bars i{animation:ndc-grow .7s var(--nodema-ease,ease) both}
.ndc-bars i:nth-child(2){animation-delay:.05s!important}.ndc-bars i:nth-child(3){animation-delay:.1s!important}.ndc-bars i:nth-child(4){animation-delay:.15s!important}.ndc-bars i:nth-child(5){animation-delay:.2s!important}.ndc-bars i:nth-child(6){animation-delay:.25s!important}
@keyframes ndc-grow{from{transform:scaleY(.2)}}
.ndc-rows{display:flex;flex-direction:column;gap:.35em}
.ndc-row{display:grid;grid-template-columns:3.6em 1fr auto 5.2em;align-items:center;gap:.6em;padding:.5em .7em;border-radius:.7em;background:rgba(255,255,255,.75);font-size:.92em}
.ndc-row em{font-style:normal;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ndc-row strong{font-weight:800}
.ndc-row .ndc-pill{justify-self:end}

/* Sites */
.ndc-live{display:inline-flex;align-items:center;gap:.4em;font-size:.8em;font-weight:800;color:#056a51}
.ndc-live i{width:.6em;height:.6em;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(19,245,187,.6);animation:ndc-pulse 2s ease-out infinite}
@keyframes ndc-pulse{to{box-shadow:0 0 0 .7em rgba(19,245,187,0)}}
.ndc-cards{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.ndc-site{display:flex;flex-direction:column;gap:.5em;padding:.8em;border-radius:1em;background:#fff;border:1px solid var(--line);min-width:0}
.ndc-site>b{font-size:.95em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ndc-stats{display:flex;gap:1em}
.ndc-stats em{font-style:normal;font-weight:800;font-size:1.05em}
.ndc-site svg{width:100%;height:3.2em;display:block}
.ndc-area{fill:rgba(19,245,187,.18)}
.ndc-line{fill:none;stroke:#0fd9a5;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:260;stroke-dashoffset:0}
.nodema-card-link:hover .ndc-line,.nd-capsule:hover .ndc-line{animation:ndc-draw 1s var(--nodema-ease,ease) both}
@keyframes ndc-draw{from{stroke-dashoffset:260}}
.ndc-site .ndc-pill{align-self:flex-start}

@media (prefers-reduced-motion:reduce){.ndc-typing b,.ndc-live i,.ndc-bars i,.ndc-line{animation:none!important}.ndc-frame{transition:none}}
