@charset "utf-8";

/* =========================================================
   FALLBACK DIVI SOURCE
   Styles des blurbs d'origine avant transformation par
   eri-benefits.js ou en cas d'absence de JavaScript.
   ========================================================= */

.listBenefitsRow .et_pb_main_blurb_image,
.listBenefitsRow .et_pb_image_wrap {
    vertical-align: middle;
    width: 120px !important;
    margin: auto !important;
}

.listBenefitsLeft .et_pb_blurb_content {
    display: flex;
}

.listBenefitsRight .et_pb_blurb_content {
    display: flex;
    flex-direction: row-reverse;
}

.listBenefitsLeft p,
.listBenefitsRight p {
    font-size: 17px;
    font-weight: 200;
}


/* Laptop */
@media screen and (max-width: 1200px) and (min-width: 981px) {

    .listBenefitsRow > div:nth-child(even) .listBenefitsLeft .et_pb_blurb_content,
    .listBenefitsRow > div:nth-child(even).fixed .listBenefitsRight .et_pb_blurb_content {
        flex-direction: row-reverse;
    }

    .listBenefitsRow > div:nth-child(even) .listBenefitsRight .et_pb_blurb_content,
    .listBenefitsRow > div:nth-child(even).fixed .listBenefitsLeft .et_pb_blurb_content {
        flex-direction: row;
    }
}


/* Tablet */
@media screen and (max-width: 980px) and (min-width: 768px) {

    .listBenefitsRow > div:nth-child(even) .listBenefitsLeft .et_pb_blurb_content {
        flex-direction: row-reverse;
    }

    .listBenefitsRow > div:nth-child(even) .listBenefitsRight .et_pb_blurb_content {
        flex-direction: row;
    }

    .listBenefitsRow > div:nth-child(even) .listBenefitsRight.fixed .et_pb_blurb_content {
        flex-direction: row-reverse;
    }
}


/* Mobile */
@media screen and (max-width: 767px) {

    .listBenefitsLeft .et_pb_blurb_content,
    .listBenefitsRight .et_pb_blurb_content {
        display: grid;
    }

    .listBenefitsLeft p,
    .listBenefitsRight p {
        font-size: 15px;
        font-weight: 200;
    }
}

/* ===== Wrapper Divi ===== */
.listBenefitsRow {
  display: flex;
}

.listBenefitsRow h4,
.listBenefitsRow h4 span {
    font-weight: 400;
}

.listBenefitsRow > div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}


 .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: var(--icon-size, 120px);
  min-width: var(--icon-size, 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: var(--icon-size, 120px);
	  min-width: var(--icon-size, 120px);
	}
}

/* ===== Wrapper Divi : laptop ===== */
@media screen and (max-width: 1200px) and (min-width: 981px) {
  .listBenefitsRow {
    flex-direction: column;
  }

  .listBenefitsRow > div {
    width: 100% !important;
    padding: 2% 0;
  }
}

@media screen and (max-width: 767px) {
	    .listBenefitsRow h4,
    .listBenefitsRow h4 span {
        font-weight: 600;
        font-size: 18px !important;
    }
	.benefits-list > .benefit-item{
  	flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    width:100%;
  }
      .benefits-list .benefit-media{
        padding:15px;
  }
	  .listBenefitsRow > div {
    padding-left: 0;
    padding-right: 0;
  }
  .listBenefitsRow .et_pb_image_wrap {
    width: 90px !important;
    margin: 15px auto !important;
  }
  }