/* =========================================================
   BLOCK — Nos ressources
========================================================= */

.nos-ressources{
  width: 100%;
}

/* =========================================================
   CONTAINER WIDE
========================================================= */

.nos-ressources__container{
  max-width: var(--layout-wide-size);
  margin: 0 auto;
  /* padding: 0 20px; */
}

/* =========================================================
   TOP
========================================================= */

.nos-ressources__top{
  padding: 30px 0 22px;
}

.nos-ressources__kicker{
  text-transform: uppercase;
  color: var(--color-noir);
  font-size: var(--font-size-s, 15px);
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.nos-ressources__title{
  margin: 0;
  color: var(--color-noir);
  font-size: var(--font-size-xxl, 40px);
  font-weight: 500;
  line-height: 1.1;
}

/* =========================================================
   GRID (masonry via JS)
========================================================= */

.nos-ressources__gridZone{
  padding: 10px 0 40px;
}

.nr-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;

  /* base pour les spans masonry */
  grid-auto-rows: 4px;
  align-items: start;
}

@media (max-width: 1024px){
  .nr-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* =========================================================
   CARD
========================================================= */

.nr-card{
  /* le span est appliqué en JS via grid-row-end */
}

.nr-card__inner{
  position: relative;
  display: flex;          /* 🔥 force l'empilement vertical */
  flex-direction: column;
  align-items: flex-start; /* 🔥 cat align left */
  gap: 0;                 /* on gère via margins existantes */

  text-decoration: none;
  color: inherit;

  background: var(--color-blanc);
  /* border-radius: 6px; */
  padding: 20px;

  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.nr-card__inner:hover{
  transform: translateY(-4px);
  /* box-shadow: 0 14px 34px rgba(0,0,0,.12); */
}

.nr-card__inner:focus-visible{
  outline: 2px solid var(--color-noir);
  outline-offset: 4px;
}

/* Cat pill */
.nr-card__cat{
  display: inline-block;
  border-radius: 3px;
  padding: 4px 8px;
  letter-spacing: 5%;
  color: var(--color-noir);
  font-size: var(--font-size-xs, 12px);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 13px; /* cat au dessus du titre */
}

/* Title */
.nr-card__title{
  margin: 0 0 13px;
  color: var(--color-noir);
  font-size: var(--font-size-l, 22px);
  font-weight: 500;
  line-height: 1.15;


}


/* Text */
.nr-card__text{
  color: var(--color-noir);
  font-size: var(--font-size-s, 15px);
  line-height: 1.35;
  margin-bottom: 13px;
}

/* Img — max 200px sans casser */
.nr-card__img{
  width: 100%;
  max-height: 200px;
  border-radius: 6px;
  overflow: hidden;
}

.nr-card__img img{
  width: 100%;
  height: 200px;       /* uniformise */
  display: block;
  object-fit: cover;   /* crop propre */
  transform: scale(1);
  transition: transform .35s ease;
}

.nr-card__inner:hover .nr-card__img img{
  transform: scale(1.04);
}