:root {
    --red:     #C41E3A;
    --red-dim: #8B1228;
    --red-glow:#C41E3A44;
    --teal:       var(--teal);
    --teal-dim:   var(--teal-dim);
    --teal-glow:  var(--teal)20;
    --blue:       #4A90D9;
    --purple:     #BB6BD9;
    --bg:      #0D0D0F;
    --bg2:     #141418;
    --bg3:     #1C1C22;
    --bg4:     #242430;
    --border:  #2A2A35;
    --text:    #E8E8F0;
    --muted:   #7878A0;
    --green:   #2ECC71;
    --orange:  #F39C12;
    --white:   #FFFFFF;

    /* Typography */
    --font-xs:   0.65rem;
    --font-sm:   0.72rem;
    --font-base: 0.82rem;
    --font-md:   0.9rem;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Spacing */
    --gap-sm: 8px;
    --gap-md: 14px;
    --gap-lg: 24px;
}
body.light {
    --bg:     #F5F0EB;
    --bg2:    #FFFFFF;
    --bg3:    #EDE8E3;
    --bg4:    #E0DBD6;
    --border: #D0C8C0;
    --text:   #1A1A1A;
    --muted:  #7A6F68;
    --white:  #1A1A1A;
}
body.light .login-bg { background: radial-gradient(ellipse at 20% 50%, #C41E3A12 0%, transparent 60%); }
body.light .login-grid { opacity: 0.08; }
body.light .login-box { box-shadow: 0 8px 40px rgba(196,30,58,0.12); }
body.light .hdr { box-shadow: 0 1px 8px rgba(0,0,0,0.08); }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; transition: background 0.2s, color 0.2s; }

#loginScreen { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.login-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 20% 50%, #C41E3A18 0%, transparent 60%), radial-gradient(ellipse at 80% 50%, #C41E3A08 0%, transparent 60%); }
.login-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.3; }
.login-box { position: relative; width: 420px; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 48px 40px; box-shadow: 0 0 60px var(--red-glow), 0 0 120px #C41E3A11; }
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo svg { width: 64px; height: 64px; margin-bottom: 12px; }
.login-logo h1 { font-family: 'Rajdhani', sans-serif; font-size: 2rem; font-weight: 700; color: var(--text); letter-spacing: 0.5px; }
.login-logo p { color: var(--muted); font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }
.login-field { margin-bottom: 16px; }
.login-field label { display: block; font-size: 0.72rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; }
.login-field input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; color: var(--text); font-size: 0.9rem; transition: border-color 0.2s; }
.login-field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); }
.login-btn { width: 100%; padding: 13px; background: var(--red); color: white; border: none; border-radius: var(--radius-md); font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 2px; cursor: pointer; margin-top: 8px; transition: all 0.2s; }
.login-btn:hover { background: var(--red-dim); box-shadow: 0 0 20px var(--red-glow); }
.login-error { color: var(--red); font-size: 0.82rem; text-align: center; margin-top: 12px; display: none; }

#app { display: none; flex-direction: column; min-height: 100vh; }
.hdr { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.hdr-left { display: flex; align-items: center; gap: 16px; flex: 1; }
.hdr-logo { display: flex; align-items: center; gap: 10px; }
.hdr-logo svg { width: 32px; height: 32px; }
.hdr-logo span { font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--text); letter-spacing: 3px; }
.nav-tabs { display: flex; gap: 4px; margin-left: 24px; flex: 1; align-items: center; }
.nav-tab { padding: 6px 16px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500; color: var(--muted); cursor: pointer; transition: all 0.15s; border: 1px solid transparent; }
.nav-tab:hover { color: var(--text); background: var(--bg3); }
.nav-tab.active { color: var(--red); background: var(--bg3); border-color: var(--border); }
.nav-tab.nav-more { margin-left: auto; position: relative; }
.nav-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,0.25); z-index: 200; padding: 4px; }
.nav-dropdown.open { display: block; }
.nav-dropdown-item { padding: 8px 14px; border-radius: var(--radius-sm); color: var(--text); font-size: 0.85rem; cursor: pointer; transition: background 0.15s; }
.nav-dropdown-item:hover { background: var(--bg3); color: var(--red); }
.hdr-right { display: flex; align-items: center; gap: 10px; }
.user-badge { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); }
.user-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
.theme-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; font-size: 0.9rem; transition: all 0.15s; }
.theme-btn:hover { border-color: var(--red); }
.logout-btn { padding: 6px 14px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.78rem; cursor: pointer; transition: all 0.15s; }
.logout-btn:hover { border-color: var(--red); color: var(--red); }

