/* ==========================================================
   BLOOPIN HOME — EDITORIAL INTRODUCTION V11
   Titre sur une ligne en desktop + hauteur équilibrée.
========================================================== */

.bp-dual-benefits{
  position:relative;
  padding:clamp(24px,4vw,58px) 0;
  overflow:clip;
}

.bp-dual-benefits,
.bp-dual-benefits *{
  box-sizing:border-box;
}

.bp-dual-benefits__inner{
  width:min(1540px,calc(100vw - 32px));
  margin-left:50%;
  transform:translateX(-50%);
}

.bp-dual-benefits__panel{
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(340px,.72fr);
  grid-template-areas:
    "title media"
    "content media";
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:clamp(34px,4.5vw,76px);
  row-gap:clamp(20px,2vw,30px);
  padding:clamp(34px,4vw,60px);
  border:0;
  border-radius:clamp(26px,2.6vw,36px);
  background:var(--surface,#fff);
  box-shadow:0 18px 46px rgba(15,23,42,.04);
}

.bp-dual-benefits__title{
  grid-area:title;
  align-self:end;
  max-width:none;
  margin:0;
  color:var(--text,#0F172A);
  font-size:clamp(2.05rem,2.65vw,2.85rem);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:800;
  text-wrap:balance;
}

.bp-dual-benefits__title span{
  color:var(--primary,#22A1EE);
}

.bp-dual-benefits__content{
  grid-area:content;
  align-self:start;
  min-width:0;
  max-width:900px;
}

.bp-dual-benefits__copy{
  display:grid;
  gap:clamp(13px,1.3vw,18px);
  max-width:860px;
}

.bp-dual-benefits__copy p{
  margin:0;
  color:var(--text-soft,#64748B);
  font-size:clamp(1rem,.34vw + .94rem,1.12rem);
  line-height:1.7;
  font-weight:400;
  text-wrap:pretty;
}

.bp-dual-benefits__copy .bp-dual-benefits__lead{
  color:var(--text,#0F172A);
  font-size:clamp(1.08rem,.5vw + .98rem,1.24rem);
  line-height:1.55;
  font-weight:650;
}

.bp-dual-benefits__closing{
  margin:clamp(20px,2.2vw,28px) 0 0;
  padding:clamp(16px,1.8vw,21px) 0 0;
  border-top:1px solid var(--border,#E5EEF6);
  color:var(--text,#0F172A);
  font-size:clamp(1.04rem,.4vw + .98rem,1.18rem);
  line-height:1.5;
  font-weight:750;
  text-wrap:balance;
}

.bp-dual-benefits__media{
  grid-area:media;
  position:relative;
  align-self:center;
  width:100%;
  height:clamp(390px,30vw,485px);
  margin:0;
  overflow:hidden;
  border-radius:clamp(22px,2vw,30px);
  background:#ead3b7;
  box-shadow:0 16px 34px rgba(15,23,42,.09);
}

.bp-dual-benefits__media img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
}

/* Grand desktop : le titre tient sur une seule ligne. */
@media (min-width:1180px){
  .bp-dual-benefits__title{
    white-space:nowrap;
  }
}

/* Tablette */
@media (max-width:1050px){
  .bp-dual-benefits{
    overflow:visible;
    padding-inline:12px;
  }

  .bp-dual-benefits__inner{
    width:100%;
    max-width:none;
    margin-left:0;
    transform:none;
  }

  .bp-dual-benefits__panel{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "media"
      "content";
    grid-template-rows:auto;
    gap:28px;
    padding:clamp(28px,4.5vw,44px);
  }

  .bp-dual-benefits__title{
    max-width:820px;
    font-size:clamp(2.2rem,5vw,3.2rem);
  }

  .bp-dual-benefits__title span{
    display:block;
  }

  .bp-dual-benefits__media{
    height:auto;
    aspect-ratio:16 / 9;
  }

  .bp-dual-benefits__content{
    max-width:100%;
  }

  .bp-dual-benefits__media img{
    object-position:center 32%;
  }
}

/* Mobile */
@media (max-width:767px){
  .bp-dual-benefits{
    padding:16px 0 24px;
    overflow:visible;
  }

  .bp-dual-benefits__inner{
    width:calc(100vw - 16px);
    max-width:none;
    margin-left:50%;
    transform:translateX(-50%);
  }

  .bp-dual-benefits__panel{
    width:100%;
    gap:20px;
    padding:23px 18px;
    border-radius:26px;
  }

  .bp-dual-benefits__title{
    font-size:clamp(1.9rem,8.5vw,2.55rem);
    line-height:1.04;
    letter-spacing:-.042em;
  }

  .bp-dual-benefits__media{
    aspect-ratio:4 / 3;
    border-radius:21px;
  }

  .bp-dual-benefits__media img{
    object-position:center 28%;
  }

  .bp-dual-benefits__copy{
    gap:14px;
  }

  .bp-dual-benefits__copy p{
    font-size:.95rem;
    line-height:1.62;
  }

  .bp-dual-benefits__copy .bp-dual-benefits__lead{
    font-size:1.04rem;
    line-height:1.55;
  }

  .bp-dual-benefits__closing{
    margin-top:20px;
    padding-top:17px;
    font-size:1rem;
    line-height:1.5;
  }
}

@media (max-width:390px){
  .bp-dual-benefits__panel{
    padding:23px 18px;
  }

  .bp-dual-benefits__media{
    aspect-ratio:1 / 1;
  }
}