/* ================================================================
   CamiBijoux – Mon Compte  v1.0.0
   ================================================================ */

.cbja-wrap {
    /* Palette alignée sur le tunnel de commande.
       --cbja-pink garde son nom (utilisé partout comme couleur d'accent)
       mais porte désormais le brun foncé du checkout. */
    --cbja-pink:        #3A2317;
    --cbja-pink-hover:  #24150D;
    --cbja-pink-light:  #FDF8F4;
    --cbja-pink-border: #EFE3D8;
    --cbja-text:        #1A1A1A;
    --cbja-muted:       #6E6E6E;
    --cbja-border:      #DCDCDC;
    --cbja-border-soft: #EBEBEB;
    --cbja-input-bg:    #FFFFFF;
    --cbja-card-bg:     #FFFFFF;
    --cbja-radius:      12px;
    --cbja-sidebar-w:   300px;

    display: grid !important;
    grid-template-columns: var(--cbja-sidebar-w) 1fr !important;
    gap: 32px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    font-family: inherit !important;
    color: var(--cbja-text) !important;
}

/* ════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════ */

.cbja-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    position: sticky !important;
    top: 24px !important;
}

/* Avatar card */
.cbja-avatar-card {
    background: var(--cbja-card-bg) !important;
    border-radius: var(--cbja-radius) !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}

.cbja-avatar {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #3A2317 0%, #D9C8BC 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
}
.cbja-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.cbja-avatar__initials {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: .5px !important;
}
.cbja-avatar__name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--cbja-text) !important;
    line-height: 1.3 !important;
}
.cbja-avatar__since {
    font-size: 12.5px !important;
    color: var(--cbja-muted) !important;
}
.cbja-avatar__level {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #c8941a !important;
    margin-top: 2px !important;
}
.cbja-avatar__level svg { stroke: #c8941a !important; }
.cbja-avatar__pts {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--cbja-text) !important;
}
.cbja-coin {
    color: #e8ab20 !important;
    font-size: 13px !important;
}

/* Nav */
.cbja-nav {
    background: var(--cbja-card-bg) !important;
    border-radius: var(--cbja-radius) !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.cbja-nav__item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--cbja-text) !important;
    text-decoration: none !important;
    transition: background .15s, color .15s !important;
}
.cbja-nav__item:hover {
    background: var(--cbja-pink-light) !important;
    color: var(--cbja-pink) !important;
}
.cbja-nav__item:hover svg { stroke: var(--cbja-pink) !important; }

.cbja-nav__item.is-active {
    background: var(--cbja-pink) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.cbja-nav__item.is-active svg { stroke: #fff !important; }
.cbja-nav__item.is-active .cbja-nav__count { background: rgba(255,255,255,.25) !important; color: #fff !important; }

.cbja-nav__label { flex: 1 !important; }

.cbja-nav__count {
    background: #E5E5E5 !important;
    color: var(--cbja-muted) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 20px !important;
    min-width: 22px !important;
    text-align: center !important;
}
.cbja-nav__dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--cbja-pink) !important;
    flex-shrink: 0 !important;
}
.cbja-nav__item--logout {
    color: var(--cbja-pink) !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--cbja-border) !important;
    padding-top: 13px !important;
    border-radius: 0 0 10px 10px !important;
}
.cbja-nav__item--logout:hover { background: var(--cbja-pink-light) !important; }
.cbja-nav__item--logout svg { stroke: var(--cbja-pink) !important; }

/* ════════════════════════════════════════
   CONTENT AREA
   ════════════════════════════════════════ */

.cbja-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    min-width: 0 !important;
}

/* Page header */
.cbja-page-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 4px !important;
}
.cbja-page-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--cbja-text) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.cbja-page-count {
    font-size: 13px !important;
    color: var(--cbja-muted) !important;
}

/* Card */
.cbja-card {
    background: var(--cbja-card-bg) !important;
    border-radius: var(--cbja-radius) !important;
    padding: 24px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.cbja-card__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
}
.cbja-card__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--cbja-text) !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ════════════════════════════════════════
   DASHBOARD – Banner
   ════════════════════════════════════════ */

