/* Page « domaine créé » — VOZit, refonte 24/09/2026 */
:root{
  --navy:#0e4f80;         /* bleu profond VOZit */
  --blue:#1f7fbf;
  --cyan:#28a9e0;         /* cyan du logo */
  --ink:#12222e;
  --ink-2:#5a6b76;
  --card:#ffffff;
  --card-brd:#e6edf2;
  --bg-1:#0e4f80;
  --bg-2:#28a9e0;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#eaf2f8; --ink-2:#9fb3c0;
    --card:#12212c; --card-brd:#20323f;
    --bg-1:#08344f; --bg-2:#0e4f80;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:32px 18px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(40,169,224,.45), transparent 60%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2));
  background-attachment:fixed;
}

/* Carte centrale */
.carte{
  width:100%;
  max-width:520px;
  background:var(--card);
  border:1px solid var(--card-brd);
  border-radius:20px;
  padding:44px 36px 38px;
  text-align:center;
  box-shadow:0 24px 60px rgba(6,40,64,.28);
  animation:monte .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.carte{animation:none}}

/* Pastille de succès */
.badge{
  width:74px;height:74px;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;border-radius:50%;
  background:linear-gradient(140deg,var(--cyan),var(--navy));
  box-shadow:0 10px 24px rgba(40,169,224,.45);
}

h1{
  margin:0 0 6px;
  font-size:clamp(1.9rem,6vw,2.5rem);
  font-weight:800;
  letter-spacing:-.02em;
}
.sous{
  margin:0 auto;
  max-width:34ch;
  color:var(--ink-2);
  font-size:1.02rem;
  line-height:1.5;
}

/* Nom de domaine mis en valeur */
.domaine{
  margin:22px auto 4px;
  display:inline-block;
  padding:9px 18px;
  border-radius:999px;
  background:rgba(40,169,224,.12);
  border:1px solid rgba(40,169,224,.35);
  color:var(--navy);
  font-weight:700;
  font-size:1.05rem;
  word-break:break-all;
}
@media (prefers-color-scheme:dark){ .domaine{color:var(--cyan)} }

.rule{
  height:1px;width:70%;margin:28px auto 24px;
  background:linear-gradient(90deg,transparent,var(--card-brd),transparent);
}

.logo{
  height:auto;max-width:200px;width:60%;
  display:block;margin:0 auto;
}
.baseline{
  margin:12px 0 0;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
}

/* Pied */
.pied{
  color:rgba(255,255,255,.92);
  font-size:.9rem;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.pied a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.pied a:hover{border-bottom-color:#fff}
.pied .sep{margin:0 8px;opacity:.6}

:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}