/* =========================================================
   SPECTRAVISION - ESPACE CLIENT V3
   ========================================================= */

body.sv-account-v3-body {
    margin: 0 !important;
    padding: 0 !important;
    background: #05070c;
    color: #f6f7fb;
    overflow-x: hidden;
}

body.sv-account-v3-body #wpadminbar {
    display: none !important;
}

html:has(body.sv-account-v3-body) {
    margin-top: 0 !important;
}

.sv3-app,
.sv3-app * {
    box-sizing: border-box;
}

.sv3-app {
    --bg: #05070c;
    --panel: #0c1119;
    --panel2: #101621;
    --border: rgba(161,177,205,.17);
    --muted: #9ca7bb;
    --purple: #a04dff;
    --purple2: #6522c5;
    --blue: #5591ff;
    --green: #58db8c;
    --orange: #ff9659;

    min-height: 100vh;
    color: #f8f9fc;
    background:
        radial-gradient(circle at 75% 0%, rgba(72,32,128,.18), transparent 28%),
        #05070c;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* TOPBAR */

.sv3-topbar {
    height: 86px;
    padding: 0 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(170,140,220,.18);

    background:
        linear-gradient(
            90deg,
            #05070c 0%,
            #080b13 55%,
            #0b0f1a 100%
        );
}

.sv3-brand {
    color: #fff;
    text-decoration: none;
}

.sv3-brand strong {
    display: block;
    font-size: 29px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .11em;
}

.sv3-brand small {
    display: block;
    margin-top: 9px;

    color: #d3b5ff;
    font-size: 8px;
    letter-spacing: .42em;
    text-align: center;
}

.sv3-top-user {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sv3-top-user img {
    width: 48px;
    height: 48px;

    border-radius: 50%;
    border: 1px solid #8792ab;
}

.sv3-user-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sv3-user-text strong {
    font-size: 14px;
}

.sv3-user-text small {
    color: var(--muted);
    font-size: 12px;
}

.sv3-notification {
    position: relative;

    width: 40px;
    height: 40px;

    color: #fff;
    background: transparent;
    border: 0;

    font-size: 22px;
}

.sv3-notification span {
    position: absolute;
    right: 6px;
    top: 5px;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #e53f51;
}

/* LAYOUT */

.sv3-layout {
    display: grid;
    grid-template-columns: 264px minmax(0,1fr);
}

.sv3-sidebar {
    position: sticky;
    top: 0;

    min-height: calc(100vh - 86px);
    height: calc(100vh - 86px);

    padding: 25px 12px 18px;

    display: flex;
    flex-direction: column;

    border-right: 1px solid var(--border);

    background:
        linear-gradient(
            180deg,
            rgba(9,13,21,.99),
            rgba(5,8,14,.99)
        );
}

.sv3-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sv3-nav a {
    position: relative;

    min-height: 42px;
    padding: 10px 14px;

    display: flex;
    align-items: center;
    gap: 12px;

    border-radius: 4px;

    color: #c5ccda;
    text-decoration: none;

    font-size: 13px;
    font-weight: 500;
}

.sv3-nav a:hover {
    color: #fff;
    background: rgba(137,73,221,.11);
}

.sv3-nav a.active {
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(124,52,205,.50),
            rgba(65,45,109,.25)
        );
}

.sv3-nav a > span {
    width: 20px;
    text-align: center;
    font-size: 17px;
}

.sv3-nav a.sv3-sub {
    padding-left: 21px;
}

.sv3-nav-separator {
    height: 1px;
    margin: 8px 10px;

    background: rgba(255,255,255,.10);
}

.sv3-badge {
    margin-left: auto;

    min-width: 20px;
    height: 20px;
    padding: 0 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50px;

    color: #fff;
    background: #dc3f52;

    font-size: 11px;
}

.sv3-sidebar-bottom {
    margin-top: auto;
}

.sv3-sidebar-message {
    margin: 20px 16px;
    padding: 18px 0;

    display: flex;
    flex-direction: column;
    gap: 5px;

    color: #d6c5ef;
    font-size: 11px;
    letter-spacing: .16em;
}

.sv3-sidebar-message strong {
    color: #fff;
}

.sv3-logout {
    display: block;

    padding: 17px 14px 3px;

    border-top: 1px solid var(--border);

    color: #d9dce5;
    text-decoration: none;

    font-size: 13px;
}

/* MAIN */

.sv3-main {
    min-width: 0;
    padding: 30px 28px 24px;
}

.sv3-welcome {
    min-height: 92px;

    display: grid;
    grid-template-columns: minmax(0,1fr) 390px;
    align-items: center;
    gap: 20px;
}

.sv3-welcome h1 {
    margin: 0 0 8px;

    color: #fff;
    font-size: 32px;
    line-height: 1.1;
}

.sv3-welcome p {
    margin: 0;

    color: var(--muted);
    font-size: 14px;
}

.sv3-welcome-visual {
    min-height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at right,
            rgba(121,48,180,.22),
            transparent 55%
        );
}

.sv3-welcome blockquote {
    margin: 0;

    color: #d5b4ff;

    font-family: Georgia, serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
}

/* STATS */

.sv3-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;

    margin: 0 0 14px;
}

.sv3-stat {
    min-height: 88px;
    padding: 12px;

    display: flex;
    align-items: center;
    gap: 14px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(16,22,33,.98),
            rgba(10,14,22,.98)
        );
}

.sv3-stat-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    font-size: 25px;
}

.sv3-stat-icon.purple {
    color: #d8b5ff;
    background: linear-gradient(145deg,#552099,#321264);
}

.sv3-stat-icon.orange {
    background: linear-gradient(145deg,#803f21,#43200f);
}

.sv3-stat-icon.blue {
    background: linear-gradient(145deg,#244d91,#12274c);
}

.sv3-stat-icon.green {
    background: linear-gradient(145deg,#246b40,#123a23);
}

.sv3-stat > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.sv3-stat strong {
    font-size: 26px;
    line-height: 1;
}

.sv3-stat span {
    margin-top: 6px;

    color: #d5d9e2;
    font-size: 12px;
}

.sv3-stat > b {
    margin-left: auto;

    color: #bac4d8;
    font-size: 25px;
    font-weight: 300;
}

/* PANELS */

.sv3-primary-grid {
    display: grid;
    grid-template-columns: 1.35fr .95fr 1.1fr;
    gap: 10px;

    margin-bottom: 10px;
}

.sv3-secondary-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.05fr 1.05fr;
    gap: 10px;

    margin-bottom: 10px;
}

.sv3-panel {
    min-width: 0;
    padding: 15px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(11,16,24,.99),
            rgba(7,11,17,.99)
        );
}

.sv3-panel h2 {
    margin: 0 0 14px;
    padding-bottom: 12px;

    border-bottom: 1px solid rgba(255,255,255,.10);

    color: #fff;
    font-size: 16px;
}

.sv3-panel h3 {
    margin: 0;

    font-size: 15px;
}

/* PROJECT */

.sv3-project-content {
    display: grid;
    grid-template-columns: 43% minmax(0,1fr);
    gap: 13px;
}

.sv3-project-content > img {
    width: 100%;
    height: 171px;

    object-fit: cover;

    border-radius: 5px;
}

.sv3-project-info p,
.sv3-order-content p {
    margin: 9px 0;

    color: #b9c1d0;
    font-size: 12px;
}

.sv3-title-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sv3-title-status span {
    padding: 5px 9px;

    border-radius: 20px;

    color: #fff;
    background: #6523ca;

    font-size: 10px;
    white-space: nowrap;
}

.sv3-thumbnails {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;

    margin-top: 8px;
}

.sv3-thumbnails img {
    width: 100%;
    height: 42px;

    object-fit: cover;

    border-radius: 4px;
}

/* ORDER */

.sv3-order-content {
    display: grid;
    grid-template-columns: 42% minmax(0,1fr);
    gap: 12px;
}

.sv3-order-content > img {
    width: 100%;
    height: 171px;

    object-fit: cover;

    border-radius: 5px;
    background: #171b22;
}

.sv3-order-content strong {
    display: block;
    margin: 5px 0 13px;

    color: #aab4c6;
    font-size: 11px;
}

.sv3-status-blue {
    display: inline-block;

    padding: 5px 9px;

    border-radius: 20px;

    color: #bcd6ff;
    background: #102c50;

    font-size: 10px;
}

/* BUTTON */

.sv3-button {
    min-height: 36px;
    margin-top: 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #536078;
    border-radius: 5px;

    color: #fff;
    text-decoration: none;

    font-size: 12px;
}

.sv3-button.purple {
    border-color: #873be1;

    background:
        linear-gradient(
            90deg,
            rgba(91,28,159,.55),
            rgba(50,20,92,.40)
        );
}

/* PAYMENT */

.sv3-payment-top {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 11px;
}

.sv3-progress {
    width: 82px;
    height: 82px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(circle,#0d121a 55%,transparent 57%),
        conic-gradient(#5ddd8a 0 30%,#273244 30% 100%);
}

.sv3-progress strong {
    font-size: 18px;
}

.sv3-payment-top > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sv3-payment-top span {
    color: #cbd1dc;
    font-size: 12px;
}

.sv3-payment-top > div:last-child strong {
    font-size: 16px;
}

.sv3-payment-row {
    min-height: 38px;

    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;

    border-top: 1px solid rgba(255,255,255,.08);

    font-size: 11px;
}

.sv3-payment-row span {
    color: #c6ccd8;
}

.sv3-payment-row b {
    color: #71df99;
    font-weight: 500;
}

.sv3-payment-row b.waiting {
    color: #ffad58;
}

/* MESSAGES */

.sv3-message {
    min-height: 58px;

    display: grid;
    grid-template-columns: 36px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sv3-message > div {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: #242a35;
}

.sv3-message p {
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sv3-message p strong {
    font-size: 12px;
}

.sv3-message p span,
.sv3-message small {
    color: #9ba6b9;
    font-size: 10px;
}

/* FILES */

.sv3-file {
    min-height: 48px;

    display: grid;
    grid-template-columns: 28px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sv3-file > span {
    width: 26px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 4px;

    color: #fff;
}

.sv3-file > span.purple {
    background: #7130d1;
}

.sv3-file > span.red {
    background: #d64848;
}

.sv3-file > span.green {
    background: #39aa67;
}

.sv3-file strong {
    font-size: 11px;
    font-weight: 500;
}

.sv3-file small {
    color: #8e9aaf;
    font-size: 10px;
}

/* APPOINTMENTS */

.sv3-appointment {
    min-height: 63px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sv3-appointment > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sv3-appointment strong {
    font-size: 11px;
}

.sv3-appointment span {
    color: #9ba6b8;
    font-size: 10px;
}

.sv3-appointment > b {
    min-width: 72px;
    padding: 5px 10px;

    border-radius: 20px;

    color: #c7dcff;
    background: #173a70;

    text-align: center;
    font-size: 10px;
    font-weight: 500;
}

.sv3-text-link {
    min-height: 34px;

    display: flex;
    align-items: end;
    justify-content: center;

    color: #7ebdff;
    text-decoration: none;

    font-size: 10px;
}

/* SHORTCUTS */

.sv3-shortcuts {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 3px;

    margin-top: 13px;
}

.sv3-shortcuts > a {
    min-height: 82px;
    padding: 13px 16px;

    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;

    border: 1px solid rgba(255,255,255,.10);

    color: #fff;
    text-decoration: none;

    background:
        linear-gradient(
            110deg,
            #151017,
            #371511
        );
}

.sv3-shortcuts > a:last-child {
    background:
        linear-gradient(
            110deg,
            #15101d,
            #281044
        );
}

.sv3-shortcuts > a > span {
    font-size: 27px;
}

.sv3-shortcuts div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sv3-shortcuts strong {
    font-size: 12px;
}

.sv3-shortcuts small {
    color: #aeb4c2;
    font-size: 10px;
    line-height: 1.4;
}

.sv3-shortcuts > a > b {
    font-size: 24px;
    font-weight: 300;
}

/* FOOTER */

.sv3-footer {
    min-height: 65px;
    margin-top: 14px;
    padding-top: 14px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;

    border-top: 1px solid var(--border);
}

.sv3-footer > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sv3-footer > div strong {
    letter-spacing: .18em;
    font-size: 12px;
}

.sv3-footer > div small {
    color: #929bac;
    font-size: 9px;
}

.sv3-footer nav {
    display: flex;
    gap: 18px;
}

.sv3-footer nav a {
    color: #9ea8ba;
    text-decoration: none;
    font-size: 9px;
}

.sv3-footer em {
    justify-self: end;

    color: #9c8ab9;
    font-size: 9px;
}

.sv3-hidden-targets {
    height: 0;
    overflow: hidden;
}

/* LOGIN */

.sv-client-login {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 30px;

    color: #fff;
    background: #06080e;
}

.sv-client-login-card {
    width: min(450px,100%);
    padding: 38px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;

    background: #0d1119;
}

.sv-client-login-card input[type="text"],
.sv-client-login-card input[type="password"] {
    width: 100%;
    min-height: 45px;
}

.sv-client-login-card input[type="submit"] {
    min-height: 45px;

    color: #fff;
    background: #7430c9;

    border: 0;
}

/* RESPONSIVE */

@media (max-width: 1150px) {

    .sv3-primary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sv3-payment {
        grid-column: 1 / -1;
    }

    .sv3-secondary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sv3-secondary-grid > article:last-child {
        grid-column: 1 / -1;
    }

    .sv3-welcome {
        grid-template-columns: 1fr;
    }

    .sv3-welcome-visual {
        display: none;
    }

}

@media (max-width: 900px) {

    .sv3-layout {
        display: block;
    }

    .sv3-sidebar {
        position: relative;

        width: 100%;
        height: auto;
        min-height: 0;
    }

    .sv3-nav {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .sv3-sidebar-message {
        display: none;
    }

    .sv3-stats,
    .sv3-shortcuts {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

}

@media (max-width: 650px) {

    .sv3-topbar {
        height: 72px;
        padding: 0 15px;
    }

    .sv3-brand strong {
        font-size: 19px;
    }

    .sv3-user-text {
        display: none;
    }

    .sv3-main {
        padding: 22px 14px;
    }

    .sv3-nav,
    .sv3-stats,
    .sv3-primary-grid,
    .sv3-secondary-grid,
    .sv3-shortcuts {
        grid-template-columns: 1fr;
    }

    .sv3-payment {
        grid-column: auto;
    }

    .sv3-secondary-grid > article:last-child {
        grid-column: auto;
    }

    .sv3-project-content,
    .sv3-order-content {
        grid-template-columns: 1fr;
    }

    .sv3-project-content > img,
    .sv3-order-content > img {
        height: 220px;
    }

    .sv3-footer {
        grid-template-columns: 1fr;
    }

    .sv3-footer em {
        justify-self: start;
    }

}

/* =========================================================
   ESPACE CLIENT V3 - MANOIRS
   ========================================================= */

/* MANOIR EN HAUT A DROITE */
.sv3-welcome-visual {
    position: relative;
    overflow: hidden;
    min-height: 90px;

    background-image:
        linear-gradient(
            90deg,
            #05070c 0%,
            rgba(5,7,12,.75) 25%,
            rgba(5,7,12,.15) 70%,
            rgba(5,7,12,.05) 100%
        ),
        var(--svdm-account-header);

    background-position: center, center right;
    background-size: cover, cover;
    background-repeat: no-repeat;
}

.sv3-welcome-visual blockquote {
    position: relative;
    z-index: 2;

    text-shadow:
        0 2px 5px #000,
        0 0 12px rgba(0,0,0,.9);
}


/* MANOIR EN BAS A GAUCHE */
.sv3-sidebar-bottom {
    position: relative;
    overflow: hidden;

    min-height: 245px;

    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -18px;

    background-image:
        linear-gradient(
            180deg,
            rgba(5,8,14,.10) 0%,
            rgba(5,8,14,.20) 40%,
            rgba(5,8,14,.62) 100%
        ),
        var(--svdm-account-sidebar);

    background-position: center, center 38%;
    background-size: cover, cover;
    background-repeat: no-repeat;
}

.sv3-sidebar-bottom::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,6,12,.30),
            rgba(3,6,12,.04)
        );

    pointer-events: none;
}

.sv3-sidebar-message {
    position: relative;
    z-index: 2;

    margin: 32px 25px 15px;

    color: #eee6ff;

    text-shadow:
        0 2px 6px #000,
        0 0 10px rgba(0,0,0,.9);
}

.sv3-logout {
    position: relative;
    z-index: 2;

    margin-left: 12px;
    margin-right: 12px;
}

/* =========================================================
   V3 - CADRAGE FINAL MANOIRS
   ========================================================= */

/* GRAND BANDEAU MANOIR EN HAUT */
.sv3-welcome {
    position: relative;
    overflow: hidden;
}

.sv3-welcome-visual {
    align-self: stretch;
    min-height: 110px;

    margin-top: -15px;
    margin-bottom: -5px;
    margin-right: 0;

    background-image:
        linear-gradient(
            90deg,
            #05070c 0%,
            rgba(5,7,12,.92) 8%,
            rgba(5,7,12,.52) 30%,
            rgba(5,7,12,.12) 70%,
            rgba(5,7,12,.03) 100%
        ),
        var(--svdm-account-header);

    background-position:
        center,
        68% 48%;

    background-size:
        cover,
        cover;

    border-radius: 0;
}

.sv3-welcome blockquote {
    margin-left: 30px;
    margin-right: 20px;
}


/* MANOIR SIDEBAR PLUS VISIBLE */
.sv3-sidebar-bottom {
    min-height: 300px;

    background-image:
        linear-gradient(
            180deg,
            rgba(5,8,14,.05) 0%,
            rgba(5,8,14,.12) 30%,
            rgba(5,8,14,.55) 100%
        ),
        var(--svdm-account-sidebar);

    background-position:
        center,
        center 20%;

    background-size:
        cover,
        cover;
}

.sv3-sidebar-message {
    margin-top: 25px;
    padding-top: 10px;
}

/* =========================================================
   V3 - MANOIRS VERSION FINALE
   ========================================================= */

/* ---------------------------------------------------------
   HERO : l'image s'étend sur toute la partie droite
   --------------------------------------------------------- */

.sv3-welcome {
    position: relative;
    isolation: isolate;

    min-height: 110px;

    overflow: hidden;

    grid-template-columns: minmax(0, 1fr) 500px;

    background:
        linear-gradient(
            90deg,
            #05070c 0%,
            #05070c 52%,
            rgba(5,7,12,.88) 63%,
            rgba(5,7,12,.28) 82%,
            rgba(5,7,12,.04) 100%
        ),
        var(--svdm-account-header);

    background-repeat: no-repeat;
    background-size: cover, 590px 148px;
    background-position: center, right center;
}

.sv3-welcome > div:first-child {
    position: relative;
    z-index: 2;
}

.sv3-welcome-visual {
    position: relative;
    z-index: 2;

    min-height: 110px;

    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: none !important;

    overflow: visible;
}

.sv3-welcome-visual::after {
    display: none !important;
}

.sv3-welcome blockquote {
    margin: 0 18px 0 65px;

    color: #e7c6ff;

    text-shadow:
        0 2px 6px #000,
        0 0 16px #000;
}


/* ---------------------------------------------------------
   SIDEBAR : vraie zone image comme dans la maquette
   --------------------------------------------------------- */

.sv3-sidebar {
    overflow: hidden;
}

.sv3-sidebar-bottom {
    position: relative;

    min-height: 245px;

    margin:
        12px
        -12px
        -18px;

    padding-top: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5,8,14,.06) 0%,
            rgba(5,8,14,.12) 28%,
            rgba(5,8,14,.48) 72%,
            rgba(5,8,14,.82) 100%
        ),
        var(--svdm-account-sidebar)
        center 29% / cover no-repeat;
}

.sv3-sidebar-bottom::before {
    background:
        linear-gradient(
            90deg,
            rgba(5,8,14,.20),
            rgba(5,8,14,.02)
        );
}

.sv3-sidebar-message {
    position: absolute;

    left: 24px;
    bottom: 53px;

    z-index: 2;

    margin: 0;
    padding: 0;

    line-height: 1.45;

    color: #f0e8ff;

    text-shadow:
        0 2px 7px #000,
        0 0 12px #000;
}

.sv3-logout {
    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 9px;

    z-index: 3;

    margin: 0;

    background: rgba(5,8,14,.58);
}


/* ---------------------------------------------------------
   Écrans intermédiaires
   --------------------------------------------------------- */

@media (max-width: 1300px) {

    .sv3-welcome {
        grid-template-columns: minmax(0,1fr) 410px;

        background-size:
            cover,
            500px 130px;
    }

}

/* =========================================================
   V3 - SIDEBAR MANOIR VISIBLE EN ENTIER
   ========================================================= */

.sv3-sidebar {
    position: relative !important;
    top: auto !important;

    height: auto !important;
    min-height: calc(100vh - 86px) !important;

    padding-bottom: 0 !important;

    overflow: visible !important;
}

.sv3-sidebar-bottom {
    margin-top: 18px !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    margin-bottom: 0 !important;

    width: calc(100% + 24px);

    min-height: 300px !important;

    background-position:
        center,
        center 25% !important;

    background-size:
        cover,
        cover !important;
}

.sv3-sidebar-message {
    left: 25px !important;
    bottom: 65px !important;
}

.sv3-logout {
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
}

/* =========================================================
   V3 - LOGO SPECTRAVISION IMAGE
   ========================================================= */

.sv3-brand-image {
    width: 310px;
    height: 72px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.sv3-brand-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: left center;

    filter:
        drop-shadow(0 0 5px rgba(161,78,255,.30))
        drop-shadow(0 0 12px rgba(122,45,220,.20));
}

@media (max-width: 650px) {

    .sv3-brand-image {
        width: 220px;
        height: 55px;
    }

}

/* =========================================================
   V3 - VRAI LOGO SPECTRAVISION
   ========================================================= */

.sv3-brand-image {
    width: 330px !important;
    height: 78px !important;

    display: flex !important;
    align-items: center !important;

    overflow: visible !important;
}

.sv3-brand-image img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: contain !important;
    object-position: left center !important;

    filter:
        drop-shadow(0 0 4px rgba(105,125,255,.35))
        drop-shadow(0 0 9px rgba(169,61,255,.28));
}

@media (max-width: 650px) {

    .sv3-brand-image {
        width: 230px !important;
        height: 62px !important;
    }

}

/* =========================================================
   V3 - ICONES DASHICONS
   ========================================================= */

.sv3-nav a > .dashicons {
    width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 19px;
    line-height: 1;

    color: #b9c5db;
}

.sv3-nav a.active > .dashicons {
    color: #cf9cff;

    text-shadow:
        0 0 8px rgba(164,85,255,.55);
}

.sv3-nav a:hover > .dashicons {
    color: #fff;
}

.sv3-stat-icon .dashicons {
    width: auto;
    height: auto;

    font-size: 27px;
    line-height: 1;

    color: #fff;
}

.sv3-message .dashicons {
    width: auto;
    height: auto;

    font-size: 17px;
    line-height: 1;

    color: #c79bff;
}

.sv3-shortcuts > a > .dashicons {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 27px;
    line-height: 1;

    color: #fff;

    text-shadow:
        0 0 10px rgba(140,79,255,.35);
}

.sv3-nav .sv3-sub > .dashicons {
    font-size: 17px;
    opacity: .9;
}

/* ==================================================
   V3 - Cartes principales plus compactes
   ================================================== */

.sv3-main-grid {
    align-items: start;
}

.sv3-main-grid > .sv3-panel {
    min-height: 0 !important;
    height: auto !important;
}

.sv3-main-grid .sv3-panel {
    padding-top: 16px;
    padding-bottom: 16px;
}

.sv3-main-grid .sv3-panel h2 {
    margin-top: 0;
    margin-bottom: 12px;
}

#automates .sv3-payment-row {
    padding-top: 10px;
    padding-bottom: 10px;
}

#automates .sv3-button {
    margin-top: 12px;
}


/* ==================================================
   V3 - Alignement des cartes principales
   ================================================== */

.sv3-main-grid {
    align-items: stretch !important;
}

.sv3-main-grid > .sv3-panel {
    height: 100% !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
}

.sv3-main-grid > .sv3-panel > .sv3-button {
    margin-top: auto;
}

#automates .sv3-button {
    margin-top: auto;
}


/* ==================================================
   V3 - 4 cartes principales sur une seule ligne
   ================================================== */

.sv3-main-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.sv3-main-grid > .sv3-panel {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
}

/* Cartes plus compactes pour tenir sur 4 colonnes */

.sv3-main-grid .sv3-panel {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.sv3-main-grid .sv3-project {
    gap: 10px !important;
}

.sv3-main-grid .sv3-project-image {
    width: 110px !important;
    min-width: 110px !important;
}

.sv3-main-grid .sv3-project-image img {
    width: 110px !important;
    height: 145px !important;
    object-fit: cover !important;
}

.sv3-main-grid h2 {
    font-size: 16px !important;
}

.sv3-main-grid p,
.sv3-main-grid span,
.sv3-main-grid small,
.sv3-main-grid strong,
.sv3-main-grid b {
    font-size: 12px;
}

/* Paiements : compact pour rester sur la même ligne */

#paiements .sv3-payment-top {
    gap: 10px !important;
}

#paiements .sv3-progress {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
}

#paiements .sv3-payment-row {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Responsive */

@media (max-width: 1350px) {
    .sv3-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 800px) {
    .sv3-main-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==================================================
   V3 - 4 cartes principales sur une seule ligne
   ================================================== */

.sv3-main-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.sv3-main-grid > .sv3-panel {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
}

/* Cartes plus compactes pour tenir sur 4 colonnes */

.sv3-main-grid .sv3-panel {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.sv3-main-grid .sv3-project {
    gap: 10px !important;
}

.sv3-main-grid .sv3-project-image {
    width: 110px !important;
    min-width: 110px !important;
}

.sv3-main-grid .sv3-project-image img {
    width: 110px !important;
    height: 145px !important;
    object-fit: cover !important;
}

.sv3-main-grid h2 {
    font-size: 16px !important;
}

.sv3-main-grid p,
.sv3-main-grid span,
.sv3-main-grid small,
.sv3-main-grid strong,
.sv3-main-grid b {
    font-size: 12px;
}

/* Paiements : compact pour rester sur la même ligne */

#paiements .sv3-payment-top {
    gap: 10px !important;
}

#paiements .sv3-progress {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
}

#paiements .sv3-payment-row {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Responsive */

@media (max-width: 1350px) {
    .sv3-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 800px) {
    .sv3-main-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==================================================
   V3 - Paiements dans la 4e colonne
   ================================================== */

.sv3-main-grid > .sv3-payment,
.sv3-main-grid > #paiements {
    grid-column: auto !important;
    grid-row: auto !important;
}


/* ==================================================
   V3 - 4 cartes principales sur une seule ligne
   CORRECTION : vraie classe = sv3-primary-grid
   ================================================== */

.sv3-primary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.sv3-primary-grid > .sv3-panel {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
}

.sv3-primary-grid > .sv3-panel > .sv3-button {
    margin-top: auto !important;
}

/* Paiements ne prend plus toute la ligne */

.sv3-primary-grid > .sv3-payment,
.sv3-primary-grid > #paiements {
    grid-column: auto !important;
    grid-row: auto !important;
}

/* Contenu plus compact dans les 4 colonnes */

.sv3-primary-grid .sv3-panel {
    padding: 14px !important;
}

.sv3-primary-grid h2 {
    font-size: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* Responsive */

@media (max-width: 1350px) {
    .sv3-primary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 800px) {
    .sv3-primary-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==================================================
   ESPACE CLIENT - AFFICHAGE DES MODULES
   Un seul module détaillé visible à la fois
   ================================================== */

.sv3-detail-module {
    display: none !important;
}

.sv3-detail-module.sv3-module-active {
    display: block !important;
}

/* Quand un module est ouvert, éviter que les autres
   éléments de la zone secondaire restent affichés. */

.sv3-secondary-grid.sv3-module-view {
    display: block !important;
}

.sv3-secondary-grid.sv3-module-view > .sv3-detail-module {
    width: 100% !important;
}



/* =========================================================
   ESPACE CLIENT V3
   BLOCS PROJETS : PACKS / MAPPINGS / TABLEAUX VIVANTS
   ========================================================= */

#packs,
#mappings,
#tableaux {
    width: 100%;
}


/* ---------------------------------------------------------
   TITRE DU MODULE
   --------------------------------------------------------- */

#packs > h2,
#mappings > h2,
#tableaux > h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

#packs > h2 .dashicons,
#mappings > h2 .dashicons,
#tableaux > h2 .dashicons {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 10px;
    background: rgba(139, 92, 246, .12);
    border: 1px solid rgba(139, 92, 246, .24);
}


/* ---------------------------------------------------------
   VRAIES CARTES
   --------------------------------------------------------- */

#packs .sv3-payment-row,
#mappings .sv3-payment-row,
#tableaux .sv3-payment-row {
    position: relative;

    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(120px, auto)
        minmax(130px, auto);

    align-items: center;

    gap: 22px;

    width: 100%;

    margin: 0 0 14px 0;
    padding: 20px 22px !important;

    border-radius: 16px;

    border:
        1px solid
        rgba(148, 163, 184, .13);

    background:
        linear-gradient(
            135deg,
            rgba(15, 23, 42, .82),
            rgba(18, 15, 35, .78)
        );

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, .12);

    overflow: hidden;
}


/* petite ligne lumineuse */

#packs .sv3-payment-row::before,
#mappings .sv3-payment-row::before,
#tableaux .sv3-payment-row::before {
    content: "";

    position: absolute;

    left: 0;
    top: 16px;
    bottom: 16px;

    width: 3px;

    border-radius: 0 4px 4px 0;

    background:
        linear-gradient(
            180deg,
            #8b5cf6,
            #6d28d9
        );

    opacity: .85;
}


/* ---------------------------------------------------------
   COLONNE PRINCIPALE
   --------------------------------------------------------- */

#packs .sv3-payment-row > span,
#mappings .sv3-payment-row > span,
#tableaux .sv3-payment-row > span {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;
}


/* nom du projet */

#packs .sv3-payment-row > span > strong,
#mappings .sv3-payment-row > span > strong,
#tableaux .sv3-payment-row > span > strong {
    display: block;

    font-size: 16px;
    line-height: 1.35;

    color: #ffffff;
}


/* détails */

#packs .sv3-payment-row small,
#mappings .sv3-payment-row small,
#tableaux .sv3-payment-row small {
    display: block;

    margin: 0;

    font-size: 13px;
    line-height: 1.55;

    color: rgba(226, 232, 240, .72);

    white-space: normal;
}


/* ---------------------------------------------------------
   VALEUR IMPORTANTE
   --------------------------------------------------------- */

#packs .sv3-payment-row > strong,
#mappings .sv3-payment-row > strong,
#tableaux .sv3-payment-row > strong {
    justify-self: end;

    font-size: 15px;

    color: #f8fafc;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   BADGE ETAT
   --------------------------------------------------------- */

#packs .sv3-payment-row > b,
#mappings .sv3-payment-row > b,
#tableaux .sv3-payment-row > b {
    justify-self: end;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

    color: #ddd6fe;

    background:
        rgba(124, 58, 237, .13);

    border:
        1px solid
        rgba(139, 92, 246, .28);
}


#packs .sv3-payment-row > b.waiting,
#mappings .sv3-payment-row > b.waiting,
#tableaux .sv3-payment-row > b.waiting {
    color: #fde68a;

    background:
        rgba(245, 158, 11, .09);

    border-color:
        rgba(245, 158, 11, .22);
}


/* ---------------------------------------------------------
   TABLEAUX VIVANTS - PHOTO
   --------------------------------------------------------- */

#tableaux img {
    display: block;

    width: 160px !important;
    max-width: 100%;

    height: 190px;
    max-height: none !important;

    object-fit: cover;

    border-radius: 15px !important;

    border:
        1px solid
        rgba(139, 92, 246, .28);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, .22);
}


/* ---------------------------------------------------------
   SEPARATION ENTRE PLUSIEURS PROJETS
   --------------------------------------------------------- */

#packs .sv3-payment-row + .sv3-payment-row,
#mappings .sv3-payment-row + .sv3-payment-row,
#tableaux .sv3-payment-row + .sv3-payment-row {
    margin-top: 8px;
}


/* ---------------------------------------------------------
   SURVOL DESKTOP
   --------------------------------------------------------- */

@media (hover: hover) {

    #packs .sv3-payment-row,
    #mappings .sv3-payment-row,
    #tableaux .sv3-payment-row {
        transition:
            transform .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;
    }

    #packs .sv3-payment-row:hover,
    #mappings .sv3-payment-row:hover,
    #tableaux .sv3-payment-row:hover {
        transform: translateY(-2px);

        border-color:
            rgba(139, 92, 246, .28);

        box-shadow:
            0 16px 38px
            rgba(0, 0, 0, .18);
    }
}


/* ---------------------------------------------------------
   TABLETTE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    #packs .sv3-payment-row,
    #mappings .sv3-payment-row,
    #tableaux .sv3-payment-row {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 14px 18px;
    }

    #packs .sv3-payment-row > b,
    #mappings .sv3-payment-row > b,
    #tableaux .sv3-payment-row > b {
        grid-column: 1 / -1;

        justify-self: start;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    #packs .sv3-payment-row,
    #mappings .sv3-payment-row,
    #tableaux .sv3-payment-row {
        display: flex !important;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding: 18px !important;
    }

    #packs .sv3-payment-row > strong,
    #mappings .sv3-payment-row > strong,
    #tableaux .sv3-payment-row > strong,

    #packs .sv3-payment-row > b,
    #mappings .sv3-payment-row > b,
    #tableaux .sv3-payment-row > b {
        justify-self: auto;
    }

    #tableaux img {
        width: 100% !important;
        height: auto;
        max-height: 360px !important;
    }
}



/* =========================================================
   ESPACE CLIENT V3
   VRAIES CARTES PROJETS
   ========================================================= */

.sv3-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}


/* CARTE */

.sv3-project-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 100%;

    padding: 22px;

    border-radius: 20px;

    border: 1px solid rgba(139, 92, 246, .22);

    background:
        radial-gradient(
            circle at top right,
            rgba(124, 58, 237, .14),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(15, 23, 42, .96),
            rgba(11, 15, 30, .96)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .18);

    overflow: hidden;
}


.sv3-project-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 22px;
    right: 22px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(139, 92, 246, .85),
            transparent
        );
}


/* HEADER */

.sv3-project-card-head {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;
}


.sv3-project-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #c4b5fd;

    background: rgba(124, 58, 237, .13);

    border: 1px solid rgba(139, 92, 246, .25);
}


.sv3-project-icon .dashicons {
    width: auto;
    height: auto;

    font-size: 21px;
}


