/**
 * VOG MARQUAGE — espace agences « Objets publicitaires ».
 * ---------------------------------------------------------------------------
 * ⚠️ Le CSS d'un module est chargé AVANT celui du thème (piège Hummingbird
 * déjà rencontré sur les badges et .product-flags) : tout est donc scopé sous
 * .vm-page, et on ne compte jamais sur l'ordre du cascade pour gagner contre
 * une règle du thème.
 *
 * La palette est celle de la maquette, exposée en variables pour pouvoir
 * basculer sur les couleurs VOG import (#BCCF00 / #13233f) en une ligne si
 * Alex préfère. Police : Inter, déjà chargée par le thème — on ne va pas
 * chercher Archivo chez Google Fonts (requête tierce + question RGPD via
 * vogconsent). Le mono est une pile système, pour la même raison.
 * ---------------------------------------------------------------------------
 */

.vm-page {
  --vm-ink: #16181D;
  --vm-ink-hover: #2B2F38;
  --vm-bg: #F6F5F2;
  --vm-surface: #FFFFFF;
  --vm-border: #E3E1DB;
  --vm-border-strong: #D9D6CE;
  --vm-line: #EFEDE8;
  --vm-text: #3D4150;
  --vm-muted: #5C6070;
  --vm-accent: #D5602A;
  --vm-accent-soft: #FBEFE8;
  --vm-error: #B3261E;
  --vm-success: #1E5B32;
  --vm-success-soft: #EAF3EC;
  --vm-out: #9A5B00;

  --vm-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 24px 72px;
  color: var(--vm-ink);
  background: transparent;
}

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

.vm-mono { font-family: var(--vm-mono); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- Fil d'Ariane */

.vm-page .vm-breadcrumb {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 14px; color: var(--vm-muted);
}
.vm-page .vm-breadcrumb a { color: var(--vm-muted); text-decoration: underline; text-underline-offset: 3px; }
.vm-page .vm-breadcrumb a:hover { color: var(--vm-ink); }

/* ---------------------------------------------------------------- Grille */

.vm-page .vm-product {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 40px;
  align-items: start;
}

/* ---------------------------------------------------------------- Aperçu */

.vm-page .vm-preview-col {
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 96px;
}

.vm-page .vm-preview {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 16px;
  overflow: hidden;
}
.vm-page .vm-preview.is-dropping { border-color: var(--vm-accent); background: var(--vm-accent-soft); }

.vm-page .vm-preview__product {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none;
}

.vm-page .vm-preview__hint {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  background: var(--vm-ink); color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 9px 14px; border-radius: 999px;
  white-space: nowrap; pointer-events: none;
}

/* La zone est un cadre en pointillés qu'on peut masquer : le logo, lui, reste
   toujours découpé par elle (overflow) — masquer le cadre ne libère pas le
   marquage. */
.vm-page .vm-zone {
  position: absolute;
  overflow: hidden;
  border: 1.5px dashed transparent;
}
.vm-page .vm-zone.is-visible { border-color: var(--vm-accent); }

.vm-page .vm-zone__logo {
  position: absolute;
  max-width: none;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  touch-action: none; /* sans quoi le doigt fait défiler la page au lieu de déplacer le logo */
}
.vm-page .vm-zone__logo.is-dragging { cursor: grabbing; }

/* La vignette de la page ne sert qu'à montrer le résultat : tout le placement
   se fait dans la popup. Zone et logo y sont donc inertes. */
.vm-page .vm-preview--static { cursor: zoom-in; }
.vm-page .vm-preview--static .vm-zone,
.vm-page .vm-preview--static .vm-zone__logo { pointer-events: none; }
.vm-page .vm-preview--static:hover { border-color: var(--vm-ink); }

.vm-page .vm-btn--simulate {
  width: 100%;
  background: var(--vm-ink); color: #fff;
  border: 0; border-radius: 10px;
  padding: 14px; font-size: 16px; font-weight: 700;
}
.vm-page .vm-btn--simulate:hover { background: var(--vm-ink-hover); }

/* --- Galerie du produit --- */

.vm-page .vm-gallery { display: flex; gap: 8px; flex-wrap: wrap; }

.vm-page .vm-gallery__item {
  position: relative;
  width: 72px; height: 72px; padding: 0;
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.vm-page .vm-gallery__item:hover { border-color: var(--vm-border-strong); }
.vm-page .vm-gallery__item.is-active { border-color: var(--vm-ink); }
.vm-page .vm-gallery__item img { width: 100%; height: 100%; object-fit: contain; }

/* La vignette qui porte la simulation est signalée : c'est la seule où le
   cadre de zone et le logo s'affichent. */
.vm-page .vm-gallery__tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--vm-accent); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; text-align: center;
  padding: 2px 0;
}

