/* ============================================================
   SERVER — server.maestrow.com  ·  Cloud personnel
   Identité 2026-07 : ORANGE sur fond clair, Space Grotesk.
   ============================================================ */
body{
  --dc-accent:#c2410c;
  --dc-accent-2:#f97316;
  --dc-accent-deep:#9a3412;
}

/* Fond dégradé continu */
#bg-gradient{
  background:
    radial-gradient(680px 520px at 20% 760px, rgba(249,115,22,0.24), transparent 66%),
    radial-gradient(600px 480px at 84% 700px, rgba(194,65,12,0.22), transparent 64%),
    radial-gradient(520px 440px at 55% 900px, rgba(154,52,18,0.16), transparent 68%),
    linear-gradient(180deg, #ffffff 0%, #fdf1ea 44%, #ffffff 82%);
}

/* ---------- 1. Hero split ---------- */
.srv-hero{padding:60px 0 80px;}
.srv-hero__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.srv-hero__text .dc-eyebrow{margin-bottom:20px;}
.srv-hero__text h1{max-width:12ch;}
.srv-hero__sub{margin-top:22px;font-size:18px;line-height:1.55;color:var(--dc-body);max-width:46ch;}
.srv-hero__actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}

/* Panneau console sombre */
.srv-console{
  background:var(--dc-dark);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  overflow:hidden;
  font-family:"Space Grotesk",sans-serif;
}
.srv-console__bar{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.srv-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,0.22);}
.srv-console__title{
  margin-left:8px;font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:-0.01em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.srv-console__body{padding:12px 16px 16px;}
.srv-inst{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,0.07);
  min-width:0;
}
.srv-inst__led{
  width:9px;height:9px;border-radius:50%;background:#6b7280;flex:0 0 auto;
}
.srv-inst__led.is-up{
  background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,0.6);
  animation:srv-pulse 2.4s ease-out infinite;
}
@keyframes srv-pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,0.5);}
  70%{box-shadow:0 0 0 7px rgba(74,222,128,0);}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
}
.srv-inst__name{
  font-size:16px;font-weight:600;color:#fff;letter-spacing:-0.01em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.srv-inst__name--off{color:rgba(255,255,255,0.42);}
.srv-inst__meta{
  justify-self:end;text-align:right;max-width:100%;
  font-size:13px;color:rgba(255,255,255,0.5);white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis;
}
.srv-console__foot{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  margin-top:12px;padding-top:6px;
  font-size:13px;color:rgba(255,255,255,0.55);
}
.srv-console__ok{color:#4ade80;}

/* ---------- 2. Specs (grosses valeurs) ---------- */
.srv-specs{padding:88px 0 44px;}
.srv-spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.srv-spec{
  padding:28px;
  border:1px solid var(--dc-line);border-radius:14px;background:#fff;
}
.srv-spec__value{
  display:block;
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:64px;line-height:1;letter-spacing:-0.04em;color:var(--dc-ink);
}
.srv-spec__sub{font-size:26px;margin-left:4px;color:var(--dc-muted);}
.srv-spec__unit{
  display:block;margin-top:8px;
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--dc-accent);
}
.srv-spec p{margin-top:14px;font-size:15px;line-height:1.55;color:var(--dc-muted);}
.srv-bar{margin-top:20px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--dc-accent) 14%,#fff);overflow:hidden;}
.srv-bar span{display:block;height:100%;border-radius:3px;background:var(--dc-accent);transition:width .6s cubic-bezier(0.22,1,0.36,1);}
.srv-spec__use{
  display:block;margin-top:10px;
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--dc-muted);
}

/* ---------- 3. Bande status sombre pleine largeur ---------- */
.srv-status{
  margin:56px 0 0;
  background:var(--dc-dark);
  border-top:1px solid rgba(255,255,255,0.1);
  border-bottom:1px solid rgba(255,255,255,0.1);
  padding:56px 0;
}
.srv-status__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.srv-status__col{padding:6px 28px;border-left:1px solid rgba(255,255,255,0.12);}
.srv-status__col:first-child{padding-left:0;border-left:0;}
.srv-status__col h3{color:#fff;font-size:18px;margin-bottom:10px;}
.srv-status__col p{font-size:15px;line-height:1.55;color:rgba(255,255,255,0.62);}

/* ---------- 4. Étapes ---------- */
.srv-steps-wrap{padding:80px 0 8px;}

/* ---------- 5. CTA ---------- */
.srv-cta-wrap{padding:76px 0 0;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .srv-hero__grid{grid-template-columns:1fr;gap:36px;}
  .srv-hero__text h1{max-width:100%;}
  .srv-spec-grid{grid-template-columns:1fr;}
  .srv-status__grid{grid-template-columns:1fr 1fr;gap:28px 0;}
  .srv-status__col{padding:6px 24px;}
  .srv-status__col:nth-child(odd){padding-left:0;border-left:0;}
}
@media (max-width:760px){
  .srv-hero{padding:44px 0 56px;}
  .srv-specs{padding:60px 0 32px;}
  .srv-status{margin-top:44px;padding:44px 0;}
  .srv-steps-wrap{padding:56px 0 4px;}
  .srv-cta-wrap{padding:56px 0 0;}
}
@media (max-width:480px){
  .srv-inst{
    grid-template-columns:auto 1fr;grid-template-areas:"led name" "meta meta";
    row-gap:4px;
  }
  .srv-inst__led{grid-area:led;}
  .srv-inst__name{grid-area:name;}
  .srv-inst__meta{
    grid-area:meta;justify-self:start;text-align:left;
    white-space:normal;overflow-wrap:anywhere;font-size:12px;
  }
}
@media (max-width:400px){
  .srv-status__grid{grid-template-columns:1fr;}
  .srv-status__col{padding:6px 0;border-left:0;}
  .srv-spec__value{font-size:52px;}
}