/* Design repris de l'application RecallMe (ui/theme/Color.kt, Shape.kt, Type.kt) */
:root{
  --canvas:#fff;--surface:#fff;--variant:#F2F3F5;--outline:#DDE0E4;--text:#15171A;--muted:#6B7178;
  --inverse:#15171A;--on-inverse:#fff;--danger:#B3261E;--success:#2E7D32;
  --r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:28px;--sheet:56px;
  --font:Roboto,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --canvas:#131517;--surface:#1A1D20;--variant:#232629;--outline:#34383D;--text:#ECEEF0;--muted:#9BA1A8;
  --inverse:#ECEEF0;--on-inverse:#15171A;--danger:#E2503F;--success:#7CB582}}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font:400 16px/24px var(--font);letter-spacing:.1px;color:var(--text);background:var(--canvas)}
a{color:inherit}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}

/* ---------- Bandeau + feuille (WelcomeScreen) */
.hero{background:var(--inverse);color:var(--on-inverse);text-align:center;padding:36px 20px 76px;position:relative;overflow:hidden}
.hero .brand{display:flex;flex-direction:column;align-items:center}
.halo{position:relative;width:104px;height:104px;display:grid;place-items:center}
.halo svg{position:absolute;inset:0;width:100%;height:100%}
.halo .track{fill:none;stroke:var(--on-inverse);stroke-opacity:.16;stroke-width:3}
.halo .arc{fill:none;stroke:var(--on-inverse);stroke-width:3;stroke-linecap:round;stroke-dasharray:62 530;transform-origin:50% 50%;animation:spin 1.2s linear infinite}
.halo .disc{width:82px;height:82px;border-radius:50%;background:color-mix(in srgb,var(--on-inverse) 12%,transparent);display:grid;place-items:center;animation:breathe 2s ease-in-out infinite alternate}
.halo img{width:50px;height:50px}
.hero h1{font-size:26px;line-height:34px;font-weight:700;margin-top:12px}
.hero .slogan{font-size:15px;opacity:.78;margin-top:2px}
.unity{display:block;width:min(100%,520px);margin:10px auto 0}
.sheet{background:var(--canvas);margin-top:-48px;border-radius:var(--sheet) var(--r-md) 0 0;position:relative;padding:32px 0 8px}
.sheet h2{font-size:26px;line-height:34px;font-weight:700;text-align:center}
.sheet .sub{font-size:14px;line-height:20px;color:var(--muted);text-align:center;margin:6px auto 26px;max-width:520px}

/* ---------- Composants */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--r-md);font:500 15px var(--font);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:none}
.btn-fill{background:var(--inverse);color:var(--on-inverse)}
.btn-line{background:var(--surface);color:var(--text);border-color:var(--outline)}
.btn-danger{background:var(--danger);color:#fff}
.stack{display:grid;gap:12px;max-width:420px;margin:0 auto}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:28px 0}
.card{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-lg);padding:18px}
.card .ico{width:44px;height:44px;border-radius:50%;background:var(--variant);display:grid;place-items:center;margin-bottom:12px}
.card h3{font:500 16px/24px var(--font)}
.card p{font-size:14px;line-height:20px;color:var(--muted);margin-top:4px}
.note{background:var(--variant);border-radius:var(--r-md);padding:14px 16px;font-size:14px;line-height:20px;color:var(--muted)}
.foot{margin-top:40px;padding:28px 24px 40px;border-top:1px solid var(--outline);text-align:center;color:var(--muted);font-size:13px;line-height:20px}
.foot nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.foot nav a{text-decoration:none;font-weight:500;color:var(--text)}
.owner{display:inline-flex;align-items:center;gap:10px;margin-top:6px}
.owner img{height:34px;width:auto}
@media (prefers-color-scheme:dark){.owner img{background:#fff;border-radius:8px;padding:4px 8px}}

/* ---------- Pages légales */
.legal-top{background:var(--inverse);color:var(--on-inverse);padding:22px 20px 70px}
.legal-top .wrap{display:flex;align-items:center;gap:12px;padding:0 4px}
.legal-top a{text-decoration:none;display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px}
.legal-top img{width:34px;height:34px}
.legal-top .back{margin-left:auto;font-size:14px;font-weight:500;opacity:.85}
.legal h1{font-size:26px;line-height:34px;font-weight:700}
.legal .meta{color:var(--muted);font-size:13px;margin:4px 0 18px}
.legal .sec{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-lg);padding:20px;margin:14px 0}
.legal .sec h2{display:flex;align-items:center;gap:12px;font:500 18px/26px var(--font);margin-bottom:10px}
.legal .sec h2 .ico{width:40px;height:40px;border-radius:50%;background:var(--variant);display:grid;place-items:center;flex:none}
.legal ul{padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:22px}
.legal p{font-size:15px;line-height:22px;margin:8px 0}
.legal li b,.legal p b{font-weight:500}
.legal .muted{color:var(--muted)}
.legal table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px;margin-top:6px}
.legal th,.legal td{text-align:left;padding:10px 8px;border-top:1px solid var(--outline);vertical-align:top}
.legal th{color:var(--muted);font-weight:500;border-top:0}
.tbl{overflow-x:auto}

/* ---------- Écran de démarrage (SplashScreen) */
#splash{position:fixed;inset:0;z-index:50;background:var(--inverse);color:var(--on-inverse);display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:120px;transition:opacity .45s ease,visibility .45s}
#splash.hide{opacity:0;visibility:hidden}
#splash .halo{width:168px;height:168px;animation:pop .55s cubic-bezier(.4,0,.2,1) both}
#splash .halo .disc{width:132px;height:132px}
#splash .halo img{width:80px;height:80px}
#splash h1{font-size:30px;font-weight:700;margin-top:22px;animation:up .55s .15s cubic-bezier(.4,0,.2,1) both}
#splash .slogan{font-size:14px;opacity:.75;margin-top:6px;animation:fade .55s .3s both}
#splash .bottom{position:absolute;left:0;right:0;bottom:0;height:120px;background:var(--canvas);border-radius:var(--sheet) var(--r-md) 0 0;display:grid;place-items:center;animation:rise .55s cubic-bezier(.4,0,.2,1) both}
#splash .bar{width:96px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--muted) 20%,transparent);overflow:hidden}
#splash .bar i{display:block;height:100%;width:40%;border-radius:4px;background:var(--inverse);animation:slide 1.1s cubic-bezier(.4,0,.2,1) infinite}

/* ---------- Animations (la même grammaire que l'application) */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{from{transform:scale(.97)}to{transform:scale(1.04)}}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(100%)}to{transform:none}}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.14)}30%{transform:scale(1)}45%{transform:scale(1.08)}}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.9}}
.unity .p,.unity .u-heart,.unity .u-spark,.unity .u-halo{transform-box:fill-box;transform-origin:center}
.unity .u-halo{animation:breathe 4s ease-in-out infinite alternate}
.unity .p{animation:bob 3.2s ease-in-out infinite}
.unity .p2{animation-delay:-.6s}.unity .p3{animation-delay:-1.2s}.unity .p4{animation-delay:-1.8s}.unity .p5{animation-delay:-2.4s}
.unity .u-heart{animation:beat 2.4s ease-in-out infinite}
.unity .u-spark{animation:twinkle 2.6s ease-in-out infinite}
.unity .s1{animation-delay:-.7s}.unity .s2{animation-delay:-1.3s}.unity .s3{animation-delay:-1.9s}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}#splash{display:none}}
.sprite{position:absolute;width:0;height:0;overflow:hidden}