/* ---------------------------------------------------------------- Popup */

/* La popup est un enfant de .vm-page (pour hériter des variables) mais se
   place par rapport à la fenêtre : position:fixed, au-dessus du header sticky
   du thème, qui monte à z-index 20. */
.vm-page .vm-modal {
  position: fixed; inset: 0;
  /* Le header sticky du thème monte à 1021 (échelle Bootstrap) : rester
     en dessous ferait passer la barre de navigation par-dessus la popup. */
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.vm-page .vm-modal[hidden] { display: none; }

.vm-page .vm-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(22, 24, 29, .72);
}

.vm-page .vm-modal__panel {
  position: relative;
  display: flex; flex-direction: column;
  width: min(920px, 100%);
  max-height: 100%;
  background: var(--vm-surface);
  border-radius: 16px;
  overflow: hidden;
}

.vm-page .vm-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--vm-line);
}
.vm-page .vm-modal__head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.vm-page .vm-modal__sub { margin: 4px 0 0; font-size: 14px; color: var(--vm-muted); }
.vm-page .vm-modal__close {
  background: none; border: 0;
  font-size: 30px; line-height: 1;
  color: var(--vm-muted); cursor: pointer;
  padding: 0 4px;
}
.vm-page .vm-modal__close:hover { color: var(--vm-ink); }

/* La scène garde un carré : les zones sont exprimées en % de la photo, il faut
   donc que la photo occupe toujours le même rapport, zoom ou pas. */
.vm-page .vm-modal__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  max-height: 58vh;
  margin: 16px auto 0;
  width: min(58vh, 100%);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 12px;
  overflow: hidden;
}
.vm-page .vm-modal__stage.is-dropping { border-color: var(--vm-accent); background: var(--vm-accent-soft); }

/* Porte le zoom. La photo ET la zone sont dedans : elles grandissent ensemble,
   donc les coordonnées en % restent vraies et le calcul du glisser est
   inchangé (getBoundingClientRect donne déjà la taille zoomée). */
.vm-page .vm-stage__inner {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  /* ⚠️ PAS de `transition` sur transform ici. La popup démarre en
     display:none : une transition lancée dans cet état reste bloquée en
     « running », et la valeur calculée du transform reste figée à l'identité
     — le zoom ne s'appliquait plus du tout après le premier affichage.
     L'animation était décorative, le zoom est fonctionnel : il passe d'abord. */
}

/* Dépôt du logo, dans la popup : le geste est juste sous l'aperçu qu'il
   modifie, plutôt qu'à l'autre bout de la page. */
.vm-page .vm-modal__logo {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 20px 0;
}
.vm-page .vm-modal__logo .vm-drop { padding: 16px; }

.vm-page .vm-modal__tools {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px 0;
}

.vm-page .vm-modal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px 20px;
}
.vm-page .vm-btn--compact { padding: 12px 20px; font-size: 15px; }

/* Conteneur de portage : il ne sert qu'à porter les variables de .vm-page,
   il ne doit rien occuper ni contraindre. */
.vm-page.vm-portal { max-width: none; margin: 0; padding: 0; }

/* Empêche le fond de défiler derrière la popup. */
body.vm-modal-open { overflow: hidden; }

@media (max-width: 767px) {
  .vm-page .vm-modal { padding: 0; }
  .vm-page .vm-modal__panel { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .vm-page .vm-modal__stage { max-height: 46vh; width: min(46vh, 100%); }
}

/* ---------------------------------------------------------------- Barre d'outils */

.vm-page .vm-tools {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 12px;
  padding: 12px 16px;
}
.vm-page .vm-tools__size { display: flex; align-items: center; gap: 10px; font-size: 14px; flex: 1 1 200px; }
.vm-page .vm-tools__size > span { color: var(--vm-muted); }
.vm-page .vm-tools__size input[type="range"] { flex: 1; accent-color: var(--vm-ink); }
.vm-page .vm-tools__zone { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin: 0; }
.vm-page .vm-tools__zone input { accent-color: var(--vm-ink); }

.vm-page .vm-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--vm-muted); }
.vm-page .vm-note--tight { font-size: 13px; }
.vm-page .vm-note--warn {
  color: var(--vm-out);
  background: var(--vm-accent-soft);
  border-radius: 8px;
  padding: 10px 12px;
}

