/* Shell UniPay de la page Université.
   Les composants visuels viennent de chat.html ; ces règles ne corrigent que
   les réserves propres à cette page afin de ne pas recouvrir son portail. */

body.unipay-page-university {
  --unipay-university-sidebar-width: 82px;
  --unipay-university-bottom-height: 92px;
  --fut-menu-height: 88px;
  --fut-bottom-height: 76px;
  padding-top: calc(var(--fut-menu-height) + 8px);
}

/* Les preuves bancaires peuvent contenir des identifiants longs sans espace. */
.receipt-preview,
.receipt-preview p {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.unipay-page-university #fut-sidebar {
  display: flex !important;
  flex-direction: column !important;
  top: calc(var(--unipay-topbar-measured, var(--fut-menu-height, 88px)) + 10px) !important;
  bottom: calc(var(--unipay-bottombar-measured, var(--fut-bottom-height, 76px)) + 14px) !important;
  height: auto !important;
  isolation: isolate !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 100040 !important;
}

body.unipay-page-university #fut-bottombar {
  bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  left: 50vw !important;
  right: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  isolation: isolate !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 100040 !important;
}

/* Une modale active est un dialogue prioritaire : ses actions restent au-dessus
   des rails fixes, y compris sur les petits écrans et avec la zone sûre PWA. */
body.unipay-page-university #modalBackdrop.modal-backdrop.show {
  z-index: 100100 !important;
}

body.unipay-page-university > header {
  isolation: isolate !important;
  position: relative !important;
  top: auto !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 100050 !important;
}

/* Le titre global est fourni par unipay-menu-up.js. Le header universitaire
   devient une barre secondaire compacte pour les statuts et la connexion. */
body.unipay-page-university > header {
  display: none !important;
}

body.unipay-page-university > header .brand {
  display: none !important;
}

body.unipay-page-university > header .nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 12px !important;
}

body.unipay-page-university > header .phase5-university-actions {
  display: none !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}

body.unipay-page-university main.app .phase5-university-main-card {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  padding: 12px 14px;
  box-sizing: border-box;
  border: 1px solid rgba(121, 234, 242, .24);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(5, 20, 42, .78), rgba(27, 15, 65, .62));
  box-shadow: inset 0 0 24px rgba(65, 231, 255, .06), 0 12px 28px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 2;
}

body.unipay-page-university > header .nav,
body.unipay-page-university > main.app {
  width: min(1440px, calc(100% - var(--unipay-university-sidebar-width) - 42px)) !important;
  margin-left: calc(var(--unipay-university-sidebar-width) + 24px) !important;
  margin-right: 18px !important;
}

body.unipay-page-university > main.app {
  position: relative;
  z-index: 1;
  padding-bottom: calc(var(--unipay-university-bottom-height) + 28px) !important;
  scroll-padding-bottom: calc(var(--unipay-university-bottom-height) + 28px);
}

/* Sur ordinateur, le contrôle immersif occupe le rail libre à gauche du
   bandeau. Il reste ainsi indépendant de la largeur dynamique du menu. */
@media (min-width: 601px) {
  html[class][class] body.unipay-page-university #unipayImmersiveToggle.unipay-immersive-toggle {
    left: 42px !important;
  }
}

body.unipay-page-university > footer {
  margin-left: var(--unipay-university-sidebar-width);
  padding-bottom: calc(var(--unipay-university-bottom-height) + 28px);
}

