/* ============================================================
   UniPay — Objet arrière-plan global : IMAGES UNIQUEMENT
   ------------------------------------------------------------
   Règle verrouillée : même moteur en mode ordinateur, mobile portrait
   et mobile paysage.

   Responsabilités :
   - chat.css gère le quadrillage pur ;
   - ce fichier gère #unipayPageBackgroundHost, la scène image,
     les transitions, l'opacité et la vignette ;
   - aucune media query ne doit changer le fond selon téléphone/ordinateur.
   ============================================================ */
:root {  --unipay-bg-base: #020812;
  --unipay-bg-image-opacity: 1;
  --unipay-bg-fade-duration: 3000ms;
  --unipay-bg-inline-image: none;
  --unipay-bg-brightness: 1;
}

/* Le body ne charge jamais d'image concurrente. La sequence d'images
   appartient au seul hote global ci-dessous. */
body {
  background-image: none !important;
}

html.unipay-page-bg-ready,
body.unipay-page-bg-ready {
  min-height: 100%;
}

html.unipay-page-bg-ready {
  background: var(--unipay-bg-base) !important;
}

body.unipay-page-bg-ready {
  background: transparent !important;
}

/* Correction 2026-06-16 : aucun positionnement global des enfants du body.
   Les pages gardent leur propre moteur de layout ; le fond reste derrière. */

#unipayPageBackgroundHost {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  background-color: var(--unipay-bg-base);
  background-image: var(--unipay-bg-inline-image);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#unipayPageBackgroundHost[aria-hidden="true"] {
  speak: never;
}

.unipay-page-bg-stage {
  position: absolute;
  inset: 0;
}

.unipay-page-bg-grid,
.unipay-page-bg-vignette {
  display: none !important;
}

.unipay-page-bg-stage {
  display: block;
  z-index: 1;
}

.unipay-page-bg-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity var(--unipay-bg-fade-duration) ease-in-out, transform var(--unipay-bg-fade-duration) ease-in-out, filter 240ms ease;
  will-change: opacity, transform, filter;
  user-select: none;
  -webkit-user-drag: none;
  object-fit: cover;
  object-position: center center;
  filter: brightness(var(--unipay-bg-brightness));
}

.unipay-page-bg-image:not(.is-visible) {
  opacity: 0 !important;
}

@media (max-width: 768px) {
  #unipayPageBackgroundHost,
  .unipay-page-bg-stage {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 100vw !important;
    min-width: 100dvw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  .unipay-page-bg-image {
    min-width: 100dvw;
    min-height: 100dvh;
  }
}

/* En portrait, toute image paysage est ancrée sur la hauteur disponible.
   La largeur devient volontairement supérieure à l'écran afin de recadrer
   les côtés sans créer de bandes vides en haut ou en bas. */
@media (max-width: 768px) and (orientation: portrait) {
  .unipay-page-bg-image {
    width: auto !important;
    height: 100dvh !important;
    min-width: 100dvw !important;
    min-height: 100dvh !important;
  }
}

.unipay-page-bg-image.is-visible {
  opacity: var(--unipay-bg-image-opacity);
}

#unipayPageBackgroundHost[data-unipay-bg-transition="zoom"] .unipay-page-bg-image {
  transform: translate3d(-50%, -50%, 0) scale(1.08);
}

#unipayPageBackgroundHost[data-unipay-bg-transition="zoom"] .unipay-page-bg-image.is-visible {
  transform: translate3d(-50%, -50%, 0) scale(1);
}

#unipayPageBackgroundHost[data-unipay-bg-transition="slide"] .unipay-page-bg-image {
  transform: translate3d(-46%, -50%, 0) scale(1.02);
}

#unipayPageBackgroundHost[data-unipay-bg-transition="slide"] .unipay-page-bg-image.is-visible {
  transform: translate3d(-50%, -50%, 0) scale(1);
}

#unipayPageBackgroundHost[data-unipay-bg-transition="pulse"] .unipay-page-bg-image.is-visible {
  animation: unipay-bg-soft-pulse 10s ease-in-out infinite alternate;
}

#unipayPageBackgroundHost[data-unipay-bg-transition="none"] .unipay-page-bg-image {
  transition: none !important;
}

@keyframes unipay-bg-soft-pulse {
  from { transform: translate3d(-50%, -50%, 0) scale(1); }
  to { transform: translate3d(-50%, -50%, 0) scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .unipay-page-bg-image {
    transition: none;
  }
}

/* NOTE STRICTE
   Il n'existe ici aucune variante @media max-width/orientation pour l'arrière-plan.
   Si le téléphone et l'ordinateur affichent différemment, il faut vérifier :
   1) que le même fichier est chargé dans les deux environnements ;
   2) qu'aucun ancien chat_background_single_engine.css n'est encore importé ;
   3) que le cache navigateur mobile a été vidé.
*/