/* ---------------------------------------------------------------- Colonne config */

.vm-page .vm-config-col { display: flex; flex-direction: column; gap: 28px; }

.vm-page .vm-head { display: flex; flex-direction: column; gap: 10px; }
.vm-page .vm-head__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--vm-muted); }
.vm-page .vm-stock { font-weight: 600; color: var(--vm-success); }
.vm-page .vm-stock::before { content: "● "; }
.vm-page .vm-stock.is-out { color: var(--vm-out); }

.vm-page .vm-title {
  margin: 0;
  font-size: 32px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em;
  text-wrap: balance;
}
.vm-page .vm-desc { margin: 0; font-size: 16px; line-height: 1.55; color: var(--vm-text); }
.vm-page .vm-desc p { margin: 0 0 8px; }
.vm-page .vm-desc p:last-child { margin-bottom: 0; }

/* --- Description longue du catalogue ---
   Le HTML vient du BO : il peut contenir n'importe quelle balise de mise en
   forme. On borne donc ce qui déborderait (tableaux, images) plutôt que de
   parier sur un contenu propre. */
.vm-page .vm-longdesc {
  margin-top: 56px;
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 16px;
  padding: 28px;
}
.vm-page .vm-longdesc h2 { margin: 0 0 16px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.vm-page .vm-longdesc__body { font-size: 15px; line-height: 1.65; color: var(--vm-text); }
.vm-page .vm-longdesc__body > :first-child { margin-top: 0; }
.vm-page .vm-longdesc__body > :last-child { margin-bottom: 0; }
.vm-page .vm-longdesc__body p { margin: 0 0 12px; }
.vm-page .vm-longdesc__body ul,
.vm-page .vm-longdesc__body ol { margin: 0 0 12px; padding-left: 22px; }
.vm-page .vm-longdesc__body li { margin-bottom: 4px; }
.vm-page .vm-longdesc__body h2,
.vm-page .vm-longdesc__body h3,
.vm-page .vm-longdesc__body h4 { font-size: 17px; font-weight: 700; margin: 20px 0 8px; }
.vm-page .vm-longdesc__body img { max-width: 100%; height: auto; border-radius: 8px; }
.vm-page .vm-longdesc__body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.vm-page .vm-longdesc__body td,
.vm-page .vm-longdesc__body th { border: 1px solid var(--vm-line); padding: 6px 10px; text-align: left; }

.vm-page .vm-step { display: flex; flex-direction: column; gap: 10px; }
.vm-page .vm-step__label { font-size: 14px; font-weight: 700; }
.vm-page .vm-step__label em { font-weight: 400; font-style: normal; color: var(--vm-muted); }

/* --- Coloris --- */

.vm-page .vm-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.vm-page .vm-swatch {
  width: 40px; height: 40px; padding: 0;
  border-radius: 999px;
  background: var(--vm-swatch, #ccc);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--vm-border-strong);
  cursor: pointer;
}
.vm-page .vm-swatch.is-active { box-shadow: 0 0 0 2px var(--vm-ink); }

/* --- Dépôt du logo --- */

.vm-page .vm-drop {
  border: 1.5px dashed var(--vm-border-strong);
  background: var(--vm-surface);
  border-radius: 12px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; text-align: center;
  cursor: pointer;
}
.vm-page .vm-drop.is-dropping { border-color: var(--vm-accent); background: var(--vm-accent-soft); }
.vm-page .vm-drop strong { font-size: 16px; }
.vm-page .vm-drop span { font-size: 14px; color: var(--vm-muted); }

.vm-page .vm-logofile {
  display: flex; align-items: center; gap: 14px;
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 12px;
  padding: 12px;
}
.vm-page .vm-logofile__thumb {
  width: 64px; height: 48px; flex-shrink: 0;
  border-radius: 8px; background: var(--vm-bg);
  display: flex; align-items: center; justify-content: center;
}
.vm-page .vm-logofile__thumb img { max-width: 52px; max-height: 36px; }
.vm-page .vm-logofile__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vm-page .vm-logofile__meta strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-page .vm-logofile__meta small { font-size: 13px; color: var(--vm-muted); }

.vm-page .vm-error { margin: 0; font-size: 14px; font-weight: 600; color: var(--vm-error); }

/* --- Techniques --- */

.vm-page .vm-techs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.vm-page .vm-tech {
  text-align: left;
  background: var(--vm-surface);
  border: 1.5px solid var(--vm-border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--vm-ink);
}
.vm-page .vm-tech:hover { border-color: var(--vm-border-strong); }
.vm-page .vm-tech.is-active { border-color: var(--vm-ink); background: var(--vm-bg); }
.vm-page .vm-tech strong { font-size: 15px; }
.vm-page .vm-tech span { font-size: 13px; color: var(--vm-muted); }

.vm-page .vm-modes {
  display: flex; gap: 6px; flex-wrap: wrap;
  background: var(--vm-line);
  border-radius: 10px; padding: 4px;
  align-self: flex-start;
}
.vm-page .vm-mode {
  background: transparent; color: var(--vm-ink);
  border: 0; border-radius: 7px;
  padding: 8px 14px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.vm-page .vm-mode.is-active { background: var(--vm-surface); }

/* --- Quantité --- */

.vm-page .vm-qty { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }

/* Pas de quantité. Les flèches natives font ~10 px de large : inutilisables à
   la souris, impossibles au doigt. On les supprime et on pose deux cibles de
   44 px, la taille minimale recommandée pour le tactile. */
.vm-page .vm-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--vm-border-strong);
  border-radius: 10px;
  background: var(--vm-surface);
  overflow: hidden;
}
.vm-page .vm-stepper:focus-within { border-color: var(--vm-ink); }

.vm-page .vm-stepper__btn {
  width: 44px;
  border: 0;
  background: var(--vm-bg);
  color: var(--vm-ink);
  font-size: 20px; font-weight: 700; line-height: 1;
  cursor: pointer;
  /* Le maintien du doigt doit répéter le pas, pas sélectionner le « + »
     ni déclencher le zoom au double-tap. */
  user-select: none;
  touch-action: manipulation;
}
.vm-page .vm-stepper__btn:hover { background: var(--vm-line); }
.vm-page .vm-stepper__btn:active { background: var(--vm-border); }

.vm-page .vm-stepper input[type="number"] {
  width: 84px;
  padding: 12px 6px;
  border: 0;
  border-left: 1px solid var(--vm-border);
  border-right: 1px solid var(--vm-border);
  font-size: 17px; font-weight: 700;
  text-align: center;
  background: var(--vm-surface);
  /* Masque les flèches natives, remplacées par les deux boutons. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.vm-page .vm-stepper input[type="number"]::-webkit-outer-spin-button,
.vm-page .vm-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vm-page .vm-stepper input[type="number"]:focus { outline: none; }

.vm-page .vm-tier {
  background: var(--vm-surface);
  color: var(--vm-ink);
  border: 1px solid var(--vm-border-strong);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.vm-page .vm-tier.is-active { background: var(--vm-ink); color: #fff; border-color: var(--vm-ink); }
.vm-page .vm-tier strong { font-size: 14px; font-weight: 700; }
.vm-page .vm-tier span { font-size: 12px; }

/* --- Bloc prix --- */

.vm-page .vm-price {
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.vm-page .vm-price__grid {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px 16px; font-size: 15px;
}
.vm-page .vm-price__grid > span { color: var(--vm-muted); }
.vm-page .vm-price__grid em { font-style: normal; font-size: 13px; opacity: .8; }
.vm-page .vm-price__grid > strong { font-weight: 600; text-align: right; }
.vm-page .vm-price__totallabel { color: var(--vm-ink) !important; font-weight: 700; padding-top: 10px; border-top: 1px solid var(--vm-line); }
.vm-page .vm-price__total { font-size: 20px; font-weight: 800; padding-top: 10px; border-top: 1px solid var(--vm-line); }
.vm-page .vm-price small { font-size: 13px; color: var(--vm-muted); }

.vm-page .vm-added {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--vm-success-soft);
  border-radius: 10px; padding: 12px 14px;
  font-size: 15px; flex-wrap: wrap;
  color: var(--vm-success);
}
.vm-page .vm-added a { color: var(--vm-success); text-decoration: underline; }
.vm-page .vm-added__links { display: flex; gap: 14px; }

.vm-page .vm-todo {
  background: var(--vm-accent-soft);
  border-radius: 12px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.vm-page .vm-todo strong { font-size: 16px; color: var(--vm-out); }
.vm-page .vm-todo span { font-size: 15px; line-height: 1.5; color: var(--vm-text); }

/* ---------------------------------------------------------------- Boutons */

.vm-page .vm-btn {
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.vm-page .vm-btn--primary {
  background: var(--vm-ink); color: #fff;
  padding: 16px; font-size: 16px;
  border: 0;
}
.vm-page .vm-btn--primary:hover { background: var(--vm-ink-hover); }
.vm-page .vm-btn--primary:disabled { background: var(--vm-border-strong); cursor: not-allowed; }
.vm-page .vm-btn--ghost {
  background: transparent; color: var(--vm-ink);
  border: 1px solid var(--vm-border-strong);
  border-radius: 8px;
  padding: 8px 12px; font-size: 14px; font-weight: 600;
}
.vm-page .vm-btn--ghost:hover { border-color: var(--vm-ink); }

.vm-page .vm-link {
  align-self: flex-start;
  background: none; border: 0; padding: 0;
  font-size: 14px; font-weight: 600;
  color: var(--vm-ink);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.vm-page .vm-link--muted { color: var(--vm-muted); font-weight: 400; padding: 8px; }

/* ---------------------------------------------------------------- Infos marquage */

.vm-page .vm-infos {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 32px;
  align-items: start;
}
.vm-page .vm-infos__table { grid-column: span 2; min-width: 0; }
.vm-page .vm-infos h2 { margin: 0 0 16px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }

.vm-page .vm-table {
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  overflow-x: auto;
}
.vm-page .vm-table__head,
.vm-page .vm-table__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr 1fr;
  min-width: 640px;
  font-size: 14px;
}
.vm-page .vm-table__head > * {
  padding: 12px 16px; font-weight: 700;
  color: var(--vm-muted);
  border-bottom: 1px solid var(--vm-border);
}
.vm-page .vm-table__row > * { padding: 14px 16px; border-bottom: 1px solid var(--vm-line); }
.vm-page .vm-table__row:last-child > * { border-bottom: 0; }

.vm-page .vm-infos__files ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.vm-page .vm-infos__files li { font-size: 15px; line-height: 1.5; color: var(--vm-text); }
.vm-page .vm-infos__files strong { color: var(--vm-ink); }

/* ---------------------------------------------------------------- Demande de devis */

.vm-page--narrow { max-width: 720px; }

.vm-page .vm-h1 {
  margin: 10px 0 28px;
  font-size: 40px; font-weight: 800; letter-spacing: -.02em;
  text-wrap: balance;
}

.vm-page .vm-empty {
  background: var(--vm-surface);
  border: 1px dashed var(--vm-border-strong);
  border-radius: 16px;
  padding: 56px 24px;
  text-align: center;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.vm-page .vm-empty strong { font-size: 20px; }
.vm-page .vm-empty span { font-size: 15px; color: var(--vm-muted); }

.vm-page .vm-quote {
  display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start;
}
.vm-page .vm-quote__items { flex: 1 1 440px; display: flex; flex-direction: column; gap: 12px; }
.vm-page .vm-quote__form {
  flex: 1 1 380px; max-width: 520px;
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 16px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.vm-page .vm-quote__form h2 { margin: 0; font-size: 22px; font-weight: 800; }

.vm-page .vm-quote__total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 4px;
  border-top: 1px solid var(--vm-border-strong);
  font-size: 17px; font-weight: 600;
}
.vm-page .vm-quote__total strong { font-size: 22px; font-weight: 800; }

/* --- Une ligne de la demande --- */

.vm-page .vm-item {
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  padding: 14px;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.vm-page .vm-item__preview {
  position: relative;
  width: 104px; height: 104px; flex-shrink: 0;
  background: var(--vm-surface);
  border: 1px solid var(--vm-line);
  border-radius: 10px;
  overflow: hidden;
}
.vm-page .vm-item__preview > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}
/* La zone n'est pas dessinée ici : sur 104 px le pointillé masquerait le
   marquage qu'il est censé situer. Seul le logo est rendu, à sa place. */
.vm-page .vm-item__preview .vm-zone { border: 0; }

.vm-page .vm-item__body { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vm-page .vm-item__body strong { font-size: 16px; line-height: 1.3; }
.vm-page .vm-item__body > span { font-size: 14px; color: var(--vm-text); }
.vm-page .vm-item__price { font-weight: 700; color: var(--vm-ink) !important; }
.vm-page .vm-item__actions { display: flex; gap: 12px; align-items: center; }
.vm-page .vm-item__actions .vm-btn--ghost { text-decoration: none; }

/* --- Formulaire --- */

.vm-page .vm-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.vm-page .vm-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; margin: 0; }
.vm-page .vm-field input,
.vm-page .vm-field textarea {
  padding: 11px 12px;
  border: 1px solid var(--vm-border-strong);
  border-radius: 9px;
  font-size: 15px; font-weight: 400;
  background: var(--vm-surface);
  font-family: inherit;
}
.vm-page .vm-field input:focus,
.vm-page .vm-field textarea:focus { border-color: var(--vm-ink); outline: none; }
.vm-page .vm-field input.is-invalid { border-color: var(--vm-error); }
.vm-page .vm-field textarea { resize: vertical; }

.vm-page .vm-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.45; font-weight: 400;
  cursor: pointer; margin: 0;
}
.vm-page .vm-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--vm-ink); flex-shrink: 0; }

.vm-page .vm-field select {
  padding: 11px 12px;
  border: 1px solid var(--vm-border-strong);
  border-radius: 9px;
  font-size: 15px; font-weight: 400;
  background: var(--vm-surface);
  font-family: inherit;
}
.vm-page .vm-field select:focus { border-color: var(--vm-ink); outline: none; }
.vm-page .vm-field--full { margin-top: 14px; }

.vm-page .vm-error--block {
  background: #fdecea;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.vm-page .vm-error__list { margin: 0; padding-left: 20px; font-size: 15px; }

/* --- Demande d'accès --- */

.vm-page .vm-hero__ask { align-self: center; }

.vm-page .vm-access__cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 40px;
  padding: 24px 26px;
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 14px;
}
.vm-page .vm-access__cta > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.vm-page .vm-access__cta strong { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.vm-page .vm-access__cta span { font-size: 15px; color: var(--vm-muted); }
.vm-page .vm-access__cta-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vm-page .vm-access__cta-actions .vm-btn { text-decoration: none; }

.vm-page .vm-access__actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 20px;
}

/* Champ piège anti-robot : sorti de l'écran plutôt que `display:none`, pour
   qu'un robot qui ignore les champs masqués le remplisse quand même. */
.vm-page .vm-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Confirmation --- */

.vm-page .vm-done__ref { font-size: 14px; color: var(--vm-muted); }
.vm-page .vm-lead { margin: 0 0 24px; font-size: 18px; line-height: 1.55; color: var(--vm-text); }
.vm-page .vm-steps {
  list-style: none; margin: 0 0 24px; padding: 20px;
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 15px;
}
.vm-page .vm-steps li { display: flex; gap: 14px; align-items: baseline; }
.vm-page .vm-steps .vm-mono { color: var(--vm-accent); font-weight: 500; }
.vm-page .vm-done__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.vm-page .vm-done__actions .vm-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------- Accueil */

.vm-page .vm-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 40px;
  align-items: center;
  padding: 16px 0 8px;
}
.vm-page .vm-hero__text { display: flex; flex-direction: column; gap: 22px; }
.vm-page .vm-hero__kicker { font-size: 13px; color: var(--vm-muted); letter-spacing: .04em; }
.vm-page .vm-hero__title {
  margin: 0;
  /* clamp : le titre reste lisible du mobile au grand écran sans media query */
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.02; font-weight: 800; letter-spacing: -.025em;
  text-wrap: balance;
}
.vm-page .vm-hero__lead {
  margin: 0; max-width: 520px;
  font-size: 18px; line-height: 1.55; color: var(--vm-text);
  text-wrap: pretty;
}
.vm-page .vm-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.vm-page .vm-hero__actions .vm-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* Mosaïque : une grande vignette à gauche sur deux rangées, deux à droite.
   Le fond gris fait les séparations, chaque tuile est blanche. */
.vm-page .vm-hero__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  aspect-ratio: 16 / 10;
  background: var(--vm-border);
  border: 1px solid var(--vm-border);
  border-radius: 18px;
  overflow: hidden;
}
.vm-page .vm-hero__tile {
  background: var(--vm-surface);
  display: flex; align-items: center; justify-content: center;
}
.vm-page .vm-hero__tile--tall { grid-row: span 2; }
.vm-page .vm-hero__tile img { width: 84%; height: 84%; object-fit: contain; }

