/* ════════════════════════════════════════════════════════════════════
   SpotUp — le site vitrine (spotup.ch)

   Les valeurs viennent de l'app, pas d'une palette inventée :
   lib/theme.ts (palette sombre) et les composants EditorialHero,
   CarouselCard, EditorialTitle, bubbleStyles, create.tsx, chat.tsx.
   Qui passe du site à l'app doit avoir l'impression d'ouvrir la même chose.

   Plan du fichier
     1. Jetons (couleurs, polices, espacements)
     2. Base et utilitaires
     3. En-tête
     4. Accueil : la une, les sections
     5. Pages légales et page 404
     6. Pied de page
     7. Maquettes d'écrans de l'app
   ════════════════════════════════════════════════════════════════════ */

/* ═════════ 1. Jetons ═════════ */
:root {
  --bg: #0A0A0A;
  --surface: #141414;
  --surface2: #1F1F1F;
  --card: #1F1F1F;
  --card-border: rgba(255, 255, 255, 0.10);
  --ink: #F7F7F7;
  --ink2: #D4D4D4;
  --muted: #9A9A9A;
  --muted2: #606060;            /* ⚠️ contraste trop faible pour du texte à lire */
  --divider: rgba(255, 255, 255, 0.08);
  --hairline: rgba(255, 255, 255, 0.14);
  --accent: #FF7045;
  --accent-ink: #0A0A0A;        /* texte SUR le corail : foncé, pas blanc */
  --tag: rgba(255, 112, 69, 0.14);
  --glow: rgba(255, 112, 69, 0.14);
  --glow-fade: rgba(255, 112, 69, 0);
  /* La lueur du haut, qui s'ÉTEINT EN DOUCEUR (28 sept.) : un dégradé droit
     de --glow à --glow-fade finit sur une cassure que l'œil voit comme une
     ligne sur un fond aussi sombre. Mêmes paliers que les lueurs de l'accueil
     (accueil.css). Les trois lueurs de ce fichier passent par elle. */
  --lueur-haut: linear-gradient(180deg,
    rgba(255, 112, 69, 0.14) 0%, rgba(255, 112, 69, 0.112) 20%,
    rgba(255, 112, 69, 0.078) 38%, rgba(255, 112, 69, 0.048) 54%,
    rgba(255, 112, 69, 0.024) 68%, rgba(255, 112, 69, 0.01) 80%,
    rgba(255, 112, 69, 0.003) 90%, rgba(255, 112, 69, 0) 100%);
  --danger: #FF6B6B;           /* lib/theme.ts, palette sombre */
  --gold: #E0B24C;
  --gold-bg: rgba(224, 178, 76, 0.12);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: 20px;
  --maxw: 1240px;
  --header-h: 64px;
  --section: 88px;
}
@media (min-width: 600px) { :root { --gutter: 32px; --section: 112px; } }
@media (min-width: 1024px) { :root { --gutter: 56px; --header-h: 76px; --section: 150px; } }

/* ═════════ 2. Base et utilitaires ═════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;              /* jamais de faux gras ni de fausse italique */
  scroll-padding-top: calc(var(--header-h) + 12px);
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink2);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main:focus { outline: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 12px 16px; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink);
  font: 600 15px/1 var(--sans); text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.i {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Typo commune */
.kicker {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker-muted { color: var(--muted); }
em { font-style: italic; font-weight: 400; }
.nowrap { white-space: nowrap; }
@media (max-width: 399px) { .hide-xs { display: none; } }
.step-t, .bcard-t, .trust-t, .mini-title { text-wrap: balance; }

.title {
  margin-top: 28px;
  font: 400 clamp(38px, 5.4vw, 78px)/1.04 var(--serif);
  letter-spacing: -0.024em;
  word-spacing: 0.04em;
  color: var(--ink);
  max-width: 13ch;
  text-wrap: balance;
}
.title-wide { max-width: none; }
@media (max-width: 599px) { .title { line-height: 1.1; letter-spacing: -0.03em; word-spacing: 0.02em; } }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px;
  border: 0; cursor: pointer;          /* un <button> garde sinon la bordure du navigateur */
  border-radius: 14px;
  background: var(--accent); color: var(--accent-ink);
  font: 600 16px/1.2 var(--sans); letter-spacing: -0.01em;
  text-decoration: none; text-align: center;
  box-shadow: 0 6px 24px rgba(255, 112, 69, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(255, 112, 69, 0.45); }
.btn .i { font-size: 18px; }
.btn-sm {
  min-height: 44px; padding: 0 16px; border-radius: 12px;
  font-size: 14px; box-shadow: 0 4px 16px rgba(255, 112, 69, 0.28);
}
.btn-lg { min-height: 60px; padding: 0 30px; font-size: 17px; }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  color: var(--ink); font: 500 15px/1 var(--sans);
  text-decoration: none;
  transition: color 0.2s ease;
}
.link .i { font-size: 16px; color: var(--accent); }
.link:hover { color: var(--accent); }

/* La lueur corail du haut des écrans de l'app (glow → glowFade). */
.glow {
  position: absolute; left: 0; right: 0;
  top: calc(-1 * var(--header-h));
  height: 360px;
  background: var(--lueur-haut);
  pointer-events: none;
}
@media (min-width: 1024px) { .glow { height: 640px; } }

.masthead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-top: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 1024px) { .masthead { padding-top: 28px; } }

/* ═════════ 3. En-tête ═════════ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(10, 10, 10, 0.82);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--divider);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Transparent tout en haut, pour laisser voir la lueur ; fond flouté dès qu'on défile. */
.js .site-header:not(.is-scrolled) {
  background: rgba(10, 10, 10, 0);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.header-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; border-radius: 8px; }
.brand-dash {
  width: 36px; height: 18px; color: var(--accent);
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
}
/* Le mot-marque de l'app (components/hifi/SpotUpLogo.tsx) : « Spot » en encre, « Up » en corail. */
.wordmark { font: 600 23px/1 var(--serif); letter-spacing: -0.035em; color: var(--ink); }
.wordmark span { color: var(--accent); }
.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; gap: 2px; margin-left: auto; margin-right: 12px; }
  .nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border-radius: 10px; color: var(--ink2); text-decoration: none;
    font: 500 14.5px/1 var(--sans); letter-spacing: -0.01em;
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  .nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
}

/* ═════════ 4. Accueil ═════════ */

/* ─── La une ─── */
.une { position: relative; padding-bottom: 8px; }
.une .wrap { position: relative; }

.display {
  margin-top: 30px;
  font: 400 clamp(45px, 8.9vw, 132px)/1.02 var(--serif);
  letter-spacing: -0.022em;
  word-spacing: 0.02em;
  color: var(--ink);
}
@media (max-width: 599px) { .display { line-height: 1.06; letter-spacing: -0.03em; word-spacing: 0; } }
.br-lg { display: none; }
@media (min-width: 600px) { .br-lg { display: inline; } }

