/* ==========================================================================
   Galerie de projets premium (premium-projects-gallery)

   Une grande image à la fois dans un rail à défilement natif, surmontée d'un
   panneau de verre qui porte le compteur, le titre du projet et les vignettes.
   Le rail est un `scroll-snap` : le doigt et la molette suffisent, le JS ne
   sert qu'à synchroniser le panneau.

   Tous les sélecteurs passent par `.tpl-premium[data-premium-page]
   [data-premium-projects-gallery]`, comme les autres blocs premium : premium.css
   habille les listes, les images et les titres de chaque page (par exemple
   `[data-premium-page="portfolio"] img`) et l'emporterait sinon.
   ========================================================================== */

.tpl-premium[data-premium-page] [data-premium-projects-gallery] {
  /* Réglages du bloc — le panneau reste sombre dans les deux apparences :
     il flotte au-dessus de photos quelconques, c'est le seul moyen de garantir
     un texte lisible sans connaître l'image. */
  --pg-radius: 20px;
  --pg-panel-radius: 24px;
  --pg-panel-width: 480px;
  --pg-panel-pad: 20px;
  --pg-panel-surface: rgba(16, 16, 18, 0.62);
  --pg-panel-border: rgba(255, 255, 255, 0.1);
  --pg-panel-blur: blur(24px) saturate(1.2);
  --pg-panel-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), 0 30px 60px -15px rgba(0, 0, 0, 0.6);
  --pg-text: #ffffff;
  --pg-muted: rgba(255, 255, 255, 0.72);
  --pg-nav-size: 46px;
  --pg-nav-surface: rgba(255, 255, 255, 0.16);
  --pg-nav-surface-hover: rgba(255, 255, 255, 0.28);
  --pg-thumb-width: 84px;
  --pg-thumb-height: 100px;
  --pg-gap: 12px;
  --pg-accent: var(--brand-primary, #5094dc);
  --pg-surface: #0d0d0d;
  --pg-heading: #fff;
  --pg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pg-duration: 0.45s;

  padding-top: 100px;
  padding-bottom: 100px;
  background: var(--pg-surface);
  transition: background-color 0.4s ease;
}

/* Les deux fonds sont littéraux, comme dans le pied de page et le bloc d'avis :
   les variables de marque (`--brand-bg-white`, `--brand-dark`) sont des surfaces
   réglables par l'installateur et peuvent être sombres toutes les deux, alors
   qu'ici « clair » et « foncé » sont le choix explicite de l'éditeur. */
.tpl-premium[data-premium-page] [data-premium-projects-gallery][data-theme="light"] {
  --pg-surface: #fff;
  --pg-heading: #111;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery][data-theme="dark"] {
  --pg-surface: #0d0d0d;
}

/* Respiration demandée au-dessus du sur-titre, en plus du retrait de section. */
.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__head {
  padding-top: 30px;
}

/* Le titre suit l'apparence du bloc : premium.css le fige par page, il faut
   donc le redéclarer ici pour qu'il reste lisible sur fond blanc. */
.tpl-premium[data-premium-page] [data-premium-projects-gallery] .portfolio-heading {
  color: var(--pg-heading);
}

/* --------------------------------------------------------------------------
   Scène : le rail d'images et le panneau qui le survole
   -------------------------------------------------------------------------- */

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__stage {
  position: relative;
  margin-top: 48px;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__viewport {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--pg-radius);
  /* Le rail est focusable au clavier : la bordure doit rester visible. */
  outline-offset: 4px;
  /* Barre masquée : la progression et les vignettes disent déjà où l'on est. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__viewport::-webkit-scrollbar {
  display: none;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  /* Le ratio réserve la place avant le chargement (pas de saut de mise en
     page) ; le plafond évite qu'un large écran donne une image plein écran. */
  aspect-ratio: 16 / 9;
  max-height: min(68vh, 680px);
  overflow: hidden;
  background: #101012;
}

/* Remplit la diapo : le cadrage est décidé par le ratio, pas par l'image. */
.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile sous le panneau : garantit le contraste du texte quelle que soit la
   photo, sans assombrir l'image entière. */
.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}

