/* ============================================================
   Smart ID — Entête Services (ondes)  v1.1
   Encart gauche (Fond A + texte) — Forme droite (jardin ondulé) devant
   ============================================================ */
.es-section{
  --orange:#f39204; --title:#182131; --txt:#6c6c6c; --panel:#fff;
  --rad:24px; --barw:125px; --barh:7px; --tri:46px;
  --pad:54px;
  position:relative;
  width:1300px;
  max-width:calc(100vw - 16px);
  height:var(--es-h, 570px);
  left:50%; transform:translateX(-50%);
  margin:0;
  border-radius:var(--rad);
  overflow:hidden;
  font-family:inherit;
  color:var(--txt);
  isolation:isolate;
}
.es-section *{ box-sizing:border-box; }

/* Fond A — encart gauche, DEVANT la bande floutée (clip posé en JS = section moins l'image) */
.es-fonda{
  position:absolute; inset:0; z-index:3;
  background-color:var(--panel);
  background-repeat:no-repeat;
  background-position:left center;
  background-size:auto;            /* taille réelle de l'image */
}

/* Forme droite — image ondulée, au FOND (clip posé en JS) */
.es-image{
  position:absolute; inset:0; z-index:1;
  background-repeat:no-repeat; background-position:right center; background-size:853px 573px;  /* taille fixe, non agrandie */
  background-image:linear-gradient(180deg,#dfe7ea 0%,#eef3f4 100%);
  -webkit-filter:drop-shadow(-10px 0 26px rgba(16,42,48,.16));
          filter:drop-shadow(-10px 0 26px rgba(16,42,48,.16));
}
.es-section.es-veil .es-image::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(11,32,39,.18), rgba(11,32,39,.40));
}

/* Tranche diagonale floutée : rectangle TOURNÉ le long de la diagonale (sa boîte = la bande).
   backdrop-filter -> l'onde se voit à travers ; aucun clip-path (insensible au bug Chrome/Edge).
   Taille/position/rotation posées en JS. */
.es-blur{
  position:absolute; z-index:2; pointer-events:none; transform-origin:center center;
  -webkit-backdrop-filter:blur(10px) saturate(1.12) brightness(1.08);
          backdrop-filter:blur(10px) saturate(1.12) brightness(1.08);
}

/* Couche texte — NON découpée (toujours visible), habillage calculé en JS */
.es-text{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.es-copy{
  position:absolute; left:var(--pad); top:50%; transform:translateY(-50%);
  width:auto; max-width:520px; pointer-events:auto;
}
.es-kicker{
  color:var(--orange); font-family:system-ui,sans-serif;
  font-size:16px; font-weight:600; letter-spacing:.01em; margin:0 0 22px;
}
.es-kicker.up{ text-transform:uppercase; letter-spacing:.06em; }
.es-title{
  color:var(--title); margin:0;   /* taille = celle du thème pour h1/h2/h3 */
}
.es-title em{ font-style:italic; }
.es-bar{
  display:block; width:var(--barw); height:var(--barh);
  background:var(--orange); border-radius:2px; margin:26px 0 26px;
}
.es-para{ color:var(--txt); font-size:16px; line-height:1.7; margin:0; display:flow-root; }
.es-para p{ margin:0 0 12px; }
.es-para p:last-child{ margin-bottom:0; }
.es-para p:empty{ display:none; }

/* Triangle orange (pied de la diagonale) — position en JS */
.es-tab{
  position:absolute; z-index:5; bottom:0; left:0;
  width:0; height:0;
  border-left:calc(var(--tri)/1.6) solid transparent;
  border-right:calc(var(--tri)/1.6) solid transparent;
  border-bottom:calc(var(--tri)*0.62) solid var(--orange);
  transform:translateX(-50%);
  pointer-events:none;
}

/* gabarit d'habillage du paragraphe (float invisible) */
.es-pshape{ display:block; }

/* ============================================================
   RESPONSIVE — image en bandeau, texte dessous
   ============================================================ */
@media (max-width:992px){
  .es-section{
    width:auto; max-width:none; left:auto; transform:none;
    margin-left:25px; margin-right:25px;            /* tablette : marge latérale blanche */
    height:auto; display:flex; flex-direction:column;
  }
  .es-image{
    position:relative; inset:auto; order:1; width:100%; height:240px;
    background-size:cover; background-position:center;   /* bandeau : s'adapte */
    clip-path:none !important; -webkit-clip-path:none !important; filter:none; -webkit-filter:none;
  }
  .es-blur, .es-tab{ display:none; }
  .es-fonda{
    position:relative; inset:auto; order:2; min-height:1px;
    clip-path:none !important; -webkit-clip-path:none !important;
  }
  .es-text{
    position:relative; inset:auto; order:3; margin-top:-1px;
  }
  .es-copy{
    position:relative; left:auto; top:auto; transform:none;
    width:auto !important; max-width:none !important; padding:30px 24px 34px;
  }
  .es-copy .es-pshape{ display:none !important; }
  /* l'encart blanc occupe le bloc texte sur petit écran */
  .es-section{ background:var(--panel); }
}
@media (max-width:600px){
  .es-section{ margin-left:15px; margin-right:15px; }   /* smartphone : marge latérale */
  .es-image{ height:180px; }
}