/* Organise les galeries d'images affichees dans les pages et les articles. */
.df-gallery,
.df-gallery--skills,
.df-gallery--news {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.df-gallery--skills > *,
.df-gallery--news > * {
  margin: 0 !important;
}

.df-gallery--skills .df-gallery-item,
.df-gallery--skills figure.df-gallery-item,
.df-gallery--news .df-gallery-item,
.df-gallery--news figure.df-gallery-item {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 168px;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    rgba(8, 0, 5, 0.42);
  box-shadow: var(--shadow-soft);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.df-gallery--skills .df-gallery-item::before,
.df-gallery--skills figure.df-gallery-item::before,
.df-gallery--news .df-gallery-item::before,
.df-gallery--news figure.df-gallery-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
  opacity: 0.76;
}

.df-gallery--skills .df-gallery-item:hover,
.df-gallery--skills figure.df-gallery-item:hover,
.df-gallery--news .df-gallery-item:hover,
.df-gallery--news figure.df-gallery-item:hover {
  border-color: rgba(50, 217, 200, 0.42);
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
}

.df-gallery--skills img {
  width: 100% !important;
  max-width: 150px;
  max-height: 112px;
  object-fit: contain;
  transition: transform 220ms ease, filter 220ms ease;
}

.df-gallery--news img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  filter: saturate(1.02) contrast(1.02) brightness(0.9);
  transition: transform 220ms ease, filter 220ms ease;
}

.df-gallery--skills .df-gallery-item:hover img,
.df-gallery--skills figure.df-gallery-item:hover img {
  filter: drop-shadow(0 12px 18px rgba(50, 217, 200, 0.16));
  transform: scale(1.06);
}

.df-gallery--news .df-gallery-item:hover img,
.df-gallery--news figure.df-gallery-item:hover img {
  filter: saturate(1.08) contrast(1.04) brightness(0.96);
  transform: scale(1.025);
}

.df-gallery--skills p:empty {
  display: none;
}