/* =========================================================================
   varso.fr — site styles
   On reprend les tokens du DS et on ajoute uniquement ce qui structure
   le scroll, les états d'inversion, et les comportements custom (curseur,
   reveal au scroll, formulaires).
   ========================================================================= */

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--varso-orange); color: var(--varso-white); }

/* ----- Thème ------------------------------------------------------------ */
/* Light = défaut (déjà défini dans colors_and_type.css).
   Dark = inversion stricte : noir devient blanc, et inversement. */
body[data-theme="dark"] {
  --bg:           var(--varso-black);
  --bg-elev:      #232323;
  --bg-inverse:   var(--varso-white);
  --fg:           var(--varso-white);
  --fg-muted:     #b5b1a7;
  --fg-faint:     #807d76;
  --fg-on-dark:   var(--varso-white);
  --border:       #3a3a3a;
  --border-strong:var(--varso-white);
  --divider:      #2c2c2c;
  --varso-ink-15: #2c2c2c;
  --varso-ink-08: #232323;
  --varso-ink-30: #5a5a5a;
  --varso-ink-50: #807d76;
  --varso-ink-70: #b5b1a7;
}

/* ----- Layout containers ------------------------------------------------ */
.v-page { min-height: 100vh; display: flex; flex-direction: column; }

/* Strict one-fold (home) : 100vh, scroll uniquement dans la liste projets */
.v-page--strict { height: 100vh; min-height: 0; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.v-page--strict header.v-header { position: static; }
.v-page--strict .v-hero,
.v-page--strict .v-proj-hero--split { min-height: 0; padding-top: 0; height: 100%; }
.v-page--strict .v-list ol { overflow-y: auto; min-height: 0; flex: 0 1 auto; }
.v-page--strict .v-list-col,
.v-page--strict .v-proj-gal-col { min-height: 0; overflow: hidden; }

/* "En savoir plus" déplié → on garde la page strict (footer toujours visible)
   et c'est uniquement la colonne gauche qui scroll en interne. */
.v-page--strict .v-proj-side {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--varso-ink-15) transparent;
}
.v-page--strict .v-proj-side::-webkit-scrollbar { width: 6px; }
.v-page--strict .v-proj-side::-webkit-scrollbar-thumb { background: var(--varso-ink-15); }
.v-page--strict .v-proj-side::-webkit-scrollbar-track { background: transparent; }
/* Spacers above/below the list to vertically center it on the page */
.v-page--strict .v-list-col::before,
.v-page--strict .v-list-col::after {
  content: ""; flex: 1 1 0; min-height: 0;
}
.v-page--strict .v-hero-side { padding-top: 8px; padding-bottom: 16px; }

@media (max-width: 980px) {
  /* Mobile : on lâche le strict one-fold, sinon ça casse */
  .v-page--strict { height: auto; overflow: visible; }
  .v-page--strict header.v-header { position: fixed; }
  .v-page--strict .v-hero,
  .v-page--strict .v-proj-hero--split { padding-top: 88px; min-height: 100vh; height: auto; }
  .v-page--strict .v-list ol { overflow: visible; }
}

.v-pad { padding-left: 40px; padding-right: 40px; }
@media (max-width: 720px) { .v-pad { padding-left: 20px; padding-right: 20px; } }

/* ----- Liens éditoriaux -------------------------------------------------- */
.lnk {
  color: inherit;
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  transition: color var(--dur-1) var(--ease-out);
  cursor: pointer;
  display: inline-block;
}
.lnk:hover { color: var(--varso-orange); }
.lnk--underline { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lnk--underline:hover { text-decoration-color: var(--varso-orange); }

/* Hover : ligne orange qui glisse de la gauche */
.lnk--slide { position: relative; padding-left: 0; transition: padding-left var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out); }
.lnk--slide::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 2px; background: var(--varso-orange);
  transition: width var(--dur-2) var(--ease-out);
}
.lnk--slide:hover { padding-left: 28px; color: var(--varso-orange); }
.lnk--slide:hover::before { width: 20px; }

/* ----- CTA / bouton ----------------------------------------------------- */
.vr-cta {
  font-family: inherit; font-size: 14px; font-weight: 400;
  padding: 12px 20px; border-radius: 0;
  border: 1px solid var(--fg);
  background: var(--fg); color: var(--bg);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  display: inline-flex; align-items: center; gap: 10px;
}
.vr-cta:hover { background: var(--bg); color: var(--fg); }
.vr-cta:focus-visible { outline: 2px solid var(--varso-orange); outline-offset: 2px; }
.vr-cta--ghost { background: transparent; color: var(--fg); }
.vr-cta--ghost:hover { background: var(--fg); color: var(--bg); }

