/* Slider Actus Block — Style Frontend */

.wp-block-bloc-th-slider-actus.slider-actus {
  padding: 42px 24px 58px;
}

.slider-actus--variant4 {
  padding-top: 0;
  padding-bottom: 64px;
}

.slider-actus--variant3 {
  background-color: var(--color-beige);
}

.slider-actus__container {
  max-width: 1200px;
  margin: 0 auto;
}

.slider-actus__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.slider-actus__title {
  font-family: var(--font-condensed);
  font-size: var(--text-sub-l);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-sub);
  line-height: var(--lh-sub);
  margin: 0;
  color: var(--color-text);
}

.slider-actus__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  font-family: var(--btn-text-font);
  font-size: var(--btn-text-size);
  color: var(--btn-text-color);
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease;
}
.slider-actus__button:hover {
  color: var(--btn-text-color-hover);
}

/* Content grids */
.slider-actus__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* variant2 + variant3 : gouttière 37px ; variant4 reste à 22px */
.slider-actus__variant2,
.slider-actus__variant3 {
  gap: 37px;
}

/* Aspect-ratio image carte (molecule partagée — scopé au bloc) */
.slider-actus .card-article__image-wrapper {
  aspect-ratio: 880 / 892;
}

/* Card article (molecule) — image + pastille + titre, sans extrait */
.card-article {
  background-color: var(--color-white);
  border: 1px solid var(--color-beige);
  padding: 19px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card-article__image-wrapper {
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.card-article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.card-article:hover .card-article__image {
  transform: scale(1.03);
}

.card-article__content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Rangée de pastilles (Sponsorisé + rubrique) */
.card-article__tags {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Pastille rubrique (beige, arrondie) */
.card-article__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 16px;
  border-radius: 100px;
  background-color: var(--color-beige);
  font-family: var(--font-serif-light);
  font-size: 18px;
  color: var(--color-text);
  line-height: 1;
}

/* Pastille « Sponsorisé » — même charte (forme/typo) que les autres tags,
   accent doré de la marque pour la distinguer de la rubrique. */
.card-article__tag--sponsored {
  background-color: var(--color-gold);
  color: var(--color-white);
}

.card-article__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: var(--lh-h3);
  margin: 0;
  color: var(--color-text);
}

/* Variante avec pub (variant4) : cartes + encart latéral 240x420 */
.slider-actus--variant4 {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  max-width: 1280px;
  margin: 0 auto;
}

.slider-actus--variant4 .slider-actus__container {
  flex: 1 1 auto;
  margin: 0;
}

.slider-actus__pub {
  flex: 0 0 240px;
  width: 240px;
  height: 420px;
  background-color: #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.slider-actus__pub > a { display: block; width: 100%; height: 100%; }
.slider-actus__pub img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slider-actus__pub-label {
  font-family: var(--font-body);
  font-size: 22px;
  color: #a9a9a9;
  line-height: 1.3;
}

/* Responsive */
/* Tablette : grille 3 → 2 colonnes ; variante pub passe en colonne */
@media (max-width: 1024px) {
  .wp-block-bloc-th-slider-actus.slider-actus { padding: 36px 20px 48px; }
  .slider-actus__container { max-width: 100%; }

  .slider-actus__content {
    grid-template-columns: repeat(2, 1fr);
  }

  /* variant4 (cartes + encart pub) : empilement, encart pleine largeur sous les cartes */
  .slider-actus--variant4 {
    flex-direction: column;
    max-width: 100%;
  }
  .slider-actus__pub {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 240 / 420;
    max-height: 420px;
  }
}

/* Mobile : cartes en slider horizontal (demande cliente) */
@media (max-width: 768px) {
  .wp-block-bloc-th-slider-actus.slider-actus {
    padding: 40px 16px;
  }

  .slider-actus__content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    margin: 0 -16px;
    padding: 4px 16px 10px;
  }
  .slider-actus__content > .slider-actus__item {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}

/* Sous-titre en bas de casse (modifier — réglage subUppercase OFF) */
.slider-actus--sub-lower .slider-actus__title {
  text-transform: none;
}

/* ===== Cartes cliquables : lien étiré vers l'article ===== */
.slider-actus .card-article { position: relative; }
.slider-actus .card-article__title a { color: inherit; text-decoration: none; }
.slider-actus .card-article__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.slider-actus .card-article:hover .card-article__title a { color: var(--color-gold); }