/*
 * Agence Web 31 · Sites — feuille de style des sites clients.
 * Source unique : utilisée par le thème WordPress ET par l'aperçu de la plateforme.
 * Les couleurs et polices viennent de variables CSS injectées par site
 * (--vt-primary, --vt-bg, --vt-font-heading…).
 * Parti pris : un site de commerce classique, sobre et lisible (bandeau d'infos, menu de pages,
 * grande photo, sections simples, pied de page en colonnes). Pas d'effets décoratifs.
 */

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

:root {
  --vt-radius: 6px;
  --vt-wide: 1140px;
  --vt-pad: clamp(18px, 4vw, 32px);
  --vt-gap: clamp(18px, 2.5vw, 28px);
  --vt-section: clamp(56px, 7vw, 88px);
  --vt-line: color-mix(in srgb, var(--vt-ink) 12%, transparent);
  --vt-soft: color-mix(in srgb, var(--vt-primary) 7%, var(--vt-bg));
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.vt-site, .vt-site {
  margin: 0;
  background: var(--vt-bg);
  color: var(--vt-ink);
  font-family: var(--vt-font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.vt-site img { max-width: 100%; height: auto; display: block; }
.vt-site a { color: var(--vt-primary); }
.vt-site h1, .vt-site h2, .vt-site h3 {
  font-family: var(--vt-font-heading);
  font-weight: var(--vt-heading-weight, 650);
  line-height: 1.2;
  margin: 0 0 .6em;
  color: var(--vt-ink);
}
.vt-site h2 { font-size: clamp(26px, 2.6vw, 34px); }
.vt-site h3 { font-size: 20px; }
.vt-site p { margin: 0 0 1em; }
.vt-main > * + * { margin-top: 0; }

/* ---------- Bandeau d'infos ---------- */
.vt-topbar { background: var(--vt-primary); color: var(--vt-primary-ink); font-size: 14px; }
.vt-topbar__inner { max-width: var(--vt-wide); margin: 0 auto; padding: 7px var(--vt-pad); display: flex; flex-wrap: wrap; gap: 4px 26px; }
.vt-site .vt-topbar a { color: inherit; text-decoration: none; }
.vt-site .vt-topbar a:hover { text-decoration: underline; }

/* ---------- En-tête ---------- */
.vt-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--vt-line); box-shadow: 0 2px 8px rgb(0 0 0 / .04); }
.vt-header__inner {
  max-width: var(--vt-wide); margin: 0 auto; padding: 12px var(--vt-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.vt-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--vt-ink) !important; min-width: 0; }
.vt-site .vt-brand__logo { height: 52px; width: auto; max-width: 180px; object-fit: contain; }
.vt-brand__mark {
  flex: none; width: 42px; height: 42px; border-radius: var(--vt-radius); display: grid; place-items: center;
  background: var(--vt-primary); color: var(--vt-primary-ink);
  font-family: var(--vt-font-heading); font-weight: 700; font-size: 21px;
}
.vt-brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--vt-font-heading); font-weight: var(--vt-heading-weight); font-size: 21px; }
.vt-nav { display: flex; align-items: center; gap: 2px; }
.vt-site .vt-nav a { white-space: nowrap; color: var(--vt-ink); text-decoration: none; font-size: 15.5px; font-weight: 500; padding: 8px 14px; border-bottom: 2px solid transparent; }
.vt-site .vt-nav a:hover, .vt-site .vt-nav a[aria-current="page"] { color: var(--vt-primary); border-bottom-color: var(--vt-primary); }
.vt-site .vt-nav .vt-nav__cta { background: var(--vt-primary); color: var(--vt-primary-ink); margin-left: 12px; padding: 10px 18px; font-weight: 600; border-radius: var(--vt-radius); border: 0; }
.vt-site .vt-nav .vt-nav__cta:hover { background: color-mix(in srgb, var(--vt-primary) 86%, black); color: var(--vt-primary-ink); }
.vt-nav-toggle, .vt-burger { display: none; }