.cbja-banner {
    background: linear-gradient(135deg, #F7EFE7 0%, #F6F0EA 100%) !important;
    border-radius: var(--cbja-radius) !important;
    padding: 22px 24px !important;
    border: 1px solid #E5E5E5 !important;
}
.cbja-banner__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    color: var(--cbja-text) !important;
}
.cbja-banner__sub {
    font-size: 14px !important;
    color: #555 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}
.cbja-banner__level { color: #c8941a !important; }

/* Stats */
.cbja-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}
.cbja-stat {
    background: var(--cbja-card-bg) !important;
    border-radius: 12px !important;
    padding: 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    transition: transform .15s, box-shadow .15s !important;
    color: var(--cbja-text) !important;
}
.cbja-stat:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
}
.cbja-stat svg { stroke: var(--cbja-pink) !important; }
.cbja-stat__val {
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}
.cbja-stat__lbl {
    font-size: 12px !important;
    color: var(--cbja-muted) !important;
    text-align: center !important;
}

/* Progress bar */
.cbja-progress {
    background: #E5E5E5 !important;
    border-radius: 99px !important;
    height: 8px !important;
    overflow: hidden !important;
    margin: 0 0 10px !important;
}
.cbja-progress__bar {
    height: 100% !important;
    background: var(--cbja-pink) !important;
    border-radius: 99px !important;
    transition: width .4s ease !important;
}
.cbja-link {
    font-size: 13px !important;
    color: var(--cbja-pink) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.cbja-link:hover { text-decoration: underline !important; }
.cbja-loyalty-hint {
    font-size: 13px !important;
    color: var(--cbja-muted) !important;
    margin: 0 !important;
}
.cbja-coming-soon {
    text-align: center !important;
    font-size: 13px !important;
    color: var(--cbja-muted) !important;
    padding: 8px 0 !important;
    margin: 0 !important;
}

/* ════════════════════════════════════════
   ORDERS
   ════════════════════════════════════════ */

.cbja-orders-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.cbja-order-row {
    background: var(--cbja-card-bg) !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    transition: box-shadow .15s !important;
}
.cbja-order-row:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10) !important; }
.cbja-order-row__left { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.cbja-order-row__right { display: flex !important; align-items: center !important; gap: 12px !important; }
.cbja-order-row__num { font-size: 15px !important; font-weight: 700 !important; color: var(--cbja-text) !important; }
.cbja-order-row__date {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    color: var(--cbja-muted) !important;
}
.cbja-order-row__date svg { stroke: var(--cbja-muted) !important; flex-shrink: 0 !important; }
.cbja-order-row__amount { font-size: 15px !important; font-weight: 700 !important; color: var(--cbja-text) !important; }
.cbja-order-row__arrow { font-size: 20px !important; color: var(--cbja-muted) !important; }

/* Expanded (dashboard) */
.cbja-order-expanded {
    display: block !important;
    text-decoration: none !important;
    color: var(--cbja-text) !important;
}
.cbja-order-expanded__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    gap: 12px !important;
}
.cbja-order-expanded__items {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}
.cbja-order-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.cbja-order-item__img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    background: #E5E5E5 center/cover no-repeat !important;
    flex-shrink: 0 !important;
}
.cbja-order-item__name { font-size: 14px !important; font-weight: 500 !important; margin-bottom: 2px !important; }
.cbja-order-item__price { font-size: 13px !important; color: var(--cbja-muted) !important; }
.cbja-order-expanded__footer {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--cbja-border) !important;
}
.cbja-order-expanded__total { font-size: 16px !important; font-weight: 800 !important; }
.cbja-order-expanded__pts { font-size: 13px !important; color: var(--cbja-pink) !important; }

