/* ============================================================
   Smart ID — Entête Article (parallaxe)  v1.0
   Encart gauche (Fond A + texte) — Forme droite (image en parallaxe)
   derrière, avec marge diagonale floutée.
   ============================================================ */
.ea-section{
  --orange:#f39204; --title:#182131; --panel:#fff;
  --rad:28px; --barw:125px; --barh:7px; --tri:46px;
  --pad:54px; --ea-imgw:602px; --ea-amp:110px;
  position:relative;
  width:1300px;
  max-width:calc(100vw - 16px);
  height:var(--ea-h, 289px);
  left:50%; transform:translateX(-50%);
  margin:0;
  border-radius:var(--rad);
  overflow:hidden;
  font-family:inherit;
  color:var(--title);
  isolation:isolate;
}
.ea-section *{ box-sizing:border-box; }

/* Forme droite — image au FOND (clip posé en JS) */
.ea-image{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  background:linear-gradient(180deg,#dfe7ea 0%,#eef3f4 100%);
}
/* image réelle (parallaxe verticale) : largeur fixe, plus haute que le cadre, translatée en JS */
.ea-img{
  position:absolute; right:0; top:calc(-1 * var(--ea-amp));
  width:var(--ea-imgw); height:calc(100% + 2 * var(--ea-amp));
  background-repeat:no-repeat; background-position:center; background-size:cover;
  will-change:transform;
}

/* Marge diagonale floutée : rectangle TOURNÉ le long de la diagonale (sa boîte = la bande).
   backdrop-filter -> le fond/parallaxe se voit à travers ; aucun clip-path (insensible au bug Chrome/Edge).
   Taille/position/rotation posées en JS. */
.ea-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);
}

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

/* Couche texte — NON découpée (toujours visible), habillage calculé en JS */
.ea-text{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.ea-copy{
  position:absolute; left:var(--pad); top:50%; transform:translateY(-50%);
  width:auto; max-width:560px; pointer-events:auto;
}
.ea-kicker{
  color:var(--orange); font-family:system-ui,sans-serif;
  font-size:16px; font-weight:600; letter-spacing:.01em; margin:0 0 16px;
}
.ea-kicker.up{ text-transform:uppercase; letter-spacing:.08em; }
.ea-title{
  color:var(--title); margin:0; display:flow-root;   /* taille = thème h1/h2/h3 ; BFC pour l'habillage */
}
.ea-title em{ font-style:italic; }
.ea-bar{
  display:block; width:var(--barw); height:var(--barh);
  background:var(--orange); border-radius:2px; margin:22px 0 0;
}
/* Fil d'Ariane (chemin des pages) */
.ea-bc{
  margin:14px 0 0; font-size:13px; line-height:1.5; color:#6B6B6B;
  font-family:system-ui,sans-serif;
}
.ea-bc a{ color:#6B6B6B; text-decoration:none; }
.ea-bc a:hover{ text-decoration:underline; }
.ea-bc .ea-bc-sep{ margin:0 7px; color:#b9b9b9; }
.ea-bc .ea-bc-cur{ color:#6B6B6B; }
/* gabarit d'habillage du titre (float invisible) */
.ea-pshape{ display:block; }

/* Triangle orange (pied de la diagonale) — position en JS */
.ea-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;
}

/* ============================================================
   RESPONSIVE — image en bandeau, texte dessous
   ============================================================ */
@media (max-width:992px){
  .ea-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;
    background:var(--panel);
  }
  .ea-image{
    position:relative; inset:auto; order:1; width:100%; height:170px;
    clip-path:none !important; -webkit-clip-path:none !important;
  }
  .ea-img{
    position:absolute; inset:0; top:0; width:100%; height:100%;
    transform:none !important;                      /* pas de parallaxe en responsive */
  }
  .ea-blur, .ea-tab{ display:none; }
  .ea-fonda{
    position:relative; inset:auto; order:2; min-height:1px;
    clip-path:none !important; -webkit-clip-path:none !important;
  }
  .ea-text{ position:relative; inset:auto; order:3; margin-top:-1px; }
  .ea-copy{
    position:relative; left:auto; top:auto; transform:none;
    width:auto !important; max-width:none !important; padding:26px 24px 30px;
  }
  .ea-copy .ea-pshape{ display:none !important; }
}
@media (max-width:600px){
  .ea-section{ margin-left:15px; margin-right:15px; }   /* smartphone : marge latérale */
  .ea-image{ height:140px; }
}