/* /flow — la matrice A → B de l'époque (s'ajoute à base.css + site.css) */
.tk { font: 500 .9em/1 var(--f-num); }

/* hero compact + figure « reading p_AB » */
.hero-flow { min-height: 0; padding: 34px 0 40px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hero-flow h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); }
.cutframe.recap { aspect-ratio: auto; }
.cutframe.recap .cut-view { position: relative; inset: auto; }
.recap-in { padding: 54px 40px 30px; display: grid; gap: 18px; }
.rc-h { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 2px; font-size: .92rem; color: var(--ink-2); }
.rc-h .tk { color: var(--ink); }
.rc-h .num { color: var(--ink); font-size: .8rem; white-space: nowrap; }
.recap-in .bar { height: 40px; margin: 0; }
.recap-in .bar span { font-size: .78rem; }
.recap-in .bar .a + .a { border-left: 1px solid var(--paper); }
.recap-in .bar { background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--rule) 5px 6px); }
.bar .f, .by-flower .bar .f { background: var(--pollen-soft); outline: 1px dashed var(--pollen); outline-offset: -4px; color: var(--ink); justify-content: center; padding: 0 4px; border-right: 1px solid var(--ink); }
.rc-cap { margin: 4px 0 0; font: italic .9rem/1.45 var(--f-text); color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 12px; }
.rc-cap b { color: var(--ink); font-weight: 500; font-style: normal; }

/* barre d'outils de la matrice */
.flow { padding: 30px 0 30px; scroll-margin-top: 16px; }
.flow .intro { margin-bottom: 18px; }
.flow .intro p { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.flow .intro p .demo-tag { font-style: normal; }
.flow-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 14px; }
.views { display: flex; align-items: center; gap: 8px 10px; }
.views button { font: 400 .86rem/1 var(--f-text); color: var(--ink); background: transparent; border: 1px solid var(--rule-strong);
  border-radius: 999px; padding: .6em 1em; cursor: pointer; transition: background .2s, border-color .2s; }
.views button:hover { border-color: var(--ink); }
.views button[aria-checked="true"] { background: var(--pollen); border-color: var(--pollen); color: var(--ink-on-pollen); font-weight: 600; }
.views button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 .74rem/1.2 var(--f-num); color: var(--ink-2); }
.key li { display: flex; align-items: center; gap: 7px; }
.key i { display: inline-block; width: 16px; height: 12px; border: 1px solid var(--rule-strong); }
.key .k-net { background: color-mix(in oklab, var(--pollen) 55%, var(--paper)); border-color: var(--pollen); }
.key .k-fruit { border: 1px dashed var(--pollen); background: var(--pollen-soft); }
.key .k-cut { border: 1px dashed var(--ink-2); }

.reading { margin: 0 0 12px; min-height: 2.9em; padding: .7em 1em; font: italic 1rem/1.45 var(--f-text); color: var(--ink-2);
  border-left: 2px solid var(--rule-strong); background: color-mix(in oklab, var(--paper-2) 55%, var(--paper)); transition: border-color .2s, color .2s; }
.reading.is-live { color: var(--ink); border-color: var(--pollen); font-style: normal; }
[hidden] { display: none !important; }

