/* Maquettes du parcours 3 et 4 : tableau de bord (anneau, burndown, budget) et matrice des risques. */
.tdb { display: grid; gap: 10px; }
.tdb-haut { display: grid; gap: 10px; }
.tdb h4 { margin: 0 0 6px; font-size: 0.75rem; font-weight: 600; color: var(--texte-attenue); }
.tdb-anneau { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.anneau { position: relative; width: 96px; height: 96px; }
.anneau svg { width: 100%; height: 100%; }
.an-fond { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.an-val { fill: none; stroke: var(--marque); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 201.06; stroke-dashoffset: 72.4; transform: rotate(-90deg); transform-origin: 50% 50%; }
.anneau b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; letter-spacing: -0.02em; }
.burn { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; overflow: visible; }
.b-axe { stroke: var(--trait); stroke-width: 1; } .b-texte { fill: var(--texte-attenue); font-size: 9.5px; font-family: inherit; }
.b-ideal { fill: none; stroke: var(--neutre-point); stroke-width: 1.5; stroke-dasharray: 4 4; }
.b-reel { fill: none; stroke: var(--marque); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.b-point { fill: var(--marque); stroke: var(--surface); stroke-width: 2; }
.tdb-budget .t { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; font-size: 0.75rem; }
.jauge-budget { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.jauge-budget span { display: block; width: 72%; height: 100%; border-radius: 99px; background: var(--marque); transform-origin: left; }
.tdb-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tuile-mq { padding: 8px 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); }
.tuile-mq span { display: block; color: var(--texte-attenue); font-size: 0.75rem; line-height: 1.3; }
.tuile-mq b { display: block; margin-top: 2px; font-size: 1.0625rem; letter-spacing: -0.01em; }
@media (min-width: 640px) { .tdb-haut { grid-template-columns: 124px minmax(0, 1fr); } }

.risques { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.rm-axe { display: grid; grid-template-columns: 14px auto; column-gap: 6px; }
.rm-p { display: grid; grid-template-rows: repeat(5, 54px); gap: 3px; align-items: center; color: var(--texte-attenue); font-size: 0.75rem; font-weight: 600; text-align: right; }
.rm-grille { position: relative; display: grid; grid-template-columns: repeat(5, 54px); grid-auto-rows: 54px; gap: 3px; }
.rm-i { grid-column: 2; display: grid; grid-template-columns: repeat(5, 54px); gap: 3px; margin-top: 4px; color: var(--texte-attenue); font-size: 0.75rem; font-weight: 600; text-align: center; }
.rc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 7px; font-size: 0.75rem; font-weight: 600; line-height: 1.2; }
.rc b { font-size: 0.8125rem; }
.rc-f { background: var(--ok-fond); color: var(--ok-texte); } .rc-m { background: var(--warn-fond); color: var(--warn-texte); } .rc-c { background: var(--danger-fond); color: var(--danger-texte); }
.rc-r { position: absolute; top: -9px; left: 50%; translate: -50% 0; z-index: 2; padding: 0 6px; border-radius: 99px; background: var(--marque); color: var(--sur-marque); border: 2px solid var(--surface); font-size: 0.75rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.rc-fantome { background: var(--surface); color: var(--texte-attenue); border: 1.5px dashed var(--neutre-point); }
.rm-fl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rm-fl path { fill: none; stroke: var(--marque-texte); stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round; stroke-linejoin: round; }
.rm-fl .tete { stroke-dasharray: none; }
.rm-apres { position: absolute; left: 108px; top: 236px; z-index: 3; padding: 2px 8px; border-radius: 6px; background: var(--marque); color: var(--sur-marque); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.rm-cote { flex: 1 1 200px; min-width: 0; display: grid; gap: 8px; align-content: start; }
.rm-liste { display: grid; gap: 6px; }
.rm-risque { display: grid; gap: 4px; padding: 7px 10px; border: 1px solid var(--trait); border-radius: 9px; background: var(--surface); }
.rm-risque b { font-size: 0.75rem; font-weight: 600; }
.alerte-mq { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--danger-point); border-radius: 9px; background: var(--danger-fond); color: var(--danger-texte); font-size: 0.75rem; font-weight: 600; }
.alerte-mq svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

@media (prefers-reduced-motion: no-preference) {
  .js .scene:not(.est-vue) .an-val { stroke-dashoffset: 201.06; }
  .js .scene:not(.est-vue) .b-reel, .js .scene:not(.est-vue) .b-point { visibility: hidden; }
  .js .scene:not(.est-vue) .jauge-budget span { transform: scaleX(0); }
  .est-vue .an-val { animation: an-remplit 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 200ms both; }
  .est-vue .b-reel { stroke-dasharray: 100; animation: b-trace 1.6s ease-out 300ms both; }
  .est-vue .b-point { animation: g-fondu 400ms ease-out 1.8s both; }
  .est-vue .jauge-budget span { animation: j-monte 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 500ms both; }
  @keyframes an-remplit { from { stroke-dashoffset: 201.06; } to { stroke-dashoffset: 72.4; } }
  @keyframes b-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes j-monte { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  .est-active .rc-vol { animation: r-vol 10s ease-in-out infinite; }
  .est-active .rm-fl, .est-active .rm-apres { animation: r-note 10s ease-in-out infinite; }
  .est-active .swap .avant { visibility: visible; animation: k-avant 10s ease-in-out infinite; }
  .est-active .swap .apres { animation: k-apres 10s ease-in-out infinite; }
  @keyframes r-vol {
    0%, 14% { translate: calc(-50% + 57px) -114px; opacity: 1; }
    40%, 90% { translate: -50% 0; opacity: 1; }
    94% { translate: -50% 0; opacity: 0; }
    94.1% { translate: calc(-50% + 57px) -114px; opacity: 0; }
    100% { translate: calc(-50% + 57px) -114px; opacity: 1; }
  }
  @keyframes r-note { 0%, 30% { opacity: 0; } 42%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
}