/* =========================================================
   BLOCK — Trois dernières actualités
   (même rendu que card-actualite-single + grille 3 colonnes)
========================================================= */

.trois-dernieres-actualites{
  width: 100%;
}

.trois-dernieres-actualites__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}

.trois-dernieres-actualites__item{
  width: 100%;
}

/* Responsive : on empile proprement */
@media (max-width: 1024px){
  .trois-dernieres-actualites__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .trois-dernieres-actualites__grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CARD — styles identiques à card-actualite-single
========================================================= */

.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: var(--color-blanc);
}

.card-actualite__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 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{
  width: 18px;
  height: 18px;
  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
========================================================= */

.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;
}