/* ══ CONNEXIONS EXTERNES SUR login.php (17/09) — balisage : login.php ══ */
.cx-externes{display:grid;gap:.6rem;margin:0 0 1rem}
.cx-externe{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.7rem 1rem;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--text,inherit);font-weight:600;text-decoration:none}
.cx-externe:hover{border-color:#0a6cf5;text-decoration:none}
.cx-externe svg{width:20px;height:20px;flex:none}
.cx-ou{display:flex;align-items:center;gap:.8rem;margin:0 0 1rem;color:var(--muted);font-size:.85rem}
.cx-ou::before,.cx-ou::after{content:"";flex:1;height:1px;background:var(--line)}

/* == TEXTE ET CHAMPS AGRANDIS (17/09, demande client) =====================
   Même traitement que la page d'inscription : sur ordinateur et tablette,
   tout ce qui se lit et se remplit grossit, la carte gardant sa largeur.
   Rien sous 721 px : un champ sous 16 px fait zoomer iOS, et la taille
   d'origine y est déjà la bonne. */
@media (min-width:721px){
  .auth-card{padding:2.4rem 2.2rem}
  .auth-card h1{font-size:1.7rem !important;margin-bottom:.5rem}
  .auth-card .muted{font-size:1.02rem !important;line-height:1.5}
  .auth-card .field label{font-size:1rem;margin-bottom:.35rem}
  .auth-card .field input{height:56px;font-size:17px;padding:0 1rem}
  .auth-card .champ-oeil input{padding-right:3rem}
  .auth-card .btn-block{min-height:56px;font-size:17px}
  .auth-card .auth-alt{font-size:1rem}
  .cx-externe{padding:.95rem 1rem;font-size:16.5px}
  .cx-externe svg{width:22px;height:22px}
  .cx-ou{font-size:.95rem}
}