:root{
  /* Palette VoipDFK (approx. depuis ton screenshot) */
  --blueA:#1E3A8A;   /* ~ (30,58,138) */
  --blueB:#1E40AF;   /* ~ (30,64,175) */
  --text:#f2f6ff;
  --muted:rgba(255,255,255,.75);

  /* Cards / lines */
  --card:rgba(255,255,255,.08);
  --card2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.14);

  --accent:#9CC3FF;
  --kbd:rgba(0,0,0,.35);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 20% 15%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(900px 600px at 80% 10%, rgba(0,0,0,.18), transparent 55%),
    linear-gradient(135deg, var(--blueA), var(--blueB));
  min-height:100vh;
}

.wrap{
  max-width:900px;
  margin:38px auto;
  padding:0 16px 24px;
}

.hero{
  padding:18px 18px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  backdrop-filter: blur(10px);
}

h1{
  margin:0;
  font-size:30px;
  letter-spacing:.2px;
}

.sub{
  margin-top:6px;
  color:var(--muted);
  font-size:14px;
}

.actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{ background:rgba(255,255,255,.08); }

.card{
  margin-top:14px;
  padding:18px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--card);
  backdrop-filter: blur(10px);
}

h2{
  margin:0 0 10px;
  font-size:18px;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.kbd{
  display:inline-block;
  padding:6px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--kbd);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.muted{ color:var(--muted); }

.steps{
  display:grid;
  gap:12px;
}

.step{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--card2);
}

.stepTitle{
  font-weight:700;
  margin-bottom:6px;
}

ul{ margin:10px 0 0 18px; }
li{ margin:6px 0; }

.footer{
  margin-top:18px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

/* Print */
@media print{
  body{ background:#fff; color:#000; }
  .hero,.card{ background:#fff; color:#000; border:1px solid #ddd; backdrop-filter:none; }
  a{ color:#000; text-decoration:underline; }
  .actions,.btn,.footer{ display:none !important; }
  .kbd{ background:#f5f5f5; color:#000; border:1px solid #bbb; }
  .muted{ color:#333; }
}
.iframeWrap{
  margin-top:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  overflow:hidden;
}

.iframeWrap iframe{
  width:100%;
  height:520px;           /* ajuste si tu veux */
  border:0;
  display:block;
  background:#fff;        /* si la page met du blanc */
}

@media (max-width: 640px){
  .iframeWrap iframe{
    height:620px;
  }
}
.miniPreview{
  margin-top:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  overflow:hidden;
}

.miniRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.10);
}
.miniRow:first-child{ border-top:none; }

.miniBadge{
  display:inline-flex;
  min-width:74px;
  justify-content:center;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:#fff;
  font-size:13px;
}

.miniText{
  flex:1;
  color:rgba(255,255,255,.82);
  font-size:13px;
}

.miniTag{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(147,197,253,.28);
  background:rgba(147,197,253,.12);
  color:rgba(191,219,254,.95);
  font-size:12px;
  font-weight:600;
}

.btnLink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(147,197,253,.30);
  background:rgba(147,197,253,.14);
  color:rgba(191,219,254,.95);
  font-weight:700;
  text-decoration:none;
  transition: .15s ease;
}
.btnLink:hover{ background:rgba(147,197,253,.22); }

.btnLinkGhost{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.90);
  font-weight:600;
  text-decoration:none;
  transition: .15s ease;
}
.btnLinkGhost:hover{ background:rgba(255,255,255,.08); }