/* ============================================================
   PC BUILDER — Interface unique de configuration
   builder.css
   ============================================================ */

/* ── Variables ── */
:root {
    --builder-navbar-h:   52px;
    --builder-bandeau-h:  375px;
    --builder-summary-w:  300px;
    --builder-detail-w:   330px;
    --builder-top-h:      calc(100vh - var(--builder-navbar-h) - var(--builder-bandeau-h));
}

/* Bloquer le scroll de page sur le builder */
html, body { overflow: hidden; height: 100%; }

/* ── Mise en page globale ── */
.builder-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--builder-navbar-h));
    margin-top: var(--builder-navbar-h);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* ════════════════════════════════════════
   SECTION HAUTE : Récap | Viewer | Détail
   ════════════════════════════════════════ */
.builder-top {
    display: grid;
    grid-template-columns: var(--builder-summary-w) 1fr var(--builder-detail-w);
    height: var(--builder-top-h);
    min-height: 180px;
    overflow: hidden;
}

/* ── Récapitulatif (gauche) ── */
.builder-summary {
    display: flex;
    flex-direction: column;
    background: rgba(8, 12, 22, 0.97);
    border-right: 1px solid rgba(0, 240, 255, 0.12);
    overflow-y: auto;
    overflow-x: hidden;
}

.builder-summary { scrollbar-width: thin; scrollbar-color: rgba(0,240,255,0.35) rgba(0,240,255,0.04); }
.builder-summary::-webkit-scrollbar { width: 6px; }
.builder-summary::-webkit-scrollbar-track { background: rgba(0,240,255,0.03); border-radius: 3px; }
.builder-summary::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0,240,255,0.5), rgba(112,0,255,0.4));
    border-radius: 3px; box-shadow: 0 0 5px rgba(0,240,255,0.25);
}
.builder-summary::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(0,240,255,0.75), rgba(112,0,255,0.6)); }

.bsummary-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    height: 100%;
}
.bsummary-loading i { font-size: 1.5rem; opacity: 0.4; }

/* En-tête du récap */
.bsummary-header {
    padding: 0.65rem 0.85rem 0.45rem;
    border-bottom: 1px solid rgba(0, 240, 255, 0.08);
    flex-shrink: 0;
}

.bsummary-title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bsummary-completion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bsummary-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(0, 240, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.bsummary-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 2px;
    transition: width 0.4s ease;
}

.bsummary-pct {
    font-family: var(--font-display);
    font-size: 0.68rem;
    color: var(--color-primary);
    min-width: 28px;
    text-align: right;
}

/* Items du récap */
.bsummary-items { flex: 1; overflow-y: auto; padding: 0.2rem 0; }

.bsummary-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 240, 255, 0.04);
    transition: background var(--transition-fast);
    min-height: 46px;
}

.bsummary-item:hover { background: rgba(0, 240, 255, 0.05); }

.bsummary-item.is-active {
    background: rgba(0, 240, 255, 0.08);
    border-left: 2px solid var(--color-primary);
}

.bsummary-item.is-selected .bsummary-cat { color: var(--color-primary); }
.bsummary-item.has-error {
    background: rgba(255, 60, 60, 0.05);
    border-left: 2px solid rgba(255, 80, 80, 0.4);
}
.bsummary-item.is-empty { opacity: 0.55; }
.bsummary-item.is-empty:hover { opacity: 0.85; }

.bsummary-img {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 4px; overflow: hidden;
    background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
}
.bsummary-img img { width: 100%; height: 100%; object-fit: contain; }

.bsummary-icon-wrap {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 4px;
    background: rgba(0, 240, 255, 0.06);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary); font-size: 0.95rem; opacity: 0.7;
}

.bsummary-info { flex: 1; min-width: 0; }

.bsummary-cat {
    font-family: var(--font-display);
    font-size: 0.63rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-text-muted);
    margin-bottom: 0.08rem;
}
.bsummary-count { font-size: 0.58rem; opacity: 0.7; }

.bsummary-name {
    font-size: 0.82rem; font-weight: 600;
    color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.bsummary-empty-text { color: var(--color-text-muted); font-weight: 400; font-style: italic; font-size: 0.76rem; }

.bsummary-price { font-size: 0.76rem; color: var(--color-success); font-weight: 700; margin-top: 0.08rem; }

.bsummary-actions {
    display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0;
}

.bsummary-remove {
    background: none; border: none; color: var(--color-text-muted);
    cursor: pointer; padding: 0.15rem; border-radius: 3px;
    display: flex; align-items: center; font-size: 0.85rem;
    opacity: 0; transition: opacity 0.15s, color 0.15s;
}
.bsummary-item:hover .bsummary-remove { opacity: 1; }
.bsummary-remove:hover { color: rgba(255, 80, 80, 0.9); }

.bsummary-err-icon { color: var(--color-warning); font-size: 0.78rem; }
.bsummary-add-icon { color: var(--color-text-muted); font-size: 0.82rem; opacity: 0.45; }

/* Erreurs */
.bsummary-errors {
    padding: 0.45rem 0.7rem;
    border-top: 1px solid rgba(255, 80, 80, 0.12);
    display: flex; flex-direction: column; gap: 0.3rem;
}
.bsummary-error {
    display: flex; align-items: flex-start; gap: 0.35rem;
    font-size: 0.73rem; line-height: 1.35;
    padding: 0.3rem 0.45rem; border-radius: 4px;
}
.bsummary-error.error-critical {
    background: rgba(255, 60, 60, 0.08); color: rgba(255, 130, 130, 0.9);
    border-left: 2px solid rgba(255, 80, 80, 0.35);
}
.bsummary-error.error-warning {
    background: rgba(255, 170, 0, 0.08); color: rgba(255, 190, 80, 0.9);
    border-left: 2px solid rgba(255, 170, 0, 0.35);
}
.bsummary-error i { flex-shrink: 0; margin-top: 0.08rem; }

/* Footer */
.bsummary-footer {
    padding: 0.65rem 0.75rem;
    border-top: 1px solid rgba(0, 240, 255, 0.1);
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 0.45rem;
}
.bsummary-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.3rem 0;
}
.bsummary-total-label {
    font-size: 0.74rem; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-display);
}
.bsummary-total-price {
    font-family: var(--font-display); font-size: 1rem;
    font-weight: 700; color: var(--color-success);
}
.bsummary-actions {
    display: flex; gap: 0.5rem; margin-top: 0.1rem;
}
.bsummary-validate {
    flex: 1; padding: 0.55rem 0.6rem;
    background: linear-gradient(135deg, rgba(0,240,255,0.14), rgba(112,0,255,0.14));
    border: 1px solid rgba(0, 240, 255, 0.35); color: var(--color-primary);
    font-family: var(--font-display); font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; border-radius: 5px; transition: all var(--transition-fast);
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.bsummary-validate:hover {
    background: linear-gradient(135deg, rgba(0,240,255,0.24), rgba(112,0,255,0.24));
    box-shadow: 0 0 12px rgba(0,240,255,0.18);
}
.bsummary-reset {
    flex-shrink: 0; padding: 0.55rem 0.7rem;
    background: none; border: 1px solid rgba(0,240,255,0.1);
    color: var(--color-text-muted); font-family: var(--font-body); font-size: 0.76rem;
    cursor: pointer; border-radius: 4px; transition: all var(--transition-fast);
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
}
.bsummary-reset:hover { border-color: rgba(255,80,80,0.3); color: rgba(255,130,130,0.8); }

/* ════════════════════════════════════════
   PC VIEWER (centre)
   ════════════════════════════════════════ */
.builder-viewer-zone {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0.4rem 0.5rem;
    overflow: hidden;
    background: rgba(5, 8, 15, 0.35);
}

.viewer-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.viewer-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.4rem;
    flex-shrink: 0;
}

.viewer-title-text {
    font-family: var(--font-display);
    font-size: 0.67rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--color-primary);
}

.viewer-icon { margin-right: 0.25rem; }

.viewer-progress {
    font-family: var(--font-display); font-size: 0.65rem;
    color: var(--color-text-muted);
    background: rgba(0,240,255,0.07);
    padding: 0.08rem 0.4rem; border-radius: 3px;
    border: 1px solid rgba(0,240,255,0.1);
}

.viewer-hint {
    font-size: 0.78rem; color: rgba(0,240,255,0.7); opacity: 1;
    display: flex; align-items: center; gap: 0.3rem; margin-left: auto;
    letter-spacing: 0.03em;
}

.viewer-svg-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

#builderSvg {
    /* Paysage : remplit la largeur, la hauteur suit le viewBox */
    width: 100%;
    height: 100%;
    max-width: 100%;
    border-radius: 6px;
    cursor: default;
}
#builderSvg text {
    filter: drop-shadow(0 0 3px rgba(0,0,0,1)) drop-shadow(0 0 6px rgba(0,0,0,0.95));
}

