/* Site vitrine Decantia : papier chaud, encre, une seule couleur de vin. Une famille de caractères (Instrument Sans),
   le logotype en Garamond. Les visuels sont de vraies captures de l'application, posées dans un cadre de téléphone.
   Le mouvement reste discret et s'efface quand le système demande moins d'animations. */
@font-face { font-family: 'Instrument Sans'; src: url('fonts/instrument-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/instrument-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/instrument-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #F6F1EA;
  --paper-2: #EDE5DA;
  --card: #FBF8F3;
  --ink: #1B1512;
  --ink-2: #4B423C;
  --ink-3: #8A7E75;
  --line: #E2D8CC;
  --line-2: #D2C6B8;
  --wine: #7A1630;
  --green: #1A7050;
  --night: #151113;
  --cream: #F4EEE7;
  --mono: var(--ink);
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pad: clamp(20px, 4vw, 40px);
  --section: clamp(80px, 10vw, 140px);
  --panel: clamp(24px, 3.4vw, 44px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { min-height: 100vh; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
.cjk body, html.cjk { word-break: keep-all; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--wine); color: var(--cream); }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.wrap { width: min(1200px, 100%); margin-inline: auto; padding-inline: var(--pad); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 80; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* Typographie : grands titres très serrés, la fin du titre en ton atténué (jamais d'italique décoratif). */
.display { font-weight: 600; font-size: clamp(2.9rem, 1.2rem + 6.4vw, 6.4rem); line-height: .95; letter-spacing: -.055em; text-wrap: balance; }
.h2 { font-weight: 600; font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4rem); line-height: 1; letter-spacing: -.048em; text-wrap: balance; }
.display em, .h2 em { font-style: normal; color: var(--ink-3); }
.lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.32rem); line-height: 1.5; color: var(--ink-2); max-width: 36rem; }
.section-lead { color: var(--ink-2); max-width: 32rem; font-size: 1.1rem; }
h3 { font-size: 1.15rem; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; }
.cjk .display, .cjk .h2 { letter-spacing: -.02em; line-height: 1.15; }

/* Logotype. */
.wordmark { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; letter-spacing: .24em; padding-left: .24em; }
.mono-glass { fill: var(--mono); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand .mono { width: 24px; height: 24px; }
.brand .wordmark { font-size: 1rem; }

/* Boutons en pilule. */
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn, .soon { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; }
.btn { border: 1px solid transparent; transition: transform .25s var(--ease), background-color .2s, border-color .2s; }
.btn:active { transform: scale(.98); }
.btn-primary, .soon { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; transform: translateY(-1px); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.soon { font-weight: 500; }
.btn, .soon { text-align: center; line-height: 1.25; padding-block: 10px; text-wrap: balance; }
@media (max-width: 420px) { .btn, .soon { gap: 8px; padding-inline: 18px; font-size: .92rem; } }
.note { margin-top: 16px; color: var(--ink-3); font-size: .92rem; }

/* En-tête : barre flottante en pilule, translucide. */
.top { position: fixed; z-index: 40; top: calc(10px + env(safe-area-inset-top, 0px)); left: 0; right: 0; padding-inline: 10px; pointer-events: none; }
.top-bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 16px; max-width: 1080px; height: 58px; margin-inline: auto; padding: 0 9px 0 22px; border-radius: 999px; background: rgba(251, 248, 243, .72); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(27, 21, 18, .07); box-shadow: 0 10px 30px -20px rgba(27, 21, 18, .35); transition: background-color .3s, box-shadow .3s; }
.top.scrolled .top-bar { background: rgba(251, 248, 243, .86); box-shadow: 0 16px 40px -20px rgba(27, 21, 18, .45); }
.nav { display: none; gap: 2px; margin-left: auto; }
.nav a { padding: 8px 14px; border-radius: 999px; font-size: .93rem; color: var(--ink-2); text-decoration: none; transition: background-color .2s, color .2s; }
.nav a:hover { background: rgba(27, 21, 18, .06); color: var(--ink); }
.nav a.is-active { background: var(--ink); color: var(--paper); }
@media (min-width: 1000px) { .nav { display: flex; } }
.lang { position: relative; margin-left: auto; }
@media (min-width: 1000px) { .lang { margin-left: 0; } }
.lang summary, .menu summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer; font-size: .85rem; font-weight: 600; }
.lang summary::-webkit-details-marker, .menu summary::-webkit-details-marker { display: none; }
.lang summary { background: rgba(27, 21, 18, .06); color: var(--ink-2); }
.lang summary:hover { background: rgba(27, 21, 18, .1); color: var(--ink); }
.lang ul { position: absolute; right: 0; top: calc(100% + 12px); min-width: 190px; padding: 6px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 50px -24px rgba(27, 21, 18, .4); }
.lang a { display: block; padding: 9px 14px; border-radius: 14px; text-decoration: none; color: var(--ink-2); font-size: .95rem; }
.lang a:hover, .lang a[aria-current] { background: var(--paper-2); color: var(--ink); }
.menu summary { background: var(--ink); color: var(--paper); }
.menu summary i { position: relative; width: 14px; height: 8px; border-block: 1.5px solid currentColor; transition: height .25s var(--ease); }
.menu[open] summary i { height: 1.5px; border-bottom-width: 0; }
.menu nav { position: absolute; left: 0; right: 0; top: calc(100% + 10px); display: grid; padding: 10px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(27, 21, 18, .5); }
.menu nav a { padding: 15px 18px; border-radius: 18px; font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; text-decoration: none; }
.menu nav a:hover, .menu nav a.is-active { background: var(--paper-2); }
@media (min-width: 1000px) { .menu { display: none; } }
@media (max-width: 400px) { .top-bar { gap: 8px; padding-left: 16px; } .menu summary span { display: none; } .menu summary { padding: 0 13px; } .brand .wordmark { font-size: .92rem; } }
@media (max-width: 360px) { .lang summary span { display: none; } .lang summary { padding: 0 11px; } .brand { gap: 8px; } .brand .wordmark { letter-spacing: .18em; } }

/* Téléphone : cadre dessiné, capture réelle de l'application. */
.device { --w: 280px; position: relative; flex: none; width: var(--w); margin: 0; padding: calc(var(--w) * .03); border-radius: calc(var(--w) * .13); background: #0D0A0B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 2px 4px rgba(27, 21, 18, .08), 0 40px 80px -40px rgba(43, 18, 26, .6); }
.device img { width: 100%; height: auto; border-radius: calc(var(--w) * .095); background: #1F1A1C; }

/* Héros centré : titre, bouton, trois écrans en éventail sur un aplat de vin, chiffres clés. */
.hero { padding: calc(132px + env(safe-area-inset-top, 0px)) 0 clamp(56px, 8vw, 104px); overflow-x: clip; }
.hero-copy { display: grid; justify-items: center; text-align: center; }
.hero .display { max-width: 13ch; }
.cjk .hero .display { max-width: 16ch; }
.hero .lead { margin-top: 28px; }
.hero .actions { justify-content: center; margin-top: 34px; }
.stage { position: relative; margin-top: clamp(56px, 8vw, 96px); isolation: isolate; }
.stage::before { content: ''; position: absolute; z-index: -1; left: max(var(--pad), calc(50% - 580px)); right: max(var(--pad), calc(50% - 580px)); top: 34%; bottom: 0; border-radius: var(--panel); background: var(--wine); }
.fan { display: flex; justify-content: center; align-items: flex-end; padding: 0 var(--pad) clamp(36px, 5vw, 64px); }
.fan .device { --w: clamp(136px, 27vw, 300px); }
.fan .fan-side { --w: clamp(108px, 22vw, 250px); }
.fan-center { z-index: 2; }
.fan-left { margin-right: calc(var(--w) * -.16); transform: rotate(-7deg) translateY(5%); transform-origin: 100% 100%; }
.fan-right { margin-left: calc(var(--w) * -.16); transform: rotate(7deg) translateY(5%); transform-origin: 0 100%; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px clamp(32px, 6vw, 88px); margin-top: clamp(40px, 6vw, 64px); text-align: center; }
.facts dt { font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); font-weight: 600; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.facts dd { margin-top: 8px; color: var(--ink-3); font-size: .95rem; }

/* Sections. */
.section { padding: var(--section) 0; }
.head { display: grid; gap: 20px; margin-bottom: clamp(44px, 6vw, 80px); }
@media (min-width: 900px) { .head { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 48px; } .head .section-lead { justify-self: end; } }

/* Nuancier : sur ordinateur, la robe survolée s'élargit. */
.robes { padding-top: clamp(40px, 6vw, 80px); }
.robe-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px 8px; }
.robe-row li { display: grid; gap: 8px; }
.robe-row i { display: block; aspect-ratio: 3 / 4; border-radius: 14px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 74%, #000)); }
.robe-row span { font-size: .84rem; line-height: 1.3; color: var(--ink-2); }
@media (min-width: 900px) {
  .robe-row { display: flex; gap: 8px; height: clamp(240px, 24vw, 320px); }
  .robe-row li { position: relative; display: block; flex: 1 1 0; min-width: 0; border-radius: 20px; overflow: hidden; transition: flex-grow .55s var(--ease); }
  .robe-row li:hover { flex-grow: 2.6; }
  .robe-row i { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
  .robe-row span { position: absolute; left: 14px; right: 14px; bottom: 14px; font-weight: 600; font-size: .86rem; line-height: 1.2; }
  .robe-row .dark span { color: rgba(255, 255, 255, .92); }
  .robe-row .light span { color: rgba(27, 21, 18, .82); }
}

/* Méthode : sur ordinateur, le téléphone reste à l'écran et change d'écran avec l'étape lue. */
.steps { display: grid; gap: 28px 32px; }
.steps li { padding-top: 18px; border-top: 1px solid var(--line-2); }
.steps .n { font-size: .85rem; font-weight: 600; color: var(--wine); font-variant-numeric: tabular-nums; }
.steps h3 { margin-top: 12px; font-size: 1.35rem; letter-spacing: -.025em; }
.steps p { margin-top: 8px; color: var(--ink-2); }
@media (min-width: 720px) { .steps { grid-template-columns: 1fr 1fr; } }
.story-phone { display: none; }
.strip { display: flex; gap: 16px; margin: clamp(44px, 7vw, 72px) calc(var(--pad) * -1) 0; padding: 8px var(--pad) 36px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip .device { --w: 230px; scroll-snap-align: center; }
@media (min-width: 1000px) {
  .story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; padding: 0; border: 0; }
  .js .steps li { opacity: .25; transition: opacity .45s var(--ease); }
  .js .steps li.is-active { opacity: 1; }
  .steps h3 { font-size: clamp(2rem, 1.2rem + 1.8vw, 2.9rem); line-height: 1.02; letter-spacing: -.045em; }
  .steps p { margin-top: 14px; max-width: 26rem; font-size: 1.12rem; }
  .story-phone { position: sticky; top: max(104px, calc(50vh - 340px)); display: flex; justify-content: center; align-self: start; padding: 48px 0; isolation: isolate; }
  .story-phone::before { content: ''; position: absolute; z-index: -1; inset: 0 4%; border-radius: var(--panel); background: var(--paper-2); }
  .story-phone .device { --w: 290px; display: grid; }
  .story-phone img { grid-area: 1 / 1; opacity: 0; transition: opacity .5s var(--ease); }
  .story-phone img.is-active { opacity: 1; }
  .strip { display: none; }
}
.reference { display: grid; gap: 12px 48px; margin-top: clamp(36px, 5vw, 64px); padding: clamp(24px, 3vw, 36px); border-radius: var(--panel); background: var(--card); border: 1px solid var(--line); }
.reference p { color: var(--ink-2); max-width: 40rem; }
.reference .sip { color: var(--ink-3); font-size: .95rem; }
@media (min-width: 900px) { .reference { grid-template-columns: 1fr 2fr; } .reference p { grid-column: 2; } .reference h3 { grid-row: span 2; } }

/* Jeux : cartes de fonctions, deux écrans. */
.play-grid { display: grid; gap: 56px; align-items: start; }
.features { display: grid; gap: 10px; margin-top: clamp(32px, 5vw, 52px); }
.features > li { padding: 22px 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); transition: border-color .25s, transform .3s var(--ease); }
.features > li:hover { border-color: var(--line-2); transform: translateY(-2px); }
.features p { margin-top: 6px; color: var(--ink-2); font-size: .98rem; }
@media (min-width: 720px) { .features { grid-template-columns: 1fr 1fr; } }
.play-visual { position: relative; display: flex; justify-content: center; padding-top: 40px; }
.play-visual .device-front { --w: min(60vw, 270px); transform: translateX(-18%); }
.play-visual .device-back { position: absolute; top: 0; right: 4%; --w: min(46vw, 220px); }
@media (min-width: 1000px) {
  .play-grid { grid-template-columns: 1.35fr 1fr; gap: 64px; }
  .play-visual { position: sticky; top: 112px; justify-content: flex-start; }
  .play-visual .device-front { --w: 280px; transform: none; }
  .play-visual .device-back { right: -4%; --w: 230px; }
}

/* La cave, comme dans l'application : bouteille, apogée, frise (zone verte = fenêtre, point = aujourd'hui). */
.cellar { display: grid; gap: 12px; margin-top: 18px; }
.cellar li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; align-items: center; }
.cellar svg { width: 14px; height: auto; }
.cellar small { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: .82rem; font-variant-numeric: tabular-nums; }
.cellar b { position: relative; display: block; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--line), rgba(26, 112, 80, .55) 30%, rgba(26, 112, 80, .55) 70%, var(--line)); }
.cellar b i { position: absolute; top: 50%; left: var(--now); width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid var(--card); transform: translate(-50%, -50%); }

/* Panneaux pleine largeur aux coins arrondis : soirées (nuit), fin de page (vin). */
.dark, .final { margin-inline: 10px; border-radius: var(--panel); }
.dark { --mono: var(--cream); background: var(--night); color: var(--cream); }
.dark .h2 em { color: #9C8F88; }
.dark .section-lead { color: #CFC4BD; }
.party-grid { display: grid; gap: 56px; align-items: center; }
.party-copy .section-lead { margin-top: 24px; }
.points { display: grid; gap: 12px; margin-top: 28px; }
.points li { display: flex; gap: 12px; align-items: flex-start; }
.points .ico { margin-top: .2em; color: var(--wine); }
.dark .points .ico { color: #E0587A; }
.party-visual { display: flex; justify-content: center; }
.dark .device { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -40px rgba(0, 0, 0, .9); }
@media (min-width: 960px) { .party-grid { grid-template-columns: 1fr 1fr; } .party-visual .device { --w: 300px; } }

/* Professionnels. */
.pro-grid { display: grid; gap: 40px; }
.pro-grid .section-lead { margin-top: 24px; }
.pro-box { padding: clamp(26px, 4vw, 40px); border-radius: var(--panel); background: var(--card); border: 1px solid var(--line); }
.pro-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.pro-price strong { font-size: 1.7rem; letter-spacing: -.035em; }
.pro-price span { color: var(--ink-3); }
.pro-box .points { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.pro-how { margin-top: 24px; padding: 14px 18px; border-radius: 16px; background: var(--paper-2); font-weight: 600; }
@media (min-width: 960px) { .pro-grid { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 72px; } }

/* Prix : trois cartes, la recommandée en encre. */
.plans { display: grid; gap: 12px; }
.plan { display: flex; flex-direction: column; padding: 30px; border-radius: var(--panel); border: 1px solid var(--line); background: var(--card); transition: transform .35s var(--ease); }
.plan:hover { transform: translateY(-3px); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.plan-price { margin-top: 20px; color: var(--ink-3); }
.plan-price strong { font-size: 2.6rem; letter-spacing: -.05em; color: var(--ink); font-weight: 600; }
.plan-sub { min-height: 1.5em; margin-top: 4px; color: var(--ink-3); font-size: .92rem; }
.plan ul { display: grid; gap: 10px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .97rem; }
.plan ul li { display: flex; gap: 10px; align-items: flex-start; }
.plan ul .ico { margin-top: .2em; color: var(--wine); }
.plan-featured { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.plan-featured .plan-price, .plan-featured .plan-sub { color: #B8ACA4; }
.plan-featured .plan-price strong { color: var(--cream); }
.plan-featured ul { border-top-color: #3A3134; }
.plan-featured ul .ico { color: #E0587A; }
.badge { padding: 5px 12px; border-radius: 999px; background: var(--cream); color: var(--ink); font-size: .78rem; font-weight: 600; }
.fine { margin-top: 18px; color: var(--ink-3); font-size: .88rem; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); } }

/* Questions. */
.faq-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: 1fr 1.6fr; gap: 72px; } .faq-grid .h2 { position: sticky; top: 112px; align-self: start; } }
.qa { border-bottom: 1px solid var(--line-2); }
.qa:first-child { border-top: 1px solid var(--line-2); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; cursor: pointer; font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(27, 21, 18, .06); transition: background-color .2s, transform .3s var(--ease); }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--ink); }
.qa summary i::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.qa summary:hover i { background: rgba(27, 21, 18, .1); }
.qa[open] summary i { transform: rotate(180deg); }
.qa[open] summary i::after { transform: rotate(0); }
.qa p { padding: 0 48px 24px 0; color: var(--ink-2); max-width: 40rem; }

/* Fin de page : panneau de vin, titre centré, trois écrans qui montent du bas. */
.final { --mono: var(--cream); background: var(--wine); color: var(--cream); overflow: hidden; text-align: center; }
.final-copy { display: grid; justify-items: center; padding-top: clamp(80px, 10vw, 136px); }
.final .display { max-width: 14ch; font-size: clamp(2.6rem, 1.2rem + 5vw, 5.4rem); }
.final .display em { color: #E7B9C3; }
.final .lead { margin-top: 24px; color: #F0D9DE; }
.final .actions { justify-content: center; margin-top: 32px; }
.final .soon, .final .btn-primary { background: var(--cream); color: var(--ink); }
.final .btn-primary:hover { background: #fff; }
.final-visual { display: flex; justify-content: center; align-items: flex-start; height: clamp(260px, 34vw, 420px); margin-top: clamp(48px, 7vw, 80px); }
.final-visual .device { --w: clamp(150px, 24vw, 280px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 -20px 60px -30px rgba(0, 0, 0, .6); }
.final-visual .fan-side { --w: clamp(124px, 20vw, 236px); margin-top: 8%; }

/* Pied de page. */
.foot { padding: 64px 0 40px; font-size: .93rem; color: var(--ink-2); }
.foot-grid { display: grid; gap: 32px; }
.foot-brand p { margin-top: 12px; max-width: 22rem; }
.foot-links, .foot-langs { display: grid; gap: 8px; align-content: start; }
.foot-langs { grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.foot a { text-decoration: none; }
.foot a:hover, .foot a[aria-current] { color: var(--ink); text-decoration: underline; }
.health { display: grid; gap: 6px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line-2); color: var(--ink-3); font-size: .86rem; }
.health-message { color: var(--ink); font-weight: 600; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* Contrôle de l'âge. */
.gate { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); background: rgba(27, 21, 18, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gate-card { width: min(420px, 100%); padding: clamp(28px, 5vw, 40px); border-radius: 32px; background: var(--paper); display: grid; gap: 12px; box-shadow: 0 40px 80px -30px rgba(27, 21, 18, .6); }
.gate-card .mono { width: 40px; height: 40px; margin-bottom: 8px; }
.gate-card h2 { font-size: 1.9rem; line-height: 1.05; letter-spacing: -.04em; font-weight: 600; }
.gate-card p { color: var(--ink-2); }
.gate-actions { display: grid; gap: 8px; margin-top: 14px; }
.gate-refused { color: var(--wine) !important; font-weight: 600; }
.gate-open { overflow: hidden; }

/* Choix de la langue (decantia.fr/). */
.chooser-main { min-height: 100svh; display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; padding-block: 64px; }
.chooser-wordmark { font-size: 1.5rem; margin-bottom: 24px; }
.chooser-list { display: grid; gap: 8px; width: min(540px, 100%); grid-template-columns: 1fr 1fr; text-align: left; }
.chooser-list a { display: grid; gap: 2px; padding: 16px 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); text-decoration: none; transition: border-color .2s; }
.chooser-list a:hover { border-color: var(--ink); }
.chooser-list span { font-weight: 600; }
.chooser-list small { color: var(--ink-3); }

/* Pages utilitaires : lien ouvert sans l'application, retour de paiement, textes juridiques. */
.mono.final-mono { width: 56px; height: 56px; }
.page-top { display: flex; align-items: center; min-height: 72px; }
.page-main { min-height: calc(100svh - 72px); display: grid; align-content: center; justify-items: center; gap: 18px; text-align: center; padding-block: 32px 64px; }
.page-main .final-mono { margin-bottom: 8px; }
.page-main .lead { margin-inline: auto; }
.page-main .actions { justify-content: center; margin-top: 8px; }
.code-box { display: grid; gap: 8px; padding: 18px 28px; border-radius: 24px; border: 1px solid var(--line); background: var(--card); max-width: 30rem; }
.code-box p:first-child { color: var(--ink-2); font-size: .95rem; }
.code { font-weight: 600; letter-spacing: .3em; padding-left: .3em; font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); font-variant-numeric: tabular-nums; }
.page-home { margin-top: 10px; }
.page-home a { color: var(--ink-3); }
.legal { max-width: 46rem; padding-block: 16px 64px; }
.legal h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 600; margin-bottom: 24px; text-wrap: balance; }
.legal h2 { font-size: 1.35rem; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; margin: 40px 0 12px; }
.legal h3 { font-size: 1.1rem; margin: 28px 0 8px; }
.legal p, .legal ul, .legal ol, .legal table { margin-bottom: 14px; color: var(--ink-2); }
.legal ul { list-style: disc; padding-left: 1.3em; }
.legal ol { list-style: decimal; padding-left: 1.3em; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--ink); }
.legal-table { width: 100%; overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--ink); font-weight: 600; }
.legal-note { color: var(--ink-3); font-size: .92rem; }
.page-foot { padding-block: 24px 48px; border-top: 1px solid var(--line); font-size: .93rem; }
.page-foot ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.page-foot a { color: var(--ink-2); }

/* Mouvement : écrans du héros qui montent à l'ouverture, blocs qui apparaissent au défilement, réponses en fondu. */
@media (prefers-reduced-motion: no-preference) {
  .fan .device { animation: rise .9s var(--ease) both; }
  .fan .fan-center { animation-delay: .05s; }
  .fan .fan-left { animation-delay: .18s; }
  .fan .fan-right { animation-delay: .28s; }
  .qa[open] p { animation: fade .3s ease both; }
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 48px; } }
@keyframes fade { from { opacity: 0; translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}