/* =========================================================
   QUARZEO PRO V10.5
   CRM + Mon Centre + Q-Score temps réel + QUARZEO ADS
   ========================================================= */

#app.app .qzp-module-page{
  --qzp-navy:#082d47;
  --qzp-blue:#137fc2;
  --qzp-cyan:#28c9df;
  --qzp-green:#27b884;
  --qzp-orange:#eea13a;
  --qzp-red:#e96670;
  --qzp-purple:#786ee8;
  --qzp-gold:#d9aa4c;
  --qzp-text:#12364a;
  --qzp-muted:#6b8494;
  --qzp-line:#dce8ee;
  --qzp-shadow:0 15px 40px rgba(8,45,71,.075);

  display:grid;
  gap:15px;
  width:100%;
  padding-bottom:25px;
}

#app.app .qzp-module-page *{
  box-sizing:border-box;
}

#app.app .qzp-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  padding:3px 1px 2px;
}

#app.app .qzp-page-head small{
  display:block;
  margin-bottom:5px;
  color:#1292b0;
  font-size:9px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}

#app.app .qzp-page-head h2{
  margin:0;
  color:var(--qzp-text);
  font-size:34px;
  line-height:1;
  letter-spacing:-.045em;
}

#app.app .qzp-page-head p{
  max-width:760px;
  margin:9px 0 0;
  color:var(--qzp-muted);
  font-size:12px;
  line-height:1.55;
}

#app.app .qzp-head-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

#app.app .qzp-btn{
  min-height:40px;
  padding:0 14px;
  border:1px solid #d6e5eb;
  border-radius:12px;
  background:#fff;
  color:#315c74;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

#app.app .qzp-btn-primary{
  border-color:#0d648f;
  background:linear-gradient(135deg,#082e49,#107aad);
  color:#fff;
  box-shadow:0 10px 24px rgba(8,73,109,.18);
}

#app.app .qzp-btn-soft{
  border-color:#cfe7eb;
  background:#effafb;
  color:#18798d;
}

#app.app .qzp-card{
  min-width:0;
  padding:18px;
  border:1px solid var(--qzp-line);
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#fbfdfe);
  box-shadow:var(--qzp-shadow);
}

#app.app .qzp-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

#app.app .qzp-card-head small{
  display:block;
  margin-bottom:4px;
  color:#1494ae;
  font-size:8px;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}

#app.app .qzp-card-head h3{
  margin:0;
  color:var(--qzp-text);
  font-size:17px;
  letter-spacing:-.025em;
}

#app.app .qzp-card-head p{
  margin:5px 0 0;
  color:var(--qzp-muted);
  font-size:10px;
  line-height:1.45;
}

#app.app .qzp-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:29px;
  padding:5px 10px;
  border:1px solid #d8e7ec;
  border-radius:999px;
  background:#f8fcfd;
  color:#527182;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}

#app.app .qzp-chip::before{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#a4b8c2;
  content:"";
}

#app.app .qzp-chip.green::before{background:var(--qzp-green)}
#app.app .qzp-chip.orange::before{background:var(--qzp-orange)}
#app.app .qzp-chip.red::before{background:var(--qzp-red)}
#app.app .qzp-chip.cyan::before{background:var(--qzp-cyan)}
#app.app .qzp-chip.gold::before{background:var(--qzp-gold)}

#app.app .qzp-grid-2{
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(330px,.72fr);
  gap:14px;
}

#app.app .qzp-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}

#app.app .qzp-grid-4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

/* Q-SCORE */

#app.app .qzp-score-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:24px;
  align-items:center;
  min-height:245px;
  padding:25px;
  border-color:#0d638c;
  background:
    radial-gradient(circle at 86% 18%,rgba(46,211,224,.22),transparent 28%),
    linear-gradient(145deg,#062b47,#0a527a 68%,#0b8494);
  color:#fff;
  box-shadow:0 20px 50px rgba(7,62,94,.19);
}

#app.app .qzp-score-ring{
  --score-angle:0deg;

  position:relative;
  width:166px;
  height:166px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    conic-gradient(
      #54e0e4 0 var(--score-angle),
      rgba(255,255,255,.13) var(--score-angle) 360deg
    );
  box-shadow:
    0 0 0 9px rgba(255,255,255,.055),
    0 18px 40px rgba(0,0,0,.15);
}

#app.app .qzp-score-ring::after{
  position:absolute;
  inset:15px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  background:linear-gradient(145deg,#082f4b,#0b5979);
  content:"";
}

#app.app .qzp-score-value{
  position:relative;
  z-index:1;
  text-align:center;
}

#app.app .qzp-score-value strong{
  display:block;
  font-size:52px;
  line-height:.9;
  letter-spacing:-.065em;
}

