*{box-sizing:border-box}body{margin:0;background:#f4f5f7;color:#252a31;font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}header{background:#111;color:#fff;border-bottom:4px solid #c62828;padding:14px 22px;display:flex;justify-content:space-between;align-items:center}header strong{font-size:21px;letter-spacing:.6px;font-weight:650}.subtitle{margin-left:18px;color:#ddd}.user{font-size:13px;color:#e7e7e7}nav{background:#fff;padding:10px 20px;border-bottom:1px solid #ddd;display:flex;gap:8px;flex-wrap:wrap}nav a,.btn{display:inline-block;text-decoration:none;border:0;border-radius:5px;background:#222;color:#fff;padding:9px 13px;cursor:pointer}.btn.secondary{background:#666}.btn.danger{background:#a51f1f}.btn.small{padding:6px 9px;font-size:12px}main{padding:24px 28px;max-width:1680px;margin:auto}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:15px}.card{background:#fff;border:1px solid #e1e4e8;border-radius:10px;padding:20px;box-shadow:0 1px 2px rgba(0,0,0,.035)}.metric{font-size:30px;font-weight:bold}.muted{color:#69717c;font-size:12.5px}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:9px 10px;border-bottom:1px solid #e5e5e5;text-align:left;vertical-align:top}th{background:#222;color:#fff;position:sticky;top:0}.tablewrap{overflow:auto;max-height:68vh;border:1px solid #ddd}.formrow{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:14px}label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:bold}input,select,textarea{padding:9px;border:1px solid #bbb;border-radius:5px;min-width:180px}.alert{padding:12px;border-radius:5px;background:#fff3cd;margin:12px 0}.ok{background:#dff0df}.bad{background:#f8d7da}.tag{display:inline-block;padding:3px 7px;border-radius:12px;background:#eee;font-size:12px}.login{max-width:420px;margin:70px auto}.login input{width:100%}.login .btn{width:100%;margin-top:10px}.nowrap{white-space:nowrap}

/* Photos pneus Müller */
.tyre-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.tyre-photo-card {
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    padding: 14px;
    background: #fff;
}
.tyre-photo-card h4 {
    margin: 0 0 10px 0;
}
.tyre-photo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}
.tyre-photo-row img {
    max-width: 280px;
    width: 100%;
    height: 150px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8f9fa;
}
@media (max-width: 800px) {
    .tyre-photo-grid {
        grid-template-columns: 1fr;
    }
}

