/* CMS : une médiathèque où chaque média affiche son statut dès l'import. */

.sl-hero--cm {
  background: radial-gradient(ellipse 60% 70% at 72% 45%, #fff, #f2ebe4 70%);
}

.sl-hero--cm .sl-scene {
  max-width: 640px;
}

.cm-lib {
  overflow: hidden;
  border: 1px solid #e6dbd2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 50px 90px -40px rgba(60, 30, 10, 0.4);
}

.cm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #efe6de;
}

.cm-title {
  color: var(--ps-ink);
  font-size: 16px;
  font-weight: 900;
}

.cm-count {
  color: #8a7266;
  font-size: 11px;
}

.cm-import {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ps-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.cm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
}

.cm-chip {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #e6dbd2;
  border-radius: 999px;
  background: #fff;
  color: var(--ps-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s var(--ps-ease), background 0.2s, color 0.2s;
}

.cm-chip[aria-pressed="true"] {
  border-color: var(--ps-ink);
  background: var(--ps-ink);
  color: #fff;
}

.cm-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  border-top: 1px solid #efe6de;
}

.cm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 16px;
}

.cm-it {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 8px;
  background: #000;
  cursor: pointer;
  transition: opacity 0.3s, box-shadow 0.2s;
}

.cm-it.is-dim {
  opacity: 0.18;
}

.cm-it[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--ps-orange);
}

.cm-chip:focus-visible,
.cm-it:focus-visible {
  outline: 3px solid rgba(255, 138, 76, 0.55);
  outline-offset: 3px;
}

.cm-th {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 8px;
}

.cm-th img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.cm-dot--t { background: var(--ps-status-trusted); }
.cm-dot--s { background: var(--ps-status-untrusted); }
.cm-dot--i { background: var(--ps-status-invalid); }
.cm-dot--n { background: var(--ps-status-none); }

.cm-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-left: 1px solid #efe6de;
  color: var(--ps-muted-light);
  font-size: 12px;
}

.cm-name {
  color: var(--ps-ink);
  font-size: 11px;
  word-break: break-all;
}

.cm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ps-ink);
  font-weight: 700;
}

.cm-sdot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.cm-foot {
  margin-top: auto;
  color: #9a7d6f;
  font-size: 10px;
}

/* Réglages de chaque vignette. */
.cm-i0 .cm-th { filter: hue-rotate(-30deg) saturate(0.7); }
.cm-i1 .cm-th { filter: hue-rotate(7deg) saturate(0.85); }
.cm-i2 .cm-th { filter: hue-rotate(44deg) saturate(1); }
.cm-i3 .cm-th { filter: hue-rotate(-9deg) saturate(1.15); }
.cm-i4 .cm-th { filter: hue-rotate(28deg) saturate(0.7); }
.cm-i5 .cm-th { filter: hue-rotate(-25deg) saturate(0.85); }
.cm-i6 .cm-th { filter: hue-rotate(12deg) saturate(1); }
.cm-i7 .cm-th { filter: hue-rotate(49deg) saturate(1.15); }

@media (hover: hover) {
  .cm-chip:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 900px) {
  .sl-scene .cm-lib {
    zoom: 0.62;
  }
}

@media (max-width: 420px) {
  .sl-scene .cm-lib {
    zoom: 0.54;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cm-chip,
  .cm-it {
    transition: none;
  }

  .cm-chip:hover {
    transform: none;
  }
}