/* Status badges */
.cbja-status {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    border-radius: 99px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
.cbja-status--green  { background: #F1F9F4 !important; color: #2A7D50 !important; }
.cbja-status--blue   { background: #e8f0fe !important; color: #2563eb !important; }
.cbja-status--yellow { background: #fef9e7 !important; color: #b45309 !important; }
.cbja-status--red    { background: #fee2e2 !important; color: #dc2626 !important; }
.cbja-status--grey   { background: #f3f4f6 !important; color: #6b7280 !important; }

/* ════════════════════════════════════════
   FAVORIS
   ════════════════════════════════════════ */

.cbja-favoris-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 16px !important;
}
.cbja-fav-card {
    background: var(--cbja-card-bg) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: var(--cbja-text) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    transition: transform .15s, box-shadow .15s !important;
    display: block !important;
}
.cbja-fav-card:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(0,0,0,.10) !important; }
.cbja-fav-card__img { width: 100% !important; aspect-ratio: 1 !important; object-fit: cover !important; background: #E5E5E5 !important; display: block !important; }
.cbja-fav-card__body { padding: 12px !important; }
.cbja-fav-card__name { font-size: 13.5px !important; font-weight: 600 !important; margin-bottom: 4px !important; }
.cbja-fav-card__price { font-size: 13px !important; color: var(--cbja-pink) !important; font-weight: 700 !important; }

/* ════════════════════════════════════════
   ADRESSES
   ════════════════════════════════════════ */

.cbja-address-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 16px !important;
}
.cbja-address-card {
    background: var(--cbja-card-bg) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    border: 1.5px solid var(--cbja-border) !important;
}
.cbja-address-card--default { border-color: var(--cbja-pink-border) !important; background: #F7EFE7 !important; }
.cbja-address-card__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    gap: 8px !important;
}
.cbja-address-card__type {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}
.cbja-address-card__type svg { stroke: var(--cbja-pink) !important; }
.cbja-address-card__right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.cbja-address-card__action {
    color: var(--cbja-muted) !important;
    display: flex !important;
    align-items: center !important;
    transition: color .15s !important;
}
.cbja-address-card__action:hover { color: var(--cbja-pink) !important; }
.cbja-address-card__body {
    font-size: 14px !important;
    color: var(--cbja-text) !important;
    line-height: 1.7 !important;
}
.cbja-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 10px !important;
    border-radius: 99px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}
.cbja-badge--default { background: var(--cbja-pink-light) !important; color: var(--cbja-pink) !important; }

/* ════════════════════════════════════════
   PARAMÈTRES
   ════════════════════════════════════════ */

.cbja-settings-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.cbja-settings-block__title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--cbja-text) !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

/* Forms */
.cbja-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}
.cbja-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.cbja-form-group label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cbja-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.cbja-form-group label svg { stroke: var(--cbja-muted) !important; }
.cbja-form-group input[type="text"],
.cbja-form-group input[type="email"],
.cbja-form-group input[type="tel"],
.cbja-form-group input[type="password"] {
    background: var(--cbja-input-bg) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: var(--cbja-text) !important;
    outline: none !important;
    transition: box-shadow .2s !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.cbja-form-group input:focus {
    box-shadow: 0 0 0 2px var(--cbja-pink) !important;
}

/* Preferences toggles */
.cbja-pref-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--cbja-border) !important;
    font-size: 14px !important;
    color: var(--cbja-text) !important;
    cursor: pointer !important;
    gap: 12px !important;
}
.cbja-pref-row:last-of-type { border-bottom: none !important; padding-bottom: 0 !important; }
.cbja-toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 2px solid var(--cbja-border) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all .2s !important;
    background: transparent center/14px no-repeat !important;
}
.cbja-toggle:checked {
    background-color: var(--cbja-pink) !important;
    border-color: var(--cbja-pink) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}

/* Danger zone */
.cbja-danger-zone {
    border: 1.5px solid #fca5a5 !important;
    background: #fff8f8 !important;
}
.cbja-danger-zone__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}
.cbja-danger-zone__desc {
    font-size: 13.5px !important;
    color: #666 !important;
    margin: 0 0 14px !important;
    line-height: 1.6 !important;
}
.cbja-danger-zone__link {
    font-size: 13.5px !important;
    color: #dc2626 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.cbja-danger-zone__link:hover { text-decoration: underline !important; }

/* ════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════ */

.cbja-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    border-radius: 99px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all .2s !important;
    border: 2px solid transparent !important;
    white-space: nowrap !important;
}
.cbja-btn--primary {
    background: var(--cbja-pink) !important;
    color: #fff !important;
    border-color: var(--cbja-pink) !important;
}
.cbja-btn--primary:hover { background: #24150D !important; border-color: #24150D !important; }
.cbja-btn--outline {
    background: transparent !important;
    color: var(--cbja-text) !important;
    border-color: var(--cbja-border) !important;
}
.cbja-btn--outline:hover { border-color: var(--cbja-text) !important; }

/* Empty state */
.cbja-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 60px 24px !important;
    text-align: center !important;
}
.cbja-empty svg {
    width: 48px !important;
    height: 48px !important;
    stroke: #ccc !important;
}
.cbja-empty p {
    font-size: 15px !important;
    color: var(--cbja-muted) !important;
    margin: 0 !important;
}

