/* =========================================================
   QUARZEO ADMIN V12 FINAL
   Command Center métier
   ========================================================= */

:root{
  --qza-navy-1000:#041724;
  --qza-navy-950:#061e31;
  --qza-navy-900:#082b46;
  --qza-navy-850:#0a3b5d;

  --qza-cyan:#28cee0;
  --qza-cyan-soft:#e9fafd;

  --qza-blue:#2189d3;
  --qza-green:#25b985;
  --qza-orange:#efa33b;
  --qza-red:#e86672;
  --qza-purple:#756de6;
  --qza-gold:#d7a94f;

  --qza-text:#11344b;
  --qza-muted:#6e8797;
  --qza-border:#d9e7ee;
  --qza-bg:#f2f7fa;
  --qza-card:#fff;

  --qza-shadow:0 16px 42px rgba(5,37,59,.075);
  --qza-shadow-strong:0 22px 56px rgba(5,37,59,.13);
}

/* =========================================================
   STRUCTURE
   ========================================================= */

#app.app:not(.hidden){
  display:grid !important;
  grid-template-columns:238px minmax(0,1fr) !important;
  min-height:100vh !important;

  background:
    radial-gradient(
      circle at 82% 4%,
      rgba(40,206,224,.07),
      transparent 26%
    ),
    linear-gradient(180deg,#f7fbfd,var(--qza-bg)) !important;
}

#app.app:not(.hidden) > .sidebar{
  position:fixed !important;
  inset:0 auto 0 0 !important;
  z-index:45 !important;

  width:238px !important;
  height:100vh !important;

  display:flex !important;
  flex-direction:column !important;

  padding:14px 11px 12px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;

  border-right:1px solid rgba(255,255,255,.055) !important;

  background:
    radial-gradient(
      circle at 35% 0,
      rgba(40,206,224,.12),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      var(--qza-navy-1000),
      var(--qza-navy-950) 54%,
      #06243a
    ) !important;

  color:#d8e9f2 !important;

  box-shadow:18px 0 45px rgba(4,23,36,.14) !important;
}

#app.app:not(.hidden) > .workspace{
  grid-column:2 !important;
  min-width:0 !important;

  margin-left:0 !important;
  padding:0 28px 88px !important;
}

/* =========================================================
   MARQUE ADMIN
   ========================================================= */

#app.app:not(.hidden) .sideBrand{
  position:relative !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:5px !important;

  min-height:64px !important;

  margin:0 5px 15px !important;
  padding:8px 10px !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;
  box-shadow:none !important;

  text-decoration:none !important;
}

#app.app:not(.hidden) .sideBrand img,
#app.app:not(.hidden) .sideBrand > span{
  display:none !important;
}

#app.app:not(.hidden) .sideBrand::before{
  display:block !important;

  background:
    linear-gradient(
      105deg,
      #dff9fc 0%,
      #57ddeb 24%,
      #ffffff 46%,
      #2bcde0 66%,
      #dff9fc 100%
    );

  background-size:240% 100%;

  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  color:#fff;

  font-size:22px;
  font-weight:950;
  line-height:1;
  letter-spacing:.035em;

  content:"QUARZEO";

  animation:qzaBrandLight 6s ease-in-out infinite;
}

#app.app:not(.hidden) .sideBrand::after{
  display:block !important;

  color:#6ee4ec;

  font-size:9px;
  font-weight:950;
  line-height:1;
  letter-spacing:.18em;

  content:"ADMIN";
}

@keyframes qzaBrandLight{
  0%,100%{background-position:0 50%}
  50%{background-position:100% 50%}
}

/* Bloc compte gauche supprimé */

#app.app:not(.hidden) #roleCard,
#app.app:not(.hidden) .roleCard{
  display:none !important;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

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

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

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

  margin:0 9px 7px !important;

  color:#64889d !important;

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

#app.app:not(.hidden) #nav a,
#app.app:not(.hidden) #nav button,
#app.app:not(.hidden) #nav [role="button"]{
  position:relative !important;

  display:flex !important;
  align-items:center !important;
  gap:10px !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;
  text-decoration:none !important;

  cursor:pointer !important;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease !important;
}