/* ----- Eyebrow guillemets ----------------------------------------------- */
.eyebrow-q { font-size: 14px; font-weight: 400; letter-spacing: -0.005em; color: var(--fg); }
.eyebrow-q .q { color: var(--fg-faint); }
.eyebrow-q .dash { color: var(--fg-faint); margin: 0 6px; }
.eyebrow-q .dot { color: var(--varso-orange); margin: 0 6px; }

/* ----- Hairline rules --------------------------------------------------- */
.hair { border: 0; border-top: 1px solid var(--border); margin: 0; }
.hair-strong { border: 0; border-top: 1px solid var(--fg); margin: 0; }
.rule-step { display: block; height: 2px; background: var(--fg); border: 0; }

/* ----- Reveal au scroll -------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d-1 { transition-delay: 60ms; }
.reveal-d-2 { transition-delay: 120ms; }
.reveal-d-3 { transition-delay: 180ms; }
.reveal-d-4 { transition-delay: 240ms; }

/* ----- Header inversion (sur fond sombre) ------------------------------- */
header.v-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--fg);
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
@media (max-width: 720px) { header.v-header { padding: 14px 20px; } }
header.v-header[data-on-dark="true"] { color: var(--varso-white); }
header.v-header[data-on-dark="true"] .v-wordmark { filter: invert(1); }
body[data-theme="dark"] header.v-header[data-on-dark="true"] .v-wordmark { filter: none; }
body[data-theme="dark"] .v-wordmark { filter: invert(1); }

/* --- Marge typographique au scroll ---------------------------------------
   Pas de "fond" plein : juste un dégradé court de la couleur de page vers
   transparent (96 px). Le texte qui passe sous le header se fond dans la
   page comme dans la marge haute d'un imprimé. Aucun shadow, aucun blur.
   S'applique sur les modes "fade" et "autohide" (quand le header est visible). */
header.v-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 96px;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    color-mix(in oklab, var(--bg) 80%, transparent) 45%,
    color-mix(in oklab, var(--bg) 0%, transparent) 100%
  );
}
header.v-header[data-scrolled="true"][data-scroll-mode="fade"]::before,
header.v-header[data-scrolled="true"][data-scroll-mode="autohide"]::before { opacity: 1; }
/* Au-dessus d'une section sombre, le fade prend la couleur d'ancrage */
header.v-header[data-on-dark="true"]::before {
  background: linear-gradient(
    to bottom,
    var(--varso-black) 0%,
    color-mix(in oklab, var(--varso-black) 80%, transparent) 45%,
    color-mix(in oklab, var(--varso-black) 0%, transparent) 100%
  );
}

/* --- Autohide : translate vers le haut quand on scrolle vers le bas ----- */
header.v-header[data-scroll-mode="autohide"][data-hidden="true"] {
  transform: translateY(-100%);
}

.v-wordmark { height: 16px; display: block; transition: filter var(--dur-2) var(--ease-out); }