/* ── Erreurs de compatibilité au-dessus du SVG ── */
.viewer-errors {
    padding: 0.25rem 0.5rem 0.2rem;
    display: flex; flex-direction: column; gap: 0.22rem;
    flex-shrink: 0;
}
.viewer-errors:empty { display: none; }
.viewer-error-item {
    display: flex; align-items: flex-start; gap: 0.35rem;
    font-size: 0.88rem; line-height: 1.38;
    padding: 0.26rem 0.5rem; border-radius: 4px;
}
.viewer-error-item.is-error {
    background: rgba(255,60,60,0.08); color: rgba(255,130,130,0.9);
    border-left: 2px solid rgba(255,80,80,0.38);
}
.viewer-error-item.is-warn {
    background: rgba(255,170,0,0.08); color: rgba(255,190,80,0.9);
    border-left: 2px solid rgba(255,170,0,0.38);
}
.viewer-error-item i { flex-shrink: 0; margin-top: 0.04rem; }

/* Backdrop du panneau de détail (mobile uniquement) */
.builder-detail-backdrop { display: none; }

/* ════════════════════════════════════════
   PANNEAU DÉTAIL (droite)
   ════════════════════════════════════════ */
.builder-detail-panel {
    background: rgba(8, 11, 20, 0.97);
    border-left: 1px solid rgba(0, 240, 255, 0.1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.builder-detail-panel { scrollbar-width: thin; scrollbar-color: rgba(0,240,255,0.35) rgba(0,240,255,0.04); }
.builder-detail-panel::-webkit-scrollbar { width: 6px; }
.builder-detail-panel::-webkit-scrollbar-track { background: rgba(0,240,255,0.03); border-radius: 3px; }
.builder-detail-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0,240,255,0.5), rgba(112,0,255,0.4));
    border-radius: 3px; box-shadow: 0 0 5px rgba(0,240,255,0.25);
}
.builder-detail-panel::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(0,240,255,0.75), rgba(112,0,255,0.6)); }

/* Placeholder vide */
.detail-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; gap: 0.65rem;
    color: var(--color-text-muted); padding: 1.5rem; text-align: center;
}
.detail-empty i { font-size: 2rem; opacity: 0.18; }
.detail-empty p { font-size: 0.82rem; line-height: 1.5; opacity: 0.45; }

/* Panneau de détail rempli */
.detail-panel {
    padding: 0.8rem;
    display: flex; flex-direction: column; gap: 0.55rem;
    position: relative; flex: 1;
}


.detail-img-wrap {
    text-align: center; padding: 0.5rem;
    background: rgba(0,0,0,0.2); border-radius: 6px;
}
.detail-img-wrap img { max-width: 100%; max-height: 130px; object-fit: contain; }

.detail-cat-badge {
    font-family: var(--font-display); font-size: 0.67rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-primary);
    display: flex; align-items: center; gap: 0.3rem;
}

.detail-name {
    font-family: var(--font-display); font-size: 1rem;
    font-weight: 700; color: var(--color-text); line-height: 1.35;
}

.detail-brand {
    font-size: 0.82rem; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
}

.detail-price {
    font-family: var(--font-display); font-size: 1.25rem;
    font-weight: 700; color: var(--color-success);
}

/* Compatibilité */
.detail-compat-issues { display: flex; flex-direction: column; gap: 0.28rem; }

.detail-compat-issue {
    display: flex; align-items: flex-start; gap: 0.35rem;
    font-size: 0.73rem; line-height: 1.35;
    padding: 0.28rem 0.4rem; border-radius: 4px;
}
.detail-compat-issue.error {
    background: rgba(255,60,60,0.08); color: rgba(255,130,130,0.9);
    border-left: 2px solid rgba(255,80,80,0.38);
}
.detail-compat-issue.warning {
    background: rgba(255,170,0,0.08); color: rgba(255,190,80,0.9);
    border-left: 2px solid rgba(255,170,0,0.38);
}
.detail-compat-issue i { flex-shrink: 0; margin-top: 0.08rem; }

.detail-compat-ok {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.75rem; color: var(--color-success);
    padding: 0.28rem 0.4rem;
    background: rgba(0,255,136,0.06);
    border-left: 2px solid rgba(0,255,136,0.28);
    border-radius: 4px;
}

/* Specs */
.detail-specs {
    display: flex; flex-direction: column; gap: 0;
    border: 1px solid rgba(0,240,255,0.07);
    border-radius: 5px; overflow: hidden;
}

.detail-spec-row {
    display: flex; justify-content: space-between; gap: 0.5rem;
    padding: 0.34rem 0.5rem;
    background: rgba(0,0,0,0.18);
    border-bottom: 1px solid rgba(0,240,255,0.05);
}
.detail-spec-row:last-child { border-bottom: none; }
.detail-spec-row:nth-child(even) { background: rgba(0,0,0,0.08); }

.detail-spec-key { font-size: 0.88rem; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }
.detail-spec-val { font-size: 0.88rem; color: var(--color-text); text-align: right; font-weight: 600; }

.detail-desc {
    font-size: 0.82rem; color: var(--color-text-muted);
    line-height: 1.5; font-style: italic;
}

.detail-select-btn {
    width: 100%; padding: 0.52rem 0.7rem;
    background: linear-gradient(135deg, rgba(0,240,255,0.1), rgba(112,0,255,0.1));
    border: 1px solid rgba(0,240,255,0.28); color: var(--color-primary);
    font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.08em; cursor: pointer; border-radius: 5px;
    transition: all var(--transition-fast);
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    text-transform: uppercase; margin-top: auto;
}
.detail-select-btn:hover {
    background: linear-gradient(135deg, rgba(0,240,255,0.2), rgba(112,0,255,0.2));
    box-shadow: 0 0 10px rgba(0,240,255,0.12);
}
.detail-select-btn.is-selected {
    background: rgba(0,255,136,0.09);
    border-color: rgba(0,255,136,0.35);
    color: var(--color-success);
}

/* ════════════════════════════════════════
   TOOLTIP DU VIEWER
   ════════════════════════════════════════ */
