/* 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)}
/* « height:auto » n'est pas une précaution : les couvertures portent depuis peu
   leurs dimensions en attributs, pour que la carte réserve sa place avant que
   l'image arrive. Or l'attribut « height » vaut hauteur réelle tant que la
   feuille de style n'en dispose pas autrement — la couverture de la gazette,
   haute de 1075 px, étirait sa fiche sur toute la page et le rapport 3/4 était
   ignoré. Rendue à « auto », la hauteur redevient celle que dicte le rapport. */
.publication-couverture img{width:100%;height:auto;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)}
/* Le dessin des brèves sert d'affiche aux posts qui n'ont pas d'image à eux :
   il suit donc les mêmes règles de case que les photos. */
/* « height:auto » est indispensable depuis que les images portent leurs
   dimensions en attributs : sans lui, l'attribut « height » fixe une hauteur
   réelle en pixels, les deux dimensions sont alors connues et la proportion
   demandée ici n'est plus appliquée. Les affiches s'affichaient à leur taille
   d'origine, jusqu'à deux mille pixels de haut. */
.post-visuel img,.post-visuel .breve-vue{display:block;width:100%;height:auto;
  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}}


/* =========================================================================
   LA PAGE ACTUALITÉS
   Tout ce qui suit est enfermé dans « #vue-actualites ». Les feuilles de style
   sont chargées pour toutes les vues du site : une règle laissée nue ici
   repeindrait l'accueil, la formation et le reste avec elle.
   ========================================================================= */

/* ---------- la palette ----------
   Le DJCE tient en trois couleurs : le rouge de son logo, le noir du texte, le
   blanc du papier. La page n'en ajoute aucune. Elle dilue le rouge — un filet
   pour les bordures, une ombre pour le relief — et c'est cette teinte, répétée
   d'un bout à l'autre, qui rattache la page au logo sans jamais la charger.
   Les fonds, eux, sont ceux du reste du site.

   La photo d'en-tête, elle, garde son voile neutre : teinter le parlement de
   rouge rosissait la pierre au lieu de la laisser tranquille. Le rouge est
   pour ce que nous écrivons, pas pour ce que nous photographions. */
#vue-actualites{
  --act-filet:rgba(194,3,25,.15);
  --act-filet-vif:rgba(194,3,25,.42);
  --act-ombre:rgba(142,2,18,.16);
}

/* Le bandeau des posts marquants prend le gris des pages Les partenariats et
   Nous rejoindre — la même variable, pas une teinte approchante : le jour où
   ce gris bouge, il bouge partout d'un coup. Le voile rosé qu'il y avait ici
   tenait tout seul, mais faisait de cette page un cas à part dans le site. */
#vue-actualites .sec.alt{background:var(--gris-page)}

/* ---------- tout se rapproche ----------
   Cent quatre pixels de blanc au-dessus et en dessous de chaque section :
   c'est la mesure du site, juste pour une page de texte suivi, beaucoup trop
   pour une grille de vignettes qu'on parcourt du regard. */
#vue-actualites .sec{padding:58px 0}
/* Le filet rouge et son tracé au défilement sont passés dans composants.css :
   toutes les pages les portent désormais. Il ne reste ici que la marge, plus
   serrée qu'ailleurs pour une grille de vignettes. */
#vue-actualites .sec-head{margin-bottom:30px}

/* ---------- les encarts, réduits d'un tiers ----------
   Les pistes sont bornées haut et bas plutôt que laissées en « 1fr » : sans
   cela la grille étire les colonnes jusqu'au bord et trois posts reprennent
   toute la largeur perdue. Ici la carte a une taille, et c'est la rangée qui
   s'arrête quand elle a fini. */
#vue-actualites .posts{grid-template-columns:repeat(auto-fill,minmax(240px,246px));gap:16px}
#vue-actualites .post-visuel img,#vue-actualites .post-visuel .breve-vue{aspect-ratio:1}
#vue-actualites .post-corps{padding:13px 14px 14px}
#vue-actualites .post-texte{margin:0 0 10px;font-size:13.2px;line-height:1.55;-webkit-line-clamp:4}
#vue-actualites .post-lien{font-size:12.2px}
#vue-actualites .reseau-bloc + .reseau-bloc{margin-top:34px}
#vue-actualites .reseaux-tete{padding-bottom:13px;margin-bottom:20px}

