/* AIDataVeil, developers page (25/10/2026). Loaded after site.css, only by developers/index.html and fr/developpeurs/index.html.
   Same Lattice system: gray page, black bands, one olive band, Public Sans, IBM Plex Mono for code, gold only on black (dark gold on gray).
   The integration machine reuses the home machine's classes (.mw, .m-a, .m-b, .m-c, wires, field, seal) and its film; this file
   only places them and adds the app frame, the address chip, the veil's arrival and the auditor. Every text is at least 7:1. */

/* header: the current page is underlined, like the current language */
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- the integration machine (first black band) ---------- */
.dev-band { padding-bottom: clamp(48px, 6vw, 88px); }
.dev-mw .machine { height: 372px; --vx: 42%; --fx: 74%; --ra: 40%; --rc: 64%;
  background: radial-gradient(ellipse 15% 55% at var(--vx) 50%, rgba(201, 165, 92, 0.07), transparent 72%); }
/* your app: a hairline frame around the request and the restored answer, its configuration line at the top */
.dev-mw .d-app { position: absolute; left: 0; top: 0; width: calc(var(--vx) - 64px); height: calc(var(--rc) + 66px); border: 1px solid var(--w-line); }
.dev-mw .d-app > .ml { position: absolute; left: 20px; top: 16px; }
.d-chip { display: flex; flex-wrap: wrap; column-gap: 0.6em; font: 400 15px/1.45 var(--mono); letter-spacing: 0; color: var(--w-2); background: #0b0b0b; border: 1px solid var(--w-line); padding: 8px 12px; }
.dev-mw .d-chip { position: absolute; left: 20px; right: 20px; top: 44px; }
.d-chip .k { color: var(--w-3); }
.d-chip .v { display: inline-grid; }
.d-chip .v > span { grid-area: 1 / 1; }
.d-chip .v-new { color: var(--w-1); }
.d-chip .v-old { position: relative; visibility: hidden; }
.d-chip .v-old::after { content: ""; position: absolute; left: 0; right: 0; top: 0.78em; height: 1px; background: var(--w-2); transform: scaleX(0); transform-origin: 0 50%; }
/* rows, field and seal: the home machine's pieces, placed for this story */
.dev-mw .m-a { left: 20px; width: calc(var(--vx) - 20px); top: var(--ra); }
.dev-mw .m-c { left: 20px; width: calc(var(--vx) - 20px); top: var(--rc); }
.dev-mw .m-b { left: var(--vx); width: calc(var(--fx) - var(--vx)); top: var(--ra); }
.dev-mw .m-ret { left: var(--vx); width: calc(var(--fx) - var(--vx)); top: calc(var(--rc) + 22px); }
.dev-mw .m-field { left: var(--fx); top: 17%; bottom: 25%; }
.dev-mw .m-seal { top: var(--rc); }
/* the veil arrives on the request's path when the address changes */
.dev-mw .m-veil { background: none; }
.dev-mw .m-veil::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5) 16%, rgba(201, 165, 92, 0.9) 50%, rgba(255, 255, 255, 0.5) 84%, transparent); transform-origin: 50% 0; }
.dev-mw .d-veil-l { position: absolute; z-index: 2; top: 10px; left: var(--vx); transform: translateX(-50%); padding: 2px 10px; background: var(--black); color: var(--gold); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.dev-mw .d-direct { position: absolute; left: 20px; right: calc(100% - var(--fx)); top: calc(var(--ra) + 22px); height: 1px; opacity: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 5px, transparent 5px 11px); }
/* the receipt leaves the seal and travels to your customer's auditor */
.dev-mw .d-drop { position: absolute; left: var(--vx); top: calc(var(--rc) + 74px); width: 1px; height: 24px; background: var(--gold); transform-origin: 50% 0; }
.dev-mw .d-lane { left: var(--vx); width: calc(var(--fx) - var(--vx) - 12px); top: calc(var(--rc) + 98px); }
.dev-mw .w5 i::after { width: 11px; height: 11px; top: -5px; right: -5px; box-sizing: border-box; background: var(--black); border: 1px solid currentColor; box-shadow: inset 0 0 0 2px var(--black), inset 0 0 0 6px currentColor; }
.d-aud { display: flex; align-items: center; gap: 14px; }
.dev-mw .d-aud { position: absolute; left: var(--fx); right: 0; top: calc(var(--rc) + 78px); }
.d-aud svg { flex: none; width: 40px; height: 40px; overflow: visible; color: var(--gold); }
.d-aud .draw { fill: var(--black); stroke: currentColor; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.d-aud .inner { fill: none; stroke: currentColor; stroke-width: 1; }
.d-aud .dot { fill: currentColor; }
.d-aud-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.d-aud .ml { white-space: normal; }
.d-aud .ok { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }

/* timeline: a1 to a3 (the address), s1 to s10 (the home machine's exchange), r1 and r2 (the receipt) come from developers.js.
   Without script, or under reduced motion (class static), every state is visible at once. */
.js .dev-mw:not(.static) .d-app, .js .dev-mw:not(.static) .d-veil-l, .js .dev-mw:not(.static) .d-aud .ml, .js .dev-mw:not(.static) .d-aud .ok { opacity: 0; transition: opacity .7s ease; }
.js .dev-mw.a1 .d-app { opacity: 1; }
.js .dev-mw:not(.static) .d-chip .v-old { visibility: visible; transition: opacity .3s ease .45s; }
.js .dev-mw:not(.static) .d-chip .v-old::after { transition: transform .4s cubic-bezier(.45, 0, .2, 1); }
.js .dev-mw:not(.static) .d-chip .v-new { clip-path: inset(0 100% 0 0); transition: clip-path .75s steps(21, end) .5s; }
.js .dev-mw.a2 .d-chip .v-old { opacity: 0; }
.js .dev-mw.a2 .d-chip .v-old::after { transform: scaleX(1); }
.js .dev-mw.a2 .d-chip .v-new { clip-path: inset(0 0 0 0); }
.js .dev-mw.a1:not(.static) .d-direct { opacity: 1; transition: opacity .6s ease; }
.js .dev-mw.a3:not(.static) .d-direct { opacity: 0; }
.js .dev-mw:not(.static) .m-veil::before { transform: scaleY(0); transition: transform .8s cubic-bezier(.45, 0, .2, 1); }
.js .dev-mw.a3 .m-veil::before { transform: none; }
.js .dev-mw.a3 .d-veil-l { opacity: 1; transition-delay: .3s; }
.js .dev-mw:not(.static) .d-drop { transform: scaleY(0); transition: transform .35s cubic-bezier(.45, 0, .2, 1); }
.js .dev-mw.r1 .d-drop { transform: none; }
.js .dev-mw.r1 .w5 i { width: 100%; --t: .8s; transition-delay: .25s; }
.js .dev-mw.r1 .w5 i::after { opacity: 1; transition-delay: .25s; }
.js .dev-mw.r1 .d-aud .ml { opacity: 1; }
.js .dev-mw:not(.static) .d-aud .draw { stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .2, 1); }
.js .dev-mw:not(.static) .d-aud .inner, .js .dev-mw:not(.static) .d-aud .dot { opacity: 0; transition: opacity .5s ease .5s; }
.js .dev-mw.r2 .d-aud .draw { stroke-dashoffset: 0; }
.js .dev-mw.r2 .d-aud .inner, .js .dev-mw.r2 .d-aud .dot { opacity: 1; }
.js .dev-mw.r2 .d-aud .ok { opacity: 1; transition-delay: .6s; }
/* the first frame is hidden at once (no fade-out before it plays), as on the home machine */
.js .dev-mw:not(.static):not(.a1) .d-app, .js .dev-mw:not(.static):not(.a1) .d-veil-l, .js .dev-mw:not(.static):not(.a1) .m-veil::before,
.js .dev-mw:not(.static):not(.a1) .d-chip .v-new, .js .dev-mw:not(.static):not(.a1) .d-chip .v-old, .js .dev-mw:not(.static):not(.a1) .d-chip .v-old::after,
.js .dev-mw:not(.static):not(.a1) .d-direct, .js .dev-mw:not(.static):not(.a1) .d-drop, .js .dev-mw:not(.static):not(.a1) .d-aud .ml,
.js .dev-mw:not(.static):not(.a1) .d-aud .ok, .js .dev-mw:not(.static):not(.a1) .d-aud .draw, .js .dev-mw:not(.static):not(.a1) .d-aud .inner,
.js .dev-mw:not(.static):not(.a1) .d-aud .dot { transition: none; }

