:root {
    --brand-blue: #0a2540;
    --brand-blue-700: #102e4f;
    --brand-blue-600: #1a3a5c;
    --brand-blue-500: #25527d;
    --brand-yellow: #f5b921;
    --brand-yellow-600: #e0a514;
    --brand-yellow-soft: #fff4d1;
    --bg: #f4f6fb;
    --panel: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e6e9f2;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .02);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .04);
    --radius: 14px;
    --radius-sm: 10px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14.5px;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- Layout ---------- */
.app-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}
.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px 32px 32px;
    gap: 24px;
}

/* ---------- Sidebar ---------- */
.app-sidebar {
    background: linear-gradient(180deg, var(--brand-blue) 0%, var(--brand-blue-700) 100%);
    color: #d8e1ee;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--brand-yellow);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(245, 185, 33, .35);
}
.brand-chevrons {
    display: inline-block;
    width: 22px;
    height: 14px;
    position: relative;
}
.brand-chevrons span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--brand-blue);
    border-radius: 2px;
}
.brand-chevrons span:nth-child(1) { top: 1px; clip-path: polygon(0 100%, 50% 0, 100% 100%, 70% 100%, 50% 30%, 30% 100%); height: 8px; }
.brand-chevrons span:nth-child(2) { top: 7px; clip-path: polygon(0 100%, 50% 0, 100% 100%, 70% 100%, 50% 30%, 30% 100%); height: 8px; }
.brand-text strong {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .2px;
    display: block;
}
.brand-text small {
    color: rgba(216, 225, 238, .65);
    font-size: 11.5px;
}
/* ---------- Version badge ---------- */
.version-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(10, 37, 64, .08);
    color: var(--brand-blue);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: .3px;
    cursor: help;
}

/* ---------- Animation gear (worker busy) ---------- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---------- Sidebar : sections (avec pli/dépli) ---------- */
.nav-section {
    display: flex;
    flex-direction: column;
}
/* Section sans label (ex. Tableau de bord seul) : on conserve un peu
   d'espace en haut pour ne pas coller à la marque. */
.nav-section-flat { margin-top: 12px; }

/* Label de section. Quand c'est un <button> (toggle), on neutralise tous
   les styles natifs pour qu'il ressemble exactement au <p> d'origine. */
.nav-label,
button.nav-label {
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 10.5px;
    color: rgba(216, 225, 238, .55);
    margin: 12px 12px 6px;
    padding: 0;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.3;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Variante "toggle" (cliquable) — chevron à droite, hover discret */
.nav-label.is-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    user-select: none;
    transition: color .15s ease;
}
.nav-label.is-toggle:hover {
    color: rgba(255, 255, 255, .85);
}
.nav-label.is-toggle:focus-visible {
    outline: 2px solid var(--brand-yellow);
    outline-offset: 2px;
    border-radius: 4px;
}
.nav-chevron {
    font-size: 11px;
    opacity: .55;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .15s ease;
}
.nav-label.is-toggle:hover .nav-chevron {
    opacity: .85;
}
.nav-section.is-collapsed .nav-chevron {
    transform: rotate(-90deg);
}

/* Liste des items + animation pli/dépli avec grid-template-rows
   (la seule technique CSS qui anime de "auto" à 0 proprement). */
.nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-section .nav-list-wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1),
                opacity .18s ease;
    overflow: hidden;
    opacity: 1;
}
.nav-section.is-collapsed .nav-list-wrap {
    grid-template-rows: 0fr;
    opacity: 0;
}
.nav-section .nav-list-inner {
    min-height: 0;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(216, 225, 238, .85);
    text-decoration: none;
    font-weight: 500;
    transition: background .15s, color .15s, transform .15s;
    position: relative;
}
.nav-item i { font-size: 18px; opacity: .9; }
.nav-item:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}
.nav-item.is-active {
    background: rgba(245, 185, 33, .12);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--brand-yellow);
}
.nav-item.is-active i { color: var(--brand-yellow); }
.nav-item.disabled {
    opacity: .5;
    pointer-events: none;
}
/* Sous-groupe dans une section (ex. "Prompt AI" dans Paramètres). */
.nav-subhead {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(216, 225, 238, .45);
    margin: 8px 12px 4px 14px;
}
.nav-subhead i { font-size: 13px; opacity: .8; }
.nav-item.nav-sub {
    margin-left: 10px;
    padding-left: 14px;
    border-left: 1px solid rgba(216, 225, 238, .14);
    border-radius: 0 10px 10px 0;
}

/* ===== Sidebar : sections en cartes (variante C) ===== */
.app-sidebar { gap: 12px; }
.nav-section[data-section] {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 8px;
}
.nav-section[data-section] > .nav-label.is-toggle {
    margin: 0;
    padding: 6px 8px 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    color: #fff;
    gap: 8px;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nav-section[data-section] > .nav-label.is-toggle:hover { color: #fff; }
.nav-section[data-section] .nav-lead {
    font-size: 14px;
    color: var(--brand-yellow);
    opacity: 1;
}
.nav-section[data-section] .nav-chevron { margin-left: auto; }
.nav-section[data-section] .nav-list-inner { padding-top: 6px; }
.nav-section[data-section] .nav-item {
    padding: 8px 10px;
    font-size: 12.5px;
}
.nav-section[data-section] .nav-item.is-active {
    background: rgba(245, 185, 33, .14);
}
/* Carte repliée : on retire le trait du bas du header. */
.nav-section[data-section].is-collapsed > .nav-label.is-toggle {
    padding-bottom: 6px;
    border-bottom-color: transparent;
}
.badge-soon {
    margin-left: auto;
    font-size: 10px;
    background: rgba(255,255,255,.08);
    color: rgba(216, 225, 238, .75);
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.sidebar-footer { margin-top: auto; }
.sidebar-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(216, 225, 238, .8);
    font-size: 12.5px;
}
.sidebar-card i {
    color: var(--brand-yellow);
    font-size: 18px;
    margin-top: 2px;
}
.sidebar-card strong { color: #fff; display: block; margin-bottom: 2px; }
.sidebar-card p { margin: 0; line-height: 1.4; }

/* ---------- Topbar ---------- */
.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.topbar-eyebrow {
    margin: 0 0 2px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--muted);
    font-weight: 600;
}
.topbar-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-blue);
    letter-spacing: -.2px;
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.topbar-search {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 320px;
    box-shadow: var(--shadow-sm);
}
.topbar-search i { color: var(--muted); }
.topbar-search input {
    border: 0;
    outline: 0;
    background: transparent;
    flex: 1;
    font-size: 14px;
    color: var(--text);
}
.topbar-search kbd {
    background: #f0f3fa;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 11px;
}
.btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--brand-blue);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.btn-icon:hover { background: #f7f9fd; border-color: #d6dbe8; }
.btn-icon-soft { border-color: transparent; background: #f1f4fa; }
.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 4px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-weight: 600;
    color: var(--brand-blue);
    box-shadow: var(--shadow-sm);
}
.avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--brand-blue);
    color: var(--brand-yellow);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 10px;
    padding: 9px 16px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .1s, box-shadow .15s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
    box-shadow: 0 4px 12px rgba(10, 37, 64, .25);
}
.btn-primary:hover {
    background: var(--brand-blue-600);
    color: #fff;
}
.btn-outline {
    background: var(--panel);
    color: var(--brand-blue);
    border-color: var(--border);
}
.btn-outline:hover { background: #f7f9fd; }

/* ---------- Hero ---------- */
.hero-card {
    position: relative;
    background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-blue-500) 100%);
    color: #fff;
    border-radius: 20px;
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 200px at 100% 0%, rgba(245, 185, 33, .18), transparent 60%),
        radial-gradient(400px 200px at 0% 100%, rgba(245, 185, 33, .08), transparent 60%);
    pointer-events: none;
}
.hero-card-text { position: relative; max-width: 620px; }
.hero-card .eyebrow {
    color: var(--brand-yellow);
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 11.5px;
    font-weight: 700;
    margin: 0 0 8px;
}
.hero-card h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 12px;
}
.hero-lead {
    color: rgba(255,255,255,.78);
    margin: 0 0 22px;
    font-size: 14.5px;
    line-height: 1.55;
    max-width: 580px;
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-actions .btn-primary {
    background: var(--brand-yellow);
    border-color: var(--brand-yellow);
    color: var(--brand-blue);
    box-shadow: 0 6px 18px rgba(245, 185, 33, .35);
}
.hero-actions .btn-primary:hover {
    background: var(--brand-yellow-600);
    border-color: var(--brand-yellow-600);
    color: var(--brand-blue);
}
.hero-actions .btn-outline {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-color: rgba(255,255,255,.2);
}
.hero-actions .btn-outline:hover { background: rgba(255,255,255,.15); }
.hero-card-art { position: relative; }
.chevron-stack {
    position: relative;
    width: 180px;
    height: 140px;
    opacity: .55;
}
.chevron-stack span {
    position: absolute;
    width: 180px;
    height: 30px;
    border-top: 6px solid var(--brand-yellow);
    border-right: 6px solid var(--brand-yellow);
    transform: rotate(135deg);
    border-radius: 4px;
}
.chevron-stack span:nth-child(1) { top: 12px; }
.chevron-stack span:nth-child(2) { top: 50px; opacity: .6; }
.chevron-stack span:nth-child(3) { top: 88px; opacity: .3; }

/* ---------- Stats ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.stat-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}
.stat-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(10, 37, 64, .08);
    color: var(--brand-blue);
    display: grid; place-items: center;
    font-size: 22px;
}
.stat-icon-yellow {
    background: var(--brand-yellow-soft);
    color: var(--brand-yellow-600);
}
.stat-icon-soft {
    background: #eef3fb;
    color: var(--brand-blue-500);
}
.stat-label {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
}
.stat-value {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--brand-blue);
    letter-spacing: -.3px;
}
.stat-hint {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 11.5px;
}

/* ---------- Panels ---------- */
.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
}
.panel-accent {
    background:
        linear-gradient(180deg, #fffaeb 0%, #fff 60%);
    border-color: #f7e2a8;
}
.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 10px;
}
.panel-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-blue);
}
.muted { color: var(--muted); font-size: 12.5px; }