/* ----- Hero ------------------------------------------------------------- */
.v-hero {
  padding-top: 96px;
  min-height: 100vh;
  display: grid;
  gap: 0;
}
.v-hero[data-layout="split"]    { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.v-hero[data-layout="centered"] { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.v-hero[data-layout="asym"]     { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

@media (max-width: 980px) {
  .v-hero, .v-hero[data-layout] { grid-template-columns: 1fr; grid-template-rows: auto auto; }
}

.v-hero-side { padding: 20px 56px 24px 24px; display: flex; flex-direction: column; gap: 24px; min-height: 0; }
.v-hero[data-layout="centered"] .v-hero-side { align-items: center; text-align: center; max-width: 1200px; margin: 0 auto; }
.v-hero[data-layout="centered"] .v-hero-side .v-statement { max-width: 22ch; margin: 0 auto; }
.v-hero[data-layout="centered"] .v-statement-sub { max-width: 56ch; margin: 0 auto; }
.v-hero[data-layout="centered"] .v-citystrip { justify-content: center; }
.v-hero[data-layout="centered"] .v-contactline { justify-content: center; flex-wrap: wrap; }

.v-statement {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  max-width: 14ch;
  text-wrap: pretty;
}
.v-statement .blk2 {
  display: block;
  margin-top: 0.55em;
  font-size: clamp(17px, 1.8vw, 24px);
  letter-spacing: -0.012em;
  line-height: 1.18;
  color: var(--fg-muted);
  max-width: 24ch;
}
.v-statement-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 40ch;
}

.v-citystrip {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  font-size: 13px; font-weight: 400; color: var(--fg);
  padding-top: 8px;
}
.v-citystrip .city { display: inline-flex; align-items: baseline; gap: 8px; }
.v-citystrip .time { font-family: var(--font-mono); color: var(--fg-muted); letter-spacing: -0.01em; }
.v-citystrip .time .colon { color: var(--varso-orange); }
.v-citystrip .sep { color: var(--fg-faint); }

.v-contactline {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-top: 8px;
  font-size: 14px;
}
.v-contactline .lo { color: var(--fg-faint); }

/* ----- Project list (right column) -------------------------------------- */
.v-list-col {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
}
@media (max-width: 980px) { .v-list-col { border-top: 1px solid var(--border); } }

.v-hero[data-layout="centered"] .v-list-col { border-left: 0; border-top: 1px solid var(--border); }

.v-list-head {
  padding: 14px 24px 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: flex-end; gap: 24px;
}

.v-list ol { list-style: none; margin: 0; padding: 0; flex: 1; }
.v-list-row {
  width: 100%; text-align: left;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--border);
  padding: 10px 24px 10px 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline; gap: 18px;
  font-family: inherit;
  position: relative;
  transition: padding-left var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.v-list-row:hover { padding-left: 14px; }
.v-list-row:hover .row-title { color: var(--fg); }
.v-list-row:hover .row-cat { color: var(--fg-faint); }
.v-list-row:hover .row-glyph { opacity: 1; transform: translateX(0); color: var(--varso-orange); }

.row-title { font-size: 14px; font-weight: 400; letter-spacing: -0.01em; }
.row-cat   { font-size: 13px; color: var(--fg-muted); font-weight: 400; text-align: right; transition: color var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.row-glyph { color: var(--varso-orange); opacity: 0; transform: translateX(-4px); transition: all var(--dur-2) var(--ease-out); display: inline-flex; position: absolute; right: 4px; top: 50%; margin-top: -7px; pointer-events: none; }

/* Scrollbar discreet */
.v-list ol::-webkit-scrollbar { width: 6px; }
.v-list ol::-webkit-scrollbar-thumb { background: var(--varso-ink-15); }
.v-list ol::-webkit-scrollbar-track { background: transparent; }

/* ----- Pagination liste projets ---------------------------------------- */
.v-list-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 24px 14px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  flex: 0 0 auto;
}
.v-pag-btn {
  background: none; border: 0; padding: 6px 0;
  font: inherit; color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out);
}
.v-pag-btn .lbl {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-strong, var(--fg));
}
.v-pag-btn:not(:disabled):hover { color: var(--varso-orange); }
.v-pag-btn:not(:disabled):hover .lbl { text-decoration-color: var(--varso-orange); }
.v-pag-btn:disabled { color: var(--fg-faint); cursor: default; }
.v-pag-btn:disabled .lbl { text-decoration-color: var(--fg-faint); }
.v-pag-idx {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-muted);
}
.v-pag-idx .cur { color: var(--fg); }
.v-pag-idx .sep { color: var(--varso-orange); margin: 0 4px; }

/* ----- Filter menu ------------------------------------------------------ */
.v-filter { position: relative; }
.v-filter-trigger { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; cursor: pointer; }
.v-filter-trigger .lo { color: var(--fg-faint); }
.v-filter-trigger .stairs { color: var(--varso-orange); display: inline-flex; }
.v-filter-trigger .lbl { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.v-filter-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--fg);
  min-width: 260px; z-index: 30; padding: 6px 0;
}
.v-filter-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 18px; font-size: 13px; cursor: pointer;
  color: var(--fg-muted);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.v-filter-item[aria-selected="true"] { color: var(--fg); }
.v-filter-item:hover { background: var(--bg-inverse); color: var(--bg); }
.v-filter-item:hover .stairs { color: var(--varso-orange); }
.v-filter-count { color: var(--fg-faint); margin-left: 8px; font-family: var(--font-mono); font-size: 11px; }

