/* =========================================================

   BLOCK — Card actualité

========================================================= */



.card-actualite{

  width: 100%;

}



/* lien full-card */

.card-actualite__link{

  position: relative;

  display: block;

  text-decoration: none;

  color: inherit;



  overflow: visible; /* important : ne pas couper ce qui dépasse */

  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;

}



/* effet hover "sympa" */

.card-actualite__link:hover,

.card-actualite__link:focus-visible{

  transform: translateY(-4px);

  /* box-shadow: 0 18px 40px rgba(0,0,0,.12); */

}



/* overlay léger (optionnel) */

.card-actualite__linkOverlay{

  position: absolute;

  inset: 0;

  pointer-events: none;

}



/* =========================================================

   MEDIA

========================================================= */



.card-actualite__media{

  position: relative;

}



/* wrapper image : hauteur fixe + crop */

.card-actualite__mediaImg{

  height: 242px;      /* hauteur fixe demandée */

  overflow: hidden;   /* coupe UNIQUEMENT l'image */

  position: relative;

  background:url('../assets/images/placeholder.jpg');
  background-size:cover;
background: var(--color-blanc);
}



.card-actualite__img{

  width: 100%;

  height: 100%;

  display: block;

 object-fit: contain;

}



/* pictos aires en bas à droite, qui dépassent */

.card-actualite__aires{

  position: absolute;

  right: 14px;

  bottom: -18px;      /* dépasse de l’image */

  display: inline-flex;

  gap: 10px;

  align-items: center;

  z-index: 2;

}



/* pastille identique au principe sidebar */

.card-actualite__aireIcon{

  width: 46px;

  height: 46px;

  border-radius: 999px;

  background: var(--aire-color);

  border: 3px solid var(--color-blanc);

  display: grid;

  place-items: center;

  overflow: hidden;

}



.card-actualite__aireIcon img{

  display: block;

}



/* =========================================================

   BODY

========================================================= */



.card-actualite__body{

  padding: 22px 20px 18px;

}



/* date */

.card-actualite__date{

  font-size: var(--font-size-xs);

  font-weight: 400;

  line-height: 1.25;

  color: var(--color-noir);

  margin-bottom: 10px;

}



/* titre */

.card-actualite__title{

  margin: 0 0 10px;

  color: var(--color-bleu);

  font-size: var(--font-size-l);

  font-weight: 500;

  line-height: 1.15;

}



/* extrait */

.card-actualite__excerpt{

  font-size: var(--font-size-s);

  font-weight: 400;

  line-height: 1.35;

  color: var(--color-noir);

  margin-bottom: 14px;

}



/* =========================================================

   CATÉGORIES (même style que sidebar)

   - ici en <span> (pas de lien) car toute la card est un <a>

========================================================= */



.card-actualite__cats{

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



.card-actualite__cat{

  display: inline-flex;

  align-items: center;



  font-size: var(--font-size-s);

  font-weight: 500;

  font-style: italic;



  background: var(--color-blanc);

  color: var(--color-noir);



  padding: 10px 15px;

  border-radius: 200px;

}