/* BlitzML géoloc widget (commercial home) */
.geo-widget {
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 50%, #8E24AA 100%);
    color: #fff;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(74,20,140,0.30);
}
.geo-widget-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 20px;
    flex-wrap: wrap;
}
.geo-widget-title { display: flex; align-items: center; gap: 14px; }
.geo-widget-robot { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35)); }
.geo-widget-h1 { font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.5px; }
.geo-widget-h2 { font-size: 0.78rem; color: rgba(255,255,255,0.78); margin-top: 2px; }
.geo-widget-actions { display: flex; align-items: center; gap: 10px; }
.geo-widget-btn {
    padding: 8px 16px; border-radius: var(--radius-sm);
    background: #fff; color: #4A148C; border: none; cursor: pointer;
    font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; font-weight: 700;
    letter-spacing: 0.5px; transition: transform 0.15s, box-shadow 0.15s;
}
.geo-widget-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.geo-widget-content {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.18);
    border-top: 1px solid rgba(255,255,255,0.10);
}
.geo-map-panel {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    display: flex; flex-direction: column; gap: 10px;
    position: relative;
}
.geo-map-title {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: rgba(255,255,255,0.92);
}
.geo-map-legend-inline {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 0.68rem; font-weight: 600;
    text-transform: none; letter-spacing: 0.5px;
    color: rgba(255,255,255,0.78);
}
.geo-map-legend-inline > span { display: inline-flex; align-items: center; gap: 5px; }
.geo-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 1.5px rgba(0,0,0,0.30);
}
.geo-dot.bucket-cur   { background: #2ECC71; }
.geo-dot.bucket-prev  { background: #F1C40F; }
.geo-dot.bucket-older { background: #E67E22; }
.geo-dot.bucket-never { background: #95A5A6; }
.geo-dot.bucket-user  { background: #2980B9; box-shadow: 0 0 0 2px #fff; }
.geo-dot.bucket-tour  { background: #E67E22; box-shadow: 0 0 0 2px #fff; }

/* ─── Panneau Tournée du jour ─────────────────────────────── */
.tournee-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 16px;
    padding: 14px 18px;
}
@media (max-width: 960px) {
    .tournee-grid { grid-template-columns: 1fr; }
}
.tournee-panel {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-left: 4px solid #E67E22;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 10px;
    color: #fff;
    align-self: flex-start;
    position: sticky; top: 70px;
}
.tournee-panel-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.tournee-panel-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
}
.tournee-panel-sub { font-size: 0.74rem; color: rgba(255,255,255,0.72); margin-top: 2px; }

.tournee-progress-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 80px; }
.tournee-progress { width: 80px; height: 6px; background: rgba(255,255,255,0.15); border-radius: 3px; overflow: hidden; }
.tournee-progress-bar { height: 100%; background: linear-gradient(90deg, #2ECC71 0%, #58D68D 100%); transition: width 0.3s; }
.tournee-progress-label { font-size: 0.7rem; font-weight: 700; }

.tournee-empty {
    padding: 24px 8px; text-align: center;
    color: rgba(255,255,255,0.55);
    font-size: 0.78rem; line-height: 1.5;
    border: 1px dashed rgba(255,255,255,0.18); border-radius: 6px;
}

.tournee-list { display: flex; flex-direction: column; gap: 6px; }
.tournee-step {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 8px; align-items: center;
    padding: 8px 10px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    transition: opacity 0.2s, background 0.2s;
}
.tournee-step.visited {
    opacity: 0.55;
    background: rgba(46,204,113,0.10);
    border-color: rgba(46,204,113,0.40);
}
.tournee-step.visited .tournee-step-name { text-decoration: line-through; }
.tournee-step-num {
    background: #E67E22; color: #fff;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem; font-weight: 700;
}
.tournee-step.visited .tournee-step-num { background: #27AE60; }
.tournee-step-arrows {
    display: flex; flex-direction: column; gap: 1px;
}
.tournee-step-arrows button {
    width: 22px; height: 14px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; cursor: pointer;
    font-size: 0.6rem; line-height: 1;
    padding: 0; border-radius: 3px;
}
.tournee-step-arrows button:hover:not(:disabled) { background: rgba(255,255,255,0.18); }
.tournee-step-arrows button:disabled { opacity: 0.3; cursor: not-allowed; }
.tournee-step-body { min-width: 0; }
.tournee-step-name {
    font-size: 0.82rem; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tournee-step-meta { font-size: 0.66rem; color: rgba(255,255,255,0.65); margin-top: 1px; }
.tournee-step-actions { display: flex; flex-direction: column; gap: 3px; }
.tournee-step-actions button {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff; cursor: pointer;
    font-size: 0.62rem; font-weight: 600;
    padding: 3px 8px; border-radius: 4px;
    white-space: nowrap;
}
.tournee-step-actions button.visit-btn:hover { background: rgba(46,204,113,0.50); border-color: #2ECC71; }
.tournee-step-actions button.remove-btn:hover { background: rgba(196,30,58,0.50); border-color: var(--red); }
.tournee-step.visited .visit-btn { background: rgba(46,204,113,0.30); }

.tournee-actions {
    display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
    padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.10);
}
.tournee-btn {
    flex: 1; min-width: 110px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    color: #fff; cursor: pointer;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 5px;
}
.tournee-btn:hover { background: rgba(255,255,255,0.18); }
.tournee-btn.primary {
    background: linear-gradient(135deg, #E67E22, #D35400);
    border-color: #D35400;
}
.tournee-btn.primary:hover { background: linear-gradient(135deg, #F39C12, #E67E22); }
.tournee-btn.danger { background: rgba(196,30,58,0.25); border-color: rgba(196,30,58,0.50); }
.tournee-btn.danger:hover { background: rgba(196,30,58,0.45); }

/* Bouton "+ Ajouter" sur cards proximité */
.add-tour-btn {
    background: #E67E22 !important; color: #fff !important;
    border-color: #D35400 !important;
}
.add-tour-btn.in-tour { background: #27AE60 !important; border-color: #1E8449 !important; }

/* Marker client (pastille couleur + badge robot BlitzML si suggestions) */
.map-marker {
    position: relative;
    width: 18px; height: 18px;
    pointer-events: auto;
}
.map-marker-dot {
    position: absolute; inset: 2px;
    border-radius: 50%;
    border: 1.5px solid #1a1a1a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.map-marker.has-prio .map-marker-dot {
    box-shadow: 0 0 0 2px rgba(196,30,58,0.45), 0 1px 4px rgba(0,0,0,0.35);
}
.map-marker-bot {
    position: absolute;
    top: -8px; right: -10px;
    width: 18px; height: 18px;
    background: #8E24AA;
    border: 1.5px solid #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.45);
    pointer-events: none;
}
.map-marker-bot.prio {
    background: #C41E3A;
    animation: ml-bot-pulse 1.8s ease-in-out infinite;
}
@keyframes ml-bot-pulse {
    0%, 100% { transform: scale(1);   box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 0 0 0   rgba(196,30,58,0.65); }
    50%      { transform: scale(1.1); box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 0 0 6px rgba(196,30,58,0); }
}

/* Marker numéroté tournée sur la carte */
.tour-marker-icon {
    background: #E67E22; color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    width: 32px !important; height: 32px !important;
    margin-left: -16px !important; margin-top: -16px !important;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 800;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.tour-marker-icon.visited { background: #27AE60; opacity: 0.7; }

.leaflet-host {
    height: 460px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.30);
}
.leaflet-host .leaflet-control-attribution { background: rgba(255,255,255,0.85); }
/* Popups Leaflet : on garde le thème clair par défaut, lisible */
.leaflet-popup-content { font-size: 0.78rem; line-height: 1.4; }
.leaflet-popup-content strong { color: #4A148C; }
.france-map .dep {
    fill: rgba(255,255,255,0.10);
    stroke: rgba(255,255,255,0.35);
    stroke-width: 0.6;
    transition: fill 0.15s, stroke 0.15s;
    cursor: default;
}
.france-map .dep.active { stroke: rgba(255,255,255,0.95); stroke-width: 1.1; cursor: pointer; }
.france-map .dep:hover { fill: #fff !important; stroke: #fff; }
.france-map .dep.lvl-1 { fill: rgba(255,255,255,0.18); }
.france-map .dep.lvl-2 { fill: rgba(255,234,138,0.55); }
.france-map .dep.lvl-3 { fill: rgba(255,179,71,0.75); }
.france-map .dep.lvl-4 { fill: rgba(255,107,71,0.90); }
.france-map .dep.lvl-5 { fill: #ff3d3d; }
.france-map .client-marker { transition: transform 0.12s; transform-origin: center; transform-box: fill-box; }
.france-map .client-marker:hover { transform: scale(1.7); filter: drop-shadow(0 0 3px rgba(255,255,255,0.6)); }

.ens-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    vertical-align: middle;
}
.ens-logo-wrap svg { display: block; }
.ens-logo-wrap.ens-logo-img {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.20), inset 0 0 0 1px rgba(0,0,0,0.04);
}
.ens-logo-wrap.ens-logo-img img { display: block; }

.geo-map-tooltip {
    position: absolute;
    background: rgba(0,0,0,0.92);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    white-space: nowrap;
    min-width: 140px;
}
.geo-map-tooltip-name { font-weight: 700; margin-bottom: 4px; font-family: 'Rajdhani', sans-serif; }
.geo-map-tooltip-row { font-size: 0.72rem; color: rgba(255,255,255,0.78); display: flex; justify-content: space-between; gap: 12px; }
.geo-map-tooltip-row strong { color: #fff; }

.geo-map-legend {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.66rem; color: rgba(255,255,255,0.7);
    text-transform: uppercase; letter-spacing: 1px;
    margin-top: 4px;
}
.geo-map-legend-bar {
    flex: 1; height: 8px; border-radius: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.18), #FFEA8A, #FFB347, #ff6B47, #ff3d3d);
}

.geo-widget-body {
    padding: 14px 20px 18px;
}

.geo-client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}
.geo-client {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    color: #fff;
}
.geo-client:hover { background: rgba(255,255,255,0.13); }
.geo-client.is-dormant { background: rgba(255,255,255,0.04); opacity: 0.82; }
.geo-client.is-dormant:hover { opacity: 1; }

/* Buckets d'anciennete d'activite (Tournee du jour) */
.geo-bucket { margin-bottom: 16px; }
.geo-bucket:last-child { margin-bottom: 0; }
.geo-bucket-header {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: rgba(255,255,255,0.92);
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.08);
    border-left: 4px solid rgba(255,255,255,0.6);
}
.geo-bucket-count {
    margin-left: auto;
    background: rgba(255,255,255,0.18);
    color: #fff;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.geo-bucket.bucket-cur   .geo-bucket-header { border-left-color: #2ECC71; background: rgba(46,204,113,0.18); }
.geo-bucket.bucket-prev  .geo-bucket-header { border-left-color: #F1C40F; background: rgba(241,196,15,0.16); }
.geo-bucket.bucket-older .geo-bucket-header { border-left-color: #E67E22; background: rgba(230,126,34,0.16); }
.geo-bucket.bucket-never .geo-bucket-header { border-left-color: rgba(255,255,255,0.45); background: rgba(0,0,0,0.25); }
/* Cards plus discretes pour les buckets "plus anciens" */
.geo-bucket.bucket-older .geo-client,
.geo-bucket.bucket-never .geo-client { opacity: 0.82; }
.geo-bucket.bucket-older .geo-client:hover,
.geo-bucket.bucket-never .geo-client:hover { opacity: 1; }

.geo-status {
    display: inline-block;
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 3px 8px; border-radius: 999px;
    margin-bottom: 6px; white-space: nowrap;
}
.geo-status-inactif { background: rgba(0,0,0,0.45); color: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.15); }
.geo-status-dormant { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85); border: 1px dashed rgba(255,255,255,0.30); }
.geo-status-risk    { background: rgba(196,30,58,0.30); color: #fff; border: 1px solid rgba(196,30,58,0.65); }
.geo-client-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.geo-client-name { font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.15; }
.geo-client-loc { font-size: 0.7rem; color: rgba(255,255,255,0.7); margin-top: 2px; }
.geo-client-dist {
    background: #fff; color: #4A148C;
    padding: 4px 10px; border-radius: 999px;
    font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; font-weight: 700;
    white-space: nowrap; line-height: 1;
}
.geo-client-stats {
    display: flex; gap: 14px; font-size: 0.72rem;
    color: rgba(255,255,255,0.78);
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 6px; margin-top: 6px;
}
.geo-client-stats strong { color: #fff; font-weight: 700; }
.geo-sugg { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.geo-sugg-title { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.7); }
.geo-sugg-item {
    background: rgba(0,0,0,0.25);
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 0.78rem;
    display: flex; justify-content: space-between; gap: 8px; align-items: center;
}
.geo-sugg-item.prioritaire { border-left: 3px solid var(--red); }
.geo-sugg-item.surveiller  { border-left: 3px solid #00BFA5; }
.geo-sugg-ref { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.geo-sugg-desig { color: rgba(255,255,255,0.82); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-sugg-pill {
    font-size: 0.62rem; padding: 2px 7px; border-radius: 999px;
    font-weight: 700; white-space: nowrap;
}
.geo-sugg-pill.prioritaire { background: var(--red); color: #fff; }
.geo-sugg-pill.surveiller  { background: transparent; color: #00BFA5; border: 1px solid #00BFA5; }

.geo-action {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 8px; padding: 5px 10px;
    background: rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    color: #fff; text-decoration: none;
    font-size: 0.72rem; font-weight: 600;
    cursor: pointer;
}
.geo-action:hover { background: rgba(255,255,255,0.25); }

/* BlitzML suggestions block */
.ml-card { padding: 0; overflow: hidden; }
.ml-hero {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 50%, #8E24AA 100%);
    color: #fff;
    border-bottom: 1px solid #4A148C;
}
.ml-robot {
    font-size: 3.4rem; line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
    animation: ml-robot-float 4s ease-in-out infinite;
}
@keyframes ml-robot-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.ml-hero-body { flex: 1; min-width: 0; }
.ml-hero-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem; font-weight: 700; line-height: 1.1;
    letter-spacing: 0.5px;
}
.ml-brand {
    background: linear-gradient(90deg, #FFEB3B 0%, #FF9800 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.ml-hero-sub {
    font-size: 0.82rem; color: rgba(255,255,255,0.78); margin-top: 4px;
}
.ml-count {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 14px; background: rgba(255,255,255,0.12);
    border-radius: var(--radius-md); min-width: 80px;
}
.ml-count-num {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.8rem; font-weight: 700; line-height: 1;
}
.ml-count-lbl {
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px;
    color: rgba(255,255,255,0.85); margin-top: 2px;
}

.ml-list { display: flex; flex-direction: column; }
.ml-item {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 18px; align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.ml-item:last-child { border-bottom: none; }
.ml-item:hover { background: var(--bg3); }
.ml-niveau-prioritaire { border-left: 4px solid var(--red); background: linear-gradient(90deg, #C41E3A0A 0%, transparent 30%); }
.ml-niveau-surveiller  { border-left: 4px solid #00BFA5; }
.ml-niveau-info        { border-left: 4px solid #4A90D9; }

.ml-item-left {
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.ml-item-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem; font-weight: 700;
    padding: 5px 12px; border-radius: 999px;
    letter-spacing: 0.5px;
    white-space: nowrap; line-height: 1;
    text-transform: uppercase;
}
/* PRIORITAIRE : badge plein rouge + pulse + ombre */
.ml-niveau-prioritaire .ml-item-badge {
    background: linear-gradient(135deg, #C41E3A 0%, #8B0000 100%);
    color: #ffffff;
    border: 1px solid #8B0000;
    box-shadow: 0 0 12px rgba(196,30,58,0.45), 0 2px 4px rgba(0,0,0,0.18);
    animation: ml-prio-pulse 1.8s ease-in-out infinite;
}
@keyframes ml-prio-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(196,30,58,0.45), 0 2px 4px rgba(0,0,0,0.18); }
    50%      { box-shadow: 0 0 22px rgba(196,30,58,0.75), 0 2px 4px rgba(0,0,0,0.18); }
}
/* A SURVEILLER : badge outline cyan, plat, sans animation */
.ml-niveau-surveiller .ml-item-badge {
    background: transparent;
    color: #00BFA5;
    border: 1.5px dashed #00BFA5;
}
body.light .ml-niveau-surveiller .ml-item-badge { color: #00897B; border-color: #00897B; }
.ml-niveau-info .ml-item-badge {
    background: #4A90D922; color: #4A90D9; border: 1px solid #4A90D955;
}

.trend-arrow {
    display: inline-block; font-size: 0.7rem; font-weight: 700;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.trend-up      { background: #2ECC7122; color: var(--green); border: 1px solid #2ECC7155; }
.trend-down    { background: #C41E3A22; color: var(--red);   border: 1px solid #C41E3A55; }
.trend-stable  { background: var(--bg3); color: var(--muted); border: 1px solid var(--border); }
.trend-unknown { background: transparent; color: var(--border); border: 1px solid var(--border); }

.ml-item-main { min-width: 0; }
.ml-item-ref {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.95rem; font-weight: 700; color: var(--red);
}
.ml-item-desig {
    font-size: 0.88rem; color: var(--text); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ml-item-meta {
    font-size: 0.72rem; color: var(--muted); margin-top: 3px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.ml-item-stats {
    display: flex; gap: 18px; align-items: center;
}
.ml-stat {
    display: flex; flex-direction: column; align-items: center;
    min-width: 60px;
}
.ml-stat-val {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem; font-weight: 700; line-height: 1;
    color: var(--text); font-variant-numeric: tabular-nums;
}
.ml-stat-lbl {
    font-size: 0.62rem; color: var(--muted); margin-top: 3px;
    text-transform: uppercase; letter-spacing: 0.5px; text-align: center;
}
.ml-stat-alert .ml-stat-val { color: var(--red); }

.ml-explain {
    display: flex; gap: 14px;
    margin-top: 12px; padding: 14px 18px;
    background: linear-gradient(135deg, #4A148C12 0%, #8E24AA08 100%);
    border: 1px dashed #8E24AA66;
    border-radius: var(--radius-md);
}
.ml-explain-icon { font-size: 1.6rem; line-height: 1.2; }
.ml-explain-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.92rem; font-weight: 700; color: var(--text);
    margin-bottom: 4px;
}
.ml-explain-text {
    font-size: 0.82rem; color: var(--muted); line-height: 1.55;
}
body.light .ml-explain { background: linear-gradient(135deg, #4A148C08 0%, #8E24AA05 100%); }

@media (max-width: 720px) {
    .ml-item { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; }
    .ml-item-stats { justify-content: space-around; width: 100%; }
    .ml-hero { padding: 14px 16px; }
    .ml-robot { font-size: 2.6rem; }
}

/* Brand logos (enseignes magasins) */
.brand-logo {
    width: auto;
    object-fit: contain;
    background: #ffffff;
    border-radius: 6px;
    padding: 3px 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
    flex-shrink: 0;
}
.brand-logo-lg {
    width: auto;
    object-fit: contain;
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

/* Client portfolio cards (commercial view) */
button.nav-tab {
    background: transparent; font-family: inherit;
}
.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.client-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
}
.client-card:hover {
    transform: translateY(-2px);
    border-color: var(--red);
    box-shadow: 0 6px 18px rgba(196,30,58,0.18);
}
.client-card.has-alert { border-left: 3px solid var(--red); }
.client-card.has-retard { border-top: 2px solid var(--orange); }
.client-card-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem; font-weight: 700; color: var(--text);
    line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis;
}
.client-card-tiers {
    font-size: 0.7rem; color: var(--muted); letter-spacing: 1px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.client-card-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px;
    font-size: 0.78rem;
}
.client-card-stat { display: flex; flex-direction: column; gap: 1px; }
.client-card-stat .lbl { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.client-card-stat .val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.client-card-badges { display: flex; gap: 4px; flex-wrap: wrap; }

/* Client inactif (sans commande simulee) */
.client-card.is-inactive {
    background: var(--bg3);
    opacity: 0.85;
}
.client-card.is-inactive .client-card-name { color: var(--muted); }
.client-card.is-inactive:hover { opacity: 1; }
.inactive-banner {
    font-size: 0.65rem; font-weight: 600;
    color: var(--muted);
    text-transform: uppercase; letter-spacing: 1.5px;
    background: var(--bg2);
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: 3px 8px; text-align: center;
}

/* Segmented filter (actifs / tous / dormants) */
.seg-filter {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg2);
}
.seg-btn {
    background: transparent;
    border: none;
    padding: 7px 14px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    border-right: 1px solid var(--border);
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { color: var(--text); background: var(--bg3); }
.seg-btn.active {
    background: var(--red);
    color: #fff;
}

/* Footer "BlitzML suggestion" sur les cards portefeuille */
.ml-footer {
    margin-top: auto;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.74rem; line-height: 1.25;
    border: 1px solid;
}
.ml-footer-icon { font-size: 1.05rem; line-height: 1; }
.ml-footer-bot {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.30));
    flex-shrink: 0;
}
.ml-footer-prio .ml-footer-bot {
    filter: drop-shadow(0 0 4px rgba(196,30,58,0.55));
    animation: ml-footer-bot-pulse 2.4s ease-in-out infinite;
}
@keyframes ml-footer-bot-pulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
.ml-footer-text { flex: 1; min-width: 0; }
.ml-footer-text strong { font-weight: 700; }
.ml-footer-extra { font-size: 0.68rem; opacity: 0.85; }

.ml-footer-prio {
    background: linear-gradient(90deg, #C41E3A22 0%, #C41E3A0A 100%);
    color: var(--red);
    border-color: #C41E3A55;
}
.ml-footer-surv {
    background: rgba(0,191,165,0.10);
    color: #00897B;
    border-color: rgba(0,191,165,0.45);
    border-style: dashed;
}
.ml-footer-none {
    background: var(--bg3);
    color: var(--muted);
    border-color: var(--border);
}

body.dark .ml-footer-surv { color: #4DD0C2; }

/* Hero KPI tiles (commercial view) */
.hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.hero-tile {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 22px;
    border-radius: var(--radius-md);
    color: #ffffff;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    position: relative; overflow: hidden;
}
.hero-tile::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 60%);
    pointer-events: none;
}
.hero-tile-icon {
    font-size: 2.4rem; line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.hero-tile-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.hero-tile-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.74rem; font-weight: 600;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase; letter-spacing: 2px;
    margin-bottom: 4px;
}
.hero-tile-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.4rem; font-weight: 700;
    line-height: 1.1; letter-spacing: 0.5px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
    font-variant-numeric: tabular-nums;
}
.hero-tile-sub {
    font-size: 0.78rem; color: rgba(255,255,255,0.80); margin-top: 4px;
}
.hero-tile-commission {
    background: linear-gradient(135deg, #1E8449 0%, #27AE60 60%, #2ECC71 100%);
    border: 1px solid #1E8449;
}
.hero-tile-commandes {
    background: linear-gradient(135deg, #1A4A8A 0%, #2980B9 60%, #4A90D9 100%);
    border: 1px solid #1A4A8A;
}
.hero-tile-retours {
    background: linear-gradient(135deg, #8B0000 0%, #C41E3A 60%, #E74C3C 100%);
    border: 1px solid #8B0000;
}

/* Role badge in header (used by /commercial/ and /dirco/) */
.role-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px; border-radius: 999px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    border: 1px solid; line-height: 1;
}
.role-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
    animation: role-badge-pulse 2s ease-in-out infinite;
}
.role-commercial {
    background: linear-gradient(135deg, #00BFA5 0%, #00897B 100%);
    color: #ffffff; border-color: #00BFA5;
    box-shadow: 0 0 14px rgba(0,191,165,0.45), 0 2px 6px rgba(0,0,0,0.18);
}
.role-commercial .role-badge-dot { background: #ffffff; }
.role-dirco {
    background: linear-gradient(135deg, #8E44AD 0%, #6C3483 100%);
    color: #ffffff; border-color: #8E44AD;
    box-shadow: 0 0 14px rgba(142,68,173,0.45), 0 2px 6px rgba(0,0,0,0.18);
}
.role-dirco .role-badge-dot { background: #ffffff; }
.role-dirigeant {
    background: linear-gradient(135deg, #C41E3A 0%, #8B0000 100%);
    color: #ffffff; border-color: #8B0000;
    box-shadow: 0 0 14px rgba(196,30,58,0.45), 0 2px 6px rgba(0,0,0,0.18);
}
.role-dirigeant .role-badge-dot { background: #ffffff; }
@keyframes role-badge-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.page { display: none; padding: 20px 24px; flex: 1; }
.page.active { display: block; animation: fadeIn 0.15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.card-title { font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.card-a { border-top: 2px solid var(--red); }
.card-b { border-top: 2px solid var(--teal); }

.top-row  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.main-row { display: grid; grid-template-columns: 280px 1fr 1fr; gap: 14px; margin-bottom: 14px; }

input[type=text], input[type=password] { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text); font-size: 0.85rem; margin-bottom: 8px; transition: border-color 0.2s; }
input:focus { outline: none; border-color: var(--red); }

.client-wrap { position: relative; }
#clientDropdown { display:none; border:1px solid var(--border); border-radius:var(--radius-md); max-height:220px; overflow-y:auto; background:var(--bg3); position:absolute; width:100%; z-index:200; box-shadow: 0 8px 32px #00000060; }
.client-opt { padding:9px 13px; cursor:pointer; border-bottom:1px solid var(--border); font-size:0.82rem; }
.client-opt:hover { background: var(--bg4); }
.client-opt strong { color: var(--red); }
#clientInfo { display:none; font-size:0.75rem; color:var(--muted); background:var(--bg3); padding:6px 10px; border-radius:var(--radius-sm); margin-bottom:0; border-left: 2px solid var(--red); }

.pal-opts { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.pal-opt { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 6px; text-align: center; cursor: pointer; transition: all 0.15s; background: var(--bg3); }
.pal-opt:hover { border-color: var(--muted); }
.pal-opt.sel-a { border-color: var(--red); background: var(--bg4); box-shadow: 0 0 12px var(--red-glow); }
.pal-opt.sel-b { border-color: var(--teal); background: var(--bg4); box-shadow: 0 0 12px var(--teal)20; }
.pal-opt .pname { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.pal-opt .pdet  { font-size: 0.68rem; color: var(--muted); margin: 2px 0; }
.pal-opt .pprix { font-size: 0.75rem; font-weight: 700; }
.pal-opt.sel-a .pprix { color: var(--red); }
.pal-opt.sel-b .pprix { color: var(--teal); }

.refs-container { max-height: 480px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.refs-container::-webkit-scrollbar { width: 4px; }
.refs-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.ref-row { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.ref-row:hover { background: var(--bg3); }
.ref-name { flex: 1; min-width: 0; }
.ref-name strong { color: var(--red); font-size: 0.82rem; }
.ref-name .meta { font-size: 0.66rem; color: var(--muted); }
.qty-grp { display: flex; align-items: center; gap: 3px; }
.qbtn { width: 20px; height: 20px; border-radius: 4px; border: 1px solid; font-size: 0.8rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: all 0.1s; }
.qbtn-a { border-color: var(--red-dim); background: var(--bg3); color: var(--red); }
.qbtn-a:hover { background: var(--red); color: white; }
.qbtn-b { border-color: var(--teal-dim); background: var(--bg3); color: var(--teal); }
.qbtn-b:hover { background: var(--teal-dim); color: white; }
.qval { min-width: 22px; text-align: center; font-size: 0.82rem; font-weight: 700; }
.qval-a { color: var(--red); } .qval-b { color: var(--teal); }
.sep { color: var(--border); }

.pal-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.pal-table th { padding: 6px 8px; text-align: right; font-size: 0.68rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); letter-spacing: 1px; text-transform: uppercase; }
.pal-table th:first-child { text-align: left; }
.pal-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: right; color: var(--text); }
.pal-table td:first-child { text-align: left; }
.pal-table tr:hover td { background: var(--bg3); }
.pal-table .total-row td { font-weight: 700; background: var(--bg3); border-top: 1px solid var(--border); color: var(--text); }
.pal-table .pal-row td { color: var(--muted); font-style: italic; }
.btn-rm { background: none; border: none; color: var(--border); cursor: pointer; font-size: 0.85rem; padding: 0 2px; transition: color 0.1s; }
.btn-rm:hover { color: var(--red); }
.vert { color: var(--green); font-weight: 600; } .rouge { color: var(--red); font-weight: 600; }

.sbar { border-radius: var(--radius-sm); padding: 7px 12px; font-size: 0.75rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; margin-top: 10px; background: var(--bg3); border: 1px solid var(--border); }
.sbar-a span { color: var(--red); font-weight: 700; }
.sbar-b span { color: var(--teal); font-weight: 700; }

.sim-btn { display: block; width: 100%; padding: 14px; background: var(--red); color: white; border: none; border-radius: var(--radius-md); font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 2px; cursor: pointer; transition: all 0.2s; box-shadow: 0 0 20px var(--red-glow); }
.sim-btn:hover { background: var(--red-dim); box-shadow: 0 0 40px var(--red-glow); }
.sim-btn:disabled { background: var(--bg4); color: var(--muted); box-shadow: none; cursor: not-allowed; }

.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.res-col { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; background: var(--bg2); }
.res-col.rc-a { border-top: 2px solid var(--red); }
.res-col.rc-b { border-top: 2px solid var(--teal); }
.res-col.alert-col { border-color: var(--red); background: #C41E3A08; }
.res-col h3 { font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.rc-a h3 { color: var(--red); } .rc-b h3 { color: var(--teal); }

.compte { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 14px; }
.compte td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
.compte td:nth-child(2) { text-align: right; color: var(--muted); font-size: 0.72rem; }
.compte td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.compte .row-sep td { border-top: 1px solid var(--border); padding-top: 8px; }
.compte .row-final td { font-weight: 700; font-size: 0.9rem; background: var(--bg3); }

.seuil-alert { background: #C41E3A18; border: 1px solid var(--red); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 12px; font-size: 0.82rem; color: #FF6B6B; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.seuil-ok    { background: #2ECC7118; border: 1px solid var(--green); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 12px; font-size: 0.82rem; color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 8px; }

.tarif-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; background: var(--bg3); }
.tarif-card.best { border-color: var(--green); }
.tc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; }
.tc-name { font-weight: 700; font-size: 0.85rem; color: var(--text); }
.tc-svc  { font-size: 0.72rem; color: var(--muted); }
.tc-amt  { font-size: 1.1rem; font-weight: 700; }
.rc-a .tc-amt { color: var(--red); } .rc-b .tc-amt { color: var(--teal); }
.tc-marge { font-size: 0.78rem; display: flex; justify-content: space-between; background: var(--bg4); padding: 5px 8px; border-radius: var(--radius-sm); margin-bottom: 5px; color: var(--muted); }
.tc-det { font-size: 0.7rem; color: var(--muted); }
.det-r  { display: flex; justify-content: space-between; padding: 1px 0; }

.taux-pill { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-lg); margin-left: 4px; }
.pill-green  { background: #2ECC7122; color: var(--green); border: 1px solid #2ECC7144; }
.pill-orange { background: #F39C1222; color: var(--orange); border: 1px solid #F39C1244; }
.pill-red    { background: #C41E3A22; color: #FF6B6B;      border: 1px solid var(--red-dim); }
.pill-grey   { background: rgba(150,150,150,0.12); color: var(--muted); border: 1px solid var(--border); }

/* Delta pills (variations vs M-1 / N-1 dans la vue dirco) */
.delta-pill { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.delta-up   { background: #2ECC7122; color: #2ECC71; border: 1px solid #2ECC7144; }
.delta-down { background: #C41E3A22; color: #FF6B6B; border: 1px solid var(--red-dim); }
.delta-flat { background: rgba(150,150,150,0.12); color: var(--muted); border: 1px solid var(--border); }

.badge { display:inline-block; color:white; font-size:var(--font-xs); padding:2px 7px; border-radius:var(--radius-md); margin-left:4px; font-weight:600; }
.b-red  { background: var(--red); } .b-teal { background: var(--teal-dim); }
.b-green{ background: #1E8449; }    .b-warn { background: var(--red); } .b-ok { background: #1E8449; }

.cmp-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.cmp-table th { background: var(--bg3); color: var(--muted); padding: 8px 12px; text-align: center; font-size: 0.72rem; font-weight: 600; border-bottom: 1px solid var(--border); letter-spacing: 1px; text-transform: uppercase; }
.cmp-table th:first-child { text-align: left; }
.cmp-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: center; color: var(--text); }
.cmp-table td:first-child { text-align: left; color: var(--muted); font-size: 0.8rem; }
.cmp-table .win { background: #2ECC7110; }
.cmp-table .big { font-size: 0.92rem; font-weight: 700; }

.export-btn { padding: 8px 16px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.82rem; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.15s; white-space: nowrap; }
.export-btn:hover { border-color: var(--text); color: var(--text); }
#btnToggleCalendar { color: var(--muted); }
#btnToggleCalendar:hover { border-color: var(--red); color: var(--red); }

.histo-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.histo-table th { background: var(--bg3); color: var(--muted); padding: 10px 14px; text-align: left; font-size: 0.72rem; font-weight: 600; border-bottom: 1px solid var(--border); letter-spacing: 1px; text-transform: uppercase; }
.histo-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.histo-table tr:hover td { background: var(--bg3); }
.histo-link { color: var(--red); cursor: pointer; text-decoration: underline; font-size: 0.78rem; }

.loading { text-align:center; padding:32px; color:var(--muted); }
.empty   { text-align:center; padding:32px; color:var(--border); font-size:0.88rem; }
.kpi-src { position:relative; display:inline-flex; align-items:center; }
.kpi-src-icon { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border-radius:50%; border:1px solid var(--muted); color:var(--muted); font-size:0.55rem; font-weight:700; cursor:default; margin-left:4px; line-height:1; flex-shrink:0; }
.kpi-src-icon:hover { border-color:var(--text); color:var(--text); }
.kpi-src-tip { display:none; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--bg4); border:1px solid var(--border); border-radius:6px; padding:6px 10px; font-size:0.68rem; color:var(--muted); white-space:nowrap; z-index:200; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,0.4); }
.kpi-src-tip strong { color:var(--text); }
.kpi-src-tip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--border); }
.kpi-src-icon:hover + .kpi-src-tip,
.kpi-src:hover .kpi-src-tip { display:block; }
details summary { cursor: pointer; font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
details summary:hover { color: var(--text); }

/* Commercial badges */
.vrp-badge { display:inline-block; font-size:0.68rem; font-weight:700; padding:2px 7px; border-radius:var(--radius-lg); white-space:nowrap; }

/* Commandes */
#commandesContent { max-width: 100%; margin: 0 auto; }
.cmd-table { width:100%; border-collapse:collapse; font-size:0.82rem; margin: 0 auto; }
.cmd-table th { background:var(--bg3); color:var(--muted); padding:8px 12px; text-align:center; font-size:0.72rem; font-weight:600; border-bottom:1px solid var(--border); border-right:1px solid rgba(42,42,53,0.3); letter-spacing:1px; text-transform:uppercase; }
.cmd-table th:last-child { border-right:none; }
.cmd-table td { padding:9px 12px; border-bottom:1px solid var(--border); border-right:1px solid rgba(42,42,53,0.3); color:var(--text); vertical-align:middle; text-align:center; }
.cmd-table td:last-child { border-right:none; }
.cmd-table td:nth-child(1) { text-align:center; }
.cmd-table td:nth-child(2) { text-align:left; }
.cmd-table td:nth-child(3) { text-align:left; }
.cmd-table tr:hover td { background:var(--bg3); cursor:pointer; }
.cmd-table tr.alerte td { background:#C41E3A08; }
.cmd-table tr.alerte:hover td { background:#C41E3A15; }
.alerte-badge { display:inline-block; background:var(--red); color:white; font-size:var(--font-xs); padding:2px 7px; border-radius:var(--radius-md); font-weight:700; }
.ok-badge { display:inline-block; background:#1E8449; color:white; font-size:var(--font-xs); padding:2px 7px; border-radius:var(--radius-md); font-weight:700; }
.grp-badge { display:inline-block; background:#1A4A8A; color:var(--blue); border:1px solid var(--blue); font-size:var(--font-xs); padding:2px 7px; border-radius:var(--radius-md); font-weight:700; }
.cmd-table tr.groupage td { background:#4A90D908; border-left: 3px solid #4A90D9; }
.cmd-table tr.groupage:hover td { background:#4A90D915; }
.cmd-table tr.selected td { background: rgba(196,30,58,0.25) !important; font-weight: 600; }
.cmd-table tr.selected td:first-child { border-left: 4px solid var(--red); padding-left: 8px; }
.cmd-table tr.selected:hover td { background: rgba(196,30,58,0.32) !important; }
.jour-btn { padding:5px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg3); color:var(--muted); font-size:0.75rem; cursor:pointer; transition:all 0.15s; }
.jour-btn:hover { border-color:var(--red); color:var(--red); }
.jour-btn.active { border-color:var(--red); background:var(--red); color:white; }
.kpi-mini { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.kpi-mini-box { background:var(--bg3); border-radius:var(--radius-md); padding:10px; text-align:center; border-left: 2px solid var(--border); }
.kpi-mini-box:first-child { border-left: none; }
.kpi-mini-box .lbl { font-size:0.68rem; color:var(--muted); margin-bottom:3px; }
.kpi-mini-box .val { font-size:1rem; font-weight:700; }

#statsMois { border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 20px !important; }

#calendarGrid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 8px !important;
    grid-auto-rows: auto;
}
.health-bar-wrap { flex:1; background:var(--bg3); border-radius:3px; height:14px; overflow:hidden; }
.health-bar-fill { height:100%; border-radius:3px; opacity:0.8; }

/* Utility text classes */
.text-muted  { color: var(--muted) !important; }
.text-red    { color: var(--red) !important; }
.text-green  { color: var(--green) !important; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Primary button */
.btn-primary {
    background: var(--red);
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    color: white;
    cursor: pointer;
    font-size: var(--font-base);
    font-weight: 600;
    transition: background 0.15s;
}
.btn-primary:hover { background: var(--red-dim); }

/* Filter buttons */
.btn-filter {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-filter:hover {
    border-color: var(--text);
    color: var(--text);
}
.btn-filter.active {
    background: var(--red);
    border-color: var(--red);
    color: white;
}

/* Ghost button */
.btn-ghost {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    color: var(--muted);
    cursor: pointer;
    font-size: var(--font-base);
    transition: all 0.15s;
}
.btn-ghost:hover { border-color: var(--text); color: var(--text); }

/* Sync badge */
.sync-badge {
    font-size: 0.8rem;
    color: var(--muted);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Status dot */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    background: var(--muted);
}
.status-dot.online { background: var(--green); }

/* Green export button variant */
.export-btn.green {
    border-color: var(--green);
    color: var(--green);
}

/* Fix .b-warn to be orange not red */
.b-warn { background: var(--orange) !important; }

/* Global scrollbar styling */
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Page title styling */
.page-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

/* Glassmorphism header */
.hdr {
    backdrop-filter: blur(10px);
}

/* Subtle card shadow */
.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Responsive grid - tablet view (1024px and below) */
@media (max-width: 1024px) {
    .top-row { grid-template-columns: 1fr 1fr; }
    .main-row { grid-template-columns: 1fr 1fr; }
    .results-grid { grid-template-columns: 1fr; }
    #statsMois { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Flash button (gros �clair) */
.btn-flash {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--red);
    border: none;
    color: white;
    font-size: 2.2rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 0 0 var(--red-glow);
    animation: flashGlow 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.btn-flash:hover {
    background: var(--red-dim);
    transform: scale(1.1);
    box-shadow: 0 0 24px var(--red-glow);
}
@keyframes flashGlow {
    0% { box-shadow: 0 0 0 0 var(--red-glow); }
    50% { box-shadow: 0 0 0 8px rgba(196, 30, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0); }
}

/* Calendar styling - Compact circle days */
#calendarContainer {
    width: 100%;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
#calendarGrid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 8px !important;
    align-items: center;
    justify-items: center;
}
.calendar-day {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--muted);
    padding: 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg3);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    border-right: 1px solid rgba(120, 120, 160, 0.2);
    border-bottom: 1px solid rgba(120, 120, 160, 0.15);
    margin-right: 7px;
    margin-bottom: 7px;
}
.calendar-day:nth-child(7n) {
    border-right: none;
    margin-right: 0;
}
.calendar-day:nth-last-child(-n+7) {
    border-bottom: none;
    margin-bottom: 0;
}
.calendar-day:hover {
    border-color: var(--red);
    background: var(--bg4);
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(196, 30, 58, 0.3);
}
.calendar-day.today {
    border-color: var(--red);
    border-width: 2.5px;
    background: rgba(196, 30, 58, 0.25);
}
.calendar-day.active {
    background: var(--red);
    color: white;
    border-color: var(--red);
    box-shadow: 0 0 16px rgba(196, 30, 58, 0.5);
}
.calendar-day.has-cmd {
    border-color: var(--orange);
    border-width: 2.5px;
    background: rgba(243, 156, 18, 0.25);
}
.calendar-day.has-cmd.today {
    background: rgba(196, 30, 58, 0.35);
    border-color: var(--red);
}
.calendar-day.has-cmd.active {
    background: var(--red);
    border-color: var(--red);
}
.calendar-day-num {
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
}
.calendar-day-count {
    font-size: 0.5rem;
    color: var(--muted);
    line-height: 1;
    margin-top: 0;
}
.calendar-day.active .calendar-day-count,
.calendar-day.active .calendar-day-num {
    color: white;
}
.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 12px;
    padding: 0 0 8px 0;
    border-bottom: 0.5px solid var(--border);
}
.calendar-header-day {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 0;
}

/* Calendar navigation */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.calendar-nav-btn {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
}
.calendar-nav-btn:hover {
    border-color: var(--red);
    color: var(--red);
}
.calendar-nav-title {
    font-weight: 600;
    color: var(--text);
    font-size: 0.85rem;
    text-transform: capitalize;
}

/* Responsive grid - tablet view (1024px and below) */
@media (max-width: 1024px) {
    .top-row { grid-template-columns: 1fr 1fr; }
    .main-row { grid-template-columns: 1fr 1fr; }
    .results-grid { grid-template-columns: 1fr; }
    #statsMois { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Responsive grid - mobile view (768px and below) */
@media (max-width: 768px) {
    .top-row { grid-template-columns: 1fr; }
    .main-row { grid-template-columns: 1fr; }
    .hdr { flex-wrap: wrap; height: auto; padding: 10px; }
    .nav-tabs { gap: 4px; flex-wrap: wrap; }
    #statsMois { grid-template-columns: repeat(2, 1fr) !important; }
    .page { padding: 14px; }
    .btn-flash { width: 48px; height: 48px; font-size: 1.4rem; }
    #btnToggleCalendar { font-size: 0.75rem; }
}

/* ── Tracking panel ──────────────────────────────────────────────────────── */
.trk-input-tab {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 14px;
    transition: all 0.15s;
}
.trk-input-tab:hover { color: var(--text); border-color: var(--muted); }
.trk-input-tab--active { background: var(--red); color: #fff; border-color: var(--red); }

.trk-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    overflow: hidden;
}
.trk-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
}
.trk-card-id { display: flex; align-items: center; gap: 8px; }
.trk-uuid { font-family: monospace; font-size: 0.78rem; color: var(--muted); }
.trk-card-meta { padding: 6px 14px; font-size: 0.75rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.trk-link { font-size: 0.72rem; color: var(--blue); text-decoration: none; }
.trk-link:hover { text-decoration: underline; }

.trk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}
.trk-badge--critical { background: #C41E3A22; color: var(--red); border: 1px solid #C41E3A44; }
.trk-badge--warning  { background: #F39C1222; color: var(--orange); border: 1px solid #F39C1244; }
.trk-badge--info     { background: #4A90D922; color: var(--blue); border: 1px solid #4A90D944; }
.trk-badge--ok       { background: #2ECC7122; color: var(--green); border: 1px solid #2ECC7144; }

.trk-anomalies { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.trk-anomaly-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}
.trk-anomaly-row--critical { background: #C41E3A14; border: 1px solid #C41E3A33; }
.trk-anomaly-row--warning  { background: #F39C1214; border: 1px solid #F39C1233; }
.trk-anomaly-row--info     { background: #4A90D914; border: 1px solid #4A90D933; }
.trk-anomaly-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.4; }
.trk-anomaly-desc { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.trk-anomaly-meta { font-size: 0.7rem; color: var(--muted); }
.trk-anomaly-meta code { background: var(--bg4); padding: 1px 4px; border-radius: 3px; font-size: 0.68rem; }

.trk-events-details { }
.trk-events-summary {
    padding: 8px 14px;
    font-size: 0.75rem;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.trk-events-summary:hover { color: var(--text); }
.trk-events-summary::-webkit-details-marker { display: none; }

.trk-timeline { padding: 4px 14px 12px 14px; display: flex; flex-direction: column; gap: 0; }
.trk-timeline-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    border-left: 2px solid var(--border);
    padding-left: 12px;
    position: relative;
}
.trk-timeline-row--anom { border-left-color: var(--orange); }
.trk-timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
    margin-top: 4px;
    position: absolute;
    left: -5px;
}
.trk-timeline-dot--anom { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.trk-timeline-body { padding-left: 4px; }
.trk-timeline-label { font-size: 0.8rem; color: var(--text); font-weight: 500; }
.trk-timeline-meta { font-size: 0.68rem; color: var(--muted); margin-top: 1px; }
.trk-timeline-meta code { background: var(--bg4); padding: 1px 4px; border-radius: 3px; font-size: 0.65rem; }

/* ─── Rupture ML ─────────────────────────────────────────────────────────── */
.stat-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.stat-card--red    { border-color: var(--red); }
.stat-card--orange { border-color: #f59e0b; }
.stat-val { font-size: 1.8rem; font-weight: 700; color: var(--text); line-height: 1; }
.stat-lbl { font-size: 0.72rem; color: var(--muted); margin-top: 6px; }

.com-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    min-width: 140px;
}
.com-card:hover       { border-color: var(--text); }
.com-card--active     { border-color: var(--blue, #3b82f6); background: var(--bg3); }
.com-name  { font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; }
.com-stats { display: flex; gap: 8px; }
.badge-red    { font-size: 0.75rem; color: var(--red); }
.badge-orange { font-size: 0.75rem; color: #f59e0b; }

.alerte-badge         { font-size: 0.72rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; display: inline-block; }
.alerte-badge--red    { background: rgba(239,68,68,.15); color: var(--red); }
.alerte-badge--orange { background: rgba(245,158,11,.15); color: #f59e0b; }

.sousref-kpi-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    min-width: 210px;
    flex: 0 0 auto;
}
.sousref-kpi-card:hover        { border-color: var(--text); }
.sousref-kpi-card--active      { border-color: var(--blue, #3b82f6); background: var(--bg3); }
.sousref-kpi-code              { font-weight: 700; font-size: 1rem; letter-spacing: .04em; }
.sousref-kpi-grid              { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; }
.sousref-kpi-stat              { text-align: center; }
.sousref-kpi-val               { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.sousref-kpi-lbl               { font-size: 0.62rem; color: var(--muted); margin-top: 1px; }
.sousref-funnel                { display: flex; flex-direction: column; gap: 3px; }
.sousref-funnel-row            { display: flex; justify-content: space-between; align-items: baseline; }
.sousref-funnel-lbl            { font-size: 0.72rem; color: var(--text); }
.sousref-funnel-val            { font-size: 0.78rem; }
.sousref-funnel-exclu .sousref-funnel-lbl { color: var(--muted); }

.ref-tag { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; font-size: 0.78rem; font-family: monospace; }

#ruptureTableBody tr:hover { background: var(--bg2); }
#ruptureTableBody td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }

.val-danger { color: var(--red); font-weight: 600; }
.val-warn   { color: #f59e0b;   font-weight: 500; }
.val-ok     { color: var(--green, #22c55e); }

.niveau-btn.active { background: var(--bg3) !important; }

.mode-btn { transition: background 0.15s, color 0.15s; }
.mode-btn:hover:not(.mode-btn--active) { background: var(--bg3); color: var(--text); }
.mode-btn--active { background: var(--red) !important; color: #fff !important; }
.mode-btn--active span { color: rgba(255,255,255,0.75) !important; }

/* ─── Rupture — cards client ─────────────────────────────────────────────── */
.client-rupture-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--red);
    border-radius: 10px;
    overflow: hidden;
}
.client-rupture-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg3);
}
.client-rupture-name { font-weight: 600; font-size: 0.95rem; }
.client-rupture-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

.ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.ref-table thead tr {
    background: var(--bg2);
}
.ref-table th {
    padding: 7px 12px;
    text-align: left;
    font-weight: 500;
    color: var(--muted);
    font-size: 0.72rem;
    border-bottom: 1px solid var(--border);
}
.ref-table th.rc { text-align: center !important; }
.ref-table th.rl { text-align: left !important; }
.ref-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.ref-table td.rc { text-align: center !important; }
.ref-table td.rl { text-align: left !important; }
.ref-table tbody tr:last-child td { border-bottom: none; }
.ref-table tbody tr:hover { background: var(--bg3); }

/* ── Tooltip infobulles colonnes ──────────────────────────────────────────── */
.th-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: default;
}
.th-tip .tip-icon {
    font-size: 0.68rem;
    color: var(--muted);
    opacity: 0.6;
    line-height: 1;
}
.th-tip .tip-box {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e2230;
    color: #e2e8f0;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    width: 220px;
    font-size: 0.72rem;
    line-height: 1.5;
    z-index: 200;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    text-align: left;
    font-weight: 400;
    white-space: normal;
    pointer-events: none;
}
.th-tip .tip-box::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--border);
}
.th-tip:hover .tip-box { display: block; }
.tip-formula {
    font-family: monospace;
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 2px 4px;
    margin: 3px 0;
    display: block;
    font-size: 0.68rem;
}
.tip-source {
    margin-top: 5px;
    color: #94a3b8;
    font-size: 0.67rem;
}

/* ── Role switcher dropdown (multi-roles users) ───────────────────────── */
.role-switcher-dd {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 1000;
}
.role-switcher-item {
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    display: flex;
    align-items: center;
}
.role-switcher-item:hover { background: var(--bg3); }
.role-switcher-item .role-badge {
    flex: 1;
    justify-content: flex-start;
    pointer-events: none;  /* clic capture par le parent .role-switcher-item */
}