#app.app:not(.hidden) #nav a > svg,
#app.app:not(.hidden) #nav a > i,
#app.app:not(.hidden) #nav a > .navSvg,
#app.app:not(.hidden) #nav button > svg,
#app.app:not(.hidden) #nav button > i{
  display:none !important;
}

#app.app:not(.hidden) #nav a::before,
#app.app:not(.hidden) #nav button::before{
  display:grid !important;
  place-items:center !important;

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

  border:1px solid rgba(73,211,222,.10) !important;
  border-radius:7px !important;

  background:rgba(40,206,224,.08) !important;
  color:#75e2e9 !important;

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

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

#app.app:not(.hidden) #nav a:hover,
#app.app:not(.hidden) #nav button: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.active,
#app.app:not(.hidden) #nav button.active,
#app.app:not(.hidden) #nav [aria-current="page"]{
  border-color:rgba(40,206,224,.27) !important;

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

  color:#fff !important;

  box-shadow:
    inset 3px 0 0 var(--qza-cyan),
    0 8px 20px rgba(0,0,0,.08) !important;
}

/* Liens bas supprimés */

#app.app:not(.hidden) .sidebarFoot{
  display:none !important;
}

/* =========================================================
   TOPBAR BLEU NUIT
   ========================================================= */

#app.app:not(.hidden) .topbar{
  position:sticky !important;
  top:0 !important;
  z-index:32 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;

  min-height:79px !important;
  height:auto !important;

  margin:0 -28px 22px !important;
  padding:13px 28px !important;

  border:0 !important;
  border-radius:0 0 21px 21px !important;

  background:
    linear-gradient(
      110deg,
      var(--qza-navy-1000),
      var(--qza-navy-900) 58%,
      #0b527b
    ) !important;

  box-shadow:
    0 17px 42px rgba(4,23,36,.16),
    inset 0 -1px 0 rgba(255,255,255,.055) !important;

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

#app.app:not(.hidden) .topbar > div:first-child > span,
#app.app:not(.hidden) .topbar #crumb{
  color:#78dfe8 !important;

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

#app.app:not(.hidden) .topbar h1,
#app.app:not(.hidden) .topbar #title{
  margin-top:4px !important;
  color:#fff !important;

  font-size:27px !important;
  letter-spacing:-.04em !important;
}

#app.app:not(.hidden) .topRight{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

#app.app:not(.hidden) .topbar .search{
  display:flex !important;
  align-items:center !important;

  width:310px !important;
  min-height:43px !important;

  padding:0 12px !important;

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

  background:rgba(255,255,255,.96) !important;

  box-shadow:0 8px 22px rgba(0,0,0,.09) !important;
}

#app.app:not(.hidden) .topbar .search > span{
  display:none !important;
}

#app.app:not(.hidden) .topbar .search input{
  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  outline:0 !important;

  background:transparent !important;
  color:var(--qza-text) !important;

  box-shadow:none !important;
}

#app.app:not(.hidden) .topbar .refreshBtn{
  min-height:43px !important;
  padding:0 13px !important;

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

  background:rgba(255,255,255,.11) !important;
  color:#fff !important;

  box-shadow:none !important;
}

#app.app:not(.hidden) .topbar .actor{
  min-width:170px !important;
  min-height:43px !important;

  padding:8px 11px !important;

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

  background:rgba(255,255,255,.96) !important;
  color:var(--qza-text) !important;

  box-shadow:0 8px 22px rgba(0,0,0,.09) !important;
}

/* =========================================================
   CONTENU COMMUN
   ========================================================= */

#app.app:not(.hidden) #content{
  width:100% !important;
  max-width:1480px !important;
  min-width:0 !important;

  margin:0 auto !important;
}

#app.app:not(.hidden) .panel,
#app.app:not(.hidden) .kpi,
#app.app:not(.hidden) .card,
#app.app:not(.hidden) .qz10-action-card,
#app.app:not(.hidden) .qz10-dashboard-panel{
  border-color:var(--qza-border) !important;
  background:linear-gradient(180deg,#fff,#fbfdfe) !important;

  box-shadow:var(--qza-shadow) !important;
}

#app.app:not(.hidden) .panel:hover,
#app.app:not(.hidden) .kpi:hover,
#app.app:not(.hidden) .card:hover{
  box-shadow:var(--qza-shadow-strong) !important;
}

