/* schema.css — STRIKE · « Branché sur vos systèmes » (home page, right after the manifesto). It needs the fonts the
   page loads (Bricolage, Geist, Geist Mono), the page's #logo symbol and the site's .kicker (base.css); it reads the
   site's --gutter / --container / --ink-h when they exist and falls back to the same values otherwise.
   Without JavaScript (and under reduced motion) every figure shows its finished state. With schema.js the section
   gets .is-js, and the figures draw from two numbers written every frame: --sp (fig. 03) and --cp (fig. 04).
   A drawable element carries --a (when it starts, 0 → 1 of the progress) and --k (how fast it completes). */
.sch {
  --paper: #F7F5E8; --ink: #151715; --ink2: rgba(21, 23, 21, .62); --ink3: rgba(21, 23, 21, .62);
  --hair: rgba(21, 23, 21, .12); --hair2: rgba(21, 23, 21, .22); --orange: #F87A01;
  --spec: linear-gradient(90deg, #4ADAAD, #32B5EC 30%, #B471EF 58%, #F046A4 82%, #F87A01);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --f-disp: var(--display, "Instrument Serif", Georgia, serif);
  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative; padding: clamp(80px, 8.5vw, 124px) 0 clamp(80px, 8.5vw, 124px);
  color: var(--ink); font-family: var(--f-sans);
}
.sch *, .sch *::before, .sch *::after { box-sizing: border-box; }
.sch__wrap { width: min(100% - 2 * var(--gutter, clamp(20px, 4.4vw, 64px)), var(--container, 1320px)); margin-inline: auto; }
.sch-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sch-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sch :where(ul) { list-style: none; margin: 0; padding: 0; }
.sch :where(p, figure, h2) { margin: 0; }

/* ---- head ---- */
.sch__h { margin: 22px 0 0; max-width: 24ch; font-family: var(--f-disp); font-weight: 400; font-stretch: normal; font-variation-settings: normal; font-style: normal; font-synthesis: none;
  font-size: clamp(44px, 5.8vw, 96px); line-height: .95; letter-spacing: -.018em; text-wrap: balance; }
.sch__h .l { display: block; }
.sch__h em { font-style: normal; color: inherit; background: var(--spec) no-repeat 0 88% / 0% 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1.3s var(--ease) .8s; }
.sch__h.is-in em, html:not(.js) .sch__h em { background-size: 100% 2px; }
.sch__lead { margin-top: 28px; max-width: 33em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink2); }

/* ---- figure frame: a hairline with mono annotations ---- */
.sch-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 12px; border-top: 1px solid var(--hair2);
  font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.sch-fig { margin-top: clamp(56px, 7vw, 96px); }

/* ---- fig. 03 stage: one design unit = 1 px at 1280 (desktop) or at 350 (phone) ---- */
.sch-stage { --W: 1280; position: relative; container-type: inline-size; aspect-ratio: 1280 / 520; margin-top: clamp(28px, 3.4vw, 44px); }
.sch-stage > * { --u: calc(100cqw / var(--W)); }
.sch-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.sch-svg--m { display: none; }
.sch-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sch-n { position: absolute; left: calc(var(--dx) * var(--u)); top: calc(var(--dy) * var(--u)); margin: 0; }

/* line art */
.sch-cl { stroke-opacity: .14; stroke-dasharray: 16 5 2 5; }
.sch-br { stroke-opacity: .4; }
.sch-ld { stroke-opacity: .26; stroke-dasharray: 1 4; }
.sch-rt { stroke-opacity: .26; transition: stroke-opacity .5s var(--ease); }
.sch-rt--out { stroke-opacity: .34; }
.sch-rt-on { stroke-width: 1.5; opacity: 0; transition: opacity .5s var(--ease); }
.sch-ray { stroke-opacity: 0; stroke-dasharray: 2 5; transition: stroke-opacity .5s var(--ease); }
.sch-port { fill: var(--paper); stroke-opacity: .66; }
.sch-dial { stroke-opacity: .5; }
.sch-tk { stroke-opacity: .32; }
.sch-ring { stroke-opacity: .16; }
.sch-lens { stroke-opacity: .86; stroke-width: 1.25; }
.sch-cloud circle { fill: none; stroke: var(--ink); stroke-dasharray: 0 1; stroke-linecap: round; }
.sch-err0__r { stroke: var(--orange); stroke-opacity: .9; }
.sch-err0__d { fill: var(--orange); stroke: none; }
.sch-dots circle { fill: var(--ink); stroke: none; }
.sch-ret circle, .sch-ret path { stroke-opacity: .72; transition: stroke .4s, stroke-opacity .4s; }
.sch-ret .sch-ret__c { fill: var(--ink); stroke: none; transition: fill .4s; }
.sch-ret.is-err circle, .sch-ret.is-err path { stroke: var(--orange); stroke-opacity: 1; }
.sch-ret.is-err .sch-ret__c { fill: var(--orange); }
.sch-oport { fill: var(--paper); stroke-opacity: .85; }