.une-grid { display: grid; gap: 48px; margin-top: 28px; }
@media (min-width: 1024px) {
  .une-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; margin-top: 64px; }
}
.une-texte { display: flex; flex-direction: column; }
.lead { font: 400 19px/1.55 var(--sans); color: var(--ink2); max-width: 38ch; letter-spacing: -0.005em; }
@media (min-width: 1024px) { .lead { font-size: 22px; line-height: 1.5; padding-top: 34px; } }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
@media (max-width: 599px) { .une .cta-row .btn { width: 100%; } }
@media (min-width: 1024px) { .une .cta-row .link { display: none; } }
.cta-note { margin-top: 14px; font: 400 14px/1.5 var(--sans); color: var(--muted); }

/* Les faits en bref : pour qui, combien, et ce qui distingue l'app. */
.faits { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; }
.faits li {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink2);
}
.faits li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

.sommaire { display: none; }
@media (min-width: 1024px) {
  .sommaire { display: block; margin-top: auto; padding-top: 48px; }
  .sommaire .kicker { margin-bottom: 12px; }
  .sommaire ol { border-top: 1px solid var(--divider); }
  .sommaire a {
    display: flex; align-items: center; gap: 18px;
    min-height: 50px; border-bottom: 1px solid var(--divider);
    color: var(--ink2); text-decoration: none;
  }
  .som-n { width: 22px; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--accent); }
  .som-t { flex: 1; font: 400 19px/1.2 var(--serif); letter-spacing: -0.015em; transition: color 0.2s ease; }
  .sommaire .i { font-size: 16px; color: var(--muted); transition: transform 0.2s ease, color 0.2s ease; }
  .sommaire a:hover .som-t { color: var(--ink); }
  .sommaire a:hover .i { color: var(--accent); transform: translateX(3px); }
}

/* Carte vedette — EditorialHero, variante immersive */
.mini-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mini-title { font: 500 22px/1.2 var(--serif); letter-spacing: -0.032em; color: var(--ink); }
.mini-meta { font: 500 10px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.vedette {
  position: relative; isolation: isolate;
  height: 440px;
  border-radius: 22px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--divider);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9);
}
@media (min-width: 600px) { .vedette { height: 520px; } }
@media (min-width: 1024px) { .vedette { height: 580px; } }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.slide.is-on { opacity: 1; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.38) 68%, rgba(0, 0, 0, 0.90) 100%);
}
.slide-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: grid; gap: 5px;
  padding: 0 16px 15px;
}
/* 90 % et non les 75 % de l'app : sur une photo claire à grande taille, 75 %
   descendait sous le contraste AA (mesuré 4,19 : 1 sur la crête enneigée). */
.slide-meta { font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); }
.slide-title {
  font: 400 26px/1.15 var(--serif); letter-spacing: -0.035em; color: #fff;
  max-width: 20ch; text-wrap: balance;
}
.slide-host { display: flex; align-items: center; gap: 9px; margin-top: 3px; font: 400 12px/1.2 var(--sans); color: rgba(255, 255, 255, 0.85); }
.slide-host b { font-weight: 600; color: #fff; }
.av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.25); color: #fff;
  font: 700 12px/1 var(--sans);
}
@media (min-width: 600px) {
  .slide-body { padding: 0 28px 26px; gap: 8px; }
  .slide-meta { font-size: 11.5px; }
  .slide-title { font-size: 38px; line-height: 1.1; }
  .slide-host { font-size: 14px; gap: 11px; margin-top: 4px; }
  .av { width: 32px; height: 32px; font-size: 14px; }
}
/* Le lent zoom (Ken Burns) de l'app. Il ne tourne que si la carte est à
   l'écran (.is-live, posé par site.js) et que personne n'a mis en pause. */
@media (prefers-reduced-motion: no-preference) {
  .slide img { animation: kenburns 28s ease-in-out infinite alternate; animation-play-state: paused; }
  .vedette.is-live:not(.is-paused) .slide.is-on img { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }
@keyframes kenburns {
  from { transform: scale(1) translateX(0); }
  to { transform: scale(1.09) translateX(-8px); }
}

/* Ligne-curseur sous le carrousel (celle du feed, en plus large pour le doigt) */
.cursor { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; }
.cursor-track { position: relative; display: flex; width: 132px; height: 44px; }
.cursor-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.cursor-thumb {
  position: absolute; left: 0; top: 50%;
  width: 44px; height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: var(--accent);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cursor-track button {
  position: relative; z-index: 1; flex: 1; height: 44px;
  padding: 0; border: 0; border-radius: 8px;
  background: none; cursor: pointer;
}
.cursor-pause {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 22px;
  background: none; color: var(--muted); cursor: pointer;
  font-size: 14px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.cursor-pause:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.cursor-pause .i-play { display: none; }
.cursor-pause.is-paused .i-pause { display: none; }
.cursor-pause.is-paused .i-play { display: block; }
.no-js .cursor { display: none; }
/* Sans animation, rien ne défile tout seul : le bouton pause n'aurait rien à arrêter. */
@media (prefers-reduced-motion: reduce) { .cursor-pause { display: none; } }

/* ─── Sections ─── */
.section { padding-top: var(--section); }
.section-first { padding-top: calc(var(--section) * 0.8); }
.shead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.shead-index { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; color: var(--muted); }
.shead-grid { display: grid; gap: 18px; }
.shead-side { font: 400 16px/1.6 var(--sans); color: var(--muted); max-width: 40ch; }
@media (min-width: 1024px) {
  .shead-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: end; gap: 64px; }
  .shead-side { padding-bottom: 10px; }
}

/* ─── Rangée de cartes (CarouselCard) ─── */
.rail {
  display: flex; gap: 12px;
  margin-top: 36px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 2px var(--gutter) 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail::after { content: ""; flex: 0 0 1px; }
.rail:focus-visible { outline-offset: -2px; border-radius: 16px; }
.ccard { flex: 0 0 200px; scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.ccard-photo { position: relative; height: 220px; border-radius: 16px; overflow: hidden; background: var(--surface2); }
.ccard-photo img { width: 100%; height: 100%; object-fit: cover; }
.ccard-photo img.pos-gauche { object-position: 18% 50%; }
/* Pastille de catégorie en verre dépoli sombre (choix B4 du labo des bulles). */
.ccard-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font: 600 10px/1.25 var(--sans); letter-spacing: 0.06em;
}
.ccard-body { display: grid; gap: 5px; padding-inline: 2px; }
.ccard-title {
  font: 500 16px/1.2 var(--serif); letter-spacing: -0.025em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ccard-meta { font: 500 12px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 700px) {
  .rail {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px;
    margin-inline: 0; padding: 0; overflow: visible;
  }
  .rail::after { display: none; }
  .ccard-photo { height: auto; aspect-ratio: 200 / 220; }
  .ccard-title { font-size: 18px; }
  .ccard-meta { font-size: 13px; }
}
@media (min-width: 1100px) {
  .rail { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 56px; }
  .ccard-title { font-size: 17px; }
}

/* ─── Texte + téléphone ───
   Tablette (768-1023) : déjà côte à côte, téléphone réduit. Avant, tout
   s'empilait et le téléphone flottait seul au milieu de grands vides. */
.split { display: grid; gap: 64px; }
.split-rev { margin-top: 48px; }
@media (min-width: 768px) {
  .split { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
  .split-rev { grid-template-columns: auto minmax(0, 1fr); }
  .split-rev .phone-stage { order: -1; }
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; }
  .split-rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: 64px; }
}
/* Quand le texte est bien plus long que le téléphone : le téléphone accompagne
   la lecture au lieu de flotter en bas, face aux dernières lignes. */
@media (min-width: 768px) {
  .split-colle { align-items: start; }
  .split-colle .phone-stage { position: sticky; top: calc(var(--header-h) + 32px); }
}

.intro { margin-top: 22px; font: 400 18px/1.6 var(--sans); color: var(--ink2); max-width: 44ch; }
.steps { margin-top: 44px; border-top: 1px solid var(--divider); }
.step {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px;
  padding: 26px 0; border-bottom: 1px solid var(--divider);
}
.step-n { font: 500 12px/1 var(--mono); letter-spacing: 0.1em; color: var(--accent); padding-top: 12px; }
.step-t { font: 400 30px/1.12 var(--serif); letter-spacing: -0.032em; color: var(--ink); }
.step p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink2); max-width: 48ch; }
@media (min-width: 1024px) {
  .step { grid-template-columns: 72px minmax(0, 1fr); padding: 30px 0; }
  .step-t { font-size: 38px; }
  .step-n { padding-top: 16px; }
  .step p { font-size: 17px; }
}

/* ─── Ce qui change ─── */
.manifeste .non { color: var(--muted); }
.manifeste em { color: var(--ink); }
.chute {
  margin-top: 22px;
  font: 400 clamp(22px, 2.6vw, 34px)/1.25 var(--serif);
  letter-spacing: -0.02em; word-spacing: 0.03em;
  color: var(--ink2);
}
.chute em { color: var(--accent); }

/* Cartes de contenu : contour fin + barre corail 5 px (rows de chats, Mes activités) */
.bcard {
  position: relative; overflow: hidden;
  padding: 24px 22px 26px 27px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
}
.bcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.pastille {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tag); color: var(--accent);
  font-size: 20px;
}
.bcard-t { margin-top: 18px; font: 500 23px/1.2 var(--serif); letter-spacing: -0.028em; color: var(--ink); }
.bcard > p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink2); }
@media (min-width: 1024px) {
  .bcard { padding: 30px 32px 32px 37px; }
  .bcard-t { font-size: 26px; }
}
.points { display: grid; gap: 16px; }

