/* Bannières publicitaires — partagé entre le site et l'aperçu du back-office.
   Couleurs pilotées par les paramètres : --brand-primary, --brand-dark, --brand-accent. */
.promo-banner {
    --banner-bg: var(--brand-dark, #151311);
    --banner-ink: #f6efe4;
    --banner-muted: rgba(246, 239, 228, .8);
    --banner-eyebrow: var(--brand-accent, #b0802b);
    --banner-highlight: var(--brand-accent, #b0802b);
    position: relative;
    display: flex;
    align-items: center;
    min-height: 200px;
    padding: 1.25rem 1.25rem 1.5rem;
    border-radius: 1.25rem;
    overflow: hidden;
    color: var(--banner-ink);
    text-decoration: none;
    isolation: isolate;
    background-color: var(--banner-bg);
    background-image:
        radial-gradient(circle at 80% 40%, color-mix(in srgb, var(--brand-accent, #b0802b) 38%, transparent) 0, transparent 48%),
        linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .25));
}
.promo-banner:hover { color: var(--banner-ink); }
/* « Couleur principale » = fond or de la charte */
.promo-banner.theme-primary {
    --banner-bg: var(--brand-accent, #b0802b);
    --banner-ink: #151311;
    --banner-muted: rgba(21, 19, 17, .78);
    --banner-eyebrow: #151311;
    --banner-highlight: #fbf7f0;
    background-image: radial-gradient(circle at 80% 40%, rgba(255, 255, 255, .28) 0, transparent 50%);
}
.promo-banner.theme-light {
    --banner-bg: #fbf7f0;
    --banner-ink: #151311;
    --banner-muted: #6b5d4b;
    --banner-eyebrow: #8a6420;
    --banner-highlight: #8a6420;
    background-image: radial-gradient(circle at 80% 40%, rgba(255, 255, 255, .9) 0, transparent 50%);
}
.promo-banner .pb-text { position: relative; z-index: 2; width: 62%; }
.promo-banner .pb-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--banner-eyebrow); margin-bottom: .35rem; }
.promo-banner .pb-title { font-family: "Lora", Georgia, serif; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; font-size: clamp(1.3rem, 6vw, 2.9rem); margin: 0 0 .5rem; color: var(--banner-ink); }
.promo-banner .pb-highlight { display: block; color: var(--banner-highlight); }
.promo-banner .pb-subtitle { font-size: clamp(.78rem, 3.2vw, 1.05rem); color: var(--banner-muted); line-height: 1.45; margin: 0 0 .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.promo-banner .pb-btn {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--brand-accent, #b0802b); color: #151311;
    border-radius: 2rem; padding: .45rem .5rem .45rem 1rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .25);
}
.promo-banner.theme-primary .pb-btn, .promo-banner.theme-light .pb-btn { background: #151311; color: #f6efe4; }
.promo-banner .pb-btn i { font-size: 1.15rem; line-height: 1; }
.promo-banner .pb-visual { position: absolute; z-index: 1; right: 0; top: 0; bottom: 0; width: 48%; display: flex; align-items: center; justify-content: center; padding: .75rem .5rem .75rem 0; }
.promo-banner .pb-visual img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 1rem 1.25rem rgba(0, 0, 0, .35)); }
.promo-banner .pb-visual .pb-icon { font-size: clamp(4.5rem, 22vw, 9rem); color: var(--brand-accent, #b0802b); filter: drop-shadow(0 0 1.5rem color-mix(in srgb, var(--brand-accent, #b0802b) 55%, transparent)); line-height: 1; }
.promo-banner.theme-primary .pb-visual .pb-icon, .promo-banner.theme-light .pb-visual .pb-icon { color: #151311; filter: none; }
.promo-banner .pb-badge {
    position: absolute; z-index: 3; left: 58%; bottom: 1.1rem;
    width: 3.6rem; height: 3.6rem; border-radius: 50%;
    background: var(--brand-accent, #b0802b); color: #151311;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-weight: 800; font-size: .72rem; line-height: 1.05; text-transform: uppercase; padding: .3rem;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 .5rem 1rem rgba(0, 0, 0, .3);
}
.promo-banner.theme-primary .pb-badge { background: #151311; color: #f6efe4; }
.promo-banner.is-hero { min-height: 230px; }
.promo-banner.is-hero .pb-text { width: 58%; }

@media (min-width: 768px) {
    .promo-banner { padding: 2rem 2.5rem; min-height: 240px; border-radius: 1.5rem; }
    .promo-banner.is-hero { min-height: 340px; }
    .promo-banner .pb-text { width: 55%; }
    .promo-banner .pb-eyebrow { font-size: .8rem; }
    .promo-banner .pb-btn { font-size: .85rem; padding: .6rem .65rem .6rem 1.35rem; }
    .promo-banner .pb-badge { width: 5rem; height: 5rem; font-size: .95rem; left: 52%; bottom: 1.5rem; }
    .promo-banner .pb-visual { width: 45%; padding: 1.25rem 1.5rem 1.25rem 0; }
}
@media (min-width: 1200px) {
    .promo-banner.is-hero { min-height: 380px; padding: 2.5rem 3.5rem; }
}