.bpcv-tooltip {
    position: fixed; z-index: 9999; pointer-events: none;
    background: rgba(8, 12, 22, 0.97);
    border: 1px solid rgba(0,240,255,0.25);
    border-radius: 6px; padding: 0.55rem 0.75rem;
    min-width: 130px; max-width: 200px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 10px rgba(0,240,255,0.07);
}
.bpcv-tt-img-wrap { margin-bottom: 0.35rem; text-align: center; }
.bpcv-tt-img-wrap img { max-width: 80px; max-height: 48px; object-fit: contain; }
.bpcv-tt-label {
    font-family: var(--font-display); font-size: 0.63rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-primary); margin-bottom: 0.22rem;
}
.bpcv-tt-name { font-size: 0.83rem; font-weight: 600; color: var(--color-text); line-height: 1.3; margin-bottom: 0.12rem; }
.bpcv-tt-brand { font-size: 0.72rem; color: var(--color-text-muted); }
.bpcv-tt-empty { font-size: 0.75rem; color: var(--color-text-muted); font-style: italic; }
.bpcv-tt-hint {
    font-size: 0.65rem; color: var(--color-text-dark); margin-top: 0.28rem;
    padding-top: 0.28rem; border-top: 1px solid rgba(0,240,255,0.08);
}
.bpcv-tt-sto-row {
    display: flex; align-items: baseline; gap: 0.35rem;
    font-size: 0.75rem; padding: 0.12rem 0;
    border-bottom: 1px solid rgba(0,240,255,0.06);
}
.bpcv-tt-sto-row:last-of-type { border-bottom: none; }
.bpcv-tt-sto-type { font-size: 0.62rem; font-weight: 700; font-family: var(--font-display); flex-shrink: 0; }
.bpcv-tt-sto-name { color: var(--color-text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bpcv-tt-sto-cap  { font-size: 0.68rem; color: var(--color-text-muted); flex-shrink: 0; }
.bpcv-tt-sto-qty  { font-size: 0.7rem; color: rgba(0,240,255,0.7); font-weight: 700; flex-shrink: 0; }

/* ════════════════════════════════════════
   BANDEAU INFÉRIEUR
   ════════════════════════════════════════ */
.builder-bandeau {
    height: var(--builder-bandeau-h);
    min-height: 290px;
    border-top: 1px solid rgba(0, 240, 255, 0.15);
    display: flex; flex-direction: column;
    background: rgba(8, 11, 20, 0.98);
    flex-shrink: 0;
}

/* ── Onglets ── */
.bandeau-tabs {
    display: flex; align-items: flex-end; justify-content: center;
    height: 40px;
    border-bottom: 1px solid rgba(0,240,255,0.1);
    background: rgba(5, 8, 15, 0.55);
    overflow-x: auto; overflow-y: visible; flex-shrink: 0;
    scrollbar-width: none;
}
.bandeau-tabs::-webkit-scrollbar { display: none; }

.bandeau-tab {
    display: flex; align-items: center; gap: 0.42rem;
    padding: 0 1.2rem;
    background: none; border: none; border-right: 1px solid rgba(0,240,255,0.06);
    color: var(--color-text-muted);
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: all var(--transition-fast);
    white-space: nowrap; flex-shrink: 0; position: relative;
}
.bandeau-tab > i { font-size: 1.2rem; }
.bandeau-tab:hover { background: rgba(0,240,255,0.05); color: var(--color-text); }
.bandeau-tab.tab-active {
    background: rgba(0,240,255,0.1); color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    border-top: 1px solid rgba(0,240,255,0.35);
    border-left: 1px solid rgba(0,240,255,0.18);
    border-right: 1px solid rgba(0,240,255,0.18);
    border-radius: 5px 5px 0 0;
    margin-top: -7px;
    padding-top: 7px;
}
.tab-check { color: var(--color-success); font-size: 0.68rem; margin-left: 0.1rem; }

/* ── Corps du bandeau ── */
.bandeau-body {
    display: flex; flex: 1; min-height: 0; overflow: hidden;
}

/* ── Barre de filtres horizontale (au-dessus de la liste) ── */
.bandeau-filters {
    display: flex; flex-direction: row; align-items: center;
    flex-shrink: 0; gap: 0;
    padding: 0.35rem 0.8rem;
    border-bottom: 1px solid rgba(0,240,255,0.08);
    background: rgba(4, 7, 14, 0.72);
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
}
.bandeau-filters::-webkit-scrollbar { display: none; }

.filter-group {
    flex-shrink: 0; display: flex; flex-direction: row; align-items: center; gap: 0.3rem;
    padding: 0 0.75rem;
    border-right: 1px solid rgba(0,240,255,0.07);
}
.filter-group:first-child { padding-left: 0; }

/* Prix : min | slider | max sur une ligne */
.filter-group-price { gap: 0.4rem; }
.rprice-lbl {
    font-size: 0.62rem; color: var(--color-primary); font-weight: 700;
    white-space: nowrap; font-family: var(--font-display);
}

.filter-search-wrap {
    position: relative; display: flex; align-items: center;
}
.filter-search-icon {
    position: absolute; left: 0.42rem;
    color: rgba(0,240,255,0.4); font-size: 0.72rem;
    pointer-events: none;
}
.filter-search {
    width: 165px; padding: 0.28rem 0.45rem 0.28rem 1.6rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(0,240,255,0.14); border-radius: 4px;
    color: var(--color-text); font-family: var(--font-body); font-size: 0.8rem;
    transition: border-color var(--transition-fast);
}
.filter-search:focus { outline: none; border-color: rgba(0,240,255,0.38); }
.filter-search:focus + .filter-search-icon,
.filter-search-wrap:focus-within .filter-search-icon { color: rgba(0,240,255,0.7); }
.filter-search::placeholder { color: var(--color-text-dark); }

.filter-chips { display: flex; flex-wrap: nowrap; gap: 0.22rem; overflow: hidden; }

.filter-chip {
    padding: 0.12rem 0.4rem;
    background: rgba(0,240,255,0.04);
    border: 1px solid rgba(0,240,255,0.11); border-radius: 3px;
    color: var(--color-text-muted); font-size: 0.7rem;
    cursor: pointer; transition: all var(--transition-fast); white-space: nowrap;
}
.filter-chip:hover { background: rgba(0,240,255,0.09); color: var(--color-text); border-color: rgba(0,240,255,0.28); }
.filter-chip.active {
    background: rgba(0,240,255,0.14); border-color: rgba(0,240,255,0.48);
    color: var(--color-primary); font-weight: 700;
}

.filter-select {
    width: 115px; padding: 0.22rem 0.38rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(0,240,255,0.14); border-radius: 4px;
    color: var(--color-text); font-family: var(--font-body); font-size: 0.78rem;
}
.filter-select:focus { outline: none; border-color: rgba(0,240,255,0.38); }

.filter-reset {
    flex-shrink: 0; margin-left: 0.5rem; padding-left: 0;
    align-self: center;
    background: none; border: none;
    color: var(--color-text-muted); font-size: 0.7rem;
    cursor: pointer; transition: all var(--transition-fast);
    display: flex; align-items: center; gap: 0.28rem; white-space: nowrap;
}
.filter-reset:hover { color: rgba(255,130,130,0.8); }

/* ── Dual range slider (prix min/max) ── */
.range-dual-labels {
    display: flex; justify-content: space-between;
    width: 148px;
    font-size: 0.62rem; color: var(--color-text-muted);
}
.range-dual-labels strong { color: var(--color-primary); font-weight: 700; }

.range-dual-wrap {
    position: relative;
    width: 120px; height: 20px;
    margin: 0;
}

/* Piste de fond */
.range-dual-track {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 4px;
    background: rgba(0,240,255,0.1);
    border-radius: 2px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Remplissage entre les deux curseurs */
.range-dual-fill {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 2px;
}

/* Les deux inputs range superposés */
.range-dual-input {
    position: absolute;
    width: 100%; top: 0; left: 0;
    height: 100%;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    margin: 0; padding: 0;
}

.range-dual-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    border: 2px solid rgba(8,12,22,0.9);
    box-shadow: 0 0 6px rgba(0,240,255,0.45);
    transition: transform 0.1s;
}

.range-dual-input::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.range-dual-input::-moz-range-thumb {
    pointer-events: all;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    border: 2px solid rgba(8,12,22,0.9);
    box-shadow: 0 0 6px rgba(0,240,255,0.45);
}

/* ── Liste des composants ── */
.bandeau-list-wrap {
    flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,240,255,0.35) rgba(0,240,255,0.04);
    cursor: grab;
}
.bandeau-list-wrap.is-dragging,
.bandeau-list-wrap.is-dragging * { cursor: grabbing !important; user-select: none; }
.bandeau-list-wrap::-webkit-scrollbar { height: 5px; }
.bandeau-list-wrap::-webkit-scrollbar-track { background: rgba(0,240,255,0.03); border-radius: 3px; }
.bandeau-list-wrap::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(0,240,255,0.5), rgba(112,0,255,0.4));
    border-radius: 3px; box-shadow: 0 0 5px rgba(0,240,255,0.25);
}
.bandeau-list-wrap::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, rgba(0,240,255,0.75), rgba(112,0,255,0.6)); }

.bandeau-list {
    display: flex; gap: 0.55rem; padding: 0.55rem;
    height: 100%; align-items: center;
    flex-wrap: nowrap; width: max-content;
}

/* Message vide */
.list-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.55rem; padding: 2rem;
    color: var(--color-text-muted); font-size: 0.82rem;
    width: 100%; text-align: center;
}
.list-empty i { font-size: 1.8rem; opacity: 0.22; }
.list-empty-reset {
    padding: 0.28rem 0.75rem;
    background: rgba(0,240,255,0.06); border: 1px solid rgba(0,240,255,0.14);
    border-radius: 4px; color: var(--color-primary); font-size: 0.7rem;
    cursor: pointer; transition: all var(--transition-fast);
}
.list-empty-reset:hover { background: rgba(0,240,255,0.12); }

/* ── Indicateur prix ✦ (même style que la boutique) ── */
.price-indicator {
    display: inline-flex; align-items: center;
    position: relative; margin-left: 4px;
    cursor: help; color: var(--color-secondary);
    font-size: 0.6em; line-height: 1; vertical-align: super;
    opacity: 0.72; transition: opacity var(--transition-fast);
    font-family: var(--font-body); font-weight: 400;
}
.price-indicator:hover { opacity: 1; color: var(--color-primary); }

#price-global-tooltip {
    position: fixed; width: 248px;
    padding: 10px 14px;
    background: rgba(10, 14, 26, 0.97);
    border: 1px solid rgba(255, 0, 229, 0.45); border-radius: 10px;
    font-family: var(--font-body); font-size: 0.82rem; font-weight: 400;
    color: var(--color-text); line-height: 1.55; text-align: center;
    white-space: normal;
    box-shadow: 0 6px 24px rgba(255, 0, 229, 0.2), 0 0 0 1px rgba(255, 0, 229, 0.1);
    pointer-events: none; z-index: 99999;
    transform: translate(-50%, calc(-100% - 10px));
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
}
#price-global-tooltip.active { opacity: 1; visibility: visible; }
#price-global-tooltip::after {
    content: ''; position: absolute; top: 100%;
    left: var(--arrow-left, 50%); transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(255, 0, 229, 0.45);
}

/* ── Carte composant ── */
.comp-card {
    flex-shrink: 0; width: 240px; height: 282px; min-height: 282px; max-height: 282px;
    background: rgba(18, 24, 40, 0.88);
    border: 1px solid rgba(0,240,255,0.1); border-radius: 6px;
    overflow: hidden; cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    display: flex; flex-direction: column; position: relative;
}
.comp-card:hover {
    background: rgba(22, 29, 50, 0.96);
    border-color: rgba(0,240,255,0.28);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.28), 0 0 7px rgba(0,240,255,0.07);
}
.comp-card.card-selected {
    border-color: rgba(0,255,136,0.45);
    background: rgba(0,25,18,0.72);
}

