/* =====================================================================================================
   Webmail VSP TECH : habillage du thème Elastic de Roundcube 1.7 (chargé après lui).
   Thème Elastic © The Roundcube Dev Team, CC BY-SA 3.0 : cette feuille le surcharge sans le recopier.
   Ergonomie des grands webmails : barre du haut (logo, recherche, compte), rail des applications,
   bouton « Nouveau message », dossiers en pastilles, liste dense, volet de lecture, rédaction en panneau.
   Couleurs et polices de vsptech.host ; en marque blanche, vsp_brand.php remplace --vsp-accent-*.
   Polices Plus Jakarta Sans et Poppins : SIL Open Font License 1.1 (copiées du site).
   ===================================================================================================== */

/* ---------- Polices ---------- */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Couleurs (mode clair, puis sombre) ---------- */
html {
  --vsp-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vsp-title: 'Poppins', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vsp-navy: #2c3e50; --vsp-navy-2: #34495e; --vsp-navy-dark: #1a252f;
  --vsp-accent: #e67e22; --vsp-accent-strong: #d35400; --vsp-on-accent: #fff;
  --vsp-accent-soft: #fdebd7; --vsp-accent-tint: #fef6ee; --vsp-accent-ink: #9a3f06;
  --vsp-link: #b4530a;
  --vsp-bg: #f4f6f9; --vsp-surface: #fff; --vsp-surface-2: #f6f8fa; --vsp-surface-3: #e9edf2;
  --vsp-line: #e7ebf0; --vsp-line-2: #d5dce4;
  --vsp-ink: #22303d; --vsp-ink-2: #3c4b5a; --vsp-muted: #66768a; --vsp-faint: #98a4b1;
  --vsp-search: #e8ecf1; --vsp-hero: #1f2d3d; --vsp-hero-2: #2c3e50;
  --vsp-success: #1f9d55; --vsp-danger: #d64545; --vsp-flag: #e09b12;
  --vsp-focus: 0 0 0 3px rgba(230, 126, 34, .3);
  --vsp-shadow-1: 0 1px 2px rgba(23, 37, 52, .06), 0 1px 3px rgba(23, 37, 52, .05);
  --vsp-shadow-2: 0 2px 6px rgba(23, 37, 52, .08), 0 8px 24px rgba(23, 37, 52, .08);
  --vsp-shadow-3: 0 24px 64px rgba(16, 26, 38, .24), 0 2px 8px rgba(16, 26, 38, .12);
  --vsp-r: 16px; --vsp-top: 64px; --vsp-rail: 80px; --vsp-side: 256px; --vsp-brandw: 336px;
}
/* Marque blanche : gris neutres à la place du bleu nuit de VSP TECH (la couleur du revendeur est injectée par vsp_brand.php) */
html body.vsp-wl { --vsp-navy: #29323c; --vsp-navy-2: #333d48; --vsp-navy-dark: #1d242b; --vsp-hero: #1f262e; --vsp-hero-2: #2b343e; }
html.dark-mode {
  --vsp-accent-strong: #f0943a; --vsp-accent-soft: rgba(230, 126, 34, .2); --vsp-accent-tint: rgba(230, 126, 34, .1); --vsp-accent-ink: #f6b26b;
  --vsp-link: #f3a35c;
  --vsp-bg: #0f171f; --vsp-surface: #16212b; --vsp-surface-2: #1b2834; --vsp-surface-3: #22313f;
  --vsp-line: #243341; --vsp-line-2: #31445a;
  --vsp-ink: #e4eaf0; --vsp-ink-2: #c3ced9; --vsp-muted: #91a0af; --vsp-faint: #6c7b8a;
  --vsp-search: #1d2a36; --vsp-hero: #131e29; --vsp-hero-2: #1b2a38;
  --vsp-shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --vsp-shadow-2: 0 4px 18px rgba(0, 0, 0, .35); --vsp-shadow-3: 0 24px 64px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---------- Base ---------- */
html body, html .popover, html button, html input, html optgroup, html select, html textarea,
html div.tox, html div.tox :not(.svg), html .message-part blockquote span.blockquote-link { font-family: var(--vsp-font); }
html div.tox .tox-textfield, html div.tox .tox-textarea, html div.tox .tox-listboxfield .tox-listbox--select { font-family: var(--vsp-font) !important; }
html body { color: var(--vsp-ink); background: var(--vsp-bg) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html.iframe body { background: var(--vsp-surface) !important; }
html h1, html h2, html h3, html h4, html .ui-dialog-title, html .boxtitle, html #message-header h2.subject { font-family: var(--vsp-title); letter-spacing: -.005em; }
html a, html .btn-link { color: var(--vsp-link); }
html a:hover, html .btn-link:hover { color: var(--vsp-accent-strong); }
html ::selection { background: rgba(230, 126, 34, .22); }
html input[type=checkbox], html input[type=radio], html progress { accent-color: var(--vsp-accent); }
html:not(.touch) { scrollbar-color: var(--vsp-line-2) transparent; }
html.dark-mode:not(.touch) { scrollbar-color: #3a4d61 transparent; }
html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb { background-color: #3a4d61; }
html.dark-mode:not(.touch) ::-webkit-scrollbar-track { background-color: transparent; }
html .voice { position: absolute !important; }

/* ---------- Boutons ---------- */
html .btn { border-radius: 10px; font-weight: 600; letter-spacing: .005em; transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
html .btn-primary, html .btn.btn-primary, html button.mainaction, html .button.mainaction, html input.button.mainaction, html a.button.mainaction,
html .floating-action-buttons a.button, html .ui-dialog .ui-dialog-buttonpane button.mainaction,
html div.tox .tox-dialog__footer .tox-button:not(.tox-button--secondary):not(.tox-button--naked),
html.dark-mode .btn-primary, html.dark-mode .ui-dialog .ui-dialog-buttonpane button.mainaction {
  background: var(--vsp-accent) !important; border-color: var(--vsp-accent) !important; color: var(--vsp-on-accent) !important; }
html .btn-primary:not(:disabled):hover, html button.mainaction:not(:disabled):hover, html .ui-dialog .ui-dialog-buttonpane button.mainaction:hover,
html div.tox .tox-dialog__footer .tox-button:not(.tox-button--secondary):not(.tox-button--naked):hover,
html.dark-mode .btn-primary:hover:not(:disabled) { background: var(--vsp-accent-strong) !important; border-color: var(--vsp-accent-strong) !important; }
html .btn:focus, html .btn-primary:focus, html .btn.focus { box-shadow: var(--vsp-focus) !important; }
html .btn-secondary, html .ui-dialog .ui-dialog-buttonpane button:not(.mainaction):not(.delete), html.dark-mode .btn-secondary {
  background: var(--vsp-surface) !important; border: 1px solid var(--vsp-line-2) !important; color: var(--vsp-ink) !important; }
html .btn-secondary:not(:disabled):hover, html .ui-dialog .ui-dialog-buttonpane button:not(.mainaction):not(.delete):hover { background: var(--vsp-surface-2) !important; border-color: var(--vsp-faint) !important; }
html .btn-danger, html .ui-dialog .ui-dialog-buttonpane button.delete { background: var(--vsp-danger) !important; border-color: var(--vsp-danger) !important; color: #fff !important; }

/* ---------- Champs ---------- */
html .form-control, html .custom-select, html select.form-control, html textarea.form-control, html .recipient-input, html .tagedit-list,
html.dark-mode .form-control, html.dark-mode .custom-select, html.dark-mode .recipient-input {
  border-color: var(--vsp-line-2); background-color: var(--vsp-surface); color: var(--vsp-ink); border-radius: 10px; }
html .input-group-text, html.dark-mode .input-group-text { border-color: var(--vsp-line-2); background-color: var(--vsp-surface-2); color: var(--vsp-muted); border-radius: 10px; }
html .form-control:focus, html input.form-control:focus, html textarea.form-control:focus, html select.form-control:focus, html .custom-select:focus,
html .recipient-input.focus, html .multi-input > .content.focused, html .tagedit-list[tabindex="-1"], html .input-group-text input:focus,
html div.tox.focused, html .custom-file-input:focus ~ .custom-file-label, html.dark-mode .form-control:focus {
  border-color: var(--vsp-accent) !important; box-shadow: var(--vsp-focus) !important; }
html .form-control::placeholder { color: var(--vsp-faint); }
html .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--vsp-accent) !important; border-color: var(--vsp-accent) !important; }
html .custom-switch .custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--vsp-focus) !important; }
html .custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--vsp-accent) !important; }
html .custom-switch .custom-control-input:checked:disabled ~ .custom-control-label::before { background-color: var(--vsp-accent-soft) !important; border-color: var(--vsp-accent-soft) !important; }
html .input-group a:focus { background-color: var(--vsp-accent-tint) !important; }

/* =====================================================================================================
   Cadre de l'application
   ===================================================================================================== */
html body.vsp-app #layout { background: var(--vsp-bg) !important; }
html body.vsp #layout > div > .header, html body.vsp #layout > div > .footer {
  background: transparent !important; border-color: var(--vsp-line) !important; color: var(--vsp-ink); }
html body.vsp #layout > div > .header .header-title { font-family: var(--vsp-title); font-weight: 600; font-size: 1.05rem; color: var(--vsp-ink); }
html body.vsp #layout > div > .header a.button, html body.vsp #layout > div > .footer a.button { color: var(--vsp-ink-2); }
html body.vsp #layout-sidebar, html body.vsp #layout-list, html body.vsp #layout-content { border-color: var(--vsp-line) !important; }
html body.vsp #layout-sidebar { background: transparent !important; }
html body.vsp #layout-list, html body.vsp #layout-content { background: var(--vsp-surface) !important; }
html body.vsp .column-resizer { z-index: 3; }