@media (max-width: 880px) {
  html.unipay-page-universit {
    overflow-x: hidden !important;
  }

  body.unipay-page-university {
    /* Le routeur mobile commun rend le rail à 64 px avec un retrait de
       12 px. Réserver 72 px garantit un espace lisible de 8 px. */
    --unipay-university-sidebar-width: 72px;
    --unipay-university-bottom-height: 82px;
    --fut-menu-height: 58px;
    padding-top: calc(var(--fut-menu-height) + 8px);
    overflow-x: hidden !important;
  }

  /* Le bouton immersif reste utile sur la page Université, mais ne doit pas
     recouvrir le titre global. Il occupe l'axe central réservé aux contrôles. */
  html[class][class] body.unipay-page-university #unipayImmersiveToggle.unipay-immersive-toggle {
    left: 50% !important;
    right: auto !important;
    top: 8px !important;
    transform: translateX(-50%) !important;
  }

  body.unipay-page-university #fut-sidebar {
    background: linear-gradient(180deg, rgba(3, 8, 23, .9), rgba(3, 8, 23, .68)) !important;
    border: 1px solid rgba(0, 245, 255, .12) !important;
    border-radius: 0 18px 18px 0 !important;
    top: 66px !important;
    box-shadow: 8px 0 24px rgba(0, 0, 0, .28) !important;
    display: flex !important;
    box-sizing: border-box !important;
    left: 4px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 4px 2px !important;
    gap: 4px !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
  }

  body.unipay-page-university #fut-sidebar .fut-sidebar-list {
    width: 100% !important;
    gap: 4px !important;
  }

  body.unipay-page-university #fut-sidebar .fut-item {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  body.unipay-page-university #fut-sidebar .fut-icon {
    width: 20px !important;
    height: 20px !important;
  }

  /* La barre basse est un contrôle global : son axe doit rester celui du
     viewport, même lorsque le contenu principal réserve le rail latéral. */
  body.unipay-page-university #fut-bottombar {
    background: linear-gradient(180deg, rgba(4, 8, 22, .98), rgba(2, 5, 15, .98)) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .58) !important;
    left: 50vw !important;
    right: auto !important;
    width: min(92vw, 360px) !important;
    max-width: calc(100vw - 16px) !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    padding: 4px 6px !important;
  }

  body.unipay-page-university #fut-bottombar .fut-bottom-list {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.unipay-page-university #fut-bottombar .fut-bottom-item {
    flex: 0 0 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    min-width: 42px !important;
    padding: 6px !important;
    width: 42px !important;
  }

  body.unipay-page-university #fut-bottombar .fut-bottom-item svg,
  body.unipay-page-university #fut-bottombar .fut-bottom-item .fut-icon {
    height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    width: 22px !important;
  }

  body.unipay-page-university > header .nav,
  body.unipay-page-university > main.app {
    width: calc(100% - var(--unipay-university-sidebar-width) - 24px) !important;
    max-width: none !important;
    margin-left: calc(var(--unipay-university-sidebar-width) + 12px) !important;
    margin-right: 12px !important;
  }

  body.unipay-page-university > main.app {
    padding-bottom: calc(var(--unipay-university-bottom-height) + 24px) !important;
    scroll-padding-bottom: calc(var(--unipay-university-bottom-height) + 24px);
  }

  body.unipay-page-university > footer {
    margin-left: calc(var(--unipay-university-sidebar-width) + 8px);
    padding-right: 8px;
    padding-bottom: calc(var(--unipay-university-bottom-height) + 24px);
  }
}

/* Correctif responsive page Université : les commandes de la barre immersive
   restent rendues en mode mobile normal comme en plein écran. Certains
   modules historiques masquaient les SVG après plusieurs changements de vue. */
body.unipay-page-university #unipay-menu-up,
html.unipay-native-fullscreen body.unipay-page-university #unipay-menu-up,
html.unipay-root-fullscreen-active body.unipay-page-university #unipay-menu-up,
html:fullscreen body.unipay-page-university #unipay-menu-up {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.unipay-page-university #unipay-menu-up .unipay-menu-up-icon,
body.unipay-page-university #unipay-menu-up .unipay-menu-up-arrow,
html.unipay-native-fullscreen body.unipay-page-university #unipay-menu-up .unipay-menu-up-icon,
html.unipay-root-fullscreen-active body.unipay-page-university #unipay-menu-up .unipay-menu-up-icon,
html:fullscreen body.unipay-page-university #unipay-menu-up .unipay-menu-up-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* La vitrine institutionnelle est un bloc de flux isolé : ses marges ne
   fusionnent plus avec les sections voisines lors des clics/navigation. */
body.unipay-page-university #institutionPresentationSection.uni-inst {
  display: flow-root;
  margin-block: 24px 32px !important;
  contain: layout style;
}
body.unipay-page-university #institutionPresentationSection.uni-inst[hidden] {
  display: none !important;
  margin: 0 !important;
}

/* Le routeur d'orientation charge ses règles après le HTML. Ces sélecteurs
   conservent la réserve du rail pour la zone active sur téléphone. */