/* ----- Custom cursor on the grid --------------------------------------- */
.v-cursor {
  position: fixed; top: 0; left: 0; z-index: 80; pointer-events: none;
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  color: var(--varso-white);
  background: var(--varso-black);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out);
  mix-blend-mode: difference;
}
.v-cursor.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.v-cursor span { font-family: var(--font-sans); }

/* ----- Services --------------------------------------------------------- */
.v-services {
  padding: 144px 40px 96px;
  border-top: 1px solid var(--border);
}
@media (max-width: 720px) { .v-services { padding: 96px 20px 64px; } }
.v-services-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: end; margin-bottom: 96px; }
@media (max-width: 860px) { .v-services-head { grid-template-columns: 1fr; gap: 24px; } }
.v-services-head h2 {
  font-size: clamp(40px, 5.2vw, 88px);
  line-height: 0.98; letter-spacing: -0.025em; font-weight: 400; margin: 0;
  max-width: 16ch;
}
.v-services-head p { color: var(--fg-muted); max-width: 50ch; margin: 0; font-size: 16px; line-height: 1.5; }

.v-services-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--fg);
}
@media (max-width: 860px) { .v-services-grid { grid-template-columns: 1fr; } }
.v-service {
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 56px 1fr; gap: 24px;
}
.v-service:nth-child(odd)  { padding-right: 32px; border-right: 1px solid var(--border); padding-left: 0; }
.v-service:nth-child(even) { padding-left: 32px; }
@media (max-width: 860px) {
  .v-service, .v-service:nth-child(odd), .v-service:nth-child(even) {
    padding: 28px 0; border-right: 0;
  }
}
.v-service .n { font-family: var(--font-mono); font-size: 13px; color: var(--fg-faint); letter-spacing: -0.01em; padding-top: 5px; }
.v-service .t { font-size: 22px; line-height: 1.18; letter-spacing: -0.012em; margin: 0 0 8px; font-weight: 400; }
.v-service .b { font-size: 14px; color: var(--fg-muted); line-height: 1.5; margin: 0; max-width: 36ch; }

/* ----- Pull-quote (dark band) ------------------------------------------- */
.v-pullquote {
  background: var(--varso-black);
  color: var(--varso-white);
  padding: 144px 40px;
  text-align: left;
}
@media (max-width: 720px) { .v-pullquote { padding: 96px 20px; } }
.v-pullquote .eyebrow {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(246,244,239,0.5);
  margin-bottom: 48px;
}
.v-pullquote blockquote {
  margin: 0;
  font-size: clamp(36px, 5.6vw, 84px);
  line-height: 1.02; letter-spacing: -0.025em; font-weight: 400;
  max-width: 22ch;
  text-wrap: pretty;
}
.v-pullquote blockquote .em { color: rgba(246,244,239,0.55); }
.v-pullquote .sig {
  margin-top: 56px; font-size: 13px; color: rgba(246,244,239,0.55);
  display: flex; gap: 10px; align-items: center;
}
.v-pullquote .sig .stairs { color: var(--varso-orange); }