#app.app .qzp-score-value span{
  display:block;
  margin-top:7px;
  color:#aee9ed;
  font-size:10px;
  font-weight:850;
}

#app.app .qzp-score-copy small{
  color:#8fe7ec;
  font-size:9px;
  font-weight:950;
  letter-spacing:.13em;
}

#app.app .qzp-score-copy h2{
  margin:7px 0 8px;
  color:#fff;
  font-size:31px;
  letter-spacing:-.04em;
}

#app.app .qzp-score-copy > p{
  max-width:680px;
  margin:0;
  color:#d3e8ef;
  font-size:11px;
  line-height:1.55;
}

#app.app .qzp-score-delta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:15px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(255,255,255,.085);
  font-size:10px;
  font-weight:900;
}

#app.app .qzp-score-delta.up{color:#8ef0c8}
#app.app .qzp-score-delta.down{color:#ffadb4}
#app.app .qzp-score-delta.stable{color:#cae5ed}

#app.app .qzp-score-updated{
  margin-left:8px;
  color:#9cc9d7;
  font-size:8px;
}

#app.app .qzp-reasons{
  display:grid;
  gap:8px;
  margin-top:16px;
}

#app.app .qzp-reason{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  background:rgba(255,255,255,.07);
}

#app.app .qzp-reason b{
  display:grid;
  place-items:center;
  min-height:31px;
  border-radius:10px;
  background:rgba(255,255,255,.09);
  font-size:10px;
}

#app.app .qzp-reason.positive b{color:#8ef0c8}
#app.app .qzp-reason.negative b{color:#ffadb4}
#app.app .qzp-reason.neutral b{color:#b7e5ed}

#app.app .qzp-reason strong{
  display:block;
  font-size:10px;
}

#app.app .qzp-reason span{
  display:block;
  margin-top:2px;
  color:#c7e0e8;
  font-size:8px;
  line-height:1.4;
}

/* INDICATEURS */

#app.app .qzp-indicator{
  position:relative;
  overflow:hidden;
  min-height:153px;
}

#app.app .qzp-indicator::after{
  position:absolute;
  right:-35px;
  bottom:-48px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:var(--indicator-soft,rgba(39,201,223,.08));
  content:"";
}

#app.app .qzp-indicator > *{
  position:relative;
  z-index:1;
}

#app.app .qzp-indicator.cyan{
  border-top:3px solid var(--qzp-cyan);
  --indicator-soft:rgba(39,201,223,.10);
}

#app.app .qzp-indicator.green{
  border-top:3px solid var(--qzp-green);
  --indicator-soft:rgba(39,184,132,.10);
}

#app.app .qzp-indicator.orange{
  border-top:3px solid var(--qzp-orange);
  --indicator-soft:rgba(238,161,58,.10);
}

#app.app .qzp-indicator.purple{
  border-top:3px solid var(--qzp-purple);
  --indicator-soft:rgba(120,110,232,.10);
}

#app.app .qzp-indicator.red{
  border-top:3px solid var(--qzp-red);
  --indicator-soft:rgba(233,102,112,.10);
}

#app.app .qzp-indicator.gold{
  border-top:3px solid var(--qzp-gold);
  --indicator-soft:rgba(217,170,76,.10);
}

#app.app .qzp-indicator-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  color:#607c8e;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

#app.app .qzp-indicator-value{
  display:flex;
  align-items:flex-end;
  gap:9px;
  margin-top:14px;
}

#app.app .qzp-indicator-value strong{
  color:var(--qzp-text);
  font-size:30px;
  line-height:1;
  letter-spacing:-.05em;
}

#app.app .qzp-trend{
  padding:5px 7px;
  border-radius:999px;
  font-size:8px;
  font-weight:950;
}

#app.app .qzp-trend.up{
  background:#e9f9f2;
  color:#19845d;
}

#app.app .qzp-trend.down{
  background:#fff0f1;
  color:#b84d59;
}

#app.app .qzp-trend.stable{
  background:#eef5f8;
  color:#637f90;
}

#app.app .qzp-impact{
  margin-top:12px;
  color:#668091;
  font-size:9px;
  line-height:1.45;
}

#app.app .qzp-impact b{
  color:var(--qzp-text);
}

#app.app .qzp-meter{
  height:7px;
  margin-top:13px;
  overflow:hidden;
  border-radius:999px;
  background:#e8f0f4;
}

#app.app .qzp-meter i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#1381be,#2ccbdc);
}

/* ZÉO */

#app.app .qzp-zeo-advice{
  border-color:#bfe4e9;
  background:
    radial-gradient(circle at 92% 12%,rgba(42,202,218,.13),transparent 25%),
    linear-gradient(145deg,#f7fdfe,#edf9fb);
}

