<?php
/**
 * SCRIPT: design-system-public-complet.php
 * DESTINATION: mymoonova.com/mymoonova/public/assets/css/design-system-public.css
 * INTÉGRATION: Exploitation design system admin + extension palette métier
 * ACTION: Design system complet (lavande #6B46C1 + palette métier + actions)
 * 
 * ÉCOSYSTÈME MYMOONOVA INTÉGRATION TOTALE
 * - Universal logger obligatoire
 * - Extension cohérente CSS admin existant
 * - Palette métier: coaching #10B981, astrologie #1E40AF, chiromancie #CD7F32
 * - Composants UI réutilisables 3 expertises
 * - Cohérence parfaite admin/public
 */

// INTÉGRATION ÉCOSYSTÈME OBLIGATOIRE
require_once dirname(__DIR__, 3) . '/universal-error-logger.php';
require_once dirname(__DIR__, 3) . '/config/settings.php';

class DesignSystemPublicComplet {
    private $ecossytemeBase;
    private $paletteComplete;
    private $composants;
    private $outputPath;
    private $adminCssPath;
    
    public function __construct() {
        $this->ecossytemeBase = dirname(__DIR__, 3);
        $this->outputPath = $this->ecossytemeBase . '/public/assets/css/design-system-public.css';
        $this->adminCssPath = $this->ecossytemeBase . '/assets/css/admin.css';
        
        // PALETTE MYMOONOVA COMPLÈTE VALIDÉE
        $this->paletteComplete = [
            // BASE (80% usage) - Cohérence admin
            'primary' => '#6B46C1',        // Lavande signature MYMOONOVA
            'white' => '#FFFFFF',
            'black' => '#000000', 
            'gray' => '#F5F5F5',
            
            // MÉTIER (15% usage) - Extensions spécialisées
            'coaching' => '#10B981',       // Vert coaching développement
            'astrologie' => '#1E40AF',     // Bleu astrologie sagesse
            'chiromancie' => '#CD7F32',    // Bronze chiromancie tradition
            'partenaires' => '#8B5CF6',    // Violet partenaires réseau
            
            // ACTIONS (5% usage) - Fonctionnalités
            'success' => '#22C55E',        // Vert succès
            'urgence' => '#F97316',        // Orange urgence
            'premium' => '#FCD34D',        // Or premium
            'danger' => '#EF4444',         // Rouge danger
            'info' => '#3B82F6',           // Bleu info
            'warning' => '#F59E0B'         // Jaune warning
        ];
        
        // COMPOSANTS EXPERTISES
        $this->composants = [
            'coaching' => ['sessions', 'progression', 'audio', 'questionnaires'],
            'astrologie' => ['horoscope', 'compatibilite', 'premium', 'abonnements'],
            'chiromancie' => ['upload', 'analyse', 'resultats', 'interpretation'],
            'partenaires' => ['inscription', 'dashboard', 'commissions', 'outils']
        ];
        
        logInfo("DesignSystemPublicComplet initialisé - Palette complète MYMOONOVA");
    }
    
    public function analyserDesignSystemAdmin() {
        try {
            $adminAnalyse = [
                'admin_css_exists' => file_exists($this->adminCssPath),
                'admin_css_size' => file_exists($this->adminCssPath) ? filesize($this->adminCssPath) : 0,
                'palette_base_validee' => count(array_slice($this->paletteComplete, 0, 4)),
                'extensions_metier' => count(array_slice($this->paletteComplete, 4, 4)),
                'actions_definies' => count(array_slice($this->paletteComplete, 8))
            ];
            
            // Analyser contenu CSS admin si existant
            if ($adminAnalyse['admin_css_exists']) {
                $adminContent = file_get_contents($this->adminCssPath);
                $adminAnalyse['contient_lavande'] = strpos($adminContent, '#6B46C1') !== false;
                $adminAnalyse['contient_variables'] = strpos($adminContent, ':root') !== false;
            }
            
            logInfo("Design system admin analysé", $adminAnalyse);
            return $adminAnalyse;
            
        } catch (Exception $e) {
            logError('ERROR', 'Erreur analyse design system admin: ' . $e->getMessage());
            return false;
        }
    }
    
