/* Deux illustrations composées statiques. Consommation du kit validé site12f,
   sans retouche des quatre figures de référence ou ajout de runtime. */
.transposition-v6 .site13-panel.motion-diagram {
  display: block;
  border: 0;
  border-radius: 8px;
  background: var(--obsidienne, #050810);
  color: var(--blanc-forge, #F2F0EB);
  overflow: hidden;
}
.site13-panel .motion-diagram__stage { aspect-ratio: var(--site13-ratio); }
.site13-panel .motion-diagram__art { overflow: hidden; }
.site13-panel .motion-diagram__label { font-size: 22px; }
.site13-panel .motion-diagram__glyph { transform: none; }

.transposition-v6 #chaine .chaine-donnee__etapes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  counter-reset: chaine-step;
}
.transposition-v6 #chaine .chaine-donnee__etapes > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ardoise) 18%, transparent);
  border-radius: 10px;
  counter-increment: chaine-step;
}
.transposition-v6 #chaine .chaine-donnee__etapes > li > strong {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font: 500 23px/1.2 'Clash Display', sans-serif;
}
.transposition-v6 #chaine .chaine-donnee__etapes > li > strong::before {
  content: counter(chaine-step, decimal-leading-zero);
  font: 400 13px/1.2 'Space Mono', monospace;
  color: var(--ardoise);
}
.transposition-v6 #chaine .chaine-donnee__etapes > li > span { font-size: 16px; line-height: 1.5; }
.transposition-v6 #chaine .chaine-donnee__etapes > li::before { content: none; display: none; }
.transposition-v6 #chaine .site13-panel { width: 100%; }
.transposition-v6 [data-section='trois-niveaux'] .site13-panel { margin-bottom: 24px; }
.transposition-v6 [data-section='trois-niveaux'] .site13-panel + .icon-tile { display: none; }
.transposition-v6 #fonctionnements .secondary-card-grid--three {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.transposition-v6 #fonctionnements .secondary-card-grid--three > article {
  grid-row: auto;
  grid-column: auto;
  justify-content: flex-start;
}
.transposition-v6 #fonctionnements .secondary-card-grid--three > article h3 {
  font-size: clamp(26px, 2.15vw, 32px);
}
.transposition-v6 [data-section='trois-niveaux'] .site13-panel {
  width: 100%;
  max-width: 480px;
  align-self: center;
}
@media (min-width: 680px) {
  .transposition-v6 #chaine .chaine-donnee__etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .transposition-v6 #fonctionnements .secondary-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .transposition-v6 #chaine .chaine-donnee__etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .transposition-v6 #chaine .chaine-donnee__etapes > li:last-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 32px;
  }
  .transposition-v6 #chaine .chaine-donnee__etapes > li:last-child .site13-panel {
    grid-column: 1;
    grid-row: 1 / 3;
    max-width: 520px;
    justify-self: center;
  }
  .transposition-v6 #chaine .chaine-donnee__etapes > li:last-child > :is(strong,span) { grid-column: 2; }
}