.about-page .about-local-visual>img{object-position:center center;}
.about-page .about-wide-banner{position:relative;width:100%;height:clamp(240px,26vw,390px);margin:0;padding:0;overflow:hidden;line-height:0;background:var(--navy);}
.about-page .about-wide-banner img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;object-fit:cover;object-position:center 48%;}
.about-page .about-wide-banner::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,43,92,.08) 0%,transparent 20%,transparent 80%,rgba(0,43,92,.10) 100%);}
@media(max-width:780px){.about-page .about-wide-banner{height:240px;}.about-page .about-wide-banner img{object-position:center center;}}
@media(max-width:520px){.about-page .about-wide-banner{height:190px;}}

/* ============================================================
   À PROPOS — CARTOUCHES EN BAS DE L'IMAGE
   ============================================================ */

.about-local-visual{
  position:relative;
}

.about-local-metrics{
  position:absolute !important;
  z-index:3;

  left:24px !important;
  right:24px !important;
  top:auto !important;
  bottom:24px !important;

  display:grid;
  grid-template-columns:1.35fr .75fr;
  gap:10px;

  margin:0 !important;
}

.about-local-metric{
  min-height:100px;
  padding:17px 18px;
}

@media(max-width:620px){

  .about-local-metrics{
    left:14px !important;
    right:14px !important;
    bottom:14px !important;

    grid-template-columns:1.3fr .8fr;
    gap:8px;
  }

  .about-local-metric{
    min-height:88px;
    padding:14px;
  }

}

/* ============================================================
   À PROPOS — BANDEAU RÉSERVOIR
   Aligné sur la largeur du site + cadrage sur les montagnes
   ============================================================ */

.about-page .about-wide-banner{
  position:relative;

  /* même largeur que les autres contenus du site */
  width:min(calc(100% - 40px), var(--max));
  height:clamp(300px, 28vw, 430px);

  /* espace après "Pourquoi SAM | EAU" */
  margin:55px auto 0;

  padding:0;
  overflow:hidden;

  border-radius:22px;

  background:var(--navy);

  box-shadow:
    0 18px 42px rgba(0,18,42,.18);
}


.about-page .about-wide-banner img{
  position:absolute;
  inset:0;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  /* IMPORTANT :
     on privilégie le haut de la photo pour conserver les montagnes */
  object-position:center top;
}




/* ============================================================
   TABLETTE
   ============================================================ */

@media(max-width:820px){

  .about-page .about-wide-banner{
    width:min(calc(100% - 28px), var(--max));
    height:300px;

    margin-top:38px;

    border-radius:18px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:560px){

  .about-page .about-wide-banner{
    height:220px;
    margin-top:30px;

    border-radius:15px;
  }

}


/* ============================================================
   LISIBILITÉ — À PROPOS
   Les textes sur fonds navy passent en blanc.
   ============================================================ */

.about-page .about-local-content > p:not(.eyebrow),
.about-page .about-local-content > .about-signature,
.about-page .ecosystem-head > p:last-child,
.about-page .ecosystem-group-head p,
.about-page .ecosystem-disclaimer,
.about-page .why-chain li,
.about-page .why-card p{
  color:#fff !important;
}

/* Les cartouches sombres de la photo */
.about-page .about-local-metric:not(.about-local-metric-primary) span{
  color:#fff !important;
}