html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);background:#070816}
/* Thème : observatoire de nuit. Étoiles dorées, aurore cyan, nébuleuse violette. Un seul look sombre. */
:root{
  --bg:#070816; --surface:#101437; --surface2:#1a2050; --fg:#eef0ff; --muted:#a6abd8; --line:#2a3068;
  --accent:#7de8ff; --accent-ink:#04141a; --star:#ffe29a; --nebula:#b79cff; --pink:#ff9fd0;
  --easy:#7de8ff; --bonus:#b79cff; --test:#ffe29a; --swim:#6fb4ff; --renfo:#8ff0c0;
  --ok:#8ff0c0; --ok-soft:#12352f; --warn:#ffc27a; --warn-soft:#3a2a17; --info-soft:#17284f; --test-soft:#3a3118;
  --display:"Orbitron","Futura",system-ui,sans-serif; --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:
 radial-gradient(1.5px 1.5px at 12% 18%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 72% 9%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 38% 64%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 88% 42%,#fffa 50%,transparent 51%),radial-gradient(1px 1px at 22% 86%,#fff8 50%,transparent 51%),radial-gradient(2px 2px at 58% 30%,#ffe29aaa 50%,transparent 51%),radial-gradient(1px 1px at 6% 52%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 94% 78%,#fff8 50%,transparent 51%),
 radial-gradient(ellipse at 85% 8%,#3b1f6b66 0%,transparent 55%),radial-gradient(ellipse at 10% 95%,#0f4a6a55 0%,transparent 55%),var(--bg);
 background-attachment:fixed;background-size:420px 520px,380px 460px,460px 540px,400px 480px,440px 500px,520px 600px,360px 420px,480px 560px,100% 100%,100% 100%,100% 100%;
 color:var(--fg);font:16px/1.5 var(--body);padding-inline:16px;padding-block:20px 48px}
.wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.15}
h2{font-size:20px;font-weight:700}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.16em}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.hint{font-size:13px;color:var(--muted);margin:0}