/* Notice */
.cbja-notice {
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.cbja-notice--success { background: #ecfdf5 !important; color: #065f46 !important; }
.cbja-notice--error   { background: #fee2e2 !important; color: #991b1b !important; }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

@media (max-width: 900px) {
    .cbja-wrap {
        grid-template-columns: 1fr !important;
    }
    .cbja-sidebar {
        position: static !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .cbja-avatar-card {
        flex: 1 1 240px !important;
    }
    .cbja-nav {
        flex: 1 1 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 10px !important;
    }
    .cbja-nav__item {
        flex: 0 0 auto !important;
        padding: 9px 12px !important;
        font-size: 13px !important;
    }
    .cbja-nav__item--logout {
        border-top: none !important;
        padding-top: 9px !important;
        margin-top: 0 !important;
    }
    .cbja-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .cbja-wrap { gap: 16px !important; }
    .cbja-sidebar { flex-direction: column !important; }
    .cbja-avatar-card { flex: auto !important; }
    .cbja-nav { flex-direction: column !important; }
    .cbja-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .cbja-form-row { grid-template-columns: 1fr !important; }
    .cbja-page-title { font-size: 18px !important; }
    .cbja-order-row { flex-wrap: wrap !important; }
    .cbja-address-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════
   HARMONISATION AVEC LE TUNNEL DE COMMANDE  (v1.2)

   Reprend les codes du checkout : cartes bordées plutôt qu'ombrées,
   champs hauts et aérés, boutons foncés, plus d'air partout.
   Les blocs des Paramètres respirent nettement plus.
   ════════════════════════════════════════════════════════════════ */

.cbja-content { gap: 26px !important; }

.cbja-card {
    padding: 28px !important;
    border: 1px solid var(--cbja-border) !important;
    border-radius: var(--cbja-radius) !important;
    box-shadow: none !important;
}
.cbja-avatar-card,
.cbja-nav {
    border: 1px solid var(--cbja-border) !important;
    box-shadow: none !important;
    border-radius: var(--cbja-radius) !important;
}
.cbja-avatar { background: linear-gradient(135deg, #3A2317 0%, #7A5B47 100%) !important; }

.cbja-page-title { letter-spacing: -.01em !important; }

/* ── Navigation latérale ─────────────────────────────────────── */
.cbja-nav__item { border-radius: 10px !important; }
.cbja-nav__item.is-active { background: var(--cbja-pink) !important; color: #fff !important; }

/* ── Blocs de réglages ───────────────────────────────────────── */
.cbja-settings-block { gap: 22px !important; }

.cbja-settings-block__title {
    font-size: 16px !important;
    margin: 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--cbja-border-soft) !important;
}
.cbja-settings-block__title svg { stroke: var(--cbja-pink) !important; }

/* Courte explication sous un titre de bloc */
.cbja-settings-desc {
    margin: -12px 0 0 !important;
    font-size: 13.5px !important;
    color: var(--cbja-muted) !important;
    line-height: 1.5 !important;
}

/* ── Formulaires ─────────────────────────────────────────────── */
.cbja-settings-block form {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin: 0 !important;
}
.cbja-form-row { gap: 18px !important; }
.cbja-form-group { gap: 8px !important; }

.cbja-form-group label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--cbja-muted) !important;
}

.cbja-form-group input[type="text"],
.cbja-form-group input[type="email"],
.cbja-form-group input[type="tel"],
.cbja-form-group input[type="password"] {
    height: 52px !important;
    padding: 14px 16px !important;
    background: var(--cbja-input-bg) !important;
    border: 1px solid var(--cbja-border) !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    transition: border-color .13s ease, box-shadow .13s ease !important;
}
.cbja-form-group input:focus {
    border-color: var(--cbja-text) !important;
    box-shadow: 0 0 0 1px var(--cbja-text) !important;
}
.cbja-form-group input::placeholder { color: #B5B5B5 !important; }

/* Le bouton d'un formulaire se détache du dernier champ */
.cbja-settings-block form > .cbja-btn {
    align-self: flex-start !important;
    margin-top: 6px !important;
}

/* ── Préférences : véritables interrupteurs ──────────────────── */
.cbja-pref-row {
    padding: 18px 0 !important;
    border-bottom: 1px solid var(--cbja-border-soft) !important;
    font-size: 14.5px !important;
    gap: 18px !important;
}
.cbja-pref-row:first-of-type { padding-top: 4px !important; }

.cbja-toggle {
    position: relative !important;
    width: 46px !important;
    height: 26px !important;
    border-radius: 999px !important;
    border: none !important;
    background: #DCDCDC !important;
    background-image: none !important;
    transition: background .18s ease !important;
}
.cbja-toggle::after {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.25) !important;
    transition: transform .18s ease !important;
}
.cbja-toggle:checked {
    background: var(--cbja-pink) !important;
    background-image: none !important;
    border: none !important;
}
.cbja-toggle:checked::after { transform: translateX(20px) !important; }

/* ── Boutons ─────────────────────────────────────────────────── */
.cbja-btn {
    border-radius: 999px !important;
    font-weight: 600 !important;
    transition: background .13s ease, color .13s ease, border-color .13s ease !important;
}
.cbja-btn--primary {
    background: var(--cbja-pink) !important;
    border-color: var(--cbja-pink) !important;
    color: #fff !important;
    padding: 14px 28px !important;
}
.cbja-btn--primary:hover {
    background: var(--cbja-pink-hover) !important;
    border-color: var(--cbja-pink-hover) !important;
    color: #fff !important;
}
.cbja-btn--outline {
    background: transparent !important;
    border: 1.5px solid var(--cbja-border) !important;
    color: var(--cbja-text) !important;
    padding: 13px 26px !important;
}
.cbja-btn--outline:hover {
    border-color: var(--cbja-text) !important;
    background: var(--cbja-pink-light) !important;
    color: var(--cbja-text) !important;
}

/* ── Zone de suppression : sobre, pas alarmiste ──────────────── */
.cbja-danger-zone {
    border: 1px solid var(--cbja-border) !important;
    background: #FCFAF9 !important;
}
.cbja-danger-zone__title {
    font-size: 15px !important;
    color: var(--cbja-text) !important;
    margin: 0 0 10px !important;
}
.cbja-danger-zone__desc { font-size: 13.5px !important; color: var(--cbja-muted) !important; margin: 0 0 16px !important; }
.cbja-danger-zone__link {
    display: inline-block !important;
    color: #A93B38 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* ── Responsive : l'onglet Paramètres reste confortable ──────── */
@media (max-width: 600px) {
    .cbja-card { padding: 20px !important; }
    .cbja-form-row { grid-template-columns: 1fr !important; gap: 18px !important; }
    .cbja-settings-block form > .cbja-btn { align-self: stretch !important; text-align: center !important; }
    .cbja-pref-row { align-items: center !important; }
}

/* ══════════════════════════════════════════════════════════════
   CONTENU WOOCOMMERCE (détail de commande, adresses, paiements)
   Rendu par WooCommerce : on l'habille aux couleurs du compte.
   ══════════════════════════════════════════════════════════════ */
.cbja-back-link {
    font-size: 14px !important;
    color: var(--cbja-muted) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.cbja-back-link:hover { color: var(--cbja-text) !important; }

.cbja-endpoint { font-size: 14.5px !important; }
.cbja-endpoint p { margin: 0 0 14px !important; }
.cbja-endpoint h2,
.cbja-endpoint h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--cbja-text) !important;
    margin: 24px 0 14px !important;
    padding: 0 !important;
}
.cbja-endpoint h2:first-child,
.cbja-endpoint h3:first-child { margin-top: 0 !important; }

.cbja-endpoint table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 0 18px !important;
    font-size: 14px !important;
}
.cbja-endpoint table th,
.cbja-endpoint table td {
    padding: 12px 10px !important;
    border-bottom: 1px solid var(--cbja-border-soft) !important;
    text-align: left !important;
    vertical-align: top !important;
}
.cbja-endpoint table th {
    font-weight: 600 !important;
    color: var(--cbja-muted) !important;
}
.cbja-endpoint table tfoot th,
.cbja-endpoint table tfoot td { border-bottom: none !important; }
.cbja-endpoint table tfoot tr:last-child th,
.cbja-endpoint table tfoot tr:last-child td {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--cbja-text) !important;
    border-top: 1px solid var(--cbja-border) !important;
}
.cbja-endpoint td.product-name a { color: var(--cbja-text) !important; text-decoration: none !important; font-weight: 600 !important; }
.cbja-endpoint .wc-item-meta,
.cbja-endpoint .wc-item-meta li {
    list-style: none !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    color: var(--cbja-muted) !important;
}
.cbja-endpoint .wc-item-meta strong { font-weight: 500 !important; }

.cbja-endpoint address {
    font-style: normal !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}
.cbja-endpoint .woocommerce-columns {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 22px !important;
}
.cbja-endpoint .woocommerce-column__title { font-size: 14px !important; }

.cbja-endpoint .button,
.cbja-endpoint .woocommerce-Button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    border: none !important;
    border-radius: 999px !important;
    background: var(--cbja-pink) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.cbja-endpoint .button:hover { background: var(--cbja-pink-hover) !important; color: #fff !important; }

.cbja-endpoint .woocommerce-order-details,
.cbja-endpoint .woocommerce-customer-details { margin: 0 !important; }

/* ══════════════════════════════════════════════════════════════
   DÉTAIL D'UNE COMMANDE
   ══════════════════════════════════════════════════════════════ */
.cbja-endpoint--bare { padding: 0 !important; border: none !important; background: none !important; }

.cbja-order { display: flex !important; flex-direction: column !important; gap: 20px !important; }

/* En-tête */
.cbja-order__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 20px 24px !important;
    border: 1px solid var(--cbja-border) !important;
    border-radius: var(--cbja-radius) !important;
    background: var(--cbja-pink-light) !important;
}
.cbja-order__id { display: flex !important; flex-direction: column !important; gap: 3px !important; }
.cbja-order__num { font-size: 17px !important; font-weight: 700 !important; color: var(--cbja-text) !important; }
.cbja-order__date { font-size: 13.5px !important; color: var(--cbja-muted) !important; }

/* Colonnes */
.cbja-order__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
}
@media (max-width: 900px) {
    .cbja-order__grid { grid-template-columns: 1fr !important; }
}
.cbja-order__side { display: flex !important; flex-direction: column !important; gap: 20px !important; }

.cbja-order__panel {
    padding: 24px !important;
    border: 1px solid var(--cbja-border) !important;
    border-radius: var(--cbja-radius) !important;
    background: var(--cbja-card-bg) !important;
}
.cbja-order__title {
    margin: 0 0 18px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--cbja-border-soft) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--cbja-text) !important;
}