main h1,main h2,main h3{color:#20242a;font-weight:650;line-height:1.25}
h1{font-size:24px;margin:0 0 18px}h2{font-size:19px;margin:20px 0 12px}h3{font-size:16px;margin:22px 0 10px}
label{color:#3d434b;font-size:13px;font-weight:600}
input,select,textarea{font-family:inherit;font-size:14px;color:#252a31}
table{font-size:13px}th{font-size:12px;font-weight:650;letter-spacing:.15px;color:#fff}td{color:#343a42}
.btn{font-family:inherit;font-weight:600;font-size:13px}
body.page-campaign main{max-width:1780px;padding-left:32px;padding-right:32px}
body.page-campaign .card{padding:22px 24px}
body.page-campaign .tablewrap{overflow-x:auto}
body.page-campaign table{min-width:1380px}
body.page-campaign td{vertical-align:top}
@media(max-width:900px){main,body.page-campaign main{padding:16px;max-width:none}.card,body.page-campaign .card{padding:15px}h1{font-size:21px}}

header h1,header h2,header h3,
.dark h1,.dark h2,.dark h3,
.bg-dark h1,.bg-dark h2,.bg-dark h3,
[style*="background:#111"] h1,[style*="background:#111"] h2,[style*="background:#111"] h3,
[style*="background: #111"] h1,[style*="background: #111"] h2,[style*="background: #111"] h3{
    color:#fff;
}

/* Correctif V6.4 : lisibilité sur fonds sombres */
header, header strong, header .subtitle, header .user,
table thead th {
    color: #fff !important;
}
table thead th a {
    color: #fff !important;
}

/* V7 - Gestion des offres sur une ligne */
.offer-manager-row{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    align-items:flex-end;
    width:100%;
    margin-bottom:12px;
}
.offer-manager-row label{margin:0;min-width:0}
.offer-manager-row label>input,
.offer-manager-row label>select{width:100%;margin-top:5px}
.offer-manager-row .offer-source{flex:1.25 1 180px}
.offer-manager-row .offer-product{flex:1.45 1 210px}
.offer-manager-row .offer-dimension{flex:.85 1 120px}
.offer-manager-row .offer-quantity{flex:.45 1 70px}
.offer-manager-row .offer-price{flex:.65 1 105px}
@media(max-width:1250px){
    .offer-manager-row{overflow-x:auto;padding-bottom:8px}
    .offer-manager-row label{flex:none!important}
    .offer-manager-row .offer-source{width:190px}
    .offer-manager-row .offer-product{width:220px}
    .offer-manager-row .offer-dimension{width:130px}
    .offer-manager-row .offer-quantity{width:80px}
    .offer-manager-row .offer-price{width:115px}
}

/* V7.1 - alignement compact de la gestion des offres */
.offer-manager-row{
    display:grid !important;
    grid-template-columns:minmax(180px,1.25fr) minmax(190px,1.35fr) minmax(115px,.8fr) 72px 108px 102px 96px 102px !important;
    gap:10px !important;
    align-items:end;
    width:100%;
    overflow-x:auto;
    padding-bottom:6px;
}
.offer-manager-row label{
    min-width:0 !important;
    width:auto !important;
    flex:none !important;
}
.offer-manager-row input,
.offer-manager-row select{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box;
}
@media(max-width:1400px){
    .offer-manager-row{
        grid-template-columns:180px 195px 120px 72px 108px 102px 96px 102px !important;
        min-width:1050px;
    }
}

.simulation-banner{background:#fff3cd;color:#664d03;border-bottom:1px solid #ffecb5;padding:9px 22px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:13px}
.simulation-banner .btn{background:#664d03}
.simulation-settings{border-left:4px solid #d39e00}

/* V7.6 - numérotation et suivi pneus compact */
.row-id{width:42px;text-align:center;font-weight:700;color:#69717c}
.row-id-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;margin-right:8px;padding:0 5px;border-radius:12px;background:#eceff3;color:#333;font-size:12px;font-weight:700}
.tyre-followup-inline{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}

/* V7.7 - droits : commandes visibles mais inactives */
.btn.disabled,.nav-disabled{opacity:.42;cursor:not-allowed;pointer-events:none;user-select:none}
.nav-disabled{display:inline-block;padding:10px 12px;color:#aaa}
fieldset:disabled{opacity:.55}

.offer-language-switch{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin:8px 0 14px}
.offer-language-switch .btn.active{font-weight:700;outline:2px solid currentColor}


/* ==========================================================================
   LIENS DE DONNÉES - STYLE MODERNE
   Clients / véhicules / pneus : liens sobres, sans soulignement "web ancien".
   ========================================================================== */
.tablewrap table a:not(.btn),
.data-link {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    display: inline-block;
    transform-origin: left center;
    transition: transform .18s ease, opacity .18s ease, border-color .18s ease;
}

.tablewrap table a:not(.btn):hover,
.data-link:hover {
    color: inherit;
    text-decoration: none;
    border-bottom-color: transparent;
    opacity: .88;
    transform: scale(1.035);
}

.tablewrap table a:not(.btn):visited,
.data-link:visited {
    color: inherit;
}

.tablewrap table a:not(.btn):focus-visible,
.data-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 3px;
}


@media (prefers-reduced-motion: reduce) {
    .tablewrap table a:not(.btn),
    .data-link {
        transition: none;
    }

    .tablewrap table a:not(.btn):hover,
    .data-link:hover {
        transform: none;
    }
}


/* ==========================================================================
   TABLEAUX - SURVOL DE LIGNE
   Rend les listes Clients / Véhicules / Pneus / Campagnes plus lisibles.
   ========================================================================== */
.tablewrap table tbody tr {
    transition: background-color .18s ease;
}

.tablewrap table tbody tr:hover {
    background-color: rgba(0, 0, 0, .045);
}

@media (prefers-reduced-motion: reduce) {
    .tablewrap table tbody tr {
        transition: none;
    }
}


/* ==========================================================================
   NAVIGATION - ICONES
   Icônes légères et homogènes, sans dépendance externe.
   ========================================================================== */
.main-nav a,
.main-nav .nav-disabled {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.main-nav .nav-icon {
    width: 18px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    opacity: .82;
    transition: transform .18s ease, opacity .18s ease;
}

.main-nav a:hover .nav-icon {
    transform: scale(1.12);
    opacity: 1;
}

.main-nav .nav-icon-tyre {
    font-size: 18px;
}

.main-nav .nav-icon-users {
    font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
    .main-nav .nav-icon {
        transition: none;
    }

    .main-nav a:hover .nav-icon {
        transform: none;
    }
}


/* ==========================================================================
   IDENTITE VISUELLE SCANDIA VOLVO
   Couleurs reprises de la référence fournie :
   bleu principal #253060 (37,48,96)
   bleu foncé     #18213F (24,33,63)
   ========================================================================== */
:root {
    --scandia-blue: #253060;
    --scandia-blue-dark: #18213F;
    --scandia-blue-soft: rgba(37, 48, 96, .08);
}

header {
    background: var(--scandia-blue) !important;
    color: #fff !important;
    border-bottom: 0 !important;
}

header .brand-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

header .brand-name {
    color: #fff;
    font-size: 21px;
    line-height: 1.05;
    letter-spacing: .4px;
    font-weight: 700;
}

header .brand-title {
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
}

header .subtitle {
    margin-left: 0 !important;
    margin-top: 7px;
    color: #fff !important;
    opacity: .92;
    font-size: 13px;
}

header .user {
    color: #fff;
}

nav,
.main-nav {
    background: var(--scandia-blue-dark) !important;
    border-color: var(--scandia-blue-dark) !important;
}

.main-nav a,
.main-nav .nav-disabled,
nav a,
nav .nav-disabled {
    color: #fff !important;
}

.main-nav a:hover,
nav a:hover {
    background: rgba(255,255,255,.10);
}

.btn:not(.secondary):not(.danger) {
    background: var(--scandia-blue) !important;
    border-color: var(--scandia-blue) !important;
}

.btn:not(.secondary):not(.danger):hover {
    background: var(--scandia-blue-dark) !important;
    border-color: var(--scandia-blue-dark) !important;
}

.tablewrap table thead th {
    background: var(--scandia-blue-dark);
    color: #fff;
}

.tablewrap table thead th a {
    color: #fff !important;
}

.tablewrap table tbody tr:hover {
    background-color: var(--scandia-blue-soft);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--scandia-blue) !important;
    box-shadow: 0 0 0 2px rgba(37,48,96,.12);
    outline: none;
}

/* V7.35 - Icônes SVG détaillées et colorées */
.main-nav .nav-icon {
    width: 22px;
    min-width: 22px;
    height: 22px;
    font-size: 0;
    opacity: 1;
}
.main-nav .nav-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    overflow: visible;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.16));
}
.main-nav a:hover .nav-icon {
    transform: scale(1.10);
}


/* V7.36 - Uniformisation définitive des bandeaux de tableaux */
.tablewrap table > thead > tr > th,
.tablewrap table > tbody > tr:first-child > th,
table > thead > tr > th {
    background-color: #18213F !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.10) !important;
}

.tablewrap table > thead > tr > th a,
.tablewrap table > tbody > tr:first-child > th a,
table > thead > tr > th a {
    color: #fff !important;
}

/* V7.38 - Bouton de test Infomaniak visible directement dans le suivi campagne */
.infomaniak-test-btn {
    white-space: nowrap;
    background: #253060 !important;
    border-color: #253060 !important;
}
.infomaniak-test-btn:hover {
    background: #18213F !important;
    border-color: #18213F !important;
}