/* =========================================================
   QUARZEO ADMIN V12.5
   Finalisation visuelle et interactions de contenu
   ========================================================= */

/* ---------------------------------------------------------
   BANDEAUX MÉTIER : SOMBRES ET LISIBLE
   --------------------------------------------------------- */

#app.app:not(.hidden) #content .qza-page > .qza-hero,
#app.app:not(.hidden) #content [data-qza-network-map] > .qza-hero{
  position:relative !important;
  overflow:hidden !important;

  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(170px,215px) !important;
  align-items:center !important;
  gap:24px !important;

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

  margin:0 0 16px !important;
  padding:23px 26px !important;

  border:1px solid rgba(72,220,232,.20) !important;
  border-radius:24px !important;

  background:
    radial-gradient(
      circle at 91% 3%,
      rgba(53,218,231,.29),
      transparent 31%
    ),
    radial-gradient(
      circle at 61% 130%,
      rgba(82,121,216,.18),
      transparent 40%
    ),
    linear-gradient(
      132deg,
      #041d30 0%,
      #073c5d 52%,
      #08768a 100%
    ) !important;

  color:#fff !important;

  box-shadow:
    0 21px 52px rgba(4,34,54,.20),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Anneaux visuels premium */

#app.app:not(.hidden) #content .qza-hero::before{
  position:absolute !important;
  top:-130px !important;
  right:-70px !important;

  width:310px !important;
  height:310px !important;

  border:1px solid rgba(116,231,239,.17) !important;
  border-radius:50% !important;

  content:"" !important;
  pointer-events:none !important;
}

#app.app:not(.hidden) #content .qza-hero::after{
  position:absolute !important;
  top:-82px !important;
  right:-22px !important;

  width:210px !important;
  height:210px !important;

  border:1px solid rgba(116,231,239,.13) !important;
  border-radius:50% !important;

  content:"" !important;
  pointer-events:none !important;
}

#app.app:not(.hidden) #content .qza-hero-copy{
  position:relative !important;
  z-index:2 !important;

  min-width:0 !important;
}

#app.app:not(.hidden) #content .qza-hero-copy small{
  display:block !important;

  margin:0 0 8px !important;

  color:#69e3eb !important;

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

  opacity:1 !important;
}

#app.app:not(.hidden) #content .qza-hero-copy h2{
  max-width:850px !important;

  margin:0 0 9px !important;

  color:#fff !important;

  font-size:27px !important;
  font-weight:900 !important;
  line-height:1.08 !important;
  letter-spacing:-.042em !important;

  opacity:1 !important;
  text-shadow:0 3px 18px rgba(0,0,0,.18) !important;
}

#app.app:not(.hidden) #content .qza-hero-copy p{
  max-width:850px !important;

  margin:0 !important;

  color:#d4e8ee !important;

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

  opacity:1 !important;
}

/* Indicateurs de droite */

#app.app:not(.hidden) #content .qza-hero-state{
  position:relative !important;
  z-index:2 !important;

  display:grid !important;
  gap:7px !important;

  min-width:0 !important;

  opacity:1 !important;
}

#app.app:not(.hidden) #content .qza-hero-state div{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;

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

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

  background:rgba(255,255,255,.09) !important;
  color:#d2e8ee !important;

  font-size:8px !important;
  font-weight:750 !important;

  opacity:1 !important;
  backdrop-filter:blur(10px) !important;
}

#app.app:not(.hidden) #content .qza-hero-state b{
  color:#fff !important;

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

  opacity:1 !important;
}

/* Aucun robot artificiel dans le hero */

#app.app:not(.hidden) #content .qza-hero > .qza-zeo{
  display:none !important;
}

/* ---------------------------------------------------------
   CARTE RÉSEAU RÉELLE
   --------------------------------------------------------- */

#app.app:not(.hidden) .qza-network-map{
  display:grid !important;
  place-items:center !important;

  min-height:540px !important;
  padding:18px !important;

  overflow:hidden !important;

  border:1px solid #d7e6ed !important;
  border-radius:22px !important;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(40,206,224,.075),
      transparent 50%
    ),
    linear-gradient(180deg,#fbfdfe,#f1f7fa) !important;

  box-shadow:0 17px 42px rgba(5,37,59,.08) !important;
}

#app.app:not(.hidden) .qza-network-map > svg{
  display:none !important;
}

#app.app:not(.hidden) .qza-network-map img.qza-france-v125{
  display:block !important;

  width:100% !important;
  height:100% !important;
  max-height:555px !important;

  object-fit:contain !important;
}

/* ---------------------------------------------------------
   MENU : COULEURS PLUS COHÉRENTES
   --------------------------------------------------------- */

#app.app:not(.hidden) #nav [data-page="home"]{
  --qza-menu-icon-bg:rgba(40,206,224,.16);
  --qza-menu-icon-color:#88f0f4;
}

#app.app:not(.hidden) #nav [data-page="territory"],
#app.app:not(.hidden) #nav [data-page="partners"],
#app.app:not(.hidden) #nav [data-page="labs-market"]{
  --qza-menu-icon-bg:rgba(33,137,211,.19);
  --qza-menu-icon-color:#89caf5;
}

#app.app:not(.hidden) #nav [data-page="live"]{
  --qza-menu-icon-bg:rgba(37,185,133,.18);
  --qza-menu-icon-color:#84e4bd;
}

#app.app:not(.hidden) #nav [data-page="quality"],
#app.app:not(.hidden) #nav [data-page="labs-trends"]{
  --qza-menu-icon-bg:rgba(117,109,230,.20);
  --qza-menu-icon-color:#b4aef7;
}

