/* CARVAJAL EXPERTISES — V1.5.15 / finition client
   A single photo-to-photo transition, then a single photo-to-paper transition.
   No stacked fog layers, image duplication or scroll-driven animation.
   All functional/form/SEO content remains identical. */

/* 1 — ANGOULEME -> DEVIS
   The quote interior enters *over* the end of the city panorama. A transparent
   edge becomes fully opaque before the real hero section ends. */
.hero { position:relative; z-index:1; }
.hero::after { content:none; }
#devis.quote-premium {
  position:relative;
  z-index:2;
  margin-top:-156px;
  padding-top:clamp(196px,14vw,222px);
  padding-bottom:clamp(94px,7vw,110px);
  background-color:#ece6db;
  background-position:50% 53%;
  box-shadow:none;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0,
    rgba(0,0,0,.10) 25px,
    rgba(0,0,0,.32) 64px,
    rgba(0,0,0,.67) 110px,
    #000 153px,
    #000 calc(100% - 116px),
    rgba(0,0,0,.86) calc(100% - 76px),
    rgba(0,0,0,.35) calc(100% - 28px),
    transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0,
    rgba(0,0,0,.10) 25px,
    rgba(0,0,0,.32) 64px,
    rgba(0,0,0,.67) 110px,
    #000 153px,
    #000 calc(100% - 116px),
    rgba(0,0,0,.86) calc(100% - 76px),
    rgba(0,0,0,.35) calc(100% - 28px),
    transparent 100%);
}
/* Maintain legibility, without washing out the actual picture. */
#devis.quote-premium::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(252,249,244,.60),
    rgba(250,247,241,.40) 38%,
    rgba(250,247,241,.10) 73%,
    transparent 100%);
}
#devis.quote-premium::after { content:none; }
#devis .quote-layout,#devis .quote-aside,#devis .form-panel { position:relative; z-index:1; }

/* 2 — DEVIS -> CABINET
   Cabinet paper lives *under* the quote image. The same single photo mask
   reveals it gradually: no second copy of the photo and no white stripe. */
#devis + #cabinet.cabinet-v13 {
  position:relative;
  z-index:0;
  margin-top:-112px;
  padding-top:clamp(142px,10vw,164px);
  background:linear-gradient(180deg,
    #eee9e0 0%,
    #f1eee7 18%,
    #f6f5ef 52%,
    #fafaf6 100%);
  border-top:0;
  overflow:hidden;
}
#devis + #cabinet.cabinet-v13::before,
#devis + #cabinet.cabinet-v13::after { content:none; }
#cabinet .cabinet-v13-intro::before { content:none; }
#cabinet .cabinet-v13-layout { position:relative; z-index:1; }

/* 3 — Keep the remaining sections quiet and consistent. */
#prestations.services-section-premium { padding-bottom:clamp(40px,3.8vw,52px); }
#prestations + #dpe-audit.energy-decision {
  margin-top:0;
  padding-top:clamp(44px,4vw,58px);
}
#dpe-audit + #implantations.address-section,
#implantations + #temoignages.trust-section { margin-top:0; }

@media (min-width:1600px) {
  #devis.quote-premium { margin-top:-174px; padding-top:236px; }
  #devis.quote-premium {
    -webkit-mask-image:linear-gradient(to bottom,
      transparent 0,rgba(0,0,0,.08) 28px,rgba(0,0,0,.30) 70px,
      rgba(0,0,0,.68) 126px,#000 170px,#000 calc(100% - 116px),
      rgba(0,0,0,.86) calc(100% - 76px),rgba(0,0,0,.35) calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(to bottom,
      transparent 0,rgba(0,0,0,.08) 28px,rgba(0,0,0,.30) 70px,
      rgba(0,0,0,.68) 126px,#000 170px,#000 calc(100% - 116px),
      rgba(0,0,0,.86) calc(100% - 76px),rgba(0,0,0,.35) calc(100% - 28px),transparent 100%);
  }
}
@media (max-width:860px) {
  #devis.quote-premium {
    margin-top:-112px;
    padding-top:156px;
    padding-bottom:100px;
    background-position:58% 50%;
    -webkit-mask-image:linear-gradient(to bottom,
      transparent 0,rgba(0,0,0,.13) 20px,rgba(0,0,0,.44) 56px,
      rgba(0,0,0,.76) 87px,#000 109px,#000 calc(100% - 110px),
      rgba(0,0,0,.86) calc(100% - 72px),rgba(0,0,0,.34) calc(100% - 25px),transparent 100%);
    mask-image:linear-gradient(to bottom,
      transparent 0,rgba(0,0,0,.13) 20px,rgba(0,0,0,.44) 56px,
      rgba(0,0,0,.76) 87px,#000 109px,#000 calc(100% - 110px),
      rgba(0,0,0,.86) calc(100% - 72px),rgba(0,0,0,.34) calc(100% - 25px),transparent 100%);
  }
  #devis.quote-premium::before { background:linear-gradient(180deg,rgba(250,247,241,.42),rgba(250,247,241,.22)); }
  #devis + #cabinet.cabinet-v13 { margin-top:-106px; padding-top:134px; }
}
@media (max-width:560px) {
  #devis.quote-premium {
    margin-top:-82px;
    padding-top:122px;
    padding-bottom:98px;
    background-position:62% 46%;
    -webkit-mask-image:linear-gradient(to bottom,
      transparent 0,rgba(0,0,0,.18) 15px,rgba(0,0,0,.58) 44px,
      #000 79px,#000 calc(100% - 104px),
      rgba(0,0,0,.82) calc(100% - 66px),rgba(0,0,0,.32) calc(100% - 21px),transparent 100%);
    mask-image:linear-gradient(to bottom,
      transparent 0,rgba(0,0,0,.18) 15px,rgba(0,0,0,.58) 44px,
      #000 79px,#000 calc(100% - 104px),
      rgba(0,0,0,.82) calc(100% - 66px),rgba(0,0,0,.32) calc(100% - 21px),transparent 100%);
  }
  #devis.quote-premium::before { background:linear-gradient(180deg,rgba(252,249,244,.60),rgba(252,249,244,.32) 54%,rgba(252,249,244,.22)); }
  #devis + #cabinet.cabinet-v13 { margin-top:-102px; padding-top:125px; }
}