.comp-card-img-wrap {
    height: 145px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.28);
    border-bottom: 1px solid rgba(0,240,255,0.06);
    flex-shrink: 0; overflow: hidden; position: relative;
}
.comp-card-img-wrap img {
    max-width: 100%; max-height: 128px; object-fit: contain;
    transition: transform 0.2s;
}
.comp-card:hover .comp-card-img-wrap img { transform: scale(1.05); }
.comp-card-no-img { font-size: 2rem; color: rgba(0,240,255,0.13); }

/* Conteneur haut-gauche — regroupe les badges Air/AIO + RGB côte à côte */
.comp-card-tl-badges {
    position: absolute; top: 5px; left: 5px;
    display: flex; flex-direction: row; gap: 4px; align-items: center;
    pointer-events: none;
}

/* Pastille RGB sur l'image */
.comp-card-rgb {
    background: linear-gradient(135deg, rgba(255,60,60,0.85), rgba(60,60,255,0.85));
    color: #fff; font-size: 0.61rem; font-weight: 700;
    padding: 0.16rem 0.36rem; border-radius: 3px;
    letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.18rem;
    box-shadow: 0 1px 5px rgba(0,0,0,0.45);
    animation: rgb-badge-glow 3s linear infinite;
}

/* ── Badge type refroidissement (Air / AIO) ── */
.comp-card-cool-type {
    font-size: 0.62rem; font-weight: 700; font-family: var(--font-display);
    letter-spacing: 0.05em; padding: 0.16rem 0.36rem; border-radius: 3px;
    display: flex; align-items: center; gap: 0.2rem;
    line-height: 1.4;
    box-shadow: 0 1px 5px rgba(0,0,0,0.45);
}
.comp-card-cool-type.cool-air {
    background: rgba(0,240,255,0.18); border: 1px solid rgba(0,240,255,0.5);
    color: rgba(0,240,255,1);
}
.comp-card-cool-type.cool-aio {
    background: rgba(90,120,255,0.22); border: 1px solid rgba(100,130,255,0.6);
    color: rgba(140,165,255,1);
}

/* Overlay marque — coin haut-droit de l'image */
.comp-card-brand-overlay {
    position: absolute; top: 5px; right: 5px;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(4px);
    color: rgba(255,255,255,0.6);
    font-size: 0.58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    padding: 0.1rem 0.32rem; border-radius: 3px;
    max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.1);
}
@keyframes rgb-badge-glow {
    0%   { background: linear-gradient(135deg,rgba(255,60,60,.85),rgba(60,60,255,.85)); }
    33%  { background: linear-gradient(135deg,rgba(60,255,100,.85),rgba(255,60,60,.85)); }
    66%  { background: linear-gradient(135deg,rgba(60,100,255,.85),rgba(60,255,100,.85)); }
    100% { background: linear-gradient(135deg,rgba(255,60,60,.85),rgba(60,60,255,.85)); }
}

/* Pastille WiFi sur l'image (cartes mères) */
.comp-card-wifi {
    background: rgba(0,160,255,0.22);
    border: 1px solid rgba(0,180,255,0.55);
    color: rgba(0,200,255,1);
    font-size: 0.72rem; font-weight: 700;
    padding: 0.22rem 0.44rem; border-radius: 4px;
    letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.22rem;
    box-shadow: 0 1px 6px rgba(0,120,255,0.35);
}
.comp-card-wifi i { font-size: 0.82rem; }

.comp-card-info { padding: 0.5rem 0.6rem 1.7rem 0.6rem; flex: 1; overflow: hidden; min-height: 0; display: flex; flex-direction: column; position: relative; }

.comp-card-name {
    font-size: 0.88rem; font-weight: 600; color: var(--color-text);
    line-height: 1.3; margin-bottom: 0.2rem;
    height: 2.6em; /* toujours 2 lignes exactement */
    flex-shrink: 0; /* jamais compressé par les specs */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.comp-card-specs { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-bottom: 0.28rem; }

.spec-tag {
    display: inline-flex; align-items: center; gap: 0.18rem;
    font-size: 0.79rem; padding: 0.1rem 0.34rem;
    background: rgba(0,240,255,0.05); border: 1px solid rgba(0,240,255,0.1);
    border-radius: 3px; color: var(--color-text-muted); white-space: nowrap;
}

/* ── Spec mise en avant (valeur impressionnante, angle marketing) ── */
.spec-tag.is-top {
    background: rgba(0,240,255,0.11);
    border-color: rgba(0,240,255,0.38);
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: 0 0 6px rgba(0,240,255,0.12);
}
.gpu-spec-val.is-top {
    color: var(--color-primary);
    text-shadow: 0 0 8px rgba(0,240,255,0.4);
}

.comp-card-price {
    font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--color-success);
    position: absolute; bottom: 0.15rem; right: 0.6rem;
    display: flex; align-items: center; gap: 0.28rem;
}

