// Compléments CSS charte vBlog.io pour le skin Elastic (Roundcube)
// Emplacement : skins/elastic/styles/_styles.less

// --- Police Poppins auto-hébergée (pas d'appel à Google Fonts) ---
// Fichiers à copier dans skins/elastic/fonts/ (source : paquet npm @fontsource/poppins, licence OFL)
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-latin-400-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-latin-700-italic.woff2') format('woff2');
}

body, button, input, optgroup, select, textarea, .popover {
    font-family: Poppins, Roboto, sans-serif;
}

// --- Bouton principal de la page de login en orange (CTA du blog) ---
#login-form .btn-primary {
    background-color: @vblog-accent;
    border-color: @vblog-accent;

    &:hover, &:focus {
        background-color: darken(@vblog-accent, 8%);
        border-color: darken(@vblog-accent, 8%);
    }
}

// --- Mode sombre : liens lisibles sur fond sombre, bouton "Écrire" en orange ---
// :where() ramène la spécificité à celle de la règle de base "a { color: @color-link }"
// de global.less : seuls les liens "nus" changent, pas les listes ni les boutons.
:where(html.dark-mode) a {
    color: lighten(@vblog-primary, 40%);

    &:hover {
        color: lighten(@vblog-primary, 50%);
    }
}

html.dark-mode {
    #taskmenu .action-buttons a {
        color: @vblog-accent;
    }

    // Elastic assombrit le logo en mode sombre (opacity .8) : on le laisse net
    #logo {
        opacity: 1;
    }
}

// --- Logo du menu latéral : l'emblème est presque carré, on lui laisse de l'air ---
#layout-menu .popover-header img {
    padding: .6rem;
}