.sv3-project-title {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.sv3-project-title > strong {
    color: #fff;

    font-size: 16px;
    line-height: 1.3;
}


.sv3-project-title > small {
    color: rgba(226, 232, 240, .55);

    font-size: 12px;
}


.sv3-project-status {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 7px 10px;

    border-radius: 999px;

    color: #fde68a;

    background: rgba(245, 158, 11, .09);

    border: 1px solid rgba(245, 158, 11, .22);

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}


/* INFORMATIONS */

.sv3-project-info {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.sv3-project-info > div {
    min-width: 0;

    padding: 12px 14px;

    border-radius: 12px;

    background: rgba(255, 255, 255, .025);

    border: 1px solid rgba(148, 163, 184, .08);
}


.sv3-project-info small {
    display: block;

    margin-bottom: 5px;

    color: rgba(148, 163, 184, .72);

    font-size: 11px;
    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: .04em;
}


.sv3-project-info strong,
.sv3-project-info span {
    display: block;

    color: #e5e7eb;

    font-size: 13px;
    line-height: 1.5;

    overflow-wrap: anywhere;
}


.sv3-project-info .sv3-project-wide {
    grid-column: 1 / -1;
}


/* PRIX PACK */

.sv3-project-price {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: auto;
    padding-top: 20px;
}


.sv3-project-price > div {
    padding: 14px;

    border-radius: 13px;

    background: rgba(124, 58, 237, .08);

    border: 1px solid rgba(139, 92, 246, .16);
}


.sv3-project-price small {
    display: block;

    margin-bottom: 4px;

    color: rgba(196, 181, 253, .68);

    font-size: 11px;
}


.sv3-project-price strong {
    color: #fff;

    font-size: 17px;
}


/* TABLEAU VIVANT */

.sv3-project-card-tableau {
    padding: 0;
}


.sv3-project-card-tableau::before {
    z-index: 2;
}


.sv3-project-image {
    width: 100%;
    height: 220px;

    overflow: hidden;

    background: rgba(0, 0, 0, .2);
}


.sv3-project-image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-height: none !important;

    object-fit: cover;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


.sv3-project-card-body {
    padding: 22px;
}


/* ETAT VIDE */

.sv3-project-empty {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 180px;

    padding: 30px;

    border-radius: 18px;

    text-align: center;

    border: 1px dashed rgba(139, 92, 246, .22);

    background: rgba(124, 58, 237, .035);
}


.sv3-project-empty strong {
    margin-bottom: 7px;

    color: #fff;

    font-size: 16px;
}


.sv3-project-empty span {
    color: rgba(226, 232, 240, .62);

    font-size: 13px;
}


/* SURVOL */

@media (hover: hover) {

    .sv3-project-card {
        transition:
            transform .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;
    }

    .sv3-project-card:hover {
        transform: translateY(-4px);

        border-color: rgba(139, 92, 246, .42);

        box-shadow:
            0 22px 55px rgba(0, 0, 0, .24);
    }
}


/* TABLETTE */

@media (max-width: 1250px) {

    .sv3-project-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* MOBILE */

@media (max-width: 720px) {

    .sv3-project-grid {
        grid-template-columns: 1fr;
    }

    .sv3-project-card {
        padding: 18px;
    }

    .sv3-project-card-tableau {
        padding: 0;
    }

    .sv3-project-card-body {
        padding: 18px;
    }

    .sv3-project-card-head {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        align-items: start;
    }

    .sv3-project-status {
        grid-column: 1 / -1;

        justify-self: start;
    }

    .sv3-project-info,
    .sv3-project-price {
        grid-template-columns: 1fr;
    }

    .sv3-project-info .sv3-project-wide {
        grid-column: auto;
    }

    .sv3-project-image {
        height: 250px;
    }
}



/* =========================================================
   DASHBOARD CARTES V4
   ========================================================= */


/* ---------------------------------------------------------
   ANCIENNE GRILLE MASQUEE SUR LE TABLEAU DE BORD
   Elle reste disponible comme vue détaillée.
   --------------------------------------------------------- */

.sv3-dashboard-primary {
    display: none !important;
}

.sv3-dashboard-primary.sv3-focus-view {
    display: block !important;
}

.sv3-dashboard-primary.sv3-focus-view > article {
    display: none !important;
}

.sv3-dashboard-primary.sv3-focus-view
> article.sv3-module-active {
    display: block !important;

    width: 100% !important;

    max-width: none !important;
}


/* ---------------------------------------------------------
   GRANDE SECTION
   --------------------------------------------------------- */

.sv3-dashboard-zone {
    width: 100%;

    margin: 14px 0 18px;

    padding: 18px;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(9, 16, 29, .96),
            rgba(7, 13, 24, .96)
        );

    border:
        1px solid
        rgba(148, 163, 184, .18);
}


.sv3-dashboard-zone-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.sv3-dashboard-zone-head > div {
    display: flex;

    align-items: center;

    gap: 12px;
}


.sv3-dashboard-zone-head h2 {
    margin: 0;

    color: #fff;

    font-size: 20px;
}


.sv3-dashboard-zone-head p {
    margin: 3px 0 0;

    color: rgba(226, 232, 240, .68);

    font-size: 13px;
}


.sv3-dashboard-zone-head > a {
    color: #fff;

    font-size: 13px;

    text-decoration: none;
}


.sv3-dashboard-zone-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #ddd6fe;

    background:
        linear-gradient(
            135deg,
            rgba(109, 40, 217, .8),
            rgba(76, 29, 149, .65)
        );
}


/* ---------------------------------------------------------
   PRESTATIONS
   --------------------------------------------------------- */

.sv3-dashboard-prestation-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.sv3-dashboard-prestation-card {
    min-width: 0;

    overflow: hidden;

    border-radius: 16px;

    border:
        1px solid
        rgba(148, 163, 184, .18);

    background:
        rgba(12, 20, 34, .88);
}


.sv3-dashboard-card-image {
    position: relative;

    height: 190px;

    overflow: hidden;
}


.sv3-dashboard-card-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    display: block;
}


.sv3-dashboard-card-status {
    position: absolute;

    top: 12px;
    right: 12px;

    padding: 7px 11px;

    border-radius: 999px;

    background:
        rgba(245, 158, 11, .92);

    color: #fff;

    font-size: 11px;
    font-weight: 700;
}


.sv3-dashboard-card-body {
    padding: 16px;
}


.sv3-dashboard-card-body h3 {
    margin: 0 0 12px;

    color: #fff;

    font-size: 18px;
}


.sv3-dashboard-card-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 16px;

    color: rgba(226, 232, 240, .78);

    font-size: 12px;
}


.sv3-dashboard-card-meta > span {
    display: inline-flex;

    align-items: center;

    gap: 5px;
}


.sv3-dashboard-card-meta .dashicons {
    width: auto;
    height: auto;

    font-size: 15px;
}


.sv3-dashboard-card-button {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 38px;

    border-radius: 8px;

    border:
        1px solid
        rgba(148, 163, 184, .42);

    color: #fff;

    text-decoration: none;

    font-size: 13px;
}


.sv3-dashboard-empty {
    min-height: 120px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    border-radius: 14px;

    border:
        1px dashed
        rgba(148, 163, 184, .2);

    color:
        rgba(226, 232, 240, .7);
}


.sv3-dashboard-empty > .dashicons {
    font-size: 30px;

    width: 30px;
    height: 30px;

    color: #8b5cf6;
}


.sv3-dashboard-empty div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.sv3-dashboard-empty strong {
    color: #fff;
}


.sv3-dashboard-empty small {
    color:
        rgba(226, 232, 240, .6);
}


/* ---------------------------------------------------------
   PROJETS / COMMANDES
   --------------------------------------------------------- */

.sv3-dashboard-project-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 14px;
}


.sv3-dashboard-project-card {
    min-width: 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border-radius: 15px;

    border:
        1px solid
        rgba(148, 163, 184, .18);

    background:
        linear-gradient(
            145deg,
            rgba(13, 21, 36, .96),
            rgba(8, 14, 26, .96)
        );

    color: #fff;

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease;
}


.sv3-dashboard-project-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(139, 92, 246, .45);
}


.sv3-dashboard-project-picture {
    position: relative;

    width: 100%;
    height: 115px;

    overflow: hidden;

    background: #090d16;
}


.sv3-dashboard-project-picture img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
}


.sv3-dashboard-count {
    position: absolute;

    top: 8px;
    right: 8px;

    min-width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 7px;

    border-radius: 999px;

    background: #ef4763;

    color: #fff;

    font-size: 11px;
    font-weight: 800;

    box-shadow:
        0 5px 16px
        rgba(239, 71, 99, .3);
}


.sv3-dashboard-project-content {
    position: relative;

    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 14px;
}


.sv3-dashboard-project-icon {
    width: 34px;
    height: 34px;

    margin-bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;
}


.sv3-dashboard-project-icon.orange {
    background:
        rgba(154, 70, 25, .58);
}


.sv3-dashboard-project-icon.blue {
    background:
        rgba(29, 78, 216, .48);
}


.sv3-dashboard-project-icon.purple {
    background:
        rgba(109, 40, 217, .48);
}


.sv3-dashboard-project-content > strong {
    min-height: 36px;

    margin-bottom: 5px;

    color: #fff;

    font-size: 14px;
    line-height: 1.3;
}


.sv3-dashboard-project-content > b {
    margin: 4px 0;

    font-size: 27px;

    color: #fff;
}


.sv3-dashboard-project-content > small {
    min-height: 34px;

    color: #fb923c;

    font-size: 11px;
}


.sv3-dashboard-project-link {
    margin-top: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 0 8px;

    border-radius: 7px;

    border:
        1px solid
        rgba(148, 163, 184, .38);

    color: #fff;

    font-size: 11px;
}


/* ---------------------------------------------------------
   BADGES MENU LATERAL
   --------------------------------------------------------- */

.sv3-nav a {
    position: relative;
}


.sv3-nav a > .sv3-badge {
    margin-left: auto;

    flex: 0 0 auto;

    min-width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 6px;

    border-radius: 999px;

    background: #ef4763;

    color: #fff;

    font-size: 10px;
    font-weight: 800;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1350px) {

    .sv3-dashboard-project-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 1050px) {

    .sv3-dashboard-prestation-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 800px) {

    .sv3-dashboard-project-grid,
    .sv3-dashboard-prestation-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 560px) {

    .sv3-dashboard-zone {
        padding: 14px;
    }

    .sv3-dashboard-zone-head {
        align-items: flex-start;

        flex-direction: column;
    }

    .sv3-dashboard-project-grid,
    .sv3-dashboard-prestation-grid {
        grid-template-columns: 1fr;
    }

    .sv3-dashboard-project-picture {
        height: 150px;
    }

}


/* =========================================================
   SPECTRAVISION
   DASHBOARD CROQUIS - ETAPE 1
   ========================================================= */


/*
 * La grande zone de raccourcis projets faisait doublon
 * avec les modules détaillés situés juste après.
 */
.sv3-dashboard-projects-shortcuts {
    display: none;
}


/* ---------------------------------------------------------
   COMPTEURS
   --------------------------------------------------------- */

.sv3-stats {
    margin: 22px 0 28px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.sv3-stat {
    position: relative;
    min-height: 92px;
    padding: 18px 18px;

    display: flex;
    align-items: center;
    gap: 14px;

    overflow: hidden;

    border: 1px solid rgba(151, 165, 195, .16);
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 24, 36, .96),
            rgba(9, 13, 22, .98)
        );

    box-shadow:
        0 12px 32px rgba(0, 0, 0, .22);
}

.sv3-stat::after {
    content: "";
    position: absolute;
    inset: auto -35px -55px auto;

    width: 120px;
    height: 120px;

    border-radius: 50%;
    background: rgba(137, 73, 221, .08);
    filter: blur(12px);

    pointer-events: none;
}

.sv3-stat > div:not(.sv3-stat-icon) {
    min-width: 0;
}

.sv3-stat strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;

    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}

.sv3-stat > div > span {
    color: #9fa9bb;
    font-size: 12px;
}

.sv3-stat > b {
    margin-left: auto;

    color: #7d8798;

    font-size: 22px;
    font-weight: 400;
}

.sv3-stat-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;
}

.sv3-stat-icon .dashicons {
    width: auto;
    height: auto;

    font-size: 21px;
}

.sv3-stat-icon.purple {
    color: #c997ff;
    background: rgba(154, 73, 255, .15);
}

.sv3-stat-icon.orange {
    color: #ffae79;
    background: rgba(255, 132, 72, .14);
}

.sv3-stat-icon.blue {
    color: #79aaff;
    background: rgba(72, 126, 255, .14);
}

.sv3-stat-icon.green {
    color: #73e6a3;
    background: rgba(63, 209, 126, .13);
}


/* ---------------------------------------------------------
   ZONE PRESTATIONS DU DASHBOARD
   --------------------------------------------------------- */

#dashboard-prestations {
    margin-bottom: 22px;
}

.sv3-dashboard-zone {
    border: 1px solid rgba(151, 165, 195, .15);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 19, 29, .98),
            rgba(8, 12, 20, .98)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .20);
}

.sv3-dashboard-zone-head h2 {
    color: #fff;
}


/* ---------------------------------------------------------
   GRILLE PRINCIPALE
   Prestation + dernière commande + autres modules
   --------------------------------------------------------- */

.sv3-dashboard-primary {
    margin-top: 22px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;

    align-items: stretch;
}

.sv3-dashboard-primary > .sv3-panel {
    margin: 0;

    border: 1px solid rgba(151, 165, 195, .15);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 20, 31, .98),
            rgba(8, 12, 20, .98)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .20);
}

.sv3-dashboard-primary > .sv3-panel h2 {
    margin-top: 0;

    color: #fff;

    font-size: 17px;
    font-weight: 650;
}


/* PRESTATION */

.sv3-project-content {
    gap: 18px;
}

.sv3-project-content > img {
    width: 150px;
    height: 112px;

    flex: 0 0 150px;

    object-fit: cover;

    border-radius: 10px;
}

.sv3-title-status h3 {
    color: #fff;
}

.sv3-title-status span {
    border: 1px solid rgba(151, 99, 255, .35);
    border-radius: 999px;

    color: #d6b7ff;
    background: rgba(130, 65, 220, .14);
}


/* DERNIERE COMMANDE */

.sv3-order-content {
    gap: 18px;
}

.sv3-order-content > img {
    width: 150px;
    height: 112px;

    flex: 0 0 150px;

    object-fit: cover;

    border-radius: 10px;
}

.sv3-order-content h3 {
    color: #fff;
}

.sv3-status-blue {
    display: inline-flex;
    align-items: center;

    margin-top: 5px;
    padding: 6px 10px;

    border: 1px solid rgba(85, 145, 255, .28);
    border-radius: 999px;

    color: #9dbdff;
    background: rgba(85, 145, 255, .11);

    font-size: 11px;
}


/* ---------------------------------------------------------
   PAIEMENTS
   --------------------------------------------------------- */

.sv3-payment-top {
    border: 1px solid rgba(151, 165, 195, .13);
    border-radius: 11px;

    background: rgba(255, 255, 255, .025);
}

.sv3-payment-row {
    border-color: rgba(151, 165, 195, .11);
}


/* ---------------------------------------------------------
   BOUTONS
   --------------------------------------------------------- */

.sv3-dashboard-primary .sv3-button,
.sv3-dashboard-card-button {
    border-radius: 8px;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.sv3-dashboard-primary .sv3-button:hover,
.sv3-dashboard-card-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 8px 24px rgba(111, 54, 202, .18);
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1150px) {

    .sv3-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv3-dashboard-primary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .sv3-stats {
        grid-template-columns: 1fr;
    }

    .sv3-main {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sv3-project-content,
    .sv3-order-content {
        align-items: flex-start;
    }

    .sv3-project-content > img,
    .sv3-order-content > img {
        width: 105px;
        height: 90px;
        flex-basis: 105px;
    }
}


/* =========================================================
   DASHBOARD CROQUIS - ETAPE 2
   RACCOURCIS DEPLACES VISUELLEMENT
   ========================================================= */

/*
 * Cette zone sera replacée plus bas ultérieurement.
 * Pour l'instant on la masque afin que les vrais modules
 * du compte remontent dans le dashboard.
 */
.sv3-dashboard-actions-bottom {
    display: none !important;
}


/* Donne plus d'air entre les modules détaillés */

.sv3-secondary-grid,
.sv3-dashboard-primary {
    margin-bottom: 22px;
}


/* Uniformisation des panneaux */

.sv3-detail-module,
.sv3-panel {
    border-radius: 14px;
}


/* =========================================================
   ESPACE CLIENT
   NAVIGATION PAR RUBRIQUE
   ========================================================= */

.sv3-account-view-hidden {
    display: none !important;
}


/*
 * Lorsqu'une rubrique issue d'une grille est affichée seule,
 * elle prend toute la largeur.
 */

.sv3-dashboard-primary:has(
    > .sv3-panel:not(.sv3-account-view-hidden)
) {
    grid-template-columns: minmax(0, 1fr);
}

.sv3-secondary-grid:has(
    > .sv3-panel:not(.sv3-account-view-hidden)
) {
    grid-template-columns: minmax(0, 1fr);
}


/*
 * Les pages détaillées ne doivent plus donner
 * l'impression d'être de simples cartes posées
 * sous le dashboard.
 */

#tableaux,
#mappings,
#packs,
#devis,
#commandes,
#remboursements {
    margin-top: 0;
}


/*
 * En vue indépendante, largeur confortable.
 */

.sv3-main > #tableaux,
.sv3-main > #mappings,
.sv3-main > #packs,
.sv3-main > #devis,
.sv3-main > #commandes,
.sv3-main > #remboursements {
    width: 100%;
}


/*
 * Transition légère à l'ouverture des rubriques.
 */

.sv3-main > section:not(.sv3-account-view-hidden),
.sv3-dashboard-primary:not(.sv3-account-view-hidden),
.sv3-secondary-grid:not(.sv3-account-view-hidden) {
    animation: svAccountViewIn .22s ease;
}

@keyframes svAccountViewIn {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   SPECTRAVISION - DASHBOARD CROQUIS FINAL V1
   ========================================================= */


/* ---------------------------------------------------------
   GRILLE PRINCIPALE DU DASHBOARD
   --------------------------------------------------------- */

.sv3-main.sv3-dashboard-mode .sv3-dashboard-primary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px;
    margin-top: 22px;
}


/* Prestation + commande */

.sv3-main.sv3-dashboard-mode #prestations,
.sv3-main.sv3-dashboard-mode #commande-recente {
    min-height: 285px;
}


/* Paiements sur toute la largeur */

.sv3-main.sv3-dashboard-mode #paiements {
    grid-column: 1 / -1;
}


/* Automates absent du dashboard */

.sv3-main.sv3-dashboard-mode #automates {
    display: none !important;
}


/* ---------------------------------------------------------
   CARTES PRESTATION / COMMANDE
   --------------------------------------------------------- */

.sv3-main.sv3-dashboard-mode #prestations,
.sv3-main.sv3-dashboard-mode #commande-recente {
    padding: 22px;

    border: 1px solid rgba(154, 168, 197, .16);
    border-radius: 14px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(114, 53, 195, .10),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(14, 19, 30, .98),
            rgba(8, 12, 20, .98)
        );
}

.sv3-main.sv3-dashboard-mode #prestations h2,
.sv3-main.sv3-dashboard-mode #commande-recente h2 {
    margin-bottom: 18px;

    font-size: 18px;
    font-weight: 700;
}


/* Images */

.sv3-main.sv3-dashboard-mode .sv3-project-content > img,
.sv3-main.sv3-dashboard-mode .sv3-order-content > img {
    width: 165px;
    height: 118px;
    flex: 0 0 165px;

    object-fit: cover;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 11px;
}


/* Infos */

.sv3-main.sv3-dashboard-mode .sv3-project-info,
.sv3-main.sv3-dashboard-mode .sv3-order-content > div {
    min-width: 0;
}

.sv3-main.sv3-dashboard-mode .sv3-title-status {
    gap: 10px;
}

.sv3-main.sv3-dashboard-mode .sv3-title-status h3,
.sv3-main.sv3-dashboard-mode .sv3-order-content h3 {
    margin-top: 0;

    font-size: 18px;
    color: #fff;
}


/* Boutons */

.sv3-main.sv3-dashboard-mode #prestations .sv3-button,
.sv3-main.sv3-dashboard-mode #commande-recente .sv3-button {
    margin-top: 20px;
}


/* ---------------------------------------------------------
   PAIEMENTS
   --------------------------------------------------------- */

.sv3-main.sv3-dashboard-mode #paiements {
    padding: 22px;

    border: 1px solid rgba(154, 168, 197, .16);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 19, 30, .98),
            rgba(8, 12, 20, .98)
        );
}

.sv3-main.sv3-dashboard-mode #paiements h2 {
    margin: 0 0 18px;

    font-size: 18px;
}

.sv3-main.sv3-dashboard-mode #paiements .sv3-payment-top {
    min-height: 84px;

    padding: 16px 18px;

    display: flex;
    align-items: center;
    gap: 20px;

    border: 1px solid rgba(154, 168, 197, .12);
    border-radius: 11px;

    background: rgba(255, 255, 255, .025);
}


/* ---------------------------------------------------------
   MESSAGES / FICHIERS / RENDEZ-VOUS
   --------------------------------------------------------- */

.sv3-main.sv3-dashboard-mode .sv3-secondary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px;

    margin-top: 18px;
    margin-bottom: 22px;
}

.sv3-main.sv3-dashboard-mode .sv3-secondary-grid > .sv3-panel {
    min-width: 0;
    min-height: 245px;

    padding: 20px;

    border: 1px solid rgba(154, 168, 197, .16);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 19, 30, .98),
            rgba(8, 12, 20, .98)
        );
}

.sv3-main.sv3-dashboard-mode .sv3-secondary-grid h2 {
    margin: 0 0 18px;

    font-size: 17px;
}


/* ---------------------------------------------------------
   WELCOME
   --------------------------------------------------------- */

.sv3-main.sv3-dashboard-mode .sv3-welcome {
    margin-bottom: 8px;
}


/* ---------------------------------------------------------
   STATS
   --------------------------------------------------------- */

.sv3-main.sv3-dashboard-mode .sv3-stats {
    margin-top: 18px;
    margin-bottom: 22px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .sv3-main.sv3-dashboard-mode .sv3-dashboard-primary {
        grid-template-columns: 1fr !important;
    }

    .sv3-main.sv3-dashboard-mode #paiements {
        grid-column: auto;
    }

    .sv3-main.sv3-dashboard-mode .sv3-secondary-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 700px) {

    .sv3-main.sv3-dashboard-mode .sv3-project-content,
    .sv3-main.sv3-dashboard-mode .sv3-order-content {
        flex-direction: column;
    }

    .sv3-main.sv3-dashboard-mode .sv3-project-content > img,
    .sv3-main.sv3-dashboard-mode .sv3-order-content > img {
        width: 100%;
        height: 175px;
        flex-basis: auto;
    }
}


/* =========================================================
   FIX FINAL LARGEURS DASHBOARD
   ========================================================= */

.sv3-main.sv3-dashboard-mode .sv3-dashboard-primary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100% !important;
}

.sv3-main.sv3-dashboard-mode .sv3-dashboard-primary > #prestations {
    grid-column: 1 !important;
}

.sv3-main.sv3-dashboard-mode .sv3-dashboard-primary > #commande-recente {
    grid-column: 2 !important;
}

.sv3-main.sv3-dashboard-mode .sv3-dashboard-primary > #paiements {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}

.sv3-main.sv3-dashboard-mode .sv3-secondary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
}

@media (max-width: 1100px) {

    .sv3-main.sv3-dashboard-mode .sv3-dashboard-primary,
    .sv3-main.sv3-dashboard-mode .sv3-secondary-grid {
        grid-template-columns: 1fr !important;
    }

    .sv3-main.sv3-dashboard-mode .sv3-dashboard-primary > #prestations,
    .sv3-main.sv3-dashboard-mode .sv3-dashboard-primary > #commande-recente,
    .sv3-main.sv3-dashboard-mode .sv3-dashboard-primary > #paiements {
        grid-column: 1 !important;
    }
}


/* =========================================================
   DASHBOARD - CROQUIS DE REFERENCE
   ========================================================= */

/* Ligne : prestation | commande | paiements */
.sv3-main.sv3-dashboard-mode .sv3-dashboard-primary {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(0, .92fr)
        minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    align-items: stretch;
}

.sv3-main.sv3-dashboard-mode
.sv3-dashboard-primary > #prestations {
    grid-column: 1 !important;
}

.sv3-main.sv3-dashboard-mode
.sv3-dashboard-primary > #commande-recente {
    grid-column: 2 !important;
}

.sv3-main.sv3-dashboard-mode
.sv3-dashboard-primary > #paiements {
    grid-column: 3 !important;
    width: auto !important;
    max-width: none !important;
}

.sv3-main.sv3-dashboard-mode
.sv3-dashboard-primary > #prestations,
.sv3-main.sv3-dashboard-mode
.sv3-dashboard-primary > #commande-recente,
.sv3-main.sv3-dashboard-mode
.sv3-dashboard-primary > #paiements {
    min-height: 335px !important;
    border-radius: 8px !important;
}


/* Ligne : messages | fichiers | rendez-vous */
.sv3-main.sv3-dashboard-mode .sv3-secondary-grid {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 14px !important;
}

.sv3-main.sv3-dashboard-mode
.sv3-secondary-grid > .sv3-panel {
    min-height: 185px !important;
    border-radius: 8px !important;
}


/* Les 4 boutons du bas comme sur le croquis */
.sv3-main.sv3-dashboard-mode
.sv3-dashboard-actions-bottom {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
    margin-bottom: 24px !important;
}

.sv3-main.sv3-dashboard-mode
.sv3-dashboard-actions-bottom > * {
    min-width: 0;
    min-height: 78px;
    border-radius: 7px !important;
}


/* Cartes compteurs plus proches du croquis */
.sv3-main.sv3-dashboard-mode .sv3-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.sv3-main.sv3-dashboard-mode .sv3-stat {
    min-height: 74px !important;
    border-radius: 7px !important;
}


/* Aspect plus compact */
.sv3-main.sv3-dashboard-mode {
    padding-top: 22px;
}

.sv3-main.sv3-dashboard-mode .sv3-panel {
    box-shadow: none;
}


/* Desktop intermédiaire */
@media (max-width: 1250px) {

    .sv3-main.sv3-dashboard-mode .sv3-dashboard-primary {
        grid-template-columns: 1fr 1fr !important;
    }

    .sv3-main.sv3-dashboard-mode
    .sv3-dashboard-primary > #prestations {
        grid-column: 1 !important;
    }

    .sv3-main.sv3-dashboard-mode
    .sv3-dashboard-primary > #commande-recente {
        grid-column: 2 !important;
    }

    .sv3-main.sv3-dashboard-mode
    .sv3-dashboard-primary > #paiements {
        grid-column: 1 / -1 !important;
    }

    .sv3-main.sv3-dashboard-mode
    .sv3-dashboard-actions-bottom {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* Mobile */
@media (max-width: 800px) {

    .sv3-main.sv3-dashboard-mode .sv3-stats,
    .sv3-main.sv3-dashboard-mode .sv3-dashboard-primary,
    .sv3-main.sv3-dashboard-mode .sv3-secondary-grid,
    .sv3-main.sv3-dashboard-mode .sv3-dashboard-actions-bottom {
        grid-template-columns: 1fr !important;
    }

    .sv3-main.sv3-dashboard-mode
    .sv3-dashboard-primary > #prestations,
    .sv3-main.sv3-dashboard-mode
    .sv3-dashboard-primary > #commande-recente,
    .sv3-main.sv3-dashboard-mode
    .sv3-dashboard-primary > #paiements {
        grid-column: 1 !important;
    }
}



/* =========================================================
   MES PRESTATIONS - CROQUIS SPECTRAVISION V1
   ========================================================= */

.sv3-prestations-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}


/* HEADER */

.sv3-prestations-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 20px;
}

.sv3-prestations-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.sv3-prestations-title > .dashicons {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    margin-top: 2px;

    color: #d6c3ff;
    font-size: 22px;
}

.sv3-prestations-title h1 {
    margin: 0 0 5px;

    color: #fff;
    font-size: 25px;
    line-height: 1.1;
}

.sv3-prestations-title p {
    margin: 0;

    color: #9ba9c3;
    font-size: 12px;
}


/* NOUVELLE PRESTATION */

.sv3-prestations-new {
    min-height: 37px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    flex: 0 0 auto;

    border: 1px solid rgba(189, 117, 255, .65);
    border-radius: 6px;

    color: #fff !important;
    background:
        linear-gradient(
            135deg,
            #7b2de2,
            #5a16c9
        );

    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;

    box-shadow:
        0 0 20px rgba(119, 40, 223, .18);
}

.sv3-prestations-new:hover {
    filter: brightness(1.12);
}


/* ONGLETS */

.sv3-prestations-tabs {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-bottom: 10px;
}

.sv3-prestations-tabs button {
    min-height: 34px;

    padding: 0 16px;

    border: 1px solid rgba(117, 145, 190, .30);
    border-radius: 5px;

    color: #dfe7f7;
    background: #0a1019;

    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.sv3-prestations-tabs button span {
    margin-left: 4px;
    opacity: .8;
}

.sv3-prestations-tabs button.active {
    border-color: #7651cf;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(91, 52, 179, .92),
            rgba(62, 34, 123, .92)
        );
}


/* LISTE */

.sv3-prestations-list {
    display: grid;
    gap: 9px;
}

.sv3-prestation-row {
    min-height: 126px;

    display: grid;
    grid-template-columns:
        138px
        minmax(0, 1fr)
        180px;

    gap: 16px;
    align-items: center;

    padding: 10px;

    border: 1px solid rgba(93, 133, 185, .36);
    border-radius: 7px;

    background:
        linear-gradient(
            100deg,
            rgba(9, 15, 24, .98),
            rgba(8, 13, 22, .95)
        );

    transition:
        border-color .18s ease,
        transform .18s ease,
        background .18s ease;
}

.sv3-prestation-row:hover {
    transform: translateY(-1px);

    border-color:
        rgba(112, 155, 222, .60);

    background:
        linear-gradient(
            100deg,
            rgba(11, 19, 31, .99),
            rgba(9, 14, 25, .98)
        );
}

.sv3-prestation-row[hidden] {
    display: none !important;
}


/* IMAGE */

.sv3-prestation-picture {
    width: 138px;
    height: 103px;

    overflow: hidden;

    border: 1px solid rgba(103, 141, 194, .35);
    border-radius: 6px;

    background: #090d14;
}

.sv3-prestation-picture img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}


/* MILIEU */

.sv3-prestation-content {
    min-width: 0;
}

.sv3-prestation-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 3px;
}

.sv3-prestation-name h3 {
    margin: 0;

    color: #fff;
    font-size: 16px;
    line-height: 1.25;
}

.sv3-prestation-reference {
    display: block;

    margin-bottom: 10px;

    color: #7689a9;
    font-size: 10px;
}

.sv3-prestation-meta {
    display: grid;
    gap: 6px;
}

.sv3-prestation-meta > span {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 0;

    color: #c7d2e8;
    font-size: 11px;
}

.sv3-prestation-meta .dashicons {
    width: 14px;
    height: 14px;

    color: #bfc8ff;
    font-size: 14px;
}


/* STATUT */

.sv3-prestation-status {
    padding: 4px 10px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.sv3-prestation-status--preparing {
    border: 1px solid rgba(147, 74, 255, .6);
    color: #fff;
    background: #7332d7;
}

.sv3-prestation-status--validated {
    border: 1px solid rgba(55, 211, 122, .55);
    color: #eafff1;
    background: #117d43;
}

.sv3-prestation-status--pending {
    border: 1px solid rgba(53, 138, 255, .6);
    color: #e8f4ff;
    background: #175ca9;
}

.sv3-prestation-status--finished {
    border: 1px solid rgba(128, 144, 169, .45);
    color: #d6deeb;
    background: #394354;
}


/* COLONNE DROITE */

.sv3-prestation-right {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.sv3-prestation-price {
    color: #fff;
    font-size: 17px;
    white-space: nowrap;
}

.sv3-prestation-deposit {
    margin-top: 5px;

    color: #73dfff;
    font-size: 10px;
    font-weight: 600;
}

.sv3-prestation-open {
    width: 100%;
    min-height: 34px;

    margin-top: 17px;
    padding: 0 12px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    border: 1px solid #317ce1;
    border-radius: 6px;

    color: #fff !important;
    background:
        linear-gradient(
            180deg,
            rgba(15, 46, 84, .65),
            rgba(7, 25, 45, .65)
        );

    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
}

.sv3-prestation-open:hover {
    border-color: #64a7ff;

    background:
        rgba(25, 77, 137, .45);
}


/* VIDE */

.sv3-prestations-empty {
    min-height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    border: 1px dashed rgba(116, 136, 171, .30);
    border-radius: 7px;

    color: #9eacc3;
    background: rgba(11, 17, 27, .65);
}

.sv3-prestations-empty > .dashicons {
    width: 35px;
    height: 35px;

    font-size: 35px;
    color: #7654ce;
}

.sv3-prestations-empty strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;
}

.sv3-prestations-empty p {
    margin: 0;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .sv3-prestation-row {
        grid-template-columns:
            115px
            minmax(0, 1fr)
            150px;
    }

    .sv3-prestation-picture {
        width: 115px;
        height: 90px;
    }
}

@media (max-width: 760px) {

    .sv3-prestations-head {
        align-items: stretch;
        flex-direction: column;
    }

    .sv3-prestations-new {
        align-self: flex-start;
    }

    .sv3-prestations-tabs {
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .sv3-prestations-tabs button {
        flex: 0 0 auto;
    }

    .sv3-prestation-row {
        grid-template-columns: 94px minmax(0, 1fr);
    }

    .sv3-prestation-picture {
        width: 94px;
        height: 86px;
    }

    .sv3-prestation-right {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px;
    }

    .sv3-prestation-deposit {
        grid-column: 1;
    }

    .sv3-prestation-open {
        grid-column: 2;
        grid-row: 1 / span 2;

        width: auto;
        margin-top: 0;
    }
}



/* =========================================================
   FICHE PROJET SPECTRAVISION V1
   ========================================================= */

.sv3-project-detail-page {
    width: 100%;
    max-width: none;
}


/* RETOUR */

.sv3-project-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 16px;

    color: #9eaec8 !important;

    font-size: 11px;
    font-weight: 600;

    text-decoration: none !important;
}

.sv3-project-back:hover {
    color: #fff !important;
}


/* HEADER */

.sv3-project-header {
    min-height: 130px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding: 14px 18px;

    border: 1px solid rgba(106, 132, 176, .35);
    border-radius: 8px;

    background:
        linear-gradient(
            120deg,
            rgba(12, 20, 32, .98),
            rgba(8, 12, 22, .98)
        );
}

.sv3-project-header-main {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 18px;
}

.sv3-project-header-main > img {
    width: 150px;
    height: 100px;

    flex: 0 0 150px;

    object-fit: cover;

    border: 1px solid rgba(120, 148, 197, .35);
    border-radius: 6px;
}

.sv3-project-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sv3-project-title-line h1 {
    margin: 0;

    color: #fff;

    font-size: 24px;
    line-height: 1.2;
}

.sv3-project-reference {
    display: block;

    margin-top: 5px;

    color: #7587a5;
    font-size: 10px;
}

.sv3-project-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 13px;
}

.sv3-project-header-meta > span {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #c3cee1;
    font-size: 11px;
}

.sv3-project-header-meta .dashicons {
    width: 15px;
    height: 15px;

    color: #c5b7ff;
    font-size: 15px;
}

.sv3-project-header-price {
    min-width: 150px;

    text-align: right;
}

.sv3-project-header-price small {
    display: block;

    margin-bottom: 4px;

    color: #8390a7;
    font-size: 10px;
}

.sv3-project-header-price strong {
    color: #fff;

    font-size: 24px;
}


/* TABS */

.sv3-project-tabs {
    display: flex;
    align-items: center;
    gap: 2px;

    margin-top: 14px;

    overflow-x: auto;

    border-bottom:
        1px solid rgba(111, 133, 167, .20);
}

.sv3-project-tabs button {
    min-height: 38px;

    padding: 0 13px;

    flex: 0 0 auto;

    border: 0;
    border-bottom: 2px solid transparent;

    color: #8e9db7;
    background: transparent;

    font: inherit;
    font-size: 10px;
    font-weight: 650;

    cursor: pointer;
}

.sv3-project-tabs button:hover {
    color: #fff;
}

.sv3-project-tabs button.active {
    border-bottom-color: #8e4cff;

    color: #fff;
}


/* PANELS */

.sv3-project-tab-panel {
    display: none;

    padding-top: 14px;
}

.sv3-project-tab-panel.active {
    display: block;
}


/* APERCU */

.sv3-project-overview-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.sv3-project-card,
.sv3-project-large-panel {
    padding: 17px;

    border:
        1px solid rgba(99, 126, 168, .30);

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            rgba(11, 18, 29, .97),
            rgba(7, 12, 21, .97)
        );
}

.sv3-project-card {
    min-height: 170px;
}

.sv3-project-card-head {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 16px;
}

.sv3-project-card-head .dashicons {
    width: 20px;
    height: 20px;

    color: #aa72ff;
    font-size: 20px;
}

.sv3-project-card-head h2,
.sv3-project-large-panel h2 {
    margin: 0;

    color: #fff;
    font-size: 14px;
}


/* INFOS */

.sv3-project-info-list {
    display: grid;
    gap: 8px;
}

.sv3-project-info-list > div,
.sv3-project-detail-table > div,
.sv3-project-payment-lines > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(116, 140, 178, .12);
}

.sv3-project-info-list span,
.sv3-project-detail-table span,
.sv3-project-payment-lines span {
    color: #8190aa;
    font-size: 10px;
}

.sv3-project-info-list strong,
.sv3-project-detail-table strong,
.sv3-project-payment-lines strong {
    color: #f0f4fb;

    font-size: 11px;
    text-align: right;
}


