/* =========================================================
   UNIPAY IMMERSIVE ENGINE V3 — GLOBAL NON-DESTRUCTIVE LAYER
   - Bouton plein écran haut-centre, symbole seul.
   - Etat immersif persistant entre les pages.
   - Scrollbar futuriste bleutée conservée.
   - Correction spéciale pub.html : empilement réel des blocs de 5.
   ========================================================= */
:root{
  --unipay-immersive-blue:#00eaff;
  --unipay-immersive-blue-2:#168cff;
  --unipay-immersive-bg:rgba(2,10,24,.72);
  --unipay-immersive-border:rgba(0,234,255,.58);
  --unipay-pub-scroll-height:100vh;
  --unipay-pub-block-step:520px;
}

html.unipay-immersive-state-active,
html.unipay-immersive-state-active body{
  min-width:100%;
  min-height:100%;
  background:#020817;
}

html.unipay-immersive-state-active body{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:none;
}

/* Objet central haut : enveloppe immersive conservée, icône IA-UP au centre. */
#unipayImmersiveToggle{
  position:fixed;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:44px;
  height:44px;
  z-index:2147483000;
  border-radius:50%;
  border:1px solid var(--unipay-immersive-border);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg, rgba(0,234,255,.22), rgba(22,140,255,.12)),
    rgba(0,10,25,.74);
  color:#dffcff;
  display:grid;
  place-items:center;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:
    0 0 12px rgba(0,234,255,.45),
    0 0 34px rgba(22,140,255,.18),
    inset 0 0 16px rgba(0,234,255,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:unipayImmersivePulse 1.65s ease-in-out infinite;
}
#unipayImmersiveToggle::before{
  content:"IA";
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-shadow:0 0 12px rgba(0,234,255,.85);
}
#unipayImmersiveToggle.unipay-ia-up-entry::before{content:"";}
#unipayImmersiveToggle .unipay-ia-up-entry-icon{width:25px;height:25px;fill:rgba(8,27,48,.42);stroke:#dffcff;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(0,234,255,.9))}
#unipayImmersiveToggle .unipay-ia-up-entry-icon circle{fill:#94fbff;stroke:#eaffff}
#unipayImmersiveToggle::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:inherit;
  border:1px solid rgba(0,234,255,.22);
  animation:unipayImmersiveRing 1.65s ease-out infinite;
  pointer-events:none;
}
html.unipay-immersive-state-active #unipayImmersiveToggle{
  border-color:rgba(41,255,180,.72);
  box-shadow:0 0 16px rgba(41,255,180,.45),0 0 40px rgba(0,234,255,.18),inset 0 0 16px rgba(41,255,180,.12);
}
html.unipay-immersive-state-active #unipayImmersiveToggle::before{
  content:"IA";
}
html.unipay-immersive-state-active #unipayImmersiveToggle.unipay-ia-up-entry::before{content:"";}
@keyframes unipayImmersivePulse{
  0%,100%{transform:translateX(-50%) scale(1); filter:brightness(1)}
  50%{transform:translateX(-50%) scale(1.08); filter:brightness(1.28)}
}
@keyframes unipayImmersiveRing{
  0%{opacity:.72; transform:scale(.82)}
  100%{opacity:0; transform:scale(1.42)}
}

/* Scrollbar futuriste bleutée, unique, sans forcer une double barre. */
html, body, *{
  scrollbar-width:auto;
  scrollbar-color:rgba(0,234,255,.85) rgba(2,12,30,.62);
}
::-webkit-scrollbar{width:13px;height:13px;}
::-webkit-scrollbar-track{
  background:linear-gradient(180deg, rgba(2,12,30,.42), rgba(4,18,45,.76));
  border-left:1px solid rgba(0,234,255,.08);
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(0,234,255,.92), rgba(22,140,255,.76));
  border:3px solid rgba(2,12,30,.86);
  border-radius:999px;
  box-shadow:0 0 12px rgba(0,234,255,.35);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(105,255,255,.98), rgba(0,174,255,.9));
}

/* =========================================================
   PATCH SPECIAL pub.html : empilement des groupes de 5 objets
   Le JS calcule les top exacts selon la hauteur réelle du viewport.
   Ici on empêche body 100vh/overflow hidden de bloquer le scroll.
   ========================================================= */
