/* PairWise — site marketing (pairwise.finance)
   Feuille de styles partagée par toutes les pages statiques. Reprend les tokens
   de l'app (src/index.css) : mêmes couleurs, mêmes polices, thème clair + nuit. */

:root {
  --ink: #2b2621; --ink-2: #6e665d; --ink-3: #a69c8f; --ink-4: #c9c0b4;
  --bg: #fbf7f1; --bg-card: #ffffff; --rule: rgba(43, 38, 33, 0.12);
  --panel: #f3ede3; --band: #f0e7d8;
  --tang: #e9673f; --tang-light: color-mix(in srgb, var(--tang) 15%, #fff); --tang-deep: #cf5730;
  --sage: #7fa98a; --sage-light: color-mix(in srgb, var(--sage) 15%, #fff);
  --lavi: #9c8fc6; --lavi-light: color-mix(in srgb, var(--lavi) 15%, #fff);
  --sky: #6aa0cc; --sky-light: color-mix(in srgb, var(--sky) 15%, #fff);
  --amber: #e0952e; --amber-light: color-mix(in srgb, var(--amber) 15%, #fff);
  --shadow: 0 14px 40px rgba(43, 38, 33, .10);
  --shadow-lg: 0 30px 70px rgba(43, 38, 33, .16);
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Thème nuit — repris de src/index.css [data-theme="pairwise-dark"]. */
:root[data-theme="dark"] {
  --ink: #eef2f6; --ink-2: #b4bec8; --ink-3: #8b95a0; --ink-4: #5b6670;
  --bg: #0a1520; --bg-card: #14202d; --rule: #2b3540; --panel: #101c28; --band: #0f1d2b;
  --tang: #ff7458; --tang-light: #3e2f35; --tang-deep: #ff8a71;
  --sage: #5abb88; --sage-light: #213c3d;
  --lavi: #7aa8e0; --lavi-light: #1b334a;
  --sky: #2ea4dc; --sky-light: #19384d;
  --amber: #fcb452; --amber-light: #3e3b34;
  --shadow: 0 14px 40px rgba(0, 0, 0, .4); --shadow-lg: 0 30px 70px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eef2f6; --ink-2: #b4bec8; --ink-3: #8b95a0; --ink-4: #5b6670;
    --bg: #0a1520; --bg-card: #14202d; --rule: #2b3540; --panel: #101c28; --band: #0f1d2b;
    --tang: #ff7458; --tang-light: #3e2f35; --tang-deep: #ff8a71;
    --sage: #5abb88; --sage-light: #213c3d;
    --lavi: #7aa8e0; --lavi-light: #1b334a;
    --sky: #2ea4dc; --sky-light: #19384d;
    --amber: #fcb452; --amber-light: #3e3b34;
    --shadow: 0 14px 40px rgba(0, 0, 0, .4); --shadow-lg: 0 30px 70px rgba(0, 0, 0, .5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: inherit; }
.display { font-family: var(--font-display); letter-spacing: -0.02em; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tang); }
:focus-visible { outline: 2px solid var(--tang); outline-offset: 2px; border-radius: 4px; }

/* ============ Header ============ */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px); border-bottom: .5px solid var(--rule);
}
header.site .bar { display: flex; align-items: center; gap: 26px; height: 64px; max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 18px; text-decoration: none; color: var(--ink); }
.logo .p { width: 28px; height: 28px; border-radius: 8px; background: var(--tang); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
header.site nav { display: flex; gap: 20px; margin-left: 4px; }
header.site nav a { text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 4px; }
header.site nav a:hover { color: var(--ink); }
header.site nav a.active { color: var(--tang); }
header.site .login { margin-left: auto; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 14.5px; }

/* Bouton « C'est parti » dans l'en-tête — posé par scripts/build-marketing-header.js
   sur les seules pages qui n'ont pas de bande de clôture dans leur corps (voir
   `cta` dans PAGES). `.login` garde le `margin-left:auto` qui pousse le groupe à
   droite ; le bouton se contente de le suivre. */
header.site .hcta {
  margin-left: 18px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--tang); color: #fff; font-weight: 700; font-size: 14.5px;
  padding: 9px 18px; border-radius: 999px; white-space: nowrap;
}
header.site .hcta:hover { background: #d85a34; }
@media (max-width: 560px) { header.site .hcta { display: none; } }
@media (max-width: 860px) { header.site nav { display: none; } }

/* ============ Breadcrumb ============ */
.crumb { max-width: 1060px; margin: 0 auto; padding: 16px 24px 0; font-size: 13px; color: var(--ink-3); }
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--ink-2); }
.crumb b { color: var(--ink-2); font-weight: 600; }
.crumb i { margin: 0 4px; }

