/* 
 * =====================================================
 * VERSION 6.0 - PALMIERS PURS SANS AUCUN TEXTE
 * =====================================================
 * FOND 100% PROPRE : Dégradé uniquement, AUCUNE image de fond
 * Palmiers : Feuilles découpées SANS le texte "Summer Sale"
 * 5 feuilles de palmiers : 4 coins + 1 supplémentaire en bas gauche
 * =====================================================
 */

/* ============================================
   1. SUPPRESSION TOTALE DES FONDS JAUNES ET IMAGES
   ============================================ */

.hero::before,
.hero-section::before,
.golden-particles,
.golden-particles::before,
.golden-particles::after {
    background: transparent !important;
    background-image: none !important;
}

/* ============================================
   2. FOND TROPICAL 100% PROPRE (AUCUNE IMAGE)
   ============================================ */

.hero-section {
    position: relative;
    background: linear-gradient(180deg,
        #FFF9F5 0%,                       /* Blanc crème */
        rgba(255, 241, 230, 0.5) 30%,     /* Pêche très léger */
        rgba(255, 235, 220, 0.4) 60%,     /* Rose pêche */
        rgba(255, 249, 245, 0.6) 100%     /* Retour crème */
    ) !important;
    overflow: hidden;
}

/* Dégradé tropical subtil (rose → turquoise) - AUCUNE IMAGE */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        rgba(255, 182, 193, 0.06) 0%,     /* Rose pastel */
        rgba(255, 160, 122, 0.05) 25%,    /* Corail */
        rgba(255, 218, 185, 0.03) 50%,    /* Pêche */
        rgba(135, 206, 235, 0.05) 75%,    /* Bleu ciel */
        rgba(64, 224, 208, 0.06) 100%     /* Turquoise */
    );
    pointer-events: none;
    z-index: 1;
}

/* Assure que le contenu est au-dessus */
.hero-content {
    position: relative;
    z-index: 100 !important;
}

/* ============================================
   3. FEUILLES DE PALMIERS DÉCOUPÉES (5 POSITIONS)
   ============================================ */

/* Coin supérieur gauche */
body::before {
    content: '';
    position: fixed;
    top: -80px;
    left: -80px;
    width: 550px;
    height: 550px;
    background: 
        radial-gradient(ellipse 200px 400px at 30% 20%, 
            rgba(46, 125, 50, 0.15) 0%, 
            transparent 40%),
        radial-gradient(ellipse 180px 350px at 25% 30%, 
            rgba(56, 142, 60, 0.12) 0%, 
            transparent 45%),
        radial-gradient(ellipse 160px 320px at 35% 25%, 
            rgba(67, 160, 71, 0.10) 0%, 
            transparent 50%),
        radial-gradient(ellipse 190px 380px at 28% 35%, 
            rgba(76, 175, 80, 0.08) 0%, 
            transparent 48%),
        radial-gradient(ellipse 170px 340px at 32% 28%, 
            rgba(85, 187, 89, 0.07) 0%, 
            transparent 52%);
    pointer-events: none;
    z-index: 1;
    transform: rotate(-25deg);
}

/* Coin supérieur droit */
body::after {
    content: '';
    position: fixed;
    top: -80px;
    right: -80px;
    width: 550px;
    height: 550px;
    background: 
        radial-gradient(ellipse 200px 400px at 70% 20%, 
            rgba(46, 125, 50, 0.15) 0%, 
            transparent 40%),
        radial-gradient(ellipse 180px 350px at 75% 30%, 
            rgba(56, 142, 60, 0.12) 0%, 
            transparent 45%),
        radial-gradient(ellipse 160px 320px at 65% 25%, 
            rgba(67, 160, 71, 0.10) 0%, 
            transparent 50%),
        radial-gradient(ellipse 190px 380px at 72% 35%, 
            rgba(76, 175, 80, 0.08) 0%, 
            transparent 48%),
        radial-gradient(ellipse 170px 340px at 68% 28%, 
            rgba(85, 187, 89, 0.07) 0%, 
            transparent 52%);
    pointer-events: none;
    z-index: 1;
    transform: rotate(25deg);
}