/* ----- Contact section -------------------------------------------------- */
.v-contact {
  padding: 144px 40px 96px;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px;
  align-items: end;
}
@media (max-width: 860px) { .v-contact { grid-template-columns: 1fr; padding: 96px 20px 64px; gap: 32px; } }
.v-contact h2 {
  font-size: clamp(40px, 5.8vw, 96px);
  line-height: 0.98; letter-spacing: -0.025em; font-weight: 400; margin: 0;
  max-width: 14ch;
}
.v-contact h2 .u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: var(--fg); }
.v-contact .col2 { display: flex; flex-direction: column; gap: 24px; }
.v-contact .meta { font-size: 14px; color: var(--fg-muted); line-height: 1.5; max-width: 36ch; }
.v-contact .meta a { color: var(--fg); }
.v-contact-rows { display: flex; flex-direction: column; gap: 6px; }
.v-contact-row {
  display: grid; grid-template-columns: 14ch 1fr 18px;
  gap: 16px; align-items: baseline;
  padding: 16px 0; border-top: 1px solid var(--border);
  font-size: 15px; cursor: pointer;
  transition: padding-left var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.v-contact-row:last-child { border-bottom: 1px solid var(--border); }
.v-contact-row .k { color: var(--fg-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.v-contact-row .v { color: var(--fg); font-size: 16px; }
.v-contact-row .stairs { color: var(--varso-orange); opacity: 0; transform: translateX(-4px); transition: all var(--dur-2) var(--ease-out); display: inline-flex; }
.v-contact-row:hover { padding-left: 16px; }
.v-contact-row:hover .stairs { opacity: 1; transform: translateX(0); }
.v-contact-row:hover .v { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ----- Footer ----------------------------------------------------------- */
.v-footer {
  border-top: 1px solid var(--fg);
  padding: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 32px;
  align-items: end;
  font-size: 13px;
}
@media (max-width: 720px) { .v-footer { grid-template-columns: 1fr; padding: 32px 20px; gap: 24px; align-items: start; } }
.v-footer .colophon { color: var(--fg-muted); max-width: 52ch; line-height: 1.5; }
.v-footer .colophon .sym { display: inline-flex; vertical-align: -3px; margin-right: 10px; color: var(--fg); }
.v-footer .colophon .sep { color: var(--fg-faint); margin: 0 8px; }
.v-footer .legal { color: var(--fg-faint); display: flex; gap: 18px; }
.v-footer .legal a:hover { color: var(--varso-orange); }
.v-footer .social { display: flex; align-items: center; gap: 10px; }

/* ----- Contact popup ---------------------------------------------------- */
.v-modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(28,28,28,0.82);
  display: grid; place-items: center; padding: 24px;
  animation: vModalIn 240ms var(--ease-out);
}
@keyframes vModalIn { from { opacity: 0; } to { opacity: 1; } }
.v-modal {
  background: var(--bg); color: var(--fg);
  width: min(680px, 100%); padding: 44px 44px 36px;
  position: relative;
  border: 1px solid var(--fg);
  animation: vModalUp 320ms var(--ease-out);
}
@keyframes vModalUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 540px) { .v-modal { padding: 28px 20px 24px; } }
.v-modal-close {
  position: absolute; top: 14px; right: 16px;
  padding: 8px; font-size: 22px; line-height: 1; color: var(--fg);
}
.v-modal h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; font-weight: 400; }
.v-modal .sub { margin: 8px 0 0; font-size: 14px; color: var(--fg-muted); max-width: 42ch; }
.v-form { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.v-field { display: flex; flex-direction: column; gap: 6px; }
.v-field label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; color: var(--fg-muted); }
.v-field input, .v-field textarea {
  font-family: inherit; font-size: 15px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 0;
  background: var(--bg); color: var(--fg); outline: none;
  transition: border-color var(--dur-1) var(--ease-out);
}
.v-field input:focus, .v-field textarea:focus { border-color: var(--fg); }
.v-field textarea { min-height: 110px; resize: vertical; }
.v-form .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-top: 4px;
}
.v-form .row .lo { font-size: 12px; color: var(--fg-muted); }

.v-modal-sent { margin-top: 24px; font-size: 17px; letter-spacing: -0.005em; line-height: 1.5; }
.v-modal-sent .stairs { color: var(--varso-orange); margin-right: 10px; }

/* ----- About page intro ------------------------------------------------ */
.v-about-intro {
  padding: 160px 40px 120px;
  display: flex; flex-direction: column; gap: 56px;
  max-width: 1280px;
}
@media (max-width: 720px) { .v-about-intro { padding: 120px 20px 72px; gap: 32px; } }
.v-about-intro .eyebrow-q { font-size: 14px; }
.v-about-title {
  margin: 0;
  font-size: clamp(40px, 5.8vw, 96px);
  line-height: 0.98; letter-spacing: -0.025em; font-weight: 400;
  max-width: 22ch;
  text-wrap: pretty;
}
.v-about-title .m {
  display: block;
  color: var(--fg-muted);
  margin-top: 0.18em;
}
.v-about-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  max-width: 900px;
}
@media (max-width: 720px) { .v-about-cols { grid-template-columns: 1fr; gap: 24px; } }
.v-about-cols p {
  font-size: 16px; line-height: 1.55;
  color: var(--fg-muted); margin: 0;
  max-width: 44ch;
}

/* ----- Mini footer (1 ligne, pour le one-fold) -------------------------- */
.v-minifooter {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 10px 24px;
  font-size: 12px; color: var(--fg-muted);
  font-family: inherit;
}
.v-minifooter .left, .v-minifooter .right { display: inline-flex; align-items: center; gap: 8px; }
.v-minifooter .v-citystrip { font-size: 12px; gap: 12px; padding-top: 0; }
.v-minifooter .v-citystrip .city { gap: 6px; }
.v-minifooter .sep { color: var(--fg-faint); margin: 0 6px; }
@media (max-width: 720px) {
  .v-minifooter { padding: 10px 20px; flex-wrap: wrap; row-gap: 6px; }
}