/* ── Éclairs puissance PSU — bas gauche de la carte ── */
.psu-bolts {
    position: absolute; top: 50%; left: 0.5rem;
    transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.22rem;
    color: rgba(0,240,255,0.78); line-height: 1;
}
.psu-bolts.psu-bolts-ultra { color: #a855f7; }
.psu-bolts i { font-size: 1.1rem; }

/* ── Indicateurs capacité / puissance (RAM, Stockage, CPU, GPU, Refroid) ── */
.comp-badge {
    position: absolute; top: 50%; left: 0.5rem;
    transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.22rem;
    color: rgba(0,240,255,0.78); line-height: 1;
}
.comp-badge.comp-badge-ultra { color: #a855f7; }
.comp-badge.comp-badge-spaced { gap: 0.22rem; }
.comp-badge i { font-size: 1.1rem; }

/* ── Coche verte haut-centre sur les cartes sélectionnées ── */
.card-check-overlay {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    background: rgba(0,255,136,0.18); backdrop-filter: blur(3px);
    color: var(--color-success);
    border: 1px solid rgba(0,255,136,0.45);
    border-radius: 50%;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    pointer-events: none; z-index: 3;
    box-shadow: 0 0 8px rgba(0,255,136,0.28);
}

/* ── Mini grille de specs GPU sur les cartes ── */
.gpu-card-specs {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0.18rem 0.3rem; margin-bottom: 0.3rem;
}
.gpu-spec-row {
    display: flex; flex-direction: column; gap: 0.02rem;
    background: rgba(0,240,255,0.04); border: 1px solid rgba(0,240,255,0.09);
    border-radius: 3px; padding: 0.12rem 0.28rem;
}
.gpu-spec-label {
    font-size: 0.58rem; color: var(--color-primary); opacity: 0.7;
    text-transform: uppercase; letter-spacing: 0.04em; line-height: 1;
}
.gpu-spec-val {
    font-size: 0.72rem; font-weight: 600; color: var(--color-text);
    line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Contrôles quantité stockage (sur les cartes) ── */
.storage-qty-ctrl {
    display: flex; align-items: center; justify-content: center; gap: 0.28rem;
    padding: 0.18rem 0.4rem;
    background: rgba(0,235,160,0.06); border-top: 1px solid rgba(0,235,160,0.1);
    flex-shrink: 0;
}
.storage-btn {
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(0,235,160,0.1); border: 1px solid rgba(0,235,160,0.22);
    color: var(--color-success); font-size: 0.78rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast); line-height: 1;
}
.storage-btn:hover { background: rgba(0,235,160,0.22); border-color: rgba(0,235,160,0.45); }
.storage-qty-val {
    font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
    color: var(--color-success); min-width: 1rem; text-align: center;
}

/* ── Badges NVMe / SATA ── */
.bsummary-drive-badge {
    display: inline-block;
    font-size: 0.52rem; font-weight: 700; font-family: var(--font-display);
    letter-spacing: 0.06em; padding: 0.1rem 0.32rem; border-radius: 3px;
    flex-shrink: 0; line-height: 1.4;
}
.bsummary-drive-badge.nvme {
    background: rgba(0,225,145,0.16); border: 1px solid rgba(0,225,145,0.4);
    color: rgba(0,225,145,0.95);
}
.bsummary-drive-badge.sata {
    background: rgba(0,190,255,0.14); border: 1px solid rgba(0,190,255,0.38);
    color: rgba(0,190,255,0.95);
}

/* ── Résumé stockage dans le panneau gauche ── */
.bsummary-storage-rows {
    display: flex; flex-direction: column; gap: 0.18rem; margin: 0.15rem 0 0.15rem;
}
.bsummary-storage-row {
    display: flex; align-items: center; gap: 0.3rem;
    font-size: 0.68rem;
}
.bsummary-storage-name {
    color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}

/* ── Badge incompatibilité sur les cartes (centre de l'image) ── */
.comp-card-compat-warn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); right: auto; bottom: auto; z-index: 4;
    white-space: nowrap;
    background: linear-gradient(90deg, rgba(220,30,0,0.82), rgba(255,120,0,0.82), rgba(255,200,0,0.82));
    border: 1px solid rgba(255,120,0,0.8);
    color: #fff;
    font-size: 0.62rem; font-weight: 800;
    padding: 0.15rem 0.45rem 0.15rem 0.3rem;
    border-radius: 4px;
    display: flex; align-items: center; gap: 0.2rem;
    cursor: default; pointer-events: all;
    box-shadow: 0 2px 10px rgba(220,60,0,0.55), 0 0 6px rgba(255,120,0,0.3);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.comp-card-compat-warn i { font-size: 0.72rem; }
/* Variante PSU : juste l'icône, plus visible */
.comp-card-compat-warn.psu-warn {
    background: rgba(255,80,80,0.18); border-color: rgba(255,100,100,0.65);
    color: rgba(255,120,120,1); font-size: 0.85rem;
    padding: 0.18rem 0.32rem; box-shadow: 0 0 8px rgba(255,80,80,0.25);
}
.comp-card-compat-warn.psu-warn i { font-size: 0.9rem; }

/* ── Badges certification 80+ PSU — coin haut-gauche ── */
.comp-card-cert {
    position: absolute; top: 5px; left: 5px; z-index: 4;
    font-size: 0.6rem; font-weight: 800; font-family: var(--font-display);
    letter-spacing: 0.05em; padding: 0.18rem 0.38rem; border-radius: 3px;
    pointer-events: none; line-height: 1.3;
    box-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.comp-card-cert.cert-bronze   { background: rgba(140,80,30,0.28); border: 1px solid rgba(200,130,60,0.7);  color: rgba(220,155,80,1);  }
.comp-card-cert.cert-silver   { background: rgba(160,170,180,0.2); border: 1px solid rgba(185,195,205,0.7); color: rgba(210,220,228,1); }
.comp-card-cert.cert-gold     { background: rgba(185,150,0,0.25);  border: 1px solid rgba(230,195,0,0.75); color: rgba(255,220,0,1);   }
.comp-card-cert.cert-platinum { background: rgba(0,190,220,0.2);   border: 1px solid rgba(0,215,245,0.7);  color: rgba(100,240,255,1); }
.comp-card-cert.cert-titanium { background: rgba(130,80,255,0.22); border: 1px solid rgba(170,120,255,0.7); color: rgba(200,160,255,1); }
.comp-card-cert.cert-standard { background: rgba(120,120,120,0.18); border: 1px solid rgba(160,160,160,0.55); color: rgba(185,185,185,1); }

/* ── Filtres alimentation : certifications ── */
.psu-cert-chip { font-size: 0.68rem; padding: 0.14rem 0.44rem; }
.psu-cert-standard { border-color: rgba(160,160,160,0.22); color: rgba(170,170,170,0.7); }
.psu-cert-standard.active { background: rgba(160,160,160,0.12); border-color: rgba(170,170,170,0.55); color: #bbb; }
.psu-cert-bronze { border-color: rgba(205,127,50,0.28); color: rgba(205,127,50,0.75); }
.psu-cert-bronze.active { background: rgba(205,127,50,0.12); border-color: rgba(205,127,50,0.6); color: #cd7f32; }
.psu-cert-silver { border-color: rgba(192,192,192,0.25); color: rgba(192,192,192,0.75); }
.psu-cert-silver.active { background: rgba(192,192,192,0.1); border-color: rgba(200,200,200,0.6); color: #d0d0d0; }
.psu-cert-gold { border-color: rgba(255,200,0,0.28); color: rgba(255,200,0,0.8); }
.psu-cert-gold.active { background: rgba(255,200,0,0.1); border-color: rgba(255,200,0,0.65); color: #ffc800; }
.psu-cert-platinum { border-color: rgba(0,180,255,0.28); color: rgba(0,200,255,0.8); }
.psu-cert-platinum.active { background: rgba(0,180,255,0.1); border-color: rgba(0,200,255,0.65); color: #00c8ff; }
.psu-cert-titanium { border-color: rgba(168,85,247,0.28); color: rgba(168,85,247,0.8); }
.psu-cert-titanium.active { background: rgba(168,85,247,0.1); border-color: rgba(168,85,247,0.65); color: #a855f7; }

/* ── Jauge puissance PSU ── */
.psu-watt-group { gap: 0.45rem; }
.psu-watt-edge { font-size: 0.7rem; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }
.psu-watt-val { font-size: 0.75rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; flex-shrink: 0; min-width: 52px; text-align: right; }
.psu-watt-track-wrap { position: relative; flex: 1; min-width: 80px; height: 16px; display: flex; align-items: center; }
.psu-watt-track {
    position: absolute; left: 0; right: 0; height: 5px;
    background: rgba(0,240,255,0.1); border-radius: 3px;
}
.psu-watt-fill {
    position: absolute; top: 0; left: 0; height: 100%;
    background: linear-gradient(90deg, rgba(0,240,255,0.35), rgba(0,240,255,0.75));
    border-radius: 3px; transition: width 0.08s;
}
.psu-watt-req-needle {
    position: absolute; top: -4px; width: 2px; height: 13px;
    background: rgba(255,160,0,0.9); border-radius: 1px; transform: translateX(-50%);
    cursor: help;
}
.psu-watt-req-needle::after {
    content: ''; position: absolute; top: -4px; left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-bottom: 4px solid rgba(255,160,0,0.9);
}
.psu-watt-range {
    position: absolute; left: 0; right: 0; width: 100%; top: 0; bottom: 0;
    opacity: 0; cursor: pointer; height: 16px;
    -webkit-appearance: none; appearance: none; margin: 0;
}

/* ── Puissance requise badge (extrême droite) ── */
.psu-req-group { margin-left: auto; flex-shrink: 0; }
.psu-req-badge {
    display: flex; align-items: center; gap: 0.32rem;
    background: rgba(255,140,52,0.07); border: 1px solid rgba(255,140,52,0.24);
    border-radius: 5px; padding: 0.22rem 0.6rem;
    font-size: 0.74rem; color: rgba(255,175,90,0.85); white-space: nowrap;
}
.psu-req-badge i { color: rgba(255,140,52,0.9); font-size: 0.78rem; }
.psu-req-badge strong { color: rgba(255,185,60,1); }

/* Tooltip global incompatibilité (position:fixed, z-index élevé) */
.bcompat-tooltip {
    position: fixed; z-index: 9500;
    display: none;
    background: rgba(10,14,26,0.97);
    border: 1px solid rgba(255,190,0,0.52);
    color: rgba(255,215,0,0.95);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.84rem; font-weight: 600;
    padding: 0.4rem 0.65rem;
    border-radius: 5px;
    max-width: 300px; line-height: 1.45;
    pointer-events: none;
    box-shadow: 0 3px 16px rgba(0,0,0,0.45), 0 0 8px rgba(255,190,0,0.1);
    white-space: normal;
}

/* ── Badge interface sur les cartes (NVMe/SATA) ── */
.comp-card-iface {
    position: absolute; bottom: 5px; left: 5px;
    font-size: 0.52rem; font-weight: 700; font-family: var(--font-display);
    letter-spacing: 0.06em; padding: 0.1rem 0.3rem; border-radius: 3px;
    pointer-events: none; line-height: 1.4;
}
.comp-card-iface.iface-nvme {
    background: rgba(0,225,145,0.22); border: 1px solid rgba(0,225,145,0.5);
    color: rgba(0,225,145,1);
}
.comp-card-iface.iface-sata {
    background: rgba(0,190,255,0.18); border: 1px solid rgba(0,190,255,0.48);
    color: rgba(0,190,255,1);
}

/* ── Icône zoom sur l'image de carte ── */
.comp-card-zoom {
    position: absolute; bottom: 5px; right: 5px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);
    border: 1px solid rgba(0,240,255,0.2); border-radius: 6px;
    color: rgba(0,240,255,0.6); font-size: 0.95rem;
    cursor: pointer; opacity: 0; transition: opacity 0.18s, color 0.18s;
    z-index: 4;
}
.comp-card:hover .comp-card-zoom { opacity: 1; }
.comp-card-zoom:hover { color: var(--color-primary); border-color: rgba(0,240,255,0.5); }

/* ════════════════════════════════════════
   LIGHTBOX IMAGE PRODUIT
   ════════════════════════════════════════ */
.img-lightbox {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(4, 8, 18, 0.93);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
}
.img-lightbox.active {
    opacity: 1; pointer-events: all;
}

.img-lightbox-img {
    max-width: 88vw; max-height: 82vh;
    object-fit: contain;
    border: 1px solid rgba(0,240,255,0.18);
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0,0,0,0.7), 0 0 20px rgba(0,240,255,0.07);
    transform: scale(0.94); transition: transform 0.22s ease;
}
.img-lightbox.active .img-lightbox-img { transform: scale(1); }

.img-lightbox-close {
    position: fixed; top: 1.2rem; right: 1.4rem;
    width: 42px; height: 42px;
    background: rgba(10,14,26,0.9);
    border: 1px solid rgba(0,240,255,0.28); border-radius: 50%;
    color: var(--color-primary); font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.18s;
    box-shadow: 0 0 10px rgba(0,240,255,0.1);
}
.img-lightbox-close:hover {
    background: rgba(0,240,255,0.1);
    box-shadow: 0 0 16px rgba(0,240,255,0.22);
    transform: rotate(90deg);
}

/* Jauge dans le panneau de détail */
.detail-gauge {
    flex: 1; height: 5px; margin: 0;
}

/* ── Ligne interface dans le détail (badge + jauge) ── */
.detail-iface-row {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.1rem;
}

/* ── Bouton valider stockage ── */
.storage-validate-btn {
    background: linear-gradient(135deg, rgba(0,225,145,0.12), rgba(0,190,255,0.12)) !important;
    border-color: rgba(0,225,145,0.35) !important;
    color: rgba(0,225,145,0.9) !important;
}
.storage-validate-btn:hover {
    background: linear-gradient(135deg, rgba(0,225,145,0.24), rgba(0,190,255,0.2)) !important;
    box-shadow: 0 0 10px rgba(0,225,145,0.15) !important;
}

/* Hint multi-select stockage */
.bandeau-multi-hint {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.66rem; color: var(--color-text-muted);
    padding: 0.22rem 0.5rem; margin: 0.28rem;
    background: rgba(0,240,255,0.04);
    border: 1px solid rgba(0,240,255,0.1);
    border-radius: 4px; flex-shrink: 0; white-space: nowrap;
}

/* ════════════════════════════════════════
   NOTIFICATIONS
   ════════════════════════════════════════ */
.builder-notifications {
    position: fixed;
    top: calc(var(--builder-navbar-h) + 0.65rem);
    left: 50%; transform: translateX(-50%);
    z-index: 9998;
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    pointer-events: none;
}

.builder-notif {
    padding: 0.45rem 0.9rem;
    border-radius: 5px; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.38rem;
    opacity: 0; transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    box-shadow: 0 4px 18px rgba(0,0,0,0.38);
    white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis;
}
.builder-notif.visible { opacity: 1; transform: translateY(0); }

.builder-notif-success  { background: rgba(0,38,24,0.97); border: 1px solid rgba(0,255,136,0.32); color: var(--color-success); }
.builder-notif-error    { background: rgba(38,10,10,0.97); border: 1px solid rgba(255,80,80,0.32);  color: rgba(255,130,130,0.95); }
.builder-notif-warning  { background: rgba(38,28,0,0.97);  border: 1px solid rgba(255,170,0,0.32);  color: var(--color-warning); }
.builder-notif-info     { background: rgba(8,20,38,0.97);  border: 1px solid rgba(0,240,255,0.22);  color: var(--color-primary); }

/* ── Contrôles stockage dans le panneau de détail ── */
.detail-storage-ctrl {
    display: flex; align-items: center; justify-content: center; gap: 0.85rem;
    padding: 0.55rem 0.5rem;
    background: rgba(0,235,160,0.05);
    border: 1px solid rgba(0,235,160,0.12); border-radius: 6px;
    margin-top: 0.4rem;
}
.storage-minus-lg, .storage-plus-lg {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,235,160,0.1); border: 1px solid rgba(0,235,160,0.25);
    color: var(--color-success); font-size: 1.2rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.storage-minus-lg:hover, .storage-plus-lg:hover { background: rgba(0,235,160,0.22); }
.storage-qty-lg {
    font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
    color: var(--color-success); min-width: 1.6rem; text-align: center;
}

/* Séparateur + liste stockage dans le détail */
.detail-storage-separator {
    border: none; border-top: 1px solid rgba(0,240,255,0.08);
    margin: 0.6rem 0;
}
.detail-storage-list {
    display: flex; flex-direction: column; gap: 0.15rem;
}
.detail-label-sm {
    font-size: 0.67rem; font-family: var(--font-display);
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-primary); margin-bottom: 0.3rem;
    display: flex; align-items: center; gap: 0.3rem;
}
.detail-storage-row {
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0.22rem 0.3rem; border-radius: 3px;
    background: rgba(0,235,160,0.04);
    border: 1px solid rgba(0,235,160,0.07);
    font-size: 0.69rem;
}
.detail-storage-name { flex: 1; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-storage-qty {
    color: var(--color-primary); font-weight: 700; font-family: var(--font-display);
    font-size: 0.75rem; white-space: nowrap;
}
.detail-storage-price { color: var(--color-success); font-weight: 700; white-space: nowrap; }
.detail-storage-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.3rem 0.3rem 0.1rem;
    border-top: 1px solid rgba(0,240,255,0.08);
    font-size: 0.72rem; color: var(--color-text-muted); margin-top: 0.15rem;
}
.detail-storage-total strong { color: var(--color-success); font-size: 0.82rem; }

/* ── Panneau stockage complet ── */
.sto-full-panel { gap: 0.35rem; }

/* ── Split : panier haut / détail disque bas ── */
.sto-detail-split {
    display: flex; flex-direction: column;
    height: 100%; overflow: hidden;
}
.sto-split-cart {
    flex: 1; overflow-y: auto; min-height: 0;
}
.sto-split-item {
    flex-shrink: 0; max-height: 52%;
    overflow-y: auto;
    border-top: 1px solid rgba(0,240,255,0.12);
}

.sto-mobo-ports {
    display: flex; flex-direction: column; gap: 0.22rem;
    padding: 0.4rem 0.5rem; border-radius: 5px;
    background: rgba(0,240,255,0.03); border: 1px solid rgba(0,240,255,0.08);
}
.sto-mobo-none {
    font-size: 0.7rem; color: var(--color-text-muted);
    display: flex; align-items: center; gap: 0.35rem; opacity: 0.65;
}
.sto-mobo-none.sto-mobo-warn {
    color: #ffd600; opacity: 1; align-items: center; gap: 0.4rem;
}
.sto-mobo-none.sto-mobo-warn > i { font-size: 0.9rem; flex-shrink: 0; }
.sto-mobo-warn-lines { display: flex; flex-direction: column; gap: 0.08rem; }
.sto-mobo-warn-sub {
    font-size: 0.62rem; color: rgba(255, 214, 0, 0.7); font-style: italic;
}
.sto-port-row {
    display: flex; align-items: center; gap: 0.38rem; font-size: 0.72rem;
}
.sto-port-count {
    font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
    color: var(--color-primary);
}
.sto-port-sep { opacity: 0.4; margin: 0 0.05rem; }
.sto-port-label { flex: 1; color: var(--color-text-muted); font-size: 0.68rem; }
.sto-port-warn { color: var(--color-error, #ff4d6d); font-size: 0.72rem; }
.sto-port-row.is-full .sto-port-count { color: var(--color-success); }
.sto-port-row.is-over  .sto-port-count { color: var(--color-error, #ff4d6d); }

/* Mini panier */
.sto-cart-row {
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0.22rem 0.3rem; border-radius: 4px;
    background: rgba(0,235,160,0.04); border: 1px solid rgba(0,235,160,0.08);
    font-size: 0.69rem;
}
.sto-cart-name { flex: 1; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sto-cart-ctrl { display: flex; align-items: center; gap: 0.18rem; }
.sto-cart-btn {
    width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
    background: rgba(0,240,255,0.08); border: 1px solid rgba(0,240,255,0.2); border-radius: 3px;
    color: var(--color-primary); font-size: 0.85rem; line-height: 1;
    cursor: pointer; transition: background var(--transition-fast);
}
.sto-cart-btn:hover { background: rgba(0,240,255,0.18); }
.sto-cart-qty {
    font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
    color: var(--color-primary); min-width: 1.1rem; text-align: center;
}
.sto-cart-price { color: var(--color-success); font-weight: 700; white-space: nowrap; }

/* Capacités */
.sto-capacity {
    display: flex; flex-direction: column; gap: 0.18rem;
    padding: 0.3rem 0.5rem;
    background: rgba(0,240,255,0.03); border-radius: 4px;
    border: 1px solid rgba(0,240,255,0.07);
}
.sto-cap-row {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.7rem; color: var(--color-text-muted);
}
.sto-cap-total {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    color: var(--color-primary); margin-top: 0.15rem;
    display: flex; align-items: baseline; gap: 0.35rem;
}
.sto-cap-lbl { font-size: 0.62rem; color: var(--color-text-muted); font-family: var(--font-body); }
.sto-cap-comment {
    font-size: 0.72rem; color: rgba(0,240,255,0.55); font-style: italic;
    margin-top: 0.1rem;
}

/* Prix total stockage */
.sto-price-total {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.3rem 0.5rem; border-radius: 4px;
    background: rgba(0,235,160,0.05); border: 1px solid rgba(0,235,160,0.12);
    font-size: 0.72rem; color: var(--color-text-muted);
}
.sto-price-total strong { color: var(--color-success); font-size: 0.9rem; font-family: var(--font-display); display: flex; align-items: baseline; gap: 0.5rem; }
.sto-price-total i { color: var(--color-success); opacity: 0.7; }
.sto-price-ratio { font-size: 0.76rem; color: rgba(0,235,160,0.65); font-family: var(--font-body); font-weight: 400; }

/* Warning dépassement slots dans le résumé */
.bsummary-slot-warn { color: rgba(255,190,0,0.9) !important; cursor: help; }


/* ── Input saisie manuelle prix ── */
.rprice-input {
    width: 52px; padding: 0.18rem 0.3rem;
    background: rgba(0,0,0,0.35); border: 1px solid rgba(0,240,255,0.18); border-radius: 4px;
    color: var(--color-primary); font-family: var(--font-display); font-size: 0.66rem; font-weight: 700;
    text-align: center; -moz-appearance: textfield;
}
.rprice-input::-webkit-inner-spin-button,
.rprice-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.rprice-input:focus { outline: none; border-color: rgba(0,240,255,0.45); }

/* ── Sort chips ── */
.filter-sort-group { gap: 0.3rem; align-items: center; }
.filter-sort-icon { color: rgba(0,240,255,0.45); font-size: 0.8rem; flex-shrink: 0; }

/* Boutons quantité RAM */
.detail-ram-qty {
    background: rgba(55,165,255,0.05);
    border: 1px solid rgba(55,165,255,0.12); border-radius: 5px;
    padding: 0.45rem 0.5rem; margin-bottom: 0.35rem;
}
.detail-qty-btns {
    display: flex; gap: 0.35rem; margin-top: 0.3rem;
}
.qty-btn {
    flex: 1; padding: 0.3rem 0.2rem;
    background: rgba(55,165,255,0.08); border: 1px solid rgba(55,165,255,0.18);
    border-radius: 4px; color: rgba(55,165,255,0.75);
    font-family: var(--font-display); font-size: 0.74rem; font-weight: 700;
    cursor: pointer; transition: all var(--transition-fast); text-align: center;
}
.qty-btn:hover { background: rgba(55,165,255,0.18); color: rgba(55,165,255,1); }
.qty-btn.active {
    background: rgba(55,165,255,0.22); border-color: rgba(55,165,255,0.6);
    color: #fff; box-shadow: 0 0 6px rgba(55,165,255,0.3);
}

/* ════════════════════════════════════════
   SVG ANIMATIONS
   ════════════════════════════════════════ */
@keyframes rgb-pulse {
    0%   { fill: rgba(255,0,0,.7); }
    33%  { fill: rgba(0,255,0,.7); }
    66%  { fill: rgba(0,0,255,.7); }
    100% { fill: rgba(255,0,0,.7); }
}
@keyframes fan-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width: 1300px) {
    :root {
        --builder-summary-w:  260px;
        --builder-detail-w:   290px;
        --builder-bandeau-h:  365px;
    }
}

@media (max-width: 1100px) {
    :root {
        --builder-summary-w:  230px;
        --builder-detail-w:   250px;
        --builder-bandeau-h:  350px;
    }
    .comp-card { height: 248px; min-height: 248px; max-height: 248px; }
    .comp-card-img-wrap { height: 115px; }
    .comp-card-img-wrap img { max-height: 110px; }
}

@media (max-width: 960px) {
    .builder-top { grid-template-columns: var(--builder-summary-w) 1fr; }

    /* Backdrop mobile pour le panneau de détail */
    .builder-detail-backdrop {
        display: none;
        position: fixed; inset: 0; z-index: 849;
        background: rgba(4, 8, 18, 0.72);
        backdrop-filter: blur(3px);
    }
    .builder-detail-backdrop.detail-open { display: block; }

    /* Panel détail → modal centré */
    .builder-detail-panel {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: min(460px, 88vw);
        height: auto; max-height: 72vh;
        border-left: none;
        border: 1px solid rgba(0,240,255,0.35);
        border-radius: 14px;
        box-shadow: 0 8px 48px rgba(0,0,0,0.7), 0 0 32px rgba(0,240,255,0.12);
        z-index: 850;
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
        overflow-y: auto;
    }
    .builder-detail-panel.detail-open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        pointer-events: all;
    }

    /* Texte compact dans le drawer */
    .builder-detail-panel .detail-img-wrap { padding: 0.3rem; }
    .builder-detail-panel .detail-img-wrap img { max-height: 85px; }
    .builder-detail-panel .detail-name { font-size: 0.82rem; }
    .builder-detail-panel .detail-price { font-size: 0.95rem; }
    .builder-detail-panel .detail-spec-key,
    .builder-detail-panel .detail-spec-val { font-size: 0.76rem; }
    .builder-detail-panel .detail-spec-row { padding: 0.2rem 0.4rem; }
    .builder-detail-panel .detail-header { gap: 0.15rem; }
    .builder-detail-panel .detail-section-title { font-size: 0.64rem; padding: 0.2rem 0.5rem; }
    .builder-detail-panel .detail-select-btn { padding: 0.45rem 0.8rem; font-size: 0.8rem; }
}

@media (max-width: 700px) {
    .builder-top { grid-template-columns: 1fr; }
    .builder-summary { display: none; }
}

/* ── Bouton fermeture du drawer détail ── */
.detail-drawer-close { display: none; }
@media (max-width: 960px) {
    .detail-drawer-close {
        display: flex;
        position: sticky; top: 0; float: right;
        z-index: 10;
        background: rgba(0,240,255,0.07);
        border: 1px solid rgba(0,240,255,0.2);
        color: var(--color-text-muted);
        border-radius: 50%; width: 28px; height: 28px;
        align-items: center; justify-content: center;
        cursor: pointer; font-size: 0.8rem;
        transition: all 0.15s;
        margin: 0.5rem 0.5rem 0 0;
        flex-shrink: 0;
    }
    .detail-drawer-close:hover { background: rgba(0,240,255,0.18); color: var(--color-primary); }
}

/* ═══════════════════════════════════════════
   BANDEAU MODE COMPACT (≤ 900px)
   2 rangées × 4 onglets, récap composants
   ═══════════════════════════════════════════ */

/* Nom composant dans l'onglet — masqué en desktop */
.tab-comp-name { display: none; }

/* Chip prix total — masqué en desktop */
.bandeau-price-chip { display: none; }

@media (max-width: 900px) {
    /* Layout inversé : bandeau en hauteur auto, viewer prend le reste */
    .builder-top {
        flex: 1;
        min-height: 0;
        height: auto;           /* annule height: var(--builder-top-h) */
        grid-template-columns: 1fr;
    }
    .builder-bandeau {
        height: auto;           /* annule height: var(--builder-bandeau-h) */
        flex-shrink: 0;
    }
    /* Zone cartes : hauteur fixée à la taille d'une rangée de cartes */
    .bandeau-body { flex-shrink: 0; height: calc(185px + 6px); }

    /* Récap gauche masqué — les onglets font office de récap */
    .builder-summary { display: none; }

    /* Grille 2×4 au lieu du défilement horizontal */
    .bandeau-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: auto;
        overflow: visible;
        justify-content: stretch;
    }

    .bandeau-tab {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.08rem;
        padding: 0.32rem 0.2rem;
        white-space: normal;
        text-align: center;
        height: auto;
        border-right: 1px solid rgba(0,240,255,0.07);
        border-bottom: 1px solid rgba(0,240,255,0.07);
        min-height: 0;
    }
    .bandeau-tab > i { font-size: 0.95rem; }
    .tab-label { font-size: 0.63rem; letter-spacing: 0; }
    .tab-check { margin-left: 0; font-size: 0.58rem; position: absolute; top: 3px; right: 3px; }
    .bandeau-tab { position: relative; }

    /* Nom du composant sélectionné — ligne 2 */
    .tab-comp-name {
        display: block;
        font-size: 0.56rem;
        font-weight: 600;
        color: var(--color-success);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        line-height: 1.2;
        padding: 0 0.15rem;
    }
    .bandeau-tab:not(.tab-done) .tab-comp-name {
        color: var(--color-text-muted);
        opacity: 0.3;
        font-weight: 400;
    }

    /* Onglet actif en mode grille */
    .bandeau-tab.tab-active {
        margin-top: 0;
        padding-top: 0.32rem;
        border-radius: 0;
        border-top: 2px solid var(--color-primary);
    }

    /* Chip prix total */
    .bandeau-price-chip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.26rem 1rem;
        background: rgba(0,255,136,0.04);
        border-bottom: 1px solid rgba(0,255,136,0.1);
        flex-shrink: 0;
    }
    .bandeau-price-label {
        font-family: var(--font-display);
        font-size: 0.58rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        display: flex; align-items: center; gap: 0.28rem;
    }
    .bandeau-price-val {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--color-success);
    }

    /* Cartes composants plus compactes */
    .comp-card { width: 195px; height: 185px; min-height: 185px; max-height: 185px; }
    .comp-card-img-wrap { height: 75px; }
    .comp-card-img-wrap img { max-height: 70px; }
    .comp-card-name { font-size: 0.8rem; -webkit-line-clamp: 1; }
    .comp-card-info { padding: 0.28rem 0.5rem 1.4rem 0.5rem; }
    .comp-card-price { font-size: 0.82rem; }
    .spec-tag { font-size: 0.6rem; padding: 0.1rem 0.28rem; }
}

/* ── Modale de confirmation réinitialisation ── */
.builder-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5,8,15,0.84);
    backdrop-filter: blur(4px);
    animation: modal-fade-in 0.15s ease;
}
@keyframes modal-fade-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

.builder-modal {
    background: #0a0e1a;
    border: 1px solid rgba(0,240,255,0.45);
    box-shadow: 0 0 48px rgba(0,240,255,0.14), 0 0 0 1px rgba(0,240,255,0.07), inset 0 0 30px rgba(0,240,255,0.03);
    border-radius: 8px;
    padding: 2rem 2.4rem 1.8rem;
    min-width: 320px; max-width: 420px;
    text-align: center;
    position: relative;
}
.builder-modal::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,240,255,0.7), transparent);
    border-radius: 8px 8px 0 0;
}
.builder-modal-icon {
    font-size: 2.2rem;
    color: rgba(255,80,80,0.9);
    margin-bottom: 0.7rem;
    display: block;
}
.builder-modal-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 3px;
    margin: 0 0 0.75rem;
}
.builder-modal-text {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-bottom: 1.6rem;
}
.builder-modal-actions {
    display: flex; gap: 0.8rem; justify-content: center;
}
.builder-modal-cancel {
    padding: 0.52rem 1.3rem;
    background: transparent;
    border: 1px solid rgba(0,240,255,0.28);
    color: var(--color-text-muted);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.92rem; font-weight: 600;
    cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.builder-modal-cancel:hover { border-color: rgba(0,240,255,0.65); color: var(--color-primary); }

.builder-modal-confirm {
    padding: 0.52rem 1.3rem;
    background: rgba(210,35,35,0.16);
    border: 1px solid rgba(210,35,35,0.55);
    color: rgba(255,110,110,0.95);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.92rem; font-weight: 700;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.builder-modal-confirm:hover { background: rgba(210,35,35,0.30); border-color: rgba(255,70,70,0.85); }

/* ── Variantes couleur de la modale (erreur / avertissement) ── */
.builder-modal.is-error {
    border-color: rgba(220,50,50,0.52);
    box-shadow: 0 0 48px rgba(220,50,50,0.12), 0 0 0 1px rgba(220,50,50,0.07), inset 0 0 30px rgba(220,50,50,0.03);
}
.builder-modal.is-error::before { background: linear-gradient(90deg, transparent, rgba(220,50,50,0.7), transparent); }

.builder-modal.is-warn {
    border-color: rgba(255,155,0,0.52);
    box-shadow: 0 0 48px rgba(255,155,0,0.12), 0 0 0 1px rgba(255,155,0,0.07), inset 0 0 30px rgba(255,155,0,0.03);
}
.builder-modal.is-warn::before { background: linear-gradient(90deg, transparent, rgba(255,155,0,0.7), transparent); }

.builder-modal-icon.is-error { color: rgba(255,80,80,0.95); }
.builder-modal-icon.is-warn  { color: rgba(255,175,0,0.95); }

/* ── Liste d'items dans la modale de validation ── */
.vmodal-list {
    list-style: none; padding: 0; margin: 0 0 1.5rem;
    text-align: left;
    display: flex; flex-direction: column; gap: 0.3rem;
    max-height: 200px; overflow-y: auto;
    width: 100%;
}
.vmodal-list-item {
    font-size: 0.86rem; line-height: 1.38;
    padding: 0.32rem 0.55rem;
    background: rgba(0,0,0,0.22);
    border-radius: 4px;
    border-left: 2px solid rgba(0,240,255,0.2);
    color: var(--color-text);
}
.builder-modal.is-error .vmodal-list-item { border-left-color: rgba(220,50,50,0.5); }
.builder-modal.is-warn  .vmodal-list-item { border-left-color: rgba(255,155,0,0.5); }

/* Bouton confirmer variante warning (orange) */
.builder-modal-confirm.is-warn {
    background: rgba(190,110,0,0.18);
    border-color: rgba(210,130,0,0.55);
    color: rgba(255,185,60,0.95);
}
.builder-modal-confirm.is-warn:hover { background: rgba(190,110,0,0.32); border-color: rgba(255,160,0,0.85); }

/* ═══════════════════════════════════════════════════════════════
   TUTORIEL / GUIDE DU BUILDER
   ═══════════════════════════════════════════════════════════════ */

/* Bouton ? dans l'en-tête du viewer */
.viewer-help-btn {
    margin-left: auto;
    padding: 0.18rem 0.52rem;
    background: rgba(0,240,255,0.06);
    border: 1px solid rgba(0,240,255,0.22);
    border-radius: 4px;
    color: var(--color-primary);
    font-size: 0.88rem;
    cursor: pointer; line-height: 1;
    transition: background 0.15s, border-color 0.15s;
    display: flex; align-items: center;
}
.viewer-help-btn:hover { background: rgba(0,240,255,0.14); border-color: rgba(0,240,255,0.5); }

/* Overlay plein écran semi-transparent */
.btut-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(5,8,15,0.72);
    backdrop-filter: blur(2px);
    cursor: pointer;
    animation: modal-fade-in 0.2s ease;
}

/* Zone principale : bordure glow positionnée par JS */
.btut-zone {
    position: fixed;
    border: 2px solid rgba(0,240,255,0.6);
    border-radius: 8px;
    box-shadow: 0 0 28px rgba(0,240,255,0.18), inset 0 0 30px rgba(0,240,255,0.04);
    background: rgba(0,240,255,0.025);
    pointer-events: none;
    z-index: 10001;
}
.btut-zone::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,240,255,0.75), transparent);
    border-radius: 8px 8px 0 0;
}