/* Coin inférieur gauche */
.hero-section::before {
    content: '';
    position: fixed;
    bottom: -80px;
    left: -80px;
    width: 550px;
    height: 550px;
    background: 
        radial-gradient(ellipse 200px 400px at 30% 80%, 
            rgba(46, 125, 50, 0.13) 0%, 
            transparent 40%),
        radial-gradient(ellipse 180px 350px at 25% 70%, 
            rgba(56, 142, 60, 0.10) 0%, 
            transparent 45%),
        radial-gradient(ellipse 160px 320px at 35% 75%, 
            rgba(67, 160, 71, 0.08) 0%, 
            transparent 50%),
        radial-gradient(ellipse 190px 380px at 28% 65%, 
            rgba(76, 175, 80, 0.07) 0%, 
            transparent 48%),
        radial-gradient(ellipse 170px 340px at 32% 72%, 
            rgba(85, 187, 89, 0.06) 0%, 
            transparent 52%);
    pointer-events: none;
    z-index: 1;
    transform: rotate(25deg);
}

/* Coin inférieur droit */
footer::before {
    content: '';
    position: fixed;
    bottom: -80px;
    right: -80px;
    width: 550px;
    height: 550px;
    background: 
        radial-gradient(ellipse 200px 400px at 70% 80%, 
            rgba(46, 125, 50, 0.13) 0%, 
            transparent 40%),
        radial-gradient(ellipse 180px 350px at 75% 70%, 
            rgba(56, 142, 60, 0.10) 0%, 
            transparent 45%),
        radial-gradient(ellipse 160px 320px at 65% 75%, 
            rgba(67, 160, 71, 0.08) 0%, 
            transparent 50%),
        radial-gradient(ellipse 190px 380px at 72% 65%, 
            rgba(76, 175, 80, 0.07) 0%, 
            transparent 48%),
        radial-gradient(ellipse 170px 340px at 68% 72%, 
            rgba(85, 187, 89, 0.06) 0%, 
            transparent 52%);
    pointer-events: none;
    z-index: 1;
    transform: rotate(-25deg);
}

/* Feuille supplémentaire en bas à gauche (plus petite) */
.section:first-of-type::before {
    content: '';
    position: fixed;
    bottom: 100px;
    left: -40px;
    width: 350px;
    height: 350px;
    background: 
        radial-gradient(ellipse 120px 250px at 25% 50%, 
            rgba(46, 125, 50, 0.12) 0%, 
            transparent 45%),
        radial-gradient(ellipse 110px 230px at 30% 55%, 
            rgba(56, 142, 60, 0.09) 0%, 
            transparent 48%),
        radial-gradient(ellipse 100px 220px at 28% 48%, 
            rgba(67, 160, 71, 0.07) 0%, 
            transparent 50%);
    pointer-events: none;
    z-index: 1;
    transform: rotate(35deg);
}

/* ============================================
   4. TEXTE PARFAITEMENT LISIBLE
   ============================================ */

.hero-title,
.hero-badge {
    position: relative;
    z-index: 100 !important;
    text-shadow: 
        0 1px 3px rgba(255, 255, 255, 0.9),
        0 2px 6px rgba(255, 255, 255, 0.7),
        0 3px 12px rgba(255, 255, 255, 0.5) !important;
}

.hero-title {
    color: var(--text-primary, #1a1a1a) !important;
    font-weight: 700 !important;
}

/* Paragraphe en NOIR (bien visible avec text-shadow blanc) */
.hero-subtitle {
    position: relative;
    z-index: 100 !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
    text-shadow: 
        0 1px 2px rgba(255, 255, 255, 0.5),
        0 2px 4px rgba(255, 255, 255, 0.3) !important;
}

/* ============================================
   5. CARTES PRIX AVEC PADDING AMÉLIORÉ
   ============================================ */

.tropical-card,
.pricing-card,
.service-card {
    position: relative;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(64, 224, 208, 0.2) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 182, 193, 0.1) inset !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: visible;
    padding: 2.5rem 2rem 2rem 2rem !important;
}

