/* Einrosen · application de démo — jetons du design system Einrosen + cadre de téléphone + barre « où est l'argent » */

:root {
  --accent: #ff5a1f; --accent-press: #e84a12; --accent-ink: #c43d0b; --accent-soft: #fff0ea; --on-accent: #0b0b0c;
  --ink: #0b0b0c; --ink-2: #3a3a3e; --muted: #6b6b70; --disabled: #a9a9ad; --on-ink: #ffffff;
  --surface: #ffffff; --surface-2: #f4f4f2; --surface-3: #eaeae7; --line: #e7e7e4; --line-strong: #8c8c90; --focus-ring: #0b0b0c;
  --success: #137a43; --success-soft: #e6f4ec; --pending: #9a4a03; --pending-soft: #fdf1dc; --error: #c4281c; --error-soft: #fdecea;
  --font-sans: "Sora", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 11, 12, 0.04), 0 2px 8px rgba(11, 11, 12, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 11, 12, 0.05), 0 12px 32px rgba(11, 11, 12, 0.06);
  --button-lg: 56px; --button-md: 48px; --button-sm: 36px; --icon-round: 44px; --tabbar: 64px;
  --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 480ms; --dur-loop: 1600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.65, 0, 0.35, 1); --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);
}

a.er-btn, a.er-tab { text-decoration: none; }

/* ---------- Le téléphone ---------- */
.ev-device { width: 430px; height: 884px; box-sizing: border-box; padding: 20px; background: #0b0b0c; border-radius: 68px; }
.ev-screen { position: relative; width: 390px; height: 844px; border-radius: 48px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.ev-screen *, .ev-screen *::before, .ev-screen *::after { box-sizing: border-box; }
.ev-island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 122px; height: 35px; border-radius: 20px; background: #0b0b0c; z-index: 5; }
.ev-homebar { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: #0b0b0c; z-index: 5; }
.ev-top { height: 54px; flex: none; }
.ev-demo { display: flex; justify-content: center; padding: 0 20px 6px; flex: none; }
.ev-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 20px; display: flex; flex-direction: column; }
.ev-body > * { flex-shrink: 0; }
.ev-foot { flex: none; padding: 12px 20px 30px; display: grid; gap: 10px; }

/* ---------- Textes ---------- */
.ev-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; margin: 4px 0 12px; }
.ev-back { width: 44px; height: 44px; border-radius: 999px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink); text-decoration: none; }
.ev-back .er-icon { width: 20px; height: 20px; }
.ev-title { font: 700 30px/36px var(--font-sans); letter-spacing: -0.03em; margin: 0; }
.ev-section { font: 650 20px/26px var(--font-sans); letter-spacing: -0.02em; margin: 0; }
.ev-caption { font: 500 13px/18px var(--font-sans); color: var(--muted); margin: 0; }
.ev-mono { font: 450 12px/18px var(--font-mono); color: var(--muted); }
.ev-hero { font: 700 44px/48px var(--font-sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; margin: 0; }
.ev-num { font-variant-numeric: tabular-nums; }

/* le point orange = l'argent */
.ev-money { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.16), 0 0 10px rgba(255, 90, 31, 0.45); }
.ev-where { display: flex; align-items: center; gap: 8px; font: 500 13px/18px var(--font-sans); color: var(--ink-2); }

/* ---------- Blocs ---------- */
.ev-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px; }
.ev-rows { margin: 0; padding: 0; }
.ev-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.ev-row:last-child { border-bottom: 0; }
.ev-row dt { font: 500 14px/20px var(--font-sans); color: var(--muted); }
.ev-row dd { margin: 0; font: 600 15px/20px var(--font-sans); letter-spacing: -0.01em; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.ev-avatar { width: 44px; height: 44px; flex: none; border-radius: 999px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font: 600 15px/1 var(--font-sans); }
.ev-alert { border-radius: var(--radius-md); padding: 16px; display: flex; gap: 12px; align-items: flex-start; }
.ev-alert--error { background: var(--error-soft); }
.ev-alert--pending { background: var(--pending-soft); }
.ev-alert__icon { width: 36px; height: 36px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--surface); }
.ev-alert__icon .er-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.ev-alert__title { font: 600 16px/22px var(--font-sans); letter-spacing: -0.01em; margin: 0; }
.ev-alert__text { font: 400 14px/20px var(--font-sans); color: var(--ink-2); margin: 4px 0 0; }