body.unipay-pub-page{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  height:auto !important;
  min-height:var(--unipay-pub-scroll-height, 4600px) !important;
  padding-bottom:120px !important;
}
html.unipay-immersive-state-active body.unipay-pub-page,
html.unipay-immersive-state-soft body.unipay-pub-page{
  height:auto !important;
  min-height:var(--unipay-pub-scroll-height, 4600px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
body.unipay-pub-page .news-container{
  box-sizing:border-box;
  max-width:calc(100vw - var(--margin-left, 80px) - 20px);
  transform:none;
}
html.unipay-immersive-state-active body.unipay-pub-page .news-container,
html.unipay-immersive-state-soft body.unipay-pub-page .news-container{
  max-width:calc(100vw - var(--margin-left, 80px) - 20px);
}
body.unipay-pub-page .news-overlay,
body.unipay-pub-page .expanded-card,
body.unipay-pub-page [role="dialog"]{
  z-index:2147482000;
}

@media (max-width:700px){
  #unipayImmersiveToggle{top:8px;width:40px;height:40px;}
  #unipayImmersiveToggle .unipay-ia-up-entry-icon{width:23px;height:23px;}
  ::-webkit-scrollbar{width:10px;height:10px;}
  body.unipay-pub-page .news-container{
    max-width:calc(100vw - 16px) !important;
    left:8px !important;
  }
}

/* =========================================================
   UNIPAY IMMERSIVE ENGINE V4 — micro-correctifs finaux
   - pub.html : boutons PREV/NEXT DATA toujours au-dessus.
   - pub.html : masque déconnexion + toggle debug uniquement sur cette page.
   - Fond global quadrillé bleuté maintenu en navigateur et fullscreen.
   ========================================================= */
:root{
  --unipay-grid-cyan: rgba(0,234,255,.085);
  --unipay-grid-blue: rgba(22,140,255,.055);
  --unipay-grid-bg: #020817;
}

html{
  background-color: var(--unipay-grid-bg) !important;
  background-image:
    radial-gradient(circle at 50% 18%, rgba(0,234,255,.115), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(22,140,255,.095), transparent 30%),
    linear-gradient(0deg, var(--unipay-grid-cyan) 1px, transparent 1px),
    linear-gradient(90deg, var(--unipay-grid-blue) 1px, transparent 1px) !important;
  background-size:100% 100%, 100% 100%, 42px 42px, 42px 42px !important;
  background-attachment:fixed !important;
}

html.unipay-immersive-state-active,
html.unipay-immersive-state-soft{
  background-color: var(--unipay-grid-bg) !important;
  background-image:
    radial-gradient(circle at 50% 18%, rgba(0,234,255,.145), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(22,140,255,.115), transparent 30%),
    linear-gradient(0deg, rgba(0,234,255,.105) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,140,255,.075) 1px, transparent 1px) !important;
  background-size:100% 100%, 100% 100%, 42px 42px, 42px 42px !important;
  background-attachment:fixed !important;
}

/* pub.html — garder les commandes PREV/NEXT devant les blocs et devant les fonds. */
body.unipay-pub-page .control-panel{
  position:fixed !important;
  bottom:22px !important;
  left:var(--margin-left, 80px) !important;
  width:calc(100vw - var(--margin-left, 80px) - 24px) !important;
  z-index:2147482600 !important;
  pointer-events:none !important;
  isolation:isolate !important;
}
body.unipay-pub-page .control-panel .nav-btn,
body.unipay-pub-page .nav-btn{
  position:relative !important;
  z-index:2147482601 !important;
  pointer-events:auto !important;
  transform:translateZ(0);
  box-shadow:
    0 0 18px rgba(0,234,255,.44),
    inset 0 0 18px rgba(0,234,255,.11) !important;
}
body.unipay-pub-page .control-panel .nav-btn:hover,
body.unipay-pub-page .nav-btn:hover{
  z-index:2147482602 !important;
}

/* pub.html — masquer uniquement les objets techniques non désirés sur cette page. */
body.unipay-pub-page #dashboardDebugBtn,
body.unipay-pub-page #dashboardDebugPanel,
body.unipay-pub-page .dashboard-debug-btn,
body.unipay-pub-page .dashboard-debug-panel,
body.unipay-pub-page #unipay-universal-logout,
body.unipay-pub-page .unipay-logout-btn,
body.unipay-pub-page [data-unipay-logout],
body.unipay-pub-page [data-action="logout"]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (max-width:700px){
  body.unipay-pub-page .control-panel{
    left:12px !important;
    width:calc(100vw - 24px) !important;
    bottom:16px !important;
  }
  body.unipay-pub-page .nav-btn{
    width:128px !important;
    height:38px !important;
    font-size:.68rem !important;
    letter-spacing:1.2px !important;
  }
}



/* =========================================================
   UNIPAY IMMERSIVE ENGINE V6 — anti-double quadrillage + pub stable
   - Un seul calque quadrillé global, jamais doublé en fullscreen.
   - Ne force plus position:relative sur tous les enfants du body.
   - pub.html garde la taille originale de ses 10 blocs, sans scale ni contraction.
   ========================================================= */
:root{
  --unipay-grid-bg:#020817;
  --unipay-grid-layer-size:44px;
  --unipay-grid-layer-opacity:.46;
}

html,
html.unipay-immersive-state-active,
html.unipay-immersive-state-soft{
  background-color:var(--unipay-grid-bg) !important;
  background-image:none !important;
  background-attachment:fixed !important;
}

body,
html.unipay-immersive-state-active body,
html.unipay-immersive-state-soft body{
  background-color:transparent !important;
  background-image:none !important;
}

/* Calque unique du fond : il reste en navigateur et fullscreen sans se doubler. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:var(--unipay-grid-layer-opacity);
  background:
    radial-gradient(circle at 50% 16%, rgba(0,234,255,.16), transparent 34%),
    radial-gradient(circle at 86% 76%, rgba(22,140,255,.11), transparent 32%),
    linear-gradient(0deg, rgba(0,234,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,140,255,.095) 1px, transparent 1px);
  background-size:100% 100%,100% 100%,var(--unipay-grid-layer-size) var(--unipay-grid-layer-size),var(--unipay-grid-layer-size) var(--unipay-grid-layer-size);
  background-position:center center;
  filter:drop-shadow(0 0 8px rgba(0,234,255,.10));
}

html:fullscreen body::before,
html.unipay-immersive-state-active body::before,
html.unipay-immersive-state-soft body::before{
  opacity:.50;
  background-size:100% 100%,100% 100%,44px 44px,44px 44px;
}

/* Important : ne jamais repositionner tous les enfants du body.
   Cela cassait pub.html en transformant les blocs absolute en relative. */
body > *:not(script):not(style):not(link):not(meta):not(title){
  z-index:auto;
}

/* pub.html : les groupes de 5 objets gardent leur taille de référence. */
body.unipay-pub-page .news-container,
html.unipay-pub-responsive body.unipay-pub-page .news-container,
html.unipay-immersive-state-active body.unipay-pub-page .news-container,
html.unipay-immersive-state-soft body.unipay-pub-page .news-container{
  position:absolute !important;
  left:var(--margin-left, 80px) !important;
  width:calc(100vw - var(--margin-left, 80px) - 20px) !important;
  height:calc(100vh - var(--margin-top, 60px) - 100px) !important;
  min-height:520px !important;
  max-width:none !important;
  transform:none !important;
  transform-origin:top left !important;
  margin:0 !important;
  display:grid !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

body.unipay-pub-page .news-container.layout-initial,
html.unipay-pub-responsive body.unipay-pub-page .news-container.layout-initial{
  grid-template-columns:1fr 2fr 1fr !important;
  grid-template-rows:1fr 1fr !important;
}

body.unipay-pub-page .news-section,
html.unipay-pub-responsive body.unipay-pub-page .news-section{
  min-width:0 !important;
  min-height:0 !important;
  transform:none;
}

body.unipay-pub-page{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  height:auto !important;
  min-height:var(--unipay-pub-scroll-height, 6200px) !important;
  padding-bottom:130px !important;
}

@media (max-width:700px){
  body.unipay-pub-page .news-container,
  html.unipay-pub-responsive body.unipay-pub-page .news-container{
    left:8px !important;
    width:calc(100vw - 16px) !important;
    min-height:500px !important;
  }
}


/* =========================================================
   CORRECTIF 20260613E — FIN DES RECALCULS VISUELS EN FULLSCREEN
   Les animations décoratives restent possibles, mais les conteneurs de layout
   ne doivent plus animer top/left/width/height en mobile fullscreen.
   ========================================================= */
html.unipay-native-fullscreen #unipayImmersiveToggle,
html.unipay-immersive-state-active #unipayImmersiveToggle{
  animation:none !important;
}
html.unipay-native-fullscreen #unipayImmersiveToggle::after,
html.unipay-immersive-state-active #unipayImmersiveToggle::after{
  animation:none !important;
  opacity:.28 !important;
  transform:none !important;
}
html.unipay-native-fullscreen.unipay-page-pub body.unipay-pub-page .news-container,
html.unipay-native-fullscreen.unipay-page-pub body.unipay-pub-page .control-panel{
  transition:none !important;
}
html.unipay-native-fullscreen.unipay-page-pub body.unipay-pub-page .news-section{
  transition:opacity .18s ease, box-shadow .24s ease, border-color .24s ease !important;
}