/* Carte « On se remet ça ? » (chat.tsx, rebook_prompt) */
.rebook {
  border: 1.5px solid var(--accent); border-radius: 18px;
  padding: 18px; background: var(--surface);
  max-width: 420px;
}
.rebook-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--accent); font: 500 10px/1 var(--mono); letter-spacing: 0.15em; }
.rebook-head .i { font-size: 16px; }
.rebook-t { font: 500 20px/1.2 var(--serif); letter-spacing: -0.025em; color: var(--ink); margin-bottom: 6px; }
.rebook-s { font: 400 13px/19px var(--sans); color: var(--muted); margin-bottom: 14px; }
.rebook-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font: 600 14px/1.2 var(--sans); letter-spacing: 0.01em;
}
.rebook-btn .i { font-size: 16px; }
.bcard-rebook .rebook { margin-bottom: 4px; }

/* Ce que fait la relance, en trois temps. */
.frise { margin-top: 14px; display: grid; gap: 12px; counter-reset: frise; }
.frise li {
  position: relative; padding-left: 34px;
  font-size: 16px; line-height: 1.55; color: var(--ink2);
  counter-increment: frise;
}
.frise li::before {
  content: counter(frise, decimal-leading-zero);
  position: absolute; left: 0; top: 0.2em;
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.1em; color: var(--accent);
}
/* Le message système de la conversation (chat.tsx, systemMsgText) :
   mono, gris, centré, sans cadre. */
.sys-msg {
  display: block; margin-top: 12px; padding: 14px 8px 4px;
  border-top: 1px dashed var(--divider);
  text-align: center;
  font: 500 11.5px/1.6 var(--mono); letter-spacing: 0.04em;
  color: var(--muted);
}

/* ─── Organiser ─── */
.duo { display: grid; gap: 16px; margin-top: 72px; }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 96px; } }
.frag { margin-top: 24px; }
.frag-lieu { display: grid; gap: 10px; }
@media (min-width: 480px) { .frag-lieu { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; } }
.zone { position: relative; min-height: 130px; border-radius: 14px; overflow: hidden; background: #161616; border: 1px solid var(--divider); }
.zone svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.road { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 6; stroke-linecap: round; }
.road-main { stroke: rgba(255, 255, 255, 0.13); stroke-width: 9; }
.road-thin { stroke-width: 3; }
.zone-circle { fill: rgba(255, 112, 69, 0.18); stroke: var(--accent); stroke-width: 2; }
.stat {
  display: grid; gap: 4px; align-content: start;
  padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--divider);
}
.stat-l { font: 500 9px/1.2 var(--mono); letter-spacing: 0.15em; color: var(--muted); }
.stat-v { font: 500 17px/21px var(--serif); letter-spacing: -0.025em; color: var(--ink); }
.stat-s { font: 400 12px/1.35 var(--sans); color: var(--muted); }

.warn { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; background: var(--gold-bg); color: var(--gold); }
.warn .i { font-size: 16px; margin-top: 1px; }
.warn-t { font: 700 13px/1.35 var(--sans); }
.warn-d { margin-top: 4px; font: 400 12px/17px var(--sans); }
.mini-footer {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px; padding: 14px 16px;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--divider);
}
.mf-meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mf-k { font: 500 11px/1.3 var(--mono); letter-spacing: 0.13em; color: var(--muted); }
.mf-t { font: 500 15px/17px var(--sans); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-cta {
  flex: none; height: 48px; padding: 0 18px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font: 600 14px/1 var(--sans); letter-spacing: -0.015em;
}
@media (max-width: 520px) {
  .mini-footer { flex-wrap: wrap; row-gap: 12px; }
  .mf-meta { flex-basis: 100%; }
  .mf-cta { flex: 1; }
}

/* Relance de l'appel à l'action, au milieu de la page. */
.relance {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 24px; justify-items: start;
  margin-top: 72px; padding: 36px 24px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--divider);
}
.relance-glow {
  position: absolute; left: 0; right: 0; top: 0; height: 80%; z-index: -1;
  background: var(--lueur-haut);
}
.relance-t {
  font: 400 clamp(28px, 3.4vw, 46px)/1.1 var(--serif);
  letter-spacing: -0.025em; word-spacing: 0.03em;
  color: var(--ink); max-width: 22ch; text-wrap: balance;
}
@media (max-width: 599px) { .relance { margin-inline: calc(8px - var(--gutter)); } .relance .btn { width: 100%; } }
@media (min-width: 900px) {
  .relance { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; margin-top: 96px; padding: 48px 56px; }
}

