/* Hallmark · shape: Bento Grid · genre: modern-minimal · theme: Coral (deal 2/3, seed vitrine-remizo-moteur-offres-968c·51153b48·2026-11-09·r0) · job: sign up · draw: f4b748
 * hero: Settled · nav: masthead · footer: index columns · imagery: screenshots 4 (studio, mode démo, Playwright) · signature: le ticket de caisse traité par Remizo, posé sur le bureau, la remise et les points imprimés puis « Validé » pressé à l'orange
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, une page produit B2B a peu de thèse ; elle la prend dans « la caisse n'attend pas » : tout part du ticket réel, jamais d'un tableau de bord inventé */
/* Hallmark · waive 1 · Poppins imposée par la charte Remizo (brand/build.mjs, logo et studio en Poppins) · la marque Remizo n'a qu'une police, le site doit parler comme le studio qu'il montre */
/* Hallmark · answered F4 · le second bouton est la carte de papier du thème Coral (letterpress), l'encre reste la seule action pleine ; l'onglet actif est un état, pas un bouton */
/* Hallmark · answered F15 · 24px dans la barre de navigation, 40px dans la tuile statistiques, 96px entre texte et visuel du hero et de la fermeture : trois échelles voulues, les grilles de contenu gardent --gap-columns */
@import url("./tokens.css");
@import url("./base.css");

/* ── Commandes : cartes typographiques ─────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn--card { background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); text-shadow: 0.5px 0.75px 0 var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
.btn--ink { background: var(--color-board); color: var(--color-board-type); text-shadow: 0 -0.75px 0 var(--color-ink); box-shadow: var(--cast-stock); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.btn:active { transform: translateY(1px); box-shadow: var(--edge-stock); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.on-board .btn:focus-visible, .on-board a:focus-visible { outline-color: var(--color-accent); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--color-accent-2); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.fig { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.lead { margin: 0; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 40ch; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* ── Nav : masthead ─────────────────────────────────────────────── */
.mast { position: relative; z-index: var(--z-raised); background: var(--color-desk); border-bottom: 1px solid var(--color-rule-2); }
.mast__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 76px; gap: var(--space-lg); }
.mast__links { display: flex; gap: var(--space-lg); font-size: var(--text-sm); font-weight: 500; }
.mast__links a, .mast__doc { text-decoration: none; color: var(--color-ink-2); padding-block: var(--space-xs); white-space: nowrap; }
.mast__links a:hover, .mast__doc:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.mast__brand { display: block; line-height: 0; }
.mast__brand img { height: 40px; width: auto; }
.mast__end { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); font-weight: 500; }

/* ── Bureau et papier ───────────────────────────────────────────── */
.desk { background-color: var(--color-desk); background-image: radial-gradient(90% 120% at 0% 30%, var(--color-cotton), transparent 62%), var(--tex-desk); }
.stock { background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); border-radius: 3px; }

