/* ===================================================================
   🎨 BACKGROUNDS TEMPLATES - IMAGES DE FOND ULTRA-RÉALISTES
   ================================================================
   Date : 20 Mars 2026
   Version : 1.0 - Intégration Templates Nano Banana 2
   
   ⚠️ CE FICHIER REMPLACE UNIQUEMENT LES IMAGES DE FOND
   ⚠️ STRUCTURE / TEXTES / BOUTONS RESTENT INTACTS
   
   📸 Images générées par Nano Banana 2 - Ultra-réalistes 4K
=================================================================== */

/* ===================================================================
   1. POLICE ANGELETTA POUR LES GROS TITRES
=================================================================== */

/* Import de la police Angeletta depuis Google Fonts ou CDN */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
/* Note: Si Angeletta n'est pas sur Google Fonts, on utilisera Great Vibes comme alternative élégante */

/* Application de la police Angeletta/Great Vibes sur tous les gros titres */
.hero-title,
.hero-section h1,
h1.display-1,
.section-title.angeletta {
    font-family: 'Great Vibes', cursive !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
}

/* ===================================================================
   2. HOMEPAGE HERO - Template 1 (Jet Privé Luxe)
=================================================================== */

.hero-section,
#home {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
        url('../images/bg-homepage-jet.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative !important;
}

/* Overlay pour garantir lisibilité du texte */
.hero-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
        135deg,
        rgba(255, 234, 167, 0.15) 0%,
        rgba(255, 182, 185, 0.15) 50%,
        rgba(168, 230, 207, 0.15) 100%
    ) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

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

/* ===================================================================
   3. SECTION TÉMOIGNAGES - Template 2 (Balcon Parisien)
=================================================================== */

.testimonials-section,
#temoignages,
section[id*="testimonial"] {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.90)),
        url('../images/bg-temoignages-paris.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative !important;
}

/* ===================================================================
   4. SECTION PROCESSUS - Template (Santorin Working Woman)
=================================================================== */

.process-section,
#process,
section[id*="process"] {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.30)),
        url('../images/bg-processus-santorini.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative !important;
}

/* ===================================================================
   5. SECTION TARIFS/FORMULES - Template 3 (Rooftop Paris)
=================================================================== */

.pricing-section,
#formules,
section[id*="pricing"],
section[id*="tarif"] {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
        url('../images/bg-tarifs-rooftop.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative !important;
}

/* ===================================================================
   5. BLOG - ARTICLE 1 (Café Parisien)
=================================================================== */

.blog-article-1,
.blog-header-1,
article[data-article="1"] .article-hero {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20)),
        url('../images/bg-blog-cafe-paris.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 500px !important;
}

/* ===================================================================
   6. BLOG - ARTICLE 2 (Beach Club Tropical)
=================================================================== */

.blog-article-2,
.blog-header-2,
article[data-article="2"] .article-hero {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20)),
        url('../images/bg-blog-beach-club.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 500px !important;
}

/* ===================================================================
   7. BLOG - ARTICLE 3 (Beach Laptop Lifestyle)
=================================================================== */

.blog-article-3,
.blog-header-3,
article[data-article="3"] .article-hero {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20)),
        url('../images/bg-blog-beach-laptop.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 500px !important;
}

/* ===================================================================
   8. FORMULAIRE CONTACT - Template 7 (Villa Sunset)
=================================================================== */

.contact-section,
#contact,
section[id*="contact"] {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
        url('../images/bg-contact-villa-sunset.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative !important;
}

/* ===================================================================
   9. BONUS - Workspace Ocean (disponible pour autre section)
=================================================================== */

.workspace-section,
.about-section {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url('../images/bg-workspace-ocean.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* ===================================================================
   10. GARANTIES DE LISIBILITÉ
=================================================================== */

/* S'assurer que le texte reste lisible sur toutes les images */
.hero-section .hero-title,
.hero-section .hero-subtitle,
.section-title,
.section-description {
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(255, 255, 255, 0.3) !important;
}

/* Cartes blanches avec ombre pour se détacher du fond */
.pricing-card,
.testimonial-card,
.contact-form,
.blog-card {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* ===================================================================
   11. RESPONSIVE - MOBILE FRIENDLY
=================================================================== */

@media (max-width: 768px) {
    /* Désactiver parallax sur mobile pour performance */
    .hero-section,
    .testimonials-section,
    .pricing-section,
    .contact-section,
    .workspace-section {
        background-attachment: scroll !important;
    }
    
    /* Augmenter overlay sur mobile pour lisibilité */
    .hero-section::before {
        background: linear-gradient(
            135deg,
            rgba(255, 234, 167, 0.25) 0%,
            rgba(255, 182, 185, 0.25) 50%,
            rgba(168, 230, 207, 0.25) 100%
        ) !important;
    }
}

/* ===================================================================
   12. ANIMATION DOUCE AU SCROLL
=================================================================== */

.hero-section,
.testimonials-section,
.pricing-section,
.contact-section {
    transition: background-position 0.5s ease-out !important;
}

/* ===================================================================
   FIN DU FICHIER - backgrounds-templates.css
   ⚠️ CE FICHIER DOIT ÊTRE CHARGÉ EN DERNIER DANS index.html
   ⚠️ APRÈS TOUS LES AUTRES CSS POUR OVERRIDE
=================================================================== */