/* ══════════════════════════════════════════════════════════════════════════ Page arka.norn — scènes propres à la page. Repris de .input/ui/norn-embed/norn-page.css. Le socle (tokens, primitives, sections, effets fx-*) est déjà servi par home-base.css et home-sections.css : les trois feuilles communes de cette maquette sont identiques à celles de l'accueil et de la page Cortex. Unique écart avec la maquette : le sombre passe de [data-theme="dark"] sur à #app-root.theme-dark, système du site porté par mobile-menu.js. Cette feuille resserre aussi le rythme vertical (.sec padding) : le socle partagé monte à 150 px, ce qui creuserait 300 px entre deux sections sur écran large. La règle est volontairement locale à cette page. Retimer une scène = changer les bornes des lignes --xN-l en tête de son bloc, jamais dans norn-motion.js : le mouvement y serait doublement lissé. ══════════════════════════════════════════════════════════════════════════ */ /* ── rythme vertical propre à cette page ─────────────────────────────────── */ .sec{padding:clamp(58px,5.4vw,94px) 0} .sec-head+*{margin-top:clamp(30px,3.4vw,54px)} /* ══════════════════════════════════════════════════════════════════════════ arka.norn — page produit. Complément à cortex-landing.css (tokens, typo, sections) et arkalabs-home.css (hero split, sections épinglées, base fx-*). Chaque scène lit --p (progression posée par le moteur de scrubbing) et en dérive ses propres temps. Retimer une scène = éditer ces variables. ══════════════════════════════════════════════════════════════════════════ */ /* ── primitives absentes du socle (elles vivaient dans cortex-page.css, que cette page ne charge pas) ─────────────────────────────────────────────── */ .lead.sub{color:var(--ink-3);font-size:clamp(14.5px,1.05vw,16px)} .sec-head:not(.center) h2{max-width:20ch} /* la ligne de chute : centrée, détachée, jamais un paragraphe orphelin */ .pull{position:relative;max-width:760px;margin:clamp(44px,5vw,72px) auto 0;padding-top:clamp(24px,2.6vw,34px);text-align:center;font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.7vw,23px);line-height:1.42;letter-spacing:-.018em;color:var(--ink);text-wrap:balance} .pull::before{content:'';position:absolute;top:0;left:50%;width:34px;height:1px;background:var(--red);transform:translateX(-50%)} .sec.ink .pull{color:#f4f1ee} .cta-sec{padding-bottom:clamp(90px,11vw,150px)} .foot-n{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)} .foot-grid{grid-template-columns:auto 1fr;align-items:center} @media(max-width:720px){.pull{font-size:16.5px;margin-top:34px}.foot-grid{grid-template-columns:1fr;gap:16px}} /* ── flux normal : plus d'épinglage sur cette page ────────────────────── Les trois sections texte + scène gardent la grille de .pinwrap, mais dans le flux : la scène s'anime en boucle, elle n'a pas besoin d'être retenue. */ .flowwrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,72px);align-items:center} @media(max-width:880px){.flowwrap{grid-template-columns:1fr;gap:34px}} /* ── révélation en cascade à l'apparition ────────────────────────────── */ .rv-up{opacity:0;transform:translateY(14px);transition:opacity .34s cubic-bezier(.22,.61,.36,1) var(--rvd,0ms),transform .38s cubic-bezier(.22,.61,.36,1) var(--rvd,0ms)} .rv-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.rv-up{opacity:1;transform:none;transition:none}} /* ── hero : le plan gouverne, les agents exécutent (animation autonome) ── */ .ahero-viz.nh{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column} .nh-plan{padding:18px 20px;border-radius:18px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) 22%,var(--line));box-shadow:var(--shadow)} .nh-hd{display:flex;align-items:center;justify-content:space-between;gap:12px} .nh-bk{display:inline-flex;align-items:center;gap:9px} .nh-bk img{width:18px;height:18px;object-fit:contain} .nh-bk b{font-family:var(--disp);font-size:14.5px;font-weight:700;letter-spacing:-.014em} .nh-sg{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)} .nh-lots{margin-top:14px;display:flex;flex-direction:column;gap:8px} .nh-lot{position:relative;display:grid;grid-template-columns:30px 1fr 16px;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;background:var(--card-2);border:1px solid var(--line-2);transition:border-color .4s ease,background .4s ease} .nh-lot em{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--red)} .nh-lot b{font-size:12.5px;font-weight:500;color:var(--ink-2)} .nh-lot i{width:9px;height:9px;border-radius:99px;border:1.5px solid var(--line);justify-self:end;transition:background .3s ease,border-color .3s ease} .nh-lot.run{border-color:color-mix(in srgb,var(--red) 34%,var(--line))} .nh-lot.run i{border-color:var(--red);background:transparent;animation:nhp 1.1s ease-in-out infinite} .nh-lot.done i{border-color:var(--red);background:var(--red);animation:none} @keyframes nhp{0%,100%{box-shadow:0 0 0 0 var(--red-soft)}50%{box-shadow:0 0 0 5px var(--red-soft)}} .nh-rail{position:relative;height:clamp(46px,4.6vw,64px);display:grid;place-items:center} .nh-rail::before{content:'';position:absolute;top:0;bottom:0;width:1px;background:var(--line)} .nh-fill{position:absolute;top:0;width:1px;height:0;background:var(--red);transition:height .5s ease} .nh-pk{position:absolute;top:0;width:8px;height:8px;border-radius:99px;background:var(--red);box-shadow:0 0 0 4px var(--red-soft);opacity:0} .nh-pk.go{animation:nhtr .9s ease-in-out forwards} @keyframes nhtr{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(clamp(38px,4vw,56px))}} .nh-pk.up.go{animation:nhtu .9s ease-in-out forwards} @keyframes nhtu{0%{opacity:0;transform:translateY(clamp(38px,4vw,56px))}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(0)}} .nh-run{padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .nh-rh{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .nh-mode{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .nh-gate{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red);opacity:0;transition:opacity .4s ease} .nh-gate.on{opacity:1} .nh-agents{margin-top:13px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .nh-ag{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 8px;border-radius:11px;background:var(--card-2);border:1px solid var(--line-2);opacity:.45;transition:opacity .4s ease,border-color .4s ease,transform .4s ease} .nh-ag img{width:20px;height:20px;object-fit:contain} .nh-ag img.oai{filter:invert(1)} #app-root.theme-dark .nh-ag img.oai{filter:none} .nh-any{width:20px;height:20px;display:grid;place-items:center;font-family:var(--mono);font-size:14px;color:var(--ink-3)} .nh-ag b{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-3)} .nh-ag.on{opacity:1;border-color:color-mix(in srgb,var(--red) 32%,var(--line));transform:translateY(-2px)} .nh-ev{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:10px;min-height:30px} .nh-evk{flex:none;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)} .nh-evt{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);opacity:0;transform:translateY(5px);transition:opacity .35s ease,transform .35s ease} .nh-evt.in{opacity:1;transform:none} /* ── le problème : la décision reste derrière une session close ────────── Session 1 défile (agent à gauche, utilisateur à droite ; la vitesse est rendue par un flou et un étirement proportionnels à l'allure). Elle se ferme, recule, et une seconde session s'empile PAR-DESSUS avec un contexte vide. La décision n'a pas été « perdue dans le défilement » : elle est restée de l'autre côté d'une frontière de session. */ .pbz{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4.6vw,72px);align-items:center; --row:34px;--seen:5;--n:31; /* 1 · le fil défile et le contexte se remplit · 2 · saturation, la session se ferme et recule · 3 · une nouvelle session s'empile devant */ --scroll-l:clamp(0,calc((var(--p,0) - .04) / .46),1);--scroll:calc(var(--scroll-l) * var(--scroll-l) * (3 - 2 * var(--scroll-l))); --full-l:clamp(0,calc((var(--p,0) - .44) / .06),1);--full:calc(var(--full-l) * var(--full-l) * (3 - 2 * var(--full-l))); --close-l:clamp(0,calc((var(--p,0) - .52) / .10),1);--close:calc(var(--close-l) * var(--close-l) * (3 - 2 * var(--close-l))); --stack-l:clamp(0,calc((var(--p,0) - .60) / .16),1);--stack:calc(var(--stack-l) * var(--stack-l) * (3 - 2 * var(--stack-l))); --v:calc(1 - max(calc(var(--scroll) * 2 - 1),calc(1 - var(--scroll) * 2)))} .pbz-chat{padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .pbz-hd{display:flex;align-items:center;justify-content:space-between;gap:12px} .pbz-lb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)} .pbz-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--red)} .pbz-live i{width:6px;height:6px;border-radius:99px;background:var(--red);animation:pbzp 1.1s ease-in-out infinite} /* le libellé bascule quand la seconde session prend le dessus */ .pbz-slb{position:relative;display:inline-grid} .pbz-slb>span{grid-area:1/1} .pbz-slb .s1{opacity:calc(1 - var(--stack))} .pbz-slb .s2{opacity:var(--stack)} @keyframes pbzp{0%,100%{box-shadow:0 0 0 0 var(--red-soft)}50%{box-shadow:0 0 0 5px var(--red-soft)}} /* la pile : les deux sessions occupent la même case, l'une devant l'autre */ .pbz-stack{position:relative;margin-top:13px;height:calc(var(--seen) * var(--row) + 92px);perspective:900px} /* le découpage : l'entrée de la session 2 ne peut plus déborder sur le pied. .pbz-ghost est frère de ce conteneur, donc il reste visible en dehors. */ .pbz-clip{position:absolute;inset:0;overflow:hidden;border-radius:14px} .pbz-sess{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden} /* session 1 : au premier plan, puis elle recule derrière la suivante */ .pbz-s1{z-index:2;transform-origin:50% 0; transform:translateY(calc(var(--close) * -10px)) scale(calc(1 - var(--close) * .06)); opacity:calc(1 - var(--close) * .52)} /* session 2 : elle monte de peu, en décélérant, avec un léger dépassement avant de se poser — le mouvement n'est pas linéaire. q = 1 − avancement ; q² donne la décélération, s·q le dépassement. */ .pbz-s2{z-index:3; --q:calc(1 - var(--stack)); --over:calc(var(--stack) * var(--q) * 3); transform:translateY(calc(var(--q) * var(--q) * 26% - var(--over) * 3.2%)) scale(calc(1 + var(--q) * var(--q) * .02)); opacity:min(calc(var(--stack) * 7),1); border-color:color-mix(in srgb,var(--red) calc(var(--stack) * 32%),var(--line)); box-shadow:0 calc(-10px - var(--q) * 12px) calc(28px + var(--q) * 16px) -18px rgba(0,0,0,.3),var(--shadow-sm)} .pbz-shd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)} .pbz-shd b{font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:-.01em} .pbz-tag{white-space:nowrap;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:3px 8px;border-radius:99px;background:var(--card-2);border:1px solid var(--line-2); opacity:var(--close)} .pbz-tag-red{color:var(--red);background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 26%,transparent);opacity:1} /* la fenêtre de messages */ /* la jauge : c'est elle qui déclenche la fin de session */ .pbz-gauge{margin-top:9px;display:flex;flex-direction:column;gap:5px} .pbz-gl{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:color-mix(in srgb,var(--red) calc(var(--full) * 100%),var(--ink-3))} .pbz-gl b{font-size:10px} .pbz-gauge i{display:block;height:4px;border-radius:99px;background:var(--bg-3);overflow:hidden} .pbz-gauge em{display:block;height:100%;border-radius:99px;background:var(--red); width:calc(clamp(0,calc((var(--p,0) - .04) / .46),1) * 100%); box-shadow:0 0 0 calc(var(--full) * 3px) var(--red-soft)} .pbz-win{position:relative;flex:1;margin-top:10px;overflow:hidden; mask-image:linear-gradient(180deg,transparent 0,#000 8px,#000 calc(100% - 16px),transparent 100%)} .pbz-track{display:flex;flex-direction:column;padding-top:8px; transform:translateY(calc(var(--scroll) * -1 * (var(--n) - var(--seen)) * var(--row))) scaleY(calc(1 + var(--v) * .05)); filter:blur(calc(var(--v) * 1.9px))} .pbz-track2{display:flex;flex-direction:column;padding-top:8px} .pbz-s2 .pbz-win{margin-top:29px} /* le fil : agent à gauche, utilisateur à droite */ .pbz-r{display:flex;height:var(--row);align-items:center;padding-bottom:7px;box-sizing:border-box} .pbz-a{justify-content:flex-start} .pbz-u{justify-content:flex-end} .pbz-b{display:flex;align-items:center;gap:9px;max-width:100%;padding:7px 12px;border-radius:12px;background:var(--card-2);border:1px solid var(--line-2);font-family:var(--mono);font-size:10.5px;line-height:1.3;color:var(--ink-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .pbz-a .pbz-b{border-bottom-left-radius:4px} .pbz-u .pbz-b{border-bottom-right-radius:4px;background:var(--bg-3);color:var(--ink-2)} .pbz-key{border-color:color-mix(in srgb,var(--red) 36%,var(--line));background:var(--red-soft);color:var(--ink)} .pbz-key em{font-style:normal;flex:none;font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)} /* le marqueur : la décision est derrière, dans la session close */ .pbz-ghost{position:absolute;left:12px;right:12px;bottom:-11px;z-index:4;display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:11px;background:var(--bg-2);border:1px dashed color-mix(in srgb,var(--red) 42%,var(--line));font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3); --g-l:clamp(0,calc((var(--p,0) - .78) / .10),1);--g:calc(var(--g-l) * var(--g-l) * (3 - 2 * var(--g-l))); opacity:var(--g);transform:translateY(calc((1 - var(--g)) * 8px))} .pbz-ghost b{color:var(--red);text-decoration:line-through} .pbz-ft{margin-top:22px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:12px} .pbz-cnt{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .pbz-lost{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--red); opacity:clamp(0,calc((var(--p,0) - .80) / .10),1)} /* colonne de droite : contenu permanent, révélé une fois */ .pbz-intro{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)} .pbz-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px} .pbz-list li{display:flex;align-items:center;gap:13px;font-family:var(--disp);font-size:clamp(15px,1.4vw,18.5px);font-weight:600;letter-spacing:-.014em;color:var(--ink)} .pbz-q{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--red-soft);color:var(--red);font-family:var(--mono);font-size:13px;font-weight:600} .pbz-out{margin:clamp(22px,2.6vw,32px) 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--ink-2)} .pbz-out b{color:var(--red);font-weight:700} @media(max-width:1120px){ /* la rangée accueille deux lignes : la phrase se plie au lieu d'être coupée */ .pbz{--row:46px} .pbz-b{white-space:normal;text-overflow:clip;overflow:visible;align-items:flex-start; font-size:9.8px;line-height:1.34;padding:6px 10px;gap:7px} .pbz-key em{padding-top:1px} } @media(prefers-reduced-motion:reduce){.pbz-track{filter:none}} /* ── cadrer · publier · livrer ────────────────────────────────────────── Une scène, trois états QUI SE REMPLACENT dans le même cadre : à chaque instant on ne lit que ce qui se passe. L'état sortant recule et monte, l'état entrant arrive par le bas en décélérant. Le fil des trois temps en tête donne le repère. */ .pin-viz.cpl{position:relative;display:flex;flex-direction:column;gap:16px; /* quatre actes, avec un recouvrement court pour chaque transition */ --a1-l:clamp(0,calc((var(--p,0) - .02) / .16),1);--a1:calc(var(--a1-l) * var(--a1-l) * (3 - 2 * var(--a1-l))); --o1-l:clamp(0,calc((var(--p,0) - .19) / .04),1);--o1:calc(var(--o1-l) * var(--o1-l) * (3 - 2 * var(--o1-l))); --a2-l:clamp(0,calc((var(--p,0) - .21) / .17),1);--a2:calc(var(--a2-l) * var(--a2-l) * (3 - 2 * var(--a2-l))); --o2-l:clamp(0,calc((var(--p,0) - .40) / .04),1);--o2:calc(var(--o2-l) * var(--o2-l) * (3 - 2 * var(--o2-l))); /* produire : le temps le plus long — on doit voir l'orchestration */ --a3-l:clamp(0,calc((var(--p,0) - .42) / .36),1);--a3:calc(var(--a3-l) * var(--a3-l) * (3 - 2 * var(--a3-l))); --o3-l:clamp(0,calc((var(--p,0) - .80) / .04),1);--o3:calc(var(--o3-l) * var(--o3-l) * (3 - 2 * var(--o3-l))); --a4-l:clamp(0,calc((var(--p,0) - .82) / .17),1);--a4:calc(var(--a4-l) * var(--a4-l) * (3 - 2 * var(--a4-l)))} /* le fil des trois temps */ .cpl-phase{display:flex;align-items:center} .cpl-ph{position:relative;display:inline-flex;align-items:center;gap:8px;padding-right:clamp(14px,2vw,26px);margin-right:clamp(14px,2vw,26px);font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:color-mix(in srgb,var(--ink) calc(var(--on,0) * 100%),var(--ink-3)); opacity:calc(.42 + var(--on,0) * .58)} .cpl-ph:not(:last-child)::after{content:'';position:absolute;right:0;top:50%;width:clamp(14px,2vw,26px);height:1px;background:var(--line)} .cpl-ph b{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:10px; background:color-mix(in srgb,var(--red) calc(10% + var(--on,0) * 90%),var(--bg-3)); color:color-mix(in srgb,#fff calc(var(--on,0) * 100%),var(--ink-3))} .cpl-ph1{--on:calc(1 - var(--o1))} .cpl-ph2{--on:calc(var(--o1) - var(--o2))} .cpl-ph3{--on:calc(var(--o2) - var(--o3))} .cpl-ph4{--on:var(--o3)} /* la scène : hauteur fixe, les états s'y superposent */ .cpl-stage{position:relative;height:clamp(310px,32vw,376px)} .cpl-act{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px} /* l'état courant est net et en place ; le précédent recule, le suivant attend en bas. La décélération vient de q² (q = ce qui reste à parcourir). */ .cpl-a1{--in:1;--out:var(--o1)} .cpl-a2{--in:var(--o1);--out:var(--o2)} .cpl-a3{--in:var(--o2);--out:var(--o3)} .cpl-a4{--in:var(--o3);--out:0} .cpl-act{--q:calc(1 - var(--in)); opacity:calc(var(--in) * (1 - var(--out))); transform:translateY(calc(var(--q) * var(--q) * 46px - var(--out) * var(--out) * 30px)) scale(calc(1 - var(--q) * var(--q) * .04 - var(--out) * .05)); pointer-events:none} /* la carte du plan */ .cpl-card{position:relative;padding:18px 20px 16px;border-radius:16px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) 14%,var(--line));box-shadow:var(--shadow)} .cpl-chd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)} .cpl-chd b{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:-.016em} .cpl-badge{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:3px 9px;border-radius:99px;background:var(--card-2);border:1px solid var(--line-2);white-space:nowrap} .cpl-badge-red{color:var(--red);background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 26%,transparent)} /* état 1 : les lignes s'écrivent, révélées par un volet */ .cpl-rows{margin-top:13px;display:flex;flex-direction:column;gap:7px} .cpl-r{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:baseline; --t:clamp(0,calc((var(--a1) - var(--k) * .15) / .3),1); clip-path:inset(0 calc((1 - var(--t)) * 100%) 0 0)} .cpl-r em{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)} .cpl-r i{font-style:normal;font-size:12.5px;color:var(--ink-2)} .cpl-open em,.cpl-open i{color:var(--ink-3)} .cpl-foot{display:block;margin-top:13px;padding-top:11px;border-top:1px solid var(--line);font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} /* état 2 : le point tranché, le sceau, la décomposition */ .cpl-sealed{border-color:color-mix(in srgb,var(--red) 32%,var(--line))} .cpl-settle{margin:14px 0 0;display:flex;align-items:center;gap:11px;font-family:var(--disp);font-size:clamp(15px,1.4vw,18px);font-weight:600;letter-spacing:-.014em; --t:clamp(0,calc(var(--a2) / .22),1); opacity:var(--t);transform:translateX(calc((1 - var(--t)) * -12px))} .cpl-settle b{flex:none;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red);padding:4px 9px;border-radius:99px;background:var(--red-soft)} .cpl-seal{position:absolute;right:20px;bottom:16px;width:46px;height:46px;border-radius:11px;border:2px solid var(--red); --d-l:clamp(0,calc((var(--a2) - .22) / .16),1);--d:calc(var(--d-l) * var(--d-l) * (3 - 2 * var(--d-l))); opacity:min(calc(var(--d) * 5),1); transform:rotate(-13deg) scale(calc(2.5 - var(--d) * 1.5))} .cpl-seal::before{content:'';position:absolute;left:10px;top:21px;width:17px;height:9px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg); opacity:clamp(0,calc((var(--d) - .6) * 3),1)} .cpl-lots{display:flex;justify-content:center;gap:11px;margin-top:4px} .cpl-l{width:42px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--card);border:1px solid color-mix(in srgb,var(--red) 30%,var(--line));box-shadow:var(--shadow-sm);font-family:var(--mono);font-size:11px;font-weight:600;color:var(--red); --t:clamp(0,calc((var(--a2) - .44 - var(--k) * .1) / .3),1); opacity:min(calc(var(--t) * 6),1); transform:translateY(calc((1 - var(--t)) * (1 - var(--t)) * -42px)) scale(calc(.82 + var(--t) * .18))} .cpl-note{display:block;text-align:center;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3); opacity:clamp(0,calc((var(--a2) - .76) / .16),1)} /* état 3 · produire : on choisit le mode, les lots s'exécutent. Le curseur passe de « manuel » à « assisté » : c'est un choix de production, pas deux issues différentes. */ .cpl-mode{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border-radius:13px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .cpl-mlb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} /* le curseur bascule une fois, en décélérant */ .cpl-a3{--sw-l:clamp(0,calc((var(--a3) - .20) / .11),1);--sw:calc(var(--sw-l) * var(--sw-l) * (3 - 2 * var(--sw-l)))} .cpl-switch{position:relative;display:flex;gap:0;padding:3px;border-radius:99px;background:var(--bg-3)} .cpl-knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:99px;background:var(--red); transform:translateX(calc(var(--sw) * 100%))} .cpl-opt{position:relative;z-index:2;min-width:74px;text-align:center;padding:6px 13px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase} .cpl-o1{color:color-mix(in srgb,#fff calc((1 - var(--sw)) * 100%),var(--ink-3))} .cpl-o2{color:color-mix(in srgb,#fff calc(var(--sw) * 100%),var(--ink-3))} .cpl-mdesc{position:relative;margin:0;display:grid;min-height:38px} .cpl-mdesc>span{grid-area:1/1;font-size:12.5px;line-height:1.45;color:var(--ink-2)} .cpl-mdesc .md1{opacity:calc(1 - var(--sw))} .cpl-mdesc .md2{opacity:var(--sw)} .cpl-mdesc b{font-weight:700;color:var(--red)} /* les lots s'exécutent : la barre se remplit, la preuve s'attache */ .cpl-runs{flex:1;display:flex;flex-direction:column;gap:8px;justify-content:center} /* l'agent principal, en tête : c'est lui qui découpe et confie */ .cpl-lead{display:flex;align-items:baseline;gap:10px;padding-bottom:9px;margin-bottom:2px;border-bottom:1px solid var(--line); --t-l:clamp(0,calc((var(--a3) - .32) / .10),1);--t:calc(var(--t-l) * var(--t-l) * (3 - 2 * var(--t-l))); opacity:var(--t);transform:translateY(calc((1 - var(--t)) * -7px))} .cpl-lead b{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)} .cpl-lead span{font-size:12px;color:var(--ink-3)} /* chaque lot est confié à un agent d'exécution borné */ .cpl-run{display:grid;grid-template-columns:28px 62px 1fr auto;gap:11px;align-items:center; --t:clamp(0,calc((var(--a3) - .40 - var(--k) * .09) / .30),1); opacity:calc(.34 + min(var(--t) * 4,1) * .66)} .cpl-ag{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3); opacity:calc(var(--sw) * min(var(--t) * 5,1));transform:translateX(calc((1 - min(var(--t) * 5,1)) * -6px))} .cpl-run b{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--red)} .cpl-run i{display:block;height:4px;border-radius:99px;background:var(--bg-3);overflow:hidden;position:relative} .cpl-run i::after{content:'';position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--red);width:calc(var(--t) * 100%)} .cpl-run em{font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red); opacity:clamp(0,calc((var(--t) - .82) * 6),1)} /* état 4 · livrer : les deux modes convergent vers une seule livraison */ .cpl-conv{position:relative;height:26px;display:block} .cpl-conv i{position:absolute;top:0;bottom:0;width:1px;background:var(--line)} .cpl-conv i:nth-child(1){left:26%;transform-origin:bottom; transform:skewX(calc((1 - var(--a4)) * 0deg + 13deg)) scaleY(clamp(0,calc(var(--a4) / .4),1))} .cpl-conv i:nth-child(2){right:26%;transform-origin:bottom; transform:skewX(-13deg) scaleY(clamp(0,calc((var(--a4) - .08) / .4),1))} .cpl-deliv{flex:1;padding:17px 19px;border-radius:16px;background:var(--card);box-shadow:var(--shadow); border:1px solid color-mix(in srgb,var(--red) calc(14% + min(var(--a4) * 2,1) * 24%),var(--line)); transform:translateY(calc((1 - clamp(0,calc(var(--a4) / .5),1)) * (1 - clamp(0,calc(var(--a4) / .5),1)) * 22px))} .cpl-dl{margin-top:13px;display:grid;grid-template-columns:1fr 1fr;gap:11px} .cpl-d{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border-radius:11px;background:var(--card-2);border:1px solid var(--line-2); --t:clamp(0,calc((var(--a4) - .28 - var(--k) * .09) / .34),1); opacity:var(--t);transform:translateY(calc((1 - var(--t)) * (1 - var(--t)) * 14px))} .cpl-d em{font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)} .cpl-d i{font-style:normal;font-size:12px;color:var(--ink-2)} @media(max-width:720px){ .cpl-stage{height:auto;display:flex;flex-direction:column;gap:14px} .cpl-act{position:static;opacity:1;transform:none} .cpl-r{grid-template-columns:1fr;gap:2px} .cpl-dl{grid-template-columns:1fr} .cpl-run{grid-template-columns:24px 50px 1fr auto;gap:8px} .cpl-conv{display:none} .cpl-opt{min-width:62px;padding:6px 9px} .cpl-ph{font-size:8.5px;padding-right:10px;margin-right:10px} .cpl-ph:not(:last-child)::after{width:10px} } /* ── continuité : le plan survit au changement de moteur ──────────────────── Trois actes sur --p : un plan avance puis s'interrompt · l'historique tombe et l'état du plan se distille · un autre moteur reprend au même pas. */ .ctz{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(150px,.82fr) minmax(280px,1.5fr) minmax(150px,.82fr);gap:clamp(18px,2.6vw,40px);align-items:center; --k1-l:clamp(0,calc((var(--p,0) - .02) / .14),1);--k1:calc(var(--k1-l) * var(--k1-l) * (3 - 2 * var(--k1-l))); --kc-l:clamp(0,calc((var(--p,0) - .18) / .08),1);--kc:calc(var(--kc-l) * var(--kc-l) * (3 - 2 * var(--kc-l))); --k2-l:clamp(0,calc((var(--p,0) - .26) / .26),1);--k2:calc(var(--k2-l) * var(--k2-l) * (3 - 2 * var(--k2-l))); --kf-l:clamp(0,calc((var(--p,0) - .56) / .12),1);--kf:calc(var(--kf-l) * var(--kf-l) * (3 - 2 * var(--kf-l))); --k3-l:clamp(0,calc((var(--p,0) - .66) / .18),1);--k3:calc(var(--k3-l) * var(--k3-l) * (3 - 2 * var(--k3-l)))} .ctz-side{display:flex;flex-direction:column;align-items:center;gap:10px} .ctz-lb{display:inline-flex;flex-direction:column;align-items:center;gap:8px;padding:13px 15px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:-.01em;transition:border-color .3s linear,box-shadow .3s linear} .ctz-lb img{width:24px;height:24px;object-fit:contain} .ctz-lb img.oai{filter:invert(1)} #app-root.theme-dark .ctz-lb img.oai{filter:none} .ctz-from .ctz-lb{--f:calc(min(var(--k1) * 3,1) * (1 - var(--kc) * .8)); border-color:color-mix(in srgb,var(--red) calc(var(--f) * 34%),var(--line));box-shadow:0 0 0 calc(var(--f) * 4px) var(--red-soft),var(--shadow-sm)} .ctz-to .ctz-lb{--f:min(var(--k3) * 3,1); border-color:color-mix(in srgb,var(--red) calc(var(--f) * 34%),var(--line));box-shadow:0 0 0 calc(var(--f) * 4px) var(--red-soft),var(--shadow-sm)} /* le plan, visible des deux côtés : c'est lui l'objet de la continuité */ .ctz-plan{width:100%;padding:12px 13px;border-radius:13px;background:var(--card);border:1px solid var(--line)} .ctz-pid{display:block;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)} .ctz-steps{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:7px} .ctz-steps li{display:grid;grid-template-columns:9px auto 1fr;gap:7px;align-items:baseline} .ctz-steps i{width:7px;height:7px;border-radius:99px;border:1.4px solid var(--line-2);align-self:center} .ctz-steps b{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-3)} .ctz-steps span{font-size:11px;line-height:1.35;color:var(--ink-3)} .ctz-steps em{grid-column:2 / -1;font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red)} /* côté départ : L1 fait, L2 en cours puis figé par l'interruption */ .ctz-from .st-done{opacity:calc(.62 + min(var(--k1) * 4,1) * .38)} .ctz-from .st-done i{background:var(--ink-3);border-color:var(--ink-3)} .ctz-from .st-live{--t-l:clamp(0,calc((var(--k1) - .35) / .5),1);--t:calc(var(--t-l) * var(--t-l) * (3 - 2 * var(--t-l)));opacity:calc(.62 + var(--t) * .38)} .ctz-from .st-live i{background:var(--red);border-color:var(--red); box-shadow:0 0 0 calc((1 - var(--kc)) * 4px) var(--red-soft)} .ctz-from .st-live b,.ctz-from .st-live span{color:var(--ink-2)} .ctz-from .ctz-plan{opacity:calc(1 - var(--kc) * .28)} .ctz-cut{color:var(--ink-3);opacity:var(--kc)} /* côté arrivée : le même plan, repris au pas exact */ .ctz-to .ctz-plan{opacity:calc(.55 + min(var(--k3) * 2.4,1) * .45)} .ctz-to .st-done{opacity:calc(.62 + min(var(--k3) * 3,1) * .38)} .ctz-to .st-done i{background:var(--ink-3);border-color:var(--ink-3)} .ctz-to .st-here{--t-l:clamp(0,calc((var(--k3) - .30) / .5),1);--t:calc(var(--t-l) * var(--t-l) * (3 - 2 * var(--t-l)));opacity:calc(.62 + var(--t) * .38)} .ctz-to .st-here i{background:var(--red);border-color:var(--red);box-shadow:0 0 0 calc(var(--t) * 4px) var(--red-soft)} .ctz-to .st-here b,.ctz-to .st-here span{color:var(--ink-2)} .ctz-to .st-here em{opacity:clamp(0,calc((var(--k3) - .5) * 2.6),1)} .ctz-st{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:center;line-height:1.4;min-height:13px} .ctz-ok{color:var(--red);opacity:clamp(0,calc((var(--k3) - .45) * 2.4),1)} /* le milieu : l'historique tombe, l'état du plan reste */ .ctz-mid{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding-top:62px} .ctz-chat{position:absolute;left:0;right:0;top:0} .ctz-chat{display:flex;flex-direction:column;gap:5px;height:56px;overflow:hidden; opacity:calc(min(var(--k1) * 3,1) * (1 - var(--kc)))} .ctz-chat>span{height:8px;border-radius:99px;background:var(--card-2);border:1px solid var(--line-2); width:calc(52% + var(--k) * 9%);align-self:flex-start} .ctz-chat>span:nth-child(even){align-self:flex-end} .ctz-drop{position:absolute;left:50%;top:28px;transform:translate(-50%,-50%);z-index:2;white-space:nowrap;padding:4px 11px;border-radius:99px;background:var(--bg-2);font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap; opacity:calc(min(var(--kc) * 2.6,1) * (1 - clamp(0,calc((var(--p,0) - .50) / .08),1)))} .ctz-drop::after{content:'';position:absolute;left:9px;right:9px;top:50%;height:1px;background:var(--ink-3);opacity:.5} .ctz-pack{position:relative;padding:17px 19px;border-radius:16px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) calc(12% + min(var(--k2) * 2,1) * 24%),var(--line));box-shadow:0 0 0 calc(min(var(--k2) * 2,1) * 4px) var(--red-soft),var(--shadow); --a:min(var(--k2) * 3,1); opacity:var(--a);transform:scale(calc(.98 + var(--a) * .02))} .ctz-pk{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red); opacity:min(calc(var(--k2) * 5),1)} .ctz-items{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px} .ctz-items li{display:flex;flex-direction:column;gap:3px; --t:clamp(0,calc((var(--k2) - var(--k) * .13) / .38),1); opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 7px))} .ctz-items em{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .ctz-items b{font-size:12.5px;font-weight:500;line-height:1.4;color:var(--ink-2)} .ctz-next{grid-column:1 / -1;padding-top:9px;border-top:1px solid var(--line)} .ctz-next em{color:var(--red)} .ctz-next b{color:var(--ink);font-weight:600} .ctz-not{display:block;margin-top:12px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3); opacity:clamp(0,calc((var(--k2) - .6) * 2.4),1)} /* le paquet quitte la carte vers le moteur suivant */ .ctz-fly{position:absolute;right:0;top:50%;width:10px;height:10px;border-radius:99px;background:var(--red);box-shadow:0 0 0 5px var(--red-soft); opacity:calc(var(--kf) * (1 - var(--kf)) * 4); transform:translate(calc(var(--kf) * (clamp(18px,2.6vw,40px) + 50%)),-50%)} /* ── gouvernance : la barrière de vérification ─────────────────────────── */ .gvz{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:.82fr 1fr .95fr;gap:clamp(18px,2.6vw,40px);align-items:center; --g1-l:clamp(0,calc((var(--p,0) - .06) / .20),1);--g1:calc(var(--g1-l) * var(--g1-l) * (3 - 2 * var(--g1-l))); --g2-l:clamp(0,calc((var(--p,0) - .24) / .32),1);--g2:calc(var(--g2-l) * var(--g2-l) * (3 - 2 * var(--g2-l))); --g3-l:clamp(0,calc((var(--p,0) - .56) / .24),1);--g3:calc(var(--g3-l) * var(--g3-l) * (3 - 2 * var(--g3-l)))} /* la carte de sortie avance vers la barrière et se fait REPOUSSER : le mouvement est celui de la carte, pas d'un jeton. */ .gvz-in{position:relative;overflow:hidden;padding:16px 18px;border-radius:15px;background:var(--card);box-shadow:var(--shadow-sm); --push:calc(2 * min(clamp(0,calc(var(--g1) / .9),1),1 - clamp(0,calc(var(--g1) / .9),1))); border:1px solid color-mix(in srgb,var(--red) calc(var(--push) * 40%),var(--line)); transform:translateX(calc(var(--push) * 14px))} .gvz-in::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);transform:scaleY(clamp(0,calc(var(--g1) / .3),1))} .gvz-lb{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)} .gvz-claim{margin:11px 0 0;font-family:var(--disp);font-size:clamp(15px,1.4vw,18px);font-weight:600;letter-spacing:-.014em;line-height:1.35;color:var(--ink)} .gvz-diff{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-3)} .gvz-gate{position:relative;overflow:hidden;padding:18px 20px;border-radius:16px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) 16%,var(--line));box-shadow:var(--shadow)} .gvz-gate::after{content:'';position:absolute;left:0;top:0;height:2px;background:var(--red);width:calc(clamp(0,calc(var(--g2) / .92),1) * 100%)} .gvz-gk{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red)} .gvz-checks{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} .gvz-checks li{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--ink-2); --s:clamp(0,calc((var(--g2) - var(--k) * .095) / .34),1)} .gvz-checks i{flex:none;width:15px;height:15px;border-radius:5px;border:1.5px solid var(--line);position:relative; border-color:color-mix(in srgb,var(--red) calc(var(--s) * 100%),var(--line))} .gvz-checks i::after{content:'';position:absolute;left:3px;top:6.5px;width:7px;height:3.4px;border-left:1.6px solid var(--red);border-bottom:1.6px solid var(--red);transform:rotate(-45deg) scale(var(--s));transform-origin:left center} /* une fois vérifiée, elle se dépose chez l'autorité humaine */ .gvz-out{position:relative;overflow:hidden;padding:16px 18px;border-radius:15px;background:var(--card);box-shadow:var(--shadow-sm); --r:min(var(--g3) * 2,1); border:1px solid color-mix(in srgb,var(--red) calc(var(--r) * 34%),var(--line)); transform:translateX(calc((1 - var(--r)) * -12px)) scale(calc(.98 + var(--r) * .02))} .gvz-out::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);transform:scaleY(clamp(0,calc(var(--g3) / .3),1))} .gvz-hum{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red)} .gvz-ask{margin:11px 0 0;font-family:var(--disp);font-size:clamp(15px,1.4vw,18px);font-weight:700;letter-spacing:-.016em} .gvz-btns{margin-top:14px;display:flex;gap:9px;flex-wrap:wrap} .gvz-b{padding:9px 15px;border-radius:10px;font-family:var(--sans);font-size:13px;font-weight:600;border:1px solid transparent} .gvz-b1{background:var(--red);color:#fff} .gvz-b2{border-color:var(--line);color:var(--ink-2)} .gvz-note{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} /* ── orchestration : le plan se scinde, les lots fusionnent ────────────── Cinq actes, aucun jeton. Les trois lots NAISSENT de la carte du plan (scission), travaillent, puis CONVERGENT et fusionnent en une seule carte qui entre dans le broker. Le décalage se fait en largeur de carte : un pourcentage dans translateX vaut la largeur de l'élément, donc la largeur d'une colonne — rien à mesurer. */ .pin-viz.dag{ --a1-l:clamp(0,calc((var(--p,0) - .02) / .14),1);--a1:calc(var(--a1-l) * var(--a1-l) * (3 - 2 * var(--a1-l))); --a2-l:clamp(0,calc((var(--p,0) - .18) / .20),1);--a2:calc(var(--a2-l) * var(--a2-l) * (3 - 2 * var(--a2-l))); --a3-l:clamp(0,calc((var(--p,0) - .42) / .18),1);--a3:calc(var(--a3-l) * var(--a3-l) * (3 - 2 * var(--a3-l))); --a4-l:clamp(0,calc((var(--p,0) - .62) / .12),1);--a4:calc(var(--a4-l) * var(--a4-l) * (3 - 2 * var(--a4-l))); --a5-l:clamp(0,calc((var(--p,0) - .76) / .22),1);--a5:calc(var(--a5-l) * var(--a5-l) * (3 - 2 * var(--a5-l))); --gx:clamp(9px,1.2vw,15px); position:relative;display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)} /* le plan : source unique, toujours présente */ .dag-src{align-self:center;display:inline-flex;align-items:center;gap:11px;padding:11px 17px;border-radius:99px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) calc(16% + min(var(--a1) * 3,1) * 20%),var(--line));box-shadow:var(--shadow-sm)} .dag-sk{font-family:var(--disp);font-size:13.5px;font-weight:700;letter-spacing:-.012em} .dag-src em{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red)} .dag-stage{position:relative} .dag-lots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(9px,1.2vw,15px)} /* ACTE 1 · la carte naît au centre, sous le plan, et gagne sa colonne. ACTE 3 · elle revient au centre et disparaît dans la carte fusionnée. */ .dag-t{position:relative;display:flex;flex-direction:column;gap:7px;padding:13px 14px;border-radius:13px;background:var(--card); --born:clamp(0,calc((var(--a1) - var(--ox2) * .1) / .8),1); --work:clamp(0,calc((var(--a2) - var(--k) * .16) / .52),1); --f:min(var(--work) * 3,1); --shift:calc(var(--ox) * -1 * (1 - var(--born)) * (100% + var(--gx))); --back:calc(var(--ox) * -1 * var(--a3) * (100% + var(--gx))); border:1px solid color-mix(in srgb,var(--red) calc(var(--f) * 30%),var(--line)); box-shadow:0 0 0 calc(var(--f) * 4px) var(--red-soft),var(--shadow-sm); transform:translateX(calc(var(--shift) + var(--back))) scale(calc(.86 + var(--born) * .14 - var(--a3) * .1)); opacity:calc(min(var(--born) * 4,1) * (1 - clamp(0,calc((var(--a3) - .18) / .62),1)))} .dag-t:nth-child(1){--ox:-1;--ox2:1} .dag-t:nth-child(2){--ox:0;--ox2:0} .dag-t:nth-child(3){--ox:1;--ox2:1} .dag-t .dag-w i{opacity:calc(.45 + var(--f) * .55)} .dag-th{display:flex;align-items:baseline;gap:9px} .dag-th b{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--red)} .dag-th em{font-style:normal;font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:-.01em} .dag-sc{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:10px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dag-sc i{font-style:normal;flex:none;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:8.5px;padding:3px 6px;border-radius:5px;background:var(--card-2);border:1px solid var(--line-2)} .dag-w i{color:var(--red);border-color:color-mix(in srgb,var(--red) 26%,transparent);background:var(--red-soft)} .dag-wt{margin-top:2px;padding-top:8px;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} /* la carte fusionnée : elle prend forme là où les trois se rejoignent, puis descend dans le broker */ .dag-merge{position:absolute;left:50%;top:50%;width:min(66%,340px); display:flex;flex-direction:column;gap:5px;padding:15px 18px;border-radius:14px;background:var(--card); border:1px solid color-mix(in srgb,var(--red) 34%,var(--line)); --in-l:clamp(0,calc((var(--a3) - .22) / .5),1);--in:calc(var(--in-l) * var(--in-l) * (3 - 2 * var(--in-l))); box-shadow:0 0 0 calc(var(--in) * 5px) var(--red-soft),var(--shadow); transform:translate(-50%,-50%) translateY(calc(var(--a4) * 44px)) scale(calc(.9 + var(--in) * .1)); opacity:calc(min(var(--in) * 1.8,1) * (1 - max(0,var(--a4) - .55) * 2.2))} .dag-mk{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red)} .dag-merge b{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:-.014em} .dag-merge em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} /* ACTE 4 · le passage unique reçoit la carte */ .dag-brk{position:relative;padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) calc(14% + min(var(--a4) * 2,1) * 24%),var(--line));box-shadow:0 0 0 calc(min(var(--a4) * 2,1) * 5px) var(--red-soft),var(--shadow)} .dag-bk{font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:-.014em} .dag-bd{display:block;margin-top:7px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);line-height:1.55} .dag-den{margin-top:13px;display:flex;gap:8px;flex-wrap:wrap} .dag-dn{position:relative;padding:6px 12px;border-radius:8px;background:var(--card-2);border:1px solid var(--line-2);font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ink-3); --s:clamp(0,calc((var(--a4) - .22 - var(--k) * .12) / .3),1)} .dag-dn::after{content:'';position:absolute;left:8px;right:8px;top:50%;height:1.4px;background:var(--red);transform:scaleX(var(--s));transform-origin:left} /* ACTE 5 · une seule trajectoire : les commits, dans l'ordre du DAG */ .dag-chain{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(9px,1.2vw,15px);align-items:center;padding-top:6px} .dag-cline{position:absolute;left:8%;right:8%;top:calc(50% + 3px);height:1px;background:var(--line)} .dag-cline::after{content:'';position:absolute;inset:0 auto 0 0;height:1px;background:var(--red);width:calc(min(var(--a5) * 1.25,1) * 100%)} .dag-c{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;justify-self:center;padding:8px 13px;border-radius:11px;background:var(--card);box-shadow:var(--shadow-sm); --s:clamp(0,calc((var(--a5) - var(--k) * .26) / .3),1); --f:min(var(--s) * 3,1); border:1px solid color-mix(in srgb,var(--red) calc(10% + var(--f) * 30%),var(--line)); box-shadow:0 0 0 calc(var(--f) * 4px) var(--red-soft),var(--shadow-sm); transform:translateY(calc((1 - var(--f)) * 5px))} .dag-c b{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--red);opacity:calc(.4 + var(--f) * .6)} .dag-c em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap} /* ── manuel ou assisté : la file se vide, pas un curseur qui glisse ────── Deux passages dans une boucle. Manuel : un seul prompt part, à votre geste, les autres attendent. Assisté : la file se vide dans le budget, et ce qui sort du cadre est détourné vers votre veto. La livraison ne change pas. */ .auz{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(26px,4vw,64px);align-items:center; --m-l:clamp(0,calc((var(--p,0) - .46) / .06),1);--m:calc(var(--m-l) * var(--m-l) * (3 - 2 * var(--m-l))); --wait:calc(clamp(0,calc((var(--p,0) - .08) / .05),1) * (1 - clamp(0,calc((var(--p,0) - .24) / .05),1))); --g1m-l:clamp(0,calc((var(--p,0) - .26) / .07),1);--g1m:calc(var(--g1m-l) * var(--g1m-l) * (3 - 2 * var(--g1m-l))); --g1a-l:clamp(0,calc((var(--p,0) - .56) / .06),1);--g1a:calc(var(--g1a-l) * var(--g1a-l) * (3 - 2 * var(--g1a-l))); --g2a-l:clamp(0,calc((var(--p,0) - .64) / .06),1);--g2a:calc(var(--g2a-l) * var(--g2a-l) * (3 - 2 * var(--g2a-l))); --g3a-l:clamp(0,calc((var(--p,0) - .72) / .07),1);--g3a:calc(var(--g3a-l) * var(--g3a-l) * (3 - 2 * var(--g3a-l))); --g4a-l:clamp(0,calc((var(--p,0) - .82) / .06),1);--g4a:calc(var(--g4a-l) * var(--g4a-l) * (3 - 2 * var(--g4a-l)))} .auz-side{display:flex;flex-direction:column;gap:18px;align-items:flex-start} .auz-seg{position:relative;display:inline-flex;padding:4px;border-radius:12px;background:var(--bg-3);border:1px solid var(--line-2)} .auz-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) 30%,var(--line));box-shadow:var(--shadow-sm); transform:translateX(calc(var(--m) * 100%))} .auz-o{position:relative;z-index:1;padding:8px 18px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap} .auz-o:nth-child(2){color:color-mix(in srgb,var(--red) calc((1 - var(--m)) * 100%),var(--ink-3))} .auz-o:nth-child(3){color:color-mix(in srgb,var(--red) calc(var(--m) * 100%),var(--ink-3))} .auz-notes{position:relative;min-height:62px;width:100%} .auz-n{position:absolute;inset:0;margin:0;font-family:var(--disp);font-size:clamp(16px,1.5vw,20px);font-weight:600;line-height:1.4;letter-spacing:-.016em;color:var(--ink);text-wrap:pretty} .auz-n1{opacity:calc(1 - var(--m))} .auz-n2{opacity:var(--m)} .auz-inv{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red);line-height:1.6} .auz-tray{padding:18px 20px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)} .auz-head{position:relative;display:flex;align-items:center;gap:12px;min-height:24px} .auz-hk{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)} .auz-budget{margin-left:auto;position:relative;width:clamp(66px,7vw,96px);height:5px;border-radius:99px;background:var(--bg-3);overflow:hidden; opacity:calc((.22 + var(--m) * .78) * (1 - var(--wait) * (1 - var(--m))))} .auz-budget i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--red); width:calc(100% - var(--m) * (var(--g1a) + var(--g2a) + var(--g3a) + var(--g4a)) * 21%)} .auz-bl{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3); opacity:calc((.3 + var(--m) * .7) * (1 - var(--wait) * (1 - var(--m))))} .auz-queue{position:relative;margin-top:15px;display:flex;flex-direction:column; --row:52px; min-height:calc(var(--row) * 4 + 24px)} .auz-it{position:relative;display:flex;align-items:baseline;gap:11px;border-radius:12px;background:var(--card-2);border:1px solid var(--line-2);overflow:hidden; --go:0; --k1:calc(1 - var(--go)); max-height:calc(var(--k1) * 52px); padding:calc(var(--k1) * 11px) 13px; margin-bottom:calc(var(--k1) * 8px); border-top-width:calc(var(--k1) * 1px);border-bottom-width:calc(var(--k1) * 1px); opacity:var(--k1); transform:translateY(calc(var(--go) * -14px)) scale(calc(1 - var(--go) * .03))} .auz-it:last-child{margin-bottom:0} .auz-it:nth-child(1){--go:max(calc((1 - var(--m)) * var(--g1m)),calc(var(--m) * var(--g1a)))} .auz-it:nth-child(2){--go:calc(var(--m) * var(--g2a))} .auz-it:nth-child(4){--go:calc(var(--m) * var(--g4a))} .auz-it b{flex:none;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--red)} .auz-it em{font-style:normal;font-size:12.5px;line-height:1.4;color:var(--ink-2)} /* le lot hors cadre ne part pas : il glisse vers votre veto */ .auz-flag{--d:calc(var(--m) * var(--g3a)); border-color:color-mix(in srgb,var(--red) calc(var(--d) * 42%),var(--line-2)); border-style:dashed; /* la ligne se RETIRE de la file : elle se rétrécit par la droite, son bord gauche restant sur l'axe de la pastille de veto, en dessous. Un décalage ne pouvait que la faire sortir, elle occupe déjà toute la largeur. */ margin-right:calc(var(--d) * 26px); box-shadow:0 0 0 calc(var(--d) * 4px) var(--red-soft)} /* rien ne part sans vous */ .auz-ask{position:absolute;right:0;top:50%;transform:translateY(-50%);padding:4px 11px;border-radius:99px;background:var(--red-soft);border:1px solid color-mix(in srgb,var(--red) 38%,transparent); font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red);white-space:nowrap; opacity:calc(var(--wait) * (1 - var(--m)))} .auz-foot{margin-top:15px;padding-top:13px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px} .auz-veto{flex:1} .auz-veto i{display:inline-block;font-style:normal;padding:5px 11px;border-radius:8px;background:var(--red-soft);border:1px dashed color-mix(in srgb,var(--red) 40%,transparent); font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--red); opacity:calc(var(--m) * clamp(0,calc((var(--g3a) - .2) / .5),1))} .auz-dots{display:flex;gap:6px} .auz-dots i{width:7px;height:7px;border-radius:99px;--f:0; background:color-mix(in srgb,var(--red) calc(var(--f) * 100%),transparent); border:1px solid color-mix(in srgb,var(--red) calc(var(--f) * 100%),var(--line-2))} .auz-dots i:nth-child(1){--f:max(calc((1 - var(--m)) * var(--g1m)),calc(var(--m) * var(--g1a)))} .auz-dots i:nth-child(2){--f:calc(var(--m) * var(--g2a))} .auz-dots i:nth-child(3){--f:calc(var(--m) * var(--g4a))} /* ── ancré dans le dépôt ───────────────────────────────────────────────── */ .dpz{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px); --e1-l:clamp(0,calc((var(--p,0) - .08) / .22),1);--e1:calc(var(--e1-l) * var(--e1-l) * (3 - 2 * var(--e1-l))); --e2-l:clamp(0,calc((var(--p,0) - .26) / .28),1);--e2:calc(var(--e2-l) * var(--e2-l) * (3 - 2 * var(--e2-l))); --e3-l:clamp(0,calc((var(--p,0) - .54) / .24),1);--e3:calc(var(--e3-l) * var(--e3-l) * (3 - 2 * var(--e3-l)))} .dpz-claim{padding:15px 17px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .dpz-k{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)} .dpz-claim p{position:relative;margin:9px 0 0;font-family:var(--disp);font-size:clamp(15px,1.4vw,18px);font-weight:600;letter-spacing:-.014em;line-height:1.35; opacity:calc(1 - var(--e3) * .45)} .dpz-claim p::after{content:'';position:absolute;left:0;top:53%;height:1.5px;width:calc(var(--e3) * 100%);background:var(--red)} /* surface code : toujours sombre, dans les deux thèmes — pas de --ink-inv, qui s'inverse et rendrait le texte clair illisible en thème sombre. */ .dpz-code{padding:14px 16px;border-radius:14px;background:#100f11;border:1px solid rgba(255,255,255,.1);overflow:hidden} .dpz-file{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:rgba(244,241,238,.45)} .dpz-ln{display:grid;grid-template-columns:34px 1fr;gap:11px;margin-top:8px;font-family:var(--mono);font-size:11px;line-height:1.55} .dpz-ln em{font-style:normal;color:rgba(244,241,238,.34)} .dpz-ln i{font-style:normal;color:rgba(244,241,238,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dpz-hit{position:relative} .dpz-hit i{color:#fff} .dpz-hit::before{content:'';position:absolute;left:-16px;top:-2px;bottom:-2px;width:2px;background:var(--red);transform:scaleY(clamp(0,calc((var(--e2) - .5) * 2.4),1));transform-origin:center} .dpz-verdict{display:flex;flex-direction:column;gap:6px;padding:15px 17px;border-radius:14px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) calc(min(var(--e3) * 2.2,1) * 32%),var(--line));box-shadow:0 0 0 calc(min(var(--e3) * 2.2,1) * 4px) var(--red-soft),var(--shadow-sm)} .dpz-v{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red)} .dpz-verdict b{font-size:14px;font-weight:600;letter-spacing:-.008em;line-height:1.4} .dpz-ev{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)} /* ── preuve : la réécriture est TENTÉE puis refusée ────────────────────── Plus de rail ni de puce. Les lignes s'inscrivent, une réécriture est tentée sur GOV-021 et recule, puis l'événement nouveau se relie à elle. */ .prz{position:relative;margin-top:clamp(40px,5vw,72px);padding-left:20px;display:flex;flex-direction:column;gap:11px; --e1-l:clamp(0,calc((var(--p,0) - .02) / .09),1);--e1:calc(var(--e1-l) * var(--e1-l) * (3 - 2 * var(--e1-l))); --e2-l:clamp(0,calc((var(--p,0) - .11) / .09),1);--e2:calc(var(--e2-l) * var(--e2-l) * (3 - 2 * var(--e2-l))); --e3-l:clamp(0,calc((var(--p,0) - .20) / .09),1);--e3:calc(var(--e3-l) * var(--e3-l) * (3 - 2 * var(--e3-l))); --try:calc(2 * min(clamp(0,calc((var(--p,0) - .34) / .18),1),1 - clamp(0,calc((var(--p,0) - .34) / .18),1))); --e4-l:clamp(0,calc((var(--p,0) - .58) / .11),1);--e4:calc(var(--e4-l) * var(--e4-l) * (3 - 2 * var(--e4-l))); --tie-l:clamp(0,calc((var(--p,0) - .70) / .14),1);--tie:calc(var(--tie-l) * var(--tie-l) * (3 - 2 * var(--tie-l)))} .prz-e{position:relative;display:grid;grid-template-columns:88px 92px 1fr auto;gap:clamp(10px,1.4vw,18px);align-items:baseline;padding:14px 17px;border-radius:13px;background:var(--card);box-shadow:var(--shadow-sm); --s:1; border:1px solid color-mix(in srgb,var(--red) calc(var(--s) * 12%),var(--line)); opacity:min(var(--s) * 3,1);transform:translateY(calc((1 - min(var(--s) * 3,1)) * 10px))} .prz-e:nth-child(1){--s:var(--e1)} .prz-e:nth-child(3){--s:var(--e3)} /* la tentative : la ligne tressaille, la rature avance puis recule */ .prz-e:nth-child(2){--s:var(--e2); border-color:color-mix(in srgb,var(--red) calc(var(--try) * 46%),var(--line)); transform:translateY(calc((1 - min(var(--e2) * 3,1)) * 10px)) translateX(calc(var(--try) * 6px))} .prz-strike{position:absolute;left:17px;top:50%;height:1.5px;background:var(--red);width:calc(var(--try) * (100% - 34px))} .prz-deny{position:absolute;right:17px;top:-9px;padding:3px 10px;border-radius:99px;background:var(--bg);border:1px solid color-mix(in srgb,var(--red) 38%,transparent); font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red);white-space:nowrap; opacity:min(calc(var(--try) * 2),1)} .prz-t{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--red)} .prz-e em{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .prz-e b{font-size:13.5px;font-weight:500;line-height:1.4;color:var(--ink-2)} .prz-e>i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-3)} /* le lien : l'ancien reste intact, le nouveau s'y rattache */ .prz-tie{position:absolute;left:2px;width:13px;top:37.5%;height:50%; border:1.5px solid var(--red);border-right:none;border-radius:6px 0 0 6px; opacity:var(--tie);transform:scaleX(var(--tie));transform-origin:right} .prz-res{--s:var(--e4);border-color:color-mix(in srgb,var(--red) calc(12% + var(--e4) * 26%),var(--line));box-shadow:0 0 0 calc(min(var(--e4) * 2,1) * 4px) var(--red-soft),var(--shadow-sm)} .prz-res b{color:var(--ink);font-weight:600} .prz-link{grid-column:3 / -1;margin-top:5px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--red); opacity:var(--tie)} /* ── local-first (épinglée) ────────────────────────────────────────────── */ .pin-viz.lcz{ --l1-l:clamp(0,calc((var(--p,0) - .06) / .20),1);--l1:calc(var(--l1-l) * var(--l1-l) * (3 - 2 * var(--l1-l))); --l2-l:clamp(0,calc((var(--p,0) - .22) / .32),1);--l2:calc(var(--l2-l) * var(--l2-l) * (3 - 2 * var(--l2-l))); --l3-l:clamp(0,calc((var(--p,0) - .58) / .26),1);--l3:calc(var(--l3-l) * var(--l3-l) * (3 - 2 * var(--l3-l))); position:relative;padding:clamp(22px,2.6vw,34px) clamp(18px,2.2vw,28px)} .lcz-frame{position:absolute;inset:0;border-radius:20px;border:1px dashed color-mix(in srgb,var(--red) 44%,transparent); opacity:var(--l1);transform:scale(calc(1.03 - var(--l1) * .03))} .lcz-flb{position:absolute;top:-9px;left:clamp(18px,2.2vw,28px);padding:3px 10px;border-radius:99px;background:var(--bg);font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red); opacity:clamp(0,calc((var(--l1) - .5) * 2),1)} .lcz-in{position:relative;display:flex;flex-direction:column;gap:14px} .lcz-core{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:11px 16px;border-radius:13px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) 26%,var(--line));box-shadow:0 0 0 calc(min(var(--l1) * 2.6,1) * (1 - max(0,var(--l1) - .84) * 6) * 4px) var(--red-soft),var(--shadow-sm);white-space:nowrap} .lcz-core img{width:18px;height:18px;object-fit:contain} .lcz-core b{font-family:var(--disp);font-size:14.5px;font-weight:700;letter-spacing:-.014em} .lcz-core em{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .lcz-gs{display:flex;flex-direction:column;gap:8px} .lcz-g{display:flex;align-items:center;gap:11px;font-size:13.5px;line-height:1.45;color:var(--ink-2); --s:clamp(0,calc((var(--l2) - var(--k) * .14) / .42),1)} .lcz-g i{flex:none;width:15px;height:15px;border-radius:5px;border:1.5px solid color-mix(in srgb,var(--red) calc(var(--s) * 100%),var(--line));position:relative} .lcz-g i::after{content:'';position:absolute;left:3px;top:6.5px;width:7px;height:3.4px;border-left:1.6px solid var(--red);border-bottom:1.6px solid var(--red);transform:rotate(-45deg) scale(var(--s));transform-origin:left center} .lcz-out{position:relative;margin-top:clamp(16px,2vw,26px);padding-top:clamp(16px,2vw,26px);display:flex;align-items:center;gap:12px;flex-wrap:wrap} .lcz-out::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)} /* ce qui sort n'est pas un point : c'est un paquet nommé et mesuré */ .lcz-pk{display:inline-flex;align-items:baseline;gap:8px;padding:6px 12px;border-radius:99px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) 36%,var(--line));box-shadow:var(--shadow-sm);white-space:nowrap; transform:translateX(calc(var(--l3) * clamp(20px,3.4vw,54px))); opacity:min(calc(var(--l3) * 5),1)} .lcz-pk b{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--red)} .lcz-pk em{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--ink-3)} .lcz-ext{padding:8px 14px;border-radius:99px;background:var(--card-2);border:1px solid var(--line-2);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-left:auto} .lcz-lim{width:100%;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} /* ── trois surfaces ────────────────────────────────────────────────────── */ .srz{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)} .srz-c{padding:18px 20px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .srz-k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red)} .srz-mock{margin-top:13px;height:clamp(72px,7vw,96px);border-radius:11px;background:var(--card-2);border:1px solid var(--line-2);padding:11px;display:flex;flex-direction:column;gap:7px;overflow:hidden} .srz-mock i{display:block;height:7px;border-radius:3px;background:var(--line);transform:scaleX(var(--s));transform-origin:left} .srz-web i:nth-child(1){width:44%;background:var(--red);opacity:.6} .srz-web i:nth-child(2){width:78%} .srz-web i:nth-child(3){width:62%} .srz-tui{font-family:var(--mono)} .srz-tui i{height:6px} .srz-tui i:nth-child(1){width:62%} .srz-tui i:nth-child(2){width:38%;background:var(--red);opacity:.6} .srz-tui i:nth-child(3){width:74%} .srz-cli i:nth-child(1){width:30%;background:var(--red);opacity:.6} .srz-cli i:nth-child(2){width:88%} .srz-c p{margin:13px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)} /* ── pour qui ──────────────────────────────────────────────────────────── */ .pqz-roles{margin-top:26px;display:flex;gap:9px;flex-wrap:wrap} .pqz-r{padding:8px 15px;border-radius:99px;background:var(--red-soft);border:1px solid color-mix(in srgb,var(--red) 26%,transparent);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red)} .pqz-w{align-self:center} /* ── ce que Norn n'est pas ─────────────────────────────────────────────── */ .nnz{margin-top:clamp(36px,4.4vw,64px);display:flex;flex-direction:column;gap:11px;max-width:820px} .nnz-x{position:relative;padding:12px 0 12px 34px;font-family:var(--disp);font-size:clamp(16px,1.6vw,21px);font-weight:600;letter-spacing:-.016em;color:rgba(244,241,238,.62);border-bottom:1px solid rgba(244,241,238,.1); --s:clamp(0,calc((var(--p,0) - .10 - var(--k) * .09) / .28),1)} .nnz-x::before,.nnz-x::after{content:'';position:absolute;left:4px;top:50%;width:16px;height:1.6px;background:var(--red);transform-origin:center} .nnz-x::before{transform:rotate(45deg) scaleX(var(--s))} .nnz-x::after{transform:rotate(-45deg) scaleX(var(--s))} .nnz-is{margin:clamp(24px,3vw,38px) 0 0;font-family:var(--disp);font-size:clamp(19px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:#f4f1ee} .nnz-is b{color:var(--red)} /* le wordmark garde sa casse : la nomenclature est arka.norn */ .ey .n{text-transform:none} /* bande sombre : surface fixe dans les deux thèmes. --ink-inv s'inverse (clair en thème sombre), donc tout texte à clarté fixe serait illisible dans l'un des deux — on pinne la surface et on garde le texte clair. */ .sec.ink#nonz{background:#100f11;color:#f4f1ee} .sec.ink#nonz .ey{color:rgba(244,241,238,.5)} .sec.ink#nonz .lead{color:rgba(244,241,238,.66)} /* Sur l'accueil et la page Cortex, .sec.ink inverse son fond avec le thème et home-sections.css y bascule le texte en conséquence — règle plus spécifique que celles ci-dessus. Ici la bande reste sombre dans les deux thèmes : on lui rend son texte clair, faute de quoi elle passe en sombre sur sombre. */ #app-root.theme-dark .sec.ink#nonz{color:#f4f1ee} #app-root.theme-dark .sec.ink#nonz .ey{color:rgba(244,241,238,.5)} #app-root.theme-dark .sec.ink#nonz .lead{color:rgba(244,241,238,.66)} #app-root.theme-dark .sec.ink#nonz .nnz-is{color:#f4f1ee} .nnz-x{border-bottom-color:rgba(244,241,238,.1)} /* ── CTA ───────────────────────────────────────────────────────────────── */ .cta-triad{margin-top:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:7px;align-items:center} .cta-t{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)} .cta-t:last-child{color:var(--red)} .cta-mid{justify-content:center} /* ── responsive ────────────────────────────────────────────────────────── */ @media(max-width:1020px){ .gvz{grid-template-columns:1fr;gap:16px} .prz-e{grid-template-columns:78px 82px 1fr auto;gap:10px} .prz-e>i{font-size:9.5px} } @media(max-width:880px){ .pbz{grid-template-columns:1fr;gap:28px} .ctz{grid-template-columns:1fr;gap:16px} .ctz-side{width:100%} .ctz-lb{flex-direction:row;width:auto} .ctz-items{grid-template-columns:1fr} .ctz-fly{display:none} .ctz-mid{padding-top:52px} .ctz-chat{height:46px} .ctz-drop{top:23px;white-space:normal;text-align:center} .auz{grid-template-columns:1fr;gap:16px} /* deux lignes possibles : la réserve suit */ .auz-queue{--row:70px} .auz-it{max-height:calc(var(--k1) * 70px)} .auz-dial{width:100%;justify-self:center;height:18px} .auz-knob{transform:translateX(calc(var(--a2) * (100% * 0 + 0px)));left:calc(var(--a2) * (100% - 16px))} .srz{grid-template-columns:1fr} /* les jetons ont besoin de trois couloirs : sous 1020px la scène se plie et le mouvement latéral n'a plus de sens — on garde l'empilement seul */ .dag-lots{grid-template-columns:1fr} .dag-fan,.dag-esc{display:none} .dag-chain{grid-template-columns:1fr;gap:8px} .dag-cline{display:none} .dag-c{justify-self:stretch;flex-direction:row;align-items:baseline;gap:9px} .dag-c em{white-space:normal} .cpl-ways{grid-template-columns:1fr} } @media(max-width:720px){ .nh-agents{gap:6px} .nh-ag b{font-size:8.5px} .pbz-feed{height:150px} .prz{padding-left:18px} .prz-e{grid-template-columns:1fr;gap:5px} .prz-e>i{grid-column:1} .prz-link{grid-column:1} .cpl-st{grid-template-columns:28px 1fr;gap:12px;padding:14px 15px} .cpl-n{width:28px;height:28px;font-size:11.5px} .cpl-r{grid-template-columns:1fr} .lcz-ext{margin-left:0} .nnz-x{font-size:15.5px;padding-left:30px} } /* ══ mouvement ════════════════════════════════════════════════════════════ Les scènes ne montrent plus des listes qui s'allument : un jeton parcourt la distance, un balayage traverse le code, un curseur glisse. Le contenu est permanent, seuls ces objets bougent. --t = 0 → 1 sur la traversée. */ /* jeton : plein régime dès le départ, s'efface en fin de course */ .tok{position:absolute;width:9px;height:9px;border-radius:99px;background:var(--red);box-shadow:0 0 0 5px var(--red-soft);pointer-events:none; opacity:calc(min(var(--t,0) * 12,1) * (1 - max(0,var(--t,0) - .88) * 8.4))} /* gouvernance : le jeton traverse la gouttière entre deux colonnes. Il vit dans la colonne de départ, donc sa course ne dépend d'aucune géométrie mesurée : la moitié de sa colonne, plus la gouttière. */ .gvz-in,.gvz-gate{position:relative} .gvz-fly{position:absolute;right:0;top:50%;width:9px;height:9px;border-radius:99px;background:var(--red);box-shadow:0 0 0 5px var(--red-soft);pointer-events:none; transform:translate(calc(var(--t,0) * (clamp(18px,2.6vw,40px) + 50%)),-50%); opacity:calc(var(--o,1) * min(var(--t,0) * 12,1) * (1 - max(0,var(--t,0) - .88) * var(--tail,8.4)))} /* la proposition monte au bord de la barrière, puis recule : refusée */ .gvz-prop{--a:clamp(0,calc(var(--p,0) / .20),1); --t:calc(var(--a) - max(0,var(--a) - .88) * 1.1); --o:calc(1 - clamp(0,calc((var(--p,0) - .28) / .08),1))} /* une fois vérifiée, elle franchit vers l'autorité humaine */ .gvz-ok{--t-l:clamp(0,calc((var(--p,0) - .58) / .24),1);--t:calc(var(--t-l) * var(--t-l) * (3 - 2 * var(--t-l)));--o:1;--tail:0} /* connecteur de repli quand les cartes s'empilent */ .stackline{display:none;position:relative;height:26px;margin:0 auto} .stackline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)} .stackline::after{content:'';position:absolute;left:50%;top:0;width:1px;background:var(--red);height:calc(var(--sp,0) * 100%)} @media(max-width:1020px){ .gvz-fly{display:none} .gvz .stackline{display:block} .gvz .stackline-1{--sp:clamp(0,calc(var(--p,0) / .26),1)} .gvz .stackline-2{--sp-l:clamp(0,calc((var(--p,0) - .52) / .26),1);--sp:calc(var(--sp-l) * var(--sp-l) * (3 - 2 * var(--sp-l)))} }