.lcdi-gallery {
  --gap-gallery: 10px;
  column-count: 3;
  column-gap: var(--gap-gallery);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lcdi-gallery__item {
  break-inside: avoid;
  margin: 0 0 var(--gap-gallery);
}

.lcdi-gallery__link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: var(--surface-warm);
  cursor: zoom-in;
}
.lcdi-gallery__link:focus-visible { box-shadow: var(--focus-ring); }

.lcdi-gallery__link img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--t-soft) var(--ease-brand);
}
.lcdi-gallery__link:hover img { transform: scale(var(--zoom-media)); }

@media (max-width: 1024px) { .lcdi-gallery { column-count: 2; } }
@media (max-width: 767px)  { .lcdi-gallery { column-count: 1; } }

.lcdi-gallery__viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--scrim-modal);
}
.lcdi-gallery__viewer[open],
.lcdi-gallery__viewer.is-open { display: flex; }

.lcdi-gallery__viewer img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-m);
}

.lcdi-gallery__cmd {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-arc);
  background: var(--surface-night-raised);
  color: var(--text-on-night);
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-brand);
}
.lcdi-gallery__cmd:hover { background: var(--veil-accent-night); }
.lcdi-gallery__cmd:focus-visible { box-shadow: var(--focus-ring); }
.lcdi-gallery__cmd svg { width: 24px; height: 24px; fill: currentColor; }

.lcdi-gallery__cmd--fermer { top: var(--space-5); right: var(--space-5); }
.lcdi-gallery__cmd--prec   { left: var(--space-5);  top: 50%; transform: translateY(-50%); }
.lcdi-gallery__cmd--suiv   { right: var(--space-5); top: 50%; transform: translateY(-50%); }

.lcdi-gallery__rang {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-on-night);
  font-size: var(--type-caption);
}

@media (max-width: 767px) {
  .lcdi-gallery__viewer { padding: var(--space-4); }

  .lcdi-gallery__cmd--prec { left: var(--space-2); }
  .lcdi-gallery__cmd--suiv { right: var(--space-2); }
}