/* Layout client */
.client-wrap { padding-bottom: 44px; }
.client-center{
  display: grid;
  place-items: center;
  min-height: calc(100vh - 92px); /* correspond à padding-top */
  padding: 24px 0;
}

.client-card { width: min(720px, 100%); }

.client-form { display: grid; gap: 12px; margin-top: 14px; }
.client-field span { display:block; margin: 0 0 6px; }
.client-field input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline: none;
}
.client-field input:focus { border-color: rgba(169,255,91,.25); }

.client-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.client-links { display:flex; justify-content:space-between; gap:12px; margin-top: 6px; flex-wrap: wrap; }

.msg { min-height: 18px; }
.msg.ok { color: rgba(169,255,91,.95); }
.msg.err { color: rgba(255,120,120,.95); }

@media (max-width: 680px){
  .client-links { flex-direction: column; }
}

/* Forcer le menu en haut pour l'espace client */
header.top{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}
.client-wrap{ padding-top: 0 !important; }
.client-center{ min-height: calc(100vh - 74px) !important; }


header.top{
  width: 100% !important;
}



/* Décaler le contenu sous la barre */
.client-wrap{
  padding-top: 92px; /* 74px header + marge */
}

/* IMPORTANT : si tu avais un ancien client.css qui centre tout */
body{
  display: block !important;
}

.client-footer{
  margin-top:14px;
  display:grid;
  gap:10px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

.client-footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.chip-link{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-weight:700;
  transition:.15s;
}

.chip-link:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(169,255,91,.18);
}

/* ---- Dashboard styling (match site) ---- */
.dash-hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items:start;
}

.dash-actions{
  margin-top: 14px;
  display:grid;
  gap: 12px;
}

.order-box{
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(450px 140px at 20% 20%, rgba(169,255,91,.10), transparent 60%),
    radial-gradient(450px 140px at 80% 40%, rgba(89,215,255,.10), transparent 60%),
    rgba(255,255,255,.03);
  padding: 14px;
}

.order-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.dash-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.dash-card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding:14px 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  transition: .2s;
}

.dash-card:hover{
  border-color: rgba(169,255,91,.25);
  background: rgba(255,255,255,.04);
}


.dash-card::after{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-60%);
  opacity:0;
  transition: opacity .25s ease;
}
.dash-card:hover::after{ opacity:.35; animation: sweep 1.1s ease; }

.dash-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 10px;
}

.dash-title{
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.2px;
}


.dash-meta{
  display:grid;
  gap:6px;
  font-size:.95rem;
}


.dash-line{
  display:flex;
  justify-content:space-between;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
}

.dash-line:first-child{
  border-top:0;
  padding-top:0;
}

@media (max-width: 980px){
  .dash-hero{ grid-template-columns: 1fr; }
  .dash-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px){
  .dash-grid{ grid-template-columns: 1fr; }
}

/* ===== VPS CARDS CLEAN ===== */

.vps-card{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:18px;
  display:grid;
  gap:12px;
  box-shadow: 0 18px 70px rgba(0,0,0,.30);
}

.vps-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.vps-name{
  font-size:1.2rem;
  font-weight:800;
}

.vps-specs{
  color:var(--muted);
  font-weight:600;
}

.vps-row{
  display:flex;
  justify-content:space-between;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted);
}

.vps-row b{
  color:var(--text);
}

/* grille */
#list{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:14px;
}

@media (max-width: 900px){
  #list{grid-template-columns:1fr;}
}


/* ===== SERVICES GRID (FIX) ===== */
.dash-grid{
  margin-top: 14px;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .dash-grid{ grid-template-columns: 1fr; }
}

/* ===== SERVICE CARD (CLEAN) ===== */
.dash-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 16px;
  box-shadow: 0 18px 70px rgba(0,0,0,.30);
}

.dash-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dash-title{
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.1;
}

.dash-meta{
  display:grid;
  gap: 10px;
}

.dash-line{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.dash-line:first-child{
  border-top: 0;
  padding-top: 0;
}

.dash-line b{
  color: rgba(255,255,255,.88);
  font-weight: 800;
}

.dash-line span{
  color: rgba(255,255,255,.70);
  font-weight: 600;
}

/* ===== Novtech signature cards ===== */

.dash-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .dash-grid{ grid-template-columns: 1fr; }
}

