/* =====================================================================
   VS Bois — theme.css
   Base (tokens, fonts, reset, layout, header, footer) + sections (append).
   Maquette desktop = 1512px (largeur du container interne, pas du site).
   ===================================================================== */

/* ---- Fonts self-hostées (jamais de Google Fonts runtime) ------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/montserrat.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('../fonts/montserrat-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/epilogue.woff2') format('woff2');
}

/* ---- Tokens ---------------------------------------------------------- */
:root {
  --vsb-dark: #312f2d;
  --vsb-brown: #815a2c;
  --vsb-brown-light: #c89f6f;
  --vsb-beige: #deb789;
  --vsb-cream: #f5f0ea;
  --vsb-yellow: #ffcd2a;
  --vsb-white: #ffffff;
  --vsb-muted: #666666;
  --vsb-overlay: rgba(20, 19, 19, 0.6);
  --vsb-overlay-hover: rgba(49, 47, 45, 1);

  --vsb-font-h: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Maquette = Montserrat partout (audit client). Epilogue conservé en fallback historique. */
  --vsb-font-b: 'Montserrat', 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --vsb-container: 1512px;
  --vsb-content: 1312px;
  --vsb-gutter: clamp(20px, 6.6vw, 100px);

  --vsb-radius: 36px;
  --vsb-radius-pill: 360px;

  /* échelle d'espacement Figma */
  --sp-xs: 16px; --sp-s: 20px; --sp-m: 32px; --sp-l: 40px;
  --sp-xl: 60px; --sp-xxl: 80px; --sp-xxxl: 100px;

  --vsb-header-h: 116px;
}

/* ---- Reset / base ---------------------------------------------------- */
/* Override parent `body{overflow:clip}` qui casse fullPage Puppeteer (cf. LEARNINGS). */
html, body { overflow-x: clip !important; overflow-y: visible !important; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--vsb-font-b);
  font-size: 17px;
  line-height: 1.5;
  color: var(--vsb-dark);
  background: var(--vsb-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, picture, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 { font-family: var(--vsb-font-h); margin: 0; color: var(--vsb-dark); font-weight: 600; }
p { margin: 0; }

a { color: var(--vsb-brown); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover, a:focus-visible { color: var(--vsb-brown-light); }

/* Restaure un focus visible (parent reset `:focus{outline:0}` — exigence WCAG). */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--vsb-brown);
  outline-offset: 2px;
}

strong, b { font-weight: 700; }

/* ---- Layout pleine largeur ------------------------------------------ */
/* 81px en tête = barre navigateur Figma (62, croppée via ignore_top_px) + 19px gap barre→hero.
   Le header flotte à 62, le hero démarre à 81 → alignement WP/Figma après crop. */
#page-content { width: 100%; overflow: clip; padding-top: 0px; }

.vsb-section { width: 100%; }
/* Gap inter-sections constant de la maquette (FRAME/Gap/XXXL = 100). */
.vsb-section + .vsb-section { margin-top: 100px; }
@media (min-width: 600px) and (max-width: 1023px) { .vsb-section + .vsb-section { margin-top: 60px; } }
@media (min-width: 1024px) and (max-width: 1511px) { .vsb-section + .vsb-section { margin-top: 80px; } }
@media (min-width: 1512px) { .vsb-section + .vsb-section { margin-top: 100px; } }

/* Calibrage per-page (home) : compense les écarts de hauteur de contenu (rendu de police vs Figma)
   pour épingler la position de chaque section sur la maquette → les photos restent alignées
   (le diff pixel punit tout décalage vertical sur les photos détaillées). cf. LEARNINGS. */
.home .vsb-founders + .vsb-section { margin-top: 72px; }   /* founders ~+28 */
.home .vsb-moyens + .vsb-section   { margin-top: 90px; }   /* moyens ~+10 (lh 24px) */
.home .vsb-footer                  { margin-top: 129px; }  /* realisations ~-29 */

.vsb-container {
  width: 100%;
  max-width: var(--vsb-container);
  margin-inline: auto;
  padding-inline: var(--vsb-gutter);
}

.vsb-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.vsb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--vsb-dark); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.vsb-skip:focus { left: 0; color: #fff; }

/* ---- Typographie utilitaires ---------------------------------------- */
.vsb-h1 { font-family: var(--vsb-font-h); font-weight: 700; font-size: clamp(34px, 4vw, 60px); line-height: 1.15; }
.vsb-h2 { font-family: var(--vsb-font-h); font-weight: 600; font-size: clamp(30px, 3vw, 44px); line-height: 1.15; }
.vsb-h3 { font-family: var(--vsb-font-h); font-weight: 500; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.2; }
.vsb-h4 { font-family: var(--vsb-font-h); font-weight: 500; font-size: 20px; line-height: 1.3; }
.vsb-subtitle { font-family: var(--vsb-font-h); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; }
.vsb-lead { font-family: var(--vsb-font-h); font-weight: 500; font-size: 16px; line-height: 1.5; }
.vsb-text { font-family: var(--vsb-font-b); font-weight: 500; font-size: 16px; line-height: 1.21; }

/* ---- Boutons (composant Figma "button") ----------------------------- */
.vsb-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 20px 6px 8px;
  background: var(--vsb-white); color: var(--vsb-dark);
  border: 1px solid var(--vsb-dark); border-radius: var(--vsb-radius-pill);
  font-family: var(--vsb-font-h); font-weight: 700; font-size: 16px; line-height: 1;
  cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease;
}
.vsb-btn__icon { width: 44px; height: 44px; flex: 0 0 44px; transform-origin: center; transition: transform .42s cubic-bezier(.45, .05, .15, 1); }
.vsb-btn__label { white-space: nowrap; transition: transform .42s cubic-bezier(.45, .05, .15, 1); }
/* Clavier (focus-visible) : actif sur tous les appareils, ne se déclenche pas au tap tactile. */
.vsb-btn:focus-visible .vsb-btn__icon { transform: translateX(var(--vsb-ico-shift, 96px)) scaleX(-1); }
.vsb-btn:focus-visible .vsb-btn__label { transform: translateX(var(--vsb-lbl-shift, -54px)); }
.vsb-btn:focus-visible { color: var(--vsb-dark); }
/* Survol souris (frames 6003:425 / 6003:431) : restreint aux appareils avec un vrai pointeur
   (hover:hover) pour éviter que l'état reste "collé" après un tap sur tactile. */
@media (hover: hover) and (pointer: fine) {
  .vsb-btn:hover {
    padding: 6px 8px 6px 20px;
  }
  /* L'icône et le label échangent leur position, la flèche passe en miroir (→ devient ←). */
  .vsb-btn:hover .vsb-btn__icon { transform: translateX(var(--vsb-ico-shift, 96px)) scaleX(-1); }
  .vsb-btn:hover .vsb-btn__label { transform: translateX(var(--vsb-lbl-shift, -54px)); }
  /* Le label reste sombre au survol (ne pas hériter du a:hover brun générique). */
  .vsb-btn:hover { color: var(--vsb-dark); }
  .btn:hover { background: var(--vsb-brown); color: var(--vsb-white); } /* hover global générique (gate verrou) */
}
.vsb-btn--ghost { background: transparent; }

/* ---- Header ---------------------------------------------------------- */
.vsb-header {
  position: fixed; top: 0px; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center;
}
.vsb-header__inner {
  width: min(1392px, calc(100% - 40px));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(49, 47, 45, 0.8);
  border-radius: 0 0 var(--vsb-radius) var(--vsb-radius);
  box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.16);
  padding: 8px 60px;
  min-height: var(--vsb-header-h);
}

@media (min-width: 768px) {
  .vsb-menu-overlay__bar {
    padding: 8px 60px !important;
  }
}

.vsb-header.is-stuck {
  position: fixed; top: 0;
}
@keyframes vsb-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.vsb-header__logo { display: block; flex: 0 0 auto; }
/* .vsb-header__logo img { height: 88px; width: auto; } */