/* ============ Boutons ============ */
.btn-primary { background: var(--tang); color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; padding: 14px 24px; border-radius: 13px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 22px var(--tang-light); border: none; cursor: pointer; }
.btn-primary:hover { background: var(--tang-deep); }

/* ============ Hero ============ */
.hero { padding: 26px 0 46px; }
.hero .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }
.hero h1 { font-size: 46px; line-height: 1.06; font-weight: 700; margin: 14px 0 18px; text-wrap: balance; }
.hero .sub { font-size: 19px; color: var(--ink-2); margin: 0 0 26px; max-width: 470px; }
.hero .actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.microtrust { font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 820px) { .hero .grid { grid-template-columns: 1fr; gap: 30px; } .hero h1 { font-size: 34px; } }

/* ---- Démo « live » ---- */
.demo { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 22px; padding: 20px; box-shadow: var(--shadow); }
.demo .field { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1.5px solid var(--tang); border-radius: 15px; padding: 4px 6px 4px 15px; box-shadow: 0 6px 18px var(--tang-light); }
.demo .field .spark { color: var(--tang); font-size: 20px; }
.demo .field .typed { flex: 1; font-size: 16px; font-weight: 600; color: var(--ink); padding: 12px 0; }
.demo .field .typed .caret { display: inline-block; width: 2px; height: 18px; background: var(--tang); vertical-align: -3px; margin-left: 2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mic-btn { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; background: var(--lavi-light); color: var(--lavi); }
.demo .voiceline { margin-top: 10px; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.demo .voiceline .m { color: var(--lavi); font-size: 16px; }
.demo .arrow { text-align: center; color: var(--ink-3); font-size: 20px; margin: 12px 0 4px; }
.demo .got { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 4px 0 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; border-radius: 10px; padding: 7px 11px; }
.pill i { font-size: 14px; }
.pill.p-exp { background: var(--tang-light); color: var(--tang); }
.pill.p-cat { background: var(--amber-light); color: var(--amber); }
.pill.p-date { background: var(--sky-light); color: var(--sky); }
.pill.p-cur { background: var(--sage-light); color: var(--sage); }
.demo .also { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.demo .also .swap { color: var(--tang); font-weight: 700; }

/* ============ Sections ============ */
section { padding: 48px 0; }
section.alt { background: var(--panel); border-top: .5px solid var(--rule); border-bottom: .5px solid var(--rule); }
.h2 { font-size: 30px; font-weight: 700; margin: 8px 0 10px; text-wrap: balance; }
.lede { font-size: 18px; color: var(--ink-2); max-width: 620px; margin: 0 0 30px; }

/* ---- Étapes + cadres appareil ---- */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 40px; align-items: center; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 26px; } .steps .phone { order: -1; } }
.step-copy .num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--tang); color: #fff; font-weight: 800; font-size: 15px; }
.step-copy h3 { font-size: 21px; font-weight: 700; margin: 12px 0 8px; }
.step-copy p { color: var(--ink-2); margin: 0 0 8px; }
.kbd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 7px; padding: 2px 7px; color: var(--ink); white-space: nowrap; }

