/* *****************************************************************
   VexCloud — feuille de style du thème WHMCS « vexcloud » (enfant de Nexus)
   Reprend la charte de vexcloud.fr : couleurs, police, en-tête, pied de page,
   cartes, boutons. Thème clair et sombre, choix partagé avec le site.

   Organisation :
     1. Jetons de couleur (clair / sombre) et correspondance avec Nexus
     2. Base et typographie
     3. En-tête          4. Fil d'Ariane et corps
     5. Cartes, barre latérale        6. Boutons
     7. Formulaires      8. Alertes, statuts, badges
     9. Tableaux (services, factures, tickets)
    10. Tableau de bord  11. Tickets   12. Boutique et panier
    13. Fenêtres, menus, infobulles   14. Pied de page
    15. Thème sombre : composants à couleurs fixes dans Nexus
    16. Mobile et accessibilité
   ***************************************************************** */

/* 1. Jetons ─────────────────────────────────────────────────────── */
:root {
    /* mêmes valeurs que app/globals.css du site */
    --vx-bg: #f5f8ff;
    --vx-surface: #ffffff;
    --vx-surface-2: #ecf2fd;
    --vx-line: #dee5f3;
    --vx-line-strong: #c4cfe5;
    --vx-ink: #0c142c;
    --vx-ink-2: #3e4b68;
    --vx-ink-3: #606d8a;
    --vx-accent: #1d5cf0;
    --vx-accent-hover: #144ad2;
    --vx-accent-ink: #1850de;
    --vx-accent-soft: #e4edff;
    --vx-ok: #05825a;
    --vx-ok-soft: #def7ec;
    --vx-warn: #925c00;
    --vx-warn-soft: #fff4dc;
    --vx-danger: #c8283c;
    --vx-danger-soft: #fee8ec;
    --vx-violet: #7c3aed;
    --vx-violet-soft: #f1eaff;
    --vx-cyan: #0e7490;
    --vx-cyan-soft: #def6fb;
    --vx-shadow-rgb: 30, 50, 110;
    --vx-header-bg: rgba(245, 248, 255, .85);

    --vx-gradient: linear-gradient(120deg, #1d5cf0 0%, #0891b2 100%);
    --vx-gradient-hover: linear-gradient(120deg, #144ad2 0%, #0e7490 100%);
    --vx-gradient-deep: linear-gradient(120deg, #1d4ed8 0%, #0e7490 100%);
    --vx-shadow: 0 1px 2px rgba(var(--vx-shadow-rgb), .06), 0 8px 24px -12px rgba(var(--vx-shadow-rgb), .18);
    --vx-shadow-lg: 0 2px 4px rgba(var(--vx-shadow-rgb), .06), 0 18px 40px -16px rgba(var(--vx-shadow-rgb), .28);
    --vx-radius: 1rem;
    --vx-radius-lg: 1.25rem;
    --vx-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --vx-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    color-scheme: light;
}

:root[data-theme='dark'] {
    --vx-bg: #070b18;
    --vx-surface: #0d1428;
    --vx-surface-2: #131d38;
    --vx-line: #202c4c;
    --vx-line-strong: #303f66;
    --vx-ink: #eef3ff;
    --vx-ink-2: #acb9d6;
    --vx-ink-3: #8695b6;
    --vx-accent: #3468f5;
    --vx-accent-hover: #285ae4;
    --vx-accent-ink: #78a5ff;
    --vx-accent-soft: #182654;
    --vx-ok: #40d696;
    --vx-ok-soft: #0c2e26;
    --vx-warn: #f0b84c;
    --vx-warn-soft: #30240c;
    --vx-danger: #fb7185;
    --vx-danger-soft: #3c121e;
    --vx-violet: #b69cff;
    --vx-violet-soft: #251a4a;
    --vx-cyan: #22d3ee;
    --vx-cyan-soft: #0b2a33;
    --vx-shadow-rgb: 0, 0, 0;
    --vx-header-bg: rgba(7, 11, 24, .82);

    --vx-gradient: linear-gradient(120deg, #3468f5 0%, #0891b2 100%);
    --vx-gradient-hover: linear-gradient(120deg, #285ae4 0%, #0e7490 100%);

    color-scheme: dark;
}

/* Variables Nexus et Bootstrap, branchées sur les jetons VexCloud */
:root {
    --primary: var(--vx-accent);
    --primary-lifted: var(--vx-accent-hover);
    --primary-accented: var(--vx-accent-hover);
    --secondary: var(--vx-ink-3);
    --secondary-lifted: var(--vx-ink-2);
    --secondary-accented: var(--vx-ink);
    --success: var(--vx-ok);
    --success-lifted: var(--vx-ok);
    --success-accented: var(--vx-ok);
    --info: var(--vx-accent);
    --info-lifted: var(--vx-accent-hover);
    --info-accented: var(--vx-accent-hover);
    --notice: var(--vx-violet);
    --notice-lifted: var(--vx-violet);
    --notice-accented: var(--vx-violet);
    --warning: var(--vx-warn);
    --warning-lifted: var(--vx-warn);
    --warning-accented: var(--vx-warn);
    --error: var(--vx-danger);
    --error-lifted: var(--vx-danger);
    --error-accented: var(--vx-danger);
    --grayscale: var(--vx-ink);
    --grayscale-lifted: var(--vx-ink-2);
    --grayscale-accented: var(--vx-ink-2);
    --neutral: var(--vx-ink-3);
    --neutral-lifted: var(--vx-ink-2);
    --neutral-accented: var(--vx-ink);
    --text-inverted: #fff;
    --text-muted: var(--vx-ink-3);
    --text-lifted: var(--vx-ink-3);
    --text-accented: var(--vx-ink-2);
    --text: var(--vx-ink);
    --border-muted: var(--vx-line);
    --border: var(--vx-line);
    --border-lifted: var(--vx-line-strong);
    --border-accented: var(--vx-ink-2);
    --bg: var(--vx-surface);
    --bg-muted: var(--vx-bg);
    --bg-lifted: var(--vx-surface-2);
    --bg-accented: var(--vx-line);
    --bg-inverted: var(--vx-ink);
    --rounding-sm: .5rem;
    --rounding-md: .75rem;
    --rounding-lg: 1rem;
    --text-xs: .6875rem;
    --text-sm: .8125rem;
    --text-md: .9375rem;
    --text-lg: 1.0625rem;
    --letter-spacing: 0em;
    --disabled-opacity: 40%;
}

/* 2. Base ──────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body,
.btn,
.form-control,
.custom-select,
.dropdown-menu,
.tooltip,
.popover,
.modal {
    font-family: var(--vx-font);
}

body {
    background: var(--vx-bg);
    color: var(--vx-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--vx-font);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--vx-ink);
}

p { color: inherit; }
a { color: var(--vx-accent-ink); }
a:hover { color: var(--vx-accent-hover); }
.text-muted { color: var(--vx-ink-3) !important; }
hr { border-top-color: var(--vx-line); }
code, kbd, pre, samp { font-family: var(--vx-mono); }
::selection { background: var(--vx-accent-soft); color: var(--vx-ink); }

:focus-visible {
    outline: 2px solid var(--vx-accent);
    outline-offset: 2px;
}

.vx-skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    padding: .6rem 1rem;
    border-radius: 999px;
    background: var(--vx-accent);
    color: #fff;
    font-weight: 600;
}
.vx-skip:focus { top: 1rem; color: #fff; }

/* 3. En-tête ───────────────────────────────────────────────────── */
header.header.vx-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--vx-header-bg);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--vx-line);
}

/* Barre client (connecté) */
header.header .topbar.vx-topbar {
    background: transparent;
    border-bottom: 1px solid var(--vx-line);
    color: var(--vx-ink-3);
    padding: 0;
    font-size: .8125rem;
}
header.header .topbar.vx-topbar .btn,
header.header .topbar.vx-topbar .active-client .btn,
header.header .topbar.vx-topbar .active-client .input-group-text {
    color: var(--vx-ink-3);
    font-size: .8125rem;
    padding: .45rem .5rem;
}
header.header .topbar.vx-topbar .btn:hover { color: var(--vx-ink); }
header.header .topbar.vx-topbar .active-client .btn.btn-active-client span {
    border-bottom: 0;
    color: var(--vx-ink);
    font-weight: 600;
}
header.header .topbar.vx-topbar .btn-return-to-admin {
    background: var(--vx-warn-soft);
    color: var(--vx-warn);
    border-radius: 999px;
}
.vx-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin: 0 .2rem 0 -.15rem;
    border-radius: 50%;
    background: var(--vx-danger);
    vertical-align: middle;
}

/* Barre principale */
header.header .vx-navbar {
    min-height: 64px;
    padding: .5rem 0;
    background: transparent;
}
header.header .vx-navbar > .container {
    flex-wrap: wrap;
    gap: .25rem 1rem;
}
/* Entre 1200 et 1400 px, la place manque : le lien vers le site et l'étiquette passent dans le menu */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .vx-actions .vx-site-link,
    .vx-brand-tag { display: none !important; }
    header.header .vx-navbar .navbar-nav > li > a { padding: .5rem .7rem; }
}
/* Les listes de menus WHMCS ont une marge haute et basse : sans elle, menus, Compte et icônes sont sur la même ligne */
header.header .vx-navbar .navbar-nav { margin-top: 0 !important; margin-bottom: 0 !important; }
@media (min-width: 1200px) {
    header.header .vx-navbar .navbar-collapse { align-items: center; }
    header.header .vx-navbar > .container { flex-wrap: nowrap; align-items: center; }
    header.header .vx-navbar .navbar-collapse { flex: 1 1 auto; min-width: 0; }
    header.header .vx-navbar .vx-secondary { margin-left: auto; }
    .vx-actions { margin-left: .5rem; flex-shrink: 0; }
}

.vx-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-right: .75rem;
    color: var(--vx-ink);
    text-decoration: none !important;
}
.vx-brand img { height: 30px; width: auto; }
.vx-brand-name {
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    color: var(--vx-ink);
}
.vx-brand-tag {
    padding: .15rem .55rem;
    border: 1px solid var(--vx-line);
    border-radius: 999px;
    background: var(--vx-surface);
    color: var(--vx-ink-3);
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.vx-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

.vx-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--vx-ink-2);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
    text-decoration: none !important;
}
.vx-icon-btn:hover {
    background: var(--vx-surface-2);
    color: var(--vx-ink);
}

/* icône lune / soleil selon le thème actif */
.vx-when-dark { display: none; }
:root[data-theme='dark'] .vx-when-dark { display: inline-block; }
:root[data-theme='dark'] .vx-when-light { display: none; }

.vx-cart .vx-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--vx-gradient);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}
.vx-cart .vx-count.vx-count-empty { display: none; }

.vx-site-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border: 1px solid var(--vx-line);
    border-radius: 999px;
    background: var(--vx-surface);
    color: var(--vx-ink-2);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}
.vx-site-link i { font-size: .7rem; }
.vx-site-link:hover { color: var(--vx-ink); border-color: var(--vx-line-strong); }

header.header .vx-cta,
header.header .vx-cta:hover { padding: .5rem 1.1rem; color: #fff; font-size: .875rem; }

/* Liens de navigation WHMCS (menus primaire et secondaire) */
header.header #nav { gap: .15rem; }

header.header .vx-navbar .navbar-nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .85rem;
    border-radius: 999px;
    color: var(--vx-ink-2);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}
header.header .vx-navbar .navbar-nav > li > a:hover,
header.header .vx-navbar .navbar-nav > li.show > a,
header.header .vx-navbar .navbar-nav > li.active > a {
    background: var(--vx-surface-2);
    color: var(--vx-ink);
}
header.header .vx-navbar .navbar-nav .badge {
    background: var(--vx-accent-soft);
    color: var(--vx-accent-ink);
    border-radius: 999px;
}
header.header .vx-navbar .vx-secondary > li > a {
    border: 1px solid var(--vx-line);
    background: var(--vx-surface);
}

/* 4. Fil d'Ariane et corps ─────────────────────────────────────── */
.master-breadcrumb {
    background: transparent;
    border: 0;
}
.master-breadcrumb .breadcrumb {
    background: transparent;
    margin: 0;
    padding: 1.25rem 0 0;
    font-size: .8125rem;
}
.master-breadcrumb .breadcrumb a,
.master-breadcrumb .breadcrumb .breadcrumb-item { color: var(--vx-ink-3); }
.master-breadcrumb .breadcrumb .breadcrumb-item.active { color: var(--vx-ink-2); }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--vx-line-strong); content: "›"; }

/* Nexus teinte #main-body (--bg-lifted) : la zone principale garde le fond de la page, sans bande sous l'en-tête */
html body #main-body { background-color: transparent; }
#main-body {
    padding: 1.25rem 0 4rem;
    background: none;
}
/* Halos du haut de page : posés sur la page entière, ils passent sous l'en-tête et le fil d'Ariane sans coupure */
html body {
    background-image:
        radial-gradient(60rem 30rem at 8% -4rem, rgba(29, 92, 240, .08), transparent 60%),
        radial-gradient(50rem 28rem at 100% -2rem, rgba(8, 145, 178, .08), transparent 60%);
    background-repeat: no-repeat;
}

.header-lined h1,
h1.font-size-36,
.primary-content > h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.header-lined { border-bottom: 0; }

/* 5. Cartes et barre latérale ──────────────────────────────────── */
.card,
.panel,
.panel-default,
.mc-promo-manage,
.mc-promo-login {
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
    color: var(--vx-ink);
}
.card { overflow: hidden; }

.card-header,
.panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--vx-line);
}
html body .card > .card-header { background: transparent; }
.card-footer,
html body .card > .card-footer {
    background: var(--vx-bg);
    border-top: 1px solid var(--vx-line);
}
.card-footer:empty { display: none; }

.card-title,
.panel-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--vx-ink);
}

/* Les bordures colorées Nexus deviennent une pastille discrète */
.card-accent-gold,
.card-accent-green,
.card-accent-red,
.card-accent-blue,
.card-accent-orange,
.card-accent-pomegranate,
.card-accent-sun-flower,
.card-accent-asbestos,
.card-accent-midnight-blue,
.card-accent-teal,
.card-accent-emerald,
.card-accent-amethyst {
    border-top: 1px solid var(--vx-line);
    background: var(--vx-surface);
}
.card[class*="card-accent-"] .card-header { position: relative; padding-left: 1.6rem; }
.card[class*="card-accent-"] .card-header::before {
    content: "";
    position: absolute;
    left: .95rem;
    top: 50%;
    width: .3rem;
    height: 1.1rem;
    border-radius: 999px;
    background: var(--vx-accent);
    transform: translateY(-50%);
}
.card-accent-green .card-header::before,
.card-accent-emerald .card-header::before { background: var(--vx-ok); }
.card-accent-red .card-header::before,
.card-accent-pomegranate .card-header::before { background: var(--vx-danger); }
.card-accent-gold .card-header::before,
.card-accent-sun-flower .card-header::before,
.card-accent-orange .card-header::before { background: var(--vx-warn); }
.card-accent-amethyst .card-header::before { background: var(--vx-violet); }
.card-accent-teal .card-header::before { background: var(--vx-cyan); }

.list-group-item {
    background: transparent;
    border-color: var(--vx-line);
    color: var(--vx-ink-2);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background: var(--vx-surface-2);
    color: var(--vx-ink);
}
.list-group-item.active {
    background: var(--vx-accent-soft);
    border-color: var(--vx-line);
    color: var(--vx-accent-ink);
    font-weight: 700;
}

.sidebar .card-sidebar .list-group-item {
    margin: 2px 8px;
    padding: .55rem .8rem;
    border: 0;
    border-radius: .65rem;
    font-weight: 500;
}
.sidebar .card-sidebar .list-group-flush { padding: .35rem 0; }
.sidebar .card-sidebar .card-header { padding: .85rem 1rem; }
.sidebar .card-sidebar .card-title { font-size: .875rem; }
.sidebar .card-sidebar .card-minimise { color: var(--vx-ink-3); font-size: .75rem; }
.sidebar .card-sidebar .sidebar-menu-item-icon { color: var(--vx-ink-3); }
.sidebar .card-sidebar .list-group-item.active .sidebar-menu-item-icon { color: var(--vx-accent-ink); }
.sidebar .card-sidebar .badge {
    background: var(--vx-surface-2);
    color: var(--vx-ink-2);
    border-radius: 999px;
    font-weight: 600;
}

/* 6. Boutons ───────────────────────────────────────────────────── */
.btn {
    border-radius: 999px;
    font-weight: 600;
    transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s, color .15s;
}
.btn-sm, .btn-xs { padding: .3rem .8rem; font-size: .8125rem; }
.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }

.btn-primary,
.btn-success,
.btn-info,
.btn-order-now,
.btn-checkout,
#btnCompleteProductConfig,
#btnCompleteOrder,
.primary-bg-color.btn {
    background: var(--vx-gradient);
    border: 0;
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(29, 92, 240, .55);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-info:hover,
.btn-order-now:hover,
.btn-checkout:hover,
#btnCompleteProductConfig:hover,
#btnCompleteOrder:hover {
    background: var(--vx-gradient-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px rgba(29, 92, 240, .6);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled):active { background: var(--vx-gradient-hover); border: 0; }

.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-light {
    background: var(--vx-surface);
    border: 1px solid var(--vx-line-strong);
    color: var(--vx-ink);
    box-shadow: none;
}
.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-light:hover {
    background: var(--vx-surface);
    border-color: var(--vx-accent);
    color: var(--vx-accent-ink);
}

.btn-danger {
    background: var(--vx-danger-soft);
    border: 1px solid transparent;
    color: var(--vx-danger);
}
.btn-danger:hover { background: var(--vx-danger); color: #fff; }
.btn-warning { background: var(--vx-warn-soft); border: 0; color: var(--vx-warn); }
.btn-link { color: var(--vx-accent-ink); }
.vx-btn-warn { border-color: var(--vx-warn) !important; color: var(--vx-warn) !important; }

/* 7. Formulaires ───────────────────────────────────────────────── */
label,
.form-control-label,
.col-form-label { font-weight: 600; color: var(--vx-ink-2); }

.form-control,
.custom-select,
.field.form-control,
.custom-file-label {
    min-height: 2.75rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: .75rem;
    background-color: var(--vx-surface);
    color: var(--vx-ink);
}
textarea.form-control { min-height: 6rem; }
.form-control::placeholder { color: var(--vx-ink-3); opacity: .8; }
.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--vx-accent);
    background-color: var(--vx-surface);
    color: var(--vx-ink);
    box-shadow: 0 0 0 4px rgba(29, 92, 240, .15);
}
.form-control:disabled,
.form-control[readonly] { background: var(--vx-surface-2); color: var(--vx-ink-3); }
.custom-file-label::after {
    background: var(--vx-surface-2);
    color: var(--vx-ink-2);
    border-left-color: var(--vx-line-strong);
    border-radius: 0 .75rem .75rem 0;
    height: auto;
    bottom: 0;
}

.input-group-text {
    border-color: var(--vx-line-strong);
    background: var(--vx-surface-2);
    color: var(--vx-ink-3);
}
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-prepend > .btn { border-radius: .75rem 0 0 .75rem; }
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn { border-radius: 0 .75rem .75rem 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.prepend-icon .field-icon { color: var(--vx-ink-3); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--vx-accent); border-color: var(--vx-accent); }

/* 8. Alertes, statuts, badges ──────────────────────────────────── */
.alert {
    border-radius: var(--vx-radius);
    border: 1px solid transparent;
}
.alert-info { background: var(--vx-accent-soft); border-color: rgba(29, 92, 240, .2); color: var(--vx-accent-ink); }
.alert-success { background: var(--vx-ok-soft); border-color: rgba(5, 130, 90, .25); color: var(--vx-ok); }
.alert-warning { background: var(--vx-warn-soft); border-color: rgba(146, 92, 0, .25); color: var(--vx-warn); }
.alert-danger { background: var(--vx-danger-soft); border-color: rgba(200, 40, 60, .25); color: var(--vx-danger); }
.alert a, .alert .alert-link { color: inherit; font-weight: 700; text-decoration: underline; }

/* Statuts (services, factures, tickets) : pastille douce, comme sur le site */
.label,
.status,
.badge {
    border-radius: 999px;
    font-weight: 600;
}
.label.status,
span.status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    font-size: .75rem;
    line-height: 1.2;
    background: var(--vx-surface-2);
    color: var(--vx-ink-2);
}
.label.status::before,
span.status::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor;
}
.status-active, .status-open, .status-completed, .status-paid, .status-accepted, .status-delivered {
    background: var(--vx-ok-soft) !important; color: var(--vx-ok) !important;
}
.status-pending, .status-customer-reply, .status-inprogress, .status-pending-registration,
.status-pending-transfer, .status-redemption, .status-grace, .status-draft, .status-unpaid,
.status-payment-pending {
    background: var(--vx-warn-soft) !important; color: var(--vx-warn) !important;
}
.status-suspended, .status-fraud, .status-overdue, .status-collections, .status-dead, .status-lost {
    background: var(--vx-danger-soft) !important; color: var(--vx-danger) !important;
}
.status-answered, .status-onhold {
    background: var(--vx-accent-soft) !important; color: var(--vx-accent-ink) !important;
}
.status-terminated, .status-cancelled, .status-closed, .status-expired, .status-transferred-away, .status-refunded {
    background: var(--vx-surface-2) !important; color: var(--vx-ink-3) !important;
}

.badge-primary, .badge-info { background: var(--vx-accent-soft); color: var(--vx-accent-ink); }
.badge-success { background: var(--vx-ok-soft); color: var(--vx-ok); }
.badge-warning { background: var(--vx-warn-soft); color: var(--vx-warn); }
.badge-danger { background: var(--vx-danger-soft); color: var(--vx-danger); }
.badge-secondary, .badge-light, .badge-dark { background: var(--vx-surface-2); color: var(--vx-ink-2); }

