/* Minimal, deliberately dependency-free stylesheet. */

:root {
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --border: #e2e8f0;
    --text: #0f172a;
    --text-muted: #64748b;
    --accent: #3b82f6;
    --accent-light: #dbeafe;
    --accent-hover: #2563eb;
    --danger: #ef4444;
    --success: #10b981;
    --warn: #f59e0b;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius: 12px;

    /* Palette RosieIQ — Framboise */
    --brand: #d6336c;
    --brand-gradient: linear-gradient(135deg, #d6336c 0%, #a61e4d 100%);
    --brand-fg: #ffffff;
    --brand-soft: #fdeef4;
    --brand-dark: #a61e4d;

    --sidebar-bg: #2a2230;
    --sidebar-text: #9e94a8;
    --sidebar-hover: #3a3044;
    --sidebar-active: #4a3d56;
    --sidebar-active-text: #ffffff;
}


* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 100vh;
}

aside.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 24px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,0.04);
}
aside.sidebar nav { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
aside.sidebar h1 {
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 24px 16px;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* Sticker brand header in sidebar : logo + nom côte à côte. */
aside.sidebar h1.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: none;
    letter-spacing: -0.02em;
    font-size: 20px;
    font-weight: 700;
    padding: 0 24px 24px;
}
aside.sidebar h1.brand .brand-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
aside.sidebar h1.brand .brand-text {
    line-height: 1;
    background: linear-gradient(to right, #fff, #f7c6db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
aside.sidebar h1.brand .brand-version {
    font-size: 0.62em;
    font-weight: 500;
    color: #94a3b8;
    -webkit-text-fill-color: #94a3b8;  /* override le clip transparent du gradient */
    vertical-align: middle;
}
aside.sidebar nav { padding-top: 20px; }
aside.sidebar a {
    display: block;
    padding: 10px 16px;
    color: var(--sidebar-text);
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}
aside.sidebar a:hover { 
    background: var(--sidebar-hover); 
    color: #fff;
    text-decoration: none; 
    transform: translateX(4px);
}
aside.sidebar a.active {
    color: var(--sidebar-active-text);
    background: var(--sidebar-active);
    box-shadow: inset 3px 0 0 var(--brand);
}
/* Titres de groupe dans la nav sidebar */
aside.sidebar .nav-section {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
    padding: 12px 16px 4px;
    margin-top: 4px;
    pointer-events: none;
    user-select: none;
}
/* Pousse "Aide" vers le bas (flex-spacer) */
aside.sidebar .nav-spacer {
    flex: 1;
}

main {
    padding: 28px 36px;
    max-width: 1400px;
    width: 100%;
}

h1.page-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
}
.page-sub {
    color: var(--text-muted);
    margin: 0 0 24px;
}

/* Cards & grids */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}
.card:hover {
    box-shadow: var(--shadow);
}
.card h2 {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.grid { display: grid; gap: 16px; }
.grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) {
    .grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
    .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .grid.cols-6, .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
}

.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi .label { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.kpi .value { font-size: 32px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.kpi .delta { font-size: 13px; color: var(--text-muted); }

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table th, table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
table th {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    background: #fafbfc;
}
table tr:hover td { background: #fafbfc; }

/* Badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge.nouveau { background: #ddf4ff; color: #0969da; }
.badge.modifie { background: #fff8c5; color: #9a6700; }
.badge.disparu { background: #ffebe9; color: #cf222e; }
.badge.active { background: #dafbe1; color: #1a7f37; }
.badge.success { background: #dafbe1; color: #1a7f37; }
.badge.error { background: #ffebe9; color: #cf222e; }
.badge.running { background: #fff8c5; color: #9a6700; }
/* Statuts de scan : done (vert), warning (orange, distinct du running jaune),
   stale (gris — worker tué). */
.badge.done { background: #dafbe1; color: #1a7f37; }
.badge.warning { background: #ffedd5; color: #bc4c00; }
.badge.stale { background: #eaeef2; color: #57606a; }
/* Déclencheur d'un scan : cron (bleu) vs manuel (gris), casse normale. */
.badge.cron { background: #ddf4ff; color: #0969da; text-transform: none; letter-spacing: 0; }
.badge.manual { background: #eaeef2; color: #57606a; text-transform: none; letter-spacing: 0; }
.badge.marketplace { background: #f3e8ff; color: #6f42c1; text-transform: none; letter-spacing: 0; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: var(--brand-gradient);
    color: #fff !important;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(214, 51, 108, 0.3);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(214, 51, 108, 0.4);
    text-decoration: none; 
}
.btn:active {
    transform: translateY(0);
}
.btn.secondary {
    background: #fff;
    color: var(--text) !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.btn.secondary:hover { 
    background: #f8fafc; 
    box-shadow: var(--shadow);
}
.btn.danger {
    background: var(--danger);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Forms */
form .field { margin-bottom: 14px; }
form label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
form input[type="text"], form select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
}
form input[type="checkbox"] { margin-right: 6px; }
.help-text { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

/* Products grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid transparent;
    box-shadow: var(--shadow-sm);
}
.product-card.is-propre { border-left-color: var(--success); }
.product-card.is-marketplace {
    border-left-color: #8b5cf6;
    background: linear-gradient(180deg, #f3f0ff 0%, var(--bg-card) 70px);
}
.product-card:hover { 
    transform: translateY(-4px); 
    box-shadow: var(--shadow-lg); 
    border-color: #cbd5e1;
}
.product-card .photo {
    width: 100%;
    aspect-ratio: 3/4;
    background: #fafbfc;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.product-card .photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.product-card .marketplace-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(111, 66, 193, 0.92);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.enseigne-tag {
    font-weight: 500;
}
.enseigne-tag.marketplace::before {
    content: "via ";
    color: var(--text-muted);
    font-weight: normal;
    font-style: italic;
}
.enseigne-tag.propre::before {
    content: "● ";
    color: #1a7f37;
}
.product-card .info { padding: 10px 12px; flex: 1; }
.product-card .libelle {
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}
.product-card .meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}
.product-card .price-block { margin-top: 6px; }
.product-card .price {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.product-card.has-promo .price,
.product-card.is-outlet .price {
    color: #cf222e;
}
.product-card .price-before {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
    margin-left: 6px;
}
.product-card .price-club {
    margin-top: 4px;
    font-size: 12px;
    color: #1a7f37;
    font-weight: 500;
}
.product-card .price-club small {
    font-weight: 400;
    opacity: 0.85;
}

/* Rating on product cards */
.product-card .rating-line {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--muted);
}
.rating-stars-sm { color: #e6a817; font-size: 12px; }
.rating-val-sm { font-weight: 600; color: var(--fg); }
.rating-count-sm { color: var(--muted); }

/* Rating in product modal */
.product-modal-rating {
    margin: 8px 0 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}
.rating-stars { color: #e6a817; letter-spacing: 1px; }
.rating-val { font-weight: 600; }

/* Promo badges on the photo */
.promo-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    color: #fff;
}
.promo-badge.promo { background: #cf222e; }
.promo-badge.outlet { background: #f0532b; }

/* Card borders : promo/outlet emphasize red/orange over the green/violet
   "marque" border-left. Stronger signal = more important state. */
.product-card.is-outlet { border-left-color: #f0532b !important; }
.product-card.has-promo { border-left-color: #cf222e !important; }

/* Hidden-reason badges (produits masqués) */
.hidden-reason-badges {
    position: absolute;
    bottom: 6px;
    left: 6px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.hidden-reason-badge {
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #fff;
}
.hidden-reason-badge.marketplace { background: #6e40c9; }
.hidden-reason-badge.outlet { background: #f0532b; }
.hidden-reason-badge.exclusion { background: #475569; }

/* Hint de clic sur les cartes produits masqués */
.card-hint-click {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s;
}
.product-card:hover .card-hint-click { opacity: 1; }

/* Stats banner — répartition propre vs marketplace + toggles 1-clic */
.source-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.source-stats {
    display: flex;
    gap: 12px;
}
.source-pill {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid var(--border);
}
.source-pill.propre { background: #f0f9f3; border-color: #b4ddc1; }
.source-pill.marketplace { background: #faf7ff; border-color: #d3c1ee; }
.source-pill.outlet { background: #fff4ed; border-color: #ffc1a3; }
.source-pill .pill-label {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.source-pill.propre .pill-label { color: #1a7f37; }
.source-pill.marketplace .pill-label { color: #6f42c1; }
.source-pill.outlet .pill-label { color: #cf5b1e; }
.source-pill .pill-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}
.source-pill .pill-pct {
    font-size: 11px;
    color: var(--text-muted);
}
.source-toggles {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.toggle-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.1s;
}
.toggle-btn:hover { background: #fafbfc; color: var(--text); }
.toggle-btn.active {
    background: var(--text);
    color: #fff;
    border-color: var(--text);
}
.toggle-btn.propre.active { background: #1a7f37; border-color: #1a7f37; }
.toggle-btn.marketplace.active { background: #6f42c1; border-color: #6f42c1; }

/* Stats page : chart wrappers, filter summary, btn-link */
.chart-wrap {
    position: relative;
    height: 320px;
    margin-top: 12px;
}
.filter-summary {
    padding: 10px 14px;
    background: #f6f8fa;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}
.filter-summary strong { color: var(--text); }
.filter-summary em { color: var(--text-muted); }
.btn-link {
    display: inline-block;
    margin-left: 12px;
    font-size: 13px;
    color: var(--brand);
    text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* Legacy .filters (kept for /changes etc.) */
.filters {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.filters .field { margin: 0; }
.filters select, .filters input { min-width: 160px; }

/* Modern filters card — used by _filters_form.html on /products and /stats */
.filters-card {
    margin: 0 0 20px;
    padding: 16px 18px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.filters-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.filters-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* View switcher : segmented control Produits / Stats */
.view-switcher {
    display: inline-flex;
    background: #f6f8fa;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 2px;
    gap: 2px;
}
.view-tab {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.1s;
}
.view-tab:hover { color: var(--text); }
.view-tab.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Quick filter pills */
.quick-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border);
}
.quick-label {
    margin-right: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.quick-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.1s;
    white-space: nowrap;
}
.quick-pill:hover {
    color: var(--text);
    background: #f6f8fa;
    border-color: #c8d1da;
}
/* Inactive : un soupçon de couleur dans le texte pour reconnaître le type.
   IMPORTANT : déclarés AVANT .active sinon ils écrasent le color:#fff du
   pill actif (spécificité égale, c'est l'ordre qui tranche). */
.quick-pill.propre { color: #1a7f37; }
.quick-pill.marketplace { color: #6f42c1; }
.quick-pill.promo { color: #cf222e; }
.quick-pill.outlet { color: #cf5b1e; }
.quick-pill.ceremonie { color: #0969da; }
.quick-pill.propre:hover { background: #f0f9f3; }
.quick-pill.marketplace:hover { background: #faf7ff; }
.quick-pill.promo:hover { background: #fff5f5; }
.quick-pill.outlet:hover { background: #fff4ed; }
.quick-pill.ceremonie:hover { background: #f0f7ff; }

/* Active state — couleur dépend du type de preset. Spécificité 3 classes
   pour battre les couleurs inactives sans recourir à !important. */
.quick-pill.propre.active,
.quick-pill.marketplace.active,
.quick-pill.promo.active,
.quick-pill.outlet.active,
.quick-pill.ceremonie.active {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.quick-pill.propre.active { background: #1a7f37; }
.quick-pill.marketplace.active { background: #6f42c1; }
.quick-pill.promo.active { background: #cf222e; }
.quick-pill.outlet.active { background: #cf5b1e; }
.quick-pill.ceremonie.active { background: #0969da; }
/* Counter à droite du label sur chaque pill — toujours lisible */
.pill-count {
    display: inline-block;
    margin-left: 2px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
    opacity: 0.85;
}
.quick-pill.active .pill-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    opacity: 1;
}

/* Vues persos : même pill mais teinte brand + bouton × inline. */
.quick-pill-user {
    background: var(--brand-soft, #fef3ec);
    border-color: #f4d4ba;
    color: var(--brand-dark, #9a3608);
    padding-right: 4px;
    gap: 2px;
}
.quick-pill-user > a {
    color: inherit;
    text-decoration: none;
}
.quick-pill-user:hover {
    background: #fee9d6;
    border-color: #e9bf99;
}
.quick-pill-del-form { display: inline; line-height: 1; margin: 0; padding: 0; }
.quick-pill-del {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    padding: 0 6px;
    font-size: 14px;
    line-height: 1;
    border-radius: 50%;
}
.quick-pill-del:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }

/* Formulaire d'enregistrement, aligné à droite de la rangée. */
.quick-pill-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.quick-pill-save input[type="text"] {
    height: 28px;
    padding: 0 11px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    font-size: 12px;
    background: #fff;
    min-width: 180px;
}
.quick-pill-save input[type="text"]:focus {
    outline: none;
    border-style: solid;
    border-color: var(--brand);
}
.quick-pill-save .btn-small {
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
}

/* ============================================================
   Filtre form — Nouveaux styles premium (Grid + Details)
   ============================================================ */

/* Search Hero */
.search-hero {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}
.search-input {
    flex: 1;
    padding: 12px 16px;
    font-size: 15px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.search-input:focus {
    outline: none;
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 4px var(--brand-soft);
}
.search-btn {
    padding: 12px 24px;
    font-size: 15px;
    border-radius: 12px;
}

/* Grid de base */
.core-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* Filtres avancés (<details>) */
.adv-filters {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.adv-filters[open] {
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.adv-filters summary {
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.adv-filters summary::-webkit-details-marker {
    display: none;
}
.adv-filters summary::before {
    content: "↓";
    font-size: 12px;
    transition: transform 0.2s ease;
    color: var(--text-muted);
}
.adv-filters[open] summary::before {
    transform: rotate(180deg);
}
.adv-badge {
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.adv-filters-content {
    padding: 0 18px 18px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

/* Individual field */
.flt-field {
    display: flex;
    flex-direction: column;
}
.flt-field label {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.flt-field select,
.flt-field input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}
.flt-field input[type="number"] {
    background-image: none;
}
.flt-field select:focus,
.flt-field input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Multi-select enseignes : dropdown natif <details> avec cases à cocher */
.multiselect {
    position: relative;
}
.multiselect > summary {
    list-style: none;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}
.multiselect > summary::-webkit-details-marker {
    display: none;
}
.multiselect > summary::after {
    content: "▾";
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
}
.multiselect[open] > summary {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.multiselect-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.multiselect-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
}
.multiselect-option:hover {
    background: var(--brand-soft);
}
.multiselect-clear {
    display: block;
    padding: 6px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.multiselect-clear:hover {
    background: var(--brand-soft);
    color: var(--brand);
}
.multiselect-clear.active {
    color: var(--brand);
    font-weight: 600;
}
.multiselect-option input {
    margin: 0;
    flex-shrink: 0;
}
.multiselect-apply {
    margin-top: 6px;
    align-self: stretch;
}

/* Prix : de X – Y € inline */
.flt-price-range {
    grid-column: span 2;
}
.price-range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}
.price-range-inputs input[type="number"] {
    width: 80px;
    text-align: right;
}
.price-range-prefix,
.price-range-sep,
.price-range-suffix {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Marques exclues — checkbox + lien gérer */
.flt-excl {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 24px;
    grid-column: 1 / -1;
}
.flt-excl-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}
.flt-link-muted {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
}
.flt-link-muted:hover {
    color: var(--brand);
    text-decoration: underline;
}

.tenant-preconfig-details {
    margin: 12px 0 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.tenant-preconfig-summary {
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    user-select: none;
    background: #fafbfc;
    transition: background 0.2s ease, color 0.2s ease;
}
.tenant-preconfig-summary:hover {
    background: var(--brand-soft);
    color: var(--brand);
}
.tenant-preconfig-summary-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.tenant-preconfig-summary-icon {
    font-size: 14px;
}
.tenant-preconfig-summary::-webkit-details-marker { display: none; }
.tenant-preconfig-summary::after {
    content: "›";
    font-size: 16px;
    font-weight: 600;
    transition: transform 0.2s ease;
}
.tenant-preconfig-details[open] .tenant-preconfig-summary::after {
    transform: rotate(90deg);
}
.tenant-preconfig-details[open] .tenant-preconfig-summary {
    border-bottom: 1px solid var(--border);
}
.tenant-preconfig-body {
    padding: 14px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tenant-preconfig-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tenant-preconfig-item {
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid rgba(214, 51, 108, 0.2);
}
.tenant-preconfig-item strong { 
    font-weight: 600; 
    margin-right: 4px;
}
.tenant-preconfig-action {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: all 0.2s ease;
}
.tenant-preconfig-action:hover {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--bg-card);
}

/* Responsive */
@media (max-width: 700px) {
    .search-hero { flex-direction: column; }
    .core-filters-grid, .adv-filters-content {
        grid-template-columns: 1fr;
    }
    .flt-price-range { grid-column: span 1; }
}

/* Price base toggle on /stats : Prix actuel / Catalogue / Club */
.price-base-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
    padding: 10px 14px;
    background: #f6f8fa;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.price-base-toggle .toggle-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    margin-right: 4px;
}
.price-base-toggle .toggle-tab {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.1s;
}
.price-base-toggle .toggle-tab:hover {
    color: var(--text);
    background: rgba(0, 0, 0, 0.04);
}
.price-base-toggle .toggle-tab.active {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Sticky filter summary banner — toujours visible au scroll */
.filter-banner {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: -6px -6px 16px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(8px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    font-size: 13px;
}
.filter-banner-text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    color: var(--text);
    flex: 1;
    min-width: 0;
}
.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #1a7f37;
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.1s;
    white-space: nowrap;
}
.btn-export:hover {
    background: #136228;
    color: #fff;
}
.btn-export-group {
    display: inline-flex;
    align-items: stretch;
    border-radius: 6px;
    overflow: hidden;
}
.btn-export-group .btn-export { border-radius: 6px 0 0 6px; }
.btn-export-secondary {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: #fff;
    color: #1a7f37;
    border: 1px solid #b4ddc1;
    border-left: none;
    border-radius: 0 6px 6px 0;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.1s;
    white-space: nowrap;
}
.btn-export-secondary:hover {
    background: #f0f9f3;
    color: #136228;
}
.filter-banner strong {
    font-size: 16px;
    color: var(--brand);
    margin-right: 2px;
}
.filter-banner .sep, .filter-banner .dot {
    color: var(--text-muted);
    opacity: 0.6;
}
.filter-banner .frag {
    padding: 2px 9px;
    background: #f0f4f8;
    border-radius: 10px;
    font-size: 12px;
    color: var(--text);
}
.filter-banner .frag.muted {
    background: transparent;
    color: var(--text-muted);
    font-style: italic;
}
.filters-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.filters-actions .btn-link.danger {
    color: var(--danger);
    font-size: 12px;
}
.filters-actions .btn { padding: 6px 14px; font-size: 13px; }
/* Log viewer */
.log {
    background: #1f2328;
    color: #d4d9e0;
    padding: 16px;
    border-radius: var(--radius);
    font-family: "SF Mono", Monaco, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
    max-height: 480px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.section-title {
    margin: 28px 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 30px;
    text-align: center;
}

.delta-up { color: var(--danger); font-weight: 600; }
.delta-down { color: var(--success); font-weight: 600; }

/* --- Page /changes ---------------------------------------------------------
   Évolutions : selector pour choisir le run, sections (drops/raises/new/gone),
   et une grille de cards visuelles pour les nouveautés et sorties. */

/* --- Run timeline ----------------------------------------------------------
   Chaque run est un dot positionné chronologiquement sur une track. La taille
   du dot est proportionnelle au nombre de changements (set via CSS var en
   inline depuis le template). On overflow-x scroll si beaucoup de runs. */

.timeline-wrap {
    margin: 16px 0;
    padding: 14px 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.timeline-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 12px;
}

.timeline-title {
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.timeline-meta {
    color: var(--text-muted);
    font-size: 12px;
}

.timeline-meta strong {
    color: var(--text);
}

.timeline-meta .muted {
    color: #98a0aa;
}

.timeline {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    overflow-x: auto;
    padding: 16px 4px 8px;
    min-height: 150px;
}

.timeline-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 48px;   /* aligné avec le centre des dots */
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--border) 8%, var(--border) 92%, transparent 100%);
    z-index: 0;
}

.timeline-dot {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    min-width: 70px;
    max-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.2;
    transition: color 0.15s ease;
}

.timeline-dot:hover {
    color: var(--text);
}

.timeline-dot .dot-date {
    order: -1;        /* date au-dessus du dot */
    height: 14px;
    white-space: nowrap;
}

.timeline-dot .dot-marker {
    /* `--dot-size` est injecté inline sur `.timeline-dot` par le template (px).
       Fallback à 10px si non set. */
    width: var(--dot-size, 10px);
    height: var(--dot-size, 10px);
    border-radius: 50%;
    background: var(--brand-soft);
    border: 2px solid var(--brand);
    box-shadow: 0 0 0 3px var(--bg-card);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.timeline-dot:hover .dot-marker {
    transform: scale(1.15);
    background: var(--brand);
}

.timeline-dot .dot-count {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
}

/* Run actif : dot rempli + halo + texte sombre */
.timeline-dot.active {
    color: var(--text);
}

.timeline-dot.active .dot-marker {
    background: var(--brand);
    box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 6px rgba(214, 51, 108, 0.25);
}

.timeline-dot.active .dot-count {
    color: var(--brand);
    font-weight: 700;
}

.timeline-dot.active .dot-date {
    font-weight: 600;
}

/* Scrollbar discrète pour la timeline horizontale */
.timeline::-webkit-scrollbar { height: 6px; }
.timeline::-webkit-scrollbar-track { background: transparent; }
.timeline::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.timeline::-webkit-scrollbar-thumb:hover { background: #b8c0c8; }

/* --- Timeline V2 (barres verticales) -------------------------------------
   Les anciens .timeline-dot/.dot-* ne sont plus rendus côté template — les
   styles restent en place ci-dessus en cas de fallback, mais c'est cette
   section qui prend le relais pour le rendu actuel.

   Chaque run = une barre verticale alignée en bas (baseline commune), avec
   compteur au-dessus et date dessous. Couleur de la barre dictée par le
   signal dominant (drops rouge / raises violet / neutre brand). */

.timeline-bar {
    --bar-color-soft: var(--brand-soft);
    --bar-color-strong: var(--brand);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    width: 46px;
    text-decoration: none;
    color: var(--text);
    padding: 0 2px;
    gap: 4px;
    transition: opacity 0.15s ease;
}
.timeline-bar:not(.active) { opacity: 0.78; }
.timeline-bar:hover { opacity: 1; text-decoration: none; }

.timeline-bar .bar-count {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    line-height: 1;
}

.timeline-bar .bar-shape {
    display: block;
    width: 30px;
    height: var(--bar-height, 22px);
    background: var(--bar-color-soft);
    border-top: 3px solid var(--bar-color-strong);
    border-radius: 6px 6px 0 0;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.timeline-bar:hover .bar-shape {
    background: color-mix(in srgb, var(--bar-color-strong) 40%, var(--bar-color-soft));
    transform: scaleY(1.04);
    transform-origin: bottom;
}

.timeline-bar .bar-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
    /* Largeur fixée à la barre pour que le texte ne déborde pas sur les
       voisins. Si tronqué, ellipsis. */
    width: 100%;
    overflow: hidden;
}
.timeline-bar .bar-date-day {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
}
.timeline-bar .bar-date-time {
    font-size: 9px;
    color: #98a0aa;
}
.timeline-bar.active .bar-date-day { color: var(--text); font-weight: 600; }
.timeline-bar.active .bar-date-time { color: var(--text-muted); }

/* Teintes par signal dominant. Fallback = brand terre cuite pour neutre. */
.timeline-bar.bar-tint-down {
    --bar-color-soft: #ffe2de;
    --bar-color-strong: var(--danger);
}
.timeline-bar.bar-tint-up {
    --bar-color-soft: #ece1f8;
    --bar-color-strong: #6f42c1;
}
.timeline-bar.bar-tint-neutral {
    --bar-color-soft: var(--brand-soft);
    --bar-color-strong: var(--brand);
}

/* Run actif : barre pleine (pas dégradée), halo accentué, compteur et date
   plus contrastés. */
.timeline-bar.active {
    opacity: 1;
}
.timeline-bar.active .bar-shape {
    background: var(--bar-color-strong);
    border-top-color: var(--bar-color-strong);
    box-shadow:
        0 0 0 3px var(--bg-card),
        0 0 0 5px color-mix(in srgb, var(--bar-color-strong) 35%, transparent),
        0 4px 12px -4px color-mix(in srgb, var(--bar-color-strong) 45%, transparent);
}
.timeline-bar.active .bar-count {
    font-size: 13px;
    color: var(--bar-color-strong);
    font-weight: 700;
}
.timeline-bar.active .bar-date {
    color: var(--text);
    font-weight: 600;
}

/* Mobile : barres un peu moins larges + snap pour glisser au doigt */
@media (max-width: 720px) {
    .timeline-bar { width: 40px; }
    .timeline-bar .bar-shape { width: 24px; }
}

/* --- Timeline polish (STI-43) ---------------------------------------------
   Teintes dot selon drops/raises, snap horizontal sur mobile, tooltip
   popover avec mini-thumbnails au hover. */

/* Teintes par dominance. La couleur du dot est calculée depuis --dot-color
   pour pouvoir varier sans dupliquer toutes les règles. Le fallback reste
   --accent (bleu) pour les runs neutres. */
.timeline-dot {
    --dot-color: var(--accent);
    --dot-color-soft: var(--accent-light);
    --dot-color-halo: rgba(9, 105, 218, 0.25);
}
.timeline-dot.dot-tint-down {
    --dot-color: var(--danger);
    --dot-color-soft: #ffebe9;
    --dot-color-halo: rgba(207, 34, 46, 0.25);
}
.timeline-dot.dot-tint-up {
    --dot-color: #6f42c1;
    --dot-color-soft: #f0e8fb;
    --dot-color-halo: rgba(111, 66, 193, 0.25);
}
/* On override les anciennes refs à --accent/--accent-light/halo bleu codé en dur */
.timeline-dot .dot-marker {
    background: var(--dot-color-soft);
    border-color: var(--dot-color);
}
.timeline-dot:hover .dot-marker {
    background: var(--dot-color);
}
.timeline-dot.active .dot-marker {
    background: var(--dot-color);
    box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 6px var(--dot-color-halo);
}
.timeline-dot.active .dot-count {
    color: var(--dot-color);
}

/* Mobile : snap horizontal pour passer d'un run au suivant sans devoir
   viser au pixel près sur un dot 8px. */
@media (max-width: 720px) {
    .timeline {
        scroll-snap-type: x mandatory;
        scroll-padding: 0 24px;
    }
    .timeline-dot {
        scroll-snap-align: center;
        min-width: 90px;
    }
}

/* Animation entrée des KPI cards quand on change de run (= reload de la page).
   Staggered pour donner l'impression que les chiffres "tombent" en cascade. */
@keyframes kpiFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.grid.cols-4 > .card.kpi {
    animation: kpiFadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.grid.cols-4 > .card.kpi:nth-child(1) { animation-delay: 0.02s; }
.grid.cols-4 > .card.kpi:nth-child(2) { animation-delay: 0.08s; }
.grid.cols-4 > .card.kpi:nth-child(3) { animation-delay: 0.14s; }
.grid.cols-4 > .card.kpi:nth-child(4) { animation-delay: 0.20s; }

/* Respecter prefers-reduced-motion — pas d'animation pour les users qui
   l'ont désactivée OS-wide. */
@media (prefers-reduced-motion: reduce) {
    .grid.cols-4 > .card.kpi { animation: none; }
}

/* Tooltip popover — positionné en JS au hover des dots. Pointer-events:none
   pour qu'il ne capte pas le mouse et déclenche un mouseleave parasite. */
.timeline-tooltip {
    position: absolute;
    z-index: 100;
    width: 240px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 10px 12px;
    pointer-events: none;
    font-size: 12px;
    color: var(--text);
}
.timeline-tooltip[hidden] { display: none; }
.timeline-tooltip-photos {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    min-height: 70px;
    align-items: center;
}
.timeline-tooltip-photos img {
    width: 56px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    background: #f6f7f9;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.timeline-tooltip-summary {
    color: var(--text-muted);
    line-height: 1.4;
}
.timeline-tooltip-summary.muted,
.timeline-tooltip .muted {
    color: var(--text-muted);
    font-style: italic;
}

/* =============================================================
   /changes — refonte visuelle : hero stat + KPI sparklines + top movers
   ============================================================= */

/* --- Hero stat ----------------------------------------------------------
   Gros bandeau en haut avec un chiffre dominant en terre cuite (par défaut).
   Les classes hero-tint-* changent la couleur du chiffre selon le signal
   dominant du run (drops/raises/new/gone). */

.changes-hero {
    --hero-color: var(--brand);
    --hero-color-soft: var(--brand-soft);
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 18px 0 22px;
    padding: 28px 32px;
    background:
        linear-gradient(135deg, var(--hero-color-soft) 0%, var(--bg-card) 65%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--hero-color);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.changes-hero.hero-tint-down    { --hero-color: var(--danger);  --hero-color-soft: #ffebe9; }
.changes-hero.hero-tint-up      { --hero-color: #6f42c1;        --hero-color-soft: #f0e8fb; }
.changes-hero.hero-tint-new     { --hero-color: var(--success); --hero-color-soft: #dafbe1; }
.changes-hero.hero-tint-gone    { --hero-color: #57606a;        --hero-color-soft: #f6f8fa; }
.changes-hero.hero-tint-neutral { --hero-color: var(--brand);   --hero-color-soft: var(--brand-soft); }

.changes-hero .hero-number {
    font-size: 72px;
    font-weight: 600;
    line-height: 1;
    color: var(--hero-color);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    flex-shrink: 0;
}
.changes-hero .hero-text { flex: 1; }
.changes-hero .hero-label {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.changes-hero .hero-sub {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.45;
}
.changes-hero .hero-meta {
    text-align: right;
    border-left: 1px solid var(--border);
    padding-left: 24px;
    color: var(--text-muted);
    font-size: 12px;
}
.changes-hero .hero-meta-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    margin-bottom: 2px;
}
.changes-hero .hero-meta-value {
    font-size: 15px;
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.changes-hero .hero-meta-date {
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* --- KPI grid enrichie ----------------------------------------------------
   Quatre cards par run avec sparkline + delta vs run précédent.
   Plus aérées (padding plus large), typo plus contrastée. */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 0 0 24px;
}
.kpi-grid .card.kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 16px;
    border-radius: 12px;
}
.kpi-grid .kpi-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.kpi-grid .kpi-label-block {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kpi-grid .kpi-icon { font-size: 14px; }
.kpi-grid .kpi-spark {
    display: block;
    flex-shrink: 0;
    opacity: 0.85;
}
.kpi-grid .kpi-value {
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.kpi-grid .kpi-card-new .kpi-value    { color: #1a7f37; }
.kpi-grid .kpi-card-gone .kpi-value   { color: #57606a; }
.kpi-grid .kpi-card-drops .kpi-value  { color: var(--danger); }
.kpi-grid .kpi-card-raises .kpi-value { color: #6f42c1; }

.kpi-grid .kpi-avg {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: -4px;
}

/* Delta vs run précédent — petits chips colorés */
.delta-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    width: fit-content;
}
.delta-chip-up   { background: #dafbe1; color: var(--success); }
.delta-chip-down { background: #ffebe9; color: var(--danger); }
.delta-chip-flat { background: #f6f8fa; color: var(--text-muted); }

/* --- Top movers ----------------------------------------------------------
   La section "wow" sous les KPI : 5 grosses cards photos avec prix
   avant/après et badge % de baisse en surimpression. */

.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 28px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.section-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.section-header .section-sub {
    font-size: 13px;
    color: var(--text-muted);
}

.movers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.mover-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
}
.mover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.12);
}
.mover-photo {
    position: relative;
    aspect-ratio: 3 / 4;
    background: #f6f7f9;
    overflow: hidden;
}
.mover-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mover-delta-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    background: var(--danger);
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    font-variant-numeric: tabular-nums;
}
.mover-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mover-enseigne {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}
.mover-libelle {
    font-size: 13px;
    color: var(--text);
    line-height: 1.3;
    /* clamp 2 lignes — évite des cards qui se déforment selon le libellé */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mover-prices {
    margin-top: 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.mover-price-before {
    font-size: 13px;
    color: var(--text-muted);
}
.mover-price-after {
    font-size: 18px;
    color: var(--danger);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Responsive : 3 colonnes sur tablette, 2 sur mobile, 1 très étroit */
@media (max-width: 1100px) {
    .movers-grid { grid-template-columns: repeat(3, 1fr); }
    .kpi-grid    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .movers-grid { grid-template-columns: repeat(2, 1fr); }
    .changes-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px 22px;
    }
    .changes-hero .hero-number { font-size: 56px; }
    .changes-hero .hero-meta {
        border-left: none;
        border-top: 1px solid var(--border);
        padding-left: 0;
        padding-top: 12px;
        text-align: left;
    }
}

/* --- Section title legacy → nouveau style ---------------------------------
   Sur les sections existantes (Drops/Raises/New/Gone tables), on adoucit
   l'ancien .section-title avec un peu plus d'air. */
.section-title {
    margin-top: 28px !important;
    margin-bottom: 14px !important;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Tables d'évolutions (drops/raises/other) ------------------------------- */

.changes-table th,
.changes-table td {
    padding: 8px 12px;
    vertical-align: middle;
}

.thumb-cell {
    width: 56px;
    padding: 4px !important;
}

.row-thumb {
    width: 48px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    display: block;
}

.field-tag {
    display: inline-block;
    padding: 2px 6px;
    background: #f0f3f6;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: "SF Mono", Monaco, Menlo, monospace;
}

.marketplace-tag {
    color: #6f42c1;
    font-weight: 500;
}

.outlet-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #fff1e7;
    color: #cf5b1e;
    border: 1px solid #f7c9a4;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Grille de cards (nouveautés / sorties) --------------------------------- */

.changes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.change-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease;
}

.change-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.change-card-photo {
    display: block;
    aspect-ratio: 3 / 4;
    background: #f0f3f6;
    overflow: hidden;
}

.change-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.change-card-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    flex: 1;
}

.change-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
}

.change-card-head strong {
    font-size: 12px;
}

.change-card-libelle {
    line-height: 1.35;
    color: var(--text);
    flex: 1;
}

.change-card-libelle a {
    color: var(--text);
}

.change-card-libelle a:hover {
    color: var(--brand);
}

.change-card-price {
    font-size: 14px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.change-card-price s {
    color: var(--text-muted);
    font-size: 12px;
}

/* Sorties : version grisée ----------------------------------------------- */

.changes-grid.gone .change-card {
    opacity: 0.65;
}

.changes-grid.gone .change-card-photo img {
    filter: grayscale(0.5);
}

.changes-grid.gone .change-card-price .muted {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

/* Autres modifications (collapsible) ------------------------------------ */

.other-changes-details {
    margin-top: 24px;
}

.other-changes-details > summary {
    cursor: pointer;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
}

.other-changes-details > summary::-webkit-details-marker { display: none; }

.other-changes-details > summary::before {
    content: "▶";
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.other-changes-details[open] > summary::before {
    transform: rotate(90deg);
}

.other-changes-details > summary .summary-label {
    font-weight: 600;
    color: var(--text);
}

.other-changes-details > summary .summary-hint {
    color: var(--text-muted);
    font-size: 12px;
}

.other-changes-details[open] > summary {
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
}

.other-changes-details[open] > .card {
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Matrice prix × enseigne — slider de grain */
.bin-control {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
    padding: 10px 14px;
    background: #f6f8fa;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.bin-control .toggle-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.bin-control input[type="range"] {
    flex: 1;
    min-width: 180px;
    max-width: 360px;
    accent-color: var(--brand);
}
.bin-control #bin-value {
    font-weight: 600;
    color: var(--text);
    min-width: 48px;
    font-variant-numeric: tabular-nums;
}
.bin-presets {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}
.bin-pill {
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    transition: all 0.1s;
}
.bin-pill:hover {
    color: var(--text);
    border-color: var(--brand);
}
table.matrix {
    width: 100%;
    border-collapse: collapse;
}
table.matrix th, table.matrix td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
table.matrix tfoot td {
    border-top: 2px solid var(--border);
    border-bottom: none;
}

/* Modale produits ouverte au clic sur un point du chart matrice */
.band-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.band-modal[hidden] { display: none; }
.band-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 22, 0.45);
    backdrop-filter: blur(2px);
}
.band-modal-panel {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
    width: min(960px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.band-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: #fafbfc;
}
.band-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}
.band-modal-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}
.band-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 4px;
}
.band-modal-close:hover { color: var(--text); }
.band-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    align-content: start;
}
.band-modal-footer {
    border-top: 1px solid var(--border);
    padding: 12px 20px;
    text-align: right;
    background: #fafbfc;
}

.band-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    font-size: 12px;
    align-self: start;
}
.band-card-photo {
    width: 100%;
    height: 220px;
    background: #fafbfc;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
}
.band-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.band-card-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 28px;
}
.band-card-info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.band-card-brand { font-size: 11px; color: var(--text-muted); }
.band-card-brand .muted { color: var(--text-muted); font-style: italic; }
.band-card-libelle {
    font-size: 12px;
    line-height: 1.3;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.band-card-price { font-size: 13px; color: var(--text); }
.band-card-price .muted { color: var(--text-muted); margin-right: 4px; }
.band-card-link {
    margin-top: 4px;
    font-size: 11px;
    color: var(--brand);
}

/* ------------------------------------------------------------------
   Modale détail produit (réutilise la coque .band-modal* pour le
   backdrop/header/close). Contenu spécifique : photo + attributs +
   sparkline + journal des changements.
   ------------------------------------------------------------------ */
.product-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}
.product-modal[hidden] { display: none; }

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.product-modal-panel { 
    width: min(800px, 90vw) !important; 
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15) !important;
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.product-modal-body {
    display: block;
    padding: 18px 22px;
}
.product-modal-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 22px;
}
.product-modal-photo {
    background: #fafbfc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-modal-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-modal-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.product-modal-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.product-modal-price .price {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}
.product-modal-price .price-before {
    color: var(--text-muted);
    text-decoration: line-through;
    font-size: 15px;
}
.product-modal-price .promo-pct {
    background: var(--danger);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
.price-initial {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.price-initial strong {
    color: var(--text);
    font-weight: 600;
}
.price-initial-delta {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.price-initial-delta.is-down {
    background: #eaf6ee;
    color: var(--success);
}
.price-initial-delta.is-up {
    background: #fdecee;
    color: var(--danger);
}

/* Astérisque conformité (Omnibus) à côté du prix — admin only. */
.price-flag {
    color: #d97706;
    font-weight: 700;
    margin-left: 1px;
    cursor: help;
    font-size: 0.9em;
}
.product-modal-attrs {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 14px;
    row-gap: 6px;
    margin: 6px 0 0;
    font-size: 13px;
}
.product-modal-attrs dt {
    color: var(--text-muted);
    font-weight: 500;
}
.product-modal-attrs dd {
    margin: 0;
    color: var(--text);
}
.product-modal-dates {
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px dashed var(--border);
    padding-top: 8px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.product-modal-link {
    margin-top: 4px;
    font-size: 13px;
}
.product-modal-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.product-modal-section h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* ---------- Analyse légale Omnibus (admin only) ---------- */
.legal-analysis {
    margin-top: 22px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--surface, #fff);
}
.legal-analysis.legal-alert   { border-left-color: var(--danger);  background: #fdf2f3; }
.legal-analysis.legal-warning { border-left-color: #d97706;        background: #fffaf0; }
.legal-analysis.legal-ok      { border-left-color: var(--success); background: #f1f8f3; }
.legal-analysis.legal-info    { border-left-color: var(--text-muted); }

.legal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.legal-badge {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    color: #fff;
    letter-spacing: 0.01em;
}
.legal-badge-alert   { background: var(--danger); }
.legal-badge-warning { background: #d97706; }
.legal-badge-ok      { background: var(--success); }
.legal-badge-info    { background: var(--text-muted); }
.legal-admin-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: 2px 7px;
}

.legal-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    margin-bottom: 12px;
}
.legal-fig {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.legal-fig-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.legal-fig-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.legal-fig-bad .legal-fig-val  { color: var(--danger); }
.legal-fig-good .legal-fig-val { color: var(--success); }

.legal-reasons,
.legal-caveats {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
}
.legal-reasons li { color: var(--text); margin-bottom: 4px; }
.legal-caveats li { color: var(--text-muted); font-style: italic; }
.legal-citation {
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px dashed var(--border);
    padding-top: 8px;
    margin: 8px 0 4px;
}
.legal-disclaimer {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    opacity: 0.85;
}

@media (max-width: 560px) {
    .legal-figures { grid-template-columns: 1fr; }
}

/* ---------- Page conformité (Omnibus) ---------- */
.conf-bars {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.conf-ens-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.conf-ens-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.conf-ens-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.conf-clean {
    font-size: 12px;
    font-weight: 600;
    color: var(--success);
}
.conf-bar-row {
    display: grid;
    grid-template-columns: 160px 1fr 110px;
    align-items: center;
    gap: 12px;
}
.conf-seg-label {
    font-weight: 500;
    color: var(--text-muted);
    padding-left: 12px;
}
.conf-bar-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conf-bar-track {
    height: 14px;
    background: var(--brand-soft, #f3f4f6);
    border-radius: 999px;
    overflow: hidden;
}
.conf-bar-fill {
    height: 100%;
    border-radius: 999px;
    min-width: 2px;
    transition: width 0.3s ease;
}
.conf-bar-fill.is-high { background: var(--danger); }
.conf-bar-fill.is-mid  { background: #d97706; }
.conf-bar-fill.is-none { background: var(--success); }
.conf-bar-val {
    font-size: 13px;
    text-align: right;
    white-space: nowrap;
}

.conf-table { width: 100%; border-collapse: collapse; }
.conf-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.conf-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    vertical-align: middle;
}
.conf-table tbody tr {
    cursor: pointer;
    transition: background 0.1s ease;
}
.conf-table tbody tr:hover { background: var(--brand-soft, #f8f9fb); }
.conf-thumb-cell { width: 48px; }
.conf-thumb {
    width: 40px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    background: #f3f4f6;
}
.conf-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
}
.conf-libelle {
    max-width: 280px;
    font-weight: 500;
    color: var(--text);
}
/* Badge verdict plus compact en table que dans la modale. */
.conf-table .legal-badge { font-size: 11px; padding: 3px 9px; }

@media (max-width: 720px) {
    .conf-bar-row { grid-template-columns: 110px 1fr 90px; }
}

/* Sparkline historique de prix */
.sparkline {
    width: 100%;
    max-width: 480px;
    height: 80px;
    display: block;
}
.sparkline path { stroke: var(--brand); }
.sparkline circle { fill: var(--brand); cursor: pointer; }
.sparkline circle:hover { r: 4.5; }
.sparkline-axis {
    display: flex;
    justify-content: space-between;
    max-width: 480px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Journal des changements */
.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.history-table th,
.history-table td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.history-table th {
    background: #fafbfc;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.history-table small.muted { color: var(--text-muted); }
.history-table .muted { color: var(--text-muted); }
.hist-type {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.hist-nouveau { background: #dafbe1; color: #1a7f37; }
.hist-modifie { background: #fff8c5; color: #9a6700; }
.hist-disparu { background: #ffebe9; color: #cf222e; }
.hist-thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fafbfc;
}

/* Affordance « cliquable » sur les cards/rows qui ouvrent la modale */
[data-product-id] { cursor: pointer; }
[data-product-id]:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
}
.product-card[data-product-id]:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    transition: transform 0.12s, box-shadow 0.12s;
}
.changes-table tbody tr[data-product-id]:hover {
    background: var(--accent-light);
}
.change-card[data-product-id]:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

@media (max-width: 720px) {
    .product-modal-grid {
        grid-template-columns: 1fr;
    }
    .product-modal-photo { aspect-ratio: 4 / 3; }
}

/* --- Login page ---------------------------------------------------------
   Layout minimal pour /login : pas de sidebar (incongrue avant auth), juste
   une carte centrée verticalement avec logo + form. */

body.minimal-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--bg);
}

.login-wrap {
    width: 100%;
    max-width: 380px;
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 32px 28px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}
.login-brand .brand-logo { width: 28px; height: 28px; }

.login-title {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-muted);
}

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}
.login-form input[type="text"],
.login-form input[type="password"] {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 15px;
    color: var(--text);
    background: var(--bg-card);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.login-form input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
/* La case « Rester connecté » : checkbox en ligne avec son libellé, à l'inverse
   des champs texte qui sont empilés en colonne. */
.login-form label.login-remember {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.login-form label.login-remember input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--brand);
}

.btn-brand {
    margin-top: 6px;
    padding: 11px 16px;
    background: var(--brand);
    color: var(--brand-fg);
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-brand:hover { background: var(--brand-dark); }
.btn-brand:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.flash {
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 14px;
}
.flash-error { background: #ffebe9; color: var(--danger); border: 1px solid #ffc1ba; }
.flash-info { background: var(--accent-light); color: var(--accent); border: 1px solid #c6e6ff; }
.flash-success { background: #dafbe1; color: var(--success); border: 1px solid #bdf2c5; }

/* --- Sidebar user block (footer de la sidebar) -----------------------------
   Avatar coloré déterministiquement par hash du username, nom + rôle, et
   icône logout à droite. Tout sur fond sombre, alignement sur le reste de
   la sidebar. */

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 4px 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    color: #c8d1da;
}

.sidebar-version {
    text-align: center;
    font-size: 10px;
    color: rgba(255,255,255,0.25);
    padding: 0 16px 10px;
    letter-spacing: 0.04em;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    flex-shrink: 0;
    /* La couleur de fond est injectée inline depuis le template
       (style="background: hsl(...)") pour rester déterministe par username. */
}

.user-info {
    flex: 1;
    min-width: 0; /* pour que text-overflow marche sur .user-name */
}
.user-name {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-role {
    font-size: 11px;
    color: #8b949e;
    letter-spacing: 0.02em;
}
.user-role-admin { color: var(--brand); font-weight: 500; }
.user-role-viewer { color: #8b949e; }

.user-logout {
    padding: 6px;
    border-radius: 4px;
    color: #8b949e;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.user-logout:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    text-decoration: none;
}
.user-logout svg { display: block; }

/* --- Admin : page /admin/users -------------------------------------------- */

.user-avatar.user-avatar-sm {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.users-table { width: 100%; border-collapse: collapse; }
.users-table th, .users-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    font-size: 13px;
}
.users-table th {
    background: #f6f8fa;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
}
.users-table tbody tr.user-disabled-row { opacity: 0.55; }

.badge-me {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.status-active { color: var(--success); font-weight: 500; }
.status-disabled { color: var(--text-muted); font-style: italic; }

.user-actions { white-space: nowrap; }
.user-actions form { display: inline-block; margin-right: 4px; }

.btn-tiny {
    padding: 4px 8px;
    font-size: 11px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.btn-tiny:hover { background: #f6f8fa; border-color: #c8d1da; }
.btn-tiny.btn-danger {
    color: var(--danger);
    border-color: #ffc1ba;
}
.btn-tiny.btn-danger:hover {
    background: #ffebe9;
    border-color: var(--danger);
}

.btn-small {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
}

.invite-form { display: flex; flex-direction: column; gap: 12px; }
.invite-form label {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 13px; color: var(--text-muted);
}
.invite-form input,
.invite-form select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 14px;
    background: #fff;
}
.invite-form input:focus,
.invite-form select:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Banner mdp temporaire — visuel volontairement appuyé, pour que l'admin ne
   ferme pas la page avant d'avoir copié le mdp. */
.temp-pwd-card {
    background: var(--brand-soft);
    border: 1px solid var(--brand);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 14px 0;
}
.temp-pwd-head {
    font-size: 14px;
    color: var(--brand-dark);
    margin-bottom: 10px;
}
.temp-pwd-body {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.temp-pwd-value {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--brand);
    border-radius: 5px;
    color: var(--brand-dark);
    user-select: all;
}
.temp-pwd-note {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.audit-list { list-style: none; padding: 0; margin: 0; max-height: 240px; overflow-y: auto; }
.audit-list li {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text);
}
.audit-list li:last-child { border-bottom: none; }
.audit-date {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-right: 8px;
}
.audit-action {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 4px;
}

/* --- Pages d'erreur ------------------------------------------------------- */

.error-page {
    max-width: 520px;
    margin: 80px auto;
    text-align: center;
    padding: 40px 32px;
}
.error-icon {
    font-size: 56px;
    margin-bottom: 12px;
    line-height: 1;
}
.error-page .page-title { font-size: 28px; }
.error-page .page-sub { font-size: 15px; margin-top: 8px; }

/* --- Contexte de debug d'un adapter en échec (/runs/<label>) -------------- */
.debug { margin-top: 6px; }
.debug > summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    color: var(--brand);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.debug > summary::-webkit-details-marker { display: none; }
.debug > summary::before {
    content: "▸";
    display: inline-block;
    font-size: 9px;
    transition: transform 0.15s;
}
.debug[open] > summary::before { transform: rotate(90deg); }
.debug-body {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    max-width: 560px;
}
.debug-row { margin-bottom: 8px; }
.debug-row:last-child { margin-bottom: 0; }
.debug-k {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    color: var(--text-muted);
}
.debug-hint { color: var(--text-muted); font-style: italic; }
.debug-body ul { margin: 4px 0 0; padding-left: 18px; }
.debug-body li { margin-bottom: 2px; word-break: break-all; }
.debug-body code { font-size: 11px; }
.debug-tb {
    margin: 4px 0 0;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow: auto;
    color: var(--text-muted);
}

/* --- Grille d'adapters live (page /scan/<job_id>) --------------------------
   Une carte par triplet (pays, famille, enseigne). Les états colorent la
   bordure gauche ; un spinner CSS anime les adapters en cours. */

.adapters-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.adapters-progress strong { color: var(--text); }

.adapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.adapter-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius);
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 82px;
    transition: border-color 0.25s;
}
.adapter-card.pending { border-left-color: var(--border); }
.adapter-card.running { border-left-color: #d4a017; }
.adapter-card.done    { border-left-color: #2da44e; }
.adapter-card.failed  { border-left-color: #cf222e; }
.adapter-card.empty   { border-left-color: #bc4c00; }

.adapter-card .ac-head {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adapter-card .ac-sub {
    font-size: 11px;
    color: var(--text-muted);
}
.adapter-card .ac-status {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ac-status.pending { color: var(--text-muted); font-weight: 400; }
.ac-status.running { color: #9a6700; }
.ac-status.done    { color: #1a7f37; }
.ac-status.failed  { color: #cf222e; }
.ac-status.empty   { color: #bc4c00; }

.adapter-card .ac-detail {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes adapter-spin {
    to { transform: rotate(360deg); }
}
.ac-spinner {
    display: inline-block;
    width: 9px;
    height: 9px;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: adapter-spin 0.65s linear infinite;
    flex-shrink: 0;
}

.scan-log-summary {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}
.scan-log-summary .log-line-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}
details.scan-log > summary { list-style: none; }
details.scan-log > summary::-webkit-details-marker { display: none; }
details.scan-log > summary::before {
    content: "▶";
    font-size: 10px;
    color: var(--text-muted);
    margin-right: 6px;
    display: inline-block;
    transition: transform 0.15s;
}
details.scan-log[open] > summary::before { transform: rotate(90deg); }

/* ── Reliability matrix (scan page) ────────────────────────────────────────── */
table.reliability-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.reliability-matrix th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    white-space: nowrap;
}
table.reliability-matrix td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
table.reliability-matrix tr:last-child td { border-bottom: none; }
table.reliability-matrix tr:hover td { background: var(--bg); }

.rm-adapter-col { min-width: 220px; }
.rm-run-col     { text-align: center; width: 48px; }
.rm-adapter-cell { display: flex; align-items: center; gap: 6px; }
.rm-flag   { font-size: 16px; line-height: 1; flex-shrink: 0; }
.rm-name   { font-weight: 500; }
.rm-famille { color: var(--text-muted); font-size: 12px; }

.rm-slot-cell { text-align: center; }
.rm-relaunch-cell { text-align: right; padding-right: 12px; }

.rm-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    cursor: default;
    transition: transform 0.1s;
}
a.rm-dot { cursor: pointer; }
a.rm-dot:hover { transform: scale(1.4); }
.rm-dot.ok       { background: #2da44e; }
.rm-dot.failed   { background: #cf222e; }
.rm-dot.empty    { background: #bc4c00; }
.rm-dot.excluded { background: var(--warn); }
.rm-dot.warning  { background: var(--warn); }
.rm-dot.none     { background: var(--border); }

.btn-inline {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    font-size: 12px; font-weight: 500;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.btn-inline:hover { color: var(--brand); border-color: var(--brand); text-decoration: none; }

/* ── Mini-history dots in adapter cards ─────────────────────────────────────── */
.ac-mini-history {
    display: flex; gap: 3px; align-items: center;
    margin-top: 4px;
}
.mini-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mini-dot.ok       { background: #2da44e; }
.mini-dot.failed   { background: #cf222e; }
.mini-dot.empty    { background: #bc4c00; }
.mini-dot.excluded { background: var(--warn); }
.mini-dot.none     { background: var(--border); }

.ac-relaunch {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 7px;
    font-size: 11px; font-weight: 500;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 5px;
    background: transparent;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ac-relaunch:hover { color: var(--brand); border-color: var(--brand); text-decoration: none; }

/* ── Export progress overlay ───────────────────────────────────────────────── */
.export-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    animation: export-overlay-fade-in 0.15s ease-out;
}
@keyframes export-overlay-fade-in {
    from { opacity: 0; } to { opacity: 1; }
}
.export-overlay[hidden] { display: none; }

.export-overlay-card {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 28px 32px;
    min-width: 360px; max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    text-align: center;
}
.export-overlay-title {
    font-size: 16px; font-weight: 600;
    color: var(--text, #111827);
    margin-bottom: 16px;
}
.export-overlay-bar {
    width: 100%; height: 6px;
    background: var(--border, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 14px;
}
.export-overlay-bar-fill {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg,
        var(--brand-dark, #a61e4d) 0%,
        var(--brand, #d6336c) 50%,
        var(--brand-dark, #a61e4d) 100%);
    border-radius: 3px;
    animation: export-overlay-slide 1.4s ease-in-out infinite;
}
@keyframes export-overlay-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
.export-overlay-sub {
    font-size: 13px;
    color: var(--text-muted, #6b7280);
    line-height: 1.45;
}
.export-overlay-elapsed {
    margin-top: 10px;
    font-size: 12px; font-weight: 500;
    color: var(--text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    background: var(--brand);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 90;
}
#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#back-to-top:hover {
    background: var(--brand-dark);
    transform: scale(1.1);
}

/* ── Mobile sidebar (hamburger) ────────────────────────────────────────────── */
.hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    background: var(--brand);
    border: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: background 0.2s;
}
.hamburger:hover { background: var(--brand-dark); }
.hamburger svg { display: block; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 150;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 768px) {
    .hamburger { display: flex; }

    .layout {
        grid-template-columns: 1fr;
    }

    aside.sidebar {
        position: fixed;
        top: 0;
        left: -240px;
        width: 240px;
        height: 100vh;
        z-index: 160;
        transition: left 0.25s ease;
        overflow-y: auto;
    }

    aside.sidebar.open {
        left: 0;
    }

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

    main {
        padding-top: 56px; /* espace pour le hamburger */
    }
}

/* ── Skip link (accessibilité clavier) ──────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    background: var(--brand);
    color: #fff;
    padding: 8px 16px;
    border-radius: 0 0 8px 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    z-index: 300;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ── Utility classes — remplacent les styles inline répétitifs ──────────────── */
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-muted   { color: var(--text-muted); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-sm      { font-size: 13px; }
.text-xs      { font-size: 12px; }
.text-11      { font-size: 11px; }
.fw-normal    { font-weight: normal; }
.fw-600       { font-weight: 600; }
.d-inline     { display: inline; }
.d-block      { display: block; }
.d-flex       { display: flex; }
.d-none       { display: none; }
.cursor-pointer { cursor: pointer; }
.m-0          { margin: 0; }
.mt-0         { margin-top: 0; }
.mt-4         { margin-top: 4px; }
.mt-8         { margin-top: 8px; }
.mt-12        { margin-top: 12px; }
.mt-14        { margin-top: 14px; }
.mt-16        { margin-top: 16px; }
.mt-20        { margin-top: 20px; }
.mt-24        { margin-top: 24px; }
.mt-28        { margin-top: 28px; }
.mt-32        { margin-top: 32px; }
.mb-0         { margin-bottom: 0; }
.mb-8         { margin-bottom: 8px; }
.mb-12        { margin-bottom: 12px; }
.mb-16        { margin-bottom: 16px; }
.mb-24        { margin-bottom: 24px; }
.p-0          { padding: 0; }
.p-4          { padding: 4px; }
.p-8          { padding: 8px; }
.p-16         { padding: 16px; }
.p-20         { padding: 20px; }
.p-24         { padding: 24px; }

/* --- Toast notifications ---------------------------------------------------
   Zone fixe en bas-à-droite. Les toasts sont injectés dynamiquement via JS
   (window.showToast). Auto-dismiss après 4 s avec animation de sortie.     */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    min-width: 220px;
    max-width: 360px;
    padding: 10px 14px 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    animation: toast-in 0.25s ease-out;
}
.toast.toast-out { animation: toast-out 0.3s ease-in forwards; }
.toast-success { background: #dafbe1; color: #1a7f37; border: 1px solid #b4f0c4; }
.toast-error   { background: #ffebe9; color: #cf222e; border: 1px solid #ffc1ba; }
.toast-info    { background: var(--accent-light); color: var(--accent); border: 1px solid #c6e6ff; }
.toast-warn    { background: #fff8c5; color: #9a6700; border: 1px solid #f0e384; }
.toast-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    font-size: 16px;
    line-height: 1;
    padding: 0 0 0 4px;
    flex-shrink: 0;
}
.toast-close:hover { opacity: 1; }
@keyframes toast-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toast-out {
    from { transform: translateX(0);    opacity: 1; max-height: 80px; margin-bottom: 0; }
    to   { transform: translateX(20px); opacity: 0; max-height: 0;    margin-bottom: -8px; }
}