Stack docker-compose Roundcube 1.7.4 (nginx, php-fpm, MariaDB) avec skin vBlog.io

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sa4nUG3GtbdEaPS6fA8eq1

theme/_styles.less

@@ -0,0 +1,75 @@
+// 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;
+}