/* Page de comparaison avant / après — outil neutre, volontairement distinct
   de la charte Van-Away (police système, gris, pas de turquoise). */
:root {
  --vw-bg: #ECEEF1;
  --vw-surface: #FFFFFF;
  --vw-ink: #1D232B;
  --vw-muted: #5A6472;
  --vw-line: #D5DAE1;
  --vw-accent: #2F3B4C;      /* bouton actif des bascules */
  --vw-decide-bg: #FFF1D6;
  --vw-decide-ink: #6B4400;
  --vw-id-bg: #E4E8EE;
  --vw-focus: 0 0 0 2px #fff, 0 0 0 4px #3B6FD8;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--vw-ink); background: var(--vw-bg);
  overflow-x: hidden;
}
a { color: #2A55B0; }
:focus-visible { outline: none; box-shadow: var(--vw-focus); border-radius: 6px; }
h1, h2, p { margin: 0; }

.vw-top { background: var(--vw-surface); border-bottom: 1px solid var(--vw-line); }
.vw-top-inner { max-width: 1600px; margin: 0 auto; padding: 16px 24px 14px; }
.vw-crumb { font-size: 13px; color: var(--vw-muted); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.vw-crumb:hover { color: var(--vw-ink); text-decoration: underline; }
.vw-kicker { font-size: 12px; font-weight: 600; color: var(--vw-muted); letter-spacing: .02em; }
.vw-title { font-size: 22px; font-weight: 700; line-height: 1.25; margin-top: 2px; }
.vw-purpose { margin-top: 4px; color: var(--vw-muted); max-width: 820px; }

.vw-toolbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(236, 238, 241, .94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--vw-line);
}
.vw-toolbar-inner {
  max-width: 1600px; margin: 0 auto; padding: 10px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.vw-seg { display: inline-flex; background: var(--vw-surface); border: 1px solid var(--vw-line); border-radius: 10px; padding: 3px; }
.vw-seg button {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--vw-muted);
  background: none; border: 0; border-radius: 7px; padding: 0 14px; min-height: 36px; cursor: pointer;
}
.vw-seg button:hover { color: var(--vw-ink); }
.vw-seg button[aria-pressed="true"] { background: var(--vw-accent); color: #fff; }
.vw-seg button[hidden] { display: none; }
.vw-open { margin-left: auto; font-size: 14px; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; }

.vw-body { max-width: 1600px; margin: 0 auto; padding: 20px 24px 48px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.vw-body.is-side { grid-template-columns: minmax(0, 1fr); }
.vw-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.vw-stage.is-side { grid-template-columns: 1fr 1fr; }
.vw-pane[hidden] { display: none; }
.vw-pane-label { font-size: 13px; font-weight: 700; color: var(--vw-muted); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.vw-pane-label b { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--vw-id-bg); color: var(--vw-ink); font-weight: 700; }
.vw-fit { width: 100%; }
.vw-frame { margin: 0 auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 8px 30px rgba(0,0,0,.08); border-radius: 8px; overflow: hidden; position: relative; }
.vw-frame.is-mobile { border-radius: 26px; border: 8px solid #1F252D; box-sizing: content-box; }
.vw-frame iframe { border: 0; display: block; transform-origin: 0 0; background: #fff; }
.vw-frame img { display: block; width: 100%; height: auto; }

.vw-changes { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; background: var(--vw-surface); border: 1px solid var(--vw-line); border-radius: 12px; padding: 18px 18px 8px; }
.vw-changes h2 { font-size: 17px; font-weight: 700; }
.vw-changes-intro { font-size: 13px; color: var(--vw-muted); margin-top: 2px; }
.vw-changes ol { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: c; }
.vw-changes li { counter-increment: c; position: relative; padding: 10px 0 10px 30px; border-top: 1px solid #EDF0F3; font-size: 14px; }
.vw-changes li::before {
  content: counter(c); position: absolute; left: 0; top: 11px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--vw-id-bg);
  font-size: 11px; font-weight: 700; display: grid; place-items: center; color: var(--vw-ink);
}
.vw-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; vertical-align: 1px; }
.vw-id { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: var(--vw-id-bg); color: var(--vw-ink); font-family: ui-monospace, Consolas, monospace; white-space: nowrap; }
.vw-decide { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: var(--vw-decide-bg); color: var(--vw-decide-ink); white-space: nowrap; }
.vw-why { display: block; margin-top: 3px; font-size: 13px; color: var(--vw-muted); }
.vw-legend { margin: 6px 0 10px; font-size: 12px; color: var(--vw-muted); }

/* Page d'accueil */
.vw-home { max-width: 980px; margin: 0 auto; padding: 24px 24px 56px; }
.vw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.vw-tile { display: block; background: var(--vw-surface); border: 1px solid var(--vw-line); border-radius: 12px; padding: 18px; color: inherit; text-decoration: none; }
a.vw-tile:hover { border-color: #9AA5B4; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.vw-tile h2 { font-size: 17px; font-weight: 700; }
.vw-tile p { margin-top: 4px; font-size: 14px; color: var(--vw-muted); }
.vw-tile-status { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #DDF1E4; color: #1F5A33; }
.vw-tile.is-soon { opacity: .75; }
.vw-tile.is-soon .vw-tile-status { background: var(--vw-id-bg); color: var(--vw-muted); }
.vw-tile code { font-size: 12px; color: var(--vw-muted); }

@media (max-width: 1279.98px) {
  .vw-body { grid-template-columns: minmax(0, 1fr); }
  .vw-changes { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 700px) {
  .vw-top-inner, .vw-toolbar-inner, .vw-body, .vw-home { padding-left: 16px; padding-right: 16px; }
  .vw-title { font-size: 19px; }
  .vw-open { margin-left: 0; }
  .vw-grid { grid-template-columns: 1fr; }
  .vw-frame.is-mobile { border-width: 6px; border-radius: 22px; }
}