/* ====================================================================
   CHATBOT DZ - RESPONSIVE STYLES (VERSION FINALE)
   FICHIER : css/responsive.css
   DESCRIPTION : Gestion totale du mobile (Menu, Layouts, Grilles, Widget)
====================================================================
*/

/* =================================================================
   1. TABLETTE & PETITS ÉCRANS (Max 1024px)
================================================================= */
@media (max-width: 1024px) {
    
    /* TYPOGRAPHIE */
    .hero h1 { font-size: 3rem; }
    
    /* LAYOUTS */
    .container { padding-left: 30px; padding-right: 30px; }
    
    /* GRILLES */
    .pricing-grid.four-cols {
        grid-template-columns: repeat(2, 1fr); /* 2 cartes par ligne */
        gap: 20px;
    }
    
    .features-grid {
        gap: 20px; /* Réduit l'espace */
    }
    
    /* HERO */
    .hero-container { gap: 40px; }
    .phone-mockup { width: 300px; height: 600px; }
    
    /* DASHBOARD (Performance) */
    .analytics-dashboard { max-width: 100%; }
}


/* =================================================================
   2. MOBILE (Max 768px) - LE CŒUR DU PROBLÈME
================================================================= */
@media (max-width: 768px) {

    /* --- A. NAVIGATION (MENU PLEIN ÉCRAN) --- */
    
    /* Cache les éléments desktop de force */
    .nav-right-desktop { display: none !important; }
    
    /* Affiche le burger */
    .menu-toggle { 
        display: flex !important; 
        align-items: center; 
        justify-content: center;
        width: 40px; height: 40px;
        color: var(--text-main); 
        font-size: 1.5rem; 
        cursor: pointer;
        z-index: 10001; /* Au-dessus du menu ouvert */
    }
    
    /* Menu Latéral Coulissant (CORRIGÉ) */
    .nav-menu {
        /* ETAT FERMÉ : Il n'existe pas (évite l'espace blanc à droite) */
        display: none !important; 
        
        /* Positionnement quand il apparaîtra */
        position: fixed !important;
        top: 80px !important; /* Hauteur navbar */
        left: 0 !important;
        width: 100% !important;
        
        /* Hauteur dynamique pour éviter les bugs de barre d'adresse */
        height: calc(100dvh - 80px) !important; 
        
        background-color: #ffffff !important;
        border-top: 1px solid var(--border-light);
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 40px 20px;
        gap: 30px;
        z-index: 9000;
        overflow-y: auto; /* Scroll si le menu est trop long */
    }
    
    .nav-menu.active { 
        /* ETAT OUVERT : Il apparaît et s'anime */
        display: flex !important; 
        animation: slideInMenu 0.3s ease-out forwards;
    }
    
    /* Animation d'entrée pour qu'il ne "pop" pas brutalement */
    @keyframes slideInMenu {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    
    .nav-links {
        flex-direction: column !important;
        width: 100%;
        text-align: center;
        gap: 25px;
    }
    
    .nav-links a {
        font-size: 1.3rem; 
        font-weight: 700;
        display: block;
        padding: 10px;
    }
    
    .nav-buttons-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
        width: 100%;
        max-width: 300px;
        margin-top: 20px;
    }


    /* --- B. LOGO FIX (CRITIQUE) --- */
    /* Force la taille du logo pour qu'il ne devienne jamais géant */
    .logo-image-wrapper {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        flex-shrink: 0;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .main-logo-icon {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }


    /* --- C. HERO SECTION & LAYOUT --- */
    .hero { 
        padding-top: 30px; 
        padding-bottom: 60px;
        overflow: hidden; 
    }
    
    .hero-container {
        flex-direction: column !important; 
        text-align: center;
        gap: 50px;
    }
    
    .hero h1 { 
        font-size: 2.5rem; 
        line-height: 1.2;
    }
    
    .hero p { 
        font-size: 1.1rem;
        margin-left: auto; 
        margin-right: auto; 
    }
    
    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .hero-social-proof {
        flex-direction: column;
        gap: 15px;
        border-top: none;
        padding-top: 10px;
    }
    
    /* Ajustement Téléphone 3D */
    .hero-image-wrapper { perspective: 1000px; }
    .phone-mockup {
        width: 280px;
        height: 560px;
        border-width: 10px;
        transform: rotateY(-5deg) rotateX(2deg);
    }


    /* --- D. SECTIONS SPLIT --- */
    .split-layout, 
    .split-layout.reversed {
        flex-direction: column !important;
        gap: 50px;
        text-align: center;
    }
    
    .split-text { padding: 0 10px; }
    
    .split-text ul.check-list {
        text-align: left;
        display: inline-block;
        margin-top: 20px;
    }
    
    /* Visuals */
    .flow-mockup-container {
        padding: 20px;
        width: 100%;
    }
    
    .ticket-stack {
        height: auto !important;       /* Hauteur automatique selon le contenu */
        transform: none !important;    /* Pas de mise à l'échelle */
        margin-bottom: 20px;
        perspective: none !important;  /* Supprime la profondeur 3D */
        display: block !important;     /* Bloc standard */
        padding: 0 10px;               /* Marges latérales */
    }

    /* Style générique de la carte sur mobile */
    .ticket-card { 
        position: relative !important; /* Devient un élément normal du flux */
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;    /* Annule les rotations 3D */
        left: auto !important;
        top: auto !important;
        margin: 0 auto;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important; /* Ombre douce */
    }

    /* On CACHE les cartes arrière (inutiles et moches sur mobile) */
    .ticket-card.back, 
    .ticket-card.mid {
        display: none !important;
    }

    /* On stylise la carte avant pour qu'elle prenne toute la place */
    .ticket-card.front {
        background-color: #ffffff;
        z-index: 10;
        border: 1px solid var(--border-light);
    }

    /* --- E. GRILLES --- */
    
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }
    
    .integrations-wrapper {
        justify-content: center;
        gap: 15px;
    }
    .integration-card {
        flex: 0 0 46%; /* 2 par ligne */
        min-width: 130px;
        padding: 20px 10px;
    }
    
    .pricing-grid.four-cols {
        grid-template-columns: 1fr !important;
        max-width: 380px;
        margin: 40px auto 0 auto;
    }


    /* --- F. FOOTER --- */
    .footer-content {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 40px;
    }
    .footer-col p, .social-links {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }


    /* --- G. WIDGET CHAT FLOTTANT --- */
    
    /* 1. Avatar dans le chat (Fond Transparent Forcé) */
    .chat-window-header .header-avatar,
    .chat-avatar-circle {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    .chat-bot-avatar {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* 2. Fenêtre Plein Écran */
    .chat-window-container {
        width: 100% !important;
        height: 100dvh !important; /* Hauteur dynamique */
        max-height: 100dvh !important;
        bottom: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        z-index: 20000 !important;
    }
    
    /* 3. Barre de Saisie (Correctif Décalage) */
    .fixed-chat-bar {
        position: fixed !important;
        width: 94% !important;
        /* Centrage absolu pour éviter le décalage à droite */
        left: 3% !important;
        right: 3% !important;
        margin: 0 auto !important;
        transform: none !important;
        
        bottom: 15px !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        z-index: 21000 !important;
    }
    
    .bottom-chat-input {
        font-size: 16px !important; /* Anti-zoom iPhone */
    }
}

/* --- TRES PETITS ÉCRANS (Max 380px) --- */
@media (max-width: 380px) {
    .hero h1 { font-size: 2rem; }
    .phone-mockup { width: 260px; height: 520px; }
    .integration-card { flex: 0 0 100%; } /* 1 par ligne */
}
/* --- CORRECTIF IA STUDIO MOBILE --- */
@media (max-width: 900px) {
    /* On repasse les cartes en vertical sur tablette/mobile */
    .studio-features.horizontal-grid {
        grid-template-columns: 1fr; 
        gap: 15px;
    }
    
    .studio-features.horizontal-grid .studio-card {
        flex-direction: row; /* Icône à gauche */
        text-align: left;
        padding: 20px;
        align-items: flex-start;
    }
    
    .studio-features.horizontal-grid .sc-icon {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    /* On adapte la taille du séquenceur */
    .neural-sequencer.large-mode {
        padding: 30px 15px;
    }
}