/* Carte de vœux et Noël: the home page, the free result, the texts, the free card, the
   animated card and the gift tags. The mix of three references (docs/fiches/voeux.md,
   part 3): the structure of Paperless Post (a real card in the first screen, the occasion
   chosen first), the matter of Smythson (night ink, snow white paper, spaced small capitals,
   thin rules, square corners), the motion of Cosmos (slow drifting objects, 0.4 s soft
   curves, pills that answer). The colours come from the cards themselves: night #1d2230,
   gold #7c6410 to #d9b44a, snow #f8f5ee, pine #2f5d4a. Fonts served by the site (OFL): Bodoni Moda, Source Sans 3, Pinyon Script.
   Rules are scoped to .vx, or to a page holding .vx-home. */

@font-face { font-family: "Bodoni VX"; src: url("fonts/bodoni-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Bodoni VX"; src: url("fonts/bodoni-italic-latin.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans VX"; src: url("fonts/sourcesans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Pinyon VX"; src: url("fonts/pinyon-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

.vx, html:has(link[href*="voeux.css"]) body {
  --vx-paper: #f8f5ee;
  --vx-card: #fffdf8;
  --vx-ink: #1a1d29;
  --vx-soft: #3c4050;
  --vx-muted: #5b5f6e;
  --vx-night: #1d2230;
  --vx-night-2: #262c3d;
  --vx-gold: #7c6410;
  --vx-gold-bright: #d9b44a;
  --vx-gold-pale: #f3ead2;
  --vx-pine: #2f5d4a;
  --vx-line: #e2dbc9;
  --vx-line-strong: #cfc4ab;
  --vx-serif: "Bodoni VX", "Bodoni Moda", Didot, Georgia, serif;
  --vx-sans: "Source Sans VX", "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vx-script: "Pinyon VX", "Pinyon Script", cursive;
  --vx-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
.vx { font-family: var(--vx-sans); color: var(--vx-ink); font-size: 17px; line-height: 1.6; }
.vx h1, .vx h2, .vx h3 { margin: 0; text-wrap: balance; font-family: var(--vx-serif); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; color: var(--vx-ink); }
.vx p { margin: 0; }
.vx a { color: var(--vx-gold); text-underline-offset: 3px; }
.vx-wrap { max-width: 1200px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.vx-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vx-gold); }
.vx-label-light { color: var(--vx-gold-bright); }
.vx-note { font-size: 0.86rem; color: var(--vx-muted); }
.vx-opt { font-weight: 400; color: var(--vx-muted); font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.vx-paper { background: var(--vx-card); border: 1px solid var(--vx-line); border-radius: 4px; box-shadow: 0 1px 2px rgba(26, 29, 41, 0.04), 0 20px 30px rgba(26, 29, 41, 0.08); }
.vx-pill { position: absolute; z-index: 2; top: 14px; left: 14px; background: var(--vx-card); color: var(--vx-ink); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--vx-line); }

/* Buttons: night ink and white text (15 to 1); the gold one on the night band (8 to 1). */
.vx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; line-height: 1.2;
  padding: 15px 26px; min-height: 54px; border-radius: 4px; border: 1px solid var(--vx-night); cursor: pointer; text-align: center;
  background: var(--vx-night); color: #ffffff; text-decoration: none; box-sizing: border-box;
  transition: transform 0.4s var(--vx-ease), box-shadow 0.4s var(--vx-ease), background-color 0.4s var(--vx-ease);
}
.vx a.vx-btn, .vx-btn:hover, .vx a.vx-btn:hover { color: #ffffff; }
.vx-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(29, 34, 48, 0.24); background: #2a3044; }
.vx-btn:active { transform: translateY(0); }
.vx-btn:focus-visible, .vx-act:focus-visible, .vx-decor:focus-visible, .vx-chip input:focus-visible + span { outline: 3px solid var(--vx-gold-bright); outline-offset: 3px; }
.vx-btn.ghost { background: transparent; color: var(--vx-night); }
.vx a.vx-btn.ghost, .vx-btn.ghost:hover { color: var(--vx-night); background: var(--vx-gold-pale); }
.vx-btn.gold { background: var(--vx-gold-bright); border-color: var(--vx-gold-bright); color: var(--vx-night); }
.vx a.vx-btn.gold, .vx a.vx-btn.gold:hover { color: var(--vx-night); }
.vx-btn.gold:hover { background: #e6c467; }

/* The free form: the occasion first, in pills, like the occasions of Paperless Post. */
.vx-form { padding: 22px 22px 18px; display: grid; gap: 14px; text-align: left; color: var(--vx-ink); }
.vx-form-plain { padding: 0; border: 0; box-shadow: none; background: transparent; }
.vx-form label, .vx-form legend { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vx-soft); margin: 0 0 6px; padding: 0; }
.vx-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.vx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-chips legend { width: 100%; }
.vx-chip { position: relative; margin: 0 !important; letter-spacing: 0 !important; text-transform: none !important; }
.vx-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vx-chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--vx-line-strong); background: var(--vx-card); font-size: 0.95rem; font-weight: 600; color: var(--vx-ink); transition: background-color 0.4s var(--vx-ease), border-color 0.4s var(--vx-ease), color 0.4s var(--vx-ease); }
.vx-chip:hover span { border-color: var(--vx-night); }
.vx-chip input:checked + span { background: var(--vx-night); border-color: var(--vx-night); color: #ffffff; }
.vx-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.vx-field { min-width: 0; }
.vx-form select, .vx-form input[type="text"] {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 1rem; color: var(--vx-ink);
  border: 1px solid var(--vx-line-strong); border-radius: 4px; background: #ffffff;
}
.vx-form select:focus, .vx-form input:focus { outline: 2px solid var(--vx-gold-bright); outline-offset: 1px; border-color: var(--vx-gold); }
.vx-form .vx-btn { width: 100%; margin-top: 2px; }

/* The night band: snow drifting slowly, like the floating tiles of Cosmos. */
.vx-hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 78% 0%, #33395a 0%, var(--vx-night) 55%, #151926 100%); color: #ffffff; padding: 56px 0 44px; }
.vx-hero h1 { color: #ffffff; font-size: clamp(2.5rem, 4.6vw, 4.1rem); max-width: 13ch; margin: 14px 0 26px; }
.vx-hero h1 em { font-style: italic; color: var(--vx-gold-bright); font-weight: 400; }
.vx-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: center; }
.vx-hero-text { max-width: 560px; min-width: 0; }
.vx-hero-lead { margin-top: 18px !important; color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; }
.vx-snow { position: absolute; top: 0; bottom: 0; left: 54%; right: 0; pointer-events: none; }
.vx-snow span { position: absolute; top: -8px; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); animation: vx-fall 24s linear infinite; }
.vx-snow span:nth-child(3n) { width: 2px; height: 2px; animation-duration: 30s; background: rgba(255, 255, 255, 0.55); }
.vx-snow span:nth-child(4n) { width: 4px; height: 4px; animation-duration: 36s; background: rgba(247, 232, 190, 0.7); }
.vx-snow span:nth-child(1) { left: 37%; animation-delay: -7s; }
.vx-snow span:nth-child(2) { left: 74%; animation-delay: -14s; }
.vx-snow span:nth-child(3) { left: 14%; animation-delay: -21s; }
.vx-snow span:nth-child(4) { left: 51%; animation-delay: -28s; }
.vx-snow span:nth-child(5) { left: 88%; animation-delay: -35s; }
.vx-snow span:nth-child(6) { left: 28%; animation-delay: -6s; }
.vx-snow span:nth-child(7) { left: 65%; animation-delay: -13s; }
.vx-snow span:nth-child(8) { left: 5%; animation-delay: -20s; }
.vx-snow span:nth-child(9) { left: 42%; animation-delay: -27s; }
.vx-snow span:nth-child(10) { left: 79%; animation-delay: -34s; }
.vx-snow span:nth-child(11) { left: 19%; animation-delay: -5s; }
.vx-snow span:nth-child(12) { left: 56%; animation-delay: -12s; }
.vx-snow span:nth-child(13) { left: 93%; animation-delay: -19s; }
.vx-snow span:nth-child(14) { left: 33%; animation-delay: -26s; }
.vx-snow span:nth-child(15) { left: 70%; animation-delay: -33s; }
.vx-snow span:nth-child(16) { left: 10%; animation-delay: -4s; }
.vx-snow span:nth-child(17) { left: 47%; animation-delay: -11s; }
.vx-snow span:nth-child(18) { left: 84%; animation-delay: -18s; }
.vx-snow span:nth-child(19) { left: 24%; animation-delay: -25s; }
.vx-snow span:nth-child(20) { left: 61%; animation-delay: -32s; }
.vx-snow span:nth-child(21) { left: 1%; animation-delay: -3s; }
.vx-snow span:nth-child(22) { left: 38%; animation-delay: -10s; }
.vx-snow span:nth-child(23) { left: 75%; animation-delay: -17s; }
.vx-snow span:nth-child(24) { left: 15%; animation-delay: -24s; }
.vx-snow span:nth-child(25) { left: 52%; animation-delay: -31s; }
.vx-snow span:nth-child(26) { left: 89%; animation-delay: -2s; }
.vx-snow span:nth-child(27) { left: 29%; animation-delay: -9s; }
.vx-snow span:nth-child(28) { left: 66%; animation-delay: -16s; }
.vx-snow span:nth-child(29) { left: 6%; animation-delay: -23s; }
.vx-snow span:nth-child(30) { left: 43%; animation-delay: -30s; }
@keyframes vx-fall { from { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(18px, 50vh, 0); } to { transform: translate3d(-6px, 105vh, 0); } }

/* The real cards of the first screen, side by side and whole: the free card, the paid card. */
.vx-showcase { position: relative; margin: 0; display: grid; gap: 18px; justify-items: center; }
.vx-showcase-cards { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; width: 100%; }
.vx-showcase-free, .vx-showcase-paid img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 30px 60px rgba(0, 0, 0, 0.45); }
.vx-showcase-free { aspect-ratio: 4 / 5; background: var(--vx-paper); align-self: center; transform: rotate(-2deg); animation: vx-float 9s var(--vx-ease) infinite alternate; }
.vx-showcase-paid { display: block; transform: rotate(2deg); animation: vx-float-b 11s var(--vx-ease) infinite alternate; }
.vx-showcase-paid img { aspect-ratio: 440 / 620; }
.vx-showcase-note { text-align: center; font-size: 0.86rem; color: rgba(255, 255, 255, 0.8); }
@keyframes vx-float { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(-1deg) translateY(-10px); } }
@keyframes vx-float-b { from { transform: rotate(2deg) translateY(0); } to { transform: rotate(3deg) translateY(8px); } }

.vx-result-zone { padding-top: 34px; padding-bottom: 10px; }

/* Four facts in a thin-ruled row, Smythson style. */
.vx-facts { background: var(--vx-paper); border-bottom: 1px solid var(--vx-line); }
.vx-facts ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 auto; padding-top: 30px; padding-bottom: 30px; }
.vx-facts li { display: flex; align-items: center; gap: 14px; padding: 4px 22px; border-left: 1px solid var(--vx-line); color: var(--vx-soft); font-size: 0.95rem; line-height: 1.4; }
.vx-facts li:first-child { border-left: 0; padding-left: 0; }
.vx-fact-n { font-family: var(--vx-serif); font-size: 2.1rem; color: var(--vx-ink); line-height: 1; white-space: nowrap; }