/* --- Les 4 étapes --- */

.vm-page .vm-steps-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--vm-border-strong);
}
.vm-page .vm-stepcard {
  padding: 24px 20px 24px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.vm-page .vm-stepcard__n { font-size: 28px; font-weight: 500; color: var(--vm-accent); }
.vm-page .vm-stepcard strong { font-size: 17px; }
.vm-page .vm-stepcard > span:last-child { font-size: 15px; line-height: 1.5; color: var(--vm-muted); text-wrap: pretty; }

/* --- Sections --- */

.vm-page .vm-section { margin-top: 56px; }
.vm-page .vm-section__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.vm-page .vm-section__head h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }

/* --- Catégories --- */

.vm-page .vm-catgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.vm-page .vm-catcard {
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--vm-ink);
}
.vm-page .vm-catcard:hover { border-color: var(--vm-ink); color: var(--vm-ink); }
.vm-page .vm-catcard__img {
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
}
.vm-page .vm-catcard__img img { width: 78%; height: 78%; object-fit: contain; }
.vm-page .vm-catcard__foot {
  padding: 16px 18px;
  border-top: 1px solid var(--vm-line);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.vm-page .vm-catcard__foot strong { font-size: 17px; }
.vm-page .vm-catcard__foot span { font-size: 14px; color: var(--vm-muted); }

/* --- Techniques --- */

.vm-page .vm-techgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.vm-page .vm-techcard {
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.vm-page .vm-techcard strong { font-size: 18px; }
.vm-page .vm-techcard__note { font-size: 15px; line-height: 1.5; color: var(--vm-text); text-wrap: pretty; }
.vm-page .vm-techcard__specs {
  display: grid; grid-template-columns: auto 1fr;
  gap: 6px 14px; font-size: 14px;
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--vm-line);
}
.vm-page .vm-techcard__specs > span:nth-child(odd) { color: var(--vm-muted); }

/* --- Contact --- */

.vm-page .vm-contact {
  margin-top: 56px;
  background: var(--vm-ink); color: #fff;
  border-radius: 16px;
  padding: 24px 28px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
}
.vm-page .vm-contact strong { display: block; font-size: 18px; }
.vm-page .vm-contact > div > span { font-size: 15px; color: #C9C6BE; }
.vm-page .vm-contact__coords { display: flex; gap: 20px; flex-wrap: wrap; font-size: 16px; font-weight: 600; }
.vm-page .vm-contact__coords a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.vm-page .vm-btn--outline {
  background: transparent; color: var(--vm-ink);
  border: 1.5px solid var(--vm-ink);
  padding: 13px 20px; font-size: 15px; font-weight: 600;
  border-radius: 10px;
}
.vm-page .vm-btn--outline:hover { background: var(--vm-surface); color: var(--vm-ink); }

@media (max-width: 767px) {
  .vm-page .vm-hero { gap: 28px; }
  .vm-page .vm-stepcard { padding-right: 0; }
  .vm-page .vm-section__head h2 { font-size: 24px; }
}

/* ---------------------------------------------------------------- Catalogue */

/* Sommaire des sous-catégories, en tête de page. */
.vm-page .vm-cats {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 8px;
}
.vm-page .vm-cats__link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--vm-border);
  border-radius: 999px;
  background: var(--vm-surface);
  color: var(--vm-ink);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.vm-page .vm-cats__link:hover {
  border-color: var(--vm-ink);
  color: var(--vm-ink);
}
.vm-page .vm-cats__n {
  font-size: 12px; font-weight: 700;
  color: var(--vm-muted);
  background: var(--vm-bg);
  border-radius: 999px;
  padding: 1px 7px;
}

/* Bandeau de sous-catégorie. `scroll-margin-top` : l'en-tête du thème est
   collant, sans cette marge l'ancre amène le bandeau dessous. */
.vm-page .vm-section { scroll-margin-top: 90px; }

.vm-page .vm-section__banner {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--vm-ink);
  color: #fff;
}
.vm-page .vm-section__banner h2 {
  margin: 0;
  font-size: 22px; font-weight: 800; letter-spacing: -.01em;
  color: #fff;
}
.vm-page .vm-section__n { font-size: 14px; color: rgba(255, 255, 255, .72); }

