/* TQS Gallery — styles scopés sous .tqs-gallery / .tqs-lightbox pour ne pas
   déborder sur le thème WordPress. Pas de font-family imposée : hérite du thème. */

.tqs-gallery {
  --tqs-gap: 1rem;
  --tqs-radius: 12px;
  /* Gris foncé (pas noir) : moins de contraste brutal contre le fond blanc
     du site que le quasi-noir d'origine — même famille de ton que le pied
     de page du site. */
  --tqs-bg: #2a2a2d;
  --tqs-text: #f2f2f0;
  --tqs-text-dim: #b8b8b4;
  box-sizing: border-box;
}
.tqs-gallery *,
.tqs-gallery *::before,
.tqs-gallery *::after { box-sizing: inherit; }

.tqs-gallery__loading,
.tqs-gallery__error {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--tqs-text-dim);
}

/* ── Landing : 3 cellules catégorie ─────────────────────────────────────── */
.tqs-landing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tqs-gap);
}
@media (max-width: 780px) {
  .tqs-landing { grid-template-columns: 1fr; }
}

.tqs-cell {
  position: relative;
  display: block;
  border-radius: var(--tqs-radius);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 1 / 1;
  background: var(--tqs-bg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tqs-cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.tqs-cell__collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
}
.tqs-cell__collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.tqs-cell:hover .tqs-cell__collage img { transform: scale(1.05); }

.tqs-cell__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  color: var(--tqs-text);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 55%);
}

/* ── Toolbar (sous-filtre) ──────────────────────────────────────────────── */
.tqs-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--tqs-gap);
}
.tqs-toolbar:empty { display: none; }

.tqs-select {
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(128,128,128,.4);
  border-radius: var(--tqs-radius);
  background: transparent;
  font-size: 0.85rem;
}

/* ── Grille catégorie ────────────────────────────────────────────────────── */
.tqs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--tqs-gap);
}

.tqs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  /* Contour visible par défaut (pas juste au survol) : sans ça, une carte a le
     même fond que son conteneur (popup de groupement) et se fond dedans. */
  border: 1px solid rgba(255,255,255,.1);
  /* Repli explicite : ce composant est aussi utilisé dans le popup de
     groupement, ajouté à document.body hors de .tqs-gallery, où --tqs-bg
     n'est pas hérité. */
  background: var(--tqs-bg, #2a2a2d);
  border-radius: var(--tqs-radius, 12px);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tqs-card:hover,
.tqs-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.14);
}

.tqs-card__imgwrap {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: rgba(128,128,128,.08);
}
.tqs-card__imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.tqs-card:hover .tqs-card__imgwrap img,
.tqs-card:focus-visible .tqs-card__imgwrap img { transform: scale(1.04); }

/* Légende toujours visible sous l'image (comme les cartes de la grille admin
   TQS) plutôt qu'en overlay au survol — ancre le style éditorial de la galerie. */
