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

   BLOCK — Cards

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



.cards{

  width: 100%;

}



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

   THEME (clair / sombre)

   - La bande (derrière les cards) change

   - Le top (titre + bouton) ne change pas

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



.cards.is-theme-dark{

  --cards-band-bg: var(--color-noir);

  --cards-card-text: var(--color-blanc);

}



.cards.is-theme-light{

  --cards-band-bg: transparent;

  --cards-card-text: var(--color-noir);

}



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

   TOP (hors bande) — container aligné site

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



.cards__container{

  max-width: var(--layout-wide-size);

  margin: 0 auto;

  padding: 34px 30px 18px; /* un peu moins en bas, la bande suit */

  box-sizing: border-box;

}



.cards__top{

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 18px;

  margin: 0;

}



/* ✅ grand titre inchangé (pas de couleur forcée) */

.cards__title{

  margin: 0;

  font-size: var(--font-size-xxl, 40px);

  font-weight: 500;

  line-height: 1.1;

}



.cards__btn{

  flex: 0 0 auto;

  margin-top: 6px;

}



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

   BANDE pleine largeur (uniquement derrière les cards)

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



.cards__band{

  width: 100%;

  background: var(--cards-band-bg);

  padding: 26px 0;

}



.cards__viewport{

  width: 100%;

  overflow: hidden; /* slider when enabled */

}



/* Track = "container" interne aligné au site */

.cards__track{

  max-width: var(--layout-wide-size);

  margin: 0 auto;



  display: flex;

  flex-wrap: wrap;

  justify-content: center; /* centré quand pas slider */

  align-items: stretch;

  gap: 30px;



  padding: 0 30px;

  box-sizing: border-box;



  will-change: transform;

  transform: translate3d(0,0,0);

}



/* Mode slider (activé en JS) */

.cards.is-slider .cards__track{

  flex-wrap: nowrap;

  justify-content: flex-start;

  transition: transform .35s ease;

}



/* Slide */

.cards-slide{

  flex: 0 0 auto;

  width: 320px;

  display: flex;

}



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

   CARD

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



.card{

  width: 100%;

  display: flex;

  align-items: flex-start;

  gap: 16px;

  background: transparent;

  box-sizing: border-box;

}



.card__logo{

  flex: 0 0 auto;

  width: 72px;

  height: 72px;

  display: grid;

  place-items: center;

}



.card__logo img{

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

}



.card__content{

  flex: 1 1 auto;

  min-width: 0;

}



.card__title{

  color: var(--cards-card-text);

  font-size: var(--font-size-m, 18px);

  font-weight: 500;

  line-height: 1.2;

  margin: 0 0 8px;

}



.card__text{

  color: var(--cards-card-text);

  font-size: var(--font-size-s, 16px);

  font-weight: 400;

  line-height: 1.45;

}



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

   RESPONSIVE

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



@media (max-width: 980px){

  .cards__container{

    padding: 30px 20px 16px;

  }



  .cards__track{

    padding: 0 20px;

  }



  .cards-slide{

    width: 300px;

  }

}



@media (max-width: 680px){



  .cards__container{

    padding: 28px 20px 14px;

  }



  .cards__top{

    flex-direction: column;

    align-items: flex-start;

    gap: 14px;

  }



  .cards__btn{

    margin-top: 0;

  }



  /* Mobile = toujours empilé (pas de slider) */

  .cards__track{

    flex-direction: column;

    flex-wrap: nowrap;

    justify-content: flex-start;

    gap: 18px;

  }



  .cards-slide{

    width: 100%;

  }



  .card{

    gap: 14px;

    margin-bottom:30px;

  }



  .card__logo{

    width: 60px;

    height: 60px;

  }

}