/* ============================================ Chatisit.com - Responsive Design Cible: Tablettes (max 900px) & Mobiles (max 600px) À inclure APRÈS style.css dans le ============================================ */ /* --- TABLETTES (max-width: 900px) --- */ @media (max-width: 900px) { /* Header Compact */ .header-content { padding: 0 15px; } .logo { font-size: 20px; } .nav-links { gap: 15px; } .nav-link:not(.btn-nav) { display: none; } /* Cache les liens secondaires */ .btn-nav { padding: 8px 18px; font-size: 13px; } /* Hero Section Ajustée */ .hero { padding: 100px 20px 60px; min-height: auto; } .hero-logo-giant { font-size: clamp(48px, 10vw, 80px); letter-spacing: -2px; } .hero-tagline { font-size: 18px; margin-bottom: 10px; } .hero-seo-subtitle { font-size: 14px; margin-bottom: 30px; max-width: 100%; } .btn-hero { padding: 15px 30px; font-size: 15px; width: 100%; justify-content: center; } /* Features Grid en 2 colonnes */ .features-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .feature-card { padding: 25px; border-radius: 20px; } .feature-icon { font-size: 32px; margin-bottom: 15px; } .feature-card h3 { font-size: 17px; } .feature-card p { font-size: 13px; } /* SEO Content Padding Réduit */ .seo-content { padding: 50px 20px; } .seo-content h2 { font-size: 24px; } .seo-content p { font-size: 14px; } } /* --- MOBILES (max-width: 600px) --- */ @media (max-width: 600px) { /* Header Minimaliste */ .header { padding: 12px 0; } .header-content { padding: 0 15px; } .logo { font-size: 18px; } .btn-nav { padding: 8px 16px; font-size: 12px; } /* Hero Centré & Compact */ .hero { padding: 90px 15px 50px; } .hero::before, .hero::after { display: none; } /* Supprime les blobs pour perf */ .hero-logo-giant { font-size: clamp(40px, 14vw, 60px); letter-spacing: -1.5px; } .hero-tagline { font-size: 16px; } .hero-seo-subtitle { font-size: 13px; line-height: 1.5; margin-bottom: 25px; } .hero-buttons { flex-direction: column; gap: 10px; } .btn-hero { padding: 16px; font-size: 15px; border-radius: 25px; } /* Features en 1 colonne */ .features { padding: 50px 15px; } .section-title { font-size: 26px; margin-bottom: 10px; } .section-subtitle { font-size: 14px; margin-bottom: 40px; } .features-grid { grid-template-columns: 1fr; gap: 15px; } .feature-card { padding: 20px; border-radius: 18px; } .feature-icon { font-size: 28px; margin-bottom: 12px; } .feature-card h3 { font-size: 16px; margin-bottom: 8px; } .feature-card p { font-size: 13px; line-height: 1.6; } /* SEO Content Mobile */ .seo-content { padding: 40px 15px; } .seo-content h2 { font-size: 22px; margin-top: 30px; margin-bottom: 15px; } .seo-content p { font-size: 14px; line-height: 1.7; margin-bottom: 12px; } /* Footer Adapté */ .footer { padding: 30px 15px; } .footer-links { gap: 15px; flex-wrap: wrap; } .footer-links a { font-size: 12px; } .footer-copy { font-size: 11px; } /* Optimisations Chat (si présent sur landing future) */ .chat-container { grid-template-columns: 1fr !important; } .rooms-sidebar { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; z-index: 90; border-top: 1px solid var(--border-light); border-right: none; flex-direction: row; overflow-x: auto; padding: 5px 10px; align-items: center; } .rooms-sidebar h3 { display: none; } .room-item { white-space: nowrap; padding: 8px 12px; margin: 0 3px; border-radius: 20px; font-size: 12px; } .room-description { display: none; } .chat-main { padding-bottom: 70px; } /* Espace pour sidebar fixe */ } /* --- TRÈS PETITS ÉCRANS (max-width: 380px) --- */ @media (max-width: 380px) { .hero-logo-giant { font-size: 36px; } .btn-hero { padding: 14px; font-size: 14px; } .feature-card { padding: 18px; } .section-title { font-size: 24px; } } /* ============================================ CHAT RESPONSIVE - MOBILE & TABLETTE ============================================ */ /* TABLETTE (max 900px) */ @media (max-width: 900px) { .chat-container { grid-template-columns: 200px 1fr; } .rooms-sidebar { padding: 10px; } .room-item { padding: 8px 10px; margin-bottom: 2px; } .room-name { font-size: 13px; } .room-description { display: none; } /* Cache la description sur tablette */ .participant-badge { font-size: 9px; padding: 1px 5px; min-width: 16px; height: 16px; } .chat-messages { padding: 15px; gap: 10px; } .message { max-width: 85%; padding: 10px 14px; } .message-text { font-size: 13px; } .chat-input-area { padding: 10px 15px; } .smileys-bar { gap: 5px; } .smiley-btn { font-size: 16px; width: 28px; height: 28px; } } /* MOBILE (max 600px) - TRANSFORMATION EN APP NATIVE */ @media (max-width: 600px) { /* Header ultra-compact */ .header { height: 50px; } .header-content { padding: 0 10px; } .logo { font-size: 18px; } .nav-menu span { display: none; } /* Cache le pseudo sur mobile */ .nav-link { font-size: 12px; padding: 5px 8px; } .msg-badge { top: -3px; right: -5px; width: 12px; height: 12px; font-size: 8px; line-height: 12px; } /* Container ajusté pour header 50px + footer 40px */ .container { height: calc(100vh - 90px); } /* Sidebar transformée en barre de navigation horizontale FIXE EN BAS */ .chat-container { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .rooms-sidebar { position: fixed; bottom: 0; left: 0; right: 0; height: 55px; z-index: 90; background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); border-top: 1px solid var(--border-light); border-right: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 5px 10px; align-items: center; gap: 5px; scrollbar-width: none; /* Firefox */ } .rooms-sidebar::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .rooms-sidebar h3 { display: none; } .room-item { white-space: nowrap; padding: 8px 14px; margin: 0; border-radius: 20px; font-size: 12px; font-weight: 600; flex-shrink: 0; border: 1px solid #ffeef2; } .room-item.active { background: var(--primary-pink); color: white; border-color: var(--primary-pink); } .room-name { font-size: 12px; color: inherit; } .room-description { display: none; } .participant-badge { margin-left: 5px; position: static; background: rgba(255,255,255,0.3); color: white; } /* Zone de chat prend toute la hauteur restante */ .chat-main { padding-bottom: 65px; /* Espace pour la sidebar fixe */ border-radius: 0; } .chat-header { padding: 10px 15px; } .chat-header h2 { font-size: 14px; } .chat-header p { font-size: 10px; } .chat-messages { padding: 12px; gap: 8px; } .message { max-width: 90%; padding: 10px 14px; border-radius: 16px; } .message-author { font-size: 11px; } .message-text { font-size: 14px; } .message-time { font-size: 9px; } /* Input area compacte */ .chat-input-area { padding: 8px 12px; } .chat-input-wrapper { gap: 8px; } .chat-input { padding: 10px 16px; font-size: 14px; } .btn-primary { padding: 10px 18px; font-size: 13px; } .smileys-bar { gap: 4px; margin-top: 6px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .smileys-bar::-webkit-scrollbar { display: none; } .smiley-btn { font-size: 18px; width: 30px; height: 30px; flex-shrink: 0; } /* Footer global adapté */ .footer-global { height: 40px; font-size: 10px; padding: 8px 0; } .footer-global a { margin: 0 4px; } } /* HEADER MOBILE CORRIGÉ */ @media (max-width: 900px) { .header-content { padding: 0 15px; gap: 10px; } .logo { font-size: 20px; white-space: nowrap; } /* Cache tout SAUF le bouton CTA et le bouton Connexion */ .nav-links .nav-link:not(.btn-nav):not(.mobile-visible) { display: none !important; } .nav-links { gap: 10px; } .btn-nav { padding: 8px 16px; font-size: 13px; } /* NOUVELLE CLASSE POUR LE BOUTON CONNEXION MOBILE */ .mobile-visible { display: inline-block !important; color: var(--primary-dark) !important; font-weight: 600 !important; font-size: 14px !important; } } @media (max-width: 600px) { .header { padding: 10px 0; } .logo { font-size: 18px; } .btn-nav { padding: 7px 14px; font-size: 12px; } .mobile-visible { font-size: 13px !important; } } /* TRÈS PETITS ÉCRANS (max 380px) */ @media (max-width: 380px) { .logo { font-size: 16px; } .nav-link { font-size: 11px; padding: 5px 6px; } .room-item { padding: 6px 10px; font-size: 11px; } .message { max-width: 95%; padding: 8px 12px; } .message-text { font-size: 13px; } .chat-input { font-size: 13px; padding: 8px 14px; } }