:root{
  --bg:#050816;
  --bg-soft:#090f22;
  --card:rgba(10,16,35,.82);
  --card2:rgba(13,24,48,.72);
  --white:#f7f8ff;
  --muted:#aeb8d8;
  --muted2:#7f8bb0;
  --cyan:#38f7ee;
  --violet:#bd4bff;
  --violet2:#7d2cff;
  --blue:#1778ff;
  --blue2:#36c7ff;
  --green:#a6ff53;
  --danger:#ff4d6d;
  --warning:#ffb020;
  --border:rgba(255,255,255,.12);
  --shadow:0 24px 80px rgba(0,0,0,.42);
  --radius:24px;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--white);
  background:var(--bg) url('../img/neon-grid.svg') center top/cover fixed;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(18px);
  background:rgba(5,8,22,.78);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.03em}
.logo img{width:190px;height:auto}.navlinks{display:flex;gap:18px;align-items:center;color:var(--muted);font-weight:700;font-size:14px}.navlinks a:hover{color:var(--cyan)}
.cart-pill{position:relative;border:1px solid rgba(56,247,238,.35);padding:10px 15px;border-radius:999px;background:rgba(56,247,238,.09);color:var(--white);font-weight:900;cursor:pointer}.cart-pill span{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:999px;background:var(--cyan);color:#06101f;font-size:12px;margin-left:6px}
.hero{padding:78px 0 36px}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:center}.eyebrow{display:inline-flex;gap:10px;align-items:center;border:1px solid rgba(56,247,238,.35);background:rgba(56,247,238,.08);color:var(--cyan);padding:7px 12px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.h1{font-size:clamp(42px,6vw,74px);line-height:.95;letter-spacing:-.075em;margin:22px 0 18px}.lead{font-size:clamp(17px,2vw,22px);color:#d8ddf4;max-width:780px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:15px;padding:13px 18px;font-weight:900;cursor:pointer;transition:.2s transform,.2s opacity,.2s box-shadow;min-height:48px}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#06101f;box-shadow:0 14px 42px rgba(56,247,238,.22)}.btn-violet{background:linear-gradient(135deg,#e35dff,var(--violet2));color:#fff;box-shadow:0 14px 42px rgba(189,75,255,.28)}.btn-blue{background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;box-shadow:0 14px 42px rgba(23,120,255,.28)}.btn-ghost{border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--white)}.mini-features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}.mini{display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:18px;padding:14px}.mini .ico{width:36px;height:36px;display:grid;place-items:center;border-radius:13px;background:rgba(189,75,255,.14);color:var(--violet);flex:0 0 auto}.mini strong{display:block;font-size:13px}.mini span{color:var(--muted);font-size:12px}.tech-card{border:1px solid var(--border);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(8,18,38,.62));padding:28px;box-shadow:var(--shadow)}.tech-card h2{margin:0 0 20px;font-size:22px}.chips{display:flex;gap:12px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);border-radius:999px;padding:9px 13px;color:#dbe4ff;font-weight:800;font-size:13px}.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--cyan);box-shadow:0 0 18px currentColor}.dot.violet{background:var(--violet);color:var(--violet)}.dot.blue{background:var(--blue2);color:var(--blue2)}
.section{padding:34px 0}.section-head{text-align:center;margin-bottom:28px}.section-head h2{font-size:clamp(30px,4vw,48px);line-height:1;letter-spacing:-.04em;margin:0}.section-head p{color:var(--muted);margin:12px auto 0;max-width:780px}.neon-title{position:relative;text-align:center;font-size:clamp(32px,5vw,58px);font-weight:1000;letter-spacing:.18em;text-transform:uppercase;margin:20px 0 24px;line-height:1}.neon-violet{color:#f1ccff;text-shadow:0 0 8px #bd4bff,0 0 24px #bd4bff,0 0 56px #7d2cff}.neon-blue{color:#c8e7ff;text-shadow:0 0 8px #36c7ff,0 0 24px #1778ff,0 0 56px #1778ff}.pricing-zone{border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(13,18,42,.72),rgba(5,8,22,.72));border-radius:28px;padding:18px 20px 28px;box-shadow:var(--shadow);margin-bottom:28px}.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.card{position:relative;min-height:100%;border:1px solid var(--border);border-radius:22px;background:linear-gradient(180deg,rgba(12,18,38,.88),rgba(5,10,24,.92));padding:22px;overflow:hidden}.card::after{content:"";position:absolute;inset:-80px -80px auto auto;width:180px;height:180px;border-radius:50%;background:var(--glow,rgba(56,247,238,.12));filter:blur(28px);opacity:.85;pointer-events:none}.card.violet{border-color:rgba(189,75,255,.42);--glow:rgba(189,75,255,.22)}.card.blue{border-color:rgba(23,120,255,.48);--glow:rgba(23,120,255,.22)}.card.featured{box-shadow:0 0 0 1px rgba(189,75,255,.55),0 0 42px rgba(189,75,255,.25)}.ribbon{position:absolute;right:18px;top:0;transform:translateY(-1px);background:linear-gradient(90deg,#d958ff,#8732ff);font-size:11px;font-weight:1000;padding:7px 12px;border-radius:0 0 12px 12px}.card h3{font-size:24px;margin:0 0 12px;letter-spacing:-.03em}.provider-line{color:var(--muted2);font-weight:800;font-size:12px;margin-top:-7px;margin-bottom:12px}.price{display:flex;align-items:flex-end;gap:8px;margin:12px 0}.price strong{font-size:48px;line-height:.95;letter-spacing:-.06em}.price span{color:#dbe4ff;font-weight:900;margin-bottom:7px}.locations{display:flex;gap:6px;flex-wrap:wrap;margin:13px 0}.location{font-size:10px;color:#dfe7ff;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.055);padding:5px 7px;border-radius:999px}.specs{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px;color:#e8ecff;font-weight:700}.specs li{display:flex;gap:9px;align-items:center}.check{color:var(--green);font-weight:1000}.select-row{display:grid;gap:7px;margin:18px 0}.select-row label{font-size:12px;color:var(--muted);font-weight:900}.select-row select,.qty-input{width:100%;border:1px solid var(--border);background:rgba(255,255,255,.06);border-radius:12px;color:var(--white);padding:11px 12px;outline:none}.select-row select option{background:#0a1023;color:#fff}.card .btn{width:100%;margin-top:10px}.small-note{font-size:12px;color:var(--muted);margin-top:10px}.services{display:grid;grid-template-columns:1fr 1.35fr 1.35fr .95fr;gap:18px;border:1px solid rgba(56,247,238,.18);border-radius:28px;padding:24px;background:linear-gradient(135deg,rgba(56,247,238,.06),rgba(23,120,255,.08),rgba(189,75,255,.05));box-shadow:var(--shadow)}.services-intro h2{font-size:32px;line-height:1;margin:0 0 12px}.service-card{border:1px solid var(--border);border-radius:20px;background:rgba(5,10,24,.62);padding:20px}.service-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.service-top h3{margin:0;font-size:19px;line-height:1.12}.service-price{font-size:28px;font-weight:1000;letter-spacing:-.04em}.service-card .btn{width:100%;margin-top:16px}.cta-box{border:1px solid rgba(56,247,238,.18);border-radius:20px;background:linear-gradient(145deg,rgba(56,247,238,.12),rgba(23,120,255,.14));padding:22px;display:flex;flex-direction:column;justify-content:space-between}.cta-box h3{font-size:24px;line-height:1.08;margin:0}.footer-trust{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;color:#dbe4ff;margin:24px 0 8px;font-weight:800}.cart-page{padding:54px 0}.panel{border:1px solid var(--border);border-radius:26px;background:rgba(7,12,28,.82);padding:24px;box-shadow:var(--shadow)}.cart-table{width:100%;border-collapse:collapse}.cart-table th,.cart-table td{text-align:left;padding:15px 10px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:middle}.cart-table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.remove{border:0;background:rgba(255,77,109,.12);color:#ffb3c0;border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:900}.summary{margin-left:auto;max-width:430px;display:grid;gap:10px}.summary-line{display:flex;justify-content:space-between;color:#dbe4ff}.summary-line.total{font-size:24px;font-weight:1000;color:var(--white);padding-top:10px;border-top:1px solid var(--border)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:13px;color:var(--muted);font-weight:900}.field input,.field textarea,.field select{border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--white);border-radius:14px;padding:13px 14px;outline:none}.field textarea{min-height:110px;resize:vertical}.notice{border:1px solid rgba(56,247,238,.24);background:rgba(56,247,238,.08);padding:14px 16px;border-radius:16px;color:#dbe4ff}.admin-layout{display:grid;grid-template-columns:330px 1fr;gap:22px}.order-card{border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.04);padding:16px;margin-bottom:14px}.order-card header{display:flex;justify-content:space-between;gap:12px}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(56,247,238,.10);color:var(--cyan);font-size:12px;font-weight:1000}.empty{padding:28px;text-align:center;color:var(--muted)}
@media (max-width:1050px){.hero-grid,.pricing-grid,.services,.admin-layout{grid-template-columns:1fr 1fr}.mini-features{grid-template-columns:1fr 1fr}.services-intro,.cta-box{grid-column:1/-1}}
@media (max-width:720px){.container{width:min(100% - 24px,var(--max))}.nav{align-items:flex-start}.navlinks{display:none}.hero{padding-top:46px}.hero-grid,.pricing-grid,.services,.form-grid,.admin-layout{grid-template-columns:1fr}.mini-features{grid-template-columns:1fr}.h1{font-size:44px}.price strong{font-size:42px}.cart-table thead{display:none}.cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}.cart-table tr{border-bottom:1px solid rgba(255,255,255,.12);padding:10px 0}.cart-table td{border:0;padding:7px 0}.summary{max-width:none}.topbar{position:relative}}


/* Administration serveur : titre au-dessus des produits + formulaire contact */
.admin-section{padding-top:44px}
.admin-head{margin-bottom:22px}
.admin-head .eyebrow{margin-bottom:14px}
.admin-head h2{font-size:clamp(34px,5vw,58px);line-height:.95;letter-spacing:-.055em;margin-top:16px}
.admin-services-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(360px,.95fr);align-items:stretch}
.admin-services-grid .service-card{height:100%;display:flex;flex-direction:column;justify-content:space-between}
.admin-services-grid .service-card .specs{margin-top:22px}
.admin-services-grid .cta-box{min-height:100%;gap:18px}
.contact-form{display:flex;flex-direction:column;justify-content:flex-start}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 4px}
.contact-field{display:grid;gap:7px}
.contact-field.full{grid-column:1/-1}
.contact-field span{font-size:12px;color:#dbe4ff;font-weight:900}
.contact-field input,.contact-field select,.contact-field textarea{width:100%;border:1px solid rgba(255,255,255,.16);background:rgba(3,8,22,.62);color:var(--white);border-radius:14px;padding:12px 13px;outline:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{border-color:rgba(56,247,238,.62);box-shadow:0 0 0 4px rgba(56,247,238,.08)}
.contact-field select option{background:#0a1023;color:#fff}
.contact-field textarea{min-height:120px;resize:vertical}
.form-message{min-height:22px;font-size:12px;color:#dbe4ff;font-weight:800}
.form-message.success{color:var(--green)}
.form-message.error{color:#ffb3c0}
@media (max-width:1050px){.admin-services-grid{grid-template-columns:1fr 1fr}.admin-services-grid .contact-form{grid-column:1/-1}.admin-head{text-align:left}}
@media (max-width:720px){.admin-services-grid{grid-template-columns:1fr}.contact-fields{grid-template-columns:1fr}.admin-head{text-align:center}}

/* Mise à jour 2026-07-05 : STARTER / PROS + bloc Administration serveur compact */
.admin-section{padding-top:46px}
.admin-head{margin-bottom:18px}
.admin-head .eyebrow{display:none!important}
.admin-head h2{font-size:clamp(42px,5.5vw,68px);line-height:.9;letter-spacing:-.07em;margin:0;text-align:center}
.admin-services-grid{grid-template-columns:repeat(2,minmax(260px,390px))!important;justify-content:center;align-items:stretch;gap:18px;max-width:900px;padding:18px;background:linear-gradient(135deg,rgba(56,247,238,.055),rgba(23,120,255,.07),rgba(189,75,255,.04))}
.admin-services-grid .service-card{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;border-radius:18px;min-height:0}
.admin-services-grid .service-card .specs{gap:7px;margin:14px 0!important;font-size:14px}
.admin-services-grid .service-top h3{font-size:17px;line-height:1.08}
.admin-services-grid .provider-line{font-size:11px;margin-top:6px;margin-bottom:0}
.admin-services-grid .service-price{font-size:24px;line-height:1.05;max-width:120px;text-align:right}
.admin-services-grid .service-card .btn{min-height:42px;padding:10px 14px;margin-top:10px;border-radius:14px}
.admin-contact-dialog{margin-top:20px}
.admin-contact-dialog .contact-form{max-width:940px;margin:0 auto;padding:24px;border-radius:24px;background:linear-gradient(145deg,rgba(56,247,238,.10),rgba(23,120,255,.13),rgba(6,12,28,.86));box-shadow:0 24px 80px rgba(0,0,0,.34);border-color:rgba(56,247,238,.22);gap:16px}
.admin-contact-dialog .contact-form h3{font-size:clamp(24px,3vw,34px);line-height:1;margin:0 0 8px}
.admin-contact-dialog .contact-fields{margin-top:4px}
.admin-contact-dialog .contact-form .btn{align-self:flex-start;min-width:220px}
@media (max-width:1050px){.admin-services-grid{grid-template-columns:1fr 1fr!important;max-width:none}.admin-contact-dialog .contact-form{max-width:none}.admin-head{text-align:center}}
@media (max-width:720px){.admin-services-grid{grid-template-columns:1fr!important}.admin-head h2{font-size:42px}.admin-contact-dialog .contact-form .btn{width:100%}}