/* ---------- La barre « où est l'argent » ---------- */
.ev-track { position: relative; height: 40px; margin: 0 22px; }
.ev-track__line { position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 2px; background: var(--line); }
.ev-track__fill { position: absolute; left: 0; top: 9px; height: 2px; border-radius: 2px; background: var(--accent); transition: width 800ms var(--ease-out); }
.ev-st { position: absolute; top: 5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); }
.ev-st.is-on { background: var(--ink); box-shadow: none; }
.ev-st__label { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; gap: 3px; font: 600 11px/14px var(--font-sans); letter-spacing: 0.01em; color: var(--muted); }
.ev-st.is-on .ev-st__label { color: var(--ink); }
.ev-st__label .er-icon { width: 12px; height: 12px; stroke-width: 2.2; }
.ev-coin { position: absolute; top: 3px; width: 14px; height: 14px; margin-left: -7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.18), 0 0 14px rgba(255, 90, 31, 0.65); transition: left 800ms var(--ease-out); z-index: 2; }
.ev-coin--test { top: 6px; width: 8px; height: 8px; margin-left: -4px; box-shadow: 0 0 8px rgba(255, 90, 31, 0.7); transition: left 900ms var(--ease-soft), opacity 300ms var(--ease-out); z-index: 1; }

/* ---------- Petites entrées ---------- */
.ev-in { animation: ev-in 480ms var(--ease-out) both; }
@keyframes ev-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* étapes un peu plus serrées dans le téléphone */
.ev-screen .er-step { padding-bottom: 14px; }

/* chercheur de liquidité : les 3 sources apparaissent, la meilleure s'allume en orange */
.ev-liq { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ev-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font: 600 11px/1 var(--font-sans); letter-spacing: 0.01em; opacity: 0; transform: translateY(4px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out), background-color 480ms var(--ease-out), color 480ms var(--ease-out), box-shadow 480ms var(--ease-out); }
.ev-chip.is-in { opacity: 1; transform: none; }
.ev-chip.is-best { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 12px rgba(255, 90, 31, 0.35); }

