/* ==========================================================================
   ITER 159 (JF APEX FINAL v6) — RUBAN MONOLITHIQUE 1280PX SCELLÉ
   --sf-container-width : variable commune Header + Portal.
   1280px = largeur actuelle du Header (max-w-7xl Tailwind) — la plus PRO.
   ========================================================================== */
:root {
  --sf-container-width: 1280px;
  /* alias rétrocompat */
  --sf-global-bg-width: 1280px;
}

/* html + body BLANCS : peignent les zones latérales hors colonne */
html, body {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Wrappers de page TOUS transparents — sinon ils masquent la colonne d'image */
#root,
.sf-page,
.sf-main-layout,
.sf-content-wrapper,
.App,
.app-root,
[data-page="superadmin"] {
  background: transparent !important;
  background-color: transparent !important;
}

#root > div:not([data-card]):not([class*="rounded"]) {
  background: transparent !important;
  background-color: transparent !important;
}

/* ==========================================================================
   HEADER fixed scellé sur 1280px centré (au lieu de la pleine largeur)
   iter 159 (JF) — Suppression de toute box-shadow pour rendu flat.
   ========================================================================== */
html body header.geek-o-rama-header {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: var(--sf-container-width, 1280px) !important;
  max-width: var(--sf-container-width, 1280px) !important;
  margin: 0 auto !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* iter 159 (JF) — Footer flat, miroir du Header (no shadow) */
html body footer[data-testid="site-footer"] {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* iter 159 (JF) — TOUS les enfants du Header et du Footer en flat
   (les boutons internes shadow-lg/shadow-md de Tailwind sont neutralisés). */
html body header.geek-o-rama-header *,
html body footer[data-testid="site-footer"] * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

@media (max-width: 1279px) {
  html body header.geek-o-rama-header {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   PORTAL — colonne centrale 1280px (mêmes bords pixel-perfect que le Header)
   ========================================================================== */
html body > .sf-global-bg-fixed {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: var(--sf-container-width, 1280px) !important;
  max-width: var(--sf-container-width, 1280px) !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  display: block !important;
}

@media (max-width: 1279px) {
  html body > .sf-global-bg-fixed {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    transform: none !important;
  }
}

#root {
  position: relative !important;
  z-index: 1 !important;
}

html body > .sf-global-bg-fixed > .sf-global-bg-img,
html body > .sf-global-bg-fixed > img.sf-deco-clamped {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
  transform: none !important;
  pointer-events: none !important;
}