/* ---------- Modules grid ---------- */
.module-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.module-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    background: #fbfcff;
}
.module-tile i {
    font-size: 22px;
    color: var(--brand-blue);
    margin-bottom: 6px;
}
.module-tile strong { font-size: 14.5px; color: var(--brand-blue); }
.module-tile span { color: var(--muted); font-size: 12.5px; }
.module-tile:hover {
    border-color: var(--brand-yellow);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.module-tile:hover i { color: var(--brand-yellow-600); }

/* ---------- Todo list ---------- */
.todo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.todo-list li {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--text);
    font-weight: 500;
}
.todo-list i { color: var(--brand-blue); font-size: 18px; }
.todo-list i.bi-check2-circle { color: #16a34a; }

/* ---------- Search ---------- */
.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.search-bar-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fbfcff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    transition: border-color .15s, box-shadow .15s;
}
.search-bar-input:focus-within {
    border-color: var(--brand-yellow);
    box-shadow: 0 0 0 4px rgba(245, 185, 33, .15);
}
.search-bar-input i { color: var(--muted); font-size: 18px; }
.search-bar-input input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
}
.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.filter-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 4px;
}
.chip {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--brand-blue);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { background: var(--brand-yellow-soft); border-color: var(--brand-yellow); }
.chip-ghost { background: transparent; border-style: dashed; color: var(--muted); }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }
.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}
.table-modern th {
    text-align: left;
    color: var(--muted);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 14px;
    background: #f7f9fd;
    border-bottom: 1px solid var(--border);
}
.table-modern th:first-child { border-top-left-radius: 10px; }
.table-modern th:last-child { border-top-right-radius: 10px; }
.table-modern td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table-modern tbody tr { transition: background .15s; }
.table-modern tbody tr:hover { background: #fbfcff; }

/* Lignes cliquables (.js-clickable-rows tr[data-href]) : curseur main +
   surlignage plus marqué au hover pour signaler l'interaction. */
.table-modern.js-clickable-rows tbody tr[data-href] { cursor: pointer; }
.table-modern.js-clickable-rows tbody tr[data-href]:hover { background: #f0f4fb; }

/* Pastilles source (ServiceBox / PDF) sur la table de recherche. */
.src-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.4;
    margin-right: 4px;
}
.src-pill.src-sb  { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.src-pill.src-pdf { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* Page « Erreurs catalogue » : grille de compteurs cliquables (anchor
   vers la section concernée plus bas dans la page). Chaque compteur a
   un thème de couleur lié à son type d'erreur. Les zéros sont grisés. */
.errors-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.err-counter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: #334155;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.err-counter:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .12);
}
.err-counter-label  { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: #64748b; font-weight: 600; }
.err-counter-value  { font-size: 28px; font-weight: 800; line-height: 1; }
.err-counter-hint   { font-size: 11.5px; color: #94a3b8; }

.err-counter.is-empty {
    opacity: .55;
    background: #fafbfc;
}
.err-counter.is-empty .err-counter-value { color: #94a3b8; }

.err-counter.err-orphans.is-active { border-left-color: #dc2626; }
.err-counter.err-orphans.is-active .err-counter-value { color: #b91c1c; }

.err-counter.err-sb.is-active { border-left-color: #2563eb; }
.err-counter.err-sb.is-active .err-counter-value { color: #1d4ed8; }

.err-counter.err-pdf.is-active { border-left-color: #d97706; }
.err-counter.err-pdf.is-active .err-counter-value { color: #b45309; }

.err-counter.err-flag.is-active { border-left-color: #ca8a04; }
.err-counter.err-flag.is-active .err-counter-value { color: #a16207; }

/* Lien "fichier d'import" dans la table des erreurs : icône + nom de
   fichier, soulignement au survol. Tronqué proprement avec ellipsis. */
.job-filename-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-blue-700, #1e3a8a);
    text-decoration: none;
    font-weight: 500;
    max-width: 280px;
    overflow: hidden;
}
.job-filename-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-filename-link .bi { color: #94a3b8; flex-shrink: 0; }
.job-filename-link:hover {
    text-decoration: underline;
    color: var(--brand-blue-500, #2563eb);
}
.job-filename-link:hover .bi { color: var(--brand-blue-500, #2563eb); }

/* Pagination sous un tableau (.table-pagination). 2 zones : info à gauche
   (page size + range), boutons à droite. Compact, en bordure haute. */
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 4px;
    border-top: 1px solid var(--border);
    margin-top: -1px;
    font-size: 12.5px;
    color: #475569;
}
.pagination-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pagination-info label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.pagination-info select {
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12.5px;
    background: #fff;
}
.pagination-range { color: #64748b; }
.pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pagination-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: #334155;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.pagination-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.pagination-btn:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}
.pagination-btn.is-active {
    background: var(--brand-blue-500, #2563eb);
    border-color: var(--brand-blue-500, #2563eb);
    color: #fff;
    font-weight: 600;
}
.pagination-ellipsis {
    color: #94a3b8;
    padding: 0 4px;
}

/* Ligne de filtres dans le <thead> : 1 input par colonne, discret. */
.table-modern thead tr.th-filters th {
    background: #fafbfc;
    padding: 6px 10px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    border-bottom: 1px solid var(--border);
    cursor: default;
}
.table-modern thead tr.th-filters th:hover { background: #fafbfc; }
.table-modern thead tr.th-filters th::after { content: none !important; }
.table-modern thead tr.th-filters input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    font-size: 12.5px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: #334155;
    transition: border-color .15s, box-shadow .15s;
}
.table-modern thead tr.th-filters input[type="search"]:focus {
    outline: none;
    border-color: var(--brand-blue-500, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}
.table-modern thead tr.th-filters input[type="search"]::placeholder {
    color: #94a3b8;
    font-style: italic;
}

/* En-tête cliquable pour le tri (.js-sortable th[data-sort]). Cursor
   pointer + flèches ▲/▼ apparaissant sur la colonne triée. */
.table-modern th.is-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 22px;
}
.table-modern th.is-sortable:hover {
    color: var(--brand-blue-700, #1e3a8a);
    background: #f0f4fb;
}
.table-modern th.is-sortable::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #cbd5e1;
    opacity: .7;
}
.table-modern th.is-sorted-asc::after  { content: '▲'; color: var(--brand-blue-500, #2563eb); opacity: 1; }
.table-modern th.is-sorted-desc::after { content: '▼'; color: var(--brand-blue-500, #2563eb); opacity: 1; }
.ref-pill {
    color: var(--brand-blue);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}
.text-end { text-align: right; }

/* ---------- Bouton "copier la référence" (discret, à côté du texte) ---------- */
.copy-ref {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 2px 4px;
    margin-left: 4px;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
    border-radius: 4px;
    opacity: .55;
    transition: opacity .15s, color .15s, background .15s;
    vertical-align: middle;
}
.copy-ref:hover,
.copy-ref:focus-visible {
    opacity: 1;
    color: var(--brand-blue);
    background: rgba(10, 37, 64, .06);
    outline: none;
}
.copy-ref.is-copied { color: #16a34a; opacity: 1; }
.copy-ref i { font-size: 12.5px; }

/* Wrapper pour aligner la grosse référence du panneau d'en-tête + bouton */
.part-head-ref-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    padding: 36px 20px;
    color: var(--muted);
}
.empty-state i {
    font-size: 36px;
    color: var(--brand-blue-500);
    opacity: .55;
    display: inline-block;
    margin-bottom: 8px;
}
.empty-state p { margin: 0; }
.empty-state strong { color: var(--brand-blue); font-size: 15px; }
.empty-state-sm { padding: 18px; }

/* ---------- Import / dropzone ---------- */
.import-form { display: flex; flex-direction: column; }
.dropzone {
    border: 2px dashed #c9d2e3;
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: #fbfcff;
}
.dropzone:hover { border-color: var(--brand-yellow); background: #fffdf3; }
.dropzone input[type=file] { display: none; }
.dropzone-inner i {
    font-size: 36px;
    color: var(--brand-blue);
    display: block;
    margin-bottom: 10px;
}
.dropzone-inner p { margin: 0 0 4px; }
.dropzone-inner .small { font-size: 12px; }

/* ---------- Steps ---------- */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.steps li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.step-num {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--brand-yellow-soft);
    color: var(--brand-yellow-600);
    font-weight: 700;
    display: grid;
    place-items: center;
    font-size: 13px;
}
.steps strong { display: block; color: var(--brand-blue); margin-bottom: 2px; }
.steps p { margin: 0; }

/* ---------- Status ---------- */
.status-line {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 12px;
    background: #f7f9fd;
}
.status-line i { font-size: 22px; margin-top: 2px; }
.status-ok { background: #ecfdf5; }
.status-ok i { color: #16a34a; }
.status-ko { background: #fef2f2; }
.status-ko i { color: #dc2626; }

/* ---------- Footer ---------- */
.app-footer {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 12px;
    padding-top: 8px;
    margin-top: auto;
    border-top: 1px solid var(--border);
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 12px 14px;
    font-size: 13.5px;
}
.alert-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.alert-danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* ---------- Sidebar user block ---------- */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
}
.avatar-lg { width: 38px; height: 38px; font-size: 13px; }
.sidebar-user-info {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}
.sidebar-user-info strong {
    color: #fff;
    display: block;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-user-info small {
    color: rgba(216, 225, 238, .6);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.sidebar-logout button {
    background: transparent;
    border: 0;
    color: rgba(216, 225, 238, .65);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sidebar-logout button:hover {
    background: rgba(245, 185, 33, .15);
    color: var(--brand-yellow);
}

/* ---------- Login page ---------- */
.login-body {
    background:
        radial-gradient(1100px 600px at 0% 0%, rgba(245, 185, 33, .08), transparent 60%),
        radial-gradient(900px 500px at 100% 100%, rgba(10, 37, 64, .08), transparent 60%),
        var(--bg);
    min-height: 100vh;
    margin: 0;
}
.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}
.login-aside {
    position: relative;
    background: linear-gradient(160deg, var(--brand-blue) 0%, var(--brand-blue-500) 100%);
    color: #fff;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.login-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(500px 240px at 100% 0%, rgba(245, 185, 33, .25), transparent 60%),
        radial-gradient(400px 240px at 0% 100%, rgba(245, 185, 33, .12), transparent 60%);
    pointer-events: none;
}
.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.login-brand strong {
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    display: block;
}
.login-brand small { color: rgba(255,255,255,.65); font-size: 12px; }
.login-aside-content { position: relative; z-index: 1; max-width: 460px; }
.login-aside-content .eyebrow {
    color: var(--brand-yellow);
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 11.5px;
    font-weight: 700;
    margin: 0 0 8px;
}
.login-aside-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 38px;
    margin: 0 0 14px;
    line-height: 1.1;
}
.login-aside-content p {
    color: rgba(255,255,255,.78);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}
.login-aside-deco {
    position: absolute;
    right: -50px;
    bottom: 40px;
    z-index: 0;
    opacity: .35;
}
.login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px;
    box-shadow: var(--shadow-md);
    font-family: 'Inter', sans-serif;
}
.login-card h1 {
    margin: 0 0 4px;
    color: var(--brand-blue);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.3px;
}
.login-card .muted { margin: 0 0 22px; }
.field {
    display: block;
    margin-bottom: 14px;
}
.field > span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.field-input {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fbfcff;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 10px 14px;
    transition: border-color .15s, box-shadow .15s;
}
.field-input:focus-within {
    border-color: var(--brand-yellow);
    box-shadow: 0 0 0 4px rgba(245, 185, 33, .15);
}
.field-input i { color: var(--muted); font-size: 16px; }
.field-input input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14.5px;
    color: var(--text);
}
.btn-block {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    padding: 11px 16px;
}
.login-foot {
    text-align: center;
    margin: 22px 0 0;
    font-size: 11.5px;
}

/* ---------- Form select ---------- */
.field-input select {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14.5px;
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .25rem center;
    padding-right: 14px;
}

/* ---------- Catalog grid (cards) ---------- */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.catalog-card {
    position: relative;
    background: #fbfcff;
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.catalog-card:hover {
    border-color: var(--brand-yellow);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.catalog-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.catalog-card-thumb {
    height: 88px;
    background: #f1f3f8;
    border-bottom: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 16px;
}
.catalog-card-thumb img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.catalog-card-thumb-placeholder {
    color: var(--muted);
    font-size: 22px;
    opacity: .55;
}
.catalog-card-body {
    padding: 14px 50px 14px 16px; /* place pour l'icône PDF en haut à droite */
}
.catalog-card-pdf,
.catalog-card-pdf:link,
.catalog-card-pdf:visited {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #b30b00;
    background: #ec1c24; /* rouge Adobe Reader */
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
    z-index: 2;
}
.catalog-card-pdf:hover,
.catalog-card-pdf:focus {
    background: #c8161c;
    border-color: #8c0500;
    color: #ffffff;
    transform: scale(1.06);
    box-shadow: 0 2px 6px rgba(176, 11, 0, .35);
}
.catalog-card-pdf i,
.catalog-card-pdf:hover i,
.catalog-card-pdf:focus i {
    font-size: 17px;
    line-height: 1;
    color: #ffffff;
}
.catalog-card-vehicle {
    display: inline-block;
    background: var(--brand-blue);
    color: var(--brand-yellow);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.catalog-card h4 {
    color: var(--brand-blue);
    font-size: 15.5px;
    margin: 0 0 6px;
    font-weight: 700;
}
.catalog-card-stats {
    margin-top: 12px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
}
.catalog-card-stats span i { color: var(--brand-blue-500); margin-right: 3px; }

/* ---------- Key-value inline ---------- */
.kv {
    font-size: 13px;
    color: var(--text);
}
.kv b {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10.5px;
    font-weight: 600;
    margin-right: 6px;
}

/* ---------- Status pills ---------- */
.status-pill {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--brand-blue);
    border: 1px solid #dde6f3;
}
.status-queued     { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.status-extracting { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.status-extracted  { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.status-importing  { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.status-imported   { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.status-failed     { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.status-cancelled  { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

/* ---------- Action pills (preview) ---------- */
.action-pill {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 3px 9px;
    border-radius: 999px;
}
.pill-create { background: #ecfdf5; color: #065f46; }
.pill-update { background: #eff6ff; color: #1d4ed8; }
.pill-append { background: #fffbeb; color: #92400e; }

/* ---------- Chip statique / actif ---------- */
.chip-static { cursor: default; }
.chip-static:hover { background: #fff; border-color: var(--border); }
.chip-active {
    background: var(--brand-yellow-soft);
    border-color: var(--brand-yellow);
    color: var(--brand-blue);
}

/* ---------- Liens forts ---------- */
.link-strong {
    color: var(--brand-blue);
    text-decoration: none;
    font-weight: 600;
}
.link-strong:hover { color: var(--brand-yellow-600); }

/* ---------- Preview / flag rows ---------- */
.preview-table { font-size: 13px; }
.row-flag { background: #fffbe8 !important; }
.row-flag-icon {
    margin-left: 6px;
    color: var(--brand-yellow-600);
    font-size: 11px;
}
/* Sous-ligne d'enrichissement (Titre, Applicabilité, Fournisseur, Fonction)
   affichée sous la ligne principale du tableau de prévisualisation. */
.row-detail > td {
    padding: 4px 12px 8px 28px !important;
    font-size: 11.5px;
    color: #64748b;
    border-top: 0 !important;
    background: #fafbfc;
}
.row-detail.row-flag > td { background: #fff8d8; }
.row-detail dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2px 18px;
    margin: 0;
}
.row-detail dt {
    display: inline;
    font-weight: 600;
    color: #475569;
}
.row-detail dt::after { content: " : "; }
.row-detail dd { display: inline; margin: 0; }
.row-detail .is-empty dt { opacity: .55; }

/* ---------- Vehicles : Yes/No badges ---------- */
.badge-yes, .badge-no {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 9px;
    border-radius: 999px;
}
.badge-yes { background: #d1fae5; color: #065f46; }
.badge-no  { background: #f1f5f9; color: #64748b; }

/* ---------- Upload form fields wrap ---------- */
.upload-form .field { margin-bottom: 0; }

/* ============== Part detail (fiche pièce) ============== */

/* --- Bloc référence (en-tête compact) --- */
.part-head { padding: 18px 22px; }
.part-head-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    row-gap: 10px;
    column-gap: 18px;
    align-items: baseline;
}
.part-head-row {
    display: contents;  /* étale les enfants directement dans la grille */
}
.part-head-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.part-head-ref {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-blue);
    letter-spacing: .3px;
    line-height: 1.4;
}
.part-head-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}
.part-head-value { color: var(--text); font-size: 14px; }

/* Strip d'actions sous le panneau d'en-tête (Créer / Synchroniser CV) */
.part-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.cv-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.cv-badge-link:hover { background: #e0e7ff; border-color: #a5b4fc; }
.cv-badge i { font-size: 13px; }
.cv-badge-label { letter-spacing: .3px; }
.cv-badge-ref {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--brand-blue);
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid #c7d2fe;
}

/* ========== Table CitroVintage (recherche + stock) ========== */
.cv-table tbody td.mono,
.cv-stock-table .mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}
.cv-table tbody tr:nth-child(even) { background: rgba(248, 250, 253, .5); }
.cv-table tbody tr:hover           { background: #f3f7ff; }

.ref-pill-link {
    text-decoration: none;
    transition: color .15s;
    cursor: pointer;
    display: inline-block;
    padding: 3px 10px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
}
.ref-pill-link:hover { background: #e0e7ff; color: var(--brand-yellow-600); }

.ref-link {
    color: var(--brand-blue);
    text-decoration: none;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500;
    transition: color .15s;
}
.ref-link:hover { color: var(--brand-yellow-600); text-decoration: underline; }

/* Niveau de stock — pastille colorée */
.stock-pill {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12.5px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.stock-pill.is-ok  { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.stock-pill.is-low { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.stock-pill.is-out { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

/* État (neuf / occasion) — badge */
.etat-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.etat-neuf      { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.etat-occasion  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* Qualité A / B / C — pastille avec lettre */
.qualite-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: help;
}
.qualite-A { background: #dcfce7; color: #15803d; border: 2px solid #86efac; }
.qualite-B { background: #dbeafe; color: #1d4ed8; border: 2px solid #93c5fd; }
.qualite-C { background: #fef3c7; color: #a16207; border: 2px solid #fcd34d; }

/* Dropdown inline pour le fournisseur sur la fiche CV. Ressemble à du
   texte cliquable, ouvre la liste native au clic. */
.supplier-inline-select {
    appearance: auto;
    background: transparent;
    border: 1px dashed transparent;
    border-radius: 6px;
    padding: 2px 6px;
    margin: -2px -6px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    max-width: 100%;
}
.supplier-inline-select:hover {
    border-color: var(--border, #d1d5db);
    background: #f8fafc;
}
.supplier-inline-select:focus {
    outline: none;
    border-color: var(--brand-blue-500, #2563eb);
    background: #f0f4fb;
}
.supplier-inline-select.is-saved  { border-color: #16a34a; background: #dcfce7; }
.supplier-inline-select.is-error  { border-color: #dc2626; background: #fee2e2; }

/* Variante "pill" (label complet) — utilisée sur la fiche CV */
.qualite-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    border: 2px solid transparent;
}
.qualite-pill.qualite-A { background: #dcfce7; color: #15803d; border-color: #86efac; }
.qualite-pill.qualite-B { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.qualite-pill.qualite-C { background: #fef3c7; color: #a16207; border-color: #fcd34d; }

/* Flags d'état (SEO relu / export PrestaShop) sur le tableau de recherche CV */
.status-flag         { font-size: 16px; line-height: 1; }
.status-flag.is-ok   { color: #16a34a; }
.status-flag.is-ko   { color: #dc2626; }

/* Liste des catégories PS attachées sur la fiche produit (collapse PS).
   Affichage compact en arborescence : une ligne par catégorie
   réellement envoyée. La sous-catégorie est légèrement indentée. La
   ligne `id_category_default` ressort en gras + pastille verte. */
.ps-cats-tree {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ps-cat-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #334155;
}
.ps-cat-row .bi { color: #94a3b8; font-size: 14px; }
.ps-cat-row.is-sub { padding-left: 18px; }
.ps-cat-row.is-default {
    font-weight: 600;
    color: var(--brand-blue-700, #1e3a8a);
}
.ps-cat-row.is-default .bi { color: var(--brand-blue-500, #2563eb); }
.ps-cat-label { word-break: break-word; }
.ps-cat-default-pill {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Cellule prix élargie (pour les libellés longs comme la qualité) */
.part-prices-grid .price-cell.price-cell-wide {
    grid-column: span 2;
}

/* Cellule prix manquante pour une source toujours interrogée (autodoc /
   chevronix / eBay) — signale "rien trouvé, à investiguer". */
.part-prices-grid .price-cell.price-cell--missing {
    background: #fef2f2;
    border-color: #fca5a5;
}
.part-prices-grid .price-cell.price-cell--missing .price-label {
    color: #b91c1c;
}
.part-prices-grid .price-cell.price-cell--missing .price-value {
    color: #b91c1c;
    font-weight: 600;
}

/* Mini-bouton de re-recherche par source (placé dans le label de la cellule) */
.part-prices-grid .price-cell .price-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.part-prices-grid .price-cell-search-form {
    margin: 0;
}
.part-prices-grid .price-cell-search-btn {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--muted);
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: all .15s ease;
}
.part-prices-grid .price-cell-search-btn:hover:not(:disabled) {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}
.part-prices-grid .price-cell-search-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Lien-bouton désactivé (utilisé en pagination) — neutralise le clic */
a.btn.disabled, a.btn[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
    cursor: not-allowed;
}

/* Timeline de statut workflow SEO (sur la fiche CV).
   Étapes : Brouillon → Relu → Publié, en horizontal. Obsolète à part. */
.seo-timeline-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.seo-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 1 1 auto;
    min-width: 320px;
}
.seo-timeline.is-obsolete { opacity: .35; }

.seo-timeline .seo-step {
    flex: 1 1 0;
    position: relative;
    display: flex;
}
/* Lien horizontal entre les étapes */
.seo-timeline .seo-step::before {
    content: "";
    position: absolute;
    top: 12px;          /* aligné au centre du dot */
    left: 0;
    right: 50%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.seo-timeline .seo-step::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    right: 0;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.seo-timeline .seo-step:first-child::before { display: none; }
.seo-timeline .seo-step:last-child::after  { display: none; }

/* Étapes franchies / courante : trait coloré derrière */
.seo-timeline .seo-step.is-past::before,
.seo-timeline .seo-step.is-past::after,
.seo-timeline .seo-step.is-current::before {
    background: var(--brand-blue);
}

/* Bouton ou div d'étape : la pastille + le label + l'indice */
.seo-timeline .seo-step-btn {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0 4px;
    cursor: default;
    color: inherit;
    font: inherit;
}
button.seo-step-btn { cursor: pointer; }
.seo-timeline .seo-step.is-clickable .seo-step-btn:hover .seo-step-dot {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    transform: scale(1.1);
}
.seo-timeline .seo-step.is-clickable .seo-step-btn:hover .seo-step-label {
    color: var(--brand-blue);
}

/* Le rond de chaque étape */
.seo-timeline .seo-step-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--border);
    transition: all .15s ease;
}
.seo-timeline .seo-step.is-past    .seo-step-dot { background: var(--brand-blue); border-color: var(--brand-blue); }
.seo-timeline .seo-step.is-current .seo-step-dot {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .18);
}
.seo-timeline .seo-step.is-clickable .seo-step-dot { border-color: var(--brand-blue); border-style: dashed; }

/* Couleurs spécifiques par étape : Relu = bleu clair, Publié = vert.
   Plus parlant qu'un dégradé monochrome — l'utilisateur identifie d'un
   coup d'œil l'avancement workflow (brouillon → relecture → en ligne). */
.seo-timeline .seo-step[data-step="review"].is-past    .seo-step-dot,
.seo-timeline .seo-step[data-step="review"].is-current .seo-step-dot {
    background: #38bdf8; border-color: #38bdf8;  /* sky-400 */
}
.seo-timeline .seo-step[data-step="review"].is-current .seo-step-dot {
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .22);
}
.seo-timeline .seo-step[data-step="review"].is-current .seo-step-label { color: #0284c7; }

.seo-timeline .seo-step[data-step="published"].is-past    .seo-step-dot,
.seo-timeline .seo-step[data-step="published"].is-current .seo-step-dot {
    background: #16a34a; border-color: #16a34a;  /* green-600 */
}
.seo-timeline .seo-step[data-step="published"].is-current .seo-step-dot {
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .22);
}
.seo-timeline .seo-step[data-step="published"].is-current .seo-step-label { color: #166534; }

.seo-timeline .seo-step-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
}
.seo-timeline .seo-step.is-current .seo-step-label { color: var(--brand-blue); }
.seo-timeline .seo-step.is-future  .seo-step-label { color: var(--muted); }

.seo-timeline .seo-step-hint {
    font-size: 10.5px;
    color: var(--muted);
    text-align: center;
    line-height: 1.2;
}

/* Bouton "Obsolète" à part, à droite de la timeline */
.seo-obsolete-aside { flex: 0 0 auto; }
.seo-obsolete-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px dashed #d1d5db;
    background: #fafafa;
    color: #6b7280;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.seo-obsolete-badge.is-clickable:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}
.seo-obsolete-badge.is-current {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    cursor: default;
    opacity: 1;
}
button.seo-obsolete-badge { font-family: inherit; }

/* ===== Images CitroVintage ============================================= */
.cv-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.cv-image-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    background: #f9fafb;
    cursor: grab;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cv-image-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-blue);
}
.cv-image-tile.is-primary {
    border: 2px solid #f59e0b;
}
.cv-image-tile.is-dragging { opacity: .4; cursor: grabbing; }
.cv-image-tile.is-drop-target {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .35);
}
.cv-image-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.cv-image-primary-badge {
    position: absolute; top: 6px; left: 6px;
    background: #f59e0b; color: #fff;
    border-radius: 50%;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cv-image-source-pill {
    position: absolute; bottom: 6px; left: 6px;
    background: rgba(0,0,0,.65); color: #fff;
    font-size: 9px; font-weight: 700;
    padding: 1px 6px; border-radius: 999px;
    letter-spacing: .5px;
}
.cv-image-actions {
    position: absolute; top: 6px; right: 6px;
    display: flex; gap: 3px;
    opacity: 0;
    transition: opacity .12s ease;
}
.cv-image-tile:hover .cv-image-actions { opacity: 1; }
.cv-image-btn {
    width: 26px; height: 26px;
    border-radius: 5px;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: #374151;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
}
.cv-image-btn:hover { background: #fff; color: var(--brand-blue); }
.cv-image-btn-danger:hover { color: #dc2626; }

.cv-images-empty {
    text-align: center;
    padding: 32px 16px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    color: var(--muted);
}
.cv-images-empty i { font-size: 32px; display: block; margin-bottom: 8px; }
.cv-images-empty.is-drop-target {
    border-color: var(--brand-blue);
    background: rgba(59, 130, 246, .05);
}

/* ----- Modal AI suggestions images ----- */
.cv-modal {
    position: fixed; inset: 0;
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.cv-modal[hidden] { display: none !important; }
.cv-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}
.cv-modal-panel {
    position: relative;
    background: #fff;
    border-radius: 14px;
    width: min(900px, 94vw);
    max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.cv-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.cv-modal-close {
    background: none; border: 0; cursor: pointer;
    color: var(--muted); font-size: 18px;
}
.cv-modal-close:hover { color: #111; }
.cv-modal-body { padding: 16px 20px; overflow: auto; }
.cv-suggest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.cv-suggest-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    display: flex; flex-direction: column;
    background: #fff;
}
.cv-suggest-card-img {
    aspect-ratio: 1 / 1;
    background: #f3f4f6;
    overflow: hidden;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.cv-suggest-card-img img { width: 100%; height: 100%; object-fit: cover; }
.cv-suggest-card-img.is-broken { color: #dc2626; font-size: 24px; }
.cv-suggest-conf-pill {
    position: absolute; top: 6px; right: 6px;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: .3px;
}
.cv-suggest-evidence {
    font-size: 10.5px;
    color: #1f2937;
    background: #f9fafb;
    border-left: 2px solid #cbd5e1;
    padding: 4px 6px;
    border-radius: 0 4px 4px 0;
    line-height: 1.35;
    margin-top: 2px;
    font-style: italic;
}
.cv-suggest-evidence i { color: #94a3b8; margin-right: 3px; }
.cv-suggest-card-meta {
    padding: 8px 10px;
    font-size: 11.5px;
    flex: 1 1 auto;
    display: flex; flex-direction: column; gap: 4px;
}
.cv-suggest-card-meta strong { color: #374151; }
.cv-suggest-card-meta .muted { font-size: 10.5px; }
.cv-suggest-card-actions {
    display: flex; gap: 4px;
    padding: 0 10px 10px;
}
.cv-suggest-card-actions a, .cv-suggest-card-actions button {
    flex: 1;
    text-align: center;
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--brand-blue);
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}
.cv-suggest-card-actions .btn-import {
    background: var(--brand-blue); color: #fff; border-color: var(--brand-blue);
}
.cv-suggest-card-actions .btn-import:hover { opacity: .9; }
.cv-suggest-card-actions .btn-import:disabled { opacity: .5; cursor: not-allowed; }

/* ----- Modal "Capturer depuis catalogue" (crop d'une planche PDF) ----- */
.cv-modal-panel-wide { width: min(1200px, 96vw); }

.cv-image-source-pill-catalog { background: rgba(37, 99, 235, .85); }

/* Badge "Nettoyée" sur les images dont le fond a été retiré via rembg. */
.cv-image-cleaned-pill {
    position: absolute; bottom: 6px; left: 6px;
    background: rgba(34, 197, 94, .92); color: #fff;
    font-size: 10px; font-weight: 600;
    padding: 2px 7px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    z-index: 2;
}
@keyframes cvspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.cv-catalog-sources {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.cv-catalog-sources li {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
    display: flex; align-items: center; gap: 12px;
}
.cv-catalog-sources li:hover {
    border-color: var(--brand-blue);
    background: rgba(59, 130, 246, .04);
}
.cv-catalog-sources .src-kind {
    flex: 0 0 auto;
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    letter-spacing: .5px;
    background: #e0e7ff; color: #3730a3;
}
.cv-catalog-sources .src-kind.is-planche { background: #dcfce7; color: #166534; }
.cv-catalog-sources .src-label { flex: 1 1 auto; font-weight: 600; color: #111827; }
.cv-catalog-sources .src-meta  { color: var(--muted); font-size: 12px; }

.cv-crop-stage {
    position: relative;
    background: #1f2937;
    border-radius: 8px;
    overflow: auto;
    max-height: 65vh;
    user-select: none;
    cursor: crosshair;
}
.cv-crop-stage img {
    display: block;
    max-width: 100%;
    height: auto;
}
.cv-crop-stage.is-loading {
    min-height: 240px;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af;
}
.cv-crop-rect {
    position: absolute;
    border: 2px dashed #38bdf8;
    background: rgba(56, 189, 248, .12);
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35);
}

/* Layout SEO en CSS Grid pur (override de Bootstrap .row).
   Chaque paire dt/dd occupe une vraie ligne du grid, avec un row-gap
   fixe → le rythme vertical est identique des deux côtés, peu importe
   la hauteur du contenu de la valeur. */
.seo-fields.row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 3fr;
    column-gap: 24px;
    row-gap: 18px;
    margin: 0;
}
.seo-fields > dt,
.seo-fields > dd {
    /* Reset complet du col-sm-* Bootstrap */
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
}
/* Neutralise les marges natives des balises internes (h3, p, ul, …)
   pour que le contenu commence pile en haut de la cellule. */
.seo-fields > dd > *:first-child { margin-top: 0; }
.seo-fields > dd > *:last-child  { margin-bottom: 0; }

/* Mobile : passage sur 1 colonne, le label au-dessus de la valeur */
@media (max-width: 575.98px) {
    .seo-fields.row {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }
    .seo-fields > dt { margin-top: 8px; }
}

/* Champs SEO inline-editable (sur la fiche CV). Hover discret + curseur
   texte ; au passage en édition, fond blanc et bordure bleue. */
.seo-fields .seo-field.is-editable {
    cursor: text;
    border-radius: 4px;
    padding: 2px 6px;
    margin: -2px -6px;
    transition: background .15s ease;
}
.seo-fields .seo-field.is-editable:hover {
    background: rgba(59, 130, 246, .06);
}
.seo-fields .seo-field.is-editing {
    background: #fff;
    border: 1px solid var(--brand-blue);
    padding: 6px 8px;
    margin: -7px -9px;
}
.seo-fields .seo-inline-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 6px;
    font-family: inherit;
    font-size: inherit;
    background: #fff;
    outline: none;
}
.seo-fields .seo-inline-input:focus {
    border-color: var(--brand-blue);
}
.seo-fields .seo-inline-input.is-invalid {
    border-color: #dc2626;
    background: #fef2f2;
}
.seo-fields .seo-field.flash-saved {
    background: rgba(34, 197, 94, .15);
}

/* Table d'apparitions catalogue insérée en post-process dans
   citrovintage_seo.long_description (générée par le worker). Rendue dans
   la fiche CV ; PrestaShop appliquera son propre style côté boutique. */
.seo-apparitions {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 16px 0 20px;
    font-size: 13.5px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    table-layout: fixed;
}
.seo-apparitions thead th {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border-bottom: 1px solid #d8dee9;
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #475569;
    white-space: nowrap;
}
.seo-apparitions thead th:first-child { width: 16%; }
.seo-apparitions thead th:nth-child(2) { width: 22%; }
.seo-apparitions thead th:nth-child(3) { width: 30%; }
.seo-apparitions thead th:nth-child(4) { width: 32%; }

.seo-apparitions tbody td {
    border-top: 1px solid #eef2f7;
    padding: 10px 14px;
    vertical-align: middle;
    color: #1f2937;
    word-wrap: break-word;
}
.seo-apparitions tbody tr:first-child td { border-top: none; }
.seo-apparitions tbody tr:nth-child(even) td { background: #f9fafb; }
.seo-apparitions tbody tr:hover td { background: #eff6ff; }

/* Marque (1ère colonne) : pill « bouton » identique à .row-marque dans la
   liste d'apparitions de la fiche pièce Citroën. */
.seo-apparitions .seo-marque-pill,
.seo-engines .seo-marque-pill {
    display: inline-block;
    padding: 3px 10px;
    background: #e0e7ff;
    color: #1e3a8a;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}
/* Modèle (2e colonne) : bold pour l'identité véhicule. */
.seo-apparitions tbody td:nth-child(2) { font-weight: 600; color: #1e3a8a; }
/* Applicabilité / Infos compl. : un peu plus discrètes. */
.seo-apparitions tbody td:nth-child(3),
.seo-apparitions tbody td:nth-child(4) { color: #475569; font-size: 13px; }

/* ===========================================================
   Table « Motorisations compatibles » — second tableau auto-
   injecté dans long_description (croisement apparitions ↔
   psa_engines). Style aligné sur .seo-apparitions, 5 colonnes
   (Marque / Modèle / Nom commercial / Cylindrée / Carburant).
   =========================================================== */
.seo-engines {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 16px 0 20px;
    font-size: 13.5px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    table-layout: fixed;
}
.seo-engines thead th {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border-bottom: 1px solid #d8dee9;
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #475569;
    white-space: nowrap;
}
.seo-engines thead th:nth-child(1) { width: 14%; }
.seo-engines thead th:nth-child(2) { width: 18%; }
.seo-engines thead th:nth-child(3) { width: 34%; }
.seo-engines thead th:nth-child(4) { width: 14%; }
.seo-engines thead th:nth-child(5) { width: 20%; }

.seo-engines tbody td {
    border-top: 1px solid #eef2f7;
    padding: 10px 14px;
    vertical-align: middle;
    color: #1f2937;
    word-wrap: break-word;
}
.seo-engines tbody tr:first-child td { border-top: none; }
.seo-engines tbody tr:nth-child(even) td { background: #f9fafb; }
.seo-engines tbody tr:hover td          { background: #eff6ff; }

/* Modèle (2e colonne) : bold bleu marine, comme la table apparitions. */
.seo-engines tbody td:nth-child(2) { font-weight: 600; color: #1e3a8a; }

/* Nom commercial (3e colonne) : nom en valeur principale + code moteur en
   petit chip mono discret entre parenthèses. */
.seo-engines tbody td:nth-child(3) { font-weight: 600; color: #0f172a; }
.seo-engines .seo-engine-code {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    background: #f1f5f9;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: .02em;
    vertical-align: 1px;
}

/* Cylindrée (4e colonne) : muted mono pour aligner les chiffres. */
.seo-engines tbody td:nth-child(4) {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: #475569;
}

/* Carburant (5e colonne) : pill colorée Essence (bleu) / Diesel (orange). */
.seo-engines .seo-fuel-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .02em;
    line-height: 1.4;
    white-space: nowrap;
}
.seo-engines .seo-fuel-essence { background: #dbeafe; color: #1e40af; }
.seo-engines .seo-fuel-diesel  { background: #fef3c7; color: #92400e; }

/* Cellule prix éditable inline (pattern citrovintage) */
.part-prices-grid .price-cell-editable .price-value.field-inline {
    cursor: text;
    border-radius: 4px;
    padding: 1px 4px;
    margin: -1px -4px;
    transition: background .15s ease;
}
.part-prices-grid .price-cell-editable .price-value.field-inline:hover,
.part-prices-grid .price-cell-editable .price-value.field-inline:focus-visible {
    background: rgba(59, 130, 246, .08);
    outline: none;
}
.part-prices-grid .price-cell-editable .price-value.field-inline.is-editing {
    background: #fff;
    padding: 0;
}
.part-prices-grid .price-cell-editable .price-inline-input {
    width: 100%;
    border: 1px solid var(--brand-blue);
    border-radius: 4px;
    padding: 1px 4px;
    font-family: inherit;
    font-size: inherit;
    color: var(--brand-blue);
    font-weight: 600;
    outline: none;
    background: #fff;
}
.part-prices-grid .price-cell-editable .price-inline-input.is-invalid {
    border-color: #dc2626;
    background: #fef2f2;
}
.part-prices-grid .price-cell-editable .price-value.field-inline.flash-saved {
    background: rgba(34, 197, 94, .15);
}

/* Cellules éditables de la table Stock (CV show) — même UX que field-inline */
.cv-stock-table .stock-cell {
    display: inline-block;
    cursor: text;
    border-radius: 4px;
    padding: 1px 4px;
    margin: -1px -4px;
    min-width: 1.5rem;
    transition: background .15s ease;
}
.cv-stock-table .stock-cell:hover,
.cv-stock-table .stock-cell:focus-visible {
    background: rgba(59, 130, 246, .08);
    outline: none;
}
.cv-stock-table .stock-cell.is-editing {
    background: #fff;
    padding: 0;
}
.cv-stock-table .stock-cell.flash-saved {
    background: rgba(34, 197, 94, .15);
}
.cv-stock-table .cv-stock-inline-input {
    width: 100%;
    border: 1px solid var(--brand-blue);
    border-radius: 4px;
    padding: 1px 4px;
    font: inherit;
    color: var(--brand-blue);
    outline: none;
    background: #fff;
}
.cv-stock-table .cv-stock-inline-input.is-invalid {
    border-color: #dc2626;
    background: #fef2f2;
}

/* Bloc markdown rendu (recherche libre tarifs sur la fiche pièce Citroën) */
.part-free-research {
    background: #f8fafc;
    border: 1px solid #e3e8f0;
    border-radius: 6px;
    padding: 12px 16px;
    line-height: 1.55;
    font-size: 14px;
    max-height: 600px;
    overflow-y: auto;
}
.part-free-research h3,
.part-free-research h4,
.part-free-research h5 {
    margin: 1em 0 0.5em;
    color: var(--brand-blue-700, #1e3a8a);
}
.part-free-research h3:first-child,
.part-free-research h4:first-child,
.part-free-research h5:first-child { margin-top: 0; }
.part-free-research ul { padding-left: 1.4em; margin: 0.4em 0; }
.part-free-research li { margin-bottom: 0.3em; }
.part-free-research a { color: var(--brand-blue, #2563eb); text-decoration: underline; }
.part-free-research code {
    background: #eef2ff;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: .9em;
}

/* Section repliable : le <details> est lui-même un cadre/panneau qui
   s'étend quand on l'ouvre. Le summary fait office d'en-tête cliquable,
   le body apparaît en-dessous séparé par un fin trait. */
.part-section-collapse {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.part-section-collapse-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background .15s;
}
.part-section-collapse-summary::-webkit-details-marker { display: none; }
.part-section-collapse-summary:hover { background: #fafbfd; }
.part-section-collapse[open] > .part-section-collapse-summary {
    border-bottom: 1px solid var(--border);
}

/* Titre + chevron alignés à gauche dans le summary */
.part-section-collapse-summary h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 200px;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-blue);
}
.part-section-collapse-summary .stock-title { margin-left: 4px; }
.part-section-collapse-summary .collapse-chevron {
    margin-left: auto;
    font-size: 13px;
    color: var(--muted);
    transition: transform .2s, color .15s;
    flex-shrink: 0;
}
.part-section-collapse[open] .collapse-chevron { transform: rotate(180deg); }
.part-section-collapse-summary:hover .collapse-chevron { color: var(--brand-blue); }

/* Corps du collapse : padding cohérent avec un panneau standard */
.part-section-collapse-body { padding: 16px 20px; }

/* ========== Fiche CitroVintage ========== */
/* Barre d'actions positionnée au-dessus du panneau d'en-tête */
.cv-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* Pastille statut PrestaShop dans la toolbar haute de la fiche CV.
   Cliquable quand "non publié" → soumet le formulaire de création. */
.cv-ps-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    background: transparent;
    cursor: default;
    transition: filter .15s ease;
}
.cv-ps-pill > i.bi-shop { font-size: 14px; }
.cv-ps-pill--ok      { background: #dcfce7; color: #15803d; border-color: #86efac; }
.cv-ps-pill--off     { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }
.cv-ps-pill--missing { background: #fee2e2; color: #b91c1c; border-color: #fecaca; cursor: pointer; }
.cv-ps-pill--missing:hover { filter: brightness(.96); }
.cv-ps-pill--ps-origin { background: #fff8e1; color: #92580a; border-color: #ffd54f; cursor: help; }

/* Petit bouton "re-synchroniser" intégré dans la pastille publiée. */
.cv-ps-pill-resync {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: rgba(255,255,255,.55);
    color: inherit;
    cursor: pointer;
    transition: background .15s ease;
}
.cv-ps-pill-resync:hover  { background: rgba(255,255,255,.95); }
.cv-ps-pill-resync .bi    { font-size: 12px; line-height: 1; }

/* Bloc "caractéristiques" sans titre : petit espace après l'en-tête,
   et la grille remplit toute la largeur du panneau (auto-fit + 1fr). */
.cv-characteristics { margin-top: 14px; }
/* Grille fixe à 4 colonnes : 4 cellules par ligne, parfaitement alignées
   verticalement (Prix/État/Qualité/Fournisseur, puis L/l/h/Poids). */
.cv-characteristics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 760px) {
    .cv-characteristics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Cellule "prix de vente HT" éditable inline */
.price-cell-editable .price-inline {
    cursor: text;
    border-radius: 6px;
    padding: 1px 4px;
    margin: -1px -4px;
    transition: background .15s, box-shadow .15s;
}
.price-cell-editable .price-inline:hover,
.price-cell-editable .price-inline:focus-visible {
    background: rgba(10, 37, 64, .06);
    outline: none;
}
.price-cell-editable .price-inline.is-editing {
    background: transparent;
    padding: 0;
    margin: 0;
}
.price-cell-editable .price-inline-input {
    width: 100%;
    padding: 5px 8px;
    border: 2px solid var(--brand-blue-500);
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--brand-blue);
    font-weight: 600;
    font-size: 14px;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(10, 37, 64, .1);
}
.price-cell-editable .price-inline-input:focus { outline: none; }
.price-cell-editable .price-inline-input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}
@keyframes priceFlashSaved {
    0%   { background: rgba(34, 197, 94, .25); }
    100% { background: transparent; }
}
.price-cell-editable .price-inline.flash-saved {
    animation: priceFlashSaved .8s ease-out;
}

.cv-head { padding: 18px 22px; }
.cv-head .cv-head-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    row-gap: 10px;
    column-gap: 18px;
    align-items: baseline;
}
.cv-head-row { display: contents; }
.cv-notes {
    margin: 14px 0 0;
    padding: 10px 14px;
    background: #fafafa;
    border-left: 3px solid var(--brand-blue-500);
    border-radius: 4px;
    font-size: 13.5px;
    color: var(--text);
}
.cv-notes i { color: var(--brand-yellow-600); margin-right: 6px; }

/* Bouton supprimer (couleur rouge discrète) */
.btn-danger {
    color: #b91c1c;
    border-color: #fecaca;
}
.btn-danger:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

/* Pastille du lieu (entrepôt) dans le tableau de stock CV. */
.cv-lieu-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #1e3a8a;
    border: 1px solid #c7d2fe;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ========== Formulaire d'édition stock ========== */
.cv-form .cv-stock-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cv-form .cv-stock-row {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 0.7fr 1.6fr auto;
    gap: 8px;
    align-items: center;
}
.cv-form .cv-stock-row input,
.cv-form .cv-stock-row select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cv-form .cv-stock-row input:focus,
.cv-form .cv-stock-row select:focus {
    outline: none;
    border-color: var(--brand-blue-500);
    box-shadow: 0 0 0 3px rgba(10, 37, 64, .12);
}
.cv-form .btn-remove-stock {
    padding: 7px 10px;
    color: #b91c1c;
    border-color: #fecaca;
    background: #fff;
}
.cv-form .btn-remove-stock:hover { background: #fee2e2; color: #b91c1c; }

/* Multi-select des modèles PS sur la fiche d'édition CV : groupé par
   catégorie parente (tranche d'années), checkbox compactes en grille. */
.ps-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.ps-categories-group {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fafbfc;
}
.ps-categories-title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-blue-700, #1e3a8a);
    margin-bottom: 8px;
    letter-spacing: .2px;
}
.ps-categories-checks {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ps-category-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1.3;
}
.ps-category-check input[type="checkbox"] { margin: 0; }
@media (max-width: 700px) {
    .cv-form .cv-stock-row { grid-template-columns: 1fr 1fr; }
    .cv-form .cv-stock-row > select.cv-stock-lieu { grid-column: span 2; }
    .cv-form .cv-stock-row > input:nth-child(4)   { grid-column: span 2; }
    .cv-form .cv-stock-row > .btn-remove-stock    { grid-column: span 2; justify-self: end; }
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* --- Section header (Apparitions) --- */
.part-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.part-section-head h3 {
    margin: 0;
    color: var(--brand-blue);
    font-size: 17px;
    font-weight: 700;
}

/* --- Toolbar : toggle vue + filtre véhicule --- */
.apparition-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 10px 0 14px;
}
.view-toggle {
    display: inline-flex;
    background: #f3f4f6;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
}
.view-toggle button {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    transition: background .15s, color .15s;
}
.view-toggle button:hover { color: var(--brand-blue); }
.view-toggle button.is-active {
    background: #fff;
    color: var(--brand-blue);
    box-shadow: 0 1px 3px rgba(10, 37, 64, .12);
}
.apparition-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}
.apparition-filter select {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: var(--text);
    min-width: 160px;
}
.apparition-count { font-size: 12px; }

/* --- Bascule entre vues : seule la vue active s'affiche --- */
.apparitions-views[data-view="cards"] .view-list { display: none; }
.apparitions-views[data-view="list"]  .view-cards { display: none; }

/* --- Vue cartes : grille --- */
.apparition-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}

/* --- Vue liste : lignes empilées avec collapse --- */
.apparition-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.apparition-row + .apparition-row { border-top: 1px solid var(--border); }
.apparition-row > details { width: 100%; }
.apparition-row summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    transition: background .15s;
}
.apparition-row .row-marque {
    flex: 0 0 auto;
    width: 90px;
    padding: 3px 8px;
    background: #e0e7ff;
    color: #1e3a8a;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.apparition-row .row-vehicle {
    flex: 0 0 auto;
    min-width: 110px;
    font-weight: 700;
    color: var(--brand-blue);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.apparition-row .row-pdf { margin-left: auto; flex: 0 0 auto; }
.apparition-row .row-toggle { flex: 0 0 18px; }
.apparition-row summary::-webkit-details-marker { display: none; }
.apparition-row summary:hover { background: #fafbfd; }
.apparition-row > details.no-detail summary { cursor: default; }
.apparition-row > details.no-detail summary:hover { background: transparent; }
.apparition-row .row-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
    transition: transform .2s;
}
.apparition-row > details[open] .row-toggle { transform: rotate(90deg); }
.apparition-row .row-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1 1 0;
    min-width: 70px;
}
.apparition-row .row-cell-wide { flex: 2 1 0; min-width: 140px; }
.apparition-row .row-cell-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
}
.apparition-row .row-cell-value {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--brand-blue);
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.apparition-row .row-pdf {
    display: inline-flex;
    justify-content: center;
}
.apparition-row .row-pdf .pdf-icon-link { font-size: 18px; }
.apparition-row-details {
    padding: 4px 14px 14px 44px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fafbfd;
    border-top: 1px dashed var(--border);
}
@media (max-width: 900px) {
    .apparition-row summary {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
    }
    .apparition-row .row-cell { flex-direction: row; gap: 6px; align-items: baseline; }
    .apparition-row .row-cell-label::after { content: ":"; }
    .apparition-row-details { padding-left: 14px; }
}
.apparition-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.apparition-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.apparition-card-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.catalog-badge {
    background: var(--brand-blue);
    color: var(--brand-yellow);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 9px;
    border-radius: 999px;
    flex-shrink: 0;
}
/* Variante « marque » : pill bleu pâle, plus discret que le badge modèle */
.catalog-badge.catalog-badge-marque {
    background: #e0e7ff;
    color: #1e3a8a;
    letter-spacing: .04em;
}
.apparition-catalog {
    color: var(--brand-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.apparition-catalog:hover { color: var(--brand-yellow-600); }

.btn-sm { padding: 5px 10px; font-size: 12.5px; }

/* Icône PDF cliquable (rouge Adobe) dans le header de chaque card */
.pdf-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FA0F00;
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
    transition: color .15s, transform .15s;
}
.pdf-icon-link:hover { color: #C81D11; transform: scale(1.1); }
.pdf-icon-link.is-disabled {
    color: var(--muted);
    opacity: .5;
    cursor: not-allowed;
    pointer-events: auto;
}

.apparition-moteur,
.apparition-groupe,
.apparition-infos {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.5;
}
.apparition-moteur i,
.apparition-groupe i,
.apparition-infos i {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: 14px;
    position: relative;
    top: 1px;
}
.apparition-moteur i { color: var(--brand-yellow-600); }
.apparition-groupe i { color: var(--brand-blue-500); }
.apparition-infos i { color: var(--muted); }

/* Grille planche/repère/qté/page */
.apparition-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 4px 0 0;
    padding: 10px 12px;
    background: #fbfcff;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.apparition-grid > div { min-width: 0; }
.apparition-grid dt {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin: 0 0 2px;
}
.apparition-grid dd {
    margin: 0;
    color: var(--brand-blue);
    font-weight: 600;
    font-size: 14px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Lien PDF dans la cellule "Page PDF" de la grille des apparitions */
.apparition-pdf-link {
    color: var(--brand-blue);
    text-decoration: none;
    border-bottom: 1px dashed var(--brand-blue-500);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .15s, border-color .15s;
}
.apparition-pdf-link:hover {
    color: var(--brand-yellow-600);
    border-bottom-color: var(--brand-yellow);
}
.apparition-pdf-link i { font-size: 11px; opacity: .7; }

/* --- Métadonnées (footer fiche) --- */
.part-meta-foot {
    margin-top: 18px;
    color: var(--muted);
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.part-meta-foot i { color: var(--brand-blue-500); }
.part-meta-foot--inline {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.part-meta-foot--top { margin-top: 0; margin-bottom: 8px; }

/* ---------- Tarifs (panneau d'affichage sur la fiche pièce) ---------- */
.part-prices .part-section-head h3 { margin: 0; }
.part-prices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}
.part-prices-grid .price-cell {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    background: #fbfcff;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.part-prices-grid .price-cell.is-empty {
    background: transparent;
    border-style: dashed;
}
.part-prices-grid .price-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
}
.part-prices-grid .price-value {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--brand-blue);
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.part-prices-grid .price-cell.is-empty .price-value { color: var(--muted); font-weight: 500; }
.part-prices-grid .price-date {
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--muted);
    font-style: italic;
    letter-spacing: .2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.part-prices-grid .price-date i { font-size: 11px; font-style: normal; }
.part-prices-grid .price-cell.price-net {
    background: var(--brand-yellow-soft, #fff8e1);
    border-color: #fde9a8;
}
.part-prices-grid .price-cell.price-custom {
    background: #f3f7ff;
    border-color: #d6e4ff;
}
/* Sous-titre de bloc dans la fiche tarifs */
.part-prices .part-prices-subtitle {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.part-prices .part-prices-subtitle .muted {
    font-weight: 400;
    margin-left: 6px;
    font-size: 12.5px;
}
.part-prices .part-prices-subtitle--spaced { margin-top: 18px; }

/* Badge NFP pour la date de disponibilité (pièce plus fournie) */
.part-prices-grid .nfp-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
}

/* ---------- Formulaire d'édition des tarifs ---------- */
.part-prices-form { padding: 22px 24px; }
.part-prices-form .prices-fieldset {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px 16px;
    margin: 0 0 16px;
}
.part-prices-form .prices-fieldset legend {
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--brand-blue);
}
.part-prices-form .prices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.part-prices-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
}
.part-prices-form label > span {
    color: var(--muted);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.part-prices-form input[type="text"],
.part-prices-form input[type="number"],
.part-prices-form input[type="date"],
.part-prices-form select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.part-prices-form select {
    font-family: inherit;
    appearance: auto;
}
.part-prices-form input:focus,
.part-prices-form select:focus {
    outline: none;
    border-color: var(--brand-blue-500);
    box-shadow: 0 0 0 3px rgba(10, 37, 64, .12);
}
.part-prices-form input:disabled {
    background: #f3f4f6;
    color: var(--muted);
    cursor: not-allowed;
}
.part-prices-form input.is-invalid {
    border-color: #fca5a5;
    background: #fef2f2;
}
.part-prices-form code {
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* Champ date dispo. avec toggle NFP intégré */
.part-prices-form .dispo-date-controls {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.part-prices-form .dispo-date-controls > input[type="date"] { flex: 1 1 auto; min-width: 0; }
.part-prices-form .dispo-nfp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fbfcff;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    flex-direction: row;
}
.part-prices-form .dispo-nfp-toggle > span { color: inherit; font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
.part-prices-form .dispo-nfp-toggle:has(input:checked) {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

/* Paire Autodoc min/max sur la même ligne (occupe une seule "case" du parent) */
.part-prices-form .prices-grid-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    grid-column: span 2;
}
@media (max-width: 600px) {
    .part-prices-form .prices-grid-pair { grid-template-columns: 1fr 1fr; grid-column: auto; }
}

.part-prices-form .custom-prices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.part-prices-form .custom-price-row {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 8px;
    align-items: center;
}
.part-prices-form .btn-remove-custom {
    padding: 7px 10px;
    color: #b91c1c;
    border-color: #fecaca;
    background: #fff;
}
.part-prices-form .btn-remove-custom:hover {
    background: #fee2e2;
    color: #b91c1c;
}
.part-prices-form .part-prices-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}
@media (max-width: 600px) {
    .part-prices-form .custom-price-row { grid-template-columns: 1fr auto; }
    .part-prices-form .custom-price-row > input[type="number"] { grid-column: 1; }
    .part-prices-form .custom-price-row > .btn-remove-custom { grid-row: 1 / 3; grid-column: 2; }
}

@media (max-width: 700px) {
    .part-head-grid { grid-template-columns: 1fr; row-gap: 4px; }
    .part-head-row { display: block; }
    .part-head-row .part-head-label { display: block; margin-bottom: 2px; }
    .apparition-grid { grid-template-columns: repeat(2, 1fr); }
    .apparition-list { grid-template-columns: 1fr; }
}

/* ---------- Row actions (boutons côte-à-côte dans une cellule de table) ---------- */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    vertical-align: middle;
    line-height: 0;
}
.row-actions form {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
/* Forcer a, button et form à se comporter pareil dans le row-actions :
   même boîte 38×38, mêmes paddings, même alignement vertical. */
.row-actions > a,
.row-actions form > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 1;
    flex: 0 0 auto;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
}
.row-actions i { line-height: 1; }

@media (max-width: 900px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-aside { padding: 28px; min-height: 220px; }
    .login-aside-content h2 { font-size: 28px; }
    .login-aside-deco { display: none; }
    .login-main { padding: 24px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar {
        position: relative;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }
    .app-sidebar .nav-list { flex-direction: row; flex-wrap: wrap; }
    .sidebar-footer { display: none; }
    .nav-label { display: none; }
    .stats-grid { grid-template-columns: 1fr; }
    .module-grid { grid-template-columns: 1fr; }
    .hero-card { flex-direction: column; align-items: flex-start; gap: 20px; }
    .hero-card-art { display: none; }
    .app-main { padding: 18px; }
}