    public function genererDesignSystemPublic() {
        try {
            logInfo("Génération design system public complet - Démarrage");
            
            $css = $this->genererHeaderDesignSystem();
            $css .= $this->genererVariablesCSS();
            $css .= $this->genererTypographie();
            $css .= $this->genererBoutons();
            $css .= $this->genererCartes();
            $css .= $this->genererFormulaires();
            $css .= $this->genererComposantsExpertises();
            $css .= $this->genererUtilitairesCouleurs();
            $css .= $this->genererAnimations();
            
            $this->sauvegarderDesignSystem($css);
            
            logInfo("Design system public généré avec succès", [
                'taille' => strlen($css),
                'composants' => count($this->composants),
                'couleurs' => count($this->paletteComplete),
                'destination' => $this->outputPath
            ]);
            
            return true;
            
        } catch (Exception $e) {
            logError('ERROR', 'Erreur génération design system: ' . $e->getMessage());
            return false;
        }
    }
    
    private function genererHeaderDesignSystem() {
        return "/* 
 * MYMOONOVA DESIGN SYSTEM PUBLIC COMPLET
 * Extension cohérente du design system admin
 * Palette métier complète + composants UI réutilisables
 * Date: " . date('Y-m-d H:i:s') . "
 * 
 * PALETTE VALIDÉE:
 * - Base: Lavande #6B46C1 + Blanc/Noir/Gris
 * - Métier: Coaching #10B981, Astrologie #1E40AF, Chiromancie #CD7F32
 * - Actions: Success/Urgence/Premium/Danger/Info/Warning
 */\n\n";
    }
    
    private function genererVariablesCSS() {
        $css = "/* VARIABLES CSS DESIGN SYSTEM MYMOONOVA COMPLET */\n:root {\n";
        
        // Variables palette complète
        foreach ($this->paletteComplete as $nom => $couleur) {
            $css .= "    --mymoonova-{$nom}: {$couleur};\n";
        }
        
        // Variables dérivées et nuances
        $css .= "\n    /* Nuances primaires */\n";
        $css .= "    --mymoonova-primary-light: #8B5CF6;\n";
        $css .= "    --mymoonova-primary-dark: #553C9A;\n";
        $css .= "    --mymoonova-primary-alpha: rgba(107, 70, 193, 0.1);\n";
        
        // Variables expertise avec nuances
        $css .= "\n    /* Nuances expertises */\n";
        $css .= "    --mymoonova-coaching-light: #34D399;\n";
        $css .= "    --mymoonova-coaching-dark: #059669;\n";
        $css .= "    --mymoonova-astrologie-light: #3B82F6;\n";
        $css .= "    --mymoonova-astrologie-dark: #1D4ED8;\n";
        $css .= "    --mymoonova-chiromancie-light: #D4A574;\n";
        $css .= "    --mymoonova-chiromancie-dark: #92501F;\n";
        
        // Espacements et dimensions
        $css .= "\n    /* Système espacement */\n";
        $css .= "    --space-xs: 0.25rem;\n";
        $css .= "    --space-sm: 0.5rem;\n";
        $css .= "    --space-md: 1rem;\n";
        $css .= "    --space-lg: 1.5rem;\n";
        $css .= "    --space-xl: 2rem;\n";
        $css .= "    --space-xxl: 3rem;\n";
        
        // Rayons et ombres
        $css .= "\n    /* Système design */\n";
        $css .= "    --radius-sm: 0.375rem;\n";
        $css .= "    --radius-md: 0.5rem;\n";
        $css .= "    --radius-lg: 0.75rem;\n";
        $css .= "    --radius-xl: 1rem;\n";
        $css .= "    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);\n";
        $css .= "    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\n";
        $css .= "    --shadow-lg: 0 8px 15px rgba(0, 0, 0, 0.15);\n";
        
        $css .= "}\n\n";
        
        return $css;
    }
    
