/* VERMEERSCH COMPANY — lot services.
   Structure et mouvement repris des pages services Nemelec, adaptés à la charte claire rouge.
   Chargé après le socle eco ; aucun contenu n'est masqué sans JS. */

.vcs-page {
  --vcs-ease: cubic-bezier(.2,.8,.2,1);
  --vcs-spring: cubic-bezier(.34,1.56,.64,1);
  --vcs-accent-clair: #ff9aab;
  overflow-x: clip;
}

.vcs-page [data-progress] {
  box-shadow: 0 0 14px rgba(200,16,46,.42);
}

/* Hero photographique — même construction que Nemelec. */
.vcs-page .vcs-hero {
  min-height: clamp(390px,54vw,540px)!important;
  isolation: isolate;
}

.vcs-page .vcs-hero-bg {
  transform: scale(1.08);
  will-change: transform;
  transition: transform 1.2s var(--vcs-ease);
}

.vcs-page .vcs-hero-overlay {
  background:
    linear-gradient(90deg,rgba(20,18,19,.96) 0%,rgba(26,20,21,.78) 48%,rgba(26,20,21,.22) 100%)!important;
}

.vcs-page .vcs-hero::after {
  content: '';
  position: absolute;
  z-index: 1;
  right: clamp(20px,8vw,120px);
  bottom: 0;
  width: clamp(72px,10vw,132px);
  height: 6px;
  border-radius: 6px 6px 0 0;
  background: var(--accent);
  box-shadow: 0 0 26px rgba(200,16,46,.45);
}

.vcs-page .vcs-hero-in {
  position: relative;
  z-index: 2;
}

.vcs-page .vcs-hero-in > span {
  color: var(--vcs-accent-clair)!important;
}

.vcs-page .vcs-word {
  display: inline-block;
}

.vcs-page .vcs-word > i {
  display: inline-block;
  font-style: normal;
  transition: opacity .7s var(--vcs-ease),transform .85s var(--vcs-ease),filter .7s ease;
  transition-delay: calc(var(--vcs-i,0)*75ms + .12s);
}

.vcs-page.vcs-pre .vcs-word > i {
  opacity: 0;
  transform: translateY(.55em);
  filter: blur(6px);
}

.vcs-page .vcs-title-line {
  display: block;
  width: 84px;
  height: 4px;
  margin-top: 15px;
  border-radius: 4px;
  background: linear-gradient(90deg,var(--accent),var(--vcs-accent-clair));
  transform-origin: left center;
  transition: transform 1s var(--vcs-ease) .55s;
}

.vcs-page.vcs-pre .vcs-title-line {
  transform: scaleX(0);
}

/* Cartes de services — bloc cartes Nemelec avec une lecture métier plus nette. */
.vcs-page .vcs-services-section {
  position: relative;
  background:
    radial-gradient(circle at 8% 12%,rgba(200,16,46,.06),transparent 25%),
    var(--fond)!important;
}

.vcs-page .vcs-services-grid {
  gap: 24px;
}

.vcs-page .vcs-services-grid > div {
  perspective: 1000px;
}

.vcs-page .vcs-services-grid a {
  position: relative;
  border-color: rgba(22,20,21,.12)!important;
  box-shadow: 0 18px 48px -34px rgba(38,21,24,.42);
  transform-style: preserve-3d;
  transition: transform .6s var(--vcs-ease),box-shadow .45s,border-color .35s!important;
}

.vcs-page .vcs-services-grid a::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 76px;
  height: 5px;
  border-radius: 0 0 6px 0;
  background: var(--accent);
}

.vcs-page .vcs-services-grid a:hover {
  border-color: rgba(200,16,46,.42)!important;
  box-shadow: 0 28px 58px -34px rgba(120,8,28,.48);
  transform: translateY(-8px);
}

.vcs-page .vcs-services-grid a > div:first-child {
  position: relative;
  background: #e9e5e5;
}

.vcs-page .vcs-services-grid a > div:first-child::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  pointer-events: none;
  background: linear-gradient(180deg,transparent,rgba(20,18,19,.34));
}

.vcs-page .vcs-services-grid img {
  transform: scale(1.002);
  transition: transform 1s var(--vcs-ease)!important;
}

.vcs-page .vcs-services-grid a:hover img {
  transform: scale(1.055);
}

.vcs-page .vcs-services-grid h3 {
  font-size: clamp(21px,2vw,26px)!important;
}

.vcs-page .vcs-service-list.vcs-service-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--texte)!important;
}

.vcs-page .vcs-service-list span {
  display: block;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bord);
}

.vcs-page .vcs-service-list span:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Galerie — équivalent des cartes-galeries Nemelec, sans carrousel ni texte. */
.vcs-page .vcs-gallery-section {
  background:
    linear-gradient(180deg,rgba(200,16,46,.025),transparent 220px),
    var(--fond)!important;
}

.vcs-page .vcs-gallery-grid {
  gap: 18px;
}

.vcs-page .vcs-gallery-grid > div {
  min-width: 0;
  transition: opacity .75s ease,transform .85s var(--vcs-ease),filter .75s ease;
}

.vcs-page .vcs-gallery-grid > div.vcs-card-hidden {
  opacity: 0;
  filter: blur(5px);
  transform: perspective(900px) translateY(44px) rotateX(-10deg) scale(.97);
  transform-origin: 50% 100%;
}

.vcs-page .vcs-gallery-grid [data-lightbox-group] {
  position: relative;
  border-radius: 22px!important;
  border-color: rgba(22,20,21,.12)!important;
  box-shadow: 0 18px 36px -28px rgba(38,21,24,.58);
  transform-style: preserve-3d;
  transition: transform .55s var(--vcs-ease),box-shadow .4s,border-color .3s;
}

