.features-pricing { background-color: #f8f9fa; } .features-pricing-title { margin-bottom: 1rem !important; } .features-pricing-subtitle { margin-bottom: 3rem !important; color: #666666; } .features-pricing-grid { gap: 2rem; } .pricing-column { padding: 1rem; } .pricing-card { background-color: #ffffff; border-radius: 8px; padding: 2rem; height: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .pricing-card:hover { transform: translateY(-5px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15); } .pricing-card.featured { border: 2px solid #007bff; transform: scale(1.05); } .pricing-card.featured:hover { transform: scale(1.05) translateY(-5px); } .pricing-title { margin-bottom: 1rem !important; color: #333333; } .pricing-price { margin-bottom: 0.5rem !important; color: #007bff; } .pricing-period { color: #666666; margin-bottom: 2rem !important; } .pricing-features { margin: 2rem 0 !important; padding: 0 !important; list-style: none !important; } .pricing-features li { margin-bottom: 1rem !important; color: #666666; position: relative; padding-left: 1.5rem; } .pricing-features li::before { content: "✓"; color: #007bff; position: absolute; left: 0; } .pricing-button { margin-top: 2rem !important; } .pricing-cta { margin-top: auto; width: 100%; background: transparent !important; color: #222 !important; border: none; border-radius: 10px; padding: 14px 0; font-size: 1.1rem; font-weight: 700; cursor: pointer; box-shadow: none; transition: none; } .pricing-cta:hover { background: transparent !important; color: #222 !important; } /* Responsive Design */ @media (max-width: 1024px) { .features-pricing-grid .pricing-column { width: 50% !important; } .pricing-card.featured { transform: scale(1); } .pricing-card.featured:hover { transform: translateY(-5px); } } @media (max-width: 768px) { .features-pricing-grid .pricing-column { width: 100% !important; } .features-pricing-title { font-size: 28px !important; } .pricing-title { font-size: 20px !important; } .pricing-price { font-size: 36px !important; } } .features-pricing-modern { background: #fff; padding: 80px 40px; } .features-pricing-title { margin-bottom: 1rem !important; font-weight: 800; text-align: center; } .features-pricing-subtitle { margin-bottom: 2.5rem !important; color: #666; text-align: center; } .pricing-switch-container { display: flex; justify-content: center; margin-bottom: 2.5rem; } .pricing-switch { display: inline-flex; background: #f6f6f8; border-radius: 12px; padding: 4px; gap: 2px; } .switch-btn { border: none; background: none; padding: 10px 28px; border-radius: 10px; font-weight: 600; font-size: 1rem; color: #222; cursor: pointer; transition: background 0.2s, color 0.2s; } .switch-btn.active { background: #222; color: #fff; } .switch-badge { background: #ffeaea; color: #e74c3c; font-size: 0.85em; border-radius: 8px; padding: 2px 8px; margin-left: 6px; } .features-pricing-cards { display: flex; gap: 2rem; margin-top: 2rem; } .pricing-card { background: #fff; border-radius: 20px; box-shadow: 0 2px 16px rgba(30, 34, 90, 0.06); padding: 2.5rem 1.5rem 2rem 1.5rem; text-align: left; border: 1px solid #f0f0f0; min-height: 420px; display: flex; flex-direction: column; align-items: flex-start; transition: box-shadow 0.2s, transform 0.2s; } .pricing-card:hover { box-shadow: 0 8px 32px rgba(30, 34, 90, 0.12); transform: translateY(-4px); } .pricing-card .pricing-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; color: #222; } .pricing-card .pricing-price { font-size: 2.5rem !important; font-weight: 700 !important; color: #222; margin-bottom: 0.5rem; margin-top: 0; } .pricing-card .pricing-period { color: #888; font-size: 1rem; margin-bottom: 1.2rem; } .pricing-card .pricing-desc { color: #222; font-size: 1.05rem; margin-bottom: 1.2rem; font-weight: 600; } .pricing-features { margin: 1.5rem 0 2rem 0 !important; padding: 0 !important; list-style: none !important; } .pricing-features li { margin-bottom: 1rem !important; color: #666; position: relative; padding-left: 1.5rem; font-size: 1rem; } .pricing-features li::before { content: "✓"; color: #222; position: absolute; left: 0; } .pricing-cta { margin-top: auto; width: 100%; background: transparent !important; color: #222 !important; border: none; border-radius: 10px; padding: 14px 0; font-size: 1.1rem; font-weight: 700; cursor: pointer; box-shadow: none; transition: none; } .pricing-cta:hover { background: transparent !important; color: #222 !important; } /* Style spécial pour la carte Enterprise */ .pricing-enterprise { background: #222 !important; color: #fff !important; border: 1px solid #222 !important; } .pricing-enterprise .pricing-title, .pricing-enterprise .pricing-price, .pricing-enterprise .pricing-period, .pricing-enterprise .pricing-desc, .pricing-enterprise .pricing-features li { color: #fff !important; } .pricing-enterprise .pricing-features li::before { color: #fff !important; } .pricing-enterprise .pricing-cta { background: transparent !important; color: #fff !important; } .pricing-enterprise .pricing-cta:hover { background: transparent !important; color: #fff !important; } @media (max-width: 1024px) { .features-pricing-cards { flex-wrap: wrap; } .pricing-card { width: 48% !important; margin-bottom: 2rem; } } @media (max-width: 768px) { .features-pricing-cards { flex-direction: column; gap: 1.5rem; } .pricing-card { width: 100% !important; margin-bottom: 0; } .features-pricing-title { font-size: 28px !important; } } .pricing-team-blue { background: #2563eb !important; color: #fff !important; border: 2px solid #2563eb !important; position: relative; } .pricing-team-blue .pricing-title, .pricing-team-blue .pricing-price, .pricing-team-blue .pricing-desc, .pricing-team-blue .pricing-features li { color: #fff !important; } .pricing-team-blue .pricing-features li::before { color: #fff !important; } .pricing-team-blue .pricing-cta { background: transparent !important; color: #fff !important; box-shadow: none; } .pricing-team-blue .pricing-cta:hover { background: transparent !important; color: #fff !important; } .pricing-badge-group { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; } .pricing-badge-recommended { background: #fff; color: #2563eb; font-size: 0.85em; font-weight: 700; border-radius: 8px; padding: 4px 14px; margin-bottom: 10px; display: inline-block; box-shadow: 0 2px 8px rgba(30,34,90,0.08); } .pricing-enterprise-white { background: #fff !important; color: #222 !important; border: 1px solid #f0f0f0 !important; } .pricing-enterprise-white .pricing-title, .pricing-enterprise-white .pricing-price, .pricing-enterprise-white .pricing-desc, .pricing-enterprise-white .pricing-features li { color: #222 !important; } .pricing-enterprise-white .pricing-features li::before { color: #222 !important; } .pricing-enterprise-white .pricing-cta { background: transparent !important; color: #222 !important; } .pricing-enterprise-white .pricing-cta:hover { background: transparent !important; color: #222 !important; } .features-pricing-cards > .wp-block-column { width: 25% !important; min-width: 0; flex: 1 1 25%; display: flex; flex-direction: column; } @media (max-width: 1024px) { .features-pricing-cards > .wp-block-column { width: 50% !important; flex: 1 1 50%; } } @media (max-width: 768px) { .features-pricing-cards > .wp-block-column { width: 100% !important; flex: 1 1 100%; } }