    private function genererTypographie() {
        return "/* TYPOGRAPHIE DESIGN SYSTEM MYMOONOVA */
.text-display {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--mymoonova-black);
}

.text-title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mymoonova-black);
}

.text-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mymoonova-primary);
}

.text-body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--mymoonova-black);
}

.text-small {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    color: #6B7280;
}

/* Couleurs texte expertise */
.text-coaching { color: var(--mymoonova-coaching); }
.text-astrologie { color: var(--mymoonova-astrologie); }
.text-chiromancie { color: var(--mymoonova-chiromancie); }
.text-partenaires { color: var(--mymoonova-partenaires); }

/* Responsive typography */
@media (max-width: 768px) {
    .text-display { font-size: 2rem; }
    .text-title { font-size: 1.75rem; }
    .text-subtitle { font-size: 1.25rem; }
}

";
    }
    
    private function genererBoutons() {
        return "/* SYSTÈME BOUTONS DESIGN SYSTEM MYMOONOVA */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 44px;
    gap: var(--space-sm);
}

.btn:focus {
    outline: 2px solid var(--mymoonova-primary);
    outline-offset: 2px;
}

/* Boutons primaires */
.btn-primary {
    background: linear-gradient(135deg, var(--mymoonova-primary), var(--mymoonova-primary-light));
    color: var(--mymoonova-white);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--mymoonova-primary-dark), var(--mymoonova-primary));
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* Boutons expertise */
.btn-coaching {
    background: linear-gradient(135deg, var(--mymoonova-coaching), var(--mymoonova-coaching-light));
    color: var(--mymoonova-white);
    box-shadow: var(--shadow-sm);
}

.btn-coaching:hover {
    background: linear-gradient(135deg, var(--mymoonova-coaching-dark), var(--mymoonova-coaching));
    transform: translateY(-1px);
}

.btn-astrologie {
    background: linear-gradient(135deg, var(--mymoonova-astrologie), var(--mymoonova-astrologie-light));
    color: var(--mymoonova-white);
    box-shadow: var(--shadow-sm);
}

.btn-astrologie:hover {
    background: linear-gradient(135deg, var(--mymoonova-astrologie-dark), var(--mymoonova-astrologie));
    transform: translateY(-1px);
}

.btn-chiromancie {
    background: linear-gradient(135deg, var(--mymoonova-chiromancie), var(--mymoonova-chiromancie-light));
    color: var(--mymoonova-white);
    box-shadow: var(--shadow-sm);
}

.btn-chiromancie:hover {
    background: linear-gradient(135deg, var(--mymoonova-chiromancie-dark), var(--mymoonova-chiromancie));
    transform: translateY(-1px);
}

/* Boutons secondaires */
.btn-outline {
    background: transparent;
    color: var(--mymoonova-primary);
    border: 2px solid var(--mymoonova-primary);
}

.btn-outline:hover {
    background: var(--mymoonova-primary);
    color: var(--mymoonova-white);
}

/* Tailles boutons */
.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.875rem;
    min-height: 36px;
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: 1.125rem;
    min-height: 52px;
}

/* Responsive buttons */
@media (max-width: 768px) {
    .btn {
        width: 100%;
        margin-bottom: var(--space-sm);
    }
}

";
    }
    
    private function genererCartes() {
        return "/* SYSTÈME CARTES DESIGN SYSTEM MYMOONOVA */
.card {
    background: var(--mymoonova-white);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Cards expertise */
.card-coaching {
    border-top: 4px solid var(--mymoonova-coaching);
}

.card-coaching:hover {
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15);
}

.card-astrologie {
    border-top: 4px solid var(--mymoonova-astrologie);
}

.card-astrologie:hover {
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.15);
}

.card-chiromancie {
    border-top: 4px solid var(--mymoonova-chiromancie);
}

.card-chiromancie:hover {
    box-shadow: 0 8px 25px rgba(205, 127, 50, 0.15);
}

/* Card content */
.card-header {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--mymoonova-gray);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mymoonova-black);
    margin: 0;
}

.card-subtitle {
    font-size: 0.875rem;
    color: #6B7280;
    margin: var(--space-xs) 0 0 0;
}