.vx-intro { padding-top: 104px; padding-bottom: 28px; }
.vx-intro > * { max-width: 760px; }
.vx-intro h2, .vx-how h2, .vx-faq h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin: 10px 0 14px; }
.vx-intro p:last-child { color: var(--vx-soft); font-size: 1.05rem; }

.vx-product { padding: 56px 0; }
.vx-product.alt { background: #f2eee3; }
.vx-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.vx-product.alt .vx-shot { order: 2; }
.vx-product-night { background: var(--vx-night); color: #ffffff; }
.vx-product-night h3, .vx-product-night .vx-price { color: #ffffff; }
.vx-product-night .vx-copy p, .vx-product-night .vx-list li { color: rgba(255, 255, 255, 0.86); }
.vx-product-night .vx-list li::before { background: var(--vx-gold-bright); }
.vx-shot { display: grid; place-items: center; }
.vx-frame { position: relative; width: min(470px, 100%); padding: 18px; background: var(--vx-card); border: 1px solid var(--vx-line); border-radius: 4px; box-shadow: 0 30px 60px rgba(26, 29, 41, 0.14); transition: transform 0.4s var(--vx-ease), box-shadow 0.4s var(--vx-ease); }
.vx-frame:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 40px 70px rgba(26, 29, 41, 0.18); }
.vx-frame img { display: block; width: 100%; height: auto; }
.vx-frame a { display: block; position: relative; }
.vx-zoom-label { display: block; width: max-content; margin: 16px auto 0; text-decoration: none; background: var(--vx-night); color: #ffffff; font-size: 0.82rem; font-weight: 700; padding: 7px 14px; border-radius: 999px; }
.vx-copy { max-width: 500px; }
.vx-copy > p { margin-top: 14px; color: var(--vx-soft); }
.vx-copy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-top: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--vx-line); }
.vx-product-night .vx-copy-head { border-color: rgba(255, 255, 255, 0.2); }
.vx-copy h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.vx-price { font-family: var(--vx-serif); font-size: 1.7rem; color: var(--vx-ink); white-space: nowrap; }
.vx-list { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 9px; }
.vx-list li { position: relative; padding-left: 22px; color: var(--vx-soft); }
.vx-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--vx-gold); transform: rotate(45deg); }

