.elementor-2810 .elementor-element.elementor-element-3cfe33c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:75px;--padding-bottom:75px;--padding-left:75px;--padding-right:75px;}.elementor-2810 .elementor-element.elementor-element-ce27943{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-e487305 *//* =================================
   CORRECTION TEXTE BLANC SUR FOND BLEU
   ================================= */

/* Forcer le texte blanc dans l'en-tête avec fond gradient */
.article-header,
.article-header h1,
.article-header h2,
.article-header h3,
.article-header h4,
.article-header h5,
.article-header h6,
.article-header p,
.article-header span,
.article-header div {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* Forcer le texte blanc dans les sections CTA */
.cta-section,
.cta-section h1,
.cta-section h2,
.cta-section h3,
.cta-section h4,
.cta-section h5,
.cta-section h6,
.cta-section p,
.cta-section span,
.cta-section div,
.cta-section strong {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* Améliorer la lisibilité des titres sur fond gradient */
.article-header h1 {
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

.cta-section h3 {
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* =================================
   GARDER LES EMOJIS ORIGINAUX
   ================================= */

/* Pas d'icônes ajoutées - les emojis restent dans le HTML */

/* =================================
   AMÉLIORATIONS SUPPLÉMENTAIRES
   ================================= */

/* Améliorer le contraste des boutons */
.cta-button {
    background: white !important;
    color: #1c4581 !important;
    font-weight: 700 !important;
    border: 2px solid white !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

.cta-button:hover {
    background: #f8f9fa !important;
    color: #1c4581 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}

/* Améliorer la lisibilité des info-box */
.info-box {
    background: linear-gradient(135deg, rgba(67, 188, 237, 0.1), rgba(28, 69, 129, 0.1)) !important;
    border: 1px solid rgba(67, 188, 237, 0.3) !important;
    color: #333 !important;
}

.info-box strong {
    color: #1c4581 !important;
}

/* Améliorer les liens externes */
.external-link {
    color: #43bced !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.3s ease !important;
}

.external-link:hover {
    color: #1c4581 !important;
    border-bottom: 1px solid #1c4581 !important;
    text-decoration: none !important;
}

/* Améliorer la visibilité des highlights */
.highlight {
    background-color: #1c4581 !important;
    color: white !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.highlight-blue {
    background-color: #43bced !important;
    color: white !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* =================================
   RESPONSIVE FIXES
   ================================= */

@media (max-width: 768px) {
    .article-header h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .cta-section h3 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    .section h2:before,
    .advantage-card h4:before {
        font-size: 0.9em !important;
    }
}

/* =================================
   FALLBACK POUR ICÔNES
   ================================= */

/* Si Font Awesome ne se charge pas, utiliser des caractères Unicode */
@supports not (font-family: "Font Awesome 6 Free") {
    .toc h3:before { content: "📋"; }
    .section h2:before { content: "🔹"; }
    .advantage-card h4:before { content: "✨"; }
    .cta-section h3:before { content: "🚀"; }
    .faq-section h2:before { content: "❓"; }
}

/* =================================
   ANIMATIONS ET TRANSITIONS
   ================================= */

/* Animation pour les icônes */
.section h2:before,
.advantage-card h4:before,
.cta-section h3:before {
    transition: all 0.3s ease !important;
}

.section:hover h2:before,
.advantage-card:hover h4:before {
    transform: scale(1.1) !important;
}

/* Améliorer l'animation des cartes d'avantages */
.advantage-card {
    transition: all 0.3s ease !important;
}

.advantage-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
}

/* =================================
   OPTIMISATIONS ELEMENTOR
   ================================= */

/* S'assurer que les styles s'appliquent dans Elementor */
.elementor-widget-container .article-header h1,
.elementor-widget-container .article-header p,
.elementor-widget-container .cta-section h3,
.elementor-widget-container .cta-section p {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* Forcer l'application des couleurs de fond */
.elementor-widget-container .article-header {
    background: linear-gradient(135deg, #1c4581 0%, #43bced 100%) !important;
}

.elementor-widget-container .cta-section {
    background: linear-gradient(135deg, #1c4581 0%, #43bced 100%) !important;
}/* End custom CSS */