/* VERMEERSCH COMPANY — pages villes V3.
   Markup du gabarit ville Nemelec, finitions visuelles et mouvements repris de ses pages
   services claires. Les textes restent ceux de la base, sans ajout ni masquage. */

.vcm-page {
  --vcm-ease: cubic-bezier(.2,.8,.2,1);
  --vcm-spring: cubic-bezier(.34,1.56,.64,1);
  overflow: clip;
}

/* Hero photographique : même construction que Nemelec, photo propre à chaque ville. */
.vcm-page > section:nth-of-type(1) {
  min-height: clamp(410px,55vw,570px) !important;
  isolation: isolate;
  align-items: flex-end !important;
}

.vcm-page > section:nth-of-type(1) > div:first-child {
  opacity: 1 !important;
  background-image: var(--vcm-hero) !important;
  background-position: var(--vcm-hero-position, center) !important;
  transform: scale(1.07);
  will-change: transform;
  transition: transform 1.2s var(--vcm-ease);
}

.vcm-page > section:nth-of-type(1) > div:nth-child(2) {
  background: linear-gradient(90deg,rgba(20,18,19,.96) 0%,rgba(24,18,19,.79) 52%,rgba(20,18,19,.2) 100%) !important;
}

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

.vcm-page > section:nth-of-type(1) > div:last-child {
  z-index: 2;
  padding-bottom: 58px !important;
}

.vcm-page > section:nth-of-type(1) h1 {
  max-width: 900px;
  font-size: clamp(40px,6.2vw,78px) !important;
  line-height: .98 !important;
}

.vcm-page > section:nth-of-type(1) h1 .vcm-word,
.vcm-page > section:nth-of-type(1) h1 .vcm-word > i {
  display: inline-block;
}

.vcm-page > section:nth-of-type(1) h1 .vcm-word > i {
  font-style: normal;
  transition: opacity .7s var(--vcm-ease),transform .85s var(--vcm-ease),filter .7s ease;
  transition-delay: calc(var(--vcm-i,0) * 70ms + .1s);
}

.vcm-page.vcm-pre > section:nth-of-type(1) h1 .vcm-word > i {
  opacity: 0;
  transform: translateY(.55em);
  filter: blur(6px);
}

.vcm-title-line {
  display: block;
  width: 86px;
  height: 4px;
  margin-top: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg,var(--accent),var(--accent-sur-sombre));
  transform-origin: left center;
  transition: transform 1s var(--vcm-ease) .52s;
}

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

/* Corps éditorial : respirations Nemelec et modules visuels sans changer les textes. */
.vcm-page > section:nth-of-type(n+2):nth-of-type(-n+6) {
  padding: 84px 24px 92px !important;
}

.vcm-page > section:nth-of-type(2) {
  position: relative;
  background: radial-gradient(circle at 8% 18%,rgba(200,16,46,.07),transparent 27%),var(--fond) !important;
}

.vcm-page > section:nth-of-type(2)::before {
  content: '';
  position: absolute;
  top: 54px;
  left: max(24px,calc((100% - 1240px)/2 + 24px));
  width: 54px;
  height: 5px;
  border-radius: 5px;
  background: var(--accent);
}

.vcm-page > section:nth-of-type(2) > div,
.vcm-page > section:nth-of-type(4) > div {
  display: grid;
  grid-template-columns: minmax(280px,.88fr) minmax(0,1.12fr);
  gap: 22px clamp(42px,6vw,84px);
  align-items: start;
}

.vcm-page > section:nth-of-type(2) > div > div:first-child,
.vcm-page > section:nth-of-type(4) > div > div:first-child {
  grid-row: 1 / span 3;
  margin-bottom: 0 !important;
  position: sticky;
  top: 130px;
}

.vcm-page > section:nth-of-type(2) > div > p,
.vcm-page > section:nth-of-type(4) > div > p {
  font-size: 16px;
  line-height: 1.82;
  color: var(--texte) !important;
}

.vcm-page > section:nth-of-type(2) > div > p + p {
  position: relative;
  margin-top: 6px;
  padding: 24px 25px 24px 28px;
  border: 1px solid rgba(200,16,46,.2);
  border-left: 4px solid var(--accent);
  border-radius: 0 20px 20px 0;
  background: color-mix(in srgb,var(--accent) 5%,var(--carte));
  box-shadow: 0 18px 40px -34px rgba(96,9,24,.45);
}

.vcm-page > section:nth-of-type(2) a,
.vcm-page > section:nth-of-type(4) a:not(.hv04) {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Cartes services : bloc du modèle, avec galerie verticale sur mobile. */
.vcm-page > section:nth-of-type(3) {
  background: linear-gradient(180deg,rgba(200,16,46,.025),transparent 230px),var(--fond-2) !important;
}

.vcm-page > section:nth-of-type(3) .grille-services-accueil {
  gap: 24px;
}

.vcm-page > section:nth-of-type(3) .grille-services-accueil > div {
  perspective: 1000px;
}

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

.vcm-page > section:nth-of-type(3) .grille-services-accueil a::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 74px;
  height: 5px;
  border-radius: 0 0 6px 0;
  background: var(--accent);
}

