/* ================================================================
   CamiBijoux – Retours & Échanges
   Palette commune : marron #3A2317, beiges, touche de rose.
   ================================================================ */

.cbrt {
    --cbrt-dark:   #3A2317;
    --cbrt-text:   #4A3C33;
    --cbrt-muted:  #8A7A6C;
    --cbrt-card:   #FBF7F3;
    --cbrt-field:  #F3EBE2;
    --cbrt-border: #E3D9CE;
    --cbrt-rose:   #C97891;
    --cbrt-rose-d: #B96685;
    --cbrt-radius: 14px;

    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    font-family: inherit !important;
    color: var(--cbrt-text) !important;
    box-sizing: border-box !important;
}
.cbrt *, .cbrt *::before, .cbrt *::after { box-sizing: border-box !important; }

/* L'attribut hidden doit l'emporter sur les display ci-dessous.
   On annule aussi ombre et transformation : un élément animé crée une
   couche de composition que certains navigateurs continuent de peindre
   après le passage en display:none, laissant un fantôme de bordure et
   d'ombre à l'emplacement des cartes. */
.cbrt [hidden] {
    display: none !important;
    box-shadow: none !important;
    transform: none !important;
    border-color: transparent !important;
}

/* ── Choix du type ───────────────────────────────────── */
.cbrt-choice {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.cbrt-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 30px 32px !important;
    background: var(--cbrt-card) !important;
    border: 1px solid var(--cbrt-border) !important;
    border-radius: var(--cbrt-radius) !important;
    text-align: left !important;
    font-family: inherit !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: border-color .2s, transform .2s, box-shadow .2s !important;
}
/* Survol réservé aux appareils à pointeur : au toucher, l'état reste
   « collé » après le clic et la carte gardait son relief.
   Pas de translation non plus — c'est elle qui promouvait la carte sur
   une couche de composition à part, à l'origine des résidus d'affichage
   au moment de la masquer. */
@media (hover: hover) {
    .cbrt-card:hover {
        border-color: var(--cbrt-rose) !important;
        background: #FDFAF7 !important;
        box-shadow: 0 8px 22px rgba(58, 35, 23, .07) !important;
    }
}

/* Les cartes sont des <button> : la plupart des thèmes leur imposent
   « white-space: nowrap » et une largeur intrinsèque, ce qui empêchait
   les textes de revenir à la ligne et les faisait déborder du cadre.
   On rétablit un comportement de bloc normal pour tout le contenu. */
.cbrt-card,
.cbrt-card * {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.cbrt-card__icon { color: var(--cbrt-rose) !important; line-height: 0 !important; }
.cbrt-card__icon svg { width: 26px !important; height: 26px !important; }

.cbrt-card__title {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--cbrt-dark) !important;
    line-height: 1.25 !important;
}

.cbrt-card__text {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: var(--cbrt-muted) !important;
}

.cbrt-card__points {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
    margin-top: 8px !important;
    width: 100% !important;
}
.cbrt-card__point {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--cbrt-text) !important;
}
.cbrt-card__point svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    margin-top: 3px !important;
    color: var(--cbrt-rose) !important;
}

.cbrt-card__more {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 14px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--cbrt-dark) !important;
}
.cbrt-card__more svg { width: 16px !important; height: 16px !important; transition: transform .2s !important; }
.cbrt-card:hover .cbrt-card__more svg { transform: translateX(4px) !important; }

/* ── Panneau formulaire ──────────────────────────────── */
.cbrt-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    color: var(--cbrt-text) !important;
    cursor: pointer !important;
}
.cbrt-back svg { width: 16px !important; height: 16px !important; }
.cbrt-back:hover { color: var(--cbrt-rose-d) !important; }

.cbrt-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: start !important;
}

.cbrt-box {
    background: var(--cbrt-card) !important;
    border: 1px solid var(--cbrt-border) !important;
    border-radius: var(--cbrt-radius) !important;
    padding: 30px 32px !important;
}

.cbrt-title {
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 27px !important;
    font-weight: 600 !important;
    color: var(--cbrt-dark) !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.cbrt-sub {
    margin: 0 0 24px !important;
    font-size: 14px !important;
    color: var(--cbrt-muted) !important;
}

/* ── Champs ──────────────────────────────────────────── */
.cbrt-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.cbrt-field {
    display: block !important;
    margin: 0 0 18px !important;
}
.cbrt-row .cbrt-field { margin-bottom: 18px !important; }

.cbrt-label {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--cbrt-dark) !important;
}

.cbrt-form input[type="text"],
.cbrt-form input[type="email"],
.cbrt-form input[type="tel"],
.cbrt-form input[type="date"],
.cbrt-form textarea {
    width: 100% !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    background: var(--cbrt-field) !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    color: var(--cbrt-dark) !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color .18s, background .18s !important;
}
.cbrt-form textarea { resize: vertical !important; min-height: 110px !important; line-height: 1.6 !important; }
/* Safari donne une largeur intrinsèque aux champs date, qui débordait
   de sa colonne sur les grilles étroites. */
.cbrt-form input[type="date"] { min-width: 0 !important; max-width: 100% !important; }

