@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .hero-pattern {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }
        
        /* Couleurs spécifiques pour les catégories */
        .category-magasin:hover {
            border-color: #FFC600 !important;
            color: #FFC600 !important;
        }
        
        .category-atelier:hover {
            border-color: #00B0F0 !important;
            color: #00B0F0 !important;
        }
        
        .category-ergonomie:hover {
            border-color: #E5007C !important;
            color: #E5007C !important;
        }
        
        .category-acoustique:hover {
            border-color: #AFCA04 !important;
            color: #AFCA04 !important;
        }
        
        /* États actifs pour les catégories */
        .category-magasin.active {
            border-color: #FFC600 !important;
            color: #FFC600 !important;
        }
        
        .category-atelier.active {
            border-color: #00B0F0 !important;
            color: #00B0F0 !important;
        }
        
        .category-ergonomie.active {
            border-color: #E5007C !important;
            color: #E5007C !important;
        }
        
        .category-acoustique.active {
            border-color: #AFCA04 !important;
            color: #AFCA04 !important;
        }
        
        /* Couleurs de survol pour les sous-sous-catégories */
        .subsubcat-magasin:hover {
            background-color: #FFC600 !important;
            color: white !important;
        }
        
        .subsubcat-atelier:hover {
            background-color: #00B0F0 !important;
            color: white !important;
        }
        
        .subsubcat-ergonomique:hover {
            background-color: #E5007C !important;
            color: white !important;
        }
        
        .subsubcat-acoustique:hover {
            background-color: #AFCA04 !important;
            color: white !important;
        }
        
        /* Masquer les flèches des inputs number */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        
        input[type="number"] {
            -moz-appearance: textfield;
        }
        
        /* Styles pour les boutons de quantité */
        .quantity-controls {
            display: flex;
            align-items: center;
            border: 1px solid;
            border-radius: 0.375rem;
            background: white;
        }
        
        .dark .quantity-controls {
            background: rgb(55 65 81);
            border-color: rgb(75 85 99);
        }
        
        .quantity-btn {
            padding: 0.25rem 0.5rem;
            color: rgb(75 85 99);
            transition: all 0.2s;
            font-size: 0.875rem;
        }
        
        .dark .quantity-btn {
            color: rgb(209 213 219);
        }
        
        .quantity-btn:hover {
            background-color: rgb(243 244 246);
        }
        
        .dark .quantity-btn:hover {
            background-color: rgb(75 85 99);
        }
        
        .quantity-input {
            width: 3rem;
            text-align: center;
            border: none;
            background: transparent;
            font-size: 0.875rem;
        }
        
        .quantity-input:focus {
            outline: none;
            ring: 0;
        }
        
        /* Styles d'impression optimisés */
        @media print {
            @page {
                margin: 2cm;
                size: A4;
            }
            
            /* Masquer tous les éléments principaux sauf le modal en mode impression */
            body.printing-mode nav,
            body.printing-mode #produits > div:not(#product-modal),
            body.printing-mode #service,
            body.printing-mode #contact,
            body.printing-mode footer,
            body.printing-mode #floating-buttons,
            body.printing-mode #devis-section,
            body.printing-mode #login-modal {
                display: none !important;
            }
            
            /* Afficher uniquement le modal produit */
            body.printing-mode #product-modal {
                display: block !important;
                position: static !important;
                background: white !important;
                padding: 0 !important;
                margin: 0 !important;
                box-shadow: none !important;
                max-width: none !important;
                width: 100% !important;
                max-height: none !important;
                overflow: visible !important;
                z-index: auto !important;
                inset: auto !important;
            }
            
            /* Styles pour le conteneur principal du modal */
            body.printing-mode #product-modal > div {
                max-width: none !important;
                width: 100% !important;
                max-height: none !important;
                overflow: visible !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                background: white !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            
            /* Styles généraux optimisés pour l'impression */
            body.printing-mode {
                background: white !important;
                color: #333 !important;
                font-family: 'Arial', 'Helvetica', sans-serif !important;
                font-size: 11pt !important;
                line-height: 1.5 !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            
            /* En-tête professionnel optimisé */
            body.printing-mode .sticky {
                position: static !important;
                background: white !important;
                border: none !important;
                border-bottom: 3px solid #1e40af !important;
                padding: 0 0 15px 0 !important;
                margin: 0 0 20px 0 !important;
                box-shadow: none !important;
            }
            
            /* Réorganiser l'ordre d'affichage - Catégorie en premier */
            body.printing-mode .sticky .flex-1 {
                display: flex !important;
                flex-direction: column-reverse !important;
            }
            
            /* Catégorie du produit - en haut */
            body.printing-mode #modal-category {
                font-size: 14pt !important;
                color: #1e40af !important;
                text-transform: uppercase !important;
                letter-spacing: 1px !important;
                font-weight: bold !important;
                margin: 0 0 5px 0 !important;
                order: 1 !important;
            }
            
            /* Sous-titre "Fiche produit" - caché en impression */
            body.printing-mode .sticky h2 {
                display: none !important;
            }
            
            /* Titre principal de la fiche */
            body.printing-mode #modal-title {
                font-size: 18pt !important;
                font-weight: bold !important;
                color: #333 !important;
                margin: 0 !important;
                text-transform: uppercase !important;
                letter-spacing: 0.5px !important;
                order: 2 !important;
            }
            
            /* Contenu principal optimisé */
            body.printing-mode #modal-content {
                padding: 0 !important;
                margin: 0 !important;
            }
            
            /* Masquer les boutons non imprimables */
            body.printing-mode .no-print {
                display: none !important;
            }
            
            /* Forcer l'affichage des contenus du modal */
            body.printing-mode #modal-title,
            body.printing-mode #modal-category,
            body.printing-mode #modal-content,
            body.printing-mode #modal-content * {
                visibility: visible !important;
                display: block !important;
            }
            
            body.printing-mode #modal-content .grid {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 25px !important;
                margin-bottom: 25px !important;
            }
            
            body.printing-mode #modal-content .flex {
                display: flex !important;
            }
            
            body.printing-mode #modal-content .space-y-4 > * {
                display: block !important;
                margin-bottom: 15px !important;
            }
            
            /* Optimisation de l'image produit */
            body.printing-mode #modal-content img {
                max-width: 100% !important;
                height: auto !important;
                max-height: 250px !important;
                object-fit: contain !important;
                border: 1px solid #ddd !important;
                border-radius: 8px !important;
                page-break-inside: avoid !important;
            }
            
            /* Section description optimisée */
            body.printing-mode #modal-content > div:first-child h4 {
                font-size: 13pt !important;
                font-weight: bold !important;
                color: #333 !important;
                margin: 0 0 8px 0 !important;
                border-bottom: 1px solid #ddd !important;
                padding-bottom: 4px !important;
            }
            
            /* Informations produit (référence, livraison) */
            body.printing-mode #modal-content .flex.items-center.space-x-4 span {
                font-size: 10pt !important;
                padding: 4px 8px !important;
                background: #f5f5f5 !important;
                border: 1px solid #ddd !important;
                border-radius: 4px !important;
                margin-right: 10px !important;
            }
            
            /* Prix optimisé */
            body.printing-mode #modal-content .border-t.pt-4 {
                border-top: 2px solid #1e40af !important;
                padding-top: 15px !important;
                margin-top: 15px !important;
            }
            
            body.printing-mode .text-xl.font-bold {
                font-size: 16pt !important;
                font-weight: bold !important;
            }
            
            /* Section spécifications techniques */
            body.printing-mode #modal-content .mt-8 {
                margin-top: 30px !important;
                page-break-inside: avoid !important;
            }
            
            body.printing-mode #modal-content .mt-8 h4 {
                font-size: 14pt !important;
                font-weight: bold !important;
                color: #1e40af !important;
                margin: 0 0 15px 0 !important;
                border-bottom: 2px solid #1e40af !important;
                padding-bottom: 5px !important;
            }
            
            body.printing-mode #modal-content .mt-8 h5 {
                font-size: 12pt !important;
                font-weight: 600 !important;
                color: #333 !important;
                margin: 0 0 10px 0 !important;
                background: #f8f9fa !important;
                padding: 8px 12px !important;
                border-left: 4px solid #1e40af !important;
            }
            
            /* Tableau des caractéristiques optimisé */
            body.printing-mode .space-y-2 > div {
                display: flex !important;
                justify-content: space-between !important;
                padding: 6px 0 !important;
                border-bottom: 1px solid #e5e5e5 !important;
                font-size: 10pt !important;
            }
            
            body.printing-mode .space-y-2 > div:last-child {
                border-bottom: none !important;
            }
            
            body.printing-mode .space-y-2 > div span:first-child {
                color: #666 !important;
                font-weight: 500 !important;
                width: 45% !important;
            }
            
            body.printing-mode .space-y-2 > div span:last-child {
                color: #333 !important;
                font-weight: 600 !important;
                text-align: right !important;
                width: 50% !important;
            }
            
            /* Liste des descriptions optimisée */
            body.printing-mode .space-y-1 li {
                font-size: 10pt !important;
                line-height: 1.4 !important;
                margin-bottom: 6px !important;
                display: flex !important;
                align-items: flex-start !important;
            }
            
            body.printing-mode .space-y-1 li i {
                color: #059669 !important;
                margin-right: 8px !important;
                margin-top: 2px !important;
                flex-shrink: 0 !important;
            }
            
            /* Masquer complètement le pied de page en impression */
            body.printing-mode .contact-footer {
                display: none !important;
            }
            
            /* Ajuster les arrière-plans pour l'impression */
            body.printing-mode .bg-gray-50,
            body.printing-mode .bg-gray-100 {
                background: #f8f9fa !important;
                border: 1px solid #e5e5e5 !important;
            }
            
            /* Éviter les coupures de page */
            body.printing-mode .grid,
            body.printing-mode .space-y-4 > div,
            body.printing-mode h1, 
            body.printing-mode h2, 
            body.printing-mode h3, 
            body.printing-mode h4, 
            body.printing-mode h5, 
            body.printing-mode h6 {
                page-break-inside: avoid !important;
            }
            
            /* Couleurs optimisées pour l'impression */
            body.printing-mode .text-gray-600,
            body.printing-mode .text-gray-500,
            body.printing-mode .text-gray-400 {
                color: #666 !important;
            }
            
            body.printing-mode .text-primary {
                color: #1e40af !important;
            }
            
            body.printing-mode .text-green-600,
            body.printing-mode .text-green-500 {
                color: #059669 !important;
            }
            
            /* Liens lisibles */
            body.printing-mode a {
                color: #1e40af !important;
                text-decoration: underline !important;
                font-weight: 500 !important;
            }
            
            /* Forcer l'affichage du modal caché */
            body.printing-mode #product-modal.hidden {
                display: block !important;
            }
            
            /* Optimisations supplémentaires */
            body.printing-mode * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
        }