.title-perso{
  background-color: rgba(0, 0, 0, .6);
clip-path: polygon(2% 0, 100% 0%, 98% 100%, 0% 100%);

}


.gallery-image {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-image img {
  height: 250px;
  width: 250px;
  transform: scale(1.0);
  transition: transform 0.4s ease;
}

.img-box {
  box-sizing: content-box;
  margin: 10px;
  height: 250px;
  width: 250px;
  overflow: hidden;
  display: inline-block;
  color: white;
  position: relative;
  background-color: rgba(0, 0, 0, .6);
}

.caption {
  position: absolute;
  bottom: 5px;
  left: 20px;
  opacity: 0.0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.transparent-box {
  height: 250px;
  width: 250px;
  background-color:rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.3s ease;
}


.img-box:hover img { 
  transform: scale(1.1);
}

.img-box:hover .transparent-box {
  background-color:rgba(0, 0, 0, 0.5);
}

.img-box:hover .caption {
  transform: translateY(-20px);
  opacity: 1.0;
}

.img-box:hover {
  cursor: pointer;
}

.caption > p:nth-child(2) {
  font-size: 0.8em;
}

.opacity-low {
  opacity: 0.5;
}



/* ----- */

:root {
  --galx-gap: 12px;
  --galx-thumb-size: 72px;
  --galx-accent: #2563eb;
  --galx-text: #f8f9fb;
}

/* Container */
.galx-gallery {
  inline-size: min(100%, 980px);
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow: clip;
}

/* Slider area */
.galx-slider {
  position: relative;
  aspect-ratio: 16/9;
  background: #0b1220;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  --galx-transition-ms: 420ms;
}

.galx-track {
  display: flex;
  block-size: 100%;
  inline-size: 100%;
  transform: var(--galx-transform, translateX(0));
  transition: transform var(--galx-transition-ms) ease;
}

.galx-item {
  flex: 0 0 100%;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0b1220;
}

.galx-item img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Caption */
.galx-caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color: #e5e7eb;
  font-size: 14px;
}

/* Prev/Next */
.galx-nav {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 6px;
}

.galx-nav button {
  pointer-events: auto;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: rgba(17, 24, 39, .7);
  color: #e5e7eb;
  display: grid;
  place-items: center;
  cursor: pointer;
  outline: none;
  transition: background .2s ease, transform .08s ease;
}
.galx-nav button:hover { background: rgba(30, 41, 59, .85); }
.galx-nav button:active { transform: scale(.97); }
.galx-nav svg { inline-size: 20px; block-size: 20px; }

/* Dots */
.galx-dots {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.galx-dots button {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 999px;
  border: none;
  background: #475569;
  opacity: .8;
  cursor: pointer;
}
.galx-dots button[aria-current="true"] {
  background: var(--galx-accent);
  opacity: 1;
}

/* Thumbnails */
.galx-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--galx-thumb-size), 1fr));
  gap: var(--galx-gap);
  padding: 14px;
  background: #0f172a;
  border-top: 1px solid #1f2937;
}

.galx-thumb {
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  isolation: isolate;
}

.galx-thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.9);
  transition: transform .25s ease, filter .25s ease;
}
.galx-thumb:hover img { transform: scale(1.03); filter: saturate(1); }
.galx-thumb[aria-current="true"] { border-color: var(--galx-accent); }

/* Accessibility focus */
.galx-thumb:focus-visible,
.galx-nav button:focus-visible,
.galx-dots button:focus-visible {
  outline: 2px solid var(--galx-accent);
  outline-offset: 2px;
}

/* Small screens */
@media (max-width: 520px) {
  :root { --galx-thumb-size: 60px; }
  .galx-nav button { inline-size: 38px; block-size: 38px; }
}


/* --- Lightbox --- */
.galx-lightbox {
  position: fixed;
  inset: 0;
  display: none;             /* cachée par défaut */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.galx-lightbox[aria-hidden="false"] { display: flex; }

.galx-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(2px);
}

.galx-lightbox__content {
  position: relative;
  max-inline-size: min(92vw, 1100px);
  max-block-size: min(90vh, 800px);
  background: #0b1220;
  border: 1px solid #1f2937;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

.galx-lightbox__track {
  position: relative;
  background: #000;
}

.galx-lightbox__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  background: #000;
}

.galx-lightbox__caption {
  color: #e5e7eb;
  font-size: 14px;
  padding: 10px 14px;
  border-top: 1px solid #1f2937;
  background: #0f172a;
}

.galx-lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: rgba(17, 24, 39, .8);
  color: #e5e7eb;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.galx-lightbox__close svg { inline-size: 20px; block-size: 20px; }

.galx-lightbox__prev, .galx-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 44px;
  block-size: 44px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: rgba(17, 24, 39, .8);
  color: #e5e7eb;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.galx-lightbox__prev { left: 10px; }
.galx-lightbox__next { right: 10px; }
.galx-lightbox__prev svg, .galx-lightbox__next svg { inline-size: 22px; block-size: 22px; }

@media (max-width: 520px) {
  .galx-lightbox__content {
    max-inline-size: 96vw;
    max-block-size: 88vh;
  }
  .galx-lightbox__prev, .galx-lightbox__next {
    inline-size: 40px; block-size: 40px;
  }
}


/* Accessibilité utilitaire (texte caché mais lisible par lecteur d'écran) */
.galx-visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  block-size: 1px !important;
  inline-size: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* --- Close (croix) pour la lightbox --- */
.galx-lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: rgba(17, 24, 39, .92);   /* fond sombre bien visible */
  color: #ffffff;                       /* croix blanche */
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;                           /* au dessus de l'image */
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: background .2s ease, transform .08s ease, border-color .2s ease;
}

.galx-lightbox__close:hover {
  background: rgba(30, 41, 59, .96);
  border-color: #475569;
}

.galx-lightbox__close:active {
  transform: scale(.97);
}

.galx-lightbox__close:focus-visible {
  outline: 2px solid #2563eb;          /* même accent que tes autres éléments */
  outline-offset: 2px;
}

.galx-lightbox__close svg {
  inline-size: 22px;
  block-size: 22px;
}

/* Variante "coin fixe" si tu veux que le bouton soit hors du cadre de contenu */
.galx-lightbox--corner .galx-lightbox__close {
  right: 16px;
  top: 16px;
  background: rgba(15, 23, 42, .9);
  border-color: #1f2937;
}


/* Masquer les légendes visibles sous les images */
.galx-caption,
.galx-lightbox__caption {
  display: none;
}