/* The text example: what was typed, then what came out. */
.vx-duo { display: grid; gap: 12px; width: min(470px, 100%); }
.vx-typed { font-family: var(--vx-sans); font-style: italic; font-size: 1rem; line-height: 1.55; color: var(--vx-soft); background: transparent; border-left: 2px solid var(--vx-gold); padding: 6px 0 6px 18px; }
.vx-typed small { display: block; font-style: normal; font-family: var(--vx-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vx-muted); margin-bottom: 6px; }
.vx-arrow { justify-self: center; color: var(--vx-gold); font-size: 1.3rem; line-height: 1; }
.vx-letter { position: relative; background: var(--vx-card); border: 1px solid var(--vx-line); border-top: 3px solid var(--vx-gold); padding: 26px 24px 22px; border-radius: 4px; box-shadow: 0 24px 50px rgba(26, 29, 41, 0.1); }
.vx-letter .vx-pill { top: -14px; left: auto; right: 16px; }
.vx-letter p + p { margin-top: 10px; }
.vx-letter .vx-hint { font-size: 0.84rem; color: var(--vx-muted); }

.vx-more { padding: 72px 0 24px; }
.vx-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vx-tile { padding: 24px 22px; display: grid; gap: 10px; align-content: start; transition: transform 0.4s var(--vx-ease); }
.vx-tile:hover { transform: translateY(-3px); }
.vx-tile.warm { background: var(--vx-gold-pale); border-color: #e6d7ae; }
.vx-tile-head { display: flex; justify-content: space-between; gap: 12px; font-size: 1.05rem; }
.vx-tile p { color: var(--vx-soft); font-size: 0.95rem; }
.vx-links a { font-weight: 700; }

.vx-how { padding: 88px 0; }
.vx-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--vx-line); }
.vx-steps li { padding: 26px 26px 0 0; display: grid; gap: 8px; align-content: start; }
.vx-steps li + li { padding-left: 26px; border-left: 1px solid var(--vx-line); }
.vx-step-n { font-family: var(--vx-serif); font-size: 3.4rem; line-height: 1; color: var(--vx-gold); }
.vx-steps h3 { font-size: 1.45rem; }
.vx-steps p { color: var(--vx-soft); font-size: 0.97rem; }