/* 9. Tableaux ──────────────────────────────────────────────────── */
.table {
    color: var(--vx-ink);
}
.table thead th {
    border-bottom: 1px solid var(--vx-line);
    border-top: 0;
    color: var(--vx-ink-3);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.table td,
.table th { border-top-color: var(--vx-line); vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--vx-bg); }
.table-hover tbody tr:hover { background: var(--vx-surface-2); color: var(--vx-ink); }

.table-container {
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
    padding: .5rem 1rem 1rem;
}
.dataTables_wrapper table.table-list {
    border: 0;
    border-radius: 0;
    margin: .5rem 0 !important;
}
.dataTables_wrapper table.table-list thead th {
    border-bottom: 1px solid var(--vx-line);
    background: transparent;
    font-weight: 700;
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc { background: transparent; color: var(--vx-accent-ink); }
html body .table-list > tbody > tr > td,
html body table.dataTable tbody tr,
html body table.dataTable tbody td,
html body table.dataTable tbody td.sorting_1,
html body table.dataTable tbody td.sorting_2 { background-color: transparent; }
table.table-list tbody tr { cursor: pointer; transition: background-color .12s; }
table.table-list tbody tr:hover { background: var(--vx-surface-2) !important; }
table.table-list tbody td { border-top: 1px solid var(--vx-line); padding-top: .85rem; padding-bottom: .85rem; }
table.table-list tbody td strong { font-weight: 700; color: var(--vx-ink); }

html body .dataTables_wrapper .dataTables_filter label .form-control,
html body .dataTables_wrapper .dataTables_filter input {
    min-height: 2.5rem;
    border-radius: 999px;
    background: var(--vx-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23606d8a' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px 50%;
    padding: .45rem 1rem .45rem 2.5rem !important;
}
.dataTables_wrapper .dataTables_info { color: var(--vx-ink-3); font-size: .8125rem; }
.dataTables_wrapper .dataTables_length select { border-radius: 999px; }

.pagination .page-link,
.pagination > li > a,
.pagination > li > span {
    margin: 0 2px;
    border: 1px solid var(--vx-line);
    border-radius: 999px !important;
    background: var(--vx-surface);
    color: var(--vx-ink-2);
}
.pagination .page-link:hover { background: var(--vx-surface-2); color: var(--vx-ink); }
.page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > span {
    background: var(--vx-accent);
    border-color: var(--vx-accent);
    color: #fff;
}
.page-item.disabled .page-link { background: var(--vx-surface); color: var(--vx-ink-3); }

/* Filtres de liste (barre latérale « Afficher ») */
.view-filter-btns .list-group-item .badge { float: right; }

/* 10. Tableau de bord ──────────────────────────────────────────── */
.vx-welcome {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    overflow: hidden;
    padding: 1.75rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background:
        radial-gradient(30rem 14rem at 100% 0%, rgba(8, 145, 178, .14), transparent 70%),
        radial-gradient(30rem 14rem at 0% 100%, rgba(29, 92, 240, .12), transparent 70%),
        var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
.vx-welcome h1 {
    margin: .4rem 0 .35rem;
    font-size: 2rem;
    letter-spacing: -0.03em;
}
.vx-welcome p { margin: 0; color: var(--vx-ink-2); }
.vx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .7rem;
    border: 1px solid rgba(29, 92, 240, .25);
    border-radius: 999px;
    background: var(--vx-accent-soft);
    color: var(--vx-accent-ink) !important;
    font-size: .75rem;
    font-weight: 700;
}
.vx-welcome-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.vx-welcome-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }

.tiles.vx-tiles .row { margin: 0 -.5rem; }
.tiles.vx-tiles .row > [class*="col-"] { padding: .5rem; }
.tiles .tile.vx-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tiles .tile.vx-tile:hover {
    transform: translateY(-3px);
    border-color: var(--vx-tone, var(--vx-accent));
    box-shadow: var(--vx-shadow-lg);
}
.tiles .tile.vx-tile i { position: static; font-size: 1.15rem; color: inherit; }
.vx-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .85rem;
    background: var(--vx-tone-soft, var(--vx-accent-soft));
    color: var(--vx-tone, var(--vx-accent-ink));
}
.tiles .tile.vx-tile .stat {
    margin-top: 1rem;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--vx-ink);
}
.tiles .tile.vx-tile .title {
    margin-top: .15rem;
    color: var(--vx-ink-3);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: none;
}
.vx-tone-blue { --vx-tone: var(--vx-accent-ink); --vx-tone-soft: var(--vx-accent-soft); }
.vx-tone-green { --vx-tone: var(--vx-ok); --vx-tone-soft: var(--vx-ok-soft); }
.vx-tone-violet { --vx-tone: var(--vx-violet); --vx-tone-soft: var(--vx-violet-soft); }
.vx-tone-amber { --vx-tone: var(--vx-warn); --vx-tone-soft: var(--vx-warn-soft); }
.vx-tone-cyan { --vx-tone: var(--vx-cyan); --vx-tone-soft: var(--vx-cyan-soft); }

.client-home-cards .card { margin-bottom: 1rem; font-size: .9375rem; }
html body .client-home-cards .card-header,
html body .client-home-cards .card-footer { background: transparent; }
html body .client-home-cards .card-header { padding: .9rem 1.1rem .9rem 1.6rem; border-bottom: 1px solid var(--vx-line); }
html body .client-home-cards .card-footer,
html body .primary-content .client-home-cards .card .card-footer { padding: .35rem; border-top: 0; background: transparent; }
html body .client-home-cards .card-title { font-size: 1rem; font-weight: 700; }
html body .client-home-cards .list-group {
    max-height: 260px;
    border-top: 0 !important;
    border-bottom: 0 !important;
}
html body .client-home-cards .list-group .list-group-item {
    padding: .7rem 1.1rem;
    border-radius: 0;
    border-width: 0 0 1px;
    border-color: var(--vx-line);
}
html body .client-home-cards .card-body p { padding: 1rem 1.1rem; margin: 0; }
.client-home-cards .card-header .btn { box-shadow: none; }
html body .client-home-cards .card-header .btn,
.client-home-cards .card-header .btn[class*="bg-color-"] {
    background: var(--vx-surface) !important;
    border: 1px solid var(--vx-line-strong);
    color: var(--vx-ink);
}

.nav-tabs { border-bottom-color: var(--vx-line); }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--vx-ink-3);
    font-weight: 600;
}
.nav-tabs .nav-link:hover { color: var(--vx-ink); border-bottom-color: var(--vx-line-strong); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: transparent;
    color: var(--vx-accent-ink);
    border-bottom-color: var(--vx-accent);
}
.tab-content.bg-white,
.tab-content { background: transparent !important; }

/* 11. Tickets ──────────────────────────────────────────────────── */
.view-ticket .card-body { border-color: var(--vx-line); }
.ticket-reply {
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-surface);
    overflow: hidden;
}
.ticket-reply.staff {
    border-color: rgba(29, 92, 240, .3);
    background: var(--vx-accent-soft);
}
.view-ticket .posted-by,
.ticket-reply .posted-by {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--vx-line);
    background: transparent;
    color: var(--vx-ink-3);
    font-size: .8125rem;
}
.view-ticket .posted-by .posted-by-name { color: var(--vx-ink); font-weight: 700; }
.view-ticket .requestor-badge {
    border-radius: 999px;
    background: var(--vx-surface-2);
    color: var(--vx-ink-2);
    font-weight: 600;
}
.ticket-reply.staff .requestor-badge { background: var(--vx-accent); color: #fff; }
.view-ticket .message { color: var(--vx-ink); line-height: 1.65; }
.view-ticket .attachments { border-top: 1px solid var(--vx-line); }
.view-ticket .attachment-list li { border-radius: .75rem; border-color: var(--vx-line); }

/* Éditeur Markdown des réponses */
.md-editor,
.md-editor > textarea,
.md-editor .md-header,
.md-editor .md-footer {
    border-color: var(--vx-line-strong) !important;
    background: var(--vx-surface) !important;
    color: var(--vx-ink) !important;
}
.md-editor { border-radius: .75rem; overflow: hidden; }
html body .md-editor > textarea.markdown-editor,
html body .md-editor > .md-preview,
html body textarea.md-input,
html body textarea.markdown-editor {
    background: var(--vx-surface) !important;
    color: var(--vx-ink) !important;
    border-color: var(--vx-line) !important;
}
html body .md-editor > .btn-toolbar { background: var(--vx-surface-2) !important; }
.md-preview table, .markdown-content table { background: var(--vx-surface); border-color: var(--vx-line); }
.md-preview table > thead > tr > th, .markdown-content table > thead > tr > th { background: var(--vx-surface-2); border-color: var(--vx-line); color: var(--vx-ink); }
.md-preview table td, .markdown-content table td { border-color: var(--vx-line); }
.md-preview pre, .markdown-content pre { border-radius: .75rem; background: #0b1020; color: #e6edff; }
.md-editor .btn-default { border-radius: .5rem; }

/* 12. Boutique et panier (orderform standard_cart / nexus_cart) ── */
html body #order-standard_cart .products .product {
    padding: 1.5rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
html body #order-standard_cart .products .product:hover {
    transform: translateY(-3px);
    border-color: rgba(29, 92, 240, .45);
    box-shadow: var(--vx-shadow-lg);
}
#order-standard_cart .products .product header {
    margin: 0 0 1rem;
    padding: 0 0 .75rem;
    border-bottom: 1px solid var(--vx-line);
    background: transparent;
}
#order-standard_cart .products .product header span {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--vx-ink);
}
#order-standard_cart .products .product div.product-desc {
    color: var(--vx-ink-2);
    font-size: .9375rem;
    line-height: 1.75;
}
#order-standard_cart .products .product footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--vx-line-strong);
}
#order-standard_cart .products .product div.product-pricing { color: var(--vx-ink-3); }
#order-standard_cart .products .product div.product-pricing span.price {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--vx-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html body #order-standard_cart .products .product footer .btn-order-now,
html body #order-standard_cart .text-right .btn-checkout {
    padding: .65rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--vx-gradient);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(29, 92, 240, .55);
}
html body #order-standard_cart .products .product footer .btn-order-now:hover,
html body #order-standard_cart .text-right .btn-checkout:hover,
html body #order-standard_cart .text-right .btn-checkout:focus {
    background: var(--vx-gradient-hover);
    color: #fff;
}

#order-standard_cart .product-info {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
#order-standard_cart .product-info .product-title { font-size: 1.375rem; font-weight: 800; }

#order-standard_cart .sub-heading { border-top-color: var(--vx-line); }
html body #order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading .primary-bg-color {
    padding: .2rem 1rem;
    border-radius: 999px;
    background: var(--vx-bg);
    color: var(--vx-ink);
    font-weight: 700;
}
html body #order-standard_cart .panel label { color: var(--vx-ink-2); font-weight: 600; }

html body #order-standard_cart .order-summary {
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow-lg);
}
html body #order-standard_cart .order-summary h2 {
    margin: 0;
    padding: .9rem 1.25rem;
    border: 0;
    border-radius: var(--vx-radius-lg) var(--vx-radius-lg) 0 0;
    background: var(--vx-gradient);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
}
html body #order-standard_cart .order-summary .summary-container {
    border-color: var(--vx-line);
    border-radius: 0 0 var(--vx-radius-lg) var(--vx-radius-lg);
    background: var(--vx-surface);
    color: var(--vx-ink);
}
#order-standard_cart .order-summary .total-due-today .amt { font-weight: 800; letter-spacing: -0.02em; color: var(--vx-ink); }

html body #order-standard_cart .cart-sidebar .card-header,
html body #order-standard_cart .cart-sidebar .card-sidebar .panel-title { color: var(--vx-ink); }
html body #order-standard_cart .cart-sidebar .list-group-item {
    margin: 2px 6px;
    border-radius: .6rem;
    color: var(--vx-ink-2);
    font-weight: 500;
}
html body #order-standard_cart .cart-sidebar .list-group-item.active,
html body #order-standard_cart .cart-sidebar .list-group-item.active:hover,
html body #order-standard_cart .cart-sidebar .list-group-item.active:focus {
    background: var(--vx-accent-soft);
    color: var(--vx-accent-ink);
    font-weight: 700;
}

html body #order-standard_cart .cart-body .view-cart-items-header {
    border: 0;
    border-radius: var(--vx-radius) var(--vx-radius) 0 0;
    background: var(--vx-gradient);
    color: #fff;
}
html body #order-standard_cart .cart-body .view-cart-items,
html body #order-standard_cart .cart-body .view-cart-empty {
    border-color: var(--vx-line);
    background: var(--vx-surface);
    color: var(--vx-ink);
}
#order-standard_cart .view-cart-items .item { border-color: var(--vx-line); }
html body #order-standard_cart #frmCheckout #creditCardInputFields,
html body #order-standard_cart #frmCheckout #containerExistingAccountSelect .account {
    border-color: var(--vx-line);
    background: var(--vx-surface);
}
#order-standard_cart .alert-success.total-due-today,
#order-standard_cart #totalDueToday {
    border-radius: var(--vx-radius);
}

/* 13. Fenêtres, menus, infobulles ──────────────────────────────── */
.dropdown-menu {
    padding: .4rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow-lg);
}
.dropdown-menu li.dropdown-item { padding: 0 !important; background: transparent; }
/* Menus longs (Boutique…) : jamais plus hauts que l'écran, défilement interne */
header.header .dropdown-menu {
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
header.header .dropdown-menu a.dropdown-item,
header.header .dropdown-menu a.dropdown-item.px-2 { padding: .45rem .75rem !important; line-height: 1.35; white-space: nowrap; }
header.header .dropdown-menu li.dropdown-item { padding: 0 !important; }
/* Menu « Plus » (collapsable-dropdown-menu) : Nexus y met des liens sans classe */
header.header .dropdown-menu li.dropdown-item > a:not(.dropdown-item) {
    display: block;
    padding: .45rem .75rem;
    border-radius: .6rem;
    color: var(--vx-ink-2);
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
}
header.header .dropdown-menu li.dropdown-item > a:not(.dropdown-item):hover,
header.header .dropdown-menu li.dropdown-item.active > a:not(.dropdown-item) {
    background: var(--vx-surface-2);
    color: var(--vx-ink);
}
header.header .dropdown-menu .dropdown-divider { margin: .3rem .25rem; }
.dropdown-item,
.dropdown-menu .dropdown-item.px-2 {
    padding: .5rem .75rem !important;
    border-radius: .6rem;
    color: var(--vx-ink-2);
    font-weight: 500;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background: var(--vx-surface-2);
    color: var(--vx-ink);
}
.dropdown-divider { border-top-color: var(--vx-line); }

.modal-content {
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    color: var(--vx-ink);
    box-shadow: var(--vx-shadow-lg);
}
.modal-header,
.modal-footer { border-color: var(--vx-line); }
.modal-backdrop.show { opacity: .55; }
.close { color: var(--vx-ink); text-shadow: none; opacity: .6; }
.close:hover { color: var(--vx-ink); opacity: 1; }

/* Fenêtre langue / devise : la version Nexus est sombre, on la ramène au style du site */
.modal-localisation .modal-content { background: var(--vx-surface); color: var(--vx-ink); }
.modal-localisation .modal-body .h5,
.modal-localisation h5 { color: var(--vx-ink); }
.modal-localisation .item-selector .item {
    border: 1px solid var(--vx-line);
    border-radius: .75rem;
    background: var(--vx-surface);
    color: var(--vx-ink-2);
}
.modal-localisation .item-selector .item:hover { border-color: var(--vx-accent); color: var(--vx-ink); }
.modal-localisation .item-selector .item.active {
    border-color: var(--vx-accent);
    background: var(--vx-accent-soft);
    color: var(--vx-accent-ink);
}
.modal-localisation .modal-footer { background: transparent; }

.popover {
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow-lg);
}
.popover-body { color: var(--vx-ink); }
.bs-popover-bottom > .arrow::after { border-bottom-color: var(--vx-surface); }
.bs-popover-bottom > .arrow::before { border-bottom-color: var(--vx-line); }
.client-alerts li a { color: var(--vx-ink-2); }
.client-alerts li a:hover { background: var(--vx-surface-2); color: var(--vx-ink); }
.tooltip-inner { border-radius: .5rem; background: var(--vx-ink); color: var(--vx-bg); font-weight: 500; }

/* 14. Pied de page ─────────────────────────────────────────────── */
#footer.footer.vx-footer {
    margin-top: 0;
    padding: 3.5rem 0 1.5rem;
    border-top: 1px solid var(--vx-line);
    background: var(--vx-surface);
    color: var(--vx-ink-2);
}
.vx-footer-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .vx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .vx-footer-grid { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
}
.vx-footer-about { max-width: 24rem; }
.vx-footer-about p { margin: 1rem 0 0; font-size: .875rem; color: var(--vx-ink-2); }
.vx-footer h2 {
    margin: 0 0 1rem;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--vx-ink);
}
.vx-footer ul { margin: 0; padding: 0; list-style: none; }
.vx-footer-grid ul li + li { margin-top: .6rem; }
.vx-footer-grid ul a {
    color: var(--vx-ink-2);
    font-size: .875rem;
    text-decoration: none;
}
.vx-footer-grid ul a:hover { color: var(--vx-ink); }
.vx-footer-grid ul a i { font-size: .7rem; }

.vx-social { display: flex; gap: .4rem; margin-top: 1.25rem !important; }
.vx-social li + li { margin-top: 0 !important; }
.vx-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--vx-line);
    border-radius: .6rem;
    color: var(--vx-ink-3) !important;
    font-size: .9rem !important;
}
.vx-social a:hover { border-color: var(--vx-line-strong); color: var(--vx-ink) !important; }

.vx-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--vx-line);
    font-size: .75rem;
    color: var(--vx-ink-3);
}
.vx-footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.vx-footer .copyright { margin: 0; color: var(--vx-ink-3); font-size: .75rem; text-align: left; }
.vx-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .75rem;
    border: 1px solid var(--vx-line);
    border-radius: 999px;
    color: var(--vx-ink-2);
    font-weight: 600;
    text-decoration: none !important;
}
.vx-status:hover { color: var(--vx-ink); border-color: var(--vx-line-strong); }
.vx-status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--vx-ok); }
.vx-pay { margin: 0; }
.vx-pay span { font-family: var(--vx-mono); color: var(--vx-ink-2); }
.vx-lang {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .8rem;
    border: 1px solid var(--vx-line);
    background: var(--vx-surface);
    color: var(--vx-ink-2);
    font-size: .75rem;
}
.vx-lang:hover { border-color: var(--vx-line-strong); color: var(--vx-ink); }

