/* =========================================================
   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%
        ),
        url('../images/spectravision-manoir-header.webp');

    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%
        ),
        url('../images/spectravision-manoir-sidebar.webp');

    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%
        ),
        url('../images/spectravision-manoir-header.webp');

    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%
        ),
        url('../images/spectravision-manoir-sidebar.webp');

    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%
        ),
        url('../images/spectravision-manoir-header.webp');

    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%
        ),
        url('../images/spectravision-manoir-sidebar.webp')
        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%;
    }
}