/* =========================================================
   QUARZEO ADMIN V12.4
   Navigation native conservée — aucun remplacement du DOM
   ========================================================= */

/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

#app.app:not(.hidden) > .sidebar{
  border-right:0 !important;
  overflow:hidden !important;
}

#app.app:not(.hidden) #nav{
  flex:1 1 auto !important;
  min-height:0 !important;

  padding:0 3px 25px !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

#app.app:not(.hidden) #nav::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}

#app.app:not(.hidden) #nav .navGroup{
  margin:0 0 14px !important;
}

#app.app:not(.hidden) #nav .navGroup > span{
  display:block !important;

  margin:0 9px 7px !important;

  color:#6c8fa2 !important;

  font-size:8px !important;
  font-weight:950 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}

#app.app:not(.hidden) #nav a[data-page],
#app.app:not(.hidden) #nav a[data-qza-route]{
  position:relative !important;

  display:flex !important;
  align-items:center !important;
  gap:10px !important;

  width:100% !important;
  min-height:39px !important;

  margin:2px 0 !important;
  padding:8px 10px !important;

  border:1px solid transparent !important;
  border-radius:12px !important;

  background:transparent !important;
  color:#cbdde7 !important;

  font-size:9px !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  text-decoration:none !important;

  cursor:pointer !important;
  pointer-events:auto !important;
}

#app.app:not(.hidden) #nav a[data-page] > svg,
#app.app:not(.hidden) #nav a[data-page] > i{
  display:none !important;
}

/*
 * Les liens natifs conservent data-page :
 * app.js reçoit donc les clics normalement.
 */
#app.app:not(.hidden) #nav a[data-page]::before,
#app.app:not(.hidden) #nav a[data-qza-route]::before{
  display:grid !important;
  place-items:center !important;

  width:21px !important;
  height:21px !important;
  flex:0 0 21px !important;

  border:1px solid rgba(255,255,255,.045) !important;
  border-radius:7px !important;

  background:var(
    --qza-menu-icon-bg,
    rgba(40,206,224,.12)
  ) !important;

  color:var(
    --qza-menu-icon-color,
    #7de8ef
  ) !important;

  font-size:9px !important;
  font-weight:950 !important;

  content:attr(data-qza-icon) !important;
}

#app.app:not(.hidden) #nav [data-qza-tone="cyan"]{
  --qza-menu-icon-bg:rgba(40,206,224,.15);
  --qza-menu-icon-color:#81edf3;
}

#app.app:not(.hidden) #nav [data-qza-tone="blue"]{
  --qza-menu-icon-bg:rgba(33,137,211,.18);
  --qza-menu-icon-color:#85c8f4;
}

#app.app:not(.hidden) #nav [data-qza-tone="green"]{
  --qza-menu-icon-bg:rgba(37,185,133,.17);
  --qza-menu-icon-color:#82e3bb;
}

#app.app:not(.hidden) #nav [data-qza-tone="orange"]{
  --qza-menu-icon-bg:rgba(239,163,59,.17);
  --qza-menu-icon-color:#f5c57a;
}

#app.app:not(.hidden) #nav [data-qza-tone="purple"]{
  --qza-menu-icon-bg:rgba(117,109,230,.19);
  --qza-menu-icon-color:#b0aaf7;
}

#app.app:not(.hidden) #nav [data-qza-tone="red"]{
  --qza-menu-icon-bg:rgba(232,102,114,.18);
  --qza-menu-icon-color:#f29ba4;
}

#app.app:not(.hidden) #nav a[data-page]:hover,
#app.app:not(.hidden) #nav a[data-qza-route]:hover{
  transform:translateX(2px) !important;

  border-color:rgba(255,255,255,.07) !important;
  background:rgba(255,255,255,.055) !important;
  color:#fff !important;
}

#app.app:not(.hidden) #nav a[data-page].active,
#app.app:not(.hidden) #nav a[data-qza-route].active{
  border-color:rgba(40,206,224,.28) !important;

  background:
    linear-gradient(
      90deg,
      rgba(40,206,224,.22),
      rgba(40,206,224,.075)
    ) !important;

  color:#fff !important;

  box-shadow:
    inset 3px 0 0 #28cee0,
    0 8px 20px rgba(0,0,0,.08) !important;
}

/* ZÉO reste accessible par son bouton flottant */

#app.app:not(.hidden) #nav [data-page="zeo"]{
  display:none !important;
}

/* ---------------------------------------------------------
   SUPPRESSION DES DEUX FOOTBARS AJOUTÉES
   --------------------------------------------------------- */

#app.app:not(.hidden) .qza-footbar,
#app.app:not(.hidden) .qza-native-footbar{
  display:none !important;
}

/* ---------------------------------------------------------
   UNIQUE FOOTBAR NATIVE : #qz9Footbar
   --------------------------------------------------------- */