.cbrt-form input::placeholder,
.cbrt-form textarea::placeholder { color: #A8947F !important; opacity: 1 !important; }

.cbrt-form input:focus,
.cbrt-form textarea:focus {
    border-color: var(--cbrt-rose) !important;
    background: #FDFAF7 !important;
}

/* ── Motifs ──────────────────────────────────────────── */
.cbrt-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.cbrt-pill { display: inline-flex !important; margin: 0 !important; }
.cbrt-pill input {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}
.cbrt-pill span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 11px 20px !important;
    background: transparent !important;
    border: 1px solid var(--cbrt-border) !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    color: var(--cbrt-text) !important;
    cursor: pointer !important;
    transition: border-color .18s, background .18s, color .18s !important;
}
.cbrt-pill span:hover { border-color: var(--cbrt-rose) !important; }
.cbrt-pill input:checked + span {
    background: var(--cbrt-rose) !important;
    border-color: var(--cbrt-rose) !important;
    color: #fff !important;
}
/* Repère clavier : la case native étant masquée, le contour se
   pose sur la pastille elle-même. */
.cbrt-pill input:focus-visible + span {
    outline: 2px solid var(--cbrt-dark) !important;
    outline-offset: 2px !important;
}

/* ── Piège à robots ──────────────────────────────────── */
.cbrt-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ── Erreur et envoi ─────────────────────────────────── */
.cbrt-error {
    margin: 0 0 16px !important;
    padding: 11px 16px !important;
    background: #FDF2F2 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: #A93226 !important;
}

.cbrt-submit {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    margin: 4px 0 0 !important;
    padding: 0 32px !important;
    background: var(--cbrt-rose) !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .2s !important;
}
.cbrt-submit:hover { background: var(--cbrt-rose-d) !important; color: #fff !important; }

.cbrt-form.is-loading .cbrt-submit { pointer-events: none !important; }
.cbrt-form.is-loading .cbrt-submit__label { opacity: 0 !important; }

.cbrt-submit__spinner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 17px !important;
    height: 17px !important;
    margin: -8.5px 0 0 -8.5px !important;
    border: 2px solid rgba(255, 255, 255, .35) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    opacity: 0 !important;
}
.cbrt-form.is-loading .cbrt-submit__spinner {
    opacity: 1 !important;
    animation: cbrt-spin .7s linear infinite !important;
}
@keyframes cbrt-spin { to { transform: rotate(360deg); } }

/* ── Colonne latérale ────────────────────────────────── */
.cbrt-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
}

.cbrt-side__title {
    margin: 0 0 16px !important;
    padding: 0 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    color: var(--cbrt-dark) !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cbrt-steps {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    counter-reset: none !important;
}
.cbrt-steps li {
    display: flex !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--cbrt-text) !important;
}
.cbrt-steps__num {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    color: var(--cbrt-rose) !important;
    padding-top: 2px !important;
}

.cbrt-info {
    display: flex !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--cbrt-text) !important;
}
.cbrt-info:last-child { margin-bottom: 0 !important; }
.cbrt-info__icon { flex: 0 0 auto !important; color: var(--cbrt-rose) !important; line-height: 0 !important; padding-top: 3px !important; }
.cbrt-info__icon svg { width: 17px !important; height: 17px !important; }
.cbrt-info a { color: var(--cbrt-text) !important; text-decoration: none !important; }
.cbrt-info a:hover { color: var(--cbrt-rose-d) !important; text-decoration: underline !important; }

.cbrt-note {
    margin: 0 0 12px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--cbrt-text) !important;
}
.cbrt-note:last-child { margin-bottom: 0 !important; }

/* ── Confirmation ────────────────────────────────────── */
.cbrt-done {
    max-width: 620px !important;
    margin: 0 auto !important;
    padding: 44px 40px !important;
    background: var(--cbrt-card) !important;
    border: 1px solid var(--cbrt-border) !important;
    border-radius: var(--cbrt-radius) !important;
    text-align: center !important;
}

.cbrt-done__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 18px !important;
    border-radius: 50% !important;
    background: var(--cbrt-rose) !important;
    color: #fff !important;
    font-size: 25px !important;
    line-height: 1 !important;
}

.cbrt-done__title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    color: var(--cbrt-dark) !important;
    line-height: 1.25 !important;
}

.cbrt-done__text {
    margin: 0 0 24px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: var(--cbrt-text) !important;
}

.cbrt-done__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    padding: 0 30px !important;
    background: var(--cbrt-dark) !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: background .2s !important;
}
.cbrt-done__btn:hover { background: #24150D !important; color: #fff !important; }

.cbrt-done__hint {
    margin: 16px 0 0 !important;
    font-size: 13px !important;
    color: var(--cbrt-muted) !important;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
    .cbrt-choice { grid-template-columns: 1fr !important; gap: 18px !important; }
    .cbrt-grid   { grid-template-columns: 1fr !important; }
    .cbrt-box    { padding: 26px 22px !important; }
    .cbrt-title  { font-size: 24px !important; }
}

@media (max-width: 560px) {
    .cbrt-row    { grid-template-columns: 1fr !important; gap: 0 !important; }
    .cbrt-box    { padding: 22px 18px !important; }
    .cbrt-card   { padding: 24px 20px !important; }
    .cbrt-submit { width: 100% !important; }
    .cbrt-done   { padding: 34px 22px !important; }
}

/* Avertissement de délai sous le champ date */
.cbrt-warn {
    display: block !important;
    margin: 8px 0 0 !important;
    padding: 10px 14px !important;
    background: #FDF3E7 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #8A5A1E !important;
}