@media (max-width: 960px) {
  .vt-burger { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; flex: none; }
  .vt-burger span, .vt-burger span::before, .vt-burger span::after {
    content: ""; display: block; width: 24px; height: 2px; background: var(--vt-ink); position: relative; transition: transform .2s;
  }
  .vt-burger span::before { position: absolute; top: -7px; }
  .vt-burger span::after { position: absolute; top: 7px; }
  .vt-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px var(--vt-pad) 16px; background: #fff; border-bottom: 1px solid var(--vt-line); box-shadow: 0 8px 16px rgb(0 0 0 / .06);
  }
  .vt-site .vt-nav a { padding: 13px 4px; font-size: 17px; border-bottom: 1px solid var(--vt-line); }
  .vt-site .vt-nav .vt-nav__cta { margin: 12px 0 0; text-align: center; }
  .vt-nav-toggle:checked ~ .vt-nav { display: flex; }
  .vt-nav-toggle:checked + .vt-burger span { transform: rotate(45deg); }
  .vt-nav-toggle:checked + .vt-burger span::before { transform: translateY(7px) rotate(-90deg); }
  .vt-nav-toggle:checked + .vt-burger span::after { opacity: 0; }
  .vt-topbar__inner span { display: none; }
}

/* ---------- Sections ---------- */
.vt-main > .wp-block-group, .vt-main > section { padding: var(--vt-section) var(--vt-pad); }
.vt-main > .wp-block-group > *, .vt-main > section:not(.wp-block-cover) > * { max-width: var(--vt-wide); margin-inline: auto; }
.vt-title { text-align: center; max-width: 720px !important; margin-bottom: clamp(28px, 4vw, 44px) !important; }
.vt-title h2::after { content: ""; display: block; width: 56px; height: 3px; background: var(--vt-primary); margin: 14px auto 0; }
.vt-title__sub { color: var(--vt-muted); margin: 0 !important; }
.vt-center { text-align: center; margin-top: 32px !important; }
.vt-center .wp-block-buttons { justify-content: center; }

/* ---------- Grande photo d'accueil ---------- */
.vt-hero { position: relative; display: flex; align-items: center; overflow: hidden; }
.vt-hero.wp-block-cover { min-height: clamp(440px, 72vh, 680px); padding: 80px var(--vt-pad); color: #fff; }
.vt-hero .wp-block-cover__image-background, .vt-pagehead .wp-block-cover__image-background {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none;
}
.vt-hero .wp-block-cover__background, .vt-pagehead .wp-block-cover__background { position: absolute; inset: 0; z-index: 1; background: rgb(0 0 0 / .5); }
.vt-hero .wp-block-cover__inner-container, .vt-pagehead .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; max-width: var(--vt-wide); margin: 0 auto; }
.vt-hero__content { max-width: 780px; margin: 0 auto; text-align: center; }
.vt-site .vt-hero__title { font-size: clamp(36px, 5vw, 60px); color: inherit; margin-bottom: 16px; }
.vt-hero__lead { font-size: clamp(18px, 1.5vw, 21px); margin: 0 auto 30px !important; max-width: 640px; }
.vt-hero .wp-block-buttons { justify-content: center; }
.vt-hero.no-image { min-height: clamp(380px, 56vh, 560px); background: var(--vt-primary); color: var(--vt-primary-ink); }
.vt-site .vt-hero.no-image .vt-hero__title { color: inherit; }

/* ---------- En-tête des pages intérieures ---------- */
.vt-pagehead { position: relative; overflow: hidden; color: #fff; text-align: center; }
.vt-main > .vt-pagehead { padding: clamp(56px, 8vw, 96px) var(--vt-pad); }
.vt-pagehead.no-image { background: var(--vt-primary); color: var(--vt-primary-ink); }
.vt-site .vt-pagehead__title { color: inherit; font-size: clamp(32px, 4vw, 46px); margin: 0 0 8px; }
.vt-crumbs { margin: 0 !important; font-size: 15px; opacity: .9; }
.vt-site .vt-crumbs a { color: inherit; }

/* ---------- Boutons ---------- */
.vt-site .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.vt-site .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px; border-radius: var(--vt-radius);
  font-weight: 600; font-size: 16px; text-decoration: none; transition: background .2s, color .2s;
}
.vt-site .is-style-fill .wp-block-button__link { background: var(--vt-primary); color: var(--vt-primary-ink); border: 2px solid var(--vt-primary); }
.vt-site .is-style-fill .wp-block-button__link:hover { background: color-mix(in srgb, var(--vt-primary) 86%, black); }
.vt-site .is-style-outline .wp-block-button__link { border: 2px solid var(--vt-primary); color: var(--vt-primary); background: transparent; }
.vt-site .is-style-outline .wp-block-button__link:hover { background: var(--vt-primary); color: var(--vt-primary-ink); }
.vt-site .vt-hero .is-style-outline .wp-block-button__link { border-color: #fff; color: #fff; }
.vt-site .vt-hero .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--vt-ink); }