/* =========================================================
   GARDE IA-UP — l'objet central reste visible sur toutes les pages.
   Le plein écran est accessible uniquement depuis son panneau immersif.
   ========================================================= */
#unipayImmersiveToggle.unipay-immersive-toggle,
#unipayImmersiveToggle[data-unipay-immersive-entry="html"],
#unipayImmersiveToggle[data-unipay-immersive-entry="js-fallback"]{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  position:fixed !important;
  top:10px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:2147483600 !important;
  pointer-events:auto !important;
}
html.unipay-native-fullscreen #unipayImmersiveToggle.unipay-immersive-toggle,
html.unipay-root-fullscreen-active #unipayImmersiveToggle.unipay-immersive-toggle,
html.unipay-immersive-state-active #unipayImmersiveToggle.unipay-immersive-toggle{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:2147483600 !important;
}

/* Transition de route commune aux navigateurs, PWA et WebView. Elle anime
   uniquement l'opacité : aucune transformation du body n'est appliquée afin
   de ne pas créer de nouveau contexte pour les éléments positionnés fixed. */
@view-transition{
  navigation:auto;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.22s;
  animation-timing-function:ease-in-out;
}
html.unipay-route-entering body{
  opacity:0;
}
html.unipay-route-ready body{
  opacity:1;
  transition:opacity .22s ease-out;
}
html.unipay-route-leaving body{
  opacity:0;
  transition:opacity .16s ease-in;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  html.unipay-route-entering body,
  html.unipay-route-ready body,
  html.unipay-route-leaving body{
    transition:none !important;
  }
}