/* soft light behind the lens (gradient, low) */
/* soft light behind the lens (two neighbouring hues, low): a layer exactly the size of the stage, so nothing sticks out */
.sch-wash { position: absolute; inset: 0; pointer-events: none; --wx: var(--dx); --wy: var(--dy); --wr: 330;
  background: radial-gradient(circle calc(var(--wr) * var(--u)) at calc(var(--wx) * var(--u)) calc(var(--wy) * var(--u)),
    rgba(50, 181, 236, .12), rgba(115, 147, 238, .075) 42%, rgba(180, 113, 239, .035) 68%, rgba(180, 113, 239, 0) 100%); }

/* labels */
.sch-hdr, .sch-grp { font: 500 max(9.5px, calc(11 * var(--u)))/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transform: translateY(-50%); }
.sch-hdr { color: var(--ink2); display: flex; align-items: center; gap: 10px; }
.sch-hdr::after { content: ""; width: calc(28 * var(--u)); height: 1px; background: var(--hair2); }
.sch-grp { color: var(--ink3); top: calc((var(--dy) + 9) * var(--u)); }

/* systems: buttons with the real logos */
.sch-btn { display: flex; align-items: center; width: calc(206 * var(--u)); height: calc(44 * var(--u)); padding: 0 0 0 calc(10 * var(--u)); transform: translateY(-50%);
  border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sch-btn:focus { outline: none; }
.sch-btn:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.sch-logo { display: block; flex: none; height: calc(var(--h) * var(--u)); width: auto; aspect-ratio: var(--ar); fill: currentColor; transition: opacity .5s var(--ease); }
/* a mark without its official file yet (Salesforce): a quiet name plate — hairline, mono, secondary ink — until the
   client's file replaces it (see gen_schema.py) */
.sch-plate { display: inline-flex; align-items: center; height: calc(24 * var(--u)); padding: 0 calc(9 * var(--u)) 0 calc(10 * var(--u)); border-radius: calc(4 * var(--u));
  box-shadow: inset 0 0 0 1px rgba(21, 23, 21, .3); color: var(--ink2); font: 500 max(8.5px, calc(10 * var(--u)))/1 var(--f-mono); letter-spacing: .14em; white-space: nowrap;
  transition: opacity .5s var(--ease); }
.sch-cap { transform: translateY(calc(-50% + 5px)); opacity: 0; pointer-events: none; white-space: nowrap;
  font: 500 max(9px, calc(10.5 * var(--u)))/1.25 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  transition: opacity .35s var(--ease), transform .6s var(--ease); }
.sch-cap.is-on { opacity: 1; transform: translateY(-50%); }
.sch-stage.is-act .sch-btn:not(.is-on) .sch-logo, .sch-stage.is-act .sch-btn:not(.is-on) .sch-plate { opacity: .26; }
.sch-stage.is-act .sch-rt:not(.sch-rt--out) { stroke-opacity: .07; }
.sch-stage.is-act .sch-rt-on.is-on { opacity: 1; }
.sch-stage.is-act .sch-ray.is-on { stroke-opacity: .55; }

/* STRIKE: the real wordmark, read-only */
.sch-core { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); transform: translateX(-50%); }
.sch-wm { display: block; width: calc(124 * var(--u)); height: auto; aspect-ratio: 1066.8 / 210.2; fill: var(--ink); }
.sch-ro { display: inline-flex; align-items: center; height: calc(22 * var(--u)); padding: 0 calc(11 * var(--u)); border: 1px solid var(--hair2); border-radius: 99px;
  font: 500 max(9px, calc(10 * var(--u)))/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }

