/* ============================================================
   Commerce Opus — Re-thème des boutiques (harmonisation 2026)
   Chargé APRÈS le CDN Tailwind 2 : repeint les utilities vertes
   (ancien thème) en violet/orange Opus sans toucher au DOM ni au JS.
   Palette : violet #6c3fa4 / #56309c / #43217c — orange #f7941e
   ============================================================ */

/* ---------- Texte ---------- */
.text-green-500,
.text-green-600 { color: #6c3fa4 !important; }
.text-green-700 { color: #56309c !important; }
.text-green-800 { color: #43217c !important; }
.text-green-100 { color: #e9ddf9 !important; }
.text-green-200 { color: #dcc9f5 !important; }

.hover\:text-green-500:hover,
.hover\:text-green-600:hover,
.hover\:text-green-700:hover { color: #56309c !important; }
.hover\:text-green-800:hover { color: #2a1653 !important; }
.hover\:text-green-200:hover { color: #f7c98c !important; } /* hover navbar : accent orange doux */

/* ---------- Fonds ---------- */
.bg-green-500,
.bg-green-600 { background-color: #6c3fa4 !important; }
.hover\:bg-green-700:hover { background-color: #56309c !important; }
.bg-green-100,
.hover\:bg-green-100:hover { background-color: #ece4f8 !important; }
.bg-green-50,
.hover\:bg-green-50:hover { background-color: #f6f2fc !important; }

/* ---------- Bordures & rings ---------- */
.border-green-500,
.border-green-600,
.hover\:border-green-500:hover { border-color: #6c3fa4 !important; }
.border-green-300,
.hover\:border-green-300:hover { border-color: #b79ade !important; }
.border-green-200 { border-color: #d9c8f2 !important; }
.ring-green-200 { --tw-ring-color: #d9c8f2 !important; }
.focus\:ring-green-500:focus { --tw-ring-color: rgba(108, 63, 164, 0.35) !important; }
.focus\:border-green-500:focus { border-color: #6c3fa4 !important; }
.focus\:ring-green-300:focus { --tw-ring-color: rgba(108, 63, 164, 0.25) !important; }

/* Checkbox / radio (accent) */
input[type="checkbox"].text-green-600,
input[type="radio"].text-green-600 { color: #6c3fa4 !important; }

/* ---------- Jaunes -> orange Opus (badges) — les étoiles restent dorées ---------- */
.bg-yellow-400 { background-color: #f7941e !important; }
.bg-yellow-100 { background-color: #fdf1e0 !important; }
.text-yellow-800 { color: #9a5b00 !important; }
.text-yellow-400 { color: #f5a623 !important; }
.text-yellow-500 { color: #f5a623 !important; }
.hover\:text-yellow-400:hover { color: #f5a623 !important; }

/* ---------- Violets Tailwind -> violet Opus exact ---------- */
.text-purple-600 { color: #6c3fa4 !important; }
.text-purple-800 { color: #43217c !important; }
.bg-purple-100 { background-color: #ece4f8 !important; }

/* ---------- Gradients décoratifs ---------- */
/* CTA témoignages (vert->bleu) et blocs verts -> violet Opus */
.bg-gradient-to-r.from-green-500 {
    background-image: linear-gradient(115deg, #43217c 0%, #6c3fa4 100%) !important;
}
.bg-gradient-to-br.from-green-400 {
    background-image: linear-gradient(135deg, #8a5fc9 0%, #6c3fa4 100%) !important;
}
.bg-gradient-to-r.from-green-50 {
    background-image: linear-gradient(115deg, #f6f2fc 0%, #fdf1e0 100%) !important;
}
/* Icônes features : bleu -> orange Opus pour la variété */
.bg-gradient-to-br.from-blue-400 {
    background-image: linear-gradient(135deg, #f7a94a 0%, #e07f0a 100%) !important;
}
.bg-gradient-to-br.from-purple-400 {
    background-image: linear-gradient(135deg, #8a5fc9 0%, #56309c 100%) !important;
}
/* Fonds pastels bleus/roses des modales -> lavande Opus */
.bg-gradient-to-r.from-blue-50,
.bg-gradient-to-r.from-pink-50 {
    background-image: linear-gradient(115deg, #f6f2fc 0%, #ece4f8 100%) !important;
}

/* ---------- Bandeau plateforme Commerce Opus ---------- */
.opus-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #2a1653;
    color: #dcc9f5;
    font-size: .78rem;
    font-weight: 600;
    padding: .4rem 1rem;
    letter-spacing: .01em;
    min-height: 2.4rem;
}
.opus-topbar-brand {
    color: #ffffff !important;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}
.opus-topbar-brand span { color: #f7941e !important; }
.opus-topbar-discover {
    color: #cdb6ee !important;
    text-decoration: none;
    transition: color .15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.opus-topbar-discover:hover { color: #f7c98c !important; }
@media (max-width: 767px) { .opus-topbar-discover { display: none; } }

.opus-topbar-actions { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.opus-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #ffffff !important;
    font-weight: 700;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.opus-topbar-btn {
    border-radius: 999px;
    font-family: inherit;
    font-size: .74rem;
    font-weight: 700;
    padding: .28rem .85rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    line-height: 1.2;
}
.opus-topbar-btn.ghost {
    background: transparent;
    color: #dcc9f5 !important;
    border: 1.5px solid rgba(220, 201, 245, .45);
}
.opus-topbar-btn.ghost:hover { color: #fff !important; border-color: #fff; }
.opus-topbar-btn.solid {
    background: #f7941e;
    color: #ffffff !important;
    border: 1.5px solid #f7941e;
}
.opus-topbar-btn.solid:hover { background: #e07f0a; border-color: #e07f0a; }

/* Le bandeau s'ajoute dans la navbar fixe : compenser la hauteur du contenu */
main.pt-16 { padding-top: 6.6rem !important; }

/* La navbar défilée repasse en fond clair : le bandeau garde son fond sombre */
.navbar-modern.scrolled .opus-topbar { background: #2a1653; }
.navbar-modern.scrolled .opus-topbar,
.navbar-modern.scrolled .opus-topbar * { color: #dcc9f5 !important; }
.navbar-modern.scrolled .opus-topbar-brand { color: #fff !important; }
.navbar-modern.scrolled .opus-topbar-brand span { color: #f7941e !important; }
.navbar-modern.scrolled .opus-topbar-btn.solid { background: #f7941e; color: #fff !important; }