@charset "utf-8";

 .benefits-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* ou autre alignement selon le besoin */
  width:100%;
  padding: 0 !important;
  column-gap: 6%;
}

/* ===== Item ===== */
.benefit-item{
  display:flex;
  align-items:flex-start;
  width:47%;
  max-width:550px;
  margin-bottom:6%;
}

/* Ancrage : items impairs à gauche, pairs à droite */
.benefit-item:nth-child(odd){ justify-self:start;
  }
  
.benefit-item:nth-child(odd) .benefit-body,
.benefit-item:nth-child(even) .benefit-body
  { padding:0 0 0 15px;}
.benefit-item:nth-child(even){ justify-self:end; }

/* Alternance par paires (3-4, 7-8, … icône à droite) */
.benefit-item:nth-child(4n+3),
.benefit-item:nth-child(4n+4){
  flex-direction:row-reverse;     /* inverse l’ordre : icône à droite */
}

  .benefit-item:nth-child(4n+3) .benefit-body,
.benefit-item:nth-child(4n+4) .benefit-body
  { padding:0 15px 0 0; }
/* Dernier centré si nombre impair */
.benefit-item:last-child:nth-child(odd){
  margin-left: auto;
  margin-right: auto;
  width: 100%; /* Pour l’occuper au centre */
  margin-bottom:0;
}

/* ===== Médias ===== */
.benefit-media{
  width:120px;
  min-width:120px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.benefit-media img{
  width:100%;
  height:auto;
  display:block;
}

/* ===== Texte ===== */
.benefit-body{ flex:1 1 auto; min-width:0; text-align:left; }
.benefit-title,.benefit-text{ color:#fff; }
  .benefit-text{
    font-size:17px;
  }

  
/* ===== 1 colonne + alternance pair/impair entre 1200px et 981px ===== */
@media screen and (max-width: 1200px) and (min-width: 768px) {

  /* Une seule colonne */
  .benefits-list{
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

  /* Cartes pleine largeur + reset des inversions "par paires" du desktop */
  .benefits-list > .benefit-item{
    width: auto;
    justify-self: stretch;
    flex-direction: row; /* base = icône à gauche */
  }

  /* Annule start/end hérités du desktop */
  .benefits-list > .benefit-item:nth-child(odd),
  .benefits-list > .benefit-item:nth-child(even){
    justify-self: stretch;
  }

  /* VRAIE alternance pair/impair : even = icône à droite */
  .benefits-list > .benefit-item:nth-child(even){
    flex-direction: row-reverse;
  }
  
    .benefits-list > .benefit-item:nth-child(odd){
    flex-direction: row;
  }

  .benefit-item:nth-child(odd) .benefit-body
  { padding:0 0 0 15px; }
  
.benefit-item:nth-child(even) .benefit-body
  { padding:0 15px 0 0 ; }


  /* Icône = 120px (si tu n’utilises pas la variable) */
  .benefits-list .benefit-media{
    width: 120px;
    min-width: 120px;
  }
}

@media screen and (max-width: 767px) {
	.benefits-list > .benefit-item{
  	flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    width:100%;
  }
      .benefits-list .benefit-media{
        padding:15px;
  }
  }