/* ================================================================\n   ECOLOPULSE — Wallet Connection Modal Styles\n================================================================ */\n\n/* Modal Overlay */\n.wallet-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.8);\n  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n/* Modal Content */\n.wallet-modal-content {\n  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);\n  border-radius: 20px;\n  padding: 0;\n  max-width: 480px;\n  width: 90%;\n  max-height: 80vh;\n  overflow: hidden;\n  transform: translateY(20px);\n  transition: transform 0.3s ease;\n  box-shadow: \n    0 20px 60px rgba(0, 0, 0, 0.3),\n    0 0 0 1px rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(168, 85, 247, 0.1);\n}\n\n/* Modal Header */\n.wallet-modal-header {\n  padding: 24px 24px 16px 24px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);\n  color: white;\n}\n\n.wallet-modal-header h2 {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: white;\n}\n\n.wallet-modal-close {\n  background: rgba(255, 255, 255, 0.2);\n  border: none;\n  color: white;\n  font-size: 24px;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n}\n\n.wallet-modal-close:hover {\n  background: rgba(255, 255, 255, 0.3);\n  transform: scale(1.1);\n}\n\n/* Modal Body */\n.wallet-modal-body {\n  padding: 24px;\n  max-height: 60vh;\n  overflow-y: auto;\n}\n\n.wallet-modal-subtitle {\n  margin: 0 0 20px 0;\n  color: #64748b;\n  font-size: 14px;\n  text-align: center;\n}\n\n/* Wallet Options */\n.wallet-option {\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  margin-bottom: 12px;\n  border: 2px solid #e2e8f0;\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: white;\n  position: relative;\n  overflow: hidden;\n}\n\n.wallet-option::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);\n  transition: left 0.5s ease;\n}\n\n.wallet-option:hover {\n  border-color: #a855f7;\n  background: #faf5ff;\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px rgba(168, 85, 247, 0.15);\n}\n\n.wallet-option:hover::before {\n  left: 100%;\n}\n\n.wallet-option:active {\n  transform: translateY(0);\n}\n\n.wallet-option.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  border-color: #e2e8f0;\n}\n\n.wallet-option.disabled:hover {\n  transform: none;\n  background: white;\n  border-color: #e2e8f0;\n  box-shadow: none;\n}\n\n/* Wallet Icon */\n.wallet-icon {\n  font-size: 32px;\n  margin-right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: 12px;\n  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);\n}\n\n/* Wallet Info */\n.wallet-info {\n  flex: 1;\n}\n\n.wallet-name {\n  font-weight: 600;\n  color: #1e293b;\n  margin-bottom: 4px;\n  font-size: 16px;\n}\n\n.wallet-desc {\n  color: #64748b;\n  font-size: 14px;\n  line-height: 1.4;\n}\n\n/* Wallet Arrow */\n.wallet-arrow {\n  color: #a855f7;\n  font-size: 20px;\n  font-weight: bold;\n  transition: transform 0.2s ease;\n}\n\n.wallet-option:hover .wallet-arrow {\n  transform: translateX(4px);\n}\n\n/* Modal Footer */\n.wallet-modal-footer {\n  padding: 16px 24px 24px 24px;\n  border-top: 1px solid rgba(0, 0, 0, 0.05);\n  background: #f8fafc;\n}\n\n.wallet-modal-disclaimer {\n  margin: 0;\n  color: #64748b;\n  font-size: 13px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n/* Mobile Responsive */\n@media (max-width: 768px) {\n  .wallet-modal-content {\n    width: 95%;\n    max-height: 85vh;\n    border-radius: 16px;\n  }\n  \n  .wallet-modal-header {\n    padding: 20px 20px 16px 20px;\n  }\n  \n  .wallet-modal-header h2 {\n    font-size: 18px;\n  }\n  \n  .wallet-modal-body {\n    padding: 20px;\n    max-height: 65vh;\n  }\n  \n  .wallet-option {\n    padding: 18px 16px;\n    margin-bottom: 16px;\n    border-radius: 12px;\n  }\n  \n  .wallet-icon {\n    font-size: 28px;\n    width: 44px;\n    height: 44px;\n    margin-right: 14px;\n  }\n  \n  .wallet-name {\n    font-size: 15px;\n  }\n  \n  .wallet-desc {\n    font-size: 13px;\n  }\n  \n  .wallet-modal-close {\n    width: 36px;\n    height: 36px;\n    font-size: 20px;\n  }\n}\n\n/* Extra small screens */\n@media (max-width: 480px) {\n  .wallet-modal-content {\n    width: 98%;\n    margin: 10px;\n  }\n  \n  .wallet-modal-header {\n    padding: 16px;\n  }\n  \n  .wallet-modal-body {\n    padding: 16px;\n  }\n  \n  .wallet-option {\n    padding: 16px 12px;\n  }\n  \n  .wallet-icon {\n    font-size: 24px;\n    width: 40px;\n    height: 40px;\n    margin-right: 12px;\n  }\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n  .wallet-modal-content {\n    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);\n    border-color: rgba(168, 85, 247, 0.2);\n  }\n  \n  .wallet-modal-body {\n    color: #e2e8f0;\n  }\n  \n  .wallet-modal-subtitle {\n    color: #94a3b8;\n  }\n  \n  .wallet-option {\n    background: #334155;\n    border-color: #475569;\n    color: #e2e8f0;\n  }\n  \n  .wallet-option:hover {\n    background: #3730a3;\n    border-color: #a855f7;\n  }\n  \n  .wallet-name {\n    color: #f1f5f9;\n  }\n  \n  .wallet-desc {\n    color: #94a3b8;\n  }\n  \n  .wallet-icon {\n    background: linear-gradient(135deg, #475569 0%, #334155 100%);\n  }\n  \n  .wallet-modal-footer {\n    background: #0f172a;\n    border-color: rgba(255, 255, 255, 0.1);\n  }\n  \n  .wallet-modal-disclaimer {\n    color: #94a3b8;\n  }\n}\n\n/* Animation pour l'apparition */\n@keyframes modalSlideIn {\n  from {\n    opacity: 0;\n    transform: translateY(30px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.wallet-modal-content {\n  animation: modalSlideIn 0.3s ease-out;\n}\n\n/* Scrollbar personnalisée */\n.wallet-modal-body::-webkit-scrollbar {\n  width: 6px;\n}\n\n.wallet-modal-body::-webkit-scrollbar-track {\n  background: #f1f5f9;\n  border-radius: 3px;\n}\n\n.wallet-modal-body::-webkit-scrollbar-thumb {\n  background: #cbd5e1;\n  border-radius: 3px;\n}\n\n.wallet-modal-body::-webkit-scrollbar-thumb:hover {\n  background: #a855f7;\n}\n\n/* Focus states pour l'accessibilité */\n.wallet-option:focus {\n  outline: 2px solid #a855f7;\n  outline-offset: 2px;\n}\n\n.wallet-modal-close:focus {\n  outline: 2px solid rgba(255, 255, 255, 0.5);\n  outline-offset: 2px;\n}\n\n/* Loading state */\n.wallet-option.loading {\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n.wallet-option.loading .wallet-arrow {\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}"