/* Barres d'outils : icônes rondes, libellé dans l'infobulle (title) */
html body.vsp .menu.toolbar a, html body.vsp #layout > div > .header a.button.icon { color: var(--vsp-ink-2); border-radius: 12px; }
html body.vsp .menu a:not(.disabled):hover, html body.vsp .menu a:not(.disabled):focus,
html body.vsp .header a.button.icon:not(.disabled):hover, html body.vsp .header a.button.icon:not(.disabled):focus,
html body.vsp .menu.toolbar .dropbutton:not(.disabled):hover, html.dark-mode body.vsp .menu a:not(.disabled):hover {
  background-color: var(--vsp-surface-3) !important; color: var(--vsp-ink) !important; }
html body.vsp .menu.toolbar .dropbutton a.dropdown:hover { background-color: transparent !important; }
html body.vsp .menu.toolbar a.disabled, html body.vsp .menu.toolbar .dropbutton.disabled a { opacity: .38; }
html body.vsp .menu.toolbar a.selected { color: var(--vsp-accent-strong) !important; }

/* ---------- Barre du haut, rail et colonnes (écrans de 769 px et plus) ---------- */
@media screen and (min-width: 769px) {
  html body.vsp-app #layout { padding-top: var(--vsp-top); box-sizing: border-box; position: relative; }

  /* Logo en haut à gauche */
  html body.vsp-app #layout-menu .popover-header {
    position: fixed !important; top: 0; left: 0; z-index: 12; display: flex !important; align-items: center;
    width: var(--vsp-brandw); height: var(--vsp-top); line-height: normal; padding: 0 0 0 22px !important; background: transparent !important; text-align: left; }
  html body.vsp-app #layout-menu .popover-header img { max-height: 40px; max-width: calc(var(--vsp-brandw) - 40px); width: auto; padding: 0; opacity: 1; }
  html body.vsp-app #layout-menu .popover-header a { display: none !important; }

  /* Rail des applications */
  html body.vsp-app #layout-menu { width: var(--vsp-rail) !important; min-width: var(--vsp-rail); flex: none; background: transparent !important; border: 0 !important; padding-top: 8px; overflow: visible; }
  html body.vsp-app #taskmenu { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  html body.vsp-app #taskmenu > a, html body.vsp-app #taskmenu > span > a:not(.compose) {
    width: var(--vsp-rail) !important; height: auto !important; min-width: 0; padding: 4px 0 8px !important; margin: 0;
    display: flex !important; flex-direction: column; align-items: center; gap: 4px;
    background: transparent !important; color: var(--vsp-ink-2) !important; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; }
  html body.vsp-app #taskmenu > a:before, html body.vsp-app #taskmenu > span > a:not(.compose):before {
    width: 56px !important; height: 32px !important; line-height: 32px !important; margin: 0 !important; float: none !important;
    border-radius: 16px; font-size: 17px; color: var(--vsp-ink-2); transition: background-color .15s, color .15s; }
  html body.vsp-app #taskmenu > a:hover:before, html body.vsp-app #taskmenu > a:focus-visible:before { background: var(--vsp-surface-3); }
  html body.vsp-app #taskmenu > a.selected:before { background: var(--vsp-accent-soft); color: var(--vsp-accent-ink); }
  html body.vsp-app #taskmenu > a.selected { color: var(--vsp-ink) !important; }
  html body.vsp-app #taskmenu span.inner { display: block !important; font-size: 12px; padding: 0; max-width: calc(var(--vsp-rail) - 8px); overflow: hidden; text-overflow: ellipsis; }

  /* Bouton de rédaction : carré orange en tête du rail */
  html body.vsp-app #taskmenu .action-buttons { display: block; margin: 0 0 10px; }
  html body.vsp-app #taskmenu a.compose {
    display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 56px !important; height: 56px !important; padding: 0 !important; margin: 0 auto;
    border-radius: 16px; background: var(--vsp-accent) !important; color: var(--vsp-on-accent) !important; box-shadow: var(--vsp-shadow-1);
    font-family: var(--vsp-font); font-size: 15px; font-weight: 600; transition: box-shadow .2s, background-color .2s, transform .2s; }
  html body.vsp-app #taskmenu a.compose:before { color: inherit !important; margin: 0 !important; width: auto !important; height: auto !important; line-height: 1 !important; font-size: 18px; float: none !important; }
  html body.vsp-app #taskmenu a.compose:hover, html body.vsp-app #taskmenu a.compose:focus-visible { background: var(--vsp-accent-strong) !important; box-shadow: var(--vsp-shadow-2); }
  html body.vsp-app #taskmenu a.compose.selected { box-shadow: 0 0 0 3px var(--vsp-accent-soft); }
  html body.vsp-app #taskmenu a.compose span.inner { display: none !important; }

  /* Mode sombre, aide, compte : en haut à droite */
  html body.vsp-app #taskmenu .special-buttons {
    position: fixed !important; top: 0; right: 12px; left: auto; bottom: auto; z-index: 12; height: var(--vsp-top);
    display: flex; align-items: center; gap: 2px; background: transparent !important; }
  html body.vsp-app #taskmenu .special-buttons a {
    width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 50%; display: flex !important; align-items: center; justify-content: center;
    background: transparent !important; color: var(--vsp-ink-2) !important; }
  html body.vsp-app #taskmenu .special-buttons a:before { margin: 0 !important; width: auto !important; height: auto !important; line-height: 1 !important; font-size: 18px; float: none !important; }
  html body.vsp-app #taskmenu .special-buttons a:hover, html body.vsp-app #taskmenu .special-buttons a:focus-visible { background: var(--vsp-surface-3) !important; }
  html body.vsp-app #taskmenu .special-buttons span.inner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html body.vsp-app #taskmenu .special-buttons a.logout { color: var(--vsp-ink-2) !important; }
  html.vsp-acct body.vsp-app #taskmenu .special-buttons a.logout { display: none !important; }

  /* Recherche au centre de la barre du haut */
  html body.vsp-app #layout-list > .searchbar {
    position: fixed; top: 10px; left: var(--vsp-brandw); z-index: 11; width: min(720px, calc(100vw - var(--vsp-brandw) - 210px));
    height: 46px; min-height: 46px; line-height: 46px; border: 0 !important; border-radius: 24px; background: var(--vsp-search) !important;
    transition: background-color .15s, box-shadow .15s; }
  html body.vsp-app #layout-list > .searchbar:focus-within, html body.vsp-app #layout-list > .searchbar.open {
    background: var(--vsp-surface) !important; box-shadow: var(--vsp-shadow-2); }
  html body.vsp-app #layout-list > .searchbar form:before { height: 46px; line-height: 46px; margin-left: 16px; color: var(--vsp-muted); }
  html body.vsp-app #layout-list > .searchbar input { font-size: 15px; color: var(--vsp-ink); padding-left: 12px; }
  html body.vsp-app #layout-list > .searchbar a:before { height: 46px; line-height: 46px; color: var(--vsp-muted); }
  html body.vsp-app #layout-list > .searchbar a:last-of-type { margin-right: 8px; }
  html body.vsp-app #layout-list > .searchoptions:not(.hidden) {
    position: fixed; top: 60px; left: var(--vsp-brandw); z-index: 11; width: min(720px, calc(100vw - var(--vsp-brandw) - 210px));
    max-height: calc(100vh - 80px); overflow: auto; border-radius: 0 0 16px 16px; background: var(--vsp-surface); box-shadow: var(--vsp-shadow-2); padding: 12px 20px 16px; }
  html body.vsp-app #layout-list > .searchoptions:not(.hidden) + .scroller { display: block !important; }

  /* Liste et volet de lecture : une carte blanche aux coins arrondis sur le fond */
  html body.vsp-app #layout-list { border: 0 !important; border-radius: var(--vsp-r) 0 0 var(--vsp-r); margin-bottom: 16px; overflow: hidden; box-shadow: var(--vsp-shadow-1); }
  html body.vsp-app #layout-content { border-radius: 0 var(--vsp-r) var(--vsp-r) 0; margin: 0 16px 16px 0; overflow: hidden; box-shadow: var(--vsp-shadow-1); width: auto; }
  html body.vsp-app #layout-list + #layout-content { border-left: 1px solid var(--vsp-line) !important; }
  html body.vsp-app #layout-content:only-of-type, html body.vsp-app #layout-sidebar + #layout-content, html body.vsp-app #layout-menu + #layout-content,
  html body.vsp-app #layout-content.only, html body.vsp-app h1.voice + #layout-content { border-radius: var(--vsp-r); }
  html body.vsp-app #layout-list:last-child { border-radius: var(--vsp-r); margin-right: 16px; }
  html body.vsp-app #layout-sidebar.sidebar-right { background: var(--vsp-surface) !important; border-radius: var(--vsp-r); margin: 0 16px 16px 0; box-shadow: var(--vsp-shadow-1); border: 0 !important; }
  html body.vsp-app #layout > div > .header { height: 56px; min-height: 56px; line-height: 56px; border-bottom: 1px solid var(--vsp-line) !important; }
  html body.vsp-app #layout-sidebar > .header { border-bottom: 0 !important; }
  html body.vsp-app #layout > div > .header .menu.toolbar a { height: 48px; margin: 4px 1px; padding: 0 10px !important; line-height: 48px; min-width: 44px; max-width: none; display: flex; align-items: center; }
  html body.vsp-app #layout > div > .header .menu.toolbar a:before { height: auto !important; line-height: 1 !important; font-size: 17px; }
  html body.vsp-app #layout > div > .header .menu.toolbar a span.inner,
  html body.vsp-app #layout > div > .header a.toolbar-button span.inner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html body.vsp-app #layout > div > .header .menu.toolbar .dropbutton { display: inline-flex; align-items: center; border-radius: 12px; }
  html body.vsp-app #layout > div > .header .menu.toolbar .dropbutton a { margin: 4px 0; }
  html body.vsp-app #layout > div > .header .menu.toolbar .dropbutton a.dropdown { min-width: 22px; padding: 0 6px 0 0 !important; }
  html body.vsp-app #layout > div > .header .menu.toolbar .dropbutton a.dropdown:before { font-size: 11px; }
  html body.vsp-app #layout-content > .header > .menu.toolbar, html body.vsp-app #layout-list > .header > .menu.toolbar { display: flex; align-items: center; }
  html body.vsp-app #layout-content > .header { justify-content: flex-start; padding: 0 12px; }
  html body.vsp-app #layout-list > .header { justify-content: flex-start; padding: 0 8px; }
  html body.vsp-app #layout-list > .header > a.button.refresh { order: 2; }
  html body.vsp-app #layout-list > .header .header-title { text-align: left; margin: 0 8px !important; order: 0; }
  html body.vsp-app #layout > div > .header a.button.icon { height: 44px; width: 44px; min-width: 44px; margin: 6px 2px !important; padding: 0 !important; line-height: 44px; border-radius: 50%; text-align: center; }
  html body.vsp-app #layout > div > .header a.button.icon:before { margin: 0 !important; line-height: 44px; font-size: 17px; }
  html body.vsp-app #layout > div > .header a.button.icon span.inner { display: none; }
}

