:root {
    --jag-primary: #2563eb;
    --jag-primary-dark: #1d4ed8;
    --jag-bg: #f4f7fb;
    --jag-surface: #ffffff;
    --jag-border: #dbe3ef;
    --jag-text: #172033;
    --jag-muted: #64748b;
    --jag-danger: #dc2626;
    --jag-success: #15803d;
    --jag-warning: #b45309;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--jag-text);
    background: var(--jag-bg);
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

[hidden] {
    display: none !important;
}

.jag-account-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
}

.jag-account-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px 18px;
    background: #111827;
    color: #fff;
    z-index: 30;
}

.jag-account-brand a,
.jag-account-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    font-weight: 800;
}

.jag-account-brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--jag-primary);
    color: #fff;
    font-size: 19px;
}

.jag-account-nav {
    margin-top: 34px;
    display: grid;
    gap: 7px;
}

.jag-account-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 13px;
    border-radius: 10px;
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 650;
}

.jag-account-nav a:hover,
.jag-account-nav a.is-active {
    background: rgba(255,255,255,.09);
    color: #fff;
}

.jag-account-nav .jag-account-nav-primary {
    margin-top: 12px;
    background: var(--jag-primary);
    color: #fff;
    justify-content: center;
}

.jag-account-main {
    min-width: 0;
}

.jag-account-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    padding: 12px 28px;
    border-bottom: 1px solid var(--jag-border);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
}

.jag-account-user {
    display: flex;
    align-items: center;
    gap: 18px;
}

.jag-account-user > div {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.jag-account-user span {
    color: var(--jag-muted);
    font-size: 12px;
}

.jag-account-link-button {
    padding: 8px 11px;
    border: 1px solid var(--jag-border);
    border-radius: 8px;
    background: #fff;
    color: var(--jag-text);
    cursor: pointer;
}

.jag-account-menu-button {
    display: none;
    margin-right: auto;
    border: 0;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
}

.jag-account-content {
    padding: 30px;
}

.jag-account-page {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
}

.jag-account-page-narrow {
    max-width: 850px;
}

.jag-account-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.jag-account-page-heading h1 {
    margin: 4px 0 7px;
    font-size: clamp(26px, 4vw, 34px);
    line-height: 1.1;
}

.jag-account-page-heading p,
.jag-account-card-header p,
.jag-account-empty p {
    margin: 0;
    color: var(--jag-muted);
}

.jag-account-eyebrow {
    color: var(--jag-primary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.jag-account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 15px;
    border-radius: 9px;
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 750;
    cursor: pointer;
}

.jag-account-btn-primary {
    background: var(--jag-primary);
    border-color: var(--jag-primary);
    color: #fff;
}

.jag-account-btn-primary:hover {
    background: var(--jag-primary-dark);
}

.jag-account-btn-secondary {
    background: #fff;
    border-color: var(--jag-border);
    color: var(--jag-text);
}

.jag-account-btn-danger {
    background: var(--jag-danger);
    border-color: var(--jag-danger);
    color: #fff;
}

.jag-account-btn-full {
    width: 100%;
}

.jag-account-card {
    overflow: hidden;
    background: var(--jag-surface);
    border: 1px solid var(--jag-border);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(15,23,42,.04);
}

.jag-account-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--jag-border);
}

.jag-account-card-header h2 {
    margin: 0 0 4px;
    font-size: 18px;
}

.jag-account-card-header a {
    color: var(--jag-primary);
    font-weight: 700;
    text-decoration: none;
}

.jag-account-card-body {
    padding: 22px;
}

.jag-account-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.jag-account-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 19px;
    background: #fff;
    border: 1px solid var(--jag-border);
    border-radius: 14px;
}

.jag-account-stat strong {
    font-size: 27px;
}

.jag-account-stat span {
    color: var(--jag-muted);
    font-size: 13px;
}

.jag-account-ad-list {
    display: grid;
}

.jag-account-ad-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--jag-border);
    text-decoration: none;
}

.jag-account-ad-row:last-child {
    border-bottom: 0;
}

.jag-account-ad-row:hover {
    background: #f8fafc;
}

.jag-account-ad-thumb {
    width: 82px;
    height: 62px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background: #eef2f7;
    color: var(--jag-muted);
    font-size: 12px;
}

.jag-account-ad-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jag-account-ad-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.jag-account-ad-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jag-account-ad-info span {
    color: var(--jag-muted);
    font-size: 13px;
}

.jag-account-status {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 750;
}

.jag-account-status.is-published {
    background: #ecfdf5;
    color: #166534;
}

.jag-account-status.is-changes_requested {
    background: #fff7ed;
    color: #9a3412;
}

.jag-account-empty {
    padding: 48px 24px;
    text-align: center;
}

.jag-account-empty strong {
    display: block;
    margin-bottom: 8px;
    font-size: 19px;
}

.jag-account-empty .jag-account-btn {
    margin-top: 18px;
}

.jag-account-alert {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 11px;
    border: 1px solid;
}

.jag-account-alert.is-success {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #166534;
}

.jag-account-alert.is-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.jag-account-alert.is-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.jag-account-form {
    display: grid;
    gap: 18px;
}

.jag-account-form-padded {
    padding: 24px;
}

.jag-account-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.jag-account-field label {
    font-size: 14px;
    font-weight: 750;
}

.jag-account-field label small {
    font-weight: 500;
    color: var(--jag-muted);
}

.jag-account-field input,
.jag-account-field textarea,
.jag-account-field select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: var(--jag-text);
}

.jag-account-field textarea {
    resize: vertical;
}

.jag-account-field input:focus,
.jag-account-field textarea:focus,
.jag-account-field select:focus {
    outline: 3px solid rgba(37,99,235,.12);
    border-color: var(--jag-primary);
}

.jag-account-field > span,
.jag-account-photo-upload > span,
.jag-account-photo-limit > span {
    color: var(--jag-muted);
    font-size: 12px;
    line-height: 1.45;
}

.jag-account-grid-2,
.jag-account-grid-3 {
    display: grid;
    gap: 16px;
}

.jag-account-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.jag-account-field-help {
    min-height: 18px;
}

.jag-account-field-help-empty {
    visibility: hidden;
}

.jag-account-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jag-account-field-span-2 {
    grid-column: span 2;
}

.jag-account-check {
    display: flex !important;
    align-items: center;
    flex-direction: row !important;
    gap: 8px;
    font-weight: 500 !important;
}

.jag-account-check input {
    width: auto;
    min-height: auto;
}

.jag-account-choice-list {
    display: grid;
    gap: 8px;
}

.jag-account-required {
    color: var(--jag-danger);
}

.jag-account-input-unit {
    display: flex;
    align-items: center;
    gap: 9px;
}