/* ─── Confiance ─── */
.trust {
  display: grid; gap: 1px; margin-top: 48px;
  background: var(--divider);
  border-block: 1px solid var(--divider);
}
.trust li { background: var(--bg); padding: 28px 0 30px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; }
.trust .pastille { grid-row: span 2; }
.trust-t { font: 500 22px/1.2 var(--serif); letter-spacing: -0.028em; color: var(--ink); padding-top: 9px; }
.trust p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink2); }
@media (min-width: 700px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust li { display: block; padding: 36px 32px 40px; }
  .trust li:nth-child(2n + 1) { padding-left: 0; }
  .trust li:nth-child(2n) { padding-right: 0; }
  .trust-t { margin-top: 22px; padding-top: 0; }
}
@media (min-width: 1024px) {
  .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 64px; }
  .trust li, .trust li:nth-child(n) { padding: 40px 40px 44px; }
  .trust li:nth-child(3n + 1) { padding-left: 0; }
  .trust li:nth-child(3n) { padding-right: 0; }
  .trust-t { font-size: 24px; }
}

/* Les numéros d'urgence, en grand : un repère qu'on lit d'un coup d'œil. */
.sos { margin-top: 56px; display: grid; gap: 14px; }
.sos-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--divider); }
.sos-nums li { display: grid; gap: 8px; padding: 22px 8px 20px; justify-items: center; text-align: center; }
.sos-nums li + li { border-left: 1px solid var(--divider); }
.sos-n { font: 400 clamp(44px, 8vw, 96px)/1 var(--serif); letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: lining-nums; }
.sos-l { font: 500 11px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 1024px) { .sos { margin-top: 72px; } }

/* Le bandeau doré d'avertissement de l'app (secondaryBg + secondaryInk). */
/* La nuance d honnetete. CENTREE : elle ne denonce rien, elle tempere —
   une icone a gauche et un texte au fer a gauche lui donnaient le ton d une
   alerte. Icone au-dessus, texte centre, bloc centre : ca se lit comme une
   note posee, pas comme un avertissement. */
.honnete {
  display: grid; justify-items: center; gap: 10px;
  margin: 28px auto 0; max-width: 62ch;
  padding: 20px 22px; border-radius: 14px;
  background: var(--gold-bg); color: var(--gold);
  font: 400 15px/1.6 var(--sans); text-align: center;
}
.honnete .i { font-size: 18px; }

/* ─── La beta ─── */
.section-beta { padding-bottom: calc(var(--section) * 0.66); }
.beta-panel {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 44px 22px 36px;
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--divider);
}
@media (max-width: 599px) {
  .beta-panel { margin-inline: calc(8px - var(--gutter)); padding: 40px 20px 32px; border-radius: 24px; }
  .beta-panel .btn-lg { padding: 0 20px; font-size: 16px; }
}
@media (min-width: 600px) { .beta-panel { padding: 64px 48px 48px; } }
@media (min-width: 1024px) { .beta-panel { padding: 104px 96px 80px; } }
.beta-glow {
  position: absolute; left: 0; right: 0; top: 0; height: 420px; z-index: -1;
  background: var(--lueur-haut);
}
.beta-grid { display: grid; gap: 28px; }
.beta-icon { order: -1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.app-icon {
  --size: 76px;
  width: var(--size); height: var(--size);
  border-radius: calc(var(--size) * 0.225);
  display: grid; place-items: center;
  background: #E85D2F;                /* l'icône de l'app : #E85D2F, pas le corail de l'interface */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px -16px rgba(232, 93, 47, 0.6);
}
.app-icon svg { width: 68.75%; height: auto; overflow: visible; }
.app-icon-label { display: none; }
@media (min-width: 1024px) {
  .beta-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 64px; }
  .beta-icon { order: 0; align-items: center; gap: 16px; }
  .app-icon { --size: 208px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -28px rgba(232, 93, 47, 0.65); }
  .app-icon-label { display: block; font: 500 15px/1 var(--sans); color: var(--ink2); letter-spacing: -0.01em; }
}
/* La « poussée » du splash : chaque chevron avance de 9 % de sa taille et
   grossit de 10 %, départs décalés de 160 ms, boucle de 1150 ms. Elle ne
   tourne que lorsque l'icône est à l'écran (.is-live, posé par site.js). */
.app-icon path { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .app-icon path { animation: poussee 1150ms ease-in-out infinite; animation-play-state: paused; }
  .app-icon path:nth-child(2) { animation-delay: 160ms; }
  .app-icon path:nth-child(3) { animation-delay: 320ms; }
  .app-icon.is-live path { animation-play-state: running; }
}
@keyframes poussee {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(50px) scale(1.1); }
}
.beta-kick { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.beta-kick + .beta-grid .beta-title { margin-top: 0; }
.beta-title { max-width: 12ch; font-size: clamp(44px, 7.4vw, 108px); line-height: 1.02; }
@media (max-width: 599px) { .beta-title { line-height: 1.06; } }
.beta-lead { margin-top: 22px; font: 400 19px/1.55 var(--sans); color: var(--ink2); max-width: 40ch; }
@media (min-width: 1024px) { .beta-lead { font-size: 22px; } }
.section-beta .cta-row { margin-top: 32px; }
@media (max-width: 599px) { .section-beta .btn { width: 100%; } }
.beta-mail { margin-top: 6px; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.beta-mail a {
  display: inline-block; padding: 12px 0; color: var(--ink2);
  text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 4px;
}
.beta-mail a:hover { color: var(--accent); text-decoration-color: currentColor; }
.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px; margin-top: 40px;
  border-top: 1px solid var(--divider);
}
.facts div { padding: 18px 0 16px; border-bottom: 1px solid var(--divider); }
.facts dt { font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin-top: 8px; font: 400 20px/1.2 var(--serif); letter-spacing: -0.025em; color: var(--ink); }
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: 64px; }
  .facts div { border-bottom: 0; padding: 22px 0 0; }
  .facts dd { font-size: 24px; }
}
.beta-small { margin-top: 16px; max-width: 46ch; font: 400 14px/1.6 var(--sans); color: var(--muted); }

/* ═════════ 5. Pages légales et page 404 ═════════ */
.doc, .introuvable { position: relative; }
.doc .wrap, .introuvable .wrap { position: relative; }
.doc { padding-bottom: 96px; }

.doc-grid { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 1024px) {
  .doc-grid { grid-template-columns: 250px minmax(0, 1fr); gap: 80px; margin-top: 56px; align-items: start; }
}
.doc-corps { max-width: 46rem; }
.doc-titre {
  font: 400 clamp(38px, 5vw, 66px)/1.06 var(--serif);
  letter-spacing: -0.025em; word-spacing: 0.03em;
  color: var(--ink); text-wrap: balance;
}
.doc-maj { margin-top: 18px; font: 500 11px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.doc-intro { margin-top: 28px; font: 400 19px/1.6 var(--sans); color: var(--ink2); }
@media (min-width: 1024px) { .doc-intro { font-size: 21px; } }
.doc-corps h2 {
  margin-top: 52px; padding-top: 22px;
  border-top: 1px solid var(--divider);
  font: 400 27px/1.2 var(--serif); letter-spacing: -0.022em;
  color: var(--ink); text-wrap: balance;
}
.doc-corps p { margin-top: 14px; font-size: 16.5px; line-height: 1.7; color: var(--ink2); }
.doc-corps strong { font-weight: 600; color: var(--ink); }
.doc-corps ul { margin-top: 14px; display: grid; gap: 10px; }
.doc-corps li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.65; color: var(--ink2); }
.doc-corps li::before { content: ""; position: absolute; left: 3px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.doc-retour { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--divider); }

