/* Gatehood — l'Atlas des migrations.
   Le site est une planche d'atlas naturaliste (voir le bloc ATLAS en fin de feuille, qui fixe les
   jetons définitifs) : papier de carte, encre ardoise, Newsreader / IBM Plex Sans / Plex Mono,
   vermillon des points d'intérêt, et le troupeau migrateur (un animal par launchpad). Les blocs
   précédents posent la structure des composants ; leurs couleurs sont redéfinies par l'atlas. */

@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-var-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/plex-sans-var.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ink: #0C0D0C;
  --ink-2: #151715;
  --ink-3: #1D201D;
  --line-d: #2A2E2A;
  --paper: #F2F2EE;
  --paper-2: #E6E7E1;
  --line-l: #D3D5CD;
  --fg: #F2F2EE;
  --fg-2: #9AA098;
  --fg-3: #5E645D;
  --text: #111311;
  --text-2: #5A6058;
  --green: #2BD67B;
  --green-d: #138A4B;
  --mint: #7CF5C4;
  --warn: #F5C451;
  --bad: #FF5A5A;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --r: 6px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--ink); color: var(--fg); font: 400 17px/1.55 var(--display); }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: .96; text-wrap: balance; margin: 0; }
p { margin: 0; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; background: var(--paper); color: var(--text); padding: 8px 12px; z-index: 60; }
.mono { font-family: var(--mono); font-size: .86em; overflow-wrap: anywhere; }
.muted { color: var(--fg-2); }
.small { font-size: .88rem; }
.g { color: var(--green); }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.label { font: 500 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); display: flex; align-items: center; gap: 10px; }
.label::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  font: 600 .98rem var(--display); color: var(--text); background: var(--paper);
  border: 1px solid var(--paper); border-radius: var(--r); padding: 12px 20px; cursor: pointer;
  text-decoration: none; transition: transform .15s var(--ease), background .15s, border-color .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-d); }
.btn-ghost:hover { border-color: var(--fg-3); }
.btn-green { background: var(--green); border-color: var(--green); color: #06130B; }
.btn-lg { padding: 16px 26px; font-size: 1.05rem; }
.btn-sm { padding: 6px 12px; font-size: .85rem; }
.btn-icon { display: none; width: 44px; height: 44px; padding: 0; flex-direction: column; gap: 5px; }
.btn-icon span { width: 18px; height: 2px; background: var(--fg); border-radius: 2px; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.chip { font: 500 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); border: 1px solid var(--line-d); border-radius: 99px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 8px; }

/* ---------- en-tête ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: #0c0d0cf5; border-bottom: 1px solid var(--line-d); }
.bar { display: flex; align-items: center; gap: 28px; padding: 12px max(20px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px)); max-width: 1400px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); }
.brand-mark { position: relative; width: 24px; height: 24px; }
.brand-mark i { position: absolute; inset: 0; border-radius: 50%; }
.brand-mark i:nth-child(1) { border: 2.5px solid var(--green); border-right-color: transparent; animation: spin 6s linear infinite; }
.brand-mark i:nth-child(2) { inset: 5px; border: 2px solid var(--mint); border-left-color: transparent; animation: spin 3s linear infinite reverse; }
.brand-mark i:nth-child(3) { inset: 9px; background: var(--fg); }
.wordmark { font: 800 1.3rem/1 var(--display); letter-spacing: -.04em; }
.top nav { display: flex; gap: 26px; flex: 1; justify-content: center; }
.top nav a { color: var(--fg-2); text-decoration: none; font-size: .95rem; font-weight: 500; white-space: nowrap; padding: 6px 0; }
.top nav a:hover, .top nav a[aria-current] { color: var(--fg); }
.top nav a[aria-current] { box-shadow: inset 0 -2px var(--green); }
.top-actions { display: flex; gap: 10px; align-items: center; }
.tape { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line-d); font: 500 .74rem var(--mono); color: var(--fg-2); letter-spacing: .08em; }
.tape-track span { display: inline-flex; gap: 8px; }
.tape-track b { color: var(--fg); font-weight: 600; }
.tape-track b.g { color: var(--green); }

@media (max-width: 960px) {
  .top nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--ink); border-bottom: 1px solid var(--line-d); padding: 8px 20px 16px; }
  .top nav.open { display: flex; }
  .top nav a { padding: 14px 0; font-size: 1.1rem; border-bottom: 1px solid var(--line-d); }
  .btn-icon { display: inline-flex; }
  .bar { justify-content: space-between; }
  #net { display: none !important; }
}
@media (max-width: 520px) { #connect { padding: 10px 12px; font-size: .88rem; } }

/* ---------- sections ---------- */
.sect { padding: 120px 0; position: relative; }
.sect-tight { padding: 72px 0; }
.paper { background: var(--paper); color: var(--text); color-scheme: light; }
.paper .muted { color: var(--text-2); }
.paper .label { color: var(--text-2); }
.paper .btn-ghost { color: var(--text); border-color: var(--line-l); }
.sect-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.sect-head h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); text-transform: uppercase; }
.sect-head p { font-size: 1.08rem; max-width: 460px; }
@media (max-width: 860px) { .sect-head { grid-template-columns: 1fr; gap: 18px; } .sect { padding: 84px 0; } }