@media (max-width:680px){
  html.unipay-native-fullscreen #unipayImmersiveToggle.unipay-immersive-toggle,
  html.unipay-root-fullscreen-active #unipayImmersiveToggle.unipay-immersive-toggle,
  html:fullscreen #unipayImmersiveToggle.unipay-immersive-toggle{
    top:calc(env(safe-area-inset-top, 0px) + 7px) !important;
    left:6px !important;
    width:38px !important;
    height:38px !important;
    transform:none !important;
    z-index:2147483600 !important;
  }
}

/* Barre basse et objets de navigation : finition verre transparent commune.
   La spécificité élevée conserve ces règles face aux feuilles de page et au
   shell mobile chargés dynamiquement. */
html #fut-bottombar,
html .fut-bottombar,
html .fut-bottom-bar,
html .bottom-bar,
html .bottombar,
html .mobile-bottom-bar{
  background:linear-gradient(135deg,rgba(4,18,39,.34),rgba(4,32,55,.22) 55%,rgba(32,12,68,.28)) !important;
  border:1px solid rgba(111,241,255,.64) !important;
  border-radius:22px !important;
  box-shadow:0 0 0 1px rgba(112,231,255,.14) inset,0 0 22px rgba(0,224,255,.26),0 14px 34px rgba(0,0,0,.28) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  isolation:isolate;
}
html #fut-bottombar::before,
html .fut-bottombar::before,
html .fut-bottom-bar::before,
html .bottom-bar::before,
html .bottombar::before,
html .mobile-bottom-bar::before{
  content:"";
  position:absolute;
  inset:1px;
  border:1px solid rgba(177,250,255,.2);
  border-radius:inherit;
  pointer-events:none;
  opacity:.75;
  z-index:1;
}
html #fut-bottombar > *,
html .fut-bottombar > *,
html .fut-bottom-bar > *,
html .bottom-bar > *,
html .bottombar > *,
html .mobile-bottom-bar > *{
  position:relative;
  z-index:2;
}
html #fut-bottombar .fut-bottom-item,
html .fut-bottombar .fut-bottom-item,
html .fut-bottom-bar .fut-bottom-item,
html .bottom-bar .fut-bottom-item,
html .bottombar .fut-bottom-item,
html .mobile-bottom-bar .fut-bottom-item{
  min-height:58px !important;
  min-width:58px !important;
  margin:4px 3px !important;
  padding:7px 10px !important;
  border:1px solid rgba(135,238,255,.34) !important;
  border-radius:15px !important;
  background:rgba(4,21,43,.22) !important;
  box-shadow:0 0 0 1px rgba(125,245,255,.08) inset,0 0 12px rgba(0,201,255,.08) !important;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease !important;
}
html #fut-bottombar .fut-bottom-item:hover,
html #fut-bottombar .fut-bottom-item:focus-visible,
html #fut-bottombar .fut-bottom-item.active,
html .fut-bottombar .fut-bottom-item:hover,
html .fut-bottombar .fut-bottom-item:focus-visible,
html .fut-bottombar .fut-bottom-item.active,
html .fut-bottom-bar .fut-bottom-item:hover,
html .fut-bottom-bar .fut-bottom-item:focus-visible,
html .fut-bottom-bar .fut-bottom-item.active,
html .bottom-bar .fut-bottom-item:hover,
html .bottom-bar .fut-bottom-item:focus-visible,
html .bottom-bar .fut-bottom-item.active{
  border-color:rgba(157,255,255,.9) !important;
  background:rgba(13,80,104,.3) !important;
  box-shadow:0 0 16px rgba(0,229,255,.3),0 0 0 1px rgba(172,255,255,.22) inset !important;
}
html #fut-bottombar .fut-bottom-item svg,
html #fut-bottombar .fut-bottom-item .fut-icon,
html .fut-bottombar .fut-bottom-item svg,
html .fut-bottombar .fut-bottom-item .fut-icon,
html .fut-bottom-bar .fut-bottom-item svg,
html .fut-bottom-bar .fut-bottom-item .fut-icon,
html #fut-sidebar .fut-item .fut-icon,
html .fut-sidebar .fut-item .fut-icon{
  box-sizing:border-box;
  padding:3px;
  border:1px solid rgba(144,244,255,.5) !important;
  border-radius:10px;
  filter:drop-shadow(0 0 5px rgba(0,234,255,.3));
}
html #fut-sidebar .fut-item,
html .fut-sidebar .fut-item{
  border-color:rgba(144,244,255,.42) !important;
  box-shadow:0 0 0 1px rgba(125,245,255,.07) inset,0 0 13px rgba(0,201,255,.1) !important;
}
@media (max-width:680px){
  html #fut-bottombar,
  html .fut-bottombar,
  html .fut-bottom-bar,
  html .bottom-bar,
  html .bottombar,
  html .mobile-bottom-bar{
    min-height:66px !important;
    border-radius:18px !important;
  }
  html #fut-bottombar .fut-bottom-item,
  html .fut-bottombar .fut-bottom-item,
  html .fut-bottom-bar .fut-bottom-item,
  html .bottom-bar .fut-bottom-item,
  html .bottombar .fut-bottom-item,
  html .mobile-bottom-bar .fut-bottom-item{
    min-height:52px !important;
    min-width:52px !important;
    margin:3px 2px !important;
    padding:6px 8px !important;
    border-radius:13px !important;
  }
}