/* 15. Thème sombre : composants Nexus / Bootstrap à couleurs fixes ─ */
:root[data-theme='dark'] .bg-white,
:root[data-theme='dark'] .bg-light,
:root[data-theme='dark'] .bg-default { background-color: var(--vx-surface) !important; }
:root[data-theme='dark'] .text-dark,
:root[data-theme='dark'] .text-black-50 { color: var(--vx-ink) !important; }
:root[data-theme='dark'] .border,
:root[data-theme='dark'] .border-top,
:root[data-theme='dark'] .border-bottom { border-color: var(--vx-line) !important; }
:root[data-theme='dark'] .table,
:root[data-theme='dark'] .table th,
:root[data-theme='dark'] .table td { color: var(--vx-ink); }
:root[data-theme='dark'] .table-active,
:root[data-theme='dark'] .table-light,
:root[data-theme='dark'] .table-light > td,
:root[data-theme='dark'] .table-light > th,
:root[data-theme='dark'] .thead-light th { background: var(--vx-surface-2); color: var(--vx-ink); border-color: var(--vx-line); }
:root[data-theme='dark'] .tiles .tile { background: var(--vx-surface); border-color: var(--vx-line); }
:root[data-theme='dark'] .custom-select {
    background: var(--vx-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3E%3Cpath fill='%23acb9d6' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px;
}
:root[data-theme='dark'] .well,
:root[data-theme='dark'] .jumbotron,
:root[data-theme='dark'] .breadcrumb { background: transparent; }
:root[data-theme='dark'] .domain-pricing .tld-pricing-header div,
:root[data-theme='dark'] .domain-pricing .tld-pricing-header div:nth-child(odd) { background: var(--vx-surface-2); border-color: var(--vx-line); }
:root[data-theme='dark'] .sidebar .card-sidebar.bg-light { background: var(--vx-surface) !important; }
:root[data-theme='dark'] .dataTables_wrapper table.table-list { border-color: var(--vx-line); }
:root[data-theme='dark'] img.logo-img { filter: brightness(1.1); }
:root[data-theme='dark'] #fullpage-overlay { background: rgba(7, 11, 24, .7); }
:root[data-theme='dark'] .iti__country-list { background: var(--vx-surface); border-color: var(--vx-line); }
:root[data-theme='dark'] .iti__country.iti__highlight { background: var(--vx-surface-2); }
:root[data-theme='dark'] .text-white-50 { color: var(--vx-ink-3) !important; }
:root[data-theme='dark'] .password-strength-meter .progress,
:root[data-theme='dark'] .progress { background: var(--vx-surface-2); }

/* 16. Mobile et accessibilité ──────────────────────────────────── */
@media (max-width: 1199.98px) {
    header.header .vx-navbar .navbar-collapse {
        flex-basis: 100%;
        margin: .5rem -.25rem 0;
        padding: .5rem 0 .75rem;
        border-top: 1px solid var(--vx-line);
    }
    header.header .vx-navbar .navbar-nav > li > a { display: flex; width: 100%; padding: .7rem .9rem; border-radius: .75rem; }
    header.header .vx-navbar .vx-secondary > li > a { border: 0; background: transparent; }
    header.header .vx-navbar .dropdown-menu { border: 0; box-shadow: none; background: transparent; padding-left: .75rem; }
    header.header #nav { gap: 0; }
}

@media (max-width: 767.98px) {
    .header-lined h1,
    h1.font-size-36,
    .vx-welcome h1 { font-size: 1.6rem; }
    .vx-welcome { padding: 1.25rem; }
    .vx-welcome-actions,
    .vx-welcome-actions .btn { width: 100%; justify-content: center; }
    .vx-brand-tag { display: none; }
    .table-container { padding: .25rem .5rem .75rem; overflow-x: auto; }

    /* Corrige un débordement horizontal d'origine de WHMCS (marges négatives des .row du panier) */
    #order-standard_cart .row { margin-left: 0; margin-right: 0; }
    #order-standard_cart .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
    #order-standard_cart .cart-body { padding-left: 15px; padding-right: 15px; }
    html body #order-standard_cart .products .product { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   17. Correctifs constatés sur le WHMCS en ligne (27/10/2026)
   WHMCS recharge Font Awesome et les styles du panier APRÈS cette feuille :
   les règles ci-dessous sont donc volontairement plus spécifiques.
   ══════════════════════════════════════════════════════════════════ */

/* Nexus peint html et body avec --bg-inverted : on garde le fond du site, quelle que soit la hauteur de page */
html { background-color: var(--vx-bg); }
html body.vx-invoice-page { height: auto; }

/* Fonds « inversés » de Nexus (boutons foncés) : restent foncés en mode sombre */
:root[data-theme='dark'] {
    --bg-inverted: #3468f5;
    --grayscale: #3a4a73;
    --grayscale-lifted: #4a5a85;
    --grayscale-accented: #5a6a95;
}

/* Bouton lune / soleil : une seule icône à la fois (Font Awesome est rechargé après nous) */
html body .vx-icon-btn .vx-when-dark { display: none; }
html body .vx-icon-btn .vx-when-light { display: inline-block; }
html[data-theme='dark'] body .vx-icon-btn .vx-when-dark { display: inline-block; }
html[data-theme='dark'] body .vx-icon-btn .vx-when-light { display: none; }

/* En-tête : le lien vexcloud.fr passe dans le pied de page sur grand écran (évite le chevauchement avec « Bonjour… ») */
@media (min-width: 1200px) {
    html body .vx-actions .vx-site-link { display: none !important; }
}

/* Tableaux : survol d'une ligne sans cellules blanches */
html body .table-list > tbody > tr:hover > td,
html body .table-hover tbody tr:hover > td { background-color: var(--vx-surface-2); color: var(--vx-ink); }

/* Barre latérale : bouton « Payer la totalité » et pieds de cartes */
html body .sidebar .btn-success,
html body .sidebar .btn-primary {
    background: var(--vx-gradient);
    border: 0;
    border-radius: 999px;
    color: #fff;
}
html body .sidebar .btn-success:hover,
html body .sidebar .btn-primary:hover { background: var(--vx-gradient-hover); color: #fff; }
html body .sidebar .card-footer { background: transparent; border-top: 1px solid var(--vx-line); }
html body .sidebar .card-footer .btn-default { background: var(--vx-surface); color: var(--vx-ink); border: 1px solid var(--vx-line-strong); border-radius: 999px; }

/* Boutique : les styles du panier (chargés en dernier) imposaient des fonds blancs */
html body #order-standard_cart .products .product header,
html body #order-standard_cart .cart-body .products .product header {
    margin: 0 0 1rem;
    padding: 0 0 .75rem;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--vx-line);
}
html body #order-standard_cart .products .product header span { color: var(--vx-ink); font-size: 1.375rem; font-weight: 800; }
html body #order-standard_cart .products .product footer { border-top: 1px dashed var(--vx-line-strong); }
html body #order-standard_cart .panel .panel-heading,
html body #order-standard_cart .cart-sidebar .card-header,
html body #order-standard_cart .cart-sidebar .panel-heading {
    background: transparent;
    color: var(--vx-ink);
    border-bottom: 1px solid var(--vx-line);
}
html body #order-standard_cart .cart-sidebar .panel-title,
html body #order-standard_cart .cart-sidebar .card-title { color: var(--vx-ink); }
html body #order-standard_cart .product-info,
html body #order-standard_cart .summary-container,
html body #order-standard_cart .view-cart-tabs .tab-content,
html body #order-standard_cart .view-cart-gateway-checkout,
html body #order-standard_cart .apply-credit-container,
html body #order-standard_cart .cc-input-container,
html body #order-standard_cart .account-select-container div.account,
html body #order-standard_cart .domain-selection-options .option,
html body #order-standard_cart .panel-addon .panel-price,
html body #order-standard_cart .mc-promo .body,
html body .product-recommendations .product-recommendation .body {
    background-color: var(--vx-bg);
    border-color: var(--vx-line);
    color: var(--vx-ink);
}
html body #order-standard_cart .view-cart-items .item,
html body #order-standard_cart .view-cart-promotion-code,
html body #order-standard_cart .account-select-container div.account.active,
html body #order-standard_cart .mc-promo,
html body .product-recommendations .product-recommendation {
    background-color: var(--vx-surface);
    border-color: var(--vx-line);
    color: var(--vx-ink);
}
html body #order-standard_cart .view-cart-items .item:nth-child(even),
html body #order-standard_cart .domain-selection-options .option-selected { background-color: var(--vx-surface-2); }
html body #order-standard_cart label,
html body #order-standard_cart .panel-addon .panel-body label,
html body #order-standard_cart .btn-remove-from-cart { color: var(--vx-ink-2); }
html body #order-standard_cart .field,
html body #order-standard_cart .form-control {
    border-color: var(--vx-line-strong);
    background-color: var(--vx-surface);
    color: var(--vx-ink);
}
html body #order-standard_cart .field[readonly],
html body #order-standard_cart .form-control[readonly],
html body #order-standard_cart .form-control[disabled] { background-color: var(--vx-surface-2); }
html body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected=true],
html body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded=true] {
    background-color: var(--vx-bg);
    border-color: var(--vx-line) var(--vx-line) var(--vx-bg);
    color: var(--vx-ink);
}

/* Fiche d'un service : bloc d'état lisible, couleur selon le statut */
html body .product-status {
    overflow: hidden;
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface-2);
    box-shadow: var(--vx-shadow);
}
html body div.product-details div.product-icon {
    margin: 0;
    padding: 2rem 1.5rem 1.75rem;
    border-radius: 0;
    background: var(--vx-gradient-deep);
    color: #fff;
}
html body div.product-details div.product-icon .fa-stack .fa-circle { color: rgba(255, 255, 255, .16); }
html body div.product-details div.product-icon .fa-inverse { color: #fff; }
html body div.product-details div.product-icon h3 { margin: 1rem 0 .25rem; color: #fff; font-size: 1.6rem; font-weight: 800; }
html body div.product-details div.product-icon h4 { margin: 0; color: rgba(255, 255, 255, .8); font-size: 1rem; font-weight: 600; }
html body .product-status-text {
    padding: .65rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    background: var(--vx-surface-2);
    color: var(--vx-ink-2);
}
html body .product-status-active .product-status-text { background: var(--vx-ok); color: #fff; }
html body .product-status-pending .product-status-text { background: var(--vx-warn); color: #fff; }
html body .product-status-suspended .product-status-text,
html body .product-status-fraud .product-status-text { background: var(--vx-danger); color: #fff; }
html[data-theme='dark'] body .product-status-active .product-status-text,
html[data-theme='dark'] body .product-status-pending .product-status-text,
html[data-theme='dark'] body .product-status-suspended .product-status-text,
html[data-theme='dark'] body .product-status-fraud .product-status-text { color: #0c142c; }
html body .product-details .col-md-6.text-center h4 {
    margin: 1.1rem 0 .15rem;
    color: var(--vx-ink-3);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
html body .product-details .col-md-6.text-center h4:first-child { margin-top: .25rem; }
html body .product-details .col-md-6.text-center { color: var(--vx-ink); font-weight: 600; }
html body div.product-details-tab-container,
html body .tab-content.bg-white {
    border-color: var(--vx-line);
    border-radius: 0 0 var(--vx-radius) var(--vx-radius);
    background-color: var(--vx-surface) !important;
    color: var(--vx-ink);
}
html body .nav-tabs .nav-link.active,
html body .nav-tabs .nav-item.show .nav-link {
    background-color: transparent;
    border-color: transparent transparent var(--vx-accent);
    color: var(--vx-accent-ink);
}
html body .responsive-tabs-sm .nav-item a:hover { background-color: var(--vx-surface-2); }

/* ══════════════════════════════════════════════════════════════════
   18. Facture (viewinvoice.tpl)
   ══════════════════════════════════════════════════════════════════ */
.vx-invoice-page {
    min-height: 100vh;
    background:
        radial-gradient(50rem 22rem at 10% -6rem, rgba(29, 92, 240, .08), transparent 60%),
        radial-gradient(40rem 20rem at 100% -4rem, rgba(8, 145, 178, .08), transparent 60%),
        var(--vx-bg);
    padding: 1.5rem 1rem 3rem;
}
.vx-invoice-bar,
.vx-invoice { max-width: 56rem; margin: 0 auto; }
.vx-invoice-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}
.vx-invoice-back { color: var(--vx-ink-2); font-weight: 600; font-size: .9rem; text-decoration: none !important; }
.vx-invoice-back:hover { color: var(--vx-ink); }
.vx-invoice-actions { display: flex; align-items: center; gap: .4rem; }
.vx-invoice-actions .btn { display: inline-flex; align-items: center; gap: .4rem; }

.vx-invoice-head,
.vx-invoice-card,
.vx-invoice-block {
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
.vx-invoice-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    overflow: hidden;
    padding: 2rem;
    margin-bottom: 1rem;
}
.vx-invoice-head::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--vx-gradient);
}
.vx-invoice-head h1 { margin: 1.1rem 0 .25rem; font-size: 1.9rem; letter-spacing: -0.03em; }
.vx-invoice-sub { margin: 0; color: var(--vx-ink-3); font-size: .9rem; }
.vx-invoice-statusbox { text-align: right; min-width: 14rem; }
.vx-invoice-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    background: var(--vx-surface-2);
    color: var(--vx-ink-2);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.vx-invoice-status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.vx-st-paid, .vx-st-payment-pending { background: var(--vx-ok-soft); color: var(--vx-ok); }
.vx-st-unpaid, .vx-st-draft { background: var(--vx-warn-soft); color: var(--vx-warn); }
.vx-st-collections { background: var(--vx-danger-soft); color: var(--vx-danger); }
.vx-st-refunded, .vx-st-cancelled { background: var(--vx-surface-2); color: var(--vx-ink-3); }
.vx-invoice-total { margin: .6rem 0 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--vx-ink); }
.vx-invoice-due { margin: .1rem 0 0; color: var(--vx-ink-3); font-size: .85rem; }
.vx-invoice-pay { margin-top: .9rem; }
.vx-invoice-pay .btn,
.vx-invoice-pay input[type=submit],
.vx-invoice-pay button {
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--vx-gradient);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px rgba(29, 92, 240, .55);
    cursor: pointer;
}

.vx-invoice-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-bottom: 1rem;
}
.vx-invoice-block { padding: 1.25rem 1.4rem; color: var(--vx-ink); font-size: .9rem; }
.vx-invoice-block address { margin: 0; line-height: 1.6; color: var(--vx-ink-2); }
.vx-invoice h2 {
    margin: 0 0 .6rem;
    color: var(--vx-ink-3);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.vx-invoice-card { padding: 1.5rem; margin-bottom: 1rem; }
.vx-invoice-table { margin: 0; color: var(--vx-ink); }
.vx-invoice-table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--vx-line);
    color: var(--vx-ink-3);
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.vx-invoice-table td { border-top: 1px solid var(--vx-line); padding-top: .8rem; padding-bottom: .8rem; }
.vx-num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.vx-invoice-empty { color: var(--vx-ink-3); }
.vx-invoice-totals { max-width: 20rem; margin: 1rem 0 0 auto; }
.vx-invoice-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.vx-invoice-totals dt { font-weight: 500; color: var(--vx-ink-2); }
.vx-invoice-totals dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.vx-invoice-totals .vx-invoice-grand { margin-top: .35rem; padding-top: .7rem; border-top: 2px solid var(--vx-ink); }
.vx-invoice-totals .vx-invoice-grand dt,
.vx-invoice-totals .vx-invoice-grand dd { color: var(--vx-ink); font-size: 1.15rem; font-weight: 800; }
.vx-invoice-note { margin: .75rem 0 0; color: var(--vx-ink-3); font-size: .8rem; }
.vx-credit-input { max-width: 24rem; }
.vx-invoice-foot { margin-top: 1.5rem; text-align: center; color: var(--vx-ink-3); font-size: .78rem; }
.vx-invoice .card { margin-bottom: 1rem; }

@media (max-width: 575.98px) {
    .vx-invoice-head { padding: 1.5rem; }
    .vx-invoice-statusbox { text-align: left; }
}

/* Impression : facture sobre, fond blanc, sans boutons */
@media print {
    html, body, .vx-invoice-page { background: #fff !important; color: #000 !important; padding: 0 !important; }
    :root, :root[data-theme='dark'] { --vx-surface: #fff; --vx-surface-2: #f3f4f6; --vx-bg: #fff; --vx-line: #d1d5db; --vx-ink: #000; --vx-ink-2: #222; --vx-ink-3: #555; }
    .vx-invoice-head, .vx-invoice-card, .vx-invoice-block { box-shadow: none !important; break-inside: avoid; }
}

/* Bouton « Commander » de l'en-tête : texte blanc sur le dégradé, quel que soit l'ordre des styles WHMCS */
html body header.header .vx-actions .vx-cta,
html body header.header .vx-actions .vx-cta:hover,
html body header.header .vx-actions .vx-cta:focus { color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   19. Module Proxmox VE VPS & Cloud (ModulesGarden, interface « Layers UI »)
   Le module tire toutes ses couleurs de variables CSS limitées à #layers2 :
   on les rebranche sur la charte VexCloud (clair et sombre), sans toucher au module.
   Ses styles étant chargés dans la page après ce fichier, « html body » garde la priorité.
   ══════════════════════════════════════════════════════════════════ */
html body #layers2,
html body #layers2-body {
    /* gris et textes */
    --color-black-rgb: 12, 20, 44;
    --color-grey: var(--vx-line);
    --color-grey-light: var(--vx-ink-3);
    --color-grey-light-faded: var(--vx-line-strong);
    --color-grey-dark: var(--vx-ink);
    --text-white: #fff;
    --text-faded: var(--vx-ink-3);
    --text-default: var(--vx-ink-2);
    --text-headers: var(--vx-ink);
    --text-module-name: var(--vx-ink);

    /* surfaces */
    --app-background: transparent;
    --components-background: var(--vx-surface);
    --components-border: var(--vx-line);
    --table-lines: var(--vx-line);
    --type-default: var(--vx-surface-2);
    --type-default-hover: var(--vx-line);
    --type-default-active: var(--vx-line-strong);
    --type-default-faded: var(--vx-surface-2);
    --background-grey-dark: #3a4a73;

    /* couleurs d'action : fonds assez soutenus pour du texte blanc, dans les deux thèmes */
    --type-primary: #1d5cf0;
    --type-primary-hover: #144ad2;
    --type-primary-active: #1840a8;
    --type-primary-faded: #9ebcff;
    --type-secondary: #0891b2;
    --type-secondary-hover: #0e7490;
    --type-secondary-active: #155e75;
    --type-secondary-faded: #a5e4f2;
    --type-info: #1d5cf0;
    --type-info-hover: #144ad2;
    --type-info-active: #1840a8;
    --type-info-faded: var(--vx-accent-soft);
    --type-success: #05825a;
    --type-success-hover: #046c4b;
    --type-success-active: #03583d;
    --type-success-faded: var(--vx-ok-soft);
    --type-warning: #b45309;
    --type-warning-hover: #92400e;
    --type-warning-active: #78350f;
    --type-warning-faded: var(--vx-warn-soft);
    --type-danger: #c8283c;
    --type-danger-hover: #a91f31;
    --type-danger-active: #8a1828;
    --type-danger-faded: var(--vx-danger-soft);
    --type-critical: #a91f31;
    --type-critical-hover: #8a1828;
    --type-critical-active: #6d1320;
    --type-critical-faded: var(--vx-danger-soft);

    /* textes et icônes colorés : suivent le thème (plus clairs en sombre) */
    --text-primary: var(--vx-accent-ink);
    --text-secondary: var(--vx-cyan);
    --text-info: var(--vx-accent-ink);
    --text-success: var(--vx-ok);
    --text-warning: var(--vx-warn);
    --text-danger: var(--vx-danger);
    --icon-default: var(--vx-ink-3);
    --icon-primary: var(--vx-accent-ink);
    --icon-success: var(--vx-ok);
    --icon-info: var(--vx-accent-ink);
    --icon-warning: var(--vx-warn);
    --icon-danger: var(--vx-danger);
    --url-text: var(--vx-accent-ink);
    --url-text-hover: var(--vx-accent-hover);

    font-family: var(--vx-font);
    color: var(--vx-ink-2);
    background: transparent;
}

/* Cartes (« widgets ») et tuiles d'action aux formes du site */
html body #layers2 .lu-widget {
    overflow: hidden;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
html body #layers2 .lu-widget__top,
html body #layers2 .lu-widget__header,
html body #layers2 .lu-widget__body,
html body #layers2 .lu-widget__actions { border-color: var(--vx-line); }
html body #layers2 .lu-widget__body,
html body #layers2 .lu-widget__content { background: transparent; }
html body #layers2 .lu-widget__top { min-height: 52px; }
html body #layers2 .lu-top__title,
html body #layers2 .lu-top__title-text,
html body #layers2 .lu-section .lu-top__title,
html body #layers2 .lu-widget .lu-widget__top .lu-top__title {
    color: var(--vx-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}
html body #layers2 h1, html body #layers2 h2, html body #layers2 h3,
html body #layers2 h4, html body #layers2 h5, html body #layers2 h6 {
    color: var(--vx-ink);
    font-family: var(--vx-font);
    font-weight: 800;
    letter-spacing: -0.02em;
}

html body #layers2 .lu-tile {
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
    color: var(--vx-ink);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
html body #layers2 a.lu-tile:hover,
html body #layers2 .lu-tile--btn:hover {
    transform: translateY(-2px);
    border-color: var(--vx-accent);
    box-shadow: var(--vx-shadow-lg);
}
html body #layers2 .lu-tile__title {
    color: var(--vx-ink);
    font-size: .8125rem;
    font-weight: 600;
}
html body #layers2 .lu-tile img { filter: drop-shadow(0 2px 4px rgba(var(--vx-shadow-rgb), .15)); }
/* Action indisponible (ex. « Démarrer » quand le serveur tourne) */
html body #layers2 .lu-tile.disabled,
html body #layers2 .lu-tile[disabled],
html body #layers2 .lu-tile.is-disabled,
html body #layers2 .lu-tile.lu-is-disabled {
    opacity: .45;
    filter: grayscale(.6);
    transform: none;
    box-shadow: none;
}

/* Tableaux et listes « clé : valeur » du panneau Information */
html body #layers2 .lu-table td,
html body #layers2 .lu-table th,
html body #layers2 .lu-list-group__item { border-color: var(--vx-line); color: var(--vx-ink); }
html body #layers2 .lu-table thead th { color: var(--vx-ink-3); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Boutons, champs, menus et fenêtres du module */
html body #layers2 .lu-btn { border-radius: 999px; font-family: var(--vx-font); font-weight: 600; }
html body #layers2 .lu-btn--primary,
html body #layers2 .lu-btn--success { background: var(--vx-gradient); border-color: transparent; color: #fff; }
html body #layers2 .lu-form-control,
html body #layers2 .lu-select,
html body #layers2 input.lu-form-control,
html body #layers2 textarea.lu-form-control {
    border-color: var(--vx-line-strong);
    border-radius: .75rem;
    background-color: var(--vx-surface);
    color: var(--vx-ink);
}
html body #layers2-body .lu-modal__dialog,
html body #layers2 .lu-modal__dialog,
html body #layers2-body .lu-dropdown,
html body #layers2 .lu-dropdown {
    border-color: var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    color: var(--vx-ink);
    box-shadow: var(--vx-shadow-lg);
}

/* Barre latérale « Service Management » : élément indisponible sans fond blanc */
html body .sidebar .list-group-item.disabled,
html body .sidebar .list-group-item:disabled {
    background: transparent;
    color: var(--vx-ink-3);
    opacity: .55;
}

/* ══════════════════════════════════════════════════════════════════
   20. Accueil de l'espace client : cartes « Comment pouvons-nous vous aider »,
   « Votre compte » et catégories de produits (Nexus impose du blanc et du gris)
   ══════════════════════════════════════════════════════════════════ */
html body .action-icon-btns a,
html body #main-body .action-icon-btns a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    height: calc(100% - 1rem);
    margin: 0 0 1rem;
    padding: 1.4rem .75rem 1.2rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
    color: var(--vx-ink);
    font-weight: 600;
    font-size: .9375rem;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
html body .action-icon-btns a .ico-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto .35rem;
    border-radius: .9rem;
    background: var(--vx-accent-soft);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform .2s;
}
html body .action-icon-btns a .ico-container i { color: var(--vx-accent-ink); }
html body .action-icon-btns a:hover,
html body #main-body .action-icon-btns a:hover {
    transform: translateY(-3px);
    border-color: var(--vx-accent);
    box-shadow: var(--vx-shadow-lg);
    color: var(--vx-ink);
}
html body .action-icon-btns a:hover .ico-container { font-size: 1.5rem; transform: scale(1.06); }
html body .action-icon-btns .col-6,
html body .action-icon-btns [class*="col-"] { margin-bottom: 0; }

/* Catégories de produits (« Parcourir les produits ») */
html body .card-columns.home .card { text-align: center; }
html body .card-columns.home .card .card-title { color: var(--vx-ink); font-weight: 800; }
html body .card-columns.home .card p { color: var(--vx-ink-2); }
html body #main-body .btn-outline-primary {
    border: 1px solid var(--vx-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--vx-ink);
}
html body #main-body .btn-outline-primary:hover,
html body #main-body .btn-outline-primary:focus {
    border-color: transparent;
    background: var(--vx-gradient);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   21. Ticket de support (viewticket.tpl) : présentation « conversation »
   ══════════════════════════════════════════════════════════════════ */
