/* ============================================================
   Commerce Opus — Re-thème des pages marketing (blog/*)
   Chargé APRÈS static/blog/style.css : repeint le thème bleu du
   template Cruip en violet/orange Opus, sans toucher au DOM.
   Palette : violet #6c3fa4 / #56309c / #43217c — orange #f7941e
   ============================================================ */

/* ---------- Boutons dégradés (Register, CTA…) ---------- */
.bg-gradient-to-t.from-blue-600 {
    background-image: linear-gradient(to top, #56309c, #7c4dbe) !important;
}
.bg-gradient-to-t.from-blue-600:hover {
    background-image: linear-gradient(to top, #43217c, #6c3fa4) !important;
}

/* ---------- Halos décoratifs du hero ---------- */
.bg-gradient-to-tr.from-blue-500 {
    background-image: linear-gradient(to top right, #7c4dbe, transparent) !important;
}
.bg-gradient-to-tr.from-blue-500.to-gray-900 {
    background-image: linear-gradient(to top right, #7c4dbe, #241a3e) !important;
}
.bg-gradient-to-r.from-blue-500 {
    background-image: linear-gradient(to right, #6c3fa4, #f7941e) !important;
}

/* Glow du footer */
.border-blue-700 { border-color: #6c3fa4 !important; }

/* ---------- Textes bleus -> violet ---------- */
.text-blue-500,
.text-blue-600,
.text-blue-700 { color: #6c3fa4 !important; }
.text-blue-300 { color: #d9c8f2 !important; }
.hover\:text-blue-400:hover { color: #9b73d3 !important; }
.hover\:text-blue-600:hover { color: #56309c !important; }

/* ---------- Fonds bleus -> violet ---------- */
.bg-blue-500,
.bg-blue-600,
.bg-blue-700 { background-color: #6c3fa4 !important; }
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover { background-color: #56309c !important; }
.border-blue-500 { border-color: #6c3fa4 !important; }
.bg-blue-50 { background-color: #f6f2fc !important; }
.bg-blue-100 { background-color: #ece4f8 !important; }
.focus\:ring-blue-600:focus { --tw-ring-color: rgba(108, 63, 164, 0.35) !important; }

/* ---------- Violets Tailwind -> violet Opus exact ---------- */
.bg-purple-600,
.bg-purple-700 { background-color: #6c3fa4 !important; }
.hover\:bg-purple-700:hover,
.hover\:bg-purple-800:hover { background-color: #56309c !important; }
.text-purple-500,
.text-purple-600 { color: #6c3fa4 !important; }
.focus\:ring-purple-300:focus,
.focus\:ring-purple-500:focus,
.focus\:ring-purple-800:focus { --tw-ring-color: rgba(108, 63, 164, 0.35) !important; }

/* ---------- Verts -> violet (cohérence marque, comme les boutiques) ---------- */
.text-green-500,
.text-green-600 { color: #6c3fa4 !important; }
.text-green-700 { color: #56309c !important; }
.bg-green-500 { background-color: #6c3fa4 !important; }
.hover\:bg-green-600:hover { background-color: #56309c !important; }
.bg-green-100 { background-color: #ece4f8 !important; }
.border-green-500 { border-color: #6c3fa4 !important; }

/* ---------- Jaunes ---------- */
.text-yellow-500 { color: #f5a623 !important; }
.text-yellow-700 { color: #9a5b00 !important; }

/* ============================================================
   Bandeau « Espace commerçants » (univers /vendre, pricing, auth)
   ============================================================ */
.opus-sellerbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #2a1653;
    color: #dcc9f5;
    font-size: .78rem;
    font-weight: 600;
    padding: .4rem 1rem;
    min-height: 2.3rem;
}
.opus-sellerbar-brand {
    color: #ffffff;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.opus-sellerbar-brand span { color: #f7941e; }
.opus-sellerbar-badge {
    background: #f7941e;
    color: #ffffff;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 999px;
    padding: .18rem .7rem;
    white-space: nowrap;
}
.opus-sellerbar-tag {
    color: #cdb6ee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 767px) { .opus-sellerbar-tag { display: none; } }
.opus-sellerbar-back {
    margin-left: auto;
    color: #f7c98c !important;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}
.opus-sellerbar-back:hover { color: #f7941e !important; }

/* Décaler le header flottant sous le bandeau */
header.fixed.w-full { top: 2.8rem !important; }
@media (min-width: 768px) { header.fixed.w-full { top: 3.6rem !important; } }