/* Vermeersch Company — blog V3.
   Blocs repris du blog Nemelec : bandeaux photo, carte « Nos chantiers »
   et figures d'article. */

.vcb-hero{isolation:isolate}
.vcb-hero-media{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.46;transform:scale(1.015)}
.vcb-index-hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(var(--overlay-rgb),.96) 0%,rgba(var(--overlay-rgb),.8) 56%,rgba(var(--overlay-rgb),.5) 100%)}
.vcb-hero>div:not(.vcb-hero-media){z-index:1}
.vcb-hero [style*="color:var(--accent-texte)"]{color:#ffb3bf!important}
.vcb-index-hero .vcb-hero-media{background-image:url('/assets/img/blog/transport-materiaux-vrac-condroz-1.webp');background-position:center 56%}

.vcb-blog-grid.blog-grid{gap:24px}
.vcb-blog-grid .blog-card{border-radius:24px!important;box-shadow:0 14px 40px rgba(28,32,38,.08)}
.vcb-blog-grid .blog-card:hover{border-color:color-mix(in srgb,var(--accent) 36%,var(--bord));box-shadow:0 20px 46px rgba(28,32,38,.14)}
.vcb-blog-grid .blog-card>div:first-child:has(img){position:relative}
.vcb-blog-grid .blog-card>div:first-child:has(img)::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(var(--overlay-rgb),.25))}
.vcb-blog-grid .blog-card img{transition:transform .45s ease}
.vcb-blog-grid .blog-card:hover img{transform:scale(1.04)}

.prose .vcb-realisations{margin:40px 0;padding:36px 28px;text-align:center;background:color-mix(in srgb,var(--accent) 10%,var(--fond));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:24px}
.prose .vcb-realisations .vcb-eyebrow{display:block;margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-texte)}
.prose .vcb-realisations h3{margin:0 0 8px;font-size:clamp(22px,2.6vw,28px);font-weight:700;line-height:1.15;color:var(--titre)}
.prose .vcb-realisations .vcb-sub{margin:0 auto 20px;max-width:480px;font-size:15px;line-height:1.6;color:var(--texte-doux)}
.prose .vcb-realisations .vcb-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0}
.prose .vcb-realisations a.vcb-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:var(--accent);color:var(--sur-accent);font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;border:0;border-radius:40px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent);transition:background .2s,transform .2s,box-shadow .2s}
.prose .vcb-realisations a.vcb-btn svg{width:15px;height:15px;flex:none;transition:transform .18s ease}
.prose .vcb-realisations a.vcb-btn:hover{background:var(--accent-fonce);color:var(--sur-accent);transform:translateY(-2px);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent)}
.prose .vcb-realisations a.vcb-btn:hover svg{transform:translateX(4px)}
.prose .vcb-realisations a.vcb-btn:focus-visible{outline:3px solid var(--accent-fonce);outline-offset:3px}

.prose .vcb-article-figure{margin:0 0 28px}
.prose .vcb-article-figure img{display:block;width:100%;max-height:600px;object-fit:cover;height:auto;border-radius:20px;cursor:zoom-in}
.prose .vcb-article-figure figcaption{margin-top:8px;font-size:13px;line-height:1.5;color:var(--texte-doux)}

@media (max-width:520px){
  .vcb-hero-media{opacity:.38}
  .vcb-blog-grid.blog-grid{grid-template-columns:1fr!important;gap:18px}
  .prose .vcb-realisations{margin:32px 0;padding:28px 18px;border-radius:20px}
  .prose .vcb-realisations a.vcb-btn{width:100%;justify-content:center;padding:12px 18px}
  .prose .vcb-article-figure img{max-height:none}
}

@media (prefers-reduced-motion:reduce){
  .vcb-hero-media{transform:none}
  .vcb-blog-grid .blog-card img,.prose .vcb-realisations a.vcb-btn,.prose .vcb-realisations a.vcb-btn svg{transition:none}
}