@font-face { font-family: Geist; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: Geist; src: url("fonts/Geist-Italic-Variable.woff2") format("woff2"); font-style: italic; font-weight: 100 900; font-display: swap; }
@font-face { font-family: Newsreader; src: url("fonts/Newsreader-Latin-Variable.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; }

:root {
  --bg: #fcfcfb;
  --surface: #ffffff;
  --paper: #f6f3ee;
  --track: #f2f2ef;
  --hover: #f7f7f5;
  --ink: #000000;
  --ink-2: #3d3d38;
  --ink-3: #6f6f68;
  --line: #ebebe7;
  --line-strong: #d4d4ce;
  --field-line: #8a8a82;
  --wine: #6e1f33;
  --wine-deep: #4a1424;
  --wine-tint: #f6eef0;
  --cream: #f3e6ea;
  --error-ink: #a1261d;
  --error-bg: #fdf1ef;
  --wrap: 1120px;
  /* Échelle de 4 px ; densités partagées aux mêmes points de rupture. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-18: 72px;
  --s-24: 96px;
  --s-32: 128px;
  --gutter: var(--s-12);
  --section: var(--s-32);
  --gap-cols: var(--s-16);
  --card-padding: var(--s-8);
  --content-gap: var(--s-12);
  --control-height: var(--s-12);
  --control-small: var(--s-10);
  --pill-height: var(--s-8);
  --text-xs: 12px;
  --text-sm: 14px;
  --text-body: 16px;
  --text-intro: 20px;
  --text-item: 20px;
  --text-card: 24px;
  --text-brand: 40px;
  --brand-mark-size: 48px;
  --text-section: 48px;
  --text-figure: 48px;
  --text-hero: 64px;
  --leading-body: 1.5;
  --leading-item: 1.3;
  --leading-card: 1.2;
  --leading-display: 1.08;
  --tracking-display: -.03em;
  --tracking-card: -.02em;
  --tracking-item: -.015em;
  --measure-body: 58ch;
  --measure-intro: 44ch;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 20px;
  --r-xl: 24px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(40 20 25 / .04);
  --shadow-2: 0 1px 2px rgb(40 20 25 / .04), 0 12px 32px rgb(40 20 25 / .06);
  --shadow-3: 0 2px 4px rgb(40 20 25 / .04), 0 30px 80px rgb(40 20 25 / .10);
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: var(--ease);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 150ms;
  --t: 250ms;
  --t-slow: 500ms;
  --t-xslow: 700ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--text-body); font-weight: 400; line-height: var(--leading-body); -webkit-font-smoothing: antialiased; font-synthesis: none; }
button, input { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
p, h1, h2, h3, dl, dd { margin: 0; }
p { max-width: var(--measure-body); text-wrap: pretty; }
strong { font-weight: 500; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.warm { background: var(--paper); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: var(--gutter); z-index: 30; padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--r-s); box-shadow: var(--shadow-2); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
h1, h2 { font-weight: 300; text-wrap: balance; }
h1 { max-width: none; font-size: var(--text-hero); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h1 em { font-style: italic; font-weight: 300; color: var(--wine); }
h2 { max-width: 18ch; font-size: var(--text-section); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--text-card); font-weight: 500; line-height: var(--leading-card); letter-spacing: var(--tracking-card); }
.lead, .intro { max-width: var(--measure-intro); margin-top: var(--s-4); font-size: var(--text-intro); font-weight: 400; line-height: var(--leading-body); letter-spacing: normal; color: var(--ink-2); }
.caption { font-size: var(--text-sm); line-height: var(--leading-body); color: var(--ink-3); }
.eyebrow { font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); letter-spacing: .06em; text-transform: uppercase; }
.wine { color: var(--wine); }
.figure { display: block; font-size: var(--text-figure); font-weight: 300; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.center h2, .center .lead { margin-inline: auto; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: var(--s-2); height: var(--control-height); padding: 0 var(--s-6); border: 1px solid transparent; border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font-size: var(--text-body); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t) var(--ease); }
.btn:hover { background: #262624; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.small { height: var(--control-small); padding-inline: var(--s-4); }
.btn.secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn.secondary:hover { border-color: var(--ink-3); background: var(--hover); }
.btn.light { background: var(--surface); color: var(--wine-deep); }
.btn.light:hover { background: var(--cream); }
.text-link { color: var(--ink); text-decoration: underline; text-decoration-color: #cfcfc9; text-underline-offset: 3px; transition: text-decoration-color var(--t-fast); }
.text-link:hover { text-decoration-color: currentColor; }
.pill, .tag-wine { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: var(--r-pill); font-weight: 400; line-height: var(--leading-body); letter-spacing: normal; white-space: nowrap; }
.pill { min-height: var(--pill-height); padding-inline: var(--s-3); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-size: var(--text-xs); }
.pill.is-set { border-color: var(--ink); color: var(--ink); font-weight: 500; }
.tag-wine { min-height: var(--pill-height); padding-inline: var(--s-3); background: var(--wine-tint); color: var(--wine); font-size: var(--text-xs); font-weight: 500; }
.card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.card.raised { box-shadow: var(--shadow-3); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.fictif { flex: none; color: var(--ink-3); font-size: var(--text-xs); line-height: var(--leading-body); }

#haut { position: sticky; top: 0; z-index: 20; height: var(--s-16); border-bottom: 1px solid transparent; background: transparent; transition: background 200ms, border-color 200ms, backdrop-filter 200ms; }
#haut.scrolled { background: rgb(252 252 251 / .82); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); font-size: var(--text-body); font-weight: 600; line-height: 1; letter-spacing: -.02em; text-decoration: none; }
.brand > span, .hero-brand > span { font-family: Newsreader, Georgia, serif; font-weight: 500; font-optical-sizing: none; line-height: 1; }
.brand > span { letter-spacing: -.014em; font-variation-settings: "opsz" 16; transform: translateY(-.4px); }
.brand-mark { width: 20px; height: 20px; flex: none; color: var(--wine); }
.hero-brand { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-6); font-size: var(--text-brand); font-weight: 600; line-height: 1.2; letter-spacing: var(--tracking-card); }
.hero-brand > span { align-self: center; letter-spacing: -.020em; font-variation-settings: "opsz" 40; transform: translateY(-1px); }
.hero-brand .brand-mark { width: var(--brand-mark-size); height: var(--brand-mark-size); align-self: center; }
.brand-mark circle { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .45; }
.brand-mark path { fill: currentColor; }
.bar nav { display: flex; align-items: center; gap: var(--s-6); }
.nav-link { color: var(--ink-2); font-size: var(--text-sm); text-decoration: none; transition: color var(--t-fast); }
.nav-link:hover { color: var(--ink); }

.hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: var(--s-8); padding-block: var(--s-16); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-8); font-size: var(--text-body); }
.hero-note { margin-top: var(--s-4); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.video-frame { position: relative; margin-top: var(--content-gap); aspect-ratio: 16 / 9; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-3); }
video { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: inherit; background: var(--surface); }
#video-play { position: absolute; bottom: var(--s-6); left: 50%; transform: translateX(-50%); box-shadow: var(--shadow-3); }
#video-play:active { transform: translateX(-50%) scale(.98); }
html.js #video-play[hidden] { display: none; }

.demos { display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--content-gap); }
.demo { display: flex; flex-direction: column; padding: var(--card-padding); }
.segmented { display: flex; gap: 0; align-items: stretch; margin-top: var(--s-6); padding: var(--s-1); background: var(--track); border-radius: var(--r-pill); font-size: var(--text-xs); line-height: var(--leading-body); }
.segmented span { display: flex; align-items: center; justify-content: center; padding: var(--s-2); border-radius: var(--r-pill); text-align: center; }
.segmented .active { background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); font-weight: 500; }
.filter-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.search-name { margin-top: var(--s-4); font-size: var(--text-card); font-weight: 500; line-height: var(--leading-card); letter-spacing: var(--tracking-card); }
.search-sub { margin-top: var(--s-2); font-size: var(--text-sm); color: var(--ink-3); }
.app-results { margin-top: var(--s-6); }
.app-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--line); }
.app-row > :first-child { font-size: var(--text-sm); font-weight: 500; }
.app-row > :last-child { font-size: var(--text-sm); color: var(--ink-3); text-align: right; }
.demo-foot { padding-top: var(--s-5); margin-top: var(--s-6); font-size: var(--text-sm); line-height: var(--leading-body); color: var(--ink-2); }
.identity, .tool-line { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-3); }
.identity { margin-top: var(--s-6); font-size: var(--text-body); }
.identity svg { width: 16px; height: 16px; }
.bubble { align-self: flex-end; max-width: 30ch; margin-top: var(--s-4); padding: var(--s-4); background: var(--track); border-radius: var(--r-l) var(--r-l) var(--r-s) var(--r-l); color: var(--ink-2); font-size: var(--text-body); }
.tool-line { margin-top: var(--s-4); font-size: var(--text-xs); }
.tool-line svg { width: 14px; height: 14px; }
.answer { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--text-body); }
.mini-results { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.mini-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s-3) var(--s-4); }
.mini-card > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.mini-name { font-size: var(--text-sm); font-weight: 500; }
.mini-town { color: var(--ink-3); font-size: var(--text-sm); }
.mini-card p { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--text-body); }
.js .demo:not(.is-visible) .rise { opacity: 0; transform: translateY(8px); }
.js .demo.is-visible .rise { animation: rise 450ms calc(var(--step) * 80ms) var(--ease) both; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; margin-top: var(--content-gap); }
.plan { display: flex; flex-direction: column; padding: var(--card-padding); }
.plan .card-head { min-height: var(--s-16); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--s-2); }
.plan h3, .field-guide h3 { font-size: var(--text-item); font-weight: 500; line-height: var(--leading-item); letter-spacing: var(--tracking-item); }
.price { margin-top: var(--s-6); font-size: var(--text-figure); }
.plan-sub { margin-top: var(--s-2); font-size: var(--text-sm); color: var(--ink-3); }
.benefits { display: grid; gap: var(--s-3); list-style: none; margin: var(--s-8) 0; padding: 0; font-size: var(--text-body); }
.benefits li { display: flex; align-items: flex-start; gap: var(--s-3); }
.benefits svg { flex: none; width: 18px; height: 18px; margin-top: var(--s-1); }
.benefits path { fill: none; stroke: var(--wine); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan > .btn { flex-shrink: 0; align-self: flex-start; margin-top: auto; }
.featured { background: var(--wine-deep); border-color: var(--wine-deep); color: var(--surface); }
.featured :focus-visible { outline-color: var(--surface); }
.featured .caption, .featured .plan-sub { color: var(--cream); }
.featured .benefits path { stroke: var(--surface); }
.founder-tag { padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: rgb(255 255 255 / .12); color: var(--surface); font-size: var(--text-xs); font-weight: 500; }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.founder { padding: var(--s-4); margin-bottom: var(--s-6); border-radius: var(--r-m); background: var(--wine-tint); color: var(--wine-deep); font-size: var(--text-body); }

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); margin-top: var(--content-gap); }
.faq-column { min-width: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-6); cursor: pointer; font-size: var(--text-item); font-weight: 500; line-height: var(--leading-item); letter-spacing: var(--tracking-item); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); transition: transform 350ms var(--ease); }
.faq summary path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 400ms var(--ease), content-visibility 400ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details p { max-width: 46ch; padding-bottom: var(--s-6); color: var(--ink-2); font-size: var(--text-body); }

.access-card { max-width: 560px; margin: var(--content-gap) auto 0; padding: var(--card-padding); }
form > label, legend { display: block; margin-bottom: var(--s-2); padding: 0; font-size: var(--text-sm); font-weight: 500; line-height: 1; }
.input { width: 100%; height: var(--control-height); padding-inline: var(--s-4); border: 1px solid var(--field-line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: var(--text-body); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover { border-color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px var(--track); }
.input[aria-invalid="true"] { border-color: var(--error-ink); box-shadow: 0 0 0 1px var(--error-ink), 0 0 0 5px var(--error-bg); }
fieldset { min-width: 0; margin: var(--s-6) 0 0; padding: 0; border: 0; }
.choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice { position: relative; display: inline-flex; align-items: center; height: var(--control-small); padding-inline: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: var(--text-body); line-height: 1; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice:hover { border-color: var(--ink-3); background: var(--hover); }
.choice:has(:checked) { border-color: var(--ink); color: var(--ink); font-weight: 500; background: var(--track); }
.choice:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px var(--track); }
.field-error { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--text-sm); color: var(--error-ink); }
.field-error svg { width: 14px; height: 14px; flex: none; margin-top: var(--s-1); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
#form-acces > .btn { width: 100%; margin-top: var(--s-6); }
#access-note { margin-top: var(--s-3); text-align: center; }
.spinner { width: 15px; height: 15px; animation: spin .8s linear; }
.spinner circle { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 32 12; }
@keyframes spin { to { transform: rotate(360deg); } }
.result { text-align: center; }
.result h3 { margin-top: var(--s-4); }
.result > p { margin: var(--s-4) auto 0; overflow-wrap: anywhere; }
.result > .caption { margin-top: var(--s-3); }
.mascot-wrap { position: relative; width: 96px; margin-inline: auto; padding-top: var(--s-8); }
.mascot { display: block; width: auto; height: 96px; margin-inline: auto; overflow: visible; }
.mascot .body { transform-origin: 50px 130px; transform: rotate(7deg); }
.mascot .line { fill: none; stroke: var(--wine); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.mascot .level { transform: translateY(57px); }
.tchin { position: absolute; top: 0; left: 0; width: 100%; color: var(--wine); font-size: var(--text-body); font-weight: 600; }
.sparks { position: absolute; top: 16px; left: 0; width: 96px; height: 96px; overflow: visible; }
.sparks path { fill: none; stroke: var(--wine); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.result.celebrate .body { animation: cheers 600ms var(--ease-inout) both; }
.result.celebrate .sparks path { animation: sparkle 500ms 250ms var(--ease) both; }
.result.celebrate .tchin { animation: tchin 300ms 250ms var(--ease) both; }
@keyframes cheers { 0% { transform: rotate(0deg); } 55% { transform: rotate(11deg); } 100% { transform: rotate(7deg); } }
@keyframes sparkle { 0% { opacity: 1; d: path("M14 0h10"); } 100% { opacity: 0; d: path("M36 0h0"); } }
@keyframes tchin { from { opacity: 0; } to { opacity: 1; } }

footer { border-top: 1px solid var(--line); padding-block: var(--s-8) var(--s-10); color: var(--ink-3); font-size: var(--text-sm); }
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-6); }
.footer-inner > div { display: flex; flex: none; gap: var(--s-6); }
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1199px) {
  :root { --gutter: var(--s-8); --section: var(--s-24); --gap-cols: var(--s-8); --card-padding: var(--s-6); --text-hero: 48px; --text-section: 40px; --text-brand: 32px; --brand-mark-size: 40px; }
  .hero-brand > span { letter-spacing: -.018em; font-variation-settings: "opsz" 32; transform: translateY(-.8px); }
}
@media (max-width: 860px) {
  .bar .nav-link { display: none; }
  .demos { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { flex-direction: column; }
}
@media (max-width: 559px) {
  :root { --gutter: var(--s-5); --section: var(--s-18); --content-gap: var(--s-8); --text-hero: 40px; --text-section: 32px; --text-intro: 16px; }
  .hero { padding-block: var(--s-12); }
  .hero-actions { flex-direction: column; gap: var(--s-5); }
  .hero-actions .btn { width: 100%; }
  .hero-note { text-align: center; }
  .segmented .extra { display: none; }
  .segmented span { padding-inline: var(--s-3); }
  .filter-pills { gap: var(--s-2); }
  .filter-pills .pill { padding-inline: var(--s-3); }
  .app-row { gap: var(--s-3); }
  .footer-inner { gap: var(--s-4); }
}
/* L'application : mêmes surfaces, filtres et lignes que le lecteur Vinaria. */

.app-preview { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-3); background: var(--surface); overflow: hidden; }
.preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-6) var(--s-6) 0; }
.preview-count { color: var(--ink-3); font-size: var(--text-body); font-weight: 400; font-variant-numeric: tabular-nums; }
.preview-summary { margin-top: var(--s-2); color: var(--ink-3); font-size: var(--text-xs); line-height: var(--leading-body); }

