/* =====================================================
   FICHIER CSS UNIQUE - RESTAURANT HUB
   Animations Texte HERO incluses
   ===================================================== */

/* =====================================================
   1. FONTS & BASE
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
    font-family: 'Inter', sans-serif;
}

body {
    background-color: #ffffff;
    color: #0a0a0a;
}

/* =====================================================
   2. ANIMATIONS TEXTE HERO ✨
   ===================================================== */

/* Animation Fade In + Slide Up */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation Fade In */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Animation Slide In Left */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation Slide In Right */
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation Glow Orange */
@keyframes orangeGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(238, 124, 13, 0.3),
                     0 0 20px rgba(238, 124, 13, 0.2),
                     0 0 30px rgba(238, 124, 13, 0.1);
    }
    50% {
        text-shadow: 0 0 20px rgba(238, 124, 13, 0.6),
                     0 0 40px rgba(238, 124, 13, 0.4),
                     0 0 60px rgba(238, 124, 13, 0.2);
    }
}

/* Animation Scale In */
@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation Bounce In */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation Text Reveal */
@keyframes textReveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* Classes d'animation pour le texte HERO */

  <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        * { font-family: 'Inter', sans-serif; }
        
        /* Animation HERO */
        @keyframes fadeInUp {
            0% { opacity: 0; transform: translateY(50px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes orangeGlow {
            0%, 100% { text-shadow: 0 0 10px rgba(238, 124, 13, 0.3); }
            50% { text-shadow: 0 0 30px rgba(238, 124, 13, 0.6); }
        }
        
        .hero-title { animation: fadeInUp 1s ease-out 0.3s both; }
        .hero-subtitle { animation: fadeInUp 1s ease-out 0.6s both; }
        .hero-description { animation: fadeIn 1.2s ease-out 0.9s both; }
        .hero-btn { animation: fadeInUp 0.8s ease-out 1.2s both; }
        .hero-gradient { animation: orangeGlow 3s ease-in-out infinite; }
        
        /* Phone Mockup */
        .phone-mockup-wrapper {
            position: relative;
            animation: fadeInUp 1s ease-out 0.5s both;
        }
        
        .phone-halo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 350px;
            height: 350px;
            background: radial-gradient(circle, rgba(238, 124, 13, 0.3) 0%, transparent 70%);
            border-radius: 50%;
        }
        
        .phone-container {
            width: 300px;
            height: 600px;
            background: #0a0a0a;
            border-radius: 40px;
            padding: 12px;
            box-shadow: 0 25px 50px rgba(238, 124, 13, 0.3);
            position: relative;
        }
        
        .phone-notch {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 25px;
            background: #0a0a0a;
            border-radius: 0 0 15px 15px;
        }
        
        .phone-screen {
            background: #ffffff;
            height: 100%;
            border-radius: 32px;
            overflow: hidden;
            position: relative;
        }
        
        .phone-header {
            display: flex;
            justify-content: space-between;
            padding: 15px 20px 10px;
            font-size: 12px;
            color: #0a0a0a;
        }
        
        .phone-logo-section {
            text-align: center;
            padding: 20px;
        }
        
        .phone-logo-bowl {
            font-size: 48px;
            margin-bottom: 10px;
        }
        
        .phone-logo-title {
            font-size: 24px;
            font-weight: 700;
            color: #EE7C0D;
            margin-bottom: 5px;
        }
        
        .phone-logo-sub {
            font-size: 10px;
            color: #6b7280;
            text-transform: uppercase;
        }
        
        .phone-menu {
            padding: 15px;
        }
        
        .phone-menu-item {
            display: flex;
            align-items: center;
            padding: 12px;
            margin-bottom: 10px;
            background: #f9f9f9;
            border-radius: 12px;
            border: 1px solid #EE7C0D;
        }
        
        .phone-menu-icon {
            width: 40px;
            height: 40px;
            background: rgba(238, 124, 13, 0.1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }
        
        .phone-menu-info {
            flex: 1;
        }
        
        .phone-menu-name {
            font-size: 14px;
            font-weight: 600;
            color: #0a0a0a;
        }
        
        .phone-menu-price {
            font-size: 12px;
            color: #EE7C0D;
            font-weight: 600;
        }
    </style>

/* =====================================================
   3. GRADIENTS ORANGE (#EE7C0D → #EF7900)
   ===================================================== */

.gradient-bg {
    background: linear-gradient(135deg, #EE7C0D 0%, #EF7900 100%);
}

.gradient-bg-dark {
    background: linear-gradient(135deg, #EF7900 0%, #EE7C0D 100%);
}

.gradient-text {
    background: linear-gradient(135deg, #EE7C0D 0%, #EF7900 100%);
    -webkit-background-clip: text;
    -webkit-text-clip: text;
    background-clip: text;
    color: transparent;
}

.gradient-text-light {
    background: linear-gradient(135deg, #F5A22E 0%, #EE7C0D 100%);
    -webkit-background-clip: text;
    -webkit-text-clip: text;
    background-clip: text;
    color: transparent;
}

/* =====================================================
   4. COULEURS ORANGE (PRIMAIRE)
   ===================================================== */

.color-primary { color: #EE7C0D; }
.bg-primary { background-color: #EE7C0D; }

.color-secondary { color: #EF7900; }
.bg-secondary { background-color: #EF7900; }

.color-light { color: #F5A22E; }
.bg-light { background-color: #F5A22E; }

.color-dark { color: #D46B08; }
.bg-dark { background-color: #D46B08; }

/* =====================================================
   5. COULEUR NOIR (SECONDAIRE)
   ===================================================== */

.color-black { color: #0a0a0a; }
.bg-black { background-color: #0a0a0a; }

.color-gray-dark { color: #1f1f1f; }
.bg-gray-dark { background-color: #1f1f1f; }

.color-gray { color: #3f3f3f; }
.bg-gray { background-color: #3f3f3f; }

.color-gray-light { color: #6b7280; }
.bg-gray-light { background-color: #f3f4f6; }

.color-white { color: #ffffff; }
.bg-white { background-color: #ffffff; }

/* =====================================================
   6. HERO SECTION avec IMAGE
   ===================================================== */

.hero {
    position: relative;
    padding: 100px 0;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* =====================================================
   7. BACKGROUND IMAGES
   ===================================================== */

.background-hero {
    background-image: url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-section {
    background-image: url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Autres backgrounds... (restent identiques) */
.background-overlay,
.background-login,
.background-parallax,
.background-contact,
.background-dashboard,
.background-restaurant,
.background-menu,
.background-custom,
.background-fixed {
    /* Voir le CSS précédent pour les URLs */
}

/* =====================================================
   8. BOUTONS PRINCIPAUX
   ===================================================== */

.btn-primary {
    background: linear-gradient(135deg, #EE7C0D 0%, #EF7900 100%);
    color: #ffffff;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(238, 124, 13, 0.4);
    background: linear-gradient(135deg, #F5A22E 0%, #EE7C0D 100%);
}

.btn-secondary {
    background: #0a0a0a;
    color: #ffffff;
    border: 2px solid #EE7C0D;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #EE7C0D 0%, #EF7900 100%);
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: #EE7C0D;
    border: 2px solid #EE7C0D;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: linear-gradient(135deg, #EE7C0D 0%, #EF7900 100%);
    color: #ffffff;
    transform: translateY(-2px);
}

/* =====================================================
   9. SIDEBAR, CARDS, FORMS, TABLEAUX, BADGES, STATS
   ===================================================== */

/* (Ces sections restent identiques au CSS précédent) */

.sidebar,
.card,
.form-input,
table,
.status-badge,
.stat-card {
    /* Voir le CSS précédent */
}

/* =====================================================
   10. TEXTES & TITRES
   ===================================================== */

h1, h2, h3, h4, h5, h6 {
    color: #0a0a0a;
}

.text-primary { color: #EE7C0D; }
.text-primary-light { color: #F5A22E; }
.text-primary-dark { color: #D46B08; }
.text-secondary { color: #EF7900; }
.text-black { color: #0a0a0a; }
.text-gray { color: #6b7280; }
.text-muted { color: #9ca3af; }
.text-white { color: #ffffff; }

/* =====================================================
   11. UTILS & EFFETS
   ===================================================== */

.shadow-orange {
    box-shadow: 0 0 40px rgba(238, 124, 13, 0.2);
}

.shadow-orange-glow {
    box-shadow: 0 0 60px rgba(238, 124, 13, 0.4);
}

.border-orange { border: 1px solid #EE7C0D; }
.border-orange-glow {
    border: 2px solid #EE7C0D;
    box-shadow: 0 0 20px rgba(238, 124, 13, 0.2);
}

.border-black { border: 1px solid #0a0a0a; }
.border-gray { border: 1px solid #e5e7eb; }

/* =====================================================
   12. RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
    .hero {
        min-height: 400px;
        padding: 60px 0;
    }
    
    .hero-title {
        font-size: 3rem;
    }
}

/* =====================================================
   FIN DU FICHIER CSS
   ===================================================== */