/* Card base */
.svc-card{
  position:relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 260px at 15% 0%, rgba(89,215,255,.10), transparent 55%),
    radial-gradient(600px 260px at 85% 30%, rgba(169,255,91,.08), transparent 55%),
    rgba(255,255,255,.03);
  padding: 16px 16px 14px 18px;
  box-shadow: 0 18px 70px rgba(0,0,0,.30);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

/* left neon edge */
.svc-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 6px;
  background: linear-gradient(180deg, rgba(89,215,255,.9), rgba(169,255,91,.85));
  opacity:.65;
}
.svc-card::after{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-60%);
  opacity:0;
  transition: opacity .2s ease;
  pointer-events:none;
}

.svc-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background:
    radial-gradient(600px 260px at 15% 0%, rgba(89,215,255,.14), transparent 55%),
    radial-gradient(600px 260px at 85% 30%, rgba(169,255,91,.10), transparent 55%),
    rgba(255,255,255,.04);
}
.svc-card:hover::after{
  opacity:.35;
  animation: sweep 1.05s ease;
}

/* Accent variants */
.svc-card.accent-green::before{ background: linear-gradient(180deg, rgba(169,255,91,.95), rgba(89,215,255,.75)); }
.svc-card.accent-cyan::before{ background: linear-gradient(180deg, rgba(89,215,255,.95), rgba(169,255,91,.70)); }
.svc-card.accent-amber::before{ background: linear-gradient(180deg, rgba(255,214,120,.95), rgba(255,120,120,.70)); }
.svc-card.accent-gray::before{ background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.10)); opacity:.45; }

/* Header */
.svc-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.svc-name{
  font-weight: 900;
  letter-spacing: -.2px;
  font-size: 1.12rem;
}
.svc-sub{
  margin-top: 3px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  font-size: .9rem;
}
.svc-pill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-weight: 800;
  font-size: .82rem;
  color: rgba(255,255,255,.88);
}

/* Chips */
.svc-chips{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin: 10px 0 12px;
}
.svc-chip{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.74);
  font-weight: 700;
  font-size: .86rem;
}

/* Key/values */
.svc-grid{
  display:grid;
  gap: 8px;
  margin-top: 6px;
}
.svc-row{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.svc-row:first-child{ border-top:0; padding-top:0; }
.svc-k{ color: rgba(255,255,255,.60); font-weight: 800; }
.svc-v{ color: rgba(255,255,255,.88); font-weight: 800; }

/* Actions */
.svc-actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  opacity: .0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.svc-card:hover .svc-actions{
  opacity: 1;
  transform: translateY(0);
}

.svc-btn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.78);
  font-weight: 800;
}
.svc-btn.primary{
  border-color: rgba(169,255,91,.22);
  background: rgba(169,255,91,.10);
  color: rgba(255,255,255,.88);
}
.svc-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* ===== V2 Premium touches ===== */

/* plan icon */
.svc-icon{
  opacity:.7;
  margin-right:6px;
  font-size:.9em;
}

/* provisioning line */
.svc-provision{
  margin: 6px 0 2px;
  font-weight:700;
  font-size:.9rem;
  color: rgba(255,255,255,.65);
  display:flex;
  align-items:center;
  gap:8px;
}

/* animated dot */
.svc-provision .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background: #59d7ff;
  box-shadow: 0 0 10px #59d7ff;
  animation: pulseDot 1.4s infinite;
}

@keyframes pulseDot{
  0%{ opacity:.3; transform:scale(.9);}
  50%{ opacity:1; transform:scale(1.2);}
  100%{ opacity:.3; transform:scale(.9);}
}

/* smoother hover */
.svc-card{
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.svc-card:hover{
  box-shadow:
    0 22px 80px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* ===== Mini graphs (SaaS vibe) ===== */
.svc-mini{
  margin: 8px 0 10px;
  display: grid;
  gap: 8px;
}

.mini-row{
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  gap: 10px;
}

.mini-k{
  color: rgba(255,255,255,.55);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .2px;
}

.mini-v{
  text-align: right;
  color: rgba(255,255,255,.70);
  font-weight: 800;
  font-size: .82rem;
}

.mini-meter{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  overflow: hidden;
}

.mini-meter span{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(89,215,255,.55), rgba(169,255,91,.45));
  box-shadow: 0 0 18px rgba(89,215,255,.12);
}