/* héros */
.hero{position:relative;display:flex;flex-direction:column;gap:10px;padding-block:40px 8px}
.hero h1{font-size:clamp(34px,10vw,58px);font-weight:800;letter-spacing:.02em;text-shadow:0 0 26px #7de8ff66}
.hero h1 small{display:block;font-size:.3em;letter-spacing:.3em;color:var(--star);text-transform:uppercase;font-weight:600;margin-bottom:6px}
.hero .sky{display:block;width:calc(100% + 32px);max-width:none;margin:4px -16px -8px;height:auto}
.rank{margin:0;font-size:14px;color:var(--muted)}
.rank b{color:var(--star);font-family:var(--display);font-size:15px}
.goals{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--accent);color:var(--accent);border-radius:999px;padding:5px 12px;font-weight:700;font-size:14px}
.quote{margin:0;font-style:italic;color:var(--muted);font-size:15px}
.tw{animation:tw 3.4s ease-in-out infinite}.tw.d2{animation-delay:-1.1s}.tw.d3{animation-delay:-2.2s}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
.shoot{animation:shoot 7s linear infinite;opacity:0}
@keyframes shoot{0%,70%{opacity:0;transform:translate(0,0)}72%{opacity:1}85%{opacity:0;transform:translate(-120px,60px)}100%{opacity:0}}
.planet-bob{animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.sonde-bob{animation:bob 2.4s ease-in-out infinite}

/* cartes */
.card{background:linear-gradient(180deg,#141a46,#0e1236);border:1px solid #7de8ff2e;box-shadow:0 0 0 1px #0006,0 10px 30px #0006;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.orn{display:flex;align-items:center;gap:10px}
.orn::before,.orn::after{content:"";flex:1;min-width:18px;height:1px;background:linear-gradient(90deg,transparent,#7de8ff88,transparent)}
.orn span{flex:0 1 auto;min-width:0;text-align:center}
.mtitle{font-size:clamp(17px,5vw,22px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;align-self:flex-start;padding-bottom:6px;border-bottom:3px solid var(--accent)}
.savebar{padding:12px 14px;border-radius:14px;background:var(--warn-soft);border:1px solid #ffc27a77;font-size:14.5px}
.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:16px;background:#070816e8;backdrop-filter:blur(8px);border:1px solid #7de8ff33}
.tabs button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 8px;background:transparent;color:var(--muted);font:700 15px var(--body)}
.tabs button svg{width:20px;height:20px}
.tabs button[aria-selected="true"]{background:linear-gradient(180deg,#26307a,#161c52);color:var(--accent);box-shadow:inset 0 0 0 1px #7de8ff66}

/* aujourd'hui */
.today{border-color:#7de8ffaa;background:linear-gradient(160deg,#1f2a74,#0e1236 70%);box-shadow:0 0 30px #7de8ff22,0 10px 30px #0006}
.t-big{font-size:clamp(28px,8.5vw,40px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;align-self:flex-start;padding-bottom:6px;border-bottom:3px solid var(--accent)}
.status{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--surface2)}
.status i{flex:none;width:14px;height:14px;border-radius:50%}
.status p{margin:0;font-size:15px}
.status.go{background:#123a44}.status.go i{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.status.wait{background:var(--warn-soft)}.status.wait i{background:var(--warn);box-shadow:0 0 10px var(--warn)}
.mrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;width:100%;padding:14px 16px;border-radius:12px;border:0;border-left:5px solid var(--easy);background:#18205a;color:var(--fg)}
.mrow.k-test{border-left-color:var(--test)}
.mrow:hover{background:#202a6e}
.mrow .mk{grid-column:1;font-size:11px;color:#a9d9ff;text-transform:uppercase}
.mrow .mt{grid-column:1;font-family:var(--display);font-size:20px;font-weight:700}
.mrow .mm{grid-column:1;font-size:14px;color:var(--muted)}
.mrow .md{grid-column:2;grid-row:1/4;align-self:center;font-size:12px;color:var(--accent);text-transform:uppercase}
.today .t-title{font-family:var(--display);font-size:22px;margin:0}
.today .t-meta{color:var(--muted);font-size:15px;margin:0}

/* journal de bord */
.journal{background:linear-gradient(180deg,#0a1230,#0b0f2a);border:1px solid #7de8ff44;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.journal::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#7de8ff33,transparent 70%)}
.jr-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.jr-head{font-size:clamp(20px,5.6vw,26px);font-weight:700;margin:0}
.jr-sub{margin:0;color:var(--muted);font-size:15px;font-style:italic}
.journal p{margin:0;font-size:15px}
.jr-tip{border-top:1px dashed #7de8ff44;padding-top:8px;font-size:13.5px;color:var(--muted)}

/* carte du ciel */
.starmap{gap:14px}
.scene{position:relative;border-radius:14px;overflow:hidden;border:1px solid #2a3068;background:#050716}
.scene svg{display:block;width:100%;height:auto}
.scene .count{position:absolute;right:14px;top:10px;text-align:right}
.scene .count b{display:block;font-family:var(--display);font-size:clamp(24px,7vw,32px);font-weight:800;line-height:1}
.scene .count span{font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.con-on line{stroke:var(--star);stroke-width:1.6}
.con-on circle{fill:var(--star);filter:drop-shadow(0 0 4px #ffe29a)}
.con-on circle.tw2{animation:tw 2.6s ease-in-out infinite}
.con-off line{stroke:#3b4388;stroke-width:1;stroke-dasharray:3 3}
.con-off circle{fill:#4a5299}
.tiles3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tiles3 div{background:#0e1236;border:1px solid #2a3068;border-radius:12px;padding:10px 12px;min-width:0}
.tiles3 b{display:block;font-family:var(--display);font-size:clamp(14px,4.2vw,20px);font-weight:700;white-space:nowrap}
.tiles3 span{font-size:12px;color:var(--muted);line-height:1.3;display:block}
.tiles3 .hot b{color:var(--star)}
.qrow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.qt{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:8px 2px;border-radius:10px;background:#0e1236;border:1px solid #2a3068;color:#4a5299;min-width:0}
.qt svg{width:100%;max-width:44px;height:auto}
.qt b{font-size:9.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1.15;color:inherit}
.qt span{font-size:10px;color:var(--muted)}
.qt.on{background:linear-gradient(180deg,#2c2a12,#0e1236);color:var(--star);border-color:#ffe29a55}
.qt.on b{color:var(--fg)}
.qt.nx{border:1.5px solid var(--accent);color:var(--accent)}
.qt.nx b{color:var(--fg)}
.trail-msg{font-size:15px;margin:0}.trail-msg b{color:var(--star)}
.chapcard{display:grid;grid-template-columns:64px 1fr;gap:6px 14px;align-items:center;background:#070a22;border:1px solid #2a3068;border-radius:14px;padding:16px}
.chapcard svg{width:64px;height:54px}
.chapcard .k{font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.chapcard h3{font-size:18px;color:var(--star);margin:2px 0 0}
.chapcard p{grid-column:1/-1;margin:6px 0 0;font-family:Georgia,serif;font-size:15.5px;line-height:1.6}
.chapcard .nxt{grid-column:1/-1;font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.rec .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rec .row span{font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.rec .row b{font-family:var(--display);font-size:22px}
.rec .track{height:10px;border-radius:99px;background:#1a2050;overflow:hidden;margin:6px 0}
.rec .track i{display:block;height:100%;background:linear-gradient(90deg,#4fb8ff,var(--accent),var(--star));border-radius:99px}
.rec p{margin:0;font-size:13px;color:var(--muted)}

/* semaine */
.weekbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.weekbar .t{display:flex;flex-direction:column}
.weekbar strong{font-family:var(--display);font-size:22px;font-weight:700}
.nav{display:flex;gap:6px}
.icon{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font-size:20px;font-weight:700}
.icon:disabled{opacity:.35;cursor:default}
.rules{font-size:14px;color:var(--muted);margin:0}
.session{border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#131a4a,#0e1236);overflow:hidden}
.session>summary{list-style:none;display:grid;grid-template-columns:6px 1fr auto;gap:14px;align-items:stretch;padding:16px 16px 16px 0;cursor:pointer}
.session>summary::-webkit-details-marker{display:none}
.stripe{border-radius:0 6px 6px 0;background:var(--easy)}
.k-bonus .stripe{background:var(--bonus)}.k-test .stripe{background:var(--test)}.k-swim .stripe{background:var(--swim)}.k-renfo .stripe{background:var(--renfo)}
.s-head{display:flex;flex-direction:column;gap:4px;min-width:0}
.s-tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--easy)}
.k-bonus .s-tag{color:var(--bonus)}.k-test .s-tag{color:var(--test)}.k-swim .s-tag{color:var(--swim)}.k-renfo .s-tag{color:var(--renfo)}
.s-title{font-family:var(--display);font-size:18px;font-weight:700}
.s-meta{font-size:14px;color:var(--muted)}
.done{align-self:center;font-size:13px;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--ok-soft);color:var(--ok);white-space:nowrap}
.todo{align-self:center;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.seal{align-self:center;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#e0a93a 65%,#a8741a);color:#2a1a02;font:800 10px/1.1 var(--body);text-align:center;box-shadow:0 0 14px #ffe29a77;transform:rotate(-8deg);padding:4px}
.seal b{display:block;font-family:var(--display);font-size:16px}
.s-body{padding:0 18px 18px;display:flex;flex-direction:column;gap:14px}
.goal{background:var(--surface2);border-radius:12px;padding:10px 12px;font-size:15px}
ol.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:st}
ol.steps>li{counter-increment:st;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
ol.steps>li::before{content:counter(st);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--accent);color:var(--accent-ink)}
.rep{border-left:3px solid var(--nebula);padding-left:10px;margin-top:4px;display:flex;flex-direction:column;gap:4px}
.pace{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)}
.recipe{background:var(--surface2);border-radius:12px;padding:12px 14px;font-size:15px}.recipe ol{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}.recipe ul{margin:4px 0 0;padding-left:18px}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:700;background:var(--accent);color:var(--accent-ink)}
.btn.sec{background:var(--surface2);color:var(--fg)}
.btn.small{padding:8px 12px;font-size:14px}
.btn:disabled{opacity:.5;cursor:default}
.btn svg{width:18px;height:18px;vertical-align:-3px;margin-right:6px}
form.log{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--surface2);border-radius:14px;padding:14px}
form.log .full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted);min-width:0}
input,select,textarea{font:16px var(--body);color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0;width:100%}
input[type=range]{padding:0;accent-color:var(--accent)}
.rangeval{color:var(--fg);font-weight:700}
.calc{font-size:14px;color:var(--fg);font-weight:600;margin:0}
.result{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.stat{background:var(--surface2);border-radius:12px;padding:10px 12px}
.stat b{display:block;font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted);font-weight:600}
.note{border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.note.ok{background:var(--ok-soft)}.note.warn{background:var(--warn-soft)}.note.info{background:var(--info-soft)}.note.test{background:var(--test-soft)}
.note h3{font-size:16px}
.note p{margin:0;font-size:15px}
.note q{font-style:italic;color:var(--muted)}
.letter .sig{font-style:italic;text-align:right;opacity:.8}
.paces{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.paces .stat b{font-size:22px}
details.plain>summary{cursor:pointer;font-weight:700}
.manual{display:flex;flex-direction:column;gap:10px}
.manual details{background:var(--surface2);border-radius:12px;padding:12px 14px}
.manual summary{cursor:pointer;font-weight:700;color:var(--accent)}
.manual p,.manual ul{margin:8px 0 0;font-size:15px}.manual ul{padding-left:20px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:15px}
td,th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.empty{color:var(--muted);font-size:15px;margin:0}
.foot{font-size:13px;color:var(--muted);text-align:center}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;font-size:14px;max-width:calc(100% - 32px);z-index:60}
.lognote{display:flex;flex-direction:column;gap:6px;padding-block:12px;border-bottom:1px solid var(--line)}
.lognote:last-child{border-bottom:0}
.lognote .top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:600}

/* registre */
.registre{gap:14px}
.rstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rstats div{background:#0e1236;border:1px solid #2a3068;border-radius:12px;padding:12px}
.rstats b{display:block;font-family:var(--display);font-size:clamp(20px,6vw,26px);font-variant-numeric:tabular-nums}
.rstats span{font-size:13px;color:var(--muted)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.rcard{background:#0e1236;border:1px solid #2a3068;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.rcard .big{font-family:var(--display);font-size:clamp(28px,8vw,36px);font-weight:800;color:var(--star);line-height:1}
.rcard p{margin:0;font-size:14px;color:var(--muted)}
.rcard p b{color:var(--fg)}
.kmchart svg,.painchart svg{display:block;width:100%;height:auto}
.badge-id{position:relative;background:linear-gradient(160deg,#18205f,#0b1030);border:1px solid #ffe29a66;border-radius:16px;padding:16px;display:grid;grid-template-columns:84px 1fr;gap:4px 14px;align-items:center;box-shadow:0 0 24px #ffe29a18}
.badge-id svg{width:84px;height:84px;grid-row:1/4}
.badge-id .nm{font-family:var(--display);font-size:26px;font-weight:800}
.badge-id .ti{color:var(--star);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.badge-id p{margin:0;font-size:13.5px;color:var(--muted)}
.relics{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px 8px}
.relic{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:#4a5299}
.relic svg{width:54px;height:54px}
.relic b{font-size:12.5px;line-height:1.25;color:var(--muted)}
.relic.on{color:var(--star)}
.relic.on b{color:var(--fg)}

/* animations */
.star-fly{position:fixed;z-index:50;width:90px;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,#fff,#ffe29a);border-radius:2px;box-shadow:0 0 12px 3px #ffe29a99;animation:sfly 1.3s ease-in forwards}
@keyframes sfly{0%{left:105%;top:8%;opacity:0;transform:rotate(25deg)}10%{opacity:1}100%{left:-120px;top:48%;opacity:0;transform:rotate(25deg)}}
.sat-fly{position:fixed;z-index:45;width:46px;pointer-events:none;opacity:.8;animation:satfly 16s linear forwards}
@keyframes satfly{0%{left:-60px;top:14%}100%{left:calc(100% + 60px);top:6%}}
.sparkle{animation:tw 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.tw,.shoot,.planet-bob,.sonde-bob,.sparkle,.con-on circle.tw2{animation:none}.star-fly,.sat-fly{display:none}.shoot{opacity:0}}
@media (prefers-reduced-motion:no-preference){.session[open] .s-body{animation:fade .2s ease}@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}}
@media (max-width:420px){form.log{grid-template-columns:1fr}.qt b{font-size:8.5px}}