/* style.css — simple et "stylé" pour ton HTML */

:root{
  --bg1:#0b0f1a;
  --bg2:#131a2a;
  --accent:#8b5cf6;
  --accent2:#22d3ee;
  --text:#e8eefc;
  --muted:#a9b4d0;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1000px 600px at 10% 10%, rgba(139,92,246,.25), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(34,211,238,.18), transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}

/* “Carte” centrale même si ton HTML n’a pas de div wrapper */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      transparent 1px,
      transparent 14px
    );
  pointer-events:none;
  mix-blend-mode: soft-light;
  opacity:.35;
}

h1{
  margin:0 0 18px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:800;
  font-size: clamp(28px, 4vw, 46px);
  text-align:center;
  position:relative;
  padding-bottom:14px;
}

/* underline néon */
h1::after{
  content:"";
  display:block;
  height:3px;
  width:min(360px, 70%);
  margin: 14px auto 0;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 18px rgba(139,92,246,.55), 0 0 18px rgba(34,211,238,.35);
}

/* Le texte PHP affiché (HTTP/2.0 etc.) */
body{
  flex-direction:column;
}

/* cible le texte brut rendu après le h1 en le stylant via une astuce :
   on transforme la zone après h1 comme un “badge” */
h1 + *{
  margin:0;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--muted);
  font-weight:600;
  letter-spacing:.04em;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* au cas où le serveur renvoie un simple texte sans balise,
   on garde une mise en page propre */
@media (max-width: 520px){
  body{ padding:16px; }
}