#app.app .qzp-zeo-head{
  display:flex;
  gap:13px;
  align-items:center;
}

#app.app .qzp-zeo-avatar{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border:1px solid #cce7eb;
  border-radius:16px;
  background:#fff;
  color:#087da1;
  font-size:15px;
  font-weight:950;
  box-shadow:0 10px 25px rgba(8,83,111,.09);
}

#app.app .qzp-zeo-head small{
  display:block;
  color:#1593ac;
  font-size:8px;
  font-weight:950;
  letter-spacing:.13em;
}

#app.app .qzp-zeo-head strong{
  display:block;
  margin-top:3px;
  color:var(--qzp-text);
  font-size:14px;
}

#app.app .qzp-zeo-advice p{
  margin:15px 0 0;
  color:#527283;
  font-size:10px;
  line-height:1.6;
}

#app.app .qzp-zeo-actions{
  display:grid;
  gap:8px;
  margin-top:14px;
}

#app.app .qzp-zeo-action{
  display:grid;
  grid-template-columns:9px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 11px;
  border:1px solid #d5e9ed;
  border-radius:13px;
  background:rgba(255,255,255,.76);
}

#app.app .qzp-zeo-action i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--qzp-cyan);
}

#app.app .qzp-zeo-action.orange i{background:var(--qzp-orange)}
#app.app .qzp-zeo-action.green i{background:var(--qzp-green)}
#app.app .qzp-zeo-action.red i{background:var(--qzp-red)}

#app.app .qzp-zeo-action strong{
  display:block;
  color:#234c62;
  font-size:9px;
}

#app.app .qzp-zeo-action span{
  display:block;
  margin-top:2px;
  color:#758d9b;
  font-size:8px;
}

/* CERTIFICATION */

#app.app .qzp-certification{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:15px;
  align-items:center;
}

#app.app .qzp-cert-seal{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border:1px solid #d2e6eb;
  border-radius:24px;
  background:
    radial-gradient(circle,#fff 30%,#e9f8fa 31% 100%);
  color:#1288a6;
  font-size:24px;
  font-weight:950;
  box-shadow:0 12px 28px rgba(8,73,98,.09);
}

#app.app .qzp-certification h3{
  margin:0;
  color:var(--qzp-text);
  font-size:17px;
}

#app.app .qzp-certification p{
  margin:5px 0 0;
  color:var(--qzp-muted);
  font-size:9px;
  line-height:1.5;
}

#app.app .qzp-cert-checks{
  display:grid;
  gap:7px;
  margin-top:15px;
}

#app.app .qzp-cert-check{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border:1px solid #e0ebef;
  border-radius:12px;
  background:#fbfdfe;
  color:#547184;
  font-size:9px;
}

#app.app .qzp-cert-check b{
  color:#238263;
}

/* CRM */

#app.app .qzp-crm-search{
  display:flex;
  gap:8px;
}

#app.app .qzp-crm-search input{
  flex:1;
  min-height:44px;
  padding:0 14px;
  border:1px solid #d7e5eb;
  border-radius:13px;
  background:#fff;
  color:var(--qzp-text);
}

#app.app .qzp-crm-list{
  display:grid;
  gap:8px;
}

#app.app .qzp-crm-row{
  display:grid;
  grid-template-columns:42px minmax(0,1.2fr) minmax(0,.8fr) auto;
  gap:11px;
  align-items:center;
  padding:11px;
  border:1px solid #e0eaef;
  border-radius:15px;
  background:#fbfdfe;
  cursor:pointer;
  transition:.16s ease;
}

#app.app .qzp-crm-row:hover{
  transform:translateX(2px);
  border-color:#c7dde6;
  background:#fff;
}

#app.app .qzp-crm-avatar{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#eaf8fb;
  color:#1689a4;
  font-size:11px;
  font-weight:950;
}

#app.app .qzp-crm-row strong{
  display:block;
  color:var(--qzp-text);
  font-size:10px;
}

#app.app .qzp-crm-row span{
  display:block;
  margin-top:3px;
  color:#718998;
  font-size:8px;
}

#app.app .qzp-status{
  display:inline-flex !important;
  width:max-content;
  margin:0 !important;
  padding:6px 8px;
  border-radius:999px;
  background:#eef7fa;
  color:#367087 !important;
  font-size:8px !important;
  font-weight:900;
}

#app.app .qzp-status.green{
  background:#e9f9f2;
  color:#247e60 !important;
}

#app.app .qzp-status.orange{
  background:#fff4e5;
  color:#9a651c !important;
}

/* ADS */