/* Sommaire : replié sur téléphone, ouvert et collant sur ordinateur. */
.doc-sommaire { border-block: 1px solid var(--divider); }
.doc-sommaire summary {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; cursor: pointer; list-style: none;
}
.doc-sommaire summary::-webkit-details-marker { display: none; }
.doc-sommaire-n { margin-left: auto; font: 400 14px/1 var(--sans); color: var(--muted); }
.doc-sommaire summary .i { font-size: 18px; color: var(--muted); transition: transform 0.2s ease; }
.doc-sommaire[open] summary .i { transform: rotate(180deg); }
.doc-sommaire ol { padding: 2px 0 14px; }
.doc-sommaire a {
  display: block; padding: 9px 0;
  font: 400 15px/1.4 var(--sans); color: var(--ink2);
  text-decoration: none; transition: color 0.2s ease;
}
.doc-sommaire a:hover { color: var(--accent); }
@media (min-width: 1024px) {
  .doc-sommaire {
    position: sticky; top: calc(var(--header-h) + 28px);
    max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto;
    border-bottom: 0; scrollbar-width: thin;
  }
  .doc-sommaire summary { min-height: 44px; }
  .doc-sommaire summary .i, .doc-sommaire-n { display: none; }
  .doc-sommaire a { padding: 7px 0; font-size: 14px; color: var(--muted); }
  .doc-sommaire a:hover { color: var(--ink); }
}

.introuvable { padding-bottom: calc(var(--section) * 1.1); }
.display-404 { font-size: clamp(48px, 9vw, 124px); }
.introuvable .lead { margin-top: 28px; }
@media (min-width: 1024px) { .introuvable .lead { padding-top: 0; } }