/* Téléphone */
.phone { width: 300px; max-width: 100%; margin: 0 auto; background: #0d0d10; border-radius: 40px; padding: 10px; box-shadow: var(--shadow-lg); }
.phone .screen { background: var(--bg); border-radius: 31px; overflow: hidden; }
.phone .notch { height: 22px; display: flex; justify-content: center; }
.phone .notch::after { content: ""; width: 90px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .25); margin-top: 8px; }
.app-top { display: flex; align-items: center; gap: 10px; padding: 6px 16px 14px; }
.app-top .back { color: var(--ink-3); font-size: 18px; }
.app-top .title { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.app-body { padding: 0 15px 20px; }
.nl-bar { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1.5px solid var(--tang); border-radius: 13px; padding: 11px 12px; box-shadow: 0 5px 14px var(--tang-light); }
.nl-bar .spark { color: var(--tang); font-size: 16px; }
.nl-bar .t { flex: 1; font-size: 13.5px; font-weight: 600; }
.nl-bar .mic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--lavi-light); color: var(--lavi); }
.autofill-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sage); background: var(--sage-light); border-radius: 99px; padding: 4px 9px; margin: 14px 0 10px; }
.seg { display: flex; background: var(--panel); border-radius: 11px; padding: 3px; gap: 3px; margin-bottom: 12px; }
.seg span { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 7px 0; border-radius: 8px; color: var(--ink-3); }
.seg span.on { background: var(--tang); color: #fff; }
.fld { background: var(--bg-card); border: .5px solid var(--rule); border-radius: 11px; padding: 10px 12px; margin-bottom: 9px; }
.fld .lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.fld .val { font-size: 15px; font-weight: 700; margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.fld .val.tag { font-size: 13px; color: var(--lavi); }
.catdot { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--amber-light); color: var(--amber); font-size: 13px; }
.row2 { display: flex; gap: 9px; }
.row2 .fld { flex: 1; }

/* ---- Pour qui ---- */
.aud { display: flex; flex-wrap: wrap; gap: 12px; }
.aud a { text-decoration: none; display: inline-flex; align-items: center; gap: 11px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 16px; font-weight: 700; font-size: 15px; color: var(--ink); }
.aud a:hover { border-color: var(--tang); }
.aud a .ic { font-size: 20px; color: var(--tang); }
.aud a small { display: block; font-weight: 500; font-size: 12px; color: var(--ink-3); }

/* ---- FAQ ---- */
.faq { max-width: 760px; }
details.q { border-bottom: .5px solid var(--rule); }
details.q summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 2px; font-weight: 700; font-size: 17px; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary .plus { color: var(--tang); font-size: 22px; font-weight: 700; flex: none; }
details.q[open] summary .plus { transform: rotate(45deg); }
details.q p { margin: 0 2px 18px; color: var(--ink-2); font-size: 15.5px; }

/* ============ Bande CTA ============ */
.cta-band { background: var(--band); border-top: .5px solid var(--rule); padding: 66px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band .eyebrow { color: var(--ink-3); }
.cta-band h2 { font-size: 40px; font-weight: 700; margin: 14px auto 26px; max-width: 620px; text-wrap: balance; }
.cta-band .btn-primary { font-size: 18px; padding: 16px 30px; }
.cta-band .fineprint { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.cta-band .fineprint span { display: inline-flex; align-items: center; gap: 6px; }
.cta-band .float { position: absolute; font-size: 30px; color: var(--tang); opacity: .16; }
@media (max-width: 600px) { .cta-band h2 { font-size: 30px; } .cta-band .float { display: none; } }

/* ============ Footer ============ */
footer.site { background: var(--panel); border-top: .5px solid var(--rule); padding: 42px 0 30px; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; }
@media (max-width: 720px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
footer.site h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 12px; }
footer.site a { display: block; text-decoration: none; color: var(--ink-2); font-size: 14px; margin-bottom: 8px; }
footer.site a:hover { color: var(--ink); }
footer.site .intro { font-size: 13.5px; color: var(--ink-3); margin: 10px 0 0; max-width: 240px; }
footer.site .copy { margin-top: 28px; padding-top: 18px; border-top: .5px solid var(--rule); font-size: 13px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   Page d'accueil (index.html)
   ============================================================ */

/* ---- Hero centré ---- */
.home-hero { padding: 56px 0 40px; text-align: center; }
.home-hero .badge { display: inline-flex; align-items: center; gap: 8px; background: var(--sage-light); color: var(--sage); border-radius: 999px; padding: 7px 16px; font-size: 13.5px; font-weight: 700; }
.home-hero h1 { font-size: 56px; line-height: 1.04; font-weight: 700; margin: 22px auto 18px; max-width: 780px; text-wrap: balance; }
.home-hero .sub { font-size: 20px; color: var(--ink-2); margin: 0 auto 28px; max-width: 570px; }
.home-hero .actions { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
@media (max-width: 700px) { .home-hero h1 { font-size: 34px; } .home-hero { padding: 34px 0 26px; } }

/* ---- Trio d'aperçus produit ---- */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; align-items: start; }
@media (max-width: 820px) { .shots { grid-template-columns: 1fr; max-width: 330px; margin-inline: auto; } }
.shot { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); text-align: left; }
.shot .cap { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 11px; }
.shot .nlbar { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1.5px solid var(--tang); border-radius: 12px; padding: 10px 11px; }
.shot .nlbar .t { flex: 1; font-size: 13px; font-weight: 600; }
.shot .nlbar .sp { color: var(--tang); font-size: 15px; }
.shot .nlbar .mi { color: var(--lavi); font-size: 15px; }
.mini { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 8px 0; border-bottom: .5px solid var(--rule); }
.mini:last-child { border-bottom: none; }
.mini .l { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.dotc { width: 20px; height: 20px; border-radius: 6px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.pbar { height: 7px; border-radius: 99px; background: var(--rule); overflow: hidden; margin-top: 6px; }
.pbar span { display: block; height: 100%; border-radius: 99px; }
.pline { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; }
.shot .big { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.shot .trend { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }

/* ---- Positionnement : trois outils → un ---- */
.replace { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; }
@media (max-width: 760px) { .replace { grid-template-columns: 1fr; gap: 16px; } .replace .arrowbig { transform: rotate(90deg); } }
.stack { display: flex; flex-direction: column; gap: 10px; }
.old { display: flex; align-items: center; gap: 11px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 15px; font-size: 14.5px; color: var(--ink-3); }
.old i { font-size: 18px; color: var(--ink-4); }
.arrowbig { font-size: 28px; color: var(--tang); text-align: center; }
.one { background: var(--bg-card); border: 2px solid var(--tang); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); }
.one h3 { margin: 0 0 6px; font-size: 20px; font-family: var(--font-display); }
.one p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* ---- Grille de fonctionnalités ---- */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .feat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feat { grid-template-columns: 1fr; } }
.fcard { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 14px; padding: 16px; text-decoration: none; color: inherit; }
a.fcard:hover { border-color: var(--tang); }
.fic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.fcard b { display: block; font-size: 15px; margin-bottom: 2px; }
.fcard small { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; display: block; }

/* ---- Pour qui (grille) ---- */
.audg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: left; }
@media (max-width: 820px) { .audg { grid-template-columns: 1fr 1fr; } }
.acard { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 14px; padding: 18px; text-decoration: none; color: inherit; display: block; }
a.acard:hover { border-color: var(--tang); }
.acard .ic { font-size: 22px; margin-bottom: 9px; display: block; color: var(--tang); }
.acard b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.acard small { color: var(--ink-3); font-size: 12.5px; }

/* Élément de nav sans destination (page pas encore construite) : même allure
   que les liens, mais non cliquable — on ne pose pas de lien mort. */
header.site nav span.soon, footer.site span.soon { color: var(--ink-2); font-weight: 600; font-size: 14.5px; cursor: default; }
footer.site span.soon { display: block; font-size: 14px; margin-bottom: 8px; color: var(--ink-3); }

/* ============ Page Sécurité ============ */
/* Deux colonnes « ce qu'on fait / ce qu'on ne fait pas ». La seconde n'est pas
   un aveu gênant relégué en bas de page : c'est l'élément qui rend la première
   croyable, donc elle a le même poids visuel. */
.sec-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 820px) { .sec-two { grid-template-columns: 1fr; } }

.sec-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.sec-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.sec-list li i { font-size: 18px; flex: none; margin-top: 2px; }
.sec-list li b { color: var(--ink); font-weight: 700; }
.sec-list .yes i { color: var(--sage); }
.sec-list .no i { color: var(--ink-3); }

/* Tableau « ce qui sort de ton appareil ». Il déborde horizontalement sur
   mobile plutôt que de comprimer les colonnes jusqu'à l'illisible. */
.sec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sec-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.sec-table th, .sec-table td { text-align: left; padding: 12px 14px; border-bottom: .5px solid var(--rule); vertical-align: top; }
.sec-table th { font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; }
.sec-table td:first-child { font-weight: 700; white-space: nowrap; }
.sec-table td small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }

/* Encart « vérifie toi-même » : la seule affirmation que le lecteur peut
   contrôler sans nous croire sur parole mérite d'être signalée comme telle. */
.sec-check { background: var(--bg-card); border: 1px solid var(--rule); border-left: 3px solid var(--sage); border-radius: 14px; padding: 18px 20px; margin-top: 22px; }
.sec-check b { display: block; margin-bottom: 6px; font-size: 15.5px; }
.sec-check p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.sec-note { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; line-height: 1.55; }

/* ============ Page Transactions & reçus ============ */
/* Lignes de transaction reproduites en CSS, avec les tokens de l'app.
   Sémantique des montants : dépense = tangerine, revenu = sage,
   investissement/virement d'épargne = sky. L'icône suit la CATÉGORIE,
   jamais le signe du montant. */
.tx-day { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 16px 0 8px; }
.tx-day:first-child { margin-top: 0; }
.tx { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: .5px solid var(--rule); border-radius: 13px; padding: 10px 11px; margin-bottom: 8px; }
.tx .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.tx .body { flex: 1; min-width: 0; }
.tx .body b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx .body small { font-size: 11.5px; color: var(--ink-3); }
.tx .amt { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.tx .amt.exp { color: var(--tang); }
.tx .amt.inc { color: var(--sage); }
.tx .amt.inv { color: var(--sky); }
.tx .thumb { flex: none; width: 22px; height: 22px; border-radius: 6px; border: .5px solid var(--rule); }
/* Vignette / photo de reçu : motif hachuré, aucune image à charger. */
.hatch { background: repeating-linear-gradient(45deg, var(--panel) 0 3px, var(--rule) 3px 6px); }

/* ---- Recherche et filtres ---- */
.srch { display: flex; align-items: center; gap: 9px; background: var(--bg-card); border: .5px solid var(--rule); border-radius: 12px; padding: 11px 12px; margin-bottom: 14px; }
.srch i { color: var(--ink-3); font-size: 16px; }
.srch .term { font-size: 13.5px; font-weight: 700; color: var(--tang); }
.filt-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.filt-top b { font-family: var(--font-display); font-size: 15px; }
.filt-top i { color: var(--ink-3); font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.chips span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); border-radius: 20px; padding: 6px 11px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.chips span i { font-size: 13px; color: var(--ink-3); }
.selrow { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); border: .5px solid var(--rule); border-radius: 11px; padding: 11px 12px; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; }
.selrow .on { display: inline-flex; align-items: center; gap: 7px; }
.selrow .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--tang); }
.selrow i { color: var(--ink-3); font-size: 15px; }

