.elementor-45434 .elementor-element.elementor-element-7145a97{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}/* Start custom CSS for container, class: .elementor-element-7145a97 *//* === CORRECTION CARDS MATELAS UNIFORMES === */

/* Container principal pour les cartes matelas */
.elementor-widget-html .product-grid,
.elementor-widget-html .products-grid,
.matelas-cards-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
}

/* Uniformiser toutes les cartes matelas */
.product-card,
.matelas-card,
.card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Force même hauteur */
    background: white !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s ease !important;
}

/* Images des matelas - TAILLE FIXE */
.product-card .product-image,
.matelas-card .matelas-image,
.card .card-image {
    position: relative !important;
    width: 100% !important;
    height: 220px !important; /* Hauteur fixe identique */
    overflow: hidden !important;
    background: #f5f5f5 !important;
}

.product-card .product-image img,
.matelas-card .matelas-image img,
.card .card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.3s ease !important;
}

/* Badges sur les images */
.product-badge,
.card-badge {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: #28a745 !important;
    color: white !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    z-index: 10 !important;
}

/* Contenu des cartes - flex pour remplir l'espace */
.product-content,
.card-content {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* Remplit l'espace disponible */
    justify-content: space-between !important;
}

/* Titre des matelas */
.product-title,
.card-title,
.matelas-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    min-height: 50px !important; /* Hauteur minimum pour alignement */
    line-height: 1.3 !important;
    color: #2d3748 !important;
}

/* Section prix uniforme */
.price-section,
.card-price {
    background: #f8f9fa !important;
    padding: 15px !important;
    border-radius: 10px !important;
    margin-bottom: 15px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 60px !important;
}

.current-price {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #28a745 !important;
}

.old-price {
    text-decoration: line-through !important;
    color: #6c757d !important;
    font-size: 16px !important;
}

