/* 1. On s’assure que tout tient dans la page */
*,
*::before,
*::after {
    box-sizing: border-box;        /* largeur = border + padding inclus */
}

/* 2. Conteneur : jamais plus large que l’écran */
.container.posts {
    width: 90vw;                  /* 90 % de la largeur visible */
    max-width: 900px;             /* mais pas plus de 900 px sur desktop */
    margin-inline: auto;          /* centré horizontalement */
    padding: clamp(1rem, 2vw, 2rem);
    background: transparent;gap: 2rem;
}
.post{
    background-color: #4d4d4d38;
    border-radius: 15px;
    padding: 1rem;
    text-align: left;
    
}
/* 3. On coupe les mots (titres & paragraphes) */
.posts .post h3,
.posts .post p {
    overflow-wrap: break-word;    /* nouvelle norme (remplace word-wrap)   */
    word-break: break-word;       /* filet de sécurité pour vieux navigateurs */
    hyphens: auto;                /* césure élégante si la langue est déclarée */
}

/* 4. Au cas où un élément s’obstine, on cache le débordement horizontal */
body { overflow-x: hidden; }


/* Bouton Partager */
.share-btn {
    display: inline-flex;
    gap: .4rem;
    
    align-items: center;
    font-size: .875rem;
    background: var(--accent, #0d6efd);
    color: #fff;
    padding: .45rem .9rem;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity .2s ease;
}
.share-btn:hover { opacity: .85; }
.share-btn:focus { outline: 2px solid var(--accent, #0d6efd); outline-offset: 2px; }
.post-content {
  transition: max-height 0.3s ease-out;
}

.post-content.collapsed {
  max-height: 150px;      /* hauteur de l’aperçu */
  overflow: hidden;
  position: relative;
}
.post-content.collapsed::after {          /* dégradé de fin */
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 4rem;
  background: linear-gradient(to top, #00000052 0%, transparent 100%);
}

.toggle-btn {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  margin: 20px auto;
}
.toggle-btn:hover { background: var(--color-hover); }


/* Pagination */
.pagination { margin-top: 2rem; text-align: center; }
.pagination ul { display: inline-flex; list-style: none; gap: .5rem; padding: 0; }
.pagination a {
  display: block;
  padding: .4rem .8rem;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  text-decoration: none;
  color: var(--color-white);
}
.pagination a:hover,
.pagination .current a {
  background: var(--color-primary);
  color: var(--color-white);
}


.post-image {
  width: 100%;
  max-height: 400px;      /* ou ce qui vous convient */
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 1rem;
}

.rating{display:inline-flex;align-items:center;gap:.25rem;cursor:pointer}
.rating .fas{color:var(--color-gold)}
.rating .far{color:#ccc}