/* 
 * PRIORITÉ ABSOLUE - Fond d'écran SuperAdmin
 * Ce fichier doit être chargé EN DERNIER pour override tous les autres
 * Seule l'image uploadée dans SuperAdmin fait foi - PAS DE FOND BLANC
 */

/* PAS DE FOND BLANC - Supprimé à la demande du client */
/* L'image uploadée est directement visible sur fond transparent */

/* Image de fond uploadée via SuperAdmin */
#sf-bg-image {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1280px;
  height: 100vh;
  /* FORCE l'image de fond directement - contournement API branding.css */
  background-image: url('/uploads/1762534548201_riviere1.jpeg.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  background-size: contain !important;
  opacity: 1 !important; /* Opacité à 100% pour voir l'image clairement */
  z-index: -1;
  pointer-events: none;
}

/* Fallback si l'élément n'existe pas */
body:not(:has(#sf-bg-image))::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1280px;
  height: 100vh;
  background: var(--sf-bg-url) no-repeat top center;
  background-size: contain !important;
  opacity: 1 !important;
  z-index: -1;
  pointer-events: none;
}

/* OVERRIDE FORCÉ - Annuler tous les autres backgrounds */
/* PAS DE FOND BLANC - L'image est directement visible */
html,
body,
#root,
.App,
main {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Force transparent sur html spécifiquement */
html {
  background: transparent !important;
  background-color: transparent !important;
}

/* Annuler spécifiquement les fonds forcés par d'autres CSS */
body::before:not(:has(#sf-bg-plate)),
body::after:not(:has(#sf-bg-image)) {
  /* Ces pseudo-éléments sont gérés ci-dessus pour le fallback */
}

/* Desktop : Largeur fixe 1280px, contenu défile */
@media (min-width: 1024px) {
  #sf-bg-image {
    width: 1280px;
    max-width: 1280px;
  }
  
  body:not(:has(#sf-bg-image))::after {
    width: 1280px;
    max-width: 1280px;
  }
}

/* Mobile : Responsive avec max 1280px */
@media (max-width: 1023px) {
  #sf-bg-image,
  body:not(:has(#sf-bg-image))::after {
    width: 100%;
    max-width: 1280px;
  }
}