/* ═════════ 6. Pied de page ═════════ */
.footer { padding: 56px 0 28px; border-top: 1px solid var(--divider); }
@media (min-width: 1024px) { .footer { padding: 88px 0 36px; } }
.f-top { display: grid; gap: 36px; }
@media (min-width: 900px) { .f-top { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.f-tag { margin-top: 20px; font: 400 clamp(30px, 3.4vw, 44px)/1.1 var(--serif); letter-spacing: -0.028em; color: var(--ink); }
.f-sign { margin-top: 14px; font: 400 15px/1.6 var(--sans); color: var(--muted); }
.f-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
@media (max-width: 599px) { .f-links { flex-direction: column; } }
.f-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink2); font: 500 15px/1.2 var(--sans); text-decoration: none;
}
.f-links a:hover { color: var(--accent); }
.f-legal {
  display: grid; gap: 8px;
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid var(--divider);
  font: 400 14px/1.6 var(--sans); color: var(--muted);
}
.f-legal .kicker { margin-bottom: 4px; }
.f-legal p { max-width: 72ch; }
.f-legal a { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.f-legal a:hover { color: var(--accent); }
.f-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  margin-top: 36px;
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════════
   7. MAQUETTES D'ÉCRANS — dessinées à la taille réelle de l'app (390 × 844)
   puis réduites d'un seul facteur --k. Toutes les cotes internes sont donc
   celles des composants React Native, au pixel.
   ════════════════════════════════════════════════════════════════════ */
.phone-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.phone-stage::before {
  content: ""; position: absolute; inset: 6% 0 12%;
  background: radial-gradient(closest-side, rgba(255, 112, 69, 0.13), rgba(255, 112, 69, 0));
  pointer-events: none;
}
.phone-cap {
  position: relative;
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}
.phone {
  --k: 0.74;
  position: relative;
  padding: 10px;
  border-radius: calc(55px * var(--k) + 10px);
  background: linear-gradient(155deg, #2b2b2b 0%, #151515 38%, #0e0e0e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 50px 90px -30px rgba(0, 0, 0, 0.95);
}
/* sous 350 px (iPhone en « affichage agrandi », zoom à 400 %) : à 0,74 le
   téléphone faisait 309 px pour 280 disponibles, la page glissait de 9 px */
@media (max-width: 349px) { .phone { --k: 0.66; } }
@media (min-width: 380px) { .phone { --k: 0.8; } }
@media (min-width: 768px) and (max-width: 1023px) { .phone { --k: 0.64; } }
@media (min-width: 1180px) { .phone { --k: 0.86; } }
.phone-screen {
  position: relative; isolation: isolate; overflow: hidden;
  width: calc(390px * var(--k)); height: calc(844px * var(--k));
  border-radius: calc(55px * var(--k));
  background: #0A0A0A;
}
.app {
  position: absolute; left: 0; top: 0;
  width: 390px; height: 844px;
  transform: scale(var(--k)); transform-origin: 0 0;
  overflow: hidden;
  font-family: var(--sans); color: var(--ink);
  line-height: normal;
}
.app .i { stroke-width: 2; }

/* Barre d'état + îlot + indicateur d'accueil */
.sb {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6; height: 50px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 30px 0 46px; color: #fff;
}
.sb-time { font: 600 16px/1 var(--sans); letter-spacing: -0.01em; }
.sb-right { display: flex; align-items: center; gap: 6px; }
.sb-signal { display: flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.sb-signal i { display: block; width: 3px; border-radius: 1px; background: #fff; }
.sb-signal i:nth-child(1) { height: 4px; }
.sb-signal i:nth-child(2) { height: 6px; }
.sb-signal i:nth-child(3) { height: 8.5px; }
.sb-signal i:nth-child(4) { height: 11px; }
.sb-wifi { font-size: 16px; stroke-width: 2.6 !important; }
.sb-bat {
  position: relative; width: 25px; height: 12px; padding: 1.5px;
  border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 3.5px;
}
.sb-bat::after { content: ""; position: absolute; right: -3.5px; top: 3.5px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(255, 255, 255, 0.45); }
.sb-bat i { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: #fff; }
.island {
  position: absolute; z-index: 7; top: 11px; left: 50%;
  width: 122px; height: 35px; margin-left: -61px;
  border-radius: 20px; background: #000;
}
.home-ind {
  position: absolute; z-index: 7; bottom: 8px; left: 50%;
  width: 134px; height: 5px; margin-left: -67px;
  border-radius: 3px; background: rgba(255, 255, 255, 0.4);
}

/* ─── Fiche activité (app/activity/[id].tsx) ─── */
.fx-photo { position: absolute; left: 0; top: 0; width: 390px; height: 272px; object-fit: cover; max-width: none; }
.fx-shade { position: absolute; left: 0; right: 0; top: 0; height: 130px; background: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0)); }
.fx-nav { position: absolute; z-index: 3; top: 55px; left: 20px; right: 20px; display: flex; justify-content: space-between; }
.fx-actions { display: flex; gap: 10px; }
.fx-btn {
  width: 38px; height: 38px; border-radius: 19px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--divider); color: var(--ink);
}
.fx-sheet {
  position: absolute; left: 0; right: 0; top: 250px; bottom: 0;
  padding: 18px 20px 0;
  border-radius: 28px 28px 0 0;
  background: #0A0A0A;
}
.fx-tags { display: flex; gap: 6px; margin-bottom: 10px; }
.fx-tag { padding: 4px 10px; border-radius: 999px; background: var(--tag); color: var(--ink); font: 600 10px/1.25 var(--sans); letter-spacing: 0.3px; }
.fx-title { font: 400 26px/31px var(--serif); letter-spacing: -1px; color: var(--ink); margin-bottom: 6px; }
.fx-label { margin: 16px 0 8px; font: 500 11px/14px var(--mono); letter-spacing: 1.4px; color: var(--muted); }
.fx-desc { font: 400 14px/22px var(--serif); letter-spacing: -0.1px; color: var(--ink2); }
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.fx-stat {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--divider);
}
.fx-stat-l { font: 500 9px/11px var(--mono); letter-spacing: 1.4px; color: var(--muted); }
.fx-stat-v { font: 500 17px/21px var(--serif); letter-spacing: -0.4px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-stat-s { font: 400 11px/14px var(--sans); color: var(--muted); }
.fx-stat-a { display: flex; align-items: center; gap: 2px; margin-top: 2px; font: 600 11px/14px var(--sans); letter-spacing: -0.05px; color: var(--ink2); }
.fx-stat-a .i { font-size: 11px; }
.fx-host {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--card-border);
}
.fx-host-av { width: 44px; height: 44px; border-radius: 22px; flex: none; display: grid; place-items: center; color: #fff; font: 500 18px/1 var(--serif); }
.fx-host-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fx-host-n { font: 500 15px/19px var(--serif); letter-spacing: -0.3px; color: var(--ink); }
.fx-host-r { margin-top: 2px; font: 400 12px/15px var(--sans); color: var(--muted); }
.fx-write {
  height: 32px; padding: 0 11px; margin-right: 8px; border-radius: 12px;
  display: flex; align-items: center; gap: 5px;
  background: var(--tag); color: var(--accent);
  font: 600 12px/1 var(--sans); letter-spacing: -0.1px;
}
.fx-write .i { font-size: 13px; }
.fx-profile {
  height: 32px; padding: 0 12px; border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline); color: var(--ink);
  font: 500 12px/1 var(--sans); letter-spacing: -0.1px;
}
.fx-footer {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px 34px;
  border-radius: 28px 28px 0 0;
  background: var(--surface);
  box-shadow: 0 -1px 0 var(--divider), 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.fx-fmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-fk { font: 500 11px/14px var(--mono); letter-spacing: 1.4px; color: var(--muted); }
.fx-ft { font: 500 15px/17px var(--sans); letter-spacing: -0.3px; color: var(--ink); white-space: nowrap; }
.fx-cta {
  height: 48px; padding: 0 28px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font: 600 14px/1 var(--sans); letter-spacing: -0.2px;
}

/* ─── Conversation de groupe (app/(tabs)/chat.tsx + bubbleStyles.ts) ─── */
.cx-glow { position: absolute; left: 0; right: 0; top: 0; height: 220px; background: linear-gradient(180deg, var(--glow), var(--glow-fade)); }
.cx-head { position: absolute; z-index: 3; top: 50px; left: 0; right: 0; padding: 10px 16px; display: flex; align-items: center; gap: 8px; }
.cx-ib { width: 38px; height: 38px; margin: 0 -8px; flex: none; display: grid; place-items: center; color: var(--ink); }
.cx-ib-more { color: var(--ink2); }
.cx-center { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.cx-thumb { width: 38px; height: 38px; border-radius: 11px; overflow: hidden; flex: none; }
.cx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cx-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cx-t { font: 500 17px/21px var(--serif); letter-spacing: -0.4px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-m { font: italic 400 12.5px/16px var(--serif); color: #FF9A6B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-list {
  position: absolute; left: 0; right: 0; top: 112px; bottom: 124px;
  padding: 0 12px 8px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.cx-sep {
  align-self: center; margin: 4px 0 14px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface2); color: var(--muted);
  font: 500 9px/11px var(--mono); letter-spacing: 1px;
}
.cx-row { display: flex; gap: 8px; align-items: flex-end; }
.cx-row.me { flex-direction: row-reverse; }
.cx-row.tight { margin-bottom: 2px; }
.cx-row.end { margin-bottom: 12px; }
.cx-row.end:last-child { margin-bottom: 0; }
.cx-av { width: 24px; height: 24px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; font: 500 11px/1 var(--serif); letter-spacing: -0.2px; }
.cx-av.empty { background: none; }
.cx-col { max-width: 78%; display: flex; flex-direction: column; align-items: flex-start; }
.cx-row.me .cx-col { align-items: flex-end; }
.cx-name { margin: 0 0 3px 6px; font: 500 11px/14px var(--mono); letter-spacing: 0.8px; }
.cx-b {
  padding: 9px 14px; border-radius: 14px;
  background: var(--surface2); color: var(--ink);
  font: 400 15.5px/21px var(--sans); letter-spacing: -0.1px;
}
.cx-row:not(.me) .cx-b.first { border-bottom-left-radius: 4px; }
.cx-row:not(.me) .cx-b.last { border-top-left-radius: 4px; }
.cx-row.me .cx-b { background: var(--accent); color: var(--accent-ink); }
.cx-row.me .cx-b.first { border-bottom-right-radius: 4px; }
.cx-row.me .cx-b.last { border-top-right-radius: 4px; }
.cx-time { margin: 4px 6px 0; font: 500 10px/12px var(--sans); letter-spacing: 0.3px; color: var(--muted); }
.cx-band {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding-bottom: 34px;
  background: #0A0A0A;
  border-top: 1px solid var(--divider);
}
.cx-typing { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font: 400 12px/15px var(--sans); letter-spacing: 0.1px; color: var(--muted); }
.cx-dots { display: flex; gap: 3px; }
.cx-dots i { display: block; width: 5px; height: 5px; border-radius: 3px; background: var(--muted); opacity: 0.3; }
.cx-dots i:nth-child(1) { opacity: 1; }
.cx-dots i:nth-child(2) { opacity: 0.65; }
@media (prefers-reduced-motion: no-preference) {
  .cx-dots i { animation: typing 1.44s ease-in-out infinite both; }
  .cx-dots i:nth-child(2) { animation-delay: 0.18s; }
  .cx-dots i:nth-child(3) { animation-delay: 0.36s; }
}
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; } 27% { opacity: 1; } }
.cx-input { display: flex; align-items: flex-end; gap: 6px; padding: 8px; }
.cx-plus { width: 40px; height: 44px; display: grid; place-items: center; color: var(--ink2); font-size: 24px; }
.cx-field {
  flex: 1; height: 44px; padding: 0 16px; border-radius: 22px;
  display: flex; align-items: center;
  background: var(--surface2); color: var(--muted2);
  font: 400 15.5px/1 var(--sans); letter-spacing: -0.1px;
}
/* Champ vide : bouton d'envoi neutre, flèche vers le haut (chat.tsx, « arrow-up »). */
.cx-send { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: var(--surface2); color: var(--muted); font-size: 20px; }

/* ─── Création, étape 3 (app/(tabs)/create.tsx) ─── */
.cr-glow { position: absolute; left: 0; right: 0; top: 0; height: 280px; background: linear-gradient(180deg, var(--glow), var(--glow-fade)); }
.cr-prog { position: absolute; z-index: 2; top: 50px; left: 0; right: 0; padding: 4px 20px 12px; }
.cr-row { height: 36px; display: flex; align-items: center; justify-content: space-between; }
.cr-back { width: 36px; height: 36px; display: flex; align-items: center; color: var(--ink); font-size: 22px; margin-left: -4px; }
.cr-spacer { width: 36px; }
.cr-step { font: 500 10px/1 var(--mono); letter-spacing: 1.6px; color: var(--accent); }
.cr-track { height: 2.5px; margin-top: 6px; border-radius: 2px; overflow: hidden; background: var(--surface2); }
.cr-track i { display: block; width: 75%; height: 100%; border-radius: 1px; background: var(--accent); }
.cr-body { position: absolute; top: 110px; left: 20px; right: 20px; padding-top: 8px; }
.cr-kicker { font: 500 10px/13px var(--mono); letter-spacing: 1.6px; color: var(--accent); }
.cr-title { margin: 4px 0 24px; font: 400 37px/42px var(--serif); letter-spacing: -1.3px; color: var(--ink); }
.cr-label { margin-bottom: 10px; font: 500 9px/11px var(--mono); letter-spacing: 1.4px; color: var(--muted); }
.cr-toggle { display: flex; padding: 4px; border-radius: 12px; background: var(--surface2); }
.cr-toggle span {
  flex: 1; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  color: var(--muted); font: 500 13px/16px var(--sans); letter-spacing: -0.1px;
}
.cr-toggle span.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.cr-hint { margin-top: 8px; padding: 0 2px; font: 400 13px/17px var(--sans); letter-spacing: -0.1px; color: var(--muted); }
.cr-hint + .cr-label, .cr-stepper + .cr-label, .cr-chips + .cr-label { margin-top: 22px; }
.cr-stepper {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding: 12px 8px; border-radius: 14px;
  background: var(--surface2);
}
.cr-sbtn { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); font-size: 20px; }
.cr-sval { flex: 1; display: flex; flex-direction: column; align-items: center; }
.cr-num { font: 600 28px/32px var(--serif); letter-spacing: -0.8px; color: var(--ink); }
.cr-slabel { margin-top: 4px; font: 500 11px/13px var(--mono); letter-spacing: 1.4px; color: var(--muted); }
.cr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--surface2); }
.cr-chips span {
  padding: 8px 14px; border-radius: 99px;
  border: 1px solid var(--divider); color: var(--ink);
  font: 600 13px/16px var(--sans); letter-spacing: -0.1px;
}
.cr-chips span.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }


