/* =============================================================================
   LE FIL — les publications de la Page, en miroir

   Même règle que le rail : le module vit ici, les pages n'en gardent que le
   cadre. Encre et papier de la maison — ni cadre Facebook, ni bleu Facebook :
   la maison n'emprunte pas l'identité d'une autre.

   Les jetons viennent de /assets/css/tokens.css, chargé avant ce fichier.
   ========================================================================== */

/* -------------------------------- l'en-tête -------------------------------- */
.nouv{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(24px, 4vw, 46px) var(--pad) clamp(48px, 8vw, 90px);
}
.nouv__tete{ margin-bottom:clamp(22px, 3vw, 34px); }
.nouv__kicker{ margin:0 0 .5rem; color:var(--ink-soft); }
.nouv__titre{
  font-family:var(--disp); font-weight:400; letter-spacing:-.008em;
  font-size:var(--t-head); line-height:1.05; margin:0;
}
.nouv__lede{ margin:.45rem 0 0; color:var(--ink-soft); font-size:var(--t-base); max-width:52ch; }
.nouv__maj{
  margin:.55rem 0 0; font-size:var(--t-label); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-soft);
}
.nouv__note{
  /* Un filet EN HAUT, pas sur le côté : le système interdit la barre latérale
     colorée depuis la révision 2, et la note de l'atelier en portait une. */
  margin:.9rem 0 0; font-size:var(--t-xs); color:var(--ink-soft);
  border-top:2px solid var(--hair); padding-top:.55rem; max-width:46ch;
}

/* ----------------------------------- le fil -------------------------------- */

.fil{ columns:2; column-gap:clamp(16px, 2vw, 26px); }
@media (max-width:760px){ .fil{ columns:1; } }
.fil__vide{ color:var(--ink-soft); font-size:var(--t-sm); }

.post{
  break-inside:avoid; margin:0 0 clamp(16px, 2vw, 26px);
  background:var(--paper); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  transform:rotate(var(--tilt,0deg)); transform-origin:top center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fil > .post:nth-child(3n+1){ --tilt:-.45deg; }
.fil > .post:nth-child(3n+2){ --tilt:.4deg; }
.fil > .post:nth-child(3n)  { --tilt:-.2deg; }
.post:hover, .post:focus-within{ --tilt:0deg; box-shadow:8px 8px 0 var(--ink); }

.post__quand{
  margin:0; padding:.5rem 14px; background:var(--butter-2);
  border-bottom:2px solid var(--ink);
  display:flex; align-items:baseline; justify-content:space-between; gap:.8rem;
  font-size:var(--t-label); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.post__depuis{ color:var(--ink-soft); letter-spacing:.08em; white-space:nowrap; }

/* les photos : celles de la Page, recopiées sur notre disque */
.post__vues{ display:grid; gap:2px; background:var(--ink); border-bottom:2px solid var(--ink); }
.post__vues[data-n="2"], .post__vues[data-n="4"]{ grid-template-columns:1fr 1fr; }
.post__vues[data-n="3"]{ grid-template-columns:1fr 1fr; }
.post__vues[data-n="3"] img:first-child{ grid-column:1 / -1; }
.post__vues img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.post__vues[data-n="1"] img{ aspect-ratio:auto; max-height:520px; }

.post__corps{ padding:14px 16px 16px; }
.post__texte{
  white-space:pre-line; font-size:var(--t-sm); line-height:1.55; overflow-wrap:anywhere;
}
.post__texte a{ color:var(--bleu); text-underline-offset:2px; }
/* replié : une hauteur, un dégradé qui s'efface. Déplié : tout le texte. */
.post[data-long]:not([data-ouvert]) .post__texte{
  max-height:15em; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent);
          mask-image:linear-gradient(to bottom, #000 72%, transparent);
}
.post__plus{
  /* 40 px de haut : ce sont des commandes, et rien de ce qu'on touche sur ce
     site ne descend plus bas. Le soulignement reste collé au texte — c'est le
     rembourrage qui donne la hauteur, pas le trait. */
  margin-top:.4rem; background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; min-height:40px; padding:0;
  font-size:var(--t-label); font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.post__plus span{ border-bottom:2px solid var(--ink); padding-bottom:.1rem; }
.post__plus:hover span{ color:var(--bleu); border-bottom-color:var(--bleu); }

.post__lien{
  display:block; margin-top:.9rem; padding:.7rem .8rem; text-decoration:none;
  border:1px dashed var(--hair); background:var(--paper-2);
}
.post__lien:hover{ border-color:var(--ink); }
.post__lien-h{ display:block; font-size:var(--t-label); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); }
.post__lien-t{ display:block; margin-top:.2rem; color:var(--ink); font-family:var(--disp); font-size:var(--t-base); line-height:1.15; }
.post__lien-d{ display:block; margin-top:.25rem; font-size:var(--t-xs); color:var(--ink-soft); }

.post__source{
  display:inline-flex; align-items:center; gap:.4rem; min-height:40px;
  margin-top:.7rem; font-size:var(--t-label); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  border-bottom:2px solid var(--ink); padding:.2rem .3rem;
}
.post__source:hover{ background:var(--ink); color:var(--paper); border-bottom-color:transparent; }

@media (prefers-reduced-motion:reduce){
  .post{ --tilt:0deg !important; }
}