/* ═══════════════════════════════════════════════════════════════
   🎨 TYPOGRAPHIE ÉLÉGANTE GLOBALE - JESS.BDIGITAL
   Design : Italique classe + Tropical Premium
   Polices : Playfair Display Italic (gros titres) + Cormorant Garamond (sous-titres) + Lora (texte)
   Couleurs : #00C9A7 (turquoise) + #FFD700 (or)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   📖 IMPORT GOOGLE FONTS
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700;1,900&family=Cormorant+Garamond:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ─────────────────────────────────────────────────────────────
   🌟 GROS TITRES (H1) - ITALIQUE ÉLÉGANT + COULEUR TROPICALE
   ───────────────────────────────────────────────────────────── */
h1,
.hero-title,
.section-title,
.main-title {
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: #00C9A7 !important; /* Turquoise tropical */
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 20px rgba(0, 201, 167, 0.2) !important;
}

/* Variante OR pour certains titres */
.hero h1,
.hero-section h1,
.cta-section h1,
.cta-section h2 {
    color: #FFD700 !important; /* Or tropical */
    text-shadow: 0 2px 20px rgba(255, 215, 0, 0.3) !important;
}

/* ─────────────────────────────────────────────────────────────
   💎 SOUS-TITRES (H2, H3) - ÉLÉGANTS NON-ITALIQUE
   ───────────────────────────────────────────────────────────── */
h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
    font-style: normal !important;
    color: #FFD700 !important; /* Or tropical */
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
}

h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
    color: #00C9A7 !important; /* Turquoise */
    letter-spacing: 0.3px !important;
}

h4, h5, h6 {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 500 !important;
    color: #2D3748 !important;
}

/* ─────────────────────────────────────────────────────────────
   📝 TEXTE DE BASE - ÉLÉGANT ET LISIBLE
   ───────────────────────────────────────────────────────────── */
body,
p,
li,
span,
.text-content,
.description {
    font-family: 'Lora', serif !important;
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    color: #4A5568 !important;
}

/* Texte sur fond sombre */
.hero p,
.hero-section p,
.dark-section p,
footer p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ─────────────────────────────────────────────────────────────
   🎯 STYLES SPÉCIFIQUES PAR SECTION
   ───────────────────────────────────────────────────────────── */

/* Hero Section */
.hero h1 {
    font-size: 4rem !important;
    margin-bottom: 1.5rem !important;
}

.hero p {
    font-size: 1.3rem !important;
    font-weight: 400 !important;
}

/* Services */
.services-section h2,
#services h2 {
    font-size: 3rem !important;
    text-align: center !important;
    margin-bottom: 3rem !important;
}

.service-card h3 {
    font-size: 1.8rem !important;
    margin-bottom: 1rem !important;
}

/* Formules */
.pricing-section h2,
#formules h2 {
    font-size: 3rem !important;
    text-align: center !important;
    margin-bottom: 3rem !important;
}

.pricing-card h3 {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
}

.pricing-card .price {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: #FFD700 !important;
}

/* Témoignages */
.testimonials-section h2,
#temoignages h2 {
    font-size: 3rem !important;
    text-align: center !important;
    margin-bottom: 3rem !important;
}

.testimonial-card .name {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
    color: #00C9A7 !important;
}

.testimonial-card .role {
    font-family: 'Lora', serif !important;
    font-style: italic !important;
    color: #8B7B8D !important;
}

.testimonial-card .quote {
    font-family: 'Lora', serif !important;
    font-style: italic !important;
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
}

/* Contact Page */
.contact-section h1 {
    font-size: 3.5rem !important;
    margin-bottom: 1.5rem !important;
}

.contact-section h2 {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
}

/* Form Labels */
label {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    color: #2D3748 !important;
}

/* Buttons */
button,
.btn,
.cta-button,
input[type="submit"] {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

/* Footer */
footer h3 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
    color: #FFD700 !important;
}

/* ─────────────────────────────────────────────────────────────
   🎨 EMPHASES & ACCENTS
   ───────────────────────────────────────────────────────────── */
strong, b {
    font-weight: 600 !important;
    color: #00C9A7 !important;
}

em, i {
    font-style: italic !important;
    color: #FFD700 !important;
}

/* Links */
a:not(.btn):not(.cta-button) {
    color: #00C9A7 !important;
    transition: all 0.3s ease !important;
}

a:not(.btn):not(.cta-button):hover {
    color: #FFD700 !important;
}

/* ─────────────────────────────────────────────────────────────
   📱 RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    h1,
    .hero h1 {
        font-size: 2.5rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    body,
    p,
    li {
        font-size: 1rem !important;
    }
    
    .hero p {
        font-size: 1.1rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   ✨ ANIMATIONS & TRANSITIONS
   ───────────────────────────────────────────────────────────── */
h1, h2, h3 {
    animation: fadeInUp 0.8s ease-out !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIN DE LA TYPOGRAPHIE ÉLÉGANTE
   ═══════════════════════════════════════════════════════════════ */