/* Rail plus étroit entre 769 et 1024 px (icônes seules) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  html { --vsp-rail: 68px; --vsp-brandw: 220px; }
  html body.vsp-app #taskmenu span.inner { display: none !important; }
  html body.vsp-app #taskmenu > a, html body.vsp-app #taskmenu > span > a:not(.compose) { padding: 6px 0 !important; }
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  html { --vsp-brandw: 260px; }
}

/* Grands écrans : barre latérale fixe et bouton « Nouveau message » au-dessus des dossiers */
@media screen and (min-width: 1201px) {
  html body.vsp-app #layout-sidebar:not(.sidebar-right) { width: var(--vsp-side) !important; max-width: var(--vsp-side) !important; min-width: var(--vsp-side) !important; flex: none !important; border: 0 !important; }
  html body.vsp-app #layout-sidebar:not(.sidebar-right) > .column-resizer { display: none; }
  html body.vsp-app #layout-sidebar > .header { justify-content: flex-end; align-items: center; height: 76px; min-height: 76px; line-height: 76px; padding: 0 8px 0 0; }
  html body.vsp-app #layout-sidebar > .header .header-title { flex: 1; text-align: left; margin: 0 0 0 16px !important; font-family: var(--vsp-font); font-weight: 600; font-size: 13px; color: var(--vsp-muted); }
  html body.task-mail.action-none.vsp-app #layout-sidebar > .header .header-title { visibility: hidden; }
  html body.task-mail.action-none.vsp-app #taskmenu .action-buttons { position: fixed; top: calc(var(--vsp-top) + 10px); left: calc(var(--vsp-rail) + 8px); z-index: 4; margin: 0; }
  html body.task-mail.action-none.vsp-app #taskmenu a.compose { width: auto !important; max-width: none !important; min-width: 176px; padding: 0 24px 0 20px !important; justify-content: flex-start; box-shadow: var(--vsp-shadow-1); }
  html body.task-mail.action-none.vsp-app #taskmenu a.compose span.inner { display: inline !important; font-size: 15px; font-weight: 600; max-width: none; overflow: visible; }
  html body.vsp-app #layout-list { min-width: 360px; }
}

/* ---------- Dossiers (mail), carnets (contacts), rubriques (paramètres) ---------- */
html body.vsp #layout-sidebar .listing li, html body.vsp #layout-sidebar ul.listing li ul,
html body.vsp #layout-list ul.listing li { border: 0 !important; }
html body.vsp #layout-sidebar .listing li > a, html body.vsp #settings-menu li > a, html body.vsp #layout-sidebar .treelist li > div > a {
  height: 34px; line-height: 34px; padding: 0 14px 0 24px !important; margin: 1px 0; border-radius: 0 17px 17px 0; width: calc(100% - 12px);
  color: var(--vsp-ink) !important; font-size: 14px; border-left: 0 !important; display: flex; align-items: center; gap: 0; transition: background-color .12s; }
html body.vsp #layout-sidebar .listing li > a:hover, html body.vsp #layout-sidebar .treelist li > div > a:hover { background: var(--vsp-surface-3); }
html body.vsp #layout-sidebar .listing li > a:focus-visible { box-shadow: inset 0 0 0 2px var(--vsp-accent); outline: 0; }
html body.vsp #layout-sidebar .listing li.selected, html.dark-mode body.vsp #layout-sidebar .listing li.selected { background: transparent !important; }
html body.vsp #layout-sidebar .listing li.selected > a, html body.vsp #layout-sidebar .treelist li.selected > div > a,
html.dark-mode body.vsp #layout-sidebar .listing li.selected > a {
  background: var(--vsp-accent-soft) !important; color: var(--vsp-accent-ink) !important; font-weight: 700; }
html body.vsp #layout-sidebar .listing li > a:before { color: var(--vsp-muted); width: 20px !important; min-width: 20px; margin: 0 16px 0 0 !important; font-size: 15px; text-align: center; float: none !important; height: auto !important; line-height: 1 !important; }
html body.vsp #layout-sidebar .listing li.selected > a:before { color: var(--vsp-accent-ink); }
html body.vsp .folderlist li.mailbox.unread > a, html body.vsp .folderlist li.mailbox.recent > a { font-weight: 700; color: var(--vsp-ink) !important; }
html body.vsp .folderlist li.mailbox .unreadcount, html body.vsp .folderlist li.mailbox.recent > a > .unreadcount, html.dark-mode body.vsp .folderlist li.mailbox .unreadcount {
  position: static !important; margin: 0 0 0 auto !important; padding: 0 0 0 8px; min-width: 0; background: transparent !important; color: inherit !important; font-size: 12.5px; font-weight: 700; line-height: 1; border-radius: 0; }
html body.vsp .folderlist li.mailbox.unread > a { padding-right: 14px !important; }
html body.vsp .folderlist li.mailbox.inbox.unread:not(.selected) > a > .unreadcount { color: var(--vsp-accent-strong) !important; }
html body.vsp .folderlist div.treetoggle { left: 4px !important; color: var(--vsp-muted); }
html body.vsp .folderlist li.droptarget > a { background: var(--vsp-accent-tint) !important; box-shadow: inset 0 0 0 2px var(--vsp-accent); }
html body.vsp #layout-sidebar .scroller { padding-top: 4px; }
/* Espace utilisé */
html body.vsp #layout-sidebar > .footer { border-top: 0 !important; height: auto !important; min-height: 0 !important; line-height: 1.4 !important; padding: 10px 16px 14px 24px !important; }
html body.vsp .quota-widget { display: flex; flex-direction: column-reverse; gap: 6px; width: 100%; cursor: default; }
html body.vsp .quota-widget .bar { display: block; height: 4px; width: 100%; max-width: 200px; border-radius: 4px; background: var(--vsp-surface-3); border: 0; overflow: hidden; }
html body.vsp .quota-widget .bar .value { background: var(--vsp-accent) !important; height: 100%; border-radius: 4px; }
html body.vsp .quota-widget .bar .value.warning { background: var(--vsp-danger) !important; }
html body.vsp .quota-widget .count { font-size: 12px; font-weight: 500; color: var(--vsp-muted); text-align: left; }
html body.vsp .quota-widget:before { display: none; }

/* ---------- Listes (messages, contacts, réglages) ---------- */
html body.vsp .listing li, html body.vsp .listing tbody td, html body.vsp .listing li a, html body.vsp .listing tbody td a { color: var(--vsp-ink); }
html body.vsp .listing tbody td, html body.vsp #layout-list ul.listing li { border-bottom: 1px solid var(--vsp-line) !important; }
html body.vsp .listing li.selected, html body.vsp .listing tr.selected td,
html.dark-mode body.vsp .listing li.selected, html.dark-mode body.vsp .listing tr.selected td, html.dark-mode body.vsp .listing li.selected > a {
  background-color: var(--vsp-accent-tint) !important; color: var(--vsp-ink) !important; }
html body.vsp ul.treelist li.selected > a, html body.vsp ul.treelist li.selected > div > a { background-color: var(--vsp-accent-soft); }
html:not(.touch) body.vsp .listing li > a:focus, html:not(.touch) body.vsp .listing.focus tbody tr.focused > td:first-child,
html:not(.touch) body.vsp .listing.focus:not(.withselection) tbody tr.focused > td.selection + td { border-left-color: var(--vsp-accent) !important; }
html body.vsp #layout-list ul.listing li > a { padding: 0 20px !important; height: 44px; line-height: 44px; }
html body.vsp #layout-list ul.listing li > a:hover, html body.vsp table.listing tbody tr:hover td { background-color: var(--vsp-surface-2); }
html body.vsp .listing li.droptarget > a, html body.vsp .listing tr.droptarget > td { background-color: var(--vsp-accent-tint) !important; }
html body.vsp .listing-info { color: var(--vsp-muted); font-weight: 500; }