/* --------------------------------------------------------------------------
   Panneau de verre
   -------------------------------------------------------------------------- */

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__panel {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  width: min(var(--pg-panel-width), calc(100% - 48px));
  padding: var(--pg-panel-pad);
  border: 1px solid var(--pg-panel-border);
  border-radius: var(--pg-panel-radius);
  background: var(--pg-panel-surface);
  -webkit-backdrop-filter: var(--pg-panel-blur);
  backdrop-filter: var(--pg-panel-blur);
  box-shadow: var(--pg-panel-shadow);
  color: var(--pg-text);
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pg-gap);
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__nav {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--pg-nav-size);
  height: var(--pg-nav-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pg-nav-surface);
  color: var(--pg-text);
  cursor: pointer;
  transition: background-color var(--pg-duration) var(--pg-ease), transform var(--pg-duration) var(--pg-ease),
    opacity var(--pg-duration) var(--pg-ease);
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__nav svg {
  width: 22px;
  height: 22px;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__nav:hover:not(:disabled) {
  background: var(--pg-nav-surface-hover);
  transform: scale(1.08);
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__nav:focus-visible {
  outline: 2px solid var(--pg-text);
  outline-offset: 3px;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__count {
  margin: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__count-current {
  font-size: 22px;
  font-weight: 600;
  color: var(--pg-text);
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__count-total {
  margin-left: 2px;
  font-size: 13px;
  color: var(--pg-muted);
}

/* --------------------------------------------------------------------------
   Légendes empilées : une seule visible, les autres restent dans le flux pour
   que la hauteur du panneau ne saute pas d'un projet à l'autre.
   -------------------------------------------------------------------------- */

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__captions {
  display: grid;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

/* Aucun projet nommé : pas de zone de texte vide dans le panneau. */
.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__captions:empty {
  display: none;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__caption {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--pg-duration) var(--pg-ease), transform var(--pg-duration) var(--pg-ease);
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__caption.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Sans JavaScript aucune classe n'est posée : le premier projet doit rester
   visible malgré tout. */
.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__captions:not(.is-ready) .premium-projects-gallery__caption:first-child {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__caption-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--pg-text);
}

/* `a.` est nécessaire : premium.css colore tous les liens d'une page. */
.tpl-premium[data-premium-page] [data-premium-projects-gallery] a.premium-projects-gallery__caption-link {
  color: inherit;
  text-decoration: none;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] a.premium-projects-gallery__caption-link:hover,
.tpl-premium[data-premium-page] [data-premium-projects-gallery] a.premium-projects-gallery__caption-link:focus-visible {
  color: var(--pg-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__caption-meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--pg-muted);
}

/* --------------------------------------------------------------------------
   Vignettes
   -------------------------------------------------------------------------- */

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__thumbs {
  display: flex;
  gap: var(--pg-gap);
  margin: 16px 0 0;
  /* La bande défile en largeur, ce qui rogne aussi la hauteur : ces 2px laissent
     passer le léger soulèvement au survol. */
  padding: 2px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__thumbs:empty {
  display: none;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__thumb-item {
  flex: 0 0 auto;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__thumb {
  display: block;
  width: var(--pg-thumb-width);
  height: var(--pg-thumb-height);
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.55;
  /* Liseré tracé à l'intérieur de la vignette (décalage négatif) : à l'extérieur
     il serait rogné par la bande qui défile, et le trait paraissait coupé. */
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: opacity var(--pg-duration) var(--pg-ease), outline-color var(--pg-duration) var(--pg-ease),
    transform var(--pg-duration) var(--pg-ease);
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__thumb:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__thumb[aria-current="true"] {
  opacity: 1;
  outline-color: var(--pg-accent);
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__thumb:focus-visible {
  outline-color: var(--pg-text);
}

/* --------------------------------------------------------------------------
   Progression
   -------------------------------------------------------------------------- */

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__progress {
  margin-top: 16px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__progress-bar {
  display: block;
  width: var(--pg-progress, 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--pg-accent);
  transition: width var(--pg-duration) var(--pg-ease);
}

/* --------------------------------------------------------------------------
   Responsive : sous 992px le panneau passe sous l'image plutôt que par-dessus,
   sinon il masque la photo sur un écran étroit.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .tpl-premium[data-premium-page] [data-premium-projects-gallery] {
    padding-top: 72px;
    padding-bottom: 72px;
    --pg-thumb-width: 72px;
    --pg-thumb-height: 86px;
  }

  .tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__slide {
    aspect-ratio: 4 / 3;
  }

  .tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__panel {
    position: static;
    width: auto;
    margin-top: 16px;
  }

  .tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__scrim {
    display: none;
  }
}

@media (max-width: 575px) {
  .tpl-premium[data-premium-page] [data-premium-projects-gallery] {
    --pg-nav-size: 40px;
    --pg-panel-pad: 16px;
    --pg-thumb-width: 60px;
    --pg-thumb-height: 72px;
  }

  .tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__slide {
    aspect-ratio: 3 / 4;
  }

  .tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__caption-title {
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__viewport {
    scroll-behavior: auto;
  }

  .tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__caption,
  .tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__thumb,
  .tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__nav,
  .tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__progress-bar {
    transition: none;
  }

  .tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__thumb:hover,
  .tpl-premium[data-premium-page] [data-premium-projects-gallery] .premium-projects-gallery__nav:hover:not(:disabled) {
    transform: none;
  }
}