.jag-account-input-unit > span {
    color: var(--jag-muted);
    white-space: nowrap;
}

.jag-account-form-actions {
    display: flex;
    justify-content: flex-end;
}

.jag-account-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
}

.jag-account-editor-main {
    display: grid;
    gap: 20px;
}

.jag-account-editor-side {
    position: sticky;
    top: 94px;
}

.jag-account-form-section {
    overflow: visible;
}

.jag-account-dynamic-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.jag-account-photo-heading > strong {
    padding: 8px 10px;
    border-radius: 9px;
    background: #eff6ff;
    color: #1d4ed8;
}

.jag-account-photo-capacity {
    margin-bottom: 16px;
}

.jag-account-photo-progress {
    height: 6px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.jag-account-photo-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--jag-primary);
}

.jag-account-photo-empty,
.jag-account-photo-limit {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px;
    border-radius: 11px;
    border: 1px dashed #cbd5e1;
    text-align: center;
}

.jag-account-photo-limit {
    border-style: solid;
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.jag-account-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.jag-account-photo-item {
    overflow: hidden;
    border: 1px solid var(--jag-border);
    border-radius: 11px;
    background: #fff;
}

.jag-account-photo-item.is-cover {
    border-color: var(--jag-primary);
    box-shadow: 0 0 0 1px var(--jag-primary);
}

.jag-account-photo-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eef2f7;
}

.jag-account-photo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jag-account-photo-image > span {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(15,23,42,.86);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.jag-account-photo-body {
    padding: 10px;
}

.jag-account-photo-body small {
    display: block;
    margin-bottom: 8px;
    color: var(--jag-muted);
}

.jag-account-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.jag-account-photo-actions form {
    margin: 0;
}

.jag-account-photo-actions button {
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid var(--jag-border);
    border-radius: 7px;
    background: #fff;
    color: var(--jag-text);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.jag-account-photo-actions button.is-danger {
    color: var(--jag-danger);
    border-color: #fecaca;
}

.jag-account-photo-upload {
    display: grid;
    gap: 9px;
    margin-top: 16px;
    padding: 16px;
    border-radius: 11px;
    background: #f8fafc;
    border: 1px solid var(--jag-border);
}

.jag-account-photo-upload form {
    display: grid;
    gap: 9px;
}

.jag-account-photo-upload input[type="file"] {
    width: 100%;
    padding: 9px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
}

.jag-account-editor-footer {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 22px;
    padding: 14px 18px;
    border: 1px solid var(--jag-border);
    border-radius: 14px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 -8px 30px rgba(15,23,42,.06);
}

.jag-account-editor-footer > span {
    color: var(--jag-muted);
    font-size: 13px;
}

.jag-account-editor-footer > div {
    display: flex;
    gap: 9px;
}

.jag-account-toast-region {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 100;
    width: min(390px, calc(100vw - 36px));
    display: grid;
    gap: 10px;
}

.jag-account-toast {
    padding: 14px 42px 14px 16px;
    border-left: 4px solid var(--jag-primary);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(15,23,42,.18);
    position: relative;
}

.jag-account-toast.is-success { border-left-color: var(--jag-success); }
.jag-account-toast.is-danger { border-left-color: var(--jag-danger); }
.jag-account-toast.is-info { border-left-color: var(--jag-primary); }
.jag-account-toast strong { display: block; margin-bottom: 4px; }
.jag-account-toast p { margin: 0; color: var(--jag-muted); font-size: 13px; line-height: 1.45; }
.jag-account-toast button {
    position: absolute;
    top: 9px;
    right: 10px;
    border: 0;
    background: transparent;
    color: var(--jag-muted);
    font-size: 18px;
    cursor: pointer;
}

.jag-account-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    place-items: center;
    padding: 20px;
}

.jag-account-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.56);
}

.jag-account-modal-panel {
    position: relative;
    z-index: 1;
    width: min(470px, 100%);
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15,23,42,.28);
}

.jag-account-modal-panel h2 { margin: 0 0 9px; }
.jag-account-modal-panel p { margin: 0; color: var(--jag-muted); line-height: 1.55; }
.jag-account-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
}

.jag-account-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 22px;
}

.jag-account-overlay {
    display: none;
}

.jag-account-login-body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.16), transparent 38%),
        var(--jag-bg);
}

.jag-account-login-shell {
    width: min(440px, 100%);
}

.jag-account-login-card {
    padding: 28px;
    border: 1px solid var(--jag-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(15,23,42,.10);
}

.jag-account-login-heading {
    margin: 30px 0 22px;
}

.jag-account-login-heading > span {
    color: var(--jag-primary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.jag-account-login-heading h1 {
    margin: 5px 0 7px;
}

.jag-account-login-heading p,
.jag-account-login-note {
    color: var(--jag-muted);
}

.jag-account-login-note {
    margin: 18px 0 0;
    font-size: 12px;
    text-align: center;
}

.jag-account-photo-item form,
.jag-account-photo-upload form {
    margin: 0;
}

[data-client-photo-manager].is-busy {
    opacity: .72;
    pointer-events: none;
}

@media (max-width: 1000px) {
    .jag-account-editor-layout {
        grid-template-columns: 1fr;
    }

    .jag-account-editor-side {
        position: static;
    }
}

@media (max-width: 820px) {
    .jag-account-shell {
        grid-template-columns: 1fr;
    }

    .jag-account-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(290px, 86vw);
        transform: translateX(-105%);
        transition: transform .2s ease;
    }

    .jag-account-sidebar.is-open {
        transform: translateX(0);
    }

    .jag-account-overlay.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 25;
        background: rgba(15,23,42,.48);
    }

    .jag-account-menu-button {
        display: inline-flex;
    }

    .jag-account-content {
        padding: 22px 16px;
    }

    .jag-account-topbar {
        padding-inline: 16px;
    }

    .jag-account-user > div {
        display: none;
    }

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

    .jag-account-grid-2,
    .jag-account-grid-3,
    .jag-account-dynamic-fields {
        grid-template-columns: 1fr;
    }

    .jag-account-field-span-2 {
        grid-column: auto;
    }

    .jag-account-page-heading,
    .jag-account-editor-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .jag-account-editor-footer > div {
        display: grid;
    }

    .jag-account-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .jag-account-stats,
    .jag-account-photo-grid {
        grid-template-columns: 1fr;
    }

    .jag-account-ad-row {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .jag-account-ad-thumb {
        width: 68px;
        height: 54px;
    }

    .jag-account-status {
        grid-column: 2;
        justify-self: start;
    }
}

/* =========================================================
   ESPACE CLIENT — COMPOSANTS PARTAGÉS
========================================================= */

.jag-account-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.jag-account-summary-thumb {
    width: 120px;
    height: 90px;
    display: block;
    object-fit: cover;
    border: 1px solid var(--jag-border);
    border-radius: 11px;
    background: #eef2f7;
}

.jag-account-summary-content {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.jag-account-summary-content strong {
    font-size: 17px;
}

.jag-account-summary-meta {
    color: var(--jag-muted);
    font-size: 13px;
}

.jag-account-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.jag-account-card-body > .jag-account-alert:last-child {
    margin-bottom: 0;
}

@media (max-width: 560px) {
    .jag-account-actions {
        display: grid;
    }

    .jag-account-actions > * {
        width: 100%;
    }

    .jag-account-summary-thumb {
        width: 100px;
        height: 75px;
    }
}

.jag-account-status.is-draft {
    background: #eef2f7;
    color: #475569;
}

.jag-account-status.is-pending_review,
.jag-account-status.is-scheduled {
    background: #fff7ed;
    color: #9a3412;
}

.jag-account-status.is-rejected,
.jag-account-status.is-hidden {
    background: #fef2f2;
    color: #991b1b;
}

.jag-account-status.is-expired {
    background: #f1f5f9;
    color: #64748b;
}

.jag-account-status.is-sold {
    background: #ecfdf5;
    color: #166534;
}

/* =========================================================
   MES ANNONCES — ACTIONS PUBLIQUES
========================================================= */

.jag-account-ad-row-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    border-bottom: 1px solid var(--jag-border);
}

.jag-account-ad-row-wrap:last-child {
    border-bottom: 0;
}

.jag-account-ad-row-wrap .jag-account-ad-row {
    border-bottom: 0;
}

.jag-account-ad-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 12px 0;
}

.jag-account-ad-actions .jag-account-btn {
    white-space: nowrap;
}

/* =========================================================
   LIVE CHAT
========================================================= */

.jag-chat-list {
    display: grid;
}

.jag-chat-list-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 15px 18px;
    border-bottom: 1px solid var(--jag-border);
    color: inherit;
    text-decoration: none;
}

