/* Couche bêta Atlas vivant. Toujours appliquée après les feuilles de site/. */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --beta-paper: #f5f7f8;
  --beta-ink: #171923;
  --beta-violet: #6043e8;
  --beta-lemon: #d9ef59;
  --beta-line: #c6cbd2;
}

html { scroll-padding-top: 90px; }
body { background: var(--beta-paper) !important; color: var(--beta-ink) !important; font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; }
body::before { background: none !important; }
main.wrap, main.moderne { background-color: var(--beta-paper) !important; }
main.wrap p, main.wrap li, main.moderne p, main.moderne li { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; }
main.wrap h1, main.wrap h2, main.wrap h3, main.moderne h1, main.moderne h2, main.moderne h3 { font-family: 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif; font-weight: 700; letter-spacing: -.018em; }
main.wrap h1, main.moderne h1 { line-height: .98; }
main.wrap a, main.moderne a { color: var(--beta-violet); }
main.wrap a:hover, main.moderne a:hover { text-decoration-thickness: 2px; }
main.wrap .planche, main.wrap .periodes.hist, main.wrap .frise.hist { background-color: var(--beta-paper) !important; background-image: none !important; color: var(--beta-ink) !important; }
main.wrap :is(.num, .lbl, .an) { color: var(--beta-violet) !important; }
:where(h1,h2,h3,h4,section,article,[id]) { scroll-margin-top: 90px; }
:where(a,button,input,select,summary):focus-visible { outline: 3px solid var(--beta-violet) !important; outline-offset: 3px; }

header.bar { background: var(--beta-paper) !important; color: var(--beta-ink) !important; border-bottom: 2px solid var(--beta-ink) !important; }
header.bar .mark { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 800 !important; color: var(--beta-ink) !important; letter-spacing: -.035em; }
header.bar .mark i { font-style: normal; color: var(--beta-violet); }
header.bar menu button, header.bar menu .rub, header.bar #burger, header.bar #jour-nuit { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; font-weight: 700; color: var(--beta-ink) !important; }
header.bar .pan { background: var(--beta-paper) !important; color: var(--beta-ink) !important; }
header.bar .pan a { color: var(--beta-ink) !important; }
header.bar .pan a:hover { color: var(--beta-violet) !important; }
header.bar .cherche input { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; }
header.bar { display: none !important; }
.beta-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.beta-skip { position: fixed; z-index: 1001; left: 12px; top: -70px; padding: 10px 15px; background: var(--beta-lemon); color: var(--beta-ink); font-weight: 700; }
.beta-skip:focus { top: 12px; }
.beta-header { position: sticky; top: 0; z-index: 500; display: flex; align-items: center; gap: clamp(12px,2vw,30px); min-height: 72px; padding: 8px clamp(16px,3vw,42px); background: var(--beta-paper); border-bottom: 2px solid var(--beta-ink); color: var(--beta-ink); box-sizing: border-box; }
.beta-header * { box-sizing: border-box; }
.beta-header a { color: inherit; text-decoration: none; }
.beta-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; font: 800 23px/.85 'Barlow Condensed',sans-serif; letter-spacing: -.02em; }
.beta-brand > span:last-child > span { display: block; font: 700 10px/1 'IBM Plex Mono',monospace; letter-spacing: .16em; }
.beta-brand-icon { position: relative; display: grid; place-items: center; width: 37px; height: 37px; color: #fff; background: var(--beta-violet); border: 2px solid var(--beta-ink); box-shadow: 3px 3px 0 var(--beta-ink); font: 800 27px/1 'Barlow Condensed',sans-serif; transform: rotate(-5deg); }
.beta-brand-icon::after { content: ''; position: absolute; right: -8px; bottom: -7px; width: 4px; height: 4px; background: var(--beta-lemon); box-shadow: 5px 0 var(--beta-lemon), 0 5px var(--beta-lemon); }
.beta-quick { display: flex; align-items: center; gap: clamp(12px,1.6vw,28px); margin-left: auto; font: 700 14px/1.2 'Atkinson Hyperlegible Next',sans-serif; white-space: nowrap; }
.beta-quick a:hover { color: var(--beta-violet); }
.beta-header-search { display: flex; align-items: stretch; height: 39px; border: 1px solid var(--beta-ink); background: #fff; }
.beta-header-search input { min-width: 80px; width: clamp(110px,13vw,210px); padding: 0 10px; border: 0; background: transparent; color: var(--beta-ink); font: 500 13px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-header-search button, .beta-menu-trigger { border: 0; cursor: pointer; font: 700 13px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-header-search button { padding: 0 12px; background: var(--beta-ink); color: #fff; }
.beta-menu-trigger { flex: none; padding: 11px 13px; background: var(--beta-lemon); color: var(--beta-ink); border: 1px solid var(--beta-ink); box-shadow: 3px 3px 0 var(--beta-ink); transition: transform .12s steps(2,end), box-shadow .12s steps(2,end); }
.beta-menu-trigger:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--beta-ink); }
.beta-menu-trigger span { margin-left: 9px; }
.beta-menu-panel { position: absolute; top: calc(100% + 2px); left: 0; right: 0; max-height: min(75vh,700px); overflow: auto; padding: clamp(20px,3vw,40px); background: var(--beta-ink); color: #fff; box-shadow: 0 14px 24px #1719233d; }
.beta-menu-panel[hidden] { display: none; }
.beta-menu-intro span, .beta-home-paths-head span { display: block; font: 600 11px/1.3 'IBM Plex Mono',monospace; letter-spacing: .12em; color: var(--beta-lemon); }
.beta-menu-intro strong { display: block; margin-top: 9px; font: 700 clamp(30px,4vw,54px)/.95 'Barlow Condensed',sans-serif; }
.beta-menu-intro p { margin: 10px 0 26px; color: #c9ceda; font: 500 15px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-menu-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.beta-menu-group { border-top: 2px solid var(--beta-lemon); }
.beta-menu-group summary { cursor: pointer; padding: 12px 0; list-style: none; font: 700 21px/1 'Barlow Condensed',sans-serif; }
.beta-menu-group summary::-webkit-details-marker { display: none; }
.beta-menu-group summary::after { content: ' +'; color: var(--beta-lemon); }
.beta-menu-group[open] summary::after { content: ' −'; }
.beta-menu-group ul { list-style: none; margin: 0; padding: 0 0 10px; }
.beta-menu-group li { margin: 0; padding: 0; }
.beta-menu-group a { display: block; padding: 7px 2px; color: #e8eaf0; font: 500 14px/1.25 'Atkinson Hyperlegible Next',sans-serif; }
.beta-menu-group a::before { content: '▸'; display: inline-block; width: 14px; color: var(--beta-lemon); opacity: 0; }
.beta-menu-group a:hover::before, .beta-menu-group a:focus-visible::before { opacity: 1; }
.beta-menu-group a:hover { color: var(--beta-lemon); text-decoration: underline; }
.beta-home-hero { display: block !important; min-height: 0 !important; margin: 0 0 58px !important; padding: clamp(20px,3vw,40px) 0 0 !important; }
.beta-home-stage { position: relative; min-height: 700px; overflow: hidden; border: 4px solid var(--beta-ink); background: #d8d5ff; box-shadow: 12px 12px 0 var(--beta-violet); isolation: isolate; }
.beta-home-stage::before { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; border: 12px solid rgba(255,255,255,.22); }
.beta-home-copy { position: absolute; z-index: 3; left: clamp(22px,5vw,72px); top: clamp(30px,7vw,88px); width: min(610px,58%); padding: clamp(20px,3vw,36px); background: rgba(23,26,46,.94); box-shadow: 12px 12px 0 rgba(83,216,223,.85); color: #fff; }
.beta-home-hero .rub { color: var(--beta-lemon) !important; font: 700 11px/1.3 'IBM Plex Mono',monospace !important; letter-spacing: .12em; }
main.moderne .beta-home-hero h1 { max-width: none; margin: 18px 0 20px !important; color: #fff !important; font-size: clamp(58px,7vw,105px) !important; line-height: .82 !important; letter-spacing: -.035em; }
main.moderne .beta-home-hero h1 em { color: #c8bdff !important; }
.beta-home-hero .sous { max-width: 570px; margin: 0 0 24px !important; color: #edf0f8 !important; font-size: clamp(16px,1.4vw,20px) !important; line-height: 1.45 !important; }
.beta-home-start { display: inline-flex; align-items: center; gap: 10px; min-height: 45px; padding: 10px 15px; border: 2px solid var(--beta-lemon); background: var(--beta-lemon); color: var(--beta-ink) !important; text-decoration: none; font: 800 12px/1.2 'IBM Plex Mono',monospace; box-shadow: 5px 5px 0 #53d8df; }
.beta-home-start:hover, .beta-home-start:focus-visible { color: #fff !important; background: var(--beta-violet); }
.beta-home-status { position: absolute; z-index: 3; right: 20px; bottom: 18px; display: grid; grid-template-columns: repeat(2,auto); gap: 2px; padding: 2px; background: var(--beta-ink); }
.beta-home-status span { display: flex; align-items: baseline; gap: 7px; min-width: 150px; padding: 9px 12px; background: rgba(245,244,255,.94); color: var(--beta-ink); font: 700 9px/1 'IBM Plex Mono',monospace; }
.beta-home-status b { color: var(--beta-violet); font-size: 17px; }
.beta-home-signal { position: absolute; z-index: 1; inset: -42px -18px -30px 34%; display: grid; place-items: center; overflow: hidden; opacity: .72; }
.beta-home-signal svg { display: block; width: min(100%,760px); height: auto; transform: scale(1.08); }
.px16-scene { opacity: .92; }
.px16-sky-a { fill: #f5f4ff; }.px16-sky-b { fill: #d8d5ff; }.px16-sky-c { fill: #aaa1f4; }
.px16-dither { fill: url(#px16-dither); color: #7665dc; opacity: .22; }.px16-dither + * { color: #7665dc; }
.beta-home-signal pattern rect { fill: #7665dc; }
.px16-stars { fill: #fff; animation: px16-twinkle 2.8s steps(2,end) infinite; }
.px16-outline,.px16-cup-outline { fill: #171a2e; }.px16-planet-mid { fill: #6848f4; }.px16-planet-light { fill: #cabfff; }
.px16-planet-shadow { fill: #473399; }.px16-bean-cut { fill: #171a2e; }.px16-ring { fill: #d0f440; opacity: .86; }
.px16-molecule { fill: #171a2e; }.px16-molecule rect { fill: #53d8df; }.px16-molecule .px16-node { fill: #d0f440; }
.px16-stem-dark { fill: #17213a; }.px16-stem-light { fill: #53a881; }.px16-leaf-dark { fill: #23506c; }.px16-leaf-light { fill: #70d79d; }
.px16-cherries { fill: #ef4f83; }.px16-cherries .px16-cherry-shine { fill: #ffd0d8; }
.px16-back { fill: #4d42a8; }.px16-front { fill: #171a2e; }.px16-windows { fill: #d0f440; animation: px16-windows 3.2s steps(2,end) infinite; }
.px16-cup-shadow { fill: #4d42a8; }.px16-cup-light { fill: #f5f4ff; }.px16-coffee { fill: #ef4f83; }.px16-saucer { fill: #171a2e; }
.px16-steam { fill: #53d8df; animation: px16-steam 2.2s steps(3,end) infinite; }.px16-cup-mark { fill: #6848f4; }
.px16-hud rect { fill: #171a2e; }.px16-hud text { fill: #f5f4ff; font: 700 11px/1 'IBM Plex Mono',monospace; letter-spacing: .08em; }.px16-hud > text { fill: #171a2e; }
.px16-sparkles { fill: #d0f440; animation: px16-twinkle 1.6s steps(2,end) infinite reverse; }
.px16-frame { fill: none; stroke: #171a2e; stroke-width: 4; stroke-linejoin: miter; opacity: .78; }
@keyframes px16-twinkle { 0%,49% { opacity: 1; } 50%,100% { opacity: .35; } }
@keyframes px16-windows { 0%,49% { fill: #d0f440; } 50%,100% { fill: #53d8df; } }
@keyframes px16-steam { 0% { transform: translateY(8px); opacity: .3; } 50% { opacity: 1; } 100% { transform: translateY(-8px); opacity: .25; } }
.beta-home-command { display: grid; grid-template-columns: minmax(180px,.55fr) minmax(360px,1fr); gap: 10px 24px; align-items: end; margin: 22px 0 0; padding: 20px; border: 2px solid var(--beta-ink); background: #fff; box-shadow: 7px 7px 0 #53d8df; }
.beta-home-command > div { display: flex; flex-direction: column; gap: 5px; }
.beta-home-command > div b { color: var(--beta-violet); font: 800 12px/1 'IBM Plex Mono',monospace; letter-spacing: .08em; }
.beta-home-command > div span { color: #4b5262; font-size: 14px; }
.beta-home-command .grandchamp { display: grid; grid-template-columns: minmax(0,1fr) auto; width: 100%; }
.beta-home-command .grandchamp :is(input,button) { border-radius: 0 !important; }
.beta-home-command .suggest { grid-column: 1 / -1; margin: 4px 0 0 !important; }
.beta-home-ai { display: grid; grid-template-columns: auto minmax(260px,1fr) auto; gap: 10px 20px; align-items: center; margin-top: 20px; padding: 15px 18px; border: 1px solid var(--beta-ink); border-left: 7px solid var(--beta-lemon); background: #f4f1ff; }
.beta-home-ai b { color: var(--beta-ink); font: 700 19px/1 'Barlow Condensed',sans-serif; }
.beta-home-ai p { margin: 0 !important; color: #424957 !important; font: 500 13px/1.4 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-home-ai a { font: 700 12px/1.25 'Atkinson Hyperlegible Next',sans-serif; white-space: nowrap; }
.beta-home-paths { margin: 0 auto 48px; padding: clamp(22px,3vw,42px); background: var(--beta-ink); color: #fff; border: 4px solid var(--beta-ink); box-shadow: 10px 10px 0 var(--beta-violet); }
.beta-home-paths-head span { color: var(--beta-lemon); }
.beta-home-paths-head h2 { margin: 12px 0 0; color: #fff; font: 800 clamp(36px,5vw,68px)/.9 'Barlow Condensed',sans-serif !important; }
.beta-home-paths-head p { max-width: 580px; margin: 13px 0 25px; color: #d8dbe4 !important; font-size: 16px; }
.beta-home-path-grid { position: relative; display: grid; gap: 0; border: 2px solid #fff; background: #fff; }
.beta-home-path-grid a { display: grid; grid-template-columns: 54px 54px minmax(220px,1.25fr) minmax(220px,1fr) auto; gap: 16px; align-items: center; min-height: 112px; padding: 14px 18px; border-bottom: 2px solid var(--beta-ink); background: var(--beta-paper); color: var(--beta-ink) !important; text-decoration: none; transition: background .18s, transform .18s; }
.beta-home-path-grid a:last-child { border-bottom: 0; }
.beta-home-path-grid a:hover, .beta-home-path-grid a:focus-visible { z-index: 1; background: var(--beta-lemon); transform: translateX(8px); }
.beta-home-path-grid a > span { color: var(--beta-violet); font: 800 13px/1 'IBM Plex Mono',monospace; }
.beta-home-path-grid i { display: grid; width: 44px; height: 44px; place-items: center; border: 2px solid var(--beta-ink); background: #fff; color: var(--beta-violet); font: 800 22px/1 'IBM Plex Mono',monospace; box-shadow: 4px 4px 0 var(--beta-violet); }
.beta-home-path-grid strong { display: block; font: 700 clamp(23px,2.4vw,34px)/1 'Barlow Condensed',sans-serif; }
.beta-home-path-grid small { display: block; font: 500 14px/1.35 'Atkinson Hyperlegible Next',sans-serif; }
.beta-home-path-grid b { padding: 8px 10px; border: 2px solid var(--beta-ink); font: 800 10px/1 'IBM Plex Mono',monospace; white-space: nowrap; }
.beta-subject-index { margin: 0 auto 50px; padding: clamp(22px,3vw,44px); background: #e9ecf2; color: var(--beta-ink); border-top: 4px solid var(--beta-violet); }
.beta-subject-intro { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; column-gap: 24px; }
.beta-subject-intro > span { grid-column: 1 / -1; color: var(--beta-violet); font: 700 11px/1.2 'IBM Plex Mono',monospace; letter-spacing: .13em; }
.beta-subject-intro h2 { margin: 10px 0 0; color: var(--beta-ink) !important; font: 800 clamp(38px,5vw,65px)/.95 'Barlow Condensed',sans-serif !important; }
.beta-subject-intro p { grid-column: 1; max-width: 720px; margin: 12px 0 0; color: var(--beta-ink) !important; font: 500 16px/1.45 'Atkinson Hyperlegible Next',sans-serif; }
.beta-subject-intro > a { grid-column: 2; grid-row: 2 / 4; color: var(--beta-violet) !important; font: 700 13px/1.25 'Atkinson Hyperlegible Next',sans-serif; text-underline-offset: 4px; }
.beta-subject-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 34px; }
.beta-subject-jumps a { display: inline-flex; align-items: center; min-height: 42px; padding: 7px 12px; border: 1px solid var(--beta-ink); background: #fff; color: var(--beta-ink) !important; text-decoration: none; font: 700 13px/1.2 'Atkinson Hyperlegible Next',sans-serif; }
.beta-subject-jumps a:hover, .beta-subject-jumps a:focus-visible { background: var(--beta-lemon); }
.beta-subject-group { margin-top: 10px; scroll-margin-top: 92px; border: 1px solid var(--beta-ink); background: #fff; }
.beta-subject-group[open] { box-shadow: 5px 5px 0 var(--beta-violet); }
.beta-subject-group > summary { display: grid; grid-template-columns: 66px minmax(0,1fr) auto 28px; gap: 8px 18px; align-items: center; min-height: 92px; padding: 16px 18px; cursor: pointer; list-style: none; }
.beta-subject-group > summary::-webkit-details-marker { display: none; }
.beta-subject-group > summary:hover { background: #f4f1ff; }
.beta-subject-group-no { color: var(--beta-violet) !important; font: 700 11px 'IBM Plex Mono',monospace; letter-spacing: .08em; }
.beta-subject-group-copy { display: flex; flex-direction: column; gap: 5px; }
.beta-subject-group-copy > strong { color: var(--beta-ink) !important; font: 700 clamp(26px,3vw,39px)/.95 'Barlow Condensed',sans-serif; }
.beta-subject-group-copy > span { color: #4b5262 !important; font: 500 13px/1.35 'Atkinson Hyperlegible Next',sans-serif; }
.beta-subject-count { color: #4b5262 !important; font: 600 11px 'IBM Plex Mono',monospace; white-space: nowrap; }
.beta-subject-group > summary > b { color: var(--beta-violet); font-size: 0; }
.beta-subject-group > summary > b::after { content: '+'; font: 700 26px/1 'Atkinson Hyperlegible Next',sans-serif; }
.beta-subject-group[open] > summary > b::after { content: '−'; }
.beta-subject-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.beta-subject-group[open] .beta-subject-grid { padding: 0 18px 18px; }
.beta-subject-grid li { min-width: 0; margin: 0; padding: 0; list-style: none; }
.beta-subject-card { display: grid; grid-template-columns: 104px minmax(0,1fr) 16px; align-items: center; gap: 15px; min-height: 104px; padding: 8px 15px 8px 8px; border: 1px solid var(--beta-line); background: #fff; color: var(--beta-ink) !important; text-decoration: none; transition: border-color .18s, box-shadow .18s, transform .18s; }
.beta-subject-card:hover, .beta-subject-card:focus-visible { border-color: var(--beta-violet); box-shadow: 4px 4px 0 var(--beta-violet); transform: translate(-2px,-2px); }
.beta-subject-card, .beta-home-path-grid a { transition-timing-function: steps(2,end); }
.beta-subject-card img { display: block; width: 104px; height: 88px; object-fit: cover; background: #d9dfe9; }
.beta-subject-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.beta-subject-copy strong { color: var(--beta-ink) !important; font: 700 clamp(20px,2vw,26px)/1.05 'Barlow Condensed',sans-serif; }
.beta-subject-copy > span { color: #515869 !important; font: 500 13px/1.3 'Atkinson Hyperlegible Next',sans-serif; }
.beta-subject-arrow { align-self: start; color: var(--beta-violet) !important; font: 700 18px/1 'Atkinson Hyperlegible Next',sans-serif; }
.beta-subject-index :focus-visible { outline: 3px solid var(--beta-violet); outline-offset: 3px; }
.beta-process-lab { position: relative; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: min(1100px,calc(100vw - 34px)); margin: 34px 0 42px; padding: clamp(20px,3vw,42px); border: 2px solid var(--beta-ink); border-top: 7px solid var(--beta-violet); background: #e9ecf2; color: var(--beta-ink); }
.beta-process-lab * { box-sizing: border-box; }
.beta-process-top > span { color: var(--beta-violet); font: 700 11px/1.2 'IBM Plex Mono',monospace; letter-spacing: .13em; }
body .beta-process-lab .beta-process-top h2 { max-width: 900px; margin: 11px 0 13px !important; color: var(--beta-ink) !important; font: 800 clamp(40px,5.5vw,70px)/.9 'Barlow Condensed',sans-serif !important; letter-spacing: -.025em; }
body .beta-process-lab .beta-process-top p { max-width: 750px; margin: 0 0 24px !important; color: var(--beta-ink) !important; font: 500 16px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-process-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 20px; padding: 12px 0; border-top: 1px solid var(--beta-line); border-bottom: 1px solid var(--beta-line); }
.beta-process-legend > span:first-child { margin-right: 8px; color: var(--beta-violet); font: 700 10px 'IBM Plex Mono',monospace; letter-spacing: .08em; }
.beta-layer { display: inline-block; padding: 5px 7px; color: var(--beta-ink); border: 1px solid var(--beta-ink); font: 700 10px/1.1 'Atkinson Hyperlegible Next',sans-serif; white-space: nowrap; }
.beta-layer-1 { background: #f3a8b1; }
.beta-layer-2 { background: #f8c488; }
.beta-layer-3 { background: var(--beta-lemon); }
.beta-layer-4 { background: #d0d5df; }
.beta-layer-5 { background: #a6e3d1; }
.beta-layer.is-gone { background: transparent; border-style: dashed; color: #667083; text-decoration: line-through; opacity: .75; }
.beta-process-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 12px; }
.beta-process-route { min-width: 0; border: 1px solid var(--beta-ink); background: #fff; }
.beta-process-route[open] { box-shadow: 5px 5px 0 var(--beta-violet); }
.beta-process-route summary { display: grid; grid-template-columns: minmax(0,1fr) 25px; gap: 5px 10px; min-height: 128px; padding: 16px 18px; cursor: pointer; list-style: none; }
.beta-process-route summary::-webkit-details-marker { display: none; }
.beta-process-route summary:hover { background: #f6f4ff; }
.beta-process-route summary:focus-visible { outline: 3px solid var(--beta-violet); outline-offset: 2px; }
.beta-process-route-no { grid-column: 1; color: var(--beta-violet); font: 700 11px 'IBM Plex Mono',monospace; }
.beta-process-route summary strong { grid-column: 1; color: var(--beta-ink); font: 700 clamp(27px,3vw,35px)/.95 'Barlow Condensed',sans-serif; }
.beta-process-route summary > span:nth-of-type(2) { grid-column: 1; color: #4b5262; font: 500 13px/1.3 'Atkinson Hyperlegible Next',sans-serif; }
.beta-process-route summary b { grid-column: 2; grid-row: 1 / 4; justify-self: end; color: var(--beta-violet); font-size: 0; }
.beta-process-route summary b::after { content: '+'; font: 700 24px/1 'Atkinson Hyperlegible Next',sans-serif; }
.beta-process-route[open] summary b::after { content: '−'; }
.beta-process-route-body { padding: 0 18px 18px; }
.beta-process-route-body ol { margin: 0; padding: 0; list-style: none; }
.beta-process-route-body li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 8px; margin: 0; padding: 16px 0; border-top: 1px solid var(--beta-line); list-style: none; }
.beta-process-step-no { color: var(--beta-violet); font: 700 11px 'IBM Plex Mono',monospace; }
.beta-process-route-body h4 { margin: 0 0 6px; color: var(--beta-ink); font: 700 21px/1 'Barlow Condensed',sans-serif; }
.beta-process-lab .beta-process-route-body li p { margin: 0; color: var(--beta-ink) !important; font: 500 13px/1.4 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-layer-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 6px; }
.beta-process-route-body li .beta-process-state { color: #51596b; font-size: 11px; }
.beta-process-route-body > a { display: inline-block; margin-top: 17px; color: var(--beta-violet); font: 700 13px 'Atkinson Hyperlegible Next',sans-serif; text-underline-offset: 3px; }
.beta-process-lab#comparer-process .beta-process-caveat { max-width: 830px; margin: 24px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--beta-line); color: #41495a !important; font: 500 12px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-process-motion { overflow: hidden; background: #e7ebf3; }
/* Tous les process en mouvement : un sélecteur par chapitre, un cadre pour la scène. */
.beta-process-chapitre { margin: 0 0 14px; }
body main.wrap .beta-process-lab .beta-process-chapitre h3, body .beta-process-lab .beta-process-chapitre h3 { margin: 0 0 7px !important; padding: 0 !important; color: var(--beta-violet) !important; font: 700 11px/1.2 'IBM Plex Mono',monospace !important; letter-spacing: .13em !important; text-transform: uppercase !important; border: 0 !important; background: none !important; }
.beta-process-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.beta-process-choix button, .beta-process-choix-lien { display: inline-block; min-width: 0; margin: 0; padding: 8px 11px; border: 1px solid var(--beta-ink); background: #fff; color: var(--beta-ink); font: 700 14px/1.2 'Atkinson Hyperlegible Next',sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
.beta-process-choix button[aria-pressed="true"] { color: #fff; background: var(--beta-ink); box-shadow: inset 0 -4px var(--beta-lemon); }
.beta-process-choix button:focus-visible, .beta-process-choix-lien:focus-visible { outline: 3px solid var(--beta-violet); outline-offset: 2px; }
.beta-process-choix-lien { border-style: dashed; color: #41495a; }
.beta-process-choix-lien small { display: block; font: 500 10px/1.2 'IBM Plex Mono',monospace; }
.beta-process-cadre { margin-top: 18px; }
.beta-process-cadre .beta-process-story { margin: 0; }
/* Deux procédés côte à côte, au-dessus de 1 000 px (traitement.html). */
.beta-process-duo-bascule { margin: 12px 0 4px; padding: 10px 14px; border: 2px solid var(--beta-violet); background: #fff; color: var(--beta-violet); font: 700 15px/1.2 'Atkinson Hyperlegible Next',sans-serif; cursor: pointer; }
.beta-process-duo-bascule[aria-pressed="true"] { color: #fff; background: var(--beta-violet); }
.beta-process-duo[hidden], .beta-process-duo-bascule[hidden] { display: none !important; }
.beta-process-duo-barre { position: sticky; top: 56px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin: 14px 0 12px; padding: 10px 12px; background: var(--beta-paper); border-top: 2px solid var(--beta-ink); border-bottom: 1px solid var(--beta-line); }
.beta-process-duo-aide { margin: 0 !important; color: #41495a !important; font: 500 14px/1.4 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-process-duo-pas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.beta-process-duo-pas button { min-height: 40px; padding: 8px 12px; border: 1px solid var(--beta-ink); background: #fff; color: var(--beta-ink); font: 700 14px/1.2 'Atkinson Hyperlegible Next',sans-serif; cursor: pointer; }
.beta-process-duo-pas button[data-duo-lire] { color: #fff; background: var(--beta-ink); }
.beta-process-duo-pas button[aria-pressed="true"] { box-shadow: inset 0 -4px var(--beta-lemon); }
.beta-process-duo-pas [data-duo-etape] { min-width: 9ch; color: var(--beta-violet); font: 600 13px/1.2 'IBM Plex Mono',monospace; }
.beta-process-duo-cadres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.beta-process-duo-cote > label { display: grid; gap: 6px; color: var(--beta-violet); font: 700 12px/1.2 'IBM Plex Mono',monospace; letter-spacing: .08em; text-transform: uppercase; }
.beta-process-duo-cote select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--beta-ink); background: #fff; color: var(--beta-ink); font: 600 15px/1.2 'Atkinson Hyperlegible Next',sans-serif; text-transform: none; letter-spacing: 0; }
.beta-process-duo-cote .beta-process-cadre { margin-top: 10px; }
/* Dans un demi-cadre, la scène ne sort plus de sa colonne (elle est pensée pour
   la pleine largeur : `left:50%; transform:translateX(-50%); width:min(1060px,…)`)
   et passe en une colonne, comme sur un écran étroit. */
.beta-process-duo-cote .beta-process-story { left: auto; transform: none; width: auto; margin: 0; padding: 14px; }
.beta-process-duo-cote .beta-story-head h2 { font-size: clamp(26px, 2.6vw, 36px) !important; }
.beta-process-duo-cote .beta-scene { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
.beta-process-duo-cote .beta-scene-titre { font-size: 26px; }
.beta-process-duo-cote .beta-story-controls { flex-wrap: wrap; }
.beta-process-duo-cote .beta-story-head p, .beta-process-duo-cote .beta-story-written { display: none; }
.beta-process-liste .beta-process-choix-fiche { border-style: solid; color: var(--beta-ink); }
.beta-process-liste .beta-process-choix-fiche:hover { background: #e8e2ff; }
.beta-process-fiche-lien { margin: 12px 0 0 !important; }
.beta-process-fiche-lien a { color: var(--beta-violet); font: 700 13px 'Atkinson Hyperlegible Next',sans-serif; text-underline-offset: 3px; }
.beta-process-route-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 0 0 12px; }
.beta-process-route-tabs button { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 2px 8px; min-width: 0; min-height: 82px; padding: 10px; text-align: left; border: 1px solid var(--beta-ink); background: #fff; color: var(--beta-ink); }
.beta-process-route-tabs button > span { grid-row: 1 / 3; color: var(--beta-violet); font: 700 10px 'IBM Plex Mono',monospace; }
.beta-process-route-tabs button strong { font: 700 20px/1 'Barlow Condensed',sans-serif; }
.beta-process-route-tabs button small { overflow-wrap: anywhere; color: #51596b; font: 500 10px/1.25 'Atkinson Hyperlegible Next',sans-serif; }
.beta-process-route-tabs button[aria-pressed="true"] { color: #fff; background: var(--beta-ink); box-shadow: inset 0 -5px var(--beta-lemon); }
.beta-process-route-tabs button[aria-pressed="true"] small { color: #e1e5ee; }
.beta-process-route-tabs button:focus-visible, .beta-process-console button:focus-visible { outline: 3px solid var(--beta-violet); outline-offset: 2px; }
.beta-process-stage { position: relative; overflow: hidden; border: 2px solid var(--beta-ink); background: #cfd8ec; }
.beta-process-machine { display: block; width: 100%; height: auto; aspect-ratio: 24 / 11; }
.beta-process-machine * { vector-effect: non-scaling-stroke; }
.proc-sky { fill: #d9e5f1; }.proc-ground { fill: #cad8ba; }
.proc-scene { opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.proc-scene.is-active { opacity: 1; }
.proc-scene path, .proc-scene circle { stroke: #171a2e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.proc-basket,.proc-bed,.proc-channel,.proc-partial-bed,.proc-final-bed { fill: #f5f4ff; stroke: #171a2e; stroke-width: 4; }
.proc-pulper,.proc-huller,.proc-wet-huller { fill: #6848f4; stroke: #171a2e; stroke-width: 4; }
.proc-pulper circle,.proc-huller circle,.proc-wet-huller circle { fill: #aaa1f4; }
.proc-tank { fill: #f5f4ff; stroke: #171a2e; stroke-width: 4; }.proc-tank path:nth-child(2) { fill: #53d8df; opacity: .58; }
.proc-sun { fill: #d0f440; stroke: #171a2e; stroke-width: 4; transform-box: fill-box; transform-origin: center; }
.proc-rake { fill: none; stroke: #171a2e; stroke-width: 6; transform-box: fill-box; transform-origin: center; opacity: .18; }
.proc-skin { fill: #d9415c; transition: fill .65s ease; }.proc-cherry-stem { fill: none; stroke: #557343; stroke-width: 5; }.proc-cherry-calyx { fill: #6f273d; stroke: #171a2e; stroke-width: 2; }.proc-cherry-shine { fill: none; stroke: #f5f4ff; stroke-width: 3; opacity: .72; }.proc-cherry-wrinkle { fill: none; stroke: #171a2e; stroke-width: 2.5; opacity: 0; transition: opacity .4s ease; }.proc-mucilage { fill: #d0f440; stroke: #171a2e; stroke-width: 3; }.proc-parchment { fill: #e5c16f; }.proc-parchment-seam,.proc-parchment-fibres { fill: none; stroke: #755d31; stroke-width: 2.5; }.proc-bean { fill: #76a88a; }.proc-bean-line { fill: none; stroke: #171a2e; stroke-width: 3; }
.proc-main-fruit,.proc-mid-bean,.proc-output-bean,.proc-wet-bean { transform-box: fill-box; transform-origin: center; transition: transform .72s cubic-bezier(.2,.8,.2,1),opacity .35s ease; }
.proc-output-bean,.proc-wet-bean,.proc-husks,.proc-pulp-out,.proc-mucilage-out,.proc-water-loss,.proc-drops { opacity: 0; transition: opacity .35s ease; }
.proc-dry-fruits { opacity: 0; transition: opacity .35s ease; }
.proc-dry-fruits use { transform-box: fill-box; transform-origin: center; }
.proc-water-loss,.proc-drops { fill: none; stroke: #53d8df; stroke-width: 5; }
.proc-bubbles { fill: #f5f4ff; opacity: .18; }.proc-sticky { opacity: 0; transition: opacity .35s ease; }
.proc-pulp-out { fill: #ef4f83; stroke: #171a2e; stroke-width: 3; }.proc-mucilage-out { fill: #d0f440; stroke: #171a2e; stroke-width: 3; }
.proc-husks { fill: #ef4f83; stroke: #171a2e; stroke-width: 3; }

.beta-process-motion[data-step="1"] .proc-sun { animation: proc-sun 5s linear infinite; }
.beta-process-motion[data-step="1"] [data-process-scene="dry"] .proc-main-fruit { transform: translate(265px,16px) scale(.78); }
.beta-process-motion[data-step="1"] [data-process-scene="dry"] .proc-dry-fruits { opacity: 1; }
.beta-process-motion[data-step="1"] [data-process-scene="dry"] :is(.proc-dry-fruits,.proc-main-fruit) .proc-skin { fill: #7e3a67; }
.beta-process-motion[data-step="1"] [data-process-scene="dry"] :is(.proc-dry-fruits,.proc-main-fruit) .proc-cherry-wrinkle { opacity: .8; }
.beta-process-motion[data-step="1"] [data-process-scene="dry"] :is(.proc-dry-fruits,.proc-main-fruit) .proc-cherry-shine { opacity: .18; }
.beta-process-motion[data-step="1"] [data-process-scene="dry"] .proc-dry-fruits use { animation: proc-dry 2.8s ease-in-out infinite alternate; }
.beta-process-motion[data-step="1"] [data-process-scene="dry"] .proc-rake { opacity: 1; animation: proc-rake 3.2s ease-in-out infinite alternate; }
.beta-process-motion[data-step="1"] [data-process-scene="dry"] .proc-water-loss { opacity: 1; animation: proc-evaporate 2s ease-in-out infinite; }
.beta-process-motion[data-step="2"] [data-process-scene="dry"] .proc-main-fruit { transform: translate(650px,-42px) scale(.64); }
.beta-process-motion[data-step="2"] [data-process-scene="dry"] .proc-husks,.beta-process-motion[data-step="2"] [data-process-scene="dry"] .proc-output-bean { opacity: 1; }
.beta-process-motion[data-step="2"] [data-process-scene="dry"] .proc-output-bean { animation: proc-output 1.4s ease-in-out infinite alternate; }

.beta-process-motion[data-route="washed"][data-step="1"] .proc-main-fruit,.beta-process-motion[data-route="honey"][data-step="1"] .proc-main-fruit,.beta-process-motion[data-route="wet"][data-step="1"] .proc-main-fruit { transform: translate(125px,15px) scale(.72); }
.beta-process-motion[data-route="washed"][data-step="1"] .proc-pulp-out,.beta-process-motion[data-route="honey"][data-step="1"] .proc-pulp-out { opacity: 1; animation: proc-pulp 1.6s ease-in-out infinite alternate; }
.beta-process-motion[data-route="washed"][data-step="1"] .proc-mid-bean { transform: translate(112px,35px); }
.beta-process-motion[data-route="washed"][data-step="2"] .proc-mid-bean { transform: translate(310px,52px); }
.beta-process-motion[data-route="washed"][data-step="2"] .proc-bubbles { opacity: 1; animation: proc-bubbles 2s linear infinite; }
.beta-process-motion[data-route="washed"][data-step="2"] .proc-mucilage-out { opacity: 1; animation: proc-wash 2.2s ease-in-out infinite alternate; }
.beta-process-motion[data-route="washed"][data-step="3"] .proc-output-bean { opacity: 1; animation: proc-dry 2.8s ease-in-out infinite alternate; }
.beta-process-motion[data-route="washed"][data-step="4"] .proc-output-bean { opacity: 1; transform: translate(82px,0) scale(.92); }

.beta-process-motion[data-route="honey"][data-step="1"] .proc-mid-bean { transform: translate(115px,12px); }
.beta-process-motion[data-route="honey"][data-step="1"] .proc-pulp-out { opacity: 1; }
.beta-process-motion[data-route="honey"][data-step="2"] .proc-mid-bean { transform: translate(235px,65px); }
.beta-process-motion[data-route="honey"][data-step="2"] .proc-sticky { opacity: .9; animation: proc-dry 2.8s ease-in-out infinite alternate; }
.beta-process-motion[data-route="honey"][data-step="3"] .proc-output-bean { opacity: 1; animation: proc-output 1.4s ease-in-out infinite alternate; }

.beta-process-motion[data-route="wet"][data-step="1"] .proc-mid-bean { transform: translate(105px,30px); }
.beta-process-motion[data-route="wet"][data-step="2"] .proc-mid-bean { transform: translate(270px,67px); }.beta-process-motion[data-route="wet"][data-step="2"] .proc-drops { opacity: 1; animation: proc-evaporate 1.8s ease-in-out infinite; }
.beta-process-motion[data-route="wet"][data-step="3"] .proc-wet-bean { opacity: 1; animation: proc-output 1.4s ease-in-out infinite alternate; }
.beta-process-motion[data-route="wet"][data-step="4"] .proc-output-bean { opacity: 1; animation: proc-dry 2.8s ease-in-out infinite alternate; }

.beta-process-console { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; align-items: start; margin-top: 10px; }
.beta-process-play { min-height: 46px; padding: 9px 13px; border: 1px solid var(--beta-ink); background: var(--beta-violet); color: #fff; font: 700 12px/1.2 'Atkinson Hyperlegible Next',sans-serif; }
.beta-process-play[aria-pressed="true"] { background: var(--beta-ink); box-shadow: inset 0 -4px var(--beta-lemon); }
.beta-process-stage-group { display: flex; flex-wrap: wrap; gap: 6px; }.beta-process-stage-group[hidden] { display: none; }
.beta-process-stage-group button { min-height: 46px; padding: 7px 10px; border: 1px solid #8790a1; background: #fff; color: var(--beta-ink); font: 700 11px/1.2 'Atkinson Hyperlegible Next',sans-serif; }
.beta-process-stage-group button span { margin-right: 5px; color: var(--beta-violet); font-family: 'IBM Plex Mono',monospace; }
.beta-process-stage-group button[aria-pressed="true"] { border-color: var(--beta-ink); background: var(--beta-lemon); box-shadow: 3px 3px 0 var(--beta-violet); }
.beta-process-lab .beta-process-status { min-height: 54px; margin: 10px 0 0 !important; padding: 12px 14px; border-left: 5px solid var(--beta-violet); background: #fff; color: var(--beta-ink) !important; font: 600 13px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-process-written { margin-top: 9px; }.beta-process-written details { border-top: 1px solid var(--beta-line); }.beta-process-written details[hidden] { display: none; }
.beta-process-written summary { padding: 10px 0; cursor: pointer; color: var(--beta-ink); font: 700 12px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-process-written ol { display: grid; gap: 5px; margin: 0 0 10px; padding: 0; list-style: none; }.beta-process-written li { display: grid; grid-template-columns: minmax(120px,.32fr) minmax(0,1fr); gap: 10px; padding: 8px 10px; background: #fff; }.beta-process-written li b { font: 700 14px 'Barlow Condensed',sans-serif; }.beta-process-written li span { font: 500 11px/1.4 'Atkinson Hyperlegible Next',sans-serif; }.beta-process-written a { color: var(--beta-violet); font: 700 12px 'Atkinson Hyperlegible Next',sans-serif; }
@keyframes proc-sun { to { transform: rotate(360deg); } }
@keyframes proc-rake { to { transform: translateX(105px) rotate(6deg); } }
@keyframes proc-dry { to { transform: translateY(-7px) scale(.91); } }
@keyframes proc-evaporate { 50% { opacity: .2; transform: translateY(-12px); } }
@keyframes proc-output { to { transform: translateX(10px) rotate(4deg); } }
@keyframes proc-pulp { to { transform: translateY(12px) rotate(12deg); } }
@keyframes proc-bubbles { to { transform: translateY(-52px); opacity: .08; } }
@keyframes proc-wash { to { transform: translateX(35px); opacity: .2; } }
.beta-process-story { position: relative; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: min(1060px,calc(100vw - 34px)); margin: 26px 0 36px; padding: clamp(20px,3vw,38px); background: #e9ecf2; border: 2px solid var(--beta-ink); border-top: 6px solid var(--beta-violet); color: var(--beta-ink); }
.beta-process-story * { box-sizing: border-box; }
.beta-archive-warning { max-width: 720px; margin: 8px 0 18px !important; padding: 11px 14px; border-left: 3px solid var(--beta-violet); background: #f2f0fa; color: var(--beta-ink) !important; font: 500 13px/1.5 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-hub-lead { max-width: 700px; margin-bottom: 18px !important; }
.beta-hub-context { max-width: 700px; margin: 0 0 22px; padding: 11px 15px; border: 1px solid var(--beta-ink); background: #fff; }
.beta-hub-context summary { cursor: pointer; color: var(--beta-ink); font: 700 14px/1.45 'Atkinson Hyperlegible Next',sans-serif; }
.beta-hub-context .lead { margin: 14px 0 0 !important; font-size: 17px !important; line-height: 1.55 !important; }
.beta-story-head > span { color: var(--beta-violet); font: 700 11px/1.2 'IBM Plex Mono',monospace; letter-spacing: .12em; }
.beta-story-head h2 { max-width: 860px; margin: 10px 0 9px !important; color: var(--beta-ink) !important; font: 800 clamp(35px,4.6vw,57px)/.93 'Barlow Condensed',sans-serif !important; }
.beta-story-head p { max-width: 690px; margin: 0 0 24px !important; color: #475062 !important; font: 500 15px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-story-steps { display: grid; grid-template-columns: repeat(var(--count,3),minmax(0,1fr)); gap: 16px; margin: 0 0 19px; padding: 0; list-style: none; }
.beta-story-steps li { position: relative; min-width: 0; margin: 0; padding: 17px; border: 1px solid var(--beta-ink); background: #fff; list-style: none; }
.beta-story-steps li:not(:last-child)::after { content: '›'; position: absolute; right: -15px; top: 44px; z-index: 1; color: var(--beta-violet); font: 800 30px/1 'Barlow Condensed',sans-serif; }
.beta-story-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 15px; border: 1px solid var(--beta-ink); background: var(--beta-lemon); color: var(--beta-ink); }
.beta-story-icon svg { width: 60px; height: 60px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.beta-story-steps strong { display: block; color: var(--beta-ink); font: 700 23px/1 'Barlow Condensed',sans-serif; }
.beta-story-steps p { margin: 7px 0 0 !important; color: #41495a !important; font: 500 13px/1.4 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-process-story .beta-story-point { margin: 0 0 12px !important; padding: 13px 15px; border-left: 4px solid var(--beta-violet); background: #fff; color: var(--beta-ink) !important; font: 600 14px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-process-story .beta-story-history { margin: 0 0 14px !important; color: #41495a !important; font: 500 13px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-story-read { display: inline-block; margin-top: 12px; color: var(--beta-violet) !important; font: 700 14px 'Atkinson Hyperlegible Next',sans-serif; text-underline-offset: 4px; }
.beta-story-controls { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.beta-story-controls button { min-height: 44px; padding: 8px 12px; border: 1px solid #59647a; background: #fff; color: var(--beta-ink); font: 700 12px/1.2 'Atkinson Hyperlegible Next',sans-serif; }
.beta-story-controls button span { margin-right: 6px; color: var(--beta-violet); font-family: 'IBM Plex Mono',monospace; }
.beta-story-controls button[aria-pressed="true"] { background: var(--beta-ink); color: #fff; box-shadow: 3px 3px 0 var(--beta-violet); }
.beta-story-controls .beta-story-play { background: var(--beta-violet); border-color: var(--beta-violet); color: #fff; }
.beta-story-stage { position: relative; min-height: 300px; overflow: hidden; background: #121b30; border-bottom: 5px solid var(--beta-lemon); }
.beta-story-visual { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,.42fr); align-items: center; gap: 20px; padding: clamp(18px,4vw,38px); color: #fff; }
.beta-story-visual[hidden] { display: none; }
.beta-story-visual > strong { color: #fff; font: 800 clamp(30px,5vw,58px)/.92 'Barlow Condensed',sans-serif; }
.beta-story-apparatus { position: relative; min-width: 0; height: 218px; overflow: hidden; border: 1px solid #53617c; background: repeating-linear-gradient(0deg,transparent 0 43px,rgba(255,255,255,.055) 43px 44px),linear-gradient(135deg,#1d2944,#11192b); }
.beta-story-apparatus::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 30px; height: 3px; background: #77839a; }
.beta-story-symbol { position: absolute; z-index: 2; left: 50%; top: 48%; display: grid; place-items: center; width: 132px; height: 132px; transform: translate(-50%,-50%); color: var(--beta-lemon); }
.beta-story-symbol svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.beta-story-coffee i { position: absolute; z-index: 3; bottom: 22px; left: 8%; width: 20px; height: 14px; border: 2px solid #111a2e; border-radius: 58% 42% 55% 45%; background: #9ee3cd; animation: beta-story-travel 3.4s linear infinite; }
.beta-story-coffee i::after { content: ''; position: absolute; left: 8px; top: 0; width: 2px; height: 11px; background: #344c47; transform: rotate(18deg); }
.beta-story-coffee i:nth-child(2) { animation-delay: -1.15s; }.beta-story-coffee i:nth-child(3) { animation-delay: -2.3s; }
.beta-story-particles i { position: absolute; z-index: 1; left: 50%; top: 52%; width: 10px; height: 10px; border: 2px solid #8bdcf3; border-radius: 50%; animation: beta-story-rise 2.8s ease-in infinite; }
.beta-story-particles i:nth-child(2) { margin-left: 29px; animation-delay: -.5s; }.beta-story-particles i:nth-child(3) { margin-left: -34px; animation-delay: -1s; }.beta-story-particles i:nth-child(4) { margin-left: 52px; animation-delay: -1.5s; }.beta-story-particles i:nth-child(5) { margin-left: -59px; animation-delay: -2s; }.beta-story-particles i:nth-child(6) { margin-left: 12px; animation-delay: -2.5s; }
.beta-story-visual-fruit .beta-story-symbol { animation: beta-story-pulse 1.8s ease-in-out infinite; color: #ff6b67; }.beta-story-visual-fruit .beta-story-particles { display: none; }
.beta-story-visual-layers .beta-story-symbol { animation: beta-story-pulse 2.2s ease-in-out infinite; }.beta-story-visual-layers .beta-story-particles i { animation-name: beta-story-orbit; border-color: #ffb45d; }
.beta-story-visual-grain .beta-story-symbol { animation: beta-story-sway 2.4s ease-in-out infinite; }.beta-story-visual-grain .beta-story-particles { display: none; }
.beta-story-visual-mill .beta-story-symbol { animation: beta-story-rattle .35s linear infinite alternate; }.beta-story-visual-mill .beta-story-particles i { border-radius: 0; border-color: #d9b177; animation-name: beta-story-drop; }
.beta-story-visual-tank .beta-story-particles i,.beta-story-visual-microbe .beta-story-particles i,.beta-story-visual-gas .beta-story-particles i { animation-name: beta-story-rise; }
.beta-story-visual-water .beta-story-particles i { width: 18px; height: 7px; border-width: 0 0 2px; border-radius: 50%; animation-name: beta-story-flow; }
.beta-story-visual-sun .beta-story-symbol { animation: beta-story-sun 4s linear infinite; }.beta-story-visual-sun .beta-story-particles i { border-color: #ffd65d; animation-name: beta-story-evaporate; }
.beta-story-visual-wind .beta-story-particles i { width: 27px; height: 8px; border-width: 2px 0 0; border-radius: 50%; animation-name: beta-story-flow; }
.beta-story-visual-microbe .beta-story-particles i { border-color: #d7f24a; animation-duration: 1.8s; }.beta-story-visual-microbe .beta-story-symbol { animation: beta-story-pulse 1.4s ease-in-out infinite; }
.beta-story-visual-gas .beta-story-particles i { border-color: #b6a8ff; animation-duration: 2s; }
.beta-story-visual-heat .beta-story-symbol { animation: beta-story-heat 1s ease-in-out infinite alternate; color: #ff765f; }.beta-story-visual-heat .beta-story-particles i { border-color: #ff765f; animation-name: beta-story-evaporate; }
.beta-story-visual-clock .beta-story-symbol { animation: beta-story-clock 8s linear infinite; }.beta-story-visual-clock .beta-story-particles { display: none; }
.beta-story-visual-lens .beta-story-symbol { animation: beta-story-scan 2.2s ease-in-out infinite; }.beta-story-visual-lens .beta-story-particles i { width: 3px; height: 120px; border: 0; border-radius: 0; background: rgba(215,242,74,.18); animation: beta-story-scanline 2.2s ease-in-out infinite; }
.beta-country-dossier p { max-width: 68ch; }
.beta-country-dossier .beta-ref { color: var(--beta-violet) !important; font: 600 11px 'IBM Plex Mono',monospace; text-decoration: none; margin-left: 2px; }
.beta-country-sources { margin: 8px 0 0; padding-left: 22px; font: 500 13px/1.45 'Atkinson Hyperlegible Next',sans-serif; }
.beta-country-sources li { margin: 0 0 8px; overflow-wrap: anywhere; }
.beta-country-sources a { word-break: break-all; }
.beta-country-sources small { color: #50586a; }
.beta-niveau { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid #c6cbd2; font: 600 10px 'IBM Plex Mono',monospace; }
.beta-niveau-solide { border-color: #1b7a4b; color: #1b7a4b; }
.beta-niveau-moyen { border-color: #8a6d00; color: #8a6d00; }
.beta-niveau-faible { border-color: #b3261e; color: #b3261e; }
.beta-country-non-traite { padding: 10px 12px; border-left: 4px solid #c6cbd2; color: #41495a !important; font-size: 13px !important; }
.beta-country-doute { grid-column: 1 / -1; padding: 10px 12px; border-left: 4px solid #ff6b67; background: #fff; }
.beta-country-doute dt { color: #b3261e !important; }
.beta-story-apparatus-attente { display: grid; place-items: center; padding: 18px; }
.beta-story-apparatus-attente::after { display: none; }
.beta-story-apparatus-attente p { margin: 0 !important; max-width: 30ch; color: #aab3c9 !important; text-align: center; font: 600 12px/1.45 'IBM Plex Mono',monospace !important; }
.beta-story-visual-demucilage .beta-story-apparatus { color: #fff; }
.beta-story-visual-demucilage .beta-story-apparatus::after { display: none; }
.demuc-pulper,.demuc-friction,.demuc-check { position: absolute; inset: 13px; font: 700 10px/1.2 'IBM Plex Mono',monospace; }
.demuc-hopper { position: absolute; left: 11%; top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: 120px; min-height: 54px; padding: 6px 12px 11px; background: #f3b9ad; color: #111a2e; text-align: center; clip-path: polygon(0 0,100% 0,78% 100%,22% 100%); }
.demuc-hopper b { flex-basis: 100%; font-size: 9px; }.demuc-cherry { position: relative; width: 13px; height: 17px; border-radius: 48% 52% 55% 45%; background: #d9434d; box-shadow: inset 3px 0 rgba(255,255,255,.23); }.demuc-cherry::before { content: ''; position: absolute; left: 6px; top: -4px; width: 2px; height: 5px; background: #79934a; }
.demuc-drum { position: absolute; left: 27%; top: 62px; width: 170px; height: 92px; border: 4px solid var(--beta-lemon); border-radius: 12px; background: #1a2742; }
.demuc-drum > i { position: absolute; left: 22px; top: 18px; width: 50px; height: 50px; border: 7px double var(--beta-lemon); border-radius: 50%; background: repeating-linear-gradient(90deg,transparent 0 7px,rgba(215,242,74,.35) 7px 10px); animation: demuc-rotate 2.2s linear infinite; }.demuc-drum > i::before { content: '↻'; position: absolute; left: 9px; top: 7px; color: #fff; font-size: 24px; }
.demuc-drum > b { position: absolute; left: 9px; bottom: 4px; color: #fff; font-size: 8px; }.demuc-drum > span { position: absolute; right: 8px; top: 17px; width: 53px; height: 53px; padding: 16px 2px 0; border-left: 6px solid #aab5c9; color: #c8d1e2; font-size: 8px; text-align: center; }
.demuc-feed { position: absolute; left: 14%; top: 95px; padding-right: 70px; color: #c8d1e2; }.demuc-feed::after { content: '→'; position: absolute; right: 15px; color: var(--beta-lemon); font-size: 28px; top: -10px; }
.demuc-pulp { position: absolute; left: 48%; bottom: 14px; padding: 8px 10px; background: #ff9a64; color: #111a2e; }.demuc-pulp::before { content: '↘'; position: absolute; left: -27px; top: -26px; color: #ff9a64; font-size: 28px; }
.demuc-parchment { position: absolute; right: 3%; top: 88px; padding: 10px; border: 2px solid #9ee3cd; color: #9ee3cd; }.demuc-parchment::before { content: '→'; position: absolute; left: -42px; top: 1px; color: var(--beta-lemon); font-size: 28px; }
.demuc-friction { display: grid; grid-template-columns: 108px minmax(210px,1fr) 108px; align-items: center; gap: 14px; }
.demuc-inlet,.demuc-outlet { padding: 11px 7px; border: 2px solid #9ee3cd; color: #9ee3cd; text-align: center; }.demuc-outlet { border-color: var(--beta-lemon); color: var(--beta-lemon); }
.demuc-chamber { position: relative; height: 125px; overflow: hidden; border: 4px solid #aab5c9; border-radius: 55px; background: #202c48; }
.demuc-chamber > b { position: absolute; left: 50%; top: 49%; z-index: 3; transform: translate(-50%,-50%); padding: 5px 8px; background: #111a2e; color: #fff; white-space: nowrap; }
.demuc-rotor { position: absolute; left: 12px; right: 12px; top: 45px; height: 29px; border: 3px solid var(--beta-lemon); border-radius: 15px; background: repeating-linear-gradient(90deg,var(--beta-lemon) 0 5px,#1b2742 5px 18px); animation: demuc-rotor 1.1s linear infinite; }
.demuc-beans i { position: absolute; top: 28px; left: 13%; width: 21px; height: 14px; border-radius: 58% 42%; background: #9ee3cd; animation: demuc-bean-flow 2.8s linear infinite; }.demuc-beans i:nth-child(2) { top: 83px; animation-delay: -.9s; }.demuc-beans i:nth-child(3) { top: 26px; animation-delay: -1.8s; }
.demuc-water { position: absolute; left: 25%; top: 2px; color: #8bdcf3; }.demuc-water::after { content: '↓  ↓'; display: block; font-size: 17px; letter-spacing: 9px; animation: demuc-water .9s ease-in-out infinite alternate; }
.demuc-waste { position: absolute; left: 48%; bottom: -2px; color: #ff9a64; }.demuc-waste::before { content: '↓'; display: block; text-align: center; color: #ff9a64; font-size: 21px; }
.demuc-check { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.demuc-good,.demuc-bad { display: grid; grid-template-columns: 100px 1fr; grid-template-rows: 1fr auto; align-items: center; padding: 14px; border: 2px solid #9ee3cd; background: #19253f; }.demuc-bad { border-color: #ff6b67; }
.demuc-good b,.demuc-bad b { color: #fff; font: 800 23px/1 'Barlow Condensed',sans-serif; }.demuc-good small,.demuc-bad small { grid-column: 2; color: #bfc9dc; }
.demuc-parchment-bean { grid-row: 1 / 3; position: relative; width: 64px; height: 88px; border: 4px solid #dfc686; border-radius: 55% 45% 52% 48%; background: #f0dda4; transform: rotate(9deg); }.demuc-parchment-bean::before { content: ''; position: absolute; left: 29px; top: 8px; width: 3px; height: 67px; background: #aa8c52; transform: rotate(8deg); }.demuc-parchment-bean::after { content: ''; position: absolute; inset: -9px; border: 2px dashed rgba(223,198,134,.55); border-radius: inherit; animation: beta-story-pulse 1.8s ease-in-out infinite; }
.demuc-parchment-bean.is-torn { border-color: #ff6b67; background: linear-gradient(118deg,#f0dda4 0 47%,#9ee3cd 48% 59%,#f0dda4 60%); clip-path: polygon(0 0,100% 0,100% 42%,73% 49%,100% 58%,100% 100%,0 100%); }.demuc-parchment-bean.is-torn::after { border-color: #ff6b67; }
@keyframes demuc-rotate { to { transform: rotate(360deg); } }
@keyframes demuc-rotor { to { background-position: 36px 0; } }
@keyframes demuc-bean-flow { from { transform: translateX(-25px) rotate(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateX(min(29vw,260px)) rotate(300deg); opacity: .3; } }
@keyframes demuc-water { to { transform: translateY(5px); opacity: .55; } }
.beta-story-status { min-height: 56px; margin: 0 0 13px !important; padding: 13px 15px; background: #222d48; color: #fff !important; font: 600 14px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-story-written { margin: 0 0 13px; padding: 10px 13px; background: #fff; border: 1px solid #9ca5b6; }
.beta-story-written summary { cursor: pointer; font: 700 13px 'Atkinson Hyperlegible Next',sans-serif; }.beta-story-written ol { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 22px; }.beta-story-written li { padding-left: 3px; }.beta-story-written b,.beta-story-written span { display: block; }.beta-story-written span { margin-top: 3px; color: #50586a; font: 500 12px/1.4 'Atkinson Hyperlegible Next',sans-serif; }
@keyframes beta-story-travel { from { transform: translateX(0) rotate(0); } to { transform: translateX(min(58vw,480px)) rotate(360deg); } }
@keyframes beta-story-rise { from { transform: translate(-50%,55px) scale(.65); opacity: 0; } 25% { opacity: 1; } to { transform: translate(-50%,-90px) scale(1.2); opacity: 0; } }
@keyframes beta-story-flow { from { transform: translate(-130px,0); opacity: 0; } 30% { opacity: 1; } to { transform: translate(130px,-12px); opacity: 0; } }
@keyframes beta-story-drop { from { transform: translate(-50%,-70px) rotate(0); opacity: 0; } to { transform: translate(-50%,70px) rotate(150deg); opacity: 1; } }
@keyframes beta-story-orbit { from { transform: translate(-50%,-50%) rotate(0) translateX(82px); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(82px); } }
@keyframes beta-story-evaporate { from { transform: translate(-50%,48px) scale(1); opacity: .9; } to { transform: translate(-50%,-85px) scale(.3); opacity: 0; } }
@keyframes beta-story-pulse { 50% { transform: translate(-50%,-50%) scale(1.08); } }
@keyframes beta-story-sway { 50% { transform: translate(-50%,-50%) rotate(7deg); } }
@keyframes beta-story-rattle { from { transform: translate(-51%,-50%) rotate(-1deg); } to { transform: translate(-49%,-50%) rotate(1deg); } }
@keyframes beta-story-sun { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes beta-story-heat { to { transform: translate(-50%,-53%) scale(1.04); filter: drop-shadow(0 0 16px #ff765f); } }
@keyframes beta-story-clock { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes beta-story-scan { 50% { transform: translate(-42%,-50%); } }
@keyframes beta-story-scanline { from { transform: translate(-110px,-60px); opacity: 0; } 50% { opacity: 1; } to { transform: translate(110px,-60px); opacity: 0; } }
.beta-chemistry { width: 100%; max-width: 100%; margin: 24px 0; padding: clamp(18px,3vw,31px); overflow: hidden; background: #121b30; color: #fff; border-bottom: 5px solid var(--beta-lemon); }
.beta-chemistry *, .beta-chemistry *::before, .beta-chemistry *::after { box-sizing: border-box; min-width: 0; }
.beta-site-lab { position: relative; left: 50%; transform: translateX(-50%); width: min(1060px,calc(100vw - 34px)); margin: 28px 0 38px; }
.beta-site-lab .beta-chemistry { margin: 0; }
.beta-chem-head > span { color: var(--beta-lemon); font: 700 10px/1.2 'IBM Plex Mono',monospace; letter-spacing: .12em; }
.beta-chem-head h3 { max-width: 760px; margin: 8px 0 7px !important; color: #fff !important; font: 800 clamp(30px,4vw,45px)/.95 'Barlow Condensed',sans-serif !important; }
.beta-chem-head .beta-chem-reaction { display: inline-block; max-width: 100%; margin: 0 0 18px !important; padding: 6px 9px; overflow-wrap: anywhere; background: #222d48; color: #eef2fb !important; font: 600 12px/1.4 'IBM Plex Mono',monospace !important; }
.beta-chem-controls { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.beta-chem-controls button { min-height: 44px; padding: 8px 11px; border: 1px solid #9ca9c1; background: transparent; color: #fff; font: 700 12px/1.2 'Atkinson Hyperlegible Next',sans-serif; }
.beta-chem-controls button span { margin-right: 6px; color: var(--beta-lemon); font-family: 'IBM Plex Mono',monospace; }
.beta-chem-controls button[aria-pressed="true"] { border-color: var(--beta-lemon); background: var(--beta-lemon); color: var(--beta-ink); box-shadow: 3px 3px 0 #6043e8; }
.beta-chem-controls button[aria-pressed="true"] span { color: var(--beta-violet); }
.beta-chem-controls .beta-chem-play { margin-left: auto; border-color: var(--beta-lemon); }
.beta-chem-workbench { display: grid; grid-template-columns: minmax(235px,.85fr) minmax(280px,1.15fr); gap: clamp(18px,3vw,35px); align-items: center; }
.beta-chem-scene { position: relative; min-height: 285px; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%,#2b3856 0 28%,#17223a 28% 58%,#10182a 58%); overflow: hidden; }
.beta-chem-scene::before { content: ''; position: absolute; inset: 15px; border: 1px solid #52617d; background: linear-gradient(90deg,transparent 49.5%,#2b3856 50%,transparent 50.5%),linear-gradient(transparent 49.5%,#2b3856 50%,transparent 50.5%); }
.beta-chem-vessel { position: relative; width: min(84%,310px); max-width: calc(100% - 30px); height: 220px; overflow: hidden; contain: paint; border: 3px solid #eef2fb; border-radius: 7px 7px 34px 34px; background: linear-gradient(to top,rgba(96,67,232,.7) 0 62%,rgba(23,34,58,.7) 62%); }
.beta-chem-vessel::before { content: ''; position: absolute; left: 50%; top: -14px; width: 78px; height: 14px; transform: translateX(-50%); border: 3px solid #eef2fb; border-bottom: 0; }
.beta-chem-vessel > b { position: absolute; left: 0; right: 0; bottom: 8px; color: #eef2fb; text-align: center; font: 600 10px 'IBM Plex Mono',monospace; letter-spacing: .08em; text-transform: uppercase; }
.beta-chem-vessel i { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; min-width: 28px; max-width: 72px; height: 28px; padding: 0 5px; overflow: hidden; transform: translate(-50%,-50%) scale(1); border: 1px solid currentColor; border-radius: 50%; background: #121b30; color: #fff; opacity: 1; white-space: nowrap; text-overflow: clip; font: 700 9px/1 'IBM Plex Mono',monospace; font-style: normal; transition: opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1),left .55s ease,top .55s ease; transition-delay: var(--delay); }
.beta-chem-vessel i[data-species="oxygen"] { color: #8fd4ff; }
.beta-chem-vessel i[data-species="gas"] { color: var(--beta-lemon); }
.beta-chem-vessel i[data-species="sugar"], .beta-chem-vessel i[data-species="starter"] { color: #ffb2ce; }
.beta-chem-vessel i[data-species="acid"], .beta-chem-vessel i[data-species="lactic"] { color: #b6a6ff; }
.beta-chem-vessel i[data-species="water"] { color: #72dfdb; }
.beta-chem-vessel i[data-species="microbe"], .beta-chem-vessel i[data-species="native"] { color: #ffca78; }
.beta-chem-vessel i[data-species="heat"], .beta-chem-vessel i[data-species="risk"] { color: #ff8d79; }
.beta-chem-vessel i[data-species="other"] { color: #c8d0df; }
.beta-chem-vessel i[data-species="mineral"], .beta-chem-vessel i[data-species="buffer"] { color: #8fd4ff; }
.beta-chem-vessel i[data-species="caffeine"] { color: #ffb2ce; min-width: 42px; }
.beta-chem-vessel i[data-species="flow"] { color: var(--beta-lemon); }
.beta-chemistry[data-beta-chemistry="roast"] .beta-chem-vessel { width: min(88%,330px); height: 190px; border-radius: 48%; background: radial-gradient(ellipse at center,#5f43e8 0 33%,#293650 34% 60%,#121b30 61%); }
.beta-chemistry[data-beta-chemistry="roast"] .beta-chem-vessel::before { left: 2px; top: 50%; width: 19px; height: 44px; transform: translateY(-50%); border: 3px solid #eef2fb; border-right: 0; }
.beta-chemistry[data-beta-chemistry="extraction"] .beta-chem-vessel { width: min(78%,250px); height: 220px; border-radius: 5px 5px 48% 48%; background: linear-gradient(155deg,#293650 0 42%,#6043e8 43% 68%,#121b30 69%); }
.beta-chemistry[data-beta-chemistry="water-buffer"] .beta-chem-vessel { width: min(72%,230px); background: linear-gradient(to top,rgba(68,198,207,.55) 0 70%,rgba(23,34,58,.65) 70%); }
.beta-chemistry[data-beta-chemistry="decaf"] .beta-chem-vessel { background: linear-gradient(90deg,rgba(96,67,232,.7) 0 48%,rgba(68,198,207,.45) 49% 100%); }
.beta-chem-vessel i.is-low { opacity: .08; transform: translate(-50%,-50%) scale(.55); }
.beta-chem-vessel i.is-mid { opacity: .48; transform: translate(-50%,-50%) scale(.8); }
.beta-chem-vessel i.is-high { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.beta-chemistry.is-changing .beta-chem-vessel i:not(.is-low) { animation: beta-chem-shift .58s ease both; animation-delay: var(--delay); }
@keyframes beta-chem-shift { 0% { translate: 0 0; } 45% { translate: 0 -12px; } 100% { translate: 0 0; } }
.beta-chem-readout { min-width: 0; }
.beta-chem-meter { display: grid; grid-template-columns: minmax(125px,.8fr) minmax(90px,1fr) 48px; gap: 10px; align-items: center; margin: 11px 0; }
.beta-chem-meter > span { overflow-wrap: anywhere; color: #eef2fb; font: 600 12px/1.2 'Atkinson Hyperlegible Next',sans-serif; }
.beta-chem-meter > div { height: 11px; overflow: hidden; background: #394761; }
.beta-chem-meter > div i { display: block; height: 100%; background: var(--beta-lemon); transition: width .55s cubic-bezier(.2,.8,.2,1); }
.beta-chem-meter output { color: #cbd3e1; font: 600 10px 'IBM Plex Mono',monospace; text-align: right; }
.beta-chem-status { min-height: 64px; margin: 20px 0 0 !important; padding: 13px 15px; overflow-wrap: anywhere; border-left: 4px solid var(--beta-lemon); background: #222d48; color: #fff !important; font: 600 13px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-chem-limit { margin: 17px 0 0 !important; color: #bdc7d9 !important; font: 500 11px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-chem-limit a { color: var(--beta-lemon) !important; }
.beta-chem-stateboard { min-width: 0; padding: 15px; border: 1px solid #52617d; background: #17223a; }
.beta-chem-stateboard > p { margin: 13px 0 0 !important; color: #bfc9db !important; font: 500 11px/1.4 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-chem-track { display: grid; grid-template-columns: minmax(120px,.9fr) minmax(120px,1.1fr); gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid #33415d; }
.beta-chem-track:last-of-type { border-bottom: 0; }
.beta-chem-track > span { display: flex; gap: 8px; align-items: center; color: #eef2fb; font: 600 12px/1.2 'Atkinson Hyperlegible Next',sans-serif; }
.beta-chem-track > span b { display: inline-grid; place-items: center; min-width: 42px; min-height: 30px; padding: 4px 6px; border: 1px solid #71809d; color: var(--beta-lemon); font: 700 9px/1 'IBM Plex Mono',monospace; }
.beta-chem-track > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.beta-chem-track i { display: block; aspect-ratio: 1; max-width: 32px; border: 2px solid var(--beta-lemon); border-radius: 50%; background: var(--beta-lemon); opacity: 1; transform: scale(1); transition: opacity .45s ease,transform .45s ease,background .45s ease; transition-delay: var(--delay); }
.beta-chem-track i.is-mid { opacity: .45; transform: scale(.78); background: transparent; }
.beta-chem-track i.is-low { opacity: .12; transform: scale(.55); background: transparent; }
.beta-chemistry.is-changing .beta-chem-track i:not(.is-low) { animation: beta-track-pulse .55s ease both; animation-delay: var(--delay); }
@keyframes beta-track-pulse { 50% { transform: scale(1.16); } }
.beta-ferment-lab { width: 100%; margin: 24px 0; padding: clamp(18px,3vw,31px); overflow: hidden; background: #121b30; color: #fff; border-bottom: 5px solid var(--beta-lemon); }
.beta-ferment-lab *, .beta-ferment-lab *::before, .beta-ferment-lab *::after { box-sizing: border-box; }
.beta-ferment-play { margin-left: auto; border-color: var(--beta-lemon) !important; }
.beta-ferment-system { display: grid; grid-template-columns: minmax(245px,.78fr) minmax(355px,1.14fr) minmax(260px,.86fr); gap: 12px; align-items: stretch; padding: 12px; background: #0d1425; border: 1px solid #52617d; }
.beta-ferment-system > * { min-width: 0; }
.ferment-system-intro { grid-column: 1 / -1; display: flex; gap: 16px; align-items: baseline; padding: 9px 11px; background: #222d48; }
.ferment-system-intro span { flex: 0 0 auto; color: #d7f24a; font: 800 9px 'IBM Plex Mono',monospace; letter-spacing: .08em; }
.ferment-system-intro p { margin: 0 !important; color: #d8deec !important; font: 500 11px/1.35 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-ferment-scene { position: relative; min-height: 390px; display: grid; place-items: center; padding: 38px 22px 44px; background: linear-gradient(135deg,#18233c,#0d1425); border: 1px solid #52617d; }
.beta-ferment-vessel { position: relative; width: min(72%,280px); height: 292px; overflow: visible; border: 3px solid #e9eef8; border-radius: 8px 8px 42px 42px; background: #18233c; box-shadow: inset 0 0 0 8px rgba(255,255,255,.025); }
.beta-ferment-headspace { position: absolute; inset: 0 0 74% 0; background: linear-gradient(#1d2942,#263650); }
.beta-ferment-headspace span { position: absolute; right: 8px; top: 8px; color: #b9c4d8; font: 600 9px 'IBM Plex Mono',monospace; text-transform: uppercase; }
.beta-ferment-headspace i { position: absolute; width: 12px; height: 12px; border: 2px solid #d7f24a; border-radius: 50%; opacity: .15; }
.beta-ferment-headspace i:nth-child(1) { left: 25%; top: 50%; }
.beta-ferment-headspace i:nth-child(2) { left: 48%; top: 25%; }
.beta-ferment-headspace i:nth-child(3) { left: 68%; top: 58%; }
.beta-ferment-liquid { position: absolute; inset: 26% 0 0; overflow: hidden; border-radius: 0 0 36px 36px; background: linear-gradient(to top,rgba(96,67,232,.84),rgba(68,198,207,.5)); transition: background .55s ease; }
.beta-ferment-liquid .layer { position: absolute; left: 6px; color: rgba(255,255,255,.7); font: 700 8px 'IBM Plex Mono',monospace; text-transform: uppercase; }
.beta-ferment-liquid .top { top: 8px; }.beta-ferment-liquid .middle { top: 47%; }.beta-ferment-liquid .bottom { bottom: 8px; }
.beta-ferment-liquid::before, .beta-ferment-liquid::after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,.26); }
.beta-ferment-liquid::before { top: 33%; }.beta-ferment-liquid::after { top: 66%; }
.beta-ferment-valve { position: absolute; left: 50%; top: 8px; width: 86px; height: 45px; transform: translateX(-50%); text-align: center; }
.beta-ferment-valve::before { content: ''; display: block; width: 34px; height: 22px; margin: 0 auto 3px; border: 3px solid #e9eef8; border-bottom: 0; }
.beta-ferment-valve span { position: absolute; left: 50%; top: -3px; width: 2px; height: 16px; background: var(--beta-lemon); animation: beta-valve-flow 1.6s ease-in-out infinite; }
.beta-ferment-valve b { color: #b9c4d8; font: 600 8px 'IBM Plex Mono',monospace; text-transform: uppercase; }
@keyframes beta-valve-flow { 0%,100% { transform: translateY(12px); opacity: 0; } 50% { transform: translateY(-5px); opacity: 1; } }
.beta-ferment-liquid .microbe { position: absolute; width: 16px; height: 16px; border: 2px solid #ffca78; border-radius: 40% 60% 55% 45%; background: rgba(255,202,120,.18); transition: opacity .45s ease,transform .45s ease; }
.beta-ferment-liquid .m1 { left: 30%; top: 24%; }.beta-ferment-liquid .m2 { left: 66%; top: 38%; }.beta-ferment-liquid .m3 { left: 48%; top: 64%; }.beta-ferment-liquid .m4 { left: 75%; top: 78%; }
.beta-ferment-liquid .sugar { position: absolute; padding: 3px 5px; border: 1px solid #ffb2ce; color: #ffcfdf; font: 700 8px 'IBM Plex Mono',monospace; font-style: normal; transition: opacity .45s ease,transform .45s ease; }
.beta-ferment-liquid .s1 { left: 18%; top: 45%; }.beta-ferment-liquid .s2 { left: 56%; top: 16%; }.beta-ferment-liquid .s3 { left: 40%; top: 79%; }
.beta-ferment-liquid .bubble { position: absolute; bottom: -16px; width: 10px; height: 10px; border: 2px solid var(--beta-lemon); border-radius: 50%; opacity: .2; }
.beta-ferment-liquid .b1 { left: 28%; }.beta-ferment-liquid .b2 { left: 55%; animation-delay: .45s !important; }.beta-ferment-liquid .b3 { left: 74%; animation-delay: .9s !important; }
.beta-ferment-lab[data-stage="1"] .bubble, .beta-ferment-lab[data-stage="2"] .bubble, .beta-ferment-lab[data-stage="3"] .bubble { animation: beta-bubble-rise 2.5s linear infinite; opacity: .85; }
@keyframes beta-bubble-rise { from { transform: translateY(0) scale(.7); } to { transform: translateY(-170px) scale(1.2); } }
.beta-ferment-lab[data-stage="0"] .microbe { opacity: .35; transform: scale(.75); }.beta-ferment-lab[data-stage="1"] .microbe { opacity: 1; transform: scale(1.2); }.beta-ferment-lab[data-stage="2"] .microbe { opacity: .78; transform: scale(1); }.beta-ferment-lab[data-stage="3"] .microbe { opacity: .35; transform: scale(.72); }
.beta-ferment-lab[data-stage="2"] .sugar, .beta-ferment-lab[data-stage="3"] .sugar { opacity: .25; transform: scale(.72); }
.beta-ferment-lab[data-stage="2"] .beta-ferment-liquid, .beta-ferment-lab[data-stage="3"] .beta-ferment-liquid { background: linear-gradient(to top,rgba(96,67,232,.94),rgba(121,76,173,.72)); }
.beta-ferment-key { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; color: #b9c4d8; font: 600 9px 'IBM Plex Mono',monospace; }
.beta-ferment-key span { display: flex; align-items: center; gap: 5px; }.beta-ferment-key i { width: 10px; height: 10px; display: inline-block; border: 2px solid currentColor; }.beta-ferment-key .key-microbe { color: #ffca78; border-radius: 45%; }.beta-ferment-key .key-sugar { color: #ffb2ce; }.beta-ferment-key .key-gas { color: var(--beta-lemon); border-radius: 50%; }
.beta-ferment-status, .beta-soluble-status { min-height: 64px; margin: 20px 0 0 !important; padding: 13px 15px; border-left: 4px solid var(--beta-lemon); background: #222d48; color: #fff !important; font: 600 13px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-soluble-lab { width: 100%; margin: 24px 0; padding: clamp(18px,3vw,31px); overflow: hidden; background: #111a2e; color: #fff; border-bottom: 5px solid var(--beta-lemon); }
.beta-soluble-lab *, .beta-soluble-lab *::before, .beta-soluble-lab *::after { box-sizing: border-box; }
.beta-soluble-controls { margin-bottom: 24px; }.beta-soluble-play { margin-left: auto; border-color: var(--beta-lemon) !important; }
.beta-soluble-scene { padding: clamp(14px,2.5vw,28px); border: 1px solid #52617d; background: #f2f5fb; color: #111a2e; }
.sol-common { display: grid; grid-template-columns: 1fr auto 1.25fr auto 1fr 1fr; gap: 10px; align-items: center; }
.sol-node { min-width: 0; padding: 14px 10px; border: 2px solid #9ca8bb; background: #fff; text-align: center; opacity: .5; filter: saturate(.45); transition: opacity .35s ease,transform .35s ease,border-color .35s ease,box-shadow .35s ease,filter .35s ease; }
.sol-node b, .sol-node small { display: block; }.sol-node b { margin-top: 8px; font: 800 16px/1 'Barlow Condensed',sans-serif; }.sol-node small { margin-top: 4px; color: #4c586c; font: 600 10px/1.25 'Atkinson Hyperlegible Next',sans-serif; }
.sol-arrow { color: #6043e8; font: 900 24px 'IBM Plex Mono',monospace; }
.sol-fork { position: relative; height: 44px; margin: 0 12%; border-bottom: 2px solid #6043e8; }.sol-fork::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid #6043e8; }.sol-fork span { position: absolute; left: 50%; top: 9px; transform: translateX(-50%); padding: 3px 8px; background: #f2f5fb; color: #6043e8; font: 700 9px 'IBM Plex Mono',monospace; text-transform: uppercase; white-space: nowrap; }
.sol-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.sol-branch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; border-top: 2px solid #6043e8; background: #e8edf6; }.sol-node.pack { width: min(280px,100%); margin: 20px auto 0; }
.beta-soluble-lab[data-active="prepare"] [data-sol-node="prepare"],.beta-soluble-lab[data-active="extract"] [data-sol-node="extract"],.beta-soluble-lab[data-active="concentrate"] [data-sol-node="concentrate"],.beta-soluble-lab[data-active="aroma"] [data-sol-node="aroma"],.beta-soluble-lab[data-active="spray"] [data-sol-node="spray"],.beta-soluble-lab[data-active="freeze"] [data-sol-node="freeze"],.beta-soluble-lab[data-active="pack"] [data-sol-node="pack"] { opacity: 1; filter: none; transform: translateY(-4px); border-color: #6043e8; box-shadow: 5px 5px 0 var(--beta-lemon); }
.sol-beans,.sol-columns,.sol-vacuum,.sol-aroma,.sol-tower,.sol-granules,.sol-ice,.sol-sublime,.sol-jar { position: relative; display: block; width: 74px; height: 54px; margin: 0 auto; }
.sol-beans i { position: absolute; width: 22px; height: 14px; border: 2px solid #6043e8; border-radius: 50%; transform: rotate(-22deg); }.sol-beans i:nth-child(1){left:3px;top:26px}.sol-beans i:nth-child(2){left:25px;top:9px}.sol-beans i:nth-child(3){right:2px;top:29px}
.sol-columns { display: flex; align-items: end; gap: 4px; }.sol-columns i { flex: 1; height: 46px; border: 2px solid #6043e8; border-radius: 8px 8px 2px 2px; background: linear-gradient(to top,#d7f24a 0 30%,transparent 31%); }
.sol-vacuum { border: 2px solid #6043e8; border-radius: 50%; }.sol-vacuum::before { content:'−'; position:absolute; inset:8px; display:grid; place-items:center; border:1px dashed #6043e8; border-radius:50%; font:900 22px monospace; }
.sol-aroma i { position: absolute; bottom: 6px; width: 14px; height: 34px; border-left: 2px solid #6043e8; border-radius: 50%; }.sol-aroma i:nth-child(1){left:12px}.sol-aroma i:nth-child(2){left:31px;height:46px}.sol-aroma i:nth-child(3){left:50px;height:29px}
.sol-tower { width: 48px; border: 2px solid #6043e8; clip-path: polygon(12% 0,88% 0,100% 70%,65% 100%,35% 100%,0 70%); background: radial-gradient(circle at 50% 20%,#6043e8 0 2px,transparent 3px) 0 0/11px 11px; }.sol-granules i { position:absolute;width:18px;height:18px;border:2px solid #6043e8;border-radius:50%;background:#d7f24a}.sol-granules i:nth-child(1){left:8px;top:27px}.sol-granules i:nth-child(2){left:28px;top:10px}.sol-granules i:nth-child(3){left:48px;top:28px}
.sol-ice { display:grid;place-items:center;border:2px solid #44c6cf;color:#6043e8;font:800 15px 'IBM Plex Mono',monospace;background:linear-gradient(135deg,transparent 48%,#44c6cf 49% 51%,transparent 52%)}
.sol-sublime i { position:absolute;left:15px;right:15px;height:2px;background:#6043e8;animation:sol-sublime 1.8s ease-in-out infinite}.sol-sublime i:nth-child(1){top:38px}.sol-sublime i:nth-child(2){top:26px;animation-delay:.3s}.sol-sublime i:nth-child(3){top:14px;animation-delay:.6s}@keyframes sol-sublime{50%{transform:translateY(-8px);opacity:.25}}
.sol-jar { width:50px;border:3px solid #6043e8;border-radius:5px 5px 12px 12px;background:radial-gradient(circle,#6043e8 0 2px,transparent 3px) 0 0/12px 12px}.sol-jar::before{content:'';position:absolute;left:-4px;right:-4px;top:-8px;height:8px;background:#d7f24a;border:2px solid #6043e8}
.beta-soluble-details { margin-top: 14px; }
.sol-detail { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(0,1.15fr); gap: clamp(18px,3vw,34px); align-items: center; min-height: 330px; padding: clamp(18px,3vw,30px); background: #fff; border: 2px solid #6043e8; color: #111a2e; }
.sol-detail[hidden] { display: none; }
.sol-detail h3, .ferment-network-copy h3 { margin: 7px 0 12px !important; color: #111a2e !important; font: 800 clamp(27px,3vw,39px)/.98 'Barlow Condensed',sans-serif !important; }
.sol-detail p, .ferment-network-copy p { margin: 0 !important; color: #354056 !important; font: 500 14px/1.52 'Atkinson Hyperlegible Next',sans-serif !important; }
.sol-detail-kicker { color: #6043e8; font: 800 10px/1.2 'IBM Plex Mono',monospace; letter-spacing: .08em; }
.sol-detail dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 18px 0 0; }
.sol-detail dl div { min-width: 0; padding: 9px; background: #edf1f8; border-top: 3px solid #d7f24a; }
.sol-detail dt { color: #606b7d; font: 700 9px 'IBM Plex Mono',monospace; text-transform: uppercase; }
.sol-detail dd { margin: 4px 0 0; color: #111a2e; font: 700 12px/1.25 'Atkinson Hyperlegible Next',sans-serif; }
.sol-detail-visual { position: relative; min-height: 260px; overflow: hidden; background: #e9eef7; border: 1px solid #9ca8bb; }
.sol-detail-grind { display: grid; grid-template-columns: 82px 36px 1fr; grid-template-rows: 1fr auto; place-items: center; padding: 35px 24px 24px; }
.whole-bean { width: 66px; height: 45px; border: 4px solid #6043e8; border-radius: 50%; transform: rotate(-18deg); }
.whole-bean::after { content: ''; position: absolute; left: 31px; top: 1px; width: 2px; height: 39px; background: #6043e8; transform: rotate(14deg); }
.grind-arrow { color: #6043e8; font: 900 28px 'IBM Plex Mono',monospace; }
.grind-bed { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 9px; width: 130px; }
.grind-bed i { width: 22px; height: 17px; background: #6043e8; clip-path: polygon(15% 0,100% 20%,84% 100%,0 78%); }
.grind-bed i:nth-child(2n) { width: 17px; height: 23px; background: #44c6cf; }
.sol-detail-grind b { grid-column: 3; color: #111a2e; font: 800 20px 'Barlow Condensed',sans-serif; }.sol-detail-grind em { grid-column: 1 / 4; color: #566278; font: 700 10px 'IBM Plex Mono',monospace; font-style: normal; }
.sol-detail-counter { min-height: 310px; padding: 62px 22px 42px; }
.counter-columns { display: flex; align-items: stretch; justify-content: center; gap: 7px; height: 150px; }
.counter-columns i { position: relative; display: grid; place-items: center; width: 40px; border: 3px solid #6043e8; border-radius: 12px 12px 4px 4px; background: linear-gradient(to top,#d7f24a 0 28%,#f5c590 29% 67%,#78523f 68%); }
.counter-columns i b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #6043e8; font: 800 11px 'IBM Plex Mono',monospace; }
.sol-detail-counter .hot, .extract-out { position: absolute; top: 12px; padding: 7px; font: 800 10px/1.25 'IBM Plex Mono',monospace; text-align: center; }.sol-detail-counter .hot { left: 13px; background: #ffcb76; }.extract-out { right: 13px; background: #44c6cf; }
.sol-detail-counter .flow { position: absolute; left: 24px; right: 24px; font: 800 10px 'IBM Plex Mono',monospace; }.water-flow { bottom: 18px; color: #167e89; }.coffee-flow { top: 42px; color: #6043e8; text-align: right; }
.sol-detail-mass { display: grid; grid-template-columns: 1fr 80px 1fr; place-items: center; padding: 30px 17px; }
.mass-beaker { position: relative; width: 95px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: end; padding-bottom: 17px; overflow: hidden; border: 4px solid #6043e8; border-top: 0; border-radius: 0 0 20px 20px; }
.mass-beaker i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#44c6cf,#6043e8); opacity: .65; }.mass-beaker.before i { height: 78%; }.mass-beaker.after i { height: 52%; }
.mass-beaker b,.mass-beaker small { z-index: 1; color: #fff; }.mass-beaker b { font: 900 19px 'IBM Plex Mono',monospace; }.mass-beaker small { font: 700 9px 'Atkinson Hyperlegible Next',sans-serif; }.mass-arrow { color: #6043e8; font: 800 10px/1.5 'IBM Plex Mono',monospace; text-align: center; }
.sol-detail-loop { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr; place-items: center; gap: 5px; padding: 48px 14px 38px; }
.aroma-source,.aroma-shield,.aroma-trap { display: grid; place-items: center; width: 92px; min-height: 100px; padding: 8px; border: 3px solid #6043e8; background: #fff; color: #111a2e; font: 700 10px/1.3 'Atkinson Hyperlegible Next',sans-serif; text-align: center; }.aroma-shield { border-style: double; border-width: 6px; }.loop-arrow { color: #6043e8; font: 900 21px monospace; }.aroma-trap { position: relative; background: #d9f7fa; }.aroma-trap i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #6043e8; }.aroma-trap i:nth-child(1){left:20px;top:18px}.aroma-trap i:nth-child(2){right:18px;top:32px}.aroma-trap i:nth-child(3){left:42px;top:45px}.return-arrow { position: absolute; left: 18%; right: 18%; bottom: 12px; padding-top: 8px; border-top: 2px dashed #6043e8; color: #6043e8; font: 800 10px 'IBM Plex Mono',monospace; text-align: center; }
.sol-detail-droplet { min-height: 330px; background: linear-gradient(to top,#e8edf6 0 18%,#ffe1b6 19% 100%); clip-path: polygon(12% 0,88% 0,100% 78%,72% 100%,28% 100%,0 78%); }
.nozzle { position: absolute; left: 50%; top: 14px; width: 66px; padding: 7px; transform: translateX(-50%); background: #6043e8; color: #fff; font: 800 10px 'IBM Plex Mono',monospace; text-align: center; }
.nozzle::after { content: ''; position: absolute; left: 27px; bottom: -15px; border: 7px solid transparent; border-top: 9px solid #6043e8; }
.droplet-flight i { position: absolute; border-radius: 50%; background: #44c6cf; box-shadow: inset -3px -3px 0 rgba(17,26,46,.18); animation: sol-drop 2.5s linear infinite; }.droplet-flight i:nth-child(1){left:42%;top:66px;width:22px;height:22px}.droplet-flight i:nth-child(2){left:58%;top:91px;width:17px;height:17px;animation-delay:-.6s}.droplet-flight i:nth-child(3){left:34%;top:125px;width:14px;height:14px;animation-delay:-1.1s}.droplet-flight i:nth-child(4){left:53%;top:168px;width:10px;height:10px;animation-delay:-1.7s}.droplet-flight i:nth-child(5){left:45%;top:215px;width:7px;height:7px;animation-delay:-2.1s}@keyframes sol-drop{50%{transform:translateY(18px) scale(.55);opacity:.65}}
.hot-air { position: absolute; left: 16px; bottom: 52px; color: #c05c17; font: 800 10px/1.25 'IBM Plex Mono',monospace; }.dry-powder { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); color: #6043e8; font: 800 10px/1.25 'IBM Plex Mono',monospace; text-align: center; }
.sol-detail-phase { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; gap: 8px; padding: 35px 17px 62px; }.phase { display: grid; place-items: center; width: 105px; height: 105px; padding: 8px; border: 3px solid #6043e8; color: #111a2e; font: 700 11px/1.2 'Atkinson Hyperlegible Next',sans-serif; text-align: center; }.phase.ice { background: repeating-linear-gradient(135deg,#d9f7fa 0 8px,#fff 9px 17px); }.phase.vapor { border-radius: 50%; border-style: dashed; background: #fff; }.phase b { display: block; font: 900 18px 'Barlow Condensed',sans-serif; }.phase-arrow { color: #6043e8; font: 800 10px/1.4 'IBM Plex Mono',monospace; text-align: center; }.phase-no { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 4px 8px; background: #111a2e; color: #fff; font: 800 9px 'IBM Plex Mono',monospace; }.phase-granule { position: absolute; right: 15px; bottom: 13px; color: #6043e8; font: 800 9px 'IBM Plex Mono',monospace; }
.sol-detail-qc { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 24px; }.sol-detail-qc span { display: grid; place-items: center; gap: 8px; min-height: 96px; background: #fff; border: 2px solid #9ca8bb; }.sol-detail-qc b { font: 800 11px 'IBM Plex Mono',monospace; }.sol-detail-qc i { position: relative; width: 38px; height: 38px; display: block; border: 3px solid #6043e8; }.qc-drop { border-radius: 55% 45% 60% 40%; transform: rotate(45deg); }.qc-scale::after { content:'g/L'; position:absolute; inset:0; display:grid; place-items:center; transform:rotate(0); font:800 9px monospace }.qc-cup { border-radius: 0 0 12px 12px; border-top: 0 !important; }.qc-eye { border-radius: 70% 15%; transform:rotate(45deg) }.qc-eye::after{content:'';position:absolute;inset:9px;border-radius:50%;background:#d7f24a}
.ferment-network-visual { position: relative; display: grid; grid-template-columns: minmax(100px,1fr) minmax(86px,.68fr) minmax(145px,1.2fr); grid-template-rows: 1fr 1fr; gap: 12px 8px; align-items: center; min-height: 390px; padding: 14px; background: #f1f4fa; color: #111a2e; border: 1px solid #52617d; }
.ferment-network-visual > * { min-width: 0; }
.ferment-substrate,.ferment-effect { display: grid; gap: 6px; align-content: center; min-height: 112px; padding: 14px; overflow-wrap: anywhere; border: 3px solid #6043e8; }.ferment-substrate { grid-row: 1 / 3; background: #fff2cb; }.ferment-effect { background: #def4ed; }.ferment-substrate b,.ferment-effect b,.ferment-paths b { font: 800 19px 'Barlow Condensed',sans-serif; }.ferment-substrate span,.ferment-effect span { font: 700 10px/1.35 'IBM Plex Mono',monospace; }.ferment-route { padding-inline: 2px; overflow-wrap: anywhere; color: #6043e8; font: 800 10px/1.3 'IBM Plex Mono',monospace; text-align: center; }.ferment-paths { display: grid; gap: 6px; }.ferment-paths .path { display: grid; gap: 3px; padding: 9px 10px; overflow-wrap: anywhere; border-left: 4px solid #6043e8; background: #e9eef7; color: #354056; font: 700 10px/1.3 'Atkinson Hyperlegible Next',sans-serif; }.ferment-paths .lactic { border-color: #44c6cf; }.ferment-paths .acetic { border-color: #df7d3c; }.ferment-paths b { color: #111a2e; font-size: 16px; line-height: 1; }
.ferment-focus { opacity: .3; filter: saturate(.35); transform: scale(.97); transition: opacity .45s ease,filter .45s ease,transform .45s ease,box-shadow .45s ease; }
.beta-ferment-lab[data-stage="0"] .ferment-substrate,.beta-ferment-lab[data-stage="0"] .route-sugar,.beta-ferment-lab[data-stage="0"] .ferment-paths .path,.beta-ferment-lab[data-stage="1"] .ferment-substrate,.beta-ferment-lab[data-stage="1"] .route-pectin,.beta-ferment-lab[data-stage="1"] .ferment-effect,.beta-ferment-lab[data-stage="1"] .route-sugar,.beta-ferment-lab[data-stage="1"] .yeast,.beta-ferment-lab[data-stage="1"] .lactic,.beta-ferment-lab[data-stage="2"] .route-sugar,.beta-ferment-lab[data-stage="2"] .yeast,.beta-ferment-lab[data-stage="2"] .lactic,.beta-ferment-lab[data-stage="2"] .acetic,.beta-ferment-lab[data-stage="3"] .ferment-effect,.beta-ferment-lab[data-stage="3"] .lactic,.beta-ferment-lab[data-stage="3"] .acetic { opacity: 1; filter: none; transform: scale(1); }
.beta-ferment-lab[data-stage="0"] .ferment-substrate,.beta-ferment-lab[data-stage="1"] .ferment-effect,.beta-ferment-lab[data-stage="2"] .ferment-paths,.beta-ferment-lab[data-stage="3"] .ferment-effect { box-shadow: 4px 4px 0 #d7f24a; }
.beta-ferment-readout { align-self: stretch; display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 13px; background: #18233c; border: 1px solid #52617d; }
.beta-ferment-readout .beta-chem-meter { grid-template-columns: minmax(0,1fr) minmax(54px,.72fr) 42px; gap: 7px; }
.beta-ferment-readout .beta-chem-meter output { white-space: nowrap; }
.ferment-network-copy ul { display: grid; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }.ferment-network-copy li { padding: 8px 10px; background: #fff; border-left: 3px solid #d7f24a; color: #354056; font: 500 12px/1.35 'Atkinson Hyperlegible Next',sans-serif; }.ferment-network-copy li b { color: #111a2e; }
.beta-ferment-stage-details { grid-column: 1 / -1; }.beta-ferment-stage-details article { display: grid; grid-template-columns: 1.1fr repeat(3,1fr); gap: 7px; align-items: stretch; padding: 10px; background: #222d48; }.beta-ferment-stage-details article[hidden] { display: none; }.beta-ferment-stage-details b,.beta-ferment-stage-details span { display: grid; min-width: 0; align-items: center; min-height: 46px; padding: 8px; overflow-wrap: anywhere; font: 700 10px/1.35 'IBM Plex Mono',monospace; }.beta-ferment-stage-details b { color: #111a2e; background: #d7f24a; }.beta-ferment-stage-details span { color: #fff; border: 1px solid #52617d; }.beta-ferment-stage-details small { grid-column: 1 / -1; padding: 7px 2px 0; color: #c5cede; font: 500 11px/1.4 'Atkinson Hyperlegible Next',sans-serif; }
.ferment-system-note { grid-column: 1 / -1; padding: 10px 12px; color: #c5cede; background: #121b30; border-left: 4px solid #d7f24a; font: 500 11px/1.45 'Atkinson Hyperlegible Next',sans-serif; }.ferment-system-note b { color: #fff; }
.beta-siaf-science { display: grid; grid-template-columns: minmax(210px,.7fr) minmax(0,1.3fr); gap: 26px; margin: 24px 0 0; padding: clamp(18px,3vw,31px); background: #121b30; color: #fff; }
.beta-siaf-scene { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 250px; }
.beta-siaf-valve { width: 80px; margin-bottom: 6px; padding: 5px; border: 2px solid var(--beta-lemon); color: var(--beta-lemon); text-align: center; font: 700 13px 'IBM Plex Mono',monospace; }
.beta-siaf-vessel { position: relative; display: grid; place-items: end center; width: 180px; height: 140px; padding: 13px; overflow: hidden; border: 3px solid #fff; border-radius: 5px 5px 25px 25px; background: linear-gradient(to top,#6043e8 0 57%,transparent 57%); }
.beta-siaf-vessel span { z-index: 1; color: #fff; font: 700 12px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-siaf-vessel i { position: absolute; bottom: 21px; left: 28%; width: 10px; height: 10px; border: 2px solid var(--beta-lemon); border-radius: 50%; animation: beta-bubble 3.2s linear infinite; }
.beta-siaf-vessel i:nth-child(2) { left: 52%; animation-delay: -1.4s; }
.beta-siaf-vessel i:nth-child(3) { left: 70%; animation-delay: -2.4s; }
@keyframes beta-bubble { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-90px); opacity: 0; } }
.beta-siaf-scene p { max-width: 250px; margin: 13px 0 0 !important; color: #d8deec !important; text-align: center; font: 500 11px/1.4 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-siaf-results > span { color: var(--beta-lemon); font: 700 10px 'IBM Plex Mono',monospace; letter-spacing: .1em; }
.beta-siaf-results h3 { margin: 8px 0 11px !important; color: #fff !important; font: 700 31px/1 'Barlow Condensed',sans-serif !important; }
.beta-siaf-results p { margin: 0 0 13px !important; color: #e3e7ef !important; font: 500 13px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-siaf-results a { color: var(--beta-lemon) !important; }
.beta-siaf-bar { display: grid; grid-template-columns: 45px minmax(0,1fr) 72px; align-items: center; gap: 9px; margin: 9px 0; font: 700 11px 'IBM Plex Mono',monospace; }
.beta-siaf-bar span { display: block; width: var(--bar); height: 13px; background: var(--beta-lemon); }
.beta-siaf-bar strong { font-weight: 700; white-space: nowrap; }
.beta-siaf-results .beta-siaf-limit { margin-top: 17px !important; color: #bfc7d7 !important; font-size: 11px !important; }
.beta-treatment-map { position: relative; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: min(1100px,calc(100vw - 34px)); margin: 42px 0; padding: clamp(18px,3vw,38px); background: #e9ecf2; border-top: 5px solid var(--beta-ink); color: var(--beta-ink); }
.beta-treatment-map * { box-sizing: border-box; }
.beta-treatment-map-head > span { color: var(--beta-violet); font: 700 11px/1.2 'IBM Plex Mono',monospace; letter-spacing: .12em; }
.beta-treatment-map-head h2 { margin: 10px 0 8px !important; color: var(--beta-ink) !important; font: 800 clamp(34px,4vw,54px)/.95 'Barlow Condensed',sans-serif !important; }
.beta-treatment-map-head p { max-width: 710px; margin: 0 0 23px !important; color: #454c59 !important; font: 500 15px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-treatment-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 12px; }
.beta-treatment-group { min-width: 0; background: #fff; border: 1px solid var(--beta-ink); }
.beta-treatment-group[open] { box-shadow: 4px 4px 0 var(--beta-violet); }
.beta-treatment-group summary { display: grid; gap: 5px; min-height: 125px; padding: 16px 19px; cursor: pointer; list-style: none; }
.beta-treatment-group summary::-webkit-details-marker { display: none; }
.beta-treatment-group summary::after { content: '+'; grid-column: 2; grid-row: 1 / 4; align-self: start; color: var(--beta-violet); font: 700 26px/1 'Atkinson Hyperlegible Next',sans-serif; }
.beta-treatment-group[open] summary::after { content: '−'; }
.beta-treatment-group summary > span { color: var(--beta-violet); font: 700 11px 'IBM Plex Mono',monospace; }
.beta-treatment-group summary strong { color: var(--beta-ink); font: 700 28px/1 'Barlow Condensed',sans-serif; }
.beta-treatment-group summary small { max-width: 340px; color: #51596b; font: 500 13px/1.35 'Atkinson Hyperlegible Next',sans-serif; }
.beta-treatment-group ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; padding: 0 13px 16px; list-style: none; }
.beta-treatment-group li { min-width: 0; margin: 0; padding: 0; list-style: none; }
.beta-treatment-group li a { display: grid; gap: 4px; min-height: 112px; padding: 12px; background: #f6f7f9; border: 1px solid var(--beta-line); color: var(--beta-ink) !important; text-decoration: none; }
.beta-treatment-group li a:hover, .beta-treatment-group li a:focus-visible { border-color: var(--beta-violet); box-shadow: 3px 3px 0 var(--beta-violet); }
.beta-treatment-group li a[aria-current="page"] { background: #e8e2ff; border-color: var(--beta-violet); }
.beta-treatment-group li a > span { color: var(--beta-violet); font: 700 11px 'IBM Plex Mono',monospace; }
.beta-treatment-group li a strong { color: var(--beta-ink); font: 700 19px/1.04 'Barlow Condensed',sans-serif; }
.beta-treatment-group li a small { color: #51596b; font: 500 11px/1.35 'Atkinson Hyperlegible Next',sans-serif; }
body main.wrap .planche .beta-process-story .beta-story-head h2 { font: 800 clamp(35px,4.6vw,57px)/.93 'Barlow Condensed',sans-serif !important; }
body main.wrap .planche .beta-process-story .beta-story-head p { font: 500 15px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
body main.wrap .planche .beta-process-story .beta-story-steps p { font: 500 13px/1.4 'Atkinson Hyperlegible Next',sans-serif !important; }
body main.wrap .planche .beta-process-story .beta-story-point { font: 600 14px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
body main.wrap .planche .beta-process-story .beta-story-history { font: 500 13px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
body main.wrap .planche .beta-process-story .beta-chem-head h3 { font: 800 clamp(30px,4vw,45px)/.95 'Barlow Condensed',sans-serif !important; }
body main.wrap .planche .beta-process-story .beta-chem-head .beta-chem-reaction { font: 600 12px/1.4 'IBM Plex Mono',monospace !important; }
body main.wrap .planche .beta-process-story .beta-chem-status { font: 600 13px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
body main.wrap .planche .beta-process-story .beta-chem-limit { font: 500 11px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
body main.wrap .planche .beta-site-lab .beta-chem-head h3 { font: 800 clamp(30px,4vw,45px)/.95 'Barlow Condensed',sans-serif !important; }
body main.wrap .planche .beta-site-lab .beta-chem-head .beta-chem-reaction { font: 600 12px/1.4 'IBM Plex Mono',monospace !important; }
body main.wrap .planche .beta-site-lab .beta-chem-status { font: 600 13px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
body main.wrap .planche .beta-site-lab .beta-chem-limit { font: 500 11px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
body main.wrap .planche .beta-process-story .beta-siaf-results h3 { font: 700 31px/1 'Barlow Condensed',sans-serif !important; }
body main.wrap .planche .beta-process-story .beta-siaf-results p { font: 500 13px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
body main.wrap .planche .beta-process-story .beta-siaf-results .beta-siaf-limit,
body main.wrap .planche .beta-process-story .beta-siaf-scene p { font: 500 11px/1.4 'Atkinson Hyperlegible Next',sans-serif !important; }
body main.wrap .planche .beta-treatment-map .beta-treatment-map-head h2 { font: 800 clamp(34px,4vw,54px)/.95 'Barlow Condensed',sans-serif !important; }
body main.wrap .planche .beta-treatment-map .beta-treatment-map-head p { font: 500 15px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-toolbar { position: relative; z-index: 1000; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 16px; background: var(--beta-ink); color: #fff; border-bottom: 3px solid var(--beta-lemon); font: 600 13px/1.25 'Atkinson Hyperlegible Next',sans-serif; }
.beta-toolbar a { color: #fff; }
.beta-toolbar-brand { font: 800 17px 'Barlow Condensed',sans-serif; letter-spacing: .04em; text-decoration: none; }
.beta-toolbar strong { color: var(--beta-lemon); }
.beta-toolbar-return { margin-left: auto; }
.beta-media-page { max-width: 1240px; margin: 0 auto; padding: clamp(25px,4vw,60px); }
.beta-media-intro { max-width: 760px; margin-bottom: 35px; }
.beta-media-intro > span { color: var(--beta-violet); font: 600 11px 'IBM Plex Mono',monospace; letter-spacing: .1em; }
.beta-media-intro h1 { margin: 10px 0; font: 800 clamp(48px,7vw,86px)/.9 'Barlow Condensed',sans-serif; }
.beta-media-intro p { font: 500 17px/1.5 'Atkinson Hyperlegible Next',sans-serif; }
.beta-media-intro a, .beta-source-card a { color: var(--beta-violet); }
.beta-source-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.beta-source-card { display: grid; grid-template-columns: 38% 1fr; border: 1px solid var(--beta-line); background: #fff; }
.beta-source-card img { display: block; width: 100%; height: 100%; max-height: 260px; object-fit: cover; }
.beta-source-card > div { padding: 19px; }
.beta-source-card span { color: var(--beta-violet); font: 600 10px 'IBM Plex Mono',monospace; }
.beta-source-card h2 { margin: 9px 0; font: 700 27px/1 'Barlow Condensed',sans-serif; }
.beta-source-card p { margin: 7px 0; font: 500 13px/1.4 'Atkinson Hyperlegible Next',sans-serif; }

main.moderne .hero .rub, main.moderne .hero h1 em { color: var(--beta-violet) !important; }
main.moderne .hero .rub::before,
.beta-home-paths-head > span::before,
.beta-subject-intro > span::before,
.beta-process-top > span::before,
.beta-menu-intro > span::before,
.beta-media-intro > span::before,
.beta-period-nav > span::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px;
  background: currentColor; box-shadow: 4px 4px 0 var(--beta-lemon); vertical-align: 2px;
}
.beta-home-paths-head > span::before { margin: 0 16px 0 8px; background: var(--beta-lemon); box-shadow: 0 -6px var(--beta-lemon), 0 6px var(--beta-lemon), -6px 0 var(--beta-lemon), 6px 0 var(--beta-lemon); }
.beta-home-path-grid a:hover b::before, .beta-home-path-grid a:focus-visible b::before { content: '▸ '; color: var(--beta-violet); }
main.wrap .planche .ph .num::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 9px; background: var(--beta-violet); box-shadow: 4px 4px 0 var(--beta-lemon); vertical-align: 3px; }
main.moderne .hero .grandchamp button:hover,
.beta-header-search button:hover { box-shadow: 3px 3px 0 var(--beta-lemon); }
main.moderne .hero .sous, main.moderne .suggest span, main.moderne figcaption { color: var(--beta-ink) !important; }
main.moderne .beta-home-hero .beta-home-copy .sous { color: #edf0f8 !important; }
main.moderne .hero .grandchamp { border-color: var(--beta-ink) !important; }
main.moderne .hero .grandchamp input { color: var(--beta-ink) !important; background: var(--beta-paper) !important; font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; }
main.moderne .hero .grandchamp button { background: var(--beta-violet) !important; color: #fff !important; font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; border-color: var(--beta-violet) !important; }
main.moderne .hero .suggest a { color: var(--beta-violet) !important; }
main.moderne .sect { background: var(--beta-ink) !important; color: var(--beta-paper) !important; }
main.moderne .sect :is(h2,p,span) { color: inherit !important; }
main.moderne .beta-home-tribunes { border-top: 8px solid var(--beta-lemon); }
main.moderne .beta-home-shortcuts { background: #e9ecf2 !important; color: var(--beta-ink) !important; }
main.moderne .beta-home-shortcuts .porte { background: #fff; border-color: var(--beta-ink); }
main.moderne .beta-home-shortcuts .porte:hover { background: var(--beta-lemon); }
main.moderne .beta-home-shortcuts .porte :is(.t,.d) { color: var(--beta-ink) !important; }
main.moderne .beta-home-daily { background: var(--beta-violet) !important; }
main.moderne .beta-home-tools { background: var(--beta-paper) !important; color: var(--beta-ink) !important; border-top: 2px solid var(--beta-ink); border-bottom: 2px solid var(--beta-ink); }
main.moderne .beta-home-tools .outil { background: #fff; border-color: var(--beta-ink); }
main.moderne .beta-home-tools .outil:hover { background: var(--beta-lemon); }
main.moderne .beta-home-tools .outil :is(.t,.d) { color: var(--beta-ink) !important; }
main.moderne .beta-home-method { background: #e9ecf2 !important; color: var(--beta-ink) !important; }
.beta-home-method .methode { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.beta-home-method .methode > p { background: #fff; border: 1px solid var(--beta-line); }
.beta-home-method .methode .beta-ai-note { border-left: 6px solid var(--beta-lemon); }
.beta-home-method .beta-ai-note a { display: inline-block; margin-top: 8px; }

.beta-history-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--beta-ink); margin: 24px 0 34px; background: var(--beta-paper); }
.beta-history-choices a { display: block; padding: 0 0 20px; text-decoration: none; color: var(--beta-ink) !important; border-right: 2px solid var(--beta-ink); }
.beta-history-choices a:last-child { border-right: 0; }
.beta-history-choices a:first-child { background: var(--beta-violet); color: #fff !important; }
.beta-history-choices figure { margin: 0 0 17px; }
.beta-history-choices img { display: block; width: 100%; height: 155px; object-fit: cover; }
.beta-history-choices a:first-child img { object-position: center 38%; }
.beta-history-choices figcaption { padding: 5px 15px; background: var(--beta-ink); color: #fff !important; font: 500 9px/1.3 'IBM Plex Mono',monospace; }
.beta-history-choices strong { display: block; margin: 0 21px; font: 700 27px/1 'Barlow Condensed', sans-serif; }
.beta-history-choices span { display: block; margin: 7px 21px 0; font: 500 13px/1.4 'Atkinson Hyperlegible Next', Arial, sans-serif; }
.beta-history-choices .beta-marker { font: 600 11px/1 'IBM Plex Mono', monospace; letter-spacing: .07em; margin: 0 21px 13px; }
#chronique .head h1 { font-family: 'Barlow Condensed', sans-serif !important; text-transform: uppercase; letter-spacing: -.035em; }
#chronique .head .lead { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; }
#chronique #thf { scroll-margin-top: 90px; }
#chronique #thf .lbl { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.beta-period-nav { margin: 26px 0 8px; padding: 18px; border: 2px solid var(--beta-ink); background: #fff; }
.beta-period-nav > span { display: block; margin-bottom: 12px; color: var(--beta-violet); font: 600 11px/1.2 'IBM Plex Mono',monospace; letter-spacing: .08em; }
.beta-period-nav > div { display: flex; flex-wrap: wrap; gap: 7px; }
.beta-period-nav a { display: inline-block; padding: 7px 10px; background: var(--beta-paper); border: 1px solid var(--beta-line); color: var(--beta-ink) !important; text-decoration: none; font: 700 13px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-period-nav a:hover { background: var(--beta-lemon); border-color: var(--beta-ink); }
.beta-history-note { margin: 8px 0 26px; max-width: 680px; color: #4f5665; font: 500 13px/1.4 'Atkinson Hyperlegible Next',sans-serif; }
.periodes.hist .beta-chapter-image { display: grid; grid-template-columns: minmax(0,220px) minmax(0,1fr); gap: 18px; align-items: center; max-width: 670px; margin: 18px 0 20px; padding: 10px; border: 1px solid var(--beta-line); background: #fff; }
.periodes.hist .beta-chapter-image img { display: block; width: 100%; height: 160px; object-fit: contain; background: #f3f1e9; }
.periodes.hist .beta-chapter-image figcaption { margin: 0; padding: 0 12px 0 0; color: var(--beta-ink); font: 500 12px/1.45 'Atkinson Hyperlegible Next',Arial,sans-serif; }
.periodes.hist .beta-chapter-image figcaption a { display: block; width: fit-content; margin-top: 9px; color: var(--beta-violet); font-weight: 700; }
#chronique .beta-period-lanes { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(260px,1fr); gap: 20px; align-items: start; margin: 22px 0 42px; }
#chronique .beta-lane { min-width: 0; }
#chronique .beta-lane > h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 12px; padding: 10px 14px; color: #fff; background: var(--beta-violet); font: 700 24px/1 'Barlow Condensed',sans-serif; }
#chronique .beta-lane > h4 span { font: 600 11px 'IBM Plex Mono',monospace; }
#chronique .beta-world-lane { position: sticky; top: 86px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; }
#chronique .beta-world-lane > h4 { position: sticky; top: 0; z-index: 2; background: var(--beta-ink); }
#chronique .beta-lane .fdates { margin: 0; padding: 0; list-style: none; }
#chronique .beta-lane .ev { display: block !important; box-sizing: border-box; width: 100%; margin: 0 0 8px; padding: 13px 15px; border-left: 4px solid var(--beta-violet); background: #fff; }
#chronique .beta-world-lane .ev { border-left-color: var(--beta-lemon); background: #f0f2f5; }
#chronique .beta-lane .ev .dt { display: block !important; position: static !important; transform: none !important; width: 100% !important; margin: 0 0 6px !important; text-align: left !important; color: var(--beta-violet) !important; font: 700 12px 'IBM Plex Mono',monospace; }
#chronique .beta-world-lane .ev .dt { color: var(--beta-ink) !important; }
#chronique .beta-lane .ev .co { width: 100% !important; margin: 0; padding: 0; text-align: left !important; }
#chronique .beta-lane .ev .co h4 { margin: 0; text-align: left !important; color: var(--beta-ink); font: 700 clamp(18px,2vw,24px)/1.1 'Barlow Condensed',sans-serif; }
#chronique .beta-lane .ev .fv { float: none !important; width: min(100%,360px) !important; margin: 12px 0 !important; }
#chronique .beta-lane .ev::before, #chronique .beta-lane .fdates::before { display: none !important; }
#chronique .beta-lane .ev.hors { display: none !important; }
#chronique .frise.hist .fouv { margin: 15px 0 24px !important; }
#chronique .frise.hist .fouv img { display: block; width: 100%; height: clamp(210px,25vw,300px) !important; object-fit: cover; }
#chronique .frise.hist .fouv figcaption { font-size: 11px; }
#chronique .beta-lane .ev .fv img { max-height: 245px; width: 100%; object-fit: cover; }

/* Atlas des pays : une carte d'entrée, puis une page autonome par pays. */
#origines .beta-country-index { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); gap: 24px 36px; margin: 30px 0 20px; padding: clamp(22px,4vw,42px); color: #fff; background: var(--beta-ink); border-bottom: 7px solid var(--beta-lemon); }
#origines .beta-country-index-copy > span { color: var(--beta-lemon); font: 700 11px/1 'IBM Plex Mono',monospace; letter-spacing: .11em; }
#origines .beta-country-index h2 { max-width: 650px; margin: 12px 0 14px; color: #fff; font: 800 clamp(40px,5vw,64px)/.92 'Barlow Condensed',sans-serif; }
#origines .beta-country-index p { max-width: 60ch; margin: 0; color: #d8dce7; font: 500 15px/1.5 'Atkinson Hyperlegible Next',sans-serif; }
#origines .beta-country-picker { align-self: center; padding: 20px; color: var(--beta-ink); background: var(--beta-lemon); border: 2px solid #fff; box-shadow: 7px 7px 0 var(--beta-violet); }
#origines .beta-country-picker label { display: block; margin-bottom: 8px; font: 700 12px/1.2 'IBM Plex Mono',monospace; letter-spacing: .06em; text-transform: uppercase; }
#origines .beta-country-picker select { box-sizing: border-box; width: 100%; min-height: 48px; padding: 9px 39px 9px 12px; color: var(--beta-ink); background: #fff; border: 2px solid var(--beta-ink); font: 700 16px/1.25 'Atkinson Hyperlegible Next',sans-serif; }
#origines .beta-country-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
#origines .beta-country-actions a { padding: 8px 10px; color: #fff !important; background: var(--beta-violet); border: 1px solid var(--beta-ink); font: 700 12px/1.2 'Atkinson Hyperlegible Next',sans-serif; text-decoration: none; }
#origines .beta-country-regions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; padding-top: 5px; }
#origines .beta-country-regions a { padding: 7px 10px; color: #fff !important; border: 1px solid #596274; font: 700 12px/1.2 'Atkinson Hyperlegible Next',sans-serif; text-decoration: none; }
#origines .beta-country-regions a:hover { color: var(--beta-ink) !important; background: var(--beta-lemon); border-color: var(--beta-lemon); }
#origines .beta-country-regions span { color: var(--beta-lemon); font-family: 'IBM Plex Mono',monospace; }
#origines #beta-country-map { scroll-margin-top: 86px; padding: 14px; background: #fff; border: 1px solid var(--beta-line); }
#origines #beta-country-map .legend a { color: var(--beta-violet); font-weight: 700; }
#origines #beta-country-map g.beta-stat .pt { fill: #fff !important; stroke: var(--beta-violet) !important; stroke-width: 2.5px; }
#origines #beta-country-map g.beta-stat .lbl { opacity: 0; pointer-events: none; }
#origines #beta-country-map g.beta-stat:hover .lbl,
#origines #beta-country-map g.beta-stat:focus .lbl { opacity: 1; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.beta-country-list { margin: 45px 0 20px; }
.beta-country-region { margin: 0 0 38px; scroll-margin-top: 86px; }
.beta-country-region > h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 2px solid var(--beta-ink); font: 800 clamp(30px,4vw,46px)/1 'Barlow Condensed',sans-serif; }
.beta-country-region > h3 span { color: var(--beta-violet); font: 700 11px/1 'IBM Plex Mono',monospace; text-transform: uppercase; }
.beta-country-region ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.beta-country-region li { min-width: 0; margin: 0; padding: 0; list-style: none; }
.beta-country-region li a { display: grid; grid-template-rows: auto 1fr auto auto; gap: 7px; min-height: 145px; box-sizing: border-box; padding: 16px; color: var(--beta-ink) !important; background: #fff; border: 1px solid var(--beta-line); text-decoration: none; }
.beta-country-region li a:hover, .beta-country-region li a:focus-visible { border-color: var(--beta-violet); box-shadow: 4px 4px 0 var(--beta-lemon); transform: translate(-2px,-2px); }
.beta-country-region li span { color: var(--beta-violet); font: 700 10px/1 'IBM Plex Mono',monospace; text-transform: uppercase; }
.beta-country-region li strong { font: 800 28px/1 'Barlow Condensed',sans-serif; }
.beta-country-region li small { color: #535b6a; font: 600 12px/1.35 'Atkinson Hyperlegible Next',sans-serif; }
.beta-country-region li b { color: var(--beta-violet); font: 700 12px/1.2 'Atkinson Hyperlegible Next',sans-serif; }

html.beta-country-page #origines { max-width: 1120px; }
html.beta-country-page #origines > .ph { margin-bottom: 26px; padding: clamp(24px,5vw,58px); color: #fff; background: var(--beta-ink); border-bottom: 8px solid var(--beta-lemon); }
html.beta-country-page #origines > .ph .num { color: var(--beta-lemon); }
html.beta-country-page #origines > .ph h1 { max-width: 900px; margin: 10px 0; color: #fff; font: 800 clamp(58px,9vw,112px)/.85 'Barlow Condensed',sans-serif; letter-spacing: -.035em; }
html.beta-country-page #origines > .ph .lead { max-width: 720px !important; margin: 0 !important; color: #e8ebf2 !important; font: 500 17px/1.5 'Atkinson Hyperlegible Next',sans-serif !important; }
html.beta-country-page .beta-country-card { padding: 0 0 48px; border-top: 0; }
html.beta-country-page .beta-country-card > header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px 20px; align-items: end; margin: 0; padding: 22px clamp(16px,3vw,30px); color: #fff; background: var(--beta-violet); }
html.beta-country-page .beta-country-card > header .reg { color: var(--beta-lemon); font: 700 11px/1.2 'IBM Plex Mono',monospace; letter-spacing: .12em; text-transform: uppercase; }
/* « ATLAS » / « DATA » devant le nom : le site public le sert en Spectral rouge, qui
   disparaît sur le violet ; ici il prend la mono et le citron de la DA. */
html.beta-country-page .beta-country-card > header h3 > .no { display: block; margin: 0 0 8px; color: var(--beta-lemon) !important; font: 700 11px/1.2 'IBM Plex Mono',monospace !important; letter-spacing: .12em !important; text-transform: uppercase; }
html.beta-country-page .beta-country-card .recent b { display: block; margin: 0 0 4px; color: var(--beta-ink); font: 700 10px/1.2 'IBM Plex Mono',monospace; letter-spacing: .05em; text-transform: uppercase; }
/* Planche botanique du vivant : cadre ivoire et badge serif rouge du site public. */
html.beta-page .anat, body .anat { background: #eef0f5; border: 1px solid var(--beta-line); }
body .anat .badge .tag { padding: 5px 8px; color: var(--beta-ink); background: var(--beta-lemon); border: 0; font: 700 10px/1.2 'IBM Plex Mono',monospace !important; letter-spacing: .05em; text-transform: uppercase; }
html.beta-country-page .beta-country-card > header h3 { color: #fff; font: 800 clamp(40px,6vw,68px)/.9 'Barlow Condensed',sans-serif; }
html.beta-country-page .beta-country-card > header .prod { color: #fff; text-align: right; }
/* Un seul en-tête de fiche pays : la carte noire est réservée aux lecteurs d'écran,
   sa phrase passe sous le bandeau violet (gabarit, audit pays). */
.beta-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html.beta-country-page .beta-country-card > header .beta-country-chapeau { grid-column: 1 / -1; max-width: 62ch; margin: 2px 0 0; color: #fff !important; font: 500 16px/1.45 'Atkinson Hyperlegible Next',sans-serif !important; }
html.beta-country-page .beta-country-card > header .beta-country-depth { grid-column: 1 / -1; width: fit-content; padding: 6px 9px; color: var(--beta-ink); background: var(--beta-lemon); font: 700 10px/1.2 'IBM Plex Mono',monospace; letter-spacing: .05em; text-transform: uppercase; }
.beta-country-sections { position: sticky; top: 66px; z-index: 20; display: flex; gap: 0; overflow-x: auto; margin: 0 0 28px; background: #fff; border: 1px solid var(--beta-ink); scrollbar-width: thin; }
.beta-country-sections a { flex: 0 0 auto; padding: 11px 14px; color: var(--beta-ink) !important; border-right: 1px solid var(--beta-line); font: 700 12px/1.2 'Atkinson Hyperlegible Next',sans-serif; text-decoration: none; }
.beta-country-sections a:hover, .beta-country-sections a:focus-visible { background: var(--beta-lemon); }
html.beta-country-page .beta-country-card .cols { grid-template-columns: minmax(0,1.2fr) minmax(330px,.8fr); gap: clamp(24px,5vw,58px); padding: 0 clamp(4px,2vw,22px); }
html.beta-country-page .beta-country-card .intro p { font-size: 1.08rem; line-height: 1.68; }
html.beta-country-page .beta-country-card .carac { padding: 17px; background: #eef0f5; border-top: 5px solid var(--beta-violet); }
html.beta-country-page .beta-country-card .kv { grid-template-columns: minmax(145px,.8fr) minmax(0,1.2fr); gap: 13px; padding: 8px 0; }
html.beta-country-page .beta-country-card dt { overflow-wrap: anywhere; color: #4f5665; }
html.beta-country-page .beta-country-card dd { min-width: 0; overflow-wrap: anywhere; }
html.beta-country-page .beta-country-card .classif,
html.beta-country-page .beta-country-card .hist { max-width: none; margin: 38px clamp(4px,2vw,22px) 0; padding: clamp(18px,3vw,30px); border: 1px solid var(--beta-line); background: #fff; }
html.beta-country-page .beta-country-card .classif { border-top: 6px solid var(--beta-lemon); }
html.beta-country-page .beta-country-card .hist { border-top: 6px solid var(--beta-violet); }
html.beta-country-page .beta-country-card .hist > h4 { margin: 35px 0 13px; color: var(--beta-ink); font: 800 clamp(30px,4vw,45px)/1 'Barlow Condensed',sans-serif; }
html.beta-country-page .beta-country-card .hist > h4:first-of-type { margin-top: 16px; }
html.beta-country-page .beta-country-card .hist > p,
html.beta-country-page .beta-country-card .hist > ul { max-width: 78ch; font-size: 1rem; line-height: 1.65; }
html.beta-country-page .beta-country-card .src { display: block; max-width: 78ch; margin: 12px 0 23px; padding: 10px 13px; color: #4d5564; background: #eef0f5; border-left: 4px solid var(--beta-violet); font: 500 11px/1.45 'IBM Plex Mono',monospace; }
.beta-country-spark { margin: 22px 0 30px; padding: 14px; background: #f7f8fb; border: 1px solid var(--beta-line); }
.beta-country-spark svg { display: block; width: 100%; height: auto; overflow: visible; }
.beta-country-spark text { fill: #596274; font: 600 11px/1 'IBM Plex Mono',monospace; }
.beta-country-spark .beta-spark-axis { fill: none; stroke: #aeb4c0; stroke-width: 1.5; }
.beta-country-spark .beta-spark-line { fill: none; stroke: var(--beta-violet); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.beta-country-spark .beta-spark-last { fill: var(--beta-lemon); stroke: var(--beta-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.beta-country-spark .beta-spark-last.beta-spark-imputee { fill: #fff; stroke: var(--beta-violet); stroke-width: 2.5; stroke-dasharray: 3 2; }
/* Statut FAOSTAT année par année, quand la série le porte : un petit point creux par année imputée ou estimée. */
.beta-country-spark .beta-spark-seul { fill: var(--beta-violet); }
.beta-country-spark .beta-spark-annee { fill: #fff; stroke: var(--beta-violet); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.beta-country-spark .beta-spark-pic { fill: var(--beta-violet); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.beta-country-spark .beta-spark-grid { fill: none; stroke: #dfe2e8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.beta-country-spark .beta-spark-y { fill: #4d5564; font-weight: 500; }
.beta-country-spark .beta-spark-val { fill: var(--beta-ink); font-weight: 600; }
.beta-country-spark figcaption { margin-top: 10px; color: #535b6a; font: 500 12px/1.45 'Atkinson Hyperlegible Next',sans-serif; }
html.beta-country-page .beta-country-card .tscroll { max-width: 100%; overflow-x: auto; }
html.beta-country-page .beta-country-card table.cl { min-width: min(620px,100%); width: max-content; max-width: 100%; }
.beta-country-pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: 9px; align-items: stretch; margin: 38px clamp(4px,2vw,22px) 0; }
.beta-country-pagination a { display: grid; gap: 5px; padding: 14px; color: var(--beta-ink) !important; background: #fff; border: 1px solid var(--beta-ink); text-decoration: none; }
.beta-country-pagination a:last-child { text-align: right; }
.beta-country-pagination span { color: var(--beta-violet); font: 700 10px/1 'IBM Plex Mono',monospace; text-transform: uppercase; }
.beta-country-pagination strong { font: 800 23px/1 'Barlow Condensed',sans-serif; }
.beta-country-pagination .beta-country-back { place-items: center; color: #fff !important; background: var(--beta-violet); font: 700 12px/1.2 'Atkinson Hyperlegible Next',sans-serif; }

@media (max-width: 700px) {
  .beta-process-route-tabs { grid-template-columns: 1fr 1fr; }
  .beta-process-route-tabs button { min-height: 68px; }
  .beta-process-route-tabs button small { display: none; }
  .beta-process-machine { width: 165%; max-width: none; transform: translateX(-20%); }
  .beta-process-console { grid-template-columns: 1fr; }
  .beta-process-play { width: 100%; }
  .beta-process-stage-group { display: grid; grid-template-columns: 1fr 1fr; }
  .beta-process-stage-group button { min-width: 0; overflow-wrap: anywhere; text-align: left; }
  .beta-process-written li { grid-template-columns: 1fr; gap: 3px; }
  .beta-header { min-height: 62px; gap: 9px; }
  .beta-brand { font-size: 19px; }
  .beta-brand-icon { width: 31px; height: 31px; font-size: 22px; }
  .beta-quick, .beta-header-search { display: none; }
  .beta-menu-trigger { margin-left: auto; }
  .beta-menu-grid { grid-template-columns: 1fr 1fr; }
  .beta-menu-panel { max-height: calc(100vh - 62px); }
  .beta-home-hero { margin-bottom: 38px !important; padding-top: 18px !important; }
  .beta-home-stage { min-height: 680px; box-shadow: 7px 7px 0 var(--beta-violet); }
  .beta-home-stage::before { border-width: 6px; }
  .beta-home-signal { inset: 180px -115px -20px -62px; opacity: .58; }
  .beta-home-signal svg { width: 560px; max-width: none; transform: none; }
  .beta-home-copy { inset: 22px 18px auto; width: auto; padding: 20px 17px 22px; box-shadow: 7px 7px 0 rgba(83,216,223,.85); }
  main.moderne .beta-home-hero h1 { font-size: clamp(47px,14vw,66px) !important; }
  .beta-home-status { right: 10px; bottom: 10px; left: 10px; grid-template-columns: 1fr 1fr; }
  .beta-home-status span { min-width: 0; padding: 8px; font-size: 8px; }
  .beta-home-command { display: block; padding: 16px 13px; }
  .beta-home-command .grandchamp { display: grid; grid-template-columns: minmax(0,1fr) auto; margin-top: 14px; }
  .beta-home-command .grandchamp input { min-width: 0; }
  .beta-home-ai { display: block; margin-top: 22px; }
  .beta-home-ai p { margin: 8px 0 !important; }
  .beta-home-ai a { white-space: normal; }
  .beta-home-path-grid a { grid-template-columns: 38px 42px minmax(0,1fr); gap: 10px; min-height: 0; padding: 16px 12px; }
  .beta-home-path-grid i { width: 36px; height: 36px; font-size: 20px; box-shadow: 3px 3px 0 var(--beta-violet); }
  .beta-home-path-grid small { grid-column: 3; }
  .beta-home-path-grid b { grid-column: 3; justify-self: start; }
  .beta-subject-index { padding: 22px 14px 30px; }
  .beta-subject-intro { display: block; }
  .beta-subject-intro > a { display: inline-block; margin-top: 12px; }
  .beta-subject-jumps { margin: 20px 0 30px; }
  .beta-subject-group > summary { grid-template-columns: 42px minmax(0,1fr) 22px; gap: 8px 10px; padding: 13px 12px; }
  .beta-subject-count { grid-column: 2; }
  .beta-subject-group > summary > b { grid-column: 3; grid-row: 1 / 3; }
  .beta-subject-grid { grid-template-columns: 1fr; }
  .beta-subject-group[open] .beta-subject-grid { padding: 0 10px 10px; }
  .beta-subject-card { grid-template-columns: 80px minmax(0,1fr) 14px; min-height: 88px; gap: 10px; }
  .beta-subject-card img { width: 80px; height: 72px; }
  .beta-process-lab { width: calc(100vw - 24px); padding: 18px 13px 24px; }
  .beta-process-grid { grid-template-columns: 1fr; }
  .beta-process-route summary { min-height: 105px; }
  .beta-process-route-body { padding: 0 13px 15px; }
  .beta-process-story { width: calc(100vw - 24px); padding: 19px 13px; }
  .beta-story-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .beta-story-controls .beta-story-play { grid-column: 1 / -1; }
  .beta-story-visual { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; gap: 8px; padding: 12px; }
  .beta-story-visual > strong { font-size: 31px; }
  .beta-story-stage { min-height: 340px; }
  .beta-story-apparatus { height: 245px; }
  .beta-story-symbol { width: 112px; height: 112px; }
  .demuc-pulper,.demuc-friction,.demuc-check { inset: 8px; }
  .demuc-hopper { left: 30%; width: 40%; }
  .demuc-drum { left: 27%; top: 66px; width: 46%; }
  .demuc-feed { left: 1%; top: 102px; padding-right: 43px; }
  .demuc-pulp { left: 27%; bottom: 5px; }
  .demuc-parchment { right: 0; top: 105px; max-width: 94px; }
  .demuc-friction { grid-template-columns: 70px minmax(130px,1fr) 70px; gap: 5px; }
  .demuc-inlet,.demuc-outlet { padding-inline: 3px; font-size: 8px; }
  .demuc-chamber > b { font-size: 8px; }
  .demuc-water { left: 20%; }
  .demuc-waste { left: 42%; max-width: 100px; text-align: center; }
  .demuc-check { grid-template-columns: 1fr; gap: 7px; }
  .demuc-good,.demuc-bad { grid-template-columns: 60px 1fr; padding: 8px; }
  .demuc-parchment-bean { width: 42px; height: 59px; border-width: 3px; }
  .demuc-parchment-bean::before { left: 18px; height: 42px; }
  .demuc-good b,.demuc-bad b { font-size: 18px; }
  .beta-story-steps { grid-template-columns: 1fr; gap: 9px; }
  .beta-story-steps li { display: grid; grid-template-columns: 65px minmax(0,1fr); align-items: start; gap: 2px 12px; padding: 12px; }
  .beta-story-icon { grid-row: 1 / 3; width: 58px; height: 58px; margin: 0; }
  .beta-story-icon svg { width: 50px; height: 50px; }
  .beta-story-steps li:not(:last-child)::after { content: '⌄'; right: 13px; top: auto; bottom: -17px; }
  .beta-story-steps p { margin-top: 3px !important; }
  .beta-chemistry { padding: 17px 12px; }
  .beta-site-lab { width: calc(100vw - 24px); }
  .beta-chem-controls { display: grid; grid-template-columns: 1fr; }
  .beta-chem-controls .beta-chem-play { margin-left: 0; }
  .beta-chem-workbench { grid-template-columns: 1fr; }
  .beta-chem-scene { min-height: 245px; }
  .beta-chem-vessel { height: 188px; }
  .beta-chem-meter { grid-template-columns: minmax(110px,.9fr) minmax(80px,1fr) 44px; gap: 7px; }
  .beta-chem-track { grid-template-columns: 1fr; }
  .beta-chem-track > div { max-width: 210px; }
  .beta-ferment-lab, .beta-soluble-lab { width: calc(100vw - 24px); padding: 17px 12px; }
  .beta-ferment-system { grid-template-columns: 1fr; padding: 8px; }
  .ferment-system-intro { display: grid; gap: 5px; }
  .beta-ferment-scene { min-height: 360px; }
  .beta-ferment-vessel { width: min(78%,250px); height: 270px; }
  .beta-ferment-readout .beta-chem-meter { grid-template-columns: minmax(112px,1fr) minmax(72px,.85fr) 44px; }
  .sol-common { grid-template-columns: 1fr; }
  .sol-arrow { transform: rotate(90deg); text-align: center; }
  .sol-common .sol-node.aroma { margin-top: 4px; }
  .sol-fork { margin-inline: 3%; }
  .sol-branches { grid-template-columns: 1fr; }
  .sol-branch { grid-template-columns: 1fr 1fr; }
  .sol-detail { grid-template-columns: 1fr; min-height: 0; padding: 12px; }
  .sol-detail-visual { min-height: 245px; }
  .sol-detail dl { grid-template-columns: 1fr; }
  .sol-detail-counter { min-height: 290px; }
  .sol-detail-loop { grid-template-columns: 1fr 22px 1fr; padding-inline: 8px; }
  .sol-detail-loop .aroma-shield { grid-column: 1 / -1; min-height: 72px; }
  .sol-detail-loop .loop-arrow:nth-of-type(2) { display: none; }
  .return-arrow { left: 8%; right: 8%; }
  .sol-detail-droplet { min-height: 320px; }
  .sol-detail-phase { grid-template-columns: 1fr 48px 1fr; padding-inline: 8px; }
  .phase { width: 88px; height: 96px; }
  .ferment-network-visual { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .ferment-substrate { grid-row: auto; }
  .ferment-route { padding: 5px; text-align: left; }
  .beta-ferment-stage-details article { grid-template-columns: 1fr 1fr; }
  .beta-ferment-stage-details small { grid-column: 1 / -1; }
  .beta-soluble-play, .beta-ferment-play { margin-left: 0; }
  .beta-siaf-science { grid-template-columns: 1fr; }
  .beta-treatment-map { width: calc(100vw - 24px); padding: 19px 13px; }
  .beta-treatment-groups { grid-template-columns: 1fr; }
  .beta-treatment-group ol { grid-template-columns: 1fr; }
  .beta-treatment-group li a { min-height: 89px; }
  .beta-toolbar { font-size: 12px; }
  .beta-toolbar-return { width: 100%; margin-left: 0; }
  .beta-source-grid { grid-template-columns: 1fr; }
  .beta-source-card { grid-template-columns: 1fr; }
  .beta-source-card img { height: 190px; }
  #origines .beta-country-index { grid-template-columns: 1fr; padding: 22px 15px; }
  #origines .beta-country-index h2 { font-size: 42px; }
  #origines .beta-country-regions { grid-column: auto; }
  #origines #beta-country-map { padding: 7px; }
  .beta-country-region ul { grid-template-columns: 1fr; }
  .beta-country-region li a { min-height: 122px; }
  html.beta-country-page #origines > .ph { padding: 30px 16px; }
  html.beta-country-page .beta-country-card > header { grid-template-columns: 1fr; align-items: start; padding: 19px 14px; }
  html.beta-country-page .beta-country-card > header .prod { text-align: left; }
  .beta-country-sections { top: 61px; margin-bottom: 20px; }
  html.beta-country-page .beta-country-card .cols { grid-template-columns: 1fr; padding: 0; }
  html.beta-country-page .beta-country-card .carac { padding: 13px; }
  html.beta-country-page .beta-country-card .kv { grid-template-columns: minmax(112px,.75fr) minmax(0,1.25fr); gap: 9px; }
  html.beta-country-page .beta-country-card .classif,
  html.beta-country-page .beta-country-card .hist { margin-inline: 0; padding: 17px 13px; }
  .beta-country-pagination { grid-template-columns: 1fr 1fr; margin-inline: 0; }
  .beta-country-pagination .beta-country-back { grid-column: 1 / -1; grid-row: 1; min-height: 44px; }
  .beta-home-method .methode { grid-template-columns: 1fr !important; }
  .beta-history-choices { grid-template-columns: 1fr; }
  .beta-history-choices a { border-right: 0; border-bottom: 2px solid var(--beta-ink); }
  .beta-history-choices a:last-child { border-bottom: 0; }
  .periodes.hist .beta-chapter-image { grid-template-columns: 1fr; gap: 9px; }
  .periodes.hist .beta-chapter-image img { height: 175px; }
  .periodes.hist .beta-chapter-image figcaption { padding: 2px 5px 6px; }
  #chronique .beta-period-lanes { grid-template-columns: 1fr; gap: 14px; }
  #chronique .beta-world-lane { position: static; max-height: none; overflow: visible; order: -1; }
  #chronique .beta-world-lane > h4 { position: static; }
  #chronique .frise.hist .fouv img { height: 185px !important; }
  :where(h1,h2,h3,h4,section,article,[id]) { scroll-margin-top: 72px; }
}

@media (max-width: 350px) {
  .beta-chemistry { padding-inline: 9px; }
  .beta-chem-head h3 { font-size: 28px !important; }
  .beta-chem-meter { grid-template-columns: minmax(92px,.9fr) minmax(62px,1fr) 40px; gap: 5px; }
  .beta-chem-meter > span { font-size: 11px; }
  .beta-chem-scene { min-height: 225px; }
  .beta-chem-vessel { height: 172px; }
  .beta-ferment-stage-details article { grid-template-columns: 1fr; }
  .beta-ferment-readout .beta-chem-meter { grid-template-columns: minmax(94px,1fr) minmax(58px,.75fr) 40px; gap: 5px; }
}

@media (min-width: 701px) and (max-width: 1050px) {
  .beta-quick { display: none; }
  .beta-menu-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .beta-home-stage { min-height: 660px; }
  .beta-home-copy { width: 64%; }
  main.moderne .beta-home-hero h1 { font-size: clamp(52px,7.5vw,76px) !important; }
  .beta-home-path-grid a { grid-template-columns: 44px 48px minmax(200px,1fr) minmax(170px,.8fr); }
  .beta-home-path-grid b { display: none; }
  .beta-ferment-system { grid-template-columns: minmax(250px,.8fr) minmax(330px,1.2fr); }
  .beta-ferment-readout { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ════ Gabarit commun, d'après les cinq audits de la v85 ═══════════════════
   Préfixe `:is(body, #beta-gabarit)` : aucun élément ne porte cet identifiant,
   le préfixe ne désigne que `body` mais pèse le poids d'un identifiant. Il bat
   les règles d'origine (`.essai .txt p{font-family:var(--text)!important}`)
   sans dépendre de l'ordre des feuilles. */

/* 1. « Zones d'ombre » en panneau fixe et transparent à 390 px. La règle
   `aside{position:fixed;inset:0;z-index:60;transform:translateY(100%)}` des
   feuilles d'origine (47 feuilles, sous 900 px) visait le panneau de la carte des
   variétés (`aside#panel`) et frappait tout `aside` de contenu. */
@media (max-width: 900px) {
  :is(body, #beta-gabarit) aside:not(#panel) {
    position: static; inset: auto; z-index: auto; transform: none; transition: none;
  }
}

/* 6. La frise décalée de 168 px à gauche à 390 px (12 pages). Les blocs larges
   sortent de la colonne par `margin-left:50%; transform:translateX(-50%)`
   (`.essai .txt > ul.frise`) ; sous 640 px, `.essai .txt ul.frise{margin-left:0}`
   annule la marge mais pas la translation, qui tire la frise d'une demi-largeur
   hors de l'écran. Mesuré : translateX(-179,4 px), bord gauche à -168 px. */
@media (max-width: 700px) {
  :is(body, #beta-gabarit) .essai .txt > ul.frise { margin-left: 0; transform: none; max-width: 100%; }
}

/* 7. Lignes de 100 à 123 signes à 1 280 px sur les fiches de constructeur
   (`div.mfiche`), les fiches de process (`div.pfiche`) et les dossiers pays (78ch
   d'Atkinson font 102 à 109 signes). Référence : 75 signes. Mesuré sur la
   gabarit-v6 : 40 em donnent 83 à 90 signes ; 34 em visent les 75. */
:is(body, #beta-gabarit) .essai .txt > :is(div.mfiche, div.pfiche) :is(p, li, dd, blockquote) { max-width: 34em; }
html.beta-country-page :is(body, #beta-gabarit) .beta-country-card .hist :is(p, li) { max-width: 34em; }

/* 7. Restes de la DA publique dans le gabarit.
   - Les figures d'article du site public (`figure.fig` : cafeine-05, maladies-08,
     dechets-04…) : barres en `var(--c1..c4)` (rouge #C0392B, ocre #A87400),
     titre en Fraunces, « Les chiffres » en rouge cerise. On redéfinit leurs
     variables dans la palette de la bêta, sans toucher au dessin.
   - Légende des photos d'ouverture des sommaires (`figure.tetiere`) en Spectral SC
     sur cadre ivoire. */
/* Les variables du site public, redéfinies une fois pour toute page de l'ancien
   gabarit (`main.wrap`). Tout ce qui y lit encore sa police ou sa couleur par
   variable (sommaires, carte des variétés, routes, vivant, calculateurs, figures)
   passe dans la DA de la bêta sans règle composant par composant : plus de
   Fraunces, de Spectral, de Spectral SC, d'ivoire, de marron ni de rouge cerise.
   Les règles des modules de DA, plus précises, l'emportent toujours. */
:is(body, #beta-gabarit) main.wrap {
  --display: 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif;
  --text: 'Atkinson Hyperlegible Next', Arial, sans-serif;
  --sc: 'Atkinson Hyperlegible Next', Arial, sans-serif;
  --ui: 'Atkinson Hyperlegible Next', Arial, sans-serif;
  --paper: #f5f7f8; --paper2: #ffffff; --paper3: #eef0f5; --carton: #eef0f5;
  --papier: #f5f7f8; --papier-haut: #ffffff; --papier-creux: #eef0f5;
  --ink: #171923; --encre: #171923; --ink2: #51596b; --encre-mi: #51596b; --mute: #4d5564; --encre-pale: #4d5564;
  --rule: #c6cbd2; --filet: #c6cbd2; --rule2: #dfe2e8; --filet-pale: #dfe2e8;
  --leaf: #6043e8; --e-laurier: #6043e8; --cherry: #6043e8; --e-rubrique: #6043e8;
}
:is(body, #beta-gabarit) figure.fig {
  --c1: #6043e8; --c2: #171923; --c3: #51596b; --c4: #8d7cf0;
  --cherry: #6043e8; --display: 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif;
  --ui: 'IBM Plex Mono', ui-monospace, monospace;
}
:is(body, #beta-gabarit) figure.fig h4 { font-family: 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif !important; font-weight: 700 !important; letter-spacing: -.018em; }
:is(body, #beta-gabarit) figure.fig text { font-family: 'IBM Plex Mono', ui-monospace, monospace !important; }
:is(body, #beta-gabarit) figure.fig summary { color: var(--beta-violet) !important; font-family: 'IBM Plex Mono', ui-monospace, monospace !important; }
:is(body, #beta-gabarit) figure.fig .sub, :is(body, #beta-gabarit) figure.fig details { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; }
:is(body, #beta-gabarit) figure.tetiere figcaption, :is(body, #beta-gabarit) figure.tetiere figcaption * {
  font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; font-variant: normal !important;
  text-transform: none !important; letter-spacing: 0 !important; text-align: left !important;
}
:is(body, #beta-gabarit) figure.tetiere figcaption { font-size: 13px !important; color: #4d5564 !important; }
:is(body, #beta-gabarit) figure.tetiere img { background: transparent !important; }

/* 2. Sommaire replié au pied des sections (titres seuls). */
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie { margin: 48px 0 8px; padding: 0; border-top: 2px solid var(--beta-ink); }
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  min-height: 44px; padding: 12px 0; cursor: pointer; list-style: none;
}
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > summary::-webkit-details-marker { display: none; }
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > summary .q {
  font: 600 12px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--beta-violet);
}
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > summary .t {
  font: 700 22px/1.1 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif; letter-spacing: -.018em; color: var(--beta-ink);
}
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > summary::after {
  content: "+"; margin-left: auto; font: 600 22px/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--beta-violet);
}
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details[open] > summary::after { content: "\2212"; }
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > ol {
  display: block; columns: 2 300px; column-gap: 32px; margin: 4px 0 12px; padding: 0; list-style: none;
}
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > ol > li { break-inside: avoid; margin: 0; padding: 0; border-top: 1px solid var(--beta-line); }
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > ol > li::before,
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > ol > li::marker { content: none; }
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > ol > li > a {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 10px; align-items: baseline;
  min-height: 40px; padding: 8px 6px 8px 0; text-decoration: none; color: var(--beta-ink);
}
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > ol > li > a[aria-current] { background: #e8e2ff; box-shadow: inset 4px 0 0 var(--beta-violet); }
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > ol > li > a span.t { font: 600 17px/1.25 'Atkinson Hyperlegible Next', Arial, sans-serif; }
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > p.sous { margin: 8px 0 0; font: 500 15px/1.45 'Atkinson Hyperlegible Next', Arial, sans-serif; }
:is(body, #beta-gabarit) div.tdm.beta-tdm-replie > details > nav.beta-treatment-map { margin-top: 8px; }

/* 7. Phrase d'état des scènes et étapes écrites : en Atkinson partout, comme sur
   les fiches. Sur les sections, `.essai .txt p` (Spectral, !important) gagnait. */
:is(body, #beta-gabarit) :is(p.beta-story-status, .beta-story-written, .beta-story-written summary, .beta-story-written li, .beta-story-written li b, .beta-story-written li span, .beta-process-story p) {
  font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important;
}

/* 8. L'arbre des variétés (`carte.html`, et sa copie dans l'intégrale) : la dernière
   figure de l'ancienne DA (audit pays, v85 : « fond ivoire, nœuds beiges, branches
   marron »). Les polices étaient déjà passées ; restaient les onze couleurs de
   familles, relevées sur les archives du site (ocre, terre, brique) et redéfinies
   sur `:root`, que la redéfinition de `main.wrap` ne touchait pas, et la barre
   d'outils, peinte par la règle du menu commun (`.bar`, `--surface-page` ivoire).
   Les familles gardent onze teintes distinctes, parce qu'elles portent une
   information (la lignée), dans la palette de la bêta : le violet pour Typica, la
   lignée centrale ; l'encre pour le canephora, l'autre espèce ; aucun brun. Chaque
   teinte dépasse 3:1 de contraste sur blanc, le seuil d'un trait lisible. Les
   nœuds prennent 16 % de leur couleur sur blanc. */
:is(body, #beta-gabarit) main.wrap :is(#carte-box, #lignees, .fams, .legende, #carte) {
  --g-sp: #51596b; --g-eth: #00796b; --g-yem: #5f7f00; --g-typ: #6043e8; --g-bou: #c2185b;
  --g-bt: #9333b8; --g-tim: #1f5fbf; --g-sar: #00838f; --g-intro: #d35400; --g-f1: #2e7d32; --g-rob: #171923;
  --mix: 16%;
}
:is(body, #beta-gabarit) main.wrap #carte-box { background: #fff; }
:is(body, #beta-gabarit) main.wrap #carte-box .bar { background: var(--beta-paper); border-bottom: 2px solid var(--beta-ink); }
:is(body, #beta-gabarit) main.wrap #carte-box .node rect { fill: color-mix(in srgb, var(--c) var(--mix), #fff); }
:is(body, #beta-gabarit) main.wrap #carte-box .node:not(.hub) rect { fill: color-mix(in srgb, var(--c) 22%, #fff); fill-opacity: 1; }
:is(body, #beta-gabarit) main.wrap #carte-box .node.sel rect { fill: color-mix(in srgb, var(--c) 34%, #fff); }
:is(body, #beta-gabarit) main.wrap #carte-box .node text { fill: var(--beta-ink); }

/* ── Scènes animées, moteur commun (beta_scenes.py) ── */
.beta-scene { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,.42fr); align-items: center; gap: 20px; padding: clamp(18px,4vw,38px); color: #fff; }
.beta-scene-toile { min-width: 0; }
.beta-scene-svg { display: block; width: 100%; height: auto; border: 1px solid #53617c; background: linear-gradient(135deg,#1d2944,#11192b); }
.beta-scene-titre { color: #fff; font: 800 clamp(30px,5vw,58px)/.92 'Barlow Condensed',sans-serif; }
.beta-scene-reperes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.beta-scene-reperes span { padding: 4px 8px; border: 1px solid #59647a; color: #dfe5f2; font: 600 11px/1.3 'IBM Plex Mono',monospace; }
.beta-scene-reperes span.defaut { border-color: #ff6b67; color: #ffb3b0; }
.beta-scene-svg .cuve.science { fill: #141a2c; stroke: #59647a; stroke-dasharray: 4 3; }
/* Un texte posé sur un dessin (« tambour » sur les rayons) garde un liseré du fond. */
.beta-scene-svg text.sur-trait { paint-order: stroke; stroke: #16203a; stroke-width: 4px; stroke-linejoin: round; }
.beta-scene-svg .jauge-fond { fill: #2a3248; transition: opacity .4s ease; }
.beta-scene-svg .jauge { transition: width .6s ease, opacity .4s ease; }
.beta-scene-svg text.valeur { fill: #f3f5fa; }
/* Une variable absente à ce temps : la barre en pointillé, le nom et le mot
   (« pas encore », « sans objet ») atténués, au lieu d'une colonne blanche. */
.beta-scene-svg .jauge-fond.absente { fill: none; stroke: #6f7a92; stroke-width: 1.2; stroke-dasharray: 3 3; }
.beta-scene-svg text.absente, .beta-scene-svg text.valeur.absente { fill: #8d96ab; }
.beta-scene-svg text.molecule { fill: #d9ef59; }
.beta-scene-reperes span.etat { flex-basis: 100%; padding: 0 0 2px; border: 0; color: #f3f5fa; font: 500 14px/1.4 'Atkinson Hyperlegible Next',sans-serif; }
/* Sur un écran étroit, le lecteur choisit : la version debout, lisible mais haute,
   ou la version couchée réduite, qu'il peut pincer pour agrandir puisque c'est du
   vectoriel. Marco a demandé ce choix ; le défaut reste la version lisible. */
.beta-scene-vue { margin-top: 8px; padding: 6px 12px; border: 1px solid #59647a; border-radius: 999px; background: transparent; color: #dfe5f2; font: 700 11px 'Atkinson Hyperlegible Next',sans-serif; cursor: pointer; }
.beta-scene-vue[aria-pressed="true"] { background: var(--beta-lemon,#d9ef59); border-color: var(--beta-lemon,#d9ef59); color: #0b0f1e; }
.beta-scene .cuve { fill: rgba(255,255,255,.05); stroke: #aab5c9; stroke-width: 3; }
.beta-scene .cuve.ouverte { fill: #1a2742; }
.beta-scene .colonne { fill: #202c48; stroke: #aab5c9; stroke-width: 3; }
.beta-scene .lit { stroke: #aab5c9; stroke-width: 3; fill: none; }
.beta-scene .treillis { stroke: #aab5c9; stroke-width: 1.5; stroke-dasharray: 3 3; }
.beta-scene .tambour { fill: #1a2742; stroke: var(--beta-lemon,#d9ef59); stroke-width: 4; }
.beta-scene .plaque { stroke: #aab5c9; stroke-width: 7; fill: none; stroke-linecap: round; }
.beta-scene .tremie { fill: #f3b9ad; opacity: .85; }
.beta-scene .rotor { fill: #1b2742; stroke: var(--beta-lemon,#d9ef59); stroke-width: 2.5; }
.beta-scene .nervure { stroke: var(--beta-lemon,#d9ef59); stroke-width: 3; }
.beta-scene .actif .nervures { animation: beta-scene-rotor .8s linear infinite; }
.beta-scene .actif .ailettes { animation: beta-scene-tourne 2.2s linear infinite; transform-box: fill-box; transform-origin: center; }
.beta-scene .zone { stroke: rgba(255,255,255,.35); stroke-width: 2; stroke-dasharray: 5 5; }
.beta-scene .courant { stroke: #8bdcf3; stroke-width: 2; stroke-dasharray: 14 10; opacity: .55; }
.beta-scene .actif .courant { animation: beta-scene-courant 1.2s linear infinite; }
@keyframes beta-scene-courant { to { stroke-dashoffset: -24; } }
.beta-scene .tuyau { fill: none; stroke: #4e5c86; stroke-width: 7; stroke-linecap: round; }
.beta-scene .tuyau.interne { stroke: none; }
.beta-scene .etiq { fill: #eef2fb; font: 700 15px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-scene .petit { fill: #aab3c9; font: 600 12px 'IBM Plex Mono',monospace; }
.beta-scene .annot { fill: #c8d1e2; font: 700 12px 'IBM Plex Mono',monospace; }
.beta-scene .annot.centre { text-anchor: middle; }
.beta-scene .annot.sortie { fill: #ff9a64; }
.beta-scene .grain { transition: fill .5s ease, stroke .5s ease, stroke-width .5s ease; }
.beta-scene .niveau { opacity: .55; transition: y .6s ease, height .6s ease; }
.beta-scene .pt { transition: opacity .3s ease; }
/* Debout, les textes du moteur grandissent d'un demi-point. :where() ramène ces
   règles à la spécificité de « .beta-scene .petit » : écrites
   « .beta-scene .etroit .petit », elles l'emportaient sur la taille qu'un module
   donne à sa propre classe (« petit regl-leg » restait à 12,5 px). Une classe de
   module déclarée après le moteur gagne désormais, debout comme couché. */
.beta-scene .etroit :where(.etiq) { font-size: 16px; }
.beta-scene .etroit :where(.petit, .annot) { font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) {
  .beta-scene .actif .nervures, .beta-scene .actif .ailettes, .beta-scene .actif .courant { animation: none !important; }
  .beta-scene-svg .jauge, .beta-scene-svg .jauge-fond { transition: none; }
}
@keyframes beta-scene-rotor { to { transform: translateY(-14px); } }
@keyframes beta-scene-tourne { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .beta-scene { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .beta-scene-titre { font-size: 31px; }
}

/* ── scenes_apres_recolte ── */

/* ── Formes de la famille « après la récolte » (scenes_apres_recolte.py) ── */
/* Les états par temps : apr-des<k> paraît à l'état k, apr-jusq<k> s'en va à l'état
   k, apr-a<k> ne se voit qu'à l'état k. Les retards (transition-delay) sont posés
   sur chaque élément : ce qui arrive arrive un par un. */
.beta-scene .apr-des1, .beta-scene .apr-des2, .beta-scene .apr-des3,
.beta-scene .apr-a0, .beta-scene .apr-a1, .beta-scene .apr-a2, .beta-scene .apr-a3 { opacity: 0; transition: opacity .5s ease; }
.beta-scene .apr-ge1 .apr-des1, .beta-scene .apr-ge2 .apr-des2, .beta-scene .apr-ge3 .apr-des3 { opacity: 1; }
.beta-scene .apr-jusq1, .beta-scene .apr-jusq2, .beta-scene .apr-jusq3 { transition: opacity .5s ease; }
.beta-scene .apr-ge1 .apr-jusq1, .beta-scene .apr-ge2 .apr-jusq2, .beta-scene .apr-ge3 .apr-jusq3 { opacity: 0; }
.beta-scene [data-apr-etat="0"] .apr-a0, .beta-scene [data-apr-etat="1"] .apr-a1,
.beta-scene [data-apr-etat="2"] .apr-a2, .beta-scene [data-apr-etat="3"] .apr-a3 { opacity: 1; }
.beta-scene .apr-fin { text-anchor: end; }
.beta-scene .apr-centre { text-anchor: middle; }
.beta-scene .apr-alerte { fill: #ff9a8f; }
.beta-scene text.apr-verdict { fill: #ff6b67; }
.beta-scene text.apr-ok { fill: #d9ef59; }
.beta-scene text.apr-sombre { fill: #dfe5f2; }
.beta-scene .apr-anneau { fill: none; stroke: #ff6b67; stroke-width: 2; stroke-dasharray: 3 2; }
.beta-scene .apr-anneau.apr-violet { stroke: #b07cff; stroke-width: 2.5; }
.beta-scene .apr-eau { fill: #8bdcf3; opacity: .16; }
.beta-scene .apr-eau.apr-eau-forte { opacity: .24; }
.beta-scene .apr-surface { fill: none; stroke: #8bdcf3; stroke-width: 2.5; stroke-dasharray: 10 6; }
.beta-scene .actif .apr-surface { animation: beta-scene-courant 1.2s linear infinite; }
.beta-scene .apr-tube { fill: none; stroke: #aab5c9; stroke-width: 3; stroke-linejoin: round; }
.beta-scene .apr-paroi { stroke: #aab5c9; stroke-width: 2; }
.beta-scene .apr-flotte, .beta-scene .apr-secoue, .beta-scene .apr-goutte, .beta-scene .apr-bulle, .beta-scene .apr-o2, .beta-scene .apr-diffuse, .beta-scene .apr-aiguille { transform-box: fill-box; }
.beta-scene .actif .apr-flotte { animation: apr-flotte 1.4s ease-in-out infinite alternate; }
.beta-scene .apr-plaque { stroke: #aab5c9; stroke-width: 4; stroke-dasharray: 8 5; }
.beta-scene .actif .apr-secoue { animation: apr-secoue .16s linear infinite alternate; }
.beta-scene .apr-deck { stroke: #d9ef59; stroke-width: 4; stroke-dasharray: 6 3; }
.beta-scene .apr-plenum { fill: rgba(139,220,243,.08); stroke: #59647a; stroke-width: 1.5; }
.beta-scene .apr-camera { fill: #26324f; stroke: #d9ef59; stroke-width: 2; }
.beta-scene .apr-lentille { fill: #8bdcf3; stroke: #d9ef59; stroke-width: 1.5; }
.beta-scene .apr-faisceau { fill: #d9ef59; opacity: .16; }
.beta-scene .actif .apr-faisceau { animation: apr-pulse .8s ease-in-out infinite alternate; }
.beta-scene .apr-buse { fill: #aab5c9; }
.beta-scene .apr-souffle { stroke: #eef2fb; stroke-width: 2; stroke-dasharray: 5 4; opacity: 0; }
.beta-scene .actif .apr-souffle { animation: apr-souffle .7s linear infinite; }
.beta-scene .apr-bac { fill: rgba(255,255,255,.04); stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .apr-bac.apr-rejet { stroke: #ff6b67; }
.beta-scene .apr-goutte { fill: #8bdcf3; }
.beta-scene .actif .apr-goutte { animation: apr-goutte 1.6s ease-in-out infinite alternate; }
.beta-scene .apr-loupe { fill: #0f1626; stroke: #eef2fb; stroke-width: 2.5; }
.beta-scene .apr-manche { stroke: #eef2fb; stroke-width: 5; stroke-linecap: round; }
.beta-scene .apr-parche { fill: #f0dda4; opacity: .35; stroke: #dfc686; stroke-width: 3; }
.beta-scene .apr-diffuse { fill: #8bdcf3; }
.beta-scene .actif .apr-diffuse { animation: apr-diffuse 2.2s ease-in-out infinite; }
.beta-scene .apr-ecran { fill: rgba(255,255,255,.04); stroke: #aab5c9; stroke-width: 3; stroke-dasharray: 4 3; }
.beta-scene .apr-conduit { fill: rgba(255,255,255,.03); stroke: #6f7c98; stroke-width: 2; }
.beta-scene .apr-aimant { fill: none; stroke: #ff6b67; stroke-width: 3; stroke-linecap: round; }
.beta-scene .apr-cyclone { fill: #1a2742; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .apr-copeau { fill: none; stroke: #f0dda4; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .apr-copeau.apr-argent { stroke: #dfe6f0; }
.beta-scene .apr-jauge { fill: #2a3248; stroke: #59647a; stroke-width: 1; }
.beta-scene .apr-jauge-ok { fill: #7ee0a8; opacity: .7; }
.beta-scene .apr-aiguille { fill: #d9ef59; }
.beta-scene [data-apr-etat="2"] .apr-aiguille { animation: apr-jauge 3.6s ease-in-out infinite; fill: #ff6b67; }
.beta-scene .apr-chambre { fill: #1a2742; stroke: #aab5c9; stroke-width: 3; }
.beta-scene .apr-jet { stroke: #8bdcf3; stroke-width: 2; stroke-dasharray: 2 4; opacity: .9; }
.beta-scene .actif .apr-jet { animation: beta-scene-courant .6s linear infinite; }
.beta-scene .apr-chaleur { fill: none; stroke: #ff9a64; stroke-width: 2; stroke-linecap: round; }
.beta-scene .apr-sac { fill: rgba(240,221,164,.12); stroke: #dfc686; stroke-width: 2; stroke-dasharray: 3 2; }
.beta-scene .apr-thermo { fill: #1a2742; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .apr-mercure, .beta-scene .apr-bulbe { fill: #ff6b67; }
.beta-scene .apr-goutte-f { fill: #8bdcf3; }
.beta-scene .apr-graine { fill: none; stroke: #7ee0a8; stroke-width: 3; }
.beta-scene .apr-bande { fill: #d9ef59; opacity: 0; transition: opacity .5s ease; }
.beta-scene .apr-sillon { fill: none; stroke: #7ee0a8; stroke-width: 2; opacity: .6; }
.beta-scene .apr-embryon { fill: #d9ef59; stroke: #d9ef59; stroke-width: 1.5; transition: fill .6s ease; }
.beta-scene .apr-sucre { fill: #ffb45d; transition: opacity .6s ease; }
.beta-scene .apr-sucre.apr-acamine { fill: #9ee3cd; }
.beta-scene .apr-lipide { fill: #ffc46b; stroke: #ffc46b; stroke-width: 1; transition: stroke .6s ease; }
.beta-scene .apr-acide { fill: #ffc46b; opacity: 0; transition: opacity .6s ease; }
.beta-scene [data-apr-etat="1"] .apr-b1, .beta-scene [data-apr-etat="2"] .apr-b2, .beta-scene [data-apr-etat="2"] .apr-b3, .beta-scene [data-apr-etat="3"] .apr-b3 { opacity: .12; }
.beta-scene [data-apr-etat="1"] .apr-embryon, .beta-scene [data-apr-etat="2"] .apr-embryon, .beta-scene [data-apr-etat="3"] .apr-embryon { fill: none; stroke-dasharray: 3 3; }
.beta-scene [data-apr-etat="2"] .apr-perd, .beta-scene [data-apr-etat="3"] .apr-perd { opacity: .15; }
.beta-scene [data-apr-etat="2"] .apr-acide, .beta-scene [data-apr-etat="3"] .apr-acide { opacity: 1; }
.beta-scene [data-apr-etat="3"] .apr-lipide { stroke: #ff6b67; stroke-width: 2.5; }
.beta-scene .apr-lotgrain { fill: #7ee0a8; transition: fill .8s ease; }
.beta-scene .apr-ge1 .apr-lotgrain { fill: #e8dc8c; }
.beta-scene .apr-tasse { fill: none; stroke: #eef2fb; stroke-width: 2.5; }
.beta-scene .apr-anse { fill: none; stroke: #eef2fb; stroke-width: 2.5; }
.beta-scene .apr-note { fill: #7ee0a8; transform-box: fill-box; transform-origin: left center; transition: transform 1.4s ease .6s, fill 1.4s ease .6s; }
.beta-scene .apr-ge1 .apr-note { transform: scaleX(.55); fill: #ff6b67; }
.beta-scene .apr-lavo { fill: #8bdcf3; opacity: .3; transform-box: fill-box; transform-origin: center bottom; transition: transform 1.2s ease; }
.beta-scene .apr-lav[data-apr-etat="0"] .apr-lavo { animation: apr-charge 3.2s ease .4s forwards; }
.beta-scene .apr-lav[data-apr-etat="1"] .apr-lavo, .beta-scene .apr-lav[data-apr-etat="2"] .apr-lavo { fill: #ffb45d; opacity: .55; }
.beta-scene .apr-lav[data-apr-etat="2"] .apr-lavo { transform: scaleY(.16); }
.beta-scene .apr-lav[data-apr-etat="0"] .grain { animation: apr-lache 3.2s ease .4s forwards; }
.beta-scene .apr-pierre { fill: #c8d1e2; opacity: .45; }
.beta-scene .apr-bambou { fill: none; stroke: #9ee3cd; stroke-width: 1.5; opacity: .7; }
.beta-scene .apr-bulle { fill: #7f8ca8; }
.beta-scene .actif .apr-bulle { animation: apr-monte 1.8s linear infinite; }
.beta-scene .apr-berge { stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .apr-poisson { fill: #9ee3cd; transition: opacity .6s ease; }
.beta-scene .apr-o2 { fill: none; stroke: #eef2fb; stroke-width: 1.2; transition: opacity .6s ease; }
.beta-scene .actif .apr-o2 { animation: apr-monte 2.4s linear infinite; }
.beta-scene .apr-pollue { fill: #c98a3e; opacity: 0; transition: opacity .8s ease; }
.beta-scene .apr-panache { fill: #e0c27a; opacity: 0; transition: opacity .8s ease; }
.beta-scene .apr-riv[data-apr-etat="1"] .apr-pollue { opacity: .55; }
.beta-scene .apr-riv[data-apr-etat="1"] .apr-poisson, .beta-scene .apr-riv[data-apr-etat="1"] .apr-o2 { opacity: 0; }
.beta-scene .apr-riv[data-apr-etat="3"] .apr-panache { opacity: .3; }
.beta-scene .apr-riv[data-apr-etat="3"] .apr-poisson.apr-sensible { opacity: .15; }
.beta-scene .apr-lagune { fill: #8bdcf3; opacity: .24; transition: fill 1.6s ease, opacity 1.6s ease; }
.beta-scene .apr-ge1 .apr-lagune { fill: #ffb45d; opacity: .5; }
.beta-scene .apr-horloge { fill: #1a2742; stroke: #eef2fb; stroke-width: 2; }
.beta-scene .apr-aiguille-h { stroke: #d9ef59; stroke-width: 2.5; stroke-linecap: round; transform-box: view-box; }
.beta-scene .actif .apr-aiguille-h { animation: beta-scene-tourne 1.6s linear infinite; }
.beta-scene .apr-profil .apr-pollue { fill: #ffb45d; }
.beta-scene .apr-ephemere { fill: #9ee3cd; stroke: #9ee3cd; stroke-width: 1.6; stroke-linecap: round; transition: opacity .6s ease; }
.beta-scene .apr-chiro { fill: none; stroke: #ff6b67; stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .6s ease; }
.beta-scene .apr-profil[data-apr-etat="1"] .apr-pollue, .beta-scene .apr-profil[data-apr-etat="2"] .apr-pollue { opacity: .42; }
.beta-scene .apr-profil[data-apr-etat="1"] .apr-o2.apr-aval, .beta-scene .apr-profil[data-apr-etat="2"] .apr-o2.apr-aval { opacity: 0; }
.beta-scene .apr-profil[data-apr-etat="2"] .apr-ephemere.apr-aval { opacity: 0; }
.beta-scene .apr-profil[data-apr-etat="2"] .apr-chiro { opacity: 1; }
.beta-scene .apr-plante { fill: none; stroke: #9ee3cd; stroke-width: 2; stroke-linecap: round; }
.beta-scene .apr-plateau, .beta-scene .apr-coupelle { fill: rgba(255,255,255,.04); stroke: #6f7c98; stroke-width: 2; }
.beta-scene .apr-balance { fill: #1a2742; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .apr-pied { stroke: #aab5c9; stroke-width: 3; }
.beta-scene .apr-lcd { fill: #0f1626; stroke: #d9ef59; stroke-width: 1.5; }
.beta-scene text.apr-lcdtxt { fill: #d9ef59; }
.beta-scene .apr-trou { fill: #141826; }
.beta-scene .apr-ride { fill: none; stroke: #6f7c98; stroke-width: 1.2; }
.beta-scene .apr-fente { stroke: #121b30; stroke-width: 1; opacity: .5; }
.beta-scene .apr-etagere { stroke: #6f7c98; stroke-width: 2; }
.beta-scene .apr-etagere.apr-cat1 { stroke: #ff6b67; }
.beta-scene .apr-accolade { fill: none; stroke: #d9ef59; stroke-width: 2; }
.beta-scene .apr-accolade.apr-incomplet { stroke: #aab5c9; stroke-dasharray: 3 3; }
@keyframes apr-flotte { from { transform: translateY(-1.5px); } to { transform: translateY(2px); } }
@keyframes apr-secoue { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
@keyframes apr-pulse { to { opacity: .36; } }
@keyframes apr-souffle { 0% { opacity: 0; stroke-dashoffset: 0; } 30% { opacity: .9; } 100% { opacity: 0; stroke-dashoffset: -18; } }
@keyframes apr-goutte { from { transform: translate(-4px, 3px); } to { transform: translate(4px, -3px); } }
@keyframes apr-monte { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-22px); opacity: 0; } }
@keyframes apr-diffuse { 0% { transform: translate(0, 0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes apr-jauge { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(var(--haut)); } 70% { transform: translateY(var(--bas)); } }
@keyframes apr-charge { from { fill: #8bdcf3; opacity: .3; } to { fill: #ffb45d; opacity: .55; } }
@keyframes apr-lache { from { stroke-opacity: 1; } to { stroke-opacity: .08; } }
@media (prefers-reduced-motion: reduce) {
  .beta-scene .actif .apr-surface, .beta-scene .actif .apr-flotte, .beta-scene .actif .apr-secoue,
  .beta-scene .actif .apr-faisceau, .beta-scene .actif .apr-souffle, .beta-scene .actif .apr-goutte,
  .beta-scene .actif .apr-jet, .beta-scene .actif .apr-bulle, .beta-scene .actif .apr-o2,
  .beta-scene .actif .apr-diffuse, .beta-scene .actif .apr-aiguille-h { animation: none; }
  .beta-scene .actif .apr-souffle { opacity: .7; }
  .beta-scene [data-apr-etat="2"] .apr-aiguille { animation: none; transform: translateY(var(--haut)); }
  .beta-scene .apr-lav[data-apr-etat="0"] .apr-lavo { animation: none; fill: #ffb45d; opacity: .55; }
  .beta-scene .apr-lav[data-apr-etat="0"] .grain { animation: none; stroke-opacity: .08; }
}

/* ── scenes_cafeine ── */

/* ── Caféine et soluble (scenes_cafeine.py) ── */
.beta-process-story[data-story-kind^="scene:caf-"] .beta-scene .poste .caf-m { transition: opacity .45s ease; }
.beta-process-story[data-story-kind^="scene:caf-"] .beta-scene .poste:not(.actif) .caf-m { opacity: .38; }
.beta-scene .caf-gaine { fill: none; stroke: #4e5c86; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .caf-gaine.fine { stroke-width: 4; }
.beta-scene .caf-gaine.serpentin { stroke: #6f7fae; }
.beta-scene .caf-milieu { text-anchor: middle; }
.beta-scene .caf-violet { fill: #c9a7ff; }
.beta-scene .caf-chaud { fill: #ffb26b; }
.beta-scene .caf-froid { fill: #bfe6ff; }
.beta-scene .caf-tremie { fill: #26334f; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .caf-moulu { fill: #6b4430; }
.beta-scene .caf-condenseur { fill: #1a2742; stroke: #8bdcf3; stroke-width: 2; }
.beta-scene .caf-flacon { fill: #1a2742; stroke: #c9a7ff; stroke-width: 2; }
.beta-scene .caf-flacon-arome { fill: #c9a7ff; opacity: .75; }
.beta-scene .caf-colonne { fill: #1a2742; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .caf-lit { stroke: none; }
.beta-scene .caf-bac { fill: none; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .caf-marc { fill: #a39585; }
.beta-scene .caf-refroid { fill: none; stroke: #8bdcf3; stroke-width: 2.5; stroke-linejoin: round; }
.beta-scene .caf-cuve { fill: #1a2742; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .caf-vide { stroke-dasharray: 7 4; }
.beta-scene .caf-liquide { fill: #a0663e; opacity: .85; transition: fill .6s ease; }
.beta-process-story[data-story-step="1"] .beta-scene .caf-liquide, .beta-process-story[data-story-step="2"] .beta-scene .caf-liquide, .beta-process-story[data-story-step="4"] .beta-scene .caf-liquide { fill: #7a4a2a; }
.beta-scene .caf-bulle { fill: #e8eef7; opacity: .8; }
.beta-scene .caf-tour { fill: #1d2a47; stroke: #aab5c9; stroke-width: 3; }
.beta-scene .caf-tas { fill: #e3c38f; opacity: .85; }
.beta-scene .caf-disque { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .caf-brume { fill: #8a5532; }
.beta-scene .caf-pate { fill: #7a4a2a; }
.beta-scene .caf-bande { fill: #53617c; }
.beta-scene .caf-rouleau { fill: #1a2742; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .caf-gele { fill: #9c7a62; stroke: #bfe6ff; stroke-width: 1.5; }
.beta-scene .caf-broyeur { fill: #1a2742; stroke: var(--beta-lemon,#d9ef59); stroke-width: 2.5; stroke-dasharray: 4 3; }
.beta-scene .caf-plateau { stroke: #aab5c9; stroke-width: 2; }
.beta-scene .caf-granule { fill: #c08a55; }
.beta-scene .caf-givre { fill: none; stroke: #bfe6ff; stroke-width: 2.5; }
.beta-scene .caf-bocal { fill: #26334f; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .caf-couvercle { fill: #aab5c9; }
.beta-scene .caf-fin { text-anchor: end; }
.beta-scene .caf-orange { fill: #ffb45d; }
.beta-scene .caf-rouge { fill: #ff8a8a; }
.beta-scene .caf-citron { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .caf-tasse { fill: #eef2fb; }
.beta-scene .caf-anse { fill: none; stroke: #eef2fb; stroke-width: 3.5; }
.beta-scene .caf-cafe { fill: #6f4128; }
.beta-scene .caf-intestin { fill: none; stroke: #7d3f4a; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .caf-intestin-lumiere { fill: none; stroke: #b5606a; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .caf-paroi { stroke: #7d3f4a; stroke-dasharray: 4 3; }
.beta-scene .caf-vaisseau { fill: #4a1f2a; stroke: #ff6b67; stroke-width: 2.5; }
.beta-scene .caf-globule { fill: #c2414a; opacity: .7; }
.beta-scene .caf-foie { fill: #4a2330; stroke: #b5606a; stroke-width: 2.5; }
.beta-scene .caf-enzyme { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .caf-cycle { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.beta-scene .caf-liaison { stroke-width: 2; }
.beta-scene .caf-mol-cafeine .caf-cycle, .beta-scene .caf-mol-cafeine .caf-liaison { stroke: #ff8a8a; }
.beta-scene .caf-mol-cafeine .caf-methyle { fill: #ff8a8a; }
.beta-scene .caf-mol-para .caf-cycle, .beta-scene .caf-mol-para .caf-liaison { stroke: #ffb45d; }
.beta-scene .caf-mol-para .caf-methyle { fill: #ffb45d; }
.beta-scene .caf-mol-theobro .caf-cycle, .beta-scene .caf-mol-theobro .caf-liaison { stroke: #9ec5ff; }
.beta-scene .caf-mol-theobro .caf-methyle { fill: #9ec5ff; }
.beta-scene .caf-mol-theophy .caf-cycle, .beta-scene .caf-mol-theophy .caf-liaison { stroke: #7ee0a8; }
.beta-scene .caf-mol-theophy .caf-methyle { fill: #7ee0a8; }
.beta-scene .caf-methyle { fill: #eef2fb; }
.beta-scene .caf-neurone { fill: #24304f; stroke: #aab5c9; stroke-width: 2.5; stroke-linejoin: round; }
.beta-scene .caf-vesicule { fill: #1a2742; stroke: var(--beta-lemon,#d9ef59); stroke-width: 1.8; }
.beta-scene .caf-messager { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .caf-recepteur { fill: #3a4a72; stroke: var(--beta-lemon,#d9ef59); stroke-width: 2; }
.beta-scene .caf-libre { stroke: #1a2742; stroke-width: 1; }
.beta-scene .caf-axe { fill: none; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .caf-trace { fill: none; stroke: #ff8a8a; stroke-width: 3.5; stroke-linecap: round; }
.beta-scene .caf-tirets { stroke: #aab5c9; stroke-width: 1.2; stroke-dasharray: 4 4; }
.beta-scene .caf-curseur { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .caf-grain { stroke: rgba(255,255,255,.3); stroke-width: 1; }
.beta-scene .caf-sillon { fill: none; stroke: rgba(20,12,8,.6); stroke-width: 1.4; }
.beta-scene .caf-pt-cafeine { fill: #ff8a8a; stroke: #11192b; stroke-width: 1; }
.beta-scene .caf-pt-cafeine.fin { stroke-width: .6; }
.beta-scene .caf-galette-plus { fill: #6b4430; }
/* La balance du temps 05 de la tasse. */
.beta-scene .caf-pied { fill: none; stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; }
.beta-scene .caf-pivot { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .caf-fil { fill: none; stroke: #aab5c9; stroke-width: 1.4; }
.beta-scene .caf-pied-plateau { fill: #53617c; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .caf-fleau { transform-box: view-box; transition: transform 1.2s ease .5s; }
.beta-scene .caf-bassin { transition: transform 1.2s ease .5s; }
.beta-process-story[data-story-step="4"] .beta-scene .caf-fleau { transform: rotate(-7deg); }
.beta-process-story[data-story-step="4"] .beta-scene .caf-bassin-g { transform: translateY(7.6px); }
.beta-process-story[data-story-step="4"] .beta-scene .caf-bassin-d { transform: translateY(-7.6px); }
.beta-process-story[data-story-step="4"] .beta-scene .etroit .caf-bassin-g { transform: translateY(8.5px); }
.beta-process-story[data-story-step="4"] .beta-scene .etroit .caf-bassin-d { transform: translateY(-8.5px); }
/* Ce qui se remplit : le flacon d'arômes (temps 02), le bocal de l'agglomération
   (temps 04), celui de la lyophilisation (temps 05). */
.beta-scene .caf-remplit { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.06); transition: transform 2.4s ease .3s; }
.beta-scene .caf-bocal-plein { fill: #c08a55; }
.beta-scene .caf-gaine.caf-reinj { stroke: #5b4f86; }
/* Le soluble a six postes dans la toile : ses étiquettes sont un peu plus grandes
   que celles du moteur, pour rester vers 10,5 px à l'écran (la revue les lisait
   vers 9 px à 1 280 et moins à 390). */
.beta-process-story[data-story-kind="scene:caf-soluble"] .beta-scene .annot, .beta-process-story[data-story-kind="scene:caf-soluble"] .beta-scene .petit { font-size: 13px; }
.beta-process-story[data-story-kind="scene:caf-soluble"] .beta-scene .etroit .annot, .beta-process-story[data-story-kind="scene:caf-soluble"] .beta-scene .etroit .petit { font-size: 14px; }
.beta-process-story[data-story-kind="scene:caf-soluble"] .beta-scene .etroit .etiq { font-size: 17px; }
.beta-scene .caf-machine { fill: #2c3a5c; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .caf-panier { fill: #1a2742; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .caf-galette { fill: #5a3826; }
.beta-scene .caf-manche { fill: none; stroke: #aab5c9; stroke-width: 7; stroke-linecap: round; }
.beta-scene .caf-boisson { fill: #5a3420; }
.beta-scene .caf-boisson.clair { fill: #8a5a36; opacity: .8; }
.beta-scene .caf-bouilloire { fill: #2c3a5c; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .caf-bec { fill: none; stroke: #aab5c9; stroke-width: 4; stroke-linecap: round; }
.beta-scene .caf-cone { fill: #eef2fb; opacity: .9; }
.beta-scene .caf-lit-mouture { fill: #6b4430; }
.beta-scene .actif .caf-turbine { animation: caf-tourne .5s linear infinite; transform-box: fill-box; transform-origin: center; }
.beta-scene .actif .caf-gouttes { animation: caf-pulse 0.9s ease-in-out infinite alternate; }
.beta-scene .actif .caf-bulles { animation: caf-monte 1.4s linear infinite; }
.beta-scene .actif .caf-broyeur { animation: caf-tourne 1s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes caf-tourne { to { transform: rotate(360deg); } }
@keyframes caf-pulse { from { opacity: .45; } to { opacity: 1; } }
@keyframes caf-monte { to { transform: translateY(-8px); opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  .beta-scene [class*="caf-"] { animation: none !important; transition: none !important; }
}
.beta-scene .caf-a-0, .beta-scene .caf-d-0, .beta-scene .caf-a-1, .beta-scene .caf-d-1, .beta-scene .caf-a-2, .beta-scene .caf-d-2, .beta-scene .caf-a-3, .beta-scene .caf-d-3, .beta-scene .caf-a-4, .beta-scene .caf-d-4, .beta-scene .caf-a-5, .beta-scene .caf-d-5 { opacity: 0; transition: opacity .45s ease; }
.beta-process-story[data-story-step="0"] .beta-scene .caf-x-0, .beta-process-story[data-story-step="1"] .beta-scene .caf-x-1, .beta-process-story[data-story-step="2"] .beta-scene .caf-x-2, .beta-process-story[data-story-step="3"] .beta-scene .caf-x-3, .beta-process-story[data-story-step="4"] .beta-scene .caf-x-4, .beta-process-story[data-story-step="5"] .beta-scene .caf-x-5 { opacity: 0; }
.beta-scene .caf-x-0, .beta-scene .caf-x-1, .beta-scene .caf-x-2, .beta-scene .caf-x-3, .beta-scene .caf-x-4, .beta-scene .caf-x-5 { transition: opacity .45s ease; }
.beta-process-story[data-story-step="0"] .beta-scene .caf-a-0, .beta-process-story[data-story-step="0"] .beta-scene .caf-d-0 { opacity: 1; }
.beta-process-story[data-story-step="1"] .beta-scene .caf-a-1, .beta-process-story[data-story-step="1"] .beta-scene .caf-d-0, .beta-process-story[data-story-step="1"] .beta-scene .caf-d-1 { opacity: 1; }
.beta-process-story[data-story-step="2"] .beta-scene .caf-a-2, .beta-process-story[data-story-step="2"] .beta-scene .caf-d-0, .beta-process-story[data-story-step="2"] .beta-scene .caf-d-1, .beta-process-story[data-story-step="2"] .beta-scene .caf-d-2 { opacity: 1; }
.beta-process-story[data-story-step="3"] .beta-scene .caf-a-3, .beta-process-story[data-story-step="3"] .beta-scene .caf-d-0, .beta-process-story[data-story-step="3"] .beta-scene .caf-d-1, .beta-process-story[data-story-step="3"] .beta-scene .caf-d-2, .beta-process-story[data-story-step="3"] .beta-scene .caf-d-3 { opacity: 1; }
.beta-process-story[data-story-step="4"] .beta-scene .caf-a-4, .beta-process-story[data-story-step="4"] .beta-scene .caf-d-0, .beta-process-story[data-story-step="4"] .beta-scene .caf-d-1, .beta-process-story[data-story-step="4"] .beta-scene .caf-d-2, .beta-process-story[data-story-step="4"] .beta-scene .caf-d-3, .beta-process-story[data-story-step="4"] .beta-scene .caf-d-4 { opacity: 1; }
.beta-process-story[data-story-step="5"] .beta-scene .caf-a-5, .beta-process-story[data-story-step="5"] .beta-scene .caf-d-0, .beta-process-story[data-story-step="5"] .beta-scene .caf-d-1, .beta-process-story[data-story-step="5"] .beta-scene .caf-d-2, .beta-process-story[data-story-step="5"] .beta-scene .caf-d-3, .beta-process-story[data-story-step="5"] .beta-scene .caf-d-4, .beta-process-story[data-story-step="5"] .beta-scene .caf-d-5 { opacity: 1; }
.beta-process-story[data-story-step="1"] .beta-scene .caf-r-1, .beta-process-story[data-story-step="2"] .beta-scene .caf-r-1, .beta-process-story[data-story-step="3"] .beta-scene .caf-r-1, .beta-process-story[data-story-step="4"] .beta-scene .caf-r-1, .beta-process-story[data-story-step="5"] .beta-scene .caf-r-1 { transform: scaleY(1); }
.beta-process-story[data-story-step="3"] .beta-scene .caf-r-3, .beta-process-story[data-story-step="4"] .beta-scene .caf-r-3, .beta-process-story[data-story-step="5"] .beta-scene .caf-r-3 { transform: scaleY(1); }
.beta-process-story[data-story-step="4"] .beta-scene .caf-r-4, .beta-process-story[data-story-step="5"] .beta-scene .caf-r-4 { transform: scaleY(1); }

/* ── scenes_decafeine ── */

/* ── Formes du décaféiné (scenes_decafeine.py) ── */
.beta-scene .dc-enceinte { fill: #1a2742; }
.beta-scene .dc-paroi2 { fill: none; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .dc-bride { fill: #aab5c9; }
.beta-scene .dc-bain { opacity: .5; transition: y .7s ease, height .7s ease, fill .6s ease; }
.beta-scene .dc-bulle { fill: none; stroke: #eef3fa; stroke-width: 1.5; opacity: 0; }
.beta-scene .actif .dc-bulles.on .dc-bulle { animation: dc-bulle 1.6s ease-in infinite; }
@keyframes dc-bulle { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-30px); } }
.beta-scene .dc-serpentin { fill: none; stroke: #ff9a64; stroke-width: 2.5; stroke-linejoin: round; opacity: .7; }
.beta-scene .actif .dc-serpentin { opacity: 1; }
.beta-scene .dc-boucle { fill: none; stroke: #6b5a3a; stroke-width: 7; }
.beta-scene .dc-depot-nom { fill: #fff; transition: opacity .5s ease; }
.beta-scene .dc-pastille { fill: #121b30; transition: opacity .5s ease; }
.beta-scene .dc-note { transition: opacity .5s ease; }
.beta-scene .dc-fin { text-anchor: end; }
.beta-scene .dc-rouge { fill: #ff8a8a; }
.beta-scene .dc-grille { stroke: #aab5c9; stroke-width: 3; stroke-dasharray: 4 3; }
.beta-scene .dc-chaud { fill: #ff9a64; transition: opacity .5s ease; }
.beta-scene .dc-rampe { stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; }
.beta-scene .dc-granule { fill: #2b3350; stroke: #7f8ca8; stroke-width: 1; }
.beta-scene .dc-capte { transition: opacity .5s ease; }
.beta-scene .dc-corps { fill: #1a2742; }
.beta-scene .dc-piston { fill: #aab5c9; }
.beta-scene .actif .dc-piston-g { animation: dc-piston 1.1s ease-in-out infinite alternate; }
@keyframes dc-piston { to { transform: translate(var(--dx, 0px), var(--dy, 0px)); } }
.beta-scene .dc-mano { fill: #121b30; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .dc-grad { stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .dc-critique { stroke: #ff6b67; stroke-width: 3; }
.beta-scene .dc-aiguille { stroke: var(--beta-lemon, #d9ef59); stroke-width: 3; stroke-linecap: round; transition: transform .8s ease; }
.beta-scene .dc-pivot { fill: var(--beta-lemon, #d9ef59); }
.beta-scene .dc-tige { stroke: #9ee3cd; stroke-width: 5; stroke-linecap: round; }
.beta-scene .dc-noeud { stroke: #121b30; stroke-width: 2; }
.beta-scene .dc-feuille { fill: none; stroke: #9ee3cd; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .dc-cellule { fill: #16233c; transition: fill .6s ease; }
.beta-scene .dc-cellule.brun { fill: #34392b; }
.beta-scene .dc-paroi { fill: none; stroke: #9ee3cd; stroke-width: 2.5; transition: stroke .6s ease; }
.beta-scene .dc-paroi.abime { stroke: #c8d1e2; stroke-dasharray: 10 5 3 6; }
.beta-scene .dc-lien { stroke: #eef2fb; stroke-width: 2; transition: opacity .5s ease; }
.beta-scene .dc-mol { transition: cx .7s ease, cy .7s ease, opacity .6s ease; }
.beta-scene .dc-eau { fill: #8bdcf3; transition: opacity .6s ease; }
.beta-scene .dc-tube { fill: #121b30; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .dc-remplir { opacity: .85; transition: y .7s ease, height .7s ease; }
.beta-scene .dc-arc { fill: none; stroke: #53617c; stroke-width: 10; stroke-linecap: round; }
.beta-scene .dc-arc-vif { fill: none; stroke: #ff6b67; stroke-width: 10; stroke-linecap: round; }
.beta-scene .dc-flamme { fill: #ff9a64; transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s ease; }
.beta-scene .actif .dc-flammes { animation: dc-vacille .45s ease-in-out infinite alternate; }
@keyframes dc-vacille { to { opacity: .72; } }
.beta-scene .dc-sac { fill: rgba(255,255,255,.05); stroke: #aab5c9; stroke-width: 3; transition: opacity .6s ease; }
.beta-scene .dc-pli { stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .dc-valve { fill: #121b30; stroke: var(--beta-lemon, #d9ef59); stroke-width: 2.5; transition: opacity .6s ease; }
.beta-scene .dc-sac.attente, .beta-scene .dc-valve.attente { opacity: .4; }
.beta-scene .dc-grainmobile { transition: fill .5s ease, cx .6s ease, cy .6s ease, rx .6s ease, ry .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .beta-scene .actif .dc-piston-g, .beta-scene .actif .dc-flammes, .beta-scene .actif .dc-bulles.on .dc-bulle { animation: none !important; }
  .beta-scene .dc-mol, .beta-scene .dc-aiguille, .beta-scene .dc-flamme, .beta-scene .dc-bain { transition: none; }
}

/* ── scenes_eau ── */

/* ── L'eau (scenes_eau.py) ── */
.beta-scene .eau-conduit { fill: none; stroke: #4e5c86; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .eau-conduit.fin { stroke-width: 5; }
.beta-scene .eau-ion { stroke: rgba(11,15,30,.45); stroke-width: 1; }
.beta-scene .eau-o { fill: #8bdcf3; }
.beta-scene .eau-h { fill: #f5f7f8; }
.beta-scene .eau-signe { fill: #0b0f1e; font: 800 11px 'Atkinson Hyperlegible Next',sans-serif; text-anchor: middle; }
.beta-scene .eau-num { fill: #0b0f1e; font: 800 11px 'Atkinson Hyperlegible Next',sans-serif; text-anchor: middle; }
.beta-scene .eau-e { text-anchor: end; }
.beta-scene .eau-t-cat { fill: #ffc46b; }
.beta-scene .eau-t-hco3 { fill: #c9a7ff; }
.beta-scene .eau-t-tartre { fill: #f5f7f8; }
.beta-scene .eau-t-rouille { fill: #ff9a64; }
.beta-scene .eau-sur-roche { fill: #eef2fb; }
.beta-scene .eau-eau { fill: #8bdcf3; opacity: .26; }
.beta-scene .eau-eau.dure { fill: #c9a7ff; opacity: .22; }
.beta-scene .eau-verre { fill: none; stroke: #aab5c9; stroke-width: 2.5; stroke-linejoin: round; }
.beta-scene .eau-corps { fill: rgba(32,44,72,.55); stroke: #aab5c9; stroke-width: 2.5; stroke-linejoin: round; }
.beta-scene .eau-couv, .beta-scene .eau-plateau { stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; }
.beta-scene .eau-couvercle { fill: #53617c; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .eau-anse, .beta-scene .eau-soucoupe { fill: none; stroke: #aab5c9; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .eau-bec, .beta-scene .eau-bec-k { fill: none; stroke: #aab5c9; stroke-width: 4; stroke-linecap: round; }
.beta-scene .eau-goutte { stroke: #8bdcf3; stroke-width: 2; stroke-linecap: round; }
.beta-scene .eau-terre { fill: #6f4128; }
.beta-scene .eau-roche { fill: #6b7387; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .eau-joint { stroke: #3b4560; stroke-width: 1.5; }
.beta-scene .eau-fissure { fill: none; stroke: #1a2742; stroke-width: 4; stroke-linejoin: round; }
.beta-scene .eau-cone { fill: #1a2742; stroke: #aab5c9; stroke-width: 2.5; stroke-linejoin: round; }
.beta-scene .eau-papier { fill: none; stroke: #f5f7f8; stroke-width: 1.5; opacity: .55; }
.beta-scene .eau-mouture { fill: #8a5232; transition: fill .6s ease; }
.beta-scene .actif .eau-mouture { fill: #6f4128; }
.beta-scene .eau-tasse { fill: rgba(26,39,66,.4); stroke: #aab5c9; stroke-width: 2.5; stroke-linejoin: round; }
.beta-scene .eau-cafe { fill: #8a5232; }
.beta-scene .eau-lentille { fill: rgba(139,220,243,.05); stroke: #53617c; stroke-width: 2; stroke-dasharray: 6 5; }
.beta-scene .eau-cristal { stroke: rgba(11,15,30,.4); stroke-width: 1; }
.beta-scene .eau-particule { fill: #8a5232; stroke: #c0814f; stroke-width: 1.5; }
.beta-scene .eau-pore { fill: #4a2c1c; }
.beta-scene .eau-acide { fill: none; stroke: #ffb45d; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.beta-scene .eau-resist { fill: none; stroke: #ff9a64; stroke-width: 3; stroke-linejoin: round; }
.beta-scene .actif .eau-resist { stroke: #ff6b67; }
.beta-scene .eau-tartre-trait { fill: none; stroke: #f5f7f8; stroke-width: 6; stroke-linejoin: round; opacity: .85; }
.beta-scene .eau-tartre-fond { fill: #f5f7f8; opacity: .85; }
.beta-scene .eau-rouille { fill: #ff9a64; stroke: #6f4128; stroke-width: 1.5; }
.beta-scene .eau-carter { fill: #1a2742; stroke: #53617c; stroke-width: 2; }
.beta-scene .eau-pale { fill: #53617c; }
.beta-scene .eau-serpentin { fill: none; stroke: #aab5c9; stroke-width: 3; stroke-linejoin: round; }
.beta-scene .eau-cartouche, .beta-scene .eau-capsule { fill: rgba(32,44,72,.7); stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .eau-bille { fill: #f0dda4; opacity: .7; }
.beta-scene .eau-canal-dur { fill: #9aa3b5; opacity: .38; }
.beta-scene .eau-canal-pur { fill: #8bdcf3; opacity: .32; }
.beta-scene .eau-membrane { stroke: #d9ef59; stroke-width: 2.5; stroke-dasharray: 4 4; }
.beta-scene .eau-pot { stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .eau-pot-0 { fill: #f5f7f8; opacity: .85; }
.beta-scene .eau-pot-1 { fill: #e3e7ef; opacity: .65; }
.beta-scene .eau-pot-2 { fill: #c6e8f3; opacity: .5; }
.beta-scene .eau-pot-3 { fill: #f5f7f8; opacity: .95; }
.beta-scene .eau-pot-4 { fill: #f0dda4; opacity: .8; }
.beta-scene .eau-balance { fill: #202c48; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .eau-nacelle { fill: #53617c; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .eau-ecran { fill: #0b0f1e; stroke: #53617c; stroke-width: 1.5; }
.beta-scene .eau-ecran-t { fill: #d9ef59; font: 700 11px 'IBM Plex Mono',monospace; }
.beta-scene .eau-flacon { fill: none; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .eau-sonde { fill: #53617c; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .eau-electrode { stroke: #d9ef59; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .eau-thermo { fill: none; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .eau-thermo-bulbe { fill: #ff6b67; }
.beta-scene .eau-grad { stroke: #aab5c9; stroke-width: 2; }
.beta-scene .eau-poire { fill: #53617c; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .eau-pipette { fill: rgba(245,247,248,.25); stroke: #aab5c9; stroke-width: 1.2; }
.beta-scene .eau-tube-liq { fill: var(--eau-tube, #8bdcf3); opacity: .8; }
.beta-scene .eau-appareil { fill: #202c48; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .eau-puits { fill: #0b0f1e; stroke: #53617c; stroke-width: 1.5; }
.beta-scene .eau-led { fill: #d9ef59; }
.beta-scene .eau-vanne { fill: #1a2742; stroke: #d9ef59; stroke-width: 2.5; }
.beta-scene .eau-vanne-l { stroke: #d9ef59; stroke-width: 3; stroke-linecap: round; }
.beta-scene .eau-groupe { fill: #53617c; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .eau-porte { fill: #202c48; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .eau-galette { fill: #6f4128; }
.beta-scene .eau-manche { stroke: #aab5c9; stroke-width: 7; stroke-linecap: round; }
.beta-scene .eau-niv { fill: #8bdcf3; opacity: .3; transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.6s ease; }
.beta-scene .eau-niv-bocal { transform: scaleY(var(--eau-bocal, 0)); }
.beta-scene .eau-niv-flacon { fill: #f0dda4; opacity: .45; transform: scaleY(var(--eau-flacon, 0)); }
/* Les niveaux qui montent pendant l'étape : la tasse, la bouilloire, les bouteilles. */
.beta-scene .eau-monte { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 2.2s ease-out; }
.beta-scene .eau-niv-tasse { fill: #8a5232; transform: scaleY(var(--eau-tasse, 1)); }
.beta-scene .eau-niv-bouil { transform: scaleY(var(--eau-bouil, 1)); }
.beta-scene .eau-niv-douce { transform: scaleY(var(--eau-douce, 1)); }
.beta-scene .eau-niv-pure { transform: scaleY(var(--eau-pure, .7)); }
.beta-scene .eau-niv-distil { transform: scaleY(.85); }
.beta-scene .eau-teinte { fill: #f0dda4; opacity: .35; }
.beta-scene .eau-t-na { fill: #ff8a8a; }
.beta-scene .eau-t-mg { fill: #7ee0a8; }
.beta-scene .eau-mini { text-anchor: middle; }
.beta-scene .eau-separe { stroke: #53617c; stroke-width: 1.5; stroke-dasharray: 4 4; }
.beta-scene .eau-cerclage { stroke: #aab5c9; stroke-width: 1.2; opacity: .6; }
.beta-scene .eau-bulle { fill: none; stroke: #f5f7f8; stroke-width: 1.2; opacity: .8; }
.beta-scene .eau-verre.fin { stroke-width: 1.6; }
.beta-scene .eau-litre { fill: #9aa3b5; opacity: .85; }
.beta-scene .eau-litre.peut { opacity: .4; }
.beta-scene .eau-grille { fill: #0b0f1e; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .eau-grille-b { stroke: #aab5c9; stroke-width: 1.2; }
.beta-scene .eau-tas-sel { fill: #f0dda4; opacity: .9; }
.beta-scene .eau-tas { transform-box: fill-box; transform-origin: 50% 100%; }
.beta-scene .eau-baguette { stroke: #f5f7f8; stroke-width: 3; stroke-linecap: round; opacity: .85; }
.beta-scene .eau-thermo-froid { fill: #8bdcf3; }
.beta-scene .eau-frigo { fill: rgba(139,220,243,.05); stroke: #8bdcf3; stroke-width: 1.5; stroke-dasharray: 5 4; }
.beta-scene .eau-frigo-poignee { stroke: #8bdcf3; stroke-width: 3; stroke-linecap: round; }
.beta-scene .eau-secoue { transform-box: fill-box; transform-origin: 50% 50%; }
.beta-scene .eau-potg { transform-box: fill-box; transform-origin: 50% 100%; }
.beta-scene .eau-trame-0, .beta-scene .eau-trame-1 { opacity: 0; }
.beta-scene .eau-chute { fill: #f5f7f8; opacity: 0; transform-box: view-box; }
.beta-scene .eau-chute-eau { fill: #8bdcf3; }
.beta-scene .eau-pipette-eau { fill: rgba(139,220,243,.55); }
.beta-scene .eau-tube-reactif { fill: #ff9a64; opacity: .8; }
.beta-scene .eau-marque { stroke: #d9ef59; stroke-width: 3; stroke-linecap: round; }
.beta-scene .eau-tirets { opacity: 0; }
.beta-scene .eau-cuvette { fill: #e6cf6e; opacity: .45; }
.beta-scene .eau-robinet { fill: #53617c; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .eau-sonde-l { stroke: #aab5c9; stroke-width: 2; }
.beta-scene .eau-mesure-liq { fill: #7ee0a8; opacity: .85; }
.beta-scene .eau-cafe-plat { fill: #b08a6a; }
.beta-scene .eau-croit, .beta-scene .eau-rouille { transform-box: fill-box; }
.beta-scene .eau-rouille { transform-origin: 50% 50%; }
/* Ce qui bouge quand le poste est actif. */
.beta-scene .actif .eau-pluie { animation: eau-pluie 0.9s linear infinite; }
.beta-scene .actif .eau-coquille { animation: eau-tourne 9s linear infinite; }
.beta-scene .actif .eau-pales { animation: eau-tourne .7s linear infinite; }
.beta-scene .actif .eau-flotte { animation: eau-flotte 1.6s ease-in-out infinite alternate; }
.beta-scene .actif .eau-flotte2 { animation: eau-flotte 1.9s ease-in-out infinite alternate-reverse; }
.beta-scene .actif .eau-bulle { animation: eau-bulle 1.1s ease-in infinite; }
@keyframes eau-pluie { from { transform: translateY(-4px); opacity: .4; } to { transform: translateY(4px); opacity: 1; } }
@keyframes eau-tourne { to { transform: rotate(360deg); } }
@keyframes eau-flotte { to { transform: translateY(-3px); } }
@keyframes eau-bulle { from { transform: translateY(4px); opacity: 0; } 30% { opacity: .9; } to { transform: translateY(-8px); opacity: 0; } }
@keyframes eau-croit { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes eau-depose { from { opacity: 0; } to { opacity: .85; } }
@keyframes eau-gonfle { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes eau-remplir { 0% { transform: scaleY(.08); } 80%, 100% { transform: scaleY(.85); } }
@keyframes eau-carafe { 0% { transform: scaleY(.2); } 80%, 100% { transform: scaleY(1); } }
@keyframes eau-pot { 0%, 16% { transform: translateY(-7px); } 20%, 100% { transform: translateY(0); } }
@keyframes eau-tas { 0% { transform: scaleY(.1); } 90%, 100% { transform: scaleY(1); } }
@keyframes eau-remue { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes eau-secoue { 0%, 45%, 100% { transform: rotate(0); } 8% { transform: rotate(-16deg); } 16% { transform: rotate(16deg); } 24% { transform: rotate(-14deg); } 32% { transform: rotate(14deg); } 40% { transform: rotate(-6deg); } }
@keyframes eau-trame { 0%, 30% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
@keyframes eau-chute1 { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(var(--chute)); opacity: 1; } 71%, 100% { transform: translateY(var(--chute)); opacity: 0; } }
@keyframes eau-tirets { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eau-lit { 0%, 99% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .beta-scene [class*="eau-"] { animation: none !important; transition: none !important; }
}
.beta-scene .eau-a-0, .beta-scene .eau-d-0, .beta-scene .eau-a-1, .beta-scene .eau-d-1, .beta-scene .eau-a-2, .beta-scene .eau-d-2, .beta-scene .eau-a-3, .beta-scene .eau-d-3, .beta-scene .eau-a-4, .beta-scene .eau-d-4, .beta-scene .eau-a-5, .beta-scene .eau-d-5 { opacity: 0; }
.beta-scene .eau-a-0, .beta-scene .eau-a-1, .beta-scene .eau-a-2, .beta-scene .eau-a-3, .beta-scene .eau-a-4, .beta-scene .eau-a-5, .beta-scene .eau-d-0, .beta-scene .eau-d-1, .beta-scene .eau-d-2, .beta-scene .eau-d-3, .beta-scene .eau-d-4, .beta-scene .eau-d-5, .beta-scene .eau-j-0, .beta-scene .eau-j-1, .beta-scene .eau-j-2, .beta-scene .eau-j-3, .beta-scene .eau-j-4, .beta-scene .eau-j-5, .beta-scene .eau-x-0, .beta-scene .eau-x-1, .beta-scene .eau-x-2, .beta-scene .eau-x-3, .beta-scene .eau-x-4, .beta-scene .eau-x-5, .beta-scene .eau-o-0, .beta-scene .eau-o-1, .beta-scene .eau-o-2, .beta-scene .eau-o-3, .beta-scene .eau-o-4, .beta-scene .eau-o-5 { transition: opacity .45s ease; }
.beta-process-story[data-story-step="0"] .beta-scene .eau-a-0, .beta-process-story[data-story-step="0"] .beta-scene .eau-d-0 { opacity: 1; }
.beta-process-story[data-story-step="0"] .beta-scene .eau-x-0 { opacity: 0; }
.beta-process-story[data-story-step="0"] .beta-scene .eau-o-0 { opacity: .2; }
.beta-process-story[data-story-step="1"] .beta-scene .eau-a-1, .beta-process-story[data-story-step="1"] .beta-scene .eau-d-0, .beta-process-story[data-story-step="1"] .beta-scene .eau-d-1 { opacity: 1; }
.beta-process-story[data-story-step="1"] .beta-scene .eau-x-1, .beta-process-story[data-story-step="1"] .beta-scene .eau-j-0 { opacity: 0; }
.beta-process-story[data-story-step="1"] .beta-scene .eau-o-1 { opacity: .2; }
.beta-process-story[data-story-step="2"] .beta-scene .eau-a-2, .beta-process-story[data-story-step="2"] .beta-scene .eau-d-0, .beta-process-story[data-story-step="2"] .beta-scene .eau-d-1, .beta-process-story[data-story-step="2"] .beta-scene .eau-d-2 { opacity: 1; }
.beta-process-story[data-story-step="2"] .beta-scene .eau-x-2, .beta-process-story[data-story-step="2"] .beta-scene .eau-j-0, .beta-process-story[data-story-step="2"] .beta-scene .eau-j-1 { opacity: 0; }
.beta-process-story[data-story-step="2"] .beta-scene .eau-o-2 { opacity: .2; }
.beta-process-story[data-story-step="3"] .beta-scene .eau-a-3, .beta-process-story[data-story-step="3"] .beta-scene .eau-d-0, .beta-process-story[data-story-step="3"] .beta-scene .eau-d-1, .beta-process-story[data-story-step="3"] .beta-scene .eau-d-2, .beta-process-story[data-story-step="3"] .beta-scene .eau-d-3 { opacity: 1; }
.beta-process-story[data-story-step="3"] .beta-scene .eau-x-3, .beta-process-story[data-story-step="3"] .beta-scene .eau-j-0, .beta-process-story[data-story-step="3"] .beta-scene .eau-j-1, .beta-process-story[data-story-step="3"] .beta-scene .eau-j-2 { opacity: 0; }
.beta-process-story[data-story-step="3"] .beta-scene .eau-o-3 { opacity: .2; }
.beta-process-story[data-story-step="4"] .beta-scene .eau-a-4, .beta-process-story[data-story-step="4"] .beta-scene .eau-d-0, .beta-process-story[data-story-step="4"] .beta-scene .eau-d-1, .beta-process-story[data-story-step="4"] .beta-scene .eau-d-2, .beta-process-story[data-story-step="4"] .beta-scene .eau-d-3, .beta-process-story[data-story-step="4"] .beta-scene .eau-d-4 { opacity: 1; }
.beta-process-story[data-story-step="4"] .beta-scene .eau-x-4, .beta-process-story[data-story-step="4"] .beta-scene .eau-j-0, .beta-process-story[data-story-step="4"] .beta-scene .eau-j-1, .beta-process-story[data-story-step="4"] .beta-scene .eau-j-2, .beta-process-story[data-story-step="4"] .beta-scene .eau-j-3 { opacity: 0; }
.beta-process-story[data-story-step="4"] .beta-scene .eau-o-4 { opacity: .2; }
.beta-process-story[data-story-step="5"] .beta-scene .eau-a-5, .beta-process-story[data-story-step="5"] .beta-scene .eau-d-0, .beta-process-story[data-story-step="5"] .beta-scene .eau-d-1, .beta-process-story[data-story-step="5"] .beta-scene .eau-d-2, .beta-process-story[data-story-step="5"] .beta-scene .eau-d-3, .beta-process-story[data-story-step="5"] .beta-scene .eau-d-4, .beta-process-story[data-story-step="5"] .beta-scene .eau-d-5 { opacity: 1; }
.beta-process-story[data-story-step="5"] .beta-scene .eau-x-5, .beta-process-story[data-story-step="5"] .beta-scene .eau-j-0, .beta-process-story[data-story-step="5"] .beta-scene .eau-j-1, .beta-process-story[data-story-step="5"] .beta-scene .eau-j-2, .beta-process-story[data-story-step="5"] .beta-scene .eau-j-3, .beta-process-story[data-story-step="5"] .beta-scene .eau-j-4 { opacity: 0; }
.beta-process-story[data-story-step="5"] .beta-scene .eau-o-5 { opacity: .2; }
.beta-process-story[data-story-kind="scene:eau-ions"][data-story-step="0"] .beta-scene { --eau-tasse: 0; }
.beta-process-story[data-story-kind="scene:eau-ions"][data-story-step="1"] .beta-scene { --eau-tasse: 0; }
.beta-process-story[data-story-kind="scene:eau-ions"][data-story-step="2"] .beta-scene { --eau-tasse: 0.55; }
.beta-process-story[data-story-kind="scene:eau-ions"][data-story-step="3"] .beta-scene { --eau-tasse: 1; }
.beta-process-story[data-story-kind="scene:eau-deux"][data-story-step="0"] .beta-scene { --eau-tasse: 0; --eau-bouil: 0; }
.beta-process-story[data-story-kind="scene:eau-deux"][data-story-step="1"] .beta-scene { --eau-tasse: 0.55; --eau-bouil: 0; }
.beta-process-story[data-story-kind="scene:eau-deux"][data-story-step="2"] .beta-scene { --eau-tasse: 1; --eau-bouil: 0; }
.beta-process-story[data-story-kind="scene:eau-deux"][data-story-step="3"] .beta-scene { --eau-tasse: 1; --eau-bouil: 1; }
.beta-process-story[data-story-kind="scene:eau-pure"][data-story-step="0"] .beta-scene { --eau-douce: 0; }
.beta-process-story[data-story-kind="scene:eau-pure"][data-story-step="1"] .beta-scene { --eau-douce: 0; }
.beta-process-story[data-story-kind="scene:eau-pure"][data-story-step="2"] .beta-scene { --eau-douce: 0.45; }
.beta-process-story[data-story-kind="scene:eau-pure"][data-story-step="3"] .beta-scene { --eau-douce: 1; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="0"] .beta-scene { --eau-tube: #8bdcf3; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="1"] .beta-scene { --eau-tube: #e6cf6e; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="2"] .beta-scene { --eau-tube: #7ee0a8; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="3"] .beta-scene { --eau-tube: #7ee0a8; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="4"] .beta-scene { --eau-tube: #8bdcf3; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="0"] .beta-scene { --eau-bocal: 0; --eau-flacon: 0; --eau-pure: 0.7; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="1"] .beta-scene { --eau-bocal: 0.8; --eau-flacon: 0; --eau-pure: 0.7; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="2"] .beta-scene { --eau-bocal: 0.8; --eau-flacon: 0; --eau-pure: 0.7; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="3"] .beta-scene { --eau-bocal: 0.12; --eau-flacon: 0.8; --eau-pure: 0.7; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="4"] .beta-scene { --eau-bocal: 0.12; --eau-flacon: 0.62; --eau-pure: 0.8; }
@keyframes eau-chute5 { 0.00% { transform: translateY(0); opacity: 1; } 11.67% { transform: translateY(var(--chute)); opacity: 1; } 11.81% { transform: translateY(0); opacity: 0; } 16.67% { transform: translateY(0); opacity: 1; } 28.33% { transform: translateY(var(--chute)); opacity: 1; } 28.47% { transform: translateY(0); opacity: 0; } 33.33% { transform: translateY(0); opacity: 1; } 45.00% { transform: translateY(var(--chute)); opacity: 1; } 45.14% { transform: translateY(0); opacity: 0; } 50.00% { transform: translateY(0); opacity: 1; } 61.67% { transform: translateY(var(--chute)); opacity: 1; } 61.81% { transform: translateY(0); opacity: 0; } 66.67% { transform: translateY(0); opacity: 1; } 78.33% { transform: translateY(var(--chute)); opacity: 1; } 78.47% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes eau-marque-0 { 0%, 11.53% { opacity: 0; } 11.67%, 100% { opacity: 1; } }
@keyframes eau-marque-1 { 0%, 28.19% { opacity: 0; } 28.33%, 100% { opacity: 1; } }
@keyframes eau-marque-2 { 0%, 44.86% { opacity: 0; } 45.00%, 100% { opacity: 1; } }
@keyframes eau-marque-3 { 0%, 61.53% { opacity: 0; } 61.67%, 100% { opacity: 1; } }
@keyframes eau-marque-4 { 0%, 78.19% { opacity: 0; } 78.33%, 100% { opacity: 1; } }
@keyframes eau-alc { 0%, 61.53% { fill: #8bdcf3; } 61.67%, 78.19% { fill: #7ee0a8; } 78.33%, 100% { fill: #e6cf6e; } }
@keyframes eau-dur { 0%, 78.19% { fill: #ff9a64; } 78.33%, 100% { fill: #7ee0a8; } }
.beta-process-story[data-story-kind="scene:eau-deux"][data-story-step="3"] .beta-scene .eau-croit { animation: eau-croit 3.5s ease-out both; }
.beta-process-story[data-story-kind="scene:eau-deux"][data-story-step="3"] .beta-scene .eau-depose { animation: eau-depose 3.5s ease-out both; }
.beta-process-story[data-story-kind="scene:eau-machines"][data-story-step="0"] .beta-scene .eau-croit { animation: eau-croit 4s ease-out both; }
.beta-process-story[data-story-kind="scene:eau-machines"][data-story-step="0"] .beta-scene .eau-depose { animation: eau-depose 4s ease-out both; }
.beta-process-story[data-story-kind="scene:eau-machines"][data-story-step="1"] .beta-scene .eau-rouille { animation: eau-gonfle 2.5s ease-out both; }
.beta-process-story[data-story-kind="scene:eau-pure"][data-story-step="0"] .beta-scene .eau-niv-distil { animation: eau-remplir 6s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:eau-pure"][data-story-step="1"] .beta-scene .eau-niv-carafe { animation: eau-carafe 6s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="0"] .beta-scene .eau-tas { animation: eau-tas 6s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="3"] .beta-scene .eau-remue { animation: eau-remue .6s ease-in-out infinite alternate; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="4"] .beta-scene .eau-secoue { animation: eau-secoue 3s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="1"] .beta-scene .eau-tube-liq { animation: eau-alc 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="2"] .beta-scene .eau-tube-liq { animation: eau-dur 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="3"] .beta-scene .eau-chute1 { animation: eau-chute1 1.4s ease-in infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="4"] .beta-scene .eau-tirets { animation: eau-tirets 1.6s linear both; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="4"] .beta-scene .eau-valeur { animation: eau-lit 1.6s linear both; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="0"] .beta-scene .eau-potg-0 { animation: eau-pot 6s ease-in-out 0.0s infinite; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="0"] .beta-scene .eau-potg-1 { animation: eau-pot 6s ease-in-out 1.2s infinite; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="0"] .beta-scene .eau-potg-2 { animation: eau-pot 6s ease-in-out 2.4s infinite; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="0"] .beta-scene .eau-potg-3 { animation: eau-pot 6s ease-in-out 3.6s infinite; }
.beta-process-story[data-story-kind="scene:eau-concentre"][data-story-step="0"] .beta-scene .eau-potg-4 { animation: eau-pot 6s ease-in-out 4.8s infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="0"] .beta-scene .eau-trame-0 { animation: eau-trame 6s linear 0s infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="0"] .beta-scene .eau-trame-1 { animation: eau-trame 6s linear -4s infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="0"] .beta-scene .eau-trame-2 { animation: eau-trame 6s linear -2s infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="1"] .beta-scene .eau-chute5 { animation: eau-chute5 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="2"] .beta-scene .eau-chute5 { animation: eau-chute5 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="1"] .beta-scene .eau-marque-0 { animation: eau-marque-0 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="1"] .beta-scene .eau-marque-1 { animation: eau-marque-1 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="1"] .beta-scene .eau-marque-2 { animation: eau-marque-2 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="1"] .beta-scene .eau-marque-3 { animation: eau-marque-3 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="1"] .beta-scene .eau-marque-4 { animation: eau-marque-4 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="2"] .beta-scene .eau-marque-0 { animation: eau-marque-0 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="2"] .beta-scene .eau-marque-1 { animation: eau-marque-1 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="2"] .beta-scene .eau-marque-2 { animation: eau-marque-2 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="2"] .beta-scene .eau-marque-3 { animation: eau-marque-3 7.2s linear infinite; }
.beta-process-story[data-story-kind="scene:eau-mesure"][data-story-step="2"] .beta-scene .eau-marque-4 { animation: eau-marque-4 7.2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .beta-scene [class*="eau-"] { animation: none !important; transition: none !important; }
}

/* ── scenes_economie ── */

/* ── Formes de la famille économie, déchets, falsification, contenant (scenes_economie.py) ── */
/* Les états par temps : eco-des<k> paraît à l'état k, eco-jusq<k> s'en va à l'état k,
   eco-a<k> ne se voit qu'à l'état k, eco-pas<k> se cache à l'état k seulement. */
.beta-scene .eco-des1, .beta-scene .eco-des2, .beta-scene .eco-des3, .beta-scene .eco-des4,
.beta-scene .eco-a0, .beta-scene .eco-a1, .beta-scene .eco-a2, .beta-scene .eco-a3, .beta-scene .eco-a4 { opacity: 0; transition: opacity .6s ease; }
.beta-scene .eco-ge1 .eco-des1, .beta-scene .eco-ge2 .eco-des2, .beta-scene .eco-ge3 .eco-des3, .beta-scene .eco-ge4 .eco-des4 { opacity: 1; }
.beta-scene [data-eco-etat="0"] .eco-a0, .beta-scene [data-eco-etat="1"] .eco-a1, .beta-scene [data-eco-etat="2"] .eco-a2,
.beta-scene [data-eco-etat="3"] .eco-a3, .beta-scene [data-eco-etat="4"] .eco-a4 { opacity: 1; }
.beta-scene .eco-jusq1, .beta-scene .eco-jusq2, .beta-scene .eco-jusq3, .beta-scene .eco-jusq4, .beta-scene .eco-pas3 { transition: opacity .6s ease; }
.beta-scene .eco-ge1 .eco-jusq1, .beta-scene .eco-ge2 .eco-jusq2, .beta-scene .eco-ge3 .eco-jusq3, .beta-scene .eco-ge4 .eco-jusq4,
.beta-scene [data-eco-etat="3"] .eco-pas3 { opacity: 0; }
.beta-scene text.eco-fin { text-anchor: end; }
.beta-scene text.eco-centre { text-anchor: middle; }
.beta-scene text.eco-gras { font-weight: 700; fill: #dfe5f2; }
.beta-scene text.eco-clair { fill: #eef2fb; }
.beta-scene text.eco-sombre { fill: #121b30; font-weight: 700; }
.beta-scene text.eco-sombre2 { fill: #c8d1e2; font-weight: 700; }
.beta-scene text.eco-alerte { fill: #ff9a8f; }
.beta-scene text.eco-orange { fill: #ff9a64; }
.beta-scene text.eco-jaune { fill: #d9ef59; }
.beta-scene text.eco-lcdtxt { fill: #d9ef59; font-size: 13px; }
.beta-scene text.eco-valeur { font-size: 14px; fill: #d9ef59; }

/* Sacs, pièces, caisse. */
.beta-scene .eco-toile { fill: #d8bd7a; stroke: #f0dda4; stroke-width: 1.2; }
.beta-scene .eco-lien { fill: none; stroke: #f0dda4; stroke-width: 1.4; }
.beta-scene .eco-sacg { opacity: 0; transition: opacity .35s ease; }
.beta-scene .eco-piece-out { stroke: #121b30; stroke-width: 1.2; }
.beta-scene .eco-m-dollar .eco-piece-out { fill: #a6d65a; }
.beta-scene .eco-m-real .eco-piece-out { fill: #b07cff; }
.beta-scene .eco-m-euro .eco-piece-out { fill: #ffc46b; }
.beta-scene .eco-piece-in { fill: none; stroke: #121b30; stroke-width: 1; opacity: .5; }
.beta-scene .eco-pile { transition: opacity .4s ease; }
.beta-scene .eco-tiroir { fill: rgba(255,255,255,.03); stroke: #aab5c9; stroke-width: 2; }
.beta-scene .eco-tiroir-niv { opacity: .7; transform-box: fill-box; transform-origin: left center; transition: transform 1s ease; transform: scaleX(0); }
.beta-scene rect.eco-m-euro { fill: #ffc46b; }
.beta-scene rect.eco-m-dollar { fill: #a6d65a; }
.beta-scene rect.eco-m-real { fill: #b07cff; }
.beta-scene .eco-hachure { opacity: 0; transition: opacity .6s ease; }
.beta-scene .eco-hachure line { stroke: #aab5c9; stroke-width: 1.4; opacity: .7; }
.beta-scene text.eco-tiroir-txt { fill: #eef2fb; }
.beta-scene .eco-grille2 { stroke: #121b30; stroke-width: 1; opacity: .6; }

/* Dessins des maillons. */
.beta-scene .eco-sol { stroke: #6f7c98; stroke-width: 2; }
.beta-scene .eco-tronc { fill: none; stroke: #9ee3cd; stroke-width: 3; stroke-linecap: round; }
.beta-scene .eco-feuille { fill: #7ee0a8; opacity: .78; transition: fill .9s ease, opacity .9s ease; }
.beta-scene .eco-cerise { fill: #d9434d; transition: opacity .9s ease; }
.beta-scene .eco-gele .eco-feuille { fill: #dfe6f0; opacity: .42; }
.beta-scene .eco-gele .eco-cerise { opacity: 0; }
.beta-scene .eco-givre { opacity: 0; transition: opacity .9s ease; }
.beta-scene .eco-gele .eco-givre { opacity: 1; }
.beta-scene .eco-cristal { fill: none; stroke: #eef2fb; stroke-width: 1.3; stroke-linecap: round; }
.beta-scene .eco-engrais { fill: #26324f; stroke: #a6d65a; stroke-width: 2; }
.beta-scene .eco-vague { fill: none; stroke: #8bdcf3; stroke-width: 2; }
.beta-scene .actif .eco-vague { animation: eco-vague 1.6s linear infinite; }
.beta-scene .eco-coque { fill: #26324f; stroke: #aab5c9; stroke-width: 2.5; stroke-linejoin: round; }
.beta-scene .eco-mat { fill: none; stroke: #aab5c9; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .eco-tremie { fill: #f3b9ad; opacity: .8; }
.beta-scene .eco-tambour { fill: #1a2742; stroke: #d9ef59; stroke-width: 3; }
.beta-scene .eco-ailettes line { stroke: #d9ef59; stroke-width: 2.2; }
.beta-scene .eco-ailettes { transform-box: fill-box; transform-origin: center; }
.beta-scene .actif .eco-ailettes { animation: beta-scene-tourne 2.4s linear infinite; }
.beta-scene .eco-plaque { fill: none; stroke: #aab5c9; stroke-width: 6; stroke-linecap: round; }
.beta-scene .eco-flamme { fill: #ff9a64; opacity: .3; transform-box: fill-box; transform-origin: center bottom; transition: opacity .6s ease; }
.beta-scene .actif .eco-flamme { opacity: .95; animation: eco-flamme .45s ease-in-out infinite alternate; }
.beta-scene .eco-bac-refr { fill: rgba(255,255,255,.05); stroke: #aab5c9; stroke-width: 2; }
.beta-scene .eco-grain-torr { fill: #7a5a52; stroke: #c8d1e2; stroke-width: .8; }
.beta-scene .eco-etagere { stroke: #6f7c98; stroke-width: 2; }
.beta-scene .eco-sachet { fill: #26324f; stroke: #d9ef59; stroke-width: 1.6; stroke-linejoin: round; }
.beta-scene .eco-sachet-trait { stroke: #d9ef59; stroke-width: 1.2; }
.beta-scene .eco-comptoir { fill: none; stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; }
.beta-scene .eco-porcelaine { fill: #eef2fb; stroke: #aab5c9; stroke-width: 1; }
.beta-scene .eco-anse { fill: none; stroke: #eef2fb; stroke-width: 3; }
.beta-scene .eco-vapeur { fill: none; stroke: #c8d1e2; stroke-width: 1.5; stroke-linecap: round; opacity: .7; }
.beta-scene .eco-fleche { fill: none; stroke: #eef2fb; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* La bourse. */
.beta-scene .eco-ecran { fill: #0f1626; stroke: #59647a; stroke-width: 1.5; }
.beta-scene .eco-grille { stroke: #26324f; stroke-width: 1; }
.beta-scene .eco-cours { fill: none; stroke: #d9ef59; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.beta-scene .eco-cours.eco-trace { stroke-dasharray: 1; animation: eco-trace 1.8s ease forwards; }
.beta-scene .eco-cours-bout { fill: #d9ef59; }
text.eco-clair { fill: #eef2fb; }

/* La balance. */
.beta-scene .eco-pied { fill: none; stroke: #aab5c9; stroke-width: 4; stroke-linecap: round; }
.beta-scene .eco-pivot { fill: #d9ef59; }
.beta-scene .eco-barre { stroke: #d9ef59; stroke-width: 5; stroke-linecap: round; }
.beta-scene .eco-fleau { transition: transform 1.2s ease; }
.beta-scene .eco-fil { stroke: #aab5c9; stroke-width: 1.3; }
.beta-scene .eco-plateau { fill: rgba(255,255,255,.06); stroke: #eef2fb; stroke-width: 2.5; }
.beta-scene .eco-contrat { fill: #eef2fb; stroke: #aab5c9; stroke-width: 1; }
.beta-scene .eco-contrat-ligne { stroke: #59647a; stroke-width: 1.2; }
.beta-scene .actif .eco-oscille { animation: eco-oscille 2.6s ease-in-out .3s 1 both; }
.beta-scene [data-eco-etat="2"] text.eco-gauche { fill: #ff9a8f; }
.beta-scene [data-eco-etat="2"] text.eco-droite { fill: #a6d65a; }

/* L'entrepôt, le marché, le feu. */
.beta-scene .eco-hangar { fill: rgba(255,255,255,.04); stroke: #aab5c9; stroke-width: 2.5; stroke-linejoin: round; }
.beta-scene .eco-caisse-bois { fill: rgba(240,221,164,.1); stroke: #dfc686; stroke-width: 1.6; }
.beta-scene .eco-caisse-trait { stroke: #dfc686; stroke-width: 1; opacity: .7; }
.beta-scene .eco-panneau { fill: #26324f; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .eco-croix { opacity: 0; transition: opacity .6s ease; }
.beta-scene .eco-croix-trait { fill: none; stroke: #ff6b67; stroke-width: 3.5; stroke-linecap: round; transition: opacity .6s ease; }
.beta-scene .eco-conduite { fill: none; stroke: #4e5c86; stroke-width: 9; stroke-linecap: round; }
.beta-scene .eco-vanne { fill: #26324f; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .eco-porte { fill: #d9ef59; transform-box: fill-box; transform-origin: center top; transition: transform 1s ease; }
.beta-scene .eco-volant { fill: none; stroke: #d9ef59; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .eco-buche { fill: none; stroke: #c8d1e2; stroke-width: 5; stroke-linecap: round; }
.beta-scene .eco-eau { fill: #8bdcf3; opacity: .22; }
.beta-scene .eco-noye { opacity: 0; }

/* La jauge et le thermomètre. */
.beta-scene .eco-rail { stroke: #59647a; stroke-width: 6; stroke-linecap: round; }
.beta-scene .eco-cran { stroke: #aab5c9; stroke-width: 2; }
.beta-scene .eco-aiguille { fill: #d9ef59; }
.beta-scene .eco-aiguille-g { transition: transform 1.1s ease, opacity .5s ease; }
.beta-scene .eco-aiguille-g.eco-sans .eco-aiguille { opacity: 0; }
.beta-scene .eco-aiguille-g.eco-sans text { fill: #aab3c9; font-size: 12px; }
.beta-scene .eco-tube { fill: #1a2742; stroke: #aab5c9; stroke-width: 1.6; }
.beta-scene .eco-bulbe { fill: #ff6b67; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .eco-colonne { fill: #ff6b67; transform-box: fill-box; transition: transform 1.1s ease; }
.beta-scene .eco-col-v { transform-origin: center bottom; }
.beta-scene .eco-col-h { transform-origin: left center; }

/* La cerise, les bacs. */
.beta-scene .eco-peau { fill: #d9434d; }
.beta-scene .eco-pulpe { fill: #ff6b67; opacity: .9; }
.beta-scene .eco-mucilage { fill: #ff9a64; opacity: .85; }
.beta-scene .eco-parche { fill: #f0dda4; stroke: #dfc686; stroke-width: 1.5; }
.beta-scene .eco-pellicule-c { fill: #dfe6f0; }
.beta-scene .eco-graine { fill: #7ee0a8; transition: fill .9s ease; }
.beta-scene .eco-ge3 .eco-graine { fill: #7a5a52; }
.beta-scene rect.eco-graine { stroke: none; }
.beta-scene .eco-plat { fill: none; stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; }
.beta-scene .eco-lcd { fill: #0f1626; stroke: #d9ef59; stroke-width: 1.5; }
.beta-scene .eco-bac { fill: none; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .eco-bac-niv { stroke: none; opacity: .55; transform-box: fill-box; transform-origin: center bottom; transition: transform 1.2s ease .6s; transform: scaleY(0); }
.beta-scene .eco-bac0 { fill: #ff6b67; }
.beta-scene .eco-bac1 { fill: #dfe6f0; }
.beta-scene .eco-bac2 { fill: #8f98ab; }

/* Le moulin, le tas, le digesteur, le compost. */
.beta-scene .eco-mont { fill: #ff6b67; opacity: .7; transition: transform 1.2s ease; transform: scaleY(.05); }
.beta-scene .eco-chaud { opacity: 0; transition: opacity .8s ease; }
.beta-scene .eco-onde { fill: none; stroke: #ff9a64; stroke-width: 2; stroke-linecap: round; }
.beta-scene .actif .eco-onde { animation: eco-onde 1.4s ease-in-out infinite alternate; }
.beta-scene .eco-cuve-fermee { fill: rgba(255,255,255,.04); stroke: #aab5c9; stroke-width: 3; }
.beta-scene .eco-pulpe-niv { fill: #ff6b67; opacity: .35; }
.beta-scene .eco-bulle { fill: #ffb45d; opacity: 0; }
.beta-scene .actif .eco-bulle { animation: eco-bulle 1.8s linear infinite; }
.beta-scene .eco-claie { stroke: #aab5c9; stroke-width: 3; stroke-dasharray: 4 3; }
.beta-scene .eco-grain-parche { fill: #f0dda4; stroke: #dfc686; stroke-width: 1.5; }
.beta-scene .eco-bruleur { fill: #59647a; }
.beta-scene .eco-andain { fill: #ff6b67; opacity: .45; }
.beta-scene .eco-andain-trait { fill: none; stroke: #a6d65a; stroke-width: 1.4; opacity: .7; }
.beta-scene .eco-racine { fill: none; stroke: #a6d65a; stroke-width: 2; stroke-dasharray: 3 2; }

/* La détection. */
.beta-scene .eco-verre { fill: none; stroke: #c8d1e2; stroke-width: 2.5; stroke-linejoin: round; }
.beta-scene .eco-surface { stroke: #8bdcf3; stroke-width: 2; }
.beta-scene .eco-flotte { fill: #e8d2a6; transform-box: fill-box; }
.beta-scene .actif .eco-flotte { animation: eco-flotte 1.4s ease-in-out infinite alternate; }
.beta-scene .eco-traine { fill: none; stroke: #ff9a64; stroke-width: 3; stroke-linecap: round; opacity: .2; stroke-dasharray: 10 6; }
.beta-scene .actif .eco-traine { opacity: .75; animation: eco-traine 1.4s linear infinite; }
.beta-scene .eco-fond { fill: #ff9a64; }
.beta-scene .eco-statif { fill: none; stroke: #aab5c9; stroke-width: 6; stroke-linecap: round; }
.beta-scene .eco-optique { fill: #26324f; stroke: #d9ef59; stroke-width: 2; }
.beta-scene .eco-platine { stroke: #aab5c9; stroke-width: 4; stroke-linecap: round; }
.beta-scene .eco-lame { fill: #8bdcf3; opacity: .7; }
.beta-scene .eco-champ-vue { fill: #f3f5fa; stroke: #d9ef59; stroke-width: 3; }
.beta-scene .eco-spirale { fill: none; stroke: #ff6b67; stroke-width: 1.8; }
.beta-scene .eco-vaisseau { fill: none; stroke: #59647a; stroke-width: 1.2; }
.beta-scene .eco-amidon { fill: none; stroke: #6043e8; stroke-width: 1.5; }
.beta-scene .eco-hile { fill: #6043e8; }
.beta-scene .eco-renvoi { fill: none; stroke: #d9ef59; stroke-width: 1.2; stroke-dasharray: 3 3; }
.beta-scene .eco-appareil { fill: #26324f; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .eco-faisceau { fill: #d9ef59; opacity: .08; transition: opacity .5s ease; }
.beta-scene .actif .eco-faisceau { animation: eco-pulse .7s ease-in-out infinite alternate; }
.beta-scene .eco-coupelle { fill: none; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .eco-poudre { fill: #e8d2a6; }
.beta-scene .eco-spectre { fill: none; stroke: #8bdcf3; stroke-width: 2; stroke-linejoin: round; }
.beta-scene .eco-chromato { fill: none; stroke: #8bdcf3; stroke-width: 2; stroke-linejoin: round; }
.beta-scene .eco-pic { fill: none; stroke: #d9ef59; stroke-width: 3; stroke-linejoin: round; }
.beta-scene .eco-aimant { fill: #26324f; stroke: #aab5c9; stroke-width: 2; }

/* La tasse et la chaleur. */
.beta-scene .eco-chauffe { fill: #ff6b67; opacity: .75; transform: scaleX(0); transition: transform 1.6s ease .4s; }
/* Le café en tasse : orangé franc, jamais marron (la DA l'a refusé) ; il pâlit en
   refroidissant, vers le jaune d'or. */
.beta-scene .eco-liquide { fill: #ff8a5c; opacity: .95; transition: fill 1.6s ease .4s; }
.beta-scene .eco-t3.eco-ge2 .eco-liquide { fill: #ffc46b; }
.beta-scene [data-eco-etat="1"] .eco-tasse-liq, .beta-scene [data-eco-etat="4"] .eco-tasse-liq { fill: #ffc46b; }
.beta-scene [data-eco-etat="2"] .eco-tasse-liq, .beta-scene [data-eco-etat="3"] .eco-tasse-liq { fill: #ffa864; }
.beta-scene .eco-creme { stroke: #f0dda4; stroke-width: 3; }
.beta-scene .eco-bar-cafe { fill: #ff9a64; }
.beta-scene .eco-bar-tasse { fill: #eef2fb; }
.beta-scene .eco-bar-verre { fill: #8bdcf3; }
.beta-scene .eco-bar-inox { fill: #aab5c9; }
.beta-scene .eco-plage { opacity: .35; }
.beta-scene .eco-main { fill: rgba(255,154,100,.18); stroke: #ff9a64; stroke-width: 2; }
.beta-scene .eco-carton { fill: #f0dda4; stroke: #dfc686; stroke-width: 1; }
.beta-scene .eco-poly { fill: #f3f5fa; stroke: #c8d1e2; stroke-width: 1; stroke-dasharray: 2 2; }
.beta-scene .eco-axe { fill: none; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .eco-relie { stroke-width: 2.5; stroke-dasharray: 6 5; }
.beta-scene .eco-relie-l { stroke-width: 3; }
.beta-scene .eco-point { stroke: #121b30; stroke-width: 1.5; }
.beta-scene .eco-s0 { stroke: #ffb45d; fill: #ffb45d; }
.beta-scene .eco-s1 { stroke: #dfe6f0; fill: #dfe6f0; }
.beta-scene .eco-s2 { stroke: #9ee3cd; fill: #9ee3cd; }
.beta-scene circle.eco-point { stroke: #121b30; }

@keyframes eco-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes eco-vague { to { transform: translateX(-16px); } }
@keyframes eco-flamme { from { transform: scaleY(.8); } to { transform: scaleY(1.15); } }
@keyframes eco-oscille { 0% { transform: rotate(0deg); } 18% { transform: rotate(-7deg); } 40% { transform: rotate(5deg); } 62% { transform: rotate(-3deg); } 82% { transform: rotate(1deg); } 100% { transform: rotate(0deg); } }
@keyframes eco-onde { from { transform: translateY(0); opacity: .4; } to { transform: translateY(-6px); opacity: 1; } }
@keyframes eco-bulle { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-34px); opacity: 0; } }
@keyframes eco-flotte { from { transform: translateY(-1px); } to { transform: translateY(1.5px); } }
@keyframes eco-traine { to { stroke-dashoffset: -32; } }
@keyframes eco-pulse { from { opacity: .08; } to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .beta-scene [class*="eco-"] { animation: none !important; }
  .beta-scene .eco-sacg, .beta-scene .eco-pile { transition-delay: 0s !important; }
  .beta-scene .eco-aiguille-g, .beta-scene .eco-fleau, .beta-scene .eco-colonne, .beta-scene .eco-tiroir-niv,
  .beta-scene .eco-bac-niv, .beta-scene .eco-mont, .beta-scene .eco-chauffe, .beta-scene .eco-porte { transition: none !important; }
  .beta-scene .actif .eco-flamme { opacity: .95; }
  .beta-scene .actif .eco-traine { opacity: .75; }
  .beta-scene .actif .eco-faisceau { opacity: .25; }
}


/* ── scenes_fermentations ── */

.beta-scene .fermentations-couvercle { stroke: #aab5c9; stroke-width: 6; stroke-linecap: round; transform-box: fill-box; transform-origin: 0% 50%; transition: transform .8s ease; }
.beta-scene .fermentations-geste-fermer .fermentations-couvercle { animation: fermentations-ferme 2.6s ease-out both; }
.beta-scene .fermentations-geste-ouvrir .fermentations-couvercle { transform: rotate(-4deg); }
.beta-scene .fermentations-surface { stroke: rgba(255,255,255,.32); stroke-width: 1.5; stroke-dasharray: 4 5; }
.beta-scene .fermentations-raccord { fill: none; stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .fermentations-tubulure { fill: none; stroke: #4e5c86; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .fermentations-bocal { fill: #121b30; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .fermentations-bocal-eau { fill: #8bdcf3; opacity: .6; }
.beta-scene .actif .fermentations-bocal-eau { animation: fermentations-bulle 1.1s ease-in-out infinite; }
.beta-scene .fermentations-bocal-g { transform-box: view-box; }
.beta-scene .fermentations-geste-salves .fermentations-bocal-g { animation: fermentations-bouchon 4s ease-in-out infinite; }
.beta-scene .fermentations-geste-salves .fermentations-filet-injection,
.beta-scene .fermentations-geste-salves .fermentations-filet-bulles { animation: fermentations-salve 4s steps(1) infinite; }
.beta-scene .fermentations-pierre { fill: #c6cbd2; }
.beta-scene .fermentations-enceinte { fill: none; stroke: #ff9a64; stroke-width: 1.5; stroke-dasharray: 6 5; }
.beta-scene .fermentations-chaud { fill: #ff9a64; }
.beta-scene .fermentations-liquide { opacity: .2; transition: y .9s ease, height .9s ease, opacity .6s ease; }
.beta-scene .fermentations-eau { fill: #8bdcf3; }
.beta-scene .fermentations-jus { fill: #ff6b67; }
.beta-scene .fermentations-mout { fill: #ffb45d; opacity: .26; }
.beta-scene .fermentations-chaude { fill: #ff9a64; opacity: .32; }
.beta-scene .fermentations-milieu { fill: #d9ef59; opacity: 0; transition: fill .9s ease, opacity .9s ease; }
.beta-scene .fermentations-milieu.fermentations-neutre { fill: #9ee3cd; opacity: .08; }
.beta-scene .fermentations-milieu.fermentations-acidule { fill: #d9ef59; opacity: .16; }
.beta-scene .fermentations-milieu.fermentations-acide { fill: #f6e27a; opacity: .3; }
.beta-scene .fermentations-strate { fill: #f6e27a; transition: opacity .9s ease; }
.beta-scene .fermentations-liquide.fermentations-milieu { fill: #d9ef59; opacity: .22; }
.beta-scene .niveau.fermentations-gaz { opacity: .75; stroke: rgba(223,229,242,.55); stroke-width: 1.5; stroke-dasharray: 5 4; }
.beta-scene .poste:has(.fermentations-f-plateau) .niveau,
.beta-scene .poste:has(.fermentations-f-cone) .niveau { display: none; }
.beta-scene .poste:has(.fermentations-f-rotatif) .niveau { fill: #8bdcf3; opacity: .35; }
.beta-scene .fermentations-echauffe:has(.fermentations-f-rotatif) .niveau { fill: #ff9a64; opacity: .45; }
.beta-scene .fermentations-echauffe .cuve { stroke: #ff9a64; }
.beta-scene .fermentations-pastille-fond { fill: #0b0f1e; opacity: .82; stroke: #59647a; stroke-width: 1; }
.beta-scene .fermentations-pastille .petit { fill: #eef2fb; }
.beta-scene .fermentations-pastille-gaz .petit { fill: #dfe5f2; }
.beta-scene .fermentations-jauge-tube { fill: #121b30; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .fermentations-jauge-trait { stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .fermentations-jauge-fleche { fill: #f6e27a; }
.beta-scene .fermentations-bouteille { fill: #1a2742; stroke: #aab5c9; stroke-width: 3; }
.beta-scene .fermentations-col { fill: #aab5c9; }
.beta-scene .fermentations-manometre { fill: #121b30; stroke: #d9ef59; stroke-width: 2; }
.beta-scene .fermentations-aiguille { stroke: #d9ef59; stroke-width: 1.5; stroke-linecap: round; transform-box: fill-box; transform-origin: 0% 100%; }
.beta-scene .actif .fermentations-aiguille { animation: fermentations-aiguille 1.4s ease-in-out infinite alternate; }
.beta-scene .fermentations-sonde { stroke: #f5f7f8; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .fermentations-sonde-bout { fill: #d9ef59; }
.beta-scene .fermentations-thermo { stroke: #f5f7f8; stroke-width: 3; stroke-linecap: round; }
.beta-scene .fermentations-mercure { fill: #ff6b67; transition: y .9s ease, height .9s ease; }
.beta-scene .fermentations-thermo-bulbe { fill: #ff6b67; }
.beta-scene .fermentations-temp { fill: #ffb3b0; }
.beta-scene .fermentations-axe { fill: #aab5c9; }
.beta-scene .fermentations-pales { transform-box: fill-box; transform-origin: center; }
.beta-scene .actif .fermentations-pales { animation: beta-scene-tourne 3.2s linear infinite; }
.beta-scene .fermentations-couche-pulpe { fill: #ff6b67; opacity: .75; }
.beta-scene .fermentations-couche-mucilage { fill: #ff9a64; opacity: .5; }
.beta-scene .fermentations-couche-parche { fill: #1a2742; stroke: #dfc686; stroke-width: 5; }
.beta-scene .fermentations-couche-grain { fill: #7ee0a8; opacity: .85; }
.beta-scene .fermentations-fissure { fill: #11192b; stroke: #ff6b67; stroke-width: 1.5; }
.beta-scene .fermentations-sillon { fill: none; stroke: #121b30; stroke-width: 3; stroke-linecap: round; }
.beta-scene .fermentations-graduation { stroke: #f5f7f8; stroke-width: 1.5; }
.beta-scene .fermentations-sol { fill: #53617c; opacity: .7; }
.beta-scene .fermentations-racine { fill: none; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .fermentations-tige { fill: none; stroke: #7ee0a8; stroke-width: 4; stroke-linecap: round; }
.beta-scene .fermentations-fin { text-anchor: end; }
.beta-scene .fermentations-voile { transition: opacity 1.2s ease; opacity: 0; }
.beta-scene .fermentations-brasse, .beta-scene .fermentations-baton, .beta-scene .fermentations-main { display: none; }
.beta-scene .fermentations-geste-brasser .fermentations-brasse { display: inline; transform-box: view-box; animation: fermentations-brasse 1.8s ease-in-out infinite alternate; }
.beta-scene .fermentations-geste-baton .fermentations-baton { display: inline; }
.beta-scene .fermentations-geste-main .fermentations-main { display: inline; animation: fermentations-frotte .9s ease-in-out infinite alternate; }
.beta-scene .fermentations-manche { stroke: #f5f7f8; stroke-width: 4; stroke-linecap: round; }
.beta-scene .fermentations-spatule { fill: #aab5c9; stroke: #f5f7f8; stroke-width: 1.5; }
.beta-scene .fermentations-trou { fill: #0b0f1e; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .fermentations-paume { fill: #33415f; stroke: #f5f7f8; stroke-width: 2; }
.beta-scene .fermentations-serre { fill: rgba(139,220,243,.08); stroke: #8bdcf3; stroke-width: 2; stroke-dasharray: 6 4; }
.beta-scene .fermentations-ombriere { stroke: #53617c; stroke-width: 6; stroke-dasharray: 3 3; }
.beta-scene .fermentations-poteau { stroke: #53617c; stroke-width: 2; }
.beta-scene .fermentations-f-sechoir { fill: #1a2742; }
.beta-scene .fermentations-latte { stroke: #aab5c9; stroke-width: 1.5; opacity: .6; }
.beta-scene .fermentations-lattes { transform-box: fill-box; transform-origin: center; }
.beta-scene .actif .fermentations-lattes { animation: fermentations-defile 1.2s linear infinite; }
.beta-scene .fermentations-baton-cannelle { fill: #b9773f; stroke: #0b0f1e; stroke-width: 1; }
.beta-scene .fermentations-impregne { transition: opacity .9s ease; }
.beta-scene .fermentations-sac { fill: #2a3654; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .fermentations-lien { fill: none; stroke: #d9ef59; stroke-width: 3; stroke-linecap: round; }
.beta-scene .fermentations-poudre, .beta-scene .fermentations-ingredient { stroke: #0b0f1e; stroke-width: 1; }
.beta-scene .fermentations-flotteurs { transform-box: fill-box; }
.beta-scene .actif .fermentations-flotteurs { animation: fermentations-flotte 1.6s ease-in-out infinite alternate; }
.beta-scene .fermentations-pulpe { fill: #ff6b67; opacity: .8; transition: y .9s ease, height .9s ease; }
.beta-scene .fermentations-cage { fill: none; stroke: #aab5c9; stroke-width: 3; }
.beta-scene .fermentations-vis { stroke: #d9ef59; stroke-width: 4; }
.beta-scene .fermentations-plateau-presse { fill: #d9ef59; }
.beta-scene .fermentations-bac-jus { fill: #121b30; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .fermentations-geste-presser .fermentations-presse-plateau { animation: fermentations-presse 2.6s ease-in-out infinite alternate; }
.fermentations-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; color: #dfe5f2; font: 600 11.5px/1.3 'IBM Plex Mono', monospace; }
.fermentations-legende:empty { display: none; }
.fermentations-legende span { display: inline-flex; align-items: center; gap: 6px; }
.fermentations-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.fermentations-legende i.microbe { width: 11px; height: 11px; box-shadow: 0 0 0 2px #0b0f1e, 0 0 0 3px #59647a; }
@keyframes fermentations-bulle { 50% { opacity: .15; } }
@keyframes fermentations-aiguille { to { transform: rotate(55deg); } }
@keyframes fermentations-ferme { 0%, 30% { transform: rotate(-5deg); } 75%, 100% { transform: none; } }
@keyframes fermentations-bouchon { 0%, 55%, 100% { transform: none; } 65%, 90% { transform: translate(0, -12px); } }
@keyframes fermentations-salve { 0% { opacity: 1; } 35% { opacity: 0; } }
@keyframes fermentations-brasse { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes fermentations-frotte { from { transform: translate(-3px, 0); } to { transform: translate(3px, 0); } }
@keyframes fermentations-flotte { from { transform: translate(0, -1.5px); } to { transform: translate(0, 1.5px); } }
@keyframes fermentations-defile { to { transform: translate(6px, 0); } }
@keyframes fermentations-presse { from { transform: none; } to { transform: translate(0, var(--plongee, 30px)); } }
@media (prefers-reduced-motion: reduce) {
  .beta-scene [class*="fermentations-"] { animation: none !important; }
}

/* ── scenes_incoterms ── */

/* ── scenes_incoterms : la chaîne et le contrat ── */
.beta-scene .inco-fond { fill: rgba(255,255,255,.03); }
.beta-scene .inco-cadre { fill: rgba(255,255,255,.04); stroke: #53617c; stroke-width: 1.5; transition: stroke .4s ease, stroke-width .4s ease; }
.beta-scene .inco-nomme .inco-cadre { stroke: var(--beta-lemon,#d9ef59); stroke-width: 3.5; }
.beta-scene .inco-lib { fill: #eef2fb; font: 600 12px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-scene .inco-centre { text-anchor: middle; }
.beta-scene .inco-clair { fill: #f3f5fa; }
.beta-scene .inco-route { fill: none; stroke: #aab5c9; stroke-width: 2; stroke-dasharray: 2 6; opacity: .7; }
.beta-scene .inco-v { fill: #ff9a64; }
.beta-scene .inco-a { fill: #8bdcf3; }
.beta-scene .inco-bande { transition: x .6s ease, y .6s ease, width .6s ease, height .6s ease; }
.beta-scene .inco-pastille { stroke: none; }
.beta-scene .inco-marque { transition: transform .6s ease, opacity .4s ease; }
.beta-scene .inco-trait { stroke: var(--beta-lemon,#d9ef59); stroke-width: 2; stroke-dasharray: 4 3; }
.beta-scene .inco-puce { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .inco-puce-txt { fill: #0b0f1e; font: 700 12px 'IBM Plex Mono',monospace; }
.beta-scene .etroit .inco-puce-txt { font-size: 11px; }
.beta-scene .inco-encoche { stroke: #121b30; stroke-width: 2.5; transition: opacity .4s ease; }
.beta-scene .inco-tag { stroke: none; transition: opacity .4s ease; }
.beta-scene .inco-tag-txt { fill: #0b0f1e; font: 700 11px 'Atkinson Hyperlegible Next',sans-serif; transition: opacity .4s ease; }
.beta-scene .etroit .inco-tag-txt.inco-v { fill: #ff9a64; }
.beta-scene .etroit .inco-tag-txt.inco-a { fill: #8bdcf3; }
.beta-scene .inco-sigle { fill: #fff; font: 800 22px 'Barlow Condensed',sans-serif; letter-spacing: -.01em; }
.beta-scene .etroit .inco-sigle { font-size: 19px; }
.beta-scene .inco-rubrique { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .inco-val { fill: #f3f5fa; font: 500 13px 'Atkinson Hyperlegible Next',sans-serif; }
/* Les petits dessins. Aucune teinte marron : la toile des sacs est paille. */
.beta-scene .inco-sol { stroke: #59647a; stroke-width: 2; }
.beta-scene .inco-tronc { stroke: #9ee3cd; stroke-width: 2; fill: none; }
.beta-scene .inco-feuille { fill: #9ee3cd; opacity: .85; }
.beta-scene .inco-cerise { fill: #ff6b67; }
.beta-scene .inco-toile { fill: #f0dda4; stroke: #16203a; stroke-width: 1; }
.beta-scene .inco-lien { fill: none; stroke: #16203a; stroke-width: 1.2; }
.beta-scene .inco-bati { fill: #2a3754; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .inco-toit { fill: #3a4a70; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .inco-porte { fill: #16203a; stroke: #59647a; stroke-width: 1; }
.beta-scene .inco-cabine { fill: #3a4a70; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .inco-roue { fill: #16203a; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .inco-quai { fill: #59647a; }
.beta-scene .inco-grue { fill: none; stroke: #aab5c9; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .inco-cable { stroke: #aab5c9; stroke-width: 1; }
.beta-scene .inco-conteneur { fill: #6b7896; stroke: #dfe5f2; stroke-width: 1; }
.beta-scene .inco-coque { fill: #3a4a70; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .inco-passerelle { fill: #dfe5f2; }
.beta-scene .inco-vague { fill: none; stroke: #8bdcf3; stroke-width: 1.5; stroke-dasharray: 6 4; }
.beta-scene .actif .inco-vague { animation: inco-houle 1.6s linear infinite; }
.beta-scene .actif .inco-navire { animation: inco-roulis 3s ease-in-out infinite; }
@keyframes inco-houle { to { stroke-dashoffset: -20; } }
@keyframes inco-roulis { 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .beta-scene .actif .inco-vague, .beta-scene .actif .inco-navire { animation: none !important; }
  .beta-scene .inco-marque, .beta-scene .inco-bande { transition: none; }
}

/* ── scenes_methodes_1 ── */

/* ── Méthodes de préparation, lots 1 et 2 (scenes_methodes_1.py) ── */
.beta-scene .m1-cadre { fill: rgba(255,255,255,.03); stroke: #59647a; stroke-width: 1.5; }
.beta-scene .m1-dessin * { vector-effect: non-scaling-stroke; }
.beta-scene .m1-fondu { transition: opacity .6s ease; }
.beta-scene .m1-cache { opacity: 0 !important; }
.beta-scene .m1-chemin { fill: none; stroke: none; }
.beta-scene .m1-pt { pointer-events: none; }
.beta-scene .m1-renvoi { stroke: #7f8ca8; stroke-width: 1; stroke-dasharray: 2 3; }
.beta-scene .m1-bouge { transition: transform 1.4s ease, opacity .6s ease; }
.beta-scene .m1-bouge.m1-lent { transition: transform 2.6s ease-in-out, opacity .6s ease; }
.beta-scene .m1-parti { opacity: .25; }
.beta-scene .m1-table { stroke: #59647a; stroke-width: 2; }
/* Parois et matières */
.beta-scene .m1-fond { fill: #16203a; stroke: none; }
.beta-scene .m1-verre { fill: none; stroke: #c8d1e2; stroke-width: 2.4; stroke-linejoin: round; }
.beta-scene .m1-paroi { fill: none; stroke: #aab5c9; stroke-width: 3; stroke-linejoin: round; }
.beta-scene .m1-porteur { fill: #2a3248; stroke: #aab5c9; stroke-width: 3; stroke-linejoin: round; }
.beta-scene .m1-metal { fill: #2a3248; stroke: #aab5c9; stroke-width: 2.2; stroke-linejoin: round; }
.beta-scene .m1-metalfil { fill: none; stroke: #aab5c9; stroke-width: 2.2; }
.beta-scene .m1-laiton { fill: none; stroke: #d9a95c; stroke-width: 3; stroke-linejoin: round; }
.beta-scene .m1-manche { fill: none; stroke: #d9a95c; stroke-width: 5; stroke-linecap: round; }
.beta-scene .m1-anse { fill: none; stroke: #aab5c9; stroke-width: 2.6; stroke-linecap: round; }
.beta-scene .m1-bec { fill: none; stroke: #aab5c9; stroke-width: 4; stroke-linecap: round; }
.beta-scene .m1-bec.m1-becfin { stroke-width: 2.2; }
.beta-scene .m1-couvercle { fill: none; stroke: #aab5c9; stroke-width: 4; stroke-linecap: round; }
.beta-scene .m1-tige { stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; }
.beta-scene .m1-terre { fill: none; stroke: #c0714f; stroke-width: 4; stroke-linecap: round; transition: stroke .8s ease; }
.beta-scene .m1-terre.m1-chauffe { stroke: #ff8a5c; }
.beta-scene .m1-porcelaine { fill: none; stroke: #f3f5fa; stroke-width: 2.6; stroke-linejoin: round; }
.beta-scene .m1-porc { fill: #f3f5fa; opacity: .85; }
.beta-scene .m1-papier { fill: none; stroke: #f3f5fa; stroke-width: 2; stroke-dasharray: 6 3; transition: stroke .6s ease; }
.beta-scene .m1-papierplein { fill: none; stroke: #f3f5fa; stroke-width: 1.8; transition: stroke .6s ease; }
.beta-scene .m1-papierplein.m1-alerte { stroke: #ff6b67; stroke-width: 2.4; }
.beta-scene .m1-tissu { fill: rgba(230,207,110,.16); stroke: none; transition: fill .8s ease; }
.beta-scene .m1-tissu.m1-gras { fill: rgba(255,224,138,.42); }
.beta-scene .m1-tissubord { fill: none; stroke: #e6cf6e; stroke-width: 2.4; stroke-dasharray: 2 2; }
.beta-scene .m1-cerceau { fill: none; stroke: #aab5c9; stroke-width: 2.6; }
.beta-scene .m1-toile { fill: #1b2742; stroke: #aab5c9; stroke-width: 1.6; }
.beta-scene .m1-maille { stroke: #aab5c9; stroke-width: 1; }
.beta-scene .m1-ressort { fill: none; stroke: #aab5c9; stroke-width: 1.6; transition: stroke .4s ease; }
.beta-scene .m1-perce { fill: none; stroke: #aab5c9; stroke-width: 2.4; stroke-dasharray: 5 3; }
.beta-scene .m1-trou { fill: #0b0f1e; }
.beta-scene .m1-plaque { fill: #2a3248; stroke: #aab5c9; stroke-width: 1.4; }
.beta-scene .m1-valve { fill: #ff6b67; transition: transform 1s ease, fill .6s ease; }
.beta-scene .m1-valve.m1-ouverte { fill: #7ee0a8; }
.beta-scene .m1-nervure { fill: none; stroke: #aab5c9; stroke-width: 2; stroke-linecap: round; transition: stroke .4s ease; }
.beta-scene .m1-rainure { fill: none; stroke: #d9ef59; stroke-width: 3; stroke-dasharray: 5 3; }
.beta-scene .m1-surligne, .beta-scene .m1-surligne * { stroke: #d9ef59 !important; }
.beta-scene .m1-fantome { fill: none; stroke: #d9ef59; stroke-width: 1.6; stroke-dasharray: 5 4; }
.beta-scene .m1-fantomelit { fill: rgba(160,100,60,.35); stroke: none; }
.beta-scene .m1-machine { fill: #1a2440; stroke: #59647a; stroke-width: 2; }
.beta-scene .m1-tube { fill: none; stroke: #59647a; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .m1-bloc { fill: #3a4560; stroke: #aab5c9; stroke-width: 1.6; transition: fill .8s ease; }
.beta-scene .m1-bloc.m1-rouge { fill: #ff6b67; }
.beta-scene .m1-interdit { fill: none; stroke: #ff6b67; stroke-width: 2.2; stroke-dasharray: 4 3; }
.beta-scene .m1-passoire { fill: rgba(170,181,201,.12); stroke: #aab5c9; stroke-width: 2; stroke-dasharray: 3 2; }
.beta-scene .m1-liquide { opacity: .92; transition: y 1s ease, height 1s ease, fill 1s ease; }
.beta-scene .m1-mousse { fill: #e9cfa0; transition: y 1s ease, height 1s ease; }
.beta-scene .m1-part { stroke: none; }
.beta-scene .m1-air { fill: rgba(232,238,248,.12); stroke: #e8eef8; stroke-width: 1.2; }
.beta-scene .m1-jet { fill: none; stroke: #8bdcf3; stroke-width: 3; stroke-linecap: round; opacity: .55; }
.beta-scene .m1-jet.m1-jetfin { stroke-width: 1.6; }
.beta-scene .m1-limite { stroke: #d9ef59; stroke-width: 1.6; stroke-dasharray: 5 4; }
.beta-scene .m1-chaleur { fill: none; stroke: #ff6b67; stroke-width: 2; stroke-linecap: round; }
.beta-scene .m1-fleche, .beta-scene .m1-libre path { fill: none; stroke: #d9ef59; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .m1-bruleur { fill: #59647a; }
.beta-scene .m1-vapeur { fill: none; stroke: #e8eef8; stroke-width: 2; stroke-linecap: round; opacity: .5; stroke-dasharray: 6 6; animation: m1-vapeur 1.4s linear infinite; }
/* La loupe */
.beta-scene .m1-halo { fill: rgba(139,220,243,.16); stroke: rgba(139,220,243,.55); stroke-width: 1.4; }
.beta-scene .m1-particule { stroke: #c98a4b; stroke-width: 1.6; transition: fill .8s ease; }
.beta-scene .m1-cellule { fill: none; stroke: rgba(240,221,164,.55); stroke-width: 1; }
.beta-scene .m1-sep { stroke: #59647a; stroke-width: 1; stroke-dasharray: 3 3; }
.beta-scene .m1-bain { fill: rgba(201,138,75,.20); }
.beta-scene .m1-fondbarre { stroke: #aab5c9; stroke-width: 2; }
.beta-scene .m1-papierb { fill: #f3f5fa; opacity: .9; }
.beta-scene .m1-fibre { stroke: #aab5c9; stroke-width: .8; }
.beta-scene .m1-fil { fill: none; stroke: #e6cf6e; stroke-width: 2; }
/* Les mouvements */
.beta-scene .m1-langue { transform-box: fill-box; transform-origin: 50% 100%; animation: m1-flamme .45s ease-in-out infinite alternate; }
.beta-scene .m1-flotte { animation: m1-flotte 3.2s ease-in-out infinite alternate; }
.beta-scene .m1-flotte2 { animation: m1-flotte 4.4s ease-in-out infinite alternate-reverse; }
.beta-scene .m1-remous { transform-box: fill-box; transform-origin: 50% 50%; animation: m1-remous 7s linear infinite; }
.beta-scene .m1-coule { animation: m1-coule 2.6s ease-in infinite; }
.beta-scene .m1-gonfle { transform-box: fill-box; transform-origin: 50% 100%; animation: m1-gonfle 1.8s ease-in-out infinite alternate; }
.beta-scene .m1-oscille { animation: m1-oscille 1.6s ease-in-out infinite alternate; }
.beta-scene .m1-vaetvient { animation: m1-vaetvient 3.2s ease-in-out infinite; }
.beta-scene .m1-touille { animation: m1-touille .8s ease-in-out infinite alternate; }
.beta-scene .m1-va { animation: m1-va 2.4s ease-in-out infinite alternate; }
@keyframes m1-flamme { to { transform: scaleY(.78); } }
@keyframes m1-flotte { to { transform: translate(3px, -5px); } }
@keyframes m1-remous { to { transform: rotate(360deg); } }
@keyframes m1-coule { from { transform: translateY(0); opacity: 1; } to { transform: translateY(30px); opacity: .2; } }
@keyframes m1-gonfle { to { transform: scaleY(1.12); } }
@keyframes m1-oscille { to { transform: translateY(8px); } }
@keyframes m1-vaetvient { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes m1-touille { to { transform: translateX(-10px); } }
@keyframes m1-va { to { transform: translateY(30px); } }
@keyframes m1-vapeur { to { stroke-dashoffset: 24; } }
@media (prefers-reduced-motion: reduce) {
  .beta-scene .m1-langue, .beta-scene .m1-flotte, .beta-scene .m1-flotte2, .beta-scene .m1-remous, .beta-scene .m1-coule,
  .beta-scene .m1-gonfle, .beta-scene .m1-oscille, .beta-scene .m1-vaetvient, .beta-scene .m1-touille, .beta-scene .m1-va,
  .beta-scene .m1-vapeur { animation: none !important; }
  .beta-scene .m1-bouge, .beta-scene .m1-liquide, .beta-scene .m1-mousse { transition: none !important; }
}

/* ── scenes_methodes_2 ── */

/* ── Méthodes de préparation, lots 3 et 4 (scenes_methodes_2.py) ── */
.beta-scene .meth2-cadre { fill: rgba(255,255,255,.03); stroke: #59647a; stroke-width: 1.5; }
.beta-scene .meth2-dessin * { vector-effect: non-scaling-stroke; }
.beta-scene .meth2-fondu { transition: opacity .6s ease; }
.beta-scene .meth2-cache { opacity: 0 !important; }
.beta-scene .meth2-chemin { fill: none; stroke: none; }
.beta-scene .meth2-pt { pointer-events: none; }
.beta-scene .meth2-renvoi { stroke: #7f8ca8; stroke-width: 1; stroke-dasharray: 2 3; }
.beta-scene .meth2-paroi { fill: none; stroke: #aab5c9; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.beta-scene .meth2-paroi.fin { stroke-width: 1.8; }
.beta-scene .meth2-verre { fill: rgba(139,220,243,.06); stroke: #c9d6ea; stroke-width: 2; stroke-linejoin: round; }
.beta-scene .meth2-metal { fill: #59647a; stroke: #aab5c9; stroke-width: 1.2; }
.beta-scene .meth2-joint { fill: #2a3248; stroke: #aab5c9; stroke-width: 1.2; }
.beta-scene .meth2-conduit { fill: #1d2944; stroke: #aab5c9; stroke-width: 1.4; }
.beta-scene .meth2-conduite { fill: none; stroke: #4e5c86; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .meth2-anse { fill: none; stroke: #aab5c9; stroke-width: 4; stroke-linecap: round; }
.beta-scene .meth2-anse.fine { stroke-width: 2.6; }
.beta-scene .meth2-poignee { fill: #c8b08a; }
.beta-scene .meth2-filtre { stroke: #f3ead7; stroke-width: 2.4; stroke-dasharray: 5 3; }
.beta-scene .meth2-filtre.epais { stroke-width: 3.4; }
.beta-scene .meth2-trous { stroke: #aab5c9; stroke-width: 3; stroke-dasharray: 3 4; }
.beta-scene .meth2-papier { fill: none; stroke: #f3ead7; stroke-width: 1.6; stroke-dasharray: 4 3; }
.beta-scene .meth2-papierl { stroke: #f3ead7; stroke-width: 3; }
.beta-scene .meth2-litfond { stroke: none; }
.beta-scene .meth2-particule { fill: #5a3420; }
.beta-scene .meth2-liquide { transition: y .9s ease, height .9s ease, fill .9s ease; }
.beta-scene .meth2-air { fill: rgba(170,181,201,.16); stroke: #aab5c9; stroke-width: 1; stroke-dasharray: 3 3; }
.beta-scene .meth2-bruleur { fill: #59647a; }
.beta-scene .meth2-flamme { fill: #ff9a64; stroke: #ffd27a; stroke-width: 1; transform-box: fill-box; transform-origin: 50% 100%; animation: meth2-flamme .8s ease-in-out infinite alternate; }
@keyframes meth2-flamme { to { transform: scale(1.08, .72); } }
.beta-scene .meth2-fleche line { stroke: #d9ef59; stroke-width: 2.2; }
.beta-scene .meth2-fleche path { fill: #d9ef59; }
.beta-scene .meth2-fleche.leger line { stroke-width: 1.2; }
.beta-scene .meth2-fleche.air line, .beta-scene .meth2-fleche.vapeurf line { stroke: #f3f5fa; }
.beta-scene .meth2-fleche.air path, .beta-scene .meth2-fleche.vapeurf path { fill: #f3f5fa; }
.beta-scene .meth2-fleche.diffuse line { stroke: #ffb45d; stroke-width: 1.6; }
.beta-scene .meth2-fleche.diffuse path { fill: #ffb45d; }
.beta-scene .meth2-glisse { transition: transform 1.2s ease; }
.beta-scene .meth2-pivot { transform-box: fill-box; transform-origin: 100% 50%; transition: transform 1.1s ease; }
.beta-scene .meth2-pivotbas { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.4s ease; }
.beta-scene .meth2-aiguille { stroke: #ff6b67; stroke-width: 3; stroke-linecap: round; }
.beta-scene .meth2-axe { fill: #f3f5fa; }
.beta-scene .meth2-cadran { fill: rgba(255,255,255,.04); stroke: #aab5c9; stroke-width: 2.4; }
.beta-scene .meth2-zonecadran { fill: none; stroke: #d9ef59; stroke-width: 6; opacity: .55; }
.beta-scene .meth2-graduation { stroke: #aab5c9; stroke-width: 1.6; }
.beta-scene .meth2-palette { stroke: #c8b08a; stroke-width: 4; stroke-linecap: round; }
.beta-scene .meth2-remous { fill: none; stroke: #f3f5fa; stroke-width: 1.6; stroke-dasharray: 9 7; animation: meth2-defile 1.1s linear infinite; }
@keyframes meth2-defile { to { stroke-dashoffset: -32; } }
.beta-scene .meth2-cylindre { fill: rgba(255,255,255,.04); stroke: #c9d6ea; stroke-width: 2.4; transition: stroke .8s ease; }
.beta-scene .meth2-piston { fill: #2a3248; stroke: #aab5c9; stroke-width: 1.6; }
.beta-scene .meth2-capuchon { fill: #59647a; stroke: #aab5c9; stroke-width: 1.2; }
.beta-scene .meth2-marc { fill: #6f4128; }
.beta-scene .meth2-ressort { fill: none; stroke: #d9ef59; stroke-width: 2.4; transform-box: fill-box; transform-origin: 50% 0; animation: meth2-ressort 1.6s ease-in-out infinite alternate; }
@keyframes meth2-ressort { to { transform: scaleY(.62); } }
.beta-scene .meth2-levierbras { stroke: #aab5c9; stroke-width: 6; stroke-linecap: round; }
.beta-scene .meth2-levierbras.fin { stroke-width: 4; }
.beta-scene .meth2-tige { stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; }
.beta-scene .meth2-bec { fill: none; stroke: #aab5c9; stroke-width: 4; stroke-linecap: round; }
.beta-scene .meth2-roue { transform-box: fill-box; transform-origin: center; animation: meth2-tourne 1s linear infinite; }
.beta-scene .meth2-roue line { stroke: #d9ef59; stroke-width: 2.4; }
@keyframes meth2-tourne { to { transform: rotate(360deg); } }
.beta-scene .meth2-serpentin { fill: none; stroke: #ff9a64; stroke-width: 3; }
.beta-scene .meth2-soupape { fill: #59647a; stroke: #aab5c9; stroke-width: 1; transition: fill .6s ease; }
.beta-scene .meth2-soupape.ouverte { fill: #d9ef59; }
.beta-scene .meth2-capsule { fill: rgba(201,167,255,.18); stroke: #c9a7ff; stroke-width: 2; }
.beta-scene .meth2-membrane { fill: none; stroke: #f3f5fa; stroke-width: 2.6; }
.beta-scene .meth2-faiblesse { fill: none; stroke: #ff6b67; stroke-width: 1.4; stroke-dasharray: 3 2; }
.beta-scene .meth2-bullettes { fill: #f3ead7; opacity: .85; }
.beta-scene .meth2-sachet { fill: rgba(243,234,215,.08); stroke: #f3ead7; stroke-width: 1.4; stroke-dasharray: 4 3; }
.beta-scene .meth2-glacon { fill: rgba(223,244,251,.55); stroke: #f3f5fa; stroke-width: 1.4; }
.beta-scene .meth2-fond { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 1.6s ease; }
.beta-scene .meth2-epuise { fill: #f0dda4; opacity: .4; }
.beta-scene .meth2-fut { fill: none; stroke: #aab5c9; stroke-width: 2.6; }
.beta-scene .meth2-cercle { stroke: #aab5c9; stroke-width: 2; }
.beta-scene .meth2-plongeur { stroke: #aab5c9; stroke-width: 2; stroke-dasharray: 2 2; }
.beta-scene .meth2-azotept { fill: #c9a7ff; }
.beta-scene .meth2-bouteille { fill: rgba(201,167,255,.22); stroke: #c9a7ff; stroke-width: 2; }
.beta-scene .meth2-cadranpetit { fill: #1d2944; stroke: #aab5c9; stroke-width: 1.4; }
.beta-scene .meth2-trouble { fill: #c8b4a2; opacity: .55; }
.beta-scene .meth2-plaque { fill: #59647a; }
.beta-scene .meth2-gazcase { fill: #22304a; stroke: #59647a; stroke-width: 1; }
.beta-scene .meth2-granule { fill: #8a5232; }
.beta-scene .meth2-dissout circle { transform-box: fill-box; transform-origin: center; animation: meth2-dissout 1.8s ease-in forwards; }
@keyframes meth2-dissout { to { transform: scale(.1); opacity: 0; } }
.beta-scene .meth2-fumee { fill: none; stroke: #e8eef8; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 8; animation: meth2-fumee 1.4s linear infinite; }
@keyframes meth2-fumee { to { stroke-dashoffset: 36; } }
.beta-scene .meth2-arome { transition: opacity 1s ease; }
.beta-scene .meth2-lance { stroke: #aab5c9; stroke-width: 5; stroke-linecap: round; }
.beta-scene .meth2-grossebulle { fill: rgba(243,245,250,.25); stroke: #f3f5fa; stroke-width: 1.2; }
.beta-scene .meth2-bullette2 { fill: rgba(243,245,250,.6); }
.beta-scene .meth2-thermotube { fill: #1d2944; stroke: #aab5c9; stroke-width: 1.4; }
.beta-scene .meth2-thermobulbe { fill: #ff6b67; }
.beta-scene .meth2-mercure { fill: #ff6b67; transition: width 1s ease; }
.beta-scene .meth2-mercure2 { fill: #ff6b67; transition: y 1s ease, height 1s ease; }
.beta-scene .meth2-zonetherm { fill: rgba(217,239,89,.35); }
.beta-scene .meth2-bulleair { fill: rgba(243,245,250,.12); stroke: #f3f5fa; stroke-width: 1.6; }
.beta-scene .meth2-proteine { stroke: #7ee0a8; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .meth2-gras { fill: #ffe08a; }
.beta-scene .meth2-chaine { fill: none; stroke: #7ee0a8; stroke-width: 3; }
.beta-scene .meth2-polyphenol { fill: rgba(255,154,100,.25); stroke: #ff9a64; stroke-width: 1.6; }
.beta-scene .meth2-liaison { stroke: #d9ef59; stroke-width: 1.6; stroke-dasharray: 2 2; }
.beta-scene .meth2-eaucouche { fill: #8bdcf3; opacity: .45; }
.beta-scene .meth2-mouille { fill: #2a1a10; opacity: .45; }
.beta-scene .meth2-monte { transform-box: fill-box; transform-origin: 50% 0; animation: meth2-front 3.5s ease-out both; }
@keyframes meth2-front { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.beta-scene .meth2-bouchee { fill: #1a0f08; opacity: .75; }
.beta-scene .meth2-canal { fill: none; stroke: #8bdcf3; stroke-width: 3; stroke-dasharray: 8 6; animation: meth2-defile .8s linear infinite; }
.beta-scene .meth2-barrefond { fill: #2a3248; }
.beta-scene .meth2-barre { transition: width .8s ease; }
.beta-scene .meth2-axe2 { stroke: #7f8ca8; stroke-width: 1.4; }
.beta-scene .meth2-courbefond { fill: none; stroke: #59647a; stroke-width: 2; stroke-dasharray: 4 4; }
.beta-scene .meth2-courbe { fill: none; stroke-width: 3; stroke-linecap: round; }
.beta-scene .meth2-revele { transition: width 1.2s ease; }
.beta-scene .meth2-curseur { stroke: #f3f5fa; stroke-width: 1.2; stroke-dasharray: 3 3; transition: transform 1.2s ease; }
.beta-scene .meth2-curseurfrise { fill: #f3f5fa; transition: transform 1.2s ease; }
.beta-scene .meth2-segment { transition: x .9s ease, width .9s ease; }
.beta-scene .meth2-pilecadre { fill: none; stroke: #aab5c9; stroke-width: 1.2; }
.beta-scene .meth2-gros { fill: rgba(201,138,75,.35); }
.beta-scene .meth2-cremecase { fill: #c98a4b; opacity: .9; }
.beta-scene .meth2-bullecreme { fill: rgba(243,234,215,.55); stroke: #f3ead7; stroke-width: .8; }
.beta-scene .meth2-ecartfond { opacity: .5; }
.beta-scene .meth2-grosgrain { fill: #a0643c; stroke: #6f4128; stroke-width: 1.4; }
@media (prefers-reduced-motion: reduce) {
  .beta-scene .meth2-flamme, .beta-scene .meth2-remous, .beta-scene .meth2-ressort, .beta-scene .meth2-roue,
  .beta-scene .meth2-fumee, .beta-scene .meth2-canal, .beta-scene .meth2-dissout circle, .beta-scene .meth2-monte { animation: none !important; }
}

/* ── scenes_preparations ── */

/* ── Préparations (scenes_preparations.py) ── */
.beta-scene .prep-fin { text-anchor: end; }
.beta-scene .centre-t { text-anchor: middle; }
.beta-scene .prep-rouge { fill: #ff8a87; }
.beta-scene .prep-citron { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .prep-mini { fill: #aab3c9; font: 600 10.5px 'IBM Plex Mono',monospace; }
.beta-scene .etroit .prep-mini { font-size: 12px; }
.beta-scene .prep-t1 { fill: #ff9a64; } .beta-scene .prep-t2 { fill: var(--beta-lemon,#d9ef59); } .beta-scene .prep-t3 { fill: #8bdcf3; }
.beta-scene .prep-liq { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .8s ease, fill .8s ease; }
.beta-scene .prep-rend { fill: #c98a4b; }
.beta-scene .prep-rend-h { fill: #c98a4b; transform-origin: 0% 50%; }
.beta-scene .prep-fondu { transition: opacity .6s ease; }
.beta-scene .prep-moulu { fill: #a0643c; stroke: rgba(17,25,43,.55); stroke-width: .8; }
.beta-scene .prep-fines { fill: #e0b07a; }
.beta-scene .prep-bloc { fill: #6f4128; stroke: rgba(17,25,43,.55); stroke-width: .8; }
.beta-scene .prep-vieux { fill: #77706a; }
.beta-scene .prep-grain-entier { fill: #8a5232; stroke: rgba(255,255,255,.3); }
.beta-scene .prep-metal, .beta-scene .prep-paroi { fill: none; stroke: #aab5c9; stroke-width: 3; stroke-linejoin: round; }
.beta-scene .prep-paroi.fine { stroke-width: 2.5; }
.beta-scene .prep-metal-fond { fill: #1a2742; }
.beta-scene .prep-verre-fond { fill: rgba(139,220,243,.06); }
.beta-scene .prep-verre-paroi { fill: none; stroke: #c6d3e8; stroke-width: 2.5; stroke-linejoin: round; }
.beta-scene .prep-porcelaine { fill: #26334f; stroke: #eef2fb; stroke-width: 2.5; }
.beta-scene .prep-anse { fill: none; stroke: #c6d3e8; stroke-width: 4; stroke-linecap: round; }
.beta-scene .prep-eau-fixe { fill: #8bdcf3; opacity: .45; }
.beta-scene .prep-eau-col { fill: #8bdcf3; opacity: .55; }
.beta-scene .prep-col { fill: none; stroke: #aab5c9; stroke-width: 4; stroke-linecap: round; }
.beta-scene .prep-nervure { stroke: #6f7d99; stroke-width: 2; }
.beta-scene .prep-papier { fill: none; stroke: #f5f7f8; stroke-width: 2; stroke-dasharray: 5 3; }
.beta-scene .prep-chenal { fill: none; stroke: #8bdcf3; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .prep-chenal-halo { fill: none; stroke: rgba(255,107,103,.45); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .prep-fleche { fill: none; stroke: var(--beta-lemon,#d9ef59); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .prep-bulle { fill: none; stroke: #c6cbd2; stroke-width: 1.6; }
.beta-scene .actif .prep-bulles circle { animation: prep-bulle 1.3s ease-in infinite; }
.beta-scene .actif .prep-bulles circle:nth-child(2n) { animation-delay: -.6s; }
.beta-scene .prep-lit-cone, .beta-scene .prep-lit-palet { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .8s ease; }
.beta-scene .prep-cel { fill: #7ee0a8; stroke: #c6cbd2; stroke-width: 1; transition: fill-opacity .8s ease; }
.beta-scene .prep-cel-fine { fill: #7ee0a8; }
.beta-scene .prep-grain-fond { fill: #3a2a22; }
.beta-scene .prep-contour { fill: none; stroke: #c0814f; stroke-width: 2.5; }
.beta-scene .prep-huile { fill: #ffe08a; }
.beta-scene .prep-huile-txt { fill: #ffe08a; }
.beta-scene .prep-cadre { fill: none; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .prep-plafond { fill: rgba(255,107,103,.32); }
.beta-scene .prep-fenetre { fill: rgba(217,239,89,.32); }
.beta-scene .prep-repere { stroke: #eef2fb; stroke-width: 2; stroke-dasharray: 4 3; }
.beta-scene .prep-tic { stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .prep-cuivre { fill: none; stroke: #ff9a64; stroke-width: 3; stroke-linejoin: round; }
.beta-scene .prep-cuivre-fond { fill: #1a2742; }
.beta-scene .prep-manche { stroke: #aab5c9; stroke-width: 6; stroke-linecap: round; }
.beta-scene .prep-mousse { fill: #e8c79a; transform-box: fill-box; transform-origin: 50% 100%; transition: transform .8s ease; }
.beta-scene .prep-grumeau { fill: #4a2e1c; }
.beta-scene .actif .prep-suspens { animation: prep-derive 2.4s ease-in-out infinite alternate; }
.beta-scene .prep-cezve-corps { transform: translateY(var(--prep-leve, 0px)); transition: transform .8s ease; }
.beta-scene .prep-feu { transition: opacity .6s ease; }
.beta-scene .prep-flamme { fill: #ff9a64; transform-box: fill-box; transform-origin: 50% 100%; }
.beta-scene .prep-flamme:nth-child(odd) { fill: #ffc46b; }
.beta-scene .prep-bruleur { stroke: #aab5c9; stroke-width: 4; stroke-linecap: round; }
.beta-scene .prep-feu .prep-flamme { animation: prep-flamme .45s ease-in-out infinite alternate; }
.beta-scene .prep-couvercle, .beta-scene .prep-couvercle-p { fill: #aab5c9; stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; }
.beta-scene .prep-couvercle-dome { fill: none; stroke: #aab5c9; stroke-width: 3; }
.beta-scene .prep-tige { stroke: #aab5c9; stroke-width: 3; }
.beta-scene .prep-tamis { fill: #53617c; stroke: #eef2fb; stroke-width: 1.5; stroke-dasharray: 2 2; }
.beta-scene .prep-piston-tige { transition: transform 1.4s ease; }
.beta-scene .prep-axe { fill: #aab5c9; }
.beta-scene .prep-cadran { fill: #121b30; stroke: #aab5c9; stroke-width: 3; }
.beta-scene .prep-bande { fill: none; stroke: var(--beta-lemon,#d9ef59); stroke-width: 7; }
.beta-scene .prep-aiguille { stroke: #ff6b67; stroke-width: 3; stroke-linecap: round; transform-box: view-box; transition: transform 1s ease; }
.beta-scene .prep-secteur { fill: rgba(217,239,89,.18); }
.beta-scene .prep-verre { fill: #121b30; stroke: #c6d3e8; stroke-width: 2; }
.beta-scene .prep-bulbe { fill: #ff6b67; }
.beta-scene .prep-mercure { fill: #ff6b67; transform-box: fill-box; transform-origin: 50% 100%; transition: transform .8s ease; }
.beta-scene .prep-creme { fill: #e8c79a; }
.beta-scene .prep-creme-nitro { fill: #efe3c4; }
.beta-scene .prep-panier { fill: none; stroke: #c6d3e8; stroke-width: 2; stroke-dasharray: 4 2; }
.beta-scene .prep-panier-fort { fill: none; stroke: #c6d3e8; stroke-width: 3; }
.beta-scene .prep-tube { fill: none; stroke: #c6d3e8; stroke-width: 4; stroke-linecap: round; }
.beta-scene .prep-repartiteur { fill: none; stroke: #c6d3e8; stroke-width: 2.5; }
.beta-scene .prep-bec { fill: none; stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; }
.beta-scene .prep-resistance { fill: none; stroke: #ff6b67; stroke-width: 2.5; }
.beta-scene .prep-plaque-chaude { stroke: #ff6b67; stroke-width: 4; stroke-linecap: round; }
.beta-scene .prep-filtre-trait { stroke: #f5f7f8; stroke-width: 3; stroke-dasharray: 3 2; }
.beta-scene .prep-collier { stroke: #6f7d99; stroke-width: 3; }
.beta-scene .prep-brule { fill: rgba(255,107,103,.45); stroke: #ff6b67; stroke-width: 2; }
.beta-scene .prep-soupape { fill: #121b30; stroke: var(--beta-lemon,#d9ef59); stroke-width: 2.5; }
.beta-scene .prep-vapeur { fill: #e8eef8; opacity: .8; }
.beta-scene .prep-gaine { fill: none; stroke: #4e5c86; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .prep-ressort { fill: none; stroke: var(--beta-lemon,#d9ef59); stroke-width: 2.5; }
.beta-scene .prep-levier { stroke: #aab5c9; stroke-width: 6; stroke-linecap: round; }
.beta-scene .prep-serpentin { fill: none; stroke: #ff9a64; stroke-width: 2.5; }
.beta-scene .prep-pompe { fill: #121b30; stroke: var(--beta-lemon,#d9ef59); stroke-width: 2.5; }
.beta-scene .prep-pale { stroke: var(--beta-lemon,#d9ef59); stroke-width: 2.5; }
.beta-scene .prep-helice, .beta-scene .prep-tourbillon { transform-box: view-box; }
.beta-scene .actif .prep-helice { animation: prep-tourne .5s linear infinite; }
.beta-scene .actif .prep-tourbillon { animation: prep-tourne 3s linear infinite; }
.beta-scene .prep-plaque { stroke: #aab5c9; stroke-width: 3; }
.beta-scene .prep-axe-t { fill: none; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .prep-trace { fill: none; stroke: var(--beta-lemon,#d9ef59); stroke-width: 3; stroke-linecap: round; }
.beta-scene .prep-profil { stroke: #ff9a64; }
.beta-scene .prep-douche { stroke: #c6d3e8; stroke-width: 2; stroke-dasharray: 3 3; }
.beta-scene .prep-mouille { fill: #8bdcf3; opacity: .28; transform-box: fill-box; transform-origin: 50% 0%; transition: transform 1s ease; }
.beta-scene .prep-amas { fill: #6f4128; stroke: rgba(17,25,43,.6); stroke-width: 1; }
.beta-scene .prep-aig { stroke: #eef2fb; stroke-width: 1.5; }
.beta-scene .actif .prep-aiguilles { animation: prep-remue .5s ease-in-out infinite alternate; }
.beta-scene .prep-tasseur { fill: #53617c; stroke: #c6d3e8; stroke-width: 2; }
.beta-scene .prep-bouche { fill: rgba(17,25,43,.7); stroke: #ff6b67; stroke-width: 1.5; stroke-dasharray: 3 3; }
.beta-scene .prep-balance { fill: #53617c; }
.beta-scene .prep-tremie { fill: #f3b9ad; opacity: .3; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .prep-meule { fill: #53617c; stroke: #c6d3e8; stroke-width: 1.5; }
.beta-scene .prep-rotation { stroke: var(--beta-lemon,#d9ef59); stroke-width: 2; stroke-dasharray: 6 8; }
.beta-scene .actif .prep-rotation { animation: prep-glisse .6s linear infinite; }
.beta-scene .prep-zone { stroke-width: 4; stroke-linecap: round; }
.beta-scene .prep-z1 { stroke: #ff9a64; } .beta-scene .prep-z2 { stroke: var(--beta-lemon,#d9ef59); } .beta-scene .prep-z3 { stroke: #8bdcf3; }
.beta-scene .prep-tamis-bac { fill: rgba(255,255,255,.04); stroke: #c6d3e8; stroke-width: 2.5; }
.beta-scene .prep-maille { stroke: #eef2fb; stroke-width: 1.5; stroke-dasharray: 2 3; }
.beta-scene .prep-tas { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .8s ease; }
.beta-scene .prep-lame { fill: none; stroke: var(--beta-lemon,#d9ef59); stroke-width: 4; stroke-linecap: round; }
.beta-scene .prep-feutre { stroke: #efe3c4; stroke-width: 5; }
.beta-scene .prep-bouteille { fill: #26334f; stroke: #c9a7ff; stroke-width: 2.5; }
@keyframes prep-bulle { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-16px); opacity: 0; } }
@keyframes prep-flamme { to { transform: scaleY(.72); } }
@keyframes prep-derive { to { transform: translate(4px, -3px); } }
@keyframes prep-tourne { to { transform: rotate(360deg); } }
@keyframes prep-glisse { to { stroke-dashoffset: -14; } }
@keyframes prep-remue { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .beta-scene [class*="prep-"] { animation: none !important; transition: none !important; }
  .beta-process-story .beta-scene .prep-cezve-corps { animation: none !important; }
}
.beta-scene .prep-a-0, .beta-scene .prep-d-0, .beta-scene .prep-a-1, .beta-scene .prep-d-1, .beta-scene .prep-a-2, .beta-scene .prep-d-2, .beta-scene .prep-a-3, .beta-scene .prep-d-3, .beta-scene .prep-a-4, .beta-scene .prep-d-4, .beta-scene .prep-a-5, .beta-scene .prep-d-5 { opacity: 0; transition: opacity .45s ease; }
.beta-process-story[data-story-step="0"] .beta-scene .prep-a-0, .beta-process-story[data-story-step="0"] .beta-scene .prep-d-0 { opacity: 1; }
.beta-process-story[data-story-step="1"] .beta-scene .prep-a-1, .beta-process-story[data-story-step="1"] .beta-scene .prep-d-0, .beta-process-story[data-story-step="1"] .beta-scene .prep-d-1 { opacity: 1; }
.beta-process-story[data-story-step="2"] .beta-scene .prep-a-2, .beta-process-story[data-story-step="2"] .beta-scene .prep-d-0, .beta-process-story[data-story-step="2"] .beta-scene .prep-d-1, .beta-process-story[data-story-step="2"] .beta-scene .prep-d-2 { opacity: 1; }
.beta-process-story[data-story-step="3"] .beta-scene .prep-a-3, .beta-process-story[data-story-step="3"] .beta-scene .prep-d-0, .beta-process-story[data-story-step="3"] .beta-scene .prep-d-1, .beta-process-story[data-story-step="3"] .beta-scene .prep-d-2, .beta-process-story[data-story-step="3"] .beta-scene .prep-d-3 { opacity: 1; }
.beta-process-story[data-story-step="4"] .beta-scene .prep-a-4, .beta-process-story[data-story-step="4"] .beta-scene .prep-d-0, .beta-process-story[data-story-step="4"] .beta-scene .prep-d-1, .beta-process-story[data-story-step="4"] .beta-scene .prep-d-2, .beta-process-story[data-story-step="4"] .beta-scene .prep-d-3, .beta-process-story[data-story-step="4"] .beta-scene .prep-d-4 { opacity: 1; }
.beta-process-story[data-story-step="5"] .beta-scene .prep-a-5, .beta-process-story[data-story-step="5"] .beta-scene .prep-d-0, .beta-process-story[data-story-step="5"] .beta-scene .prep-d-1, .beta-process-story[data-story-step="5"] .beta-scene .prep-d-2, .beta-process-story[data-story-step="5"] .beta-scene .prep-d-3, .beta-process-story[data-story-step="5"] .beta-scene .prep-d-4, .beta-process-story[data-story-step="5"] .beta-scene .prep-d-5 { opacity: 1; }
.beta-process-story[data-story-kind="scene:prep-extraction"][data-story-step="0"] .beta-scene { --prep-r0: 0.6; --prep-r1: 1; --prep-r2: 1; --prep-fine: 1; --prep-rend: 0.171; --prep-bois: 0.3; --prep-bois-c: #d9a46a; --prep-tds: 0.2; }
.beta-process-story[data-story-kind="scene:prep-extraction"][data-story-step="1"] .beta-scene { --prep-r0: 0.3; --prep-r1: 0.7; --prep-r2: 0.95; --prep-fine: 0; --prep-rend: 0.371; --prep-bois: 0.55; --prep-bois-c: #c98a4b; --prep-tds: 0.42; }
.beta-process-story[data-story-kind="scene:prep-extraction"][data-story-step="2"] .beta-scene { --prep-r0: 0.12; --prep-r1: 0.35; --prep-r2: 0.6; --prep-fine: 0; --prep-rend: 0.571; --prep-bois: 0.8; --prep-bois-c: #a0643c; --prep-tds: 0.56; }
.beta-process-story[data-story-kind="scene:prep-extraction"][data-story-step="3"] .beta-scene { --prep-r0: 0.12; --prep-r1: 0.35; --prep-r2: 0.6; --prep-fine: 0; --prep-rend: 0.571; --prep-bois: 0.8; --prep-bois-c: #a0643c; --prep-tds: 0.625; }
.beta-process-story[data-story-kind="scene:prep-extraction"][data-story-step="4"] .beta-scene { --prep-r0: 0; --prep-r1: 0.1; --prep-r2: 1; --prep-fine: 0; --prep-rend: 0.571; --prep-bois: 0.8; --prep-bois-c: #a0643c; --prep-tds: 0.625; }
.beta-process-story[data-story-kind="scene:prep-cezve"][data-story-step="0"] .beta-scene { --prep-liq: 0.62; --prep-liq-c: #7d6a55; --prep-mousse: 0; --prep-feu: 0; --prep-leve: 0px; --prep-tasse: 0; --prep-depot: 0; }
.beta-process-story[data-story-kind="scene:prep-cezve"][data-story-step="1"] .beta-scene { --prep-liq: 0.62; --prep-liq-c: #a0643c; --prep-mousse: 1; --prep-feu: 1; --prep-leve: 0px; --prep-tasse: 0; --prep-depot: 0; }
.beta-process-story[data-story-kind="scene:prep-cezve"][data-story-step="2"] .beta-scene { --prep-liq: 0.62; --prep-liq-c: #a0643c; --prep-mousse: 0.8; --prep-feu: 1; --prep-leve: 0px; --prep-tasse: 0; --prep-depot: 0; }
.beta-process-story[data-story-kind="scene:prep-cezve"][data-story-step="3"] .beta-scene { --prep-liq: 0.15; --prep-liq-c: #a0643c; --prep-mousse: 0.2; --prep-feu: 0; --prep-leve: -60px; --prep-tasse: 0.78; --prep-tasse-c: #7a4a2a; --prep-depot: 1; --prep-creme: 1; --prep-huiles: 1; }
.beta-process-story[data-story-kind="scene:prep-piston"][data-story-step="0"] .beta-scene { --prep-liq: 1; --prep-liq-c: #9c7a55; --prep-piston: 0; --prep-tasse: 0; --prep-chrono: 0deg; }
.beta-process-story[data-story-kind="scene:prep-piston"][data-story-step="1"] .beta-scene { --prep-liq: 1; --prep-liq-c: #7a4a2a; --prep-piston: 0; --prep-tasse: 0; --prep-chrono: 288deg; }
.beta-process-story[data-story-kind="scene:prep-piston"][data-story-step="2"] .beta-scene { --prep-liq: 1; --prep-liq-c: #7a4a2a; --prep-piston: 1; --prep-tasse: 0; --prep-chrono: 288deg; }
.beta-process-story[data-story-kind="scene:prep-piston"][data-story-step="3"] .beta-scene { --prep-liq: 0.5; --prep-liq-c: #7a4a2a; --prep-piston: 1; --prep-tasse: 0.78; --prep-tasse-c: #7a4a2a; --prep-depot: 1; --prep-huiles: 1; --prep-chrono: 288deg; }
.beta-process-story[data-story-kind="scene:prep-piston"][data-story-step="4"] .beta-scene { --prep-liq: 0.5; --prep-liq-c: #5a3420; --prep-piston: 1; --prep-tasse: 0.78; --prep-tasse-c: #7a4a2a; --prep-depot: 1; --prep-huiles: 1; --prep-chrono: 350deg; }
.beta-process-story[data-story-kind="scene:prep-filtre"][data-story-step="0"] .beta-scene { --prep-col: 0.2; --prep-carafe: 0; --prep-bloom: 1.07; --prep-th0: 0.95; --prep-th1: 0.72; }
.beta-process-story[data-story-kind="scene:prep-filtre"][data-story-step="1"] .beta-scene { --prep-col: 0.85; --prep-carafe: 0.25; --prep-bloom: 1; --prep-th0: 0.95; --prep-th1: 0.72; }
.beta-process-story[data-story-kind="scene:prep-filtre"][data-story-step="2"] .beta-scene { --prep-col: 0.55; --prep-carafe: 0.45; --prep-bloom: 1; --prep-th0: 0.95; --prep-th1: 0.72; }
.beta-process-story[data-story-kind="scene:prep-filtre"][data-story-step="3"] .beta-scene { --prep-col: 0.9; --prep-carafe: 0.6; --prep-bloom: 1; --prep-th0: 0.95; --prep-th1: 0.72; }
.beta-process-story[data-story-kind="scene:prep-filtre"][data-story-step="4"] .beta-scene { --prep-col: 0; --prep-carafe: 0.82; --prep-bloom: 1; --prep-th0: 0.6; --prep-th1: 0.45; }
.beta-process-story[data-story-kind="scene:prep-percolateur"][data-story-step="0"] .beta-scene { --prep-pot: 0.42; --prep-pot-c: #8bdcf3; --prep-elec: 0; --prep-res: 0.8; }
.beta-process-story[data-story-kind="scene:prep-percolateur"][data-story-step="1"] .beta-scene { --prep-pot: 0.42; --prep-pot-c: #c98a4b; --prep-elec: 0; --prep-res: 0.8; }
.beta-process-story[data-story-kind="scene:prep-percolateur"][data-story-step="2"] .beta-scene { --prep-pot: 0.42; --prep-pot-c: #a0643c; --prep-elec: 0; --prep-res: 0.8; }
.beta-process-story[data-story-kind="scene:prep-percolateur"][data-story-step="3"] .beta-scene { --prep-pot: 0.42; --prep-pot-c: #5a3420; --prep-elec: 0; --prep-res: 0.8; }
.beta-process-story[data-story-kind="scene:prep-percolateur"][data-story-step="4"] .beta-scene { --prep-pot: 0.42; --prep-pot-c: #5a3420; --prep-elec: 0.7; --prep-res: 0.25; }
.beta-process-story[data-story-kind="scene:prep-siphon"][data-story-step="0"] .beta-scene { --prep-bas: 0.72; --prep-bas-c: #8bdcf3; --prep-haut: 0; --prep-haut-c: #8bdcf3; --prep-feu: 1; --prep-aig: -10deg; }
.beta-process-story[data-story-kind="scene:prep-siphon"][data-story-step="1"] .beta-scene { --prep-bas: 0.14; --prep-bas-c: #8bdcf3; --prep-haut: 0.8; --prep-haut-c: #8bdcf3; --prep-feu: 1; --prep-aig: 42deg; }
.beta-process-story[data-story-kind="scene:prep-siphon"][data-story-step="2"] .beta-scene { --prep-bas: 0.14; --prep-bas-c: #8bdcf3; --prep-haut: 0.8; --prep-haut-c: #a0643c; --prep-feu: 1; --prep-aig: 38deg; }
.beta-process-story[data-story-kind="scene:prep-siphon"][data-story-step="3"] .beta-scene { --prep-bas: 0.7; --prep-bas-c: #a0643c; --prep-haut: 0; --prep-haut-c: #a0643c; --prep-feu: 0; --prep-aig: -40deg; }
.beta-process-story[data-story-kind="scene:prep-moka"][data-story-step="0"] .beta-scene { --prep-chaud: 0.78; --prep-haut: 0; --prep-feu: 0; --prep-aig: -90.0deg; }
.beta-process-story[data-story-kind="scene:prep-moka"][data-story-step="1"] .beta-scene { --prep-chaud: 0.55; --prep-haut: 0.12; --prep-feu: 1; --prep-aig: -63.0deg; }
.beta-process-story[data-story-kind="scene:prep-moka"][data-story-step="2"] .beta-scene { --prep-chaud: 0.25; --prep-haut: 0.7; --prep-feu: 1; --prep-aig: -63.0deg; }
.beta-process-story[data-story-kind="scene:prep-moka"][data-story-step="3"] .beta-scene { --prep-chaud: 0.06; --prep-haut: 0.82; --prep-feu: 1; --prep-aig: -57.6deg; }
.beta-process-story[data-story-kind="scene:prep-pression"][data-story-step="0"] .beta-scene { --prep-aig: -63.8deg; --prep-tasse: 0.7; --prep-creme: 0; }
.beta-process-story[data-story-kind="scene:prep-pression"][data-story-step="1"] .beta-scene { --prep-aig: 45.0deg; --prep-tasse: 0.7; --prep-creme: 1; }
.beta-process-story[data-story-kind="scene:prep-pression"][data-story-step="2"] .beta-scene { --prep-aig: 45.0deg; --prep-tasse: 0.7; --prep-creme: 1; }
.beta-process-story[data-story-kind="scene:prep-pression"][data-story-step="3"] .beta-scene { --prep-aig: 45.0deg; --prep-tasse: 0.7; --prep-creme: 1; }
.beta-process-story[data-story-kind="scene:prep-palet"][data-story-step="0"] .beta-scene { --prep-lit: 1; --prep-mouille: 0; --prep-shot: 0; }
.beta-process-story[data-story-kind="scene:prep-palet"][data-story-step="1"] .beta-scene { --prep-lit: 0.84; --prep-mouille: 0.45; --prep-shot: 0; }
.beta-process-story[data-story-kind="scene:prep-palet"][data-story-step="2"] .beta-scene { --prep-lit: 0.78; --prep-mouille: 1; --prep-shot: 0.4; }
.beta-process-story[data-story-kind="scene:prep-palet"][data-story-step="3"] .beta-scene { --prep-lit: 0.78; --prep-mouille: 1; --prep-shot: 0.55; }
.beta-process-story[data-story-kind="scene:prep-palet"][data-story-step="4"] .beta-scene { --prep-lit: 0.78; --prep-mouille: 1; --prep-shot: 0.85; }
.beta-process-story[data-story-kind="scene:prep-mouture"][data-story-step="0"] .beta-scene { --prep-t0: 0; --prep-t1: 0.1; --prep-t2: 0.05; }
.beta-process-story[data-story-kind="scene:prep-mouture"][data-story-step="1"] .beta-scene { --prep-t0: 0.15; --prep-t1: 0.75; --prep-t2: 0.35; }
.beta-process-story[data-story-kind="scene:prep-mouture"][data-story-step="2"] .beta-scene { --prep-t0: 0.15; --prep-t1: 0.75; --prep-t2: 0.6; }
.beta-process-story[data-story-kind="scene:prep-mouture"][data-story-step="3"] .beta-scene { --prep-t0: 0.6; --prep-t1: 0.4; --prep-t2: 0.8; }
.beta-process-story[data-story-kind="scene:prep-mouture"][data-story-step="4"] .beta-scene { --prep-t0: 0.15; --prep-t1: 0.75; --prep-t2: 0.45; }
.beta-process-story[data-story-kind="scene:prep-froid"][data-story-step="0"] .beta-scene { --prep-kyoto: 0.45; --prep-res: 0.55; --prep-seau: 0.82; --prep-seau-c: #9c7a55; --prep-conc: 0; --prep-verre: 0; --prep-fut: 0; }
.beta-process-story[data-story-kind="scene:prep-froid"][data-story-step="1"] .beta-scene { --prep-kyoto: 0.45; --prep-res: 0.55; --prep-seau: 0.82; --prep-seau-c: #a0643c; --prep-conc: 0; --prep-verre: 0; --prep-fut: 0; }
.beta-process-story[data-story-kind="scene:prep-froid"][data-story-step="2"] .beta-scene { --prep-kyoto: 0.45; --prep-res: 0.55; --prep-seau: 0.82; --prep-seau-c: #a0643c; --prep-conc: 0; --prep-verre: 0; --prep-fut: 0; }
.beta-process-story[data-story-kind="scene:prep-froid"][data-story-step="3"] .beta-scene { --prep-kyoto: 0.45; --prep-res: 0.55; --prep-seau: 0.3; --prep-seau-c: #a0643c; --prep-conc: 0.76; --prep-conc-c: #a0643c; --prep-verre: 0; --prep-fut: 0; }
.beta-process-story[data-story-kind="scene:prep-froid"][data-story-step="4"] .beta-scene { --prep-kyoto: 0.45; --prep-res: 0.55; --prep-seau: 0.3; --prep-seau-c: #a0643c; --prep-conc: 0.5; --prep-conc-c: #a0643c; --prep-verre: 0.8; --prep-fut: 0.7; }

.beta-scene .prep-geste { transform-box: view-box; transition: transform 1.1s ease; }
.beta-scene .prep-sucre { fill: #f5f7f8; stroke: #c6cbd2; stroke-width: .8; }
.beta-scene .prep-compte { opacity: 0; }
.beta-scene .prep-bouffee { fill: #e8eef8; opacity: .85; }
@keyframes prep-remplit { 0% { transform: scaleY(.04); } 72%, 100% { transform: scaleY(1); } }
@keyframes prep-cezve-hors { 0%, 8% { transform: translate(0, 0); } 22%, 58% { transform: translate(-10px, -48px); } 72%, 100% { transform: translate(0, 0); } }
@keyframes prep-feu-hors { 0%, 12% { opacity: 1; } 20%, 60% { opacity: .06; } 70%, 100% { opacity: 1; } }
@keyframes prep-mousse-hors { 0%, 18% { transform: scaleY(1); } 58% { transform: scaleY(.3); } 100% { transform: scaleY(1); } }
@keyframes prep-texte-hors { 0%, 14% { opacity: 0; } 22%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes prep-compte { 0%, 31% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes prep-coupe-feu { 0%, 40% { opacity: 1; } 46%, 94% { opacity: .05; } 100% { opacity: 1; } }
@keyframes prep-coupe-gar { 0%, 38% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes prep-coupe-txt { 0%, 42% { opacity: 0; } 48%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes prep-coupe-aig { 0%, 44% { transform: rotate(-57.6deg); } 62%, 94% { transform: rotate(-90deg); } 100% { transform: rotate(-57.6deg); } }
@keyframes prep-monte-atm { 0% { transform: rotate(-60deg); } 80%, 100% { transform: rotate(-10deg); } }
.beta-scene .prep-goutte { fill: #8bdcf3; opacity: .9; }
.beta-scene .prep-defaut-zone { fill: rgba(255,107,103,.18); stroke: #ff6b67; stroke-width: 2; stroke-dasharray: 5 3; }
.beta-scene .prep-cuivre-el { fill: none; stroke: #ff9a64; stroke-width: 4; stroke-linecap: round; }
.beta-scene .prep-cuivre-txt { fill: #ff9a64; }
/* Encart scientifique : valeurs et noms en 11 px, pour que « 1,15-1,35 % » tienne à
   droite de sa barre et qu'un nom ne touche pas la colonne voisine (debout, une
   colonne fait 116 unités). */
.beta-process-story[data-story-kind^="scene:prep-"] .beta-scene text.valeur,
.beta-process-story[data-story-kind^="scene:prep-"] .beta-scene .poste:has(> rect.science) text.petit:not(.molecule) { font-size: 11px; }
.beta-scene .prep-plage { fill: rgba(217,239,89,.35); stroke: var(--beta-lemon,#d9ef59); stroke-width: 1.5; }
.beta-scene .prep-cellule-mid { fill: #a0643c; }
.beta-scene .prep-cellule-dark { fill: #4a2e1c; }
.beta-scene .prep-cellule-pale { fill: #e0b07a; }
.beta-scene .prep-ecran { fill: #0b1220; stroke: #59647a; stroke-width: 1; }
.beta-scene .prep-ecran-txt { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .prep-ecran-barre { fill: rgba(217,239,89,.55); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(.85); }
.beta-scene .prep-arret { opacity: 0; }
.beta-scene .prep-fines-txt { fill: #e0b07a; }
.beta-scene .prep-filet { stroke: #c98a4b; stroke-width: 3; stroke-dasharray: 6 5; stroke-linecap: round; }
.beta-scene .prep-filet-eau { stroke: #8bdcf3; stroke-width: 2; opacity: .75; }
@keyframes prep-filet { to { stroke-dashoffset: -22; } }
@keyframes prep-coule { 0%, 58% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes prep-shot { 0% { transform: scaleY(.45); } 58%, 100% { transform: scaleY(.85); } }
@keyframes prep-ecran-barre { 0% { transform: scaleX(0); opacity: 1; } 58% { transform: scaleX(1); opacity: 1; } 62%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes prep-arret { 0%, 60% { opacity: 0; } 64%, 100% { opacity: 1; } }
.beta-scene .prep-goulotte { fill: none; stroke: #4e5c86; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.beta-scene .prep-ecrase { fill: rgba(255,154,100,.35); stroke: #ff9a64; stroke-width: 1.5; }
.beta-scene .prep-lame-g { transform-box: view-box; }
.beta-scene .actif .prep-lame-g { animation: prep-lame .35s linear infinite; }
@keyframes prep-lame { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.beta-scene .prep-trotteuse { transform-box: view-box; }
.beta-scene .actif .prep-trotteuse { animation: prep-tourne 2s linear infinite; }
.beta-scene .prep-lent { fill: #7ee0a8; stroke: #11192b; stroke-width: .8; }
.beta-scene .prep-cercle { stroke: #6f7d99; stroke-width: 3; }
.beta-scene .prep-azote-txt { fill: #c9a7ff; }
.beta-scene .prep-gaine.fine { stroke-width: 3; stroke: #8f78c9; }
.beta-scene .prep-bulle-fine { fill: #efe3c4; }
.beta-scene .actif .prep-cascade circle { animation: prep-cascade 1.6s linear infinite; }
.beta-scene .actif .prep-cascade circle:nth-child(2n) { animation-delay: -.8s; }
@keyframes prep-cascade { from { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(14px); opacity: 0; } }
@keyframes prep-dilue { 0% { transform: scaleY(.05); fill: #5a3420; } 40% { transform: scaleY(.38); fill: #5a3420; } 85%, 100% { transform: scaleY(.76); fill: #a0643c; } }
.beta-scene .prep-bras, .beta-scene .prep-ressort-g, .beta-scene .prep-piston-l { transform-box: view-box; }
@keyframes prep-levier { 0%, 6% { transform: rotate(0deg); } 28%, 38% { transform: rotate(75deg); } 92%, 100% { transform: rotate(0deg); } }
@keyframes prep-ressort { 0%, 6% { transform: scaleY(1); } 28%, 38% { transform: scaleY(.55); } 92%, 100% { transform: scaleY(1); } }
@keyframes prep-piston-l { 0%, 6% { transform: translateY(0); } 28%, 38% { transform: translateY(var(--prep-course)); } 92%, 100% { transform: translateY(0); } }
.beta-process-story[data-story-kind="scene:prep-piston"][data-story-step="0"] .beta-scene .prep-remplit { animation: prep-remplit 5.2s linear infinite; }
.beta-process-story[data-story-kind="scene:prep-piston"][data-story-step="3"] .beta-scene .prep-geste { transform: var(--prep-geste-on); }
.beta-process-story[data-story-kind="scene:prep-cezve"][data-story-step="2"] .beta-scene .prep-cezve-corps { animation: prep-cezve-hors 3s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:prep-cezve"][data-story-step="2"] .beta-scene .prep-feu { animation: prep-feu-hors 3s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:prep-cezve"][data-story-step="2"] .beta-scene .prep-mousse { animation: prep-mousse-hors 3s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:prep-cezve"][data-story-step="2"] .beta-scene .prep-hors-feu { animation: prep-texte-hors 3s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:prep-cezve"][data-story-step="2"] .beta-scene .prep-compte { animation: prep-compte 9s linear infinite; }
.beta-process-story[data-story-kind="scene:prep-cezve"][data-story-step="2"] .beta-scene .prep-compte-1 { animation-delay: 3s; }
.beta-process-story[data-story-kind="scene:prep-cezve"][data-story-step="2"] .beta-scene .prep-compte-2 { animation-delay: 6s; }
.beta-process-story[data-story-kind="scene:prep-moka"][data-story-step="3"] .beta-scene .prep-feu { animation: prep-coupe-feu 4.6s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:prep-moka"][data-story-step="3"] .beta-scene .prep-gargouille { animation: prep-coupe-gar 4.6s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:prep-moka"][data-story-step="3"] .beta-scene .prep-gargouille circle { animation: prep-bulle .7s ease-in infinite; }
.beta-process-story[data-story-kind="scene:prep-moka"][data-story-step="3"] .beta-scene .prep-coupe-txt { animation: prep-coupe-txt 4.6s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:prep-moka"][data-story-step="3"] .beta-scene .prep-aiguille { animation: prep-coupe-aig 4.6s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:prep-siphon"][data-story-step="0"] .beta-scene .prep-aiguille { animation: prep-monte-atm 5.2s ease-out infinite; }
.beta-process-story[data-story-kind="scene:prep-pression"][data-story-step="1"] .beta-scene .prep-bras { animation: prep-levier 4.4s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:prep-pression"][data-story-step="1"] .beta-scene .prep-ressort-g { animation: prep-ressort 4.4s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:prep-pression"][data-story-step="1"] .beta-scene .prep-piston-l { animation: prep-piston-l 4.4s ease-in-out infinite; }
.beta-process-story[data-story-kind="scene:prep-palet"][data-story-step="4"] .beta-scene .prep-coule { animation: prep-coule 5.2s linear infinite; }
.beta-process-story[data-story-kind="scene:prep-palet"][data-story-step="4"] .beta-scene .prep-filet { animation: prep-filet .5s linear infinite; }
.beta-process-story[data-story-kind="scene:prep-palet"][data-story-step="4"] .beta-scene .prep-shot-liq { animation: prep-shot 5.2s linear infinite; }
.beta-process-story[data-story-kind="scene:prep-palet"][data-story-step="4"] .beta-scene .prep-ecran-barre { animation: prep-ecran-barre 5.2s linear infinite; }
.beta-process-story[data-story-kind="scene:prep-palet"][data-story-step="4"] .beta-scene .prep-arret { animation: prep-arret 5.2s linear infinite; }
.beta-process-story[data-story-kind="scene:prep-froid"][data-story-step="3"] .beta-scene .prep-dilue { animation: prep-dilue 5.2s ease-in-out infinite; }

/* ── scenes_process_attente ── */

/* ── Les huit pages en attente (scenes_process_attente.py) ── */
.beta-scene .pat-cadre { fill: rgba(255,255,255,.03); stroke: #59647a; stroke-width: 1.5; }
.beta-scene .pat-dessin * { vector-effect: non-scaling-stroke; }
.beta-scene .pat-fondu { transition: opacity .6s ease; }
.beta-scene .pat-cache { opacity: 0 !important; }
.beta-scene .pat-chemin { fill: none; stroke: none; }
.beta-scene .pat-pt { pointer-events: none; }
.beta-scene .pat-renvoi { stroke: #7f8ca8; stroke-width: 1; stroke-dasharray: 2 3; }
/* Le fruit et le grain */
.beta-scene .pat-peau { fill: #d9434d; transition: r .9s ease, fill .9s ease; }
.beta-scene .pat-chair { fill: rgba(255,107,103,.55); transition: r .9s ease, fill .9s ease; }
.beta-scene .pat-cerisee { fill: #d9434d; transition: r 1s ease, cy 1s ease, fill 1s ease; }
.beta-scene .pat-graine { fill: #f0dda4; stroke: #dfc686; stroke-width: 1.5; }
.beta-scene .pat-graine.pat-muc { stroke: #ff9a64; stroke-width: 4; transition: stroke-width .6s ease; }
.beta-scene .pat-gros .pat-graine.pat-muc { stroke-width: 7; }
.beta-scene .pat-fente { stroke: #c9b27a; stroke-width: 1.4; }
.beta-scene .pat-sucre { fill: #ffb45d; opacity: .7; }
.beta-scene .pat-luit .pat-sucre { animation: pat-luit 1.6s ease-in-out infinite; }
@keyframes pat-luit { 50% { opacity: 1; } }
.beta-scene .pat-g { fill: #f0dda4; stroke: #dfc686; stroke-width: 1.2; transition: fill .6s ease, stroke .6s ease, stroke-width .6s ease; }
.beta-scene .pat-g.pat-muc { stroke: #ff9a64; stroke-width: 3.5; }
.beta-scene .pat-g.pat-mi { stroke: #ff9a64; stroke-width: 3; stroke-dasharray: 3 4; animation: pat-mi 1.8s ease-in-out infinite; }
@keyframes pat-mi { 50% { stroke-opacity: .4; } }
.beta-scene .pat-morceau { fill: #ff6b67; opacity: .75; }
.beta-scene .pat-g.pat-seche { stroke: #e8b04a; stroke-width: 3; }
.beta-scene .pat-g.pat-vert { fill: #7ee0a8; stroke: #5fae7c; stroke-width: 1.2; }
.beta-scene .pat-halo { fill: none; stroke: #ff9a64; stroke-width: 16; transition: stroke-width .8s ease, stroke .8s ease; }
.beta-scene .pat-halo.pat-varie { animation: pat-varie 3.6s ease-in-out infinite; }
@keyframes pat-varie { 0%, 100% { stroke-width: 3px; } 50% { stroke-width: 18px; } }
.beta-scene .pat-halo.pat-seche { stroke: #e8b04a; }
.beta-scene .pat-coque { fill: #f0dda4; stroke: #dfc686; stroke-width: 2; }
/* La cerise qui s'ouvre */
.beta-scene .pat-moitie { transition: opacity .6s ease; transform-box: fill-box; }
.beta-scene .pat-gauche { transform-origin: right center; }
.beta-scene .pat-droite { transform-origin: left center; }
.beta-scene .pat-gauche.pat-ouvre { animation: pat-ouvre-g 2.8s ease-in infinite; }
.beta-scene .pat-droite.pat-ouvre { animation: pat-ouvre-d 2.8s ease-in infinite; }
@keyframes pat-ouvre-g { 0%, 25% { transform: none; opacity: 1; } 85% { transform: translate(-24px, 40px) rotate(-20deg); opacity: .25; } 100% { transform: translate(-24px, 40px) rotate(-20deg); opacity: 0; } }
@keyframes pat-ouvre-d { 0%, 25% { transform: none; opacity: 1; } 85% { transform: translate(24px, 40px) rotate(20deg); opacity: .25; } 100% { transform: translate(24px, 40px) rotate(20deg); opacity: 0; } }
.beta-scene .pat-moitie.pat-parti { opacity: 0; }
/* Soleil, vapeur, séchage */
.beta-scene .pat-astre { fill: #ffe27a; }
.beta-scene .pat-rayon { stroke: #ffe27a; stroke-width: 2; stroke-linecap: round; }
.beta-scene .pat-soleil { opacity: .22; transition: opacity .6s ease; }
.beta-scene .pat-soleil.pat-brille { opacity: 1; }
.beta-scene .pat-brille .pat-rayon { animation: pat-rayonne 2s ease-in-out infinite; }
@keyframes pat-rayonne { 50% { opacity: .35; } }
.beta-scene .pat-sol { stroke: #8f98ad; stroke-width: 2; }
.beta-scene .pat-lit { stroke: #aab5c9; stroke-width: 3; fill: none; }
.beta-scene .pat-grille { stroke: #aab5c9; stroke-width: 1.5; stroke-dasharray: 3 3; }
.beta-scene .pat-jour { fill: #2a3248; transition: fill .6s ease; }
.beta-scene .pat-defile .pat-jour { animation: pat-jour 2.6s linear infinite; }
@keyframes pat-jour { 0%, 60%, 100% { fill: #2a3248; } 20% { fill: #d9ef59; } }
.beta-scene .pat-plein .pat-jour { fill: #d9ef59; }
/* Cuves, eau, tuyaux */
.beta-scene .pat-paroi { fill: rgba(26,39,66,.6); stroke: #aab5c9; stroke-width: 3; }
.beta-scene .pat-paroi-pleine { fill: rgba(26,39,66,.6); stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .pat-courant { stroke: #8bdcf3; stroke-width: 2; stroke-dasharray: 14 10; opacity: .6; }
.beta-scene .pat-coule .pat-courant { animation: pat-courant 1.2s linear infinite; }
@keyframes pat-courant { to { stroke-dashoffset: -24; } }
.beta-scene .pat-tube { fill: none; stroke: #4e5c86; stroke-width: 6; stroke-linecap: round; }
.beta-scene .pat-couvercle { fill: #59647a; stroke: #aab5c9; stroke-width: 1.5; transition: transform 1s ease; transform-box: fill-box; transform-origin: left center; }
.beta-scene .pat-verre { fill: rgba(139,220,243,.12); stroke: #aab5c9; stroke-width: 1.6; }
.beta-scene .pat-culture { fill: #7ee0a8; }
.beta-scene .pat-veste { fill: none; stroke: #ff6b67; stroke-width: 6; }
.beta-scene .pat-veste.pat-choc { animation: pat-choc 2.4s steps(1, end) infinite; }
@keyframes pat-choc { 0% { stroke: #ff6b67; } 50% { stroke: #8bdcf3; } }
.beta-scene .pat-bainchoc { fill: #ff6b67; opacity: .3; animation: pat-bainchoc 2.4s steps(1, end) infinite; }
@keyframes pat-bainchoc { 0% { fill: #ff6b67; } 50% { fill: #8bdcf3; } }
.beta-scene .pat-bulbe { fill: #ff6b67; }
.beta-scene .pat-mercure { fill: #ff6b67; transform-box: fill-box; transform-origin: center bottom; }
.beta-scene .pat-thermo .pat-mercure { animation: pat-mercure 2.4s steps(1, end) infinite; }
@keyframes pat-mercure { 0% { transform: scaleY(.92); fill: #ff6b67; } 50% { transform: scaleY(.18); fill: #8bdcf3; } }
.beta-scene .pat-piste { fill: #2a3248; stroke: #59647a; stroke-width: 1.4; transition: fill .5s ease; }
.beta-scene .pat-piste.pat-allume { fill: #3d4a2a; stroke: #d9ef59; }
.beta-scene .pat-bouton { fill: #aab5c9; transition: cx .5s ease, fill .5s ease; }
.beta-scene .pat-allume + .pat-bouton { fill: #d9ef59; }
/* Repères, flèches, axes */
.beta-scene .pat-fleche { stroke: #7f8ca8; stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
.beta-scene .pat-axe { stroke: #7f8ca8; stroke-width: 1.6; fill: none; }
.beta-scene .pat-case { fill: #59647a; }
.beta-scene .pat-piste-ligne { stroke: #59647a; stroke-width: 3; stroke-linecap: round; }
.beta-scene .pat-curseur { fill: #d9ef59; }
.beta-scene .pat-curseur.pat-peu { animation: pat-peu 2.4s ease-in-out infinite; transform-box: fill-box; }
.beta-scene .pat-curseur.pat-beaucoup { animation: pat-beaucoup 2.4s ease-in-out infinite; transform-box: fill-box; }
@keyframes pat-peu { 50% { transform: translateX(4px); } }
@keyframes pat-beaucoup { 25% { transform: translateX(-58px); } 75% { transform: translateX(58px); } }
.beta-scene .pat-support { fill: none; stroke: #59647a; stroke-width: 2.4; stroke-linecap: round; animation: pat-support 2.4s steps(1, end) infinite; }
@keyframes pat-support { 0% { stroke: #d9ef59; } 25% { stroke: #59647a; } }
.beta-scene .pat-accolade { fill: none; stroke: #d9ef59; stroke-width: 1.6; }
.beta-scene .pat-bande { fill: #d9ef59; transition: y .8s ease, height .8s ease; }
/* Après le séchage */
.beta-scene .pat-sac { fill: rgba(240,221,164,.10); stroke: #c9b27a; stroke-width: 2; }
.beta-scene .pat-cadran { fill: none; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .pat-aiguille { stroke: #d9ef59; stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; transform-origin: center bottom; }
.beta-scene .pat-aiguille.pat-tourne { animation: pat-aiguille 4s linear infinite; }
@keyframes pat-aiguille { to { transform: rotate(360deg); } }
.beta-scene .pat-bol { fill: rgba(243,245,250,.08); stroke: #f3f5fa; stroke-width: 1.8; }
.beta-scene .pat-anse { fill: none; stroke: #f3f5fa; stroke-width: 1.8; }
.beta-scene .pat-tasse { transform-box: fill-box; transform-origin: center; }
.beta-scene .pat-tasse.pat-pulse { animation: pat-pulse 1.6s ease-in-out infinite; }
@keyframes pat-pulse { 50% { transform: scale(1.12); } }
.beta-scene .pat-tremie { fill: #f3b9ad; opacity: .8; }
.beta-scene .pat-tas { fill: #7ee0a8; opacity: .7; transition: height .8s ease, y .8s ease; }
/* La frise */
.beta-scene .pat-mortier { fill: rgba(170,181,201,.18); stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .pat-pilon { fill: #59647a; stroke: #aab5c9; stroke-width: 1.5; transform-box: fill-box; }
.beta-scene .pat-pilon.pat-pile { animation: pat-pile 1.2s ease-in-out infinite; }
@keyframes pat-pile { 50% { transform: translateY(30px); } }
.beta-scene .pat-roue-cercle { fill: none; stroke: #8bdcf3; stroke-width: 3; }
.beta-scene .pat-pale { stroke: #8bdcf3; stroke-width: 2.4; }
.beta-scene .pat-tourne-roue { transform-box: fill-box; transform-origin: center; animation: pat-roue 5s linear infinite; }
@keyframes pat-roue { to { transform: rotate(360deg); } }
.beta-scene .pat-tambour { fill: #1a2742; stroke: #d9ef59; stroke-width: 3; }
.beta-scene .pat-maconne { fill: rgba(26,39,66,.6); stroke: #c8b08a; stroke-width: 4; stroke-dasharray: 10 3; }
.beta-scene .pat-case-cadre { fill: rgba(255,255,255,.03); stroke: #59647a; stroke-width: 1.2; }
.beta-scene .pat-insecte { fill: #20160f; stroke: #f3f5fa; stroke-width: .8; }
.beta-scene .pat-pullule .pat-insecte { animation: pat-pullule 2.4s ease-in-out infinite; }
@keyframes pat-pullule { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.beta-scene .pat-croix { stroke: #ff6b67; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.beta-scene .pat-colonne { fill: #202c48; stroke: #aab5c9; stroke-width: 3; }
.beta-scene .pat-rotor { fill: #1b2742; stroke: #d9ef59; stroke-width: 2; }
.beta-scene .pat-nervure { stroke: #d9ef59; stroke-width: 2.4; }
.beta-scene .pat-nervures.pat-monte { animation: pat-monte .8s linear infinite; }
@keyframes pat-monte { to { transform: translateY(-14px); } }
.beta-scene .pat-pollue { fill: #ff9a64; opacity: .8; transition: width 1.2s ease; }
.beta-scene .pat-bain { fill: rgba(139,220,243,.14); stroke: #aab5c9; stroke-width: 2; }
.beta-scene .pat-cone { fill: none; stroke: #f3f5fa; stroke-width: 1.8; stroke-dasharray: 3 3; }
.beta-scene .pat-masse-cone { fill: rgba(240,221,164,.55); transform-box: fill-box; transform-origin: center bottom; }
.beta-scene .pat-masse-cone.pat-affaisse { animation: pat-affaisse 4s ease-in-out infinite; }
@keyframes pat-affaisse { 0%, 15% { transform: none; } 70%, 100% { transform: scaleY(.5); } }
.beta-scene .pat-jauge-fond { fill: #2a3248; }
.beta-scene .pat-duree { fill: #d9ef59; transform-box: fill-box; transform-origin: left center; transform: scaleX(1); }
.beta-scene .pat-duree.pat-court { animation: pat-duree 4s linear infinite; }
@keyframes pat-duree { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.beta-scene .pat-repere { stroke: #d9ef59; stroke-width: 1.6; stroke-dasharray: 6 4; }
/* Les proportions */
.beta-scene .pat-masse { fill: rgba(240,221,164,.10); stroke: #59647a; stroke-width: 1.6; transition: fill .6s ease; }
.beta-scene .pat-masse.pat-allume { fill: rgba(240,221,164,.26); stroke: #f0dda4; }
.beta-scene .pat-texture { stroke: rgba(240,221,164,.25); stroke-width: 1; stroke-dasharray: 8 6; }
.beta-scene .pat-micro { fill: #d9ef59; }
.beta-scene .pat-anneau { fill: none; stroke: #d9ef59; stroke-width: 1.6; opacity: .35; transform-box: fill-box; transform-origin: center; }
.beta-scene .pat-anneau.pat-pulse { opacity: 1; animation: pat-pulse 1.6s ease-in-out infinite; }
.beta-scene .pat-sonde { stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; }
.beta-scene .pat-quai { fill: #59647a; }
.beta-scene .pat-fosse { fill: none; stroke: #ff6b67; stroke-width: 2.4; stroke-dasharray: 5 4; }
.beta-scene .pat-boule { fill: #f0dda4; stroke: #dfc686; stroke-width: 2; transition: stroke .6s ease; }
.beta-scene .pat-boule.pat-sauf { stroke: #7ee0a8; stroke-width: 4; }
@media (prefers-reduced-motion: reduce) {
  .beta-scene [class*="pat-"] { animation: none !important; }
  .beta-scene .pat-gauche.pat-ouvre { transform: translate(-14px, 10px); }
  .beta-scene .pat-droite.pat-ouvre { transform: translate(14px, 10px); }
  .beta-scene .pat-halo.pat-varie { stroke-width: 9px; }
  .beta-scene .pat-curseur.pat-beaucoup { transform: translateX(40px); }
  .beta-scene .pat-masse-cone.pat-affaisse { transform: scaleY(.5); }
  .beta-scene .pat-thermo .pat-mercure { transform: scaleY(.18); fill: #8bdcf3; }
  .beta-scene .pat-veste.pat-choc { stroke: #8bdcf3; }
}

/* ── scenes_reglementation ── */

/* ── scenes_reglementation : la chaîne, le paquet, le texte ── */
.beta-scene .regl-fond { fill: rgba(255,255,255,.03); }
.beta-scene .regl-cadre { fill: rgba(255,255,255,.035); stroke: #53617c; stroke-width: 1.5; transition: stroke .4s ease, stroke-width .4s ease, fill .4s ease; }
.beta-scene .regl-ici .regl-cadre { stroke: var(--beta-lemon,#d9ef59); stroke-width: 3; fill: rgba(217,239,89,.05); }
.beta-scene .regl-lib { fill: #eef2fb; font: 700 12.5px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-scene .regl-lib2 { fill: #aab3c9; font: 500 11.5px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-scene .etroit .regl-lib2 { font-size: 12.5px; }
.beta-scene .regl-leg { font-size: 11px; }
.beta-scene .etroit .regl-leg { font-size: 12px; }
.beta-scene .regl-centre { text-anchor: middle; }
.beta-scene .regl-route { fill: none; stroke: #aab5c9; stroke-width: 2; stroke-dasharray: 2 6; opacity: .6; }
.beta-scene .regl-objet { transition: transform .9s ease; }
.beta-scene .regl-pastille { stroke: none; }
/* Les niveaux de texte : Union, France, pays d'origine, privé ; les autorités. */
.beta-scene .regl-ue { fill: #8bdcf3; }
.beta-scene .regl-fr { fill: #d9ef59; }
.beta-scene .regl-or { fill: #ff9a64; }
.beta-scene .regl-pr { fill: #c9a7ff; }
.beta-scene .regl-non { fill: #ff6b67; }
.beta-scene .regl-auto { fill: #121b30; stroke: #eef2fb; stroke-width: 1.2; }
.beta-scene .regl-retrait { fill: #121b30; stroke: #59647a; stroke-width: 1.2; stroke-dasharray: 3 2; }
.beta-scene .regl-badge-txt { fill: #0b0f1e; font: 700 10.5px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-scene .regl-badge-txt.regl-t-auto { fill: #eef2fb; }
.beta-scene .regl-badge-txt.regl-t-retrait { fill: #7f8ca8; }
/* Les fiches des postes. */
.beta-scene .regl-fiche { fill: #0f1628; stroke: #aab5c9; stroke-width: 1.3; }
.beta-scene .regl-f-ok { stroke: #7ee0a8; }
.beta-scene .regl-f-att { stroke: var(--beta-lemon,#d9ef59); }
.beta-scene .regl-f-non { stroke: #ff6b67; }
.beta-scene .regl-f-vide { stroke: #59647a; stroke-dasharray: 4 3; }
.beta-scene .regl-resp .regl-fiche { stroke-width: 3; }
.beta-scene .regl-fiche-txt { fill: #dfe5f2; font: 500 11.5px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-scene .regl-fiche-titre { fill: #fff; font-weight: 700; }
/* Le paquet. */
.beta-scene .regl-face { fill: #2a3754; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .regl-cadre-face { fill: none; stroke: var(--beta-lemon,#d9ef59); stroke-width: 1.5; stroke-dasharray: 6 4; transition: opacity .4s ease; }
.beta-scene .regl-cadre-lib { fill: var(--beta-lemon,#d9ef59); transition: opacity .4s ease; }
.beta-scene .regl-champ { fill: rgba(217,239,89,.08); stroke: var(--beta-lemon,#d9ef59); stroke-width: 1.5; transition: opacity .4s ease; }
.beta-scene .regl-champ-lib { fill: var(--beta-lemon,#d9ef59); text-anchor: end; font-size: 11px; transition: opacity .4s ease; }
.beta-scene .regl-mention { fill: #f3f5fa; transition: opacity .5s ease; }
.beta-scene .regl-m-grand { font: 800 20px 'Barlow Condensed',sans-serif; letter-spacing: .02em; }
.beta-scene .regl-m-moyen { font: 700 15px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-scene .regl-m-petit { font: 500 11.5px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-scene .regl-ms-barre { fill: #ffb3b0; }
.beta-scene .regl-ms-alerte { fill: #ff6b67; font-style: italic; font-weight: 700; }
.beta-scene .regl-rature { stroke: #ff6b67; stroke-width: 2.2; transition: opacity .4s ease; }
.beta-scene .regl-fenetre { fill: #121b30; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .regl-balance { transition: opacity .4s ease; }
.beta-scene .regl-plateau { fill: #aab5c9; }
.beta-scene .regl-socle { fill: #2a3754; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .regl-ecran { fill: #0b0f1e; stroke-width: 1.5; }
.beta-scene .regl-ecran-txt { font: 700 13px 'IBM Plex Mono',monospace; fill: #eef2fb; }
.beta-scene .regl-ecran-txt.regl-t-ok { fill: #7ee0a8; }
.beta-scene .regl-ecran-txt.regl-t-non { fill: #ff6b67; }
.beta-scene .regl-ligne { transition: opacity .4s ease; }
.beta-scene .regl-ligne-nom { fill: #eef2fb; font: 700 12px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-scene .regl-ligne-ref, .beta-scene .etroit .regl-ligne-ref { font-size: 10.5px; }
.beta-scene .regl-etat { fill: #121b30; stroke-width: 1.4; }
.beta-scene .regl-etat-txt { fill: #eef2fb; font: 700 11px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-scene .regl-etat-txt.regl-t-ok { fill: #7ee0a8; }
.beta-scene .regl-etat-txt.regl-t-non { fill: #ff8a87; }
.beta-scene .regl-etat-txt.regl-t-att { fill: var(--beta-lemon,#d9ef59); }
/* L'encart du texte. */
.beta-scene .regl-loi { fill: #fff; font: 700 14.5px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-scene .regl-rubrique { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .regl-val { fill: #f3f5fa; font: 500 13px 'Atkinson Hyperlegible Next',sans-serif; }
/* Les petits dessins. Aucune teinte marron : la toile des sacs est paille. */
.beta-scene .regl-sol { stroke: #59647a; stroke-width: 2; }
.beta-scene .regl-tronc { stroke: #9ee3cd; stroke-width: 2; fill: none; }
.beta-scene .regl-feuillage { fill: #9ee3cd; opacity: .85; }
.beta-scene .regl-cerise { fill: #ff6b67; }
.beta-scene .regl-foret { transition: opacity .6s ease; }
.beta-scene .regl-fut { stroke: #5f8f7d; stroke-width: 3; }
.beta-scene .regl-houppier { fill: rgba(126,224,168,.18); stroke: #7ee0a8; stroke-width: 1.2; stroke-dasharray: 3 2; }
.beta-scene .regl-polygone { fill: rgba(139,220,243,.1); stroke: #8bdcf3; stroke-width: 2; stroke-dasharray: 5 3; transition: opacity .6s ease; }
.beta-scene .regl-pin { transition: opacity .5s ease; }
.beta-scene .regl-pin-corps { fill: #ff6b67; stroke: #16203a; stroke-width: 1; }
.beta-scene .regl-pin-oeil { fill: #fff; }
.beta-scene .regl-toile { fill: #f0dda4; stroke: #16203a; stroke-width: 1; }
.beta-scene .regl-lien { fill: none; stroke: #16203a; stroke-width: 1.2; }
.beta-scene .regl-pochette { fill: #d9ef59; stroke: #16203a; stroke-width: 1; }
.beta-scene .regl-vide .regl-pochette { fill: #59647a; }
.beta-scene .regl-valve { fill: #16203a; stroke: #aab5c9; stroke-width: 1; }
.beta-scene .regl-etiquette { fill: #fff; opacity: .8; }
.beta-scene .regl-feuille { fill: #eef2fb; stroke: #16203a; stroke-width: 1; }
.beta-scene .regl-trait { stroke: #7f8ca8; stroke-width: 1; }
.beta-scene .regl-bati { fill: #2a3754; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .regl-toit { fill: #3a4a70; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .regl-vitre { fill: #8bdcf3; opacity: .5; }
.beta-scene .regl-quai { fill: #59647a; }
.beta-scene .regl-vague { fill: none; stroke: #8bdcf3; stroke-width: 1.5; stroke-dasharray: 6 4; }
.beta-scene .regl-grue { fill: none; stroke: #aab5c9; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .regl-cable { stroke: #aab5c9; stroke-width: 1; }
.beta-scene .regl-poteau { fill: #aab5c9; }
.beta-scene .regl-barriere { stroke: #ff6b67; stroke-width: 5; stroke-dasharray: 8 6; }
.beta-scene .regl-etoile { fill: #d9ef59; }
.beta-scene .regl-tremie { fill: #3a4a70; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .regl-tambour { fill: #1a2742; stroke: var(--beta-lemon,#d9ef59); stroke-width: 3; }
.beta-scene .regl-pale { stroke: var(--beta-lemon,#d9ef59); stroke-width: 2; }
.beta-scene .regl-flamme { fill: none; stroke: #ff9a64; stroke-width: 2; }
.beta-scene .regl-bac { fill: none; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .regl-nuage { transition: opacity .6s ease; }
.beta-scene .regl-bulle { fill: rgba(201,167,255,.35); stroke: #c9a7ff; stroke-width: 1; }
.beta-scene .regl-planche { fill: #59647a; }
.beta-scene .regl-montant { stroke: #59647a; stroke-width: 2; }
.beta-scene .regl-bac-corps, .beta-scene .regl-bac-couvercle { stroke: #16203a; stroke-width: 1.2; }
.beta-scene .regl-jaune { fill: #f2d44c; }
.beta-scene .regl-biodechet { fill: #7ee0a8; }
.beta-scene .regl-fleche-tri { fill: none; stroke: #16203a; stroke-width: 2; }
.beta-scene .regl-tete, .beta-scene .regl-corps { fill: #c8d1e2; }
.beta-scene .regl-verre { fill: rgba(139,220,243,.15); stroke: #8bdcf3; stroke-width: 1.3; }
.beta-scene .regl-liquide { fill: #8bdcf3; opacity: .6; }
.beta-scene .regl-croix { stroke: #ff6b67; stroke-width: 3; stroke-linecap: round; }
.beta-scene .regl-coche { fill: none; stroke: #7ee0a8; stroke-width: 3; stroke-linecap: round; }
.beta-scene .regl-fond-perso { fill: #16203a; }
.beta-scene .regl-conteneur { fill: #6b7896; stroke: #dfe5f2; stroke-width: 1.2; }
.beta-scene .regl-nervure-ct { stroke: #4e5a76; stroke-width: 1.2; }
.beta-scene .regl-porte-ct { fill: #4e5a76; stroke: #dfe5f2; stroke-width: 1.2; }
.beta-scene .regl-bulle-gaz { fill: rgba(127,140,168,.45); stroke: #aab5c9; stroke-width: 1; }
.beta-scene .regl-chambranle { fill: none; stroke: #aab5c9; stroke-width: 3; }
.beta-scene .regl-battant { fill: #3a4a70; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .regl-battant-ouvert { fill: rgba(58,74,112,.6); }
.beta-scene .regl-garde .regl-tete, .beta-scene .regl-garde .regl-corps { fill: #8bdcf3; }
.beta-scene .regl-ecriteau { fill: #eef2fb; stroke: #16203a; stroke-width: 1; }
.beta-scene .regl-sceau { fill: #ff6b67; stroke: #16203a; stroke-width: 1; }
.beta-scene .regl-ruban { fill: #ff6b67; }
.beta-scene .regl-axe { fill: none; stroke: #59647a; stroke-width: 1.2; }
.beta-scene .regl-seuil { stroke: #ff6b67; stroke-width: 1.5; stroke-dasharray: 3 2; }
.beta-scene .regl-courbe { fill: none; stroke: #16203a; stroke-width: 2; }
.beta-scene .regl-page { fill: #eef2fb; stroke: #16203a; stroke-width: 1; }
.beta-scene .regl-surligne { fill: rgba(217,239,89,.75); }
.beta-scene .regl-boutique { fill: #2a3754; stroke: #aab5c9; stroke-width: 1.2; }
.beta-scene .regl-moniteur { fill: #0b0f1e; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .regl-pied { stroke: #aab5c9; stroke-width: 2; fill: none; }
.beta-scene .regl-affiche { fill: #eef2fb; stroke: #ff6b67; stroke-width: 1.5; }
.beta-scene .regl-triangle { fill: #ff6b67; }
.beta-scene .regl-signature { fill: none; stroke: #16203a; stroke-width: 1.5; }
.beta-scene .regl-bureau { fill: #3a4a70; stroke: #aab5c9; stroke-width: 1.2; }
.beta-scene .regl-cachet { fill: none; stroke: #ff6b67; stroke-width: 2; }
.beta-scene .regl-manche { fill: #aab5c9; }
.beta-scene .regl-case { fill: none; stroke: #ff6b67; stroke-width: 1.5; stroke-dasharray: 3 2; }
.beta-scene .regl-lampe { fill: #2a3248; stroke: #59647a; stroke-width: 1.5; }
.beta-scene .regl-culot { fill: #59647a; }
.beta-scene .regl-paillasse { fill: #59647a; }
.beta-scene .regl-echantillon .regl-toile { fill: #8bdcf3; }
.beta-scene .regl-porte-bat { fill: #16203a; stroke: #59647a; stroke-width: 1; }
.beta-scene .regl-store-a { fill: #ff9a64; }
.beta-scene .regl-store-b { fill: #eef2fb; }
.beta-scene .regl-vitrine { fill: rgba(139,220,243,.18); stroke: #8bdcf3; stroke-width: 1; }
.beta-scene .regl-montagne { fill: #24324f; stroke: #5f8f7d; stroke-width: 1.5; }
.beta-scene .regl-parche .regl-toile { fill: #f0dda4; }
.beta-scene .regl-enclos { fill: none; stroke: var(--beta-lemon,#d9ef59); stroke-width: 1.5; stroke-dasharray: 4 3; }
.beta-scene .regl-certifie .regl-toile { fill: #d9ef59; }
.beta-scene .regl-nom { fill: #16203a; }
.beta-scene .regl-bocal { fill: rgba(139,220,243,.25); stroke: #8bdcf3; stroke-width: 1.5; }
.beta-scene .regl-couvercle { fill: #ff9a64; }
.beta-scene .regl-f-ue { stroke: #8bdcf3; }
.beta-scene .regl-f-fr { stroke: var(--beta-lemon,#d9ef59); }
.beta-scene .regl-etat-txt.regl-t-ue { fill: #8bdcf3; }
.beta-scene .regl-etat-txt.regl-t-fr { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .regl-etat-txt.regl-t-vide { fill: #aab3c9; }
.beta-scene .regl-palette { fill: #59647a; }
.beta-scene .regl-classeur { fill: #3a4a70; stroke: #d9ef59; stroke-width: 1.5; }
.beta-scene .regl-grain-t { fill: #c0814f; }
.beta-scene .regl-machoire { fill: #aab5c9; }
.beta-scene .regl-logo { fill: #ff9a64; stroke: #16203a; stroke-width: 1; }
.beta-scene .regl-triman { fill: #eef2fb; stroke: #16203a; stroke-width: 1.2; }
.beta-scene .regl-triman-f { fill: #16203a; }
.beta-scene .regl-mot-barre { fill: #eef2fb; opacity: .7; }
.beta-scene .regl-carton { fill: none; stroke: #f0dda4; stroke-width: 2; }
.beta-scene .regl-jauge-fond { fill: #2a3248; }
.beta-scene .regl-jauge-plein { fill: #8bdcf3; }
.beta-scene .regl-capsule { fill: #c8d1e2; stroke: #16203a; stroke-width: 1; }
.beta-scene .regl-dosette { fill: #f0dda4; stroke: #16203a; stroke-width: 1; }
.beta-scene .regl-picto { fill: #8bdcf3; stroke: #16203a; stroke-width: 1; }
.beta-scene .regl-question { fill: none; stroke: #d9ef59; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .regl-fleau { fill: none; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .regl-zone-bio { fill: rgba(126,224,168,.12); stroke: #7ee0a8; stroke-width: 1.2; }
.beta-scene .regl-zone-conv { fill: rgba(170,181,201,.08); stroke: #59647a; stroke-width: 1.2; }
.beta-scene .regl-cloison { stroke: #d9ef59; stroke-width: 2; stroke-dasharray: 4 3; }
.beta-scene .regl-balai-trait { fill: #ff9a64; stroke: #ff9a64; stroke-width: 2; }
.beta-scene .regl-pastille-c.regl-c1 { fill: #7ee0a8; }
.beta-scene .regl-pastille-c.regl-c2 { fill: #c9a7ff; }
.beta-scene .regl-pastille-c.regl-c3 { fill: #ff9a64; }
.beta-scene .regl-bouton { fill: #d9ef59; }
.beta-scene .regl-ondes { fill: none; stroke: #d9ef59; stroke-width: 1.6; }
.beta-scene .regl-exclam { stroke: #16203a; stroke-width: 2.2; stroke-linecap: round; }
.beta-scene .actif .regl-ici .regl-bras { animation: regl-pese 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.beta-scene .actif .regl-ici .regl-ondes { animation: regl-pulse 1s ease-in-out infinite; }
.beta-scene .actif .regl-ici .regl-alerte { animation: regl-pulse 1.2s ease-in-out infinite; }
@keyframes regl-pese { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
[data-si], [data-sauf] { transition: opacity .5s ease; }
/* Le mouvement : seulement au poste où se trouve l'objet. */
.beta-scene .actif .regl-ici .regl-pales { animation: regl-tourne 2.4s linear infinite; transform-box: fill-box; transform-origin: center; }
.beta-scene .actif .regl-ici .regl-vague { animation: regl-houle 1.6s linear infinite; }
.beta-scene .actif .regl-ici .regl-pin { animation: regl-pulse 1.4s ease-in-out infinite; }
@keyframes regl-tourne { to { transform: rotate(360deg); } }
@keyframes regl-houle { to { stroke-dashoffset: -20; } }
@keyframes regl-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .beta-scene .actif .regl-ici .regl-pales, .beta-scene .actif .regl-ici .regl-vague, .beta-scene .actif .regl-ici .regl-pin,
  .beta-scene .actif .regl-ici .regl-bras, .beta-scene .actif .regl-ici .regl-ondes, .beta-scene .actif .regl-ici .regl-alerte { animation: none !important; }
  .beta-scene .regl-objet { transition: none; }
}

/* ── scenes_reglementation2 ── */

/* ── La frise des échéances (scenes_reglementation2.py) ── */
.beta-scene .regl2-fond { fill: rgba(255,255,255,.03); stroke: #59647a; stroke-width: 1.5; }
.beta-scene .regl2-ligne { stroke: #3a4560; stroke-width: 1.2; }
.beta-scene .regl2-an { stroke: #59647a; stroke-width: 1; stroke-dasharray: 3 4; }
.beta-scene text.regl2-annee { fill: #dfe5f2; font-weight: 700; }
.beta-scene text.regl2-couloir { fill: #c8d1e2; }
.beta-scene .regl2-pastille { fill: #11192b; stroke: var(--c); stroke-width: 2; transition: fill .5s ease, r .5s ease, stroke-width .5s ease; }
.beta-scene .regl2-pastille.regl2-tombee { fill: var(--c); }
.beta-scene .regl2-pastille.regl2-focus { r: 9; stroke: #f3f5fa; stroke-width: 3; }
.beta-scene .actif .regl2-pastille.regl2-focus { animation: regl2-bat 1.4s ease-in-out infinite; }
@keyframes regl2-bat { 50% { stroke-width: 6; } }
.beta-scene .regl2-curseur { transition: transform 1.6s cubic-bezier(.4,0,.2,1); }
.beta-scene .regl2-trait { stroke: #ff6b67; stroke-width: 3; }
.beta-scene text.regl2-curseurtxt { fill: #ffb3b0; }
.beta-scene .regl2-vide { transition: opacity .8s ease; }
.beta-scene .regl2-casevide { fill: rgba(127,140,168,.18); stroke: #aab5c9; stroke-width: 1.4; stroke-dasharray: 5 4; }
.beta-scene text.regl2-videtxt { fill: #dfe5f2; }
.beta-scene .regl2-objet { transition: opacity .6s ease; }
.beta-scene .regl2-papier { fill: #eef2fb; stroke: #aab5c9; stroke-width: 1; }
.beta-scene .regl2-ligneP { stroke: #aab5c9; stroke-width: 1.4; }
.beta-scene .regl2-sachet { fill: #2a3248; stroke: #d9ef59; stroke-width: 2; }
.beta-scene .regl2-etiquette { fill: #eef2fb; }
.beta-scene .regl2-loupe { fill: rgba(139,220,243,.15); stroke: #8bdcf3; stroke-width: 2.4; }
.beta-scene .regl2-manche { stroke: #8bdcf3; stroke-width: 4; stroke-linecap: round; }
.beta-scene .regl2-coche { fill: none; stroke: #2f8a57; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .regl2-coche.regl2-grande { stroke-width: 4; }
.beta-scene .regl2-champ { fill: #fff; stroke: #59647a; stroke-width: 1; }
.beta-scene .regl2-rempli { fill: #d9ef59; transition: width 1.6s ease .4s; }
.beta-scene .regl2-registre { fill: #59647a; stroke: #aab5c9; stroke-width: 1.4; }
.beta-scene text.regl2-sombre { fill: #16203a; }
.beta-scene .regl2-sac { fill: #f0dda4; stroke: #c8b08a; stroke-width: 1.4; }
.beta-scene .regl2-lien { fill: none; stroke: #8a6a4a; stroke-width: 2; }
.beta-scene .regl2-bio { fill: #5fae7c; }
.beta-scene .regl2-tampon { transition: opacity 1.6s ease .6s; }
.beta-scene .regl2-tamponrond { fill: none; stroke: #ff9a64; stroke-width: 2.4; stroke-dasharray: 5 3; }
.beta-scene text.regl2-tampontxt { fill: #ff9a64; }
.beta-scene .regl2-tete { fill: #aab5c9; }
.beta-scene .regl2-corps { fill: #59647a; stroke: #aab5c9; stroke-width: 1; }
.beta-scene .regl2-parcelle { fill: rgba(95,174,124,.35); stroke: #2f8a57; stroke-width: 2; }
.beta-scene .regl2-epingle { fill: #ff6b67; }
.beta-scene .regl2-fleche { fill: none; stroke: #d9ef59; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .regl2-tri { fill: #eef2fb; }
.beta-scene .regl2-tricase { fill: #2f8a57; }
.beta-scene text.regl2-gros { fill: #dfe5f2; font: 800 34px 'Barlow Condensed', sans-serif; }
.beta-scene text.regl2-loi { fill: #d9ef59; font: 700 13px 'Atkinson Hyperlegible Next', sans-serif; }
.beta-scene text.regl2-rubrique { fill: #aab3c9; }
.beta-scene text.regl2-val { fill: #f3f5fa; font: 500 12px 'Atkinson Hyperlegible Next', sans-serif; }
@media (prefers-reduced-motion: reduce) {
  .beta-scene .regl2-pastille.regl2-focus { animation: none !important; }
  .beta-scene .regl2-curseur { transition: none; }
}

/* ── scenes_tasse ── */

/* ── La tasse, les chapitres des process, la frise (scenes_tasse.py) ── */
.beta-scene .tas-off { opacity: 0; }
.beta-scene .poste g, .beta-scene .poste text { transition: opacity .45s ease; }
.beta-scene .tas-eteint { opacity: .28; }
.beta-scene text.tas-clair { fill: #eef2fb; }
.beta-scene text.tas-citron, .beta-scene text.tas-annee { fill: #d9ef59; }
.beta-scene text.tas-rouge { fill: #ff6b67; font-size: 18px; }
.beta-scene .tas-conduit { fill: none; stroke: #4e5c86; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .tas-grain { transition: fill .5s ease, opacity .45s ease; }
.beta-scene .tas-grain.tas-seche { filter: brightness(.55); }
.beta-scene .tas-grain.tas-vide { opacity: 0; }
.beta-scene .tas-axe, .beta-scene .tas-echelle { stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .tas-lien { fill: none; stroke: #8a95ad; stroke-width: 1.2; stroke-dasharray: 3 3; }
.beta-scene .tas-ecran { fill: #0b0f1e; stroke: #59647a; stroke-width: 1; }
.beta-scene .tas-verre, .beta-scene .tas-tasse, .beta-scene .tas-bol, .beta-scene .tas-bac, .beta-scene .tas-silo { fill: rgba(255,255,255,.04); stroke: #aab5c9; stroke-width: 2.5; stroke-linejoin: round; }
.beta-scene .tas-anse { fill: none; stroke: #aab5c9; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .tas-liqueur { fill: #c98a4b; }
.beta-scene .tas-liqueur.tas-dilue { fill: #e0b07a; }
.beta-scene .tas-niv { transition: y .7s ease, height .7s ease, fill .7s ease; }
.beta-scene .tas-vapeur { fill: none; stroke: #c9a7ff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 6; opacity: .8; }
.beta-scene .actif .tas-vapeur { animation: tas-monte 1.4s linear infinite; }
@keyframes tas-monte { to { stroke-dashoffset: -24; } }
/* La tête */
.beta-scene .tas-tete { fill: rgba(255,255,255,.06); stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .tas-cavite { fill: #0f1626; stroke: #53617c; stroke-width: 1.5; }
.beta-scene .tas-pharynx { fill: none; stroke: #0f1626; stroke-width: 12; stroke-linecap: round; }
.beta-scene .tas-langue { fill: #f3b9ad; opacity: .85; }
.beta-scene .tas-papille { fill: #c4746a; }
.beta-scene .tas-nonvol { fill: #ff9a64; stroke: #16203a; stroke-width: 1; }
.beta-scene .tas-epith { fill: none; stroke: #c9a7ff; stroke-width: 5; stroke-linecap: round; opacity: .6; transition: opacity .4s ease, stroke-width .4s ease; }
.beta-scene .tas-epith.tas-fort { opacity: 1; stroke-width: 8; filter: drop-shadow(0 0 4px #c9a7ff); }
.beta-scene .tas-epith.tas-faible { opacity: .25; }
.beta-scene .tas-loupe { fill: none; stroke: #ff9a64; stroke-width: 1.5; stroke-dasharray: 4 4; }
/* La roue, le tri, la référence */
.beta-scene .tas-table { fill: #1a2742; stroke: #53617c; stroke-width: 1.5; }
.beta-scene .tas-carte { fill: #eef2fb; stroke: #53617c; stroke-width: .8; }
.beta-scene .tas-roue-fantome { fill: none; stroke: #8a95ad; stroke-width: 2; stroke-dasharray: 5 4; }
.beta-scene .tas-roue-lexique { fill: none; stroke: #d9ef59; stroke-width: 6; stroke-dasharray: 2 3; }
.beta-scene .tas-secteur { stroke: #11192b; stroke-width: 2; transition: fill .6s ease, opacity .45s ease; }
.beta-scene .tas-secteur-bord { fill: #d9ef59; }
.beta-scene .tas-bouchon { fill: #8a95ad; }
.beta-scene .tas-flacon { fill: rgba(255,255,255,.05); stroke: #aab5c9; stroke-width: 2; }
.beta-scene .tas-jus { fill: #d9434d; }
.beta-scene .tas-curseur { fill: #d9ef59; }
.beta-scene .actif .tas-curseur { animation: tas-pulse 1.2s ease-in-out infinite alternate; }
@keyframes tas-pulse { to { opacity: .35; } }
/* Le cupping */
.beta-scene .tas-balance { fill: #2a3248; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .tas-plateau { stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; }
.beta-scene .tas-mouture { fill: #a0643c; }
.beta-scene .tas-corps { fill: #2a3248; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .tas-col { fill: none; stroke: #aab5c9; stroke-width: 4; stroke-linecap: round; }
.beta-scene .tas-croute { fill: #6f4128; }
.beta-scene .tas-ecume { fill: #e0b07a; }
.beta-scene .tas-cuillere-tete { fill: #c8d1e2; }
.beta-scene .tas-cuillere-manche { stroke: #c8d1e2; stroke-width: 4; stroke-linecap: round; }
.beta-scene .tas-pousse { animation: tas-pousse 1.1s ease-in-out 3; }
@keyframes tas-pousse { 50% { transform: translateX(46px); } }
.beta-scene .tas-bloc { transition: opacity .45s ease; }
.beta-scene .tas-thermo { fill: #2a3248; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .tas-thermo-boule, .beta-scene .tas-thermo-col { fill: #ff6b67; }
.beta-scene .tas-thermo-boule.froid, .beta-scene .tas-thermo-col.froid { fill: #8bdcf3; }
.beta-scene .tas-thermo-boule.tiede, .beta-scene .tas-thermo-col.tiede { fill: #ffc46b; }
.beta-scene .tas-thermo-col { transition: y .7s ease, height .7s ease; }
.beta-scene .tas-horloge { fill: #0b0f1e; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .tas-horloge-trait { stroke: #59647a; stroke-width: 1.5; }
.beta-scene .tas-aiguille { stroke: #d9ef59; stroke-width: 2.5; stroke-linecap: round; transition: transform .8s ease; }
/* Lockhart */
.beta-scene .tas-cellule { fill: #3a2a20; stroke: #6f4128; stroke-width: 1; }
.beta-scene .tas-coeur { fill: #a0643c; transition: x .6s ease, y .6s ease, width .6s ease, height .6s ease; }
.beta-scene .tas-plan { fill: #141a2c; stroke: #59647a; stroke-width: 1; }
.beta-scene .tas-accept { stroke: #8a95ad; stroke-width: 1.2; stroke-dasharray: 6 4; }
.beta-scene .tas-zone { fill: rgba(217,239,89,.16); stroke: #d9ef59; stroke-width: 2; }
.beta-scene .tas-ajd { fill: rgba(126,224,168,.12); stroke: #7ee0a8; stroke-width: 1.5; stroke-dasharray: 5 4; }
.beta-scene .tas-point { fill: #ff9a64; stroke: #f3f5fa; stroke-width: 2; transition: transform .8s ease; }
.beta-scene .tas-point-fantome { fill: none; stroke: #ff9a64; stroke-width: 2; stroke-dasharray: 3 2; }
/* Les défauts */
.beta-scene .tas-nuage { fill: #59647a; }
.beta-scene .tas-goutte { stroke: #8bdcf3; stroke-width: 2; stroke-linecap: round; }
.beta-scene .actif .tas-pluie { animation: tas-pluie .9s linear infinite; }
@keyframes tas-pluie { to { transform: translateY(6px); opacity: .3; } }
.beta-scene .tas-branche { fill: none; stroke: #7ee0a8; stroke-width: 3; stroke-linecap: round; }
.beta-scene .tas-cerise { fill: #d9434d; stroke: #11192b; stroke-width: 1.5; }
.beta-scene .tas-moisi { fill: #7ee0a8; }
.beta-scene .tas-vert { fill: #9fc58a; stroke: #11192b; stroke-width: 1.5; }
.beta-scene .tas-sillon { fill: none; stroke: #11192b; stroke-width: 2; }
.beta-scene .tas-nez { fill: none; stroke: #f3b9ad; stroke-width: 3; stroke-linecap: round; }
.beta-scene .tas-punaise { fill: #7a5a3a; stroke: #f0dda4; stroke-width: 1.5; }
.beta-scene .tas-rostre { stroke: #f0dda4; stroke-width: 1.5; }
.beta-scene .tas-bacterie { fill: #7ee0a8; }
.beta-scene .tas-flamme { fill: #ff9a64; }
.beta-scene .actif .tas-flamme { animation: tas-pulse .5s ease-in-out infinite alternate; }
.beta-scene .tas-bol-petit { fill: #c98a4b; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .tas-alerte { fill: none; stroke: #ff6b67; stroke-width: 2.5; }
/* Le réfractomètre */
.beta-scene .tas-pipette { fill: rgba(255,255,255,.08); stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .tas-filtre { fill: #eef2fb; opacity: .8; }
.beta-scene .tas-boitier { fill: #1f2a44; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .tas-puits { fill: none; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .tas-prisme { fill: rgba(139,220,243,.22); stroke: #8bdcf3; stroke-width: 1.5; }
.beta-scene .tas-led { fill: #d9ef59; }
.beta-scene .tas-cellule-capteur { fill: #d9ef59; transition: fill .5s ease; }
.beta-scene .tas-cellule-capteur.tas-sombre { fill: #2a3248; }
.beta-scene .tas-rayon { fill: none; stroke: #d9ef59; stroke-width: 2; stroke-dasharray: 8 5; }
.beta-scene .actif .tas-rayon { animation: tas-monte 1s linear infinite; }
.beta-scene .tas-courbe { fill: none; stroke: #d9ef59; stroke-width: 2.5; }
.beta-scene .tas-courbe.tas-autre { stroke: #ff9a64; stroke-dasharray: 6 4; }
/* Les voies et le séchage */
.beta-scene .tas-eau { fill: #8bdcf3; opacity: .22; }
.beta-scene .tas-fleche-eau { fill: none; stroke: #8bdcf3; stroke-width: 2; stroke-dasharray: 4 3; }
.beta-scene .actif .tas-fleche-eau { animation: tas-monte 1.2s linear infinite; }
.beta-scene .tas-dalle { fill: #6b7387; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .tas-souffle { fill: none; stroke: #e8eef8; stroke-width: 2; stroke-dasharray: 5 5; opacity: .7; }
.beta-scene .actif .tas-souffle { animation: tas-monte 1s linear infinite; }
.beta-scene .tas-bache { fill: none; stroke: #8bdcf3; stroke-width: 2.5; stroke-dasharray: 2 0; }
.beta-scene .tas-manche { stroke: #c8d1e2; stroke-width: 3; stroke-linecap: round; }
.beta-scene .actif .tas-racloir { animation: tas-racle 2.4s ease-in-out infinite alternate; }
@keyframes tas-racle { to { transform: translateX(80px); } }
.beta-scene .tas-niv-grains { transition: y .7s ease, height .7s ease; opacity: .85; }
.beta-scene .tas-tremie { fill: #53617c; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .tas-carter { fill: none; stroke: #aab5c9; stroke-width: 2; stroke-dasharray: 3 3; }
.beta-scene .tas-trou { fill: #11192b; }
.beta-scene .tas-goulotte { fill: none; stroke: #4e5c86; stroke-width: 6; stroke-linecap: round; }
.beta-scene .tas-jauge-miel { fill: #ffb45d; transition: y .6s ease, height .6s ease, width .6s ease; }
.beta-scene .tas-bouteille { fill: #7f8ca8; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .tas-bouteille-o2 { fill: #8bdcf3; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .tas-robinet { fill: #aab5c9; }
.beta-scene .tas-cuve-fermee { fill: rgba(255,255,255,.04); stroke: #aab5c9; stroke-width: 3; }
.beta-scene .tas-couvercle { stroke: #aab5c9; stroke-width: 5; stroke-linecap: round; }
.beta-scene .tas-masse { fill: #3a2f3a; opacity: .7; }
.beta-scene .tas-barboteur { fill: none; stroke: #8bdcf3; stroke-width: 3; stroke-linejoin: round; }
.beta-scene .tas-pierre { fill: #c8d1e2; }
.beta-scene .tas-parche-coupe { fill: #f0dda4; stroke: #dfc686; stroke-width: 3; }
.beta-scene .tas-coeur-humide { fill: #8bdcf3; opacity: .75; transition: rx .7s ease, ry .7s ease; }
.beta-scene .tas-ouvert { stroke: #d9ef59; stroke-width: 3; stroke-linecap: round; }
.beta-scene .tas-foyer { fill: #2a3248; stroke: #ff9a64; stroke-width: 2; }
.beta-scene .tas-plenum { fill: rgba(255,154,100,.12); stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .tas-tamis { stroke: #aab5c9; stroke-width: 3; stroke-dasharray: 8 3; }
.beta-scene .tas-camera { fill: #2a3248; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .tas-objectif { fill: #d9ef59; }
.beta-scene .tas-buse { stroke: #8bdcf3; stroke-width: 4; stroke-linecap: round; }
.beta-scene .tas-plateau-fond { fill: #1a2742; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .tas-noir { fill: #11131a; stroke: #59647a; stroke-width: 1; }
/* La frise */
.beta-scene .tas-axe-frise { fill: none; stroke: #aab5c9; stroke-width: 3; }
.beta-scene .tas-marque { stroke: #11192b; stroke-width: 1.5; }
/* La cuve suivie heure par heure */
.beta-scene .tas-sonde { stroke: #c8d1e2; stroke-width: 3; stroke-linecap: round; }
.beta-scene .tas-inter { fill: rgba(217,239,89,.14); stroke: #d9ef59; stroke-width: 1; stroke-dasharray: 4 3; }
.beta-scene .tas-fourchette { fill: #8bdcf3; opacity: .8; }
.beta-scene .tas-marque-cen { fill: #ffb45d; }
.beta-scene .tas-curseur-h { stroke: #ff9a64; stroke-width: 2.5; transition: transform .8s ease; }
@media (prefers-reduced-motion: reduce) {
  .beta-scene .actif .tas-vapeur, .beta-scene .actif .tas-curseur, .beta-scene .tas-pousse, .beta-scene .actif .tas-pluie,
  .beta-scene .actif .tas-flamme, .beta-scene .actif .tas-rayon, .beta-scene .actif .tas-fleche-eau, .beta-scene .actif .tas-souffle,
  .beta-scene .actif .tas-racloir { animation: none !important; }
}

/* ── scenes_torrefaction ── */

/* ── Torréfaction (scenes_torrefaction.py) ── */
.beta-scene .torr-e { text-anchor: end; }
.beta-scene .torr-c { text-anchor: middle; }
.beta-scene .torr-cyl { fill: none; stroke: #c9d2e3; stroke-width: 4.5; }
.beta-scene .torr-cyl.plein { stroke-width: 7; stroke: #aab5c9; }
.beta-scene .torr-interieur { fill: #101829; }
.beta-scene .torr-perfo { fill: none; stroke: #101829; stroke-width: 2; stroke-dasharray: 2 4; }
.beta-scene .torr-rivet { stroke: #6b7894; stroke-width: 1.5; }
.beta-scene .torr-carter2 { fill: #1a2742; stroke: #53617c; stroke-width: 2; }
.beta-scene .torr-gaz { fill: none; stroke: #ff9a64; stroke-width: 2; stroke-dasharray: 3 6; opacity: .7; }
.beta-scene .actif .torr-gaz { animation: torr-file 1s linear infinite; }
.beta-scene .torr-lit { fill: var(--torr-grain, #c0814f); opacity: .5; transition: fill .6s ease; }
.beta-scene .torr-surface { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.2; }
.beta-scene .torr-brillant { fill: none; stroke: #fff1c2; stroke-width: 2.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.beta-scene .torr-exo { fill: none; stroke: #ff9a64; stroke-width: 6; opacity: .55; }
.beta-scene .actif .torr-exo { animation: torr-pulse 1s ease-in-out infinite alternate; }
.beta-scene .torr-pied { stroke: #53617c; stroke-width: 1.5; }
.beta-scene .torr-pale { fill: none; stroke: var(--beta-lemon,#d9ef59); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .torr-tordue { fill: none; stroke: #ff6b67; stroke-width: 3.5; stroke-linecap: round; }
.beta-scene .torr-axe-c { fill: #2a3757; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .torr-double { fill: none; stroke: #aab5c9; stroke-width: 3; stroke-dasharray: 10 4; }
.beta-scene .torr-chaude { fill: none; stroke: #ff6b67; stroke-width: 6; stroke-linecap: round; }
.beta-scene .torr-froide { fill: none; stroke: #8bdcf3; stroke-width: 6; }
.beta-scene .torr-sens { fill: none; stroke: var(--beta-lemon,#d9ef59); stroke-width: 2; }
.beta-scene .torr-sens-pointe { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .torr-g { fill: var(--torr-grain, #c0814f); stroke: rgba(20,12,8,.45); stroke-width: .8; transition: fill .6s ease; }
.beta-scene .torr-gvert { fill: #93c47d; stroke: rgba(20,12,8,.45); stroke-width: .8; }
.beta-scene .torr-trop { fill: #2b1a10; stroke: rgba(255,255,255,.3); stroke-width: 1; }
.beta-scene .torr-gquaker { fill: #e8d9a0; stroke: rgba(20,12,8,.45); stroke-width: .8; }
.beta-scene .torr-pale1 { fill: #d9b27c; stroke: rgba(20,12,8,.45); stroke-width: .8; }
.beta-scene .torr-pale2 { fill: #b88358; stroke: rgba(20,12,8,.45); stroke-width: .8; }
.beta-scene .torr-sillon { fill: none; stroke: rgba(20,12,8,.6); stroke-width: 1.1; }
.beta-scene .torr-gonfle { transform: scale(var(--torr-taille, 1)); transform-box: fill-box; transform-origin: center; transition: transform .6s ease; }
.beta-scene .torr-flamme { fill: #ff9a64; transform-box: fill-box; transform-origin: 50% 100%; }
.beta-scene .torr-flamme:nth-child(odd) { fill: #ffc46b; }
.beta-scene .torr-bruleur { stroke: #aab5c9; stroke-width: 4; stroke-linecap: round; }
.beta-scene .torr-gaine { fill: none; stroke: #4e5c86; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .torr-gaine.fine { stroke-width: 5; }
.beta-scene .torr-gaine-tuyau { fill: none; stroke: #4e5c86; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .torr-conduit { fill: none; stroke: #3d4a6b; stroke-width: 3; stroke-linejoin: round; }
.beta-scene .torr-cheminee, .beta-scene .torr-chambre, .beta-scene .torr-cyclone { fill: #202c48; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .torr-bac { fill: #202c48; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .torr-bac-haut { fill: #1a2742; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .torr-bras { stroke: var(--beta-lemon,#d9ef59); stroke-width: 3; stroke-linecap: round; transform-box: view-box; }
.beta-scene .torr-carter { fill: #1a2742; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .torr-pale-v { fill: #aab5c9; }
.beta-scene .torr-helice, .beta-scene .torr-pales-icone { transform-box: view-box; }
.beta-scene .torr-sonde { stroke: #8bdcf3; stroke-width: 2.5; }
.beta-scene .torr-sonde-pt { fill: #8bdcf3; }
.beta-scene .torr-trier { stroke: var(--beta-lemon,#d9ef59); stroke-width: 4; stroke-linecap: round; }
.beta-scene .torr-main { fill: none; stroke: #eef2fb; stroke-width: 3; stroke-linecap: round; }
.beta-scene .torr-tremie { fill: #26334f; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .torr-chute { stroke: #53617c; stroke-width: 3; }
.beta-scene .torr-appareil { fill: #26334f; stroke: #8bdcf3; stroke-width: 1.5; }
.beta-scene .torr-porte { fill: #aab5c9; }
.beta-scene .torr-porte-ouverte { stroke: var(--beta-lemon,#d9ef59); stroke-width: 3; stroke-linecap: round; }
.beta-scene .torr-pierre { fill: #6b7488; }
.beta-scene .torr-pistolet { fill: #ff9a64; }
.beta-scene .torr-faisceau { stroke: #ff6b67; stroke-width: 1.5; stroke-dasharray: 3 3; }
.beta-scene .torr-volet { stroke: var(--beta-lemon,#d9ef59); stroke-width: 3.5; stroke-linecap: round; }
.beta-scene .torr-repere { fill: none; stroke: #6b7894; stroke-width: 1; stroke-dasharray: 2 2; }
.beta-scene .torr-flocon { fill: #efe3c4; }
.beta-scene .torr-fumee .torr-volute { fill: #9aa3b5; opacity: .7; transform-box: fill-box; transform-origin: center; }
.beta-scene .torr-fumee .torr-volute { animation: torr-fume 2.2s linear infinite; }
.beta-scene .torr-eclat line { stroke: #fff1c2; stroke-width: 1.6; stroke-linecap: round; }
.beta-scene .torr-eclat { transform-box: fill-box; transform-origin: center; animation: torr-claque 1.2s ease-out infinite; }
.beta-scene .torr-axe { fill: none; stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .torr-trace { fill: none; stroke: var(--beta-lemon,#d9ef59); stroke-width: 3.5; stroke-linecap: round; }
.beta-scene .torr-ref { fill: none; stroke: #c8d1e2; stroke-width: 2; stroke-dasharray: 7 5; }
.beta-scene .torr-ror { fill: none; stroke: #8bdcf3; stroke-width: 2.5; }
.beta-scene .torr-crash { fill: none; stroke: #ff6b67; stroke-width: 2.5; stroke-dasharray: 6 4; }
.beta-scene .torr-bande { fill: rgba(217,239,89,.10); }
.beta-scene .torr-seuil { fill: rgba(255,154,100,.18); }
.beta-scene .torr-ligne { stroke: #ff9a64; stroke-width: 1.5; stroke-dasharray: 5 5; }
.beta-scene .torr-crochet { fill: none; stroke: #ff9a64; stroke-width: 2; }
.beta-scene .torr-geste { fill: #ff9a64; }
.beta-scene .torr-curseur { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .torr-plage { fill: rgba(217,239,89,.35); }
.beta-scene .torr-bfr.torr-b-roule { fill: #8bdcf3; }
.beta-scene .torr-bfr.torr-b-cata { fill: #ff9a64; }
.beta-scene .torr-bfr.torr-b-centri { fill: #ff6b67; }
.beta-scene .torr-surf { fill: var(--torr-surf, #b5cf86); transition: fill .6s ease; }
.beta-scene .torr-mid { fill: var(--torr-mid, #a3c880); transition: fill .6s ease; }
.beta-scene .torr-coeur { fill: var(--torr-coeur, #93c47d); transition: fill .6s ease; }
.beta-scene .torr-pli { fill: none; stroke: rgba(20,12,8,.55); stroke-width: 1.5; }
.beta-scene .torr-fissure { fill: none; stroke: #11192b; stroke-width: 1.8; stroke-linecap: round; }
.beta-scene .torr-rayon-exo { stroke: #ff9a64; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .torr-fleau { fill: none; stroke: #c8d1e2; stroke-width: 2; stroke-linecap: round; }
/* Les trois modes de transfert, chacun son tracé : conduction en bande pleine, convection
   en courant qui file, rayonnement en éclair. */
.beta-scene .torr-m-cond { fill: none; stroke: #ff6b67; stroke-width: 7; stroke-linecap: round; }
.beta-scene .torr-m-conv { fill: none; stroke: #ff9a64; stroke-width: 2.5; stroke-dasharray: 6 5; animation: torr-file 1s linear infinite; }
.beta-scene .torr-m-ray { fill: none; stroke: var(--beta-lemon,#d9ef59); stroke-width: 2.5; stroke-linejoin: round; }
.beta-scene .torr-t-cond, .beta-scene .torr-l-cond { fill: #ff6b67; }
.beta-scene .torr-t-conv, .beta-scene .torr-l-conv { fill: #ff9a64; }
.beta-scene .torr-t-ray, .beta-scene .torr-l-ray { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .torr-huile { fill: #fff1c2; }
.beta-scene .torr-huile.rance { fill: #e8c46a; stroke: #8a5232; stroke-width: .8; }
.beta-scene .torr-gv { fill: var(--torr-vue, #a0643c); stroke: rgba(255,255,255,.3); stroke-width: 1.5; transition: fill .6s ease; }
.beta-scene .torr-brule { fill: #24150e; }
.beta-scene .torr-facing { fill: none; stroke: rgba(20,10,6,.55); stroke-width: 6; }
.beta-scene .torr-section { fill: #d9b27c; }
.beta-scene .torr-cru { fill: #cfd98f; }
.beta-scene .torr-coupe-ligne { stroke: #eef2fb; stroke-width: 1.5; stroke-dasharray: 3 3; }
.beta-scene .torr-tasse { fill: #eef2fb; }
.beta-scene .torr-anse { fill: none; stroke: #eef2fb; stroke-width: 4; }
.beta-scene .torr-cafe { fill: #6f4128; }
.beta-scene .torr-cafe.brule { fill: #24150e; }
.beta-scene .torr-entier { fill: #4a2a18; }
.beta-scene .torr-moulu { fill: #8a5232; }
.beta-scene .torr-jet { stroke: #8bdcf3; stroke-width: 2.5; stroke-dasharray: 3 3; }
.beta-scene .torr-barre-fond { fill: none; stroke: #53617c; stroke-dasharray: 3 3; }
.beta-scene .torr-barre { transform-box: fill-box; transform-origin: 0 50%; transition: transform .6s ease; }
.beta-scene .torr-lien { fill: none; stroke: #c9a7ff; stroke-width: 2; }
.beta-scene .torr-nuance { stroke: #11192b; stroke-width: 1; }
.beta-scene .torr-piste { stroke: #53617c; stroke-width: 5; stroke-linecap: round; }
.beta-scene .torr-bouton { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .torr-sachet { fill: #26334f; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .torr-scelle { fill: #aab5c9; }
.beta-scene .torr-valve { fill: #1a2742; stroke: var(--beta-lemon,#d9ef59); stroke-width: 2.5; }
.beta-scene .torr-valve-croix { stroke: var(--beta-lemon,#d9ef59); stroke-width: 2; }
.beta-scene .torr-air-bloque { stroke: #c8d1e2; stroke-width: 2.5; stroke-dasharray: 4 3; }
.beta-scene .torr-croix { stroke: #ff6b67; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .torr-co2 { fill: #7f8ca8; }
.beta-scene .torr-cloche { fill: rgba(255,255,255,.04); stroke: #aab5c9; stroke-width: 2; }
.beta-scene .torr-bouffee.vapeur { fill: #8bdcf3; opacity: .75; }
.beta-scene .torr-bouffee.gaz { fill: #7f8ca8; }
.beta-scene .actif .torr-bouffee { animation: torr-flotte 1.6s ease-in-out infinite alternate; }
.beta-scene .torr-bobine { fill: none; stroke: #ff9a64; stroke-width: 3; stroke-dasharray: 8 5; }
.beta-scene .actif .torr-flamme { animation: torr-flamme .45s ease-in-out infinite alternate; }
.beta-scene .actif .torr-flamme:nth-child(3n) { animation-delay: -.2s; }
.beta-scene .actif .torr-helice { animation: torr-tourne .9s linear infinite; }
.beta-scene .actif .torr-pales-icone { animation: torr-tourne 2.6s linear infinite; }
.beta-scene .actif .torr-bras { animation: torr-brasse 1.6s ease-in-out infinite alternate; }
.beta-scene .actif .torr-flotte { animation: torr-flotte 1s ease-in-out infinite alternate; }
.beta-scene .actif .torr-flocons { animation: torr-monte 1.4s linear infinite; }
.beta-scene .torr-curseur { animation: torr-pouls 1.1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes torr-tourne { to { transform: rotate(360deg); } }
@keyframes torr-flamme { to { transform: scaleY(.72); } }
@keyframes torr-brasse { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes torr-flotte { to { transform: translateY(-6px); } }
@keyframes torr-monte { to { transform: translateY(-12px); } }
@keyframes torr-pouls { to { transform: scale(1.35); } }
@keyframes torr-file { to { stroke-dashoffset: -22; } }
@keyframes torr-pulse { to { opacity: .15; } }
@keyframes torr-fume { from { transform: translateY(0) scale(.6); opacity: .8; } to { transform: translateY(-26px) scale(1.6); opacity: 0; } }
@keyframes torr-claque { 0% { transform: scale(.3); opacity: 1; } 60% { transform: scale(1.2); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .beta-scene [class*="torr-"] { animation: none !important; transition: none !important; }
}
.beta-scene .torr-a-0, .beta-scene .torr-d-0, .beta-scene .torr-a-1, .beta-scene .torr-d-1, .beta-scene .torr-a-2, .beta-scene .torr-d-2, .beta-scene .torr-a-3, .beta-scene .torr-d-3, .beta-scene .torr-a-4, .beta-scene .torr-d-4, .beta-scene .torr-a-5, .beta-scene .torr-d-5 { opacity: 0; transition: opacity .45s ease; }
.beta-process-story[data-story-step="0"] .beta-scene .torr-a-0, .beta-process-story[data-story-step="0"] .beta-scene .torr-d-0 { opacity: 1; }
.beta-process-story[data-story-step="1"] .beta-scene .torr-a-1, .beta-process-story[data-story-step="1"] .beta-scene .torr-d-0, .beta-process-story[data-story-step="1"] .beta-scene .torr-d-1 { opacity: 1; }
.beta-process-story[data-story-step="2"] .beta-scene .torr-a-2, .beta-process-story[data-story-step="2"] .beta-scene .torr-d-0, .beta-process-story[data-story-step="2"] .beta-scene .torr-d-1, .beta-process-story[data-story-step="2"] .beta-scene .torr-d-2 { opacity: 1; }
.beta-process-story[data-story-step="3"] .beta-scene .torr-a-3, .beta-process-story[data-story-step="3"] .beta-scene .torr-d-0, .beta-process-story[data-story-step="3"] .beta-scene .torr-d-1, .beta-process-story[data-story-step="3"] .beta-scene .torr-d-2, .beta-process-story[data-story-step="3"] .beta-scene .torr-d-3 { opacity: 1; }
.beta-process-story[data-story-step="4"] .beta-scene .torr-a-4, .beta-process-story[data-story-step="4"] .beta-scene .torr-d-0, .beta-process-story[data-story-step="4"] .beta-scene .torr-d-1, .beta-process-story[data-story-step="4"] .beta-scene .torr-d-2, .beta-process-story[data-story-step="4"] .beta-scene .torr-d-3, .beta-process-story[data-story-step="4"] .beta-scene .torr-d-4 { opacity: 1; }
.beta-process-story[data-story-step="5"] .beta-scene .torr-a-5, .beta-process-story[data-story-step="5"] .beta-scene .torr-d-0, .beta-process-story[data-story-step="5"] .beta-scene .torr-d-1, .beta-process-story[data-story-step="5"] .beta-scene .torr-d-2, .beta-process-story[data-story-step="5"] .beta-scene .torr-d-3, .beta-process-story[data-story-step="5"] .beta-scene .torr-d-4, .beta-process-story[data-story-step="5"] .beta-scene .torr-d-5 { opacity: 1; }
.beta-process-story[data-story-kind="scene:torr-chaleur"][data-story-step="0"] .beta-scene { --torr-surf: #b5cf86; --torr-mid: #a3c880; --torr-coeur: #93c47d; --torr-taille: 1; --torr-grain: #93c47d; }
.beta-process-story[data-story-kind="scene:torr-chaleur"][data-story-step="1"] .beta-scene { --torr-surf: #ffb26b; --torr-mid: #c9c06a; --torr-coeur: #93c47d; --torr-taille: 1; --torr-grain: #b5cf86; }
.beta-process-story[data-story-kind="scene:torr-chaleur"][data-story-step="2"] .beta-scene { --torr-surf: #e6b64a; --torr-mid: #d9c26a; --torr-coeur: #b7c477; --torr-taille: 1.05; --torr-grain: #e6cf6e; }
.beta-process-story[data-story-kind="scene:torr-chaleur"][data-story-step="3"] .beta-scene { --torr-surf: #c0814f; --torr-mid: #d39a4f; --torr-coeur: #d9b05e; --torr-taille: 1.26; --torr-grain: #c0814f; }
.beta-process-story[data-story-kind="scene:torr-chaleur"][data-story-step="4"] .beta-scene { --torr-surf: #a0643c; --torr-mid: #b07045; --torr-coeur: #b97a4a; --torr-taille: 1.26; --torr-grain: #a0643c; }
.beta-process-story[data-story-kind="scene:torr-cuisson"][data-story-step="0"] .beta-scene { --torr-grain: #93c47d; --torr-taille: 1; }
.beta-process-story[data-story-kind="scene:torr-cuisson"][data-story-step="1"] .beta-scene { --torr-grain: #e6cf6e; --torr-taille: 1.1; }
.beta-process-story[data-story-kind="scene:torr-cuisson"][data-story-step="2"] .beta-scene { --torr-grain: #c0814f; --torr-taille: 1.25; }
.beta-process-story[data-story-kind="scene:torr-cuisson"][data-story-step="3"] .beta-scene { --torr-grain: #a0643c; --torr-taille: 1.28; }
.beta-process-story[data-story-kind="scene:torr-cuisson"][data-story-step="4"] .beta-scene { --torr-grain: #6f4128; --torr-taille: 1.3; }
.beta-process-story[data-story-kind="scene:torr-chimie"][data-story-step="0"] .beta-scene { --torr-b0: 0.8; --torr-b1: 0.55; --torr-b2: 0.9; --torr-b3: 0.9; --torr-b4: 1; --torr-grain: #e6cf6e; --torr-p0: 0.25; --torr-p1: 0.3; --torr-p2: 0.1; --torr-p3: 0.05; --torr-g0: 0.5; --torr-g1: 0.2; }
.beta-process-story[data-story-kind="scene:torr-chimie"][data-story-step="1"] .beta-scene { --torr-b0: 0.3; --torr-b1: 0.45; --torr-b2: 0.8; --torr-b3: 0.8; --torr-b4: 1; --torr-grain: #d39a4f; --torr-p0: 0.5; --torr-p1: 0.8; --torr-p2: 0.3; --torr-p3: 0.1; --torr-g0: 0.85; --torr-g1: 0.4; }
.beta-process-story[data-story-kind="scene:torr-chimie"][data-story-step="2"] .beta-scene { --torr-b0: 0.15; --torr-b1: 0.25; --torr-b2: 0.5; --torr-b3: 0.5; --torr-b4: 1; --torr-grain: #c0814f; --torr-p0: 0.75; --torr-p1: 0.5; --torr-p2: 0.85; --torr-p3: 0.6; --torr-g0: 0.6; --torr-g1: 0.6; }
.beta-process-story[data-story-kind="scene:torr-chimie"][data-story-step="3"] .beta-scene { --torr-b0: 0.05; --torr-b1: 0.15; --torr-b2: 0.3; --torr-b3: 0.35; --torr-b4: 1; --torr-grain: #6f4128; --torr-p0: 1; --torr-p1: 0.2; --torr-p2: 0.55; --torr-p3: 0.8; --torr-g0: 0.35; --torr-g1: 0.7; }
.beta-process-story[data-story-kind="scene:torr-atelier"][data-story-step="0"] .beta-scene { --torr-grain: #93c47d; }
.beta-process-story[data-story-kind="scene:torr-atelier"][data-story-step="1"] .beta-scene { --torr-grain: #e6cf6e; }
.beta-process-story[data-story-kind="scene:torr-atelier"][data-story-step="2"] .beta-scene { --torr-grain: #c0814f; }
.beta-process-story[data-story-kind="scene:torr-atelier"][data-story-step="3"] .beta-scene { --torr-grain: #a0643c; }
.beta-process-story[data-story-kind="scene:torr-atelier"][data-story-step="4"] .beta-scene { --torr-grain: #a0643c; }
.beta-process-story[data-story-kind="scene:torr-profil"][data-story-step="0"] .beta-scene { --torr-grain: #93c47d; }
.beta-process-story[data-story-kind="scene:torr-profil"][data-story-step="1"] .beta-scene { --torr-grain: #e6cf6e; }
.beta-process-story[data-story-kind="scene:torr-profil"][data-story-step="2"] .beta-scene { --torr-grain: #c0814f; }
.beta-process-story[data-story-kind="scene:torr-profil"][data-story-step="3"] .beta-scene { --torr-grain: #a0643c; }
.beta-process-story[data-story-kind="scene:torr-profil"][data-story-step="4"] .beta-scene { --torr-grain: #a0643c; }
.beta-process-story[data-story-kind="scene:torr-defauts"][data-story-step="0"] .beta-scene { --torr-vue: #a0643c; --torr-grain: #a0643c; }
.beta-process-story[data-story-kind="scene:torr-defauts"][data-story-step="1"] .beta-scene { --torr-vue: #a0643c; --torr-grain: #a0643c; }
.beta-process-story[data-story-kind="scene:torr-defauts"][data-story-step="2"] .beta-scene { --torr-vue: #a0643c; --torr-grain: #a0643c; }
.beta-process-story[data-story-kind="scene:torr-defauts"][data-story-step="3"] .beta-scene { --torr-vue: #a0643c; --torr-grain: #a0643c; }
.beta-process-story[data-story-kind="scene:torr-defauts"][data-story-step="4"] .beta-scene { --torr-vue: #e8d9a0; --torr-grain: #a0643c; }
.beta-process-story[data-story-kind="scene:torr-repos"][data-story-step="0"] .beta-scene { --torr-grain: #a0643c; --torr-b0: 1; --torr-b1: 1; }
.beta-process-story[data-story-kind="scene:torr-repos"][data-story-step="1"] .beta-scene { --torr-grain: #a0643c; --torr-b0: 1; --torr-b1: 1; }
.beta-process-story[data-story-kind="scene:torr-repos"][data-story-step="2"] .beta-scene { --torr-grain: #a0643c; --torr-b0: 0.95; --torr-b1: 0.85; }
.beta-process-story[data-story-kind="scene:torr-repos"][data-story-step="3"] .beta-scene { --torr-grain: #a0643c; --torr-b0: 0.8; --torr-b1: 0.5; }
.beta-process-story[data-story-kind="scene:torr-repos"][data-story-step="4"] .beta-scene { --torr-grain: #a0643c; --torr-b0: 0.75; --torr-b1: 0.45; }
.beta-process-story[data-story-kind="scene:torr-brassage"][data-story-step="0"] .beta-scene { --torr-grain: #93c47d; --torr-b0: 0.95; --torr-b1: 0.1; --torr-b2: 0.1; }
.beta-process-story[data-story-kind="scene:torr-brassage"][data-story-step="1"] .beta-scene { --torr-grain: #b5cf86; --torr-b0: 0.6; --torr-b1: 0.3; --torr-b2: 0.5; }
.beta-process-story[data-story-kind="scene:torr-brassage"][data-story-step="2"] .beta-scene { --torr-grain: #e6cf6e; --torr-b0: 0.45; --torr-b1: 0.65; --torr-b2: 0.9; }
.beta-process-story[data-story-kind="scene:torr-brassage"][data-story-step="3"] .beta-scene { --torr-grain: #c0814f; --torr-b0: 0.55; --torr-b1: 0.85; --torr-b2: 0.5; }
.beta-process-story[data-story-kind="scene:torr-brassage"][data-story-step="4"] .beta-scene { --torr-grain: #a0643c; --torr-b0: 1; --torr-b1: 0.1; --torr-b2: 0.05; }
.beta-process-story[data-story-kind="scene:torr-airflow"][data-story-step="0"] .beta-scene { --torr-grain: #93c47d; }
.beta-process-story[data-story-kind="scene:torr-airflow"][data-story-step="1"] .beta-scene { --torr-grain: #b5cf86; }
.beta-process-story[data-story-kind="scene:torr-airflow"][data-story-step="2"] .beta-scene { --torr-grain: #e6cf6e; }
.beta-process-story[data-story-kind="scene:torr-airflow"][data-story-step="3"] .beta-scene { --torr-grain: #c0814f; }
.beta-process-story[data-story-kind="scene:torr-airflow"][data-story-step="4"] .beta-scene { --torr-grain: #a0643c; }

/* ── scenes_vivant ── */

/* ── Le vivant (scenes_vivant.py) ── */
.beta-scene .viv-cadre { fill: rgba(255,255,255,.03); stroke: #59647a; stroke-width: 1.5; }
.beta-scene .viv-dessin * { vector-effect: non-scaling-stroke; }
.beta-scene .viv-fondu { transition: opacity .6s ease; }
.beta-scene .viv-cache { opacity: 0 !important; }
.beta-scene .viv-chemin { fill: none; stroke: none; }
.beta-scene .viv-renvoi { stroke: #7f8ca8; stroke-width: 1; stroke-dasharray: 2 3; }
.beta-scene .viv-trace { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s ease; }
.beta-scene .viv-trace.viv-on { stroke-dashoffset: 0; }
.beta-scene .viv-pt { pointer-events: none; }
.beta-scene .viv-axe { stroke: #7f8ca8; stroke-width: 1.4; }
.beta-scene .viv-borne { stroke: #aab5c9; stroke-width: 1.2; stroke-dasharray: 4 4; }
.beta-scene .viv-sol { stroke: #8f98ad; stroke-width: 2; }
/* Végétal */
.beta-scene .viv-cellule { fill: rgba(126,224,168,.14); stroke: #7ee0a8; stroke-width: 1.2; }
.beta-scene .viv-garde { fill: rgba(126,224,168,.35); stroke: #9ee3cd; stroke-width: 1.4; }
.beta-scene .viv-tronc { fill: none; stroke: #c8b08a; stroke-width: 5; stroke-linecap: round; }
.beta-scene .viv-tronc.viv-fin { stroke-width: 2.4; }
.beta-scene .viv-rameau { fill: none; stroke: #c8b08a; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .viv-rameau.viv-epais { stroke-width: 4; }
.beta-scene .viv-racine { fill: none; stroke: #c8b08a; stroke-width: 1.8; stroke-linecap: round; transition: opacity .8s ease; }
.beta-scene .viv-feuille { fill: #5fae7c; stroke: #7ee0a8; stroke-width: 1; transition: fill .8s ease; }
.beta-scene .viv-chute { transition: transform 1.8s cubic-bezier(.5,0,.9,.6), opacity 1.8s ease; }
.beta-scene .viv-buisson { fill: #5fae7c; stroke: #7ee0a8; stroke-width: 1.2; }
.beta-scene .viv-houppier { stroke: #0b0f1e; stroke-width: 1.2; }
.beta-scene .viv-houppier2 { fill: #3f7a57; stroke: #5fae7c; stroke-width: 1; }
.beta-scene .viv-canopee, .beta-scene .viv-rayons { transition: opacity 1s ease; }
.beta-scene .viv-rayon { stroke: #ffe27a; stroke-width: 1.6; stroke-dasharray: 6 5; opacity: .8; }
.beta-scene .viv-soleil { fill: #ffe27a; }
.beta-scene .viv-sapin { fill: #2f6b4c; stroke: #5fae7c; stroke-width: 1; }
.beta-scene .viv-foret { transition: filter .6s ease; }
.beta-scene .viv-foret.viv-gardee .viv-sapin { stroke: #d9ef59; stroke-width: 2; }
.beta-scene .viv-cafe { transition: transform 2.2s ease; }
.beta-scene .viv-pousse { stroke: #7ee0a8; stroke-width: 3; stroke-linecap: round; }
.beta-scene .viv-coupe { stroke: #ff6b67; stroke-width: 3; }
.beta-scene .viv-bourgeon { fill: #a0643c; }
.beta-scene .viv-fente { fill: none; stroke: #c8b08a; stroke-width: 1.4; }
.beta-scene .viv-givre { stroke: #e9f3f6; stroke-width: 1.4; stroke-linecap: round; }
.beta-scene .viv-gouttelette { fill: #8bdcf3; }
.beta-scene .viv-fleurblanche { fill: #f3f5fa; }
/* Rouille */
.beta-scene .viv-goutte { fill: rgba(139,220,243,.38); stroke: #8bdcf3; stroke-width: 1.5; transition: opacity .8s ease; }
.beta-scene .viv-spore { fill: #ff9a64; stroke: #ffd0a8; stroke-width: 1.4; transition: opacity .6s ease; }
.beta-scene .viv-hyphe { stroke: #ffb45d; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .viv-tache { opacity: .26; transition: opacity .6s ease, fill .8s ease; }
.beta-scene .viv-loupe { fill: none; stroke: #d9ef59; stroke-width: 1.6; stroke-dasharray: 4 3; }
.beta-scene .actif .viv-pustule { animation: viv-pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center top; }
@keyframes viv-pulse { 50% { transform: scale(1.08); } }
.beta-scene .viv-cerise { fill: #d9434d; transition: r .8s ease, fill .8s ease, opacity .6s ease; }
/* Nuits, climat */
.beta-scene .viv-fenetre { fill: rgba(217,239,89,.14); stroke: rgba(217,239,89,.5); stroke-width: 1; }
.beta-scene .viv-rosee { fill: #8bdcf3; opacity: .8; }
.beta-scene .viv-utile { fill: #d9ef59; }
.beta-scene .viv-courbe { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.beta-scene .viv-froide { stroke: #8bdcf3; }
.beta-scene .viv-douce { stroke: #ff9a64; }
.beta-scene .viv-tours { fill: none; stroke: #ff9a64; stroke-width: 2; }
.beta-scene .viv-tours.viv-tours2 { stroke: #ff6b67; }
.beta-scene .viv-montagne { fill: #2a3a4f; stroke: #8f98ad; stroke-width: 1.6; }
.beta-scene .viv-chere { fill: rgba(255,154,100,.30); }
.beta-scene .viv-gratuite { fill: rgba(126,224,168,.24); }
.beta-scene .viv-limite { stroke: #f3f5fa; stroke-width: 1.4; stroke-dasharray: 5 4; }
.beta-scene .viv-monte { transition: transform 2.2s ease; }
.beta-scene .viv-apte { fill: rgba(217,239,89,.32); }
.beta-scene .viv-perdu { fill: rgba(255,107,103,.38); }
.beta-scene .viv-fantome { fill: none; stroke: #d9ef59; stroke-width: 1.4; stroke-dasharray: 4 4; }
.beta-scene .viv-tube { fill: #1b2742; stroke: #aab5c9; stroke-width: 1.6; }
.beta-scene .viv-bulbe { fill: #ff6b67; }
.beta-scene .viv-mercure { fill: #ff6b67; transition: y 1.2s ease, height 1.2s ease, fill .6s ease; }
.beta-scene .viv-mercure.viv-froid { fill: #8bdcf3; }
.beta-scene .viv-gelee { stroke: #8bdcf3; stroke-width: 2; }
.beta-scene .viv-plage { stroke: #0b0f1e; stroke-width: 1; }
.beta-scene .viv-sec { fill: #c8b08a; }
.beta-scene .viv-pluie { fill: #8bdcf3; opacity: .75; }
.beta-scene .viv-isotherme { fill: none; stroke: #d9ef59; stroke-width: 1.8; stroke-dasharray: 5 4; }
.beta-scene .viv-colonne { fill: #3a3430; stroke: #8f98ad; stroke-width: 1.2; }
.beta-scene .viv-eau { fill: rgba(139,220,243,.55); }
.beta-scene .viv-deficit { fill: none; stroke: #ff6b67; stroke-width: 1.2; stroke-dasharray: 3 3; }
.beta-scene .viv-sacs { transition: opacity .8s ease; }
.beta-scene .viv-sac { fill: #c8b08a; stroke: #f0dda4; stroke-width: 1; }
.beta-scene .viv-lien { fill: none; stroke: #f0dda4; stroke-width: 1.2; }
.beta-scene .viv-perte { fill: rgba(17,25,43,.82); stroke: #ff6b67; stroke-width: 1.4; stroke-dasharray: 4 3; transition: x 1s ease, width 1s ease, opacity .6s ease; }
.beta-scene .viv-carre { fill: #7ee0a8; transition: fill .8s ease, opacity .8s ease; }
.beta-scene .viv-carre.viv-carreperdu { fill: none; stroke: #7f8ca8; stroke-dasharray: 2 2; }
.beta-scene .viv-carre2 { fill: #d9ef59; opacity: .7; transition: fill .8s ease; }
.beta-scene .viv-carre2.viv-horsclimat { fill: #ff6b67; opacity: 1; }
.beta-scene .viv-terre { fill: #2c2a2a; }
.beta-scene .viv-versant { stroke: #c8b08a; stroke-width: 2; }
.beta-scene .viv-nappe { transition: transform 1.6s ease; }
.beta-scene .viv-conduite { stroke: #aab5c9; stroke-width: 2.6; }
/* Scolyte */
.beta-scene .viv-exocarpe { fill: #ff8a8a; fill-opacity: .32; stroke: #d9434d; stroke-width: 5; }
.beta-scene .viv-graine { fill: #9ee3cd; fill-opacity: .55; stroke: #f0dda4; stroke-width: 3; }
.beta-scene .viv-nombril { fill: #5b2333; stroke: #d9434d; stroke-width: 1.4; }
.beta-scene .viv-galerie { stroke: #20160f; stroke-width: 6; stroke-linecap: round; }
.beta-scene .viv-chambre { fill: #20160f; }
.beta-scene .viv-oeuf { fill: #f3f5fa; }
.beta-scene .viv-mange { fill: #20160f; opacity: .75; }
.beta-scene .viv-larve { fill: none; stroke: #f3f5fa; stroke-width: 3.4; stroke-linecap: round; }
.beta-scene .viv-male { fill: #20160f; stroke: #c9a7ff; stroke-width: 1.2; }
.beta-scene .viv-insecte { fill: #20160f; stroke: #d9ef59; stroke-width: 1.2; }
.beta-scene .viv-femelle { transition: transform 1.6s ease, opacity .6s ease; }
.beta-scene .actif .viv-femelle .viv-insecte { animation: viv-gratte .5s ease-in-out infinite alternate; }
@keyframes viv-gratte { to { stroke-width: 2.4; } }
.beta-scene .viv-cerisev { fill: #b5cf86; }
.beta-scene .viv-cerisevf { fill: #93c47d; stroke: #5fae7c; stroke-width: 1.2; }
.beta-scene .viv-baienoire { fill: #4a2d3a; stroke: #c98a8f; stroke-width: 1.2; }
.beta-scene .viv-trou { fill: #20160f; }
/* Génétique */
.beta-scene .viv-noyau { fill: rgba(201,167,255,.06); stroke: #8f98ad; stroke-width: 1.6; stroke-dasharray: 6 4; }
.beta-scene .viv-chromo { stroke: #0b0f1e; stroke-width: .8; }
.beta-scene .viv-centro { stroke: #0b0f1e; stroke-width: 1.4; }
.beta-scene .viv-gene { fill: #d9ef59; stroke: #0b0f1e; stroke-width: .8; }
.beta-scene .actif .viv-gene { animation: viv-luit 1.2s ease-in-out infinite alternate; }
@keyframes viv-luit { to { fill: #f6ffb0; } }
.beta-scene .viv-petale { fill: #f3f5fa; stroke: #c8d1e2; stroke-width: 1; }
.beta-scene .viv-corolle, .beta-scene .viv-calice { fill: none; stroke: #c8d1e2; stroke-width: 2; }
.beta-scene .viv-filament { fill: none; stroke: #e6cf6e; stroke-width: 1.4; }
.beta-scene .viv-anthere { fill: #e6cf6e; }
.beta-scene .viv-ovaire { fill: rgba(147,196,125,.35); stroke: #93c47d; stroke-width: 1.6; }
.beta-scene .viv-ovule { fill: #f3f5fa; transition: fill .8s ease; }
.beta-scene .viv-style { stroke: #93c47d; stroke-width: 2.6; }
.beta-scene .viv-stigmate { fill: none; stroke: #93c47d; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .viv-tubepollen { stroke: #d9ef59; stroke-width: 1.6; }
.beta-scene .viv-non { stroke: #ff6b67; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .viv-fruit { fill: #93c47d; transition: fill .8s ease; }
.beta-scene .viv-fruitmur .viv-fruit { fill: #d9434d; }
.beta-scene .viv-parent { stroke: #0b0f1e; stroke-width: 1.2; }
.beta-scene .viv-croise { fill: none; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .viv-retenu { fill: none; stroke: #d9ef59; stroke-width: 2.4; }
.beta-scene .viv-retour { fill: none; stroke: #d9ef59; stroke-width: 1.4; stroke-dasharray: 4 4; }
.beta-scene .viv-cote { fill: none; stroke: #d9ef59; stroke-width: 1.4; }
.beta-scene .viv-barre { stroke: #0b0f1e; stroke-width: .8; }
.beta-scene .viv-rang { transition: opacity .6s ease; }
.beta-scene .viv-rang1 { transition-delay: .5s; } .beta-scene .viv-rang2 { transition-delay: 1s; } .beta-scene .viv-rang3 { transition-delay: 1.5s; }
.beta-scene .viv-grainevert { fill: #9ee3cd; stroke: #f0dda4; stroke-width: 2; }
.beta-scene .viv-sillon { stroke: #2f6b4c; stroke-width: 1.4; }
/* Kiboko */
.beta-scene .viv-claie { stroke: #aab5c9; stroke-width: 3; }
.beta-scene .viv-treillis { stroke: #aab5c9; stroke-width: 1.4; stroke-dasharray: 3 3; }
.beta-scene .viv-kiboko { fill: #d9434d; stroke: #ff8a8a; stroke-width: 1; transition: fill 1s ease, stroke 1s ease; }
.beta-scene .viv-k2 .viv-kiboko { fill: #8a3a3f; stroke: #c98a8f; }
.beta-scene .viv-k4 .viv-kiboko { fill: #4a2d3a; stroke: #c98a8f; }
.beta-scene .viv-bac { fill: #1a2742; stroke: #aab5c9; stroke-width: 3; }
.beta-scene .viv-grainmuc { fill: #9ee3cd; stroke: #ff9a64; stroke-width: 3.5; transition: stroke-width 1.6s ease; }
.beta-scene .viv-fermente .viv-grainmuc { stroke-width: 1.4; }
.beta-scene .viv-grainparche { fill: #f0dda4; stroke: #dfc686; stroke-width: 2; }
.beta-scene .actif .viv-cueillie { animation: viv-pulse 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.beta-scene .viv-manche { fill: none; stroke: #c8b08a; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .actif .viv-rateau { animation: viv-rateau 2.4s ease-in-out infinite alternate; }
@keyframes viv-rateau { to { transform: translateX(180px); } }
.beta-scene .viv-bache { fill: rgba(127,140,168,.35); stroke: #aab5c9; stroke-width: 1.4; }
.beta-scene .actif .viv-bache { animation: viv-nuit 4.8s ease-in-out infinite; }
@keyframes viv-nuit { 0%, 45% { opacity: 0; } 55%, 95% { opacity: 1; } 100% { opacity: 0; } }
/* La cerise en coupe */
.beta-scene .viv-cerisefruit { transition: r 1.2s ease, fill 1s ease; }
.beta-scene .viv-cerisejaune { fill: #e6cf6e; }
.beta-scene .viv-peau { fill: #ff8a8a; fill-opacity: .3; stroke-width: 6; transition: stroke 1s ease, opacity .6s ease; }
.beta-scene .viv-mucilage { fill: #ff9a64; fill-opacity: .35; }
.beta-scene .viv-grainecoupe { fill: #9ee3cd; fill-opacity: .6; stroke: #f0dda4; stroke-width: 3.4; }
.beta-scene .viv-pellicule { fill: none; stroke: #e9f3f6; stroke-width: 1.2; stroke-dasharray: 3 2; }
@media (prefers-reduced-motion: reduce) {
  .beta-scene [class*="viv-"] { transition: none !important; animation: none !important; }
}

/* ── scenes_vivant2 ── */

/* ── Le vivant, rang 7 (scenes_vivant2.py) ── */
.beta-scene .viv2-cadre { fill: rgba(255,255,255,.03); stroke: #59647a; stroke-width: 1.5; }
.beta-scene .viv2-dessin * { vector-effect: non-scaling-stroke; }
.beta-scene .viv2-fondu { transition: opacity .6s ease; }
.beta-scene .viv2-cache { opacity: 0 !important; }
.beta-scene .viv2-chemin { fill: none; stroke: none; }
.beta-scene .viv2-pt { pointer-events: none; }
.beta-scene .viv2-renvoi { stroke: #7f8ca8; stroke-width: 1; stroke-dasharray: 2 3; }
.beta-scene .viv2-trace { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s ease; }
.beta-scene .viv2-trace.viv2-on { stroke-dashoffset: 0; }
.beta-scene .viv2-part { fill: none; transition: stroke-dasharray 1.6s ease; }
.beta-scene .viv2-axe { stroke: #7f8ca8; stroke-width: 1.4; }
.beta-scene .viv2-sol { stroke: #8f98ad; stroke-width: 2; }
.beta-scene .viv2-terre { fill: #2c2a2a; }
.beta-scene text.viv2-latin { font-style: italic; }
.beta-scene text.viv2-surboite { fill: #0b0f1e; }
.beta-scene text.viv2-txtcitron { fill: #d9ef59; }
/* Végétal */
.beta-scene .viv2-tige, .beta-scene .viv2-tige2 { fill: none; stroke: #c8b08a; stroke-width: 4; stroke-linecap: round; transition: stroke .8s ease, stroke-dasharray 1.6s ease; }
.beta-scene .viv2-tige2 { stroke-width: 3; }
.beta-scene .viv2-tronc { stroke: #c8b08a; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .viv2-tronc2 { fill: #8a6a4a; stroke: #c8b08a; stroke-width: 1.2; }
.beta-scene .viv2-houppier { fill: #5fae7c; stroke: #7ee0a8; stroke-width: 1.2; transition: fill .8s ease, opacity .8s ease; }
.beta-scene .viv2-clone .viv2-houppier { fill: #7ee0a8; stroke: #d9ef59; }
.beta-scene .viv2-feuille { fill: #5fae7c; stroke: #7ee0a8; stroke-width: 1; transition: fill .8s ease, ry .8s ease; }
.beta-scene .viv2-chute { transition: transform 1.8s cubic-bezier(.5,0,.9,.6), opacity 1.8s ease; }
.beta-scene .viv2-cerise { fill: #d9434d; transition: fill .8s ease; }
.beta-scene .viv2-racine, .beta-scene .viv2-racine2 { fill: none; stroke: #c8b08a; stroke-width: 2; stroke-linecap: round; }
.beta-scene .viv2-racine2 { stroke-width: 3; }
.beta-scene .viv2-bois { fill: #4a3b2c; stroke: #c8b08a; stroke-width: 1.2; }
.beta-scene .viv2-ecorce { stroke: #8a6a4a; stroke-width: 5; }
.beta-scene .viv2-vaisseau { stroke: #8bdcf3; stroke-width: 2; opacity: .55; }
.beta-scene .viv2-colonise { stroke: #c48bd8; stroke-width: 3.4; stroke-linecap: round; opacity: .9; }
.beta-scene .viv2-bande { stroke: #0b0f1e; stroke-width: 3; stroke-linecap: round; }
.beta-scene .viv2-bouchon { fill: #6b3f78; stroke: #c48bd8; stroke-width: 1.2; }
.beta-scene .viv2-blessure { fill: none; stroke: #ff6b67; stroke-width: 2.4; stroke-linejoin: round; }
.beta-scene .viv2-chancre { fill: none; stroke: #0b0f1e; stroke-width: 2.4; }
.beta-scene .viv2-champi { fill: #c48bd8; }
.beta-scene .viv2-coque { fill: #a0643c; }
.beta-scene .viv2-non { stroke: #ff6b67; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .viv2-flamme { fill: #ff9a64; }
.beta-scene .viv2-jachere { fill: #7f8ca8; }
.beta-scene .viv2-neuve { fill: rgba(217,239,89,.08); stroke: #d9ef59; stroke-width: 1.2; stroke-dasharray: 4 3; }
/* Trachéomycose */
.beta-scene .viv2-branche { fill: none; stroke: #aab5c9; stroke-width: 2; }
.beta-scene .viv2-noeud { fill: #aab5c9; }
.beta-scene .viv2-lignee { stroke: #0b0f1e; stroke-width: 1; }
.beta-scene .viv2-genome { fill: #7f8ca8; }
.beta-scene .viv2-genomev { fill: #c48bd8; }
.beta-scene .viv2-element { fill: #d9ef59; }
.beta-scene .viv2-paroi { fill: rgba(126,224,168,.12); stroke: #7ee0a8; stroke-width: 1.6; transition: stroke-dasharray .8s ease; }
.beta-scene .viv2-ecorceronde { fill: #8a6a4a; }
.beta-scene .viv2-boisrond { fill: #e9d9b4; }
.beta-scene .viv2-moelle { fill: #d8c79c; stroke: #c8b08a; stroke-width: 1; }
.beta-scene .viv2-vaisseaurond { stroke: #4a3b2c; stroke-width: .8; transition: fill .8s ease; }
.beta-scene .viv2-trainee { stroke: #7d4a7f; stroke-width: 5; stroke-linecap: round; opacity: .85; }
.beta-scene .viv2-feuillenoire { fill: #3b3340; stroke: #7f8ca8; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
.beta-scene .viv2-lame { stroke: #dfe5f2; stroke-width: 3; stroke-linecap: round; }
.beta-scene .viv2-manche { fill: #a0643c; }
.beta-scene .viv2-desinfecte { fill: rgba(139,220,243,.35); stroke: #8bdcf3; stroke-width: 1.4; }
/* Carte */
.beta-scene .viv2-ocean { fill: #16213a; }
.beta-scene .viv2-terres { fill: #2f3d55; stroke: #5d6b86; stroke-width: .8; }
.beta-scene .viv2-lieu { fill: #ff9a64; stroke: #0b0f1e; stroke-width: 1; }
.beta-scene .viv2-lieu.viv2-neuf { fill: #ffd0a8; stroke: #ff9a64; stroke-width: 2.4; }
.beta-scene .actif .viv2-lieu.viv2-neuf { animation: viv2-pulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes viv2-pulse { 50% { transform: scale(1.5); } }
.beta-scene .viv2-route { stroke: #ff9a64; stroke-width: 1.6; stroke-dasharray: 1; opacity: .8; }
.beta-scene .viv2-routecafe { stroke: #93c47d; stroke-width: 1.8; }
.beta-scene .viv2-yemen { fill: #93c47d; }
.beta-scene .viv2-eradique { fill: none; stroke: #7ee0a8; stroke-width: 2; }
.beta-scene .viv2-barriere { fill: none; stroke: #f3f5fa; stroke-width: 2.4; stroke-dasharray: 4 3; }
.beta-scene .viv2-sporepoint { fill: #ff9a64; }
.beta-scene .viv2-tampon { fill: rgba(243,245,250,.08); }
.beta-scene .viv2-mur { stroke: #f3f5fa; stroke-width: 2; stroke-dasharray: 4 3; }
.beta-scene .viv2-tete { fill: #aab5c9; }
.beta-scene .viv2-corps { fill: #59647a; stroke: #aab5c9; stroke-width: 1; }
/* Races */
.beta-scene .viv2-pot { fill: #5fae7c; }
.beta-scene .viv2-fiole { fill: #ff9a64; opacity: .8; }
.beta-scene .viv2-case { fill: none; stroke: #aab5c9; stroke-width: 1.4; transition: fill .8s ease; }
.beta-scene .viv2-pustulept { fill: #ffb45d; stroke: #0b0f1e; stroke-width: .8; }
.beta-scene .viv2-tient { fill: none; stroke: #0b0f1e; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .viv2-paroiverte { fill: rgba(126,224,168,.25); stroke: #7ee0a8; stroke-width: 1.4; }
.beta-scene .viv2-serrure { fill: #d9ef59; stroke: #0b0f1e; stroke-width: 1; }
.beta-scene .viv2-trou { fill: #0b0f1e; }
.beta-scene .viv2-sporemobile { transition: transform 1.4s ease, opacity .6s ease; }
.beta-scene .viv2-sporegros { fill: #ff9a64; stroke: #ffd0a8; stroke-width: 1.4; }
.beta-scene .viv2-cle { fill: #d9ef59; stroke: #0b0f1e; stroke-width: .8; }
.beta-scene .viv2-halo { fill: none; stroke: #7ee0a8; stroke-width: 2.4; stroke-dasharray: 5 4; }
.beta-scene .viv2-hyphe { fill: none; stroke: #ffb45d; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .viv2-boite { fill: #59647a; stroke: #0b0f1e; stroke-width: 1; transition: fill .8s ease; }
/* Caféine */
.beta-scene .viv2-cycle { fill: rgba(126,224,168,.12); stroke: #7ee0a8; stroke-width: 2; stroke-linejoin: round; }
.beta-scene .viv2-molecule { transition: opacity .8s ease; }
.beta-scene .viv2-methyle { fill: #d9ef59; stroke: #0b0f1e; stroke-width: 1; }
.beta-scene .viv2-liaison { stroke: #d9ef59; stroke-width: 1.8; }
.beta-scene .viv2-fleche { fill: none; stroke: #aab5c9; stroke-width: 1.6; }
.beta-scene .viv2-enzyme { fill: #ffb45d; transition: opacity .6s ease; }
.beta-scene .viv2-chromosome { fill: #2a3248; stroke: #59647a; stroke-width: 1; }
.beta-scene .viv2-genebox { fill: #d9ef59; transition: opacity .6s ease; }
.beta-scene .viv2-genefort { fill: #d9ef59; stroke: #f6ffb0; stroke-width: 2; }
.beta-scene .actif .viv2-genefort { animation: viv2-luit 1.2s ease-in-out infinite alternate; }
@keyframes viv2-luit { to { fill: #f6ffb0; } }
.beta-scene .viv2-genefaible { fill: #d9ef59; opacity: .35; }
.beta-scene .viv2-feuilleplate { fill: #5fae7c; stroke: #7ee0a8; stroke-width: 1.2; }
.beta-scene .viv2-nervure2 { stroke: #2f6b4c; stroke-width: 1.4; }
.beta-scene .viv2-insecte { transition: transform 1.6s ease; transform-box: fill-box; transform-origin: center; }
.beta-scene .viv2-corpsinsecte { fill: #20160f; stroke: #d9ef59; stroke-width: 1; }
.beta-scene .viv2-pattes { stroke: #20160f; stroke-width: 1.6; }
.beta-scene .viv2-petale { fill: #f3f5fa; stroke: #c8d1e2; stroke-width: 1; }
.beta-scene .viv2-coeurfleur { fill: #e6cf6e; }
.beta-scene .viv2-abeille { fill: #e6cf6e; stroke: #20160f; stroke-width: 2; }
.beta-scene .viv2-aile { fill: rgba(243,245,250,.6); }
/* CYP1A2 */
.beta-scene .viv2-tasse { fill: #f3f5fa; stroke: #aab5c9; stroke-width: 1.2; }
.beta-scene .viv2-foie { fill: #8a3a3f; stroke: #c98a8f; stroke-width: 1.2; }
.beta-scene .viv2-enzymebouche { fill: #d9ef59; transform-box: fill-box; transform-origin: center; }
.beta-scene .actif .viv2-enzymebouche.viv2-vite { animation: viv2-mache .4s ease-in-out infinite alternate; }
.beta-scene .actif .viv2-enzymebouche.viv2-lent { animation: viv2-mache 1.6s ease-in-out infinite alternate; }
@keyframes viv2-mache { to { transform: scale(.55); } }
.beta-scene .viv2-recepteur { fill: none; stroke: #d9ef59; stroke-width: 2; }
.beta-scene .viv2-coeur { fill: #ff6b67; transform-box: fill-box; transform-origin: center; }
.beta-scene .actif .viv2-coeur { animation: viv2-pulse 1s ease-in-out infinite; }
.beta-scene .viv2-anxiete { stroke: #ffb45d; stroke-width: 2; stroke-linecap: round; }
.beta-scene .viv2-brin { fill: none; stroke: #8bdcf3; stroke-width: 2; }
.beta-scene .viv2-brin2 { stroke: #c9a7ff; }
.beta-scene .viv2-barreau { stroke: #59647a; stroke-width: 1.4; }
.beta-scene .viv2-repere { fill: none; stroke: #d9ef59; stroke-width: 2; stroke-dasharray: 4 3; }
.beta-scene .viv2-baseA { fill: #d9ef59; }
.beta-scene .viv2-baseC { fill: #ff6b67; }
.beta-scene .viv2-courbe { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.beta-scene .viv2-rapide { stroke: #d9ef59; }
.beta-scene .viv2-lente { stroke: #ff6b67; }
/* Génomes */
.beta-scene .viv2-chromo { stroke: #0b0f1e; stroke-width: .8; }
.beta-scene .viv2-cadrechr { fill: none; stroke: #d9ef59; stroke-width: 1.6; stroke-dasharray: 3 3; }
.beta-scene .viv2-timor { fill: #d9ef59; }
.beta-scene .viv2-genemark { stroke: #ff6b67; stroke-width: 2.4; }
.beta-scene .viv2-lecteur { fill: #d9ef59; opacity: .8; }
.beta-scene .viv2-balaye { animation: viv2-balaye 3s linear infinite; }
@keyframes viv2-balaye { to { transform: translateX(290px); } }
.beta-scene .viv2-bandeage { fill: #d9ef59; }
.beta-scene .viv2-sousestime { stroke: #ff6b67; stroke-width: 2.4; }
.beta-scene .viv2-piste { stroke: #59647a; stroke-width: 4; stroke-linecap: round; }
.beta-scene .viv2-pousse { fill: none; stroke: #7ee0a8; stroke-width: 2; }
.beta-scene .viv2-test { fill: #8bdcf3; }
.beta-scene .viv2-genevise { fill: rgba(217,239,89,.15); stroke: #d9ef59; stroke-width: 1.6; }
.beta-scene .viv2-cas9 { fill: rgba(201,167,255,.55); stroke: #c9a7ff; stroke-width: 1.6; transition: transform 1.8s ease; }
.beta-scene .viv2-coupure { fill: none; stroke: #ff6b67; stroke-width: 2.4; }
/* Sous l'arbre */
.beta-scene .viv2-canopee { fill: #3f7a57; stroke: #5fae7c; stroke-width: 1.4; }
.beta-scene .viv2-zone { fill: rgba(200,176,138,.08); stroke: #c8b08a; stroke-width: 1.2; stroke-dasharray: 5 4; transition: opacity .8s ease; }
.beta-scene .viv2-goutte { fill: #8bdcf3; }
.beta-scene .viv2-phosphore { fill: #f3f5fa; }
.beta-scene .viv2-hyphe2 { stroke: #f0dda4; stroke-width: 1.4; }
.beta-scene .viv2-sporemyco { fill: #e6cf6e; }
.beta-scene .viv2-plante1 { fill: #5fae7c; } .beta-scene .viv2-plante2 { fill: #93c47d; }
.beta-scene .viv2-sonde { fill: #aab5c9; }
.beta-scene .viv2-etoile { fill: #d9ef59; }
.beta-scene .viv2-microbe { fill: #7ee0a8; }
.beta-scene .viv2-rameau2 { fill: none; stroke: #c8b08a; stroke-width: 3; }
.beta-scene .viv2-cuve { fill: #1a2742; stroke: #aab5c9; stroke-width: 2; }
/* Recépage */
.beta-scene .viv2-souche { fill: #8a6a4a; stroke: #c8b08a; stroke-width: 1.2; transition: opacity .6s ease; }
.beta-scene .viv2-coupe { stroke: #ff6b67; stroke-width: 2.4; }
.beta-scene .viv2-rejet { fill: none; stroke: #7ee0a8; stroke-width: 3; stroke-linecap: round; }
.beta-scene .viv2-rejet.viv2-pale { stroke: #b9c9a8; stroke-width: 1.6; }
.beta-scene .viv2-bras { stroke: #aab5c9; stroke-width: 3; stroke-linecap: round; }
.beta-scene .viv2-portee { stroke: #d9ef59; stroke-width: 1.2; stroke-dasharray: 5 4; }
@media (prefers-reduced-motion: reduce) {
  .beta-scene .viv2-lieu, .beta-scene .viv2-genefort, .beta-scene .viv2-enzymebouche, .beta-scene .viv2-coeur, .beta-scene .viv2-balaye { animation: none !important; }
}

/* ── scenes_voies ── */

/* ── Voies de traitement et séchage (scenes_voies.py) ── */
.beta-scene .voies-item { stroke: rgba(10,14,28,.35); stroke-width: .7; transition: fill .6s ease, opacity .4s ease, transform .6s ease; transform-box: fill-box; transform-origin: center; }
.beta-scene .voies-cerise.n0 { fill: #e0444f; } .beta-scene .voies-cerise.n1 { fill: #a5303e; }
.beta-scene .voies-cerise.n2 { fill: #6c2734; } .beta-scene .voies-cerise.n3 { fill: #45202a; }
.beta-scene .voies-coque.n0, .beta-scene .voies-coque.n1, .beta-scene .voies-coque.n2, .beta-scene .voies-coque.n3 { fill: #5e2633; }
.beta-scene .voies-parche.n0 { fill: #a3884a; } .beta-scene .voies-parche.n1 { fill: #c9ae6f; }
.beta-scene .voies-parche.n2 { fill: #e4d09a; } .beta-scene .voies-parche.n3 { fill: #fbf3d8; }
.beta-scene .voies-muc { stroke-width: 2; } .beta-scene .voies-muc.n0 { fill: #f0dda4; stroke: #ff9a64; }
.beta-scene .voies-muc.n1 { fill: #e9c070; stroke: #e39a50; } .beta-scene .voies-muc.n2 { fill: #b9763c; stroke: #9d5a2a; }
.beta-scene .voies-muc.n3 { fill: #6a3d22; stroke: #4d2a17; }
.beta-scene .voies-nu.n0 { fill: #8fc4b6; } .beta-scene .voies-nu.n1 { fill: #6fb2a6; }
.beta-scene .voies-nu.n2 { fill: #529e9b; } .beta-scene .voies-nu.n3 { fill: #3c8189; }
.beta-scene .voies-mousson.n0 { fill: #9aac86; } .beta-scene .voies-mousson.n1 { fill: #bdbf8c; }
.beta-scene .voies-mousson.n2 { fill: #dcd29c; } .beta-scene .voies-mousson.n3 { fill: #eee2b1; }
.beta-scene .voies-dalle { fill: #34405a; stroke: #aab5c9; stroke-width: 2; transition: fill .8s ease; }
.beta-scene .voies-dalle.voies-bachesol { fill: #2a5677; }
.beta-scene .voies-toit { fill: #263350; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .voies-poteau { stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .voies-filet { stroke: #9ee3cd; stroke-width: 3; stroke-dasharray: 2 2; }
.beta-scene .voies-plastique { fill: rgba(139,220,243,.07); stroke: #8bdcf3; stroke-width: 2.5; }
.beta-scene .voies-rayons line { stroke: #d9ef59; stroke-width: 2; stroke-linecap: round; opacity: .8; transition: opacity .4s ease; }
.beta-scene .voies-soleil circle { fill: #d9ef59; } .beta-scene .voies-soleil line { stroke: #d9ef59; stroke-width: 2; }
.beta-scene .voies-soleil { transition: opacity .4s ease; } .beta-scene .voies-lune { fill: #e6ecf5; opacity: 0; transition: opacity .4s ease; }
.beta-scene .voies-nuage path { fill: #8d9ab3; } .beta-scene .voies-bruine line { stroke: #8bdcf3; stroke-width: 1.6; stroke-linecap: round; }
.beta-scene .voies-rateau line { stroke: #e6ecf5; stroke-width: 2.5; stroke-linecap: round; }
.beta-scene .voies-tas { stroke: rgba(10,14,28,.35); }
.beta-scene .voies-bache, .beta-scene .voies-bache-nuit { fill: none; stroke: #8bdcf3; stroke-width: 3; }
.beta-scene .voies-gouttes line, .beta-scene .voies-pluie line { stroke: #8bdcf3; stroke-width: 2; stroke-linecap: round; }
.beta-scene .voies-ir { fill: none; stroke: #ff8a5c; stroke-width: 2; stroke-linejoin: round; }
.beta-scene .voies-vent line, .beta-scene .voies-air line { stroke: #8bdcf3; stroke-width: 2; stroke-dasharray: 10 8; }
.beta-scene .voies-chaud path { fill: none; stroke: #ff8a5c; stroke-width: 2.4; stroke-linecap: round; }
.beta-scene .voies-fond-chaud { fill: #ff8a5c; }
.beta-scene .voies-humide-dessous circle { fill: #8bdcf3; }
.beta-scene .voies-moisi-lot circle, .beta-scene .voies-moisi { fill: #9fb38a; stroke: #2c3a24; stroke-width: .8; }
.beta-scene .voies-flore circle { fill: #e6ecf5; }
.beta-scene .voies-brume ellipse { fill: rgba(230,236,245,.35); }
.beta-scene .voies-volet { stroke: #8bdcf3; stroke-width: 4.5; stroke-linecap: round; transform-box: fill-box; transform-origin: bottom; transition: transform .8s ease; }
.beta-scene .voies-froid { fill: #8bdcf3; } .beta-scene .voies-fleche-froid { fill: none; stroke: #8bdcf3; stroke-width: 2; }
.beta-scene .voies-coupe-ech { fill: none; stroke: #e6ecf5; stroke-width: 2; }
.beta-scene .voies-cadran { fill: #18233d; stroke: #e6ecf5; stroke-width: 1.6; }
.beta-scene .voies-aiguille line, .beta-scene .voies-aiguille-h { stroke: #d9ef59; stroke-width: 1.8; stroke-linecap: round; }
.beta-scene .voies-aiguille { animation: beta-scene-tourne 2.4s linear infinite; }
.beta-scene .voies-hl { fill: #d9ef59; }
/* Ce qui n'apparaît que sur un jeton d'étape. */
.beta-scene .voies-rateau, .beta-scene .voies-tas, .beta-scene .voies-bache, .beta-scene .voies-bache-nuit, .beta-scene .voies-gouttes, .beta-scene .voies-pluie, .beta-scene .voies-ir,
.beta-scene .voies-vent, .beta-scene .voies-chaud, .beta-scene .voies-fond-chaud, .beta-scene .voies-air, .beta-scene .voies-humide-dessous, .beta-scene .voies-nuage,
.beta-scene .voies-moisi, .beta-scene .voies-moisi-lot, .beta-scene .voies-flore, .beta-scene .voies-brume, .beta-scene .voies-volets, .beta-scene .voies-frais, .beta-scene .voies-sac-nuit, .beta-scene .voies-coupelle,
.beta-scene .voies-c-taches, .beta-scene .voies-coupe, .beta-scene .voies-cle-coupes, .beta-scene .voies-echelle, .beta-scene .voies-g-croute, .beta-scene .voies-aspergillus, .beta-scene .voies-question { opacity: 0; transition: opacity .5s ease; }
.beta-scene [data-etat~="nuit"] .voies-soleil, .beta-scene [data-etat~="nuit"] .voies-rayons line, .beta-scene [data-etat~="mousson"] .voies-soleil, .beta-scene [data-etat~="mousson"] .voies-rayons line { opacity: 0; }
.beta-scene [data-etat~="nuit"] .voies-lune { opacity: 1; }
.beta-scene [data-etat~="mousson"] .voies-nuage { opacity: 1; }
.beta-scene [data-etat~="brasse"] .voies-rateau { opacity: 1; }
.beta-scene .actif[data-etat~="brasse"] .voies-rateau { animation: voies-ratisse 2.6s ease-in-out infinite alternate; }
.beta-scene [data-etat~="tas"] .voies-tas, .beta-scene [data-etat~="tas"] .voies-bache { opacity: 1; }
.beta-scene [data-etat~="tas"] .voies-lot .voies-item { opacity: 0; }
.beta-scene [data-etat~="rosee"] .voies-gouttes, .beta-scene [data-etat~="gouttes"] .voies-gouttes { opacity: 1; }
.beta-scene [data-etat~="pluie"] .voies-pluie { opacity: 1; }
.beta-scene .voies-gouttes line, .beta-scene .voies-pluie line { animation: voies-tombe 1.1s linear infinite; }
.beta-scene .voies-pluie line { animation-duration: .8s; }
.beta-scene [data-etat~="ir"] .voies-ir { opacity: .95; }
.beta-scene [data-etat~="sature"] .voies-brume { opacity: 1; }
.beta-scene .voies-brume ellipse { animation: voies-flotte 2.2s ease-in-out infinite alternate; }
.beta-scene .voies-volets { opacity: 1; }
.beta-scene [data-etat~="ouvert"] .voies-volet-g { transform: rotate(-70deg); } .beta-scene [data-etat~="ouvert"] .voies-volet-d { transform: rotate(70deg); }
.beta-scene [data-etat~="vent"] .voies-vent, .beta-scene [data-etat~="air"] .voies-air { opacity: .85; }
.beta-scene .voies-vent line, .beta-scene .voies-air line { animation: voies-file 1.2s linear infinite; }
.beta-scene [data-etat~="chaud"] .voies-chaud { opacity: 1; } .beta-scene [data-etat~="chaud"] .voies-fond-chaud { opacity: .9; }
.beta-scene [data-etat~="chaud"] .voies-dalle { fill: #7a3b2c; }
.beta-scene .voies-chaud path { animation: voies-monte 1.4s ease-in-out infinite alternate; }
.beta-scene [data-etat~="humide"] .voies-humide-dessous { opacity: 1; }
.beta-scene .voies-humide-dessous circle { animation: voies-pulse 1.6s ease-in-out infinite alternate; }
.beta-scene [data-etat~="moisi"] .voies-moisi-lot, .beta-scene [data-etat~="moisi"] .voies-moisi { opacity: 1; }
.beta-scene .voies-moisi-lot circle, .beta-scene .voies-moisi { animation: voies-pousse 2.4s ease-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.beta-scene [data-etat~="flore"] .voies-flore { opacity: 1; }
.beta-scene .voies-flore circle { animation: voies-pulse 1.3s ease-in-out infinite alternate; }
.beta-scene [data-etat~="frais"] .voies-frais { opacity: 1; }
.beta-scene [data-etat~="sac"] .voies-sac-nuit { opacity: 1; }
.beta-scene [data-etat~="preleve"] .voies-coupelle { opacity: 1; }
.beta-scene [data-etat~="cycle"] .voies-soleil { animation: voies-jour 6s ease-in-out infinite; }
.beta-scene [data-etat~="cycle"] .voies-lune, .beta-scene [data-etat~="cycle"][data-etat~="bache"] .voies-bache-nuit { animation: voies-nuit 6s ease-in-out infinite; }
.beta-scene [data-etat~="stinker"] .voies-k1 { fill: #2b1d17 !important; }
.beta-scene [data-etat~="noirvert"] .voies-k2, .beta-scene [data-etat~="noirvert"] .voies-k1 { fill: #1f2f24 !important; }
.beta-scene [data-etat~="taches"] .voies-k1, .beta-scene [data-etat~="taches"] .voies-k2 { fill: #6b5a3a !important; }
.beta-scene [data-etat~="occupe"] .voies-gauche { fill: #b9a77a !important; stroke: #7d6c45; }
.beta-scene [data-etat~="occupe"] .voies-lot .voies-droite { opacity: 0; }
.beta-scene [data-etat~="gonfle"] .voies-item { transform: scale(1.35); }
.beta-scene [data-etat~="lent"] .voies-item { transition-duration: 4s; }
.beta-scene [data-etat~="vite"] .voies-item { transition-duration: 1.6s; }
.beta-scene [data-etat~="mince"] .voies-item.r0, .beta-scene [data-etat~="mince"] .voies-item.r1 { opacity: 0; }
.beta-scene [data-etat~="vide"] .voies-lot .voies-item { opacity: 0; }
.beta-scene [data-etat~="couvert"] .voies-soleil { opacity: 0; }
/* Remplir et vider : un lot apparaît grain à grain, ou s'en va. Les contenants
   (voies-cont) sont vides par défaut. */
.beta-scene .voies-cont .voies-item { opacity: 0; }
.beta-scene [data-etat~="plein"] .voies-cont .voies-item { opacity: 1; }
.beta-scene [data-etat~="remplit"] .voies-cont .voies-item, .beta-scene [data-etat~="remplit"] .voies-lot .voies-item { opacity: 1; animation: voies-apparait .45s ease both; animation-delay: calc(var(--i) * var(--pas, 40ms)); }
.beta-scene [data-etat~="part"] .voies-cont .voies-item, .beta-scene [data-etat~="part"] .voies-lot .voies-item { opacity: 0; animation: voies-disparait .45s ease both; animation-delay: calc(var(--i) * var(--pas, 40ms)); }
.beta-scene [data-etat~="occupe"][data-etat~="remplit"] .voies-lot .voies-gauche { animation: none; opacity: 1; }
.beta-scene .voies-eau { fill: rgba(139,220,243,.22); }
.beta-scene .voies-flottant { fill: #7a3b2f; stroke: #ff9a64; stroke-width: 1; } .beta-scene .voies-dense { fill: #d9434d; }
.beta-scene .actif .voies-flottants { animation: voies-flotte 1.8s ease-in-out infinite alternate; }
.beta-scene .voies-chambre { fill: #18233d; stroke: #aab5c9; stroke-width: 3; }
.beta-scene .voies-grille { fill: none; stroke: #aab5c9; stroke-width: 4; stroke-dasharray: 3 3; }
.beta-scene .voies-caoutchouc { fill: none; stroke: #ff6b67; stroke-width: 6; stroke-linecap: round; }
.beta-scene .voies-bosse { fill: var(--beta-lemon,#d9ef59); }
.beta-scene .voies-tas-pulpe, .beta-scene .voies-tas-peau { fill: #ff6b67; opacity: .2; transition: opacity .6s ease; }
.beta-scene .voies-tas-coque { fill: #c19a6b; opacity: .2; transition: opacity .6s ease; }
.beta-scene .voies-plein { opacity: .95; }
.beta-scene .voies-vis-tube { fill: #18233d; stroke: #aab5c9; stroke-width: 1.5; } .beta-scene .voies-vis-pas line { stroke: #d9ef59; stroke-width: 1.5; }
.beta-scene .actif .voies-vis-pas { animation: voies-vis .6s linear infinite; }
.beta-scene .voies-liquide { transition: y .9s ease, height .9s ease, opacity .5s ease; }
.beta-scene .voies-claire { fill: rgba(139,220,243,.2); } .beta-scene .voies-trouble { fill: rgba(255,196,107,.24); } .beta-scene .voies-aucun { fill: none; }
.beta-scene .voies-ph { fill: #d9ef59; }
.beta-scene .voies-robinet { fill: none; stroke: #8bdcf3; stroke-width: 4; stroke-linecap: round; }
.beta-scene .voies-pagaie { stroke: #e6ecf5; stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: top; }
.beta-scene .voies-pale { opacity: 0; transition: opacity .4s ease; }
.beta-scene [data-etat~="brasse"] .voies-pale { opacity: 1; }
.beta-scene .actif .voies-pagaie { animation: voies-pagaie 1.4s ease-in-out infinite alternate; }
.beta-scene .voies-seuil { stroke: #aab5c9; stroke-width: 2; }
.beta-scene .voies-contre { stroke-dasharray: 10 8; }
.beta-scene .actif .voies-contre { animation: voies-file-inverse 1.2s linear infinite; }
.beta-scene .voies-sac { fill: #8f7a55; stroke: #d8c79e; stroke-width: 1.2; }
.beta-scene .actif .voies-pile { animation: voies-secoue 1.4s ease-in-out infinite; }
.beta-scene .voies-silo-corps { fill: rgba(255,255,255,.05); stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .voies-tube { fill: rgba(255,255,255,.06); stroke: #aab5c9; stroke-width: 2; }
.beta-scene .voies-bulbe, .beta-scene .voies-mercure { fill: #ff8a5c; } .beta-scene .voies-bulbe { stroke: #aab5c9; stroke-width: 2; }
.beta-scene .voies-mercure, .beta-scene .voies-niveau-j, .beta-scene .voies-plage { transition: y 1.2s ease, height 1.2s ease; }
.beta-scene .voies-humidite { fill: #8bdcf3; } .beta-scene .voies-chaleur { fill: #ff8a5c; }
.beta-scene .voies-plage { fill: rgba(217,239,89,.38); }
.beta-scene .voies-bande-risque { fill: #ff6b67; } .beta-scene .voies-bande-cible { fill: #9ee3cd; } .beta-scene .voies-bande-depart { fill: #8bdcf3; }
.beta-scene .voies-tic, .beta-scene .voies-axe { stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .voies-valeur { fill: #d9ef59; }
.beta-scene .voies-barre-fond { fill: rgba(255,255,255,.06); stroke: rgba(170,181,201,.5); stroke-width: 1; }
.beta-scene .voies-barre, .beta-scene .voies-barre-a { fill: #ff9a64; } .beta-scene .voies-barre-b { fill: #d9ef59; } .beta-scene .voies-barre-c { fill: #8bdcf3; } .beta-scene .voies-barre-d { fill: #9ee3cd; }
.beta-scene .voies-barre-amorce { opacity: .55; }
.beta-scene .voies-curseur line { stroke: #ffffff; stroke-width: 2.5; }
.beta-scene .voies-curseur { opacity: 0; }
.beta-scene [data-etat~="curseur"] .voies-curseur { opacity: 1; animation: voies-ratisse 4s linear infinite; }
.beta-scene .voies-note { fill: #d9ef59; }
.beta-scene .voies-ligne, .beta-scene .voies-source { transition: opacity .4s ease; }
.beta-scene .voies-pastille { stroke: #aab5c9; stroke-width: 1; }
.beta-scene .voies-rouge { fill: #ff6b67; } .beta-scene .voies-blanc { fill: #f3efe2; } .beta-scene .voies-jaune { fill: #f2c94c; } .beta-scene .voies-noir { fill: #3a2a26; }
.beta-scene .voies-muco { fill: #ff9a64; } .beta-scene .voies-brun { fill: #9a6a3a; }
.beta-scene .voies-c-peau { fill: #d9434d; } .beta-scene .voies-c-pulpe { fill: #ff8f86; } .beta-scene .voies-c-mucilage { fill: #ff9a64; }
.beta-scene .voies-c-parche { fill: #f0dda4; } .beta-scene .voies-c-pellicule { fill: none; stroke: #e6ecf5; stroke-width: 1.5; stroke-dasharray: 2 2; }
.beta-scene .voies-c-grain { fill: #9ee3cd; stroke: #5f9f8f; stroke-width: 1; }
.beta-scene .voies-c-taches circle { fill: #3d2a22; transform-box: fill-box; transform-origin: center; }
.beta-scene [data-etat~="pourrit"] .voies-c-taches { opacity: .95; }
.beta-scene [data-etat~="pourrit"] .voies-c-taches circle { animation: voies-pousse 2.8s ease-out infinite alternate; }
.beta-scene .voies-coupe { fill: none; stroke-width: 2.5; stroke-dasharray: 6 4; }
.beta-scene .voies-coupe-lave { stroke: #8bdcf3; } .beta-scene .voies-coupe-honey { stroke: #d9ef59; } .beta-scene .voies-coupe-nature { stroke: #ffffff; }
.beta-scene [data-etat~="coupes"] .voies-coupe, .beta-scene [data-etat~="coupes"] .voies-cle-coupes { opacity: 1; }
.beta-scene [data-etat~="coupes"] .voies-c-coupes .voies-coupe { animation: voies-file 1.4s linear infinite; }
.beta-scene [data-etat~="echelle"] .voies-echelle { opacity: 1; }
.beta-scene .voies-regle { fill: none; stroke: #e6ecf5; stroke-width: 1.8; }
.beta-scene [data-etat~="couches"] .voies-leg { animation: voies-allume 6s linear infinite; }
.beta-scene [data-etat~="couches"] .voies-leg-2 { animation-delay: 1s; } .beta-scene [data-etat~="couches"] .voies-leg-3 { animation-delay: 2s; }
.beta-scene [data-etat~="couches"] .voies-leg-4 { animation-delay: 3s; } .beta-scene [data-etat~="couches"] .voies-leg-5 { animation-delay: 4s; } .beta-scene [data-etat~="couches"] .voies-leg-6 { animation-delay: 5s; }
.beta-scene .voies-renvoi { stroke: #aab5c9; stroke-width: 1; }
.beta-scene .voies-cone { fill: rgba(255,255,255,.04); stroke: #d9ef59; stroke-width: 2.5; stroke-dasharray: 4 3; }
.beta-scene .voies-mobile { transition: cx 3.2s ease, cy 3.2s ease, fill .5s ease; }
.beta-scene .voies-niveau-cone { stroke: #8bdcf3; stroke-width: 2; stroke-dasharray: 5 3; transition: y1 3.2s ease, y2 3.2s ease; }
.beta-scene .voies-repere { stroke: #ff6b67; stroke-width: 3; }
.beta-scene .voies-four, .beta-scene .voies-cheminee { fill: #262c42; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .voies-flamme { fill: #ff8a5c; transform-box: fill-box; transform-origin: bottom; transition: opacity .5s ease; }
.beta-scene .actif .voies-flamme { animation: voies-flamme .5s ease-in-out infinite alternate; }
.beta-scene [data-etat~="eteint"] .voies-flamme { opacity: 0; }
.beta-scene .voies-echangeur, .beta-scene .voies-chambre-silo, .beta-scene .voies-instr { fill: #18233d; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .voies-tubes { stroke: #ff8a5c; stroke-width: 2.5; transition: stroke .5s ease; }
.beta-scene [data-etat~="eteint"] .voies-tubes { stroke: #59647a; }
.beta-scene .voies-ventilo { fill: #18233d; stroke: #d9ef59; stroke-width: 2.5; }
.beta-scene .voies-perfore { fill: #18233d; stroke: #aab5c9; stroke-width: 3; stroke-dasharray: 2 3; }
.beta-scene .voies-moyeu { fill: #ff8a5c; }
.beta-scene .actif .voies-tourne, .beta-scene .actif .voies-culbute { animation: beta-scene-tourne 17s linear infinite; }
.beta-scene .voies-aiguille, .beta-scene .voies-tourne, .beta-scene .voies-culbute { transform-box: fill-box; transform-origin: center; }
.beta-scene .voies-g-parche { fill: #f0dda4; } .beta-scene .voies-g-amande { fill: #9ee3cd; transition: fill .8s ease; }
.beta-scene [data-etat~="evente"] .voies-g-amande { fill: #b9c4bd; }
.beta-scene .voies-g-croute { fill: none; stroke: #2f6a5d; stroke-width: 6; }
.beta-scene [data-etat~="croute"] .voies-g-croute { opacity: 1; }
.beta-scene .voies-g-sillon { fill: none; stroke: #5f9f8f; stroke-width: 2; }
.beta-scene .voies-g-eau { fill: #2f7fd0; transition: opacity .5s ease; animation: voies-pulse 1.5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.beta-scene .voies-aspergillus path { fill: none; stroke: #9fb38a; stroke-width: 1.4; } .beta-scene .voies-aspergillus circle { fill: #2c3a24; stroke: #9fb38a; stroke-width: 1; }
.beta-scene [data-etat~="aspergillus"] .voies-aspergillus { opacity: 1; }
.beta-scene [data-etat~="bloque"] .voies-aspergillus { animation: voies-recule 3.5s ease-in forwards; }
.beta-scene .voies-instr-trait, .beta-scene .voies-instr-fil { fill: none; stroke: #aab5c9; stroke-width: 2.5; }
.beta-scene .voies-hublot { fill: rgba(255,138,92,.16); stroke: #aab5c9; stroke-width: 1.5; }
.beta-scene .voies-resistance { fill: none; stroke: #ff8a5c; stroke-width: 2; }
.beta-scene .voies-question { fill: #d9ef59; font: 800 30px 'Barlow Condensed', sans-serif; }
.beta-scene [data-etat~="manque"] .voies-question { opacity: 1; animation: voies-pulse 1.2s ease-in-out infinite alternate; }
.beta-scene .voies-z-film { fill: #f8f0da; } .beta-scene .voies-z-laque { fill: #6a3d22; stroke: #4d2a17; stroke-width: 1.5; }
.beta-scene .voies-z-parche { fill: #e8d6a3; stroke: #b9a26a; stroke-width: 1; }
.beta-scene .voies-fissure { stroke: #18233d; stroke-width: 1.5; }
.beta-scene .voies-zl { opacity: .18; transition: opacity .5s ease; }
.beta-scene .voies-zl.voies-allume { opacity: 1; }
.beta-scene .voies-cache { opacity: 0 !important; }
.beta-scene .voies-trace { fill: none; stroke: none; }
.beta-scene .voies-chute { fill: none; stroke: #4e5c86; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.beta-scene .voies-lab { fill: #dfe5f2; }
.beta-scene .voies-lab-pays { fill: #eef2fb; font: 700 15px 'Atkinson Hyperlegible Next',sans-serif; }
.beta-scene .voies-lab-pulpe { fill: #ff9a64; }
.beta-scene .voies-lab-lave { fill: #8bdcf3; font-weight: 700; } .beta-scene .voies-lab-honey { fill: #d9ef59; font-weight: 700; } .beta-scene .voies-lab-nature { fill: #ffffff; font-weight: 700; }
@keyframes voies-ratisse { to { transform: translateX(var(--course)); } }
@keyframes voies-tombe { from { transform: translateY(-4px); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(12px); opacity: 0; } }
@keyframes voies-file { to { stroke-dashoffset: -36; } }
@keyframes voies-file-inverse { to { stroke-dashoffset: 36; } }
@keyframes voies-monte { from { transform: translateY(2px); opacity: .5; } to { transform: translateY(-5px); opacity: 1; } }
@keyframes voies-flotte { to { transform: translateY(2px); } }
@keyframes voies-pagaie { to { transform: rotate(-14deg); } }
@keyframes voies-secoue { 50% { transform: translateX(1.5px); } }
@keyframes voies-flamme { to { transform: scaleY(.78); } }
@keyframes voies-pulse { from { opacity: .45; } to { opacity: 1; } }
@keyframes voies-pousse { from { transform: scale(.4); } to { transform: scale(1.15); } }
@keyframes voies-apparait { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes voies-disparait { from { opacity: 1; } to { opacity: 0; transform: translateY(4px); } }
@keyframes voies-jour { 0%, 45% { opacity: 1; } 55%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes voies-nuit { 0%, 45% { opacity: 0; } 55%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes voies-vis { to { transform: translateX(-5px); } }
@keyframes voies-allume { 0%, 16% { fill: #d9ef59; } 17%, 100% { fill: #aab3c9; } }
@keyframes voies-recule { from { opacity: 1; } to { opacity: .1; } }
@media (prefers-reduced-motion: reduce) {
  .beta-scene [class*="voies-"], .beta-scene [class*="voies-"] * { animation: none !important; }
}

/* ── beta_da_accueil ── */

/* L'ouverture : le visuel cosmique devient l'horizon de la scène 16 bits. */
main.moderne .beta-home-hero .beta-home-stage::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  left: calc(100% - 1010px); bottom: 0; width: 1066px; height: 342px;
  background: url("media/accueil-filigrane.webp") no-repeat 0 0 / 100% 100%;
  image-rendering: pixelated;
}
/* Une seule tasse dans la scène : celle du visuel, dont la vapeur devient la
   galaxie. La tasse dessinée de l'écran v47 et sa vapeur se retirent. */
main.moderne .beta-home-hero .beta-home-signal .px16-cup { visibility: hidden; }
/* Le titre et l'œil gardent leurs couleurs claires sur le cartouche sombre :
   la règle commune `main.moderne .hero h1 em` les passait en violet, mesuré à
   2,45:1 sur la v67 (2,48:1 pour l'œil). */
main.moderne .beta-home-hero .beta-home-copy h1 em { color: #c8bdff !important; }
/* Au-delà de 1 290 px, 7vw faisait passer « café. » sur une troisième ligne : le
   cartouche s'allongeait et recouvrait la tasse. Le titre plafonne à 90 px. */
@media (min-width: 701px) {
  main.moderne .beta-home-hero .beta-home-copy h1 { font-size: clamp(58px,7vw,90px) !important; }
}
main.moderne .beta-home-hero .beta-home-copy .rub { color: var(--beta-lemon) !important; }

/* Les trois blocs qui suivent l'ouverture. */
.beta-accueil-vitrine { display: grid; gap: 34px; margin: 0 0 58px; }
.beta-accueil-bloc { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(20px,3vw,40px); align-items: center; padding: clamp(20px,3vw,38px); border: 4px solid var(--beta-ink); }
.beta-accueil-oeil { display: block; font: 700 11px/1.3 'IBM Plex Mono',monospace; letter-spacing: .12em; text-transform: uppercase; }
.beta-accueil-oeil::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: currentColor; box-shadow: 4px 4px 0 var(--beta-lemon); vertical-align: 2px; }
main.moderne .beta-accueil-bloc h2 { margin: 12px 0 14px !important; font: 800 clamp(36px,4.6vw,62px)/.9 'Barlow Condensed',sans-serif !important; letter-spacing: -.018em; }
main.moderne .beta-accueil-bloc p { max-width: 560px; margin: 0 0 14px !important; font: 500 16px/1.5 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-accueil-action { display: inline-flex; align-items: center; gap: 10px; min-height: 45px; margin-top: 8px; padding: 10px 15px; border: 2px solid var(--beta-ink); background: var(--beta-lemon); color: var(--beta-ink) !important; text-decoration: none; font: 800 12px/1.2 'IBM Plex Mono',monospace; letter-spacing: .04em; box-shadow: 5px 5px 0 var(--beta-ink); }
.beta-accueil-action:hover, .beta-accueil-action:focus-visible { background: #fff; }
.beta-accueil-capture { margin: 0; border: 4px solid var(--beta-ink); background: var(--beta-ink); }
.beta-accueil-capture img { display: block; width: 100%; height: auto; }

/* Le quiz : un bloc violet, l'écran du jeu à gauche, les quatre modes en grille. */
.beta-accueil-quiz { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); background: var(--beta-violet); color: #fff; box-shadow: 10px 10px 0 var(--beta-ink); }
.beta-accueil-quiz .beta-accueil-oeil { color: #fff; }
main.moderne .beta-accueil-quiz :is(h2,p) { color: #fff !important; }
.beta-accueil-quiz .beta-accueil-capture { box-shadow: 7px 7px 0 var(--beta-lemon); }
.beta-accueil-modes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; margin: 4px 0 18px; padding: 2px; list-style: none; background: var(--beta-ink); }
.beta-accueil-modes li { margin: 0; padding: 10px 12px; background: var(--beta-paper); color: var(--beta-ink); font: 500 14px/1.3 'Atkinson Hyperlegible Next',sans-serif; }
.beta-accueil-modes b { display: block; color: var(--beta-violet); font: 700 12px/1.2 'IBM Plex Mono',monospace; letter-spacing: .04em; text-transform: uppercase; }

/* L'atlas : le bloc le plus large, sur le fond sombre des scènes. */
.beta-accueil-atlas { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); background: #121b30; color: #fff; box-shadow: 10px 10px 0 var(--beta-violet); }
.beta-accueil-atlas .beta-accueil-oeil { color: var(--beta-lemon); }
main.moderne .beta-accueil-atlas :is(h2,p) { color: #fff !important; }
main.moderne .beta-accueil-atlas p.beta-accueil-exemple { padding: 12px 14px; border-left: 6px solid var(--beta-lemon); background: #1d2944; color: #edf0f8 !important; }
.beta-accueil-atlas .beta-accueil-capture { border-color: #fff; box-shadow: 7px 7px 0 var(--beta-violet); }

/* Les tribunes, remontées sous l'atlas : même bande sombre, mais titres en
   Barlow et textes lisibles (le violet d'origine sur l'encre tombait à 2,9:1). */
main.moderne section.sect.beta-home-tribunes { margin-bottom: 58px; padding-bottom: clamp(34px,4vw,56px) !important; border-top: 8px solid var(--beta-lemon); }
main.moderne section.beta-home-tribunes > .beta-accueil-oeil { margin-bottom: 14px; color: var(--beta-lemon) !important; }
main.moderne section.beta-home-tribunes > .tete { border-top: 0; padding-top: 0; margin-bottom: 14px; }
main.moderne section.beta-home-tribunes .tete h2 { color: #fff !important; font: 800 clamp(36px,4.6vw,62px)/.9 'Barlow Condensed',sans-serif !important; letter-spacing: -.018em; font-variation-settings: normal; }
main.moderne section.beta-home-tribunes .tete a { color: var(--beta-lemon) !important; border-bottom: 2px solid var(--beta-lemon); font: 700 12px/1.2 'IBM Plex Mono',monospace; letter-spacing: .04em; }
main.moderne section.beta-home-tribunes .tb-chapeau { max-width: 64ch; margin: 0 0 30px; color: #d8dbe4 !important; font: 500 16px/1.5 'Atkinson Hyperlegible Next',sans-serif; }
main.moderne section.beta-home-tribunes .tbg { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px 26px; }
main.moderne section.beta-home-tribunes a.tb { padding: 14px 0 0; border-top: 4px solid var(--beta-violet); color: #fff !important; }
main.moderne section.beta-home-tribunes .tb-m { margin-bottom: 8px; color: #9ee3cd !important; font: 600 11px/1.4 'IBM Plex Mono',monospace; letter-spacing: .04em; text-transform: uppercase; }
main.moderne section.beta-home-tribunes .tb b { color: #fff; font: 700 clamp(25px,2.3vw,31px)/1 'Barlow Condensed',sans-serif; letter-spacing: -.01em; font-variation-settings: normal; }
main.moderne section.beta-home-tribunes .tb p { margin: 10px 0 0; color: #d8dbe4 !important; font: 500 15px/1.5 'Atkinson Hyperlegible Next',sans-serif; }
main.moderne section.beta-home-tribunes a.tb:hover, main.moderne section.beta-home-tribunes a.tb:focus-visible { border-top-color: var(--beta-lemon); }
main.moderne section.beta-home-tribunes a.tb:hover b, main.moderne section.beta-home-tribunes a.tb:focus-visible b { color: var(--beta-lemon); }

@media (max-width: 900px) {
  main.moderne section.beta-home-tribunes .tbg { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  main.moderne .beta-home-hero .beta-home-stage { min-height: 800px; }
  main.moderne .beta-home-hero .beta-home-stage::after { left: calc(50% - 560px); bottom: 88px; }
  main.moderne section.beta-home-tribunes .tbg { grid-template-columns: minmax(0,1fr); gap: 22px; }
  main.moderne section.beta-home-tribunes .tb p { font-size: 14px; }
  .beta-accueil-vitrine { gap: 26px; margin-bottom: 40px; }
  .beta-accueil-bloc, .beta-accueil-quiz, .beta-accueil-atlas { grid-template-columns: minmax(0,1fr); padding: 20px 16px 22px; box-shadow: 7px 7px 0 var(--beta-ink); }
  .beta-accueil-atlas { box-shadow: 7px 7px 0 var(--beta-violet); }
  .beta-accueil-capture { order: 2; }
  .beta-accueil-modes li { padding: 9px 10px; font-size: 13px; }
}

/* ── beta_da_accueil_16bits ── */

/* ── Accueil, proposition « 16 bits », v4 : le générique ── */
main.moderne .beta-home-hero .beta-a3 {
  --s: 4; --cam: 736;
  position: relative; display: grid; gap: 14px;
  padding: clamp(18px,2.4vw,28px);
  border: 4px solid var(--beta-ink); background: #121b30; color: #fff;
  box-shadow: 12px 12px 0 var(--beta-violet);
}
.beta-a3-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 20px; }
main.moderne .beta-home-hero .beta-a3 h1 {
  margin: 0 !important; color: #fff !important;
  font: 800 clamp(52px,5.4vw,76px)/.86 'Barlow Condensed',sans-serif !important; letter-spacing: -.025em;
}
main.moderne .beta-home-hero .beta-a3 h1 em { color: var(--beta-lemon) !important; font-style: normal; }
.beta-a3-stop {
  min-height: 36px; padding: 7px 12px; border: 2px solid #59647a; background: transparent; color: #dfe5f2;
  font: 600 12px/1 'IBM Plex Mono',monospace; letter-spacing: .04em; cursor: pointer;
}
.beta-a3-stop:hover, .beta-a3-stop:focus-visible { border-color: var(--beta-lemon); color: var(--beta-lemon); }

/* L'écran : 96 pixels natifs de haut, une largeur d'un nombre PAIR de tuiles de
   16 px (le cadre se cale sur la grille : rien n'est coupé au repos). */
.beta-a3-ecran {
  position: relative; overflow: hidden; justify-self: center;
  width: 100%; width: round(down, 100%, calc(32px * var(--s))); height: calc(96px * var(--s)); background: #121b30;
}
.beta-a3-fond, .beta-a3-monde, .beta-a3-devant {
  position: absolute; top: 0; left: 50%; height: 96px; transform-origin: 0 0; image-rendering: pixelated;
}
/* Trois vitesses : le mur à 0,5, les postes à 1, l'avant-plan à 1,5. */
.beta-a3-fond { width: 900px; transform: scale(var(--s)) translateX(calc(var(--cam) * -.5px)); }
.beta-a3-monde { width: 1000px; transform: scale(var(--s)) translateX(calc(var(--cam) * -1px)); }
.beta-a3-devant { width: 1300px; transform: scale(var(--s)) translateX(calc(var(--cam) * -1.5px)); }
.beta-a3-fond > *, .beta-a3-monde > *, .beta-a3-devant > * { position: absolute; display: block; image-rendering: pixelated; background-repeat: no-repeat; }
.beta-a3-mur { left: -200px; top: 8px; width: 1100px; height: 64px; background: url(media/accueil3-mur.png) repeat-x; }
.beta-a3-sol { left: -200px; top: 64px; width: 1400px; height: 32px; background: url(media/accueil3-sol.png) repeat-x; }
/* Les lampes, posées sur le bandeau gris au-dessus des fenêtres, à x ≡ 368 (mod 96) :
   au repos, aucune n'est coupée au bord, à 1 280 comme à 390 px. */
.beta-a3-lampe { top: 9px; width: 16px; height: 16px; background-image: url(media/accueil3-lampe.png); }
.beta-a3-fond > :nth-child(2) { left: -24px; } .beta-a3-fond > :nth-child(3) { left: 72px; }
.beta-a3-fond > :nth-child(4) { left: 168px; } .beta-a3-fond > :nth-child(5) { left: 264px; }
.beta-a3-fond > :nth-child(6) { left: 360px; } .beta-a3-fond > :nth-child(7) { left: 456px; }
.beta-a3-fond > :nth-child(8) { left: 552px; }
/* Le monde : meubles entre les postes, postes. Coordonnées en pixels natifs. */
.beta-a3-casier { left: 40px; top: 31px; } .beta-a3-casier2 { left: 800px; top: 31px; }
.beta-a3-armoire { left: 232px; top: 42px; } .beta-a3-verre { left: 272px; top: 34px; }
.beta-a3-machine { left: 378px; top: 48px; }
.beta-a3-p1 { left: 420px; top: 74px; } .beta-a3-fioles { left: 426px; top: 66px; }
.beta-a3-etagere { left: 618px; top: 49px; }
.beta-a3-p2 { left: 470px; top: 74px; }
.beta-a3-cafeier, .beta-a3-cerises { left: 136px; top: 26px; width: 48px; height: 64px; }
.beta-a3-cafeier { background-image: url(media/accueil3-g-cafeier-feuilles.png); }
.beta-a3-cerises { background-image: url(media/accueil3-g-cafeier-cerises.png); background-position: -96px 0; }
.beta-a3-cuve { left: 328px; top: 42px; z-index: 2; }
.beta-a3-bulles { left: 350px; top: 66px; z-index: 3; width: 6px; height: 10px; background-image: url(media/accueil3-g-bulles.png); }
.beta-a3-chute { left: 349px; top: -8px; z-index: 1; width: 6px; height: 6px; background-image: url(media/accueil3-g-cerise.png); visibility: hidden; }
/* Le torréfacteur, 88 px : la plus haute machine du laboratoire (232 cm). */
.beta-a3-torr { left: 520px; top: 2px; z-index: 2; }
.beta-a3-tambour { left: 551px; top: 35px; z-index: 3; width: 21px; height: 21px; background-image: url(media/accueil3-g-tambour.png); }
/* La vapeur monte du bord droit du bac de refroidissement (v11 : la bouffée de
   la Legacy Collection, 6 images de 63 x 37, éclose en (582, 59) ; plus à gauche
   elle masquait la porte du tambour qui tourne). */
.beta-a3-vapeur { left: 552px; top: 24px; z-index: 3; width: 63px; height: 37px; background-image: url(media/accueil4-vapeur.png); background-position: -189px 0; }
.beta-a3-ecran-vide, .beta-a3-courbe { left: 471px; top: 44px; }
.beta-a3-courbe { transform: scaleX(-1); }
.beta-a3-livre { left: 720px; top: 42px; }
/* L'avant-plan, en x de la couche rapide (1,5) ; masqué sur téléphone. */
.beta-a3-borne { top: 60px; } .beta-a3-tuyau { top: 40px; }
.beta-a3-devant > :nth-child(1) { left: 150px; } .beta-a3-devant > :nth-child(2) { left: 340px; }
.beta-a3-devant > :nth-child(3) { left: 560px; } .beta-a3-devant > :nth-child(4) { left: 760px; }
.beta-a3-devant > :nth-child(5) { left: 900px; } .beta-a3-devant > :nth-child(6) { left: 1010px; }
.beta-a3-devant > :nth-child(7) { left: 1150px; }

/* Ce qui bouge en permanence pendant le générique. */
.beta-a3-joue .beta-a3-lampe { animation: beta-a3-l8 2.4s steps(8, end) infinite; }
.beta-a3-joue .beta-a3-cafeier { animation: beta-a3-frisson .7s steps(2, end) infinite; }
.beta-a3-joue .beta-a3-cerises { animation: beta-a3-murit 3s steps(2, end) 1.2s both; }
.beta-a3-joue .beta-a3-chute { visibility: visible; animation: beta-a3-chute 1.1s steps(11, end) infinite; }
.beta-a3-joue .beta-a3-c2 { animation-delay: .37s; left: 345px; }
.beta-a3-joue .beta-a3-c3 { animation-delay: .74s; left: 353px; }
.beta-a3-joue .beta-a3-bulles { animation: beta-a3-bulles 1.6s steps(16, end) infinite; }
.beta-a3-joue .beta-a3-tambour { animation: beta-a3-tourne .8s steps(4, end) infinite; }
.beta-a3-joue .beta-a3-vapeur { animation: beta-a3-vapeur 1.2s steps(6, end) infinite; }
.beta-a3-joue .beta-a3-courbe { animation: beta-a3-trace 4s steps(23, end) infinite; }
@keyframes beta-a3-l8 { from { background-position: 0 0; } to { background-position: -128px 0; } }
@keyframes beta-a3-frisson { from { background-position: 0 0; } to { background-position: -96px 0; } }
@keyframes beta-a3-murit { from { background-position: 0 0; } to { background-position: -96px 0; } }
@keyframes beta-a3-chute { from { transform: translateY(0); } to { transform: translateY(55px); } }
@keyframes beta-a3-bulles { from { background-position: 0 0; } to { background-position: -96px 0; } }
@keyframes beta-a3-tourne { from { background-position: 0 0; } to { background-position: -84px 0; } }
@keyframes beta-a3-vapeur { from { background-position: 0 0; } to { background-position: -378px 0; } }
/* La courbe se trace de gauche à droite : l'écran plein est dévoilé en marches
   par-dessus l'écran vide (miroir : on dévoile depuis la droite du sprite). */
@keyframes beta-a3-trace { from { clip-path: inset(0 0 0 100%); } 80%, to { clip-path: inset(0 0 0 0); } }

/* Le prélude : une image du montage par-dessus le laboratoire. */
.beta-a3-montage { position: absolute; inset: 0; z-index: 5; display: none; background: #121b30; }
.beta-a3[data-phase="montage"] .beta-a3-montage { display: block; }
.beta-a3-image {
  position: absolute; left: 50%; top: 0; width: 272px; height: 96px; transform-origin: 0 0;
  image-rendering: pixelated; background-repeat: no-repeat;
}
.beta-a3-date {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 12px; background: rgba(18,27,48,.86);
  color: #fff; font: 600 13px/1.3 'IBM Plex Mono',monospace; letter-spacing: .04em;
}
.beta-a3-date::before { content: '▸ '; color: var(--beta-lemon); }
.beta-a3-flash { position: absolute; inset: 0; z-index: 6; background: #fff; display: none; }
.beta-a3[data-phase="eclair"] .beta-a3-flash { display: block; }
/* Le titre attend la fin du montage, puis arrive en marches. */
/* Le titre « PXL Roasters » reste visible dès le début du générique (Marco,
   22/10/2026 : « le logo doit être là dès le début ») : plus de masque pendant le
   prélude ni de dévoilement à l'arrêt sur le titre. */
.beta-a3[data-phase="montage"] .beta-a3-tete h1, .beta-a3[data-phase="eclair"] .beta-a3-tete h1 { clip-path: none; }
.beta-a3[data-phase="titre"] .beta-a3-tete h1 { animation: none; }
@keyframes beta-a3-titre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Pendant le prélude, la boîte de dialogue attend (sa place est gardée). */
.beta-a3[data-phase="montage"] .beta-a3-carton, .beta-a3[data-phase="eclair"] .beta-a3-carton { visibility: hidden; }
/* Le balayage entre deux postes : un volet d'encre traverse l'écran en 8 marches. */
.beta-a3-volet { position: absolute; inset: 0; z-index: 4; background: #121b30; clip-path: inset(0 100% 0 0); pointer-events: none; }
.beta-a3-volet.beta-a3-balaie { animation: beta-a3-volet .42s steps(8, end); }
@keyframes beta-a3-volet { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }

/* Le carton : une boîte de dialogue de jeu, papier et encre, deux lignes. */
.beta-a3-carton {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  min-height: 3.3em; margin: 0; padding: 11px 14px;
  border: 3px solid var(--beta-ink); background: var(--beta-paper); color: var(--beta-ink);
  box-shadow: 0 0 0 3px #59647a, 6px 6px 0 3px var(--beta-violet);
  font: 500 15px/1.45 'IBM Plex Mono',monospace;
}
.beta-a3-carton b { color: var(--beta-violet); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.beta-a3-curseur { display: inline-block; width: .6em; height: 1em; margin-left: 2px; background: var(--beta-violet); vertical-align: -2px; }
.beta-a3-joue .beta-a3-curseur { animation: beta-a3-curseur .8s steps(1, end) infinite; }
@keyframes beta-a3-curseur { 50% { visibility: hidden; } }
.beta-a3-carton.beta-a3-balaie { animation: beta-a3-carton .3s steps(6, end); }
@keyframes beta-a3-carton { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.beta-a3-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; margin-top: 6px; }
main.moderne .beta-a3 .beta-a3-promesse { max-width: 46ch; margin: 0 !important; color: #edf0f8 !important; font: 600 clamp(17px,1.5vw,20px)/1.4 'Atkinson Hyperlegible Next',sans-serif !important; }
.beta-a3-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
main.moderne .beta-a3 a.beta-a3-go { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 18px; border: 3px solid var(--beta-lemon); background: var(--beta-lemon); color: var(--beta-ink); text-decoration: none; font: 800 12px/1.2 'IBM Plex Mono',monospace; letter-spacing: .05em; text-transform: uppercase; box-shadow: 5px 5px 0 var(--beta-violet); }
main.moderne .beta-a3 a.beta-a3-go:hover, main.moderne .beta-a3 a.beta-a3-go:focus-visible { background: #fff; border-color: #fff; }
main.moderne .beta-a3 a.beta-a3-ou { color: #fff; font: 700 15px/1.3 'Atkinson Hyperlegible Next',sans-serif; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Le PNJ : le torréfacteur qui parle. Il entre au début du travelling, marche
   de poste en poste (6 images de profil) et s'arrête devant chacun (4 images de face). */
.beta-a3-pnj { left: 690px; top: 46px; z-index: 4; width: 30px; height: 44px; background-image: url(media/accueil3-pnj-face.png); }
.beta-a3-pnj.beta-a3-marche { background-image: url(media/accueil3-pnj-marche.png); }
.beta-a3-joue .beta-a3-pnj { animation: none; }
.beta-a3-joue .beta-a3-pnj.beta-a3-marche { animation: beta-a3-pas .56s steps(4, end) infinite; }
@keyframes beta-a3-repos { to { background-position: -52px 0; } }
@keyframes beta-a3-pas { to { background-position: -120px 0; } }
/* Les cartons deviennent ses bulles : cadre du pack Kenney en 9 tranches (bord de
   4 px, agrandi x3), portrait du PNJ à gauche, pointe vers la scène. */
.beta-a3 .beta-a3-carton {
  position: relative; margin-top: 10px; padding: 6px 8px 6px 66px; min-height: 66px;
  border: 12px solid transparent; border-image: url(media/accueil3-bulle.png) 4 fill / 12px; image-rendering: pixelated;
  background: none; box-shadow: none; color: var(--beta-ink);
}
.beta-a3 .beta-a3-carton b { color: var(--beta-ink); }
.beta-a3-portrait { position: absolute; left: 0; top: 50%; width: 52px; height: 44px; transform: translateY(-50%);
  background: url(media/accueil3-pnj-portrait.png) 0 0 / 52px 44px no-repeat; image-rendering: pixelated; }
.beta-a3-pointe { position: absolute; left: 10px; top: -33px; width: 24px; height: 24px;
  background: url(media/accueil3-pointe.png) 0 0 / 24px 24px no-repeat; image-rendering: pixelated; }

/* Figé : le titre et le dernier carton, rien ne bouge. */
.beta-a3-fige *, .beta-a3-fige .beta-a3-fond, .beta-a3-fige .beta-a3-monde, .beta-a3-fige .beta-a3-devant { animation: none !important; transition: none !important; }
.beta-a3-fige .beta-a3-tete h1 { clip-path: none; }
.beta-a3-fige .beta-a3-vapeur, .beta-a3-fige .beta-a3-chute { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .beta-a3 *, .beta-a3-fond, .beta-a3-monde, .beta-a3-devant { animation: none !important; transition: none !important; }
  .beta-a3 .beta-a3-montage, .beta-a3 .beta-a3-flash { display: none !important; }
  .beta-a3 .beta-a3-tete h1 { clip-path: none !important; }
  .beta-a3-stop { display: none; }
}
@media (max-width: 980px) { main.moderne .beta-home-hero .beta-a3 { --s: 3; } }
@media (max-width: 700px) {
  main.moderne .beta-home-hero .beta-a3 { gap: 12px; padding: 14px 12px 18px; box-shadow: 7px 7px 0 var(--beta-violet); }
  main.moderne .beta-home-hero .beta-a3 h1 { font-size: clamp(44px,13vw,56px) !important; }
  /* Deux plans seulement sur téléphone : le mur et les postes, un objet en gros. */
  .beta-a3-devant { display: none; }
  .beta-a3-carton { font-size: 14px; min-height: 4.6em; padding: 9px 11px; }
  .beta-a3-date { font-size: 12px; }
  .beta-a3-bas { display: grid; gap: 14px; }
}

/* ── beta_da_accueil_generique ── */

/* ── beta_da_accueil_planche ── */

/* ── beta_da_accueil_typo ── */

/* ── beta_da_calculateur ── */

/* Calculateur d'eau (eau-09). Jetons de la bêta seulement : encre, papier, violet,
   citron, filet ; gris secondaires déjà employés par beta_atlas.css (#4d5564, #eef0f5). */
#calc.beta-eau:not(#beta-eau-poids) {
  --be-second: #4d5564;
  --be-panneau: #eef0f5;
  box-sizing: border-box;
  margin: 28px 0 34px;
  color: var(--beta-ink);
  font: 400 16px/1.5 'Atkinson Hyperlegible Next', Arial, sans-serif;
}
#calc.beta-eau:not(#beta-eau-poids) *, #calc.beta-eau:not(#beta-eau-poids) *::before, #calc.beta-eau:not(#beta-eau-poids) *::after { box-sizing: border-box; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-tete { padding: 0 0 18px; border-bottom: 2px solid var(--beta-ink); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-oeil {
  display: block; margin: 0 0 6px;
  font: 600 12px/1.3 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase;
  color: var(--beta-violet);
}
#calc.beta-eau:not(#beta-eau-poids) h2.beta-eau-h {
  margin: 0 0 10px; padding: 0; border: 0;
  font: 800 clamp(34px, 5vw, 52px)/.95 'Barlow Condensed', sans-serif; letter-spacing: -.018em;
  color: var(--beta-ink);
}
#calc.beta-eau:not(#beta-eau-poids) p.beta-eau-intro { margin: 0 0 14px; max-width: 64ch; font-size: 17px; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-etapes {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: be;
}
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-etapes li { margin: 0; padding: 0; counter-increment: be; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-etapes a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px;
  border: 1px solid var(--beta-ink); background: #fff; color: var(--beta-ink); text-decoration: none;
  font: 700 15px/1.2 'Atkinson Hyperlegible Next', sans-serif;
}
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-etapes a::before { content: counter(be); font: 600 13px 'IBM Plex Mono', monospace; color: var(--beta-violet); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-etapes a:hover { background: var(--beta-lemon); }

#calc.beta-eau:not(#beta-eau-poids) .beta-eau-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-bloc { padding: 26px 0 28px; border-bottom: 1px solid var(--beta-line); }
#calc.beta-eau:not(#beta-eau-poids) h3.beta-eau-h3 {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; padding: 0; border: 0;
  font: 700 clamp(26px, 3.4vw, 34px)/1 'Barlow Condensed', sans-serif; letter-spacing: -.018em; color: var(--beta-ink);
}
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-no {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px;
  background: var(--beta-violet); color: #fff; border: 2px solid var(--beta-ink);
  font: 700 18px/1 'IBM Plex Mono', monospace; transform: translateY(-3px);
}
#calc.beta-eau:not(#beta-eau-poids) h4.beta-eau-h4 {
  margin: 22px 0 8px; padding: 0; border: 0;
  font: 600 12px/1.3 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--beta-violet);
}
#calc.beta-eau:not(#beta-eau-poids) p.beta-eau-note, #calc.beta-eau:not(#beta-eau-poids) p.beta-eau-desc, #calc.beta-eau:not(#beta-eau-poids) p.beta-eau-deduit, #calc.beta-eau:not(#beta-eau-poids) p.beta-eau-piege {
  margin: 0 0 14px; max-width: 70ch; font-size: 16px; line-height: 1.5;
}
#calc.beta-eau:not(#beta-eau-poids) p.beta-eau-desc { padding: 10px 14px; background: var(--be-panneau); border-left: 4px solid var(--beta-violet); }
#calc.beta-eau:not(#beta-eau-poids) p.beta-eau-piege:empty, #calc.beta-eau:not(#beta-eau-poids) p.beta-eau-deduit:empty, #calc.beta-eau:not(#beta-eau-poids) p.beta-eau-desc:empty { display: none; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-src, #calc.beta-eau:not(#beta-eau-poids) p.beta-eau-src {
  display: block; margin: 6px 0 0;
  font: 400 13px/1.45 'IBM Plex Mono', monospace; color: var(--be-second);
}
#calc.beta-eau:not(#beta-eau-poids) p .beta-eau-src { display: block; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-alerte, #calc.beta-eau:not(#beta-eau-poids) p.beta-eau-alerte {
  margin: 10px 0; padding: 10px 14px; border: 2px solid var(--beta-ink); background: var(--beta-lemon);
  font-weight: 700;
}

/* Choix du mode : boutons, l'état pressé en citron (comme les commandes des scènes). */
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-choix { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-choix button, #calc.beta-eau:not(#beta-eau-poids) .beta-eau-bouton, #calc.beta-eau:not(#beta-eau-poids) .beta-eau-liste button, #calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende button {
  min-height: 46px; padding: 10px 14px; cursor: pointer;
  border: 2px solid var(--beta-ink); border-radius: 0; background: #fff; color: var(--beta-ink);
  font: 700 15px/1.2 'Atkinson Hyperlegible Next', sans-serif; text-align: left;
}
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-choix button[aria-pressed="true"] { background: var(--beta-lemon); box-shadow: 3px 3px 0 var(--beta-ink); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-bouton { background: var(--beta-violet); color: #fff; box-shadow: 3px 3px 0 var(--beta-ink); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-bouton:hover, #calc.beta-eau:not(#beta-eau-poids) .beta-eau-choix button:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--beta-ink); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-actions { margin: 4px 0 16px; }

/* La liste des eaux en bouteille */
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; margin: 0 0 14px; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-liste button { display: grid; gap: 2px; padding: 8px 12px; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-liste button span { font: 400 13px/1.35 'IBM Plex Mono', monospace; color: var(--be-second); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-liste button[aria-pressed="true"] { background: var(--beta-lemon); box-shadow: 3px 3px 0 var(--beta-ink); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-liste button[aria-pressed="true"] span { color: var(--beta-ink); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-liste .beta-eau-groupe {
  grid-column: 1 / -1; margin: 8px 0 0; font: 600 12px/1.3 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--beta-violet);
}
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-fiche:empty { display: none; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-fiche { padding: 14px 16px; border: 1px solid var(--beta-line); background: #fff; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-fiche strong { font: 700 22px/1.1 'Barlow Condensed', sans-serif; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-fiche dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px 14px; margin: 10px 0; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-fiche dt { font: 400 13px/1.3 'IBM Plex Mono', monospace; color: var(--be-second); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-fiche dd { margin: 0; font: 600 16px/1.3 'IBM Plex Mono', monospace; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-fiche p { margin: 8px 0 0; font-size: 15px; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-ecart { padding-left: 10px; border-left: 4px solid var(--beta-lemon); }

/* Champs : lisibles au doigt, 16 px pour qu'iOS ne zoome pas. */
#calc.beta-eau:not(#beta-eau-poids) fieldset.beta-eau-grille, #calc.beta-eau:not(#beta-eau-poids) div.beta-eau-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr)); gap: 12px 14px;
  margin: 0 0 16px; padding: 0; border: 0; min-width: 0;
}
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-grille.beta-eau-grille-large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
#calc.beta-eau:not(#beta-eau-poids) fieldset.beta-eau-grille legend {
  grid-column: 1 / -1; float: left; width: 100%; margin: 0 0 2px; padding: 0;
  font: 600 12px/1.3 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--beta-violet);
}
#calc.beta-eau:not(#beta-eau-poids) label.beta-eau-champ { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-lib { font: 700 14px/1.25 'Atkinson Hyperlegible Next', sans-serif; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-aide { font: 400 13px/1.3 'Atkinson Hyperlegible Next', sans-serif; color: var(--be-second); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-saisie { display: flex; align-items: stretch; min-width: 0; border: 2px solid var(--beta-ink); background: #fff; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-saisie input {
  flex: 1 1 auto; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 8px 10px;
  border: 0; border-radius: 0; background: transparent; color: var(--beta-ink);
  font: 600 16px/1.2 'IBM Plex Mono', monospace;
}
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-saisie input[aria-invalid="true"] { background: var(--beta-lemon); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-unite {
  display: flex; align-items: center; flex: none; padding: 0 9px; background: var(--be-panneau);
  border-left: 1px solid var(--beta-line); font: 400 13px/1 'IBM Plex Mono', monospace; color: var(--be-second);
}
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-unite:empty { display: none; }
#calc.beta-eau:not(#beta-eau-poids) select {
  width: 100%; min-height: 48px; margin: 0; padding: 9px 12px; border: 2px solid var(--beta-ink); border-radius: 0;
  background: #fff; color: var(--beta-ink); font: 700 16px/1.25 'Atkinson Hyperlegible Next', sans-serif;
}
#calc.beta-eau:not(#beta-eau-poids) :is(input, select, button, summary):focus-visible { outline: 3px solid var(--beta-violet); outline-offset: 2px; }

/* Tableaux de résultats : filets, chiffres en mono. */
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-tw { max-width: 100%; overflow-x: auto; margin: 0 0 12px; }
#calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table { width: 100%; border-collapse: collapse; margin: 0; background: #fff; }
#calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table caption { caption-side: top; padding: 0 0 8px; text-align: left; font-size: 15px; }
#calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table :is(th, td) {
  padding: 9px 10px; border-bottom: 1px solid var(--beta-line); text-align: left; vertical-align: top;
  font: 400 15px/1.4 'Atkinson Hyperlegible Next', sans-serif; color: var(--beta-ink);
}
#calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table th {
  border-bottom: 2px solid var(--beta-ink);
  font: 600 12px/1.3 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase;
}
#calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table td.n { font: 600 16px/1.35 'IBM Plex Mono', monospace; white-space: nowrap; }
#calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table td.n small { display: block; font: 400 13px/1.35 'IBM Plex Mono', monospace; color: var(--be-second); white-space: normal; }
#calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table tr.total td { border-top: 2px solid var(--beta-ink); font-weight: 700; }
#calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table details { margin: 4px 0 0; }
#calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table summary { cursor: pointer; font: 400 13px/1.4 'IBM Plex Mono', monospace; color: var(--beta-violet); }
#calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table details p { margin: 4px 0 0; font: 400 13px/1.45 'IBM Plex Mono', monospace; color: var(--beta-ink); }
#calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table details p.beta-eau-src { color: var(--be-second); }
#calc.beta-eau:not(#beta-eau-poids) p.beta-eau-nom { margin: 0 0 10px; font: 700 22px/1.15 'Barlow Condensed', sans-serif; }
#calc.beta-eau:not(#beta-eau-poids) p.beta-eau-bilan { margin: 0 0 8px; font-size: 15px; }

/* Zones et lecture */
#calc.beta-eau:not(#beta-eau-poids) ul.beta-eau-zones { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#calc.beta-eau:not(#beta-eau-poids) ul.beta-eau-zones li { margin: 0; padding: 10px 12px; border: 1px solid var(--beta-line); background: #fff; font-size: 15px; }
#calc.beta-eau:not(#beta-eau-poids) ul.beta-eau-zones b.beta-eau-pastille {
  display: inline-block; margin: 0 8px 4px 0; padding: 2px 8px; border: 2px solid var(--beta-ink);
  font: 600 13px/1.3 'IBM Plex Mono', monospace;
}
#calc.beta-eau:not(#beta-eau-poids) ul.beta-eau-zones li.ok b.beta-eau-pastille { background: var(--beta-lemon); }
#calc.beta-eau:not(#beta-eau-poids) ul.beta-eau-zones li.hors b.beta-eau-pastille { background: #fff; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-lecture p { margin: 0 0 10px; max-width: 70ch; font-size: 16px; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-lecture p b { font-weight: 700; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-lecture p .beta-eau-src { display: inline; margin: 0 0 0 4px; }

/* Plis */
#calc.beta-eau:not(#beta-eau-poids) details.beta-eau-plie { margin: 10px 0 0; padding: 0; border-top: 1px solid var(--beta-line); }
#calc.beta-eau:not(#beta-eau-poids) details.beta-eau-plie > summary {
  min-height: 44px; display: flex; align-items: center; cursor: pointer;
  font: 700 15px/1.2 'Atkinson Hyperlegible Next', sans-serif; color: var(--beta-violet);
}
#calc.beta-eau:not(#beta-eau-poids) details.beta-eau-plie :is(ul, ol) { margin: 4px 0 8px; padding-left: 22px; }
#calc.beta-eau:not(#beta-eau-poids) details.beta-eau-plie li { margin: 0 0 6px; font-size: 15px; }

/* Coupage et mesure */
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-coupe p, #calc.beta-eau:not(#beta-eau-poids) .beta-eau-mesure p { margin: 0 0 10px; font-size: 16px; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-coupe .beta-eau-chiffre, #calc.beta-eau:not(#beta-eau-poids) .beta-eau-mesure .beta-eau-chiffre { font: 600 17px/1.3 'IBM Plex Mono', monospace; }

/* Le graphique : SVG à l'échelle 1 (viewBox = pixels), texte à 12 px au moins. */
#calc.beta-eau:not(#beta-eau-poids) figure.beta-eau-graph { margin: 0; padding: 22px 0 24px; border-bottom: 1px solid var(--beta-line); background: none; border-top: 0; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-graph-t { display: block; margin: 0 0 10px; padding: 0; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-graph-sous { display: block; font-size: 15px; color: var(--beta-ink); max-width: 62ch; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-svg { width: 100%; border: 1px solid var(--beta-line); background: #fff; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-svg text { font-family: 'IBM Plex Mono', monospace; font-size: 12px; fill: var(--beta-ink); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-svg text.t-axe { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-size: 13px; font-weight: 700; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-svg text.t-zone { font-weight: 600; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-svg text.t-moi { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-size: 14px; font-weight: 700; fill: var(--beta-violet); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-svg text.t-num { font-size: 11px; font-weight: 600; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-svg text.t-num-clair { fill: #fff; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap: 6px 8px; margin: 12px 0 6px; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende h5, #calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende .beta-eau-cle { grid-column: 1 / -1; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende h5 {
  grid-column: 1 / -1; margin: 8px 0 0; font: 600 12px/1.3 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--beta-violet);
}
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende button { display: flex; gap: 8px; align-items: baseline; min-height: 44px; padding: 6px 10px; border-width: 1px; font-weight: 400; font-size: 14px; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende button b { flex: none; min-width: 22px; font: 600 13px/1.2 'IBM Plex Mono', monospace; color: var(--beta-violet); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende button span { font: 400 13px/1.3 'IBM Plex Mono', monospace; color: var(--be-second); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende .beta-eau-cle { display: flex; gap: 8px; align-items: center; font-size: 14px; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende .beta-eau-cle i { flex: none; display: inline-block; width: 22px; height: 14px; border: 2px solid var(--beta-ink); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende .beta-eau-cle i.z-sca { background: var(--beta-lemon); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende .beta-eau-cle i.z-scae { border-style: dashed; background: #fff; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende .beta-eau-cle i.z-2009 { height: 6px; background: var(--beta-ink); border: 0; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende .beta-eau-cle i.z-moi { width: 16px; height: 16px; border-radius: 50%; background: var(--beta-violet); }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende .beta-eau-cle i.z-diag { height: 0; border-width: 2px 0 0; border-style: dashed; border-color: var(--be-second); }

/* Polices. La feuille d'origine impose `.essai .txt p, li, dd, dt { font-family: var(--text)
   !important }` (Spectral) et `.essai .txt h2, h3 { font-family: var(--display) !important }`
   (Fraunces) : seuls des `!important` les battent. Dix déclarations : huit sur font-family,
   deux sur la taille et l'interligne des sources (la même feuille grossit tous les `p`). */
#calc.beta-eau:not(#beta-eau-poids) :is(p, li, dd, dt, td, th, label, legend) { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; }
#calc.beta-eau:not(#beta-eau-poids) :is(h2.beta-eau-h, h3.beta-eau-h3, .beta-eau-fiche strong, p.beta-eau-nom) { font-family: 'Barlow Condensed', sans-serif !important; }
#calc.beta-eau:not(#beta-eau-poids) :is(h4.beta-eau-h4, h5, p.beta-eau-groupe, .beta-eau-fiche dd, .beta-eau-fiche dt, p.beta-eau-src, table.beta-eau-table th, table.beta-eau-table td.n) { font-family: 'IBM Plex Mono', monospace !important; }
#calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table details p { font-family: 'IBM Plex Mono', monospace !important; }
#calc.beta-eau:not(#beta-eau-poids) :is(.beta-eau-oeil, legend) { font-family: 'IBM Plex Mono', monospace !important; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-lecture p b, #calc.beta-eau:not(#beta-eau-poids) .beta-eau-desc b { font-family: inherit; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-coupe .beta-eau-chiffre, #calc.beta-eau:not(#beta-eau-poids) .beta-eau-mesure .beta-eau-chiffre { font-family: 'IBM Plex Mono', monospace !important; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende button { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; }
#calc.beta-eau:not(#beta-eau-poids) p.beta-eau-src { font-size: 13px !important; line-height: 1.45 !important; }
#calc.beta-eau:not(#beta-eau-poids) .beta-eau-legende p.beta-eau-src { grid-column: 1 / -1; }
#calc.beta-eau:not(#beta-eau-poids) figcaption .beta-eau-graph-sous { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; }

/* Large écran : l'outil sort de la colonne, le graphique reste visible à droite. */
@media (min-width: 1120px) {
  #calc.beta-eau:not(#beta-eau-poids) {
    width: min(1180px, calc(100vw - 80px));
    margin-left: calc((100% - min(1180px, calc(100vw - 80px))) / 2);
  }
  #calc.beta-eau:not(#beta-eau-poids) .beta-eau-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); column-gap: 40px; }
  #calc.beta-eau:not(#beta-eau-poids) .beta-eau-b1 { grid-column: 1; grid-row: 1; }
  #calc.beta-eau:not(#beta-eau-poids) .beta-eau-b2 { grid-column: 1; grid-row: 2; }
  #calc.beta-eau:not(#beta-eau-poids) .beta-eau-b3 { grid-column: 1; grid-row: 3; }
  #calc.beta-eau:not(#beta-eau-poids) .beta-eau-b4 { grid-column: 1; grid-row: 4; }
  #calc.beta-eau:not(#beta-eau-poids) .beta-eau-b5 { grid-column: 1; grid-row: 5; }
  #calc.beta-eau:not(#beta-eau-poids) figure.beta-eau-graph { grid-column: 2; grid-row: 1 / span 5; align-self: start; position: sticky; top: 88px; border-bottom: 0; }
}
@media (max-width: 520px) {
  #calc.beta-eau:not(#beta-eau-poids) .beta-eau-choix button { flex: 1 1 100%; }
  #calc.beta-eau:not(#beta-eau-poids) table.beta-eau-table :is(th, td) { padding: 8px 6px; }
}

/* ── beta_da_figures ── */

:root {
  --beta-da-panneau: #eef0f5;
  --beta-da-figure: #f7f8fb;
  --beta-da-second: #4d5564;
  --beta-da-etiquette: #4f5665;
  --beta-da-nuit: #121b30;
}

/* ── 1. Les figures ─────────────────────────────────────────────────────────
   Avant : un carton beige (--carton) ou brun sombre sur les récits (--h-carton,
   avec ombre portée et image passée au sépia), légende en Spectral.
   Après : le modèle de `.beta-country-spark`, la seule figure déjà dans la DA :
   un filet de 1 px, un fond froid très clair, de l'espace, la légende en Atkinson.
   Les `!important` battent `figure.pl{background:var(--carton)!important;border:0
   !important;border-radius:0!important;box-shadow:none!important;overflow:visible
   !important}` et `.hist figure.pl...{background:var(--h-carton)!important;
   box-shadow:...!important}`.
   On ne touche ni à la largeur ni aux marges latérales : les figures larges sortent
   de la colonne par `margin-left:50%` et une translation, posées ailleurs. */
main.wrap:not(#beta-da-figures) figure.pl:not(.trib-fig), main.wrap:not(#beta-da-figures) figure.schema {
  box-sizing: border-box;
  margin-top: 32px;
  margin-bottom: 34px;
  padding: 12px;
  background: var(--beta-da-figure) !important;
  border: 1px solid var(--beta-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
main.wrap:not(#beta-da-figures) figure.pl img {
  filter: none;
  border-radius: 0;
  background: #fff;
}

/* La légende. `figure.pl figcaption{padding:...!important;font-family:var(--text)
   !important;font-size:var(--t1)!important;color:var(--encre-mi)!important}`. */
main.wrap:not(#beta-da-figures) :is(figure.pl, figure.fig, figure.schema) figcaption {
  max-width: 72ch;
  margin: 10px 0 0;
  padding: 0 !important;
  background: none;
  font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500;
  font-variant: normal;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--beta-da-second) !important;
}
/* L'étiquette en tête de légende (« Schéma », « Vue éclatée ») devient l'œil mono.
   `!important` : `.ui,.tag,...,figcaption b{font-family:var(--sc)!important;
   font-weight:400!important;letter-spacing:.02em!important}` et `text-transform:
   none!important` sur la même liste. */
main.wrap:not(#beta-da-figures) :is(figure.pl, figure.fig, figure.schema) figcaption > b:first-child {
  margin-right: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 10.5px;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--beta-violet);
}
/* Les tribunes gardent leur mise en page (tribunes_lecture.css : image centrée,
   légende centrée). Seul le carton beige change de teinte. */
main.wrap:not(#beta-da-figures) figure.pl.trib-fig {
  background: var(--beta-da-figure) !important;
  padding-bottom: 10px;
}
main.wrap:not(#beta-da-figures) figure.pl.trib-fig figcaption {
  max-width: 60ch;
  margin: 8px auto 0;
  text-align: center;
}

/* Les galeries : une grille de vignettes. Une boîte par vignette ferait des
   cartes partout ; on garde l'image filetée et la légende dessous, rien d'autre. */
main.wrap:not(#beta-da-figures) :is(.gg, .fichegg) figure.pl:not(.trib-fig) {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  background: none !important;
  border: 0 !important;
}
main.wrap:not(#beta-da-figures) :is(.gg, .fichegg) figure.pl img {
  border: 1px solid var(--beta-line) !important;
}
main.wrap:not(#beta-da-figures) :is(.gg, .fichegg) figure.pl figcaption {
  margin-top: 8px;
  font-size: 12.5px !important;
}
/* Le bloc « galerie » : son filet de tête passe à l'encre, en 2 px, comme les
   bandeaux de la bêta. Son titre et son chapeau sont au module lecture. */
main.wrap:not(#beta-da-figures) div.gal, main.wrap:not(#beta-da-figures) div.gal2 {
  border-top: 2px solid var(--beta-ink);
}

/* ── 2. Les sources ─────────────────────────────────────────────────────────
   Avant : Spectral 15 px gris, petit carré rubrique (cerise) en tête, retrait
   négatif de bibliographie. Le modèle déjà dans la DA est la source des fiches pays
   (beta_atlas.css : mono, fond de panneau, filet violet de 4 px à gauche), que la
   feuille d'origine écrasait par ses `!important`. On l'applique partout.
   `!important` : `.src{font-family:var(--text)!important;font-size:15px!important;
   line-height:1.5!important;letter-spacing:0!important;color:var(--ink2)!important;
   margin:-2px 0 24px!important}` et `.src::before{content:""!important}`.
   La chronique (page de référence, `.pcorps`) n'est pas visée. */
main.wrap:not(#beta-da-figures) span.src:not(.pcorps > *) {
  text-indent: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--beta-da-second) !important;
  overflow-wrap: anywhere;
}
main.wrap:not(#beta-da-figures) span.src:not(.pcorps > *)::before {
  content: none !important;
}
main.wrap:not(#beta-da-figures) span.src:not(.pcorps > *) a {
  color: var(--beta-violet);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
/* La source qui suit un paragraphe : un bloc à part, comme sur les fiches pays. */
main.wrap:not(#beta-da-figures) :is(div.txt, div.hist, div.mfiche, div.side, div.recit-corps, div.pfiche, div.expc, div.gal) > span.src,
main.wrap:not(#beta-da-figures) > span.src {
  display: block;
  box-sizing: border-box;
  max-width: 620px;
  margin: 6px 0 26px !important;
  padding: 10px 13px;
  background: var(--beta-da-panneau);
  border: 0;
  border-left: 4px solid var(--beta-violet);
}
/* Dans la colonne de lecture, la source suit la mesure des paragraphes : 620 px
   centrés dans le bloc de 956 (règle d'origine `.essai .txt > .src{max-width:
   min(68ch,620px);margin-left:auto;margin-right:auto}`, que `.src{margin:...
   !important}` annulait : les sources partaient 168 px à gauche du texte). */
main.wrap:not(#beta-da-figures) div.txt > span.src {
  margin: 6px auto 26px !important;
}
/* La source logée dans un paragraphe ou un élément de liste : une ligne filetée,
   sans fond, pour ne pas ouvrir une boîte au milieu d'une phrase. */
main.wrap:not(#beta-da-figures) :is(p, li > span) > span.src {
  display: block;
  margin: 6px 0 0 !important;
  padding: 2px 0 2px 10px;
  background: none;
  border: 0;
  border-left: 2px solid var(--beta-violet);
}
/* Le crédit d'une image, dans sa légende : une ligne mono, sans filet. Le
   sélecteur est plus long que celui des sources pour passer devant (1,3,4 contre
   1,3,2) et ramener le corps à 11 px. */
main.wrap:not(#beta-da-figures) :is(figure.pl, figure.fig, figure.schema) > figcaption > span.src {
  display: block;
  margin: 6px 0 0 !important;
  padding: 0;
  background: none;
  border: 0;
  font-size: 11px !important;
}

/* ── 3. Les paires clé-valeur ───────────────────────────────────────────────
   Trois formes sur le disque, une seule écriture : la clé en œil mono, la valeur
   en Atkinson, un filet entre les paires. */

/* 3a. Les fiches pays et l'intégrale : dl.carac > div.sc + div.kv(dt, dd).
   `!important` sur dt et dd : `.essai .txt dt{font-family:var(--display)!important}`
   et `.essai .txt dd, .essai .txt dt{font-family:var(--text)!important}`. */
main.wrap:not(#beta-da-figures) div.sc {
  margin: 0 0 10px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  font-variant: normal;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--beta-violet);
}
main.wrap:not(#beta-da-figures) div.kv {
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--beta-line);
}
main.wrap:not(#beta-da-figures) div.kv > dt {
  padding-top: 2px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 10.5px;
  font-weight: 600;
  font-variant: normal;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--beta-da-etiquette);
}
main.wrap:not(#beta-da-figures) div.kv > dd {
  margin: 0;
  font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important;
  font-size: 15px;
  line-height: 1.45;
  color: var(--beta-ink);
}

/* 3b. L'identité d'un constructeur : div.ident > div > span.q + span.v.
   `!important` : `.ident .q{font-family:var(--sc)!important;font-weight:400
   !important;font-size:15px!important;letter-spacing:.02em!important;
   text-transform:none!important}`. */
main.wrap:not(#beta-da-figures) div.ident {
  background: none;
  border-top: 2px solid var(--beta-ink);
  border-bottom: 1px solid var(--beta-line);
}
main.wrap:not(#beta-da-figures) div.ident > div {
  padding: 12px 18px 12px 0;
}
main.wrap:not(#beta-da-figures) div.ident span.q {
  display: block;
  margin-bottom: 5px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--beta-violet);
}
main.wrap:not(#beta-da-figures) div.ident span.v {
  font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--beta-ink);
}

/* 3c. Les fiches de lecture : p.fiche > span.ch > b + span.v (et leurs reprises
   dans les dd de l'intégrale). `!important` : `.ch b{font-family:var(--sc)
   !important;font-weight:400!important;font-size:15px!important;letter-spacing:.02em
   !important;text-transform:none!important}` et `.ch b{color:var(--ink)!important}`. */
main.wrap:not(#beta-da-figures) span.ch > b {
  display: block;
  margin-bottom: 3px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--beta-violet) !important;
}
main.wrap:not(#beta-da-figures) span.ch > span.v {
  font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--beta-ink);
}

/* ── 4. Les tableaux ────────────────────────────────────────────────────────
   Tous les tableaux des planches sont dans une boîte `.tw` ou `.tscroll` (mesuré :
   218 sur 218 hors outils). En-tête en mono sur fond de panneau, filet d'encre de
   2 px dessous, lignes séparées par un filet, pas de grille.
   On ne touche pas aux largeurs : à 390 px, 100 tableaux sur 219 défilent déjà sans
   écraser leurs colonnes. Ce qui manquait, c'est de le dire (voir 4b).
   `!important` : `.tw{background:none!important;border:0!important}` (pour le filet
   de défilement), et `.ch b,table.tbl th{font-family:var(--sc)!important;
   font-weight:400!important;font-size:15px!important;letter-spacing:.02em!important;
   text-transform:none!important}`, `table.tbl th{color:var(--ink)!important}`. */
main.wrap:not(#beta-da-figures) :is(.tw, .tscroll) {
  max-width: 100%;
  overflow-x: auto;
  margin-top: 28px;
  margin-bottom: 30px;
  background: none !important;
  border-radius: 0;
  scrollbar-color: var(--beta-violet) var(--beta-da-panneau);
}
main.wrap:not(#beta-da-figures) :is(.tw, .tscroll) > table {
  border-collapse: collapse;
  margin: 0;
  font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif;
  font-size: 14.5px;
  color: var(--beta-ink);
}
main.wrap:not(#beta-da-figures) :is(.tw, .tscroll) > table :is(th, td) {
  padding: 9px 14px 9px 0;
  border: 0;
  border-bottom: 1px solid var(--beta-line);
  background: none;
  vertical-align: top;
  text-align: left;
  font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--beta-ink);
}
main.wrap:not(#beta-da-figures) :is(.tw, .tscroll) > table :is(th, td):first-child {
  padding-left: 10px;
}
/* L'en-tête : les th, et la première rangée de td des tableaux de fiche (table.cl),
   qui joue ce rôle sans en avoir la balise. */
main.wrap:not(#beta-da-figures) :is(.tw, .tscroll) > table th,
main.wrap:not(#beta-da-figures) :is(.tw, .tscroll) > table.cl tr:first-child > td {
  vertical-align: bottom;
  background: var(--beta-da-panneau);
  border-bottom: 2px solid var(--beta-ink);
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--beta-ink) !important;
}
main.wrap:not(#beta-da-figures) :is(.tw, .tscroll) > table td a {
  color: var(--beta-violet);
}
/* Les précisions en petit dans une cellule (provenance des images) prenaient le
   gris olive d'origine, posé en ligne : `<small style="color:var(--mute)">`.
   `!important` : seul moyen de passer devant un attribut style. */
main.wrap:not(#beta-da-figures) :is(.tw, .tscroll) > table td small {
  color: var(--beta-da-second) !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
}

/* 4b. Le défilement annoncé. Le script pose `beta-defile` sur une boîte dont le
   tableau est plus large qu'elle, et `beta-defile-fin` quand on est au bout.
   Un œil mono sur fond citron (l'accent de lecture), collé à gauche pendant le
   défilement, et un filet violet sur le bord droit tant qu'il reste à voir. */
main.wrap:not(#beta-da-figures) :is(.tw, .tscroll).beta-defile::before {
  content: "Tableau large \00b7  faire d\00e9 filer \2192";
  position: sticky;
  left: 0;
  display: block;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 5px 8px;
  background: var(--beta-lemon);
  color: var(--beta-ink);
  font: 700 10.5px/1.2 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}
main.wrap:not(#beta-da-figures) :is(.tw, .tscroll).beta-defile.beta-defile-fin::before {
  content: "\2190  D\00e9 but du tableau \00e0  gauche";
}
main.wrap:not(#beta-da-figures) :is(.tw, .tscroll).beta-defile:not(.beta-defile-fin) {
  border-right: 3px solid var(--beta-violet) !important;
}

/* ── 5. La visionneuse ──────────────────────────────────────────────────────
   Construite par le script de chaque page dans <body>, hors de <main>.
   Défaut mesuré sur la v62 : `#loupe{z-index:400}` sous l'en-tête de la bêta
   (`.beta-header{z-index:500}`), si bien que le bouton Fermer, en haut à droite,
   passait sous l'en-tête. Fond noir à 93 % remplacé par le fond des scènes.
   Les boutons deviennent ceux de la bêta : citron pour fermer, violet pour avancer. */
html body #loupe {
  z-index: 1000;
  padding: 64px 76px 22px;
  background: var(--beta-da-nuit);
}
html body #loupe img {
  max-height: calc(100vh - 200px);
  background: #fff;
}
html body #loupe .x {
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--beta-lemon);
  color: var(--beta-ink);
  border: 2px solid var(--beta-ink);
  border-radius: 0;
  font: 700 26px/1 'Atkinson Hyperlegible Next', Arial, sans-serif;
  opacity: 1;
}
html body #loupe .pas {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0 0 3px;
  background: var(--beta-violet);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 0;
  font: 700 30px/1 'Atkinson Hyperlegible Next', Arial, sans-serif;
  opacity: 1;
}
html body #loupe .av { left: 14px; }
html body #loupe .ap { right: 14px; }
html body #loupe :is(.x, .pas):hover,
html body #loupe :is(.x, .pas):focus-visible {
  background: var(--beta-lemon);
  color: var(--beta-ink);
  border-color: var(--beta-ink);
}
html body #loupe .pos {
  top: 25px;
  left: 18px;
  font: 600 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .06em;
  color: #e8ebf2;
}
html body #loupe .leg {
  max-width: 72ch;
  margin-top: 14px;
  font: 500 14px/1.5 'Atkinson Hyperlegible Next', Arial, sans-serif;
  color: #e8ebf2;
  text-align: center;
}
/* Le crédit copié depuis la légende. `!important` : la règle `.src` d'origine. */
html body #loupe .leg span.src {
  display: block;
  margin: 6px 0 0 !important;
  padding: 0;
  border: 0;
  background: none;
  text-indent: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  color: #b9c4d8 !important;
}
html body #loupe .leg span.src::before {
  content: none !important;
}

@media (max-width: 700px) {
  /* Sur un téléphone les flèches couvraient les bords de l'image : elles
     descendent sous la légende, côte à côte. */
  html body #loupe {
    padding: 64px 12px 86px;
  }
  html body #loupe img {
    max-height: calc(100vh - 230px);
  }
  html body #loupe .pas {
    top: auto;
    bottom: 20px;
    transform: none;
  }
  html body #loupe .av { left: calc(50% - 58px); }
  html body #loupe .ap { right: calc(50% - 58px); }
  html body #loupe .leg { font-size: 13px; }

  main.wrap:not(#beta-da-figures) figure.pl:not(.trib-fig) {
    padding: 9px;
  }
  main.wrap:not(#beta-da-figures) div.ident > div {
    padding: 10px 14px 10px 0;
  }
}

/* ── beta_da_glossaire ── */

/* ── beta_da_images ── */

/* beta_da_images : les trois herbiers réunis (decafeine-13) et les trois défauts de
   torréfaction dont les vues générées ont été retirées (torrefaction-13). */
body main figure.pl.beta-images-trio .beta-images-rang {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; align-items: end;
}
body main figure.pl.beta-images-trio .beta-images-rang img { width: 100%; height: auto; display: block; }
body main figure.pl.beta-images-trio .beta-images-nom {
  display: block; margin-top: 4px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; font-style: italic; color: var(--beta-ink, #171923);
}
body main div.beta-defauts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin: 20px 0; padding: 14px 0; border-top: 1px solid var(--beta-line, #c6cbd2);
  border-bottom: 1px solid var(--beta-line, #c6cbd2);
}
body main div.beta-defauts > div > b {
  display: block; margin-bottom: 4px; font-family: "Barlow Condensed", sans-serif;
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.018em;
}
body main div.beta-defauts > div > span { display: block; font-size: .95rem; line-height: 1.5; }
/* Les galeries des dossiers pays : une à trois colonnes, chaque photo sa légende. */
.beta-images-galerie {
  display: grid; gap: 18px 16px; margin: 22px 0 30px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.beta-images-galerie.beta-images-n1 { grid-template-columns: minmax(0, 680px); }
.beta-images-galerie figure.beta-images-case { margin: 0; }
.beta-images-galerie figure.beta-images-case img {
  display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain;
  background: var(--beta-paper, #f4f5f8);
}
.beta-images-galerie figure.beta-images-case figcaption {
  margin-top: 7px; font: 400 14px/1.45 'Atkinson Hyperlegible Next', Arial, sans-serif; color: var(--beta-ink, #171923);
}
.beta-images-galerie .beta-images-credit {
  display: block; margin-top: 3px; color: #4d5564; font: 500 11px/1.4 'IBM Plex Mono', ui-monospace, monospace;
}

/* ── beta_da_images_constructeurs ── */

/* beta_da_images_constructeurs : la figure des fiches de constructeurs. La règle
   `figure.pl.gal { max-width: 640px }` de galerie.py n'est que dans la feuille propre des
   fiches qui avaient déjà une galerie : on la redonne ici, et une pièce haute (`cote`)
   reste à 400 px pour ne pas occuper deux écrans. */
body main figure.pl.gal[data-beta-image^="constr_"] { max-width: 640px; }
body main figure.pl.gal.cote[data-beta-image^="constr_"] { max-width: 400px; }/* Les trois vues générées des défauts (torrefaction-13). */
body main figure.pl.beta-defauts-vues { margin: 20px 0; }
body main figure.pl.beta-defauts-vues div.beta-defauts { margin: 0 0 8px; }
body main figure.pl.beta-defauts-vues div.beta-defauts > div > img {
  display: block; width: 100%; height: auto; margin: 0 0 8px; background: #f5f7f8;
}

/* ── beta_da_incoterms ── */

/* ── beta_da_incoterms : la liste des sources de la section, et les renvois ── */
body main.wrap ol.beta-inco-sources { margin: 8px 0 0; padding-left: 1.4em; }
body main.wrap ol.beta-inco-sources li { margin: 0 0 6px; font-size: .92em; line-height: 1.5; }
body main.wrap a.beta-inco-renvoi { text-decoration: underline; text-decoration-color: var(--beta-lemon, #d9ef59); text-decoration-thickness: 3px; text-underline-offset: 2px; }
#bibliotheque h2.beta-inco-biblio-tete { margin: 48px 0 8px; }

/* ── beta_da_lecture ── */

/* Colonne de lecture : texte en Atkinson, titres en Barlow Condensed, œils et
   repères en IBM Plex Mono, encre sur papier, violet pour l'action, citron pour
   la lecture. Les !important ne battent que des !important d'origine. */

/* ── conteneurs ─────────────────────────────────────────────────────────── */
body main.wrap section.planche div.essai > div.txt,
body main.wrap section.planche div.trib-corps { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif; color: var(--beta-ink); }

/* ── fil d'Ariane ───────────────────────────────────────────────────────── */
body main.wrap section.planche nav.fil {
  margin-bottom: 22px; gap: 0; color: var(--beta-ink);
  font: 500 12px/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase;
}
body main.wrap section.planche nav.fil a {
  color: var(--beta-violet); text-decoration: none; border-bottom: 0;
}
body main.wrap section.planche nav.fil a:hover { color: var(--beta-ink); background: var(--beta-lemon); }
body main.wrap section.planche nav.fil span.sep { opacity: 1; color: var(--beta-ink); padding: 0 .6em; }
body main.wrap section.planche nav.fil b { font-weight: 600; color: var(--beta-ink); }

/* ── en-têtes : section (sect-tete) et planche ou fiche (ph, head) ─────── */
body main.wrap section.planche div.sect-tete {
  margin-bottom: 30px; padding-bottom: 22px; border-bottom: 2px solid var(--beta-ink);
}
body main.wrap section.planche > div.ph,
body main.wrap section.planche div.txt > div.ph {
  margin-bottom: 30px; padding-bottom: 22px; background-image: none;
  border-bottom-style: solid; border-bottom-width: 2px;
  border-bottom-color: var(--beta-ink) !important;
}
/* l'œil : « Planche VII · section 03 sur 20 », « Constructeur », « Glossaire » */
body main.wrap section.planche div.sect-tete > span.no,
body main.wrap section.planche div.ph > span.num,
body main.wrap section.planche div.head > span.num {
  display: block; margin: 0 0 14px; line-height: 1.35;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: var(--beta-violet) !important;
}
body main.wrap section.planche div.sect-tete > span.no::before {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 9px;
  background: var(--beta-violet); box-shadow: 4px 4px 0 var(--beta-lemon); vertical-align: 3px;
}
/* le titre de page */
body main.wrap section.planche div.sect-tete > h1,
body main.wrap section.planche div.ph > h1,
body main.wrap section.planche div.ph > h2,
body main.wrap section.planche div.head > h1,
body main.wrap section.planche div.head > h2 {
  color: var(--beta-ink); text-wrap: balance;
  font-family: 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif !important; font-weight: 800 !important;
  font-size: clamp(40px, 5.4vw, 66px) !important; line-height: .95 !important;
  letter-spacing: -.018em !important;
}
/* le chapeau */
body main.wrap section.planche div.ph > p.lead,
body main.wrap section.planche div.head > span.lead,
body main.wrap section.planche div.sect-tete > p.sst {
  font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; font-size: 19px !important; line-height: 1.55 !important;
  font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--beta-ink) !important; max-width: 60ch !important;
}
body main.wrap section.planche div.head > span.lead { display: block; }

/* fiches pays : la bêta les a déjà dessinées en bloc sombre, on rend sa règle
   au bloc au lieu de la couvrir */
html.beta-country-page body main.wrap section.planche > div.ph { border-bottom-color: var(--beta-lemon) !important; border-bottom-width: 8px; }
html.beta-country-page body main.wrap section.planche > div.ph > span.num { color: var(--beta-lemon) !important; }
html.beta-country-page body main.wrap section.planche > div.ph > h1 {
  font-size: clamp(58px, 9vw, 112px) !important; line-height: .94 !important;
  letter-spacing: -.035em !important;
}

/* ── titres dans le texte ───────────────────────────────────────────────── */
body main.wrap section.planche h2:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) {
  margin-top: 52px; margin-bottom: 14px; color: var(--beta-ink); text-wrap: balance;
  font-family: 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif !important; font-weight: 700 !important;
  font-size: clamp(30px, 3.6vw, 40px) !important; line-height: 1 !important;
  letter-spacing: -.018em !important;
}
body main.wrap section.planche h3:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) {
  margin-top: 46px; margin-bottom: 12px; color: var(--beta-ink); text-wrap: balance;
  font-family: 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif !important; font-weight: 700 !important;
  font-size: clamp(25px, 2.8vw, 31px) !important; line-height: 1.04 !important;
  letter-spacing: -.012em !important;
}
body main.wrap section.planche h4:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) {
  margin-top: 32px; margin-bottom: 8px; color: var(--beta-ink); text-transform: none;
  font-family: 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif !important; font-weight: 700 !important;
  font-size: 22px !important; line-height: 1.1 !important; letter-spacing: 0 !important;
}
body main.wrap section.planche h2:first-child:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)),
body main.wrap section.planche h3:first-child:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)),
body main.wrap section.planche h4:first-child:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) { margin-top: 0; }
body main.wrap section.planche h2 > span.no:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)),
body main.wrap section.planche h3 > span.no:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) {
  display: block; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .12em;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-size: 12px !important; font-weight: 600 !important;
  color: var(--beta-violet) !important;
}
/* termes de définition : dans le texte, et les entrées du glossaire et de l'intégrale */
body main.wrap section.planche dt:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) {
  color: var(--beta-ink); font-family: 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif !important; font-weight: 700; font-size: 21px;
  letter-spacing: -.01em;
}

/* ── texte courant ──────────────────────────────────────────────────────── */
body main.wrap section.planche p:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)),
body main.wrap section.planche li:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)),
body main.wrap section.planche dd:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) {
  font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif !important; color: var(--beta-ink);
}
body main.wrap section.planche div.txt p:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) { font-size: 17px !important; line-height: 1.68 !important; }
body main.wrap section.planche li:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)),
body main.wrap section.planche dd:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) { line-height: 1.62; }
/* la frise des dates dans le texte : dates en mono, faits en texte courant */
body main.wrap section.planche ul.frise > li > span:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif; color: var(--beta-ink); }
body main.wrap section.planche ul.frise > li > b:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) { font: 600 13px/1.6 'IBM Plex Mono', ui-monospace, monospace; color: var(--beta-violet); letter-spacing: .02em; }

/* listes de repères des fiches (« Les repères », « Les modèles ») : l'intitulé en gras */
body main.wrap section.planche ul.rep > li > b:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif; font-weight: 700; color: var(--beta-ink); }

/* dépliant « pour aller plus loin » dans le texte */
body main.wrap section.planche div.txt details.exp { border-left: 2px solid var(--beta-violet); }
body main.wrap section.planche div.txt details.exp > summary {
  color: var(--beta-violet); text-transform: none; letter-spacing: 0;
  font: 700 15px/1.4 'Atkinson Hyperlegible Next', Arial, sans-serif;
}
body main.wrap section.planche div.txt details.exp > summary:hover { color: var(--beta-ink); }

/* le choix de lecture à deux niveaux (niveaux.py) : un œil et deux boutons */
body main.wrap section.planche div.txt div.lect { gap: 10px; border-bottom: 1px solid var(--beta-ink); }
body main.wrap section.planche div.txt div.lect > b {
  color: var(--beta-ink); font: 600 11px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase;
}
body main.wrap section.planche div.txt div.lect > button {
  min-height: 40px; padding: 8px 13px; color: var(--beta-ink); background: transparent;
  border: 1px solid var(--beta-ink); border-radius: 0; cursor: pointer;
  font: 700 13px/1.2 'Atkinson Hyperlegible Next', Arial, sans-serif;
}
body main.wrap section.planche div.txt div.lect > button:hover { border-color: var(--beta-violet); color: var(--beta-violet); }
body main.wrap section.planche div.txt div.lect > button[aria-pressed="true"] { color: var(--beta-paper); background: var(--beta-ink); border-color: var(--beta-ink); }
body main.wrap section.planche div.txt div.lect > span { color: var(--beta-ink); font: 400 13px/1.4 'Atkinson Hyperlegible Next', Arial, sans-serif; }

/* « Zone d'ombre » : ce que les sources ne tranchent pas. Aucune des trois listes
   du brief ne la nomme ; elle est du texte, elle suit la colonne. */
body main.wrap section.planche div.txt div.ombre,
body main.wrap section.planche div.txt aside.ombre {
  margin-top: 30px; margin-bottom: 26px; padding: 4px 0 4px 16px; color: var(--beta-ink);
  border-left: 4px solid var(--beta-violet) !important;
  font: 400 15.5px/1.55 'Atkinson Hyperlegible Next', Arial, sans-serif;
}
body main.wrap section.planche div.txt .ombre p,
body main.wrap section.planche div.txt .ombre li { font-size: 15.5px !important; line-height: 1.55 !important; }
body main.wrap section.planche div.txt .ombre > b,
body main.wrap section.planche div.txt .ombre > h4 {
  display: block; margin: 0 0 6px; color: var(--beta-violet);
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-size: 11px !important; font-weight: 600 !important;
  line-height: 1.3 !important; letter-spacing: .12em !important; text-transform: uppercase !important;
}

/* liens du texte : violet souligné, citron au survol */
body main.wrap section.planche p a:not(.motgl):not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)),
body main.wrap section.planche li a:not(.motgl):not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)),
body main.wrap section.planche dd a:not(.motgl):not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) {
  color: var(--beta-violet); text-decoration-line: underline; text-decoration-color: currentColor;
  text-decoration-thickness: 1px; text-underline-offset: .18em;
}
body main.wrap section.planche p a:not(.motgl):hover:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)),
body main.wrap section.planche li a:not(.motgl):hover:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)),
body main.wrap section.planche dd a:not(.motgl):hover:not(:where(section.planche [class*="beta-"], section.planche [class*="beta-"] *, figure *, .gal *, .leg *, .kv *, .sc *, table *, .tw *, .tdm *, .ensuite *, nav.suite *, ul.cat *, div.balade > div.grille *, div.fam:has(> ul) *, ul.recenses *, div.rcs *)) {
  color: var(--beta-ink); background: var(--beta-lemon); text-decoration-thickness: 2px;
}

/* ── renvois au glossaire : un surligné citron sous le mot, plein au survol ─ */
body main.wrap a.motgl {
  color: inherit; text-decoration: none; border-bottom: 0; cursor: help;
  background-image: linear-gradient(var(--beta-lemon), var(--beta-lemon)); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 100% .34em;
  transition: background-size .12s steps(2, end);
}
body main.wrap a.motgl:hover, body main.wrap a.motgl:focus-visible { color: var(--beta-ink); background-size: 100% 100%; }
/* la bulle ouverte par le renvoi (ajoutée au body par le script de la page) */
body #glpop {
  padding: 14px 16px; color: var(--beta-ink); background: var(--beta-paper);
  border: 1px solid var(--beta-ink); border-top: 4px solid var(--beta-violet); border-radius: 0; box-shadow: none;
  font: 400 15px/1.5 'Atkinson Hyperlegible Next', Arial, sans-serif;
}
body #glpop b {
  margin-bottom: 7px; color: var(--beta-violet);
  font: 600 11px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase;
}
body #glpop p { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif; }
body #glpop a {
  margin-top: 10px; color: var(--beta-violet); border-bottom: 0;
  font: 700 13px/1.4 'Atkinson Hyperlegible Next', Arial, sans-serif; text-decoration: underline; text-underline-offset: .18em;
}

/* ── pagination précédent / suivant ─────────────────────────────────────── */
body main.wrap div.paginat { gap: 12px; }
body main.wrap div.paginat > a {
  display: block; padding: 14px 16px 16px; color: var(--beta-ink); text-decoration: none;
  border: 1px solid var(--beta-ink);
}
body main.wrap div.paginat > a:hover { border-color: var(--beta-violet); }
body main.wrap div.paginat > a:hover > span.t { color: var(--beta-violet); }
body main.wrap div.paginat > a > span.q {
  display: block; margin: 0 0 7px; color: var(--beta-violet);
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
}
body main.wrap div.paginat > a:not(.suiv) > span.q::before { content: "\2190\00a0"; content: "\2190\00a0" / ""; }
body main.wrap div.paginat > a.suiv > span.q::after { content: "\00a0\2192"; content: "\00a0\2192" / ""; }
body main.wrap div.paginat > a > span.t {
  display: block; color: var(--beta-ink); text-wrap: balance;
  font: 800 23px/1.05 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif; letter-spacing: -.01em;
}
@media (min-width: 641px) {
  body main.wrap div.paginat > a.suiv:only-child { grid-column: 2; }
}

/* ── colophon de la page ────────────────────────────────────────────────── */
body main.wrap footer.colophon {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px;
  max-width: min(68ch, 620px); margin: 72px auto 0; padding: 18px 0 0;
  background-image: none; border-top: 2px solid var(--beta-ink);
}
body main.wrap footer.colophon > p { margin: 0; max-width: none; color: var(--beta-ink); }
body main.wrap footer.colophon > p.c1, body main.wrap footer.colophon > p.c2 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-size: 12.5px; line-height: 1.6; letter-spacing: .02em;
}
body main.wrap footer.colophon > p.c2 { text-align: right; }
body main.wrap footer.colophon > p.c1 span.cn { font-family: inherit; font-weight: 600; color: var(--beta-violet); }
body main.wrap footer.colophon > p.c1 span.cm { color: var(--beta-ink); }
body main.wrap footer.colophon > p.c3 {
  grid-column: 1 / -1; max-width: 60ch; margin-top: 10px;
  font-size: 13.5px; line-height: 1.55; color: var(--beta-ink);
}
body main.wrap footer.colophon > p.c3 a { color: var(--beta-violet); text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 640px) {
  body main.wrap footer.colophon { grid-template-columns: minmax(0, 1fr); }
  body main.wrap footer.colophon > p.c2 { text-align: left; }
}

/* ── pied de site ───────────────────────────────────────────────────────── */
body div.wrap > div.fin {
  margin-top: 56px; padding: 18px 0 48px; gap: 8px 24px; color: var(--beta-ink);
  border-top: 2px solid var(--beta-ink);
  font: 500 12px/1.6 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .03em; text-transform: none;
}
body div.wrap > div.fin a {
  color: var(--beta-violet); border-bottom: 0; text-decoration: underline; text-underline-offset: .2em;
}
body div.wrap > div.fin a:hover { color: var(--beta-ink); background: var(--beta-lemon); }

/* ── beta_da_methodes ── */

/* ── beta_da_methodes : les fiches de méthode, leurs sources, leurs renvois ── */
body main.wrap .pfiche ol.beta-meth-sources { margin: 8px 0 0; padding-left: 1.6em; }
body main.wrap .pfiche ol.beta-meth-sources li { margin: 0 0 7px; font-size: .92em; line-height: 1.5; }
body main.wrap .pfiche ol.beta-meth-sources li:target { background: #e8e2ff; }
body main.wrap .pfiche ol.beta-meth-sources .beta-meth-type { color: #51596b; font: 500 12px/1.4 'IBM Plex Mono', monospace; }
body main.wrap .pfiche a.beta-meth-cite { text-decoration: underline; text-decoration-color: var(--beta-lemon, #d9ef59); text-decoration-thickness: 3px; text-underline-offset: 2px; }
.beta-process-lab.beta-meth-tous .beta-process-choix-lien.beta-meth-fiche { border-style: solid; color: var(--beta-ink); }
.beta-process-lab.beta-meth-tous .beta-process-choix-lien.beta-meth-fiche:hover { background: #e8e2ff; }
body main.wrap .tdm p.beta-meth-tdm a, body main.wrap a.beta-meth-gl { text-decoration: underline; text-decoration-color: var(--beta-lemon, #d9ef59); text-decoration-thickness: 3px; text-underline-offset: 2px; }
#bibliotheque h2.beta-meth-biblio-tete { margin: 48px 0 8px; }
#bibliotheque p.beta-meth-biblio-intro { max-width: 62ch; }

/* ── beta_da_navigation ── */

/* ════ Table des sections : div.tdm ════════════════════════════════════════
   Une liste numérotée lue en colonne, deux colonnes quand la place le permet.
   Numéro en mono violet, titre en Barlow, première phrase en Atkinson gris. */
:is(body, #beta-da-navigation) div.tdm { margin: 56px 0 8px; padding: 0; border: 0; }
:is(body, #beta-da-navigation) div.tdm > h2 {
  margin: 0 0 6px; padding: 0 0 10px; border-bottom: 2px solid var(--beta-ink);
  font: 800 clamp(30px, 4vw, 44px)/1 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif !important;
  letter-spacing: -.018em !important; color: var(--beta-ink) !important;
  text-transform: none; font-variation-settings: normal;
}
:is(body, #beta-da-navigation) div.tdm > p.sous { max-width: 62ch; margin: 10px 0 14px; color: #51596b; font: 500 15px/1.45 'Atkinson Hyperlegible Next', Arial, sans-serif !important; }
/* En colonnes de journal plutôt qu'en grille : la lecture descend 01, 02, 03…
   et une longue première phrase ne creuse pas de trou dans la rangée voisine. */
:is(body, #beta-da-navigation) div.tdm > ol { display: block; columns: 2 340px; column-gap: 32px; margin: 0; padding: 0; list-style: none; }
:is(body, #beta-da-navigation) div.tdm > ol > li {
  break-inside: avoid; min-width: 0; margin: 0; padding: 0; list-style: none;
  background: none; border: 0; border-bottom: 1px solid var(--beta-line);
}
:is(body, #beta-da-navigation) div.tdm > ol > li::before, :is(body, #beta-da-navigation) div.tdm > ol > li::marker { content: none; }
:is(body, #beta-da-navigation) div.tdm > ol > li > a {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 10px; align-items: baseline;
  box-sizing: border-box; min-height: 48px; padding: 13px 12px 14px 10px;
  color: var(--beta-ink); background: none; box-shadow: none; text-decoration: none;
  transition: background-color .18s steps(2, end), box-shadow .18s steps(2, end);
}
:is(body, #beta-da-navigation) div.tdm > ol > li > a:hover { background: #fff; box-shadow: inset 4px 0 0 var(--beta-violet); }
:is(body, #beta-da-navigation) div.tdm > ol > li > a:focus-visible { outline-offset: -3px; }
:is(body, #beta-da-navigation) div.tdm > ol > li > a[aria-current] { background: #e8e2ff; box-shadow: inset 4px 0 0 var(--beta-violet); }
:is(body, #beta-da-navigation) div.tdm a span.num {
  align-self: baseline; justify-self: start; padding: 2px 0;
  font: 600 12px/1.2 'IBM Plex Mono', monospace !important; letter-spacing: .04em !important;
  font-variant-numeric: tabular-nums; text-transform: none; color: var(--beta-violet) !important;
}
:is(body, #beta-da-navigation) div.tdm a[aria-current] span.num { padding: 2px 5px; color: var(--beta-ink) !important; background: var(--beta-lemon); }
:is(body, #beta-da-navigation) div.tdm a span.t {
  display: block; min-width: 0; color: var(--beta-ink);
  font: 700 20px/1.1 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif; letter-spacing: -.005em;
  overflow-wrap: break-word;
}
:is(body, #beta-da-navigation) div.tdm a:hover span.t, :is(body, #beta-da-navigation) div.tdm a[aria-current] span.t { color: var(--beta-ink); }
:is(body, #beta-da-navigation) div.tdm a span.t > span.d {
  display: block; margin-top: 5px; color: #51596b; letter-spacing: normal;
  font: 500 14.5px/1.42 'Atkinson Hyperlegible Next', Arial, sans-serif;
}

/* ════ Planche précédente / suivante : nav.suite ═══════════════════════════
   Deux cartes, comme les cartes de sujets de l'accueil. */
:is(body, #beta-da-navigation) nav.suite {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin: 56px 0 0; padding: 22px 0 0; border-top: 2px solid var(--beta-ink);
}
:is(body, #beta-da-navigation) nav.suite > a {
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  box-sizing: border-box; min-width: 0; min-height: 96px; padding: 16px 20px;
  color: var(--beta-ink); background: #fff; border: 1px solid var(--beta-line);
  text-decoration: none; text-align: left;
  transition: border-color .18s steps(2, end), box-shadow .18s steps(2, end), transform .18s steps(2, end);
}
:is(body, #beta-da-navigation) nav.suite > a.apres { text-align: right; align-items: flex-end; }
:is(body, #beta-da-navigation) nav.suite > a.apres:only-child { grid-column: 2; }
:is(body, #beta-da-navigation) nav.suite > a:hover, :is(body, #beta-da-navigation) nav.suite > a:focus-visible { border-color: var(--beta-violet); box-shadow: 4px 4px 0 var(--beta-violet); transform: translate(-2px, -2px); }
:is(body, #beta-da-navigation) nav.suite > a > span.q {
  display: block; margin: 0; color: var(--beta-violet);
  font: 700 11px/1.2 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase;
}
:is(body, #beta-da-navigation) nav.suite > a.avant > span.q::before { content: "\2190\00a0"; }
:is(body, #beta-da-navigation) nav.suite > a.apres > span.q::after { content: "\00a0\2192"; }
:is(body, #beta-da-navigation) nav.suite > a > span.t {
  display: block; max-width: 100%; color: var(--beta-ink); overflow-wrap: break-word;
  font: 700 clamp(22px, 2.4vw, 28px)/1.05 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif; letter-spacing: -.018em;
}

/* ════ À lire ensuite, Continuer la balade : div.ensuite, div.grille
   Des cartes blanches en grille, comme les fiches pays : où (mono violet),
   quoi (Barlow), pourquoi (Atkinson gris). */
:is(body, #beta-da-navigation) div.ensuite, :is(body, #beta-da-navigation) div.grille:has(> a > span.ou) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px;
  margin: 40px 0 12px; padding: 12px 0 0; border: 0; border-top: 2px solid var(--beta-ink);
}
:is(body, #beta-da-navigation) div.grille:has(> a > span.ou) { margin-top: 18px; }
:is(body, #beta-da-navigation) div.ensuite > span.q {
  grid-column: 1 / -1; display: block; margin: 0 0 2px; color: var(--beta-violet);
  font: 700 11px/1.3 'IBM Plex Mono', monospace !important; letter-spacing: .12em !important; text-transform: uppercase !important;
}
:is(body, #beta-da-navigation) div.ensuite > a, :is(body, #beta-da-navigation) div.grille:has(> a > span.ou) > a {
  display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; min-width: 0; min-height: 48px;
  padding: 14px 16px 15px; color: var(--beta-ink);
  background: #fff !important; border: 1px solid var(--beta-line) !important; text-decoration: none;
  transition: border-color .18s steps(2, end), box-shadow .18s steps(2, end), transform .18s steps(2, end);
}
:is(body, #beta-da-navigation) div.ensuite > a:hover, :is(body, #beta-da-navigation) div.ensuite > a:focus-visible,
:is(body, #beta-da-navigation) div.grille:has(> a > span.ou) > a:hover, :is(body, #beta-da-navigation) div.grille:has(> a > span.ou) > a:focus-visible {
  border-color: var(--beta-violet) !important; box-shadow: 4px 4px 0 var(--beta-lemon) !important; transform: translate(-2px, -2px);
}
:is(body, #beta-da-navigation) div.ensuite > a > span.ou, :is(body, #beta-da-navigation) div.grille:has(> a > span.ou) > a > span.ou {
  display: block; margin: 0; color: var(--beta-violet) !important;
  font: 700 10.5px/1.25 'IBM Plex Mono', monospace !important; letter-spacing: .1em !important; text-transform: uppercase !important;
}
:is(body, #beta-da-navigation) div.ensuite > a > span.t, :is(body, #beta-da-navigation) div.grille:has(> a > span.ou) > a > span.t {
  display: block; margin: 0; color: var(--beta-ink); overflow-wrap: break-word;
  font: 700 21px/1.08 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif; letter-spacing: -.01em;
}
:is(body, #beta-da-navigation) div.ensuite > a:hover > span.t, :is(body, #beta-da-navigation) div.grille:has(> a > span.ou) > a:hover > span.t { color: var(--beta-ink); }
:is(body, #beta-da-navigation) div.ensuite > a > span.pq, :is(body, #beta-da-navigation) div.grille:has(> a > span.ou) > a > span.pq {
  display: block; margin: 0; color: #51596b; font: 500 14px/1.4 'Atkinson Hyperlegible Next', Arial, sans-serif;
}

/* ════ Listes ul.cat : un terme, puis ce qu'il recouvre ════════════════════
   Filet fort en tête, filet fin entre les éléments ; sur écran large, le terme
   prend sa colonne pour se lire d'un coup d'œil. Seuls le <b> et le <span>
   enfants directs sont visés : les renvois et sources imbriqués restent à
   leurs propriétaires. */
:is(body, #beta-da-navigation) ul.cat { margin: 22px 0 26px; padding: 0; list-style: none; border-top: 2px solid var(--beta-ink); }
:is(body, #beta-da-navigation) ul.cat > li {
  display: block; margin: 0; padding: 12px 0 13px; list-style: none; border: 0; border-bottom: 1px solid var(--beta-line);
  line-height: 1.55;
}
:is(body, #beta-da-navigation) ul.cat > li::before, :is(body, #beta-da-navigation) ul.cat > li::marker { content: none; }
:is(body, #beta-da-navigation) ul.cat > li > b {
  display: block; margin: 0 0 3px; color: var(--beta-ink); letter-spacing: -.005em; text-transform: none;
  font: 700 19px/1.15 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif;
}
:is(body, #beta-da-navigation) ul.cat > li > span { color: var(--beta-ink); font: 400 16px/1.6 'Atkinson Hyperlegible Next', Arial, sans-serif; }
@media (min-width: 701px) {
  :is(body, #beta-da-navigation) div > ul.cat > li:has(> b) { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); column-gap: 22px; align-items: baseline; }
  :is(body, #beta-da-navigation) div > ul.cat > li:has(> b) > b { margin: 0; }
  :is(body, #beta-da-navigation) div > ul.cat > li:has(> b) > :not(b):not(:nth-child(2)) { grid-column: 2; }
}

/* ════ Listes de fiches : div.fam (constructeurs, process) ═════════════════ */
:is(body, #beta-da-navigation) div.fam:has(> ul) { margin: 0 0 34px; }
:is(body, #beta-da-navigation) div.fam:has(> ul) > h3 {
  margin: 40px 0 10px; padding: 0 0 9px; border-bottom: 2px solid var(--beta-ink); color: var(--beta-ink);
  font: 800 clamp(28px, 3.4vw, 40px)/1 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif !important;
  letter-spacing: -.018em !important; text-transform: none;
}
:is(body, #beta-da-navigation) div.fam:has(> ul) > p.quoi {
  max-width: 68ch; margin: 0 0 16px; color: var(--beta-ink);
  font: 400 16px/1.6 'Atkinson Hyperlegible Next', Arial, sans-serif !important;
}
:is(body, #beta-da-navigation) div.fam:has(> ul) > ul {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px;
  margin: 0; padding: 0; list-style: none; background: none; border: 0; border-radius: 0; overflow: visible;
}
:is(body, #beta-da-navigation) div.fam:has(> ul) > ul > li { min-width: 0; margin: 0; padding: 0; list-style: none; background: none; }
:is(body, #beta-da-navigation) div.fam:has(> ul) > ul > li::before, :is(body, #beta-da-navigation) div.fam:has(> ul) > ul > li::marker { content: none; }
:is(body, #beta-da-navigation) div.fam:has(> ul) > ul > li > a {
  display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; height: 100%; min-height: 48px;
  padding: 13px 15px 14px; color: var(--beta-ink); background: #fff; background-image: none;
  border: 1px solid var(--beta-line); border-radius: 0; text-decoration: none;
  transition: border-color .18s steps(2, end), box-shadow .18s steps(2, end), transform .18s steps(2, end);
}
:is(body, #beta-da-navigation) div.fam:has(> ul) > ul > li > a:hover, :is(body, #beta-da-navigation) div.fam:has(> ul) > ul > li > a:focus-visible {
  border-color: var(--beta-violet); box-shadow: 4px 4px 0 var(--beta-violet); transform: translate(-2px, -2px);
}
:is(body, #beta-da-navigation) div.fam:has(> ul) a > span.t {
  display: block; color: var(--beta-ink); overflow-wrap: break-word; text-wrap: balance;
  font: 700 20px/1.08 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif; letter-spacing: -.005em;
  font-variation-settings: normal;
}
:is(body, #beta-da-navigation) div.fam:has(> ul) a:hover > span.t { color: var(--beta-ink); }
:is(body, #beta-da-navigation) div.fam:has(> ul) a > span.ou {
  display: block; margin: 0; color: #51596b; overflow-wrap: break-word;
  font: 500 12px/1.4 'IBM Plex Mono', monospace; font-style: normal; letter-spacing: 0;
}

/* ════ Constructeurs recensés : ul.recenses ═══════════════════════════════ */
:is(body, #beta-da-navigation) ul.recenses { margin: 18px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--beta-ink); }
:is(body, #beta-da-navigation) ul.recenses > li { margin: 0; padding: 12px 0 13px; list-style: none; border: 0; border-bottom: 1px solid var(--beta-line); }
:is(body, #beta-da-navigation) ul.recenses > li::before, :is(body, #beta-da-navigation) ul.recenses > li::marker { content: none; }
:is(body, #beta-da-navigation) ul.recenses > li > b { color: var(--beta-ink); font: 700 20px/1.15 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif; }
:is(body, #beta-da-navigation) ul.recenses > li > span.ou {
  margin-left: 10px; color: var(--beta-violet);
  font: 700 10.5px/1.3 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase;
}
:is(body, #beta-da-navigation) ul.recenses > li > span.d { display: block; margin-top: 4px; color: var(--beta-ink); font: 400 15.5px/1.55 'Atkinson Hyperlegible Next', Arial, sans-serif; }

/* ════ Cartes des récits : div.rcs a.rc ═══════════════════════════════════ */
:is(body, #beta-da-navigation) div.rcs > a.rc {
  gap: 7px; padding: 0 0 18px; color: var(--beta-ink); background: #fff; border: 1px solid var(--beta-line);
  text-decoration: none;
  transition: border-color .18s steps(2, end), box-shadow .18s steps(2, end), transform .18s steps(2, end);
}
:is(body, #beta-da-navigation) div.rcs > a.rc:hover, :is(body, #beta-da-navigation) div.rcs > a.rc:focus-visible { border-color: var(--beta-violet); box-shadow: 4px 4px 0 var(--beta-violet); transform: translate(-2px, -2px); }
:is(body, #beta-da-navigation) div.rcs > a.rc > span.vue { margin: 0 0 8px; background: var(--beta-line); }
:is(body, #beta-da-navigation) div.rcs > a.rc > span.vue img { filter: none; }
:is(body, #beta-da-navigation) div.rcs > a.rc > :not(.vue) { margin-left: 20px; margin-right: 20px; }
:is(body, #beta-da-navigation) div.rcs > a.rc > span.n { color: var(--beta-violet); font: 700 11px/1.2 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
:is(body, #beta-da-navigation) div.rcs > a.rc > span.t { color: var(--beta-ink); font: 800 clamp(26px, 2.6vw, 32px)/1 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif; letter-spacing: -.018em; }
:is(body, #beta-da-navigation) div.rcs > a.rc > span.c { color: #51596b; font: 500 15px/1.5 'Atkinson Hyperlegible Next', Arial, sans-serif; }
:is(body, #beta-da-navigation) div.rcs > a.rc > span.m { color: #51596b; font: 600 11px/1.3 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }

/* ════ Téléphone ═════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  :is(body, #beta-da-navigation) div.tdm { margin-top: 44px; }
  :is(body, #beta-da-navigation) div.tdm > ol { columns: 1; }
  :is(body, #beta-da-navigation) div.tdm > ol > li > a { grid-template-columns: 2.1rem minmax(0, 1fr); padding: 12px 8px 13px 6px; }
  :is(body, #beta-da-navigation) div.tdm a span.t { font-size: 19px; }
  :is(body, #beta-da-navigation) div.tdm a span.t > span.d { font-size: 14px; }
  :is(body, #beta-da-navigation) nav.suite { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 44px; }
  :is(body, #beta-da-navigation) nav.suite > a { min-height: 76px; padding: 14px 16px; }
  :is(body, #beta-da-navigation) nav.suite > a.apres, :is(body, #beta-da-navigation) nav.suite > a.apres:only-child { grid-column: auto; text-align: left; align-items: flex-start; }
  :is(body, #beta-da-navigation) div.ensuite, :is(body, #beta-da-navigation) div.grille:has(> a > span.ou) { grid-template-columns: minmax(0, 1fr); }
  :is(body, #beta-da-navigation) div.fam:has(> ul) > ul { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  :is(body, #beta-da-navigation) ul.recenses > li > span.ou { display: block; margin: 3px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  :is(body, #beta-da-navigation) nav.suite > a, :is(body, #beta-da-navigation) div.ensuite > a, :is(body, #beta-da-navigation) div.grille:has(> a > span.ou) > a, :is(body, #beta-da-navigation) div.fam:has(> ul) > ul > li > a, :is(body, #beta-da-navigation) div.rcs > a.rc { transition: none; }
  :is(body, #beta-da-navigation) nav.suite > a:hover, :is(body, #beta-da-navigation) div.ensuite > a:hover, :is(body, #beta-da-navigation) div.grille:has(> a > span.ou) > a:hover, :is(body, #beta-da-navigation) div.fam:has(> ul) > ul > li > a:hover, :is(body, #beta-da-navigation) div.rcs > a.rc:hover { transform: none; }
}

/* ── beta_da_plan ── */

/* le plan du site : un sommaire, puis une section par famille de pages */
body main.wrap section.planche .beta-plan { max-width: 1120px; margin: 8px auto 0; padding: 0 0 48px; color: var(--beta-ink); font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif; }
body main.wrap section.planche .beta-plan a { color: var(--beta-ink); }
body main.wrap section.planche .beta-plan h2, body main.wrap section.planche .beta-plan h3 { color: var(--beta-ink); font-family: 'Barlow Condensed', 'Atkinson Hyperlegible Next', Arial, sans-serif; text-wrap: balance; }

/* sommaire */
body main.wrap section.planche .beta-plan .beta-plan-som { margin: 0 0 64px; }
/* l'ancienne feuille pose taille et graisse des h2 de planche avec !important (58 px, 300) */
body main.wrap section.planche .beta-plan .beta-plan-som h2 { margin: 0 0 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--beta-violet); }
body main.wrap section.planche .beta-plan .beta-plan-som-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 36px; border-top: 2px solid var(--beta-ink); }
body main.wrap section.planche .beta-plan .beta-plan-som-liste > div { border-bottom: 1px solid var(--beta-line); }
body main.wrap section.planche .beta-plan .beta-plan-som-liste a { display: flex; align-items: baseline; gap: 12px; padding: 10px 2px; text-decoration: none; font: 500 16px/1.3 'Atkinson Hyperlegible Next', Arial, sans-serif; }
body main.wrap section.planche .beta-plan .beta-plan-som-liste a:hover, body main.wrap section.planche .beta-plan .beta-plan-som-liste a:focus-visible { background: var(--beta-lemon); }
body main.wrap section.planche .beta-plan .beta-plan-rang { flex: 0 0 3.8em; font: 600 12px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; color: var(--beta-violet); }
body main.wrap section.planche .beta-plan .beta-plan-nb { margin-left: auto; padding-left: 8px; font: 500 12px/1.3 'IBM Plex Mono', ui-monospace, monospace; color: var(--beta-ink); white-space: nowrap; }
body main.wrap section.planche .beta-plan .beta-plan-legende { margin: 22px 0 0; font: 400 15px/1.6 'Atkinson Hyperlegible Next', Arial, sans-serif; }

/* repères : scène du moteur, dossier approfondi */
body main.wrap section.planche .beta-plan .beta-plan-m { flex: 0 0 auto; align-self: center; padding: 1px 6px; border: 1px solid var(--beta-ink); font: 600 12px/1.5 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
body main.wrap section.planche .beta-plan .beta-plan-m-scene { background: var(--beta-lemon); color: var(--beta-ink); }
body main.wrap section.planche .beta-plan .beta-plan-m-dossier { background: var(--beta-ink); color: var(--beta-paper); }

/* une famille */
body main.wrap section.planche .beta-plan .beta-plan-fam { margin: 0 0 56px; scroll-margin-top: 96px; }
body main.wrap section.planche .beta-plan .beta-plan-fam > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding-bottom: 10px; border-bottom: 2px solid var(--beta-ink); }
body main.wrap section.planche .beta-plan .beta-plan-oeil { flex: 1 0 100%; margin: 0 0 6px; font: 600 12px/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--beta-violet); }
body main.wrap section.planche .beta-plan .beta-plan-fam h2 { margin: 0; font-weight: 800 !important; font-size: clamp(30px, 3.6vw, 42px) !important; line-height: 1; letter-spacing: -.018em; }
body main.wrap section.planche .beta-plan .beta-plan-fam h2 a { text-decoration: underline; text-decoration-color: var(--beta-lemon); text-decoration-thickness: 4px; text-underline-offset: 3px; }
body main.wrap section.planche .beta-plan .beta-plan-fam h2 a:hover, body main.wrap section.planche .beta-plan .beta-plan-fam h2 a:focus-visible { background: var(--beta-lemon); }
body main.wrap section.planche .beta-plan .beta-plan-pages { margin-left: auto; font: 500 13px/1.3 'IBM Plex Mono', ui-monospace, monospace; white-space: nowrap; }

/* la liste ordonnée : numéro affiché, titre, repères */
body main.wrap section.planche .beta-plan .beta-plan-liste > div { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--beta-line); }
body main.wrap section.planche .beta-plan .beta-plan-liste a { display: flex; flex: 1 1 auto; align-items: baseline; gap: 14px; min-width: 0; padding: 9px 2px; text-decoration: none; font: 400 17px/1.35 'Atkinson Hyperlegible Next', Arial, sans-serif; }
body main.wrap section.planche .beta-plan .beta-plan-n { flex: 0 0 3.4rem; font: 600 13px/1.35 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .02em; color: var(--beta-violet); }
body main.wrap section.planche .beta-plan .beta-plan-t { min-width: 0; overflow-wrap: anywhere; }
body main.wrap section.planche .beta-plan .beta-plan-liste a:hover .beta-plan-t, body main.wrap section.planche .beta-plan .beta-plan-liste a:focus-visible .beta-plan-t { background: var(--beta-lemon); }

/* les listes longues : pays, constructeurs */
body main.wrap section.planche .beta-plan details.beta-plan-long { margin-top: 20px; border: 1px solid var(--beta-ink); }
body main.wrap section.planche .beta-plan details.beta-plan-long > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 12px 14px; cursor: pointer; list-style: none; font: 700 17px/1.3 'Atkinson Hyperlegible Next', Arial, sans-serif; color: var(--beta-ink); }
body main.wrap section.planche .beta-plan details.beta-plan-long > summary::-webkit-details-marker { display: none; }
body main.wrap section.planche .beta-plan details.beta-plan-long > summary::after { content: "+"; margin-left: auto; font: 600 20px/1 'IBM Plex Mono', ui-monospace, monospace; }
body main.wrap section.planche .beta-plan details.beta-plan-long[open] > summary { background: var(--beta-lemon); border-bottom: 1px solid var(--beta-ink); }
body main.wrap section.planche .beta-plan details.beta-plan-long[open] > summary::after { content: "-"; }
body main.wrap section.planche .beta-plan details.beta-plan-long > summary:focus-visible { outline: 3px solid var(--beta-violet); outline-offset: 2px; }
body main.wrap section.planche .beta-plan .beta-plan-resume { font: 500 13px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .02em; }
body main.wrap section.planche .beta-plan .beta-plan-corps { padding: 2px 14px 20px; }
body main.wrap section.planche .beta-plan .beta-plan-corps h3 { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 8px; font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -.012em; }
body main.wrap section.planche .beta-plan .beta-plan-corps h3 span { font: 500 12px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .02em; }
body main.wrap section.planche .beta-plan .beta-plan-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 28px; border-top: 1px solid var(--beta-ink); }
body main.wrap section.planche .beta-plan .beta-plan-grille > div { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--beta-line); }
body main.wrap section.planche .beta-plan .beta-plan-grille a { padding: 7px 0; text-decoration: none; font: 400 16px/1.35 'Atkinson Hyperlegible Next', Arial, sans-serif; overflow-wrap: anywhere; }
body main.wrap section.planche .beta-plan .beta-plan-grille a:hover, body main.wrap section.planche .beta-plan .beta-plan-grille a:focus-visible { background: var(--beta-lemon); }

@media (max-width: 720px) {
  body main.wrap section.planche .beta-plan { margin-top: 0; }
  body main.wrap section.planche .beta-plan .beta-plan-som { margin-bottom: 48px; }
  body main.wrap section.planche .beta-plan .beta-plan-som-liste { grid-template-columns: minmax(0, 1fr); }
  body main.wrap section.planche .beta-plan .beta-plan-fam { margin-bottom: 44px; }
  body main.wrap section.planche .beta-plan .beta-plan-pages { margin: 8px 0 0; flex: 1 0 100%; }
  body main.wrap section.planche .beta-plan .beta-plan-liste a { gap: 10px; font-size: 16px; }
  body main.wrap section.planche .beta-plan .beta-plan-n { flex-basis: 2.9rem; }
  body main.wrap section.planche .beta-plan .beta-plan-grille { grid-template-columns: minmax(0, 1fr); }
  body main.wrap section.planche .beta-plan .beta-plan-corps { padding: 2px 12px 16px; }
}

/* ── beta_da_reglementation ── */

/* ── beta_da_reglementation : la planche XXII, ses chapitres, ses renvois ── */
/* La colonne de lecture : beta_da_lecture laisse hors de sa colonne tout ce qui porte
   une classe « beta- » ; on la reprend ici (même mesure que le colophon). Les tableaux
   et les échéances gardent la largeur de la page, comme les tableaux du site. */
body main.wrap .txt p.beta-regl-etat, body main.wrap .txt div.beta-regl-chapeau,
body main.wrap .txt .beta-regl-cas, body main.wrap .txt .beta-regl-retenir, body main.wrap .txt .beta-regl-ombre,
body main.wrap .txt ul.beta-regl-liste, body main.wrap .txt ol.beta-regl-sources {
  box-sizing: border-box; max-width: min(68ch, 620px); margin-left: auto !important; margin-right: auto !important; }
body main.wrap .txt p.beta-regl-etat { display: block; margin-top: 6px; margin-bottom: 18px; padding: 6px 10px; border: 1px solid var(--beta-ink, #171923); background: var(--beta-paper, #f5f7f8); font: 500 13px/1.5 'IBM Plex Mono', ui-monospace, monospace; color: var(--beta-ink, #171923); }
body main.wrap .txt p.beta-regl-etat b { font-weight: 700; margin-right: 4px; }
body main.wrap .txt div.beta-regl-chapeau { margin-top: 0; margin-bottom: 26px; padding: 0 0 0 16px; border-left: 4px solid var(--beta-lemon, #d9ef59); font-size: 1.08em; line-height: 1.6; }
body main.wrap .txt div.beta-regl-chapeau p { margin: 0 0 8px; }
body main.wrap .txt ul.beta-regl-liste { margin-top: 8px; margin-bottom: 18px; padding-left: 1.3em; }
body main.wrap .txt ul.beta-regl-liste li { margin: 0 0 6px; line-height: 1.55; }
body main.wrap .txt .beta-regl-bloc { margin: 36px 0 0; padding: 16px 18px 6px; border: 1px solid var(--beta-ink, #171923); background: #fff; }
body main.wrap .txt .beta-regl-bloc > h4 { margin: 0 0 6px; font: 600 12px/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--beta-violet, #6043e8); }
body main.wrap .txt .beta-regl-bloc > p.beta-regl-intro { margin: 0 0 12px; font-size: .92em; color: #51596b; }
body main.wrap .txt .beta-regl-bloc ul { margin: 0 0 12px; padding-left: 1.3em; }
body main.wrap .txt .beta-regl-bloc li { margin: 0 0 7px; line-height: 1.55; }
body main.wrap .txt .beta-regl-retenir { background: #fbfde9; border-color: var(--beta-ink, #171923); }
body main.wrap .txt .beta-regl-ombre { border-style: dashed; }
body main.wrap .txt .beta-regl-cas-un { margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--beta-line, #c6cbd2); }
body main.wrap .txt .beta-regl-cas-un:last-child { border-bottom: 0; }
body main.wrap .txt .beta-regl-cas-un p { margin: 0 0 6px; }
body main.wrap .txt p.beta-regl-cas-tete { font: 500 13px/1.45 'IBM Plex Mono', ui-monospace, monospace; color: var(--beta-ink, #171923); }
body main.wrap .txt p.beta-regl-cas-tete time { font-weight: 700; }
body main.wrap .txt p.beta-regl-illustre { font-size: .94em; }
body main.wrap .txt p.beta-regl-illustre b { margin-right: 4px; }
body main.wrap .txt span.beta-regl-passe { display: inline-block; margin-left: 6px; font: 500 11px/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #51596b; }
body main.wrap .txt ol.beta-regl-sources { margin-top: 8px; margin-bottom: 0; padding-left: 1.6em; }
body main.wrap .txt .beta-regl-echeances td:last-child { white-space: nowrap; }
body main.wrap .txt .beta-regl-echeances td:first-child { min-width: 7.5em; }
body main.wrap .txt ol.beta-regl-sources li { margin: 0 0 7px; font-size: .92em; line-height: 1.5; overflow-wrap: anywhere; }
body main.wrap .txt ol.beta-regl-sources li:target { background: #e8e2ff; }
body main.wrap .txt ol.beta-regl-sources .beta-regl-type { color: #51596b; font: 500 12px/1.4 'IBM Plex Mono', monospace; }
body main.wrap a.beta-regl-cite, body main.wrap a.beta-regl-gl { text-decoration: underline; text-decoration-color: var(--beta-lemon, #d9ef59); text-decoration-thickness: 3px; text-underline-offset: 2px; }
body main.wrap .txt .tw.beta-regl-tw { margin: 18px 0 22px; }
body main.wrap .txt .tw.beta-regl-tw table { min-width: 100%; }
#bibliotheque h2.beta-regl-biblio-tete { margin: 48px 0 8px; }
#bibliotheque p.beta-regl-biblio-intro { max-width: 62ch; }
@media (max-width: 720px) {
  body main.wrap .txt .beta-regl-bloc { padding: 14px 12px 4px; }
}

/* ── beta_da_torrefaction ── */

/* ── beta_da_torrefaction : la liste des fiches sous le sommaire de la planche ── */
body main.wrap .tdm .beta-torr-fiches { margin-top: 18px; }
body main.wrap .tdm p.beta-torr-fiches-tete { margin: 26px 0 6px; font: 600 12px/1.4 'IBM Plex Mono', monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--beta-violet, #6043e8); }
body main.wrap a.beta-torr-renvoi { text-decoration: underline; text-decoration-color: var(--beta-lemon, #d9ef59); text-decoration-thickness: 3px; text-underline-offset: 2px; }

/* ── beta_da_tribunes_prix ── */

/* ── beta_da_tribunes_prix : bandeau de brouillon, appels de note ── */
body main.wrap section.tribune-lecture .trib-brouillon { box-sizing: border-box; max-width: 860px; margin: 0 auto 18px; padding: 10px 14px; border: 2px solid #1d1d2b; background: #d9ef59; color: #1d1d2b; font: 600 14px/1.45 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .02em; }
body main.wrap section.tribune-lecture .trib-corps sup.trib-appel { font-size: .66em; line-height: 0; margin-left: 2px; white-space: nowrap; }
body main.wrap section.tribune-lecture .trib-corps sup.trib-appel a { text-decoration: none; border-bottom: 1px solid currentColor; }
body main.wrap section.tribune-lecture .trib-corps .trib-notes li:target { outline: 2px solid #d9ef59; outline-offset: 4px; }

/* ── traduire.py : le choix de la langue ── */
.pxl-langues { display: flex; align-items: center; gap: 2px; flex: none; font: 700 12px/1 'IBM Plex Mono',monospace; letter-spacing: .06em; }
.pxl-langues a, .pxl-langues > span { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 30px; min-height: 30px; padding: 0 5px; border: 1px solid transparent; color: inherit; }
.pxl-langues a:hover, .pxl-langues a:focus-visible { border-color: var(--beta-ink); }
.pxl-langues > span[aria-current] { background: var(--beta-ink); color: var(--beta-paper, #fff); }
.pxl-langues a.pxl-langue-memo { border-color: var(--beta-violet); }
.pxl-langues-accueil { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; font: 600 14px/1.2 'IBM Plex Mono',monospace; letter-spacing: .02em; }
main.moderne .pxl-langues-accueil a, .pxl-langues-accueil a, .pxl-langues-accueil > span { padding: 6px 0 4px; border-bottom: 2px solid transparent; color: #dfe5f2; text-decoration: none; }
main.moderne .pxl-langues-accueil a:hover, main.moderne .pxl-langues-accueil a:focus-visible { color: var(--beta-lemon); border-bottom-color: var(--beta-lemon); }
.pxl-langues-accueil > span[aria-current] { color: var(--beta-lemon); border-bottom-color: var(--beta-lemon); }
.pxl-langues-accueil a.pxl-langue-memo { border-bottom-color: #8d96ab; }
/* Drapeaux devant le code de langue (demande de Marco, 28 octobre) : flag-icons,
   (c) 2013 Panayiotis Lipiridis, licence MIT. Espagne : drapeau civil, sans armoiries. */
[data-pxl-langue]::before { content: ""; flex: none; display: inline-block; width: 16px; height: 12px; background: center / cover no-repeat; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.pxl-langues-accueil a[data-pxl-langue], .pxl-langues-accueil > span[data-pxl-langue] { display: inline-flex; align-items: center; gap: 7px; }
[data-pxl-langue="fr"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 480%22%3E%3Cpath fill=%22%23fff%22 d=%22M0 0h640v480H0z%22/%3E%3Cpath fill=%22%23000091%22 d=%22M0 0h213.3v480H0z%22/%3E%3Cpath fill=%22%23e1000f%22 d=%22M426.7 0H640v480H426.7z%22/%3E%3C/svg%3E"); }
[data-pxl-langue="en"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 480%22%3E%3Cpath fill=%22%23012169%22 d=%22M0 0h640v480H0z%22/%3E%3Cpath fill=%22%23FFF%22 d=%22m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z%22/%3E%3Cpath fill=%22%23C8102E%22 d=%22m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z%22/%3E%3Cpath fill=%22%23FFF%22 d=%22M241 0v480h160V0zM0 160v160h640V160z%22/%3E%3Cpath fill=%22%23C8102E%22 d=%22M0 193v96h640v-96zM273 0v480h96V0z%22/%3E%3C/svg%3E"); }
[data-pxl-langue="pt"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 480%22%3E%3Cg stroke-width=%221pt%22%3E%3Cpath fill=%22%23229e45%22 fill-rule=%22evenodd%22 d=%22M0 0h640v480H0z%22/%3E%3Cpath fill=%22%23f8e509%22 fill-rule=%22evenodd%22 d=%22m321.4 436 301.5-195.7L319.6 44 17.1 240.7z%22/%3E%3Cpath fill=%22%232b49a3%22 fill-rule=%22evenodd%22 d=%22M452.8 240c0 70.3-57.1 127.3-127.6 127.3A127.4 127.4 0 1 1 452.8 240%22/%3E%3Cpath fill=%22%23ffffef%22 fill-rule=%22evenodd%22 d=%22m283.3 316.3-4-2.3-4 2 .9-4.5-3.2-3.4 4.5-.5 2.2-4 1.9 4.2 4.4.8-3.3 3m86 26.3-3.9-2.3-4 2 .8-4.5-3.1-3.3 4.5-.5 2.1-4.1 2 4.2 4.4.8-3.4 3.1m-36.2-30-3.4-2-3.5 1.8.8-3.9-2.8-2.9 4-.4 1.8-3.6 1.6 3.7 3.9.7-3 2.7m87-8.5-3.4-2-3.5 1.8.8-3.9-2.7-2.8 3.9-.4 1.8-3.5 1.6 3.6 3.8.7-2.9 2.6m-87.3-22-4-2.2-4 2 .8-4.6-3.1-3.3 4.5-.5 2.1-4.1 2 4.2 4.4.8-3.4 3.2m-104.6-35-4-2.2-4 2 1-4.6-3.3-3.3 4.6-.5 2-4.1 2 4.2 4.4.8-3.3 3.1m13.3 57.2-4-2.3-4 2 .9-4.5-3.2-3.3 4.5-.6 2.1-4 2 4.2 4.4.8-3.3 3.1m132-67.3-3.6-2-3.6 1.8.8-4-2.8-3 4-.5 1.9-3.6 1.7 3.8 4 .7-3 2.7m-6.7 38.3-2.7-1.6-2.9 1.4.6-3.2-2.2-2.3 3.2-.4 1.5-2.8 1.3 3 3 .5-2.2 2.2m-142.2 50.4-2.7-1.5-2.7 1.3.6-3-2.1-2.2 3-.4 1.4-2.7 1.3 2.8 3 .6-2.3 2M419 299.8l-2.2-1.1-2.2 1 .5-2.3-1.7-1.6 2.4-.3 1.2-2 1 2 2.5.5-1.9 1.5%22/%3E%3Cpath fill=%22%23ffffef%22 fill-rule=%22evenodd%22 d=%22m219.3 287.6-2.7-1.5-2.7 1.3.6-3-2.1-2.2 3-.4 1.4-2.7 1.3 2.8 3 .6-2.3 2%22/%3E%3Cpath fill=%22%23ffffef%22 fill-rule=%22evenodd%22 d=%22m219.3 287.6-2.7-1.5-2.7 1.3.6-3-2.1-2.2 3-.4 1.4-2.7 1.3 2.8 3 .6-2.3 2m42.3 3-2.6-1.4-2.7 1.3.6-3-2.1-2.2 3-.4 1.4-2.7 1.3 2.8 3 .5-2.3 2.1m-4.8 17-2.6-1.5-2.7 1.4.6-3-2.1-2.3 3-.4 1.4-2.7 1.3 2.8 3 .6-2.3 2m87.4-22.2-2.6-1.6-2.8 1.4.6-3-2-2.3 3-.3 1.4-2.7 1.2 2.8 3 .5-2.2 2.1m-25.1 3-2.7-1.5-2.7 1.4.6-3-2-2.3 3-.3 1.4-2.8 1.2 2.9 3 .5-2.2 2.1m-68.8-5.8-1.7-1-1.7.8.4-1.9-1.3-1.4 1.9-.2.8-1.7.8 1.8 1.9.3-1.4 1.3m167.8 45.4-2.6-1.5-2.7 1.4.6-3-2.1-2.3 3-.4 1.4-2.7 1.3 2.8 3 .6-2.3 2m-20.8 6-2.2-1.4-2.3 1.2.5-2.6-1.7-1.8 2.5-.3 1.2-2.3 1 2.4 2.5.4-1.9 1.8m10.4 2.3-2-1.2-2.1 1 .4-2.3-1.6-1.7 2.3-.3 1.1-2 1 2 2.3.5-1.7 1.6m29.1-22.8-2-1-2 1 .5-2.3-1.6-1.7 2.3-.3 1-2 1 2.1 2.1.4-1.6 1.6m-38.8 41.8-2.5-1.4-2.7 1.2.6-2.8-2-2 3-.3 1.3-2.5 1.2 2.6 3 .5-2.3 1.9m.6 14.2-2.4-1.4-2.4 1.3.6-2.8-1.9-2 2.7-.4 1.2-2.5 1.1 2.6 2.7.5-2 2m-19-23.1-1.9-1.2-2 1 .4-2.2-1.5-1.7 2.2-.2 1-2 1 2 2.2.4-1.6 1.6m-17.8 2.3-2-1.2-2 1 .5-2.2-1.6-1.7 2.3-.2 1-2 1 2 2.1.4-1.6 1.6m-30.4-24.6-2-1.1-2 1 .5-2.3-1.6-1.6 2.2-.3 1-2 1 2 2.2.5-1.6 1.5m3.7 57-1.6-.9-1.8.9.4-2-1.3-1.4 1.9-.2.9-1.7.8 1.8 1.9.3-1.4 1.3m-46.2-86.6-4-2.3-4 2 .9-4.5-3.2-3.3 4.5-.6 2.2-4 1.9 4.2 4.4.8-3.3 3.1%22/%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M444.4 285.8a124.6 124.6 0 0 0 5.8-19.8c-67.8-59.5-143.3-90-238.7-83.7a124.5 124.5 0 0 0-8.5 20.9c113-10.8 196 39.2 241.4 82.6%22/%3E%3Cpath fill=%22%23309e3a%22 d=%22m414 252.4 2.3 1.3a3.4 3.4 0 0 0-.3 2.2 3 3 0 0 0 1.4 1.7c.7.5 1.4.8 2 .7.6 0 1-.3 1.3-.7a1.3 1.3 0 0 0 .2-.9 2.3 2.3 0 0 0-.5-1c-.2-.3-.7-1-1.5-1.8a7.7 7.7 0 0 1-1.8-3 3.7 3.7 0 0 1 2-4.4 3.8 3.8 0 0 1 2.3-.2 7 7 0 0 1 2.6 1.2c1.4 1 2.3 2 2.6 3.2a4.1 4.1 0 0 1-.6 3.3l-2.4-1.5c.3-.6.4-1.2.2-1.7-.1-.5-.5-1-1.2-1.4a3.2 3.2 0 0 0-1.8-.7 1 1 0 0 0-.9.5c-.2.3-.2.6-.1 1s.6 1.2 1.6 2.2c1 1 1.6 1.9 2 2.5a3.9 3.9 0 0 1-.3 4.2 4.1 4.1 0 0 1-1.9 1.5 4 4 0 0 1-2.4.3c-.9-.2-1.8-.6-2.8-1.3-1.5-1-2.4-2.1-2.7-3.3a5.4 5.4 0 0 1 .6-4zm-11.6-7.6 2.5 1.3a3.4 3.4 0 0 0-.2 2.2 3 3 0 0 0 1.4 1.6c.8.5 1.4.7 2 .6.6 0 1-.3 1.3-.8a1.3 1.3 0 0 0 .2-.8c0-.3-.2-.7-.5-1a34.6 34.6 0 0 0-1.6-1.8c-1.1-1.1-1.8-2-2-2.8a3.7 3.7 0 0 1 .4-3.1 3.6 3.6 0 0 1 1.6-1.4 3.8 3.8 0 0 1 2.2-.3 7 7 0 0 1 2.6 1c1.5 1 2.4 2 2.7 3.1a4.1 4.1 0 0 1-.4 3.4l-2.5-1.4c.3-.7.4-1.2.2-1.7s-.6-1-1.3-1.4a3.2 3.2 0 0 0-1.9-.6 1 1 0 0 0-.8.5c-.2.3-.2.6-.1 1s.7 1.2 1.7 2.2c1 1 1.7 1.8 2 2.4a3.9 3.9 0 0 1 0 4.2 4.2 4.2 0 0 1-1.8 1.6 4 4 0 0 1-2.4.3 8 8 0 0 1-2.9-1.1 6 6 0 0 1-2.8-3.2 5.4 5.4 0 0 1 .4-4m-14.2-3.8 7.3-12 8.8 5.5-1.2 2-6.4-4-1.6 2.7 6 3.7-1.3 2-6-3.7-2 3.3 6.7 4-1.2 2zm-20.7-17 1.1-2 5.4 2.7-2.5 5c-.8.2-1.8.3-3 .2a9.4 9.4 0 0 1-3.3-1 7.7 7.7 0 0 1-3-2.6 6 6 0 0 1-1-3.5 8.6 8.6 0 0 1 1-3.7 8 8 0 0 1 2.6-3 6.2 6.2 0 0 1 3.6-1.1c1 0 2 .3 3.2 1 1.6.7 2.6 1.7 3.1 2.8a5 5 0 0 1 .3 3.5l-2.7-.8a3 3 0 0 0-.2-2c-.3-.6-.8-1-1.6-1.4a3.8 3.8 0 0 0-3.1-.3c-1 .3-1.9 1.2-2.6 2.6-.7 1.4-1 2.7-.7 3.8a3.7 3.7 0 0 0 2 2.4c.5.3 1.1.5 1.7.5a6 6 0 0 0 1.8 0l.8-1.6zm-90.2-22.3 2-14 4.2.7 1.1 9.8 3.9-9 4.2.6-2 13.8-2.7-.4 1.7-10.9-4.4 10.5-2.7-.4-1.1-11.3-1.6 11zm-14.1-1.7 1.3-14 10.3 1-.2 2.4-7.5-.7-.3 3 7 .7-.3 2.4-7-.7-.3 3.8 7.8.7-.2 2.4z%22/%3E%3Cg stroke-opacity=%22.5%22%3E%3Cpath fill=%22%23309e3a%22 d=%22M216.5 191.3c0-1.5.3-2.6.7-3.6a6.7 6.7 0 0 1 1.4-1.9 5.4 5.4 0 0 1 1.8-1.2c1-.3 2-.5 3-.5 2.1 0 3.7.8 5 2a7.4 7.4 0 0 1 1.6 5.5c0 2.2-.7 4-2 5.3a6.5 6.5 0 0 1-5 1.7 6.6 6.6 0 0 1-4.8-2 7.3 7.3 0 0 1-1.7-5.3%22/%3E%3Cpath fill=%22%23f7ffff%22 d=%22M219.4 191.3c0 1.5.3 2.7 1 3.6.7.8 1.6 1.3 2.8 1.3a3.5 3.5 0 0 0 2.8-1.1c.7-.8 1-2 1.1-3.7 0-1.6-.2-2.8-1-3.6a3.5 3.5 0 0 0-2.7-1.3 3.6 3.6 0 0 0-2.8 1.2c-.8.8-1.1 2-1.2 3.6%22/%3E%3C/g%3E%3Cg stroke-opacity=%22.5%22%3E%3Cpath fill=%22%23309e3a%22 d=%22m233 198.5.2-14h6c1.5 0 2.5.2 3.2.5.7.2 1.2.7 1.6 1.3s.6 1.4.6 2.3a3.8 3.8 0 0 1-1 2.6 4.5 4.5 0 0 1-2.7 1.2l1.5 1.2c.4.4.9 1.2 1.5 2.3l1.7 2.8h-3.4l-2-3.2-1.4-2a2.1 2.1 0 0 0-.9-.6 5 5 0 0 0-1.4-.2h-.6v5.8z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M236 190.5h2c1.4 0 2.3 0 2.6-.2.3 0 .6-.3.8-.5s.3-.7.3-1c0-.6-.1-1-.4-1.2-.2-.3-.6-.5-1-.6h-2l-2.3-.1z%22/%3E%3C/g%3E%3Cg stroke-opacity=%22.5%22%3E%3Cpath fill=%22%23309e3a%22 d=%22m249 185.2 5.2.3c1.1 0 2 .1 2.6.3a4.7 4.7 0 0 1 2 1.4 6 6 0 0 1 1.2 2.4c.3.9.4 2 .3 3.3a9.3 9.3 0 0 1-.5 3c-.4 1-1 1.8-1.7 2.4a5 5 0 0 1-2 1c-.6.2-1.5.2-2.5.2l-5.3-.3z%22/%3E%3Cpath fill=%22%23fff%22 d=%22m251.7 187.7-.5 9.3h3.8c.5 0 .9-.2 1.2-.5.3-.3.6-.7.8-1.3.2-.6.4-1.5.4-2.6l-.1-2.5a3.2 3.2 0 0 0-.8-1.4 2.7 2.7 0 0 0-1.2-.7 13 13 0 0 0-2.3-.3z%22/%3E%3C/g%3E%3Cg stroke-opacity=%22.5%22%3E%3Cpath fill=%22%23309e3a%22 d=%22m317.6 210.2 3.3-13.6 4.4 1 3.2 1c.7.4 1.3 1 1.6 1.9.4.8.4 1.7.2 2.8-.2.8-.5 1.5-1 2a3.9 3.9 0 0 1-3 1.4c-.7 0-1.7-.2-3-.5l-1.7-.5-1.2 5.2z%22/%3E%3Cpath fill=%22%23fff%22 d=%22m323 199.6-.8 3.8 1.5.4c1 .2 1.8.4 2.2.3a1.9 1.9 0 0 0 1.6-1.5c0-.5 0-.9-.2-1.3a2 2 0 0 0-1-.9l-1.9-.5-1.3-.3z%22/%3E%3C/g%3E%3Cg stroke-opacity=%22.5%22%3E%3Cpath fill=%22%23309e3a%22 d=%22m330.6 214.1 4.7-13.2 5.5 2c1.5.5 2.4 1 3 1.4.5.5.9 1 1 1.8s.2 1.5 0 2.3c-.4 1-1 1.7-1.8 2.2-.8.4-1.8.5-3 .3.4.5.8 1 1 1.6l.8 2.7.6 3.1-3.1-1.1-1-3.6a19.5 19.5 0 0 0-.7-2.4 2.1 2.1 0 0 0-.6-.8c-.2-.3-.6-.5-1.3-.7l-.5-.2-2 5.6z%22/%3E%3Cpath fill=%22%23fff%22 d=%22m336 207.4 1.9.7c1.3.5 2.1.7 2.5.7.3 0 .6 0 .9-.3.3-.2.5-.5.6-.9.2-.4.2-.8 0-1.2a1.7 1.7 0 0 0-.8-.9l-2-.7-2-.7-1.2 3.3z%22/%3E%3C/g%3E%3Cg stroke-opacity=%22.5%22%3E%3Cpath fill=%22%23309e3a%22 d=%22M347 213.6a9 9 0 0 1 1.7-3.2 6.6 6.6 0 0 1 1.8-1.5 6 6 0 0 1 2-.7c1 0 2 0 3.1.4a6.5 6.5 0 0 1 4.2 3.3c.8 1.6.8 3.5.2 5.7a7.4 7.4 0 0 1-3.4 4.5c-1.5.9-3.3 1-5.2.4a6.6 6.6 0 0 1-4.2-3.3 7.3 7.3 0 0 1-.2-5.6%22/%3E%3Cpath fill=%22%23fff%22 d=%22M349.8 214.4c-.4 1.5-.5 2.8 0 3.8s1.2 1.6 2.3 2c1 .3 2 .2 3-.4 1-.5 1.6-1.6 2.1-3.2.5-1.5.5-2.7 0-3.7a3.5 3.5 0 0 0-2.2-2 3.6 3.6 0 0 0-3 .3c-1 .6-1.7 1.6-2.2 3.2%22/%3E%3C/g%3E%3Cg stroke-opacity=%22.5%22%3E%3Cpath fill=%22%23309e3a%22 d=%22m374.3 233.1 6.4-12.4 5.3 2.7a10 10 0 0 1 2.7 1.9c.5.5.8 1.1.8 1.9s0 1.5-.4 2.2a3.8 3.8 0 0 1-2 2c-1 .2-2 .2-3.1-.2.4.6.6 1.2.8 1.7.2.6.3 1.5.4 2.8l.2 3.2-3-1.5-.4-3.7a20 20 0 0 0-.3-2.5 2 2 0 0 0-.5-1l-1.2-.7-.5-.3-2.7 5.2z%22/%3E%3Cpath fill=%22%23fff%22 d=%22m380.5 227.2 1.9 1c1.2.6 2 1 2.3 1 .3 0 .7 0 1-.2.3-.1.5-.4.7-.8.2-.4.3-.8.2-1.2a2 2 0 0 0-.7-1 23.7 23.7 0 0 0-1.8-1l-2-1z%22/%3E%3C/g%3E%3Cg stroke-opacity=%22.5%22%3E%3Cpath fill=%22%23309e3a%22 d=%22M426.1 258.7a8.9 8.9 0 0 1 2.5-2.6 6.6 6.6 0 0 1 2.2-.9 5.5 5.5 0 0 1 2.2 0c1 .2 1.9.6 2.8 1.2a6.6 6.6 0 0 1 3 4.4c.3 1.7-.2 3.6-1.4 5.5a7.3 7.3 0 0 1-4.5 3.3 6.5 6.5 0 0 1-5.2-1.1 6.6 6.6 0 0 1-3-4.4c-.3-1.8.2-3.6 1.4-5.4%22/%3E%3Cpath fill=%22%23fff%22 d=%22M428.6 260.3c-1 1.3-1.3 2.5-1.1 3.6a3.6 3.6 0 0 0 1.6 2.5c1 .7 2 .9 3 .6 1-.3 2-1 2.9-2.4.9-1.4 1.3-2.6 1.1-3.6-.1-1-.7-1.9-1.6-2.6s-2-.8-3-.5c-1 .2-2 1-3 2.4z%22/%3E%3C/g%3E%3Cpath fill=%22%23309e3a%22 d=%22m301.8 204.5 2.3-9.8 7.2 1.7-.3 1.6-5.3-1.2-.5 2.2 4.9 1.1-.4 1.7-4.9-1.2-.6 2.7 5.5 1.3-.4 1.6z%22/%3E%3C/g%3E%3C/svg%3E"); }
[data-pxl-langue="es"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 480%22%3E%3Cpath fill=%22%23AA151B%22 d=%22M0 0h640v480H0z%22/%3E%3Cpath fill=%22%23F1BF00%22 d=%22M0 120h640v240H0z%22/%3E%3C/svg%3E"); }
.pxl-langues-hors-generique { margin: 0 0 14px; }
.pxl-langues-hors-generique a, .pxl-langues-hors-generique > span { color: var(--beta-ink) !important; }
@media (max-width: 1050px) { .beta-header .pxl-langues { margin-left: auto; } }
@media (max-width: 700px) {
  .beta-header .pxl-langues a, .beta-header .pxl-langues > span { min-width: 26px; padding: 0 3px; }
  /* sur téléphone, le drapeau seul : les quatre codes en plus faisaient déborder l'en-tête */
  .beta-header .pxl-langues [aria-hidden="true"] { display: none; }
  .beta-header .pxl-langues ~ .beta-menu-trigger { margin-left: 0; }
  .pxl-langues-accueil { gap: 2px 14px; font-size: 13px; }
}