# Fichier CSS, Contient tout les position, couleur et tout du site !!! * { margin: 0; padding: 0; box-sizing: border-box; } /* Le bloc de commentaire # body est conservé pour référence, mais le bloc body actif est le suivant. */ /* # body { # font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; # background: url("Image/fond-halloween-house-485z55q.png") no-repeat center center fixed; # background-size: cover; # color: #262626; # } */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #fafafa; color: #262626; } /* AJOUT: Bloque le défilement de la page entière. Cette classe DOIT être ajoutée à la balise (via HTML/JS) UNIQUEMENT sur la page Messages. */ .messages-active { overflow: hidden; height: 100vh; /* AJOUT CRITIQUE: Assure que la hauteur est bien fixée pour éviter le défilement */ } /* AUTH PAGES */ .auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .auth-container { width: 100%; max-width: 400px; } .auth-box { background: #D3D3D3; border: 1px solid #dbdbdb; padding: 20px; border-radius: 8px; } .logo { font-family: 'Brush Script MT', cursive; font-size: 35px; text-align: center; margin-bottom: 30px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: bold; } .input-group { margin-bottom: 8px; margin-right: 23px } input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #5200de; background: #ffffff08; font-size: 12px; border-radius: 3px; outline: none; } input:focus { border-color: #00bdfc; background: rgb(234, 234, 234)55); } .btn-primary { width: 100%; padding: 8px; background: #0095f6; color: white; border: none; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 15px; transition: background 0.2s; } .btn-primary:hover { background: #1877f2; } .btn-primary:disabled { background: #b2dffc; cursor: not-allowed; } .auth-switch { background: #D3D3D3; border: 1px solid #dbdbdb; padding: 20px; text-align: center; font-size: 14px; border-radius: 8px; margin-top: 10px; } .auth-switch a { color: #0095f6; text-decoration: none; font-weight: 600; cursor: pointer; } .error-message { background: #fed7d7; color: #c53030; padding: 10px; border-radius: 6px; font-size: 12px; margin-bottom: 15px; text-align: center; } .success-message { background: #c6f6d5; color: #22543d; padding: 10px; border-radius: 6px; font-size: 12px; margin-bottom: 15px; text-align: center; } .hidden { display: none !important; } /* MAIN APP */ .main-app { display: none; padding-bottom: 70px; } .navbar { position: fixed; top: 0; left: 0; right: 0; background: white; border-bottom: 1px solid #dbdbdb; z-index: 1000; padding: 8px 0; } .navbar-content { max-width: 935px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .navbar-logo { font-family: 'Brush Script MT', cursive; font-size: 32px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: bold; cursor: pointer; } .navbar-search input { padding: 6px 16px; background: #efefef; border: 1px solid #dbdbdb; border-radius: 8px; width: 220px; font-size: 14px; outline: none; } .navbar-icons { display: flex; gap: 20px; align-items: center; } .nav-icon { font-size: 24px; color: #262626; cursor: pointer; transition: transform 0.2s; } .nav-icon:hover { transform: scale(1.1); } .avatar { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; object-fit: cover; } .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid #dbdbdb; padding: 8px 0; z-index: 1000; } .mobile-nav-content { display: flex; justify-content: space-around; align-items: center; max-width: 600px; margin: 0 auto; } .container { max-width: 935px; margin: 0 auto; padding: 84px 20px 20px; } /* FEED LAYOUT */ .feed-layout { display: grid; grid-template-columns: 1fr 320px; gap: 30px; } .feed-main { max-width: 614px; } /* STORIES */ .stories-container { background: white; border: 1px solid #dbdbdb; border-radius: 8px; padding: 16px; margin-bottom: 24px; display: flex; gap: 16px; overflow-x: auto; } .story { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; } .story-avatar { width: 56px; height: 56px; border-radius: 50%; padding: 2px; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .story-avatar img { width: 100%; height: 100%; border-radius: 50%; border: 2px solid white; object-fit: cover; } .story-name { font-size: 12px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* CREATE POST */ .create-post { background: white; border: 1px solid #dbdbdb; border-radius: 8px; padding: 16px; margin-bottom: 24px; } .create-post-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .post-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .create-post textarea { width: 100%; border: 1px solid #dbdbdb; border-radius: 8px; padding: 0px; font-size: 14px; resize: vertical; min-height: 80px; font-family: inherit; outline: none; } .create-post-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } .post-icons { display: flex; gap: 12px; } .post-icon { font-size: 20px; color: #0095f6; cursor: pointer; } /* POST CARD */ .post-card { background: white; border: 1px solid #dbdbdb; border-radius: 8px; margin-bottom: 24px; } .post-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; } .post-user-info { display: flex; align-items: center; gap: 12px; } .post-username { font-weight: 600; font-size: 14px; } .post-time { color: #8e8e8e; font-size: 12px; } .post-content { padding: 0 16px 12px; font-size: 14px; line-height: 1.5; } .post-actions { padding: 8px 16px; border-top: 1px solid #efefef; display: flex; gap: 16px; } .post-action { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; color: #262626; } .post-action i { font-size: 20px; } .post-action.liked i { color: #ed4956; } /* SIDEBAR */ .feed-sidebar { position: sticky; top: 84px; height: fit-content; } .suggestions-card { background: white; border: 1px solid #dbdbdb; border-radius: 8px; padding: 16px; } .suggestions-header { font-weight: 600; margin-bottom: 16px; color: #8e8e8e; font-size: 14px; } .suggestion-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .suggestion-info { display: flex; align-items: center; gap: 12px; } .suggestion-name { font-weight: 600; font-size: 14px; } .suggestion-subtitle { font-size: 12px; color: #8e8e8e; } .btn-follow { color: #0095f6; font-weight: 600; font-size: 12px; cursor: pointer; background: none; border: none; } .user-menu { position: fixed; top: 60px; right: 20px; background: white; border: 1px solid #dbdbdb; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1001; min-width: 200px; } .user-menu-item { padding: 12px 16px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #efefef; } .user-menu-item:last-child { border-bottom: none; } .user-menu-item:hover { background: #fafafa; } /* ==================== RECHERCHE ==================== */ .search-page-header { margin-bottom: 20px; } .search-page-header h2 { font-size: 24px; font-weight: 300; } .search-bar-page { background: white; border: 1px solid #dbdbdb; border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .search-bar-page i { color: #8e8e8e; font-size: 18px; } .search-bar-page input { flex: 1; border: none; outline: none; font-size: 16px; background: transparent; } .search-results { background: white; border: 1px solid #dbdbdb; border-radius: 8px; } .search-result-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #efefef; transition: background 0.2s; } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background: #fafafa; } .search-result-info { display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; } .search-result-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .search-result-details h4 { font-size: 14px; font-weight: 600; margin-bottom: 2px; } .search-result-details p { font-size: 14px; color: #8e8e8e; } .search-result-actions { display: flex; gap: 8px; } .btn-action { padding: 6px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; } .btn-add-friend { background: #0095f6; color: white; } .btn-add-friend:hover { background: #1877f2; } .btn-message { background: #efefef; color: #262626; } .btn-message:hover { background: #dbdbdb; } .btn-pending { background: #efefef; color: #8e8e8e; cursor: not-allowed; } .btn-remove { background: #ed4956; color: white; } .btn-remove:hover { background: #c92a37; } /* ==================== DEMANDES D'AMIS ==================== */ .page-header { margin-bottom: 20px; } .page-header h2 { font-size: 24px; font-weight: 300; } .friend-request-card { background: white; border: 1px solid #dbdbdb; border-radius: 8px; padding: 16px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; } .friend-request-info { display: flex; align-items: center; gap: 12px; } .friend-request-actions { display: flex; gap: 8px; } .btn-accept { background: #0095f6; color: white; padding: 8px 20px; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; } .btn-accept:hover { background: #1877f2; } .btn-reject { background: #efefef; color: #262626; padding: 8px 20px; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; } .btn-reject:hover { background: #dbdbdb; } /* ==================== LISTE D'AMIS ==================== */ .friends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .friend-card { background: white; border: 1px solid #dbdbdb; border-radius: 8px; padding: 16px; text-align: center; transition: transform 0.2s; } .friend-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .friend-card img { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 12px; object-fit: cover; } .friend-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .friend-card p { font-size: 14px; color: #8e8e8e; margin-bottom: 12px; } .friend-card-actions { display: flex; gap: 8px; justify-content: center; } /* ==================== MESSAGES ==================== */ /* Ajustements pour que Messages prenne toute la page (desktop et mobile) */ .messages-layout { display: grid; grid-template-columns: 360px 1fr; gap: 0; height: 100%; /* Prend 100% de la hauteur restante du conteneur (100vh - 84px) */ margin-top: 0; /* Le décalage est géré par padding-top du parent */ background: #fafafa; /* Fond neutre pour un look plein écran */ border-radius: 0; /* Supprime les coins arrondis pour plein écran */ box-shadow: none; /* Supprime l'ombre pour un look intégré */ border: none; /* Supprime la bordure */ margin-left: 0; margin-right: 0; padding: 0; /* Supprime les paddings internes */ overflow: hidden; /* Garantit que seuls les éléments enfants (.chat-messages) défilent */ } .conversations-sidebar { border-right: 1px solid #e4e6eb; display: flex; flex-direction: column; background: white; } .conversations-header { padding: 16px 20px; border-bottom: 1px solid #e4e6eb; } .conversations-header h2 { font-size: 24px; font-weight: 700; margin-bottom: 12px; } /* Barre de recherche dans la sidebar (AJUSTEMENT fusionné) */ .conversations-search { display: flex; align-items: center; gap: 8px; padding: 8px 20px; /* Fusionné : 8px 20px */ border-bottom: 1px solid #dbdbdb; /* Fusionné : 1px solid #dbdbdb */ background: #f8f8f8; /* Fond léger comme Messenger (AJUSTEMENT) */ } .conversations-search i { color: #8e8e8e; /* Fusionné : #8e8e8e */ font-size: 14px; /* Fusionné : 14px */ } .conversations-search input { flex: 1; border: none; outline: none; font-size: 14px; /* Fusionné : 14px */ background: transparent; color: #050505; padding: 4px 0; /* Fusionné : 4px 0 */ } .conversations-search input::placeholder { color: #65676b; } .conversations-sidebar > div:nth-child(2) { flex: 1; overflow-y: auto; } /* Conversations items style Messenger */ .conversation-item { padding: 8px 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.2s; position: relative; /* AJUSTEMENT pour positionner le time et le badge */ border-radius: 8px; margin: 0 8px; } .conversation-item:hover { background: #f2f2f2; } .conversation-item.active { background: #e7f3ff; } .conversation-item.unread { background: #f0f2f5; } .conversation-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .conversation-info { flex: 1; min-width: 0; padding-right: 8px; } .conversation-name { font-weight: 600; font-size: 15px; margin-bottom: 2px; color: #050505; } .conversation-last-message { font-size: 13px; color: #65676b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conversation-item.unread .conversation-name { font-weight: 700; } .conversation-item.unread .conversation-last-message { color: #050505; font-weight: 600; } /* Badge non lu style Messenger (AJUSTEMENT repositionné) */ .unread-badge { background: #0084ff; color: white; border-radius: 50%; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; padding: 0 6px; flex-shrink: 0; position: absolute; /* AJUSTEMENT */ right: 20px; /* AJUSTEMENT */ bottom: 12px; /* AJUSTEMENT */ } /* Horodatage (AJUSTEMENT repositionné) */ .conversation-time { font-size: 12px; color: #8e8e8e; /* Fusionné : #8e8e8e */ position: absolute; right: 20px; /* Fusionné : 20px */ top: 12px; /* Fusionné : 12px */ } /* Zone de chat */ .chat-area { display: flex; flex-direction: column; background: white; height: 100%; /* Prend toute la hauteur disponible */ } .no-conversation { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #65676b; gap: 16px; } /* En-tête du chat style Messenger (AJUSTEMENT) */ .chat-header { padding: 12px 16px; border-bottom: 1px solid #e4e6eb; display: flex; align-items: center; gap: 12px; background: white; box-shadow: 0 1px 2px rgba(0,0,0,0.05); position: relative; /* AJUSTEMENT pour aligner les actions à droite */ } .chat-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .chat-header-info { flex: 1; } .chat-header-info h3 { font-size: 15px; font-weight: 600; color: #050505; } /* Actions dans l'en-tête du chat (AJOUT) */ .chat-header-actions { display: flex; gap: 16px; margin-left: auto; /* Pousse à droite */ } .chat-action-icon { font-size: 18px; color: #8e8e8e; cursor: pointer; transition: color 0.2s; } .chat-action-icon:hover { color: #0095f6; } /* Messages container */ .chat-messages { flex: 1; /* Prend l'espace restant, permet le défilement */ overflow-y: auto; /* Permet SEULEMENT à la conversation de défiler */ padding: 16px; display: flex; flex-direction: column; gap: 4px; background: white; } /* Messages style Messenger */ .message { display: flex; gap: 8px; max-width: 60%; margin-bottom: 2px; } .message.sent { align-self: flex-end; } .message.received { align-self: flex-start; } .message-bubble { padding: 8px 12px; border-radius: 18px; font-size: 15px; line-height: 1.4; word-wrap: break-word; } /* Messages reçus : gris clair */ .message.received .message-bubble { background: #f0f0f0; color: #050505; } /* Messages envoyés : bleu Messenger */ .message.sent .message-bubble { background: #0084ff; color: white; } /* Bulles de message avec dégradé rose (SPECIFIQUE) */ .message.received .message-bubble { background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%); /* Dégradé rose pour messages reçus */ color: #050505; /* Garde le texte sombre */ } .message.sent .message-bubble { background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%); /* Dégradé rose pour messages envoyés */ color: white; /* Texte blanc pour contraste */ } .message-time { font-size: 11px; color: #65676b; margin-top: 2px; padding: 0 8px; } /* Input container style Messenger */ .chat-input-container { padding: 12px 16px; border-top: 1px solid #e4e6eb; display: flex; gap: 8px; align-items: center; background: white; position: sticky; /* FIXE la barre en bas */ bottom: 0; /* Ancre en bas */ z-index: 10; /* Au-dessus des messages */ } .chat-input-container input { flex: 1; border: none; border-radius: 20px; padding: 10px 12px; font-size: 15px; outline: none; background: #f0f2f5; color: #050505; } .chat-input-container input::placeholder { color: #65676b; } .chat-input-container input:focus { background: #e4e6eb; } .chat-input-container button { background: #0084ff; color: white; border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: background 0.2s; padding: 0; } .chat-input-container button:hover { background: #0073e6; } .chat-input-container button:disabled { background: #e4e6eb; cursor: not-allowed; } /* Scrollbar personnalisée style Messenger */ .chat-messages::-webkit-scrollbar, .conversations-sidebar > div:nth-child(2)::-webkit-scrollbar { width: 8px; } .chat-messages::-webkit-scrollbar-track, .conversations-sidebar > div:nth-child(2)::-webkit-scrollbar-track { background: transparent; } .chat-messages::-webkit-scrollbar-thumb, .conversations-sidebar > div:nth-child(2)::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } .chat-messages::-webkit-scrollbar-thumb:hover, .conversations-sidebar > div:nth-child(2)::-webkit-scrollbar-thumb:hover { background: #999; } /* ==================== BADGES NOTIFICATIONS ==================== */ .nav-icon-wrapper { position: relative; display: inline-block; } .notification-badge { position: absolute; top: -5px; right: -8px; background: #ed4956; color: white; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; border: 2px solid white; } /* ==================== EMPTY STATES ==================== */ .empty-state { text-align: center; padding: 40px 20px; color: #8e8e8e; } .empty-state i { font-size: 48px; margin-bottom: 16px; color: #dbdbdb; } .empty-state p { font-size: 16px; } /* AJUSTEMENT DU CONTAINER MESSAGES (POUR PLEIN ÉCRAN) */ .container.messages-page { /* Prend 100% de la hauteur du body */ height: 100%; max-width: none; /* Permet de prendre toute la largeur */ margin: 0; /* Supprime les marges */ padding: 0; /* Supprime le padding par défaut */ padding-top: 60px; /* AJOUT CRITIQUE: Décale le contenu SOUS la navbar fixe */ overflow: hidden; /* Garantit que ce conteneur ne défile pas */ } /* Bouton retour sur mobile (ajoute dans .chat-header en HTML/JS) (SPECIFIQUE) */ .back-button { display: none; /* Masqué par défaut */ background: #0095f6; color: white; border: none; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; margin-right: 12px; /* Espace avec les autres éléments */ } .back-button:hover { background: #1877f2; } /* ==================== RESPONSIVE ==================== */ @media (max-width: 768px) { .navbar { display: none; } .mobile-nav { display: block; } .feed-layout { grid-template-columns: 1fr; } .feed-sidebar { display: none; } /* Le style .container générique est surchargé par .container.messages-page */ .container { padding: 20px 10px 70px; } /* AJOUT/MODIFICATION SUR MOBILE POUR MESSAGES */ .container.messages-page { height: 100vh; /* Prend 100% de la hauteur du viewport sur mobile */ padding: 0; /* S'assure qu'il n'y a pas de padding supplémentaire */ } .navbar-search { display: none; } .messages-layout { grid-template-columns: 1fr; /* Prend toute la hauteur du viewport moins le mobile-nav (environ 70px) */ height: calc(100vh - 70px) !important; margin-top: 0 !important; /* Pas de navbar desktop */ } /* Gestion de l'affichage de la sidebar de conversations */ .conversations-sidebar { display: none; } .conversations-sidebar.show { display: flex; } /* Gestion de l'affichage de la zone de chat */ .chat-area { display: none; } .chat-area.show { display: flex; } /* Retire le padding-bottom car il crée un débordement avec la hauteur calc() du parent. */ .chat-area { padding-bottom: 0; } .friends-grid { grid-template-columns: 1fr; } .search-result-avatar { width: 40px; height: 40px; } /* Afficher le bouton retour seulement sur mobile quand la chat-area est visible (SPECIFIQUE) */ .chat-area.show .back-button { display: block; } }