/* phones: the same story in one column (the home machine's stacked layout), without the frame and the direct path */
@media (max-width: 900px) {
  .dev-mw .machine { height: auto; background: none; }
  .dev-mw .m-a, .dev-mw .m-b, .dev-mw .m-c { width: auto; }
  .dev-mw .m-field { left: auto; top: auto; bottom: auto; }
  .dev-mw .d-app { position: static; order: 0; width: auto; height: auto; border: 0; margin: 0 52px 26px 0; }
  .dev-mw .d-app > .ml { position: static; margin-bottom: 10px; }
  .dev-mw .d-chip { position: static; }
  .dev-mw .d-direct, .dev-mw .d-lane { display: none; }
  .dev-mw .d-veil-l { position: static; order: 2; align-self: center; transform: none; margin: 18px 0 -12px; }
  .dev-mw .m-veil::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55) 15%, rgba(201, 165, 92, 0.95) 50%, rgba(255, 255, 255, 0.55) 85%, transparent); transform-origin: 0 50%; }
  .js .dev-mw:not(.static) .m-veil::before { transform: scaleX(0); }
  .js .dev-mw.a3 .m-veil::before { transform: none; }
  .dev-mw .d-drop { position: static; order: 7; height: 26px; margin: 10px 0 10px 21.5px; }
  .dev-mw .d-aud { position: static; order: 7; margin-left: 2px; }
}