/* Messages : expéditeur et date, objet, début du texte */
html body.vsp .messagelist td { font-size: 14px !important; }
html body.vsp table.messagelist tbody tr td { border-bottom: 1px solid var(--vsp-line) !important; }
html body.vsp table.messagelist tbody tr td.subject { padding: 10px 14px 10px 12px; }
html body.vsp table.messagelist tbody tr td.flags { padding: 10px 12px 0 0; }
html body.vsp table.messagelist tbody tr:hover td { background-color: var(--vsp-surface-2); }
html body.vsp table.messagelist tbody tr.selected td, html.dark-mode body.vsp table.messagelist tbody tr.selected td { background-color: var(--vsp-accent-tint) !important; }
html body.vsp table.messagelist tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--vsp-accent); }
html body.vsp .messagelist td.subject span { line-height: 1.5; }
html body.vsp .messagelist td.subject span.fromto { padding-left: 18px; font-size: 14px; font-weight: 500; }
html body.vsp .messagelist td.subject span.fromto, html.dark-mode body.vsp .messagelist td.subject span.fromto { color: var(--vsp-ink-2) !important; }
html body.vsp .messagelist td.subject span.date, html body.vsp .messagelist td.subject span.size,
html.dark-mode body.vsp .messagelist td.subject span.date { font-size: 12px; color: var(--vsp-muted); font-weight: 500; }
html body.vsp .messagelist td.subject span.subject a, html.dark-mode body.vsp .messagelist td.subject span.subject a { color: var(--vsp-ink-2) !important; }
html body.vsp .messagelist td.subject span.subject { padding-left: 18px; color: var(--vsp-ink-2); }
html body.vsp .messagelist tr.unread td.subject span.fromto, html.dark-mode body.vsp .messagelist tr.unread td.subject span.fromto { font-weight: 800; color: var(--vsp-ink) !important; }
html body.vsp .messagelist tr.unread td.subject span.subject, html body.vsp .messagelist tr.unread td.subject span.subject a { font-weight: 700; color: var(--vsp-ink) !important; }
html body.vsp .messagelist tr.unread td.subject span.date, html.dark-mode body.vsp .messagelist tr.unread td.subject span.date { color: var(--vsp-accent-strong); font-weight: 700; }
html body.vsp table.messagelist td.subject { position: relative; }
html body.vsp .messagelist td.subject span.msgicon.status { position: absolute; left: 10px; top: 10px; width: 18px; height: 21px; display: flex; align-items: center; justify-content: center; }
html body.vsp .messagelist td.subject span.msgicon.status:before { width: 18px !important; height: auto !important; line-height: 1 !important; margin: 0 !important; color: var(--vsp-faint); font-size: .5rem; float: none !important; }
html body.vsp .messagelist td.subject span.msgicon.status:not(.unread):not(.replied):not(.forwarded):not(.unreadchildren) { opacity: 0; }
html body.vsp .messagelist tr:hover td.subject span.msgicon.status:not(.unread) { opacity: .7; }
html body.vsp .messagelist td.subject span.msgicon.status.unread:before { color: var(--vsp-accent); font-size: .55rem; }
html body.vsp .messagelist td.subject span.msgicon.status.replied:before, html body.vsp .messagelist td.subject span.msgicon.status.forwarded:before { font-size: .78rem; color: var(--vsp-muted); }
html body.vsp .messagelist td.subject .vsp-snip { display: block; width: 100%; padding-left: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.5; color: var(--vsp-muted); }
html body.vsp .messagelist tr.flagged td, html body.vsp .messagelist tr.flagged span.size, html body.vsp .messagelist tr.flagged td.subject span.date,
html body.vsp .messagelist tr.flagged td.subject span.fromto, html body.vsp .messagelist tr.flagged td.subject span.subject a { color: inherit; }
html body.vsp .messagelist tr.flagged td.subject span.fromto { color: var(--vsp-ink) !important; }
html body.vsp .messagelist span.flagged:before, html body.vsp .messagelist tr.flaggedroot span.unflagged:before { color: var(--vsp-flag) !important; }
html body.vsp .messagelist tr.deleted td.subject span { color: var(--vsp-faint) !important; text-decoration: line-through; }
html body.vsp .messagelist span.attachment span { color: var(--vsp-muted); }
html body.vsp .messagelist td.threads { padding-top: 10px; }
html body.vsp .messagelist tr.thread td.threads div:before { color: var(--vsp-muted); }
/* Avatar (petits écrans) */
html body.vsp .messagelist .vsp-av { display: none; }

/* Actions au survol d'un message */
html body.vsp .listing-hover-menu {
  height: auto; display: flex; align-items: center; gap: 2px; padding: 4px; right: 10px;
  background: var(--vsp-surface) !important; border: 1px solid var(--vsp-line) !important; border-radius: 22px; box-shadow: var(--vsp-shadow-2) !important; }
html body.vsp .listing-hover-menu a.button { width: 34px; height: 34px; margin: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--vsp-ink-2) !important; text-decoration: none; }
html body.vsp .listing-hover-menu a.button:before { margin: 0 !important; float: none !important; width: auto !important; height: auto !important; line-height: 1 !important; font-size: 15px; }
html body.vsp .listing-hover-menu a.button:hover { background: var(--vsp-surface-3) !important; color: var(--vsp-ink) !important; }
html body.vsp .listing-hover-menu span.txt { display: none; }
html body.vsp .listing-hover-menu .vsp-archive { order: 1; } html body.vsp .listing-hover-menu .delete, html body.vsp .listing-hover-menu .undo { order: 2; }
html body.vsp .listing-hover-menu .read, html body.vsp .listing-hover-menu .unread { order: 3; } html body.vsp .listing-hover-menu .flag, html body.vsp .listing-hover-menu .unflag { order: 4; }
html body.vsp .listing-hover-menu a.read:before { font-family: 'Icons'; font-weight: 400; content: "\f2b6"; }
html body.vsp .listing-hover-menu a.unread:before { font-family: 'Icons'; font-weight: 400; content: "\f0e0"; }
html body.vsp .listing-hover-menu a.vsp-archive:before { font-family: 'Icons'; font-weight: 900; content: "\f187"; }

/* Pagination en pied de liste */
html body.vsp #layout-list > .footer.pagenav { border-top: 1px solid var(--vsp-line) !important; height: 44px !important; min-height: 44px !important; line-height: 44px !important; padding: 0 8px !important; }
html body.vsp .menu.pagenav a { color: var(--vsp-ink-2) !important; border-radius: 50%; height: 36px !important; max-width: 36px; min-width: 36px !important; flex-grow: 0 !important; }
html body.vsp .menu.pagenav a:before { line-height: 36px !important; }
html body.vsp .menu.pagenav .pagenav-text { color: var(--vsp-muted); font-size: 12.5px; font-weight: 500; }
html body.vsp .menu.pagenav input { border-radius: 8px; }

/* ---------- Volet de lecture vide ---------- */
html body.vsp #layout-content .iframe-wrapper { background: var(--vsp-surface); }
html.iframe body.vsp .watermark, html body .watermark { background-image: none !important; }

/* =====================================================================================================
   Pages dans un cadre : message, réglages, contact
   ===================================================================================================== */
html.iframe body.vsp #layout-content, html.iframe body.vsp .formcontent, html.iframe body.vsp .content { background: var(--vsp-surface) !important; color: var(--vsp-ink); }
html body.vsp #message-header { padding: 20px 24px 6px; border-bottom: 0 !important; }
html body.vsp #message-header h2.subject { font-size: 1.45rem; font-weight: 600; color: var(--vsp-ink); line-height: 1.3; margin: 0 0 14px; }
html body.vsp #message-header h2.subject a.extwin { color: var(--vsp-muted); }
html body.vsp #message-header .header { display: flex; align-items: flex-start; gap: 4px; }
html body.vsp #message-header .contactphoto { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: var(--vsp-surface-3); }
html body.vsp #message-header .header-summary { color: var(--vsp-muted); font-size: 13.5px; }
html body.vsp #message-header .header-summary a.rcmContactAddress { color: var(--vsp-ink); font-weight: 700; font-size: 14.5px; }
html body.vsp #message-header .header-links a { color: var(--vsp-muted); font-size: 12.5px; font-weight: 600; }
html body.vsp #message-header .header-links a:hover { color: var(--vsp-accent-strong); }
html body.vsp #message-header .header-links a:before { color: var(--vsp-faint); }
html body.vsp #message-header table.header-headers td.header-title { color: var(--vsp-muted); }
html body.vsp #message-content { padding: 0 24px 24px; }
html body.vsp #messagebody { font-size: 14.5px; line-height: 1.6; color: var(--vsp-ink); }
html body.vsp .message-part div.pre { font-family: var(--vsp-font); font-size: 14.5px; line-height: 1.6; }
html body.vsp .message-part, html body.vsp .message-htmlpart { padding: 8px 0 !important; border: 0 !important; background: transparent !important; }
html body.vsp .message-htmlpart blockquote, html body.vsp .message-part blockquote { color: var(--vsp-muted) !important; border-left: 3px solid var(--vsp-line-2) !important; border-right: 0 !important; background: transparent !important; padding-left: 12px; }
html body.vsp #message-content .attachmentslist li { border-radius: 12px; border: 1px solid var(--vsp-line) !important; background: var(--vsp-surface-2) !important; }
html body.vsp .vsp-reply-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 24px 32px; }
html body.vsp .vsp-reply-bar button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 20px; border: 1px solid var(--vsp-line-2); background: var(--vsp-surface); color: var(--vsp-ink-2); font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color .15s, border-color .15s; }
html body.vsp .vsp-reply-bar button:hover { background: var(--vsp-surface-2); border-color: var(--vsp-faint); color: var(--vsp-ink); }
html body.vsp .vsp-reply-bar button:focus-visible { outline: 0; box-shadow: var(--vsp-focus); }
html body.vsp .vsp-reply-bar button:before { font-family: 'Icons'; font-weight: 900; font-size: 13px; }
html body.vsp .vsp-reply-bar .r:before { content: "\f3e5"; } html body.vsp .vsp-reply-bar .ra:before { content: "\f122"; } html body.vsp .vsp-reply-bar .f:before { content: "\f064"; }
html body.vsp .ui.alert, html body.vsp #message-objects .ui.alert { border-radius: 12px; }

