/* ==========================================
	   STYLES COMMUNS POUR TOUTES LES PUBLICATIONS - VERSION OPTIMISÉE
	   ========================================== */

	/* Container principal */
	.feed-container {
	    max-width: 1000px;
	    margin: 0 auto;
	    padding: 10px;
	}

	/* POST STYLE FACEBOOK/INSTAGRAM */
	.post-card {
	    background: white;
	    border-radius: 15px;
	    margin-bottom: 15px;
	    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	    overflow: hidden;
	    transition: box-shadow 0.3s;
	}

	.post-card:hover {
	    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	}

	/* Header du post */
	.post-header {
	    display: flex;
	    align-items: center;
	    padding: 15px 20px;
	    border-bottom: 1px solid #efefef;
	}

	.post-author-avatar {
	    width: 50px;
	    height: 50px;
	    border-radius: 50%;
	    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: white;
	    font-size: 1.3rem;
	    font-weight: bold;
	    margin-right: 12px;
	    flex-shrink: 0;
	}

	.post-author-info {
	    flex: 1;
	}

	.post-author-name {
	    font-weight: 600;
	    font-size: 1rem;
	    color: #262626;
	    margin-bottom: 2px;
	}

	.post-category {
	    font-size: 0.85rem;
	    color: #8e8e8e;
	    display: flex;
	    align-items: center;
	    gap: 5px;
	}

	.post-date {
	    font-size: 0.8rem;
	    color: #8e8e8e;
	}

	/* Galerie de médias */
	.post-media {
	    position: relative;
	    background: #000;
	}

	.media-carousel {
	    position: relative;
	    width: 100%;
	    overflow: hidden;
	}

	.media-slides {
	    display: flex;
	    transition: transform 0.4s ease;
	}

	.media-slide {
	    min-width: 100%;
	    height: 650px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    background: #000;
	}

	.media-slide img {
	    max-width: 100%;
	    max-height: 650px;
	    object-fit: contain;
	}

	.media-slide video {
	    max-width: 100%;
	    max-height: 650px;
	    width: 100%;
	}

	.media-slide audio {
	    width: 90%;
	}

	.media-slide .pdf-preview {
	    color: white;
	    text-align: center;
	    padding: 40px;
	}

	.media-slide .pdf-preview i {
	    font-size: 5rem;
	    margin-bottom: 20px;
	    opacity: 0.8;
	}

	/* Boutons de navigation carousel */
	.carousel-btn {
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    background: rgba(255,255,255,0.9);
	    border: none;
	    width: 40px;
	    height: 40px;
	    border-radius: 50%;
	    cursor: pointer;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    z-index: 10;
	    transition: background 0.3s;
	}

	.carousel-btn:hover {
	    background: white;
	}

	.carousel-btn.prev {
	    left: 10px;
	}

	.carousel-btn.next {
	    right: 10px;
	}

	.carousel-btn:disabled {
	    opacity: 0.3;
	    cursor: not-allowed;
	}

	/* Indicateurs de slides */
	.carousel-indicators {
	    position: absolute;
	    bottom: 15px;
	    left: 50%;
	    transform: translateX(-50%);
	    display: flex;
	    gap: 8px;
	    z-index: 10;
	}

	.carousel-indicator {
	    width: 8px;
	    height: 8px;
	    border-radius: 50%;
	    background: rgba(255,255,255,0.6);
	    transition: all 0.3s;
	    cursor: pointer;
	}

	.carousel-indicator.active {
	    background: white;
	    width: 24px;
	    border-radius: 4px;
	}

	/* Badge compteur de médias */
	.media-counter {
	    position: absolute;
	    top: 15px;
	    right: 15px;
	    background: rgba(0,0,0,0.7);
	    color: white;
	    padding: 6px 12px;
	    border-radius: 20px;
	    font-size: 0.85rem;
	    font-weight: 600;
	    z-index: 10;
	    backdrop-filter: blur(10px);
	}

	/* Contenu du post */
	.post-content {
	    padding: 20px 25px;
	}

	.post-title {
	    font-size: 1.4rem;
	    font-weight: bold;
	    color: #262626;
	    margin-bottom: 12px;
	    line-height: 1.4;
	}

	.post-text {
	    font-size: 1rem;
	    color: #262626;
	    line-height: 1.7;
	    margin-bottom: 10px;
	    white-space: pre-line;
	    word-wrap: break-word;
	}

	.post-text.collapsed {
	    display: -webkit-box;
	    -webkit-line-clamp: 3;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	}

	.btn-read-more {
	    color: #8e8e8e;
	    font-size: 0.9rem;
	    background: none;
	    border: none;
	    padding: 0;
	    cursor: pointer;
	    font-weight: 500;
	}

	.btn-read-more:hover {
	    color: var(--primary-color);
	}

	/* Section statistiques */
	.post-stats {
	    display: flex;
	    justify-content: space-between;
	    padding: 12px 25px;
	    border-top: 1px solid #efefef;
	    border-bottom: 1px solid #efefef;
	    font-size: 0.95rem;
	    color: #65676b;
	}

	.stats-likes {
	    display: flex;
	    align-items: center;
	    gap: 8px;
	    cursor: pointer;
	}

	.stats-likes:hover {
	    text-decoration: underline;
	}

	.like-icons {
	    display: flex;
	    margin-right: 5px;
	}

	.like-icon {
	    width: 22px;
	    height: 22px;
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 0.7rem;
	    margin-left: -5px;
	    border: 2px solid white;
	}

	.like-icon.heart {
	    background: linear-gradient(135deg, #f093fb, #f5576c);
	    color: white;
	}

	.stats-comments {
	    cursor: pointer;
	}

	.stats-comments:hover {
	    text-decoration: underline;
	}

	/* Boutons d'actions */
	.post-actions {
	    display: flex;
	    padding: 10px 25px;
	    border-bottom: 1px solid #efefef;
	}

	.action-btn {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    gap: 8px;
	    padding: 12px;
	    background: none;
	    border: none;
	    color: #65676b;
	    font-weight: 600;
	    font-size: 1rem;
	    cursor: pointer;
	    border-radius: 6px;
	    transition: background 0.2s;
	}

	.action-btn:hover {
	    background: #f0f2f5;
	}

	.action-btn.liked {
	    color: #f5576c;
	}

	.action-btn i {
	    font-size: 1.3rem;
	}

	/* Section commentaires */
	.post-comments {
	    padding: 20px 25px;
	    max-height: 500px;
	    overflow-y: auto;
	}

	.comment-item {
	    display: flex;
	    gap: 12px;
	    margin-bottom: 18px;
	}

	.comment-avatar {
	    width: 40px;
	    height: 40px;
	    border-radius: 50%;
	    background: linear-gradient(135deg, #667eea, #764ba2);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: white;
	    font-weight: bold;
	    font-size: 1rem;
	    flex-shrink: 0;
	}

	.comment-content {
	    flex: 1;
	    background: #f0f2f5;
	    padding: 12px 16px;
	    border-radius: 18px;
	    word-wrap: break-word;
	}

	.comment-author {
	    font-weight: 600;
	    font-size: 0.95rem;
	    color: #262626;
	    margin-bottom: 4px;
	}

	.comment-text {
	    font-size: 0.95rem;
	    color: #262626;
	    line-height: 1.5;
	    word-wrap: break-word;
	}

	.comment-date {
	    font-size: 0.8rem;
	    color: #8e8e8e;
	    margin-top: 5px;
	    padding-left: 16px;
	}

	.show-more-comments {
	    text-align: center;
	    padding: 10px;
	}

	.btn-show-more {
	    color: #65676b;
	    font-weight: 600;
	    background: none;
	    border: none;
	    cursor: pointer;
	    font-size: 0.95rem;
	}

	.btn-show-more:hover {
	    text-decoration: underline;
	}

	/* Formulaire d'ajout de commentaire */
	.comment-form {
	    padding: 20px 25px;
	    border-top: 1px solid #efefef;
	    display: flex;
	    gap: 12px;
	}

	.comment-input-avatar {
	    width: 40px;
	    height: 40px;
	    border-radius: 50%;
	    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: white;
	    font-weight: bold;
	    font-size: 1rem;
	    flex-shrink: 0;
	}

	.comment-input-wrapper {
	    flex: 1;
	    display: flex;
	    gap: 12px;
	    align-items: flex-start;
	}

	.comment-input {
	    flex: 1;
	    background: #f0f2f5;
	    border: none;
	    border-radius: 20px;
	    padding: 12px 18px;
	    font-size: 0.95rem;
	    resize: none;
	    min-height: 44px;
	    max-height: 120px;
	    font-family: inherit;
	}

	.comment-input:focus {
	    outline: none;
	    background: #e4e6eb;
	}

	.btn-send-comment {
	    background: var(--primary-color);
	    color: white;
	    border: none;
	    width: 44px;
	    height: 44px;
	    border-radius: 50%;
	    cursor: pointer;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    transition: background 0.3s;
	    flex-shrink: 0;
	}

	.btn-send-comment:hover {
	    background: var(--secondary-color);
	}

	.btn-send-comment:disabled {
	    opacity: 0.5;
	    cursor: not-allowed;
	}

	/* Message "Aucune publication" */
	.no-posts {
	    text-align: center;
	    padding: 80px 20px;
	    background: white;
	    border-radius: 15px;
	    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	}

	.no-posts i {
	    font-size: 5rem;
	    color: #ddd;
	    margin-bottom: 20px;
	}

	.no-posts h3 {
	    color: #666;
	    margin-bottom: 10px;
	}

	.no-posts p {
	    color: #999;
	}

	/* ==========================================
	   RESPONSIVITÉ MOBILE
	   ========================================== */

	/* Très grands écrans */
	@media (min-width: 1400px) {
	    .feed-container {
		max-width: 1200px;
	    }
	    
	    .media-slide {
		height: 750px;
	    }
	    
	    .media-slide img,
	    .media-slide video {
		max-height: 750px;
	    }
	}

	/* Tablettes et petits laptops */
	@media (max-width: 1024px) {
	    .feed-container {
		max-width: 800px;
		padding: 15px;
	    }
	    
	    .media-slide {
		height: 550px;
	    }
	    
	    .media-slide img,
	    .media-slide video {
		max-height: 550px;
	    }
	}

	/* Tablettes portrait et mobiles larges */
	@media (max-width: 768px) {
	    .feed-container {
		max-width: 100%;
		padding: 10px;
	    }

	    .post-card {
		border-radius: 10px;
		margin-bottom: 15px;
	    }

	    .post-header {
		padding: 12px 15px;
	    }

	    .post-author-avatar {
		width: 42px;
		height: 42px;
		font-size: 1.1rem;
	    }

	    .post-author-name {
		font-size: 0.95rem;
	    }

	    .post-category {
		font-size: 0.8rem;
	    }

	    .media-slide {
		height: 400px;
	    }
	    
	    .media-slide img,
	    .media-slide video {
		max-height: 400px;
	    }

	    .carousel-btn {
		width: 35px;
		height: 35px;
	    }

	    .media-counter {
		font-size: 0.8rem;
		padding: 5px 10px;
	    }

	    .post-content {
		padding: 15px 18px;
	    }

	    .post-title {
		font-size: 1.2rem;
	    }
	    
	    .post-text {
		font-size: 0.95rem;
		line-height: 1.6;
	    }

	    .post-stats {
		padding: 10px 18px;
		font-size: 0.9rem;
	    }

	    .post-actions {
		padding: 8px 18px;
	    }

	    .action-btn {
		font-size: 0.9rem;
		padding: 10px;
	    }

	    .action-btn i {
		font-size: 1.2rem;
	    }

	    .post-comments {
		padding: 15px 18px;
		max-height: 400px;
	    }

	    .comment-avatar {
		width: 36px;
		height: 36px;
		font-size: 0.9rem;
	    }

	    .comment-content {
		padding: 10px 14px;
	    }

	    .comment-author {
		font-size: 0.9rem;
	    }

	    .comment-text {
		font-size: 0.9rem;
	    }

	    .comment-date {
		font-size: 0.75rem;
		padding-left: 14px;
	    }

	    .comment-form {
		padding: 15px 18px;
	    }

	    .comment-input-avatar {
		width: 36px;
		height: 36px;
		font-size: 0.9rem;
	    }

	    .comment-input {
		padding: 10px 16px;
		font-size: 0.9rem;
		min-height: 40px;
	    }

	    .btn-send-comment {
		width: 40px;
		height: 40px;
	    }
	}

	/* Mobiles en mode portrait */
	@media (max-width: 480px) {
	    .feed-container {
		padding: 5px;
	    }

	    .post-card {
		border-radius: 0;
		margin-bottom: 10px;
	    }

	    .post-header {
		padding: 10px 12px;
	    }

	    .post-author-avatar {
		width: 38px;
		height: 38px;
		font-size: 1rem;
		margin-right: 10px;
	    }

	    .post-author-name {
		font-size: 0.9rem;
	    }

	    .media-slide {
		height: 300px;
	    }
	    
	    .media-slide img,
	    .media-slide video {
		max-height: 300px;
	    }

	    .carousel-btn {
		width: 30px;
		height: 30px;
		font-size: 0.9rem;
	    }

	    .carousel-btn.prev {
		left: 5px;
	    }

	    .carousel-btn.next {
		right: 5px;
	    }

	    .media-counter {
		font-size: 0.75rem;
		padding: 4px 8px;
		top: 10px;
		right: 10px;
	    }

	    .carousel-indicators {
		bottom: 10px;
		gap: 6px;
	    }

	    .carousel-indicator {
		width: 6px;
		height: 6px;
	    }

	    .carousel-indicator.active {
		width: 18px;
	    }

	    .post-content {
		padding: 12px 15px;
	    }

	    .post-title {
		font-size: 1.1rem;
		margin-bottom: 10px;
	    }
	    
	    .post-text {
		font-size: 0.9rem;
		line-height: 1.5;
	    }

	    .btn-read-more {
		font-size: 0.85rem;
	    }

	    .post-stats {
		padding: 8px 15px;
		font-size: 0.85rem;
	    }

	    .like-icon {
		width: 20px;
		height: 20px;
	    }

	    .post-actions {
		padding: 6px 15px;
	    }

	    .action-btn {
		font-size: 0.85rem;
		padding: 8px 6px;
		gap: 6px;
	    }

	    .action-btn i {
		font-size: 1.1rem;
	    }

	    .post-comments {
		padding: 12px 15px;
		max-height: 350px;
	    }

	    .comment-item {
		gap: 10px;
		margin-bottom: 15px;
	    }

	    .comment-avatar {
		width: 32px;
		height: 32px;
		font-size: 0.85rem;
	    }

	    .comment-content {
		padding: 8px 12px;
	    }

	    .comment-author {
		font-size: 0.85rem;
	    }

	    .comment-text {
		font-size: 0.85rem;
		line-height: 1.4;
	    }

	    .comment-date {
		font-size: 0.7rem;
		padding-left: 12px;
	    }

	    .comment-form {
		padding: 12px 15px;
		gap: 10px;
	    }

	    .comment-input-avatar {
		width: 32px;
		height: 32px;
		font-size: 0.85rem;
	    }

	    .comment-input-wrapper {
		gap: 10px;
	    }

	    .comment-input {
		padding: 8px 14px;
		font-size: 0.85rem;
		min-height: 36px;
		border-radius: 18px;
	    }

	    .btn-send-comment {
		width: 36px;
		height: 36px;
	    }

	    .no-posts {
		padding: 60px 15px;
	    }

	    .no-posts i {
		font-size: 4rem;
	    }

	    .no-posts h3 {
		font-size: 1.2rem;
	    }

	    .no-posts p {
		font-size: 0.9rem;
	    }
	}

	/* Très petits écrans */
	@media (max-width: 360px) {
	    .post-title {
		font-size: 1rem;
	    }

	    .post-text {
		font-size: 0.85rem;
	    }

	    .action-btn {
		font-size: 0.8rem;
		gap: 4px;
	    }

	    .action-btn span {
		display: none;
	    }
	}