html body .vx-ticket.view-ticket { border: 0; background: transparent; box-shadow: none; }

.vx-ticket-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
.vx-ticket-head::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--vx-gradient);
}
.vx-ticket-head-main { min-width: 0; flex: 1 1 22rem; }
.vx-ticket-id {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .5rem;
    color: var(--vx-ink-3);
    font-family: var(--vx-mono);
    font-size: .8rem;
}
.vx-ticket-subject {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    word-break: break-word;
}
.vx-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.1rem;
    margin: .85rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--vx-ink-3);
    font-size: .85rem;
}
.vx-ticket-meta li { display: inline-flex; align-items: center; gap: .4rem; }
.vx-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}
.vx-pill::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.vx-pill-accent { background: var(--vx-accent-soft); color: var(--vx-accent-ink); }
.vx-pill-muted { background: var(--vx-surface-2); color: var(--vx-ink-3); }
.vx-ticket-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.vx-ticket-actions .btn { display: inline-flex; align-items: center; gap: .4rem; }
html body .vx-btn-close:hover { border-color: var(--vx-ok); color: var(--vx-ok); }

/* Fil : équipe à gauche, client à droite */
.vx-thread { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.vx-msg { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1.1rem; }
.vx-msg-client { flex-direction: row-reverse; }
.vx-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--vx-surface-2);
    color: var(--vx-ink);
    font-weight: 800;
    font-size: 1rem;
    box-shadow: var(--vx-shadow);
}
.vx-msg-staff .vx-avatar { background: var(--vx-gradient); color: #fff; }
.vx-avatar-sm { width: 1.75rem; height: 1.75rem; font-size: .8rem; box-shadow: none; }

html body .vx-bubble.ticket-reply {
    min-width: 0;
    max-width: min(46rem, 88%);
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--vx-line);
    border-radius: 1.1rem;
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
html body .vx-msg-client .vx-bubble.ticket-reply { border-top-right-radius: .35rem; }
html body .vx-msg-staff .vx-bubble.ticket-reply {
    border-top-left-radius: .35rem;
    border-color: rgba(29, 92, 240, .3);
    background: linear-gradient(180deg, var(--vx-accent-soft), var(--vx-surface) 70%);
}
html body .vx-bubble .vx-bubble-head.posted-by {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    padding: .8rem 1.1rem .2rem;
    border: 0;
    background: transparent;
    font-size: .8rem;
}
.vx-bubble-name { color: var(--vx-ink); font-weight: 700; font-size: .9rem; }
.vx-bubble-date { margin-left: auto; color: var(--vx-ink-3); }
html body .vx-bubble .requestor-badge {
    float: none !important;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--vx-surface-2);
    color: var(--vx-ink-2);
    font-size: .7rem;
    font-weight: 700;
}
html body .vx-msg-staff .requestor-badge { background: var(--vx-accent); color: #fff; }
html body .vx-bubble .vx-bubble-body.message {
    padding: .55rem 1.1rem 1rem;
    color: var(--vx-ink);
    font-size: .95rem;
    line-height: 1.65;
    word-break: break-word;
}
.vx-bubble-body p:last-child { margin-bottom: 0; }
.vx-bubble-ip { margin: .75rem 0 0; color: var(--vx-ink-3); font-size: .78rem; }

html body .vx-bubble .vx-attachments.attachments {
    padding: .7rem 1.1rem .9rem;
    border-top: 1px dashed var(--vx-line-strong);
}
.vx-attachments-title { margin: 0 0 .5rem; color: var(--vx-ink-3); font-size: .78rem; font-weight: 700; }
html body .vx-attachment-list.attachment-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
html body .vx-attachment-list.attachment-list li { margin: 0; padding: 0; border: 0; width: auto; }
.vx-attachment {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border: 1px solid var(--vx-line);
    border-radius: 999px;
    background: var(--vx-surface);
    color: var(--vx-ink-2);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none !important;
}
a.vx-attachment:hover { border-color: var(--vx-accent); color: var(--vx-accent-ink); }
.vx-attachment.is-removed { opacity: .6; }

html body .vx-bubble .vx-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem 1.1rem .8rem;
    border-top: 1px solid var(--vx-line);
}
.vx-rating-label { color: var(--vx-ink-3); font-size: .8rem; font-weight: 600; }
html body .vx-bubble .rating,
html body .vx-bubble .rating-done { float: none; margin: 0; }
html body .vx-bubble .rating span.star:before,
html body .vx-bubble .rating-done span.star:before { color: var(--vx-line-strong); }
html body .vx-bubble .rating span.star:hover:before,
html body .vx-bubble .rating span.star:hover ~ span.star:before,
html body .vx-bubble .rating-done span.star.active:before { color: #f5a524; }
html body .vx-bubble .rating-done .rated { color: var(--vx-ink-3); font-size: .75rem; }

/* Zone de réponse */
html body .vx-composer { border-radius: var(--vx-radius-lg); }
.vx-composer-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: 1.15rem;
}
.vx-composer-as {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .85rem;
    color: var(--vx-ink-3);
    font-size: .85rem;
}
.vx-composer-hint { margin: .35rem 0 0; color: var(--vx-ink-3); font-size: .78rem; }
.vx-composer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.vx-composer-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }

@media (max-width: 575.98px) {
    .vx-ticket-head { padding: 1.25rem; }
    .vx-ticket-subject { font-size: 1.3rem; }
    .vx-avatar { width: 2rem; height: 2rem; font-size: .85rem; }
    html body .vx-bubble.ticket-reply { max-width: calc(100% - 2.85rem); }
    .vx-bubble-date { margin-left: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   22. Accueil de l'espace client (homepage.tpl) : bandeau et catégories
   ══════════════════════════════════════════════════════════════════ */
.vx-portal-hero {
    position: relative;
    overflow: hidden;
    margin: .5rem 0 2.5rem;
    padding: 2.5rem 2rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background:
        radial-gradient(32rem 16rem at 100% 0%, rgba(8, 145, 178, .16), transparent 70%),
        radial-gradient(32rem 16rem at 0% 100%, rgba(29, 92, 240, .14), transparent 70%),
        var(--vx-surface);
    box-shadow: var(--vx-shadow);
    text-align: center;
}
.vx-portal-hero h1 { margin: .9rem 0 .6rem; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -0.03em; }
.vx-portal-hero > p:not(.vx-eyebrow) { max-width: 40rem; margin: 0 auto; color: var(--vx-ink-2); font-size: 1.05rem; }
.vx-portal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.5rem; }
.vx-portal-actions .btn { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.3rem; }

html body .vx-portal-title { overflow-wrap: anywhere;
    margin: 2.75rem 0 1.25rem;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    text-align: left;
}

.vx-groups {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.vx-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    overflow: hidden;
    padding: 1.4rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
    color: var(--vx-ink);
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.vx-group::after {
    content: "";
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: var(--vx-tone-soft, var(--vx-accent-soft));
    opacity: .7;
    filter: blur(20px);
}
.vx-group:hover {
    transform: translateY(-3px);
    border-color: var(--vx-tone, var(--vx-accent));
    box-shadow: var(--vx-shadow-lg);
    color: var(--vx-ink);
}
.vx-group-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: .6rem;
    border-radius: .85rem;
    background: var(--vx-tone-soft, var(--vx-accent-soft));
    color: var(--vx-tone, var(--vx-accent-ink));
    font-size: 1.15rem;
}
.vx-group-name { position: relative; z-index: 1; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.vx-group-tagline { position: relative; z-index: 1; color: var(--vx-ink-2); font-size: .875rem; }
.vx-group-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: .9rem;
    color: var(--vx-tone, var(--vx-accent-ink));
    font-size: .875rem;
    font-weight: 700;
}
.vx-group-link i { transition: transform .2s; }
.vx-group:hover .vx-group-link i { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════════
   23. Boutique : liste des offres (orderforms/vexcloud_cart/products.tpl)
   ══════════════════════════════════════════════════════════════════ */
.vx-store-head { margin: 0 0 1.5rem; }
.vx-store-head h1 { margin: .8rem 0 .35rem; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem); letter-spacing: -0.03em; }
.vx-store-tagline { margin: 0; color: var(--vx-ink-2); font-size: 1rem; }

html body #order-standard_cart .vx-products {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
html body #order-standard_cart .cart-body .products .product.vx-product {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
html body #order-standard_cart .cart-body .products .product.vx-product::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--vx-gradient);
    opacity: 0;
    transition: opacity .2s;
}
html body #order-standard_cart .cart-body .products .product.vx-product:hover::before { opacity: 1; }
html body #order-standard_cart .cart-body .products .product .vx-product-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
html body #order-standard_cart .vx-product-head h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
html body #order-standard_cart .vx-product-stock {
    float: none;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--vx-ok-soft);
    color: var(--vx-ok);
    font-size: .72rem;
    font-style: normal;
    font-weight: 700;
}
html body #order-standard_cart .products .product .vx-product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .45rem;
    margin: 1rem 0 1.1rem;
    padding: 0 0 1.1rem;
    border-bottom: 1px dashed var(--vx-line-strong);
    color: var(--vx-ink-3);
    text-align: left;
}
.vx-price-label { width: 100%; color: var(--vx-ink-3); font-size: .78rem; font-weight: 600; }
html body #order-standard_cart .products .product .vx-product-price span.price {
    display: inline;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--vx-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vx-price-cycle { color: var(--vx-ink-3); font-size: .85rem; font-weight: 600; }
.vx-price-setup { width: 100%; color: var(--vx-ink-3); }

html body #order-standard_cart .products .product .vx-product-desc {
    flex: 1;
    margin: 0;
    padding: 0;
    color: var(--vx-ink-2);
    font-size: .9rem;
}
.vx-checklist { margin: 0; padding: 0; list-style: none; }
.vx-checklist li {
    position: relative;
    margin: 0 0 .45rem;
    padding-left: 1.6rem;
    line-height: 1.45;
}
.vx-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--vx-ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305825a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / .65rem;
}
.vx-checklist li:empty { display: none; }
.vx-checklist strong { color: var(--vx-ink); }

html body #order-standard_cart .products .product .vx-product-foot {
    margin: 1.25rem 0 0;
    padding: 0;
    border: 0;
}
html body #order-standard_cart .products .product .vx-product-foot .btn-order-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .7rem 1rem;
    font-size: .95rem;
}
html body #order-standard_cart .products .product .vx-product-foot .btn-order-now i { transition: transform .2s; }
html body #order-standard_cart .products .product.vx-product:hover .btn-order-now i { transform: translateX(3px); }

html body .action-icon-btns a { overflow-wrap: anywhere; }

/* 24. Panier Nexus Cart (cart.php?a=view) ──────────────────────── */
/* viewcart.tpl de Nexus Cart impose un fond blanc en !important sur #main-body */
html body section#main-body:has(#nexus-root) {
    padding: 1.25rem 0 4rem !important;
    background: none !important;
}

/* 25. Configuration d'un produit (vexcloud_cart/configureproduct.tpl) */
html body #order-standard_cart.vx-configure .secondary-cart-body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
html body #order-standard_cart.vx-configure .secondary-cart-body > .alert { margin: 0; }

html body #order-standard_cart .product-info.vx-config-product,
html body #order-standard_cart .vx-config-section {
    margin: 0;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
    color: var(--vx-ink-2);
}
html body #order-standard_cart .vx-config-product { position: relative; overflow: hidden; }
html body #order-standard_cart .vx-config-product::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--vx-gradient);
}
html body #order-standard_cart .vx-config-product .vx-config-product-name {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0 0 1rem;
    color: var(--vx-ink);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.vx-config-product-name span {
    color: var(--vx-accent-ink);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
html body #order-standard_cart .vx-checklist-cols {
    display: grid;
    gap: .1rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    font-size: .92rem;
}

/* Titres de section numérotés automatiquement : seules les sections affichées comptent */
html body #order-standard_cart.vx-configure .secondary-cart-body { counter-reset: vx-step; }
html body #order-standard_cart .vx-config-step {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1.1rem;
    color: var(--vx-ink);
    font-size: 1.05rem;
    font-weight: 700;
    counter-increment: vx-step;
}
html body #order-standard_cart .vx-config-step::before {
    content: counter(vx-step);
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--vx-gradient);
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
}
html body #order-standard_cart .vx-config-section .vx-config-step label { margin: 0; color: inherit; font: inherit; }
.vx-config-hint { margin: -.5rem 0 1rem; color: var(--vx-ink-3); font-size: .88rem; }

html body #order-standard_cart .vx-config-section .field-container { margin: 0; padding: 0; }
html body #order-standard_cart .vx-config-section .form-group:last-child { margin-bottom: 0; }
html body #order-standard_cart .vx-config-grid {
    display: grid;
    gap: 1rem 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
}
html body #order-standard_cart .vx-config-grid .form-group { margin: 0; }
html body #order-standard_cart .vx-config-grid .vx-config-wide { grid-column: 1 / -1; }
html body #order-standard_cart .vx-config-section label {
    margin-bottom: .4rem;
    color: var(--vx-ink-2);
    font-size: .85rem;
    font-weight: 600;
}
html body #order-standard_cart .vx-config-section .form-control,
html body #order-standard_cart .vx-config-section .custom-select {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 2.9rem;
    padding: .65rem .9rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: .75rem;
    background-color: var(--vx-bg);
    color: var(--vx-ink);
    font-size: .95rem;
}
html body #order-standard_cart .vx-config-section .custom-select { padding-right: 2.25rem; }
html body #order-standard_cart .vx-config-section .form-control:focus,
html body #order-standard_cart .vx-config-section .custom-select:focus {
    border-color: var(--vx-accent);
    box-shadow: 0 0 0 3px var(--vx-accent-soft);
    outline: 0;
}
html body #order-standard_cart .vx-config-section .form-control::placeholder { color: var(--vx-ink-3); opacity: .8; }

html body #order-standard_cart .vx-config-grid .form-group > label:first-child { display: block; }
.vx-config-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
html body #order-standard_cart .vx-config-section .vx-config-choice {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .55rem .85rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: .75rem;
    background: var(--vx-bg);
    color: var(--vx-ink);
    font-weight: 600;
    cursor: pointer;
}
html body #order-standard_cart .vx-config-section .vx-config-choice:has(input:checked) {
    border-color: var(--vx-accent);
    background: var(--vx-accent-soft);
}
.vx-config-qty { display: flex; align-items: center; gap: .6rem; }
html body #order-standard_cart .vx-config-qty .form-control { width: 7rem; }
.vx-config-metrics { margin: 0; padding-left: 1.1rem; }

html body #order-standard_cart .vx-config-section .panel-addon {
    border: 1px solid var(--vx-line-strong);
    border-radius: var(--vx-radius);
    background: var(--vx-bg);
    color: var(--vx-ink-2);
}
html body #order-standard_cart .vx-config-section .panel-addon-selected { border-color: var(--vx-accent); }
html body #order-standard_cart .vx-config-section .panel-addon .panel-price { color: var(--vx-ink); }
html body #order-standard_cart .vx-config-section .panel-addon .panel-add {
    border-radius: 0 0 var(--vx-radius) var(--vx-radius);
    background: var(--vx-gradient);
    color: #fff;
}

.vx-config-help {
    margin: 0;
    color: var(--vx-ink-3);
    font-size: .88rem;
}
.vx-config-help i { margin-right: .35rem; color: var(--vx-accent-ink); }
.vx-config-help a { color: var(--vx-accent-ink); font-weight: 600; }

/* Résumé de commande */
html body #order-standard_cart.vx-configure .order-summary { overflow: hidden; border: 1px solid var(--vx-line); }
html body #order-standard_cart.vx-configure .order-summary h2 {
    padding: 1rem 1.4rem;
    border-radius: 0;
    background: transparent;
    color: var(--vx-ink);
    font-size: 1.05rem;
    text-align: left;
    border-bottom: 1px solid var(--vx-line);
}
html body #order-standard_cart.vx-configure .order-summary::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--vx-gradient);
}
html body #order-standard_cart.vx-configure .order-summary .summary-container {
    padding: 1.1rem 1.4rem 1.3rem;
    border: 0;
    border-radius: 0;
    color: var(--vx-ink-2);
    font-size: .88rem;
}
html body #order-standard_cart.vx-configure .summary-container .product-name {
    display: block;
    color: var(--vx-ink);
    font-size: 1.05rem;
    font-weight: 800;
}
html body #order-standard_cart.vx-configure .summary-container .product-group {
    display: block;
    margin-bottom: .8rem;
    color: var(--vx-ink-3);
    font-size: .8rem;
    font-style: normal;
}
html body #order-standard_cart.vx-configure .summary-container .clearfix { padding: .2rem 0; }
html body #order-standard_cart.vx-configure .summary-container .float-right { color: var(--vx-ink); font-weight: 600; }
html body #order-standard_cart.vx-configure .summary-container .summary-totals {
    margin: .8rem 0;
    padding: .7rem 0;
    border-top: 1px dashed var(--vx-line-strong);
    border-bottom: 1px dashed var(--vx-line-strong);
}
html body #order-standard_cart.vx-configure .summary-container .total-due-today {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    color: var(--vx-ink-3);
    font-size: .8rem;
}
html body #order-standard_cart.vx-configure .summary-container .total-due-today .amt {
    font-size: 1.9rem;
    line-height: 1.1;
    background: var(--vx-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html body #order-standard_cart.vx-configure .order-summary .loader {
    background: color-mix(in srgb, var(--vx-surface) 75%, transparent);
    color: var(--vx-accent-ink);
}
html body #order-standard_cart.vx-configure #btnCompleteProductConfig {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: 1rem;
    padding: .85rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--vx-gradient);
    box-shadow: 0 10px 24px -12px rgba(29, 92, 240, .7);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
html body #order-standard_cart.vx-configure #btnCompleteProductConfig:hover { background: var(--vx-gradient-hover); }
html body #order-standard_cart.vx-configure #btnCompleteProductConfig i { transition: transform .2s; }
html body #order-standard_cart.vx-configure #btnCompleteProductConfig:hover i { transform: translateX(3px); }

/* 26. Checkout (vexcloud_cart/checkout.tpl) ────────────────────── */
/* Pas de liste des catégories pendant la commande : le formulaire prend toute la largeur */
html body #order-standard_cart.vx-checkout .cart-sidebar,
html body #order-standard_cart.vx-checkout .sidebar-collapsed { display: none; }
html body #order-standard_cart.vx-checkout .cart-body { flex: 0 0 100%; float: none; width: 100%; max-width: 100%; padding: 0 15px; }

.vx-co-head { margin-bottom: 1.25rem; }
.vx-co-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    color: var(--vx-ink-3);
    font-size: .85rem;
    font-weight: 600;
}
.vx-co-steps li { display: inline-flex; align-items: center; gap: .45rem; }
.vx-co-steps li + li::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    margin-right: .1rem;
    background: var(--vx-line-strong);
}
.vx-co-steps a { display: inline-flex; align-items: center; gap: .45rem; color: inherit; }
.vx-co-steps a:hover { color: var(--vx-accent-ink); text-decoration: none; }
.vx-co-steps span {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: 50%;
    background: var(--vx-surface);
    font-size: .75rem;
    font-weight: 800;
}
.vx-co-steps .is-done span { border-color: transparent; background: var(--vx-ok-soft); color: var(--vx-ok); }
.vx-co-steps .is-current { color: var(--vx-ink); }
.vx-co-steps .is-current span { border-color: transparent; background: var(--vx-gradient); color: #fff; }

/* « Déjà client ? » et message d'introduction */
html body #order-standard_cart.vx-checkout .already-registered {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
html body #order-standard_cart.vx-checkout .already-registered::after { display: none; }
html body #order-standard_cart.vx-checkout .already-registered .float-right { float: none !important; }
html body #order-standard_cart.vx-checkout .already-registered p { margin: 0; color: var(--vx-ink-2); }
html body #order-standard_cart.vx-checkout .already-registered .btn {
    border: 1px solid var(--vx-line-strong);
    border-radius: 999px;
    background: var(--vx-bg);
    color: var(--vx-ink);
    font-weight: 700;
}
html body #order-standard_cart.vx-checkout .already-registered .btn:hover { border-color: var(--vx-accent); color: var(--vx-accent-ink); }

/* Deux colonnes */
.vx-co-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
}
.vx-co-main {
    min-width: 0;
    padding: .25rem 1.5rem 1.5rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
    counter-reset: vx-co;
}
.vx-co-side { position: sticky; top: 6rem; min-width: 0; }
@media (max-width: 991.98px) {
    .vx-co-layout { grid-template-columns: minmax(0, 1fr); }
    .vx-co-side { position: static; }
}
@media (max-width: 575.98px) {
    .vx-co-main { padding: .25rem 1rem 1rem; }
}

/* Titres de section : numérotés, alignés à gauche (les sections masquées ne comptent pas) */
html body #order-standard_cart.vx-checkout .vx-co-main .sub-heading {
    display: flex;
    align-items: center;
    height: auto;
    margin: 1.6rem 0 1rem;
    border: 0;
    text-align: left;
    counter-increment: vx-co;
}
html body #order-standard_cart.vx-checkout .vx-co-main .sub-heading span {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    position: static;
    top: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--vx-ink);
    font-size: 1.05rem;
    font-weight: 700;
}
html body #order-standard_cart.vx-checkout .vx-co-main .sub-heading span::before {
    content: counter(vx-co);
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--vx-gradient);
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
}
html body #order-standard_cart.vx-checkout .vx-co-main .sub-heading small { color: var(--vx-ink-3); font-weight: 500; }