/* Formulaires des réglages et des contacts */
html body.vsp .formcontent fieldset, html body.vsp .propform fieldset { border-color: var(--vsp-line) !important; }
html body.vsp .formcontent legend, html body.vsp .propform legend, html body.vsp fieldset > legend { font-family: var(--vsp-title); font-weight: 600; color: var(--vsp-ink); font-size: 1rem; }
html body.vsp .propform .col-form-label, html body.vsp .propform label { color: var(--vsp-ink-2); }
html body.vsp table.records-table th, html body.vsp table.records-table td { border-color: var(--vsp-line) !important; }
html body.vsp table.records-table tr.selected td, html body.vsp table.records-table tr.focused td { background: var(--vsp-accent-tint) !important; color: var(--vsp-ink) !important; }
html body.vsp .formbuttons { border-color: var(--vsp-line) !important; }
html body.vsp .nav-tabs .nav-link.active, html body.vsp .tabsbar .nav-link.active { border-bottom-color: var(--vsp-accent) !important; color: var(--vsp-ink) !important; }
html body.vsp .nav-tabs .nav-link { color: var(--vsp-muted); }

/* ---------- Rédaction ---------- */
html body.vsp.task-mail.action-compose #compose-content, html body.vsp.task-mail.action-compose #layout-content > .scroller { background: var(--vsp-surface); }
html body.vsp #compose-headers .form-group { border-bottom: 1px solid var(--vsp-line); margin: 0; padding: 4px 0; }
html body.vsp #compose-headers .col-form-label { color: var(--vsp-muted); font-weight: 600; font-size: 13px; }
html body.vsp #compose-headers .form-control, html body.vsp #compose-headers .recipient-input, html body.vsp #compose-headers .custom-select { border-color: transparent; background-color: transparent; }
html body.vsp #compose-headers .form-control:focus, html body.vsp #compose-headers .recipient-input.focus { background: var(--vsp-surface); }
html body.vsp .recipient-input .recipient, html body.vsp .recipient-input li.recipient { border-radius: 14px; background: var(--vsp-surface-3) !important; color: var(--vsp-ink); border: 0 !important; }
html body.vsp #compose-content .editor-toolbar, html body.vsp .html-editor .editor-toolbar { border-color: var(--vsp-line) !important; background: var(--vsp-surface-2) !important; border-radius: 10px 10px 0 0; }
html body.vsp #compose-content textarea, html body.vsp .html-editor > textarea, html body.vsp .html-editor > .googie_edit_layer { font-family: var(--vsp-font); font-size: 14.5px; line-height: 1.6; color: var(--vsp-ink); }
html body.vsp #compose-content .formbuttons button.mainaction, html body.vsp #compose-content .formbuttons .btn-primary { min-width: 132px; height: 42px; border-radius: 21px; }
html body.vsp .upload-form, html body.vsp .file-upload .hint { color: var(--vsp-muted); }
html body.vsp #compose-attachments { border-color: var(--vsp-line-2) !important; border-radius: 14px; }

/* =====================================================================================================
   Menus, fenêtres, notifications
   ===================================================================================================== */
html .popover, html.dark-mode .popover { border: 1px solid var(--vsp-line) !important; border-radius: 14px; box-shadow: var(--vsp-shadow-2) !important; background: var(--vsp-surface) !important; color: var(--vsp-ink); }
html .popover .popover-body { padding: 6px; }
html .popover .arrow { display: none; }
html .popover .menu li a, html .popupmenu .listing li > a, html.dark-mode .popover .menu li a { border-radius: 8px; color: var(--vsp-ink) !important; }
html .popover .menu li a:not(.disabled):hover, html .popover .menu .dropbutton a.dropdown:hover, html .popupmenu .listing li > a:not(.disabled):hover,
html .popupmenu .listing li.selected, html.dark-mode .popover .menu li a:not(.disabled):hover {
  background-color: var(--vsp-surface-3) !important; color: var(--vsp-ink) !important; }
html .popover .menu li a.disabled { color: var(--vsp-faint) !important; }
html .popover .menu li a[aria-haspopup]:hover:after { color: var(--vsp-ink) !important; }
html .popover .menu li.separator { background: transparent !important; color: var(--vsp-muted) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
html .ui-menu .ui-state-active, html .googie_list li.googie_list_onhover { background-color: var(--vsp-surface-3) !important; color: var(--vsp-ink) !important; }
html .ui-autocomplete, html #rcmKSearchpane, html .googie_window { border-radius: 12px !important; border: 1px solid var(--vsp-line) !important; box-shadow: var(--vsp-shadow-2) !important; background: var(--vsp-surface) !important; overflow: hidden; }
html #rcmKSearchpane ul li.selected, html #rcmKSearchpane ul li:hover { background: var(--vsp-accent-tint) !important; color: var(--vsp-ink) !important; }

html .ui-dialog, html.dark-mode .ui-dialog { border-radius: 18px !important; border: 0 !important; box-shadow: var(--vsp-shadow-3) !important; background: var(--vsp-surface) !important; overflow: hidden; }
html .ui-dialog .ui-dialog-titlebar { border-color: var(--vsp-line) !important; background: transparent !important; }
html .ui-dialog .ui-dialog-title { font-size: 1.1rem; font-weight: 600; color: var(--vsp-ink); padding-left: 1.25rem; }
html .ui-dialog .ui-dialog-titlebar-close { border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--vsp-ink-2) !important; width: 40px; height: 40px; padding: 0 !important; margin: 9px 10px !important; }
html .ui-dialog .ui-dialog-titlebar-close:hover { background: var(--vsp-surface-3) !important; }
html .ui-dialog .ui-dialog-buttonpane { border-color: var(--vsp-line) !important; background: var(--vsp-surface-2) !important; padding: 12px 16px !important; }
html .ui-dialog .ui-dialog-buttonpane button { border-radius: 10px !important; font-weight: 600; min-height: 38px; }
html .ui-widget-overlay, html.dark-mode .ui-widget-overlay { background: rgba(15, 23, 31, .5) !important; opacity: 1 !important; backdrop-filter: blur(2px); }
html .ui-dialog .ui-dialog-content.popup.iframe { padding: 0 !important; }
html .ui-datepicker .ui-datepicker-days-cell-over a, html .ui-datepicker .ui-state-highlight { background: var(--vsp-accent-soft) !important; color: var(--vsp-accent-ink) !important; }
html .ui-datepicker a.ui-state-active { background: var(--vsp-accent) !important; color: var(--vsp-on-accent) !important; }

html #messagestack div, html #messagestack .alert { border-radius: 12px !important; box-shadow: var(--vsp-shadow-2) !important; font-weight: 500; }
html #messagestack div.information, html #messagestack .alert-info.information, html.dark-mode #messagestack .alert-info { background-color: var(--vsp-navy) !important; color: #fff !important; }
html #messagestack div.loading { background-color: var(--vsp-navy-2) !important; color: #fff !important; }
html #messagestack div.confirmation { background-color: var(--vsp-success) !important; color: #fff !important; }
html #messagestack div i.icon:before { color: inherit !important; }
html .tooltip-inner { background: var(--vsp-navy-dark); border-radius: 8px; font-size: 12px; font-weight: 500; padding: 5px 9px; }
html .tooltip .arrow:before { border-top-color: var(--vsp-navy-dark) !important; border-bottom-color: var(--vsp-navy-dark) !important; }
html .image-tools { background-color: rgba(230, 126, 34, .4); }

/* =====================================================================================================
   Petits écrans (481 à 768 px) et téléphones (480 px et moins)
   ===================================================================================================== */