#app.app .qzp-ads-hero{
  position:relative;
  overflow:hidden;
  min-height:270px;
  padding:32px;
  border-color:#0e6089;
  background:
    radial-gradient(circle at 86% 14%,rgba(44,206,223,.25),transparent 26%),
    radial-gradient(circle at 65% 100%,rgba(115,105,231,.19),transparent 30%),
    linear-gradient(145deg,#062b47,#0a527a 62%,#0a7e91);
  color:#fff;
}

#app.app .qzp-ads-hero small{
  color:#8ee7ec;
  font-size:9px;
  font-weight:950;
  letter-spacing:.14em;
}

#app.app .qzp-ads-hero h2{
  max-width:720px;
  margin:12px 0;
  color:#fff;
  font-size:42px;
  line-height:1;
  letter-spacing:-.05em;
}

#app.app .qzp-ads-hero p{
  max-width:680px;
  color:#d0e7ed;
  font-size:11px;
  line-height:1.65;
}

#app.app .qzp-ads-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,150px));
  gap:9px;
  margin-top:22px;
}

#app.app .qzp-ads-metrics div{
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.075);
}

#app.app .qzp-ads-metrics strong{
  display:block;
  font-size:19px;
}

#app.app .qzp-ads-metrics span{
  display:block;
  margin-top:3px;
  color:#b7dce5;
  font-size:8px;
}

#app.app .qzp-ads-features{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

#app.app .qzp-ads-feature{
  min-height:175px;
}

#app.app .qzp-ads-feature b{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:13px;
  background:#eaf8fb;
  color:#1486a5;
}

#app.app .qzp-ads-feature h3{
  margin:18px 0 7px;
  color:var(--qzp-text);
  font-size:14px;
}

#app.app .qzp-ads-feature p{
  margin:0;
  color:var(--qzp-muted);
  font-size:9px;
  line-height:1.55;
}

/* HISTORIQUE */

#app.app .qzp-history{
  display:grid;
  gap:8px;
}

#app.app .qzp-history-row{
  display:grid;
  grid-template-columns:82px 46px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px 11px;
  border:1px solid #e1eaef;
  border-radius:13px;
  background:#fbfdfe;
}

#app.app .qzp-history-row time{
  color:#7b919e;
  font-size:8px;
}

#app.app .qzp-history-row b{
  display:grid;
  place-items:center;
  min-height:28px;
  border-radius:9px;
  font-size:8px;
}

#app.app .qzp-history-row b.up{
  background:#e9f9f2;
  color:#21805f;
}

#app.app .qzp-history-row b.down{
  background:#fff0f1;
  color:#b84d59;
}

#app.app .qzp-history-row b.stable{
  background:#edf4f7;
  color:#617e8f;
}

#app.app .qzp-history-row strong{
  display:block;
  color:#31566b;
  font-size:9px;
}

#app.app .qzp-history-row span{
  display:block;
  margin-top:2px;
  color:#7a909d;
  font-size:8px;
}

/* SIDEBAR MODULES */

#app.app .navGroup[data-qzp-group]{
  margin-top:8px;
}

#app.app .navGroup a[data-qzp-page]::before{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:6px;
  background:rgba(66,204,216,.10);
  color:#77dfe5;
  font-size:9px;
  font-weight:950;
  content:attr(data-qzp-icon);
}

#app.app .navGroup a[data-qzp-page="ads"]::after{
  margin-left:auto;
  padding:4px 6px;
  border:1px solid rgba(102,227,232,.16);
  border-radius:999px;
  background:rgba(39,201,223,.10);
  color:#75e0e6;
  font-size:7px;
  font-weight:950;
  content:"BIENTÔT";
}

/* RESPONSIVE */

@media(max-width:1180px){
  #app.app .qzp-grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #app.app .qzp-ads-features{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:900px){
  #app.app .qzp-grid-2,
  #app.app .qzp-grid-3{
    grid-template-columns:1fr;
  }

  #app.app .qzp-score-hero{
    grid-template-columns:1fr;
  }

  #app.app .qzp-score-ring{
    width:145px;
    height:145px;
  }

  #app.app .qzp-ads-features{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  #app.app .qzp-page-head{
    display:block;
  }

  #app.app .qzp-head-actions{
    justify-content:flex-start;
    margin-top:13px;
  }

  #app.app .qzp-grid-4{
    grid-template-columns:1fr;
  }

  #app.app .qzp-crm-row{
    grid-template-columns:40px minmax(0,1fr) auto;
  }

  #app.app .qzp-crm-row > div:nth-child(3){
    display:none;
  }

  #app.app .qzp-ads-metrics{
    grid-template-columns:1fr;
  }

  #app.app .qzp-ads-hero h2{
    font-size:33px;
  }
}