/* Champs avec icône */
html body #order-standard_cart.vx-checkout .form-group { margin-bottom: 1rem; }
html body #order-standard_cart.vx-checkout .field,
html body #order-standard_cart.vx-checkout .form-control,
html body #order-standard_cart.vx-checkout .custom-select {
    height: auto;
    min-height: 2.9rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: .75rem;
    background-color: var(--vx-bg);
    color: var(--vx-ink);
    font-size: .95rem;
}
html body #order-standard_cart.vx-checkout textarea.field { min-height: 6rem; }
html body #order-standard_cart.vx-checkout .field:focus,
html body #order-standard_cart.vx-checkout .form-control:focus {
    border-color: var(--vx-accent);
    box-shadow: 0 0 0 3px var(--vx-accent-soft);
}
html body #order-standard_cart.vx-checkout .prepend-icon .field { padding-left: 2.6rem; }
html body #order-standard_cart.vx-checkout .prepend-icon .field-icon {
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.9rem;
    padding: 0;
    color: var(--vx-ink-3);
    line-height: 1;
}
html body #order-standard_cart.vx-checkout .prepend-icon .field-icon i { position: static; }
html body #order-standard_cart.vx-checkout .vx-co-main > div > .text-center .btn,
html body #order-standard_cart.vx-checkout #btnExistingLogin {
    padding: .6rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--vx-gradient);
    color: #fff;
    font-weight: 700;
}

/* Carte de paiement */
.vx-co-pay {
    position: relative;
    overflow: hidden;
    padding: 1.4rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow-lg);
}
.vx-co-pay::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--vx-gradient);
}
html body #order-standard_cart.vx-checkout .vx-co-pay-title {
    height: auto;
    margin: 0 0 1rem;
    border: 0;
    text-align: left;
}
html body #order-standard_cart.vx-checkout .vx-co-pay-title span {
    position: static;
    padding: 0;
    background: transparent;
    color: var(--vx-ink);
    font-size: 1.05rem;
    font-weight: 700;
}
html body #order-standard_cart.vx-checkout #totalDueToday.vx-co-total {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-bg);
    color: var(--vx-ink-3);
    font-size: .8rem;
    text-align: left;
}
.vx-co-total-label { font-weight: 600; }
html body #order-standard_cart.vx-checkout #totalCartPrice {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    background: var(--vx-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html body #order-standard_cart.vx-checkout #paymentGatewaysContainer { margin-bottom: 1rem; }
html body #order-standard_cart.vx-checkout #paymentGatewaysContainer > p {
    margin-bottom: .5rem;
    color: var(--vx-ink-2);
    font-size: .85rem;
    font-weight: 600;
}
html body #order-standard_cart.vx-checkout .vx-co-gateways {
    display: grid;
    gap: .5rem;
    text-align: left;
}
html body #order-standard_cart.vx-checkout .vx-co-gateways .radio-inline {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .75rem .9rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: .85rem;
    background: var(--vx-bg);
    color: var(--vx-ink);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
html body #order-standard_cart.vx-checkout .vx-co-gateways .radio-inline:hover { border-color: var(--vx-accent); }
html body #order-standard_cart.vx-checkout .vx-co-gateways .radio-inline:has(input:checked),
html body #order-standard_cart.vx-checkout .vx-co-gateways .radio-inline:has(.checked) {
    border-color: var(--vx-accent);
    background: var(--vx-accent-soft);
}
html body #order-standard_cart.vx-checkout .apply-credit-container {
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border-radius: var(--vx-radius);
    font-size: .88rem;
}
html body #order-standard_cart.vx-checkout .cc-input-container { margin: 0 0 1rem; padding: 1rem; border-radius: var(--vx-radius); }
/* Champs carte (Stripe et carte classique) : une colonne, sans les décalages Bootstrap prévus pour une page large */
html body #order-standard_cart.vx-checkout .cc-input-container .row { margin-right: 0; margin-left: 0; }
html body #order-standard_cart.vx-checkout .cc-input-container [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0 !important;
    padding-right: 0;
    padding-left: 0;
}
html body #order-standard_cart.vx-checkout .cc-input-container ul { margin: 0 0 1rem; padding: 0; list-style: none; }
html body #order-standard_cart.vx-checkout .cc-input-container .radio-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--vx-ink-2);
    font-size: .88rem;
    font-weight: 600;
}
html body #order-standard_cart.vx-checkout .cc-input-container .radio-inline > div { flex: none; }
html body #order-standard_cart.vx-checkout #stripeElements { margin-bottom: .5rem; }
html body #order-standard_cart.vx-checkout #stripeElements label { margin: .6rem 0 .35rem; font-size: .82rem; }
html body #order-standard_cart.vx-checkout #stripeElements .StripeElement.form-control {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 2.9rem;
    padding: .75rem .9rem;
}
html body #order-standard_cart.vx-checkout #stripeElements #paymentRequestButton { margin-bottom: .25rem; padding: 0; }
html body #order-standard_cart.vx-checkout #newCardSaveSettings .form-group { margin-bottom: 0; }
html body #order-standard_cart.vx-checkout #inputNoStoreContainer { margin-top: .75rem; line-height: 1.4 !important; font-size: .85rem; }

html body #order-standard_cart.vx-checkout .vx-co-submit { text-align: left; }
html body #order-standard_cart.vx-checkout .vx-co-tos {
    display: block;
    margin: 0 0 1rem;
    color: var(--vx-ink-2);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.45;
}
html body #order-standard_cart.vx-checkout .vx-co-tos a { color: var(--vx-accent-ink); font-weight: 700; }
html body #order-standard_cart.vx-checkout #btnCompleteOrder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .9rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--vx-gradient);
    box-shadow: 0 10px 24px -12px rgba(29, 92, 240, .7);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
html body #order-standard_cart.vx-checkout #btnCompleteOrder:hover { background: var(--vx-gradient-hover); }
html body #order-standard_cart.vx-checkout #btnCompleteOrder:disabled { opacity: .55; }
html body #order-standard_cart.vx-checkout #btnCompleteOrder i { transition: transform .2s; }
html body #order-standard_cart.vx-checkout #btnCompleteOrder:hover i { transform: translateX(3px); }
.vx-co-secure {
    margin: .9rem .25rem 0;
    color: var(--vx-ink-3);
    font-size: .78rem;
    line-height: 1.5;
}
html body #order-standard_cart.vx-checkout .vx-co-tos input { margin: 0 .35rem 0 0; vertical-align: -2px; }
html body #order-standard_cart.vx-checkout .vx-co-secure i {
    float: none;
    margin: 0 .3rem 0 0;
    font-size: .85rem;
    color: var(--vx-ok);
}
html body #order-standard_cart.vx-checkout .marketing-email-optin {
    margin: 1.25rem 0 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-bg);
    color: var(--vx-ink-2);
}

/* 27. Connexion, inscription, mot de passe oublié ──────────────── */
.vx-auth {
    padding: 0 !important;
    display: grid;
    grid-template-columns: minmax(0, 23rem) minmax(0, 30rem);
    justify-content: center;
    gap: 0;
    margin: 1.5rem auto 1rem;
    overflow: hidden;
    border: 1px solid var(--vx-line);
    border-radius: 1.5rem;
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow-lg);
    max-width: 53rem;
}
/* Pages de compte : pas de barre latérale WHMCS, le contenu prend toute la largeur */
html body #main-body .row:has(> .primary-content .vx-auth) > :not(.primary-content) { display: none; }
html body #main-body .row > .primary-content:has(.vx-auth) { flex: 0 0 100%; max-width: 100%; }

.vx-auth.vx-auth-wide {
    grid-template-columns: 21rem minmax(0, 1fr);
    max-width: 68rem;
    overflow: visible;
    align-items: stretch;
}

/* Panneau de marque */
.vx-auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2.25rem 2rem;
    overflow: hidden;
    background: var(--vx-gradient-deep);
    color: #fff;
}
.vx-auth-aside::after {
    content: "";
    position: absolute;
    right: -7rem;
    bottom: -7rem;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(103, 232, 249, .35), transparent 68%);
    pointer-events: none;
}
.vx-auth-wide .vx-auth-aside { border-radius: 1.5rem 0 0 1.5rem; }
.vx-auth-aside-inner { display: flex; flex: 1; flex-direction: column; gap: 1.25rem; }
.vx-auth-wide .vx-auth-aside-inner { position: sticky; top: 7rem; flex: none; }
.vx-auth-wide .vx-auth-aside .vx-auth-aside-title { margin-top: 1.5rem; }

/* Trame et halos du panneau */
.vx-auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 65%);
    mask-image: linear-gradient(160deg, #000 0%, transparent 65%);
    pointer-events: none;
}
.vx-auth-aside > * { position: relative; z-index: 1; }
.vx-auth-points li {
    padding: .6rem .7rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .85rem;
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
html body .vx-auth-aside .vx-auth-brand { display: inline-flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; }
html body .vx-auth-aside .vx-auth-brand img { filter: brightness(0) invert(1); }
html body .vx-auth-aside .vx-brand-name { color: #fff; font-size: 1.15rem; font-weight: 800; }
.vx-auth-aside-title {
    margin: auto 0 0;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.vx-auth-points { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.vx-auth-points li { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.4; color: rgba(255, 255, 255, .92); }
.vx-auth-points i {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .55rem;
    background: rgba(255, 255, 255, .16);
    font-size: .8rem;
}
.vx-auth-aside-foot { margin: 0; color: rgba(255, 255, 255, .7); font-size: .78rem; }

/* Carte du formulaire */
.vx-auth-card { min-width: 0; margin: 0; padding: 2.25rem 2.25rem 1.75rem; }
.vx-auth-head { margin-bottom: 1.5rem; }
html body .vx-auth-head h1 {
    margin: 0 0 .35rem;
    color: var(--vx-ink);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.vx-auth-head p { margin: 0; color: var(--vx-ink-3); }
.vx-auth-head p a { color: var(--vx-accent-ink); font-weight: 700; }
.vx-auth-icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: .9rem;
    background: var(--vx-accent-soft);
    color: var(--vx-accent-ink);
    font-size: 1.1rem;
}
.vx-auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
html body .vx-auth .form-group > label,
html body .vx-auth .vx-auth-label-row label { margin-bottom: .4rem; color: var(--vx-ink-2); font-size: .85rem; font-weight: 600; }
.vx-auth-link-sm { margin-bottom: .4rem; color: var(--vx-accent-ink); font-size: .82rem; font-weight: 600; }

/* Champs : icône et bouton intégrés dans un seul cadre */
html body .vx-auth .input-group-merge {
    flex-wrap: nowrap;
    border: 1px solid var(--vx-line-strong);
    border-radius: .85rem;
    background: var(--vx-bg);
    transition: border-color .15s, box-shadow .15s;
}
html body .vx-auth .input-group-merge:focus-within { border-color: var(--vx-accent); box-shadow: 0 0 0 3px var(--vx-accent-soft); }
html body .vx-auth .input-group-merge .input-group-text,
html body .vx-auth .input-group-merge .form-control,
html body .vx-auth .input-group-merge .btn {
    min-height: 2.9rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--vx-ink);
}
html body .vx-auth .input-group-merge .input-group-text { padding: 0 .35rem 0 .95rem; color: var(--vx-ink-3); }
html body .vx-auth .input-group-merge .btn { padding: 0 .95rem; color: var(--vx-ink-3); }
html body .vx-auth .input-group-merge .btn:hover { color: var(--vx-accent-ink); }
html body .vx-auth .vx-auth-card > form > .form-group > .form-control,
html body .vx-auth .vx-auth-card .form-group > .form-control {
    min-height: 2.9rem;
    border-radius: .85rem;
    background: var(--vx-bg);
}

.vx-auth-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding-left: 0;
    color: var(--vx-ink-2);
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
}
html body .vx-auth .vx-auth-check .form-check-input { position: static; margin: 0; }

html body .vx-auth .vx-auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin: 0;
    padding: .85rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--vx-gradient);
    box-shadow: 0 10px 24px -12px rgba(29, 92, 240, .7);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
html body .vx-auth .vx-auth-submit:hover { background: var(--vx-gradient-hover); color: #fff; }
html body .vx-auth .vx-auth-submit i { transition: transform .2s; }
html body .vx-auth .vx-auth-submit:hover i { transform: translateX(3px); }
html body .vx-auth .vx-auth-secondary {
    width: 100%;
    margin-top: .6rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--vx-ink-2);
    font-weight: 600;
}
.vx-auth-alt {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--vx-line);
    color: var(--vx-ink-3);
    font-size: .9rem;
    text-align: center;
}
.vx-auth-alt a { color: var(--vx-accent-ink); font-weight: 700; }

.vx-auth-done { text-align: center; }
.vx-auth-done-icon {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--vx-ok-soft);
    color: var(--vx-ok);
    font-size: 1.4rem;
}
html body .vx-auth-done h1 { color: var(--vx-ink); font-size: 1.5rem; font-weight: 800; }
.vx-auth-done p { margin-bottom: 1.5rem; color: var(--vx-ink-2); }

/* Inscription : formulaire dans la carte, sections numérotées séparées par un filet */
.vx-auth-main { min-width: 0; padding: 2.25rem 2.5rem 2rem; }
.vx-auth-head-page { margin-bottom: 1rem; }
html body .vx-auth-head-page h1 { font-size: 2rem; }
.vx-reg { counter-reset: vx-reg; }
html body #registration .vx-reg .vx-reg-card {
    margin: 0 !important;
    border: 0;
    border-top: 1px solid var(--vx-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
html body #registration .vx-reg .vx-reg-card .card-body { padding: 1.5rem 0 .5rem !important; }
html body #registration .vx-reg .vx-reg-card .card-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1.1rem;
    color: var(--vx-ink);
    font-size: 1.05rem;
    font-weight: 700;
    counter-increment: vx-reg;
}
html body #registration .vx-reg .vx-reg-card .card-title::before {
    content: counter(vx-reg);
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--vx-gradient);
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
}
html body #registration .vx-reg .vx-reg-card .card-title small { color: var(--vx-ink-3); font-weight: 500; }
html body #registration .vx-reg .form-group { margin-bottom: 1rem; }
html body #registration .vx-reg .field,
html body #registration .vx-reg .form-control {
    height: auto;
    min-height: 2.9rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: .75rem;
    background-color: var(--vx-bg);
    color: var(--vx-ink);
    font-size: .95rem;
}
html body #registration .vx-reg .field:focus,
html body #registration .vx-reg .form-control:focus { border-color: var(--vx-accent); box-shadow: 0 0 0 3px var(--vx-accent-soft); }
html body #registration .vx-reg .prepend-icon { position: relative; }
html body #registration .vx-reg .prepend-icon .field { padding-left: 2.6rem; }
html body #registration .vx-reg .prepend-icon .field-icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.9rem;
    margin: 0;
    padding: 0;
    color: var(--vx-ink-3);
    line-height: 1;
}
html body #registration .vx-reg .prepend-icon .field-icon i { position: static; }
html body #registration .vx-reg .intl-tel-input,
html body #registration .vx-reg .iti { display: block; width: 100%; }
html body #registration .vx-reg .generate-password {
    border: 1px solid var(--vx-line-strong);
    border-radius: 999px;
    background: var(--vx-bg);
    color: var(--vx-ink-2);
    font-weight: 600;
}
html body #registration .vx-reg .password-strength-meter .progress { height: .5rem; border-radius: 999px; background: var(--vx-bg); }
.vx-reg-tos { margin: .5rem 0 1rem; color: var(--vx-ink-2); font-size: .9rem; }
.vx-reg-tos a { color: var(--vx-accent-ink); font-weight: 700; }
html body .vx-reg-submit { margin: 0; }
html body .vx-reg-submit .vx-auth-submit { max-width: none; }
.vx-reg-tos { padding-top: 1.25rem; border-top: 1px solid var(--vx-line); }
html body #registration .vx-reg .social-signin-btns { margin-bottom: 1.25rem; }
html body #registration .vx-reg .social-signin-btns .btn { border: 1px solid var(--vx-line-strong); border-radius: 999px; background: var(--vx-bg); color: var(--vx-ink); font-weight: 600; }

@media (max-width: 991.98px) {
    .vx-auth.vx-auth-wide { grid-template-columns: minmax(0, 1fr); }
    .vx-auth-wide .vx-auth-aside { display: none; }
    .vx-auth-main { padding: 1.75rem 1.5rem; }
}
@media (max-width: 767.98px) {
    .vx-auth { grid-template-columns: minmax(0, 1fr); margin-top: .5rem; }
    .vx-auth-aside { padding: 1.5rem; gap: .9rem; }
    .vx-auth-aside-title { margin-top: 0; font-size: 1.3rem; }
    .vx-auth-points, .vx-auth-aside-foot { display: none; }
    .vx-auth-card { padding: 1.5rem 1.25rem; }
    .vx-auth-main { padding: 1.5rem 1.25rem; }
    html body .vx-reg-submit .vx-auth-submit { max-width: none; }
}

/* 28. Barres de recherche (base de connaissances, téléchargements) ─ */
html body .input-group-lg.kb-search {
    flex-wrap: nowrap;
    padding: .35rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: 999px;
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
html body .input-group-lg.kb-search:focus-within { border-color: var(--vx-accent); box-shadow: 0 0 0 3px var(--vx-accent-soft); }
html body .input-group-lg.kb-search .form-control {
    min-height: 2.75rem;
    padding-left: 1.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    font-size: 1rem;
}
html body .input-group-lg.kb-search .btn {
    border: 0;
    border-radius: 999px !important;
    padding: 0 1.4rem;
    background: var(--vx-gradient);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
}

/* 29. Comptes liés (Google…) : petit intitulé non numéroté, en inscription comme au checkout */
html body #order-standard_cart.vx-checkout .vx-co-main .sub-heading:has(+ .providerPreLinking),
html body #registration .vx-reg .sub-heading:has(+ .providerPreLinking) {
    height: auto;
    margin: 1.25rem 0 .6rem;
    border: 0;
    text-align: left;
    counter-increment: none;
}
html body #order-standard_cart.vx-checkout .vx-co-main .sub-heading:has(+ .providerPreLinking) { border: 0; }
html body #order-standard_cart.vx-checkout .vx-co-main .sub-heading:has(+ .providerPreLinking) span,
html body #registration .vx-reg .sub-heading:has(+ .providerPreLinking) span {
    padding: 0 !important;
    background: transparent !important;
    color: var(--vx-ink-3) !important;
    font-size: .82rem;
    font-weight: 600;
}
html body #order-standard_cart.vx-checkout .vx-co-main .sub-heading:has(+ .providerPreLinking) span::before { content: none; }
html body .vx-auth .social-signin-btns { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; margin-top: 1rem; }
html body .vx-auth .login-form .social-signin-btns { justify-content: center; }

/* 30. Nous contacter (contact.tpl) ─────────────────────────────── */
.vx-contact { max-width: 68rem; margin: .5rem auto 0; }
.vx-contact-head { margin-bottom: 1.5rem; }
.vx-contact-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: start;
}
.vx-contact-channels { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.vx-channel {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
    color: var(--vx-ink);
    text-decoration: none !important;
    transition: border-color .15s, transform .15s;
}
.vx-channel:hover { border-color: var(--vx-accent); transform: translateY(-1px); color: var(--vx-ink); }
.vx-channel-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .9rem;
    font-size: 1.1rem;
}
.vx-channel-icon.is-blue { background: var(--vx-accent-soft); color: var(--vx-accent-ink); }
.vx-channel-icon.is-cyan { background: var(--vx-cyan-soft); color: var(--vx-cyan); }
.vx-channel-icon.is-violet { background: var(--vx-violet-soft); color: var(--vx-violet); }
.vx-channel-body { display: flex; flex: 1; flex-direction: column; gap: .15rem; min-width: 0; }
.vx-channel-body strong { font-size: .98rem; font-weight: 700; }
.vx-channel-body span { color: var(--vx-ink-3); font-size: .85rem; line-height: 1.4; overflow-wrap: anywhere; }
.vx-channel-go { color: var(--vx-ink-3); font-size: .8rem; transition: transform .2s, color .2s; }
.vx-channel:hover .vx-channel-go { color: var(--vx-accent-ink); transform: translateX(3px); }
.vx-contact-note {
    display: flex;
    gap: .6rem;
    padding: .25rem .4rem 0;
    color: var(--vx-ink-3);
    font-size: .82rem;
    line-height: 1.5;
}
.vx-contact-note i { margin-top: .2rem; color: var(--vx-accent-ink); }