/* ── Hero : Settled ─────────────────────────────────────────────── */
.hero { min-height: calc(100svh - 77px); display: grid; align-items: center; padding-block: var(--space-2xl); box-sizing: border-box; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.hero__text h1 { max-width: 12ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }

.hero__desk { position: relative; margin: 0; height: 600px; }
.receipt { position: absolute; left: 6%; top: 2%; width: 330px; padding: var(--space-lg); transform: rotate(-2.5deg); }
.receipt p { margin: 0; }
.receipt__shop { font-weight: 600; font-size: var(--text-lg); text-align: center; letter-spacing: -0.01em; }
.receipt__meta { margin-top: var(--space-2xs) !important; text-align: center; font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5; }
.receipt__lines { width: 100%; margin-top: var(--space-md); border-collapse: collapse; font-size: var(--text-sm); }
.receipt__lines td { padding: var(--space-2xs) 0; }
.receipt__lines td:last-child { text-align: right; white-space: nowrap; }
.receipt__sub td { border-top: 1px dashed var(--color-rule-2); padding-top: var(--space-xs); }
.receipt__rz td { color: var(--color-ink-2); }
.receipt__gain td:last-child { color: var(--color-gain); font-weight: 500; }
.receipt__total td { font-weight: 500; font-size: var(--text-md); border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); padding-block: var(--space-xs); }
.receipt__stamp { margin: var(--space-sm) 0 0 var(--space-md) !important; width: max-content; font-size: var(--text-2xl); font-weight: 600; color: var(--color-paid); transform: rotate(-9deg); filter: url(#press); }

.coupon { position: absolute; right: 2%; bottom: 6%; width: 270px; padding: var(--space-lg); transform: rotate(4deg); border-left: 2px dashed var(--color-rule-2); }
.coupon p { margin: 0; }
.coupon__title { font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; }
.coupon__sub { font-size: var(--text-sm); color: var(--color-muted); }
.coupon__code { margin-top: var(--space-md) !important; font-size: var(--text-md); letter-spacing: 0.06em; white-space: nowrap; }

.note { position: absolute; right: 0; top: 10%; width: 230px; padding: var(--space-md) var(--space-lg); transform: rotate(2deg); font-size: var(--text-sm); line-height: 1.45; }
.note p { margin: 0; }
.note__head { font-weight: 600; margin-bottom: var(--space-2xs) !important; }

/* Logo animé du hero : l'intro du kit de marque (brand/motion/remizo-motion.css), une fois au chargement. */
.hero__logo { --rz-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --rz-ease-o: cubic-bezier(.22, 1, .36, 1); display: inline-flex; align-items: center; gap: .32em; font: 600 clamp(3rem, 4.5vw + 1rem, 5.25rem)/1 var(--font-display); margin-bottom: var(--space-md); cursor: default; }
.hero__logo .rz-symbol { width: 1.45em; height: 1.45em; overflow: visible; }
.hero__logo .rz-ticket, .hero__logo .rz-dot-a, .hero__logo .rz-dot-b { transform-box: fill-box; transform-origin: center; }
.hero__logo .rz-slash { stroke-dasharray: 32; stroke-dashoffset: 0; }
.hero__logo .rz-word { display: inline-flex; letter-spacing: -.03em; color: var(--color-ink); }
.hero__logo .rz-word span { display: inline-block; }
.hero__logo .rz-word .rz-o { color: var(--color-accent); }
.hero__logo.is-intro .rz-ticket { animation: rz-ticket-in 560ms var(--rz-ease-spring) both; }
.hero__logo.is-intro .rz-slash { animation: rz-draw 360ms var(--rz-ease-o) 280ms both; }
.hero__logo.is-intro .rz-dot-a { animation: rz-pop 420ms var(--rz-ease-spring) 440ms both; }
.hero__logo.is-intro .rz-dot-b { animation: rz-pop 420ms var(--rz-ease-spring) 540ms both; }
.hero__logo.is-intro .rz-word span { animation: rz-rise 480ms var(--rz-ease-o) both; animation-delay: calc(380ms + var(--i) * 45ms); }
.hero__logo.is-intro .rz-word .rz-o { animation: rz-rise 480ms var(--rz-ease-o) both, rz-bounce 520ms var(--rz-ease-spring) forwards; animation-delay: calc(380ms + var(--i) * 45ms), 900ms; }
@keyframes rz-ticket-in { 0% { opacity: 0; transform: translateY(-14%) scale(.6) rotate(-10deg); } 100% { opacity: 1; transform: none; } }
@keyframes rz-draw { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
@keyframes rz-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes rz-rise { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
@keyframes rz-bounce { 0% { transform: none; } 40% { transform: translateY(-.18em) scale(1.12); } 70% { transform: translateY(0) scale(.96); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero__logo * { animation: none !important; } }

/* Une seule entrée : le moteur imprime sa partie du ticket, puis presse « Validé ». */
@keyframes rz-print { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes rz-press { from { opacity: 0; transform: rotate(-9deg) scale(1.25); } to { opacity: 1; transform: rotate(-9deg) scale(1); } }
@keyframes rz-lay { from { opacity: 0; transform: translate(14px, -10px) rotate(7deg); } to { opacity: 1; } }
.js .hero__desk .receipt__rz, .js .hero__desk .receipt__total { animation: rz-print var(--dur-long) var(--ease-out) both; animation-delay: calc(700ms + var(--i) * 450ms); }
.js .hero__desk .receipt__stamp { animation: rz-press 320ms var(--ease-out) both; animation-delay: 2700ms; }
.js .hero__desk .coupon { animation: rz-lay 600ms var(--ease-out) both; animation-delay: 3300ms; }
.js .hero__desk .note { animation: rz-lay 600ms var(--ease-out) both; animation-delay: 3800ms; }
@media (prefers-reduced-motion: reduce) {
  .js .hero__desk *, .btn { animation: none !important; transition: none; }
}

/* ── Petits écrans ──────────────────────────────────────────────── */
@media (max-width: 60rem) {
  :root { --gutter: 20px; }
  .mast__links, .mast__doc { display: none; }
  .mast__row { grid-template-columns: auto minmax(0, 1fr); }
  .mast__brand img { height: 32px; }
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .hero__desk { height: auto; display: grid; gap: var(--space-lg); justify-items: start; padding-block: var(--space-md); }
  .receipt, .coupon { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .receipt { width: min(330px, 100%); box-sizing: border-box; }
  .coupon { justify-self: end; transform: rotate(2.5deg); }
  .note { display: none; }
  .calls tr:last-child th, .calls tr:last-child td { border: 0; }
  .calls-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .coupon__code { font-size: var(--text-sm); }
}
@media (max-width: 26rem) {
  .receipt { width: 290px; }
  .coupon, .note { width: 210px; }
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Sections ───────────────────────────────────────────────────── */
.sec { padding-block: var(--section-gap) 0; }
.sec--gap-l { padding-top: var(--section-gap-l); }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); max-width: 52rem; }
.head--split { max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap-columns); align-items: end; }
.head--split .lead { padding-bottom: var(--space-xs); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Captures du studio, cadrées dans le papier */
.shot { margin: 0; display: grid; gap: var(--space-sm); }
.shot figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.shot__frame { aspect-ratio: 16 / 10; border-radius: var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.shot__frame > img { object-position: 0 0; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; border-radius: var(--radius-card); }
[data-kind="product"] > img { filter: none; }
.shot--wide .shot__frame { aspect-ratio: 16 / 9; }
.shot-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); margin-top: var(--space-2xl); align-items: end; }
.shot__frame--b { aspect-ratio: 2260 / 760; }

/* Bento du moteur */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(280px, auto); gap: var(--gap-columns); }
.tile { grid-column: span 5; display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-xl); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.tile p { margin: 0; color: var(--color-ink-2); max-width: 42ch; }
.tile--lead { grid-column: span 7; grid-row: span 2; background-color: var(--color-cotton); background-image: var(--tex-cotton); }
.tile--lead h3 { font-size: var(--text-2xl); max-width: 14ch; }
.tile--lead { align-content: space-between; }
.tile--lead .slip { justify-self: end; min-width: 18rem; }
.tile--lead .slip p { display: flex; justify-content: space-between; gap: var(--space-lg); margin: 0; padding-block: var(--space-2xs); }
.acts { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; }
.acts li { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-lg); }
.acts li:last-child { border-bottom: 1px solid var(--color-rule); }
.tile--why { align-content: space-between; }
.slip { padding: var(--space-md) var(--space-lg); transform: rotate(-1.5deg); max-width: 22rem; }
.slip p { color: var(--color-print); font-size: var(--text-sm); }
.slip__name { font-weight: 600; }
.tile--stats { grid-column: span 7; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: var(--space-xl); padding-right: 0; overflow: hidden; }
.tile--stats .tile__shot { height: 300px; border-radius: var(--radius-card) 0 0 var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock); }
.tile--stats .tile__shot > img { object-position: 0 0; }
.tile--stats .tile__shot { -webkit-mask-image: linear-gradient(to right, var(--color-ink) 70%, transparent), linear-gradient(to bottom, var(--color-ink) 75%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, var(--color-ink) 70%, transparent), linear-gradient(to bottom, var(--color-ink) 75%, transparent); mask-composite: intersect; box-shadow: none; }
.levels { list-style: none; margin: var(--space-md) 0 0; padding: var(--space-xs) var(--space-lg); display: grid; transform: rotate(1deg); max-width: 24rem; }
.levels li { display: flex; gap: var(--space-sm); align-items: baseline; padding-block: var(--space-xs); border-bottom: 1px dashed var(--color-rule-2); font-size: var(--text-sm); font-weight: 500; }
.levels li:last-child { border-bottom: 0; }
.levels em { margin-left: auto; font-style: normal; font-weight: 400; color: var(--color-muted); }
.tile__strip { margin-top: var(--space-lg); aspect-ratio: 696 / 180; max-width: 348px; border-radius: var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock); }
.tile__strip > img { object-position: 50% 50%; }

/* Fidélité : la carte à tampons posée dans sa tuile */
.tile--card { grid-column: span 7; grid-row: span 2; grid-template-columns: minmax(0, 1fr) auto; align-content: space-between; column-gap: var(--space-xl); row-gap: var(--space-lg); }
.tile--card .tile__text { display: grid; gap: var(--space-sm); align-content: start; }
.tile--card h3 { font-size: var(--text-2xl); }
.tile__foot { grid-column: 1 / -1; font-size: var(--text-sm); }
.stampcard { width: 260px; padding: var(--space-lg); transform: rotate(2deg); align-self: center; }
.stampcard p { margin: 0; color: var(--color-print); }
.stampcard__title { font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; }
.stampcard__sub { font-size: var(--text-sm); color: var(--color-muted) !important; }
.stampcard__grid { list-style: none; margin: var(--space-md) 0 var(--space-sm); padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-xs); }
.stampcard__grid li { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed var(--color-rule-2); }
.stampcard__grid li.on { border: 0; background: var(--color-accent); box-shadow: var(--press-groove); filter: url(#press); }
.stampcard__count { text-align: right; font-size: var(--text-md); font-weight: 500; }
.slip--code { margin: var(--space-md) 0 0; font-size: var(--text-sm); line-height: 1.6; white-space: pre; overflow-x: auto; }
.slip__row { display: flex; justify-content: space-between; gap: var(--space-lg); }

/* Données : la chaîne d'import */
.data { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; }
.data__list { margin-top: 0; }
.data__list li { color: var(--color-ink-2); }
.data__list strong { color: var(--color-ink); font-weight: 600; }
.chain { list-style: none; margin: 0; padding: var(--space-md) var(--space-lg); display: grid; transform: rotate(-1.5deg); max-width: 24rem; justify-self: center; width: 100%; box-sizing: border-box; }
.chain li { display: flex; gap: var(--space-sm); align-items: baseline; padding-block: var(--space-sm); border-bottom: 1px dashed var(--color-rule-2); font-size: var(--text-sm); font-weight: 500; }
.chain li:last-child { border-bottom: 0; }
.chain__next { padding-left: var(--space-lg); }
.chain__next::before { content: "↳"; color: var(--color-muted); font-weight: 400; margin-right: calc(-1 * var(--space-2xs)); }
.chain em { margin-left: auto; font-style: normal; font-weight: 400; color: var(--color-muted); }

/* Bande d'intégration : le tableau noir */
.board { background: var(--color-board); color: var(--color-board-type); padding-block: var(--section-gap-s); margin-top: var(--section-gap); }
.board .lead { color: var(--color-board-muted); }
.tabs { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: 12px; background: var(--color-ink-2); margin-bottom: var(--space-xl); }
.tabs button { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); background: transparent; color: var(--color-board-muted); font: 500 var(--text-md)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.tabs button:hover { color: var(--color-board-type); }
.tabs button[aria-selected="true"] { background: var(--color-cotton); color: var(--color-print); box-shadow: var(--cast-stock); }
.tabs button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tabs button:active { transform: translateY(1px); }
.tabs button:disabled { opacity: 0.55; cursor: not-allowed; }
.panel { min-height: 0; }
.calls-wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-3xl); align-items: center; }
.stub { padding: var(--space-lg); transform: rotate(2deg); font-size: var(--text-sm); }
.stub p { margin: 0 0 var(--space-sm); font-weight: 500; }
.stub table { width: 100%; border-collapse: collapse; }
.stub td { padding: var(--space-2xs) 0; border-top: 1px dashed var(--color-rule-2); }
.stub td:last-child { text-align: right; }
.calls { width: 100%; border-collapse: collapse; }
.calls th, .calls td { text-align: left; padding: var(--space-lg) 0; border-top: 1px solid var(--color-board-rule); vertical-align: baseline; }
.calls tr:last-child th, .calls tr:last-child td { border-bottom: 1px solid var(--color-board-rule); }
.calls th { width: 34%; font-size: var(--text-lg); font-weight: 400; color: var(--color-board-type); }
.calls td { font-size: var(--text-lg); color: var(--color-board-muted); }
.code { margin: 0; padding: var(--space-xl); border: 1px solid var(--color-board-rule); border-radius: var(--radius-card); overflow-x: auto; font: 400 var(--text-sm)/1.7 var(--font-outlier); color: var(--color-board-type); }
.code__out { color: var(--color-board-muted); }