html.unipay-page-universit.unipay-interface-mobile body.unipay-page-university main.app.unipay-active-main {
  width: calc(100% - var(--unipay-university-sidebar-width) - 24px) !important;
  max-width: none !important;
  margin-left: calc(var(--unipay-university-sidebar-width) + 12px) !important;
  margin-right: 12px !important;
  padding-bottom: calc(var(--unipay-university-bottom-height) + 24px) !important;
}

@media (max-width: 600px) {
  /* Les modales restent dans la zone utile situee entre le rail et la barre
     basse. Elles ne font pas partie du contenu metier zoome a 50 %. */
  html[class][class] body.unipay-page-university #modalBackdrop.modal-backdrop {
    align-items: flex-start !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    overflow: auto !important;
    padding: 68px 10px calc(var(--unipay-university-bottom-height) + 14px)
      calc(var(--unipay-university-sidebar-width) + 10px) !important;
  }

  html[class][class] body.unipay-page-university #modalContent.modal {
    border-radius: 24px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: calc(100dvh - var(--unipay-university-bottom-height) - 92px) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    scroll-padding-bottom: 24px !important;
    padding: 18px !important;
    width: 100% !important;
  }

  html[class][class] body.unipay-page-university .receipt-preview > div:first-child {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  html[class][class] body.unipay-page-university .receipt-preview > div:first-child strong:last-child {
    overflow-wrap: normal !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }

  html[class][class] body.unipay-page-university > header {
    background: rgba(3, 7, 20, .98) !important;
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    position: relative !important;
    top: auto !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  html[class][class] body.unipay-page-university > header .nav {
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    width: 100% !important;
  }

  html[class][class] body.unipay-page-university > header .brand {
    flex: 0 0 auto !important;
    gap: 5px !important;
    font-size: 10px !important;
    letter-spacing: .03em !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  html[class][class] body.unipay-page-university > header .logo {
    border-radius: 9px !important;
    height: 30px !important;
    width: 30px !important;
  }

  html[class][class] body.unipay-page-university > header .phase5-university-actions {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-left: 0 !important;
  }

  html[class][class] body.unipay-page-university > header .phase5-session-chip {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 28px !important;
    font-size: 0 !important;
    justify-content: center !important;
    line-height: 1.1 !important;
    max-width: 28px !important;
    min-height: 26px !important;
    overflow: hidden !important;
    padding: 3px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[class][class] body.unipay-page-university > header #phase5PrincipalSessionChip::before,
  html[class][class] body.unipay-page-university > header #phase5BankSessionChip::before {
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
  }

  html[class][class] body.unipay-page-university > header #phase5PrincipalSessionChip::before {
    content: "P";
  }

  html[class][class] body.unipay-page-university > header #phase5BankSessionChip::before {
    content: "B";
  }

  html[class][class] body.unipay-page-university > header .btn {
    font-size: 9px !important;
    line-height: 1 !important;
    padding: 7px 9px !important;
    white-space: nowrap !important;
  }

  html[class][class] body.unipay-page-university main.app .phase5-university-main-card {
    align-items: stretch !important;
    flex-direction: row !important;
    justify-content: center !important;
    margin: 0 0 14px !important;
    padding: 8px !important;
    gap: 6px !important;
  }

  html[class][class] body.unipay-page-university main.app .phase5-session-chip {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 5px 7px !important;
    font-size: .64rem !important;
  }

  html[class][class] body.unipay-page-university main.app .phase5-university-main-card .btn {
    flex: 0 0 auto !important;
  }

  body.unipay-page-university #managerPanel {
    /* Cette valeur est exprimée dans le contexte zoomé à 50 % : 132 px
       réservent donc 66 px physiques sous le bandeau fixe de 58 px. */
    scroll-margin-top: 132px;
    /* Le panel est dans un contexte zoomé à 50 %. Cette hauteur logique
       correspond à la zone physique comprise entre le header et la barre
       basse. Le contenu métier défile donc sans passer sous les contrôles. */
    max-height: calc(200dvh - 328px);
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 52px;
    scroll-padding-bottom: 52px;
  }

  /* Mise en page mobile native : aucune mise à l'échelle artificielle.
     Les dimensions tactiles et typographiques sont gérées par les composants. */
  body.unipay-page-university > main.app,
  html.unipay-page-universit.unipay-interface-mobile body.unipay-page-university main.app.unipay-active-main {
    zoom: 1;
    width: calc(100% - var(--unipay-university-sidebar-width) - 24px) !important;
    max-width: none !important;
    margin-left: calc(var(--unipay-university-sidebar-width) + 12px) !important;
    margin-right: 12px !important;
    padding-bottom: calc(var(--unipay-university-bottom-height) + 24px) !important;
    scroll-padding-bottom: calc(var(--unipay-university-bottom-height) + 24px);
  }

  /* Placer le bouton plein écran dans l'espace réservé entre la marque et
     les indicateurs compacts évite tout chevauchement sur 320–600 px. */
  html[class][class] body.unipay-page-university #unipayImmersiveToggle.unipay-immersive-toggle {
    height: 38px !important;
    left: 50% !important;
    right: auto !important;
    top: 8px !important;
    transform: translateX(-50%) !important;
    width: 38px !important;
  }

  html[class][class] body.unipay-page-university #unipayImmersiveToggle.unipay-immersive-toggle::before {
    font-size: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.unipay-page-university #fut-sidebar .fut-item,
  body.unipay-page-university #fut-bottombar .fut-bottom-item {
    transition: none !important;
  }
}