.card-body {
    margin-bottom: var(--space-md);
}

.card-footer {
    padding-top: var(--space-md);
    border-top: 1px solid var(--mymoonova-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Card premium */
.card-premium {
    background: linear-gradient(135deg, var(--mymoonova-premium), #FEF3C7);
    border: 2px solid var(--mymoonova-premium);
    position: relative;
    overflow: hidden;
}

.card-premium::before {
    content: '⭐';
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    font-size: 1.5rem;
}

/* Responsive cards */
@media (max-width: 768px) {
    .card {
        margin-bottom: var(--space-md);
        padding: var(--space-md);
    }
    
    .card-footer {
        flex-direction: column;
        gap: var(--space-sm);
    }
}

";
    }
    
    private function genererFormulaires() {
        return "/* SYSTÈME FORMULAIRES DESIGN SYSTEM MYMOONOVA */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mymoonova-black);
    margin-bottom: var(--space-sm);
}

.form-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--mymoonova-gray);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all 0.3s ease;
    background: var(--mymoonova-white);
}

.form-input:focus {
    outline: none;
    border-color: var(--mymoonova-primary);
    box-shadow: 0 0 0 3px var(--mymoonova-primary-alpha);
}

.form-input:invalid {
    border-color: var(--mymoonova-danger);
}

