# 📄 Documentation - Styles des Publications

## 📁 Fichiers concernés

### CSS
- **`publications.css`** : Styles dédiés aux publications (PRINCIPAL)
- **`feed.css`** : Styles généraux du fil d'actualités

### JavaScript
- **`feed.js`** : Logique d'affichage et interactions
- **`feed_editor.js`** : Logique de l'éditeur de publications

### PHP
- **`feed.php`** : Page principale du fil d'actualités
- **`feed_editor.php`** : Composant éditeur de publications

---

## 🎨 Structure CSS - publications.css

### 1. Isolation des publications
```css
.publication-item { ... }
```
- Encapsule chaque publication dans un contexte isolé
- Empêche les conflits de styles entre publications

### 2. Troncature du contenu
```css
.publication-content-preview { max-height: 220px; }
.publication-content-preview.expanded { max-height: 10000px; }
```
- **220px** : Hauteur maximale du contenu tronqué
- **10000px** : Hauteur "infinie" pour le contenu déplié
- **⚠️ IMPORTANT** : Cette valeur doit correspondre à `feed.js` ligne 90

### 3. Boutons "Lire la suite"
```css
[id^="read-more-btn-"] { ... }
```
- Style uniforme pour tous les boutons
- Animation au survol
- Responsive

---

## ⚙️ Configuration importante

### Hauteur de troncature
Pour modifier la hauteur de troncature, **modifier dans 2 fichiers** :

1. **`publications.css`** ligne 36 :
   ```css
   .publication-content-preview {
       max-height: 250px; /* ← MODIFIER ICI (actuellement 250px) */
   }
   ```

2. **`feed.js`** ligne 76 :
   ```javascript
   const maxHeight = 250; // ← MODIFIER ICI (même valeur)
   ```

**Note** : La hauteur a été augmentée de 220px à 250px (+30px) pour éviter l'effet de flou en bas lors du déploiement.

### Seuil d'affichage du bouton
**`feed.js`** ligne 96 :
```javascript
if (fullHeight > maxHeight + 20) { // +20px de marge
```
- Le bouton s'affiche si le contenu dépasse `maxHeight + 20px`
- Modifier `+20` pour ajuster la sensibilité

---

## 🔧 Maintenance

### Ajouter un nouveau style de publication

1. **Ouvrir** `publications.css`
2. **Ajouter** votre règle CSS dans la section appropriée
3. **Commenter** clairement votre ajout
4. **Tester** sur plusieurs publications

### Modifier l'animation de déploiement

**`publications.css`** ligne 40 :
```css
transition: max-height 0.5s ease-in-out; /* Durée et type d'animation */
```

### Modifier l'effet de fondu

**`publications.css`** lignes 49-59 :
```css
.publication-content-preview:not(.expanded)::after {
    height: 60px; /* Hauteur du dégradé */
    background: linear-gradient(to bottom, transparent, white);
}
```

---

## 🐛 Dépannage

### Le bouton "Lire la suite" ne s'affiche pas
1. Vérifier que `maxHeight` est identique dans CSS et JS
2. Ouvrir la console (F12) et chercher les logs `📏 Post X:`
3. Vérifier que `fullHeight > maxHeight + 20`

### Le contenu ne se déplie pas
1. Vérifier que la classe `.expanded` est bien ajoutée (Inspecter l'élément)
2. Vérifier que `max-height: 10000px` est appliqué
3. Vérifier qu'il n'y a pas de conflit CSS (onglet Styles dans DevTools)

### Animation saccadée
1. Augmenter `max-height` de `.expanded` (actuellement 10000px)
2. Modifier la durée de transition (actuellement 0.5s)

---

## 📱 Responsive

### Points de rupture

**Mobile (< 768px)** :
- Hauteur de troncature réduite à 180px
- Boutons en pleine largeur
- Réactions en colonne

Pour modifier :
```css
@media (max-width: 768px) {
    .publication-content-preview {
        max-height: 180px; /* ← Ajuster ici */
    }
}
```

---

## ✅ Checklist de modification

Avant de modifier les styles :
- [ ] Sauvegarder une copie de `publications.css`
- [ ] Tester sur plusieurs types de publications (courtes, longues, avec images)
- [ ] Vérifier sur mobile et desktop
- [ ] Vérifier la console pour les erreurs JS
- [ ] Tester les boutons "Lire la suite" et "Réduire"
- [ ] Vérifier que l'animation est fluide

---

## 📞 Support

En cas de problème :
1. Vérifier les logs console (F12)
2. Inspecter l'élément problématique
3. Comparer avec cette documentation
4. Vérifier que tous les fichiers sont synchronisés

---

**Dernière mise à jour** : 27/11/2025
**Version** : 1.0