/* PAYMENT */

.sv3-project-payment-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-bottom: 14px;
}

.sv3-project-payment-summary > div {
    padding: 10px;

    border: 1px solid rgba(101, 130, 173, .20);
    border-radius: 6px;

    background: rgba(255,255,255,.02);
}

.sv3-project-payment-summary span {
    display: block;

    margin-bottom: 4px;

    color: #8090aa;
    font-size: 9px;
}

.sv3-project-payment-summary strong {
    color: #fff;
    font-size: 15px;
}

.sv3-project-progress {
    height: 7px;

    overflow: hidden;

    border-radius: 99px;

    background: #171e29;
}

.sv3-project-progress > span {
    height: 100%;

    display: block;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #793bd7,
            #47c7ff
        );
}

.sv3-project-progress-label {
    display: block;

    margin-top: 6px;

    color: #72829c;
    font-size: 9px;
}


/* TAGS */

.sv3-project-tags,
.sv3-project-large-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sv3-project-tags span,
.sv3-project-large-tags span {
    padding: 6px 9px;

    border:
        1px solid rgba(136, 78, 221, .45);

    border-radius: 5px;

    color: #e3d9ff;
    background:
        rgba(104, 52, 181, .16);

    font-size: 10px;
}


/* GRAND PANNEAU */

.sv3-project-large-panel {
    min-height: 250px;
}

.sv3-project-large-panel > h2 {
    margin-bottom: 18px;
}

.sv3-project-large-panel > p {
    color: #8998b0;
    font-size: 11px;
}

.sv3-project-detail-table,
.sv3-project-payment-lines {
    display: grid;
    gap: 9px;
}


/* EMPTY */

.sv3-project-empty,
.sv3-project-empty-small {
    color: #7f8da4;
    font-size: 10px;
}

.sv3-project-empty {
    min-height: 120px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px dashed rgba(106, 130, 165, .23);

    border-radius: 6px;
}


/* BUTTONS */

.sv3-project-secondary-button,
.sv3-project-main-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    margin-top: 16px;
    padding: 0 14px;

    border:
        1px solid rgba(73, 136, 225, .70);

    border-radius: 5px;

    color: #fff !important;

    background:
        rgba(29, 78, 139, .22);

    font-size: 10px;
    font-weight: 700;

    text-decoration: none !important;
}

.sv3-project-main-button {
    background:
        linear-gradient(
            135deg,
            #6322ca,
            #3f1888
        );

    border-color:
        rgba(157, 87, 255, .65);
}


/* MOBILE */

@media (max-width: 850px) {

    .sv3-project-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .sv3-project-header-price {
        text-align: left;
    }

    .sv3-project-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 580px) {

    .sv3-project-header-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .sv3-project-header-main > img {
        width: 100%;
        height: 160px;

        flex-basis: auto;
    }

}



/* =========================================================
   FICHE PROJET - THEMES / OPTIONS AVEC IMAGES
   ========================================================= */

.sv3-project-media-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sv3-project-media-card {
    min-width: 0;
    overflow: hidden;

    border:
        1px solid rgba(116, 139, 180, .28);

    border-radius: 7px;

    background:
        rgba(255,255,255,.025);
}

.sv3-project-media-card img {
    display: block;

    width: 100%;
    height: 145px;

    object-fit: cover;

    background: #090d15;
}

.sv3-project-media-card-body {
    padding: 11px 12px;
}

.sv3-project-media-card strong {
    display: block;

    color: #fff;

    font-size: 11px;
    line-height: 1.35;
}

.sv3-project-media-card-body small {
    display: block;

    margin-top: 5px;

    color: #8290a7;

    font-size: 9px;
}


/* VERSION COMPACTE APERCU */

.sv3-project-media-grid--compact {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.sv3-project-media-grid--compact
.sv3-project-media-card img {
    height: 82px;
}

.sv3-project-media-grid--compact
.sv3-project-media-card strong {
    padding: 8px 9px;

    font-size: 9px;
}


/* MOBILE */

@media (max-width: 850px) {

    .sv3-project-media-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {

    .sv3-project-media-grid,
    .sv3-project-media-grid--compact {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   APERCU PROJET
   THEMES + OPTIONS PLEINE LARGEUR
   ========================================================= */

/*
 * Les deux premières cartes restent côte à côte :
 * Ma prestation | Paiement
 */
.sv3-project-overview-grid > .sv3-project-card:nth-child(1),
.sv3-project-overview-grid > .sv3-project-card:nth-child(2) {
    grid-column: auto;
}


/*
 * Thèmes sur toute la largeur
 */
.sv3-project-overview-grid > .sv3-project-card:nth-child(3) {
    grid-column: 1 / -1;
}


/*
 * Options sur toute la largeur
 */
.sv3-project-overview-grid > .sv3-project-card:nth-child(4) {
    grid-column: 1 / -1;
}


/*
 * 4 cartes par ligne dans l'aperçu
 */
.sv3-project-overview-grid
.sv3-project-media-grid--compact {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/*
 * Images plus hautes et régulières
 */
.sv3-project-overview-grid
.sv3-project-media-grid--compact
.sv3-project-media-card img {
    height: 120px;
    object-fit: cover;
}


/*
 * Nom sous l'image
 */
.sv3-project-overview-grid
.sv3-project-media-grid--compact
.sv3-project-media-card strong {
    min-height: 34px;

    display: flex;
    align-items: center;

    padding: 8px 10px;

    font-size: 10px;
    line-height: 1.25;
}


/*
 * Suppression des hauteurs trop grandes inutiles
 */
.sv3-project-overview-grid
.sv3-project-card:nth-child(3),
.sv3-project-overview-grid
.sv3-project-card:nth-child(4) {
    min-height: auto;
}


/* TABLETTE */

@media (max-width: 1000px) {

    .sv3-project-overview-grid
    .sv3-project-media-grid--compact {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* MOBILE */

@media (max-width: 750px) {

    .sv3-project-overview-grid {
        grid-template-columns: 1fr;
    }

    .sv3-project-overview-grid
    .sv3-project-media-grid--compact {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* PETIT MOBILE */

@media (max-width: 480px) {

    .sv3-project-overview-grid
    .sv3-project-media-grid--compact {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   FICHE PROJET - VRAIS PAIEMENTS
   ========================================================= */

.sv3-project-payment-summary--real {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.sv3-project-paid-value,
.sv3-project-financial-cards strong.paid {
    color: #62e59a !important;
}


.sv3-project-payment-title h2 {
    margin: 0;
}

.sv3-project-payment-title p {
    margin: 5px 0 0;

    color: #7f8da5;

    font-size: 10px;
}


.sv3-project-financial-cards {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-top: 18px;
}

.sv3-project-financial-cards > div {
    padding: 14px;

    border:
        1px solid rgba(112, 137, 179, .25);

    border-radius: 7px;

    background:
        rgba(255,255,255,.025);
}

.sv3-project-financial-cards span {
    display: block;

    margin-bottom: 6px;

    color: #8190a9;

    font-size: 9px;
}

.sv3-project-financial-cards strong {
    color: #fff;

    font-size: 17px;
}


.sv3-project-payment-progress-full {
    margin-top: 15px;
}

.sv3-project-payment-progress-full > div:first-child {
    display: flex;
    justify-content: space-between;

    margin-bottom: 8px;

    color: #8492a8;

    font-size: 9px;
}

.sv3-project-payment-progress-full
> div:first-child strong {
    color: #fff;
}


.sv3-project-financial-section {
    margin-top: 24px;
}

.sv3-project-financial-section h3 {
    margin: 0 0 11px;

    color: #fff;

    font-size: 12px;
}


.sv3-project-financial-empty {
    min-height: 75px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 14px;

    border:
        1px dashed rgba(114, 139, 179, .28);

    border-radius: 7px;

    background:
        rgba(255,255,255,.018);
}

.sv3-project-financial-empty
.dashicons {
    width: 25px;
    height: 25px;

    color: #8952ed;

    font-size: 25px;
}

.sv3-project-financial-empty strong,
.sv3-project-financial-empty small {
    display: block;
}

.sv3-project-financial-empty strong {
    color: #e9edf5;

    font-size: 10px;
}

.sv3-project-financial-empty small {
    margin-top: 4px;

    color: #74829a;

    font-size: 9px;
}


.sv3-project-payment-history,
.sv3-project-invoice-list {
    display: grid;
    gap: 7px;
}

.sv3-project-payment-history-row,
.sv3-project-invoice-row {
    min-height: 55px;

    display: grid;
    align-items: center;
    gap: 12px;

    padding: 9px 12px;

    border:
        1px solid rgba(108, 132, 171, .22);

    border-radius: 6px;

    background:
        rgba(255,255,255,.02);
}


.sv3-project-payment-history-row {
    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;
}


.sv3-project-payment-history-row
> div strong,
.sv3-project-payment-history-row
> div small {
    display: block;
}

.sv3-project-payment-history-row
> div strong {
    color: #fff;

    font-size: 10px;
}

.sv3-project-payment-history-row
> div small {
    margin-top: 3px;

    color: #75849c;

    font-size: 8px;
}


.sv3-project-payment-history-amount {
    color: #fff;

    font-size: 12px;
}


.sv3-project-payment-status {
    min-width: 70px;

    padding: 5px 8px;

    border-radius: 99px;

    font-size: 8px;
    font-weight: 700;

    text-align: center;
}

.sv3-project-payment-status.paid {
    color: #67e99b;

    background:
        rgba(44, 175, 99, .13);

    border:
        1px solid rgba(75, 222, 137, .30);
}

.sv3-project-payment-status.waiting {
    color: #efbf6b;

    background:
        rgba(205, 143, 41, .10);

    border:
        1px solid rgba(231, 164, 57, .27);
}


.sv3-project-invoice-row {
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto
        auto
        auto;
}

.sv3-project-invoice-row
> .dashicons {
    color: #ff6666;
}

.sv3-project-invoice-row
> div strong,
.sv3-project-invoice-row
> div small {
    display: block;
}

.sv3-project-invoice-row
> div strong {
    color: #fff;

    font-size: 10px;
}

.sv3-project-invoice-row
> div small {
    margin-top: 3px;

    color: #77859c;

    font-size: 8px;
}

.sv3-project-invoice-row > strong {
    color: #fff;

    font-size: 11px;
}

.sv3-project-invoice-row > span {
    color: #91a0b6;

    font-size: 9px;
}

.sv3-project-invoice-row a {
    color: #9c75ff !important;

    font-size: 9px;
    font-weight: 700;

    text-decoration: none !important;
}


@media (max-width: 800px) {

    .sv3-project-financial-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sv3-project-payment-summary--real {
        grid-template-columns: 1fr;
    }

    .sv3-project-invoice-row {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;
    }

    .sv3-project-invoice-row > span,
    .sv3-project-invoice-row > a {
        grid-column: 2 / -1;
    }
}



/* =========================================================
   SPECTRAVISION
   FICHE PROJET - MAQUETTE OFFICIELLE
   ========================================================= */


/* HEADER PLUS COMPACT */

.sv3-project-header {
    min-height: 108px !important;

    padding: 11px 15px !important;
}

.sv3-project-header-main > img {
    width: 122px !important;
    height: 82px !important;
    flex-basis: 122px !important;
}

.sv3-project-title-line h1 {
    font-size: 19px !important;
}

.sv3-project-header-price strong {
    font-size: 19px !important;
}


/* ONGLETS COMPACTS */

.sv3-project-tabs {
    margin-top: 10px !important;
}

.sv3-project-tabs button {
    min-height: 34px !important;

    padding:
        0 11px !important;

    font-size: 9px !important;
}


/* =========================================================
   APERCU 3 COLONNES
   ========================================================= */

.sv3-project-reference-layout {
    display: grid;

    grid-template-columns:
        minmax(260px, .95fr)
        minmax(300px, 1.15fr)
        minmax(250px, .85fr);

    gap: 12px;
}


.sv3-project-reference-image,
.sv3-project-reference-info,
.sv3-project-reference-actions,
.sv3-project-reference-bottom > article {
    overflow: hidden;

    border:
        1px solid
        rgba(105,130,170,.28);

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            rgba(12,18,29,.98),
            rgba(7,11,19,.98)
        );
}


/* IMAGE */

.sv3-project-reference-image {
    position: relative;

    min-height: 310px;
}

.sv3-project-reference-image > img {
    width: 100%;
    height: 100%;

    min-height: 310px;

    display: block;

    object-fit: cover;
}

.sv3-project-reference-image-caption {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 22px 14px 13px;

    background:
        linear-gradient(
            transparent,
            rgba(3,6,12,.96)
        );
}

.sv3-project-reference-image-caption strong,
.sv3-project-reference-image-caption span {
    display: block;
}

.sv3-project-reference-image-caption strong {
    color: #fff;

    font-size: 12px;
}

.sv3-project-reference-image-caption span {
    margin-top: 3px;

    color: #9aa8bd;

    font-size: 9px;
}


/* TITRES */

.sv3-project-reference-card-title {
    display: flex;
    align-items: center;
    gap: 8px;

    padding:
        14px 14px 11px;

    border-bottom:
        1px solid
        rgba(103,128,166,.15);
}

.sv3-project-reference-card-title
.dashicons {
    width: 18px;
    height: 18px;

    color: #a56cff;

    font-size: 18px;
}

.sv3-project-reference-card-title h2 {
    margin: 0;

    color: #fff;

    font-size: 12px;
}


/* INFORMATIONS */

.sv3-project-reference-info-list {
    padding:
        4px 14px 13px;
}

.sv3-project-reference-info-list > div {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    border-bottom:
        1px solid
        rgba(104,127,164,.11);
}

.sv3-project-reference-info-list > div:last-child {
    border-bottom: 0;
}

.sv3-project-reference-info-list span {
    color: #78879e;

    font-size: 9px;
}

.sv3-project-reference-info-list strong {
    max-width: 65%;

    color: #edf1f7;

    font-size: 10px;

    text-align: right;
}

.sv3-project-reference-paid {
    color: #64e39a !important;
}


/* ACTIONS */

.sv3-project-reference-action-list {
    display: grid;

    padding: 8px;
}

.sv3-project-reference-action {
    width: 100%;
    min-height: 49px;

    display: grid;
    grid-template-columns:
        27px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 9px;

    padding:
        7px 8px;

    border: 0;
    border-bottom:
        1px solid
        rgba(105,127,163,.13);

    color: inherit !important;

    background:
        transparent;

    text-align: left;
    text-decoration: none !important;

    cursor: pointer;
}

.sv3-project-reference-action:last-child {
    border-bottom: 0;
}

.sv3-project-reference-action:hover {
    background:
        rgba(120,69,207,.10);
}

.sv3-project-reference-action
> .dashicons {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 5px;

    color: #b384ff;

    background:
        rgba(117,64,200,.13);

    font-size: 16px;
}

.sv3-project-reference-action
div strong,
.sv3-project-reference-action
div small {
    display: block;
}

.sv3-project-reference-action
div strong {
    color: #fff;

    font-size: 9px;
}

.sv3-project-reference-action
div small {
    margin-top: 2px;

    color: #73839b;

    font-size: 8px;
}

.sv3-project-reference-action > b {
    color: #6e7e96;

    font-size: 15px;
}


/* =========================================================
   THEMES + OPTIONS SOUS L'APERCU
   ========================================================= */

.sv3-project-reference-bottom {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 12px;

    margin-top: 12px;
}

.sv3-project-reference-bottom > article {
    padding-bottom: 12px;
}

.sv3-project-reference-mini-grid {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 8px;

    padding:
        11px 12px 2px;
}

.sv3-project-reference-mini {
    min-width: 0;

    overflow: hidden;

    padding: 0;

    border:
        1px solid
        rgba(110,135,174,.23);

    border-radius: 5px;

    color: #fff;

    background:
        rgba(255,255,255,.02);

    text-align: left;

    cursor: pointer;
}

.sv3-project-reference-mini img {
    width: 100%;
    height: 65px;

    display: block;

    object-fit: cover;
}

.sv3-project-reference-mini strong {
    min-height: 29px;

    display: flex;
    align-items: center;

    padding:
        5px 6px;

    color: #e8edf6;

    font-size: 8px;
    line-height: 1.2;
}

.sv3-project-reference-more {
    margin:
        10px 12px 0;

    padding: 0;

    border: 0;

    color: #aa7dff;

    background: none;

    font-size: 9px;
    font-weight: 700;

    cursor: pointer;
}

.sv3-project-reference-empty {
    margin:
        12px;

    color: #75839a;

    font-size: 9px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

    .sv3-project-reference-layout {
        grid-template-columns:
            1fr 1fr;
    }

    .sv3-project-reference-actions {
        grid-column:
            1 / -1;
    }

    .sv3-project-reference-action-list {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


@media (max-width: 800px) {

    .sv3-project-reference-layout,
    .sv3-project-reference-bottom {
        grid-template-columns: 1fr;
    }

    .sv3-project-reference-actions {
        grid-column: auto;
    }

    .sv3-project-reference-action-list {
        grid-template-columns: 1fr;
    }

    .sv3-project-reference-mini-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}



/* =========================================================
   SPECTRAVISION
   TABLEAU DE BORD - MAQUETTE OFFICIELLE
   ========================================================= */


/* =========================================================
   ESPACEMENT GENERAL
   ========================================================= */

.sv3-account-main {
    min-width: 0;
}

.sv3-dashboard-primary,
.sv3-secondary-grid,
.sv3-dashboard-actions-bottom {
    width: 100%;
}


/* =========================================================
   LIGNE PRINCIPALE
   PROCHAINE PRESTATION | DERNIERE COMMANDE | PAIEMENTS
   ========================================================= */

.sv3-dashboard-primary {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(240px, .90fr)
        minmax(240px, .90fr) !important;

    align-items: stretch;

    gap: 12px !important;

    margin-top: 14px !important;
}


/*
 * Dans le dashboard, Automates ne fait pas partie
 * de la ligne principale de la maquette.
 */

.sv3-main.sv3-dashboard-mode .sv3-dashboard-primary > #automates {
    display: none !important;
}


/* CARTES */

.sv3-dashboard-primary > .sv3-panel,
.sv3-secondary-grid > .sv3-panel {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(103,128,166,.22) !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            rgba(13,19,30,.98),
            rgba(7,11,19,.98)
        ) !important;

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.14) !important;
}


/* =========================================================
   PROCHAINE PRESTATION
   ========================================================= */

.sv3-dashboard-primary #prestations {
    position: relative;

    min-height: 245px;
}


/* On évite que les contenus dépassent */

.sv3-dashboard-primary #prestations img {
    max-width: 100%;
}


/* =========================================================
   DERNIERE COMMANDE
   ========================================================= */

.sv3-dashboard-primary #commande-recente {
    min-height: 245px;
}


/* =========================================================
   PAIEMENTS
   ========================================================= */

.sv3-dashboard-primary #paiements {
    min-height: 245px;
}


/* =========================================================
   TITRES DES PANNEAUX
   ========================================================= */

.sv3-dashboard-primary .sv3-panel h2,
.sv3-dashboard-primary .sv3-panel h3,
.sv3-secondary-grid .sv3-panel h2,
.sv3-secondary-grid .sv3-panel h3 {
    color: #f6f8fc;

    font-size: 12px !important;
    line-height: 1.25;

    font-weight: 700;
}


/* textes secondaires */

.sv3-dashboard-primary .sv3-panel p,
.sv3-dashboard-primary .sv3-panel small,
.sv3-secondary-grid .sv3-panel p,
.sv3-secondary-grid .sv3-panel small {
    color: #8796ab;
}


/* =========================================================
   DEUXIEME LIGNE
   MESSAGES | FICHIERS | RENDEZ-VOUS
   ========================================================= */

.sv3-secondary-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap: 12px !important;

    margin-top: 12px !important;
}


.sv3-secondary-grid > .sv3-panel {
    min-height: 205px;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.sv3-secondary-grid #messages {
    position: relative;
}


/* =========================================================
   FICHIERS
   ========================================================= */

.sv3-secondary-grid #fichiers {
    position: relative;
}


/* =========================================================
   RENDEZ-VOUS
   ========================================================= */

.sv3-secondary-grid #rendez-vous {
    position: relative;
}


/* =========================================================
   LIENS / BOUTONS DES CARTES
   ========================================================= */

.sv3-dashboard-primary .sv3-panel a,
.sv3-secondary-grid .sv3-panel a {
    text-decoration: none;
}


.sv3-dashboard-primary .sv3-panel a:hover,
.sv3-secondary-grid .sv3-panel a:hover {
    text-decoration: none;
}


/* =========================================================
   RACCOURCIS BAS DE DASHBOARD
   4 CARTES COMME LA MAQUETTE
   ========================================================= */

.sv3-dashboard-actions-bottom {
    display: grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap: 10px !important;

    margin-top: 12px !important;
}


.sv3-dashboard-actions-bottom > * {
    min-width: 0;

    min-height: 82px;

    display: flex;
    align-items: center;

    border:
        1px solid
        rgba(107,130,170,.22) !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            rgba(13,19,30,.98),
            rgba(8,12,20,.98)
        ) !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}


.sv3-dashboard-actions-bottom > *:hover {
    transform: translateY(-2px);

    border-color:
        rgba(153,99,255,.50) !important;

    background:
        linear-gradient(
            145deg,
            rgba(26,20,43,.98),
            rgba(9,13,22,.98)
        ) !important;
}


/* =========================================================
   COULEURS DES 4 RACCOURCIS
   ========================================================= */

.sv3-dashboard-actions-bottom > *:nth-child(1) {
    box-shadow:
        inset 0 2px 0
        rgba(136,79,255,.55);
}

.sv3-dashboard-actions-bottom > *:nth-child(2) {
    box-shadow:
        inset 0 2px 0
        rgba(41,139,255,.55);
}

.sv3-dashboard-actions-bottom > *:nth-child(3) {
    box-shadow:
        inset 0 2px 0
        rgba(53,215,143,.55);
}

.sv3-dashboard-actions-bottom > *:nth-child(4) {
    box-shadow:
        inset 0 2px 0
        rgba(255,147,50,.55);
}


/* =========================================================
   BOUTONS PRINCIPAUX
   ========================================================= */

.sv3-dashboard-primary button,
.sv3-dashboard-primary .button,
.sv3-secondary-grid button,
.sv3-secondary-grid .button {
    border-radius: 5px;
}


/* =========================================================
   BADGES DE STATUT
   ========================================================= */

.sv3-dashboard-primary [class*="status"],
.sv3-secondary-grid [class*="status"] {
    white-space: nowrap;
}


/* =========================================================
   RESPONSIVE TABLETTE
   ========================================================= */

@media (max-width: 1180px) {

    .sv3-dashboard-primary {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    .sv3-dashboard-primary #prestations {
        grid-column:
            1 / -1;
    }

    .sv3-dashboard-actions-bottom {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .sv3-dashboard-primary,
    .sv3-secondary-grid,
    .sv3-dashboard-actions-bottom {
        grid-template-columns:
            1fr !important;
    }

    .sv3-dashboard-primary #prestations {
        grid-column: auto;
    }

    .sv3-dashboard-primary > .sv3-panel,
    .sv3-secondary-grid > .sv3-panel {
        min-height: auto;
    }

    .sv3-dashboard-actions-bottom > * {
        min-height: 72px;
    }
}


/* =========================================================
   FIN DASHBOARD MAQUETTE
   ========================================================= */



/* =========================================================
   DASHBOARD - CORRECTIONS MAQUETTE
   ========================================================= */


/* La seconde ligne doit être visible sur le dashboard */

.sv3-secondary-grid {
    display: grid !important;
}

.sv3-secondary-grid > #messages,
.sv3-secondary-grid > #fichiers,
.sv3-secondary-grid > #rendez-vous {
    display: block !important;
}


/* =========================================================
   PROCHAINE PRESTATION
   Empêche titre / statut / référence de se chevaucher
   ========================================================= */

.sv3-dashboard-primary #prestations
.sv3-project-content {
    align-items: flex-start;
    gap: 16px;
}


.sv3-dashboard-primary #prestations
.sv3-project-info {
    min-width: 0;
    flex: 1;
}


.sv3-dashboard-primary #prestations
.sv3-title-status {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 7px 10px;

    margin-bottom: 8px;
}


.sv3-dashboard-primary #prestations
.sv3-title-status h3 {
    min-width: 0;

    margin: 0;

    white-space: normal;
}


.sv3-dashboard-primary #prestations
.sv3-title-status span {
    position: static !important;

    flex: 0 0 auto;

    margin: 0 !important;

    white-space: nowrap;
}


.sv3-dashboard-primary #prestations
.sv3-project-info p {
    position: static !important;

    margin:
        5px 0 !important;

    white-space: normal;
}


/* Image proche des proportions de la maquette */

.sv3-dashboard-primary #prestations
.sv3-project-content > img {
    width: 165px !important;
    height: 118px !important;

    flex: 0 0 165px;

    object-fit: cover;

    border-radius: 7px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

    .sv3-dashboard-primary #prestations
    .sv3-project-content {
        flex-direction: column;
    }

    .sv3-dashboard-primary #prestations
    .sv3-project-content > img {
        width: 100% !important;
        height: 180px !important;

        flex-basis: auto;
    }
}



/* =========================================================
   PROCHAINE PRESTATION
   VERSION MAQUETTE VALIDEE
   ========================================================= */

.sv3-next-service-card {
    display: flex;
    flex-direction: column;

    min-height: 335px !important;
}


.sv3-next-service-card > h2 {
    margin:
        0 0 12px !important;

    padding-bottom: 10px;

    border-bottom:
        1px solid
        rgba(115,137,170,.20);
}


.sv3-next-service-body {
    display: grid;

    grid-template-columns:
        165px minmax(0,1fr);

    gap: 16px;

    flex: 1;
}


/* IMAGE PRINCIPALE */

.sv3-next-service-cover {
    overflow: hidden;

    width: 165px;
    height: 185px;

    border:
        1px solid
        rgba(104,130,170,.45);

    border-radius: 8px;

    background: #04070c;
}


.sv3-next-service-cover img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover;
}


/* INFORMATIONS */

.sv3-next-service-info {
    min-width: 0;

    padding-top: 4px;
}


.sv3-next-service-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 13px;
}


.sv3-next-service-title strong {
    color: #fff;

    font-size: 14px;
    line-height: 1.3;

    font-weight: 800;
}


.sv3-next-service-status {
    flex: 0 0 auto;

    padding:
        5px 10px;

    border:
        1px solid
        rgba(157,72,255,.65);

    border-radius: 999px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #4812a7,
            #7c16d9
        );

    font-size: 10px;
    font-weight: 700;
}


/* META */

.sv3-next-service-meta {
    display: flex;
    align-items: center;

    gap: 9px;

    margin:
        9px 0;

    color: #aebbd0;

    font-size: 11px;
}


.sv3-next-service-meta
.dashicons {
    width: 18px;
    height: 18px;

    color: #d5dcff;

    font-size: 18px;
}


/* MINIATURES */

.sv3-next-service-thumbs {
    display: flex;

    gap: 6px;

    margin-top: 8px;
}


.sv3-next-service-thumbs img {
    width: 62px !important;
    height: 43px !important;

    display: block;

    object-fit: cover;

    border:
        1px solid
        rgba(109,132,168,.46);

    border-radius: 7px;
}


/* BOUTON BAS */

.sv3-next-service-button {
    width: 100%;

    min-height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 13px;

    border:
        1px solid
        #974bff;

    border-radius: 7px;

    color: #fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(54,14,111,.95),
            rgba(68,18,126,.95)
        );

    font-size: 11px;
    font-weight: 700;

    text-decoration: none !important;
}


.sv3-next-service-button:hover {
    background:
        linear-gradient(
            90deg,
            #4d168d,
            #6e1cc0
        );
}


.sv3-next-service-button span {
    font-size: 16px;
}


/* MOBILE */

@media (max-width: 760px) {

    .sv3-next-service-body {
        grid-template-columns: 1fr;
    }

    .sv3-next-service-cover {
        width: 100%;
        height: 210px;
    }

    .sv3-next-service-title {
        align-items: center;
    }
}



/* =========================================================
   MA DERNIERE COMMANDE
   STYLE MAQUETTE
   ========================================================= */

.sv3-last-order-card {
    display: flex;
    flex-direction: column;

    min-height: 335px !important;
}


.sv3-last-order-card > h2 {
    margin:
        0 0 12px !important;

    padding-bottom: 10px;

    border-bottom:
        1px solid
        rgba(115,137,170,.20);
}


/* CONTENU */

.sv3-last-order-body {
    display: grid;

    grid-template-columns:
        106px minmax(0,1fr);

    gap: 14px;

    flex: 1;
}


/* IMAGE */

.sv3-last-order-cover {
    width: 106px;
    height: 178px;

    overflow: hidden;

    border:
        1px solid
        rgba(104,130,170,.38);

    border-radius: 8px;

    background: #05080d;
}


.sv3-last-order-cover img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover;
}


/* INFORMATIONS */

.sv3-last-order-info {
    min-width: 0;

    padding-top: 4px;
}


.sv3-last-order-info h3 {
    margin:
        0 0 3px !important;

    color: #fff;

    font-size: 14px !important;
    line-height: 1.25;

    font-weight: 800;
}


.sv3-last-order-reference {
    margin-bottom: 12px;

    color: #8fb9ff;

    font-size: 10px;
    line-height: 1.25;

    word-break: break-word;
}


/* META */

.sv3-last-order-meta {
    display: flex;
    align-items: center;

    gap: 7px;

    margin:
        9px 0;

    color: #aebbd0;

    font-size: 11px;
}


.sv3-last-order-meta
.dashicons {
    width: 17px;
    height: 17px;

    color: #d9e1f5;

    font-size: 17px;
}


.sv3-last-order-price strong {
    color: #fff;

    font-size: 13px;
}


/* STATUT */

.sv3-last-order-status {
    display: inline-flex;
    align-items: center;

    margin-top: 5px;

    padding:
        5px 10px;

    border:
        1px solid
        rgba(45,115,255,.50);

    border-radius: 999px;

    color: #c4d9ff;

    background:
        rgba(21,72,150,.26);

    font-size: 10px;
    font-weight: 700;
}


/* BOUTON */

.sv3-last-order-button {
    width: 100%;

    min-height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 13px;

    border:
        1px solid
        rgba(128,167,225,.65);

    border-radius: 7px;

    color: #fff !important;

    background:
        rgba(5,11,19,.72);

    font-size: 11px;
    font-weight: 700;

    text-decoration: none !important;
}


.sv3-last-order-button:hover {
    border-color:
        rgba(132,177,255,.95);

    background:
        rgba(17,31,52,.90);
}


.sv3-last-order-button span {
    font-size: 16px;
}


/* MOBILE */

@media (max-width: 760px) {

    .sv3-last-order-body {
        grid-template-columns: 1fr;
    }

    .sv3-last-order-cover {
        width: 100%;
        height: 220px;
    }
}



/* =========================================================
   MES PAIEMENTS - MAQUETTE VALIDEE
   ========================================================= */

.sv3-dashboard-payment-card {
    display: flex;
    flex-direction: column;

    min-height: 335px !important;
}


.sv3-dashboard-payment-card > h2 {
    margin: 0 0 12px !important;

    padding-bottom: 10px;

    border-bottom:
        1px solid
        rgba(115,137,170,.20);

    color: #fff;

    font-size: 14px !important;
}


/* =========================================================
   CERCLE + TOTAL
   ========================================================= */

.sv3-dashboard-payment-main {
    display: flex;
    align-items: center;

    gap: 16px;

    padding:
        4px 2px 15px;
}


.sv3-dashboard-payment-ring {
    width: 84px;
    height: 84px;

    flex: 0 0 84px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        conic-gradient(
            #58e99a
            var(--sv-payment-progress),
            #27364b
            0
        );
}


.sv3-dashboard-payment-ring > div {
    width: 66px;
    height: 66px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        #09101a;
}


.sv3-dashboard-payment-ring strong {
    color: #fff;

    font-size: 18px;
    font-weight: 800;
}


.sv3-dashboard-payment-summary {
    min-width: 0;
}


.sv3-dashboard-payment-summary span,
.sv3-dashboard-payment-summary strong {
    display: block;
}


.sv3-dashboard-payment-summary span {
    margin-bottom: 5px;

    color: #b7c2d4;

    font-size: 11px;
}


.sv3-dashboard-payment-summary strong {
    color: #fff;

    font-size: 17px;
    line-height: 1.2;

    white-space: nowrap;
}


.sv3-dashboard-payment-summary small {
    color: #7f8da2;

    font-size: 12px;
}


/* =========================================================
   LIGNES
   ========================================================= */

.sv3-dashboard-payment-lines {
    border-top:
        1px solid
        rgba(110,132,167,.17);
}


.sv3-dashboard-payment-line {
    min-height: 42px;

    display: grid;

    grid-template-columns:
        18px
        minmax(0,1fr)
        auto
        auto;

    align-items: center;

    gap: 7px;

    border-bottom:
        1px solid
        rgba(110,132,167,.12);

    font-size: 9px;
}


.sv3-dashboard-payment-state {
    width: 14px;
    height: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}


.sv3-dashboard-payment-state.paid {
    color: #07120c;

    background: #5de79a;
}


.sv3-dashboard-payment-state.waiting {
    border:
        1px solid
        #65748b;

    background:
        #465269;
}


.sv3-dashboard-payment-label {
    color: #aab7ca;
}


.sv3-dashboard-payment-line strong {
    color: #dce5f3;

    white-space: nowrap;
}


.sv3-dashboard-payment-line b {
    white-space: nowrap;

    font-size: 9px;
}


.sv3-dashboard-payment-line b.paid {
    color: #5de79a;
}


.sv3-dashboard-payment-line b.waiting {
    color: #ff9c32;
}


/* =========================================================
   BOUTON
   ========================================================= */

.sv3-dashboard-payment-button {
    width: 100%;

    min-height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: auto;

    border:
        1px solid
        rgba(128,167,225,.65);

    border-radius: 7px;

    color: #fff !important;

    background:
        rgba(5,11,19,.72);

    font-size: 11px;
    font-weight: 700;

    text-decoration: none !important;
}


.sv3-dashboard-payment-button:hover {
    border-color:
        rgba(132,177,255,.95);

    background:
        rgba(17,31,52,.90);
}


.sv3-dashboard-payment-button span {
    font-size: 16px;
}


/* MOBILE */

@media (max-width: 760px) {

    .sv3-dashboard-payment-main {
        justify-content: flex-start;
    }

    .sv3-dashboard-payment-line {
        grid-template-columns:
            18px
            minmax(0,1fr)
            auto;

        gap: 7px;
    }

    .sv3-dashboard-payment-line > b {
        grid-column: 2 / -1;
    }
}



/* =========================================================
   DASHBOARD - DEUXIEME LIGNE
   MESSAGES | FICHIERS | RENDEZ-VOUS
   MAQUETTE VALIDEE
   ========================================================= */

.sv3-secondary-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap: 12px !important;

    margin-top: 12px !important;
}


.sv3-dash-mini-card {
    min-height: 205px !important;

    display: flex !important;
    flex-direction: column;

    padding: 13px 14px !important;

    border:
        1px solid
        rgba(87,126,169,.35) !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,17,27,.99),
            rgba(6,11,18,.99)
        ) !important;
}


/* =========================================================
   TITRES
   ========================================================= */

.sv3-dash-mini-card > h2 {
    min-height: 25px;

    display: flex;
    align-items: center;

    gap: 7px;

    margin: 0 !important;

    padding:
        0 0 10px !important;

    border-bottom:
        1px solid
        rgba(107,132,169,.18);

    color: #fff !important;

    font-size: 12px !important;
    font-weight: 800 !important;
}


.sv3-dash-mini-card > h2
.dashicons {
    width: 18px;
    height: 18px;

    color: #dbe6fa;

    font-size: 18px;
}


/* Badge compteur messages */

.sv3-dash-mini-card
.sv3-badge {
    min-width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: auto;

    padding: 0 6px;

    border-radius: 999px;

    color: #fff;

    background: #ff3f61;

    font-size: 9px;
    font-weight: 800;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.sv3-dash-messages
.sv3-message {
    min-height: 58px;

    display: grid;

    grid-template-columns:
        35px
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 9px;

    margin: 0 !important;

    padding:
        8px 0 !important;

    border-bottom:
        1px solid
        rgba(108,131,165,.13);
}


.sv3-dash-messages
.sv3-message > div:first-child {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(119,145,183,.28);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #253044,
            #121925
        );
}


