/* « Merci à ceux qui m'ont inspiré » (maj72, 13/11/2026) : la feuille de inspirations.html seulement, chargée après
   site.css. Des cartes simples, une carte des liens (boutons) et un générique de fin façon démo des années 1990,
   en CSS. L'écran du générique garde son fond noir dans tous les thèmes ; le reste suit les jetons du site.
   prefers-reduced-motion arrête tout mouvement. */

/* ---------- La carte des liens ---------- */
.insp-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0.75rem;
}

.insp-boutons[hidden] {
  display: none;
}

.insp-bouton {
  min-height: 44px;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}

.insp-bouton:hover {
  border-color: var(--accent);
  color: var(--accent-fort);
}

.insp-bouton:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.insp-bouton[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--fond);
}

.insp-etat {
  margin: 0.5rem 0 0.25rem;
  font-weight: 600;
}

.insp-note {
  margin: 0;
  color: var(--encre-3);
  font-size: 0.875rem;
}

/* ---------- Les cartes ---------- */
.insp-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.insp {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--filet);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.insp h3 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}

.insp-date {
  display: inline-block;
  margin-left: 0.35rem;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 400;
}

.insp p {
  margin: 0;
  overflow-wrap: anywhere;
}

.insp-etiquette {
  display: block;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.insp-licence {
  display: block;
  margin-top: 0.25rem;
  color: var(--encre-2);
  font-size: 0.875rem;
}

.insp-image {
  margin: 0 0 0.25rem;
}

.insp-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.insp-image figcaption {
  margin-top: 0.35rem;
  color: var(--encre-3);
  font-size: 0.8125rem;
}

.insp--pale {
  opacity: 0.38;
}

.insp--allume {
  border-left-color: var(--accent-fort);
  box-shadow: 0 0 0 2px var(--accent);
}

/* ---------- Le générique de fin ---------- */
.insp-ecran {
  position: relative;
  margin-top: 1rem;
}

.insp-pause {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.insp-pause-bouton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 0.4rem;
  padding: 0 0.9rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  cursor: pointer;
}

.insp-pause-bouton::before {
  content: "❚❚\00a0";
  content: "❚❚\00a0" / "";
}

.insp-pause:checked + .insp-pause-bouton::before {
  content: "▶\00a0";
  content: "▶\00a0" / "";
}

.insp-pause:focus-visible + .insp-pause-bouton {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.insp-ecran-cadre {
  position: relative;
  height: 20rem;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(90deg, #ff2a1a, #ffff00, #00e000, #00ffff, #1a3cff, #ff00ff) border-box;
}

.insp-ecran-cadre::before,
.insp-ecran-cadre::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  height: 3rem;
  pointer-events: none;
}

.insp-ecran-cadre::before {
  top: 0;
  background: linear-gradient(#000, transparent);
}

.insp-ecran-cadre::after {
  bottom: 0;
  background: linear-gradient(transparent, #000);
}

.insp-ecran-piste {
  padding: 20rem 1rem;
  color: #e8fff8;
  font-family: var(--f-mono);
  text-align: center;
  animation: insp-generique 70s linear infinite;
}

.insp-ecran-titre {
  margin: 1.5rem 0 0.75rem;
  color: #ffff00;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.insp-ecran-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.insp-ecran-liste li {
  margin: 0.45rem 0;
}

.insp-ecran-liste li:nth-child(3n + 1) {
  color: #7dffff;
}

.insp-ecran-liste li:nth-child(3n + 2) {
  color: #ff9bff;
}

.insp-ecran-fin {
  margin: 0.6rem 0;
  color: #7dff7d;
}

.insp-ecran:hover .insp-ecran-piste,
.insp-ecran:focus-within .insp-ecran-piste,
.insp-ecran:has(.insp-pause:checked) .insp-ecran-piste {
  animation-play-state: paused;
}

@keyframes insp-generique {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .insp {
    transition: none;
  }

  .insp-pause,
  .insp-pause-bouton {
    display: none;
  }

  .insp-ecran-cadre {
    height: auto;
    max-height: 24rem;
    overflow-y: auto;
  }

  .insp-ecran-cadre::before,
  .insp-ecran-cadre::after {
    display: none;
  }

  .insp-ecran-piste {
    padding: 1rem;
    animation: none;
  }
}