@media screen and (min-width: 481px) and (max-width: 768px) {
  html body.vsp-app #layout-menu { background: var(--vsp-bg) !important; border-right: 1px solid var(--vsp-line) !important; width: 64px !important; }
  html body.vsp-app #layout-menu .popover-header { background: var(--vsp-bg) !important; }
  html body.vsp-app #layout-menu .popover-header img { max-width: 52px; }
  html body.vsp-app #taskmenu a { color: var(--vsp-ink-2) !important; width: 64px !important; height: 56px !important; background: transparent !important; }
  html body.vsp-app #taskmenu a:before { line-height: 56px !important; }
  html body.vsp-app #taskmenu a.selected { color: var(--vsp-accent-ink) !important; background: var(--vsp-accent-soft) !important; }
  html body.vsp-app #taskmenu .action-buttons a { color: var(--vsp-accent-strong) !important; }
  html body.vsp-app #taskmenu .special-buttons { background: var(--vsp-bg) !important; }
  html body.vsp-app #taskmenu a.logout { color: var(--vsp-ink-2) !important; }
}
@media screen and (max-width: 768px) {
  html body.vsp #layout > div > .header { background: var(--vsp-surface) !important; border-bottom: 1px solid var(--vsp-line) !important; }
  html body.vsp #layout > div > .header .header-title { font-size: 1.05rem; }
  html body.vsp #layout-sidebar, html body.vsp #layout-list, html body.vsp #layout-content { background: var(--vsp-surface) !important; }
  html body.vsp #layout-list > .searchbar { margin: 8px 12px; height: 46px; min-height: 46px; line-height: 46px; border: 0 !important; border-radius: 24px; background: var(--vsp-search) !important; }
  html body.vsp #layout-list > .searchbar form:before, html body.vsp #layout-list > .searchbar a:before { height: 46px; line-height: 46px; color: var(--vsp-muted); }
  html body.vsp #layout-list > .searchbar input { font-size: 16px; }
  /* Liste façon application mobile : avatar, expéditeur, date, objet, aperçu */
  html body.vsp .messagelist .vsp-av { display: flex; }
  html body.vsp table.messagelist tbody tr td.subject { padding: 10px 12px 10px 66px; position: relative; }
  html body.vsp .messagelist .vsp-av { position: absolute; left: 14px; top: 12px; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; font-family: var(--vsp-title); }
  html body.vsp .messagelist td.subject span.fromto { padding-left: 0; font-size: 15px; }
  html body.vsp .messagelist td.subject span.subject { font-size: 14px; }
  html body.vsp .messagelist td.subject span.msgicon.status { display: none; }
  html body.vsp .messagelist td.subject .vsp-snip { padding-left: 0; font-size: 13.5px; }
  html body.vsp .messagelist td.subject span.subject { padding-left: 0; }
  html body.vsp table.messagelist tbody tr.selected td:first-child { box-shadow: none; }
  html.touch body.vsp .messagelist td.flags { top: 34px !important; right: 6px !important; }
  html body.vsp .floating-action-buttons { right: 16px; bottom: 16px; }
  html body.vsp .floating-action-buttons a.button { width: auto !important; min-width: 56px; height: 56px !important; padding: 0 20px 0 18px; border-radius: 18px !important; display: inline-flex !important; align-items: center; gap: 10px; box-shadow: var(--vsp-shadow-2) !important; }
  html body.vsp .floating-action-buttons a.button:before { margin: 0 !important; line-height: 1 !important; height: auto !important; width: auto !important; font-size: 18px; }
  html body.vsp .floating-action-buttons .vsp-fab-label { font-weight: 700; font-size: 15px; white-space: nowrap; }
  html body.vsp.vsp-scrolled .floating-action-buttons .vsp-fab-label { display: none; }
  html body.vsp.vsp-scrolled .floating-action-buttons a.button { padding: 0 !important; width: 56px !important; justify-content: center; }
  html body.vsp #message-header { padding: 16px 16px 4px; }
  html body.vsp #message-content { padding: 0 16px 16px; }
  html body.vsp .vsp-reply-bar { padding: 8px 16px 24px; }
}
@media screen and (max-width: 480px) {
  html body.vsp-app #layout-menu.popover, html body.vsp-app #layout-menu { background: var(--vsp-surface) !important; border: 0 !important; box-shadow: var(--vsp-shadow-3); }
  html body.vsp-app #layout-menu .popover-header, html.layout-phone body.vsp-app #layout-menu .popover-header { background: var(--vsp-surface) !important; border-bottom: 1px solid var(--vsp-line) !important; height: 64px; justify-content: space-between !important; padding: 0 8px 0 20px !important; }
  html body.vsp-app #layout-menu .popover-header img { max-height: 38px; }
  html body.vsp-app #layout-menu .popover-header a { color: var(--vsp-ink-2) !important; flex: none !important; }
  html body.vsp-app #taskmenu { padding: 8px 12px 8px 0; background: var(--vsp-surface); }
  html body.vsp-app #taskmenu a { border: 0 !important; margin: 2px 0; height: 48px; line-height: 48px; border-radius: 0 24px 24px 0; padding: 0 16px 0 20px !important; color: var(--vsp-ink) !important; font-size: 15px; font-weight: 600; background: transparent !important; }
  html body.vsp-app #taskmenu a:before { color: var(--vsp-muted); width: 24px !important; margin-right: 18px !important; }
  html body.vsp-app #taskmenu a.selected { background: var(--vsp-accent-soft) !important; color: var(--vsp-accent-ink) !important; }
  html body.vsp-app #taskmenu a.selected:before { color: var(--vsp-accent-ink); }
  html body.vsp-app #taskmenu .action-buttons a.compose { color: var(--vsp-accent-strong) !important; }
  html body.vsp-app #taskmenu .action-buttons a.compose:before { color: var(--vsp-accent-strong); }
  html body.vsp-app #taskmenu .special-buttons { border-top: 1px solid var(--vsp-line); margin-top: 8px; padding-top: 8px; display: block; }
  html body.vsp-app #taskmenu a.logout, html body.vsp-app #taskmenu a.logout:before { color: var(--vsp-danger) !important; }
  html body.vsp-app #layout-sidebar > .header .header-title { font-size: 14px; color: var(--vsp-muted); }
  html body.vsp-app #layout-sidebar .listing li > a { height: 46px; line-height: 46px; font-size: 15px; }
  html body.vsp-app #layout > div > .header a.button { color: var(--vsp-ink-2) !important; }
}

/* =====================================================================================================
   Compte (en haut à droite) et panneau de rédaction (vsp_brand.js)
   ===================================================================================================== */
@media screen and (max-width: 768px) { .vsp-acct-btn, .vsp-acct-menu { display: none !important; } }
html.layout-phone body.vsp .vsp-reply-bar, html.layout-small body.vsp .vsp-reply-bar { display: none; }
.vsp-acct-btn { width: 40px; height: 40px; margin-left: 6px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: var(--vsp-navy); color: #fff; font: 700 16px/1 var(--vsp-title); box-shadow: 0 0 0 3px var(--vsp-bg); transition: box-shadow .15s; }
body.vsp-wl .vsp-acct-btn { background: var(--vsp-accent); color: var(--vsp-on-accent); }
.vsp-acct-btn:hover, .vsp-acct-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--vsp-bg), 0 0 0 5px var(--vsp-accent-soft); }
.vsp-acct-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--vsp-bg), 0 0 0 5px var(--vsp-accent); }
.vsp-acct-menu { position: fixed; top: 60px; right: 14px; z-index: 1100; width: 320px; max-width: calc(100vw - 28px); padding: 20px; border-radius: 20px;
  background: var(--vsp-surface); color: var(--vsp-ink); border: 1px solid var(--vsp-line); box-shadow: var(--vsp-shadow-3); text-align: center; animation: vsp-pop .16s ease-out; }
.vsp-acct-menu[hidden] { display: none; }
.vsp-acct-menu .vsp-acct-big { width: 64px; height: 64px; margin: 4px auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--vsp-navy); color: #fff; font: 700 26px/1 var(--vsp-title); }
body.vsp-wl .vsp-acct-menu .vsp-acct-big { background: var(--vsp-accent); color: var(--vsp-on-accent); }
.vsp-acct-menu .vsp-acct-mail { font-weight: 700; font-size: 15px; word-break: break-all; margin: 0 0 4px; }
.vsp-acct-menu .vsp-acct-sub { color: var(--vsp-muted); font-size: 12.5px; margin: 0 0 16px; }
.vsp-acct-menu .vsp-acct-actions { display: grid; gap: 6px; }
.vsp-acct-menu .vsp-acct-actions a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 20px; border: 1px solid var(--vsp-line-2);
  color: var(--vsp-ink) !important; font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color .15s; }
.vsp-acct-menu .vsp-acct-actions a:hover { background: var(--vsp-surface-2); }
.vsp-acct-menu .vsp-acct-actions a.vsp-acct-out { border-color: transparent; color: var(--vsp-danger) !important; }
@keyframes vsp-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* Sous les fenêtres de dialogue de jQuery UI (z-index 100) et les menus, au-dessus du reste */
.vsp-compose { position: fixed; right: 24px; bottom: 0; z-index: 90; width: 600px; max-width: calc(100vw - 48px); height: min(680px, calc(100vh - 88px));
  display: flex; flex-direction: column; border-radius: 16px 16px 0 0; overflow: hidden; background: var(--vsp-surface); box-shadow: var(--vsp-shadow-3);
  border: 1px solid var(--vsp-line); border-bottom: 0; animation: vsp-rise .2s ease-out; }