.sv3-dash-messages
.sv3-message > div:first-child
.dashicons {
    width: 17px;
    height: 17px;

    color: #fff;

    font-size: 17px;
}


.sv3-dash-messages
.sv3-message p {
    min-width: 0;

    margin: 0 !important;
}


.sv3-dash-messages
.sv3-message p strong,
.sv3-dash-messages
.sv3-message p span,
.sv3-dash-messages
.sv3-message p small {
    display: block;
}


.sv3-dash-messages
.sv3-message p strong {
    margin-bottom: 2px;

    color: #fff;

    font-size: 10px;
}


.sv3-dash-messages
.sv3-message p span {
    overflow: hidden;

    color: #a9b6c9;

    font-size: 9px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.sv3-dash-messages
.sv3-message p small {
    margin-top: 2px;

    color: #687991;

    font-size: 8px;
}


.sv3-dash-messages
.sv3-message > small {
    align-self: start;

    padding-top: 3px;

    color: #91a0b5;

    font-size: 8px;

    white-space: nowrap;
}


/* =========================================================
   FICHIERS
   ========================================================= */

.sv3-dash-files
.sv3-file {
    min-height: 43px;

    display: grid;

    grid-template-columns:
        29px
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 8px;

    padding:
        6px 0 !important;

    border-bottom:
        1px solid
        rgba(108,131,165,.13);
}


.sv3-dash-files
.sv3-file > span:first-child {
    width: 27px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 4px;

    background:
        linear-gradient(
            145deg,
            #e8335a,
            #a51135
        );
}


.sv3-dash-files
.sv3-file > span:first-child
.dashicons {
    width: 16px;
    height: 16px;

    color: #fff;

    font-size: 16px;
}


.sv3-dash-files
.sv3-file > strong {
    min-width: 0;

    overflow: hidden;

    color: #e9eef8;

    font-size: 9px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.sv3-dash-files
.sv3-file > small {
    color: #8c9bb0;

    font-size: 8px;

    white-space: nowrap;
}


/*
 * Le bouton Télécharger présent dans les données
 * devient discret dans la carte dashboard.
 */

.sv3-dash-files
.sv3-file > .sv3-text-link {
    grid-column:
        2 / -1;

    margin: -3px 0 0 !important;

    font-size: 8px !important;
}


/* =========================================================
   RENDEZ-VOUS
   ========================================================= */

.sv3-dash-appointments
.sv3-appointment,
.sv3-dash-appointments
[class*="appointment"] {
    border-color:
        rgba(108,131,165,.13);
}


/*
 * Les rendez-vous existants utilisent plusieurs éléments.
 * On compacte tout le contenu sans modifier les données PHP.
 */

.sv3-dash-appointments
.sv3-payment-row {
    min-height: 46px;

    margin: 0 !important;

    padding:
        8px 0 !important;

    border-bottom:
        1px solid
        rgba(108,131,165,.13);
}


.sv3-dash-appointments
.sv3-payment-row span {
    color: #e8edf6;

    font-size: 9px;
}


.sv3-dash-appointments
.sv3-payment-row strong {
    color: #aab7ca;

    font-size: 9px;
}


.sv3-dash-appointments
.sv3-payment-row b {
    padding:
        4px 8px;

    border:
        1px solid
        rgba(45,115,255,.45);

    border-radius: 999px;

    color: #bcd5ff;

    background:
        rgba(24,78,159,.25);

    font-size: 8px;

    white-space: nowrap;
}


/* =========================================================
   LIENS BAS DE CARTE
   ========================================================= */

.sv3-dash-mini-card
> .sv3-text-link {
    min-height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: auto !important;

    padding-top: 9px;

    border-top:
        1px solid
        rgba(107,132,169,.14);

    color: #75baff !important;

    font-size: 9px !important;
    font-weight: 700;

    text-decoration: none !important;
}


.sv3-dash-mini-card
> .sv3-text-link:hover {
    color: #b49aff !important;
}


/* =========================================================
   ETATS VIDES
   ========================================================= */

.sv3-dash-mini-card
> .sv3-payment-row {
    margin-top: 7px;
}


.sv3-dash-mini-card
.waiting {
    color: #ff9c32;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .sv3-secondary-grid {
        grid-template-columns:
            1fr 1fr !important;
    }

    .sv3-dash-appointments {
        grid-column:
            1 / -1;
    }
}


@media (max-width: 700px) {

    .sv3-secondary-grid {
        grid-template-columns:
            1fr !important;
    }

    .sv3-dash-appointments {
        grid-column: auto;
    }
}



/* =========================================================
   MES PRESTATIONS
   MAQUETTE VALIDEE - 13/09/2026
   ========================================================= */


/* PAGE */

.sv3-prestations-page {
    width: 100%;
}


/* =========================================================
   ENTETE
   ========================================================= */

.sv3-prestations-page
.sv3-prestations-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 17px;
}


.sv3-prestations-page
.sv3-prestations-header h1 {
    margin: 0 0 4px !important;

    color: #fff;

    font-size: 27px !important;
    line-height: 1.15;

    font-weight: 800;
}


.sv3-prestations-page
.sv3-prestations-header p {
    margin: 0 !important;

    color: #91a8c7;

    font-size: 11px;
    line-height: 1.4;
}


/* BOUTON NOUVELLE PRESTATION */

.sv3-prestations-page
.sv3-prestations-new {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    flex: 0 0 auto;

    padding: 0 18px;

    border:
        1px solid
        rgba(174,77,255,.85);

    border-radius: 7px;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #6420cb,
            #8a20e3
        );

    font-size: 10px;
    font-weight: 800;

    text-decoration: none !important;
}


.sv3-prestations-page
.sv3-prestations-new:hover {
    filter: brightness(1.12);
}


/* =========================================================
   FILTRES
   ========================================================= */

.sv3-prestations-page
.sv3-prestations-tabs {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin:
        0 0 10px !important;
}


.sv3-prestations-page
.sv3-prestations-tabs button {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(91,122,160,.55);

    border-radius: 5px;

    color: #e4ebf7;

    background:
        rgba(8,15,24,.94);

    font-size: 9px;
    font-weight: 700;

    cursor: pointer;
}


.sv3-prestations-page
.sv3-prestations-tabs button:hover {
    border-color:
        rgba(143,101,255,.75);
}


.sv3-prestations-page
.sv3-prestations-tabs button.active {
    border-color:
        #8443d7;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(83,34,149,.96),
            rgba(69,29,126,.96)
        );
}


.sv3-prestations-page
.sv3-prestations-tabs button span {
    color: inherit;

    opacity: .82;
}


/* =========================================================
   LISTE
   ========================================================= */

.sv3-prestations-page
.sv3-prestations-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


/* =========================================================
   CARTE
   ========================================================= */

.sv3-prestations-page
.sv3-prestation-row {
    min-height: 124px;

    display: grid !important;

    grid-template-columns:
        132px
        minmax(0,1fr)
        190px;

    align-items: stretch;

    gap: 16px;

    padding: 10px !important;

    border:
        1px solid
        rgba(72,113,156,.52) !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            rgba(8,16,26,.99),
            rgba(6,12,20,.99)
        ) !important;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.sv3-prestations-page
.sv3-prestation-row:hover {
    border-color:
        rgba(69,144,235,.78) !important;

    background:
        linear-gradient(
            145deg,
            rgba(11,22,35,.99),
            rgba(7,14,23,.99)
        ) !important;

    transform:
        translateY(-1px);
}


/* =========================================================
   IMAGE
   ========================================================= */

.sv3-prestations-page
.sv3-prestation-picture {
    width: 132px;
    height: 102px;

    overflow: hidden;

    align-self: center;

    border:
        1px solid
        rgba(96,127,167,.50);

    border-radius: 6px;

    background: #03070d;
}


.sv3-prestations-page
.sv3-prestation-picture img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover;
}


/* =========================================================
   CENTRE
   ========================================================= */

.sv3-prestations-page
.sv3-prestation-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.sv3-prestations-page
.sv3-prestation-name {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 2px;
}


.sv3-prestations-page
.sv3-prestation-name h3 {
    margin: 0 !important;

    color: #fff;

    font-size: 15px !important;
    line-height: 1.25;

    font-weight: 800;
}


/* STATUT */

.sv3-prestations-page
.sv3-prestation-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 22px;

    padding:
        0 10px;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}


.sv3-prestations-page
.sv3-prestation-status--pending {
    border:
        1px solid
        rgba(46,139,255,.75);

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #1265bb,
            #1977d2
        );
}


.sv3-prestations-page
.sv3-prestation-status--preparing {
    border:
        1px solid
        rgba(180,64,255,.80);

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7020c7,
            #a021dd
        );
}


.sv3-prestations-page
.sv3-prestation-status--validated {
    border:
        1px solid
        rgba(46,214,130,.75);

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #11894d,
            #18aa62
        );
}


.sv3-prestations-page
.sv3-prestation-status--finished {
    border:
        1px solid
        rgba(121,139,163,.55);

    color: #d4dce8;

    background:
        rgba(65,78,96,.55);
}


/* REFERENCE */

.sv3-prestations-page
.sv3-prestation-reference {
    display: block;

    margin:
        1px 0 6px;

    color: #6fa9ee;

    font-size: 8px;
    line-height: 1.2;
}


/* META */

.sv3-prestations-page
.sv3-prestation-meta {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.sv3-prestations-page
.sv3-prestation-meta > span {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 6px;

    color: #d6dfed;

    font-size: 9px;
    line-height: 1.25;
}


.sv3-prestations-page
.sv3-prestation-meta
.dashicons {
    width: 14px;
    height: 14px;

    flex: 0 0 14px;

    color: #a8b8ff;

    font-size: 14px;
}


/* =========================================================
   PRIX + BOUTON
   ========================================================= */

.sv3-prestations-page
.sv3-prestation-right {
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-end;
    justify-content: center;

    text-align: right;
}


.sv3-prestations-page
.sv3-prestation-price {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 15px;
    line-height: 1.2;

    font-weight: 800;
}


.sv3-prestations-page
.sv3-prestation-deposit {
    display: block;

    min-height: 14px;

    margin-bottom: 17px;

    color: #44baff;

    font-size: 8px;
    font-weight: 700;
}


/*
 * Le lien existant de la carte reste utilisé.
 */

.sv3-prestations-page
.sv3-prestation-right a {
    width: 180px;
    min-height: 35px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: auto;

    border:
        1px solid
        rgba(42,135,240,.90) !important;

    border-radius: 6px !important;

    color: #fff !important;

    background:
        rgba(5,35,68,.62) !important;

    font-size: 9px !important;
    font-weight: 800;

    text-decoration: none !important;
}


.sv3-prestations-page
.sv3-prestation-right a:hover {
    border-color:
        #4ca3ff !important;

    background:
        rgba(10,61,111,.78) !important;
}


/* =========================================================
   ETAT VIDE
   ========================================================= */

.sv3-prestations-page
.sv3-prestations-empty {
    min-height: 110px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 18px;

    border:
        1px solid
        rgba(79,112,151,.35);

    border-radius: 7px;

    background:
        rgba(7,13,21,.80);
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 950px) {

    .sv3-prestations-page
    .sv3-prestation-row {
        grid-template-columns:
            115px
            minmax(0,1fr)
            160px;
    }

    .sv3-prestations-page
    .sv3-prestation-picture {
        width: 115px;
        height: 100px;
    }

    .sv3-prestations-page
    .sv3-prestation-right a {
        width: 150px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .sv3-prestations-page
    .sv3-prestations-header {
        flex-direction: column;
    }

    .sv3-prestations-page
    .sv3-prestations-new {
        width: 100%;
    }

    .sv3-prestations-page
    .sv3-prestation-row {
        grid-template-columns: 92px minmax(0,1fr);

        gap: 11px;
    }

    .sv3-prestations-page
    .sv3-prestation-picture {
        width: 92px;
        height: 92px;

        align-self: start;
    }

    .sv3-prestations-page
    .sv3-prestation-right {
        grid-column: 1 / -1;

        display: grid;

        grid-template-columns:
            1fr auto;

        align-items: center;

        gap: 5px 12px;

        padding-top: 8px;

        border-top:
            1px solid
            rgba(101,127,162,.16);

        text-align: left;
    }

    .sv3-prestations-page
    .sv3-prestation-price,
    .sv3-prestations-page
    .sv3-prestation-deposit {
        margin: 0;
    }

    .sv3-prestations-page
    .sv3-prestation-right a {
        width: auto;

        grid-column: 2;
        grid-row: 1 / span 2;

        padding: 0 15px;
    }
}



/* =========================================================
   PAGE MES COMMANDES V2
   ========================================================= */

.sv3-orders-page {
    width: 100%;
}


/* ENTETE */

.sv3-orders-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 17px;
}


.sv3-orders-header h1 {
    display: flex;
    align-items: center;

    gap: 9px;

    margin: 0 0 4px !important;

    color: #fff;

    font-size: 27px !important;
    line-height: 1.15;

    font-weight: 800;
}


.sv3-orders-header h1 .dashicons {
    width: 24px;
    height: 24px;

    color: #fff;

    font-size: 24px;
}


.sv3-orders-header p {
    margin: 0 !important;

    color: #91a8c7;

    font-size: 11px;
}


/* BOUTIQUE */

.sv3-orders-shop-button {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 0 18px;

    border:
        1px solid
        rgba(174,77,255,.85);

    border-radius: 7px;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #6420cb,
            #8a20e3
        );

    font-size: 10px;
    font-weight: 800;

    text-decoration: none !important;
}


/* FILTRES */

.sv3-orders-tabs {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 10px;
}


.sv3-orders-tabs button {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding: 0 14px;

    border:
        1px solid
        rgba(91,122,160,.55);

    border-radius: 5px;

    color: #e4ebf7;

    background:
        rgba(8,15,24,.94);

    font-size: 9px;
    font-weight: 700;

    cursor: pointer;
}


.sv3-orders-tabs button.active {
    border-color: #8443d7;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(83,34,149,.96),
            rgba(69,29,126,.96)
        );
}


/* LISTE */

.sv3-orders-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


/* CARTE */

.sv3-order-card {
    min-height: 132px;

    display: grid;

    grid-template-columns:
        105px
        minmax(0,1fr)
        190px;

    gap: 16px;

    padding: 10px;

    border:
        1px solid
        rgba(72,113,156,.52);

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(8,16,26,.99),
            rgba(6,12,20,.99)
        );
}


/* IMAGE */

.sv3-order-card-picture {
    width: 105px;
    height: 112px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(96,127,167,.50);

    border-radius: 6px;

    background: #03070d;
}


.sv3-order-card-picture img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.sv3-order-card-picture > .dashicons {
    width: 34px;
    height: 34px;

    color: #7e92b1;

    font-size: 34px;
}


/* CENTRE */

.sv3-order-card-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.sv3-order-card-title {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.sv3-order-card-title h3 {
    margin: 0 !important;

    color: #fff;

    font-size: 15px !important;

    font-weight: 800;
}


.sv3-order-reference {
    margin: 2px 0 7px;

    color: #6fa9ee;

    font-size: 8px;
}


/* STATUT COMMANDE */

.sv3-order-status {
    display: inline-flex;
    align-items: center;

    min-height: 22px;

    padding: 0 9px;

    border-radius: 999px;

    color: #fff;

    font-size: 8px;
    font-weight: 800;
}


.sv3-order-status--pending {
    border:
        1px solid
        rgba(50,126,255,.65);

    background:
        rgba(22,80,166,.52);
}


.sv3-order-status--processing {
    border:
        1px solid
        rgba(159,61,255,.75);

    background:
        rgba(113,27,190,.68);
}


.sv3-order-status--confirmed {
    border:
        1px solid
        rgba(38,197,119,.75);

    background:
        rgba(16,128,71,.62);
}


.sv3-order-status--shipped {
    border:
        1px solid
        rgba(43,159,255,.75);

    background:
        rgba(15,104,178,.65);
}


.sv3-order-status--completed {
    background:
        rgba(28,137,76,.68);
}


.sv3-order-status--cancelled,
.sv3-order-status--refunded {
    background:
        rgba(121,70,83,.68);
}


/* META */

.sv3-order-card-meta {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.sv3-order-card-meta > span {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #d6dfed;

    font-size: 9px;
}


.sv3-order-card-meta .dashicons {
    width: 14px;
    height: 14px;

    color: #a8b8ff;

    font-size: 14px;
}


.sv3-order-card-meta strong {
    color: #fff;
}


/* ARTICLES */

.sv3-order-card-items {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 7px;
}


.sv3-order-card-items span {
    padding:
        3px 7px;

    border:
        1px solid
        rgba(90,116,151,.30);

    border-radius: 4px;

    color: #aebcd0;

    background:
        rgba(19,30,45,.65);

    font-size: 8px;
}


/* DROITE */

.sv3-order-card-right {
    display: flex;
    flex-direction: column;

    align-items: flex-end;
    justify-content: center;

    text-align: right;
}


.sv3-order-card-price {
    color: #fff;

    font-size: 16px;
}


.sv3-order-payment-status {
    margin-top: 4px;

    font-size: 8px;
    font-weight: 800;
}


.sv3-order-payment-status.paid {
    color: #57e397;
}


.sv3-order-payment-status.waiting {
    color: #ff9c32;
}


/* BOUTON */

.sv3-order-view-button {
    width: 180px;
    min-height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: auto;

    border:
        1px solid
        rgba(42,135,240,.90);

    border-radius: 6px;

    color: #fff !important;

    background:
        rgba(5,35,68,.62);

    font-size: 9px;
    font-weight: 800;

    text-decoration: none !important;
}


.sv3-order-view-button:hover {
    background:
        rgba(10,61,111,.78);
}


/* VIDE */

.sv3-orders-empty {
    min-height: 120px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 20px;

    border:
        1px solid
        rgba(79,112,151,.35);

    border-radius: 7px;

    background:
        rgba(7,13,21,.80);
}


/* RESPONSIVE */

@media (max-width: 750px) {

    .sv3-orders-header {
        flex-direction: column;
    }

    .sv3-orders-shop-button {
        width: 100%;
    }

    .sv3-order-card {
        grid-template-columns:
            90px minmax(0,1fr);
    }

    .sv3-order-card-picture {
        width: 90px;
        height: 100px;
    }

    .sv3-order-card-right {
        grid-column: 1 / -1;

        display: grid;

        grid-template-columns:
            1fr auto;

        gap: 6px 12px;

        padding-top: 8px;

        border-top:
            1px solid
            rgba(101,127,162,.16);

        text-align: left;
    }

    .sv3-order-view-button {
        width: auto;

        grid-column: 2;
        grid-row: 1 / span 2;

        margin: 0;

        padding: 0 15px;
    }
}


/* =========================================================
   MES COMMANDES - IMAGE COMPLETE SANS RECADRAGE
   ========================================================= */

.sv3-order-card-picture {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    background: #03070d !important;
}

.sv3-order-card-picture img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    display: block !important;
}



/* =========================================================
   FICHE DETAIL COMMANDE
   ========================================================= */

.sv3-order-detail-page {
    display: none;

    width: 100%;
}


.sv3-order-detail-back {
    display: inline-flex;

    margin-bottom: 10px;

    color: #83bfff !important;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.sv3-order-detail-header {
    display: grid;

    grid-template-columns:
        62px
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 12px;

    margin-bottom: 10px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(82,118,160,.35);

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(10,17,27,.98),
            rgba(6,11,18,.98)
        );
}


.sv3-order-detail-thumb {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 6px;

    background: #03070c;
}


.sv3-order-detail-thumb img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}


.sv3-order-detail-heading {
    min-width: 0;
}


.sv3-order-detail-heading > div {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.sv3-order-detail-heading h1 {
    margin: 0 !important;

    color: #fff;

    font-size: 17px !important;
}


.sv3-order-detail-heading p {
    margin:
        4px 0 0 !important;

    color: #8293aa;

    font-size: 9px;
}


.sv3-order-detail-heading p span {
    padding: 0 4px;
}


.sv3-order-detail-status {
    padding:
        4px 9px;

    border:
        1px solid
        rgba(56,130,255,.55);

    border-radius: 999px;

    color: #c8dcff;

    background:
        rgba(21,79,165,.30);

    font-size: 8px;
    font-weight: 800;
}


.sv3-order-detail-total {
    color: #fff;

    font-size: 18px;
}


/* =========================================================
   TABS
   ========================================================= */

.sv3-order-detail-tabs {
    display: grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    margin-bottom: 10px;

    border-bottom:
        1px solid
        rgba(98,124,160,.25);
}


.sv3-order-detail-tabs button {
    min-height: 35px;

    border: 0;
    border-bottom:
        2px solid transparent;

    color: #8190a6;

    background: transparent;

    font-size: 9px;
    font-weight: 700;

    cursor: pointer;
}


.sv3-order-detail-tabs button.active {
    border-bottom-color:
        #8c4dff;

    color: #fff;
}


/* =========================================================
   PANELS
   ========================================================= */

.sv3-order-detail-panel {
    display: none;
}


.sv3-order-detail-panel.active {
    display: block;
}


/* =========================================================
   APERCU
   ========================================================= */

.sv3-order-overview-grid {
    display: grid;

    grid-template-columns:
        minmax(250px,.95fr)
        minmax(300px,1.2fr)
        minmax(240px,.85fr);

    gap: 12px;
}


.sv3-order-overview-image,
.sv3-order-overview-info,
.sv3-order-overview-actions,
.sv3-order-detail-box {
    overflow: hidden;

    border:
        1px solid
        rgba(82,118,160,.35);

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(10,17,27,.98),
            rgba(6,11,18,.98)
        );
}


/* IMAGE COMPLETE */

.sv3-order-overview-image {
    min-height: 270px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px;
}


.sv3-order-overview-image img {
    width: 100%;
    height: 260px;

    object-fit: contain;
    object-position: center;

    border-radius: 5px;
}


/* INFORMATIONS */

.sv3-order-overview-info {
    padding:
        13px 14px;
}


.sv3-order-overview-info h2,
.sv3-order-overview-actions h2,
.sv3-order-detail-box h2 {
    margin:
        0 0 10px !important;

    color: #fff;

    font-size: 12px !important;
}


.sv3-order-overview-info > div {
    min-height: 37px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    border-bottom:
        1px solid
        rgba(105,128,160,.12);
}


.sv3-order-overview-info > div:last-child {
    border-bottom: 0;
}


.sv3-order-overview-info span {
    color: #8291a8;

    font-size: 9px;
}


.sv3-order-overview-info strong {
    color: #fff;

    font-size: 10px;

    text-align: right;
}


/* ACTIONS */

.sv3-order-overview-actions {
    padding:
        13px 10px;
}


.sv3-order-overview-actions > button {
    width: 100%;
    min-height: 45px;

    display: grid;

    grid-template-columns:
        25px
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 8px;

    padding:
        6px 7px;

    border: 0;
    border-bottom:
        1px solid
        rgba(105,128,160,.12);

    color: inherit;

    background: transparent;

    text-align: left;

    cursor: pointer;
}


.sv3-order-overview-actions > button:hover {
    background:
        rgba(93,54,160,.10);
}


.sv3-order-overview-actions
.dashicons {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 5px;

    color: #af83ff;

    background:
        rgba(118,68,206,.15);

    font-size: 15px;
}


.sv3-order-overview-actions strong,
.sv3-order-overview-actions small {
    display: block;
}


.sv3-order-overview-actions strong {
    color: #fff;

    font-size: 9px;
}


.sv3-order-overview-actions small {
    margin-top: 2px;

    color: #73839a;

    font-size: 8px;
}


.sv3-order-overview-actions b {
    color: #77879d;
}


/* =========================================================
   PANNEAUX DETAIL
   ========================================================= */

.sv3-order-detail-box {
    padding: 15px;
}


.sv3-order-detail-empty {
    margin:
        10px 0 0 !important;

    color: #8998ad;

    font-size: 10px;
}


/* ARTICLES */

.sv3-order-items-detail {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.sv3-order-item-detail {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(82,114,151,.28);

    border-radius: 6px;

    background:
        rgba(7,14,23,.75);
}


.sv3-order-item-detail strong {
    color: #fff;

    font-size: 10px;
}


.sv3-order-item-detail small {
    display: block;

    margin-top: 3px;

    color: #8291a8;

    font-size: 8px;
}


/* PAIEMENT */

.sv3-order-payment-summary {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 8px;

    margin-bottom: 12px;
}


.sv3-order-payment-summary article {
    padding:
        10px;

    border:
        1px solid
        rgba(82,114,151,.28);

    border-radius: 6px;

    background:
        rgba(7,14,23,.75);
}


.sv3-order-payment-summary span,
.sv3-order-payment-summary strong {
    display: block;
}


.sv3-order-payment-summary span {
    color: #7f8fa5;

    font-size: 8px;
}


.sv3-order-payment-summary strong {
    margin-top: 4px;

    color: #fff;

    font-size: 14px;
}


.sv3-order-detail-row {
    min-height: 42px;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto
        auto;

    align-items: center;

    gap: 12px;

    border-top:
        1px solid
        rgba(91,115,148,.15);

    font-size: 9px;
}


/* FACTURE */

.sv3-order-invoice-row {
    min-height: 55px;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto
        auto;

    align-items: center;

    gap: 12px;

    padding:
        8px 0;

    border-bottom:
        1px solid
        rgba(91,115,148,.15);
}


.sv3-order-invoice-row strong {
    color: #fff;

    font-size: 10px;
}


.sv3-order-invoice-row small {
    display: block;

    color: #7e8da3;

    font-size: 8px;
}


.sv3-order-invoice-row a {
    color: #72b9ff !important;

    font-size: 9px;
}


/* LIVRAISON */

.sv3-order-address {
    display: flex;

    gap: 12px;

    padding:
        12px;

    border:
        1px solid
        rgba(82,114,151,.28);

    border-radius: 6px;

    background:
        rgba(7,14,23,.75);
}


.sv3-order-address > .dashicons {
    color: #9f78ff;
}


.sv3-order-address strong,
.sv3-order-address span {
    display: block;
}


.sv3-order-address strong {
    margin-bottom: 5px;

    color: #fff;

    font-size: 10px;
}


.sv3-order-address span {
    color: #a4b0c1;

    font-size: 9px;
}


/* MESSAGE */

.sv3-order-message-button {
    min-height: 35px;

    display: inline-flex;
    align-items: center;

    margin-top: 12px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(59,144,255,.65);

    border-radius: 6px;

    color: #fff !important;

    background:
        rgba(9,55,105,.58);

    font-size: 9px;
    font-weight: 700;

    text-decoration: none !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .sv3-order-overview-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .sv3-order-overview-actions {
        grid-column:
            1 / -1;
    }
}


@media (max-width: 700px) {

    .sv3-order-detail-header {
        grid-template-columns:
            55px minmax(0,1fr);
    }

    .sv3-order-detail-total {
        grid-column:
            2;
    }

    .sv3-order-detail-tabs {
        grid-template-columns:
            repeat(3,1fr);
    }

    .sv3-order-overview-grid,
    .sv3-order-payment-summary {
        grid-template-columns:
            1fr;
    }

    .sv3-order-overview-actions {
        grid-column: auto;
    }
}



/* =========================================================
   MESSAGERIE FICHE COMMANDE
   ========================================================= */

.sv3-order-message-intro {
    margin: 0 0 14px !important;

    color: #8998ad;

    font-size: 10px;
}


.sv3-order-message-form {
    max-width: 760px;
}


.sv3-order-message-reference {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 14px;

    padding: 10px 12px;

    border: 1px solid rgba(123,76,219,.35);
    border-radius: 6px;

    background: rgba(103,55,181,.10);
}


.sv3-order-message-reference span {
    color: #8998ad;

    font-size: 9px;
}


.sv3-order-message-reference strong {
    color: #b996ff;

    font-size: 10px;
}


.sv3-order-message-form label {
    display: block;

    margin-bottom: 6px;

    color: #fff;

    font-size: 9px;
    font-weight: 700;
}


.sv3-order-message-form textarea {
    width: 100%;
    min-height: 130px;

    resize: vertical;

    padding: 12px;

    border: 1px solid rgba(85,113,151,.45);
    border-radius: 6px;

    outline: none;

    color: #fff;

    background: #060c14;

    font: inherit;
    font-size: 10px;
}


.sv3-order-message-form textarea:focus {
    border-color: #8754ed;

    box-shadow:
        0 0 0 2px
        rgba(135,84,237,.10);
}


.sv3-order-message-submit {
    min-height: 36px;

    margin-top: 10px;

    padding: 0 18px;

    border: 1px solid #874fe9;
    border-radius: 6px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7132d2,
            #481590
        );

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}



/* =========================================================
   PAGE MESSAGES
   ========================================================= */

.sv3-messages-page {
    display: none;

    width: 100%;
}


.sv3-messages-header {
    margin-bottom: 10px;
}


.sv3-messages-header h1 {
    margin: 0 !important;

    color: #fff;

    font-size: 18px !important;
}


.sv3-messages-header p {
    margin: 4px 0 0 !important;

    color: #8696ac;

    font-size: 9px;
}


.sv3-messages-layout {
    display: grid;

    grid-template-columns:
        290px
        minmax(0,1fr);

    min-height: 510px;

    overflow: hidden;

    border:
        1px solid
        rgba(78,112,150,.35);

    border-radius: 7px;

    background:
        #070d15;
}


/* =========================================================
   COLONNE CONVERSATIONS
   ========================================================= */

.sv3-conversations {
    padding: 8px;

    border-right:
        1px solid
        rgba(78,112,150,.30);

    background:
        #08101a;
}


.sv3-conversation-item {
    width: 100%;

    display: grid;

    grid-template-columns:
        38px
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 8px;

    padding:
        9px 8px;

    border:
        1px solid transparent;

    border-radius: 6px;

    color: inherit;

    background: transparent;

    text-align: left;

    cursor: pointer;
}


.sv3-conversation-item:hover {
    background:
        rgba(71,98,139,.10);
}


.sv3-conversation-item.active {
    border-color:
        rgba(119,69,220,.45);

    background:
        linear-gradient(
            135deg,
            rgba(74,36,131,.28),
            rgba(16,27,43,.45)
        );
}


.sv3-conversation-avatar {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        #131b29;

    font-size: 17px;
}


.sv3-conversation-content {
    min-width: 0;
}


.sv3-conversation-content strong,
.sv3-conversation-content small,
.sv3-conversation-content em {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.sv3-conversation-content strong {
    color: #fff;

    font-size: 9px;
}


.sv3-conversation-content small {
    margin-top: 2px;

    color: #8a75bd;

    font-size: 7px;
}


.sv3-conversation-content em {
    margin-top: 4px;

    color: #8392a7;

    font-size: 8px;
    font-style: normal;
}


.sv3-conversation-meta {
    align-self: start;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 4px;
}


.sv3-conversation-meta small {
    color: #708197;

    font-size: 7px;
}


.sv3-conversation-meta b {
    min-width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background: #ff4265;

    font-size: 7px;
}


/* =========================================================
   PANNEAU DISCUSSION
   ========================================================= */

.sv3-conversation-panels {
    min-width: 0;
}


.sv3-conversation-panel {
    display: none;

    height: 100%;
}


.sv3-conversation-panel.active {
    display: grid;

    grid-template-rows:
        auto
        minmax(0,1fr)
        auto;
}


.sv3-conversation-header {
    min-height: 54px;

    display: flex;
    align-items: center;

    padding:
        9px 12px;

    border-bottom:
        1px solid
        rgba(78,112,150,.25);

    background:
        #09111c;
}


.sv3-conversation-header strong,
.sv3-conversation-header small {
    display: block;
}


.sv3-conversation-header strong {
    color: #fff;

    font-size: 10px;
}


.sv3-conversation-header small {
    margin-top: 3px;

    color: #8b73bd;

    font-size: 8px;
}


/* =========================================================
   FIL DE DISCUSSION
   ========================================================= */

.sv3-message-thread {
    min-height: 370px;
    max-height: 470px;

    overflow-y: auto;

    padding:
        15px 14px;

    background:
        radial-gradient(
            circle at top right,
            rgba(75,34,127,.08),
            transparent 40%
        );
}


.sv3-chat-row {
    display: flex;

    margin-bottom: 9px;
}


.sv3-chat-row.client {
    justify-content: flex-end;
}


.sv3-chat-row.team {
    justify-content: flex-start;
}


.sv3-chat-bubble {
    max-width: 68%;

    padding:
        8px 10px;

    border-radius: 8px;

    font-size: 9px;
}


.sv3-chat-bubble.client {
    border:
        1px solid
        rgba(133,79,236,.50);

    background:
        linear-gradient(
            135deg,
            #6e31ca,
            #42117d
        );
}


.sv3-chat-bubble.team {
    border:
        1px solid
        rgba(72,105,145,.40);

    background:
        #111b29;
}


.sv3-chat-bubble strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 8px;
}


.sv3-chat-bubble p {
    margin: 0 !important;

    color: #fff;

    font-size: 9px;
    line-height: 1.45;
}


.sv3-chat-bubble small {
    display: block;

    margin-top: 4px;

    color: rgba(255,255,255,.62);

    font-size: 7px;

    text-align: right;
}


/* =========================================================
   FORMULAIRE
   ========================================================= */

.sv3-chat-form {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        40px;

    gap: 7px;

    padding:
        10px;

    border-top:
        1px solid
        rgba(78,112,150,.25);

    background:
        #09111c;
}


.sv3-chat-form textarea {
    width: 100%;
    min-height: 39px;
    max-height: 110px;

    resize: vertical;

    padding:
        10px 11px;

    border:
        1px solid
        rgba(77,112,153,.55);

    border-radius: 6px;

    outline: none;

    color: #fff;

    background:
        #050b12;

    font: inherit;
    font-size: 9px;
}


.sv3-chat-form textarea:focus {
    border-color:
        #8350e6;
}


.sv3-chat-form button {
    width: 40px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        #7440d5;

    border-radius: 6px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7132d2,
            #421078
        );

    cursor: pointer;
}


/* =========================================================
   EMPTY
   ========================================================= */

.sv3-messages-empty {
    min-height: 300px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    border:
        1px solid
        rgba(78,112,150,.35);

    border-radius: 7px;

    color: #8191a7;
}


.sv3-messages-empty strong {
    color: #fff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .sv3-messages-layout {
        grid-template-columns:
            1fr;
    }

    .sv3-conversations {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(78,112,150,.30);
    }

    .sv3-message-thread {
        min-height: 300px;
    }
}



/* =========================================================
   MESSAGERIE - SELECTEUR EMOJIS
   ========================================================= */

.sv3-chat-input-wrap {
    position: relative;

    min-width: 0;
}


.sv3-chat-input-wrap textarea {
    padding-right: 46px;
}


.sv3-emoji-toggle {
    position: absolute;

    right: 7px;
    bottom: 6px;

    width: 28px !important;
    height: 28px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;

    border:
        1px solid
        rgba(118,78,203,.50) !important;

    border-radius: 50% !important;

    color: #fff !important;

    background:
        rgba(85,43,156,.28) !important;

    font-size: 15px !important;

    cursor: pointer;
}


.sv3-emoji-toggle:hover {
    background:
        rgba(117,58,214,.45) !important;
}


.sv3-emoji-panel {
    position: absolute;

    right: 0;
    bottom: 46px;

    z-index: 50;

    width: 255px;

    display: none;

    grid-template-columns:
        repeat(7,1fr);

    gap: 5px;

    padding: 9px;

    border:
        1px solid
        rgba(103,75,167,.55);

    border-radius: 8px;

    background:
        #0a111c;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.45);
}


.sv3-emoji-panel.open {
    display: grid;
}


.sv3-emoji-panel button {
    width: 28px !important;
    height: 28px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 6px !important;

    background:
        transparent !important;

    font-size: 17px !important;

    cursor: pointer;
}


.sv3-emoji-panel button:hover {
    background:
        rgba(121,74,215,.20) !important;

    transform:
        scale(1.08);
}


@media (max-width: 650px) {

    .sv3-emoji-panel {
        width: 220px;

        grid-template-columns:
            repeat(6,1fr);
    }
}



/* =========================================================
   PAGE MES INFORMATIONS
   ========================================================= */

.sv3-profile-page {
    display: none;

    width: 100%;
}


.sv3-profile-header {
    margin-bottom: 12px;
}


.sv3-profile-header h1 {
    margin: 0 !important;

    color: #fff;

    font-size: 18px !important;
}