/* Articles */
.cbja-order__items { display: flex !important; flex-direction: column !important; gap: 16px !important; }

.cbja-order-line { display: flex !important; align-items: center !important; gap: 14px !important; }

.cbja-order-line__thumb {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 62px !important;
    height: 62px !important;
    border-radius: 10px !important;
    border: 1px solid var(--cbja-border-soft) !important;
    background: #F5F3F1 !important;
}
.cbja-order-line__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 9px !important;
    display: block !important;
    margin: 0 !important;
}
.cbja-order-line__qty {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    min-width: 21px !important;
    height: 21px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: var(--cbja-pink) !important;
    color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cbja-order-line__body { flex: 1 1 auto !important; min-width: 0 !important; }
.cbja-order-line__name {
    display: block !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--cbja-text) !important;
    text-decoration: none !important;
}
a.cbja-order-line__name:hover { color: var(--cbja-pink) !important; }
.cbja-order-line__meta {
    display: block !important;
    margin-top: 3px !important;
    font-size: 12.5px !important;
    color: var(--cbja-muted) !important;
}
.cbja-order-line__meta p,
.cbja-order-line__meta .wc-item-meta,
.cbja-order-line__meta .wc-item-meta li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.cbja-order-line__meta .wc-item-meta strong { font-weight: 500 !important; }
.cbja-order-line__price {
    flex: 0 0 auto !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.cbja-order__note {
    margin: 20px 0 0 !important;
    padding: 13px 15px !important;
    border-radius: 10px !important;
    background: var(--cbja-pink-light) !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
}

/* Totaux */
.cbja-order__totals { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.cbja-order__total-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 14px !important;
    font-size: 14px !important;
}
.cbja-order__total-row > span { color: var(--cbja-muted) !important; }
.cbja-order__total-row > strong { font-weight: 500 !important; text-align: right !important; }
.cbja-order__total-row.is-final {
    margin-top: 6px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--cbja-border-soft) !important;
}
.cbja-order__total-row.is-final > span { font-size: 15px !important; font-weight: 700 !important; color: var(--cbja-text) !important; }
.cbja-order__total-row.is-final > strong { font-size: 18px !important; font-weight: 700 !important; }