/* ---------- how it fits: black stage with image 04, details on gray ---------- */
.fit-items h3 { margin-bottom: 10px; }
.fits-code { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 40px; margin-top: clamp(56px, 6vw, 88px); align-items: start; }
.diff { grid-column: 1 / span 7; margin: 0; background: var(--black); color: var(--w-1); border-top: 2px solid var(--gold); }
.diff-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px 13px; border-bottom: 1px solid var(--w-line-2); }
.diff-bar .fc-mark { color: var(--w-1); }
.diff-bar .ml { color: var(--w-3); }
.diff pre { margin: 0; padding: 18px 24px 22px; font: 400 16px/1.6 var(--mono); letter-spacing: 0; white-space: pre-wrap; }
.diff code { font: inherit; }
.diff .ln { display: block; padding: 5px 0 5px 14px; border-left: 2px solid transparent; }
.diff .ln b { font-weight: 500; margin-right: 0.3em; }
.diff .del { color: var(--w-3); }
.diff .add { color: var(--w-1); border-left-color: var(--gold); background: rgba(201, 165, 92, 0.08); }
.diff .add b { color: var(--gold); }
.diff .u { display: inline-block; }
.fits-side { grid-column: 9 / -1; display: grid; row-gap: 30px; }
.fits-side > div { border-top: 1px solid var(--ink); padding-top: 16px; }
.fits-side .ml { margin: 0 0 10px; }
.fits-side p:not(.ml) { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink); }
.go { display: inline-block; margin-top: 14px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.go::after { content: "\00a0\2192"; }
.go:hover { border-bottom-width: 2px; }
@media (max-width: 1100px) {
  .diff { grid-column: 1 / -1; }
  .fits-side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cg); }
}
@media (max-width: 640px) {
  .fits-side { grid-template-columns: minmax(0, 1fr); }
  .diff-bar { padding: 12px 16px; }
  .diff pre { padding: 14px 16px 18px; font-size: 15px; }
  .diff .ln { padding-left: 10px; }
}

/* ---------- review pass (25/10/2026, after the first captures) ---------- */
/* the veil's glow arrives with the veil */
.dev-mw .machine { background: none; }
.dev-mw .machine::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 15% 55% at var(--vx) 50%, rgba(201, 165, 92, 0.07), transparent 72%); }
.js .dev-mw:not(.static) .machine::before { opacity: 0; transition: opacity 1.2s ease; }
.js .dev-mw.a3 .machine::before { opacity: 1; }
.js .dev-mw:not(.static):not(.a1) .machine::before { transition: none; }
/* an address never pushes the page wider than the screen */
.d-chip .v { min-width: 0; }
.d-chip .v > span, .diff .u { overflow-wrap: anywhere; }
/* the request stays readable once its stand-in exists (founder rule 7:1: gold at 90% on black is 7.3:1; the home machine uses 55%) */
.js .dev-mw.s4 .m-a .tk { opacity: .9; }
/* the frame keeps its distance from the receipt's label */
@media (min-width: 901px) { .dev-mw .d-app { width: calc(var(--vx) - 76px); } }
/* review aid (?anim&t=): a frozen moment shows the end state of each step at once */
.dev-mw.frozen *, .dev-mw.frozen *::before, .dev-mw.frozen *::after { transition: none !important; animation: none !important; }
@media (max-width: 900px) {
  .dev-mw .machine::before { display: none; }
  .dev-mw .d-app { margin-right: 0; }
  .dev-mw .m-replay { top: auto; bottom: 0; right: 0; }
}