.vcs-page .vcs-gallery-grid [data-lightbox-group]:hover {
  border-color: rgba(200,16,46,.48)!important;
  box-shadow: 0 26px 48px -28px rgba(102,7,23,.55);
}

.vcs-page .vcs-gallery-grid img {
  cursor: zoom-in;
  transition: transform 1.05s var(--vcs-ease);
}

.vcs-page .vcs-gallery-grid [data-lightbox-group]:hover img {
  transform: scale(1.045);
}

.vcs-page .vcs-zoom {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(20,18,19,.68);
  border: 1px solid rgba(255,255,255,.32);
  pointer-events: none;
  opacity: 0;
  transform: scale(.72);
  transition: opacity .3s,transform .42s var(--vcs-spring);
}

.vcs-page .vcs-zoom svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vcs-page [data-lightbox-group]:hover .vcs-zoom,
.vcs-page [data-lightbox-group]:focus-within .vcs-zoom {
  opacity: 1;
  transform: none;
}

/* Bandeau d'appel — mécanique CTA Nemelec, avec la vraie photo du chantier existant. */
.vcs-page .vcs-cta .vcs-kb {
  transition: transform 2.4s var(--vcs-ease);
}

.vcs-page .vcs-cta.vcs-cta-hidden .vcs-kb {
  transform: scale(1.12);
}

.vcs-page .vcs-cta .vcs-cta-in > span {
  color: var(--vcs-accent-clair)!important;
}

.vcs-page .vcs-cta .hv20 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--vcs-spring),background .2s,box-shadow .25s,color .2s,border-color .2s!important;
}

.vcs-page .vcs-cta .hv20::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 54%;
  pointer-events: none;
  background: linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform: translateX(-150%) skewX(-20deg);
  transition: transform .75s var(--vcs-ease);
}

.vcs-page .vcs-cta .hv20:hover::after {
  transform: translateX(280%) skewX(-20deg);
}

.vcs-page .vcs-cta .hv20:hover {
  transform: translateY(-3px) scale(1.035);
}

@media (min-width: 768px) {
  .vcs-page section[style*="padding:100px 24px"] {
    padding: 78px 24px 86px!important;
  }
}

@media (max-width: 980px) {
  .vcs-page .vcs-services-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
  }

  .vcs-page .vcs-services-grid > div:last-child {
    grid-column: 1 / -1;
    max-width: 580px;
    width: 100%;
    justify-self: center;
  }

  .vcs-page .vcs-gallery-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
  }
}

@media (max-width: 700px) {
  .vcs-page .vcs-hero {
    min-height: 390px!important;
  }

  .vcs-page .vcs-hero-bg {
    background-position: center!important;
  }

  .vcs-page .vcs-hero-overlay {
    background: linear-gradient(90deg,rgba(20,18,19,.94),rgba(20,18,19,.56))!important;
  }

  .vcs-page section[style*="padding:100px 24px"] {
    padding: 48px 16px 56px!important;
  }

  .vcs-page .vcs-services-grid,
  .vcs-page .vcs-gallery-grid {
    grid-template-columns: 1fr!important;
    gap: 18px;
  }

  .vcs-page .vcs-services-grid > div:last-child {
    grid-column: auto;
    max-width: none;
  }

  .vcs-page .vcs-gallery-grid > div.vcs-card-hidden {
    transform: translateY(30px) scale(.98);
  }

  .vcs-page .vcs-zoom {
    display: none;
  }

  .vcs-page .vcs-cta {
    display: block!important;
    min-height: 0!important;
    border-radius: 24px!important;
  }

  .vcs-page .vcs-cta > .vcs-ov {
    background: linear-gradient(180deg,rgba(var(--overlay-rgb),.04) 0,rgba(var(--overlay-rgb),.36) 28%,rgba(var(--overlay-rgb),.95) 54%,rgb(var(--overlay-rgb)) 68%)!important;
  }

  .vcs-page .vcs-cta > .vcs-cta-in {
    margin-left: 0!important;
    max-width: none!important;
    padding: 178px 22px 30px!important;
  }
}

@media (hover: none) {
  .vcs-page .vcs-services-grid a:hover,
  .vcs-page .vcs-gallery-grid [data-lightbox-group]:hover {
    transform: none!important;
  }

  .vcs-page .vcs-services-grid a:hover img,
  .vcs-page .vcs-gallery-grid [data-lightbox-group]:hover img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vcs-page .vcs-hero-bg,
  .vcs-page .vcs-word > i,
  .vcs-page .vcs-title-line,
  .vcs-page .vcs-services-grid a,
  .vcs-page .vcs-services-grid img,
  .vcs-page .vcs-gallery-grid > div,
  .vcs-page .vcs-gallery-grid [data-lightbox-group],
  .vcs-page .vcs-gallery-grid img,
  .vcs-page .vcs-zoom,
  .vcs-page .vcs-cta .vcs-kb {
    transition: none!important;
    animation: none!important;
  }

  .vcs-page.vcs-pre .vcs-word > i,
  .vcs-page .vcs-gallery-grid > div.vcs-card-hidden {
    opacity: 1!important;
    transform: none!important;
    filter: none!important;
  }

  .vcs-page.vcs-pre .vcs-title-line,
  .vcs-page .vcs-cta.vcs-cta-hidden .vcs-kb {
    transform: none!important;
  }

  .vcs-page .vcs-cta .hv20::after {
    display: none;
  }
}