/* Variante viewer : plus lumineuse */
.btut-zone-viewer {
    border-color: rgba(0,240,255,0.9);
    box-shadow: 0 0 40px rgba(0,240,255,0.28), inset 0 0 30px rgba(0,240,255,0.06);
}
.btut-zone-viewer::before {
    background: linear-gradient(90deg, transparent, rgba(0,240,255,1), transparent);
}

/* Info label centré dans la zone */
.btut-zone-info {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(8,12,24,0.96);
    border: 1px solid rgba(0,240,255,0.32);
    border-radius: 9px;
    padding: 0.9rem 1.2rem;
    min-width: 180px;
    width: max-content;
    max-width: 280px;
    z-index: 10002;
}
.btut-zone-info::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    border-radius: 9px 9px 0 0;
}

/* Variante label centré (bandeau) */
.btut-zone-info-top {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    max-width: none;
}

/* En-tête de zone */
.btut-zone-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.7rem; }
.btut-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,240,255,0.12); border: 2px solid rgba(0,240,255,0.55);
    color: var(--color-primary);
    font-family: 'Orbitron', monospace; font-size: 0.9rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 0 10px rgba(0,240,255,0.25);
}
.btut-zone-title {
    font-family: 'Orbitron', monospace; font-size: 0.88rem; font-weight: 700;
    color: var(--color-primary); letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 0.4rem; white-space: nowrap;
}

