/* DataFish V3.1 : démarche en arborescence (accueil). Posée directement sur la page, sans cadre.
   Tracés à angles droits arrondis (façon plan de métro), rail des étapes, pistes à choisir, impulsions sur les tracés actifs.
   14/10 (direction « premium sobre », DIRECTION-STYLE-14-10.md ; aujourd'hui sur Notre approche et au garde-manger) : jetons du
   site, rayons 6 (4 pour les petites étiquettes), aucune ombre portée, numéros en chiffres sans rond, coches au trait, plus de
   poisson qui suit les tracés ni de halo ; la bulle d'information devient une carte marine (sans ombre, elle se perdait sur le
   blanc). Tailles des blocs inchangées (js/v3-home.js mesure les blocs pour tracer les liaisons). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.tr { --line: #DCE3EA; --live: #5B8DB8; position: relative; width: min(1240px, calc(100vw - 2 * var(--gutter))); margin-left: 50%; transform: translateX(-50%); }
.tr-canvas {
    position: relative; display: grid;
    grid-template-columns: 56px 142px 236px 190px 64px 214px 184px;
    grid-template-rows: auto repeat(5, minmax(64px, auto));
    justify-content: space-between; row-gap: 14px;
    padding: 0 0 78px;
}
.tr-stage { display: contents; }
.tr-s-besoin > * { grid-column: 1; }
.tr-s-audit > * { grid-column: 2; }
.tr-s-recos > * { grid-column: 3; }
.tr-s-protos > * { grid-column: 4; }
.tr-s-gate > * { grid-column: 5; }
.tr-s-projets > * { grid-column: 6; }
.tr-s-duree > * { grid-column: 7; }
.tr-reco, .tr-proto, .tr-gate, .tr-proj { grid-row: var(--r); align-self: center; }
.tr-need, .tr-audit, .tr-life { grid-row: 2 / 7; align-self: center; }

/* rail des étapes : un point par colonne, une ligne qui se remplit au fil du parcours */
.tr-rail { position: absolute; left: 0; top: 5px; height: 2px; border-radius: 1px; background: var(--line); pointer-events: none; }
.tr-rail i { display: block; height: 100%; border-radius: 1px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); transition: transform .7s var(--ease-out); }
.tr-head { position: relative; z-index: 1; grid-row: 1; justify-self: center; align-self: start; display: grid; justify-items: center; margin-bottom: 26px; text-align: center; white-space: nowrap; }
.tr-dot { width: 12px; height: 12px; margin-bottom: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #C9D3DD; transition: background-color .4s, box-shadow .4s; }
.tr-head.is-on .tr-dot { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px #fff; }
.tr-head b { font: 600 14.5px/1.2 var(--f-display); color: var(--ink); letter-spacing: -.005em; }
.tr-head small { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.tr.is-running .tr-head:not(.is-on) b { color: var(--b-faint); }

/* tracés */
.tr-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tr-wire { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s, opacity .35s; }
.tr-wire.is-on { stroke: var(--live); }
.tr-wire.is-stop { stroke: #C9D3DD; } /* 14/10 : filet plein (avant : pointillé) */
.tr-wire.is-off { opacity: 0; }
.tr-end { fill: #fff; stroke: var(--line); stroke-width: 1.5; transition: stroke .35s, opacity .35s; }
.tr-end.is-on { stroke: var(--live); }
.tr-end.is-off { opacity: 0; }
.tr-flow { fill: none; stroke: var(--fish); stroke-width: 2.4; stroke-linecap: round; opacity: .95; pointer-events: none; }
.tr-glow { display: none; } /* 14/10 : plus de halo sous l'impulsion (avant : trait de 9 px à 16 %) */
.tr:not(.is-seen) .tr-glow { opacity: 0; }
.tr:not(.is-seen) .tr-flow { animation-play-state: paused; opacity: 0; }

/* blocs */
.tr [data-k] { position: relative; z-index: 1; transition: opacity .45s var(--ease-out), background-color .3s, color .3s, transform .45s var(--ease-out), box-shadow .3s; }
.tr.is-running [data-k]:not(.is-on) { opacity: .2; }
.tr-need { justify-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--b-r-card); background: var(--ink); color: #fff; }
.tr-need i, .tr-audit > i { display: grid; place-items: center; }
.tr-need svg { width: 22px; height: 22px; }
.tr-audit { display: grid; gap: 10px; padding: 14px 14px 13px; border-radius: var(--b-r-card); background: var(--sea); }
.tr-audit > i { width: 32px; height: 32px; border-radius: 0; background: none; color: var(--b-accent); justify-content: start; } /* 14/10 : pictogramme nu */
.tr-audit > i svg { width: 18px; height: 18px; }
.tr-audit ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tr-audit li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink); }
.tr-audit li > span { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 0; background: none; color: var(--b-accent); flex: none; transition: color .3s; } /* 14/10 : coche au trait (avant : rond marine) */
.tr.is-running .tr-audit li:not(.is-on) > span { background: none; color: transparent; }
.tr-audit li > span svg { width: 9px; height: 9px; }

/* pistes : à choisir, l'ordre des clics fixe la priorité */
.tr-reco {
    display: flex; align-items: center; width: 100%; min-height: 64px; padding: 9px 38px 9px 14px;
    border: 0; border-radius: var(--b-r-card); background: var(--b-mist); text-align: left; cursor: pointer;
    font: 500 13.5px/1.35 var(--f-body); color: var(--b-faint);
}
.tr-reco:hover { background: var(--b-hover); color: var(--ink); }
.tr-reco.is-picked { background: var(--b-hover); color: var(--ink); }
.tr-reco:focus-visible, .tr-gate:focus-visible, .tr-replay:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.tr .tr-prio {
    position: absolute; top: -9px; right: -9px; display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: var(--b-r-tag); background: var(--ink); color: #fff;
    font: 600 12.5px/1 var(--f-display); box-shadow: 0 0 0 3px #fff;
    transform: scale(0); opacity: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .2s;
}
.tr-reco.is-picked .tr-prio { transform: scale(1); opacity: 1; }
.tr.is-running .tr-reco.is-picked:not(.is-ranked) .tr-prio { transform: scale(0); opacity: 0; }
.tr-plus { position: absolute; right: 10px; top: 50%; display: grid; place-items: center; width: 20px; height: 20px; margin-top: -10px; border-radius: var(--b-r-tag); background: #fff; color: var(--b-faint); transition: opacity .25s, color .2s, background-color .2s, transform .25s var(--ease-out); }
.tr-plus svg { width: 11px; height: 11px; }
.tr-reco:hover .tr-plus { background: var(--b-accent); color: #fff; }
.tr-reco.is-picked .tr-plus { opacity: 0; transform: scale(.5); }

/* une ligne (prototype, décision, projet) n'existe que si la piste est choisie */
.tr-row { transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.tr-row:not(.is-picked) { opacity: 0 !important; transform: translateX(-10px); pointer-events: none; }

.tr-proto { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: 9px 14px; border-radius: var(--b-r-card); background: var(--sea); font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.tr-meter { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: #fff; overflow: hidden; }
.tr-meter i { display: block; height: 100%; background: var(--b-accent); transform-origin: 0 50%; }
.tr-proto.is-growing .tr-meter i, .tr.is-running .tr-proto.is-on .tr-meter i { animation: tr-fill 1.2s var(--ease-out) both; }
.tr.is-running .tr-proto:not(.is-on) .tr-meter i { transform: scaleX(0); }
@keyframes tr-fill { from { transform: scaleX(0); } }

/* go / no go : un interrupteur */
/* 14/10 : interrupteur rectangulaire (rayon 4, curseur carré, sans ombre) ; avant : pilule et curseur rond ombré */
.tr-gate { position: relative; justify-self: center; display: block; padding: 6px; border: 0; border-radius: var(--b-r-card); background: none; cursor: pointer; }
.tr-switch { position: relative; display: block; width: 44px; height: 24px; border-radius: var(--b-r-tag); background: #C9D3DD; transition: background-color .35s var(--ease-out), box-shadow .2s; }
.tr-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 2px; background: #fff; transition: transform .4s cubic-bezier(.34, 1.4, .64, 1); }
.tr-gate[data-go="1"] .tr-switch { background: var(--ink); }
.tr-gate[data-go="1"] .tr-knob { transform: translateX(20px); }
.tr-gate small { position: absolute; left: 50%; top: calc(100% - 2px); transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tr-gate[data-go="1"] small { color: var(--ink); }
.tr-gate[data-go="1"] .tr-no, .tr-gate[data-go="0"] .tr-yes { display: none; }
.tr-gate:hover .tr-switch { background: #9DB0C2; } /* 14/10 : fond un peu plus soutenu au survol (avant : halo bleu de 4 px) */
.tr-gate[data-go="1"]:hover .tr-switch { background: var(--ink); }
.tr.is-running .tr-gate:not(.is-decided) .tr-switch { background: var(--b-hover); }
.tr.is-running .tr-gate:not(.is-decided) .tr-knob { transform: translateX(10px); }
.tr.is-running .tr-gate:not(.is-decided) small { opacity: 0; }

/* projets : les étapes, sans titre (la ligne dit de quelle piste il s'agit) */
.tr-proj ol { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0; padding: 0; list-style: none; }
.tr-proj li { padding: 5px 6px; border-radius: var(--b-r-tag); background: var(--ink); font-size: 11.5px; font-weight: 600; line-height: 1.25; color: #fff; text-align: center; white-space: nowrap; transition: background-color .3s, color .3s; }
.tr.is-running .tr-proj li:not(.is-done), .tr-proj.is-growing li:not(.is-done) { background: var(--sea); color: var(--muted); }
.tr-stopped { display: none; margin: 0; font-size: 13px; font-weight: 500; color: var(--b-faint); }
.tr-proj.is-stop ol { display: none; }
.tr-proj.is-stop .tr-stopped { display: block; }

.tr-life { padding: 10px; border-radius: var(--b-r-card); background: var(--ink); }
.tr-life ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tr-life li { padding: 7px 10px; border-radius: var(--b-r-tag); background: rgba(255, 255, 255, .08); font-size: 13px; font-weight: 500; line-height: 1.3; color: #fff; transition: background-color .3s, opacity .3s; }
.tr.is-running .tr-life li:not(.is-on) { opacity: .35; }

/* 14/10 (plus de poisson décoratif) : le poisson qui suivait les tracés n'est plus rendu (v3-home-build.mjs), js/v3-home.js s'en passe.
   Avant : .tr-fish { position: absolute; z-index: 3; width: 30px; color: var(--fish); opacity: 0 }, .is-on { opacity: 1 },
   .is-left svg { transform: scaleX(-1) } ; puis, le temps du masquage : .tr-fish { display: none !important; } */
.tr-loop-l { position: absolute; z-index: 2; left: 0; top: 0; transform: translate(-50%, -50%); padding: 2px 10px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--live); white-space: nowrap; opacity: 0; transition: opacity .4s; }
.tr-loop-l.is-on { opacity: 1; }

.tr-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-top: -30px; }
.tr-foot p { margin: 0; font-size: 14px; color: var(--muted); }
.tr-replay { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--b-r-card); background: none; font: 600 14px/1 var(--f-body); color: var(--tide); cursor: pointer; transition: background-color .2s, opacity .2s; }
.tr-replay svg { width: 10px; height: 10px; }
.tr-replay:hover { background: var(--sea); }
.tr-replay:disabled { opacity: .35; cursor: default; }

/* survol d'une piste : son parcours s'éclaire */
.tr[data-hl] .tr-wire.is-on:not(.is-hl), .tr[data-hl] .tr-end.is-on { opacity: .35; }
.tr[data-hl] .tr-wire.is-hl.is-on { stroke: var(--tide); stroke-width: 2; }
.tr[data-hl] .tr-reco.is-picked:not(.is-hl), .tr[data-hl] .tr-row.is-picked:not(.is-hl) { opacity: .45; }
.tr[data-hl] .tr-reco.is-hl { background: var(--tide-soft); }
.tr[data-hl] .tr-flow, .tr[data-hl] .tr-glow { opacity: 0; }

/* écrans moyens : le schéma défile horizontalement plutôt que de se tasser */
@media (max-width: 1180px) and (min-width: 761px) {
    .tr { overflow-x: auto; }
    .tr-canvas { min-width: 1210px; padding-left: 34px; padding-right: 20px; }
}
/* téléphone : les étapes s'empilent, sans tracés */
@media (max-width: 760px) {
    .tr { width: auto; margin-left: 0; transform: none; }
    .tr-canvas { display: flex; flex-direction: column; gap: 26px; padding: 0 0 30px; }
    .tr-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    .tr-stage > * { grid-column: auto; grid-row: auto !important; }
    .tr-head { grid-column: 1 / -1; justify-self: start; justify-items: start; margin-bottom: 2px; }
    .tr-dot { display: none; }
    .tr-need { justify-self: start; }
    .tr-audit, .tr-life, .tr-reco, .tr-proto, .tr-proj { grid-column: 1 / -1; }
    .tr-s-gate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tr-row:not(.is-picked) { display: none; }
    .tr-rail, .tr-wires, .tr-loop-l, .tr-replay { display: none; }
    .tr-foot { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .tr-flow { display: none; } }

/* ---------- V3.1 : points d'ancrage au-dessus des blocs, blocs cliquables, bulles d'information ---------- */
.tr-wires { z-index: 2; }
.tr-end { stroke-width: 1.6; }
.tr-proj { padding-left: 14px; }
.tr-foot { justify-content: flex-end; }


/* blocs qui ouvrent une bulle */
button.tr-need { position: relative; border: 0; padding: 0; cursor: pointer; transition: background-color .3s, box-shadow .3s; }
button.tr-need:hover, button.tr-need[aria-expanded="true"] { background: var(--b-accent); } /* 14/10 : sans halo (avant : anneau bleu de 6 px) */
.tr .tr-need .tr-more { top: -3px; right: -3px; box-shadow: none; color: var(--b-accent); }
.tr-audit { cursor: pointer; }
.tr-audit:hover, .tr-audit[aria-expanded="true"] { background: var(--b-hover); }
.tr-audit:focus-visible, button.tr-need:focus-visible, .tr-life button:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.tr-more { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--b-r-tag); background: #fff; color: var(--b-faint); transition: color .2s, background-color .2s; }
.tr-more svg { width: 11px; height: 11px; }
.tr-audit:hover .tr-more, .tr-audit[aria-expanded="true"] .tr-more { background: var(--b-accent); color: #fff; }
.tr .tr-life li { padding: 0; background: none; }
.tr-life button {
    position: relative; display: block; width: 100%; padding: 7px 30px 7px 10px; border: 0; border-radius: var(--b-r-tag);
    background: rgba(255, 255, 255, .08); text-align: left; cursor: pointer;
    font: 500 13px/1.3 var(--f-body); color: #fff; transition: background-color .2s;
}
.tr-life button:hover, .tr-life button[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.tr-life .tr-more { top: 50%; right: 7px; width: 16px; height: 16px; margin-top: -8px; background: rgba(255, 255, 255, .12); color: var(--signal); }
.tr-life .tr-more svg { width: 9px; height: 9px; }
.tr-life button:hover .tr-more, .tr-life button[aria-expanded="true"] .tr-more { background: rgba(255, 255, 255, .28); color: #fff; }

/* la bulle. 14/10 : carte marine, rayon 6, sans ombre (avant : blanche, ombre longue ; sans ombre, du blanc sur du blanc) */
.tr-pop {
    position: fixed; z-index: 60; left: 0; top: 0; width: min(330px, calc(100vw - 32px));
    padding: 18px 20px 18px; border-radius: var(--b-r-card); background: var(--b-night); color: #fff;
    opacity: 0; transform: translateY(6px) scale(.98); transform-origin: var(--ox, 50%) var(--oy, 0);
    transition: opacity .22s var(--ease-out), transform .3s var(--ease-out);
}
.tr-pop.is-open { opacity: 1; transform: none; }
.tr-pop-arrow { position: absolute; left: var(--ax, 50%); width: 14px; height: 14px; margin-left: -7px; background: var(--b-night); transform: rotate(45deg); border-radius: 1px; }
.tr-pop[data-side="below"] .tr-pop-arrow { top: -6px; }
.tr-pop[data-side="above"] .tr-pop-arrow { bottom: -6px; }
.tr-pop-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--b-r-tag); background: rgba(255, 255, 255, .08); color: var(--b-on-dark-2); cursor: pointer; }
.tr-pop-x:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.tr-pop :focus-visible { outline-color: #fff; }
.tr-pop-x svg { width: 12px; height: 12px; }
.tr-pop h4 { margin: 0 36px 8px 0; font: 600 16px/1.3 var(--f-display); color: #fff; }
.tr-pop p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--b-on-dark-2); }
.tr-pop-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.tr-pop-act .cta-button { padding: 10px 16px; font-size: 14.5px; }
.tr-pop-act .df-link { font-size: 14.5px; font-weight: 600; color: #fff; text-decoration-color: rgba(255, 255, 255, .45); }
.tr-pop-act .df-link:hover { color: #fff; text-decoration-color: #fff; }
.tr-pop-steps { position: relative; display: grid; gap: 12px; margin: 4px 0 14px; padding: 0; list-style: none; counter-reset: s; }
.tr-pop-steps::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1px; background: var(--b-rule-dark); }
.tr-pop-steps li { position: relative; display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; counter-increment: s; }
.tr-pop-steps li::before { content: counter(s, decimal-leading-zero); grid-row: 1 / 3; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 0; background: var(--b-night); color: var(--b-accent-dark); font: 500 13px/1 var(--b-f-head); font-variant-numeric: tabular-nums; } /* 14/10 : chiffre « 01 » (avant : rond marine cerclé de blanc) */
.tr-pop-steps b { font-size: 14.5px; color: #fff; }
.tr-pop-steps span { font-size: 14px; line-height: 1.5; color: var(--b-on-dark-2); }
.tr-pop.is-open .tr-pop-steps li { animation: tr-step .5s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + 80ms); }
@keyframes tr-step { from { opacity: 0; transform: translateY(6px); } }
.tr-pop-foot { padding-top: 12px; border-top: 1px solid var(--b-rule-dark); font-size: 13.5px !important; }
@media (max-width: 760px) {
    .tr-pop { left: 16px !important; right: 16px; top: auto !important; bottom: 16px; width: auto; }
    .tr-pop-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tr-pop, .tr-pop.is-open .tr-pop-steps li { transition: none; animation: none; } }
body.v3 .tr-pop .cta-button { padding: 9px 14px; font-size: 14px; min-height: 0; gap: 8px; }
/* 14/10 : plus d'ombre sous la pointe de la bulle */

/* ================= V5 (P30) : sous 768 px, la démarche en liste de 7 étapes (même section, id demarche conservé).
   L'arborescence et son encart sont masqués ; js/v3-home.js ne la mesure ni ne l'anime. Rien ne change au-dessus. ================= */
.tr-list { display: none; }
@media (max-width: 767.98px) {
    .hm-tree .tr, .hm-tree .tr-cue { display: none !important; }
    .tr-list { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
    .tr-list li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding: 0 0 20px; }
    .tr-list li:last-child { padding-bottom: 0; }
    .tr-list li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 1px; background: var(--b-rule); }
    .tr-list { counter-reset: tr-n; }
    .tr-list li { counter-increment: tr-n; }
    /* 14/10 : chiffre « 01 » en bleu (avant : rond marine) ; le chiffre du balisage est remplacé par le compteur */
    .tr-list-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 0; background: #fff; font-size: 0; }
    .tr-list-n::before { content: counter(tr-n, decimal-leading-zero); font: 500 13px/1 var(--b-f-head); font-variant-numeric: tabular-nums; color: var(--b-accent); }
    .hm-tree .tr-list-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 3px 0 4px; }
    .tr-list-h b { font: 600 17px/1.3 var(--f-display); color: var(--ink); }
    .tr-list-h small { font-size: 13.5px; font-weight: 600; color: var(--tide); }
    .hm-tree .tr-list p:not(.tr-list-h) { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
    .hm-tree .tr-list .df-link { display: inline-block; margin-top: 6px; font-size: 15px; font-weight: 600; }
}