/* Tableau de la grappe */
.parts { width: 100%; border-collapse: collapse; }
.parts th, .parts td { text-align: left; padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-bottom: 1px solid var(--color-rule-2); vertical-align: baseline; }
.parts thead th { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); padding-block: var(--space-sm); border-bottom-color: var(--color-ink); }
.parts tbody th { width: 38%; font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; }
.parts tbody td { font-size: var(--text-lg); color: var(--color-ink-2); }

/* Questions */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.faq__rows details { border-top: 1px solid var(--color-rule-2); }
.faq__rows details:last-child { border-bottom: 1px solid var(--color-rule-2); }
.faq__rows summary { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.015em; cursor: pointer; list-style: none; }
.faq__rows summary::-webkit-details-marker { display: none; }
.faq__rows summary::after { content: "+"; font-weight: 400; color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); }
.faq__rows details[open] summary::after { transform: rotate(45deg); }
.faq__rows summary:hover { color: var(--color-ink-2); }
.faq__rows summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.faq__rows details p { margin: 0 0 var(--space-lg); max-width: 60ch; color: var(--color-ink-2); font-size: var(--text-lg); }

/* Fermeture : la démo */
.close { margin-top: var(--section-gap); padding-block: var(--section-gap-s); }
.close__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.close__text { display: grid; gap: var(--space-lg); }
.close__doc { margin: 0; color: var(--color-ink-2); }
.contact { display: grid; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); transform: rotate(0.6deg); }
.field { display: grid; gap: var(--space-xs); }
.field label { font-size: var(--text-sm); font-weight: 500; }
.field input { min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1 var(--font-body); outline: 2px solid transparent; outline-offset: -3px; }
.field input:hover { border-color: var(--color-ink-2); }
.field input:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid] { border-color: var(--color-error); }
.field input:disabled { opacity: 0.55; cursor: not-allowed; }
.contact .btn { justify-self: start; }
.contact__help { margin: 0; min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
/* Champ piège pour les robots : hors écran, jamais lu ni atteint au clavier */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); }