/* ---------- À propos ---------- */
.vt-about__cols { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.vt-about__cols > .wp-block-column { min-width: 0; }
.vt-about__img { margin: 0; }
.vt-about__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--vt-radius); }
.vt-about__solo { max-width: 760px !important; }
.vt-years { font-weight: 700; color: var(--vt-primary); }

/* ---------- Prestations ---------- */
.vt-services { background: var(--vt-soft); }
.vt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 360px)); justify-content: center; gap: var(--vt-gap); }
.vt-card { background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); padding: 26px 24px; }
.vt-site .vt-card h3 { margin: 0 0 8px; color: var(--vt-primary); }
.vt-card p { color: var(--vt-muted); margin: 0; font-size: 16px; }

/* ---------- Points forts ---------- */
.vt-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); justify-content: center; gap: var(--vt-gap); }
.vt-check { padding-left: 38px; position: relative; }
.vt-check::before {
  content: "✓"; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--vt-primary); color: var(--vt-primary-ink); font-size: 14px; font-weight: 700;
}
.vt-site .vt-check h3 { font-size: 18px; margin: 0 0 4px; }
.vt-check p { color: var(--vt-muted); margin: 0; font-size: 16px; }

/* ---------- Galerie ---------- */
.vt-gallery { background: var(--vt-soft); }
.vt-gallery__grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.vt-gallery__grid > figure { margin: 0; overflow: hidden; border-radius: var(--vt-radius); aspect-ratio: 4 / 3; }
.vt-gallery__grid img { width: 100%; height: 100%; object-fit: cover; }
/* La feuille « galerie » de WordPress fixe chaque photo à un tiers de la largeur (sélecteur renforcé par
   :not(#individual-image)) : la grille du thème reprend la main avec la même force. */
