/* ═══════════════════════════════════════════════════════
   CamiBijoux – Mot de passe oublié

   Carte horizontale : un panneau beige à gauche qui porte le
   contexte, le formulaire à droite. En dessous de 760px de large,
   les deux se superposent.

   !important systématique, comme dans les autres plugins : il
   faut passer devant Hello Elementor et les réglages de widget
   d'Elementor.
   ═══════════════════════════════════════════════════════ */

.cbpw {
    --cbpw-text:    #28211f;
    --cbpw-muted:   #8f817b;
    --cbpw-border:  #E9E0D8;
    --cbpw-beige:   #F6F0EA;
    --cbpw-beige-2: #FDF8F4;
    --cbpw-brown:   #3A2317;
    --cbpw-brown-h: #24150D;
    --cbpw-rose-bg: #F9E8F1;
    --cbpw-rose:    #B96685;
    --cbpw-radius:  18px;
    --cbpw-field-h: 54px;

    /* Pas de container-type ici.
       Il pose « contain: inline-size », qui annule la largeur
       intrinsèque de l'élément. Dans un conteneur Elementor en flex
       — où la largeur d'un widget se déduit de son contenu — le bloc
       se réduisait alors à un trait d'un pixel de large.
       Les deux colonnes passent donc par une requête de média. */
    display: block !important;
    width: 100% !important;
    max-width: 880px !important;
    margin: 0 auto !important;

    /* Dans un parent en flex, la base doit venir de la ligne et non
       du contenu, sinon on retombe sur le même effondrement. */
    flex: 1 1 100% !important;
    align-self: stretch !important;
    min-width: 0 !important;
    color: var(--cbpw-text) !important;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    box-sizing: border-box !important;
}

.cbpw *,
.cbpw *::before,
.cbpw *::after { box-sizing: border-box !important; }

.cbpw__card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
    border: 1px solid var(--cbpw-border) !important;
    border-radius: var(--cbpw-radius) !important;
    background: #fff !important;
    box-shadow: 0 18px 44px -30px rgba(58, 35, 23, .45) !important;
}

/* ── Panneau de gauche ───────────────────────────────── */
.cbpw__aside {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 28px 28px 24px !important;
    background: var(--cbpw-beige) !important;
    border-bottom: 1px solid var(--cbpw-border) !important;
}
.cbpw__emoji {
    font-size: 30px !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
}
.cbpw__aside-title {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--cbpw-text) !important;
}
.cbpw__aside-text {
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--cbpw-muted) !important;
}

/* ── Panneau de droite ───────────────────────────────── */
.cbpw__panel { padding: 28px !important; }

.cbpw__back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
    color: var(--cbpw-muted) !important;
    text-decoration: none !important;
}
.cbpw__back:hover { color: var(--cbpw-text) !important; }

.cbpw__title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--cbpw-text) !important;
}
.cbpw__intro {
    margin: 0 0 22px !important;
    font-size: 14.5px !important;
    color: var(--cbpw-muted) !important;
}

.cbpw__alert {
    margin: 0 0 18px !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    background: var(--cbpw-rose-bg) !important;
    color: var(--cbpw-rose) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

/* Diagnostic d'envoi — n'apparaît que pour les administrateurs. */
.cbpw__debug {
    margin: 0 0 18px !important;
    padding: 11px 14px !important;
    border: 1px dashed var(--cbpw-border) !important;
    border-radius: 12px !important;
    background: var(--cbpw-beige) !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--cbpw-muted) !important;
    word-break: break-word !important;
}
.cbpw__debug strong { color: var(--cbpw-text) !important; }

/* ── Champs ──────────────────────────────────────────── */
.cbpw__form { margin: 0 !important; }

.cbpw__label {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cbpw-text) !important;
}

.cbpw__field {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 16px !important;
}
.cbpw__icon {
    position: absolute !important;
    left: 15px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    opacity: .75 !important;
}
.cbpw__field input {
    width: 100% !important;
    height: var(--cbpw-field-h) !important;
    min-height: var(--cbpw-field-h) !important;
    margin: 0 !important;
    padding: 0 46px 0 44px !important;
    border: 1px solid var(--cbpw-border) !important;
    border-radius: 12px !important;
    background: var(--cbpw-beige-2) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    color: var(--cbpw-text) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .13s ease, background .13s ease !important;
}
.cbpw__field input::placeholder { color: #b7aca6 !important; }
.cbpw__field input:focus {
    border-color: var(--cbpw-brown) !important;
    background: #fff !important;
}

.cbpw__eye {
    position: absolute !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background: none !important;
    font-size: 15px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    opacity: .6 !important;
}
.cbpw__eye:hover { opacity: 1 !important; }

.cbpw__hint {
    margin: -6px 0 14px !important;
    font-size: 13px !important;
    color: var(--cbpw-muted) !important;
}
.cbpw__hint--ok { color: #3E7C58 !important; }
.cbpw__hint--ko { color: var(--cbpw-rose) !important; }
/* Le masquage doit être en !important : les règles ci-dessus le sont
   aussi, et l'attribut hidden perdrait la main sans cela. */
.cbpw__hint[hidden] { display: none !important; }

/* ── Boutons ─────────────────────────────────────────── */
.cbpw__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 4px 0 0 !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 50px !important;
    background: var(--cbpw-brown) !important;
    background-image: none !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: background .13s ease !important;
}
.cbpw__btn:hover { background: var(--cbpw-brown-h) !important; color: #fff !important; }

.cbpw__btn--ghost {
    background: transparent !important;
    border: 1px solid var(--cbpw-border) !important;
    color: var(--cbpw-text) !important;
}
.cbpw__btn--ghost:hover { background: var(--cbpw-beige) !important; color: var(--cbpw-text) !important; }

.cbpw__foot {
    margin: 18px 0 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    color: var(--cbpw-muted) !important;
}
.cbpw__foot a {
    color: var(--cbpw-rose) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.cbpw__foot a:hover { text-decoration: underline !important; }

.cbpw__legal {
    margin: 14px 0 0 !important;
    text-align: center !important;
    font-size: 12.5px !important;
    color: var(--cbpw-muted) !important;
}

/* ═══════════════════════════════════════════════════════
   DEUX COLONNES
   ═══════════════════════════════════════════════════════ */
@media (min-width: 760px) {
    .cbpw__card { grid-template-columns: 0.85fr 1fr !important; }

    .cbpw__aside {
        padding: 34px 30px !important;
        border-bottom: none !important;
        border-right: 1px solid var(--cbpw-border) !important;
    }
    .cbpw__emoji { font-size: 34px !important; }
    .cbpw__panel { padding: 36px 34px !important; }
    .cbpw__title { font-size: 28px !important; }
}

/* Très petits écrans : on récupère de la largeur utile. */
@media (max-width: 380px) {
    .cbpw__aside { padding: 22px 20px !important; }
    .cbpw__panel { padding: 22px 20px !important; }
    .cbpw__title { font-size: 23px !important; }
}