.context-flow{margin:26px 0 30px;position:relative}
.flow-board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(3,minmax(126px,auto));gap:24px 20px;position:relative;align-items:center;padding:34px 0;isolation:isolate}
.flow-board::before{content:'';position:absolute;inset:-70px -20px;background:radial-gradient(ellipse at 52% 47%,var(--glow),transparent 62%);z-index:-2;pointer-events:none}
.flow-connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:-1;stroke-width:1}
.flow-wire{stroke:var(--border)}.flow-particle{stroke:var(--accent-text);stroke-width:1.5;stroke-dasharray:8 155;animation:flow-travel 15s linear infinite}
.flow-input{grid-column:1/5;grid-row:1/4;min-width:0;background:var(--panel-solid);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:var(--shadow);position:relative}
.flow-document-heading{display:flex;align-items:center;gap:10px;font:10px/1.6 var(--mono);color:var(--subtle)}.flow-document-heading>svg{width:20px;height:20px;flex:none}.flow-document-heading>i{width:5px;height:5px;border-radius:50%;background:var(--violet);margin-left:auto;flex:none}
.flow-input h2{font:600 clamp(19px,1.8vw,25px)/1.25 var(--title);letter-spacing:-.035em;margin:20px 0;text-wrap:pretty}
.flow-input dl{display:grid;grid-template-columns:1fr 1fr;gap:22px 15px;margin:22px 0}.flow-input dl>div{min-width:0}.flow-input dl>div:last-child{grid-column:1/-1}.flow-input dt{font-size:10px;color:var(--subtle);margin-bottom:6px}.flow-input dd{margin:0;font:500 14px/1.5 var(--mono);overflow-wrap:anywhere}
.flow-document-foot{border-top:1px solid var(--border);padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--subtle);font-size:10px;line-height:1.7}.flow-document-foot svg{width:16px;height:16px;flex:none}
.flow-engine{grid-column:6/9;grid-row:1/4;position:relative;justify-self:center;width:190px;height:218px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.flow-engine-ring{position:absolute;top:5px;left:0;width:190px;height:190px;border:1px solid var(--border);border-radius:50%;box-shadow:0 0 0 22px rgba(85,49,232,.025),0 0 0 47px rgba(85,49,232,.025);z-index:-1;animation:flow-breathe 8s ease-in-out infinite}
.flow-emblem{display:grid;place-items:center;width:98px;height:98px;border-radius:27px;background:var(--violet);box-shadow:0 15px 55px var(--glow);flex:none}.flow-emblem>.astoik-mark-image{width:59px;height:53px;stroke:none}
.flow-engine-caption{font:10px/1.6 var(--mono);max-width:190px;text-align:center;color:var(--fg)}
.flow-output{grid-column:10/13;display:flex;gap:15px;align-items:flex-start;min-width:0;background:var(--panel-solid);padding:21px;border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 45px rgba(21,21,28,.045);position:relative}
.flow-out-0{grid-row:1}.flow-out-1{grid-row:2}.flow-out-2{grid-row:3}.flow-output-icon{color:var(--accent-text);flex:none;margin-top:3px}.flow-output-icon svg{width:23px;height:23px}.flow-output-copy{min-width:0}.flow-role{display:block;font:9px/1.6 var(--mono);color:var(--subtle);margin-bottom:6px}.flow-output h3{font-size:19px;line-height:1.15;letter-spacing:-.025em;text-wrap:pretty;margin-bottom:8px}.flow-output p{font-size:12px;line-height:1.6;color:var(--secondary)}.flow-output-note{display:block;border-top:1px solid var(--border);padding-top:10px;margin-top:12px;font:9px/1.7 var(--mono);color:var(--subtle)}
.context-flow figcaption{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--border);padding-top:16px;font:10px/1.7 var(--mono);color:var(--subtle)}.context-flow figcaption>span:first-child{color:var(--fg)}
.flow-timesheet{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;font:10px var(--mono);text-align:center;color:var(--subtle)}.flow-timesheet i{height:6px;border-radius:2px;background:var(--border)}.flow-timesheet i.pointed{background:var(--violet)}.flow-timesheet span.pointed{color:var(--accent-text)}
.flow-operation{padding:13px 15px;background:var(--panel-alt);border:1px solid var(--border);border-radius:7px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font:10px var(--mono)}.flow-operation svg{width:100%;height:20px;stroke:var(--accent-text)}.flow-operation circle{fill:var(--panel-solid)}
.flow-equipment{border-block:1px solid var(--border);padding:14px 0;display:flex;align-items:center;gap:12px}.flow-equipment>svg{width:33px;height:39px;color:var(--accent-text)}.flow-equipment b,.flow-equipment span{display:block}.flow-equipment b{font:500 14px var(--mono);margin-bottom:4px}.flow-equipment span{font-size:10px;color:var(--subtle)}.flow-equipment .flow-location{font-size:27px;color:var(--accent-text);margin-left:auto}
.flow-volume{display:flex;gap:22px;align-items:center;background:var(--glow);padding:17px;border-radius:8px}.flow-volume strong{font:600 37px/1 var(--title);letter-spacing:-.04em}.flow-volume small{font:14px var(--mono)}.flow-volume>span{font-size:10px;line-height:1.7;color:var(--secondary)}
.flow-filetabs{display:flex;gap:6px;flex-wrap:wrap}.flow-filetabs span{padding:7px 10px;border:1px solid var(--border);border-radius:5px 5px 0 0;font:10px var(--mono);background:var(--panel-alt)}
.flow-proof-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.flow-proof-pair>div{border:1px solid var(--border);border-radius:6px;padding:10px;background:var(--panel-alt)}.flow-proof-pair svg{width:100%;height:49px;stroke:var(--accent-text)}.flow-proof-pair span{display:block;font:9px var(--mono);margin-top:7px;color:var(--subtle)}.flow-proof-pair>div:first-child svg{opacity:.45}
/* Each layout puts its central métier document in the appropriate place. */
.flow-chantier .flow-input,.flow-accueil .flow-input{grid-column:1/4}.flow-chantier .flow-engine,.flow-accueil .flow-engine{grid-column:5/9}.flow-chantier .flow-output,.flow-accueil .flow-output{grid-column:10/13}
.flow-atelier .flow-input{grid-column:1/5}.flow-atelier .flow-engine{grid-column:6/9;grid-row:1/3}.flow-atelier .flow-out-0{grid-column:10/13;grid-row:1/3}.flow-atelier .flow-out-1{grid-column:6/9;grid-row:3}.flow-atelier .flow-out-2{grid-column:10/13;grid-row:3}
.flow-parc .flow-input{grid-column:1/5;grid-row:1/4}.flow-parc .flow-engine{grid-column:6/9;grid-row:2/4}.flow-parc .flow-out-1{grid-column:6/9;grid-row:1}.flow-parc .flow-out-0{grid-column:10/13;grid-row:2}.flow-parc .flow-out-2{grid-column:10/13;grid-row:3}
.flow-livret .flow-engine{grid-row:1/3}.flow-livret .flow-out-1{grid-row:1/3;min-height:220px;border-radius:5px 16px 16px 5px;border-left:5px solid var(--border)}.flow-livret .flow-out-0{grid-column:6/9;grid-row:3}.flow-livret .flow-out-2{grid-column:10/13;grid-row:3}
.flow-volets .flow-input{grid-column:1/5;grid-row:1/3}.flow-volets .flow-engine{grid-column:7/11;grid-row:1/3}.flow-volets .flow-out-0{grid-column:1/5;grid-row:3}.flow-volets .flow-out-1{grid-column:5/9;grid-row:3}.flow-volets .flow-out-2{grid-column:9/13;grid-row:3}.flow-volets .flow-output{border-top:3px solid var(--violet);align-self:stretch}
.flow-dossier .flow-output{border-radius:3px 12px 12px 3px}.flow-dossier .flow-input::before{content:'';position:absolute;width:85px;height:7px;top:-8px;left:18px;border:1px solid var(--border);border-bottom:0;border-radius:7px 7px 0 0;background:var(--panel-solid)}
.flow-preuves .flow-engine{grid-row:1/3}.flow-preuves .flow-out-0{grid-row:1/3;min-height:230px}.flow-preuves .flow-out-1{grid-column:6/9;grid-row:3}.flow-preuves .flow-out-2{grid-column:10/13;grid-row:3}
@keyframes flow-travel{to{stroke-dashoffset:-489}}@keyframes flow-breathe{0%,100%{opacity:.65;transform:scale(.98)}50%{opacity:1;transform:scale(1.035)}}
@media(max-width:1100px) and (min-width:901px){.flow-input{padding:20px}.flow-output{padding:16px;gap:10px}.flow-output-icon svg{width:18px}.flow-engine{width:150px;height:190px}.flow-engine-ring{width:150px;height:150px;top:18px}.flow-emblem{width:80px;height:80px;border-radius:23px}.flow-emblem>.astoik-mark-image{width:49px;height:43px}.flow-input dd{font-size:12px}.flow-role{font-size:8px}.flow-output h3{font-size:17px}.flow-output-note{font-size:8px}}
@media(max-width:900px){.context-flow{margin-top:18px}.context-flow .flow-board{display:flex;flex-direction:column;gap:28px;padding:15px 0 20px}.context-flow .flow-input{width:100%;max-width:460px;order:0}.context-flow .flow-engine{width:170px;height:182px;order:1;margin:12px 0 18px}.flow-engine-ring{width:170px;height:170px;top:0;box-shadow:0 0 0 15px rgba(85,49,232,.025),0 0 0 30px rgba(85,49,232,.025)}.flow-emblem{width:85px;height:85px;border-radius:24px}.flow-emblem>.astoik-mark-image{width:52px;height:46px}.context-flow .flow-output{width:calc(100% - 30px);max-width:430px;align-self:center;min-height:0;margin-left:30px;order:2;padding:20px;gap:17px}.flow-output h3{font-size:20px}.flow-output p{font-size:13px}.flow-output-note{font-size:10px}.flow-role{font-size:10px}.context-flow figcaption{flex-direction:column;gap:5px;font-size:9px}.flow-board::before{inset:0;background:radial-gradient(ellipse at 50% 35%,var(--glow),transparent 60%)}.flow-input h2{font-size:24px}.flow-input dd{font-size:14px}}
@media(prefers-reduced-motion:reduce){.context-flow .animated{animation:none!important}}