/* ════════════════════════════════════════════════════════════════════════
   bease-3d-adapter.css — Adaptateur visuel : applique la FORME du
   personnalisateur BCS (.bco-*) aux panneaux du configurateur 3D.

   • Tout est scopé sous #bease-configurator-app (spécificité 1,1,0 > règles
     du configurateur en 0,1,0, y compris sous @media mobile → gagne sans
     !important, à charger après bease-public/bease-mobile).
   • Le RECOLORAGE (accent orange) est fait par swap de tokens dans
     configurator.css / configurator-mobile.css. Ici : radii, bordures,
     surfaces, ombres, états — la "forme" .bco.
   • EXCLUSION STRICTE : jamais .bease-viewport, <canvas>, .bease-canvas-*,
     .bease-overlay-element (poignées 3D). Aucun style n'y touche.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Surfaces & texte (.bco : blanc/#111/#888 sur bordure #e8e8e8) ─────── */
#bease-configurator-app .bease-panel,
#bease-configurator-app .bease-design-card,
#bease-configurator-app .bease-product-card {
    background: var(--bease-surface, #fff);
    border-color: var(--bease-border, #e8e8e8);
}
#bease-configurator-app .bease-panel-header h3 { color: var(--bease-ink, #111); }
#bease-configurator-app .bease-label { color: var(--bease-muted, #888); }

/* ── Boutons "tool" .bco : blanc, bordure 1.5px, radius 12, actif encre ── */
#bease-configurator-app .bease-btn-outline,
#bease-configurator-app .bease-style-btn,
#bease-configurator-app .bease-zone-btn,
#bease-configurator-app .bease-cat-btn {
    border-radius: var(--bease-radius, 12px);
    border-color: var(--bease-border, #e8e8e8);
}
#bease-configurator-app .bease-style-btn.active,
#bease-configurator-app .bease-zone-btn.active {
    border-color: var(--bease-accent, #E8001E);
    color: var(--bease-accent, #E8001E);
}

/* ── CTA primaire .bco-order-btn : radius 12, plein accent (fond via swap) ─ */
#bease-configurator-app .bease-btn-primary,
#bease-configurator-app .bease-add-btn {
    border-radius: var(--bease-radius, 12px);
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════════
   RAIL DE NAVIGATION (.bease-icon-nav / .bease-nav-item) — look .bco
   • Repos : icône + label en --bease-muted.
   • Actif : --bease-accent (rouge) + PILULE arrondie --bease-accent-soft
     (remplace le bandeau gauche / la bordure-bas des layouts d'origine).
   • Hover (non actif) : fond gris très léger, transition douce.
   • Icône Lucide ~22px (stroke=currentColor → suit l'état), label 11px.
   #id (1,1,0+) > règles de base ET media (0,1,0) → gagne à toutes largeurs
   sans !important ni dupliquer les media queries.
   ════════════════════════════════════════════════════════════════════════ */
#bease-configurator-app .bease-nav-item {
    color: var(--bease-muted, #888);
    border-radius: var(--bease-radius, 12px);
    border-bottom-color: transparent;   /* neutralise l'indicateur bas (layout horizontal) */
    border-left-color: transparent;     /* neutralise le bandeau gauche (rail vertical ≥960px) */
    margin: 2px 6px;                    /* détache la pilule des bords du rail */
    transition: background .15s ease, color .15s ease;
}
#bease-configurator-app .bease-nav-item:hover:not(.active) {
    background: rgba(17, 17, 17, .05);
    color: var(--bease-ink, #111);
}
#bease-configurator-app .bease-nav-item.active {
    color: var(--bease-accent, #E8001E);
    background: var(--bease-accent-soft, #fce6e9);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: var(--bease-radius, 12px);
}
/* Icône Lucide : taille fixe, hérite currentColor (aucune couleur en dur) */
#bease-configurator-app .bease-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
#bease-configurator-app .bease-nav-icon svg {
    width: 22px;
    height: 22px;
}
/* Label : 11px (icône + texte conservés, pas de label au survol) */
#bease-configurator-app .bease-nav-item > span:last-child {
    font-size: 11px;
}

/* ── Swatches : pastille ronde .bco + anneau de sélection accent ───────── */
#bease-configurator-app .bease-qcolor {
    border-radius: 50%;
    box-shadow: 0 0 0 1px #fff inset, 0 0 0 1px rgba(0,0,0,.25);
}
#bease-configurator-app .bease-qcolor.active,
#bease-configurator-app .bease-qcolor.selected,
#bease-configurator-app .bease-qcolor[aria-pressed="true"] {
    border-color: var(--bease-accent, #E8001E);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bease-accent, #E8001E);
}

/* ── Barre prix .bco-cart : encre forte + ombre sobre ─────────────────── */
#bease-configurator-app .bease-bottom-price {
    color: var(--bease-ink, #111);
}

/* ── Notices : filet accent / danger via tokens (fond déjà swappé) ─────── */
#bease-configurator-app .bease-notice {
    border-radius: var(--bease-radius-sm, 8px);
}

/* ════════════════════════════════════════════════════════════════════════
   .bease-view-controls — boutons flottants AU-DESSUS du viewport 3D.
   Ils n'avaient aucun mécanisme de lisibilité (blanc opaque seul). On ajoute
   un scrim sombre + blur BORNÉ au conteneur pour garantir la séparation quelle
   que soit la couleur du maillot, et on re-teinte l'état actif/hover en accent.
   Borné à .bease-view-controls et ses enfants DIRECTS — jamais .bease-overlay-element.
   ════════════════════════════════════════════════════════════════════════ */
#bease-configurator-app .bease-view-controls {
    background: rgba(17,17,17,.42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 4px;
    border-radius: var(--bease-radius, 12px);
}
#bease-configurator-app .bease-view-controls > .bease-view-btn {
    border-radius: var(--bease-radius-sm, 8px);
    border-color: var(--bease-border, #e8e8e8);
}
#bease-configurator-app .bease-view-controls > .bease-view-btn:hover,
#bease-configurator-app .bease-view-controls > .bease-view-btn.active {
    border-color: var(--bease-accent, #E8001E);
    color: var(--bease-accent, #E8001E);
}

/* ── Mobile (le wizard .bmw-* vit dans #bease-configurator-app) ────────── */
@media (max-width: 768px) {
    #bease-configurator-app .bmw-btn-order,
    #bease-configurator-app .bmw-btn-next,
    #bease-configurator-app .bmw-btn-3d {
        border-radius: var(--bease-radius, 12px);
        font-weight: 500;
    }
    /* Harmonise le radius des contrôles mobiles sur .bco (10px → 12px) */
    #bease-configurator-app .bmw-tool,
    #bease-configurator-app .bmw-chip {
        border-radius: var(--bease-radius, 12px);
    }
}

/* ════════════════════════════════════════════════════════════════════════
   Modale récap #bease-recap-modal — reparentée vers <body> par le JS, donc
   HORS de #bease-configurator-app : règle NON scopée (volontairement). Le hex
   accent a été sorti du inline-style du JS vers cette classe ; les tokens étant
   sur :root, var(--bease-accent) se résout aussi sur <body>.
   ════════════════════════════════════════════════════════════════════════ */
.bease-recap-confirm {
    background: var(--bease-accent, #E8001E);
    transition: background .15s;
}
.bease-recap-confirm:hover {
    background: var(--bease-accent-dark, #c8001a);
}