/* ===========================================================================
   Awoui — RELIER VOTRE MACHINE. Une carte, une clé, deux commandes.
   Les couleurs sont celles du socle (tokens.css) ; rien de figé ici.
   =========================================================================== */
/* `hidden` NE SUFFIT PAS quand l'auteur pose un `display` (flex, grid) : la
   règle du navigateur perd. Même famille de bugs que dans bureau.css. */
.vpn [hidden]{display:none !important}
.vpn{padding:56px 0 80px}
.vpn-in{max-width:720px}
.vpn h1{margin:6px 0 8px;font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1.15}
.vpn-sous{margin:0 0 26px;color:var(--muted);font-size:1.02rem}
.vpn-carte{
  padding:22px 24px 24px;border:1px solid var(--line);border-radius:16px;background:var(--bg-1);
  display:grid;gap:16px;
}
.vpn-etat{margin:0;color:var(--muted);font-size:.95rem}
.vpn-etat.mal{color:var(--warn)}
.vpn-etat.bien{color:var(--emerald)}
.vpn-bouton{
  justify-self:start;min-height:44px;padding:0 18px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--bg-2);color:var(--text);font:600 .95rem/1 inherit;
}
.vpn-bouton:hover{border-color:var(--cyan)}
.vpn-bouton[disabled]{opacity:.55;cursor:default}
.vpn-form{display:flex;flex-wrap:wrap;align-items:end;gap:12px 16px}
.vpn-champ{display:grid;gap:6px;flex:1 1 260px;font-size:.9rem;color:var(--muted)}
.vpn-champ input{
  min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg-0);color:var(--text);font:.95rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;outline:none;
}
.vpn-champ input:focus{border-color:var(--cyan)}
.vpn-resultat{display:grid;gap:10px}
.vpn-cle-mot{margin:6px 0 0;font:600 .72rem/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vpn-cle{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:12px 14px;border:1px solid var(--cyan);border-radius:12px;background:var(--bg-0);
}
.vpn-cle code{font:600 1.05rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;word-break:break-all;user-select:all}
.vpn-copier{
  margin-left:auto;min-height:36px;padding:0 12px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-2);color:var(--text);font:.8rem/1 ui-monospace,monospace;letter-spacing:.06em;
}
.vpn-copier:hover{border-color:var(--cyan)}
.vpn-note{margin:0;font-size:.9rem;color:var(--muted)}
.vpn-resultat h2{margin:14px 0 0;font-size:1rem}
.vpn-cmd{
  margin:0;padding:12px 14px;border-radius:10px;overflow:auto;
  background:var(--bg-0);border:1px solid var(--line);
  font:.88rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);white-space:pre;
}
.vpn-texte{margin:0;font-size:.95rem;line-height:1.55}
.vpn-texte code{font:.88em ui-monospace,monospace;background:var(--bg-2);padding:1px 5px;border-radius:4px}
@media (max-width:560px){.vpn{padding:34px 0 60px}.vpn-carte{padding:18px 16px 20px}}