/* ============================================================
   ARGANE \002014 Carte actualit\0000e9 (composant partag\0000e9)
   ------------------------------------------------------------
   Source UNIQUE de la carte actualit\0000e9. Identique sur la page
   d'accueil (section .news) et les pages d\0000e9tail d'actualit\0000e9
   (\0000ab \0000c0 lire aussi \0000bb). Fond clair (paper).

   Markup :
     <article class="news-card">
       <a class="news-card-link" href="\002026">
         <div class="fig" style="background-image:url(\002026)">
           <span class="lab">r\0000e9f.</span>          (optionnel)
         </div>
         <div class="meta">
           <span class="cat">Salon</span>
           <span class="meta-date">Stand B17 \0000b7 2 mars 2026</span>
         </div>
         <h3>Titre de l'actualit\0000e9</h3>
       </a>
       <span class="card-date">02 mars 2026</span>    (optionnel)
     </article>
   ============================================================ */

.news-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  /* L'écart entre deux rangées doit rester nettement supérieur à l'écart
     interne image → titre : sinon un titre semble appartenir à l'image
     de la carte du dessous. */
  gap:clamp(52px, 5vw, 78px) clamp(16px, 1.8vw, 24px);
}
.news-card{
  display:flex;
  flex-direction:column;
  border-top:0;
  padding-top:0;
}
.news-card-link{
  display:flex;
  flex-direction:column;
  color:inherit;
  transition:transform .25s ease;
}
.news-card-link:hover{transform:translateY(-4px);}
.news-card .fig{
  aspect-ratio: 16 / 11;
  background:linear-gradient(150deg, var(--forge), var(--acier));
  background-size:cover;
  background-position:center;
  margin-bottom:16px;
  position:relative;
  overflow:hidden;
  border-radius:8px;
}.news-card .fig .lab{
  position:absolute; bottom:12px; left:14px;
  font-family:var(--ff-body);
  font-size:10px; letter-spacing:0.20em; text-transform:uppercase;
  color:var(--paper-60);
  z-index:2;
}
/* Meta : pill cat\0000e9gorie Forge + date inline */
.news-card .meta{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--ff-body);
  font-size:13px;
  color:var(--ardoise);
  margin-bottom:12px;
  flex-wrap:wrap;
}
.news-card .meta .cat{
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--forge);
  padding:6px 14px;
  border-radius:999px;
  line-height:1;
}
.news-card .meta .meta-date{
  color:var(--ardoise);
  font-weight:400;
  letter-spacing:0;
}
.news-card h3{
  font-family:var(--ff-body);
  font-size:clamp(20px, 1.7vw, 26px);
  font-weight:400;
  letter-spacing:-0.018em;
  line-height:1.18;
  margin:0;
  color:var(--forge);
  transition:color .2s ease;
}
.news-card-link:hover h3{color:var(--braise);}

@media (max-width:1024px){
  .news-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .news-grid{grid-template-columns:1fr;}
}