/* ==========================================================================
   Formality — maquettes HTML de la plateforme (remplacent les captures PNG)
   Écrans simplifiés pour la lecture : peu d'éléments, texte plus grand.
   Chaque écran est dessiné à sa taille réelle puis mis à l'échelle par
   js/formality-v17.js (attribut data-fit, propriété zoom).
   Sources : _build/partials/mock-*.html
   ========================================================================== */
.mock{--m-ink:#16114A;--m-txt:#2B2760;--m-grey:#6E6A94;--m-line:#E6E3F2;--m-soft:#F3F1FC;--m-violet:#6A4FDB;--m-violet-2:#5B43D1;--m-mint:#2EBE8C;--m-mint-bg:#DDF8EE;
  font-family:Roboto,'Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-size:14px;line-height:1.5;color:var(--m-txt);text-align:left;background:#fff;-webkit-font-smoothing:antialiased;overflow:hidden;position:relative}
.mock *{box-sizing:border-box}
.mock p{margin:0}
.mock b{font-weight:600}
.mock u{color:var(--m-violet-2);text-underline-offset:2px}
.m-row{display:flex;align-items:center}
.m-ico{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.m-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:1px solid var(--m-line);border-radius:8px;background:#fff;color:var(--m-violet-2);font-weight:500;font-size:13.5px;white-space:nowrap}
.m-btn--primary{background:var(--m-violet);border-color:var(--m-violet);color:#fff}
.m-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;font-size:12px;line-height:1.35;white-space:nowrap}
.m-chip--line{border:1px solid #CFCBE6;color:var(--m-txt);background:#fff}
.m-chip--soft{background:var(--m-soft);color:var(--m-txt)}
.m-chip--orange{background:#FFE7DA;color:#B44B22}
.m-chip--cyan{background:#DDF4FA;color:#17708A}
.m-chip--mint{background:var(--m-mint-bg);color:#0F7A55}
.m-chip--violet{background:#ECE8FB;color:var(--m-violet-2);font-weight:500}
.m-crumb{font-size:11.5px;color:var(--m-violet-2)}
.m-title{font-size:19px;color:var(--m-ink);font-weight:500;line-height:1.3}
.m-side-k{margin-bottom:10px !important;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-grey);font-weight:500}
.m-tabs{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--m-grey)}
.m-tabs > span{padding:6px 10px;border-radius:8px;white-space:nowrap}
.m-tabs > .is-on{background:#ECE8FB;color:var(--m-ink);font-weight:500}
.m-av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;color:#fff;flex:none}
.m-av--a{background:#8FD3EA;color:#16114A}.m-av--c{background:#F08A6C}
.m-doc{font-family:Georgia,'Times New Roman',Times,serif;color:#1C1A2E;font-size:14px;line-height:1.55}
.m-doc h5{margin:16px 0 6px;font-size:14.5px;font-weight:700;letter-spacing:.02em}
.m-doc h6{margin:12px 0 4px;font-size:14.5px;font-weight:700}
.m-var{font-family:Roboto,'Segoe UI',Arial,sans-serif;font-size:12.5px;color:#0E7A55;background:#DDF8EE;font-weight:600;padding:1px 5px;border-radius:4px;white-space:nowrap}
.m-ins{color:#0E7A55;background:#DDF8EE;text-decoration:underline;text-underline-offset:2px;font-style:normal}
.m-del{color:#B4402D;background:#FDECE8;text-decoration:line-through;font-style:normal}

/* ---------- Extraction ---------- */
.m-ex{width:860px;height:470px}
.m-ex__head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--m-line)}
.m-ex__body{display:grid;grid-template-columns:290px 1fr;height:calc(100% - 66px)}
.m-ex__side{padding:16px 18px;border-right:1px solid var(--m-line)}
.m-field{padding:10px 12px;border-radius:10px;margin-bottom:6px}
.m-field.is-on{background:var(--m-mint-bg);box-shadow:inset 0 0 0 1.5px #8FE3C4}
.m-field__k{display:flex;align-items:center;gap:7px;color:var(--m-grey);font-size:12.5px}
.m-field__k .m-ico{color:var(--m-violet);width:14px;height:14px}
.m-field__v{margin-top:2px;color:var(--m-ink);font-size:14.5px}
.m-field__v .m-ico{color:var(--m-mint)}
.m-ex__main{position:relative;padding:14px 22px 0;background:#F8F7FC;overflow:hidden}
.m-find{display:inline-flex;align-items:center;gap:8px;margin:14px 0 12px;padding:7px 12px;border-radius:8px;background:var(--m-mint-bg);box-shadow:0 0 0 1px #AEEBD4;font-size:12.5px;color:var(--m-ink);white-space:nowrap}
.m-find__n{padding-left:8px;border-left:1px solid #AEEBD4;color:var(--m-grey)}
.m-ex__page{padding:18px 28px;background:#fff;border-radius:6px 6px 0 0;box-shadow:0 0 0 1px #ECEAF3;height:400px}
.m-ex__page h5:first-child{margin-top:0}
.m-hl{margin:8px -10px;padding:8px 10px;border-radius:6px;background:#F1FCF7;box-shadow:inset 3px 0 0 #2EBE8C}

/* ---------- Création ---------- */
.m-cr{width:820px;height:460px}
.m-cr__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--m-line)}
.m-cr__body{display:grid;grid-template-columns:260px 1fr;height:calc(100% - 66px)}
.m-cr__side{padding:16px 18px;border-right:1px solid var(--m-line)}
.m-var-card{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;padding:9px 12px;border:1px solid var(--m-line);border-radius:9px}
.m-var-card code{font-family:inherit;font-size:13.5px;color:var(--m-ink)}
.m-ok{color:var(--m-mint);font-weight:700}
.m-cr__main{padding:18px 22px 0;background:#F8F7FC}
.m-cr__page{padding:22px 30px;background:#fff;border-radius:6px 6px 0 0;box-shadow:0 0 0 1px #ECEAF3;height:400px}
.m-cr__t{text-align:center;font-family:Roboto,Arial,sans-serif;font-weight:700;font-size:17px;letter-spacing:.04em;color:#1F2B5C}
.m-cr__st{margin:4px 0 14px !important;padding-bottom:12px;border-bottom:1.5px solid #1F2B5C;text-align:center;font-size:12.5px;color:#555}

/* ---------- Négociation ---------- */
.m-ng{width:760px;height:460px}
.m-ng__head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 8px}
.m-step{display:flex;align-items:center;gap:10px;padding:6px 18px 12px;border-bottom:1px solid var(--m-line);font-size:13px;color:var(--m-grey)}
.m-step i{flex:1;height:2px;background:linear-gradient(90deg,#2EBE8C,#8A7BEC)}
.m-step i.is-grey{background:#D9D6EA}
.m-step .is-cur{padding:5px 12px;border-radius:8px;background:#ECE8FB}
.m-step .is-cur b{color:var(--m-violet-2)}
.m-dot{width:10px;height:10px;border-radius:50%;background:#2EBE8C}
.m-ng__main{padding:14px 22px 0;background:#F8F7FC;height:100%}
.m-cmp{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--m-ink)}
.m-cmp .m-ico{color:var(--m-grey)}
.m-ng__page{margin-top:14px;padding:20px 28px;background:#fff;border-radius:6px;box-shadow:0 0 0 1px #ECEAF3}
.m-legend{display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--m-grey)}
.m-legend i{margin-right:6px;padding:0 3px;border-radius:3px}

/* ---------- Approbations ---------- */
.m-ap{width:440px;border-radius:12px;box-shadow:0 20px 50px -18px rgba(22,17,74,.35),0 0 0 1px var(--m-line)}
.m-ap__head{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 8px 0 16px;background:linear-gradient(90deg,#2A0F78,#7462E2);color:#fff;font-size:15.5px;font-weight:500}
.m-ap__x{width:28px;height:28px;border:1px solid rgba(255,255,255,.6);border-radius:7px;display:grid;place-items:center}
.m-ap__body{padding:16px 16px 4px}
.m-ap__st{display:grid;grid-template-columns:24px 1fr;gap:4px 10px;position:relative}
.m-ap__st + .m-ap__st{margin-top:12px}
.m-ap__n{width:24px;height:24px;border-radius:50%;border:2px solid #D3D1DE;display:grid;place-items:center;font-size:11.5px;color:#9894B3;font-weight:600;background:#fff;position:relative;z-index:1}
.m-ap__st.is-on .m-ap__n{border-color:var(--m-violet);color:var(--m-violet)}
.m-ap__st:first-child::after{content:"";position:absolute;left:11px;top:24px;bottom:-14px;width:2px;background:#E1DFEA}
.m-ap__card{grid-column:2;display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--m-line);border-radius:9px;font-size:14px;color:var(--m-ink)}
.m-ap__card .m-bell{margin-left:auto;width:24px;height:24px;border:1px solid var(--m-line);border-radius:6px;display:grid;place-items:center;color:var(--m-violet)}
.m-ap__card small{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--m-txt)}
.m-ap__foot{display:flex;align-items:center;justify-content:space-between;padding:16px}

/* ---------- Tâches ---------- */
.m-tk{width:336px;border-radius:14px;box-shadow:0 0 0 1px var(--m-line);background:#fff}
.m-tk__h{padding:16px 16px 12px;font-size:19px;color:var(--m-ink);font-weight:500;border-bottom:1px solid var(--m-line)}
.m-tk__sec{padding:12px 16px;border-bottom:1px solid var(--m-line)}
.m-tk__k{margin-bottom:9px !important;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--m-grey);font-weight:500}
.m-tk__it{display:flex;align-items:center;gap:9px;margin-top:6px;padding:8px 10px;border-radius:8px;background:#F5F4FC;font-size:12.5px;color:var(--m-ink)}
.m-tk__it small{display:block;color:var(--m-grey)}
.m-cb{width:13px;height:13px;border-radius:3px;background:var(--m-violet);flex:none;position:relative}
.m-cb::after{content:"";position:absolute;left:4px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.m-tk__all{margin-top:7px;height:30px;border:1px solid var(--m-line);border-radius:8px;display:grid;place-items:center;color:var(--m-violet);font-weight:500;font-size:12.5px}
.m-tk__cal{display:grid;grid-template-columns:62px 1fr;margin-top:8px;border-radius:8px;background:#F5F4FC;font-size:12.5px;color:var(--m-ink)}
.m-tk__cal > span{display:grid;place-items:center;border-right:1px solid #fff;color:#C4412F;font-weight:500}
.m-tk__cal > div{padding:8px 10px}

/* ---------- Graphiques ---------- */
.m-gr{width:300px;padding:0 10px 10px;border-radius:12px;background:#F4F3FA;box-shadow:0 0 0 1px var(--m-line)}
.m-gr__h{padding:12px 4px 4px;font-size:15px;font-weight:600;color:var(--m-ink)}
.m-gr__card{margin-top:8px;padding:12px 14px;border-radius:9px;background:#fff;box-shadow:0 1px 3px rgba(22,17,74,.08)}
.m-gr__card > p{margin-bottom:8px !important;font-size:13px;font-weight:600;color:var(--m-ink)}
.m-pie{width:84px;height:84px;border-radius:50%;flex:none}
.m-pie--a{background:conic-gradient(#BDB5F7 0 78%,#86BFFB 78% 100%)}
.m-gr__leg{margin:0;padding:0;list-style:none;font-size:12.5px;color:var(--m-txt)}
.m-gr__leg li{display:flex;align-items:center;gap:7px;margin:4px 0}
.m-gr__leg i{width:10px;height:10px;border-radius:3px}
.m-bars{display:block;width:100%;height:96px}
.m-gr__ax{justify-content:space-between;margin-top:4px;font-size:11px;color:var(--m-grey)}

/* ---------- Réponse IA ---------- */
.m-ai{width:400px;padding:16px 20px 12px;font-size:13.5px;line-height:1.6;color:#4E4A78}
.m-ai b{color:var(--m-ink)}
.m-ai ul{margin:4px 0 12px;padding-left:20px;list-style:disc}
.m-ai li{margin:3px 0}
.m-ai__foot{display:flex;justify-content:space-between;margin-top:12px;padding-top:8px;border-top:1px solid var(--m-line);color:var(--m-violet)}

/* ---------- intégration dans le site ---------- */
[data-fit]{flex:none}
.window__body .mock{border-radius:0}
.shot--bleed > .mock{position:absolute;left:var(--x,44px);top:44px;border-radius:12px 0 0 0;box-shadow:0 30px 70px -24px rgba(11,3,65,.5),0 0 0 1px rgba(11,3,65,.08)}
.shot--center,.shot--tall,.shot--duo{display:flex;align-items:center;justify-content:center;gap:16px;padding:40px}
.shot--duo{padding:24px}
.shot--tall{align-items:flex-start;padding-top:44px}
.shot--tall > .mock{border-radius:14px 14px 0 0}
.shot--duo > .mock{box-shadow:0 30px 70px -24px rgba(11,3,65,.45),0 0 0 1px rgba(11,3,65,.08);border-radius:12px}
.m-pie--b{background:radial-gradient(circle,#fff 0 46%,transparent 47%),conic-gradient(#BDB5F7 0 73%,#86BFFB 73% 92%,#8AD8E8 92% 100%)}
.m-ai__q{margin:0 0 14px 40px;padding:10px 14px;border-radius:14px 14px 4px 14px;background:#ECE8FB;color:var(--m-ink);font-size:13.5px;line-height:1.45}
.m-ai__who{display:flex;align-items:center;gap:7px;margin-bottom:6px !important;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--m-violet)}
.m-ai__who::before{content:"";width:6px;height:6px;background:var(--m-violet);transform:rotate(45deg)}