.preview-controls { padding: 0 var(--s-6) var(--s-6); }
.preview-controls .segmented { display: inline-flex; }
.preview-controls .segmented span { padding: var(--s-2) var(--s-4); }
.preview-controls .filter-pills { gap: var(--s-2); margin-top: var(--s-3); }
.preview-controls .pill { gap: var(--s-2); }
.preview-controls .pill .line-icon { width: 12px; height: 12px; }
.preview-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto repeat(4, auto) 1fr; align-items: start; border-top: 1px solid var(--line); }
.list-heading { grid-column: 1; display: flex; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-4); color: var(--ink-3); font-size: var(--text-xs); }
.company-row { grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-4); border-top: 1px solid var(--line); }
.company-row > div { min-width: 0; }
.company-name { display: block; color: var(--ink); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
.company-trade { display: block; margin-top: var(--s-1); color: var(--ink-3); font-size: var(--text-xs); line-height: var(--leading-body); }
.company-city { color: var(--ink-2); font-size: var(--text-sm); }
.row-0 { background: var(--track); }
.company-sheet { min-width: 0; padding: var(--s-6); background: var(--surface); }
.hero-sheet { grid-column: 2; grid-row: 1 / 7; align-self: stretch; border-left: 1px solid var(--line); padding: var(--s-6) var(--s-5); }
.company-sheet h3 { font-size: var(--text-card); font-weight: 500; line-height: var(--leading-card); letter-spacing: var(--tracking-card); }
.sheet-meta { margin-top: var(--s-2); color: var(--ink-3); font-size: var(--text-sm); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.company-sheet .pill, .company-sheet .tag-wine { min-height: var(--pill-height); height: auto; max-width: 100%; padding: var(--s-1) var(--s-3); font-size: var(--text-xs); line-height: var(--leading-body); white-space: normal; }
.sheet-description { margin-top: var(--s-6); color: var(--ink-2); font-size: var(--text-sm); line-height: var(--leading-body); }
.sheet-contacts { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.contact-line { display: flex; align-items: flex-start; gap: var(--s-2); padding-block: var(--s-2); color: var(--ink-2); font-size: var(--text-sm); line-height: var(--leading-body); }
.contact-line span { min-width: 0; overflow-wrap: anywhere; }
.line-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-line .line-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--ink-3); }
.js .app-preview:not(.play) .rise, .js .app-preview:not(.play) .hero-sheet { opacity: 0; }
.js .app-preview:not(.play) .row-0 { background: var(--surface); }
.js .app-preview.play .rise { animation: rise 400ms calc(var(--step) * 60ms) var(--ease) both; }
.js .app-preview.play .row-0 { animation: rise 400ms var(--ease) both, select-row 300ms 600ms var(--ease) both; }
.js .app-preview.play .hero-sheet { animation: sheet-in 700ms 900ms var(--ease) both; }
@keyframes select-row { from { background: var(--surface); } to { background: var(--track); } }
@keyframes sheet-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

/* Quatre paliers, une même échelle. */
#tri { border-top: 1px solid var(--line); }
.funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--content-gap); }
.funnel-step { min-width: 0; }
.funnel-step p { min-height: 3em; margin-top: var(--s-4); font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink-2); }
.funnel-track { height: var(--s-2); margin-top: var(--s-5); border-radius: var(--r-pill); background: var(--track); }
.funnel-bar { height: 100%; border-radius: inherit; width: calc(var(--proportion) * 100%); background: color-mix(in srgb, var(--wine) 58%, var(--surface)); }
.funnel-step:first-child .funnel-bar { background: var(--wine); }
.funnel-step:nth-child(2) .funnel-bar { background: color-mix(in srgb, var(--wine) 86%, var(--surface)); }
.funnel-step:nth-child(3) .funnel-bar { background: color-mix(in srgb, var(--wine) 72%, var(--surface)); }
.funnel-step:first-child .figure { color: var(--wine); }
.funnel-caption { margin-top: var(--s-6); }
.js .funnel:not(.is-visible) .funnel-bar { width: 100%; }
.js .funnel.is-visible .funnel-bar { animation: filter-bar 600ms calc(var(--step) * 120ms) var(--ease-out) both; }
@keyframes filter-bar { from { width: 100%; } to { width: calc(var(--proportion) * 100%); } }