.savings {
    background: #dc3545 !important;
    color: white !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Boutons uniformes en bas */
.product-buttons,
.card-buttons {
    margin-top: auto !important; /* Pousse les boutons vers le bas */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.btn {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    border: none !important;
    cursor: pointer !important;
    height: 45px !important; /* Hauteur fixe boutons */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-primary {
    background: #28a745 !important;
    color: white !important;
}

.btn-secondary {
    background: #6c757d !important;
    color: white !important;
}

/* Hover effects */
.product-card:hover,
.matelas-card:hover {
    transform: translateY(-5px) !important;
}

.product-card:hover img,
.matelas-card:hover img {
    transform: scale(1.05) !important;
}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
    .product-grid,
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .product-grid,
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .product-buttons,
    .card-buttons {
        grid-template-columns: 1fr !important;
    }
    
    .product-card .product-image,
    .matelas-card .matelas-image {
        height: 200px !important;
    }
}

/* === CORRECTION SPÉCIFIQUE ELEMENTOR === */
.elementor-widget-html .elementor-widget-container {
    overflow: visible !important;
}

/* Force l'alignement des cards dans Elementor */
.elementor-widget-html [class*="grid"],
.elementor-widget-html [class*="cards"] {
    display: grid !important;
    align-items: stretch !important;
}

/* ===============================================
   CORRECTION TITRES FAQ BLANCS SUR ELEMENTOR
   =============================================== */

/* Correction générale des titres FAQ */
.faq-title,
.faq-question,
.elementor-accordion .elementor-accordion-item .elementor-tab-title,
.elementor-toggle .elementor-toggle-title,
.elementor-accordion .elementor-tab-title,
h3.faq-title,
.faq-item h3,
.faq-header,
.accordion-header {
    color: #333333 !important; /* Couleur sombre par défaut */
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    background: transparent !important;
}

/* Correction spécifique Elementor Accordion */
.elementor-accordion-item .elementor-tab-title {
    color: #2c3e50 !important;
    background: #f8f9fa !important;
    padding: 15px 20px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 5px !important;
    margin-bottom: 2px !important;
    transition: all 0.3s ease !important;
}

.elementor-accordion-item .elementor-tab-title:hover {
    background: #e9ecef !important;
    color: #1a252f !important;
}

.elementor-accordion-item.elementor-active .elementor-tab-title {
    background: #007cba !important;
    color: white !important;
}

/* Correction Elementor Toggle */
.elementor-toggle .elementor-toggle-title {
    color: #2c3e50 !important;
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    padding: 15px 20px !important;
}

.elementor-toggle .elementor-toggle-title:hover {
    color: #007cba !important;
}

/* Correction pour les FAQ custom */
.faq-container .faq-item {
    margin-bottom: 15px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.faq-container .faq-question {
    background: #f8f9fa !important;
    color: #333333 !important;
    padding: 15px 20px !important;
    cursor: pointer !important;
    position: relative !important;
    margin: 0 !important;
    border-bottom: 1px solid #e9ecef !important;
    transition: all 0.3s ease !important;
}

.faq-container .faq-question:hover {
    background: #e9ecef !important;
    color: #1a252f !important;
}

.faq-container .faq-question.active {
    background: #007cba !important;
    color: white !important;
}

/* Correction spécifique pour les liens dans les titres FAQ */
.elementor-accordion .elementor-tab-title a,
.elementor-toggle .elementor-toggle-title a,
.faq-question a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Force la couleur du texte même avec des éléments enfants */
.elementor-accordion-item .elementor-tab-title * {
    color: inherit !important;
}

.elementor-toggle .elementor-toggle-title * {
    color: inherit !important;
}

/* Icônes FAQ */
.faq-question::after,
.elementor-tab-title::after {
    content: '+' !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    font-weight: bold !important;
    transition: transform 0.3s ease !important;
}

.faq-question.active::after,
.elementor-accordion-item.elementor-active .elementor-tab-title::after {
    content: '-' !important;
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Correction spécifique pour Elementor avec thèmes sombres */
.elementor-widget-accordion .elementor-accordion .elementor-tab-title,
.elementor-widget-toggle .elementor-toggle .elementor-toggle-title {
    color: #333333 !important;
    background-color: #f8f9fa !important;
}

/* Reset des couleurs héritées qui peuvent poser problème */
.elementor-accordion-item,
.elementor-toggle-item {
    color: #333333 !important;
}

/* Forcer la couleur même avec des styles inline */
.elementor-tab-title[style*="color"],
.elementor-toggle-title[style*="color"] {
    color: #333333 !important;
}

/* ===============================================
   CORRECTION BOUTONS QUIZ NON-CLIQUABLES
   =============================================== */

/* Quiz container - forcer cliquabilité */
.quiz-container {
    position: relative !important;
    z-index: 100 !important;
    isolation: isolate !important;
}

/* Résultat du quiz - forcer au premier plan */
.quiz-result {
    position: relative !important;
    z-index: 101 !important;
    pointer-events: auto !important;
    isolation: isolate !important;
}

/* Zone des boutons résultat - cliquabilité maximale */
.result-buttons {
    position: relative !important;
    z-index: 102 !important;
    pointer-events: auto !important;
    isolation: isolate !important;
}

/* Boutons du résultat quiz - forcer cliquabilité */
#quizBuyButton,
.quiz-result .cta-button,
.result-buttons .cta-button,
.result-buttons a,
.quiz-result a {
    position: relative !important;
    z-index: 103 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    display: inline-block !important;
    touch-action: manipulation !important;
    user-select: none !important;
}

/* Éliminer tous les overlays et pseudo-éléments bloquants */
.quiz-result::before,
.quiz-result::after,
.result-buttons::before,
.result-buttons::after,
.quiz-container::before,
.quiz-container::after {
    display: none !important;
    pointer-events: none !important;
}

/* Correction Elementor spécifique */
.elementor-widget-html .quiz-result,
.elementor-widget-html .result-buttons,
.elementor-widget-html .quiz-container {
    position: relative !important;
    z-index: 999 !important;
    pointer-events: auto !important;
}

/* Éliminer les pseudo-éléments bloquants sur tous les enfants */
.quiz-container *::before,
.quiz-container *::after {
    pointer-events: none !important;
}

/* Forcer l'interactivité des boutons avec styles visuels */
.cta-button {
    position: relative !important;
    z-index: 105 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
    touch-action: manipulation !important;
    transition: all 0.3s ease !important;
}

.cta-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(144, 198, 149, 0.4) !important;
    color: white !important;
}

/* Protection contre les conflits thème pour quiz */
.quiz-container,
.quiz-result {
    box-sizing: border-box !important;
}

.quiz-container *,
.quiz-result * {
    box-sizing: border-box !important;
}

/* ===============================================
   RESPONSIVE FAQ + QUIZ
   =============================================== */

@media (max-width: 768px) {
    /* Quiz mobile */
    .quiz-result .cta-button,
    #quizBuyButton {
        min-height: 44px !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        font-size: 16px !important;
    }
    
    /* FAQ mobile */
    .faq-question,
    .elementor-accordion-item .elementor-tab-title,
    .elementor-toggle .elementor-toggle-title {
        font-size: 16px !important;
        padding: 12px 15px !important;
        padding-right: 45px !important; /* Espace pour l'icône */
    }
    
    .faq-question::after,
    .elementor-tab-title::after {
        right: 15px !important;
        font-size: 18px !important;
    }
}

/* ===============================================
   PROTECTION CONTRE LES CONFLITS THÈME
   =============================================== */

/* Réinitialiser les styles qui pourraient interférer */
.faq-container,
.elementor-accordion,
.elementor-toggle,
.quiz-container {
    box-sizing: border-box !important;
}

.faq-container *,
.elementor-accordion *,
.elementor-toggle *,
.quiz-container * {
    box-sizing: border-box !important;
}

/* Correction finale pour Elementor */
.elementor-element .faq-container,
.elementor-element .elementor-accordion,
.elementor-element .elementor-toggle,
.elementor-element .quiz-container {
    position: relative !important;
}

/* Forcer la visibilité du texte et boutons */
.elementor-accordion-item .elementor-tab-title,
.elementor-toggle .elementor-toggle-title,
.faq-question,
#quizBuyButton,
.quiz-result .cta-button {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ===============================================
   RESPONSIVE FAQ
   =============================================== */

@media (max-width: 768px) {
    /* FAQ mobile */
    .faq-question,
    .elementor-accordion-item .elementor-tab-title,
    .elementor-toggle .elementor-toggle-title {
        font-size: 16px !important;
        padding: 12px 15px !important;
        padding-right: 45px !important; /* Espace pour l'icône */
    }
    
    .faq-question::after,
    .elementor-tab-title::after {
        right: 15px !important;
        font-size: 18px !important;
    }
}

/* ===============================================
   PROTECTION CONTRE LES CONFLITS THÈME
   =============================================== */

/* Réinitialiser les styles qui pourraient interférer */
.faq-container,
.elementor-accordion,
.elementor-toggle {
    box-sizing: border-box !important;
}

.faq-container *,
.elementor-accordion *,
.elementor-toggle * {
    box-sizing: border-box !important;
}

/* Correction finale pour Elementor */
.elementor-element .faq-container,
.elementor-element .elementor-accordion,
.elementor-element .elementor-toggle {
    position: relative !important;
}

/* Forcer la visibilité du texte */
.elementor-accordion-item .elementor-tab-title,
.elementor-toggle .elementor-toggle-title,
.faq-question {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

.result-buttons {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.result-buttons a {
    pointer-events: auto;
    position: relative;
    z-index: 11;
}

/* Si vous avez des overlays */
.quiz-result.show {
    pointer-events: auto;
}

.quiz-result.show * {
    pointer-events: auto;
}
/* Force le z-index des boutons de résultat */
.result-buttons {
    position: relative;
    z-index: 9999 !important;
    pointer-events: auto;
}

.result-buttons a {
    position: relative;
    z-index: 10000 !important;
    pointer-events: auto;
    display: inline-block;
}

/* Assure-toi que le conteneur parent n'interfère pas */
#quizResult {
    position: relative;
    z-index: 999;
    pointer-events: auto;
}

#quizResult.show {
    z-index: 9998;
}/* End custom CSS */