.jag-chat-list-item:last-child {
    border-bottom: 0;
}

.jag-chat-list-item:hover {
    background: #f8fafc;
}

.jag-chat-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e9f3d9;
    color: #496c12;
    font-size: 18px;
    font-weight: 800;
}

.jag-chat-list-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.jag-chat-list-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.jag-chat-ad-title,
.jag-chat-list-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jag-chat-ad-title {
    color: #4b5563;
    font-size: 13px;
}

.jag-chat-list-copy small {
    color: var(--jag-muted);
}

.jag-chat-unread {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    padding: 0 7px;
    border-radius: 999px;
    background: #8db243;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.jag-account-page-chat {
    max-width: 980px;
}

.jag-chat-card {
    overflow: hidden;
}

.jag-chat-privacy-note {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 16px;
    background: #f5f8ef;
    border-bottom: 1px solid #dfe8cf;
    color: #48621d;
    font-size: 12px;
}

.jag-chat-messages {
    height: min(58vh, 620px);
    min-height: 360px;
    overflow-y: auto;
    padding: 20px;
    background: #f5f6f3;
}

.jag-chat-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--jag-muted);
    text-align: center;
}

.jag-chat-message {
    display: flex;
    margin-bottom: 10px;
}

.jag-chat-message.is-mine {
    justify-content: flex-end;
}

.jag-chat-message.is-theirs {
    justify-content: flex-start;
}

.jag-chat-bubble {
    max-width: min(72%, 650px);
    padding: 10px 12px 8px;
    border: 1px solid #d9dee5;
    border-radius: 14px 14px 14px 4px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .05);
}

.jag-chat-message.is-mine .jag-chat-bubble {
    border-color: #8db243;
    border-radius: 14px 14px 4px 14px;
    background: #8db243;
    color: #fff;
}

.jag-chat-bubble p {
    margin: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.jag-chat-bubble small {
    display: block;
    margin-top: 5px;
    opacity: .72;
    font-size: 10px;
}

.jag-chat-composer {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--jag-border);
    background: #fff;
}

.jag-chat-composer-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 750;
}

.jag-chat-composer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.jag-chat-composer textarea {
    width: 100%;
    min-height: 54px;
    max-height: 180px;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
}

.jag-chat-composer-help {
    display: block;
    margin-top: 6px;
    color: var(--jag-muted);
}

@media (max-width: 720px) {
    .jag-account-ad-row-wrap {
        grid-template-columns: 1fr;
    }

    .jag-account-ad-actions {
        padding: 0 14px 14px;
        justify-content: flex-end;
    }

    .jag-chat-bubble {
        max-width: 88%;
    }

    .jag-chat-composer-row {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MES ANNONCES — ACTION PUBLIQUE COMPACTE
========================================================= */

.jag-account-ad-row-wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.jag-account-ad-actions {
    padding: 0 18px 0 4px;
    align-self: center;
}

.jag-account-ad-actions .jag-account-btn {
    min-width: 72px;
    justify-content: center;
}

@media (max-width: 720px) {
    .jag-account-ad-actions {
        padding: 0 14px 14px;
        justify-content: flex-start;
    }
}


/* =========================================================
   TABLEAU DE BORD — MESSAGES & STATUTS
========================================================= */

.jag-account-nav-with-badge {
    justify-content: space-between;
    gap: 10px;
}

.jag-account-nav-badge {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    padding: 0 7px;
    border-radius: 999px;
    background: #8db243;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.jag-account-stats-dashboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jag-account-stat-link {
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.jag-account-stat-link:hover {
    border-color: #8db243;
    box-shadow: 0 7px 20px rgba(63, 94, 10, .09);
    transform: translateY(-1px);
}

.jag-account-stat-link.has-unread {
    border-color: #8db243;
    background: #f7faef;
}

.jag-account-message-alert {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid #cfe0ad;
    border-radius: 14px;
    background: #f5f9ec;
    color: #30470a;
    text-decoration: none;
}

.jag-account-message-alert:hover {
    border-color: #8db243;
}

.jag-account-message-alert-dot {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #8db243;
    box-shadow: 0 0 0 5px rgba(141, 178, 67, .16);
}

.jag-account-message-alert > span:last-child {
    display: grid;
    gap: 2px;
}

.jag-account-message-alert small {
    color: #60743d;
}

.jag-account-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr);
    gap: 20px;
    align-items: start;
}

.jag-account-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.jag-account-status.is-success {
    background: #e8f7ed;
    color: #137a39;
}

.jag-account-status.is-warning {
    background: #fff3d8;
    color: #9a5b00;
}

.jag-account-status.is-danger {
    background: #fde8e8;
    color: #b91c1c;
}

.jag-account-status.is-info {
    background: #e8f1ff;
    color: #1d4ed8;
}

.jag-account-message-list {
    display: grid;
}

.jag-account-message-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--jag-border);
    color: inherit;
    text-decoration: none;
}