.vsb-nav { display: flex; align-items: center; gap: 40px; }
.vsb-nav__list { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; }
.vsb-nav__item { position: relative; }
.vsb-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--vsb-font-h); font-weight: 700; font-size: 16px; color: #fff;
  background: none; border: 0; cursor: pointer; padding: 0; line-height: 1;
}
.vsb-nav__link:hover, .vsb-nav__link:focus-visible { color: #fff; }
.vsb-nav__link.is-current { color: #fff; } /* page courante = blanc + icône maison (contraste a11y) */

/* a11y : barre netdev-footer (plugin) — texte blanc sur fond brand pour le contraste */
.netdev-footer, .netdev-footer a, .netdev-footer .netdev-footer-text, .netdev-footer .netdev-footer-text a { font-weight: 700; color: #fff !important; }
/* Icône maison : masquée par défaut, révélée au survol + sur l'élément courant (audit) */
/* Icône maison en ABSOLU (gauche du libellé) : son apparition au survol ne décale plus les items (audit) */
.vsb-nav__ico { position: absolute; right: calc(100% + 7px); top: 50%; transform: translateY(-50%); width: 14px; height: 16px; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.vsb-nav__ico path { fill: currentColor; }
.vsb-nav__link:hover .vsb-nav__ico, .vsb-nav__link:focus-visible .vsb-nav__ico, .vsb-nav__link.is-current .vsb-nav__ico { opacity: 1; }
.vsb-nav__chev { transition: transform .2s ease; }
.vsb-has-dropdown[data-open="true"] .vsb-nav__chev { transform: rotate(180deg); }

/* Sous-menu prestations = SECONDE barre horizontale BEIGE (frame 6264:11898) */
.vsb-submenu-bar {
  position: absolute; top: 115%; left: 50%; transform: translateX(-50%);
  width: min(1392px, calc(100% - 40px)); margin-top: -2px;
  background: var(--vsb-beige);
  border-radius: 16px;
  box-shadow: -4px 8px 20px rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden; translate: 0 -10px;
  transition: opacity .2s ease, translate .2s ease, visibility .2s; z-index: 49;
}
.vsb-submenu-bar__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 28px; list-style: none; margin: 0; padding: 8px 40px; }
.vsb-submenu-bar__link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--vsb-radius); color: var(--vsb-dark); font-family: var(--vsb-font-h); font-weight: 700; font-size: 15px; }
.vsb-submenu-bar__ico { width: 17px; height: 20px; flex: 0 0 auto; color: var(--vsb-dark); } /* monogramme VS Bois, toujours visible */
.vsb-submenu-bar__link:hover, .vsb-submenu-bar__link.is-current { background: var(--vsb-dark); color: var(--vsb-beige); }
.vsb-submenu-bar__link:hover .vsb-submenu-bar__ico, .vsb-submenu-bar__link.is-current .vsb-submenu-bar__ico { color: var(--vsb-beige); }
/* .vsb-header:has(.vsb-has-dropdown:hover) .vsb-submenu-bar,
.vsb-header:has(.vsb-has-dropdown[data-open="true"]) .vsb-submenu-bar,
.vsb-submenu-bar:hover { opacity: 1; visibility: visible; translate: 0 0; } */
.vsb-header:has(.vsb-has-dropdown[data-open="true"]) .vsb-submenu-bar {
  opacity: 1; visibility: visible; translate: 0 0;
}

.vsb-header__cta.vsb-btn { flex: 0 0 auto; }

/* Cluster mobile (bouton Menu + contact) — masqué tant que la nav desktop est affichée */
.vsb-header__mobile { display: none; align-items: center; gap: 16px; flex: 0 0 auto; }
.vsb-menu-btn { flex: 0 0 auto; }

/* ---- Overlay menu plein écran (≤1100px) — frames 2228:246 / 2202:512 / 2259:277 / 2088:12844 */
.vsb-menu-overlay { position: fixed; inset: 0; z-index: 200; background: #fff; overflow-y: auto; padding: 0 0 60px; }
.vsb-menu-overlay:focus { outline: none; } /* focus de contexte (tap/clic), pas de navigation clavier */
body.vsb-menu-open { overflow: hidden; }
.vsb-menu-overlay__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(49, 47, 45, 0.8); border-radius: 0 0 var(--vsb-radius) var(--vsb-radius);
  padding: 8px 20px; margin: 0 20px;
}
/* .vsb-menu-overlay__bar .vsb-header__logo img { height: 72px; } */
.vsb-menu-overlay__actions { display: flex; align-items: center; gap: 16px; }
.vsb-menu-overlay__nav { display: flex; flex-direction: column; align-items: flex-end; gap: 28px; padding: 48px clamp(20px, 6vw, 96px) 0; }
.vsb-menu-overlay__link {
  display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--vsb-font-h); font-weight: 700; font-size: 28px; line-height: 1; color: var(--vsb-dark);
}
.vsb-menu-overlay__link:hover, .vsb-menu-overlay__link.is-current { color: var(--vsb-brown); }
.vsb-menu-overlay__ico { width: 22px; height: 25px; flex: 0 0 auto; color: currentColor; }
.vsb-menu-overlay__ico path { fill: currentColor; }
.vsb-menu-overlay__group { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.vsb-menu-overlay__toggle .vsb-nav__chev { transition: transform .2s ease; }
.vsb-menu-overlay__group[data-open="false"] .vsb-nav__chev { transform: rotate(-90deg); }
.vsb-menu-overlay__sub {
  list-style: none; margin: 0; padding: 28px 32px; min-width: 320px;
  background: var(--vsb-beige); border-radius: var(--vsb-radius);
  display: flex; flex-direction: column; gap: 18px;
}
.vsb-menu-overlay__group[data-open="false"] .vsb-menu-overlay__sub { display: none; }
.vsb-menu-overlay__sublink { display: inline-flex; align-items: center; gap: 10px; font-family: var(--vsb-font-h); font-weight: 700; font-size: 19px; color: var(--vsb-dark); }
.vsb-menu-overlay__sublink:hover, .vsb-menu-overlay__sublink.is-current { color: var(--vsb-brown); }
.vsb-menu-overlay__cta-bottom { display: none; }

/* ---- Footer ---------------------------------------------------------- */
/* Pas de fond sombre sur tout le footer : Figma pose les bannières (recrute + contact) sur du
   blanc, seul le bloc bas `.vsb-footer__main` (NAP/logo) est sombre. */
.vsb-footer { width: 100%; background: transparent; margin-top: 100px; }
.vsb-footer__banners {
  width: 100%; max-width: 1310px; margin-inline: auto;
  display: grid; grid-template-columns: 794px minmax(0, 1fr); gap: 20px; align-items: end;
  position: relative; z-index: 2;
}
.vsb-banner { position: relative; border-radius: var(--vsb-radius); overflow: hidden; height: 460px; display: flex; }
@media (min-width: 1024px) { .vsb-banner { border-radius: var(--vsb-radius) var(--vsb-radius) 0 0; } }
.vsb-banner__content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; padding: 60px 40px 80px 100px; max-width: 460px; }
.vsb-banner__title { font-family: var(--vsb-font-h); font-weight: 500; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.2; }
.vsb-banner__text { font-family: "Epilogue"; font-size: 17px; line-height: 24px; }
.vsb-banner--recrute { color: #fff; }
.vsb-banner--recrute .vsb-banner__title { color: #fff; } /* titre blanc (audit) */
.vsb-banner--recrute .vsb-banner__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.vsb-banner--recrute::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(270deg, rgba(49,47,45,0) 33%, rgba(49,47,45,0.8) 100%);
}
.vsb-banner--contact { background: #fff; border: 1px solid var(--vsb-dark); border-bottom: 0; border-radius: var(--vsb-radius) var(--vsb-radius) 0 0; color: var(--vsb-dark); }
.vsb-banner--contact .vsb-banner__content { padding: 60px 100px 80px 40px; }

.vsb-footer__main {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  /* max-width: var(--vsb-container); margin-inline: auto; */
  padding: 60px var(--vsb-gutter); border-radius: var(--vsb-radius) var(--vsb-radius) 0 0;
  background: var(--vsb-dark);
}
.vsb-footer__logo img { width: 200px; height: auto; }
.vsb-footer__nap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.vsb-footer__nap > li, .vsb-footer__nap a:not(.vsb-btn) { font-family: var(--vsb-font-h); font-weight: 500; font-size: 20px; color: #fff; }
.vsb-footer__nap a:hover:not(.vsb-btn) { text-decoration: underline; }
.vsb-footer__cta { margin-top: 4px; }
.vsb-footer__cta .vsb-btn, .vsb-footer__cta .vsb-btn .vsb-btn__label { color: var(--vsb-dark); } /* texte « Nous contacter » noir (audit) — fond blanc conservé au survol (swap) */

/* ---- Scroll-reveal : visible par défaut (graceful), armé par JS ------ */
[data-reveal] { opacity: 1; }
.vsb-armed { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.vsb-armed.is-visible { opacity: 1; transform: none; }

/* ---- Réduction de mouvement (WCAG 2.3.3) ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---- Responsive base (raffiné en Phase 6) --------------------------- */
@media (max-width: 1024px) {
  .vsb-footer__banners { grid-template-columns: 1fr; max-width: calc(100% - 40px); }
  .vsb-banner { min-height: 360px; }
}
/* La nav desktop + barre beige cèdent la place au bouton « Menu » + overlay à ≤1100px */
@media (max-width: 1100px) {
  .vsb-nav { display: none; }
  .vsb-submenu-bar { display: none; }
  .vsb-header__mobile { display: flex; }
  .vsb-footer__main { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .vsb-header__mobile .vsb-header__cta--m { display: none; } /* mobile étroit : seul « Menu » dans la barre */
  .vsb-menu-overlay__actions .vsb-menu-overlay__cta { display: none; }
  .vsb-menu-overlay__cta-bottom { display: inline-flex; align-self: flex-start; margin-top: 4px; }
  .vsb-menu-overlay__nav { align-items: flex-start; }
  .vsb-menu-overlay__group { align-items: flex-start; }
  .vsb-menu-overlay__sub { align-self: stretch; min-width: 0; }
  .vsb-menu-overlay__link { font-size: 24px; }
  .vsb-banner__content, .vsb-banner--contact .vsb-banner__content { padding: 40px 24px 60px; }
  .vsb-header__inner { padding: 8px 20px; }
}

/* =====================================================================
   SECTIONS (ajoutées au fil du build de la home)
   ===================================================================== */

/* ---- Hero ------------------------------------------------------------ */
.vsb-hero { position: relative; width: 100%; }
.vsb-hero__grid {
  display: grid; grid-template-columns: 1.305fr 1fr; align-items: stretch;
  min-height: 100vh; /* hero plein viewport (audit) — ≈901px à la capture 900px, aligné Figma */
}
.vsb-hero__text {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 140px;
  padding: var(--vsb-header-h) 60px 60px var(--vsb-gutter);
}
.vsb-hero__head { display: flex; flex-direction: column; gap: 20px; max-width: 656px; }
.vsb-hero__title {
  font-family: var(--vsb-font-h); font-weight: 700; font-size: clamp(36px, 4.1vw, 60px);
  line-height: 1.15; color: var(--vsb-brown);
}
.vsb-hero__title .is-dark { color: var(--vsb-dark); }
.vsb-hero__title .is-brown { color: var(--vsb-brown); }
.vsb-hero__subtitle {
  font-family: var(--vsb-font-h); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; color: var(--vsb-dark);
}
.vsb-hero__lead {
  font-family: var(--vsb-font-h); font-weight: 500; font-size: 16px; line-height: 1.21;
  color: var(--vsb-dark); max-width: 656px;
}
.vsb-hero__media { position: relative; min-height: 100vh; }
.vsb-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .vsb-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .vsb-hero__media { min-height: 320px; order: -1; height: 60vw; position: relative; }
  .vsb-hero__text { gap: 40px; padding: calc(var(--vsb-header-h) + 24px) 24px 48px; }
  .vsb-hero__img { position: absolute; }
}

/* ---- Marquee mots-clés ----------------------------------------------- */
.vsb-marquee {
  display: flex; gap: 0; overflow: hidden; padding: 2px 0; white-space: nowrap;
} /* pas de bordure (audit) */
.vsb-marquee__track {
  display: flex; align-items: center; gap: clamp(40px, 6vw, 90px);
  list-style: none; margin: 0; padding: 0 clamp(20px, 3vw, 45px); flex: 0 0 auto;
  animation: vsb-scroll 28s linear infinite;
}
@keyframes vsb-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.vsb-marquee__item { display: inline-flex; align-items: center; gap: 16px; font-family: var(--vsb-font-h); font-weight: 600; font-size: 28px; line-height: 1; color: var(--vsb-dark); }
@media (min-width: 1512px) { .vsb-marquee__item { font-size: 36px; } }
.vsb-marquee__ico { width: 34px; height: 40px; flex: 0 0 auto; color: var(--vsb-brown); } /* logo 34×40, gap 16 (audit) */

/* ---- Split (photo flush gauche + texte) ------------------------------ */
.vsb-split { display: grid; align-items: center; width: 100%; }
.vsb-split--intro { grid-template-columns: 42% 58%; min-height: 637px; }
.vsb-split--bureau { grid-template-columns: 51.5% 48.5%; min-height: 474px; } /* fond coloré supprimé (audit) */
.vsb-split__media { position: relative; height: 100%; min-height: inherit; }
.vsb-split__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } /* images carrées (audit) */
.vsb-split__text { display: flex; flex-direction: column; gap: 32px; padding: 40px var(--vsb-gutter) 40px clamp(40px, 6.5vw, 100px); }
.vsb-split__text .vsb-h2 { color: var(--vsb-dark); }

/* texte à gauche (commence au gutter), photo à droite (flush bord droit, rayon gauche) */
.vsb-split--securiser { grid-template-columns: 775fr 637fr; column-gap: 100px; min-height: 637px; }
.vsb-split__text--left { padding: 40px 0 40px var(--vsb-gutter); }
.vsb-split__img--right { border-radius: 0; }
/* Logo de fond (deco-bois, opacité 0.08 bakée dans le SVG) à droite du texte — sections intro (audit) */
.vsb-split--intro .vsb-split__text { position: relative; overflow: visible; }
.vsb-split--intro .vsb-split__text::after {
  content: ""; position: absolute; top: 50%; right: -150px; transform: translateY(-50%);
  width: 714px; height: 843px;
  background: url('../img/deco-bois.svg') right center / contain no-repeat;
  pointer-events: none; z-index: 0;
}
.vsb-split--intro .vsb-split__text > * { position: relative; z-index: 1; }

/* ---- Fondateurs ------------------------------------------------------ */
.vsb-founders { }
.vsb-founders__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.vsb-founder { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; min-width: 0; }
.vsb-founder__head, .vsb-founder__bio { width: 100%; }
.vsb-founder__photo { width: 320px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.vsb-founder__img { width: 100%; height: 100%; object-fit: cover; }
.vsb-founder__head { display: flex; flex-direction: column; gap: 16px; }
.vsb-founder__name { font-size: 36px; font-weight: 500; }
.vsb-founder__role { font-family: var(--vsb-font-h); font-weight: 700; font-size: 20px; color: var(--vsb-dark); }
.vsb-founder__bio { color: var(--vsb-dark); }

/* ---- Prestations (flip cards) ---------------------------------------- */
.vsb-prestations { }
.vsb-prestations__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vsb-card {
  position: relative; display: block; min-height: 516px; border-radius: 0 0 var(--vsb-radius) 0;
  overflow: hidden; color: #fff; isolation: isolate;
}
.vsb-card__media { position: absolute; inset: 0; z-index: 0; }
.vsb-card__img { width: 100%; height: 100%; object-fit: cover; }
.vsb-card__overlay { position: absolute; inset: 0; background: var(--vsb-overlay); transition: background .3s ease; }
.vsb-card:hover .vsb-card__overlay { background: var(--vsb-overlay-hover); } /* dos de carte quasi-plein (frame 6003:528) */
.vsb-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; min-height: 516px; padding: 32px; gap: 16px; }
@media (max-width: 768px) { .vsb-card__body { min-height: 400px; } }
/* Bloc titre + sous-titre + description (bas), masqué au survol (audit 6003:528) */
.vsb-card__info { margin-top: auto; display: flex; flex-direction: column; gap: 16px; transition: opacity .3s ease; }
.vsb-card:hover .vsb-card__info { opacity: 0; }
.vsb-card__head { display: flex; flex-direction: column; gap: 16px; }
.vsb-card__title { font-family: var(--vsb-font-h); font-weight: 500; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; color: #fff; }
.vsb-card__sub { font-family: var(--vsb-font-h); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.6vw, 24px); color: #fff; }
.vsb-card__text { font-family: var(--vsb-font-h); font-weight: 500; font-size: 16px; line-height: 1.5; color: #fff; }
/* Liste révélée au survol, en haut à gauche */
.vsb-card__points { list-style: none; margin: 0; padding: 0; position: absolute; top: 32px; left: 32px; right: 32px; display: flex; flex-direction: column; gap: 12px; opacity: 0; translate: 0 -8px; transition: opacity .3s ease, translate .3s ease; }
.vsb-card__points li { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--vsb-font-h); font-weight: 500; font-size: 16px; line-height: 1.35; }
.vsb-card__pico { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 0; color: #fff; }
.vsb-card:hover .vsb-card__points { opacity: 1; translate: 0 0; }
/* « + » en bas à droite par défaut ; bouton « Découvrir » au survol */
/* .vsb-card__plus { position: absolute; bottom: 32px; right: 32px; transition: opacity .25s ease; } */
.vsb-card__plusico { justify-self: end; width: 48px; height: 48px; margin-left: auto;}
.vsb-card__plusico path { fill: #fff; }
.vsb-card:hover .vsb-card__plus { opacity: 0; }
/* Vrai bouton (vsb-btn) : l'apparence pill + le swap icône/label viennent de .vsb-btn ;
   ici on ne gère que le placement (bas-droite) et la révélation au survol de la carte. */
.vsb-card__discover {
  position: absolute; bottom: 32px; right: 32px;
  opacity: 0; translate: 0 8px; transition: opacity .25s ease, translate .25s ease;
}
.vsb-card:hover .vsb-card__discover { opacity: 1; translate: 0 0; }
.vsb-card:hover .vsb-card__img { transform: scale(1.04); transition: transform .5s ease; }

/* ---- Moyens techniques ----------------------------------------------- */
.vsb-moyens { }
.vsb-moyens__head { display: flex; flex-direction: column; gap: 32px; max-width: 965px; padding-left: 100px; margin-bottom: 80px; }
.vsb-moyens__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 20px; align-items: start; }
.vsb-moyens__card { border-radius: 0 0 var(--vsb-radius) 0; padding: 40px; } /* radius coin bas-droit uniquement (audit) */
.vsb-moyens__card--dark { background: var(--vsb-dark); color: #fff; }
.vsb-moyens__card--dark .vsb-moyens__ctitle { color: #fff; margin-bottom: 32px; font-size: clamp(24px,2.2vw,32px); font-weight: 500; }
.vsb-moyens__card--beige { background: var(--vsb-beige); display: flex; flex-direction: column; gap: 24px; }
.vsb-moyens__btitle { color: var(--vsb-dark); margin-bottom: 20px; } /* titres noirs (audit) */
.vsb-moyens__text { font-family: 'Epilogue'; font-size: 17px; line-height: 24px; font-weight: 400; }
.vsb-moyens__block .vsb-text { color: var(--vsb-dark); margin-bottom: 8px; }
.vsb-moyens__ul { margin: 8px 0 0; padding-left: 0; list-style: none; }
.vsb-moyens__ul li { display: flex; align-items: flex-start; gap: 14px; font-family: 'Epilogue'; font-size: 17px; line-height: 24px; font-weight: 400; color: var(--vsb-dark); }
.vsb-moyens__ul li::before { content: ""; position: relative; top: 5px; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--vsb-beige); border: solid 1.5px var(--vsb-dark); } /* puce noire centrée verticalement (audit) */

/* ---- Liste à puces flèche (réutilisable) ----------------------------- */
.vsb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vsb-list li { display: flex; gap: 14px; align-items: center; }
/* Puce = flèche dans le cercle (icon-arrow-circle, currentColor) — sombre par défaut (audit) */
.vsb-list__ico { width: 26px; height: 26px; flex: 0 0 26px; margin-top: 0; color: var(--vsb-dark); }
.vsb-list li span { font-family: 'Epilogue'; font-size: 17px; line-height: 24px; font-weight: 400; }
.vsb-list li span.vsb-text { font-family: var(--vsb-font-b); font-size: 16px; line-height: 19.5px; font-weight: 500; }
.vsb-list li span strong { font-weight: 700; }
.vsb-moyens__card--dark .vsb-list__ico { color: #fff; }
/* Liste « Profil(s) recherché(s) » : items italiques + agrandis (audit) */
.vsb-list--profil { gap: 18px; }
.vsb-list--profil li span { font-style: italic; font-size: 19px; line-height: 1.35; }

/* ---- Réalisations (slider) ------------------------------------------ */
.vsb-realisations { }
.vsb-realisations__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 80px; }
.vsb-realisations__intro { display: flex; flex-direction: column; gap: 32px; max-width: 865px; }
.vsb-realisations__titles { display: flex; flex-direction: column; gap: 16px; }
.vsb-realisations__sub { font-family: var(--vsb-font-h); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.7vw, 24px); color: var(--vsb-dark); } /* noir + italique (audit) */
.vsb-realisations__lead { color: var(--vsb-dark); }
.vsb-realisations__head .vsb-btn { flex: 0 0 auto; }
.vsb-realisations__sliderwrap { width: 100%; }
.vsb-swiper { overflow: hidden; }
.vsb-realisations__slide { border-radius: var(--vsb-radius); overflow: hidden; }
.vsb-realisations__img { width: 100%; height: 720px; object-fit: contain; border-radius: var(--vsb-radius); }
.vsb-swiper-nav { display: flex; align-items: center; gap: 20px; justify-content: center; width: max-content; margin: 32px auto 0; }
.vsb-swiper-prev, .vsb-swiper-next { background: none; border: 0; cursor: pointer; padding: 0; }
.vsb-swiper-ico { width: 44px; height: 44px; } /* flèches 44×44 (audit) */
.vsb-swiper-pag { display: flex; gap: 8px; align-items: center; }
.vsb-swiper-pag .swiper-pagination-bullet { width: 10px; height: 10px; background: var(--vsb-brown); opacity: .3; border-radius: 50%; }
.vsb-swiper-pag .swiper-pagination-bullet-active { opacity: 1; }

@media (max-width: 1024px) {
  .vsb-split--intro, .vsb-split--bureau { grid-template-columns: 1fr; min-height: 0; }
  .vsb-split__media { min-height: 300px; height: 60vw; }
  .vsb-split__text { padding: 40px 24px; max-width: none; }
  .vsb-moyens__grid { grid-template-columns: 1fr; }
  .vsb-moyens__head { padding-left: 0; }
}
@media (max-width: 768px) {
  .vsb-founders__grid, .vsb-prestations__grid { grid-template-columns: 1fr; }
  .vsb-realisations__head { flex-direction: column; }
}

/* =====================================================================
   RESPONSIVE — calé sur les frames Figma mobile (<390) / tablet (768)
   (les frames incluent un mockup device : status bar + déco hors-cadre)
   ===================================================================== */
@media (max-width: 600px) {
  :root { --vsb-gutter: 20px; }
  #page-content { padding-top: 0px; }
  .vsb-header { top: 0px; }
  .vsb-header__inner { padding: 8px 20px; min-height: 72px; width: calc(100% - 40px); }
  .vsb-header__logo img { height: 72px; }
  .vsb-section + .vsb-section { margin-top: 40px; }
  /* 40px constant entre TOUTES les sections en mobile (écrase le calibrage desktop home) */
  .home .vsb-founders + .vsb-section, .home .vsb-moyens + .vsb-section { margin-top: 40px; }
  .home .vsb-footer { margin-top: 40px; }

  .vsb-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .vsb-hero__text { order: 0; justify-content: flex-start; padding: 120px 20px 24px; gap: 28px; }
  .vsb-hero__media { order: 1; position: relative; height: 320px; min-height: 0; }
  .vsb-hero__img { position: absolute; border-radius: 0; }
  .vsb-hero__title { font-size: 40px; }

  .vsb-split, .vsb-split--intro, .vsb-split--securiser, .vsb-split--bureau {
    grid-template-columns: 1fr; min-height: 0; column-gap: 0;
  }
  .vsb-split__media { order: -1; height: 300px; min-height: 0; }
  .vsb-split__img { border-radius: 0; }
  .vsb-split__img--right { border-radius: 0; }
  .vsb-split__text, .vsb-split__text--left { padding: 32px 20px; max-width: none; gap: 20px; }

  .vsb-founders__grid { grid-template-columns: 1fr; gap: 48px; }
  .vsb-founder { align-items: flex-start; }
  .vsb-founder__photo { width: 293px; max-width: 100%; }

  .vsb-prestations__grid { grid-template-columns: 1fr; }
  .vsb-card { min-height: 400px; border-radius: 0 0 var(--vsb-radius) 0; }

  .vsb-moyens__grid { grid-template-columns: 1fr; }
  .vsb-moyens__head { padding-left: 20px; margin-bottom: 40px; }
  .vsb-moyens__card { padding: 32px 20px; }

  .vsb-realisations__head { flex-direction: column; gap: 24px; margin-bottom: 40px; }
  .vsb-realisations__sliderwrap { padding-left: 20px; }
  .vsb-realisations__img { height: 260px; }

  .vsb-footer__banners { grid-template-columns: 1fr; max-width: calc(100% - 40px); }
  .vsb-banner { height: auto; min-height: 360px; }
  .vsb-banner__content, .vsb-banner--contact .vsb-banner__content { padding: 40px 24px; max-width: none; }
  .vsb-footer__main { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 20px; }
  .vsb-footer__logo img { width: 160px; }

  /* .vsb-marquee__item { font-size: 16px; } */
}

@media (min-width: 601px) and (max-width: 900px) {
  :root { --vsb-gutter: 32px; }
  .vsb-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .vsb-hero__text { order: 0; padding: 160px 32px 32px; gap: 32px; }
  .vsb-hero__media { order: 1; position: relative; height: 420px; min-height: 0; }
  .vsb-hero__img { position: absolute; }
  .vsb-split, .vsb-split--intro, .vsb-split--securiser, .vsb-split--bureau { grid-template-columns: 1fr; min-height: 0; column-gap: 0; }
  .vsb-split__media { order: -1; width: 100%; min-height: 0; aspect-ratio: 1; height: auto; }
  .vsb-split__text, .vsb-split__text--left { padding: 40px 32px; max-width: none; }
  .vsb-founders__grid { grid-template-columns: 1fr; gap: 40px; }
  .vsb-prestations__grid { grid-template-columns: 1fr; }
  .vsb-moyens__grid { grid-template-columns: 1fr; }
  .vsb-moyens__head { padding-left: 40px; padding-right: 40px; }
  .vsb-footer__banners { grid-template-columns: 1fr; max-width: calc(100% - 64px); }
  .vsb-footer__main { flex-direction: column; align-items: flex-start; }

  .vsb-founder { display: grid; grid-template-columns: 160px 1fr; gap: 32px; align-items: center; }
  .vsb-founder__photo { width: 160px; max-width: 100%; }
  .vsb-founder__bio { margin-top: 0; }
  .vsb-realisations__img { height: 400px; width: 100%; }
  .vsb-banner { min-height: unset; height: fit-content; border-radius: var(--vsb-radius); }
  .vsb-banner__content { padding: 60px 40px; max-width: 391px; }
  .vsb-banner--contact { border-radius: var(--vsb-radius) var(--vsb-radius) 0 0; }
  .vsb-banner--contact .vsb-banner__content { max-width: unset; width: 100%; padding: 60px 40px; }
}

/* =====================================================================
   PAGE PRESTATION (single-prestation)
   ===================================================================== */
.vsb-presta-sec { padding-block: 0; }
/* Sous-titre italique de section (sous le H2, au-dessus du paragraphe) — cf. Figma « Dossier de
   consultation des entreprises ». */
.vsb-split__subtitle { font-family: var(--vsb-font-h); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--vsb-dark); margin: 0; }
/* « securiser » prestation : hauteur calée sur l'image Figma de CHAQUE page (Frame 58), pas un
   plancher unique — chaque prestation a une image de hauteur différente. Valeurs lues via REST. */
/* « Des solutions détaillées » (6205:6094) : grid 7fr/5fr, image 5fr collée au bord droit, gap 0,
   encart accolé à l'image. Le texte (titre/para) garde une marge droite, l'encart va jusqu'à l'image. */
.vsb-presta-sec.vsb-split--securiser { min-height: 567px; grid-template-columns: 7fr 5fr; column-gap: 0; }
.vsb-presta-sec.vsb-split--securiser .vsb-split__text--left { padding-right: 0; }
.vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-h2,
.vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-split__subtitle,
.vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-text { padding-right: clamp(24px, 4vw, 80px); }
.vsb-prestation-page[data-slug="exe"] .vsb-presta-sec.vsb-split--securiser { min-height: 650px; }
.vsb-prestation-page[data-slug="pac"] .vsb-presta-sec.vsb-split--securiser { min-height: 808px; }
.vsb-prestation-page[data-slug="diagnostics-techniques"] .vsb-presta-sec.vsb-split--securiser { min-height: 820px; }
.vsb-presta-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.vsb-presta-dual__block { display: flex; flex-direction: column; gap: 12px; }
.vsb-presta-dual__block .vsb-h4 { color: var(--vsb-brown); }
.vsb-presta-listtitle { font-size: 24px; }
/* Section « cover » (frame 6034:2112 « Une approche collaborative ») : image de fond plein écran
   + cartouche blanc en absolu, coin haut-gauche (bord bas-droit arrondi 36px). */
.vsb-presta-sec.vsb-split--cover {
  display: block; position: relative; width: 100%; min-height: calc(100svh - 116px); overflow: hidden;
}
.vsb-split--cover .vsb-split__media,
.vsb-split--cover .vsb-split__media--right { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.vsb-split--cover .vsb-split__img,
.vsb-split--cover .vsb-split__img--right { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.vsb-split--cover .vsb-split__text,
.vsb-split--cover .vsb-split__text--left {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 616px; max-width: 92%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 32px;
  background: #fff; border: 1px solid #fff; border-radius: 0 0 36px 0; padding: 40px;
}
.vsb-split--cover .vsb-split__text > * { padding-right: 0 !important; }
@media (max-width: 768px) {
  .vsb-presta-sec.vsb-split--cover { min-height: 70vh; }
  .vsb-split--cover .vsb-split__text { padding: 28px; gap: 20px; }
}

.vsb-presta-block { display: block; }
.vsb-presta-block .vsb-split__text { max-width: var(--vsb-container); margin-inline: auto; padding-inline: var(--vsb-gutter); padding-block: 0; }
/* Bloc liste autonome (pleine largeur, frame 6030:1798) : encart beige, TITRE À GAUCHE / LISTE À DROITE. */
.vsb-presta-block .vsb-presta-encart:has(.vsb-presta-listtitle) {
  display: grid; grid-template-columns: minmax(200px, 0.85fr) 2fr; gap: 16px 56px;
  align-items: start; padding: 36px 48px; margin-top: 0;
}
.vsb-presta-block .vsb-presta-listtitle { margin: 0; }
.vsb-presta-block .vsb-presta-encart .vsb-list { gap: 14px; }

.vsb-next { padding-block: 0; }
/* « Quelle est la suite » : titre à gauche, intro à droite, NON empilés (audit) */
.vsb-next__head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 60px; align-items: start; max-width: 1312px; margin-bottom: 48px; }
.vsb-next__head .vsb-h2 { color: var(--vsb-dark); text-align: left; font-size: 36px;}
.vsb-next__head .vsb-text { text-align: left; align-self: center; }
@media (max-width: 900px) { .vsb-next__head { grid-template-columns: 1fr; } .vsb-next__head .vsb-text { text-align: left; } }
.vsb-next__cards { display: flex; flex-wrap: wrap; gap: 20px; overflow-x: auto; padding-bottom: 8px; }
/* Carte « suite » (frames 6034:2264 statique / 6034:2467 survol) :
   fond #815A2C + motif 6027:1042 ; au survol overlay #312F2D sombre + lien « Découvrir ». */
.vsb-next-card {
  position: relative; flex: 1; min-width: 199px; height: 157px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background-color: var(--vsb-brown);
  background-image: url('../img/motif-bois.svg');
  background-size: 72px; background-position: bottom right; background-repeat: repeat;
  border-radius: 12px; color: #fff; overflow: hidden;
  transition: transform .2s ease;
}
/* Overlay sombre au survol (#312F2D) */
.vsb-next-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--vsb-dark); opacity: 0; transition: opacity .3s ease;
}
.vsb-next-card:hover::before { opacity: 1; }
.vsb-next-card--current { outline: 2px solid var(--vsb-beige); outline-offset: -2px; }
.vsb-next-card__title { position: relative; z-index: 1; font-family: var(--vsb-font-h); font-weight: 600; font-size: 24px; line-height: 29.3px; color: #fff; }
.vsb-next-card__sub { position: relative; z-index: 1; font-family: var(--vsb-font-h); font-style: normal; font-weight: 500; font-size: 16px; line-height: 19.5px; color: rgba(255,255,255,.9); }
/* Lien « Découvrir » révélé au survol de la carte ; comportement lien de menu (icône maison à
   gauche au survol du lien, sans décalage du texte). */
.vsb-next-card__discover {
  position: absolute; z-index: 1; right: 22px; bottom: 24px;
  display: inline-flex; align-items: center;
  font-family: var(--vsb-font-h); font-weight: 700; font-size: 15px; color: #fff;
  opacity: 0; transition: opacity .25s ease;
}
.vsb-next-card:hover .vsb-next-card__discover { opacity: 1; }
.vsb-next-card__dico {
  position: absolute; right: calc(100% + 7px); top: 50%; transform: translateY(-50%);
  width: 14px; height: 16px; opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.vsb-next-card__dico path { fill: currentColor; }
.vsb-next-card__discover:hover .vsb-next-card__dico { opacity: 1; }

@media (max-width: 900px) {
  .vsb-presta-dual { grid-template-columns: 1fr; }
}

/* Encart liste prestation (beige) quand il y a un intitulé de liste */
.vsb-presta-encart:has(.vsb-presta-listtitle) {
  background: var(--vsb-beige); border-radius: var(--vsb-radius) 0 0 0; padding: 32px 40px;
  display: flex; flex-direction: column; gap: 32px; margin-top: 8px;
}
.vsb-presta-encart:has(.vsb-presta-listtitle) .vsb-list__ico { color: var(--vsb-dark); }
@media (max-width: 768px) {
  .vsb-presta-block .vsb-presta-encart:has(.vsb-presta-listtitle) { grid-template-columns: 1fr; gap: 16px; padding: 28px 28px; }
}

/* =====================================================================
   PAGES SECONDAIRES (réalisations, recrutement, contact, 404)
   ===================================================================== */
/* Hero plein viewport réservé au desktop ; en mobile/tablette le hero des pages secondaires
   se comporte comme celui de l'accueil (média 320px empilé, cf. @media ≤900/≤600). */
@media (min-width: 901px) {
  .vsb-hero--page .vsb-hero__grid { min-height: 100vh; }
  .vsb-hero--page .vsb-hero__media { min-height: 100vh; }
}

/* Réalisations — galerie projets */
.vsb-realisations-grid { padding-block: 0; }
.vsb-realisations-grid .vsb-h2 { max-width: 646px; margin: 0 auto 48px; text-align: center; } /* largeur limitée + centré (audit) */
.vsb-projets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.vsb-projet { display: flex; flex-direction: column; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; }
.vsb-projet__media { overflow: hidden; aspect-ratio: 2 / 1; }
.vsb-projet__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vsb-projet:hover .vsb-projet__img { transform: scale(1.04); }
/* Image de couverture entière (rendus 3D / fond clair) : non recadrée, sur fond neutre. */
.vsb-projet[data-fit="contain"] .vsb-projet__media { background: #fff; }
.vsb-projet[data-fit="contain"] .vsb-projet__img { object-fit: contain; }
/* .vsb-projet[data-fit="contain"]:hover .vsb-projet__img { transform: none; } */
.vsb-projet__title { font-family: var(--vsb-font-h); font-weight: 700; font-size: 20px; color: var(--vsb-dark); text-align: right; }

/* Modale galerie projet (réalisations) */
body.vsb-modal-open { overflow: hidden; }
.vsb-projet-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.vsb-projet-modal[hidden] { display: none; }
.vsb-projet-modal__overlay { position: absolute; inset: 0; background: rgba(20, 18, 16, 0.78); }
.vsb-projet-modal__box { position: relative; z-index: 1; width: min(960px, 100%); background: #fff; border-radius: var(--vsb-radius); padding: 28px; padding-top: 75px }
/* Croix de fermeture : le SVG (6214:5356) porte déjà l'anneau brun → bouton sans chrome, coin haut-droit. */
.vsb-projet-modal__close { position: absolute; top: 16px; right: 16px; z-index: 2; background: none; border: 0; padding: 0; width: 44px; height: 44px; cursor: pointer; }
.vsb-projet-modal__closeico { width: 44px; height: 44px; }
.vsb-projet-modal__swiper { position: relative; border-radius: var(--vsb-radius); overflow: hidden; }
.vsb-projet-modal__swiper .swiper-slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; display: block; }
/* Boutons prev/next SOUS le slider, centrés (maquette 6214:5293). */
.vsb-projet-modal__nav { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 24px; }
.vsb-projet-modal__nav .vsb-swiper-prev, .vsb-projet-modal__nav .vsb-swiper-next { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; }

/* Valeurs (recrutement / contact) */
.vsb-values { padding-block: 0; }
.vsb-values .vsb-container > .vsb-h2 { margin-bottom: 16px; }
.vsb-values .vsb-container > .vsb-text { margin-bottom: 48px; max-width: 860px; }
.vsb-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* 3 colonnes (maquette : 3 + 2) */
/* Cartes de valeurs (recrutement/contact) : carte blanche bordée + icône flèche-cercle (audit, maquette) */
.vsb-value { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: #fff; border: 1px solid rgba(49, 47, 45, 1); border-radius: 24px; }
.vsb-value__ico { width: 36px; height: 36px; flex: 0 0 36px; color: var(--vsb-dark); }
.vsb-value__title { font-family: var(--vsb-font-h); font-weight: 500; font-size: 20px; line-height: 24.4px; color: var(--vsb-dark); }
.vsb-value__text { font-family: "Epilogue"; font-weight: 400; font-size: 17px; line-height: 24px; color: var(--vsb-dark); }
/* Contact « Une équipe » : 5 cartes compactes sur UNE rangée, titre seul (maquette) */
.vsb-values--contact .vsb-values__grid { grid-template-columns: repeat(5, 1fr); }
.vsb-values--contact .vsb-value { min-height: 0; padding: 20px; gap: 20px; }
.vsb-values--contact .vsb-value__text { display: none; }
.vsb-values--contact .vsb-value__title { font-size: 20px; }
@media (min-width: 640px) and (max-width: 900px) { .vsb-values--contact .vsb-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .vsb-values--contact .vsb-values__grid { grid-template-columns: repeat(1, 1fr); } }
.vsb-value .vsb-h4 { color: var(--vsb-brown); }

/* Section « Une équipe à votre écoute » (contact) : image gauche + texte droite, puis cartes valeurs */
.vsb-equipe { display: grid; grid-template-columns: 637fr 675fr; gap: 80px; align-items: center; margin-bottom: 100px; }
.vsb-equipe__img { width: 100%; height: 637px; object-fit: cover; display: block; }
/* Recrutement : cartes valeurs plus hautes (Figma rangée ~380px) pour caler la suite sous le masque form */
.vsb-values:not(.vsb-values--contact) .vsb-value { min-height: 168px; justify-content: flex-start; }
@media (max-width: 900px) { .vsb-equipe { grid-template-columns: 1fr; gap: 32px; } }

/* Bandeau carte contact (image carte Figma pleine largeur container, cliquable → Google Maps) */
.vsb-contact-map-band { width: 100%; }
.vsb-contact-map-band__link { display: block; max-width: var(--vsb-container); margin-inline: auto; padding-inline: var(--vsb-gutter); }
.vsb-contact-map-band__img { display: block; width: 100%; height: 560px; object-fit: contain; background: var(--vsb-dark); }
@media (max-width: 900px) { .vsb-contact-map-band__img { height: 320px; } }

/* Section formulaire : bandeau beige pleine largeur (Figma #deb789) */
.vsb-contact-form, .vsb-recrut-form { background: #F2E2D0; display: flex; align-items: center; padding-block: 72px; }
.vsb-contact-form { min-height: 805px; padding-block: 80px; }
.vsb-recrut-form { min-height: 937px; padding-block: 80px; }
.vsb-contact-form .vsb-formgrid, .vsb-recrut-form .vsb-formgrid { width: 100%; max-width: var(--vsb-container); margin-inline: auto; padding-inline: var(--vsb-gutter); }

.vsb-formgrid__intro.vsb-armed.is-visible .vsb-list--profil span { font-size: 24px;}
.vsb-container.vsb-formgrid { padding-inline: 20px; grid-template-columns: 1fr; }
@media (min-width: 1024px) and (max-width: 1511px) { .vsb-container.vsb-formgrid { padding-inline: 80px; grid-template-columns: 1fr 1fr; } }
@media (min-width: 1512px) { .vsb-container.vsb-formgrid { padding-inline: 211px; grid-template-columns: 443px 1fr; } }

/* Grilles formulaires (recrutement / contact) */
.vsb-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.vsb-formgrid__intro { display: flex; flex-direction: column; gap: 32px; }
.vsb-formgrid__form { display: flex; flex-direction: column; gap: 24px; }
.vsb-contact__nap { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vsb-contact__nap a { display: inline-flex; align-items: center; gap: 14px; font-family: var(--vsb-font-h); font-weight: 500; font-size: 18px; color: var(--vsb-dark); }
.vsb-contact__napico { width: 30px; height: 30px; flex: 0 0 30px; }
.vsb-contact__nap a:hover { text-decoration: underline; }
.vsb-contact__nap a:hover span:has(strong) { text-decoration: none; }
.vsb-contact__map { margin-top: 8px; }
.vsb-contact__map iframe { display: block; }

/* WPForms (CSS plugin coupé via wpforms_disable_css) */
.vsb-form-host .wpforms-field { width: 100% !important; margin-bottom: 18px; }
.vsb-form-host .wpforms-field-medium, .vsb-form-host .wpforms-field-large, .vsb-form-host .wpforms-field-small { max-width: 100% !important; }
.vsb-form-host label.wpforms-field-label { display: block; font-family: var(--vsb-font-h); font-weight: 500; font-size: 16px; margin-bottom: 8px; color: var(--vsb-dark); }
.vsb-form-host input[type="text"], .vsb-form-host input[type="email"], .vsb-form-host input[type="tel"], .vsb-form-host input[type="url"], .vsb-form-host textarea, .vsb-form-host select, .vsb-form-host input[type="file"] {
  /* width: 100% !important; padding: 14px 16px; border: 1px solid #d7cfc4; border-radius: 12px;
  font-family: var(--vsb-font-b); font-size: 16px; color: var(--vsb-dark); background: #fff; */
  width: 100%; min-height: 40px; padding: 6px 12px; }
.vsb-form-host textarea { min-height: 120px; resize: vertical; }
.vsb-form-host input:focus, .vsb-form-host textarea:focus { outline: 2px solid var(--vsb-brown); outline-offset: 1px; border-color: var(--vsb-brown); }
.vsb-form-host .wpforms-required-label { color: var(--vsb-brown); }
.vsb-form-host .wpforms-field-description { font-size: 13px; color: var(--vsb-muted); margin-top: 6px; }
.vsb-form-host .wpforms-submit {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; cursor: pointer;
  background: #fff; color: var(--vsb-dark); border: 1px solid var(--vsb-dark); border-radius: var(--vsb-radius-pill);
  font-family: var(--vsb-font-h); font-weight: 700; font-size: 16px;
}
.vsb-form-host .wpforms-submit:hover { background: var(--vsb-brown); color: #fff; border-color: var(--vsb-brown); }
/* Quand JS crée le proxy .vsb-btn, on masque le submit natif (hors écran mais cliquable via .click()). */
.wpforms-submit.vsb-wpforms-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }
.vsb-wpforms-proxy { margin-top: 4px; }
.vsb-form-host .wpforms-field-checkbox label, .vsb-form-host .wpforms-gdpr label { font-weight: 400; font-size: 14px; line-height: 1.5; }

/* Popup succès */
.vsb-popup { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.vsb-popup[hidden] { display: none; }
.vsb-popup__overlay { position: absolute; inset: 0; background: rgba(20,19,19,.6); }
.vsb-popup__box { position: relative; z-index: 1; background: #fff; border-radius: var(--vsb-radius); padding: 48px; max-width: 460px; width: calc(100% - 40px); display: flex; flex-direction: column; gap: 20px; text-align: center; align-items: center; }

/* 404 */
.vsb-404 { padding-block: 120px 80px; min-height: 60vh; }
.vsb-404__inner { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; max-width: 720px; }
.vsb-404__actions { margin-top: 8px; }

@media (max-width: 900px) {
  .vsb-projets-grid { grid-template-columns: 1fr 1fr; }
  .vsb-formgrid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .vsb-projets-grid { grid-template-columns: 1fr; }
  .vsb-values__grid { grid-template-columns: 1fr; }
}




/* === ESQ === */
.page-id-37.vsb-prestation-page
section.vsb-section.vsb-split.vsb-presta-sec.vsb-split--securiser,
.page-id-43.vsb-prestation-page
section.vsb-section.vsb-split.vsb-presta-sec.vsb-split--securiser {
  align-items: end;
}

.page-id-37.vsb-prestation-page
section.vsb-section.vsb-split.vsb-presta-sec.vsb-split--securiser
.vsb-split__text.vsb-split__text--left.vsb-armed.is-visible,
.page-id-43.vsb-prestation-page
section.vsb-section.vsb-split.vsb-presta-sec.vsb-split--securiser
.vsb-split__text.vsb-split__text--left.vsb-armed.is-visible {
  padding-bottom: 0;
}

.page-id-37.vsb-prestation-page section.vsb-section.vsb-split.vsb-presta-sec.vsb-split--securiser
.vsb-presta-encart,
.page-id-43.vsb-prestation-page section.vsb-section.vsb-split.vsb-presta-sec.vsb-split--securiser
.vsb-presta-encart {
  margin-top: 48px;
}

/* === APS-APD + PRO et DCE + Scanner3D=== */
@media (min-width: 1512px) {
  .page-id-38.vsb-prestation-page
  .vsb-section.vsb-split.vsb-presta-sec.vsb-split--securiser,
  .page-id-39.vsb-prestation-page
  .vsb-section.vsb-split.vsb-presta-sec.vsb-split--securiser,
  .page-id-42.vsb-prestation-page
  .vsb-section.vsb-split.vsb-presta-sec.vsb-split--securiser
  {
    padding-left: 80px;
  }
  

  .page-id-38.vsb-prestation-page
  .vsb-presta-encart,
  .page-id-39.vsb-prestation-page
  .vsb-presta-encart,
  .page-id-42.vsb-prestation-page
  .vsb-presta-encart,
  .page-id-43.vsb-prestation-page
  .vsb-presta-encart {
    max-width: 1090px;
    margin: auto;
  }
  .page-id-38.vsb-prestation-page
  .vsb-presta-block .vsb-presta-encart:has(.vsb-presta-listtitle),
  .page-id-39.vsb-prestation-page
  .vsb-presta-block .vsb-presta-encart:has(.vsb-presta-listtitle),
  .page-id-42.vsb-prestation-page
  .vsb-presta-block .vsb-presta-encart:has(.vsb-presta-listtitle),
  .page-id-43.vsb-prestation-page
  .vsb-presta-block .vsb-presta-encart:has(.vsb-presta-listtitle) {
    grid-template-columns: 270px 1fr;
  }
  .page-id-38.vsb-prestation-page
  .vsb-presta-listtitle,
  .page-id-39.vsb-prestation-page
  .vsb-presta-listtitle,
  .page-id-42.vsb-prestation-page
  .vsb-presta-listtitle,
  .page-id-43.vsb-prestation-page
  .vsb-presta-listtitle {
    line-height: 29.3px;
  }
}

.page-id-38.vsb-prestation-page
.vsb-presta-encart,
.page-id-39.vsb-prestation-page
.vsb-presta-encart,
.page-id-42.vsb-prestation-page
.vsb-presta-encart {
  border-radius: var(--vsb-radius);
}

/* === EXE + PAC === */
/* @media (min-width: 1512px) { */
  .page-id-40.vsb-prestation-page
  .vsb-split,
  .page-id-41.vsb-prestation-page
  .vsb-split {
    align-items: end;
  }
  .page-id-40.vsb-prestation-page
  .vsb-split__text--left,
  .page-id-41.vsb-prestation-page
  .vsb-split__text--left {
    padding-bottom: 0;
  }

  @media (max-width: 1024px) {
    .vsb-presta-sec.vsb-split--securiser {
      display: flex;
      flex-direction: column;
    }
  }
/* } */


.vsb-banner.vsb-banner--contact .vsb-banner__content {
  max-width: none;
  width: 100%;
}



/* === CONTACT === */
main.page-id-33
.vsb-hero__text {
  gap: 32px;
}






/* ==========================================================================
   WP FORMS — custom CSS
   ========================================================================== */
/* UPLOAD */
.wpforms-uploader.dz-clickable .dz-message svg {
	display: none;
}

.wpforms-uploader.dz-clickable {
	border-style: solid !important;
	padding: 10px 15px !important;
	text-align: left !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	width: 100%;
}

div#wpforms-72-field_6-container
label.wpforms-field-label {
  display: none;  
}

span.modern-title {
    font-family: var(--vsb-font-h);
    font-weight: 500;
    font-size: 16px;
    color: var(--vsb-dark);
    opacity: .75;
}

@media (max-width: 639px) {
  span.modern-title {
    font-size: 14px;
  }
}

/* --- */
.wpforms-label-hide {
  display: none !important;
}

input#wpforms-70-field_8_1,
input#wpforms-72-field_8_1 {
    width: 16px;
    height: 17px;
    align-self: center;
    transform: scale(1.5);
    transform-origin: left center;
}

@media (max-width: 639px) {
  input#wpforms-70-field_8_1,
  input#wpforms-72-field_8_1 {
    width: 60px;
    height: 60px;
    border: none;
  }
}

form#wpforms-form-70
li.choice-1.depth-1,
form#wpforms-form-72
li.choice-1.depth-1
{
    display: flex;
    gap: 20px;
}

form#wpforms-form-70
label.wpforms-field-label-inline,
form#wpforms-form-72
label.wpforms-field-label-inline
{
  font-size: 16px !important;
  font-weight: 500 !important;
}



/* =====================================================================
   PASSE MOBILE / TABLETTE (≤ 900px) — splits empilés, image VISIBLE,
   ordre texte-puis-image. Fix prioritaire des sections prestation dont
   la grille 7fr/5fr (et les min-height par page) écrasaient l'image à 0px.
   `!important` assumé : il faut battre les surcharges desktop par page-id
   (specificité élevée) sans les réécrire une à une.
   ===================================================================== */
@media (max-width: 900px) {
  /* Tous les splits SAUF la section « cover » (image plein écran + cartouche) */
  .vsb-split:not(.vsb-split--cover) {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    column-gap: 0 !important;
    align-items: stretch !important;
  }
  /* Texte d'abord, image ensuite — y compris quand l'image est à gauche en desktop */
  .vsb-split:not(.vsb-split--cover) .vsb-split__text,
  .vsb-split:not(.vsb-split--cover) .vsb-split__text--left { order: 1 !important; }
  .vsb-split:not(.vsb-split--cover) .vsb-split__media {
    order: 2 !important; position: relative; width: 100%; height: auto;
    aspect-ratio: 4 / 3; min-height: 0;
  }
  /* Le logo de fond décoratif (intro) n'a pas de sens une fois empilé */
  .vsb-split--intro .vsb-split__text::after { display: none; }
}










/* Checkdesign */
.page-id-38.vsb-prestation-page .vsb-presta-encart,
.page-id-39.vsb-prestation-page .vsb-presta-encart,
.page-id-42.vsb-prestation-page .vsb-presta-encart,
.page-id-43.vsb-prestation-page .vsb-presta-encart {
  margin: 0;
}

.page-id-40 section.vsb-section.vsb-split.vsb-presta-sec.vsb-split--intro {
  align-items: center;
}


.page-id-37 .vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-h2,
.page-id-37 .vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-split__subtitle,
.page-id-37 .vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-text {
  padding-left: clamp(24px, 4vw, 80px);
}
.page-id-40 .vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-h2,
.page-id-40 .vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-split__subtitle,
.page-id-40 .vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-text {
  padding-left: clamp(24px, 4vw, 80px);
}
.page-id-41 .vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-h2,
.page-id-41 .vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-split__subtitle,
.page-id-41 .vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-text {
  padding-left: clamp(24px, 4vw, 80px);
}
.page-id-43 .vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-h2,
.page-id-43 .vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-split__subtitle,
.page-id-43 .vsb-presta-sec.vsb-split--securiser .vsb-split__text--left > .vsb-text {
  padding-left: clamp(24px, 4vw, 80px);
}


.page-id-32 .vsb-equipe__text.vsb-armed.is-visible h2.vsb-h2,
.page-id-33 .vsb-equipe__text.vsb-armed.is-visible h2.vsb-h2 {
    margin-bottom: 32px;
}

.page-id-32 .vsb-equipe__img {
  height: unset;
  aspect-ratio: 1 / 1;
} 

@media (max-width: 900px) {
  .page-id-30 .vsb-split:not(.vsb-split--cover) .vsb-split__text,
  .page-id-30 .vsb-split:not(.vsb-split--cover) .vsb-split__text--left { order: 2 !important; }
  .page-id-30 .vsb-split:not(.vsb-split--cover) .vsb-split__media {
    order: 1 !important;;
  }

  .page-id-32 .vsb-equipe__media {
    order: 2 !important;
  }


  .vsb-projet-modal__box {
    padding: 16px;
    padding-top: 75px;
  }

  .vsb-projet-modal__swiper .swiper-slide img {
    aspect-ratio: 11 / 16;
  }
}



.page-id-32 .vsb-footer {
  margin-top: -20px;
}

.page-id-32 img.vsb-hero__img {
    object-position: 20% center;
}



/* checktechnique */
section.vsb-section.vsb-split.vsb-presta-sec.vsb-presta-block
.vsb-split__text.vsb-armed.is-visible
.vsb-presta-encart {
  margin: auto;
}


.page-id-32
.vsb-split--intro .vsb-split__text::after {
  transform: translateY(-38%);
}
.page-id-33
.vsb-split--intro .vsb-split__text::after {
  display: none;
}