.vsp-compose.is-min { height: 48px; width: 320px; }
.vsp-compose.is-max { z-index: 95; right: 50%; bottom: 50%; transform: translate(50%, 50%); width: min(1100px, calc(100vw - 80px)); height: calc(100vh - 80px); border-radius: 16px; border-bottom: 1px solid var(--vsp-line); animation: none; }
.vsp-compose-backdrop { position: fixed; inset: 0; z-index: 94; background: rgba(15, 23, 31, .45); }
.vsp-compose-head { flex: none; height: 48px; display: flex; align-items: center; gap: 2px; padding: 0 6px 0 18px; background: var(--vsp-navy); color: #fff; cursor: pointer; }
body.vsp-wl .vsp-compose-head { background: #26313c; }
html.dark-mode .vsp-compose-head { background: #22313f; }
.vsp-compose-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1 var(--vsp-font); }
.vsp-compose-head button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #dfe6ee; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vsp-compose-head button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.vsp-compose-head button:focus-visible { outline: 2px solid var(--vsp-accent); outline-offset: -2px; }
.vsp-compose-head svg { width: 16px; height: 16px; fill: currentColor; }
.vsp-compose iframe { flex: 1; width: 100%; border: 0; background: var(--vsp-surface); }
.vsp-compose.is-min iframe { display: none; }
@keyframes vsp-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* Rédaction affichée dans le panneau : pas de pied ni de marges inutiles */
html.vsp-in-panel body.vsp #layout { padding: 0 !important; }
html.vsp-in-panel body.vsp #layout-content { border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; }
html.vsp-in-panel body.vsp #layout-content > .header .header-title { display: none; }
html.vsp-in-panel body.vsp #layout-content > .header { height: 44px !important; min-height: 44px !important; line-height: 44px !important; justify-content: flex-end !important; padding: 0 6px !important; background: var(--vsp-surface) !important; }
html.vsp-in-panel body.vsp #layout-content > .header a.button.icon { height: 36px; width: 36px; margin: 4px 2px !important; border-radius: 50%; }
html.vsp-in-panel body.vsp #layout-content > .header a.button.icon:before { line-height: 36px; height: 36px; font-size: 1.15rem; }
html.vsp-in-panel body.vsp #layout-content > .footer { height: 64px !important; min-height: 64px !important; line-height: normal !important; padding: 0 14px !important; justify-content: flex-start !important; align-items: center; background: var(--vsp-surface) !important; border-top: 1px solid var(--vsp-line) !important; }
html.vsp-in-panel body.vsp #layout-content > .footer .buttons { display: flex !important; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 6px; flex-grow: 0 !important; }
html.vsp-in-panel body.vsp #layout-content > .footer .buttons a { float: none !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 42px !important; min-width: 42px; width: auto !important; padding: 0 12px !important; border-radius: 21px; line-height: 1 !important; color: var(--vsp-ink-2) !important; }
html.vsp-in-panel body.vsp #layout-content > .footer .buttons a:before { margin: 0 !important; height: auto !important; line-height: 1 !important; font-size: 1.05rem !important; width: auto !important; float: none !important; }
html.vsp-in-panel body.vsp #layout-content > .footer .buttons a.send { background: var(--vsp-accent) !important; color: var(--vsp-on-accent) !important; padding: 0 22px 0 18px !important; }
html.vsp-in-panel body.vsp #layout-content > .footer .buttons a.send:hover { background: var(--vsp-accent-strong) !important; }
html.vsp-in-panel body.vsp #layout-content > .footer .buttons a .inner { display: inline !important; font-size: 14px !important; font-weight: 700; }
html.vsp-in-panel body.vsp #layout-content > .footer .buttons a.save .inner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.vsp-in-panel body.vsp #layout-content > .footer .buttons a.save:hover { background: var(--vsp-surface-3) !important; }
html.vsp-in-panel body.vsp #compose-content, html.vsp-in-panel body.vsp #layout-content > .scroller { padding-top: 4px; }

/* Logo du mode sombre */
.vsp-logo-night { display: none; }
html.dark-mode body.vsp:not(.vsp-wl) img#logo { display: none !important; }
html.dark-mode body.vsp:not(.vsp-wl) .vsp-logo-night { display: block; max-height: 40px; max-width: 100%; width: auto; }
html.dark-mode body.vsp.vsp-wl img#logo { background: #fff; border-radius: 8px; padding: 4px 8px !important; }

/* =====================================================================================================
   À propos (Paramètres › À propos, et fenêtre « À propos »)
   ===================================================================================================== */
html body.vsp .frame-content.vsp-about { max-width: 920px; margin: 0 auto; padding: 0 0 24px; color: var(--vsp-ink); font-size: 14px; line-height: 1.55; }
html:not(.iframe) body.vsp .frame-content.vsp-about { padding: 24px 16px 40px; }
.vsp-about-hero { position: relative; overflow: hidden; padding: 28px 28px 26px; border-radius: 0 0 20px 20px; color: #fff;
  background: var(--vsp-hero); background-image: linear-gradient(135deg, var(--vsp-hero) 0%, var(--vsp-hero-2) 100%); }
html:not(.iframe) .vsp-about-hero { border-radius: 20px; }
.vsp-about-hero:after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid var(--vsp-accent); opacity: .16; pointer-events: none; }
.vsp-about-logo { display: block; height: 42px; width: auto; margin: 0 0 18px; }
.vsp-about-chip { display: inline-flex; align-items: center; padding: 6px 12px; margin: 0 0 16px; border-radius: 10px; background: #fff; }
.vsp-about-chip img { display: block; max-height: 36px; max-width: 200px; }
.vsp-about-kicker { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #f6b26b; }
body.vsp-wl .vsp-about-kicker { color: rgba(255, 255, 255, .7); }
html body.vsp h1.vsp-about-title { margin: 0 0 8px; font-size: clamp(1.45rem, 4vw, 2rem); font-weight: 700; line-height: 1.15; color: #fff; }
.vsp-about-lead { margin: 0; max-width: 560px; font-size: 15px; color: rgba(255, 255, 255, .8); }
.vsp-about-version { margin: 16px 0 0; }
.vsp-about-version span { display: inline-block; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 12px; font-weight: 600; color: #fff; }
.vsp-about-grid { list-style: none; margin: 20px 20px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.vsp-feat { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--vsp-surface-2); border: 1px solid var(--vsp-line); }
.vsp-feat-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--vsp-accent-soft); color: var(--vsp-accent-ink); }
.vsp-feat-ic svg { width: 22px; height: 22px; fill: currentColor; }
html body.vsp .vsp-feat h3 { margin: 1px 0 3px; font-size: 14.5px; font-weight: 600; color: var(--vsp-ink); }
.vsp-feat p { margin: 0; font-size: 13px; color: var(--vsp-muted); line-height: 1.5; }
.vsp-about-help { margin: 16px 20px 0; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--vsp-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
html body.vsp .vsp-about-help h2 { margin: 0 0 2px; font-size: 1.05rem; font-weight: 600; color: var(--vsp-ink); }
.vsp-about-help p { margin: 0; color: var(--vsp-muted); font-size: 13.5px; }
.vsp-about-links { display: flex; flex-wrap: wrap; gap: 8px; }
html body.vsp a.vsp-about-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 20px; border: 1px solid var(--vsp-line-2); color: var(--vsp-ink); font-weight: 600; font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s; }
html body.vsp a.vsp-about-btn:hover { background: var(--vsp-surface-2); border-color: var(--vsp-faint); color: var(--vsp-ink); }
html body.vsp a.vsp-about-btn-primary { background: var(--vsp-accent); border-color: var(--vsp-accent); color: var(--vsp-on-accent); }
html body.vsp a.vsp-about-btn-primary:hover { background: var(--vsp-accent-strong); border-color: var(--vsp-accent-strong); color: var(--vsp-on-accent); }
html body.vsp a.vsp-about-btn-ghost { border-color: transparent; color: var(--vsp-link); }
.vsp-about-legal { margin: 18px 20px 0; padding: 16px 0 0; border-top: 1px solid var(--vsp-line); font-size: 12.5px; color: var(--vsp-muted); }
html body.vsp .vsp-about-legal h2 { margin: 0 0 6px; font-family: var(--vsp-font); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vsp-muted); }
.vsp-about-legal p { margin: 0 0 6px; }
.vsp-about-legal a { font-weight: 600; }
.vsp-about-tech { margin-top: 10px; }
.vsp-about-tech summary { cursor: pointer; font-weight: 700; color: var(--vsp-ink-2); padding: 6px 0; width: max-content; }
.vsp-about-tech summary:focus-visible { outline: 0; box-shadow: var(--vsp-focus); border-radius: 6px; }
.vsp-about-tech .readtext { padding: 4px 0 0; }
html body.vsp .vsp-about-tech h3 { font-family: var(--vsp-font); font-size: 13px; font-weight: 700; margin: 12px 0 6px; color: var(--vsp-ink); }
.vsp-about-tech table.records-table { font-size: 12.5px; width: 100%; }
.vsp-about-tech table.records-table th, .vsp-about-tech table.records-table td { padding: 6px 8px; color: var(--vsp-ink-2); }
@media (max-width: 560px) {
  .vsp-about-hero { padding: 22px 18px 20px; }
  .vsp-about-grid, .vsp-about-help, .vsp-about-legal { margin-left: 12px; margin-right: 12px; }
  .vsp-about-grid { grid-template-columns: minmax(0, 1fr); }
  .vsp-about-links { width: 100%; }
  html body.vsp a.vsp-about-btn { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================================================
   Page de connexion : formulaire à gauche, présentation de VSP TECH à droite (pas en marque blanche)
   ===================================================================================================== */
body.task-login { height: auto !important; min-height: 100%; overflow: auto !important; }
html body.task-login { background: var(--vsp-bg) !important; }
body.task-login #layout { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; height: auto !important; overflow: visible !important; }
body.task-login #layout-content { order: 1; display: flex !important; flex-direction: column; justify-content: center; align-items: center; padding: 3rem 2rem !important; background: var(--vsp-surface) !important; min-width: 0; height: auto !important; overflow: visible !important; }
body.task-login #logo, body.task-login #login-form { position: static !important; top: auto !important; left: auto !important; transform: none !important; }
.vsp-login-head #logo, .vsp-login-head .vsp-logo-night { max-width: 190px; max-height: 48px; width: auto; margin: 0 0 2rem !important; }
.vsp-login-head #logo { display: block; }
.vsp-login-head { width: 100%; max-width: 380px; margin: 0 0 1.25rem; text-align: left; }
html body.task-login .vsp-login-head h2 { margin: 0 0 .45rem; font-size: 1.65rem; font-weight: 700; color: var(--vsp-ink); letter-spacing: -.015em; line-height: 1.22; overflow-wrap: anywhere; }
.vsp-login-head h2 span { color: var(--vsp-accent-strong); }
.vsp-login-kicker { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .7rem !important; padding: .28rem .65rem; border-radius: 8px;
  background: var(--vsp-accent-tint); color: var(--vsp-accent-ink) !important; font-size: .72rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vsp-login-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--vsp-success); }
.vsp-login-head p { margin: 0; color: var(--vsp-muted); font-size: .95rem; line-height: 1.55; }
body.task-login #login-form { width: 100%; max-width: 380px; margin: 0; padding: 0; background: transparent; box-shadow: none; }
body.task-login #login-form table { width: 100%; }
body.task-login #login-form td.input { width: 100%; }
body.task-login #login-form .form-control, body.task-login #login-form input.form-control { height: 50px; border-radius: 12px; border: 1px solid var(--vsp-line-2); font-size: 1rem; padding: 0 .95rem; background: var(--vsp-surface); color: var(--vsp-ink); }
body.task-login #login-form .input-group-text { border-radius: 12px 0 0 12px; border-color: var(--vsp-line-2); background: var(--vsp-surface-2); color: var(--vsp-muted); }
body.task-login #login-form .input-group .form-control { border-radius: 0 12px 12px 0; }
body.task-login #login-form .formbuttons { margin-top: 1.25rem; }
body.task-login #login-form .formbuttons .btn, body.task-login #login-form button.mainaction {
  width: 100%; height: 50px; border-radius: 12px; font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; text-transform: none !important; border: 0 !important;
  background: var(--vsp-accent) !important; color: var(--vsp-on-accent) !important; box-shadow: var(--vsp-shadow-1); transition: background-color .15s, box-shadow .15s; }
body.task-login #login-form .formbuttons .btn:hover { background: var(--vsp-accent-strong) !important; box-shadow: var(--vsp-shadow-2); }
.vsp-login-head, body.task-login #login-form, .vsp-login-info { animation: vsp-in .6s cubic-bezier(.2, .7, .2, 1) both; }
body.task-login #login-form { animation-delay: .08s; }
.vsp-login-info { animation-delay: .16s; }
.vsp-has-at { position: relative; display: flex !important; align-items: stretch; }
.vsp-has-at .form-control { padding-right: .9rem !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.vsp-at { display: flex; align-items: center; padding: 0 .85rem; max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid var(--vsp-line-2); border-left: 0; border-radius: 0 12px 12px 0; background: var(--vsp-surface-2); color: var(--vsp-ink-2); font-weight: 600; font-size: .95rem; }
.vsp-login-info { width: 100%; max-width: 380px; margin: 1.5rem 0 0; display: grid; gap: .55rem; text-align: left; }
.vsp-login-info details { border: 1px solid var(--vsp-line); border-radius: 12px; background: var(--vsp-surface); transition: border-color .2s, box-shadow .2s; }
.vsp-login-info details[open] { border-color: var(--vsp-line-2); box-shadow: var(--vsp-shadow-1); }
.vsp-login-info summary { cursor: pointer; list-style: none; padding: .75rem .95rem; font-size: .88rem; font-weight: 600; color: var(--vsp-ink); display: flex; justify-content: space-between; gap: .5rem; border-radius: 12px; }
.vsp-login-info summary:focus-visible { outline: 0; box-shadow: var(--vsp-focus); }
.vsp-login-info summary::-webkit-details-marker { display: none; }
.vsp-login-info summary::after { content: '+'; color: var(--vsp-accent-strong); font-weight: 700; transition: transform .2s; }
.vsp-login-info details[open] summary::after { transform: rotate(45deg); }
.vsp-login-info details p { margin: 0; padding: 0 .95rem .85rem; font-size: .84rem; line-height: 1.55; color: var(--vsp-muted); }
.vsp-login-info b { color: var(--vsp-ink); }
.vsp-login-info a { color: var(--vsp-link); font-weight: 600; }
.vsp-login-safe { display: flex; gap: .55rem; align-items: flex-start; margin: .35rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--vsp-muted); }
.vsp-login-safe svg { flex: none; width: 16px; height: 16px; margin-top: .1rem; fill: var(--vsp-success); }
body.task-login #login-footer { width: 100%; max-width: 380px; margin-top: 2rem; color: var(--vsp-faint) !important; font-size: .8rem; text-align: left; }
body.task-login #login-footer a { color: var(--vsp-link); }
.vsp-wl-name { font-family: var(--vsp-title); font-size: 1.3rem; font-weight: 700; margin: 0 0 1.5rem !important; color: var(--vsp-ink) !important; }
/* Marque blanche : une seule colonne */
body.task-login.vsp-wl #layout { grid-template-columns: minmax(0, 1fr); background: var(--vsp-bg); }
body.task-login.vsp-wl #layout-content { background: transparent !important; }
body.task-login.vsp-wl #layout-content > * { width: 100%; max-width: 420px; }
body.task-login.vsp-wl .vsp-login-head { padding: 2rem 2rem 0; margin: 0; background: var(--vsp-surface); border-radius: 20px 20px 0 0; border: 1px solid var(--vsp-line); border-bottom: 0; max-width: 420px; }
body.task-login.vsp-wl #login-form { padding: 0 2rem 2rem; background: var(--vsp-surface); border-radius: 0 0 20px 20px; border: 1px solid var(--vsp-line); border-top: 0; max-width: 420px; box-shadow: var(--vsp-shadow-1); }
body.task-login.vsp-wl .vsp-login-info, body.task-login.vsp-wl #login-footer { max-width: 420px; }

/* Panneau VSP TECH */
#vsp-promo { order: 2; position: relative; overflow: hidden; display: flex; align-items: center; padding: 3rem clamp(1.5rem, 4vw, 4rem); color: #fff; background: var(--vsp-navy-dark); }
#vsp-promo::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%); mask-image: linear-gradient(160deg, #000, transparent 70%); }
#vsp-promo::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--vsp-accent); }
.vsp-promo-in { position: relative; z-index: 1; max-width: 560px; animation: vsp-in .7s ease both; }
@keyframes vsp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vsp-promo-logo { height: 46px; width: auto; margin-bottom: 1.75rem; }
.vsp-kicker { margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 700; color: #f6b26b; }
#vsp-promo h2 { margin: 0 0 .9rem; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.16; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.vsp-lead { margin: 0 0 1.5rem; color: rgba(255, 255, 255, .78); font-size: 1rem; line-height: 1.6; }
.vsp-domain { display: flex; gap: .5rem; padding: .35rem; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); margin: 0 0 1.5rem; }
.vsp-domain:focus-within { border-color: rgba(246, 178, 107, .7); }
.vsp-domain input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; border-radius: 10px; padding: 0 .9rem; background: transparent; color: #fff; font-size: .95rem; }
.vsp-domain input::placeholder { color: rgba(255, 255, 255, .55); }
html body #vsp-promo .vsp-domain button { height: 44px; padding: 0 1.15rem; border: 0 !important; border-radius: 10px; font-weight: 700; color: #fff !important; cursor: pointer; background: var(--vsp-accent) !important; box-shadow: none !important; transition: background-color .15s; }
html body #vsp-promo .vsp-domain button:hover { background: var(--vsp-accent-strong) !important; }
.vsp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vsp-services { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 1.25rem; }
.vsp-services a { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .75rem; align-items: center; padding: .7rem .2rem; border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff !important; text-decoration: none; transition: border-color .2s; }
.vsp-services a:hover { border-bottom-color: rgba(246, 178, 107, .6); }
.vsp-services a:hover b { color: #f6b26b; }
.vsp-services .ic { grid-row: 1 / 3; width: 22px; height: 22px; display: grid; place-items: center; }
.vsp-services .ic svg { width: 18px; height: 18px; fill: #f6b26b; }
.vsp-services b { font-size: .92rem; font-weight: 700; line-height: 1.25; transition: color .15s; }
.vsp-services small { font-size: .78rem; color: rgba(255, 255, 255, .6); line-height: 1.3; }
.vsp-promo-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.25rem; }
.vsp-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 1.2rem; border-radius: 12px; font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--vsp-navy) !important; background: #fff; transition: background-color .15s; }
.vsp-btn:hover { background: #fdebd7; }
.vsp-btn-ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255, 255, 255, .35); }
.vsp-btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.vsp-facts { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8rem; color: rgba(255, 255, 255, .7); }
.vsp-facts span::before { content: '✓'; color: #6ee7a8; font-weight: 700; margin-right: .35rem; }
html.dark-mode body.task-login #layout-content { background: var(--vsp-bg) !important; }
html.dark-mode #vsp-promo { background: #0b1218; }

@media (max-width: 480px) {
  body.task-login #login-form .input-group-prepend { display: none; }
  body.task-login #login-form .input-group .form-control { border-radius: 12px 0 0 12px; }
  body.task-login #login-form .input-group:not(.vsp-has-at) .form-control { border-radius: 12px; }
  .vsp-at { max-width: 60%; padding: 0 .7rem; font-size: .88rem; }
}
@media (max-width: 960px) {
  body.task-login #layout { grid-template-columns: minmax(0, 1fr); }
  body.task-login #layout-content { padding: 2.25rem 1.25rem 1.5rem !important; min-height: auto; }
  #vsp-promo { padding: 2rem 1.25rem 2.25rem; }
  #vsp-promo::after { width: auto; height: 4px; right: 0; bottom: auto; }
  .vsp-promo-logo { display: none; }
  .vsp-services { grid-template-columns: minmax(0, 1fr); }
  body.task-login.vsp-wl .vsp-login-head { padding: 1.5rem 1.25rem 0; }
  body.task-login.vsp-wl #login-form { padding: 0 1.25rem 1.5rem; }
}

/* Impression et aperçu avant impression : fond blanc, sans les éléments ajoutés */
html body.action-print { background: #fff !important; }
@media print {
  html body, html.dark-mode body { background: #fff !important; color: #000; }
  .vsp-acct-btn, .vsp-acct-menu, .vsp-compose, .vsp-compose-backdrop, .vsp-reply-bar, .vsp-snip, .vsp-av { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vsp-promo-in, .vsp-login-head, body.task-login #login-form, .vsp-login-info, .vsp-acct-menu, .vsp-compose { animation: none !important; }
  html body.vsp *, html body.vsp *:before { transition: none !important; }
}