#app.app:not(.hidden) #nav [data-page="finance"],
#app.app:not(.hidden) #nav [data-page="labs-ads"]{
  --qza-menu-icon-bg:rgba(239,163,59,.19);
  --qza-menu-icon-color:#f7c87e;
}

#app.app:not(.hidden) #nav [data-page="users"],
#app.app:not(.hidden) #nav [data-qza-route="admin_crm"],
#app.app:not(.hidden) #nav [data-qza-route="admin_mail"]{
  --qza-menu-icon-bg:rgba(40,206,224,.15);
  --qza-menu-icon-color:#84edf2;
}

#app.app:not(.hidden) #nav [data-qza-route="admin_internal"]{
  --qza-menu-icon-bg:rgba(117,109,230,.20);
  --qza-menu-icon-color:#b7b1f8;
}

#app.app:not(.hidden) #nav [data-qza-route="admin_alerts"]{
  --qza-menu-icon-bg:rgba(232,102,114,.20);
  --qza-menu-icon-color:#f39ba5;
}

/* ZÉO uniquement en bouton flottant */

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

/* ---------------------------------------------------------
   FOOTBAR NATIVE FINALISÉE
   --------------------------------------------------------- */

body #qz9Footbar.qz9-footbar{
  left:calc(238px + (100vw - 238px) / 2) !important;
  right:auto !important;
  bottom:13px !important;

  transform:translateX(-50%) !important;

  min-height:49px !important;
  max-width:calc(100vw - 300px) !important;

  padding:6px 8px !important;

  border-radius:17px !important;

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

body #qz9Footbar.qz9-footbar strong{
  padding:0 10px !important;
  color:#83a7b8 !important;
}

body #qz9Footbar.qz9-footbar button{
  min-height:34px !important;
  padding:0 10px !important;

  border-radius:10px !important;
}

body #qz9Footbar.qz9-footbar [data-qz9-go="zeo"]{
  display:none !important;
}

/* ---------------------------------------------------------
   BOUTONS DES PAGES AJOUTÉES
   --------------------------------------------------------- */

#app.app:not(.hidden) .qza-page button,
#app.app:not(.hidden) .qza-page .qza-button{
  cursor:pointer !important;
  pointer-events:auto !important;

  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease !important;
}

#app.app:not(.hidden) .qza-page button:hover,
#app.app:not(.hidden) .qza-page .qza-button:hover{
  transform:translateY(-1px) !important;

  border-color:#8fd3df !important;

  box-shadow:0 8px 18px rgba(6,69,96,.10) !important;
}

/* ---------------------------------------------------------
   MODALE D’ACTION
   --------------------------------------------------------- */

.qza-action-modal{
  position:fixed;
  inset:0;
  z-index:1200;

  display:grid;
  place-items:center;

  padding:24px;

  background:rgba(3,20,33,.55);

  backdrop-filter:blur(7px);
}

.qza-action-modal[hidden]{
  display:none !important;
}

.qza-action-dialog{
  position:relative;

  width:min(520px,calc(100vw - 34px));

  padding:23px;

  border:1px solid rgba(171,213,227,.65);
  border-radius:22px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(40,206,224,.11),
      transparent 35%
    ),
    #fff;

  box-shadow:0 28px 75px rgba(3,31,49,.25);
}

.qza-action-dialog > small{
  display:block;

  margin:0 0 7px;

  color:#1698b1;

  font-size:8px;
  font-weight:950;
  letter-spacing:.14em;
}

.qza-action-dialog h3{
  margin:0;

  color:#10364d;

  font-size:21px;
  letter-spacing:-.035em;
}

.qza-action-dialog p{
  margin:9px 0 18px;

  color:#6b8494;

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

.qza-action-dialog label{
  display:block;

  margin:0 0 12px;

  color:#436679;

  font-size:9px;
  font-weight:850;
}

.qza-action-dialog input,
.qza-action-dialog textarea,
.qza-action-dialog select{
  display:block;

  width:100%;
  min-height:43px;

  margin-top:6px;
  padding:10px 12px;

  border:1px solid #d5e4eb;
  border-radius:11px;

  background:#fbfdfe;
  color:#183f55;

  font:inherit;
}

.qza-action-dialog textarea{
  min-height:95px;
  resize:vertical;
}

.qza-action-buttons{
  display:flex;
  justify-content:flex-end;
  gap:8px;

  margin-top:17px;
}

.qza-action-buttons button{
  min-height:38px;
  padding:0 13px;

  border:1px solid #d3e3ea;
  border-radius:10px;

  background:#fff;
  color:#315d74;

  font-size:9px;
  font-weight:900;

  cursor:pointer;
}

.qza-action-buttons button.primary{
  border-color:#0b789c;

  background:linear-gradient(120deg,#076181,#0ca3bd);
  color:#fff;
}

/* ---------------------------------------------------------
   TOAST
   --------------------------------------------------------- */

.qza-action-toast{
  position:fixed;
  right:22px;
  bottom:86px;
  z-index:1300;

  max-width:340px;
  padding:12px 15px;

  border:1px solid rgba(96,223,231,.24);
  border-radius:13px;

  background:#062941;
  color:#e8f8fb;

  font-size:9px;
  font-weight:750;

  box-shadow:0 17px 38px rgba(4,25,39,.25);

  opacity:0;
  transform:translateY(12px);

  pointer-events:none;

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.qza-action-toast.visible{
  opacity:1;
  transform:translateY(0);
}

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

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

@media(max-width:900px){
  #app.app:not(.hidden) #content .qza-page > .qza-hero,
  #app.app:not(.hidden) #content [data-qza-network-map] > .qza-hero{
    grid-template-columns:1fr !important;
  }

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

  .qza-network-map{
    min-height:410px !important;
  }

  #app.app:not(.hidden) .qza-network-map img.qza-france-v125{
    max-height:420px !important;
  }
}