/* Maquettes du parcours 1 et 2 : chronologie (Gantt) et tableau Kanban.
 * États initiaux masqués seulement sous .js + mouvement autorisé ; sinon l'état final est affiché. */
.gantt { margin-top: 2px; }
.g-ligne { display: grid; grid-template-columns: 96px repeat(10, minmax(0, 1fr)); align-items: center; min-height: 36px; border-top: 1px solid var(--trait); }
.g-tete { min-height: 24px; border-top: 0; color: var(--texte-attenue); font-size: 0.75rem; font-weight: 600; }
.g-tete span { padding-left: 4px; border-left: 1px solid var(--trait); }
.g-nom { padding-right: 6px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.g-corps { position: relative; }
.g-barre { grid-row: 1; position: relative; display: flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--barre-douce); color: var(--texte); font-size: 0.75rem; font-weight: 600; white-space: nowrap; transform-origin: left center; }
.g-crit { background: var(--marque); color: var(--sur-marque); margin-bottom: 4px; }
.g-crit::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; border-radius: 2px; background: var(--danger-point); }
.g-2-4 { grid-column: 2 / 4; } .g-3-6 { grid-column: 3 / 6; } .g-5-8 { grid-column: 5 / 8; }
.g-7-10 { grid-column: 7 / 10; } .g-8-11 { grid-column: 8 / 11; } .g-10-12 { grid-column: 10 / 12; }
.g-jalon { grid-column: 8 / 12; grid-row: 1; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.75rem; }
.g-jalon i { width: 12px; height: 12px; background: var(--marque-texte); transform: rotate(45deg); border-radius: 2px; flex: none; }
.g-auj { position: absolute; top: 0; bottom: 0; left: calc(96px + (100% - 96px) * 0.43); width: 0; border-left: 1.5px dashed var(--marque-texte); pointer-events: none; }
.g-auj span { position: absolute; bottom: -26px; left: -36px; padding: 1px 6px; border-radius: 5px; background: var(--marque); color: var(--sur-marque); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.g-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 36px; color: var(--texte-attenue); font-size: 0.75rem; }

.kanban { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.k-col:first-child { display: none; }
.k-tete { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-attenue); }
.k-tete::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neutre-point); }
.k-info::before { background: var(--info-point); } .k-ok::before { background: var(--ok-point); }
.k-n { margin-left: auto; font-variant-numeric: tabular-nums; }
.k-tete .swap { margin-left: auto; font-variant-numeric: tabular-nums; }
.k-pile { position: relative; display: grid; gap: 8px; }
.k-carte { height: 98px; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px; background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; box-shadow: 0 1px 2px rgba(26, 22, 37, 0.05); }
.k-tags { display: flex; gap: 4px; overflow: hidden; }
.k-titre { font-size: 0.75rem; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-meta { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--texte-attenue); font-weight: 600; }
.k-meta .avatar { margin-left: auto; }
.k-depot { display: none; position: absolute; left: 0; right: 0; top: 0; height: 98px; border: 1.5px dashed var(--marque); border-radius: 10px; background: var(--teinte); }
.k-statut { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; color: var(--texte-attenue); font-size: 0.75rem; }
.k-statut b { color: var(--texte); }
.swap { display: inline-grid; } .swap > * { grid-area: 1 / 1; }
.swap .avant { visibility: hidden; }
@media (min-width: 640px) { .kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); } .k-col:first-child { display: block; } .g-ligne { grid-template-columns: 124px repeat(10, minmax(0, 1fr)); } .g-auj { left: calc(124px + (100% - 124px) * 0.43); } }

@media (prefers-reduced-motion: no-preference) {
  .js .scene:not(.est-vue) .g-barre { transform: scaleX(0); }
  .js .scene:not(.est-vue) .g-jalon, .js .scene:not(.est-vue) .g-auj { visibility: hidden; }
  .est-vue .g-barre { animation: g-trace 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .est-vue .g-ligne:nth-child(1) .g-barre { animation-delay: 100ms; } .est-vue .g-ligne:nth-child(2) .g-barre { animation-delay: 250ms; }
  .est-vue .g-ligne:nth-child(3) .g-barre { animation-delay: 400ms; } .est-vue .g-ligne:nth-child(4) .g-barre { animation-delay: 550ms; }
  .est-vue .g-ligne:nth-child(5) .g-barre { animation-delay: 700ms; } .est-vue .g-ligne:nth-child(6) .g-barre { animation-delay: 850ms; }
  .est-vue .g-jalon { animation: g-fondu 500ms ease-out 1.5s both; } .est-vue .g-auj { animation: g-fondu 600ms ease-out 1.1s both; }
  @keyframes g-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes g-fondu { from { opacity: 0; } to { opacity: 1; } }

  .est-active .k-carte-vol { position: relative; z-index: 3; animation: k-vol 10s ease-in-out infinite; }
  .est-active .k-depot { display: block; animation: k-zone 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 k-vol {
    0%, 14% { translate: calc(-100% - 12px) 212px; scale: 1; rotate: 0deg; box-shadow: 0 1px 2px rgba(26, 22, 37, 0.05); opacity: 1; }
    20% { translate: calc(-100% - 12px) 212px; scale: 1.04; rotate: -1.5deg; box-shadow: var(--ombre); }
    44% { translate: 0 0; scale: 1.04; rotate: 1deg; box-shadow: var(--ombre); }
    50%, 90% { translate: 0 0; scale: 1; rotate: 0deg; box-shadow: 0 1px 2px rgba(26, 22, 37, 0.05); opacity: 1; }
    94% { translate: 0 0; opacity: 0; }
    94.1% { translate: calc(-100% - 12px) 212px; opacity: 0; }
    100% { translate: calc(-100% - 12px) 212px; opacity: 1; }
  }
  @keyframes k-zone { 0%, 14% { opacity: 0; } 22%, 46% { opacity: 1; } 52%, 100% { opacity: 0; } }
  @keyframes k-avant { 0%, 46% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes k-apres { 0%, 46% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }
}
.k-pile { grid-template-columns: minmax(0, 1fr); }
.k-meta { white-space: nowrap; }
@media (max-width: 639px) {
  .k-meta .avatar { display: none; }
  .k-meta { gap: 4px; }
  .k-meta .pastille { padding: 0 5px 0 4px; font-size: 0.6875rem; }
  .k-carte { padding: 8px; }
}
@media (max-width: 639px) { .k-tags .etiquette:nth-child(2) { display: none; } }