.vt-site .vt-gallery__grid.wp-block-gallery figure.wp-block-image:not(#individual-image) { width: auto; max-width: none; margin: 0; }
.vt-site .vt-gallery__grid.wp-block-gallery figure.wp-block-image:not(#individual-image) img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .vt-gallery__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vt-gallery__grid > figure:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 16 / 9; }
}

/* ---------- Avis ---------- */
.vt-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--vt-gap); }
.vt-review { margin: 0; padding: 26px; background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); }
.vt-review cite { font-style: normal; font-weight: 700; font-size: 15px; }
.vt-review cite::before { content: "— "; }
.vt-stars { color: #E8A317; letter-spacing: 2px; font-size: 17px; }

/* ---------- Bandeau d'appel ---------- */
.vt-band { background: var(--vt-primary); color: var(--vt-primary-ink); text-align: center; }
.vt-main > .vt-band { padding: clamp(44px, 6vw, 64px) var(--vt-pad); }
.vt-site .vt-band h2 { color: inherit; margin: 0 0 6px; }
.vt-band__lead { opacity: .9; margin: 0 0 22px !important; }
.vt-band .wp-block-buttons { justify-content: center; }
.vt-site .vt-band .wp-block-button__link { background: #fff; color: var(--vt-primary); border-color: #fff; }

/* ---------- Infos pratiques ---------- */
.vt-practical__cols { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: var(--vt-gap); }
.vt-practical__cols > .wp-block-column { min-width: 0; }
.vt-site .vt-practical h3 { font-size: 18px; padding-bottom: 8px; border-bottom: 2px solid var(--vt-primary); display: inline-block; }
.vt-practical p { margin: 0 0 6px; }

/* ---------- FAQ ---------- */
.vt-faq__list { max-width: 820px !important; }
.vt-site .wp-block-details { border: 1px solid var(--vt-line); border-radius: var(--vt-radius); padding: 0 20px; margin-bottom: 10px; background: #fff; }
.vt-site .wp-block-details summary { cursor: pointer; padding: 16px 30px 16px 0; position: relative; font-weight: 600; list-style: none; }
.vt-site .wp-block-details summary::-webkit-details-marker { display: none; }
.vt-site .wp-block-details summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; color: var(--vt-primary); font-size: 22px; }
.vt-site .wp-block-details[open] summary::after { content: "−"; }
.vt-site .wp-block-details p { color: var(--vt-muted); }

/* ---------- Contact ---------- */
.vt-contact__cols { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.vt-contact__cols > .wp-block-column { min-width: 0; }
.vt-coords { margin: 20px 0 28px !important; display: grid; gap: 6px; }
.vt-coord { margin: 0 !important; }
.vt-coord a { font-weight: 600; text-decoration: none; }
.vt-hours__title { margin-top: 8px !important; }
.vt-hours { margin: 0; }
.vt-hours table { width: 100%; border-collapse: collapse; font-size: 16px; }
.vt-site .vt-hours table, .vt-site .vt-hours td { border: 0; }
.vt-site .vt-hours td { padding: 8px 0; border-bottom: 1px solid var(--vt-line); }
.vt-hours td:last-child { text-align: right; color: var(--vt-muted); }

.vt-form { background: var(--vt-soft); border: 1px solid var(--vt-line); border-radius: var(--vt-radius); padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; }
.vt-form__title { font-family: var(--vt-font-heading); font-weight: var(--vt-heading-weight); font-size: 22px; margin: 0 !important; }
.vt-form label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.vt-form input:not([type=checkbox]), .vt-form textarea {
  font: inherit; font-weight: 400; color: var(--vt-ink); background: #fff; border: 1px solid var(--vt-line);
  border-radius: 4px; padding: 11px 13px; outline: none; width: 100%;
}
.vt-form input:focus, .vt-form textarea:focus { border-color: var(--vt-primary); }
.vt-form .vt-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13px; color: var(--vt-muted); }
.vt-form .vt-consent input { margin-top: 4px; accent-color: var(--vt-primary); }
.vt-form .vt-hp { position: absolute; left: -9999px; }
.vt-form button { font: inherit; font-weight: 600; cursor: pointer; border: 0; min-height: 48px; border-radius: var(--vt-radius); background: var(--vt-primary); color: var(--vt-primary-ink); }
.vt-form button:hover { background: color-mix(in srgb, var(--vt-primary) 86%, black); }
.vt-form button:disabled { opacity: .7; cursor: not-allowed; }
.vt-form__notice { padding: 14px 16px; border-radius: 4px; background: #fff; font-weight: 600; margin: 0 !important; }

/* ---------- Pages légales ---------- */
.vt-legal { max-width: 820px; margin: 0 auto; }
.vt-legal h1 { font-size: clamp(30px, 3.6vw, 42px); }
.vt-legal h2 { font-size: 22px; margin-top: 2em; }
.vt-legal__table table { width: 100%; border-collapse: collapse; }
.vt-legal__table td { padding: 10px 0; border-bottom: 1px solid var(--vt-line); vertical-align: top; }
.vt-legal__table td:first-child { color: var(--vt-muted); width: 40%; }

/* ---------- Pied de page ---------- */
.vt-footer { background: #1f1f1f; color: rgb(255 255 255 / .72); font-size: 15px; }
.vt-footer__inner { max-width: var(--vt-wide); margin: 0 auto; padding: 48px var(--vt-pad) 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
.vt-footer p { margin: 0 0 6px; }
.vt-site .vt-footer a { color: inherit; text-decoration: none; }
.vt-site .vt-footer a:hover { color: #fff; }
.vt-footer__name, .vt-footer__head { color: #fff; font-family: var(--vt-font-heading); font-weight: var(--vt-heading-weight); font-size: 18px; margin-bottom: 12px !important; }
.vt-footer__bottom {
  max-width: var(--vt-wide); margin: 0 auto; padding: 16px var(--vt-pad); display: flex; flex-wrap: wrap; gap: 6px 22px;
  border-top: 1px solid rgb(255 255 255 / .12); font-size: 13.5px;
}
.vt-footer__credit { margin-left: auto; opacity: .7; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .vt-about__cols, .vt-contact__cols, .vt-practical__cols, .vt-footer__inner { grid-template-columns: 1fr; }
  .vt-hero.wp-block-cover { min-height: clamp(420px, 64vh, 560px); }
  .vt-footer__credit { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}