.vm-page .vm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.vm-page .vm-card {
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: var(--vm-ink);
}
.vm-page .vm-card:hover { border-color: var(--vm-ink); color: var(--vm-ink); }

.vm-page .vm-card__img {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.vm-page .vm-card__img img { width: 86%; height: 86%; object-fit: contain; }
.vm-page .vm-card__flag {
  position: absolute; top: 12px; left: 12px;
  background: var(--vm-bg);
  border: 1px solid var(--vm-border);
  font-size: 12px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
}

.vm-page .vm-card__body {
  padding: 16px;
  border-top: 1px solid var(--vm-line);
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.vm-page .vm-card__ref { font-size: 12px; color: var(--vm-muted); }
.vm-page .vm-card__body strong { font-size: 16px; line-height: 1.3; }
.vm-page .vm-card__techs { font-size: 13px; color: var(--vm-text); }
/* Produit repris de la catégorie mais dont le marquage n'est pas renseigné :
   il reste visible, sinon impossible de repérer ce qu'il reste à faire. */
.vm-page .vm-card__techs--todo { color: var(--vm-out); font-weight: 600; }
.vm-page .vm-count { margin: -16px 0 20px; }
.vm-page .vm-card__foot {
  margin-top: auto; padding-top: 8px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;
  font-size: 14px; color: var(--vm-muted);
}
.vm-page .vm-card__foot strong { font-size: 15px; color: var(--vm-ink); }

/* ---------------------------------------------------------------- Espace agence */

.vm-page .vm-account__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.vm-page .vm-account__head .vm-h1 { margin: 6px 0 0; }
.vm-page .vm-account__head .vm-mono { font-size: 13px; color: var(--vm-muted); }
.vm-page .vm-account__head .vm-btn { text-decoration: none; }

.vm-page .vm-quotes { display: flex; flex-direction: column; gap: 12px; }

.vm-page .vm-quoterow {
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  overflow: hidden;
}
.vm-page .vm-quoterow.is-open { border-color: var(--vm-border-strong); }

.vm-page .vm-quoterow__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; align-items: center;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--vm-ink);
}
.vm-page .vm-quoterow__head:hover { color: var(--vm-ink); background: var(--vm-bg); }
.vm-page .vm-quoterow__ref,
.vm-page .vm-quoterow__client { display: flex; flex-direction: column; gap: 2px; }
.vm-page .vm-quoterow__ref small,
.vm-page .vm-quoterow__client small { font-size: 13px; color: var(--vm-muted); }
.vm-page .vm-quoterow__toggle {
  justify-self: end;
  font-size: 14px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.vm-page .vm-badge {
  justify-self: start;
  font-size: 13px; font-weight: 700;
  padding: 6px 10px; border-radius: 999px;
  white-space: nowrap;
}

.vm-page .vm-quoterow__body {
  border-top: 1px solid var(--vm-line);
  padding: 20px;
  display: flex; flex-direction: column; gap: 20px;
  background: #FCFBF9;
}
.vm-page .vm-quoterow__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.vm-page .vm-item--compact { padding: 12px; }
.vm-page .vm-item--compact .vm-item__body strong { font-size: 15px; }

/* --- Bloc BAT --- */

.vm-page .vm-bat {
  background: var(--vm-accent-soft);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.vm-page .vm-bat > strong { font-size: 15px; color: #7A3210; }
.vm-page .vm-bat__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.vm-page .vm-bat__actions form { margin: 0; }
.vm-page .vm-bat__change { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.vm-page .vm-bat__change textarea {
  padding: 11px 12px;
  border: 1px solid var(--vm-border-strong);
  border-radius: 9px;
  font-size: 15px; font-family: inherit;
  background: var(--vm-surface);
  resize: vertical;
}
.vm-page .vm-bat__change textarea:focus { border-color: var(--vm-ink); outline: none; }
.vm-page .vm-bat__change .vm-btn { align-self: flex-start; }

/* ---------------------------------------------------------------- Mobile */

@media (max-width: 767px) {
  .vm-page { padding: 20px 16px 48px; }
  .vm-page .vm-preview-col { position: static; }
  .vm-page .vm-title { font-size: 26px; }
  .vm-page .vm-infos__table { grid-column: span 1; }
}