/* ==========================================================================
   IMPRA — ASSETS LEVEL 1 (BRAND ILLUSTRATIONS)
   Couche d'intégration des illustrations 2.5D de la bibliothèque de marque.
   Chargée en dernier. Elle ne redéfinit aucun token, aucune grille, aucun
   composant.

   Doctrine des trois niveaux — voir IMPRA_GRAPHIC_ASSET_REGISTRY.md :
     · Level 1 — illustrations 2.5D facettées (ce fichier)
     · Level 2 — compositions vectorielles animables (carrosserie / scene)
     · Level 3 — micro-pictogrammes fonctionnels (carrosserie §5)
   Level 1 et Level 2 ne se mélangent jamais dans une même composition.

   Principe de mise en page : un asset Level 1 est une composition flottante.
   Pas de carte, pas de cadre, pas de fond. Il est posé sur la surface de la
   section, avec une ombre qui suit sa silhouette — comme le héros.
   ========================================================================== */

.asset-band {
  margin: 0;
  display: block;
}

/* Le conteneur porte le ratio : c'est lui qui absorbe les marges transparentes
   de l'asset et qui garantit l'absence de décalage de mise en page. L'image
   ne fait que le remplir. */
.asset-band__frame {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-images);
}
.asset-band__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* recadre verticalement, ne déforme jamais */
  filter: drop-shadow(0 18px 34px rgba(15, 23, 46, .10));
}

/* ── S5 · Terrain ↔ bureau ──────────────────────────────────────────────
   Encre en 2.16 dans un fichier en 1.777 : ≈ 9,5 % de marge transparente en
   haut et en bas. Le cadre en 2.1 les absorbe et donne une vraie bande.
   Recadrage vertical seulement — l'encre court à 1 % des deux bords latéraux,
   un recadrage horizontal supprimerait l'un des deux pôles du récit. */
.sync-band .asset-band__frame { aspect-ratio: 2 / 1; }
.sync-band .asset-band__frame img { object-position: center 50%; }
/* Cadre en 2 pour l'encre en 2.16 : ≈ 4 % d'air restent au-dessus et en dessous
   des deux îlots. En 2.1 leurs socles frôlaient le bord du cadre. */

/* Sous 768 px, l'asset horizontal deviendrait illisible : chaque îlot
   descendrait sous 90 px. La composition vectorielle verticale prend le
   relais — c'est le seul endroit du site où deux niveaux graphiques se
   relaient, et ils ne sont jamais visibles en même temps.
   Compromis temporaire, levé quand la variante verticale existera (MA-03). */
.sync-band__vector { display: none; }
@media (max-width: 767px) {
  .sync-band .asset-band__frame { display: none; }
  .sync-band__vector { display: block; }
}

/* ── S7 · États documentaires ───────────────────────────────────────────
   Encre en 2.98 : c'est une frise. Le cadre en 2.6 retire l'essentiel des
   18,5 % / 22,4 % de marge verticale sans jamais toucher aux bords latéraux. */
.status-band .asset-band__frame { aspect-ratio: 2.6 / 1; }
.status-band .asset-band__frame img { object-position: center 44%; }

/* En colonne unique, la frise sort des gouttières : à 375 px elle fait 144 px
   de haut, les trois pastilles d'état restent nettement distinctes. */
@media (max-width: 767px) {
  .status-band {
    width: calc(100% + var(--page-gutter) * 2);
    margin-inline: calc(var(--page-gutter) * -1);
  }
  .status-band .asset-band__frame { aspect-ratio: 2.35 / 1; border-radius: 0; }
  .asset-band__frame img { filter: drop-shadow(0 10px 18px rgba(15, 23, 46, .09)); }
}

/* ── Révélation en trois temps, gauche → droite ─────────────────────────
   L'asset est construit dans le sens de lecture : manquant, puis en attente,
   puis validé. Le dévoilement suit cette progression et marque un temps
   d'arrêt entre chaque état.

   L'état de repos est l'image entière : sans JavaScript, sans l'observateur,
   ou en mouvement réduit, la frise est simplement visible. « backwards » ne
   fait que la retenir le temps de la lecture. */
.status-band.is-in .asset-band__frame img {
  animation: statusReveal 1600ms var(--ease-standard) 120ms backwards;
}
@keyframes statusReveal {
  0%        { clip-path: inset(0 100% 0 0); }
  20%       { clip-path: inset(0 66.5% 0 0); }
  34%       { clip-path: inset(0 66.5% 0 0); }
  54%       { clip-path: inset(0 33.5% 0 0); }
  68%       { clip-path: inset(0 33.5% 0 0); }
  88%, 100% { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .status-band.is-in .asset-band__frame img { animation: none; }
}