/* Liste de features */
.btut-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.38rem; }
.btut-list li {
    font-size: 0.9rem; color: var(--color-text-muted);
    display: flex; align-items: flex-start; gap: 0.4rem; line-height: 1.35; white-space: nowrap;
}
.btut-list li i { color: var(--color-primary); font-size: 0.82rem; flex-shrink: 0; margin-top: 0.14rem; }
.btut-list li strong { color: var(--color-text); }

/* Sous-zones (onglets / filtres / produits) : bordure pointillée violette */
.btut-subzone {
    position: fixed;
    border: 1px dashed rgba(168,85,247,0.6);
    border-radius: 5px;
    background: rgba(168,85,247,0.04);
    pointer-events: none;
    z-index: 10002;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 6px;
}
.btut-subzone-label {
    background: rgba(8,12,24,0.93);
    border: 1px solid rgba(168,85,247,0.4);
    border-radius: 4px;
    padding: 0.22rem 0.6rem;
    font-size: 0.72rem; color: rgba(168,85,247,0.95);
    font-family: 'Rajdhani', sans-serif; font-weight: 600;
    display: flex; align-items: center; gap: 0.3rem; white-space: nowrap;
}
.btut-subzone-label i { font-size: 0.7rem; }

/* Pilule haut-centre */
.btut-top-bar {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    z-index: 10003;
    background: rgba(8,12,24,0.97);
    border: 1px solid rgba(0,240,255,0.18);
    border-radius: 30px;
    padding: 0.55rem 1.4rem;
    display: flex; align-items: center; gap: 0.85rem;
    cursor: default;
    white-space: nowrap;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 12px rgba(0,240,255,0.06);
}
.btut-top-sep { color: rgba(0,240,255,0.2); font-size: 1.1rem; }
.btut-never-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.btut-never-label span { font-size: 0.84rem; color: var(--color-text-muted); }
.btut-checkbox { accent-color: var(--color-primary); width: 14px; height: 14px; cursor: pointer; }
.btut-footer-hint {
    font-size: 0.82rem; color: rgba(0,240,255,0.4);
    display: flex; align-items: center; gap: 0.35rem;
}