.catalogue-v2{
  background: #000;
  min-height: 100vh;
  padding: 0;
}

.catalogue-v2__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,0.15);
}

@media (max-width: 768px){
  .catalogue-v2__grid{
    grid-template-columns: 1fr;
  }
}

/* bloc gauche/droite */
.cat-block{

  height:100vh; /* ajuste selon header/footer */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* IMPORTANT: plus centré verticalement */
  gap: 1rem;
  background-color: #b8ff00;
}

.cat-block:last-child{
  border-right: 0;
}

@media (max-width: 768px){
  .cat-block{
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .cat-block:last-child{
    border-bottom: 0;
  }
}

/* carousel */
.cat-carousel{
   width: 100%;
}

/* La "fenêtre" du carousel */
.cat-carousel__viewport{
  position: relative;
  overflow: hidden;
  height: 100vh;
}


/* Le rail */
.cat-carousel__track{
  display: flex;
  height: 100%;
  transition: transform 300ms ease;
  will-change: transform;
}

/* ✅ CHAQUE SLIDE = 100% de la fenêtre */
.cat-carousel__slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
}

/* ✅ IMAGE = cover (remplit) */
.cat-carousel__slide img{
  width: 100%;

  object-fit: cover;
  display: block;
}


/* conteneur overlay */
.cat-carousel__overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  z-index: 50;

  display: flex;
  flex-direction: column;
  align-items: left;
  gap: .75rem;

  pointer-events: auto; /* ✅ IMPORTANT : ON AUTORISE LES CLICS */
}
.cat-block__headline{
  text-transform: uppercase;
  color:#fff;
    padding-left:2rem;     /* marge éditoriale */
font-size: 3rem;
margin: 0;
}
.cat-carousel__dots,
.cat-block__actions{
  pointer-events: auto; /* clic OK */
}


.cat-carousel__dots{
  display: none;
  justify-content: center;
  gap: .5rem;
  pointer-events: auto; /* clic OK */
  margin-bottom: 2rem;
}

.cat-dot{
  position: relative;
  width: 30px;
  height: 2px;
  margin: 0 10px;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
}
.arrow {
    margin-left: .3rem;
    display: inline-block;
}
/* zone cliquable agrandie */
.cat-dot::before{
  content: "";
  position: absolute;
  inset: -20px -2px;
   /* ↑ ↓  |  ← →  zone clic */
}

.cat-dot.is-active{
  background: #b8ff00;
}


.cat-block__actions{
  display: flex;
  flex-direction: column;   /* empilés */
  align-items: flex-start;  /* ⬅ alignés à gauche */
  gap: .3rem;
  padding-left: 2rem;     /* marge éditoriale */
  padding-right: 1.5rem;
}


.cat-btn{
  display: inline-block;
  text-align: left;
     font-size: 1.1rem;
    background: #c0ff00;
    padding: .8rem 1.1rem;
    border: 1px solid black;
    text-decoration: none;
    color: black;
    z-index: 10;
  
}
.cat-btn:hover{
  background-color: white;
}
@media (max-width: 768px){
  .cat-carousel__track {
    display: flex;
    height: 60%;
    margin-top: 2rem;
    transition: transform 300ms ease;
    will-change: transform;
}
  .cat-block__actions{
    flex-direction: column;
    align-items: stretch;
    align-items: flex-start;
  }
  .cat-carousel__overlay{
    position: relative;     /* ✅ reste en overlay */
    left: 0;
    right: 0;
    bottom: 2rem;           /* ajuste */
    z-index: 50;
    pointer-events: auto;   /* ✅ */
  }
.cat-btn{
  display: inline-block;
  text-align: left;
     font-size: 1rem;
    background: #c0ff00;
    padding: 1rem 1rem;
    border: 1px solid black;
    text-decoration: none;
    color: black;
    z-index: 10;

     align-items: flex-start;
  
}
.cat-block {
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
}
.cat-carousel__dots{
  display: none;
  justify-content: center;
  gap: .1rem;
  pointer-events: auto; /* clic OK */
  margin-bottom: 3.5rem;
}
.cat-carousel__slide img {
    width: 100%;
     height: 100%; 
    object-fit: cover;
    display: block;
}
}