/* ----- Header current state -------------------------------------------- */
.v-header .lnk.is-current { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--fg); }
.v-header .lnk.is-current:hover { text-decoration-color: var(--varso-orange); }

/* Vidéos en galerie : autoplay silencieux, jamais interactives.
/* Vidéo : on neutralise le clic droit et le plein écran.
   pointer-events: none neutralise le clic droit et toute tentative
   d'ouvrir la lecture en plein écran ; les attributs HTML font le reste.
   Le sizing (object-fit, background) est géré plus bas avec les images. */
.v-proj-card video,
.v-hover-slide video {
  pointer-events: none;
}

/* =========================================================================
   PROJECT PAGE — strict one-fold 50/50 (left: titre/desc · right: galerie h)
   ========================================================================= */
.v-project-page { background: var(--bg); }

.v-proj-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 0;
  padding: 0;
  max-width: none;
  align-items: stretch;
  min-height: 0;
  height: 100%;
}
@media (max-width: 980px) {
  .v-proj-hero--split { grid-template-columns: 1fr; grid-template-rows: auto auto; }
}

.v-proj-side {
  /* hérite de .v-hero-side : flex column, padding, gap */
}

/* ----- Bouton retour & méta ----- */
.v-proj-back {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--fg-muted);
  text-decoration: none; width: max-content;
  transition: color var(--dur-1) var(--ease-out);
}
.v-proj-back:hover { color: var(--varso-orange); }

.v-proj-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.v-proj-meta .k { color: var(--fg); }
.v-proj-meta .dot { color: var(--fg-faint); }

/* ----- Titre (taille = home statement) ----- */
.v-proj-title {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  max-width: 18ch;
  text-wrap: pretty;
}

/* ----- Lead (= 14px, body systématisé) ----- */
.v-proj-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 56ch;
}

/* ----- Expand "En savoir plus" ----- */
.v-proj-expand { max-width: 56ch; }
.v-proj-expand-toggle {
  display: inline-flex; align-items: baseline; gap: 12px;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 14px; color: var(--fg);
  cursor: pointer; text-align: left;
  transition: color var(--dur-1) var(--ease-out);
}
.v-proj-expand-toggle .lbl {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  text-decoration-color: var(--fg);
}
.v-proj-expand-toggle .sign {
  font-family: var(--font-mono); font-size: 13px; color: var(--varso-orange);
  width: 14px; text-align: center; display: inline-block;
}
.v-proj-expand-toggle:hover { color: var(--varso-orange); }
.v-proj-expand-toggle:hover .lbl { text-decoration-color: var(--varso-orange); }
.v-proj-expand-text {
  /* fade-in léger à l'ouverture */
  animation: vProjExpandIn 360ms var(--ease-out);
}
@keyframes vProjExpandIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.v-proj-expand-text p {
  margin: 14px 0 0; font-size: 14px; line-height: 1.55;
  color: var(--fg); max-width: 56ch;
}
.v-proj-expand-text p:first-child { margin-top: 18px; }

/* ----- Bottom-line (crédits courts + projet suivant) ----- */
.v-proj-bottomline {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 24px;
  padding-top: 8px;
  font-size: 13px;
}
.v-proj-credits-inline {
  display: flex; flex-direction: column; gap: 4px;
  color: var(--fg-muted);
}
.v-proj-credits-inline .cred { display: inline-flex; gap: 10px; align-items: baseline; }
.v-proj-credits-inline .k {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-faint); min-width: 8ch;
}
.v-proj-credits-inline .v { color: var(--fg); font-size: 13px; }

.v-proj-next-inline {
  display: inline-grid; grid-template-columns: 1fr auto; align-items: end;
  gap: 4px 14px;
  text-decoration: none; color: inherit;
  padding: 8px 0;
  transition: padding-right var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.v-proj-next-inline .lo {
  grid-column: 1 / -1;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-faint);
}
.v-proj-next-inline .t { font-size: 14px; color: var(--fg); letter-spacing: -0.01em; }
.v-proj-next-inline .g {
  color: var(--varso-orange); opacity: 0; transform: translateX(-4px);
  transition: all var(--dur-2) var(--ease-out);
}
.v-proj-next-inline:hover .g { opacity: 1; transform: translateX(0); }
.v-proj-next-inline:hover .t { color: var(--varso-orange); }

/* ============================================================
   COLONNE DROITE — galerie horizontale
   ============================================================ */