/* ---- Reçu en plein écran ---- */
/* Plein-bleed : le voile doit couvrir tout l'écran du téléphone, pas seulement
   la zone de contenu — d'où les marges négatives qui annulent le padding de
   .app-body. Le débord est rogné par le overflow:hidden de .screen. */
.rcpt { position: relative; background: rgba(0, 0, 0, .55); margin: -14px -15px -20px; padding: 40px 20px 44px; }
.rcpt .close { position: absolute; top: 11px; right: 13px; color: #fff; font-size: 17px; }
.rcpt .card { background: var(--bg-card); border-radius: 14px; padding: 12px; }
.rcpt .photo { height: 170px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--ink-3); }
.rcpt .cap { margin: 10px 2px 2px; font-size: 13px; font-weight: 700; }
.rcpt .cap small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* ---- « Pour qui », version cartes détaillées ---- */
.aud-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.aud-cards > div { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.aud-cards .ic { font-size: 23px; color: var(--tang); }
.aud-cards h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 10px 0 6px; letter-spacing: -.02em; }
.aud-cards p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* ============ Page Objectifs & projets ============ */
/* Sémantique de couleur propre à cette page, reprise de l'app : un objectif est
   LAVANDE (barre, pourcentage, pastille, comptes liés) ; le SAGE signale un
   objectif atteint ou une trajectoire tenue ; le SKY une progression portée par
   des placements cotés. La couleur porte donc une information, elle ne décore
   pas — d'où trois variantes de bandeau plutôt qu'un accent unique. */

