/* Style minimal et uniforme */
:root{
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22c55e;
  --danger:#ef4444;
  --link:#60a5fa;
  --ring: rgba(96,165,250,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:100px;
}
.container{
  width:100%;
  max-width:520px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
h1{font-size:1.6rem;margin:.25rem 0 1rem}
p{color:var(--muted);line-height:1.5}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.form-row{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px}
label{font-weight:600}
input{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:#0b1020;color:var(--text);outline:none;
}
input:focus{border-color:var(--link);box-shadow:0 0 0 6px var(--ring)}
button{
  width:100%;padding:12px 14px;border-radius:12px;border:0;cursor:pointer;
  background:var(--accent);color:#042; font-weight:800; letter-spacing:.2px;
}
button:hover{filter:brightness(1.05)}
.btn-secondary{background:#1f2937;color:var(--text);}
.btn-danger{background:var(--danger);color:#180a0a}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:12px}
.notice{padding:10px 12px;border-radius:12px;background:#0b1220;border:1px solid rgba(255,255,255,.06);margin-top:12px}
.small{font-size:.9rem;color:var(--muted)}
.center{text-align:center}
footer{margin-top:16px;color:var(--muted);font-size:.85rem;text-align:center}
.success{color:#22c55e}
.error{color:#ef4444}
hr{border:0;height:1px;background:rgba(255,255,255,.08);margin:16px 0}
.badge{
  display:inline-block;padding:6px 10px;border-radius:999px;background:#0b1220;border:1px solid rgba(255,255,255,.08);
  font-size:.8rem;color:var(--muted);
}

    /* Élément caché par défaut by ario */
    #mobile-only {
      display: none;
    }

    /* Afficher uniquement sur les écrans <= 768px (smartphones/tablettes) */
    @media screen and (max-width: 268px) {
      #mobile-only {
        display: block;
        background: #007bff;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 8px;
      }
    }