/* ===================================================================
   🛒 TUNNEL DE VENTE - PALETTE MARRON CHOCOLAT
   ================================================================
   Date : 20 Mars 2026
   Version : 11.0 - Harmonisation complète du tunnel de vente
   
   Remplacement de TOUTES les couleurs tropicales du tunnel :
   - Pages 1-4 (capture, vente, paiement, merci)
   - Gradients, boutons, bordures, textes
=================================================================== */

/* ============================================
   BODY & BACKGROUNDS PRINCIPAUX
   ============================================ */

body {
    background: linear-gradient(135deg, #5D4E37 0%, #8B7D6B 100%) !important;
}

/* ============================================
   HEADER
   ============================================ */

.header {
    background: linear-gradient(135deg, #5D4E37 0%, #8B7D6B 100%) !important;
    color: #FFFEF9 !important;
}

/* ============================================
   BOUTONS PRINCIPAUX (SUBMIT / CTA)
   ============================================ */

.submit-btn,
.cta-button,
.confirm-button,
button[type="submit"] {
    background: linear-gradient(135deg, #C9A961 0%, #8B7D6B 100%) !important;
    color: #FFFEF9 !important;
    border: none !important;
}

.submit-btn:hover,
.cta-button:hover,
.confirm-button:hover {
    background: linear-gradient(135deg, #5D4E37 0%, #C9A961 100%) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   BOUTONS SECONDAIRES
   ============================================ */

.cta-secondary,
.btn-secondary {
    background: linear-gradient(135deg, #C9A961 0%, #8B7D6B 100%) !important;
    color: #FFFEF9 !important;
}

/* ============================================
   BADGES & LABELS
   ============================================ */

.popular-badge,
.badge,
.label {
    background: #C9A961 !important;
    border: 3px solid #C9A961 !important;
    color: #FFFEF9 !important;
}

/* ============================================
   ICÔNES & SYMBOLES
   ============================================ */

.check,
.icon-check {
    color: #5D4E37 !important;
}

.contact-icon {
    background: #5D4E37 !important;
    color: #FFFEF9 !important;
}

.social-link {
    background: #8B7D6B !important;
    color: #FFFEF9 !important;
}

/* ============================================
   FORMULAIRES & INPUTS
   ============================================ */

input:focus,
textarea:focus,
select:focus {
    border-color: #C9A961 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1) !important;
}

.form-group input {
    border: 2px solid #F5F0E8 !important;
}

.form-group input:focus {
    border-color: #C9A961 !important;
}

/* ============================================
   OPTIONS DE PAIEMENT
   ============================================ */

.payment-option input:checked + label {
    border-color: #C9A961 !important;
    background: rgba(201, 169, 97, 0.1) !important;
}

.payment-option input:focus + label {
    border-color: #C9A961 !important;
}

/* ============================================
   TEXTES & MONTANTS
   ============================================ */

.total-amount,
.price,
.amount {
    color: #5D4E37 !important;
}

/* ============================================
   LISTES & BULLET POINTS
   ============================================ */

.next-steps li::before,
.features li::before {
    border-left: 4px solid #C9A961 !important;
}

/* ============================================
   BOUTON "RETOUR SUR LE SITE"
   ============================================ */

.home-button,
.back-button {
    background: linear-gradient(135deg, #5D4E37 0%, #C9A961 100%) !important;
    color: #FFFEF9 !important;
}

.home-button:hover {
    background: linear-gradient(135deg, #C9A961 0%, #8B7D6B 100%) !important;
}

/* ============================================
   BENEFIT ITEMS & CARTES
   ============================================ */

.benefit-item {
    background: #F7FAFC !important;
    border: 1px solid rgba(93, 78, 55, 0.1) !important;
}

.benefit-item:hover {
    border-color: #C9A961 !important;
    transform: translateY(-3px) !important;
}

/* ============================================
   FOOTER TUNNEL
   ============================================ */

.footer {
    background: #F7FAFC !important;
    color: #718096 !important;
}

/* ============================================
   FORÇAGE ULTRA-AGRESSIF - INLINE STYLES
   ============================================ */

/* Forcer le remplacement de TOUS les styles inline avec couleurs tropicales */

/* Body avec gradient tropical */
body[style*="00C9A7"],
body[style*="0084FF"] {
    background: linear-gradient(135deg, #5D4E37 0%, #8B7D6B 100%) !important;
}

/* Boutons avec gradient or/orange */
button[style*="FFD700"],
button[style*="FF8C42"],
button[style*="FFA500"],
a[style*="FFD700"],
a[style*="FF8C42"] {
    background: linear-gradient(135deg, #5D4E37 0%, #C9A961 100%) !important;
    color: #FFFEF9 !important;
}

/* Bordures or */
*[style*="border"][style*="FFD700"],
*[style*="border-left"][style*="FFD700"] {
    border-color: #C9A961 !important;
}

/* Backgrounds or */
*[style*="background"][style*="FFD700"] {
    background: #C9A961 !important;
}

/* Textes verts turquoise */
*[style*="color"][style*="00C9A7"],
*[style*="color"][style*="00A389"] {
    color: #5D4E37 !important;
}

/* Backgrounds verts turquoise */
*[style*="background"][style*="00C9A7"],
*[style*="background"][style*="00A389"] {
    background: #5D4E37 !important;
}

/* Headers avec gradient tropical */
.header[style*="00C9A7"],
.header[style*="0084FF"] {
    background: linear-gradient(135deg, #5D4E37 0%, #8B7D6B 100%) !important;
}