/* La Gazette suit le même régime. Sa couverture garde sa proportion — c'est
   une couverture, on ne la recadre pas —, mais tout ce qui l'entoure se
   resserre. Les deux boutons passent l'un sous l'autre et prennent toute la
   largeur : à cent soixante pixels, « Lire » et « Télécharger » côte à côte se
   jouaient à quatre pixels près — un empattement de police un peu large chez
   le visiteur et le second retombait seul, de travers. Empilés, ils tiennent
   quelle que soit la largeur. */
#vue-actualites .publications{grid-template-columns:repeat(auto-fill,minmax(150px,168px));gap:16px}
#vue-actualites .publication{padding:10px 10px 13px}
#vue-actualites .publication-format{top:8px;left:8px;padding:4px 7px;font-size:9px;letter-spacing:.11em}
#vue-actualites .publication-rubrique{margin-top:11px;font-size:9.6px;letter-spacing:.11em}
#vue-actualites .publication h3{margin-top:7px;font-size:14.2px;line-height:1.3}
#vue-actualites .publication-texte{margin-top:7px;font-size:12.2px;line-height:1.55;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
#vue-actualites .publication-actions{padding-top:12px;gap:6px;flex-direction:column;align-items:stretch}
#vue-actualites .pub-btn{padding:7px 9px;font-size:11.6px;gap:6px;justify-content:center}
/* La brève n'a qu'un bouton, la Gazette en a deux : sans cette ligne, les
   cartes d'une même rangée s'alignent sur la plus haute et la brève laisse un
   vide sous son bouton. */
#vue-actualites .breve .publication-actions{margin-top:auto}
#vue-actualites .sec-foot{margin-top:34px}
#vue-actualites .pub-btn svg{width:13px;height:13px}

/* Sur un téléphone, une piste bornée laisserait la carte plantée à gauche avec
   du vide à sa droite. En dessous de sept cents pixels les colonnes reprennent
   donc toute la largeur disponible. */
@media (max-width:700px){
  #vue-actualites .posts{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  #vue-actualites .publications{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* ---------- le rouge sur chaque carte ----------
   Deux pixels en haut de chaque encart, qui se tracent de gauche à droite au
   moment où la carte paraît. C'est le seul aplat de rouge de la grille, et il
   suffit : les bordures ne sont plus grises mais rouges très pâles, et
   l'ensemble se lit d'un coup comme appartenant au même diplôme. */
#vue-actualites .post,
#vue-actualites .publication{position:relative;border-color:var(--act-filet);background:#fff;
  transition:transform .32s cubic-bezier(.22,.7,.3,1),box-shadow .32s ease,border-color .32s ease}
#vue-actualites .post::after,
#vue-actualites .publication::after{content:"";position:absolute;top:-1px;left:-1px;right:-1px;
  height:2px;background:var(--crimson);transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.22,.7,.3,1)}
#vue-actualites .post.vu::after,
#vue-actualites .publication.vu::after{transform:none}

/* Le décalage vient du rang posé sur la carte, non d'une liste de « nth-child »
   arrêtée à la quatrième : la cascade tiendra pour dix parutions comme pour
   trois, sans qu'on revienne ici. */
#vue-actualites .apparait{transition-delay:calc(var(--rang, 0) * .075s)}
#vue-actualites .post::after,
#vue-actualites .publication::after{transition-delay:calc(var(--rang, 0) * .075s + .14s)}

/* Au survol, la carte se soulève et son ombre se teinte de rouge sombre : une
   ombre grise, sur un fond tiède, aurait l'air sale. */
#vue-actualites .post:hover,
#vue-actualites .publication:hover{transform:translateY(-4px);
  border-color:var(--act-filet-vif);box-shadow:0 16px 30px -14px var(--act-ombre)}