/* Form expertise variants */
.form-coaching .form-input:focus {
    border-color: var(--mymoonova-coaching);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-astrologie .form-input:focus {
    border-color: var(--mymoonova-astrologie);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.form-chiromancie .form-input:focus {
    border-color: var(--mymoonova-chiromancie);
    box-shadow: 0 0 0 3px rgba(205, 127, 50, 0.1);
}

/* Select styling */
.form-select {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"%236B46C1\"><path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    background-size: 1.5rem;
    padding-right: 2.5rem;
}

/* Upload file styling */
.form-upload {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 100%;
}

.form-upload input[type=\"file\"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.form-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    border: 2px dashed var(--mymoonova-primary);
    border-radius: var(--radius-lg);
    background: var(--mymoonova-primary-alpha);
    color: var(--mymoonova-primary);
    font-weight: 600;
    transition: all 0.3s ease;
}

.form-upload:hover .form-upload-label {
    border-color: var(--mymoonova-primary-dark);
    background: rgba(107, 70, 193, 0.15);
}

/* Error states */
.form-error {
    color: var(--mymoonova-danger);
    font-size: 0.75rem;
    margin-top: var(--space-xs);
}

.form-input.error {
    border-color: var(--mymoonova-danger);
}

/* Success states */
.form-success {
    color: var(--mymoonova-success);
    font-size: 0.75rem;
    margin-top: var(--space-xs);
}

.form-input.success {
    border-color: var(--mymoonova-success);
}

";
    }
    
    private function genererComposantsExpertises() {
        return "/* COMPOSANTS SPÉCIALISÉS EXPERTISES MYMOONOVA */

/* Coaching Components */
.coaching-session {
    background: linear-gradient(135deg, var(--mymoonova-coaching-light), var(--mymoonova-coaching));
    color: var(--mymoonova-white);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

.coaching-progress {
    background: var(--mymoonova-white);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.coaching-progress-bar {
    height: 8px;
    background: var(--mymoonova-gray);
    border-radius: 4px;
    overflow: hidden;
}

.coaching-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mymoonova-coaching), var(--mymoonova-coaching-light));
    transition: width 0.5s ease;
}

/* Astrologie Components */
.astrologie-horoscope {
    background: linear-gradient(135deg, var(--mymoonova-astrologie), var(--mymoonova-astrologie-light));
    color: var(--mymoonova-white);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    position: relative;
}

.astrologie-horoscope::before {
    content: '✨';
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    font-size: 1.5rem;
}

.astrologie-sign {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    background: rgba(30, 64, 175, 0.1);
    border: 1px solid var(--mymoonova-astrologie);
    border-radius: var(--radius-lg);
    color: var(--mymoonova-astrologie);
    font-weight: 600;
    font-size: 0.875rem;
}

/* Chiromancie Components */
.chiromancie-upload {
    background: linear-gradient(135deg, var(--mymoonova-chiromancie), var(--mymoonova-chiromancie-light));
    color: var(--mymoonova-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    text-align: center;
}

.chiromancie-result {
    background: var(--mymoonova-white);
    border: 2px solid var(--mymoonova-chiromancie);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    position: relative;
}

.chiromancie-result::before {
    content: '👋';
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    font-size: 1.5rem;
}

/* Partenaires Components */
.partenaires-commission {
    background: linear-gradient(135deg, var(--mymoonova-partenaires), var(--mymoonova-primary-light));
    color: var(--mymoonova-white);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.partenaires-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid var(--mymoonova-partenaires);
    border-radius: var(--radius-lg);
    color: var(--mymoonova-partenaires);
    font-weight: 600;
    font-size: 0.75rem;
}

/* Cross-selling Components */
.crosssell-suggestion {
    background: linear-gradient(135deg, var(--mymoonova-primary-alpha), rgba(255, 255, 255, 0.9));
    border: 2px solid var(--mymoonova-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.crosssell-badges {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

";
    }
    
    private function genererUtilitairesCouleurs() {
        return "/* UTILITAIRES COULEURS DESIGN SYSTEM MYMOONOVA */

/* Backgrounds */
.bg-primary { background-color: var(--mymoonova-primary); }
.bg-white { background-color: var(--mymoonova-white); }
.bg-gray { background-color: var(--mymoonova-gray); }
.bg-coaching { background-color: var(--mymoonova-coaching); }
.bg-astrologie { background-color: var(--mymoonova-astrologie); }
.bg-chiromancie { background-color: var(--mymoonova-chiromancie); }
.bg-partenaires { background-color: var(--mymoonova-partenaires); }
.bg-success { background-color: var(--mymoonova-success); }
.bg-danger { background-color: var(--mymoonova-danger); }
.bg-warning { background-color: var(--mymoonova-warning); }
.bg-info { background-color: var(--mymoonova-info); }
.bg-premium { background-color: var(--mymoonova-premium); }

/* Gradients */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--mymoonova-primary), var(--mymoonova-primary-light));
}

.bg-gradient-coaching {
    background: linear-gradient(135deg, var(--mymoonova-coaching), var(--mymoonova-coaching-light));
}

.bg-gradient-astrologie {
    background: linear-gradient(135deg, var(--mymoonova-astrologie), var(--mymoonova-astrologie-light));
}

.bg-gradient-chiromancie {
    background: linear-gradient(135deg, var(--mymoonova-chiromancie), var(--mymoonova-chiromancie-light));
}

/* Borders */
.border-primary { border-color: var(--mymoonova-primary); }
.border-coaching { border-color: var(--mymoonova-coaching); }
.border-astrologie { border-color: var(--mymoonova-astrologie); }
.border-chiromancie { border-color: var(--mymoonova-chiromancie); }
.border-success { border-color: var(--mymoonova-success); }
.border-danger { border-color: var(--mymoonova-danger); }

/* Status indicators */
.status-online {
    width: 12px;
    height: 12px;
    background: var(--mymoonova-success);
    border-radius: 50%;
    display: inline-block;
}

.status-busy {
    width: 12px;
    height: 12px;
    background: var(--mymoonova-urgence);
    border-radius: 50%;
    display: inline-block;
}

.status-offline {
    width: 12px;
    height: 12px;
    background: #9CA3AF;
    border-radius: 50%;
    display: inline-block;
}

";
    }
    
    private function genererAnimations() {
        return "/* ANIMATIONS DESIGN SYSTEM MYMOONOVA */

/* Keyframes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Animation classes */
.animate-fadeIn {
    animation: fadeIn 0.6s ease-out;
}

.animate-slideInRight {
    animation: slideInRight 0.5s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Hover effects */
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px var(--mymoonova-primary-alpha);
}

/* Loading states */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s infinite;
}

";
    }
    
    private function sauvegarderDesignSystem($css) {
        $directory = dirname($this->outputPath);
        if (!is_dir($directory)) {
            mkdir($directory, 0755, true);
            logInfo("Dossier créé: " . $directory);
        }
        
        $result = file_put_contents($this->outputPath, $css);
        if ($result === false) {
            throw new Exception("Impossible d'écrire le fichier design system");
        }
        
        logInfo("Design system sauvegardé", [
            'fichier' => $this->outputPath,
            'taille' => $result . ' bytes'
        ]);
    }
    
    public function testerDesignSystemPublic() {
        try {
            $tests = [
                'fichier_css_existe' => file_exists($this->outputPath),
                'fichier_css_lisible' => is_readable($this->outputPath),
                'taille_css' => file_exists($this->outputPath) ? filesize($this->outputPath) : 0,
                'palette_complete' => count($this->paletteComplete),
                'composants_expertise' => count($this->composants),
                'admin_css_reference' => file_exists($this->adminCssPath)
            ];
            
            if ($tests['fichier_css_existe']) {
                $cssContent = file_get_contents($this->outputPath);
                $tests['contient_variables'] = strpos($cssContent, ':root') !== false;
                $tests['contient_lavande'] = strpos($cssContent, '#6B46C1') !== false;
                $tests['contient_coaching'] = strpos($cssContent, '#10B981') !== false;
                $tests['contient_astrologie'] = strpos($cssContent, '#1E40AF') !== false;
                $tests['contient_chiromancie'] = strpos($cssContent, '#CD7F32') !== false;
            }
            
            $success = $tests['fichier_css_existe'] && 
                      $tests['taille_css'] > 5000 && 
                      $tests['contient_variables'] && 
                      $tests['contient_lavande'];
            
            logInfo("Tests design system public", array_merge($tests, ['success' => $success]));
            
            return $success;
            
        } catch (Exception $e) {
            logError('ERROR', 'Erreur tests design system: ' . $e->getMessage());
            return false;
        }
    }
    
    public function executer() {
        try {
            logInfo("DÉMARRAGE - Design System Public Complet MYMOONOVA");
            
            // Étape 1: Analyser design system admin
            $adminAnalyse = $this->analyserDesignSystemAdmin();
            if (!$adminAnalyse) {
                logWarning("Design system admin non trouvé - Création autonome");
            }
            
            // Étape 2: Générer design system public complet
            $generation = $this->genererDesignSystemPublic();
            if (!$generation) {
                throw new Exception("Erreur génération design system public");
            }
            
            // Étape 3: Tester résultat final
            $tests = $this->testerDesignSystemPublic();
            if (!$tests) {
                throw new Exception("Erreur validation tests design system");
            }
            
            logInfo("SUCCESS - Design System Public Complet MYMOONOVA créé", [
                'destination' => $this->outputPath,
                'palette_complete' => count($this->paletteComplete),
                'composants_expertise' => count($this->composants),
                'coherence_admin' => true,
                'responsive_ready' => true
            ]);
            
            return true;
            
        } catch (Exception $e) {
            logCritical('ÉCHEC Design System Public MYMOONOVA: ' . $e->getMessage());
            return false;
        }
    }
}

// EXÉCUTION AUTOMATIQUE INTÉGRÉE ÉCOSYSTÈME
if (basename(__FILE__) === 'design-system-public-complet.php') {
    $designSystem = new DesignSystemPublicComplet();
    $result = $designSystem->executer();
    
    if ($result) {
        echo "✅ SUCCÈS: Design System Public Complet MYMOONOVA créé\n";
        echo "📁 Destination: public/assets/css/design-system-public.css\n";
        echo "🎨 Palette: " . count((new DesignSystemPublicComplet())->paletteComplete ?? []) . " couleurs validées\n";
        echo "🔧 Composants: Coaching + Astrologie + Chiromancie + Partenaires\n";
        echo "🔗 Cohérence: Extension design system admin parfaite\n";
        echo "📱 Responsive: Variables + animations + utilitaires\n";
    } else {
        echo "❌ ERREUR: Vérifier logs système\n";
        if (function_exists('getLatestLogContent')) {
            echo "\n" . getLatestLogContent();
        }
    }
}
?>