.vcm-page > section:nth-of-type(3) .grille-services-accueil a:hover {
  border-color: rgba(200,16,46,.4) !important;
  box-shadow: 0 28px 58px -34px rgba(120,8,28,.48);
  transform: translateY(-8px);
}

.vcm-page > section:nth-of-type(3) .grille-services-accueil a > div:first-child {
  position: relative;
  background: #e9e5e5;
}

.vcm-page > section:nth-of-type(3) .grille-services-accueil a > div:first-child::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg,transparent,rgba(20,18,19,.27));
}

.vcm-page > section:nth-of-type(3) .grille-services-accueil img {
  transition: transform 1s var(--vcm-ease) !important;
}

.vcm-page > section:nth-of-type(3) .grille-services-accueil a:hover img {
  transform: scale(1.055);
}

.vcm-page > section:nth-of-type(3) .grille-services-accueil h3 {
  font-size: clamp(21px,2vw,26px) !important;
}

/* Processus : l'encart existant devient la carte d'action du modèle Nemelec. */
.vcm-page > section:nth-of-type(4) {
  background: var(--fond) !important;
}

.vcm-page > section:nth-of-type(4) > div > div:last-child {
  margin: 10px 0 0 !important;
  padding: 28px !important;
  text-align: left !important;
  border: 1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  border-radius: 22px !important;
  background: color-mix(in srgb,var(--accent) 8%,var(--fond)) !important;
}

.vcm-page > section:nth-of-type(4) .hv04 {
  box-shadow: 0 10px 24px -14px rgba(120,8,28,.7);
}

/* Zones desservies : puces lisibles et tactiles. */
.vcm-page > section:nth-of-type(5) {
  position: relative;
  background: var(--fond-2) !important;
}

.vcm-page > section:nth-of-type(5) p {
  max-width: 850px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--texte) !important;
}

.vcm-page > section:nth-of-type(5) .hv12 {
  min-height: 42px;
  padding: 10px 17px !important;
  background: var(--carte);
  border-color: rgba(22,20,21,.12) !important;
  box-shadow: 0 8px 22px -20px rgba(38,21,24,.55);
  transition: transform .3s var(--vcm-spring),border-color .25s,box-shadow .25s;
}

.vcm-page > section:nth-of-type(5) .hv12:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -18px rgba(120,8,28,.45);
}

/* FAQ : carte compacte du modèle clair. */
.vcm-page > section:nth-of-type(6) {
  background: radial-gradient(circle at 88% 18%,rgba(200,16,46,.055),transparent 26%),var(--fond) !important;
}

.vcm-page > section:nth-of-type(6) > div {
  max-width: 980px !important;
}

.vcm-page > section:nth-of-type(6) [data-faq-item] {
  overflow: hidden;
  box-shadow: 0 14px 34px -30px rgba(38,21,24,.52);
}

.vcm-page > section:nth-of-type(6) [data-faq-toggle] {
  min-height: 78px;
}

/* Bandeau d'appel : photo de chantier réelle, construction du CTA Nemelec. */
.vcm-page > section:nth-of-type(7) {
  padding-bottom: 32px !important;
}

.vcm-page > section:nth-of-type(7) > div {
  isolation: isolate;
  background: #201b1c !important;
  box-shadow: 0 26px 70px -42px rgba(35,17,20,.62);
}

.vcm-page > section:nth-of-type(7) > div::before,
.vcm-page > section:nth-of-type(7) > div::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vcm-page > section:nth-of-type(7) > div::before {
  z-index: -2;
  background: var(--vcm-cta, url(/assets/img/about/cta.webp)) center 48% / cover no-repeat;
  transform: scale(1.02);
  transition: transform 2.4s var(--vcm-ease);
}

.vcm-page > section:nth-of-type(7) > div::after {
  z-index: -1;
  background: linear-gradient(90deg,rgba(var(--overlay-rgb),.12) 0%,rgba(var(--overlay-rgb),.86) 46%,rgb(var(--overlay-rgb)) 74%);
}

.vcm-page > section:nth-of-type(7) > div.vcm-cta-hidden::before {
  transform: scale(1.11);
}

.vcm-page > section:nth-of-type(7) > div > div {
  z-index: 1;
}

.vcm-page > section:nth-of-type(7) .hv20 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.68) !important;
  color: #fff !important;
  transition: transform .5s var(--vcm-spring),background .2s,box-shadow .25s !important;
}