/* ---------- héros ---------- */
.hero { position: relative; overflow: hidden; min-height: calc(100svh - 110px); display: flex; align-items: center; padding: 64px 0 80px; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 24px; align-items: center; position: relative; }
.hero h1 { font-size: clamp(3rem, 6.4vw, 6.2rem); text-transform: uppercase; margin: 22px 0 28px; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .line > span { display: inline-block; }
.hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--fg-2); max-width: 560px; }
.hero .lead b { color: var(--fg); font-weight: 600; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero-meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 44px; font: 500 .74rem var(--mono); letter-spacing: .12em; color: var(--fg-3); text-transform: uppercase; }
.hero-meta b { color: var(--fg); font-weight: 600; margin-left: 6px; }
.scene { position: relative; aspect-ratio: 1; width: min(620px, 100%); justify-self: end; }
.scene .portal { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene .orbit { position: absolute; inset: 0; animation: orbit 14s linear infinite; }
.scene .orbit .rider { position: absolute; left: 50%; top: -2%; width: 40%; transform: translateX(-50%); animation: counter 14s linear infinite; }
.scene-caption { position: absolute; bottom: -34px; left: 0; right: 0; text-align: center; font: 500 .72rem var(--mono); letter-spacing: .14em; color: var(--fg-3); text-transform: uppercase; }
.scene-caption b { color: var(--green); font-weight: 600; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .scene { width: min(420px, 90%); margin: 24px auto 0; }
  .hero { min-height: 0; padding-top: 44px; }
}

/* étoiles */
/* Le motif glisse par transform (composité par le GPU), pas par background-position
   qui redessinait toute la zone à chaque image. Le déplacement vaut deux tuiles : boucle sans saut. */
.stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .8; --tile: 420px; --dur: 120s; }
.stars::before { content: ""; position: absolute; top: calc(var(--tile) * -1); left: 0; right: calc(var(--tile) * -2); bottom: 0; will-change: transform; animation: drift var(--dur) linear infinite; background-image:
  radial-gradient(1.5px 1.5px at 12% 18%, #fff8, transparent),
  radial-gradient(1px 1px at 28% 72%, #fff6, transparent),
  radial-gradient(1.5px 1.5px at 44% 34%, #7CF5C488, transparent),
  radial-gradient(1px 1px at 62% 82%, #fff5, transparent),
  radial-gradient(1.5px 1.5px at 76% 22%, #fff7, transparent),
  radial-gradient(1px 1px at 88% 58%, #7CF5C477, transparent),
  radial-gradient(1px 1px at 6% 52%, #fff5, transparent),
  radial-gradient(1.5px 1.5px at 52% 8%, #fff6, transparent),
  radial-gradient(1px 1px at 36% 92%, #fff4, transparent),
  radial-gradient(1px 1px at 94% 92%, #fff5, transparent);
  background-size: var(--tile) var(--tile); }
.stars-2 { --tile: 260px; --dur: 47s; opacity: .45; }

/* ---------- mascotte & portail ---------- */
.mascot { width: 100%; height: auto; overflow: visible; display: block; }
.m-bob { animation: bob 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.m-flame { transform-box: fill-box; transform-origin: right center; animation: flame .16s ease-in-out infinite alternate; }
.m-scarf { transform-box: fill-box; transform-origin: right center; animation: scarf .9s ease-in-out infinite alternate; }
.m-scarf-2 { animation-delay: -.45s; }
.m-lids { animation: blink 4.6s infinite; }
.m-pupils { animation: look 7s ease-in-out infinite; }
.m-lights circle { animation: lights 1.6s infinite; }
.m-lights circle:nth-child(2) { animation-delay: .2s; }
.m-lights circle:nth-child(3) { animation-delay: .4s; }
.m-lights circle:nth-child(4) { animation-delay: .6s; }
.portal { overflow: visible; }
.p-ring { transform-origin: 200px 200px; }
.p-ring-1 { animation: spin 18s linear infinite; }
.p-ring-2 { animation: spin 26s linear infinite reverse; }
.p-ring-3 { animation: spin 9s linear infinite; }
.p-glow { transform-origin: 200px 200px; animation: pulse 3.2s ease-in-out infinite; }

/* ---------- étapes ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { position: relative; border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); padding: 26px 26px 30px; min-height: 380px; display: flex; flex-direction: column; overflow: hidden; }
.step-num { font: 300 7rem/1 var(--display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.step-tag { position: absolute; top: 22px; right: 22px; font: 500 .7rem var(--mono); letter-spacing: .08em; color: var(--fg-2); border: 1px solid var(--line-d); border-radius: 99px; padding: 4px 10px; }
.step .code { margin-top: auto; font: 600 .72rem var(--mono); letter-spacing: .12em; color: var(--green); }
.step h3 { font-size: 1.7rem; margin: 6px 0 12px; }
.step p { color: var(--fg-2); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } .step { min-height: 300px; } }

/* ---------- confiance ---------- */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-l); border-left: 1px solid var(--line-l); }
.trust > div { border-right: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); padding: 30px 28px 34px; }
.trust .code { font: 600 .72rem var(--mono); letter-spacing: .12em; color: var(--green-d); }
.trust h3 { font-size: 1.55rem; margin: 12px 0 10px; letter-spacing: -.03em; }
.trust p { color: var(--text-2); }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr; } }

/* ---------- routes ---------- */
.routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.route { border: 1px solid var(--line-d); border-radius: 10px; padding: 26px; background: var(--ink-2); }
.route-path { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 16px; font: 600 .82rem var(--mono); }
.route-path span { border: 1px solid var(--line-d); border-radius: 99px; padding: 6px 12px; background: var(--ink); }
.route-path span.dest { border-color: var(--green); color: var(--green); }
.route-path i { color: var(--fg-3); font-style: normal; }
.route h3 { font-size: 1.6rem; }
.route p { color: var(--fg-2); }
.route .facts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; font: 500 .74rem var(--mono); color: var(--fg-3); letter-spacing: .06em; text-transform: uppercase; }
.route .facts b { color: var(--fg); font-weight: 600; }
@media (max-width: 860px) { .routes { grid-template-columns: 1fr; } }

/* ---------- liste des migrations ---------- */
.list { display: grid; gap: 12px; }
.item {
  display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 18px 28px; align-items: center;
  border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); padding: 20px 24px;
  text-decoration: none; color: var(--fg); transition: border-color .2s, transform .2s var(--ease);
}
.item:hover { border-color: var(--green-d); transform: translateY(-2px); }
.item .pair { font: 800 1.35rem var(--display); letter-spacing: -.02em; }
.item .pair i { font-style: normal; color: var(--fg-3); margin: 0 8px; }
.item .meta { font: 500 .78rem var(--mono); color: var(--fg-2); }
.bar-wrap { display: grid; gap: 8px; }
.progress { position: relative; height: 8px; background: var(--ink); border: 1px solid var(--line-d); border-radius: 99px; overflow: hidden; }
.progress .tick { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--fg); opacity: .8; }
.pill { display: inline-flex; align-items: center; gap: 8px; font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-d); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-open { color: var(--green); border-color: #1d5c39; background: #0e2418; }
.pill-wait { color: var(--warn); border-color: #5a4714; background: #221c0a; }
.pill-done { color: var(--mint); border-color: #1d5c4a; background: #0c2420; }
.pill-bad { color: var(--bad); border-color: #5c1c1c; background: #2a0f0f; }
@media (max-width: 760px) { .item { grid-template-columns: 1fr; } }

.empty { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 60px 20px; border: 1px dashed var(--line-d); border-radius: 12px; }
.empty .mascot { width: 220px; }
.empty h3 { font-size: 1.6rem; }

/* ---------- page migration ---------- */
.vhero { padding: 64px 0 40px; border-bottom: 1px solid var(--line-d); position: relative; overflow: hidden; }
.vhero h1 { font-size: clamp(2.6rem, 7vw, 6rem); text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .3em; margin: 18px 0 22px; }
.vhero h1 .to { color: var(--fg-3); font-weight: 300; }
.vhero h1 .new { color: var(--green); }
.vhero-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.vhero .mascot-side { position: absolute; right: 3%; top: 50%; width: min(300px, 26vw); transform: translateY(-50%); }
.count { display: flex; gap: 10px; margin: 30px 0 8px; }
.count div { min-width: 82px; border: 1px solid var(--line-d); border-radius: 8px; padding: 12px 14px; background: var(--ink-2); text-align: center; }
.count b { display: block; font: 800 2.2rem/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.count span { font: 500 .66rem var(--mono); letter-spacing: .14em; color: var(--fg-3); text-transform: uppercase; }
.vgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px; padding: 36px 0 90px; }
.vgrid > *, .two > *, .routes > *, .steps > *, .hero-grid > * { min-width: 0; }
.panel { border: 1px solid var(--line-d); border-radius: 10px; background: var(--ink-2); padding: 24px; }
.panel h2 { font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); border-radius: 8px; overflow: hidden; margin: 18px 0; }
.stats div { background: var(--ink-2); padding: 14px 16px; }
.stats span { display: block; font: 500 .66rem var(--mono); letter-spacing: .12em; color: var(--fg-3); text-transform: uppercase; }
.stats b { font: 700 1.25rem var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; }
.kv dt { color: var(--fg-2); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.estimate { border: 1px solid #1d5c39; background: linear-gradient(180deg, #0e2418, var(--ink-2)); border-radius: 10px; padding: 20px 22px; margin-top: 18px; }
.estimate .big { font: 800 1.9rem var(--display); letter-spacing: -.03em; }
.amount { display: flex; gap: 8px; align-items: center; background: var(--ink); border: 1px solid var(--line-d); border-radius: 8px; padding: 6px 6px 6px 14px; margin: 14px 0 12px; }
.amount input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--fg); font: 700 1.5rem var(--display); padding: 8px 0; font-variant-numeric: tabular-nums; }
.amount input:focus { outline: none; }
.amount:focus-within { border-color: var(--green-d); }
.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }
.msg { min-height: 1.4em; margin-top: 14px; font: 500 .8rem var(--mono); }
.msg.ok { color: var(--green); }
.msg.bad { color: var(--bad); }
.links { display: grid; gap: 8px; font: 500 .8rem var(--mono); color: var(--fg-2); }
.links a { color: var(--fg); word-break: break-all; }
@media (max-width: 900px) { .vgrid { grid-template-columns: minmax(0, 1fr); } .stats div { padding: 12px; } .stats b { font-size: 1.05rem; } .vhero .mascot-side { display: none; } }

/* ---------- pages de texte ---------- */
.page-hero { padding: 84px 0 50px; position: relative; overflow: hidden; }
.page-hero h1 { font-size: clamp(2.8rem, 7.4vw, 6.4rem); text-transform: uppercase; margin: 18px 0 22px; max-width: 14ch; }
.page-hero .lead { font-size: 1.15rem; color: var(--fg-2); max-width: 640px; }
.page-hero .mascot-side { position: absolute; right: 4%; top: 50%; width: min(380px, 34vw); transform: translateY(-50%); }
@media (max-width: 900px) { .page-hero .mascot-side { position: static; transform: none; width: 260px; margin-top: 28px; } }
.faq { display: grid; gap: 0; border-top: 1px solid var(--line-d); }
.faq details { border-bottom: 1px solid var(--line-d); padding: 22px 0; }
.faq summary { cursor: pointer; font: 700 1.25rem var(--display); letter-spacing: -.02em; list-style: none; display: flex; justify-content: space-between; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 300; color: var(--green); font-size: 1.6rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--fg-2); margin-top: 12px; max-width: 760px; }
.checklist { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.checklist li::before { content: "✓"; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #0e2418; color: var(--green); border: 1px solid #1d5c39; font-size: .8rem; font-weight: 700; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.addr-table { width: 100%; border-collapse: collapse; font: 500 .82rem var(--mono); }
.addr-table td { padding: 12px 0; border-bottom: 1px solid var(--line-l); vertical-align: top; }
.addr-table td:first-child { color: var(--text-2); width: 40%; padding-right: 16px; }
.addr-table a { word-break: break-all; color: var(--text); }

/* ---------- appel à l'action ---------- */
.cta { position: relative; overflow: hidden; text-align: center; padding: 130px 0; }
.cta h2 { font-size: clamp(2.8rem, 8vw, 6.8rem); text-transform: uppercase; }
.cta p { color: var(--fg-2); margin: 22px auto 34px; max-width: 520px; font-size: 1.1rem; }
.cta .portal { position: absolute; width: 760px; height: 760px; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .35; pointer-events: none; }
.cta .wrap { position: relative; }

/* ---------- pied de page ---------- */
.foot { border-top: 1px solid var(--line-d); padding: 56px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr .8fr .8fr; gap: 40px; align-items: start; }
.foot-grid p { margin-top: 14px; max-width: 520px; }
.foot-links { display: grid; gap: 10px; }
.foot-links a { color: var(--fg-2); text-decoration: none; }
.foot-links a:hover { color: var(--fg); }
.foot-pilot { width: 180px; justify-self: end; opacity: .9; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } .foot-pilot { justify-self: start; } }

/* ---------- apparition au défilement ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; }
.rise > span { transform: translateY(105%); animation: rise .9s var(--ease) forwards; }
.rise:nth-child(2) > span { animation-delay: .08s; } .rise:nth-child(3) > span { animation-delay: .16s; } .rise:nth-child(4) > span { animation-delay: .24s; }

/* ---------- transition portail ---------- */
#warp { position: fixed; inset: 0; z-index: 100; pointer-events: none; visibility: hidden; background: radial-gradient(ellipse at center, #0e1a13 0%, var(--ink) 70%); clip-path: circle(0% at 50% 50%); }
#warp.on { visibility: visible; pointer-events: auto; }
#warp canvas, .scene-canvas, .intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-canvas { inset: -12%; width: 124%; height: 124%; }
.warp-ship { position: absolute; left: 0; top: 50%; width: min(34vmin, 300px); transform: translate(-120%, -50%); will-change: transform; }
.warp-ship::before, .intro-ship::before { content: ""; position: absolute; inset: -10% -6%; background: radial-gradient(closest-side, rgba(124, 245, 196, .32), transparent); z-index: -1; }

/* ---------- intro : launchpad mort → pons V2 ---------- */
html.intro-on { overflow: hidden; }
#intro { position: fixed; inset: 0; z-index: 110; background: radial-gradient(ellipse at 70% 50%, #0d1b13 0%, var(--ink) 65%); overflow: hidden; color: var(--paper); }
.intro-ship { position: absolute; left: 0; top: 0; width: min(24vmin, 210px); opacity: 0; will-change: transform; }
.intro-label { position: absolute; transform: translate(-50%, 8px); text-align: center; display: grid; gap: 4px; opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); white-space: nowrap; }
.intro-label.in { opacity: 1; transform: translate(-50%, 0); }
.intro-label b { font: 800 clamp(.9rem, 2vw, 1.25rem) var(--display); text-transform: uppercase; letter-spacing: -.01em; color: #b9a4a0; }
.intro-label.live b { color: var(--mint); }
.intro-label span { font: 500 .7rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.intro-caption { position: absolute; left: 50%; bottom: max(9vh, 56px); transform: translate(-50%, 8px); margin: 0; font: 500 .8rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--paper); opacity: 0; transition: opacity .5s, transform .5s var(--ease); text-align: center; width: max-content; max-width: calc(100% - 32px); }
.intro-caption.in { opacity: .85; transform: translate(-50%, 0); }
.intro-skip { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px)); background: transparent; border: 1px solid rgba(242, 242, 238, .25); color: var(--paper); font: 500 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; cursor: pointer; }
.intro-skip:hover { border-color: var(--mint); color: var(--mint); }

/* ---------- animations ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes tape { to { transform: translateX(-50%); } }
@keyframes drift { to { transform: translate3d(calc(var(--tile) * -2), var(--tile), 0); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes flame { from { transform: scaleX(.82) scaleY(.92); } to { transform: scaleX(1.12) scaleY(1.05); } }
@keyframes scarf { from { transform: skewY(-6deg) scaleX(.94); } to { transform: skewY(5deg) scaleX(1.06); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }
@keyframes look { 0%, 40%, 100% { transform: translate(0, 0); } 50%, 70% { transform: translate(-2px, 1px); } }
@keyframes lights { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(.96); opacity: .85; } 50% { transform: scale(1.03); opacity: 1; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes counter { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(-360deg); } }
@keyframes rise { to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .rise > span { transform: none; }
}

/* ---------- formulaires (console opérateur) ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.field { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field > span { font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.field-wide { grid-column: 1 / -1; }
.field input, .code-out { background: var(--ink); color: var(--fg); border: 1px solid var(--line-d); border-radius: 6px; padding: 11px 12px; font: 500 .95rem var(--display); min-width: 0; width: 100%; }
.field input:focus, .code-out:focus { outline: none; border-color: var(--green-d); }
.field small { font: 500 .78rem var(--mono); }
.form-title { grid-column: 1 / -1; font-size: 1.1rem; margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--line-d); }
.seg { display: flex; gap: 10px; flex-wrap: wrap; }
.seg label { white-space: nowrap; flex: 0 0 auto; }
.seg label, .pool { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line-d); border-radius: 6px; padding: 10px 14px; cursor: pointer; }
.seg label:has(input:checked), .pool:has(input:checked) { border-color: var(--green); background: #0e2418; }
.pool { margin-top: 8px; font-size: .8rem; }
.seg input, .pool input { accent-color: var(--green); }
.txlist { margin: 16px 0 0; padding-left: 20px; font: 500 .8rem var(--mono); color: var(--fg-2); display: grid; gap: 6px; word-break: break-all; }
.code-out { margin-top: 10px; font: 500 .8rem var(--mono); resize: vertical; }
@media (max-width: 700px) { .form { grid-template-columns: 1fr; } }


/* humeurs de la mascotte */
.m-frown, .m-grin, .m-tear { opacity: 0; transition: opacity .25s; }
.m-smile { transition: opacity .25s; }
.mood-sad .m-smile, .mood-happy .m-smile { opacity: 0; }
.mood-sad .m-frown, .mood-happy .m-grin { opacity: 1; }
.mood-sad .m-tear { opacity: 1; animation: tear 1.8s ease-in infinite; transform-box: fill-box; }
.mood-sad .m-lids { animation: none !important; transform: scaleY(.45) !important; }
.mood-sad .m-bob { animation-duration: 4s; }
.mood-happy .m-bob { animation: bob-happy .9s ease-in-out infinite; }
@keyframes tear { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes bob-happy { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }

/* Animations SVG hors de l'écran : en pause (le navigateur ne les repeint plus). */
.offscreen, .offscreen * { animation-play-state: paused !important; }

/* ---------- wallet ---------- */
.chip { cursor: default; }
.chip-warn { color: var(--warn); border-color: #5a4714; cursor: pointer; }
.modal { position: fixed; inset: 0; z-index: 115; background: rgba(5, 6, 5, .72); display: grid; place-items: center; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); animation: fade-in .18s ease-out; }
.modal-card { width: min(440px, 100%); background: var(--ink-2); border: 1px solid var(--line-d); border-radius: 14px; padding: 22px; color: var(--fg); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); min-width: 0; }
.modal-card .mono { word-break: break-all; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.modal-head h2 { font-size: 1.3rem; text-transform: uppercase; margin: 0; }
.wallet-list { display: grid; gap: 8px; margin: 14px 0; }
.wallet-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-d); background: var(--ink-3); color: var(--fg); font: 600 .95rem var(--display); text-decoration: none; cursor: pointer; text-align: left; }
.wallet-opt:hover, .wallet-opt:focus-visible { border-color: var(--green); }
.wallet-opt img { border-radius: 6px; }
.wallet-opt .arrow { margin-left: auto; color: var(--fg-3); }
.wallet-dot { width: 28px; height: 28px; border-radius: 8px; background: radial-gradient(circle at 35% 35%, var(--mint), var(--green-d)); flex: none; }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- migrations : vérification, partage ---------- */
.badge-ok, .badge-unv { font: 600 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; margin-left: 10px; vertical-align: middle; }
.badge-ok { color: var(--green); border: 1px solid #1d5c39; }
.badge-unv { color: var(--warn); border: 1px solid #5a4714; }
.notice-warn { margin-top: 18px; border: 1px solid #5a4714; background: #1d180a; color: #f0dca5; border-radius: 10px; padding: 14px 16px; font-size: .92rem; line-height: 1.5; }
.notice-warn b { color: var(--warn); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.msg a { color: inherit; text-decoration: underline; }

/* ---------- dev buy ---------- */
.devbuy { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-d); }
.devbuy h3 { font-size: 1rem; text-transform: uppercase; margin: 0 0 6px; }

/* =====================================================================================
   DA « décalée » — inspirée de Pulse et d'Oolong : anthracite chaud et crème, titres en
   Fraunces bien ronde (axes SOFT / WONK), texte en Geologica, boutons « bonbon » en relief
   qui s'enfoncent au clic, pilules, cartes très arrondies à tranche épaisse. Cette couche ne
   redéfinit que des couleurs, polices, formes et ombres : aucune animation n'est touchée.
   ===================================================================================== */
:root {
  --ink: #141519;
  --ink-2: #1D1E23;
  --ink-3: #26272D;
  --line-d: #34363E;
  --edge: #07080A;            /* tranche sombre des boutons et cartes */
  --paper: #F7F4EC;
  --paper-2: #EEE8DA;
  --line-l: #DCD4C2;
  --fg: #F7F4EC;
  --fg-2: #ABA698;
  --fg-3: #716C62;
  --text: #141519;
  --text-2: #5E594F;
  --lime: #CCFF3D;            /* accent principal : boutons, pilules */
  --sun: #FFC531;             /* second accent : soulignés, mises en avant */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 14px;
}
body { font: 400 17px/1.6 var(--body); background: var(--ink); }
h1, h2, h3 { font-family: var(--display); font-weight: 760; letter-spacing: -.012em; line-height: 1.02; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.hero h1, .sect-head h2, .page-hero h1, .vhero h1, .cta h2, .modal-head h2, .devbuy h3 { text-transform: none; }
.hero h1 { font-size: clamp(3rem, 6.6vw, 6.4rem); letter-spacing: -.02em; }
.page-hero h1 { font-size: clamp(2.8rem, 7.6vw, 6.6rem); }
.sect-head h2, .cta h2 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
.vhero h1 { font-size: clamp(2.6rem, 7vw, 6rem); }
/* le mot clé des titres : vert acide, souligné d'un trait ondulé jaune */
.hero h1 .g, .page-hero h1 .g, .sect-head h2 .g, .cta h2 .g { color: var(--lime); text-decoration: underline wavy var(--sun); text-decoration-thickness: .055em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.paper .sect-head h2 .g, .paper h2 .g { color: var(--text); text-decoration-color: var(--green); }
.wordmark { font: 800 1.4rem/1 var(--display); letter-spacing: -.01em; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72; }

/* étiquettes : petites pilules au lieu du tiret */
.label { justify-self: start; width: max-content; max-width: 100%; display: inline-flex; gap: 8px; padding: 6px 12px; border-radius: 99px; background: var(--ink-3); border: 1.5px solid var(--line-d); color: var(--fg); letter-spacing: .08em; font-size: .7rem; }
.paper .label { background: #fff; border-color: var(--text); color: var(--text); }
.paper .label::before { background: var(--green-d); box-shadow: none; }

/* boutons bonbon : pilule, bord net, tranche en dessous ; s'enfonce au clic */
.btn { font: 650 .98rem var(--body); border-radius: 99px; border: 2px solid var(--edge); box-shadow: 0 4px 0 var(--edge); padding: 12px 22px; transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .15s, border-color .15s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--edge); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.btn:disabled { box-shadow: 0 4px 0 var(--edge); }
.btn-green { background: var(--lime); border-color: var(--edge); color: #0B0D04; }
.btn-ghost { background: var(--ink-3); color: var(--fg); border-color: var(--edge); }
.btn-ghost:hover { border-color: var(--edge); background: #2E3036; }
.paper .btn-ghost { background: #fff; color: var(--text); border-color: var(--text); box-shadow: 0 4px 0 var(--text); }
.btn-lg { padding: 15px 28px; font-size: 1.06rem; }
.btn-sm { padding: 6px 13px; font-size: .84rem; box-shadow: 0 3px 0 var(--edge); }
.btn-icon { border-radius: 14px; }
.chip { border-radius: 99px; border: 1.5px solid var(--line-d); background: var(--ink-3); color: var(--fg); }

/* en-tête */
.top { background: #141519f2; border-bottom: 1.5px solid var(--line-d); }
.top nav { gap: 6px; }
.top nav a { font: 500 .95rem var(--body); padding: 8px 14px; border-radius: 99px; }
.top nav a:hover { background: var(--ink-3); }
.top nav a[aria-current] { box-shadow: none; background: var(--ink-3); color: var(--fg); outline: 1.5px solid var(--line-d); }
.tape { border-top: 1.5px solid var(--line-d); background: var(--ink-2); }
.tape-track span { align-items: center; }
.tape-track span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }

/* cartes : très arrondies, bord épais, tranche sombre */
.step, .route, .item, .panel, .modal-card, .empty, .estimate { border-radius: 20px; border: 2px solid var(--edge); box-shadow: 0 6px 0 var(--edge); background: var(--ink-2); }
.item:hover { border-color: var(--edge); transform: translateY(-3px); box-shadow: 0 9px 0 var(--edge); }
.empty { border-style: solid; }
.estimate { background: linear-gradient(180deg, #1f2a10, var(--ink-2)); }
.step-num { font: 700 7rem/1 var(--display); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; -webkit-text-stroke: 2px var(--lime); }
.step-tag, .route-path span { border: 1.5px solid var(--line-d); background: var(--ink-3); }
.route-path span.dest { background: var(--lime); color: #0B0D04; border-color: var(--edge); }
.step .code { color: var(--lime); }
.count div { border-radius: 16px; border: 2px solid var(--edge); box-shadow: 0 4px 0 var(--edge); background: var(--ink-3); }
.count b { font: 760 2.3rem/1 var(--display); font-variation-settings: "SOFT" 100, "opsz" 144; }
.stats { border-radius: 16px; border: 2px solid var(--edge); background: var(--edge); gap: 2px; }
.stats b { font-family: var(--body); font-weight: 700; }
.estimate .big { font-family: var(--display); }
.amount { border-radius: 16px; border: 2px solid var(--line-d); }
.amount:focus-within { border-color: var(--lime); }
.amount input { font: 700 1.5rem var(--body); }
.progress { height: 12px; border: 2px solid var(--edge); background: var(--ink-3); }
.pill { border-width: 1.5px; font-weight: 600; }
.pill-open { color: #0B0D04; background: var(--lime); border-color: var(--edge); }
.pill-open::before { background: #0B0D04; box-shadow: none; }
.wallet-opt { border-radius: 16px; border: 2px solid var(--line-d); }
.wallet-opt:hover, .wallet-opt:focus-visible { border-color: var(--lime); }
.seg label, .pool { border-radius: 14px; border-width: 1.5px; }
.seg label:has(input:checked), .pool:has(input:checked) { border-color: var(--lime); background: #1f2a10; }
.badge-ok { color: #0B0D04; background: var(--lime); border-color: var(--edge); }
.notice-warn { border-radius: 16px; border-width: 2px; }
.checklist li::before { background: var(--lime); color: #0B0D04; border: 2px solid var(--edge); }
.faq details { padding: 24px 0; }
.faq summary { font: 700 1.3rem var(--display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.faq summary::after { color: var(--lime); }
.modal-head h2 { font-size: 1.5rem; }

/* sections papier (crème) : cartes blanches à bord encre, comme Pulse */
.trust { border: 0; gap: 16px; }
.trust > div { border: 2px solid var(--text); border-radius: 20px; background: #fff; box-shadow: 0 6px 0 var(--text); }
.trust .code { color: var(--green-d); }
.paper .panel { background: #fff; border-color: var(--text); box-shadow: 0 6px 0 var(--text); color: var(--text); }
.addr-table td { border-bottom-color: var(--line-l); }

/* pied de page */
.foot { border-top: 1.5px solid var(--line-d); background: var(--ink-2); }
.foot-links a { padding: 2px 0; }
.vhero h1 .new { color: var(--lime); }
.vhero h1 .to { color: var(--fg-3); }
/* la zone principale reçoit le focus à chaque changement de page (lecteurs d'écran) : pas de contour */
#view:focus { outline: none; }

/* =====================================================================================
   Troupeau migrateur : un animal par launchpad (renard Bankr, girafe Long, hibou noxa.fun)
   ===================================================================================== */
.animal { overflow: visible; }
.animal .a-leg { transform-box: view-box; animation: a-step .42s ease-in-out infinite alternate; }
.animal .a-leg-b { animation-delay: -.42s; }
.animal .a-body { animation: a-bob .42s ease-in-out infinite alternate; }
.animal .a-tail { transform-box: view-box; animation: a-wag .5s ease-in-out infinite alternate; }
.animal .a-neck { transform-box: view-box; animation: a-nod .84s ease-in-out infinite alternate; }
.a-giraffe .a-leg { animation-duration: .6s; }
.a-giraffe .a-leg-b { animation-delay: -.6s; }
.a-giraffe .a-body { animation-duration: .6s; }
.animal .a-fly { animation: a-hover 1.1s ease-in-out infinite alternate; }
.animal .a-wing { transform-box: view-box; animation: a-flap .24s ease-in-out infinite alternate; }
.animal .a-wing-back { animation-delay: -.12s; }
.run .animal .a-leg, .run .animal .a-body { animation-duration: .22s; }
.run .animal .a-leg-b { animation-delay: -.22s; }
.run .animal .a-wing { animation-duration: .14s; }
@keyframes a-step { from { transform: rotate(24deg); } to { transform: rotate(-24deg); } }
@keyframes a-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes a-wag { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@keyframes a-nod { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes a-hover { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
@keyframes a-flap { from { transform: rotate(22deg); } to { transform: rotate(-30deg); } }

/* petit troupeau statique */
.herd { display: flex; align-items: flex-end; gap: 4%; }
.herd-a { flex: 1; min-width: 0; }
.herd-a.flyer { align-self: flex-start; }
.herd-giraffe { flex: 1.15; }

/* paysage : terre morte -> prairie pons, le troupeau traverse en reprenant ses couleurs */
.meadow { position: relative; aspect-ratio: 1; width: 100%; overflow: hidden; border-radius: 30px; border: 3px solid var(--edge); box-shadow: 0 8px 0 var(--edge); container-type: inline-size; background: #1B1D22; }
.m-sky { position: absolute; inset: 0; background: linear-gradient(90deg, #26272C 0%, #2C2D33 42%, #1E3B2A 62%, #16402B 100%); }
.m-sun { position: absolute; right: 12%; top: 12%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); border: 3px solid var(--edge); box-shadow: 0 0 0 10px #FFC5311f, 0 0 60px #FFC53166; }
.m-cloud { position: absolute; height: 5%; border-radius: 99px; background: #F7F4EC; border: 3px solid var(--edge); opacity: .92; animation: m-drift 26s linear infinite; }
.m-cloud.c1 { width: 22%; top: 22%; left: 60%; }
.m-cloud.c2 { width: 14%; top: 34%; left: 18%; animation-duration: 34s; animation-delay: -12s; background: #8E8B84; }
.m-land { position: absolute; bottom: 0; height: 44%; }
.m-dead { left: 0; width: 52%; background: #4A4844; border-top: 3px solid var(--edge); border-right: 3px solid var(--edge); border-top-right-radius: 40px 30px; }
.m-cracks { position: absolute; inset: 0; background-image: linear-gradient(115deg, transparent 47%, #2E2D2A 47% 49%, transparent 49%), linear-gradient(65deg, transparent 47%, #2E2D2A 47% 49%, transparent 49%); background-size: 60px 40px; opacity: .55; }
.m-tree { position: absolute; left: 8%; bottom: 62%; width: 4%; height: 40%; background: #2E2D2A; border: 3px solid var(--edge); border-radius: 6px; }
.m-tree::before, .m-tree::after { content: ""; position: absolute; width: 200%; height: 14%; background: #2E2D2A; border: 3px solid var(--edge); border-radius: 6px; top: 20%; left: 60%; transform: rotate(-30deg); transform-origin: left; }
.m-tree::after { top: 45%; left: -140%; transform: rotate(30deg); transform-origin: right; width: 160%; }
.m-sign { position: absolute; bottom: var(--y); left: var(--x); transform: rotate(var(--r)); }
.m-sign::before { content: ""; position: absolute; left: 50%; top: 70%; width: 6px; height: 32px; margin-left: -3px; background: #5B4A36; border: 2px solid var(--edge); border-radius: 3px; z-index: -1; }
.m-sign span { display: block; position: relative; padding: 4px 8px; font: 700 clamp(.55rem, 2.6cqw, .8rem)/1 var(--body); color: #0B0D04; background: color-mix(in srgb, var(--c) 45%, #8E8B84); border: 2.5px solid var(--edge); border-radius: 8px; white-space: nowrap; text-decoration: line-through 2px; }
.m-live { right: 0; width: 50%; background: #3DBE5A; border-top: 3px solid var(--edge); border-left: 3px solid var(--edge); border-top-left-radius: 40px 30px; }
.m-hill { position: absolute; bottom: 70%; border-radius: 50% 50% 0 0; background: #57D873; border: 3px solid var(--edge); border-bottom: 0; }
.m-hill.h1 { right: -10%; width: 70%; height: 50%; }
.m-hill.h2 { right: 38%; width: 46%; height: 30%; background: #2FA64B; }
.m-grass { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, #2FA64B 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, #8BEA6B 0 2px, transparent 3px); background-size: 26px 22px; opacity: .8; }
.m-flag { position: absolute; right: 34%; bottom: 96%; width: 3px; height: 34%; background: var(--edge); }
.m-flag span { position: absolute; left: 3px; top: 0; padding: 5px 10px; font: 800 clamp(.6rem, 3cqw, .95rem)/1 var(--display); color: #0B0D04; background: var(--lime); border: 2.5px solid var(--edge); border-radius: 4px 10px 10px 4px; white-space: nowrap; transform-origin: left center; animation: m-wave 1.6s ease-in-out infinite alternate; }
.m-track { position: absolute; inset: 0; pointer-events: none; }
.walker { position: absolute; left: 0; bottom: calc(5% + var(--lane) * 6%); width: 19%; animation: m-walk 13s linear infinite; animation-delay: calc(var(--d) * -1); filter: grayscale(1) brightness(.8); z-index: calc(10 - var(--lane)); }
.walker.w-giraffe, .walker.w-unicorn { width: 20%; }
.walker.flyer { bottom: calc(48% + var(--lane) * 6%); width: 14%; animation-duration: 10s; }
@keyframes m-walk {
  0% { transform: translateX(-30cqw); filter: grayscale(1) brightness(.8); }
  44% { filter: grayscale(1) brightness(.8); }
  56% { filter: grayscale(0) brightness(1); }
  100% { transform: translateX(112cqw); filter: grayscale(0) brightness(1); }
}
@keyframes m-drift { from { transform: translateX(0); } to { transform: translateX(-140cqw); } }
@keyframes m-wave { from { transform: skewY(-3deg); } to { transform: skewY(4deg) scaleX(.96); } }
.scene .meadow { margin: 0; }
@media (prefers-reduced-motion: reduce) { .walker, .animal *, .m-cloud, .m-flag span { animation: none !important; } .walker { transform: translateX(calc(var(--lane) * 30cqw)); filter: none; } }

/* ---------- transition : ruée du troupeau ---------- */
#warp { background: #26272C; }
.st-sky { position: absolute; inset: 0 0 34% 0; background: linear-gradient(90deg, #2C2D33, #1E3B2A); }
.st-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(90deg, #4A4844 0%, #4A4844 40%, #3DBE5A 60%, #3DBE5A 100%); border-top: 3px solid var(--edge); }
.st-herd { position: absolute; inset: 0; z-index: 2; }
.st-runner { position: absolute; left: 0; bottom: calc(14% + var(--lane) * 7%); width: clamp(140px, 19vw, 300px); z-index: calc(10 - var(--lane)); transform: translateX(-35vw); }
.st-runner.st-giraffe, .st-runner.st-unicorn { width: clamp(150px, 20vw, 320px); }
.st-runner.flyer { bottom: calc(52% + var(--lane) * 8%); width: clamp(90px, 12vw, 190px); }
.st-dust { position: absolute; left: -5%; right: -5%; bottom: 8%; height: 32%; z-index: 1; pointer-events: none; opacity: .75; }
.st-dust i { position: absolute; bottom: 0; left: calc(var(--i) * 6.6%); width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #E9DCC0, #C9B38A 60%, #C9B38A00 72%); opacity: 0; transform-origin: 50% 80%; }

/* ---------- intro : paysage plein écran ---------- */
.meadow.full { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.meadow.full .walker { animation: none; }
.meadow.full:not(.go) .a-leg, .meadow.full:not(.go) .a-body { animation-play-state: paused; }
.meadow.full .walker { width: clamp(110px, 14cqw, 240px); bottom: calc(6% + var(--lane) * 5%); }
.meadow.full .walker.flyer { width: clamp(80px, 10cqw, 170px); bottom: calc(50% + var(--lane) * 6%); }
.meadow.full .m-sign span { font-size: clamp(.7rem, 1.6cqw, 1.2rem); padding: 6px 12px; }
.meadow.full .m-flag span { font-size: clamp(.8rem, 2cqw, 1.5rem); padding: 8px 14px; }
.meadow .m-live, .meadow .m-sun, .meadow .m-sky { transition: filter .9s var(--ease), transform .9s var(--ease); }
.meadow.dawn .m-live { filter: brightness(.35) saturate(.25); }
.meadow.dawn .m-sun { transform: translateY(160%); filter: brightness(.6); }
.meadow.dawn .m-sky { filter: brightness(.6); }
#intro { background: #141519; }
#intro .intro-caption { z-index: 30; bottom: auto; top: max(14vh, 70px); font: 700 clamp(1.2rem, 3.4vw, 2.4rem)/1.1 var(--display); letter-spacing: -.01em; text-transform: none; color: var(--paper); text-shadow: 0 3px 0 var(--edge); }
#intro .intro-skip { z-index: 30; background: var(--ink-3); border: 2px solid var(--edge); box-shadow: 0 4px 0 var(--edge); }

/* ---------- troupeau ailleurs sur le site ---------- */
.empty .herd { width: min(320px, 80%); }
.mascot-side .herd { width: 100%; }
.foot-pilot .herd { width: 200px; }
.trail { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; container-type: inline-size; pointer-events: none; opacity: .9; border-top: 3px dashed #34363E; }
.trail .walker { bottom: 0; width: clamp(80px, 9cqw, 130px); animation-duration: 22s; filter: none; }
.trail .walker.flyer { bottom: 50%; width: clamp(60px, 6cqw, 95px); animation-duration: 18s; }
.trail .walker { animation-name: t-walk; }
@keyframes t-walk { from { transform: translateX(-15cqw); } to { transform: translateX(105cqw); } }
.cta { padding-bottom: 190px; }
.meadow.full .m-sun { width: clamp(70px, 8cqw, 150px); right: 14%; top: 16%; }
.meadow.full .m-cloud.c1 { width: clamp(90px, 12cqw, 220px); height: clamp(22px, 2.6cqw, 40px); }
.meadow.full .m-cloud.c2 { width: clamp(70px, 9cqw, 160px); height: clamp(18px, 2.2cqw, 34px); }
.meadow.full .walker { width: clamp(120px, 17cqw, 300px); }
.meadow.full .walker.w-giraffe { width: clamp(130px, 18cqw, 320px); }
.meadow.full .walker.flyer { width: clamp(84px, 11cqw, 200px); }
/* arrivés : on arrête de marcher et on saute de joie */
.meadow.full .walker.arrived .a-leg { animation-play-state: paused; }
.meadow.party .walker.arrived > svg { animation: a-jump .5s cubic-bezier(.3,0,.5,1) infinite alternate; }
.meadow.party .walker.arrived:nth-child(2n) > svg { animation-delay: -.25s; }
@keyframes a-jump { from { transform: translateY(0); } to { transform: translateY(-22%) rotate(-4deg); } }
@media (max-aspect-ratio: 4/5) {
  .meadow.full .walker { width: 24cqw; }
  .meadow.full .walker.w-giraffe { width: 25cqw; }
  .meadow.full .walker.flyer { width: 16cqw; }
  .meadow.full .m-flag { right: 52%; }
}
.m-sign span { font-size: clamp(.5rem, 2.3cqw, .78rem); padding: 3px 6px; }
.meadow.full .m-sign span { font-size: clamp(.65rem, 1.4cqw, 1.1rem); padding: 5px 10px; }
/* ombre au sol sous chaque animal qui marche */
.walker:not(.flyer)::after, .st-runner:not(.flyer)::after, .herd-a:not(.flyer)::after { content: ""; position: absolute; left: 14%; right: 18%; bottom: 1%; height: 7%; border-radius: 50%; background: rgba(0, 0, 0, .28); z-index: -1; }
.herd-a { position: relative; }

/* =====================================================================================
   Thème « nature » accordé au troupeau migrateur : fond crème, vert prairie, jaune soleil,
   bleu ciel pour les sections, contours sombres « bonbon » conservés. Les couleurs des
   animaux (une par launchpad) restent les seules couleurs vives en dehors du vert.
   ===================================================================================== */
:root {
  --ink: #FFF7E6;            /* fond de page : crème */
  --ink-2: #FFFFFF;          /* cartes */
  --ink-3: #F6ECD6;          /* surfaces douces */
  --line-d: #E5D6B8;
  --edge: #1F1A14;           /* contours et tranches */
  --paper: #DDF0FF;          /* sections « ciel » */
  --paper-2: #CFE8FF;
  --line-l: #B8D8F2;
  --fg: #1F1A14;
  --fg-2: #5D5444;
  --fg-3: #8F8470;
  --text: #1F1A14;
  --text-2: #4F5B66;
  --lime: #6BD35C;           /* vert prairie : boutons, pastilles */
  --sun: #FFC531;
  --green: #2E9E44;          /* vert lisible sur crème */
  --green-d: #23803A;
  --mint: #2E9E44;
  --warn: #B07A00;
  --bad: #D63B3B;
  color-scheme: light;
}
body { background: var(--ink); color: var(--fg); }
.stars { display: none; }
.hero h1 .g, .page-hero h1 .g, .sect-head h2 .g, .cta h2 .g { color: var(--green); text-decoration-color: var(--sun); }
.top { background: #FFF7E6f2; }
.top nav a { color: var(--fg-2); }
.top nav a:hover { background: var(--ink-3); color: var(--fg); }
.top nav a[aria-current] { background: #fff; outline: 2px solid var(--edge); color: var(--fg); }
.tape { background: #fff; border-top-color: var(--line-d); color: var(--fg-3); }
.tape-track b { color: var(--fg); }
.tape-track b.g { color: var(--green); }
.label, .chip { background: #fff; border-color: var(--edge); color: var(--fg); }
.label::before, .chip::before, .tape-track span::before { background: var(--lime); box-shadow: none; }
.paper .label { background: #fff; }
.btn { background: #fff; color: var(--fg); }
.btn-green { background: var(--lime); color: #10200A; }
.btn-ghost { background: #fff; color: var(--fg); border-color: var(--edge); }
.btn-ghost:hover { background: #FFF1D6; }
.btn-icon span { background: var(--fg); }
.step, .route, .item, .panel, .modal-card, .empty, .estimate, .count div, .wallet-opt { background: #fff; color: var(--fg); }
.estimate { background: linear-gradient(180deg, #EAF8E4, #fff); }
.step-num { -webkit-text-stroke: 2px var(--green); }
.step .code { color: var(--green-d); }
.step-tag, .route-path span { background: var(--ink-3); border-color: var(--line-d); color: var(--fg); }
.route-path span.dest { background: var(--lime); color: #10200A; border-color: var(--edge); }
.stats div { background: #fff; }
.amount { background: #fff; border-color: var(--line-d); }
.amount input { color: var(--fg); }
.amount:focus-within { border-color: var(--green); }
.progress { background: var(--ink-3); }
.progress .tick { background: var(--edge); }
.pill-open { background: var(--lime); color: #10200A; }
.pill-open::before { background: #10200A; }
.pill-wait { background: #FFF1C7; color: #7A5200; border-color: var(--edge); }
.pill-done { background: var(--paper); color: #1F5F8F; border-color: var(--edge); }
.pill-bad { background: #FFE1E1; color: #A82020; border-color: var(--edge); }
.badge-ok { background: var(--lime); color: #10200A; }
.badge-unv { color: #7A5200; background: #FFF1C7; border-color: var(--edge); }
.notice-warn { background: #FFF1C7; color: #4A3600; border-color: #E0B23A; }
.notice-warn b { color: #7A5200; }
.seg label:has(input:checked), .pool:has(input:checked) { border-color: var(--green); background: #EAF8E4; }
.checklist li::before { background: var(--lime); color: #10200A; }
.modal { background: rgba(31, 26, 20, .45); }
.toast { background: #fff; color: var(--fg); }
.foot { background: var(--ink-3); border-top-color: var(--line-d); }
.trail { border-top-color: var(--line-d); }
.vhero h1 .new { color: var(--green); }
.scene-caption b { color: var(--green); }
.faq summary::after { color: var(--green); }
.kv dt { color: var(--fg-2); }
.links a { color: var(--fg); }

/* paysage : ciel gris côté mort, ciel bleu côté pons */
.m-sky { background: linear-gradient(90deg, #8E8A83 0%, #A29D94 40%, #9CD7FF 62%, #C4E8FF 100%); }
.m-dead { background: #7A756C; }
.m-cracks { background-image: linear-gradient(115deg, transparent 47%, #5A564F 47% 49%, transparent 49%), linear-gradient(65deg, transparent 47%, #5A564F 47% 49%, transparent 49%); }
.m-tree, .m-tree::before, .m-tree::after { background: #4E4A43; }
.m-cloud.c2 { background: #C9C4BA; }
.m-flag span { background: var(--sun); }
#warp { background: #C4E8FF; }
.st-sky { background: linear-gradient(90deg, #A29D94, #9CD7FF); }
.st-ground { background: linear-gradient(90deg, #7A756C 0%, #7A756C 40%, #3DBE5A 60%, #3DBE5A 100%); }
#intro { background: #A29D94; }
#intro .intro-caption { color: #fff; text-shadow: 0 3px 0 var(--edge), 0 0 18px rgba(0, 0, 0, .35); }
#intro .intro-skip { background: #fff; color: var(--fg); }
/* le troupeau ne doit jamais élargir sa colonne (largeur intrinsèque des SVG) */
.list { grid-template-columns: minmax(0, 1fr); }
.empty { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.herd svg { width: 100%; height: auto; }
.trail { overflow: hidden; }
#warp { overflow: hidden; }


/* =====================================================================================
   ATLAS — « The Great Migration ». Le site est une planche d'atlas naturaliste : papier de
   carte, encre ardoise, filets fins, noms en Newsreader (italique pour l'emphase, comme les
   noms d'eau sur une carte), interface en Geist, mesures et coordonnées en Plex Mono. Une
   seule couleur d'accent, le vermillon des points d'intérêt ; les couleurs vives sont
   réservées aux routes et aux animaux (une par launchpad). Pas d'ombres portées dures.
   ===================================================================================== */
:root {
  --ink: #F3EDDF;            /* papier de carte (fond) */
  --ink-2: #FAF6EC;          /* surfaces claires */
  --ink-3: #EBE2CF;          /* papier plus soutenu */
  --line-d: #D5C8AB;         /* filets */
  --edge: #1D2B2B;           /* encre */
  --paper: #ECE4D2;
  --paper-2: #E4DAC4;
  --line-l: #D0C2A2;
  --fg: #1D2B2B;
  --fg-2: #4C5853;
  --fg-3: #535C56;
  --text: #1D2B2B;
  --text-2: #4C5853;
  --vermilion: #C2412A;
  --lime: var(--edge);
  --green: #2F6B3F;
  --green-d: #2F6B3F;
  --mint: #2F6B3F;
  --sun: #C2412A;
  --warn: #9A6A00;
  --bad: #B3261E;
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 3px;
  color-scheme: light;
}
::selection { background: #1D2B2B; color: #F3EDDF; }
html { scrollbar-color: #B9AB8C #F3EDDF; }
body { font: 400 16.5px/1.6 var(--body); background: var(--ink); color: var(--fg); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }
a { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--vermilion); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; line-height: 1.04; font-variation-settings: normal; text-transform: none; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--vermilion); text-decoration: none; }
.g { color: var(--green); }
.mono { font-family: var(--mono); }
.stars, .grid-bg::before { display: none; }
.grid-bg { background-image: none !important; }

/* pas de sur-titres : le titre porte sa section */
.page-hero .label, .vhero .label, .sect-head .label, .cta .label, .modal .label { display: none; }
.label { display: inline-flex; padding: 0; border: 0; background: none; border-radius: 0; font: 500 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.label::before { display: none; }

/* boutons : rectangles d'encre, sans tranche */
.btn { font: 550 .95rem var(--body); letter-spacing: -.005em; border-radius: var(--r); border: 1px solid var(--edge); box-shadow: none; padding: 12px 20px; background: transparent; color: var(--fg); transition: background .18s, color .18s, border-color .18s; }
.btn:hover { transform: none; box-shadow: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled { box-shadow: none; }
.btn-green { background: var(--edge); color: var(--ink); }
.btn-green:hover { background: var(--vermilion); border-color: var(--vermilion); color: #FFF8EE; }
.btn-ghost { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--edge) 35%, transparent); }
.btn-ghost:hover { background: var(--ink-2); border-color: var(--edge); }
.paper .btn-ghost { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--edge) 35%, transparent); box-shadow: none; }
.btn-lg { padding: 14px 24px; font-size: 1rem; }
.btn-sm { padding: 6px 12px; font-size: .84rem; box-shadow: none; }
.btn-icon { border-radius: var(--r); }
.chip { border-radius: var(--r); border: 1px solid var(--line-d); background: transparent; color: var(--fg-2); }
.chip::before { background: var(--green); box-shadow: none; }

/* en-tête */
.top { background: color-mix(in srgb, var(--ink) 94%, transparent); border-bottom: 1px solid var(--line-d); backdrop-filter: saturate(1.2); }
.wordmark { font: 600 1.45rem/1 var(--display); letter-spacing: -.02em; font-variation-settings: normal; }
.brand-mark i:nth-child(1) { border-color: var(--edge); border-right-color: transparent; }
.brand-mark i:nth-child(2) { border-color: var(--vermilion); border-left-color: transparent; }
.brand-mark i:nth-child(3) { background: var(--edge); }
.top nav { gap: 30px; }
.top nav a { font: 500 .93rem var(--body); padding: 6px 0; border-radius: 0; color: var(--fg-2); background: none; outline: 0; }
.top nav a:hover { background: none; color: var(--fg); }
.top nav a[aria-current] { background: none; outline: 0; color: var(--fg); box-shadow: inset 0 -1.5px var(--vermilion); }
.tape { background: var(--ink); border-top: 1px solid var(--line-d); color: var(--fg-3); font-size: .7rem; }
.tape-track span::before { width: 4px; height: 4px; background: var(--fg-3); }
.tape-track b { color: var(--fg); font-weight: 500; }
.tape-track b.g { color: var(--green); }
@media (max-width: 960px) { .top nav { background: var(--ink); border-bottom-color: var(--line-d); } .top nav a { border-bottom-color: var(--line-d); } }

/* sections */
.sect { padding: 112px 0; }
.sect + .sect { border-top: 1px solid var(--line-d); }
.paper { background: var(--paper); color: var(--fg); }
.sect-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; margin-bottom: 64px; }
.sect-head h2, .cta h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.sect-head p { font-size: 1.05rem; color: var(--fg-2); }
.sect-head-tight { margin-bottom: 28px; }
.sect-head-tight h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.paper .sect-head h2 .g, .paper h2 .g { color: inherit; }

/* ---------- planche (héros) ---------- */
.plate { position: relative; height: clamp(620px, calc(100svh - 108px), 880px); overflow: hidden; border-bottom: 1px solid var(--line-d); background: var(--ink); }
.atlas-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cartouche { position: absolute; left: max(28px, env(safe-area-inset-left, 0px)); bottom: 44px; width: min(560px, 44%); background: var(--ink-2); border: 1px solid var(--edge); outline: 1px solid var(--edge); outline-offset: 5px; padding: 34px 36px 32px; }
.plate-no { font: 500 .7rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line-d); }
.cartouche h1 { font-size: clamp(2.5rem, 4.4vw, 4.3rem); line-height: 1; margin: 0 0 20px; }
.cartouche h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.cartouche .lead { font-size: 1.04rem; color: var(--fg-2); max-width: 46ch; }
.cartouche .lead b { color: var(--fg); font-weight: 600; }
.cartouche .hero-cta { margin-top: 26px; }
@media (max-width: 960px) {
  .plate { height: auto; overflow: visible; }
  .atlas-map { position: relative; height: 66vw; min-height: 300px; }
  .cartouche { position: relative; left: auto; bottom: auto; width: auto; margin: -28px 16px 40px; padding: 26px 22px; }
}

/* carte */
.at-paper { fill: #F3EDDF; }
.at-sea { opacity: .9; }
.at-waterline { fill: none; stroke: #8FB0BE; stroke-width: 1; opacity: .5; }
.at-land { fill: #E9DEC6; stroke: #A9946B; stroke-width: 1.2; }
.at-hatchline { stroke: #B9A47C; stroke-width: 1; opacity: .35; }
.at-meadow { fill: #D8E6C6; stroke: #7F9F6B; stroke-width: 1.2; }
.at-contour { fill: none; stroke: #A99068; stroke-width: .8; opacity: .45; }
.at-contour.index { stroke-width: 1.5; opacity: .6; }
.at-ticks line { stroke: var(--edge); stroke-width: 1; }
.at-neat { fill: none; stroke: var(--edge); stroke-width: 1.4; }
.at-coord { font: 500 11px var(--mono); fill: #6F756F; letter-spacing: .06em; }
.at-region { font: 600 13px var(--body); letter-spacing: .34em; fill: #806B47; }
.at-sea-name { font: italic 400 26px var(--display); fill: #5F8394; letter-spacing: .02em; }
.at-route { fill: none; stroke: var(--c); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1.5 9; animation: at-flow 1.6s linear infinite; }
.at-ring { fill: none; stroke: var(--edge); stroke-width: 1.2; }
.at-name { font: italic 500 20px var(--display); fill: var(--edge); paint-order: stroke; stroke: #E9DEC6; stroke-width: 5px; stroke-linejoin: round; }
.at-dest-halo { fill: var(--vermilion); opacity: .12; animation: at-pulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.at-star { fill: var(--vermilion); stroke: var(--edge); stroke-width: 1.2; }
.at-dest-name { font: 600 34px var(--display); fill: var(--edge); letter-spacing: -.01em; }
.at-needle { fill: #F3EDDF; stroke: var(--edge); stroke-width: 1.2; }
.at-needle-n { fill: var(--edge); }
.at-scaleline { stroke: var(--edge); stroke-width: 1; }
.at-scale-a { fill: var(--edge); }
.at-scale-b { fill: #F3EDDF; stroke: var(--edge); stroke-width: 1; }
@keyframes at-flow { to { stroke-dashoffset: -21; } }
@keyframes at-pulse { 0%, 100% { transform: scale(1); opacity: .12; } 50% { transform: scale(1.35); opacity: .05; } }

/* ---------- itinéraire ---------- */
.itinerary { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; position: relative; }
.itinerary::before { content: ""; position: absolute; left: 9px; right: 0; top: 9px; border-top: 2px dashed color-mix(in srgb, var(--vermilion) 70%, transparent); }
.itinerary li { position: relative; padding-top: 40px; }
.itinerary .halt { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 2px solid var(--edge); }
.itinerary li:last-child .halt { background: var(--vermilion); border-color: var(--edge); }
.itinerary .stop { font: 500 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); margin-bottom: 10px; }
.itinerary .stop span { color: var(--fg-3); }
.itinerary h3 { font-size: 1.75rem; margin-bottom: 10px; }
.itinerary p.muted { max-width: 38ch; }
@media (max-width: 860px) {
  .itinerary { grid-template-columns: 1fr; gap: 36px; padding-left: 40px; }
  .itinerary::before { left: 9px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--vermilion) 70%, transparent); }
  .itinerary li { padding-top: 0; }
  .itinerary .halt { left: -40px; }
}

/* ---------- légende (sécurité) ---------- */
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 0; border-bottom: 1px solid var(--line-d); }
.legend > div { padding: 24px 0 26px; border-top: 1px solid var(--line-d); }
.legend dt { display: flex; align-items: center; gap: 16px; font: 500 1.4rem/1.2 var(--display); letter-spacing: -.01em; }
.legend dt svg { width: 28px; height: 28px; flex: none; color: var(--edge); }
.legend dd { margin: 8px 0 0 44px; color: var(--fg-2); max-width: 52ch; }
@media (max-width: 760px) { .legend { grid-template-columns: 1fr; } }

/* ---------- index des routes ---------- */
.gazetteer { overflow-x: auto; }
.gazetteer table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .95rem; }
.gazetteer th { text-align: left; font: 500 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); padding: 0 14px 12px 0; border-bottom: 1px solid var(--edge); white-space: nowrap; }
.gazetteer td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line-d); vertical-align: middle; }
.gazetteer td b { font: 500 1.2rem var(--display); }
.gazetteer .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .88rem; white-space: nowrap; }
.gazetteer th.num { text-align: right; }
.gz-animal { display: inline-block; width: 46px; vertical-align: middle; margin-right: 12px; }
.gz-animal .animal * { animation: none !important; }
.gz-ok, .gz-wait { font: 500 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.gz-ok { color: var(--green); }
.gz-ok::before { content: "● "; }
.gz-wait { color: var(--fg-3); }
.gz-note { margin-top: 14px; font-size: .82rem; color: var(--fg-3); max-width: 80ch; }

/* ---------- surfaces : filets, plus de bonbon ---------- */
.step, .route, .item, .panel, .modal-card, .empty, .estimate, .count div, .wallet-opt, .stats, .notice-warn, .trust > div, .paper .panel { border-radius: 4px; border: 1px solid var(--line-d); box-shadow: none; background: var(--ink-2); color: var(--fg); }
.item:hover { transform: none; box-shadow: none; border-color: var(--edge); }
.panel h2 { font-size: 1.45rem; font-weight: 500; }
.estimate { background: var(--ink-2); border-color: var(--edge); }
.estimate .big { font: 500 2rem var(--display); }
.count div { background: var(--ink-2); border-color: var(--line-d); }
.count b { font: 400 2.4rem/1 var(--display); font-variant-numeric: tabular-nums lining-nums; font-variation-settings: normal; }
.stats { background: var(--line-d); gap: 1px; }
.stats div { background: var(--ink-2); }
.stats b { font: 500 1.2rem var(--mono); }
.amount { background: var(--ink-2); border: 1px solid var(--line-d); border-radius: 4px; }
.amount:focus-within { border-color: var(--edge); }
.amount input { font: 500 1.4rem var(--mono); color: var(--fg); }
.progress { height: 8px; border: 1px solid var(--edge); background: var(--ink-2); border-radius: 0; }
.progress .tick { background: var(--vermilion); width: 2px; }
.pill { border-radius: 2px; border: 1px solid var(--line-d); background: transparent; font: 500 .68rem var(--mono); letter-spacing: .12em; }
.pill::before { width: 6px; height: 6px; }
.pill-open { color: var(--green); background: transparent; border-color: var(--green); }
.pill-open::before { background: var(--green); }
.pill-wait { color: var(--warn); background: transparent; border-color: currentColor; }
.pill-done { color: var(--fg); background: transparent; border-color: var(--edge); }
.pill-bad { color: var(--bad); background: transparent; border-color: currentColor; }
.badge-ok, .badge-unv { border-radius: 2px; background: transparent; }
.badge-ok { color: var(--green); border: 1px solid var(--green); }
.badge-unv { color: var(--warn); border: 1px solid currentColor; }
.notice-warn { background: #F7EBCB; border-color: #D9B861; color: #4A3A10; }
.notice-warn b { color: #6E4E00; }
.seg label, .pool { border-radius: 4px; border: 1px solid var(--line-d); }
.seg label:has(input:checked), .pool:has(input:checked) { border-color: var(--edge); background: var(--ink-2); }
.checklist li::before { background: transparent; color: var(--green); border: 1px solid var(--green); }
.wallet-opt { border: 1px solid var(--line-d); }
.wallet-opt:hover, .wallet-opt:focus-visible { border-color: var(--edge); }
.modal { background: rgba(29, 43, 43, .42); }
.modal-head h2 { font-size: 1.6rem; }
.item .pair { font: 500 1.4rem var(--display); }
.faq summary { font: 500 1.3rem var(--display); font-variation-settings: normal; }
.faq summary::after { color: var(--vermilion); }
.page-hero { padding: 96px 0 56px; border-bottom: 1px solid var(--line-d); }
.page-hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); max-width: 16ch; }
.page-hero h1 .g, .vhero h1 .new { color: var(--vermilion); font-style: italic; font-weight: 400; }
.vhero { border-bottom: 1px solid var(--line-d); }
.vhero h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); font-weight: 500; }
.vhero h1 .to { color: var(--fg-3); font-weight: 300; }
.links a { color: var(--fg); }
.step-num { -webkit-text-stroke: 1px var(--edge); font-family: var(--display); }

/* appel à l'action : le troupeau défile sur une bande de papier */
.cta { padding: 120px 0 170px; border-top: 1px solid var(--line-d); background: var(--paper); }
.cta p { color: var(--fg-2); }
.trail { border-top: 1px dashed var(--line-l); height: 110px; }

/* pied de page : colophon de la carte */
.foot { background: var(--paper-2); border-top: 1px solid var(--line-d); }
.foot-links a { color: var(--fg-2); }
.foot-links a:hover { color: var(--fg); }
.gazetteer th.num { font: 500 .68rem var(--mono); letter-spacing: .14em; }
@media (max-width: 860px) { .sect-head { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 40px; } .sect { padding: 80px 0; } }
.foot-pilot .herd { width: 100%; }
/* emphase des titres : italique vermillon, sans soulignement ondulé */
.page-hero h1 .g, .cta h2 .g, .sect-head h2 .g, .hero h1 .g { color: var(--vermilion); font-style: italic; font-weight: 400; text-decoration: none; }
.mascot-side .herd { width: min(420px, 100%); }

/* ruban de coordonnées : fixe, aligné sur la grille, plus de défilement continu */
.tape { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.tape-track { animation: none; gap: 34px; max-width: 1400px; margin: 0 auto; display: flex; overflow: hidden; }
.tape-track span:nth-child(n + 8) { display: none; }
/* notifications : bordure complète, pas de liseré latéral */
.toast { border: 1px solid var(--bad); border-left: 1px solid var(--bad); }
/* pas de halo lumineux */
.pill-open::before, .chip::before, .chip-warn::before { box-shadow: none; animation: none; }
/* barre de progression : remplissage plein */
.progress .fill { background: var(--edge); }
.progress .fill { height: 100%; width: 0; transition: width .8s var(--ease); }
.tape-track { padding: 9px 0; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.toast { position: fixed; }

/* ---------- How it works : carte de voyage ---------- */
.voyage { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--edge); background: var(--ink-2); }
.vy-map { border-right: 1px solid var(--line-d); min-width: 0; }
.vy-map svg { display: block; width: 100%; height: auto; }
.vy-land { fill: var(--tint); stroke: #A9946B; stroke-width: 1.4; }
.vy-leg { fill: none; stroke: #8C7A58; stroke-width: 2.4; stroke-dasharray: 2 9; stroke-linecap: round; transition: stroke .4s; }
.vy-leg.alt { stroke: #6F96A6; }
.vy-leg.done { stroke: var(--vermilion); stroke-dasharray: none; stroke-width: 3; }
.vy-leg.done.alt { stroke: #3F7F96; }
.vy-stop { cursor: pointer; outline: none; }
.vy-hit { fill: transparent; }
.vy-pin { fill: var(--ink-2); stroke: var(--edge); stroke-width: 2; transition: fill .3s; }
.vy-ring { fill: none; stroke: var(--edge); stroke-width: 1; opacity: .35; transform-box: fill-box; transform-origin: center; }
.vy-name { font: italic 500 22px var(--display); fill: var(--edge); paint-order: stroke; stroke: var(--ink); stroke-width: 6px; stroke-linejoin: round; }
.vy-stop.alt .vy-name { fill: #2F5F70; }
.vy-stop:hover .vy-pin, .vy-stop:focus-visible .vy-pin { fill: #F1D3CB; }
.vy-stop:focus-visible .vy-ring { opacity: 1; stroke: var(--vermilion); stroke-width: 2.5; }
.vy-stop.here .vy-pin { fill: var(--vermilion); }
.vy-stop.here .vy-ring { opacity: .9; stroke: var(--vermilion); animation: vy-ping 1.8s ease-out infinite; }
@keyframes vy-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.voyage:not(.moving) .vy-crew .a-leg, .voyage:not(.moving) .vy-crew .a-body { animation-play-state: paused; }
.vy-journal { padding: 34px 32px; display: flex; flex-direction: column; min-width: 0; }
.vy-kicker { font: 500 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.vy-title { font-size: clamp(1.9rem, 2.8vw, 2.6rem); margin: 14px 0 6px; }
.vy-country { font: italic 400 1.15rem var(--display); color: var(--vermilion); margin-bottom: 18px; }
.vy-text { color: var(--fg-2); max-width: 46ch; }
.vy-journal .vy-title, .vy-journal .vy-text, .vy-journal .vy-country { animation: vy-in .5s var(--ease); }
.voyage.moving .vy-journal .vy-text { opacity: .4; transition: opacity .2s; }
@keyframes vy-in { from { opacity: 0; transform: translateY(6px); } }
.vy-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 28px; }
.vy-dots { list-style: none; display: flex; gap: 10px; margin: 20px 0 0; padding: 0; }
.vy-dots button { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--edge); background: transparent; padding: 0; cursor: pointer; }
.vy-dots button[aria-current="step"] { background: var(--vermilion); border-color: var(--vermilion); }
@media (max-width: 960px) {
  .voyage { grid-template-columns: minmax(0, 1fr); }
  .vy-map { border-right: 0; border-bottom: 1px solid var(--line-d); }
  .vy-journal { padding: 24px 20px; min-height: 340px; }
}

/* ---------- Security : rose des vents, légende tracée, relevés ---------- */
.compass-side { width: min(320px, 26vw); }
.compass { width: 100%; height: auto; display: block; overflow: visible; }
.cp-ring { fill: none; stroke: var(--edge); stroke-width: 1.5; }
.cp-ring.thin { stroke-width: .8; opacity: .6; }
.cp-ticks line { stroke: var(--edge); stroke-width: 1; }
.cp-a { fill: var(--edge); }
.cp-b { fill: var(--ink-2); stroke: var(--edge); stroke-width: 1; }
.cp-n { font: 600 18px var(--display); fill: var(--edge); }
.cp-rose { transform-origin: 0 0; animation: cp-rose 60s linear infinite; }
.cp-needle { transform-origin: 0 0; animation: cp-settle 3.4s cubic-bezier(.3, .6, .2, 1) both; }
.cp-needle-n { fill: var(--vermilion); stroke: var(--edge); stroke-width: 1; }
.cp-needle-s { fill: var(--ink-2); stroke: var(--edge); stroke-width: 1; }
.cp-pivot { fill: var(--edge); }
@keyframes cp-rose { to { transform: rotate(360deg); } }
@keyframes cp-settle { 0% { transform: rotate(-150deg); } 30% { transform: rotate(70deg); } 50% { transform: rotate(-34deg); } 66% { transform: rotate(16deg); } 80% { transform: rotate(-7deg); } 90% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } }
.legend dt svg path, .legend dt svg circle, .legend dt svg rect { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1.2s var(--ease) .15s, fill-opacity .6s .9s; fill-opacity: 0; }
.legend .in dt svg path, .legend .in dt svg circle, .legend .in dt svg rect { stroke-dashoffset: 0; fill-opacity: 1; }
.legend path[stroke-dasharray="3 3"] { stroke-dasharray: 3 3; stroke-dashoffset: 0; }
.proof { padding-top: 18px; }
.survey { width: 100%; height: auto; display: block; margin-bottom: 10px; overflow: visible; }
.survey-line { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.proof.in .survey-line { stroke-dashoffset: 0; }
.countup { font-variant-numeric: tabular-nums; }
.kv dd { font-family: var(--mono); font-size: .92rem; }

/* ---------- Open a gate : croquis d'itinéraire, coches tracées ---------- */
.sketch-side { width: min(440px, 34vw); }
.sketch { width: 100%; height: auto; display: block; border-radius: 2px; }
.sk-ghost { fill: none; stroke: #8C7A58; stroke-width: 2.4; stroke-dasharray: 2 9; stroke-linecap: round; }
.sk-route { fill: none; stroke: var(--vermilion); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 720; stroke-dashoffset: 720; animation: sk-draw 6s linear infinite; }
.sk-pin { animation: sk-drop 6s cubic-bezier(.2, .8, .2, 1) infinite; }
.sk-pin-body { fill: var(--edge); }
.sk-pin-hole { fill: var(--ink-2); }
.sk-label { font: italic 500 26px var(--display); fill: var(--edge); }
.sk-star { animation: sk-star 6s ease-out infinite; }
.sk-dest { font: italic 500 28px var(--display); fill: var(--vermilion); animation: sk-star 6s ease-out infinite; }
@keyframes sk-draw { 0%, 15% { stroke-dashoffset: 720; opacity: 1; } 60%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sk-drop { 0% { transform: translate(90px, 230px); opacity: 0; } 10% { transform: translate(90px, 300px); opacity: 1; } 94% { transform: translate(90px, 300px); opacity: 1; } 100% { transform: translate(90px, 300px); opacity: 0; } }
@keyframes sk-star { 0%, 56% { opacity: .25; } 64%, 94% { opacity: 1; } 100% { opacity: .25; } }
.checklist li { grid-template-columns: 26px 1fr; }
.checklist li::before { display: none; }
.tick { width: 24px; height: 24px; }
.tick circle { fill: none; stroke: var(--line-d); stroke-width: 1.3; }
.tick path { fill: none; stroke: #2F6B4A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .5s var(--ease); }
.panel.in .tick path { stroke-dashoffset: 0; }
.panel.in li:nth-child(2) .tick path { transition-delay: .25s; }
.panel.in li:nth-child(3) .tick path { transition-delay: .5s; }
.panel.in li:nth-child(4) .tick path { transition-delay: .75s; }
@media (max-width: 900px) { .compass-side, .sketch-side { position: static; transform: none; width: min(320px, 80%); margin: 28px 0 0 20px; } }
@media (prefers-reduced-motion: reduce) { .cp-rose, .cp-needle, .sk-route, .sk-pin, .sk-star, .sk-dest, .sk-walker .a-leg, .sk-walker .a-body, .vy-stop.here .vy-ring { animation: none !important; } .sk-route { stroke-dashoffset: 0; } .sk-star, .sk-dest { opacity: 1; } .sk-walker { display: none; } }
@media (max-width: 600px) {
  .vy-name { font-size: 34px; stroke-width: 8px; }
  .vy-map .at-coord { display: none; }
  .compass-side { width: 170px; margin-top: 0; }
}

/* ---------- Migrations : carte des traversées + registre ---------- */
.board { border: 1px solid var(--edge); background: var(--ink-2); }
.board svg { display: block; width: 100%; height: auto; }
.bd-region { font: italic 500 26px var(--display); fill: var(--edge); }
.bd-region.alt { fill: #2F5F70; }
.bd-quiet { font: italic 400 24px var(--display); fill: var(--fg-3); }
.bd-route-ghost { fill: none; stroke: #8C7A58; stroke-width: 2.2; stroke-dasharray: 2 9; stroke-linecap: round; }
.bd-route { fill: none; stroke: var(--vermilion); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 9999; }
.bd-lane.ph-wait .bd-route { stroke: #A8771C; }
.bd-flag path { fill: var(--edge); stroke: var(--edge); stroke-width: 1.4; stroke-linejoin: round; }
.bd-seal { cursor: pointer; outline: none; }
.bd-seal-o { stroke: var(--edge); stroke-width: 1.5; transition: transform .25s var(--ease); }
.bd-seal-i { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1; stroke-dasharray: 2 2.5; }
.bd-seal text { font: 600 12px var(--mono); fill: #FFF8EC; letter-spacing: .04em; pointer-events: none; }
.bd-seal .bd-tag { font: 600 13px var(--mono); fill: var(--edge); paint-order: stroke; stroke: var(--ink-2); stroke-width: 5px; stroke-linejoin: round; }
.ph-open .bd-seal-o, .bd-seal.ph-open .bd-seal-o { fill: var(--vermilion); }
.bd-seal.ph-wait .bd-seal-o { fill: #A8771C; }
.bd-seal.ph-done .bd-seal-o { fill: #2F6B4A; }
.bd-seal.ph-refund .bd-seal-o { fill: #3F7F96; }
.bd-seal:hover .bd-seal-o, .bd-seal:focus-visible .bd-seal-o, .bd-seal.lit .bd-seal-o { transform: scale(1.18); }
.bd-seal:focus-visible .bd-seal-o { stroke: var(--vermilion); stroke-width: 3; }
.bd-seal.dim { opacity: .2; }
.bd-lane:has(.bd-seal.dim) path { opacity: .25; }
.bd-lane.ph-open .bd-seal-o { animation: bd-breathe 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bd-breathe { 50% { stroke-width: 3.5; } }

.ledger-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 14px; }
.ledger-bar button { font: 500 .9rem var(--body); color: var(--fg-2); background: transparent; border: 1px solid var(--line-d); border-radius: 3px; padding: 8px 14px; cursor: pointer; min-height: 40px; }
.ledger-bar button span { font: 500 .78rem var(--mono); color: var(--fg-3); margin-left: 6px; }
.ledger-bar button:hover { border-color: var(--edge); color: var(--fg); }
.ledger-bar button[aria-selected="true"] { background: var(--edge); border-color: var(--edge); color: var(--ink); }
.ledger-bar button[aria-selected="true"] span { color: inherit; opacity: .75; }
.ledger { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--edge); }
.ledger > .empty { margin-top: 18px; }
.ledger-row { display: grid; grid-template-columns: 52px minmax(0, 1.2fr) minmax(0, 1.2fr) 180px 200px; align-items: center; gap: 22px; padding: 20px 6px; border-bottom: 1px solid var(--line-d); color: var(--fg); text-decoration: none; transition: background .2s; }
.ledger-row:hover, .ledger-row.lit { background: var(--ink-2); }
.ledger-row[hidden] { display: none; }
.seal-sm { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 600 .74rem var(--mono); letter-spacing: .04em; color: #FFF8EC; border: 1.5px solid var(--edge); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .12); }
.seal-sm.ph-open { background: var(--vermilion); }
.seal-sm.ph-wait { background: #A8771C; }
.seal-sm.ph-done { background: #2F6B4A; }
.seal-sm.ph-refund { background: #3F7F96; }
.lr-pair { font: 500 1.4rem var(--display); letter-spacing: -.01em; }
.lr-pair i { font-style: normal; color: var(--fg-3); margin: 0 8px; }
.lr-pair em { color: var(--vermilion); font-weight: 400; }
.ledger-row .meta { font: 500 .78rem var(--mono); color: var(--fg-3); margin-top: 4px; }
.lr-strip { width: 100%; height: auto; display: block; overflow: visible; }
.lr-ghost { stroke: #8C7A58; stroke-width: 2; stroke-dasharray: 1.5 6; stroke-linecap: round; }
.lr-done { stroke: var(--vermilion); stroke-width: 2.6; stroke-linecap: round; }
[data-ph="wait"] .lr-done { stroke: #A8771C; }
[data-ph="done"] .lr-done { stroke: #2F6B4A; }
.lr-flag { fill: var(--edge); stroke: var(--edge); stroke-width: 1.2; stroke-linejoin: round; }
.lr-star { fill: var(--vermilion); stroke: var(--edge); stroke-width: .8; }
.lr-dot { fill: var(--ink-2); stroke: var(--edge); stroke-width: 2; }
[data-ph="open"] .lr-dot { fill: var(--vermilion); }
.lr-when { font: 500 .85rem var(--mono); color: var(--fg-2); }
.stamp { justify-self: end; font: 700 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px; border-radius: 2px; transform: rotate(-4deg); white-space: nowrap; }
.stamp.ph-open { color: var(--vermilion); }
.stamp.ph-wait { color: #8A6113; }
.stamp.ph-done { color: #2F6B4A; }
.stamp.ph-refund { color: #2F6A80; }
.ledger-row.reveal.in .stamp { animation: stamp-in .45s var(--ease) both .25s; }
@keyframes stamp-in { from { transform: rotate(-14deg) scale(1.6); opacity: 0; } 70% { transform: rotate(-3deg) scale(.96); opacity: 1; } to { transform: rotate(-4deg) scale(1); } }
@media (max-width: 860px) {
  .ledger-row { grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "seal name name" "seal route route" "seal when stamp"; gap: 10px 14px; padding: 18px 2px; }
  .seal-sm { grid-area: seal; align-self: start; }
  .lr-name { grid-area: name; }
  .lr-route { grid-area: route; }
  .lr-when { grid-area: when; font-size: .8rem; }
  .stamp { grid-area: stamp; font-size: .6rem; }
  .lr-pair { font-size: 1.2rem; }
  .board { overflow-x: auto; overscroll-behavior-x: contain; }
  .board svg { width: 820px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .bd-lane.ph-open .bd-seal-o, .ledger-row.reveal.in .stamp { animation: none; } }
.board-hint { display: none; font: 500 .75rem var(--mono); color: var(--fg-3); margin-top: 8px; }
@media (max-width: 860px) { .board-hint { display: block; } }

/* ---------- Open a gate ---------- */
.op-hero { padding-block: 72px 64px; border-bottom: 1px solid var(--line-d); }
.op-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.op-hero h1 { font-size: clamp(3rem, 6.6vw, 5.8rem); line-height: .98; }
.op-hero h1 .g { color: var(--vermilion); font-style: italic; font-weight: 400; }
.op-hero .lead { max-width: 44ch; margin-top: 22px; }
.op-hero .hero-cta { margin-top: 30px; }
.op-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 40px 0 0; border-top: 1px solid var(--edge); }
.op-facts div { padding: 14px 14px 0 0; }
.op-facts div + div { padding-left: 14px; border-left: 1px solid var(--line-d); }
.op-facts dt { font: 500 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.op-facts dd { margin: 6px 0 0; font: 500 1.08rem var(--display); }
.op-figure { margin: 0; }
.op-figure .sketch { border: 1px solid var(--edge); }
.op-figure figcaption { font: italic 400 .95rem var(--display); color: var(--fg-3); margin-top: 10px; }

.op-pads-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.op-pads-head h2, .op-check h2, .op-kit h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.op-pads-head h2 em, .op-check h2 em, .op-kit h2 em { color: var(--vermilion); font-weight: 400; }
.op-pads-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--line-d); }
.op-pads-row li { display: grid; justify-items: center; gap: 4px; padding: 20px 6px 18px; text-align: center; position: relative; }
.op-pads-row li + li { border-left: 1px solid var(--line-d); }
.op-pads-row li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c); transform: scaleX(0); transition: transform .35s var(--ease); }
.op-pads-row li.on:hover::after { transform: scaleX(1); }
.op-pad-animal { width: 72px; height: 62px; display: block; transition: transform .35s var(--ease); }
.op-pad-animal svg { width: 100%; height: 100%; }
.op-pads-row li.on:hover .op-pad-animal { transform: translateY(-6px) rotate(-4deg); }
.op-pads-row li.off .op-pad-animal { filter: grayscale(1); opacity: .45; }
.op-pads-row b { font: 500 1.05rem var(--display); }
.op-pads-row small { font: 500 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #2F6B4A; }
.op-pads-row li.off small { color: var(--fg-3); }

.op-check { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.op-check-intro { position: sticky; top: 120px; }
.op-meter { margin-top: 30px; max-width: 360px; }
.op-meter svg { width: 100%; height: auto; overflow: visible; display: block; }
.op-meter-fill { stroke: var(--vermilion); stroke-width: 3; stroke-linecap: round; transition: x2 .6s var(--ease); }
.op-meter-stop { fill: var(--ink-2); stroke: var(--edge); stroke-width: 1.6; transition: fill .3s; }
.op-meter-stop.on { fill: var(--vermilion); }
.op-meter-star { fill: var(--ink-2); stroke: var(--edge); stroke-width: 1.2; transition: fill .3s; }
.op-verdict.ready ~ * .op-meter-star, .op-check:has(.op-verdict.ready) .op-meter-star { fill: var(--vermilion); }
.op-meter-walker { transition: transform .7s var(--ease); }
.op-verdict { font: italic 400 1.3rem var(--display); margin: 16px 0 0; min-height: 1.6em; }
.op-verdict.ready { color: var(--vermilion); }
.op-verdict-cta { margin-top: 18px; }
.op-questions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--edge); }
.op-questions li { border-bottom: 1px solid var(--line-d); }
.op-questions label { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding: 22px 4px; cursor: pointer; }
.op-questions input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.op-box { width: 30px; height: 30px; border: 1.5px solid var(--edge); border-radius: 3px; display: grid; place-items: center; background: var(--ink-2); transition: background .2s; }
.op-box svg { width: 22px; height: 22px; }
.op-box path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .35s var(--ease); }
.op-questions input:checked + .op-box { background: var(--vermilion); border-color: var(--vermilion); }
.op-questions input:checked + .op-box path { stroke-dashoffset: 0; }
.op-questions input:focus-visible + .op-box { outline: 2px solid var(--vermilion); outline-offset: 3px; }
.op-questions label:hover .op-box { border-color: var(--vermilion); }
.op-questions b { display: block; font: 500 1.25rem var(--display); }
.op-questions small { display: block; color: var(--fg-2); font-size: .95rem; margin-top: 4px; }

.op-kit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.op-terms { margin: 32px 0 0; display: grid; gap: 0; border-top: 1px solid var(--edge); }
.op-terms div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-d); }
.op-terms dt { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); padding-top: 3px; }
.op-terms dd { margin: 0; color: var(--fg-2); }
.permit { position: relative; background: var(--ink-2); border: 1px solid var(--edge); outline: 1px solid var(--edge); outline-offset: -8px; padding: 36px 36px 30px; transform: rotate(.8deg); }
.permit-head, .permit-foot { display: flex; justify-content: space-between; font: 500 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.permit-title { font: 500 1.6rem var(--display); margin: 18px 0 20px; }
.permit-title i { color: var(--vermilion); font-weight: 400; }
.permit-line { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: end; padding: 12px 0 6px; border-bottom: 1px dashed #A9946B; }
.permit-line span { font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.permit-line b { font: italic 400 1.05rem var(--display); color: var(--edge); clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease) calc(.3s + var(--d) * .35s); }
.permit.in .permit-line b { clip-path: inset(0 0 0 0); }
.permit-foot { margin-top: 26px; align-items: end; }
.permit-sign { font: italic 400 1.3rem var(--display); letter-spacing: 0; text-transform: none; color: var(--edge); border-top: 1px solid var(--edge); padding-top: 4px; min-width: 150px; text-align: center; }
.permit-seal { position: absolute; right: -26px; bottom: -34px; width: 124px; opacity: 0; transform: scale(1.8) rotate(-30deg); }
.permit.in .permit-seal { animation: seal-stamp .5s cubic-bezier(.2, .8, .2, 1) 1.9s forwards; }
.permit-seal svg { width: 100%; display: block; }
.permit-seal circle { fill: var(--vermilion); stroke: #8E2A18; stroke-width: 2; }
.permit-seal circle.in { fill: none; stroke: rgba(255, 248, 236, .7); stroke-width: 1.2; }
.permit-seal text { font: 600 8.6px var(--mono); letter-spacing: .14em; fill: #FFF8EC; }
.permit-seal .st { fill: #FFF8EC; }
@keyframes seal-stamp { 0% { opacity: 0; transform: scale(1.8) rotate(-30deg); } 70% { opacity: 1; transform: scale(.94) rotate(-10deg); } 100% { opacity: 1; transform: scale(1) rotate(-12deg); } }

.op-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; padding-top: 34px; }
.op-stages::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; border-top: 2px dashed #8C7A58; }
.op-stages::after { content: ""; position: absolute; left: 0; top: 8px; height: 4px; width: 100%; background: var(--vermilion); transform-origin: left; transform: scaleX(0); transition: transform 2.2s var(--ease) .2s; }
.op-stages.in::after { transform: scaleX(1); }
.op-stages li { position: relative; }
.op-stage-pin { position: absolute; top: -34px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 2px solid var(--edge); z-index: 1; transition: background .3s calc(.4s + var(--d) * .5s); }
.op-stages.in .op-stage-pin { background: var(--vermilion); }
.op-stages b { display: block; font: 500 1.4rem var(--display); margin-top: 6px; }
.op-stages p { color: var(--fg-2); margin: 8px 0 0; }

@media (max-width: 960px) {
  .op-hero-grid, .op-check, .op-kit { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .op-check-intro { position: static; }
  .op-pads-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .op-pads-row li:nth-child(5) { border-left: 0; }
  .op-stages { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 40px; gap: 26px; }
  .op-stages::before { left: 9px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed #8C7A58; }
  .op-stages::after { left: 8px; top: 0; width: 4px; height: 100%; transform-origin: top; transform: scaleY(0); }
  .op-stages.in::after { transform: scaleY(1); }
  .op-stage-pin { top: 2px; left: -40px; }
  .permit { transform: none; padding: 28px 20px 26px; }
  .permit-line { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .permit-seal { right: -6px; bottom: -40px; width: 100px; }
  .op-terms div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 520px) {
  .op-facts { grid-template-columns: minmax(0, 1fr); }
  .op-facts div + div { border-left: 0; padding-left: 0; }
  .op-pads-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-pads-row li + li { border-left: 0; }
  .op-pads-row li { border-bottom: 1px solid var(--line-d); }
}
@media (prefers-reduced-motion: reduce) {
  .permit-line b { clip-path: none; transition: none; }
  .permit-seal { opacity: 1; transform: rotate(-12deg); animation: none !important; }
  .op-stages::after { transition: none; }
  .op-meter-walker, .op-meter-fill { transition: none; }
}
.permit-foot { padding-right: 96px; gap: 16px; }
@media (max-width: 960px) { .permit-foot { flex-direction: column; align-items: flex-start; padding-right: 92px; } .permit-sign { text-align: left; } }
@media (max-width: 520px) { .op-pads-row li:last-child { grid-column: 1 / -1; } }
/* Boussole de la planche I : elle oscille au nord et suit le pointeur sur la carte. */
.at-needle-g { transition: transform .9s cubic-bezier(.25, 1.4, .4, 1); }
.at-needle-sway { animation: at-sway 5s ease-in-out infinite; }
.plate.seeking .at-needle-sway { animation-play-state: paused; }
.at-pivot { fill: var(--edge); }
@keyframes at-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .at-needle-sway { animation: none; } }

/* ---------- Marque boussole + curseur aiguille ---------- */
.brand-mark { width: 26px; height: 26px; overflow: visible; }
.bm-ring { fill: var(--ink-2); stroke: var(--edge); stroke-width: 3.5; }
.bm-ticks { stroke: var(--edge); stroke-width: 3; stroke-linecap: round; }
.bm-n { fill: var(--vermilion); }
.bm-s { fill: var(--edge); }
.bm-pivot { fill: var(--ink-2); stroke: var(--edge); stroke-width: 2; }
.bm-needle { transform-origin: 32px 32px; animation: bm-sway 6s ease-in-out infinite; }
.brand:hover .bm-needle { animation: bm-spin 1.1s cubic-bezier(.25, 1.3, .4, 1); }
@keyframes bm-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bm-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20transform%3D%22rotate%28-45%2014%2014%29%22%3E%3Cpath%20d%3D%22M14%20-1%20L19%2014%20L9%2014%20Z%22%20fill%3D%22%23C2412A%22%20stroke%3D%22%231D2B2B%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M14%2029%20L19%2014%20L9%2014%20Z%22%20fill%3D%22%23F3EDDF%22%20stroke%3D%22%231D2B2B%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%222.2%22%20fill%3D%22%231D2B2B%22/%3E%3C/svg%3E") 3 3, auto; }
  a, button, [role="button"], [role="tab"], label, summary, select, .bd-seal, .vy-stop, .ledger-row, .btn { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22%231D2B2B%22%20stroke-width%3D%221.6%22/%3E%3Cg%20transform%3D%22rotate%28-45%2014%2014%29%22%3E%3Cpath%20d%3D%22M14%20-1%20L19%2014%20L9%2014%20Z%22%20fill%3D%22%23C2412A%22%20stroke%3D%22%231D2B2B%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M14%2029%20L19%2014%20L9%2014%20Z%22%20fill%3D%22%23F3EDDF%22%20stroke%3D%22%231D2B2B%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%222.2%22%20fill%3D%22%231D2B2B%22/%3E%3C/svg%3E") 3 3, pointer !important; }
  input, textarea, [contenteditable="true"] { cursor: text !important; }
  button:disabled, [aria-disabled="true"] { cursor: not-allowed !important; }
}
@media (prefers-reduced-motion: reduce) { .bm-needle { animation: none; } }

/* Animaux peints : dandinement pendant la marche, vol plané pour le hibou et le canard. */
.animal image { image-rendering: auto; }
.animal .a-pic { transform-box: view-box; animation: a-waddle .42s ease-in-out infinite alternate; }
.run .animal .a-pic { animation-duration: .22s; }
.a-owl .a-pic, .a-duck .a-pic { animation: a-glide 1.1s ease-in-out infinite alternate; }
@keyframes a-waddle { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes a-glide { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-6px) rotate(3deg); } }
.voyage:not(.moving) .vy-crew .a-pic, .meadow.full:not(.go) .a-pic, .meadow.full .walker.arrived .a-pic { animation-play-state: paused; }

.ledger-closed { margin: 18px 0 0; font-size: .9rem; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--vermilion); }

/* ---------- Suggestions : fiches de relevé des runners ---------- */
.sg-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sg-bar .ledger-bar { margin: 0; }
.sg-mini { display: inline-block; width: 26px; height: 20px; vertical-align: -5px; margin-right: 6px; }
.sg-mini svg { width: 100%; height: 100%; }
.sg-mini .animal * { animation: none !important; }
.sg-sort { display: flex; align-items: center; gap: 10px; font: 500 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.sg-sort select { font: 500 .9rem var(--body); color: var(--fg); background: var(--ink-2); border: 1px solid var(--line-d); border-radius: 3px; padding: 8px 10px; min-height: 40px; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.sg-grid > .empty { grid-column: 1 / -1; }
.sg-card { position: relative; background: var(--ink-2); border: 1px solid var(--line-d); border-radius: 3px; padding: 20px 22px 22px; display: flex; flex-direction: column; transition: border-color .2s, transform .25s var(--ease); }
.sg-card::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; background: var(--c); border-radius: 0 0 2px 2px; }
.sg-card:hover { border-color: var(--edge); transform: translateY(-3px); }
.sg-card header { display: flex; align-items: center; gap: 10px; }
.sg-animal { width: 52px; height: 42px; flex: none; }
.sg-animal svg { width: 100%; height: 100%; }
.sg-card:not(:hover) .sg-animal .animal * { animation-play-state: paused; }
.sg-from { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.sg-from b { color: var(--fg); font-weight: 600; }
.sg-rank { margin-left: auto; font: italic 400 1rem var(--display); color: var(--fg-3); }
.sg-card h3 { font: 500 2rem/1 var(--display); margin: 16px 0 4px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.sg-name { color: var(--fg-2); margin: 0; font-size: .95rem; min-height: 1.4em; }
.sg-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 0; border-top: 1px solid var(--edge); }
.sg-kv div { padding: 10px 8px 0 0; }
.sg-kv div + div { padding-left: 10px; border-left: 1px solid var(--line-d); }
.sg-kv dt { font: 500 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.sg-kv dd { margin: 4px 0 0; font: 500 1rem var(--mono); }
.sg-match { display: flex; align-items: center; gap: 6px; margin: 16px 0 18px; font: 500 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.sg-match span { margin-right: 4px; }
.sg-match i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--edge); }
.sg-match i.on { background: var(--vermilion); border-color: var(--vermilion); }
.sg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.sg-actions .btn { padding: 10px 14px; font-size: .9rem; }
.sg-note { margin-top: 28px; max-width: 80ch; }
.notice-wallet { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line-d); border-left-width: 1px; background: var(--ink); font-size: .92rem; color: var(--fg-2); }
.badge-instant { font: 600 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; margin-left: 10px; vertical-align: middle; color: var(--vermilion); border: 1px solid currentColor; }
.vhero-row .badge-instant { margin-left: 0; }
.gate-steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; color: var(--fg-2); }
.gate-steps b { color: var(--fg); }
.form-sub { grid-column: 1 / -1; margin: 0; }
.form-sub[hidden] { display: none; }
.stats b .eq { display: block; margin-top: 4px; font: 500 .72rem var(--mono); color: var(--fg-3); letter-spacing: 0; }

/* ---------- Console : launchpad reconnu à partir de l'adresse du token ---------- */
.lp-card { --c: var(--lp, var(--edge)); position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--line-d); border-radius: 3px; background: var(--ink-2); overflow: hidden; }
.lp-card:not(.loading):not(.unknown) { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--ink-2)); animation: lp-in .5s var(--ease); }
.lp-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.lp-card.loading::before, .lp-card.unknown::before { background: var(--line-d); }
.lp-card b { display: block; font: 500 1.7rem/1.1 var(--display); color: var(--fg); }
.lp-card small { display: block; font: 500 .72rem var(--mono); letter-spacing: .06em; color: var(--fg-3); text-transform: none; }
.lp-card > span:nth-child(2) small:first-child { text-transform: uppercase; letter-spacing: .14em; margin-bottom: 2px; }
.lp-animal { width: 76px; height: 60px; display: grid; place-items: center; }
.lp-animal svg { width: 100%; height: 100%; }
.lp-card:not(.loading):not(.unknown) .lp-animal { animation: lp-pop .6s cubic-bezier(.2, .8, .2, 1) both .1s; }
.lp-card.unknown .lp-animal .herd { display: flex; transform: scale(.9); opacity: .7; }
.lp-card.unknown { grid-template-columns: 140px minmax(0, 1fr); }
.lp-card.unknown .lp-animal { width: 140px; }
.lp-stamp { font: 700 .66rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c); border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px; padding: 5px 9px; transform: rotate(-6deg); filter: brightness(.75); }
.lp-card.loading { grid-template-columns: 1fr; }
.lp-scan { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--vermilion), transparent); animation: lp-scan 1.1s linear infinite; }
@keyframes lp-scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes lp-in { from { background: var(--ink-2); } }
@keyframes lp-pop { from { transform: translateY(14px) scale(.6); opacity: 0; } 60% { transform: translateY(-4px) scale(1.06); opacity: 1; } to { transform: none; } }
/* Le formulaire prend la couleur du launchpad reconnu. */
#c-new.has-lp { border-top: 3px solid var(--lp); transition: border-color .4s; }
#c-new.has-lp .form-title { box-shadow: inset 0 -2px 0 var(--lp); display: inline-block; padding-bottom: 4px; }
#c-new.has-lp input:focus { border-color: var(--lp); outline-color: var(--lp); }
#c-new.has-lp .seg input:checked + * , #c-new.has-lp .seg label:has(input:checked) { border-color: var(--lp); }
#n-min-eth, #n-max-eth { color: var(--fg-2); margin-top: 6px; }
@media (max-width: 600px) { .lp-card { grid-template-columns: 56px minmax(0, 1fr); } .lp-stamp { display: none; } .lp-animal { width: 56px; } .lp-card b { font-size: 1.35rem; } }
@media (prefers-reduced-motion: reduce) { .lp-card, .lp-card *, .lp-scan { animation: none !important; } }
/* Choix du pool : la case reste petite, le texte prend la place. */
.pool { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; text-align: left; }
.pool input, .seg input { width: auto; min-height: 0; flex: none; margin: 3px 0 0; padding: 0; }
.pool .rec { display: inline-block; margin-left: 6px; font: 600 .6rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #2F6B4A; border: 1px solid currentColor; border-radius: 99px; padding: 1px 7px; }
.pool.thin { opacity: .65; }
.pool.off { opacity: .55; cursor: default; background: transparent; }
.pool.off input { cursor: default; }
/* Planche I sur écran très large : la mer déborde du cadre, le cartouche suit la planche centrée. */
.plate .atlas-map { overflow: visible; }
.plate .cartouche { left: calc(max(28px, env(safe-area-inset-left, 0px)) + var(--plate-inset, 0px)); }
/* Carte launchpad : photo du coin à gauche, petit animal à côté du nom du launchpad. */
.lp-card, .lp-card.unknown { grid-template-columns: 64px minmax(0, 1fr) auto; }
.lp-coin { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 22%, var(--ink-2)); display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 4px var(--ink-2), 0 0 0 5px var(--c); }
.lp-coin b { font: 600 .9rem var(--mono); letter-spacing: .04em; color: var(--fg); }
.lp-coin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-card:not(.loading):not(.unknown) .lp-coin { animation: lp-pop .55s cubic-bezier(.2, .8, .2, 1) both; }
.lp-name { display: inline-flex !important; align-items: center; gap: 10px; }
.lp-name .lp-animal { width: 40px; height: 32px; display: inline-block; }
.lp-card:not(.loading):not(.unknown) .lp-name .lp-animal { animation: lp-pop .6s cubic-bezier(.2, .8, .2, 1) both .15s; }
@media (max-width: 600px) { .lp-card, .lp-card.unknown { grid-template-columns: 52px minmax(0, 1fr); } .lp-coin { width: 52px; height: 52px; } }
.logo-pick { display: grid; grid-template-columns: 48px auto minmax(0, 1fr); gap: 10px; align-items: center; }
.logo-prev { width: 48px; height: 48px; border-radius: 50%; border: 1px dashed var(--line-d); background: var(--ink); overflow: hidden; display: block; }
.logo-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo-up { cursor: pointer; white-space: nowrap; }
@media (max-width: 600px) { .logo-pick { grid-template-columns: 48px minmax(0, 1fr); } .logo-pick input { grid-column: 1 / -1; } }
.socials { display: grid; gap: 8px; margin-bottom: 8px; }
.social-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.social-row select { font: 500 .9rem var(--body); color: var(--fg); background: var(--ink); border: 1px solid var(--line-d); border-radius: 3px; padding: 10px; min-height: 44px; }
@media (max-width: 600px) { .social-row { grid-template-columns: 110px minmax(0, 1fr) auto; } }
.sg-id { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.sg-id h3 { margin: 0 0 4px; }
.sg-coin { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 20%, var(--ink-2)); display: grid; place-items: center; overflow: hidden; }
.sg-coin b { font: 600 .78rem var(--mono); letter-spacing: .04em; color: var(--fg); }
.sg-coin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink-2); }

/* ---------- Finitions ---------- */
/* Focus clavier : vermillon, détaché du contrôle, partout pareil. */
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; border-radius: 2px; }
/* Le vert fluo de l'ancien thème n'est pas lisible sur le papier : vert de carte. */
.g:not(h1 .g):not(h2 .g), .gz-ok, .tape-track b.g { color: #2F6B4A; }
/* Bandeau : les éléments qui ne tiennent pas s'effacent au lieu d'être coupés net. */
.tape-track { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
/* Chiffres alignés : ils ne « dansent » plus quand ils changent. */
.count b, .kv dd, .stats b, .sg-kv dd, .lr-when, .ledger-row .meta, .op-facts dd, .gazetteer td.num, #x-eth, #g-rate { font-variant-numeric: tabular-nums; }
/* Typographie : guillemets et ponctuation suspendus dans les titres, pas de veuve dans les paragraphes. */
h1, h2, h3 { hanging-punctuation: first; }
p, .lead, dd { text-wrap: pretty; }
/* Barre de défilement et sélection aux couleurs de l'atlas. */
html { scrollbar-color: #C9B993 var(--ink); }
::selection { background: color-mix(in srgb, var(--vermilion) 22%, transparent); color: var(--fg); }
/* Liens du texte courant : soulignés finement, épaissis au survol. */
.lead a, .muted a, .faq a, .sg-note a, .empty a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color .2s, text-decoration-thickness .2s; }
.lead a:hover, .muted a:hover, .faq a:hover, .sg-note a:hover, .empty a:hover { text-decoration-color: var(--vermilion); text-decoration-thickness: 2px; }
/* Boutons : léger enfoncement au clic. */
.btn:active:not(:disabled) { transform: translateY(1px); }
/* Colophon du pied de page. */
.colophon { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line-d); font: 500 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.foot-grid .colophon { max-width: none; }

/* ---------- Mise en page éditoriale ---------- */
/* Têtes de section : un filet d'encre, puis le titre et son chapeau ensemble (plus de paragraphe
   isolé à l'autre bout de la page). Taille de titre ramenée à l'échelle du contenu. */
.sect { padding: 96px 0; }
.sect-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: none; margin-bottom: 44px; padding-top: 22px; border-top: 1px solid var(--edge); align-items: start; }
.sect-head h2 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1.02; max-width: 18ch; }
.sect-head p { max-width: 58ch; font-size: 1.04rem; margin: 0; }
.sect-head-tight { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.sect-head-tight h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.page-hero { padding: 84px 0 52px; }
/* Pied de page : marque et avertissements à gauche, liens sur deux colonnes à droite. */
.foot-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.foot-pilot { display: none; }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 48px; align-content: start; }
.foot-links .label { grid-column: 1 / -1; display: block; margin-bottom: 6px; }
/* Security : la boussole centrée dans le bandeau d'en-tête, sans toucher le haut. */
.page-hero .compass-side { width: min(250px, 22vw); top: 54%; }
/* États vides compacts. */
.ledger > .empty, .sg-grid > .empty { padding: 28px 24px; }
.ledger > .empty .herd, .sg-grid > .empty .herd { width: min(340px, 80%); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } .sect { padding: 72px 0; } }
.ledger > .empty .herd, .sg-grid > .empty .herd { margin-inline: auto; }
.empty .herd-a svg { width: 100%; height: auto; display: block; overflow: visible; }
.empty .herd { margin-bottom: 14px; }

/* ===================================================================
   Échelle typographique : un rôle = une taille. Tout le texte du site
   s'y range (les dessins SVG gardent leurs propres tailles).
   =================================================================== */
:root {
  --fs-label: .6875rem;   /* 11 px : étiquettes en petites capitales */
  --fs-tag: .625rem;      /* 10 px : badges, tampons, pastilles */
  --fs-small: .875rem;    /* 14 px : notes, légendes, méta */
  --fs-body: 1rem;        /* 16 px : texte courant */
  --fs-lead: 1.125rem;    /* 18 px : chapeaux */
  --fs-item: 1.375rem;    /* 22 px : titres d'éléments (règles, étapes, FAQ) */
  --fs-h3: 1.75rem;       /* 28 px : titres de panneaux */
  --fs-h2: clamp(2.125rem, 3.1vw, 2.75rem);   /* 34 → 44 px : titres de section */
  --fs-cta: clamp(2.5rem, 4.4vw, 3.75rem);    /* 40 → 60 px : appels à l'action */
  --fs-h1: clamp(3rem, 6vw, 5.5rem);          /* 48 → 88 px : titres de page */
  --ls-label: .14em;
}
body { font-size: var(--fs-body); line-height: 1.6; }

/* Titres */
.page-hero h1, .op-hero h1, .vhero h1 { font-size: var(--fs-h1); line-height: .98; letter-spacing: -.02em; }
.sect-head h2, .op-pads-head h2, .op-check h2, .op-kit h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.015em; }
.cta h2 { font-size: var(--fs-cta); line-height: 1.02; letter-spacing: -.02em; }
.panel h2, .vy-title { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.01em; }
.legend dt, .op-questions b, .op-stages b, .faq summary, .itinerary h3, .lr-pair, .op-pads-row b, .permit-title { font-size: var(--fs-item); line-height: 1.2; }
.sg-card h3 { font-size: 1.875rem; }

/* Texte courant */
p, dd, li, .lead { text-wrap: pretty; }
.lead, .page-hero .lead, .op-hero .lead, .cartouche .lead, .cta p { font-size: var(--fs-lead); line-height: 1.55; max-width: 56ch; }
.sect-head p, .vy-text, .legend dd, .itinerary p, .op-stages p, .faq p, .gate-steps, .op-terms dd { font-size: var(--fs-body); line-height: 1.6; }
.small, .muted.small, .gz-note, .sg-note, .op-questions small, .op-figure figcaption, .sg-name, .ledger-closed, .notice-wallet, .field small, .meta { font-size: var(--fs-small); line-height: 1.5; }

/* Étiquettes en petites capitales : une seule taille, un seul espacement */
.plate-no, .vy-kicker, .label, .gazetteer th, .stats span, .count span, .sg-from, .sg-kv dt, .op-facts dt, .op-terms dt,
.permit-head, .permit-foot, .permit-line span, .kv dt.cap, .sg-sort, .sg-match, .op-pads-row small, .itinerary .stop,
.foot-links .label, .colophon, .field > span, fieldset.field > span, .lp-card > span:nth-child(2) small:first-child, .wp-kicker, .stop {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.4;
}
/* Badges, tampons, pastilles */
.badge-ok, .badge-unv, .badge-instant, .pill, .stamp, .lp-stamp, .gz-ok, .gz-wait, .pool .rec, .lp-stamp { font-size: var(--fs-tag); letter-spacing: .12em; }

/* Chiffres et données : mono, deux tailles */
.kv dd, .sg-kv dd, .gazetteer td.num, .lr-when, .op-facts dd { font-size: .875rem; font-weight: 500; }
.stats b, .count b { font-weight: 500; }
.op-facts dd { font-family: var(--display); font-size: 1.0625rem; }

/* Boutons : trois tailles nettes */
.btn { font-size: .9375rem; font-weight: 550; letter-spacing: -.005em; }
.btn-lg { font-size: 1rem; }
.btn-sm, .sg-actions .btn { font-size: .8125rem; }

/* Espacements verticaux réguliers entre titre et texte */
.legend dt + dd, .op-stages b + p, .itinerary h3 + p { margin-top: 6px; }
.page-hero .lead, .op-hero .lead { margin-top: 22px; }
.cta p { margin: 18px auto 0; }
.cta .hero-cta { margin-top: 30px; }
/* Suite de l'échelle : mono de données en 13 px, italiques d'accent en 20 px. */
.gazetteer th, .gazetteer th.num { font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
.tape-track span, .ledger-row .meta, .gazetteer td, p.muted.mono, .mono.small { font-size: .8125rem; }
.tape-track span { font-size: var(--fs-label); letter-spacing: .1em; }
.vy-country, .op-verdict { font-size: 1.25rem; }
.lr-pair { font-size: var(--fs-item); }
.top nav a { font-size: .9375rem; }
.ledger-bar button { font-size: .875rem; }
.op-facts dd { font-size: 1.125rem; }
.gazetteer b { font-size: var(--fs-item); }
table td { font-size: .8125rem; }
.op-pads-head { display: grid; gap: 14px; justify-content: stretch; padding-top: 22px; border-top: 1px solid var(--edge); margin-bottom: 32px; }
.op-pads-head p { margin: 0; max-width: 58ch; }
.op-check-intro h2, .op-kit-text h2 { margin-bottom: 14px; }
.op-check-intro > p, .op-kit-text > p { max-width: 46ch; }

/* Accueil : « Paste a token » et rendements par launchpad */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.find { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: 24px; border: 1px solid var(--edge); background: var(--ink); }
.find input { border: 0; background: transparent; padding: 0 14px; min-height: 48px; font: 500 .875rem var(--mono); color: var(--fg); min-width: 0; }
.find input::placeholder { color: var(--fg-3); font-family: var(--body); font-size: .9375rem; }
.find input:focus { outline: none; }
.find:focus-within { outline: 2px solid var(--vermilion); outline-offset: 3px; }
.find .btn { border-radius: 0; margin: -1px -1px -1px 0; min-height: 50px; }
.find-msg { min-height: 1.4em; margin: 8px 0 0; font-size: var(--fs-small); color: var(--fg-2); }
.yields { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.yields a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border: 1px solid var(--line-d); border-radius: 2px; background: var(--ink-2); color: var(--fg); text-decoration: none; font-size: .8125rem; transition: border-color .2s; }
.yields a:hover { border-color: var(--c); }
.yields b { font: 500 .75rem var(--mono); color: #2F6B4A; }
.yields li:nth-last-child(-n + 2) b { color: var(--fg-3); }
.yl-a { width: 22px; height: 18px; display: inline-block; }
.yl-a svg { width: 100%; height: 100%; }
.yl-a .animal * { animation: none !important; }
.find-more { margin: 16px 0 0; font-size: var(--fs-small); color: var(--fg-3); }
.find-more a { color: var(--fg); }
.yields li:nth-last-child(-n + 2) a { opacity: .7; }

/* ===================================================================
   Vie du site : animations douces, toutes coupées si l'appareil
   demande moins de mouvement.
   =================================================================== */

/* Planche I : le rouleau de parchemin qui se déroule */
.plate-roll { position: absolute; top: 0; bottom: 0; left: 0; width: 34px; margin-left: -17px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, #CBBB97 0%, #F7F1E3 38%, #E9DEC6 62%, #B9A57E 100%); border-left: 1px solid #A9946B; border-right: 1px solid #8C7A58; }
.plate-roll::before, .plate-roll::after { content: ""; position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #8C7A58; }
.plate-roll::before { top: 6px; } .plate-roll::after { bottom: 6px; }

/* Filets de section qui se tracent, italiques soulignés à la plume */
.sect-head { border-top: 0; position: relative; }
.sect-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--edge); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.65,.05,.25,1); }
.sect-head:has(.in)::before { transform: scaleX(1); }
.sect-head h2 em, .cta h2 .g { background: linear-gradient(currentColor, currentColor) 0 92% / 0 2px no-repeat; transition: background-size 1s cubic-bezier(.65,.05,.25,1) .45s; padding-bottom: .04em; }
.sect-head h2.in em, .cta h2.in .g { background-size: 100% 2px; }

/* Itinéraire : la route se trace, ses pointillés avancent, le renard marche d'étape en étape */
.itinerary.reveal { opacity: 1; transform: none; }
.itinerary::before { border-top: 0; height: 2px; top: 10px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--vermilion) 75%, transparent) 0 7px, transparent 7px 13px); background-size: 13px 2px; transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.65,.05,.25,1); animation: it-flow 1.2s linear infinite; }
.itinerary.in::before { transform: scaleX(1); }
@keyframes it-flow { to { background-position: 13px 0; } }
.itinerary .it-walker { position: absolute; top: -34px; left: 0; width: 56px; padding: 0; z-index: 2; opacity: 0; pointer-events: none; }
.itinerary .it-walker svg { width: 100%; height: auto; display: block; }
.itinerary.in .it-walker { animation: it-walk 10s cubic-bezier(.45,.05,.55,.95) 1.4s infinite; }
@keyframes it-walk {
  0% { left: -6px; opacity: 0; } 4% { opacity: 1; } 10% { left: -6px; }
  36% { left: calc(33.333% + 13px); } 48% { left: calc(33.333% + 13px); }
  74% { left: calc(66.666% + 32px); } 92% { left: calc(66.666% + 32px); opacity: 1; } 100% { left: calc(66.666% + 32px); opacity: 0; }
}
.itinerary .halt { transition: transform .3s; }
.itinerary.in li:nth-child(2) .halt { animation: halt-lit 10s 1.4s infinite; }
.itinerary.in li:nth-child(3) .halt { animation: halt-lit 10s 4.9s infinite; }
.itinerary.in li:nth-child(4) .halt { animation: halt-lit-last 10s 8.5s infinite; }
@keyframes halt-lit { 0%, 12% { background: var(--vermilion); transform: scale(1.25); } 18%, 100% { background: var(--ink); transform: none; } }
@keyframes halt-lit-last { 0%, 10% { transform: scale(1.35); box-shadow: 0 0 0 6px color-mix(in srgb, var(--vermilion) 22%, transparent); } 20%, 100% { transform: none; box-shadow: none; } }
@media (max-width: 860px) { .itinerary .it-walker { display: none; } .itinerary::before { background: none; border-left: 2px dashed color-mix(in srgb, var(--vermilion) 70%, transparent); transform: none; animation: none; } }

/* Légende « Don't trust us » : les symboles vivent, une vérification passe de règle en règle */
.legend.reveal { opacity: 1; transform: none; }
.legend > div { position: relative; }
.legend > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vermilion); transform: scaleX(0); transform-origin: left; }
.legend.in > div::after { animation: lg-check 9s ease-in-out infinite; }
.legend.in > div:nth-child(2)::after { animation-delay: 1.5s; } .legend.in > div:nth-child(3)::after { animation-delay: 3s; }
.legend.in > div:nth-child(4)::after { animation-delay: 4.5s; } .legend.in > div:nth-child(5)::after { animation-delay: 6s; } .legend.in > div:nth-child(6)::after { animation-delay: 7.5s; }
@keyframes lg-check { 0% { transform: scaleX(0); opacity: 1; } 10% { transform: scaleX(1); opacity: 1; } 16% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(0); opacity: 0; } }
.legend dt svg { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.legend > div:hover dt svg { transform: translateY(-3px) rotate(-6deg); }
.legend.in > div:nth-child(2) dt svg path:first-child { animation: lg-dash 1.6s linear infinite; }
@keyframes lg-dash { to { stroke-dashoffset: -12; } }
.legend.in > div:nth-child(3) dt svg circle:last-child { transform-box: fill-box; transform-origin: center; animation: lg-pulse 2.4s ease-in-out infinite; }
@keyframes lg-pulse { 50% { transform: scale(1.5); } }
.legend.in > div:nth-child(4) dt svg path { transform-box: fill-box; transform-origin: center; animation: lg-twinkle 3.2s ease-in-out infinite; }
@keyframes lg-twinkle { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(45deg) scale(.8); } 90% { transform: rotate(90deg); } }
.legend.in > div:nth-child(6) dt svg path { stroke-dasharray: 80; animation: lg-ridge 4s ease-in-out infinite; }
@keyframes lg-ridge { 0% { stroke-dashoffset: 80; } 50%, 100% { stroke-dashoffset: 0; } }

/* Tableau des routes : lignes en cascade, l'animal marche au survol */
.gazetteer tbody tr { transition: background .2s; }
.gazetteer tbody tr:hover { background: color-mix(in srgb, var(--ink-2) 70%, transparent); }
.gazetteer tbody tr:hover .gz-animal .animal * { animation: revert !important; }
.gazetteer.in tbody tr { animation: row-in .6s cubic-bezier(.2,.8,.2,1) both; }
.gazetteer.in tbody tr:nth-child(2) { animation-delay: .07s; } .gazetteer.in tbody tr:nth-child(3) { animation-delay: .14s; } .gazetteer.in tbody tr:nth-child(4) { animation-delay: .21s; }
.gazetteer.in tbody tr:nth-child(5) { animation-delay: .28s; } .gazetteer.in tbody tr:nth-child(6) { animation-delay: .35s; } .gazetteer.in tbody tr:nth-child(7) { animation-delay: .42s; }
@keyframes row-in { from { opacity: 0; transform: translateX(-14px); } }

/* Fiches, lignes du registre, pastilles : arrivée en cascade */
.sg-card.reveal { transition-delay: calc(var(--i, 0) * 70ms); }
.sg-card.in .sg-match i.on { animation: dot-on .4s cubic-bezier(.2,.8,.2,1) both; }
.sg-card.in .sg-match i:nth-of-type(2) { animation-delay: .1s; } .sg-card.in .sg-match i:nth-of-type(3) { animation-delay: .2s; }
.sg-card.in .sg-match i:nth-of-type(4) { animation-delay: .3s; } .sg-card.in .sg-match i:nth-of-type(5) { animation-delay: .4s; }
@keyframes dot-on { from { transform: scale(0); } }
.sg-coin { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.sg-card:hover .sg-coin { transform: rotate(-8deg) scale(1.06); }
.yields li { animation: chip-in .5s cubic-bezier(.2,.8,.2,1) both; }
.yields li:nth-child(1) { animation-delay: .9s; } .yields li:nth-child(2) { animation-delay: .97s; } .yields li:nth-child(3) { animation-delay: 1.04s; }
.yields li:nth-child(4) { animation-delay: 1.11s; } .yields li:nth-child(5) { animation-delay: 1.18s; } .yields li:nth-child(6) { animation-delay: 1.25s; } .yields li:nth-child(7) { animation-delay: 1.32s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px); } }
.yields a:hover .yl-a .animal * { animation: revert !important; }

/* Micro-interactions */
.btn .arrow { display: inline-block; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arrow { transform: translateX(4px); }
.top nav a { position: relative; }
.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--vermilion); transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.top nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.op-pads-row li.on .op-pad-animal .animal *, .sg-card:not(:hover) .sg-animal .animal * { animation-play-state: paused; }
.op-pads-row li.on:hover .op-pad-animal .animal * { animation-play-state: running; }
.find .btn .arrow { transition: transform .25s; }

@media (prefers-reduced-motion: reduce) {
  .sect-head::before, .itinerary::before { transform: none !important; transition: none !important; animation: none !important; }
  .sect-head h2 em, .cta h2 .g { background-size: 100% 2px; transition: none; }
  .itinerary .it-walker, .plate-roll { display: none; }
  .itinerary .halt, .legend > div::after, .legend dt svg *, .gazetteer tbody tr, .sg-match i, .yields li { animation: none !important; }
}
.cta h2 em, .op-pads-head h2 em, .op-check h2 em, .op-kit h2 em { background: linear-gradient(currentColor, currentColor) 0 92% / 0 2px no-repeat; transition: background-size 1s cubic-bezier(.65,.05,.25,1) .45s; }
.cta h2.in em, .op-pads-head h2.in em, .op-check h2.in em, .op-kit h2.in em { background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) { .cta h2 em, .op-pads-head h2 em, .op-check h2 em, .op-kit h2 em { background-size: 100% 2px; transition: none; } }
.plate-roll { transition: opacity .2s; will-change: left; }

/* Titres écrits à la plume */
.pen-wait { position: relative; }
.pen-wait.reveal, .pen.reveal { opacity: 1; transform: none; }
.pen-wait:not(.pen) { visibility: hidden; }
.pen .pw { display: inline-block; white-space: nowrap; }
.pen .pc { opacity: 0; display: inline-block; transform: translateY(.06em); filter: blur(1.5px); transition: opacity .22s ease-out, transform .32s cubic-bezier(.2,.8,.2,1), filter .3s ease-out; }
.pen .pc.on { opacity: 1; transform: none; filter: none; }
.pen .rise > span { animation: none !important; transform: none !important; }
.pen .line { overflow: visible; }
.quill { position: absolute; left: 0; top: 0; width: .55em; height: .55em; margin: -.5em 0 0 -.05em; pointer-events: none; z-index: 2; transition: transform .045s linear, opacity .4s; transform-origin: 10% 90%; }
.pen-done .quill { opacity: 0; }
/* Le soulignement à la plume attend la fin de l'écriture */
.pen:not(.pen-done) em, .pen:not(.pen-done) .g { background-size: 0 2px !important; }
/* Plume d'oie d'époque : la pointe (en bas à gauche du dessin) suit la dernière lettre écrite */
.quill { width: 1.7em; height: 1.7em; margin: -1.67em 0 0 -.03em; transform-origin: 3% 98%; filter: drop-shadow(1px 2px 0 rgba(29, 43, 43, .12)); }
.quill > * { transform-box: view-box; transform-origin: 3% 98%; }
.pen:not(.pen-done) .quill > * { animation: quill-scribble .18s ease-in-out infinite alternate; }
@keyframes quill-scribble { from { transform: rotate(-3deg); } to { transform: rotate(4deg) translateY(-1px); } }

/* Marche des quadrupèdes : pattes avant et arrière en opposition, corps qui monte à chaque appui,
   léger tangage de la tête. Les volants (hibou, canard) gardent leur vol plané. */
.animal.walker4 .a-pic { animation: none; }
.animal.walker4 .a-leg { transform-box: view-box; animation: a-stride .52s cubic-bezier(.45,0,.55,1) infinite; }
.animal.walker4 .a-leg-b { animation-delay: -.26s; }
.animal.walker4 .a-body { animation: a-step-bob .26s cubic-bezier(.45,0,.55,1) infinite alternate; }
.animal.walker4 .a-torso { transform-box: view-box; transform-origin: 50% 70%; animation: a-pitch .52s ease-in-out infinite; }
@keyframes a-stride { 0% { transform: skewX(16deg); } 50% { transform: skewX(-16deg); } 100% { transform: skewX(16deg); } }
@keyframes a-step-bob { from { transform: translateY(0); } to { transform: translateY(-2.2px); } }
@keyframes a-pitch { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.a-giraffe.walker4 .a-leg { animation-duration: .74s; } .a-giraffe.walker4 .a-leg-b { animation-delay: -.37s; }
.a-giraffe.walker4 .a-body { animation-duration: .37s; } .a-giraffe.walker4 .a-torso { animation-duration: .74s; }
.a-hippo.walker4 .a-leg { animation-duration: .62s; } .a-hippo.walker4 .a-leg-b { animation-delay: -.31s; }
.a-hippo.walker4 .a-body { animation-duration: .31s; }
.run .animal.walker4 .a-leg { animation-duration: .3s; } .run .animal.walker4 .a-leg-b { animation-delay: -.15s; }
.run .animal.walker4 .a-body { animation-duration: .15s; }
.run .animal.walker4 .a-leg { animation-name: a-gallop; }
@keyframes a-gallop { 0% { transform: skewX(24deg); } 50% { transform: skewX(-24deg); } 100% { transform: skewX(24deg); } }
.voyage:not(.moving) .vy-crew .a-torso, .meadow.full:not(.go) .a-torso, .meadow.full .walker.arrived .a-torso { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .animal.walker4 .a-leg, .animal.walker4 .a-body, .animal.walker4 .a-torso { animation: none !important; } }
/* Visite guidée de « How it works » */
.vy-tour { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.vy-tour .vy-dots { margin: 0; }
.vy-auto { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; font: 500 var(--fs-label) var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-3); cursor: pointer; }
.vy-auto:hover { color: var(--fg); }
.vy-auto-ico { width: 10px; height: 10px; position: relative; }
.vy-auto[aria-pressed="true"] .vy-auto-ico::before, .vy-auto[aria-pressed="true"] .vy-auto-ico::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--vermilion); }
.vy-auto[aria-pressed="true"] .vy-auto-ico::before { left: 1px; } .vy-auto[aria-pressed="true"] .vy-auto-ico::after { right: 1px; }
.vy-auto[aria-pressed="false"] .vy-auto-ico { border-left: 9px solid var(--fg-3); border-top: 5px solid transparent; border-bottom: 5px solid transparent; width: 0; height: 0; }
.vy-progress { height: 2px; background: var(--line-d); margin-top: 12px; overflow: hidden; visibility: hidden; }
.voyage.touring .vy-progress { visibility: visible; }
.vy-progress i { display: block; height: 100%; background: var(--vermilion); transform: scaleX(0); transform-origin: left; }

/* ---------- Security : boussole vivante, sceau de cire, relevés animés, adresses ---------- */
.cp-aim { transition: transform .7s cubic-bezier(.25, 1.35, .4, 1); }
.cp-sonar { fill: none; stroke: var(--vermilion); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: cp-sonar 4.5s cubic-bezier(.2,.6,.3,1) infinite 1.2s; }
.cp-sonar.s2 { animation-delay: 3.45s; }
@keyframes cp-sonar { 0% { transform: scale(.25); opacity: .55; } 100% { transform: scale(1.18); opacity: 0; } }
.cp-read { margin: 10px 0 0; text-align: center; font: 500 var(--fs-label) var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-3); }
.cp-read b { color: var(--vermilion); font-weight: 500; font-variant-numeric: tabular-nums; }
.trust-wrap { position: relative; }
.wax { position: absolute; right: max(0px, calc((100% - 1200px) / 2)); top: -64px; width: 150px; z-index: 2; pointer-events: none; }
.wax svg { width: 100%; display: block; overflow: visible; filter: drop-shadow(2px 3px 0 rgba(120, 30, 18, .18)); }
.wax.reveal { opacity: 0; transform: scale(1.7) rotate(-28deg); transition: opacity .25s, transform .55s cubic-bezier(.2, 1.4, .4, 1); }
.wax.reveal.in { opacity: 1; transform: rotate(-10deg); }
.wax-blob { fill: var(--vermilion); }
.wax-rim { fill: none; stroke: rgba(255, 240, 225, .45); stroke-width: 1.4; }
.wax-rim.thin { stroke-width: .9; stroke-dasharray: 2 3; }
.wax-text { transform-origin: 100px 100px; animation: wax-turn 40s linear infinite; }
.wax-text text { font: 600 10.5px var(--mono); letter-spacing: .18em; fill: #FFF3E8; }
.wax-star { fill: #FFF3E8; }
@keyframes wax-turn { to { transform: rotate(360deg); } }
.survey { overflow: visible; }
.survey-walker { opacity: 0; transition: opacity .5s 1.2s; }
.proof.in .survey-walker { opacity: 1; }
.pass-stamp { display: inline-block; font: 700 var(--fs-tag) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #2F6B4A; border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px; padding: 3px 8px; transform: rotate(-5deg); }
.proof.in .pass-stamp { animation: stamp-in .5s cubic-bezier(.2,.8,.2,1) both 1.4s; }
.addr-table tr { transition: background .2s; }
.addr-table tr:hover { background: color-mix(in srgb, var(--ink-2) 70%, transparent); }
.addr-table.in tr { animation: row-in .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.addr-cell { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.addr-acts { display: inline-flex; gap: 12px; align-items: center; opacity: .55; transition: opacity .2s; }
.addr-table tr:hover .addr-acts, .addr-acts:focus-within { opacity: 1; }
.copy-btn { font: 500 var(--fs-tag) var(--mono); letter-spacing: .12em; text-transform: uppercase; background: none; border: 1px solid var(--line-d); border-radius: 2px; padding: 4px 8px; color: var(--fg-2); cursor: pointer; }
.copy-btn:hover { border-color: var(--edge); color: var(--fg); }
.copy-btn.ok { color: #2F6B4A; border-color: #2F6B4A; }
.ver-link { font: 500 var(--fs-tag) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #2F6B4A; text-decoration: none; }
@media (max-width: 760px) { .wax { width: 96px; top: -48px; right: 0; } }
@media (prefers-reduced-motion: reduce) { .cp-sonar, .wax-text, .proof.in .pass-stamp, .addr-table.in tr { animation: none !important; } .wax.reveal { opacity: 1; transform: rotate(-10deg); } .survey-walker { display: none; } }
.wax { top: -171px; right: 260px; width: 150px; }
@media (max-width: 1100px) { .wax { right: 40%; } }
@media (max-width: 760px) { .wax { width: 92px; top: -142px; right: 16px; } }

/* ---------- Security : les règles en diaporama ---------- */
.rules-show { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 0; border: 1px solid var(--edge); background: var(--ink-2); min-height: 420px; }
.rules-show.reveal { transform: none; }
.rs-index { list-style: none; margin: 0; padding: 10px 0; border-right: 1px solid var(--line-d); display: flex; flex-direction: column; }
.rs-index button { position: relative; width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 12px; padding: 16px 24px 18px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--fg-3); transition: color .25s, background .25s; }
.rs-index button:hover { color: var(--fg); }
.rs-index button[aria-selected="true"] { color: var(--fg); background: color-mix(in srgb, var(--ink) 55%, transparent); }
.rs-n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font: 500 .7rem var(--mono); transition: background .25s, color .25s, border-color .25s; }
.rs-index button[aria-selected="true"] .rs-n { background: var(--vermilion); border-color: var(--vermilion); color: #FFF8EC; }
.rs-t { font: 500 1.05rem/1.25 var(--display); }
.rs-bar { position: absolute; left: 24px; right: 24px; bottom: 8px; height: 2px; background: transparent; overflow: hidden; }
.rs-index button[aria-selected="true"] .rs-bar { background: var(--line-d); }
.rs-bar i { display: block; height: 100%; background: var(--vermilion); transform: scaleX(0); transform-origin: left; }
.rs-stage { position: relative; overflow: hidden; }
.rs-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 32px; align-items: center; padding: 40px 44px; opacity: 0; pointer-events: none; transform: translateX(40px); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.rs-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.rs-art { width: 170px; height: 170px; overflow: visible; }
.ri-s { fill: none; stroke: var(--edge); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.rs-slide.on .ri-s { animation: ri-draw 1.4s cubic-bezier(.4,0,.2,1) forwards; }
.rs-slide.on .ri-s:nth-child(2) { animation-delay: .15s; } .rs-slide.on .ri-s:nth-child(3) { animation-delay: .3s; } .rs-slide.on .ri-s:nth-child(4) { animation-delay: .45s; } .rs-slide.on .ri-s:nth-child(5) { animation-delay: .6s; }
@keyframes ri-draw { to { stroke-dashoffset: 0; } }
.ri-v { stroke: var(--vermilion); }
.ri-h { stroke: #A9946B; stroke-width: 1.4; }
.ri-dash { stroke-dasharray: 6 6; stroke-dashoffset: 0; }
.rs-slide.on .ri-dash { animation: ri-march 1.4s linear infinite; opacity: 1; }
@keyframes ri-march { to { stroke-dashoffset: -24; } }
.ri-star { fill: color-mix(in srgb, var(--vermilion) 18%, transparent); transform-box: fill-box; transform-origin: center; }
.rs-slide.on .ri-star { animation: ri-draw 1.4s forwards, ri-spin 6s ease-in-out 1.4s infinite; }
@keyframes ri-spin { 0%, 60%, 100% { transform: none; } 75% { transform: rotate(45deg) scale(.9); } 90% { transform: rotate(90deg); } }
.ri-beam { transform-box: view-box; transform-origin: 60px 42px; }
.rs-slide.on .ri-beam { animation: ri-draw 1.4s forwards, ri-balance 4s ease-in-out 1.4s infinite; }
@keyframes ri-balance { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.ri-door { transform-box: view-box; transform-origin: 78px 64px; }
.rs-slide.on .ri-door { animation: ri-draw 1.4s forwards, ri-door 3.6s ease-in-out 1.4s infinite; }
@keyframes ri-door { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.55); } }
.rs-kicker { margin: 0 0 10px; font: 500 var(--fs-label) var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-3); }
.rs-copy h3 { font: 500 var(--fs-h3)/1.1 var(--display); margin: 0 0 12px; }
.rs-copy > p:not(.rs-kicker):not(.rs-code) { color: var(--fg-2); max-width: 46ch; margin: 0; }
.rs-code { margin: 22px 0 0; padding: 12px 14px; border: 1px dashed #A9946B; background: var(--ink); display: grid; gap: 6px; }
.rs-code span { font: 500 var(--fs-tag) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.rs-code code { font: 500 .8125rem/1.5 var(--mono); color: var(--fg); overflow-wrap: anywhere; }
.rs-slide.on .rs-copy > * { animation: rs-up .6s cubic-bezier(.2,.8,.2,1) both; }
.rs-slide.on .rs-copy > :nth-child(2) { animation-delay: .08s; } .rs-slide.on .rs-copy > :nth-child(3) { animation-delay: .16s; } .rs-slide.on .rs-copy > :nth-child(4) { animation-delay: .3s; }
@keyframes rs-up { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 900px) {
  .rules-show { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rs-index { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-d); padding: 0; scrollbar-width: none; }
  .rs-index li { flex: none; }
  .rs-index button { grid-template-columns: 26px auto; padding: 14px 16px 16px; }
  .rs-t { font-size: .9375rem; white-space: nowrap; }
  .rs-stage { min-height: 440px; }
  .rs-slide { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 26px 20px; align-content: start; }
  .rs-art { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) { .rs-slide, .rs-slide * { animation: none !important; transition: none !important; } .ri-s { stroke-dashoffset: 0; } }

/* ---------- Security : les règles sous enveloppes scellées ---------- */
.post { display: grid; gap: 28px; }
.post.reveal { transform: none; }
.post-stage { position: relative; display: grid; place-items: end center; height: 560px; padding-bottom: 10px; overflow: hidden; perspective: 1400px; }
.env { position: relative; width: min(620px, 100%); aspect-ratio: 1.62; cursor: pointer; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.env.arrive { animation: env-in .65s cubic-bezier(.2,.8,.2,1) both; }
.env.leave { transform: translateX(-120%) rotate(-6deg); opacity: 0; }
@keyframes env-in { from { transform: translateX(110%) rotate(5deg); opacity: 0; } }
.env-back, .env-front, .env-flap { position: absolute; left: 0; right: 0; }
.env-back { inset: 0; background: #E2D3B3; border: 1px solid #A9946B; border-radius: 4px; box-shadow: inset 0 0 0 6px rgba(255,255,255,.12); }
.env-front { inset: 0; z-index: 3; background: linear-gradient(170deg, #EBDFC5, #DCCBA8); border: 1px solid #A9946B; border-radius: 4px;
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); }
.env-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(140,122,88,.5) 50%, transparent calc(50% + 1px)) left bottom / 50% 100% no-repeat, linear-gradient(to top left, transparent calc(50% - 1px), rgba(140,122,88,.5) 50%, transparent calc(50% + 1px)) right bottom / 50% 100% no-repeat; }
.env-flap { top: 0; height: 58%; z-index: 4; transform-origin: top center; transform: rotateX(0deg); transition: transform .7s cubic-bezier(.5,0,.2,1) .35s, z-index 0s .7s; }
.env-flap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #E6D7B6, #D6C39C); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 0 rgba(140,122,88,.35)); }
.env.open .env-flap, .env.closing .env-flap { z-index: 1; }
.env.open .env-flap { transform: rotateX(178deg); }
.env.closing .env-flap { transform: rotateX(0deg); transition: transform .55s cubic-bezier(.5,0,.2,1) .3s, z-index 0s .3s; z-index: 4; }
.env-seal { position: absolute; left: 50%; top: 100%; width: 64px; height: 64px; margin: -40px 0 0 -32px; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; background: radial-gradient(circle at 38% 34%, #D85A40, #A8331F 70%); box-shadow: 0 2px 0 rgba(90, 20, 10, .3), inset 0 0 0 5px rgba(255, 235, 220, .14); display: grid; place-items: center; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.env-seal b { font: 600 1.35rem var(--display); color: #FFF0E6; text-shadow: 0 1px 0 rgba(90,20,10,.4); }
.env.open .env-seal { transform: scale(1.25) rotate(18deg); opacity: 0; }
.env-letter { position: absolute; left: 4%; right: 4%; bottom: 5%; height: 132%; z-index: 2; background: #FBF7EE; border: 1px solid #CDBB94; border-radius: 3px; padding: 28px 30px; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; align-content: start;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(169,148,107,.18) 31px 32px); transform: translateY(78%); transition: transform .85s cubic-bezier(.2,.8,.2,1); }
.env.open .env-letter { transform: translateY(-14%); transition-delay: .75s; }
.env.closing .env-letter { transform: translateY(78%); transition: transform .5s cubic-bezier(.6,0,.4,1); }
.env-letter .rs-art { width: 110px; height: 110px; }
.env .ri-s { animation: none !important; stroke-dashoffset: 420; }
.env.open .ri-s { animation: ri-draw 1.4s cubic-bezier(.4,0,.2,1) 1.3s forwards !important; }
.env.open .ri-dash { stroke-dashoffset: 0; animation: ri-march 1.4s linear 1.3s infinite !important; }
.env-letter .rs-copy h3 { font: 500 var(--fs-h3)/1.1 var(--display); margin: 0 0 10px; }
.env-letter .rs-text { color: var(--fg-2); margin: 0; max-width: 44ch; }
.env-letter .rs-code { margin-top: 18px; }
/* Le casier : une petite enveloppe par règle */
.post-rack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.post-rack button { position: relative; width: 100%; display: grid; justify-items: center; gap: 6px; padding: 12px 8px 14px; background: none; border: 1px solid var(--line-d); border-radius: 3px; cursor: pointer; color: var(--fg-3); transition: border-color .25s, color .25s, transform .25s cubic-bezier(.2,.8,.2,1), background .25s; }
.post-rack button:hover { color: var(--fg); transform: translateY(-3px); }
.post-rack button[aria-selected="true"] { border-color: var(--edge); color: var(--fg); background: var(--ink-2); }
.post-rack svg { width: 44px; height: 30px; overflow: visible; }
.pr-body { fill: #E2D3B3; stroke: #8C7A58; stroke-width: 1.4; }
.pr-flap { fill: none; stroke: #8C7A58; stroke-width: 1.4; stroke-linejoin: round; }
.pr-seal { fill: var(--vermilion); transition: opacity .3s; }
.post-rack button.read .pr-seal { opacity: .25; }
.pr-l { font: 500 var(--fs-label) var(--mono); letter-spacing: var(--ls-label); }
.pr-t { font: 500 .8125rem/1.25 var(--display); text-align: center; }
.post-rack .rs-bar { left: 10px; right: 10px; bottom: 5px; }
@media (max-width: 760px) {
  .post-stage { height: 520px; }
  .env { width: 100%; }
  .env-letter { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; gap: 6px; height: 175%; }
  .env-letter .rs-art { width: 64px; height: 64px; }
  .env.open .env-letter { transform: translateY(-36%); }
  .post-rack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .env, .env * { transition: none !important; animation: none !important; } .env .ri-s { stroke-dashoffset: 0; } }
/* Enveloppes : empilement à plat (le rabat ouvert passe derrière la lettre) et lettre lisible au-dessus */
.post-stage { height: 680px; place-items: end center; }
.env { transform-style: flat; }
.env-flap { transform-style: flat; }
.env.open .env-flap { z-index: 1; }
.env-letter { left: 5%; right: 5%; bottom: 3%; top: auto; height: 94%; padding: 26px 30px; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; transform: translateY(0); }
.env.open .env-letter { transform: translateY(-72%); }
.env.closing .env-letter { transform: translateY(0); }
.env-letter .rs-art { width: 96px; height: 96px; }
.env-letter .rs-copy h3 { font-size: 1.5rem; }
.env-letter .rs-text { font-size: .9375rem; line-height: 1.55; }
.env-letter .rs-code { margin-top: 14px; padding: 9px 12px; }
.env-letter .rs-code code { font-size: .75rem; }
@media (max-width: 760px) {
  .post-stage { height: 640px; }
  .env { aspect-ratio: 1.02; }
  .env-letter { grid-template-columns: minmax(0, 1fr); padding: 16px 16px; gap: 4px; height: 94%; }
  .env-letter .rs-art { width: 52px; height: 52px; }
  .env.open .env-letter { transform: translateY(-80%); }
  .env-letter .rs-copy h3 { font-size: 1.25rem; margin-bottom: 6px; }
  .env-letter .rs-text { font-size: .875rem; }
}
.env.reset, .env.reset * { transition: none !important; animation: none !important; }

/* ---------- Security : une enveloppe, une lettre avec toutes les règles ---------- */
.missive { display: grid; justify-items: center; }
.missive.reveal { transform: none; }
.ms-env-wrap { display: grid; grid-template-rows: 1fr; width: min(560px, 100%); transition: grid-template-rows .9s cubic-bezier(.6,0,.3,1) .1s, opacity .6s .3s; }
.missive.open .ms-env-wrap { grid-template-rows: 0fr; opacity: 0; }
.ms-env { position: relative; min-height: 0; overflow: visible; width: 100%; aspect-ratio: 1.62; border: 0; padding: 0; background: none; cursor: pointer; display: block; }
.missive.open .ms-env { aspect-ratio: auto; height: 0; }
.ms-env .env-flap { top: 0; height: 58%; }
.missive.opening .env-flap { transform: rotateX(178deg); z-index: 1; }
.missive.opening .env-seal { transform: scale(1.3) rotate(18deg); opacity: 0; }
.ms-env:hover .env-seal { transform: scale(1.06); }
.ms-hint { position: absolute; left: 0; right: 0; bottom: 14%; z-index: 5; text-align: center; font: 500 var(--fs-label) var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: #6B5B3E; transition: opacity .3s; }
.missive.opening .ms-hint { opacity: 0; }
.ms-env:not(:hover) .env-seal { animation: seal-pulse 2.4s ease-in-out infinite; }
@keyframes seal-pulse { 50% { transform: scale(1.06); } }
.ms-letter-wrap { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows 1.1s cubic-bezier(.2,.8,.2,1); }
.missive.open .ms-letter-wrap { grid-template-rows: 1fr; }
.ms-letter { min-height: 0; overflow: hidden; max-width: 920px; width: 100%; margin: 0 auto; background: #FBF7EE; border: 1px solid #CDBB94; border-radius: 3px;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(169,148,107,.16) 31px 32px); padding: 0 44px; transform-origin: top center;
  transform: perspective(900px) rotateX(-70deg); opacity: 0; transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .5s, padding .6s; }
.missive.open .ms-letter { transform: none; opacity: 1; padding: 40px 44px 36px; }
.ms-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid #CDBB94; font: 500 var(--fs-label) var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-3); }
.ms-hello { font: italic 400 1.5rem var(--display); margin: 26px 0 6px; }
.ms-intro { color: var(--fg-2); margin: 0 0 26px; max-width: 60ch; }
.ms-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
.ms-rules li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; opacity: 0; transform: translateY(10px); }
.missive.open .ms-rules li { animation: ms-in .6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.9s + var(--i) * .28s); }
@keyframes ms-in { to { opacity: 1; transform: none; } }
.ms-art { width: 52px; height: 52px; overflow: visible; }
.missive.open .ms-art .ri-s { animation: ri-draw 1.3s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(1s + var(--i) * .28s); }
.missive.open .ms-art .ri-dash { stroke-dashoffset: 0; animation: ri-march 1.4s linear infinite; }
.ms-rules h3 { font: 500 var(--fs-item)/1.2 var(--display); margin: 0 0 6px; }
.ms-rules p { color: var(--fg-2); margin: 0; font-size: .9375rem; line-height: 1.55; }
.ms-rules code { display: block; margin-top: 8px; font: 500 .72rem/1.5 var(--mono); color: #6B5B3E; overflow-wrap: anywhere; }
.ms-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid #CDBB94; opacity: 0; }
.missive.open .ms-foot { animation: ms-in .6s forwards; animation-delay: calc(.9s + 6 * .28s); }
.ms-sign { margin: 0; font: 400 1.25rem var(--display); }
.ms-sign em { color: var(--vermilion); }
.ms-stamp { font: 700 var(--fs-tag) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion); border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px; padding: 5px 10px; transform: rotate(-6deg); }
.missive.open .ms-stamp { animation: stamp-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(1.3s + 6 * .28s); }
@media (max-width: 760px) { .ms-rules { grid-template-columns: minmax(0, 1fr); } .missive.open .ms-letter { padding: 26px 18px 24px; } .ms-letter { padding: 0 18px; } }
@media (prefers-reduced-motion: reduce) { .missive *, .missive { transition: none !important; animation: none !important; } .ms-rules li, .ms-foot { opacity: 1; transform: none; } .ri-s { stroke-dashoffset: 0; } }
/* Séquence d'ouverture visible : sceau qui se fend, rabat, lettre qui sort, puis dépliage */
.ms-env .env-back { z-index: 0; }
.ms-env .env-front { z-index: 3; }
.ms-env .env-flap { z-index: 4; transition: transform .8s cubic-bezier(.5,0,.2,1) .45s, z-index 0s .85s; }
.missive.opening .env-flap { z-index: 1; }
.env-seal::before, .env-seal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.env-seal::after { background: linear-gradient(115deg, transparent 46%, #FBF7EE 47%, #FBF7EE 51%, transparent 52%); opacity: 0; }
.missive.opening .env-seal { animation: seal-crack .7s cubic-bezier(.4,0,.2,1) forwards; transform: none; opacity: 1; transition: none; }
@keyframes seal-crack { 0% { transform: none; } 25% { transform: scale(1.12) rotate(-6deg); } 45% { transform: scale(1.12) rotate(6deg); } 100% { transform: translateY(26px) scale(.7) rotate(40deg); opacity: 0; } }
.missive.opening .env-seal::after { animation: crack-line .3s .15s forwards; }
@keyframes crack-line { to { opacity: 1; } }
.ms-peek { position: absolute; left: 7%; right: 7%; top: 8%; height: 84%; z-index: 2; background: #FBF7EE; border: 1px solid #CDBB94; border-radius: 2px; padding: 16px 22px; display: flex; flex-direction: column; gap: 8px; text-align: left;
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(169,148,107,.18) 23px 24px); transform: translateY(0); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.missive.peek .ms-peek { transform: translateY(-62%); }
.ms-peek-h { font: 500 var(--fs-tag) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); padding-bottom: 6px; border-bottom: 1px solid #CDBB94; }
.ms-peek i { font: italic 400 1.3rem var(--display); color: var(--fg); }
.ms-peek-l { display: block; height: 7px; border-radius: 4px; background: rgba(29,43,43,.14); width: 92%; }
.ms-peek-l.s { width: 60%; }
.ms-env-wrap { transition: grid-template-rows .8s cubic-bezier(.6,0,.3,1), opacity .5s; }
.ms-env-wrap, .ms-env { overflow: visible; }
.missive { padding-top: 0; transition: padding-top .6s; }
.missive.opening:not(.open) { padding-top: 190px; }
@media (max-width: 760px) { .missive.opening:not(.open) { padding-top: 130px; } }

/* ---------- Bandeau poussé par un animal ---------- */
.tape.pushed { position: relative; }
.tape.pushed .tape-track { display: flex; width: max-content; max-width: none; margin: 0; gap: 34px; padding-right: 34px; -webkit-mask-image: none; mask-image: none; animation: tape-push 70s linear infinite; }
.tape.pushed .tape-track span { display: inline-flex !important; }
.tape.pushed .tape-track::after { content: none; }
@keyframes tape-push { to { transform: translateX(-50%); } }
/* à-coups au rythme des pas : chaque poussée fait avancer le bandeau d'un cran */
.tape.pushed { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 calc(100% - 90px), transparent calc(100% - 40px)); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 calc(100% - 90px), transparent calc(100% - 40px)); }
.tape.pushed .tape-track > * { animation: tape-nudge .62s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes tape-nudge { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(-4px); } }
.tape-pusher { position: absolute; right: max(18px, env(safe-area-inset-right, 0px)); bottom: 1px; width: 46px; height: 36px; transform: scaleX(-1); pointer-events: none; z-index: 2; }
.tape-pusher svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tape-pusher .animal .a-torso { animation-duration: .62s; }
.tape-pusher .animal.walker4 .a-leg { animation-duration: .62s; } .tape-pusher .animal.walker4 .a-leg-b { animation-delay: -.31s; }
.tape-pusher .animal .a-body { animation: a-push .62s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes a-push { 0%, 100% { transform: translateX(0) rotate(0); } 45% { transform: translateX(3px) rotate(4deg); } }
.tape { overflow: hidden; }
.top .tape { min-height: 34px; display: flex; align-items: center; }

/* ---------- Loupe de carte sous la souris ---------- */
.map-lens { position: fixed; inset: 0; z-index: 90; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22360%22%20height%3D%22360%22%3E%3Cpath%20d%3D%22M0%200%20V360%20M0%200%20H360%22%20stroke%3D%22%238C7A58%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%222%206%22/%3E%3Cpath%20d%3D%22M228.8%20180.0%20L228.9%20191.4%20L222.5%20201.4%20L213.9%20209.5%20L203.7%20215.7%20L191.6%20217.6%20L180.0%20215.2%20L169.8%20213.1%20L157.7%20213.6%20L143.3%20211.9%20L133.3%20203.4%20L132.5%20191.1%20L136.8%20180.0%20L140.0%20170.7%20L142.9%20161.4%20L148.9%20152.9%20L157.7%20146.4%20L167.8%20140.3%20L180.0%20135.2%20L193.6%20135.8%20L203.7%20144.3%20L208.4%20155.3%20L213.0%20163.4%20L221.4%20170.4%20L228.8%20180.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23A9946B%22%20stroke-width%3D%221.3%22/%3E%3Cpath%20d%3D%22M268.1%20180.0%20L263.0%20199.4%20L246.6%20213.4%20L230.0%20223.5%20L215.3%20233.1%20L198.5%20240.0%20L180.0%20241.7%20L161.0%20241.7%20L139.4%20241.2%20L117.8%20234.1%20L106.6%20216.9%20L109.7%20196.4%20L116.3%20180.0%20L116.4%20165.2%20L115.1%20147.4%20L122.7%20130.2%20L139.4%20118.8%20L159.2%20112.5%20L180.0%20109.7%20L200.3%20114.2%20L215.3%20126.9%20L225.1%20140.8%20L238.1%20150.9%20L256.3%20162.2%20L268.1%20180.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23A9946B%22%20stroke-width%3D%220.8%22/%3E%3Cpath%20d%3D%22M303.7%20180.0%20L288.1%20205.2%20L262.3%20221.3%20L243.2%20235.0%20L228.7%20253.4%20L207.8%20270.3%20L180.0%20276.6%20L151.1%20273.7%20L122.9%20266.0%20L98.9%20250.5%20L88.2%20226.1%20L90.9%20200.8%20L92.1%20180.0%20L83.7%20157.6%20L79.0%20129.3%20L93.6%20104.9%20L122.9%2094.0%20L153.1%2092.6%20L180.0%2092.6%20L205.9%2096.0%20L228.7%20106.6%20L248.5%20120.4%20L271.4%20134.1%20L295.3%20153.1%20L303.7%20180.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23A9946B%22%20stroke-width%3D%221.3%22/%3E%3Cpath%20d%3D%22M326.1%20180.0%20L303.7%20208.8%20L277.5%20228.9%20L262.7%20251.9%20L248.7%20283.5%20L219.7%20308.8%20L180.0%20312.0%20L143.5%20298.3%20L113.0%20280.9%20L86.9%20261.0%20L70.3%20235.1%20L63.5%20207.1%20L54.7%20180.0%20L41.5%20147.7%20L42.4%20110.9%20L70.8%2085.0%20L113.0%2079.1%20L149.4%2080.8%20L180.0%2076.0%20L213.8%2070.4%20L248.7%2076.5%20L278.8%2094.1%20L305.4%20117.1%20L325.7%20146.1%20L326.1%20180.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23A9946B%22%20stroke-width%3D%220.8%22/%3E%3Cpath%20d%3D%22M340.5%20180.0%20L323.3%20213.4%20L304.7%20242.6%20L293.2%20278.4%20L272.8%20319.8%20L230.5%20343.8%20L180.0%20335.3%20L140.0%20309.8%20L107.2%20289.6%20L71.9%20274.0%20L40.4%20250.1%20L21.1%20217.0%20L9.3%20180.0%20L3.4%20138.8%20L17.9%2098.6%20L59.0%2074.7%20L107.2%2070.4%20L144.8%2065.6%20L180.0%2047.3%20L225.7%2031.6%20L272.8%2040.2%20L306.1%2070.3%20L327.2%20106.1%20L341.0%20142.5%20L340.5%20180.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23A9946B%22%20stroke-width%3D%221.3%22/%3E%3Cpath%20d%3D%22M10%2030%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%238FB0BE%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M10%20330%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%238FB0BE%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M70%2030%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%238FB0BE%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M70%20330%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%238FB0BE%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M130%2030%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%238FB0BE%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M130%20330%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%238FB0BE%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M190%2030%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%238FB0BE%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M190%20330%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%238FB0BE%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M250%2030%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%238FB0BE%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M250%20330%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%238FB0BE%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M310%2030%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%238FB0BE%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M310%20330%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%238FB0BE%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M300%2060%20h12%20M306%2054%20v12%22%20stroke%3D%22%23C2412A%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M60%20290%20l6%20-12%20l6%2012%20z%22%20fill%3D%22none%22%20stroke%3D%22%238C7A58%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") 0 0 / 360px 360px;
  -webkit-mask-image: radial-gradient(circle 80px at var(--mx, -999px) var(--my, -999px), #000 35%, transparent 100%);
  mask-image: radial-gradient(circle 80px at var(--mx, -999px) var(--my, -999px), #000 35%, transparent 100%);
  transition: opacity .35s; }
.map-lens.off { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .tape.pushed .tape-track, .tape.pushed .tape-track > *, .tape-pusher * { animation: none !important; } .map-lens { display: none; } }

.tape.pushed { -webkit-mask-image: none; mask-image: none; }
.tape.pushed .tape-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 calc(100% - 120px), transparent calc(100% - 70px)); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 calc(100% - 120px), transparent calc(100% - 70px)); }
.tape.pushed .tape-track { -webkit-mask-image: none; mask-image: none; }
.tape.pushed { padding-right: 0; }
.tape-viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2%, #000 94%, transparent); }
.tape-pusher { position: static; flex: none; width: 52px; height: 34px; margin: 0 max(16px, env(safe-area-inset-right, 0px)) 0 2px; align-self: flex-end; }
.map-lens { opacity: .85; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cpath%20d%3D%22M0%20.5%20H180%20M.5%200%20V180%22%20stroke%3D%22%237A6A4C%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%222%205%22/%3E%3Cpath%20d%3D%22M108.0%2090.0%20L108.1%2094.0%20L105.7%2097.6%20L102.5%20100.4%20L98.7%20102.5%20L94.2%20103.1%20L90.0%20102.0%20L86.4%20101.3%20L81.9%20101.7%20L76.4%20101.4%20L72.5%2098.4%20L72.5%2093.9%20L74.4%2090.0%20L75.7%2086.8%20L76.6%2083.6%20L78.7%2080.6%20L81.9%2078.3%20L85.5%2076.1%20L90.0%2074.0%20L95.1%2074.2%20L98.7%2077.5%20L100.1%2081.6%20L101.6%2084.4%20L104.9%2086.7%20L108.0%2090.0Z%22%20fill%3D%22none%22%20stroke%3D%22%239C8660%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M132.8%2090.0%20L130.2%2099.0%20L121.6%20105.2%20L113.4%20109.5%20L106.5%20113.8%20L98.7%20117.0%20L90.0%20117.7%20L81.0%20117.9%20L70.5%20118.1%20L59.8%20115.2%20L54.6%20107.0%20L56.9%2097.4%20L60.8%2090.0%20L60.6%2083.4%20L59.3%2075.2%20L62.5%2067.1%20L70.5%2061.9%20L80.0%2059.0%20L90.0%2057.7%20L99.7%2059.9%20L106.5%2066.2%20L110.7%2072.7%20L116.9%2077.0%20L126.4%2081.9%20L132.8%2090.0Z%22%20fill%3D%22none%22%20stroke%3D%22%239C8660%22%20stroke-width%3D%220.9%22/%3E%3Cpath%20d%3D%22M156.1%2090.0%20L146.9%20102.7%20L132.1%20110.3%20L122.0%20116.6%20L115.1%20126.2%20L104.6%20135.3%20L90.0%20138.7%20L74.8%20137.3%20L59.9%20133.5%20L47.1%20125.7%20L42.1%20113.1%20L44.6%20100.1%20L45.7%2090.0%20L40.2%2078.9%20L36.5%2064.3%20L43.9%2051.6%20L59.9%2046.5%20L76.0%2046.4%20L90.0%2046.7%20L103.4%2048.4%20L115.1%2053.8%20L125.2%2060.7%20L137.7%2067.1%20L151.3%2076.3%20L156.1%2090.0Z%22%20fill%3D%22none%22%20stroke%3D%22%239C8660%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M171.1%2090.0%20L157.1%20105.0%20L141.6%20114.8%20L134.1%20126.8%20L127.8%20144.5%20L112.2%20159.0%20L90.0%20160.6%20L69.9%20152.5%20L53.4%20142.9%20L39.2%20132.3%20L30.6%20118.6%20L27.5%20104.0%20L22.3%2090.0%20L13.4%2072.9%20L12.7%2052.8%20L28.9%2039.1%20L53.4%2037.1%20L73.7%2039.2%20L90.0%2036.6%20L108.4%2032.8%20L127.8%2035.5%20L144.4%2044.6%20L159.5%2056.6%20L171.2%2071.9%20L171.1%2090.0Z%22%20fill%3D%22none%22%20stroke%3D%22%239C8660%22%20stroke-width%3D%220.9%22/%3E%3Cpath%20d%3D%22M30.1%20170.0%20L27.3%20173.9%20L22.8%20176.2%20L19.7%20178.1%20L17.6%20181.0%20L14.4%20183.8%20L10.0%20184.8%20L5.4%20184.4%20L0.8%20183.2%20L-3.0%20180.9%20L-4.6%20177.0%20L-3.8%20173.1%20L-3.5%20170.0%20L-5.1%20166.6%20L-6.3%20162.2%20L-4.0%20158.3%20L0.8%20156.8%20L5.7%20156.7%20L10.0%20156.8%20L14.1%20157.3%20L17.6%20159.0%20L20.7%20161.1%20L24.5%20163.0%20L28.7%20165.8%20L30.1%20170.0Z%22%20fill%3D%22none%22%20stroke%3D%22%239C8660%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M49.2%20170.0%20L42.5%20177.3%20L35.0%20182.0%20L31.3%20187.8%20L28.3%20196.4%20L20.7%20203.4%20L10.0%20204.2%20L0.3%20200.3%20L-7.7%20195.6%20L-14.6%20190.5%20L-18.7%20183.8%20L-20.2%20176.8%20L-22.8%20170.0%20L-27.1%20161.7%20L-27.4%20152.0%20L-19.6%20145.4%20L-7.7%20144.4%20L2.1%20145.4%20L10.0%20144.2%20L18.9%20142.3%20L28.3%20143.6%20L36.3%20148.1%20L43.6%20153.8%20L49.3%20161.2%20L49.2%20170.0Z%22%20fill%3D%22none%22%20stroke%3D%22%239C8660%22%20stroke-width%3D%220.9%22/%3E%3Cpath%20d%3D%22M63.2%20170.0%20L56.8%20180.5%20L50.5%20189.5%20L47.5%20201.2%20L41.5%20215.5%20L27.2%20223.6%20L10.0%20220.2%20L-3.2%20211.0%20L-13.7%20204.2%20L-25.5%20199.6%20L-36.3%20192.3%20L-42.9%20181.8%20L-47.2%20170.0%20L-49.8%20156.6%20L-45.1%20143.5%20L-30.6%20136.2%20L-13.7%20135.8%20L-1.3%20134.8%20L10.0%20128.2%20L25.4%20122.1%20L41.5%20124.5%20L52.6%20134.5%20L59.3%20146.3%20L63.7%20158.0%20L63.2%20170.0Z%22%20fill%3D%22none%22%20stroke%3D%22%239C8660%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M79.6%20170.0%20L78.4%20185.3%20L73.1%20200.4%20L66.5%20217.1%20L53.5%20232.8%20L31.8%20237.9%20L10.0%20229.5%20L-5.6%20218.5%20L-20.9%20214.6%20L-41.7%20213.1%20L-60.9%20204.1%20L-69.4%20187.7%20L-69.2%20170.0%20L-65.4%20153.2%20L-55.8%20138.4%20L-38.7%20129.4%20L-20.9%20125.4%20L-6.7%20118.2%20L10.0%20105.5%20L32.9%2098.7%20L53.5%20107.2%20L63.5%20125.4%20L68.0%20142.1%20L74.3%20155.6%20L79.6%20170.0Z%22%20fill%3D%22none%22%20stroke%3D%22%239C8660%22%20stroke-width%3D%220.9%22/%3E%3Cpath%20d%3D%22M120%2020%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%236F96A6%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M140%20150%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%236F96A6%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M20%2060%20q6%20-5%2012%200%20t12%200%22%20fill%3D%22none%22%20stroke%3D%22%236F96A6%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M10%20120%20C50%20100%2070%20150%20120%20110%22%20fill%3D%22none%22%20stroke%3D%22%23C2412A%22%20stroke-width%3D%221.6%22%20stroke-dasharray%3D%221%206%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M150%2070%20h10%20M155%2065%20v10%22%20stroke%3D%22%23C2412A%22%20stroke-width%3D%221.5%22/%3E%3C/svg%3E") 0 0 / 180px 180px;
  -webkit-mask-image: radial-gradient(circle 95px at var(--mx, -999px) var(--my, -999px), #000 30%, transparent 100%);
  mask-image: radial-gradient(circle 95px at var(--mx, -999px) var(--my, -999px), #000 30%, transparent 100%); }
.map-lens.off { opacity: 0; }

/* ---------- Console : fond de carte animé à la souris ---------- */
.console-map { position: fixed; inset: -60px; z-index: 0; pointer-events: none; }
.console-map i { position: absolute; inset: 0; display: block; }
.cm-far { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22520%22%20height%3D%22520%22%3E%3Cpath%20d%3D%22M200.8%20182.0%20L199.4%20189.7%20L193.0%20195.7%20L185.3%20199.8%20L178.8%20203.1%20L173.0%20206.6%20L166.6%20209.3%20L159.6%20210.5%20L152.4%20210.8%20L144.6%20211.2%20L135.6%20211.5%20L126.3%20209.5%20L120.1%20203.8%20L119.3%20195.6%20L122.7%20187.9%20L125.9%20182.0%20L126.1%20176.7%20L124.6%20170.3%20L124.7%20163.1%20L128.7%20156.7%20L135.6%20152.5%20L143.5%20150.0%20L151.8%20148.5%20L160.2%20148.7%20L167.7%20151.9%20L173.0%20157.4%20L176.4%20163.1%20L180.7%20167.1%20L187.7%20170.2%20L195.9%20174.9%20L200.8%20182.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M238.8%20182.0%20L230.4%20195.2%20L215.4%20204.1%20L202.0%20209.9%20L193.6%20216.8%20L186.8%20226.5%20L177.1%20236.2%20L163.5%20241.9%20L148.3%20242.7%20L133.2%20240.6%20L118.2%20236.6%20L105.1%20229.1%20L97.5%20217.4%20L97.5%20203.7%20L101.1%20191.7%20L101.5%20182.0%20L96.2%20171.4%20L90.0%20157.5%20L90.9%20142.6%20L101.7%20131.8%20L118.2%20127.4%20L134.7%20127.4%20L149.2%20128.1%20L162.7%20128.9%20L175.6%20131.8%20L186.8%20137.5%20L196.9%20144.1%20L208.6%20150.2%20L222.9%20157.2%20L235.4%20167.9%20L238.8%20182.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%220.66%22/%3E%3Cpath%20d%3D%22M264.9%20182.0%20L250.2%20198.7%20L231.7%20210.1%20L219.2%20220.3%20L213.5%20235.2%20L206.6%20255.0%20L191.2%20272.2%20L168.2%20278.8%20L144.4%20274.1%20L124.1%20263.9%20L106.8%20253.1%20L91.5%20241.7%20L80.5%20227.7%20L75.1%20212.0%20L72.0%20196.9%20L65.3%20182.0%20L54.9%20164.1%20L49.3%20142.4%20L57.6%20122.4%20L79.9%20111.6%20L106.8%20110.9%20L129.5%20114.0%20L147.3%20113.3%20L165.3%20108.6%20L185.8%20105.6%20L206.6%20109.0%20L225.2%20118.0%20L242.0%20129.9%20L257.5%20144.3%20L267.3%20162.3%20L264.9%20182.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M281.3%20182.0%20L269.5%20202.1%20L256.2%20219.2%20L248.4%20238.0%20L243.6%20263.1%20L231.3%20290.6%20L205.4%20308.6%20L171.9%20308.3%20L142.0%20293.1%20L119.7%20275.0%20L100.2%20262.5%20L78.4%20253.9%20L56.2%20242.4%20L39.1%20225.4%20L27.9%20204.7%20L19.3%20182.0%20L13.2%20156.7%20L16.7%20130.3%20L36.4%20109.6%20L68.2%20100.8%20L100.2%20101.5%20L124.4%20100.9%20L144.5%2091.1%20L169.4%2075.9%20L200.7%2067.3%20L231.3%2073.4%20L253.7%2091.6%20L268.2%20114.1%20L278.5%20136.6%20L284.3%20159.3%20L281.3%20182.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%220.66%22/%3E%3Cpath%20d%3D%22M306.3%20182.0%20L305.8%20208.5%20L298.4%20234.8%20L289.2%20262.7%20L276.1%20293.2%20L251.6%20320.0%20L214.2%20331.3%20L173.6%20321.7%20L141.1%20300.3%20L116.5%20283.4%20L89.4%20278.1%20L53.6%20276.8%20L16.1%20266.7%20L-10.0%20243.6%20L-19.6%20213.1%20L-18.2%20182.0%20L-11.6%20152.3%20L2.0%20124.9%20L26.7%20103.7%20L59.0%2092.2%20L89.4%2085.9%20L114.0%2074.2%20L139.7%2052.8%20L175.0%2031.4%20L216.7%2026.2%20L251.6%2044.0%20L270.7%2075.9%20L278.6%20107.8%20L286.4%20133.6%20L297.8%20156.9%20L306.3%20182.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M461.2%20390.0%20L456.6%20397.2%20L448.4%20402.0%20L441.1%20405.2%20L436.5%20409.0%20L432.8%20414.3%20L427.5%20419.6%20L420.1%20422.6%20L411.8%20423.1%20L403.5%20422.0%20L395.4%20419.8%20L388.2%20415.7%20L384.1%20409.3%20L384.1%20401.8%20L386.0%20395.3%20L386.3%20390.0%20L383.4%20384.2%20L380.0%20376.6%20L380.5%20368.5%20L386.4%20362.6%20L395.4%20360.2%20L404.4%20360.2%20L412.3%20360.6%20L419.7%20361.0%20L426.7%20362.6%20L432.8%20365.7%20L438.3%20369.3%20L444.7%20372.6%20L452.5%20376.5%20L459.3%20382.3%20L461.2%20390.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M490.9%20390.0%20L480.8%20401.5%20L468.1%20409.3%20L459.4%20416.3%20L455.5%20426.6%20L450.8%20440.2%20L440.2%20452.0%20L424.4%20456.5%20L408.0%20453.3%20L394.1%20446.3%20L382.2%20438.9%20L371.7%20431.0%20L364.1%20421.4%20L360.4%20410.6%20L358.2%20400.2%20L353.6%20390.0%20L346.5%20377.7%20L342.7%20362.8%20L348.4%20349.1%20L363.7%20341.6%20L382.2%20341.1%20L397.8%20343.2%20L410.0%20342.8%20L422.4%20339.5%20L436.5%20337.5%20L450.8%20339.8%20L463.5%20346.0%20L475.1%20354.2%20L485.8%20364.1%20L492.5%20376.4%20L490.9%20390.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%220.66%22/%3E%3Cpath%20d%3D%22M511.5%20390.0%20L502.5%20405.3%20L492.3%20418.3%20L486.4%20432.6%20L482.8%20451.8%20L473.3%20472.8%20L453.6%20486.5%20L428.1%20486.3%20L405.3%20474.7%20L388.4%20460.9%20L373.5%20451.4%20L356.8%20444.8%20L339.9%20436.1%20L326.9%20423.1%20L318.4%20407.3%20L311.8%20390.0%20L307.2%20370.7%20L309.9%20350.6%20L324.9%20334.8%20L349.1%20328.1%20L373.5%20328.6%20L391.9%20328.2%20L407.3%20320.8%20L426.2%20309.2%20L450.1%20302.6%20L473.3%20307.2%20L490.5%20321.1%20L501.5%20338.2%20L509.3%20355.4%20L513.7%20372.7%20L511.5%20390.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M537.4%20390.0%20L537.0%20411.4%20L531.0%20432.7%20L523.6%20455.1%20L513.0%20479.8%20L493.2%20501.5%20L463.0%20510.6%20L430.2%20502.8%20L403.9%20485.6%20L384.1%20471.9%20L362.2%20467.7%20L333.3%20466.6%20L303.0%20458.4%20L281.9%20439.7%20L274.2%20415.1%20L275.3%20390.0%20L280.6%20366.0%20L291.6%20343.9%20L311.6%20326.8%20L337.6%20317.5%20L362.2%20312.3%20L382.0%20302.9%20L402.8%20285.6%20L431.3%20268.4%20L465.1%20264.2%20L493.2%20278.5%20L508.6%20304.3%20L515.0%20330.1%20L521.4%20350.9%20L530.5%20369.7%20L537.4%20390.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%220.66%22/%3E%3Cpath%20d%3D%22M582.8%20390.0%20L588.3%20420.5%20L577.4%20449.9%20L557.7%20475.8%20L533.6%20498.9%20L503.4%20516.1%20L467.1%20521.1%20L431.4%20512.5%20L402.2%20499.6%20L375.3%20494.3%20L341.1%20498.1%20L298.1%20499.1%20L259.3%20484.9%20L240.4%20455.2%20L244.0%20420.5%20L258.3%20390.0%20L270.9%20364.3%20L281.0%20339.9%20L295.2%20316.9%20L316.5%20297.9%20L341.1%20281.9%20L366.8%20263.9%20L397.5%20243.6%20L436.1%20230.7%20L475.6%20237.2%20L503.4%20263.9%20L515.3%20298.1%20L521.8%20326.0%20L536.8%20345.2%20L561.4%20364.2%20L582.8%20390.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M92.9%20468.0%20L87.3%20474.3%20L80.4%20478.5%20L75.7%20482.3%20L73.6%20488.0%20L71.0%20495.4%20L65.2%20501.8%20L56.6%20504.3%20L47.6%20502.5%20L40.0%20498.7%20L33.5%20494.6%20L27.8%20490.4%20L23.7%20485.2%20L21.7%20479.3%20L20.5%20473.6%20L18.0%20468.0%20L14.1%20461.3%20L12.0%20453.2%20L15.1%20445.7%20L23.5%20441.6%20L33.5%20441.4%20L42.1%20442.5%20L48.8%20442.2%20L55.5%20440.5%20L63.2%20439.3%20L71.0%20440.6%20L77.9%20444.0%20L84.2%20448.5%20L90.1%20453.9%20L93.7%20460.6%20L92.9%20468.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M117.7%20468.0%20L111.5%20478.5%20L104.5%20487.5%20L100.4%20497.3%20L97.9%20510.5%20L91.4%20524.9%20L77.9%20534.3%20L60.3%20534.2%20L44.7%20526.2%20L33.0%20516.7%20L22.8%20510.2%20L11.3%20505.6%20L-0.3%20499.7%20L-9.3%20490.7%20L-15.1%20479.9%20L-19.6%20468.0%20L-22.8%20454.7%20L-20.9%20440.9%20L-10.6%20430.1%20L6.0%20425.5%20L22.8%20425.8%20L35.4%20425.5%20L46.0%20420.4%20L59.0%20412.4%20L75.4%20407.9%20L91.4%20411.1%20L103.2%20420.6%20L110.8%20432.4%20L116.2%20444.2%20L119.2%20456.1%20L117.7%20468.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%220.66%22/%3E%3Cpath%20d%3D%22M144.5%20468.0%20L144.2%20484.3%20L139.7%20500.5%20L134.0%20517.6%20L125.9%20536.4%20L110.8%20552.9%20L87.8%20559.9%20L62.8%20554.0%20L42.8%20540.8%20L27.7%20530.4%20L11.0%20527.2%20L-11.0%20526.3%20L-34.1%20520.1%20L-50.1%20505.9%20L-56.0%20487.1%20L-55.2%20468.0%20L-51.2%20449.7%20L-42.8%20432.8%20L-27.6%20419.8%20L-7.7%20412.7%20L11.0%20408.8%20L26.1%20401.6%20L42.0%20388.5%20L63.7%20375.3%20L89.4%20372.1%20L110.8%20383.1%20L122.6%20402.7%20L127.4%20422.3%20L132.3%20438.2%20L139.3%20452.5%20L144.5%20468.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M186.7%20468.0%20L191.2%20492.7%20L182.4%20516.4%20L166.5%20537.3%20L147.0%20555.9%20L122.6%20569.8%20L93.3%20573.9%20L64.5%20566.9%20L40.8%20556.5%20L19.1%20552.3%20L-8.5%20555.3%20L-43.2%20556.1%20L-74.6%20544.6%20L-89.8%20520.6%20L-86.9%20492.6%20L-75.4%20468.0%20L-65.2%20447.2%20L-57.1%20427.5%20L-45.5%20408.9%20L-28.4%20393.6%20L-8.5%20380.7%20L12.3%20366.1%20L37.1%20349.7%20L68.2%20339.3%20L100.1%20344.6%20L122.6%20366.2%20L132.2%20393.8%20L137.4%20416.3%20L149.6%20431.8%20L169.5%20447.2%20L186.7%20468.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%220.66%22/%3E%3Cpath%20d%3D%22M241.6%20468.0%20L239.4%20501.2%20L215.5%20528.7%20L184.2%20548.0%20L155.3%20563.6%20L128.0%20577.6%20L98.3%20586.8%20L67.2%20588.6%20L36.9%20587.4%20L4.7%20589.3%20L-34.3%20592.5%20L-76.2%20586.7%20L-106.6%20564.0%20L-112.8%20529.2%20L-99.0%20494.8%20L-82.9%20468.0%20L-77.9%20445.0%20L-80.9%20418.7%20L-78.3%20389.1%20L-61.8%20362.7%20L-34.3%20343.5%20L-2.0%20329.6%20L33.3%20319.7%20L70.9%20318.5%20L105.0%20332.1%20L128.0%20358.4%20L140.9%20385.7%20L156.0%20405.1%20L183.6%20419.2%20L218.4%20438.5%20L241.6%20468.0Z%22%20fill%3D%22none%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M0%20.5%20H520%20M.5%200%20V520%22%20stroke%3D%22%23B9A57E%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%222%207%22/%3E%3C/svg%3E") 0 0 / 520px 520px; opacity: .35; transform: translate(calc(var(--dx, 0) * -18px), calc(var(--dy, 0) * -18px)); transition: transform .6s cubic-bezier(.2,.8,.2,1); animation: cm-drift 120s linear infinite; }
.cm-near { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22300%22%20height%3D%22300%22%3E%3Cpath%20d%3D%22M110.7%20105.0%20L108.7%20108.3%20L106.5%20111.1%20L105.2%20114.2%20L104.4%20118.4%20L102.4%20122.9%20L98.1%20125.9%20L92.6%20125.8%20L87.7%20123.3%20L84.0%20120.3%20L80.8%20118.3%20L77.2%20116.8%20L73.5%20115.0%20L70.7%20112.2%20L68.9%20108.7%20L67.5%20105.0%20L66.5%20100.8%20L67.0%2096.5%20L70.3%2093.1%20L75.5%2091.6%20L80.8%2091.7%20L84.8%2091.6%20L88.1%2090.0%20L92.2%2087.5%20L97.4%2086.1%20L102.4%2087.1%20L106.1%2090.1%20L108.5%2093.8%20L110.2%2097.5%20L111.1%20101.3%20L110.7%20105.0Z%22%20fill%3D%22none%22%20stroke%3D%22%238C7A58%22%20stroke-width%3D%221.3%22/%3E%3Cpath%20d%3D%22M126.7%20105.0%20L126.6%20111.5%20L124.8%20117.9%20L122.5%20124.7%20L119.3%20132.1%20L113.3%20138.7%20L104.2%20141.4%20L94.3%20139.1%20L86.4%20133.9%20L80.3%20129.8%20L73.7%20128.5%20L65.0%20128.1%20L55.8%20125.7%20L49.5%20120.0%20L47.1%20112.6%20L47.5%20105.0%20L49.1%2097.8%20L52.4%2091.1%20L58.4%2085.9%20L66.3%2083.1%20L73.7%2081.5%20L79.7%2078.7%20L86.0%2073.5%20L94.6%2068.2%20L104.8%2067.0%20L113.3%2071.3%20L118.0%2079.1%20L119.9%2086.9%20L121.8%2093.2%20L124.6%2098.9%20L126.7%20105.0Z%22%20fill%3D%22none%22%20stroke%3D%22%238C7A58%22%20stroke-width%3D%220.78%22/%3E%3Cpath%20d%3D%22M149.2%20105.0%20L151.2%20115.8%20L147.3%20126.3%20L140.3%20135.5%20L131.8%20143.7%20L121.0%20149.8%20L108.1%20151.5%20L95.5%20148.5%20L85.1%20143.9%20L75.6%20142.0%20L63.4%20143.4%20L48.2%20143.7%20L34.4%20138.7%20L27.6%20128.1%20L29.0%20115.8%20L34.0%20105.0%20L38.5%2095.9%20L42.1%2087.2%20L47.1%2079.0%20L54.7%2072.3%20L63.4%2066.6%20L72.5%2060.2%20L83.4%2053.0%20L97.1%2048.4%20L111.2%2050.7%20L121.0%2060.2%20L125.2%2072.4%20L127.6%2082.3%20L132.9%2089.1%20L141.6%2095.9%20L149.2%20105.0Z%22%20fill%3D%22none%22%20stroke%3D%22%238C7A58%22%20stroke-width%3D%221.3%22/%3E%3Cpath%20d%3D%22M260.0%20225.0%20L259.9%20228.5%20L259.0%20232.0%20L257.7%20235.7%20L256.0%20239.8%20L252.7%20243.4%20L247.8%20244.9%20L242.3%20243.6%20L238.0%20240.8%20L234.7%20238.5%20L231.1%20237.8%20L226.4%20237.6%20L221.4%20236.3%20L217.9%20233.2%20L216.6%20229.1%20L216.8%20225.0%20L217.7%20221.0%20L219.5%20217.4%20L222.8%20214.6%20L227.1%20213.0%20L231.1%20212.2%20L234.4%20210.6%20L237.8%20207.8%20L242.5%20205.0%20L248.1%20204.3%20L252.7%20206.6%20L255.3%20210.9%20L256.3%20215.1%20L257.4%20218.6%20L258.9%20221.7%20L260.0%20225.0Z%22%20fill%3D%22none%22%20stroke%3D%22%238C7A58%22%20stroke-width%3D%221.3%22/%3E%3Cpath%20d%3D%22M280.7%20225.0%20L282.1%20232.4%20L279.4%20239.6%20L274.6%20245.9%20L268.7%20251.6%20L261.3%20255.8%20L252.5%20257.0%20L243.8%20254.9%20L236.6%20251.8%20L230.1%20250.5%20L221.7%20251.4%20L211.2%20251.6%20L201.7%20248.2%20L197.1%20240.9%20L198.0%20232.4%20L201.5%20225.0%20L204.6%20218.7%20L207.0%20212.8%20L210.5%20207.2%20L215.7%20202.5%20L221.7%20198.6%20L228.0%20194.2%20L235.5%20189.3%20L244.9%20186.1%20L254.5%20187.7%20L261.3%20194.2%20L264.2%20202.6%20L265.8%20209.4%20L269.5%20214.1%20L275.5%20218.7%20L280.7%20225.0Z%22%20fill%3D%22none%22%20stroke%3D%22%238C7A58%22%20stroke-width%3D%220.78%22/%3E%3Cpath%20d%3D%22M307.3%20225.0%20L306.6%20236.8%20L298.0%20246.5%20L286.9%20253.4%20L276.7%20258.9%20L267.0%20263.9%20L256.4%20267.2%20L245.4%20267.8%20L234.7%20267.4%20L223.2%20268.1%20L209.4%20269.2%20L194.5%20267.1%20L183.7%20259.1%20L181.5%20246.7%20L186.4%20234.5%20L192.1%20225.0%20L193.9%20216.8%20L192.8%20207.5%20L193.7%20197.0%20L199.6%20187.6%20L209.4%20180.8%20L220.8%20175.9%20L233.4%20172.3%20L246.7%20171.9%20L258.8%20176.8%20L267.0%20186.1%20L271.6%20195.8%20L276.9%20202.7%20L286.7%20207.7%20L299.1%20214.5%20L307.3%20225.0Z%22%20fill%3D%22none%22%20stroke%3D%22%238C7A58%22%20stroke-width%3D%221.3%22/%3E%3Cpath%20d%3D%22M52.2%20270.0%20L52.9%20274.1%20L51.5%20278.0%20L48.9%20281.4%20L45.7%20284.5%20L41.6%20286.8%20L36.8%20287.4%20L32.1%20286.3%20L28.2%20284.6%20L24.6%20283.9%20L20.0%20284.4%20L14.3%20284.5%20L9.1%20282.6%20L6.6%20278.7%20L7.1%20274.1%20L9.0%20270.0%20L10.7%20266.6%20L12.0%20263.3%20L13.9%20260.3%20L16.8%20257.7%20L20.0%20255.6%20L23.5%20253.2%20L27.5%20250.5%20L32.7%20248.8%20L37.9%20249.7%20L41.6%20253.2%20L43.2%20257.8%20L44.1%20261.5%20L46.1%20264.0%20L49.4%20266.6%20L52.2%20270.0Z%22%20fill%3D%22none%22%20stroke%3D%22%238C7A58%22%20stroke-width%3D%221.3%22/%3E%3Cpath%20d%3D%22M76.3%20270.0%20L75.8%20278.1%20L69.9%20284.8%20L62.3%20289.5%20L55.2%20293.3%20L48.5%20296.8%20L41.3%20299.0%20L33.7%20299.4%20L26.3%20299.1%20L18.5%20299.6%20L8.9%20300.4%20L-1.3%20299.0%20L-8.7%20293.4%20L-10.2%20284.9%20L-6.9%20276.5%20L-2.9%20270.0%20L-1.7%20264.4%20L-2.5%20258.0%20L-1.8%20250.7%20L2.2%20244.3%20L8.9%20239.6%20L16.8%20236.2%20L25.4%20233.8%20L34.6%20233.5%20L42.9%20236.8%20L48.5%20243.2%20L51.7%20249.9%20L55.4%20254.6%20L62.1%20258.1%20L70.6%20262.8%20L76.3%20270.0Z%22%20fill%3D%22none%22%20stroke%3D%22%238C7A58%22%20stroke-width%3D%220.78%22/%3E%3Cpath%20d%3D%22M100.2%20270.0%20L94.4%20281.4%20L82.1%20289.3%20L70.2%20294.4%20L62.1%20299.7%20L55.5%20306.9%20L47.1%20314.0%20L36.1%20318.2%20L23.8%20319.2%20L11.1%20318.5%20L-2.1%20316.3%20L-14.0%20310.7%20L-21.0%20300.9%20L-21.0%20288.9%20L-16.9%20278.3%20L-15.0%20270.0%20L-18.3%20261.4%20L-23.1%20250.3%20L-23.0%20237.9%20L-15.0%20228.3%20L-2.1%20223.7%20L11.5%20222.6%20L24.0%20222.7%20L35.8%20223.8%20L46.7%20227.2%20L55.5%20233.1%20L63.1%20239.4%20L72.2%20244.5%20L84.3%20249.9%20L95.8%20258.3%20L100.2%20270.0Z%22%20fill%3D%22none%22%20stroke%3D%22%238C7A58%22%20stroke-width%3D%221.3%22/%3E%3Cpath%20d%3D%22M20%20240%20C90%20200%20150%20270%20260%20210%22%20fill%3D%22none%22%20stroke%3D%22%23C2412A%22%20stroke-width%3D%221.8%22%20stroke-dasharray%3D%221%207%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M250%2050%20h12%20M256%2044%20v12%22%20stroke%3D%22%23C2412A%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M40%2060%20q7%20-6%2014%200%20t14%200%22%20fill%3D%22none%22%20stroke%3D%22%236F96A6%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M180%20140%20q7%20-6%2014%200%20t14%200%22%20fill%3D%22none%22%20stroke%3D%22%236F96A6%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M100%20280%20q7%20-6%2014%200%20t14%200%22%20fill%3D%22none%22%20stroke%3D%22%236F96A6%22%20stroke-width%3D%221.2%22/%3E%3C/svg%3E") 0 0 / 300px 300px; opacity: .9; transform: translate(calc(var(--dx, 0) * -44px), calc(var(--dy, 0) * -44px)); transition: transform .45s cubic-bezier(.2,.8,.2,1);
  -webkit-mask-image: radial-gradient(circle 220px at calc(var(--mx, -999px) + 60px) calc(var(--my, -999px) + 60px), #000 20%, transparent 100%); mask-image: radial-gradient(circle 220px at calc(var(--mx, -999px) + 60px) calc(var(--my, -999px) + 60px), #000 20%, transparent 100%); }
@keyframes cm-drift { to { background-position: 520px 260px; } }
.console-hero { background: transparent !important; border-bottom-color: transparent; }
.console-hero, .console-body { position: relative; z-index: 1; }
.console-body .panel { box-shadow: 0 1px 0 var(--line-d), 0 18px 40px -28px rgba(29,43,43,.35); }
@media (prefers-reduced-motion: reduce) { .cm-far { animation: none; } .cm-near { display: none; } }

/* ---------- Console : questions claires ---------- */
.q { display: grid; gap: 8px; padding: 18px 20px; border: 1px solid var(--line-d); border-radius: 3px; background: var(--ink-2); }
.q + .q { margin-top: 0; }
.q-t { margin: 0; display: flex; align-items: center; gap: 12px; font: 500 1.2rem/1.25 var(--display); color: var(--fg); }
.q-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--edge); color: var(--ink); display: grid; place-items: center; font: 500 .75rem var(--mono); }
.q-h { margin: 0 0 4px 38px; color: var(--fg-2); font-size: .9375rem; line-height: 1.5; max-width: 64ch; }
.q-h b { color: var(--fg); font-weight: 600; }
.q-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-left: 38px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { font: 500 .875rem var(--body); color: var(--fg-2); background: var(--ink); border: 1px solid var(--line-d); border-radius: 99px; padding: 8px 14px; min-height: 38px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.chips button:hover { border-color: var(--edge); color: var(--fg); }
.chips button.on { background: var(--edge); border-color: var(--edge); color: var(--ink); }
.q-own { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-d); border-radius: 3px; background: var(--ink); padding: 0 12px; min-height: 40px; }
.q-own.wide { flex: 1; min-width: 220px; display: flex; }
.q > .q-own.wide { margin-left: 38px; }
.q-own input { border: 0 !important; background: transparent !important; padding: 8px 0 !important; min-height: 0 !important; width: 70px; font: 500 .9375rem var(--mono); color: var(--fg); box-shadow: none !important; }
.q-own.wide input { width: 100%; flex: 1; }
.q-own input:focus { outline: none; }
.q-own:focus-within { border-color: var(--vermilion); }
.q-own span { font: 500 var(--fs-label) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.q-eq { margin-left: 38px; font: 500 .8125rem var(--mono); color: #2F6B4A; }
.q-more summary { cursor: pointer; font: 500 1rem var(--display); color: var(--fg-2); list-style: none; }
.q-more summary::before { content: "+ "; color: var(--vermilion); }
.q-more[open] summary::before { content: "− "; }
.q-more .q-h, .q-more .q-own, .q-more .q-eq { margin-left: 0 !important; margin-top: 8px; }
.q-who { margin-left: 38px; }
#n-op-row { margin-top: 6px; }
#n-op-row[hidden] { display: none; }
.q-sum { margin-top: 18px; padding: 22px 24px; border: 1px solid var(--edge); border-left: 0; border-radius: 3px; background: color-mix(in srgb, var(--vermilion) 5%, var(--ink-2)); position: relative; }
.q-sum::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--vermilion); }
.q-sum[hidden] { display: none; }
.q-sum-k { margin: 0 0 12px; font: 500 var(--fs-label) var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--vermilion); }
.q-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.q-steps li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; color: var(--fg-2); font-size: .9375rem; line-height: 1.5; }
.q-steps b { font: 500 .8125rem var(--mono); color: var(--fg); }
.q-steps em { font-style: normal; color: var(--fg); font-weight: 600; }
.q-line { display: flex; margin-top: 16px; height: 26px; border-radius: 2px; overflow: hidden; font: 500 var(--fs-tag) var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.q-line span { display: grid; place-items: center; transition: flex .4s cubic-bezier(.2,.8,.2,1); white-space: nowrap; overflow: hidden; }
.q-line span:first-child { background: var(--edge); color: var(--ink); }
.q-line span:last-child { background: var(--vermilion); color: #FFF8EC; }
@media (max-width: 760px) { .q-h, .q-row, .q-eq, .q-who, .q > .q-own.wide { margin-left: 0; } .q-steps li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .q { padding: 16px 14px; } }
.q-own input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--ink) inset !important; -webkit-text-fill-color: var(--fg); }

/* ---------- Accueil : la traversée en trois stations ---------- */
.cx { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.cx-intro { position: sticky; top: 140px; display: grid; gap: 26px; justify-items: start; }
.cx-intro .sect-head { margin: 0; }
.cx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-d); width: 100%; }
.cx-facts div { padding: 14px 12px 0 0; }
.cx-facts div + div { padding-left: 14px; border-left: 1px solid var(--line-d); }
.cx-facts dt { font: 500 var(--fs-label) var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-3); }
.cx-facts dd { margin: 6px 0 0; font: 500 2.6rem/1 var(--display); color: var(--vermilion); }
.cx-route { list-style: none; margin: 0; padding: 0 0 0 56px; position: relative; display: grid; gap: 28px; }
.cx-track { position: absolute; left: 0; top: 0; bottom: 0; width: 40px; }
.cx-track::before { content: ""; position: absolute; left: 19px; top: 30px; bottom: 30px; border-left: 2px dashed color-mix(in srgb, var(--vermilion) 55%, transparent); }
.cx-ink { position: absolute; left: 18px; width: 4px; background: var(--vermilion); border-radius: 2px; }
.cx-fox { position: absolute; left: -10px; top: 0; width: 60px; z-index: 2; pointer-events: none; transition: transform .15s linear; }
.cx-fox svg { width: 100%; height: auto; display: block; }
.cx-route:not(.walking) .cx-fox .animal * { animation-play-state: paused; }
.cx-st { position: relative; }
.cx-pin { position: absolute; left: -46px; top: 40px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 2px solid var(--edge); transition: background .3s, transform .3s; }
.cx-st.lit .cx-pin { background: var(--vermilion); transform: scale(1.15); }
.cx-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px 26px; border: 1px solid var(--line-d); border-radius: 3px; background: var(--ink-2); opacity: .55; transform: translateX(10px); transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s, box-shadow .5s; }
.cx-st.lit .cx-card { opacity: 1; transform: none; border-color: var(--edge); box-shadow: 0 18px 40px -30px rgba(29,43,43,.45); }
.cx-art { width: 120px; height: 110px; overflow: visible; }
.cx-s { fill: none; stroke: var(--edge); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cx-v { stroke: var(--vermilion); }
.cx-coin { fill: #E9C46A; stroke: var(--edge); stroke-width: 1.6; }
.cx-st.lit .cx-coins circle { animation: cx-drop 2.4s cubic-bezier(.5,0,.8,.4) infinite; }
.cx-st.lit .cx-coins circle:nth-child(2) { animation-delay: .4s; } .cx-st.lit .cx-coins circle:nth-child(3) { animation-delay: .8s; }
@keyframes cx-drop { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(26px); opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } }
.cx-beam { transform-box: view-box; transform-origin: 60px 40px; }
.cx-st.lit .cx-beam { animation: ri-balance 3.6s ease-in-out infinite; }
.cx-meadow { fill: #D8E6C6; }
.cx-star { fill: color-mix(in srgb, var(--vermilion) 25%, transparent); stroke: var(--vermilion); transform-box: fill-box; transform-origin: center; }
.cx-st.lit .cx-star { animation: ri-spin 5s ease-in-out infinite; }
.cx-meta { margin: 0 0 6px; font: 500 var(--fs-label) var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-3); }
.cx-meta b { color: var(--vermilion); font-weight: 500; }
.cx-card h3 { font: 500 var(--fs-item)/1.2 var(--display); margin: 0 0 8px; }
.cx-card p:not(.cx-meta) { margin: 0; color: var(--fg-2); }
@media (max-width: 960px) {
  .cx { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cx-intro { position: static; }
  .cx-route { padding-left: 46px; }
  .cx-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; }
  .cx-art { width: 84px; height: 76px; }
  .cx-pin { left: -38px; }
  .cx-fox { left: -14px; width: 50px; }
}
@media (prefers-reduced-motion: reduce) { .cx-card { opacity: 1; transform: none; } .cx * { animation: none !important; } }

/* ---------- How it works : l'almanach du voyageur ---------- */
.alm { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: start; }
.alm.reveal { transform: none; }
.alm-tags { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alm-tags button { position: relative; width: 100%; display: grid; grid-template-columns: 46px minmax(0, 1fr) 14px; align-items: center; gap: 14px; padding: 10px 16px 10px 12px; text-align: left; cursor: pointer;
  background: var(--ink-2); border: 1px solid var(--line-d); border-radius: 3px 14px 14px 3px; color: var(--fg-2);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s, color .25s, background .25s; }
.alm-tags button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); border-radius: 3px 0 0 3px; opacity: .5; transition: opacity .25s, width .25s; }
.alm-tags button:hover { transform: translateX(6px); color: var(--fg); }
.alm-tags button[aria-selected="true"] { transform: translateX(14px); color: var(--fg); border-color: var(--edge); background: #FBF7EE; }
.alm-tags button[aria-selected="true"]::before { opacity: 1; width: 6px; }
.alm-a { width: 46px; height: 36px; }
.alm-a svg { width: 100%; height: 100%; display: block; }
.alm-tags button:not([aria-selected="true"]):not(:hover) .alm-a .animal * { animation-play-state: paused; }
.alm-q { font: 500 1.0625rem/1.3 var(--display); }
.alm-hole { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-d); background: var(--ink); justify-self: end; }
.alm-tags button[aria-selected="true"] .alm-hole { border-color: var(--edge); }
.alm-page { position: sticky; top: 130px; min-height: 340px; padding: 34px 36px 40px; background: #FBF7EE; border: 1px solid #CDBB94; border-radius: 3px;
  background-image: linear-gradient(90deg, transparent 54px, rgba(194,65,42,.28) 54px 55px, transparent 55px), repeating-linear-gradient(transparent 0 31px, rgba(169,148,107,.2) 31px 32px);
  box-shadow: 0 1px 0 #E4D6B6, 0 2px 0 #FBF7EE, 0 3px 0 #E4D6B6, 0 22px 40px -30px rgba(29,43,43,.5); padding-left: 76px; transform-origin: 30% 0; }
.alm-k { margin: 0 0 14px; display: flex; gap: 12px; flex-wrap: wrap; font: 500 var(--fs-label) var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-3); }
.alm-n { color: var(--c, var(--vermilion)); }
.alm-title { font: 500 var(--fs-h3)/1.15 var(--display); margin: 0 0 16px; }
.alm-text { font: italic 400 1.25rem/1.6 var(--display); color: var(--fg); margin: 0; min-height: 6.4em; }
.alm-text::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--vermilion); animation: alm-caret .8s steps(1) infinite; }
.alm-page.stamped .alm-text::after { display: none; }
@keyframes alm-caret { 50% { opacity: 0; } }
.alm-stamp { position: absolute; right: 26px; bottom: 22px; font: 700 var(--fs-tag) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #2F6B4A; border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px; padding: 5px 10px; transform: rotate(-7deg) scale(1.6); opacity: 0; transition: transform .35s cubic-bezier(.2,1.4,.4,1), opacity .2s; }
.alm-page.enforced.stamped .alm-stamp { opacity: 1; transform: rotate(-7deg); }
@media (max-width: 900px) {
  .alm { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .alm-page { position: static; order: -1; padding: 24px 20px 52px 58px; background-image: linear-gradient(90deg, transparent 40px, rgba(194,65,42,.28) 40px 41px, transparent 41px), repeating-linear-gradient(transparent 0 31px, rgba(169,148,107,.2) 31px 32px); }
  .alm-tags button[aria-selected="true"] { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) { .alm-text::after { display: none; } .alm-stamp { transition: none; } }
.alm-n { color: color-mix(in srgb, var(--c, var(--vermilion)) 60%, var(--edge)); }
@media (max-width: 900px) { .alm-tags button[aria-selected="true"], .alm-tags button:hover { transform: none; } }
/* Démarche des animaux entiers : rebond à chaque pas, tangage et léger tassement à l'appui. */
.animal .a-body { animation: a-gait-y .5s cubic-bezier(.45,0,.55,1) infinite; }
.animal .a-pic { transform-box: view-box; animation: a-gait-r 1s ease-in-out infinite; }
@keyframes a-gait-y { 0%, 100% { transform: translateY(0) scaleY(.985); } 50% { transform: translateY(-3.5px) scaleY(1.01); } }
@keyframes a-gait-r { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.run .animal .a-body { animation-duration: .3s; } .run .animal .a-pic { animation-duration: .6s; }
.a-giraffe .a-body { animation-duration: .7s; } .a-giraffe .a-pic { animation-duration: 1.4s; }
.a-hippo .a-body { animation-duration: .62s; }
.a-owl .a-body, .a-duck .a-body { animation: a-fly-y 1.2s ease-in-out infinite; }
.a-owl .a-pic, .a-duck .a-pic { animation: a-glide 1.2s ease-in-out infinite alternate; }
@keyframes a-fly-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Logo : boussole illustrée (image), légère oscillation, tour de cadran au survol */
.brand-mark { width: 40px; height: 40px; flex: none; display: block; object-fit: contain; transform-origin: 50% 50%;
  animation: bm-sway 6s ease-in-out infinite; filter: drop-shadow(0 1px 1.5px rgba(40, 24, 10, .25)); }
.brand:hover .brand-mark { animation: bm-spin 1.1s cubic-bezier(.25, 1.3, .4, 1); }
.foot .brand-mark, footer .brand-mark { width: 34px; height: 34px; }
@media (prefers-reduced-motion: reduce) { .brand-mark { animation: none; } }

/* Intro : mini-film plein écran, titre de conte sur la dernière scène */
@font-face { font-family: "Luckiest Guy"; src: url("fonts/luckiest-guy-latin.woff2") format("woff2"); font-display: block; }
#intro { background: #1A120C; }
#intro .intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#intro .intro-shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(20, 10, 4, .45)),
              linear-gradient(180deg, rgba(20, 10, 4, .25), transparent 30%, transparent 75%, rgba(20, 10, 4, .3)); }
.intro-title { position: absolute; left: 50%; top: 46%; z-index: 20; display: grid; justify-items: center; gap: clamp(4px, 1vh, 10px);
  transform: translate(-50%, -50%) scale(.86); opacity: 0; text-align: center; width: max-content; max-width: calc(100% - 32px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, 1.4, .4, 1); }
.intro-title.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.intro-title img { width: clamp(76px, 13vmin, 132px); height: auto; filter: drop-shadow(0 6px 10px rgba(30, 12, 2, .45));
  animation: intro-sway 3.2s ease-in-out infinite; }
.intro-title h1 { margin: 0; font: 400 clamp(3rem, 11vw, 8.5rem)/.95 "Luckiest Guy", var(--display); letter-spacing: .03em; text-transform: uppercase;
  color: #FFF1C4; background: linear-gradient(180deg, #FFFDF4 0%, #FFE6A0 55%, #FFC24A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: clamp(4px, .7vw, 8px) #4A2410; paint-order: stroke fill;
  filter: drop-shadow(0 clamp(4px, .7vw, 9px) 0 #6B3014) drop-shadow(0 10px 14px rgba(30, 12, 2, .5)); }
.intro-title p { margin: clamp(2px, .8vh, 8px) 0 0; padding: .5em 1.3em .42em; font: 400 clamp(.95rem, 2.2vw, 1.6rem)/1 "Luckiest Guy", var(--display); letter-spacing: .08em; text-transform: uppercase;
  color: #FFF6E2; background: linear-gradient(180deg, #F0562B, #C73A18); border: 3px solid #5A1A08; border-radius: 6px;
  box-shadow: 0 5px 0 #7A2410, 0 10px 18px rgba(30, 12, 2, .4); }
@keyframes intro-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
#intro .intro-skip { z-index: 30; background: rgba(255, 248, 232, .92); color: #3A2414; border: 2px solid #3A2414; box-shadow: 0 3px 0 #3A2414; }

/* Lancements en pause */
.btn-paused { background: var(--paper-2, #EEE8DA); color: var(--fg-3, #6b6458); border: 1.5px dashed currentColor; cursor: not-allowed; box-shadow: none; }
.btn-paused:hover { transform: none; }
.paused-panel { display: grid; gap: 12px; max-width: 640px; }
.paused-panel h2 { margin: 0; }
.paused-panel .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }