/* ============================================
   DSI Landing Page - Pricing Tiers Styles
   Version V4.2-insertpanierjson-tiers1
   - Badges paliers sous chaque produit
   - Hint d'incitation sous le champ quantité
   ============================================ */

/* Libellé palier sous le produit */
.ds-tier-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #5c514b;
    background: linear-gradient(90deg, #fff8e1 0%, #fff3d6 100%);
    border: 1px solid #ffd687;
    border-radius: 8px;
    padding: 6px 10px;
    margin: 8px 0;
    font-weight: 500;
}

.ds-tier-label i {
    color: #d56400;
    flex-shrink: 0;
}

/* Hint d'incitation sous le champ quantité */
.ds-qty-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.75rem;
    line-height: 1.4;
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 8px;
    font-weight: 600;
    animation: dsHintFade 0.3s ease-in;
}

.ds-qty-hint.hidden {
    display: none;
}

/* Variante "incitation" - jaune/ambre */
.ds-qty-hint--incite {
    background: #fff8e1;
    border: 1px solid #ffd687;
    color: #b54708;
}

.ds-qty-hint--incite i {
    color: #d56400;
}

/* Variante "actif" - vert (palier atteint) */
.ds-qty-hint--active {
    background: #ecfdf5;
    border: 1px solid #86efac;
    color: #166534;
}

.ds-qty-hint--active i {
    color: #16a34a;
}

@keyframes dsHintFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Mode sombre */
body.dark-mode .ds-tier-label {
    background: rgba(213, 100, 0, 0.15);
    border-color: rgba(245, 124, 0, 0.4);
    color: #ffd687;
}

body.dark-mode .ds-qty-hint--incite {
    background: rgba(213, 100, 0, 0.15);
    border-color: rgba(245, 124, 0, 0.4);
    color: #ffd687;
}

body.dark-mode .ds-qty-hint--active {
    background: rgba(22, 163, 74, 0.15);
    border-color: rgba(22, 163, 74, 0.4);
    color: #86efac;
}