body #qz9Footbar.qz9-footbar{
  position:fixed !important;

  /*
   * Centrage dans la zone de travail :
   * sidebar = 238 px.
   */
  left:calc(238px + (100vw - 238px) / 2) !important;
  right:auto !important;
  bottom:13px !important;
  z-index:680 !important;

  transform:translateX(-50%) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;

  width:max-content !important;
  max-width:calc(100vw - 290px) !important;
  min-height:51px !important;

  margin:0 !important;
  padding:7px 10px !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  border:1px solid rgba(94,220,231,.14) !important;
  border-radius:18px !important;

  background:
    linear-gradient(
      105deg,
      rgba(4,24,39,.98),
      rgba(7,47,73,.98) 63%,
      rgba(8,69,98,.98)
    ) !important;

  box-shadow:
    0 18px 46px rgba(4,23,36,.27),
    inset 0 1px 0 rgba(255,255,255,.055) !important;

  backdrop-filter:blur(17px) !important;
}

body #qz9Footbar.qz9-footbar strong{
  padding:0 11px !important;

  color:#88a9ba !important;

  font-size:8px !important;
  font-weight:850 !important;
  white-space:nowrap !important;
}

body #qz9Footbar.qz9-footbar button{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;

  min-height:35px !important;
  padding:0 11px !important;

  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:11px !important;

  background:rgba(255,255,255,.055) !important;
  color:#d7e8f1 !important;

  font-family:inherit !important;
  font-size:8px !important;
  font-weight:900 !important;
  white-space:nowrap !important;

  cursor:pointer !important;
  pointer-events:auto !important;
}

body #qz9Footbar.qz9-footbar button::before{
  display:grid !important;
  place-items:center !important;

  width:22px !important;
  height:22px !important;
  flex:0 0 22px !important;

  border-radius:8px !important;

  background:var(
    --qza-foot-icon-bg,
    rgba(40,206,224,.17)
  ) !important;

  color:var(
    --qza-foot-icon-color,
    #88eff4
  ) !important;

  font-size:9px !important;
  font-weight:950 !important;

  content:attr(data-qza-foot-icon) !important;
}

body #qz9Footbar [data-qza-foot-tone="blue"]{
  --qza-foot-icon-bg:rgba(33,137,211,.20);
  --qza-foot-icon-color:#8bcaf5;
}

body #qz9Footbar [data-qza-foot-tone="green"]{
  --qza-foot-icon-bg:rgba(37,185,133,.19);
  --qza-foot-icon-color:#88e5bf;
}

body #qz9Footbar [data-qza-foot-tone="orange"]{
  --qza-foot-icon-bg:rgba(239,163,59,.19);
  --qza-foot-icon-color:#f6c77d;
}

body #qz9Footbar [data-qza-foot-tone="purple"]{
  --qza-foot-icon-bg:rgba(117,109,230,.22);
  --qza-foot-icon-color:#b7b0f8;
}

body #qz9Footbar.qz9-footbar button:hover{
  transform:translateY(-1px) !important;

  border-color:rgba(40,206,224,.19) !important;
  background:rgba(40,206,224,.10) !important;

  color:#fff !important;
}

/* ---------------------------------------------------------
   BANDEAU D’ACCUEIL LISIBLE
   --------------------------------------------------------- */

.qza-page .qza-hero{
  min-height:155px !important;

  padding:24px 27px !important;

  border-color:rgba(77,220,230,.19) !important;

  background:
    radial-gradient(
      circle at 87% 8%,
      rgba(46,211,225,.25),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      #05243a,
      #074c70 68%,
      #08788b
    ) !important;

  color:#fff !important;

  box-shadow:
    0 20px 50px rgba(5,47,72,.18) !important;
}

.qza-page .qza-hero-copy small{
  color:#77e5ec !important;
}

.qza-page .qza-hero-copy h2{
  max-width:800px !important;

  margin:7px 0 8px !important;

  color:#fff !important;

  font-size:28px !important;
  line-height:1.07 !important;

  text-shadow:
    0 2px 14px rgba(0,0,0,.17) !important;
}

.qza-page .qza-hero-copy p{
  max-width:820px !important;

  color:#d1e6ed !important;

  font-size:10px !important;
  line-height:1.55 !important;
}

.qza-page .qza-hero-state div{
  border-color:rgba(255,255,255,.13) !important;
  background:rgba(255,255,255,.09) !important;
  color:#cee5ec !important;
}

.qza-page .qza-hero-state b{
  color:#fff !important;
}

/* Les anciennes cartes pâles ne doivent pas recouvrir le hero */

.qza-page .qza-hero-state{
  opacity:1 !important;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1180px){
  body #qz9Footbar.qz9-footbar{
    left:calc(218px + (100vw - 218px) / 2) !important;
    max-width:calc(100vw - 250px) !important;
  }
}

@media(max-width:900px){
  body #qz9Footbar.qz9-footbar{
    left:50% !important;
    max-width:calc(100vw - 22px) !important;
  }

  body #qz9Footbar.qz9-footbar strong{
    display:none !important;
  }
}