.sv3-profile-header p {
    margin: 4px 0 0 !important;

    color: #8796aa;

    font-size: 9px;
}


.sv3-profile-grid {
    display: grid;

    grid-template-columns:
        250px
        minmax(0,1fr);

    gap: 14px;
}


.sv3-profile-avatar-card,
.sv3-profile-fields {
    border:
        1px solid
        rgba(78,112,150,.35);

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(10,17,27,.98),
            rgba(6,11,18,.98)
        );
}


.sv3-profile-avatar-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 22px 16px;

    text-align: center;
}


.sv3-profile-avatar {
    width: 120px;
    height: 120px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    border:
        2px solid
        rgba(133,79,236,.60);

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #52229c,
            #151b2b
        );
}


.sv3-profile-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.sv3-profile-avatar span {
    color: #fff;

    font-size: 38px;
    font-weight: 800;
}


.sv3-profile-avatar-card > strong {
    color: #fff;

    font-size: 11px;
}


.sv3-profile-avatar-card > small {
    max-width: 190px;

    margin-top: 5px;

    color: #8190a5;

    font-size: 8px;
    line-height: 1.45;
}


.sv3-avatar-upload {
    min-height: 34px;

    display: inline-flex;
    align-items: center;

    margin-top: 14px;

    padding: 0 14px;

    border:
        1px solid
        rgba(126,75,222,.70);

    border-radius: 6px;

    color: #fff;

    background:
        rgba(91,40,168,.25);

    font-size: 9px;
    font-weight: 700;

    cursor: pointer;
}


.sv3-avatar-upload input {
    display: none;
}


.sv3-profile-fields {
    padding: 18px;
}


.sv3-profile-field-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}


.sv3-profile-fields label {
    display: block;

    margin-bottom: 12px;

    color: #fff;

    font-size: 9px;
    font-weight: 700;
}


.sv3-profile-fields input {
    width: 100%;
    min-height: 39px;

    margin-top: 6px;

    padding: 0 11px;

    border:
        1px solid
        rgba(77,112,153,.50);

    border-radius: 6px;

    outline: none;

    color: #fff;

    background:
        #050b12;

    font-size: 10px;
}


.sv3-profile-fields input:focus {
    border-color: #8251e6;
}


.sv3-profile-fields input[readonly] {
    opacity: .65;

    cursor: not-allowed;
}


.sv3-profile-save {
    min-height: 38px;

    padding: 0 18px;

    border:
        1px solid
        #844ee7;

    border-radius: 6px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7132d2,
            #481590
        );

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}


@media (max-width: 850px) {

    .sv3-profile-grid {
        grid-template-columns:
            1fr;
    }

    .sv3-profile-field-row {
        grid-template-columns:
            1fr;
    }
}



/* =========================================================
   AVATAR CLIENT UNIQUE
   ========================================================= */

.sv3-header-client-avatar {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(120,153,195,.60);

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #512399,
            #111a28
        );
}


.sv3-header-client-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}


.sv3-header-client-avatar span {
    color: #fff;

    font-size: 16px;
    font-weight: 800;
}


/* =========================================================
   AVATAR CLIENT DANS LE CHAT
   ========================================================= */

.sv3-chat-row.client {
    align-items: flex-end;

    gap: 7px;
}


.sv3-chat-client-avatar {
    order: 2;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(139,86,239,.55);

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #5523a1,
            #151c2b
        );
}


.sv3-chat-client-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}


.sv3-chat-client-avatar span {
    color: #fff;

    font-size: 10px;
    font-weight: 800;
}


.sv3-chat-row.client
.sv3-chat-bubble.client {
    order: 1;
}



/* =========================================================
   SV_CHAT_REFERENCE_STYLE
   ========================================================= */

.sv3-messages-layout {
    min-height: 500px;
}


.sv3-message-thread {
    padding: 18px;
}


/* =========================================================
   LIGNES
   ========================================================= */

.sv3-chat-row {
    width: 100%;

    display: flex;

    margin-bottom: 14px;
}


.sv3-chat-row.client {
    justify-content: flex-end;
}


.sv3-chat-row.team {
    justify-content: flex-start;

    align-items: flex-end;

    gap: 8px;
}


/* =========================================================
   BULLES
   ========================================================= */

.sv3-chat-bubble {
    position: relative;

    max-width: 72%;

    padding: 10px 13px;

    border-radius: 13px;

    line-height: 1.45;
}


.sv3-chat-bubble.client {
    background:
        linear-gradient(
            135deg,
            #6320c9,
            #8a2be2
        );

    border:
        1px solid
        rgba(181,116,255,.55);

    color: #fff;

    border-bottom-right-radius: 4px;
}


.sv3-chat-bubble.team {
    background: #121d31;

    border:
        1px solid
        rgba(78,112,160,.45);

    color: #e9f3ff;

    border-bottom-left-radius: 4px;
}


.sv3-chat-bubble strong {
    display: block;

    margin-bottom: 4px;

    font-size: 11px;

    font-weight: 800;
}


.sv3-chat-bubble p {
    margin: 0;

    font-size: 13px;
}


.sv3-chat-bubble small {
    display: block;

    margin-top: 5px;

    font-size: 9px;

    opacity: .65;
}


/* =========================================================
   AVATAR SPECTRAVISION
   ========================================================= */

.sv3-chat-team-avatar {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #401477,
            #08182d
        );

    border:
        1px solid
        rgba(116,86,223,.7);

    box-shadow:
        0 0 12px
        rgba(108,54,220,.25);
}


.sv3-chat-team-avatar span {
    color: #fff;

    font-size: 9px;

    font-weight: 900;
}


/* =========================================================
   CONVERSATIONS GAUCHE
   ========================================================= */

.sv3-conversation-item {
    min-height: 68px;
}


.sv3-conversation-item.active {
    background:
        linear-gradient(
            90deg,
            rgba(80,39,154,.38),
            rgba(24,38,66,.28)
        );
}


/* =========================================================
   ZONE DE SAISIE
   ========================================================= */

.sv3-chat-form {
    padding: 12px;
}


.sv3-chat-input-wrap {
    min-height: 44px;

    border-radius: 8px;
}


.sv3-chat-input-wrap textarea {
    min-height: 42px;
    max-height: 110px;
}



/* =========================================================
   SV_CHAT_COMPACT_REFERENCE_V2
   PROPORTIONS DE LA MAQUETTE VALIDEE
   ========================================================= */

.sv3-messages-page {
    max-width: 1180px;
}


/* CONTENEUR PRINCIPAL */

.sv3-messages-layout {
    display: grid !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;

    min-height: 0 !important;
    height: 510px !important;

    overflow: hidden;

    border-radius: 8px;
}


/* =========================================================
   COLONNE CONVERSATIONS
   ========================================================= */

.sv3-conversations {
    width: auto !important;

    overflow-y: auto;

    padding: 8px !important;
}


.sv3-conversation-item {
    width: 100%;

    min-height: 58px !important;

    padding: 7px 8px !important;

    gap: 9px !important;

    border-radius: 7px !important;
}


.sv3-conversation-avatar {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 16px !important;
}


.sv3-conversation-content strong {
    font-size: 11px !important;
    line-height: 1.25 !important;
}


.sv3-conversation-content small {
    font-size: 8px !important;
}


.sv3-conversation-content em {
    margin-top: 2px !important;

    font-size: 9px !important;

    line-height: 1.2 !important;
}


.sv3-conversation-meta small {
    font-size: 7px !important;
}


.sv3-conversation-meta b {
    width: 18px !important;
    height: 18px !important;

    min-width: 18px;

    font-size: 8px !important;
}


/* =========================================================
   PANNEAU DROIT
   ========================================================= */

.sv3-conversation-panels,
.sv3-conversation-panel.active {
    min-width: 0;

    height: 100% !important;
}


.sv3-conversation-panel.active {
    display: grid !important;

    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto;
}


/* HEADER CONVERSATION */

.sv3-conversation-header {
    min-height: 52px !important;

    padding: 10px 14px !important;
}


.sv3-conversation-header strong {
    font-size: 12px !important;
}


.sv3-conversation-header small {
    margin-top: 2px;

    font-size: 8px !important;
}


/* =========================================================
   FIL DE DISCUSSION
   ========================================================= */

.sv3-message-thread {
    min-height: 0 !important;

    overflow-y: auto !important;

    padding: 12px 14px !important;

    scroll-behavior: smooth;
}


.sv3-chat-row {
    margin-bottom: 9px !important;
}


.sv3-chat-row.client {
    gap: 6px !important;
}


.sv3-chat-row.team {
    gap: 6px !important;
}


/* =========================================================
   BULLES
   ========================================================= */

.sv3-chat-bubble {
    width: auto !important;

    max-width: 58% !important;

    padding: 8px 11px !important;

    border-radius: 11px !important;
}


.sv3-chat-bubble.client {
    border-bottom-right-radius: 4px !important;
}


.sv3-chat-bubble.team {
    border-bottom-left-radius: 4px !important;
}


.sv3-chat-bubble strong {
    margin-bottom: 3px !important;

    font-size: 10px !important;
}


.sv3-chat-bubble p {
    font-size: 11px !important;

    line-height: 1.35 !important;
}


.sv3-chat-bubble small {
    margin-top: 4px !important;

    font-size: 8px !important;
}


/* AVATARS DES MESSAGES */

.sv3-chat-client-avatar,
.sv3-chat-team-avatar {
    width: 28px !important;
    height: 28px !important;

    flex: 0 0 28px !important;
}


/* =========================================================
   BARRE D'ECRITURE
   ========================================================= */

.sv3-chat-form {
    padding: 9px 12px !important;
}


.sv3-chat-input-wrap {
    min-height: 42px !important;

    border-radius: 7px !important;
}


.sv3-chat-input-wrap textarea {
    min-height: 40px !important;

    padding-top: 11px !important;
    padding-bottom: 8px !important;

    font-size: 10px !important;
}


.sv3-emoji-toggle {
    width: 31px !important;
    height: 31px !important;
}


.sv3-chat-form button[type="submit"] {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;

    padding: 0 !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .sv3-messages-layout {
        grid-template-columns: 220px minmax(0, 1fr) !important;
    }

}


@media (max-width: 700px) {

    .sv3-messages-layout {
        display: block !important;

        height: auto !important;
    }

    .sv3-conversations {
        max-height: 230px;
    }

    .sv3-conversation-panel.active {
        height: 480px !important;
    }

    .sv3-chat-bubble {
        max-width: 78% !important;
    }

}



/* =========================================================
   SV_CHAT_REFERENCE_HEIGHT_V3
   HAUTEUR PROCHE DE LA MAQUETTE
   ========================================================= */

.sv3-messages-layout {
    height: 390px !important;
    min-height: 390px !important;
    max-height: 390px !important;
}


/* panneau de droite */

.sv3-conversation-panels {
    height: 390px !important;
    min-height: 0 !important;
    overflow: hidden !important;
}


.sv3-conversation-panel {
    height: 100% !important;
    min-height: 0 !important;
}


.sv3-conversation-panel.active {
    display: grid !important;

    grid-template-rows:
        52px
        minmax(0, 1fr)
        58px !important;

    overflow: hidden !important;
}


/* header */

.sv3-conversation-header {
    height: 52px !important;
    min-height: 52px !important;

    box-sizing: border-box;
}


/* messages : seul cet endroit défile */

.sv3-message-thread {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    padding: 10px 14px !important;
}


/* formulaire toujours visible */

.sv3-chat-form {
    position: relative !important;

    height: 58px !important;
    min-height: 58px !important;

    box-sizing: border-box;

    display: flex !important;
    align-items: center !important;

    padding: 8px 10px !important;

    background: #07111d !important;

    border-top:
        1px solid
        rgba(81,111,150,.35);
}


/* colonne gauche même hauteur */

.sv3-conversations {
    height: 390px !important;
    max-height: 390px !important;

    box-sizing: border-box;

    overflow-y: auto !important;
}


/* encore un peu plus proche de la maquette */

.sv3-conversation-item {
    min-height: 55px !important;
}


.sv3-chat-bubble {
    max-width: 52% !important;
}


@media (max-width: 700px) {

    .sv3-messages-layout,
    .sv3-conversation-panels,
    .sv3-conversations {
        height: auto !important;
        max-height: none !important;
    }

    .sv3-conversation-panel.active {
        height: 460px !important;
    }

}



/* =========================================================
   SV_CHAT_INPUT_WIDE_V4
   CHAMP D'ECRITURE LARGE
   ========================================================= */

.sv3-chat-form {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


.sv3-chat-input-wrap {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    display: flex !important;
    align-items: center !important;

    position: relative !important;
}


.sv3-chat-input-wrap textarea {
    flex: 1 1 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    box-sizing: border-box !important;

    padding-right: 44px !important;
}


.sv3-emoji-toggle {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    flex: 0 0 auto !important;
}


.sv3-chat-form button[type="submit"] {
    flex: 0 0 42px !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
}



/* =========================================================
   SV_CHAT_TEAM_FINAL_FIX
   ========================================================= */

.sv3-chat-row.team {
    justify-content: flex-start !important;
    align-items: flex-end !important;
}


.sv3-chat-row.client {
    justify-content: flex-end !important;
    align-items: flex-end !important;
}


.sv3-chat-row.team .sv3-chat-team-avatar {
    order: 1 !important;
}


.sv3-chat-row.team .sv3-chat-bubble {
    order: 2 !important;
}


.sv3-chat-row.client .sv3-chat-bubble {
    order: 1 !important;
}


.sv3-chat-row.client .sv3-chat-client-avatar {
    order: 2 !important;
}


.sv3-chat-bubble.team {
    background: #122038 !important;

    border:
        1px solid
        rgba(69,96,131,.65) !important;

    color: #eef5ff !important;

    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 11px !important;
}


.sv3-chat-bubble.client {
    background:
        linear-gradient(
            135deg,
            #6420c9,
            #8829e3
        ) !important;

    color: #fff !important;
}


.sv3-chat-team-avatar {
    width: 28px !important;
    height: 28px !important;

    flex: 0 0 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            135deg,
            #172c4b,
            #482080
        ) !important;

    border:
        1px solid
        #6550a8 !important;
}


.sv3-chat-team-avatar span {
    color: #fff !important;

    font-size: 8px !important;
    font-weight: 900 !important;
}



/* =========================================================
   SV_CHAT_TEXT_SIZE_V5
   TEXTE CLIENT PLUS LISIBLE
   ========================================================= */

.sv3-chat-bubble strong {
    font-size: 12px !important;
}


.sv3-chat-bubble p {
    font-size: 14px !important;
    line-height: 1.45 !important;
}


.sv3-chat-bubble small {
    font-size: 10px !important;
}


.sv3-chat-input-wrap textarea {
    font-size: 14px !important;
    line-height: 1.4 !important;
}


.sv3-chat-input-wrap textarea::placeholder {
    font-size: 14px !important;
}


.sv3-conversation-header strong {
    font-size: 14px !important;
}


.sv3-conversation-header small {
    font-size: 10px !important;
}


.sv3-conversation-content strong {
    font-size: 12px !important;
}


.sv3-conversation-content em {
    font-size: 10px !important;
}



/* =========================================================
   SV_CLIENT_RESPONSIVE_GLOBAL_V1
   ESPACE CLIENT RESPONSIVE
   ========================================================= */


/* =========================================================
   SECURITE GENERALE
   ========================================================= */

.sv3-layout,
.sv3-main,
.sv3-main *,
.sv3-dashboard-zone,
.sv3-panel,
.sv3-project-detail-page,
.sv3-order-detail-page,
.sv3-messages-page,
.sv3-profile-page {
    box-sizing: border-box;
}

.sv3-main {
    min-width: 0 !important;
    overflow-x: hidden;
}

.sv3-main img,
.sv3-project-detail-page img,
.sv3-order-detail-page img {
    max-width: 100%;
}


/* =========================================================
   TABLETTE LARGE
   ========================================================= */

@media (max-width: 1200px) {

    .sv3-layout {
        grid-template-columns:
            220px
            minmax(0,1fr) !important;
    }

    .sv3-sidebar {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .sv3-nav a {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px !important;
        font-size: 12px !important;
    }

    .sv3-main {
        padding:
            24px
            20px
            22px !important;
    }

    .sv3-welcome {
        grid-template-columns:
            minmax(0,1fr)
            300px !important;
    }

    .sv3-primary-grid,
    .sv3-dashboard-primary {
        gap: 14px !important;
    }

}


/* =========================================================
   TABLETTE / PETIT ECRAN
   SIDEBAR AU-DESSUS
   ========================================================= */

@media (max-width: 900px) {

    .sv3-layout {
        display: block !important;
        width: 100% !important;
    }


    /* SIDEBAR */

    .sv3-sidebar {
        position: relative !important;
        top: auto !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        padding:
            10px
            12px !important;

        border-right: 0 !important;
        border-bottom:
            1px solid
            var(--border) !important;

        overflow: visible !important;
    }


    .sv3-nav {
        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0,1fr)) !important;

        gap: 6px !important;
    }


    .sv3-nav a {
        min-width: 0 !important;
        min-height: 42px !important;

        padding:
            8px
            8px !important;

        justify-content: center !important;

        text-align: center !important;

        font-size: 11px !important;
    }


    .sv3-sidebar-bottom {
        display: none !important;
    }


    /* CONTENU */

    .sv3-main {
        width: 100% !important;

        padding:
            20px
            16px
            24px !important;
    }


    /* BIENVENUE */

    .sv3-welcome {
        display: block !important;
        min-height: 0 !important;
    }

    .sv3-welcome h1 {
        font-size: 26px !important;
    }

    .sv3-welcome-visual {
        display: none !important;
    }


    /* DASHBOARD */

    .sv3-primary-grid,
    .sv3-dashboard-primary {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }


    .sv3-dashboard-actions-bottom {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }


    /* DETAIL PROJET */

    .sv3-project-header {
        gap: 14px !important;
    }

    .sv3-project-header-main {
        min-width: 0 !important;
    }

    .sv3-project-reference-layout {
        grid-template-columns:
            1fr
            1fr !important;
    }

    .sv3-project-reference-image {
        grid-column:
            1 / -1 !important;
    }


    /* TABS */

    .sv3-project-tabs {
        overflow-x: auto !important;
        overflow-y: hidden !important;

        flex-wrap: nowrap !important;

        scrollbar-width: thin;
    }

    .sv3-project-tabs > * {
        flex:
            0
            0
            auto !important;

        white-space: nowrap !important;
    }


    /* COMMANDES */

    .sv3-order-card {
        min-width: 0 !important;
    }


    /* CHAT */

    .sv3-messages-layout {
        width: 100% !important;
        max-width: 100% !important;

        grid-template-columns:
            220px
            minmax(0,1fr) !important;
    }

    .sv3-chat-bubble {
        max-width: 72% !important;
    }


    /* PROFIL */

    .sv3-profile-layout {
        grid-template-columns:
            1fr !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }


    /* NAVIGATION HORIZONTALE */

    .sv3-sidebar {
        padding:
            8px
            0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
    }


    .sv3-nav {
        display: flex !important;

        width: max-content !important;
        min-width: 100% !important;

        padding:
            0
            8px !important;

        gap: 6px !important;
    }


    .sv3-nav a {
        flex:
            0
            0
            auto !important;

        min-width: 112px !important;

        padding:
            9px
            11px !important;

        font-size: 11px !important;

        white-space: nowrap !important;
    }


    /* CONTENU */

    .sv3-main {
        padding:
            16px
            12px
            22px !important;
    }


    /* TITRES */

    .sv3-welcome h1 {
        font-size: 23px !important;
    }

    .sv3-welcome p {
        font-size: 13px !important;
    }


    /* DASHBOARD */

    .sv3-primary-grid,
    .sv3-dashboard-primary,
    .sv3-dashboard-secondary,
    .sv3-dashboard-actions-bottom {
        grid-template-columns:
            1fr !important;
    }


    /* CARTES */

    .sv3-panel {
        width: 100% !important;
        min-width: 0 !important;
    }


    /* LISTE PRESTATIONS */

    .sv3-prestation-card,
    .sv3-prestation-row {
        grid-template-columns:
            1fr !important;
    }


    /* COMMANDES */

    .sv3-order-card {
        display: grid !important;

        grid-template-columns:
            90px
            minmax(0,1fr) !important;

        gap: 12px !important;
    }


    .sv3-order-card-picture {
        width: 90px !important;
        height: 90px !important;
    }


    .sv3-order-card > * {
        min-width: 0 !important;
    }


    /* DETAIL PROJET */

    .sv3-project-header {
        display: block !important;
    }


    .sv3-project-header-main {
        width: 100% !important;
    }


    .sv3-project-header-price {
        margin-top: 14px !important;

        width: 100% !important;

        text-align: left !important;
    }


    .sv3-project-reference-layout {
        display: block !important;
    }


    .sv3-project-reference-image,
    .sv3-project-reference-info,
    .sv3-project-reference-actions {
        width: 100% !important;

        margin-bottom: 12px !important;
    }


    /* THEMES / OPTIONS */

    .sv3-project-media-grid {
        grid-template-columns:
            1fr !important;
    }


    /* FINANCES */

    .sv3-project-financial-cards {
        grid-template-columns:
            1fr !important;
    }


    .sv3-project-payment-history-row,
    .sv3-project-invoice-row {
        grid-template-columns:
            1fr !important;

        gap: 7px !important;
    }


    /* CHAT */

    .sv3-messages-layout {
        display: block !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }


    .sv3-conversations {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: 180px !important;

        overflow-y: auto !important;

        margin-bottom: 10px !important;
    }


    .sv3-conversation-panels {
        width: 100% !important;

        height: auto !important;
        min-height: 420px !important;
        max-height: none !important;
    }


    .sv3-conversation-panel.active {
        min-height: 420px !important;
        height: 420px !important;
    }


    .sv3-message-thread {
        min-width: 0 !important;

        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .sv3-chat-bubble {
        max-width: 82% !important;
    }


    .sv3-chat-form {
        width: 100% !important;
        min-width: 0 !important;
    }


    .sv3-chat-input-wrap {
        min-width: 0 !important;
        width: 100% !important;
    }


    /* PROFIL */

    .sv3-profile-page input,
    .sv3-profile-page textarea,
    .sv3-profile-page select {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* TABLEAUX */

    .sv3-main table {
        width: 100% !important;
    }

}


/* =========================================================
   PETIT MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .sv3-main {
        padding:
            14px
            9px
            20px !important;
    }


    .sv3-welcome h1 {
        font-size: 21px !important;
    }


    .sv3-nav a {
        min-width: 104px !important;

        font-size: 10px !important;
    }


    .sv3-order-card {
        grid-template-columns:
            72px
            minmax(0,1fr) !important;
    }


    .sv3-order-card-picture {
        width: 72px !important;
        height: 72px !important;
    }


    .sv3-project-tabs {
        margin-left: -9px !important;
        margin-right: -9px !important;

        padding-left: 9px !important;
        padding-right: 9px !important;
    }


    .sv3-chat-bubble {
        max-width: 88% !important;
    }


    .sv3-header-client-avatar {
        width: 40px !important;
        height: 40px !important;

        flex-basis: 40px !important;
    }

}



/* =========================================================
   SV_FILES_PAGE_STYLE_V1
   MES FICHIERS
   ========================================================= */

.sv3-files-page {
    width: 100%;
}


.sv3-files-head {
    min-height: 115px;

    padding:
        22px
        24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    border:
        1px solid
        rgba(112,132,166,.22);

    border-radius: 12px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(100,32,201,.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(13,18,29,.97),
            rgba(6,9,16,.98)
        );
}


.sv3-files-kicker {
    display: block;

    margin-bottom: 5px;

    color: #8e61f1;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1.4px;
}


.sv3-files-head h1 {
    margin:
        0
        0
        7px;

    color: #fff;

    font-size: 27px;
}


.sv3-files-head p {
    margin: 0;

    color: #929cad;

    font-size: 13px;
}


.sv3-files-head-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(129,76,226,.42);

    border-radius: 12px;

    background:
        rgba(104,42,203,.13);
}


.sv3-files-head-icon .dashicons {
    width: auto;
    height: auto;

    color: #9c6cff;

    font-size: 27px;
}


.sv3-files-stats {
    margin-top: 15px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 12px;
}


.sv3-files-stats article {
    min-height: 70px;

    padding:
        13px
        16px;

    display: flex;
    align-items: center;
    gap: 12px;

    border:
        1px solid
        rgba(112,132,166,.20);

    border-radius: 9px;

    background:
        rgba(9,14,23,.88);
}


.sv3-files-stats .dashicons {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #9667f5;

    font-size: 21px;
}


.sv3-files-stats strong,
.sv3-files-stats small {
    display: block;
}


.sv3-files-stats strong {
    color: #fff;

    font-size: 20px;
}


.sv3-files-stats small {
    margin-top: 2px;

    color: #8792a3;

    font-size: 11px;
}


.sv3-files-toolbar {
    margin-top: 20px;

    padding:
        13px
        16px;

    border:
        1px solid
        rgba(112,132,166,.18);

    border-bottom: 0;

    border-radius:
        10px
        10px
        0
        0;

    background:
        rgba(11,16,26,.95);
}


.sv3-files-toolbar-title {
    display: flex;
    align-items: center;
    gap: 10px;
}


.sv3-files-toolbar strong {
    color: #fff;

    font-size: 13px;
}


.sv3-files-toolbar small {
    padding:
        3px
        7px;

    border-radius: 999px;

    background:
        rgba(112,69,197,.20);

    color: #a47bfa;

    font-size: 10px;
}


.sv3-files-list {
    border:
        1px solid
        rgba(112,132,166,.18);

    border-radius:
        0
        0
        10px
        10px;

    background:
        rgba(6,10,17,.90);

    overflow: hidden;
}


.sv3-files-row {
    min-height: 78px;

    padding:
        12px
        15px;

    display: grid;

    grid-template-columns:
        42px
        minmax(180px,1.5fr)
        minmax(120px,.8fr)
        90px
        75px
        auto;

    align-items: center;

    gap: 14px;

    border-bottom:
        1px solid
        rgba(112,132,166,.13);
}


.sv3-files-row:last-child {
    border-bottom: 0;
}


.sv3-files-type {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;
}


.sv3-files-type.red {
    background:
        rgba(203,49,68,.15);

    color: #ff6677;
}


.sv3-files-main {
    min-width: 0;
}


.sv3-files-main strong,
.sv3-files-main span {
    display: block;
}


.sv3-files-main strong {
    overflow: hidden;

    color: #eef3fa;

    font-size: 13px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.sv3-files-main span {
    margin-top: 4px;

    color: #758093;

    font-size: 10px;
}


.sv3-files-info small,
.sv3-files-info strong {
    display: block;
}


.sv3-files-info small {
    color: #697486;

    font-size: 9px;

    text-transform: uppercase;
}


.sv3-files-info strong {
    margin-top: 4px;

    color: #c8d0dd;

    font-size: 11px;
}


.sv3-files-download {
    min-height: 34px;

    padding:
        7px
        11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border:
        1px solid
        rgba(137,81,238,.44);

    border-radius: 7px;

    background:
        rgba(106,45,210,.14);

    color: #b895ff !important;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none !important;
}


.sv3-files-download:hover {
    background:
        rgba(112,50,221,.25);

    color: #fff !important;
}


.sv3-files-download .dashicons {
    width: auto;
    height: auto;

    font-size: 15px;
}


.sv3-files-empty {
    min-height: 230px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;
}


.sv3-files-empty > .dashicons {
    width: auto;
    height: auto;

    margin-bottom: 12px;

    color: #7650bf;

    font-size: 38px;
}


.sv3-files-empty strong {
    color: #fff;

    font-size: 14px;
}


.sv3-files-empty p {
    max-width: 410px;

    margin:
        7px
        0
        0;

    color: #7f8999;

    font-size: 11px;
    line-height: 1.5;
}


/* TABLETTE */

@media (max-width: 1000px) {

    .sv3-files-row {
        grid-template-columns:
            42px
            minmax(160px,1fr)
            100px
            70px
            auto;
    }

    .sv3-files-row
    .sv3-files-info:first-of-type {
        display: none;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .sv3-files-head {
        padding:
            18px
            16px;
    }


    .sv3-files-head h1 {
        font-size: 23px;
    }


    .sv3-files-head-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }


    .sv3-files-stats {
        grid-template-columns:
            1fr
            1fr;
    }


    .sv3-files-row {
        grid-template-columns:
            40px
            minmax(0,1fr)
            auto;

        gap: 10px;

        padding:
            13px
            11px;
    }


    .sv3-files-info {
        display: none !important;
    }


    .sv3-files-download {
        width: 36px;
        height: 36px;

        padding: 0;

        font-size: 0;
    }


    .sv3-files-download .dashicons {
        font-size: 17px;
    }

}


/* PETIT MOBILE */

@media (max-width: 480px) {

    .sv3-files-head-icon {
        display: none;
    }


    .sv3-files-stats {
        grid-template-columns:
            1fr;
    }


    .sv3-files-main strong {
        font-size: 12px;
    }

}



/* =========================================================
   SV_APPOINTMENTS_STYLE_V1
   MES RENDEZ-VOUS
   ========================================================= */

.sv3-appointments-page {
    width: 100%;
}


.sv3-rdv-head {
    min-height: 115px;

    padding: 22px 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    border:
        1px solid
        rgba(112,132,166,.22);

    border-radius: 12px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(38,114,210,.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(13,18,29,.97),
            rgba(6,9,16,.98)
        );
}


.sv3-rdv-kicker {
    display: block;

    margin-bottom: 5px;

    color: #669df5;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1.4px;
}


.sv3-rdv-head h1 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 27px;
}


.sv3-rdv-head p {
    margin: 0;

    color: #929cad;

    font-size: 13px;
}


.sv3-rdv-head-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(75,131,220,.40);

    border-radius: 12px;

    background:
        rgba(41,103,196,.13);
}


.sv3-rdv-head-icon .dashicons {
    width: auto;
    height: auto;

    color: #67a0ff;

    font-size: 27px;
}


.sv3-rdv-stats {
    margin-top: 15px;

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 12px;
}


.sv3-rdv-stats article {
    min-height: 70px;

    padding: 13px 16px;

    display: flex;
    align-items: center;

    gap: 12px;

    border:
        1px solid
        rgba(112,132,166,.20);

    border-radius: 9px;

    background:
        rgba(9,14,23,.88);
}


.sv3-rdv-stats article > .dashicons {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6fa7ff;

    font-size: 21px;
}


.sv3-rdv-stats strong,
.sv3-rdv-stats small {
    display: block;
}


.sv3-rdv-stats strong {
    color: #fff;

    font-size: 20px;
}


.sv3-rdv-stats small {
    margin-top: 2px;

    color: #8792a3;

    font-size: 11px;
}


.sv3-rdv-toolbar {
    margin-top: 20px;

    min-height: 48px;

    padding: 12px 16px;

    display: flex;
    align-items: center;

    gap: 9px;

    border:
        1px solid
        rgba(112,132,166,.18);

    border-bottom: 0;

    border-radius:
        10px
        10px
        0
        0;

    background:
        rgba(11,16,26,.95);
}


.sv3-rdv-toolbar strong {
    color: #fff;

    font-size: 13px;
}


.sv3-rdv-toolbar span {
    min-width: 22px;

    padding: 3px 7px;

    border-radius: 999px;

    background:
        rgba(56,111,198,.18);

    color: #76aaff;

    font-size: 10px;

    text-align: center;
}


.sv3-rdv-list {
    border:
        1px solid
        rgba(112,132,166,.18);

    border-radius:
        0
        0
        10px
        10px;

    background:
        rgba(6,10,17,.90);

    overflow: hidden;
}


.sv3-rdv-row {
    min-height: 92px;

    padding: 14px 16px;

    display: grid;

    grid-template-columns:
        58px
        minmax(0,1fr)
        115px;

    align-items: center;

    gap: 16px;

    border-bottom:
        1px solid
        rgba(112,132,166,.13);
}


.sv3-rdv-row:last-child {
    border-bottom: 0;
}


.sv3-rdv-date {
    width: 52px;
    height: 58px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(73,128,218,.30);

    border-radius: 8px;

    background:
        rgba(43,94,175,.10);
}


.sv3-rdv-date strong {
    color: #fff;

    font-size: 20px;
    line-height: 1;
}


.sv3-rdv-date span {
    margin-top: 5px;

    color: #78aaff;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
}


.sv3-rdv-main {
    min-width: 0;
}


.sv3-rdv-title-line {
    display: flex;
    align-items: center;

    gap: 9px;

    flex-wrap: wrap;
}


.sv3-rdv-title-line > strong {
    color: #eef3fa;

    font-size: 13px;
}


.sv3-rdv-title-line > b {
    padding: 3px 7px;

    border-radius: 999px;

    font-size: 9px;
}


.sv3-rdv-title-line > b.planned {
    color: #efc66d;

    background:
        rgba(192,139,38,.14);
}


.sv3-rdv-title-line > b.confirmed {
    color: #63d994;

    background:
        rgba(39,172,98,.14);
}


.sv3-rdv-title-line > b.completed {
    color: #8794a8;

    background:
        rgba(110,124,146,.14);
}


.sv3-rdv-title-line > b.cancelled {
    color: #ff7180;

    background:
        rgba(203,52,69,.14);
}


.sv3-rdv-full-date {
    margin-top: 7px;

    display: flex;
    align-items: center;

    gap: 5px;

    color: #aeb8c7;

    font-size: 11px;
}


.sv3-rdv-full-date .dashicons,
.sv3-rdv-meta .dashicons {
    width: auto;
    height: auto;

    color: #6c7d94;

    font-size: 13px;
}


.sv3-rdv-meta {
    margin-top: 5px;

    display: flex;
    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}


.sv3-rdv-meta > span {
    display: flex;
    align-items: center;

    gap: 4px;

    color: #768397;

    font-size: 10px;
}


.sv3-rdv-reference {
    text-align: right;
}


.sv3-rdv-reference small,
.sv3-rdv-reference strong {
    display: block;
}


.sv3-rdv-reference small {
    color: #697486;

    font-size: 9px;

    text-transform: uppercase;
}


.sv3-rdv-reference strong {
    margin-top: 4px;

    color: #aab5c6;

    font-size: 10px;
}


.sv3-rdv-empty {
    min-height: 230px;

    padding: 30px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}


.sv3-rdv-empty > .dashicons {
    width: auto;
    height: auto;

    margin-bottom: 12px;

    color: #537fca;

    font-size: 38px;
}


.sv3-rdv-empty strong {
    color: #fff;

    font-size: 14px;
}


.sv3-rdv-empty p {
    max-width: 410px;

    margin: 7px 0 0;

    color: #7f8999;

    font-size: 11px;
    line-height: 1.5;
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .sv3-rdv-head {
        padding: 18px 16px;
    }


    .sv3-rdv-head h1 {
        font-size: 23px;
    }


    .sv3-rdv-head-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }


    .sv3-rdv-stats {
        grid-template-columns: 1fr;
    }


    .sv3-rdv-row {
        grid-template-columns:
            52px
            minmax(0,1fr);

        gap: 11px;

        padding: 13px 11px;
    }


    .sv3-rdv-reference {
        display: none;
    }

}


@media (max-width: 480px) {

    .sv3-rdv-head-icon {
        display: none;
    }


    .sv3-rdv-meta {
        display: block;
    }


    .sv3-rdv-meta > span {
        margin-top: 5px;
    }

}



/* =========================================================
   SV_PAYMENTS_PAGE_STYLE_V1
   PAIEMENTS & FACTURES
   ========================================================= */

.sv3-payments-page {
    width: 100%;
}

.sv3-pay-head {
    min-height: 115px;
    padding: 22px 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    border: 1px solid rgba(112,132,166,.22);
    border-radius: 12px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(37,151,111,.16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(13,18,29,.97),
            rgba(6,9,16,.98)
        );
}

.sv3-pay-kicker {
    display: block;
    margin-bottom: 5px;

    color: #57d3a1;

    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.sv3-pay-head h1 {
    margin: 0 0 7px;
    color: #fff;
    font-size: 27px;
}

.sv3-pay-head p {
    margin: 0;
    color: #929cad;
    font-size: 13px;
}

.sv3-pay-head-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(61,196,145,.35);
    border-radius: 12px;

    background: rgba(35,154,111,.11);
    color: #61dca9;
}

.sv3-pay-head-icon .dashicons {
    width: auto;
    height: auto;
    font-size: 27px;
}