/* =========================================================
   COMMAND CENTER
   ========================================================= */

.qza-page{
  display:grid;
  gap:15px;
  width:100%;
}

.qza-page *{
  box-sizing:border-box;
}

.qza-hero{
  position:relative;
  overflow:hidden;

  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:22px;
  align-items:center;

  min-height:170px;
  padding:24px 27px;

  border:1px solid rgba(49,194,207,.20);
  border-radius:25px;

  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(49,216,228,.25),
      transparent 27%
    ),
    radial-gradient(
      circle at 60% 120%,
      rgba(117,109,230,.15),
      transparent 35%
    ),
    linear-gradient(
      140deg,
      #062840,
      #084e73 65%,
      #087b8c
    );

  color:#fff;

  box-shadow:0 22px 55px rgba(5,47,72,.19);
}

.qza-zeo{
  position:relative;

  width:88px;
  height:88px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.15);
  border-radius:29px;

  background:
    radial-gradient(
      circle at 50% 38%,
      #ffffff 0 30%,
      #e5f8fb 31% 48%,
      transparent 49%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.055)
    );

  color:#0b7390;

  font-size:15px;
  font-weight:950;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 17px 36px rgba(0,0,0,.17);
}

.qza-zeo::before{
  position:absolute;

  width:54px;
  height:31px;

  border-radius:17px;

  background:#07283f;

  box-shadow:
    inset 0 0 12px rgba(40,206,224,.30),
    0 0 18px rgba(40,206,224,.18);

  content:"";
}

.qza-zeo::after{
  position:absolute;

  width:27px;
  height:5px;

  border-radius:999px;

  border-left:6px solid var(--qza-cyan);
  border-right:6px solid var(--qza-cyan);

  content:"";
}

.qza-hero-copy small{
  color:#7be6ed;

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

.qza-hero-copy h2{
  max-width:760px;

  margin:8px 0 8px;

  color:#fff;

  font-size:30px;
  line-height:1.02;
  letter-spacing:-.045em;
}

.qza-hero-copy p{
  max-width:760px;

  margin:0;

  color:#d0e6ed;

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

.qza-hero-state{
  display:grid;
  gap:7px;
  min-width:185px;
}

.qza-hero-state div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  min-height:37px;
  padding:0 11px;

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

  background:rgba(255,255,255,.075);

  color:#cce5ec;

  font-size:8px;
}

.qza-hero-state b{
  color:#fff;
  font-size:10px;
}

.qza-grid-4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}

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

.qza-grid-2{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);
  gap:13px;
}

.qza-card{
  min-width:0;
  padding:17px;

  border:1px solid var(--qza-border);
  border-radius:20px;

  background:linear-gradient(180deg,#fff,#fbfdfe);

  box-shadow:var(--qza-shadow);
}

.qza-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;

  margin-bottom:13px;
}

.qza-card-head small{
  display:block;

  margin-bottom:4px;

  color:#1497b2;

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

.qza-card-head h3{
  margin:0;

  color:var(--qza-text);

  font-size:16px;
  letter-spacing:-.025em;
}

.qza-card-head p{
  margin:5px 0 0;

  color:var(--qza-muted);

  font-size:9px;
  line-height:1.45;
}

.qza-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;

  min-height:27px;
  padding:5px 8px;

  border:1px solid #d7e6eb;
  border-radius:999px;

  background:#f8fcfd;
  color:#527183;

  font-size:8px;
  font-weight:900;
}

.qza-chip::before{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#9fb4bf;

  content:"";
}

.qza-chip.green::before{background:var(--qza-green)}
.qza-chip.orange::before{background:var(--qza-orange)}
.qza-chip.red::before{background:var(--qza-red)}
.qza-chip.cyan::before{background:var(--qza-cyan)}

.qza-metric{
  position:relative;
  overflow:hidden;

  min-height:128px;
}

.qza-metric::before{
  position:absolute;
  inset:0 auto 0 0;

  width:4px;

  border-radius:20px 0 0 20px;

  background:var(--metric-color,var(--qza-cyan));

  content:"";
}