.jag-account-message-row:last-child {
    border-bottom: 0;
}

.jag-account-message-row:hover {
    background: #f8fafc;
}

.jag-account-message-row.is-unread {
    background: #f7faef;
}

.jag-account-message-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #e9f3d9;
    color: #496c12;
    font-weight: 800;
}

.jag-account-message-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.jag-account-message-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.jag-account-message-topline b {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: #8db243;
    color: #fff;
    font-size: 10px;
}

.jag-account-message-copy > small,
.jag-account-message-copy > time {
    color: var(--jag-muted);
    font-size: 11px;
}

.jag-account-message-copy > span:not(.jag-account-message-topline) {
    overflow: hidden;
    color: #475569;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jag-account-empty-compact {
    padding: 32px 20px;
}

@media (max-width: 1050px) {
    .jag-account-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .jag-account-stats-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .jag-account-stats-dashboard {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== 
   PROFIL CLIENT
   ========================================================================== */

.jag-account-profile-page {
    max-width: 1180px;
    margin: 0 auto;
}

.jag-account-profile-form {
    display: grid;
    gap: 18px;
}

.jag-account-profile-card {
    overflow: hidden;
}

.jag-account-profile-card .jag-account-card-header {
    align-items: flex-start;
}

.jag-account-profile-type {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 800;
}

.jag-account-profile-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--jag-border);
    border-top: 1px solid var(--jag-border);
}

.jag-account-profile-readonly-grid > div {
    display: grid;
    gap: 5px;
    padding: 18px 20px;
    background: #fff;
}

.jag-account-profile-readonly-grid span {
    color: var(--jag-muted);
    font-size: 12px;
}

.jag-account-profile-readonly-grid strong {
    overflow-wrap: anywhere;
}

.jag-account-form-grid {
    display: grid;
    gap: 16px;
    padding: 22px;
}

.jag-account-form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jag-account-field > small {
    color: var(--jag-muted);
    font-size: 12px;
    line-height: 1.4;
}

.jag-account-field .jag-account-field-error,
.jag-account-field-error {
    color: var(--jag-danger);
    font-weight: 700;
}

.jag-account-profile-public-choice {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.jag-account-profile-check {
    padding: 14px 16px;
    border: 1px solid var(--jag-border);
    border-radius: 10px;
    background: #f8fafc;
}

.jag-account-profile-privacy-note {
    margin: 0 22px 22px;
    padding: 14px 16px;
    border: 1px solid #dbe8c8;
    border-radius: 10px;
    background: #f7faef;
    color: #496c12;
}

.jag-account-profile-privacy-note strong {
    display: block;
    margin-bottom: 4px;
}

.jag-account-profile-privacy-note p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.jag-account-profile-actions {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 12px;
}

@media (max-width: 760px) {
    .jag-account-profile-readonly-grid,
    .jag-account-form-grid-2 {
        grid-template-columns: 1fr;
    }

    .jag-account-field-span-2 {
        grid-column: span 1;
    }

    .jag-account-profile-actions .jag-account-btn {
        width: 100%;
    }
}


/* ==========================================================================
   JAG V2 — REFONTE VISUELLE ESPACE CLIENT 2026
   ========================================================================== */

:root {
    --jag-primary: #8db243;
    --jag-primary-dark: #6f9130;
    --jag-primary-deep: #3f5e0a;
    --jag-primary-soft: #f2f7e8;

    --jag-bg: #f3f5f1;
    --jag-surface: #ffffff;
    --jag-surface-soft: #f8faf7;

    --jag-border: #dde4d8;
    --jag-border-strong: #ccd7c4;

    --jag-text: #1e2a22;
    --jag-muted: #6b776d;

    --jag-danger: #c93636;
    --jag-success: #477d19;
    --jag-warning: #a86712;

    --jag-radius-sm: 9px;
    --jag-radius: 14px;
    --jag-radius-lg: 20px;

    --jag-shadow-sm: 0 1px 2px rgba(30, 42, 34, .04);
    --jag-shadow: 0 12px 35px rgba(36, 55, 26, .07);
    --jag-shadow-hover: 0 16px 40px rgba(36, 55, 26, .11);

    --jag-sidebar-width: 276px;
}

html {
    background: var(--jag-bg);
}

body.jag-account-body {
    background:
        radial-gradient(
            circle at top right,
            rgba(141, 178, 67, .07),
            transparent 28rem
        ),
        var(--jag-bg);
    color: var(--jag-text);
}

.jag-account-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.jag-account-shell {
    grid-template-columns:
        var(--jag-sidebar-width)
        minmax(0, 1fr);
}

.jag-account-sidebar {
    width: var(--jag-sidebar-width);
    padding: 0 16px 18px;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(
            180deg,
            #24320f 0%,
            #18220b 52%,
            #11190a 100%
        );
    border-right: 1px solid rgba(255,255,255,.06);
    box-shadow: 12px 0 35px rgba(17, 25, 10, .08);
}

.jag-account-brand {
    min-height: 84px;
    display: flex;
    align-items: center;
    padding: 14px 6px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.jag-account-brand a {
    width: 100%;
    min-width: 0;
}

.jag-account-brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            #9dc653,
            #789e34
        );
    box-shadow:
        0 8px 22px rgba(0,0,0,.2),
        inset 0 1px 0 rgba(255,255,255,.25);
    font-size: 21px;
}

.jag-account-brand-copy {
    min-width: 0;
    display: grid;
    line-height: 1.2;
}

.jag-account-brand-copy strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jag-account-brand-copy small {
    margin-top: 3px;
    color: #aebd9b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .025em;
}

.jag-account-nav-label {
    margin: 22px 12px 7px;
    color: #819170;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.jag-account-nav {
    margin-top: 0;
    gap: 5px;
}

.jag-account-nav a {
    position: relative;
    min-height: 46px;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #c8d3bb;
    font-size: 13px;
    font-weight: 700;
    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

.jag-account-nav a:hover {
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.05);
    color: #fff;
    transform: translateX(2px);
}

.jag-account-nav a.is-active {
    background:
        linear-gradient(
            90deg,
            rgba(157,198,83,.19),
            rgba(157,198,83,.08)
        );
    border-color: rgba(157,198,83,.24);
    color: #fff;
}

.jag-account-nav a.is-active::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -16px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #9dc653;
}