/* outputs */
.sch-out { display: flex; align-items: center; gap: calc(10 * var(--u)); transform: translateY(-50%); }
.sch-out__b { display: flex; flex-direction: column; gap: calc(5 * var(--u)); max-width: calc(250 * var(--u)); }
.sch-out__s { font: 500 max(9px, calc(10 * var(--u)))/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.sch-out__n { font: 500 max(9px, calc(10 * var(--u)))/1 var(--f-mono); letter-spacing: .12em; color: var(--ink3); }
.sch-out__t { font: 500 max(11.5px, calc(16.5 * var(--u)))/1.18 var(--f-sans); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.sch-tick { display: inline-block; vertical-align: -.12em; margin-left: .35em; width: calc(15 * var(--u)); height: calc(15 * var(--u)); fill: none; stroke: var(--orange); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.55); transition: opacity .3s var(--ease), transform .7s var(--ease); }
.sch-tick.is-on, .sch:not(.is-js) .sch-tick { opacity: 1; transform: none; }

/* ---- fig. 04 — what the audit compares ---- */
.sch-cmp { margin-top: clamp(72px, 9vw, 128px); }
.sch-cmp__body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; padding-top: clamp(24px, 3vw, 36px); }
.sch-cmp__t { font: 600 clamp(19px, 1.6vw, 22px)/1.2 var(--f-sans); letter-spacing: -.01em; color: var(--ink); }
.sch-key { display: grid; gap: 11px; margin-top: 20px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.sch-key li { display: flex; align-items: center; gap: 12px; }
.sch-key i { flex: none; display: block; width: 24px; }
.sch-key__bar { height: 4px; border-radius: 1px; background: var(--ink); opacity: .8; }
.sch-key__eq { height: 1px; background: var(--hair2); }
.sch-key__err { height: 9px; width: 9px !important; margin-right: 15px; border: 1.25px solid var(--orange); border-radius: 50%; }
.sch-grid { position: relative; --id: 92px; --st: 76px; }
.sch-grid__hd, .sch-grid__row, .sch-grid__cols { display: grid; grid-template-columns: var(--id) repeat(4, minmax(0, 1fr)) var(--st); align-items: center; }
.sch-grid__hd { height: 34px; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.sch-grid__hd > span:not(.sch-grid__id) { padding-left: 14px; }
.sch-grid__hd .sch-grid__st { text-align: right; padding: 0; }
.sch-grid__cols { position: absolute; inset: 0; pointer-events: none; }
.sch-grid__cols i { display: block; height: 100%; border-left: 1px solid var(--hair2); }
.sch-grid__cols i:nth-child(1) { grid-column: 2; } .sch-grid__cols i:nth-child(2) { grid-column: 3; }
.sch-grid__cols i:nth-child(3) { grid-column: 4; } .sch-grid__cols i:nth-child(4) { grid-column: 5; }
.sch-grid__row { position: relative; height: 36px; border-top: 1px solid var(--hair); }
.sch-grid__id { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--ink3); }
.sch-grid__st { justify-self: end; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.sch-grid__row.is-err .sch-grid__st { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.sch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.sch-cell { position: relative; z-index: 1; display: flex; align-items: center; height: 100%; padding: 0 14px; }
.sch-bar-v { display: block; height: 4px; width: calc(var(--v) * 100%); border-radius: 1px; background: var(--ink); opacity: .8; transform-origin: 0 50%; }
.sch-link { position: absolute; left: calc(var(--id) + 14px); right: calc(var(--st) + 10px); top: 50%; height: 1px; background: var(--hair2); transform-origin: 0 50%; }
.sch-gap { position: absolute; top: 50%; left: calc(14px + var(--v) * (100% - 28px)); width: calc(var(--g) * (100% - 28px)); height: 0; margin-top: -.6px;
  border-top: 1.25px dashed var(--orange); transform-origin: 0 50%; }
.sch-ring { position: absolute; top: 50%; left: calc(14px + (var(--v) + var(--g)) * (100% - 28px)); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border: 1.25px solid var(--orange); border-radius: 50%; background: var(--paper); }

/* ---- drawing (JavaScript on, motion allowed) ---- */
.sch.is-js .dr { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - clamp(0, (var(--sp, 1) - var(--a, 0)) * var(--k, 4), 1)); }
.sch.is-js .dr-rev { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 + clamp(0, (var(--sp, 1) - var(--a, 0)) * var(--k, 4), 1)); }
.sch.is-js .fd { opacity: clamp(0, (var(--sp, 1) - var(--a, 0)) * var(--k, 6), 1); }
.sch.is-js .sch-btn.fd { translate: calc((1 - clamp(0, (var(--sp, 1) - var(--a, 0)) * var(--k, 6), 1)) * -10px) 0; }
.sch.is-js .sch-cloud, .sch.is-js .sch-err0 { display: none; }   /* the canvas draws them live */
.sch.is-js .sch-grid__cols i { transform: scaleY(clamp(0, (var(--cp, 1) - .02 - var(--c) * .04) * 4, 1)); transform-origin: 50% 0; }
.sch.is-js .sch-grid__hd > * { opacity: clamp(0, (var(--cp, 1) - .06) * 6, 1); }
.sch.is-js .sch-grid__row { border-top-color: rgba(21, 23, 21, calc(.12 * clamp(0, (var(--cp, 1) - .1 - var(--r) * .07) * 5, 1))); }
.sch.is-js .sch-grid__row > .sch-grid__id { opacity: clamp(0, (var(--cp, 1) - .14 - var(--r) * .07) * 6, 1); }
.sch.is-js .sch-bar-v { transform: scaleX(clamp(0, (var(--cp, 1) - .16 - var(--r) * .07 - var(--c) * .03) * 7, 1)); }
.sch.is-js .sch-link { transform: scaleX(clamp(0, (var(--cp, 1) - .2 - var(--r) * .07) * 4, 1)); }
.sch.is-js .sch-grid__row > .sch-grid__st { opacity: clamp(0, (var(--cp, 1) - .34 - var(--r) * .07) * 6, 1); }
.sch.is-js .is-err .sch-gap { transform: scaleX(clamp(0, (var(--cp, 1) - .7) * 6, 1)); }
.sch.is-js .is-err .sch-ring { opacity: clamp(0, (var(--cp, 1) - .82) * 8, 1); scale: calc(.4 + .6 * clamp(0, (var(--cp, 1) - .82) * 8, 1)); }
.sch.is-js .is-err > .sch-grid__st { opacity: clamp(0, (var(--cp, 1) - .86) * 8, 1); }

/* ---- phone: the diagram turns vertical (inputs on top, STRIKE, then the outputs) ---- */
@media (max-width: 959px) {
  .sch-stage { --W: 350; aspect-ratio: 350 / 820; max-width: 460px; margin-inline: auto; }
  .sch-svg--d { display: none; }
  .sch-svg--m { display: block; }
  .sch-n { left: calc(var(--mx) * var(--u)); top: calc(var(--my) * var(--u)); }
  .sch-grp { top: calc((var(--my) + 8) * var(--u)); }
  .sch-btn { width: calc(138 * var(--u)); height: calc(38 * var(--u)); padding-left: calc(8 * var(--u)); }
  .sch-logo { height: calc(var(--h) * .78 * var(--u)); }
  .sch-plate { height: calc(20 * var(--u)); padding: 0 calc(7 * var(--u)) 0 calc(8 * var(--u)); font-size: max(8px, calc(8.6 * var(--u))); letter-spacing: .08em; }
  .sch-cap { max-width: calc(104 * var(--u)); white-space: normal; }
  .sch-core { align-items: flex-start; gap: calc(9 * var(--u)); transform: translateY(-50%); }
  .sch-wm { width: calc(98 * var(--u)); }
  .sch-ro { height: calc(20 * var(--u)); padding: 0 calc(8 * var(--u)); font-size: max(8.5px, calc(9 * var(--u))); }
  .sch-wash { --wx: var(--mx); --wy: var(--my); --wr: 190; }
  .sch-out { flex-direction: column; gap: calc(6 * var(--u)); width: calc(112 * var(--u)); transform: translateX(-50%); text-align: center; }
  .sch-out__b { align-items: center; max-width: none; }
  .sch-out__t { font-size: max(12.5px, calc(13.5 * var(--u))); line-height: 1.2; }
  .sch-tick { position: absolute; left: calc(50% + 9 * var(--u)); top: calc(-26 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin: 0; }
  .sch-bar { font-size: 10px; letter-spacing: .12em; }
  .sch-cmp__body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sch-key { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; }
  .sch-grid { --id: 0px; --st: 46px; }
  .sch-grid .sch-grid__id { visibility: hidden; overflow: hidden; white-space: nowrap; }
  .sch-grid__hd { font-size: 9px; letter-spacing: .06em; }
  .sch-grid__hd > span:not(.sch-grid__id) { padding-left: 7px; }
  .sch-grid__st { font-size: 9px; letter-spacing: .06em; }
  .sch-cell { padding: 0 7px; }
  .sch-gap { left: calc(7px + var(--v) * (100% - 14px)); width: calc(var(--g) * (100% - 14px)); }
  .sch-ring { left: calc(7px + (var(--v) + var(--g)) * (100% - 14px)); }
  .sch-link { left: 7px; }
}

/* reduced motion and print: the finished drawing, no flow (schema.js does not add .is-js) */
@media (prefers-reduced-motion: reduce) {
  .sch__h em { transition: none; background-size: 100% 2px; }
  .sch-cap, .sch-logo, .sch-plate, .sch-rt, .sch-rt-on, .sch-ray, .sch-tick { transition: none; }
}

/* ---- hiérarchie (retour client 12/10) : ce qui compte d'abord, la légende de figure en dernier ----
   1. « Entrées » / « Sorties » = les vrais titres de la figure (police de titre, encre) ;
   2. les familles (ERP / Finance, CRM…) et les colonnes du tableau = second niveau ;
   3. « Fig. 03 — Branchement · 6 entrées · 3 sorties » = simple légende, petite, claire, SOUS la figure. */
.sch-fig, .sch-cmp { display: flex; flex-direction: column; }
.sch-fig > .sch-bar, .sch-cmp > .sch-bar { order: 9; margin-top: clamp(20px, 2.4vw, 32px); padding-top: 10px; border-top: 1px solid var(--hair);
  font-size: 10.5px; letter-spacing: .14em; color: rgba(21, 23, 21, .42); }
.sch-fig > .sch-stage { margin-top: clamp(40px, 4.6vw, 64px); }
.sch-hdr { font: 400 max(26px, calc(38 * var(--u)))/1 var(--f-disp); letter-spacing: -.015em; text-transform: none; color: var(--ink); gap: calc(14 * var(--u)); }
.sch-hdr::after { width: calc(64 * var(--u)); background: var(--spec); opacity: .75; }
.sch-grp { color: var(--ink2); }
.sch-cmp__t { font: 400 clamp(30px, 3.2vw, 46px)/1 var(--f-disp); letter-spacing: -.015em; }
.sch-grid__hd { height: 40px; font: 600 14px/1 var(--f-sans); letter-spacing: -.005em; text-transform: none; color: var(--ink); }
.sch-grid__hd .sch-grid__id { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
@media (max-width: 760px) {
  .sch-hdr { font-size: 26px; }
  .sch-grid__hd { font-size: 12.5px; }
}
/* flex column (caption below the figure): the stage must keep its full width (margin-inline:auto would shrink it to nothing on phones) */
.sch-fig > .sch-stage { align-self: stretch; width: 100%; }
@media (max-width: 959px) { .sch-fig > .sch-stage { align-self: center; width: min(100%, 460px); } }

.sch__h, .sch-hdr, .sch-cmp__t { word-spacing: .12em; }

/* phones: the six headers never touch (« Commandé » / « Contrôle ») */
@media (max-width: 760px) {
  .sch-grid { --st: 62px; }
  .sch-grid__hd { font-size: 11.5px; letter-spacing: -.01em; }
  .sch-grid__hd > span:not(.sch-grid__id) { padding-left: 6px; }
}