.qza-metric::after{
  position:absolute;
  right:-38px;
  bottom:-50px;

  width:128px;
  height:128px;

  border-radius:50%;

  background:var(--metric-soft,rgba(40,206,224,.09));

  content:"";
}

.qza-metric > *{
  position:relative;
  z-index:1;
}

.qza-metric.cyan{
  --metric-color:var(--qza-cyan);
  --metric-soft:rgba(40,206,224,.10);
}

.qza-metric.green{
  --metric-color:var(--qza-green);
  --metric-soft:rgba(37,185,133,.10);
}

.qza-metric.orange{
  --metric-color:var(--qza-orange);
  --metric-soft:rgba(239,163,59,.10);
}

.qza-metric.red{
  --metric-color:var(--qza-red);
  --metric-soft:rgba(232,102,114,.10);
}

.qza-metric.purple{
  --metric-color:var(--qza-purple);
  --metric-soft:rgba(117,109,230,.10);
}

.qza-metric.gold{
  --metric-color:var(--qza-gold);
  --metric-soft:rgba(215,169,79,.10);
}

.qza-metric span{
  color:#688193;

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

.qza-metric strong{
  display:block;

  margin-top:11px;

  color:var(--qza-text);

  font-size:29px;
  line-height:1;
  letter-spacing:-.05em;
}

.qza-metric small{
  display:block;

  margin-top:6px;

  color:var(--qza-muted);

  font-size:8px;
  line-height:1.4;
}

.qza-list{
  display:grid;
  gap:8px;
}

.qza-list-row{
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;

  min-height:55px;
  padding:10px 11px;

  border:1px solid #e0eaef;
  border-radius:14px;

  background:#fbfdfe;
}

.qza-list-row > i{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#9cb3be;
}

.qza-list-row.red > i{background:var(--qza-red)}
.qza-list-row.orange > i{background:var(--qza-orange)}
.qza-list-row.green > i{background:var(--qza-green)}
.qza-list-row.cyan > i{background:var(--qza-cyan)}
.qza-list-row.purple > i{background:var(--qza-purple)}

.qza-list-row strong{
  display:block;

  color:#264d63;

  font-size:9px;
}

.qza-list-row span{
  display:block;

  margin-top:3px;

  color:#7a919f;

  font-size:8px;
  line-height:1.35;
}

.qza-list-row button{
  min-height:29px;
  padding:0 9px;

  border:1px solid #d7e5eb;
  border-radius:9px;

  background:#fff;
  color:#315d75;

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

  cursor:pointer;
}

.qza-progress{
  height:7px;
  margin-top:12px;

  overflow:hidden;

  border-radius:999px;

  background:#e6eef2;
}

.qza-progress i{
  display:block;
  height:100%;

  border-radius:inherit;

  background:linear-gradient(90deg,#1e86c2,#2ecedc);
}

/* =========================================================
   RÉSEAU
   ========================================================= */

.qza-network-map{
  position:relative;
  overflow:hidden;

  min-height:490px;

  border:1px solid var(--qza-border);
  border-radius:23px;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(40,206,224,.07),
      transparent 45%
    ),
    linear-gradient(180deg,#fafdfe,#eef6fa);

  box-shadow:var(--qza-shadow);
}

.qza-network-map svg{
  width:100%;
  height:100%;
  min-height:490px;
}

.qza-france-shape{
  fill:#d7e9f3;
  stroke:#8bbbd1;
  stroke-width:2.2;
  stroke-linejoin:round;
}

.qza-region-line{
  fill:none;
  stroke:#c1d8e4;
  stroke-width:1;
  opacity:.7;
}

.qza-map-point-halo{
  fill:rgba(40,206,224,.18);
}

.qza-map-point{
  fill:var(--point-color,#2bca83);
  stroke:#fff;
  stroke-width:3;
}

.qza-map-label{
  fill:#123d58;
  font-size:13px;
  font-weight:900;
}

.qza-map-sub{
  fill:#6f8999;
  font-size:9px;
}

.qza-bassin-list{
  display:grid;
  gap:8px;
}

.qza-bassin{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;

  padding:12px;

  border:1px solid #dfe9ee;
  border-radius:14px;

  background:#fbfdfe;
}

.qza-bassin strong{
  display:block;

  color:var(--qza-text);

  font-size:10px;
}

.qza-bassin span{
  display:block;

  margin-top:3px;

  color:var(--qza-muted);

  font-size:8px;
}

.qza-bassin b{
  padding:6px 8px;

  border-radius:999px;

  background:#e9f9f2;
  color:#21815f;

  font-size:8px;
}

.qza-bassin.warning b{
  background:#fff4e5;
  color:#9c671f;
}

/* =========================================================
   CRM / MAIL / INTERNE / ALERTES
   ========================================================= */

.qza-search{
  display:flex;
  gap:8px;
}

.qza-search input{
  flex:1;

  min-height:43px;
  padding:0 13px;

  border:1px solid #d7e5eb;
  border-radius:12px;

  background:#fff;
  color:var(--qza-text);
}

.qza-button{
  min-height:38px;
  padding:0 12px;

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

  background:#fff;
  color:#315b73;

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

  cursor:pointer;
}

.qza-button.primary{
  border-color:#0e6c96;

  background:
    linear-gradient(
      135deg,
      #072d48,
      #0c78a5
    );

  color:#fff;

  box-shadow:0 9px 21px rgba(8,74,106,.17);
}

/* =========================================================
   FOOTBAR
   ========================================================= */

#app.app:not(.hidden) .qz-shell-dock,
#app.app:not(.hidden) .qzp-pro-dock,
#app.app:not(.hidden) .qz9-dock,
#app.app:not(.hidden) .qz-bottom-dock,
#app.app:not(.hidden) [data-qz-dock],
#app.app:not(.hidden) [data-quick-dock]{
  display:none !important;
}

.qza-footbar{
  position:fixed;
  left:calc(50% + 119px);
  bottom:13px;
  z-index:80;

  transform:translateX(-50%);

  display:flex;
  align-items:center;
  gap:6px;

  width:max-content;
  max-width:calc(100vw - 280px);

  min-height:50px;
  padding:7px 9px;

  border:1px solid rgba(93,220,230,.13);
  border-radius:18px;

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

  box-shadow:
    0 18px 46px rgba(4,23,36,.28),
    inset 0 1px 0 rgba(255,255,255,.05);

  backdrop-filter:blur(17px);
}

.qza-footbar > span{
  padding:0 10px;

  color:#85a7b8;

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

.qza-footbar button{
  display:flex;
  align-items:center;
  gap:7px;

  min-height:34px;
  padding:0 10px;

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

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

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

  cursor:pointer;
}

.qza-footbar button::before{
  display:grid;
  place-items:center;

  width:20px;
  height:20px;
  flex:0 0 20px;

  border-radius:7px;

  background:rgba(40,206,224,.11);
  color:#82e9ef;

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

.qza-footbar button.active{
  border-color:rgba(40,206,224,.27);

  background:
    linear-gradient(
      100deg,
      rgba(40,206,224,.20),
      rgba(40,206,224,.075)
    );

  color:#fff;

  box-shadow:inset 0 -2px 0 var(--qza-cyan);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1180px){
  #app.app:not(.hidden){
    grid-template-columns:218px minmax(0,1fr) !important;
  }

  #app.app:not(.hidden) > .sidebar{
    width:218px !important;
  }

  .qza-grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .qza-footbar{
    left:calc(50% + 109px);
    max-width:calc(100vw - 245px);
    overflow-x:auto;
  }
}

@media(max-width:900px){
  #app.app:not(.hidden){
    display:block !important;
  }

  #app.app:not(.hidden) > .sidebar{
    position:static !important;
    width:100% !important;
    height:auto !important;
  }

  #app.app:not(.hidden) > .workspace{
    padding:0 14px 82px !important;
  }

  #app.app:not(.hidden) .topbar{
    margin:0 -14px 18px !important;
  }

  .qza-grid-2,
  .qza-grid-3{
    grid-template-columns:1fr;
  }

  .qza-hero{
    grid-template-columns:1fr;
  }

  .qza-footbar{
    left:50%;
    max-width:calc(100vw - 22px);
  }
}

@media(max-width:620px){
  .qza-grid-4{
    grid-template-columns:1fr;
  }

  .qza-footbar > span{
    display:none;
  }

  .qza-footbar button{
    padding:0 8px;
    font-size:0;
  }
}