.v-proj-gal-col {
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: hidden;
}
@media (max-width: 980px) {
  .v-proj-gal-col {
    border-left: 0; border-top: 1px solid var(--border);
    /* En mobile la grille passe en 1 colonne → la colonne galerie n'a plus
       de hauteur définie par la grille parente. On lui donne une cible
       explicite, sinon les cartes en height:100% s'étirent à la taille
       naturelle de l'image et font exploser le scroll horizontal. */
    height: 60vh;
    min-height: 320px;
  }
}

.v-proj-gal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--fg-muted);
}
.v-proj-gal-eye {
  display: inline-flex; align-items: center; gap: 8px;
}
.v-proj-gal-eye .lo { color: var(--fg-muted); }
.v-proj-gal-eye .stairs { color: var(--varso-orange); display: inline-flex; }
.v-proj-gal-eye .lbl { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.v-proj-gal-idx {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-muted);
}
.v-proj-gal-idx .cur { color: var(--fg); }
.v-proj-gal-idx .sep { color: var(--varso-orange); margin: 0 4px; }

.v-proj-gal-scroll {
  flex: 1 1 auto;
  min-height: 0; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  display: flex; align-items: stretch;
  gap: 24px;
  padding: 28px 24px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--varso-ink-15) transparent;
}
.v-proj-gal-scroll::-webkit-scrollbar { height: 6px; }
.v-proj-gal-scroll::-webkit-scrollbar-thumb { background: var(--varso-ink-15); }
.v-proj-gal-scroll::-webkit-scrollbar-track { background: transparent; }

/* Galerie projet — chaque carte a une hauteur fixée (la colonne) et sa
   largeur s'adapte au format d'origine de l'image (pas de crop). L'image
   est en object-fit: contain avec un padding, sur un fond coloré visible.
   Trois tons : ink (noir), brick (brique), paper (blanc) — ink par défaut.
   On peut spécifier { "tone": "paper" } sur un item de galerie dans
   content.json pour personnaliser le fond image par image. */
.v-proj-card {
  margin: 0;
  flex: 0 0 auto;
  height: 100%;
  scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--varso-black);
  position: relative;
}
.v-proj-card.tone-ink   { background: var(--varso-black);  border-color: var(--varso-black); }
.v-proj-card.tone-brick {
  background: linear-gradient(135deg, #b75a3c 0%, #d18261 70%, #e4a684 100%);
  border-color: transparent;
}
.v-proj-card.tone-paper { background: var(--varso-white); border-color: var(--border); }

.v-proj-card img,
.v-proj-card video {
  display: block;
  width: auto; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
/* Placeholder (mode sans image) : occupe toute la carte */
.v-proj-card .v-proj-ph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.v-proj-card.tone-ink   .v-proj-ph-label { color: var(--varso-white); }
.v-proj-card.tone-brick .v-proj-ph-label { color: rgba(255,255,255,0.85); }
.v-proj-card.tone-paper .v-proj-ph-label { color: var(--fg); }
.v-proj-card .v-proj-ph-label {
  position: absolute; left: 18px; top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}

/* Contrôles de scroll horizontal */
.v-proj-gal-controls {
  display: flex; gap: 8px;
  padding: 0 24px 18px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.v-proj-gal-controls .ctrl {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--fg);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.v-proj-gal-controls .ctrl:hover:not(:disabled) {
  background: var(--varso-black); color: var(--varso-white); border-color: var(--varso-black);
}
body[data-theme="dark"] .v-proj-gal-controls .ctrl:hover:not(:disabled) {
  background: var(--varso-white); color: var(--varso-black); border-color: var(--varso-white);
}
.v-proj-gal-controls .ctrl:disabled { opacity: 0.3; cursor: default; }

/* =========================================================================
   ABOUT PAGE — strict one-fold 50/50 (left: intro · right: services)
   ========================================================================= */
.v-about-hero { /* hérite de .v-hero */ }

.v-about-side {
  /* hérite de .v-hero-side */
}

.v-about-statement {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-wrap: pretty;
  max-width: 18ch;
}
.v-about-statement .m { color: var(--fg-muted); display: inline; }

.v-about-intro-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  max-width: 60ch;
}
.v-about-intro-cols p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-muted);
}
@media (max-width: 720px) {
  .v-about-intro-cols { grid-template-columns: 1fr; gap: 16px; }
}