/* Pied de page : colonnes d'index */
.foot { padding-block: var(--space-3xl) var(--space-xl); border-top: 1px solid var(--color-rule-2); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--gap-columns); }
.foot__brand img { height: 36px; width: auto; }
.foot__brand p { margin: var(--space-md) 0 0; color: var(--color-ink-2); max-width: 28ch; }
.foot__h { margin: 0 0 var(--space-sm); font-size: var(--text-sm); font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); font-size: var(--text-sm); }
.foot a { color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.foot a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.foot__legal { margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.foot__legal p { margin: 0; }

@media (max-width: 60rem) {
  .head--split, .shot-pair, .faq, .close__grid, .tile--stats, .tile--card, .data { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile, .tile--lead, .tile--stats, .tile--card { grid-column: auto; grid-row: auto; }
  .stampcard { justify-self: center; max-width: 100%; box-sizing: border-box; }
  .slip--code { font-size: var(--text-xs); padding-inline: var(--space-md); white-space: pre-wrap; }
  .tile--stats { padding-right: var(--space-xl); }
  .tile--stats .tile__shot { border-radius: var(--radius-card); }
  .calls th, .calls td { display: block; width: auto; border: 0; padding: var(--space-2xs) 0; }
  .calls tr { display: block; padding-block: var(--space-md); border-top: 1px solid var(--color-board-rule); }
  .parts tbody th { font-size: var(--text-lg); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__rows summary::after, .tabs button { transition: none; }
}
@media (max-width: 89.9rem) { .note { display: none; } }
@media (max-width: 72rem) { .mast__links, .mast__end { gap: var(--space-md); } }