.jag-account-nav-primary {
    margin-top: 14px !important;
    justify-content: flex-start !important;
    background:
        linear-gradient(
            135deg,
            #8db243,
            #73962f
        ) !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

.jag-account-nav-primary:hover {
    transform: translateY(-1px) !important;
    background:
        linear-gradient(
            135deg,
            #98bd4e,
            #789e34
        ) !important;
}

.jag-account-nav-badge {
    margin-left: auto;
    min-width: 23px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    border: 2px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: #d64c4c;
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

.jag-account-sidebar-footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.jag-account-sidebar-footer a {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    color: #aebd9b;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.jag-account-sidebar-footer a:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

.jag-account-main {
    background: transparent;
}

.jag-account-topbar {
    min-height: 74px;
    justify-content: space-between;
    padding: 10px 28px;
    border-bottom-color: rgba(204, 215, 196, .82);
    background: rgba(255,255,255,.93);
    box-shadow: var(--jag-shadow-sm);
}

.jag-account-topbar-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.jag-account-topbar-context {
    min-width: 0;
    display: grid;
    line-height: 1.2;
}

.jag-account-topbar-context small {
    color: var(--jag-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.jag-account-topbar-context strong {
    margin-top: 3px;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jag-account-user {
    gap: 10px;
}

.jag-account-user-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border: 1px solid #dce7cd;
    border-radius: 12px;
    background: #edf5e2;
    color: var(--jag-primary-deep);
    font-weight: 850;
}

.jag-account-user-copy {
    min-width: 0;
    display: grid;
    line-height: 1.2;
    text-align: left;
}

.jag-account-user-copy strong {
    font-size: 12px;
}

.jag-account-user-copy span {
    max-width: 230px;
    margin-top: 3px;
    overflow: hidden;
    color: var(--jag-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jag-account-link-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-color: var(--jag-border);
    border-radius: 10px;
    background: #fff;
    font-size: 11px;
    font-weight: 750;
}

.jag-account-link-button:hover {
    border-color: #c8d8b7;
    background: #f8faf5;
    color: var(--jag-primary-deep);
}

.jag-account-link-button .jag-account-icon {
    width: 17px;
    height: 17px;
}

.jag-account-menu-button {
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--jag-border);
    border-radius: 10px;
    background: #fff;
}

.jag-account-content {
    padding: 30px 34px 48px;
}

.jag-account-page {
    max-width: 1380px;
}

.jag-account-page-narrow {
    max-width: 920px;
}

.jag-account-page-heading {
    align-items: center;
    margin-bottom: 22px;
    padding: 2px 2px 0;
}

.jag-account-page-heading h1 {
    margin: 6px 0 8px;
    color: #172018;
    font-size: clamp(27px, 3.5vw, 38px);
    letter-spacing: -.035em;
}

.jag-account-page-heading p {
    max-width: 760px;
    line-height: 1.6;
}

.jag-account-eyebrow {
    color: #67892a;
    font-size: 10px;
    letter-spacing: .11em;
}

.jag-account-btn {
    min-height: 42px;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 11px;
    font-size: 12px;
    box-shadow: var(--jag-shadow-sm);
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease,
        background .15s ease;
}

.jag-account-btn:hover {
    transform: translateY(-1px);
}

.jag-account-btn-primary {
    background:
        linear-gradient(
            135deg,
            #8db243,
            #75982f
        );
    border-color: #75982f;
}

.jag-account-btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            #7fa536,
            #648526
        );
    box-shadow: 0 8px 18px rgba(78, 112, 25, .16);
}

.jag-account-btn-secondary {
    border-color: var(--jag-border);
    background: #fff;
}

.jag-account-card {
    border-color: var(--jag-border);
    border-radius: var(--jag-radius-lg);
    box-shadow: var(--jag-shadow);
}

.jag-account-card-header {
    min-height: 72px;
    padding: 18px 22px;
    background:
        linear-gradient(
            180deg,
            #fff,
            #fbfcfa
        );
}

.jag-account-card-header h2 {
    color: #253125;
    font-size: 16px;
    letter-spacing: -.01em;
}

.jag-account-card-header p {
    font-size: 12px;
    line-height: 1.5;
}

.jag-account-card-body {
    padding: 22px;
}

.jag-account-stats {
    gap: 14px;
}

.jag-account-stat {
    position: relative;
    min-height: 114px;
    justify-content: center;
    padding: 19px 20px;
    overflow: hidden;
    border-color: var(--jag-border);
    border-radius: 16px;
    box-shadow: var(--jag-shadow-sm);
}

.jag-account-stat::after {
    content: "";
    position: absolute;
    width: 68px;
    height: 68px;
    right: -24px;
    bottom: -28px;
    border-radius: 50%;
    background: rgba(141,178,67,.08);
}

.jag-account-stat strong {
    position: relative;
    z-index: 1;
    color: #2b3b22;
    font-size: 31px;
    letter-spacing: -.045em;
}

.jag-account-stat span {
    position: relative;
    z-index: 1;
    font-weight: 650;
}

.jag-account-stat-link {
    color: inherit;
}

.jag-account-stat-link:hover {
    border-color: #a9c47c;
    box-shadow: var(--jag-shadow-hover);
}

.jag-account-message-alert {
    box-shadow: var(--jag-shadow-sm);
}

.jag-account-dashboard-grid {
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(320px, .85fr);
    gap: 18px;
}

.jag-account-ad-row,
.jag-account-message-row {
    transition:
        background .15s ease,
        transform .15s ease;
}

.jag-account-ad-row:hover,
.jag-account-message-row:hover {
    background: #f7f9f5;
}

.jag-account-ad-row:hover {
    transform: translateX(2px);
}

.jag-account-ad-thumb {
    overflow: hidden;
    border: 1px solid var(--jag-border);
    border-radius: 10px;
    background: #f3f5f1;
}

.jag-account-ad-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.jag-account-status {
    border: 1px solid transparent;
    font-size: 10px;
    letter-spacing: .01em;
}

.jag-account-status.is-success {
    border-color: #cfe4bd;
}

.jag-account-status.is-warning {
    border-color: #f0d6ab;
}

.jag-account-status.is-danger {
    border-color: #efc4c4;
}

.jag-account-status.is-info {
    border-color: #cbd9ef;
}

.jag-account-empty {
    padding: 48px 26px;
}

/* Formulaires */

.jag-account-field {
    display: grid;
    gap: 7px;
}

.jag-account-field label {
    color: #314034;
    font-size: 12px;
    font-weight: 760;
}

.jag-account-field input,
.jag-account-field select,
.jag-account-field textarea,
.jag-account-input,
.jag-account-select,
.jag-account-textarea {
    min-height: 43px;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--jag-border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--jag-text);
    outline: none;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.jag-account-field textarea,
.jag-account-textarea {
    min-height: 124px;
    resize: vertical;
}

.jag-account-field input:focus,
.jag-account-field select:focus,
.jag-account-field textarea:focus,
.jag-account-input:focus,
.jag-account-select:focus,
.jag-account-textarea:focus {
    border-color: #92b854;
    box-shadow: 0 0 0 4px rgba(141,178,67,.13);
}

.jag-account-profile-form {
    gap: 16px;
}

.jag-account-profile-card {
    border-radius: 18px;
}

.jag-account-profile-type {
    border: 1px solid #d7e5c4;
    background: #f1f7e8;
    color: #50701b;
}

.jag-account-profile-readonly-grid {
    background: var(--jag-border);
}

.jag-account-profile-readonly-grid > div {
    min-height: 78px;
    align-content: center;
    background: #fff;
}

.jag-account-profile-readonly-grid span {
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.jag-account-profile-readonly-grid strong {
    color: #253125;
    font-size: 13px;
}

.jag-account-form-grid {
    gap: 17px 18px;
}

.jag-account-profile-check {
    border-color: var(--jag-border);
    background: #f8faf6;
}

.jag-account-profile-privacy-note {
    border-color: #d7e5c4;
    background: #f2f7e9;
    color: #496421;
}

.jag-account-alert {
    border-radius: 13px;
    box-shadow: var(--jag-shadow-sm);
}

/* Tableaux et blocs métier déjà existants */

.jag-account-table-wrapper {
    border: 1px solid var(--jag-border);
    border-radius: 14px;
    background: #fff;
    overflow-x: auto;
}

.jag-account-table {
    width: 100%;
    border-collapse: collapse;
}

.jag-account-table th {
    background: #f7f9f5;
    color: var(--jag-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.jag-account-table th,
.jag-account-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--jag-border);
    text-align: left;
}

/* Responsive */

@media (max-width: 1100px) {
    .jag-account-content {
        padding-left: 24px;
        padding-right: 24px;
    }

    .jag-account-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .jag-account-shell {
        display: block;
    }

    .jag-account-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(310px, 88vw);
        transform: translateX(-102%);
        transition: transform .2s ease;
    }

    .jag-account-sidebar.is-open {
        transform: translateX(0);
    }

    .jag-account-menu-button {
        display: grid;
    }

    .jag-account-content {
        padding: 22px 18px 40px;
    }

    .jag-account-topbar {
        padding: 9px 16px;
    }
}

@media (max-width: 700px) {
    .jag-account-topbar-context small,
    .jag-account-user-copy,
    .jag-account-link-button span {
        display: none;
    }

    .jag-account-link-button {
        width: 38px;
        justify-content: center;
        padding: 0;
    }

    .jag-account-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .jag-account-page-heading > .jag-account-btn {
        width: 100%;
    }

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

    .jag-account-profile-readonly-grid,
    .jag-account-form-grid-2 {
        grid-template-columns: 1fr;
    }

    .jag-account-field-span-2 {
        grid-column: auto;
    }
}

@media (max-width: 430px) {
    .jag-account-content {
        padding: 18px 12px 34px;
    }

    .jag-account-topbar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .jag-account-card,
    .jag-account-profile-card {
        border-radius: 14px;
    }

    .jag-account-card-header,
    .jag-account-card-body,
    .jag-account-form-grid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .jag-account-stats,
    .jag-account-stats-dashboard {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   JAG V2 — IDENTITÉ CLIENT = IDENTITÉ OFFICIELLE DU SITE
   ========================================================================== */

:root {
    --jag-primary: #8db243;
    --jag-primary-dark: #3f5e0a;
    --jag-primary-deep: #314b08;
    --jag-primary-soft: #eef4e3;

    --jag-bg: #ededed;
    --jag-surface: #ffffff;
    --jag-surface-soft: #f5f6f3;

    --jag-border: #d9ddd4;
    --jag-border-strong: #cfd4ca;

    --jag-text: #2b2f33;
    --jag-muted: #747b82;

    --jag-danger: #b42318;
    --jag-success: #3f7a28;
    --jag-warning: #a86712;

    --jag-radius-sm: 8px;
    --jag-radius: 10px;
    --jag-radius-lg: 14px;

    --jag-shadow-sm: 0 1px 2px rgba(31, 41, 55, .04);
    --jag-shadow: 0 7px 22px rgba(31, 41, 55, .07);
    --jag-shadow-hover: 0 11px 27px rgba(31, 41, 55, .10);
}

body.jag-account-body {
    background: var(--jag-bg);
    color: var(--jag-text);
}

.jag-account-sidebar {
    background: #ffffff;
    border-right: 1px solid var(--jag-border);
    box-shadow: 4px 0 16px rgba(31, 41, 55, .045);
}

.jag-account-brand {
    min-height: 92px;
    padding: 12px 5px;
    border-bottom: 1px solid var(--jag-border);
}

.jag-account-brand a {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-decoration: none;
}

.jag-account-brand-mark,
.jag-account-brand-copy {
    display: none !important;
}

.jag-account-brand-logo {
    display: block;
    width: auto;
    max-width: 178px;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
}

.jag-account-brand-logo-compact {
    max-width: 58px;
}

.jag-account-brand-fallback {
    min-width: 0;
    display: grid;
    line-height: .95;
    color: var(--jag-primary-dark);
}

.jag-account-brand-fallback strong {
    font-size: 15px;
    font-weight: 850;
}

.jag-account-brand-fallback b {
    margin-top: 3px;
    font-size: 10px;
    letter-spacing: .05em;
}

.jag-account-brand-section {
    margin-left: auto;
    padding: 5px 8px;
    border: 1px solid #dbe4d0;
    border-radius: 999px;
    background: var(--jag-primary-soft);
    color: var(--jag-primary-dark);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.jag-account-nav-label {
    color: #858c82;
}

.jag-account-nav a {
    color: #5c6460;
}

.jag-account-nav a:hover {
    background: var(--jag-primary-soft);
    border-color: #dce7cc;
    color: var(--jag-primary-dark);
}

.jag-account-nav a.is-active {
    background: var(--jag-primary-soft);
    border-color: #d2e1bd;
    color: var(--jag-primary-dark);
}

.jag-account-nav a.is-active::before {
    background: var(--jag-primary);
}

.jag-account-nav-primary {
    background: var(--jag-primary) !important;
    border-color: var(--jag-primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(63, 94, 10, .14);
}

.jag-account-nav-primary:hover {
    background: #7ea238 !important;
    border-color: #7ea238 !important;
}

.jag-account-sidebar-footer {
    border-top-color: var(--jag-border);
}

.jag-account-sidebar-footer a {
    color: #6a716c;
}

.jag-account-sidebar-footer a:hover {
    background: var(--jag-primary-soft);
    color: var(--jag-primary-dark);
}

.jag-account-topbar {
    background: #fff;
    border-bottom-color: var(--jag-border);
}

.jag-account-user-avatar {
    border-color: #d7e3c7;
    background: var(--jag-primary-soft);
    color: var(--jag-primary-dark);
}

.jag-account-page-heading h1,
.jag-account-card-header h2,
.jag-account-profile-readonly-grid strong {
    color: var(--jag-text);
}

.jag-account-eyebrow {
    color: var(--jag-primary-dark);
}

.jag-account-btn-primary {
    background: var(--jag-primary);
    border-color: var(--jag-primary);
}

.jag-account-btn-primary:hover {
    background: #7ea238;
    border-color: #7ea238;
}

.jag-account-stat::after {
    background: rgba(141,178,67,.10);
}

.jag-account-stat strong {
    color: var(--jag-primary-dark);
}

.jag-account-profile-type,
.jag-account-profile-privacy-note {
    border-color: #d9e5c8;
    background: var(--jag-primary-soft);
    color: var(--jag-primary-dark);
}

.jag-account-field input:focus,
.jag-account-field select:focus,
.jag-account-field textarea:focus,
.jag-account-input:focus,
.jag-account-select:focus,
.jag-account-textarea:focus {
    border-color: var(--jag-primary);
    box-shadow: 0 0 0 4px rgba(141,178,67,.13);
}

/* Connexion */

.jag-account-login-body {
    background:
        linear-gradient(
            180deg,
            #f7f8f5,
            #ededed
        );
}

.jag-account-login-card {
    border-color: var(--jag-border);
    box-shadow: var(--jag-shadow);
}

.jag-account-login-brand {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.jag-account-login-logo {
    display: block;
    width: auto;
    max-width: 230px;
    max-height: 68px;
    object-fit: contain;
    object-position: left center;
}

.jag-account-login-heading > span {
    color: var(--jag-primary-dark);
}

@media (max-width: 900px) {
    .jag-account-sidebar {
        background: #fff;
    }
}

@media (max-width: 520px) {
    .jag-account-brand-section {
        display: none;
    }

    .jag-account-brand-logo {
        max-width: 158px;
    }
}


/* ==========================================================================
   JAG V2 — Suppression du badge « Espace client » près du logo
   ========================================================================== */

.jag-account-brand-section {
    display: none !important;
}


/* ==========================================================================
   JAG V2 — Suppression de l'avatar initiale dans la topbar client
   ========================================================================== */

.jag-account-user-avatar {
    display: none !important;
}

.jag-account-user {
    gap: 10px;
}


/* ==========================================================================
   JAG V2 — SIGNALEMENT LIVE CHAT
   ========================================================================== */

.jag-chat-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.jag-account-btn-danger,
.jag-account-btn-danger-outline {
    border-color: #b42318;
}

.jag-account-btn-danger {
    background: #b42318;
    color: #fff;
}

.jag-account-btn-danger:hover {
    background: #941b13;
    border-color: #941b13;
    color: #fff;
}

.jag-account-btn-danger-outline {
    background: #fff;
    color: #9f2017;
}

.jag-account-btn-danger-outline:hover {
    background: #fff4f3;
    color: #841b14;
}

.jag-chat-message-report-link {
    display: block;
    width: fit-content;
    margin-top: 7px;
    color: #8e382f;
    font-size: 10px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.jag-chat-report-form {
    display: grid;
    gap: 18px;
}

.jag-chat-report-message {
    margin-bottom: 18px;
    padding: 14px 15px;
    border: 1px solid var(--jag-border);
    border-left: 4px solid #b42318;
    border-radius: 10px;
    background: #fafafa;
}

.jag-chat-report-message strong {
    display: block;
    margin-bottom: 7px;
}

.jag-chat-report-message p {
    margin: 0;
    line-height: 1.55;
}

.jag-chat-report-info {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #d9ddd4;
    border-radius: 10px;
    background: #f5f6f3;
    color: #5d645f;
    font-size: 11px;
}

.jag-chat-report-info strong {
    color: #333a35;
}

.jag-chat-report-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 700px) {
    .jag-chat-heading-actions {
        width: 100%;
        justify-content: stretch;
    }

    .jag-chat-heading-actions .jag-account-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}


/* ==========================================================================
   JAG V2 — Icônes utilisateur neutres
   --------------------------------------------------------------------------
   Aucun avatar généré à partir de l'initiale d'un pseudo.
   ========================================================================== */

.jag-user-icon {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7dfcb;
    border-radius: 10px;
    background: #f5f7f1;
    color: var(--jag-primary-dark);
    font-size: 0 !important;
    line-height: 1;
}

.jag-user-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.jag-chat-avatar.jag-user-icon {
    width: 42px;
    height: 42px;
}

.jag-account-message-avatar.jag-user-icon {
    width: 40px;
    height: 40px;
}

/*
 * La barre supérieure client reste volontairement sans avatar,
 * conformément au correctif déjà validé.
 */
.jag-account-user-avatar {
    display: none !important;
}



/* ==========================================================================
   JAG V2 — Masquage et blocage du live chat
   ========================================================================== */

.jag-chat-list-item {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.jag-chat-list-main {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
}

.jag-chat-list-main:hover {
    background: #fafbf8;
}

.jag-chat-list-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 10px 14px 10px 4px;
}

.jag-chat-list-actions form,
.jag-chat-heading-actions form,
.jag-chat-inline-form {
    margin: 0;
}

.jag-chat-text-action {
    border: 0;
    background: transparent;
    color: #687167;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jag-chat-text-action:hover {
    color: var(--jag-primary-dark);
}

.jag-chat-list-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.jag-chat-state-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-top: 4px;
    padding: 3px 8px;
    border: 1px solid #dde2d8;
    border-radius: 999px;
    background: #f6f8f3;
    color: #606861;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.2;
}

.jag-chat-state-badge.is-success {
    border-color: #d9e6bd;
    background: #f4f8eb;
    color: #4f671b;
}

.jag-chat-state-badge.is-warning {
    border-color: #eadcb5;
    background: #fff9e8;
    color: #82631f;
}

.jag-chat-state-badge.is-danger {
    border-color: #ecc9c5;
    background: #fff4f3;
    color: #92382f;
}

.jag-chat-state-badge.is-muted {
    border-color: #dddddd;
    background: #f4f4f4;
    color: #777;
}

.jag-chat-state-badge.is-blocked {
    margin-top: 0;
    border-color: #e4c5c1;
    background: #fff5f4;
    color: #8d3d35;
}

.jag-chat-ad-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #727973;
    font-size: 12px;
}

.jag-chat-ad-context a {
    color: var(--jag-primary-dark);
}

.jag-chat-ad-context strong {
    color: #4d544e;
}

.jag-chat-blocked-users {
    margin-top: 18px;
}

.jag-chat-blocked-list {
    display: grid;
}

.jag-chat-blocked-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-top: 1px solid var(--jag-border);
}

.jag-chat-blocked-row > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.jag-chat-blocked-row strong {
    color: #2f3731;
}

.jag-chat-blocked-row small {
    color: #707872;
    line-height: 1.4;
}

.jag-chat-inline-form {
    margin-top: 10px;
}

.jag-chat-composer-disabled {
    display: grid;
    gap: 4px;
    padding: 18px;
    border-top: 1px solid var(--jag-border);
    background: #f7f8f5;
}

.jag-chat-composer-disabled strong {
    color: #444c45;
}

.jag-chat-composer-disabled span {
    color: #737a74;
    font-size: 11px;
}

.jag-chat-block-panel {
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid #e4d3d0;
    border-radius: 12px;
    background: #fff;
}

.jag-chat-block-panel summary {
    padding: 13px 16px;
    color: #8c3b33;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    user-select: none;
}

.jag-chat-block-panel[open] summary {
    border-bottom: 1px solid #ecdcd9;
    background: #fff8f7;
}

.jag-chat-block-panel-body {
    padding: 16px;
}

.jag-chat-block-panel-body > p {
    margin: 0 0 15px;
    color: #666e68;
    font-size: 11px;
    line-height: 1.55;
}

.jag-chat-block-form {
    display: grid;
    gap: 14px;
}

.jag-chat-block-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 700px) {
    .jag-chat-list-item {
        align-items: stretch;
        flex-direction: column;
    }

    .jag-chat-list-actions {
        justify-content: flex-end;
        padding: 0 14px 12px;
    }

    .jag-chat-blocked-row {
        align-items: stretch;
        flex-direction: column;
    }

    .jag-chat-blocked-row form,
    .jag-chat-blocked-row button {
        width: 100%;
    }

    .jag-chat-heading-actions form,
    .jag-chat-heading-actions form button {
        width: 100%;
    }
}


/* Correctif alignement formulaire inscription */
.jag-registration-section .jag-account-field > .jag-account-field-help {
    display: block;
    line-height: 1.45;
}

/* ==========================================================================
   JAG V2 002.7.4.1 — Favoris intégrés à l'espace client
   ========================================================================== */

.jag-account-favorites-heading {
    align-items: center;
}

.jag-account-favorites-summary {
    width: max-content;
    min-width: 145px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 18px;
    padding: 11px 14px;
    border: 1px solid var(--jag-border);
    border-radius: var(--jag-radius);
    background: var(--jag-surface);
    box-shadow: var(--jag-shadow-sm);
}

.jag-account-favorites-summary strong {
    color: var(--jag-primary-dark);
    font-size: 20px;
}

.jag-account-favorites-summary span {
    color: var(--jag-muted);
    font-size: 12px;
    font-weight: 700;
}

.jag-account-favorites-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.jag-account-favorite-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--jag-border);
    border-radius: var(--jag-radius-lg);
    background: var(--jag-surface);
    box-shadow: var(--jag-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.jag-account-favorite-card:hover {
    transform: translateY(-2px);
    border-color: var(--jag-border-strong);
    box-shadow: var(--jag-shadow);
}

.jag-account-favorite-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--jag-surface-soft);
}

.jag-account-favorite-image {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--jag-muted);
    text-decoration: none;
    font-size: 12px;
}

.jag-account-favorite-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.jag-account-favorite-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
}