.vx-trust { background: var(--vx-night); color: #ffffff; padding: 72px 0; }
.vx-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.vx-trust h2 { color: #ffffff; font-size: 1.8rem; margin-bottom: 12px; }
.vx-trust p { color: rgba(255, 255, 255, 0.84); }
.vx-trust strong { color: var(--vx-gold-bright); }

.vx-guides { padding: 40px 0 0; }
.vx-guides ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vx-guides a { display: inline-flex; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--vx-line-strong); background: var(--vx-card); color: var(--vx-ink); text-decoration: none; font-weight: 600; font-size: 0.93rem; transition: border-color 0.4s var(--vx-ease), transform 0.4s var(--vx-ease); }
.vx-guides a:hover { border-color: var(--vx-night); transform: translateY(-2px); }

.vx-faq { padding: 72px 0 96px; }
.vx-faq .vx-wrap { max-width: 860px; }
.vx-faq details { border-bottom: 1px solid var(--vx-line); padding: 18px 0; }
.vx-faq summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.vx-faq summary::-webkit-details-marker { display: none; }
.vx-faq summary::after { content: "+"; font-family: var(--vx-serif); font-size: 1.5rem; line-height: 1; color: var(--vx-gold); transition: transform 0.4s var(--vx-ease); }
.vx-faq details[open] summary::after { transform: rotate(45deg); }
.vx-faq details p { margin-top: 10px; color: var(--vx-soft); }

/* Sections slide in once (voeux.js adds .is-in when they reach the screen). Nothing is ever
   hidden beforehand: if the observer never fires, everything stays shown. */
.vx-motion [data-vx-reveal].is-in { animation: vx-in 0.6s var(--vx-ease) both; }
@keyframes vx-in { from { opacity: 0.001; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* The free result: the texts and the card, then the full version beside them. */
.vx-res { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.vx-res-main { display: grid; gap: 22px; min-width: 0; }
.vx-res-texts, .vx-res-card, .vx-res-offer { padding: 24px; }
.vx-res-texts h2 { font-size: 2rem; margin: 8px 0 16px; }
.vx-res-side { display: grid; gap: 14px; min-width: 0; }
.vx-res-offer { display: grid; gap: 14px; }
.vx-res-offer h2 { font-size: 1.7rem; }
.vx-pic { display: block; max-width: 280px; margin: 0 auto; }
.vx-pic img { display: block; width: 100%; height: auto; box-shadow: 0 18px 36px rgba(26, 29, 41, 0.18); }
.vx-compare { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.vx-compare th, .vx-compare td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--vx-line); vertical-align: top; }
.vx-compare th { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vx-soft); }
.vx-compare td:first-child { font-weight: 700; }
.vx-res-facts { display: grid; gap: 4px; font-size: 0.84rem; color: var(--vx-soft); }
.vx-res-facts span::before { content: "✓ "; color: var(--vx-pine); font-weight: 700; }
.vx-res-small { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; background: var(--vx-card); border: 1px solid var(--vx-line); border-radius: 4px; color: var(--vx-ink) !important; text-decoration: none; transition: border-color 0.4s var(--vx-ease), transform 0.4s var(--vx-ease); }
.vx-res-small:hover { border-color: var(--vx-night); transform: translateY(-2px); }
.vx-res-small .price { font-family: var(--vx-serif); font-size: 1.3rem; white-space: nowrap; }

/* The texts, ready to copy. */
.vx-texts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vx-text { padding: 16px 18px; border: 1px solid var(--vx-line); border-radius: 4px; background: #ffffff; transition: border-color 0.4s var(--vx-ease), box-shadow 0.4s var(--vx-ease); }
.vx-text.is-card { border-color: var(--vx-gold); box-shadow: inset 3px 0 0 var(--vx-gold); }
.vx-body { white-space: pre-line; }
.vx-poems .vx-body { font-family: var(--vx-serif); font-size: 1.12rem; line-height: 1.55; }
.vx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vx-act { font: inherit; font-size: 0.86rem; font-weight: 700; padding: 8px 14px; min-height: 38px; border-radius: 999px; border: 1px solid var(--vx-line-strong); background: var(--vx-card); color: var(--vx-ink); cursor: pointer; transition: border-color 0.4s var(--vx-ease), background-color 0.4s var(--vx-ease); }
.vx-act:hover { border-color: var(--vx-night); }
.vx-act-card { background: var(--vx-gold-pale); border-color: #e6d7ae; }

/* The free card maker. */
.vx-maker { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.vx-maker-preview canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 3px; background: var(--vx-night); box-shadow: 0 2px 4px rgba(26, 29, 41, 0.12), 0 24px 48px rgba(26, 29, 41, 0.18); }
.vx-maker-controls { display: grid; gap: 14px; }
.vx-maker-name { display: grid; gap: 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vx-soft); }
.vx-maker-name input { font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; min-height: 46px; padding: 8px 14px; border: 1px solid var(--vx-line-strong); border-radius: 4px; }
.vx-decors { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-decor { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.88rem; font-weight: 700; min-height: 40px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--vx-line-strong); background: var(--vx-card); color: var(--vx-ink); cursor: pointer; transition: border-color 0.4s var(--vx-ease); }
.vx-decor span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(26, 29, 41, 0.2); }
.vx-decor-neige span { background: radial-gradient(circle at 30% 30%, #ffffff 0 2px, transparent 3px), #1d2230; }
.vx-decor-sapin span { background: linear-gradient(135deg, #2f5d4a 50%, #f8f5ee 50%); }
.vx-decor-etoiles span { background: radial-gradient(circle at 60% 40%, #e2c169 0 3px, transparent 4px), #151a26; }
.vx-decor-dore span { background: #fbf8f1; box-shadow: inset 0 0 0 3px #9a7a1c; }
.vx-decor-givre span { background: #e7eef4; }
.vx-decor.is-on { border-color: var(--vx-night); box-shadow: inset 0 0 0 1px var(--vx-night); }
.vx-maker-buttons { display: grid; gap: 8px; }
.vx-maker-buttons .vx-btn { width: 100%; min-height: 48px; padding: 12px 16px; }
.vx-link-out a { font-weight: 700; }

/* The public pages. */
.vx-guide { display: grid; gap: 26px; margin-top: 18px; }
.vx-guide-card { padding: 22px; }
.vx-guide-card h2, .vx-guide-section h2 { font-size: 1.6rem; margin-bottom: 14px; }
.vx-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-jump a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--vx-line-strong); text-decoration: none; color: var(--vx-ink); font-weight: 600; font-size: 0.9rem; background: var(--vx-card); }
.vx-guide-tool { font-size: 0.95rem; color: var(--vx-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vx-guide-tool a { font-weight: 700; }

/* Gift tags to print. */
.vx-tags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vx-tag { position: relative; aspect-ratio: 3 / 4; padding: 38px 14px 14px; text-align: center; display: grid; align-content: center; gap: 6px; border: 1px dashed var(--vx-line-strong); border-radius: 4px; background: var(--vx-card); font-size: 0.92rem; line-height: 1.4; }
.vx-tag-hole { position: absolute; top: 14px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 1px solid var(--vx-line-strong); }
.vx-tag-script { font-family: var(--vx-script); font-size: 1.7rem; color: var(--vx-gold); line-height: 1.1; }
.vx-tag-1 { background: var(--vx-night); color: #ffffff; border-color: var(--vx-night); }
.vx-tag-1 .vx-tag-script { color: var(--vx-gold-bright); }
.vx-tag-2 { background: #eef3ef; }
.vx-tag-3 { background: var(--vx-gold-pale); }
@media print {
  .topbar, .crumbs, .vx-guide-tool, footer, .cta-box, .link-list, .guide h2:not(.vx-tags *), .guide .lead, .guide h1, .guide p.small, .neighbors, .consent { display: none !important; }
  .vx-tags { grid-template-columns: repeat(4, 1fr); gap: 6mm; }
  .vx-tag { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* One animated card opened from a link. */
.vx-animee { position: relative; overflow: hidden; margin-top: 18px; padding: 48px 16px 34px; border-radius: 4px; background: radial-gradient(110% 80% at 50% 0%, #33395a 0%, var(--vx-night) 60%, #151926 100%); display: grid; justify-items: center; gap: 28px; }
.vx-scene-sapin, .vx-scene-dore { background: radial-gradient(110% 80% at 50% 0%, #fffdf8 0%, var(--vx-paper) 60%, #ece5d4 100%); }
.vx-scene-givre { background: radial-gradient(110% 80% at 50% 0%, #f4f8fb 0%, #e7eef4 60%, #d3dee8 100%); }
.vx-stage { position: absolute; inset: 0; pointer-events: none; }
.vx-flake { position: absolute; top: -10px; width: 6px; height: 6px; border-radius: 50%; background: #ffffff; opacity: 0.85; animation: vx-fall 16s linear infinite; }
.vx-scene-sapin .vx-flake, .vx-scene-dore .vx-flake { background: var(--vx-gold-bright); opacity: 0.6; }
.vx-scene-givre .vx-flake { background: #9fb3c8; }
.f1 { left: 6%; animation-delay: -1s; } .f2 { left: 14%; animation-delay: -9s; } .f3 { left: 23%; animation-delay: -4s; } .f4 { left: 31%; animation-delay: -12s; }
.f5 { left: 40%; animation-delay: -6s; } .f6 { left: 49%; animation-delay: -14s; } .f7 { left: 57%; animation-delay: -2s; } .f8 { left: 65%; animation-delay: -10s; }
.f9 { left: 73%; animation-delay: -5s; } .f10 { left: 81%; animation-delay: -13s; } .f11 { left: 89%; animation-delay: -7s; } .f12 { left: 95%; animation-delay: -15s; }
.vx-envelope { position: relative; width: min(440px, 100%); padding-top: 40px; }
.vx-env-back, .vx-env-front, .vx-env-flap { position: absolute; left: 0; right: 0; }
.vx-env-back { bottom: 0; height: 180px; background: #c9b98f; border-radius: 4px; }
.vx-env-front { bottom: 0; height: 150px; background: linear-gradient(160deg, #e7dcbd, #d6c79c); border-radius: 0 0 4px 4px; clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); z-index: 3; }
.vx-env-flap { bottom: 120px; height: 90px; background: #d8c99f; clip-path: polygon(0 100%, 50% 0, 100% 100%); transform-origin: bottom; z-index: 1; transform: rotateX(180deg); }
.vx-live-card { position: relative; z-index: 4; margin: 0 22px 96px; padding: 34px 26px 30px; background: var(--vx-card); border-radius: 3px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 30px 60px rgba(0, 0, 0, 0.35); animation: vx-rise 1.6s var(--vx-ease) 0.4s both; }
.vx-script { font-family: var(--vx-script); font-size: 3.1rem; line-height: 1.1; color: var(--vx-gold); }
.vx-live-name { font-family: var(--vx-serif); font-size: 2.4rem; line-height: 1.1; margin-top: 4px !important; }
.vx-rule { display: block; width: 90px; height: 6px; margin: 14px auto; border-top: 2px solid var(--vx-gold); border-bottom: 1px solid var(--vx-gold); }
.vx-live-text { font-size: 1.05rem; line-height: 1.6; color: var(--vx-soft); }
@keyframes vx-rise { from { transform: translateY(120px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.vx-animee-after { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; color: rgba(255, 255, 255, 0.86); font-size: 0.92rem; text-align: center; }
.vx-scene-sapin .vx-animee-after, .vx-scene-dore .vx-animee-after, .vx-scene-givre .vx-animee-after { color: var(--vx-soft); }

/* The teasers of the offer pages. */
.vx-teaser-one { display: grid; place-items: center; }
.vx-strip { display: flex; gap: 12px; justify-content: center; }
.vx-strip img { display: block; width: 100%; max-width: 200px; height: auto; box-shadow: 0 12px 24px rgba(26, 29, 41, 0.16); }

/* Every page of the site (offer, result, gift page, legal pages): night bar, Bodoni titles,
   square cards, night buttons. The site's stylesheet is in the head of each of its pages. */
html:has(link[href*="voeux.css"]) { background: #f8f5ee; }
html:has(link[href*="voeux.css"]) body { background: var(--vx-paper); font-family: var(--vx-sans); color: var(--vx-ink); }
html:has(link[href*="voeux.css"]) .topbar { max-width: none; box-sizing: border-box; padding: 14px max(18px, calc((100vw - 1200px) / 2 + 18px)); background: var(--vx-night); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
html:has(link[href*="voeux.css"]) .topbar a, html:has(link[href*="voeux.css"]) .topbar span { color: #ffffff; }
html:has(link[href*="voeux.css"]) .brand { font-family: var(--vx-serif); font-weight: 500; letter-spacing: 0.01em; }
html:has(link[href*="voeux.css"]) .brand-emoji { font-size: 0; width: 22px; height: 22px; display: inline-block; vertical-align: -4px; background: url("logo.svg") center / contain no-repeat; }
html:has(link[href*="voeux.css"]) main h1, html:has(link[href*="voeux.css"]) main h2 { font-family: var(--vx-serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.08; }
html:has(link[href*="voeux.css"]) main .card { border-radius: 4px; border: 1px solid var(--vx-line); box-shadow: 0 1px 2px rgba(26, 29, 41, 0.04), 0 20px 30px rgba(26, 29, 41, 0.07); }
html:has(link[href*="voeux.css"]) main .btn { background: var(--vx-night); color: #ffffff; border-radius: 4px; box-shadow: none; }
html:has(link[href*="voeux.css"]) main .btn:hover { background: #2a3044; }
html:has(link[href*="voeux.css"]) .hero { background: radial-gradient(120% 90% at 78% 0%, #33395a 0%, var(--vx-night) 55%, #151926 100%); }
html:has(link[href*="voeux.css"]) main a:not(.btn):not(.vx-btn) { color: var(--vx-gold); }

@media (max-width: 960px) {
  .vx-hero-grid, .vx-product-grid, .vx-res, .vx-trust-grid { grid-template-columns: 1fr; }
  .vx-product.alt .vx-shot { order: 0; }
  .vx-product-grid { gap: 36px; }
  .vx-facts ul { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .vx-facts li:nth-child(3) { border-left: 0; padding-left: 0; }
  .vx-more-grid { grid-template-columns: 1fr; }
  .vx-tags { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .vx { font-size: 16px; }
  .vx-hero { padding: 22px 0 30px; }
  .vx-hero h1 { font-size: 2.35rem; margin: 8px 0 16px; }
  .vx-form { padding: 16px 14px 14px; gap: 12px; }
  .vx-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vx-chip span { min-height: 40px; padding: 0 13px; font-size: 0.92rem; }
  .vx-showcase-cards { gap: 14px; }
  .vx-facts li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .vx-intro { padding-top: 64px; }
  .vx-product { padding: 44px 0; }
  .vx-steps { grid-template-columns: 1fr; }
  .vx-steps li, .vx-steps li + li { padding: 20px 0 0; border-left: 0; }
  .vx-maker { grid-template-columns: 1fr; }
  .vx-facts li { padding: 4px 12px; font-size: 0.86rem; }
  .vx-fact-n { font-size: 1.8rem; }
  .vx-res-texts, .vx-res-card, .vx-res-offer { padding: 18px 16px; }
  .vx-live-card { margin: 0 12px 64px; padding: 26px 18px 24px; }
  .vx-script { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vx-snow, .vx-stage { display: none; }
  .vx-showcase-free, .vx-showcase-paid, .vx-live-card, .vx-motion [data-vx-reveal].is-in { animation: none; }
  .vx-btn, .vx-frame, .vx-tile, .vx-guides a, .vx-res-small { transition: none; }
  .vx-btn:hover, .vx-frame:hover, .vx-tile:hover, .vx-guides a:hover, .vx-res-small:hover { transform: none; }
}

/* The seal: a gold wax seal on the cards, the detail of this site alone. */
.vx-seal { position: absolute; left: 50%; bottom: -26px; width: 84px; height: 84px; margin-left: -42px; z-index: 3; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
.vx-hero-title { display: block; }
.vx-hero-mini { display: none; }
.vx-ai { margin-top: 8px !important; font-size: 0.82rem; color: var(--vx-muted); letter-spacing: 0.02em; }
/* The form: labels in plain words, a select dressed like the site. */
.vx-form label, .vx-form legend { font-size: 0.92rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--vx-ink); }
.vx-form select { -webkit-appearance: none; appearance: none; padding-right: 40px; font-weight: 600; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237c6410' stroke-width='2'/%3E%3C/svg%3E") right 14px center / 14px 9px no-repeat; border-radius: 999px; padding-left: 18px; cursor: pointer; }
.vx-form input[type="text"] { border-radius: 999px; padding-left: 18px; }
@media (max-width: 640px) {
  .vx-snow { display: none; }
  .vx-hero-title { display: grid; grid-template-columns: 1fr 108px; gap: 12px; align-items: center; }
  .vx-hero-mini { display: block; width: 108px; height: auto; aspect-ratio: 4 / 5; border-radius: 2px; transform: rotate(3deg); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45); background: var(--vx-paper); }
  .vx-hero h1 { font-size: 2.15rem; }
  .vx-seal { width: 64px; height: 64px; margin-left: -32px; bottom: -20px; }
}
.vx-seal-env { bottom: 40px; z-index: 5; width: 72px; height: 72px; margin-left: -36px; }
.vx-facts-lead { max-width: 820px; padding-top: 30px; color: var(--vx-soft); font-size: 1rem; }
.vx-facts ul { padding-top: 22px; }
.vx a.vx-zoom-label, .vx a.vx-zoom-label:hover { color: #ffffff; }
html:has(link[href*="voeux.css"]) main a.vx-zoom-label { color: #ffffff; }