/* écran d'accueil de l'iPhone + icône Einrosen (logo orange sur anthracite) */
.ev-app { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 500 11px/14px var(--font-sans); color: #3a3a3e; }
.ev-app__icon { width: 60px; height: 60px; border-radius: 14px; background: #ffffff; display: grid; place-items: center; color: #8c8c90; }
.ev-app__icon .er-icon { width: 28px; height: 28px; stroke-width: 1.6; }
.ev-appicon { display: grid; place-items: center; flex: none; background: #1f1f22; box-shadow: 0 1px 2px rgba(11, 11, 12, 0.18); }
button.ev-app { width: auto; text-align: center; color: #0b0b0c; font-weight: 600; }
.ev-screen .er-step:last-child { padding-bottom: 0; }
.ev-screen button.er-tab, .ev-screen button.ev-back { border: 0; }
.ev-tap { appearance: none; border: 0; background: none; padding: 0; margin: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; }

/* ---------- Animation du logo (validée) — version téléphone ---------- */
@keyframes lx-to-orange{to{stroke:#ff5a1f}}
@keyframes lx-to-orange-2{to{stroke:#ff5a1f}}
@keyframes lx-to-ink{to{stroke:#0b0b0c}}
@keyframes lx-to-ink-2{to{stroke:#0b0b0c}}
@keyframes lx-to-ink-fill{to{fill:#0b0b0c}}
@keyframes lx-to-ink-fill-2{to{fill:#0b0b0c}}
@keyframes lx-to-orange-fill{to{fill:#ff5a1f}}
@keyframes lx-glow-pass{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes lx-glow-pass-2{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes lx-c-in{to{opacity:1;transform:scale(1)}}
@keyframes lx-slow-fade{to{opacity:1}}
@keyframes lx-draw{to{stroke-dashoffset:0}}
@keyframes lx-pop{to{transform:scale(1)}}
@keyframes lx-flash{0%{opacity:0;transform:scale(0.4)}18%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(2.4)}}
@keyframes lx-flash-2{0%{opacity:0;transform:scale(0.4)}18%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(2.4)}}
@keyframes lx-ring-glow{0%{opacity:0}13%{opacity:1}52%{opacity:0.4}100%{opacity:0}}
@keyframes lx-shrink{to{width:0.614em}}
@keyframes lx-close-left{to{right:calc(100% + 0.029em)}}
@keyframes lx-close-right{to{left:calc(100% - 0.016em)}}
@keyframes lx-cta{from{opacity:0;transform:translateY(10px);visibility:visible}to{opacity:1;transform:none;visibility:visible}}
/* plus fluide et un peu plus rapide, et synchronisé :
   point 0,2 s → petit rond 0,42 s → rond moyen 0,63 s → grand rond 0,84 s (« Einr » apparaît EN MÊME TEMPS)
   retour : rond moyen 1,48 s → petit rond 1,69 s → point 1,9 s (« sen » apparaît EN MÊME TEMPS) */
.lx-ring{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(0.94);stroke:#ff5a1f;animation:lx-c-in 220ms cubic-bezier(0.22,1,0.36,1) 840ms forwards,lx-to-ink-2 600ms ease-in-out 1480ms forwards}
.lx-dot{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:lx-pop 340ms cubic-bezier(0.34,1.3,0.64,1) 200ms forwards,lx-to-ink-fill 600ms ease-in-out 460ms forwards,lx-to-orange-fill 200ms ease-out 1900ms forwards,lx-to-ink-fill-2 800ms ease-in-out 2400ms forwards}
.lx-flash{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(0.4);animation:lx-flash 900ms cubic-bezier(0.22,1,0.36,1) 200ms forwards,lx-flash-2 900ms cubic-bezier(0.22,1,0.36,1) 1900ms forwards}
.lx-halo{opacity:0;animation:lx-glow-pass 900ms ease-out 200ms forwards,lx-glow-pass-2 1300ms ease-out 1900ms forwards}
.lx-c2{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(0.9);animation:lx-c-in 220ms cubic-bezier(0.22,1,0.36,1) 420ms forwards,lx-to-ink 600ms ease-in-out 640ms forwards,lx-to-orange-2 200ms ease-out 1690ms forwards,lx-to-ink-2 600ms ease-in-out 1900ms forwards}
.lx-c2-glow{opacity:0;animation:lx-glow-pass 900ms ease-out 420ms forwards,lx-glow-pass-2 900ms ease-out 1690ms forwards}
.lx-c3{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(0.92);animation:lx-c-in 220ms cubic-bezier(0.22,1,0.36,1) 630ms forwards,lx-to-ink 600ms ease-in-out 850ms forwards,lx-to-orange-2 200ms ease-out 1480ms forwards,lx-to-ink-2 600ms ease-in-out 1690ms forwards}
.lx-c3-glow{opacity:0;animation:lx-glow-pass 900ms ease-out 630ms forwards,lx-glow-pass-2 900ms ease-out 1480ms forwards}
.lx-ring-glow{opacity:0;animation:lx-ring-glow 1300ms ease-out 840ms forwards}
/* « Einr » et « sen » apparaissent en orange lumineux, puis redeviennent noirs avec le reste du logo */
@keyframes lx-txt-ink{to{color:#0b0b0c;text-shadow:0 0 0 rgba(255,90,31,0)}}
.lx-ein{opacity:0;color:#ff5a1f;text-shadow:0 0 0.3em rgba(255,90,31,0.55);animation:lx-slow-fade 1200ms ease-out 1010ms forwards,lx-txt-ink 600ms ease-in-out 1480ms forwards}
.lx-sen{opacity:0;color:#ff5a1f;text-shadow:0 0 0.3em rgba(255,90,31,0.55);animation:lx-slow-fade 1200ms ease-out 1900ms forwards,lx-txt-ink 800ms ease-in-out 2400ms forwards}
.lx-portal{width:140px;animation:lx-shrink 500ms cubic-bezier(0.65,0,0.35,1) 3300ms forwards}
.lx-left{right:calc(100% + 8px);animation:lx-close-left 500ms cubic-bezier(0.65,0,0.35,1) 3300ms forwards}
.lx-right{left:calc(100% + 8px);animation:lx-close-right 500ms cubic-bezier(0.65,0,0.35,1) 3300ms forwards}
.lx-cta{opacity:0;visibility:hidden;animation:lx-cta 600ms cubic-bezier(0.22,1,0.36,1) 4000ms forwards}

/* ═════════════ V3 · ANDROID ═════════════ */
.a3-device { width: 430px; height: 884px; box-sizing: border-box; padding: 12px; background: #1f1f22; border-radius: 46px; box-shadow: inset 0 0 0 2px #3a3a3e; }
.a3-screen { position: relative; width: 406px; height: 860px; border-radius: 36px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.a3-screen *, .a3-screen *::before, .a3-screen *::after { box-sizing: border-box; }
.a3-cam { position: absolute; top: 12px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 999px; background: #0b0b0c; box-shadow: 0 0 0 2px #2a2a2e; z-index: 6; }
.a3-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.a3-top { height: 34px; flex: none; }
.a3-head { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 0 12px; }
.a3-head .ev-back { width: 40px; height: 40px; flex: none; }
.a3-head h1 { margin: 0; font: 700 24px/30px var(--font-sans); letter-spacing: -0.03em; }
.a3-sysnav { flex: none; height: 46px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-items: center; background: var(--surface); border-top: 1px solid var(--line); }
.a3-sysnav button { appearance: none; border: 0; background: none; width: 64px; height: 40px; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; border-radius: 999px; }
.a3-sysnav button:active { background: var(--surface-2); }
.a3-sysnav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a3-sysnav--dark { background: #1f1f22; border-top-color: #2a2a2e; }
.a3-sysnav--dark button { color: #d0d0d4; }
.a3-screen .er-tabbar { flex: none; }
.a3-screen .er-step { padding-bottom: 0; }
.a3-screen .er-step__title { font-size: 15px; line-height: 21px; }

/* bandeau « paiement en cours » de l'accueil */
.a3-banner { appearance: none; border: 0; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 16px; background: #0b0b0c; color: #ffffff; font: 600 14px/20px var(--font-sans); text-align: left; margin-bottom: 14px; }
.a3-banner__chev { margin-left: auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.a3-pulse { animation: a3-pulse 1.6s ease-in-out infinite; }
@keyframes a3-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* contacts récents */
.a3-contacts { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.a3-contact { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 60px; font: 500 12px/16px var(--font-sans); color: var(--ink-2); text-align: center; }
.a3-contact .ev-avatar { width: 52px; height: 52px; }
.a3-av-soft { background: var(--surface-2) !important; color: var(--ink) !important; }

/* recherche, formulaire */
.a3-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 16px; background: var(--surface-2); color: var(--muted); }
.a3-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px/1 var(--font-sans); color: var(--ink); }
.a3-field { display: grid; gap: 6px; }
.a3-field label, .a3-field .a3-label { font: 500 13px/18px var(--font-sans); color: var(--muted); }
.a3-input { height: 48px; width: 100%; border-radius: 14px; background: var(--surface-2); border: 0; outline: 0; padding: 0 14px; font: 500 16px/1 var(--font-sans); color: var(--ink); }
.a3-input:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.a3-readonly { height: 48px; display: flex; align-items: center; padding: 0 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 500 15px/1 var(--font-sans); color: var(--ink-2); }
.a3-row-btn { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit; }

/* choix du pays (indicatif téléphonique) */
.a3-country { appearance: none; border: 0; cursor: pointer; height: 48px; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px 0 8px; border-radius: 14px; background: var(--surface-2); font: 600 15px/1 var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.a3-country svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a3-flag { font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 22px; line-height: 1; flex: none; display: inline-block; width: 28px; text-align: center; }
.a3-iso { font: 600 11px/1 var(--font-sans); letter-spacing: 0.04em; color: var(--muted); margin-left: 4px; }
.a3-sheet-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 46px; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; }
.a3-sheet-bg { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(11, 11, 12, 0.35); cursor: pointer; }
.a3-sheet { position: relative; height: 80%; background: var(--surface); border-radius: 24px 24px 0 0; padding: 10px 16px 0 16px; display: flex; flex-direction: column; box-shadow: var(--shadow-md); animation: a3-up 280ms var(--ease-out) both; }
@keyframes a3-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.a3-sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); opacity: 0.5; margin: 0 auto 10px auto; flex: none; }
.a3-sheet__list { flex: 1; min-height: 0; overflow-y: auto; margin-top: 8px; padding-bottom: 16px; }
.a3-sheet__h { margin: 14px 4px 4px 4px; font: 600 11px/16px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.a3-crow { appearance: none; border: 0; background: none; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; font: 500 15px/20px var(--font-sans); color: var(--ink); }
.a3-crow:active { background: var(--surface-2); }
.a3-crow__name { flex: 1; min-width: 0; }
.a3-crow__code { font: 600 14px/1 var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.a3-crow svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--success); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* filtres, interrupteur */
.a3-filters { display: flex; gap: 8px; }
.a3-switch { appearance: none; border: 0; cursor: pointer; position: relative; width: 52px; height: 32px; flex: none; border-radius: 999px; background: #c9c9cd; transition: background-color var(--dur-fast) var(--ease-out); }
.a3-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 999px; background: #ffffff; box-shadow: 0 1px 3px rgba(11, 11, 12, 0.2); transition: transform var(--dur-base) var(--ease-out); }
.a3-switch[aria-checked="true"] { background: var(--ink); }
.a3-switch[aria-checked="true"]::after { transform: translateX(20px); }

/* suivi : la liste des étapes défile toute seule */
/* la liste prend toute la place jusqu'aux boutons du bas, se fait défiler à la main, et suit l'étape en cours */
.a3-window { position: relative; flex: 1 1 auto !important; min-height: 0; overflow-y: auto; margin-top: 14px; padding-right: 2px; overscroll-behavior: contain; }
.a3-screen .a3-window .er-step { padding-bottom: 14px; }
.a3-screen .a3-window .er-step:last-child { padding-bottom: 4px; }
.a3-liq { margin-top: 8px; display: grid; gap: 8px; }
.a3-net { display: flex; align-items: center; gap: 7px; font: 600 12px/16px var(--font-sans); color: var(--success); }
.a3-net i { width: 8px; height: 8px; border-radius: 999px; background: #1fa35a; box-shadow: 0 0 0 3px rgba(31, 163, 90, 0.18); animation: a3-pulse 1.4s ease-in-out infinite; }
.a3-rate { font: 500 12px/16px var(--font-mono); color: var(--ink-2); opacity: 0; transition: opacity 400ms var(--ease-out); }
.a3-rate.is-in { opacity: 1; }
.a3-choice { margin: 0; font: 600 12px/16px var(--font-sans); color: var(--accent-ink); }

/* contrôle biométrique : pendant la vérification, les anneaux sortent du trou (même logo, mêmes proportions) */
.a3-emerge { opacity: 0; transform-box: view-box; transform-origin: 232px 160px; animation: a3-emerge 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.a3-emerge--2 { animation-delay: -0.8s; }
.a3-emerge--3 { animation-delay: -1.6s; }
@keyframes a3-emerge { 0% { transform: scale(0.15); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* 11.2 · entrée dans Einrosen : page blanche, la lumière allume tout le logo (point → petit rond → rond moyen → grand rond), puis on entre */
@keyframes tr-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
/* 1 · la lumière allume tout (rapide)
   2 · les ronds se recentrent : le point revient au milieu, plus de décalage, tout devient bien droit
   3 · le trou de ver : chaque rond grandit à sa propre vitesse (le grand le plus vite), ils s'écartent les uns des autres
       comme si une profondeur se créait, et on traverse jusqu'au point, en fondu */
@keyframes tr-on { to { stroke: #ff5a1f; } }
@keyframes tr-on-f { to { fill: #ff5a1f; } }
@keyframes tr-glow { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 0.8; } }
@keyframes tr-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(7); } }
@keyframes tz-off { to { opacity: 0; } }
.tr-wrap { animation: tr-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both; }
/* 1, 2, 3 : chaque élément vient vers nous l'un après l'autre (grand rond, rond moyen, petit rond, puis le point).
   En venant, chacun se recentre sur le milieu de l'écran, garde son trait d'origine (pas de gras) et s'efface. */
@keyframes tz-go { 0% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: 0; transform: translateX(var(--dx)) scale(var(--s)); } }
.tz { transform-box: view-box; animation: tz-go 420ms cubic-bezier(0.55, 0, 0.75, 0.2) forwards; }
.tz-1 { transform-origin: 160px 160px; --dx: 0px; --s: 7; animation-delay: 440ms; }
.tz-2 { transform-origin: 191px 160px; --dx: -31px; --s: 7; animation-delay: 520ms; }
.tz-3 { transform-origin: 216px 160px; --dx: -56px; --s: 7; animation-delay: 600ms; }
/* le point, lui, s'éloigne : il se recentre et devient de plus en plus petit jusqu'à disparaître */
.tz-4 { transform-origin: 232px 160px; --dx: -72px; --s: 0; animation-delay: 680ms; animation-duration: 480ms; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
.tr-line { animation: tr-on 150ms ease-out forwards; }
.tr-dot { animation: tr-on-f 150ms ease-out forwards; }
.tr-glow { opacity: 0; animation: tr-glow 400ms ease-out forwards; }
.tr-4 { animation-delay: 60ms; }
.tr-3 { animation-delay: 140ms; }
.tr-2 { animation-delay: 220ms; }
.tr-1 { animation-delay: 300ms; }
/* le halo du grand rond s'éteint au moment où il part, pour qu'il reste fin en grandissant */
.tz-1 .tr-glow { animation: tr-glow 400ms ease-out 300ms forwards, tz-off 140ms ease-out 440ms forwards; }
.tz-2 .tr-glow { animation: tr-glow 400ms ease-out 220ms forwards, tz-off 140ms ease-out 520ms forwards; }
.tz-3 .tr-glow { animation: tr-glow 400ms ease-out 140ms forwards, tz-off 140ms ease-out 600ms forwards; }
.tz-4 .tr-glow { animation: tr-glow 400ms ease-out 60ms forwards, tz-off 140ms ease-out 680ms forwards; }
@media (prefers-reduced-motion: reduce) {
  .tr-line { animation: none; stroke: #ff5a1f; }
  .tr-dot { animation: none; fill: #ff5a1f; }
  .tr-glow { animation: none; opacity: 0.6; }
}

/* contrôle biométrique : le logo allumé */
.a3-lit circle { filter: none; }
.a3-litpulse { animation: a3-litpulse 900ms var(--ease-out) both; }
@keyframes a3-litpulse { from { transform: scale(0.94); opacity: 0.6; } to { transform: scale(1); opacity: 1; } }

/* message partagé */
.a3-chat { flex: 1; min-height: 0; background: var(--surface-2); padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.a3-bubble { align-self: flex-end; max-width: 86%; background: #dff3e6; color: var(--ink); border-radius: 16px 16px 4px 16px; padding: 10px 12px; font: 400 14px/20px var(--font-sans); white-space: pre-line; }
/* aperçu du lien dans le message (comme WhatsApp le fait avec un lien qui a une image d'aperçu) */
.a3-linkcard { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 8px; border-radius: 10px; background: rgba(11, 11, 12, 0.05); }
.a3-linkcard__t { display: block; font: 600 13px/18px var(--font-sans); color: var(--ink); }
.a3-linkcard__d { display: block; font: 400 12px/16px var(--font-sans); color: var(--ink-2); }
.a3-linkcard__u { display: block; font: 500 11px/14px var(--font-sans); color: var(--muted); margin-top: 2px; }
.a3-compose { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: var(--surface-2); }
.a3-compose__box { flex: 1; min-width: 0; background: #ffffff; border-radius: 20px; padding: 10px 14px; font: 400 14px/20px var(--font-sans); color: var(--ink); white-space: pre-line; max-height: 200px; overflow-y: auto; }
.a3-send { appearance: none; border: 0; cursor: pointer; width: 46px; height: 46px; flex: none; border-radius: 999px; background: #1fa35a; color: #ffffff; display: grid; place-items: center; }
.a3-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* écran d'accueil Android */
.a3-home { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #eaeae7; }
.a3-app { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 500 11px/14px var(--font-sans); color: #3a3a3e; }
.a3-app__icon { width: 56px; height: 56px; border-radius: 999px; background: #ffffff; display: grid; place-items: center; color: #8c8c90; }
.a3-app__icon .er-icon { width: 26px; height: 26px; stroke-width: 1.6; }
button.a3-app { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: #0b0b0c; font-weight: 600; }

/* 01.2 : l'animation du logo figée sur sa fin, « Continuer » visible */
.lx-final .lx-ring { animation: none !important; opacity: 1; transform: none; stroke: #0b0b0c; }
.lx-final .lx-dot { animation: none !important; transform: scale(1); fill: #0b0b0c; }
.lx-final .lx-c2, .lx-final .lx-c3 { animation: none !important; opacity: 1; transform: none; stroke: #0b0b0c; }
.lx-final .lx-flash, .lx-final .lx-halo, .lx-final .lx-c2-glow, .lx-final .lx-c3-glow, .lx-final .lx-ring-glow { animation: none !important; opacity: 0; }
.lx-final .lx-portal { animation: none !important; width: 0.614em; }
.lx-final .lx-left { animation: none !important; right: calc(100% + 0.029em); }
.lx-final .lx-right { animation: none !important; left: calc(100% - 0.016em); }
.lx-final .lx-ein, .lx-final .lx-sen { animation: none !important; opacity: 1; color: #0b0b0c; text-shadow: none; }
.lx-final .lx-cta { animation: none !important; opacity: 1; visibility: visible; transform: none; }

/* ---------- Chargement : le logo respire en aller-retour ----------
   point → petit rond → rond moyen → grand rond → rond moyen → petit rond → point → …
   un tour = 1,8 s (0,3 s par passage) */
@keyframes br4-c { 0% { fill: #ff5a1f; } 14% { fill: #0b0b0c; } 86% { fill: #0b0b0c; } 100% { fill: #ff5a1f; } }
@keyframes br4-g { 0% { opacity: 1; } 14% { opacity: 0; } 86% { opacity: 0; } 100% { opacity: 1; } }
@keyframes br3-c { 0% { stroke: #0b0b0c; } 4% { stroke: #0b0b0c; } 16.7% { stroke: #ff5a1f; } 30% { stroke: #0b0b0c; } 70% { stroke: #0b0b0c; } 83.3% { stroke: #ff5a1f; } 96% { stroke: #0b0b0c; } 100% { stroke: #0b0b0c; } }
@keyframes br3-g { 0% { opacity: 0; } 4% { opacity: 0; } 16.7% { opacity: 1; } 30% { opacity: 0; } 70% { opacity: 0; } 83.3% { opacity: 1; } 96% { opacity: 0; } 100% { opacity: 0; } }
@keyframes br2-c { 0% { stroke: #0b0b0c; } 21% { stroke: #0b0b0c; } 33.3% { stroke: #ff5a1f; } 46% { stroke: #0b0b0c; } 54% { stroke: #0b0b0c; } 66.7% { stroke: #ff5a1f; } 79% { stroke: #0b0b0c; } 100% { stroke: #0b0b0c; } }
@keyframes br2-g { 0% { opacity: 0; } 21% { opacity: 0; } 33.3% { opacity: 1; } 46% { opacity: 0; } 54% { opacity: 0; } 66.7% { opacity: 1; } 79% { opacity: 0; } 100% { opacity: 0; } }
@keyframes br1-c { 0% { stroke: #0b0b0c; } 37% { stroke: #0b0b0c; } 50% { stroke: #ff5a1f; } 63% { stroke: #0b0b0c; } 100% { stroke: #0b0b0c; } }
@keyframes br1-g { 0% { opacity: 0; } 37% { opacity: 0; } 50% { opacity: 1; } 63% { opacity: 0; } 100% { opacity: 0; } }
.br-glow { opacity: 0; }
.br-line.br-1 { animation: br1-c 1800ms linear infinite; }
.br-glow.br-1 { animation: br1-g 1800ms linear infinite; }
.br-line.br-2 { animation: br2-c 1800ms linear infinite; }
.br-glow.br-2 { animation: br2-g 1800ms linear infinite; }
.br-line.br-3 { animation: br3-c 1800ms linear infinite; }
.br-glow.br-3 { animation: br3-g 1800ms linear infinite; }
.br-dot.br-4 { animation: br4-c 1800ms linear infinite; }
.br-glow.br-4 { animation: br4-g 1800ms linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .br-line, .br-dot, .br-glow { animation-duration: 5400ms !important; }
  .ev-coin, .ev-track__fill { transition: none; }
  .ev-in { animation: none; }
  .lx-ring{animation:none;opacity:1;transform:none;stroke:#0b0b0c}
  .lx-dot{animation:none;transform:scale(1);fill:#0b0b0c}
  .lx-c2,.lx-c3{animation:none;opacity:1;transform:none;stroke:#0b0b0c}
  .lx-flash,.lx-halo,.lx-c2-glow,.lx-c3-glow,.lx-ring-glow{animation:none;opacity:0}
  .lx-portal{animation:none;width:0.614em}
  .lx-left{animation:none;right:calc(100% + 0.029em)}
  .lx-right{animation:none;left:calc(100% - 0.016em)}
  .lx-ein,.lx-sen{animation:lx-slow-fade 480ms ease-out forwards;color:#0b0b0c;text-shadow:none}
  .lx-cta{animation:lx-cta 300ms ease-out 600ms forwards}
}

/* — fin du CSS de la maquette v3 (recopié tel quel), puis ses deux règles de page — */

body{margin:0;background:#ffffff}
a{color:#c43d0b}a:hover{color:#0b0b0c}

/* ======================================================================================================================
   C1-v3 — l'appli en vrai (ajouts au CSS de la maquette v3, recopié tel quel ci-dessus). Aucune valeur inventée : des jetons, ou des
   valeurs déjà présentes dans la maquette.
   ====================================================================================================================== */
/* Les drapeaux du choix du pays (03.2) : la police de la maquette v3, « Noto Color Emoji » (Google Fonts, licence SIL OFL 1.1), seulement
   la partie des drapeaux (U+1F1E6-1F1FF), servie par notre serveur (la règle de sécurité n'autorise que nos propres fichiers). */
@font-face { font-family: "Noto Color Emoji"; src: url("noto-color-emoji-drapeaux.woff2") format("woff2"); unicode-range: U+1F1E6-1F1FF; font-display: swap; }
/* Sur un ordinateur : le téléphone de la maquette, centré dans la page. */
body { min-height: 100vh; display: grid; place-items: center; }
/* Le vrai lien de la page de preuve est plus long que celui de la maquette : il revient à la ligne au lieu de dépasser de la bulle. */
.a3-bubble, .a3-compose__box { overflow-wrap: anywhere; }
/* Le capteur biométrique se tient (doigt posé) : pas de défilement, de sélection ni de menu pendant l'appui. */
.a3-capteur { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Sur un téléphone (et dans l'APK) : l'appli en plein écran, sans le cadre, la caméra ni la barre Android dessinés (le vrai téléphone a les siens). */
@media (max-width: 500px) {
  body { display: block; min-height: 0; }
  .a3-device { width: 100vw; height: 100vh; height: 100dvh; padding: 0; border-radius: 0; box-shadow: none; background: var(--surface); }
  .a3-screen { width: 100%; height: 100%; border-radius: 0; }
  .a3-cam, .a3-sysnav { display: none; }
  .a3-top { height: calc(env(safe-area-inset-top, 0px) + var(--space-3)); }
  .a3-sheet-wrap { bottom: 0; }
}

/* C2 (APK) : sans réseau, « Pas de connexion · Einrosen réessaie… » par-dessus l'appli (le logo qui se charge, comme au 05.2) */
.a3-horsligne { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); background: var(--surface); text-align: center; font-family: var(--font-sans); }
.a3-horsligne svg { margin-bottom: var(--space-6); }
.a3-horsligne__titre { margin: 0; font: 650 20px/26px var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }