/* Nuancier animé des pages Réalisations (validé sur Jolofi le 27/09/2026).
   Entrée par le bas, une couleur mise en avant à tour de rôle avec son code décodé,
   les autres resserrées avec leur nom à la verticale. Construit par realisations-palette.js. */

.rp-pal { display: flex; gap: 6px; height: clamp(140px, 30vw, 170px); margin-top: 1.5rem; }
.rp-pal-item {
  all: unset; box-sizing: border-box; position: relative; flex: 1 1 0; min-width: 0;
  background: var(--c); color: var(--t); cursor: pointer; overflow: hidden; transform-origin: bottom;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.3);
  transition: flex-grow 0.6s cubic-bezier(0.65, 0, 0.35, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
}
.rp-pal-item:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.rp-pal-item.is-active { flex-grow: var(--grow, 3.4); }
.rp-pal:not(.is-in) .rp-pal-item { transform: scaleY(0); }
.rp-pal-n { position: absolute; top: 0.5rem; left: 0.5rem; font: 700 0.55rem/1 'IBM Plex Mono', ui-monospace, monospace; opacity: 0.65; }
.rp-pal-v {
  position: absolute; left: 50%; bottom: 0.6rem; transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl; white-space: nowrap;
  font: 700 0.6rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase;
  transition: opacity 0.25s ease;
}
.rp-pal-item.is-active .rp-pal-v { opacity: 0; }
.rp-pal-info { position: absolute; left: 0.7rem; bottom: 0.8rem; white-space: nowrap; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.rp-pal-item.is-active .rp-pal-info { opacity: 1; transform: none; transition-delay: 0.22s; }
.rp-pal-info b { display: block; font: 700 0.62rem/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.rp-pal-info i { display: block; margin-top: 0.2rem; font: 700 clamp(0.95rem, 4vw, 1.3rem)/1 'IBM Plex Mono', ui-monospace, monospace; font-style: normal; letter-spacing: 0.02em; }
/* Minuterie : un trait se remplit en bas de la couleur mise en avant */
.rp-pal-item::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: 0.55; transform: scaleX(0); transform-origin: left; }
.rp-pal-item.is-timing::after { transform: scaleX(1); transition: transform var(--dur, 2000ms) linear; }

@media (prefers-reduced-motion: reduce) {
  .rp-pal:not(.is-in) .rp-pal-item { transform: none; }
  .rp-pal-item { transition: none; }
}