/*
 * Bouton « Se connecter avec Microsoft » (charte Microsoft : fond clair, bordure, logo 4 carrés, libellé explicite).
 * Personnalisable par le site hôte via les variables --ml-* (hauteur, rayon, couleurs).
 */
.microsoftlogin {
    --ml-height: 46px;
    --ml-radius: 10px;
    --ml-border: #cbd5e1;
    --ml-border-hover: #94a3b8;
    --ml-text: #0f172a;
    --ml-bg: #fff;
    --ml-bg-hover: #f8fafc;
    --ml-muted: #94a3b8;
    --ml-line: #e2e8f0;
    --ml-focus: #0067b8;
    margin-top: 24px;
}
.microsoftlogin-separator { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--ml-muted); font-size: 12.5px; }
.microsoftlogin-separator::before,
.microsoftlogin-separator::after { content: ""; flex: 1; height: 1px; background: var(--ml-line); }
.microsoftlogin-button {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: var(--ml-height); padding: 0 16px; box-sizing: border-box;
    background: var(--ml-bg); color: var(--ml-text); border: 1px solid var(--ml-border); border-radius: var(--ml-radius);
    font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.microsoftlogin-button svg { flex: none; }
.microsoftlogin-button:hover,
.microsoftlogin-button:focus { background: var(--ml-bg-hover); border-color: var(--ml-border-hover); color: var(--ml-text); text-decoration: none; }
.microsoftlogin-button:active { box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08); }
.microsoftlogin-button:focus-visible { outline: 2px solid var(--ml-focus); outline-offset: 2px; }