/* ---- Liste d'objectifs (maquette) ---- */
.goal { background: var(--panel); border-radius: 16px; padding: 13px; margin-bottom: 10px; }
.goal.done { background: var(--sage-light); }
.goal .top { display: flex; align-items: center; gap: 10px; }
.goal .ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--lavi-light); color: var(--lavi); }
.goal.done .ic { background: var(--bg-card); color: var(--sage); }
.goal .nm { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal .pc { font-size: 13px; font-weight: 800; color: var(--lavi); }
.goal.done .pc { color: var(--sage); }
.goal .track { height: 8px; border-radius: 99px; background: var(--bg-card); overflow: hidden; margin: 10px 0 7px; }
.goal .track span { display: block; height: 100%; border-radius: 99px; background: var(--lavi); }
.goal.done .track span { background: var(--sage); }
.goal .foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); }
.goal.done .foot { color: var(--sage); font-weight: 700; }

/* ---- Formulaire « Nouvel objectif » (maquette) ---- */
.gfld { background: var(--bg-card); border: .5px solid var(--rule); border-radius: 11px; padding: 10px 12px; margin-bottom: 9px; }
.gfld .lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.gfld .lbl em { font-style: normal; color: var(--ink-4); font-weight: 700; }
.gfld .val { font-size: 15px; font-weight: 700; margin-top: 3px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gfld .val.empty { color: var(--ink-4); font-weight: 500; }
.gfld .val i { color: var(--ink-3); font-size: 15px; }
.icons { display: flex; gap: 7px; margin-top: 6px; }
.icons span { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--panel); color: var(--ink-3); }
.icons span.on { background: var(--lavi); color: #fff; }
/* Comptes liés : le coché est lavande sur fond teinté, le décoché reste gris —
   c'est ce contraste qui montre qu'un objectif choisit SES comptes. */
.acct { display: flex; align-items: center; gap: 9px; border-radius: 10px; padding: 9px 11px; margin-bottom: 6px; font-size: 13px; background: var(--lavi-light); }
.acct i { font-size: 16px; color: var(--lavi); flex: none; }
.acct b { flex: 1; font-weight: 700; }
.acct s { text-decoration: none; font-weight: 700; }
.acct.off { background: var(--panel); color: var(--ink-3); }
.acct.off i { color: var(--ink-4); }

/* ---- Carte de détail d'un objectif ---- */
.gdetail { background: var(--bg-card); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-lg); }
.gdetail .hd { display: flex; align-items: center; gap: 12px; }
.gdetail .hd .ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--lavi-light); color: var(--lavi); }
.gdetail .hd b { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.gdetail .hd small { color: var(--ink-3); font-size: 13px; }
.gdetail .track { height: 10px; border-radius: 99px; background: var(--panel); overflow: hidden; margin: 18px 0 9px; }
.gdetail .track span { display: block; height: 100%; border-radius: 99px; background: var(--lavi); }
.gdetail .amts { display: flex; justify-content: space-between; font-size: 14.5px; font-weight: 700; }
.gdetail .amts .pc { color: var(--lavi); }
.gdetail .lines { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.gdetail .lines div { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink-2); }
.gdetail .lines i { font-size: 17px; flex: none; color: var(--ink-3); }
.gdetail .lines .lav i, .gdetail .lines .lav b { color: var(--lavi); }
.gdetail .lines .sag i, .gdetail .lines .sag b { color: var(--sage); }

/* ---- Liste de points à icône ---- */
.pts { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.pts li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.pts li i { font-size: 18px; flex: none; margin-top: 3px; color: var(--lavi); }
.pts li b { color: var(--ink); font-weight: 700; }

/* ---- Trois projets ---- */
.projs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.proj { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); }
.proj .hd { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.proj .hd .ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.proj .hd b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.proj .hd small { color: var(--ink-3); font-size: 12px; }
.proj .track { height: 8px; border-radius: 99px; background: var(--panel); overflow: hidden; margin-bottom: 7px; }
.proj .track span { display: block; height: 100%; border-radius: 99px; }
.proj .amts { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.proj p { font-size: 14.5px; color: var(--ink-2); margin: 13px 0; }
.proj .verdict { border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 700; }
.proj .note { font-size: 13px; color: var(--ink-3); margin: 11px 0 0; }
.proj.lav .hd .ic, .proj.lav .verdict { background: var(--lavi-light); color: var(--lavi); }
.proj.lav .track span { background: var(--lavi); }
.proj.sag .hd .ic, .proj.sag .verdict { background: var(--sage-light); color: var(--sage); }
.proj.sag .track span { background: var(--sage); }
.proj.sky .hd .ic, .proj.sky .verdict { background: var(--sky-light); color: var(--sky); }
.proj.sky .track span { background: var(--sky); }

/* ============================================================
   Accueil de l'apex : le hero de l'app, en statique
   ============================================================
   La page d'accueil publique reproduit l'écran d'accueil de l'app
   (src/screens/onboarding/OnboardingEntry.jsx, état « aucune entrée ») :
   même badge, même titre, même champ de saisie, mêmes pastilles d'exemple.
   L'utilisateur ne bascule sur app.pairwise.finance qu'en validant sa
   première saisie — le texte part alors dans l'URL (?e=…), puisque
   localStorage ne traverse pas la frontière d'origine.

   Le hero occupe la hauteur de la fenêtre pour que la zone de saisie tombe
   au centre de l'écran, mais le reste de la page marketing subsiste EN
   DESSOUS : c'est lui qui porte le référencement et les liens vers les pages
   de fonctionnalités, et le supprimer viderait le site de sa raison d'être. */

.app-hero {
  min-height: calc(100svh - 64px); /* 64px = hauteur du header collant */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px 56px; position: relative;
}
.app-hero .badge { display: inline-flex; align-items: center; gap: 8px; background: var(--sage-light); color: var(--sage); border-radius: 999px; padding: 9px 19px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.app-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1.12; letter-spacing: -.02em; margin: 52px 0 20px; max-width: 660px; text-wrap: balance; }
.app-hero .sub { font-size: 21px; line-height: 1.5; color: var(--ink-3); margin: 0 0 38px; max-width: 560px; }

/* Champ de saisie — mêmes cotes que le desktop de l'app. */
.nl-hero { width: 100%; max-width: 660px; display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1.5px solid var(--tang); border-radius: 22px; padding: 10px 10px 10px 22px; box-shadow: 0 12px 32px var(--tang-light); }
.nl-hero > i { color: var(--tang); font-size: 24px; flex: none; }
.nl-hero input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 20px; font-weight: 500; color: var(--ink); padding: 18px 0; }
.nl-hero input::placeholder { color: var(--ink-3); opacity: 1; }
.nl-hero button { flex: none; height: 58px; padding: 0 26px; border: none; border-radius: 16px; background: var(--tang); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.nl-hero button:hover { background: var(--tang-deep); }

/* Pastilles d'exemple. La couleur porte la NATURE de l'écriture — sage ce qui
   entre, corail ce qui sort, lavande ce qui est placé — exactement comme dans
   l'app, sans quoi le même exemple changerait de sens d'un écran à l'autre. */
.ex-label { font-size: 15px; color: var(--ink-3); margin: 26px 0 12px; }
.ex { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 700px; }
.ex button { border: 1px solid var(--rule); background: var(--bg-card); border-radius: 999px; padding: 9px 15px; font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.ex button:hover { border-color: currentColor; }
.ex button.k-income { color: var(--sage); }
.ex button.k-expense { color: var(--tang); }
.ex button.k-investment { color: var(--lavi); }

@media (max-width: 760px) {
  .app-hero { min-height: calc(100svh - 64px); padding: 28px 20px 40px; }
  .app-hero h1 { font-size: 29px; margin: 24px 0 16px; max-width: 340px; }
  .app-hero .sub { font-size: 15px; margin: 0 0 26px; max-width: 320px; }
  .app-hero .badge { font-size: 11px; padding: 5px 11px; }
  .nl-hero { flex-wrap: wrap; border-radius: 18px; padding: 4px 14px; }
  .nl-hero input { font-size: 16px; padding: 14px 0; }
  .nl-hero button { width: 100%; height: 50px; margin-bottom: 8px; justify-content: center; font-size: 16px; }
  .ex button { font-size: 13px; padding: 7px 12px; }
}

/* ---- Méga-menu du header ---- */
/* Les rubriques dont la page existe sont de vrais liens ; les autres restent
   inertes. Un menu qui promet neuf pages et en sert trois se paie en 404. */
.mm { position: relative; }
.mm > button { background: none; border: none; font-family: inherit; font-weight: 600; font-size: 14.5px; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 0; }
.mm > button:hover, .mm[data-open="1"] > button { color: var(--ink); }
/* Sur une page de fonctionnalité, la rubrique se colore : sans ça, rien
   n'indique où l'on se trouve dans le site. */
nav[data-in-features] .mm[data-menu="features"] > button { color: var(--tang); }
.mm-it[aria-current="page"] { background: var(--panel); }
.mm-it[aria-current="page"] b { color: var(--tang); }
.mm > button i { font-size: 15px; transition: transform .15s ease; }
.mm[data-open="1"] > button i { transform: rotate(180deg); }
.mm-panel { display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); background: var(--bg-card); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 18px; z-index: 30; }
.mm[data-open="1"] .mm-panel { display: block; }
.mm-cols { display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 22px; }
.mm-cols.one { grid-template-columns: minmax(260px, 1fr); }
/* Libellé de colonne, volontairement PAS un <h5> : des titres dans un menu
   apparaîtraient avant le <h1> et abîmeraient la hiérarchie de la page. */
.mm-col .mm-h5 { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin: 0 0 10px; }
.mm-it { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; text-decoration: none; color: inherit; }
a.mm-it:hover { background: var(--panel); }
.mm-it .mi { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.mm-it b { display: block; font-size: 14px; font-weight: 700; }
.mm-it small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.mm-it.dim b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 980px) { .mm-panel { display: none !important; } }

/* Zone inversée : maquette à GAUCHE, texte à droite. L'ordre du DOM reste
   texte-puis-maquette — c'est lui que suivent les lecteurs d'écran, et une
   maquette décorative (aria-hidden) annoncée en premier n'aurait aucun sens.
   Seul l'affichage change. */
.steps.rev .step-copy { order: 2; }
.steps.rev .phone { order: 1; }