.vx-contact-card {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.75rem 1.5rem;
    border: 1px solid var(--vx-line);
    border-radius: 1.5rem;
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow-lg);
}
.vx-contact-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--vx-gradient);
}
html body .vx-contact-card-title { margin: 0 0 1.25rem; color: var(--vx-ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
html body .vx-contact-card .vx-auth-done h2 { color: var(--vx-ink); font-size: 1.2rem; font-weight: 700; }
.vx-contact-fields { display: grid; gap: 0 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vx-contact-fields .vx-contact-wide { grid-column: 1 / -1; }
html body .vx-contact-card .form-group { margin-bottom: 1rem; }
html body .vx-contact-card label { margin-bottom: .4rem; color: var(--vx-ink-2); font-size: .85rem; font-weight: 600; }
html body .vx-contact-card .form-control {
    min-height: 2.9rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: .85rem;
    background: var(--vx-bg);
    color: var(--vx-ink);
}
html body .vx-contact-card textarea.form-control { min-height: 9rem; resize: vertical; }
html body .vx-contact-card .form-control:focus { border-color: var(--vx-accent); box-shadow: 0 0 0 3px var(--vx-accent-soft); }
html body .vx-contact-card .vx-auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .85rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--vx-gradient);
    box-shadow: 0 10px 24px -12px rgba(29, 92, 240, .7);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
html body .vx-contact-card .vx-auth-submit:hover { background: var(--vx-gradient-hover); }
@media (max-width: 991.98px) {
    .vx-contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .vx-contact-fields { grid-template-columns: minmax(0, 1fr); }
    .vx-contact-card { padding: 1.4rem 1.15rem; }
}

/* 31. Tableau de bord : tuiles et blocs ───────────────────────── */
.tiles .tile.vx-tile { position: relative; overflow: hidden; }
.tiles .tile.vx-tile::after {
    content: "";
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: var(--vx-tone-soft, var(--vx-accent-soft));
    opacity: .55;
    pointer-events: none;
}
.vx-tile-more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .75rem;
    color: var(--vx-tone, var(--vx-accent-ink));
    font-size: .78rem;
    font-weight: 700;
}
.tiles .tile.vx-tile .vx-tile-more i { font-size: .7rem; transition: transform .2s; }
.tiles .tile.vx-tile:hover .vx-tile-more i { transform: translateX(3px); }

/* Blocs : icône en pastille, titre, bouton à droite (plus de barre colorée à gauche) */
html body .client-home-cards .card[class*="card-accent-"] .card-header::before { display: none; }
html body .client-home-cards .card {
    overflow: hidden;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
html body .client-home-cards .card-header.vx-panel-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.1rem;
}
html body .client-home-cards .vx-panel-head .card-title {
    display: flex;
    flex: 1;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: var(--vx-ink);
}
html body .client-home-cards .vx-panel-head .badge { border-radius: 999px; background: var(--vx-accent-soft); color: var(--vx-accent-ink); }
.vx-panel-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    background: var(--vx-accent-soft);
    color: var(--vx-accent-ink);
    font-size: .95rem;
}
.vx-panel-green, .vx-panel-emerald { background: var(--vx-ok-soft); color: var(--vx-ok); }
.vx-panel-red, .vx-panel-pomegranate { background: var(--vx-danger-soft); color: var(--vx-danger); }
.vx-panel-gold, .vx-panel-orange, .vx-panel-sun-flower { background: var(--vx-warn-soft); color: var(--vx-warn); }
.vx-panel-amethyst { background: var(--vx-violet-soft); color: var(--vx-violet); }
.vx-panel-teal { background: var(--vx-cyan-soft); color: var(--vx-cyan); }
.vx-panel-asbestos, .vx-panel-midnight-blue { background: var(--vx-surface-2); color: var(--vx-ink-2); }
html body .client-home-cards .card-header .btn.vx-panel-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: none;
    padding: .35rem .8rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: 999px;
    background: var(--vx-bg) !important;
    box-shadow: none;
    color: var(--vx-ink-2);
    font-size: .78rem;
    font-weight: 700;
}
html body .client-home-cards .card-header .btn.vx-panel-btn:hover { border-color: var(--vx-accent); color: var(--vx-accent-ink); }
html body .client-home-cards .card-header .btn.vx-panel-btn i { font-size: .7rem; }
html body .client-home-cards .list-group a.list-group-item {
    position: relative;
    padding-right: 2.25rem;
    color: var(--vx-ink-2);
}
html body .client-home-cards .list-group a.list-group-item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.1rem;
    width: .45rem;
    height: .45rem;
    border-top: 2px solid var(--vx-ink-3);
    border-right: 2px solid var(--vx-ink-3);
    transform: translateY(-50%) rotate(45deg);
    opacity: .6;
}
html body .client-home-cards .list-group a.list-group-item:hover { background: var(--vx-surface-2); }
html body .client-home-cards .list-group a.list-group-item:hover::after { border-color: var(--vx-accent-ink); opacity: 1; }
html body .client-home-cards .card-footer:empty { display: none; }

/* 32. Listes (services, factures) ──────────────────────────────── */
html body .vx-list .dataTables_wrapper,
html body .vx-list .listtable { overflow: visible; }
html body .vx-list table.vx-list-table { border-collapse: separate; border-spacing: 0; }
html body .vx-list table.vx-list-table thead th {
    padding: .6rem .75rem;
    color: var(--vx-ink-3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
}
html body .vx-list table.vx-list-table tbody td {
    padding: .9rem .75rem;
    color: var(--vx-ink-2);
    font-size: .9rem;
    text-align: left;
    vertical-align: middle;
}
html body .vx-list table.vx-list-table tbody tr:first-child td { border-top: 0; }
.vx-list-icon { position: relative; width: 3.5rem; }
.vx-list-icon .vx-tile-icon { width: 2.5rem; height: 2.5rem; border-radius: .8rem; }
.vx-list-ssl { position: absolute; left: 2.35rem; bottom: .55rem; border-radius: 50%; background: var(--vx-surface); }
.vx-list-main strong { display: block; color: var(--vx-ink); font-size: .95rem; }
.vx-list-main a,
.vx-list-main .vx-list-muted { font-size: .82rem; }
.vx-list-main a { color: var(--vx-accent-ink); }
.vx-list-muted { color: var(--vx-ink-3); }
.vx-list-with-icon { display: inline-flex; align-items: center; gap: .75rem; white-space: nowrap; }
.vx-list-with-icon .vx-tile-icon { flex: none; width: 2.25rem; height: 2.25rem; border-radius: .7rem; }
.vx-list-with-icon strong { display: inline; }
.vx-list-amount { color: var(--vx-ink); font-weight: 700; white-space: nowrap; }
html body .vx-list .label.status { white-space: nowrap; }
html body .vx-list table.vx-list-table td.vx-list-go { width: 1%; color: var(--vx-ink-3); text-align: right; white-space: nowrap; }
html body .vx-list tr:hover td.vx-list-go { color: var(--vx-accent-ink); }
html body .vx-list .vx-list-pay {
    padding: .3rem .9rem;
    border: 0;
    border-radius: 999px;
    background: var(--vx-gradient);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}
@media (max-width: 767.98px) {
    html body .vx-list table.vx-list-table td.vx-list-icon { display: none; }
}

/* 33. Détails d'un service (clientareaproductdetails.tpl) ─────── */
.vx-svc {
    margin-bottom: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--vx-line);
    border-radius: 1.5rem;
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow-lg);
}
.vx-svc-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding: 1.75rem;
    background:
        radial-gradient(40rem 14rem at 0% 0%, rgba(29, 92, 240, .14), transparent 70%),
        radial-gradient(30rem 12rem at 100% 0%, rgba(8, 145, 178, .12), transparent 70%);
    border-bottom: 1px solid var(--vx-line);
}
.vx-svc-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 4rem;
    height: 4rem;
    border-radius: 1.1rem;
    background: var(--vx-gradient);
    box-shadow: 0 12px 28px -14px rgba(29, 92, 240, .8);
    color: #fff;
    font-size: 1.6rem;
}
.vx-svc-title { flex: 1; min-width: 14rem; }
.vx-svc-group {
    margin: 0 0 .2rem;
    color: var(--vx-accent-ink);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
html body .vx-svc-title h1 { margin: 0 0 .6rem; color: var(--vx-ink); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; }
.vx-svc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; padding: 0; list-style: none; color: var(--vx-ink-2); font-size: .88rem; }
.vx-svc-meta li { display: inline-flex; align-items: center; gap: .4rem; }
.vx-svc-meta i { color: var(--vx-ink-3); }
.vx-svc-meta code { padding: .1rem .45rem; border-radius: .4rem; background: var(--vx-surface-2); color: var(--vx-ink); font-family: var(--vx-mono); font-size: .82rem; }

.vx-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: var(--vx-surface-2);
    color: var(--vx-ink-2);
    font-size: .78rem;
    font-weight: 700;
}
.vx-status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.vx-status-active { background: var(--vx-ok-soft); color: var(--vx-ok); }
.vx-status-active::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vx-ok) 25%, transparent); }
.vx-status-pending { background: var(--vx-warn-soft); color: var(--vx-warn); }
.vx-status-suspended, .vx-status-fraud { background: var(--vx-danger-soft); color: var(--vx-danger); }

.vx-svc-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
html body .vx-svc-actions .vx-svc-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
}
html body .vx-svc-actions .btn-primary.vx-svc-btn { border: 0; background: var(--vx-gradient); color: #fff; }
html body .vx-svc-actions .btn-default.vx-svc-btn { border: 1px solid var(--vx-line-strong); background: var(--vx-surface); color: var(--vx-ink-2); }
html body .vx-svc-actions .vx-svc-btn-danger:hover { border-color: var(--vx-danger); color: var(--vx-danger); }

.vx-svc-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin: 0;
}
.vx-svc-facts > div {
    padding: 1.1rem 1.4rem;
    border-right: 1px solid var(--vx-line);
}
.vx-svc-facts > div:last-child { border-right: 0; }
.vx-svc-facts dt {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
    color: var(--vx-ink-3);
    font-size: .75rem;
    font-weight: 600;
}
.vx-svc-facts dd { margin: 0; color: var(--vx-ink); font-size: 1rem; font-weight: 700; }
.vx-svc-facts dd small { color: var(--vx-ink-3); font-size: .78rem; font-weight: 600; }
.vx-svc-facts .is-accent dd {
    background: var(--vx-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.15rem;
    font-weight: 800;
}
.vx-svc-facts .is-accent dd small { -webkit-text-fill-color: var(--vx-ink-3); }
.vx-svc-facts .is-danger dd { color: var(--vx-danger); }
@media (max-width: 767.98px) {
    .vx-svc-head { padding: 1.25rem; }
    .vx-svc-facts > div { border-right: 0; border-bottom: 1px solid var(--vx-line); }
}

/* Onglets sous l'en-tête (informations serveur, options, module) */
html body #tabOverview > .nav-tabs {
    gap: .35rem;
    margin: 0 0 .75rem;
    border: 0;
}
html body #tabOverview > .nav-tabs .nav-link {
    border: 1px solid var(--vx-line);
    border-radius: 999px;
    background: var(--vx-surface);
    color: var(--vx-ink-2);
    font-size: .88rem;
    font-weight: 600;
}
html body #tabOverview > .nav-tabs .nav-link.active { border-color: transparent; background: var(--vx-gradient); color: #fff; }
html body #tabOverview > .responsive-tabs-sm-connector { display: none; }
html body #tabOverview > .product-details-tab-container {
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface) !important;
    box-shadow: var(--vx-shadow);
}
html body #tabOverview > .product-details-tab-container > .tab-pane > .row {
    margin: 0;
    padding: .55rem 0;
    border-bottom: 1px solid var(--vx-line);
}
html body #tabOverview > .product-details-tab-container > .tab-pane > .row:last-child { border-bottom: 0; }
html body #tabOverview > .product-details-tab-container > .tab-pane > .row > [class*="col-sm-5"] { color: var(--vx-ink-3); text-align: left !important; }
html body #tabOverview > .product-details-tab-container > .tab-pane > .row > [class*="col-sm-5"] strong { color: var(--vx-ink-3); font-weight: 600; }
html body #tabOverview > .product-details-tab-container > .tab-pane > .row > [class*="col-sm-7"] { color: var(--vx-ink); font-weight: 600; }

/* 34. Module Proxmox (Layers UI) : sections en cartes, tuiles en grille, informations en liste */
html body #layers2 .lu-section {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.4rem 1.4rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
html body #layers2 .lu-section__header { margin: 0 0 1rem; padding: 0; border: 0; }
html body #layers2 .lu-section .lu-top__title { margin: 0; font-size: 1.05rem; font-weight: 700; }
html body #layers2 .lu-tiles.lu-row {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    margin: 0;
}
html body #layers2 .lu-tiles.lu-row > [class*="lu-col-"] { width: auto; max-width: none; flex: none; padding: 0; }
html body #layers2 .lu-tiles .lu-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    height: 100%;
    min-height: 7.25rem;
    margin: 0;
    padding: 1rem .75rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-bg);
    text-align: center;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
html body #layers2 .lu-tiles a.lu-tile:not(.disabled):hover {
    transform: translateY(-2px);
    border-color: var(--vx-accent);
    box-shadow: var(--vx-shadow);
}
html body #layers2 .lu-tiles .lu-tile img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
html body #layers2 .lu-tiles .lu-tile__title { margin: 0; color: var(--vx-ink); font-size: .85rem; font-weight: 600; line-height: 1.3; }
html body #layers2 .lu-tiles .lu-tile.disabled { opacity: .45; }

html body #layers2 .lu-widget {
    overflow: hidden;
    margin-bottom: 1.25rem;
    border-radius: var(--vx-radius-lg);
}
html body #layers2 .lu-widget__top { padding: 1rem 1.4rem; }
html body #layers2 .lu-widget__content { padding: .5rem 1.4rem 1rem; }
html body #layers2 .lu-widget .lu-table { width: 100%; margin: 0; border: 0; }
html body #layers2 .lu-widget .lu-table td { padding: .7rem 0; border-top: 1px solid var(--vx-line); font-size: .9rem; }
html body #layers2 .lu-widget .lu-table tr:first-child td { border-top: 0; }
html body #layers2 .lu-widget .lu-table td:first-child { width: 40%; color: var(--vx-ink-3); font-weight: 600; }
html body #layers2 .lu-widget .lu-table td:last-child { color: var(--vx-ink); font-weight: 600; }
html body #layers2 .lu-label { border-radius: 999px; font-weight: 700; }
@media (max-width: 575.98px) {
    html body #tabOverview > .product-details-tab-container { padding: 1rem .85rem; }
    html body #layers2 .lu-section { padding: 1rem .85rem; }
    html body #layers2 .lu-tiles.lu-row { grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: .5rem; }
    html body #layers2 .lu-tiles .lu-tile { min-height: 6rem; padding: .75rem .5rem; }
    html body #layers2 .lu-widget__top,
    html body #layers2 .lu-widget__content { padding-left: .85rem; padding-right: .85rem; }
}


/* 35. Gestion du VPS : interface construite par vexcloud.js au-dessus du module Proxmox ── */
html body #layers2.vx-vps-ready:not(.vx-vps-show-orig) .vx-vps-orig { display: none !important; }
html body #layers2 .vx-vps { min-width: 0; display: grid; gap: 1.1rem; margin-bottom: 1.25rem; text-align: left; }
html body #layers2 .vx-vps .vx-vps-card {
    padding: 1.35rem 1.4rem 1.4rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
html body #layers2 .vx-vps .vx-vps-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: 1rem; }
html body #layers2 .vx-vps .vx-vps-card-head h2 { margin: 0; color: var(--vx-ink); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; }
html body #layers2 .vx-vps .vx-vps-card-head p { margin: 0; color: var(--vx-ink-3); font-size: .8rem; }

/* État */
html body #layers2 .vx-vps .vx-vps-stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
html body #layers2 .vx-vps .vx-vps-stat {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
    min-width: 0;
}
html body #layers2 .vx-vps .vx-vps-stat-label { color: var(--vx-ink-3); font-size: .75rem; font-weight: 600; }
html body #layers2 .vx-vps .vx-vps-stat-value { color: var(--vx-ink); font-size: .98rem; font-weight: 700; overflow-wrap: anywhere; }
html body #layers2 .vx-vps .vx-vps-stat-sub { color: var(--vx-ink-3); font-size: .75rem; }
html body #layers2 .vx-vps .vx-vps-state-value { display: inline-flex; align-items: center; gap: .5rem; color: var(--vx-ink); font-size: 1.15rem; font-weight: 800; }
html body #layers2 .vx-vps .vx-vps-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--vx-ink-3); }
html body #layers2 .vx-vps .vx-vps-state.is-on { border-color: color-mix(in srgb, var(--vx-ok) 35%, var(--vx-line)); background: linear-gradient(140deg, var(--vx-ok-soft), var(--vx-surface) 70%); }
html body #layers2 .vx-vps .vx-vps-state.is-on .vx-vps-dot { background: var(--vx-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vx-ok) 22%, transparent); animation: vx-pulse 2s ease-in-out infinite; }
html body #layers2 .vx-vps .vx-vps-state.is-off .vx-vps-dot { background: var(--vx-danger); }
@keyframes vx-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--vx-ok) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { html body #layers2 .vx-vps .vx-vps-state.is-on .vx-vps-dot { animation: none; } }
html body #layers2 .vx-vps .vx-vps-bar { display: block; height: .4rem; overflow: hidden; border-radius: 999px; background: var(--vx-surface-2); }
html body #layers2 .vx-vps .vx-vps-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--vx-gradient); }
html body #layers2 .vx-vps .vx-vps-bar.is-mid > span { background: linear-gradient(90deg, #f59e0b, #f97316); }
html body #layers2 .vx-vps .vx-vps-bar.is-high > span { background: linear-gradient(90deg, #f43f5e, #dc2626); }

/* Alimentation */
html body #layers2 .vx-vps .vx-vps-power-row { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
html body #layers2 .vx-vps .vx-vps-pbtn,
html body #layers2 .vx-vps .vx-vps-console {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem .95rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-bg);
    color: var(--vx-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, transform .15s;
}
html body #layers2 .vx-vps .vx-vps-pbtn { --vx-p: var(--vx-accent-ink); --vx-p-soft: var(--vx-accent-soft); }
html body #layers2 .vx-vps .vx-vps-pbtn.is-start { --vx-p: var(--vx-ok); --vx-p-soft: var(--vx-ok-soft); }
html body #layers2 .vx-vps .vx-vps-pbtn.is-shutdown { --vx-p: var(--vx-warn); --vx-p-soft: var(--vx-warn-soft); }
html body #layers2 .vx-vps .vx-vps-pbtn.is-stop { --vx-p: var(--vx-danger); --vx-p-soft: var(--vx-danger-soft); }
html body #layers2 .vx-vps .vx-vps-pbtn-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .8rem;
    background: var(--vx-p-soft);
    color: var(--vx-p);
    font-size: .9rem;
}
html body #layers2 .vx-vps .vx-vps-pbtn-text { display: flex; flex-direction: column; min-width: 0; }
html body #layers2 .vx-vps .vx-vps-pbtn-text strong { font-size: .92rem; font-weight: 700; }
html body #layers2 .vx-vps .vx-vps-pbtn-text small { color: var(--vx-ink-3); font-size: .75rem; }
html body #layers2 .vx-vps .vx-vps-pbtn:not(:disabled):hover { border-color: var(--vx-p); background: var(--vx-p-soft); transform: translateY(-1px); }
html body #layers2 .vx-vps .vx-vps-pbtn:disabled { cursor: not-allowed; opacity: .42; }
html body #layers2 .vx-vps .vx-vps-console {
    justify-content: center;
    gap: .55rem;
    border: 0;
    border-radius: var(--vx-radius);
    background: var(--vx-gradient);
    box-shadow: 0 10px 24px -14px rgba(29, 92, 240, .8);
    color: #fff;
    font-weight: 700;
}
html body #layers2 .vx-vps .vx-vps-console:hover { background: var(--vx-gradient-hover); transform: translateY(-1px); }

/* Outils */
html body #layers2 .vx-vps .vx-vps-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
html body #layers2 .vx-vps .vx-vps-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .9rem;
    border: 1px solid var(--vx-line);
    border-radius: 999px;
    background: var(--vx-bg);
    color: var(--vx-ink-2);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}
html body #layers2 .vx-vps .vx-vps-tab i { font-size: .75rem; }
html body #layers2 .vx-vps .vx-vps-tab:hover { border-color: var(--vx-line-strong); color: var(--vx-ink); }
html body #layers2 .vx-vps .vx-vps-tab.is-active { border-color: transparent; background: var(--vx-gradient); color: #fff; }
html body #layers2 .vx-vps .vx-vps-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
html body #layers2 .vx-vps .vx-vps-tool {
    --vx-g: var(--vx-accent-ink);
    --vx-g-soft: var(--vx-accent-soft);
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem .9rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-bg);
    color: var(--vx-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
html body #layers2 .vx-vps .vx-vps-tool[hidden] { display: none; }
html body #layers2 .vx-vps .vx-vps-tool.is-network { --vx-g: var(--vx-ok); --vx-g-soft: var(--vx-ok-soft); }
html body #layers2 .vx-vps .vx-vps-tool.is-system { --vx-g: var(--vx-cyan); --vx-g-soft: var(--vx-cyan-soft); }
html body #layers2 .vx-vps .vx-vps-tool.is-monitor { --vx-g: var(--vx-warn); --vx-g-soft: var(--vx-warn-soft); }
html body #layers2 .vx-vps .vx-vps-tool.is-console { --vx-g: var(--vx-violet); --vx-g-soft: var(--vx-violet-soft); }
html body #layers2 .vx-vps .vx-vps-tool-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .8rem;
    background: var(--vx-g-soft);
    color: var(--vx-g);
}
html body #layers2 .vx-vps .vx-vps-tool-icon img { width: 1.6rem; height: 1.6rem; object-fit: contain; }
html body #layers2 .vx-vps .vx-vps-tool-text { display: flex; flex: 1; flex-direction: column; gap: .1rem; min-width: 0; }
html body #layers2 .vx-vps .vx-vps-tool-text strong { font-size: .9rem; font-weight: 700; }
html body #layers2 .vx-vps .vx-vps-tool-text small { color: var(--vx-ink-3); font-size: .75rem; line-height: 1.35; }
html body #layers2 .vx-vps .vx-vps-tool-go { color: var(--vx-ink-3); font-size: .72rem; transition: transform .2s, color .2s; }
html body #layers2 .vx-vps .vx-vps-tool:not(:disabled):hover { border-color: var(--vx-g); box-shadow: var(--vx-shadow); transform: translateY(-1px); }
html body #layers2 .vx-vps .vx-vps-tool:not(:disabled):hover .vx-vps-tool-go { color: var(--vx-g); transform: translateX(3px); }
html body #layers2 .vx-vps .vx-vps-tool:disabled { cursor: not-allowed; opacity: .42; }
html body #layers2 .vx-vps .vx-vps-toggle {
    justify-self: center;
    padding: .25rem .5rem;
    border: 0;
    background: transparent;
    color: var(--vx-ink-3);
    font: inherit;
    font-size: .78rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
html body #layers2 .vx-vps .vx-vps-toggle:hover { color: var(--vx-accent-ink); }
@media (max-width: 575.98px) {
    html body #layers2 .vx-vps .vx-vps-card { padding: 1.1rem .9rem; }
    html body #layers2 .vx-vps .vx-vps-power-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body #layers2 .vx-vps .vx-vps-console { grid-column: 1 / -1; }
    html body #layers2 .vx-vps .vx-vps-pbtn-text small { display: none; }
    html body #layers2 .vx-vps .vx-vps-grid { grid-template-columns: minmax(0, 1fr); }
    html body #layers2 .vx-vps .vx-vps-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
    html body #layers2 .vx-vps .vx-vps-tab { flex: none; }
}