.sv3-pay-summary {
    margin-top: 15px;

    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}

.sv3-pay-summary article {
    min-height: 94px;
    padding: 16px 18px;

    border: 1px solid rgba(112,132,166,.20);
    border-radius: 9px;

    background: rgba(9,14,23,.88);
}

.sv3-pay-summary span,
.sv3-pay-summary strong,
.sv3-pay-summary small {
    display: block;
}

.sv3-pay-summary span {
    color: #8490a2;
    font-size: 10px;
    text-transform: uppercase;
}

.sv3-pay-summary strong {
    margin-top: 7px;
    color: #fff;
    font-size: 21px;
}

.sv3-pay-summary small {
    margin-top: 5px;
    color: #6f7b8e;
    font-size: 10px;
}

.sv3-pay-summary .paid strong {
    color: #5ed39d;
}

.sv3-pay-summary .remaining strong {
    color: #f0bd63;
}


.sv3-pay-progress-card {
    margin-top: 12px;
    padding: 16px 18px;

    display: flex;
    align-items: center;
    gap: 18px;

    border: 1px solid rgba(112,132,166,.20);
    border-radius: 9px;

    background: rgba(8,13,22,.91);
}

.sv3-pay-progress-ring {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #0a101a 55%,
            transparent 57%
        ),
        conic-gradient(
            #6840d5 var(--sv-pay-progress),
            #223047 0
        );
}

.sv3-pay-progress-ring strong {
    color: #fff;
    font-size: 13px;
}

.sv3-pay-progress-info {
    min-width: 0;
    flex: 1;
}

.sv3-pay-progress-info > span {
    color: #8190a4;
    font-size: 10px;
}

.sv3-pay-progress-info > strong {
    display: block;
    margin-top: 4px;

    color: #fff;
    font-size: 14px;
}

.sv3-pay-progress-bar {
    height: 5px;
    margin-top: 10px;

    overflow: hidden;

    border-radius: 999px;
    background: #202b3d;
}

.sv3-pay-progress-bar i {
    height: 100%;
    display: block;

    border-radius: inherit;
    background: #7047df;
}


.sv3-pay-section-head {
    margin-top: 20px;
    min-height: 48px;
    padding: 12px 16px;

    display: flex;
    align-items: center;

    border: 1px solid rgba(112,132,166,.18);
    border-bottom: 0;

    border-radius: 10px 10px 0 0;
    background: rgba(11,16,26,.95);
}

.sv3-pay-section-head > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.sv3-pay-section-head strong {
    color: #fff;
    font-size: 13px;
}

.sv3-pay-section-head small {
    padding: 3px 7px;

    border-radius: 999px;

    background: rgba(104,70,183,.18);
    color: #a784f1;

    font-size: 9px;
}


.sv3-pay-table,
.sv3-pay-invoices {
    border: 1px solid rgba(112,132,166,.18);
    border-radius: 0 0 10px 10px;

    background: rgba(6,10,17,.90);
    overflow: hidden;
}

.sv3-pay-table-head,
.sv3-pay-row {
    display: grid;

    grid-template-columns:
        100px
        minmax(150px,1.3fr)
        minmax(110px,.8fr)
        100px
        100px;

    align-items: center;
    gap: 12px;
}

.sv3-pay-table-head {
    min-height: 36px;
    padding: 8px 14px;

    color: #687588;

    font-size: 9px;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(112,132,166,.13);
}

.sv3-pay-row {
    min-height: 58px;
    padding: 10px 14px;

    color: #aeb8c8;
    font-size: 11px;

    border-bottom: 1px solid rgba(112,132,166,.12);
}

.sv3-pay-row:last-child {
    border-bottom: 0;
}

.sv3-pay-row > strong {
    color: #dce4ef;
    font-size: 11px;
}

.sv3-pay-amount {
    color: #fff !important;
}

.sv3-pay-status {
    width: max-content;
    padding: 4px 8px;

    border-radius: 999px;

    font-size: 9px;
}

.sv3-pay-status.paid,
.sv3-pay-status.succeeded,
.sv3-pay-status.completed {
    color: #5ed39d;
    background: rgba(45,177,119,.13);
}

.sv3-pay-status.pending {
    color: #e9bd64;
    background: rgba(189,137,42,.13);
}

.sv3-pay-status.failed,
.sv3-pay-status.cancelled {
    color: #ff7180;
    background: rgba(202,50,68,.13);
}

.sv3-pay-status.refunded {
    color: #9fa9b9;
    background: rgba(110,124,146,.14);
}


.sv3-pay-invoices-title {
    margin-top: 18px;
}

.sv3-pay-invoice {
    min-height: 68px;
    padding: 11px 14px;

    display: grid;
    grid-template-columns:
        40px
        minmax(0,1fr)
        auto;

    align-items: center;
    gap: 12px;

    border-bottom: 1px solid rgba(112,132,166,.12);
}

.sv3-pay-invoice:last-child {
    border-bottom: 0;
}

.sv3-pay-pdf {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    color: #ff6978;
    background: rgba(203,49,68,.13);
}

.sv3-pay-invoice div strong,
.sv3-pay-invoice div small {
    display: block;
}

.sv3-pay-invoice div strong {
    color: #e9eff8;
    font-size: 12px;
}

.sv3-pay-invoice div small {
    margin-top: 3px;
    color: #778396;
    font-size: 9px;
}

.sv3-pay-invoice > a {
    min-height: 34px;
    padding: 7px 11px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    border: 1px solid rgba(130,79,226,.40);
    border-radius: 7px;

    color: #b38cff !important;
    background: rgba(106,45,210,.12);

    font-size: 10px;
    font-weight: 700;

    text-decoration: none !important;
}


.sv3-pay-empty {
    min-height: 180px;
    padding: 25px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.sv3-pay-empty.small {
    min-height: 130px;
}

.sv3-pay-empty > .dashicons {
    width: auto;
    height: auto;

    margin-bottom: 9px;

    color: #60799e;
    font-size: 30px;
}

.sv3-pay-empty strong {
    color: #fff;
    font-size: 13px;
}

.sv3-pay-empty p {
    margin: 6px 0 0;

    color: #778397;
    font-size: 10px;
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .sv3-pay-head {
        padding: 18px 16px;
    }

    .sv3-pay-head h1 {
        font-size: 23px;
    }

    .sv3-pay-summary {
        grid-template-columns: 1fr;
    }

    .sv3-pay-table-head {
        display: none;
    }

    .sv3-pay-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px 14px;

        padding: 13px;
    }

    .sv3-pay-row > *::before {
        content: attr(data-label);

        display: block;
        margin-bottom: 3px;

        color: #637084;
        font-size: 8px;
        text-transform: uppercase;
    }

    .sv3-pay-invoice > a {
        width: 36px;
        height: 36px;
        padding: 0;

        justify-content: center;

        font-size: 0;
    }

    .sv3-pay-invoice > a .dashicons {
        font-size: 16px;
    }

}


@media (max-width: 480px) {

    .sv3-pay-head-icon {
        display: none;
    }

    .sv3-pay-progress-card {
        align-items: flex-start;
    }

}



/* =========================================================
   SV_PAYMENT_INSTALLMENTS_V2
   ========================================================= */

.sv3-pay-installments {
    margin-top: 14px;

    border: 1px solid rgba(112,132,166,.20);
    border-radius: 9px;

    overflow: hidden;

    background: rgba(8,13,22,.91);
}

.sv3-pay-installment {
    min-height: 72px;

    padding: 13px 16px;

    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;

    align-items: center;
    gap: 13px;

    border-bottom: 1px solid rgba(112,132,166,.12);
}

.sv3-pay-installment:last-child {
    border-bottom: 0;
}

.sv3-pay-installment-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(110,130,160,.35);

    color: #a8b2c2;

    font-size: 10px;
    font-weight: 800;
}

.sv3-pay-installment-icon.waiting {
    border-color: rgba(229,170,62,.40);

    color: #efbb59;

    background: rgba(195,133,29,.12);
}

.sv3-pay-installment-info strong,
.sv3-pay-installment-info span {
    display: block;
}

.sv3-pay-installment-info strong {
    color: #fff;
    font-size: 12px;
}

.sv3-pay-installment-info strong small {
    color: #8995a8;
    font-size: 9px;
}

.sv3-pay-installment-info span {
    margin-top: 4px;

    color: #748196;
    font-size: 9px;
}

.sv3-pay-installment-value {
    min-width: 120px;

    text-align: right;
}

.sv3-pay-installment-value strong,
.sv3-pay-installment-value b {
    display: block;
}

.sv3-pay-installment-value strong {
    color: #fff;
    font-size: 14px;
}

.sv3-pay-installment-value b {
    margin-top: 4px;

    font-size: 9px;
}

.sv3-pay-installment-value b.waiting {
    color: #efb653;
}

.sv3-pay-installment-value b.paid {
    color: #58d79a;
}


@media (max-width: 600px) {

    .sv3-pay-installment {
        grid-template-columns:
            30px
            minmax(0,1fr);
    }

    .sv3-pay-installment-value {
        grid-column: 2;

        min-width: 0;

        text-align: left;
    }

}


/* =========================================================
   SV_CLIENT_DEPOSIT_BUTTON_V1
   ========================================================= */

.sv3-deposit-payment-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:18px 0 24px;
    padding:18px 20px;
    border:1px solid rgba(76,255,181,.20);
    border-radius:12px;
    background:
        linear-gradient(
            135deg,
            rgba(14,43,39,.55),
            rgba(7,13,23,.92)
        );
}

.sv3-deposit-payment-cta > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.sv3-deposit-payment-cta strong{
    color:#fff;
    font-size:14px;
}

.sv3-deposit-payment-cta span{
    color:#8295b7;
    font-size:11px;
}

.sv3-deposit-payment-cta form{
    margin:0;
}

.sv3-deposit-pay-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:42px;
    padding:0 18px;
    border:1px solid rgba(63,255,173,.45);
    border-radius:9px;
    background:
        linear-gradient(
            135deg,
            #067a51,
            #08a46d
        );
    color:#fff;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    box-shadow:
        0 0 24px rgba(4,190,124,.12);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.sv3-deposit-pay-button:hover{
    transform:translateY(-1px);
    border-color:#4cffb5;
    box-shadow:
        0 0 28px rgba(4,190,124,.22);
}

.sv3-deposit-pay-button .dashicons{
    width:18px;
    height:18px;
    font-size:18px;
    color:#8dffd3;
}

.sv3-stripe-notice{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:16px 0;
    padding:13px 16px;
    border-radius:9px;
    font-size:12px;
}

.sv3-stripe-notice.success{
    border:1px solid rgba(63,255,173,.28);
    background:rgba(3,93,61,.18);
}

.sv3-stripe-notice.success strong{
    color:#4cffb5;
}

.sv3-stripe-notice.cancel{
    border:1px solid rgba(255,183,59,.28);
    background:rgba(110,74,5,.16);
}

.sv3-stripe-notice.cancel strong{
    color:#ffbd42;
}

.sv3-stripe-notice.error{
    border:1px solid rgba(255,76,105,.30);
    background:rgba(105,12,30,.18);
}

.sv3-stripe-notice.error strong{
    color:#ff647c;
}

.sv3-stripe-notice span{
    color:#9cadc8;
}

@media (max-width:720px){

    .sv3-deposit-payment-cta{
        align-items:stretch;
        flex-direction:column;
    }

    .sv3-deposit-payment-cta form,
    .sv3-deposit-pay-button{
        width:100%;
    }
}


/* =========================================================
   SV_PACKS_PAGE_V2
   ========================================================= */

.sv3-packs-page {
    width: 100%;
}

.sv3-packs-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.sv3-packs-kicker {
    display: block;
    margin-bottom: 7px;
    color: #8d70ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.sv3-packs-header h2 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.15;
}

.sv3-packs-header p {
    max-width: 680px;
    margin: 8px 0 0;
    color: #8f9aaa;
    font-size: 14px;
    line-height: 1.55;
}

.sv3-packs-new {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(138, 92, 255, .5);
    border-radius: 11px;
    background: linear-gradient(
        135deg,
        rgba(120, 65, 255, .95),
        rgba(89, 52, 210, .95)
    );
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(83, 45, 190, .2);
}

.sv3-packs-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 180px));
    gap: 12px;
    margin-bottom: 18px;
}

.sv3-packs-summary > div {
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(6,10,17,.62);
}

.sv3-packs-summary span {
    display: block;
    color: #7f8998;
    font-size: 11px;
    font-weight: 700;
}

.sv3-packs-summary strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 21px;
}

.sv3-packs-list {
    display: grid;
    gap: 12px;
}

.sv3-pack-row {
    display: grid;
    grid-template-columns:
        118px
        minmax(0, 1fr)
        150px
        150px;
    align-items: center;
    gap: 18px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(10,15,25,.96),
            rgba(5,9,16,.96)
        );
    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.sv3-pack-row:hover {
    transform: translateY(-1px);
    border-color: rgba(126, 82, 255, .3);
    box-shadow: 0 12px 35px rgba(0,0,0,.18);
}

.sv3-pack-picture {
    width: 118px;
    height: 86px;
    overflow: hidden;
    border-radius: 10px;
    background: #03070d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv3-pack-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.sv3-pack-main {
    min-width: 0;
}

.sv3-pack-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.sv3-pack-title-line h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.25;
}

.sv3-pack-status {
    padding: 4px 8px;
    border: 1px solid rgba(139, 101, 255, .28);
    border-radius: 999px;
    background: rgba(113, 75, 238, .1);
    color: #a993ff;
    font-size: 10px;
    font-weight: 800;
}

.sv3-pack-status[data-status="deposit_paid"],
.sv3-pack-status[data-status="paid"] {
    border-color: rgba(56, 213, 139, .28);
    background: rgba(39, 184, 117, .1);
    color: #57dfa0;
}

.sv3-pack-status[data-status="cancelled"],
.sv3-pack-status[data-status="refused"] {
    border-color: rgba(255, 82, 104, .25);
    background: rgba(255, 82, 104, .08);
    color: #ff7388;
}

.sv3-pack-reference {
    display: block;
    margin-top: 4px;
    color: #667180;
    font-size: 11px;
    font-weight: 700;
}

.sv3-pack-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 9px;
}

.sv3-pack-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #a5afbd;
    font-size: 11px;
}

.sv3-pack-meta .dashicons {
    width: 14px;
    height: 14px;
    color: #7359db;
    font-size: 14px;
}

.sv3-pack-content {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    color: #7e8997;
    font-size: 11px;
}

.sv3-pack-content b {
    margin-right: 4px;
    color: #a9b3c0;
}

.sv3-pack-finance {
    padding-left: 15px;
    border-left: 1px solid rgba(255,255,255,.07);
}

.sv3-pack-finance > span {
    display: block;
    color: #737e8c;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sv3-pack-finance > strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 17px;
}

.sv3-pack-finance > small {
    display: block;
    margin-top: 4px;
    color: #8d98a7;
    font-size: 10px;
}

.sv3-pack-actions {
    display: flex;
    justify-content: flex-end;
}

.sv3-pack-open {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(132, 93, 255, .34);
    border-radius: 9px;
    background: rgba(110, 70, 230, .1);
    color: #b8a7ff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.sv3-pack-open:hover {
    border-color: rgba(145, 110, 255, .65);
    background: rgba(110, 70, 230, .18);
    color: #fff !important;
}

.sv3-pack-open .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.sv3-packs-empty {
    padding: 48px 20px;
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(5,9,15,.5);
    text-align: center;
}

.sv3-packs-empty > .dashicons {
    width: 36px;
    height: 36px;
    color: #765ae5;
    font-size: 36px;
}

.sv3-packs-empty strong {
    display: block;
    margin-top: 12px;
    color: #fff;
    font-size: 17px;
}

.sv3-packs-empty p {
    margin: 6px 0 15px;
    color: #7f8997;
    font-size: 13px;
}

.sv3-packs-empty a {
    color: #a993ff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 1050px) {
    .sv3-pack-row {
        grid-template-columns: 100px minmax(0, 1fr) 135px;
    }

    .sv3-pack-picture {
        width: 100px;
        height: 78px;
    }

    .sv3-pack-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .sv3-packs-header {
        flex-direction: column;
    }

    .sv3-packs-new {
        width: 100%;
    }

    .sv3-packs-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .sv3-pack-row {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px;
    }

    .sv3-pack-picture {
        width: 76px;
        height: 76px;
    }

    .sv3-pack-finance,
    .sv3-pack-actions {
        grid-column: 1 / -1;
    }

    .sv3-pack-finance {
        padding: 10px 0 0;
        border-top: 1px solid rgba(255,255,255,.07);
        border-left: 0;
    }

    .sv3-pack-actions {
        justify-content: stretch;
    }

    .sv3-pack-open {
        width: 100%;
    }
}


/* =========================================================
   SV_MAPPINGS_PAGE_V2
   ========================================================= */

.sv3-mappings-page {
    width: 100%;
}

.sv3-mappings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.sv3-mappings-kicker {
    display: block;
    margin-bottom: 7px;
    color: #4ab8ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.sv3-mappings-header h2 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.15;
}

.sv3-mappings-header p {
    max-width: 680px;
    margin: 8px 0 0;
    color: #8f9aaa;
    font-size: 14px;
    line-height: 1.55;
}

.sv3-mappings-new {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(72, 169, 255, .5);
    border-radius: 11px;
    background: linear-gradient(
        135deg,
        #2389e9,
        #1764bd
    );
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(26, 105, 190, .18);
}

.sv3-mappings-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 180px));
    gap: 12px;
    margin-bottom: 18px;
}

.sv3-mappings-summary > div {
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(6,10,17,.62);
}

.sv3-mappings-summary span {
    display: block;
    color: #7f8998;
    font-size: 11px;
    font-weight: 700;
}

.sv3-mappings-summary strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 21px;
}

.sv3-mappings-list {
    display: grid;
    gap: 12px;
}

.sv3-mapping-row {
    display: grid;
    grid-template-columns:
        118px
        minmax(0, 1fr)
        135px
        150px;
    align-items: center;
    gap: 18px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(10,15,25,.96),
            rgba(5,9,16,.96)
        );
    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.sv3-mapping-row:hover {
    transform: translateY(-1px);
    border-color: rgba(68, 167, 255, .3);
    box-shadow: 0 12px 35px rgba(0,0,0,.18);
}

.sv3-mapping-picture {
    width: 118px;
    height: 86px;
    overflow: hidden;
    border-radius: 10px;
    background: #03070d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv3-mapping-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.sv3-mapping-main {
    min-width: 0;
}

.sv3-mapping-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.sv3-mapping-title-line h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.25;
}

.sv3-mapping-status {
    padding: 4px 8px;
    border: 1px solid rgba(66, 169, 255, .27);
    border-radius: 999px;
    background: rgba(50, 151, 235, .1);
    color: #6fc5ff;
    font-size: 10px;
    font-weight: 800;
}

.sv3-mapping-status[data-status="deposit_paid"],
.sv3-mapping-status[data-status="paid"],
.sv3-mapping-status[data-status="completed"],
.sv3-mapping-status[data-status="termine"],
.sv3-mapping-status[data-status="terminé"] {
    border-color: rgba(56, 213, 139, .28);
    background: rgba(39, 184, 117, .1);
    color: #57dfa0;
}

.sv3-mapping-status[data-status="cancelled"],
.sv3-mapping-status[data-status="annule"],
.sv3-mapping-status[data-status="annulé"],
.sv3-mapping-status[data-status="refused"],
.sv3-mapping-status[data-status="refusé"] {
    border-color: rgba(255, 82, 104, .25);
    background: rgba(255, 82, 104, .08);
    color: #ff7388;
}

.sv3-mapping-reference {
    display: block;
    margin-top: 4px;
    color: #667180;
    font-size: 11px;
    font-weight: 700;
}

.sv3-mapping-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 9px;
}

.sv3-mapping-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #a5afbd;
    font-size: 11px;
}

.sv3-mapping-meta .dashicons {
    width: 14px;
    height: 14px;
    color: #4aaef4;
    font-size: 14px;
}

.sv3-mapping-content {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    color: #7e8997;
    font-size: 11px;
}

.sv3-mapping-content b {
    margin-right: 4px;
    color: #a9b3c0;
}

.sv3-mapping-message {
    max-width: 700px;
    margin: 7px 0 0;
    color: #6f7b89;
    font-size: 10px;
    line-height: 1.4;
}

.sv3-mapping-tech {
    padding-left: 15px;
    border-left: 1px solid rgba(255,255,255,.07);
}

.sv3-mapping-tech > span {
    display: block;
    color: #737e8c;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sv3-mapping-tech > strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 17px;
}

.sv3-mapping-tech > small {
    display: block;
    margin-top: 4px;
    color: #8d98a7;
    font-size: 10px;
}

.sv3-mapping-actions {
    display: flex;
    justify-content: flex-end;
}

.sv3-mapping-open {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(64, 166, 255, .34);
    border-radius: 9px;
    background: rgba(47, 145, 231, .1);
    color: #8ccfff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.sv3-mapping-open:hover {
    border-color: rgba(80, 180, 255, .65);
    background: rgba(47, 145, 231, .18);
    color: #fff !important;
}

.sv3-mapping-open .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.sv3-mappings-empty {
    padding: 48px 20px;
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(5,9,15,.5);
    text-align: center;
}

.sv3-mappings-empty > .dashicons {
    width: 36px;
    height: 36px;
    color: #48aef2;
    font-size: 36px;
}

.sv3-mappings-empty strong {
    display: block;
    margin-top: 12px;
    color: #fff;
    font-size: 17px;
}

.sv3-mappings-empty p {
    margin: 6px 0 15px;
    color: #7f8997;
    font-size: 13px;
}

.sv3-mappings-empty a {
    color: #69c0ff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 1050px) {

    .sv3-mapping-row {
        grid-template-columns:
            100px
            minmax(0, 1fr)
            130px;
    }

    .sv3-mapping-picture {
        width: 100px;
        height: 78px;
    }

    .sv3-mapping-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {

    .sv3-mappings-header {
        flex-direction: column;
    }

    .sv3-mappings-new {
        width: 100%;
    }

    .sv3-mappings-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .sv3-mapping-row {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px;
    }

    .sv3-mapping-picture {
        width: 76px;
        height: 76px;
    }

    .sv3-mapping-tech,
    .sv3-mapping-actions {
        grid-column: 1 / -1;
    }

    .sv3-mapping-tech {
        padding: 10px 0 0;
        border-top: 1px solid rgba(255,255,255,.07);
        border-left: 0;
    }

    .sv3-mapping-actions {
        justify-content: stretch;
    }

    .sv3-mapping-open {
        width: 100%;
    }
}


/* =========================================================
   SV_TABLEAUX_PAGE_V2
   ========================================================= */

.sv3-tableaux-page {
    width: 100%;
}

.sv3-tableaux-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.sv3-tableaux-kicker {
    display: block;
    margin-bottom: 7px;
    color: #e666ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.sv3-tableaux-header h2 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.15;
}

.sv3-tableaux-header p {
    max-width: 680px;
    margin: 8px 0 0;
    color: #8f9aaa;
    font-size: 14px;
    line-height: 1.55;
}

.sv3-tableaux-new {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(216, 82, 255, .48);
    border-radius: 11px;
    background: linear-gradient(
        135deg,
        #ad3be0,
        #7526bb
    );
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(136, 41, 190, .18);
}

.sv3-tableaux-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 180px));
    gap: 12px;
    margin-bottom: 18px;
}

.sv3-tableaux-summary > div {
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(6,10,17,.62);
}

.sv3-tableaux-summary span {
    display: block;
    color: #7f8998;
    font-size: 11px;
    font-weight: 700;
}

.sv3-tableaux-summary strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 21px;
}

.sv3-tableaux-list {
    display: grid;
    gap: 12px;
}

.sv3-tableau-row {
    display: grid;
    grid-template-columns:
        118px
        minmax(0, 1fr)
        150px
        150px;
    align-items: center;
    gap: 18px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(10,15,25,.96),
            rgba(5,9,16,.96)
        );
    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.sv3-tableau-row:hover {
    transform: translateY(-1px);
    border-color: rgba(216, 82, 255, .28);
    box-shadow: 0 12px 35px rgba(0,0,0,.18);
}

.sv3-tableau-picture {
    width: 118px;
    height: 96px;
    overflow: hidden;
    border-radius: 10px;
    background: #03070d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv3-tableau-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.sv3-tableau-main {
    min-width: 0;
}

.sv3-tableau-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.sv3-tableau-title-line h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.25;
}

.sv3-tableau-status {
    padding: 4px 8px;
    border: 1px solid rgba(216, 82, 255, .27);
    border-radius: 999px;
    background: rgba(180, 56, 224, .1);
    color: #e48aff;
    font-size: 10px;
    font-weight: 800;
}

.sv3-tableau-status[data-status="deposit_paid"],
.sv3-tableau-status[data-status="paid"],
.sv3-tableau-status[data-status="completed"],
.sv3-tableau-status[data-status="termine"],
.sv3-tableau-status[data-status="terminé"] {
    border-color: rgba(56, 213, 139, .28);
    background: rgba(39, 184, 117, .1);
    color: #57dfa0;
}

.sv3-tableau-status[data-status="cancelled"],
.sv3-tableau-status[data-status="annule"],
.sv3-tableau-status[data-status="annulé"],
.sv3-tableau-status[data-status="refused"],
.sv3-tableau-status[data-status="refusé"] {
    border-color: rgba(255, 82, 104, .25);
    background: rgba(255, 82, 104, .08);
    color: #ff7388;
}

.sv3-tableau-reference {
    display: block;
    margin-top: 4px;
    color: #667180;
    font-size: 11px;
    font-weight: 700;
}

.sv3-tableau-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 9px;
}

.sv3-tableau-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #a5afbd;
    font-size: 11px;
}

.sv3-tableau-meta .dashicons {
    width: 14px;
    height: 14px;
    color: #cf62f0;
    font-size: 14px;
}

.sv3-tableau-content {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    color: #7e8997;
    font-size: 11px;
}

.sv3-tableau-content-secondary {
    margin-top: 5px;
}

.sv3-tableau-content b {
    margin-right: 4px;
    color: #a9b3c0;
}

.sv3-tableau-quote {
    padding-left: 15px;
    border-left: 1px solid rgba(255,255,255,.07);
}

.sv3-tableau-quote > span {
    display: block;
    color: #737e8c;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sv3-tableau-quote > strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.sv3-tableau-quote > small {
    display: block;
    margin-top: 4px;
    color: #8d98a7;
    font-size: 10px;
}

.sv3-tableau-actions {
    display: flex;
    justify-content: flex-end;
}

.sv3-tableau-open {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(216, 82, 255, .34);
    border-radius: 9px;
    background: rgba(180, 56, 224, .09);
    color: #e3a0f8 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.sv3-tableau-open:hover {
    border-color: rgba(226, 108, 255, .62);
    background: rgba(180, 56, 224, .17);
    color: #fff !important;
}

.sv3-tableau-open .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.sv3-tableaux-empty {
    padding: 48px 20px;
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(5,9,15,.5);
    text-align: center;
}

.sv3-tableaux-empty > .dashicons {
    width: 36px;
    height: 36px;
    color: #d15bf3;
    font-size: 36px;
}

.sv3-tableaux-empty strong {
    display: block;
    margin-top: 12px;
    color: #fff;
    font-size: 17px;
}

.sv3-tableaux-empty p {
    margin: 6px 0 15px;
    color: #7f8997;
    font-size: 13px;
}

.sv3-tableaux-empty a {
    color: #df85f8;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 1050px) {

    .sv3-tableau-row {
        grid-template-columns:
            100px
            minmax(0, 1fr)
            135px;
    }

    .sv3-tableau-picture {
        width: 100px;
        height: 88px;
    }

    .sv3-tableau-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {

    .sv3-tableaux-header {
        flex-direction: column;
    }

    .sv3-tableaux-new {
        width: 100%;
    }

    .sv3-tableaux-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .sv3-tableau-row {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px;
    }

    .sv3-tableau-picture {
        width: 76px;
        height: 76px;
    }

    .sv3-tableau-quote,
    .sv3-tableau-actions {
        grid-column: 1 / -1;
    }

    .sv3-tableau-quote {
        padding: 10px 0 0;
        border-top: 1px solid rgba(255,255,255,.07);
        border-left: 0;
    }

    .sv3-tableau-actions {
        justify-content: stretch;
    }

    .sv3-tableau-open {
        width: 100%;
    }
}


/* =========================================================
   SV_AUTOMATES_PAGE_V2
   ACHATS + LOCATIONS
   ========================================================= */

.sv3-automates-page {
    width: 100%;
}

.sv3-auto-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 22px;
}

.sv3-auto-kicker {
    display: block;
    margin-bottom: 7px;
    color: #8b72ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
}

.sv3-auto-header h2 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.15;
}

.sv3-auto-header p {
    max-width: 670px;
    margin: 8px 0 0;
    color: #8995a5;
    font-size: 14px;
    line-height: 1.5;
}

.sv3-auto-new {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(137,94,255,.5);
    border-radius: 11px;
    background: linear-gradient(
        135deg,
        #7948e8,
        #5328b9
    );
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.sv3-auto-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 160px));
    gap: 12px;
    margin-bottom: 17px;
}

.sv3-auto-summary > div {
    padding: 12px 15px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(5,10,17,.62);
}

.sv3-auto-summary span {
    display: block;
    color: #788494;
    font-size: 10px;
    font-weight: 700;
}

.sv3-auto-summary strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 20px;
}

.sv3-auto-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.sv3-auto-filter {
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    background: rgba(8,13,21,.75);
    color: #8c97a6;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}

.sv3-auto-filter span {
    margin-left: 5px;
    color: #697585;
}

.sv3-auto-filter:hover,
.sv3-auto-filter.is-active {
    border-color: rgba(130,91,255,.45);
    background: rgba(111,70,220,.14);
    color: #c9baff;
}

.sv3-auto-list {
    display: grid;
    gap: 11px;
}

.sv3-auto-row {
    display: grid;
    grid-template-columns:
        112px
        minmax(0,1fr)
        145px
        130px;
    gap: 17px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(9,14,23,.97),
            rgba(4,8,14,.97)
        );
}

.sv3-auto-row[hidden] {
    display: none !important;
}

.sv3-auto-picture {
    position: relative;
    width: 112px;
    height: 91px;
    overflow: hidden;
    border-radius: 10px;
    background: #03070d;
}

.sv3-auto-picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.sv3-auto-mode {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 4px 7px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.sv3-auto-mode-achat {
    border: 1px solid rgba(52,210,143,.38);
    background: rgba(19,112,75,.88);
    color: #9bf2c9;
}

.sv3-auto-mode-location {
    border: 1px solid rgba(74,161,255,.4);
    background: rgba(25,81,145,.9);
    color: #acd8ff;
}

.sv3-auto-main {
    min-width: 0;
}

.sv3-auto-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sv3-auto-title h3 {
    margin: 0;
    color: #fff;
    font-size: 15px;
}

.sv3-auto-status {
    padding: 4px 7px;
    border: 1px solid rgba(248,184,67,.25);
    border-radius: 999px;
    background: rgba(174,113,20,.09);
    color: #f1bd60;
    font-size: 9px;
    font-weight: 800;
}

.sv3-auto-reference {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.sv3-auto-reference span {
    color: #687585;
    font-size: 10px;
    font-weight: 700;
}

.sv3-auto-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.sv3-auto-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #a0aab7;
    font-size: 10px;
}

.sv3-auto-meta .dashicons {
    width: 13px;
    height: 13px;
    color: #8c70ff;
    font-size: 13px;
}

.sv3-auto-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 7px;
    color: #7d8998;
    font-size: 10px;
}

.sv3-auto-specs b {
    margin-right: 4px;
    color: #a8b2bf;
}

.sv3-auto-finance {
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,.07);
}

.sv3-auto-finance > span {
    display: block;
    color: #737f8e;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.sv3-auto-finance strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 15px;
}

.sv3-auto-finance small {
    display: block;
    margin-top: 3px;
    color: #778493;
    font-size: 9px;
}

.sv3-auto-actions {
    display: flex;
    justify-content: flex-end;
}

.sv3-auto-open {
    min-height: 37px;
    padding: 0 11px;
    border: 1px solid rgba(129,92,255,.33);
    border-radius: 8px;
    background: rgba(104,66,211,.09);
    color: #bba8ff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.sv3-auto-open.is-disabled {
    opacity: .55;
}

.sv3-auto-open .dashicons {
    width: 13px;
    height: 13px;
    font-size: 13px;
}

.sv3-auto-empty {
    padding: 45px 20px;
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(5,9,15,.5);
    text-align: center;
}

.sv3-auto-empty > .dashicons {
    width: 34px;
    height: 34px;
    color: #8f72ff;
    font-size: 34px;
}

.sv3-auto-empty strong {
    display: block;
    margin-top: 11px;
    color: #fff;
}

.sv3-auto-empty p {
    margin: 6px 0 14px;
    color: #7e8997;
    font-size: 12px;
}

.sv3-auto-empty a {
    color: #ad9aff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 1000px) {

    .sv3-auto-row {
        grid-template-columns:
            100px
            minmax(0,1fr)
            140px;
    }

    .sv3-auto-picture {
        width: 100px;
        height: 86px;
    }

    .sv3-auto-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {

    .sv3-auto-header {
        flex-direction: column;
    }

    .sv3-auto-new {
        width: 100%;
    }

    .sv3-auto-summary {
        grid-template-columns: repeat(3, 1fr);
    }

    .sv3-auto-row {
        grid-template-columns: 76px minmax(0,1fr);
        gap: 11px;
    }

    .sv3-auto-picture {
        width: 76px;
        height: 76px;
    }

    .sv3-auto-finance,
    .sv3-auto-actions {
        grid-column: 1 / -1;
    }

    .sv3-auto-finance {
        padding: 9px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.07);
    }

    .sv3-auto-actions {
        justify-content: stretch;
    }

    .sv3-auto-open {
        width: 100%;
    }
}


/* =========================================================
   SV_AUTOMATES_MOBILE_FIX_V3
   ========================================================= */