/* La fin du parcours universitaire appartient au document principal :
   la barre commune ne doit pas créer un second pied de page flottant ni une
   réserve morte après le dernier contenu. */
body.unipay-page-university > main.app {
  padding-bottom: 28px !important;
  scroll-padding-bottom: 28px !important;
}
body.unipay-page-university > footer {
  padding-bottom: 24px !important;
}
body.unipay-page-university #fut-bottombar {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(92vw, 520px) !important;
  margin: 24px auto 12px !important;
}

/* Public university pages expose the real catalogue and verified role
   entries. The former local demonstration surface must never reappear after
   a session refresh or a modal rerender. */
body.unipay-page-university > main.app > #demo,

.u4-finance-overview { margin: 0 0 18px; }
.u4-finance-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.u4-finance-kpis article, .u4-finance-currency { min-width: 0; padding: 12px; border: 1px solid rgba(114,225,255,.18); border-radius: 13px; background: rgba(255,255,255,.045); }
.u4-finance-kpis span, .u4-finance-currency span { display: block; color: var(--muted); font-size: .78rem; }
.u4-finance-kpis strong { display: block; margin-top: 5px; color: #fff; font-size: 1.08rem; }
.u4-finance-currencies { display: grid; gap: 8px; margin-bottom: 14px; }
.u4-finance-currency { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.u4-finance-currency strong { color: #8ef4ff; }

/* La navigation basse appartient au shell global. Cette règle finale neutralise
   les anciennes variantes universitaires sans modifier la mise en page métier. */
body.unipay-page-university #fut-bottombar {
  position: fixed !important;
  inset: auto auto var(--fut-bottombar-bottom-offset, 12px) 50% !important;
  width: max-content !important;
  max-width: calc(100vw - 20px) !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(105, 255, 231, .48) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.015) 40%, rgba(0,0,0,.13)),
    linear-gradient(100deg, rgba(0,240,255,.13), rgba(3,12,24,.58) 46%, rgba(255,46,124,.12)),
    repeating-linear-gradient(108deg, transparent 0 13px, rgba(0,238,255,.12) 15px 16px, transparent 18px 31px) !important;
  background-size: 100% 100%, 100% 100%, 220% 100% !important;
  animation: unipayBottomMaterialScan 3.2s linear infinite !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 18px rgba(0,231,255,.27), 0 0 24px rgba(255,53,132,.10) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
}

body.unipay-page-university #fut-bottombar .fut-bottom-list {
  width: max-content !important;
  max-width: 100% !important;
  justify-content: center !important;
  gap: 4px !important;
  overflow: hidden !important;
}

body.unipay-page-university #fut-bottombar .fut-bottom-item {
  flex: 0 0 50px !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
}

@media (max-width: 680px) {
  body.unipay-page-university #fut-bottombar {
    right: 24px !important;
    left: 24px !important;
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    transform: none !important;
  }
  body.unipay-page-university #fut-bottombar .fut-bottom-list { gap: 3px !important; }
  body.unipay-page-university #fut-bottombar .fut-bottom-item {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}
.u4-finance-overview .table-wrap { overflow-x: auto; }
@media (max-width: 620px) {
  .u4-finance-kpis { grid-template-columns: 1fr; }
  .u4-finance-currency { align-items: flex-start; flex-direction: column; gap: 4px; }
}