/* Contenu des cartes avec marge gauche */
.pricing-card h3,
.pricing-card .price,
.pricing-card ul,
.pricing-card p,
.pricing-card .btn-primary,
.service-card h3,
.service-card p,
.service-card ul {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

/* Liste des features avec plus d'espace */
.pricing-card ul,
.service-card ul {
    padding-left: 2rem !important;
}

.pricing-card ul li,
.service-card ul li {
    margin-bottom: 1rem !important;
    padding-left: 0.5rem !important;
}

/* Petite feuille de palmier décorative sur la carte (CSS pur) */
.tropical-card::before,
.pricing-card::before,
.service-card::before {
    content: '';
    position: absolute;
    top: -20px;
    right: 20px;
    width: 80px;
    height: 80px;
    background: 
        radial-gradient(ellipse 30px 60px at 50% 30%, 
            rgba(46, 125, 50, 0.15) 0%, 
            transparent 50%),
        radial-gradient(ellipse 25px 55px at 55% 35%, 
            rgba(56, 142, 60, 0.12) 0%, 
            transparent 52%);
    opacity: 1;
    transform: rotate(-15deg);
    transition: all 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

.tropical-card:hover,
.pricing-card:hover,
.service-card:hover {
    transform: translateY(-12px) !important;
    box-shadow: 
        0 20px 60px rgba(64, 224, 208, 0.2),
        0 0 80px rgba(255, 182, 193, 0.1),
        0 0 0 1px rgba(64, 224, 208, 0.3) inset !important;
    border-color: rgba(64, 224, 208, 0.4) !important;
}

.tropical-card:hover::before,
.pricing-card:hover::before,
.service-card:hover::before {
    transform: rotate(0deg) scale(1.1);
    opacity: 1;
}

/* ============================================
   6. PARTICULES LUMINEUSES SUBTILES
   ============================================ */

@keyframes float-soft {
    0%, 100% { transform: translate(0, 0); opacity: 0.4; }
    50% { transform: translate(8px, -8px); opacity: 0.7; }
}

@keyframes float-soft-2 {
    0%, 100% { transform: translate(0, 0); opacity: 0.3; }
    50% { transform: translate(-10px, -12px); opacity: 0.6; }
}

/* Particule 1 */
.hero-content::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 10%;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    animation: float-soft 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

/* Particule 2 */
.hero-content::after {
    content: '';
    position: absolute;
    top: 25%;
    right: 15%;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(255, 182, 193, 0.9) 0%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 182, 193, 0.5);
    animation: float-soft-2 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

/* ============================================
   7. SECTIONS AVEC FOND LÉGER
   ============================================ */

.section {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 249, 245, 0.9) 100%
    ) !important;
}

/* ============================================
   8. RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
    body::before,
    body::after,
    .hero-section::before,
    footer::before {
        width: 400px;
        height: 400px;
    }
    
    .section:first-of-type::before {
        width: 250px;
        height: 250px;
        bottom: 80px;
    }
    
    .tropical-card,
    .pricing-card,
    .service-card {
        padding: 2rem 1.5rem 1.5rem 1.5rem !important;
    }
    
    .pricing-card h3,
    .pricing-card .price,
    .pricing-card ul,
    .pricing-card p,
    .pricing-card .btn-primary,
    .service-card h3,
    .service-card p,
    .service-card ul {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    body::before,
    body::after,
    .hero-section::before,
    footer::before {
        width: 300px;
        height: 300px;
    }
    
    .section:first-of-type::before {
        width: 200px;
        height: 200px;
        bottom: 60px;
    }
    
    .tropical-card,
    .pricing-card,
    .service-card {
        padding: 1.5rem 1rem 1rem 1rem !important;
    }
}

/* ============================================
   FIN DU FICHIER
   ============================================ */