/* page Actualités : encart des réseaux */


/* ---------- dernières publications ----------
   Une fiche par parution : couverture cliquable, date et rubrique, titre,
   résumé, puis les deux actions — lire dans le navigateur, ou télécharger. La
   grille se remplit d'elle-même : une seule parution occupe une colonne, pas
   toute la largeur. */
.publications{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:30px}
.publication{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  padding:16px 16px 20px}
.publication-couverture{position:relative;display:block;overflow:hidden;background:var(--stone-soft)}
.publication-couverture img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.publication-couverture:hover img{transform:scale(1.04)}
.publication-format{position:absolute;top:12px;left:12px;
  background:var(--crimson);color:#fff;font-family:Montserrat,sans-serif;font-size:10.5px;
  font-weight:600;letter-spacing:.14em;padding:6px 10px}
.publication-rubrique{margin:18px 0 0;font-family:Montserrat,sans-serif;font-size:11px;
  font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.publication-rubrique b{font-weight:600;color:var(--crimson)}
.publication h3{margin:10px 0 0;font-size:19px;font-weight:400;line-height:1.35}
.publication h3 a{transition:color .22s ease}
.publication h3 a:hover{color:var(--crimson)}
.publication-texte{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:var(--muted)}

/* Les deux boutons sont poussés en bas : ils s'alignent d'une fiche à l'autre. */
.publication-actions{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.pub-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  border:1px solid var(--line);font-size:14px;color:var(--ink);
  transition:border-color .22s ease,background .22s ease,color .22s ease}
.pub-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.pub-btn:hover{border-color:var(--ink)}
.pub-btn-plein{background:var(--crimson);border-color:var(--crimson);color:#fff}
.pub-btn-plein:hover{background:var(--crimson-dark);border-color:var(--crimson-dark);color:#fff}

/* ---------- posts marquants ----------
   Les publications LinkedIn sont affichées telles quelles, dans le cadre fourni
   par LinkedIn. Ce cadre vient de linkedin.com : il dépose ses propres traceurs
   dès l'affichage de la page, et une publication supprimée laisse un cadre vide. */
/* Un bloc par réseau, chacun avec son intitulé et son lien vers le compte. */
.reseau-bloc + .reseau-bloc{margin-top:56px}
.reseaux-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 30px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:28px}
.reseaux-tete h3{margin:0;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.reseaux-liens{display:flex;flex-wrap:wrap;gap:10px}
.reseau-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;
  border:1px solid var(--line);font-size:14px;color:var(--ink);
  transition:border-color .22s ease,color .22s ease}
.reseau-btn svg{width:17px;height:17px;flex:none}
.reseau-li svg{fill:#0A66C2}
.reseau-ig svg{fill:#C13584}
.reseau-btn:hover{border-color:var(--ink)}

.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px}
.post{background:#fff;border:1px solid var(--line);padding:10px}
/* Le cadre de LinkedIn n'ajuste pas sa hauteur au contenu : on la fixe, et on
   laisse défiler à l'intérieur ce qui dépasse. */
.post iframe{display:block;width:100%;height:560px;border:0}

/* ---------- cartes LinkedIn : le visuel d'abord, le texte dessous ----------
   L'intégration officielle de LinkedIn est une iframe : son intérieur nous
   échappe, et l'ordre y est imposé (auteur, texte, puis image). Ces cartes
   reprennent donc l'image et le texte du post, et renvoient à l'original.
   Le cadre du visuel garde un rapport fixe pour que les trois cartes s'alignent ;
   l'image y est contenue et non recadrée, les affiches portant du texte
   jusqu'aux bords. */
.post-li{display:flex;flex-direction:column;padding:0}
.post-visuel{display:block;background:var(--gris-page);border-bottom:1px solid var(--line)}
.post-visuel img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain}
.post-corps{display:flex;flex-direction:column;flex:1;padding:22px 22px 20px}
/* Le texte est repris tel qu'il a été publié, sauts de ligne compris ; il est
   tronqué à hauteur égale, le post entier restant à un clic. */
.post-texte{margin:0 0 18px;font-size:14.6px;line-height:1.66;color:var(--muted);
  white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:9}
.post-lien{margin-top:auto;align-self:flex-start;font-size:13.5px;font-weight:600;
  color:var(--crimson);border-bottom:1px solid currentColor;padding-bottom:2px}
.post-lien::after{content:" \2197"}
.post-li:hover .post-lien{color:var(--crimson-dark)}
/* Le cadre d'Instagram est plus haut que celui de LinkedIn à largeur égale :
   une image carrée, la légende en dessous. */
.posts-ig .post iframe{height:640px}
@media (max-width:520px){.post iframe{height:600px}}