@layer components {
  .galerie {
    display: grid;
    gap: var(--space-s);
  }

  /* ---------- Carrousel ---------- */
  .galerie__piste {
    position: relative; /* référence des offsetLeft du JS */
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: var(--radius-m);

    &::-webkit-scrollbar {
      display: none;
    }

    &:focus-visible {
      outline: 2px solid var(--couleur-focus);
      outline-offset: 2px;
    }
  }

  .galerie__diapo {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .galerie__lien {
    display: block;
    cursor: zoom-in;

    &:focus-visible {
      outline: 2px solid var(--couleur-focus);
      outline-offset: -4px;
    }

    img {
      inline-size: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      background: var(--couleur-surface);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .galerie__piste {
      scroll-behavior: smooth;
    }
  }

  /* ---------- Commandes ---------- */
  .galerie__commandes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);

    &[hidden] {
      display: none;
    }
  }

  .galerie__compteur {
    margin: 0;
    font-size: var(--fs-s);
    font-variant-numeric: tabular-nums;
    color: var(--couleur-texte-doux);
  }

  .galerie__bouton {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    border: var(--bordure);
    border-radius: var(--radius-rond);
    background: var(--couleur-surface);
    color: var(--couleur-texte);
    cursor: pointer;
    transition: background-color var(--duree-rapide) var(--easing);

    &:hover {
      background: var(--couleur-fond);
    }

    &:focus-visible {
      outline: 2px solid var(--couleur-focus);
      outline-offset: 2px;
    }

    /* Chevron, comme les accordéons */
    &::before {
      content: "";
      inline-size: 0.6em;
      block-size: 0.6em;
      border-inline-end: 2px solid currentColor;
      border-block-end: 2px solid currentColor;
    }
  }

  .galerie__bouton--prec::before {
    transform: translateX(15%) rotate(135deg);
  }

  .galerie__bouton--suiv::before {
    transform: translateX(-15%) rotate(-45deg);
  }

  /* Croix */
  .galerie__bouton--fermer::before {
    inline-size: 1em;
    block-size: 1em;
    border: 0;
    background:
      linear-gradient(45deg, transparent 45%, currentColor 45% 55%, transparent 55%),
      linear-gradient(-45deg, transparent 45%, currentColor 45% 55%, transparent 55%);
  }

  /* ---------- Lightbox ---------- */
  .galerie__lightbox {
    inline-size: 100vw;
    block-size: 100dvh;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: var(--space-xl) var(--space-m);
    border: 0;
    background: transparent;
    color: var(--blanc);

    &::backdrop {
      background: rgb(0 0 0 / 0.9);
    }

    &[open] {
      display: grid;
      place-items: center;
    }

    .galerie__compteur {
      color: inherit;
      text-align: center;
    }

    .galerie__bouton {
      position: absolute;
      border-color: transparent;
      background: rgb(0 0 0 / 0.5);
      color: var(--blanc);

      &:hover {
        background: rgb(0 0 0 / 0.8);
      }
    }

    .galerie__bouton--fermer {
      inset-block-start: var(--space-m);
      inset-inline-end: var(--space-m);
    }

    .galerie__bouton--prec,
    .galerie__bouton--suiv {
      inset-block-start: 50%;
      translate: 0 -50%;
    }

    .galerie__bouton--prec {
      inset-inline-start: var(--space-m);
    }

    .galerie__bouton--suiv {
      inset-inline-end: var(--space-m);
    }
  }

  .galerie__lightbox-figure {
    display: grid;
    place-items: center;
    gap: var(--space-s);
    margin: 0;
    max-block-size: 100%;
    min-block-size: 0;
  }

  .galerie__lightbox-image {
    max-inline-size: min(100%, 90vw);
    max-block-size: calc(100dvh - 8rem);
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
  }

  @media (forced-colors: active) {
    .galerie__bouton {
      border: 1px solid ButtonText;
    }
  }
}