/* la matrice : port de Background Blocks (cases qui s'allument, halo ligne/colonne, extinction lente) */
.mx-scroll { overflow-x: auto; max-width: 100%; box-shadow: inset 0 0 0 1px var(--rule-strong); background: color-mix(in oklab, var(--paper-2) 45%, var(--paper)); }
.mx { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1060px; font-size: .86rem; }
.mx th, .mx td { border: 1px solid var(--rule); padding: 0; text-align: center; vertical-align: middle; height: 50px; transition: background-color .7s ease, box-shadow .7s ease; }
.mx thead th { height: 58px; font: 500 .74rem/1.2 var(--f-num); letter-spacing: .02em; }
.mx thead th:first-child, .mx tbody th, .mx tfoot th { width: 108px; }
.mx thead .tot-h { width: 92px; font: 400 .66rem/1.2 var(--f-num); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mx .corner-h { font: 400 .62rem/1.3 var(--f-num); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mx th a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.mx th a:hover, .mx th a:focus-visible { color: var(--pollen); border-color: var(--pollen); outline: none; }
.mx th small { display: block; margin-top: 3px; font: 400 .6rem/1 var(--f-num); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mx th small.fr { color: var(--pollen); }
.mx tbody th { text-align: left; padding: 0 10px; font: 500 .78rem/1.2 var(--f-num); }
.mx th.off a { border-bottom-style: dashed; color: var(--ink-2); }
.mx td { font-family: var(--f-num); font-variant-numeric: tabular-nums; cursor: default; position: relative; outline: none; }
.mx td b { font-weight: 500; display: block; }
.mx td small { display: block; font: 400 .6rem/1.1 var(--f-num); color: var(--ink-2); margin-top: 2px; }
.mx td.net { background: color-mix(in oklab, var(--pollen) calc(12% + var(--w) * 58%), transparent); }
.mx td.net b { color: var(--ink); }
.mx td.self { background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--rule) 5px 6px); color: var(--ink-2); }
.mx td.self b { color: var(--ink); }
.mx td.off { background: repeating-linear-gradient(90deg, transparent 0 6px, transparent 6px); border-left: 1px dashed var(--ink-2); border-right: 1px dashed var(--ink-2); }
.mx td.off-row { border: 1px dashed var(--ink-2); font: italic .84rem/1.3 var(--f-text); color: var(--ink-2); text-align: left; padding: 0 14px; }
.mx td.tot { font-size: .84rem; color: var(--ink); border-left: 1px solid var(--rule-strong); }
.mx td.tot small { color: var(--ink-2); }
.mx tfoot th { text-align: left; padding: 6px 10px; font: 400 .66rem/1.2 var(--f-num); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.mx tfoot th small { text-transform: none; letter-spacing: 0; font-size: .62rem; }
.mx tfoot tr:first-child > * { border-top: 1px solid var(--rule-strong); }
.mx tfoot td { font-size: .78rem; color: var(--ink-2); height: 42px; }
.mx tfoot td b { color: var(--ink); font-weight: 500; }
.mx tfoot td.off { color: var(--ink-2); }
/* halo : ligne et colonne de la case allumée, sans transition à l'allumage (le retour est lent) */
.mx .on-row, .mx .on-col { transition-duration: 0s; box-shadow: inset 0 0 0 999px rgba(247, 233, 228, .11); }
.mx td.on { transition-duration: 0s; box-shadow: inset 0 0 0 2px var(--pollen); background-color: var(--pollen-soft); z-index: 1; }
.mx td.on b { color: var(--pollen); }
.mx thead th.on-col a, .mx tbody tr > th.on-row a { color: var(--pollen); border-color: var(--pollen); }
.mx td:focus-visible { box-shadow: inset 0 0 0 2px var(--pollen), 0 0 0 2px var(--ink); }
.mx-cap { margin: 10px 0 0; font: italic .88rem/1.45 var(--f-text); color: var(--ink-2); max-width: 90ch; }

/* vue par fleur */
.by-flower { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.pf { box-shadow: inset 0 0 0 1px var(--rule-strong); background: color-mix(in oklab, var(--paper-2) 75%, var(--paper)); min-width: 0; }
.pf summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline; padding: 14px 16px; }
.pf summary::-webkit-details-marker { display: none; }
.pf summary::after { content: "+"; font: 400 1.2rem/1 var(--f-num); color: var(--ink-2); transition: transform .3s ease; }
.pf[open] summary::after { transform: rotate(45deg); }
.pf summary a { font: 500 .95rem/1 var(--f-num); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.pf summary span { font-size: .82rem; color: var(--ink-2); min-width: 0; }
.pf summary:focus-visible { outline: 2px solid var(--pollen); outline-offset: -2px; }
.pf.off { box-shadow: none; border: 1px dashed var(--ink-2); background: transparent; }
.pf.off summary { cursor: default; }
.pf.off summary::after { content: ""; }
.pf-in { padding: 0 16px 16px; }
.pf-in .bar { height: 30px; margin: 0 0 12px; }
.pf-in .bar span { font-size: .68rem; padding: 0 6px; }
.pf-in .bar .b { border-right: 1px solid var(--rule-strong); }
.pf-in .bar .b:last-child { border-right: 0; }
.pf ol, ol.refus { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf li, ol.refus li { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 10px; align-items: center; font-size: .86rem; }
.pf li a { font: 500 .82rem/1 var(--f-num); text-decoration: none; }
.pf li .num, ol.refus .num { font-size: .8rem; white-space: nowrap; text-align: right; }
.ln { display: block; height: 8px; border: 1px solid var(--rule-strong); position: relative; }
.ln i { position: absolute; inset: 0 auto 0 0; background: var(--pollen); }
.pf-cap { margin: 12px 0 0; font: italic .84rem/1.4 var(--f-text); color: var(--ink-2); }

/* refus */
ol.refus { margin: 4px 0 14px; gap: 8px; }
ol.refus li { grid-template-columns: minmax(0, 15em) minmax(40px, 1fr) 3em; }
ol.refus .rs { font-size: .9rem; }
ol.refus .ln i { background: color-mix(in oklab, var(--ink-2) 70%, transparent); }
ol.refus li:first-child .ln i { background: var(--pollen); }
.plate h3 .num { font-weight: 500; }
.badge.on { border-color: var(--pollen); }
.hero-flow .note { max-width: 40ch; }

@media (max-width: 860px) {
  .hero-flow { grid-template-columns: 1fr; padding: 14px 0 24px; gap: 22px; }
  .hero-flow h1 { font-size: 2.3rem; }
  .hero-flow .note { display: block; }
  .recap-in { padding: 46px 16px 20px; gap: 14px; }
  .rc-h { flex-direction: column; gap: 2px; }
  .recap-in .bar span { font-size: .66rem; padding: 0 5px; }
  .flow { padding-top: 14px; }
  .flow-bar { flex-direction: column; align-items: flex-start; }
  .key { gap: 6px 14px; }
  .pf li { grid-template-columns: 5.6em 1fr auto; }
  ol.refus li { grid-template-columns: 1fr 3em; }
  ol.refus .ln { grid-column: 1 / -1; grid-row: 2; }
}

/* retouches */
.mx td.off { background: linear-gradient(var(--ink-2) 50%, transparent 0) center / 1px 8px repeat-y; }
.mx thead th:first-child, .mx tbody th, .mx tfoot th { position: sticky; left: 0; z-index: 2; background: color-mix(in oklab, var(--paper-2) 80%, var(--paper)); }
.pf li { grid-template-columns: 6.5em 1fr 7em; }
ol.refus li { grid-template-columns: minmax(0, 17em) minmax(40px, 1fr) 3em; }
.badges + .cap { margin-top: 14px; }
.demo-plate .demo-tag { justify-self: start; }
@media (max-width: 860px) {
  .pf li { grid-template-columns: 5.6em 1fr 6.6em; }
  ol.refus li { grid-template-columns: 1fr 3em; }
}