/* La fiche et ses champs. */
.fiche-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--gap-cols); margin-top: var(--content-gap); }
.full-sheet { padding: var(--card-padding); }
.full-sheet h3 { margin-top: var(--s-6); }

.sheet-socials { display: flex; gap: var(--s-1); margin-top: var(--s-4); }
.social-icon { display: grid; place-items: center; width: var(--control-small); height: var(--control-small); border-radius: var(--r-pill); color: var(--ink-3); }
.field-guide { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.field-guide li { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-4) 0; border-radius: var(--r-s); }
.field-guide .line-icon { margin-top: var(--s-1); color: var(--wine); }

.field-guide p { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--text-body); line-height: var(--leading-body); }
@media (min-width: 960px) and (hover: hover) {
  .field-guide li:hover h3 { color: var(--wine); }
}
@media (min-width: 960px) {
  .full-sheet [data-field] { border-radius: var(--r-s); transition: background-color 200ms; }
  .full-sheet [data-field].is-highlighted { background-color: var(--wine-tint); }
}
@media (max-width: 1199px) and (min-width: 861px) {
  .hero { gap: var(--s-8); padding-block: var(--s-8); }
  .preview-heading { align-items: flex-start; padding: var(--s-5) var(--s-4) 0; gap: var(--s-2); }
  .preview-controls { padding: 0 var(--s-4) var(--s-5); }
  .hero-sheet { padding: var(--s-5) var(--s-4); }
  .company-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); padding: var(--s-4); }
}
@media (max-width: 959px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan .card-head { min-height: 0; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .faq-column + .faq-column { border-top: 0; }
  .fiche-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .full-sheet { width: 100%; max-width: 600px; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-12); }
  .app-preview { width: 100%; max-width: 640px; margin-inline: auto; }
  .funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
}
@media (max-width: 559px) {
  .hero h1 { width: 100%; }
  .hero-note { max-width: 32ch; margin-inline: auto; }
  .preview-heading { padding: var(--s-5) var(--s-4) 0; gap: var(--s-2); }
  .preview-controls { padding: 0 var(--s-4) var(--s-5); }
  .preview-controls .segmented { width: 100%; }
  .preview-controls .segmented span { flex: 1; padding-inline: var(--s-2); }
  .preview-controls .pill { min-height: var(--pill-height); height: auto; max-width: 100%; padding-block: var(--s-1); line-height: var(--leading-body); white-space: normal; }
  .preview-body { display: flex; flex-direction: column; }
  .preview-body > * { width: 100%; }
  .list-heading { order: 0; }
  .row-0 { order: 1; }
  .hero-sheet { order: 2; padding: var(--s-6) var(--s-5); border-left: 0; border-top: 1px solid var(--line); }
  .row-1 { order: 3; }
  .row-2 { order: 4; }
  .row-3 { display: none; }
  .company-row { padding: var(--s-4); }
  .funnel { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .funnel-step p { min-height: 0; margin-top: var(--s-2); }
  .funnel-track { margin-top: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .js .app-preview .rise, .js .app-preview .hero-sheet, .js .app-preview:not(.play) .rise, .js .app-preview:not(.play) .hero-sheet { opacity: 1; transform: none; }
  .js .app-preview .row-0, .js .app-preview:not(.play) .row-0 { background: var(--track); }
  .js .funnel .funnel-bar { width: calc(var(--proportion) * 100%); }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .faq details::details-content { transition: none; }
  .js .reveal, .js .demo .rise { opacity: 1; transform: none; }
  .sparks { display: none; }
  .tchin { opacity: 1; }
  .mascot .body { transform: rotate(7deg); }
}