.cbja-order__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
}
.cbja-order__actions .cbja-btn { flex: 1 1 auto !important; text-align: center !important; justify-content: center !important; }

/* Blocs livraison / facturation */
.cbja-order__block { margin-bottom: 18px !important; }
.cbja-order__block:last-child { margin-bottom: 0 !important; }
.cbja-order__label {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--cbja-muted) !important;
}
.cbja-order__block address {
    font-style: normal !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--cbja-text) !important;
}

@media (max-width: 600px) {
    .cbja-order__panel { padding: 18px !important; }
    .cbja-order__head { padding: 16px 18px !important; }
    .cbja-order-line__thumb { width: 52px !important; height: 52px !important; }
}

/* ══════════════════════════════════════════════════════════════
   DÉTAIL DE COMMANDE — RENDU NATIF WOOCOMMERCE

   Filet de sécurité : si un thème ou une extension court-circuite
   notre gabarit, WooCommerce affiche son propre tableau. On l'habille
   donc aux mêmes codes, pour qu'il reste présentable en toutes
   circonstances.
   ══════════════════════════════════════════════════════════════ */
.cbja-content .woocommerce-order-details,
.cbja-content .woocommerce-customer-details,
.cbja-content .woocommerce-order-downloads {
    margin: 0 0 22px !important;
    padding: 26px !important;
    border: 1px solid var(--cbja-border) !important;
    border-radius: var(--cbja-radius) !important;
    background: var(--cbja-card-bg) !important;
}