.vcm-page > section:nth-of-type(7) .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,.4),transparent);
  transform: translateX(-150%) skewX(-20deg);
  transition: transform .75s var(--vcm-ease);
}

.vcm-page > section:nth-of-type(7) .hv20:hover::after {
  transform: translateX(280%) skewX(-20deg);
}

.vcm-page > section:nth-of-type(7) .hv20:hover {
  background: var(--accent-fonce) !important;
  border-color: var(--accent-fonce) !important;
  transform: translateY(-3px) scale(1.035);
}

@media (max-width: 980px) {
  .vcm-page > section:nth-of-type(2) > div,
  .vcm-page > section:nth-of-type(4) > div {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .vcm-page > section:nth-of-type(2) > div > div:first-child,
  .vcm-page > section:nth-of-type(4) > div > div:first-child {
    grid-row: auto;
    position: static;
    max-width: 760px;
    margin-bottom: 14px !important;
  }

  .vcm-page > section:nth-of-type(3) .grille-services-accueil {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  .vcm-page > section:nth-of-type(3) .grille-services-accueil > div:last-child {
    grid-column: 1 / -1;
    max-width: 580px;
    width: 100%;
    justify-self: center;
  }
}

@media (max-width: 700px) {
  .vcm-page > section:nth-of-type(1) {
    min-height: 420px !important;
  }

  .vcm-page > section:nth-of-type(1) > div:first-child {
    background-position: var(--vcm-hero-position-mobile,var(--vcm-hero-position,center)) !important;
  }

  .vcm-page > section:nth-of-type(1) > div:nth-child(2) {
    background: linear-gradient(90deg,rgba(20,18,19,.94),rgba(20,18,19,.58)) !important;
  }

  .vcm-page > section:nth-of-type(1) > div:last-child {
    padding: 76px 18px 38px !important;
  }

  .vcm-page > section:nth-of-type(1) h1 {
    font-size: clamp(36px,12vw,54px) !important;
  }

  .vcm-page > section:nth-of-type(n+2):nth-of-type(-n+6) {
    padding: 54px 18px 60px !important;
  }

  .vcm-page > section:nth-of-type(2)::before {
    top: 32px;
    left: 18px;
  }

  .vcm-page > section:nth-of-type(2) > div > p,
  .vcm-page > section:nth-of-type(4) > div > p,
  .vcm-page > section:nth-of-type(5) p {
    font-size: 15.5px;
    line-height: 1.75;
  }

  .vcm-page > section:nth-of-type(3) .grille-services-accueil {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    overflow: visible !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  .vcm-page > section:nth-of-type(3) .grille-services-accueil > div {
    grid-column: auto !important;
    max-width: none !important;
    width: auto !important;
  }

  .vcm-page > section:nth-of-type(4) > div > div:last-child {
    padding: 22px 18px !important;
  }

  .vcm-page > section:nth-of-type(6) [data-faq-toggle] {
    padding: 18px !important;
    font-size: 15px !important;
  }

  .vcm-page > section:nth-of-type(6) [data-faq-a-wrap] > div > div {
    padding: 0 18px 20px !important;
  }

  .vcm-page > section:nth-of-type(7) {
    padding: 0 14px 22px !important;
  }

  .vcm-page > section:nth-of-type(7) > div {
    display: block !important;
    min-height: 0 !important;
    border-radius: 24px !important;
  }

  .vcm-page > section:nth-of-type(7) > div::after {
    background: linear-gradient(180deg,rgba(var(--overlay-rgb),.05) 0,rgba(var(--overlay-rgb),.32) 27%,rgba(var(--overlay-rgb),.95) 54%,rgb(var(--overlay-rgb)) 70%);
  }

  .vcm-page > section:nth-of-type(7) > div > div {
    margin-left: 0 !important;
    max-width: none !important;
    padding: 185px 22px 30px !important;
  }
}

@media (hover: none) {
  .vcm-page > section:nth-of-type(3) .grille-services-accueil a:hover {
    transform: none !important;
  }

  .vcm-page > section:nth-of-type(3) .grille-services-accueil a:hover img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vcm-page > section:nth-of-type(1) > div:first-child,
  .vcm-page > section:nth-of-type(1) h1 .vcm-word > i,
  .vcm-title-line,
  .vcm-page > section:nth-of-type(3) .grille-services-accueil a,
  .vcm-page > section:nth-of-type(3) .grille-services-accueil img,
  .vcm-page > section:nth-of-type(7) > div::before {
    transition: none !important;
    animation: none !important;
  }

  .vcm-page.vcm-pre > section:nth-of-type(1) h1 .vcm-word > i,
  .vcm-page.vcm-pre .vcm-title-line,
  .vcm-page > section:nth-of-type(7) > div.vcm-cta-hidden::before {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .vcm-page > section:nth-of-type(7) .hv20::after {
    display: none;
  }
}