/* MAWARI. Encre sur papier : une seule couleur en plus du noir et du beige, le vermillon du
   sceau, et elle ne designe qu'une chose a la fois. Tout le dessin est procedural, donc net. */

:root {
  --washi:   #F0EADD;
  --card:    rgba(255,253,247,.56);
  --card-2:  rgba(255,253,247,.34);
  --sumi:    #16130E;
  --sumi-2:  #322D26;
  --grey:    #6A6255;
  --faint:   #988E7E;
  --hair:    rgba(22,19,14,.15);
  --hair-2:  rgba(22,19,14,.07);
  --verm:    #AF4229;
  --verm-2:  rgba(175,66,41,.10);

  --mincho: 'Hiragino Mincho ProN','Yu Mincho','YuMincho','Source Han Serif','Noto Serif JP',Georgia,serif;
  --sans:   'Hiragino Sans','Yu Gothic',ui-sans-serif,-apple-system,'Segoe UI',system-ui,sans-serif;
  --mono:   ui-monospace,'SF Mono',Menlo,'Roboto Mono',monospace;

  --shell: 1180px;
  --nav: 62px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--washi); color: var(--sumi);
  font: 400 16px/1.68 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
#back { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.wrap { width: min(100% - 2.4rem, var(--shell)); margin-inline: auto; }

/* ── barre de navigation ────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  height: var(--nav);
  background: rgba(240,234,221,.90);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair-2);
}
.nav-in { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; }

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--sumi); }
.brand canvas { display: block; }
.brand b { font: 500 15px/1 var(--mincho); letter-spacing: .26em; }
.brand i { font-style: normal; font: 400 10px/1 var(--mincho); color: var(--faint); letter-spacing: .2em; }

.tabs { display: flex; gap: .15rem; justify-self: center; }
.tabs a {
  padding: .5rem .82rem; text-decoration: none; position: relative;
  color: var(--grey); font: 400 13.5px/1 var(--sans); letter-spacing: .02em;
  transition: color .18s;
}
.tabs a:hover { color: var(--sumi); }
.tabs a.on { color: var(--sumi); }
.tabs a.on::after {
  content: ''; position: absolute; left: .82rem; right: .82rem; bottom: .12rem;
  height: 1.5px; background: var(--verm);
}

.navright { display: flex; align-items: center; gap: .6rem; justify-self: end; }
.btn {
  font: 400 13px/1 var(--sans); letter-spacing: .01em;
  padding: .56rem .95rem; cursor: pointer; text-decoration: none;
  color: var(--sumi); background: transparent; border: 1px solid var(--hair);
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background .18s, border-color .18s;
}
.btn:hover { background: rgba(22,19,14,.045); }
.btn:focus-visible { outline: 2px solid var(--verm); outline-offset: 2px; }
/* Un bouton desactive ne doit pas rester un aplat sombre a 40% : il devient une tache. On le
   ramene a un contour vide, qui se lit comme "pas encore" et non comme "casse". */
.btn[disabled] { cursor: not-allowed; color: var(--faint); background: transparent;
  border-color: var(--hair-2); border-style: dashed; }
.btn--go[disabled] { color: var(--faint); background: transparent; }
.btn--go { background: var(--sumi); color: var(--washi); border-color: var(--sumi); }
.btn--go:hover:not([disabled]) { background: #2b261f; }
.btn--wide { width: 100%; padding: .8rem 1rem; }

/* ── contenu ────────────────────────────────────────────────────────────── */
main { position: relative; z-index: 1; padding: clamp(2rem, 6vh, 4.2rem) 0 5rem; }

.eyebrow {
  margin: 0 0 .9rem; display: flex; align-items: center; gap: .6rem;
  font: 400 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--verm);
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--hair-2); max-width: 6rem; }

h1 {
  margin: 0 0 1rem; max-width: 17ch;
  font: 400 clamp(2.1rem, 5vw, 3.5rem)/1.14 var(--mincho);
  letter-spacing: -.014em; text-wrap: balance;
}
h2 {
  margin: 0 0 .9rem; max-width: 24ch;
  font: 400 clamp(1.45rem, 3vw, 2.1rem)/1.2 var(--mincho); letter-spacing: -.01em;
}
h3 { margin: 0 0 .45rem; font: 500 15px/1.4 var(--sans); letter-spacing: .005em; }
.lede { margin: 0 0 1.4rem; max-width: 54ch; font: 400 clamp(1.02rem, 1.7vw, 1.2rem)/1.62 var(--mincho); color: var(--sumi-2); }
p { margin: 0 0 1rem; max-width: 62ch; color: var(--sumi-2); }
p strong { color: var(--sumi); font-weight: 600; }
a { color: var(--verm); }