/* ═════════ 10. Menu mobile et appel à l'action ═════════
   Ajouté le 18.09.2026. La nav n'existait qu'à partir de 1024 px : en dessous,
   aucun moyen d'atteindre les sections ni la seconde page. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; margin-left: 4px;
  background: none; border: 1px solid var(--hairline); border-radius: 12px;
  color: var(--ink); cursor: pointer; padding: 0;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.2s ease;
}
.burger:active { transform: scale(0.97); }
.burger-i, .burger-i::before, .burger-i::after {
  display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px;
}
.burger-i { position: relative; }
.burger-i::before, .burger-i::after {
  content: ""; position: absolute; left: 0;
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}
.burger-i::before { top: -6px; }
.burger-i::after  { top: 6px; }
.burger[aria-expanded="true"] .burger-i { background: transparent; }
.burger[aria-expanded="true"] .burger-i::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-i::after  { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1024px) { .burger { display: none; } }

/* Panneau plein écran. Transition (interruptible), jamais un keyframe : on peut
   refermer à mi-ouverture sans que ça reparte de zéro. */
.menu-mobile {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  background: var(--bg); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s linear 0.22s;
}
.menu-mobile[data-ouvert] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu-fermer {
  min-height: 44px; padding: 0 16px; flex: none;
  background: none; border: 1px solid var(--hairline); border-radius: 12px;
  color: var(--ink2); font: 500 14.5px/1 var(--sans); cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s ease;
}
.menu-fermer:active { transform: scale(0.97); }
.menu-mobile nav { display: flex; flex-direction: column; margin-top: 20px; }
.menu-mobile nav a {
  display: block; padding: 18px 2px; text-decoration: none; color: var(--ink);
  font: 500 20px/1.2 var(--serif); letter-spacing: -0.02em;
  border-bottom: 1px solid var(--divider);
}
.menu-mobile .btn { margin-top: 28px; }
@media (min-width: 1024px) { .menu-mobile { display: none; } }

