:root {
    --primary: #0D2F68;
    --secondary: #4FB555;
    --bg: #F8FAFC;
    --surface: #FFFFFF;
    --surface-2: #F1F5F9;
    --dark: #0F172A;
    --muted: #64748B;
    --border: #E2E8F0;
    --danger: #DC2626;
    --warning: #F59E0B;
    --success: #16A34A;
    --shadow: 0 18px 45px rgba(13, 47, 104, 0.10);
    --radius: 18px;
}

* { box-sizing: border-box; font-family: "Inter", Arial, Helvetica, sans-serif !important; }

body { margin: 0; background: var(--bg); color: var(--dark); }

.login-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(79, 181, 85, 0.22), transparent 35%),
        linear-gradient(135deg, var(--primary), #061936);
}

.login-card, .install-card {
    width: 100%;
    max-width: 560px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 26px;
    padding: 38px;
    box-shadow: var(--shadow);
}

.install-card { max-width: 760px; }
.login-logo { max-width: 220px; margin-bottom: 18px; }

.login-pill, .eyebrow {
    display: inline-block;
    background: #EAF7EC;
    color: var(--secondary);
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
}

h1 { color: var(--primary); font-size: 32px; letter-spacing: -0.04em; margin: 0 0 8px; }
h2 { color: var(--primary); letter-spacing: -0.02em; }

label { display: block; margin: 15px 0 6px; font-weight: 700; color: var(--dark); }

input, select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 15px;
    background: white;
}

input:focus, select:focus {
    outline: 3px solid rgba(79, 181, 85, 0.18);
    border-color: var(--secondary);
}

.btn, button {
    display: inline-block;
    margin-top: 18px;
    padding: 13px 18px;
    border: none;
    border-radius: 12px;
    background: var(--secondary);
    color: white;
    font-weight: 850;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(79,181,85,.20);
}

.btn.secondary { background: var(--primary); box-shadow: 0 10px 24px rgba(13,47,104,.18); }
.btn.danger, button.danger { background: var(--danger); box-shadow: none; }
.btn.small { margin-top: 0; padding: 10px 16px; }
.btn.mini { margin: 0; padding: 8px 10px; font-size: 12px; white-space: nowrap; }