@media (max-width: 700px) {

    .sv3-automates-page {
        overflow: hidden;
    }

    .sv3-auto-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .sv3-auto-header > div {
        min-width: 0;
    }

    .sv3-auto-header p {
        max-width: none !important;
        line-height: 1.55 !important;
    }

    .sv3-auto-new {
        width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Compteurs */

    .sv3-auto-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .sv3-auto-summary > div {
        min-width: 0 !important;
        padding: 11px 10px !important;
    }


    /* Filtres */

    .sv3-auto-filters {
        width: 100% !important;
        gap: 7px !important;
    }


    /* Carte automate */

    .sv3-auto-row {
        width: 100% !important;
        box-sizing: border-box !important;

        display: grid !important;

        grid-template-columns:
            92px
            minmax(0, 1fr) !important;

        grid-template-areas:
            "picture main"
            "finance finance"
            "actions actions" !important;

        align-items: start !important;

        gap: 14px !important;

        padding: 12px !important;

        overflow: hidden !important;
    }


    .sv3-auto-picture {
        grid-area: picture !important;

        width: 92px !important;
        height: 110px !important;

        align-self: start !important;
    }

    .sv3-auto-picture img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;
    }


    .sv3-auto-main {
        grid-area: main !important;

        width: 100% !important;
        min-width: 0 !important;
    }


    /* Nom + statut */

    .sv3-auto-title {
        display: flex !important;
        align-items: flex-start !important;
        flex-direction: column !important;

        gap: 6px !important;
    }

    .sv3-auto-title h3 {
        width: 100% !important;

        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.25 !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }


    /* Références */

    .sv3-auto-reference {
        display: flex !important;
        flex-direction: column !important;

        gap: 3px !important;

        margin-top: 7px !important;
    }

    .sv3-auto-reference span {
        width: 100% !important;

        font-size: 10px !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }


    /* Date + adresse */

    .sv3-auto-meta {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 6px !important;

        margin-top: 9px !important;
    }

    .sv3-auto-meta > span {
        width: 100% !important;

        align-items: flex-start !important;

        line-height: 1.35 !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .sv3-auto-meta .dashicons {
        flex: 0 0 13px !important;
        margin-top: 1px !important;
    }


    /* Caractéristiques */

    .sv3-auto-specs {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 5px !important;

        margin-top: 9px !important;
    }

    .sv3-auto-specs span {
        display: block !important;

        width: 100% !important;

        line-height: 1.35 !important;
    }

    .sv3-auto-specs b {
        display: block !important;

        margin: 0 0 2px !important;
    }


    /* Tarif sous la fiche */

    .sv3-auto-finance {
        grid-area: finance !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 12px 0 0 !important;

        border-left: 0 !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
    }

    .sv3-auto-finance strong {
        margin-top: 4px !important;

        font-size: 18px !important;
        line-height: 1.2 !important;
    }


    /* Bouton */

    .sv3-auto-actions {
        grid-area: actions !important;

        width: 100% !important;

        display: block !important;
    }

    .sv3-auto-open {
        width: 100% !important;
        min-height: 42px !important;

        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: normal !important;
    }
}


/* Très petits téléphones */

@media (max-width: 430px) {

    .sv3-auto-summary {
        grid-template-columns: 1fr !important;
    }

    .sv3-auto-summary > div {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .sv3-auto-summary strong {
        margin-top: 0 !important;
    }

    .sv3-auto-row {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        gap: 11px !important;
    }

    .sv3-auto-picture {
        width: 78px !important;
        height: 96px !important;
    }
}


/* =========================================================
   SV_AUTOMATES_NARROW_FIX_V4
   Sidebar + écran étroit
   ========================================================= */

@media (max-width: 1200px) {

    .sv3-auto-row {
        display: grid !important;

        grid-template-columns:
            110px
            minmax(0, 1fr) !important;

        grid-template-areas:
            "picture main"
            "finance finance"
            "actions actions" !important;

        gap: 14px !important;

        width: 100% !important;
        box-sizing: border-box !important;

        align-items: start !important;

        overflow: hidden !important;
    }


    .sv3-auto-picture {
        grid-area: picture !important;

        width: 110px !important;
        height: 110px !important;

        align-self: start !important;
    }

    .sv3-auto-picture img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;
    }


    .sv3-auto-main {
        grid-area: main !important;

        min-width: 0 !important;
        width: 100% !important;
    }


    .sv3-auto-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 6px !important;
    }

    .sv3-auto-title h3 {
        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }


    .sv3-auto-reference {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;

        gap: 4px 10px !important;

        margin-top: 7px !important;
    }


    .sv3-auto-meta {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 6px !important;

        margin-top: 9px !important;
    }

    .sv3-auto-meta > span {
        width: 100% !important;

        align-items: flex-start !important;

        line-height: 1.35 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }


    .sv3-auto-specs {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;

        gap: 8px !important;

        margin-top: 9px !important;
    }

    .sv3-auto-specs span {
        min-width: 0 !important;
    }

    .sv3-auto-specs b {
        display: block !important;

        margin: 0 0 2px !important;
    }


    .sv3-auto-finance {
        grid-area: finance !important;

        width: 100% !important;
        box-sizing: border-box !important;

        padding: 12px 0 0 !important;

        border-left: 0 !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
    }

    .sv3-auto-finance strong {
        display: block !important;

        margin-top: 4px !important;

        font-size: 18px !important;
        line-height: 1.2 !important;
    }


    .sv3-auto-actions {
        grid-area: actions !important;

        display: block !important;

        width: 100% !important;
    }

    .sv3-auto-open {
        width: 100% !important;
        min-height: 42px !important;

        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: normal !important;
    }
}


/* Encore plus compact */

@media (max-width: 950px) {

    .sv3-auto-row {
        grid-template-columns:
            90px
            minmax(0, 1fr) !important;
    }

    .sv3-auto-picture {
        width: 90px !important;
        height: 100px !important;
    }

    .sv3-auto-specs {
        grid-template-columns: 1fr !important;
    }
}



/* =========================================================
   SV_ACCOUNT_GLOBAL_WIDTH_V1
   Largeur maximale globale espace client
   ========================================================= */

.sv3-main {
    width: 100% !important;
    max-width: 1440px !important;

    box-sizing: border-box !important;

    justify-self: center !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* Sur écrans normaux : aucun espace inutile */

@media (max-width: 1704px) {

    .sv3-main {
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}



/* =========================================================
   SV_QUOTE_DETAIL_PAGE_V1
   Fiche devis client
   ========================================================= */

.sv3-quote-detail-page {
    width: 100%;
    box-sizing: border-box;
}

.sv3-quote-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 22px;

    color: #aeb7c7;
    text-decoration: none;
    font-size: 13px;
}

.sv3-quote-back:hover {
    color: #fff;
}


.sv3-quote-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

.sv3-quote-detail-header small {
    display: block;

    margin-bottom: 6px;

    color: #8d6cff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sv3-quote-detail-header h1 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 30px;
    line-height: 1.1;
}

.sv3-quote-detail-header p {
    margin: 0;

    color: #8f98aa;
    font-size: 13px;
}


.sv3-quote-status {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    padding: 0 13px;

    border: 1px solid rgba(143,108,255,.32);
    border-radius: 999px;

    background: rgba(119,73,255,.10);

    color: #c9baff;

    font-size: 12px;
    font-weight: 800;
}


.sv3-quote-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;

    margin-bottom: 16px;
}

.sv3-quote-detail-card {
    min-width: 0;

    padding: 17px 18px;

    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(18,23,34,.95),
            rgba(8,12,20,.95)
        );
}

.sv3-quote-detail-card small {
    display: block;

    margin-bottom: 7px;

    color: #7e889b;
    font-size: 11px;
}

.sv3-quote-detail-card strong {
    color: #fff;
    font-size: 15px;
}

.sv3-quote-detail-card strong.is-waiting {
    color: #f1b84b;
}


.sv3-quote-money {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 1px;

    overflow: hidden;

    margin-top: 15px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;

    background: rgba(255,255,255,.06);
}

.sv3-quote-money > div {
    padding: 17px 18px;

    background: #0b1019;
}

.sv3-quote-money small {
    display: block;
    margin-bottom: 5px;

    color: #818b9d;
    font-size: 11px;
}

.sv3-quote-money strong {
    color: #fff;
    font-size: 18px;
}


.sv3-quote-waiting-box {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-top: 15px;
    padding: 18px;

    border: 1px solid rgba(241,184,75,.20);
    border-radius: 14px;

    background: rgba(241,184,75,.06);
}

.sv3-quote-waiting-box > .dashicons {
    color: #f1b84b;
}

.sv3-quote-waiting-box strong {
    display: block;

    margin-bottom: 5px;

    color: #fff;
}

.sv3-quote-waiting-box p {
    margin: 0;

    color: #a0a8b6;
    font-size: 13px;
    line-height: 1.55;
}


.sv3-quote-detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 18px;
}

.sv3-quote-primary-button,
.sv3-quote-secondary-button {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 16px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;
}

.sv3-quote-primary-button {
    border: 1px solid rgba(127,81,255,.40);

    background:
        linear-gradient(
            135deg,
            #7f51ff,
            #6030dc
        );

    color: #fff;
}

.sv3-quote-secondary-button {
    border: 1px solid rgba(255,255,255,.09);

    background: rgba(255,255,255,.035);

    color: #dbe0ea;
}


@media (max-width: 800px) {

    .sv3-quote-detail-grid,
    .sv3-quote-money {
        grid-template-columns: 1fr;
    }

    .sv3-quote-detail-header {
        flex-direction: column;
    }
}


@media (max-width: 520px) {

    .sv3-quote-detail-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sv3-quote-primary-button,
    .sv3-quote-secondary-button {
        width: 100%;
        box-sizing: border-box;
    }
}



/* =========================================================
   SV_CLIENT_QUOTE_DECISION_UI_V1
   ========================================================= */

.sv3-quote-decision{
    margin-top:24px;
    padding:22px 24px;
    border:1px solid rgba(168,85,247,.34);
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            rgba(98,46,170,.17),
            rgba(17,17,24,.82)
        );
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.sv3-quote-decision-copy{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.sv3-quote-decision-copy strong{
    color:#fff;
    font-size:16px;
    font-weight:800;
}

.sv3-quote-decision-copy span{
    color:#a9a9b2;
    font-size:13px;
    line-height:1.5;
}

.sv3-quote-decision-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.sv3-quote-decision-actions form{
    margin:0;
}

.sv3-quote-accept,
.sv3-quote-refuse{
    height:42px;
    padding:0 18px;
    border-radius:10px;
    font-weight:800;
    font-size:13px;
    cursor:pointer;
    transition:.2s ease;
}

.sv3-quote-accept{
    border:1px solid #7c3aed;
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #9333ea
        );
    color:#fff;
}

.sv3-quote-accept:hover{
    transform:translateY(-1px);
    filter:brightness(1.08);
}

.sv3-quote-refuse{
    border:1px solid rgba(248,113,113,.35);
    background:rgba(127,29,29,.13);
    color:#fca5a5;
}

.sv3-quote-refuse:hover{
    border-color:#ef4444;
    color:#fff;
}

.sv3-quote-decision-message{
    margin-top:18px;
    padding:16px 18px;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.sv3-quote-decision-message strong{
    font-size:14px;
    font-weight:850;
}

.sv3-quote-decision-message span{
    font-size:13px;
    opacity:.82;
}

.sv3-quote-decision-message.is-success{
    border:1px solid rgba(34,197,94,.30);
    background:rgba(34,197,94,.08);
    color:#86efac;
}

.sv3-quote-decision-message.is-refused{
    border:1px solid rgba(239,68,68,.28);
    background:rgba(239,68,68,.07);
    color:#fca5a5;
}

@media(max-width:760px){

    .sv3-quote-decision{
        align-items:stretch;
        flex-direction:column;
    }

    .sv3-quote-decision-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .sv3-quote-decision-actions form{
        width:100%;
    }

    .sv3-quote-accept,
    .sv3-quote-refuse{
        width:100%;
    }
}



/* =========================================================
   SV_PAYMENTS_MULTI_QUOTES_V2
   ========================================================= */

.sv3-pay-multi-section{
    margin:24px 0;
}

.sv3-pay-multi-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:14px;
}

.sv3-pay-multi-head > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.sv3-pay-multi-head strong{
    color:#fff;
    font-size:16px;
    font-weight:800;
}

.sv3-pay-multi-head small{
    color:#8b8b97;
    font-size:12px;
}

.sv3-pay-multi-head > span{
    color:#bca7ff;
    font-size:12px;
    font-weight:800;
}

.sv3-pay-multi-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.sv3-pay-quote-card{
    display:grid;
    grid-template-columns:
        minmax(200px,1.2fr)
        auto
        minmax(320px,1.4fr)
        auto;
    align-items:center;
    gap:18px;
    padding:18px 20px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:16px;
    background:rgba(255,255,255,.018);
}

.sv3-pay-quote-main{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.sv3-pay-quote-main strong{
    color:#fff;
    font-size:14px;
}

.sv3-pay-quote-main span{
    color:#777783;
    font-size:11px;
}

.sv3-pay-quote-type{
    color:#9d7cff;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
}

.sv3-pay-quote-status{
    padding:7px 10px;
    border-radius:999px;
    border:1px solid rgba(168,85,247,.25);
    background:rgba(126,34,206,.1);
    color:#c4b5fd;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

.sv3-pay-quote-values{
    display:grid;
    grid-template-columns:repeat(4,minmax(75px,1fr));
    gap:14px;
}

.sv3-pay-quote-values > div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.sv3-pay-quote-values small{
    color:#777783;
    font-size:10px;
}

.sv3-pay-quote-values strong{
    color:#f4f4f6;
    font-size:13px;
}

.sv3-pay-quote-action{
    display:flex;
    justify-content:flex-end;
}

.sv3-pay-quote-action form{
    margin:0;
}

.sv3-pay-quote-deposit{
    min-height:38px;
    padding:0 15px;
    border:1px solid #7c3aed;
    border-radius:9px;
    background:linear-gradient(135deg,#7c3aed,#9333ea);
    color:#fff;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}

@media(max-width:1100px){

    .sv3-pay-quote-card{
        grid-template-columns:1fr auto;
    }

    .sv3-pay-quote-values,
    .sv3-pay-quote-action{
        grid-column:1 / -1;
    }

    .sv3-pay-quote-action{
        justify-content:flex-start;
    }
}

@media(max-width:650px){

    .sv3-pay-quote-card{
        display:flex;
        flex-direction:column;
        align-items:stretch;
    }

    .sv3-pay-quote-status{
        align-self:flex-start;
    }

    .sv3-pay-quote-values{
        grid-template-columns:repeat(2,1fr);
    }

    .sv3-pay-quote-action form,
    .sv3-pay-quote-deposit{
        width:100%;
    }
}


/* =========================================================
   SV FIX CARTE DASHBOARD SEULE - PLEINE LARGEUR V1
   ========================================================= */

/*
 * Quand une rubrique du dashboard est ouverte seule,
 * la grille ne doit pas conserver ses 3 colonnes.
 */
.sv3-main:not(.sv3-dashboard-mode)
.sv3-dashboard-primary.sv3-focus-view {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
}

/* La carte active prend toute la ligne */
.sv3-main:not(.sv3-dashboard-mode)
.sv3-dashboard-primary.sv3-focus-view
> article.sv3-module-active {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}

/* Sécurité spécifique prochaine prestation */
.sv3-main:not(.sv3-dashboard-mode)
.sv3-dashboard-primary.sv3-focus-view
> #prestations.sv3-module-active {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}




/*
 * Quand une rubrique du dashboard est ouverte seule,
 * la grille ne doit pas conserver ses 3 colonnes.
 */
.sv3-main:not(.sv3-dashboard-mode)
.sv3-dashboard-primary.sv3-focus-view {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
}

/* La carte active prend toute la ligne */
.sv3-main:not(.sv3-dashboard-mode)
.sv3-dashboard-primary.sv3-focus-view
> article.sv3-module-active {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}

/* Sécurité spécifique prochaine prestation */
.sv3-main:not(.sv3-dashboard-mode)
.sv3-dashboard-primary.sv3-focus-view
> #prestations.sv3-module-active {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}


/* =========================================================
   SV DASHBOARD - IMAGES ENTIERES SANS ZOOM V1
   ========================================================= */

/* Ma prochaine prestation */
.sv3-main-grid .sv3-project-image {
    overflow: hidden !important;
    background: #05080d !important;
}

.sv3-main-grid .sv3-project-image img,
.sv3-project-content > img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    box-sizing: border-box !important;
    padding: 4px !important;

    background: #05080d !important;
}

/* Ma dernière commande */
.sv3-last-order-cover {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    background: #05080d !important;
}

.sv3-last-order-cover img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    box-sizing: border-box !important;
    padding: 4px !important;
}

/* Si la commande utilise l'icône produit */
.sv3-last-order-product-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    font-size: 64px !important;
    line-height: 1 !important;
}


/* =========================================================
   SV PROCHAINE PRESTATION - IMAGE ENTIERE V1
   ========================================================= */

.sv3-next-service-cover {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #04070c !important;
}

.sv3-next-service-cover img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;

    box-sizing: border-box !important;
    padding: 4px !important;
}


/* =========================================================
   SV THEMES / OPTIONS - IMAGES ENTIERES V1
   ========================================================= */

.sv3-project-media-card img {
    width: 100% !important;
    height: 145px !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;

    box-sizing: border-box !important;
    padding: 4px !important;

    background: #090d15 !important;
}

/* Version compacte */
.sv3-project-media-grid--compact
.sv3-project-media-card img {
    height: 82px !important;

    object-fit: contain !important;
    object-position: center center !important;

    padding: 3px !important;
}


/* =========================================================
   SV TABLEAU VIVANT - DETAIL PROJET V1
   ========================================================= */

.sv3-tableau-project-detail {
    margin-top: 28px;
    padding: 22px;

    scroll-margin-top: 24px;

    border: 1px solid rgba(116,139,180,.28);
    border-radius: 10px;

    background: rgba(8,12,20,.94);
}

.sv3-tableau-project-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.sv3-tableau-project-top h2 {
    margin: 4px 0 0;

    color: #fff;
    font-size: 22px;
}

.sv3-tableau-project-reference {
    margin-top: 7px;

    color: #8794a9;
    font-size: 12px;
}

.sv3-tableau-project-layout {
    display: grid;
    grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);

    gap: 22px;
}

.sv3-tableau-project-image {
    height: 330px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 1px solid rgba(116,139,180,.24);
    border-radius: 8px;

    background: #05080d;
}

.sv3-tableau-project-image img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: contain !important;
    object-position: center center !important;

    padding: 6px;
    box-sizing: border-box;
}

.sv3-tableau-project-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: 12px;
}

.sv3-tableau-project-data > div {
    padding: 13px 14px;

    border: 1px solid rgba(116,139,180,.18);
    border-radius: 7px;

    background: rgba(255,255,255,.025);
}

.sv3-tableau-project-data span {
    display: block;

    margin-bottom: 5px;

    color: #7f8ba0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.sv3-tableau-project-data strong {
    color: #fff;

    font-size: 13px;
    line-height: 1.4;
}

.sv3-tableau-project-actions {
    margin-top: 20px;
}

.sv3-tableau-project-back {
    display: inline-flex;
    align-items: center;

    padding: 10px 14px;

    border: 1px solid rgba(116,139,180,.28);
    border-radius: 6px;

    color: #d8e0ed;
    text-decoration: none;
}

@media (max-width: 850px) {

    .sv3-tableau-project-layout {
        grid-template-columns: 1fr;
    }

    .sv3-tableau-project-image {
        height: 300px;
    }

    .sv3-tableau-project-data {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   SV TABLEAU DETAIL TARGET V1
   ========================================================= */

.sv3-tableau-project-detail {
    display: none;
}

.sv3-tableau-project-detail:target {
    display: block;
}


/* ==========================================================
   SV_CLIENT_DEPOSIT_SHORTCUTS_CSS_V1
   ========================================================== */

.sv3-auto-actions,
.sv3-tableau-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sv3-deposit-shortcut {
    background: linear-gradient(
        135deg,
        rgba(132, 66, 255, .95),
        rgba(95, 52, 220, .95)
    ) !important;
    border-color: rgba(162, 111, 255, .65) !important;
    color: #fff !important;
}

.sv3-deposit-shortcut:hover {
    transform: translateY(-1px);
}

.sv3-pay-quote-card {
    scroll-margin-top: 120px;
}

.sv3-pay-quote-card:target {
    outline: 1px solid rgba(156, 99, 255, .75);
    box-shadow:
        0 0 0 3px rgba(124, 72, 255, .12),
        0 18px 45px rgba(0, 0, 0, .28);
}

@media (max-width: 700px) {
    .sv3-auto-actions,
    .sv3-tableau-actions {
        align-items: stretch;
    }

    .sv3-auto-actions > *,
    .sv3-tableau-actions > * {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================
   SV_PAYMENT_DEEP_LINK_FOCUS_CSS_V1
   ========================================================== */

.sv3-pay-quote-card.sv3-payment-focus {
    outline: 1px solid rgba(163, 103, 255, .9);
    box-shadow:
        0 0 0 4px rgba(137, 78, 255, .14),
        0 18px 55px rgba(0, 0, 0, .34);
}



/* =========================================================
   SV_DASHBOARD_ORDER_REAL_IMAGE_CSS_V1
   ========================================================= */

.sv3-last-order-cover {
    overflow: hidden;
}

.sv3-last-order-product-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}



/* =========================================================
   SV_SHOP_ORDER_DETAIL_FALLBACK_ICON_CSS_V1
   ========================================================= */

.sv3-order-detail-thumb,
.sv3-order-overview-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv3-order-detail-fallback-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
}

.sv3-order-detail-fallback-icon--thumb {
    font-size: 34px;
}

.sv3-order-detail-fallback-icon--overview {
    width: 100%;
    height: 100%;
    min-height: 220px;
    font-size: 82px;
}



/* =========================================================
   SPECTRAVISION — ESPACE CLIENT / DASHBOARD V4
   Charte 2026
   ========================================================= */

.sv3-app{
    --sv4-bg:#05030a;
    --sv4-panel:#0b0811;
    --sv4-panel2:#100b18;
    --sv4-border:rgba(255,255,255,.075);
    --sv4-purple:#bd5cff;
    --sv4-purple-soft:rgba(189,92,255,.12);
    --sv4-text:#f5f1f7;
    --sv4-muted:#8f8797;

    background:var(--sv4-bg) !important;
}


/* ---------- BARRE SUPÉRIEURE ---------- */

.sv3-topbar{
    background:
        linear-gradient(90deg,#07050c,#0a0710) !important;

    border-bottom:1px solid rgba(190,77,245,.16) !important;
    box-shadow:0 8px 30px rgba(0,0,0,.18);
}

.sv3-brand-image img{
    filter:
        drop-shadow(0 0 12px rgba(176,60,255,.13));
}

.sv3-top-user{
    color:var(--sv4-text);
}


/* ---------- SIDEBAR ---------- */

.sv3-sidebar{
    background:
        radial-gradient(
            circle at 20% 65%,
            rgba(115,37,173,.08),
            transparent 32%
        ),
        #07050b !important;

    border-right:1px solid rgba(255,255,255,.065) !important;
}

.sv3-nav a{
    position:relative;

    margin:3px 10px;
    border:1px solid transparent !important;
    border-radius:3px !important;

    color:#aaa3b2 !important;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.sv3-nav a:hover{
    color:#fff !important;
    background:rgba(188,78,243,.055) !important;
    border-color:rgba(188,78,243,.10) !important;
    transform:translateX(2px);
}

.sv3-nav a.active{
    color:#fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(151,50,207,.38),
            rgba(115,37,165,.16)
        ) !important;

    border-color:rgba(193,82,246,.16) !important;
}

.sv3-nav a.active::before{
    content:"";

    position:absolute;
    left:-11px;
    top:20%;
    bottom:20%;

    width:2px;

    background:#c25eff;

    box-shadow:
        0 0 12px rgba(196,91,255,.75);
}

.sv3-nav .dashicons{
    color:#bba9c6;
}

.sv3-nav a.active .dashicons{
    color:#d58aff;
}

.sv3-nav-separator{
    border-color:rgba(255,255,255,.06) !important;
}


/* ---------- ZONE PRINCIPALE ---------- */

.sv3-main{
    background:
        radial-gradient(
            circle at 80% 0,
            rgba(116,36,178,.055),
            transparent 28%
        ),
        #05030a !important;

    color:var(--sv4-text);
}


/* ---------- BIENVENUE ---------- */

.sv3-main.sv3-dashboard-mode .sv3-welcome{
    position:relative;

    overflow:hidden;

    min-height:135px;

    border:1px solid rgba(255,255,255,.065) !important;
    border-radius:3px !important;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(173,55,244,.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(15,10,22,.96),
            rgba(7,5,11,.98)
        ) !important;

    box-shadow:none !important;
}

.sv3-main.sv3-dashboard-mode .sv3-welcome::before{
    content:"ESPACE CLIENT";

    position:absolute;
    right:25px;
    bottom:-17px;

    color:rgba(255,255,255,.018);

    font-family:Georgia,"Times New Roman",serif;
    font-size:4.8rem;
    line-height:1;
    letter-spacing:-.06em;

    pointer-events:none;
}

.sv3-welcome h1{
    color:#fff !important;

    font-family:Georgia,"Times New Roman",serif !important;
    font-weight:400 !important;

    letter-spacing:-.025em;
}

.sv3-welcome p{
    color:#928b99 !important;
}


/* ---------- CARTES STATISTIQUES ---------- */

.sv3-main.sv3-dashboard-mode .sv3-stats{
    gap:12px !important;
}

.sv3-main.sv3-dashboard-mode .sv3-stat{
    position:relative;

    overflow:hidden;

    border:1px solid var(--sv4-border) !important;
    border-radius:3px !important;

    background:
        linear-gradient(
            145deg,
            rgba(16,11,24,.96),
            rgba(8,6,13,.98)
        ) !important;

    box-shadow:none !important;

    transition:
        transform .18s ease,
        border-color .18s ease;
}

.sv3-main.sv3-dashboard-mode .sv3-stat:hover{
    transform:translateY(-2px);

    border-color:rgba(189,83,245,.22) !important;
}

.sv3-main.sv3-dashboard-mode .sv3-stat::after{
    content:"";

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(192,80,247,.35),
            transparent
        );
}

.sv3-stat-icon,
.sv3-stat-icon.purple,
.sv3-stat-icon.orange,
.sv3-stat-icon.blue,
.sv3-stat-icon.green{
    color:#d58cff !important;

    background:
        rgba(177,64,235,.10) !important;

    border:1px solid rgba(195,85,247,.12);
}


/* ---------- PANNEAUX DASHBOARD ---------- */

.sv3-main.sv3-dashboard-mode .sv3-panel,
.sv3-dashboard-payment-card{
    border:1px solid var(--sv4-border) !important;
    border-radius:3px !important;

    background:
        linear-gradient(
            145deg,
            rgba(13,9,20,.96),
            rgba(7,5,11,.98)
        ) !important;

    box-shadow:none !important;
}

.sv3-main.sv3-dashboard-mode .sv3-panel h2,
.sv3-main.sv3-dashboard-mode .sv3-panel h3,
.sv3-dashboard-payment-card > h2{
    color:#eee8f1 !important;

    font-family:Georgia,"Times New Roman",serif !important;
    font-weight:400 !important;
}

.sv3-main.sv3-dashboard-mode .sv3-panel p,
.sv3-main.sv3-dashboard-mode .sv3-panel small{
    color:#88818e;
}


/* ---------- PAIEMENT ---------- */

.sv3-dashboard-payment-ring{
    border-color:rgba(190,83,245,.18) !important;

    background:
        rgba(178,65,235,.045) !important;
}

.sv3-dashboard-payment-ring strong{
    color:#fff !important;
}

.sv3-dashboard-payment-button{
    border-color:rgba(191,82,245,.30) !important;

    background:
        rgba(174,59,229,.055) !important;

    color:#eee6f2 !important;
}

.sv3-dashboard-payment-button:hover{
    border-color:rgba(200,96,255,.60) !important;

    background:
        rgba(178,63,236,.11) !important;
}


/* ---------- ACTIONS DU BAS ---------- */

.sv3-main.sv3-dashboard-mode
.sv3-dashboard-actions-bottom{
    gap:12px !important;
}

.sv3-main.sv3-dashboard-mode
.sv3-dashboard-actions-bottom > *{
    border:1px solid var(--sv4-border) !important;
    border-radius:3px !important;

    background:
        linear-gradient(
            145deg,
            rgba(14,9,21,.97),
            rgba(7,5,11,.98)
        ) !important;

    box-shadow:none !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.sv3-main.sv3-dashboard-mode
.sv3-dashboard-actions-bottom > *:hover{
    transform:translateY(-2px);

    border-color:rgba(192,80,247,.30) !important;

    background:
        rgba(151,48,207,.08) !important;
}


/* neutralisation des anciennes bordures multicolores */

.sv3-main.sv3-dashboard-mode
.sv3-dashboard-actions-bottom > *:nth-child(1),
.sv3-main.sv3-dashboard-mode
.sv3-dashboard-actions-bottom > *:nth-child(2),
.sv3-main.sv3-dashboard-mode
.sv3-dashboard-actions-bottom > *:nth-child(3),
.sv3-main.sv3-dashboard-mode
.sv3-dashboard-actions-bottom > *:nth-child(4){
    border-color:var(--sv4-border) !important;
}

.sv3-main.sv3-dashboard-mode
.sv3-dashboard-actions-bottom > *:hover{
    border-color:rgba(192,80,247,.30) !important;
}


/* ---------- SIDEBAR BAS ---------- */

.sv3-sidebar-bottom{
    border-top-color:rgba(255,255,255,.06) !important;
}

.sv3-sidebar-message{
    color:#9a929f !important;
}

.sv3-logout{
    color:#b6adb9 !important;
}

.sv3-logout:hover{
    color:#d982ff !important;
}


/* ---------- BADGES ---------- */

.sv3-badge{
    border:1px solid rgba(190,83,245,.18) !important;

    background:
        rgba(178,63,234,.10) !important;

    color:#d990ff !important;
}


/* ---------- RESPONSIVE ---------- */

@media(max-width:900px){

    .sv3-main.sv3-dashboard-mode .sv3-welcome::before{
        font-size:3.5rem;
    }

}

@media(max-width:650px){

    .sv3-main.sv3-dashboard-mode .sv3-welcome{
        min-height:auto;
    }

    .sv3-main.sv3-dashboard-mode .sv3-stats{
        gap:8px !important;
    }

}


/* =========================================================
   SPECTRAVISION — DASHBOARD V4
   CARTES VIDES COMPACTES
   ========================================================= */

/* Prochaine prestation vide */
.sv3-main.sv3-dashboard-mode
#prestations:not(:has(.sv3-next-service-body)){
    min-height:150px !important;
    height:auto !important;
}

/* Dernière commande vide */
.sv3-main.sv3-dashboard-mode
#commande-recente:not(:has(.sv3-last-order-body)){
    min-height:150px !important;
    height:auto !important;
}

/* Le conteneur principal ne force plus les cartes vides
   à prendre toute la hauteur de la ligne */
.sv3-main.sv3-dashboard-mode
.sv3-dashboard-primary{
    align-items:start !important;
}

/* Les deux cartes du haut restent alignées */
.sv3-main.sv3-dashboard-mode
#prestations,
.sv3-main.sv3-dashboard-mode
#commande-recente{
    align-self:start !important;
}

/* Messages d'état vide */
.sv3-main.sv3-dashboard-mode
#prestations:not(:has(.sv3-next-service-body))
.sv3-project-content,

.sv3-main.sv3-dashboard-mode
#commande-recente:not(:has(.sv3-last-order-body))
.sv3-order-content{
    min-height:0 !important;
    height:auto !important;
}

/* On conserve la taille normale dès qu'il existe
   une vraie prestation ou une vraie commande */
.sv3-main.sv3-dashboard-mode
#prestations:has(.sv3-next-service-body),

.sv3-main.sv3-dashboard-mode
#commande-recente:has(.sv3-last-order-body){
    height:auto !important;
}


/* =========================================================
   SPECTRAVISION — DASHBOARD V4
   PAIEMENTS PLEINE LARGEUR
   ========================================================= */

.sv3-main.sv3-dashboard-mode
.sv3-dashboard-primary > #paiements{
    grid-column:1 / -1 !important;
    width:100% !important;
}

/* Contenu paiement mieux réparti sur grand écran */
@media(min-width:901px){

    .sv3-main.sv3-dashboard-mode
    #paiements .sv3-dashboard-payment-main{
        max-width:650px;
    }

}


/* =========================================================
   SPECTRAVISION — MES PRESTATIONS V4
   ETAT VIDE PREMIUM
   ========================================================= */

.sv3-prestations-page .sv3-prestations-empty{
    position:relative;
    overflow:hidden;

    min-height:230px !important;

    display:flex !important;
    flex-direction:column;
    align-items:center !important;
    justify-content:center !important;
    gap:15px !important;

    padding:40px 25px !important;

    border:1px solid rgba(190,79,246,.14) !important;
    border-radius:3px !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(156,48,215,.08),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(13,9,20,.96),
            rgba(7,5,11,.98)
        ) !important;

    text-align:center;
    color:#8e8794 !important;
}

/* halo discret */
.sv3-prestations-page .sv3-prestations-empty::before{
    content:"";

    position:absolute;
    width:180px;
    height:180px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border:1px solid rgba(190,79,246,.055);
    border-radius:50%;

    box-shadow:
        0 0 70px rgba(165,49,225,.05);

    pointer-events:none;
}

/* icône */
.sv3-prestations-page
.sv3-prestations-empty > .dashicons{
    position:relative;
    z-index:2;

    width:52px !important;
    height:52px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 !important;

    border:1px solid rgba(197,86,250,.22);
    border-radius:50%;

    background:rgba(177,61,232,.08);

    color:#c665f7 !important;

    font-size:25px !important;
    line-height:52px !important;

    box-shadow:
        0 0 30px rgba(174,58,231,.08);
}

/* texte */
.sv3-prestations-page .sv3-prestations-empty > div{
    position:relative;
    z-index:2;

    max-width:440px;
}

.sv3-prestations-page .sv3-prestations-empty strong{
    display:block;

    margin:0 0 8px !important;

    color:#f1ebf4 !important;

    font-family:Georgia,"Times New Roman",serif;
    font-size:1.45rem;
    font-weight:400;
    line-height:1.15;
}

.sv3-prestations-page .sv3-prestations-empty p{
    margin:0 !important;

    color:#817a87 !important;

    font-size:.86rem;
    line-height:1.65;
}


/* filtres */
.sv3-prestations-tabs button{
    border-radius:3px !important;
}

.sv3-prestations-tabs button.active{
    border-color:rgba(196,84,250,.32) !important;

    background:
        linear-gradient(
            135deg,
            rgba(150,47,207,.55),
            rgba(112,34,164,.35)
        ) !important;

    color:#fff !important;
}


/* bouton nouvelle prestation */
.sv3-prestations-new{
    border:1px solid rgba(202,91,255,.42) !important;
    border-radius:3px !important;

    background:
        linear-gradient(
            135deg,
            #8f31c8,
            #b449e7
        ) !important;

    box-shadow:
        0 10px 30px rgba(157,43,214,.12) !important;
}

.sv3-prestations-new:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}


@media(max-width:700px){

    .sv3-prestations-page .sv3-prestations-empty{
        min-height:200px !important;
        padding:32px 18px !important;
    }

}


/* =========================================================
   SPECTRAVISION — MES PRESTATIONS
   PAS DE DOUBLE ETAT VIDE
   ========================================================= */

/*
 * Quand la liste ne contient aucune prestation réelle,
 * l'état vide PHP suffit.
 * On masque l'état vide secondaire généré par le filtre JS.
 */
.sv3-prestations-list
.sv3-prestations-empty:not(:first-child){
    display:none !important;
}


/* =========================================================
   SPECTRAVISION — MES PACKS V4
   ETAT VIDE
   ========================================================= */

.sv3-packs-page .sv3-packs-empty{
    position:relative;
    overflow:hidden;

    min-height:230px !important;

    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0 !important;

    padding:40px 25px !important;

    border:1px solid rgba(190,79,246,.14) !important;
    border-radius:3px !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(156,48,215,.08),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(13,9,20,.96),
            rgba(7,5,11,.98)
        ) !important;

    text-align:center;
}

/* cercle décoratif */
.sv3-packs-page .sv3-packs-empty::before{
    content:"";

    position:absolute;
    left:50%;
    top:47%;

    width:180px;
    height:180px;

    transform:translate(-50%,-50%);

    border:1px solid rgba(190,79,246,.055);
    border-radius:50%;

    box-shadow:
        0 0 70px rgba(165,49,225,.05);

    pointer-events:none;
}

/* icône */
.sv3-packs-page
.sv3-packs-empty > .dashicons{
    position:relative;
    z-index:2;

    width:52px !important;
    height:52px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 0 16px !important;

    border:1px solid rgba(197,86,250,.22);
    border-radius:50%;

    background:rgba(177,61,232,.08);

    color:#c665f7 !important;

    font-size:25px !important;
    line-height:52px !important;

    box-shadow:
        0 0 30px rgba(174,58,231,.08);
}

/* titre */
.sv3-packs-page .sv3-packs-empty strong{
    position:relative;
    z-index:2;

    display:block;

    margin:0 0 8px !important;

    color:#f1ebf4 !important;

    font-family:Georgia,"Times New Roman",serif;
    font-size:1.45rem !important;
    font-weight:400 !important;
    line-height:1.15;
}

/* description */
.sv3-packs-page .sv3-packs-empty p{
    position:relative;
    z-index:2;

    max-width:470px;

    margin:0 0 20px !important;

    color:#817a87 !important;

    font-size:.86rem;
    line-height:1.65;
}