/* Le sommaire de six entrées de l'accueil devient un seul lien vers la 2e page. */
.sommaire-lien {
  display: flex; align-items: center; gap: 14px; margin-top: 28px;
  padding: 16px 18px; text-decoration: none;
  background: var(--card); border: 1px solid var(--card-border);
  border-left: 5px solid var(--accent); border-radius: 14px;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.2s ease;
}
.sommaire-lien:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .sommaire-lien:hover { border-color: rgba(255, 255, 255, 0.22); border-left-color: var(--accent); }
}
.sommaire-k {
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); flex: none;
}
.sommaire-t { font: 400 14.5px/1.35 var(--sans); color: var(--ink2); }
.sommaire-lien .i { margin-left: auto; flex: none; color: var(--muted); font-size: 18px; }
@media (max-width: 560px) {
  .sommaire-lien { flex-wrap: wrap; }
  .sommaire-lien .i { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-mobile, .burger, .burger-i::before, .burger-i::after, .sommaire-lien {
    transition-duration: 0.01ms !important; transform: none !important;
  }
  /* Sans AUCUNE transition pour le panneau : même à 0,01 ms, « visibility »
     restait « hidden » à l'instant où site.js y pose le focus, et le focus
     restait derrière, sur la page (constaté le 27.09.2026). */
  .menu-mobile { transition: none !important; }
}

/* Repère de marque dans le panneau : sans lui, menu ouvert, on ne sait plus
   sur quel site on se trouve. */
.menu-haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.menu-haut .wordmark { font-size: 21px; }

/* Cible tactile : les liens du pied de page faisaient 17 px de haut. */
.f-legal a, .footer p a { display: inline-block; padding: 11px 0; margin: -11px 0; }

/* Sous 600 px, le bouton de l'en-tête passait sur deux lignes ET faisait doublon
   avec celui de la une, visible en même temps. L'appel à l'action vit dans la
   une et dans le menu ; l'en-tête garde la marque et le bouton de menu. */
@media (max-width: 1023px) { .header-in > .btn-sm { margin-left: auto; } }
@media (max-width: 599px) { .header-in > .btn-sm { display: none; } }

/* Sur ordinateur, la carte « En détail » s'ancre en BAS de la colonne de texte,
   au niveau du bas du carrousel. Elle a remplacé un sommaire de six entrées :
   sans cet ancrage, la colonne de gauche s'arrête 250 px plus haut et laisse un
   trou visible. Invisible sur téléphone, où tout est en une colonne. */
@media (min-width: 1024px) {
  .une-texte > .faits { margin-bottom: 32px; }
  .sommaire-lien { margin-top: auto; }
}


/* Le chapô de la page de détail. La mesure de .lead (38 signes) est calibrée pour
   la colonne étroite de la une ; seul sur toute la largeur il casse mal
   (« et les / garde-fous. »). 52 signes lui donne deux lignes et un bon drapeau. */
.intro-lead { margin-top: 20px; max-width: 52ch; }

/* ═════════ 8. Le formulaire de demande d'accès ═════════
   Les règles viennent de l'app, pas d'un habillage inventé :
   champs sur `surface2`, SANS bordure, rayon 14 (lib/theme.ts et create.tsx),
   et le choix iPhone/Android reprend le contrôle segmenté de l'app
   (components/hifi/ChoiceToggle.tsx) : segment actif en corail, encre foncée. */

.fdemande { margin-top: 22px; }

/* Prénom et e-mail côte à côte dès qu'il y a la place, l'un sous l'autre sinon. */
.fduo { display: grid; gap: 14px; margin-bottom: 14px; }   /* meme rythme vertical que .fchamp */
@media (min-width: 560px) { .fduo { grid-template-columns: 1fr 1fr; } }

.fchamp { display: block; margin: 0 0 14px; }
.fduo .fchamp { margin-bottom: 0; }

/* 16 px (27.09.2026) : à 9 px en mono capitales, les libellés étaient la
   ligne la plus petite de la page, sur l'élément qu'il faut lire en entier. */
.flabel {
  display: block; margin-bottom: 8px;
  font: 500 16px/1.3 var(--sans); letter-spacing: -0.01em;
  color: var(--ink);
}
.flabel .fopt { color: var(--muted); font-weight: 400; }

.fsaisie {
  display: block; width: 100%; min-height: 52px; padding: 14px 16px;
  border: 0; border-radius: 14px;
  background: var(--surface2); color: var(--ink);
  font: 400 16px/1.35 var(--sans); letter-spacing: -0.2px;   /* 16px : en dessous, iOS zoome à la saisie */
  -webkit-appearance: none; appearance: none;
}
.fsaisie::placeholder { color: var(--muted2); }
.fsaisie:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
textarea.fsaisie { min-height: 82px; resize: vertical; }
select.fsaisie {
  padding-right: 46px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
}
select.fsaisie:invalid { color: var(--muted); }
select.fsaisie option, select.fsaisie optgroup { color: var(--ink); background: var(--surface2); }

/* Le choix du téléphone. `fieldset` pour que les lecteurs d'écran annoncent la
   question avant les deux réponses ; le bouton radio reste présent et focusable
   (il est simplement rendu invisible), donc le clavier fonctionne. */
.fchoix { margin: 0 0 14px; padding: 0; border: 0; }
.fchoix legend { padding: 0; }
.ftoggle { display: flex; gap: 0; padding: 4px; border-radius: 14px; background: var(--surface2); }
.ftoggle label { flex: 1; }
.ftoggle input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ftoggle span {
  display: grid; place-items: center; height: 44px; border-radius: 11px;
  color: var(--muted); font: 500 16px/1.2 var(--sans); letter-spacing: -0.1px;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.ftoggle input:checked + span { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ftoggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* La note Android (25.10.2026, demande de Nono) : elle apparaît dès qu’on coche
   « Android », avant même d’envoyer. CSS seul (`:has`) : elle marche sans
   JavaScript ; un navigateur trop ancien ne la montre pas, et la confirmation
   après l’envoi dit la même chose. Bandeau doré : le style des avertissements
   de l’app. */
.fnote { display: none; margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--gold-bg); color: var(--ink2); font: 400 15px/1.45 var(--sans); }
.fnote strong { color: var(--gold); font-weight: 600; }
.fchoix:has(input[value="Android"]:checked) .fnote { display: block; }

/* Le piège à robots : hors de l'écran, hors du parcours au clavier, et
   `aria-hidden` pour qu'aucun lecteur d'écran ne le lise. */
.fpiege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fdemande .btn { margin-top: 4px; width: 100%; }
@media (min-width: 560px) { .fdemande .btn { width: auto; } }
.fdemande .btn[disabled] { opacity: 0.55; box-shadow: none; transform: none; cursor: progress; }

/* Le message d'erreur : inline, sous le champ ou sous le bouton — jamais une
   fenêtre qui bloque. C'est la règle de l'app (« zéro popup »). */
.ferreur { margin: 6px 0 0; font: 500 16px/1.35 var(--sans); color: var(--danger); }
.fchamp .ferreur, .fchoix .ferreur { margin-top: 6px; }
.fsaisie[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--danger); }

.fetat { margin: 12px 0 0; font: 500 16px/1.4 var(--sans); color: var(--danger); }
.fetat:empty { display: none; }

.fmentions { margin: 14px 0 0; font: 400 15px/1.5 var(--sans); color: var(--muted); }
/* lien dans une phrase : la cible fait 44 px de haut sans décaler les lignes */
.fmentions a { display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--ink2); text-underline-offset: 3px; }

/* La confirmation remplace le formulaire : la personne a fini, lui laisser le
   formulaire sous les yeux l'inviterait à recommencer. */
.fmerci {
  margin-top: 22px; padding: 22px 20px;
  border: 1px solid var(--card-border); border-left: 5px solid var(--accent); border-radius: 14px;
  background: var(--card);
}
.fmerci-t { margin: 0; font: 500 22px/1.2 var(--serif); letter-spacing: -0.4px; color: var(--ink); }
.fmerci-p { margin: 8px 0 0; font: 400 15px/21px var(--sans); color: var(--ink2); }

/* ═════════ 9. La page de confirmation servie sans JavaScript ═════════
   merci.html : la fonction demande-beta y renvoie quand le formulaire part à
   l'ancienne (sans JavaScript). */
.page-mini { display: grid; place-items: center; min-height: 100svh; }
.mini-wrap { padding: 40px var(--gutter); text-align: center; }
.mini-titre { margin: 10px 0 0; font-size: clamp(34px, 9vw, 52px); }
.mini-texte { margin: 16px auto 26px; max-width: 46ch; font: 400 16px/24px var(--sans); color: var(--ink2); }
.mini-note { margin: 26px auto 0; max-width: 46ch; font: 400 14px/20px var(--sans); color: var(--muted); }
.mini-note a { color: var(--ink2); text-underline-offset: 3px; }