.alert { padding: 13px; border-radius: 12px; margin: 15px 0; font-weight: 700; }
.alert.error { background: #FEE2E2; color: var(--danger); }
.alert.success { background: #DCFCE7; color: var(--success); }

.sidebar {
    width: 280px;
    background: linear-gradient(180deg, var(--primary), #071D42);
    color: white;
    min-height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding: 22px 18px;
}

.sidebar-logo {
    background: white;
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 28px;
    box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

.sidebar-logo img { width: 100%; display: block; }

.sidebar nav a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 13px 14px;
    border-radius: 13px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.08);
    font-weight: 750;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: var(--secondary);
}

.content { margin-left: 280px; padding: 30px; }

.topbar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 24px 26px;
    box-shadow: var(--shadow);
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.topbar.hero {
    background:
        radial-gradient(circle at 80% 20%, rgba(79, 181, 85, 0.16), transparent 32%),
        var(--surface);
}

.topbar p { margin: 6px 0 0; color: var(--muted); }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}

.info-card {
    background: var(--surface);
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(15,23,42,.05);
}

.info-card span { color: var(--muted); font-size: 14px; font-weight: 700; }
.info-card strong { display: block; margin-top: 5px; color: var(--primary); font-size: 22px; letter-spacing: -0.03em; }

.filters {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(15,23,42,.05);
    padding: 18px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

.table-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1080px;
    table-layout: fixed;
}

th {
    background: #F1F5F9;
    padding: 15px 14px;
    text-align: left;
    font-size: 13px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

td {
    padding: 14px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    vertical-align: middle;
}

tbody tr:hover { background: #FAFCFF; }

.col-photo { width: 90px; }
.col-code { width: 155px; }
.col-designation { width: 28%; }
.col-price { width: 135px; }
.col-stock { width: 90px; }
.col-availability { width: 160px; }
.col-action { width: 64px; }

.designation-cell { line-height: 1.35; overflow-wrap: anywhere; }

.photo-cell img {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #F8FAFC;
    transition: transform .18s ease;
}

.photo-cell img:hover { transform: scale(1.08); }

.price {
    color: var(--primary);
    font-weight: 900;
    white-space: nowrap;
    font-size: 15px;
}

.price-secondary {
    color: var(--secondary);
    font-weight: 900;
    white-space: nowrap;
    font-size: 15px;
}

.stock-cell { font-weight: 850; text-align: center; }

.badge, .role-pill {
    display: inline-block;
    padding: 7px 11px;
    border-radius: 999px;
    font-weight: 850;
    font-size: 12px;
    white-space: nowrap;
}

.status-available { background: #DCFCE7; color: #166534; }
.status-low { background: #FEF3C7; color: #92400E; }
.status-out { background: #FEE2E2; color: #991B1B; }
.role-pill { background: #EAF0F8; color: var(--primary); }

.arrow-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--primary);
    color: white;
    text-decoration: none;
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
}

.site-button {
    display: inline-block;
    background: var(--primary);
    color: white;
    text-decoration: none;
    font-weight: 850;
    padding: 8px 12px;
    border-radius: 10px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 24px;
    box-shadow: var(--shadow);
    margin-bottom: 22px;
}

.user-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: end;
}

.settings-form { max-width: 320px; }

.mini-form {
    display: flex;
    gap: 6px;
    align-items: center;
}

.mini-form input, .mini-form select {
    min-width: 140px;
    padding: 8px;
    font-size: 13px;
}

.action-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.action-buttons form {
    margin: 0;
}

.profile-panel { max-width: 740px; }

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: var(--primary);
    color: white;
    display: grid;
    place-items: center;
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 18px;
}

code {
    display: block;
    background: #F1F5F9;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow-x: auto;
}

hr { border: none; border-top: 1px solid var(--border); margin: 22px 0; }

@media (max-width: 1050px) {
    .sidebar { position: relative; width: 100%; min-height: auto; }
    .content { margin-left: 0; padding: 18px; }
    .topbar { flex-direction: column; align-items: flex-start; }
    .topbar-actions { justify-content: flex-start; }
    .info-grid { grid-template-columns: repeat(2, 1fr); }
    .filters, .user-form { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .info-grid { grid-template-columns: 1fr; }

    table,
    .users-table {
        min-width: 0;
        table-layout: auto;
    }

    thead {
        display: none;
    }

    tbody,
    tr,
    td {
        display: block;
        width: 100%;
    }

    tr {
        background: white;
        margin: 0 0 14px;
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 10px;
        box-shadow: 0 8px 22px rgba(15,23,42,.05);
    }

    td {
        border: none;
        padding: 9px 8px;
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: center;
    }

    td::before {
        content: attr(data-label);
        color: var(--muted);
        font-weight: 800;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .04em;
        flex: 0 0 115px;
    }

    .photo-cell img {
        width: 90px;
        height: 68px;
    }

    .designation-cell {
        align-items: flex-start;
    }

    .mini-form {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .mini-form input,
    .mini-form select {
        min-width: 100%;
    }

    .action-buttons {
        justify-content: flex-end;
    }

    .action-buttons form,
    .action-buttons a {
        width: 100%;
    }

    .action-buttons .btn {
        width: 100%;
    }
}


/* ===== V5 additions ===== */
.import-report {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 18px 0 22px;
}

.import-report div {
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
}

.import-report span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.import-report strong {
    display: block;
    margin-top: 6px;
    color: var(--primary);
    font-size: 18px;
}

.user-filter-form {
    display: grid;
    grid-template-columns: 2fr 1fr auto auto;
    gap: 12px;
    align-items: end;
}

.compact-panel {
    padding: 18px;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.history-title {
    margin-top: 22px;
}

@media (max-width: 1050px) {
    .import-report {
        grid-template-columns: repeat(2, 1fr);
    }

    .user-filter-form,
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body {
        background: #F8FAFC;
    }

    .login-card,
    .install-card {
        padding: 26px;
        border-radius: 22px;
    }

    .sidebar {
        padding: 14px;
    }

    .sidebar-logo {
        max-width: 190px;
        margin-bottom: 16px;
    }

    .sidebar nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sidebar nav a {
        margin-bottom: 0;
        text-align: center;
        font-size: 13px;
        padding: 11px 10px;
    }

    .content {
        padding: 14px;
    }

    .topbar {
        padding: 18px;
        border-radius: 20px;
    }

    h1 {
        font-size: 25px;
    }

    .topbar-actions {
        width: 100%;
    }

    .topbar-actions .btn {
        width: 100%;
    }

    .filters {
        padding: 14px;
    }

    .import-report {
        grid-template-columns: 1fr;
    }

    table,
    .users-table {
        min-width: 0;
        table-layout: auto;
    }

    thead {
        display: none;
    }

    tbody,
    tr,
    td {
        display: block;
        width: 100%;
    }

    tr {
        background: white;
        margin: 0 0 14px;
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 12px;
        box-shadow: 0 8px 22px rgba(15,23,42,.05);
    }

    td {
        border: none;
        padding: 10px 8px;
        display: grid;
        grid-template-columns: 112px 1fr;
        gap: 12px;
        align-items: center;
    }

    td::before {
        content: attr(data-label);
        color: var(--muted);
        font-weight: 850;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .photo-cell img {
        width: 92px;
        height: 68px;
    }

    .designation-cell {
        align-items: start;
    }

    .price,
    .price-secondary {
        font-size: 16px;
    }

    .arrow-button {
        width: 40px;
        height: 40px;
    }

    .mini-form {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .mini-form input,
    .mini-form select {
        min-width: 100%;
    }

    .action-buttons {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .action-buttons form,
    .action-buttons a {
        width: 100%;
    }

    .action-buttons .btn {
        width: 100%;
    }

    .user-filter-form .btn {
        width: 100%;
    }
}


/* ===== V5.1 final adjustments ===== */
.filters {
    grid-template-columns: 2fr 1fr 1fr;
}

.col-category {
    width: 160px;
}

.category-pill {
    display: inline-block;
    padding: 7px 11px;
    border-radius: 999px;
    background: #EAF0F8;
    color: var(--primary);
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.muted-text {
    color: var(--muted);
    font-weight: 650;
}

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


/* ===== V5.2 final adjustments ===== */
.filters-one-line {
    grid-template-columns: minmax(280px, 2fr) minmax(180px, 1fr) minmax(160px, 1fr);
    align-items: center;
}

.col-designation { width: 26%; }
.col-category { width: 150px; }
.col-availability { width: 150px; }

.stat-products {
    border-left: 5px solid var(--primary);
    background: linear-gradient(135deg, #ffffff, #eef4ff);
}

.stat-available {
    border-left: 5px solid var(--success);
    background: linear-gradient(135deg, #ffffff, #ecfdf3);
}

.stat-low {
    border-left: 5px solid var(--warning);
    background: linear-gradient(135deg, #ffffff, #fffbeb);
}

.stat-out {
    border-left: 5px solid var(--danger);
    background: linear-gradient(135deg, #ffffff, #fef2f2);
}

.stat-products strong { color: var(--primary); }
.stat-available strong { color: var(--success); }
.stat-low strong { color: #b45309; }
.stat-out strong { color: var(--danger); }

.history-section-title {
    margin-bottom: 14px;
}

.history-section-title h2 {
    margin: 0;
}

.connection-title {
    margin-top: 36px;
}

@media (max-width: 1050px) {
    .filters-one-line {
        grid-template-columns: 1fr;
    }
}


/* ===== V6 quote page ===== */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.quote-full {
    grid-column: 1 / -1;
}

textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 15px;
    background: white;
    resize: vertical;
}

.quote-products-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.quote-products-header p {
    color: var(--muted);
    margin: 0;
}

.quote-lines {
    display: grid;
    gap: 12px;
}

.quote-line {
    display: grid;
    grid-template-columns: 170px 1.5fr 100px 120px 120px auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #F8FAFC;
}

.quote-line label {
    font-size: 12px;
    margin-top: 0;
}

.quote-line input {
    padding: 10px 11px;
}

.quote-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 22px 0;
}

.quote-summary div {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
}

.quote-summary span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.quote-summary strong {
    display: block;
    margin-top: 6px;
    font-size: 22px;
    color: var(--primary);
}

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

    .quote-products-header {
        flex-direction: column;
        align-items: stretch;
    }

    .quote-line {
        grid-template-columns: 1fr;
    }

    .quote-summary {
        grid-template-columns: 1fr;
    }
}


/* ===== V7 Devis CRM compact ===== */
.quote-panel h2 {
    margin-top: 12px;
    margin-bottom: 10px;
    font-size: 20px;
}

.quote-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.quote-full {
    grid-column: 1 / -1;
}

textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    background: white;
    resize: vertical;
}

.quote-grid label,
.quote-line label {
    font-size: 12px;
    margin: 8px 0 5px;
}

.quote-grid input,
.quote-grid select,
.quote-line input {
    padding: 10px 11px;
    font-size: 14px;
}

.quote-products-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 10px;
}

.quote-products-header p {
    color: var(--muted);
    margin: 0;
    font-size: 14px;
}

.quote-lines {
    display: grid;
    gap: 9px;
}

.quote-line {
    display: grid;
    grid-template-columns: 145px 1.5fr 85px 105px 95px 95px 95px auto;
    gap: 8px;
    align-items: end;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #F8FAFC;
}

.quote-line-designation input {
    background: #fff;
}

.quote-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.quote-summary div {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 13px;
}

.quote-summary span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.quote-summary strong {
    display: block;
    margin-top: 5px;
    font-size: 18px;
    color: var(--primary);
}

.quote-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 1200px) {
    .quote-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quote-line {
        grid-template-columns: repeat(2, 1fr);
    }

    .quote-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .quote-grid,
    .quote-line,
    .quote-summary {
        grid-template-columns: 1fr;
    }

    .quote-products-header {
        flex-direction: column;
        align-items: stretch;
    }

    .quote-actions .btn {
        width: 100%;
    }
}


/* ===== V7.1 drawer catalogue ===== */
.product-drawer {
    position: fixed;
    top: 0;
    right: -520px;
    width: 500px;
    max-width: 94vw;
    height: 100vh;
    background: #fff;
    z-index: 1001;
    box-shadow: -18px 0 45px rgba(15,23,42,.18);
    transition: right .22s ease;
    padding: 20px;
    overflow-y: auto;
}

.product-drawer.open {
    right: 0;
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.32);
    z-index: 1000;
    display: none;
}

.drawer-overlay.open {
    display: block;
}

.product-drawer-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.product-drawer-header h2 {
    margin: 0 0 4px;
}

.product-drawer-header p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.drawer-close {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    padding: 0;
    margin: 0;
    font-size: 24px;
    line-height: 1;
    background: var(--primary);
}

.drawer-search {
    margin-bottom: 14px;
}

.drawer-products {
    display: grid;
    gap: 10px;
}

.drawer-product {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px;
    background: #F8FAFC;
}

.drawer-product-image {
    width: 64px;
    height: 54px;
    border-radius: 12px;
    overflow: hidden;
    background: #EAF0F8;
    display: grid;
    place-items: center;
    color: var(--primary);
    font-weight: 900;
    font-size: 12px;
}

.drawer-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drawer-product-main {
    min-width: 0;
}

.drawer-product-main strong {
    display: block;
    color: var(--primary);
    font-size: 13px;
}

.drawer-product-main span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.25;
}

.drawer-product-main small {
    display: block;
    color: var(--muted);
    margin-top: 2px;
}

.drawer-product-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 12px;
}

.drawer-product-meta b {
    color: var(--secondary);
}

.drawer-product-meta em {
    font-style: normal;
    color: var(--muted);
}

@media (max-width: 700px) {
    .drawer-product {
        grid-template-columns: 54px 1fr;
    }

    .drawer-product .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* ===== V7.3 quote summary one-line + user category CSS ===== */
.quote-summary {
    grid-template-columns: repeat(5, minmax(130px, 1fr)) !important;
}

.quote-summary div {
    min-width: 0;
}

.quote-summary strong {
    font-size: 18px;
    white-space: nowrap;
}

.col-category{
    width:180px;
    max-width:180px;
}

.category-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    max-width:170px;

    padding:6px 12px;

    border-radius:20px;

    background:#EAF0F8;
    color:#0D2F68;

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

    white-space:normal;
    word-break:break-word;
    text-align:left;
}

@media (max-width: 1200px) {
    .quote-summary {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 760px) {
    .quote-summary {
        grid-template-columns: 1fr !important;
    }
}


/* ===== V7.5 layout fixes ===== */
.sidebar{width:78px;transition:width .18s ease;overflow:hidden;z-index:999;}
.sidebar:hover{width:280px;}
.sidebar-logo{height:58px;display:flex;align-items:center;justify-content:center;padding:10px;}
.sidebar-logo img{min-width:190px;opacity:0;transition:opacity .15s ease;}
.sidebar:hover .sidebar-logo img{opacity:1;}
.sidebar nav a{white-space:nowrap;overflow:hidden;}
.sidebar nav a span{opacity:0;transition:opacity .15s ease;}
.sidebar:hover nav a span{opacity:1;}
.content{margin-left:78px;transition:margin-left .18s ease;}
.sidebar:hover ~ .content{margin-left:280px;}
.inline-delete-form{display:inline-block;margin:0;}
.quote-line{grid-template-columns:115px 1.35fr 105px 65px 90px 90px 80px 85px 95px auto!important;}
.quote-summary{grid-template-columns:repeat(5,minmax(120px,1fr))!important;}
.devis-filter-form{display:grid;grid-template-columns:2fr 150px 170px auto auto;gap:10px;align-items:end;}
.devis-list-table{min-width:1180px;}
.devis-list-table .col-email{width:220px;}
.quote-email-cell{word-break:break-word;overflow-wrap:anywhere;}
.quote-status{display:inline-block;padding:7px 11px;border-radius:999px;font-weight:850;font-size:12px;white-space:nowrap;}
.quote-status-brouillon{background:#FEF3C7;color:#92400E;}
.quote-status-envoye{background:#DBEAFE;color:#1D4ED8;}
.quote-status-accepte{background:#DCFCE7;color:#166534;}
.quote-status-refuse{background:#FEE2E2;color:#991B1B;}
.quote-status-expire{background:#E5E7EB;color:#374151;}
.col-category{width:180px;max-width:180px;}
.category-pill{display:inline-flex;align-items:center;justify-content:center;max-width:170px;padding:6px 12px;border-radius:20px;background:#EAF0F8;color:#0D2F68;font-size:12px;font-weight:700;white-space:normal;word-break:break-word;text-align:center;}
@media(max-width:1200px){.quote-line{grid-template-columns:1fr 1fr!important}.quote-summary{grid-template-columns:repeat(2,1fr)!important}.devis-filter-form{grid-template-columns:1fr}.sidebar{position:relative;width:100%;min-height:auto}.sidebar:hover{width:100%}.sidebar-logo img,.sidebar nav a span{opacity:1}.content,.sidebar:hover ~ .content{margin-left:0}}
@media(max-width:760px){.quote-summary{grid-template-columns:1fr!important}.quote-line{grid-template-columns:1fr!important}}


/* ===== V7.8 MENU PROPRE : icônes + favicon + logo agrandi ===== */
:root {
    --sidebar-closed: 76px;
    --sidebar-open: 310px;
}

.sidebar {
    width: var(--sidebar-closed) !important;
    min-width: var(--sidebar-closed) !important;
    background: linear-gradient(180deg, var(--primary), #071D42) !important;
    color: #fff !important;
    min-height: 100vh !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    padding: 16px 12px !important;
    overflow: hidden !important;
    z-index: 50 !important;
    transition: width .22s ease, min-width .22s ease !important;
}

.sidebar:hover {
    width: var(--sidebar-open) !important;
    min-width: var(--sidebar-open) !important;
}

.content {
    margin-left: var(--sidebar-closed) !important;
    transition: margin-left .22s ease !important;
}

.sidebar:hover ~ .content {
    margin-left: var(--sidebar-open) !important;
}

.sidebar-logo {
    height: 100px !important;
    min-height: 100px !important;
    width: 100% !important;
    margin: 0 0 18px 0 !important;
    padding: 10px !important;
    background: #fff !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.12) !important;
}

.sidebar-logo-full {
    display: none !important;
    width: auto !important;
    max-width: 250px !important;
    max-height: 78px !important;
    object-fit: contain !important;
}

.sidebar-logo-mini {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    object-fit: contain !important;
}

.sidebar:hover .sidebar-logo-full {
    display: block !important;
}

.sidebar:hover .sidebar-logo-mini {
    display: none !important;
}

.sidebar nav {
    display: grid !important;
    gap: 8px !important;
}

.sidebar nav a {
    position: relative !important;
    min-height: 46px !important;
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 780 !important;
    background: rgba(255,255,255,0.08) !important;
    white-space: nowrap !important;
    transition: background .16s ease, transform .16s ease !important;
}

.sidebar nav a::before {
    display: none !important;
    content: none !important;
}

.sidebar nav a svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
}

.sidebar nav a span {
    display: none !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    transition: opacity .18s ease, transform .18s ease !important;
}

.sidebar:hover nav a {
    justify-content: flex-start !important;
    padding-left: 15px !important;
}

.sidebar:hover nav a span {
    display: inline !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.sidebar nav a:hover {
    background: rgba(255,255,255,.16) !important;
    transform: translateX(1px) !important;
}

.sidebar nav a.active {
    background: rgba(79,181,85,.92) !important;
}

.sidebar nav a.active:hover {
    background: #4FB555 !important;
}

/* Réglages catégorie validés */
.col-category{
    width:180px;
    max-width:180px;
}

.category-pill{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;

    width:100%;
    max-width:170px;

    padding:6px 12px;

    border-radius:20px;

    background:#EAF0F8;
    color:#0D2F68;

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

    white-space:normal;
    word-break:break-word;
    text-align:left;
}

@media (max-width: 1050px) {
    .sidebar,
    .sidebar:hover {
        position: relative !important;
        width: 100% !important;
        min-width: 100% !important;
        min-height: auto !important;
        padding: 14px !important;
    }

    .content,
    .sidebar:hover ~ .content {
        margin-left: 0 !important;
        padding: 18px !important;
    }

    .sidebar-logo {
        height: auto !important;
        min-height: 0 !important;
        max-width: 220px !important;
        margin-bottom: 16px !important;
    }

    .sidebar-logo-full {
        display: block !important;
        max-width: 180px !important;
        max-height: 54px !important;
    }

    .sidebar-logo-mini {
        display: none !important;
    }

    .sidebar nav {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .sidebar nav a,
    .sidebar:hover nav a {
        justify-content: center !important;
        padding: 11px 10px !important;
    }

    .sidebar nav a span,
    .sidebar:hover nav a span {
        display: inline !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ===== V7.9 Corrections demandées ===== */

/* Supprimer proprement depuis Mes devis */
.inline-delete-form,
.action-buttons form.inline-delete-form {
    margin: 0 !important;
    display: inline-flex !important;
}

/* Paramètres : Stock puis Sécurité à la suite, plus jamais en 2 colonnes */
.settings-grid,
.settings-grid-single {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    max-width: 760px !important;
}

.settings-grid > div,
.settings-grid-single > div {
    width: 100% !important;
}

/* Conservation réglages catégorie validés */
.col-category{
    width:180px;
    max-width:180px;
}

.category-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    max-width:170px;
    padding:6px 12px;
    border-radius:20px;
    background:#EAF0F8;
    color:#0D2F68;
    font-size:12px;
    font-weight:700;
    white-space:normal;
    word-break:break-word;
    text-align:center;
}


/* ===== V7.10 filtres Mes devis instantanés ===== */
.devis-filters {
    grid-template-columns: minmax(280px, 2fr) minmax(180px, 1fr) !important;
    margin-bottom: 16px !important;
}

@media (max-width: 760px) {
    .devis-filters {
        grid-template-columns: 1fr !important;
    }
}


/* ===== V8 modifications portail ===== */
.password-field{
    position:relative;
}
.password-field input{
    padding-right:52px;
}
.password-toggle{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    margin:0;
    padding:0;
    border-radius:10px;
    background:#EEF2F7;
    color:#0D2F68;
    box-shadow:none;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
}
.password-toggle:hover{
    background:#E2E8F0;
}
#productTable .col-category,
#productTable td[data-label="Catégorie"]{
    text-align:left !important;
}
#productTable .category-pill{
    justify-content:flex-start !important;
    text-align:left !important;
}
.btn.success{
    background:var(--success);
    box-shadow:0 10px 24px rgba(22,163,74,.18);
}
@media print{
    @page{
        size:A4 landscape;
        margin:7mm;
    }
    body{
        background:#fff !important;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }
    .sidebar,
    .topbar-actions,
    .filters,
    .info-grid,
    .arrow-button,
    .col-action,
    #productTable th.col-action,
    #productTable td[data-label="Produit"],
    #productTable .col-photo,
    #productTable td[data-label="Photo"]{
        display:none !important;
    }
    .content,
    .sidebar:hover ~ .content{
        margin:0 !important;
        padding:0 !important;
        width:100% !important;
    }
    .topbar.hero{
        box-shadow:none !important;
        border:0 !important;
        padding:0 0 5mm 0 !important;
        background:#fff !important;
    }
    .topbar.hero h1{
        font-size:18px !important;
        margin:0 0 2mm 0 !important;
    }
    .topbar.hero p,
    .eyebrow{
        font-size:10px !important;
        margin:0 !important;
    }
    .table-wrapper,
    .premium-table{
        box-shadow:none !important;
        border:0 !important;
        overflow:visible !important;
        padding:0 !important;
        margin:0 !important;
    }
    #productTable{
        width:100% !important;
        min-width:0 !important;
        table-layout:fixed !important;
        border-collapse:collapse !important;
        font-size:8px !important;
        line-height:1.15 !important;
    }
    #productTable th,
    #productTable td{
        padding:2px 3px !important;
        border:1px solid #d7dce3 !important;
        vertical-align:top !important;
    }
    #productTable tbody tr[style*="display: none"]{
        display:none !important;
    }
    #productTable .col-code{width:18mm !important;}
    #productTable .col-designation{width:auto !important;}
    #productTable .col-category{width:30mm !important;}
    #productTable .col-price{width:18mm !important;}
    #productTable .col-stock{width:12mm !important;}
    #productTable .col-availability{width:25mm !important;}
    #productTable .category-pill,
    #productTable .badge{
        padding:1px 4px !important;
        border-radius:7px !important;
        font-size:7.5px !important;
        max-width:none !important;
    }
    #productTable strong{
        font-size:8px !important;
    }
}


.password-field{
    position:relative;
    display:flex;
    align-items:center;
}
.password-field input{
    width:100%;
    padding-right:48px !important;
}
.password-toggle{
    position:absolute !important;
    right:8px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:9px !important;
    background:transparent !important;
    color:#0D2F68 !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:17px !important;
    cursor:pointer;
}
.password-toggle:hover{
    background:#EEF2F7 !important;
}
.quote-status-actions{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #E5E7EB;
}


/* ===== V10 ajustements ciblés ===== */
.login-card .password-field{
    position:relative !important;
    display:block !important;
}
.login-card .password-field input{
    width:100% !important;
    padding-right:48px !important;
}
.login-card .password-toggle{
    position:absolute !important;
    right:9px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:9px !important;
    background:transparent !important;
    color:#0D2F68 !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:17px !important;
    cursor:pointer !important;
    z-index:5 !important;
}
.login-card .password-toggle:hover{
    background:#EEF2F7 !important;
}
.login-card .password-toggle .eye-closed{display:none;}
.login-card .password-toggle.is-visible .eye-open{display:none;}
.login-card .password-toggle.is-visible .eye-closed{display:inline;}
.topbar-actions form.inline-delete-form{
    margin:0 !important;
    display:inline-flex !important;
}
.topbar-actions form.inline-delete-form .btn.small{
    margin-top:0 !important;
}

/* ===== V11 login password eye propre ===== */
.login-card .login-password-wrap{
    position:relative !important;
    display:block !important;
    width:100% !important;
}
.login-card .login-password-wrap input{
    width:100% !important;
    height:48px !important;
    padding-right:54px !important;
    box-sizing:border-box !important;
}
.login-card .login-password-toggle{
    position:absolute !important;
    top:50% !important;
    right:10px !important;
    transform:translateY(-50%) !important;
    width:34px !important;
    height:34px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:10px !important;
    background:transparent !important;
    color:#64748B !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    z-index:2 !important;
    line-height:1 !important;
}
.login-card .login-password-toggle:hover,
.login-card .login-password-toggle:focus{
    background:#EEF2F7 !important;
    color:#0D2F68 !important;
    outline:none !important;
}
.login-card .login-password-toggle svg{
    width:20px !important;
    height:20px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}
.login-card .login-password-toggle .icon-eye-off{display:none !important;}
.login-card .login-password-toggle.is-visible .icon-eye{display:none !important;}
.login-card .login-password-toggle.is-visible .icon-eye-off{display:block !important;}


/* ===== V9 modifications demandées ===== */
.sidebar nav a.active,
.sidebar nav a.active:hover {
    background: #4FB555 !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(79,181,85,.28) !important;
}

.quote-line input[readonly],
.quote-line input.locked-field {
    background: #E9EEF5 !important;
    color: #475569 !important;
    border-color: #CBD5E1 !important;
    cursor: not-allowed !important;
    font-weight: 700 !important;
}

.quote-line .line-total {
    background: #E2E8F0 !important;
}

.quote-line .stock-remaining-field {
    background: #F8FAFC !important;
    color: #0D2F68 !important;
    border-color: #D7E1EE !important;
}

.quote-line .security-note {
    grid-column: 1 / -1;
    font-size: 11px;
    color: #64748B;
    margin-top: -3px;
}

@media (min-width: 1201px) {
    .quote-line {
        grid-template-columns: 95px 1.4fr 105px 70px 92px 90px 90px 80px 85px 95px auto !important;
    }
}


/* Carte réseau */
.network-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr);gap:22px;align-items:start;}
.network-map-panel{overflow:hidden;}
.network-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;font-weight:800;color:var(--primary);}
.network-legend span{display:inline-flex;align-items:center;gap:7px;background:#F6F8FC;border:1px solid var(--border);border-radius:999px;padding:7px 10px;}
.network-legend i{width:13px;height:13px;border-radius:50%;display:inline-block;}
.network-legend .base,.dep-base{fill:#0D2F68;background:#0D2F68;}
.network-legend .revendeur,.dep-revendeur{fill:#4FB555;background:#4FB555;}
.network-legend .apporteur,.dep-apporteur{fill:#F2B84B;background:#F2B84B;}
.network-legend .empty,.dep-empty{fill:#E5EAF2;background:#E5EAF2;}
.france-network-map{width:100%;height:auto;max-height:760px;background:linear-gradient(180deg,#f8fbff,#eef4fb);border:1px solid var(--border);border-radius:22px;}
.france-background{pointer-events:none;}
.france-mainland,.france-corsica{fill:#FFFFFF;stroke:#C8D4E3;stroke-width:3;filter:drop-shadow(0 12px 18px rgba(13,47,104,.10));}
.france-coast,.france-border-line{fill:none;stroke:#DDE5F0;stroke-width:2;stroke-linecap:round;stroke-dasharray:9 10;opacity:.9;}
.dep-link{cursor:pointer;text-decoration:none;}
.dep-link text{font-size:13px;font-weight:900;fill:#0D2F68;pointer-events:none;}
.dep-dot{stroke:#fff;stroke-width:3;filter:drop-shadow(0 4px 8px rgba(13,47,104,.18));transition:.15s ease;}
.dep-link:hover .dep-dot{stroke:#0D2F68;stroke-width:4;transform:scale(1.08);transform-origin:center;}
.dep-link{text-decoration:none;cursor:pointer;}
.dep-dot{stroke:#fff;stroke-width:3;filter:drop-shadow(0 5px 7px rgba(13,47,104,.16));transition:.15s ease;}
.dep-link text{font-size:13px;font-weight:900;fill:#0D2F68;pointer-events:none;}
.dep-link:hover .dep-dot{stroke:#0D2F68;stroke-width:4;transform:scale(1.12);transform-origin:center;}
.network-side h2{margin-top:0;}
.network-form{display:grid;gap:10px;}
.network-form label{font-weight:800;color:var(--primary);font-size:13px;}
.network-form input,.network-form select,.network-form textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:11px 12px;background:#fff;font:inherit;}
.network-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
.network-dep-card{border:1px solid var(--border);border-radius:18px;padding:16px;background:#fff;transition:.2s ease;}
.network-dep-card.highlight{box-shadow:0 0 0 4px rgba(79,181,85,.18);border-color:#4FB555;}
.network-dep-card h3{margin:0 0 10px;color:var(--primary);}
.network-person{border-left:5px solid #E5EAF2;background:#F8FAFD;border-radius:14px;padding:11px 12px;margin-top:10px;}
.network-person.type-base{border-left-color:#0D2F68;}
.network-person.type-revendeur{border-left-color:#4FB555;}
.network-person.type-apporteur{border-left-color:#F2B84B;}
.network-person strong{display:block;color:var(--primary);}
.network-person span,.network-person small{display:block;color:#536175;margin-top:3px;}
.network-person p{margin:8px 0 0;color:#344154;}
.network-actions{display:flex;gap:8px;margin-top:10px;align-items:center;}
.network-actions form{margin:0;}
@media(max-width:1100px){.network-layout{grid-template-columns:1fr}.france-network-map{max-height:none}}
/* Carte réseau - Google Maps */
.jtlm-google-map{width:100%;height:680px;min-height:520px;border:1px solid var(--border);border-radius:22px;overflow:hidden;background:#eef4fb;box-shadow:0 14px 30px rgba(13,47,104,.08);}
.google-map-fallback{position:relative;border:1px solid var(--border);border-radius:22px;overflow:hidden;background:#eef4fb;box-shadow:0 14px 30px rgba(13,47,104,.08);}
.google-map-fallback iframe{width:100%;height:680px;min-height:520px;border:0;display:block;}
.map-api-warning{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:16px;padding:14px 16px;color:#26354a;box-shadow:0 10px 25px rgba(13,47,104,.14);font-size:14px;line-height:1.45;}
.map-api-warning code{background:#F1F5FA;border:1px solid #DDE7F2;border-radius:7px;padding:2px 6px;color:#0D2F68;}
.map-help{margin:12px 0 0;color:#536175;font-size:13px;}
.map-info-window{min-width:190px;color:#243247;font-size:13px;line-height:1.5;}
.map-info-window strong{display:block;color:#0D2F68;font-size:15px;margin-bottom:2px;}
.map-info-window span{font-weight:800;color:#4FB555;}
@media(max-width:700px){.jtlm-google-map,.google-map-fallback iframe{height:480px;min-height:420px}.map-api-warning{position:static;border-radius:0;border-left:0;border-right:0;border-bottom:0;}}

/* Carte réseau Leaflet avec départements */
.jtlm-leaflet-map{width:100%;height:720px;min-height:560px;border:1px solid var(--border);border-radius:22px;overflow:hidden;background:#eef4fb;box-shadow:0 14px 30px rgba(13,47,104,.08);z-index:1;}
.jtlm-leaflet-map .leaflet-popup-content-wrapper{border-radius:14px;box-shadow:0 14px 30px rgba(13,47,104,.18);}
.jtlm-leaflet-map .leaflet-popup-content{margin:14px 16px;}
.jtlm-network-marker-wrap{background:transparent;border:0;}
.jtlm-network-marker{width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:11px;border:2px solid #fff;box-shadow:0 8px 18px rgba(13,47,104,.28);}
.jtlm-network-marker{line-height:1;}
.jtlm-network-marker{position:relative;}
.jtlm-network-marker{font-family:inherit;}
.map-info-window.dep-popup{min-width:230px;}
.dep-counts{display:grid;gap:4px;margin:9px 0;padding:9px;background:#F5F8FC;border-radius:10px;color:#26354a;font-size:12px;font-weight:800;}
.dep-popup-list{border-top:1px solid #E1E8F0;padding-top:8px;margin-top:8px;}
.dep-partner-line{border-left:4px solid #E5EAF2;padding:6px 0 6px 8px;margin-top:6px;background:#FAFCFF;border-radius:8px;}
.dep-partner-line.type-base{border-left-color:#0D2F68;}
.dep-partner-line.type-revendeur{border-left-color:#4FB555;}
.dep-partner-line.type-apporteur{border-left-color:#F2B84B;}
.leaflet-map-warning{background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:#26354a;font-size:13px;box-shadow:0 8px 18px rgba(13,47,104,.14);}
@media(max-width:700px){.jtlm-leaflet-map{height:500px;min-height:420px}}

/* ===== V15 correction carte réseau Leaflet stable ===== */
.network-layout{align-items:start !important; overflow:visible !important;}
.network-map-panel{overflow:visible !important; position:relative !important;}
.jtlm-leaflet-map{
    display:block !important;
    width:100% !important;
    height:640px !important;
    min-height:640px !important;
    max-height:none !important;
    border:1px solid var(--border) !important;
    border-radius:20px !important;
    overflow:hidden !important;
    background:#EAF1F8 !important;
    position:relative !important;
    z-index:0 !important;
    box-sizing:border-box !important;
}
.jtlm-leaflet-map .leaflet-container,
.leaflet-container.jtlm-leaflet-map{background:#EAF1F8 !important;}
.jtlm-leaflet-map .leaflet-pane,
.jtlm-leaflet-map .leaflet-top,
.jtlm-leaflet-map .leaflet-bottom{z-index:auto !important;}
.jtlm-leaflet-map .leaflet-tile-pane{z-index:200 !important;}
.jtlm-leaflet-map .leaflet-overlay-pane{z-index:400 !important;}
.jtlm-leaflet-map .leaflet-marker-pane{z-index:600 !important;}
.jtlm-leaflet-map .leaflet-popup-pane{z-index:700 !important;}
.jtlm-leaflet-map .leaflet-control-container{position:relative !important; z-index:800 !important;}
.leaflet-map-warning.static{position:absolute;left:18px;right:18px;top:18px;z-index:2;}
@media(max-width:1100px){.network-layout{grid-template-columns:1fr !important;}.jtlm-leaflet-map{height:560px !important;min-height:560px !important;}}
@media(max-width:700px){.jtlm-leaflet-map{height:460px !important;min-height:460px !important;border-radius:16px !important;}}


/* ===== V16 : mot de passe oublié, favicon menu et champs verrouillés ===== */
.sidebar-logo-mini {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 46px !important;
    max-width: 46px !important;
}
.sidebar-logo-full {
    opacity: 0 !important;
    visibility: hidden !important;
}
.sidebar:hover .sidebar-logo-full {
    opacity: 1 !important;
    visibility: visible !important;
}
.sidebar:hover .sidebar-logo-mini {
    opacity: 0 !important;
    visibility: hidden !important;
}
.quote-line input[readonly],
.quote-line input.locked-field,
.quote-line .stock-remaining-field {
    pointer-events: none !important;
    user-select: none !important;
    caret-color: transparent !important;
    outline: none !important;
}
.network-layout-viewer {
    grid-template-columns: minmax(0, 1fr) !important;
}
.network-layout-viewer .network-map-panel {
    width: 100% !important;
}
.forgot-password-link,
.login-back-link {
    display: block;
    margin-top: 16px;
    text-align: center;
    color: var(--primary);
    font-weight: 800;
    text-decoration: none;
}
.forgot-password-link:hover,
.login-back-link:hover { text-decoration: underline; }
.password-rules {
    display: block;
    margin: 8px 0 14px;
    color: var(--muted);
    line-height: 1.45;
}
.login-full-btn {
    width: 100%;
    display: flex !important;
    justify-content: center;
    margin-top: 16px;
}

/* =====================================================================
   V18 — RESPONSIVE COMPLET FINAL
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
textarea { width: 100%; resize: vertical; }
.mobile-menu-toggle,
.mobile-menu-close,
.mobile-sidebar-overlay { display: none; }

@media (max-width: 1100px) {
    :root { --mobile-header-height: 66px; }

    body { padding-top: var(--mobile-header-height); }
    body.mobile-menu-open { overflow: hidden; }

    .mobile-menu-toggle {
        display: flex;
        position: fixed;
        z-index: 1202;
        top: 12px;
        left: 14px;
        width: 44px;
        height: 42px;
        margin: 0;
        padding: 10px;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        border-radius: 12px;
        background: var(--primary);
        box-shadow: 0 8px 22px rgba(13,47,104,.25);
    }
    .mobile-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 3px;
        background: #fff;
    }
    .mobile-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1198;
        background: rgba(2, 12, 30, .55);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        backdrop-filter: blur(2px);
    }
    body.mobile-menu-open .mobile-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-menu-close {
        display: grid;
        place-items: center;
        position: absolute;
        top: 13px;
        right: 12px;
        width: 38px;
        height: 38px;
        margin: 0;
        padding: 0;
        border-radius: 11px;
        background: rgba(255,255,255,.12);
        box-shadow: none;
        font-size: 28px;
        line-height: 1;
    }

    .sidebar,
    .sidebar:hover {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1200 !important;
        width: min(88vw, 330px) !important;
        min-width: min(88vw, 330px) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 16px 14px 24px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(-105%);
        transition: transform .22s ease !important;
        box-shadow: 18px 0 45px rgba(2,12,30,.28);
    }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar-logo {
        width: calc(100% - 48px) !important;
        height: 72px !important;
        min-height: 72px !important;
        margin: 0 48px 18px 0 !important;
        padding: 10px 14px !important;
    }
    .sidebar-logo-full,
    .sidebar:hover .sidebar-logo-full {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        max-width: 190px !important;
        min-width: 0 !important;
        max-height: 52px !important;
        object-fit: contain;
    }
    .sidebar-logo-mini,
    .sidebar:hover .sidebar-logo-mini { display: none !important; }
    .sidebar nav { display: block !important; }
    .sidebar nav a,
    .sidebar:hover nav a {
        display: flex !important;
        align-items: center !important;
        gap: 13px !important;
        width: 100% !important;
        min-height: 48px;
        margin: 0 0 7px !important;
        padding: 12px 13px !important;
        text-align: left !important;
        overflow: visible !important;
    }
    .sidebar nav a span,
    .sidebar:hover nav a span {
        display: inline !important;
        opacity: 1 !important;
        visibility: visible !important;
        white-space: normal !important;
    }
    .sidebar nav a svg { flex: 0 0 22px; }

    .content,
    .sidebar:hover ~ .content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: 16px !important;
    }
    .topbar {
        padding: 20px !important;
        border-radius: 18px !important;
        align-items: stretch !important;
    }
    .topbar-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 9px !important;
    }
    .topbar-actions > *,
    .topbar-actions form,
    .topbar-actions .btn,
    .topbar-actions button { width: 100%; margin: 0 !important; }

    .panel { padding: 20px !important; border-radius: 18px !important; }
    .info-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
    .filters,
    .filters-one-line,
    .user-form,
    .user-filter-form,
    .devis-filter-form,
    .settings-grid,
    .quote-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .quote-full { grid-column: 1 / -1; }

    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 900px; }

    .quote-line {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 11px !important;
        padding: 15px !important;
    }
    .quote-line-designation,
    .quote-line .security-note { grid-column: 1 / -1 !important; }
    .quote-line > button { width: 100%; align-self: end; }
    .quote-summary { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .quote-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
    .quote-actions .btn { width: 100%; margin: 0; }

    .product-drawer { width: min(94vw, 560px) !important; }
    .drawer-product { grid-template-columns: 72px minmax(0,1fr) auto !important; }

    .network-layout { grid-template-columns: 1fr !important; }
    .jtlm-leaflet-map { height: 540px !important; min-height: 540px !important; }
    .network-list { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 700px) {
    body { padding-top: 62px; }
    .content,
    .sidebar:hover ~ .content { padding: 10px !important; }
    h1 { font-size: clamp(23px, 7vw, 29px) !important; }
    h2 { font-size: 20px; }
    .topbar { padding: 16px !important; margin-bottom: 14px !important; }
    .topbar-actions { grid-template-columns: 1fr !important; }
    .panel { padding: 15px !important; margin-bottom: 14px !important; }
    .login-bg { padding: 14px; align-items: flex-start; }
    .login-card,
    .install-card { margin-top: 18px; padding: 22px 18px !important; border-radius: 20px !important; }
    .login-logo { max-width: 180px; }

    input, select, textarea { font-size: 16px !important; min-height: 46px; }
    .btn, button { min-height: 44px; }

    .info-grid,
    .filters,
    .filters-one-line,
    .user-form,
    .user-filter-form,
    .devis-filter-form,
    .settings-grid,
    .quote-grid,
    .quote-line,
    .quote-summary,
    .quote-actions,
    .network-list { grid-template-columns: 1fr !important; }
    .info-card { padding: 15px !important; }

    /* Tables transformées en cartes sans débordement */
    .table-wrapper { background: transparent; border: 0; box-shadow: none; overflow: visible; }
    table, .users-table, .devis-list-table { min-width: 0 !important; width: 100% !important; }
    thead { display: none !important; }
    tbody, tr, td { display: block !important; width: 100% !important; }
    tbody tr {
        margin: 0 0 12px !important;
        padding: 11px !important;
        border: 1px solid var(--border) !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 7px 18px rgba(15,23,42,.06) !important;
    }
    td {
        display: grid !important;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 10px !important;
        padding: 8px 4px !important;
        border: 0 !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }
    td::before {
        content: attr(data-label) !important;
        display: block;
        color: var(--muted);
        font-size: 10px !important;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    td:empty { display: none !important; }
    .photo-cell img { width: 96px !important; height: 70px !important; }
    .action-buttons, .mini-form { width: 100%; display: grid !important; grid-template-columns: 1fr !important; }
    .action-buttons > *, .mini-form > * { width: 100% !important; }

    .quote-products-header .btn { width: 100%; }
    .quote-line { border-radius: 16px !important; }
    .quote-line-designation { grid-column: auto !important; }
    .quote-summary div { min-height: 82px; }

    .product-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }
    .product-drawer-header { padding: 15px !important; }
    .drawer-search { margin: 0 14px 12px !important; width: calc(100% - 28px) !important; }
    .drawer-product {
        grid-template-columns: 62px minmax(0,1fr) !important;
        gap: 10px !important;
    }
    .drawer-product > button { grid-column: 1 / -1; width: 100%; }
    .drawer-product-image { width: 62px !important; height: 62px !important; }

    .jtlm-leaflet-map { height: 430px !important; min-height: 430px !important; border-radius: 14px !important; }
    .network-legend { gap: 7px !important; }
    .network-legend span { font-size: 11px; padding: 6px 8px; }
    .network-actions { flex-direction: column; align-items: stretch !important; }
    .network-actions > *, .network-actions .btn { width: 100%; }

    .import-report { grid-template-columns: 1fr !important; }
    .profile-panel { max-width: none; }
}

@media (max-width: 390px) {
    .content { padding: 8px !important; }
    .panel, .topbar { padding: 13px !important; }
    td { grid-template-columns: 86px minmax(0,1fr) !important; }
    .jtlm-leaflet-map { height: 380px !important; min-height: 380px !important; }
}

@media print {
    .mobile-menu-toggle,
    .mobile-menu-close,
    .mobile-sidebar-overlay { display: none !important; }
}


/* =====================================================================
   V19 — CONNEXION MOBILE ET CATALOGUE COMPACT
   ===================================================================== */

/* Les pages d'authentification ne doivent pas hériter de l'en-tête mobile. */
body.login-bg {
    padding-top: max(18px, env(safe-area-inset-top)) !important;
    padding-right: max(18px, env(safe-area-inset-right)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    padding-left: max(18px, env(safe-area-inset-left)) !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}
.login-card {
    margin: auto !important;
}
.login-card form > .btn {
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (max-width: 700px) {
    body.login-bg {
        display: grid !important;
        place-items: center !important;
        align-items: center !important;
        padding-top: max(14px, env(safe-area-inset-top)) !important;
        padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    }
    .login-card,
    .install-card {
        width: min(100%, 430px) !important;
        margin: 0 auto !important;
        padding: clamp(20px, 6vw, 28px) !important;
        border-radius: 20px !important;
        box-shadow: 0 18px 48px rgba(0,0,0,.22) !important;
    }
    .login-card .login-logo {
        display: block;
        width: min(62vw, 190px) !important;
        max-width: 190px !important;
        height: auto !important;
        margin: 0 auto 14px !important;
    }
    .login-card h1 {
        text-align: center;
        font-size: clamp(25px, 8vw, 31px) !important;
        line-height: 1.08;
        margin-bottom: 7px !important;
    }
    .login-card > p {
        text-align: center;
        margin: 0 0 20px !important;
        font-size: 14px;
    }
    .login-card label {
        margin-top: 13px;
        font-size: 14px;
    }
    .login-card input {
        min-height: 48px !important;
        border-radius: 11px !important;
    }
    .login-card .btn {
        min-height: 48px !important;
        margin-top: 18px !important;
    }
    .forgot-password-link,
    .login-back-link {
        margin-top: 14px !important;
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    body.login-bg {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .login-card,
    .install-card {
        padding: 18px 15px !important;
        border-radius: 16px !important;
    }
    .login-card .login-logo { max-width: 160px !important; }
}

/* Catalogue téléphone : fiche compacte en grille, sans une ligne par information. */
@media (max-width: 700px) {
    #productTable tbody tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) auto !important;
        grid-template-areas:
            "photo code action"
            "photo designation designation"
            "photo category category"
            "prices prices availability" !important;
        gap: 5px 10px !important;
        padding: 10px !important;
        margin-bottom: 9px !important;
        border-radius: 14px !important;
        min-height: 0 !important;
    }
    #productTable tbody tr > td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        line-height: 1.28 !important;
    }
    #productTable tbody tr > td::before {
        display: none !important;
        content: none !important;
    }
    #productTable .photo-cell {
        grid-area: photo;
        align-self: start;
    }
    #productTable .photo-cell img {
        display: block;
        width: 72px !important;
        height: 72px !important;
        object-fit: cover;
        border-radius: 10px;
    }
    #productTable .catalogue-code {
        grid-area: code;
        align-self: center;
        color: var(--primary);
        font-size: 13px;
        padding-top: 1px !important;
    }
    #productTable .catalogue-code strong { font-size: 13px !important; }
    #productTable .catalogue-designation {
        grid-area: designation;
        font-size: 13px;
        font-weight: 700;
        color: var(--dark);
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    #productTable .catalogue-category {
        grid-area: category;
    }
    #productTable .catalogue-category .category-pill {
        max-width: 100% !important;
        padding: 3px 8px !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }
    #productTable .catalogue-price-ht,
    #productTable .catalogue-price-ttc,
    #productTable .catalogue-stock {
        display: inline-flex !important;
        align-items: center;
        width: auto !important;
        margin-right: 10px;
        font-size: 12px;
        white-space: nowrap;
    }
    #productTable .catalogue-price-ht { grid-area: prices; font-weight: 850; color: var(--primary); }
    #productTable .catalogue-price-ht::after { content: " HT"; font-size: 9px; margin-left: 2px; color: var(--muted); }
    #productTable .catalogue-price-ttc {
        grid-area: prices;
        margin-left: 86px;
        color: var(--muted);
    }
    #productTable .catalogue-price-ttc::after { content: " TTC"; font-size: 9px; margin-left: 2px; }
    #productTable .catalogue-stock {
        grid-area: prices;
        margin-left: 186px;
        color: var(--muted);
    }
    #productTable .catalogue-stock::before {
        display: inline !important;
        content: "Stock " !important;
        margin-right: 3px;
        font-size: 9px !important;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--muted);
    }
    #productTable .catalogue-availability {
        grid-area: availability;
        justify-self: end;
        align-self: center;
    }
    #productTable .catalogue-availability .badge {
        padding: 4px 7px !important;
        font-size: 9px !important;
        white-space: nowrap;
    }
    #productTable .catalogue-action {
        grid-area: action;
        align-self: start;
        justify-self: end;
    }
    #productTable .catalogue-action .arrow-button {
        width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 9px !important;
        font-size: 16px;
    }
}

@media (max-width: 430px) {
    #productTable tbody tr {
        grid-template-columns: 64px minmax(0, 1fr) auto !important;
        gap: 4px 8px !important;
        padding: 9px !important;
    }
    #productTable .photo-cell img {
        width: 64px !important;
        height: 64px !important;
    }
    #productTable .catalogue-price-ttc { margin-left: 78px; }
    #productTable .catalogue-stock { margin-left: 164px; }
}

@media (max-width: 365px) {
    #productTable tbody tr {
        grid-template-areas:
            "photo code action"
            "photo designation designation"
            "photo category category"
            "prices prices prices"
            "availability availability availability" !important;
    }
    #productTable .catalogue-availability {
        justify-self: start;
        margin-top: 2px;
    }
    #productTable .catalogue-price-ttc { margin-left: 74px; }
    #productTable .catalogue-stock { margin-left: 152px; }
}

/* =====================================================================
   V20 — CATALOGUE MOBILE : ANTI-CHEVAUCHEMENT
   ===================================================================== */
@media (max-width: 700px) {
    #productTable tbody tr {
        grid-template-columns: 72px minmax(0, 1fr) minmax(92px, auto) !important;
        grid-template-areas:
            "photo code action"
            "photo designation designation"
            "photo category category"
            "photo priceht availability"
            "photo pricettc stock" !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    #productTable .catalogue-code,
    #productTable .catalogue-designation,
    #productTable .catalogue-category,
    #productTable .catalogue-price-ht,
    #productTable .catalogue-price-ttc,
    #productTable .catalogue-stock,
    #productTable .catalogue-availability {
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    #productTable .catalogue-price-ht {
        grid-area: priceht !important;
        justify-self: start;
    }

    #productTable .catalogue-price-ttc {
        grid-area: pricettc !important;
        justify-self: start;
    }

    #productTable .catalogue-stock {
        grid-area: stock !important;
        justify-self: end;
        text-align: right;
    }

    #productTable .catalogue-availability {
        grid-area: availability !important;
        justify-self: end !important;
        align-self: center !important;
        max-width: 100% !important;
    }

    #productTable .catalogue-availability .badge {
        display: inline-flex !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }

    #productTable .catalogue-category .category-pill {
        display: inline-flex !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #productTable .catalogue-designation {
        line-height: 1.25 !important;
    }
}

@media (max-width: 430px) {
    #productTable tbody tr {
        grid-template-columns: 64px minmax(0, 1fr) minmax(82px, auto) !important;
    }
}

@media (max-width: 365px) {
    #productTable tbody tr {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        grid-template-areas:
            "photo code"
            "photo designation"
            "photo category"
            "priceht availability"
            "pricettc stock"
            "action action" !important;
    }

    #productTable .photo-cell img {
        width: 58px !important;
        height: 58px !important;
    }

    #productTable .catalogue-action {
        grid-area: action !important;
        justify-self: end !important;
        margin-top: 2px !important;
    }
}


/* =====================================================================
   V21 — CATALOGUE MOBILE : FILTRES + QUANTITÉ DE STOCK
   ===================================================================== */
#productTable tbody tr.catalogue-filtered-out,
#productTable tbody tr[hidden] {
    display: none !important;
}

@media (max-width: 700px) {
    #productTable tbody tr {
        grid-template-columns: 72px minmax(0, 1fr) minmax(108px, auto) !important;
        grid-template-areas:
            "photo code action"
            "photo designation designation"
            "photo category category"
            "photo priceht availability"
            "photo pricettc stock" !important;
        overflow: visible !important;
    }

    #productTable .catalogue-stock {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        min-width: 92px !important;
        width: 100% !important;
        padding: 4px 7px !important;
        border-radius: 8px !important;
        background: #f2f5f9 !important;
        color: var(--dark) !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    #productTable .catalogue-stock::before {
        display: inline !important;
        content: "Stock :" !important;
        margin: 0 !important;
        color: var(--muted) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: none !important;
    }
}

@media (max-width: 430px) {
    #productTable tbody tr {
        grid-template-columns: 64px minmax(0, 1fr) minmax(96px, auto) !important;
    }
}

@media (max-width: 365px) {
    #productTable tbody tr {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        grid-template-areas:
            "photo code"
            "photo designation"
            "photo category"
            "priceht availability"
            "pricettc stock"
            "action action" !important;
    }

    #productTable .catalogue-stock {
        min-width: 0 !important;
    }
}

/* =====================================================================
   V22 — ICÔNE DU MENU : visible uniquement lorsque le menu est replié
   ===================================================================== */
@media (min-width: 1101px) {
    .sidebar:not(:hover) .sidebar-logo-mini {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .sidebar:hover .sidebar-logo-mini,
    .sidebar:focus-within .sidebar-logo-mini,
    .sidebar.mobile-open .sidebar-logo-mini {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .sidebar:hover .sidebar-logo-full,
    .sidebar:focus-within .sidebar-logo-full,
    .sidebar.mobile-open .sidebar-logo-full {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (max-width: 1100px) {
    .sidebar-logo-mini,
    .sidebar:hover .sidebar-logo-mini,
    .sidebar.mobile-open .sidebar-logo-mini {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .sidebar-logo-full,
    .sidebar:hover .sidebar-logo-full,
    .sidebar.mobile-open .sidebar-logo-full {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ===== V10 devis : grille stock fixe + transport ===== */
.quote-line{grid-template-columns:110px minmax(180px,1.5fr) 90px 115px 65px 90px 90px 85px 85px 100px auto!important;}
.catalogue-stock-fixed{font-weight:900!important;color:#0D2F68!important;background:#EAF0F8!important;text-align:center;}
.catalogue-public-price{font-weight:800;color:#0D2F68;background:#F3F7FC;}
@media(max-width:1450px){.quote-line{grid-template-columns:repeat(3,minmax(0,1fr))!important}.quote-line-designation{grid-column:span 2}.quote-line>button{width:100%;}}
@media(max-width:760px){.quote-line{grid-template-columns:1fr!important}.quote-line-designation{grid-column:auto}.quote-line>button{width:100%;}}
/* Module commandes revendeurs V11 */
.order-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:22px;align-items:start}.order-products,.order-summary{background:#fff;border-radius:18px;padding:20px}.order-summary{position:sticky;top:20px}.order-toolbar{display:flex;gap:15px;align-items:center;margin-bottom:16px}.order-toolbar input{flex:1}.order-toolbar span{font-size:13px;font-weight:700;color:#64748b}.order-product-list{display:grid;gap:10px;max-height:72vh;overflow:auto;padding-right:5px}.order-product{display:grid;grid-template-columns:minmax(280px,1fr) 280px 130px;align-items:center;gap:16px;padding:14px;border:1px solid #e2e8f0;border-radius:14px}.order-product[hidden]{display:none}.order-product-main{display:flex;align-items:center;gap:12px;min-width:0}.order-product-main img{width:58px;height:58px;object-fit:cover;border-radius:10px;background:#f8fafc}.order-product-main div{display:grid;min-width:0}.order-product-main span{font-size:13px;overflow:hidden;text-overflow:ellipsis}.order-product-main small{color:#64748b;margin-top:4px}.order-prices{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:12px}.order-prices span{display:grid;color:#64748b}.saving{color:#238636!important}.order-prices .saving{grid-column:1/-1;font-weight:700}.qty-control{display:grid;grid-template-columns:34px 54px 34px;justify-content:end}.qty-control button,.qty-control input{height:38px;border:1px solid #cbd5e1;text-align:center;background:#fff}.qty-control button:first-child{border-radius:9px 0 0 9px}.qty-control button:last-child{border-radius:0 9px 9px 0}.qty-control input{border-left:0;border-right:0;width:54px}.order-summary h2{margin-top:0}.cart-empty{padding:22px 0;color:#64748b;text-align:center}.cart-line{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #edf2f7}.cart-line div{display:grid}.cart-line span,.cart-line small{font-size:12px;color:#64748b}.order-totals{margin:18px 0;border-top:2px solid #e2e8f0;padding-top:12px}.order-totals p{display:flex;justify-content:space-between;margin:8px 0}.order-totals .grand{font-size:18px;color:#0d2f68;border-top:1px solid #e2e8f0;padding-top:12px}.order-summary label{display:grid;gap:7px;margin:13px 0;font-weight:700;font-size:13px}.order-summary select,.order-summary textarea{width:100%}.order-submit{width:100%;margin-top:8px}.order-note{display:block;color:#64748b;line-height:1.5;margin-top:12px}.alert{padding:14px 16px;border-radius:12px;margin-bottom:16px}.alert.success{background:#eaf8ef;color:#176b38}.alert.error{background:#fff0f0;color:#a32121}@media(max-width:1100px){.order-layout{grid-template-columns:1fr}.order-summary{position:static}.order-product{grid-template-columns:1fr 220px 125px}}@media(max-width:760px){.order-product{grid-template-columns:1fr}.order-prices{grid-template-columns:1fr 1fr}.qty-control{justify-content:start}.order-toolbar{align-items:stretch;flex-direction:column}.order-product-list{max-height:none}.order-products,.order-summary{padding:14px}}


/* Module commandes revendeurs V12 : catalogue latéral et lignes de commande */
.order-builder-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:22px;align-items:start}
.order-cart-panel{background:#fff;border-radius:18px;padding:22px;min-width:0}
.order-cart-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.order-cart-heading h2{margin:0 0 4px}.order-cart-heading p{margin:0;color:#64748b}
.order-empty-state{min-height:260px;border:2px dashed #d9e2ec;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;color:#64748b;background:#f8fafc;padding:24px}
.order-empty-state strong{font-size:18px;color:#0d2f68}.order-empty-state[hidden]{display:none!important}
.order-lines{display:grid;gap:12px}
.order-line-card{display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(330px,1fr) auto;align-items:center;gap:18px;border:1px solid #e2e8f0;border-radius:15px;padding:14px;background:#fff}
.order-line-product{display:flex;align-items:center;gap:12px;min-width:0}.order-line-product img{width:64px;height:64px;object-fit:cover;border-radius:11px;background:#f8fafc}.order-line-product>div{display:grid;min-width:0}.order-line-product span{font-size:13px;overflow:hidden;text-overflow:ellipsis}.order-line-product small{color:#64748b;margin-top:4px}
.order-line-info{display:grid;grid-template-columns:repeat(4,minmax(80px,1fr));gap:8px}.order-line-info span{display:grid;font-size:11px;color:#64748b}.order-line-info b{font-size:12px;color:#1e293b;margin-top:3px}
.order-line-actions{display:grid;grid-template-columns:auto minmax(90px,auto) 34px;align-items:center;gap:10px}.order-line-actions>strong{text-align:right;color:#0d2f68}.order-remove{width:34px;height:34px;border:0;border-radius:9px;background:#fff0f0;color:#a32121;font-size:21px;cursor:pointer}
.order-product-drawer .drawer-product-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.order-product-drawer .drawer-product-meta .saving{font-style:normal}
.command-status-form{margin:0}.command-status-form select{min-width:155px;padding:8px 32px 8px 10px;font-size:12px;font-weight:700}
@media(max-width:1250px){.order-line-card{grid-template-columns:1fr}.order-line-actions{grid-template-columns:auto 1fr 34px}.order-line-info{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1100px){.order-builder-layout{grid-template-columns:1fr}.order-summary{position:static}}
@media(max-width:700px){.order-cart-panel{padding:14px}.order-cart-heading{align-items:stretch;flex-direction:column}.order-cart-heading .btn{width:100%}.order-line-info{grid-template-columns:repeat(2,1fr)}.order-line-actions{grid-template-columns:auto 1fr 34px}.order-line-product img{width:54px;height:54px}}

/* V13 - quantité commande en saisie directe */
.qty-control.qty-input-only{display:block!important;}
.qty-control.qty-input-only input{width:90px;min-width:90px;text-align:center;border-radius:10px!important;}


/* V14 - finition lignes commande revendeur */
.order-line-actions{grid-template-columns:100px minmax(105px,auto) 40px!important;justify-content:end;align-items:center;}
.qty-control.qty-input-only{display:flex!important;align-items:center;justify-content:center;}
.qty-control.qty-input-only input{box-sizing:border-box!important;width:92px!important;min-width:92px!important;height:40px!important;border:1px solid #b9c7d8!important;border-radius:10px!important;background:#fff!important;box-shadow:inset 0 0 0 1px rgba(13,47,104,.03);font-weight:700;color:#0d2f68;}
.order-remove{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;line-height:1!important;font-size:23px!important;}
/* Devis : Stock plus compact, disponibilité plus lisible */
.quote-line{grid-template-columns:110px minmax(180px,1.5fr) 90px 72px 108px 90px 90px 85px 85px 100px auto!important;}
@media(max-width:1450px){.quote-line{grid-template-columns:repeat(3,minmax(0,1fr))!important}}


/* ===== V17 : remise revendeur et devis client automatique ===== */
.discount-rate{font-weight:800!important;color:#0D2F68!important;background:#EAF0F8;padding:4px 8px;border-radius:999px;display:inline-flex!important;width:max-content}
.client-self-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 22px}
.client-self-summary>div{background:#F7F9FC;border:1px solid #DDE5F0;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.client-self-summary span{font-size:12px;color:#667085;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.client-self-summary strong{color:#0D2F68;overflow-wrap:anywhere}
.client-self-summary small{color:#667085}
.client-quote-options{margin-bottom:20px}
@media(max-width:1100px){.client-self-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.client-self-summary{grid-template-columns:1fr}}

/* =====================================================================
   V22 — RESPONSIVE UNIFIÉ FINAL
   Mobile 320px+, tablette et grands écrans
   ===================================================================== */
:root{--content-max:1800px}
html{scroll-behavior:smooth}
body{min-width:0;overflow-x:hidden}
.content{max-width:var(--content-max);min-width:0}
.content>*{min-width:0}
button,.btn,input,select,textarea{max-width:100%}

@media (min-width:1101px){
  .content{margin-left:280px;padding:clamp(22px,2vw,38px)}
  .topbar{padding:clamp(20px,2vw,30px)}
}

@media (max-width:1100px){
  .content{margin-left:0!important;width:100%!important;padding:18px!important}
  .topbar{flex-direction:column!important;align-items:stretch!important}
  .topbar>div{min-width:0}
  .topbar-actions{justify-content:flex-start!important}
  .info-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .table-wrapper{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .order-builder-layout,.order-layout{grid-template-columns:1fr!important}
  .order-summary{position:static!important}
}

@media (max-width:760px){
  body:not(.login-bg){padding-top:64px!important}
  .content{padding:10px!important}
  .topbar,.panel,.order-products,.order-summary,.order-cart-panel{
    border-radius:16px!important;padding:15px!important
  }
  .topbar{gap:14px!important}
  .topbar-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .topbar-actions>*{width:100%!important;margin:0!important}
  h1{font-size:clamp(22px,7vw,30px)!important;line-height:1.12}
  h2{font-size:clamp(18px,5.6vw,23px)!important}
  p{overflow-wrap:anywhere}
  .info-grid,.filters,.filters-one-line,.user-form,.user-filter-form,
  .devis-filter-form,.settings-grid,.quote-grid,.quote-summary,
  .client-self-summary,.order-line-info{grid-template-columns:1fr!important}
  .btn,button{min-height:44px;touch-action:manipulation}
  input,select,textarea{font-size:16px!important;min-height:46px}

  /* Tous les tableaux deviennent des cartes mobiles. */
  .table-wrapper{overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important}
  .table-wrapper table{display:block!important;min-width:0!important;width:100%!important;table-layout:auto!important}
  .table-wrapper thead{display:none!important}
  .table-wrapper tbody{display:grid!important;gap:12px!important;width:100%!important}
  .table-wrapper tr{display:block!important;width:100%!important;margin:0!important;padding:12px!important;background:#fff!important;border:1px solid var(--border)!important;border-radius:16px!important;box-shadow:0 8px 22px rgba(15,23,42,.06)!important}
  .table-wrapper td{display:grid!important;grid-template-columns:minmax(92px,34%) minmax(0,1fr)!important;gap:10px!important;width:100%!important;padding:8px 2px!important;border:0!important;text-align:left!important;vertical-align:top!important;overflow-wrap:anywhere!important}
  .table-wrapper td::before{content:attr(data-label);font-size:10px;font-weight:850;line-height:1.35;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  .table-wrapper td[data-label=""],.table-wrapper td:not([data-label]){grid-template-columns:1fr!important}
  .table-wrapper td:empty{display:none!important}
  .table-wrapper .photo-cell img{width:100px!important;height:72px!important}
  .table-wrapper .btn,.table-wrapper button,.table-wrapper form{max-width:100%;width:100%;margin:0!important}
  .table-wrapper select,.table-wrapper input{width:100%!important}

  /* Devis et commande */
  .quote-line{grid-template-columns:1fr!important;padding:14px!important}
  .quote-line-designation{grid-column:auto!important}
  .quote-line>button{width:100%!important}
  .order-toolbar{flex-direction:column!important;align-items:stretch!important}
  .order-product{grid-template-columns:1fr!important;padding:13px!important}
  .order-product-main{align-items:flex-start!important}
  .order-prices{grid-template-columns:1fr 1fr!important}
  .order-line-card{grid-template-columns:1fr!important;padding:13px!important}
  .order-line-product{align-items:flex-start!important}
  .order-line-actions{grid-template-columns:1fr 44px!important;align-items:end!important}
  .order-line-actions .qty-control,.order-line-actions .qty-input-only{grid-column:1/2!important;width:100%!important}
  .order-line-actions .qty-control input,.order-line-actions .qty-input-only input{width:100%!important;min-width:0!important}
  .order-remove{grid-column:2/3!important;margin:0!important}
  .cart-line{align-items:flex-start!important}
  .product-drawer{width:100vw!important;max-width:100vw!important;border-radius:0!important}
  .drawer-product{grid-template-columns:58px minmax(0,1fr)!important}
  .drawer-product>button{grid-column:1/-1!important;width:100%!important}

  /* Formulaires admin */
  .action-buttons,.mini-form{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important}
  .action-buttons>*{width:100%!important}
}

@media (max-width:420px){
  .content{padding:8px!important}
  .topbar,.panel,.order-products,.order-summary,.order-cart-panel{padding:13px!important;border-radius:14px!important}
  .info-grid{grid-template-columns:1fr!important}
  .table-wrapper td{grid-template-columns:82px minmax(0,1fr)!important;font-size:13px!important}
  .order-prices{grid-template-columns:1fr!important}
  .mobile-menu-toggle{left:10px!important;top:10px!important}
}

@media (hover:none){
  .sidebar nav a:hover{background:rgba(255,255,255,.08)}
  .sidebar nav a.active{background:var(--secondary)}
  .photo-cell img:hover{transform:none}
}

@media print{
  body{padding-top:0!important;overflow:visible!important}
  .content{margin:0!important;padding:0!important;max-width:none!important}
  .sidebar,.mobile-menu-toggle,.mobile-menu-close,.mobile-sidebar-overlay{display:none!important}
}


/* ===== V23 devis : alertes stock et parcours client ===== */
.quote-line input.availability-order{background:#FEE2E2!important;border-color:#DC2626!important;color:#991B1B!important;font-weight:850!important;}
.quote-line.quote-line-on-order{border-color:#FCA5A5!important;box-shadow:0 0 0 2px rgba(220,38,38,.08)!important;}
.client-quote-intro{margin:-6px 0 18px;color:#526174;max-width:850px;line-height:1.55;}
.quote-line.quote-line-client{grid-template-columns:115px 1.6fr 80px 70px 110px 90px 90px 105px auto!important;}
@media(max-width:1200px){.quote-line.quote-line-client{grid-template-columns:1fr 1fr!important;}}
@media(max-width:760px){.quote-line.quote-line-client{grid-template-columns:1fr!important;}}


/* ===== V24 : interface devis client ===== */
.client-self-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%}
.client-self-summary>div{width:100%}
.client-discount-field{font-weight:800!important;color:#0D2F68!important;background:#EAF0F8!important;text-align:center}
.quote-line-client{grid-template-columns:110px minmax(180px,1.5fr) 90px 72px 108px 90px 90px 90px 100px auto!important}
@media(max-width:1450px){.quote-line-client{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:650px){.client-self-summary{grid-template-columns:1fr!important}}

/* ===== Configurateurs intégrés au Portail Pro ===== */
.configurator-portal-page{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.configurator-portal-header{flex:0 0 auto;margin-bottom:14px}
.configurator-portal-frame-wrap{flex:1;min-height:0;overflow:hidden;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:0 14px 36px rgba(15,23,42,.08)}
.configurator-portal-frame{display:block;width:100%;height:100%;min-height:720px;border:0;background:#f4f7fb}
@media(max-width:760px){
  .configurator-portal-page{height:auto;min-height:100vh;overflow:visible}
  .configurator-portal-header{margin-bottom:10px}
  .configurator-portal-frame-wrap{height:calc(100vh - 145px);min-height:680px;border-radius:14px}
  .configurator-portal-frame{height:100%;min-height:680px}
}