.jag-account-favorite-remove button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: #b42318;
    box-shadow: 0 4px 14px rgba(30,42,34,.18);
    cursor: pointer;
    font-size: 21px;
    line-height: 1;
}

.jag-account-favorite-remove button:hover {
    transform: scale(1.04);
    background: #fff;
}

.jag-account-favorite-body {
    display: grid;
    gap: 7px;
    padding: 15px;
}

.jag-account-favorite-category {
    overflow: hidden;
    color: var(--jag-primary-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.jag-account-favorite-body h2 {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
}

.jag-account-favorite-body h2 a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--jag-text);
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.jag-account-favorite-body h2 a:hover {
    color: var(--jag-primary-dark);
}

.jag-account-favorite-body p {
    margin: 0;
    overflow: hidden;
    color: var(--jag-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jag-account-favorite-price {
    color: var(--jag-primary-dark);
    font-size: 14px;
}

.jag-account-favorites-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.jag-account-favorites-pagination > :first-child {
    justify-self: start;
}

.jag-account-favorites-pagination > :last-child {
    justify-self: end;
}

.jag-account-favorites-pagination > strong {
    color: var(--jag-muted);
    font-size: 12px;
}

@media (max-width: 1200px) {
    .jag-account-favorites-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .jag-account-favorites-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .jag-account-favorites-heading {
        align-items: stretch;
    }

    .jag-account-favorites-heading .jag-account-btn {
        width: 100%;
    }

    .jag-account-favorites-summary {
        width: 100%;
    }

    .jag-account-favorites-grid {
        grid-template-columns: 1fr;
    }

    .jag-account-favorite-card {
        display: grid;
        grid-template-columns: 132px minmax(0, 1fr);
    }

    .jag-account-favorite-media {
        aspect-ratio: auto;
        min-height: 132px;
    }

    .jag-account-favorite-body {
        align-content: center;
        padding: 13px;
    }

    .jag-account-favorites-pagination {
        grid-template-columns: 1fr;
    }

    .jag-account-favorites-pagination > * {
        justify-self: stretch !important;
        text-align: center;
    }
}


/* 002.7.8.1 — sélection multiple des photos d'annonce */
.jag-account-photo-selection {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--jag-border);
    border-radius: 10px;
    background: #fff;
}

.jag-account-photo-selection[hidden] {
    display: none !important;
}

.jag-account-photo-selection-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.jag-account-photo-selection-heading > span {
    color: var(--jag-muted);
    font-size: 12px;
}

.jag-account-photo-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.jag-account-photo-selection-item {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
}

.jag-account-photo-selection-item img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 7px;
    background: #e2e8f0;
}

.jag-account-photo-selection-meta {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding-right: 2px;
}

.jag-account-photo-selection-meta strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.jag-account-photo-selection-meta span {
    color: var(--jag-muted);
    font-size: 11px;
}

.jag-account-photo-selection-remove {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 30px;
    border: 1px solid #fecaca;
    border-radius: 7px;
    background: #fff;
    color: var(--jag-danger);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 560px) {
    .jag-account-photo-selection-grid {
        grid-template-columns: 1fr;
    }
}