/* Schéma vivant du hero : huit modules reliés au projet par des fils où circulent des impulsions.
 * Mobile : version compacte (centre + grille 2x4, sans fils). >= 640px : plan 560 x 520 en positions relatives. */
.schema { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 560px; margin-inline: auto; }
.schema-fils { display: none; }
.noeud {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre-douce);
}
.noeud-nom { font-size: 0.8125rem; font-weight: 600; line-height: 1.25; }
.noeud-valeur { font-size: 0.75rem; line-height: 1.3; color: var(--texte-attenue); }
.noeud-centre {
  position: relative; grid-column: 1 / -1; padding: 16px 18px; gap: 6px; border: 1.5px solid var(--marque); border-radius: 16px; box-shadow: var(--ombre);
}
.centre-tete { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; }
.centre-g { width: 28px; height: 26px; flex: none; }
.centre-projet { font-size: 0.8125rem; color: var(--texte-attenue); line-height: 1.35; }
.centre-barre { display: flex; flex-direction: column; gap: 6px; font-size: 0.75rem; font-weight: 600; margin-top: 4px; }
.centre-av { line-height: 1.2; }
.jauge { display: block; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.jauge > span { display: block; height: 100%; width: 64%; border-radius: 99px; background: var(--marque); transform-origin: left; }

@media (min-width: 640px) {
  .schema { display: block; position: relative; aspect-ratio: 560 / 520; }
  .schema-fils { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .noeud { position: absolute; width: 23.2%; height: 11.2%; padding: 6px 10px; }
  .noeud-centre { left: 33.9%; top: 37.5%; width: 32.2%; height: 25%; padding: 12px 14px; gap: 4px; }
  .n1 { left: 0.9%; top: 4%; } .n2 { left: 38.4%; top: 4%; } .n3 { left: 75.9%; top: 4%; }
  .n4 { left: 75.9%; top: 44.4%; } .n5 { left: 75.9%; top: 84.8%; } .n6 { left: 38.4%; top: 84.8%; }
  .n7 { left: 0.9%; top: 84.8%; } .n8 { left: 0.9%; top: 44.4%; }
  .noeud-nom, .noeud-valeur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.fil { fill: none; stroke: color-mix(in srgb, var(--marque) 28%, var(--trait)); stroke-width: 1.5; }
.impulsion { fill: none; stroke: var(--marque); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 300; stroke-dashoffset: 7; visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .impulsion { visibility: visible; animation: circule 2.8s linear infinite; }
  .impulsion:nth-of-type(2n) { animation-duration: 2.4s; }
  .impulsion:nth-of-type(3n) { animation-duration: 3.2s; }
  .fil { stroke-dasharray: 100; animation: trace-fil 900ms ease-out both; }
  .noeud { animation: noeud-entre 500ms ease-out both, flotte 6s ease-in-out infinite; }
  .noeud-centre { animation: noeud-entre 600ms ease-out both; }
  .noeud-centre::after, .hub-c::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 6px color-mix(in srgb, var(--marque) 14%, transparent); opacity: 0; animation: respire 4s ease-in-out infinite; }
  .jauge > span { animation: remplit 1.2s ease-out 500ms both; }
  @keyframes circule { from { stroke-dashoffset: 7; } to { stroke-dashoffset: -100; } }
  @keyframes trace-fil { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes noeud-entre { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
  @keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
  @keyframes respire { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
  @keyframes remplit { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .n1 { animation-delay: 150ms, 900ms; } .n2 { animation-delay: 250ms, 2100ms; } .n3 { animation-delay: 350ms, 3300ms; }
  .n4 { animation-delay: 450ms, 1500ms; } .n5 { animation-delay: 550ms, 2700ms; } .n6 { animation-delay: 650ms, 600ms; }
  .n7 { animation-delay: 750ms, 3900ms; } .n8 { animation-delay: 850ms, 1800ms; }
  .noeud-centre { animation-delay: 0ms; } .noeud-centre::after { animation-delay: 700ms; }
  .fil:nth-of-type(1) { animation-delay: 1.1s; } .fil:nth-of-type(2) { animation-delay: 1.2s; } .fil:nth-of-type(3) { animation-delay: 1.3s; }
  .fil:nth-of-type(4) { animation-delay: 1.4s; } .fil:nth-of-type(5) { animation-delay: 1.5s; } .fil:nth-of-type(6) { animation-delay: 1.6s; }
  .fil:nth-of-type(7) { animation-delay: 1.7s; } .fil:nth-of-type(8) { animation-delay: 1.8s; }
}