section { margin-top: clamp(2.6rem, 7vh, 4.4rem); }
.rule { height: 1px; background: var(--hair-2); margin: 0; }

/* ── les figures ──────────────────────────────────────────────────────────
   Des figures d'encre detourees, posees DANS la mise en page et non en fond : elles occupent une
   colonne, donc elles ne passent jamais sous le texte. Sur ecran etroit elles se retirent — une
   silhouette de 90 px n'apporte rien et coute un scroll. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(1.5rem, 4vw, 3rem); align-items: end; }
/* On borne par la HAUTEUR et non par la largeur : les quatre silhouettes ont des rapports tres
   differents (le gardien est etroit et haut, celui qui offre est large et bas), et une contrainte
   en largeur donne une figure minuscule dans un cas et geante dans l'autre. */
.fig { display: block; width: auto; max-width: 100%; height: auto; justify-self: center; }
.fig--sm { max-height: 190px; }
.fig--md { max-height: 260px; }
.fig--lg { max-height: 320px; }

/* La paire qui dit la these : celui qui part paie celui qui reste. */
.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.2rem; align-items: end; margin: 1.6rem 0 0;
  padding-top: 1.4rem; border-top: 1px solid var(--hair-2); }
.pair figure { margin: 0; display: grid; justify-items: center; gap: .6rem; }
.pair img { width: auto; max-width: 100%; max-height: 170px; height: auto; }
.pair figcaption { font: 400 12px/1.5 var(--mono); letter-spacing: .06em; color: var(--faint); text-align: center; }
.pair .arrow { align-self: center; font: 400 20px/1 var(--mincho); color: var(--verm); padding-bottom: 2.4rem; }

/* ── grilles ────────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--hair-2); border: 1px solid var(--hair-2); }
.stat { background: var(--card); padding: 1rem 1.1rem; }
.stat i { font-style: normal; display: block; font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.stat b { display: block; margin-top: .5rem; font: 400 1.65rem/1.1 var(--mincho); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: .25rem; font-size: 12.5px; color: var(--grey); }
.stat b.dim { color: var(--faint); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.card { background: var(--card); border: 1px solid var(--hair-2); padding: 1.2rem 1.25rem; }
.card p { margin: 0; font-size: 14.5px; line-height: 1.62; }
.card .k { font: 400 22px/1 var(--mincho); color: var(--verm); display: block; margin-bottom: .6rem; }

.steps { counter-reset: s; display: grid; gap: 0; }
.steps li { counter-increment: s; list-style: none; display: grid; grid-template-columns: 2.2rem 1fr; gap: .9rem;
  padding: .78rem 0; border-top: 1px solid var(--hair-2); color: var(--sumi-2); font-size: 15px; line-height: 1.62; }
.steps li:last-child { border-bottom: 1px solid var(--hair-2); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 400 11px/1.9 var(--mono); color: var(--verm); letter-spacing: .06em; }

.pull { margin: 1.4rem 0; padding-left: 1.1rem; border-left: 2px solid var(--verm); max-width: 42ch;
  font: 400 clamp(1.1rem, 2vw, 1.4rem)/1.42 var(--mincho); color: var(--sumi); }

.note { margin: 1rem 0; max-width: 62ch; padding: .8rem 1rem; font-size: 14px; line-height: 1.6;
  color: var(--sumi-2); background: var(--verm-2); border-left: 2px solid var(--verm); }
.note b { display: block; font: 400 10.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--verm); margin-bottom: .35rem; }

.formula { margin: 1.3rem 0; padding: .95rem 1.1rem; max-width: 62ch; overflow-x: auto;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--card-2);
  font: 400 13.5px/1.7 var(--mono); white-space: pre; }

.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.4rem); align-items: start; }

/* ── panneau d'action (bond / stake) ────────────────────────────────────── */
.panel { background: var(--card); border: 1px solid var(--hair-2); padding: 1.3rem; }
.panel > h3 { font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 1rem; }
.field { display: grid; gap: .4rem; margin-bottom: .9rem; }
.field label { font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.field .row { display: flex; gap: .5rem; }
.field input, .field select {
  flex: 1; min-width: 0; font: 400 16px/1 var(--mono);
  padding: .72rem .8rem; color: var(--sumi); background: rgba(255,253,247,.7);
  border: 1px solid var(--hair);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--verm); }
.quote { display: grid; gap: .45rem; margin: 1rem 0; padding-top: .9rem; border-top: 1px solid var(--hair-2); }
.quote div { display: flex; justify-content: space-between; gap: 1rem; font-size: 14px; color: var(--grey); }
.quote div b { color: var(--sumi); font-weight: 500; font-variant-numeric: tabular-nums; }
.quote div.big b { font: 400 20px/1 var(--mincho); }

