/* ══════════════════════════════════════════════════════════════════════════ Page Cortex — scènes propres à la page. Repris de .input/ui/cortex-page-product/cortex-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 la home, seul ce fichier lui est propre. 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. Régler le rythme d'une scène = changer data-from / data-to dans le markup, ou les temps --q1…q4 / --r1…r4 déclarés en tête des blocs concernés. ══════════════════════════════════════════════════════════════════════════ */ /* Cortex — page produit. Complément à arkalabs-home.css : hero relais, chaîne de trajectoire, workflow épinglé, workspace, RAG, révisions. */ /* ── hero : relais autonome entre moteurs ── */ .ahero-viz.hx{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column} .hx-engines{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px)} /* La transition ne porte plus sur border-color ni box-shadow : leurs valeurs viennent de --red et --line, et le moteur de scrubbing réécrit des variables toutes les 60 ms — la transition serait relancée sans fin et la couleur resterait figée sur celle du thème quitté. L'allumage du moteur actif se fait donc net sur la bordure, fondu sur l'opacité et la position. */ .hx-eng{display:flex;flex-direction:column;gap:7px;padding:14px 15px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);opacity:.5;transition:opacity .45s ease,transform .45s ease} .hx-eng.on{opacity:1;border-color:color-mix(in srgb,var(--red) 40%,var(--line));box-shadow:0 0 0 4px var(--red-soft),var(--shadow-sm);transform:translateY(-2px)} .hx-eng.nxt{opacity:.85;border-color:color-mix(in srgb,var(--red) 18%,var(--line))} .hx-eng>b{font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:-.012em} .hx-st{display:block;min-height:13px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--red);opacity:0;transition:opacity .35s ease} .hx-eng.on .hx-st,.hx-eng.nxt .hx-st{opacity:1} .hx-eng.nxt .hx-st{color:var(--ink-3)} .hx-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;overflow:hidden;background:var(--card-2);border:1px solid var(--line-2)} .hx-ic img{width:64%;height:64%;object-fit:contain} .hx-ic img.oai{filter:invert(1)} #app-root.theme-dark .hx-ic{background:#fff} #app-root.theme-dark .hx-ic img.oai{filter:none} .hx-any{font-family:var(--mono);font-size:15px;color:var(--ink-3);background:transparent} .hx-field{position:relative;height:clamp(74px,7vw,102px)} .hx-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .hx-wires .w{fill:none;stroke:var(--line);stroke-width:1.1} .hx-pk{position:absolute;top:0;left:0;width:9px;height:9px;border-radius:99px;background:var(--red);box-shadow:0 0 0 5px var(--red-soft);opacity:0;transition:opacity .2s ease} .hx-pk.on{opacity:1} .hx-cap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(4px);padding:5px 12px;border-radius:99px;background:var(--bg);border:1px solid var(--line);font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none} .hx-cap.on{opacity:1;transform:translate(-50%,-50%)} .hx-core{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)} .hx-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .hx-bk{display:inline-flex;align-items:center;gap:9px} .hx-bk img{width:18px;height:18px;object-fit:contain} .hx-bk b{font-family:var(--disp);font-size:14.5px;font-weight:700;letter-spacing:-.014em} .hx-loc{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .hx-log{margin-top:14px;display:flex;flex-direction:column;gap:7px;min-height:clamp(126px,12vw,150px)} .hx-row{display:flex;align-items:baseline;gap:10px;padding:9px 12px;border-radius:11px;background:var(--card-2);border:1px solid var(--line-2);opacity:0;transform:translateY(9px);transition:opacity .4s ease,transform .4s ease,margin-top .4s ease} .hx-row.in{opacity:1;transform:none} .hx-row.out{opacity:0;transform:translateY(-9px)} .hx-rk{flex:none;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red)} .hx-rt{font-size:12.5px;line-height:1.4;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hx-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:12px} .hx-cnt{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .hx-cnt b{font-size:14px;color:var(--red)} .hx-keep{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:right} /* libellés plus longs que la home : jamais de retour à la ligne, masqués plus tôt */ .nav-mid a{white-space:nowrap} @media(max-width:1020px){.nav-mid{display:none}} .lead.sub{color:var(--ink-3);font-size:clamp(14.5px,1.05vw,16px)} .pull{max-width:820px;margin:clamp(38px,4.4vw,64px) auto 0;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-2);text-wrap:pretty;opacity:var(--e,0);transform:translateY(calc((1 - var(--e,0)) * 30px))} .sec-head:not(.center) h2{max-width:20ch} /* ── hero : relais entre moteurs ── */ .ahero-viz.hv{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;gap:0} .hv-lane{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px)} .hv-tool{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:13px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .hv-tool b{font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:-.012em} .hv-ic{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;overflow:hidden;background:var(--card-2);border:1px solid var(--line-2)} .hv-ic img{width:64%;height:64%;object-fit:contain} .hv-ic img.oai{filter:invert(1)} #app-root.theme-dark .hv-ic{background:#fff} #app-root.theme-dark .hv-ic img.oai{filter:none} .hv-any{font-family:var(--mono);font-size:15px;color:var(--ink-3);background:transparent} .hv-wires{width:100%;aspect-ratio:300/120;overflow:visible;margin:-2px 0} .hv-wires .w{fill:none;stroke:var(--line);stroke-width:1.1} .hv-base{padding:20px 22px;border-radius:18px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) 22%,var(--line));box-shadow:var(--shadow)} .hv-bk{display:inline-flex;align-items:center;gap:9px} .hv-bk img{width:19px;height:19px;object-fit:contain} .hv-bk b{font-family:var(--disp);font-size:14.5px;font-weight:700;letter-spacing:-.014em} .hv-layers{margin-top:15px;display:flex;flex-direction:column;gap:11px} .hv-l{display:flex;flex-direction:column;gap:6px} .hv-l b{font-size:12.5px;font-weight:500;color:var(--ink-2)} .hv-l i{height:6px;border-radius:99px;background:var(--bg-3);position:relative;overflow:hidden} .hv-l i::after{content:'';position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--red);width:calc(var(--e,0) * var(--w,100%))} .hv-foot{display:block;margin-top:14px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} /* ── chaîne : la trajectoire en 4 maillons ── */ .chain{position:relative;margin-top:clamp(44px,5vw,76px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);perspective:1300px} .ch-line{position:absolute;left:6%;right:6%;top:34px;height:2px;border-radius:2px;background:var(--line);overflow:hidden} .ch-line::after{content:'';position:absolute;inset:0 auto 0 0;width:calc(var(--e,0) * 100%);background:var(--red);border-radius:2px} .ch-step{position:relative;padding:24px 22px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .ch-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:99px;background:var(--red-soft);color:var(--red);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em} .ch-step h3{margin:16px 0 0;font-size:clamp(16px,1.4vw,19px);letter-spacing:-.016em;line-height:1.24} .ch-step p{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)} /* ── fonctionnement : 4 temps épinglés ── */ .pin-viz.fw{position:relative;gap:12px} .fw-rail{position:absolute;left:17px;top:22px;bottom:22px;width:1px;background:var(--line);z-index:0} .fw-rail i{position:absolute;inset:0 auto 0 0;width:1px;height:calc(var(--p,0) * 100%);background:var(--red)} .fw-s{position:relative;z-index:1;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;padding:16px 18px;border-radius:15px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .fw-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:99px;background:var(--red-soft);color:var(--red);font-family:var(--mono);font-size:11.5px;font-weight:600} .fw-b{display:flex;flex-direction:column;gap:5px} .fw-b b{font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.014em;line-height:1.28} .fw-b span{font-size:13.5px;line-height:1.55;color:var(--ink-2)} /* ── dans vos outils habituels : l'outil reste, Cortex travaille dessous ── Tout est piloté par --p (progression de la section, posée par le moteur). Quatre temps : l'outil se pose · la trajectoire descend · le substrat structure · le contexte préparé remonte dans l'outil. */ .pin-viz.uw{ --q1:clamp(0,calc((var(--p,0) - .02) / .20),1); --q2:clamp(0,calc((var(--p,0) - .20) / .24),1); --q3:clamp(0,calc((var(--p,0) - .42) / .26),1); --q4:clamp(0,calc((var(--p,0) - .70) / .24),1); position:relative;gap:0;perspective:1500px} /* l'outil : toujours là, il recule légèrement quand Cortex travaille */ .uw-tool{position:relative;z-index:3;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transform-style:preserve-3d; opacity:calc(.5 + var(--q1) * .5); transform:translate3d(0,calc((1 - var(--q1)) * -22px),calc(var(--q3) * -60px)) rotateX(calc(var(--q3) * 3deg)) scale(calc(.97 + var(--q1) * .03))} .uw-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--card-2)} .uw-tab{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-3);border:1px solid transparent} .uw-tab img{width:13px;height:13px;object-fit:contain} .uw-tab img.oai{filter:invert(1)} #app-root.theme-dark .uw-tab img.oai{filter:none} .uw-tab.on{background:var(--bg);border-color:var(--line);color:var(--ink)} .uw-any{font-size:13px;padding:5px 10px} .uw-stay{margin-left:auto;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);opacity:calc(var(--q1) * .9)} .uw-body{padding:16px 18px;display:flex;flex-direction:column;gap:9px;min-height:104px} .uw-line{margin:0;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink-2);opacity:0;transform:translateY(7px)} .uw-line:nth-child(1){opacity:clamp(0,calc(var(--q1) * 2.4),1);transform:translateY(calc((1 - clamp(0,calc(var(--q1) * 2.4),1)) * 7px))} .uw-line:nth-child(2){opacity:clamp(0,calc((var(--q1) - .38) * 2.4),1);transform:translateY(calc((1 - clamp(0,calc((var(--q1) - .38) * 2.4),1)) * 7px))} .uw-back{color:var(--red);opacity:calc(var(--q4) * 1);transform:translateY(calc((1 - var(--q4)) * 9px))} /* la trajectoire descend : quatre points qui filent vers le substrat */ .uw-flow{position:relative;height:clamp(52px,5.6vw,76px);display:grid;place-items:center;z-index:1} .uw-flow::before{content:'';position:absolute;top:0;bottom:0;width:1px;background:var(--line)} .uw-flow::after{content:'';position:absolute;top:0;width:1px;height:calc(var(--q2) * 100%);background:var(--red)} .uw-d{position:absolute;top:0;width:7px;height:7px;border-radius:99px;background:var(--red);box-shadow:0 0 0 4px var(--red-soft); --t:clamp(0,calc((var(--q2) - var(--k) * .13) / .55),1); opacity:calc(var(--t) * (1 - var(--t)) * 4); transform:translateY(calc(var(--t) * (clamp(52px,5.6vw,76px) - 7px)))} /* le substrat : Cortex, sous l'outil */ .uw-sub{position:relative;z-index:2;padding:18px 20px;border-radius:18px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) calc(14% + var(--q3) * 22%),var(--line));box-shadow:0 0 0 calc(var(--q3) * 5px) var(--red-soft),var(--shadow); opacity:calc(.42 + var(--q2) * .58); transform:translateY(calc((1 - var(--q2)) * 26px))} .uw-sk{display:flex;align-items:center;justify-content:space-between;gap:12px} .uw-bk{display:inline-flex;align-items:center;gap:9px} .uw-bk img{width:18px;height:18px;object-fit:contain} .uw-bk b{font-family:var(--disp);font-size:14.5px;font-weight:700;letter-spacing:-.014em} .uw-loc{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);text-align:right} .uw-items{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .uw-it{display:flex;flex-direction:column;gap:4px;padding:12px 13px;border-radius:12px;background:var(--card-2);border:1px solid var(--line-2); opacity:var(--s,0);transform:translateY(calc((1 - var(--s,0)) * 12px)) scale(calc(.95 + var(--s,0) * .05))} .uw-it:nth-child(1){--s:clamp(0,calc(var(--q3) / .46),1)} .uw-it:nth-child(2){--s:clamp(0,calc((var(--q3) - .18) / .46),1)} .uw-it:nth-child(3){--s:clamp(0,calc((var(--q3) - .36) / .46),1)} .uw-it em{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)} .uw-it b{font-size:13px;font-weight:500;letter-spacing:-.006em;line-height:1.35;color:var(--ink-2)} .uw-place{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);display:flex;align-items:center;gap:11px;flex-wrap:wrap; opacity:clamp(0,calc((var(--q3) - .52) / .4),1)} .uw-ws,.uw-sj{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:99px;background:var(--card-2);border:1px solid var(--line-2);color:var(--ink-3)} .uw-sj{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 26%,transparent);color:var(--red)} .uw-arw{color:var(--ink-3);font-size:13px} /* le paquet préparé remonte du substrat vers l'outil */ /* le paquet préparé remonte du substrat vers l'outil : ancré sur le substrat */ .uw-pk{position:absolute;left:50%;top:0;z-index:4;width:11px;height:11px;border-radius:99px;background:var(--red);box-shadow:0 0 0 6px var(--red-soft); opacity:calc(var(--q4) * (1 - var(--q4)) * 4); transform:translate(-50%,-50%) translateY(calc(var(--q4) * -1 * (clamp(52px,5.6vw,76px) + 58px)))} /* légende : fenêtres disjointes, une seule phrase lisible à la fois */ .uw-caps{position:relative;margin-top:18px;height:20px} .uw-cap{position:absolute;inset:0;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red);opacity:0} .uw-cap:nth-child(1){opacity:calc(clamp(0,calc((var(--p,0) - .04) / .06),1) * (1 - clamp(0,calc((var(--p,0) - .22) / .06),1)))} .uw-cap:nth-child(2){opacity:calc(clamp(0,calc((var(--p,0) - .28) / .06),1) * (1 - clamp(0,calc((var(--p,0) - .44) / .06),1)))} .uw-cap:nth-child(3){opacity:calc(clamp(0,calc((var(--p,0) - .50) / .06),1) * (1 - clamp(0,calc((var(--p,0) - .70) / .06),1)))} .uw-cap:nth-child(4){opacity:clamp(0,calc((var(--p,0) - .76) / .06),1)} /* ── une expérience révisable : la conclusion s'annote, puis se révise ────── Un seul objet à l'écran. Quatre temps posés sur --p : les preuves restent attachées · l'ancien état se distingue de l'actuel · la portée se dessine · la révision arrive sans effacer. */ #revisable .rvz{ --r1:clamp(0,calc((var(--p,0) - .16) / .16),1); --r2:clamp(0,calc((var(--p,0) - .30) / .15),1); --r3:clamp(0,calc((var(--p,0) - .43) / .14),1); --r4:clamp(0,calc((var(--p,0) - .54) / .17),1)} .rvz{margin-top:clamp(46px,5.4vw,80px);display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(34px,5vw,76px);align-items:center} /* la scène : deux colonnes réelles — les preuves à gauche, l'objet à droite */ .rvz-stage{position:relative;display:grid;grid-template-columns:minmax(150px,.9fr) minmax(260px,1.25fr);gap:clamp(18px,2.6vw,44px);align-items:center;padding:clamp(26px,3.4vw,52px) clamp(18px,2.2vw,30px)} .rvz-scope{position:absolute;inset:0;border-radius:22px;border:1px dashed color-mix(in srgb,var(--red) 42%,transparent); opacity:var(--r3);transform:scale(calc(1.04 - var(--r3) * .04))} .rvz-scope-lb{position:absolute;top:-9px;left:clamp(18px,2.2vw,30px);padding:3px 10px;border-radius:99px;background:var(--bg-2);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(--r3) - .5) * 2),1)} /* l'objet : jamais effacé, seulement requalifié */ .rvz-card{position:relative;z-index:2;grid-column:2;width:100%;padding:22px 24px;border-radius:16px;background:var(--card);border:1px solid color-mix(in srgb,var(--red) calc(10% + var(--r4) * 24%),var(--line));box-shadow:var(--shadow)} .rvz-k{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .rvz-claim{position:relative;margin:11px 0 0;font-family:var(--disp);font-size:clamp(16px,1.5vw,20px);font-weight:600;line-height:1.35;letter-spacing:-.016em;color:var(--ink); opacity:calc(1 - var(--r4) * .52)} .rvz-claim::after{content:'';position:absolute;left:0;top:52%;height:1.5px;width:calc(var(--r4) * 100%);background:var(--red)} .rvz-stamp{display:inline-block;margin-top:12px;padding:4px 11px;border-radius:99px;background:var(--red-soft);border:1px solid color-mix(in srgb,var(--red) 28%,transparent);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(--r4) - .34) * 2.4),1);transform:rotate(calc(-2deg * clamp(0,calc((var(--r4) - .34) * 2.4),1)))} .rvz-new{margin:12px 0 0;font-family:var(--disp);font-size:clamp(15px,1.36vw,18px);font-weight:600;line-height:1.35;letter-spacing:-.014em;color:var(--red); opacity:clamp(0,calc((var(--r4) - .46) * 2.2),1);transform:translateY(calc((1 - clamp(0,calc((var(--r4) - .46) * 2.2),1)) * 10px))} .rvz-time{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap; opacity:var(--r2)} .rvz-then,.rvz-now{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:99px;border:1px solid var(--line-2);background:var(--card-2);color:var(--ink-3)} .rvz-then{opacity:calc(1 - var(--r4) * .45)} .rvz-now{border-color:color-mix(in srgb,var(--red) 26%,transparent);background:var(--red-soft);color:var(--red)} .rvz-ar{color:var(--ink-3);font-size:12px} /* provenance : trois preuves reliées, dans leur propre colonne. Les fils vivent dans la gouttière inter-colonnes — jamais sous les puces. */ .rvz-prov{position:relative;grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px)} .rvz-wires{position:absolute;left:100%;top:0;width:clamp(18px,2.6vw,44px);height:100%;overflow:visible;pointer-events:none} .rvz-wires path{fill:none;stroke:var(--red);stroke-width:1.1;opacity:.5;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--r1));vector-effect:non-scaling-stroke} .rvz-ev{position:relative;z-index:2;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);width:100%; --s:clamp(0,calc((var(--r1) - var(--k) * .18) / .5),1); opacity:var(--s);transform:translateX(calc((1 - var(--s)) * -20px))} .rvz-ev em{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red)} .rvz-ev b{font-size:12px;font-weight:500;letter-spacing:-.004em;color:var(--ink-2)} /* les quatre garanties : allumées au rythme de la scène */ .rvz-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .rvz-lg{position:relative;padding:16px 0 16px 20px;border-top:1px solid var(--line); opacity:calc(.34 + var(--l,0) * .66)} .rvz-lg::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;background:var(--red);transform:scaleY(var(--l,0));transform-origin:top} .rvz-lg:last-child{border-bottom:1px solid var(--line)} .rvz-lg:nth-child(1){--l:var(--r1)} .rvz-lg:nth-child(2){--l:var(--r2)} .rvz-lg:nth-child(3){--l:var(--r3)} .rvz-lg:nth-child(4){--l:var(--r4)} .rvz-lg h4{margin:8px 0 0;font-family:var(--disp);font-size:15.5px;font-weight:700;letter-spacing:-.014em} .rvz-lg p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)} @media(max-width:880px){ .rvz{grid-template-columns:1fr;gap:32px} .rvz-stage{grid-template-columns:1fr;gap:16px;padding:clamp(20px,3vw,30px) 0} .rvz-prov{grid-column:1;grid-row:auto;height:auto;gap:8px} .rvz-ev{width:100%;transform:translateY(calc((1 - var(--s)) * 12px));opacity:var(--s)} .rvz-card{grid-column:1;width:100%} .rvz-wires{display:none} .rvz-scope{inset:-14px -10px} .rvz-scope-lb{left:0} } /* ── workspace / sujets ── */ .ws-frame{position:relative;padding:26px 20px 20px;border-radius:20px;border:1px dashed color-mix(in srgb,var(--red) calc(14% + var(--e,0) * 34%),transparent);background:color-mix(in srgb,var(--red) calc(var(--e,0) * 4%),transparent)} .ws-k{position:absolute;top:-10px;left:20px;padding:4px 12px;border-radius:99px;background:var(--bg);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);opacity:var(--e,0)} .sec.alt .ws-k{background:var(--bg-2)} .ws-subs{display:flex;flex-direction:column;gap:10px} .ws-sub{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:13px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .ws-sub b{font-family:var(--disp);font-size:14.5px;font-weight:600;letter-spacing:-.012em} .ws-sub span{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)} .ws-new{border-color:color-mix(in srgb,var(--red) 32%,var(--line))} .ws-new span{color:var(--red)} .ws-wait{margin-top:12px;padding:11px 15px;border-radius:12px;border:1px dashed var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .hand{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:9px} .hand li{padding:8px 14px;border-radius:99px;background:var(--card-2);border:1px solid var(--line-2);font-size:13.5px;color:var(--ink-2)} /* ── relais entre moteurs ── */ .relay{margin-top:clamp(40px,4.6vw,70px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);perspective:1300px} .rl{padding:26px 24px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .rl-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:var(--card-2);border:1px solid var(--line-2)} .rl-ic img{width:62%;height:62%;object-fit:contain} .rl-ic img.oai{filter:invert(1)} #app-root.theme-dark .rl-ic{background:#fff} #app-root.theme-dark .rl-ic img.oai{filter:none} .rl-any{font-family:var(--mono);font-size:18px;color:var(--ink-3);background:transparent} .rl h3{margin:18px 0 0;font-size:clamp(16px,1.4vw,19px);letter-spacing:-.016em} .rl p{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)} /* ── RAG : le filtre de pertinence ── */ .gate{display:flex;flex-direction:column;gap:12px} .gt-k{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red)} .gt-q{display:flex;flex-direction:column;gap:9px} .gt-i{position:relative;padding:14px 18px 14px 40px;border-radius:13px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:14px;color:var(--ink);line-height:1.45} .gt-i::before{content:'';position:absolute;left:18px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:99px;background:var(--red);box-shadow:0 0 0 4px var(--red-soft)} /* ── révisions ── */ .revs{margin-top:clamp(40px,4.6vw,70px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,30px)} .rev{padding-top:18px;border-top:1px solid var(--line)} .rev h4{margin:12px 0 0;font-family:var(--disp);font-size:16px;font-weight:700;letter-spacing:-.014em} .rev p{margin:10px 0 0;font-size:13.5px;line-height:1.58;color:var(--ink-2)} /* ── continuité des sessions ── */ .cont{position:relative;padding-left:26px} .ct-track{position:absolute;left:5px;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--line);overflow:hidden} .ct-track i{position:absolute;inset:0 0 auto 0;height:calc(var(--e,0) * 100%);background:var(--red);border-radius:2px} .ct-steps{display:flex;flex-direction:column;gap:12px} .ct-s{position:relative;padding:15px 18px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:14.5px} .ct-s::before{content:'';position:absolute;left:-25px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:99px;background:var(--bg);border:2px solid var(--red)} .sec.alt .ct-s::before{background:var(--bg-2)} /* ── sous la surface ── */ .under{margin-top:clamp(40px,4.6vw,70px);max-width:900px;margin-inline:auto} .un-surface{padding:18px 22px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);text-align:center;font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.012em} .un-jobs{margin-top:18px;padding:22px;border-radius:18px;border:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .un-j{padding:10px 16px;border-radius:99px;background:var(--card-2);border:1px solid var(--line-2);font-size:13.5px;color:var(--ink-2)} .un-foot{margin:20px 0 0;text-align:center;font-size:14px;color:var(--ink-3)} /* ── ce que vous gardez ── */ .keeps5{margin-top:clamp(40px,4.6vw,70px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,28px)} .kp{padding-top:18px;border-top:1px solid var(--line)} .kp h4{margin:12px 0 0;font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.24} .kp p{margin:9px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)} @media(max-width:1000px){ .chain{grid-template-columns:1fr 1fr} .ch-line{display:none} .revs{grid-template-columns:1fr 1fr} .keeps5{grid-template-columns:1fr 1fr 1fr} } @media(max-width:880px){ .relay{grid-template-columns:1fr} .cont{padding-left:24px} } @media(max-width:720px){ .hx-engines{gap:7px} .hx-eng{padding:11px 11px 10px;gap:5px} .hx-eng>b{font-size:12.5px} .hx-ic{width:24px;height:24px} .hx-field{height:66px} .hx-keep{display:none} .hx-log{min-height:118px} .chain{grid-template-columns:1fr;gap:12px;perspective:900px} .ch-step{padding:20px 18px} .revs,.keeps5{grid-template-columns:1fr;gap:0} .rev,.kp{padding:16px 0} .pull{font-size:16.5px;margin-top:32px} .hv-lane{grid-template-columns:1fr;gap:8px} .hv-wires{display:none} .hv-base{margin-top:16px;padding:18px 18px} .uw-items{grid-template-columns:1fr;gap:8px} .uw-tool{transform:none;opacity:1} .uw-sub{transform:none;opacity:1} .uw-flow{height:44px} .uw-loc{display:none} .uw-caps{height:34px} .uw-cap{line-height:1.4} .fw-s{grid-template-columns:26px 1fr;gap:12px;padding:14px 15px} .fw-rail{left:14px} .gt-i{font-size:13.5px;padding:12px 15px 12px 36px} .un-jobs{padding:16px} .un-j{font-size:12.5px;padding:8px 13px} .hand li{font-size:12.5px;padding:7px 12px} .ws-frame{padding:24px 15px 16px} }