.cbja-content .woocommerce-order-details__title,
.cbja-content .woocommerce-column__title,
.cbja-content .woocommerce-order-downloads__title {
    margin: 0 0 18px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--cbja-border-soft) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--cbja-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ── Tableau des articles ─────────────────────────────────── */
.cbja-content table.order_details,
.cbja-content table.woocommerce-table--order-details {
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-collapse: collapse !important;
    font-size: 14.5px !important;
    background: none !important;
}
.cbja-content table.order_details thead { display: none !important; } /* en-têtes « Produit / Total » superflus */

.cbja-content table.order_details tbody td,
.cbja-content table.order_details tbody th {
    padding: 16px 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--cbja-border-soft) !important;
    background: none !important;
    vertical-align: top !important;
}
.cbja-content table.order_details tbody tr:last-child td { border-bottom: none !important; }

.cbja-content table.order_details td.product-name { width: 70% !important; }
.cbja-content table.order_details td.product-name > a {
    color: var(--cbja-text) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.cbja-content table.order_details td.product-name > a:hover { color: var(--cbja-pink) !important; }

/* Quantité en pastille plutôt qu'en « × 1 » brut */
.cbja-content table.order_details .product-quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    margin-left: 8px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: var(--cbja-pink-light) !important;
    color: var(--cbja-pink) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
}