.v-about-quote {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
  max-width: 56ch;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.v-about-quote .q { color: var(--fg-faint); }
.v-about-quote .em { color: var(--fg-muted); }
.v-about-quote .sig {
  display: block; margin-top: 8px;
  font-size: 12px; color: var(--fg-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.v-about-contactline {
  /* hérite de .v-contactline */
  font-size: 14px;
}

/* ----- Colonne de droite : services list ----- */
.v-services-col {
  /* hérite de .v-list-col */
}
.v-services-head-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.v-services-eye {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg-muted);
}
.v-services-eye .lo { color: var(--fg-muted); }
.v-services-eye .stairs { color: var(--varso-orange); display: inline-flex; }
.v-services-eye .lbl {
  color: var(--fg); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.v-services-count {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
}

.v-service-row {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.4fr) 18px;
  align-items: baseline;
  padding: 14px 32px 14px 0;
  gap: 18px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
  position: relative;
  transition: padding-left var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
  cursor: default;
}
.v-service-row:hover { padding-left: 14px; }
.v-service-row:hover .row-glyph { opacity: 1; transform: translateX(0); color: var(--varso-orange); }
.v-service-row .row-title { font-size: 14px; font-weight: 400; letter-spacing: -0.01em; }
.v-service-row .row-service-body {
  font-size: 13px; color: var(--fg-muted); font-weight: 400; text-align: left;
  line-height: 1.4;
}

/* Strict layout : services list verticalement centrée sur la page */
.v-page--strict .v-services-col::before,
.v-page--strict .v-services-col::after {
  content: ""; flex: 1 1 0; min-height: 0;
}
.v-page--strict .v-services-col ol { overflow-y: auto; min-height: 0; flex: 0 1 auto; list-style: none; margin: 0; padding: 0; }

@media (max-width: 980px) {
  .v-services-col { border-left: 0; border-top: 1px solid var(--border); }
  .v-service-row { grid-template-columns: 1fr 18px; }
  .v-service-row .row-service-body { display: none; }
}

/* =========================================================================
   HOVER PREVIEW — survol d'un projet sur la home : carousel galerie auto
   ========================================================================= */
.v-hero-side { position: relative; }

.v-hero-side .v-statement,
.v-hero-side .v-statement-sub {
  transition: opacity 240ms var(--ease-out);
}
.v-hero-side.is-previewing .v-statement,
.v-hero-side.is-previewing .v-statement-sub {
  opacity: 0;
}

.v-hover-preview {
  position: absolute;
  inset: 20px 56px 80px 24px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.v-hero-side.is-previewing .v-hover-preview { opacity: 1; }

.v-hover-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.v-hover-slide.is-on { opacity: 1; }

/* Hover preview home : même logique — fond coloré, image en contain. */
.v-hover-slide {
  background: var(--varso-black);
  border: 1px solid var(--varso-black);
}
.v-hover-slide.tone-ink   { background: var(--varso-black);  border-color: var(--varso-black); }
.v-hover-slide.tone-brick {
  background: linear-gradient(135deg, #b75a3c 0%, #d18261 70%, #e4a684 100%);
  border-color: transparent;
}
.v-hover-slide.tone-paper { background: var(--varso-white); border-color: var(--border); }

.v-hover-slide img,
.v-hover-slide video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
}
.v-hover-slide > .v-proj-ph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.v-hover-slide.tone-ink   .v-proj-ph-label { color: var(--varso-white); }
.v-hover-slide.tone-brick .v-proj-ph-label { color: rgba(255,255,255,0.85); }
.v-hover-slide.tone-paper .v-proj-ph-label { color: var(--fg); }
.v-hover-slide > .v-proj-ph .v-proj-ph-label {
  position: absolute; left: 18px; top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}

.v-hover-idx {
  position: absolute; right: 14px; bottom: 12px;
  z-index: 2;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--varso-white);
  background: rgba(28,28,28,0.85);
  padding: 4px 8px;
  letter-spacing: 0.02em;
}
.v-hover-idx .cur { color: var(--varso-white); }
.v-hover-idx .sep { color: var(--varso-orange); margin: 0 3px; }
.v-hover-idx .tot { color: rgba(246,244,239,0.6); }

@media (max-width: 980px) {
  /* sur mobile, on désactive le preview pour pas perturber le scroll */
  .v-hover-preview { display: none; }
  .v-hero-side.is-previewing .v-statement,
  .v-hero-side.is-previewing .v-statement-sub { opacity: 1; }
}