/* Images taxonomie (souvent width="1280" en HTML) : évite le débordement horizontal */
.view-certification-categories .field--name-field-image img,
.view-certification-categories .taxonomy-term img {
  max-width: 100%;
  height: auto;
}

/* ====== Section : Why choose us ====== */
.view-certification-categories .view-header {
  /* text-align: center;
  max-width: 900px;
  margin: 0 auto 32px; */
  /* margin-top: 50px; */
}
._view-certification-categories .view-header h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 12px;
}
._view-certification-categories .view-header h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 12px auto 0;
  background: #2b62f5; 
  border-radius: 2px;
}
._view-certification-categories .view-header p {
  color: #6b6f76;
  margin: 0 auto;
}


/* ====== Grille globale ====== */
.view-certification-categories .view-content .item-list > ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);   /* 12 colonnes pour des spans souples */
  grid-auto-rows: 220px;                    /* hauteur de base d’une rangée */
  gap: 24px;                                /* gouttières */
}

/* Par défaut chaque item = 4 colonnes (3 par ligne) */
.view-certification-categories .view-content .item-list > ul > li{
  grid-column: span 4;
  position: relative;
}

/* Composition “2/3 + 1/3” du premier rang */
.view-certification-categories .view-content .item-list > ul > li:nth-child(1){
  grid-column: span 8;   /* occupe 2/3 */
  grid-row: span 1;      /* double hauteur */
}
.view-certification-categories .view-content .item-list > ul > li:nth-child(2){
  grid-column: span 4;   /* occupe 1/3 */
  grid-row: span 2;      /* même hauteur que la grande tuile */
}

/* ====== Carte / tuile ====== */
.view-certification-categories .taxonomy-term.vocabulary-certification-theme{
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #000; /* évite le flash blanc au chargement */
}

/* Image plein cadre */
.view-certification-categories .taxonomy-term .content,
.view-certification-categories .taxonomy-term .field--name-field-image,
.view-certification-categories .taxonomy-term .field--name-field-image .field__item{
  position: absolute;
  inset: 0;
}
.view-certification-categories .taxonomy-term .field--name-field-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transform: scale(1.06);         /* petit zoom pour l’effet “crop” */
  transition: transform .35s ease;
}

/* Overlay sombre */
.view-certification-categories .taxonomy-term.vocabulary-certification-theme::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.45),
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.55)
  );
  pointer-events: none;
}

/* Titre en haut à gauche */
.view-certification-categories .taxonomy-term h2{
  position: absolute;
  top: 20px;
  left: 20px;
  margin: 0;
  z-index: 2;
}
.view-certification-categories .taxonomy-term h2 a{
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .4px;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.1;
  display: inline-block;
}
.view-certification-categories .taxonomy-term h2 a .field__item{ /* supprime l’aspect “bloc” parasite */
  display: inline;
}

/* Hover subtil */
.view-certification-categories .taxonomy-term:hover .field--name-field-image img{
  transform: scale(1.1);
}

/* Masque les éléments contextuels d’admin (facultatif côté front) */
.view-certification-categories .taxonomy-term .contextual{ display: none; }

/* Nettoyage des espaces internes */
.view-certification-categories .taxonomy-term .content{ pointer-events: none; }
.view-certification-categories .taxonomy-term .field--name-field-image{ margin: 0 !important; }

/* ====== Responsive ====== */
@media (max-width: 1200px){
  .view-certification-categories .view-content .item-list > ul{
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 200px;
    gap: 20px;
  }
  .view-certification-categories .view-content .item-list > ul > li{ grid-column: span 4; }
  .view-certification-categories .view-content .item-list > ul > li:nth-child(1){ grid-column: span 8; }
  .view-certification-categories .view-content .item-list > ul > li:nth-child(2){ grid-column: span 8; }
}

@media (max-width: 768px){
  .view-certification-categories .view-content .item-list > ul{
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: 16px;
  }
  .view-certification-categories .view-content .item-list > ul > li{ grid-column: span 4; grid-row: span 1; }
  .view-certification-categories .view-content .item-list > ul > li:nth-child(1),
  .view-certification-categories .view-content .item-list > ul > li:nth-child(2){
    grid-column: span 4;
    grid-row: span 1;
  }
  .view-certification-categories .taxonomy-term h2{ top: 14px; left: 14px; }
}