/* Options de personnalisation */
.cbja-content table.order_details .wc-item-meta {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.cbja-content table.order_details .wc-item-meta li {
    margin: 0 0 2px !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: 12.5px !important;
    color: var(--cbja-muted) !important;
    display: flex !important;
    gap: 5px !important;
}
.cbja-content table.order_details .wc-item-meta li p { margin: 0 !important; display: inline !important; }
.cbja-content table.order_details .wc-item-meta strong {
    font-weight: 500 !important;
    color: var(--cbja-muted) !important;
}

.cbja-content table.order_details td.product-total {
    text-align: right !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
}

/* ── Totaux ───────────────────────────────────────────────── */
.cbja-content table.order_details tfoot { border-top: 1px solid var(--cbja-border) !important; }
.cbja-content table.order_details tfoot th,
.cbja-content table.order_details tfoot td {
    padding: 11px 0 !important;
    border: none !important;
    background: none !important;
    font-size: 14px !important;
}
.cbja-content table.order_details tfoot th {
    text-align: left !important;
    font-weight: 400 !important;
    color: var(--cbja-muted) !important;
}
.cbja-content table.order_details tfoot td {
    text-align: right !important;
    font-weight: 500 !important;
    color: var(--cbja-text) !important;
}
.cbja-content table.order_details tfoot tr:last-child th,
.cbja-content table.order_details tfoot tr:last-child td {
    padding-top: 16px !important;
    border-top: 1px solid var(--cbja-border-soft) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--cbja-text) !important;
}

/* ── Adresses ─────────────────────────────────────────────── */
.cbja-content .woocommerce-customer-details .woocommerce-columns--addresses,
.cbja-content .woocommerce-columns {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 24px !important;
    margin: 0 !important;
}
.cbja-content .woocommerce-column { margin: 0 !important; padding: 0 !important; }
.cbja-content .woocommerce-customer-details address {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--cbja-text) !important;
}
.cbja-content .woocommerce-customer-details--phone,
.cbja-content .woocommerce-customer-details--email {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    color: var(--cbja-muted) !important;
}

/* ── Bandeau d'état de commande (WooCommerce) ─────────────── */
.cbja-content .woocommerce-order-overview,
.cbja-content ul.order_details {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 18px !important;
    margin: 0 0 22px !important;
    padding: 22px 26px !important;
    list-style: none !important;
    border: 1px solid var(--cbja-border) !important;
    border-radius: var(--cbja-radius) !important;
    background: var(--cbja-pink-light) !important;
}
.cbja-content ul.order_details li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--cbja-muted) !important;
    float: none !important;
}
.cbja-content ul.order_details li strong {
    display: block !important;
    margin-top: 4px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--cbja-text) !important;
}

/* Messages WooCommerce dans le compte */
.cbja-content .woocommerce-info,
.cbja-content .woocommerce-message,
.cbja-content .woocommerce-error {
    margin: 0 0 20px !important;
    padding: 15px 18px !important;
    border: 1px solid var(--cbja-pink-border) !important;
    border-radius: var(--cbja-radius) !important;
    background: var(--cbja-pink-light) !important;
    color: var(--cbja-text) !important;
    font-size: 14px !important;
    list-style: none !important;
}
.cbja-content .woocommerce-error {
    border-color: #F0CDCD !important;
    background: #FDF2F2 !important;
    color: #A93B38 !important;
}
.cbja-content .woocommerce-info::before,
.cbja-content .woocommerce-message::before,
.cbja-content .woocommerce-error::before { display: none !important; }

@media (max-width: 600px) {
    .cbja-content .woocommerce-order-details,
    .cbja-content .woocommerce-customer-details,
    .cbja-content .woocommerce-order-downloads { padding: 18px !important; }
    .cbja-content ul.order_details { padding: 18px !important; }
}

/* ── Squelette des favoris ────────────────────────────────────
   Affiché uniquement quand le serveur ignore encore la liste
   (cookie absent). Évite le clignotement « aucun favori » puis
   apparition des favoris. */

/* La visibilité passe par l'attribut « hidden ». Un style en ligne
   display:none perdrait contre le « display: grid !important » de la
   grille : c'est ce qui laissait le squelette affiché sous les favoris. */
.cbja-favoris-grid[hidden],
.cbja-favoris-skeleton[hidden],
[data-cbja-favoris-empty][hidden] {
    display: none !important;
}

.cbja-favoris-skeleton {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 16px !important;
}

.cbja-favoris-skeleton span {
    display: block !important;
    aspect-ratio: 1 !important;
    border-radius: 12px !important;
    background: linear-gradient(90deg, #F1EDE9 25%, #E7E0D9 37%, #F1EDE9 63%) !important;
    background-size: 400% 100% !important;
    animation: cbja-shimmer 1.3s ease infinite !important;
}
@keyframes cbja-shimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .cbja-favoris-skeleton span { animation: none !important; }
}