html body #layers2 .vx-vps > *,
html body #layers2 .vx-vps .vx-vps-stat,
html body #layers2 .vx-vps .vx-vps-pbtn,
html body #layers2 .vx-vps .vx-vps-tool { min-width: 0; }
@media (max-width: 575.98px) {
    html body #layers2 .vx-vps .vx-vps-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body #layers2 .vx-vps .vx-vps-state { grid-column: 1 / -1; }
}

/* 36. Module Proxmox : blocs « Information » (grille) et « IP Addresses » ─ */
html body #layers2 .lu-widget {
    border: 1px solid var(--vx-line);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
html body #layers2 .lu-widget .lu-widget__top {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 1.1rem 1.4rem .4rem;
    border-bottom: 0;
}
html body #layers2 .lu-widget .lu-widget__top .lu-top__title { color: var(--vx-ink); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; }

/* Information : chaque ligne devient une carte */
html body #layers2:not(.vx-vps-show-orig) table.vx-info-table,
html body #layers2:not(.vx-vps-show-orig) table.vx-info-table > tbody { display: block; width: 100%; border: 0; }
html body #layers2:not(.vx-vps-show-orig) table.vx-info-table > tbody {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    padding: .5rem 0 .25rem;
}
html body #layers2:not(.vx-vps-show-orig) table.vx-info-table > tbody > tr {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    padding: .8rem .95rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-bg);
}
html body #layers2:not(.vx-vps-show-orig) table.vx-info-table > tbody > tr.vx-vps-dup { display: none; }
html body #layers2:not(.vx-vps-show-orig) .lu-widget table.vx-info-table td {
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left;
}
html body #layers2:not(.vx-vps-show-orig) .lu-widget table.vx-info-table td:first-child {
    color: var(--vx-ink-3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
html body #layers2:not(.vx-vps-show-orig) .lu-widget table.vx-info-table td:last-child {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--vx-ink);
    font-size: .95rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Adresses IP */
html body #layers2 table.vx-ip-table { border-collapse: separate; border-spacing: 0; }
html body #layers2 table.vx-ip-table thead th {
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--vx-line);
    color: var(--vx-ink-3);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
html body #layers2 .lu-widget table.vx-ip-table td {
    width: auto !important;
    padding: .7rem .8rem !important;
    border-top: 1px solid var(--vx-line);
    color: var(--vx-ink-2);
    font-size: .88rem;
}
html body #layers2 .lu-widget table.vx-ip-table td:first-child,
html body #layers2 .lu-widget table.vx-ip-table td:last-child { width: auto; color: var(--vx-ink); font-weight: 600; }
html body #layers2 table.vx-ip-table td:first-child,
html body #layers2 table.vx-ip-table td:nth-child(4) { font-family: var(--vx-mono); font-size: .84rem; }
html body #layers2 table.vx-ip-table tbody td:first-child { position: relative; padding-right: 2.2rem !important; cursor: copy; }
html body #layers2 table.vx-ip-table tbody td:first-child::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .8rem;
    width: .85rem;
    height: .85rem;
    background: var(--vx-ink-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .15s;
}
html body #layers2 table.vx-ip-table tbody tr:hover td { background: var(--vx-surface-2); }
html body #layers2 table.vx-ip-table tbody tr:hover td:first-child::after { opacity: 1; }
html body #layers2 table.vx-ip-table tbody td.vx-copied { color: var(--vx-ok) !important; }
html body #layers2 table.vx-ip-table tbody td.vx-copied::after {
    opacity: 1;
    background: var(--vx-ok);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
@media (max-width: 575.98px) {
    html body #layers2:not(.vx-vps-show-orig) table.vx-info-table > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body #layers2 table.vx-ip-table td:nth-child(2),
    html body #layers2 table.vx-ip-table td:nth-child(3),
    html body #layers2 table.vx-ip-table th:nth-child(2),
    html body #layers2 table.vx-ip-table th:nth-child(3) { display: none; }
}
html body #layers2:not(.vx-vps-show-orig) table.vx-info-table > tbody { align-items: start; }
html body #layers2:not(.vx-vps-show-orig) table.vx-info-table > tbody > tr { height: auto !important; justify-content: flex-start; }
html body #layers2:not(.vx-vps-show-orig) .lu-widget table.vx-info-table td { height: auto !important; min-height: 0 !important; line-height: 1.35; }
html body #layers2:not(.vx-vps-show-orig) .lu-widget table.vx-info-table td:last-child { min-height: 1.6rem !important; }
/* police de la charte (le module impose la sienne) ; valeur vide en gris */
html body #layers2 .lu-widget .lu-top__title,
html body #layers2 .lu-widget table.vx-info-table td,
html body #layers2 .lu-widget table.vx-ip-table th,
html body #layers2 .lu-widget table.vx-ip-table td:not(:first-child):not(:nth-child(4)) { font-family: var(--vx-font) !important; }
html body #layers2:not(.vx-vps-show-orig) .lu-widget table.vx-info-table td.vx-info-empty { color: var(--vx-ink-3); font-weight: 600; }
html body #layers2 .vx-ip-widget .lu-widget__body { padding: 0 1.4rem 1rem; }
html body #layers2 .vx-ip-widget .lu-widget__content { padding: 0; }
@media (max-width: 575.98px) {
    html body #layers2 .vx-ip-widget .lu-widget__body { padding: 0 .85rem .85rem; }
}

/* 37. Gestion du VPS : accès rapide, recherche, aide, bascule vers l'interface d'origine */
html body #layers2.vx-vps-show-orig .vx-vps { display: none; }
html body #layers2 .vx-vps .vx-vps-updated { color: var(--vx-ink-3); font-size: .7rem; opacity: .8; }

html body #layers2 .vx-vps .vx-vps-access-list { display: grid; gap: .55rem; }
html body #layers2 .vx-vps .vx-vps-access-row {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .55rem .6rem .55rem .9rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-bg);
    transition: border-color .2s;
}
html body #layers2 .vx-vps .vx-vps-access-label { color: var(--vx-ink-3); font-size: .78rem; font-weight: 700; }
html body #layers2 .vx-vps .vx-vps-access-value {
    overflow: hidden;
    padding: 0;
    background: transparent;
    color: var(--vx-ink);
    font-family: var(--vx-mono);
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body #layers2 .vx-vps .vx-vps-copy {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: 999px;
    background: var(--vx-surface);
    color: var(--vx-ink-2);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}
html body #layers2 .vx-vps .vx-vps-copy:hover { border-color: var(--vx-accent); color: var(--vx-accent-ink); }
html body #layers2 .vx-vps .vx-vps-access-row.vx-copied { border-color: var(--vx-ok); }
html body #layers2 .vx-vps .vx-vps-access-row.vx-copied .vx-vps-copy { border-color: var(--vx-ok); background: var(--vx-ok-soft); color: var(--vx-ok); }
html body #layers2 .vx-vps .vx-vps-access-row.vx-copied .vx-vps-copy span { font-size: 0; }
html body #layers2 .vx-vps .vx-vps-access-row.vx-copied .vx-vps-copy span::after { content: "Copié"; font-size: .78rem; }
html:lang(en) body #layers2 .vx-vps .vx-vps-access-row.vx-copied .vx-vps-copy span::after { content: "Copied"; }

html body #layers2 .vx-vps .vx-vps-search {
    width: 15rem;
    max-width: 100%;
    min-height: 2.3rem;
    padding: .4rem .9rem .4rem 2.2rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: 999px;
    background: var(--vx-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23606d8a' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .8rem 50% / .85rem;
    color: var(--vx-ink);
    font: inherit;
    font-size: .85rem;
}
html body #layers2 .vx-vps .vx-vps-search:focus { border-color: var(--vx-accent); box-shadow: 0 0 0 3px var(--vx-accent-soft); outline: 0; }
html body #layers2 .vx-vps .vx-vps-tools .vx-vps-card-head { align-items: center; }
html body #layers2 .vx-vps .vx-vps-empty { margin: .5rem 0 0; color: var(--vx-ink-3); font-size: .88rem; text-align: center; }

html body #layers2 .vx-vps .vx-vps-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.2rem;
    border: 1px dashed var(--vx-line-strong);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
}
html body #layers2 .vx-vps .vx-vps-help-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .8rem;
    background: var(--vx-accent-soft);
    color: var(--vx-accent-ink);
}
html body #layers2 .vx-vps .vx-vps-help-text { display: flex; flex: 1; flex-direction: column; min-width: 12rem; }
html body #layers2 .vx-vps .vx-vps-help-text strong { color: var(--vx-ink); font-size: .95rem; }
html body #layers2 .vx-vps .vx-vps-help-text span { color: var(--vx-ink-3); font-size: .82rem; }
html body #layers2 .vx-vps .vx-vps-help-btn {
    padding: .5rem 1.1rem;
    border-radius: 999px;
    background: var(--vx-gradient);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}
html body #layers2 .vx-vps .vx-vps-help-btn:hover { background: var(--vx-gradient-hover); color: #fff; }
html body #layers2 .vx-vps .vx-vps-help-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
html body #layers2 .vx-vps .vx-vps-help-btn.is-ghost { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--vx-line-strong); background: var(--vx-surface); color: var(--vx-ink-2); }
html body #layers2 .vx-vps .vx-vps-help-btn.is-ghost:hover { border-color: var(--vx-accent); color: var(--vx-accent-ink); }
html body #layers2 .vx-vps .vx-vps-help-btn.is-ghost .vx-vps-dot { background: var(--vx-ok); }

/* Réinstallation : outil signalé comme destructif */
html body #layers2 .vx-vps .vx-vps-tool.is-wipe { --vx-g: var(--vx-danger); --vx-g-soft: var(--vx-danger-soft); }
html body #layers2 .vx-vps .vx-vps-tool.is-wipe small { color: var(--vx-danger); }

/* Premiers pas (repliable) */
html body #layers2 .vx-vps .vx-vps-guide > summary { position: relative; margin-bottom: 0; padding-right: 2rem; list-style: none; cursor: pointer; }
html body #layers2 .vx-vps .vx-vps-guide > summary::-webkit-details-marker { display: none; }
html body #layers2 .vx-vps .vx-vps-guide > summary h2 i { color: var(--vx-ok); }
html body #layers2 .vx-vps .vx-vps-guide-chev { position: absolute; top: .2rem; right: 0; color: var(--vx-ink-3); transition: transform .2s; }
html body #layers2 .vx-vps .vx-vps-guide[open] .vx-vps-guide-chev { transform: rotate(180deg); }
html body #layers2 .vx-vps .vx-vps-guide[open] > summary { margin-bottom: 1rem; }
html body #layers2 .vx-vps .vx-vps-steps { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; counter-reset: vx-step; }
html body #layers2 .vx-vps .vx-vps-steps > li { position: relative; padding: .1rem 0 0 2.6rem; counter-increment: vx-step; }
html body #layers2 .vx-vps .vx-vps-steps > li::before {
    content: counter(vx-step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--vx-accent-soft);
    color: var(--vx-accent-ink);
    font-size: .8rem;
    font-weight: 800;
}
html body #layers2 .vx-vps .vx-vps-steps strong { color: var(--vx-ink); font-size: .92rem; }
html body #layers2 .vx-vps .vx-vps-steps p { margin: .15rem 0 .5rem; color: var(--vx-ink-3); font-size: .82rem; }
html body #layers2 .vx-vps .vx-vps-step-cmd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
    margin-top: .4rem;
    padding: .45rem .5rem .45rem .85rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-bg);
    transition: border-color .2s;
}
html body #layers2 .vx-vps .vx-vps-step-cmd code { flex: 1; min-width: 0; padding: 0; background: transparent; color: var(--vx-ink); font-family: var(--vx-mono); font-size: .84rem; overflow-wrap: anywhere; }
html body #layers2 .vx-vps .vx-vps-step-os { flex-basis: 100%; color: var(--vx-ink-3); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
html body #layers2 .vx-vps .vx-vps-step-cmd .vx-vps-copy { padding: .35rem .6rem; }
html body #layers2 .vx-vps .vx-vps-step-cmd.vx-copied { border-color: var(--vx-ok); }
html body #layers2 .vx-vps .vx-vps-step-cmd.vx-copied .vx-vps-copy { border-color: var(--vx-ok); background: var(--vx-ok-soft); color: var(--vx-ok); }

/* Bascule en bas de page */
html body #layers2 .vx-vps-switch { display: flex; justify-content: center; margin: 1.5rem 0 .5rem; }
html body #layers2 .vx-vps-switch .vx-vps-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    border: 1px solid var(--vx-line);
    border-radius: 999px;
    background: var(--vx-surface);
    color: var(--vx-ink-3);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
html body #layers2 .vx-vps-switch .vx-vps-toggle:hover { border-color: var(--vx-accent); color: var(--vx-accent-ink); }
@media (max-width: 575.98px) {
    html body #layers2 .vx-vps .vx-vps-access-row { grid-template-columns: minmax(0, 1fr) auto; }
    html body #layers2 .vx-vps .vx-vps-access-label { grid-column: 1 / -1; }
    html body #layers2 .vx-vps .vx-vps-search { width: 100%; }
}

/* 38. Fiche service : utilisation des ressources ───────────────── */
html body #tabOverview > .product-details-tab-container > #resourceusage { text-align: left; }
.vx-usage { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.vx-usage-item {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-bg);
}
.vx-usage-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .7rem; }
.vx-usage-icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    background: var(--vx-accent-soft);
    color: var(--vx-accent-ink);
}
.vx-usage-name { flex: 1; color: var(--vx-ink); font-size: .95rem; font-weight: 700; }
.vx-usage-pct { color: var(--vx-accent-ink); font-size: .85rem; font-weight: 800; }
.vx-usage-value { margin: 0 0 .55rem; color: var(--vx-ink-3); font-size: .85rem; }
.vx-usage-value strong { color: var(--vx-ink); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.vx-usage-bar { height: .5rem; overflow: hidden; border-radius: 999px; background: var(--vx-surface-2); }
.vx-usage-bar > span { display: block; height: 100%; min-width: .5rem; border-radius: inherit; background: var(--vx-gradient); }
.vx-usage-bar.is-mid > span { background: linear-gradient(90deg, #f59e0b, #f97316); }
.vx-usage-bar.is-high > span { background: linear-gradient(90deg, #f43f5e, #dc2626); }
.vx-usage-limit { margin: .5rem 0 0; color: var(--vx-ink-3); font-size: .78rem; }
.vx-usage-limit.is-unlimited {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--vx-ok-soft);
    color: var(--vx-ok);
    font-weight: 700;
}
.vx-usage-updated { margin: 1rem 0 0; color: var(--vx-ink-3); font-size: .78rem; }

/* 39. Changer le mot de passe et jauge de robustesse ──────────── */
html body .vx-pwcard {
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
html body .vx-pwcard .card-body { padding: 1.5rem 1.6rem; }
.vx-pwcard-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.vx-pwcard-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .9rem;
    background: var(--vx-gradient);
    color: #fff;
}
html body .vx-pwcard-head .card-title { margin: 0 0 .15rem; color: var(--vx-ink); font-size: 1.2rem; font-weight: 800; }
.vx-pwcard-head p { margin: 0; color: var(--vx-ink-3); font-size: .85rem; }
.vx-pwform-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); align-items: start; }
html body .vx-pwform label { margin-bottom: .4rem; color: var(--vx-ink-2); font-size: .85rem; font-weight: 600; }
.vx-pwfield {
    display: flex;
    align-items: center;
    border: 1px solid var(--vx-line-strong);
    border-radius: .85rem;
    background: var(--vx-bg);
    transition: border-color .15s, box-shadow .15s;
}
.vx-pwfield:focus-within { border-color: var(--vx-accent); box-shadow: 0 0 0 3px var(--vx-accent-soft); }
html body .vx-pwfield .form-control {
    flex: 1;
    min-width: 0;
    min-height: 2.9rem;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--vx-mono);
}
.vx-pwfield-eye {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    background: transparent;
    color: var(--vx-ink-3);
    cursor: pointer;
}
.vx-pwfield-eye:hover { color: var(--vx-accent-ink); }
html body .vx-pwfield .vx-pwfield-gen {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: none;
    margin: .25rem;
    padding: .45rem .85rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: 999px;
    background: var(--vx-surface);
    color: var(--vx-ink-2);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}
html body .vx-pwfield .vx-pwfield-gen:hover { border-color: var(--vx-accent); color: var(--vx-accent-ink); }
.vx-pwform-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
html body .vx-pwform-actions .btn { border-radius: 999px; font-weight: 700; }
html body .vx-pwform-actions .btn-primary { border: 0; background: var(--vx-gradient); }
html body .vx-pwform-actions .btn-primary:disabled { opacity: .5; }
html body .vx-pwform-actions .btn-default { border: 1px solid var(--vx-line-strong); background: transparent; color: var(--vx-ink-2); }
#inputNewPassword2Msg .form-text { margin-top: .35rem; color: var(--vx-danger) !important; font-size: .8rem; }

.vx-pw {
    padding: 1rem 1.1rem;
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius);
    background: var(--vx-bg);
}
.vx-pw-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; color: var(--vx-ink-3); font-size: .78rem; font-weight: 600; }
.vx-pw-head strong { color: var(--vx-ink-2); font-size: .8rem; }
.vx-pw-head strong.is-weak { color: var(--vx-danger); }
.vx-pw-head strong.is-mid { color: var(--vx-warn); }
.vx-pw-head strong.is-strong { color: var(--vx-ok); }
html body .vx-pw .progress.vx-pw-bar { height: .45rem; margin: 0 0 .9rem; border-radius: 999px; background: var(--vx-surface-2); }
html body .vx-pw .progress-bar { border-radius: inherit; transition: width .25s; }
.vx-pw-rules { display: grid; gap: .35rem; margin: 0 0 .7rem; padding: 0; list-style: none; color: var(--vx-ink-3); font-size: .8rem; }
.vx-pw-rules li { position: relative; padding-left: 1.5rem; transition: color .15s; }
.vx-pw-rules li::before {
    content: "";
    position: absolute;
    top: .1rem;
    left: 0;
    width: 1rem;
    height: 1rem;
    border: 1.5px solid var(--vx-line-strong);
    border-radius: 50%;
}
.vx-pw-rules li.is-ok { color: var(--vx-ink); }
.vx-pw-rules li.is-ok::before {
    border-color: transparent;
    background: var(--vx-ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305825a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / .62rem;
}
.vx-pw-note { margin: 0; color: var(--vx-ink-3); font-size: .75rem; }
@media (max-width: 767.98px) {
    .vx-pwform-grid { grid-template-columns: minmax(0, 1fr); }
    .vx-pwfield { flex-wrap: wrap; }
    html body .vx-pwfield .vx-pwfield-gen { flex: 1 0 100%; justify-content: center; margin: 0 .35rem .35rem; }
}

/* 40. Demande d'annulation (clientareacancelrequest.tpl) ──────── */
.vx-cancel {
    max-width: 46rem;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--vx-line);
    border-radius: 1.5rem;
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow-lg);
}
.vx-cancel-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.6rem;
    border-bottom: 1px solid var(--vx-line);
    background: radial-gradient(36rem 12rem at 0% 0%, color-mix(in srgb, var(--vx-danger) 12%, transparent), transparent 70%);
}
.vx-cancel-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: var(--vx-danger-soft);
    color: var(--vx-danger);
    font-size: 1.2rem;
}
.vx-cancel-eyebrow { margin: 0 0 .15rem; color: var(--vx-ink-3); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
html body .vx-cancel-head h1 { margin: 0; color: var(--vx-ink); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.vx-cancel-domain { margin: .3rem 0 0; color: var(--vx-ink-2); font-size: .85rem; }
.vx-cancel-body { padding: 1.4rem 1.6rem .5rem; }
.vx-cancel-warning {
    display: flex;
    gap: .6rem;
    margin: 0 0 1.4rem;
    padding: .8rem 1rem;
    border: 1px solid color-mix(in srgb, var(--vx-warn) 35%, var(--vx-line));
    border-radius: var(--vx-radius);
    background: var(--vx-warn-soft);
    color: var(--vx-ink);
    font-size: .88rem;
}
.vx-cancel-warning i { margin-top: .15rem; color: var(--vx-warn); }
.vx-cancel-section { margin: 0 0 1.3rem; padding: 0; border: 0; }
html body .vx-cancel legend,
html body .vx-cancel .form-group > label { display: block; margin-bottom: .6rem; color: var(--vx-ink); font-size: .95rem; font-weight: 700; }
.vx-cancel-types { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
html body .vx-cancel .vx-cancel-type {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 0;
    padding: .9rem 1rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: var(--vx-radius);
    background: var(--vx-bg);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.vx-cancel-type input { flex: none; margin-top: .2rem; accent-color: var(--vx-accent); }
.vx-cancel-type:has(input:checked) { border-color: var(--vx-accent); background: var(--vx-accent-soft); }
.vx-cancel-type:has(input[value="Immediate"]:checked) { border-color: var(--vx-danger); background: var(--vx-danger-soft); }
.vx-cancel-type-body { display: flex; flex-direction: column; gap: .2rem; }
.vx-cancel-type-body strong { color: var(--vx-ink); font-size: .92rem; }
.vx-cancel-type-body small { color: var(--vx-ink-3); font-size: .8rem; line-height: 1.4; }
html body .vx-cancel textarea.form-control { min-height: 7rem; border-radius: var(--vx-radius); background: var(--vx-bg); }
.vx-cancel-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem;
    padding: 1rem 1.6rem 1.4rem;
}
html body .vx-cancel-foot .btn { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; font-weight: 700; }
html body .vx-cancel-foot .btn-default { border: 1px solid var(--vx-line-strong); background: transparent; color: var(--vx-ink-2); }
html body .vx-cancel-foot .vx-cancel-submit { border: 0; background: var(--vx-danger); color: #fff; }
html body .vx-cancel-foot .vx-cancel-submit:hover { background: color-mix(in srgb, var(--vx-danger) 85%, #000); }
.vx-cancel-done { max-width: 32rem; margin: 1rem auto; padding: 2rem; border: 1px solid var(--vx-line); border-radius: 1.5rem; background: var(--vx-surface); box-shadow: var(--vx-shadow-lg); text-align: center; }
.vx-cancel-done-icon { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; border-radius: 50%; background: var(--vx-ok-soft); color: var(--vx-ok); font-size: 1.4rem; }
.vx-cancel-done-icon.is-error { background: var(--vx-danger-soft); color: var(--vx-danger); }
html body .vx-cancel-done h1 { color: var(--vx-ink); font-size: 1.5rem; font-weight: 800; }
.vx-cancel-done p { color: var(--vx-ink-2); }
html body .vx-cancel-done .btn { border-radius: 999px; }
@media (max-width: 575.98px) {
    .vx-cancel-head, .vx-cancel-body, .vx-cancel-foot { padding-left: 1.1rem; padding-right: 1.1rem; }
    .vx-cancel-foot .btn { flex: 1 1 100%; justify-content: center; }
}

/* 41. Hébergement web et revendeur (modules/servers/plesk/overview.tpl) ─ */
.vx-web { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; }
.vx-web-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; }
.vx-web-card {
    overflow: hidden;
    border: 1px solid var(--vx-line);
    border-radius: 1.25rem;
    background: var(--vx-surface);
    box-shadow: var(--vx-shadow);
}
.vx-web-card-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--vx-line);
}
html body .vx-web-card-head h2 { margin: 0; color: var(--vx-ink); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.vx-web-card-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .65rem;
    background: var(--vx-accent-soft);
    color: var(--vx-accent-ink);
    font-size: .95rem;
}
.vx-web-card-body { padding: 1.25rem 1.4rem; color: var(--vx-ink-2); }
.vx-web-card-body p:last-of-type { margin-bottom: 1rem; }

/* Votre site */
.vx-web-site-body { display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem; }
.vx-web-group { margin: 0; color: var(--vx-ink-3); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
html body .vx-web-domain {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .9rem;
    color: var(--vx-ink);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
    word-break: break-all;
    text-decoration: none;
}
html body a.vx-web-domain:hover { color: var(--vx-accent-ink); }
.vx-web-domain i { color: var(--vx-ink-3); font-size: .85rem; }
.vx-web-domain.is-empty { color: var(--vx-ink-3); }
.vx-web-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
html body .vx-web .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: 999px; font-weight: 700; }
html body .vx-web .btn-primary { border: 0; background: var(--vx-gradient); color: #fff; }
html body .vx-web .btn-primary:hover { background: var(--vx-gradient-hover); }
html body .vx-web .btn-default { border: 1px solid var(--vx-line-strong); background: var(--vx-surface); color: var(--vx-ink-2); }
html body .vx-web .btn-default:hover { border-color: var(--vx-accent); color: var(--vx-accent-ink); }

/* Consommation */
.vx-web-meters { display: grid; gap: 1.1rem; padding: 1.3rem 1.4rem .6rem; }
.vx-web-meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.vx-web-meter-label { display: inline-flex; align-items: center; gap: .45rem; color: var(--vx-ink); font-size: .92rem; font-weight: 700; }
.vx-web-meter-label i { color: var(--vx-ink-3); }
.vx-web-meter-pct { color: var(--vx-ink-3); font-family: var(--vx-mono); font-size: .8rem; }
.vx-web-bar { height: .55rem; overflow: hidden; border-radius: 999px; background: var(--vx-surface-2); }
.vx-web-bar span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--vx-gradient); transition: width .6s ease; }
.vx-web-meter.is-near .vx-web-bar span { background: var(--vx-warn); }
.vx-web-meter.is-over .vx-web-bar span { background: var(--vx-danger); }
.vx-web-meter.is-near .vx-web-meter-pct { color: var(--vx-warn); }
.vx-web-meter.is-over .vx-web-meter-pct { color: var(--vx-danger); }
.vx-web-meter-value { margin: .45rem 0 0; color: var(--vx-ink-3); font-size: .85rem; }
.vx-web-meter-value strong { color: var(--vx-ink); }
.vx-web-updated { margin: 0; padding: .7rem 1.4rem 1.1rem; color: var(--vx-ink-3); font-size: .78rem; }
.vx-web-limit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: .4rem 1.4rem 1.2rem;
    padding: .7rem .9rem;
    border-radius: .8rem;
    background: var(--vx-danger-soft);
    color: var(--vx-danger);
    font-size: .85rem;
    font-weight: 600;
}
.vx-web-limit span { flex: 1; min-width: 12rem; }
html body .vx-web-limit .btn-danger { border: 0; background: var(--vx-danger); color: #fff; }

/* Raccourcis */
.vx-web-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; padding: 1.2rem 1.4rem 1.4rem; }
html body .vx-web-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1.1rem .75rem;
    border: 1px solid var(--vx-line);
    border-radius: 1rem;
    background: var(--vx-bg);
    color: var(--vx-ink);
    font-size: .88rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
html body .vx-web-tool:hover { transform: translateY(-2px); border-color: var(--vx-accent); box-shadow: var(--vx-shadow); color: var(--vx-accent-ink); }
.vx-web-tool-icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: .9rem; background: var(--vx-accent-soft); color: var(--vx-accent-ink); font-size: 1.15rem; }
.vx-web-tool-icon.is-violet { background: var(--vx-violet-soft); color: var(--vx-violet); }
.vx-web-tool-icon.is-warn { background: var(--vx-warn-soft); color: var(--vx-warn); }
.vx-web-tool-icon.is-cyan { background: var(--vx-cyan-soft); color: var(--vx-cyan); }
.vx-web-tool-icon.is-ok { background: var(--vx-ok-soft); color: var(--vx-ok); }
.vx-web-tool-icon.is-danger { background: var(--vx-danger-soft); color: var(--vx-danger); }

