/*
 * Page Manifest Inspector : scène du hero, l'arbre d'un rapport C2PA (éditeur sombre) dont les cinq
 * couches s'allument tour à tour, puis la liste numérotée des couches. Préfixe mi-. Gabarit : product-guide.css.
 */

.mi-code {
  padding: 12px 0 14px;
  font-family: var(--ps-font-mono);
  font-size: 14px;
  line-height: 1.75;
}

.mi-l {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  padding: 0 16px 0 20px;
}

.mi-tx {
  overflow: hidden;
  min-width: 0;
  font: inherit;
  text-overflow: ellipsis;
  white-space: pre;
}

.mi-i1 {
  padding-left: 3ch;
}

/* Triangle de dépliage. */
.mi-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 10px;
  border-top: 6px solid var(--ps-orange-light);
  border-right: 4.5px solid transparent;
  border-left: 4.5px solid transparent;
  vertical-align: middle;
}

.mi-k { color: var(--ps-peach); }
.mi-s { color: #e9d8ce; }
.mi-p { color: #8f7568; }
.mi-ok { color: #6ee7b7; }
.mi-warn { color: #fcd34d; }

/* Étiquettes de la scène : texte d'interface, pas du code. */
.mi-tag {
  flex: 0 0 auto;
  font-family: var(--ps-font-sans);
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--ps-radius-pill);
  background: rgba(255, 138, 76, 0.12);
  color: var(--ps-faint-dark);
  font-size: 11px;
}

.mi-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255, 138, 76, 0.15);
}

.mi-foot-text {
  color: var(--ps-faint-dark);
  font-size: 14px;
}

/* Les cinq couches s'allument à tour de rôle (boucle de 10 s, coupée sur mobile et en mouvement réduit). */
@keyframes mi-scan {
  0%, 22% {
    background: rgba(255, 138, 76, 0.14);
  }

  28%, 100% {
    background: transparent;
  }
}

@keyframes mi-tag {
  0%, 22% {
    background: var(--ps-orange);
    color: #fff;
  }

  28%, 100% {
    background: rgba(255, 138, 76, 0.12);
    color: var(--ps-faint-dark);
  }
}

.mi-hl {
  animation: mi-scan 10s linear infinite;
}

.mi-hl .mi-tag {
  animation: mi-tag 10s linear infinite;
}

.mi-h1, .mi-h1 .mi-tag { animation-delay: 1.6s; }
.mi-h2, .mi-h2 .mi-tag { animation-delay: 3.6s; }
.mi-h3, .mi-h3 .mi-tag { animation-delay: 5.6s; }
.mi-h4, .mi-h4 .mi-tag { animation-delay: 7.6s; }
.mi-h5, .mi-h5 .mi-tag { animation-delay: 9.6s; }

/* ---------- Les cinq couches (sans numéros : ce ne sont pas des étapes) ---------- */

.mi-layers {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mi-layer {
  display: grid;
  grid-template-columns: 150px minmax(0, 0.9fr) minmax(0, 1.2fr);
  align-items: baseline;
  gap: 8px 28px;
  padding: 26px 0;
  border-top: 1px solid var(--ps-line-light);
}

.mi-layer:last-child {
  border-bottom: 1px solid var(--ps-line-light);
}

.mi-layer .pg-pill {
  align-self: center;
}

.mi-layer-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.mi-layer-text {
  color: var(--ps-muted-light);
  font-size: 19px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .mi-hl,
  .mi-hl .mi-tag {
    animation: none;
  }

  .mi-layer {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .mi-layer .pg-pill {
    justify-self: start;
  }
}

@media (max-width: 420px) {
  .mi-code {
    font-size: 12.5px;
  }

  .mi-l {
    padding: 0 12px 0 14px;
  }

  .mi-i1 {
    padding-left: 2ch;
  }

  .mi-tag {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mi-hl,
  .mi-hl .mi-tag {
    animation: none;
  }
}