.tqs-card__info {
  display: block;
  padding: 0.7rem 0.85rem 0.8rem;
}
.tqs-card__subject {
  display: block;
  margin-bottom: 0.3rem;
  /* Repli explicite : .tqs-card est aussi utilisé dans le popup de groupement,
     hors de .tqs-gallery, où --tqs-text n'est pas hérité. */
  color: var(--tqs-text, #f2f2f0);
  font-size: 0.92rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tqs-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.tqs-card__artist {
  font-size: 0.7rem;
  color: var(--tqs-text-dim, #b8b8b4);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tqs-card__date {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--tqs-text-dim, #b8b8b4);
  opacity: .7;
}

/* ── Tuile groupée (mosaïque) ────────────────────────────────────────────
   Plusieurs photos de la même session (même date + mêmes sujets détectés,
   ou même titre) fusionnées en une seule tuile — évite de saturer la grille
   de quasi-doublons. Même règle de regroupement que l'admin TQS. */
.tqs-card--group {
  cursor: pointer;
}
.tqs-card--group:focus-visible {
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 2px;
}

.tqs-mosaic {
  display: grid;
  gap: 2px;
}
.tqs-mosaic--two   { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.tqs-mosaic--three { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tqs-mosaic--three .tqs-mosaic__cell:first-child { grid-row: 1 / 3; }
.tqs-mosaic--four  { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.tqs-mosaic__cell {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
  cursor: pointer;
}
.tqs-mosaic__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.tqs-mosaic__cell:hover img { transform: scale(1.06); }

.tqs-mosaic__overflow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  color: var(--tqs-text, #f2f2f0);
  font-size: 1.1rem;
  font-weight: 600;
}

.tqs-card__stackcount {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--tqs-text, #f2f2f0);
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 20px;
  padding: 0.15rem 0.5rem;
  line-height: 1;
}

/* ── Popup de groupement ─────────────────────────────────────────────────
   Ajouté à document.body comme la lightbox : mêmes précautions CSS
   défensives (!important sur les propriétés visuelles critiques). */
.tqs-group-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(5, 5, 6, 0.85) !important;
  transition: opacity .18s ease, visibility .18s;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}
.tqs-group-modal-backdrop *,
.tqs-group-modal-backdrop *::before,
.tqs-group-modal-backdrop *::after { box-sizing: inherit; }
.tqs-group-modal-backdrop--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tqs-group-modal {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  /* Ajouté à document.body (hors .tqs-gallery) : ne peut pas lire --tqs-bg,
     donc même ton en dur ici — à garder synchronisé avec --tqs-bg ci-dessus. */
  background: #2a2a2d !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  font: inherit;
}

.tqs-group-modal__close {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  margin: 0; padding: 0;
  background: transparent !important;
  border: none !important;
  color: #d8d8d4 !important;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: inherit;
  transition: color .15s ease, background .15s ease;
}
.tqs-group-modal__close:hover { color: #fff !important; background: rgba(255,255,255,.1) !important; }

.tqs-group-modal__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-right: 2.5rem;
}
.tqs-group-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tqs-group-modal__tag {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #f5f5f2 !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 20px;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease;
}
.tqs-group-modal__tag:hover { background: rgba(255,255,255,.1) !important; }

.tqs-group-modal__side {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.tqs-group-modal__date  { font-size: 0.73rem; color: #b8b8b4 !important; }
.tqs-group-modal__sep   { font-size: 0.7rem;  color: #8a8a86 !important; }
.tqs-group-modal__count { font-size: 0.68rem; color: #8a8a86 !important; }

.tqs-group-modal__scalewrap {
  overflow: hidden;
}
.tqs-group-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  padding: 0.15rem;
  transform-origin: top center;
}

@media (max-width: 680px) {
  .tqs-group-modal-backdrop { padding: 1rem; }
  .tqs-group-modal { padding: 1.1rem; }
  .tqs-group-modal__grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ── Lightbox ─────────────────────────────────────────────────────────────
   Ajoutée à document.body (hors .tqs-gallery) : le CSS du thème WordPress
   peut cibler des balises génériques (h3, p, button...) avec plus de
   spécificité que nous. Toutes les propriétés visuelles critiques (couleur,
   fond, taille) sont donc déclarées explicitement avec !important. */
.tqs-lightbox,
.tqs-lightbox * { box-sizing: border-box; }

/* Reset natif des <button> : sans ça, ils gardent le padding et la police
   système du navigateur (pas d'héritage de font-family par défaut sur les
   boutons), ce qui décentre visuellement le glyphe (‹ › ✕ ▲) dans le cercle
   flex malgré align-items/justify-content: center. */
.tqs-lightbox button {
  margin: 0;
  padding: 0;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.tqs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.tqs-lightbox--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tqs-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.94) !important;
}

.tqs-lightbox__stage {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4.5rem 5rem calc(1.5rem + 40px);
}

.tqs-lightbox__imgwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  max-width: 100%;
  flex: 1 1 auto;
}
.tqs-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 11rem);
  object-fit: contain;
  border-radius: 4px;
  display: block;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  opacity: 0; /* masqué tant que la nouvelle image n'est pas chargée (voir gallery.js) */
}
.tqs-lightbox__img--ready {
  animation: tqs-zoom-in .22s ease forwards;
}
@keyframes tqs-zoom-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

.tqs-lightbox__bar {
  flex: 0 0 auto;
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: rgba(20, 20, 24, 0.75) !important;
  border-radius: 6px;
}
.tqs-lightbox__bar-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
}
.tqs-lightbox__title {
  color: #f5f5f2 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tqs-lightbox__date {
  color: #b8b8b4 !important;
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tqs-lightbox__bar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tqs-lightbox__id {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.3rem 0.65rem !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 20px;
  background: transparent !important;
  color: #f5f5f2 !important;
  font-family: 'Courier New', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.tqs-lightbox__id:hover { background: rgba(255,255,255,.12) !important; }

/* Boutons flottants (fermer / précédent / suivant) */
.tqs-lightbox__close,
.tqs-lightbox__prev,
.tqs-lightbox__next {
  position: fixed;
  z-index: 3;
  background: rgba(20,20,22,.55) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, right .25s ease, transform .15s ease;
}
.tqs-lightbox__close svg,
.tqs-lightbox__prev svg,
.tqs-lightbox__next svg {
  display: block;
}
.tqs-lightbox__close:hover,
.tqs-lightbox__prev:hover,
.tqs-lightbox__next:hover { background: rgba(40,40,44,.85) !important; }

.tqs-lightbox__close { top: 1.25rem; right: 1.25rem; }
.tqs-lightbox__prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.tqs-lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.tqs-lightbox__close:hover { transform: scale(1.08); }
.tqs-lightbox__prev:hover  { transform: translateY(-50%) scale(1.08); }
.tqs-lightbox__next:hover  { transform: translateY(-50%) scale(1.08); }

/* Volet description — bande persistante avec poignée-flèche (un seul contrôle,
   toujours au même endroit, pas de bouton ⓘ séparé). Par défaut (mobile/portrait) :
   bande en bas de l'écran (repliée = 40px, comme un bottom-sheet, dans l'esprit
   du bouton "Description ▼" de la lightbox admin TQS). Voir plus bas pour la
   variante PC paysage (bande latérale à droite). */
.tqs-lightbox__drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  max-height: 40px;
  background: rgba(14, 14, 16, 0.97) !important;
  border-top: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  transition: max-height .25s ease;
}
.tqs-lightbox--drawer-open .tqs-lightbox__drawer { max-height: 60vh; }

.tqs-lightbox__drawer-toggle {
  flex: 0 0 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  color: #f5f5f2 !important;
  cursor: pointer;
}
/* Icônes SVG plutôt que glyphes texte (▲ ▼ i ›) — même raison que les boutons
   fermer/précédent/suivant : un centrage pixel-parfait indépendant de la police. */
.tqs-lightbox__drawer-toggle svg { display: none; }
.tqs-lightbox__drawer-toggle .tqs-icon-chevron-up { display: block; }
.tqs-lightbox--drawer-open .tqs-lightbox__drawer-toggle .tqs-icon-chevron-up { display: none; }
.tqs-lightbox--drawer-open .tqs-lightbox__drawer-toggle .tqs-icon-chevron-down { display: block; }

.tqs-lightbox__drawer-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 1.5rem 1.5rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}
.tqs-lightbox--drawer-open .tqs-lightbox__drawer-content { opacity: 1; visibility: visible; }

.tqs-lightbox__drawer-title {
  margin: 0 0 0.3rem !important;
  color: #f5f5f2 !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
.tqs-lightbox__drawer-date {
  margin: 0 0 1rem !important;
  color: #9a9a96 !important;
  font-size: 0.78rem !important;
}
.tqs-lightbox__drawer-desc {
  margin: 0 !important;
  color: #d8d8d4 !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  white-space: pre-line;
}

/* Écran PC en orientation paysage : bande latérale à droite, TOUJOURS visible
   (52px repliée — assez large pour loger le bouton 44px sans que l'overflow:hidden
   du volet ne le rogne) pour qu'on sache qu'elle existe. Seule la poignée se
   déplace, du milieu de la bande (vers les flèches ‹ ›, confus) vers le haut, à
   côté de la croix de fermeture. Ouverte par défaut à chaque photo. */
@media (min-width: 900px) and (orientation: landscape) {
  .tqs-lightbox__drawer {
    top: 0; left: auto; bottom: 0; right: 0;
    max-height: none;
    width: 52px;
    border-top: none;
    border-left: 1px solid rgba(255,255,255,.12);
    transition: width .25s ease;
  }
  .tqs-lightbox--drawer-open .tqs-lightbox__drawer { width: min(360px, 88vw); max-height: none; }

  .tqs-lightbox__drawer-toggle {
    position: absolute;
    top: 1.25rem;
    left: 4px;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: rgba(20,20,22,.55) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, left .25s ease;
  }
  /* Ouvert : décalée plus loin dans le panneau, à distance de la bordure gauche. */
  .tqs-lightbox--drawer-open .tqs-lightbox__drawer-toggle { left: 16px; }
  .tqs-lightbox__drawer-toggle:hover { background: rgba(40,40,44,.85) !important; }
  /* Icône "info" plutôt que "i"/"›" en glyphe texte : fermé = info, ouvert = chevron
     (sens de la fermeture du volet). Les 2 sélecteurs --drawer-open ci-dessous sont
     nécessaires malgré la redondance apparente : sans eux, la règle mobile "ouvert"
     (3 classes, plus spécifique) gagnait sur le simple masquage desktop (2 classes)
     et affichait le chevron-bas EN PLUS du chevron-droit desktop. */
  .tqs-lightbox__drawer-toggle .tqs-icon-chevron-up,
  .tqs-lightbox__drawer-toggle .tqs-icon-chevron-down,
  .tqs-lightbox--drawer-open .tqs-lightbox__drawer-toggle .tqs-icon-chevron-up,
  .tqs-lightbox--drawer-open .tqs-lightbox__drawer-toggle .tqs-icon-chevron-down { display: none; }
  .tqs-lightbox__drawer-toggle .tqs-icon-info { display: block; }
  .tqs-lightbox--drawer-open .tqs-lightbox__drawer-toggle .tqs-icon-info { display: none; }
  .tqs-lightbox--drawer-open .tqs-lightbox__drawer-toggle .tqs-icon-chevron-right { display: block; }

  .tqs-lightbox__drawer-content { padding: 4.5rem 1.5rem 2rem 0.5rem; }

  .tqs-lightbox__stage {
    padding-bottom: 1.5rem;
    transition: padding-right .25s ease;
  }
  .tqs-lightbox--drawer-open .tqs-lightbox__stage {
    padding-right: calc(min(360px, 88vw) + 2rem);
  }
  .tqs-lightbox__close { right: calc(52px + 1.25rem); }
  .tqs-lightbox__next  { right: calc(52px + 1rem); }
  .tqs-lightbox--drawer-open .tqs-lightbox__close {
    right: calc(min(360px, 88vw) + 1.25rem);
  }
  .tqs-lightbox--drawer-open .tqs-lightbox__next {
    right: calc(min(360px, 88vw) + 1rem);
  }
}

@media (max-width: 680px) {
  .tqs-lightbox__stage { padding: 3.75rem 1rem calc(1rem + 40px); }
  .tqs-lightbox__prev, .tqs-lightbox__next { width: 38px; height: 38px; }
  .tqs-lightbox__prev svg, .tqs-lightbox__next svg { width: 17px; height: 17px; }
  .tqs-lightbox__bar { max-width: 100%; }
}