/* Alternance de l'emblème IA-UP et de l'icône historique du portail. */
#unipayImmersiveToggle.unipay-ia-up-entry{position:fixed;isolation:isolate}
#unipayImmersiveToggle .unipay-ia-up-entry-emblem,#unipayImmersiveToggle .unipay-ia-up-entry-icon{position:absolute;inset:50% auto auto 50%;width:27px;height:27px;object-fit:contain;transform-origin:center;pointer-events:none}
#unipayImmersiveToggle .unipay-ia-up-entry-icon{animation:up-entry-old 8s ease-in-out infinite}
#unipayImmersiveToggle .unipay-ia-up-entry-emblem{animation:up-entry-new 8s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(91,219,255,.8))}
@keyframes up-entry-old{0%,40%,100%{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(1)}50%,90%{opacity:0;transform:translate(-50%,-50%) rotate(180deg) scale(.5)}}
@keyframes up-entry-new{0%,40%,100%{opacity:0;transform:translate(-50%,-50%) rotate(-180deg) scale(.5)}50%,90%{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(1)}}
@media(prefers-reduced-motion:reduce){#unipayImmersiveToggle .unipay-ia-up-entry-icon{display:none}#unipayImmersiveToggle .unipay-ia-up-entry-emblem{animation:none;opacity:1;transform:translate(-50%,-50%)}}