/* CTA */
.sv3-packs-page .sv3-packs-empty a{
    position:relative;
    z-index:2;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:38px;

    padding:0 18px;

    border:1px solid rgba(197,86,250,.28);
    border-radius:3px;

    background:rgba(164,53,219,.08);

    color:#d58aff !important;

    font-size:.78rem;
    font-weight:700;
    text-decoration:none !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.sv3-packs-page .sv3-packs-empty a:hover{
    transform:translateY(-2px);

    border-color:rgba(207,101,255,.55);

    background:rgba(172,60,226,.15);

    color:#fff !important;
}


/* Compteurs */
.sv3-packs-page .sv3-packs-summary > div{
    border-color:rgba(190,79,246,.13) !important;
    background:rgba(11,7,17,.68) !important;
}


/* Nouveau pack */
.sv3-packs-page .sv3-packs-new{
    border:1px solid rgba(202,91,255,.42) !important;
    border-radius:3px !important;

    background:
        linear-gradient(
            135deg,
            #8f31c8,
            #b449e7
        ) !important;

    box-shadow:
        0 10px 30px rgba(157,43,214,.12) !important;
}


@media(max-width:700px){

    .sv3-packs-page .sv3-packs-empty{
        min-height:200px !important;
        padding:32px 18px !important;
    }

}


/* =========================================================
   SPECTRAVISION — MES MAPPINGS V4
   ETAT VIDE + CHARTE VIOLETTE
   ========================================================= */

.sv3-mappings-page .sv3-mappings-empty{
    position:relative;
    overflow:hidden;

    min-height:230px !important;

    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0 !important;

    padding:40px 25px !important;

    border:1px solid rgba(190,79,246,.14) !important;
    border-radius:3px !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(156,48,215,.08),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(13,9,20,.96),
            rgba(7,5,11,.98)
        ) !important;

    text-align:center;
}

/* Cercle décoratif */
.sv3-mappings-page .sv3-mappings-empty::before{
    content:"";

    position:absolute;
    left:50%;
    top:47%;

    width:180px;
    height:180px;

    transform:translate(-50%,-50%);

    border:1px solid rgba(190,79,246,.055);
    border-radius:50%;

    box-shadow:
        0 0 70px rgba(165,49,225,.05);

    pointer-events:none;
}

/* Icône */
.sv3-mappings-page
.sv3-mappings-empty > .dashicons{
    position:relative;
    z-index:2;

    width:52px !important;
    height:52px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 0 16px !important;

    border:1px solid rgba(197,86,250,.22);
    border-radius:50%;

    background:rgba(177,61,232,.08);

    color:#c665f7 !important;

    font-size:25px !important;
    line-height:52px !important;

    box-shadow:
        0 0 30px rgba(174,58,231,.08);
}

/* Titre */
.sv3-mappings-page .sv3-mappings-empty strong{
    position:relative;
    z-index:2;

    display:block;

    margin:0 0 8px !important;

    color:#f1ebf4 !important;

    font-family:Georgia,"Times New Roman",serif;
    font-size:1.45rem !important;
    font-weight:400 !important;
    line-height:1.15;
}

/* Description */
.sv3-mappings-page .sv3-mappings-empty p{
    position:relative;
    z-index:2;

    max-width:520px;

    margin:0 0 20px !important;

    color:#817a87 !important;

    font-size:.86rem;
    line-height:1.65;
}

/* CTA */
.sv3-mappings-page .sv3-mappings-empty a{
    position:relative;
    z-index:2;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:38px;
    padding:0 18px;

    border:1px solid rgba(197,86,250,.28);
    border-radius:3px;

    background:rgba(164,53,219,.08);

    color:#d58aff !important;

    font-size:.78rem;
    font-weight:700;
    text-decoration:none !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.sv3-mappings-page .sv3-mappings-empty a:hover{
    transform:translateY(-2px);
    border-color:rgba(207,101,255,.55);
    background:rgba(172,60,226,.15);
    color:#fff !important;
}


/* Compteurs */
.sv3-mappings-page .sv3-mappings-summary > div{
    border-color:rgba(190,79,246,.13) !important;
    background:rgba(11,7,17,.68) !important;
}


/* Nouveau mapping : suppression de l'ancien bleu */
.sv3-mappings-page .sv3-mappings-new{
    border:1px solid rgba(202,91,255,.42) !important;
    border-radius:3px !important;

    background:
        linear-gradient(
            135deg,
            #8f31c8,
            #b449e7
        ) !important;

    color:#fff !important;

    box-shadow:
        0 10px 30px rgba(157,43,214,.12) !important;
}

.sv3-mappings-page .sv3-mappings-new:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}


@media(max-width:700px){

    .sv3-mappings-page .sv3-mappings-empty{
        min-height:200px !important;
        padding:32px 18px !important;
    }

}

/* =========================================================
   SPECTRAVISION — MES COMMANDES — ETAT VIDE V2
   ========================================================= */

.sv3-orders-empty{
    min-height:260px !important;
    width:100% !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:0 !important;
    padding:38px 28px !important;

    text-align:center !important;

    border:1px solid rgba(184,58,255,.24) !important;
    border-radius:4px !important;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(152,43,226,.11),
            transparent 34%
        ),
        rgba(8,6,14,.72) !important;

    box-shadow:
        inset 0 0 45px rgba(126,35,194,.025) !important;
}

.sv3-orders-empty > .dashicons{
    width:48px !important;
    height:48px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 0 20px !important;

    border:1px solid rgba(190,61,255,.38) !important;
    border-radius:50% !important;

    background:rgba(148,43,218,.09) !important;

    color:#c84cff !important;
    font-size:24px !important;
    line-height:48px !important;

    box-shadow:
        0 0 0 22px rgba(159,42,225,.025),
        0 0 35px rgba(157,42,225,.08) !important;
}

.sv3-orders-empty > div{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
}

.sv3-orders-empty strong{
    display:block !important;

    margin:0 0 10px !important;

    color:#fff !important;

    font-family:Georgia,"Times New Roman",serif !important;
    font-size:24px !important;
    font-weight:400 !important;
    line-height:1.2 !important;
}

.sv3-orders-empty p{
    margin:0 !important;

    color:#92899e !important;

    font-size:14px !important;
    line-height:1.55 !important;
}

@media(max-width:700px){
    .sv3-orders-empty{
        min-height:220px !important;
        padding:30px 20px !important;
    }

    .sv3-orders-empty strong{
        font-size:21px !important;
    }
}


/* =========================================================
   SPECTRAVISION — MES TABLEAUX VIVANTS — ETAT VIDE V2
   ========================================================= */

.sv3-tableaux-empty{
    min-height:260px !important;
    width:100% !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:0 !important;
    padding:38px 28px !important;

    text-align:center !important;

    border:1px solid rgba(184,58,255,.24) !important;
    border-radius:4px !important;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(152,43,226,.11),
            transparent 34%
        ),
        rgba(8,6,14,.72) !important;

    box-shadow:
        inset 0 0 45px rgba(126,35,194,.025) !important;
}

.sv3-tableaux-empty > .dashicons{
    width:48px !important;
    height:48px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 0 20px !important;

    border:1px solid rgba(190,61,255,.38) !important;
    border-radius:50% !important;

    background:rgba(148,43,218,.09) !important;

    color:#c84cff !important;
    font-size:24px !important;
    line-height:48px !important;

    box-shadow:
        0 0 0 22px rgba(159,42,225,.025),
        0 0 35px rgba(157,42,225,.08) !important;
}

.sv3-tableaux-empty strong{
    display:block !important;

    margin:0 0 10px !important;

    color:#fff !important;

    font-family:Georgia,"Times New Roman",serif !important;
    font-size:24px !important;
    font-weight:400 !important;
    line-height:1.2 !important;
}

.sv3-tableaux-empty p{
    max-width:600px !important;

    margin:0 0 20px !important;

    color:#92899e !important;

    font-size:14px !important;
    line-height:1.55 !important;
}

.sv3-tableaux-empty a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:40px !important;
    padding:0 18px !important;

    border:1px solid rgba(194,61,255,.42) !important;
    border-radius:4px !important;

    background:rgba(153,39,218,.09) !important;

    color:#d46cff !important;
    font-weight:700 !important;
    text-decoration:none !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease !important;
}

.sv3-tableaux-empty a:hover{
    color:#fff !important;
    border-color:rgba(211,91,255,.75) !important;
    background:rgba(170,49,232,.18) !important;
}

@media(max-width:700px){
    .sv3-tableaux-empty{
        min-height:220px !important;
        padding:30px 20px !important;
    }

    .sv3-tableaux-empty strong{
        font-size:21px !important;
    }
}


/* =========================================================
   SPECTRAVISION — MES AUTOMATES — ETAT VIDE V2
   ========================================================= */

.sv3-automates-page .sv3-auto-empty{
    position:relative;
    overflow:hidden;

    min-height:220px;
    padding:34px 28px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    border:1px solid rgba(184,60,255,.25);
    border-radius:3px;

    background:
        radial-gradient(circle at 50% 48%,
            rgba(153,43,220,.10) 0,
            rgba(91,28,145,.045) 24%,
            transparent 52%),
        rgba(7,5,13,.72);
}

.sv3-automates-page .sv3-auto-empty > .dashicons{
    position:relative;

    width:48px;
    height:48px;
    margin:0 0 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(199,66,255,.36);
    border-radius:50%;

    background:rgba(131,35,190,.10);

    color:#c13fff;
    font-size:25px;
    line-height:48px;

    box-shadow:
        0 0 28px rgba(165,44,235,.10);
}

.sv3-automates-page .sv3-auto-empty > .dashicons::after{
    content:"";
    position:absolute;

    width:128px;
    height:128px;

    border:1px solid rgba(178,51,239,.08);
    border-radius:50%;

    pointer-events:none;
}

.sv3-automates-page .sv3-auto-empty strong{
    display:block;
    margin:0 0 8px;

    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:20px;
    font-weight:400;
    line-height:1.25;
}

.sv3-automates-page .sv3-auto-empty p{
    max-width:620px;
    margin:0 0 20px;

    color:#817a91;
    font-size:13px;
    line-height:1.55;
}

.sv3-automates-page .sv3-auto-empty a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:36px;
    padding:8px 17px;

    border:1px solid rgba(190,62,255,.42);
    border-radius:3px;

    background:rgba(133,33,190,.09);

    color:#dc75ff;
    font-size:12px;
    font-weight:700;
    text-decoration:none;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.sv3-automates-page .sv3-auto-empty a:hover{
    color:#fff;
    border-color:rgba(211,96,255,.70);
    background:rgba(157,48,215,.18);
}

@media(max-width:700px){
    .sv3-automates-page .sv3-auto-empty{
        min-height:200px;
        padding:28px 18px;
    }
}


/* =========================================================
   SPECTRAVISION — MES DEVIS — ETAT VIDE V2
   ========================================================= */

#devis .sv3-devis-empty{
    position:relative;
    overflow:hidden;

    min-height:220px;
    padding:34px 28px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    border:1px solid rgba(184,60,255,.25);
    border-radius:3px;

    background:
        radial-gradient(circle at 50% 48%,
            rgba(153,43,220,.10) 0,
            rgba(91,28,145,.045) 24%,
            transparent 52%),
        rgba(7,5,13,.72);
}

#devis .sv3-devis-empty > .dashicons{
    position:relative;

    width:48px;
    height:48px;
    margin:0 0 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(199,66,255,.36);
    border-radius:50%;

    background:rgba(131,35,190,.10);

    color:#c13fff;
    font-size:25px;
    line-height:48px;

    box-shadow:0 0 28px rgba(165,44,235,.10);
}

#devis .sv3-devis-empty > .dashicons::after{
    content:"";
    position:absolute;

    width:128px;
    height:128px;

    border:1px solid rgba(178,51,239,.08);
    border-radius:50%;

    pointer-events:none;
}

#devis .sv3-devis-empty strong{
    display:block;
    margin:0 0 8px;

    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:20px;
    font-weight:400;
    line-height:1.25;
}

#devis .sv3-devis-empty p{
    max-width:620px;
    margin:0 0 20px;

    color:#817a91;
    font-size:13px;
    line-height:1.55;
}

#devis .sv3-devis-empty a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:36px;
    padding:8px 17px;

    border:1px solid rgba(190,62,255,.42);
    border-radius:3px;

    background:rgba(133,33,190,.09);

    color:#dc75ff;
    font-size:12px;
    font-weight:700;
    text-decoration:none;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

#devis .sv3-devis-empty a:hover{
    color:#fff;
    border-color:rgba(211,96,255,.70);
    background:rgba(157,48,215,.18);
}

@media(max-width:700px){
    #devis .sv3-devis-empty{
        min-height:200px;
        padding:28px 18px;
    }
}


/* =========================================================
   SPECTRAVISION — PAIEMENTS & FACTURES — ETATS VIDES V2
   ========================================================= */

.sv3-payments-page .sv3-pay-empty{
    position:relative;
    overflow:hidden;

    min-height:210px;
    padding:32px 28px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    border:1px solid rgba(184,60,255,.24);

    background:
        radial-gradient(circle at 50% 48%,
            rgba(153,43,220,.10) 0,
            rgba(91,28,145,.045) 24%,
            transparent 52%),
        rgba(7,5,13,.72);
}

.sv3-payments-page .sv3-pay-empty > .dashicons{
    position:relative;

    width:46px;
    height:46px;
    margin:0 0 18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(199,66,255,.36);
    border-radius:50%;

    background:rgba(131,35,190,.10);

    color:#c13fff;
    font-size:23px;
    line-height:46px;

    box-shadow:0 0 28px rgba(165,44,235,.10);
}

.sv3-payments-page .sv3-pay-empty > .dashicons::after{
    content:"";
    position:absolute;

    width:120px;
    height:120px;

    border:1px solid rgba(178,51,239,.07);
    border-radius:50%;

    pointer-events:none;
}

.sv3-payments-page .sv3-pay-empty strong{
    display:block;
    margin:0 0 8px;

    color:#fff;

    font-family:Georgia,"Times New Roman",serif;
    font-size:19px;
    font-weight:400;
    line-height:1.25;
}

.sv3-payments-page .sv3-pay-empty p{
    max-width:600px;
    margin:0;

    color:#817a91;
    font-size:12px;
    line-height:1.55;
}


/* Factures : version légèrement plus compacte */

.sv3-payments-page .sv3-pay-empty.small{
    min-height:175px;
    padding:28px 24px;
}

.sv3-payments-page .sv3-pay-empty.small > .dashicons{
    width:42px;
    height:42px;
    margin-bottom:16px;

    font-size:21px;
    line-height:42px;
}

.sv3-payments-page .sv3-pay-empty.small > .dashicons::after{
    width:105px;
    height:105px;
}


/* Mobile */

@media(max-width:700px){

    .sv3-payments-page .sv3-pay-empty{
        min-height:190px;
        padding:28px 18px;
    }

    .sv3-payments-page .sv3-pay-empty.small{
        min-height:160px;
        padding:24px 18px;
    }
}

/* =========================================================
   SPECTRAVISION — RETOURS & REMBOURSEMENTS — ETATS VIDES V2
   ========================================================= */

#remboursements .sv3-refund-empty{
    position:relative;
    overflow:hidden;

    min-height:190px;
    margin:12px 0 24px;
    padding:30px 26px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    border:1px solid rgba(184,60,255,.25);
    border-radius:3px;

    background:
        radial-gradient(circle at 50% 48%,
            rgba(153,43,220,.10) 0,
            rgba(91,28,145,.045) 24%,
            transparent 52%),
        rgba(7,5,13,.72);
}

#remboursements .sv3-refund-empty > .dashicons{
    position:relative;

    width:46px;
    height:46px;
    margin:0 0 18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(199,66,255,.36);
    border-radius:50%;

    background:rgba(131,35,190,.10);

    color:#c13fff;
    font-size:23px;
    line-height:46px;

    box-shadow:0 0 28px rgba(165,44,235,.10);
}

#remboursements .sv3-refund-empty > .dashicons::after{
    content:"";
    position:absolute;

    width:115px;
    height:115px;

    border:1px solid rgba(178,51,239,.07);
    border-radius:50%;

    pointer-events:none;
}

#remboursements .sv3-refund-empty strong{
    display:block;
    margin:0 0 8px;

    color:#fff;

    font-family:Georgia,"Times New Roman",serif;
    font-size:19px;
    font-weight:400;
    line-height:1.25;
}

#remboursements .sv3-refund-empty p{
    max-width:600px;
    margin:0;

    color:#817a91;
    font-size:12px;
    line-height:1.55;
}


/* Deuxième bloc légèrement plus compact */

#remboursements .sv3-refund-empty--small{
    min-height:165px;
    margin-bottom:0;
    padding:26px 22px;
}

#remboursements .sv3-refund-empty--small > .dashicons{
    width:42px;
    height:42px;
    margin-bottom:16px;

    font-size:21px;
    line-height:42px;
}

#remboursements .sv3-refund-empty--small > .dashicons::after{
    width:100px;
    height:100px;
}


@media(max-width:700px){

    #remboursements .sv3-refund-empty{
        min-height:170px;
        padding:26px 18px;
    }

    #remboursements .sv3-refund-empty--small{
        min-height:150px;
    }
}

/* =========================================================
   SPECTRAVISION — MES FICHIERS — ETAT VIDE V2
   ========================================================= */

.sv3-files-page .sv3-files-empty{
    position:relative;
    overflow:hidden;

    min-height:220px;
    padding:34px 28px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    border:1px solid rgba(184,60,255,.25);
    border-radius:3px;

    background:
        radial-gradient(circle at 50% 48%,
            rgba(153,43,220,.10) 0,
            rgba(91,28,145,.045) 24%,
            transparent 52%),
        rgba(7,5,13,.72);
}

.sv3-files-page .sv3-files-empty > .dashicons{
    position:relative;

    width:48px;
    height:48px;
    margin:0 0 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(199,66,255,.36);
    border-radius:50%;

    background:rgba(131,35,190,.10);

    color:#c13fff;
    font-size:25px;
    line-height:48px;

    box-shadow:0 0 28px rgba(165,44,235,.10);
}

.sv3-files-page .sv3-files-empty > .dashicons::after{
    content:"";
    position:absolute;

    width:128px;
    height:128px;

    border:1px solid rgba(178,51,239,.08);
    border-radius:50%;

    pointer-events:none;
}

.sv3-files-page .sv3-files-empty strong{
    display:block;
    margin:0 0 8px;

    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:20px;
    font-weight:400;
    line-height:1.25;
}

.sv3-files-page .sv3-files-empty p{
    max-width:620px;
    margin:0;

    color:#817a91;
    font-size:13px;
    line-height:1.55;
}

@media(max-width:700px){
    .sv3-files-page .sv3-files-empty{
        min-height:200px;
        padding:28px 18px;
    }
}


/* =========================================================
   SPECTRAVISION — MESSAGES — ETAT VIDE V2
   ========================================================= */

.sv3-messages-page .sv3-messages-empty{
    position:relative;
    overflow:hidden;

    min-height:250px;
    padding:38px 28px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    border:1px solid rgba(184,60,255,.25);
    border-radius:3px;

    background:
        radial-gradient(circle at 50% 48%,
            rgba(153,43,220,.10) 0,
            rgba(91,28,145,.045) 24%,
            transparent 52%),
        rgba(7,5,13,.72);
}

.sv3-messages-page .sv3-messages-empty > .dashicons{
    position:relative;

    width:48px;
    height:48px;
    margin:0 0 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(199,66,255,.36);
    border-radius:50%;

    background:rgba(131,35,190,.10);

    color:#c13fff;
    font-size:24px;
    line-height:48px;

    box-shadow:0 0 28px rgba(165,44,235,.10);
}

.sv3-messages-page .sv3-messages-empty > .dashicons::after{
    content:"";
    position:absolute;

    width:128px;
    height:128px;

    border:1px solid rgba(178,51,239,.08);
    border-radius:50%;

    pointer-events:none;
}

.sv3-messages-page .sv3-messages-empty strong{
    display:block;
    margin:0 0 9px;

    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:20px;
    font-weight:400;
    line-height:1.25;
}

.sv3-messages-page .sv3-messages-empty p{
    max-width:620px;
    margin:0;

    color:#817a91;
    font-size:13px;
    line-height:1.55;
}

@media(max-width:700px){
    .sv3-messages-page .sv3-messages-empty{
        min-height:210px;
        padding:30px 18px;
    }
}


/* =========================================================
   SPECTRAVISION — MES RENDEZ-VOUS — ETAT VIDE V2
   ========================================================= */

.sv3-appointments-page .sv3-rdv-empty{
    position:relative;
    overflow:hidden;

    min-height:220px;
    padding:34px 28px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    border:1px solid rgba(77,142,255,.25);
    border-radius:3px;

    background:
        radial-gradient(circle at 50% 48%,
            rgba(55,121,235,.10) 0,
            rgba(35,78,150,.045) 24%,
            transparent 52%),
        rgba(6,8,14,.72);
}

.sv3-appointments-page .sv3-rdv-empty > .dashicons{
    position:relative;

    width:48px;
    height:48px;
    margin:0 0 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(82,151,255,.38);
    border-radius:50%;

    background:rgba(46,104,205,.10);

    color:#5f9dff;
    font-size:25px;
    line-height:48px;

    box-shadow:
        0 0 28px rgba(57,125,240,.11);
}

.sv3-appointments-page .sv3-rdv-empty > .dashicons::after{
    content:"";
    position:absolute;

    width:128px;
    height:128px;

    border:1px solid rgba(74,139,245,.09);
    border-radius:50%;

    pointer-events:none;
}

.sv3-appointments-page .sv3-rdv-empty strong{
    position:relative;
    z-index:1;

    display:block;
    margin:0 0 8px;

    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:20px;
    font-weight:400;
    line-height:1.25;
}

.sv3-appointments-page .sv3-rdv-empty p{
    position:relative;
    z-index:1;

    max-width:620px;
    margin:0;

    color:#817f91;
    font-size:13px;
    line-height:1.55;
}

@media(max-width:700px){
    .sv3-appointments-page .sv3-rdv-empty{
        min-height:200px;
        padding:28px 18px;
    }
}


/* =========================================================
   SPECTRAVISION — MES INFORMATIONS V2
   ========================================================= */

.sv3-profile-page{
    width:100%;
}


/* ---------- EN-TÊTE ---------- */

.sv3-profile-page .sv3-profile-header{
    position:relative;
    overflow:hidden;

    margin:0 0 14px;
    padding:20px 22px;

    border:1px solid rgba(128,73,214,.24);
    border-radius:8px;

    background:
        radial-gradient(circle at 92% 25%,
            rgba(126,52,218,.13),
            transparent 32%),
        linear-gradient(
            135deg,
            rgba(10,16,25,.98),
            rgba(10,7,20,.98)
        );
}

.sv3-profile-page .sv3-profile-header::before{
    content:"PROFIL";

    display:block;
    margin:0 0 7px;

    color:#b35cff;

    font-size:10px;
    font-weight:800;
    letter-spacing:.14em;
}

.sv3-profile-page .sv3-profile-header h1{
    margin:0 !important;

    color:#fff;

    font-family:Georgia,"Times New Roman",serif;
    font-size:22px !important;
    font-weight:400;
    line-height:1.15;
}

.sv3-profile-page .sv3-profile-header p{
    margin:7px 0 0 !important;

    color:#8490a2;

    font-size:11px;
    line-height:1.5;
}


/* ---------- GRILLE ---------- */

.sv3-profile-page .sv3-profile-grid{
    grid-template-columns:250px minmax(0,1fr);
    gap:14px;
}


/* ---------- CARTES ---------- */

.sv3-profile-page .sv3-profile-avatar-card,
.sv3-profile-page .sv3-profile-fields{
    border:1px solid rgba(104,76,148,.30);
    border-radius:8px;

    background:
        linear-gradient(
            145deg,
            rgba(10,15,24,.98),
            rgba(6,8,15,.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.015);
}


/* ---------- AVATAR ---------- */

.sv3-profile-page .sv3-profile-avatar-card{
    position:relative;
    overflow:hidden;

    padding:28px 18px;

    justify-content:flex-start;
}

.sv3-profile-page .sv3-profile-avatar-card::before{
    content:"";

    position:absolute;
    top:-70px;
    left:50%;

    width:230px;
    height:230px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(133,55,225,.15),
            transparent 67%
        );

    pointer-events:none;
}

.sv3-profile-page .sv3-profile-avatar{
    position:relative;
    z-index:1;

    width:112px;
    height:112px;

    margin:0 0 18px;

    border:1px solid rgba(174,90,255,.72);

    background:
        linear-gradient(
            145deg,
            #5227a0,
            #201348
        );

    box-shadow:
        0 0 0 7px rgba(128,52,205,.055),
        0 0 32px rgba(135,53,218,.15);
}

.sv3-profile-page .sv3-profile-avatar span{
    font-family:Georgia,"Times New Roman",serif;
    font-size:38px;
    font-weight:700;
}

.sv3-profile-page .sv3-profile-avatar-card > strong{
    position:relative;
    z-index:1;

    color:#fff;

    font-family:Georgia,"Times New Roman",serif;
    font-size:15px;
    font-weight:400;
}

.sv3-profile-page .sv3-profile-avatar-card > small{
    position:relative;
    z-index:1;

    max-width:190px;

    margin-top:7px;

    color:#777f91;

    font-size:9px;
    line-height:1.55;
}


/* ---------- BOUTON PHOTO ---------- */

.sv3-profile-page .sv3-avatar-upload{
    position:relative;
    z-index:1;

    min-height:36px;

    margin-top:18px;
    padding:0 16px;

    justify-content:center;

    border:1px solid rgba(180,75,255,.45);
    border-radius:4px;

    background:rgba(122,39,181,.10);

    color:#d781ff;

    font-size:9px;
    font-weight:800;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.sv3-profile-page .sv3-avatar-upload:hover{
    color:#fff;

    border-color:rgba(205,101,255,.70);

    background:rgba(144,45,202,.19);
}


/* ---------- FORMULAIRE ---------- */

.sv3-profile-page .sv3-profile-fields{
    padding:22px;
}

.sv3-profile-page .sv3-profile-field-row{
    gap:14px;
}

.sv3-profile-page .sv3-profile-fields label{
    margin-bottom:14px;

    color:#d9dce4;

    font-size:9px;
    font-weight:700;
    letter-spacing:.015em;
}

.sv3-profile-page .sv3-profile-fields input{
    min-height:42px;

    margin-top:7px;
    padding:0 13px;

    border:1px solid rgba(76,100,132,.46);
    border-radius:4px;

    background:rgba(3,8,14,.88);

    color:#fff;

    font-size:10px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.sv3-profile-page .sv3-profile-fields input:hover{
    border-color:rgba(112,90,158,.58);
}

.sv3-profile-page .sv3-profile-fields input:focus{
    border-color:rgba(175,75,244,.80);

    background:#050912;

    box-shadow:
        0 0 0 2px rgba(158,63,224,.07),
        0 0 18px rgba(131,48,201,.07);
}

.sv3-profile-page .sv3-profile-fields input[readonly]{
    color:#858b98;

    background:rgba(5,9,14,.58);

    border-color:rgba(71,83,101,.34);

    opacity:1;
}


/* ---------- ENREGISTRER ---------- */

.sv3-profile-page .sv3-profile-save{
    min-height:39px;

    margin-top:2px;
    padding:0 18px;

    border:1px solid rgba(178,72,255,.65);
    border-radius:4px;

    background:
        linear-gradient(
            135deg,
            #7934d7,
            #52179e
        );

    color:#fff;

    font-size:9px;
    font-weight:800;

    box-shadow:
        0 5px 20px rgba(95,29,170,.12);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.sv3-profile-page .sv3-profile-save:hover{
    transform:translateY(-1px);

    filter:brightness(1.10);

    box-shadow:
        0 8px 24px rgba(110,35,190,.20);
}


/* ---------- RESPONSIVE ---------- */

@media(max-width:850px){

    .sv3-profile-page .sv3-profile-grid{
        grid-template-columns:1fr;
    }

    .sv3-profile-page .sv3-profile-avatar-card{
        padding:24px 18px;
    }

    .sv3-profile-page .sv3-profile-field-row{
        grid-template-columns:1fr;
        gap:0;
    }
}

@media(max-width:600px){

    .sv3-profile-page .sv3-profile-header{
        padding:18px;
    }

    .sv3-profile-page .sv3-profile-fields{
        padding:17px;
    }

    .sv3-profile-page .sv3-profile-avatar{
        width:100px;
        height:100px;
    }
}


/* =========================================================
   SPECTRAVISION — PREMIER MESSAGE CLIENT
   ========================================================= */

.sv3-messages-empty:has(.sv3-new-message-form){
    min-height:430px;
    padding:30px;
}

.sv3-new-message-form{
    width:min(620px,100%);
    display:grid;
    gap:14px;
    margin-top:18px;
    text-align:left;
}

.sv3-new-message-form label{
    display:grid;
    gap:7px;
    color:#fff;
    font-size:9px;
    font-weight:700;
}

.sv3-new-message-form input,
.sv3-new-message-form textarea{
    width:100%;
    box-sizing:border-box;
    border:1px solid rgba(78,112,150,.50);
    border-radius:7px;
    outline:none;
    color:#fff;
    background:#050b12;
    font:inherit;
}

.sv3-new-message-form input{
    min-height:40px;
    padding:0 12px;
}

.sv3-new-message-form textarea{
    min-height:105px;
    padding:12px;
    resize:vertical;
}

.sv3-new-message-form input:focus,
.sv3-new-message-form textarea:focus{
    border-color:#914ee8;
    box-shadow:0 0 0 2px rgba(145,78,232,.10);
}

.sv3-new-message-form button{
    min-height:40px;
    justify-self:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 18px;
    border:1px solid #914ee8;
    border-radius:6px;
    color:#fff;
    background:linear-gradient(135deg,#7132d2,#481590);
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.sv3-new-message-form button:hover{
    filter:brightness(1.12);
}

.sv3-new-message-form button .dashicons{
    width:16px;
    height:16px;
    font-size:16px;
}

@media(max-width:650px){
    .sv3-messages-empty:has(.sv3-new-message-form){
        padding:22px 15px;
    }
}


/* =========================================================
   SPECTRAVISION — MES DEVIS — PAGE V3
   ========================================================= */
.sv3-quotes-page{
    padding:16px;
    border:1px solid rgba(87,113,139,.32);
    border-radius:10px;
    background:#0b1119;
}
.sv3-quotes-page > h2{display:none}
.sv3-quotes-hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    padding:4px 0 20px;
    border-bottom:1px solid rgba(103,122,143,.22);
}
.sv3-quotes-kicker{
    display:block;
    margin-bottom:8px;
    color:#9b63ff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
}
.sv3-quotes-hero h1{
    margin:0 0 8px;
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:27px;
    font-weight:400;
}
.sv3-quotes-hero p{
    margin:0;
    color:#8494a9;
    font-size:13px;
}
.sv3-quotes-new{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:0 18px;
    border:1px solid rgba(185,87,255,.58);
    border-radius:4px;
    background:linear-gradient(135deg,#7132cf,#b243e3);
    color:#fff;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
}
.sv3-quotes-new:hover{color:#fff;filter:brightness(1.08)}
.sv3-quotes-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:16px 0 18px;
}
.sv3-quotes-stats > div{
    min-height:68px;
    padding:13px 15px;
    border:1px solid rgba(119,76,155,.28);
    border-radius:8px;
    background:#080b12;
}
.sv3-quotes-stats span{
    display:block;
    margin-bottom:4px;
    color:#8290a5;
    font-size:11px;
}
.sv3-quotes-stats strong{
    color:#fff;
    font-size:20px;
    line-height:1;
}
.sv3-quotes-page .sv3-devis-empty{margin-top:0}
.sv3-quotes-page .sv3-appointment{
    margin-top:10px;
    padding:16px;
    border:1px solid rgba(123,78,157,.28);
    border-radius:7px;
    background:#080b12;
}
@media(max-width:800px){
    .sv3-quotes-hero{flex-direction:column}
    .sv3-quotes-new{width:100%}
    .sv3-quotes-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* SPECTRAVISION — MES COMMANDES — HARMONISATION V2 */
.sv3-orders-page{padding:16px;border:1px solid rgba(87,113,139,.32);border-radius:10px;background:#0b1119}
.sv3-orders-header-v2{padding:4px 0 20px;border-bottom:1px solid rgba(103,122,143,.22)}
.sv3-orders-kicker{display:block;margin-bottom:8px;color:#9b63ff;font-size:11px;font-weight:800;letter-spacing:.16em}
.sv3-orders-header-v2 h1{margin:0 0 8px;font-family:Georgia,"Times New Roman",serif;font-size:27px;font-weight:400}
.sv3-orders-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0 14px}
.sv3-orders-stats>div{min-height:68px;padding:13px 15px;border:1px solid rgba(119,76,155,.28);border-radius:8px;background:#080b12}
.sv3-orders-stats span{display:block;margin-bottom:4px;color:#8290a5;font-size:11px}
.sv3-orders-stats strong{color:#fff;font-size:20px;line-height:1}
.sv3-orders-page .sv3-orders-empty{min-height:245px;margin-top:10px}
@media(max-width:800px){.sv3-orders-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =========================================================
   SPECTRAVISION — TABLEAU DE BORD — FINITION COMPACTE V2
   Présentation uniquement : aucune logique métier modifiée.
   ========================================================= */
.sv3-dashboard{
    --sv3-dash-gap:14px;
}
.sv3-dashboard .sv3-hero{
    min-height:0;
    padding:24px 28px;
    margin-bottom:16px;
}
.sv3-dashboard .sv3-hero h1{
    margin:0 0 5px;
    font-size:29px;
    line-height:1.08;
}
.sv3-dashboard .sv3-hero p{
    max-width:650px;
    margin:0;
    line-height:1.45;
}
.sv3-dashboard .sv3-hero-quote{
    max-width:250px;
    margin-left:auto;
}
.sv3-dashboard .sv3-stats{
    gap:var(--sv3-dash-gap);
    margin-bottom:16px;
}
.sv3-dashboard .sv3-stat-card{
    min-height:94px;
    padding:16px;
}
.sv3-dashboard .sv3-dashboard-grid,
.sv3-dashboard .sv3-dashboard-row{
    gap:var(--sv3-dash-gap);
    margin-bottom:16px;
}
.sv3-dashboard .sv3-panel{
    border-radius:8px;
}
.sv3-dashboard .sv3-panel > h2,
.sv3-dashboard .sv3-panel > h3{
    margin-bottom:10px;
    padding-bottom:9px;
}
.sv3-dashboard .sv3-payments-card{
    min-height:0;
}
.sv3-dashboard .sv3-quick-links{
    gap:12px;
    margin-top:14px;
}
.sv3-dashboard .sv3-quick-link{
    min-height:70px;
    padding:14px 18px;
}
.sv3-dashboard .sv3-quick-link p{
    margin-top:3px;
}
@media (max-width:900px){
    .sv3-dashboard .sv3-hero{
        padding:20px;
    }
    .sv3-dashboard .sv3-hero-quote{
        max-width:none;
        margin:12px 0 0;
    }
}

/* =========================================================
   SPECTRAVISION — DASHBOARD V2.1 — ÉQUILIBRAGE CENTRAL
   Paiements à gauche, informations utiles regroupées à droite.
   ========================================================= */
@media (min-width: 901px){
    .sv3-dashboard .sv3-main-grid{
        align-items:stretch;
    }

    .sv3-dashboard .sv3-secondary-grid{
        width:calc(50% - 7px);
        margin-left:calc(50% + 7px);
        margin-top:-316px;
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        position:relative;
        z-index:2;
    }

    .sv3-dashboard .sv3-secondary-grid .sv3-dash-mini-card{
        min-height:96px;
        margin:0;
        padding:13px 16px;
    }

    .sv3-dashboard .sv3-secondary-grid .sv3-dash-messages{
        min-height:154px;
    }

    .sv3-dashboard .sv3-secondary-grid .sv3-dash-files,
    .sv3-dashboard .sv3-secondary-grid .sv3-dash-appointments{
        min-height:96px;
    }

    .sv3-dashboard .sv3-dashboard-actions-bottom{
        clear:both;
        margin-top:16px;
    }
}

/* =========================================================
   SPECTRAVISION — DASHBOARD V2.2 — RESPONSIVE STABLE
   Annule le positionnement artificiel de V2.1.
   ========================================================= */
.sv3-dashboard .sv3-secondary-grid{
    width:auto !important;
    margin-left:0 !important;
    margin-top:0 !important;
    position:static !important;
    z-index:auto !important;
}

@media (min-width:1200px){
    .sv3-dashboard .sv3-secondary-grid{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:14px !important;
    }
}

@media (min-width:701px) and (max-width:1199px){
    .sv3-dashboard .sv3-secondary-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:14px !important;
    }
    .sv3-dashboard .sv3-secondary-grid > :last-child{
        grid-column:1 / -1;
    }
}

@media (max-width:700px){
    .sv3-dashboard .sv3-secondary-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
    }
}

.sv3-dashboard .sv3-secondary-grid .sv3-dash-mini-card{
    min-height:0 !important;
    margin:0 !important;
}

.sv3-dashboard .sv3-dashboard-actions-bottom{
    margin-top:16px !important;
}