/* ---------- les bandes de couleur, comblées ----------
   L'affiche est contenue dans le carré et non recadrée : elle porte du texte
   jusqu'aux bords, le moindre rognage en couperait un morceau. Restaient deux
   bandes de gris de part et d'autre, différentes d'une carte à l'autre.

   Elles sont maintenant remplies par l'affiche elle-même, agrandie et floutée.
   Rien n'est rogné, et la couleur qui comble vient toujours de l'image qu'elle
   encadre : le raccord est juste quelle que soit l'affiche, sans qu'on ait à
   choisir un fond à la main à chaque nouveau post.

   L'agrandissement à 135 % n'est pas décoratif : un flou de vingt-deux pixels
   sur une image à sa taille laisse le bord se dissoudre et découvre la carte
   derrière. « isolation » enferme le tout, sans quoi le z-index négatif ferait
   passer le fond sous la carte au lieu de le glisser sous l'affiche. */
#vue-actualites .post-visuel{overflow:hidden;border-bottom-color:var(--act-filet);
  position:relative;isolation:isolate}
#vue-actualites .post-visuel::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--vignette) center/cover no-repeat;
  filter:blur(22px) saturate(1.12);transform:scale(1.35)}
#vue-actualites .post-visuel img,#vue-actualites .post-visuel .breve-vue{position:relative}

/* L'image respire à peine — 3,5 % : les affiches portent du texte jusqu'aux
   bords, un zoom franc les ferait cogner contre le cadre. Seule l'affiche
   bouge, pas le fond : animer une couche floutée la ferait recalculer à chaque
   image de l'animation. */
#vue-actualites .post-visuel img,#vue-actualites .post-visuel .breve-vue{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
#vue-actualites .post:hover .post-visuel img,#vue-actualites .post:hover .post-visuel .breve-vue{transform:scale(1.035)}

/* La flèche du lien avance d'un cheveu vers l'endroit où elle emmène. Le lien
   reste un lien : pas de bouton, pas de fond plein. */
#vue-actualites .post-lien::after{display:inline-block;transition:transform .3s ease}
#vue-actualites .post:hover .post-lien::after{transform:translate(3px,-3px)}

/* ---------- l'intitulé du réseau ----------
   Un tiret rouge devant « LinkedIn » et « Instagram », comme celui qui encadre
   la rubrique en haut de page, et le trait de séparation passe du gris au
   rouge pâle. */
#vue-actualites .reseaux-tete{border-bottom-color:var(--act-filet)}
#vue-actualites .reseaux-tete h3{display:flex;align-items:center;gap:12px}
#vue-actualites .reseaux-tete h3::before{content:"";width:22px;height:2px;
  background:var(--crimson);flex:none}
/* Le logo se tient contre le nom du réseau, et non rejeté à l'autre bout de la
   ligne : on lit « LinkedIn », le moyen d'y aller est là, sous l'œil. Le titre
   ne pousse donc plus le lien au loin — c'est la ligne entière qui se range à
   gauche.

   Le carré fait trente-deux pixels alors que le logo n'en fait dix-sept : une
   cible de dix-sept pixels se manque au doigt sur un téléphone. Le cadre est
   ce qui reste du bouton, et il dit que c'est cliquable. */
#vue-actualites .reseaux-tete{justify-content:flex-start;gap:10px 14px}
#vue-actualites .reseau-btn{width:32px;height:32px;padding:0;gap:0;justify-content:center;
  background:#fff;border-color:var(--act-filet);
  transition:border-color .28s ease,transform .28s ease,box-shadow .28s ease}
#vue-actualites .reseau-btn svg{width:17px;height:17px}
#vue-actualites .reseau-btn:hover{border-color:var(--crimson);transform:translateY(-2px);
  box-shadow:0 10px 22px -12px var(--act-ombre)}

/* ---------- animations réduites ----------
   base.css coupe déjà toutes les transitions, mais il ne touche pas aux états
   de départ : sans cette remise à zéro, les filets rouges resteraient repliés
   à zéro et ne paraîtraient jamais. C'est la leçon de la frise. */
@media (prefers-reduced-motion:reduce){
  #vue-actualites .post::after,
  #vue-actualites .publication::after,
  #vue-actualites .sec-head::before{transform:none}
}