*{box-sizing:border-box}

:root{
    --navy:#080f1b;
    --navy-2:#101a29;
    --blue:#1769e8;
    --blue-dark:#0b55c8;
    --bg:#f4f6f9;
    --border:#dfe4eb;
    --text:#252c36;
    --muted:#7c8797;
}

html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg)}
body{font-size:15px}

.topbar{
    height:122px;
    background:linear-gradient(90deg,#07101c,#0d1420);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 30px 0 24px;
    border-bottom:1px solid #1d2735;
}

.topbar-brand{display:flex;align-items:center;height:100%;gap:28px}
.twyb-logo-header{width:170px;height:105px;object-fit:contain;display:block}
.brand-title{display:flex;align-items:baseline;gap:18px}
.brand-title strong{font-size:45px;letter-spacing:1px}
.brand-title span{font-size:28px;color:#eef2f8}
.topbar-user{display:flex;align-items:center;gap:10px;font-size:16px;color:#eef2f8}
.user-icon{font-size:18px;color:#d8dee8}
.chevron{font-size:22px;margin-left:2px}

.app-shell{display:flex;min-height:calc(100vh - 122px)}
.sidebar{
    width:244px;
    background:linear-gradient(180deg,#0a121e,#0c1522);
    color:#fff;
    flex:0 0 244px;
    border-right:1px solid #1a2533;
}
.sidebar nav{padding-top:14px}
.nav-item{
    height:62px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:0 20px;
    color:#f2f5f9;
    text-decoration:none;
    font-size:16px;
    border-left:4px solid transparent;
}
.nav-item:hover{background:#121e2d}
.nav-item.active{
    background:linear-gradient(90deg,#0e62d7,#176ee8);
    border-left-color:#4ea0ff;
}
.nav-icon{width:20px;text-align:center;font-size:19px}

.main-content{
    flex:1;
    min-width:0;
    background:#fff;
    padding:26px 30px 36px;
}

.page-heading{margin:0 0 20px}
.page-heading h1{font-size:38px;line-height:1;margin:0 0 7px;font-weight:750}
.page-heading p{font-size:18px;color:var(--muted);margin:0}

.orders-card{
    border:1px solid var(--border);
    border-radius:6px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(10,25,45,.03);
}

.toolbar{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 20px;
    border-bottom:1px solid var(--border);
}

.filter-form{margin:0}
.checkbox-label{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    font-weight:500;
    cursor:pointer;
}
.checkbox-label input{
    appearance:none;
    width:18px;
    height:18px;
    border:1px solid #bbc5d1;
    border-radius:3px;
    background:#fff;
    margin:0;
    position:relative;
}
.checkbox-label input:checked{background:var(--blue);border-color:var(--blue)}
.checkbox-label input:checked:after{
    content:"✓";
    position:absolute;
    color:#fff;
    font-size:13px;
    left:3px;
    top:0px;
    font-weight:bold;
}

.refresh-btn{
    border:1px solid #d7dee7;
    background:#fff;
    color:#3b4653;
    border-radius:5px;
    padding:10px 15px;
    font-size:14px;
    cursor:pointer;
}
.refresh-btn span{font-size:20px;vertical-align:-2px;margin-right:6px}
.refresh-btn:hover{background:#f7f9fb}

.orders-table-wrap{overflow-x:auto}
.orders-table{width:100%;border-collapse:collapse;min-width:900px}
.orders-table th{
    background:#f0f2f5;
    color:#303743;
    font-weight:700;
    font-size:13px;
    padding:14px 15px;
    text-align:left;
    border-bottom:1px solid #d7dde5;
}
.orders-table td{
    padding:12px 15px;
    border-bottom:1px solid #e1e5ea;
    color:#3a424e;
    font-size:13px;
    white-space:nowrap;
}
.orders-table tbody tr:hover{background:#fafbfd}

.status-pill{
    display:inline-block;
    padding:7px 12px;
    border-radius:5px;
    font-size:12px;
    font-weight:700;
}
.status-pill.pending{background:#edf0f4;color:#586574}
.status-pill.paid{background:#e5efff;color:#1762cc}
.status-pill.built{background:#fff0d2;color:#c16400}
.status-pill.sent{background:#e9e3ff;color:#523aa2}
.status-pill.delivered{background:#dff4e7;color:#17824b}
.status-pill.canceled{background:#ffe0e0;color:#b51d1d}

.view-btn{
    width:43px;
    height:32px;
    border:1px solid #2b79ef;
    border-radius:5px;
    color:#1264dc;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:11px;
}
.view-btn:hover{background:#eef5ff}

.empty{text-align:center!important;color:var(--muted)!important;padding:35px!important}

.orders-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:68px;
    padding:0 20px;
}
.pagination{display:flex;gap:0}
.pagination button{
    min-width:40px;
    height:38px;
    border:1px solid #dce2e9;
    border-right:0;
    background:#fff;
    color:#4b5562;
    cursor:pointer;
}
.pagination button:first-child{border-radius:5px 0 0 5px}
.pagination button:last-child{border-right:1px solid #dce2e9;border-radius:0 5px 5px 0}
.pagination button.selected{background:#1769e8;color:#fff;border-color:#1769e8}
.pagination button:disabled{color:#aeb6c0;cursor:default}

.card{background:#fff;border-radius:8px;padding:22px;box-shadow:0 2px 12px rgba(10,25,45,.06);margin-bottom:20px}
.narrow{width:min(420px,calc(100% - 30px))}
.center{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#f4f6f9,#e7edf5)}
.brand{font-size:34px;font-weight:800;letter-spacing:4px;color:#071d3b}
.card h2{margin-top:0;font-size:18px}
label{display:block;font-weight:700;margin:14px 0}
input[type="text"],input[type="password"],input:not([type]){
    display:block;width:100%;margin-top:7px;padding:11px;border:1px solid #ccd4df;border-radius:7px;font-size:15px
}
.btn{display:inline-block;border:0;border-radius:7px;background:#071d3b;color:#fff;padding:11px 17px;text-decoration:none;cursor:pointer;font-weight:700}
.btn.small{padding:7px 10px;font-size:12px}
.btn.full{width:100%;margin-top:10px}
.btn.danger{background:#a32121}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.error{background:#ffe7e7;color:#a00;padding:10px;border-radius:7px}
.success{background:#e6f7eb;color:#176b35;padding:10px;border-radius:7px}
.muted{color:#687587;font-size:13px}
table{width:100%;border-collapse:collapse}
th,td{vertical-align:middle}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.footer{
    background:#0b121d;
    color:#fff;
    text-align:center;
    padding:13px 10px;
    font-size:13px;
    margin-left:244px;
}
@media(max-width:900px){
    .topbar{height:92px;padding:0 14px}
    .twyb-logo-header{width:110px;height:80px}
    .brand-title strong{font-size:29px}
    .brand-title span{font-size:19px}
    .topbar-brand{gap:12px}
    .sidebar{width:72px;flex-basis:72px}
    .nav-item{justify-content:center;padding:0}
    .nav-item span:last-child{display:none}
    .main-content{padding:20px 14px}
    .footer{margin-left:72px}
}
@media(max-width:600px){
    .topbar-user{display:none}
    .page-heading h1{font-size:30px}
    .toolbar{align-items:flex-start;flex-direction:column;padding:14px 15px}
    .orders-footer{align-items:flex-start;flex-direction:column;gap:12px;padding:14px 15px}
}

/* --- Detail commande : tableau aligné et en-tête sombre --- */
.main-content .card table {
    width: 100%;
    border-collapse: collapse;
}

.main-content .card table thead th {
    background: #071d3b !important;
    color: #ffffff !important;
    font-weight: 700;
    text-align: left;
    padding: 11px 9px;
    border-bottom: 1px solid #071d3b;
    white-space: nowrap;
}

.main-content .card table tbody td {
    padding: 11px 9px;
    border-bottom: 1px solid #e1e5ea;
    color: #3a424e;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
}

.main-content .card table tbody tr:hover {
    background: #fafbfd;
}

/* Même largeur de colonnes entre l'en-tête et les données. */
.main-content .card table {
    table-layout: fixed;
}

.main-content .card table th:nth-child(1),
.main-content .card table td:nth-child(1) { width: 7%; }

.main-content .card table th:nth-child(2),
.main-content .card table td:nth-child(2) { width: 15%; }

.main-content .card table th:nth-child(3),
.main-content .card table td:nth-child(3) { width: 12%; }

.main-content .card table th:nth-child(4),
.main-content .card table td:nth-child(4) { width: 10%; }

.main-content .card table th:nth-child(5),
.main-content .card table td:nth-child(5) { width: 12%; }

.main-content .card table th:nth-child(6),
.main-content .card table td:nth-child(6) { width: 8%; }

.main-content .card table th:nth-child(7),
.main-content .card table td:nth-child(7) { width: 9%; }

.main-content .card table th:nth-child(8),
.main-content .card table td:nth-child(8) { width: 9%; }

.main-content .card table th:nth-child(9),
.main-content .card table td:nth-child(9) { width: 9%; }

.main-content .card table th:nth-child(10),
.main-content .card table td:nth-child(10) { width: 9%; }

/* Sur petits écrans, le tableau peut défiler horizontalement. */
.main-content .card .table-wrap {
    overflow-x: auto;
}

/* Logo TWYB réel dans la barre de titre */
.topbar-brand{min-width:0}
.twyb-logo-header{
    width:150px;
    height:105px;
    object-fit:contain;
    object-position:center;
    flex:0 0 auto;
}

/* Logo TWYB : affichage forcé dans la barre supérieure */
.topbar-brand{display:flex!important;align-items:center!important;height:100%;gap:22px;min-width:0}
.twyb-logo-header{
    display:block!important;
    width:150px!important;
    height:105px!important;
    max-width:150px!important;
    object-fit:contain!important;
    flex:0 0 150px!important;
    visibility:visible!important;
    opacity:1!important;
}

.toolbar .filter-form{
    display:flex;
    align-items:center;
    gap:28px;
    flex:1;
    min-width:0;
}
.search-box{
    display:flex;
    align-items:center;
    position:relative;
    width:min(430px,100%);
}
.search-box input{
    width:100%;
    height:40px;
    margin:0;
    padding:0 112px 0 13px;
    border:1px solid #ccd4df;
    border-radius:5px;
    outline:none;
    font-size:14px;
    color:#303743;
}
.search-box input:focus{
    border-color:#1769e8;
    box-shadow:0 0 0 2px rgba(23,105,232,.10);
}
.search-btn{
    position:absolute;
    right:4px;
    top:4px;
    height:32px;
    padding:0 12px;
    border:0;
    border-radius:4px;
    background:#1769e8;
    color:#fff;
    font-weight:600;
    cursor:pointer;
}
.search-btn:hover{background:#0b55c8}
.clear-search{
    position:absolute;
    right:92px;
    top:7px;
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#7c8797;
    font-size:21px;
}
@media(max-width:900px){
    .toolbar .filter-form{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
        width:100%;
    }
    .search-box{width:100%}
}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px}.form-grid label{margin:10px 0}.form-grid input[type="text"],.form-grid input[type="password"],.form-grid input[type="number"],.form-grid input:not([type]){box-sizing:border-box}.form-actions{grid-column:1/-1;display:flex;gap:10px;margin-top:12px}.btn.secondary{background:#687587}.actions{display:flex;gap:7px;align-items:center}.checkbox-label{display:flex!important;align-items:center;gap:8px;font-weight:700!important}.checkbox-label input{width:auto!important;margin:0!important}.nav-item{gap:12px}.nav-icon{width:22px;text-align:center}@media(max-width:700px){.form-grid{grid-template-columns:1fr}.form-actions{grid-column:auto}}

/* --- Filtres de commandes par statut --- */
.status-filters{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 16px;
    min-width:0;
}

.radio-label{
    display:inline-flex !important;
    align-items:center;
    gap:6px;
    margin:0 !important;
    font-weight:500 !important;
    cursor:pointer;
    white-space:nowrap;
}

.radio-label input[type="radio"]{
    appearance:none;
    width:17px;
    height:17px;
    margin:0;
    border:1px solid #bbc5d1;
    border-radius:50%;
    background:#fff;
    position:relative;
    flex:0 0 17px;
}

.radio-label input[type="radio"]:checked{
    border-color:var(--blue);
}

.radio-label input[type="radio"]:checked::after{
    content:"";
    position:absolute;
    width:9px;
    height:9px;
    left:3px;
    top:3px;
    border-radius:50%;
    background:var(--blue);
}

@media(max-width:1100px){
    .status-filters{
        gap:8px 12px;
    }
}

@media(max-width:900px){
    .status-filters{
        width:100%;
    }
}

/* --- Gestion livraison --- */
.shipping-mode-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(130px,1fr));
    gap:14px;
}

.shipping-mode-grid label{
    margin:0;
}

.shipping-help{
    margin-top:-8px;
    margin-bottom:20px;
}

.shipping-mode-block{
    border:1px solid var(--border);
    border-radius:7px;
    margin-top:22px;
    overflow:hidden;
}

.shipping-mode-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:14px 18px;
    background:#f5f7fa;
    border-bottom:1px solid var(--border);
}

.shipping-mode-title h3{
    margin:0;
    font-size:18px;
}

.shipping-mode-title span{
    color:var(--muted);
    font-size:13px;
}

.shipping-table{
    min-width:820px;
}

.shipping-table td{
    white-space:normal;
}

.shipping-number{
    width:110px !important;
    margin:0 !important;
    padding:8px !important;
}

.shipping-tva{
    width:75px !important;
}

.shipping-add-form{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    padding:14px 18px;
    background:#fafbfd;
    border-top:1px solid var(--border);
}

.shipping-add-form strong{
    margin-right:8px;
}

.shipping-add-form input{
    width:130px;
    margin:0;
    padding:9px;
    border:1px solid #ccd4df;
    border-radius:6px;
}

@media(max-width:1000px){
    .shipping-mode-grid{
        grid-template-columns:repeat(2,minmax(130px,1fr));
    }
}

@media(max-width:600px){
    .shipping-mode-grid{
        grid-template-columns:1fr;
    }

    .shipping-add-form{
        align-items:stretch;
        flex-direction:column;
    }

    .shipping-add-form input{
        width:100%;
    }
}

/* --- Actions des commandes --- */
.order-actions{
    white-space:nowrap;
}

.invoice-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    margin-left:6px;
    border-radius:6px;
    background:#eef2f7;
    color:var(--blue);
    text-decoration:none;
    font-size:15px;
    font-weight:700;
}

.invoice-btn:hover{
    background:#e1e7ef;
}


/* ============================================================
   Sélecteur Développement / Production
   ============================================================ */

.nav-environment{
    margin:18px 14px 10px;
    padding:12px;
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
}

.nav-environment-title{
    margin-bottom:9px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    opacity:.75;
}

.environment-switch-form{
    margin:0;
}

.environment-switch-form input[type="checkbox"]{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.environment-switch-form label{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    height:32px;
    padding:0;
    box-sizing:border-box;
    border-radius:16px;
    background:#26384d;
    cursor:pointer;
    user-select:none;
    font-size:10px;
    font-weight:700;
    line-height:32px;
    overflow:hidden;
}

.environment-switch-form label::before{
    content:"";
    position:absolute;
    z-index:0;
    top:3px;
    left:3px;
    width:calc(50% - 3px);
    height:26px;
    border-radius:13px;
    background:white;
    transition:transform .18s ease;
    box-shadow:0 1px 3px rgba(0,0,0,.18);
}

.environment-switch-form label span{
    position:relative;
    z-index:2;
    display:block;
    flex:1 1 50%;
    width:50%;
    min-width:0;
    text-align:center;
    white-space:nowrap;
}

/* Développement sélectionné */
.environment-switch-form input[type="checkbox"]:checked + label{
    background:#26384d;
}

.environment-switch-form input[type="checkbox"]:checked + label::before{
    transform:translateX(0);
    background:#fff1cc;
}

.environment-switch-form input[type="checkbox"]:checked + label span:first-child{
    color:#765400;
}

.environment-switch-form input[type="checkbox"]:checked + label span:last-child{
    color:#fff !important;
}

/* Production sélectionnée */
.environment-switch-form input[type="checkbox"]:not(:checked) + label{
    background:#26384d;
}

.environment-switch-form input[type="checkbox"]:not(:checked) + label::before{
    transform:translateX(100%);
    background:white;
}

.environment-switch-form input[type="checkbox"]:not(:checked) + label span:first-child{
    color:white;
}

.environment-switch-form input[type="checkbox"]:not(:checked) + label span:last-child{
    color:#000;
}

/* Le texte Production du switch latéral est toujours noir. */
.nav-environment .environment-switch-form label span:last-child{
    color:#000;
}

/* Environnement affiché dans le titre, à côté du logo */
.brand-title{
    display:flex;
    align-items:center;
    gap:14px;
}

.environment-title-badge{
    display:inline-flex;
    align-items:center;
    padding:5px 11px;
    border-radius:12px;
    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.02em;
}

.environment-title-badge.production{
    background:#e7edf3;
    color:#26384d;
}

.environment-title-badge.development{
    background:#fff1cc;
    color:#765400;
}


/* Le texte Production du switch latéral doit toujours être noir */
.nav-environment .environment-switch-form label span:last-child,
.nav-environment .environment-switch-form input[type="checkbox"]:checked + label span:last-child,
.nav-environment .environment-switch-form input[type="checkbox"]:not(:checked) + label span:last-child{
    color:#000;
}

/* ============================================================
   Messages de contact
   ============================================================ */
.messages-table .message-preview{
    min-width:260px;
    max-width:420px;
    white-space:normal;
    line-height:1.45;
    color:var(--muted);
}

.message-subject-code{
    margin-top:3px;
    color:var(--muted);
    font-size:12px;
}

.message-details{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:10px 18px;
    margin:0;
}

.message-details dt{
    font-weight:700;
    color:var(--muted);
}

.message-details dd{
    margin:0;
    overflow-wrap:anywhere;
}

.message-mail-status{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.message-mail-status > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-bottom:12px;
    border-bottom:1px solid var(--border);
}

.message-mail-status > div:last-child{
    padding-bottom:0;
    border-bottom:0;
}

.message-subject-label{
    margin-bottom:5px;
    font-size:18px;
    font-weight:700;
}

.message-body{
    padding:16px 18px;
    border:1px solid var(--border);
    border-radius:7px;
    background:#fafbfd;
    line-height:1.65;
    overflow-wrap:anywhere;
}

.danger-zone{
    border-color:#f0c4c4;
}

@media(max-width:700px){
    .message-details{
        grid-template-columns:1fr;
        gap:4px;
    }

    .message-details dd{
        margin-bottom:10px;
    }
}

/* --- Variables --- */
.variables-table{min-width:720px}
.variables-table .variable-name{font-weight:700;color:#252c36;width:30%}
.variables-table .variable-value{white-space:normal;word-break:break-word;color:#3a424e}
.variables-table .actions{white-space:nowrap;width:220px}


/* --- Visiteurs --- */
.visitor-card{overflow:hidden}
.visitor-filters{
    padding:20px;
    border-bottom:1px solid var(--border);
    background:#fbfcfe;
}
.visitor-filter-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px 16px;
}
.visitor-filter-grid label{
    margin:4px 0 8px;
    font-size:13px;
    font-weight:700;
    color:#303743;
}
.visitor-filter-grid input{
    display:block;
    width:100%;
    height:40px;
    margin-top:6px;
    padding:0 11px;
    border:1px solid #ccd4df;
    border-radius:5px;
    outline:none;
    font-size:14px;
    color:#303743;
    background:#fff;
}
.visitor-filter-grid input:focus{
    border-color:#1769e8;
    box-shadow:0 0 0 2px rgba(23,105,232,.10);
}
.visitor-filter-wide{grid-column:span 2}
.visitor-filter-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
}
.visitor-filter-actions .btn{border-radius:5px}
.visitor-result-count{margin-left:auto;color:var(--muted);font-size:13px;font-weight:600}
.visitor-table{min-width:1450px}
.visitor-table th,.visitor-table td{vertical-align:top}
.visitor-table td{white-space:nowrap}
.visitor-wrap-cell{
    max-width:320px;
    white-space:normal!important;
    word-break:break-word;
    line-height:1.35;
}
.visitor-footer{gap:20px}
.pagination-link{
    min-width:40px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #dce2e9;
    border-right:0;
    background:#fff;
    color:#4b5562;
    text-decoration:none;
}
.pagination-link:first-child{border-radius:5px 0 0 5px}
.pagination-link:last-child{border-right:1px solid #dce2e9;border-radius:0 5px 5px 0}
.pagination-link.selected{background:#1769e8;color:#fff;border-color:#1769e8}
.pagination-link.disabled{color:#aeb6c0;pointer-events:none}
@media(max-width:1100px){
    .visitor-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
    .visitor-filter-grid{grid-template-columns:1fr}
    .visitor-filter-wide{grid-column:auto}
    .visitor-filter-actions{align-items:flex-start;flex-wrap:wrap}
    .visitor-result-count{width:100%;margin-left:0}
}

/* --- Suppression des visiteurs --- */
.visitor-select-col{width:42px;text-align:center!important}
.visitor-select-col input[type="checkbox"]{width:17px;height:17px;cursor:pointer}
.visitor-delete-bar{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);background:#fff}
.visitor-delete-bar .btn.danger{background:#dc3545;color:#fff;border-color:#dc3545}
.visitor-delete-bar .btn.danger:disabled{opacity:.45;cursor:not-allowed}
#visitorSelectionCount{font-size:13px;color:var(--muted);font-weight:600}


/* --- Import / export des variables --- */
.variables-import-export p{margin:0 0 18px;color:var(--muted)}
.variables-import-export-actions{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.variables-import-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.variables-file-label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#303743}
.variables-file-label input[type="file"]{padding:8px;border:1px solid #ccd4df;border-radius:5px;background:#fff;font-size:14px}
@media(max-width:700px){
    .variables-import-export-actions,.variables-import-form{align-items:stretch;flex-direction:column}
}

.inline-action-form{
    display:inline-flex;
    margin:0;
}

.invoice-generate-btn{
    border:0;
    cursor:pointer;
    font:inherit;
}

/* --- Actions des messages clients --- */
.message-actions{display:flex;gap:7px;align-items:center;white-space:nowrap}
.message-actions .reply-btn{background:#5d789b}

/* --- Fil de conversation --- */
.conversation-link{font-weight:700;text-decoration:none}
.conversation-link:hover{text-decoration:underline}
.muted{color:var(--muted)}
.conversation-card{overflow:hidden}
.conversation-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.conversation-label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.conversation-header h2{margin:4px 0 0;font-size:20px}
.conversation-count{font-size:13px;color:var(--muted);white-space:nowrap}
.conversation-thread{display:flex;flex-direction:column;gap:16px;padding:22px 0}
.conversation-message{max-width:82%;padding:15px 17px;border:1px solid var(--border);border-radius:12px;background:#fafbfd}
.conversation-message.client{align-self:flex-start}
.conversation-message.admin{align-self:flex-end;background:#eef5ff}
.conversation-message-meta{display:flex;justify-content:space-between;gap:20px;margin-bottom:9px;font-size:13px}
.conversation-message-meta span{color:var(--muted);white-space:nowrap}
.conversation-message-body{line-height:1.65;overflow-wrap:anywhere}
.conversation-message-id{margin-top:10px;font-size:11px;color:var(--muted)}
.conversation-footer{display:flex;gap:10px;padding-top:18px;border-top:1px solid var(--border)}
@media(max-width:700px){
    .conversation-header{align-items:flex-start;flex-direction:column}
    .conversation-message{max-width:94%}
    .conversation-message-meta{flex-direction:column;gap:3px}
}

/* --- Mailing --- */
.mailing-card{padding:26px;max-width:900px}
.mailing-intro{display:flex;align-items:center;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.mailing-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#eef3ff;color:#1769e8;font-size:25px}
.mailing-intro h2{margin:0 0 5px;font-size:20px}
.mailing-intro p{margin:0;color:var(--muted);font-size:14px}
.mailing-form{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px 0}
.mailing-file-label{font-size:14px;font-weight:700;color:#303743}
.mailing-form input[type=file]{width:100%;max-width:560px;padding:12px;border:1px solid #ccd4df;border-radius:6px;background:#fff;font-size:14px}
.mailing-help{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.mailing-actions{padding-top:8px;position:static;display:flex;align-items:center;justify-content:flex-start;width:100%}
.mailing-actions .search-btn{position:static;right:auto;top:auto;height:40px;padding:0 18px}
.mailing-warning{padding:14px 16px;border:1px solid #f0d79a;border-radius:7px;background:#fff9e9;color:#6e541b;font-size:13px;line-height:1.5}
.mailing-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
.mailing-result-grid>div{display:flex;flex-direction:column;gap:5px;padding:18px;border:1px solid var(--border);border-radius:8px;background:#fafbfd}
.mailing-result-grid strong{font-size:28px;color:#1769e8}
.mailing-result-grid span{font-size:13px;color:var(--muted)}
.mailing-back{position:static;display:inline-flex;align-items:center;justify-content:center;height:40px;margin-top:20px;padding:0 18px;text-decoration:none}
@media(max-width:650px){.mailing-result-grid{grid-template-columns:1fr}.mailing-card{padding:18px}}


/* Réponse aux demandes de contact */
.contact-reply-card .muted{margin-top:-8px;margin-bottom:18px}
.contact-reply-form{display:flex;flex-direction:column;gap:10px}
.contact-reply-form label{font-weight:700;color:var(--text,#252c36)}
.contact-reply-form textarea{box-sizing:border-box;width:100%;min-height:170px;padding:12px 14px;border:1px solid var(--border);border-radius:7px;background:#fff;color:#252c36;font:inherit;line-height:1.5;resize:vertical}
.contact-reply-form textarea:focus{outline:2px solid rgba(7,29,59,.15);border-color:#071d3b}
.contact-reply-actions{display:flex;justify-content:flex-end;margin-top:8px}