/* WordPress */
.vx-web-wp { display: flex; flex-direction: column; gap: 1.2rem; padding: 1.25rem 1.4rem 1.4rem; }
.vx-web-wp-row,
.vx-web-wp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
/* le filet ne sépare les deux blocs que si la liste des installations est affichée (le script du module la montre) */
.vx-web-wp-row:not([style*='none']) + .vx-web-wp-new { padding-top: 1.2rem; border-top: 1px solid var(--vx-line); }
html body .vx-web-wp-new h3 { margin: 0 0 .2rem; color: var(--vx-ink); font-size: .95rem; font-weight: 700; }
.vx-web-wp-url { margin: 0 0 .8rem; color: var(--vx-ink-3); font-family: var(--vx-mono); font-size: .8rem; word-break: break-all; }
html body .vx-web .form-control { border-color: var(--vx-line-strong); border-radius: .7rem; background-color: var(--vx-bg); color: var(--vx-ink); }

/* Options et informations */
.vx-web-kv { margin: 0; padding: .4rem 1.4rem .8rem; }
.vx-web-kv > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--vx-line); }
.vx-web-kv > div:last-child { border-bottom: 0; }
.vx-web-kv dt { color: var(--vx-ink-3); font-size: .85rem; font-weight: 600; }
.vx-web-kv dd { margin: 0; color: var(--vx-ink); font-size: .88rem; font-weight: 700; text-align: right; }
.vx-web-addon { display: flex; flex-direction: column; gap: .6rem; }

/* Sitejet */
.vx-web-sitejet-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.4rem; padding: 1.4rem; }
.vx-web-sitejet-preview { overflow: hidden; border: 1px solid var(--vx-line); border-radius: 1rem; background: var(--vx-bg); }
.vx-web-sitejet-preview img { display: block; width: 100%; transition: opacity .2s ease-in-out; }
.vx-web-sitejet-side { display: flex; flex-direction: column; justify-content: center; gap: .35rem; }
.vx-web-sitejet-side .progress { margin-top: .8rem; }
/* Mise en ligne (DNS), accès, revendeur */
.vx-web-dns-table { overflow: hidden; margin: 0 0 1rem; border: 1px solid var(--vx-line); border-radius: .9rem; }
.vx-web-dns-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: .75rem; padding: .65rem 1rem; border-top: 1px solid var(--vx-line); }
.vx-web-dns-row:first-child { border-top: 0; }
.vx-web-dns-row.is-head { background: var(--vx-surface-2); color: var(--vx-ink-3); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.vx-web-dns-row small { display: block; color: var(--vx-ink-3); font-size: .75rem; word-break: break-all; }
.vx-web-dns-row code { color: var(--vx-ink); font-family: var(--vx-mono); font-size: .85rem; }
.vx-web-dns-type { display: inline-block; padding: .15rem .55rem; border-radius: .45rem; background: var(--vx-accent-soft); color: var(--vx-accent-ink); font-family: var(--vx-mono); font-size: .78rem; }
html body .vx-web-copy {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .3rem .65rem;
    border: 1px dashed var(--vx-line-strong);
    border-radius: .6rem;
    background: var(--vx-bg);
    color: var(--vx-ink-3);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
html body .vx-web-copy code { overflow-wrap: anywhere; padding: 0; background: none; color: var(--vx-ink); font-family: var(--vx-mono); font-size: .82rem; }
html body .vx-web-copy:hover { border-color: var(--vx-accent); color: var(--vx-accent-ink); }
html body .vx-web-copy.vx-copied { border-style: solid; border-color: var(--vx-ok); color: var(--vx-ok); }
.vx-web-copy.vx-copied i::before { content: "\f00c"; }
.vx-web-kv dd .vx-web-copy { justify-content: flex-end; }
.vx-web-dns-more { margin: 0 0 1rem; }
.vx-web-dns-more summary { color: var(--vx-accent-ink); font-size: .88rem; font-weight: 700; cursor: pointer; }
.vx-web-dns-more[open] summary { margin-bottom: .6rem; }
.vx-web-dns-more p { margin: 0 0 .6rem; font-size: .88rem; }
.vx-web-tips, .vx-web-steps { display: grid; gap: .55rem; margin: 0; color: var(--vx-ink-2); font-size: .88rem; }
.vx-web-tips { padding: 0; list-style: none; }
.vx-web-tips li { display: flex; gap: .6rem; }
.vx-web-tips i { flex: none; width: 1rem; margin-top: .2rem; color: var(--vx-accent-ink); text-align: center; }
.vx-web-steps { padding: 1.2rem 1.4rem .4rem 2.8rem; }
.vx-web-steps li::marker { color: var(--vx-accent-ink); font-weight: 800; }
.vx-web-note { margin: 0; padding: .2rem 1.4rem 1.2rem; color: var(--vx-ink-3); font-size: .8rem; }
.vx-web-kv dd a { color: var(--vx-accent-ink); }
@media (max-width: 767.98px) {
    .vx-web-sitejet-body { grid-template-columns: 1fr; }
    .vx-web-grid { grid-template-columns: 1fr; }
    .vx-web-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vx-web-dns-row { grid-template-columns: 3.2rem minmax(0, 1fr); }
    .vx-web-dns-row > :last-child { grid-column: 2; }
    .vx-web-dns-row.is-head > :last-child { display: none; }
}

/* 42. Bandeaux d'état : fiche service (includes/vx-service-alert.tpl) et incidents (status.vexcloud.fr) ─ */
.vx-svc-alert,
.vx-incident {
    --vx-a: var(--vx-accent-ink);
    --vx-a-soft: var(--vx-accent-soft);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
    padding: .9rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--vx-a) 35%, transparent);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-a-soft);
}
.vx-svc-alert.is-danger, .vx-incident.is-incident { --vx-a: var(--vx-danger); --vx-a-soft: var(--vx-danger-soft); }
.vx-svc-alert.is-warn, .vx-incident.is-maintenance { --vx-a: var(--vx-warn); --vx-a-soft: var(--vx-warn-soft); }
.vx-svc-alert-icon,
.vx-incident-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .8rem;
    background: var(--vx-surface);
    color: var(--vx-a);
    font-size: 1.05rem;
}
.vx-svc-alert-text,
.vx-incident-text { display: flex; flex: 1; flex-direction: column; gap: .1rem; min-width: 14rem; }
.vx-svc-alert-text strong,
.vx-incident-text strong { color: var(--vx-ink); font-size: .95rem; font-weight: 700; }
.vx-svc-alert-text span,
.vx-incident-text span { color: var(--vx-ink-2); font-size: .85rem; }
html body .vx-svc-alert-btn,
html body .vx-incident-link {
    padding: .5rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--vx-a);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
html body .vx-svc-alert-btn:hover,
html body .vx-incident-link:hover { color: #fff; filter: brightness(1.08); }
.vx-svc-alert.is-info .vx-svc-alert-btn, .vx-incident.is-planned .vx-incident-link { background: var(--vx-gradient); }
.vx-incident-slot[hidden] { display: none; }
.vx-incident-close {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--vx-ink-3);
    cursor: pointer;
}
.vx-incident-close:hover { background: var(--vx-surface); color: var(--vx-ink); }

/* 43. Accueil : carte « À faire » (includes/vx-home-todo.tpl) ─────── */
.vx-todo { overflow: hidden; border: 1px solid var(--vx-line); border-radius: 1.25rem; background: var(--vx-surface); box-shadow: var(--vx-shadow); }
.vx-todo-head { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--vx-line); }
html body .vx-todo-head h2 { margin: 0; color: var(--vx-ink); font-size: 1.05rem; font-weight: 700; }
.vx-todo-head-icon { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .65rem; background: var(--vx-accent-soft); color: var(--vx-accent-ink); }
.vx-todo-count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .45rem; border-radius: 999px; background: var(--vx-accent); color: #fff; font-size: .75rem; font-weight: 800; }
.vx-todo-list { margin: 0; padding: 0; list-style: none; }
.vx-todo-item { --vx-k: var(--vx-accent-ink); --vx-k-soft: var(--vx-accent-soft); display: flex; align-items: center; gap: .9rem; padding: .85rem 1.4rem; border-top: 1px solid var(--vx-line); }
.vx-todo-item:first-child { border-top: 0; }
.vx-todo-item:hover { background: var(--vx-surface-2); }
.vx-todo-item.is-invoice { --vx-k: var(--vx-warn); --vx-k-soft: var(--vx-warn-soft); }
.vx-todo-item.is-late, .vx-todo-item.is-suspended { --vx-k: var(--vx-danger); --vx-k-soft: var(--vx-danger-soft); }
.vx-todo-item.is-ticket { --vx-k: var(--vx-violet); --vx-k-soft: var(--vx-violet-soft); }
.vx-todo-icon { display: inline-grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: .75rem; background: var(--vx-k-soft); color: var(--vx-k); }
.vx-todo-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.vx-todo-text strong { overflow: hidden; color: var(--vx-ink); font-size: .92rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.vx-todo-text span { color: var(--vx-ink-3); font-size: .8rem; }
.vx-todo-item.is-late .vx-todo-text span, .vx-todo-item.is-suspended .vx-todo-text span { color: var(--vx-danger); font-weight: 600; }
html body .vx-todo-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: none;
    padding: .4rem .9rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: 999px;
    color: var(--vx-ink-2);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}
html body .vx-todo-btn:hover { border-color: var(--vx-accent); color: var(--vx-accent-ink); }
.vx-todo-item.is-invoice .vx-todo-btn { border-color: transparent; background: var(--vx-gradient); color: #fff; }
.vx-todo-empty { display: flex; align-items: center; gap: .55rem; margin: 0; padding: 1rem 1.4rem; color: var(--vx-ink-2); font-size: .9rem; }
.vx-todo-empty i { color: var(--vx-ok); }
@media (max-width: 575.98px) {
    .vx-todo-item { flex-wrap: wrap; padding: .85rem 1rem; }
    .vx-todo-text { flex: 1 1 calc(100% - 3.5rem); }
    .vx-todo-text strong { white-space: normal; }
    .vx-todo-btn { margin-left: 3.2rem; }
}

/* 44. Vérification DNS (page hébergement web) ───────────────────── */
.vx-web-dns-check { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0 0 1rem; }
.vx-web-dns-check small { color: var(--vx-ink-3); font-size: .78rem; }
html body .vx-web .vx-web-dns-check .btn.is-loading i { animation: vx-spin 1s linear infinite; }
@keyframes vx-spin { to { transform: rotate(360deg); } }
.vx-web-dns-result { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--vx-line); border-radius: .9rem; background: var(--vx-bg); color: var(--vx-ink-2); font-size: .86rem; }
.vx-web-dns-result[hidden] { display: none; }
.vx-web-dns-result.is-ok { border-color: color-mix(in srgb, var(--vx-ok) 40%, transparent); background: var(--vx-ok-soft); }
.vx-web-dns-result.is-bad { border-color: color-mix(in srgb, var(--vx-warn) 45%, transparent); background: var(--vx-warn-soft); }
.vx-web-dns-result ul { display: grid; gap: .35rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.vx-web-dns-result li { display: flex; align-items: baseline; gap: .45rem; overflow-wrap: anywhere; }
.vx-web-dns-result li strong { color: var(--vx-ink); font-family: var(--vx-mono); font-size: .82rem; }
.vx-web-dns-result li.is-ok i { color: var(--vx-ok); }
.vx-web-dns-result li.is-warn i { color: var(--vx-warn); }
.vx-web-dns-result li.is-bad i { color: var(--vx-danger); }
.vx-web-dns-result p { margin: 0; color: var(--vx-ink-3); font-size: .8rem; }

/* 45. VPS : adresses IP (synthèse, tout copier, IP principale, colonnes vides masquées) ─ */
html body #layers2 .vx-ip-widget .lu-widget__top { flex-wrap: wrap; gap: .5rem 1rem; }
html body #layers2 .vx-ip-bar { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
html body #layers2 .vx-ip-sum { color: var(--vx-ink-3); font-family: var(--vx-font); font-size: .8rem; font-weight: 600; }
html body #layers2 .vx-ip-copyall {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border: 1px solid var(--vx-line-strong);
    border-radius: 999px;
    background: var(--vx-surface);
    color: var(--vx-ink-2);
    font-family: var(--vx-font);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}
html body #layers2 .vx-ip-copyall:hover { border-color: var(--vx-accent); color: var(--vx-accent-ink); }
html body #layers2 .vx-ip-copyall.vx-copied { border-color: var(--vx-ok); background: var(--vx-ok-soft); color: var(--vx-ok); }
html body #layers2 .vx-ip-copyall.vx-copied span { font-size: 0; }
html body #layers2 .vx-ip-copyall.vx-copied span::after { content: "Copié"; font-size: .78rem; }
html:lang(en) body #layers2 .vx-ip-copyall.vx-copied span::after { content: "Copied"; }
html body #layers2 table.vx-ip-table .vx-col-empty { display: none; }
html body #layers2 table.vx-ip-table tbody tr.vx-ip-main td { background: var(--vx-accent-soft); }
html body #layers2 table.vx-ip-table tbody tr.vx-ip-main td:first-child { box-shadow: inset 3px 0 0 var(--vx-accent); color: var(--vx-accent-ink); }
.vx-web-card-body .vx-web-dns-result p:last-of-type { margin-bottom: 0; }
.vx-svc-alert.is-ok { --vx-a: var(--vx-ok); --vx-a-soft: var(--vx-ok-soft); }
html body .vx-svc-alert-btn.is-ghost { border: 1px solid var(--vx-a); background: var(--vx-surface); color: var(--vx-a); }
html body .vx-svc-alert-btn.is-ghost:hover { background: var(--vx-a); color: #fff; }

/* 46. Hébergement web : réglages de messagerie ─────────────────── */
.vx-web-mail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.vx-web-mail-box { padding: .9rem 1rem; border: 1px solid var(--vx-line); border-radius: .9rem; background: var(--vx-bg); }
html body .vx-web-mail-box h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; color: var(--vx-ink); font-size: .9rem; font-weight: 700; }
.vx-web-mail-box h3 i { color: var(--vx-accent-ink); }
.vx-web-mail-box dl { display: grid; gap: .4rem; margin: 0; }
.vx-web-mail-box dl > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.vx-web-mail-box dt { color: var(--vx-ink-3); font-size: .8rem; font-weight: 600; }
.vx-web-mail-box dd { margin: 0; color: var(--vx-ink); font-size: .85rem; font-weight: 700; }
.vx-web-mail-box dd > code { color: var(--vx-ink); font-family: var(--vx-mono); font-size: .85rem; background: none; padding: 0; }

/* 47. VPS : sauvegardes automatiques ───────────────────────────── */
html body #layers2 .vx-vps .vx-vps-backup { display: flex; align-items: flex-start; gap: .9rem; }
html body #layers2 .vx-vps .vx-vps-backup-icon { display: inline-grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: .8rem; background: var(--vx-ok-soft); color: var(--vx-ok); }
html body #layers2 .vx-vps .vx-vps-backup-text { display: flex; flex-direction: column; gap: .2rem; }
html body #layers2 .vx-vps .vx-vps-backup-text strong { color: var(--vx-ink); font-size: .95rem; }
html body #layers2 .vx-vps .vx-vps-backup-text span { color: var(--vx-ink-3); font-size: .84rem; }
html body #layers2 .vx-vps .vx-vps-backup-text strong { font-weight: 700; }
/* messagerie : le nom du serveur ne se coupe jamais ; s'il manque de place, il passe sous « Serveur » */
.vx-web-mail-box dl > div { flex-wrap: wrap; }
.vx-web-mail-box dd { margin-left: auto; }
html body .vx-web-mail-box .vx-web-copy code { white-space: nowrap; overflow-wrap: normal; }
.vx-web-mail-box { padding: .85rem .8rem; }
.vx-web-mail-box dl > div { gap: .4rem; }
html body .vx-web-mail-box .vx-web-copy { gap: .35rem; padding: .25rem .5rem; }
html body .vx-web-mail-box .vx-web-copy code { font-size: .8rem; }