/* ── le cadran ──────────────────────────────────────────────────────────── */
.clockwrap { display: grid; grid-template-columns: 150px 1fr; gap: 1.3rem; align-items: center;
  padding: 1.2rem 1.3rem; background: var(--card); border: 1px solid var(--hair-2); }
.dial { width: 150px; height: 150px; }
.sect { fill: var(--sumi); opacity: .07; transition: opacity .5s, fill .5s; }
.sect.on { opacity: .8; fill: var(--verm); }
.tick { stroke: var(--sumi); stroke-width: .7; opacity: .3; }
.hand { stroke: var(--sumi); stroke-width: 1.5; stroke-linecap: round; }
.hub { fill: var(--sumi); }
.dial-read { display: grid; gap: .6rem; min-width: 0; }
.dial-now { display: flex; gap: .8rem; align-items: flex-start; }
.dial-jp { font: 400 30px/1 var(--mincho); color: var(--verm); flex: none; }
.dial-now b { display: block; font: 500 17px/1.3 var(--sans); }
.dial-note { display: block; margin-top: .15rem; font-size: 13.5px; color: var(--grey); line-height: 1.5; }
.dial-fee { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: .6rem; border-top: 1px solid var(--hair-2); }
.dial-fee i { font-style: normal; font: 400 10.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.dial-fee b { font: 400 27px/1 var(--mincho); font-variant-numeric: tabular-nums; }
.dial-next { font: 400 11.5px/1 var(--mono); color: var(--faint); letter-spacing: .03em; }

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--hair-2); background: var(--card-2); }
th, td { text-align: left; padding: .72rem .9rem; border-bottom: 1px solid var(--hair-2); white-space: nowrap; }
th { font: 400 10.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
td { color: var(--sumi-2); }
td:first-child { color: var(--sumi); }
td.num { font: 400 15px/1 var(--mono); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
tr.on td { background: var(--verm-2); }
tr.on td:first-child { color: var(--verm); }

/* ── docs ───────────────────────────────────────────────────────────────── */
.docs { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.toc { position: sticky; top: calc(var(--nav) + 1.4rem); display: grid; gap: .1rem; }
.toc button {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: baseline;
  text-align: left; padding: .42rem .5rem; cursor: pointer; background: none; border: 0;
  color: var(--grey); font: 400 13px/1.35 var(--sans); border-left: 2px solid transparent;
}
.toc button:hover { color: var(--sumi); }
.toc button.on { color: var(--sumi); border-left-color: var(--verm); background: rgba(255,253,247,.5); }
.toc button i { font-style: normal; font: 400 10px/1.5 var(--mono); color: var(--verm); letter-spacing: .08em; }
.chapter h2 { margin-bottom: 1.2rem; max-width: 22ch; }
.eyebrow .kj { font: 400 17px/1 var(--mincho); color: var(--verm); opacity: .7; margin-left: .5rem; letter-spacing: 0; text-transform: none; }
.docnav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid var(--hair-2); }

.defs { display: grid; gap: 0; margin: 1.2rem 0; }
.def { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--hair-2); }
.def:last-child { border-bottom: 1px solid var(--hair-2); }
.def b { font: 500 14.5px/1.5 var(--mono); color: var(--verm); }
.def span { color: var(--sumi-2); font-size: 14.5px; line-height: 1.6; }

footer { position: relative; z-index: 1; padding: 2rem 0 3rem; border-top: 1px solid var(--hair-2); margin-top: 3rem; }
.foot { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--faint); }

/* ── etroit ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .two, .docs, .hero { grid-template-columns: 1fr; }
  .fig { display: none; }
  .pair { grid-template-columns: 1fr; gap: .8rem; }
  .pair .arrow { display: none; }
  .pair img { max-width: 150px; }
  .toc { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: .4rem; }
  .toc button { border-left: 0; border-bottom: 2px solid transparent; grid-template-columns: auto; }
  .toc button.on { border-bottom-color: var(--verm); }
  .toc button span { display: none; }
  .toc button i { font-size: 12px; }
  .clockwrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .dial-now { flex-direction: column; align-items: center; gap: .2rem; }
  .dial-fee { width: 100%; }
  .def { grid-template-columns: 1fr; gap: .2rem; }
}
@media (max-width: 720px) {
  .nav-in { grid-template-columns: auto auto; }
  .tabs { grid-column: 1 / -1; justify-self: start; overflow-x: auto; padding-bottom: .3rem; }
  .nav { height: auto; padding: .6rem 0 0; }
  main { padding-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }